/* =====================================================================
   kvasi.app · S5 "Floating glass" (picked 2026-10-23)
   One calm 640px column of glass panels over a fixed, living scene
   (SceneHero), a floating glass pill nav and a glass panel footer.
   Nav + footer on every page; panels on Home/About/World/Learning/
   Safety/Join. Blur radius drops on phones; solid translucent fallback
   where backdrop-filter is unsupported. Mock: mock-shots/src/sites5/S5.
   ===================================================================== */
:root{
  --g-fg:#17140f;--g-mut:rgba(23,20,15,.68);--g-gold:#8f6a27;--g-hair:rgba(23,20,15,.16);
  --g-glass:rgba(250,246,238,.72);--g-gline:rgba(255,255,255,.7);--g-field:rgba(255,255,255,.6);
  --g-btn:#17140f;--g-btnfg:#f6f1e7;--g-veil:rgba(240,234,222,.14);--g-pagebg:#efe9dd;
  --g-blur:12px;--g-blur-nav:12px;/* speed 2026-10-23: was 28/24px, blur over a moving video is costly */--g-ease:cubic-bezier(.2,.7,.1,1);
}
html[data-theme="dark"]{
  --g-fg:#f4f0e7;--g-mut:rgba(244,240,231,.72);--g-gold:#e6c47f;--g-hair:rgba(255,255,255,.18);
  --g-glass:rgba(14,16,20,.6);--g-gline:rgba(255,255,255,.14);--g-field:rgba(255,255,255,.08);
  --g-btn:#f4f0e7;--g-btnfg:#0b0d10;--g-veil:rgba(8,10,13,.38);--g-pagebg:#0b0d10;
}
@media (max-width:760px){:root{--g-blur:8px;--g-blur-nav:8px}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :root{--g-glass:rgba(250,246,238,.92)}
  html[data-theme="dark"]{--g-glass:rgba(16,18,23,.9)}
}
html:has(.gstage){overflow-x:clip}
body:has(.gstage){background:var(--g-pagebg)}

/* ---------- shared bits ---------- */
.glass{background:var(--g-glass);border:1px solid var(--g-gline);border-radius:24px;-webkit-backdrop-filter:blur(var(--g-blur)) saturate(1.5);backdrop-filter:blur(var(--g-blur)) saturate(1.5);
  box-shadow:0 30px 80px -30px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.12);color:var(--g-fg)}
.ar{width:1.05em;height:1.05em;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none;transition:transform .35s var(--g-ease)}
a:hover>.ar,button:hover>.ar{transform:translateX(3px)}
.gbtn,main a.gbtn{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 26px;border-radius:999px;background:var(--g-btn);color:var(--g-btnfg);
  font:550 15px/1 var(--sans);letter-spacing:-.005em;text-decoration:none;white-space:nowrap;transition:transform .3s var(--g-ease)}
.gbtn:hover{transform:translateY(-1px)}
.gbtn:focus-visible{outline:2px solid var(--g-gold);outline-offset:3px}

