/* Lit layer (owner: "our webpages are dull", 2026-10-27; graphics/colour overhaul).
   Light, depth and colour on top of the token system: ambient glows and a faint wafer grid
   behind every page, lit panels with soft shadows, glossy controls, a glass header and
   footer. Every value is derived from the theme tokens in tokens.css (color-mix), so all six
   themes inherit the look and keep their checked contrast. Loaded after signal.css on every
   v3 page and on problem pages; removing this one file restores the flat look. */

:root, [data-theme] {
  --lit-edge: rgb(255 255 255 / .09);
  --lit-shadow: 0 1px 0 var(--lit-edge) inset, 0 24px 46px -28px rgb(0 0 0 / .62), 0 2px 6px -2px rgb(0 0 0 / .28);
  --lit-shadow-hover: 0 1px 0 var(--lit-edge) inset, 0 34px 60px -26px rgb(0 0 0 / .7), 0 6px 14px -4px rgb(0 0 0 / .32);
  --lit-panel: linear-gradient(180deg, color-mix(in srgb, #fff 6%, var(--card)) 0%, var(--card) 55%, color-mix(in srgb, #000 8%, var(--card)) 100%);
  --lit-r: 14px;
  --glow-a: color-mix(in srgb, var(--accent) 20%, transparent);
  --glow-b: color-mix(in srgb, var(--ch-uvm) 16%, transparent);
  --glow-c: color-mix(in srgb, var(--ch-sv) 12%, transparent);
  --grid-line: color-mix(in srgb, var(--ink) 5%, transparent);
  --glass: color-mix(in srgb, var(--paper) 70%, transparent);
  --spectrum: linear-gradient(90deg, transparent, var(--accent) 18%, var(--ch-sva) 42%, var(--ch-uvm) 64%, var(--ch-sv) 84%, transparent);
}
[data-scheme="light"] {
  --lit-edge: rgb(255 255 255 / .95);
  --lit-shadow: 0 1px 0 var(--lit-edge) inset, 0 20px 40px -26px rgb(18 40 58 / .42), 0 2px 6px -2px rgb(18 40 58 / .14);
  --lit-shadow-hover: 0 1px 0 var(--lit-edge) inset, 0 30px 54px -24px rgb(18 40 58 / .5), 0 6px 14px -4px rgb(18 40 58 / .18);
  --lit-panel: linear-gradient(180deg, #fff 0%, var(--card) 50%, color-mix(in srgb, var(--paper-2) 55%, var(--card)) 100%);
  --glow-a: color-mix(in srgb, var(--accent) 11%, transparent);
  --glow-b: color-mix(in srgb, var(--ch-uvm) 12%, transparent);
  --glow-c: color-mix(in srgb, var(--ch-sv) 9%, transparent);
  --grid-line: color-mix(in srgb, var(--ink) 6%, transparent);
}
/* Maximum-contrast theme: no glows or translucency. */
[data-theme="contrast"] {
  --lit-panel: var(--card); --glass: var(--paper);
  --glow-a: transparent; --glow-b: transparent; --glow-c: transparent; --grid-line: transparent;
  --lit-shadow: none; --lit-shadow-hover: none;
}

/* Noir (owner, 2026-10-27: retire tangerine for "a noir, black and white theme ... Chiaroscuro: a
   lighting technique utilizing high contrast between light and dark. It leaves large parts of the
   screen in pitch-black shadow"). One hard key light falls from the top left through venetian
   blinds; the rest of the screen stays black. Panels catch that light on their top-left edges and
   fall off into shadow. A faint film grain and a vignette finish it. Text colours stay the checked
   tokens from tokens.css; the light never brightens the ground past what white text needs. */
[data-theme="noir"] {
  --lit-edge: rgb(255 255 255 / .26);
  --glow-a: rgb(255 255 255 / .17);
  --glow-b: transparent;
  --glow-c: rgb(255 255 255 / .04);
  --grid-line: transparent;
  --glass: rgb(0 0 0 / .74);
  --spectrum: linear-gradient(90deg, transparent, rgb(255 255 255 / .9) 18%, rgb(255 255 255 / .55) 40%, rgb(255 255 255 / .08) 70%, transparent);
  --lit-panel: linear-gradient(135deg, #222 0%, #0d0d0d 38%, #000 100%);
  --lit-shadow: inset 1px 1px 0 var(--lit-edge), 0 34px 60px -24px #000, 0 0 0 1px rgb(255 255 255 / .05);
  --lit-shadow-hover: inset 1px 1px 0 rgb(255 255 255 / .45), 0 44px 70px -24px #000, 0 0 0 1px rgb(255 255 255 / .14);
}
/* the blinds: slats of light inside a beam from the top left */
[data-theme="noir"] body::before {
  background-image: repeating-linear-gradient(-31deg, rgb(255 255 255 / .085) 0 34px, transparent 34px 78px);
  background-size: auto;
  -webkit-mask-image: radial-gradient(ellipse 62% 78% at 10% -4%, #000 0%, rgb(0 0 0 / .55) 38%, transparent 72%);
  mask-image: radial-gradient(ellipse 62% 78% at 10% -4%, #000 0%, rgb(0 0 0 / .55) 38%, transparent 72%);
}
/* film grain and a vignette that pushes the corners into black */
[data-theme="noir"] body::after {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(ellipse 120% 100% at 25% 15%, transparent 45%, rgb(0 0 0 / .7) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-theme="noir"] .wafer-sheen { filter: grayscale(1); opacity: .35; }
/* the accent is white like the text, so the headline dims the words it is not on */
[data-theme="noir"] .d-hero h1 span:not(.on) { color: rgb(255 255 255 / .4); }
/* hard light on the hero objects: a bright rim on the lit side, deep shadow on the other */
[data-theme="noir"] .wheel-svg { filter: drop-shadow(-2px -2px 0 rgb(255 255 255 / .08)) drop-shadow(24px 34px 34px #000); }
[data-theme="noir"] .btn-primary { background: linear-gradient(135deg, #fff 0%, #d9d9d9 60%, #a6a6a6 100%); box-shadow: inset 1px 1px 0 #fff, 0 14px 30px -12px rgb(255 255 255 / .35); }

/* Fallout (owner, 2026-10-27: "make a fallout theme"): a glowing green terminal on an old CRT.
   Everything is one green at different brightnesses; text glows like phosphor; headings use a
   terminal face (VT323, sized to match the body's x-height); scanlines and a slow refresh bar
   run over the whole screen and the edges darken like curved glass. The general look only: no
   game names, logos or characters. Text colours stay the checked tokens from tokens.css. */
[data-theme="fallout"] {
  --lit-edge: rgb(141 255 189 / .14);
  --glow-a: rgb(61 255 143 / .1);
  --glow-b: rgb(61 255 143 / .07);
  --glow-c: rgb(61 255 143 / .05);
  --grid-line: transparent;
  --glass: rgb(2 13 5 / .8);
  --spectrum: linear-gradient(90deg, transparent, rgb(93 255 158 / .9) 20%, rgb(93 255 158 / .9) 80%, transparent);
  --lit-panel: linear-gradient(180deg, #082210 0%, #061a0c 60%, #04140a 100%);
  --lit-shadow: inset 0 0 0 1px rgb(93 255 158 / .16), 0 0 26px -6px rgb(61 255 143 / .18), 0 20px 40px -24px #000;
  --lit-shadow-hover: inset 0 0 0 1px rgb(93 255 158 / .4), 0 0 34px -4px rgb(61 255 143 / .3), 0 26px 50px -24px #000;
  --sans: 'Geist Mono', ui-monospace, monospace;
  --display: 'Geist Mono', ui-monospace, monospace;
}
[data-theme="fallout"] body { text-shadow: 0 0 .32em rgb(61 255 143 / .42); }
[data-theme="fallout"] :is(h1, h2, .brand-name, .tc-title, .format-card h3, .hub-title, .orb-word, .lab-disclosure > summary strong) {
  font-family: 'VT323', 'Geist Mono', monospace; font-weight: 400; letter-spacing: .02em; font-size-adjust: .52;
  text-shadow: 0 0 .18em rgb(93 255 158 / .75), 0 0 .6em rgb(61 255 143 / .35);
}
/* behind the content: a soft glow at the centre of the glass and dark curved edges */
[data-theme="fallout"] body::before {
  background-image: radial-gradient(ellipse 80% 70% at 50% 40%, rgb(61 255 143 / .07), transparent 70%),
    radial-gradient(ellipse 115% 105% at 50% 50%, transparent 58%, rgb(0 0 0 / .78) 100%);
  background-size: auto; -webkit-mask-image: none; mask-image: none;
}
/* over everything: fine scanlines and a slow refresh bar rolling down the screen */
[data-theme="fallout"] body::after {
  content: ''; position: fixed; inset: 0; z-index: 40; pointer-events: none;
  background-image:
    linear-gradient(180deg, transparent 0%, rgb(141 255 189 / .045) 48%, rgb(141 255 189 / .07) 50%, transparent 54%),
    repeating-linear-gradient(180deg, rgb(0 0 0 / .16) 0 1px, transparent 1px 3px);
  background-size: 100% 260%, auto;
  animation: crt-roll 9s linear infinite;
}
@keyframes crt-roll { from { background-position: 0 -160%, 0 0; } to { background-position: 0 100%, 0 0; } }
[data-theme="fallout"] .wafer-sheen { filter: grayscale(1); opacity: .3; }
[data-theme="fallout"] .btn-primary { text-shadow: none; box-shadow: inset 0 1px 0 rgb(255 255 255 / .4), 0 0 24px -4px rgb(93 255 158 / .6); }
[data-theme="fallout"] .site-nav a[aria-current="page"] { text-shadow: 0 0 .4em rgb(93 255 158 / .8); }
/* The homepage wheel as a plain analog selector (owner: "make wheel a simple analog wheel/button"):
   a flat dial with outlined stages and a knurled metal knob whose pointer turns to the stage in
   use (assets/v3/wheel.mjs). The glossy wafer, dome and preview card are left out. */
[data-theme="fallout"] .knob { display: inline; }
[data-theme="fallout"] :is(.wafer, .wafer-sheen, .dome, .glint, .pointer, .hub-shade, .hub-glint, .band-sheen, .band-glint) { display: none; }
[data-theme="fallout"] .hub-card { display: none !important; }
[data-theme="fallout"] .wheel-svg { filter: drop-shadow(0 22px 30px rgb(0 0 0 / .65)); }
[data-theme="fallout"] .rim { fill: #04110a; stroke: rgb(93 255 158 / .4); stroke-width: 2; }
[data-theme="fallout"] .rim-edge { stroke: rgb(93 255 158 / .16); }
[data-theme="fallout"] .hub { fill: #020a05; }
[data-theme="fallout"] .hub-ring { stroke: rgb(93 255 158 / .22); }
[data-theme="fallout"] .seg .band { fill: rgb(93 255 158 / .05); stroke: rgb(93 255 158 / .42); stroke-width: 1.5; filter: none; }
[data-theme="fallout"] :is(.seg.on, .seg:hover, .seg:focus-visible) .band { fill: rgb(93 255 158 / .17); stroke: var(--ink); stroke-width: 2; filter: none; }
[data-theme="fallout"] .seg.on .pop { filter: drop-shadow(0 0 10px rgb(61 255 143 / .45)); }
[data-theme="fallout"] .seg-label { font-family: 'VT323', 'Geist Mono', monospace; font-size: 27px; font-weight: 400; letter-spacing: .2em; fill: var(--ink); }
[data-theme="fallout"] .knob-shadow { fill: rgb(0 0 0 / .6); filter: blur(7px); }
[data-theme="fallout"] .knob-knurl { fill: none; stroke: #2b3526; stroke-width: 15; stroke-dasharray: 1 1; }
[data-theme="fallout"] .knob-hi { stop-color: #3f4c38; } [data-theme="fallout"] .knob-lo { stop-color: #0f140d; } [data-theme="fallout"] .knob-cap-hi { stop-color: #5d6c54; }
[data-theme="fallout"] .knob-body { stroke: #4c5a44; stroke-width: 1.5; }
[data-theme="fallout"] .knob-ring { fill: none; stroke: rgb(0 0 0 / .45); stroke-width: 1.5; }
[data-theme="fallout"] .knob-line { stroke: var(--ink); stroke-width: 7; stroke-linecap: round; filter: drop-shadow(0 0 6px rgb(61 255 143 / .8)); }
[data-theme="fallout"] .knob-dot { fill: var(--focus); filter: drop-shadow(0 0 8px rgb(61 255 143 / .9)); }
[data-theme="fallout"] .knob-cap { stroke: #0a0d08; stroke-width: 2; }
[data-theme="fallout"] .knob-glint { fill: none; stroke: rgb(255 255 255 / .22); stroke-width: 4; stroke-linecap: round; }
[data-theme="fallout"] .hub-sphere { cursor: pointer; }

/* Code windows as a rugged wrist computer (owner: "a pip boy style on playground and code
   window"): an olive metal casing with corner screws, a recessed curved CRT screen, a label plate,
   and tabs drawn like a terminal menu, the chosen one boxed into the line under them. Covers the
   playground, every runnable panel in lessons and the code side of a problem. */
[data-theme="fallout"] :is(.instrument, .coding-pane) {
  --screw: radial-gradient(circle, #1c2318 0 1.3px, #a3b195 1.7px 3.6px, #4a5841 4.1px, #12160f 4.7px 6.2px, transparent 6.8px);
  position: relative; border: 1px solid #4a5841; border-radius: 22px; color: var(--case-ink);
  background:
    var(--screw) 8px 8px / 16px 16px no-repeat, var(--screw) calc(100% - 8px) 8px / 16px 16px no-repeat,
    var(--screw) 8px calc(100% - 8px) / 16px 16px no-repeat, var(--screw) calc(100% - 8px) calc(100% - 8px) / 16px 16px no-repeat,
    repeating-linear-gradient(90deg, rgb(255 255 255 / .018) 0 2px, transparent 2px 5px),
    linear-gradient(165deg, #3b4733 0%, #242c1f 45%, #141912 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .2), inset 0 -3px 8px rgb(0 0 0 / .55), 0 0 0 3px #0b0f09, 0 30px 60px -24px #000;
}
[data-theme="fallout"] .instrument { padding: 24px 28px; }
[data-theme="fallout"] .coding-pane { padding: 18px; }
[data-theme="fallout"] .instrument-head { display: inline-flex; align-items: baseline; padding: 7px 16px 8px; margin: 0 0 14px; border-radius: 6px;
  background: linear-gradient(180deg, #161c13, #0b0f09); box-shadow: inset 0 1px 3px rgb(0 0 0 / .85), 0 1px 0 rgb(255 255 255 / .12); }
[data-theme="fallout"] .instrument-id { font-family: 'VT323', 'Geist Mono', monospace; font-size-adjust: .52; font-weight: 400; letter-spacing: .14em; text-shadow: 0 0 .3em rgb(93 255 158 / .8); }
[data-theme="fallout"] .instrument-name { text-transform: uppercase; letter-spacing: .1em; }
/* the screens: curved glass, dark at the edges, a faint highlight across the top */
[data-theme="fallout"] :is(.instrument .screen, .editor-card, .test-card) { position: relative; border: 1px solid #070906; border-radius: 16px;
  box-shadow: 0 0 0 4px #0b0f09, 0 0 0 5px #55644b, 0 0 28px -4px rgb(61 255 143 / .22); }
[data-theme="fallout"] :is(.instrument .screen, .editor-card, .test-card)::after { content: ''; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none;
  background: radial-gradient(ellipse 75% 30% at 32% 0%, rgb(210 255 228 / .07), transparent 72%);
  box-shadow: inset 0 0 38px rgb(0 0 0 / .85), inset 0 0 0 1px rgb(93 255 158 / .22); }
[data-theme="fallout"] :is(.screen-bar, .editor-card-header) { text-transform: uppercase; letter-spacing: .1em; border-bottom-color: rgb(93 255 158 / .35); }
/* terminal-menu tabs: the chosen tab is boxed into the line under them */
[data-theme="fallout"] :is(.pg-tabs, .console-tabs) { background: transparent; border-top: 0; border-bottom: 1px solid var(--ink); }
[data-theme="fallout"] :is(.pg-tab, .console-tabs [role=tab]) { font-family: 'VT323', 'Geist Mono', monospace; font-size: 16.5px; font-size-adjust: .52; font-weight: 400; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
[data-theme="fallout"] :is(.pg-tab[aria-selected="true"], .console-tabs [role=tab][aria-selected=true]) {
  margin-bottom: -1px; color: var(--ink); background: var(--screen); border: 1px solid var(--ink); border-bottom-color: var(--screen); border-radius: 4px 4px 0 0;
  box-shadow: none; text-shadow: 0 0 .35em rgb(93 255 158 / .85); }
/* hardware buttons on the casing */
[data-theme="fallout"] :is(.instrument, .coding-pane) .btn:not(.btn-primary) { border-radius: 8px; border: 1px solid #4f5e46; color: var(--ink);
  background: linear-gradient(180deg, #2c3626, #161c13); box-shadow: inset 0 1px 0 rgb(255 255 255 / .16), 0 2px 0 #090c07; text-transform: uppercase; letter-spacing: .08em; }
[data-theme="fallout"] :is(.instrument, .coding-pane) .btn:not(.btn-primary):hover { background: linear-gradient(180deg, #34402d, #1b2217); }
[data-theme="fallout"] .instrument .pg-template { border-radius: 6px; border-color: #4f5e46; background: #10150d; }
[data-theme="fallout"] .instrument .pg-template[aria-pressed="true"] { background: var(--ink); color: var(--on-accent); text-shadow: none; }
@media (prefers-reduced-motion: reduce) { [data-theme="fallout"] body::after { animation: none; } }

/* Remix (owner, 2026-10-27: "a theme very youthful, music, gen-z, go crazy"): neon on a
   purple-black club floor. Slow lava-lamp blobs and grain behind; a rainbow line under the header; chunky Bricolage Grotesque headings with a shimmering rainbow on the page title; sticker
   cards and buttons with neon outlines and hard offset shadows, tilted a little until you point at
   them; the homepage wheel turns into a vinyl record. Text colours stay the checked tokens. */
[data-theme="remix"] {
  --display: 'Bricolage Grotesque', 'Geist', system-ui, sans-serif;
  --lit-edge: rgb(255 255 255 / .1);
  --glow-a: rgb(255 46 151 / .3);
  --glow-b: rgb(139 92 246 / .34);
  --glow-c: rgb(110 231 255 / .18);
  --grid-line: transparent;
  --glass: rgb(18 2 31 / .72);
  --lit-panel: linear-gradient(160deg, #241040 0%, #1a0530 55%, #14032a 100%);
  --lit-shadow: 0 0 0 2px rgb(255 255 255 / .9), 6px 6px 0 2px #ff2e97;
  --lit-shadow-hover: 0 0 0 2px #fff, 9px 9px 0 2px #c6ff00;
  --rainbow: linear-gradient(90deg, #ff2e97, #ffd23f, #c6ff00, #6ee7ff, #b98cff, #ff2e97);
  scrollbar-color: #ff2e97 #12021f;
}
[data-theme="remix"] ::selection { background: #ff2e97; color: #fff; }
[data-theme="remix"] .editor-area textarea { caret-color: #c6ff00; }
/* lava lamp: big soft blobs drifting slowly behind everything */
[data-theme="remix"] body::before {
  background-image:
    radial-gradient(38% 46% at 18% 22%, rgb(255 46 151 / .34), transparent 70%),
    radial-gradient(42% 50% at 82% 18%, rgb(139 92 246 / .42), transparent 70%),
    radial-gradient(36% 40% at 70% 88%, rgb(110 231 255 / .2), transparent 70%),
    radial-gradient(30% 34% at 12% 92%, rgb(198 255 0 / .14), transparent 70%);
  background-size: 140% 140%; background-position: 0% 0%;
  -webkit-mask-image: none; mask-image: none;
  animation: remix-lava 28s ease-in-out infinite alternate;
}
@keyframes remix-lava { 0% { background-position: 0% 0%; } 50% { background-position: 60% 40%; } 100% { background-position: 100% 100%; } }
[data-theme="remix"] body::after {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* a clean rainbow line under the header (the equaliser was dropped, owner 2026-10-27) */
[data-theme="remix"] .site-header::after { height: 2px; opacity: 1; background: var(--rainbow); }
/* type: chunky headings; the page title shimmers in a rainbow */
[data-theme="remix"] :is(h1, h2) { font-weight: 800; letter-spacing: -.045em; }
[data-theme="remix"] :is(h1, .home-head h2):not(#d-title) {
  background: var(--rainbow); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: remix-shimmer 9s linear infinite;
}
[data-theme="remix"] .d-hero h1 span { color: rgb(255 255 255 / .42); }
[data-theme="remix"] .d-hero h1 span.on { background: var(--rainbow); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: remix-shimmer 9s linear infinite; }
@keyframes remix-shimmer { to { background-position: 300% 0; } }
[data-theme="remix"] .brand-name { font-weight: 800; letter-spacing: -.04em; }
/* sticker buttons: neon fill, black outline, a hard shadow that presses in */
[data-theme="remix"] .btn { border-radius: 14px; font-weight: 700; transition: transform .12s ease, box-shadow .12s ease; }
[data-theme="remix"] .btn-primary { background: #c6ff00; color: #12021f; border: 2px solid #000; box-shadow: 5px 5px 0 #ff2e97; filter: none; }
[data-theme="remix"] .btn-primary:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 #ff2e97; filter: none; }
[data-theme="remix"] .btn-primary:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 #ff2e97; }
[data-theme="remix"] .btn-ghost { border: 2px solid #fff; background: transparent; box-shadow: 5px 5px 0 #6ee7ff; }
[data-theme="remix"] .btn-ghost:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 #6ee7ff; }
/* the nav: a hot-pink pill for the current page */
[data-theme="remix"] .site-nav a[aria-current="page"] { background: #ff2e97; color: #12021f; box-shadow: 0 0 0 2px #000, 0 0 24px -2px rgb(255 46 151 / .8); }
[data-theme="remix"] .site-nav a[aria-current="page"] .nav-icon { color: #12021f; }
/* sticker cards: neon outline and a hard shadow in the card's own colour, tilted a little */
[data-theme="remix"] .lit { border: 0; }
[data-theme="remix"] :is(.track-card, .format-card) { border: 0; box-shadow: 0 0 0 2px #fff, 7px 7px 0 2px var(--tch); }
[data-theme="remix"] :is(.track-card, .format-card):hover { box-shadow: 0 0 0 2px #fff, 11px 11px 0 2px var(--tch); }
[data-theme="remix"] [data-tilt] { transform: perspective(900px) rotate(var(--rz, 0deg)) rotateX(var(--trx, 0deg)) rotateY(var(--try, 0deg)) translateY(var(--tly, 0px)); }
[data-theme="remix"] :is(.track-card, .format-card):nth-child(odd) { --rz: -1.4deg; }
[data-theme="remix"] :is(.track-card, .format-card):nth-child(even) { --rz: 1.1deg; }
[data-theme="remix"] [data-tilt].tilting { --rz: 0deg; }
[data-theme="remix"] .planned-chip { border: 2px solid #fff; color: #fff; background: #3d1a5c; box-shadow: 3px 3px 0 #ff2e97; }
[data-theme="remix"] .planned-chip:nth-of-type(2) { rotate: -2deg; box-shadow: 3px 3px 0 #6ee7ff; } [data-theme="remix"] .planned-chip:nth-of-type(3) { rotate: 2deg; box-shadow: 3px 3px 0 #c6ff00; }
[data-theme="remix"] :is(.instrument, .editor-card, .test-card) { border: 2px solid #fff; box-shadow: 7px 7px 0 #ff2e97; }
[data-theme="remix"] .test-card { box-shadow: 7px 7px 0 #6ee7ff; }
/* the homepage wheel as a vinyl record: black grooves, a sheen, a hot-pink label ring */
[data-theme="remix"] .wafer rect { display: none; }
[data-theme="remix"] .wafer-disc { fill: #050008; }
[data-theme="remix"] .wafer-sheen { mix-blend-mode: normal; opacity: 1; filter: none;
  background: conic-gradient(from 25deg, transparent 0 8%, rgb(255 255 255 / .16) 13%, transparent 19% 50%, rgb(255 255 255 / .12) 62%, transparent 68%),
    repeating-radial-gradient(circle, rgb(255 255 255 / .07) 0 .6px, transparent .9px 3.2px); }
[data-theme="remix"] .hub { fill: #0b0014; }
[data-theme="remix"] .hub-ring { stroke: #ff2e97; stroke-width: 7; filter: drop-shadow(0 0 10px rgb(255 46 151 / .7)); }
[data-theme="remix"] .rim { fill: #08000f; stroke: #fff; stroke-width: 2.5; }
[data-theme="remix"] .seg-label { font-family: 'Bricolage Grotesque', var(--sans); font-weight: 800; letter-spacing: .14em; fill: #12021f; }
/* louder (owner, 2026-10-27: "not sufficiently impressed"): outlined hero words, stickers, a
   turntable arm on the vinyl wheel, and crossing ticker tapes under the hero (markup in home.mjs). */
[data-theme="remix"] .d-hero { position: relative; }
[data-theme="remix"] .d-hero h1 span { color: transparent; -webkit-text-stroke: 2px rgb(255 255 255 / .9); }
[data-theme="remix"] .d-hero h1 span.on { -webkit-text-stroke: 0; }
[data-theme="remix"] .d-hero::before { content: 'FREE\A& REAL'; white-space: pre; position: absolute; z-index: 2; left: 44%; top: 2%; width: 116px; height: 116px;
  display: grid; place-items: center; text-align: center; font: 800 16px/1.05 var(--display); letter-spacing: -.01em; color: #12021f;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%3E%3Cpath%20d='M50.0%202.0%20L57.4%2012.7%20L68.4%205.7%20L71.1%2018.4%20L83.9%2016.1%20L81.6%2028.9%20L94.3%2031.6%20L87.3%2042.6%20L98.0%2050.0%20L87.3%2057.4%20L94.3%2068.4%20L81.6%2071.1%20L83.9%2083.9%20L71.1%2081.6%20L68.4%2094.3%20L57.4%2087.3%20L50.0%2098.0%20L42.6%2087.3%20L31.6%2094.3%20L28.9%2081.6%20L16.1%2083.9%20L18.4%2071.1%20L5.7%2068.4%20L12.7%2057.4%20L2.0%2050.0%20L12.7%2042.6%20L5.7%2031.6%20L18.4%2028.9%20L16.1%2016.1%20L28.9%2018.4%20L31.6%205.7%20L42.6%2012.7%20Z'%20fill='%23c6ff00'%20stroke='%23000'%20stroke-width='2.5'/%3E%3C/svg%3E") center / contain no-repeat; rotate: -14deg; filter: drop-shadow(5px 6px 0 #ff2e97); animation: remix-float 5s ease-in-out infinite; }
[data-theme="remix"] .d-hero::after { content: ''; position: absolute; z-index: 2; left: 40%; bottom: 8%; width: 58px; height: 58px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%3E%3Cpath%20d='M50%202%20C55%2038%2062%2045%2098%2050%20C62%2055%2055%2062%2050%2098%20C45%2062%2038%2055%202%2050%20C38%2045%2045%2038%2050%202Z'%20fill='%23ff2e97'%20stroke='%23000'%20stroke-width='3'/%3E%3C/svg%3E") center / contain no-repeat; filter: drop-shadow(4px 4px 0 #6ee7ff); animation: remix-float 6.5s ease-in-out -2s infinite; }
@keyframes remix-float { 50% { translate: 0 -10px; } }
[data-theme="remix"] .wheel::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20600%20600'%3E%3Cdefs%3E%3ClinearGradient%20id='m'%20x1='0'%20y1='0'%20x2='1'%20y2='1'%3E%3Cstop%20offset='0'%20stop-color='%23ffffff'/%3E%3Cstop%20offset='.5'%20stop-color='%23b9b3c6'/%3E%3Cstop%20offset='1'%20stop-color='%236f6680'/%3E%3C/linearGradient%3E%3CradialGradient%20id='c'%20cx='.35'%20cy='.3'%20r='.8'%3E%3Cstop%20offset='0'%20stop-color='%23ffffff'/%3E%3Cstop%20offset='1'%20stop-color='%237d7390'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cg%20filter='drop-shadow(6px%2010px%206px%20rgba(0,0,0,.55))'%3E%3Ccircle%20cx='566'%20cy='36'%20r='30'%20fill='%232a1440'%20stroke='%23ffffff'%20stroke-width='3'/%3E%3Cpath%20d='M566%2036%20L500%20158%20Q490%20178%20466%20214'%20fill='none'%20stroke='url(%23m)'%20stroke-width='9'%20stroke-linecap='round'/%3E%3Cpath%20d='M466%20214%20L452%20238'%20stroke='%23ffffff'%20stroke-width='22'%20stroke-linecap='round'/%3E%3Cpath%20d='M466%20214%20L452%20238'%20stroke='%23ff2e97'%20stroke-width='16'%20stroke-linecap='round'/%3E%3Ccircle%20cx='566'%20cy='36'%20r='15'%20fill='url(%23c)'/%3E%3Ccircle%20cx='566'%20cy='36'%20r='4'%20fill='%232a1440'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat; }
[data-theme="remix"] .remix-tapes { display: block; }
@media (max-width: 1000px) {
  [data-theme="remix"] .d-hero::before { left: auto; right: 2%; top: -2%; width: 92px; height: 92px; font-size: 13px; }
  [data-theme="remix"] .d-hero::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  [data-theme="remix"] body::before, [data-theme="remix"] :is(h1, .home-head h2), [data-theme="remix"] .d-hero h1 span.on, [data-theme="remix"] .d-hero::before, [data-theme="remix"] .d-hero::after, [data-theme="remix"] .tape span { animation: none; }
}

/* Beach Riot (owner, 2026-10-27: "more punk, beach, bikini, party"): a punk zine at a beach party.
   Warm sand with a confetti / polka-dot print and xerox grain; a sunset glow; a retro striped sun
   and a palm silhouette in the hero; the hero words cut out like a ransom note; marker headings;
   thick black outlines with hard black shadows and strips of tape; a checkerboard strip under the
   header; the homepage wheel as a beach ball. Text colours stay the checked tokens. */
[data-theme="riot"] {
  --display: 'Permanent Marker', 'Geist', system-ui, sans-serif;
  --lit-edge: rgb(255 255 255 / .9);
  --glow-a: rgb(255 122 60 / .34);
  --glow-b: rgb(255 46 126 / .2);
  --glow-c: rgb(31 162 255 / .2);
  --glass: rgb(255 241 210 / .88);
  --lit-panel: #ffffff;
  --lit-shadow: 6px 6px 0 #130a1c;
  --lit-shadow-hover: 9px 9px 0 #130a1c;
  --ink-line: #130a1c;
  scrollbar-color: #c8005a #fff1d2;
}
[data-theme="riot"] ::selection { background: #ffd23f; color: #130a1c; }
/* confetti and polka dots, like a bikini print */
[data-theme="riot"] body::before {
  background: radial-gradient(circle, rgb(255 46 126 / .3) 3px, transparent 3.6px) 0 0 / 52px 52px,
    radial-gradient(circle, rgb(31 162 255 / .28) 2.6px, transparent 3.2px) 26px 26px / 52px 52px,
    radial-gradient(circle, rgb(255 190 0 / .42) 3.4px, transparent 4px) 13px 39px / 78px 78px,
    radial-gradient(circle, rgb(120 210 0 / .28) 2.2px, transparent 2.8px) 45px 9px / 91px 91px;
  -webkit-mask-image: none; mask-image: none;
}
[data-theme="riot"] body::after { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; 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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .07 0 0 0 0 .04 0 0 0 0 .1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* type: marker headings */
[data-theme="riot"] :is(h1, h2, .brand-name, .tc-title, .format-card h3, .hub-title, .lab-disclosure > summary strong, .rail-module) {
  font-family: 'Permanent Marker', 'Geist', system-ui, sans-serif; font-weight: 400; letter-spacing: .01em; font-stretch: normal;
}
[data-theme="riot"] h1 { line-height: 1.12; }
/* the hero words, cut out like a ransom note */
[data-theme="riot"] .d-hero { position: relative; }
[data-theme="riot"] .d-hero > * { position: relative; z-index: 1; }
[data-theme="riot"] .d-hero h1 { font-size: clamp(46px, 5.4vw, 88px); line-height: 1.04; }
[data-theme="riot"] .d-hero h1 span { width: fit-content; margin: 0 0 .14em; padding: .04em .24em .1em; color: #130a1c; border: 3px solid #130a1c; box-shadow: 6px 6px 0 #130a1c;
  transition: transform .3s cubic-bezier(.3, 1.6, .5, 1), background .3s, color .3s; }
[data-theme="riot"] .d-hero h1 span:nth-child(1) { background: #ffd23f; rotate: -2.5deg; }
[data-theme="riot"] .d-hero h1 span:nth-child(2) { background: #6fe3ff; rotate: 1.8deg; margin-left: .35em; }
[data-theme="riot"] .d-hero h1 span:nth-child(3) { background: #ffffff; rotate: -1.2deg; margin-left: .12em; }
[data-theme="riot"] .d-hero h1 span.on { background: #c8005a; color: #ffffff; transform: scale(1.05); }
/* a retro striped sun and a palm, behind the wheel */
[data-theme="riot"] .d-hero::before { content: ''; position: absolute; z-index: 0; left: 43%; top: -18px; width: 280px; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: repeating-linear-gradient(180deg, transparent 0 13px, #fff1d2 13px 20px) 0 100% / 100% 46% no-repeat, linear-gradient(180deg, #ffd23f 0%, #ff8a3c 55%, #ff2e7e 100%);
  box-shadow: 0 0 80px 10px rgb(255 140 60 / .35); }
[data-theme="riot"] .d-hero::after { content: ''; position: absolute; z-index: 0; left: 39%; top: 92px; width: 150px; height: 200px; pointer-events: none; background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20120%20160'%3E%3Cg%20fill='%23130a1c'%3E%3Cpath%20d='M60%20158%20C58%20120%2060%2090%2070%2058%20L76%2060%20C67%2092%2066%20122%2068%20158%20Z'/%3E%3Cpath%20d='M72%2056%20C52%2036%2026%2034%206%2048%20C28%2040%2048%2044%2070%2062%20Z'/%3E%3Cpath%20d='M72%2056%20C60%2028%2064%2012%2082%202%20C72%2018%2072%2034%2076%2058%20Z'/%3E%3Cpath%20d='M72%2056%20C92%2034%20112%2034%20118%2050%20C104%2042%2092%2046%2076%2062%20Z'/%3E%3Cpath%20d='M72%2058%20C50%2056%2030%2070%2024%2092%20C36%2074%2052%2066%2072%2064%20Z'/%3E%3Cpath%20d='M74%2058%20C96%2058%20110%2072%20112%2094%20C102%2076%2090%2068%2074%2064%20Z'/%3E%3Ccircle%20cx='70'%20cy='60'%20r='5'/%3E%3Ccircle%20cx='78'%20cy='64'%20r='4.5'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; rotate: 6deg; }
/* header: sand glass, a checkerboard strip, a sticker pill for the current page */
[data-theme="riot"] .site-header::after { height: 10px; bottom: -10px; opacity: 1; background: repeating-conic-gradient(#130a1c 0 25%, #ffffff 0 50%) 0 0 / 20px 20px; }
[data-theme="riot"] .site-nav { border: 2px solid #130a1c; background: #ffffff; box-shadow: 4px 4px 0 #130a1c; }
[data-theme="riot"] .site-nav a[aria-current="page"] { background: #ffd23f; color: #130a1c; box-shadow: inset 0 0 0 2px #130a1c; }
[data-theme="riot"] .site-nav a[aria-current="page"] .nav-icon { color: #130a1c; }
[data-theme="riot"] .theme-button { border: 2px solid #130a1c; box-shadow: 3px 3px 0 #130a1c; }
/* punk buttons: black outline, hard shadow, they press in */
[data-theme="riot"] .btn { border: 3px solid #130a1c; border-radius: 10px; font-weight: 700; box-shadow: 5px 5px 0 #130a1c; transition: transform .12s ease, box-shadow .12s ease; }
[data-theme="riot"] .btn-primary { background: #c8005a; color: #ffffff; filter: none; }
[data-theme="riot"] .btn-primary:hover, [data-theme="riot"] .btn-ghost:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 #130a1c; filter: none; }
[data-theme="riot"] .btn:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 #130a1c; }
[data-theme="riot"] .btn-ghost { background: #ffffff; color: #130a1c; }
/* cards: outlined, hard-shadowed, tilted a little, with a strip of tape */
[data-theme="riot"] :is(.lit, .track-card, .format-card) { border: 3px solid #130a1c; border-radius: 14px; background: #ffffff; }
[data-theme="riot"] :is(.track-card, .format-card) { box-shadow: 7px 7px 0 #130a1c; }
[data-theme="riot"] :is(.track-card, .format-card):hover { box-shadow: 10px 10px 0 #130a1c; border-color: #130a1c; }
[data-theme="riot"] [data-tilt] { transform: perspective(900px) rotate(var(--rz, 0deg)) rotateX(var(--trx, 0deg)) rotateY(var(--try, 0deg)) translateY(var(--tly, 0px)); }
[data-theme="riot"] :is(.track-card, .format-card):nth-child(odd) { --rz: -1.2deg; }
[data-theme="riot"] :is(.track-card, .format-card):nth-child(even) { --rz: 1deg; }
[data-theme="riot"] [data-tilt].tilting { --rz: 0deg; }
[data-theme="riot"] .track-card::before { left: auto; right: -26px; top: 14px; width: 104px; height: 24px; rotate: 38deg; background: rgb(255 210 63 / .8); box-shadow: 0 1px 2px rgb(0 0 0 / .2); }
[data-theme="riot"] .format-card::before { content: ''; position: absolute; z-index: 2; top: -11px; left: 22px; width: 70px; height: 22px; rotate: -6deg; background: rgb(111 227 255 / .75); box-shadow: 0 1px 2px rgb(0 0 0 / .2); }
[data-theme="riot"] .format-card:nth-child(even)::before { background: rgb(255 122 184 / .7); rotate: 5deg; left: auto; right: 22px; }
[data-theme="riot"] .emblem { border: 2px solid #130a1c; box-shadow: 3px 3px 0 #130a1c; }
[data-theme="riot"] .planned-chip { border: 2px solid #130a1c; color: #130a1c; background: #6fe3ff; box-shadow: 3px 3px 0 #130a1c; }
[data-theme="riot"] .planned-chip:nth-of-type(2) { background: #ffd23f; rotate: -2deg; } [data-theme="riot"] .planned-chip:nth-of-type(3) { background: #ff7ab8; rotate: 2deg; }
[data-theme="riot"] :is(.instrument, .editor-card, .test-card, .problem-pane) { border: 3px solid #130a1c; box-shadow: 7px 7px 0 #130a1c; }
[data-theme="riot"] .test-card { box-shadow: 7px 7px 0 #c8005a; }
/* the homepage wheel as a beach ball: red, yellow, blue and white panels, black outlines */
[data-theme="riot"] .st-code { --st: #1f8fff; } [data-theme="riot"] .st-solve { --st: #ffd23f; } [data-theme="riot"] .st-sim { --st: #ff3b5c; }
[data-theme="riot"] .seg .band { fill: var(--st); stroke: #130a1c; stroke-width: 4; filter: none; }
[data-theme="riot"] :is(.seg.on, .seg:hover, .seg:focus-visible) .band { stroke: #130a1c; filter: brightness(1.08); }
[data-theme="riot"] :is(.band-sheen, .band-glint, .dome, .wafer rect, .wafer-notch) { display: none; }
[data-theme="riot"] .rim { fill: #ffffff; stroke: #130a1c; stroke-width: 5; }
[data-theme="riot"] .rim-edge { stroke: #130a1c; stroke-width: 2; }
[data-theme="riot"] :is(.ticks line, .ticks line.long) { stroke: #130a1c; }
[data-theme="riot"] .wafer-disc { fill: #ffffff; stroke: #130a1c; stroke-width: 4; }
[data-theme="riot"] .wafer-sheen { mix-blend-mode: normal; opacity: 1; filter: none;
  background: conic-gradient(from -30deg, #ff3b5c 0 60deg, #ffffff 0 120deg, #ffd23f 0 180deg, #ffffff 0 240deg, #1f8fff 0 300deg, #ffffff 0); }
[data-theme="riot"] .hub-ring { stroke: #ffffff; stroke-width: 6; }
[data-theme="riot"] .seg-label { font-family: 'Permanent Marker', var(--sans); font-weight: 400; letter-spacing: .12em; fill: #130a1c; font-size: 24px; }
[data-theme="riot"] .pointer path { fill: #130a1c; }
[data-theme="riot"] .wheel-svg { filter: drop-shadow(10px 12px 0 #130a1c); }
@media (max-width: 1000px) {
  [data-theme="riot"] .d-hero::before { left: auto; right: -40px; top: -30px; width: 190px; }
  [data-theme="riot"] .d-hero::after { display: none; }
}

/* Halloween (owner, 2026-10-27: "can you make a halloween theme"): a purple night with a full
   moon, drifting fog and a few bats; slime drips under the header; Creepster for the big headings;
   pumpkin-orange buttons that flicker like candlelight; cobwebs on the track cards; the homepage
   wheel as a jack-o'-lantern lit from inside. Text colours stay the checked tokens. */
[data-theme="halloween"] {
  --lit-edge: rgb(255 200 150 / .08);
  --glow-a: rgb(255 122 26 / .18);
  --glow-b: rgb(140 80 220 / .26);
  --glow-c: rgb(143 227 107 / .1);
  --grid-line: transparent;
  --glass: rgb(15 10 20 / .78);
  --lit-panel: linear-gradient(170deg, #241632 0%, #1a1124 55%, #140c1c 100%);
  --lit-shadow: inset 0 1px 0 var(--lit-edge), 0 24px 50px -28px #000, 0 0 0 1px rgb(255 122 26 / .12);
  --lit-shadow-hover: inset 0 1px 0 var(--lit-edge), 0 30px 60px -26px #000, 0 0 30px -6px rgb(255 122 26 / .45);
  scrollbar-color: #ff7a1a #0f0a14;
}
[data-theme="halloween"] ::selection { background: #8fe36b; color: #0f0a14; }
/* the moon and the fog, fixed behind the page */
[data-theme="halloween"] body::before {
  background: radial-gradient(circle at 86% 13%, #fff3d0 0 46px, rgb(255 236 190 / .32) 50px, rgb(255 220 160 / .08) 120px, transparent 220px),
    linear-gradient(0deg, rgb(185 150 230 / .13), transparent 32%);
  -webkit-mask-image: none; mask-image: none;
}
/* the problem workspace is packed edge to edge: fog only, no moon behind its controls */
[data-theme="halloween"] body.problem-page::before { background: linear-gradient(0deg, rgb(185 150 230 / .13), transparent 32%); }
/* a few bats, drifting slowly */
[data-theme="halloween"] body::after {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .75;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='900'%20height='520'%20viewBox='0%200%20900%20520'%3E%3Cg%20fill='%2305030a'%20opacity='.85'%3E%3Cpath%20transform='translate(120%2070)%20scale(2.2)'%20d='M0%206C2%202%206%201%208%204C9%202%2010%201%2011%202C12%201%2013%202%2014%204C16%201%2020%202%2022%206C20%205%2018%206%2017%208C16%207%2014%207%2013%209L11%2010L9%209C8%207%206%207%205%208C4%206%202%205%200%206Z'/%3E%3Cpath%20transform='translate(640%20140)%20scale(1.6)%20rotate(-8)'%20d='M0%206C2%202%206%201%208%204C9%202%2010%201%2011%202C12%201%2013%202%2014%204C16%201%2020%202%2022%206C20%205%2018%206%2017%208C16%207%2014%207%2013%209L11%2010L9%209C8%207%206%207%205%208C4%206%202%205%200%206Z'/%3E%3Cpath%20transform='translate(410%2040)%20scale(1.2)%20rotate(6)'%20d='M0%206C2%202%206%201%208%204C9%202%2010%201%2011%202C12%201%2013%202%2014%204C16%201%2020%202%2022%206C20%205%2018%206%2017%208C16%207%2014%207%2013%209L11%2010L9%209C8%207%206%207%205%208C4%206%202%205%200%206Z'/%3E%3Cpath%20transform='translate(780%20330)%20scale(1.1)'%20d='M0%206C2%202%206%201%208%204C9%202%2010%201%2011%202C12%201%2013%202%2014%204C16%201%2020%202%2022%206C20%205%2018%206%2017%208C16%207%2014%207%2013%209L11%2010L9%209C8%207%206%207%205%208C4%206%202%205%200%206Z'/%3E%3Cpath%20transform='translate(260%20400)%20scale(.9)%20rotate(-10)'%20d='M0%206C2%202%206%201%208%204C9%202%2010%201%2011%202C12%201%2013%202%2014%204C16%201%2020%202%2022%206C20%205%2018%206%2017%208C16%207%2014%207%2013%209L11%2010L9%209C8%207%206%207%205%208C4%206%202%205%200%206Z'/%3E%3C/g%3E%3C/svg%3E") 62% 2% / 900px 520px no-repeat;
  animation: hw-bats 18s ease-in-out infinite alternate;
}
@keyframes hw-bats { from { background-position: 58% 4%; } to { background-position: 66% 0%; } }
/* slime dripping from the header */
[data-theme="halloween"] .site-header::after { height: 16px; bottom: -15px; opacity: 1; background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='160'%20height='16'%20viewBox='0%200%20160%2016'%3E%3Cpath%20fill='%238fe36b'%20d='M0%200H160V3C156%203%20155%209%20152%209S148%203%20144%203H122C120%203%20119%2014%20116%2014S112%203%20110%203H88C86%203%2085%207%2082%207S78%203%2076%203H52C50%203%2049%2012%2046%2012S42%203%2040%203H18C16%203%2015%208%2012%208S8%203%206%203H0Z'/%3E%3C/svg%3E") repeat-x 0 0 / 160px 16px;
  filter: drop-shadow(0 0 6px rgb(143 227 107 / .45)); }
/* spooky headings */
[data-theme="halloween"] :is(h1, .home-head h2, .brand-name, .tc-title, .format-card h3, .hub-title) {
  font-family: 'Creepster', 'Geist', system-ui, sans-serif; font-weight: 400; letter-spacing: .04em; font-stretch: normal;
}
[data-theme="halloween"] .brand-name { letter-spacing: .06em; color: #ff9b3d; }
[data-theme="halloween"] .d-hero h1 { font-size: clamp(60px, 7vw, 116px); line-height: 1; }
[data-theme="halloween"] .d-hero h1 span { color: rgb(201 160 255 / .55); }
[data-theme="halloween"] .d-hero h1 span.on { color: #ff7a1a; text-shadow: 0 0 18px rgb(255 122 26 / .55), 0 0 2px #ffb066; }
[data-theme="halloween"] h1:not(#d-title) { color: #ff9b3d; text-shadow: 0 0 16px rgb(255 122 26 / .3); }
/* candlelit buttons */
[data-theme="halloween"] .btn-primary { background: radial-gradient(120% 140% at 50% 0%, #ffb066, #ff7a1a 55%, #c4520a); color: #1a0d00;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), 0 0 22px -4px rgb(255 122 26 / .7); }
[data-theme="halloween"] .btn-primary:hover { animation: hw-flicker 1.1s steps(1) infinite; filter: none; }
@keyframes hw-flicker { 0%, 100% { box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), 0 0 26px -2px rgb(255 122 26 / .85); } 33% { box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), 0 0 16px -6px rgb(255 122 26 / .5); } 66% { box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), 0 0 30px 0 rgb(255 160 60 / .75); } }
[data-theme="halloween"] .site-nav a[aria-current="page"] { background: linear-gradient(180deg, rgb(255 122 26 / .3), rgb(255 122 26 / .12)); box-shadow: inset 0 0 0 1px rgb(255 122 26 / .6), 0 0 18px -6px rgb(255 122 26 / .7); }
/* cobwebs in the corner of the track cards */
[data-theme="halloween"] .track-card::before { left: auto; right: 0; top: 0; width: 78px; height: 78px; background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2080%2080'%3E%3Cg%20fill='none'%20stroke='%23e6d8cc'%20stroke-opacity='.45'%20stroke-width='1'%3E%3Cpath%20d='M80%200L0%200M80%200L80%2080M80%200L20%2030M80%200L45%2055M80%200L60%2070M80%200L5%2012'/%3E%3Cpath%20d='M66%200Q68%208%2080%2012M50%200Q55%2018%2080%2026M34%200Q42%2030%2080%2042M18%200Q28%2044%2080%2060'/%3E%3C/g%3E%3Cpath%20d='M58%2026v14'%20stroke='%23e6d8cc'%20stroke-opacity='.5'/%3E%3Ccircle%20cx='58'%20cy='43'%20r='3.2'%20fill='%2305030a'%20stroke='%23bba9c4'%20stroke-width='.8'/%3E%3C/svg%3E") no-repeat top right / contain; }
[data-theme="halloween"] :is(.track-card, .format-card):hover { border-color: rgb(255 122 26 / .55); }
/* the homepage wheel as a jack-o'-lantern lit from inside */
[data-theme="halloween"] .st-code { --st: #ff8a1f; } [data-theme="halloween"] .st-solve { --st: #ff7a1a; } [data-theme="halloween"] .st-sim { --st: #ff9b3d; }
[data-theme="halloween"] .seg .band { fill: var(--st); stroke: #6e2a00; stroke-width: 3; filter: none; }
[data-theme="halloween"] :is(.seg.on, .seg:hover, .seg:focus-visible) .band { stroke: #ffd166; filter: brightness(1.12); }
[data-theme="halloween"] .seg-label { font-family: 'Creepster', var(--sans); font-weight: 400; font-size: 26px; letter-spacing: .14em; fill: #2a1000; }
[data-theme="halloween"] .rim { fill: #160d1f; stroke: #ff7a1a; stroke-opacity: .5; }
[data-theme="halloween"] .ticks line, [data-theme="halloween"] .ticks line.long { stroke: rgb(255 155 61 / .45); }
[data-theme="halloween"] :is(.wafer rect, .wafer-notch) { display: none; }
[data-theme="halloween"] .wf-hi { stop-color: #ffd166; } [data-theme="halloween"] .wf-lo { stop-color: #c4520a; }
[data-theme="halloween"] .wafer-sheen { mix-blend-mode: normal; filter: none; opacity: .9; background: radial-gradient(circle, rgb(255 240 180 / .55), rgb(255 160 40 / .15) 55%, transparent 72%);
  animation: hw-candle 2.6s ease-in-out infinite; }
@keyframes hw-candle { 0%, 100% { opacity: .9; } 30% { opacity: .65; } 45% { opacity: .95; } 70% { opacity: .72; } }
[data-theme="halloween"] .hub-ring { stroke: #ff7a1a; stroke-width: 3; }
[data-theme="halloween"] .pointer path { fill: #4f7a23; }
[data-theme="halloween"] .wheel-svg { filter: drop-shadow(0 0 40px rgb(255 122 26 / .35)) drop-shadow(0 26px 30px #000); }
@media (prefers-reduced-motion: reduce) {
  [data-theme="halloween"] body::after, [data-theme="halloween"] .wafer-sheen, [data-theme="halloween"] .btn-primary:hover { animation: none; }
}

/* ---- the page: ambient light and a faint wafer grid, fixed behind the content ---- */
body {
  background-color: var(--paper);
  background-image:
    radial-gradient(1100px 640px at 6% -10%, var(--glow-a), transparent 62%),
    radial-gradient(900px 620px at 104% 2%, var(--glow-b), transparent 64%),
    radial-gradient(1100px 760px at 50% 118%, var(--glow-c), transparent 62%);
  background-attachment: fixed;
}
body::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 36px 36px;
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 0%, transparent 78%);
  mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 0%, transparent 78%);
}
main, .site-footer, .problem-head, .workspace { position: relative; z-index: 1; }   /* the problem page has no <main> */

/* ---- header: glass over the ambient light, a spectrum line instead of a hairline ---- */
.site-header { background: var(--glass); -webkit-backdrop-filter: blur(14px) saturate(1.35); backdrop-filter: blur(14px) saturate(1.35); border-bottom-color: transparent; }
.site-header::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--spectrum); opacity: .8; }
.brand-mark { filter: drop-shadow(0 4px 7px color-mix(in srgb, var(--accent) 38%, transparent)); }
[data-theme="contrast"] .brand-mark { filter: none; }
.site-nav a { transition: background var(--dur-1), color var(--dur-1); }
.theme-button { background: var(--lit-panel); box-shadow: var(--lit-shadow); }

/* ---- controls: glossy primary, glass secondary ---- */
.btn { transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease), filter var(--dur-1); }
.btn-primary {
  background: linear-gradient(180deg, color-mix(in srgb, #fff 20%, var(--accent)) 0%, var(--accent) 52%, color-mix(in srgb, #000 12%, var(--accent)) 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .42), inset 0 -1px 0 rgb(0 0 0 / .12), 0 10px 24px -10px color-mix(in srgb, var(--accent) 75%, transparent);
}
.btn-primary:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgb(255 255 255 / .5), 0 16px 30px -10px color-mix(in srgb, var(--accent) 85%, transparent); }
.btn-primary:active { transform: translateY(0); }
.btn-ghost { background: var(--lit-panel); box-shadow: var(--lit-shadow); }
.btn-ghost:hover { transform: translateY(-1px); box-shadow: var(--lit-shadow-hover); }
.select { background: var(--lit-panel); box-shadow: var(--lit-shadow); }

/* ---- a reusable lit panel, and the lift on hover ---- */
.lit { background: var(--lit-panel); border: var(--bw) solid color-mix(in srgb, var(--rule) 85%, transparent); border-radius: var(--lit-r); box-shadow: var(--lit-shadow); }
.lift { transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s; }
.lift:hover, .lift:focus-visible { transform: translateY(-4px); box-shadow: var(--lit-shadow-hover); }

/* ---- footer: a lit band under a spectrum line ---- */
.site-footer .title-block { border: var(--bw) solid color-mix(in srgb, var(--rule) 85%, transparent); border-radius: var(--lit-r); background: var(--lit-panel); box-shadow: var(--lit-shadow); overflow: hidden; position: relative; }
.site-footer .title-block::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--spectrum); }
.site-footer .title-block > * + * { border-left-color: color-mix(in srgb, var(--rule) 85%, transparent); }

/* The landing and Learn pages use a plain footer layout (landing.css); give it the panel's room. */
.signal-landing .site-footer { border-top: 0; }
.signal-landing .site-footer .title-block { padding: 24px 26px 22px; border: var(--bw) solid color-mix(in srgb, var(--rule) 85%, transparent); }

/* ---- scroll reveal: assets/v3/site.mjs hides only [data-reveal] sections that start below the
   screen and shows them as they arrive; without JS, or with reduced motion, nothing is hidden ---- */
.reveal-wait { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal-wait.revealed { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .btn, .lift { transition: none; }
  .btn-primary:hover, .btn-ghost:hover, .lift:hover, .lift:focus-visible { transform: none; }
  .reveal-wait { opacity: 1; transform: none; transition: none; }
}
@media (max-width: 760px) {
  .site-footer .title-block > * + * { border-top-color: color-mix(in srgb, var(--rule) 85%, transparent); }
}