/* ============================================================
   Questlume — 共用樣式（index.html 工作室頁 / itembox.html 資產道具箱介紹頁）
   Palette: 琺瑯 enamel — white ground, enamel-teal (琺瑯藍綠) as the
   single structural accent; coin-gold + berry only for the coin and
   feature-category tags. Dark theme swaps to deep pine. Semantic durability
   colours (fresh / notice / urgent / expired) are the app's own
   and stay separate from the accent.
   Type: LXGW WenKai TC (warm kai display) + Noto Sans TC (body/UI)
         + DM Mono (HUD counters, labels, version tags)
   ============================================================ */

:root{
  color-scheme: light;
  --paper:#FFFFFF;
  --surface:#F4F9F8;
  --surface-2:#E6F0EE;
  --ink:#15211F;
  --ink-soft:#46554F;
  --ink-faint:#84938E;
  --line:#E0E8E5;
  --line-strong:#C7D4D0;

  --teal:#0E8C7F;
  --teal-deep:#0A6157;
  --teal-tint:#DCEDE9;
  --gold:#C8871F;
  --gold-tint:#F1E7D2;
  --berry:#BE3E67;
  --berry-tint:#F3DCE3;
  --plum:#7150A0;

  --fresh:#3E9E56;
  --notice:#C99516;
  --urgent:#DE7A2E;
  --expired:#CF3C3A;

  /* Questlume brand (studio page) — constant across themes */
  --night:#0E1430;
  --night-2:#161E3C;
  --night-ink:#EDF1FF;
  --night-soft:#A9B4DE;
  --night-line:#2C3665;
  --cyan:#4CD8C9;
  --gold-bright:#F2C24C;
  --nebula-violet:#9A5FCE;
  --nebula-rose:#D6598F;

  --shadow-sm:0 1px 2px rgba(16,33,31,.05), 0 2px 8px rgba(16,33,31,.05);
  --shadow-md:0 4px 14px rgba(16,33,31,.08), 0 14px 40px rgba(16,33,31,.07);
  --shadow-lg:0 10px 30px rgba(16,33,31,.10), 0 30px 70px rgba(16,33,31,.10);

  --radius:16px;
  --radius-lg:26px;
  --maxw:1080px;
  --font-display:"LXGW WenKai TC","Noto Sans TC",serif;
  --font-body:"Noto Sans TC",system-ui,sans-serif;
  --font-mono:"DM Mono","Noto Sans TC",ui-monospace,monospace;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --paper:#121D1B;
    --surface:#1A2624;
    --surface-2:#233230;
    --ink:#ECE7D7;
    --ink-soft:#A9B3AF;
    --ink-faint:#77837E;
    --line:#31413E;
    --line-strong:#42534F;

    --teal:#43BCAC;
    --teal-deep:#2C9585;
    --teal-tint:#16302C;
    --gold:#E4A951;
    --gold-tint:#33291455;
    --berry:#E06E92;
    --berry-tint:#3A1F2955;
    --plum:#A98FD8;

    --fresh:#54BE6C;
    --notice:#E6BD44;
    --urgent:#EE9350;
    --expired:#E85E5C;

    --shadow-sm:0 1px 2px rgba(0,0,0,.3), 0 2px 8px rgba(0,0,0,.25);
    --shadow-md:0 4px 14px rgba(0,0,0,.35), 0 14px 40px rgba(0,0,0,.3);
    --shadow-lg:0 10px 30px rgba(0,0,0,.45), 0 30px 70px rgba(0,0,0,.4);
  }
}

:root[data-theme="dark"]{
  color-scheme: dark;
  --paper:#121D1B;
  --surface:#1A2624;
  --surface-2:#233230;
  --ink:#ECE7D7;
  --ink-soft:#A9B3AF;
  --ink-faint:#77837E;
  --line:#31413E;
  --line-strong:#42534F;
  --teal:#43BCAC;
  --teal-deep:#2C9585;
  --teal-tint:#16302C;
  --gold:#E4A951;
  --gold-tint:#33291455;
  --berry:#E06E92;
  --berry-tint:#3A1F2955;
  --plum:#A98FD8;
  --fresh:#54BE6C;
  --notice:#E6BD44;
  --urgent:#EE9350;
  --expired:#E85E5C;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3), 0 2px 8px rgba(0,0,0,.25);
  --shadow-md:0 4px 14px rgba(0,0,0,.35), 0 14px 40px rgba(0,0,0,.3);
  --shadow-lg:0 10px 30px rgba(0,0,0,.45), 0 30px 70px rgba(0,0,0,.4);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

body{
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--ink);
  font-size:1.0625rem;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:4px}

