@font-face{font-family:'Fraunces';font-style:normal;font-weight:400 900;font-display:swap;font-optical-sizing:auto;src:url('/assets/fonts/fraunces.woff2') format('woff2')}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/fonts/instrument.woff2') format('woff2')}
/* Space Mono — the meta/label face in the new design system. Self-hosted because the
   production CSP forbids Google Fonts, and a blocked font would silently fall back mid-page. */
@font-face{font-family:'Space Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/spacemono-400.woff2') format('woff2')}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/spacemono-700.woff2') format('woff2')}
/* ---- Pebblemind token system ------------------------------------------------
   One disciplined two-hue family instead of six unrelated brand colors:
   --pink  = "dawn"  (warm coral, kataware-doki twilight light)
   --blue  = "night" (deep indigo-violet, observatory cosmos)
   --marigold/--teal/--violet stay as tonal siblings of that same family.
   --green stays purely semantic (correct-answer state only).
   Defined once here; every rule below inherits it via var(--x). ------------- */
:root,:root[data-theme=light]{--paper:#FBF3EA;--paper2:#F3E7D6;--card:#FFFDF9;--ink:#221A2E;--soft:#5C5470;--line:#E7D9C4;
--blue:#3D2E7C;--pink:#A8330F;--marigold:#8A5800;--green:#0E9E63;--teal:#4A5FC1;--violet:#6B4FC4;
--blue-w:#EAE4F7;--pink-w:#F7D9CC;--marigold-w:#F2DFB8;--green-w:#DCF2E6;
--disp:'Fraunces',Georgia,'Times New Roman',serif;--body:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;--mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;--serif:'Fraunces',Georgia,'Times New Roman',serif;--sa:.10;--sh:34 26 46;}
:root[data-theme=dark]{--paper:#0B0917;--paper2:#120F24;--card:#171331;--ink:#F4EEE6;--soft:#B3A8C9;--line:#2B2450;
--blue:#9C8CF2;--pink:#FF8F63;--marigold:#F0AE4E;--green:#3ED08C;--teal:#7C8FE0;--violet:#A98BFF;
--blue-w:#241D45;--pink-w:#3A2318;--marigold-w:#332512;--green-w:#123326;--sa:.55;--sh:0 0 0;}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--paper:#0B0917;--paper2:#120F24;--card:#171331;--ink:#F4EEE6;--soft:#B3A8C9;--line:#2B2450;
--blue:#9C8CF2;--pink:#FF8F63;--marigold:#F0AE4E;--green:#3ED08C;--teal:#7C8FE0;--violet:#A98BFF;
--blue-w:#241D45;--pink-w:#3A2318;--marigold-w:#332512;--green-w:#123326;--sa:.55;--sh:0 0 0;}}
:root{--disp:'Fraunces',Georgia,'Times New Roman',serif;--body:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;--mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;--serif:'Fraunces',Georgia,'Times New Roman',serif;
/* "solid" variants: fixed across both themes, always dark/saturated enough for white text on top.
   --blue/--pink/etc above are tuned to read as TEXT on the page surface (so they lighten in dark mode);
   these are for CHIPS/BUTTONS/GRADIENTS that carry fixed white text and must not wash out in dark mode. */
--blue-solid:#3D2E7C;--pink-solid:#A8330F;--marigold-solid:#8A5800;--teal-solid:#4A5FC1;--violet-solid:#6B4FC4;}

/* ---- Design-system scales (Claude Design handoff, design/Claude Design handoff request/)
   Additive: spacing, radii, elevation and motion had no tokens before, so every value was
   hand-typed per rule. One definition each, light default with a dark override, matching
   design-system/pebblemind-tokens.css exactly. Do not add a second definition of any of
   these anywhere. ------------------------------------------------------------------- */
:root,:root[data-theme=light]{
--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--sp-7:48px;--sp-8:72px;--sp-9:112px;
--r-1:6px;--r-2:12px;--r-3:20px;--r-4:32px;
--e-1:0 1px 2px rgba(34,26,46,.06),0 8px 24px rgba(34,26,46,.07);
--e-2:0 2px 4px rgba(34,26,46,.07),0 18px 44px rgba(34,26,46,.10);
--dur-1:140ms;--dur-2:240ms;--dur-3:520ms;--dur-4:1200ms;--ease:cubic-bezier(.22,.61,.36,1);
--clearing:rgba(255,253,249,.82);--clearing-line:rgba(34,26,46,.10);
/* The Sky Arc: one continuous atmosphere; position in it signals progress. Every light
   stop stays bright enough that --ink and --soft clear 4.5:1 — the arc bends before the
   text tokens do. */
--arc-dawn:#F7DAC6;--arc-day:#F2E4D6;--arc-dusk:#E6D3DB;--arc-night:#E0D5E8;--arc-deep:#DCD2E6;
/* --green is carried as TEXT for the correct-answer state, so it has to clear 4.5:1 on
   --card and --paper2; #0E9E63 did not. The lighter hue survives as --green-indicator for
   dots and fills, where only 3:1 non-text contrast applies. */
--green:#0A7A4C;--green-indicator:#0E9E63;}

:root[data-theme=dark]{
--e-1:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.34);
--e-2:0 2px 4px rgba(0,0,0,.44),0 18px 44px rgba(0,0,0,.4);
--clearing:rgba(23,19,49,.76);--clearing-line:rgba(244,238,230,.12);
--arc-dawn:#4A2A3A;--arc-day:#2A2148;--arc-dusk:#211C46;--arc-night:#100D24;--arc-deep:#0B0917;
--green:#3ED08C;--green-indicator:#3ED08C;}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){
--e-1:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.34);
--e-2:0 2px 4px rgba(0,0,0,.44),0 18px 44px rgba(0,0,0,.4);
--clearing:rgba(23,19,49,.76);--clearing-line:rgba(244,238,230,.12);
--arc-dawn:#4A2A3A;--arc-day:#2A2148;--arc-dusk:#211C46;--arc-night:#100D24;--arc-deep:#0B0917;
--green:#3ED08C;--green-indicator:#3ED08C;}}

/* Motion the new landing scenes rely on. Reduced-motion is honoured globally further down. */
@keyframes ripple{0%{transform:scale(.72);opacity:.5}70%{opacity:0}100%{transform:scale(1.7);opacity:0}}
@keyframes riseIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes orbit{from{transform:rotateX(68deg) rotateZ(0)}to{transform:rotateX(68deg) rotateZ(360deg)}}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--blue)}.wrap{max-width:1080px;margin:0 auto;padding:0 22px}.main{padding:34px 22px 70px}
.bar{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--paper) 86%,transparent);backdrop-filter:blur(10px);border-bottom:1.5px solid var(--line)}
.bar .row{display:flex;align-items:center;gap:14px;padding:11px 0}
.brand{display:flex;align-items:center;gap:9px;font-family:var(--disp);font-weight:800;text-decoration:none;color:var(--ink)}
/* The mark is an inline <svg> now, not a decorated square. It paints with
   currentColor, and --blue is the one token that already carries the brand indigo
   in light (#3D2E7C, the supplied logo colour) and lifts to #9C8CF2 in dark, where
   a true indigo would vanish against the observatory ground. */
.brand .brandmark{width:30px;height:30px;display:block;flex:none;color:var(--blue);overflow:visible;padding:0}
.nav{margin-left:auto;display:flex;align-items:center;gap:14px}
/* :not(.btn) matters. The Sign up control is an <a class="btn"> inside .nav, so a
   bare `.nav a` (specificity 0,1,1) outranked `.btn`'s own color (0,1,0) and painted
   the button label --soft grey on a dark gradient — about 1.5:1, invisible. This
   rule is for plain nav links only; buttons keep their own colour. */