/* ---------- fixed scene ---------- */
.gstage{position:fixed;left:0;top:0;width:100%;height:100vh;height:100lvh;z-index:-1;overflow:hidden;background:#1a1712;pointer-events:none}
.gstage .hx__scene{position:absolute;inset:0}
.gstage .hx__scene>img,.gstage .hx__scene .hx__gl,.gstage .hx__scene .hx__vid{position:absolute;inset:0;width:100%;height:100%;max-width:none;display:block;object-fit:cover;object-position:var(--fx,50%) var(--fy,50%)}
.gstage .hx__scene>img{transform:scale(1.05)}
.gstage .hx__scene .hx__gl,.gstage .hx__scene .hx__vid{opacity:0;transition:opacity .8s ease}
.gstage .hx__scene.is-gl .hx__gl,.gstage .hx__scene.is-vid .hx__vid{opacity:1}
.gstage__mist{position:absolute;inset:-20%;background:radial-gradient(40% 30% at 30% 70%,rgba(255,255,255,.14),transparent 70%),radial-gradient(35% 25% at 75% 40%,rgba(255,255,255,.1),transparent 70%);animation:gMist 30s ease-in-out infinite alternate}
@keyframes gMist{to{transform:translate3d(6%,-4%,0) scale(1.1)}}
.gstage__veil{position:absolute;inset:0;background:var(--g-veil)}
@media (max-width:760px){
  .gstage .hx__scene>img,.gstage .hx__scene .hx__vid{object-position:var(--fxm,50%) var(--fym,50%)}
  .gstage__mist{animation:none}
}
@media (prefers-reduced-motion:reduce){.gstage__mist{animation:none}.gstage .hx__scene>img{transform:none}}

/* ---------- hero ---------- */
main section.hx{position:relative;min-height:100svh;display:flex;align-items:flex-end;justify-content:center;padding:120px 20px clamp(64px,12vh,128px);text-align:center;color:#f6f2e9;background:none}
.hx::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(6,8,10,.18),transparent 30%,transparent 38%,rgba(6,8,10,.58))}
.hx__in{position:relative;max-width:760px;width:100%;display:flex;flex-direction:column;align-items:center}
.hx__in::before{content:"";position:absolute;z-index:-1;left:50%;top:50%;width:min(900px,130vw);height:130%;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(6,8,10,.34),rgba(6,8,10,0));pointer-events:none}
main h1.hx__h{margin:0;font-family:var(--sans);font-size:clamp(48px,7.6vw,112px);font-weight:600;line-height:.95;letter-spacing:-.05em;max-width:11ch;color:#f6f2e9;text-wrap:balance;overflow-wrap:break-word;hyphens:auto;text-shadow:0 2px 30px rgba(0,0,0,.35)}
main h1.hx__h em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em;color:#f0d08e;padding-right:.04em}
main p.hx__lede{margin:24px 0 0;font-size:clamp(17px,1.3vw,19px);line-height:1.55;max-width:40ch;color:rgba(246,242,233,.92);text-shadow:0 1px 20px rgba(0,0,0,.45)}
.hx .gbtn--hero,main .hx a.gbtn--hero{margin-top:34px;background:#f6f2e9;color:#0b0d10}
html[lang="zh"] main h1.hx__h{letter-spacing:-.02em;line-height:1.1;max-width:12em;word-break:keep-all}
@media (max-width:760px){main section.hx{padding:110px 16px 72px}main h1.hx__h{max-width:100%}main p.hx__lede{font-size:16px}}

/* ---------- forms (glass pill; hooks unchanged) ---------- */
.gform{display:flex;gap:8px;width:100%;margin:0;padding:0;background:none;box-shadow:none}
main form.kvwl.gform{width:100%;margin:0;padding:0;background:none!important;box-shadow:none!important;border-radius:0}
.gform input[type=email]{flex:1;min-width:0;height:52px;margin:0;padding:0 20px;border:1px solid var(--g-hair);border-radius:999px;background:var(--g-field);color:var(--g-fg);font:500 16px/1 var(--sans);outline:0;box-shadow:none;transition:border-color .2s}
.gform input[type=email]::placeholder{color:var(--g-mut);opacity:1}
.gform input[type=email]:focus{border-color:var(--g-gold)}
.gform button[type=submit]{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:52px;margin:0;padding:0 22px;border:0;border-radius:999px;background:var(--g-btn);color:var(--g-btnfg);font:550 15px/1 var(--sans);white-space:nowrap;cursor:pointer;box-shadow:none}
.gform .kvwl__hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
.pk-fw{width:100%;max-width:460px;margin:26px auto 0;padding:6px;border-radius:999px;background:var(--g-field);border:1px solid var(--g-hair)}
.pk-fw .gform input[type=email]{border:0;background:transparent}
.pk-fw .kvwl__note{margin:8px 0 0;padding:0 16px 6px;font-size:14px;color:var(--g-fg)}
.kvwl__note:empty{display:none}
@media (max-width:520px){.gform{flex-direction:column}.gform input[type=email]{flex:none;width:100%}.pk-fw{border-radius:24px}.pk-fw .gform input[type=email]{text-align:center}}

/* ---------- panels ---------- */
main section.gl{position:relative;max-width:672px;margin:clamp(120px,18vh,220px) auto 0;padding:0 16px;text-align:left;background:none}
main section.gl--wide{max-width:992px}
.gp{padding:clamp(28px,5vw,60px)}
main .gp h2{margin:0;font-family:var(--sans);font-size:clamp(36px,4.6vw,64px);font-weight:600;line-height:1;letter-spacing:-.045em;color:var(--g-fg);text-align:left;text-wrap:balance;overflow-wrap:break-word;hyphens:auto}
main .gp h2 em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em;color:var(--g-gold)}
main .gp p.gp__b{margin:22px 0 0;font-size:17px;line-height:1.65;color:var(--g-mut);max-width:none}
main .gp>.gbtn{margin-top:32px}
.gp--w>:is(.mp,.rn,.ct,.fq,.hk-cmp,.hk-steps,.hk-ticks){margin-top:34px}
.gp--w>.tx:first-child{margin-top:0}
main section.gl:last-of-type{margin-bottom:0}
html[lang="zh"] main .gp h2{letter-spacing:-.02em;line-height:1.15}
html[lang="zh"] main :is(.gp,.hx) em{font-family:inherit!important;font-style:normal!important;font-weight:inherit!important}
@media (max-width:760px){.gp{padding:30px 22px}main .gp p.gp__b{font-size:16px}}
html.rv-on [data-rv]{opacity:0;transform:translate3d(0,24px,0);transition:opacity 1s var(--g-ease),transform 1.2s var(--g-ease)}
html.rv-on [data-rv].in{opacity:1;transform:none}

/* realm map */
.mp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(24px,4vw,56px);align-items:start;width:100%}
.mp__list{display:flex;flex-direction:column;border-top:1px solid var(--g-hair)}
.mp__b{display:flex;justify-content:space-between;align-items:baseline;gap:16px;width:100%;margin:0;padding:14px 4px;border:0;border-bottom:1px solid var(--g-hair);background:none;color:var(--g-fg);text-align:left;cursor:pointer;transition:color .25s,padding .35s var(--g-ease);scroll-margin-top:110px}
.mp__n{font-size:17px;font-weight:550;letter-spacing:-.01em}
.mp__s{font-size:14px;color:var(--g-mut)}
.mp__b[aria-selected=true]{color:var(--g-gold);padding-left:12px}
.mp__b[aria-selected=true] .mp__s{color:var(--g-gold)}
.mp__b:focus-visible{outline:2px solid var(--g-gold);outline-offset:-2px;border-radius:6px}
.mp__fig{margin:0;position:sticky;top:100px}
.mp__img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:16px;background:#1a1712}
.mp__img.is-in{animation:gMp .7s var(--g-ease)}
@keyframes gMp{from{opacity:.4}to{opacity:1}}
.mp__cap{display:flex;flex-direction:column;gap:4px;padding-top:18px}
.mp__cap[hidden]{display:none}
.mp__st{font-size:13px;color:var(--g-mut)}
.mp__st--on{color:var(--g-gold)}
.mp__name{font-size:26px;font-weight:600;letter-spacing:-.03em;color:var(--g-fg);text-decoration:none}
a.mp__name:hover{text-decoration:underline;text-decoration-color:var(--g-gold);text-underline-offset:5px;text-decoration-thickness:1px}
.mp__myth{font-size:15px;color:var(--g-mut)}
.mp__sub{font-size:22px}
.mp__sub em{font-family:var(--serif);font-style:italic;color:var(--g-gold)}
@media (max-width:760px){.mp{grid-template-columns:minmax(0,1fr)}.mp__fig{position:relative;top:0;order:-1}.mp__img{aspect-ratio:4/3}}
/* rune (silent) */
.rn{display:flex;flex-direction:column;align-items:center;gap:22px;padding:36px 20px;border:1px solid var(--g-hair);border-radius:16px;width:100%}
.rn__glyph svg{width:66px;height:99px;fill:none;stroke:var(--g-fg);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;transition:stroke .5s,filter .5s}
.rn.done .rn__glyph svg{stroke:var(--g-gold);filter:drop-shadow(0 0 14px color-mix(in srgb,var(--g-gold) 60%,transparent))}
.rn__ch{display:flex;gap:12px}
.rn__b{width:58px;height:58px;margin:0;padding:0;border-radius:999px;border:1px solid var(--g-hair);background:none;color:var(--g-fg);font:500 22px/1 var(--sans);cursor:pointer;transition:border-color .2s,background .2s}
.rn__b:hover{border-color:var(--g-fg)}
.rn__b.ok{background:var(--g-gold);border-color:var(--g-gold);color:#16130e}
.rn__b.no{animation:gNudge .4s}
@keyframes gNudge{30%{transform:translateX(-4px)}60%{transform:translateX(4px)}}
main .gp p.rn__q{margin:0;font-size:15px;font-weight:550;color:var(--g-fg);text-align:center}
main .gp p.rn__fb{margin:0;font-size:15px;color:var(--g-mut);min-height:1.5em;text-align:center}
main .gp p.rn__after{margin:0;font-size:clamp(22px,2.6vw,28px);font-weight:600;letter-spacing:-.03em;line-height:1.15;text-align:center;color:var(--g-fg)}
.rn__after em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--g-gold)}
.rn__after[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.rn__b.no{animation:none}}
/* comparison table */
.ct{width:100%;border-collapse:collapse;font-size:16px;color:var(--g-fg)}
.ct th,.ct td{padding:16px 8px;border-bottom:1px solid var(--g-hair);text-align:left;font-weight:400;vertical-align:baseline}
.ct thead th{font-size:14px;color:var(--g-mut);font-weight:500}
.ct thead th:last-child{color:var(--g-gold)}
.ct tbody th{font-weight:550}
.ct tbody td:nth-of-type(2){color:var(--g-mut);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--g-mut) 50%,transparent)}
.ct tbody td:last-child{font-weight:550}
@media (max-width:520px){.ct{font-size:15px}.ct th,.ct td{padding:14px 4px}}
.fq__pm{width:14px;height:14px;position:relative;flex:none}
.fq__pm::before,.fq__pm::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;background:currentColor;transition:transform .35s var(--g-ease)}
.fq__pm::after{transform:rotate(90deg)}
.fq__i[open] .fq__pm::after{transform:rotate(0)}
/* faq */
.fq{border-top:1px solid var(--g-hair);width:100%}
.fq__i{border-bottom:1px solid var(--g-hair)}
.fq__i summary{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 2px;cursor:pointer;list-style:none;font-size:18px;font-weight:550;letter-spacing:-.015em;color:var(--g-fg)}
.fq__i summary::-webkit-details-marker{display:none}
main .gp .fq__i p{margin:0;padding:0 32px 24px 2px;font-size:16px;line-height:1.6;color:var(--g-mut)}
.fq__more,main a.fq__more{display:inline-block;margin-top:28px;font-size:15px;font-weight:600;color:var(--g-fg);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--g-hair)}
.fq__more:hover{text-decoration-color:var(--g-gold)}
.fq__more:focus-visible{outline:2px solid var(--g-gold);outline-offset:3px;border-radius:6px}

/* =====================================================================
   NAV · "01 Halo Pill" (user pick 2026-10-24, mock scratch navx/o/1)
   Nav.astro + LangMenu.astro; behaviour public/js/glass-nav.js + lang-menu.js.
   - Centred floating glass pill: wordmark · links · theme · menu · flag
     language dropdown · gold Join.
   - .gn__ind: soft highlight that rests on the current page and slides
     to the hovered/focused link (positioned by glass-nav.js).
   - Join is "magnetic" (pointer-fine only, never with reduced motion);
     --mx moves its gold sheen with the pointer.
   - Scroll: --gsp (0→1 over 320px) frosts the glass; .is-scrolled tightens
     the pill (height, wordmark, Join).
   - <1100px: links move into the menu; the menu opens a full-screen
     glass sheet (links, languages, search, Join). Desktop: the menu
     button opens a small glass dropdown with search.
   ===================================================================== */