/* ---------- shared layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(1.25rem,5vw,2.5rem)}
section[id]{scroll-margin-top:84px}
.section{padding:clamp(4.5rem,11vw,8rem) 0}
.section + .section{border-top:1px solid var(--line)}

.eyebrow{
  font-family:var(--font-mono);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--teal-deep);
  display:inline-flex;
  align-items:center;
  gap:.6rem;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--teal);display:inline-block}

h1,h2,h3{font-family:var(--font-display);font-weight:700;line-height:1.22;text-wrap:balance;letter-spacing:.01em}
h2{font-size:clamp(1.85rem,4vw,2.7rem);margin:1rem 0 1.1rem}
h3{font-size:1.22rem;line-height:1.4}
.lede{font-size:clamp(1.05rem,2vw,1.2rem);color:var(--ink-soft);max-width:34em}

.btn{
  font-family:var(--font-body);
  font-weight:700;
  font-size:1rem;
  border:none;
  border-radius:999px;
  padding:.85rem 1.6rem;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  text-decoration:none;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.btn-primary{background:var(--teal);color:#fff;box-shadow:var(--shadow-md)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);background:var(--teal-deep)}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line-strong)}
.btn-ghost:hover{border-color:var(--teal);color:var(--teal-deep);transform:translateY(-2px)}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:.6rem;font-family:var(--font-display);font-weight:700;font-size:1.05rem;text-decoration:none}
.brand .app-icon{width:28px;height:28px;border-radius:7px;flex:none;display:block;object-fit:cover}
.nav-links{display:flex;gap:1.6rem;font-size:.9rem}
.nav-links a{text-decoration:none;color:var(--ink-soft);transition:color .15s ease}
.nav-links a:hover{color:var(--teal-deep)}
.header-cta{font-size:.85rem;padding:.55rem 1.1rem}
.header-right{display:flex;align-items:center;gap:.6rem}
.theme-toggle{
  flex:none;border-radius:999px;
  border:1.5px solid var(--line-strong);background:transparent;color:var(--ink-soft);
  cursor:pointer;font-family:var(--font-body);font-size:.8rem;font-weight:500;line-height:1;
  padding:.42rem .8rem;
  display:inline-flex;align-items:center;gap:.4rem;
  transition:border-color .15s ease, color .15s ease, transform .15s ease;
}
.theme-toggle:hover{border-color:var(--teal);color:var(--teal-deep);transform:translateY(-1px)}
.theme-toggle .tt-ico{font-size:.95rem;line-height:1}
@media (max-width:400px){
  .theme-toggle{padding:.42rem .6rem}
  .theme-toggle .tt-label{display:none}
}
@media (max-width:820px){ .nav-links{display:none} }

/* ---------- showcase carousel (hero) ---------- */
.showcase{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.showcase::before{
  content:"";position:absolute;inset:0;z-index:0;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:38px 38px;
  -webkit-mask-image:radial-gradient(130% 95% at 84% 6%, #000 0%, transparent 60%);
  mask-image:radial-gradient(130% 95% at 84% 6%, #000 0%, transparent 60%);
  opacity:.5;pointer-events:none;
}
.showcase-inner{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto}
.track{
  display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;cursor:grab;
}
.track::-webkit-scrollbar{display:none}
.slide{
  flex:0 0 100%;min-width:100%;scroll-snap-align:center;
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(1.5rem,5vw,4rem);align-items:center;
  padding:clamp(2.5rem,6vw,4.5rem) clamp(1.25rem,5vw,2.5rem);
}
.slide-copy .eyebrow{margin-bottom:1rem}
.slide-copy h1{font-size:clamp(2.1rem,5vw,3.6rem);margin:.8rem 0 1.1rem;line-height:1.18}
.slide-copy h1 em{font-style:normal;color:var(--teal-deep);position:relative;white-space:nowrap}
.slide-copy h1 em::after{content:"";position:absolute;left:-.05em;right:-.05em;bottom:.08em;height:.34em;background:var(--teal-tint);z-index:-1;border-radius:3px}
.slide-copy .kicker{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-deep);display:flex;align-items:center;gap:.6rem}
.slide-copy .kicker::before{content:"";width:24px;height:2px;background:var(--teal)}
.slide-copy h2{font-size:clamp(1.55rem,3.4vw,2.35rem);margin:.75rem 0 1rem}
.slide-copy p{color:var(--ink-soft);max-width:32em;font-size:clamp(1rem,1.6vw,1.1rem)}
.slide-visual{display:flex;justify-content:center;align-items:center;position:relative}

.paid-tag{
  display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--font-mono);font-size:.7rem;font-weight:500;letter-spacing:.05em;
  padding:.3rem .7rem;border-radius:999px;
  background:color-mix(in srgb, var(--gold) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--gold) 45%, transparent);
  color:var(--ink);
}
.paid-note{margin-top:.9rem;font-size:.92rem;color:var(--ink-faint);max-width:32em}
.paid-note .paid-tag{margin-bottom:.55rem}
.paid-note b{color:var(--ink-soft);font-weight:700}
.vig-lock{
  position:absolute;top:-10px;right:-10px;z-index:2;
  display:inline-flex;align-items:center;gap:.35rem;
  font-family:var(--font-mono);font-size:.62rem;font-weight:500;letter-spacing:.04em;
  padding:.3rem .65rem;border-radius:999px;
  background:var(--ink);color:var(--surface);
  box-shadow:var(--shadow-md);
}
@media (max-width:860px){ .vig-lock{top:-8px;right:0} }
.hero-actions{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center}
.hero-note{font-family:var(--font-mono);font-size:.76rem;color:var(--ink-faint);letter-spacing:.04em;margin-top:1.1rem}