.nav a:not(.btn){color:var(--soft);text-decoration:none;font-weight:600;font-size:.92rem}
.nav a:not(.btn):hover{color:var(--ink)}
.link{background:none;border:none;color:var(--soft);font:inherit;font-weight:600;cursor:pointer;padding:0}.link:hover{color:var(--ink)}
.ibtn{width:34px;height:34px;border-radius:9px;border:1.5px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer}
.btn{display:inline-block;font-family:var(--disp);font-weight:800;font-size:1rem;border:none;border-radius:12px;padding:12px 22px;cursor:pointer;background:var(--blue-solid);color:#fff;text-decoration:none;box-shadow:3px 3px 0 rgb(var(--sh)/var(--sa))}
.btn:hover{transform:translate(-1px,-1px)}.btn.sm{padding:8px 15px;font-size:.9rem;border-radius:10px}
.btn.ghost{background:var(--card);color:var(--ink);border:1.5px solid var(--line);box-shadow:none}.btn.block{display:block;text-align:center;margin-top:12px}
.h1{font-family:var(--disp);font-weight:800;letter-spacing:-.02em;font-size:clamp(1.7rem,3.6vw,2.4rem);line-height:1.05;margin:0 0 .3em}
.h1.big{font-size:clamp(2.2rem,6vw,3.6rem)}.h2{font-family:var(--disp);font-weight:800;font-size:1.6rem;margin:0 0 .4em}
.u{color:var(--blue);position:relative}.u::after{content:"";position:absolute;left:0;right:0;bottom:.05em;height:.16em;background:var(--marigold);z-index:-1;border-radius:3px}
.lede{color:var(--soft);font-size:clamp(1.02rem,1.7vw,1.2rem);max-width:60ch}.muted{color:var(--soft);font-size:.9rem}
.hero{padding:36px 0 20px}.eyebrow{font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--blue);font-weight:700}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.feat{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:40px 0}
@media(max-width:720px){.feat{grid-template-columns:1fr}}
.fc{background:var(--card);border:1.5px solid var(--line);border-radius:16px;padding:20px}
.fc .fi{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:11px;color:#fff;font-size:1.1rem;margin-bottom:10px}
.fc .fi.b{background:var(--blue-solid)}.fc .fi.p{background:var(--pink)}.fc .fi.t{background:var(--teal)}
.fc h3{font-family:var(--disp);font-weight:800;margin:0 0 4px;font-size:1.1rem}.fc p{margin:0;color:var(--soft);font-size:.92rem}
.how{background:var(--card);border:1.5px solid var(--line);border-radius:18px;padding:26px}
.steps{margin:0 0 18px;padding-left:20px;color:var(--soft)}.steps li{margin:7px 0}.steps b{color:var(--ink)}
.authwrap{display:flex;justify-content:center;padding-top:14px}.card{background:var(--card);border:1.5px solid var(--line);border-radius:18px;padding:26px}
.auth{max-width:440px;width:100%;box-shadow:6px 6px 0 rgb(var(--sh)/var(--sa))}
.form{display:grid;gap:14px;margin-top:16px}.form label{display:grid;gap:6px;font-weight:700;font-size:.9rem}.form small{font-weight:400;color:var(--soft)}
.form input,.form select{font:inherit;font-weight:600;padding:11px 13px;border:1.5px solid var(--line);border-radius:11px;background:var(--paper);color:var(--ink)}
.form select{appearance:none;-webkit-appearance:none;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--soft) 50%),linear-gradient(135deg,var(--soft) 50%,transparent 50%);background-position:calc(100% - 18px) 51%,calc(100% - 13px) 51%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:36px}
.form input:focus,.form select:focus{outline:none;border-color:var(--blue)}
.stagepill{display:inline-block;font-family:var(--mono);font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;vertical-align:middle;padding:2px 8px;border-radius:99px;color:#fff;transform:translateY(-1px)}
.stagepill.s-sparks{background:var(--marigold-solid)}.stagepill.s-explorers{background:var(--pink-solid)}.stagepill.s-investigators{background:var(--violet-solid)}.stagepill.s-strategists{background:var(--blue-solid)}.stagepill.s-architects{background:var(--teal-solid)}
.alert{background:var(--pink-w);border:1.5px solid var(--pink);color:var(--pink);border-radius:12px;padding:11px 15px;margin-bottom:16px;font-weight:600;font-size:.92rem}
.cols{display:grid;grid-template-columns:1.7fr 1fr;gap:20px;margin-top:8px;align-items:start}@media(max-width:760px){.cols{grid-template-columns:1fr}}
.kidcol{display:grid;gap:14px}.side{display:grid;gap:0}
.kid{background:var(--card);border:1.5px solid var(--line);border-radius:16px;padding:18px 20px}
.kh{display:flex;align-items:center;gap:12px;margin-bottom:14px}.av{width:42px;height:42px;border-radius:12px;background:var(--blue-solid);color:#fff;display:grid;place-items:center;font-family:var(--disp);font-weight:800;font-size:1.2rem}
.av.big{width:60px;height:60px;font-size:1.6rem;border-radius:16px}.kh b{font-family:var(--disp);font-size:1.1rem}.kh small{display:block;color:var(--soft);font-size:.8rem}
.sk{margin:7px 0}.skt{display:flex;justify-content:space-between;font-size:.8rem;color:var(--soft);margin-bottom:3px}.skt span:first-child{font-weight:700;color:var(--ink)}
.skb{height:12px;background:var(--paper2);border:1.5px solid var(--line);border-radius:99px;overflow:hidden}.skb i{display:block;height:100%;border-radius:99px}
.skb .b{background:var(--blue)}.skb .p{background:var(--pink)}.skb .t{background:var(--teal)}.skb .m{background:var(--marigold)}
.empty{background:var(--card);border:1.5px dashed var(--line);border-radius:16px;padding:26px;color:var(--soft);text-align:center}
.profiles{display:flex;flex-wrap:wrap;gap:16px;margin-top:16px}
.profile{background:var(--card);border:2px solid var(--line);border-radius:18px;padding:20px;display:flex;flex-direction:column;align-items:center;gap:10px;min-width:150px;box-shadow:4px 4px 0 rgb(var(--sh)/var(--sa))}
.profile b{font-family:var(--disp);font-size:1.05rem}.pin{width:120px;text-align:center;font:inherit;font-weight:700;letter-spacing:.2em;padding:8px;border:1.5px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink)}
.cue{width:54px;height:54px;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--teal),var(--blue));position:relative;flex:0 0 auto}
.cue::before,.cue::after{content:"";position:absolute;width:8px;height:8px;background:#fff;border-radius:50%;top:19px}.cue::before{left:15px}.cue::after{right:15px}
.cue i{position:absolute;left:18px;bottom:13px;width:18px;height:8px;border-bottom:3px solid #fff;border-radius:0 0 12px 12px}
.intro{text-align:center;background:var(--card);border:2px solid var(--ink);border-radius:24px;padding:36px 24px;box-shadow:6px 6px 0 rgb(var(--sh)/var(--sa))}
.intro .cue{margin:0 auto 10px}.intro h1{font-family:var(--disp);font-weight:800;font-size:2rem;margin:6px 0}.intro p{color:var(--soft);margin:0 auto 20px;max-width:36ch}
.big.play{font-size:1.05rem;padding:14px 30px;background:var(--marigold-solid);color:#fff}
.hud{display:flex;align-items:center;gap:12px;margin-bottom:16px}.hud .pi{font-family:var(--disp);font-weight:800;white-space:nowrap}
.meter{flex:1;height:14px;background:var(--paper2);border:1.5px solid var(--line);border-radius:99px;overflow:hidden}.meter i{display:block;height:100%;background:linear-gradient(90deg,var(--marigold),var(--pink))}
.stars{color:var(--marigold);letter-spacing:2px}
.coach{display:flex;align-items:center;gap:12px;margin-bottom:16px}.bubble{background:var(--card);border:1.5px solid var(--line);border-radius:16px;border-bottom-left-radius:4px;padding:10px 15px;font-family:var(--disp);font-weight:700}
.puzzle{background:var(--card);border:2px solid var(--ink);border-radius:22px;padding:24px;box-shadow:6px 6px 0 rgb(var(--sh)/var(--sa))}
.ptag{font-family:var(--mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.1em;color:var(--soft);display:flex;gap:8px;margin-bottom:6px}.ptag .lv{background:var(--blue-w);color:var(--blue);padding:2px 8px;border-radius:99px;font-weight:700}
.pq{font-family:var(--disp);font-weight:800;font-size:1.3rem;margin:0 0 16px}
.stage{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:center;background:var(--paper2);border-radius:14px;padding:18px;margin-bottom:16px;min-height:88px}
.qmark{width:50px;height:50px;border-radius:13px;border:3px dashed var(--soft);display:grid;place-items:center;font-family:var(--disp);font-weight:800;font-size:1.6rem;color:var(--soft)}
.numseq{font-family:var(--disp);font-weight:800;font-size:1.8rem;display:flex;gap:12px;flex-wrap:wrap;justify-content:center}.numseq .qm{color:var(--pink)}
.grp{display:inline-flex;gap:3px;align-items:center}.shape{display:inline-block}.shape.circle{border-radius:50%}.shape.square{border-radius:5px}.shape.triangle{clip-path:polygon(50% 3%,97% 97%,3% 97%)}.shape.diamond{clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:12px}
.choice{background:var(--paper);border:2px solid var(--line);border-radius:15px;padding:16px;min-height:70px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-family:var(--disp);font-weight:800;font-size:1.5rem}
.choice:hover:not(:disabled){border-color:var(--blue)}.choice.right{border-color:var(--green);background:var(--green-w)}.choice.wrong{border-color:var(--pink);background:var(--pink-w)}
.tools{display:flex;align-items:center;gap:12px;margin-top:14px;flex-wrap:wrap}
.hintbtn{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;font-weight:700;background:var(--marigold-w);color:var(--marigold);border:1.5px solid var(--marigold);border-radius:10px;padding:9px 13px;cursor:pointer}
.fb{font-family:var(--disp);font-weight:800;flex:1;min-width:140px}.fb.good{color:var(--green)}.fb.soft{color:var(--pink)}
.hint{margin-top:12px;background:var(--marigold-w);border-radius:11px;padding:10px 13px;font-size:.9rem}
.explain{margin-top:12px;background:var(--green-w);border:1.5px solid var(--green);border-radius:14px;padding:13px 15px;opacity:0;transform:translateY(8px);transition:opacity .35s ease,transform .35s ease}
.explain.in{opacity:1;transform:none}
.ex-h{font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;font-weight:800;color:var(--green);margin-bottom:9px}
.ex-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ex-badge{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--green);color:#fff;font-weight:800;flex:none}
.ex-ans{display:flex;align-items:center;gap:6px;font-size:1.25rem;font-weight:800}
.ex-lead{flex:1;min-width:150px;font-size:.92rem;color:var(--ink);line-height:1.42}
.ex-work{margin-top:10px;padding:9px 12px;background:var(--card);border-radius:10px;font-size:1rem;display:flex;align-items:center;gap:8px;flex-wrap:wrap;border:1px dashed color-mix(in srgb,var(--green) 45%,var(--card))}
.ex-work .shape{vertical-align:middle}
@media(prefers-reduced-motion:reduce){.explain{transition:none}}
/* real-life relevance tidbit — shown after every answer (see docs/CHILD-SAFETY-CHARTER.md) */
.relev{margin-top:12px;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;background:color-mix(in srgb,var(--violet) 9%,var(--card));border:1.5px solid color-mix(in srgb,var(--violet) 34%,var(--card-brd,var(--line)));border-radius:14px;padding:12px 15px;opacity:0;transform:translateY(8px);transition:opacity .35s ease,transform .35s ease}
.relev.in{opacity:1;transform:none}
.relev-k{font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.07em;font-weight:800;color:var(--violet);white-space:nowrap}
.relev-t{flex:1;min-width:180px;font-size:.95rem;line-height:1.45;color:var(--ink)}
@media(prefers-reduced-motion:reduce){.relev{transition:none}}
/* parent dashboard: "what they practised & why it matters" recap */
.wimsec{margin-top:16px;border-top:1.5px solid var(--line);padding-top:14px}
.wimsec>b{display:block;font-family:var(--disp);font-size:1rem;margin-bottom:10px}
.wim-item{background:color-mix(in srgb,var(--blue) 5%,var(--card));border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:9px}
.wim-h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:5px}
.wim-t{font-family:var(--disp);font-weight:800;font-size:.98rem;color:var(--ink)}
.wim-n{font-family:var(--mono);font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--soft);white-space:nowrap}
.wim-item p{margin:0 0 6px;font-size:.9rem;line-height:1.5;color:var(--ink)}
.wim-item small{display:block;font-size:.76rem;color:var(--soft);font-style:italic}
/* Forge build note — one-line "why building this sharpens you" */
.forge-note{max-width:760px;margin:0 auto 16px;background:color-mix(in srgb,var(--violet) 9%,var(--card));border:1.5px solid color-mix(in srgb,var(--violet) 32%,var(--line));border-radius:14px;padding:12px 16px;font-size:.95rem;line-height:1.45;color:var(--ink)}
.forge-note-k{font-family:var(--mono);font-size:.64rem;text-transform:uppercase;letter-spacing:.06em;font-weight:800;color:var(--violet)}
.done{text-align:center;background:var(--card);border:2px solid var(--ink);border-radius:24px;padding:34px;box-shadow:6px 6px 0 rgb(var(--sh)/var(--sa))}.done .m{font-size:3rem}.done h2{font-family:var(--disp);font-weight:800;font-size:1.8rem;margin:6px 0}

/* ===================== CINEMATIC LAYER ===================== */
/* Kataware-doki arc gradient (dawn coral -> night indigo) — the ONE brand gradient,
   used for the hero mark, headline underline-fill, stat numbers, and CTA band. */
:root,:root[data-theme=light]{--grad-hero:linear-gradient(120deg,var(--pink-solid) 0%,var(--violet-solid) 55%,var(--blue-solid) 100%);--grad-btn:linear-gradient(135deg,var(--pink-solid),var(--blue-solid));--glow-blue:0 14px 44px -10px color-mix(in srgb,var(--blue) 45%,transparent);--glow-pink:0 14px 44px -10px color-mix(in srgb,var(--pink) 45%,transparent);--glass:rgba(255,253,249,.72);--glass-brd:rgba(34,26,46,.08);--soft-sh:0 1px 2px rgba(34,26,46,.05),0 10px 26px -10px rgba(34,26,46,.14),0 30px 60px -24px rgba(34,26,46,.14);--ring:0 0 0 1px rgba(34,26,46,.05)}
:root[data-theme=dark]{--grad-hero:linear-gradient(120deg,var(--pink-solid) 0%,var(--violet-solid) 55%,var(--blue-solid) 100%);--grad-btn:linear-gradient(135deg,var(--pink-solid),var(--blue-solid));--glow-blue:0 14px 44px -10px color-mix(in srgb,var(--blue) 45%,transparent);--glow-pink:0 14px 44px -10px color-mix(in srgb,var(--pink) 45%,transparent);--glass:rgba(23,19,49,.58);--glass-brd:rgba(244,238,230,.09);--soft-sh:0 1px 2px rgba(0,0,0,.4),0 12px 30px -10px rgba(0,0,0,.55),0 34px 70px -26px rgba(0,0,0,.6);--ring:0 0 0 1px rgba(244,238,230,.07)}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--grad-hero:linear-gradient(120deg,var(--pink-solid) 0%,var(--violet-solid) 55%,var(--blue-solid) 100%);--grad-btn:linear-gradient(135deg,var(--pink-solid),var(--blue-solid));--glow-blue:0 14px 44px -10px color-mix(in srgb,var(--blue) 45%,transparent);--glow-pink:0 14px 44px -10px color-mix(in srgb,var(--pink) 45%,transparent);--glass:rgba(23,19,49,.58);--glass-brd:rgba(244,238,230,.09);--soft-sh:0 1px 2px rgba(0,0,0,.4),0 12px 30px -10px rgba(0,0,0,.55),0 34px 70px -26px rgba(0,0,0,.6);--ring:0 0 0 1px rgba(244,238,230,.07)}}
body{background:radial-gradient(1200px 760px at 12% -8%,color-mix(in srgb,var(--blue) 12%,transparent),transparent 58%),radial-gradient(1000px 680px at 104% -2%,color-mix(in srgb,var(--pink) 10%,transparent),transparent 54%),var(--paper)}
.main,footer{position:relative;z-index:1}
.aurora{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;filter:blur(64px);opacity:.5}
:root[data-theme=dark] .aurora{opacity:.5}
.aurora span{position:absolute;display:block;border-radius:50%;animation:drift 24s ease-in-out infinite}
.aurora span:nth-child(1){width:46vw;height:46vw;left:-9vw;top:-12vw;background:radial-gradient(circle,var(--violet),transparent 66%)}
.aurora span:nth-child(2){width:42vw;height:42vw;right:-7vw;top:4vw;background:radial-gradient(circle,var(--pink),transparent 66%);animation-delay:-8s}
.aurora span:nth-child(3){width:40vw;height:40vw;left:26vw;bottom:-16vw;background:radial-gradient(circle,var(--teal),transparent 66%);animation-delay:-15s}
.grain{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.3;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes drift{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(4vw,3vw) scale(1.12)}66%{transform:translate(-3vw,2vw) scale(.94)}}
.card,.kid,.fc,.how,.puzzle,.done,.intro,.profile,.auth,.empty{box-shadow:var(--soft-sh),var(--ring)!important;border-color:var(--glass-brd)}
.card,.kid,.fc,.how,.auth,.puzzle,.intro,.profile{background:var(--glass);-webkit-backdrop-filter:blur(16px) saturate(1.25);backdrop-filter:blur(16px) saturate(1.25)}
.fc,.kid,.card{transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s}
.fc:hover,.kid:hover{transform:translateY(-5px)}
.bar{background:color-mix(in srgb,var(--paper) 68%,transparent);-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3)}
.btn{background:var(--grad-btn);box-shadow:var(--glow-blue);border-radius:14px;transition:transform .18s cubic-bezier(.16,1,.3,1),box-shadow .25s,filter .2s}
.btn:hover{transform:translateY(-2px);filter:brightness(1.07);box-shadow:0 18px 50px -10px rgba(59,91,255,.6)}
.btn:active{transform:translateY(0)}
.btn.ghost{background:var(--glass);color:var(--ink);box-shadow:var(--ring);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.btn.play{background:linear-gradient(135deg,var(--marigold),var(--pink));box-shadow:var(--glow-pink);color:#fff}
.hero{padding:58px 0 32px}
.hero .eyebrow{display:inline-flex;align-items:center;gap:8px;padding:7px 15px;border-radius:999px;background:var(--glass);box-shadow:var(--ring);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.h1.big{letter-spacing:-.03em}
.h1.big .u{color:transparent;background:var(--grad-hero);-webkit-background-clip:text;background-clip:text}
.h1.big .u::after{display:none}
.hero>*{animation:up .8s cubic-bezier(.16,1,.3,1) both}
.hero>*:nth-child(2){animation-delay:.07s}.hero>*:nth-child(3){animation-delay:.14s}.hero>*:nth-child(4){animation-delay:.21s}
@keyframes up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.fc .fi{box-shadow:0 10px 26px -8px rgba(59,91,255,.45)}
.fc .fi.b{background:var(--grad-btn)}.fc .fi.p{background:linear-gradient(135deg,var(--pink),var(--marigold))}.fc .fi.t{background:linear-gradient(135deg,var(--teal),var(--blue))}
.skb{background:color-mix(in srgb,var(--ink) 8%,transparent)}
.skb i{position:relative;overflow:hidden;background:linear-gradient(90deg,var(--blue),var(--teal))}
.skb .p{background:linear-gradient(90deg,var(--pink),var(--marigold))}.skb .t{background:linear-gradient(90deg,var(--teal),var(--blue))}.skb .m{background:linear-gradient(90deg,var(--marigold),var(--pink))}
.skb i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transform:translateX(-100%);animation:shine 2.6s ease-in-out infinite}
@keyframes shine{0%{transform:translateX(-100%)}60%,100%{transform:translateX(220%)}}
.av{box-shadow:0 8px 22px -6px rgba(59,91,255,.5)}
.choice{transition:transform .16s cubic-bezier(.16,1,.3,1),box-shadow .2s,border-color .2s;background:var(--card)}
.choice:hover:not(:disabled){transform:translateY(-4px) scale(1.02);box-shadow:var(--glow-blue);border-color:transparent}
.choice.right{animation:pop .5s cubic-bezier(.16,1,.3,1);box-shadow:0 0 0 3px var(--green),0 14px 32px -6px rgba(18,146,90,.5)}
@keyframes pop{0%{transform:scale(1)}42%{transform:scale(1.13)}100%{transform:scale(1)}}
.meter i{background:linear-gradient(90deg,var(--marigold),var(--pink),var(--violet));background-size:220% 100%;animation:flow 3s linear infinite}
@keyframes flow{to{background-position:220% 0}}
.cue{box-shadow:0 12px 32px -8px rgba(59,91,255,.55)}
.done .m{display:inline-block;animation:pop .6s cubic-bezier(.16,1,.3,1)}
.form input,.pin{transition:border-color .2s,box-shadow .2s}
.form input:focus,.pin:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 26%,transparent)}
@media(prefers-reduced-motion:reduce){.aurora span,.skb i::after,.meter i{animation:none!important}.hero>*{animation:none!important;opacity:1!important;transform:none!important}}
/* ---- marketing sections ---- */
.secnav{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:10px 0 2px}
.secnav a{font-size:.82rem;font-weight:600;color:var(--soft);text-decoration:none;padding:8px 14px;border-radius:999px}
.secnav a:hover{color:var(--ink);background:var(--glass);box-shadow:var(--ring)}
.herostats{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.hs{background:var(--glass);box-shadow:var(--soft-sh),var(--ring);border-radius:16px;padding:14px 20px;min-width:108px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.hs b{display:block;font-family:var(--disp);font-weight:800;font-size:1.9rem;background:var(--grad-hero);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}
.hs span{font-size:.7rem;color:var(--soft);text-transform:uppercase;letter-spacing:.06em;font-family:var(--mono)}
.mk{padding:64px 0 8px}
.mkhead{max-width:66ch;margin-bottom:28px}
.tagline{font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--blue);font-weight:700}
.mklede{color:var(--soft);font-size:1.06rem}
.bento{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.bento .big{grid-row:span 2;grid-column:1}
@media(max-width:760px){.bento{grid-template-columns:1fr}.bento .big{grid-row:auto}}
.bcard{background:var(--glass);box-shadow:var(--soft-sh),var(--ring);border-radius:20px;padding:26px;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.bcard .fi{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:13px;color:#fff;font-size:1.2rem;margin-bottom:12px;box-shadow:0 10px 26px -8px color-mix(in srgb,var(--blue) 45%,transparent)}
.bcard .fi.b{background:var(--grad-btn)}.bcard .fi.p{background:linear-gradient(135deg,var(--pink),var(--marigold))}.bcard .fi.t{background:linear-gradient(135deg,var(--teal),var(--blue))}
.bcard h3{font-family:var(--disp);font-weight:800;font-size:1.2rem;margin:0 0 6px}.bcard.big h3{font-size:1.5rem}.bcard p{margin:0;color:var(--soft)}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:900px){.grid4{grid-template-columns:repeat(2,1fr)}}@media(max-width:520px){.grid4{grid-template-columns:1fr}}
.feature{position:relative;background:var(--glass);box-shadow:var(--soft-sh),var(--ring);border-radius:20px;padding:26px 24px;overflow:hidden;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.feature:hover{transform:translateY(-5px)}
.feature::before{content:"";position:absolute;left:0;top:0;height:4px;width:100%}
.feature.s1::before{background:var(--grad-btn)}.feature.s2::before{background:linear-gradient(90deg,var(--pink),var(--marigold))}.feature.s3::before{background:linear-gradient(90deg,var(--teal),var(--blue))}.feature.s4::before{background:linear-gradient(90deg,var(--violet),var(--pink))}
.fnum{font-family:var(--mono);font-size:.8rem;font-weight:700;color:var(--soft)}
.feature h3{font-family:var(--disp);font-weight:800;font-size:1.2rem;margin:8px 0 6px}.feature p{margin:0;color:var(--soft);font-size:.92rem}
.ages{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
@media(max-width:960px){.ages{grid-template-columns:repeat(2,1fr)}}@media(max-width:520px){.ages{grid-template-columns:1fr}}
.ageband{background:var(--glass);box-shadow:var(--soft-sh),var(--ring);border-radius:18px;padding:20px 20px 20px 24px;position:relative;overflow:hidden}
.ageband::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px}
.ageband.a1::before{background:var(--marigold)}.ageband.a2::before{background:var(--pink)}.ageband.a3::before{background:var(--violet)}.ageband.a4::before{background:var(--blue)}.ageband.a5::before{background:var(--teal)}
.ah{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:6px}
.ah b{font-family:var(--disp);font-weight:800;font-size:1.15rem}.ah span{font-family:var(--mono);font-size:.66rem;color:var(--soft);white-space:nowrap}
.ageband em{font-style:normal;font-weight:700;font-size:.82rem;color:var(--blue)}.ageband p{margin:6px 0 0;color:var(--soft);font-size:.85rem}
.note{margin-top:18px;background:var(--glass);box-shadow:var(--ring);border-radius:14px;padding:14px 18px;font-size:.92rem;color:var(--soft)}.note b{color:var(--ink)}
.steps4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:820px){.steps4{grid-template-columns:repeat(2,1fr)}}@media(max-width:460px){.steps4{grid-template-columns:1fr}}
.stp{background:var(--glass);box-shadow:var(--soft-sh),var(--ring);border-radius:18px;padding:22px}
.sn{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--grad-btn);color:#fff;font-family:var(--disp);font-weight:800;box-shadow:0 10px 24px -8px color-mix(in srgb,var(--blue) 50%,transparent);margin-bottom:12px}
.stp h3{font-family:var(--disp);font-weight:800;font-size:1.06rem;margin:0 0 4px}.stp p{margin:0;color:var(--soft);font-size:.9rem}
.videoframe{margin-top:24px;aspect-ratio:16/9;border-radius:22px;background:linear-gradient(135deg,color-mix(in srgb,var(--blue) 22%,var(--card)),color-mix(in srgb,var(--pink) 18%,var(--card)));box-shadow:var(--soft-sh),var(--ring);display:flex;flex-direction:column;gap:14px;align-items:center;justify-content:center;color:var(--soft);border:1px dashed var(--glass-brd);text-align:center;padding:20px}
.vplay{width:74px;height:74px;border-radius:50%;background:var(--glass);box-shadow:var(--soft-sh);display:grid;place-items:center;font-size:1.5rem;color:var(--blue);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.exgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:820px){.exgrid{grid-template-columns:1fr}}
.excard{background:var(--glass);box-shadow:var(--soft-sh),var(--ring);border-radius:20px;padding:22px}
.extag{font-family:var(--mono);font-size:.64rem;text-transform:uppercase;letter-spacing:.1em;color:var(--blue);font-weight:700}
.exq{font-family:var(--disp);font-weight:800;font-size:1.15rem;margin:8px 0 14px}
.exrow{display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:color-mix(in srgb,var(--ink) 5%,transparent);border-radius:14px;padding:18px;justify-content:center}
.exnum{font-family:var(--disp);font-weight:800;font-size:1.6rem;text-align:center;background:color-mix(in srgb,var(--ink) 5%,transparent);border-radius:14px;padding:22px}.exnum b{color:var(--pink)}
.exqm{width:38px;height:38px;border-radius:11px;border:3px dashed var(--soft);display:inline-grid;place-items:center;color:var(--soft);font-family:var(--disp);font-weight:800}
.faq{display:grid;gap:10px}
.faq details{background:var(--glass);box-shadow:var(--ring);border-radius:14px;padding:2px 18px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.faq summary{cursor:pointer;font-family:var(--disp);font-weight:700;padding:15px 0;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--blue);font-weight:800}
.faq details[open] summary::after{content:"–"}
.faq p{margin:0 0 16px;color:var(--soft);font-size:.92rem}
.ctaband{margin-top:60px;text-align:center;background:var(--grad-hero);border-radius:28px;padding:54px 26px;color:#fff;box-shadow:0 30px 70px -24px color-mix(in srgb,var(--violet) 50%,transparent)}
.ctaband h2{font-family:var(--disp);font-weight:800;font-size:clamp(1.6rem,3.4vw,2.4rem);margin:0 0 8px;color:#fff}
.ctaband p{margin:0 0 22px;opacity:.92}
.btn.big-cta{background:#fff;color:#241D45;box-shadow:0 14px 40px -8px rgba(0,0,0,.3);font-size:1.05rem;padding:15px 30px}

/* ================= THINKING UNIVERSE — v2 theme layer ================= */
/* Surfaces become light-bearing glass — no flat colour-filled boxes. Colour appears as light: gradient text, luminous hairlines, soft halos, small badges. */
:root,:root[data-theme=light]{--surface:linear-gradient(180deg,rgba(255,253,249,.97),rgba(255,253,249,.82));--card-brd:1px solid rgba(34,26,46,.07);--card-sh:0 1px 0 rgba(255,255,255,.9) inset,0 2px 5px rgba(34,26,46,.05),0 22px 46px -24px rgba(34,26,46,.18),0 54px 96px -60px color-mix(in srgb,var(--blue) 22%,transparent);--halo:color-mix(in srgb,var(--pink) 16%,transparent);--aurora-o:.34;--grain-o:.05;--grad-aurora:linear-gradient(120deg,var(--pink),var(--violet) 45%,var(--blue) 80%,var(--teal))}
:root[data-theme=dark]{--surface:linear-gradient(180deg,rgba(27,23,55,.62),rgba(14,12,30,.5));--card-brd:1px solid rgba(244,238,230,.09);--card-sh:0 1px 0 rgba(255,255,255,.06) inset,0 2px 10px rgba(0,0,0,.5),0 28px 64px -28px rgba(0,0,0,.7),0 0 70px -34px color-mix(in srgb,var(--blue) 40%,transparent);--halo:color-mix(in srgb,var(--pink) 24%,transparent);--aurora-o:.46;--grain-o:.09;--grad-aurora:linear-gradient(120deg,var(--pink),var(--violet) 45%,var(--blue) 80%,var(--teal))}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--surface:linear-gradient(180deg,rgba(27,23,55,.62),rgba(14,12,30,.5));--card-brd:1px solid rgba(244,238,230,.09);--card-sh:0 1px 0 rgba(255,255,255,.06) inset,0 2px 10px rgba(0,0,0,.5),0 28px 64px -28px rgba(0,0,0,.7),0 0 70px -34px color-mix(in srgb,var(--blue) 40%,transparent);--halo:color-mix(in srgb,var(--pink) 24%,transparent);--aurora-o:.46;--grain-o:.09;--grad-aurora:linear-gradient(120deg,var(--pink),var(--violet) 45%,var(--blue) 80%,var(--teal))}}

/* atmosphere: dawn glow (light) / nebula (dark) */
body{background:
  radial-gradient(1200px 820px at 6% -12%,color-mix(in srgb,var(--blue) 15%,transparent),transparent 55%),
  radial-gradient(1080px 760px at 102% -2%,color-mix(in srgb,var(--pink) 11%,transparent),transparent 52%),
  radial-gradient(1000px 1000px at 50% 118%,color-mix(in srgb,var(--violet) 12%,transparent),transparent 60%),
  var(--paper)}
.aurora{opacity:var(--aurora-o);filter:blur(74px)}
.aurora span:nth-child(1){background:radial-gradient(circle,var(--blue),transparent 66%)}
.aurora span:nth-child(2){background:radial-gradient(circle,var(--pink),transparent 66%)}
.aurora span:nth-child(3){background:radial-gradient(circle,var(--teal),transparent 66%)}
.grain{opacity:var(--grain-o)}

/* SURFACES */
.card,.kid,.fc,.how,.puzzle,.done,.intro,.profile,.auth,.bcard,.feature,.stp,.hs,.excard,.ageband{
  background:var(--surface)!important;border:var(--card-brd)!important;box-shadow:var(--card-sh)!important;
  -webkit-backdrop-filter:blur(18px) saturate(1.35);backdrop-filter:blur(18px) saturate(1.35);position:relative;isolation:isolate}
.empty{background:var(--surface)!important;border:1px dashed var(--card-brd)!important;box-shadow:var(--card-sh)!important}
/* soft top halo on the big story cards */
.bcard::after,.feature::after,.excard::after{content:"";position:absolute;left:0;right:0;top:0;height:130px;border-radius:inherit;background:radial-gradient(120% 100% at 22% 0%,var(--halo),transparent 72%);pointer-events:none;z-index:-1}
/* accent bars -> luminous hairlines */
.feature::before{height:2px}
.ageband::before{width:3px;filter:saturate(1.15)}
.skb{background:color-mix(in srgb,var(--ink) 7%,transparent);border-color:var(--card-brd)}
/* buttons */
.btn{background:var(--grad-btn);border-radius:14px;color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 10px 30px -8px color-mix(in srgb,var(--blue) 55%,transparent)}
.btn:hover{transform:translateY(-2px);filter:brightness(1.06);box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 18px 46px -10px color-mix(in srgb,var(--blue) 62%,transparent)}
.btn.ghost{background:var(--surface);color:var(--ink);border:var(--card-brd);box-shadow:var(--card-sh)}
.btn.play{background:linear-gradient(135deg,var(--marigold),var(--pink));box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 12px 32px -8px color-mix(in srgb,var(--pink) 55%,transparent)}
/* Header background must be OPAQUE. It previously sat at 72% alpha and relied on
   backdrop-filter for legibility — but iOS Safari drops backdrop-filter in Low Power Mode
   (and has long-standing bugs with it on sticky elements), so page text showed straight
   through the header and collided with the nav on both iPhone and Android. Blur is now
   decoration only, never the thing that makes the header readable. */
.bar{background:var(--paper);border-bottom:1px solid var(--card-brd)}
/* Was a gradient fill and drop shadow for the old square tile. The mark is a
   stroked spiral now, so a background would paint a box behind it. */
.brand .brandmark{background:none;box-shadow:none;filter:drop-shadow(0 4px 10px color-mix(in srgb,var(--blue) 35%,transparent))}

/* ---- narrative sections ---- */
.h1.big{font-size:clamp(2.5rem,6.4vw,5.4rem);line-height:.98;letter-spacing:-.035em}
.hero .lede em{font-style:normal;color:var(--ink);font-weight:700}
/* STAKES */
.stakes{display:grid;grid-template-columns:1.05fr .95fr;gap:26px;align-items:center}
@media(max-width:820px){.stakes{grid-template-columns:1fr}}
.big-claim{font-family:var(--disp);font-weight:800;font-size:clamp(1.3rem,2.4vw,1.85rem);letter-spacing:-.02em;line-height:1.15;background:var(--grad-hero);-webkit-background-clip:text;background-clip:text;color:transparent;margin:0 0 12px}
.stakes-copy p{color:var(--soft);font-size:1.04rem;max-width:48ch}
.stakes-panel h3{font-family:var(--disp);font-weight:800;margin:0 0 16px;font-size:1.06rem}
.src{font-family:var(--serif);font-style:italic;font-size:.84rem;color:var(--soft);margin:16px 0 0;line-height:1.5;border-top:1px solid var(--card-brd);padding-top:12px}
/* FORCES */
.forces .force{display:flex;flex-direction:column}
.force .fnum{font-family:var(--mono);font-size:.7rem;letter-spacing:.03em;color:var(--soft)}
.force h3{font-size:1.14rem;margin:9px 0 9px;letter-spacing:-.01em}
.force-what{color:var(--ink);font-weight:600;font-size:.93rem;margin:0 0 8px}
.force-why{color:var(--soft);font-size:.89rem;margin:0 0 14px}
.becomes{margin-top:auto;border-top:1px dashed var(--card-brd);padding-top:12px}
.becomes span{display:block;font-family:var(--mono);font-size:.6rem;text-transform:uppercase;letter-spacing:.16em;color:var(--blue);margin-bottom:4px}
.becomes b{font-family:var(--disp);font-weight:800;font-size:.98rem;line-height:1.28}
@media(max-width:900px){.grid4.forces{grid-template-columns:1fr}}
/* JOURNEY timeline */
.journey{position:relative;display:grid;gap:16px;margin-top:6px}
.journey::before{content:"";position:absolute;left:7px;top:16px;bottom:16px;width:2px;background:linear-gradient(180deg,var(--marigold),var(--pink) 28%,var(--violet) 54%,var(--blue) 78%,var(--teal));border-radius:2px;opacity:.6}
.epoch{position:relative;padding-left:30px}
.epoch-dot{position:absolute;left:0;top:22px;width:16px;height:16px;border-radius:50%;background:var(--card);border:3px solid var(--blue);box-shadow:0 0 0 5px color-mix(in srgb,var(--blue) 15%,transparent)}
.epoch.e1 .epoch-dot{border-color:var(--marigold);box-shadow:0 0 0 5px color-mix(in srgb,var(--marigold) 16%,transparent)}
.epoch.e2 .epoch-dot{border-color:var(--pink);box-shadow:0 0 0 5px color-mix(in srgb,var(--pink) 16%,transparent)}
.epoch.e3 .epoch-dot{border-color:var(--violet);box-shadow:0 0 0 5px color-mix(in srgb,var(--violet) 16%,transparent)}
.epoch.e5 .epoch-dot{border-color:var(--teal);box-shadow:0 0 0 5px color-mix(in srgb,var(--teal) 16%,transparent)}
.epoch-body{background:var(--surface);border:var(--card-brd);box-shadow:var(--card-sh);border-radius:18px;padding:18px 20px;-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3)}
.epoch-h{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.epoch-h b{font-family:var(--disp);font-weight:800;font-size:1.18rem}
.epoch-h span{font-family:var(--mono);font-size:.68rem;color:var(--soft);letter-spacing:.02em}
.epoch-body p{margin:0 0 12px;color:var(--soft)}
.epoch-forces{display:flex;flex-wrap:wrap;gap:8px}
.epoch-forces span{font-size:.72rem;font-weight:700;color:var(--ink);background:color-mix(in srgb,var(--blue) 8%,transparent);border:1px solid var(--card-brd);border-radius:999px;padding:4px 11px}
/* TRUST / the science */
.trust-h{font-family:var(--serif);font-weight:700;font-size:clamp(1.8rem,3.4vw,2.7rem);letter-spacing:-.01em;line-height:1.08;margin:.35em 0 .45em}
.trust-lede{font-family:var(--serif);font-size:1.12rem;line-height:1.72;color:var(--ink);max-width:72ch;margin:0 0 18px}
.frameworks{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 22px}
.fw{font-family:var(--disp);font-weight:700;font-size:.86rem;background:var(--surface);border:var(--card-brd);box-shadow:var(--card-sh);border-radius:999px;padding:9px 16px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.trust-note{font-size:.9rem;color:var(--soft);background:color-mix(in srgb,var(--marigold) 8%,transparent);border:1px solid color-mix(in srgb,var(--marigold) 32%,var(--card-brd));border-radius:14px;padding:14px 18px;max-width:74ch;line-height:1.62}
.trust-note b{color:var(--ink)}
/* scroll reveal */
.reveal{opacity:1;transform:none}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1!important;transform:none!important}}
/* peer context on the dashboard kid card */
.peer{margin-top:14px;padding-top:12px;border-top:1px dashed var(--card-brd);font-size:.8rem;color:var(--soft);display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;line-height:1.5}
.peer b{color:var(--ink);font-weight:700}
.peerdot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 20%,transparent);flex:0 0 auto;align-self:center}
.peern{opacity:.75}

/* ---- Hollywood layer: constellation hero, journey motion, credential cards ---- */
.hero{position:relative;overflow:hidden}
.hero-cx{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.hero-inner{position:relative;z-index:1}
.herostats .hs b{font-variant-numeric:tabular-nums}
/* force real-life examples */
.force-eg,.epoch-watch,.rc-use{font-size:.87rem;line-height:1.5;margin:0 0 12px;padding:11px 13px;border-radius:12px}
.force-eg{color:var(--ink);background:color-mix(in srgb,var(--blue) 6%,transparent);border:1px solid var(--card-brd)}
.eg-k{display:block;font-family:var(--mono);font-size:.58rem;text-transform:uppercase;letter-spacing:.16em;color:var(--blue);font-weight:700;margin-bottom:4px}
/* journey draw-on-scroll spine + growth bars */
.jspine{position:absolute;left:7px;top:16px;width:2px;height:0;background:linear-gradient(180deg,var(--marigold),var(--pink) 26%,var(--violet) 52%,var(--blue) 76%,var(--teal));border-radius:2px;box-shadow:0 0 16px color-mix(in srgb,var(--violet) 55%,transparent);z-index:0;transition:height .15s linear}
.epoch-watch{color:var(--ink);background:color-mix(in srgb,var(--marigold) 9%,transparent);border:1px solid color-mix(in srgb,var(--marigold) 26%,var(--card-brd))}
.epoch-watch .eg-k{color:var(--marigold)}
.fbars{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;margin-top:4px}
@media(max-width:560px){.fbars{grid-template-columns:1fr}}
.fbar{display:grid;gap:5px}
.fbar span{font-size:.68rem;font-weight:700;color:var(--soft)}
.fbar .skb{display:block;height:8px;width:100%}
/* science: credentialed research cards */
.rgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:24px 0 8px}
@media(max-width:900px){.rgrid{grid-template-columns:1fr 1fr}}@media(max-width:600px){.rgrid{grid-template-columns:1fr}}
.rc{background:var(--surface);border:var(--card-brd);box-shadow:var(--card-sh);border-radius:18px;padding:22px;-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);position:relative;isolation:isolate}
.rc::after{content:"";position:absolute;left:0;right:0;top:0;height:110px;border-radius:inherit;background:radial-gradient(120% 100% at 22% 0%,var(--halo),transparent 72%);pointer-events:none;z-index:-1}
.rc-src{font-family:var(--mono);font-size:.64rem;letter-spacing:.03em;color:var(--blue);font-weight:700;text-transform:uppercase}
.rc-find{font-family:var(--serif);font-weight:700;font-size:1.22rem;margin:9px 0 9px;letter-spacing:-.01em;line-height:1.15}
.rc p{color:var(--soft);font-size:.9rem;margin:0 0 12px;font-family:var(--body)}
.rc-use{color:var(--ink);background:color-mix(in srgb,var(--blue) 6%,transparent);border:1px solid var(--card-brd);margin:0}
.rc-use .eg-k{color:var(--blue)}
/* interactive taste demo */
.demo{display:grid;grid-template-columns:1.6fr 1fr;gap:20px;align-items:start}
@media(max-width:820px){.demo{grid-template-columns:1fr}}
.demo-side{display:grid;gap:16px}
.dial{background:var(--surface);border:var(--card-brd);box-shadow:var(--card-sh);border-radius:20px;padding:22px;text-align:center;-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3)}
.dial-num{font-family:var(--disp);font-weight:800;font-size:3.4rem;line-height:1;background:var(--grad-hero);-webkit-background-clip:text;background-clip:text;color:transparent}
.dial-num.bump{animation:pop .5s cubic-bezier(.16,1,.3,1)}
.dial-lab{font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--soft);margin-top:3px}
.dialbar{height:10px;background:color-mix(in srgb,var(--ink) 8%,transparent);border:1px solid var(--card-brd);border-radius:99px;overflow:hidden;margin:15px 0 11px}
.dialbar i{display:block;height:100%;width:30%;background:linear-gradient(90deg,var(--marigold),var(--pink),var(--violet));border-radius:99px;transition:width .55s cubic-bezier(.16,1,.3,1)}
.dial-sub{font-size:.82rem;font-weight:700;color:var(--ink)}
.demo-cta{background:var(--surface);border:var(--card-brd);box-shadow:var(--card-sh);border-radius:20px;padding:20px;text-align:center}
.demo-cta p{margin:0 0 12px;color:var(--soft);font-size:.9rem}
/* sweet-spot chart */
.sweetspot{margin-top:20px;padding:24px}
.ss-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:8px}
.ss-tag{font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);font-weight:700}
.ss-head h3{font-family:var(--disp);font-weight:800;font-size:1.12rem;margin:6px 0 0}
.ss-head h3 b{color:var(--green)}
.ss-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:.75rem;font-weight:700;color:var(--soft);align-items:center}
.ss-legend .lg{display:flex;align-items:center;gap:6px}
.ss-legend .lg::before{content:"";width:15px;height:3px;border-radius:2px}
.ss-legend .a::before{background:linear-gradient(90deg,var(--blue),var(--teal))}
.ss-legend .d::before{background:linear-gradient(90deg,var(--pink),var(--marigold))}
.ss-legend .b::before{background:color-mix(in srgb,var(--green) 40%,transparent);height:11px}
.ss-svg{width:100%;height:auto;display:block;margin:8px 0 4px}
.ss-line{fill:none;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.ss-band{fill:color-mix(in srgb,var(--green) 20%,transparent);stroke:none}
.ss-dot{fill:#fff;stroke:var(--pink);stroke-width:3;filter:drop-shadow(0 0 7px var(--pink))}
.ss-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-top:2px;font-size:.72rem;color:var(--soft)}
.ss-zone{font-family:var(--mono);letter-spacing:.03em;text-transform:uppercase;font-size:.64rem}
.ss-live{font-family:var(--body);font-weight:700;font-size:1rem;color:var(--green);background:color-mix(in srgb,var(--green) 12%,transparent);border:1px solid color-mix(in srgb,var(--green) 30%,var(--card-brd));border-radius:999px;padding:5px 15px}

/* ================= TYPE SYSTEM (Fraunces display serif + Instrument Sans) + de-slop reset ================= */
body{font-family:var(--body);letter-spacing:-.003em;text-rendering:optimizeLegibility}
.h1,.h2,.h1.big,.trust-h,.rc-find,.mkhead h2{font-optical-sizing:auto;text-wrap:balance}
.h1{font-weight:600;letter-spacing:-.02em}
.h1.big{font-weight:600;letter-spacing:-.021em;line-height:1.0}
.h2{font-weight:600;letter-spacing:-.015em}
.lede,.mklede,.rc p,.epoch-body p,.stakes-copy p,.force-what,.force-why{text-wrap:pretty}
.bcard h3,.feature h3,.rc-find,.epoch-h b,.stp h3,.kh b,.ss-head h3,.trust-h,.force h3,.done h2,.intro h1,.dial-sub{font-weight:600}
.bcard h3,.feature h3,.force h3,.ss-head h3,.stp h3{letter-spacing:-.01em}
/* keep UI chrome in the sans, not the display serif */
.btn,.btn.sm,.btn.big-cta,.btn.play,.brand,.link,.nav a,.fb,.hintbtn,.stagepill,.fw,.dial-sub,.dial-lab,.peer,.ss-live{font-family:var(--body)}
.btn,.btn.sm,.btn.big-cta,.btn.play,.brand{font-weight:700;letter-spacing:.004em}
/* remove gradient text — solid emphasis instead (ban: background-clip:text) */
.h1.big .u{color:var(--blue);-webkit-text-fill-color:var(--blue);background:none}
.h1.big .u::after{display:block;background:var(--marigold);opacity:.92;height:.12em;bottom:.08em}
.big-claim{color:var(--ink);-webkit-text-fill-color:var(--ink);background:none;font-family:var(--disp);font-weight:600}
.dial-num{color:var(--blue);-webkit-text-fill-color:var(--blue);background:none}
.hs b{color:var(--blue)!important;-webkit-text-fill-color:var(--blue)!important;background:none!important}
.ss-head h3 b{color:var(--green)}
/* Surfaces and backdrop-filter are now owned by the Sky Arc material system at the
   end of this file. A flat --surface and a global backdrop-filter:none used to be
   redefined here, silently overriding the light-bearing glass defined ~170 lines
   above; over a live atmosphere that flattening is exactly wrong. Removed rather
   than re-overridden, so there is one definition of a surface, not three. */

/* ================= TAP TARGETS (WCAG 2.2 SC 2.5.8) =================
   Measured at 375px before this block: consent checkbox 13px, footer links 16px,
   header "Log in" 24px. The 24x24 CSS-px floor is the WCAG minimum; touch targets get
   padding to reach it without changing the visual type size. */
.consentrow{display:flex;gap:11px;align-items:flex-start;font-size:.86rem;line-height:1.4;font-weight:500}
.bigcheck{width:24px;height:24px;min-width:24px;min-height:24px;margin:0;flex:0 0 auto;accent-color:var(--blue);cursor:pointer}
/* Footer and other inline links: keep the text size, grow the hit area. */
footer a{display:inline-block;padding:12px 2px;line-height:1.2}
.bar .nav a{display:inline-flex;align-items:center;min-height:44px}
@media(pointer:coarse){a,button,summary,[role=button]{touch-action:manipulation}}

/* ================= JOURNEY — scrollytelling (the growing mind) ================= */
.journey-scrolly{padding:70px 0 12px;position:relative}
.js-intro{max-width:64ch;margin-bottom:6px}
.js-stage{display:grid;grid-template-columns:0.92fr 1.08fr;gap:52px}
@media(max-width:860px){.js-stage{grid-template-columns:1fr;gap:0}}
.js-visual{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px}
/* On mobile the grid collapses to one column, so the sticky visual and the scrolling
   panels share it. Two bugs lived here:
   (1) the visual had NO background, so panel text scrolled straight THROUGH it — this was
       the "text over text" (measured up to 134x47px of collision at 375px);
   (2) it pinned at a hardcoded top:60px while the header is actually ~94px tall, so it
       slid 34px up underneath the header.
   Fixed with an opaque background and a sticky offset driven by the real measured header
   height (--bar-h, set from JS on load/resize), so the two can no longer drift apart. */
@media(max-width:860px){.js-visual{height:auto;position:sticky;top:var(--bar-h,94px);padding:20px 0 14px;gap:16px;background:var(--paper);z-index:2;box-shadow:0 10px 18px -12px rgba(var(--sh),.28)}}
.js-orb{width:clamp(240px,30vw,430px);height:clamp(240px,30vw,430px);position:relative}
@media(max-width:860px){.js-orb{width:min(58vw,300px);height:min(58vw,300px)}}
.js-orb::before{content:"";position:absolute;inset:-10%;border-radius:50%;background:radial-gradient(circle,var(--halo),transparent 66%);filter:blur(24px);z-index:0}
.js-orb canvas{position:relative;z-index:1;width:100%;height:100%;display:block}
.js-meta{width:clamp(240px,30vw,430px);max-width:100%}
@media(max-width:860px){.js-meta{width:min(90vw,430px)}}
.js-stagerow{display:flex;align-items:baseline;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.js-stagename{font-family:var(--disp);font-weight:600;font-size:1.85rem;color:var(--ink);letter-spacing:-.015em}
.js-stageage{font-family:var(--mono);font-size:.72rem;color:var(--soft);letter-spacing:.04em}
.js-forcebars{display:grid;gap:10px}
.jf{display:grid;grid-template-columns:118px 1fr;align-items:center;gap:12px}
.jf span{font-size:.72rem;font-weight:700;color:var(--soft)}
.jf .skb{display:block;height:8px}
.jf .skb i{width:0;transition:width .5s cubic-bezier(.16,1,.3,1)}
.js-panels{display:flex;flex-direction:column}
.js-panel{min-height:82vh;display:flex;flex-direction:column;justify-content:center;opacity:.42;transition:opacity .55s cubic-bezier(.16,1,.3,1)}
.js-panel.is-active{opacity:1}
@media(max-width:860px){.js-panel{min-height:auto;padding:30px 0;opacity:1}}
.js-idx{font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;color:var(--blue);font-weight:700}
.js-panel h3{font-family:var(--disp);font-weight:600;font-size:clamp(1.7rem,3.1vw,2.5rem);letter-spacing:-.018em;margin:10px 0 16px;line-height:1.02}
.js-panel h3 span{display:block;font-family:var(--mono);font-size:.68rem;font-weight:400;color:var(--soft);letter-spacing:.02em;margin-top:10px}
.js-lead{font-size:1.14rem;color:var(--ink);max-width:44ch;margin:0 0 18px;line-height:1.62}
.js-lead em{font-style:normal;font-weight:700}
.js-watch{font-size:.94rem;color:var(--soft);max-width:46ch;border-top:1px solid var(--line);padding-top:15px;line-height:1.55}
.js-watch b{color:var(--blue);font-weight:700}
.js-close{font-family:var(--serif);font-size:clamp(1.25rem,2.1vw,1.6rem);line-height:1.5;max-width:58ch;margin:24px auto 0;text-align:center;color:var(--ink);text-wrap:balance}
.js-close em{font-style:italic;color:var(--blue)}

/* ================= THE WORLD (market + development case) ================= */
.world-cols{display:grid;grid-template-columns:1fr 1fr;gap:44px;margin-bottom:34px}
@media(max-width:760px){.world-cols{grid-template-columns:1fr;gap:28px}}
.world-h{font-family:var(--disp);font-weight:600;font-size:1.5rem;letter-spacing:-.01em;margin:0 0 14px;color:var(--ink)}
.world-col p{color:var(--soft);font-size:1.05rem;line-height:1.68;margin:0 0 14px;max-width:54ch}
.world-col p b{color:var(--ink);font-weight:700}
.world-data{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;padding:30px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
@media(max-width:760px){.world-data{grid-template-columns:1fr;gap:20px}}
.wd{display:flex;flex-direction:column;gap:9px}
.wd b{font-family:var(--disp);font-weight:600;font-size:2.3rem;color:var(--ink);line-height:1;letter-spacing:-.02em}
.wd span{font-size:.92rem;color:var(--soft);line-height:1.5}
.wd span i{font-style:normal;font-family:var(--mono);font-size:.7rem;color:var(--blue);display:block;margin-top:6px;letter-spacing:.03em}
.world-note{font-family:var(--serif);font-size:clamp(1.25rem,2vw,1.6rem);line-height:1.5;text-align:center;max-width:60ch;margin:34px auto 0;color:var(--ink);text-wrap:balance}
.world-note em{font-style:italic;color:var(--blue)}
/* Lenis smooth-scroll (required stylesheet) */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:clip}
.lenis.lenis-smooth iframe{pointer-events:none}

/* ================= STORY FORGE (create studio) ================= */
.forge{max-width:1000px;margin:0 auto}
.fs-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.fs-back{color:var(--soft);text-decoration:none;font-weight:700;font-size:.9rem;white-space:nowrap}
.fs-back:hover{color:var(--ink)}
.fs-title{flex:1;min-width:180px;font-family:var(--disp);font-weight:600;font-size:1.3rem;color:var(--ink);background:var(--surface);border:var(--card-brd);box-shadow:var(--card-sh);border-radius:12px;padding:10px 14px}
.fs-title:focus{outline:none;border-color:var(--blue)}
.fs-actions{display:flex;gap:8px;flex-wrap:wrap}
.fs-btn{font-family:var(--body);font-weight:700;border:none;border-radius:12px;padding:10px 18px;cursor:pointer;background:var(--grad-btn);color:#fff;box-shadow:0 8px 22px -8px color-mix(in srgb,var(--blue) 55%,transparent)}
.fs-btn:hover{filter:brightness(1.06);transform:translateY(-1px)}
.fs-btn.ghost{background:var(--surface);color:var(--ink);border:var(--card-brd);box-shadow:var(--card-sh)}
.fs-btn.sm{padding:7px 12px;font-size:.85rem}
.fs-toast{background:color-mix(in srgb,var(--green) 12%,transparent);border:1px solid color-mix(in srgb,var(--green) 34%,var(--card-brd));color:var(--ink);border-radius:12px;padding:10px 15px;font-weight:700;margin-bottom:14px}
.fs-rail{display:flex;gap:10px;overflow-x:auto;padding:6px 2px 14px}
.fs-thumb{position:relative;flex:0 0 auto;width:70px;height:56px;border-radius:12px;border:2px solid transparent;cursor:pointer;overflow:hidden;box-shadow:var(--card-sh)}
.fs-thumb.on{border-color:var(--blue)}
.fs-tc{position:absolute;inset:0;display:grid;place-items:center;font-size:1.5rem}
.fs-tn{position:absolute;bottom:2px;right:5px;font-family:var(--mono);font-size:.62rem;font-weight:700;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.fs-add{flex:0 0 auto;width:56px;height:56px;border-radius:12px;border:2px dashed var(--card-brd);background:var(--surface);color:var(--soft);font-size:1.5rem;cursor:pointer}
.fs-add:hover{color:var(--blue);border-color:var(--blue)}
.fs-grid{display:grid;grid-template-columns:0.9fr 1.1fr;gap:20px;align-items:start}
@media(max-width:820px){.fs-grid{grid-template-columns:1fr}}
.fs-stagebox{position:sticky;top:16px;border-radius:20px;min-height:300px;padding:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;box-shadow:var(--card-sh);text-align:center;overflow:hidden}
@media(max-width:820px){.fs-stagebox{position:relative;min-height:200px}}
.fs-char{font-size:4.5rem;filter:drop-shadow(0 8px 16px rgba(0,0,0,.3))}
.fs-caption{background:var(--card);color:var(--ink);border-radius:14px;padding:12px 16px;font-weight:600;max-width:100%;line-height:1.5;box-shadow:var(--soft-sh)}
.fs-ph{color:var(--soft);font-weight:400;font-style:italic}
.fs-edit{display:grid;gap:16px}
.fs-block{background:var(--surface);border:var(--card-brd);box-shadow:var(--card-sh);border-radius:16px;padding:16px 18px}
.fs-block h4{font-family:var(--disp);font-weight:600;font-size:1.05rem;margin:0 0 12px;color:var(--ink)}
.fs-block h4 small{display:block;font-family:var(--body);font-weight:400;font-size:.78rem;color:var(--soft);margin-top:3px}
.fs-swrow,.fs-chrow{display:flex;flex-wrap:wrap;gap:8px}
.fs-sw{width:52px;height:44px;border-radius:11px;border:2px solid transparent;cursor:pointer;font-size:1.4rem;box-shadow:var(--card-sh)}
.fs-sw.on{border-color:var(--ink);box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 30%,transparent)}
.fs-ch{width:48px;height:48px;border-radius:12px;border:2px solid var(--card-brd);background:var(--paper2);cursor:pointer;font-size:1.5rem}
.fs-ch.on{border-color:var(--blue);background:color-mix(in srgb,var(--blue) 12%,transparent)}
.fs-text{width:100%;min-height:70px;font:inherit;font-size:1rem;color:var(--ink);background:var(--paper2);border:1.5px solid var(--card-brd);border-radius:12px;padding:12px 14px;resize:vertical;line-height:1.5}
.fs-textview{min-height:52px;white-space:pre-wrap}
.fs-text:focus{outline:none;border-color:var(--blue)}
.fs-wb{margin-top:12px;display:grid;gap:10px}
.fs-wbcat>span{font-family:var(--mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.14em;color:var(--soft);font-weight:700}
.fs-wbrow{display:flex;flex-wrap:wrap;gap:6px;margin-top:5px}
.fs-word{font:inherit;font-size:.86rem;font-weight:600;background:var(--paper2);border:1.5px solid var(--card-brd);border-radius:99px;padding:6px 12px;cursor:pointer;color:var(--ink)}
.fs-word:hover{border-color:var(--blue);color:var(--blue)}
.fs-clear{margin-top:10px;background:none;border:none;color:var(--soft);font:inherit;font-size:.82rem;cursor:pointer}
.fs-clear:hover{color:var(--pink)}
.fs-crow{display:flex;gap:8px;margin-bottom:8px;align-items:center;flex-wrap:wrap}
.fs-cl{flex:1;min-width:140px;font:inherit;padding:9px 12px;border:1.5px solid var(--card-brd);border-radius:10px;background:var(--paper2);color:var(--ink)}
.fs-cg{font:inherit;padding:9px 10px;border:1.5px solid var(--card-brd);border-radius:10px;background:var(--paper2);color:var(--ink)}
.fs-cl:focus,.fs-cg:focus{outline:none;border-color:var(--blue)}
.fs-crm{background:none;border:1.5px solid var(--card-brd);border-radius:10px;color:var(--soft);cursor:pointer;width:36px;height:36px}
.fs-crm:hover{color:var(--pink);border-color:var(--pink)}
.fs-cadd{background:color-mix(in srgb,var(--blue) 8%,transparent);border:1.5px dashed color-mix(in srgb,var(--blue) 40%,var(--card-brd));border-radius:10px;color:var(--blue);font:inherit;font-weight:700;padding:9px 14px;cursor:pointer;width:100%}
.fs-del{background:none;border:1.5px solid var(--card-brd);border-radius:10px;color:var(--soft);font:inherit;font-weight:600;padding:9px 14px;cursor:pointer;justify-self:start}
.fs-del:hover{color:var(--pink);border-color:var(--pink)}
.fs-overlay{position:fixed;inset:0;z-index:60;background:rgba(10,11,20,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:grid;place-items:center;padding:20px}
.fs-player{position:relative;width:min(560px,92vw);min-height:360px;border-radius:24px;padding:30px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;text-align:center;box-shadow:0 30px 80px -20px rgba(0,0,0,.6)}
.fs-pclose{position:absolute;top:14px;right:14px;background:var(--card);border:none;border-radius:50%;width:34px;height:34px;cursor:pointer;font-size:1rem;color:var(--ink);box-shadow:var(--soft-sh)}
.fs-pchar{font-size:5rem;filter:drop-shadow(0 10px 20px rgba(0,0,0,.35))}
.fs-ptext{background:var(--card);color:var(--ink);border-radius:16px;padding:16px 20px;font-size:1.1rem;font-weight:600;line-height:1.55;max-width:100%;margin:0;box-shadow:var(--soft-sh)}
.fs-pbtns{display:flex;flex-direction:column;gap:10px;width:100%;max-width:340px}
.fs-pchoice,.fs-pnext{font-family:var(--body);font-weight:700;border:none;border-radius:12px;padding:13px 18px;cursor:pointer;background:var(--card);color:var(--ink);box-shadow:var(--soft-sh);font-size:1rem}
.fs-pchoice:hover,.fs-pnext:hover{transform:translateY(-2px)}
.fs-pend{background:var(--surface)!important;color:var(--ink)}
.fs-pend h2{font-family:var(--disp);font-weight:600;margin:0}
.fs-modal{width:min(520px,92vw);max-height:82vh;overflow:auto;background:var(--card);border:var(--card-brd);box-shadow:var(--card-sh);border-radius:20px;padding:22px}
.fs-mhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.fs-mhead h3{font-family:var(--disp);font-weight:600;margin:0}
.fs-mhead .fs-pclose{position:static}
.fs-mrow{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.fs-mrow b{font-family:var(--disp);font-weight:600}.fs-mrow small{display:block;color:var(--soft);font-size:.8rem}
.fs-mact{display:flex;gap:6px}
.pstory{display:grid;gap:14px;margin-top:18px}
.pscene{background:var(--surface);border:var(--card-brd);box-shadow:var(--card-sh);border-radius:14px;padding:16px 18px}
.pscene-h{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.pemoji{font-size:1.6rem}
.pmeta{font-family:var(--mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--soft)}
.pscene p{margin:0;color:var(--ink);line-height:1.6}
.pchoices{margin:12px 0 0;padding-left:18px;color:var(--soft)}
.pchoices li{margin:4px 0}
.pgoto{font-family:var(--mono);font-size:.72rem;color:var(--blue)}
.kidstories{margin-top:14px;padding-top:12px;border-top:1px dashed var(--card-brd)}
.kidstories-note{display:block;margin-top:5px;font-size:.78rem;color:var(--soft)}
/* Subscription price panel on the parental-verification screen */
.pricebox{margin:18px 0;padding:18px 20px;border:1.5px solid var(--card-brd);border-radius:14px;background:var(--card)}
.priceamt{font-size:2.4rem;font-weight:850;line-height:1;letter-spacing:-.02em}
.priceamt span{font-size:1rem;font-weight:600;color:var(--soft);letter-spacing:0}
.pricelist{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:8px;font-size:.9rem}
.pricelist li{padding-left:22px;position:relative;line-height:1.4}
.pricelist li:before{content:"✓";position:absolute;left:0;font-weight:800;color:var(--teal,var(--pink))}
/* Privacy & data (parental rights) */
.privcard h3{margin-bottom:8px}
.privtbl{width:100%;border-collapse:collapse;font-size:.86rem}
.privtbl td{padding:7px 0;border-bottom:1px solid var(--line);vertical-align:top}
.privtbl td:first-child{color:var(--soft);width:42%;padding-right:14px}
.privtbl tr:last-child td{border-bottom:0}
.privform{margin-top:12px}
.btn.danger{background:var(--pink);border-color:var(--pink);color:#fff}
.btn.danger:hover{filter:brightness(.94)}
.btn.block{display:block;text-align:center;width:100%}
/* Child-facing AI + monitoring disclosure (AI Act Art 50; Children's Code std 4/11) */
.childnotice{max-width:1080px;margin:12px auto 0;padding:10px 22px;display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;font-size:.84rem;line-height:1.35}
.childnotice .cn-item{display:inline-flex;gap:6px;align-items:baseline;flex:1 1 260px}
.childnotice b{white-space:nowrap}
.cn-safe{font-weight:600}
@media (max-width:640px){.childnotice{font-size:.8rem;padding:9px 16px}}
.kidstories>b{display:block;font-family:var(--body);font-size:.82rem;color:var(--ink);margin-bottom:8px}
.kidstory{display:flex;justify-content:space-between;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-weight:600;font-size:.88rem;background:color-mix(in srgb,var(--violet) 7%,transparent);border:1px solid var(--card-brd);border-radius:10px;padding:8px 12px;margin-bottom:6px}
.kidstory:hover{border-color:var(--violet)}
.kidstory span{font-family:var(--mono);font-size:.68rem;color:var(--soft);font-weight:400;white-space:nowrap}
/* landing: Create chapter */
.create-band{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center;margin-top:8px}
@media(max-width:820px){.create-band{grid-template-columns:1fr;gap:26px}}
.create-copy p{color:var(--soft);font-size:1.05rem;line-height:1.68;margin:0 0 14px;max-width:52ch}
.create-loop{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0}
.create-loop span{font-family:var(--mono);font-size:.72rem;font-weight:700;color:var(--ink);background:var(--surface);border:var(--card-brd);box-shadow:var(--card-sh);border-radius:99px;padding:7px 13px}
.create-loop span b{color:var(--blue)}
.create-demo{border-radius:22px;padding:26px;min-height:260px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;background:linear-gradient(160deg,#20204a,#4b3a86);box-shadow:var(--card-sh)}
.create-demo .cd-char{font-size:4rem;filter:drop-shadow(0 8px 16px rgba(0,0,0,.35))}
.create-demo .cd-cap{background:rgba(255,255,255,.94);color:#15162A;border-radius:14px;padding:12px 16px;font-weight:600;line-height:1.5}
.create-demo .cd-choices{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.create-demo .cd-choices b{background:#fff;color:#20204a;border-radius:10px;padding:8px 14px;font-family:var(--body);font-weight:700;font-size:.86rem}
.create-safe{margin-top:26px;background:color-mix(in srgb,var(--green) 8%,transparent);border:1px solid color-mix(in srgb,var(--green) 30%,var(--card-brd));border-radius:14px;padding:16px 20px;font-size:.94rem;color:var(--ink);line-height:1.6;max-width:74ch}
.create-safe b{color:var(--green)}
/* ================= CREATE HUB + GAME FORGE ================= */
.hub{max-width:840px;margin:0 auto}
.hub-cards{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:24px}
@media(max-width:640px){.hub-cards{grid-template-columns:1fr}}
.hub-card{display:flex;flex-direction:column;gap:8px;text-decoration:none;color:var(--ink);background:var(--surface);border:var(--card-brd);box-shadow:var(--card-sh);border-radius:22px;padding:28px;transition:transform .25s cubic-bezier(.16,1,.3,1)}
.hub-card:hover{transform:translateY(-4px)}
.hub-card.story{background:linear-gradient(165deg,color-mix(in srgb,var(--blue) 12%,var(--card)),var(--card))}
.hub-card.game{background:linear-gradient(165deg,color-mix(in srgb,var(--violet) 14%,var(--card)),var(--card))}
.hub-emoji{font-size:2.6rem}
.hub-card h2{font-family:var(--disp);font-weight:600;font-size:1.5rem;margin:4px 0 0}
.hub-card p{color:var(--soft);margin:0;font-size:.95rem;line-height:1.5}
.hub-go{margin-top:8px;font-family:var(--body);font-weight:700;color:var(--blue)}
.gwrap{display:grid;gap:16px;justify-items:center}
.gpalette{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center}
.gp{width:46px;height:46px;border-radius:12px;border:2px solid var(--card-brd);background:var(--paper2);font-size:1.4rem;cursor:pointer}
.gp.on{border-color:var(--blue);background:color-mix(in srgb,var(--blue) 14%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 22%,transparent)}
.ghint{width:100%;text-align:center;font-size:.8rem;color:var(--soft);margin-top:4px}
.gboard{display:grid;gap:3px;background:var(--card-brd);border:2px solid var(--card-brd);border-radius:14px;padding:3px;width:min(560px,94vw)}
.gcell{aspect-ratio:1;border:none;border-radius:6px;background:var(--paper2);display:grid;place-items:center;font-size:clamp(.9rem,3.4vw,1.5rem);cursor:pointer;padding:0;line-height:1}
.gcell.t-wall{background:color-mix(in srgb,var(--ink) 30%,var(--paper2))}
.gcell.t-goal{background:color-mix(in srgb,var(--green) 20%,var(--paper2))}
.gcell.t-spike{background:color-mix(in srgb,var(--pink) 16%,var(--paper2))}
.gcell.t-gem{background:color-mix(in srgb,var(--teal) 14%,var(--paper2))}
.gcell.t-hero{background:color-mix(in srgb,var(--blue) 16%,var(--paper2))}
.gcell.on{box-shadow:0 0 0 3px var(--blue) inset}
.gboard.play .gcell{cursor:default}
.grule{display:flex;align-items:center;gap:8px;font-size:.9rem;color:var(--ink);font-weight:600;background:var(--surface);border:var(--card-brd);box-shadow:var(--card-sh);border-radius:12px;padding:12px 16px}
.grule input{width:18px;height:18px}
.gplayer{position:relative;width:min(600px,94vw);background:var(--card);border:var(--card-brd);box-shadow:var(--card-sh);border-radius:22px;padding:22px;display:flex;flex-direction:column;align-items:center;gap:14px}
.gp-hud{font-family:var(--disp);font-weight:600;font-size:1.1rem;color:var(--ink)}
.gp-msg{color:var(--soft);font-size:.9rem;text-align:center}
.gpad{display:grid;justify-items:center;gap:6px}
.gpad-row{display:flex;gap:6px}
.gpad button{width:52px;height:44px;border-radius:12px;border:none;background:var(--grad-btn);color:#fff;font-size:1.1rem;cursor:pointer;box-shadow:0 6px 16px -6px color-mix(in srgb,var(--blue) 55%,transparent)}
.gpad button:active{transform:translateY(1px)}
.gp-state{font-family:var(--disp);font-weight:600;font-size:1.2rem;display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center}
.gp-state.win{color:var(--green)}.gp-state.lose{color:var(--pink)}
.pgrid{display:grid;gap:3px;background:var(--card-brd);border:2px solid var(--card-brd);border-radius:14px;padding:3px;margin-top:18px;max-width:560px}
.pgcell{aspect-ratio:1;border-radius:6px;background:var(--paper2);display:grid;place-items:center;font-size:clamp(.8rem,3vw,1.3rem)}
.pgcell.t-wall{background:color-mix(in srgb,var(--ink) 30%,var(--paper2))}
.pgcell.t-goal{background:color-mix(in srgb,var(--green) 20%,var(--paper2))}
.pgcell.t-spike{background:color-mix(in srgb,var(--pink) 16%,var(--paper2))}
.pgcell.t-gem{background:color-mix(in srgb,var(--teal) 14%,var(--paper2))}
.pgcell.t-hero{background:color-mix(in srgb,var(--blue) 16%,var(--paper2))}
.createlink{display:inline-block;margin-top:16px;font-family:var(--body);font-weight:700;color:var(--violet);text-decoration:none;font-size:.95rem}
.createlink:hover{text-decoration:underline}
.learninsight{margin-top:14px;padding-top:12px;border-top:1px dashed var(--card-brd)}
.learninsight>b{display:block;font-family:var(--body);font-size:.82rem;color:var(--ink);margin-bottom:8px}
.lm-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.lm{font-family:var(--mono);font-size:.64rem;font-weight:700;border-radius:99px;padding:4px 10px;border:1px solid var(--card-brd)}
.lm-growing{color:var(--green);background:color-mix(in srgb,var(--green) 12%,transparent)}
.lm-struggling{color:var(--pink);background:color-mix(in srgb,var(--pink) 12%,transparent)}
.lm-plateau{color:var(--marigold);background:color-mix(in srgb,var(--marigold) 12%,transparent)}
.lm-mastered{color:var(--blue);background:color-mix(in srgb,var(--blue) 12%,transparent)}
.lm-new{color:var(--soft)}
.learninsight small{color:var(--soft);font-size:.82rem}
.skb .v{background:linear-gradient(90deg,var(--violet),var(--blue))}
.skb .g{background:linear-gradient(90deg,var(--green),var(--teal))}
.mmz{display:grid;gap:3px;background:var(--line);border:2px solid var(--line);border-radius:10px;padding:3px;width:min(240px,60vw)}
.mmc{aspect-ratio:1;background:var(--paper);border-radius:4px;display:grid;place-items:center;font-size:clamp(.85rem,4vw,1.25rem)}
.mmc.w{background:color-mix(in srgb,var(--ink) 34%,var(--paper))}
.fp-arrow{font-family:var(--disp);font-weight:700;color:var(--soft);font-size:1.3rem;margin:0 3px}
.fp-dot{font-family:var(--mono);font-size:.64rem;text-transform:uppercase;letter-spacing:.1em;color:var(--soft);margin:0 8px}
.lm-transfer{margin-top:8px;font-family:var(--body);font-weight:700;font-size:.78rem;color:var(--green);background:color-mix(in srgb,var(--green) 10%,transparent);border:1px solid color-mix(in srgb,var(--green) 28%,var(--card-brd));border-radius:10px;padding:6px 10px;display:inline-block}
.reflect{margin-top:12px;background:color-mix(in srgb,var(--violet) 8%,transparent);border:1px solid color-mix(in srgb,var(--violet) 28%,var(--card-brd));border-radius:14px;padding:12px 14px}
.rf-q{font-family:var(--disp);font-weight:600;font-size:.95rem;color:var(--ink);margin-bottom:10px}
.rf-chips{display:flex;flex-wrap:wrap;gap:7px}
.rf-chip{font:inherit;font-weight:600;font-size:.82rem;background:var(--card);border:1.5px solid var(--card-brd);border-radius:99px;padding:7px 13px;cursor:pointer;color:var(--ink)}
.rf-chip:hover{border-color:var(--violet);color:var(--violet)}
.rf-done{font-weight:600;font-size:.9rem;color:var(--violet)}
.mission{font-family:var(--body);font-size:.94rem;color:var(--soft);margin-bottom:8px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.mission b{color:var(--ink)}
.critopt{font-size:.92rem;font-weight:600;line-height:1.35;color:var(--ink)}
.choice:has(.critopt){min-height:auto;padding:14px 16px;text-align:left;font-size:1rem}
.buddy{font-size:4.6rem;line-height:1;margin-bottom:4px;animation:pop .6s cubic-bezier(.16,1,.3,1)}
.buddybar{height:12px;background:color-mix(in srgb,var(--ink) 8%,transparent);border:1px solid var(--card-brd);border-radius:99px;overflow:hidden;max-width:260px;margin:14px auto 18px}
.buddybar i{display:block;height:100%;background:linear-gradient(90deg,var(--marigold),var(--pink),var(--violet));border-radius:99px;transition:width .6s cubic-bezier(.16,1,.3,1)}
.proof{display:flex;flex-wrap:wrap;gap:14px;margin-top:14px;padding-top:12px;border-top:1px dashed var(--card-brd)}
.proof-stat{flex:1;min-width:120px}
.proof-stat b{font-family:var(--disp);font-weight:600;font-size:1.7rem;color:var(--green);display:block;line-height:1}
.proof-stat span{font-size:.76rem;color:var(--soft);line-height:1.3;display:block;margin-top:3px}
.momsec{margin-top:14px}
.momsec>b{display:block;font-size:.82rem;color:var(--ink);margin-bottom:8px}
.momform{display:flex;gap:8px}
.momform input{flex:1;font:inherit;padding:9px 12px;border:1.5px solid var(--card-brd);border-radius:10px;background:var(--paper2);color:var(--ink)}
.momform input:focus{outline:none;border-color:var(--blue)}
.moments{margin-top:10px;display:grid;gap:6px}
.moment{font-family:var(--serif);font-size:.9rem;color:var(--ink);background:color-mix(in srgb,var(--marigold) 8%,transparent);border-radius:10px;padding:8px 12px;font-style:italic}
.safetyflag{margin:12px 0;background:color-mix(in srgb,var(--pink) 10%,transparent);border:1.5px solid var(--pink);border-radius:12px;padding:12px 15px;font-size:.88rem;line-height:1.55;color:var(--ink)}
.safetyflag b{color:var(--pink)}
/* ============================================================
   3D DEPTH SYSTEM — applied app-wide via the shared stylesheet.
   Every surface (landing, auth, dashboard, play, create studios,
   arcade) gains real depth: a parallax star/shape field, cursor-
   & tilt-driven scene parallax, and cards/buttons that lift in 3D.
   Compositor-only (transform/opacity). Each effect carries its OWN
   perspective() — NO perspective on html/body — so position:fixed
   backgrounds keep working on long scrolling pages. Pointer hit-
   testing is preserved. Fully neutralised under reduced-motion.
   --px/--py are set (range -0.5..0.5) by the layout bootstrap.
   ============================================================ */
:root{--px:0;--py:0}
/* parallax background — translate only (no ancestor perspective → stays fixed) */
.aurora{transform:translate3d(calc(var(--px)*-26px),calc(var(--py)*-26px),0) scale(1.08);transition:transform .6s cubic-bezier(.16,1,.3,1);will-change:transform}
.grain{transform:translate3d(calc(var(--px)*-10px),calc(var(--py)*-10px),0)}
/* floating 3D shape field — self-contained perspective on the layer */
.depth3d{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;perspective:1000px;perspective-origin:50% 45%}
.depth3d span{position:absolute;display:block;border-radius:30% 70% 62% 38%/44% 40% 60% 56%;opacity:.42;mix-blend-mode:normal;will-change:transform;animation:float3d 22s ease-in-out infinite}
/* Was: html:not([data-theme]) .depth3d span — that matched EVERY visitor who had not
   manually used the theme toggle, so light-OS users got dark-mode styling. The correct
   "auto" form is a prefers-color-scheme query scoped to :not([data-theme=light]). */
:root[data-theme=dark] .depth3d span{opacity:.34}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .depth3d span{opacity:.34}}
.depth3d span:nth-child(1){width:130px;height:130px;left:7%;top:24%;--z:-360px;background:linear-gradient(135deg,var(--blue),var(--violet))}
.depth3d span:nth-child(2){width:88px;height:88px;right:11%;top:15%;--z:-180px;animation-delay:-5s;background:linear-gradient(135deg,var(--pink),var(--marigold))}
.depth3d span:nth-child(3){width:60px;height:60px;left:16%;bottom:16%;--z:-90px;animation-delay:-9s;background:linear-gradient(135deg,var(--teal),var(--blue))}
.depth3d span:nth-child(4){width:168px;height:168px;right:5%;bottom:8%;--z:-460px;animation-delay:-13s;background:linear-gradient(135deg,var(--marigold),var(--pink))}
.depth3d span:nth-child(5){width:46px;height:46px;left:47%;top:9%;--z:-60px;animation-delay:-7s;background:linear-gradient(135deg,var(--violet),var(--teal))}
.depth3d span:nth-child(6){width:74px;height:74px;left:62%;bottom:22%;--z:-240px;animation-delay:-11s;background:linear-gradient(135deg,var(--violet),var(--blue))}
@keyframes float3d{0%,100%{transform:translate3d(calc(var(--px)*46px),calc(var(--py)*46px),var(--z)) rotate(-6deg)}50%{transform:translate3d(calc(var(--px)*46px),calc(var(--py)*46px - 26px),var(--z)) rotate(8deg)}}
/* content floats above the depth field */
main.main{position:relative;z-index:1}
/* hero scene tilts gently with the cursor (landing) */
html.js .hero{transform:perspective(1300px) rotateY(calc(var(--px)*3deg)) rotateX(calc(var(--py)*-3deg));transition:transform .5s cubic-bezier(.16,1,.3,1);transform-style:preserve-3d}
/* cards & panels: hover lifts them out of the page in 3D */
.card,.hub-card,.kidcard,.rc,.js-panel,.ga-card,.lf-item,.mf-item,.cf-item,.auth{transition:transform .42s cubic-bezier(.16,1,.3,1),box-shadow .42s}
html.js .hub-card:hover,html.js .kidcard:hover,html.js .rc:hover,html.js .ga-card:hover,html.js .js-panel:hover{transform:perspective(1000px) rotateX(4deg) translateY(-9px) translateZ(26px);box-shadow:0 34px 74px -30px rgba(20,22,55,.55),var(--ring)}
/* Was: :root[data-theme=dark] html.js .hub-card:hover, html:not([data-theme]) html.js .ga-card:hover
   The first half was dead code — html can never be a descendant of :root (they are the
   same element) — and the second half applied a near-black shadow to light-mode visitors.
   Rewritten to combine the selectors on the one root element and cover the same card set
   as the base hover rule above. */
:root[data-theme=dark].js .hub-card:hover,:root[data-theme=dark].js .kidcard:hover,:root[data-theme=dark].js .rc:hover,:root[data-theme=dark].js .ga-card:hover,:root[data-theme=dark].js .js-panel:hover{box-shadow:0 40px 84px -30px rgba(0,0,0,.75)}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]).js .hub-card:hover,:root:not([data-theme=light]).js .kidcard:hover,:root:not([data-theme=light]).js .rc:hover,:root:not([data-theme=light]).js .ga-card:hover,:root:not([data-theme=light]).js .js-panel:hover{box-shadow:0 40px 84px -30px rgba(0,0,0,.75)}}
/* buttons & quiz choices press in/out along Z */
html.js .btn:hover{transform:perspective(600px) translateZ(16px) translateY(-2px)}
html.js .btn:active{transform:perspective(600px) translateZ(5px) translateY(1px)}
html.js .choice{transition:transform .2s cubic-bezier(.16,1,.3,1),box-shadow .2s,border-color .2s,background .2s}
html.js .choice:hover:not([disabled]){transform:perspective(760px) translateZ(20px) translateY(-3px)}
html.js .choice.right{transform:perspective(760px) translateZ(30px) scale(1.03)}
/* scroll-reveal sections rise up out of depth (JS-gated: visible without JS) */
html.js .reveal{opacity:0;transform:perspective(1100px) rotateX(9deg) translateY(34px) translateZ(-50px);transform-origin:50% 100%;transition:opacity .8s ease,transform .8s cubic-bezier(.16,1,.3,1)}
html.js .reveal.in{opacity:1;transform:none}
/* the mark/brand chip gains a little pop */
html.js .mk:hover{transform:perspective(500px) translateZ(10px)}
@media(prefers-reduced-motion:reduce){
  .aurora,.grain,.depth3d span,html.js .hero{transform:none!important;animation:none!important;transition:none!important}
  html.js .hub-card:hover,html.js .kidcard:hover,html.js .rc:hover,html.js .ga-card:hover,html.js .js-panel:hover,html.js .btn:hover,html.js .btn:active,html.js .choice:hover,html.js .choice.right,html.js .mk:hover{transform:none!important}
  html.js .reveal{opacity:1!important;transform:none!important;transition:none!important}
}

/* ==========================================================================
   THE SKY ARC — 3D material system
   --------------------------------------------------------------------------
   Two cooperating layers:
     1. #atmos  — a WebGL canvas painting the twilight arc (client/atmosphere.js)
     2. this    — CSS 3D giving content real depth ON TOP of that atmosphere

   The rule that keeps it readable: the atmosphere never carries meaning and
   never carries text. It is weather. Everything you must be able to read sits
   on a light-bearing surface above it, and every one of those surfaces states
   its own opaque-enough background so contrast never depends on the sky.
   ========================================================================== */

/* ---- 1. the atmosphere canvas ---- */
.atmos{
  position:fixed; inset:0; z-index:0;
  width:100%; height:100%;
  display:block; pointer-events:none;
  /* The canvas renders at 50–75% internal resolution and is scaled up here.
     The nebula is low-frequency so the upscale is invisible, and it is the
     single biggest fill-rate saving on mobile GPUs. */
  image-rendering:auto;
}
/* Until we know WebGL works, keep the canvas invisible so a failed context
   never flashes a black rectangle over the page. */
html:not(.has-webgl) .atmos{opacity:0}
html.has-webgl .atmos{opacity:1;transition:opacity .9s ease}

/* The old blurred-blob layers are the FALLBACK now, not the design. When the
   shader is live they would only muddy it, so they stand down. */
html.has-webgl .aurora,
html.has-webgl .depth3d{opacity:0!important;animation:none!important}
/* ...and when it is not live, they carry the atmosphere exactly as before. */
html.no-webgl .aurora{opacity:.5}

/* ---- 2. depth scale ------------------------------------------------------
   One shared vocabulary of distance so "how far forward is this?" has the same
   answer everywhere, instead of every component inventing its own shadow. */
:root{
  --z-sunk:-14px;    /* pressed into the page   */
  --z-flat:0px;      /* at rest                 */
  --z-lift:22px;     /* hoverable card at rest  */
  --z-raise:46px;    /* hovered / focused       */
  --z-float:78px;    /* hero-level, always up   */
  --persp:1400px;
  --tilt-ease:cubic-bezier(.16,1,.3,1);
}

/* ---- 3. light-bearing glass ---------------------------------------------
   Over a live sky, a card should read as a pane catching light, not a painted
   rectangle. Each surface is opaque enough for AA text on its own, then tinted
   by whatever the atmosphere is doing behind it. */
:root,:root[data-theme=light]{
  --surface:linear-gradient(180deg,rgba(255,253,249,.94),rgba(255,253,249,.80));
  --surface-brd:1px solid rgba(34,26,46,.09);
  --surface-edge:0 1px 0 rgba(255,255,255,.95) inset;
}
:root[data-theme=dark]{
  --surface:linear-gradient(180deg,rgba(29,24,60,.80),rgba(15,12,33,.72));
  --surface-brd:1px solid rgba(244,238,230,.12);
  --surface-edge:0 1px 0 rgba(255,255,255,.09) inset;
}
@media(prefers-color-scheme:dark){
  :root:not([data-theme=light]){
    --surface:linear-gradient(180deg,rgba(29,24,60,.80),rgba(15,12,33,.72));
    --surface-brd:1px solid rgba(244,238,230,.12);
    --surface-edge:0 1px 0 rgba(255,255,255,.09) inset;
  }
}

/* Depth shadow as a function of distance, so lift and shadow can never disagree. */
:root{
  --sh-lift:0 2px 6px rgba(20,14,40,.06), 0 18px 38px -20px rgba(20,14,40,.20);
  --sh-raise:0 4px 12px rgba(20,14,40,.09), 0 40px 78px -30px rgba(20,14,40,.30);
}
:root[data-theme=dark]{
  --sh-lift:0 2px 10px rgba(0,0,0,.45), 0 24px 52px -24px rgba(0,0,0,.65);
  --sh-raise:0 6px 18px rgba(0,0,0,.55), 0 48px 92px -32px rgba(0,0,0,.78);
}
@media(prefers-color-scheme:dark){
  :root:not([data-theme=light]){
    --sh-lift:0 2px 10px rgba(0,0,0,.45), 0 24px 52px -24px rgba(0,0,0,.65);
    --sh-raise:0 6px 18px rgba(0,0,0,.55), 0 48px 92px -32px rgba(0,0,0,.78);
  }
}

/* Restore the frosting the old rule killed. Only where a surface actually
   overlaps the sky — backdrop-filter is expensive and pointless elsewhere. */
.card,.kid,.fc,.how,.intro,.profile,.auth,.bcard,.feature,.rc,.dial,
.sweetspot,.stakes-panel,.faq details,.hub-card,.kidcard,.ga-card{
  background:var(--surface);
  border:var(--surface-brd);
  -webkit-backdrop-filter:blur(18px) saturate(1.25);
  backdrop-filter:blur(18px) saturate(1.25);
  box-shadow:var(--surface-edge), var(--sh-lift);
}

/* ---- 4. real 3D lift -----------------------------------------------------
   translateZ inside a perspective container, not a fake y-offset: cards tilt
   with the parallax the same way the atmosphere does, so the whole page shares
   one camera. */
.deck{perspective:var(--persp);perspective-origin:50% 40%}
.deck > *{transform-style:preserve-3d}

html.js .hub-card,html.js .kidcard,html.js .rc,html.js .ga-card,
html.js .fc,html.js .feature,html.js .card{
  transform:translate3d(0,0,var(--z-lift));
  transition:transform .5s var(--tilt-ease), box-shadow .5s var(--tilt-ease);
  will-change:transform;
}
html.js .hub-card:hover,html.js .kidcard:hover,html.js .rc:hover,
html.js .ga-card:hover,html.js .fc:hover,html.js .feature:hover,
html.js .card:hover{
  transform:translate3d(0,0,var(--z-raise))
            rotateX(calc(var(--py,0) * -3.2deg))
            rotateY(calc(var(--px,0) *  3.2deg));
  box-shadow:var(--surface-edge), var(--sh-raise);
}
/* Keyboard users get the same lift, without the pointer-driven tilt. */
html.js .hub-card:focus-within,html.js .kidcard:focus-within,
html.js .rc:focus-within,html.js .ga-card:focus-within{
  transform:translate3d(0,0,var(--z-raise));
  box-shadow:var(--surface-edge), var(--sh-raise);
}

/* The hero sits closest to the camera and drifts with the shared parallax. */
.hero-inner{
  transform:translate3d(calc(var(--px,0) * -8px),calc(var(--py,0) * -6px),var(--z-float));
  transition:transform .7s var(--tilt-ease);
}

/* ---- 5. honour the user -------------------------------------------------
   Reduced motion keeps the depth (it is information) and drops the movement.
   The shader independently freezes itself to a single static frame. */
@media(prefers-reduced-motion:reduce){
  .atmos{transition:none}
  .hero-inner{transform:translate3d(0,0,var(--z-float));transition:none}
  html.js .hub-card,html.js .kidcard,html.js .rc,html.js .ga-card,
  html.js .fc,html.js .feature,html.js .card{transition:none}
  html.js .hub-card:hover,html.js .kidcard:hover,html.js .rc:hover,
  html.js .ga-card:hover,html.js .fc:hover,html.js .feature:hover,
  html.js .card:hover{transform:translate3d(0,0,var(--z-raise))}
}

/* Content must always win against the sky. */
.main,footer,.bar,.childnotice{position:relative;z-index:1}

/* ==========================================================================
   HEADER CONTROLS — Log in / Sign up
   --------------------------------------------------------------------------
   The reported bug: the Sign up label rendered --soft grey on a dark gradient
   (~1.5:1 in the light theme). Root cause was selector scope, fixed at .nav a
   above. What remains here is making the pair actually look like a pair, and
   pinning the label colour so no future nav rule can reclaim it.

   Contrast is stated, not hoped for. The Sign up gradient stops are both dark
   enough to carry white: #C2410C is 4.9:1 and #4C1D95 is 11:1 against #fff.
   ========================================================================== */
:root{
  /* Dawn -> night, the same two hues the atmosphere uses, one step more
     luminous than --pink-solid/--blue-solid so the control reads as lit
     rather than muddy. Declared once; both themes share them because a
     solid button is its own surface and does not inherit the page. */
  --btn-dawn:#C2410C;
  --btn-night:#4C1D95;
  --btn-grad:linear-gradient(135deg,var(--btn-dawn),var(--btn-night));
}

/* Solid control (Sign up). !important on the colour only — it is defending a
   contrast guarantee against broad descendant selectors like .nav a, which is
   exactly the bug being fixed here. */
.nav .btn,.btn.sm{background:var(--btn-grad);color:#fff!important;border:none}
.nav .btn:hover{filter:brightness(1.08)}

/* Quiet control (Log in). A bordered box so it reads as pressable, with the
   full --ink label rather than --soft grey: 12.6:1 on light paper, 14.8:1 on
   the dark observatory ground. */
.nav .btn.ghost{
  background:var(--glass);
  color:var(--ink)!important;
  border:1.5px solid var(--line);
  box-shadow:none;
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}
.nav .btn.ghost:hover{
  border-color:color-mix(in srgb,var(--btn-dawn) 55%,var(--line));
  background:color-mix(in srgb,var(--btn-dawn) 8%,var(--glass));
  filter:none;
}

/* Sit the two controls on a shared baseline and give them equal optical weight. */
.nav .btn.sm{padding:9px 16px;font-size:.9rem;border-radius:10px;line-height:1.15}

/* Visible keyboard focus on both, which a colour-only fix would have missed. */
.nav .btn:focus-visible{
  outline:2px solid var(--btn-dawn);
  outline-offset:2px;
}


/* ===================== LANDING — compiled from the design handoff =====================
   Generated from design/Claude Design handoff request/Pebblemind Landing.dc.html by
   rendering it and serialising the CSSOM, so the style-hover attributes become real
   :hover rules and every {{ }} loop is resolved. Token and reset rules were dropped here
   because they already exist above — one definition per token.
   Regenerate rather than hand-edit. ==================================================== */
@keyframes sc-shine { 
  0% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.sc-interp.sc-missing { display: inline-block; width: 2em; height: 1em; overflow: hidden; vertical-align: text-bottom; background: rgba(255, 255, 255, 0.3); border: 1px solid rgba(0, 0, 0, 0.5); border-radius: 2px; box-sizing: border-box; color: transparent; user-select: none; }
.sc-interp.sc-unresolved { font-family: ui-monospace, monospace; font-size: 0.85em; color: color-mix(in srgb, currentcolor, transparent); background: color-mix(in srgb, currentcolor 10%, transparent); border-radius: 3px; padding: 0px 3px; }
.sc-host.sc-has-error { position: relative; }
.sc-logic-error { position: absolute; top: 8px; left: 8px; z-index: 2147483647; max-width: 60ch; padding: 6px 10px; background: rgb(176, 0, 32); color: rgb(255, 255, 255); font: 12px / 1.4 ui-monospace, monospace; border-radius: 4px; white-space: pre-wrap; pointer-events: none; }
@media print {
  @page { margin: 0.5cm; }
  figure, table { break-inside: avoid; }
  #dc-root, #dc-root > .sc-host { height: auto; }
}
.scp0:hover { color: var(--blue) !important; }
.scp1:hover { color: var(--ink) !important; }
.scp2:hover { color: rgb(255, 255, 255) !important; transform: translateY(-1px) !important; }
.scp3:hover { color: rgb(255, 255, 255) !important; transform: translateY(-2px) !important; box-shadow: var(--e-2) !important; }
.scp4:hover { color: var(--ink) !important; border-color: var(--ink) !important; }
.scp5:hover { box-shadow: var(--e-2) !important; transform: translateY(-2px) !important; }
.scp6:hover { transform: translateZ(22px) translateY(-3px) !important; box-shadow: var(--e-2) !important; border-color: var(--violet) !important; }
.scp7:hover { transform: translateZ(22px) translateY(-3px) !important; box-shadow: var(--e-2) !important; border-color: var(--marigold) !important; }
.scp8:hover { transform: translateZ(22px) translateY(-3px) !important; box-shadow: var(--e-2) !important; border-color: var(--teal) !important; }
.scp9:hover { color: var(--ink) !important; transform: translateZ(24px) translateY(-3px) !important; border-color: var(--violet) !important; box-shadow: var(--e-2) !important; }
.scpa:hover { color: var(--ink) !important; transform: translateZ(24px) translateY(-3px) !important; border-color: var(--teal) !important; box-shadow: var(--e-2) !important; }
.scpb:hover { color: var(--ink) !important; transform: translateZ(24px) translateY(-3px) !important; border-color: var(--pink) !important; box-shadow: var(--e-2) !important; }
.scpc:hover { color: var(--ink) !important; transform: translateZ(24px) translateY(-3px) !important; border-color: var(--marigold) !important; box-shadow: var(--e-2) !important; }
.scpd:hover { color: var(--ink) !important; transform: translateZ(24px) translateY(-3px) !important; border-color: var(--green-indicator) !important; box-shadow: var(--e-2) !important; }
.scpe:hover { background: var(--card) !important; }
.scpf:hover { transform: translateY(-3px) !important; }
.scpg:hover { color: rgb(255, 255, 255) !important; }
a { color: var(--pink); text-decoration: none; }
a:hover { color: var(--ink); }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
::selection { background: var(--marigold); color: var(--paper); }
@keyframes ripple { 
  0% { transform: scale(0.72); opacity: 0.5; }
  70% { opacity: 0; }
  100% { transform: scale(1.7); opacity: 0; }
}
@keyframes riseIn { 
  0% { opacity: 0; transform: translateY(18px); }
  100% { opacity: 1; transform: none; }
}
@keyframes orbit { 
  0% { transform: rotateX(68deg) rotateZ(0deg); }
  100% { transform: rotateX(68deg) rotateZ(360deg); }
}
[data-nav-menu], [data-nav-drawer] { display: none; }
/* The evidence scene is a 4-up grid of findings; it needs two collapse steps of its own
   before the page's own narrow-width rules take over. */
@media (max-width: 1290px) {
  [data-evidence-grid] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 640px) {
  [data-evidence-grid] { grid-template-columns: minmax(0, 1fr) !important; }
}
/* The nav collapses at 1023px, not 760px: the wide nav has enough items that it crowds the
   wordmark on a tablet long before it actually overflows. The journey rules below stay at
   760px — that is a different breakpoint for a different reason. */
@media (max-width: 1023px) {
  [data-nav-wide] { display: none !important; }
  [data-nav-menu] { display: inline-flex; }
  [data-nav-drawer] { display: flex; }
}
@media (max-width: 760px) {
  [data-journey-row] { grid-template-columns: 26px minmax(0px, 1fr) !important; }
  [data-journey-card] { grid-column: 2 !important; }
  [data-journey-dot] { grid-column: 1 !important; }
  [data-thread] { left: 13px !important; width: 26px !important; }
}
@keyframes beamSweep { 
  0%, 12% { width: 0px; opacity: 0; }
  30% { opacity: 1; }
  70% { width: 74%; }
  88%, 100% { width: 74%; opacity: 0; }
}
@keyframes marbleRoll { 
  0% { transform: translate(0px, 0px); }
  55% { transform: translate(86px, 40px); }
  62% { transform: translate(86px, 40px); }
  100% { transform: translate(0px, 0px); }
}
@keyframes softPulse { 
  0%, 100% { opacity: 0.35; transform: scale(0.86); }
  50% { opacity: 1; transform: scale(1); }
}
@keyframes loopTravel { 
  0% { transform: translate(0px, 0px); }
  25% { transform: translate(74px, 0px); }
  50% { transform: translate(74px, 44px); }
  75% { transform: translate(0px, 44px); }
  100% { transform: translate(0px, 0px); }
}
@keyframes glowBulb { 
  0%, 45% { opacity: 0.25; }
  55%, 100% { opacity: 1; }
}
@keyframes growBar { 
  0% { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}
@keyframes beacon { 
  0%, 100% { transform: rotate(-40deg); }
  50% { transform: rotate(40deg); }
}
@keyframes marbleCascade { 
  0%, 5% { transform: translate(0px, 0px); }
  32% { transform: translate(42%, 25%); }
  37% { transform: translate(42%, 25%); }
  64% { transform: translate(7%, 53%); }
  69% { transform: translate(7%, 53%); }
  93%, 100% { transform: translate(50%, 67%); }
}
@keyframes flip { 
  0%, 30% { transform: translateX(0px); }
  44%, 100% { transform: translateX(16px); }
}
@keyframes dashSpin { 
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes floatY { 
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-5px); }
}
@media (max-width: 760px) {
  [data-bar-row] { grid-template-columns: 1fr; row-gap: 8px; }
  [data-bar-rank] { width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* Landing is full-bleed and its Sky Arc decorations intentionally overhang the viewport.
   Clip them rather than let the page scroll sideways on mobile. */
body:has(.pm-landing){overflow-x:hidden}
.pm-landing{overflow-x:clip}

/* ===================== AUTH PAGES — matched to the landing design =====================
   Signup and login were still in the pre-handoff visual language: flat card, square
   buttons, no atmosphere, so the jump from "Start free" to /signup read as a different
   product. The handoff did not include auth screens, so these rules mirror the landing's
   measured treatment: Sky Arc behind, --clearing card, Fraunces 600 at -.028em, and the
   exact pill CTA (999px, --blue-solid, 44px min-height, Instrument Sans 600 14.5px).
   Scoped to .authwrap so no other surface shifts. ==================================== */
.authwrap{position:relative;min-height:calc(100vh - 140px);display:grid;place-items:center;padding:var(--sp-7) var(--sp-4)}

.authwrap .auth{width:100%;max-width:460px;background:var(--clearing);border:1px solid var(--clearing-line);
  border-radius:var(--r-3);padding:var(--sp-6);box-shadow:var(--e-1);backdrop-filter:none}
.authwrap .auth .h1{font-family:var(--disp);font-weight:600;font-size:clamp(28px,4.4vw,38px);
  line-height:1.02;letter-spacing:-.028em;margin:0 0 var(--sp-2)}
.authwrap .auth .muted{color:var(--soft);font-size:15px;line-height:1.55;margin:0 0 var(--sp-5)}

.authwrap .form{display:grid;gap:var(--sp-4)}
.authwrap .form label{display:grid;gap:6px;font-size:12.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--soft)}
/* The parenthetical hint must not inherit the label's uppercase tracking — it reads as shouting. */
.authwrap .form label small{text-transform:none;letter-spacing:0;font-weight:500;font-size:12.5px;opacity:.85}
.authwrap .form input[type=text],.authwrap .form input[type=email],
.authwrap .form input[type=password],.authwrap .form input:not([type]){
  font-family:var(--body);font-size:16px;              /* 16px: anything smaller zooms on iOS focus */
  min-height:48px;padding:0 var(--sp-3);color:var(--ink);background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-2);transition:border-color var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease)}
.authwrap .form input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 22%,transparent)}
.authwrap .form input:focus-visible{outline:3px solid var(--blue);outline-offset:3px}

.authwrap .btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;
  padding:0 var(--sp-5);border-radius:999px;background:var(--blue-solid);color:#FFFFFF;
  font-family:var(--body);font-weight:600;font-size:14.5px;letter-spacing:-.003em;border:0;
  cursor:pointer;transition:transform var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease)}
.authwrap .btn:hover{color:#FFFFFF;transform:translateY(-1px);box-shadow:var(--e-2)}
.authwrap .btn:active{transform:none}
.authwrap .consentrow{text-transform:none;letter-spacing:0;font-weight:500;color:var(--ink);font-size:.86rem}
.authwrap .auth a{color:var(--pink);font-weight:600}
.authwrap .auth a:hover{color:var(--ink)}
@media(prefers-reduced-motion:reduce){.authwrap .btn:hover{transform:none}}

/* Demo option buttons: the resting border lives here, not inline. Inline it was written as
   `border: 2px solid var(--clearing-line)`, and a var()-bearing shorthand is substituted at
   computed-value time, so it beat even an !important border-color longhand set from JS —
   the correct/incorrect feedback could never colour the border. */
#demo button.scpf{border:2px solid var(--clearing-line)}

/* The landing's theme toggle set no font-family, so it fell back to the browser default
   (Arial) — against the system's own "Fraunces + Instrument Sans + Space Mono, no other
   faces" rule, and visibly different from the matching control on the auth pages. */
button[aria-label*="theme" i]{font-family:var(--body)}

/* ===================== APP SCREENS — ported from Pebblemind App.dc.html =====================
   The parent dashboard and the Create hub, brought onto the same Sky Arc as the landing.
   Values are lifted from the design file. That file defines exactly two screens, `parent`
   and `make` — there is no /play or Forge screen in it, so those keep their existing
   treatment. Like the landing, these render bare: the site's atmos/aurora/grain layers
   would fight the single continuous arc gradient the system is built on. */
.pmapp{position:relative;min-height:100vh;background:var(--paper);color:var(--ink)}
.pmapp-arc{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,var(--arc-dawn) 0%,var(--arc-day) 22%,var(--arc-dusk) 58%,var(--arc-night) 88%,var(--arc-deep) 100%)}
.pmapp-body{position:relative;z-index:1}

/* Header is deliberately opaque: the system forbids legibility depending on backdrop-filter. */
.pmapp-bar{position:sticky;top:0;z-index:30;background:var(--paper);border-bottom:1px solid var(--line)}
.pmapp-bar-in{max-width:1320px;margin:0 auto;padding:var(--sp-2) var(--sp-5);min-height:64px;
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap}
.pmapp-brand{display:flex;align-items:center;gap:10px;color:var(--blue)}
/* BRAND_MARK carries only a class, and its size comes from the old `.brand` header context.
   In this bar that context does not apply, so the mark collapsed to 0x0. The design draws it
   at 28px; setting it here keeps BRAND_MARK a single shared constant. */
.pmapp-brand svg,.pmapp-brand .brandmark{display:block;width:28px;height:28px;flex:none}
.pmapp-brand b{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:20px;letter-spacing:-.015em;color:var(--ink)}
.pmapp-nav{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
.pmapp-seg{display:flex;padding:3px;border-radius:999px;background:var(--paper2);border:1px solid var(--line)}
/* The design file draws these pills at 38px, but system.md lists "44px minimum targets" as a
   non-negotiable — the design contradicts its own rule. Keep the 38px pill the design drew and
   extend the hit area to 44px with an overlay, so both hold instead of one losing. */
.pmapp-seg a{position:relative;min-height:38px;display:inline-flex;align-items:center;padding:0 16px;border:0;
  border-radius:999px;background:transparent;color:var(--soft);font-size:13.5px;font-weight:600;
  transition:background var(--dur-2) var(--ease)}
.pmapp-seg a::after{content:'';position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:44px}
.pmapp-seg a[aria-current="page"]{background:var(--card);color:var(--ink)}
/* No background of its own, so a 44px box is invisible here and costs nothing. */
.pmapp-brand{min-height:44px}
.pmapp-out{min-height:44px;display:inline-flex;align-items:center;padding:0 14px;border-radius:999px;
  background:transparent;border:1px solid var(--line);color:var(--soft);font-size:12.5px;font-weight:600;
  cursor:pointer;font-family:var(--body)}
.pmapp-out:hover{color:var(--ink)}

/* ---- parent dashboard ---- */
.pmshell{max-width:1320px;margin:0 auto;padding:var(--sp-6) var(--sp-5) var(--sp-8);
  display:grid;grid-template-columns:232px 1fr;gap:var(--sp-6);align-items:start}
.pmrail{position:sticky;top:88px;display:flex;flex-direction:column;gap:var(--sp-2)}
.pmrail-card{padding:var(--sp-4);border-radius:var(--r-3);background:var(--clearing);border:1px solid var(--clearing-line)}
.pmkicker{font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--soft)}
.pmrail-kids{display:flex;flex-direction:column;gap:6px;margin-top:var(--sp-3)}
.pmkid-btn{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 10px;border-radius:var(--r-2);
  background:transparent;border:1px solid transparent;text-align:left;width:100%;cursor:pointer}
.pmkid-btn[aria-current="true"]{background:var(--paper2);border-color:var(--clearing-line)}
.pmkid-dot{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  font-size:12.5px;font-weight:700;color:#FFFFFF}
.pmkid-t{flex:1;min-width:0}
.pmkid-t b{display:block;font-size:14.5px;font-weight:600;color:var(--ink)}
.pmkid-t small{display:block;font-size:12px;color:var(--soft)}
.pmrail-nav{display:flex;flex-direction:column;gap:2px;padding:var(--sp-2);border-radius:var(--r-3);
  background:var(--clearing);border:1px solid var(--clearing-line)}
.pmnav-btn{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;padding:0 12px;
  border:0;border-radius:var(--r-2);background:transparent;color:var(--soft);font-size:14.5px;font-weight:600;
  text-align:left;width:100%;cursor:pointer}
.pmnav-btn[aria-current="page"]{background:var(--paper2);color:var(--ink)}
.pmnav-btn span:last-child{font-size:12px;font-weight:600;color:var(--soft)}
.pmrail-note{padding:var(--sp-4);border-radius:var(--r-3);background:var(--paper2);border:1px solid var(--clearing-line)}
.pmrail-note b{font-size:12.5px;font-weight:600;color:var(--ink)}
.pmrail-note p{margin:6px 0 0;font-size:12.5px;line-height:1.5;color:var(--soft)}

.pmmain{min-width:0;display:flex;flex-direction:column;gap:var(--sp-5)}
.pmsec{padding:clamp(20px,3vw,32px);border-radius:var(--r-4);background:var(--clearing);
  border:1px solid var(--clearing-line);box-shadow:var(--e-1)}
.pmsec.rise{animation:riseIn var(--dur-3) var(--ease) both}
.pmsec-top{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap}
.pmsec-top .pmkicker{letter-spacing:.12em;font-size:12px}
.pmweek{font-size:12.5px;font-weight:600;color:var(--soft)}
.pmhead{margin:var(--sp-4) 0 0;max-width:34ch;font-family:'Fraunces',Georgia,serif;font-weight:600;
  font-size:clamp(24px,3.2vw,40px);line-height:1.1;letter-spacing:-.02em;color:var(--ink);text-wrap:pretty}
.pmsub{margin:var(--sp-4) 0 0;max-width:56ch;font-size:15.5px;line-height:1.6;color:var(--soft)}
.pmstats{margin-top:var(--sp-5);display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--sp-3)}
.pmstat{padding:var(--sp-4);border-radius:var(--r-2);background:var(--card);border:1px solid var(--clearing-line)}
.pmstat b{display:block;font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:28px;line-height:1}
.pmstat span{display:block;margin-top:6px;font-size:13px;line-height:1.45;color:var(--soft)}

.pmsec-h{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap}
.pmh2{margin:0;font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:clamp(20px,2.2vw,26px);
  letter-spacing:-.016em;color:var(--ink)}
.pmsec-h p{margin:8px 0 0;max-width:52ch;font-size:14.5px;line-height:1.55;color:var(--soft)}
.pmlegend{display:flex;gap:var(--sp-3);font-size:12px;font-weight:600;color:var(--soft)}
.pmlegend span{display:flex;align-items:center;gap:6px}
.pmlegend i{width:10px;height:10px;border-radius:3px;display:block}
.pmtrends{margin-top:var(--sp-5);display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:var(--sp-4)}
.pmtrend{padding:var(--sp-4);border-radius:var(--r-2);background:var(--card);border:1px solid var(--clearing-line)}
.pmtrend-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.pmtrend-h b{font-size:14.5px;font-weight:700;color:var(--ink)}
.pmtrend-h i{font-style:normal;font-size:12.5px;font-weight:600}
.pmbars{margin-top:var(--sp-3);display:flex;align-items:flex-end;gap:4px;height:56px}
.pmbars i{flex:1;min-height:3px;border-radius:3px 3px 0 0;display:block}
.pmtrend small{display:block;margin-top:10px;font-size:12.5px;line-height:1.5;color:var(--soft)}

.pmtable{border:1px solid var(--clearing-line);border-radius:var(--r-2);overflow:hidden;background:var(--card)}
.pmtr{display:grid;grid-template-columns:88px minmax(200px,1fr) 78px 124px 92px;gap:var(--sp-3);
  padding:var(--sp-4);border-top:1px solid var(--clearing-line);align-items:center;font-size:14px}
.pmtr.head{padding:10px var(--sp-4);border-top:0;background:var(--paper2);font-size:11.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--soft)}
.pmtr-day{font-weight:600;color:var(--soft)}
.pmtr-what{min-width:0}
.pmtr-what b{display:block;font-weight:600;color:var(--ink)}
.pmtr-what small{display:block;margin-top:2px;font-size:13px;color:var(--soft)}
.pmtr-len{color:var(--soft);font-weight:600}
.pmband{display:block;height:6px;border-radius:999px;background:var(--paper2);overflow:hidden}
.pmband i{display:block;height:100%;border-radius:999px;background:var(--blue)}
.pmtr-band{display:block;margin-top:5px;font-size:12px;color:var(--soft)}
.pmtr-why{font-size:13px;font-weight:700}

.pmpair{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:var(--sp-4)}
.pmsec.warm{background:var(--paper2);box-shadow:none;padding:clamp(20px,3vw,28px)}
.pmsec.warm .pmkicker{color:var(--marigold);letter-spacing:.12em;font-size:12px}
.pmh3{margin:var(--sp-3) 0 8px;font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:21px;
  letter-spacing:-.014em;color:var(--ink)}
.pmtoggles{display:flex;flex-direction:column;gap:var(--sp-3)}
.pmtoggle{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4)}
.pmtoggle b{display:block;font-size:14.5px;font-weight:600;color:var(--ink)}
.pmtoggle small{display:block;font-size:13px;line-height:1.45;color:var(--soft)}
.pmswitch{flex:none;width:52px;height:32px;border-radius:999px;border:1px solid var(--clearing-line);
  cursor:pointer;background:var(--paper2);position:relative;transition:background var(--dur-2) var(--ease)}
.pmswitch[aria-checked="true"]{background:var(--green-indicator)}
.pmswitch i{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:var(--card);
  box-shadow:var(--e-1);transition:left var(--dur-2) var(--ease)}
.pmswitch[aria-checked="true"] i{left:25px}

/* The dashboard still needs its real controls — add a child, hand over the device,
   and the data-rights entry point COPPA 312.6 requires to stay easy to find. */
.pmform{display:flex;flex-direction:column;gap:var(--sp-3);margin-top:var(--sp-4)}
.pmform label{display:block;font-size:13px;font-weight:600;color:var(--ink)}
.pmform label small{font-weight:400;color:var(--soft)}
.pmform input,.pmform select{width:100%;margin-top:6px;min-height:44px;padding:0 12px;border-radius:var(--r-2);
  border:1px solid var(--clearing-line);background:var(--card);color:var(--ink);font-family:var(--body);font-size:14.5px}
.pmactions{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-4)}

/* ---- Create hub ---- */
.pmmake{max-width:1180px;margin:0 auto;padding:var(--sp-7) var(--sp-5) var(--sp-8)}
.pmmake-top{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-5);flex-wrap:wrap}
.pmmake-kicker{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--violet)}
.pmmake-h1{margin:var(--sp-4) 0 0;font-family:'Fraunces',Georgia,serif;font-weight:600;
  font-size:clamp(34px,6vw,68px);line-height:1;letter-spacing:-.026em;color:var(--ink)}
.pmsurprise{min-height:52px;padding:0 24px;border-radius:999px;cursor:pointer;background:var(--card);
  border:2px solid var(--violet);color:var(--ink);font-size:16px;font-weight:700;font-family:var(--body)}
.pmsurprise:hover{background:var(--paper2)}
.pmmakers{margin-top:var(--sp-6);display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:var(--sp-4);perspective:1200px}
.pmmaker{text-align:left;padding:0;overflow:hidden;border-radius:var(--r-4);background:var(--card);
  border:2px solid var(--clearing-line);box-shadow:var(--e-1);transform-style:preserve-3d;display:block;
  transition:transform var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease)}
.pmmaker:hover{transform:translateZ(26px) translateY(-4px);box-shadow:var(--e-2);border-color:var(--violet)}
.pmmaker-wash{display:grid;place-items:center;height:150px}
.pmmaker-marks{display:grid;gap:8px}
.pmmaker-marks i{width:22px;height:22px;display:block}
.pmmaker-t{display:block;padding:var(--sp-5)}
.pmmaker-t b{display:block;font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:23px;line-height:1.1;
  letter-spacing:-.016em;color:var(--ink)}
.pmmaker-t span{display:block;margin-top:8px;font-size:15px;line-height:1.5;color:var(--soft)}
.pmmaker-t em{display:flex;align-items:center;gap:8px;margin-top:var(--sp-4);font-style:normal;font-size:13px;
  font-weight:700;color:var(--violet)}
.pmkeep{margin-top:var(--sp-7)}
.pmkeep .pmh2{margin:0 0 var(--sp-4);font-size:clamp(21px,2.6vw,30px);letter-spacing:-.018em}
.pmwips{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--sp-3)}
.pmwip{text-align:left;padding:var(--sp-5);border-radius:var(--r-3);background:var(--clearing);
  border:1px solid var(--clearing-line);display:block;transition:transform var(--dur-2) var(--ease)}
.pmwip:hover{transform:translateY(-3px)}
.pmwip-h{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3)}
.pmwip-h b{font-size:16.5px;font-weight:700;color:var(--ink)}
.pmwip-h span{font-size:12.5px;font-weight:600;color:var(--soft)}
.pmwip p{margin:6px 0 0;font-size:14px;line-height:1.5;color:var(--soft)}
.pmwip-bar{display:block;margin-top:var(--sp-4);height:8px;border-radius:999px;background:var(--paper2);overflow:hidden}
.pmwip-bar i{display:block;height:100%;border-radius:999px;background:var(--violet)}
.pmwip em{display:block;margin-top:8px;font-style:normal;font-size:13px;font-weight:700;color:var(--violet)}
.pmdones{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--sp-3)}
.pmdone{border-radius:var(--r-3);overflow:hidden;background:var(--card);border:1px solid var(--clearing-line)}
.pmdone-t{padding:var(--sp-4)}
.pmdone-t b{font-size:15px;font-weight:700;color:var(--ink)}
.pmdone-t span{display:block;margin-top:4px;font-size:13px;color:var(--soft)}
.pmstop{margin-top:var(--sp-6);padding:clamp(20px,3vw,28px);border-radius:var(--r-4);background:var(--paper2);
  border:1px solid var(--clearing-line);display:flex;flex-wrap:wrap;gap:var(--sp-4);align-items:center;
  justify-content:space-between}
