/* ============================================================
   MOMO — shared stylesheet (all pages)
   Brand: navy #05090F · gold #D4AF37 (--accent) · Cinzel / Poppins / Space Mono
   ============================================================ */

/* ---------- accent system ----------
   Every gold accent below reads from these variables. html[data-accent="..."] (set by
   gate.js from the account's admin-granted theme, accounts.html) swaps the whole family.
   Default = the MOMO brand gold. */
:root {
  --accent:#D4AF37;            --accent-rgb:212,175,55;
  --accent-bright:#ECD27E;     --accent-bright-rgb:236,210,126;
  --accent-hi:#F0D680;         /* btn-gold gradient top */
  --accent-lo:#B8941F;         /* btn-gold gradient bottom */
  --accent-shadow:#8F6B1A;     /* btn-gold hard shadow */
}
html[data-accent="emerald"] {
  --accent:#43C990;            --accent-rgb:67,201,144;
  --accent-bright:#8FE7C0;     --accent-bright-rgb:143,231,192;
  --accent-hi:#A9F0CF; --accent-lo:#2FA774; --accent-shadow:#1E7050;
}
html[data-accent="ruby"] {
  --accent:#E15A72;            --accent-rgb:225,90,114;
  --accent-bright:#F2A0AE;     --accent-bright-rgb:242,160,174;
  --accent-hi:#F7B8C2; --accent-lo:#C13D55; --accent-shadow:#8A2338;
}
html[data-accent="violet"] {
  --accent:#9D7BEA;            --accent-rgb:157,123,234;
  --accent-bright:#C3ABF5;     --accent-bright-rgb:195,171,245;
  --accent-hi:#D4C2F8; --accent-lo:#7E5CD1; --accent-shadow:#58399E;
}
html[data-accent="ocean"] {
  --accent:#4FB6E6;            --accent-rgb:79,182,230;
  --accent-bright:#9AD7F2;     --accent-bright-rgb:154,215,242;
  --accent-hi:#B7E3F6; --accent-lo:#338FBF; --accent-shadow:#1F648A;
}

