/* Cosmos look (docs/plan/2026-10-07-cosmos-look.md): the home stage's night sky, glass and neon on every page.
   Only tokens and shared classes change here, so a new page built from the design system gets it for free.
   Light theme (the user's choice) is left alone: every rule starts with the dark selector. */

:root[data-theme="dark"] {
  --bg: #050b14; --surface: var(--ag-tint); --surface-2: rgb(28 38 68 / .5); --surface-3: rgb(42 54 88 / .55);
  --ink: #f4f6ff; --ink-2: #dde2f6; --muted: #ccd3ee; --faint: #98a2c8;
  --rule: rgb(255 255 255 / .1); --hairline: var(--ag-edge); --hairline-strong: var(--ag-edge-strong);
  --accent: #22d3ee; --accent-2: #c084fc; --accent-ink: #021018;
  --grad: linear-gradient(135deg, #22d3ee 0%, #6d8cff 52%, #c084fc 100%);
  --panel: rgb(14 22 46 / .7); --bx-grad: var(--ag-sheen);
  --cta: var(--ag-lime); --on-cta: var(--ag-cta-ink); --glow: 0 0 24px -4px color-mix(in srgb, var(--accent) 55%, transparent);
  --e2: var(--ag-spec), var(--ag-shadow);
  --e3: var(--ag-spec), 0 26px 48px -18px rgb(0 0 0 / .85), 0 0 30px -12px rgb(163 230 53 / .3);
  --ring: 0 0 0 3px rgb(34 211 238 / .4);
}
/* Aurora Glass (leo, Oct 29; docs/plan/2026-10-29-aurora-glass.md): the tokens come from css/ui-kit.css (--ag-*). The
   call to action is the mockup's lime with dark words (11:1), the hero banner is a sheet of frosted glass, and cards sit on
   a dark tint under the sheen, so white text keeps 7:1 or more even over the brightest part of the aurora. */

/* the sky: three slow colour fields over near-black, fixed behind everything (same palette as the home stage) */
:where(html:not(.a11y-contrast)):root[data-theme="dark"] body {
  background:
    radial-gradient(60vw 50vh at 18% 12%, rgb(34 211 238 / .17), transparent 70%),
    radial-gradient(55vw 45vh at 92% 30%, rgb(192 132 252 / .16), transparent 70%),
    radial-gradient(50vw 40vh at 50% 105%, rgb(163 230 53 / .09), transparent 70%),
    var(--bg);
  background-attachment: fixed;
}

/* glass cards: translucent, thin bright edge, a light sheen on the top edge */
:where(html:not(.a11y-contrast)):root[data-theme="dark"] :is(.panel, .auth-wrap, .game-card, .lb-me, .lb-cta, .game-end, .tip, .wd-panel, .test-result, .ds-card, .ds-tile) {
  background: var(--ag-sheen), var(--surface);
  border: 1px solid var(--hairline); border-radius: var(--r-xl); box-shadow: var(--e2);
}
:where(html:not(.a11y-contrast, .pref-lite, .weak-phone)):root[data-theme="dark"] :is(.panel, .ds-card, .ds-tile, .game-card, .hero-main) {
  -webkit-backdrop-filter: var(--ag-blur); backdrop-filter: var(--ag-blur);
}
/* weak phones (html.weak-phone, js/scene.js): a blur over the fixed sky is redone on every scrolled frame, and the home
   hero alone is a phone screen and a half tall. The big cards drop it and get a denser tint, so text keeps its contrast. */
:where(html.weak-phone:not(.a11y-contrast)):root[data-theme="dark"] :is(.panel, .ds-card, .ds-tile, .game-card, .hero-main) { background-color: rgb(9 17 38 / .74); }
/* the home and map blocks that paint the plain surface get the same sheen and lit edge (no blur: most sit inside a
   blurred block already, and every blur is one more pass over the sky while scrolling) */
:where(html:not(.a11y-contrast)):root[data-theme="dark"] :is(.hero-main, .level-card, .polly, .today-card, .wod, .st-pick, .quests, .skills-map, .level, .bx-teacher, .bx-cta, .home-more) {
  background-image: var(--ag-sheen); border-color: var(--hairline); box-shadow: var(--e2);
}
:where(html:not(.a11y-contrast)):root[data-theme="dark"] :is(a.ds-card, button.ds-card, a.ds-tile, .game-card):hover {
  border-color: rgb(34 211 238 / .6); box-shadow: var(--e3);
}
/* keyboard focus keeps its ring on a glass card: the card shadow above outranked each card's own :focus-visible ring
   (the exam tiles, for one, showed no focus at all at night) */
:where(html:not(.a11y-contrast)):root[data-theme="dark"] :is(a.ds-card, button.ds-card, a.ds-tile, button.ds-tile, .game-card):focus-visible {
  outline: none; box-shadow: var(--ring), var(--e2);
}

/* neon primary button: cyan to violet, with a soft glow */
/* the main button: the mockup's lime "Let's go", lit on top and resting on a short darker edge that it sinks into when pressed */
:where(html:not(.a11y-contrast)):root[data-theme="dark"] .btn.primary {
  background: var(--ag-cta); color: var(--ag-cta-ink); font-weight: 700; border: 0;
  box-shadow: inset 0 2px 0 rgb(255 255 255 / .65), 0 4px 0 var(--ag-cta-edge), 0 10px 22px -6px rgb(163 230 53 / .3);
}
:where(html:not(.a11y-contrast)):root[data-theme="dark"] .btn.primary:hover:not(:disabled) { background: var(--ag-cta); filter: brightness(1.06); }
:where(html:not(.a11y-contrast)):root[data-theme="dark"] .btn.primary:active:not(:disabled) {
  transform: translateY(3px); box-shadow: inset 0 2px 0 rgb(255 255 255 / .5), 0 1px 0 var(--ag-cta-edge);
}
:where(html:not(.a11y-contrast)):root[data-theme="dark"] .btn.primary:focus-visible { box-shadow: var(--ring), 0 4px 0 var(--ag-cta-edge); }
/* the sign-in key is a pill of the same frosted glass, so the lime stays the one main action on the screen */
:where(html:not(.a11y-contrast)):root[data-theme="dark"] .account-btn:not(:has(.avatar)) {
  background: linear-gradient(rgb(255 255 255 / .24), rgb(255 255 255 / .1)), rgb(8 14 32 / .3); color: #fff;
  border: 1px solid var(--ag-edge-strong); box-shadow: var(--ag-spec), 0 8px 18px -10px rgb(0 0 0 / .7);
}
:where(html:not(.a11y-contrast)):root[data-theme="dark"] .btn.ghost {
  background: rgb(255 255 255 / .08); border: 1px solid var(--hairline-strong); box-shadow: inset 0 1px 0 rgb(255 255 255 / .22);
}

/* lesson answers: glass tiles that light up under the finger, and glow green or red once answered (leo, Oct 11: an app from
   the future; docs/plan/2026-10-11-app-look-tiles.md). The selectors outrank css/ds/lesson.css, so hover, focus, right and
   wrong are restated here rather than lost. */
:where(html:not(.a11y-contrast)):root[data-theme="dark"] .lesson .options .opt:not(.right, .wrong) {
  background: linear-gradient(160deg, rgb(255 255 255 / .09), rgb(255 255 255 / .03) 60%), var(--surface);
  border-color: rgb(255 255 255 / .18); box-shadow: inset 0 1px 0 rgb(255 255 255 / .08), 0 6px 18px -10px rgb(0 0 0 / .9);
}
:where(html:not(.a11y-contrast)):root[data-theme="dark"] .lesson .options .opt:not(.right, .wrong):is(:active, :focus-visible):not(:disabled) {
  border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 24px -6px var(--accent);
}
@media (hover: hover) and (pointer: fine) {
  :where(html:not(.a11y-contrast)):root[data-theme="dark"] .lesson .options .opt:not(.right, .wrong):hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--accent) 60%, transparent); box-shadow: 0 0 22px -10px var(--accent);
  }
}
:where(html:not(.a11y-contrast)):root[data-theme="dark"] .lesson .options .opt.right { box-shadow: 0 0 0 1px var(--ok), 0 0 26px -8px var(--ok); }
:where(html:not(.a11y-contrast)):root[data-theme="dark"] .lesson .options .opt.wrong { box-shadow: 0 0 0 1px var(--bad), 0 0 22px -8px var(--bad); }