.pmstop div{max-width:46ch}
.pmstop p{margin:8px 0 0;font-size:15px;line-height:1.55;color:var(--soft)}
.pmbtn{min-height:48px;padding:0 22px;border-radius:999px;border:0;cursor:pointer;background:var(--blue);
  color:#FFFFFF;font-size:15.5px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--body)}
.pmbtn.ghost{background:transparent;border:1px solid var(--clearing-line);color:var(--ink)}
.pmbtn.sm{min-height:44px;padding:0 18px;font-size:14.5px}
.pmbtn.block{width:100%}
.pmempty{padding:var(--sp-5);border-radius:var(--r-3);background:var(--card);border:1px solid var(--clearing-line);
  font-size:14.5px;line-height:1.55;color:var(--soft)}

@media (max-width:1024px){
  .pmshell{grid-template-columns:1fr}
  .pmrail{position:static;flex-direction:row;overflow-x:auto}
  .pmrail>*{flex:1 0 auto}
  .pmtr{grid-template-columns:96px 1fr;row-gap:8px}
  .pmtr>*:nth-child(2){grid-column:1/-1}
  .pmtr.head{display:none}
  .pmrail-note{display:none}
}

/* ===================== THE NOTEBOOK — ported from the Claude Design handoff =====================
   `Pebblemind Notebook.dc.html` (index) and `Pebblemind Article.dc.html` (a piece). Both render
   bare and carry their own header, footer and arc, like the landing. The design paused every
   entrance animation and started it on an IntersectionObserver; here the same effect is a single
   `.in` class, which means the page is readable with JavaScript off. */
/* The system reserves Space Mono for meta and labels, and it is already self-hosted. The
   global --mono is a plain system stack, so redefine it for the scope of these pages only
   rather than changing what every other surface means by --mono. */
.nbpage{position:relative;width:100%;min-height:100vh;background:var(--paper);color:var(--ink);
  --mono:'Space Mono',ui-monospace,Menlo,Consolas,monospace}
.nbarc{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,var(--arc-dawn) 0%,var(--arc-day) 18%,var(--arc-dusk) 56%,var(--arc-night) 92%,var(--arc-deep) 100%)}
.nbbody{position:relative;z-index:1}