html, body { background:#020306; }
body { font-family:'Poppins', system-ui, sans-serif; color:#F2E9D8; -webkit-font-smoothing:antialiased; position:relative; }

/* MOMO site background: a black-led, low-distraction adaptation of the
   21st.dev Animated Gradient/WebGL pattern. */
body[data-page] { isolation:isolate; overflow-x:hidden; }
body[data-page] .momo-gradient-canvas {
  position:fixed; inset:0; z-index:0; width:100%; height:100%; pointer-events:none;
  opacity:.58;
  background:
    radial-gradient(ellipse at 72% 20%, rgba(120,86,22,.14), transparent 46%),
    radial-gradient(ellipse at 28% 80%, rgba(18,21,26,.2), transparent 58%),
    #010205;
}
body[data-page] .momo-gradient-canvas.is-fallback { animation:none; }
body[data-page] > .bg-fx,
body[data-page] > .grain { z-index:1; }
body[data-page] > .site-head,
body[data-page] > #main,
body[data-page] > footer { position:relative; z-index:3; }
body[data-page] > .site-head {
  background:rgba(5,9,15,.6);
  border-bottom-color:rgba(var(--accent-rgb),.28);
  backdrop-filter:blur(16px);
}
body[data-page] .card {
  background:rgba(7,16,27,.78);
  backdrop-filter:blur(14px);
}
body[data-page] .key-reliability {
  background:linear-gradient(135deg,rgba(var(--accent-rgb),.16),rgba(9,27,43,.62));
}
@media (prefers-reduced-motion:reduce) {
  body[data-page] .momo-gradient-canvas { opacity:.48; }
}

::selection { background:rgba(var(--accent-rgb),.32); color:#fff; }

.bg-fx { position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 112px 220px at 8% 58%, transparent 0 94px, rgba(var(--accent-rgb),.036) 95px 96px, transparent 97px 110px, rgba(var(--accent-rgb),.022) 111px 112px, transparent 113px),
    radial-gradient(circle at 88% 26%, transparent 0 52px, rgba(var(--accent-rgb),.038) 53px 54px, transparent 55px 86px, rgba(var(--accent-rgb),.024) 87px 88px, transparent 89px 120px, rgba(var(--accent-rgb),.016) 121px 122px, transparent 123px),
    linear-gradient(30deg, rgba(var(--accent-bright-rgb),.018) 1px, transparent 1px) 0 0 / 72px 42px,
    linear-gradient(150deg, rgba(var(--accent-bright-rgb),.014) 1px, transparent 1px) 0 0 / 72px 42px,
    radial-gradient(900px 540px at 80% -10%, rgba(var(--accent-rgb),.12), transparent 60%),
    radial-gradient(720px 520px at 6% 2%, rgba(33,86,107,.16), transparent 58%),
    radial-gradient(680px 600px at 50% 120%, rgba(163,59,55,.08), transparent 60%); }
.grain { position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
main, header, footer { position:relative; z-index:1; }

.container-x { width:100%; max-width:1120px; margin-inline:auto; padding-inline:1.5rem; }

/* the hidden attribute must always win — some components set display:flex */
[hidden] { display:none !important; }

.display { font-family:'Cinzel', serif; }
h2.section { font-family:'Cinzel', serif; font-weight:700; font-size:1.1rem; color:#F2E9D8; display:flex; align-items:center; gap:.6rem; }
h2.section::before { content:""; width:16px; height:1.5px; background:linear-gradient(90deg,var(--accent),transparent); display:inline-block; }

.eyebrow { font-family:'Space Mono',monospace; font-size:.64rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); }
.mono { font-family:'Space Mono',monospace; }

/* ---------- cards (quiet: fade-up in, gentle lift on hover) ---------- */
/* elevation scale — consistent resting depth + inset top highlight for material feel */
.card  { background:
    radial-gradient(440px 170px at 12% -18%, rgba(var(--accent-rgb),.105), transparent 62%),
    linear-gradient(112deg, rgba(255,255,255,.024) 0%, transparent 34%),
    linear-gradient(180deg,#0B1828,#081320);
  border:1px solid #173049; border-radius:16px;
  box-shadow:inset 0 1px 0 rgba(var(--accent-bright-rgb),.05), 0 10px 30px -24px rgba(0,0,0,.9); }
.card-2{ background:
    radial-gradient(320px 140px at 92% -20%, rgba(var(--accent-rgb),.072), transparent 64%),
    linear-gradient(180deg,#0B1725,#09131F);
  border:1px solid #14283C; border-radius:14px;
  box-shadow:inset 0 1px 0 rgba(var(--accent-bright-rgb),.04); }
@keyframes fadeUp { from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none;} }
main .card { animation:fadeUp .5s ease both; }
.card, .card-2 { transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.card:hover { transform:translateY(-3px); border-color:rgba(var(--accent-rgb),.45);
  box-shadow:inset 0 1px 0 rgba(var(--accent-bright-rgb),.07), 0 18px 40px -22px rgba(0,0,0,.9); }
.card-2:hover { transform:translateY(-2px); border-color:rgba(var(--accent-rgb),.35);
  box-shadow:inset 0 1px 0 rgba(var(--accent-bright-rgb),.06), 0 14px 30px -24px rgba(0,0,0,.85); }
/* keyboard focus for clickable card blocks (they are <a>) */
.card:focus-visible, .card-2:focus-visible { outline:2px solid var(--accent-bright); outline-offset:3px;
  border-color:rgba(var(--accent-rgb),.55); }

/* ---------- buttons ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-family:'Poppins',sans-serif;
  font-weight:600; border-radius:999px; min-height:44px; touch-action:manipulation;
  transition:transform .15s ease, filter .15s ease; cursor:pointer; border:none; }
.btn:focus-visible { outline:2px solid var(--accent-bright); outline-offset:2px; }

/* ---------- global focus + skip link (accessibility baseline) ---------- */
/* visible keyboard focus on any inline link that has no dedicated state above */
a:focus-visible { outline:2px solid var(--accent-bright); outline-offset:3px; border-radius:6px; }
.skip-link { position:absolute; left:12px; top:-56px; z-index:100; background:#0E2236;
  border:1px solid rgba(var(--accent-rgb),.55); color:#F2E9D8; font-size:.85rem; font-weight:600;
  padding:.55rem 1rem; border-radius:9px; transition:top .18s ease; }
.skip-link:focus { top:12px; outline:2px solid var(--accent-bright); outline-offset:2px; }
.btn:hover:not([disabled]) { transform:translateY(-1px); }
.btn:active:not([disabled]) { transform:translateY(1px); }
.btn[disabled]{ opacity:.4; cursor:not-allowed; filter:grayscale(.3); }
.btn-gold { color:#1A1205; padding:.6rem 1.25rem; background:linear-gradient(180deg,var(--accent-hi) 0%,var(--accent) 52%,var(--accent-lo) 100%); box-shadow:0 2px 0 var(--accent-shadow), 0 6px 14px -6px rgba(var(--accent-rgb),.5); }
.btn-gold:hover:not([disabled]) { filter:brightness(1.05); }
.btn-ghost { background:transparent; color:#F2E9D8; border:1px solid rgba(var(--accent-rgb),.4); padding:.5rem 1rem; }
.btn-ghost:hover { background:rgba(var(--accent-rgb),.10); border-color:rgba(var(--accent-rgb),.7); }
.btn-danger { background:transparent; color:#E9A29E; border:1px solid rgba(163,59,55,.55); padding:.5rem 1rem; }
.btn-danger:hover { background:rgba(163,59,55,.14); }

/* ---------- site header / nav ---------- */
.site-head { position:sticky; top:0; z-index:30; border-bottom:1px solid #173049; background:rgba(5,9,15,.9); backdrop-filter:blur(10px);
  box-shadow:0 12px 30px -26px rgba(0,0,0,.96), 0 1px 0 rgba(var(--accent-rgb),.025); }
/* Header layout lives HERE (not Tailwind) so the nav text never wraps onto a second line,
   even when the Tailwind CDN is slow or blocked: one row, logo pinned, links scroll sideways. */
.site-head .container-x { height:4rem; display:flex; flex-wrap:nowrap; align-items:center;
  justify-content:space-between; gap:1rem; min-width:0; }
.site-head .container-x > a[aria-label] { flex-shrink:0; display:flex; align-items:center; }
.site-nav { min-width:0; flex:0 1 auto; }
.site-nav { display:flex; align-items:center; gap:.25rem; overflow-x:auto; scrollbar-width:none; }
.site-nav::-webkit-scrollbar { display:none; }
.site-nav a { position:relative; display:inline-flex; align-items:center; min-height:44px; white-space:nowrap; padding:.45rem .8rem;
  font-size:.85rem; font-weight:500; color:#CFC3A6; border-radius:8px; touch-action:manipulation;
  transition:color .15s ease, background-color .15s ease; }
/* the admin nav carries 13 links (incl. Accounts + Updates) — tighten them so none clip on desktop */
html.role-admin .site-nav { gap:.1rem; }
html.role-admin .site-nav a { padding:.45rem .42rem; font-size:.8rem; }
.site-nav a:hover { color:#F2E9D8; background:rgba(var(--accent-rgb),.08); }
.site-nav a:focus-visible { outline:2px solid var(--accent-bright); outline-offset:-2px; color:#F2E9D8; }
.site-nav a::after { content:""; position:absolute; left:.8rem; right:.8rem; bottom:2px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--accent-bright),#9C7C28); transform:scaleX(0); transform-origin:left; transition:transform .2s ease; }
.site-nav a[aria-current="page"] { color:var(--accent-bright); background:rgba(var(--accent-rgb),.055); }
.site-nav a[aria-current="page"]::after { transform:scaleX(1); }
body[data-page="home"]      .site-nav a[data-nav="home"],
body[data-page="oracle"]    .site-nav a[data-nav="oracle"],
body[data-page="mock"]      .site-nav a[data-nav="mock"],
body[data-page="study"]     .site-nav a[data-nav="study"],
body[data-page="games"]     .site-nav a[data-nav="games"],
body[data-page="premium"]   .site-nav a[data-nav="premium"],
body[data-page="roadmap"]   .site-nav a[data-nav="roadmap"],
body[data-page="settings"]  .site-nav a[data-nav="settings"],
body[data-page="homework"]  .site-nav a[data-nav="homework"],
body[data-page="calendar"]  .site-nav a[data-nav="calendar"],
body[data-page="pipelines"] .site-nav a[data-nav="pipelines"],
body[data-page="voice"]     .site-nav a[data-nav="voice"] { color:var(--accent-bright); }
body[data-page="home"]      .site-nav a[data-nav="home"]::after,
body[data-page="oracle"]    .site-nav a[data-nav="oracle"]::after,
body[data-page="mock"]      .site-nav a[data-nav="mock"]::after,
body[data-page="study"]     .site-nav a[data-nav="study"]::after,
body[data-page="games"]     .site-nav a[data-nav="games"]::after,
body[data-page="premium"]   .site-nav a[data-nav="premium"]::after,
body[data-page="roadmap"]   .site-nav a[data-nav="roadmap"]::after,
body[data-page="settings"]  .site-nav a[data-nav="settings"]::after,
body[data-page="homework"]  .site-nav a[data-nav="homework"]::after,
body[data-page="calendar"]  .site-nav a[data-nav="calendar"]::after,
body[data-page="pipelines"] .site-nav a[data-nav="pipelines"]::after,
body[data-page="voice"]     .site-nav a[data-nav="voice"]::after { transform:scaleX(1); }

/* ---------- roles: admin-only features (Calendar / Pipelines / Voice / LMS) ----------
   Hidden for everyone by default; gate.js adds .role-admin on <html> for admin accounts.
   Cosmetic only — the APIs 403 non-admins server-side regardless. */
.admin-only { display:none !important; }
.role-admin .admin-only { display:revert !important; }
/* revert computes <a> back to inline, and as a flex item that blockifies — the nav text
   then sits at the top of its 44px box while normal links stay centered (the "words at
   different heights" bug). Re-assert the real display for revealed admin links. */
.role-admin .site-nav a.admin-only { display:inline-flex !important; }
.role-admin a.card.admin-only, .role-admin a.card-2.admin-only { display:block !important; }
/* Full admin pages are static shells, so keep every visible child hidden until gate.js
   verifies the session server-side. The sign-in / locked overlays are explicitly exempt. */
html[data-admin-only] body > :not(#momoGate):not(#momoGateLocked) { visibility:hidden; }
html[data-admin-only].private-page-authorized body > :not(#momoGate):not(#momoGateLocked) { visibility:visible; }
/* Retired account feature: hide the nav entry and admin home card before JS runs. */
html .site-nav a[data-nav="voice"],
html.role-admin .site-nav a[data-nav="voice"],
html [data-feature="voice"],
html.role-admin a.card[data-feature="voice"] { display:none !important; }

/* account chip in the nav (signed-in email + switch account) */
.nav-account { display:inline-flex; align-items:center; min-height:44px; white-space:nowrap; margin-left:.35rem;
  padding:.3rem .75rem; font-size:.72rem; font-weight:500; font-family:'Space Mono',monospace; color:#9FB1C4;
  background:transparent; border:1px solid #24405d; border-radius:999px; cursor:pointer; touch-action:manipulation;
  transition:color .15s ease, border-color .15s ease; }
.nav-account:hover { color:var(--accent-bright); border-color:rgba(var(--accent-rgb),.6); }
.nav-account:focus-visible { outline:2px solid var(--accent-bright); outline-offset:2px; }

/* ---------- page header band ---------- */
.page-head { padding:2.2rem 0 1.6rem; border-bottom:1px solid transparent;
  background:linear-gradient(90deg, rgba(var(--accent-rgb),.58) 0 64px, rgba(var(--accent-rgb),.16) 64px 38%, transparent 76%) left bottom / 100% 1px no-repeat; }
.page-head h1 { font-family:'Cinzel',serif; font-weight:700; font-size:clamp(1.55rem, 1.15rem + 2vw, 2.1rem); line-height:1.14; letter-spacing:-.01em; color:#F2E9D8; margin-top:.55rem; }
.page-head p { font-size:.92rem; line-height:1.6; color:#E6DBC3; margin-top:.5rem; max-width:60ch; }

/* ---------- certificate roadmap ---------- */
.roadmap-disclaimer { display:flex; align-items:flex-start; gap:.85rem; margin-top:1.2rem; padding:1rem 1.1rem;
  border-left:2px solid var(--accent); background:rgba(var(--accent-rgb),.055); }
.roadmap-disclaimer-mark { display:grid; place-items:center; flex:0 0 1.55rem; width:1.55rem; height:1.55rem;
  margin-top:.1rem; border:1px solid rgba(var(--accent-rgb),.55); border-radius:50%; color:var(--accent-bright);
  font:700 .72rem 'Space Mono',monospace; }
.roadmap-disclaimer p { margin:0; color:#CFC3A6; font-size:.78rem; line-height:1.6; }
.roadmap-disclaimer strong { color:#F2E9D8; }
.roadmap-overview { margin-top:1.2rem; padding:1.35rem; }
.roadmap-overview-head { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; }
.roadmap-overview-head h2 { margin-top:.5rem; }
.roadmap-total { flex:0 0 auto; text-align:right; color:var(--accent-bright); font:700 .7rem 'Space Mono',monospace; letter-spacing:.08em; text-transform:uppercase; }
.roadmap-total strong { display:block; color:#F2E9D8; font:700 1.55rem 'Cinzel',serif; letter-spacing:0; text-transform:none; }
.roadmap-progress { height:8px; margin-top:1.15rem; overflow:hidden; border:1px solid #14283C; border-radius:999px; background:#08131F; }
.roadmap-progress span { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#9C7C28,var(--accent-bright)); transition:width .35s ease; }
.roadmap-subject-mini-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; margin-top:1.1rem; }
.roadmap-subject-mini { min-width:0; padding:.8rem .9rem; border:1px solid #173049; border-radius:12px; background:#07101B; }
.roadmap-subject-mini__head { display:flex; justify-content:space-between; gap:.75rem; align-items:baseline; }
.roadmap-subject-mini__name { min-width:0; overflow:hidden; color:#F2E9D8; font-size:.78rem; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
.roadmap-subject-mini__meta { flex:0 0 auto; color:var(--accent-bright); font:700 .62rem 'Space Mono',monospace; }
.roadmap-subject-mini__meter { height:4px; margin-top:.6rem; border-radius:999px; background:#0E2236; overflow:hidden; }
.roadmap-subject-mini__meter span { display:block; width:0; height:100%; border-radius:inherit; background:var(--accent); transition:width .35s ease; }
.roadmap-layout { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr); align-items:start; gap:1.2rem; margin-top:1.2rem; }
.roadmap-subjects { display:grid; gap:1.2rem; min-width:0; }
.roadmap-subject { min-width:0; padding:1.35rem; }
.roadmap-subject-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; }
.roadmap-subject-heading { display:flex; align-items:flex-start; gap:.8rem; min-width:0; }
.roadmap-subject-mark { display:grid; place-items:center; flex:0 0 2.4rem; width:2.4rem; height:2.4rem; border-radius:11px;
  color:#1A1205; background:linear-gradient(180deg,var(--accent-hi),var(--accent)); font:700 .7rem 'Space Mono',monospace; }
.roadmap-subject-title { min-width:0; margin:.38rem 0 0; color:#F2E9D8; font:700 1.08rem/1.25 'Cinzel',serif; }
.roadmap-subject-progress { flex:0 0 auto; min-width:5.4rem; text-align:right; }
.roadmap-subject-progress strong { display:block; color:var(--accent-bright); font:700 1.25rem 'Cinzel',serif; }
.roadmap-subject-progress span { display:block; margin-top:.18rem; color:#8F9CAF; font:700 .6rem 'Space Mono',monospace; letter-spacing:.06em; }
.roadmap-subject-note { margin:.95rem 0 0; color:#9FB1C4; font-size:.78rem; line-height:1.55; }
.roadmap-subject-meter { height:6px; margin-top:.85rem; overflow:hidden; border:1px solid #14283C; border-radius:999px; background:#08131F; }
.roadmap-subject-meter span { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#9C7C28,var(--accent-bright)); transition:width .35s ease; }
.roadmap-task-list { display:grid; gap:.55rem; margin:1.05rem 0 .85rem; padding:0; list-style:none; }
.roadmap-empty { padding:.8rem .7rem; border:1px dashed #29425A; border-radius:10px; color:#8F9CAF; font-size:.76rem; line-height:1.5; }
.roadmap-protection { margin-top:.9rem; padding:.8rem .9rem; border:1px solid rgba(221,178,70,.35); border-radius:11px; background:rgba(156,124,40,.08); }
.roadmap-protection__heading { display:flex; align-items:center; gap:.55rem; color:#F2E9D8; font-size:.76rem; line-height:1.35; }
.roadmap-protection__badge { padding:.24rem .42rem; border:1px solid rgba(221,178,70,.55); border-radius:999px; color:var(--accent-bright); font:700 .56rem 'Space Mono',monospace; letter-spacing:.08em; text-transform:uppercase; }
.roadmap-protection p { margin:.48rem 0 0; color:#BBAF91; font-size:.7rem; line-height:1.5; }
.roadmap-protection__pending { color:#D8C58F !important; }
.roadmap-exam-days { display:grid; gap:.35rem; margin:.65rem 0 0; padding:0; list-style:none; }
.roadmap-exam-days li { display:flex; flex-wrap:wrap; gap:.4rem .65rem; color:#D9CBAA; font-size:.68rem; line-height:1.4; }
.roadmap-exam-days time { flex:0 0 6.6rem; color:var(--accent-bright); font:700 .62rem 'Space Mono',monospace; }
.roadmap-task { display:grid; grid-template-columns:auto minmax(0,1fr) minmax(120px,auto) auto; align-items:center; gap:.6rem; min-width:0; padding:.55rem .6rem;
  border:1px solid #173049; border-radius:11px; background:rgba(7,16,27,.68); transition:border-color .15s ease, background-color .15s ease; }
.roadmap-task:focus-within { border-color:rgba(var(--accent-rgb),.6); background:rgba(var(--accent-rgb),.06); }
.roadmap-check-wrap { position:relative; display:grid; place-items:center; flex:0 0 1.5rem; width:1.5rem; height:1.5rem; cursor:pointer; }
.roadmap-checkbox { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
.roadmap-checkmark { display:block; width:1.05rem; height:1.05rem; border:1px solid #42617B; border-radius:5px; background:#07101B; transition:background-color .15s ease, border-color .15s ease; }
.roadmap-checkbox:checked + .roadmap-checkmark { border-color:var(--accent); background:var(--accent); box-shadow:inset 0 0 0 3px #07101B; }
.roadmap-checkbox:focus-visible + .roadmap-checkmark { outline:2px solid var(--accent-bright); outline-offset:3px; }
.roadmap-task-input { min-width:0; width:100%; border:0; border-bottom:1px solid transparent; outline:0; padding:.25rem 0; color:#F2E9D8; background:transparent; font:500 .82rem/1.45 'Poppins',sans-serif; }
.roadmap-task-input:focus { border-bottom-color:var(--accent); }
.roadmap-task.is-done .roadmap-task-input { color:#8293A4; text-decoration:line-through; text-decoration-color:rgba(var(--accent-bright-rgb),.6); }
.roadmap-task-date-field { display:grid; gap:.18rem; justify-items:end; min-width:0; }
.roadmap-task-date-field > span { color:#8F9CAF; font:700 .54rem 'Space Mono',monospace; letter-spacing:.08em; text-transform:uppercase; }
.roadmap-task-date { width:8.1rem; min-height:32px; padding:.3rem .4rem; border:1px solid #29425A; border-radius:7px; color:#D9CBAA; background:#07101B; font:700 .63rem 'Space Mono',monospace; }
.roadmap-task-date:focus-visible { outline:2px solid var(--accent-bright); outline-offset:2px; }
.roadmap-task-date-note { max-width:11rem; color:#8190A0; font-size:.56rem; line-height:1.35; text-align:right; }
.roadmap-remove { min-height:36px; padding:.35rem .55rem; border:1px solid transparent; border-radius:8px; color:#8F9CAF; background:transparent; font:700 .6rem 'Space Mono',monospace; cursor:pointer; }
.roadmap-remove:hover { color:#E9A29E; border-color:rgba(163,59,55,.55); background:rgba(163,59,55,.1); }
.roadmap-remove:focus-visible { outline:2px solid var(--accent-bright); outline-offset:2px; }
.roadmap-add { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:.55rem; align-items:center; }
.roadmap-add .field { min-width:0; flex:1 1 auto; font-size:.8rem; }
.roadmap-add-date { width:9.5rem; min-width:0; }
.roadmap-add .btn { flex:0 0 auto; min-height:42px; padding:.5rem .85rem; font-size:.75rem; }
.roadmap-status { min-height:1.05rem; margin-top:.6rem; color:#8F9CAF; font:700 .6rem 'Space Mono',monospace; }
.roadmap-status[data-tone="error"] { color:#E9A29E; }
.roadmap-status[data-tone="ok"] { color:#7CE0B0; }
.roadmap-side { display:grid; gap:1.2rem; min-width:0; }
.roadmap-side-card { padding:1.25rem; }
.roadmap-side-card h2 { margin-bottom:.85rem; }
.roadmap-side-card > p { color:#9FB1C4; font-size:.78rem; line-height:1.6; }
.roadmap-steps { display:grid; gap:1rem; margin:1.1rem 0 0; padding:0; list-style:none; }
.roadmap-step { display:grid; grid-template-columns:2rem minmax(0,1fr); gap:.7rem; align-items:start; }
.roadmap-step__number { display:grid; place-items:center; width:2rem; height:2rem; border:1px solid rgba(var(--accent-rgb),.5); border-radius:9px; color:var(--accent-bright); font:700 .65rem 'Space Mono',monospace; }
.roadmap-step strong { display:block; color:#F2E9D8; font-size:.8rem; }
.roadmap-step p { margin-top:.22rem; color:#8F9CAF; font-size:.72rem; line-height:1.5; }
.roadmap-source-list { display:grid; gap:.55rem; margin:1rem 0 0; padding:0; list-style:none; }
.roadmap-source-list a { display:block; padding:.65rem .7rem; border:1px solid #173049; border-radius:9px; color:var(--accent-bright); font-size:.72rem; line-height:1.45; text-decoration:none; }
.roadmap-source-list a:hover { border-color:rgba(var(--accent-rgb),.65); background:rgba(var(--accent-rgb),.06); }
.roadmap-source-list a:focus-visible { outline:2px solid var(--accent-bright); outline-offset:2px; }
.roadmap-side-note { padding:1rem; border-top:1px solid #173049; color:#9FB1C4; font-size:.74rem; line-height:1.6; }
.roadmap-side-note strong { color:var(--accent-bright); }

@media (max-width: 900px){
  .roadmap-layout { grid-template-columns:1fr; }
  .roadmap-side { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 600px){
  .roadmap-overview-head, .roadmap-subject-head { align-items:flex-start; flex-direction:column; }
  .roadmap-total, .roadmap-subject-progress { text-align:left; }
  .roadmap-subject-mini-grid, .roadmap-side { grid-template-columns:1fr; }
  .roadmap-task { grid-template-columns:auto minmax(0,1fr); }
  .roadmap-task-date-field { grid-column:2; justify-items:start; }
  .roadmap-task-date-note { max-width:100%; text-align:left; }
  .roadmap-remove { grid-column:2; justify-self:start; }
  .roadmap-add { grid-template-columns:1fr; align-items:stretch; }
  .roadmap-add-date { width:100%; }
  .roadmap-add .btn { width:100%; }
}

/* ---------- home: first-run path + task-oriented workspace ---------- */
.onboarding-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.75rem; }
.onboarding-step { min-width:0; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.8rem;
  min-height:92px; padding:1rem; color:#E6DBC3; background:#07101B; border:1px solid #173049; border-radius:13px;
  transition:transform .18s ease, border-color .18s ease, background-color .18s ease; }
.onboarding-step:hover { transform:translateY(-2px); color:#F2E9D8; border-color:rgba(var(--accent-rgb),.58);
  background:rgba(var(--accent-rgb),.07); }
.onboarding-step:focus-visible { outline:2px solid var(--accent-bright); outline-offset:2px; }
.onboarding-number { display:grid; place-items:center; width:34px; height:34px; border-radius:10px;
  color:#1A1205; background:linear-gradient(180deg,var(--accent-hi),var(--accent)); font:700 .78rem 'Space Mono',monospace; }
.onboarding-step b { display:block; color:#F2E9D8; font-size:.86rem; }
.onboarding-step small { display:block; margin-top:.3rem; color:#9FB1C4; font-size:.72rem; line-height:1.45; }
.onboarding-arrow { color:var(--accent-bright); font-size:1rem; }

.journey-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.journey-card { display:flex; flex-direction:column; min-height:220px; padding:1.45rem; }
.journey-kicker { width:max-content; margin-bottom:1.2rem; padding:.28rem .58rem; border-radius:999px;
  color:var(--accent-bright); background:rgba(var(--accent-rgb),.09); border:1px solid rgba(var(--accent-rgb),.32);
  font:700 .6rem 'Space Mono',monospace; letter-spacing:.16em; text-transform:uppercase; }
.journey-card h3 { color:#F2E9D8; font:700 1.15rem 'Cinzel',serif; }
.journey-card p { max-width:54ch; margin-top:.7rem; color:#CFC3A6; font-size:.84rem; line-height:1.65; }
.journey-link { margin-top:auto; padding-top:1.25rem; color:var(--accent-bright); font:700 .68rem 'Space Mono',monospace; }

/* ---------- page reveal ---------- */
.momo-page-reveal { opacity:0; transform:translateY(18px); }
.momo-page-reveal.is-visible { opacity:1; transform:none; transition:opacity .62s ease, transform .62s cubic-bezier(.2,.75,.25,1); transition-delay:calc(var(--momo-reveal-order, 0) * 70ms); }
@media (prefers-reduced-motion:reduce){
  .momo-page-reveal, .momo-page-reveal.is-visible { opacity:1; transform:none; transition:none; }
}

@media (max-width:760px) {
  .onboarding-grid, .journey-grid { grid-template-columns:1fr; }
  .onboarding-step { min-height:82px; }
  .journey-card { min-height:190px; }
}

/* ---------- forms ---------- */
.field { width:100%; background:#07101B; border:1px solid #14283C; border-radius:10px; padding:.55rem .8rem;
  color:#F2E9D8; font-size:.9rem; font-family:'Poppins',sans-serif; outline:none; transition:border-color .15s ease; }
.field:focus { border-color:var(--accent); }
.field:focus-visible { border-color:var(--accent); box-shadow:0 0 0 3px rgba(var(--accent-rgb),.18); }
.field::placeholder { color:#8F836C; }
.field:disabled { opacity:.4; }
label.flabel { display:block; font-family:'Space Mono',monospace; font-size:.66rem; color:#E6DBC3; margin-bottom:.3rem; }

/* ---------- meters / progress ---------- */
.meter { height:7px; border-radius:999px; background:#08131F; overflow:hidden; border:1px solid #14283C; }
.meter > span { display:block; height:100%; background:linear-gradient(90deg,#9C7C28,var(--accent-bright)); border-radius:999px; transition:width .4s ease; }

/* ---------- toast ---------- */
.toast { position:fixed; left:50%; bottom:22px; transform:translateX(-50%) translateY(20px); opacity:0;
  background:#0E2236; border:1px solid rgba(var(--accent-rgb),.5); color:#F2E9D8; font-size:.85rem; padding:.6rem 1rem; border-radius:10px;
  z-index:60; pointer-events:none; transition:opacity .25s ease, transform .25s ease; box-shadow:0 10px 30px -8px rgba(0,0,0,.7); }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* ---------- segmented tabs ---------- */
.seg { display:inline-flex; gap:.25rem; padding:.28rem; background:#081320; border:1px solid #173049; border-radius:999px; max-width:100%; overflow-x:auto; scrollbar-width:none; }
.seg::-webkit-scrollbar { display:none; }
.seg button { border:none; cursor:pointer; white-space:nowrap; background:transparent; color:#CFC3A6;
  font-family:'Poppins',sans-serif; font-weight:500; font-size:.85rem; padding:.42rem 1rem; border-radius:999px;
  transition:background-color .15s ease, color .15s ease; }
.seg button:hover { color:#F2E9D8; }
.seg button.on { background:linear-gradient(180deg,var(--accent-hi),var(--accent)); color:#1A1205; font-weight:600; }
.seg button:focus-visible { outline:2px solid var(--accent-bright); outline-offset:2px; }

/* ---------- data table ---------- */
.dtable { width:100%; border-collapse:collapse; font-size:.84rem; }
.dtable th { font-family:'Space Mono',monospace; font-size:.62rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent); text-align:left; padding:.45rem .6rem; border-bottom:1px solid #173049; }
.dtable td { padding:.5rem .6rem; border-bottom:1px solid #0E2236; color:#E6DBC3; }
.dtable tr:last-child td { border-bottom:none; }

/* ---------- confidence pips (syllabus) ---------- */
.pips { display:inline-flex; gap:.3rem; }
.pips button { min-width:44px; height:40px; border-radius:8px; border:1px solid #14283C; background:#07101B; cursor:pointer;
  touch-action:manipulation; font-family:'Space Mono',monospace; font-size:.62rem; font-weight:700; color:#8F836C;
  transition:transform .12s ease, background-color .12s ease, color .12s ease, border-color .12s ease; }
.pips button:hover { transform:translateY(-1px); border-color:rgba(var(--accent-rgb),.5); }
.pips button:focus-visible { outline:2px solid var(--accent-bright); outline-offset:2px; }
.pips button.on-1 { background:rgba(163,59,55,.25); border-color:#A33B37; color:#E9A29E; }
.pips button.on-2 { background:rgba(28,77,99,.35); border-color:#2E7391; color:#9FD3E8; }
.pips button.on-3 { background:rgba(var(--accent-rgb),.22); border-color:var(--accent); color:var(--accent-bright); }

/* ---------- flashcard flip ---------- */
.fc-stage { perspective:1200px; }
.fc-card { position:relative; width:100%; min-height:230px; transform-style:preserve-3d; transition:transform .5s cubic-bezier(.4,.1,.2,1); }
.fc-card.flip { transform:rotateY(180deg); }
.fc-face { position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:.6rem; padding:1.6rem; text-align:center;
  background:linear-gradient(180deg,#0B1828,#081320); border:1px solid rgba(var(--accent-rgb),.35); border-radius:16px; }
.fc-face.back { transform:rotateY(180deg); border-color:rgba(var(--accent-rgb),.55); }
.fc-face .fc-tag { font-family:'Space Mono',monospace; font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); }
.fc-face .fc-text { font-size:1.02rem; line-height:1.55; color:#F2E9D8; max-width:52ch; }

/* ---------- timer ring (adapted from 21st.dev CircleProgress) ---------- */
.ring-wrap { position:relative; width:230px; height:230px; margin-inline:auto; }
.ring-wrap svg { width:100%; height:100%; transform:rotate(-90deg); }
.ring-track { fill:none; stroke:#0E2236; stroke-width:10; }
.ring-fill  { fill:none; stroke-width:10; stroke-linecap:round; transition:stroke-dashoffset .9s linear; } /* stroke gradient set inline per SVG */
.ring-center { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.15rem; }
.ring-time { font-family:'Space Mono',monospace; font-weight:700; font-size:2.5rem; color:#F2E9D8; letter-spacing:.02em; font-variant-numeric:tabular-nums; }
.ring-sub { font-family:'Space Mono',monospace; font-size:.64rem; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); }

/* ---------- gumball mascot ---------- */
.gcomp { position:absolute; z-index:6; width:44px; height:44px; pointer-events:none;
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.5)); animation:gcompBob 5s ease-in-out infinite; }
.gcomp svg { width:100%; height:100%; display:block; }
.gcomp .gc-eyes { transform-box:fill-box; transform-origin:center; animation:gcompBlink 6.5s infinite; }
.gcomp.tr { top:-19px; right:20px; }
.gcomp.tl { top:-19px; left:20px; }
@keyframes gcompBob  { 0%,100%{ transform:translateY(0) rotate(-2deg);} 50%{ transform:translateY(-4px) rotate(2deg);} }
@keyframes gcompBlink{ 0%,94%,100%{ transform:scaleY(1);} 97%{ transform:scaleY(.1);} }
[data-mascot]:hover > .gcomp { animation:gcompPop .55s cubic-bezier(.34,1.7,.5,1); }
@keyframes gcompPop { 0%{ transform:scale(1);} 42%{ transform:scale(1.22) rotate(6deg);} 100%{ transform:scale(1);} }

/* hero gumball (home) */
.hero-char { position:absolute; top:0; right:0; bottom:0; width:50%; max-width:380px; z-index:0; overflow:hidden; border-radius:0 16px 16px 0; pointer-events:none; }
.hero-char svg { position:absolute; right:-12%; bottom:-8%; height:122%; width:auto; }
.hero-scrim { position:absolute; inset:0; z-index:1; border-radius:16px; pointer-events:none;
  background:linear-gradient(90deg,#0B1828 0%, rgba(11,24,40,.97) 32%, rgba(11,24,40,.7) 58%, rgba(11,24,40,.2) 84%, rgba(11,24,40,0) 100%); }
.hero-glow { position:absolute; z-index:1; left:-6%; top:-30%; width:60%; height:150%; pointer-events:none;
  background:radial-gradient(closest-side, rgba(var(--accent-rgb),.16), transparent 70%); filter:blur(8px); }
.float-hero { animation:floatHero 6s ease-in-out infinite, boing 7s ease-in-out infinite; will-change:transform; }
@keyframes floatHero { 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-12px);} }
@keyframes boing { 0%,80%,100%{ scale:1 1;} 86%{ scale:1.06 .93;} 92%{ scale:.96 1.05;} 96%{ scale:1.01 .99;} }
.eyes { transform-box:fill-box; transform-origin:center; animation:blink 5s infinite; }
@keyframes blink { 0%,92%,100%{ transform:scaleY(1);} 96%{ transform:scaleY(.08);} }

@media (max-width: 980px){ .hero-char { width:70%; opacity:.22; } }
@media (max-width: 640px){
  .hero-char { display:none; }
}

/* ---------- mobile nav: hamburger + dropdown panel ----------
   Below 768px the link row (which was swipe-scrollable but LOOKED cut off) becomes a
   dropdown under the sticky header, opened by the ☰ button site.js injects. */
.nav-burger { display:none; }
@media (max-width: 768px){
  .site-nav { position:fixed; top:4rem; left:0; right:0; z-index:49;
    display:none; flex-direction:column; align-items:stretch; gap:.15rem;
    padding:.6rem .9rem 1rem; overflow-x:visible; overflow-y:auto; max-height:calc(100vh - 4rem);
    background:#050A11; border-bottom:1px solid #16283C;
    box-shadow:0 24px 40px rgba(0,0,0,.45); }
  html.nav-open .site-nav { display:flex; }
  /* the header creates the panel's stacking context (z 30) — lift it above the fixed
     energy pill (z 40) while the menu is open, staying under modals (z 60) */
  html.nav-open .site-head { z-index:55; }
  .site-nav a { width:100%; font-size:.95rem; padding:.7rem .8rem; }
  html.role-admin .site-nav { gap:.15rem; }
  html.role-admin .site-nav a { padding:.7rem .8rem; font-size:.95rem; }
  .nav-burger { display:inline-flex; align-items:center; justify-content:center;
    width:44px; height:44px; flex-shrink:0; border-radius:999px; border:1px solid #24405d;
    background:transparent; color:#CFC3A6; cursor:pointer; font-size:1.05rem; line-height:1;
    touch-action:manipulation; transition:color .15s ease, border-color .15s ease; }
  .nav-tools { gap:.5rem; }
  .theme-toggle { width:44px; height:44px; }
  .nav-burger:hover { color:var(--accent-bright); border-color:rgba(var(--accent-rgb),.6); }
  .nav-burger:focus-visible { outline:2px solid var(--accent-bright); outline-offset:2px; }
  html[data-theme="light"] .site-nav { background:#F6F0E1; border-bottom-color:#E3D6B8; }
  html[data-theme="light"] .nav-burger { color:#5B6673; border-color:#D8CBAA; }
}
@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } }

/* ---------- MOMO Arcade (gamification) ---------- */
#gameChip { display:inline-flex; align-items:center; gap:.35rem; margin-left:.4rem; padding:.28rem .7rem;
  border:1px solid rgba(var(--accent-rgb),.45); border-radius:999px; background:rgba(var(--accent-rgb),.08);
  color:var(--accent-bright); font-family:'Space Mono',monospace; font-size:.72rem; text-decoration:none; white-space:nowrap;
  transition:background-color .15s ease, transform .15s ease; }
#gameChip:hover { background:rgba(var(--accent-rgb),.18); transform:translateY(-1px); }
#gameChip.bump { animation:chipBump .5s cubic-bezier(.34,1.7,.5,1); }
@keyframes chipBump { 0%{transform:scale(1);} 45%{transform:scale(1.18);} 100%{transform:scale(1);} }

.dance-bounce { animation:danceBounce .62s ease-in-out infinite; }
.dance-spin   { animation:danceSpin 1.6s linear infinite; }
.dance-wiggle { animation:danceWiggle .5s ease-in-out infinite; }
.dance-moon   { animation:danceMoon 1.3s ease-in-out infinite; }
@keyframes danceBounce { 0%,100%{ transform:translateY(0) rotate(-4deg);} 50%{ transform:translateY(-16px) rotate(4deg);} }
@keyframes danceSpin   { 0%{ transform:rotate(0);} 100%{ transform:rotate(360deg);} }
@keyframes danceWiggle { 0%,100%{ transform:rotate(-10deg);} 50%{ transform:rotate(10deg);} }
@keyframes danceMoon   { 0%,100%{ transform:translateX(0) scaleX(1);} 25%{ transform:translateX(-10px) scaleX(-1);} 75%{ transform:translateX(10px) scaleX(1);} }

.party-stage { position:fixed; inset:0; z-index:70; pointer-events:none; overflow:hidden; }
.party-char { position:absolute; bottom:12px; width:92px; height:92px; filter:drop-shadow(0 6px 10px rgba(0,0,0,.55)); }
.party-char svg { width:100%; height:100%; }
.confetti { position:absolute; top:-12px; width:8px; height:14px; border-radius:2px; opacity:.95;
  animation:confettiFall 3.4s linear infinite; }
@keyframes confettiFall { 0%{ transform:translateY(-4vh) rotate(0);} 100%{ transform:translateY(106vh) rotate(560deg);} }

.shop-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:1rem; }
.shop-card { background:#07101B; border:1px solid #14283C; border-radius:14px; padding:1.1rem; text-align:center;
  transition:border-color .15s ease, transform .15s ease; }
.shop-card:hover { border-color:rgba(var(--accent-rgb),.5); transform:translateY(-2px); }
.shop-card.owned { border-color:rgba(62,156,92,.55); }
.shop-fig { width:84px; height:84px; margin:0 auto .6rem; }
.shop-fig svg { width:100%; height:100%; }
.floor-row { display:flex; flex-wrap:wrap; gap:1.4rem; justify-content:center; padding:1rem 0; }
.floor-char { width:96px; height:96px; cursor:pointer; transition:transform .15s ease; }
.floor-char:hover { transform:scale(1.08); }
.floor-char svg { width:100%; height:100%; }
.earn-row { display:flex; align-items:center; justify-content:space-between; gap:.8rem; padding:.55rem 0; border-top:1px solid #14283C; }
.earn-row:first-child { border-top:none; }
.earn-val { font-family:'Space Mono',monospace; font-size:.72rem; color:var(--accent-bright); white-space:nowrap; }

/* arcade a11y (ui-ux-pro-max audit) */
#gameChip { min-height:34px; }
#gameChip:focus-visible, .floor-char:focus-visible, .shop-card button:focus-visible { outline:2px solid var(--accent-bright); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){
  .dance-bounce, .dance-spin, .dance-wiggle, .dance-moon, .confetti, .party-char { animation:none !important; }
}

/* token coin: PNG instead of the U+1FA99 emoji (missing on older Android) */
.coin { display:inline-block; width:1em; height:1em; vertical-align:-.12em; background:transparent; }

/* notebook / paper selector tabs (Oracle + Study hub share these) */
.paper-tab { font-family:'Space Mono',monospace; font-size:.7rem; font-weight:700; color:#CFC3A6;
  background:#07101B; border:1px solid #14283C; border-radius:10px; padding:.5rem .8rem; min-height:44px;
  cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent;
  transition:background-color .15s ease, border-color .15s ease, color .15s ease; }
.paper-tab:hover { border-color:rgba(var(--accent-rgb),.5); }
.paper-tab.on { color:var(--accent-bright); background:rgba(var(--accent-rgb),.10); border-color:rgba(var(--accent-rgb),.55); }
.paper-tab:focus-visible { outline:2px solid var(--accent-bright); outline-offset:2px; }

/* ============================================================
   Gumball is the admin's celebration mascot only — hidden for
   every other account (role-admin lands on <html> from gate.js).
   The public Momo hero and MOMO Quest live below for all learners.
   ============================================================ */
html:not(.role-admin) .gcomp { display:none !important; }

/* The hero Momo is the public study companion; only the admin-only Gumball
   celebration layer remains hidden for ordinary accounts. */

/* ---------- public MOMO Quest: original pixel companion + daily missions ---------- */
.momo-quest { position:relative; overflow:hidden; border-color:rgba(var(--accent-rgb),.42); background:
  linear-gradient(135deg,rgba(var(--accent-rgb),.12),rgba(8,19,32,.97) 47%),
  repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 4px); }
.momo-quest__scanlines { position:absolute; inset:0; pointer-events:none; opacity:.18; background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.04) 3px 4px); mix-blend-mode:screen; }
.momo-quest__top, .momo-quest__body, .momo-quest__bottom { position:relative; z-index:1; }
.momo-quest__top { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; padding:1.35rem 1.5rem 1rem; }
.momo-quest__title { color:#F2E9D8; font-size:clamp(1.15rem,1rem + 1vw,1.55rem); line-height:1.2; }
.momo-quest__lede { margin-top:.42rem; color:#9FB1C4; font-size:.78rem; line-height:1.5; }
.momo-quest__run { display:flex; align-items:center; gap:.38rem; padding:.45rem .7rem; flex-shrink:0; color:#ECD27E; border:1px solid rgba(var(--accent-rgb),.38); background:rgba(5,9,15,.42); font:700 .65rem 'Space Mono',monospace; text-transform:uppercase; letter-spacing:.08em; }
.momo-quest__run strong { color:#F2E9D8; font-size:1.1rem; line-height:1; }
.momo-quest__flame { display:grid; place-items:center; width:18px; height:18px; color:#1A1205; background:#D4AF37; font:700 .75rem 'Space Mono',monospace; transform:rotate(45deg); }
.momo-quest__flame::first-letter { transform:rotate(-45deg); }
.momo-quest__body { display:grid; grid-template-columns:180px minmax(0,1fr); gap:1.2rem; align-items:center; padding:0 1.5rem 1.2rem; }
.momo-pixel { display:block; width:100%; height:auto; image-rendering:pixelated; }
.momo-quest__missions { min-width:0; }
.momo-quest__progress-head { display:flex; justify-content:space-between; gap:.8rem; margin-bottom:.45rem; color:#9FB1C4; font:700 .6rem 'Space Mono',monospace; letter-spacing:.14em; }
.momo-quest__progress-head strong { color:#ECD27E; }
.momo-quest__progress { height:8px; padding:2px; margin-bottom:.7rem; background:#08111D; border:1px solid #24405D; }
.momo-quest__progress span { display:block; width:0; height:100%; background:repeating-linear-gradient(90deg,#ECD27E 0 12px,#D4AF37 12px 16px); transition:width .3s ease; }
.momo-quest__list { display:grid; gap:.45rem; margin:0; padding:0; list-style:none; }
.momo-quest__item { display:grid; grid-template-columns:30px minmax(0,1fr) auto; align-items:center; gap:.6rem; min-height:58px; padding:.55rem .6rem; background:rgba(5,9,15,.38); border:1px solid #173049; transition:border-color .15s ease, background-color .15s ease, transform .15s ease; }
.momo-quest__item:hover { transform:translateX(2px); border-color:rgba(var(--accent-rgb),.55); background:rgba(var(--accent-rgb),.06); }
.momo-quest__item.is-done { border-color:rgba(62,156,92,.55); background:rgba(62,156,92,.08); }
.momo-quest__index { display:grid; place-items:center; width:26px; height:26px; color:#ECD27E; border:1px solid rgba(var(--accent-rgb),.45); font:700 .62rem 'Space Mono',monospace; }
.momo-quest__item.is-done .momo-quest__index { color:#081320; background:#63C889; border-color:#63C889; }
.momo-quest__copy { min-width:0; }
.momo-quest__copy b { display:block; overflow:hidden; color:#F2E9D8; font-size:.76rem; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
.momo-quest__copy small { display:block; margin-top:.16rem; overflow:hidden; color:#9FB1C4; font-size:.64rem; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; }
.momo-quest__actions { display:flex; align-items:center; gap:.4rem; }
.momo-quest__go { color:#ECD27E; font:700 .58rem 'Space Mono',monospace; text-decoration:none; text-transform:uppercase; }
.momo-quest__go:hover { color:#FFF2B7; text-decoration:underline; }
.momo-quest__toggle { min-height:32px; padding:.35rem .55rem; color:#F2E9D8; background:transparent; border:1px solid rgba(var(--accent-rgb),.42); cursor:pointer; font:700 .58rem 'Space Mono',monospace; letter-spacing:.06em; touch-action:manipulation; }
.momo-quest__toggle:hover { color:#15202B; background:#ECD27E; border-color:#ECD27E; }
.momo-quest__toggle:focus-visible, .momo-quest__go:focus-visible { outline:2px solid #FFF2B7; outline-offset:2px; }
.momo-quest__bottom { display:flex; align-items:center; justify-content:space-between; gap:.8rem; padding:.75rem 1.5rem; border-top:1px solid rgba(var(--accent-rgb),.18); }
.momo-quest__status { color:#CFC3A6; font-size:.68rem; }
.momo-quest__fresh { color:#6F8295; font-size:.55rem; letter-spacing:.08em; }
@media (max-width:680px){
  .momo-quest__top { flex-direction:column; }
  .momo-quest__run { align-self:flex-start; }
  .momo-quest__body { grid-template-columns:1fr; gap:.5rem; }
  .momo-quest__item { grid-template-columns:28px minmax(0,1fr); }
  .momo-quest__actions { grid-column:2; justify-content:flex-start; }
  .momo-quest__bottom { align-items:flex-start; flex-direction:column; }
}
@media (prefers-reduced-motion:reduce){ .momo-quest__progress span { transition:none; } }
html[data-theme="light"] .momo-quest { background:linear-gradient(135deg,rgba(156,124,40,.12),#FEFBF3 56%); border-color:#DCC999; }
html[data-theme="light"] .momo-quest__title, html[data-theme="light"] .momo-quest__copy b { color:#1E2A38; }
html[data-theme="light"] .momo-quest__lede, html[data-theme="light"] .momo-quest__copy small { color:#5B6673; }
html[data-theme="light"] .momo-quest__item { background:rgba(255,255,255,.42); border-color:#E3D6B8; }
html[data-theme="light"] .momo-quest__progress { background:#EDE4CE; border-color:#D8CBAA; }
html[data-theme="light"] .momo-quest__bottom { border-top-color:#E3D6B8; }

/* ============================================================
   Header tools (theme toggle + account chip) — fixed slot so the
   nav links never shift when gate.js mounts the chip after load.
   ============================================================ */
.nav-tools { display:flex; align-items:center; gap:.4rem; flex-shrink:0; min-width:44px; justify-content:flex-end; }
.theme-toggle { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px;
  border-radius:999px; border:1px solid #24405d; background:transparent; color:#CFC3A6; cursor:pointer;
  font-size:1rem; line-height:1; touch-action:manipulation; transition:color .15s ease, border-color .15s ease; }
.theme-toggle:hover { color:var(--accent-bright); border-color:rgba(var(--accent-rgb),.6); }
.theme-toggle:focus-visible { outline:2px solid var(--accent-bright); outline-offset:2px; }

/* ============================================================
   Page transitions — navigations cross-fade instead of snapping.
   Modern engines: View Transitions API (same-origin MPA). Fallback:
   a short body fade driven by site.js on link clicks.
   ============================================================ */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation:vtFadeOut .22s ease both; }
::view-transition-new(root) { animation:vtFadeIn .26s ease both; }
@keyframes vtFadeOut { to{ opacity:0; } }
@keyframes vtFadeIn { from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
body { transition:opacity .18s ease; }
body.page-leave { opacity:0; }
@media (prefers-reduced-motion: reduce){
  ::view-transition-old(root), ::view-transition-new(root) { animation:none !important; }
}

/* ============================================================
   Free-plan ad slot — explicit in-flow placement only. It stays
   absent for signed-out/Premium/admin users and reserves the ad
   canvas before Adsterra renders so content is never covered.
   ============================================================ */
.momo-ad-slot { display:none; width:100%; margin:0 auto; padding:2.5rem 0; clear:both; }
.momo-ad-slot.is-active { display:block; }
.momo-ad-slot--completion { margin-top:1.25rem; padding:1.25rem 0 1.75rem; border-top:1px solid rgba(140,164,187,.18); }
.momo-ad-frame { width:100%; margin:0 auto; text-align:center; overflow:hidden; }
.momo-ad-label { font:600 9px 'Space Mono',monospace; letter-spacing:.12em; text-transform:uppercase;
  color:#5E7288; margin-bottom:8px; }
.momo-ad-frame--native { max-width:360px; min-height:288px; }
.momo-ad-frame--banner { max-width:468px; min-height:68px; }
.momo-ad-iframe { display:block; margin:0 auto; border:0; max-width:100%; background:transparent; }
.momo-ad-iframe--native { width:100%; height:280px; }
.momo-ad-iframe--banner { width:468px; height:60px; }
 .momo-ad-fallback { position:relative; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:.85rem; width:100%; box-sizing:border-box; min-height:112px; padding:1rem 1.05rem; overflow:hidden; border:1px solid rgba(212,175,55,.38); border-radius:14px; background:radial-gradient(circle at 12% 20%,rgba(236,210,126,.18),transparent 30%),linear-gradient(135deg,rgba(20,35,52,.98),rgba(7,15,25,.99)); color:#DCE7F2; text-align:left; opacity:0; transform:translateY(5px); }
 .momo-ad-fallback.is-visible { animation:momoAdReveal .38s ease-out forwards; }
 .momo-ad-fallback::after { position:absolute; inset:auto -18px -42px auto; width:150px; height:150px; border:1px solid rgba(236,210,126,.16); border-radius:50%; content:""; pointer-events:none; box-shadow:0 0 0 14px rgba(236,210,126,.035),0 0 0 28px rgba(236,210,126,.025); }
 .momo-ad-fallback--native { grid-template-columns:1fr; min-height:250px; padding:1.25rem 1rem 1.1rem; text-align:center; }
 .momo-ad-fallback--native .momo-ad-fallback__mark { margin:0 auto; }
 .momo-ad-fallback--native .momo-ad-fallback__action { justify-content:center; }
 .momo-ad-fallback--banner { min-height:86px; }
 .momo-ad-fallback__video-wrap { display:flex; width:100%; justify-content:center; }
 .momo-ad-fallback__video { display:block; width:auto; max-width:100%; max-height:min(52vh,520px); aspect-ratio:9 / 16; object-fit:contain; border:1px solid rgba(236,210,126,.26); border-radius:12px; background:#05090F; box-shadow:0 12px 34px rgba(0,0,0,.3); }
 .momo-ad-fallback--scene-video { display:flex; flex-direction:column; align-items:center; gap:.7rem; min-height:0; padding:.7rem; text-align:center; }
 .momo-ad-fallback--scene-video .momo-ad-fallback__mark, .momo-ad-fallback--scene-video .momo-ad-fallback__body { display:none; }
 .momo-ad-fallback--scene-video .momo-ad-fallback__action { width:100%; justify-content:center; }
 .momo-ad-fallback--scene-video .momo-ad-fallback__link { width:min(100%,260px); }
 .momo-ad-fallback__mark { position:relative; display:grid; place-items:center; width:48px; height:48px; flex:0 0 48px; border:1px solid rgba(236,210,126,.58); border-radius:15px; background:linear-gradient(145deg,rgba(236,210,126,.22),rgba(44,80,100,.5)); box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 8px 24px rgba(0,0,0,.18); transform:rotate(-5deg); }
 .momo-ad-fallback__glyph { color:#F6E7A5; font:700 1.45rem/1 'Cinzel',Georgia,serif; transform:rotate(5deg); }
 .momo-ad-fallback__orbit { position:absolute; inset:7px; border:1px solid rgba(236,210,126,.38); border-radius:50%; transform:rotate(25deg) scaleX(.62); }
 .momo-ad-fallback__body { min-width:0; display:flex; flex-direction:column; gap:.18rem; }
 .momo-ad-fallback__kicker { color:#ECD27E; font:700 .56rem/1.2 'Space Mono',monospace; letter-spacing:.14em; text-transform:uppercase; white-space:nowrap; }
 .momo-ad-fallback__headline { color:#F2E9D8; font:700 clamp(1rem,2vw,1.25rem)/1.15 'Cinzel',Georgia,serif; }
 .momo-ad-fallback__copy { color:#AFC0D0; font-size:.75rem; line-height:1.35; }
 .momo-ad-fallback__benefits { display:flex; flex-wrap:wrap; gap:.35rem .7rem; margin:.2rem 0 0; padding:0; color:#D5E0EA; font:600 .57rem/1.3 'Space Mono',monospace; list-style:none; }
 .momo-ad-fallback__benefits li::before { margin-right:.3rem; color:#ECD27E; content:"✦"; }
 .momo-ad-fallback__note { color:#7F94A8; font:600 .51rem/1.2 'Space Mono',monospace; }
 .momo-ad-fallback__action { position:relative; z-index:1; display:flex; justify-content:flex-end; }
 .momo-ad-fallback__link { display:inline-flex; align-items:center; justify-content:center; min-height:38px; padding:.55rem .72rem; border:1px solid rgba(236,210,126,.62); border-radius:8px; background:rgba(236,210,126,.1); color:#F6E7A5; font:700 .6rem/1.2 'Space Mono',monospace; text-decoration:none; white-space:nowrap; transition:background .2s ease,transform .2s ease; }
 .momo-ad-fallback__link:hover, .momo-ad-fallback__link:focus-visible { background:rgba(236,210,126,.2); transform:translateY(-1px); }
 @keyframes momoAdReveal { to { opacity:1; transform:none; } }
.momo-ad-slot--scene { display:block; min-height:288px; min-width:0; margin:1.2rem 0 1rem; padding:1rem 0; border:1px solid rgba(140,164,187,.16); border-radius:12px; background:rgba(5,9,15,.42); overflow:hidden; }
.momo-ad-scene { position:fixed; inset:0; z-index:2147483000; display:grid; place-items:center; padding:1rem; overflow-x:hidden; overflow-y:auto; background:rgba(2,6,12,.88); backdrop-filter:blur(12px); }
.momo-ad-scene__card { width:min(100%,520px); max-height:calc(100vh - 2rem); min-width:0; overflow-x:hidden; overflow-y:auto; padding:1.2rem 1.2rem 1.05rem; color:#F2E9D8; background:linear-gradient(145deg,rgba(18,35,54,.98),rgba(5,12,21,.99)); border:1px solid rgba(212,175,55,.42); border-radius:18px; box-shadow:0 24px 90px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06); }
.momo-ad-scene__top { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.85rem; }
.momo-ad-scene__kicker, .momo-ad-scene__timer { color:#ECD27E; font:700 .6rem/1.2 'Space Mono',monospace; letter-spacing:.11em; text-transform:uppercase; }
.momo-ad-scene__timer { color:#9FB1C4; letter-spacing:.04em; text-transform:none; white-space:nowrap; }
.momo-ad-scene__title { margin:0; color:#F2E9D8; font:700 clamp(1.45rem,4vw,2rem)/1.12 'Cinzel',Georgia,serif; }
.momo-ad-scene__copy { max-width:48ch; margin:.55rem 0 0; color:#AFC0D0; font-size:.82rem; line-height:1.65; }
.momo-ad-scene__foot { display:flex; align-items:center; justify-content:space-between; gap:.8rem; margin-top:.3rem; }
.momo-ad-scene__note { color:#7F94A8; font:600 .58rem/1.35 'Space Mono',monospace; }
.momo-ad-scene__continue { min-width:120px; min-height:44px; }
html.momo-ad-open { overflow:hidden; }
html[data-theme="light"] .momo-ad-scene { background:rgba(37,28,12,.56); }
html[data-theme="light"] .momo-ad-scene__card { color:#243244; background:linear-gradient(145deg,rgba(255,253,247,.99),rgba(247,239,220,.99)); border-color:rgba(156,124,40,.42); box-shadow:0 24px 90px rgba(90,70,20,.28), inset 0 1px 0 rgba(255,255,255,.8); }
html[data-theme="light"] .momo-ad-scene__title { color:#1E2A38; }
html[data-theme="light"] .momo-ad-scene__copy { color:#5B6673; }
html[data-theme="light"] .momo-ad-scene__kicker { color:#8A6C1B; }
html[data-theme="light"] .momo-ad-scene__timer, html[data-theme="light"] .momo-ad-scene__note { color:#776B55; }
 @media (max-width:520px) {
  .momo-ad-scene { align-items:end; padding:.65rem; }
  .momo-ad-scene__card { padding:1rem .9rem .9rem; border-radius:16px; }
  .momo-ad-scene__foot { align-items:stretch; flex-direction:column; }
   .momo-ad-scene__continue { width:100%; }
   .momo-ad-fallback { grid-template-columns:auto minmax(0,1fr); gap:.65rem; padding:.85rem; }
   .momo-ad-fallback__action { grid-column:1 / -1; justify-content:stretch; }
   .momo-ad-fallback__link { width:100%; }
   .momo-ad-fallback--native { grid-template-columns:1fr; }
   .momo-ad-fallback--native .momo-ad-fallback__action { grid-column:auto; }
   .momo-ad-fallback--scene-video { padding:.55rem; }
   .momo-ad-fallback--scene-video .momo-ad-fallback__video { max-height:48vh; }
 }
 @media (prefers-reduced-motion: reduce) {
   .momo-ad-fallback { opacity:1; transform:none; }
   .momo-ad-fallback.is-visible { animation:none; }
   .momo-ad-fallback__link { transition:none; }
 }
@media (min-width:800px) {
  .momo-ad-slot { padding:3rem 0; }
}

/* ============================================================
   LIGHT MODE — html[data-theme="light"], toggled in the header,
   persisted as momo_theme. Same brand (navy ink + gold) on warm
   parchment surfaces; overrides win over inline styles via
   !important only where inline styles exist (footer).
   ============================================================ */
html[data-theme="light"], html[data-theme="light"] body { background:#F6F0E1; color:#243244; }
html[data-theme="light"] .bg-fx { background:
    radial-gradient(ellipse 112px 220px at 8% 58%, transparent 0 94px, rgba(156,124,40,.032) 95px 96px, transparent 97px 110px, rgba(156,124,40,.018) 111px 112px, transparent 113px),
    radial-gradient(circle at 88% 26%, transparent 0 52px, rgba(156,124,40,.032) 53px 54px, transparent 55px 86px, rgba(156,124,40,.020) 87px 88px, transparent 89px 120px, rgba(156,124,40,.014) 121px 122px, transparent 123px),
    linear-gradient(30deg, rgba(93,76,36,.016) 1px, transparent 1px) 0 0 / 72px 42px,
    linear-gradient(150deg, rgba(93,76,36,.012) 1px, transparent 1px) 0 0 / 72px 42px,
    radial-gradient(900px 540px at 80% -10%, rgba(156,124,40,.10), transparent 60%),
    radial-gradient(720px 520px at 6% 2%, rgba(28,77,99,.08), transparent 58%),
    radial-gradient(680px 600px at 50% 120%, rgba(163,59,55,.05), transparent 60%); }
html[data-theme="light"] .grain { opacity:.035; mix-blend-mode:multiply; }
html[data-theme="light"] ::selection { background:rgba(156,124,40,.28); color:#1b2635; }
html[data-theme="light"] .momo-ad-label { color:#776B55; }

html[data-theme="light"] .card { background:
    radial-gradient(440px 170px at 12% -18%, rgba(156,124,40,.075), transparent 62%),
    linear-gradient(112deg, rgba(255,255,255,.55) 0%, transparent 34%),
    linear-gradient(180deg,#FEFBF3,#F9F3E4);
  border-color:#E3D6B8;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 10px 30px -24px rgba(90,70,20,.45); }
html[data-theme="light"] .card-2 { background:
    radial-gradient(320px 140px at 92% -20%, rgba(156,124,40,.055), transparent 64%),
    linear-gradient(180deg,#FCF8EE,#F8F1E1);
  border-color:#E7DCC1;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7); }
html[data-theme="light"] .card:hover { border-color:rgba(156,124,40,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85), 0 18px 40px -22px rgba(90,70,20,.5); }
html[data-theme="light"] .card-2:hover { border-color:rgba(156,124,40,.45); }

html[data-theme="light"] h2.section, html[data-theme="light"] .page-head h1 { color:#1E2A38; }
html[data-theme="light"] .page-head { background:linear-gradient(90deg, rgba(138,108,27,.58) 0 64px, rgba(138,108,27,.16) 64px 38%, transparent 76%) left bottom / 100% 1px no-repeat; }
html[data-theme="light"] .page-head p { color:#4A5560; }
html[data-theme="light"] .eyebrow { color:#8A6C1B; }
html[data-theme="light"] .onboarding-step { color:#3A4550; background:#FFFDF7; border-color:#E3D6B8; }
html[data-theme="light"] .onboarding-step:hover { color:#1E2A38; background:rgba(156,124,40,.08); border-color:rgba(156,124,40,.55); }
html[data-theme="light"] .onboarding-step b, html[data-theme="light"] .journey-card h3 { color:#1E2A38; }
html[data-theme="light"] .onboarding-step small { color:#66717C; }
html[data-theme="light"] .journey-card p { color:#4A5560; }
html[data-theme="light"] .journey-kicker { color:#8A6C1B; background:rgba(156,124,40,.08); border-color:rgba(156,124,40,.28); }
html[data-theme="light"] .journey-link { color:#8A6C1B; }

html[data-theme="light"] .site-head { background:rgba(246,240,225,.92); border-bottom-color:#E3D6B8;
  box-shadow:0 12px 30px -26px rgba(90,70,20,.48), 0 1px 0 rgba(138,108,27,.045); }
html[data-theme="light"] .site-nav a { color:#5B6673; }
html[data-theme="light"] .site-nav a:hover { color:#1E2A38; background:rgba(156,124,40,.10); }
html[data-theme="light"] .site-nav a[aria-current="page"] { color:#8A6C1B; background:rgba(156,124,40,.09); }
html[data-theme="light"] body[data-page] .site-nav a[data-nav] { }
html[data-theme="light"] body[data-page="home"]      .site-nav a[data-nav="home"],
html[data-theme="light"] body[data-page="oracle"]    .site-nav a[data-nav="oracle"],
html[data-theme="light"] body[data-page="mock"]      .site-nav a[data-nav="mock"],
html[data-theme="light"] body[data-page="study"]     .site-nav a[data-nav="study"],
html[data-theme="light"] body[data-page="games"]     .site-nav a[data-nav="games"],
html[data-theme="light"] body[data-page="premium"]   .site-nav a[data-nav="premium"],
html[data-theme="light"] body[data-page="roadmap"]   .site-nav a[data-nav="roadmap"],
html[data-theme="light"] body[data-page="settings"]  .site-nav a[data-nav="settings"],
html[data-theme="light"] body[data-page="homework"]  .site-nav a[data-nav="homework"],
html[data-theme="light"] body[data-page="calendar"]  .site-nav a[data-nav="calendar"],
html[data-theme="light"] body[data-page="pipelines"] .site-nav a[data-nav="pipelines"],
html[data-theme="light"] body[data-page="voice"]     .site-nav a[data-nav="voice"] { color:#8A6C1B; }
html[data-theme="light"] .nav-account { color:#5B6673; border-color:#D8CBAA; }
html[data-theme="light"] .nav-account:hover { color:#8A6C1B; border-color:rgba(156,124,40,.6); }
html[data-theme="light"] .theme-toggle { color:#5B6673; border-color:#D8CBAA; }
html[data-theme="light"] .theme-toggle:hover { color:#8A6C1B; border-color:rgba(156,124,40,.6); }

html[data-theme="light"] .roadmap-disclaimer { background:rgba(156,124,40,.07); }
html[data-theme="light"] .roadmap-disclaimer p,
html[data-theme="light"] .roadmap-subject-note,
html[data-theme="light"] .roadmap-side-card > p,
html[data-theme="light"] .roadmap-step p,
html[data-theme="light"] .roadmap-side-note { color:#5B6673; }
html[data-theme="light"] .roadmap-disclaimer strong,
html[data-theme="light"] .roadmap-subject-title,
html[data-theme="light"] .roadmap-subject-mini__name,
html[data-theme="light"] .roadmap-step strong { color:#1E2A38; }
html[data-theme="light"] .roadmap-subject-mini,
html[data-theme="light"] .roadmap-task { background:#FFFDF7; border-color:#E3D6B8; }
html[data-theme="light"] .roadmap-empty { border-color:#CBBE9E; color:#66717C; }
html[data-theme="light"] .roadmap-task-input { color:#243244; }
html[data-theme="light"] .roadmap-task.is-done .roadmap-task-input { color:#7C8790; }
html[data-theme="light"] .roadmap-protection { border-color:#D9C58D; background:#FBF5E4; }
html[data-theme="light"] .roadmap-protection__heading,
html[data-theme="light"] .roadmap-exam-days li { color:#384657; }
html[data-theme="light"] .roadmap-protection p { color:#66717C; }
html[data-theme="light"] .roadmap-protection__pending { color:#80641B !important; }
html[data-theme="light"] .roadmap-task-date { color:#384657; background:#FFFDF7; border-color:#CBBE9E; }
html[data-theme="light"] .roadmap-task-date-field > span,
html[data-theme="light"] .roadmap-task-date-note { color:#66717C; }
html[data-theme="light"] .roadmap-checkmark { background:#FFFDF7; border-color:#B5A77E; }
html[data-theme="light"] .roadmap-checkbox:checked + .roadmap-checkmark { background:var(--accent); box-shadow:inset 0 0 0 3px #FFFDF7; }
html[data-theme="light"] .roadmap-progress,
html[data-theme="light"] .roadmap-subject-meter,
html[data-theme="light"] .roadmap-subject-mini__meter { background:#EFE6CF; border-color:#DED1B1; }
html[data-theme="light"] .roadmap-side-note { border-top-color:#E3D6B8; }
html[data-theme="light"] .roadmap-source-list a { border-color:#E3D6B8; color:#8B6B17; }
html[data-theme="light"] .roadmap-source-list a:hover { background:rgba(156,124,40,.08); }

/* Keep the injected header controls at the touch-safe size after their base rules resolve. */
@media (max-width: 768px) {
  .nav-tools { gap:.5rem; }
  .nav-burger, .theme-toggle { width:44px; height:44px; }
  /* Keep the authenticated switch control touch-safe without pushing the
     fixed background or page content past the mobile viewport. */
  .nav-account { width:44px; max-width:44px; justify-content:center; padding:.3rem; margin-left:0; font-size:0; }
  .nav-account::before { content:'⇄'; font-size:.8rem; }
}

html[data-theme="light"] .btn-ghost { color:#243244; border-color:rgba(156,124,40,.5); }
html[data-theme="light"] .btn-ghost:hover { background:rgba(156,124,40,.10); border-color:rgba(156,124,40,.8); }
html[data-theme="light"] .btn-danger { color:#A33B37; border-color:rgba(163,59,55,.5); }
html[data-theme="light"] .skip-link { background:#FEFBF3; color:#243244; }

html[data-theme="light"] .field, html[data-theme="light"] .mock-q textarea { background:#FFFDF7; border-color:#DED1B1; color:#243244; }
html[data-theme="light"] .field::placeholder { color:#9A8F76; }
html[data-theme="light"] label.flabel { color:#4A5560; }
html[data-theme="light"] .meter { background:#EDE4CE; border-color:#E0D3B3; }
html[data-theme="light"] .toast { background:#FEFBF3; color:#243244; box-shadow:0 10px 30px -8px rgba(90,70,20,.4); }
html[data-theme="light"] .seg { background:#F3ECDA; border-color:#E3D6B8; }
html[data-theme="light"] .seg button { color:#5B6673; }
html[data-theme="light"] .seg button:hover { color:#1E2A38; }
html[data-theme="light"] .dtable th { color:#8A6C1B; border-bottom-color:#E3D6B8; }
html[data-theme="light"] .dtable td { color:#3A4550; border-bottom-color:#EFE7D2; }
html[data-theme="light"] .pips button { background:#FFFDF7; border-color:#DED1B1; color:#9A8F76; }
html[data-theme="light"] .fc-face { background:linear-gradient(180deg,#FEFBF3,#F9F3E4); border-color:rgba(156,124,40,.45); }
html[data-theme="light"] .fc-face .fc-text { color:#243244; }
html[data-theme="light"] .ring-track { stroke:#EDE4CE; }
html[data-theme="light"] .ring-time { color:#1E2A38; }
html[data-theme="light"] footer { background:#F0E8D4 !important; border-color:#E3D6B8 !important; }

/* hero (home): the dark scrim + heavy text-shadow read wrong on parchment */
html[data-theme="light"] .hero-scrim { background:linear-gradient(90deg,#FEFBF3 0%, rgba(254,251,243,.97) 32%, rgba(254,251,243,.7) 58%, rgba(254,251,243,.2) 84%, rgba(254,251,243,0) 100%); }
html[data-theme="light"] main h1 { text-shadow:none !important; }

/* Tailwind utility text/border colors (from tw.js) */
html[data-theme="light"] .text-ink { color:#1E2A38 !important; }
html[data-theme="light"] .text-muted { color:#55606C !important; }
html[data-theme="light"] .text-gold-l { color:#8A6C1B !important; }
html[data-theme="light"] .border-line { border-color:#E3D6B8 !important; }

/* Oracle / page-local surfaces */
html[data-theme="light"] .dropzone { background:#FFFDF7; border-color:rgba(156,124,40,.5); }
html[data-theme="light"] .dropzone:hover, html[data-theme="light"] .dropzone.drag { background:rgba(156,124,40,.08); }
html[data-theme="light"] .askbox { background:#FFFDF7; border-color:rgba(156,124,40,.55); }
html[data-theme="light"] .askbox input { color:#243244; }
html[data-theme="light"] .askbox input::placeholder { color:#9A8F76; }
html[data-theme="light"] .ans-body { color:#243244; }
html[data-theme="light"] .ans-meta, html[data-theme="light"] .psg-cap { color:#5B6673; }
html[data-theme="light"] .ans-empty { color:#847961; }
html[data-theme="light"] mark { background:rgba(156,124,40,.22); color:#4a3d12; }
html[data-theme="light"] .chip { color:#8A6C1B; background:rgba(156,124,40,.10); border-color:rgba(156,124,40,.4); }
html[data-theme="light"] .psg { background:#FBF6E9; border-color:#E7DCC1; border-left-color:#9C7C28; }
html[data-theme="light"] .psg p { color:#3A4550; }
html[data-theme="light"] .psg-h { color:#1E2A38; }
html[data-theme="light"] .nb-btn, html[data-theme="light"] .paper-tab { color:#8A6C1B; background:rgba(156,124,40,.07); border-color:rgba(156,124,40,.4); }
html[data-theme="light"] .paper-tab { color:#5B6673; background:#FFFDF7; border-color:#DED1B1; }
html[data-theme="light"] .paper-tab.on { color:#8A6C1B; background:rgba(156,124,40,.12); border-color:rgba(156,124,40,.55); }
html[data-theme="light"] .qz-opt { background:#FFFDF7; border-color:#DED1B1; color:#3A4550; }
html[data-theme="light"] .qz-why, html[data-theme="light"] .mock-fb { color:#5B6673; }
html[data-theme="light"] details.nb-faq { background:#FFFDF7; border-color:#E7DCC1; }
html[data-theme="light"] details.nb-faq summary { color:#1E2A38; }
html[data-theme="light"] details.nb-faq p { color:#3A4550; }
html[data-theme="light"] .nb-guide li, html[data-theme="light"] .nb-guide p { color:#3A4550; }
html[data-theme="light"] .nb-guide h3 { color:#1E2A38; }
html[data-theme="light"] .nb-guide b { color:#8A6C1B; }
html[data-theme="light"] .mm-wrap { background:#FFFDF7; border-color:#E7DCC1; }
html[data-theme="light"] .ov-line p { color:#3A4550; }
html[data-theme="light"] .vo-cap { color:#3A4550; }
html[data-theme="light"] .vo-file-mode { border-color:rgba(62,156,92,.38); background:rgba(62,156,92,.09); color:#275D3A; }
html[data-theme="light"] .vo-file-mode strong { color:#2E7A49; }
html[data-theme="light"] .unit-name { color:#1E2A38; }
html[data-theme="light"] .sub-row { border-top-color:#EFE7D2; }
html[data-theme="light"] .sub-row p { color:#3A4550; }
html[data-theme="light"] .deck-row { border-top-color:#EFE7D2; }
html[data-theme="light"] .frow { border-top-color:#EFE7D2; }

/* Shared loading treatment: compact, phase-based status inspired by 21st.dev loaders. */
.momo-loading { --loading-progress:18%; margin:0 auto; max-width:640px; padding:1rem 1.1rem 1.05rem; border:1px solid rgba(212,175,55,.28); border-radius:16px; background:linear-gradient(135deg,rgba(212,175,55,.08),rgba(7,17,29,.72) 62%); text-align:left; box-shadow:0 18px 45px rgba(0,0,0,.16); }
.momo-loading-head { display:flex; align-items:flex-start; gap:.85rem; }
.momo-loading-mark { position:relative; width:42px; height:42px; flex:none; display:grid; place-items:center; border:1px solid rgba(212,175,55,.45); border-radius:13px; background:rgba(5,9,15,.68); overflow:hidden; }
.momo-loading-mark::before { content:""; width:18px; height:18px; border:2px solid rgba(212,175,55,.2); border-top-color:#D4AF37; border-right-color:#ECD27E; border-radius:50%; animation:momo-loading-spin 1s linear infinite; }
.momo-loading-mark::after { content:""; position:absolute; inset:6px; border:1px solid rgba(212,175,55,.12); border-radius:9px; animation:momo-loading-pulse 1.6s ease-in-out infinite; }
.momo-loading-kicker { margin:0 0 .22rem; color:#ECD27E; font:700 .58rem 'Space Mono',monospace; letter-spacing:.1em; text-transform:uppercase; }
.momo-loading h2 { margin:0; color:#F2E9D8; font:700 1.1rem/1.25 'Cinzel',serif; }
.momo-loading-copy { margin:.35rem 0 0; color:#B9C7D3; font-size:.76rem; line-height:1.55; }
.momo-loading-track { position:relative; height:7px; margin:1.05rem 0 .55rem; overflow:hidden; border-radius:999px; background:#13283C; }
.momo-loading-track > span { display:block; width:var(--loading-progress); height:100%; border-radius:inherit; background:linear-gradient(90deg,#B99022,#ECD27E); box-shadow:0 0 18px rgba(212,175,55,.34); transition:width .35s ease; }
.momo-loading-track::after { content:""; position:absolute; inset:0 auto 0 -35%; width:35%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent); animation:momo-loading-sweep 1.6s ease-in-out infinite; pointer-events:none; }
.momo-loading-foot { display:flex; justify-content:space-between; gap:.75rem; color:#8FA3B8; font:700 .6rem 'Space Mono',monospace; }
.momo-loading-foot strong { color:#ECD27E; font-weight:700; }
.momo-loading-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.45rem; margin:1rem 0 0; padding:0; list-style:none; }
.momo-loading-step { display:flex; align-items:center; gap:.4rem; min-width:0; color:#71879A; font:700 .58rem 'Space Mono',monospace; letter-spacing:.04em; text-transform:uppercase; }
.momo-loading-step-index { display:grid; place-items:center; width:22px; height:22px; flex:none; border:1px solid #29435D; border-radius:7px; color:#71879A; background:#091522; font-size:.56rem; }
.momo-loading-step.is-active { color:#ECD27E; }
.momo-loading-step.is-active .momo-loading-step-index { border-color:#D4AF37; color:#07111D; background:#D4AF37; box-shadow:0 0 0 4px rgba(212,175,55,.1); }
.momo-loading-step.is-done { color:#A7C4B5; }
.momo-loading-step.is-done .momo-loading-step-index { border-color:#56B98A; color:#DDF7E9; background:rgba(86,185,138,.14); }
.vo-loading { margin:0 0 1rem; max-width:none; }
@keyframes momo-loading-spin { to { transform:rotate(360deg); } }
@keyframes momo-loading-pulse { 50% { transform:scale(.82); opacity:.35; } }
@keyframes momo-loading-sweep { 0% { transform:translateX(0); } 70%,100% { transform:translateX(390%); } }
html[data-theme="light"] .momo-loading { border-color:rgba(156,124,40,.4); background:linear-gradient(135deg,rgba(156,124,40,.09),rgba(255,253,247,.92) 62%); box-shadow:0 18px 45px rgba(90,70,20,.08); }
html[data-theme="light"] .momo-loading h2 { color:#1E2A38; }
html[data-theme="light"] .momo-loading-copy { color:#55606C; }
html[data-theme="light"] .momo-loading-mark { background:#FFFDF7; }
html[data-theme="light"] .momo-loading-track { background:#EDE4CE; }
html[data-theme="light"] .momo-loading-step-index { color:#847961; background:#FFFDF7; border-color:#DED1B1; }
@media (prefers-reduced-motion:reduce) {
  .momo-loading-mark::before, .momo-loading-mark::after, .momo-loading-track::after { animation:none; }
  .momo-loading-track > span { transition:none; }
}

/* High-contrast users get system colors and no low-value atmosphere. */
@media (forced-colors: active) {
  .bg-fx, .grain { display:none !important; }
  .card, .card-2 { background:Canvas !important; border-color:CanvasText !important; box-shadow:none !important; }
  .site-head { background:Canvas !important; border-bottom-color:CanvasText !important; box-shadow:none !important; backdrop-filter:none !important; }
  .page-head { background:none !important; border-bottom-color:CanvasText !important; }
  .site-nav a[aria-current="page"] { color:LinkText !important; background:Canvas !important; border-inline-start:3px solid Highlight; }
  .site-nav a[aria-current="page"]::after { display:none !important; }
}

/* ============================================================
   MOMO EDGE SHELL — desktop navigation stays reachable at the
   left edge, then gives the study canvas its full width again when
   the pointer leaves. Focus-within keeps the same path keyboard-safe.
   ============================================================ */
@media (min-width:901px) {
  body[data-page] > .site-head {
    position:fixed;
    inset:0 auto 0 0;
    width:286px;
    height:100vh;
    border-right:1px solid #173049;
    border-bottom:0;
    transform:translateX(calc(-100% + 22px));
    transition:transform .28s cubic-bezier(.22,.8,.26,1), box-shadow .28s ease;
    overflow:visible;
    box-shadow:12px 0 34px -28px rgba(0,0,0,.96);
  }
  body[data-page] > .site-head:hover,
  body[data-page] > .site-head:focus-within {
    transform:translateX(0);
    box-shadow:20px 0 48px -24px rgba(0,0,0,.96), 1px 0 0 rgba(var(--accent-rgb),.08);
  }
  body[data-page] > .site-head::after {
    content:">";
    position:absolute;
    top:50%;
    right:-14px;
    display:grid;
    place-items:center;
    width:28px;
    height:112px;
    color:var(--accent-bright);
    background:linear-gradient(180deg,rgba(var(--accent-rgb),.88),rgba(var(--accent-rgb),.55));
    border:1px solid rgba(var(--accent-bright-rgb),.72);
    border-left:0;
    border-radius:0 15px 15px 0;
    box-shadow:7px 0 22px -12px rgba(var(--accent-rgb),.68);
    font:700 1.5rem/1 'Space Mono',monospace;
    transform:translateY(-50%);
    transition:background-color .2s ease, color .2s ease, box-shadow .2s ease;
    pointer-events:auto;
    cursor:ew-resize;
  }
  body[data-page] > .site-head:hover::after,
  body[data-page] > .site-head:focus-within::after {
    content:"<";
    color:#1A1205;
    background:linear-gradient(180deg,var(--accent-hi),var(--accent));
    box-shadow:7px 0 22px -12px rgba(var(--accent-rgb),.45);
  }
  body[data-page] > .site-head .container-x {
    width:100%;
    max-width:none;
    height:100%;
    padding:1.65rem 1rem 1.25rem;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:1.1rem;
    overflow-y:auto;
    overflow-x:hidden;
    scrollbar-width:thin;
    scrollbar-color:rgba(var(--accent-rgb),.45) transparent;
  }
  body[data-page] > .site-head .container-x > a[aria-label] {
    justify-content:center;
    gap:.65rem;
    min-height:48px;
    padding:0 .3rem .95rem;
    border-bottom:1px solid rgba(var(--accent-rgb),.18);
  }
  body[data-page] > .site-head .container-x > a[aria-label] img { width:auto; height:42px; }
  body[data-page] > .site-head .site-nav {
    width:100%;
    min-width:0;
    flex:none;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:.24rem;
    overflow:visible;
  }
  body[data-page] > .site-head .site-nav a,
  html.role-admin body[data-page] > .site-head .site-nav a {
    width:100%;
    min-height:46px;
    justify-content:flex-start;
    gap:.72rem;
    padding:.62rem .72rem;
    font-size:.82rem;
    letter-spacing:.01em;
    border-left:2px solid transparent;
    border-radius:10px;
    transition:color .18s ease, background-color .18s ease, border-color .18s ease, transform .18s ease;
  }
  body[data-page] > .site-head .site-nav a::before {
    content:"";
    flex:0 0 1.25rem;
    width:1.25rem;
    height:1.25rem;
    display:grid;
    place-items:center;
    color:var(--accent);
    border:1px solid rgba(var(--accent-rgb),.46);
    border-radius:7px;
    font:700 .58rem/1 'Space Mono',monospace;
    letter-spacing:0;
  }
  body[data-page] > .site-head .site-nav a[data-nav="home"]::before { content:"H"; }
  body[data-page] > .site-head .site-nav a[data-nav="oracle"]::before { content:"N"; }
  body[data-page] > .site-head .site-nav a[data-nav="study"]::before { content:"L"; }
  body[data-page] > .site-head .site-nav a[data-nav="arcade"]::before { content:"A"; }
  body[data-page] > .site-head .site-nav a[data-nav="games"]::before { content:"P"; }
  body[data-page] > .site-head .site-nav a[data-nav="premium"]::before { content:"U"; }
  body[data-page] > .site-head .site-nav a[data-nav="roadmap"]::before { content:"R"; }
  body[data-page] > .site-head .site-nav a[data-nav="settings"]::before { content:"S"; }
  body[data-page] > .site-head .site-nav a[data-nav="homework"]::before { content:"H"; }
  body[data-page] > .site-head .site-nav a[data-nav="calendar"]::before { content:"C"; }
  body[data-page] > .site-head .site-nav a[data-nav="pipelines"]::before { content:"P"; }
  body[data-page] > .site-head .site-nav a[data-nav="voice"]::before { content:"V"; }
  body[data-page] > .site-head .site-nav a[data-nav="accounts"]::before { content:"C"; }
  body[data-page] > .site-head .site-nav a[data-nav="updates"]::before { content:"U"; }
  body[data-page] > .site-head .site-nav a::after {
    left:auto;
    right:.72rem;
    bottom:auto;
    top:50%;
    width:3px;
    height:0;
    transform:translateY(-50%);
    transform-origin:center;
    background:var(--accent-bright);
    transition:height .2s ease;
  }
  body[data-page] > .site-head .site-nav a:hover { transform:translateX(3px); }
  body[data-page] > .site-head .site-nav a[aria-current="page"] { border-left-color:var(--accent-bright); }
  body[data-page] > .site-head .site-nav a[aria-current="page"]::before { color:#1A1205; background:var(--accent); border-color:var(--accent); }
  body[data-page] > .site-head .site-nav a[aria-current="page"]::after { height:22px; }
  body[data-page] > .site-head .nav-tools {
    width:100%;
    margin-top:auto;
    justify-content:stretch;
    flex-wrap:wrap;
    padding-top:.9rem;
    border-top:1px solid rgba(var(--accent-rgb),.18);
  }
  body[data-page] > .site-head .nav-account { flex:1 1 100%; margin-left:0; overflow:hidden; text-overflow:ellipsis; }

  body[data-page] > .site-head:not(:hover):not(:focus-within) .container-x > a[aria-label] {
    gap:0;
    padding-inline:0;
    border-bottom-color:transparent;
  }
  body[data-page] > .site-head:not(:hover):not(:focus-within) .container-x > a[aria-label] img { height:34px; }
  body[data-page] > .site-head:not(:hover):not(:focus-within) .container-x > a[aria-label] span { display:none; }
  body[data-page] > .site-head:not(:hover):not(:focus-within) .site-nav a {
    justify-content:center;
    gap:0;
    padding-inline:0;
    font-size:0;
    border-left-color:transparent;
  }
  body[data-page] > .site-head:not(:hover):not(:focus-within) .site-nav a::before {
    flex-basis:1.45rem;
    width:1.45rem;
    height:1.45rem;
    font-size:.58rem;
  }
  body[data-page] > .site-head:not(:hover):not(:focus-within) .site-nav a::after { display:none; }
  body[data-page] > .site-head:not(:hover):not(:focus-within) .nav-tools { justify-content:center; border-top-color:transparent; }
  body[data-page] > .site-head:not(:hover):not(:focus-within) .nav-tools > *:not(.theme-toggle) { display:none; }
  body[data-page] > .site-head:not(:hover):not(:focus-within) .theme-toggle { width:38px; height:38px; font-size:.9rem; }

  body:has(.site-head:hover) #main,
  body:has(.site-head:focus-within) #main,
  body:has(.site-head:hover) footer,
  body:has(.site-head:focus-within) footer {
    margin-left:286px;
    width:calc(100% - 286px);
    max-width:none;
  }
  #main, footer { transition:margin-left .28s cubic-bezier(.22,.8,.26,1); }
}

/* Motion that helps the learner read the product path. */
.reading-progress {
  position:fixed;
  inset:0 0 auto 0;
  z-index:80;
  height:2px;
  transform-origin:left center;
  transform:scaleX(var(--scroll-progress,0));
  background:linear-gradient(90deg,var(--accent),var(--accent-bright),#4FB6E6);
  box-shadow:0 0 14px rgba(var(--accent-rgb),.6);
  pointer-events:none;
}
.hero-route {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.45rem;
  margin:0 0 1.4rem;
  color:#CFC3A6;
  font:700 .62rem 'Space Mono',monospace;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.hero-route-node { display:inline-flex; align-items:center; gap:.4rem; }
.hero-route-dot { width:7px; height:7px; border:1px solid var(--accent-bright); border-radius:50%; background:rgba(var(--accent-rgb),.22); box-shadow:0 0 0 3px rgba(var(--accent-rgb),.06); }
.hero-route-arrow { width:30px; height:1px; background:linear-gradient(90deg,var(--accent),rgba(var(--accent-rgb),.08)); position:relative; overflow:hidden; }
.hero-route-arrow::after { content:""; position:absolute; inset:0 auto 0 0; width:10px; background:var(--accent-bright); box-shadow:0 0 10px var(--accent); animation:routePulse 2.4s ease-in-out infinite; }
@keyframes routePulse { 0%,100%{ transform:translateX(-12px); opacity:.2; } 45%,65%{ transform:translateX(31px); opacity:1; } }
.onboarding-step { position:relative; overflow:hidden; }
.onboarding-step::before { content:""; position:absolute; inset:0; background:linear-gradient(105deg,transparent 35%,rgba(var(--accent-bright-rgb),.08) 50%,transparent 65%); transform:translateX(-115%); transition:transform .55s ease; pointer-events:none; }
.onboarding-step:hover::before, .onboarding-step:focus-visible::before { transform:translateX(115%); }
.onboarding-number { transition:transform .2s ease, box-shadow .2s ease; }
.onboarding-step:hover .onboarding-number, .onboarding-step:focus-visible .onboarding-number { transform:translateY(-2px) rotate(-4deg); box-shadow:0 6px 14px -8px rgba(var(--accent-rgb),.9); }
.onboarding-arrow { display:inline-flex; transition:transform .2s ease; }
.onboarding-step:hover .onboarding-arrow, .onboarding-step:focus-visible .onboarding-arrow { transform:translateX(5px); }
.journey-card { position:relative; overflow:hidden; }
.journey-card::before { content:""; position:absolute; left:1.45rem; right:1.45rem; bottom:1rem; height:1px; background:linear-gradient(90deg,var(--accent),transparent 75%); transform:scaleX(.15); transform-origin:left; opacity:.5; transition:transform .28s ease, opacity .28s ease; }
.journey-card:hover::before, .journey-card:focus-visible::before { transform:scaleX(1); opacity:1; }
.journey-link { display:inline-flex; align-items:center; gap:.45rem; transition:transform .2s ease; }
.journey-card:hover .journey-link, .journey-card:focus-visible .journey-link { transform:translateX(5px); }
#progressPanel .card-2 { position:relative; overflow:hidden; }
#progressPanel .card-2::after { content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:linear-gradient(90deg,transparent,var(--accent),transparent); transform:scaleX(.2); opacity:.45; transition:transform .3s ease, opacity .3s ease; }
#progressPanel .card-2:hover::after, #progressPanel .card-2:focus-visible::after { transform:scaleX(1); opacity:1; }
.metric-meter { height:4px; margin-top:.85rem; border-radius:999px; background:#08131F; overflow:hidden; border:1px solid #14283C; }
.metric-meter > span { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#9C7C28,var(--accent-bright)); transition:width .8s cubic-bezier(.22,.8,.26,1); }

@media (min-width:901px){
  html[data-theme="light"] body[data-page] > .site-head { border-right-color:#E3D6B8; }
}
@media (forced-colors:active){
  body[data-page] > .site-head::after, .reading-progress { forced-color-adjust:none; background:CanvasText; color:Canvas; box-shadow:none; }
}
@media (prefers-reduced-motion:reduce){
  body[data-page] > .site-head, body[data-page] > .site-head::after, .onboarding-step::before, .onboarding-number,
  .onboarding-arrow, .journey-card::before, .journey-link, #progressPanel .card-2::after, .metric-meter > span { transition:none !important; }
  .hero-route-arrow::after { animation:none !important; }
  .reading-progress { box-shadow:none; }
}

/* ============================================================
   MOMO COMMAND DRAWER
   Explicit, Codex-style navigation: the menu button is always visible,
   the drawer overlays the study canvas, and a scrim makes dismissal clear.
   ============================================================ */
:root { --momo-drawer-width:312px; --momo-shell-ease:cubic-bezier(.22,.8,.26,1); }

.nav-drawer-toggle {
  position:fixed; top:15px; left:15px; z-index:130;
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  min-width:92px; min-height:46px; padding:.55rem .78rem;
  color:#F2E9D8; background:rgba(7,16,27,.92);
  border:1px solid rgba(var(--accent-rgb),.62); border-radius:12px;
  box-shadow:0 12px 28px -18px rgba(0,0,0,.96), inset 0 1px 0 rgba(var(--accent-bright-rgb),.14);
  cursor:pointer; font:700 .62rem 'Space Mono',monospace; letter-spacing:.1em;
  text-transform:uppercase; touch-action:manipulation;
  transition:left .3s var(--momo-shell-ease), color .18s ease, background-color .18s ease,
    border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.nav-drawer-toggle:hover { color:var(--accent-bright); border-color:var(--accent-bright); background:rgba(11,24,40,.98); transform:translateY(-1px); }
.nav-drawer-toggle:active { transform:translateY(1px) scale(.98); }
.nav-drawer-toggle:focus-visible { outline:2px solid var(--accent-bright); outline-offset:3px; }
.nav-drawer-toggle.is-open { left:calc(var(--momo-drawer-width) - 110px); color:#1A1205; background:linear-gradient(180deg,var(--accent-hi),var(--accent)); border-color:var(--accent-bright); }
.nav-drawer-glyph { display:grid; width:19px; gap:4px; }
.nav-drawer-glyph i { display:block; width:100%; height:1.5px; background:currentColor; border-radius:999px; transition:transform .2s ease, opacity .2s ease; }
.nav-drawer-toggle.is-open .nav-drawer-glyph i:first-child { transform:translateY(5.5px) rotate(45deg); }
.nav-drawer-toggle.is-open .nav-drawer-glyph i:nth-child(2) { opacity:0; }
.nav-drawer-toggle.is-open .nav-drawer-glyph i:last-child { transform:translateY(-5.5px) rotate(-45deg); }
.nav-drawer-label { line-height:1; }
.nav-drawer-scrim { position:fixed; inset:0; z-index:105; border:0; background:rgba(1,3,7,.64); backdrop-filter:blur(4px); cursor:pointer; opacity:1; }
.nav-drawer-scrim[hidden] { display:none !important; }
.nav-burger { display:none !important; }

/* The old edge shell rules remain above for already-cached stylesheets; these later,
   explicit-state rules supersede hover/focus expansion without changing the logo. */
body[data-page] > .site-head {
  position:fixed !important; inset:0 auto 0 0 !important;
  width:var(--momo-drawer-width) !important; height:100dvh !important;
  transform:translate3d(-100%,0,0) !important;
  z-index:110 !important; pointer-events:none;
  border-right:1px solid #173049 !important; border-bottom:0 !important;
  transition:transform .32s var(--momo-shell-ease), box-shadow .32s ease !important;
  box-shadow:18px 0 50px -28px rgba(0,0,0,.98) !important;
}
body[data-page] > .site-head:hover,
body[data-page] > .site-head:focus-within { transform:translate3d(-100%,0,0) !important; }
body[data-page] > .site-head.is-drawer-open,
body[data-page] > .site-head.is-drawer-open:hover,
body[data-page] > .site-head.is-drawer-open:focus-within {
  transform:translate3d(0,0,0) !important; pointer-events:auto;
  box-shadow:22px 0 60px -24px rgba(0,0,0,.98), 1px 0 0 rgba(var(--accent-rgb),.12) !important;
}
body[data-page] > .site-head::after { display:none !important; }
body[data-page] > .site-head .container-x {
  width:100% !important; max-width:none !important; height:100% !important;
  padding:1.35rem 1rem 1.1rem !important; flex-direction:column !important;
  align-items:stretch !important; justify-content:flex-start !important; gap:1rem !important;
  overflow-y:auto !important; overflow-x:hidden !important;
  scrollbar-width:thin; scrollbar-color:rgba(var(--accent-rgb),.48) transparent;
}
body[data-page] > .site-head .container-x > a[aria-label] {
  justify-content:flex-start !important; gap:.7rem !important; min-height:50px !important;
  padding:0 .7rem 1rem !important; border-bottom:1px solid rgba(var(--accent-rgb),.2) !important;
}
body[data-page] > .site-head .container-x > a[aria-label] img { height:42px !important; width:auto !important; }
body[data-page] > .site-head .container-x > a[aria-label] span { display:inline !important; }
body[data-page] > .site-head .site-nav {
  width:100% !important; min-width:0 !important; flex:none !important;
  display:flex !important; flex-direction:column !important; align-items:stretch !important;
  position:static !important; inset:auto !important; z-index:auto !important;
  gap:.26rem !important; overflow:visible !important; max-height:none !important;
  padding:0 !important; background:transparent !important; border:0 !important; box-shadow:none !important;
}
body[data-page] > .site-head .site-nav a,
html.role-admin body[data-page] > .site-head .site-nav a {
  width:100% !important; min-height:46px !important; justify-content:flex-start !important;
  gap:.72rem !important; padding:.62rem .72rem !important; font-size:.82rem !important;
  letter-spacing:.01em; border-left:2px solid transparent; border-radius:10px;
  transition:color .18s ease, background-color .18s ease, border-color .18s ease, transform .18s ease !important;
}
body[data-page] > .site-head .site-nav a::before {
  content:""; flex:0 0 1.25rem; width:1.25rem; height:1.25rem;
  display:grid; place-items:center; color:var(--accent); border:1px solid rgba(var(--accent-rgb),.46);
  border-radius:7px; font:700 .58rem/1 'Space Mono',monospace; letter-spacing:0;
}
body[data-page] > .site-head .site-nav a[data-nav="home"]::before { content:"H"; }
body[data-page] > .site-head .site-nav a[data-nav="oracle"]::before { content:"N"; }
body[data-page] > .site-head .site-nav a[data-nav="study"]::before { content:"L"; }
body[data-page] > .site-head .site-nav a[data-nav="arcade"]::before { content:"A"; }
body[data-page] > .site-head .site-nav a[data-nav="games"]::before { content:"P"; }
body[data-page] > .site-head .site-nav a[data-nav="premium"]::before { content:"U"; }
body[data-page] > .site-head .site-nav a[data-nav="roadmap"]::before { content:"R"; }
body[data-page] > .site-head .site-nav a[data-nav="settings"]::before { content:"S"; }
body[data-page] > .site-head .site-nav a[data-nav="homework"]::before { content:"H"; }
body[data-page] > .site-head .site-nav a[data-nav="calendar"]::before { content:"C"; }
body[data-page] > .site-head .site-nav a[data-nav="pipelines"]::before { content:"P"; }
body[data-page] > .site-head .site-nav a[data-nav="voice"]::before { content:"V"; }
body[data-page] > .site-head .site-nav a[data-nav="accounts"]::before { content:"C"; }
body[data-page] > .site-head .site-nav a::after {
  left:auto !important; right:.72rem !important; bottom:auto !important; top:50% !important;
  width:3px !important; height:0 !important; transform:translateY(-50%) !important;
  transform-origin:center !important; background:var(--accent-bright) !important;
  transition:height .2s ease !important;
}
body[data-page] > .site-head .site-nav a:hover { transform:translateX(3px); }
body[data-page] > .site-head .site-nav a[aria-current="page"] { border-left-color:var(--accent-bright); color:var(--accent-bright); background:rgba(var(--accent-rgb),.08); }
body[data-page] > .site-head .site-nav a[aria-current="page"]::before { color:#1A1205; background:var(--accent); border-color:var(--accent); }
body[data-page] > .site-head .site-nav a[aria-current="page"]::after { height:22px !important; }
body[data-page] > .site-head .nav-tools {
  width:100% !important; margin-top:auto !important; justify-content:stretch !important;
  flex-wrap:wrap !important; padding-top:.9rem !important; border-top:1px solid rgba(var(--accent-rgb),.18) !important;
}
body[data-page] > .site-head .nav-tools > * { display:inline-flex !important; visibility:visible !important; }
body[data-page] > .site-head .nav-tools .nav-burger { display:none !important; }
body[data-page] > .site-head .nav-account { flex:1 1 100%; margin-left:0; overflow:hidden; text-overflow:ellipsis; }
body[data-page] > .site-head:not(.is-drawer-open) .nav-tools { opacity:0; }

/* Drawer is an overlay, so the study canvas never jumps sideways while it opens. */
body:has(.site-head:hover) #main, body:has(.site-head:focus-within) #main,
body:has(.site-head:hover) footer, body:has(.site-head:focus-within) footer,
body:has(.site-head.is-drawer-open) #main, body:has(.site-head.is-drawer-open) footer {
  margin-left:auto !important; width:auto !important; max-width:1240px !important;
}
body[data-page] > #main { max-width:1240px; padding-top:6rem !important; transition:none !important; }

/* A calmer page frame: open composition, stronger hierarchy, and a page-specific
   coordinate marker so feature pages feel like workspaces rather than cloned cards. */
body[data-page] > #main > .page-head {
  position:relative; isolation:isolate; overflow:hidden;
  min-height:210px; margin-bottom:clamp(2rem,4vw,3.3rem); padding:clamp(2.3rem,5vw,4.5rem) 25% 2.1rem 0;
  border-bottom:1px solid rgba(var(--accent-rgb),.34);
  background:linear-gradient(90deg,rgba(var(--accent-rgb),.1),transparent 42%), linear-gradient(180deg,rgba(11,24,40,.32),transparent);
}
body[data-page] > #main > .page-head::before {
  content:"MOMO / WORKSPACE"; position:absolute; top:1.1rem; right:0; z-index:-1;
  color:rgba(var(--accent-bright-rgb),.48); font:700 .55rem 'Space Mono',monospace; letter-spacing:.17em;
}
body[data-page] > #main > .page-head::after {
  content:""; position:absolute; right:3%; bottom:1rem; width:clamp(150px,24vw,290px); height:clamp(150px,24vw,290px);
  border:1px solid rgba(var(--accent-rgb),.18); border-radius:50%;
  box-shadow:0 0 0 20px rgba(var(--accent-rgb),.025), 0 0 0 44px rgba(var(--accent-rgb),.018);
  background:radial-gradient(circle at 50% 50%,rgba(var(--accent-rgb),.18) 0 2px,transparent 3px), linear-gradient(30deg,transparent 49.7%,rgba(var(--accent-rgb),.14) 50%,transparent 50.3%), linear-gradient(150deg,transparent 49.7%,rgba(var(--accent-rgb),.1) 50%,transparent 50.3%);
  pointer-events:none;
}
body[data-page] > #main > .page-head .eyebrow,
body[data-page] > #main > .page-head h1,
body[data-page] > #main > .page-head p { position:relative; z-index:1; }
body[data-page] > #main > .page-head h1 { max-width:16ch; font-size:clamp(2rem,4.8vw,3.65rem); line-height:.99; letter-spacing:-.035em; }
body[data-page] > #main > .page-head p { max-width:61ch; font-size:.98rem; line-height:1.7; }
body[data-page] #main > .card:not(a):not(button):hover { transform:none; }
body[data-page] #main > section.card, body[data-page] #main > div.card { box-shadow:inset 0 1px 0 rgba(var(--accent-bright-rgb),.06), 0 22px 48px -34px rgba(0,0,0,.94); }
body[data-page="home"] > #main > section.relative.card { min-height:clamp(430px,58vh,610px); display:flex; align-items:flex-end; }
body[data-page="home"] > #main > section.relative.card .relative.z-\[2\] { max-width:680px; padding-top:clamp(5rem,10vw,8rem); }
body[data-page="study"] .study-launch-grid { grid-template-columns:1.25fr .75fr; gap:1.25rem; }
body[data-page="study"] .study-launch { min-height:235px; display:flex; align-items:flex-end; }
body[data-page="oracle"] .grid-main, body[data-page="calendar"] .grid-main { align-items:start; }
body[data-page="games"] .games-hero, body[data-page="mock"] .mock-hero { border-color:rgba(var(--accent-rgb),.46); box-shadow:inset 0 1px 0 rgba(var(--accent-bright-rgb),.12), 0 24px 52px -34px rgba(0,0,0,.96); }
body[data-page="premium"] > #main > .page-head { padding-right:0; text-align:center; }
body[data-page="premium"] > #main > .page-head h1 { max-width:none; margin-inline:auto; }

@media (max-width:720px){
  :root { --momo-drawer-width:min(88vw,330px); }
  .nav-drawer-toggle { top:12px; left:12px; min-height:48px; }
  .nav-drawer-toggle.is-open { left:calc(var(--momo-drawer-width) - 110px); }
  body[data-page] > #main { padding-top:5.5rem !important; }
  body[data-page] > #main > .page-head { min-height:190px; padding:2.6rem 0 1.8rem; }
  body[data-page] > #main > .page-head::before { top:.85rem; }
  body[data-page] > #main > .page-head::after { right:-8%; bottom:-28%; width:190px; height:190px; }
  body[data-page] > #main > .page-head h1 { font-size:clamp(2rem,10vw,3rem); }
  body[data-page="home"] > #main > section.relative.card { min-height:460px; }
  body[data-page="home"] > #main > section.relative.card .relative.z-\[2\] { padding-top:4.5rem; }
  body[data-page="study"] .study-launch-grid { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){
  .nav-drawer-toggle, .nav-drawer-glyph i, body[data-page] > .site-head,
  body[data-page] > .site-head .site-nav a, body[data-page] > #main > * { transition:none !important; animation:none !important; }
}

/* ============================================================
   MOMO LEARNING ATLAS
   A richer, interactive background and motion language for every route.
   Motion reveals focus, progress, and navigation state; it is never required
   to read or operate the page.
   ============================================================ */
:root {
  --momo-pointer-x:50vw;
  --momo-pointer-y:24vh;
  --momo-atlas-ease:cubic-bezier(.22,.8,.26,1);
}
body[data-page] {
  background:#020610;
}
body[data-page]::before {
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(560px 460px at var(--momo-pointer-x) var(--momo-pointer-y), rgba(var(--accent-bright-rgb),.105), transparent 72%),
    radial-gradient(920px 620px at 94% -12%, rgba(24,92,128,.22), transparent 68%),
    radial-gradient(760px 580px at 4% 96%, rgba(37,45,100,.16), transparent 70%);
  opacity:.9;
  animation:momoAtlasBreath 14s ease-in-out infinite alternate;
}
body[data-page] .bg-fx {
  opacity:.98;
  background:
    linear-gradient(118deg, transparent 0 28%, rgba(35,120,153,.085) 42%, transparent 55%),
    radial-gradient(ellipse 720px 390px at 73% 8%, rgba(32,126,153,.18), transparent 69%),
    radial-gradient(ellipse 640px 520px at 9% 84%, rgba(67,62,142,.14), transparent 70%),
    radial-gradient(circle at 48% 42%, rgba(10,28,51,.28), transparent 52%),
    repeating-linear-gradient(128deg, rgba(var(--accent-bright-rgb),.026) 0 1px, transparent 1px 74px),
    repeating-linear-gradient(38deg, rgba(93,177,205,.018) 0 1px, transparent 1px 108px),
    #020610;
  background-size:160% 160%, 135% 120%, 125% 135%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  background-position:0 0, 100% 0, 0 100%, 50% 50%, 0 0, 0 0, 0 0;
  animation:momoAtlasDrift 28s ease-in-out infinite alternate;
}
body[data-page] .bg-fx::before,
body[data-page] .bg-fx::after {
  content:"";
  position:absolute;
  pointer-events:none;
}
body[data-page] .bg-fx::before {
  inset:-18%;
  background:
    conic-gradient(from 184deg at 40% 38%, transparent 0 23%, rgba(64,174,207,.18) 31%, transparent 40% 60%, rgba(96,83,181,.14) 67%, transparent 78% 100%);
  filter:blur(36px);
  opacity:.62;
  transform:rotate(-8deg) scale(1.05);
  animation:momoAuroraSweep 21s ease-in-out infinite alternate;
}
body[data-page] .bg-fx::after {
  inset:0;
  opacity:.34;
  background:
    radial-gradient(circle at 16% 24%, rgba(236,210,126,.9) 0 1px, transparent 2px),
    radial-gradient(circle at 42% 18%, rgba(154,215,242,.8) 0 1px, transparent 2px),
    radial-gradient(circle at 78% 30%, rgba(236,210,126,.8) 0 1px, transparent 2px),
    radial-gradient(circle at 88% 76%, rgba(154,215,242,.7) 0 1px, transparent 2px),
    linear-gradient(24deg, transparent 49.7%, rgba(236,210,126,.07) 50%, transparent 50.3%),
    linear-gradient(156deg, transparent 49.7%, rgba(154,215,242,.055) 50%, transparent 50.3%);
  background-size:260px 210px, 310px 240px, 380px 280px, 420px 330px, 220px 160px, 260px 190px;
  animation:momoStarMapDrift 34s linear infinite;
}
body[data-page] .momo-gradient-canvas {
  opacity:.38;
  mix-blend-mode:screen;
  filter:saturate(1.12) contrast(1.05);
}
.momo-ambient-field {
  position:fixed;
  inset:0;
  z-index:2;
  overflow:hidden;
  pointer-events:none;
  opacity:.68;
}
.momo-ambient-field::before {
  content:"";
  position:absolute;
  left:-14%;
  right:-14%;
  top:55%;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(var(--accent-rgb),.34) 18%, rgba(154,215,242,.3) 50%, rgba(var(--accent-rgb),.24) 82%, transparent);
  box-shadow:0 0 28px rgba(79,182,230,.22);
  transform:rotate(-9deg);
  opacity:.6;
}
.momo-ambient-field::after {
  content:"";
  position:absolute;
  width:54vw;
  height:54vw;
  right:-18vw;
  bottom:-28vw;
  border:1px solid rgba(var(--accent-rgb),.18);
  border-radius:50%;
  box-shadow:0 0 0 26px rgba(var(--accent-rgb),.035), 0 0 0 54px rgba(79,182,230,.025);
  animation:momoOrbitDrift 36s linear infinite;
}
.momo-ambient-star {
  position:absolute;
  left:var(--star-x);
  top:var(--star-y);
  width:var(--star-size);
  height:var(--star-size);
  border-radius:50%;
  background:var(--accent-bright);
  box-shadow:0 0 0 2px rgba(var(--accent-rgb),.08), 0 0 10px rgba(var(--accent-rgb),.72);
  animation:momoStarPulse 5.6s ease-in-out infinite;
  animation-delay:var(--star-delay);
}
.momo-ambient-star::after {
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:clamp(12px,2vw,28px);
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(var(--accent-bright-rgb),.68), transparent);
  transform:translate(-50%,-50%) rotate(var(--star-angle));
  transform-origin:center;
  opacity:.58;
}

@keyframes momoAtlasBreath { from{ opacity:.72; } to{ opacity:1; } }
@keyframes momoAtlasDrift {
  0%{ background-position:0 0, 100% 0, 0 100%, 50% 50%, 0 0, 0 0, 0 0; }
  100%{ background-position:5% 3%, 90% 8%, 5% 92%, 52% 48%, 18px 10px, -14px 20px, 0 0; }
}
@keyframes momoAuroraSweep { from{ transform:rotate(-8deg) translate3d(-2%,0,0) scale(1.03); } to{ transform:rotate(-3deg) translate3d(4%,3%,0) scale(1.1); } }
@keyframes momoStarMapDrift { from{ background-position:0 0, 0 0, 0 0, 0 0, 0 0, 0 0; } to{ background-position:34px 18px, -42px 24px, 56px -18px, -28px 46px, 22px -20px, -36px 26px; } }
@keyframes momoOrbitDrift { from{ transform:rotate(0deg) scale(1); } to{ transform:rotate(360deg) scale(1.04); } }
@keyframes momoStarPulse { 0%,100%{ opacity:.35; transform:scale(.72); } 45%{ opacity:1; transform:scale(1); } 64%{ opacity:.62; transform:scale(1.22); } }

/* Staggered reveal turns repeated sections into a readable learning sequence. */
html.momo-motion-ready .momo-stagger-item {
  opacity:0;
  transform:translateY(18px) scale(.985);
  animation:none !important;
  transition:opacity .62s ease, transform .62s var(--momo-atlas-ease);
  transition-delay:calc(var(--momo-stagger-order, 0) * 42ms);
}
html.momo-motion-ready .momo-stagger-item.is-visible { opacity:1; transform:none; }
html.momo-motion-ready .metric-meter > span { animation:momoMeterGlow 3.4s ease-in-out infinite; }
@keyframes momoMeterGlow { 0%,100%{ filter:brightness(1); } 50%{ filter:brightness(1.18); } }

/* Pointer light and card response: the learner's focus has a visible home. */
body[data-page] .momo-interactive {
  position:relative;
  overflow:hidden;
  --card-x:50%;
  --card-y:16%;
}
body[data-page] .momo-card-spotlight {
  position:absolute;
  inset:0;
  z-index:0;
  border-radius:inherit;
  pointer-events:none;
  background:radial-gradient(220px 160px at var(--card-x) var(--card-y), rgba(var(--accent-bright-rgb),.14), transparent 72%);
  opacity:0;
  transform:scale(.98);
  transition:opacity .28s ease, transform .42s var(--momo-atlas-ease);
  mix-blend-mode:screen;
}
body[data-page] .momo-interactive:hover .momo-card-spotlight,
body[data-page] .momo-interactive:focus-within .momo-card-spotlight { opacity:.82; transform:scale(1.04); }

/* Buttons and route arrows carry the same moving energy as the atlas. */
body[data-page] .btn { position:relative; overflow:hidden; }
body[data-page] .nav-drawer-toggle { overflow:hidden; }
body[data-page] .btn::after,
body[data-page] .nav-drawer-toggle::after {
  content:"";
  position:absolute;
  inset:-20% auto -20% -58%;
  width:34%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent);
  transform:skewX(-18deg) translateX(-160%);
  pointer-events:none;
}
body[data-page] .btn:hover::after,
body[data-page] .btn:focus-visible::after,
body[data-page] .nav-drawer-toggle:hover::after,
body[data-page] .nav-drawer-toggle:focus-visible::after { animation:momoButtonSweep .8s ease both; }
@keyframes momoButtonSweep { to{ transform:skewX(-18deg) translateX(560%); } }
.hero-route-arrow::after { box-shadow:0 0 12px var(--accent-bright); }
.journey-card .journey-link { position:relative; }
.journey-card .journey-link::after {
  content:"";
  display:inline-block;
  width:5px;
  height:5px;
  margin-left:.1rem;
  border-radius:50%;
  background:var(--accent-bright);
  box-shadow:0 0 0 0 rgba(var(--accent-rgb),.55);
  animation:momoSignalPulse 2.2s ease-in-out infinite;
}
@keyframes momoSignalPulse { 0%,100%{ box-shadow:0 0 0 0 rgba(var(--accent-rgb),.45); } 55%{ box-shadow:0 0 0 7px rgba(var(--accent-rgb),0); } }

/* Drawer motion is an explicit state change, with focusable rows entering in order. */
.nav-drawer-scrim { opacity:0; visibility:hidden; transition:opacity .24s ease, visibility .24s ease; }
.nav-drawer-scrim.is-visible { opacity:1; visibility:visible; }
body[data-page] > .site-head.is-drawer-open .site-nav a {
  animation:momoDrawerLinkIn .4s var(--momo-atlas-ease) both;
  animation-delay:calc(var(--nav-index, 0) * 34ms + 70ms);
}
body[data-page] > .site-head.is-drawer-open .container-x > a[aria-label] { animation:momoDrawerLogoIn .45s var(--momo-atlas-ease) both; }
body[data-page] > .site-head .site-nav a[aria-current="page"]::before { animation:momoNavPing 2.8s ease-in-out infinite; }
@keyframes momoDrawerLinkIn { from{ opacity:0; transform:translateX(-12px); } to{ opacity:1; transform:translateX(0); } }
@keyframes momoDrawerLogoIn { from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:none; } }
@keyframes momoNavPing { 0%,100%{ box-shadow:0 0 0 0 rgba(var(--accent-rgb),.34); } 52%{ box-shadow:0 0 0 5px rgba(var(--accent-rgb),0); } }

body[data-page] > #main > .page-head::after { animation:momoPageOrbit 28s linear infinite; }
@keyframes momoPageOrbit { from{ transform:rotate(0deg) scale(1); } 50%{ transform:rotate(180deg) scale(1.025); } to{ transform:rotate(360deg) scale(1); } }

html[data-theme="light"] body[data-page] { background:#F6F0E1; }
html[data-theme="light"] body[data-page]::before { opacity:.22; background:
  radial-gradient(560px 460px at var(--momo-pointer-x) var(--momo-pointer-y), rgba(156,124,40,.14), transparent 72%),
  radial-gradient(920px 620px at 94% -12%, rgba(28,77,99,.08), transparent 68%); }
html[data-theme="light"] body[data-page] .bg-fx { opacity:.72; background:
  linear-gradient(118deg, transparent 0 28%, rgba(28,77,99,.045) 42%, transparent 55%),
  radial-gradient(ellipse 720px 390px at 73% 8%, rgba(156,124,40,.09), transparent 69%),
  radial-gradient(ellipse 640px 520px at 9% 84%, rgba(67,62,142,.055), transparent 70%),
  repeating-linear-gradient(128deg, rgba(93,76,36,.022) 0 1px, transparent 1px 74px),
  #F6F0E1; }
html[data-theme="light"] .momo-ambient-field { opacity:.28; }

@media (max-width:720px){
  body[data-page] .bg-fx::before { opacity:.42; }
  .momo-ambient-field::after { width:86vw; height:86vw; right:-31vw; bottom:-36vw; }
  body[data-page] .momo-interactive:hover .momo-card-spotlight { opacity:.5; }
}
@media (prefers-reduced-motion:reduce){
  body[data-page]::before, body[data-page] .bg-fx, body[data-page] .bg-fx::before, body[data-page] .bg-fx::after,
  .momo-ambient-field, .momo-ambient-field::after, .momo-ambient-star, html.momo-motion-ready .metric-meter > span,
  body[data-page] > #main > .page-head::after,
  body[data-page] .journey-card .journey-link::after { animation:none !important; }
  .momo-ambient-field { display:none; }
  body[data-page] .momo-card-spotlight { display:none; }
}

/* ============================================================
   DAILY STREAK
   ============================================================ */
@keyframes momoCharacterBlink { 0%,92%,100%{ transform:scaleY(1); } 96%{ transform:scaleY(.12); } }

.momo-quest.is-streak-complete .momo-quest__run {
  border-color:var(--accent-bright);
  box-shadow:0 0 0 3px rgba(var(--accent-rgb),.1), 0 0 24px -8px rgba(var(--accent-rgb),.9);
  animation:momoStreakGlow 2.8s ease-in-out infinite;
}
.momo-quest.is-streak-complete .momo-quest__flame { animation:momoStreakFlame .86s var(--momo-atlas-ease) both; }
.momo-quest.is-streak-complete .momo-quest__progress span { box-shadow:0 0 14px rgba(var(--accent-bright-rgb),.65); }
@keyframes momoStreakGlow { 0%,100%{ box-shadow:0 0 0 3px rgba(var(--accent-rgb),.08), 0 0 18px -10px rgba(var(--accent-rgb),.65); } 50%{ box-shadow:0 0 0 5px rgba(var(--accent-rgb),.15), 0 0 28px -6px rgba(var(--accent-rgb),.95); } }
@keyframes momoStreakFlame { 0%{ transform:rotate(45deg) scale(1); } 45%{ transform:rotate(45deg) scale(1.28); } 100%{ transform:rotate(45deg) scale(1); } }

@media (prefers-reduced-motion:reduce){
  .momo-quest.is-streak-complete .momo-quest__run, .momo-quest.is-streak-complete .momo-quest__flame { animation:none !important; }
}

/* ---------- MOMO atlas atmosphere: aurora, contours, and living guides ---------- */
body[data-page] > .bg-fx {
  overflow:hidden;
  background:
    radial-gradient(ellipse 760px 360px at 52% -8%, rgba(68,172,188,.2), transparent 68%),
    radial-gradient(ellipse 520px 300px at 8% 58%, rgba(45,139,157,.14), transparent 70%),
    radial-gradient(ellipse 680px 360px at 92% 78%, rgba(103,75,177,.16), transparent 72%),
    linear-gradient(180deg,#07182B 0%,#071223 43%,#050914 100%);
}
body[data-page] > .bg-fx::before {
  content:"";
  position:absolute;
  inset:-16% -8% 0;
  opacity:.72;
  background:
    radial-gradient(ellipse 360px 150px at 58% 18%, rgba(123,224,211,.16), transparent 72%),
    radial-gradient(ellipse 540px 190px at 28% 32%, rgba(39,137,165,.13), transparent 72%),
    radial-gradient(ellipse 420px 160px at 80% 48%, rgba(129,92,214,.11), transparent 72%);
  filter:blur(10px);
  animation:momoAuroraPulse 14s ease-in-out infinite alternate;
}
body[data-page] > .bg-fx::after {
  content:"";
  position:absolute;
  inset:0;
  opacity:.42;
  background:
    linear-gradient(154deg, transparent 0 61%, rgba(64,178,181,.1) 61.15% 61.35%, transparent 61.55% 67%, rgba(64,178,181,.065) 67.15% 67.35%, transparent 67.55%),
    linear-gradient(166deg, transparent 0 69%, rgba(91,123,206,.1) 69.15% 69.38%, transparent 69.58% 76%, rgba(91,123,206,.06) 76.15% 76.35%, transparent 76.55%),
    linear-gradient(148deg, transparent 0 77%, rgba(219,184,91,.08) 77.15% 77.36%, transparent 77.56%);
  background-size:100% 100%;
  transform:translateY(3%);
  animation:momoContourDrift 20s ease-in-out infinite alternate;
}
@keyframes momoAuroraPulse { 0%{transform:translate3d(-2%,1%,0) scale(1);} 100%{transform:translate3d(2%,-2%,0) scale(1.06);} }
@keyframes momoContourDrift { 0%{transform:translate3d(-1%,3%,0);} 100%{transform:translate3d(1%,-1%,0);} }

/* ---------- daily route / reference-image todo treatment ---------- */
.momo-quest {
  background:
    radial-gradient(ellipse 440px 190px at 16% 0%, rgba(72,191,190,.16), transparent 70%),
    linear-gradient(135deg,rgba(8,39,58,.94),rgba(8,17,32,.98) 54%,rgba(13,20,49,.94));
}
.momo-quest__route-wrap { position:relative; z-index:1; padding:0 1.5rem 1.05rem; }
.momo-quest__route-head { display:flex; align-items:center; justify-content:space-between; gap:.8rem; margin-bottom:.42rem; }
.momo-quest__route-label,.momo-quest__activity-label { color:#78D8CE; font:700 .58rem 'Space Mono',monospace; letter-spacing:.16em; }
.momo-quest__route-head strong { color:#ECD27E; font:700 .63rem 'Space Mono',monospace; }
.momo-quest__route-wrap > .momo-quest__progress { height:5px; margin:0 0 .9rem; background:#071323; border-color:rgba(94,184,194,.25); }
.momo-quest__route-wrap > .momo-quest__progress span { background:linear-gradient(90deg,#3EACA8,#ECD27E 80%,#FFF2B7); box-shadow:0 0 12px rgba(120,216,206,.48); }
.momo-quest__route { position:relative; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.55rem; margin:0; padding:0; list-style:none; }
.momo-quest__route::before { content:""; position:absolute; top:17px; left:6%; right:6%; height:1px; background:linear-gradient(90deg,rgba(104,193,195,.55),rgba(90,107,174,.25)); }
.momo-quest__route-node { position:relative; z-index:1; display:grid; justify-items:center; gap:.35rem; min-width:0; text-align:center; }
.momo-quest__route-marker { display:grid; place-items:center; width:36px; height:36px; overflow:hidden; border:1px solid #2B5169; border-radius:50%; background:#091827; box-shadow:0 0 0 4px rgba(7,18,31,.82); transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease; }
.momo-quest__route-marker .momo-pixel { width:31px; height:31px; image-rendering:pixelated; }
.momo-quest__route-node.is-done .momo-quest__route-marker { border-color:#63C889; background:rgba(64,156,125,.16); box-shadow:0 0 0 4px rgba(7,18,31,.82),0 0 18px rgba(99,200,137,.2); }
.momo-quest__route-node.is-current .momo-quest__route-marker { border-color:#ECD27E; background:rgba(212,175,55,.13); animation:momoRoutePulse 2.2s ease-in-out infinite; }
.momo-quest__route-node.is-locked .momo-quest__route-marker { filter:saturate(.55); opacity:.72; }
.momo-quest__route-node:hover .momo-quest__route-marker { transform:translateY(-3px) scale(1.05); }
.momo-quest__route-copy { min-width:0; }
.momo-quest__route-copy b { display:block; overflow:hidden; color:#F2E9D8; font-size:.66rem; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }
.momo-quest__route-copy small { display:block; margin-top:.14rem; color:#8FAFC0; font:600 .55rem 'Space Mono',monospace; }
.momo-quest__route-state { color:#6F8295; font:700 .5rem 'Space Mono',monospace; letter-spacing:.1em; }
.momo-quest__route-node.is-done .momo-quest__route-state { color:#8FE0AF; }
.momo-quest__route-node.is-current .momo-quest__route-state { color:#ECD27E; }
@keyframes momoRoutePulse { 0%,100%{box-shadow:0 0 0 4px rgba(7,18,31,.82),0 0 0 0 rgba(236,210,126,0);} 50%{box-shadow:0 0 0 4px rgba(7,18,31,.82),0 0 0 7px rgba(236,210,126,.12);} }
.momo-quest__activity-head { display:flex; align-items:end; justify-content:space-between; gap:.8rem; margin:0 0 .55rem; }
.momo-quest__activity-head div { display:flex; flex-direction:column; gap:.18rem; }
.momo-quest__activity-head strong { color:#F2E9D8; font-size:.78rem; }
.momo-quest__activity-note { color:#7892A3; font:600 .55rem 'Space Mono',monospace; }
.momo-quest__activity-icon { display:grid; place-items:center; width:34px; height:34px; overflow:hidden; border:1px solid #244660; border-radius:10px; background:#081523; }
.momo-quest__activity-icon .momo-pixel { width:30px; height:30px; image-rendering:pixelated; }
.momo-quest__item { grid-template-columns:36px minmax(0,1fr) auto auto; gap:.65rem; min-height:62px; padding:.58rem .65rem; border-color:#1D4058; background:rgba(4,14,26,.48); }
.momo-quest__item:hover { transform:translateX(3px); border-color:rgba(120,216,206,.58); background:rgba(65,172,174,.08); }
.momo-quest__item.is-done { border-color:rgba(99,200,137,.6); background:rgba(64,156,125,.1); }
.momo-quest__copy b { white-space:normal; }
.momo-quest__copy small { white-space:normal; }
.momo-quest__time { color:#A7C0CA; font:700 .56rem 'Space Mono',monospace; white-space:nowrap; }
.momo-quest__toggle { min-width:88px; }
@media (max-width:760px){
  .momo-quest__route-wrap { padding-inline:1rem; }
  .momo-quest__route { grid-template-columns:repeat(4,minmax(105px,1fr)); overflow-x:auto; padding:0 .1rem .25rem; scrollbar-width:thin; }
  .momo-quest__route::before { left:8%; right:8%; }
  .momo-quest__item { grid-template-columns:34px minmax(0,1fr) auto; }
  .momo-quest__time { grid-column:2; grid-row:2; justify-self:start; margin-top:-.35rem; }
  .momo-quest__actions { grid-column:3; grid-row:1 / span 2; flex-direction:column; align-items:stretch; }
  .momo-quest__go { text-align:center; }
}
@media (max-width:520px){
  .momo-quest__activity-head { align-items:flex-start; flex-direction:column; gap:.25rem; }
  .momo-quest__top { padding-inline:1rem; }
  .momo-quest__body { padding-inline:1rem; }
}
@media (prefers-reduced-motion:reduce){
  body[data-page] > .bg-fx::before,body[data-page] > .bg-fx::after,.momo-quest__route-node.is-current .momo-quest__route-marker { animation:none; }
  .momo-quest__route-marker,.momo-quest__item { transition:none; }
}

/* ---------- game access state ---------- */
.game-auth-notice { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:.8rem; align-items:center; margin:0 0 1rem; padding:.85rem 1rem; border:1px solid rgba(236,210,126,.38); border-radius:12px; background:linear-gradient(110deg,rgba(236,210,126,.1),rgba(44,116,139,.1)); }
.game-auth-notice__mark { display:grid; place-items:center; width:32px; height:32px; border:1px solid #ECD27E; border-radius:50%; color:#ECD27E; font:700 .8rem 'Space Mono',monospace; }
.game-auth-notice__copy strong { display:block; color:#F2E9D8; font-size:.78rem; }
.game-auth-notice__copy p { margin:.2rem 0 0; color:#A9BFCA; font-size:.66rem; line-height:1.5; }
.game-auth-notice__action { min-height:38px; padding:.45rem .75rem; color:#1A1205; background:#ECD27E; border:1px solid #ECD27E; border-radius:999px; font:700 .58rem 'Space Mono',monospace; text-decoration:none; white-space:nowrap; }
.game-auth-notice__action:hover { background:#FFF2B7; border-color:#FFF2B7; }
@media (max-width:600px){ .game-auth-notice { grid-template-columns:auto minmax(0,1fr); } .game-auth-notice__action { grid-column:2; justify-self:start; } }

/* Keep every newly prominent control comfortable on touch screens. */
.momo-quest__go,
.momo-quest__toggle,
.game-auth-notice__action { min-height:44px; }
.momo-quest__go { display:inline-flex; align-items:center; padding:.35rem .45rem; }
.theme-toggle { width:44px; height:44px; }

/* ============================================================
   MOMO ROUTE WORLD
   Characters are part of the learning path, never a floating assistant.
   ============================================================ */
body[data-page] {
  background:#030814;
}
body[data-page]::before {
  background:
    radial-gradient(520px 380px at var(--momo-pointer-x) var(--momo-pointer-y),rgba(var(--accent-bright-rgb),.105),transparent 74%),
    radial-gradient(860px 520px at 72% -8%,rgba(31,139,166,.2),transparent 68%),
    radial-gradient(720px 520px at 3% 96%,rgba(48,58,132,.16),transparent 70%);
  animation:none;
}
body[data-page] > .bg-fx {
  background:
    radial-gradient(ellipse 820px 330px at 56% -5%,rgba(76,203,197,.17),transparent 69%),
    radial-gradient(ellipse 620px 360px at 8% 64%,rgba(36,125,158,.13),transparent 72%),
    radial-gradient(ellipse 700px 410px at 96% 82%,rgba(100,70,175,.14),transparent 74%),
    linear-gradient(180deg,#06172A 0%,#061121 44%,#030713 100%);
  animation:none;
}
body[data-page] > .bg-fx::before {
  inset:-18% -10% 24%;
  opacity:.62;
  background:conic-gradient(from 196deg at 54% 34%,transparent 0 27%,rgba(72,198,194,.2) 34%,transparent 43% 63%,rgba(90,82,185,.13) 72%,transparent 82% 100%);
  filter:blur(34px);
  animation:none;
}
body[data-page] > .bg-fx::after {
  opacity:.34;
  background:
    linear-gradient(156deg,transparent 0 63%,rgba(73,184,187,.09) 63.15% 63.35%,transparent 63.55% 70%,rgba(73,184,187,.055) 70.15% 70.35%,transparent 70.55%),
    linear-gradient(167deg,transparent 0 73%,rgba(101,126,207,.08) 73.15% 73.36%,transparent 73.56% 80%,rgba(218,181,80,.06) 80.15% 80.36%,transparent 80.56%);
  animation:none;
}
.momo-atlas-map {
  position:fixed;
  inset:0;
  z-index:2;
  overflow:hidden;
  pointer-events:none;
  opacity:.58;
  mix-blend-mode:screen;
}
.momo-atlas-map svg { display:block; width:100%; height:100%; }
.momo-atlas-map__contours path,
.momo-atlas-map__route {
  fill:none;
  vector-effect:non-scaling-stroke;
  stroke-linecap:round;
  stroke-dasharray:12 10;
  stroke-dashoffset:120;
  animation:momoAtlasLineDraw 1.25s var(--momo-atlas-ease) forwards;
}
.momo-atlas-map__contours path { stroke:rgba(78,173,184,.19); stroke-width:1; }
.momo-atlas-map__contours path:nth-child(2n) { stroke:rgba(99,119,194,.15); animation-delay:90ms; }
.momo-atlas-map__route { stroke:rgba(var(--accent-bright-rgb),.25); stroke-width:1.15; animation-delay:160ms; }
.momo-atlas-map__nodes circle {
  fill:var(--accent-bright);
  opacity:0;
  filter:drop-shadow(0 0 5px rgba(var(--accent-bright-rgb),.78));
  animation:momoAtlasNodeIn .45s ease-out forwards;
}
.momo-atlas-map__nodes circle:nth-child(2){animation-delay:.28s}.momo-atlas-map__nodes circle:nth-child(3){animation-delay:.42s}.momo-atlas-map__nodes circle:nth-child(4){animation-delay:.56s}
@keyframes momoAtlasLineDraw { to{ stroke-dashoffset:0; } }
@keyframes momoAtlasNodeIn { from{opacity:0;transform:scale(.3)} to{opacity:.8;transform:scale(1)} }

body[data-page] > #main .page-head {
  position:relative;
  min-height:142px;
  padding-right:190px;
  overflow:hidden;
  isolation:isolate;
  background:
    linear-gradient(90deg,rgba(5,14,27,.92),rgba(8,28,45,.68) 58%,rgba(8,19,38,.34)),
    radial-gradient(circle at 82% 38%,rgba(var(--accent-rgb),.13),transparent 28%);
  border:1px solid rgba(76,164,177,.22);
  border-radius:18px;
  box-shadow:inset 0 1px 0 rgba(196,243,232,.04),0 24px 60px -48px rgba(0,0,0,.96);
  margin-top:1.15rem;
  margin-bottom:1.25rem;
  padding-left:1.5rem;
}
body[data-page] > #main .page-head::before {
  content:"";
  position:absolute;
  z-index:-1;
  inset:auto -4% -52px 42%;
  height:106px;
  border:1px solid rgba(var(--accent-rgb),.18);
  border-radius:50%;
  transform:rotate(-8deg);
  box-shadow:0 0 0 18px rgba(82,185,188,.025),0 0 0 38px rgba(104,91,188,.018);
}
body[data-page] > #main .page-head::after { animation:none; }

.momo-page-character {
  position:absolute;
  right:18px;
  top:50%;
  z-index:2;
  width:150px;
  height:106px;
  transform:translateY(-50%);
  pointer-events:none;
}
.momo-page-character__trail {
  position:absolute;
  left:0;
  right:8px;
  top:56px;
  height:1px;
  overflow:visible;
  background:linear-gradient(90deg,transparent,rgba(91,199,199,.42) 30%,rgba(var(--accent-bright-rgb),.8));
  transform:scaleX(0);
  transform-origin:left;
  animation:momoGuideTrail .62s var(--momo-atlas-ease) .12s forwards;
}
.momo-page-character__trail::before,
.momo-page-character__trail::after {
  content:"";
  position:absolute;
  top:50%;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--accent-bright);
  box-shadow:0 0 10px rgba(var(--accent-bright-rgb),.8);
  transform:translateY(-50%);
}
.momo-page-character__trail::before{left:18%}.momo-page-character__trail::after{right:2%}
.momo-page-character__trail i {
  position:absolute;
  right:14px;
  top:-22px;
  width:48px;
  height:48px;
  border:1px solid rgba(var(--accent-rgb),.25);
  border-radius:50%;
  box-shadow:0 0 0 9px rgba(var(--accent-rgb),.035);
}
.momo-page-character__sprite {
  position:absolute;
  right:11px;
  top:8px;
  width:82px;
  height:82px;
  opacity:0;
  transform:translate3d(28px,8px,0) rotate(6deg) scale(.84);
  animation:momoGuideArrive .7s var(--momo-atlas-ease) .24s forwards;
  filter:drop-shadow(0 12px 10px rgba(0,0,0,.35));
}
.momo-page-character__sprite svg { display:block; width:100%; height:100%; }
.momo-page-character__sprite .momo-pixel { image-rendering:pixelated; }
.momo-page-character__sprite .gc-eyes { transform-box:fill-box; transform-origin:center; animation:momoCharacterBlink 6.4s 1.2s infinite; }
.momo-page-character__tag {
  position:absolute;
  right:1px;
  bottom:0;
  padding:.26rem .46rem;
  color:#A4DED7;
  background:rgba(4,15,28,.78);
  border:1px solid rgba(94,193,193,.28);
  font:700 .48rem 'Space Mono',monospace;
  letter-spacing:.12em;
}
@keyframes momoGuideTrail { to{transform:scaleX(1)} }
@keyframes momoGuideArrive { to{opacity:1;transform:none} }

.has-momo-character { position:relative; isolation:isolate; }
.momo-character-peek {
  position:absolute;
  right:10px;
  bottom:-13px;
  z-index:3;
  display:block;
  width:48px;
  height:48px;
  opacity:.82;
  pointer-events:none;
  transform:translateY(14px) rotate(4deg);
  transition:opacity .2s ease,transform .3s var(--momo-atlas-ease),filter .2s ease;
  filter:drop-shadow(0 7px 5px rgba(0,0,0,.34));
}
.momo-character-peek svg { display:block; width:100%; height:100%; }
.momo-character-peek .momo-pixel { image-rendering:pixelated; }
.games-hero > .momo-character-peek,
.mock-hero > .momo-character-peek,
.updates-hero > .momo-character-peek { right:18px; bottom:-16px; width:74px; height:74px; opacity:.94; }
.has-momo-character:hover .momo-character-peek,
.has-momo-character:focus-within .momo-character-peek { opacity:1; transform:translateY(2px) rotate(-2deg); filter:brightness(1.08) drop-shadow(0 9px 6px rgba(0,0,0,.4)); }
.momo-integrated-character.is-reacting .float-hero,
.momo-page-character.is-reacting .momo-page-character__sprite,
.momo-character-peek.is-reacting,
.momo-game-runner.is-reacting { animation:momoCharacterReact .82s var(--momo-atlas-ease) both !important; }
[data-mood="miss"].is-reacting .momo-page-character__sprite,
[data-mood="miss"].momo-game-runner.is-reacting { animation:momoCharacterThink .52s ease both !important; }
@keyframes momoCharacterReact { 0%{transform:translateY(0) rotate(0) scale(1)} 34%{transform:translateY(-12px) rotate(-7deg) scale(1.08)} 68%{transform:translateY(-4px) rotate(7deg) scale(1.03)} 100%{transform:translateY(0) rotate(0) scale(1)} }
@keyframes momoCharacterThink { 0%,100%{transform:translateX(0) rotate(0)} 30%{transform:translateX(-4px) rotate(-4deg)} 70%{transform:translateX(4px) rotate(4deg)} }

.momo-quest__body { display:block; padding:0 1.5rem 1.2rem; }
.momo-quest__missions { width:100%; }
.momo-quest__route-marker {
  width:42px;
  height:42px;
  color:#8FAFC0;
  background:rgba(6,18,33,.92);
}
.momo-quest__route::before { top:20px; }
.momo-quest__route-marker .momo-pixel { width:38px; height:38px; animation:momoRouteGuideArrive .56s var(--momo-atlas-ease) both; }
.momo-quest__route-node.is-current .momo-quest__route-marker { transform:scale(1.12); animation:none; box-shadow:0 0 0 4px rgba(7,18,31,.82),0 0 0 7px rgba(var(--accent-rgb),.09),0 0 24px rgba(var(--accent-rgb),.28); }
.momo-quest__route-node.is-done .momo-quest__route-marker { color:#8FE0AF; }
.momo-quest__check { width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.momo-quest__step-number { font:700 .72rem 'Space Mono',monospace; }
@keyframes momoRouteGuideArrive { from{opacity:0;transform:translateX(-18px) translateY(6px) scale(.72)} to{opacity:1;transform:none} }
.momo-quest__activity-icon { overflow:visible; }
.momo-quest__activity-icon .momo-pixel { transition:transform .25s var(--momo-atlas-ease),filter .2s ease; }
.momo-quest__item:hover .momo-quest__activity-icon .momo-pixel,
.momo-quest__item:focus-within .momo-quest__activity-icon .momo-pixel { transform:translateY(-4px) rotate(-3deg); filter:brightness(1.1); }
.momo-quest__item.is-newly-done { animation:momoTaskComplete .62s var(--momo-atlas-ease) both; }
.momo-quest__item.is-newly-done .momo-quest__activity-icon .momo-pixel { animation:momoCharacterReact .72s var(--momo-atlas-ease) both; }
@keyframes momoTaskComplete { 0%{box-shadow:inset 0 0 0 0 rgba(99,200,137,0)} 45%{box-shadow:inset 0 0 0 2px rgba(99,200,137,.5),0 0 24px rgba(99,200,137,.12)} 100%{box-shadow:inset 0 0 0 0 rgba(99,200,137,0)} }
.momo-quest__status-row { display:flex; align-items:center; min-width:0; gap:.55rem; }
.momo-quest__status-character { display:grid; place-items:center; flex:0 0 34px; width:34px; height:34px; border:1px solid rgba(92,193,193,.3); border-radius:10px; background:rgba(5,18,31,.7); }
.momo-quest__status-character .momo-pixel { width:31px; height:31px; image-rendering:pixelated; }
.momo-quest.is-reacting .momo-quest__status-character .momo-pixel,
.momo-quest.is-celebrating .momo-quest__status-character .momo-pixel { animation:momoCharacterReact .76s var(--momo-atlas-ease) both; }
.momo-quest.is-streak-complete .momo-quest__run { animation:momoStreakLock .78s var(--momo-atlas-ease) both; }
@keyframes momoStreakLock { 0%{transform:scale(.92);box-shadow:none} 52%{transform:scale(1.06);box-shadow:0 0 0 6px rgba(var(--accent-rgb),.13),0 0 28px rgba(var(--accent-rgb),.38)} 100%{transform:scale(1);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.08)} }

#stage .sprint-hud { position:relative; padding-right:68px; }
.momo-game-runner {
  position:absolute;
  right:10px;
  top:50%;
  z-index:3;
  display:block;
  width:52px;
  height:52px;
  transform:translateY(-50%);
  pointer-events:none;
  filter:drop-shadow(0 8px 6px rgba(0,0,0,.38));
}
.momo-game-runner .momo-pixel { display:block; width:100%; height:100%; image-rendering:pixelated; }

body.page-leave .momo-page-character__sprite { transform:translate3d(34px,-8px,0) rotate(7deg) scale(.86); opacity:0; transition:transform .15s ease-in,opacity .15s ease-in; }
body.page-leave .momo-page-character__trail { transform:scaleX(.15); transform-origin:right; transition:transform .15s ease-in; }

html[data-theme="light"] .momo-atlas-map { opacity:.2; mix-blend-mode:multiply; }
html[data-theme="light"] body[data-page] > #main .page-head { background:linear-gradient(90deg,rgba(255,253,247,.96),rgba(239,247,245,.86)); border-color:#D8CBAA; }
html[data-theme="light"] .momo-page-character__tag { color:#245B62; background:rgba(255,253,247,.88); border-color:#B7D4CF; }
html[data-theme="light"] .momo-quest__status-character { background:#F5F0E2; border-color:#D8CBAA; }

@media (max-width:760px){
  body[data-page] > #main .page-head { min-height:126px; margin-top:.75rem; padding:1.25rem 92px 1.2rem 1rem; border-radius:14px; }
  body[data-page="home"] .hero-char { display:block; right:-34px; top:auto; bottom:-12px; width:158px; height:196px; opacity:.22; }
  body[data-page="home"] .hero-char svg { right:0; bottom:0; width:auto; height:100%; }
  .momo-page-character { right:4px; width:92px; height:86px; }
  .momo-page-character__sprite { right:7px; top:12px; width:62px; height:62px; }
  .momo-page-character__trail { top:48px; }
  .momo-page-character__trail i { right:10px; top:-17px; width:38px; height:38px; }
  .momo-page-character__tag { display:none; }
  .momo-character-peek { width:42px; height:42px; opacity:.74; }
  .games-hero > .momo-character-peek,
  .mock-hero > .momo-character-peek,
  .updates-hero > .momo-character-peek { right:10px; bottom:-10px; width:58px; height:58px; opacity:.88; }
  .momo-quest__body { padding-inline:1rem; }
  .momo-quest__route-marker { width:38px; height:38px; }
  .momo-quest__route::before { top:18px; }
  .momo-quest__route-marker .momo-pixel { width:34px; height:34px; }
}
@media (max-width:520px){
  body[data-page] > #main .page-head { padding-right:78px; }
  .momo-page-character { width:78px; opacity:.88; }
  .momo-page-character__trail { left:12px; }
  .momo-quest__bottom { gap:.6rem; }
  .momo-quest__status-row { align-items:flex-start; }
}
@media (prefers-reduced-motion:reduce){
  .momo-atlas-map__contours path,.momo-atlas-map__route,.momo-atlas-map__nodes circle,
  .momo-page-character__trail,.momo-page-character__sprite,.momo-page-character__sprite .gc-eyes,
  .momo-integrated-character.is-reacting .float-hero,.momo-page-character.is-reacting .momo-page-character__sprite,
  .momo-character-peek,.momo-game-runner,.momo-game-runner.is-reacting,
  .momo-quest__route-marker .momo-pixel,.momo-quest__item.is-newly-done,
  .momo-quest__item.is-newly-done .momo-pixel,.momo-quest.is-reacting .momo-pixel,
  .momo-quest.is-streak-complete .momo-quest__run { animation:none !important; transition:none !important; }
  .momo-page-character__trail { transform:scaleX(1); }
  .momo-page-character__sprite { opacity:1; transform:none; }
}

/* ---------- verified study-time reward rail ---------- */
.momo-quest__body { grid-template-columns:minmax(190px,.72fr) minmax(0,1.28fr); align-items:stretch; gap:1rem; }
.momo-quest__time-core,
.momo-quest__reward-panel { min-height:178px; padding:1rem; border:1px solid rgba(94,184,194,.24); background:linear-gradient(145deg,rgba(8,34,50,.78),rgba(5,14,27,.62)); }
.momo-quest__time-core { position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:center; }
.momo-quest__time-core::after { content:""; position:absolute; width:120px; height:120px; right:-42px; bottom:-44px; border:1px solid rgba(120,216,206,.2); border-radius:50%; box-shadow:0 0 0 12px rgba(120,216,206,.035),0 0 0 24px rgba(120,216,206,.025); animation:momoTimeOrbit 8s linear infinite; pointer-events:none; }
.momo-quest__minute-readout { display:flex; align-items:baseline; gap:.55rem; margin:.42rem 0 .8rem; }
.momo-quest__minute-readout strong { color:#F8EAC5; font:800 clamp(3rem,5vw,4.8rem)/.9 'Cinzel',serif; letter-spacing:-.05em; text-shadow:0 0 24px rgba(236,210,126,.15); }
.momo-quest__minute-readout span { color:#91B6C1; font:700 .62rem 'Space Mono',monospace; text-transform:uppercase; letter-spacing:.1em; }
.momo-quest__mini-track,
.study-reward-rail__track { height:8px; overflow:hidden; padding:1px; background:#071323; border:1px solid rgba(94,184,194,.3); }
.momo-quest__mini-track span,
.study-reward-rail__track span { display:block; width:0; height:100%; background:linear-gradient(90deg,#3EACA8,#ECD27E 76%,#FFF2B7); box-shadow:0 0 13px rgba(120,216,206,.52); transition:width .35s var(--momo-atlas-ease); }
.momo-quest__time-core p { max-width:30ch; margin:.65rem 0 0; color:#8CA8B5; font-size:.64rem; line-height:1.5; }
.momo-quest__reward-panel { display:flex; flex-direction:column; justify-content:space-between; }
.momo-quest__reward-panel .momo-quest__activity-head { align-items:center; margin-bottom:.85rem; }
.momo-quest__reward-panel .momo-quest__activity-head strong { display:block; margin-top:.2rem; color:#F2E9D8; font-size:.78rem; }
.momo-quest__reward-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.45rem; }
.momo-quest__reward-stats div { padding:.55rem .6rem; border:1px solid rgba(56,111,135,.38); background:rgba(4,15,27,.58); }
.momo-quest__reward-stats span { display:block; color:#7594A2; font:700 .51rem 'Space Mono',monospace; letter-spacing:.08em; }
.momo-quest__reward-stats strong { display:block; margin-top:.2rem; color:#ECD27E; font:800 1.15rem 'Cinzel',serif; }
.momo-quest__prizes { display:flex; flex-wrap:wrap; gap:.45rem; min-height:42px; margin-top:.75rem; }
.momo-quest__prize { display:inline-flex; align-items:center; gap:.45rem; min-width:0; padding:.42rem .55rem; border:1px solid rgba(120,216,206,.3); background:rgba(61,170,169,.08); }
.momo-quest__prize i { display:grid; place-items:center; width:22px; height:22px; flex:0 0 22px; color:#1B2630; background:#ECD27E; border-radius:50%; font-style:normal; }
.momo-quest__prize b,.momo-quest__prize small { display:block; }
.momo-quest__prize b { color:#F2E9D8; font-size:.61rem; }
.momo-quest__prize small { margin-top:.1rem; color:#86A6B2; font:600 .5rem 'Space Mono',monospace; }
.momo-quest__prize--empty { border-style:dashed; background:rgba(4,15,27,.32); }
.momo-quest__prize--empty i { color:#8BA7B1; background:#183348; }
.momo-quest__prize--empty b { color:#AFC3C7; }
.momo-quest__bottom { background:rgba(4,14,25,.18); }
.momo-quest.is-streak-complete .momo-quest__time-core { border-color:rgba(236,210,126,.6); box-shadow:inset 0 0 30px rgba(236,210,126,.06),0 0 30px rgba(236,210,126,.08); }
@keyframes momoTimeOrbit { to { transform:rotate(360deg); } }
.study-reward-rail { margin-top:1.1rem; padding:1rem; border:1px solid rgba(94,184,194,.26); background:linear-gradient(135deg,rgba(62,172,168,.08),rgba(212,175,55,.06)); }
.study-reward-rail__head,.study-reward-rail__stats { display:flex; align-items:center; justify-content:space-between; gap:.8rem; }
.study-reward-rail__head { color:#7FA7B1; font:700 .56rem 'Space Mono',monospace; letter-spacing:.13em; }
.study-reward-rail__head strong { color:#ECD27E; }
.study-reward-rail__track { height:7px; margin:.6rem 0 .65rem; }
.study-reward-rail__stats { color:#91AAB2; font:600 .58rem 'Space Mono',monospace; }
.study-reward-rail__stats b { color:#F2E9D8; }
@media (max-width:760px){
  .momo-quest__body { grid-template-columns:1fr; }
  .momo-quest__time-core,.momo-quest__reward-panel { min-height:150px; }
}
@media (max-width:520px){
  .momo-quest__reward-stats { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .momo-quest__reward-stats div { padding:.45rem .35rem; }
  .momo-quest__reward-stats strong { font-size:1rem; }
  .momo-quest__reward-panel .momo-quest__activity-head { align-items:flex-start; flex-direction:column; }
  .study-reward-rail__stats { align-items:flex-start; flex-direction:column; gap:.25rem; }
}
@media (prefers-reduced-motion:reduce){
  .momo-quest__time-core::after { animation:none; }
  .momo-quest__mini-track span,.study-reward-rail__track span { transition:none; }
}

/* The roadmap is a working surface, so keep its first checklist signal closer to the fold. */
body[data-page="roadmap"] > #main .page-head { min-height:0; padding-top:2.35rem; padding-bottom:2rem; }
body[data-page="roadmap"] > #main .page-head h1 { max-width:22ch; font-size:clamp(2rem,4vw,3.2rem); line-height:1.04; }
body[data-page="roadmap"] > #main .page-head p { max-width:66ch; }

/* ---------- AI certificate roadmap v4: luminous timeline ---------- */
body[data-page="roadmap"] { --roadmap-ink:#050A12; --roadmap-panel:#08131F; --roadmap-line:#19344B; overflow-x:hidden; }
body[data-page="roadmap"] #main { position:relative; }
body[data-page="roadmap"] #main::before { content:""; position:absolute; z-index:-1; top:0; right:-10vw; width:58vw; height:500px;
  background:radial-gradient(circle at 50% 34%, rgba(47,193,237,.13), transparent 60%); pointer-events:none; }
.roadmap-hero { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(280px,.95fr); align-items:center; gap:2rem; min-height:410px; padding:3.1rem 0 2.5rem; }
.roadmap-hero-copy { min-width:0; }
.roadmap-kicker { display:flex; align-items:center; gap:.55rem; color:var(--accent-bright); font:700 .63rem 'Space Mono',monospace; letter-spacing:.15em; text-transform:uppercase; }
.roadmap-kicker--small { font-size:.56rem; letter-spacing:.12em; }
.roadmap-kicker-dot { display:inline-block; width:.55rem; height:.55rem; border-radius:50%; background:var(--accent-bright); box-shadow:0 0 16px rgba(var(--accent-bright-rgb),.9); }
.roadmap-hero h1 { max-width:12ch; margin:.9rem 0 1rem; color:#F4EBDC; font:700 clamp(3rem,7.1vw,6.7rem)/.9 'Cinzel',serif; letter-spacing:-.045em; }
.roadmap-hero h1 span { color:#35D2F1; text-shadow:0 0 28px rgba(53,210,241,.18); }
.roadmap-hero-copy > p { max-width:50ch; color:#A9B8C7; font-size:.9rem; line-height:1.7; }
.roadmap-hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:1rem; margin-top:1.55rem; }
.roadmap-hero-actions .btn { min-height:44px; padding:.65rem 1rem; }
.roadmap-hero-caption { color:#73889B; font:700 .59rem 'Space Mono',monospace; letter-spacing:.03em; }
.roadmap-hero-visual { position:relative; min-height:340px; overflow:hidden; border:1px solid rgba(58,105,135,.5); border-radius:24px; background:linear-gradient(145deg,rgba(10,26,42,.92),rgba(4,11,20,.76)); box-shadow:inset 0 0 50px rgba(42,184,223,.06),0 18px 80px rgba(0,0,0,.18); }
.roadmap-hero-visual::after { content:""; position:absolute; inset:0; opacity:.34; background-image:linear-gradient(rgba(55,117,151,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(55,117,151,.16) 1px,transparent 1px); background-size:38px 38px; mask-image:linear-gradient(to bottom,transparent,black 50%,transparent); pointer-events:none; }
.roadmap-orbit { position:absolute; border:1px solid rgba(47,201,238,.35); border-radius:50%; transform:rotate(-22deg); }
.roadmap-orbit--one { width:380px; height:170px; top:55px; left:50%; margin-left:-190px; }
.roadmap-orbit--two { width:300px; height:130px; top:75px; left:50%; margin-left:-150px; border-color:rgba(245,185,66,.35); transform:rotate(26deg); }
.roadmap-hero-core { position:absolute; z-index:2; top:103px; left:50%; display:grid; place-items:center; width:118px; height:118px; margin-left:-59px; border:1px solid #F5B942; border-radius:50%; color:#F8E7BA; background:radial-gradient(circle,#1B2B36,#09131E 66%); box-shadow:0 0 0 9px rgba(245,185,66,.08),0 0 44px rgba(245,185,66,.3); font:700 .56rem/1.4 'Space Mono',monospace; letter-spacing:.16em; text-align:center; }
.roadmap-hero-core__glyph { display:block; margin-bottom:.12rem; color:#F5B942; font-size:2rem; line-height:1; text-shadow:0 0 18px rgba(245,185,66,.8); }
.roadmap-hero-spark { position:absolute; z-index:2; width:6px; height:6px; border-radius:50%; background:#35D2F1; box-shadow:0 0 16px #35D2F1; }
.roadmap-hero-spark--one { top:53px; right:18%; }
.roadmap-hero-spark--two { top:161px; left:17%; background:#F5B942; box-shadow:0 0 16px #F5B942; }
.roadmap-hero-stats { position:absolute; z-index:2; right:1rem; bottom:1rem; left:1rem; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid rgba(105,152,177,.3); padding-top:.85rem; }
.roadmap-hero-stats div { display:grid; gap:.18rem; text-align:center; }
.roadmap-hero-stats strong { color:#F2E9D8; font:700 1.35rem 'Cinzel',serif; }
.roadmap-hero-stats span { color:#8094A6; font:700 .53rem 'Space Mono',monospace; letter-spacing:.08em; text-transform:uppercase; }
.roadmap-disclaimer { display:flex; align-items:flex-start; gap:.85rem; margin-top:.4rem; padding:1rem 1.1rem; border:1px solid rgba(245,185,66,.22); border-left:2px solid var(--accent); background:rgba(245,185,66,.045); }
.roadmap-disclaimer-mark { display:grid; place-items:center; flex:0 0 1.55rem; width:1.55rem; height:1.55rem; margin-top:.1rem; border:1px solid rgba(245,185,66,.55); border-radius:50%; color:var(--accent-bright); font:700 .72rem 'Space Mono',monospace; }
.roadmap-disclaimer p { margin:0; color:#A9B5C0; font-size:.76rem; line-height:1.6; }
.roadmap-disclaimer strong { color:#F2E9D8; }
.roadmap-overview { margin-top:1.15rem; padding:1.35rem; overflow:hidden; border-color:#1B3A50; background:linear-gradient(135deg,rgba(8,21,33,.94),rgba(5,13,22,.94)); }
.roadmap-overview-head { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; }
.roadmap-overview-head h2 { margin-top:.42rem; }
.roadmap-total { flex:0 0 auto; text-align:right; color:var(--accent-bright); font:700 .64rem 'Space Mono',monospace; letter-spacing:.08em; text-transform:uppercase; }
.roadmap-total strong { display:block; color:#F2E9D8; font:700 1.65rem 'Cinzel',serif; letter-spacing:0; text-transform:none; }
.roadmap-progress { height:8px; margin-top:1.1rem; overflow:hidden; border:1px solid #1A3A51; border-radius:999px; background:#07101B; }
.roadmap-progress span { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#F5B942,#35D2F1,#7CE0B0); box-shadow:0 0 18px rgba(53,210,241,.28); transition:width .35s ease; }
.roadmap-subject-mini-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.7rem; margin-top:1rem; }
.roadmap-subject-mini { min-width:0; padding:.72rem .8rem; border:1px solid #18364B; border-radius:11px; background:#07121E; }
.roadmap-subject-mini__head { display:flex; justify-content:space-between; gap:.65rem; align-items:baseline; }
.roadmap-subject-mini__name { min-width:0; overflow:hidden; color:#DDE5EB; font-size:.71rem; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
.roadmap-subject-mini__meta { flex:0 0 auto; color:var(--accent-bright); font:700 .58rem 'Space Mono',monospace; }
.roadmap-subject-mini__meter { height:4px; margin-top:.55rem; overflow:hidden; border-radius:999px; background:#10263A; }
.roadmap-subject-mini__meter span { display:block; width:0; height:100%; border-radius:inherit; background:var(--accent); transition:width .35s ease; }
.roadmap-shield-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.9rem; margin-top:1rem; }
.roadmap-shield { position:relative; display:grid; grid-template-columns:auto minmax(0,1fr); gap:.8rem; min-width:0; overflow:hidden; padding:1rem; border-color:rgba(255,98,74,.42); background:linear-gradient(135deg,rgba(53,21,27,.65),rgba(12,21,31,.94)); }
.roadmap-shield::before { content:""; position:absolute; top:0; right:0; width:46%; height:2px; background:linear-gradient(90deg,transparent,#FF6A4C); }
.roadmap-shield-icon { display:grid; place-items:center; flex:0 0 2.2rem; width:2.2rem; height:2.2rem; border:1px solid rgba(255,106,76,.74); border-radius:50%; color:#FF866C; font:700 1rem 'Space Mono',monospace; box-shadow:0 0 20px rgba(255,106,76,.14); }
.roadmap-shield-eyebrow { color:#FF876F; font:700 .55rem 'Space Mono',monospace; letter-spacing:.14em; }
.roadmap-shield h2 { margin-top:.27rem; color:#F0E9E0; font:700 .9rem 'Cinzel',serif; }
.roadmap-shield > div > strong { display:block; margin-top:.32rem; color:#FFB09A; font:700 .71rem 'Space Mono',monospace; }
.roadmap-shield p { margin-top:.38rem; color:#B9A8A3; font-size:.68rem; line-height:1.45; }
.roadmap-shield a { display:inline-block; margin-top:.55rem; color:#FFAA93; font:700 .59rem 'Space Mono',monospace; text-decoration:none; }
.roadmap-shield a:hover { color:#FFF0E6; text-decoration:underline; }
.roadmap-shield-details { display:grid; gap:.24rem; margin:.5rem 0 0; padding:0; list-style:none; }
.roadmap-shield-details li { display:flex; flex-wrap:wrap; gap:.45rem; color:#B99F99; font-size:.59rem; line-height:1.35; }
.roadmap-shield-details time { flex:0 0 5.7rem; color:#F1A58F; font:700 .56rem 'Space Mono',monospace; }
.roadmap-shield-details__pending { color:#FFC0A8 !important; font-family:'Space Mono',monospace; }
.roadmap-shield--loading { color:#A9B8C7; }
.roadmap-layout { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(270px,.6fr); align-items:start; gap:1.2rem; margin-top:1.2rem; }
.roadmap-timeline { position:relative; display:grid; gap:1.15rem; min-width:0; }
.roadmap-timeline::before { content:""; position:absolute; z-index:0; top:2.2rem; bottom:2.2rem; left:2.62rem; width:1px; background:linear-gradient(#F5B942,#35D2F1 50%,#6E9BFF 85%,transparent); opacity:.6; }
.roadmap-phase { position:relative; z-index:1; display:grid; grid-template-columns:82px minmax(0,1fr); gap:1.15rem; min-width:0; padding:1.25rem; overflow:hidden; border-color:#1B3A50; background:linear-gradient(135deg,rgba(8,21,33,.97),rgba(5,13,22,.97)); }
.roadmap-phase::after { content:""; position:absolute; top:0; right:0; width:40%; height:1px; background:linear-gradient(90deg,transparent,var(--phase-accent)); }
.roadmap-phase-rail { display:flex; flex-direction:column; align-items:center; gap:.65rem; }
.roadmap-phase-number { display:grid; place-items:center; width:3.2rem; height:3.2rem; border:1px solid var(--phase-accent); border-radius:50%; color:var(--phase-accent); background:#091723; box-shadow:0 0 0 7px rgba(43,126,157,.08),0 0 25px color-mix(in srgb,var(--phase-accent) 22%,transparent); font:700 .78rem 'Space Mono',monospace; }
.roadmap-phase-label { color:var(--phase-accent); font:700 .56rem 'Space Mono',monospace; letter-spacing:.13em; writing-mode:vertical-rl; transform:rotate(180deg); }
.roadmap-phase-main { min-width:0; }
.roadmap-phase-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; }
.roadmap-phase-session { color:var(--phase-accent); font:700 .58rem 'Space Mono',monospace; letter-spacing:.08em; text-transform:uppercase; }
.roadmap-phase-title { margin:.4rem 0 0; color:#F1E8D8; font:700 clamp(1.05rem,1.7vw,1.5rem)/1.18 'Cinzel',serif; }
.roadmap-phase-progress { flex:0 0 auto; min-width:4.4rem; text-align:right; }
.roadmap-phase-progress strong { display:block; color:var(--phase-accent); font:700 1.2rem 'Cinzel',serif; }
.roadmap-phase-progress span { display:block; margin-top:.16rem; color:#8297A9; font:700 .54rem 'Space Mono',monospace; white-space:nowrap; }
.roadmap-phase-note { max-width:62ch; margin:.72rem 0 0; color:#93A6B6; font-size:.72rem; line-height:1.55; }
.roadmap-phase-bar { height:5px; margin-top:.85rem; overflow:hidden; border-radius:999px; background:#0F2538; }
.roadmap-phase-bar span { display:block; width:0; height:100%; border-radius:inherit; background:var(--phase-accent); box-shadow:0 0 14px color-mix(in srgb,var(--phase-accent) 35%,transparent); transition:width .35s ease; }
.roadmap-task-list { display:grid; gap:.58rem; margin:1.05rem 0 .85rem; padding:0; list-style:none; }
.roadmap-task-card { display:grid; grid-template-columns:30px minmax(0,1fr) 142px; align-items:start; gap:.68rem; min-width:0; padding:.75rem .68rem; border:1px solid #18364B; border-radius:12px; background:rgba(6,16,27,.72); transition:border-color .15s ease,background-color .15s ease,transform .15s ease; }
.roadmap-task-card:hover { transform:translateY(-1px); border-color:rgba(var(--accent-rgb),.45); background:rgba(12,31,45,.76); }
.roadmap-task-card:focus-within { border-color:rgba(var(--accent-rgb),.7); background:rgba(var(--accent-rgb),.065); }
.roadmap-task-card.is-done { border-color:rgba(124,224,176,.24); background:rgba(12,39,36,.34); }
.roadmap-task-marker { position:relative; display:grid; place-items:center; width:30px; height:30px; cursor:pointer; }
.roadmap-checkbox { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
.roadmap-checkmark { display:block; width:1.1rem; height:1.1rem; border:1px solid #47667E; border-radius:50%; background:#07101B; transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease; }
.roadmap-checkbox:checked + .roadmap-checkmark { border-color:#7CE0B0; background:#7CE0B0; box-shadow:inset 0 0 0 3px #07101B,0 0 14px rgba(124,224,176,.35); }
.roadmap-checkbox:focus-visible + .roadmap-checkmark { outline:2px solid var(--accent-bright); outline-offset:3px; }
.roadmap-task-body { min-width:0; }
.roadmap-task-topline { display:flex; flex-wrap:wrap; align-items:center; gap:.42rem; min-height:1.05rem; }
.roadmap-provider { color:#8298AA; font:700 .55rem 'Space Mono',monospace; letter-spacing:.05em; text-transform:uppercase; }
.roadmap-type { padding:.2rem .38rem; border:1px solid rgba(53,210,241,.35); border-radius:999px; color:#7EE4F5; font:700 .49rem 'Space Mono',monospace; letter-spacing:.05em; }
.roadmap-type--cert,.roadmap-type--decision { border-color:rgba(245,185,66,.48); color:#F5CA6E; }
.roadmap-type--course { border-color:rgba(53,210,241,.4); color:#7EE4F5; }
.roadmap-type--custom { border-color:rgba(158,167,182,.42); color:#B8C1CC; }
.roadmap-task-input { min-width:0; width:100%; margin-top:.3rem; border:0; border-bottom:1px solid transparent; outline:0; padding:.16rem 0; color:#F1E8D8; background:transparent; font:600 .78rem/1.4 'Poppins',sans-serif; }
.roadmap-task-input:focus { border-bottom-color:var(--accent); }
.roadmap-task-card.is-done .roadmap-task-input { color:#81979C; text-decoration:line-through; text-decoration-color:rgba(124,224,176,.58); }
.roadmap-task-relevance { display:block; margin-top:.28rem; color:#8398A8; font-size:.63rem; line-height:1.42; }
.roadmap-task-warning { display:block; margin-top:.42rem; padding:.4rem .5rem; border-left:2px solid #F5B942; color:#E1C98F; background:rgba(245,185,66,.07); font-size:.59rem; line-height:1.45; }
.roadmap-task-meta { display:flex; flex-wrap:wrap; align-items:center; gap:.42rem .65rem; margin-top:.52rem; }
.roadmap-task-hours { color:#6E8495; font:700 .54rem 'Space Mono',monospace; letter-spacing:.04em; text-transform:uppercase; }
.roadmap-source-link { color:#55D8F1; font:700 .55rem 'Space Mono',monospace; text-decoration:none; }
.roadmap-source-link:hover { color:#D7F8FF; text-decoration:underline; }
.roadmap-source-link--replacement { color:#F5C86A; }
.roadmap-task-controls { display:flex; flex-direction:column; align-items:stretch; gap:.52rem; min-width:0; }
.roadmap-task-date-field { display:grid; gap:.22rem; justify-items:stretch; min-width:0; }
.roadmap-task-date-caption { color:#8198A8; font:700 .5rem 'Space Mono',monospace; letter-spacing:.08em; text-transform:uppercase; }
.roadmap-task-date { width:100%; min-height:33px; padding:.3rem .4rem; border:1px solid #2B4B62; border-radius:7px; color:#D9CBAA; background:#07101B; font:700 .59rem 'Space Mono',monospace; }
.roadmap-task-date:focus-visible { outline:2px solid var(--accent-bright); outline-offset:2px; }
.roadmap-task-date-readable { color:#A0B0BC; font:700 .53rem 'Space Mono',monospace; }
.roadmap-task-date-note { color:#8093A3; font-size:.55rem; line-height:1.35; }
.roadmap-remove { min-height:32px; padding:.32rem .5rem; border:1px solid rgba(142,75,78,.42); border-radius:7px; color:#C08D8A; background:rgba(113,43,45,.1); font:700 .56rem 'Space Mono',monospace; cursor:pointer; }
.roadmap-remove:hover { color:#FFE5DF; border-color:#E26E69; background:rgba(163,59,55,.22); }
.roadmap-remove:focus-visible { outline:2px solid var(--accent-bright); outline-offset:2px; }
.roadmap-empty { padding:.8rem .7rem; border:1px dashed #29425A; border-radius:10px; color:#8F9CAF; font-size:.76rem; line-height:1.5; }
.roadmap-add { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:.55rem; align-items:center; }
.roadmap-add .field { min-width:0; font-size:.78rem; }
.roadmap-add-date { width:9.4rem; min-width:0; }
.roadmap-add .btn { min-height:40px; padding:.48rem .78rem; font-size:.68rem; }
.roadmap-status { min-height:1.05rem; margin-top:.58rem; color:#71889B; font:700 .56rem 'Space Mono',monospace; }
.roadmap-status[data-tone="error"] { color:#E9A29E; }
.roadmap-status[data-tone="ok"] { color:#7CE0B0; }
.roadmap-side { display:grid; gap:1rem; min-width:0; }
.roadmap-side-card { padding:1.15rem; border-color:#1B3A50; background:rgba(7,17,28,.86); }
.roadmap-side-card h2 { margin:.45rem 0 .75rem; }
.roadmap-side-card > p { color:#93A6B6; font-size:.73rem; line-height:1.6; }
.roadmap-steps { display:grid; gap:.9rem; margin:1rem 0 0; padding:0; list-style:none; }
.roadmap-step { display:grid; grid-template-columns:2rem minmax(0,1fr); gap:.68rem; align-items:start; }
.roadmap-step__number { display:grid; place-items:center; width:2rem; height:2rem; border:1px solid rgba(var(--accent-rgb),.5); border-radius:9px; color:var(--accent-bright); font:700 .62rem 'Space Mono',monospace; }
.roadmap-step strong { display:block; color:#F2E9D8; font-size:.76rem; }
.roadmap-step p { margin-top:.2rem; color:#7F94A5; font-size:.66rem; line-height:1.5; }
.roadmap-credential-key { display:grid; gap:.75rem; margin:1rem 0 0; padding:0; list-style:none; }
.roadmap-credential-key li { display:grid; grid-template-columns:12px minmax(0,1fr); gap:.6rem; align-items:start; }
.roadmap-key-dot { width:10px; height:10px; margin-top:.23rem; border-radius:50%; background:#35D2F1; box-shadow:0 0 10px rgba(53,210,241,.5); }
.roadmap-key-dot--cert { background:#F5B942; box-shadow:0 0 10px rgba(245,185,66,.5); }
.roadmap-key-dot--check { background:#9EA7B6; box-shadow:0 0 10px rgba(158,167,182,.4); }
.roadmap-credential-key strong { display:block; color:#E9E1D5; font-size:.7rem; }
.roadmap-credential-key p { margin-top:.16rem; color:#7F94A5; font-size:.62rem; line-height:1.42; }
.roadmap-source-list { display:grid; gap:.5rem; margin:1rem 0 0; padding:0; list-style:none; }
.roadmap-source-list a { display:flex; justify-content:space-between; gap:.5rem; padding:.58rem .65rem; border:1px solid #1B3A50; border-radius:8px; color:#7EDFF0; font-size:.66rem; line-height:1.4; text-decoration:none; }
.roadmap-source-list a:hover { border-color:rgba(var(--accent-rgb),.65); background:rgba(var(--accent-rgb),.06); }
.roadmap-source-list a:focus-visible { outline:2px solid var(--accent-bright); outline-offset:2px; }
.roadmap-side-note { padding:1rem 0 0; border-top:1px solid #1B3A50; color:#93A6B6; font-size:.69rem; line-height:1.6; }
.roadmap-side-note strong { color:var(--accent-bright); }
.roadmap-phase--personal { border-style:dashed; opacity:.9; }

html[data-theme="light"] body[data-page="roadmap"] { --roadmap-panel:#FFFDF7; }
html[data-theme="light"] .roadmap-hero h1,
html[data-theme="light"] .roadmap-phase-title,
html[data-theme="light"] .roadmap-shield h2,
html[data-theme="light"] .roadmap-total strong,
html[data-theme="light"] .roadmap-side-card h2 { color:#1E2A38; }
html[data-theme="light"] .roadmap-hero-copy > p,
html[data-theme="light"] .roadmap-phase-note,
html[data-theme="light"] .roadmap-side-card > p,
html[data-theme="light"] .roadmap-step p,
html[data-theme="light"] .roadmap-credential-key p,
html[data-theme="light"] .roadmap-task-relevance,
html[data-theme="light"] .roadmap-side-note { color:#5B6673; }
html[data-theme="light"] .roadmap-hero-visual,
html[data-theme="light"] .roadmap-overview,
html[data-theme="light"] .roadmap-phase,
html[data-theme="light"] .roadmap-side-card { background:#FFFDF7; border-color:#E3D6B8; }
html[data-theme="light"] .roadmap-hero-visual::after { opacity:.16; }
html[data-theme="light"] .roadmap-subject-mini,
html[data-theme="light"] .roadmap-task-card { background:#FFFDF7; border-color:#E3D6B8; }
html[data-theme="light"] .roadmap-task-input { color:#243244; }
html[data-theme="light"] .roadmap-task-card.is-done .roadmap-task-input { color:#7C8790; }
html[data-theme="light"] .roadmap-task-date { color:#384657; background:#FFFDF7; border-color:#CBBE9E; }
html[data-theme="light"] .roadmap-task-date-readable { color:#66717C; }
html[data-theme="light"] .roadmap-checkmark { background:#FFFDF7; border-color:#B5A77E; }
html[data-theme="light"] .roadmap-checkbox:checked + .roadmap-checkmark { box-shadow:inset 0 0 0 3px #FFFDF7,0 0 12px rgba(124,224,176,.3); }
html[data-theme="light"] .roadmap-source-list a { border-color:#E3D6B8; color:#8B6B17; }
html[data-theme="light"] .roadmap-shield { background:#FFF9F3; border-color:#E7B5A4; }
html[data-theme="light"] .roadmap-shield p,
html[data-theme="light"] .roadmap-shield-details li { color:#805F59; }

@media (max-width: 960px){
  .roadmap-hero { grid-template-columns:minmax(0,1fr) minmax(245px,.75fr); gap:1.2rem; }
  .roadmap-layout { grid-template-columns:1fr; }
  .roadmap-side { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .roadmap-side-card:last-child { grid-column:1 / -1; }
}
@media (max-width: 680px){
  body[data-page="roadmap"] #main::before { display:none; }
  body[data-page="roadmap"] .bg-fx { display:none; }
  body[data-page="roadmap"] .momo-atlas-map { display:none; }
  body[data-page="roadmap"] .momo-ambient-field,
  body[data-page="roadmap"] .momo-ambient-star { display:none; }
  .roadmap-hero { grid-template-columns:1fr; min-height:0; gap:1.1rem; padding-top:1.35rem; padding-bottom:1.1rem; }
  .roadmap-hero h1 { max-width:11ch; margin-top:.72rem; font-size:clamp(2.7rem,14vw,4.6rem); }
  .roadmap-hero-copy > p { font-size:.82rem; line-height:1.6; }
  .roadmap-hero-actions { align-items:stretch; gap:.65rem; margin-top:1.1rem; }
  .roadmap-hero-actions .btn { width:100%; justify-content:center; }
  .roadmap-hero-caption { display:block; line-height:1.45; }
  .roadmap-hero-visual { min-height:225px; border-radius:18px; }
  .roadmap-hero-core { top:56px; width:88px; height:88px; margin-left:-44px; }
  .roadmap-hero-core__glyph { font-size:1.65rem; }
  .roadmap-orbit--one { top:25px; width:280px; height:126px; margin-left:-140px; }
  .roadmap-orbit--two { top:40px; width:226px; height:100px; margin-left:-113px; }
  .roadmap-hero-stats { right:.75rem; bottom:.75rem; left:.75rem; padding-top:.62rem; }
  .roadmap-hero-stats strong { font-size:1.12rem; }
  .roadmap-hero-stats span { font-size:.47rem; }
  .roadmap-disclaimer { gap:.55rem; margin-top:.2rem; padding:.8rem .85rem; }
  .roadmap-disclaimer p { font-size:.7rem; line-height:1.55; }
  .roadmap-overview { margin-top:.85rem; padding:1rem; }
  .roadmap-shield-grid,.roadmap-subject-mini-grid { grid-template-columns:1fr; }
  .roadmap-shield-grid { gap:.7rem; margin-top:.8rem; }
  .roadmap-shield { grid-template-columns:1fr; gap:.55rem; padding:.9rem; }
  .roadmap-shield-icon { width:2rem; height:2rem; }
  .roadmap-shield h2 { font-size:.85rem; }
  .roadmap-shield p { font-size:.7rem; line-height:1.5; }
  .roadmap-shield-details { gap:.35rem; }
  .roadmap-shield-details li { display:grid; grid-template-columns:6.2rem minmax(0,1fr); gap:.3rem; font-size:.6rem; }
  .roadmap-shield-details time { flex:initial; }
  .roadmap-overview-head { align-items:flex-start; flex-direction:column; }
  .roadmap-total { text-align:left; }
  .roadmap-phase { grid-template-columns:42px minmax(0,1fr); gap:.6rem; padding:.8rem; }
  .roadmap-phase-number { width:2.35rem; height:2.35rem; font-size:.64rem; }
  .roadmap-phase-label { font-size:.48rem; letter-spacing:.1em; writing-mode:initial; transform:none; text-align:center; }
  .roadmap-phase-head { flex-direction:column; gap:.35rem; }
  .roadmap-phase-progress { min-width:0; text-align:left; }
  .roadmap-phase-progress strong { font-size:1rem; }
  .roadmap-phase-progress span { font-size:.47rem; white-space:normal; }
  .roadmap-timeline::before { left:2rem; }
  .roadmap-task-card { grid-template-columns:28px minmax(0,1fr); gap:.55rem; padding:.7rem .6rem; }
  .roadmap-task-input { font-size:.82rem; }
  .roadmap-task-relevance { font-size:.66rem; }
  .roadmap-task-controls { grid-column:2; display:grid; grid-template-columns:1fr; gap:.4rem; align-items:stretch; }
  .roadmap-task-date-field { justify-items:stretch; }
  .roadmap-task-date { width:100%; min-height:38px; }
  .roadmap-remove { align-self:stretch; width:100%; min-height:38px; }
  .roadmap-add { grid-template-columns:1fr; align-items:stretch; }
  .roadmap-add-date { width:100%; }
  .roadmap-add .btn { width:100%; }
  .roadmap-side { grid-template-columns:1fr; }
  .roadmap-side-card:last-child { grid-column:auto; }
  .roadmap-source-list a { overflow-wrap:anywhere; }
}
@media (prefers-reduced-motion:reduce){
  .roadmap-task-card,.roadmap-progress span,.roadmap-phase-bar span,.roadmap-subject-mini__meter span { transition:none; }
}