.sc-ui{
  position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;
  padding:0 clamp(1.25rem,5vw,2.5rem) clamp(1.75rem,4vw,2.5rem);
  display:flex;align-items:center;justify-content:center;gap:1.2rem;flex-wrap:wrap;
}
.sc-arrow{
  width:42px;height:42px;flex:none;border-radius:999px;
  border:1.5px solid var(--line-strong);background:var(--surface);color:var(--ink);
  cursor:pointer;display:grid;place-items:center;font-size:1.05rem;
  transition:border-color .15s ease,color .15s ease,transform .15s ease;
}
.sc-arrow:hover:not([disabled]){border-color:var(--teal);color:var(--teal-deep);transform:translateY(-1px)}
.sc-arrow[disabled]{opacity:.3;cursor:default}
.sc-dots{display:flex;gap:.5rem;align-items:center}
.sc-dot{width:8px;height:8px;padding:0;border:none;border-radius:999px;background:var(--line-strong);cursor:pointer;transition:width .2s ease,background .2s ease}
.sc-dot[aria-current="true"]{width:24px;background:var(--teal)}
.sc-count{font-family:var(--font-mono);font-size:.78rem;color:var(--ink-faint);letter-spacing:.1em;font-variant-numeric:tabular-nums}
.sc-count b{color:var(--ink);font-weight:500}

@media (max-width:860px){
  .slide{grid-template-columns:1fr;gap:1.8rem}
  .slide-copy p{max-width:none}
}

/* ---------- slide vignettes ---------- */
.vig{width:min(390px,93vw);background:var(--surface);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow-md);overflow:hidden}
.vig-bar{display:flex;align-items:center;gap:6px;padding:9px 14px;border-bottom:1px solid var(--line);font-family:var(--font-mono);font-size:.6rem;color:var(--ink-faint);letter-spacing:.05em}
.vig-bar i{width:7px;height:7px;border-radius:50%;background:var(--line-strong);flex:none}
.vig-bar span{margin-left:auto}
.vig-body{padding:15px 16px 17px}
.vig h4{font-family:var(--font-display);font-size:.9rem;color:var(--ink-soft);margin-bottom:6px}

.vrow{display:flex;align-items:center;gap:10px;padding:9px 0}
.vrow + .vrow{border-top:1px solid var(--line)}
.vrow .ve{font-size:1.05rem;flex:none}
.vrow .vn{font-size:.8rem;font-weight:700;flex:1}
.vrow .vm{font-family:var(--font-mono);font-size:.58rem;color:var(--vt,var(--ink-faint));flex:none}
.vbar{height:6px;width:60px;border-radius:999px;background:var(--surface-2);overflow:hidden;flex:none}
.vbar>i{display:block;height:100%;background:var(--vt,var(--ink-faint));border-radius:999px}
.t-fresh{--vt:var(--fresh)}.t-notice{--vt:var(--notice)}.t-urgent{--vt:var(--urgent)}.t-expired{--vt:var(--expired)}.t-gold{--vt:var(--gold)}

.vchips{display:flex;gap:5px;flex-wrap:wrap;font-family:var(--font-mono);font-size:.58rem;margin-bottom:8px}
.vchips span{border:1px solid var(--line-strong);border-radius:999px;padding:2px 8px;color:var(--ink-soft)}
.vchips span.on{background:var(--ink);color:var(--surface);border-color:var(--ink)}

.valert{margin-top:10px;padding:9px 11px;border-radius:12px;font-size:.7rem;line-height:1.55;background:color-mix(in srgb,var(--urgent) 12%,transparent);border:1px solid color-mix(in srgb,var(--urgent) 38%,transparent);color:var(--ink)}
.vinput{border:1.5px solid var(--teal);border-radius:10px;padding:9px 12px;font-size:.82rem;display:flex;align-items:center}
.vinput i{width:1px;height:1.05em;background:var(--ink);margin-left:1px;animation:vblink 1s step-end infinite}
@keyframes vblink{50%{opacity:0}}

.vstat{display:flex;flex-direction:column;gap:2px;text-align:center;margin:10px 0 4px}
.vstat b{font-family:var(--font-mono);font-size:1.5rem;color:var(--teal-deep);font-weight:500}
.vstat span{font-size:.64rem;color:var(--ink-faint);font-family:var(--font-mono);letter-spacing:.04em}
.vsplit{display:flex;gap:8px;margin-top:10px}
.vsplit div{flex:1;text-align:center;padding:8px 4px;border:1px solid var(--line);border-radius:10px}
.vsplit b{display:block;font-family:var(--font-mono);font-size:.82rem;color:var(--ink)}
.vsplit span{font-size:.56rem;color:var(--ink-faint)}

.vplan{position:relative;height:172px;border:1.5px solid var(--line-strong);border-radius:10px;margin-top:8px;
  background:linear-gradient(var(--line) 1px,transparent 1px) 0 0/100% 34px,linear-gradient(90deg,var(--line) 1px,transparent 1px) 0 0/34px 100%}