.nbprog{position:fixed;left:0;top:0;z-index:40;height:3px;width:100%;background:transparent;pointer-events:none}
.nbprog span{display:block;height:100%;width:0;transition:width 90ms linear}

.nbbar{position:sticky;top:0;z-index:30;background:var(--paper);border-bottom:1px solid var(--line)}
.nbbar-in{max-width:1180px;margin:0 auto;padding:10px var(--sp-5);min-height:64px;display:flex;
  align-items:center;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap}
.nbbrand{display:flex;align-items:center;gap:10px;color:var(--blue);min-height:44px}
.nbbrand svg,.nbbrand .brandmark{display:block;width:28px;height:28px;flex:none}
.nbbrand b{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:20px;letter-spacing:-.015em;color:var(--ink)}
.nbbrand span{font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
.nbbar-r{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
.nbwhat{min-height:44px;display:inline-flex;align-items:center;padding:0 12px;font-size:14.5px;font-weight:500;color:var(--soft)}
.nbwhat:hover{color:var(--ink)}
.nbtheme{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0 12px;
  background:var(--paper2);border:1px solid var(--line);border-radius:999px;color:var(--soft);cursor:pointer;
  font-size:12.5px;font-weight:600;font-family:var(--body)}
.nbtheme:hover{color:var(--ink)}
.nbcta{min-height:44px;display:inline-flex;align-items:center;padding:0 16px;white-space:nowrap;border-radius:999px;
  background:var(--blue);color:#FFFFFF;font-weight:600;font-size:14.5px}
.nbcta:hover{color:#FFFFFF}
.nbcta.big{min-height:48px;padding:0 22px;font-size:16px}
.nbghost{min-height:48px;display:inline-flex;align-items:center;padding:0 20px;border-radius:999px;
  border:1px solid var(--clearing-line);color:var(--ink);font-weight:600;font-size:16px}
.nbghost:hover{color:var(--ink);border-color:var(--ink)}

.nbwrap{max-width:720px;margin:0 auto;padding:0 var(--sp-5)}
.nbwrap.wide{max-width:980px}
.nbwrap.narrow{max-width:720px}
.nbhero .nbwrap.wide,.nbwrap.wide.nbgrid-sec{max-width:1180px}

/* ---- index ---- */
.nbhero{position:relative;padding:var(--sp-8) 0 var(--sp-6)}
.nbhero-k{font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--teal)}
.nbhero h1{margin:var(--sp-4) 0 0;max-width:24ch;font-family:'Fraunces',Georgia,serif;font-weight:600;
  font-size:clamp(36px,6vw,78px);line-height:1;letter-spacing:-.028em;color:var(--ink);text-wrap:pretty}
.nbhero-d{margin:var(--sp-5) 0 0;max-width:56ch;font-size:clamp(16px,1.5vw,20px);line-height:1.55;color:var(--soft)}
.nbpromises{margin-top:var(--sp-6);padding:var(--sp-4) 0;border-top:1px solid var(--clearing-line);
  border-bottom:1px solid var(--clearing-line);display:flex;flex-wrap:wrap;gap:var(--sp-4) var(--sp-6)}
.nbpromise{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;color:var(--soft)}
.nbpromise>span{width:9px;height:9px;border-radius:50%;background:var(--green-indicator);flex:none}

.nbfeature{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,4vw,56px);
  align-items:center;padding:clamp(24px,4vw,48px);border-radius:var(--r-4);background:var(--clearing);
  border:1px solid var(--clearing-line);box-shadow:var(--e-2);margin-bottom:var(--sp-7)}
.nbfeature-h{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3)}
.nbfirst{padding:6px 12px;border-radius:999px;background:var(--blue);color:#FFFFFF;font-size:11.5px;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.nbfeature-m{font-family:var(--mono);font-size:12px;color:var(--soft)}
.nbfeature h2{margin:var(--sp-4) 0 0;font-family:'Fraunces',Georgia,serif;font-weight:600;
  font-size:clamp(28px,3.6vw,46px);line-height:1.04;letter-spacing:-.024em;text-wrap:pretty}
.nbfeature h2 a{color:var(--ink)}
.nbfeature h2 a:hover{color:var(--blue)}
.nbfeature-d{margin:var(--sp-4) 0 0;max-width:54ch;font-size:17px;line-height:1.6;color:var(--soft)}
.nbfeature-cta{margin-top:var(--sp-5);display:flex;flex-wrap:wrap;gap:var(--sp-3)}
.nbhundred{padding:var(--sp-5);border-radius:var(--r-3);background:var(--paper2);border:1px solid var(--clearing-line)}
.nbhundred-k{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--soft)}
.nbhundred-grid{margin-top:var(--sp-4);display:grid;grid-template-columns:repeat(10,1fr);gap:3px}
.nbhundred-s{margin-top:var(--sp-4);display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.nbhundred-s span:first-child{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:34px;line-height:1;color:var(--pink)}
.nbhundred-s span:last-child{font-size:13.5px;line-height:1.45;color:var(--soft)}
.nbhundred-n{margin-top:10px;font-size:12px;line-height:1.5;color:var(--soft)}

.nbgrid-h{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;margin-bottom:var(--sp-5)}
.nbgrid-h h2{margin:0;font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:clamp(24px,3vw,38px);
  letter-spacing:-.022em;color:var(--ink)}
.nbgrid-h span{font-size:14px;color:var(--soft)}
.nbgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(292px,1fr));gap:var(--sp-4);padding-bottom:var(--sp-7)}
.nbc{display:flex;flex-direction:column;padding:var(--sp-5);border-radius:var(--r-3);background:var(--clearing);
  border:1px solid var(--clearing-line);box-shadow:var(--e-1);color:var(--ink);
  transition:transform var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease)}