.gn{--gsp:0;position:fixed;top:0;left:0;right:0;z-index:60;display:flex;justify-content:center;padding:0 16px;pointer-events:none;font-family:var(--sans)}
.gn__pill{pointer-events:auto;position:relative;z-index:2;display:flex;align-items:center;gap:4px;width:max-content;max-width:100%;height:62px;margin-top:18px;padding:0 8px 0 24px;border-radius:999px;box-sizing:border-box;
  background:color-mix(in srgb,var(--g-glass) calc(80% + var(--gsp) * 20%),transparent);border:1px solid var(--g-gline);color:var(--g-fg);
  -webkit-backdrop-filter:blur(calc(var(--g-blur-nav) + var(--gsp) * 12px)) saturate(1.6);-webkit-backdrop-filter:blur(calc(var(--g-blur-nav) + var(--gsp) * 12px)) saturate(1.6);backdrop-filter:blur(calc(var(--g-blur-nav) + var(--gsp) * 12px)) saturate(1.6);
  box-shadow:0 22px 60px -26px rgba(40,26,6,.38),inset 0 1px 0 rgba(255,255,255,.45);
  transition:height .45s var(--g-ease),margin .45s var(--g-ease),padding .45s var(--g-ease)}
html[data-theme="dark"] .gn__pill{box-shadow:0 22px 60px -26px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.08)}
.gn.is-scrolled .gn__pill{height:52px;margin-top:10px;padding-left:20px}
.gn a{color:inherit;text-decoration:none}
.gn :is(a,button):focus-visible{outline:2px solid var(--g-gold);outline-offset:2px;border-radius:999px}
.gn__wm{display:inline-flex;align-items:center;flex:none;margin-right:14px}
.gn__wm>span{display:block}
.gn__wm svg{display:block;width:70px;height:25px;max-width:none;transition:width .4s var(--g-ease),height .4s var(--g-ease)}
.gn.is-scrolled .gn__wm svg{width:62px;height:22px}
/* links + sliding highlight */
.gn__l{position:relative;display:flex;align-items:center;margin-right:4px;font-size:14px;font-weight:500}
.gn__l a{position:relative;z-index:1;display:inline-flex;align-items:center;height:38px;padding:0 15px;border-radius:999px;color:var(--g-mut);white-space:nowrap;transition:color .25s}
.gn__l a:hover,.gn__l a[aria-current]{color:var(--g-fg)}
.gn__l a[aria-current]::after{content:"";position:absolute;left:50%;bottom:3px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--g-gold)}
.gn__ind{position:absolute;left:0;top:50%;z-index:0;height:38px;margin-top:-19px;border-radius:999px;pointer-events:none;opacity:0;
  background:color-mix(in srgb,var(--g-fg) 7%,transparent);box-shadow:inset 0 0 0 1px var(--g-hair);
  transition:transform .45s var(--g-ease),width .45s var(--g-ease),opacity .3s}