.vpin{position:absolute;display:flex;flex-direction:column;align-items:center;gap:3px;transform:translate(-50%,-50%);font-family:var(--font-mono);font-size:.5rem;color:var(--ink-soft);white-space:nowrap}
.vpin b{width:20px;height:20px;border-radius:6px;background:var(--teal);color:#fff;display:grid;place-items:center;font-size:.56rem;box-shadow:var(--shadow-sm)}

.vcheck{display:flex;flex-direction:column;margin:6px 0 4px}
.vcheck div{display:flex;justify-content:space-between;align-items:center;font-size:.76rem;padding:7px 0;border-bottom:1px solid var(--line)}
.vcheck .ok{color:var(--fresh);font-family:var(--font-mono);font-size:.64rem}
.vcheck .no{color:var(--urgent);font-family:var(--font-mono);font-size:.64rem}

.vscan{height:116px;border-radius:12px;background:var(--surface-2);display:grid;place-items:center;position:relative;overflow:hidden;box-shadow:inset 0 0 0 2px var(--line)}
.vscan .code{width:148px;height:48px;background:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 4px,var(--ink) 4px 7px,transparent 7px 10px,var(--ink) 10px 12px,transparent 12px 16px)}
.vscan .frame{position:absolute;inset:15px;border:2px dashed var(--teal);border-radius:8px}
.vsuccess{margin-top:9px;padding:8px 11px;border-radius:10px;font-size:.68rem;line-height:1.5;background:color-mix(in srgb,var(--fresh) 13%,transparent);border:1px solid color-mix(in srgb,var(--fresh) 36%,transparent);color:var(--ink)}
.vfine{margin-top:7px;font-family:var(--font-mono);font-size:.54rem;color:var(--ink-faint)}

.vhud{background:linear-gradient(140deg,var(--teal-deep),var(--teal));border-radius:14px;padding:12px 13px;color:#fff}
.vhud .r1{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:.7rem}
.vhud .xp{height:6px;border-radius:999px;background:rgba(255,255,255,.25);margin:8px 0 4px;overflow:hidden}
.vhud .xp>i{display:block;height:100%;width:78%;background:var(--gold);border-radius:999px}
.vhud .r2{font-family:var(--font-mono);font-size:.56rem;opacity:.85}
.vbadges{display:flex;gap:8px;margin-top:11px}
.vbadges div{flex:1;text-align:center;font-family:var(--font-mono);font-size:.5rem;color:var(--ink-faint)}
.vbadges b{display:grid;place-items:center;width:32px;height:32px;margin:0 auto 4px;border-radius:50%;background:var(--gold-tint);font-size:.85rem}

.vprivacy{text-align:center}
.vprivacy .big{font-family:var(--font-display);font-size:1.15rem;margin:8px 0 12px}
.vprivacy ul{list-style:none;display:flex;flex-direction:column;gap:8px;text-align:left;font-size:.74rem;color:var(--ink-soft)}
.vcloud{width:52px;height:52px;margin:0 auto;border-radius:50%;background:var(--surface-2);display:grid;place-items:center;font-size:1.35rem;position:relative;overflow:hidden}
.vcloud::after{content:"";position:absolute;left:-6px;right:-6px;height:2px;background:var(--expired);transform:rotate(-45deg)}

/* ---------- hero screenshot ---------- */
.hero-shot{
  justify-self:center;
  width:min(288px,76vw);
  height:auto;
  border-radius:34px;
  border:1px solid var(--line);
  box-shadow:var(--shadow-lg);
  background:var(--surface);
}

@media (max-width:860px){
  .hero-shot{margin-top:.5rem;width:min(258px,66vw)}
  .slide-visual{order:2}
}

/* ---------- story / quest log ---------- */
.story .wrap{max-width:860px}
.story-intro{max-width:38em;margin-bottom:3rem}
.forget-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
@media (max-width:760px){ .forget-grid{grid-template-columns:1fr} }
.forget{
  --fg:var(--expired);
  background:var(--surface);
  border:1px solid var(--line);
  border-top:4px solid var(--fg);
  border-radius:var(--radius-lg);
  padding:1.8rem;
  box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;gap:.85rem;
}
.forget.b{--fg:var(--urgent)}
.forget .fg-tag{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-faint);display:flex;align-items:center;gap:.55rem;
}
.forget .fg-tag::before{content:"";width:9px;height:9px;border-radius:2px;background:var(--fg)}
.forget h3{font-size:1.32rem;margin:0}
.forget .fg-cause{color:var(--ink-soft);font-size:.98rem}
.forget .fg-result{
  align-self:flex-start;display:inline-flex;align-items:center;gap:.45rem;
  font-family:var(--font-mono);font-size:.76rem;
  padding:.32rem .8rem;border-radius:999px;
  background:color-mix(in srgb, var(--fg) 13%, transparent);
  border:1px solid color-mix(in srgb, var(--fg) 42%, transparent);
  color:var(--ink);
}
.forget .fg-result::before{content:"⚠";color:var(--fg)}
.forget .fg-fix{
  margin-top:auto;padding-top:.95rem;
  border-top:1px dashed var(--line-strong);
  font-size:.98rem;color:var(--ink-soft);
}
.forget .fg-fix b{color:var(--ink);font-weight:700}
.story-origin{margin-top:2rem;max-width:44em;color:var(--ink-soft);font-size:.98rem}

.pull{
  margin:3rem 0 0;
  padding:1.6rem 1.8rem;
  background:var(--surface);
  border:1px solid var(--line);
  border-left:4px solid var(--teal);
  border-radius:var(--radius);
  font-family:var(--font-display);
  font-size:1.15rem;
  line-height:1.6;
  box-shadow:var(--shadow-sm);
}