/* fields, chips and pills: glass too */
:where(html:not(.a11y-contrast)):root[data-theme="dark"] :is(select, input, textarea, .chip, .pill, .seg) {
  background-color: rgb(30 40 70 / .58); border-color: var(--hairline-strong); color: var(--ink); /* a see-through white fell under 4:1 over the aurora */
}
:where(html:not(.a11y-contrast)):root[data-theme="dark"] .pill.plus { color: #1b1300; } /* the gold Plus badge keeps its dark ink (white on gold is 2:1) */
:where(html:not(.a11y-contrast)):root[data-theme="dark"] :is(.chip, .pill, .seg) { box-shadow: inset 0 1px 0 rgb(255 255 255 / .3); }
:where(html:not(.a11y-contrast)):root[data-theme="dark"] :is(.chip, .seg button).on,
:where(html:not(.a11y-contrast)):root[data-theme="dark"] :is(.chip, .seg button)[aria-pressed="true"] {
  border-color: var(--accent); box-shadow: var(--glow);
}

/* lite mode has no blur, so the bars are near solid: page text must not show through them */
:where(html.pref-lite:not(.a11y-contrast)):root[data-theme="dark"] :is(.top, .dock) { background: rgb(8 13 28 / .96); }

/* progress bars glow in the level colour */
:where(html:not(.a11y-contrast)):root[data-theme="dark"] .ds-progress > span { box-shadow: 0 0 12px -1px currentColor; }

/* headings: a faint neon edge on the biggest titles only */
:where(html:not(.a11y-contrast)):root[data-theme="dark"] :is(h1, .ds-hero h1) { text-shadow: 0 0 28px rgb(34 211 238 / .28); }

/* sidebar and phone tab bar: the same glass */
:where(html:not(.a11y-contrast, .pref-lite)):root[data-theme="dark"] :is(.top, .dock) {
  background: linear-gradient(rgb(255 255 255 / .1), rgb(255 255 255 / .04)), rgb(8 14 32 / .6); /* the snow at the photo's foot sits under the phone tab bar */
  -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4);
  border-color: var(--hairline); box-shadow: var(--ag-spec), 0 14px 30px -10px rgb(0 0 0 / .6);
}

@media (prefers-reduced-motion: no-preference) {
  html:not(.pref-calm) :is(a.ds-card, button.ds-card, a.ds-tile, .game-card) { transition: transform var(--dur-2) var(--ease), border-color var(--dur-2), box-shadow var(--dur-2); }
  html:not(.pref-calm):root[data-theme="dark"] :is(a.ds-card, a.ds-tile, .game-card):hover { transform: translateY(-3px); }
}

/* The night sky instead of the time-of-day photo (the default "auto" background): the photo box (js/scene.js) paints the
   aurora itself, a still 31 KB photo with no canvas and no loop. Photos, travel, nature and video are still there for
   people who pick them in Comfort settings. */
:where(html:not(.a11y-contrast, .pref-lite)):root[data-theme="dark"][data-scene="auto"] .scene-box {
  /* Aurora Glass: the real aurora photo under a dark wash; its stars are real, so no drawn starfield on top */
  background: var(--ag-scrim), url("../../media/site-bg/night-aurora.webp") 50% 38% / cover no-repeat, var(--bg);
}
/* wide screens keep most text on glass cards, so the aurora may glow brighter there */
@media (min-width: 900px) { :root[data-theme="dark"] { --ag-scrim: linear-gradient(180deg, rgb(5 12 26 / .1), rgb(5 12 24 / .38) 45%, rgb(5 11 20 / .74)); } }
:where(html:not(.a11y-contrast, .pref-lite)):root[data-theme="dark"][data-scene="auto"] .scene-box::after { display: none; }
/* Shooting stars (leo, Oct 29: more moving, falling stars, realistic, phone and desktop; docs/plan/2026-10-29-shooting-stars.md).
   Two streaks, the box's own ::before and ::after, each crossing the sky three times per long loop from a different
   place, so a star falls every few seconds and never twice on the same line. A streak is a thin tapered tail that brightens
   into a white head; it fades in, races along its own angle and burns out. Only transform and opacity move (the compositor
   does it, nothing repaints). Not with reduced motion, calm or easy mode, lite mode, in a lesson or under the walk game. */