.nbc:hover{color:var(--ink);transform:translateY(-3px);border-color:var(--ink)}
.nbc-h{display:flex;align-items:center;justify-content:space-between;gap:10px}
.nbc-k{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.nbc-r{font-family:var(--mono);font-size:11.5px;color:var(--soft)}
.nbc-spark{margin-top:var(--sp-5);display:flex;align-items:flex-end;gap:6px;height:54px}
.nbc-spark span{flex:1;border-radius:3px 3px 0 0;display:block}
.nbc-t{margin-top:var(--sp-5);font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:21px;
  line-height:1.14;letter-spacing:-.016em;color:var(--ink);text-wrap:pretty}
.nbc-b{margin-top:10px;font-size:15px;line-height:1.55;color:var(--soft)}
.nbc-f{margin-top:auto;padding-top:var(--sp-4);display:flex;align-items:center;justify-content:space-between;
  gap:10px;font-family:var(--mono);font-size:11.5px;color:var(--soft)}

/* ---- article ---- */
.nbwrap.head{padding-top:var(--sp-8);padding-bottom:var(--sp-6);max-width:980px}
.nbcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--soft)}
.nbcrumb a{color:var(--soft)}
.nbcrumb a:hover{color:var(--ink)}
.nbwrap.head h1{margin:var(--sp-5) 0 0;max-width:26ch;font-family:'Fraunces',Georgia,serif;font-weight:600;
  font-size:clamp(34px,5.4vw,68px);line-height:1.02;letter-spacing:-.028em;color:var(--ink);text-wrap:pretty}