/* ---------- colour-language demo ---------- */
.demo{background:var(--surface-2)}
.demo .wrap{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.demo-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-top:5px solid var(--tier,var(--fresh));
  border-radius:var(--radius-lg);
  padding:1.8rem;
  box-shadow:var(--shadow-md);
  transition:border-color .35s ease;
  --tier:var(--fresh);
}
.demo-card.is-notice{--tier:var(--notice)}
.demo-card.is-urgent{--tier:var(--urgent)}
.demo-card.is-expired{--tier:var(--expired)}
.demo-card .dc-top{display:flex;align-items:center;gap:.9rem}
.demo-card .dc-emoji{font-size:2rem}
.demo-card .dc-name{font-family:var(--font-display);font-weight:700;font-size:1.3rem}
.demo-card .dc-status{
  display:inline-block;margin-top:.2rem;
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.05em;
  color:var(--tier);font-weight:500;
  transition:color .35s ease;
}
.demo-card .dc-bar{height:10px;border-radius:999px;background:var(--surface-2);margin:1.4rem 0 .6rem;overflow:hidden}
.demo-card .dc-bar > i{display:block;height:100%;border-radius:999px;background:var(--tier);transition:width .5s ease, background .35s ease}
.demo-card .dc-days{font-family:var(--font-mono);font-size:.78rem;color:var(--ink-soft)}
.demo-controls{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.6rem}
.demo-controls button{
  font-family:var(--font-body);font-size:.9rem;font-weight:500;
  padding:.55rem 1rem;border-radius:999px;cursor:pointer;
  border:1.5px solid var(--line-strong);background:transparent;color:var(--ink-soft);
  transition:all .15s ease;
}
.demo-controls button[aria-pressed="true"]{background:var(--ink);color:var(--surface);border-color:var(--ink)}
@media (max-width:820px){ .demo .wrap{grid-template-columns:1fr} }

/* ---------- features by tab ---------- */
.feat-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.8rem 2.6rem;margin-top:2.6rem}
.feat-group{border-top:2px solid var(--teal);padding-top:1rem}
.feat-group h3{display:flex;align-items:center;gap:.55rem;font-size:1.15rem;margin-bottom:.55rem}
.feat-group .fg-emoji{font-size:1.05rem;line-height:1}
.feat-group p{color:var(--ink-soft);font-size:.95rem;line-height:1.75}
.feat-group b{color:var(--ink);font-weight:700}

/* ---------- principles ---------- */
.principles{background:var(--surface-2)}
.pri-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.4rem;margin-top:2.6rem}
.pri{padding:1.2rem 0}
.pri .num{font-family:var(--font-mono);font-size:.8rem;color:var(--teal-deep);letter-spacing:.1em}
.pri h3{margin:.7rem 0 .6rem;font-size:1.3rem}
.pri p{color:var(--ink-soft);font-size:.97rem}
.pri + .pri{position:relative}

/* ---------- footer signature (studio page) ---------- */
.studio .site-footer .wrap{flex-direction:column;gap:1.6rem}
.footer-mark{display:block;margin:0 auto;width:min(260px,58vw);height:auto;filter:invert(1);opacity:.92}
.footer-bottom{width:100%;display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center}
.studio .site-footer .fnote a{color:var(--night-ink)}
.studio .site-footer .fnote a:hover{color:var(--cyan)}

/* ---------- download ---------- */
.download{position:relative;overflow:hidden;text-align:center}
.download::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(80% 60% at 50% 0%, var(--teal-tint) 0%, transparent 70%);
  opacity:.7;pointer-events:none;
}
.download .wrap{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center}
.download h2{max-width:16em}
.download .lede{margin:0 auto 2rem}
.stores{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}
.store-badge{
  display:flex;align-items:center;gap:.7rem;
  background:var(--ink);color:var(--surface);
  padding:.8rem 1.4rem;border-radius:14px;
  font-family:var(--font-body);
  box-shadow:var(--shadow-md);
}
.store-badge .sb-mark{width:22px;height:22px;border:2px solid currentColor;border-radius:6px;flex:none}
.store-badge small{display:block;font-family:var(--font-mono);font-size:.6rem;letter-spacing:.12em;opacity:.7;text-transform:uppercase}
.store-badge b{font-weight:700;font-size:1rem}
.soon-pill{
  margin-top:1.6rem;
  font-family:var(--font-mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--teal-deep);
  border:1px solid var(--teal);border-radius:999px;padding:.35rem .9rem;
}
.price-note{margin-top:1.5rem;max-width:34em;font-size:.92rem;color:var(--ink-soft);line-height:1.7}
.price-note b{color:var(--ink);font-weight:700}
.price-note a{color:var(--teal-deep)}

/* ============================================================
   STUDIO PAGE (index.html — .studio)
   Brand: 深夜藍 + 金 + 青, from the Questlume logo concept.
   Dark, cosmic brand frame (hero + footer) around the shared
   light content system.
   ============================================================ */

/* --- studio page dark theme uses brand navy instead of pine --- */
:root[data-theme="dark"] .studio{
  --paper:var(--night);--surface:var(--night-2);--surface-2:#1E2850;
  --ink:var(--night-ink);--ink-soft:var(--night-soft);--ink-faint:#6E79AE;
  --line:var(--night-line);--line-strong:#3A4680;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .studio{
    --paper:var(--night);--surface:var(--night-2);--surface-2:#1E2850;
    --ink:var(--night-ink);--ink-soft:var(--night-soft);--ink-faint:#6E79AE;
    --line:var(--night-line);--line-strong:#3A4680;
  }
}