@keyframes sc-fall-a {
  0%, 100% { opacity: 0; transform: translate(78vw, 6vh) rotate(150deg) translateX(0); }
  1% { opacity: 1; transform: translate(78vw, 6vh) rotate(150deg) translateX(calc(var(--sc-run) * .1)); }
  5% { opacity: 0; transform: translate(78vw, 6vh) rotate(150deg) translateX(var(--sc-run)); }
  35% { opacity: 0; transform: translate(58vw, 2vh) rotate(146deg) translateX(0); }
  36% { opacity: 1; transform: translate(58vw, 2vh) rotate(146deg) translateX(calc(var(--sc-run) * .1)); }
  40% { opacity: 0; transform: translate(58vw, 2vh) rotate(146deg) translateX(var(--sc-run)); }
  70% { opacity: 0; transform: translate(96vw, 24vh) rotate(156deg) translateX(0); }
  71% { opacity: .8; transform: translate(96vw, 24vh) rotate(156deg) translateX(calc(var(--sc-run) * .1)); }
  74.5% { opacity: 0; transform: translate(96vw, 24vh) rotate(156deg) translateX(calc(var(--sc-run) * .85)); }
}
@keyframes sc-fall-b {
  0%, 100% { opacity: 0; transform: translate(14vw, 4vh) rotate(32deg) translateX(0); }
  1% { opacity: .9; transform: translate(14vw, 4vh) rotate(32deg) translateX(calc(var(--sc-run) * .1)); }
  4.5% { opacity: 0; transform: translate(14vw, 4vh) rotate(32deg) translateX(var(--sc-run)); }
  40% { opacity: 0; transform: translate(36vw, 16vh) rotate(38deg) translateX(0); }
  41% { opacity: 1; transform: translate(36vw, 16vh) rotate(38deg) translateX(calc(var(--sc-run) * .1)); }
  45% { opacity: 0; transform: translate(36vw, 16vh) rotate(38deg) translateX(var(--sc-run)); }
  72% { opacity: 0; transform: translate(4vw, 30vh) rotate(26deg) translateX(0); }
  73% { opacity: .85; transform: translate(4vw, 30vh) rotate(26deg) translateX(calc(var(--sc-run) * .1)); }
  76.5% { opacity: 0; transform: translate(4vw, 30vh) rotate(26deg) translateX(calc(var(--sc-run) * .9)); }
}
@media (prefers-reduced-motion: no-preference) {
  :where(html:not(.a11y-contrast, .pref-lite, .pref-calm, .pref-easy, .in-lesson, .pw-on)):root[data-theme="dark"][data-scene="auto"] .scene-box {
    --sc-run: min(46vw, 460px);
  }
  :where(html:not(.a11y-contrast, .pref-lite, .pref-calm, .pref-easy, .in-lesson, .pw-on)):root[data-theme="dark"][data-scene="auto"] .scene-box::before,
  :where(html:not(.a11y-contrast, .pref-lite, .pref-calm, .pref-easy, .in-lesson, .pw-on)):root[data-theme="dark"][data-scene="auto"] .scene-box::after {
    content: ''; display: block; position: absolute; top: 0; right: auto; bottom: auto; left: 0; z-index: 1; width: clamp(90px, 14vw, 170px); height: 12px; margin-top: -6px;
    margin-left: calc(clamp(90px, 14vw, 170px) * -1); transform-origin: calc(100% - 6px) 50%; opacity: 0; pointer-events: none;
    /* a white head with a soft blue halo, and a hair-thin tail that fades out behind it; the triangle clip thins the tail's far end */
    background: radial-gradient(circle 6px at calc(100% - 6px) 50%, #fff 0 1.4px, rgb(206 230 255 / .6) 2.2px, rgb(150 200 255 / .14) 4.2px, transparent 6px) no-repeat,
      linear-gradient(90deg, transparent, rgb(150 200 255 / .16) 40%, rgb(214 236 255 / .72) 88%, #fff calc(100% - 6px), transparent calc(100% - 6px)) 50% 50% / 100% 1.5px no-repeat;
    clip-path: polygon(0 50%, 100% 0, 100% 100%);
    will-change: transform, opacity; animation: sc-fall-a 17s linear 2.5s infinite;
  }
  :where(html:not(.a11y-contrast, .pref-lite, .pref-calm, .pref-easy, .in-lesson, .pw-on)):root[data-theme="dark"][data-scene="auto"] .scene-box::after {
    width: clamp(80px, 12vw, 150px); margin-left: calc(clamp(80px, 12vw, 150px) * -1); animation: sc-fall-b 23s linear 9s infinite;
  }
}
:where(html:not(.a11y-contrast, .pref-lite)):root[data-theme="dark"][data-scene="auto"] :is(.scene-photo, .scene-clip) { display: none; }
/* the scrim above already darkens the aurora as much as text needs; the photo veil on top of it only dulled it (lessons keep theirs) */
:where(html:not(.a11y-contrast, .pref-lite, .in-lesson)):root[data-theme="dark"][data-scene="auto"] .scene-veil { background: none; }
/* the page slab was a 76% dark veil to keep text readable over photos; over the night sky the cards are glass already,
   so the sky shows through between them. No veil at all: even a light one drew two hard vertical edges on wide screens. */
:where(html:not(.a11y-contrast, .pref-lite)):root[data-theme="dark"][data-scene="auto"] #view { background-color: transparent; box-shadow: none; }
/* the Games hero ("game of the day", the puzzle photo header) and the level photo headers still tinted their photos with the
   per-game flat colour; in the night look the veil is the sky's navy-violet, with a thin level/game colour at the edge */
:where(html:not(.a11y-contrast, .pref-lite)):root[data-theme="dark"][data-scene="auto"] .ax-hero::before {
  background: linear-gradient(0deg, rgb(3 4 12 / .55), transparent 58%),
    linear-gradient(var(--hero-dir), rgb(8 12 36 / .86) 0%, color-mix(in srgb, #4338ca 34%, rgb(8 12 36 / .62)) 55%, color-mix(in srgb, var(--cat-1, var(--accent)) 16%, transparent) 100%);
}
:where(html:not(.a11y-contrast, .pref-lite)):root[data-theme="dark"][data-scene="auto"] .ax-hero { box-shadow: var(--e3), inset 0 0 0 1px color-mix(in srgb, var(--cat-1, var(--accent)) 38%, transparent); }
:where(html:not(.a11y-contrast, .pref-lite)):root[data-theme="dark"][data-scene="auto"] .ax-world-head::before {
  background: linear-gradient(0deg, rgb(3 4 12 / .82) 0%, color-mix(in srgb, #4338ca 30%, rgb(8 12 36 / .4)) 62%, transparent);
  box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--lvc) 70%, transparent);
}

/* Premium finish (leo, Oct 12: "luxury, premium, high production"; docs/plan/2026-10-12-app-look-luxe.md). Looks only,
   dark theme only, nothing for high contrast; motion only where it is welcome and never in calm mode. */
/* a fine film grain over the sky, under the content: a still tile, no blend mode, no loop; lite mode goes without it */
:where(html:not(.a11y-contrast, .pref-lite)):root[data-theme="dark"] body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .06;
  background: 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 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 180px 180px;
}
/* the lesson's question card: an aurora in the level colour rises from its top edge, its rim catches the light, and the
   English word is set in the display face with a soft glow */
:where(html:not(.a11y-contrast)):root[data-theme="dark"] .lesson .prompt {
  border-color: color-mix(in srgb, var(--lv, var(--accent)) 34%, var(--hairline));
  background:
    radial-gradient(120% 90% at 50% -10%, color-mix(in srgb, var(--lv, var(--accent)) 20%, transparent), transparent 68%),
    linear-gradient(160deg, rgb(255 255 255 / .08), rgb(255 255 255 / .02) 60%), var(--surface);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .1), 0 18px 40px -20px rgb(0 0 0 / .9), 0 0 44px -20px var(--lv, var(--accent));
}
/* (Arabic target words keep their own face and spacing: css/ui-kit.css, "Arabic text") */
:where(html:not(.a11y-contrast)):root[data-theme="dark"] .lesson .prompt > .tgt:not([lang|="ar"]) {
  font-family: var(--font-target); font-weight: 700; letter-spacing: -.02em;
  text-shadow: 0 0 24px color-mix(in srgb, var(--lv, var(--accent)) 45%, transparent);
}
/* lesson progress: the level colour runs into a lighter tip and glows */
:where(html:not(.a11y-contrast)):root[data-theme="dark"] .lesson > .lesson-top .progress > span {
  background: linear-gradient(90deg, var(--lv, var(--accent)), color-mix(in srgb, var(--lv, var(--accent)) 55%, #fff));
  box-shadow: 0 0 14px -2px var(--lv, var(--accent)), inset 0 3px 0 -1px rgb(255 255 255 / .35);
}
:where(html:not(.a11y-contrast)):root[data-theme="dark"][dir="rtl"] .lesson > .lesson-top .progress > span {
  background: linear-gradient(270deg, var(--lv, var(--accent)), color-mix(in srgb, var(--lv, var(--accent)) 55%, #fff));
}
/* the phone tab bar: the open tab sits on a soft lit pill and its icon glows */
:where(html:not(.a11y-contrast)):root[data-theme="dark"] .dock-i.on {
  background: rgb(255 255 255 / .16); box-shadow: inset 0 1px 0 rgb(255 255 255 / .5); color: #fff; /* cyan words on the lit pill fell to 2.5:1 */
}
:where(html:not(.a11y-contrast)):root[data-theme="dark"] .dock-i.on::before { filter: drop-shadow(0 0 6px rgb(34 211 238 / .75)); }
/* new-word cards: the English word set in the display face, a touch bigger and bolder */
:where(html:not(.a11y-contrast)):root[data-theme="dark"] .lesson .word-tile > .tgt:not([lang|="ar"]) {
  font-family: var(--font-target); font-weight: 700; font-size: 1.16rem; letter-spacing: -.01em;
}
:where(html:not(.a11y-contrast)):root[data-theme="dark"] .lesson .word-tile .tile-img { box-shadow: 0 10px 24px -14px rgb(0 0 0 / .9); }
/* desktop scrollbars: thin and dark, so they don't cut a grey stripe through the sky */
@media (pointer: fine) { :where(html:not(.a11y-contrast)):root[data-theme="dark"] { scrollbar-color: rgb(255 255 255 / .2) transparent; scrollbar-width: thin; } }
/* each lesson step glides in: one short rise per step (translate and opacity only, so no layout work). The whole selector
   sits in :where(), so any part of the lesson with its own animation keeps it. */
@keyframes lx-step { from { opacity: 0; translate: 0 12px; } }
@media (prefers-reduced-motion: no-preference) {
  :where(html:not(.a11y-contrast, .pref-calm):root[data-theme="dark"] #view > .lesson:not(.finish) > :not(.lesson-top)) { animation: lx-step .32s var(--ease) both; }
  :where(html:not(.a11y-contrast, .pref-calm):root[data-theme="dark"] #view > .lesson:not(.finish) > :not(.lesson-top):nth-child(n+4)) { animation-delay: .06s; }
  :where(html:not(.a11y-contrast, .pref-calm):root[data-theme="dark"] #view > .lesson:not(.finish) > :not(.lesson-top):nth-child(n+5)) { animation-delay: .12s; }
}

/* Space cats, part 1: the lesson as a cockpit (leo, Oct 12: "a cool space look, Star Wars style but with cats";
   docs/plan/2026-10-12-space-cockpit.md). Our own world, no borrowed franchise: a lit console line under the top bar,
   segmented shield progress, a HUD frame with corner brackets on the question, hologram answer tiles and radar rings
   round the big sound button. Dark theme only, nothing for high contrast; lite and kids go without the scan lines, and
   the one moving part (the radar ping) stays still in calm, lite and kids mode and for reduced motion. */
:where(html:not(.a11y-contrast)):root[data-theme="dark"] {
  --holo: rgb(125 249 255); --holo-line: rgb(125 249 255 / .34); --holo-dim: rgb(125 249 255 / .12);
  --hud-scan: repeating-linear-gradient(0deg, rgb(125 249 255 / .045) 0 1px, transparent 1px 4px);
}
:where(html.pref-lite, html.kids):root[data-theme="dark"] { --hud-scan: none; }
/* the console line under the top bar */
:where(html:not(.a11y-contrast)):root[data-theme="dark"].in-lesson .lesson-top::before {
  border-bottom-color: var(--holo-line); box-shadow: 0 1px 16px -8px var(--holo);
}
:where(html:not(.a11y-contrast)):root[data-theme="dark"] .lesson-top .ex-count {
  font-family: var(--font-target); font-weight: 700; letter-spacing: .1em; color: var(--holo);
}
/* shield progress: the bar is cut into short cells (a mask, so the fill and its glow stay one element) */
:where(html:not(.a11y-contrast)):root[data-theme="dark"] .lesson-top .progress {
  height: 10px; border-radius: 3px; background: var(--holo-dim);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 19px, transparent 19px 23px);
  mask: repeating-linear-gradient(90deg, #000 0 19px, transparent 19px 23px);
}
:where(html:not(.a11y-contrast)):root[data-theme="dark"] .lesson > .lesson-top .progress > span { border-radius: 0; }
/* the question sits in a HUD frame: four corner brackets drawn as background layers (no pseudo-elements, so nothing
   the question card already uses is taken), over faint scan lines and the aurora from the premium finish */
:where(html:not(.a11y-contrast)):root[data-theme="dark"] .lesson .prompt {
  --b: color-mix(in srgb, var(--holo) 75%, transparent);
  border-color: color-mix(in srgb, var(--holo) 30%, var(--hairline));
  background:
    linear-gradient(var(--b), var(--b)) left 12px top 12px / 20px 2px no-repeat,
    linear-gradient(var(--b), var(--b)) left 12px top 12px / 2px 20px no-repeat,
    linear-gradient(var(--b), var(--b)) right 12px top 12px / 20px 2px no-repeat,
    linear-gradient(var(--b), var(--b)) right 12px top 12px / 2px 20px no-repeat,
    linear-gradient(var(--b), var(--b)) left 12px bottom 12px / 20px 2px no-repeat,
    linear-gradient(var(--b), var(--b)) left 12px bottom 12px / 2px 20px no-repeat,
    linear-gradient(var(--b), var(--b)) right 12px bottom 12px / 20px 2px no-repeat,
    linear-gradient(var(--b), var(--b)) right 12px bottom 12px / 2px 20px no-repeat,
    var(--hud-scan),
    radial-gradient(120% 90% at 50% -10%, color-mix(in srgb, var(--lv, var(--accent)) 20%, transparent), transparent 68%),
    radial-gradient(90% 70% at 50% 115%, rgb(34 211 238 / .14), transparent 70%),
    radial-gradient(60% 70% at 100% 0%, rgb(232 121 249 / .14), transparent 70%),
    linear-gradient(160deg, rgb(255 255 255 / .07), rgb(255 255 255 / .02) 60%), var(--surface);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .1), inset 0 0 34px rgb(34 211 238 / .08), 0 18px 40px -20px rgb(0 0 0 / .9), 0 0 48px -22px var(--holo);
}
/* hologram answer tiles: a cyan-to-pink tint (the nebula colours of the crew intro) and a cyan rim; the key cap reads like a HUD label */
:where(html:not(.a11y-contrast)):root[data-theme="dark"] .lesson .options .opt:not(.right, .wrong, .dunno) {
  background: linear-gradient(160deg, rgb(125 249 255 / .1), rgb(232 121 249 / .08) 62%), var(--surface);
  border-color: var(--holo-line); box-shadow: inset 0 1px 0 rgb(255 255 255 / .08), 0 6px 18px -10px rgb(0 0 0 / .9);
}
:where(html:not(.a11y-contrast)):root[data-theme="dark"] .lesson .options .opt:not(.right, .wrong, .dunno):is(:active, :focus-visible):not(:disabled) {
  border-color: var(--holo); box-shadow: 0 0 0 1px var(--holo), 0 0 26px -6px var(--holo);
}
@media (hover: hover) and (pointer: fine) {
  :where(html:not(.a11y-contrast)):root[data-theme="dark"] .lesson .options .opt:not(.right, .wrong, .dunno):hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--holo) 70%, transparent); box-shadow: 0 0 24px -10px var(--holo);
  }
  :where(html:not(.a11y-contrast)):root[data-theme="dark"] .lesson .opt-k {
    color: var(--holo); border-color: var(--holo-line); font-family: var(--font-target); letter-spacing: .08em;
  }
}
/* the big sound button: a cyan core inside two radar rings */
:where(html:not(.a11y-contrast)):root[data-theme="dark"] .lesson .big-play {
  position: relative; color: var(--accent-ink);
  background: radial-gradient(circle at 34% 28%, rgb(224 253 255), var(--accent) 58%, rgb(14 116 144));
  box-shadow: 0 0 0 10px rgb(34 211 238 / .1), 0 0 0 11px rgb(125 249 255 / .22), 0 0 0 24px rgb(34 211 238 / .05),
    0 0 0 25px rgb(125 249 255 / .12), 0 0 36px rgb(34 211 238 / .6);
}
:where(html:not(.a11y-contrast)):root[data-theme="dark"] .lesson .play-box { padding-block: 34px 22px; gap: 34px; } /* room for the rings */
/* a radar ping: three slow pulses when the button appears, then still (transform and opacity only) */
@keyframes sc-ping { from { opacity: .7; transform: scale(1); } to { opacity: 0; transform: scale(1.9); } }
@media (prefers-reduced-motion: no-preference) {
  :where(html:not(.a11y-contrast, .pref-calm, .pref-lite, .kids)):root[data-theme="dark"] .lesson .big-play::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
    border: 2px solid var(--holo); animation: sc-ping 2.2s var(--ease) .4s 3 both;
  }
}

/* Space cats, part 3: the answer sheet (docs/plan/2026-10-12-space-sheet.md). A right answer opens a gold sheet over a
   pink nebula, with the crew from the intro (Mila and Polly in their space suits) cheering at the end of its head row; a
   miss opens a warm amber sheet, so a mistake never looks like an alarm. Night theme only, no new motion. The #feedback
   selectors match the phone sheet in css/ds/lesson.css, which sets a solid base with an id selector. */
:where(html:not(.a11y-contrast)):root[data-theme="dark"] .lesson > #feedback.feedback.fb2:not(.bad) {
  border-color: rgb(250 204 21 / .5);
  background:
    radial-gradient(120% 90% at 50% 0%, rgb(250 204 21 / .17), transparent 60%),
    radial-gradient(80% 100% at 100% 100%, rgb(232 121 249 / .16), transparent 70%),
    linear-gradient(rgb(11 13 34 / .96), rgb(11 13 34 / .96)), var(--bg);
  box-shadow: 0 -18px 50px -24px rgb(250 204 21 / .6), inset 0 1px 0 rgb(253 230 138 / .25);
}
:where(html:not(.a11y-contrast)):root[data-theme="dark"] .lesson > #feedback.feedback.fb2.bad {
  border-color: rgb(251 146 60 / .5);
  background:
    radial-gradient(120% 90% at 50% 0%, rgb(251 146 60 / .15), transparent 60%),
    linear-gradient(rgb(22 14 16 / .96), rgb(22 14 16 / .96)), var(--bg);
  box-shadow: 0 -18px 46px -26px rgb(251 146 60 / .55);
}
:where(html:not(.a11y-contrast)):root[data-theme="dark"] .lesson > #feedback.fb2 .fb-head { background: none; border-bottom-color: rgb(253 230 138 / .16); }
:where(html:not(.a11y-contrast)):root[data-theme="dark"] .lesson > #feedback.fb2.bad .fb-head { border-bottom-color: rgb(251 146 60 / .18); }
/* the praise in gold running into pink, the "why" line in amber (both light enough for 4.5:1 on the dark sheet) */
:where(html:not(.a11y-contrast)):root[data-theme="dark"] .lesson > #feedback.fb2:not(.bad) .fb-title strong {
  background: linear-gradient(100deg, rgb(254 243 199) 8%, rgb(250 204 21) 46%, rgb(240 171 252) 80%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
:where(html:not(.a11y-contrast)):root[data-theme="dark"] .lesson > #feedback.fb2.bad .fb-title strong { color: rgb(253 186 116); }
:where(html:not(.a11y-contrast)):root[data-theme="dark"] .lesson > #feedback.fb2 .fb-icon { background: rgb(250 204 21); box-shadow: 0 0 18px -4px rgb(250 204 21 / .8); }
:where(html:not(.a11y-contrast)):root[data-theme="dark"] .lesson > #feedback.fb2 .fb-icon.x { background: rgb(251 146 60); box-shadow: 0 0 16px -4px rgb(251 146 60 / .7); }
/* the crew: two round portraits drawn from the intro's photos (a mask cuts the two circles, the rims are gradient rings
   on top), pushed to the end of the head row; decoration only, so no element and no text */
:where(html:not(.a11y-contrast)):root[data-theme="dark"] .lesson > #feedback.fb2:not(.bad) .fb-head::after {
  content: ""; flex: none; width: 84px; height: 46px; margin-inline-start: auto;
  background:
    radial-gradient(circle 23px at 23px 50%, transparent 21px, rgb(240 171 252) 21.5px 23px, transparent 23.5px),
    radial-gradient(circle 23px at 61px 50%, transparent 21px, rgb(250 204 21) 21.5px 23px, transparent 23.5px),
    url("../../media/brand/pilots/mila-pilot-v2.webp") 0 -4px / 46px auto no-repeat,
    url("../../media/brand/pilots/polly-pilot-v1.webp") 38px -4px / 46px auto no-repeat;
  -webkit-mask: radial-gradient(circle 23px at 23px 50%, #000 22.5px, transparent 23px), radial-gradient(circle 23px at 61px 50%, #000 22.5px, transparent 23px);
  mask: radial-gradient(circle 23px at 23px 50%, #000 22.5px, transparent 23px), radial-gradient(circle 23px at 61px 50%, #000 22.5px, transparent 23px);
}

/* Kids look, part 1 (docs/plan/2026-10-20-kids-look.md). html.kids only (age up to 14): a child's finger needs 44 px,
   young readers need the small lines a little bigger, and colour should feel friendly, never loud. Hiding things for
   kids lives in css/family.css (kids room); this section only changes sizes and colour. */
html.kids :is(.account-btn, .pet-tool, .st-lib select, .ls-box select) { min-height: 44px; }
html.kids .nv-ic { width: 44px; height: 44px; }
html.kids .top .account-btn { min-height: 44px; } /* the phone header sets 36 px with a stronger selector */
html.kids :is(.link-btn.small, .pet-link, .foot-links a) { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
html.kids :is(.cando, .goal-pick, .st-lib details, .foot > details) > summary { min-height: 44px; display: flex; align-items: center; gap: .4em; }
html.kids .home .home-more > summary { min-height: 44px; }
/* Polly's close button stays small to look at; an invisible ring makes it 44 px to tap */
html.kids .buddy-x::before { content: ""; position: absolute; inset: -10px; border-radius: 50%; }
html.kids .buddy.off .buddy-x { position: relative; } /* static there; relative keeps the ring on the button */
/* the cartoon club's lesson bar (css/toons.css): its close and subtitles buttons were 40 and 37 px; same look, 44 px */
:is(html.kids, html.age-unknown) .tn-bar .tn-x { width: 44px; height: 44px; }
:is(html.kids, html.age-unknown) .tn-bar .tn-sub-t { min-height: 44px; }
/* The club is a night-sky world in both themes. In the light theme the shared white card surface (css/ui-kit.css) won over
   the club's own card colour, so its cards ("More to practise", words to check, the episode end) showed the club's
   white text on white, 1.07 : 1. They keep the club's dark card. */
:where(html:not(.a11y-contrast)[data-theme="light"]) :is(.tn-map, .tn-play) .ds-card,
:where(html:not(.a11y-contrast)[data-theme="light"]) .ds-card.tn-end { background: var(--tn-card); color: var(--tn-ink); }
:where(html:not(.a11y-contrast)[data-theme="light"]) :is(:is(.tn-map, .tn-play) .ds-card, .ds-card.tn-end) .muted { color: var(--tn-mute); }
/* and the light theme's dark-ink ghost buttons ("More to practise", "Again", "Back to the map") turn light on that sky */
:where(html:not(.a11y-contrast)[data-theme="light"]) :is(.tn-map, .tn-play, .tn-end) .btn.ghost {
  color: var(--tn-ink); background: transparent; border-color: color-mix(in srgb, var(--tn-mute) 45%, transparent); }
/* An episode (css/toons.css .tn-play) has no sky of its own: at night it sits on the dark page, but in the light theme its
   white words ("Words from this episode", the word list, "Tap a green word") sat on the pale page photo. It gets the
   map's sky, and its grey lines (here and under the kids home name form) the club's light grey. */
:where(html:not(.a11y-contrast)[data-theme="light"]) .tn-play {
  background: radial-gradient(120% 90% at 80% 0, #26358a 0, var(--tn-bg) 60%); border-radius: 22px; padding: 12px; }
:where(html:not(.a11y-contrast)[data-theme="light"]) :is(.tn-play, .tn-banner) .muted { color: var(--tn-mute); }
html.kids :is(.muted.small, .eyebrow, .nv-meta, .stat-label, .foot-note, .polly-name, .ss-wd) { font-size: max(.85rem, 13.5px); }
/* the bottom bar: bigger labels, and every icon in its section's own colour (the open one keeps the accent) */
@media (max-width: 760px) {
  html.kids .dock-i { font-size: .8rem; }
  html.kids .dock-i:not(.on)::before { background: var(--t); }
  :root[data-theme="dark"].kids .dock-i:not(.on)::before { background: color-mix(in srgb, var(--t) 62%, #fff); }
}
/* cards: rounder, with a soft coloured top edge taking turns cyan, pink and lime down the page */
html.kids :is(.ds-card, .ds-tile) { --kid-edge: rgb(34 211 238); }
html.kids :is(.ds-card, .ds-tile):nth-child(3n+2) { --kid-edge: rgb(232 121 249); }
html.kids :is(.ds-card, .ds-tile):nth-child(3n) { --kid-edge: rgb(163 230 53); }
html.kids:not(.a11y-contrast) :is(.ds-card, .ds-tile) {
  border-radius: var(--r-2xl); box-shadow: inset 0 3px 0 -1px color-mix(in srgb, var(--kid-edge) 70%, transparent), var(--e2, var(--shadow)); }

/* Toasts on phones (manager, 2026-10-20): a toast at the bottom sat over the page's main button for its 2.6 s (the German
   age-gate note covered "sign in" on #plans), and in a lesson over the answer keys. On phones it drops in under the header
   instead, where pages keep their titles. Taps pass through either way (#toasts has pointer-events: none). The lesson's
   finish screen keeps its own top offsets (css/ds/lesson.css, stronger selectors). */
@media (max-width: 760px) {
  html:not(.in-lesson) body > #toasts, html.in-lesson #toasts { top: calc(72px + env(safe-area-inset-top, 0px)); bottom: auto; }
}

/* ---------- Speed on phones (2026-10-21) ----------
   Every glass card blurred whatever was behind it. Over the plain sky that blur is invisible (the sky is soft colour
   fields), but over the moving sea on Polly's page and the video scenes the phone redid it for every card on every frame.
   On phones the cards keep their glass colour and edge without the blur; the top bar and the tab bar keep theirs (two
   elements). Devices with 2 GB or less already get pref-lite, which drops all blur (css/ui-kit.css).
   The turning rainbow edge on the map's "next lesson" button repaints the whole button each frame (an animated
   gradient angle, not a move), so on phones it turns three times and then rests on its colours. */
@media (max-width: 760px) {
  :where(html:not(.a11y-contrast)):root[data-theme="dark"] :is(.panel, .ds-card, .ds-tile, .game-card), .nv-next {
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  html:not(.pref-calm):not(.pref-easy) .nv-next::after, html:not(.pref-calm):not(.pref-easy) .nv-tp.is-now .nv-hx::before { animation-iteration-count: 3; }
}

/* ---------- The English path page (#path, js/path-view.js, css/path.css), Aurora Glass (2026-10-31) ----------
   One lime button per screen: the "next stage" card at the top. The stage cards below keep their buttons as frosted
   glass, so seven lime buttons don't compete. Each stage card carries its state as a thin line on its starting edge and
   a coloured label; the glass label style above would otherwise wash out path.css's colours. Night look only; the day
   look and high contrast keep path.css as it is. */
:where(html:not(.a11y-contrast)):root[data-theme="dark"] .pv-hero {
  background: radial-gradient(120% 90% at 100% 0, rgb(34 211 238 / .16), transparent 60%),
    radial-gradient(90% 80% at 0 100%, rgb(232 121 249 / .12), transparent 60%), var(--ag-sheen), var(--surface);
  border-color: var(--ag-edge-strong); box-shadow: var(--ag-spec), var(--ag-shadow);
}
:where(html:not(.a11y-contrast)):root[data-theme="dark"] .pv-hero .eyebrow {
  font: 700 var(--fs-h3, 1.25rem)/1.25 var(--font-ui); letter-spacing: -.005em; text-transform: none; color: var(--ink);
}
:where(html:not(.a11y-contrast)):root[data-theme="dark"] .pv-hero .ds-progress { height: 10px; background: rgb(255 255 255 / .12); box-shadow: inset 0 1px 2px rgb(0 0 0 / .35); }
:where(html:not(.a11y-contrast)):root[data-theme="dark"] .pv-hero .ds-progress > span { background: linear-gradient(90deg, var(--ag-cy), var(--ag-lime)); color: var(--ag-cy); }
html[dir="rtl"]:where(:not(.a11y-contrast))[data-theme="dark"] .pv-hero .ds-progress > span { background: linear-gradient(270deg, var(--ag-cy), var(--ag-lime)); }
:where(html:not(.a11y-contrast)):root[data-theme="dark"] .pv-kpis .ds-kpi {
  background: var(--ag-sheen), var(--ag-tint); border: 1px solid var(--ag-edge); box-shadow: var(--ag-spec);
}
:where(html:not(.a11y-contrast)):root[data-theme="dark"] .pv-stage { position: relative; overflow: hidden; }
:where(html:not(.a11y-contrast)):root[data-theme="dark"] .pv-stage::before {
  content: ''; position: absolute; inset-block: 14px; inset-inline-start: 0; inline-size: 3px; border-start-end-radius: 3px; border-end-end-radius: 3px;
  background: var(--pv-c, transparent); box-shadow: 0 0 12px var(--pv-c, transparent);
}
:where(html:not(.a11y-contrast)):root[data-theme="dark"] .pv-stage[data-state="learning"] { --pv-c: var(--ag-cy); }
:where(html:not(.a11y-contrast)):root[data-theme="dark"] .pv-stage:is([data-state="done"], [data-state="solid"]) { --pv-c: var(--ok); }
:where(html:not(.a11y-contrast)):root[data-theme="dark"] .pv-stage[data-state="fading"] { --pv-c: var(--warn); }
:where(html:not(.a11y-contrast)):root[data-theme="dark"] .pv-stage:is([data-state="learning"], [data-state="done"], [data-state="solid"], [data-state="fading"]) .pv-pill {
  background-color: color-mix(in srgb, var(--pv-c) 16%, rgb(14 22 46 / .7)); color: var(--pv-c); border-color: color-mix(in srgb, var(--pv-c) 45%, transparent);
}
:where(html:not(.a11y-contrast)):root[data-theme="dark"] .pv-stage .btn.primary {
  background: rgb(255 255 255 / .1); color: var(--ink); font-weight: 600; border: 1px solid var(--ag-edge-strong);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .28);
}
:where(html:not(.a11y-contrast)):root[data-theme="dark"] .pv-stage .btn.primary:hover:not(:disabled) { background: rgb(255 255 255 / .16); filter: none; }
:where(html:not(.a11y-contrast)):root[data-theme="dark"] .pv-stage .btn.primary:active:not(:disabled) { transform: none; box-shadow: inset 0 1px 0 rgb(255 255 255 / .2); }
:where(html:not(.a11y-contrast)):root[data-theme="dark"] .pv-stage .btn.primary:focus-visible { box-shadow: var(--ring); }
/* the six levels in one row on a phone, rather than five and a lonely C1 */
@media (max-width: 760px) {
  .pv-levels { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .pv-levels .chip { min-inline-size: 0; padding-inline: 0; justify-content: center; }
}

/* ---------- Reply drills (#replies, js/reply-drills.js, css/reply-drills.css), Aurora Glass (2026-11-01) ----------
   The heard sentence sits on a glass quote with a cyan edge; the three replies are the lesson's hologram answer tiles,
   read from the start of the line in normal weight (they are sentences, not buttons). Once answered the tiles are
   disabled, and the shared "disabled" fade made the right reply the faintest text on the card: the answered ones keep
   full strength and glow green or amber, and only the replies nobody picked step back. */
:where(html:not(.a11y-contrast)) .rd-opt[data-state] .rd-pick:disabled { opacity: 1; filter: none; }
:where(html:not(.a11y-contrast)) .rd-opt:not([data-state]) .rd-pick:disabled { opacity: .55; }
:where(html:not(.a11y-contrast)):root[data-theme="dark"] .rd-line:not(.rd-card > .rd-line:first-child) {
  padding: var(--sp-3) var(--sp-4); inline-size: 100%; box-sizing: border-box; border-radius: var(--r);
  background: var(--ag-sheen), rgb(14 22 46 / .55); border: 1px solid var(--ag-edge); border-inline-start: 3px solid var(--ag-cy);
  box-shadow: var(--ag-spec), -4px 0 18px -10px var(--ag-cy);
}
:where(html:not(.a11y-contrast)):root[data-theme="dark"] .rd-pick {
  display: block; text-align: start; font-weight: 500; line-height: 1.4; padding-block: .7em; color: var(--ink); /* block, so an English reply starts on the left on a Hebrew or Arabic page too (plaintext direction) */
  background: linear-gradient(160deg, rgb(125 249 255 / .1), rgb(232 121 249 / .08) 62%), var(--surface);
  border: 1px solid color-mix(in srgb, var(--ag-cy) 35%, transparent); box-shadow: inset 0 1px 0 rgb(255 255 255 / .1), 0 6px 18px -10px rgb(0 0 0 / .9);
}
:where(html:not(.a11y-contrast)):root[data-theme="dark"] .rd-pick:is(:active, :focus-visible):not(:disabled) { border-color: var(--ag-cy); box-shadow: 0 0 0 1px var(--ag-cy), 0 0 24px -6px var(--ag-cy); }
@media (hover: hover) and (pointer: fine) {
  :where(html:not(.a11y-contrast)):root[data-theme="dark"] .rd-pick:hover:not(:disabled) { border-color: color-mix(in srgb, var(--ag-cy) 70%, transparent); box-shadow: 0 0 22px -10px var(--ag-cy); }
}
:where(html:not(.a11y-contrast)):root[data-theme="dark"] .rd-opt[data-state="right"] .rd-pick {
  background: color-mix(in srgb, var(--ok) 16%, rgb(14 22 46 / .8)); color: #fff; border-color: var(--ok); box-shadow: 0 0 0 1px var(--ok), 0 0 26px -8px var(--ok);
}
:where(html:not(.a11y-contrast)):root[data-theme="dark"] .rd-opt[data-state="wrong"] .rd-pick {
  background: color-mix(in srgb, var(--warn) 14%, rgb(14 22 46 / .8)); color: #fff; border-color: var(--warn); box-shadow: 0 0 0 1px var(--warn), 0 0 22px -8px var(--warn);
}
:where(html:not(.a11y-contrast)):root[data-theme="dark"] .rd-why:not(:empty) {
  inline-size: 100%; box-sizing: border-box; padding: var(--sp-3) var(--sp-4); border-radius: var(--r); background: rgb(255 255 255 / .06); border: 1px solid var(--ag-edge);
}
:where(html:not(.a11y-contrast)):root[data-theme="dark"] .rd-why p { margin: 0; }
:where(html:not(.a11y-contrast)):root[data-theme="dark"] .rd-why p + p { margin-block-start: var(--sp-2); }

/* Keyboard focus on glass (design backlog D25): one lime ring on every key, link and toggle at night. The old focus
   look was a 3px accent glow at 28-40% strength, too faint on the aurora, and several glass rules replaced it with
   their own shadow, so ghost buttons showed no focus at all. An outline is drawn outside the box and no shadow rule
   can cover it. Text fields keep their own bright border and glow. */
:where(html:not(.a11y-contrast)):root[data-theme="dark"] :is(a[href], button, summary, select, [role="button"], [role="tab"], [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid var(--ag-lime); outline-offset: 2px;
}