.gn__ind.no-t{transition:none}
.gn__thm,.gn__mb{display:grid;place-items:center;width:40px;height:40px;margin:0;padding:0;border:0;border-radius:999px;background:none;color:inherit;cursor:pointer;flex:none;transition:background .25s}
.gn__thm:hover,.gn__mb:hover{background:color-mix(in srgb,var(--g-fg) 8%,transparent)}
.gn__thm svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;transition:transform .5s var(--g-ease)}
.gn__thf{fill:currentColor;stroke:none}
.gn__thm[aria-pressed=true] svg{transform:scaleX(-1)}
.gn__bars{display:block;position:relative;width:18px;height:12px}
.gn__bars i{position:absolute;left:0;right:0;height:1.6px;border-radius:2px;background:currentColor;transition:transform .35s var(--g-ease),top .35s var(--g-ease)}
.gn__bars i:first-child{top:2px}.gn__bars i:last-child{top:9px}
.gn.is-open .gn__bars i:first-child{top:5.5px;transform:rotate(45deg)}
.gn.is-open .gn__bars i:last-child{top:5.5px;transform:rotate(-45deg)}
/* magnetic gold Join */
.gn__cta{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;height:46px;margin-left:6px;padding:0 20px 0 22px;border-radius:999px;
  background:radial-gradient(120% 140% at var(--mx,50%) 0%,#f7e3ad 0%,#efd592 30%,#c9a24d 100%);color:#1a1408!important;font-size:13.5px;font-weight:620;letter-spacing:.005em;white-space:nowrap;
  box-shadow:0 10px 28px -10px rgba(201,162,77,.85),inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(120,80,10,.25);
  transition:transform .35s var(--g-ease),box-shadow .35s var(--g-ease),height .45s var(--g-ease)}
.gn__cta:hover{box-shadow:0 16px 36px -10px rgba(201,162,77,.95),inset 0 1px 0 rgba(255,255,255,.6),inset 0 -1px 0 rgba(120,80,10,.25)}
.gn.is-scrolled .gn__cta{height:40px}
/* menu panel: desktop dropdown (search) */
.gn__mm{pointer-events:auto;position:absolute;top:90px;left:50%;transform:translateX(-50%);z-index:1;box-sizing:border-box;width:min(360px,calc(100vw - 32px));padding:14px;border-radius:24px;
  background:var(--g-glass);border:1px solid var(--g-gline);-webkit-backdrop-filter:blur(24px) saturate(1.6);-webkit-backdrop-filter:blur(24px) saturate(1.6);backdrop-filter:blur(24px) saturate(1.6);color:var(--g-fg);box-shadow:0 30px 60px -30px rgba(0,0,0,.5)}
.gn__mm[hidden]{display:none}
.gn__ml{display:none}
.gn__h{display:none;margin:2px 4px 10px;font-size:13px;color:var(--g-mut)}
.gn__sr{display:flex;justify-content:space-between;align-items:center;width:100%;margin:0;padding:10px 6px;border:0;background:none;color:var(--g-fg);font:500 15px/1.3 var(--sans);cursor:pointer;text-align:left}
.gn__si svg{width:18px;height:18px}
.gn__mj{display:none}
/* language dropdown (LangMenu.astro): region groups, flags, BETA tags */
.lm{position:relative;flex:none}
.lm__b{display:inline-flex;align-items:center;gap:7px;height:40px;margin:0;padding:0 11px;border:0;border-radius:999px;background:none;color:inherit;font:600 12px/1 var(--sans);letter-spacing:.08em;cursor:pointer;transition:background .25s}
.lm__b:hover,.lm__b[aria-expanded=true]{background:color-mix(in srgb,var(--g-fg) 8%,transparent)}
.lm__fl{display:block;flex:none;width:20px;height:14px;border-radius:3px;object-fit:cover;box-shadow:0 0 0 1px var(--g-hair)}
.lm__cv{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.8;transition:transform .3s var(--g-ease)}
.lm__b[aria-expanded=true] .lm__cv{transform:rotate(180deg)}
.lm__pn{position:absolute;top:calc(100% + 18px);right:-60px;z-index:5;width:272px;box-sizing:border-box;padding:10px;border-radius:22px;background:var(--g-glass);border:1px solid var(--g-gline);
  -webkit-backdrop-filter:blur(24px) saturate(1.6);-webkit-backdrop-filter:blur(24px) saturate(1.6);backdrop-filter:blur(24px) saturate(1.6);box-shadow:0 30px 60px -30px rgba(0,0,0,.5);color:var(--g-fg);text-align:left;font-family:var(--sans);animation:gnPop .28s var(--g-ease)}
.lm__pn[hidden]{display:none}
@keyframes gnPop{from{opacity:0;transform:translateY(-6px) scale(.98)}}
.lm__rg{margin:10px 10px 4px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--g-mut);font-weight:600}
.lm__rg:first-child{margin-top:4px}
.gn a.lm__lo,.lm__lo{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:14px;color:var(--g-fg);font-size:15px;font-weight:500;text-decoration:none}
.lm__lo:hover,.lm__lo:focus-visible{background:color-mix(in srgb,var(--g-fg) 8%,transparent)}
.gn .lm__lo:focus-visible{border-radius:14px;outline-offset:-2px}
.lm__cd{margin-left:auto;font-size:10.5px;letter-spacing:.1em;color:var(--g-mut);font-weight:600}
.lm__ck{width:16px;height:16px;fill:none;stroke:var(--g-gold);stroke-width:2;visibility:hidden;flex:none}
.gn a.lm__lo[aria-current]{color:var(--g-gold)}
.lm__lo[aria-current] .lm__ck{visibility:visible}
.lm__lo[aria-current] .lm__cd{color:var(--g-gold)}
.lm__bt{font-size:9px;font-weight:650;letter-spacing:.09em;text-transform:uppercase;padding:2px 6px;border-radius:999px;border:1px solid currentColor;opacity:.55;line-height:1.2}
.gn__mm .lm__pn--in{display:none}
/* compact: phones + narrow tablets get the full-screen glass sheet */
@media (max-width:1099px){
  .gn__l{display:none}
  .gn__pill{width:100%;max-width:440px;height:56px;margin-top:12px;padding:0 6px 0 18px}
  .gn.is-scrolled .gn__pill{height:52px;margin-top:8px}
  .gn__wm{margin-right:auto}
  .gn__cta,.gn.is-scrolled .gn__cta{height:42px;padding:0 16px}
  .gn__h{display:block}
  .lm{display:none}
  .gn.is-open .gn__pill{background:transparent;border-color:transparent;box-shadow:none;-webkit-backdrop-filter:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  .gn__mm{position:fixed;inset:0;transform:none;width:auto;height:100dvh;overflow-y:auto;overscroll-behavior:contain;padding:96px 24px 32px;border:0;border-radius:0;display:flex;flex-direction:column;
    background:color-mix(in srgb,var(--g-pagebg) 86%,transparent);-webkit-backdrop-filter:blur(30px) saturate(1.5);-webkit-backdrop-filter:blur(30px) saturate(1.5);backdrop-filter:blur(30px) saturate(1.5);box-shadow:none;animation:gnFade .3s var(--g-ease)}
  .gn__ml{display:flex;flex-direction:column;margin-bottom:28px}
  .gn__ml a{padding:11px 4px;border-bottom:1px solid var(--g-hair);font-size:30px;font-weight:600;letter-spacing:-.03em;line-height:1.1}
  .gn__ml a[aria-current]{color:var(--g-gold)}
  .gn__sr{margin-top:14px;padding:14px 16px;border:1px solid var(--g-hair);border-radius:16px;background:color-mix(in srgb,var(--g-fg) 5%,transparent);color:var(--g-mut)}
  .gn__mj{display:inline-flex;justify-content:center;margin-top:22px}
  .gn__mm .lm__pn--in{display:block;position:static;width:auto;padding:0;border:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;-webkit-backdrop-filter:none;backdrop-filter:none;animation:none}
  .gn__mm .lm__pn--in .lm__lo{padding:11px 8px;font-size:16px}
  .gn__mm .lm__pn--in .lm__rg{margin-left:8px}
  html.gn-open,html.gn-open body{overflow:hidden}
}
@keyframes gnFade{from{opacity:0}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){@media (max-width:1099px){.gn__mm{background:var(--g-pagebg)}}}
@media (prefers-reduced-motion:reduce){.gn *,.gn__pill{transition:none!important;animation:none!important}.gn__cta{transform:none!important}}
/* ===== end NAV ===== */

@media (prefers-reduced-motion:reduce){html.rv-on [data-rv]{opacity:1;transform:none;transition:none}}

/* Living backdrop: slow uniform camera drift (no per-pixel depth, so nothing warps). User 2026-10-23: "bg not animated". */
@keyframes kv-drift{0%{transform:scale(1.06) translate3d(-1.2%,-.6%,0)}50%{transform:scale(1.12) translate3d(1.2%,.6%,0)}100%{transform:scale(1.06) translate3d(-1.2%,-.6%,0)}}
.hx__scene > img,.hx__scene > canvas,.hx__scene > video{animation:kv-drift 38s ease-in-out infinite;transform-origin:50% 50%;will-change:transform}
@media (prefers-reduced-motion:reduce){.hx__scene > img,.hx__scene > canvas,.hx__scene > video{animation:none}}

/* All sections centre-aligned (user 2026-10-23) */
main section.gl,main .gp,main .gp h2,main .gp p,main .gp .gp__b{text-align:center}
main .gp{align-items:center}
main .gp h2,main .gp p{margin-left:auto;margin-right:auto}
.ct th,.ct td{text-align:center}
.mp__b{justify-content:center;text-align:center}
.gbtn{margin-left:auto;margin-right:auto}
/* sharper backdrop: gentler zoom range */
@keyframes kv-drift{0%{transform:scale(1.04) translate3d(-.9%,-.4%,0)}50%{transform:scale(1.08) translate3d(.9%,.4%,0)}100%{transform:scale(1.04) translate3d(-.9%,-.4%,0)}}

/* Richer, crisper backdrop (user 2026-10-23: "better quality, colours"): lighter veil + mist, gentle colour lift */
:root{--g-veil:linear-gradient(180deg,rgba(14,12,9,.06),rgba(14,12,9,.16))}
:root[data-theme="dark"]{--g-veil:linear-gradient(180deg,rgba(10,9,7,.22),rgba(10,9,7,.36))}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--g-veil:linear-gradient(180deg,rgba(10,9,7,.22),rgba(10,9,7,.36))}}
.gstage .hx__scene{filter:saturate(1.14) contrast(1.06)}
.gstage__mist{opacity:.55}
/* hero text vertically centred on every page (user 2026-10-23) */
main section.hx{align-items:center;padding-top:clamp(96px,14vh,140px);padding-bottom:clamp(64px,10vh,110px)}
/* serif accent only in the hero and footer; mid-section headings stay all sans (user 2026-10-23) */
main .gp h2 em,main .gp em{font-family:var(--sans);font-style:normal;font-weight:inherit;letter-spacing:inherit;color:inherit;-webkit-text-fill-color:currentColor}
/* serif accent only in the footer (user 2026-10-23): hero titles all sans too */
main section.hx h1 em,.hx__h em{font-family:var(--sans);font-style:normal;font-weight:inherit;letter-spacing:inherit;padding-right:0}
/* Home hero: exactly two lines; size so the longer line fits */
[data-pg="home"] .hx__h,body.pg-home .hx__h{font-size:clamp(34px,7.4vw,112px)}
/* titles with a manual line break: exactly those lines, sized so the longest fits the screen */
main section.hx .hx__h--fit{white-space:nowrap;font-size:min(clamp(34px,7.4vw,112px),calc((100vw - 40px) / (var(--ln) * .5)))}

/* every title one colour: accent words keep their font (serif only in footer) but not a second colour (user 2026-10-23) */
h1 em,h2 em,h3 em,.hx__h em,main .gp h2 em{color:inherit!important;-webkit-text-fill-color:currentColor!important;background:none!important}
/* keep two-line titles truly centred even when wider than the text column */
main section.hx .hx__h--fit{width:max-content;max-width:none;margin-left:0;margin-right:0;align-self:center}
/* ...and never wider than its column: a max-content h1 overflowing the 760px .hx__in was centred
   by overflow rules that differ per engine (Safari/scrollbar cases drifted left). The column opens
   to the full hero width when it holds a fit title, so the h1 always sits inside it, centred. */
main section.hx .hx__in:has(> .hx__h--fit){max-width:none}
main section.hx .hx__h--fit{margin-inline:auto;text-align:center}
/* realm map: wide, short images (user 2026-10-23: "not such tall realm pics") */
.mp__img{aspect-ratio:16/9}
@media (max-width:760px){.mp__img{aspect-ratio:16/9}}

/* hero sub as frosted glass pills (user pick 2026-10-23): one row on desktop, balanced 2x2 on phones */
main .hx__pills{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
main .hx__pills li{margin:0;padding:8px 16px;border-radius:999px;font-size:15px;line-height:1.3;font-weight:500;color:#f6f2e9;white-space:nowrap;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);-webkit-backdrop-filter:blur(9px) saturate(1.3);backdrop-filter:blur(9px) saturate(1.3);-webkit-backdrop-filter:blur(9px) saturate(1.3);
  text-shadow:0 1px 10px rgba(0,0,0,.3);box-shadow:0 8px 24px -14px rgba(0,0,0,.4)}
main .hx__pills li::before,main .hx__pills li::marker{content:none}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){main .hx__pills li{background:rgba(20,18,14,.45)}}
@media (max-width:760px){
  main .hx__pills{display:grid;grid-template-columns:repeat(2,auto);justify-content:center;gap:8px}
  main .hx__pills li{font-size:14px;padding:8px 14px;text-align:center;white-space:normal}
}