/* --- studio header / footer: navy in both themes --- */
.studio .site-header{background:color-mix(in srgb, var(--night) 92%, transparent);border-bottom-color:rgba(255,255,255,.09)}
.studio .brand{color:var(--night-ink)}
.studio .nav-links a{color:rgba(237,241,255,.7)}
.studio .nav-links a:hover{color:var(--cyan)}
.studio .theme-toggle{border-color:rgba(255,255,255,.22);color:rgba(237,241,255,.82)}
.studio .theme-toggle:hover{border-color:var(--cyan);color:var(--cyan)}
.studio .site-footer{position:relative;overflow:hidden;background:var(--night);border-top-color:rgba(255,255,255,.09);color:var(--night-soft)}
.studio .site-footer::before{ /* same sky, one last glimpse — stars only */
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(1.2px 1.2px at 5% 40%, rgba(255,255,255,.55), transparent),
    radial-gradient(1px 1px at 15% 75%, rgba(255,255,255,.35), transparent),
    radial-gradient(1.2px 1.2px at 24% 25%, color-mix(in srgb, var(--gold-bright) 60%, white), transparent),
    radial-gradient(1px 1px at 34% 60%, rgba(255,255,255,.4), transparent),
    radial-gradient(1.1px 1.1px at 46% 35%, rgba(255,255,255,.35), transparent),
    radial-gradient(1px 1px at 57% 70%, color-mix(in srgb, var(--cyan) 60%, white), transparent),
    radial-gradient(1.2px 1.2px at 68% 30%, rgba(255,255,255,.45), transparent),
    radial-gradient(1px 1px at 79% 65%, rgba(255,255,255,.3), transparent),
    radial-gradient(1.1px 1.1px at 90% 45%, rgba(255,255,255,.4), transparent),
    radial-gradient(1px 1px at 97% 20%, rgba(255,255,255,.3), transparent);
}
.studio .site-footer .wrap{position:relative;z-index:1}
.studio .site-footer .brand{color:var(--night-ink)}
.brand .qmark{width:26px;height:26px;flex:none;display:block;object-fit:contain}

