/* ============================================================
   TOKENS
   ============================================================ */
:root{
  --ink:#1c1a19; --ink-soft:#5f5a57; --ink-faint:#9a938e;
  --black:#1a1816; --black-hi:#2c2926;
  --coral:#f0482b; --orange:#ff7a3c; --peach:#f8d0a6; --lilac:#e2c8cf; --mauve:#d1adae; --violet:#c9a8e8;
  --surface:#ffffff; --line:rgba(28,26,25,.12); --chip-line:rgba(28,26,25,.13);
  --font-disp:'Archivo',system-ui,sans-serif;
  --font-card:'Poppins',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --font-tc:'Noto Sans TC',sans-serif;
  --ease-out: cubic-bezier(.2,.7,.3,1);
  --ease-pop: cubic-bezier(.2,.9,.3,1.3);
  --r-sm: 13px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 26px;
  --r-pill: 999px;
  --shadow-soft: 0 8px 22px -12px rgba(0,0,0,.1);
}

/* ============================================================
   BASE / RESET
   ============================================================ */
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--font-body); color:var(--ink);
  -webkit-font-smoothing:antialiased; min-height:100vh; min-height:100dvh; position:relative;
  display:flex; flex-direction:column;
  background:
    radial-gradient(46% 42% at 18% -2%, rgba(240,72,43,.78), rgba(255,122,60,.3) 44%, transparent 70%),
    radial-gradient(50% 48% at 100% 102%, var(--violet), transparent 60%),
    radial-gradient(46% 44% at 82% 98%, var(--mauve), transparent 62%),
    radial-gradient(40% 40% at 98% 2%, var(--peach), transparent 60%),
    #f6eef0;
}
body.zh{ font-family:var(--font-tc); }
body.zh h1,body.zh .eyebrow,body.zh .chip{ font-family:var(--font-tc); }

.grain{ position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

.wrap{ position:relative; z-index:3; width:100%; max-width:880px; margin:0 auto; padding:0 28px; }

/* ============================================================
   LAYOUT — header / main / footer
   ============================================================ */
/* header */
header{ flex:none; }
.bar{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:22px 0; max-width:1180px; margin:0 auto; padding-left:32px; padding-right:32px; }
.brand{ display:inline-flex; align-items:center; gap:2px; font-family:var(--font-disp); font-stretch:125%; font-weight:800; font-size:1.35rem; letter-spacing:-.02em; color:var(--ink); text-decoration:none; }
.brand-mark{ height:25px; width:auto; display:block; }
.head-right{ display:flex; align-items:center; gap:13px; }
.nav-back{ font-size:.82rem; font-weight:600; color:var(--ink-soft); text-decoration:none; transition:.2s; white-space:nowrap; }
.nav-back:hover{ color:var(--ink); }
.lang{ display:inline-flex; border:1px solid var(--line); border-radius:var(--r-pill); overflow:hidden; background:rgba(255,255,255,.5); }
.lang button{ border:0; background:transparent; cursor:pointer; font-family:var(--font-body); font-size:.78rem; font-weight:700; color:var(--ink-faint); padding:6px 12px; transition:.2s; }
.lang button.active{ background:var(--ink); color:#fff; }

/* center stage */
main{ flex:1; display:flex; align-items:center; justify-content:center; padding:20px 0 40px; }
.stage{ width:100%; text-align:center; display:flex; flex-direction:column; align-items:stretch; }
/* default visual order matches DOM */
.stage .eyebrow{ order:1; align-self:center; }
.stage h1{ order:2; }
.stage .sub{ order:3; }
.stage .focus-title{ order:4; align-self:center; }
.stage .console{ order:5; }
.stage .chips{ order:6; }
.stage .showcase{ order:7; }
/* focus mode: title on top (fills the vacated copy space), then chips above the box so the mobile keyboard never covers them */
body.focused .stage .focus-title{ order:1; }
body.focused .stage .chips{ order:2; margin-top:0; margin-bottom:14px; }
body.focused .stage .console{ order:3; }

/* ============================================================
   HERO COPY — eyebrow / h1 / sub
   ============================================================ */
.eyebrow{ display:inline-flex; align-items:center; gap:9px; font-family:var(--font-body);
  font-size:.72rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--coral);
  border:1px solid rgba(240,72,43,.3); background:rgba(240,72,43,.06); padding:7px 14px; border-radius:var(--r-pill);
  opacity:0; transform:translateY(12px); animation:rise .7s .05s forwards var(--ease-out); }
body.zh .eyebrow{ letter-spacing:.05em; text-transform:none; }
.eyebrow::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--coral); box-shadow:0 0 10px var(--coral); }