.nbdek{margin:var(--sp-5) 0 0;max-width:58ch;font-size:clamp(17px,1.6vw,21px);line-height:1.55;color:var(--soft)}
.nbmeta{margin-top:var(--sp-6);padding:var(--sp-4) 0;border-top:1px solid var(--clearing-line);
  border-bottom:1px solid var(--clearing-line);display:flex;flex-wrap:wrap;gap:var(--sp-3) var(--sp-5);
  font-family:var(--mono);font-size:12px;color:var(--soft)}
.nbtldr{padding:clamp(20px,3vw,34px);border-radius:var(--r-4);background:var(--paper2);border:1px solid var(--clearing-line)}
.nbtldr-k{font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.nbtldr-rows{margin-top:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-4)}
.nbtldr-row{display:grid;grid-template-columns:26px minmax(0,1fr);gap:var(--sp-3)}
.nbtldr-row>span:first-child{font-family:'Fraunces',Georgia,serif;font-weight:600}
.nbtldr-row>span:last-child{font-size:16.5px;line-height:1.55;color:var(--ink)}
.nbchips{margin-top:var(--sp-4);display:flex;flex-wrap:wrap;gap:var(--sp-2);padding-bottom:var(--sp-5)}
.nbchip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:999px;
  background:var(--clearing);border:1px solid var(--clearing-line);font-size:13.5px;font-weight:600;color:var(--soft)}
