/* Choose your adventure: four music-inspired looks layered over the unchanged editorial site, one click
   away behind the header's Theme control. Loaded by both the Next pages and the Express pages. World tokens
   override the existing `--paper`, `--ink`, `--blue` ... tokens of globals.css and library.css; nothing here
   changes the editorial look until <html data-adventure> or a [data-adventure-world] preview scope exists.
   Motion behind the glass comes from procedural canvas reels (scenes.ts) or supplied footage. */

/* ---------- Self-hosted display faces (SIL Open Font License / Apache 2.0, latin subsets) ----------
   size-adjust normalises the optical size of each face against Manrope, so one heading scale serves all four worlds. */
@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;size-adjust:94%;src:url('/assets/adventure/fonts/anton-latin.woff2') format('woff2')}
@font-face{font-family:'Alfa Slab One';font-style:normal;font-weight:400;font-display:swap;size-adjust:82%;src:url('/assets/adventure/fonts/alfa-slab-one-latin.woff2') format('woff2')}
@font-face{font-family:'Special Elite';font-style:normal;font-weight:400;font-display:swap;size-adjust:90%;src:url('/assets/adventure/fonts/special-elite-latin.woff2') format('woff2')}
@font-face{font-family:'Caveat';font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/adventure/fonts/caveat-latin.woff2') format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;size-adjust:104%;src:url('/assets/adventure/fonts/instrument-serif-latin.woff2') format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;size-adjust:104%;src:url('/assets/adventure/fonts/instrument-serif-latin-italic.woff2') format('woff2')}

/* The page root's own display face, captured here so a "root" size ghost inside a previewing dialog still renders the idle face
   (a committed world's when one is on, otherwise the editorial one or, where the root defines none, the inherited font). */
:root{--editorial-display:var(--display);--editorial-display-weight:var(--display-weight);--editorial-display-tracking:var(--display-tracking);--editorial-display-line:var(--display-line);--editorial-display-transform:var(--display-transform)}
/* ---------- World tokens. Each block serves the page root and any preview scope. ---------- */
:root[data-adventure="analog"],[data-adventure-world="analog"]{
  --paper:#2a0f16;--ink:#f6ecd9;--muted:#d9c4ad;--muted-2:#d2b89c;--muted-3:#d2b89c;--ink-soft:#efdfc6;--ink-soft-2:#e8d5b8;--line:#5a2b33;--row-line:#4f262e;--ink-line:#f6ecd940;--link-underline:#f6ecd955;
  --rust:#f2b25c;--orange:#f2b25c;--rust-deep:#f2b25c;--rust-2:#ffb86b;--brown:#f2b25c;--brown-2:#c8803a;--sand:#f2b25c;--blue:#d9442b;--leaf:#c4874a;--focus:#f2b25c;
  --accent:#c13a22;--accent-text:#f2b25c;--on-accent:#fff3e0;--on-accent-soft:#fff1e8;--on-accent-accent:#ffe9bf;--on-accent-faint:#fff5ee;--on-accent-line:#ffffff40;
  --card:#35141b;--card-2:#381620;--surface:#35141b;--hover-tint:#3a151d;--tint-blue:#3d1a22;--tint-blue-2:#3d1a22;--tint-blue-3:#3a1820;--tint-rust:#4a2118;--tint-rust-2:#4a2118;--tint-leaf:#3b2416;--tint-leaf-2:#3b2416;--tint-leaf-3:#3b2416;--tint-sand:#3a1d14;
  --band-warm:#4a1a24;--band-warm-line:#6b2a35;--band-gold:#3b2416;--band-gold-line:#5a3a22;--eyebrow-on-band:#f2b25c;
  --inverse:#140608;--on-inverse:#f6ecd9;--on-inverse-soft:#d9c4ad;--on-inverse-muted:#c9b39a;--on-inverse-line:#f6ecd938;--on-inverse-underline:#f6ecd988;--on-inverse-underline-2:#f6ecd966;
  --header-bg:#2a0f16;--button-hover:#fff6e6;--chip-bg:#3f1a22;--chip-line:#5a2b33;--account-bg:#f2b25c;--account-fg:#2a0f16;--account-hover:#ffd08a;--panel-shadow:#00000066;
  --display:'Anton',Impact,'Arial Narrow Bold',sans-serif;--display-weight:400;--display-tracking:.025em;--display-line:1;--display-transform:uppercase;--annotation:var(--sans);
  /* Express tokens: amber panels on wine. */
  --green:#f2b25c;--deep:#f6ecd9;--lime:#4a1a24;--mint:#5a1f2b;--white:#35141b;--soft:#3f1a22;--soft-2:#4a2129;--on-green-soft:#5a2b33;--on-green-muted:#6b3a42;--status:#d9442b;
}
:root[data-adventure="rotation"],[data-adventure-world="rotation"]{
  --paper:#fbf3df;--ink:#1f2114;--muted:#4f5240;--muted-2:#4f5240;--muted-3:#4f5240;--ink-soft:#2e3122;--ink-soft-2:#3a3d2b;--line:#d9c79a;--row-line:#d9c79a;--ink-line:#1f211440;--link-underline:#1f211455;
  --rust:#a3460a;--orange:#a3460a;--rust-deep:#8a3b08;--rust-2:#a3460a;--brown:#8a4818;--brown-2:#b06a2a;--sand:#f2c84b;--blue:#1f2114;--leaf:#5f6d32;--focus:#a3460a;
  --accent:#1f2114;--accent-text:#a3460a;--on-accent:#fbf3df;--on-accent-soft:#d8d2b6;--on-accent-accent:#f2c84b;--on-accent-faint:#e9e3c9;--on-accent-line:#fbf3df40;
  --card:#fffaf0;--card-2:#fffaf0;--surface:#fffaf0;--hover-tint:#f7e7b8;--tint-blue:#f2c84b;--tint-blue-2:#f6d873;--tint-blue-3:#f7e7b8;--tint-rust:#f7d9b5;--tint-rust-2:#fbe6cf;--tint-leaf:#e4e2b8;--tint-leaf-2:#e9e7c5;--tint-leaf-3:#eeecd2;--tint-sand:#f7e7b8;
  --band-warm:#f2c84b;--band-warm-line:#d9ae2e;--band-gold:#e8701a;--band-gold-line:#c75c10;--eyebrow-on-band:#1f2114;
  --inverse:#1f2114;--on-inverse:#fbf3df;--on-inverse-soft:#d8d2b6;--on-inverse-muted:#c9c3a6;--on-inverse-line:#fbf3df38;--on-inverse-underline:#fbf3df88;--on-inverse-underline-2:#fbf3df66;
  --header-bg:#f2c84b;--button-hover:#3a3d26;--chip-bg:#f7e7b8;--chip-line:#d9c79a;--account-bg:#1f2114;--account-fg:#f2c84b;--account-hover:#3a3d26;--panel-shadow:#1f211433;
  --display:'Alfa Slab One','Rockwell Extra Bold',Georgia,serif;--display-weight:400;--display-tracking:.006em;--display-line:1.1;--display-transform:none;--annotation:var(--sans);
  --green:#1f2114;--deep:#0f1009;--lime:#f2c84b;--mint:#f7d9b5;--white:#fffaf0;--soft:#f7e7b8;--soft-2:#efdc9c;--on-green-soft:#d8d2b6;--on-green-muted:#c9c3a6;--status:#e8701a;
}
:root[data-adventure="margin"],[data-adventure-world="margin"]{
  --paper:#2b2b2e;--ink:#f4efe6;--muted:#c6bfb3;--muted-2:#bdb5a8;--muted-3:#bdb5a8;--ink-soft:#e6dfd3;--ink-soft-2:#d9d1c4;--line:#4b4b50;--row-line:#434347;--ink-line:#f4efe640;--link-underline:#f4efe655;
  --rust:#e7b9c4;--orange:#e7b9c4;--rust-deep:#e7b9c4;--rust-2:#f0c7d1;--brown:#d9aab8;--brown-2:#a46a7c;--sand:#e7b9c4;--blue:#7a2748;--leaf:#9aa48a;--focus:#e7b9c4;
  --accent:#7a2748;--accent-text:#e7b9c4;--on-accent:#fbf1f4;--on-accent-soft:#efd3dc;--on-accent-accent:#e7b9c4;--on-accent-faint:#f3e1e7;--on-accent-line:#ffffff40;
  --card:#353539;--card-2:#353539;--surface:#353539;--hover-tint:#353539;--tint-blue:#3a3136;--tint-blue-2:#3a3136;--tint-blue-3:#3a3136;--tint-rust:#3d3238;--tint-rust-2:#3d3238;--tint-leaf:#343836;--tint-leaf-2:#343836;--tint-leaf-3:#343836;--tint-sand:#383338;
  --band-warm:#3a2a31;--band-warm-line:#54343f;--band-gold:#3b3338;--band-gold-line:#5a4a52;--eyebrow-on-band:#e7b9c4;
  --inverse:#1b1b1d;--on-inverse:#f4efe6;--on-inverse-soft:#c6bfb3;--on-inverse-muted:#b5aea2;--on-inverse-line:#f4efe638;--on-inverse-underline:#f4efe688;--on-inverse-underline-2:#f4efe666;
  --header-bg:#2b2b2e;--button-hover:#fff8ea;--chip-bg:#3a3a3f;--chip-line:#4b4b50;--account-bg:#e7b9c4;--account-fg:#2b2b2e;--account-hover:#f0c7d1;--panel-shadow:#00000066;
  --display:'Special Elite','American Typewriter','Courier New',monospace;--display-weight:400;--display-tracking:.012em;--display-line:1.14;--display-transform:none;--annotation:'Caveat','Bradley Hand',cursive;
  --green:#e7b9c4;--deep:#f4efe6;--lime:#7a2748;--mint:#5a1f36;--white:#353539;--soft:#3a3136;--soft-2:#45383f;--on-green-soft:#5a3a45;--on-green-muted:#6b4a55;--status:#7a2748;
}
:root[data-adventure="frequencies"],[data-adventure-world="frequencies"]{
  --paper:#143b40;--ink:#fbf4ea;--muted:#c9d6cf;--muted-2:#bfcdc6;--muted-3:#bfcdc6;--ink-soft:#ece6da;--ink-soft-2:#dfd9ce;--line:#2b5d61;--row-line:#275358;--ink-line:#fbf4ea40;--link-underline:#fbf4ea55;
  --rust:#f3b58f;--orange:#f3b58f;--rust-deep:#f3b58f;--rust-2:#f7c4a4;--brown:#e5b093;--brown-2:#c58c6c;--sand:#f3b58f;--blue:#a9bfa1;--leaf:#a9bfa1;--focus:#f3b58f;
  --accent:#f3b58f;--accent-text:#f3b58f;--on-accent:#1f2d2c;--on-accent-soft:#4b4a46;--on-accent-accent:#7a3d20;--on-accent-faint:#3a3a36;--on-accent-line:#1f2d2c33;
  --card:#1b474c;--card-2:#1b474c;--surface:#1b474c;--hover-tint:#1a4449;--tint-blue:#1b474c;--tint-blue-2:#1b474c;--tint-blue-3:#1a4449;--tint-rust:#2a4a48;--tint-rust-2:#2a4a48;--tint-leaf:#1f4b47;--tint-leaf-2:#1f4b47;--tint-leaf-3:#1f4b47;--tint-sand:#22474a;
  --band-warm:#1f4e52;--band-warm-line:#2f6368;--band-gold:#1d4a4e;--band-gold-line:#2f6368;--eyebrow-on-band:#f3b58f;
  --inverse:#0c2a2d;--on-inverse:#fbf4ea;--on-inverse-soft:#c9d6cf;--on-inverse-muted:#b5c4bd;--on-inverse-line:#fbf4ea38;--on-inverse-underline:#fbf4ea88;--on-inverse-underline-2:#fbf4ea66;
  --header-bg:#143b40;--button-hover:#ffffff;--chip-bg:#1d4a4e;--chip-line:#2b5d61;--account-bg:#f3b58f;--account-fg:#143b40;--account-hover:#f7c4a4;--panel-shadow:#00000066;
  --display:'Instrument Serif','Iowan Old Style',Georgia,serif;--display-weight:400;--display-tracking:-.004em;--display-line:1.04;--display-transform:none;--annotation:var(--sans);
  --green:#f3b58f;--deep:#fbf4ea;--lime:#143b40;--mint:#2a4f52;--white:#1b474c;--soft:#1d4a4f;--soft-2:#275a5f;--on-green-soft:#3d5f5c;--on-green-muted:#4f6f6c;--status:#a9bfa1;
}

/* ---------- Carry-through: textures and type per world (decorative, never load-bearing) ---------- */
:root[data-adventure] body{transition:background-color .4s ease,color .4s ease}
:root[data-adventure="analog"] body{background-image:radial-gradient(ellipse at 14% -6%,rgba(242,178,92,.2),transparent 48%),radial-gradient(ellipse at 90% 4%,rgba(217,68,43,.14),transparent 40%)}
:root[data-adventure="analog"] .exercise-section,:root[data-adventure="analog"] .site-footer,:root[data-adventure="analog"] footer,:root[data-adventure="analog"] .join-band{background-image:radial-gradient(circle at 3px 3px,rgba(246,236,217,.09) 1.2px,transparent 1.7px);background-size:7px 7px}
:root[data-adventure="analog"] .eyebrow{letter-spacing:.14em;text-transform:uppercase;font-family:ui-monospace,Menlo,monospace;font-weight:600}
:root[data-adventure="analog"] h1,:root[data-adventure="analog"] h2{word-spacing:.06em}
:root[data-adventure="rotation"] body{background-image:repeating-linear-gradient(0deg,rgba(31,33,20,.028) 0 1px,transparent 1px 3px)}
:root[data-adventure="rotation"] .site-header,:root[data-adventure="rotation"] .topbar{border-bottom:3px solid #1f2114}
/* The phone navigation panel hangs from the bar's padding box, so it starts below that 3px border rather than under it. */
:root[data-adventure="rotation"] .topbar nav{top:calc(100% + 3px)}
:root[data-adventure="rotation"] .companion-section,:root[data-adventure="rotation"] .about-section{background-image:repeating-radial-gradient(circle at 110% 50%,rgba(31,33,20,.07) 0 2px,transparent 2px 9px)}
:root[data-adventure="rotation"] .eyebrow{font-family:ui-monospace,Menlo,monospace;letter-spacing:.14em;text-transform:uppercase;font-weight:700}
:root[data-adventure="margin"] body{background-image:repeating-linear-gradient(135deg,rgba(244,239,230,.035) 0 1px,transparent 1px 5px)}
:root[data-adventure="margin"] .eyebrow{font-family:var(--annotation);font-size:19px;font-weight:600;letter-spacing:0;text-transform:none}
:root[data-adventure="margin"] .exercise-section,:root[data-adventure="margin"] .companion-section{clip-path:polygon(0 1.2%,4% 0,9% 1%,16% .2%,24% 1.1%,31% 0,39% .9%,47% .1%,55% 1%,62% 0,70% .8%,78% .1%,85% 1.1%,92% 0,100% .9%,100% 100%,0 100%)}
:root[data-adventure="margin"] .featured-lesson,:root[data-adventure="margin"] .practice-project-featured,:root[data-adventure="margin"] .featured,:root[data-adventure="margin"] .access-card{position:relative}
:root[data-adventure="margin"] .featured-lesson::before,:root[data-adventure="margin"] .practice-project-featured::before,:root[data-adventure="margin"] .featured::before,:root[data-adventure="margin"] .access-card::before{content:"";position:absolute;left:50%;top:-12px;width:110px;height:26px;margin-left:-55px;background:rgba(231,185,196,.78);transform:rotate(-3deg);box-shadow:0 2px 6px rgba(0,0,0,.25);z-index:2;pointer-events:none}
:root[data-adventure="frequencies"] body{background-image:linear-gradient(160deg,rgba(243,181,143,.08),transparent 40%),radial-gradient(ellipse at 80% 0%,rgba(251,244,234,.08),transparent 45%)}
:root[data-adventure="frequencies"] h1{font-style:italic}
:root[data-adventure="frequencies"] .eyebrow{font-family:ui-monospace,Menlo,monospace;letter-spacing:.12em;text-transform:lowercase;font-weight:600}
@media (min-width:900px){
  :root[data-adventure="frequencies"] .start-lesson,:root[data-adventure="frequencies"] .practice-project,:root[data-adventure="frequencies"] .featured-lesson,:root[data-adventure="frequencies"] .idea-card,:root[data-adventure="frequencies"] .preview-paper{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:14px}
  :root[data-adventure="frequencies"] .start-lesson,:root[data-adventure="frequencies"] .practice-project{background-color:color-mix(in srgb,var(--tint-blue) 78%,transparent)}
}
:root[data-adventure="analog"] .button,:root[data-adventure="margin"] .button,:root[data-adventure="frequencies"] .button{border-color:transparent}
:root[data-adventure="rotation"] .button,:root[data-adventure="rotation"] .adventure-enter{border-radius:999px}
:root[data-adventure="frequencies"] .button,:root[data-adventure="frequencies"] .adventure-enter,:root[data-adventure="frequencies"] .adventure-option,:root[data-adventure="frequencies"] .adventure-chooser{border-radius:14px}
:root[data-adventure="margin"] .button,:root[data-adventure="margin"] .adventure-enter{border-radius:2px;box-shadow:3px 3px 0 var(--rust)}

/* ---------- Typography carry-through: the world's tracking, weight and leading win over component rules ---------- */
:root[data-adventure] :is(h1,h2,h3,.adventure-chooser-title.adventure-ghost){letter-spacing:var(--display-tracking);font-weight:var(--display-weight);line-height:var(--display-line)}
:root[data-adventure] .featured-lesson h2,:root[data-adventure] .start-lesson h3,:root[data-adventure] .idea-card h3{line-height:calc(var(--display-line) + .14)}
:root[data-adventure="analog"] .opening-copy h1{word-spacing:.1em}
:root[data-adventure="rotation"] .opening-copy h1{letter-spacing:.004em}
:root[data-adventure] .opening-intro{letter-spacing:0}
:root[data-adventure] .brand{letter-spacing:-.4px}

/* ---------- Header control: a compact "Theme" pill holding the chooser trigger and an icon-only sound toggle ---------- */
html:not([data-adventure-js]) .adventure-bar{display:none!important}
.adventure-bar{display:inline-flex;align-items:center;min-height:36px;padding:0;border:1px solid color-mix(in srgb,currentColor 32%,transparent);border-radius:999px;color:inherit;font:600 12px/1.2 var(--sans,inherit);white-space:nowrap}
.adventure-trigger{display:inline-flex;align-items:center;gap:6px;min-width:0;min-height:34px;padding:4px 12px 4px 9px;border:0;border-radius:999px;background:transparent;color:inherit;font:inherit;cursor:pointer;white-space:nowrap;transition:background-color .16s}
.adventure-trigger:hover{background:color-mix(in srgb,currentColor 9%,transparent);text-decoration:none}
.adventure-trigger:focus-visible{outline:3px solid var(--focus,var(--rust,#a43e23));outline-offset:1px}
.adventure-trigger-icon{display:inline-flex;width:16px;height:16px;flex:none;color:var(--rust,#a43e23)}
.adventure-trigger-icon svg{display:block;width:100%;height:100%}
.adventure-trigger[data-adventure-playing="on"] .adventure-trigger-icon{animation:adv-pulse 1.6s ease-in-out infinite}
/* The speaker sits inside the pill as a 34px circle after a hairline; the shared .adventure-sound pill styles below are
   overridden here with the bar as the scope, and the playing state tints the icon instead of filling the circle. */
.adventure-bar .adventure-sound-header{position:relative;flex:none;width:34px;height:34px;min-height:34px;margin-left:0;padding:0;justify-content:center;gap:0;border:0;border-radius:50%;background:transparent;color:inherit}
.adventure-bar .adventure-sound-header::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:1px;background:color-mix(in srgb,currentColor 24%,transparent)}
.adventure-bar .adventure-sound-icon{width:16px;height:16px}
.adventure-bar .adventure-sound-header:hover:not(:disabled){background:color-mix(in srgb,currentColor 9%,transparent)}
.adventure-bar .adventure-sound-header[aria-pressed="true"]{background:transparent;color:var(--rust,#a43e23);border-color:transparent}
.adventure-bar .adventure-sound-header[aria-pressed="true"]:hover{background:color-mix(in srgb,currentColor 12%,transparent)}
.adventure-bar .adventure-sound-header:focus-visible{outline-offset:1px}
.adventure-bar .adventure-sound-header[hidden]{display:none}
.adventure-bar [data-adventure-sound-state="off"] .adventure-sound-icon,.adventure-bar .adventure-sound-header[data-adventure-sound-state="off"] .adventure-sound-icon{opacity:.72}
.adventure-sound-icon{display:inline-flex;width:18px;height:18px;flex:none;transition:opacity .2s}
.adventure-sound-icon svg{display:block;width:100%;height:100%}
.adventure-speaker-wave{opacity:.35;transition:opacity .2s}
.adventure-speaker-off{opacity:0;transition:opacity .2s}
[data-adventure-sound-state="off"] .adventure-speaker-wave{opacity:0}
[data-adventure-sound-state="off"] .adventure-speaker-off{opacity:1}
[data-adventure-sound-state="playing"] .adventure-speaker-wave{opacity:1;animation:adv-wave 1.2s ease-in-out infinite}
[data-adventure-sound-state="playing"] .adventure-speaker-wave-2{animation-delay:.3s}
[data-adventure-sound-state="loading"] .adventure-speaker-wave{opacity:1;animation:adv-wave .6s ease-in-out infinite}
@keyframes adv-wave{0%,100%{opacity:.35}50%{opacity:1}}
.site-adventure{display:flex;align-items:center;gap:8px;margin-left:auto}
.site-header-inner .site-navigation{margin-left:0}
.site-header-inner .site-navigation:not(.is-open)~.site-adventure{margin-left:auto}
.nav-account .adventure-bar{font-size:12px}
/* Below the desktop breakpoint the Next header is one row: brand, then Theme, the account control and the menu toggle on the right. */
@media (max-width:900px){.site-adventure{order:1;margin-left:auto}.site-header-inner .site-account{order:2}.site-header-inner .menu-toggle{order:3;margin-left:0}}
/* On phones the pill is icon-only; the word stays in the accessible name. */
@media (max-width:720px){.nav-account .adventure-trigger{padding:4px 9px}.nav-account .adventure-trigger-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.nav-account .adventure-bar .adventure-sound-header{width:30px}.nav-account .adventure-bar .adventure-sound-header::before{top:8px;bottom:8px}}
@media (max-width:650px){.site-header-inner .adventure-trigger{padding:4px 9px}.site-header-inner .adventure-trigger-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.site-header-inner .adventure-bar .adventure-sound-header{width:30px}.site-header-inner .adventure-bar .adventure-sound-header::before{top:8px;bottom:8px}}

/* ---------- Chooser form: the dialog's options, actions and status ---------- */
.adventure-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.adventure-kicker{margin:0 0 10px;font:600 12px/1.4 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--rust,#a43e23)}
.adventure-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0;padding:0;border:0;min-width:0}
.adventure-option{position:relative;display:flex;flex-direction:column;gap:9px;min-height:44px;padding:12px;border:2px solid color-mix(in srgb,var(--ink,#132d38) 16%,transparent);border-radius:6px;background:color-mix(in srgb,var(--paper,#fffaf1) 88%,transparent);color:var(--ink,#132d38);cursor:pointer;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background-color .18s ease}
@media (min-width:900px){.adventure-option{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}}
.adventure-option:hover{border-color:color-mix(in srgb,var(--ink,#132d38) 45%,transparent)}
.adventure-option input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;z-index:1}
.adventure-option:has(input:checked){border-color:var(--rust,#a43e23);box-shadow:0 0 0 3px color-mix(in srgb,var(--rust,#a43e23) 28%,transparent);transform:translateY(-2px)}
.adventure-option:has(input:focus-visible){outline:3px solid var(--focus,var(--rust,#a43e23));outline-offset:3px}
.adventure-option-art{display:block;aspect-ratio:3/2;border-radius:4px;overflow:hidden;background:#111}
.adventure-option-art svg{display:block;width:100%;height:100%}
.adventure-option-text{display:block;min-width:0}
.adventure-option-era{display:block;font:600 10.5px/1.4 ui-monospace,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase;opacity:.78}
.adventure-option-name{display:block;margin:3px 0 5px;font:650 17px/1.2 var(--sans,inherit);letter-spacing:-.01em}
.adventure-option-headline{display:block;font-size:12.5px;line-height:1.5;opacity:.88}
.adventure-option-swatches{display:flex;gap:5px;margin-top:auto;padding-top:4px}
.adventure-swatch{display:block;width:13px;height:13px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
[data-adventure-option="analog"] .adventure-swatch-base{background:#2a0f16}[data-adventure-option="analog"] .adventure-swatch-paper{background:#f6ecd9}[data-adventure-option="analog"] .adventure-swatch-accent{background:#f2b25c}[data-adventure-option="analog"] .adventure-swatch-signal{background:#d9442b}
[data-adventure-option="rotation"] .adventure-swatch-base{background:#f2c84b}[data-adventure-option="rotation"] .adventure-swatch-paper{background:#fbf3df}[data-adventure-option="rotation"] .adventure-swatch-accent{background:#e8701a}[data-adventure-option="rotation"] .adventure-swatch-signal{background:#1f2114}
[data-adventure-option="margin"] .adventure-swatch-base{background:#2b2b2e}[data-adventure-option="margin"] .adventure-swatch-paper{background:#f4efe6}[data-adventure-option="margin"] .adventure-swatch-accent{background:#7a2748}[data-adventure-option="margin"] .adventure-swatch-signal{background:#e7b9c4}
[data-adventure-option="frequencies"] .adventure-swatch-base{background:#143b40}[data-adventure-option="frequencies"] .adventure-swatch-paper{background:#fbf4ea}[data-adventure-option="frequencies"] .adventure-swatch-accent{background:#f3b58f}[data-adventure-option="frequencies"] .adventure-swatch-signal{background:#a9bfa1}
.adventure-option-editorial .adventure-option-art{background:#fffaf1}
.adventure-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin-top:22px}
.adventure-enter{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 22px;border:1px solid var(--ink,#132d38);border-radius:3px;background:var(--ink,#132d38);color:var(--paper,#fffaf1);font:650 14px/1.3 var(--sans,inherit);cursor:pointer;transition:background-color .16s,opacity .16s}
.adventure-enter:hover:not(:disabled){background:var(--button-hover,#294650)}
.adventure-enter:disabled{opacity:.45;cursor:default}
.adventure-sound,.adventure-motion,.adventure-close-text{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:9px 15px;border:1px solid color-mix(in srgb,currentColor 35%,transparent);border-radius:999px;background:transparent;color:inherit;font:600 13px/1.3 var(--sans,inherit);cursor:pointer;transition:background-color .16s}
.adventure-sound:hover:not(:disabled),.adventure-motion:hover,.adventure-close-text:hover{background:color-mix(in srgb,currentColor 9%,transparent)}
.adventure-sound:disabled{opacity:.55;cursor:default}
.adventure-sound[aria-pressed="true"]{background:var(--rust,#a43e23);color:var(--paper,#fffaf1);border-color:transparent}
.adventure-motion[aria-pressed="true"]{background:color-mix(in srgb,currentColor 12%,transparent)}
.adventure-status{margin:12px 0 0;min-height:1.6em;font-size:13px;line-height:1.6;opacity:.86}
.adventure-enter:focus-visible,.adventure-sound:focus-visible,.adventure-motion:focus-visible,.adventure-close-text:focus-visible,.adventure-close:focus-visible{outline:3px solid var(--focus,var(--rust,#a43e23));outline-offset:3px}
@keyframes adv-pulse{0%,100%{transform:scale(1);opacity:.6}50%{transform:scale(1.35);opacity:1}}
@media (max-width:900px){.adventure-options{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.adventure-option{flex-direction:row;align-items:center;gap:12px;padding:10px}.adventure-option-art{flex:0 0 84px;aspect-ratio:3/2}.adventure-option-swatches{display:none}.adventure-option-name{font-size:16px}.adventure-option-headline{display:none}.adventure-actions{gap:8px}.adventure-enter{width:100%}}
@media (max-width:420px){.adventure-options{grid-template-columns:1fr}}

/* ---------- Chooser dialog ---------- */
.adventure-chooser{width:min(1040px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 32px);margin:auto;padding:0;border:0;border-radius:6px;background:var(--paper,#fffaf1);color:var(--ink,#132d38);box-shadow:0 30px 80px rgba(0,0,0,.4);overflow:auto;overscroll-behavior:contain}
.adventure-chooser::backdrop{background:rgba(8,12,16,.6)}
.adventure-chooser:not([open]){display:none}
.adventure-chooser-form{padding:28px}
.adventure-chooser-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:20px}
.adventure-chooser-title{margin:0 0 10px;font-family:var(--display,var(--sans,inherit));font-weight:var(--display-weight,650);letter-spacing:var(--display-tracking,-.04em);text-transform:var(--display-transform,none);font-size:clamp(28px,4vw,46px);line-height:1.04}
.adventure-chooser-lede{margin:0;max-width:62ch;font-size:15px;line-height:1.7;color:var(--muted,#52616a)}
.adventure-close{display:grid;place-items:center;flex:none;width:44px;height:44px;border:1px solid color-mix(in srgb,currentColor 35%,transparent);border-radius:50%;background:transparent;color:inherit;font-size:26px;line-height:1;cursor:pointer}
.adventure-close:hover{background:color-mix(in srgb,currentColor 9%,transparent)}
.adventure-chooser .adventure-options{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1000px){.adventure-chooser .adventure-options{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:700px){.adventure-chooser{width:100vw;max-height:100dvh;border-radius:0;margin:0}.adventure-chooser-form{padding:18px 16px 24px}.adventure-chooser .adventure-options{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.adventure-chooser .adventure-options{grid-template-columns:1fr}}

/* ---------- Stages: the space behind the glass (a procedural reel, or supplied footage) ---------- */
[data-adventure-stage]{position:relative;overflow:hidden}
.adventure-reel{position:absolute;inset:0;display:block;width:100%;height:100%;opacity:0;transition:opacity .8s ease}
.adventure-reel.is-active{opacity:1}
.adventure-stage-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s ease;pointer-events:none}
[data-adventure-stage][data-adventure-video="playing"] .adventure-stage-video{opacity:1}
[data-adventure-stage][data-adventure-video="playing"] .adventure-reel{opacity:0}
[data-adventure-stage]::after{content:"";position:absolute;inset:0;pointer-events:none;background:var(--adventure-video-tint,transparent);opacity:0;transition:opacity .9s ease}
[data-adventure-stage][data-adventure-video="playing"]::after{opacity:1}
.adventure-backdrop .adventure-stage-video,.adventure-hero-stage .adventure-stage-video{inset:-3%;width:106%;height:106%;filter:blur(6px) saturate(1.15) brightness(.85)}
@media (max-width:900px){.adventure-backdrop .adventure-stage-video,.adventure-hero-stage .adventure-stage-video{filter:saturate(1.1) brightness(.8)}}

/* Frosted glass: translucent paper over the stage. Real backdrop blur only on wider screens; phones get a denser pane instead. */
:root[data-adventure] .adventure-glass{background:color-mix(in srgb,var(--paper,#fffaf1) 80%,transparent);border:1px solid color-mix(in srgb,var(--ink,#132d38) 16%,transparent);box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 26%,transparent)}
@media (min-width:760px){@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){:root[data-adventure] .adventure-glass{background:color-mix(in srgb,var(--paper,#fffaf1) 72%,transparent);backdrop-filter:blur(18px) saturate(1.25);-webkit-backdrop-filter:blur(18px) saturate(1.25)}}}
@media (prefers-reduced-transparency:reduce){:root[data-adventure] .adventure-glass{background:color-mix(in srgb,var(--paper,#fffaf1) 96%,transparent);backdrop-filter:none;-webkit-backdrop-filter:none}}

/* ---------- Size ghosts (see markup.ts): the live title or lede shares one grid cell with invisible copies of every variant it can show,
   so the block keeps the height of its tallest variant and a hover peek never moves the options under a resting pointer. ---------- */
.adventure-stack{display:grid;min-width:0}
.adventure-stack>*{grid-area:1/1;min-width:0}
.adventure-ghost{visibility:hidden;pointer-events:none;user-select:none}
.adventure-chooser-title.adventure-ghost[data-adventure-face="root"]{font-family:var(--editorial-display,inherit);font-weight:var(--editorial-display-weight,650);letter-spacing:var(--editorial-display-tracking,-.04em);text-transform:var(--editorial-display-transform,none)}
:root[data-adventure] .adventure-chooser-title.adventure-ghost[data-adventure-face="root"]{line-height:var(--editorial-display-line,1.04)}
html[data-adventure-motion="paused"] .adventure-trigger-icon,html[data-adventure-motion="paused"] .adventure-sound-icon,html[data-adventure-motion="paused"] .adventure-speaker-wave{animation-play-state:paused!important}

/* ---------- Homepage hero: one quiet line to the chooser under the opening copy. Without JavaScript the dialog cannot open, so the line stays out. ---------- */
.opening-theme{margin:14px 0 0}
html:not([data-adventure-js]) .opening-theme{display:none}
.opening-theme-trigger{display:inline;padding:0;border:0;background:none;color:inherit;font:inherit;font-weight:600;text-decoration:underline;text-decoration-color:var(--link-underline,currentColor);text-underline-offset:5px;cursor:pointer}
.opening-theme-trigger:hover{text-decoration-color:currentColor}
.opening-theme-trigger:focus-visible{outline:3px solid var(--focus,var(--rust,#a43e23));outline-offset:3px}

/* ---------- Homepage: the same glass above the fold, with the chosen world's reel or footage behind it ---------- */
.adventure-hero-stage{display:none}
:root[data-adventure] .publication-opening-band{position:relative;isolation:isolate;overflow:hidden}
:root[data-adventure] .adventure-hero-stage{display:block;position:absolute;inset:0;z-index:0;background:var(--paper)}
:root[data-adventure] .adventure-hero-stage::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,color-mix(in srgb,var(--paper) 46%,transparent) 0%,color-mix(in srgb,var(--paper) 22%,transparent) 55%,var(--paper) 100%)}
:root[data-adventure] .publication-opening{position:relative;z-index:1}
:root[data-adventure] .opening-copy{padding:clamp(22px,2.6vw,36px);border-radius:20px}
/* Small accent text on glass leans toward the ink colour so it clears 4.5:1 over the moving reel. */
:root[data-adventure] .opening-copy .eyebrow{color:color-mix(in srgb,var(--rust) 45%,var(--ink))}
:root[data-adventure] .featured-lesson{border-radius:18px;overflow:hidden;box-shadow:0 34px 70px -30px rgba(0,0,0,.6)}
@media (max-width:650px){:root[data-adventure] .opening-copy{padding:20px 18px}}

/* ---------- The dancer: an original blocky clay character that travels the bottom of the screen, dressed for the world and dancing its style to the beat ----------
   The controller publishes one pose per frame as custom properties (choreography.ts): where the figure stands in its lane (--m-x), how far it has
   climbed onto an obstacle in the lane (--m-dock), which way it faces (--m-face, swept through zero for turns and spins), and the body, arm and leg channels.
   Lengths are the figure's own SVG units, angles are degrees. Everything is decorative: no pointer capture, no layout, one still pose when motion is off. */
.adventure-mascot{position:fixed;left:0;bottom:max(12px,env(safe-area-inset-bottom));z-index:45;width:132px;pointer-events:none;opacity:0;transform:translate3d(calc(var(--m-x,0)*1px),calc(var(--m-dock,0)*-1px),0);will-change:transform;transition:opacity .35s ease}
.adventure-mascot.is-in{opacity:1}
.adventure-mascot[hidden],html:not([data-adventure-js]) .adventure-mascot{display:none}
/* The figure mirrors to face the way it heads and leans about its feet; the pop-in rides the separate translate property so it never fights the per-frame transform. */
.adventure-mascot-figure{position:relative;transform-origin:50% 100%;transform:scaleX(var(--m-face,1)) rotate(calc(var(--m-lean,0)*1deg));translate:0 40px;transition:translate .55s cubic-bezier(.2,.9,.3,1.25)}
.adventure-mascot.is-in .adventure-mascot-figure{translate:0 0}
.adventure-mascot-svg{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 14px 18px rgba(0,0,0,.35))}
.adventure-mascot-render{position:relative;transform-origin:50% 100%}
.adventure-mascot-render[hidden]{display:none}
.adventure-mascot-render video,.adventure-mascot-render img{display:block;width:100%;height:auto}
.adventure-mascot[data-mascot-mode="render"] .adventure-mascot-svg{display:none}
.adventure-mascot[data-mascot-mode="render"] .adventure-mascot-render{transform:translateY(calc(var(--m-beat,0) * -8px - var(--m-jump,0) * 1px)) rotate(calc(var(--m-sway,0) * 3deg))}
.adventure-mascot-hide{position:absolute;top:-8px;right:-8px;z-index:1;width:44px;height:44px;padding:9px;border:0;background:transparent;color:inherit;pointer-events:auto;cursor:pointer;opacity:0;transition:opacity .2s}
.adventure-mascot-hide span{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--paper,#fffaf1);color:var(--ink,#132d38);border:1px solid color-mix(in srgb,var(--ink,#132d38) 30%,transparent);font:700 16px/1 var(--sans,inherit);box-shadow:0 2px 8px rgba(0,0,0,.25)}
.adventure-mascot:hover .adventure-mascot-hide,.adventure-mascot-hide:focus-visible{opacity:1}
.adventure-mascot-hide:focus-visible{outline:3px solid var(--focus,var(--rust,#a43e23));outline-offset:2px}
@media (hover:none){.adventure-mascot-hide{opacity:.9}}
/* The fold control (phones only): the character's face in a small round button. Expanded, it rides the figure's top-left corner opposite the hide control. */
.adventure-mascot-toggle{display:none;position:absolute;top:-8px;left:-8px;z-index:1;width:44px;height:44px;padding:0;border:0;background:transparent;color:inherit;pointer-events:auto;cursor:pointer}
.adventure-mascot-toggle svg{display:block;box-sizing:border-box;width:30px;height:30px;margin:auto;padding:3px;border-radius:50%;background:var(--paper,#fffaf1);border:1px solid color-mix(in srgb,var(--ink,#132d38) 30%,transparent);box-shadow:0 2px 8px rgba(0,0,0,.25)}
.adventure-mascot-toggle:focus-visible{outline:3px solid var(--focus,var(--rust,#a43e23));outline-offset:2px}
/* Phones: the dancer starts folded into the corner button and dances only once asked; it steps aside while any dialog is open, and the footer makes
   room below its last link so the button never sits over one. */
@media (max-width:767.98px){
  .adventure-mascot-toggle{display:block}
  .adventure-mascot.is-collapsed{left:auto;right:max(12px,env(safe-area-inset-right));width:44px;transform:none}
  .adventure-mascot.is-collapsed .adventure-mascot-toggle{position:static;display:grid;place-items:center}
  .adventure-mascot.is-collapsed .adventure-mascot-toggle svg{width:44px;height:44px;padding:8px}
  .adventure-mascot.is-collapsed .adventure-mascot-figure,.adventure-mascot.is-collapsed .adventure-mascot-hide{display:none}
  body:has(dialog[open]) .adventure-mascot{display:none}
  body:has(.adventure-mascot:not([hidden]))>footer{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
}
/* Pose channels. The figure group jumps as a whole; the body block bounces, tilts and squashes over the legs and carries the arms with it. */
.adventure-mascot .m-figure,.adventure-mascot .m-body,.adventure-mascot .m-arm,.adventure-mascot .m-leg{transform-box:view-box}
.adventure-mascot .m-figure{transform:translateY(calc(var(--m-jump,0)*-1px))}
.adventure-mascot .m-shadow{fill:rgba(0,0,0,.28);transform-box:fill-box;transform-origin:center;transform:scale(calc(1 - var(--m-air,0)*.45 - var(--m-beat,0)*.08));opacity:calc(1 - var(--m-air,0)*.6)}
.adventure-mascot .m-eye{fill:#1f1612}
.adventure-mascot .m-glint{fill:#fff;opacity:.85}
.adventure-mascot .m-mouth{fill:#1f1612;transform-box:fill-box;transform-origin:center;transform:scaleY(calc(1 + var(--m-beat,0) * var(--m-energy,0) * 2.2))}
.adventure-mascot .m-lid{fill:#d97757;transform-box:fill-box;transform-origin:50% 0;transform:scaleY(0);animation:m-blink 5.4s ease-in-out infinite}
.adventure-mascot .m-limb{stroke-width:13;stroke-linecap:round;fill:none}
.adventure-mascot .m-shoe{fill:var(--m-shoe,#8f4630)}
.adventure-mascot .m-body{transform-origin:60px 112px;transform:translateY(calc(var(--m-y,0)*-1px)) rotate(calc(var(--m-rot,0)*1deg)) scale(calc(1 + var(--m-squash,0)*.04),calc(1 - var(--m-squash,0)*.06))}
.adventure-mascot .m-arm-left{transform-origin:32px 78px;transform:rotate(calc(var(--m-arm-l,0)*-1deg))}
.adventure-mascot .m-arm-right{transform-origin:88px 78px;transform:rotate(calc(var(--m-arm-r,0)*1deg))}
.adventure-mascot .m-leg-left{transform-origin:47px 108px;transform:translate(calc(var(--m-slide-l,0)*1px),calc(var(--m-lift-l,0)*-1px)) rotate(calc(var(--m-leg-l,0)*1deg))}
.adventure-mascot .m-leg-right{transform-origin:73px 108px;transform:translate(calc(var(--m-slide-r,0)*1px),calc(var(--m-lift-r,0)*-1px)) rotate(calc(var(--m-leg-r,0)*-1deg))}
/* Costume flourishes: the jersey lettering reads the right way round whichever way the figure faces, the headband tails and the fringe fly on a flair, the antenna and chain bounce, the sampler pads blink. */
.adventure-mascot .c-jersey-text{transform-box:view-box;transform-origin:60px 102px;transform:scaleX(var(--m-face-sign,1))}
.adventure-mascot .c-alien{transform-box:fill-box;transform-origin:center;transform:scale(calc(1 + var(--m-beat,0) * .6))}
.adventure-mascot .c-tails{transform-box:fill-box;transform-origin:100% 50%;transform:rotate(calc(var(--m-sway,0) * -14deg - var(--m-flair,0) * 22deg))}
.adventure-mascot .c-chain{transform-box:fill-box;transform-origin:50% 0;transform:translateY(calc(var(--m-beat,0) * 2px))}
.adventure-mascot .c-fringe{transform-box:fill-box;transform-origin:50% 100%;transform:translateY(calc(var(--m-flair,0) * -7px)) rotate(calc(var(--m-flair,0) * -8deg))}
.adventure-mascot .c-pads rect:nth-child(odd){opacity:calc(.35 + var(--m-step,0) * .65 + var(--m-flair,0) * .65)}
.adventure-mascot .c-pads rect:nth-child(even){opacity:calc(1 - var(--m-step,0) * .65 + var(--m-flair,0) * .65)}
.adventure-mascot [data-costume]{display:none}
.adventure-mascot[data-world="analog"] [data-costume="analog"],.adventure-mascot[data-world="rotation"] [data-costume="rotation"],.adventure-mascot[data-world="margin"] [data-costume="margin"],.adventure-mascot[data-world="frequencies"] [data-costume="frequencies"]{display:inline}
.adventure-mascot[data-world="analog"]{--m-shoe:#d9442b}
.adventure-mascot[data-world="rotation"]{--m-shoe:#fbf3df}
.adventure-mascot[data-world="margin"]{--m-shoe:#1a1a1c}
.adventure-mascot[data-world="frequencies"]{--m-shoe:#fbf4ea}
@keyframes m-blink{0%,93%,100%{transform:scaleY(0)}95%,97%{transform:scaleY(1)}}
.adventure-mascot:not(.is-dancing) .m-lid,html[data-adventure-motion="paused"] .adventure-mascot .m-lid{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.adventure-mascot,.adventure-mascot-figure{transition:none}.adventure-mascot .m-lid{animation:none}}
@media (max-width:650px){.adventure-mascot{width:92px}.adventure-mascot-hide{top:-10px;right:-10px}}
@media print{.adventure-mascot{display:none}}