/* --- hero: sky, light by default — swaps to navy cosmic in dark mode --- */
.studio-hero{
  position:relative;overflow:hidden;text-align:center;
  background:linear-gradient(165deg, #EAF2FE 0%, #F7F4EC 55%, #FCEEDC 100%);
  color:var(--ink);
  padding:clamp(5rem,12vw,8.5rem) 0 clamp(3.5rem,8vw,6rem);
}
.studio-hero .wrap{position:relative;z-index:2}
.studio-hero::before{ /* soft colour washes in the corners — the nebula, in daylight */
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(46% 40% at 6% 10%, color-mix(in srgb, var(--nebula-violet) 18%, transparent), transparent 72%),
    radial-gradient(40% 36% at 95% 8%, color-mix(in srgb, var(--cyan) 20%, transparent), transparent 72%),
    radial-gradient(46% 40% at 92% 94%, color-mix(in srgb, var(--nebula-rose) 16%, transparent), transparent 72%),
    radial-gradient(50% 42% at 6% 96%, color-mix(in srgb, var(--gold-bright) 22%, transparent), transparent 72%);
}
.hero-noise{ /* organic wisps, from an SVG fractal-noise filter — two colour variants, toggled by theme */
  position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block;
}
.hero-noise-dark{display:none;mix-blend-mode:screen;opacity:.4}
.hero-noise-light{display:block;mix-blend-mode:multiply;opacity:.15}
.hero-stars{ /* light mode: soft floating colour motes, no hard star cores */
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(13px 13px at 18% 24%, color-mix(in srgb, var(--cyan) 42%, transparent), transparent 70%),
    radial-gradient(12px 12px at 74% 58%, color-mix(in srgb, var(--gold-bright) 46%, transparent), transparent 70%),
    radial-gradient(12px 12px at 40% 80%, color-mix(in srgb, var(--nebula-rose) 36%, transparent), transparent 70%),
    radial-gradient(10px 10px at 88% 32%, color-mix(in srgb, var(--nebula-violet) 36%, transparent), transparent 70%);
  animation:star-twinkle 6s ease-in-out infinite alternate;
}
@keyframes star-twinkle{from{opacity:.55}to{opacity:1}}
@media (prefers-reduced-motion: reduce){ .hero-stars{animation:none} }
.studio-hero::after{ /* light beam from upper-right — soft morning light in light mode */
  content:"";position:absolute;top:-25%;right:-8%;width:62%;height:150%;z-index:1;pointer-events:none;
  background:linear-gradient(212deg, rgba(242,194,76,.34), rgba(76,216,201,.16) 42%, transparent 70%);
  transform:rotate(6deg);filter:blur(7px);
  animation:beam-in 1.3s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes beam-in{from{opacity:0;transform:rotate(6deg) translate(34px,-24px)}to{opacity:1;transform:rotate(6deg) translate(0,0)}}
@media (prefers-reduced-motion: reduce){ .studio-hero::after{animation:none} }
.studio-hero .logo-frame{width:min(340px,72vw);margin:0 auto 1.6rem;display:block;filter:drop-shadow(0 10px 30px rgba(76,216,201,.18))}
.studio-hero .logo{width:100%;height:auto;display:block}
.studio-hero h1{font-size:clamp(1.85rem,4.4vw,2.9rem);color:var(--ink);margin:.4rem auto .9rem;max-width:17em;line-height:1.4}
.studio-hero .sub{color:var(--ink-soft);max-width:29em;margin:0 auto;font-size:clamp(1rem,1.7vw,1.14rem)}
.studio-hero .hero-actions{justify-content:center;margin-top:2rem}
.studio-hero .btn-primary{background:var(--teal);color:#fff}
.studio-hero .btn-primary:hover{background:var(--teal-deep)}

/* --- hero: dark cosmic override (the original galaxy design, unchanged) --- */
:root[data-theme="dark"] .studio-hero{background:var(--night)}
:root[data-theme="dark"] .studio-hero::before{
  mix-blend-mode:screen;
  background:
    radial-gradient(46% 40% at 6% 10%, color-mix(in srgb, var(--nebula-violet) 36%, transparent), transparent 72%),
    radial-gradient(40% 36% at 95% 8%, color-mix(in srgb, var(--cyan) 22%, transparent), transparent 72%),
    radial-gradient(46% 40% at 92% 94%, color-mix(in srgb, var(--nebula-rose) 26%, transparent), transparent 72%),
    radial-gradient(50% 42% at 6% 96%, color-mix(in srgb, var(--gold-bright) 18%, transparent), transparent 72%),
    radial-gradient(1.3px 1.3px at 6% 18%, #fff, transparent),
    radial-gradient(1px 1px at 14% 62%, rgba(255,255,255,.7), transparent),
    radial-gradient(1.2px 1.2px at 21% 35%, #fff, transparent),
    radial-gradient(1px 1px at 29% 80%, rgba(255,255,255,.55), transparent),
    radial-gradient(1.2px 1.2px at 37% 12%, #fff, transparent),
    radial-gradient(1px 1px at 44% 55%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.3px 1.3px at 52% 28%, #fff, transparent),
    radial-gradient(1px 1px at 58% 70%, rgba(255,255,255,.55), transparent),
    radial-gradient(1.1px 1.1px at 65% 45%, #fff, transparent),
    radial-gradient(1px 1px at 72% 85%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.2px 1.2px at 79% 20%, #fff, transparent),
    radial-gradient(1px 1px at 85% 58%, rgba(255,255,255,.55), transparent),
    radial-gradient(1.1px 1.1px at 91% 38%, #fff, transparent),
    radial-gradient(1px 1px at 96% 75%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.1px 1.1px at 10% 90%, rgba(255,255,255,.45), transparent),
    radial-gradient(1px 1px at 25% 5%, rgba(255,255,255,.45), transparent),
    radial-gradient(1.2px 1.2px at 48% 94%, color-mix(in srgb, var(--cyan) 70%, white), transparent),
    radial-gradient(1.2px 1.2px at 68% 6%, color-mix(in srgb, var(--gold-bright) 70%, white), transparent);
}
:root[data-theme="dark"] .hero-noise-dark{display:block}
:root[data-theme="dark"] .hero-noise-light{display:none}
:root[data-theme="dark"] .hero-stars{
  background:
    radial-gradient(2.3px 2.3px at 18% 24%, #fff, rgba(255,255,255,0) 70%),
    radial-gradient(11px 11px at 18% 24%, rgba(255,255,255,.3), transparent 70%),
    radial-gradient(2px 2px at 74% 58%, #fff, rgba(255,255,255,0) 70%),
    radial-gradient(10px 10px at 74% 58%, color-mix(in srgb, var(--cyan) 34%, transparent), transparent 70%),
    radial-gradient(2.1px 2.1px at 40% 80%, #fff, rgba(255,255,255,0) 70%),
    radial-gradient(10px 10px at 40% 80%, color-mix(in srgb, var(--gold-bright) 30%, transparent), transparent 70%),
    radial-gradient(1.7px 1.7px at 88% 32%, #fff, rgba(255,255,255,0) 70%),
    radial-gradient(8px 8px at 88% 32%, color-mix(in srgb, var(--nebula-violet) 32%, transparent), transparent 70%);
  animation:star-twinkle-dark 6s ease-in-out infinite alternate;
}
@keyframes star-twinkle-dark{from{opacity:.6}to{opacity:1}}
:root[data-theme="dark"] .studio-hero::after{background:linear-gradient(212deg, rgba(242,194,76,.24), rgba(76,216,201,.11) 42%, transparent 70%)}
:root[data-theme="dark"] .studio-hero .logo-frame{filter:drop-shadow(0 10px 44px rgba(76,216,201,.2))}
:root[data-theme="dark"] .studio-hero .btn-primary{background:var(--cyan);color:#08221f}
:root[data-theme="dark"] .studio-hero .btn-primary:hover{background:#6fe3d6}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .studio-hero{background:var(--night)}
  :root:not([data-theme="light"]) .studio-hero::before{
    mix-blend-mode:screen;
    background:
      radial-gradient(46% 40% at 6% 10%, color-mix(in srgb, var(--nebula-violet) 36%, transparent), transparent 72%),
      radial-gradient(40% 36% at 95% 8%, color-mix(in srgb, var(--cyan) 22%, transparent), transparent 72%),
      radial-gradient(46% 40% at 92% 94%, color-mix(in srgb, var(--nebula-rose) 26%, transparent), transparent 72%),
      radial-gradient(50% 42% at 6% 96%, color-mix(in srgb, var(--gold-bright) 18%, transparent), transparent 72%),
      radial-gradient(1.3px 1.3px at 6% 18%, #fff, transparent),
      radial-gradient(1px 1px at 14% 62%, rgba(255,255,255,.7), transparent),
      radial-gradient(1.2px 1.2px at 21% 35%, #fff, transparent),
      radial-gradient(1px 1px at 29% 80%, rgba(255,255,255,.55), transparent),
      radial-gradient(1.2px 1.2px at 37% 12%, #fff, transparent),
      radial-gradient(1px 1px at 44% 55%, rgba(255,255,255,.5), transparent),
      radial-gradient(1.3px 1.3px at 52% 28%, #fff, transparent),
      radial-gradient(1px 1px at 58% 70%, rgba(255,255,255,.55), transparent),
      radial-gradient(1.1px 1.1px at 65% 45%, #fff, transparent),
      radial-gradient(1px 1px at 72% 85%, rgba(255,255,255,.5), transparent),
      radial-gradient(1.2px 1.2px at 79% 20%, #fff, transparent),
      radial-gradient(1px 1px at 85% 58%, rgba(255,255,255,.55), transparent),
      radial-gradient(1.1px 1.1px at 91% 38%, #fff, transparent),
      radial-gradient(1px 1px at 96% 75%, rgba(255,255,255,.5), transparent),
      radial-gradient(1.1px 1.1px at 10% 90%, rgba(255,255,255,.45), transparent),
      radial-gradient(1px 1px at 25% 5%, rgba(255,255,255,.45), transparent),
      radial-gradient(1.2px 1.2px at 48% 94%, color-mix(in srgb, var(--cyan) 70%, white), transparent),
      radial-gradient(1.2px 1.2px at 68% 6%, color-mix(in srgb, var(--gold-bright) 70%, white), transparent);
  }
  :root:not([data-theme="light"]) .hero-noise-dark{display:block}
  :root:not([data-theme="light"]) .hero-noise-light{display:none}
  :root:not([data-theme="light"]) .hero-stars{
    background:
      radial-gradient(2.3px 2.3px at 18% 24%, #fff, rgba(255,255,255,0) 70%),
      radial-gradient(11px 11px at 18% 24%, rgba(255,255,255,.3), transparent 70%),
      radial-gradient(2px 2px at 74% 58%, #fff, rgba(255,255,255,0) 70%),
      radial-gradient(10px 10px at 74% 58%, color-mix(in srgb, var(--cyan) 34%, transparent), transparent 70%),
      radial-gradient(2.1px 2.1px at 40% 80%, #fff, rgba(255,255,255,0) 70%),
      radial-gradient(10px 10px at 40% 80%, color-mix(in srgb, var(--gold-bright) 30%, transparent), transparent 70%),
      radial-gradient(1.7px 1.7px at 88% 32%, #fff, rgba(255,255,255,0) 70%),
      radial-gradient(8px 8px at 88% 32%, color-mix(in srgb, var(--nebula-violet) 32%, transparent), transparent 70%);
    animation:star-twinkle-dark 6s ease-in-out infinite alternate;
  }
  :root:not([data-theme="light"]) .studio-hero::after{background:linear-gradient(212deg, rgba(242,194,76,.24), rgba(76,216,201,.11) 42%, transparent 70%)}
  :root:not([data-theme="light"]) .studio-hero .logo-frame{filter:drop-shadow(0 10px 44px rgba(76,216,201,.2))}
  :root:not([data-theme="light"]) .studio-hero .btn-primary{background:var(--cyan);color:#08221f}
  :root:not([data-theme="light"]) .studio-hero .btn-primary:hover{background:#6fe3d6}
}

/* --- the road: gold+cyan seam where content begins --- */
.studio #app{position:relative}
.studio #app::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg, var(--gold-bright), var(--cyan));
}

/* --- product portfolio (作品) — reusable card, works with 1 or many --- */
.product-grid{display:grid;grid-template-columns:1fr;gap:1.4rem;margin-top:2.4rem}
.product-card{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(1.4rem,4vw,2.4rem);align-items:start;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:clamp(1.6rem,4vw,2.6rem);box-shadow:var(--shadow-md);
}
.product-card h3{margin-bottom:.6rem}
.pc-icon{width:74px;height:74px;flex:none;border-radius:18px;display:block;object-fit:cover;border:1px solid var(--line)}
.pc-meta{font-family:var(--font-mono);font-size:.78rem;color:var(--ink-faint);margin:1rem 0 1.5rem;letter-spacing:.02em;line-height:1.6}
@media (max-width:600px){ .product-card{grid-template-columns:1fr} }

/* --- principles get a star marker on the studio page --- */
.studio .pri h3::before{content:"✦";color:var(--gold-bright);margin-right:.5rem;font-size:.9em;vertical-align:.05em}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--line);padding:2.5rem 0;font-size:.85rem;color:var(--ink-faint)}
.site-footer .wrap{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center}
.site-footer .brand{font-size:.95rem;color:var(--ink-soft)}
.site-footer .fnote{font-family:var(--font-mono);font-size:.72rem}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){ .reveal{opacity:1;transform:none} }