.nbchip:hover{color:var(--ink);border-color:var(--ink)}
.nbchip span{font-family:var(--mono);font-size:11px}

.nbh2{margin-top:var(--sp-7)}
.nbh2-rule{display:flex;align-items:center;gap:var(--sp-4)}
.nbh2-rule>span:first-child{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.16em}
.nbh2-rule>span:last-child{flex:1;height:1px}
.nbh2 h2{margin:var(--sp-4) 0 0;font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:clamp(26px,3.4vw,40px);
  line-height:1.08;letter-spacing:-.022em;color:var(--ink);text-wrap:pretty;scroll-margin-top:88px}
.nbp{margin:var(--sp-4) 0 0;font-size:17.5px;line-height:1.68;color:var(--ink)}
.nbdrop{float:left;margin:6px 12px 0 0;font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:64px;
  line-height:.78;letter-spacing:-.03em}
.nbpull{margin:var(--sp-7) 0 var(--sp-6);padding:0;display:grid;grid-template-columns:6px minmax(0,1fr);gap:clamp(20px,3vw,34px)}
.nbpull>span{border-radius:999px}
.nbpull blockquote{margin:0;font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:clamp(24px,3.4vw,40px);
  line-height:1.14;letter-spacing:-.022em;color:var(--ink);text-wrap:pretty}