/* ---------- Home section picks (user 2026-10-24, mock-shots/src/worldsec) ---------- */
/* 1 · Reveal */
.hk-rev .hk-rev__hair{display:block;width:120px;height:1px;margin:30px auto;background:var(--g-gold);transform-origin:50% 50%}
.hk-rev.is-arm .hk-rev__hair{transform:scaleX(0);transition:transform 1.4s var(--g-ease)}
.hk-rev.is-arm.in .hk-rev__hair{transform:scaleX(1)}
main .gp.hk-rev p.hk-rev__b{margin-top:0;max-width:34em}
.hk-w{opacity:.08;transition:opacity .6s ease}.hk-w.on{opacity:1}
.hk-rev__caret{display:inline-block;width:2px;height:.85em;margin-left:4px;vertical-align:-.05em;background:var(--g-gold);animation:hkBlink 1s steps(1) infinite}
@keyframes hkBlink{50%{opacity:0}}
/* 3 · Quest vs Worksheet */
.hk-cmp{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%}
.hk-cmp>div{display:flex;align-items:center;justify-content:center;gap:10px;padding:16px 14px;border-radius:16px;border:1px solid var(--g-hair);font-size:15px;font-weight:550;line-height:1.35;color:var(--g-mut)}
.hk-cmp__no{opacity:.72}.hk-cmp__no span{opacity:.7}
.hk-cmp .hk-cmp__yes{color:var(--g-fg);border-color:var(--g-gold)}.hk-cmp__yes span{color:var(--g-gold)}
/* 4 · Waking row (constellation) */
/* 5 · Ends on a high */
.hk-steps{list-style:none;display:flex;width:100%;margin:0;padding:12px 0 0;counter-reset:hs}
.hk-steps li{flex:1;position:relative;margin:0;padding:24px 4px 0;border-top:1px solid var(--g-gold);font-size:14px;font-weight:550;line-height:1.3;color:var(--g-fg)}
.hk-steps li::before{counter-increment:hs;content:counter(hs);position:absolute;top:-12px;left:50%;transform:translateX(-50%);width:24px;height:24px;border-radius:50%;background:var(--g-gold);color:var(--g-btnfg);font-size:12px;line-height:24px;text-align:center}
html:not([data-theme="dark"]) .hk-steps li::before{color:#fff}
.hk-steps li:first-child{border-image:linear-gradient(90deg,transparent 50%,var(--g-gold) 50%) 1}
.hk-steps li:last-child{border-image:linear-gradient(90deg,var(--g-gold) 50%,transparent 50%) 1}
@media (max-width:520px){.hk-steps li{font-size:12.5px;padding-top:22px}}
/* 6 · Trust ticks */
.hk-ticks{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;margin:0;padding:0}
.hk-ticks li{display:flex;align-items:center;gap:10px;margin:0;padding:13px 14px;border-radius:14px;border:1px solid var(--g-hair);font-size:15px;font-weight:550;line-height:1.3;text-align:left;color:var(--g-fg)}
.hk__tk{width:18px;height:18px;flex:none;fill:none;stroke:var(--g-gold);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:520px){.hk-ticks,.hk-cmp{grid-template-columns:1fr}}
/* 7 · Two cities */
.hk-cities{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:16px;width:100%;margin:0 0 40px}
.hk-cities figure{position:relative;margin:0;aspect-ratio:4/3;border-radius:16px;overflow:hidden;background:#1a1712}
.hk-cities img{width:100%;height:100%;object-fit:cover;display:block}
.hk-cities figcaption{position:absolute;left:12px;bottom:12px;padding:6px 12px;border-radius:999px;background:rgba(0,0,0,.42);color:#fff;font-size:12.5px;font-weight:600;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.hk-cities__plus{font-size:44px;font-weight:300;line-height:1;color:var(--g-gold)}
main .gp.hk-both{padding-top:clamp(16px,2.4vw,24px)}
main .gp.hk-both>.gbtn{margin-top:32px}
@media (max-width:760px){.hk-cities{grid-template-columns:minmax(0,1fr);gap:8px;margin-bottom:30px}.hk-cities__plus{font-size:32px}main .gp.hk-both{padding:12px 12px 32px}main .gp.hk-both>:is(h2,p){padding:0 10px}}
@media (prefers-reduced-motion:reduce){.hk-w,.hk-rev .hk-rev__hair{transition:none!important}.hk-rev__caret{display:none}}

/* ---------- inner-page section picks (user 2026-10-24, mock-shots/src/pagessec) ---------- */
/* shared: sans titles, one colour, centred */
main :is(.pk-gal,.pk-split,.pk-pills,.pk-mf,.pk-cards) h2{margin:0;font-family:var(--sans);font-weight:600;line-height:1.02;letter-spacing:-.045em;text-wrap:balance;overflow-wrap:break-word;hyphens:auto;text-align:center}
main :is(.pk-gal,.pk-split,.pk-pills,.pk-mf,.pk-cards) h2 em{font:inherit;letter-spacing:inherit;color:inherit}
html[lang="zh"] main :is(.pk-gal,.pk-split,.pk-pills,.pk-mf,.pk-cards) h2{letter-spacing:-.02em;line-height:1.15}
/* Two-Place Spread: text + two city plates, gold hairlines between */
.pk-gal{display:grid;grid-template-columns:1.2fr 1fr 1fr;overflow:hidden;padding:0}
.pk-gal>*{min-width:0;border-left:1px solid color-mix(in srgb,var(--g-gold) 70%,transparent)}
.pk-gal>:first-child{border:0}
.pk-gal__t{display:flex;flex-direction:column;justify-content:center;padding:48px 34px;text-align:center}
main .pk-gal h2{font-size:clamp(32px,3.6vw,50px);color:var(--g-fg)}
main .pk-gal p,main .pk-split p{margin:20px auto 0;max-width:34em;font-size:16px;line-height:1.6;color:var(--g-mut)}
.pk-gal figure{position:relative;margin:0;min-height:420px;background:#1a1712}
.pk-gal img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.pk-gal figcaption{position:absolute;left:12px;bottom:12px;padding:6px 12px;border-radius:999px;background:rgba(0,0,0,.42);color:#fff;font-size:12.5px;font-weight:600;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
@media (max-width:860px){.pk-gal{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.pk-gal__t{grid-column:1/-1;padding:34px 22px}.pk-gal figure{min-height:220px;border-top:1px solid color-mix(in srgb,var(--g-gold) 70%,transparent)}}
@media (max-width:420px){.pk-gal figure{min-height:170px}}
/* Manifesto: big title over the scene + one frosted pill */
main section.pk-mf{text-align:center}
main .pk-mf h2{font-size:clamp(44px,8.6vw,124px);color:#fff;text-shadow:0 4px 40px rgba(0,0,0,.35)}
main .pk-mf p.pk-pill{display:block;width:fit-content;max-width:620px;margin:34px auto 0;padding:18px 28px;border-radius:999px;background:var(--g-glass);border:1px solid var(--g-gline);-webkit-backdrop-filter:blur(var(--g-blur)) saturate(1.4);backdrop-filter:blur(var(--g-blur)) saturate(1.4);-webkit-backdrop-filter:blur(var(--g-blur)) saturate(1.4);font-size:15.5px;line-height:1.55;color:var(--g-fg)}
main .pk-mf>.gbtn{display:flex;width:fit-content;margin-top:22px}
@media (max-width:760px){main .pk-mf p.pk-pill{border-radius:22px;padding:16px 20px;font-size:15px}}
/* Sentence Pills: title card + one glass pill per sentence */
.pk-pills{display:flex;flex-direction:column;gap:12px}
.pk-pills__h{padding:clamp(40px,6vw,64px) clamp(22px,5vw,56px)}
main .pk-pills h2{font-size:clamp(36px,5.6vw,68px);color:var(--g-fg)}
.pk-pills ul{list-style:none;display:flex;flex-direction:column;gap:10px;margin:0;padding:0}
.pk-pills li{margin:0;padding:18px 24px;border-radius:22px;text-align:center;font-size:16px;line-height:1.55;color:var(--g-fg)}
.pk-pills li::before,.pk-pills li::marker{content:none}
@media (max-width:760px){.pk-pills li{padding:16px 18px;font-size:15px}}
/* Gallery Split / Split with Image: copy beside a framed plate */
.pk-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:20px;padding:20px}
.pk-split__t{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:40px 30px;text-align:center}
main .pk-split h2{font-size:clamp(34px,4vw,56px);color:var(--g-fg)}
.pk-split__f{position:relative;margin:0;min-height:380px;border-radius:16px;overflow:hidden;background:#1a1712;box-shadow:0 20px 50px -20px rgba(0,0,0,.5)}
.pk-split__f img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.pk-split__f i{position:absolute;inset:8px;border:1px solid rgba(255,255,255,.25);border-radius:10px;background:radial-gradient(circle at 50% 30%,rgba(255,255,255,.18),transparent 55%);pointer-events:none}
main .pk-split .pk-fw{margin-top:26px}
main .pk-split p.pk-fine{margin-top:16px;font-size:12.5px;line-height:1.6;color:var(--g-mut)}
@media (max-width:860px){.pk-split{grid-template-columns:minmax(0,1fr);gap:10px;padding:12px}.pk-split__t{padding:28px 12px 8px}.pk-split__f{min-height:230px}}
/* Promise Cards: five glass cards, 3 + 2 on desktop */
.pk-cards{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.pk-card{grid-column:span 2;padding:30px 24px;text-align:center;scroll-margin-top:110px}
.pk-card:nth-child(4){grid-column:2/span 2}
.pk-card__n{display:block;margin-bottom:14px;font:600 12px/1 var(--sans);letter-spacing:.2em;color:var(--g-gold)}
main .pk-cards h2{font-size:21px;line-height:1.2;letter-spacing:-.02em;color:var(--g-fg)}
main .pk-card p{margin:10px 0 0;font-size:15px;line-height:1.55;color:var(--g-mut)}
.pk-cards__cta{grid-column:1/-1;display:flex;justify-content:center;margin-top:10px}
@media (max-width:860px){.pk-cards{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.pk-card,.pk-card:nth-child(4){grid-column:auto}.pk-card:nth-child(5){grid-column:1/-1}}
@media (max-width:560px){.pk-cards{grid-template-columns:minmax(0,1fr);gap:10px}.pk-card:nth-child(5){grid-column:auto}.pk-card{padding:26px 20px}}

/* ===== Tree3D · "Index Split" (V2 pick 2026-10-24, worldopts mock) — Home "A world worth exploring." + World "tree" =====
   Left: title, copy, numbered realm index (status + lock). Right: the 3D Yggdrasil held still, turning to the
   hovered/focused/tapped row (src/components/Tree3D.astro + src/scripts/tree3d-boot.js). Phones: head / tree / index. */
.t3g .t3g__in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-template-areas:"head tree" "idx tree";column-gap:clamp(28px,4.5vw,64px);align-items:start;text-align:left}
.t3g__head{grid-area:head}
main .t3g .gp h2,main .t3g .gp .gp__b{text-align:left}
main .t3g .gp__b{max-width:460px}
.t3g__idx{grid-area:idx;list-style:none;margin:30px 0 0;padding:0;border-top:1px solid var(--g-hair)}
.t3g__idx li{margin:0;border-bottom:1px solid var(--g-hair)}
.t3g__idx a{display:grid;grid-template-columns:30px minmax(0,1fr) auto;column-gap:12px;align-items:baseline;padding:12px 4px;color:var(--g-fg);text-decoration:none;border-radius:6px;transition:padding .3s var(--g-ease),background .3s}
.t3g__idx em{grid-row:span 2;font-style:normal;font-size:11px;color:var(--g-mut);font-variant-numeric:tabular-nums}
.t3g__idx b{font-weight:600;font-size:16px;line-height:1.3}
.t3g__idx span{grid-column:2;font-size:13px;line-height:1.4;color:var(--g-mut)}
.t3g__st{grid-column:3;grid-row:1/span 2;align-self:center;display:inline-flex;align-items:center;gap:5px;font-style:normal;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--g-mut);white-space:nowrap}
.t3g__idx .is-live .t3g__st{color:var(--g-gold)}
.t3g__lock{width:10px;height:10px;flex:none;opacity:.75}
.t3g__idx a:hover,.t3g__idx a.on{padding-left:12px;background:linear-gradient(90deg,color-mix(in srgb,var(--g-gold) 11%,transparent),transparent)}
.t3g__idx a.on b{color:var(--g-gold)}
.t3g__idx a:focus-visible{outline:2px solid var(--g-gold);outline-offset:-2px}
.t3g__stage{grid-area:tree;align-self:center;position:relative;aspect-ratio:4/5;border-radius:24px;overflow:hidden;isolation:isolate;cursor:grab;touch-action:pan-y;background:radial-gradient(120% 90% at 50% 40%,#1a2030,#07090d)}
.t3g__stage.is-drag{cursor:grabbing}
.t3g__still,.t3g__canvas{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover}
.t3g__canvas{opacity:0;transition:opacity .6s ease}
.t3g__still{transition:opacity .6s ease}
.t3g__stage.is-3d .t3g__canvas{opacity:1}
.t3g__stage.is-3d .t3g__still{opacity:0}
@media (max-width:900px){
  .t3g .t3g__in{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "tree" "idx"}
  .t3g__stage{margin-top:28px;aspect-ratio:1;border-radius:18px}
  .t3g__idx{margin-top:22px}
  main .t3g .gp h2,main .t3g .gp .gp__b{text-align:center}
  main .t3g .gp__b{margin-left:auto;margin-right:auto}
}
@media (max-width:420px){
  .t3g__idx a{grid-template-columns:24px minmax(0,1fr) auto;column-gap:8px;padding:11px 2px}
  .t3g__idx a:hover,.t3g__idx a.on{padding-left:8px}
  .t3g__st{font-size:10px;letter-spacing:.04em;white-space:normal;text-align:right;max-width:110px}
}
@media (prefers-reduced-motion:reduce){.t3g__idx a,.t3g__canvas,.t3g__still{transition:none}}

/* ===== Home · "And the progress shows" → 03 Parent Card (2026-10-24, progressopts 03) =====
   Phone-style glass card; figures are illustrative so the "Example" tag always shows.
   Bar fills when the section's [data-rv] gets .in (glass.js). */
.gp--w>.hk-pc{margin-top:34px}
.hk-pc{width:min(320px,100%);margin-left:auto;margin-right:auto;padding:22px;border-radius:34px;text-align:left;background:var(--g-glass);border:1px solid var(--g-gline);box-shadow:0 18px 50px rgba(0,0,0,.14);box-sizing:border-box}
.hk-pc__ex{display:inline-block;font:600 10px/1 var(--sans,inherit);letter-spacing:.2em;text-transform:uppercase;color:var(--g-gold);border:1px solid var(--g-gold);padding:5px 8px;border-radius:999px}
main .gp h3.hk-pc__h{font-size:19px;line-height:1.25;letter-spacing:-.02em;margin:14px 0 4px;color:var(--g-fg)}
main .gp p.hk-pc__sub{margin:0;text-align:left;font-size:12.5px;line-height:1.4;color:var(--g-mut)}
.hk-pc__img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:16px;margin:14px 0}
.hk-pc__rows{margin:0}
.hk-pc__rows>div{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 12px;padding:10px 0;border-top:1px solid var(--g-gline);font-size:13.5px}
.hk-pc__rows dt{color:var(--g-fg)}
.hk-pc__rows dd{margin:0;font-weight:700;color:var(--g-fg);font-variant-numeric:tabular-nums}
.hk-pc__bar{flex:1 0 100%;height:6px;border-radius:9px;background:var(--g-gline);overflow:hidden;margin-top:6px}
.hk-pc__bar b{display:block;height:100%;width:0;background:var(--g-gold);border-radius:9px;transition:width 1.6s var(--g-ease)}
.in .hk-pc__bar b{width:40%}
@media (prefers-reduced-motion:reduce){.hk-pc__bar b{transition:none;width:40%}}
/* ===== end Parent Card ===== */

/* 2026-10-24 additions: waitlist privacy line (Join), About #talk, Learning "Why it works" */
main p.wl-pn{margin:10px 0 0;padding:0 16px;font-size:12.5px;line-height:1.55;color:var(--g-mut);text-align:center}
.wl-pn a{color:inherit;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.wl-pn a:hover{color:var(--g-fg)}
main section.pk-talk{text-align:center}
.gp--w>.wy{margin-top:34px}
.wy{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%}
.wy li{display:flex;flex-direction:column;align-items:center;gap:8px;padding:24px 18px;border:1px solid var(--g-hair);border-radius:16px;text-align:center}
main .gp .wy h3{margin:0;font:600 18px/1.25 var(--sans);letter-spacing:-.02em;color:var(--g-fg)}
main .gp .wy p{margin:0;font-size:15px;line-height:1.55;color:var(--g-mut)}
.wy a{margin-top:auto;padding-top:6px;font-size:14px;font-weight:600;color:var(--g-fg);text-decoration:underline;text-underline-offset:3px}
.wy a:hover{color:var(--g-gold)}
@media (max-width:760px){.wy{grid-template-columns:minmax(0,1fr)}}

/* ---------- guide article: "Takeaways first" (user pick 2026-10-24, mock art/v4) ----------
   src/components/Article.astro. Scene behind a title-only hero, then stacked 640px glass
   panels: Key takeaways + Join CTA, the article, FAQ accordions (public/js/guide.js), sources;
   then related guide cards. Replaces the old .gga "floating glass" article styles. */
main[data-pg^="learning-guides-"] section.hx{min-height:72svh}
main[data-pg^="learning-guides-"] h1.hx__h{font-size:clamp(34px,4.8vw,68px);line-height:1.04;letter-spacing:-.035em;max-width:18ch}
html[lang="zh"] main[data-pg^="learning-guides-"] h1.hx__h{word-break:normal;line-break:strict;max-width:14em}
.gar{max-width:640px;margin:clamp(40px,8vh,90px) auto 0;padding:0 16px;display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
.gar__kt{padding:clamp(24px,4vw,36px);text-align:left}
main p.gar__meta{display:flex;flex-wrap:wrap;gap:6px 10px;margin:0 0 18px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--g-mut);max-width:none}
.gar__meta a{color:var(--g-gold);text-decoration:none}
.gar__meta a:hover{text-decoration:underline;text-underline-offset:3px}
main h2.gar__k{margin:0;font:600 12px/1.2 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--g-gold);text-align:left}
.gar__ol{margin:18px 0 26px;padding:0;list-style:none;counter-reset:k}
.gar__ol li{counter-increment:k;display:grid;grid-template-columns:36px minmax(0,1fr);padding:12px 0;border-top:1px solid var(--g-hair);font-size:17px;line-height:1.5;font-weight:500;color:var(--g-fg);overflow-wrap:break-word}
.gar__ol li::before{content:counter(k);font-weight:600;color:var(--g-gold)}
main p.gar__one{margin:16px 0 26px;font-size:18px;line-height:1.55;font-weight:500;color:var(--g-fg);max-width:none}
.gar__kt .gbtn{max-width:100%;white-space:normal;text-align:left;line-height:1.2}
.gar__p{padding:clamp(24px,4.5vw,44px);text-align:left}
main .gar__p p{margin:0 0 1.1em;max-width:none;font-size:18px;line-height:1.72;color:var(--g-fg);text-align:left;overflow-wrap:break-word}
main .gar__p p:last-child{margin-bottom:0}
main .gar__p p em{font-family:var(--sans);font-style:italic;color:inherit}
.gar__cover{margin:0 0 28px;border-radius:14px;overflow:hidden;aspect-ratio:16/7;background:var(--g-hair)}
.gar__cover img{display:block;width:100%;height:100%;object-fit:cover}
main .gar__p p.gar__lead{font-size:21px;line-height:1.5;font-weight:500;letter-spacing:-.015em}
.gar__sec{margin-top:2.4em}
main h2.gar__h{margin:0 0 .6em;font:600 24px/1.2 var(--sans);letter-spacing:-.03em;color:var(--g-fg);text-align:left;text-wrap:balance;overflow-wrap:break-word;hyphens:auto}
.gar__list{margin:0 0 1.2em;padding:0;list-style:none;counter-reset:s}
.gar__list li{counter-increment:s;position:relative;padding:0 0 .9em 2.4em;font-size:17px;line-height:1.6;color:var(--g-fg);overflow-wrap:break-word}
.gar__list li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:.2em;font:600 12px/1.6 var(--sans);letter-spacing:.06em;color:var(--g-gold)}
.gar__acc{border-top:1px solid var(--g-hair)}
.gar__acc .fq__i summary{align-items:flex-start;font-size:17.5px;line-height:1.35;padding:20px 2px}
.gar__acc .fq__pm{margin-top:5px}
.gar__ans{overflow:hidden}
.gar__ans.is-anim{transition:height .4s var(--g-ease)}
main .gar__p .gar__ans p{margin:0;padding:0 32px 22px 2px;font-size:16px;line-height:1.6;color:var(--g-mut)}
.gar__src ol{margin:0;padding:0;list-style:none}
.gar__src li{display:flex;flex-direction:column;gap:2px;padding:12px 0;border-top:1px solid var(--g-hair);font-size:15px;line-height:1.5}
.gar__src a{color:var(--g-fg);font-weight:550;text-decoration:none;overflow-wrap:anywhere}
.gar__src a:hover{color:var(--g-gold)}
.gar__src span{color:var(--g-mut);font-size:13.5px}
main h2.gar__rh{margin:24px 0 16px;font:600 24px/1.2 var(--sans);letter-spacing:-.03em;color:#f6f2e9;text-align:left;text-shadow:0 2px 20px rgba(0,0,0,.45)}
.gar__rel ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none}
main .gar__rel a{display:flex;flex-direction:column;height:100%;overflow:hidden;border-radius:18px;color:var(--g-fg);text-decoration:none;transition:transform .4s var(--g-ease)}
.gar__rel a:hover{transform:translateY(-3px)}
.gar__rel img{display:block;flex:none;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.gar__rb{display:flex;flex-direction:column;gap:8px;padding:14px 16px 18px}
.gar__rk{font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--g-gold)}
.gar__rt{font-size:16px;font-weight:600;line-height:1.3;letter-spacing:-.015em;overflow-wrap:break-word}
:is(.gar__meta a,.gar__src a,.gar__rel a):focus-visible,.gar__acc .fq__i summary:focus-visible{outline:2px solid var(--g-gold);outline-offset:3px;border-radius:8px}
@media (max-width:760px){
  main .gar__p p{font-size:17px}
  main .gar__p p.gar__lead{font-size:19px}
  .gar__rel ul{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){.gar__ans.is-anim,.gar__rel a{transition:none}}

/* ===== footer · "Atelier" (user pick 2026-10-24, footer mock o1) =====
   src/components/Footer.astro + public/js/footer.js. A centred 640px glass panel over the footer's own
   Midgard scene (veiled into the page colour at the top). Gold kicker, sans headline with the serif
   accent (one colour: site rule 2026-10-23), inset pill form (button sits inside the email field),
   quiet page links; Back to top, legal and company lines below on the scene. Cursor glow on the
   panel, magnetic button and scene parallax (fine pointers only), all off with reduced motion. */
.ft{--ft-veil:linear-gradient(180deg,var(--g-pagebg) 0%,color-mix(in srgb,var(--g-pagebg) 55%,transparent) 30%,color-mix(in srgb,var(--g-pagebg) 20%,transparent) 100%);
  --ft-glow:rgba(184,145,74,.22);
  position:relative;isolation:isolate;overflow:hidden;margin-top:clamp(120px,22vh,260px);padding:120px 16px 32px;text-align:center;font-family:var(--sans);color:var(--g-fg)}
html[data-theme="dark"] .ft{--ft-glow:rgba(230,196,127,.18)}
body:not(:has(.gstage)) .ft{margin-top:96px}
.ft a{color:inherit;text-decoration:none}
.ft__bg{position:absolute;inset:-6% -6% 0;z-index:-1;background:url(/graphics/kvasi-realm-midgard-poster-hq.webp) center 30%/cover;will-change:transform}
.ft__bg::after{content:"";position:absolute;inset:0;background:var(--ft-veil)}
.ft__in{position:relative;max-width:640px;margin:0 auto}
.ft .ft__p{position:relative;isolation:isolate;border-radius:36px;padding:clamp(40px,7vw,72px) clamp(20px,6vw,64px) 36px;display:flex;flex-direction:column;align-items:center}
.ft__p::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .5s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),var(--ft-glow),transparent 70%)}
.ft__p.is-glow::before{opacity:1}
.ft p.ft__k{margin:0;font:600 11px/1.4 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--g-gold)}
.ft .ft__h{margin:18px 0 0;font:600 clamp(40px,6.4vw,76px)/.96 var(--sans);letter-spacing:-.05em;color:var(--g-fg);text-wrap:balance;overflow-wrap:break-word}
.ft .ft__h em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em}
html[lang="zh"] .ft .ft__h{letter-spacing:-.02em;line-height:1.15}
html[lang="zh"] .ft .ft__h em{font-family:inherit;font-style:normal;font-weight:inherit}
.ft p.ft__s{margin:18px auto 32px;max-width:36ch;font-size:16px;line-height:1.55;color:var(--g-mut)}
.ft__fw{width:100%}
.ft__f{position:relative;display:flex;gap:8px;width:100%;margin:0;padding:6px;border:1px solid var(--g-hair);border-radius:999px;background:var(--g-field);transition:border-color .3s,box-shadow .4s var(--g-ease)}
.ft__f:focus-within{border-color:var(--g-gold);box-shadow:0 0 0 6px color-mix(in srgb,var(--g-gold) 14%,transparent)}
.ft__f input[type=email]{flex:1;min-width:0;height:52px;margin:0;padding:0 18px;border:0;border-radius:999px;background:transparent;color:var(--g-fg);font:500 16px/1 var(--sans);outline:0;box-shadow:none}
.ft__f input[type=email]::placeholder{color:var(--g-mut);opacity:1}
.ft__f .kvwl__hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
.ft__f button{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;margin:0;padding:0 26px;border:0;border-radius:999px;background:var(--g-btn);color:var(--g-btnfg);
  font:600 15px/1 var(--sans);letter-spacing:-.005em;white-space:nowrap;cursor:pointer;transition:transform .35s var(--g-ease),box-shadow .3s}
html[data-theme="dark"] .ft__f button{background:var(--g-gold);color:#0b0d10}
.ft__f button:hover{box-shadow:0 12px 30px -10px var(--g-gold)}
.ft__fw .kvwl__note{min-height:0;margin:10px 0 0;font-size:14px;color:var(--g-fg)}
.ft__fw .kvwl__note.err{color:#b4553f}
html[data-theme="dark"] .ft__fw .kvwl__note.err{color:#f0a48f}
.ft p.ft__pn{margin:12px 0 0;font-size:13px;line-height:1.5;color:var(--g-mut)}
.ft__pn a{color:var(--g-fg);border-bottom:1px solid var(--g-hair);white-space:nowrap;transition:border-color .2s}
.ft__pn a:hover{border-color:var(--g-gold)}
.ft__l{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;width:100%;margin-top:36px;padding-top:24px;border-top:1px solid var(--g-hair);font-size:14px}
.ft__l a{opacity:.75;transition:opacity .2s}.ft__l a:hover{opacity:1}
.ft__bot{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:28px}
.ft__top{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border:1px solid var(--g-hair);border-radius:999px;background:color-mix(in srgb,var(--g-pagebg) 40%,transparent);color:var(--g-fg);font:500 12.5px/1 var(--sans);cursor:pointer;transition:border-color .2s,transform .3s var(--g-ease)}
.ft__top:hover{border-color:var(--g-gold);transform:translateY(-2px)}
.ft__top svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ft p.ft__fine{margin:0;font-size:12.5px;line-height:1.6;color:var(--g-fg);opacity:.85;text-shadow:0 0 12px var(--g-pagebg),0 0 4px var(--g-pagebg)}
.ft p.ft__lg{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 18px}
.ft__fine a.u{border-bottom:1px solid var(--g-hair)}
.ft__fine a:hover{color:var(--g-fg)}
.ft :is(a,button):focus-visible{outline:2px solid var(--g-gold);outline-offset:3px;border-radius:6px}
@media (max-width:560px){
  .ft__f{flex-direction:column;border-radius:28px}
  .ft__f input[type=email]{flex:none;width:100%;text-align:center}
  .ft__f button{width:100%}
}
@media (prefers-reduced-motion:reduce){.ft *,.ft__p::before{transition:none!important}.ft__bg{transform:none!important}}
/* ===== end footer · Atelier ===== */

/* ---------- Learning demos: "Watch the world answer" grid + mistakes hint video (2026-10-24, preview) ---------- */
main section.ld{text-align:center}
main .ld__h{margin:0 0 clamp(24px,4vw,40px);font-family:var(--sans);font-size:clamp(34px,4.4vw,60px);font-weight:600;line-height:1.05;letter-spacing:-.045em;color:var(--g-fg);text-align:center;text-wrap:balance}
html[lang="zh"] main .ld__h{letter-spacing:-.02em;line-height:1.15}
.ld__g{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,22px)}
.ld__c{margin:0;padding:10px 10px 18px;border-radius:22px;text-align:center;min-width:0;display:flex;flex-direction:column;align-items:center}
.ld__c video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:14px;background:var(--g-field)}
.ld__t{margin-top:14px;display:inline-block;padding:4px 11px;border-radius:999px;border:1px solid var(--g-hair);font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--g-gold)}
.ld__c p,.ld__c figcaption{margin:10px 6px 0;font-family:var(--sans);font-size:15px;line-height:1.45;color:var(--g-fg);text-wrap:balance}
.ld__hint{margin-top:clamp(14px,2vw,22px);max-width:560px;margin-left:auto;margin-right:auto}
@media (max-width:900px){.ld__g{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.ld__g{grid-template-columns:1fr}}
/* odd last demo card sits centred under the row above (7 cards: 3+3+1 desktop, 2+2+2+1 tablet) */
@media (min-width:901px){.ld__g{grid-template-columns:repeat(6,minmax(0,1fr))}.ld__c{grid-column:span 2}.ld__c:last-child:nth-child(3n+1){grid-column:3/5}.ld__c:last-child:nth-child(3n+2){grid-column:4/6}.ld__c:nth-last-child(2):nth-child(3n+1){grid-column:2/4}}
@media (min-width:561px) and (max-width:900px){.ld__g{grid-template-columns:repeat(4,minmax(0,1fr))}.ld__c{grid-column:span 2}.ld__c:last-child:nth-child(odd){grid-column:2/4}}
/* ---------- end Learning demos ---------- */

/* ===== Tree3D · realm zoom G "Zoom + poster" (user pick 2026-10-24, realmzoom mock) =====
   Focusing a realm eases the camera above it (src/scripts/tree3d-boot.js) and this card fades in
   underneath with the realm's painted poster, name and subject. Touch never spins the tree: the
   stage keeps touch-action:pan-y and drag-to-turn is mouse only. */
.t3g__poster{position:absolute;left:16px;bottom:16px;z-index:2;margin:0;width:min(58%,300px);border-radius:14px;overflow:hidden;background:rgba(10,12,16,.6);border:1px solid rgba(255,255,255,.18);box-shadow:0 18px 40px rgba(0,0,0,.35);opacity:0;transform:translateY(10px);transition:opacity .9s ease .35s,transform 1.1s cubic-bezier(.2,.7,.1,1) .35s;pointer-events:none}
.t3g__stage:not(.is-3d) .t3g__poster{display:none}
.t3g__poster.on{opacity:1;transform:none}
.t3g__poster img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.t3g__poster figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:9px 12px 10px;color:#f4f0e7;font-size:13px;line-height:1.3}
.t3g__poster figcaption b{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.t3g__poster figcaption span{color:#e6c47f;font-size:12px;text-align:right}
@media (max-width:700px){.t3g__poster{left:10px;bottom:10px;width:56%;border-radius:10px}.t3g__poster figcaption{padding:6px 9px 7px;font-size:12px}}
@media (prefers-reduced-motion:reduce){.t3g__poster{transition:none}}