h1{ font-family:var(--font-disp); font-stretch:125%; font-weight:600; text-transform:uppercase;
  font-size:clamp(1.7rem,3.4vw,2.75rem); line-height:1.06; letter-spacing:-.022em; color:var(--ink);
  margin:20px auto 0; max-width:26ch;
  opacity:0; transform:translateY(20px); animation:rise .8s .15s forwards var(--ease-out); }
body.zh h1{ text-transform:none; line-height:1.22; letter-spacing:0; font-weight:500; font-size:clamp(1.7rem,3.6vw,2.7rem); }
h1 .grad{ background:linear-gradient(98deg,var(--coral),var(--orange) 56%,var(--violet));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }

.sub{ margin:18px auto 0; font-size:1.08rem; line-height:1.55; color:var(--ink-soft); max-width:52ch;
  opacity:0; transform:translateY(20px); animation:rise .8s .26s forwards var(--ease-out); }
body.zh .sub{ line-height:1.8; }
.sub b{ color:var(--ink); font-weight:600; }
@keyframes rise{ to{ opacity:1; transform:none; } }

/* ============================================================
   CONSOLE — prompt box + focus mode title
   ============================================================ */
.console{ margin:30px auto 0; width:100%; max-width:600px; position:relative;
  opacity:0; transform:translateY(22px) scale(.99); animation:pop .8s .36s forwards var(--ease-out); }
@keyframes pop{ to{ opacity:1; transform:none; } }
/* animated gradient glow ring — GPU-composited, pauses when off-screen (.paused) */
.console::before{ content:""; position:absolute; inset:-2px; border-radius:var(--r-xl); z-index:-1;
  background:linear-gradient(115deg,var(--coral),var(--orange),var(--violet),var(--coral)); background-size:300% 300%;
  filter:blur(11px); opacity:.42; animation:flow 9s ease infinite; will-change:background-position; }
.console-off .console::before, .tab-hidden .console::before{ animation-play-state:paused; }
@keyframes flow{ 0%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } 100%{ background-position:0% 50%; } }

.box{ background:var(--surface); border:1px solid rgba(255,255,255,.8); border-radius:var(--r-xl);
  box-shadow:0 40px 84px -40px rgba(120,55,60,.6), var(--shadow-soft);
  padding:26px 24px 20px; text-align:left; }
/* in-console title — only shows in focus mode to keep context after the hero fades */
/* focus-mode title — shown in the hero area only when the prompt is focused */
.focus-title{ display:flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--font-card); font-weight:700; font-size:1.15rem; color:var(--ink);
  max-height:0; opacity:0; overflow:hidden; transform:translateY(8px);
  transition:max-height .45s ease, opacity .4s ease, transform .45s ease, margin .45s ease; }
.focus-title .ft-dot{ width:8px; height:8px; border-radius:50%; flex:none;
  background:var(--coral); box-shadow:0 0 10px var(--coral); animation:pulse 2.4s infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.55; transform:scale(1.4); } }
body.focused .focus-title{ max-height:48px; opacity:1; transform:none; margin:6px auto 16px; }
body.zh .focus-title{ font-size:1.1rem; }
/* textarea sits full-width; the wand floats top-left, the send anchors bottom-right */
.box-inner{ position:relative; }
.ai-badge{ position:absolute; top:5px; left:0; width:28px; height:28px; display:grid; place-items:center;
  color:var(--coral); opacity:.85; pointer-events:none; }
.ai-badge svg{ width:22px; height:22px; }
textarea#prompt{ display:block; width:100%; border:0; resize:none; font-family:inherit; font-size:1.14rem; line-height:1.55;
  color:var(--ink); background:transparent; min-height:54px; max-height:200px; padding:4px 0 0 40px; }
textarea#prompt:focus{ outline:none; }
textarea#prompt::placeholder{ color:var(--ink-faint); }
/* action row under the text: hint on the left, send button on the right */
.box-actions{ display:flex; align-items:center; justify-content:flex-end; gap:12px; margin-top:14px; }
.box-hint{ font-size:.78rem; color:var(--ink-faint); display:inline-flex; align-items:center; gap:6px; }
.box-hint kbd{ font-family:var(--font-body); background:#f4eef0; border:1px solid var(--line); border-radius:6px;
  padding:1px 7px; font-size:.74rem; color:var(--ink-soft); font-weight:600; }