.nbfig{margin:var(--sp-5) 0 0}
.nbfig-in{padding:clamp(20px,3vw,36px);border-radius:var(--r-4);background:var(--clearing);
  border:1px solid var(--clearing-line);box-shadow:var(--e-1)}
.nbfig-t{font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
.nbcap{margin:var(--sp-3) 0 0;font-size:13px;line-height:1.6;color:var(--soft)}
.nbdots{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:clamp(20px,4vw,48px);align-items:center}
.nbdots-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:3px}
.nbdots-h{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.nbdots-v{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:clamp(40px,5vw,60px);line-height:.95;letter-spacing:-.03em}
.nbdots-l{font-size:16px;font-weight:600;color:var(--ink)}
.nbdots-b{margin:var(--sp-4) 0 0;font-size:16px;line-height:1.6;color:var(--soft)}
.nbbars{margin-top:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-4)}
.nbbar-h{display:flex;justify-content:space-between;gap:var(--sp-4);font-size:14.5px;font-weight:600;color:var(--ink)}
.nbbar-t{margin-top:8px;height:13px;border-radius:999px;background:var(--paper2);overflow:hidden}
.nbbar-t span{display:block;height:100%;border-radius:999px}
.nbstack{margin-top:var(--sp-4);display:flex;height:46px;border-radius:999px;overflow:hidden;border:1px solid var(--clearing-line)}
.nbkeys{margin-top:var(--sp-4);display:flex;flex-wrap:wrap;gap:10px var(--sp-5)}
.nbkey{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--soft)}
.nbkey>span{width:12px;height:12px;border-radius:3px;flex:none}
.nbnotes{margin-top:var(--sp-5);padding-top:var(--sp-4);border-top:1px solid var(--clearing-line);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:var(--sp-5)}
.nbnote-tag{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.nbnote-t{margin-top:8px;font-size:15.5px;font-weight:600;color:var(--ink)}
.nbnote-b{margin:6px 0 0;font-size:14.5px;line-height:1.55;color:var(--soft)}
.nbladder-h{display:flex;justify-content:space-between;gap:var(--sp-4);font-family:var(--mono);font-size:11.5px;
  font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.nbrungs{margin-top:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-3)}
.nbrung{display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:var(--sp-4);align-items:center;
  padding:var(--sp-4);border-radius:var(--r-2);border:1px solid var(--clearing-line)}
.nbrung-l{font-size:16px;font-weight:600;color:var(--ink)}
.nbrung-n{margin-top:4px;font-size:14px;line-height:1.5;color:var(--soft)}
.nbrung-m{display:flex;align-items:center;gap:10px}
.nbrung-t{flex:1;height:10px;border-radius:999px;background:var(--paper2);overflow:hidden}
.nbrung-t span{display:block;height:100%;border-radius:999px}
.nbrung-tag{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.nbvs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-4) clamp(16px,3vw,40px)}
.nbvs-h{font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--soft)}
.nbvs-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(16px,3vw,40px);
  grid-column:1/-1;padding-top:var(--sp-4);border-top:1px solid var(--clearing-line)}
.nbvs-l{font-size:15.5px;line-height:1.5;color:var(--soft)}
.nbvs-r{font-size:15.5px;line-height:1.5;font-weight:600;color:var(--ink)}
.nbstats{margin:var(--sp-5) 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--sp-4)}
.nbstat{padding:var(--sp-5);border-radius:var(--r-3);background:var(--paper2);border:1px solid var(--clearing-line)}
.nbstat-v{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:clamp(30px,3.4vw,44px);line-height:.98;letter-spacing:-.026em}
.nbstat-k{margin-top:10px;font-size:14.5px;line-height:1.5;color:var(--soft)}
.nbcards{margin:var(--sp-5) 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--sp-4)}
.nbcard{display:flex;flex-direction:column;padding:var(--sp-5);border-radius:var(--r-3);background:var(--paper2);border:1px solid var(--clearing-line)}
.nbcard-k{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.nbcard-t{margin-top:10px;font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:21px;line-height:1.14;color:var(--ink);text-wrap:pretty}
.nbcard-b{margin:auto 0 0;padding-top:var(--sp-4);font-size:15px;line-height:1.55;color:var(--soft)}
.nbsteps{margin:var(--sp-5) 0 0;display:flex;flex-direction:column;gap:var(--sp-4)}
.nbstep{display:grid;grid-template-columns:44px minmax(0,1fr);gap:var(--sp-4);align-items:start}
.nbstep-n{width:40px;height:40px;border-radius:999px;display:grid;place-items:center;color:#FFFFFF;
  font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:18px}
.nbstep-t{font-size:17.5px;font-weight:600;color:var(--ink)}
.nbstep-b{margin:6px 0 0;font-size:16.5px;line-height:1.6;color:var(--soft)}
.nbtl{margin:var(--sp-5) 0 0;display:flex;flex-direction:column;gap:var(--sp-3)}
.nbtl-row{display:grid;grid-template-columns:88px minmax(0,1fr) 150px;gap:var(--sp-4);align-items:center;
  padding:var(--sp-4) var(--sp-5);border-radius:var(--r-3);background:var(--clearing);border:1px solid var(--clearing-line)}
.nbtl-age{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:clamp(24px,2.6vw,32px);line-height:1;letter-spacing:-.02em}
.nbtl-t{font-size:16.5px;font-weight:600;color:var(--ink)}
.nbtl-b{margin:5px 0 0;font-size:15px;line-height:1.55;color:var(--soft)}
.nbtl-bar{height:10px;border-radius:999px;background:var(--paper2);overflow:hidden}
.nbtl-bar span{display:block;height:100%;border-radius:999px}

.nbfaq-h{margin:var(--sp-7) 0 0;font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:clamp(26px,3.4vw,40px);
  line-height:1.08;letter-spacing:-.022em;color:var(--ink);text-wrap:pretty;scroll-margin-top:88px}
.nbfaqs{margin-top:var(--sp-4);display:flex;flex-direction:column}
.nbfaq{display:grid;grid-template-columns:34px minmax(0,1fr);gap:var(--sp-4);padding:var(--sp-5) 0;border-top:1px solid var(--clearing-line)}
.nbfaq>span{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--paper2);
  border:1px solid var(--clearing-line);font-family:var(--mono);font-size:12px;font-weight:700}
.nbfaq h3{margin:0;font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:20px;line-height:1.2;
  letter-spacing:-.014em;color:var(--ink)}
.nbfaq p{margin:10px 0 0;font-size:16.5px;line-height:1.62;color:var(--soft)}
.nbsrcs{margin-top:var(--sp-7);padding:clamp(20px,3vw,36px);border-radius:var(--r-4);background:var(--paper2);border:1px solid var(--clearing-line)}
.nbsrcs-list{margin-top:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-4)}
.nbsrc{display:flex;flex-direction:column;gap:4px;padding-top:var(--sp-4);border-top:1px solid var(--clearing-line)}
.nbsrc-c{font-size:15.5px;font-weight:600;line-height:1.45;color:var(--ink)}
.nbsrc-w{font-size:14.5px;line-height:1.55;color:var(--soft)}
.nbsrc-v{font-size:13.5px;line-height:1.55;color:var(--pink)}

.nbnotebox{margin-top:var(--sp-7);padding:clamp(24px,4vw,48px);border-radius:var(--r-4);background:var(--clearing);
  border:1px solid var(--clearing-line);box-shadow:var(--e-2)}
.nbnotebox h2{margin:0;max-width:42ch;font-family:'Fraunces',Georgia,serif;font-weight:600;
  font-size:clamp(24px,3.2vw,40px);line-height:1.06;letter-spacing:-.022em;color:var(--ink);text-wrap:pretty}
.nbnotebox p{margin:var(--sp-4) 0 0;max-width:52ch;font-size:16.5px;line-height:1.6;color:var(--soft)}
.nbnote-cta{margin-top:var(--sp-5);display:flex;flex-wrap:wrap;gap:var(--sp-4);align-items:center}
.nbnote-cta>span{flex:1 1 260px;font-size:13.5px;line-height:1.6;color:var(--soft)}
.nbkeep{padding-top:var(--sp-7);padding-bottom:var(--sp-8)}
.nbrels{margin-top:var(--sp-4);display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--sp-4)}
.nbrel{display:flex;flex-direction:column;padding:var(--sp-5);border-radius:var(--r-3);background:var(--clearing);
  border:1px solid var(--clearing-line);color:var(--ink)}
.nbrel:hover{color:var(--ink);border-color:var(--ink)}
.nbrel-k{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.nbrel-t{margin-top:10px;font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:19px;line-height:1.16;text-wrap:pretty}
.nbrel-m{margin-top:auto;padding-top:var(--sp-4);font-family:var(--mono);font-size:11.5px;color:var(--soft)}
.nball{margin-top:var(--sp-5)}
.nball a{min-height:44px;display:inline-flex;align-items:center;font-size:15.5px;font-weight:600;color:var(--ink)}
.nball a:hover{color:var(--blue)}
.nbfoot{position:relative;border-top:1px solid var(--clearing-line);background:var(--paper);padding:var(--sp-6) var(--sp-5)}
.nbfoot>div{max-width:1180px;margin:0 auto;display:flex;flex-wrap:wrap;gap:var(--sp-4);justify-content:space-between;
  font-size:13px;color:var(--soft)}
.nbfoot a{color:var(--soft)}
.nbfoot a:hover{color:var(--ink)}

/* Entrances. Without JS every [data-anim] simply stays visible — the script adds .in. */
.js [data-anim]{opacity:0;transform:translateY(22px)}
.js [data-anim].in{opacity:1;transform:none;transition:opacity 620ms var(--ease),transform 620ms var(--ease)}

@media (max-width:900px){
  .nbfeature{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:820px){
  .nbdots{grid-template-columns:minmax(0,1fr)}
  .nbrung{grid-template-columns:minmax(0,1fr);row-gap:10px}
  .nbtl-row{grid-template-columns:64px minmax(0,1fr)}
  .nbtl-bar{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){
  .js [data-anim]{opacity:1;transform:none}
  .nbprog span{transition:none}
}