/* C27 · 上岸有数: a daily study workbench. Shared tokens and primitives. */
:root{
 --echo-paper:#fcf8fa;--echo-white:#fff;--echo-blush:#fce6ef;
 --echo-rose:#be285e;--echo-rose-dark:#98204c;--echo-ink:#392b35;
 --echo-muted:#735d6b;--echo-faint:#806c78;--echo-line:#eadce4;
 --echo-green:#286f59;--echo-shadow:0 2px 8px #41243a05;
 --echo-ease:cubic-bezier(.2,0,0,1);--echo-fast:120ms;--echo-standard:180ms;--echo-slow:260ms;
 --paper:var(--echo-paper);--base:var(--echo-paper);--rail:#47263e;
 --surface:var(--echo-white);--raised:var(--echo-blush);--ink:var(--echo-ink);
 --ink-muted:var(--echo-muted);--muted:var(--echo-muted);--quiet:var(--echo-faint);
 --line:var(--echo-line);--accent:var(--echo-rose);--accent-dark:var(--echo-rose-dark);
 --accent-fill:var(--echo-rose);--hover:#fae8f0;--success:var(--echo-green);--error:#a32d44;
 --warning:#875a18;--input:#faf5f8;--shadow:var(--echo-shadow);
 --radius-control:10px;--radius-panel:16px;--radius-cover:20px;
 color-scheme:light;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei UI",sans-serif;font-size:15px;line-height:1.65;
}
*,*::before,*::after{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);min-width:320px;-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}button,input,select,textarea{font:inherit}button,a,summary{touch-action:manipulation}button,summary{cursor:pointer}a{color:inherit;text-decoration:none}
button:disabled{cursor:not-allowed;opacity:.55}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
button{transition:background-color var(--echo-fast),border-color var(--echo-fast),color var(--echo-fast),transform var(--echo-fast) var(--echo-ease)}button:active:not(:disabled){transform:scale(.98)}
h1,h2,h3,h4,p{overflow-wrap:anywhere}h1,h2,h3,h4{color:var(--ink)}h1{font-size:32px;line-height:1.3;letter-spacing:-.8px}h2{font-size:22px;line-height:1.45;letter-spacing:-.4px}h3{font-size:18px;line-height:1.5}
.primary,.secondary,.quiet-button{display:inline-flex;justify-content:center;align-items:center;gap:8px;min-height:44px;padding:11px 18px;border-radius:var(--radius-control);font:inherit;font-size:14px;font-weight:600;border:1px solid transparent;line-height:1.45;white-space:normal}
.primary{background:var(--accent);color:#fff;box-shadow:none}.primary:hover:not(:disabled){background:var(--accent-dark)}.secondary{border-color:var(--line);background:var(--surface);color:var(--ink)}.secondary:hover:not(:disabled){background:var(--raised);border-color:#d9a9bf}
.quiet-button,.text-button{border:0;background:transparent;color:var(--muted)}.text-button{font:inherit;display:inline-flex;align-items:center;min-height:44px;padding:8px 10px;border-radius:8px;font-size:13px}.text-button:hover:not(:disabled){background:var(--raised);color:var(--accent)}
.muted,.small-note,.scope-note{color:var(--muted)}.small-note,.scope-note{font-size:13px;line-height:1.8}.eyebrow{font-size:12px;color:var(--accent);font-weight:650;letter-spacing:.4px}.echo-date{font-size:13px;color:var(--muted);display:inline-flex;gap:8px;align-items:center;white-space:nowrap}.echo-date::before{content:"";width:6px;height:6px;background:var(--accent);border-radius:50%}
.echo-mark{display:flex;gap:3px;align-items:center;height:28px}.echo-mark i{display:block;width:6px;height:12px;border:1.5px solid currentColor;border-radius:6px}.echo-mark i:nth-child(2){height:22px}.echo-mark i:nth-child(3){height:16px}
.echo-chip,.echo-tag{display:inline-flex;gap:6px;align-items:center;padding:5px 9px;font-size:12px;border-radius:6px}.echo-chip{color:var(--muted);background:var(--input)}.echo-tag{color:var(--accent);background:var(--raised)}
.echo-enter{animation:echo-enter var(--echo-standard) var(--echo-ease) both}@keyframes echo-enter{from{opacity:.5;transform:translateY(4px)}to{opacity:1;transform:none}}
/* Compact contextual cover; the operation beneath it is the focal point. */
.studio-hero{--scene-x:0px;--scene-y:0px;position:relative;display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:24px;align-items:center;min-height:184px;padding:24px 28px;margin:0 0 24px;border:1px solid #efd1df;border-radius:var(--radius-cover);background:linear-gradient(115deg,#fce1ed,#fdf0f6);isolation:isolate;overflow:visible}
.studio-hero .page-heading,.studio-hero .atelier-heading{display:block;position:relative;z-index:2;margin:0;padding:0;min-width:0}.hero-meta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:8px}.studio-badge{display:inline-flex;align-items:center;gap:6px;padding:0;font-size:12px;font-weight:600;color:var(--accent-dark);background:transparent;border:0;border-radius:0}.studio-badge::before{content:'✦';color:var(--accent)}
.studio-hero .heading-kicker,.studio-hero .atelier-kicker{font-size:12px;letter-spacing:.3px;color:var(--accent-dark);margin:0 0 8px;font-weight:600}.studio-hero .heading-kicker{display:none}.studio-hero .page-heading h1,.studio-hero .atelier-heading h1{font-size:32px;line-height:1.3;letter-spacing:-.8px;font-weight:750;margin:0 0 10px;white-space:normal;max-width:none;color:var(--ink)}
.studio-hero .subtitle,.studio-hero .atelier-heading p:last-of-type{font-size:14px;color:var(--muted);line-height:1.8;max-width:60ch;margin:0}.hero-links{display:flex;align-items:center;gap:20px;font-size:12px;color:var(--muted);margin-top:8px}.hero-links a{color:var(--accent-dark);font-size:13px;font-weight:600;display:flex;align-items:center;gap:8px;min-height:36px}.hero-links a:hover{color:var(--accent)}.studio-hero .echo-date{font-size:12px}.studio-hero .atelier-page-tag{display:none}
.studio-art{position:absolute;inset:0;border-radius:inherit;overflow:hidden;z-index:-1;pointer-events:none}.studio-orbit{position:absolute;right:-40px;top:-80px;width:280px;height:280px;border:1px solid #fff;border-radius:50%;transform:translate(var(--scene-x),var(--scene-y))}.studio-orbit.orbit-two{right:-10px;top:-48px;width:216px;height:216px;border-color:#eac5d7}.studio-spark{position:absolute;right:22%;top:24px;font-size:24px;color:#d486aa;transform:translate(var(--scene-x),var(--scene-y))}.spark-two{right:3%;top:auto;bottom:20px;font-size:20px}
.studio-hero .studio-bunny{position:relative;z-index:3;margin:0!important;padding:0!important;border:0!important;border-radius:0;background:transparent!important;box-shadow:none;min-width:0;display:block;align-self:center;overflow:visible}
.studio-hero .studio-bunny .bunny-heading{display:flex;justify-content:space-between;gap:8px;align-items:center;padding:0;margin:0;color:var(--muted);font-size:12px}.studio-hero .studio-bunny .bunny-heading b{font-size:13px;color:var(--ink)}.studio-hero .studio-bunny .bunny-heading small{display:none}.studio-hero .studio-bunny .bunny-heading button{font-size:12px;border:0;background:transparent;min-height:44px;padding:8px;color:var(--muted);border-radius:8px}
.studio-hero .studio-bunny #bunny-body{display:block;min-height:0}.studio-hero .studio-bunny .bunny-stage{width:100%;height:120px;position:relative;overflow:hidden;margin:0;flex:none}.studio-hero .studio-bunny .bunny-stage::before{content:'';position:absolute;left:50%;top:4px;transform:translateX(-50%);width:112px;height:112px;border-radius:50%;background:#fff5fa}
.studio-hero .studio-bunny .bunny-stage img,.studio-hero .studio-bunny .bunny-stage canvas{position:relative;display:block;width:100%;height:100%;object-fit:contain;padding:0!important;background:transparent}.studio-hero .studio-bunny .bunny-ground{display:none}.studio-hero .studio-bunny .bunny-copy{padding:0;margin:0;min-width:0}.studio-hero .studio-bunny #bunny-status{font-size:12px;text-align:center;color:var(--muted);line-height:1.6;min-height:20px;margin:4px 0 0}.studio-hero .studio-bunny .bunny-hint{display:none}
.bunny-play{position:relative;text-align:center}.bunny-play>summary{display:inline-flex;align-items:center;justify-content:center;gap:8px;list-style:none;min-height:44px;padding:8px 12px;font-size:13px;font-weight:600;color:var(--accent-dark);border-radius:8px}.bunny-play>summary::-webkit-details-marker{display:none}.bunny-play>summary::after{content:'⌄'}.bunny-play[open]>summary{background:#fff}.bunny-play[open]>summary::after{content:'⌃'}
.bunny-play-panel{position:absolute;top:calc(100% + 6px);right:0;width:280px;padding:16px;border:1px solid var(--line);border-radius:16px;background:var(--surface);box-shadow:0 12px 36px #41243a18;z-index:50;text-align:left;animation:echo-enter var(--echo-standard) var(--echo-ease) both;transform-origin:top right}
.studio-hero .studio-bunny .bunny-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0}.studio-hero .studio-bunny .bunny-actions button{min-height:44px;background:var(--input);border:1px solid var(--line);border-radius:10px;padding:8px;font-size:13px;color:var(--ink);box-shadow:none}.studio-hero .studio-bunny .bunny-actions button:hover:not(:disabled){background:var(--raised);color:var(--accent);transform:none}.studio-hero .studio-bunny .bunny-options{display:flex;gap:8px;justify-content:center;margin:8px 0 0}.studio-hero .studio-bunny .bunny-options button{font-size:13px;padding:8px;min-height:44px;border:0;background:none;color:var(--muted)}.studio-hero .studio-bunny .bunny-options [aria-pressed=true]{color:var(--accent)}
.echo-reveal{animation:echo-appear var(--echo-slow) var(--echo-ease) both}@keyframes echo-appear{from{opacity:.65;transform:translateY(6px)}to{opacity:1;transform:none}}
.brand>.ans-product-mark,.atelier-brand>.ans-product-mark{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;flex:0 0 40px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:none}.ans-product-mark img{display:block;width:28px;height:28px;object-fit:contain}.brand>.ans-product-mark::before,.brand>.ans-product-mark::after{display:none}
@media(max-width:1100px){.studio-hero{grid-template-columns:minmax(0,1fr) 180px;gap:16px;padding:20px 24px}.hero-links>span{display:none}}
@media(max-width:760px){h1{font-size:28px}h2{font-size:20px}.studio-hero{grid-template-columns:minmax(0,1fr) 124px;gap:12px;padding:16px;margin-bottom:20px;min-height:200px;border-radius:16px}.studio-hero .page-heading h1,.studio-hero .atelier-heading h1{font-size:27px;letter-spacing:-.6px}.hero-meta{margin-bottom:8px}.studio-hero .echo-date{display:none}.studio-badge,.studio-hero .atelier-kicker{font-size:12px}.studio-hero .subtitle,.studio-hero .atelier-heading p:last-of-type{font-size:13px;line-height:1.75}.hero-links{margin-top:4px}.hero-links a{font-size:13px;min-height:44px}.studio-hero .studio-bunny .bunny-heading{justify-content:center}.studio-hero .studio-bunny .bunny-heading b{display:none}.studio-hero .studio-bunny .bunny-stage{height:112px}.studio-hero .studio-bunny .bunny-stage::before{width:102px;height:102px}.studio-hero .studio-bunny #bunny-status{font-size:12px;min-height:38px}.bunny-play-panel{width:264px}.studio-orbit{right:-80px}.studio-spark{right:34%;font-size:18px}.spark-two{right:5%;bottom:16px}}
@media(max-width:380px){.studio-hero{grid-template-columns:minmax(0,1fr) 100px;gap:8px;padding:16px 12px}.studio-hero .page-heading h1,.studio-hero .atelier-heading h1{font-size:24px}.bunny-play-panel{width:250px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.studio-orbit,.studio-spark{transform:none!important}}
@media print{.studio-hero{display:none!important}}

/* Keep the rabbit stage compact; actions open from their own control. */
.studio-hero .studio-bunny .bunny-heading{position:absolute;right:-8px;top:-12px;z-index:4}.studio-hero .studio-bunny .bunny-heading b{display:none}.studio-hero .studio-bunny .bunny-stage{height:104px}
@media(max-width:760px){.studio-hero .studio-bunny .bunny-heading{top:-16px}.studio-hero .studio-bunny .bunny-stage{height:112px}}

/* The native action disclosure must paint above the next work surface. */
.studio-hero{z-index:3}