.send{ flex:none; height:44px; padding:0 20px; border-radius:var(--r-sm); border:0; cursor:pointer;
  display:inline-flex; align-items:center; gap:9px; font-family:var(--font-card); font-weight:600; font-size:.96rem; color:#fff;
  background:var(--black); transition:transform .2s, background .2s, box-shadow .2s, opacity .2s; box-shadow:0 12px 26px -12px rgba(26,24,22,.8); }
.send:hover{ background:var(--black-hi); transform:translateY(-2px); box-shadow:0 18px 34px -14px rgba(26,24,22,.85); }
.send:disabled{ opacity:.4; cursor:default; transform:none; box-shadow:none; }
.send svg{ transition:transform .2s; }
.send:hover:not(:disabled) svg{ transform:translateX(3px); }

/* (prompt box has no inner meta row now — generate goes straight to build → signup) */

/* ============================================================
   CHIPS
   ============================================================ */
/* quick-start chips (like example prompts) */
.chips{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:18px auto 0; max-width:560px;
  opacity:0; animation:rise .8s .5s forwards; }
.chip{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-body); font-size:.84rem; font-weight:600;
  color:var(--ink); background:rgba(255,255,255,.72); border:1px solid var(--chip-line); border-radius:var(--r-pill); padding:8px 14px; cursor:pointer;
  transition:transform .15s,border-color .15s,background .15s,box-shadow .15s; user-select:none; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.chip:hover{ transform:translateY(-2px); border-color:rgba(240,72,43,.5); background:#fff; box-shadow:0 8px 16px -10px rgba(240,72,43,.5); }
.chip.sel{ background:var(--ink); color:#fff; border-color:var(--ink); }
/* inline "replace your text?" confirm state */
.chip.confirm{ background:#fff; border-color:rgba(240,72,43,.55); cursor:default; padding:6px 8px 6px 12px; gap:8px; box-shadow:0 8px 18px -10px rgba(240,72,43,.5); }
.chip.confirm:hover{ transform:none; }
.chip .cf-q{ font-size:.78rem; font-weight:600; color:var(--ink-soft); }
.chip .cf-yes,.chip .cf-no{ font-size:.76rem; font-weight:700; padding:4px 10px; border-radius:var(--r-pill); cursor:pointer; }
.chip .cf-yes{ background:var(--coral); color:#fff; }
.chip .cf-yes:hover{ background:var(--ink); }
.chip .cf-no{ background:#f1ecee; color:var(--ink-soft); }
.chip .cf-no:hover{ background:#e6dfe2; }
.chip .em{ font-size:.98rem; line-height:1; }
@media (max-width:600px){
  .chips{ max-width:100%; gap:6px; }
  .chip{ font-size:.76rem; padding:6px 11px; gap:5px; }
  .chip .em{ font-size:.88rem; }
  /* bigger touch targets for the inline replace/keep confirm */
  .chip.confirm{ padding:6px 8px 6px 12px; }
  .chip .cf-q{ font-size:.74rem; }
  .chip .cf-yes,.chip .cf-no{ font-size:.74rem; padding:7px 13px; }
}

/* ============================================================
   SHOWCASE — example hub rotation
   ============================================================ */
/* fade the showcase in focus mode so the prompt stays king */
.showcase{ order:7; margin:38px auto 0; max-width:780px; width:100%;
  opacity:0; animation:rise .9s .62s forwards;
  transition:opacity .4s ease, max-height .5s ease, margin .45s ease, transform .45s ease; }
.sc-cap{ font-size:.78rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:18px; }
body.zh .sc-cap{ text-transform:none; letter-spacing:.02em; }
.sc-stage{ position:relative; display:flex; justify-content:center; align-items:center; min-height:560px; padding-bottom:28px; }
/* the hub phone frame — taller aspect so category tags show inside */
.sc-phone{ position:relative; z-index:2; width:236px; height:512px; border-radius:34px; overflow:hidden;
  background:#000; border:6px solid #16110f;
  box-shadow:0 44px 90px -34px rgba(120,55,60,.55), 0 8px 22px -10px rgba(0,0,0,.18); }
.sc-shot{ width:100%; height:100%; object-fit:cover; object-position:top center; display:block;
  transition:opacity .4s ease, transform .4s ease; }
.sc-fade{ position:absolute; left:0; right:0; bottom:0; height:54px; pointer-events:none;
  background:linear-gradient(transparent, rgba(0,0,0,.16)); }
/* floating engagement cards near the phone edge — different placements */
.sc-float{ position:absolute; z-index:3; display:flex; align-items:center; gap:10px;
  background:#fff; border:1px solid rgba(28,26,25,.08); border-radius:15px; padding:11px 14px;
  box-shadow:0 20px 42px -16px rgba(120,55,60,.42); width:194px; }
.fl-a{ left:-14px; top:78px; animation:bobA 5.2s ease-in-out infinite; will-change:transform; }      /* upper-left */
.fl-b{ right:-14px; bottom:128px; animation:bobB 5.8s ease-in-out infinite; will-change:transform; } /* lower-right */
.sc-off .fl-a, .sc-off .fl-b, .tab-hidden .fl-a, .tab-hidden .fl-b{ animation-play-state:paused; }
.ef-ic{ width:34px; height:34px; border-radius:10px; flex:none; display:grid; place-items:center; font-size:.92rem;
  color:var(--ink-soft); background:rgba(28,26,25,.05); border:1px solid var(--line); box-shadow:none; }
.ef-ic.up{ color:var(--ink-soft); background:rgba(28,26,25,.05); border:1px solid var(--line); box-shadow:none; }
.ef-tx{ display:flex; flex-direction:column; line-height:1.25; text-align:left; }
.ef-t{ font-size:.82rem; font-weight:700; color:var(--ink); white-space:normal; }
.ef-s{ font-size:.68rem; color:var(--ink-faint); white-space:normal; margin-top:1px; }
@keyframes bobA{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-9px); } }
@keyframes bobB{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(8px); } }
/* dots */
.sc-dots{ position:absolute; bottom:0; left:50%; transform:translateX(-50%); display:flex; gap:7px; z-index:4; }
.sc-dots i{ width:7px; height:7px; border-radius:50%; background:rgba(28,26,25,.18); transition:background .3s, width .3s; cursor:pointer; }
.sc-dots i.on{ background:var(--coral); width:18px; border-radius:var(--r-pill); }
body.focused .showcase{ opacity:0; max-height:0; margin:0; transform:translateY(10px); pointer-events:none; overflow:hidden; }

@media (max-width:600px){
  .sc-stage{ min-height:540px; }
  .sc-phone{ width:208px; height:452px; }
  .fl-a{ left:-16px; top:48px; transform:scale(.9); }
  .fl-b{ right:-16px; bottom:150px; transform:scale(.9); }
}

/* ============================================================
   FOOTER
   ============================================================ */
footer{ flex:none; width:100%; max-width:880px; margin:0 auto; padding:18px 28px 26px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  font-size:.78rem; color:var(--ink-faint); border-top:1px solid var(--line); }
.ft-line{ font-weight:500; }
footer .lang{ display:inline-flex; align-items:stretch; border:1px solid var(--line); border-radius:var(--r-pill); overflow:hidden; background:rgba(255,255,255,.5); flex:none; }
footer .lang button{ border:0; background:transparent; cursor:pointer; font-family:var(--font-body); font-size:.74rem; font-weight:700; line-height:1; color:var(--ink-faint); padding:7px 14px; transition:.2s; display:inline-flex; align-items:center; justify-content:center; min-width:38px; }
footer .lang button.active{ background:var(--ink); color:#fff; }
@media (max-width:600px){
  footer{ padding:16px 22px 24px; font-size:.72rem; }
}

/* ============================================================
   OVERLAY / GENERATE / SIGNUP
   ============================================================ */
/* generating overlay */
.overlay{ position:fixed; inset:0; z-index:30; display:none; align-items:center; justify-content:center;
  background:rgba(246,238,240,.82); -webkit-backdrop-filter:blur(11px); backdrop-filter:blur(11px); }
.overlay.on{ display:flex; animation:fade .4s; }
@keyframes fade{ from{ opacity:0; } to{ opacity:1; } }
.gbox{ text-align:center; max-width:400px; padding:0 24px; }
/* assembling hub preview */
.preview{ width:248px; margin:0 auto 20px; background:linear-gradient(170deg,#fff,#fff7f3);
  border:1px solid rgba(28,26,25,.07); border-radius:var(--r-lg); padding:18px 16px;
  box-shadow:0 30px 64px -26px rgba(180,70,40,.4); text-align:left; }
.pv-top{ display:flex; align-items:center; gap:11px; }
.pv-logo{ width:42px; height:42px; border-radius:50%; flex:none; display:grid; place-items:center; font-size:1.2rem;
  background:radial-gradient(circle at 35% 30%,#fff,#f3e7e2); border:1px solid rgba(28,26,25,.07);
  opacity:0; transform:scale(.6); animation:pvIn .5s .15s forwards var(--ease-pop); }
.pv-handle{ flex:1; display:flex; flex-direction:column; gap:5px; }
.pv-bar{ height:7px; border-radius:4px; background:rgba(28,26,25,.13);
  opacity:0; animation:pvIn .5s forwards; }
.pv-bar.w60{ width:60%; animation-delay:.25s; }
.pv-bar.w40{ width:40%; background:rgba(28,26,25,.08); animation-delay:.35s; }
.pv-tabs{ display:flex; gap:6px; margin:14px 0 10px; }
.pv-tabs span{ height:9px; width:34px; border-radius:var(--r-pill); background:rgba(28,26,25,.07);
  opacity:0; animation:pvIn .4s forwards; }
.pv-tabs span.on{ background:var(--coral); width:26px; }
.pv-tabs span:nth-child(1){ animation-delay:.5s; }
.pv-tabs span:nth-child(2){ animation-delay:.56s; }
.pv-tabs span:nth-child(3){ animation-delay:.62s; }
.pv-rows{ display:flex; flex-direction:column; gap:8px; }
.pv-row{ display:flex; align-items:center; gap:9px; padding:9px; border-radius:12px; background:#fff;
  box-shadow:0 6px 14px -9px rgba(0,0,0,.2); opacity:0; transform:translateY(8px);
  animation:pvIn .5s forwards var(--ease-out); }
.pv-row[data-i="1"]{ animation-delay:.8s; }
.pv-row[data-i="2"]{ animation-delay:1.5s; }
.pv-row[data-i="3"]{ animation-delay:2.2s; }
.pv-ic{ width:26px; height:26px; border-radius:7px; flex:none; background:linear-gradient(135deg,var(--peach),#fff); }
.pv-ic.b{ background:linear-gradient(135deg,var(--violet),#efe2f6); }
.pv-line{ flex:1; height:7px; border-radius:4px; background:rgba(28,26,25,.12); }
.pv-pill{ width:34px; height:14px; border-radius:var(--r-pill); flex:none; background:rgba(240,72,43,.12); }
@keyframes pvIn{ to{ opacity:1; transform:none; } }
.gstep{ margin-top:10px; font-size:.95rem; color:var(--ink-soft); min-height:1.4em; transition:opacity .3s; }

/* signup popup (phase 2) */
.signup{ display:none; width:100%; max-width:392px; background:var(--surface); border-radius:24px;
  padding:34px 30px 24px; text-align:center; border:1px solid rgba(255,255,255,.8); position:relative;
  box-shadow:0 50px 100px -40px rgba(120,55,60,.65), 0 12px 30px -14px rgba(0,0,0,.14); }
.su-close{ position:absolute; top:14px; right:14px; width:34px; height:34px; border-radius:50%; border:0; cursor:pointer;
  display:grid; place-items:center; color:var(--ink-faint); background:transparent; transition:background .2s,color .2s; }
.su-close:hover{ background:#f1ecee; color:var(--ink); }
.su-back{ width:100%; margin-top:12px; font-family:var(--font-body); font-weight:600; font-size:.9rem; color:var(--ink-soft);
  background:transparent; border:0; cursor:pointer; padding:6px; transition:color .2s; }
.su-back:hover{ color:var(--coral); }
.signup.on{ display:block; animation:pop .5s var(--ease-out); }
.su-check{ width:54px; height:54px; border-radius:50%; margin:0 auto 16px; display:grid; place-items:center; color:#fff;
  background:linear-gradient(135deg,var(--coral),var(--orange)); box-shadow:0 12px 26px -8px rgba(240,72,43,.7);
  animation:popCheck .5s .15s backwards var(--ease-pop); }
@keyframes popCheck{ from{ transform:scale(0); } to{ transform:scale(1); } }
.signup h3{ font-family:var(--font-card); font-weight:700; font-size:1.42rem; color:var(--ink); }
.su-sub{ margin-top:8px; font-size:.96rem; line-height:1.5; color:var(--ink-soft); }
body.zh .su-sub{ line-height:1.7; }
.su-input{ width:100%; margin-top:20px; font-family:inherit; font-size:1rem; color:var(--ink); background:#fff;
  border:1.5px solid var(--line); border-radius:var(--r-md); padding:14px 16px; transition:border-color .2s,box-shadow .2s; }
.su-input::placeholder{ color:var(--ink-faint); }
.su-input:focus{ outline:none; border-color:var(--coral); box-shadow:0 0 0 4px rgba(240,72,43,.1); }
.su-err{ min-height:1.1em; margin-top:6px; font-size:.8rem; color:var(--coral); text-align:left; padding-left:4px; }
.su-btn{ width:100%; margin-top:4px; font-family:var(--font-card); font-weight:700; font-size:1.06rem; color:#fff;
  background:var(--black); border:0; border-radius:var(--r-md); padding:15px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:9px; transition:transform .2s,background .2s,box-shadow .2s;
  box-shadow:0 16px 34px -14px rgba(28,26,25,.6); }
.su-btn:hover{ background:var(--black-hi); transform:translateY(-2px); }
.su-btn .spark{ transition:transform .3s; }
.su-btn:hover .spark{ transform:rotate(18deg) scale(1.15); }
.su-google{ width:100%; margin-top:10px; font-family:var(--font-body); font-weight:600; font-size:.96rem; color:var(--ink);
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding:13px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:9px; transition:border-color .2s,background .2s,transform .2s; }
.su-google:hover{ border-color:rgba(28,26,25,.28); transform:translateY(-2px); }
.su-fine{ margin-top:14px; font-size:.76rem; color:var(--ink-faint); }

/* ============================================================
   FOCUS MODE OVERRIDES
   ============================================================ */
/* FOCUS MODE: tap the prompt → console grows, the rest clears out */
/* collapse the surrounding copy entirely so the console rises to cover it */
.eyebrow,.stage h1,.sub{ transition:opacity .4s ease, transform .45s ease, max-height .5s ease, margin .45s ease, padding .45s ease; overflow:hidden; }
body.focused .eyebrow,
body.focused .stage h1,
body.focused .sub{
  opacity:0; transform:translateY(-14px); pointer-events:none;
  max-height:0; margin-top:0; margin-bottom:0; padding:0;
  animation:none !important;
}
body.focused .eyebrow{ border:0 !important; padding:0 !important; }
/* lift + center the console into the freed space */
.console{ transition:transform .5s var(--ease-out), margin .45s ease; }
body.focused .console{ transform:translateY(-2vh); }
body.focused .console::before{ opacity:.62; }            /* glow intensifies */
/* grow the input */
textarea#prompt{ transition:min-height .4s var(--ease-out), font-size .3s ease; }
body.focused textarea#prompt{ min-height:150px; font-size:1.16rem; }
body.focused .box{ box-shadow:0 60px 120px -44px rgba(120,55,60,.72), 0 14px 34px -14px rgba(0,0,0,.16); }
/* chips: bring them up close + reveal the hidden ones */
.chips{ transition:margin .45s ease; }
body.focused .chips{ margin-top:16px; }
.chip.extra{ display:none; }
body.focused .chip.extra{ display:inline-flex; animation:chipIn .4s backwards; }
body.focused .chip.extra:nth-of-type(9){ animation-delay:.04s; }
body.focused .chip.extra:nth-of-type(10){ animation-delay:.08s; }
body.focused .chip.extra:nth-of-type(11){ animation-delay:.12s; }
@keyframes chipIn{ from{ opacity:0; transform:translateY(8px) scale(.94); } to{ opacity:1; transform:none; } }
/* a soft dim layer behind the console so focus owns the screen (click it to exit) */
.dim{ position:fixed; inset:0; z-index:2; background:rgba(246,238,240,.62); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  opacity:0; pointer-events:none; transition:opacity .45s ease; }
body.focused .dim{ opacity:1; pointer-events:auto; }

/* ============================================================
   I18N TOGGLES
   ============================================================ */
[data-zh]{ display:none; }
body.zh [data-en]{ display:none; }
body.zh [data-zh]{ display:revert; }

/* ============================================================
   MOBILE OVERRIDES (@media max-width:600px)
   ============================================================ */
@media (max-width:600px){
  .bar{ padding-left:20px; padding-right:20px; }
  .wrap{ padding:0 18px; }
  .nav-back{ display:none; }
  /* keep the description aligned to the same grid as headline + console (no overflow past wrap padding) */
  .sub{ max-width:100%; font-size:1rem; padding:0 2px; }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}