/* dorescore.com home: a dive. The sea opens through a brass porthole onto the product;
   dark stages hold still while the product changes, and paper sheets slide over them.
   index.js moves everything that follows the scroll; this file is how it all looks at rest. */
:root {
  --sea-0: #0a101f; --sea-1: #101830; --sea-2: #172241; --sea-3: #233259;
  --paper: #f6efdf; --paper-2: #ebe2cc; --ink: #1b1712; --ink-soft: #544a3c;
  --cream: #f6efdf; --cream-2: rgb(246 239 223 / .76); --cream-3: rgb(246 239 223 / .54);
  /* The accent (appearance.css changes --gold and --gold-ink) and its bright form for dark water. */
  --gold: #d0a23c; --gold-ink: #7a5a12; --hi: #ecc673;
  /* Brass and pen strokes stay gold whatever the accent. */
  --brand-gold: #d0a23c; --brass: #c9a04a; --brass-hi: #f3dc9b; --brass-lo: #7d5f1e;
  --ui-bg: #141d2c; --ui-card: #232c3b; --ui-line: rgb(255 255 255 / .1); --ui-text: #f1ecdf; --ui-dim: #a7afbf; --ui-green: #4a9d66; --ui-accent: #e2b54a;
  --bs-text: #202122; --bs-dim: #6e7477; --bs-line: #d3d9e3; --bs-blue: #006fbf;
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --body: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --gl: max(16px, env(safe-area-inset-left, 0px)); --gr: max(16px, env(safe-area-inset-right, 0px));
  --bar-h: 52px; --r-sheet: clamp(22px, 3.4vw, 46px); --edge: max(0px, 4vw - 16px); --maxw: clamp(1180px, 68vw, 1400px);
  --ease: cubic-bezier(.16, 1, .3, 1);
  color-scheme: dark;
}
@supports (color: color-mix(in oklab, red, blue)) {
  :root[data-accent]:not([data-accent="gold"]) { --hi: color-mix(in oklab, var(--gold) 72%, #fff); }
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: #36445f var(--sea-0); scrollbar-gutter: stable; }
/* Held still for the few seconds the hero's themes play (index.js, hold). The gutter above keeps the page's width. */
html.is-held { overflow-y: hidden; }
html, body { overflow-x: clip; }
body { margin: 0; background: var(--sea-0); color: var(--cream); font: 400 17px/1.5 var(--body); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, figure, dl, dd { margin: 0; }
img { display: block; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
kbd { font: inherit; }
::selection { background: var(--gold); color: var(--ink); }
:focus-visible { outline: 2px solid var(--hi); outline-offset: 3px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; z-index: 100; padding: 10px 14px; border-radius: 8px; background: var(--paper); color: var(--ink); }
.sprite { position: absolute; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wrap { padding-left: var(--gl); padding-right: var(--gr); }
.in { width: min(100% - 2 * var(--edge), var(--maxw)); margin-inline: auto; }
.h2 { font: 700 clamp(31px, min(4.7vw, 8.6svh), 68px)/1.02 var(--display); letter-spacing: -.022em; text-wrap: balance; }
.lede { font-size: clamp(16px, min(1.42vw, 2.9svh), 20px); line-height: 1.5; text-wrap: pretty; }
.stars { width: 82px; height: 15px; fill: var(--brand-gold); flex: none; }

/* Things further down rise into place the first time they're seen. */
.js .rv { opacity: 0; transform: translateY(24px); transition: opacity .7s ease var(--rd, 0s), transform 1s var(--ease) var(--rd, 0s); }
.js .rv.seen { opacity: 1; transform: none; }

/* ── The bar: clear over the sea, frosted once the page moves ── */
.bar.top { position: fixed; z-index: 60; inset: 0 0 auto; padding: env(safe-area-inset-top, 0px) var(--gr) 0 var(--gl); }
.bar::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; background: rgb(10 16 31 / .86); -webkit-backdrop-filter: saturate(1.6) blur(20px); backdrop-filter: saturate(1.6) blur(20px); box-shadow: inset 0 -1px 0 rgb(255 255 255 / .08); transition: opacity .35s ease; }
.bar.is-solid::before { opacity: 1; }
.bar-in { height: var(--bar-h); width: min(100% - 2 * var(--edge), var(--maxw)); margin: 0 auto; display: flex; align-items: center; gap: clamp(14px, 2.4vw, 30px); }
.wordmark { display: inline-flex; align-items: center; gap: 9px; font: 700 20px/1 var(--display); letter-spacing: -.01em; text-decoration: none; color: var(--cream); }
.wordmark svg { width: 22px; height: 22px; color: var(--brand-gold); flex: none; }
.bar-nav { display: flex; gap: clamp(14px, 2.2vw, 28px); margin-left: auto; }
.bar-nav a { padding: 6px 1px; font-size: 13.5px; font-weight: 500; color: var(--cream-2); text-decoration: none; transition: color .2s ease; }
.bar-nav a:hover { color: var(--cream); }
.bar .nav-right { display: flex; align-items: center; }
.bar .appear { margin-right: 10px; }
.bar .appear-btn { width: 32px; height: 32px; background: rgb(246 239 223 / .1); }
.bar .appear-btn svg { width: 16px; height: 16px; }
/* How far down the page you are. */
.bar-prog { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--hi); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; opacity: 0; transition: opacity .35s ease; }
.bar.is-solid .bar-prog { opacity: .85; }

.pill { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 24px; border: 0; border-radius: 999px; background: var(--gold); color: var(--ink); font: 700 16.5px/1 var(--body); text-decoration: none; white-space: nowrap; cursor: pointer; box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), 0 10px 30px rgb(3 6 14 / .35); transition: opacity .3s ease, transform .3s var(--ease), filter .2s ease; }
.pill:hover { filter: brightness(1.08); }
.pill:active { transform: scale(.97); transition-duration: .06s; }
.pill-sm { min-height: 34px; padding: 0 16px; font-size: 13.5px; box-shadow: none; }

/* ── The install button: the browser you're in, and a ▾ for the others ── */
.get { position: relative; display: inline-flex; align-items: stretch; min-height: 58px; border-radius: 999px; background: var(--gold); color: var(--ink); text-align: left; box-shadow: inset 0 1px 0 rgb(255 255 255 / .42), inset 0 -1px 0 rgb(0 0 0 / .14), 0 14px 34px rgb(3 6 14 / .42); transition: transform .3s var(--ease), filter .2s ease; }
.get-main { position: relative; display: flex; align-items: center; gap: 12px; padding: 7px 26px 7px 9px; border-radius: 999px; color: inherit; text-decoration: none; overflow: hidden; }
.get[data-split] .get-main { padding-right: 16px; border-radius: 999px 0 0 999px; }
.get-main::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgb(255 250 230 / .5) 50%, transparent 65%); transform: translateX(-120%); pointer-events: none; }
.get-logos { display: inline-flex; flex: none; }
.get-logos > * { position: relative; width: 40px; height: 40px; padding: 6px; object-fit: contain; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgb(60 40 4 / .3); transition: margin .35s var(--ease), transform .35s var(--ease); }
.get-logos > * + * { margin-left: -27px; }
.get-logos > :nth-child(1) { z-index: 3; } .get-logos > :nth-child(2) { z-index: 2; transform: scale(.84); } .get-logos > :nth-child(3) { z-index: 1; transform: scale(.7); }
.get-text { display: grid; gap: 2px; }
.get-text small { font: 600 12px/1.15 var(--body); opacity: .78; }
.get-text strong { font: 800 19px/1.1 var(--body); letter-spacing: -.01em; white-space: nowrap; }
.get-more { flex: none; width: 46px; display: grid; place-items: center; padding: 0 4px 0 0; border: 0; border-radius: 0 999px 999px 0; background: transparent; color: inherit; cursor: pointer; box-shadow: inset 1px 0 0 rgb(0 0 0 / .16); transition: background-color .16s ease; }
.get-more svg { width: 18px; height: 18px; transition: rotate .35s var(--ease); }
.get-more[aria-expanded="true"] svg { rotate: 180deg; }
@media (hover: hover) {
  .get:has(.get-main:hover) { transform: translateY(-2px); filter: brightness(1.06); }
  .get-main:hover::after { transform: translateX(120%); transition: transform .8s var(--ease); }
  .get-main:hover .get-logos > * + * { margin-left: -20px; }
  .get-more:hover { background: rgb(255 255 255 / .22); }
}
.get:has(.get-main:active), .get:has(.get-more:active) { transform: scale(.975); transition-duration: .06s; }
.get:has(.get-main:focus-visible), .get:has(.get-more:focus-visible) { outline: 2px solid var(--cream); outline-offset: 3px; }
.get :focus-visible { outline: none; }
.get-menu { position: absolute; z-index: 40; top: calc(100% + 12px); left: 50%; translate: -50% 0; width: max-content; min-width: 270px; max-width: min(330px, 86vw); padding: 6px; border-radius: 16px; background: var(--paper); color: var(--ink); text-align: left; box-shadow: 0 0 0 1px rgb(27 23 18 / .08), 0 24px 60px rgb(3 6 14 / .55); transform-origin: 50% -8px; overflow-y: auto; overscroll-behavior: contain; }
.get-menu[hidden] { display: none; }
.get[data-drop="up"] .get-menu { top: auto; bottom: calc(100% + 12px); transform-origin: 50% calc(100% + 8px); }
@media (prefers-reduced-motion: no-preference) {
  .get-menu:not([hidden]) { animation: menu-in .24s var(--ease); }
  .get[data-drop="up"] .get-menu:not([hidden]) { animation-name: menu-up; }
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-8px) scale(.95); } }
@keyframes menu-up { from { opacity: 0; transform: translateY(8px) scale(.95); } }
.get-item { display: grid; grid-template-columns: 28px 1fr; column-gap: 12px; align-items: center; padding: 8px 10px; border-radius: 10px; color: var(--ink); text-decoration: none; }
.get-item img, .get-item svg { grid-row: span 2; width: 28px; height: 28px; object-fit: contain; }
.get-item-plain svg { width: 24px; height: 24px; margin: 2px; color: var(--ink-soft); }
.get-item span { font: 700 15px/1.2 var(--body); }
.get-item small { font-size: 12.5px; line-height: 1.3; color: var(--ink-soft); }
.get-item:hover, .get-item:focus-visible { background: rgb(208 162 60 / .22); outline: none; }
.get-item[data-yours] span::after { content: "your browser"; margin-left: 8px; padding: 2px 6px; border-radius: 4px; background: var(--ink); color: var(--paper); font: 700 10.5px/1 var(--body); letter-spacing: .04em; vertical-align: 2px; }
.get-rule { display: block; height: 1px; margin: 6px 10px; background: rgb(84 74 60 / .18); }
.proof { display: grid; gap: 3px; justify-items: start; font-size: 13.5px; font-weight: 600; color: var(--cream-2); text-align: left; }
.proof a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.proof a:hover { color: var(--cream); }
.proof-more { font-size: 12.5px; font-weight: 500; color: var(--cream-3); }

/* ── Pinned stages ── */
.pin { position: relative; }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; overflow: clip; }
/* A stage dims a little as the next sheet slides over it. */
.stage::after { content: ""; position: absolute; inset: 0; z-index: 30; background: #04070e; opacity: calc(var(--cover, 0) * .55); pointer-events: none; }

/* ── 1. The sea, and the porthole that opens onto the product ── */
.hero { z-index: 1; height: 350vh; height: 350svh; }
.hero .stage { background: linear-gradient(180deg, var(--sea-3) 0%, var(--sea-2) 44%, var(--sea-1) 100%); }
/* Deeper water, as the window steps back behind the sentence. */
.hero .stage::before { content: ""; position: absolute; inset: 0; background: linear-gradient(var(--sea-1), var(--sea-0)); opacity: var(--deep, 0); }
.rays, .bubs { position: absolute; inset: 0; pointer-events: none; will-change: transform, opacity; }
.rays i { position: absolute; top: -10%; width: 14%; height: 95%; background: linear-gradient(rgb(214 228 255 / .13), rgb(214 228 255 / 0)); transform-origin: top center; -webkit-mask: linear-gradient(90deg, transparent, #000 35%, #000 65%, transparent); mask: linear-gradient(90deg, transparent, #000 35%, #000 65%, transparent); }
.rays i:nth-child(1) { left: 9%; transform: skewX(-14deg); }
.rays i:nth-child(2) { left: 32%; width: 9%; transform: skewX(-8deg); opacity: .7; }
.rays i:nth-child(3) { left: 57%; width: 18%; transform: skewX(6deg); opacity: .8; }
.rays i:nth-child(4) { left: 82%; width: 10%; transform: skewX(12deg); opacity: .6; }
.bubs i { position: absolute; bottom: -30px; left: var(--x); width: var(--s); height: var(--s); border-radius: 50%; border: 1.5px solid rgb(214 228 255 / .3); background: radial-gradient(circle at 30% 28%, rgb(255 255 255 / .34) 0 12%, transparent 16%); }
.hero-copy { position: absolute; z-index: 2; left: 0; right: 0; top: calc(var(--bar-h) + 4px); height: 46svh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 var(--gr) 0 var(--gl); text-align: center; will-change: transform, opacity; }
.hero-copy:has(.get-menu:not([hidden])) { z-index: 8; }
.hero h1 { font: 700 clamp(44px, min(8.4vw, 13.2svh), 124px)/.98 var(--display); letter-spacing: -.028em; text-shadow: 0 4px 30px rgb(4 10 24 / .4); }
/* Each line of the headline rises from behind its own edge; the room below keeps the descenders. */
.hero h1 .ln { display: block; overflow: hidden; overflow: clip; padding-bottom: .16em; margin-bottom: -.16em; }
.hero h1 .ln > span { display: inline-block; }
.hero .lede { max-width: 36ch; margin-top: clamp(10px, 2.3svh, 26px); color: var(--cream-2); }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 22px; margin-top: clamp(12px, 3svh, 30px); }
/* The window and its ring move as one when they step back. */
.win { position: absolute; z-index: 3; inset: 0; pointer-events: none; transform-origin: 50% 46%; will-change: transform, opacity; }
.ap { position: absolute; left: 0; top: 0; will-change: clip-path; }
.ap-zoom { position: absolute; inset: 0; will-change: transform; }
.ap-zoom img { position: absolute; top: 0; left: 0; max-width: none; }
/* The DoreScore home is one layer: its first picture, and over it a picture for each theme the wheel turns to.
   Those wait drawn but unseen, so that none is decoded or painted for the first time as it opens. */
.ap-full { position: absolute; inset: 0; }
.ap-zoom img.look { opacity: .002; will-change: opacity; }
.js .lv-first { opacity: 0; transition: opacity .7s ease; }
.js .lit .lv-first { opacity: 1; }
.wipe { position: absolute; z-index: 5; top: 0; bottom: 0; left: 0; width: 2px; margin-left: -1px; background: var(--brass-hi); box-shadow: 0 0 18px 2px rgb(236 198 115 / .6); opacity: 0; pointer-events: none; }
/* A brass ring with a row of bolts while it's a porthole; a hairline once it's a window.
   --bw is the brass's width, --ra how much of the porthole is left, --sh the window's shadow. */
.ap-ring { --bw: 9px; position: absolute; left: 0; top: 0; border-radius: 50%; pointer-events: none; will-change: transform, width, height;
  box-shadow: 0 0 0 calc(var(--bw) * .24) var(--brass-hi), 0 0 0 calc(var(--bw) * .86) var(--brass), 0 0 0 var(--bw) var(--brass-lo),
    0 0 70px rgb(226 181 74 / calc(.24 * var(--ra, 1))), 0 12px 34px rgb(3 6 14 / calc(.42 * var(--ra, 1))),
    inset 0 0 0 1px rgb(3 6 14 / calc(.55 * var(--ra, 1))), inset 0 14px 34px rgb(3 6 14 / calc(.5 * var(--ra, 1))); }
/* The window's own edge and shadow, as its frame opens around the porthole (--ea, --sh). */
.ap-edge { position: absolute; left: 0; top: 0; pointer-events: none; will-change: transform, width, height; box-shadow: 0 0 0 1px rgb(255 255 255 / calc(.16 * var(--ea, 0))), 0 calc(34px * var(--sh, 0)) calc(90px * var(--sh, 0)) rgb(3 6 14 / calc(.6 * var(--sh, 0))); }
/* Brightspace as it is lies under the DoreScore picture; it's kept out of sight until that picture has arrived. */
.js .ap-zoom:not(.lit) .bs-old { visibility: hidden; }
/* Until that picture of Brightspace arrives (a slow connection), its page color stands in for it. */
.ap-zoom.lit { background: #f4f5f7; }
/* While the film plays the page is held, so there is a way past it: in the window's corner, like a video's. */
.film-skip { position: absolute; z-index: 7; translate: -100% -100%; display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 12px 0 14px; border: 0; border-radius: 999px; background: rgb(8 13 26 / .68); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16), 0 6px 18px rgb(3 6 14 / .3); color: var(--cream); font: 600 12.5px/1 var(--body); letter-spacing: .02em; cursor: pointer; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s ease, visibility 0s .3s, background-color .2s ease; }
.film-skip::before { content: ""; position: absolute; inset: -8px; } /* a finger-sized target */
.film-skip::after { content: ""; width: 5px; height: 5px; border: solid currentColor; border-width: 1.6px 1.6px 0 0; transform: rotate(45deg); }
.film-skip:hover { background: rgb(8 13 26 / .9); }
.is-film .film-skip { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: .6s, .6s, 0s; }
@media (max-height: 420px), (max-width: 759px) { .film-skip { min-height: 24px; padding: 0 9px 0 10px; font-size: 11px; } } /* a small window gets a small button */
.glass { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; opacity: var(--ra, 1); background: radial-gradient(120% 90% at 24% 10%, rgb(255 255 255 / .2), transparent 42%), radial-gradient(90% 70% at 80% 98%, rgb(150 190 255 / .12), transparent 50%); }
.glass::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 34%; background: linear-gradient(100deg, transparent, rgb(255 255 255 / .2), transparent); transform: translateX(-160%) skewX(-18deg); }
.bolts { position: absolute; inset: 0; opacity: var(--bo, 1); }
.bolts i { position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px; border-radius: 50%; background: #6a4f17; box-shadow: inset 0 1px 0 rgb(255 240 200 / .8), 0 0 0 .5px rgb(60 40 5 / .6); transform: rotate(calc(var(--k) * 45deg + 22.5deg)) translateY(calc(var(--d, 200px) / -2 - var(--bw) * .55)); }
.cue { position: absolute; z-index: 4; left: 0; right: 0; bottom: max(10px, 1.6svh); display: grid; justify-items: center; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--cream-3); pointer-events: none; will-change: opacity; }
.cue i { width: 1px; height: 16px; background: linear-gradient(var(--cream-2), transparent); transform-origin: top; }
.hero-ctl { position: absolute; z-index: 5; left: 0; right: 0; top: 80svh; display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 0 var(--gr) 0 var(--gl); pointer-events: none; }
.ctl-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; will-change: transform, opacity; }
.js .ctl-row, .js .ctl-says { opacity: 0; } /* until the script places them */
/* The theme wheel: a small porthole. Its glass shows the theme, and its brass turns a quarter for each one. */
.dial { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 17px 4px 4px; border: 0; border-radius: 999px; background: rgb(255 255 255 / .08); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1); color: var(--cream); font: 600 14.5px/1 var(--body); cursor: pointer; transition: background-color .2s ease, opacity .3s ease, transform .2s var(--ease); }
.dial:hover { background: rgb(255 255 255 / .14); }
.dial:active { transform: scale(.96); }
.dial.is-off { opacity: .5; }
.dial-wheel { position: relative; width: 36px; height: 36px; flex: none; border-radius: 50%; background: linear-gradient(150deg, var(--brass-hi) 6%, var(--brass) 46%, var(--brass-lo) 94%); box-shadow: 0 0 0 .5px rgb(40 26 3 / .8), 0 2px 7px rgb(3 6 14 / .5), inset 0 .5px 0 rgb(255 246 220 / .75), 0 0 calc(16px * var(--g, 0)) calc(1px * var(--g, 0)) rgb(236 198 115 / calc(.6 * var(--g, 0))); } /* --g: it glows as it turns */
.dial-rim { position: absolute; inset: 0; border-radius: 50%; transition: rotate .5s var(--ease); }
.dial-rim i { position: absolute; left: 50%; top: 50%; width: 2.6px; height: 2.6px; margin: -1.3px; border-radius: 50%; background: #5d4513; box-shadow: inset 0 .5px 0 rgb(255 240 200 / .7); transform: rotate(calc(var(--k) * 90deg + 45deg)) translateY(-15.7px); }
@media (hover: hover) { .dial:hover .dial-rim { rotate: 16deg; } }
.dial-glass { position: absolute; inset: 4.5px; border-radius: 50%; overflow: hidden; background: #141c2c; }
.dial-glass i { position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(135deg, var(--bg) 0 50%, var(--side) 50% 100%); }
.dial-glass i + i { clip-path: circle(0); }
.dial-glass i::after { content: ""; position: absolute; right: 4.5px; bottom: 4.5px; width: 6.5px; height: 6.5px; border-radius: 50%; background: var(--acc); }
.dial-glass::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(120% 90% at 26% 10%, rgb(255 255 255 / .3), transparent 46%); box-shadow: inset 0 0 0 .75px rgb(3 6 14 / .7), inset 0 2px 4px rgb(3 6 14 / .5); }
/* A thin ring around the wheel fills while the themes play on their own: a timer for the seconds the page is held. */
.dial-wheel::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; pointer-events: none; background: conic-gradient(var(--hi) calc(var(--pl, 0) * 1turn), rgb(255 255 255 / .16) 0); -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 2px), #000 calc(100% - 1.4px)); mask: radial-gradient(closest-side, transparent calc(100% - 2px), #000 calc(100% - 1.4px)); opacity: 0; transition: opacity .5s ease; }
.dial.is-playing .dial-wheel::after { opacity: 1; }
.dial-name { display: grid; overflow: hidden; overflow: clip; min-width: 4.9em; height: 1.3em; text-align: left; line-height: 1.3; }
.dial-name span { grid-area: 1 / 1; white-space: nowrap; will-change: transform, opacity; }
.dial-name span + span { opacity: 0; }
.seg { position: relative; display: inline-flex; padding: 4px; border-radius: 999px; background: rgb(255 255 255 / .08); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1); }
.seg .thumb { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 999px; background: var(--cream); transition: transform .5s var(--ease), width .5s var(--ease); }
.seg button { position: relative; z-index: 1; min-height: 36px; padding: 0 18px; border: 0; border-radius: 999px; background: none; color: var(--cream-2); font: 600 14.5px/1 var(--body); cursor: pointer; transition: color .25s ease, transform .2s var(--ease); }
.seg button:hover { color: var(--cream); }
.seg button:active { transform: scale(.95); }
.seg button[aria-pressed="true"] { color: var(--ink); }
/* Under the window, one line at a time says what the window is showing. Before the switch and the wheel arrive it
   sits where they will be; then it moves down to make room (the script moves it). Lines already said leave upward,
   and lines to come wait below. */
.ctl-says { display: grid; justify-items: center; will-change: transform, opacity; }
.ctl-say { grid-area: 1 / 1; max-width: 62ch; min-height: 1.45em; font-size: 14.5px; line-height: 1.45; color: var(--cream-2); text-align: center; text-wrap: balance; opacity: 0; transform: translateY(-8px); transition: opacity .4s ease, transform .7s var(--ease); }
.ctl-say.on { opacity: 1; transform: none; }
.ctl-say.on ~ .ctl-say { transform: translateY(8px); }
.ctl-say[data-for="plain"], .ctl-say[data-for="with"] { font-weight: 600; letter-spacing: .01em; }
.ctl-say[data-for="with"] { color: var(--hi); }
.say-text { position: absolute; z-index: 6; left: 50%; top: 50%; width: min(100% - 2 * (var(--gl) + var(--edge)), 1040px); translate: -50% -46%; font: 600 clamp(26px, min(4.3vw, 7.8svh), 62px)/1.13 var(--display); letter-spacing: -.018em; text-wrap: balance; pointer-events: none; }
.js .say-text { opacity: var(--so, 0); }
.say-text em { font-style: normal; }
.say-text .w { display: inline-block; opacity: .15; transform: translateY(.16em); transition: opacity .4s ease, transform .7s var(--ease), color .4s ease; }
.say-text .w.on { opacity: 1; transform: none; }
.say-text .w.g.on { color: var(--hi); }

/* ── 2. Points, then the syllabus, then the grade: one card that changes ── */
.how { z-index: 2; --travel: 200; height: calc((var(--travel) + 200) * 1vh); height: calc((var(--travel) + 200) * 1svh); background: var(--sea-0); }
.how .stage { background: var(--sea-0); }
.glow { position: absolute; left: 66%; top: 52%; width: 92vmin; height: 92vmin; translate: -50% -50%; pointer-events: none; background: radial-gradient(closest-side, rgb(150 180 255 / calc(.1 * (1 - var(--g, 0)))), transparent), radial-gradient(closest-side, rgb(226 181 74 / calc(.17 * var(--g, 0))), transparent); }
.how-grid { position: absolute; inset: var(--bar-h) 0 0; width: min(100% - var(--gl) - var(--gr) - 2 * var(--edge), var(--maxw)); margin: auto; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(20px, 4vw, 64px); align-items: stretch; }
.how-side { position: relative; }
/* Where you are in the three steps. */
.rail { position: absolute; z-index: 2; left: 0; top: clamp(16px, 5svh, 54px); display: flex; align-items: center; gap: clamp(12px, 1.5vw, 22px); padding-bottom: 10px; font-size: 12.5px; font-weight: 600; letter-spacing: .03em; color: var(--cream-3); }
.rail span { display: inline-flex; align-items: center; gap: 7px; transition: color .35s ease; }
.rail b { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1px currentColor; font-size: 11px; font-weight: 700; line-height: 1; transition: background-color .35s ease, color .35s ease, box-shadow .35s ease; }
.rail span.on { color: var(--cream); }
.rail span.on b { background: var(--hi); color: var(--ink); box-shadow: none; }
.rail span.done b { box-shadow: inset 0 0 0 1px var(--hi); color: var(--hi); }
.rail i { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgb(255 255 255 / .14); }
.rail i::after { content: ""; position: absolute; inset: 0; background: var(--hi); transform: scaleX(var(--q, 0)); transform-origin: 0 50%; }
.caps { position: absolute; inset: 0; }
.cap { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); opacity: 0; pointer-events: none; transition: opacity .3s ease, transform .6s var(--ease); }
.cap.before { transform: translateY(calc(-50% - 20px)); }
.cap.after { transform: translateY(calc(-50% + 20px)); }
.cap.on { opacity: 1; pointer-events: auto; }
.cap .lede { max-width: 34ch; margin-top: clamp(10px, 2svh, 20px); color: var(--cream-2); }
/* The grading section of the syllabus, with each line marked as DoreScore reads it. */
.syl { width: min(100%, 370px); margin-top: clamp(14px, 3.2svh, 30px); padding: 13px 18px 11px; border-radius: 3px; background: var(--paper); color: var(--ink); font-size: 14px; box-shadow: inset 0 1px 0 rgb(255 255 255 / .7), 0 18px 40px rgb(3 6 14 / .5); transform: rotate(-1.3deg); transform-origin: 0 0; }
.syl-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 7px; margin-bottom: 3px; border-bottom: 1.5px solid var(--ink); }
.syl-h b { font: 700 19px/1 var(--display); letter-spacing: -.01em; }
.syl-h span { font-size: 11.5px; color: var(--ink-soft); white-space: nowrap; }
.syl-l { position: relative; display: flex; align-items: baseline; gap: 8px; padding: 4px 0; line-height: 1.25; }
.syl-l::before { content: ""; position: absolute; inset: 2px -6px 2px; border-radius: 3px; background: #ffdf6b; opacity: .62; transform: scaleX(var(--hl, 0)); transform-origin: 0 50%; }
.syl-l > * { position: relative; }
.syl-l span { white-space: nowrap; }
.syl-l small { font-size: .82em; color: var(--ink-soft); }
.syl-l i { flex: 1; min-width: 12px; border-bottom: 1.5px dotted rgb(27 23 18 / .35); translate: 0 -3px; }
.syl-l b { font-weight: 700; font-variant-numeric: tabular-nums; }
.gc-wrap { display: grid; place-items: center; container-type: inline-size; }
.gc { --gc-fs: max(8px, min(22px, 3.44cqw, calc((100svh - var(--bar-h) - 64px) / 31.4))); position: relative; width: 29em; height: 25.4em; font-size: var(--gc-fs); line-height: 1.3; border-radius: .4em; overflow: hidden; box-shadow: 0 1.8em 4.4em rgb(3 6 14 / .55), 0 0 0 1px rgb(255 255 255 / .07); transition: border-radius .4s var(--ease); contain: layout; text-align: left; }
.gc.poured { border-radius: 1.1em; }
.gc-a, .gc-b { position: absolute; inset: 0; }
.gc-a { background: #fff; }
.gc-b { background: var(--ui-card); clip-path: inset(0 0 calc((1 - var(--pour, 0)) * 100%) 0); }
.gc-line { position: absolute; z-index: 6; left: 0; right: 0; top: -1px; height: 2px; background: var(--brass-hi); box-shadow: 0 0 14px 2px rgb(236 198 115 / .65); transform: translateY(calc(var(--line-y, 0) * 1em)); opacity: var(--line-o, 0); }
.r { position: absolute; z-index: 1; left: 0; right: 0; top: 0; height: 2.8em; display: flex; align-items: center; gap: .8em; padding: 0 1.5em; font-family: "Lato", var(--body); color: var(--bs-text); will-change: transform, opacity; transition: color .14s linear; }
.r .nm { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--bs-blue); transition: color .14s linear; }
.r .sc { white-space: nowrap; font-variant-numeric: tabular-nums; }
.r::after { content: ""; position: absolute; left: 1.5em; right: 1.5em; bottom: 0; border-bottom: 1px solid var(--bs-line); transition: opacity .14s linear; }
.r.b { font-family: var(--body); color: var(--ui-text); }
.r.b .nm { color: #dfe3ec; }
.r.b::after { opacity: 0; }
.r.it .nm { padding-left: calc(var(--ind, 0) * 1.1em); }
.r.it::before { content: ""; position: absolute; z-index: -1; inset: .22em .7em; border-radius: .6em; background: #313c51; box-shadow: 0 .5em 1.4em rgb(3 6 14 / .5), inset 0 0 0 1px rgb(255 255 255 / .07); opacity: var(--fly, 0); }
.r.it.b .sc { color: var(--ui-dim); }
.r.drop .nm, .r.drop .sc { opacity: calc(1 - var(--st, 0) * .45); }
.r .strike { position: absolute; left: 2.5em; right: 1.5em; top: 50%; height: 1.5px; background: #ec8f7f; transform: scaleX(var(--st, 0)); transform-origin: left; }
.r .tag { padding: .22em .6em; border-radius: 1em; background: rgb(236 143 127 / .16); color: #f0a093; font-size: .72em; font-style: normal; font-weight: 600; opacity: var(--st, 0); position: relative; z-index: 1; }
.r.cat { display: grid; grid-template-columns: minmax(0, 1fr) 3.6em 4.4em; column-gap: .6em; height: 2.5em; }
.r.cat .nm { color: var(--ui-text); font-weight: 650; overflow: visible; }
.r.cat .nm small { margin-left: .5em; font-size: .76em; font-weight: 500; color: var(--ui-dim); opacity: var(--note, 0); }
.r.cat .sh { color: var(--ui-dim); text-align: right; font-size: .92em; font-variant-numeric: tabular-nums; opacity: var(--shv, 1); }
.r.cat .av { text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; opacity: var(--av, 0); transition: color .25s ease; }
.r.cat .av.if { color: var(--ui-accent); font-style: italic; }
.r.cat .bar { position: absolute; left: 1.5em; right: 10.6em; top: 2.5em; height: .28em; border-radius: 1em; background: #333c4b; opacity: var(--bo, 0); }
.r.cat .bar b { display: block; height: 100%; border-radius: inherit; background: var(--ui-green); transform: scaleX(var(--bw, 0)); transform-origin: left; transition: background-color .25s ease; }
.r.cat .bar.if b { background: var(--ui-accent); }
.r.tot .nm { color: var(--bs-text); font-weight: 700; }
.r.tot .sc { color: var(--bs-dim); font-style: italic; }
.r.tot::after { display: none; }
.r.tot .sc { position: relative; }
.pen-o { position: absolute; left: -17%; top: -36%; width: 134%; height: 172%; overflow: visible; pointer-events: none; }
.pen-o path { fill: none; stroke: #d1483c; stroke-width: 1.7; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: var(--pen, 1); }
.hA { position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: 3.6em; padding: .65em 1.5em 0; font-family: "Lato", var(--body); color: var(--bs-text); transition: opacity .16s linear; }
.hA span { display: block; font-size: .78em; color: var(--bs-dim); }
.hA b { display: block; font-size: 1.28em; line-height: 1.25; }
.colA { position: absolute; z-index: 2; left: 0; right: 0; top: 3.6em; height: 2em; display: flex; align-items: center; justify-content: space-between; padding: 0 1.5em; background: #f1f5fb; border-block: 1px solid var(--bs-line); font-family: "Lato", var(--body); color: var(--bs-dim); transition: opacity .16s linear; }
.colA span { font-size: .78em; font-weight: 700; letter-spacing: .02em; }
.hB { position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: 3.4em; display: flex; align-items: center; justify-content: space-between; padding: 0 1.5em; color: var(--ui-text); opacity: 0; transition: opacity .16s linear; will-change: transform; }
.hB b { font: 700 1.3em/1 var(--display); letter-spacing: -.01em; }
.hB span { font-size: .78em; color: var(--ui-dim); }
.hC { position: absolute; z-index: 3; left: 0; right: 0; top: 0; height: 7.6em; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; align-content: center; column-gap: .85em; padding: 0 1.5em; color: var(--ui-text); border-bottom: 1px solid var(--ui-line); opacity: 0; will-change: transform, opacity; }
.hC .th { grid-row: 1 / 3; align-self: center; width: 3.5em; height: 3.5em; border-radius: .65em; object-fit: cover; }
.hC .ti { grid-row: 1 / 3; align-self: center; min-width: 0; }
.hC .ti span { display: block; font-size: .74em; letter-spacing: .06em; color: var(--ui-dim); }
.hC .ti b { display: block; margin-top: .2em; font: 700 1.16em/1.12 var(--display); letter-spacing: -.01em; white-space: nowrap; }
.hC .gr { grid-column: 3; grid-row: 1; align-self: end; justify-self: end; display: flex; align-items: baseline; gap: .35em; }
.hC .num { min-width: 3.2em; font: 700 2.15em/1 var(--display); letter-spacing: -.02em; text-align: right; font-variant-numeric: tabular-nums; }
.hC .let { font: 700 1.08em/1 var(--display); color: var(--ui-dim); opacity: 0; transform: translateY(.35em); transition: opacity .3s ease, transform .55s var(--ease); }
.hC .let.on { opacity: 1; transform: none; }
.pill-g { grid-column: 3; grid-row: 2; align-self: start; justify-self: end; margin-top: .55em; padding: .3em .8em; border-radius: 1em; background: #294041; color: #93d6a8; font-size: .76em; font-weight: 650; white-space: nowrap; opacity: 0; transform: scale(.88); transition: opacity .3s ease, transform .55s var(--ease); }
.pill-g.on { opacity: 1; transform: none; }
.ftC { position: absolute; z-index: 2; left: 0; right: 0; top: 28.15em; height: 2.6em; display: flex; align-items: center; gap: .5em; padding: 0 1.5em; color: var(--ui-dim); opacity: 0; }
.ftC span { font-size: .76em; }
.ftC svg { width: .9em; height: .9em; flex: none; stroke: #93d6a8; }
/* A number on its way from the syllabus to the plan: marked in yellow as it leaves, the plan's own colors as it lands. */
.fly { position: absolute; z-index: 8; left: 0; top: 0; padding: .14em .5em; border-radius: .45em; background: #ffdf6b; color: var(--ink); font: 700 13.5px/1.25 var(--body); font-variant-numeric: tabular-nums; white-space: nowrap; box-shadow: 0 6px 16px rgb(3 6 14 / .5); opacity: 0; pointer-events: none; will-change: transform, opacity; transition: background-color .22s ease, color .22s ease; }
.fly.is-share { background: #36425a; color: var(--ui-text); box-shadow: 0 6px 16px rgb(3 6 14 / .5), inset 0 0 0 1px rgb(255 255 255 / .18); }
.sample { position: absolute; z-index: 4; left: calc(var(--gl) + var(--edge)); bottom: 12px; font-size: 12px; color: var(--cream-3); }
/* Try it: the same sum the class page does when you drag its sliders. */
.try { max-width: 430px; margin-top: clamp(12px, 2.6svh, 26px); padding: clamp(10px, 1.9svh, 16px) clamp(14px, 1.5vw, 20px) clamp(10px, 1.9svh, 16px); border-radius: 16px; background: rgb(255 255 255 / .05); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .09); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .4s ease, transform .7s var(--ease), visibility 0s .4s; }
.try.on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.try-h { font-size: 13.5px; font-weight: 600; color: var(--cream-2); }
.sl { display: grid; grid-template-columns: 7.2em minmax(0, 1fr) 2.9em; align-items: center; gap: 10px; margin-top: 4px; font-size: 14px; }
.sl output { text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; }
.sl input { -webkit-appearance: none; appearance: none; width: 100%; height: 30px; margin: 0; background: none; cursor: pointer; touch-action: pan-y; }
.sl input::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--ui-accent) var(--v, 50%), rgb(255 255 255 / .16) var(--v, 50%)); }
.sl input::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -7px; border: 0; border-radius: 50%; background: var(--cream); box-shadow: 0 2px 8px rgb(0 0 0 / .45), 0 0 0 0 rgb(226 181 74 / 0); transition: box-shadow .2s ease, transform .25s var(--ease); }
.sl input:hover::-webkit-slider-thumb { box-shadow: 0 2px 8px rgb(0 0 0 / .45), 0 0 0 6px rgb(226 181 74 / .2); }
.sl input:active::-webkit-slider-thumb { transform: scale(1.14); }
.sl input::-moz-range-track { height: 6px; border-radius: 6px; background: rgb(255 255 255 / .16); }
.sl input::-moz-range-progress { height: 6px; border-radius: 6px; background: var(--ui-accent); }
.sl input::-moz-range-thumb { width: 20px; height: 20px; border: 0; border-radius: 50%; background: var(--cream); box-shadow: 0 2px 8px rgb(0 0 0 / .45); }
.sl input:focus-visible { outline: none; }
.sl input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--sea-0), 0 0 0 5px var(--hi); }
.sl input:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--sea-0), 0 0 0 5px var(--hi); }
.try-out { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 10px; margin-top: 6px; padding-top: 8px; border-top: 1px solid rgb(255 255 255 / .09); font-size: 14px; color: var(--cream-2); }
.try-out b { font: 700 clamp(26px, 4.6svh, 36px)/1 var(--display); letter-spacing: -.02em; color: var(--cream); font-variant-numeric: tabular-nums; }
.try-l { display: inline-grid; place-items: center; min-width: 2.3em; padding: .28em .5em; border-radius: .5em; background: rgb(255 255 255 / .1); color: var(--cream); font: 700 15px/1 var(--display); align-self: center; transition: background-color .25s ease, color .25s ease; }
.try-l.hi { background: var(--gold); color: var(--ink); }
.try-l.pop { animation: pop .45s var(--ease); }
@keyframes pop { from { transform: scale(1.28); } }

/* ── Sheets that slide over a stage ── */
.sheet { position: relative; border-radius: var(--r-sheet) var(--r-sheet) 0 0; }
.over { margin-top: -100vh; margin-top: -100svh; box-shadow: 0 -24px 70px rgb(3 6 14 / .5); }
.light { background: var(--paper); color: var(--ink); color-scheme: light; }
.light .lede { color: var(--ink-soft); }
.light ::selection { background: var(--ink); color: var(--paper); }
.light :focus-visible { outline-color: var(--gold-ink); }

/* ── 3. Inside: the calendar, tilting up to face you, then four more ── */
.inside { z-index: 3; padding-block: clamp(60px, 12svh, 140px) calc(clamp(64px, 12svh, 150px) + var(--r-sheet)); }
.cal-head { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(16px, 4vw, 64px); align-items: end; }
.cal-head .lede { max-width: 40ch; padding-bottom: .35em; }
.cal-fig { position: relative; margin-top: clamp(26px, 5.5svh, 64px); container-type: inline-size; }
.cal-win { position: relative; aspect-ratio: 16 / 10; border-radius: clamp(10px, 1.2vw, 16px); overflow: hidden; background: var(--ui-bg); box-shadow: 0 2px 6px rgb(30 18 4 / .2), 0 40px 80px -20px rgb(30 18 4 / .55); transform: perspective(1800px) rotateX(var(--rx, 0deg)) scale(var(--sc, 1)); transform-origin: 50% 100%; will-change: transform; }
.cal-scroll { position: absolute; inset: 0; }
.cal-pan { position: relative; width: 100%; height: 100%; }
.cal-win img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 0; }
.cal-swipe { display: none; }
.leads { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.leads path { fill: none; stroke: var(--brass-hi); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .7s var(--ease) var(--dl, 0s); }
.leads circle { fill: var(--brass-hi); stroke: var(--ui-bg); stroke-width: 1.7; opacity: 0; transition: opacity .3s ease var(--dl, 0s); }
.tagc { position: absolute; left: var(--x); top: var(--y); padding: .55em .85em; border-radius: .7em; background: var(--paper); color: var(--ink); font-size: clamp(10.5px, 1.16cqw, 14px); font-weight: 650; line-height: 1.2; white-space: nowrap; box-shadow: 0 8px 22px rgb(3 6 14 / .5); opacity: 0; transform: translateY(8px) scale(.96); transform-origin: 0 50%; transition: opacity .35s ease calc(var(--dl, 0s) + .35s), transform .6s var(--ease) calc(var(--dl, 0s) + .35s); }
.cal-fig.on .leads path { stroke-dashoffset: 0; }
.cal-fig.on .leads circle { opacity: 1; }
.cal-fig.on .tagc { opacity: 1; transform: none; }
.cal-list { display: none; }
/* A to-do, dragged from the strip onto Thursday evening. Sizes follow the picture (cqw), so it lines up at any width. */
.dd { position: absolute; z-index: 2; pointer-events: none; font-size: clamp(7px, .93cqw, 13.5px); opacity: 0; }
.dd-chip { left: 34.6%; top: 8%; display: flex; align-items: center; gap: .55em; height: 3.5%; padding: 0 .8em; border-radius: .45em; background: #2b3547; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .18), 0 .9em 2em rgb(0 0 0 / .55); color: var(--ui-text); font-weight: 650; white-space: nowrap; }
.dd-chip::before { content: ""; width: .6em; height: .6em; border-radius: 50%; background: #4f84e6; }
.dd-chip small { font-size: .82em; font-weight: 500; color: var(--ui-dim); }
.dd-chip svg { position: absolute; right: -.5em; bottom: -1.15em; width: 1.6em; height: 1.6em; filter: drop-shadow(0 1px 2px rgb(0 0 0 / .5)); }
.dd-block { left: 66.35%; top: 70.15%; width: 9.75%; height: 7.35%; padding: .32em .55em; border-radius: .4em; background: #283a5e; box-shadow: inset 2.5px 0 0 #4f84e6, inset 0 0 0 1px rgb(120 160 240 / .42); color: #e3ebff; line-height: 1.25; overflow: hidden; }
.dd-block b { display: block; font-weight: 650; white-space: nowrap; }
.dd-block span { font-size: .86em; opacity: .82; white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) and (min-width: 760px) {
  .cal-fig.on .dd-chip { animation: dd-chip 8s cubic-bezier(.5, 0, .2, 1) 1.5s infinite; }
  .cal-fig.on .dd-block { animation: dd-block 8s ease 1.5s infinite; }
}
@keyframes dd-chip {
  0% { opacity: 0; left: 34.6%; top: 8%; transform: none; }
  3%, 9% { opacity: 1; left: 34.6%; top: 8%; transform: scale(1.06) rotate(-2deg); }
  29% { opacity: 1; left: 63.6%; top: 71.2%; transform: scale(1.06) rotate(2deg); }
  32%, 100% { opacity: 0; left: 63.6%; top: 71.2%; transform: scale(.92); }
}
@keyframes dd-block {
  0%, 29% { opacity: 0; transform: scale(.86); }
  33% { opacity: 1; transform: scale(1.05); }
  37%, 88% { opacity: 1; transform: none; }
  94%, 100% { opacity: 0; transform: none; }
}
.more-h { max-width: 15ch; margin-top: clamp(70px, 13svh, 150px); font-size: clamp(30px, min(4.2vw, 7.6svh), 60px); }
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); margin-top: clamp(22px, 4.5svh, 46px); }
.tile { position: relative; display: flex; flex-direction: column; grid-column: span 5; height: clamp(320px, 33vw, 420px); border-radius: clamp(16px, 2vw, 26px); overflow: hidden; overflow: clip; background: var(--ui-bg); color: var(--ui-text); box-shadow: 0 2px 6px rgb(30 18 4 / .16), 0 30px 60px -24px rgb(30 18 4 / .5); }
.t-class, .t-search { grid-column: span 7; }
.tile-txt { flex: none; padding: clamp(18px, 2.2vw, 28px) clamp(18px, 2.2vw, 28px) 0; max-width: 38ch; }
.tile h3 { font: 700 clamp(21px, 2vw, 27px)/1.1 var(--display); letter-spacing: -.012em; }
.tile p { margin-top: 7px; font-size: 14.5px; line-height: 1.45; color: var(--ui-dim); text-wrap: pretty; }
.tile kbd { padding: .08em .38em; border-radius: .32em; background: rgb(255 255 255 / .12); font-family: var(--body); font-size: .78em; font-weight: 700; vertical-align: .08em; }
/* Each picture is the whole screenshot, set so the part that matters fills the tile. */
.tile-pic { position: relative; flex: 1; min-height: 0; margin: clamp(14px, 1.8vw, 22px) 0 0 clamp(18px, 2.2vw, 28px); border-radius: 12px 0 0 0; overflow: hidden; overflow: clip; box-shadow: 0 0 0 1px rgb(255 255 255 / .08), 0 -8px 40px rgb(0 0 0 / .35); }
.tile-pic img { position: absolute; left: var(--x, 0); top: 0; width: var(--w, 100%); max-width: none; height: auto; translate: 0 var(--y, 0); transition: filter .4s ease; }
.t-class .tile-pic img { --w: 129%; --x: -27.2%; --y: -3.6%; }
.t-timer .tile-pic img { --w: 290%; --x: -190%; --y: -7.2%; }
.t-todo .tile-pic img { --w: 262%; --x: -187%; --y: -18.2%; }
.t-search .tile-pic img { --w: 106%; --x: -3%; --y: -3.4%; }
@media (hover: hover) { .tile:hover .tile-pic img { filter: brightness(1.08); } }
/* Where the browser can tie it to the scroll itself, each picture drifts a little as its tile crosses the screen. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 760px) {
    .tile-pic img { animation: tile-drift linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
    @keyframes tile-drift { from { transform: translateY(5%); } to { transform: translateY(-3%); } }
  }
}

/* ── 4. One page, opened through a porthole into each theme ── */
.themes { z-index: 4; --travel: 150; margin-top: calc(var(--r-sheet) * -1); height: calc((var(--travel) + 200) * 1vh); height: calc((var(--travel) + 200) * 1svh); background: var(--sea-0); box-shadow: 0 -20px 60px rgb(3 6 14 / .35); }
.themes .stage { border-radius: var(--r-sheet) var(--r-sheet) 0 0; }
.th-grid { position: absolute; inset: var(--bar-h) 0 0; width: min(100% - var(--gl) - var(--gr) - 2 * var(--edge), var(--maxw)); margin: auto; display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(22px, 4vw, 60px); align-items: center; }
.tw { position: relative; width: max(200px, min(100%, calc((100svh - var(--bar-h) - 76px) * 1.6))); aspect-ratio: 16 / 10; margin-inline: auto; border-radius: clamp(10px, 1.2vw, 16px); overflow: hidden; background: var(--ui-bg); box-shadow: 0 0 0 1px rgb(255 255 255 / .08), 0 40px 90px rgb(3 6 14 / .6); }
.tw img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 0 0; will-change: opacity; }
/* A theme waiting its turn is drawn already, too faint to see, so its reveal never stops to load. */
.tw img.wait { opacity: .002; }
.iris { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; opacity: 0; }
.iris circle { fill: none; stroke: var(--brass-hi); stroke-width: 2.5; }
.iris circle + circle { stroke: rgb(236 198 115 / .3); stroke-width: 9; }
.iris g { opacity: 0; }
.th-copy .h2 { font-size: clamp(30px, min(3.7vw, 7.6svh), 54px); }
.th-copy .lede { margin-top: clamp(10px, 2svh, 20px); color: var(--cream-2); }
.th-now { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 12px; margin-top: clamp(14px, 3.2svh, 32px); }
.th-name { display: grid; overflow: hidden; font: 700 clamp(26px, min(3.3vw, 6.4svh), 46px)/1.14 var(--display); letter-spacing: -.02em; color: var(--hi); }
.th-name span { grid-area: 1 / 1; white-space: nowrap; }
.th-group { font-size: 13.5px; color: var(--cream-3); }
.chips { display: grid; gap: 9px; margin-top: clamp(10px, 2svh, 18px); }
.theme-set { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 7px 8px; padding-left: 84px; }
.set-name { position: absolute; left: 0; top: 0; width: 76px; line-height: 30px; font-size: 10.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--cream-3); }
.chip { position: relative; width: 30px; height: 30px; flex: none; padding: 0; border: 0; border-radius: 50%; background: linear-gradient(135deg, var(--bg) 0 50%, var(--side) 50% 100%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .24); cursor: pointer; transition: transform .35s var(--ease); }
.chip::after { content: ""; position: absolute; right: 5px; bottom: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--acc); }
.chip:hover { transform: scale(1.14); }
.chip:active { transform: scale(.94); transition-duration: .06s; }
.chip[aria-pressed="true"] { outline: 2px solid var(--hi); outline-offset: 3px; }
.chip.own { display: grid; place-items: center; background: none; box-shadow: inset 0 0 0 1.5px var(--cream-3); }
.chip.own::after { display: none; }
.chip.own svg { width: 14px; height: 14px; stroke: var(--cream); }

/* ── 5. Privacy, said plainly, and the questions people ask ── */
.trust { z-index: 5; padding-block: clamp(72px, 14svh, 170px) calc(clamp(80px, 13svh, 160px) + 44px); }
.priv-h { max-width: 13ch; margin-inline: auto; text-align: center; font: 700 clamp(38px, min(6.6vw, 11.5svh), 100px)/1 var(--display); letter-spacing: -.03em; text-wrap: balance; }
.pen { position: relative; white-space: nowrap; }
.pen svg { position: absolute; left: -3%; bottom: -.17em; width: 106%; height: .3em; overflow: visible; }
.pen path { fill: none; stroke: var(--brand-gold); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s var(--ease) .2s; }
.trust.seen .pen path { stroke-dashoffset: 0; }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1040px; margin: clamp(38px, 7.5svh, 84px) auto 0; }
.facts div { padding: 2px clamp(14px, 2.4vw, 32px); }
.facts div + div { border-left: 1px solid rgb(27 23 18 / .16); }
.facts b { display: block; font: 700 clamp(27px, 3.5vw, 46px)/1.08 var(--display); letter-spacing: -.022em; }
/* A word, crossed out by the same pen. */
.facts s { position: relative; display: inline-block; text-decoration: none; transition: color .5s ease calc(var(--rd, 0s) + .6s); }
.facts s::after { content: ""; position: absolute; left: -5%; right: -5%; top: 54%; height: .1em; border-radius: 1em; background: var(--brand-gold); transform: rotate(-2.2deg) scaleX(0); transform-origin: 0 50%; transition: transform .7s var(--ease) calc(var(--rd, 0s) + .4s); }
.facts .seen s { color: rgb(27 23 18 / .46); }
.facts .seen s::after { transform: rotate(-2.2deg) scaleX(1); }
html:not(.js) .facts s { color: rgb(27 23 18 / .46); }
html:not(.js) .facts s::after { transform: rotate(-2.2deg); }
.facts span { display: block; margin-top: 9px; font-size: 15px; line-height: 1.45; color: var(--ink-soft); }
.priv-more { max-width: 52ch; margin: clamp(28px, 5svh, 50px) auto 0; font-size: 16px; color: var(--ink-soft); text-align: center; text-wrap: pretty; }
.priv-more a, .qa a, .qa-more a { color: var(--gold-ink); font-weight: 600; text-underline-offset: 3px; }
.answers { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(20px, 3svh, 36px) clamp(20px, 4vw, 64px); margin-top: clamp(80px, 14svh, 170px); padding-top: clamp(40px, 7svh, 80px); border-top: 1px solid rgb(27 23 18 / .16); scroll-margin-top: 70px; }
.answers .h2 { position: sticky; top: calc(var(--bar-h) + 28px); align-self: start; font-size: clamp(32px, min(4.2vw, 7.6svh), 58px); }
.qa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(22px, 3.6svh, 40px) clamp(20px, 3vw, 46px); }
.qa dt { font: 700 clamp(18px, 1.6vw, 21px)/1.2 var(--display); letter-spacing: -.01em; }
.qa dd { margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--ink-soft); text-wrap: pretty; }
.qa-more { grid-column: 2; font-size: 15px; color: var(--ink-soft); }

/* ── 6. Back in the water: the class library, on its shelves ── */
.lib { position: relative; z-index: 6; margin-top: -44px; padding-block: clamp(100px, 17svh, 190px) clamp(36px, 6svh, 70px); background: linear-gradient(180deg, var(--sea-2), var(--sea-0) 72%); text-align: center; }
.lib::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 44px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='44' preserveAspectRatio='none'%3E%3Cpath d='M0 0H240V20C200 36 160 36 120 20S40 4 0 20Z' fill='%23f6efdf'/%3E%3C/svg%3E") repeat-x left top / 240px 44px; }
.lib-head { max-width: 21ch; margin-inline: auto; font: 700 clamp(29px, min(4.4vw, 7.6svh), 62px)/1.05 var(--display); letter-spacing: -.024em; text-wrap: balance; }
.lib-count { color: var(--hi); font-variant-numeric: tabular-nums; }
.lib-hand { color: var(--cream-2); }
.shelves { --sh: clamp(132px, 19svh, 178px); margin-top: clamp(30px, 6svh, 64px); display: grid; gap: clamp(8px, 1.6svh, 16px); }
.shelves:empty { display: none; }
/* One shelf: books standing on a board, drifting past. */
.lib-row { position: relative; height: calc(var(--sh) + 34px); overflow: hidden; overflow: clip; touch-action: pan-y; cursor: grab; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.lib-row.is-dragging { cursor: grabbing; }
.js .lib-row { opacity: 0; translate: var(--from, 70px) 0; transition: opacity .9s ease, translate 1.3s var(--ease); }
.js .lib-row:nth-child(2) { --from: -70px; transition-delay: .12s; }
.js .lib-row.seen { opacity: 1; translate: 0 0; }
.lib-row::before { content: ""; position: absolute; inset: 0 0 18px; background: linear-gradient(transparent 30%, rgb(2 5 12 / .34)); }
.lib-row::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 18px; background: linear-gradient(#c79a63 0 2px, #946238 2px 4px, #7b4d27 4px 12px, #3f2613 12px 13px, #2a190c 13px 18px); box-shadow: 0 -1px 0 rgb(0 0 0 / .35); }
.lib-track { position: absolute; left: 0; bottom: 18px; display: flex; align-items: flex-end; gap: 3px; width: max-content; padding-top: 16px; will-change: transform; }
.spine { position: relative; flex: none; display: flex; align-items: center; justify-content: center; width: var(--w, 40px); height: calc(var(--sh) * var(--h, .9)); border-radius: 3px 3px 1px 1px; background: var(--c, #2f3f63); color: var(--t, #f1dfae); text-decoration: none; box-shadow: inset 2px 0 0 rgb(255 255 255 / .11), inset -4px 0 7px rgb(0 0 0 / .3), inset 0 2px 0 rgb(255 255 255 / .13); transform-origin: 50% 100%; transition: transform .4s var(--ease), filter .3s ease, box-shadow .3s ease; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
.spine::before, .spine::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor; opacity: .5; }
.spine::before { top: 11px; box-shadow: 0 5px 0 -0.5px currentColor; }
.spine::after { bottom: 13px; }
.spine b { writing-mode: vertical-rl; font: 600 12.5px/1 var(--display); letter-spacing: .07em; white-space: nowrap; }
/* A paper label instead of foil lettering. */
.spine.v2 b { padding: 9px 3.5px; border-radius: 2px; background: #f3ead4; color: #2a231a; box-shadow: 0 1px 2px rgb(0 0 0 / .35); font-family: var(--body); font-size: 11px; font-weight: 700; letter-spacing: .05em; }
.spine.v2::before, .spine.v2::after { opacity: .28; }
.spine.v3::before { top: 18px; height: 5px; box-shadow: none; opacity: .36; }
.spine.v3::after { bottom: 18px; height: 5px; opacity: .36; }
.spine.lean { transform: rotate(-6.5deg); margin: 0 10px 0 14px; }
@media (hover: hover) {
  .spine:hover { transform: translateY(-13px); filter: brightness(1.16); }
  .spine.lean:hover { transform: rotate(-6.5deg) translateY(-11px); }
}
.spine:focus-visible { outline: 2px solid var(--hi); outline-offset: 2px; transform: translateY(-13px); }
/* Typing in the check dims the shelf and pulls out the classes you named. */
.shelves.is-asked .spine { filter: brightness(.42) saturate(.6); }
.shelves.is-asked .spine.is-hit { filter: brightness(1.1); transform: translateY(-15px); box-shadow: inset 2px 0 0 rgb(255 255 255 / .11), inset -4px 0 7px rgb(0 0 0 / .3), 0 0 0 2px var(--hi), 0 0 26px rgb(236 198 115 / .5); }
.lib-tools { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; min-height: 44px; margin-top: 16px; }
.placard { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 2px 10px; padding: 9px 18px; border-radius: 10px; background: rgb(255 255 255 / .05); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1); font-size: 14.5px; color: var(--cream-2); }
.placard b { font: 700 16px/1.25 var(--display); letter-spacing: .01em; color: var(--cream); }
.placard.is-on { box-shadow: inset 0 0 0 1px rgb(236 198 115 / .5); }
.lib-pause { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: rgb(255 255 255 / .06); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12); color: var(--cream-2); font-size: 13px; font-weight: 600; cursor: pointer; transition: background-color .2s ease, color .2s ease; }
.lib-pause:hover { background: rgb(255 255 255 / .11); color: var(--cream); }
.lib-pause svg { width: 11px; height: 11px; fill: currentColor; }
@media (hover: none) { .placard { display: none; } }
.lib-check { max-width: 720px; margin: clamp(28px, 5.5svh, 54px) auto 0; }
.lib-check label { display: block; margin-bottom: 12px; font: 600 clamp(19px, 2vw, 24px)/1.25 var(--display); color: var(--cream); text-wrap: balance; }
.lib-field { display: flex; gap: 8px; max-width: 580px; margin-inline: auto; padding: 6px; border-radius: 999px; background: rgb(255 255 255 / .07); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14); transition: box-shadow .25s ease, background-color .25s ease; }
.lib-field:focus-within { background: rgb(255 255 255 / .1); box-shadow: inset 0 0 0 1.5px var(--hi), 0 0 0 5px rgb(236 198 115 / .12); }
.lib-field input { flex: 1; min-width: 0; height: 44px; padding: 0 8px 0 18px; border: 0; border-radius: 999px; background: none; color: var(--cream); font-size: 16px; outline: none; }
.lib-field input::placeholder { color: var(--cream-3); }
.lib-field .pill { min-height: 44px; box-shadow: none; }
.lib-answers { list-style: none; max-width: 640px; margin: 16px auto 0; padding: 0; display: grid; gap: 8px; text-align: left; }
.lib-answers:empty { margin-top: 0; }
.la { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding: 12px 16px; border-radius: 14px; background: rgb(255 255 255 / .06); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .09); font-size: 14.5px; line-height: 1.45; color: var(--cream-2); }
@media (prefers-reduced-motion: no-preference) { .la { animation: la-in .55s var(--ease) calc(var(--i, 0) * 60ms) backwards; } }
@keyframes la-in { from { opacity: 0; transform: translateY(10px); } }
.la-mark { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgb(255 255 255 / .1); color: var(--cream-2); }
.la.yes .la-mark { background: #25523a; color: #a5e3b8; }
.la.which .la-mark { background: #57471c; color: #f0d27a; }
.la-mark svg { width: 16px; height: 16px; }
.la-name strong { color: var(--cream); }
.la-title { margin-left: 6px; color: var(--cream-3); }
.la a, .la-more a, .lib-more a { color: var(--hi); font-weight: 600; text-underline-offset: 3px; }
.la-more { font-size: 14.5px; text-align: center; }
.lib-more { margin-top: 18px; font-size: 15px; color: var(--cream-2); }

/* ── 7. The bottom of the dive: a glow from below, and the way in ── */
.fin { position: relative; z-index: 6; padding-block: clamp(70px, 13svh, 150px) clamp(96px, 18svh, 200px); background: linear-gradient(var(--sea-0), #0c1427); text-align: center; }
/* The glow comes up from under the sand, and the sand's edge is the footer's. */
.fin::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 62% at 50% 108%, rgb(226 181 74 / .34), rgb(226 181 74 / .09) 46%, transparent 72%); pointer-events: none; }
.fin::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 40px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='40' preserveAspectRatio='none'%3E%3Cpath d='M0 40V24C70 8 130 8 210 22S350 34 420 24V40Z' fill='%23070b16'/%3E%3C/svg%3E") repeat-x left bottom / 420px 40px; pointer-events: none; }
.fin .bubs { opacity: .8; overflow: hidden; overflow: clip; }
.fin:has(.get-menu:not([hidden])) { z-index: 7; }
.fin h2 { position: relative; font: 700 clamp(40px, min(7.2vw, 12.5svh), 108px)/.98 var(--display); letter-spacing: -.03em; text-wrap: balance; }
.fin .cta-row { position: relative; margin-top: clamp(22px, 4.5svh, 46px); }
.fin-hint { position: relative; text-wrap: balance; margin-top: 16px; font-size: 13.5px; font-weight: 600; color: var(--cream-2); }
.foot { position: relative; z-index: 6; padding-block: clamp(36px, 6svh, 60px) 28px; background: #070b16; color: var(--cream-3); font-size: 13.5px; }
.foot-note { font: 600 clamp(17px, 1.7vw, 22px)/1.3 var(--display); color: var(--cream); text-wrap: balance; }
.foot-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px clamp(20px, 4vw, 64px); margin-top: 26px; padding-top: 24px; border-top: 1px solid rgb(255 255 255 / .08); }
.foot nav { display: grid; gap: 7px; align-content: start; justify-items: start; }
.ff-label { margin-bottom: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--cream-3); }
.foot a { color: var(--cream-2); text-decoration: none; }
.foot a:hover { color: var(--cream); text-decoration: underline; text-underline-offset: 3px; }
.foot-proof { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; }
.fine { max-width: 86ch; margin-top: 26px; padding-top: 18px; border-top: 1px solid rgb(255 255 255 / .08); font-size: 12.5px; }

/* ── Movement that runs on its own (none of it with reduced motion) ── */
@media (prefers-reduced-motion: no-preference) {
  .rays i { animation: sway 14s ease-in-out infinite alternate; }
  .rays i:nth-child(2) { animation-duration: 18s; } .rays i:nth-child(3) { animation-duration: 22s; } .rays i:nth-child(4) { animation-duration: 16s; }
  @keyframes sway { from { opacity: .5; } to { opacity: 1; } }
  .bubs i { animation: bub var(--t) linear var(--d) infinite; }
  @keyframes bub { to { transform: translate3d(var(--dx, 16px), -118vh, 0); } }
  .cue i { animation: cue 2.4s var(--ease) infinite; }
  /* The first books on a shelf stand up one after another as it arrives. */
  .js .lib-row.seen .spine:nth-child(-n + 46) { animation: stand .9s var(--ease) calc(var(--n, 0) * 16ms + .1s) backwards; }
  @keyframes stand { from { transform: translateY(54px); opacity: 0; } }
  .fin::before { animation: breathe 7s ease-in-out infinite alternate; }
  @keyframes breathe { from { opacity: .62; } to { opacity: 1; } }
  .glass::after { animation: glint 8s ease-in-out 2.6s infinite; }
  @keyframes glint { 0%, 64% { transform: translateX(-160%) skewX(-18deg); } 100% { transform: translateX(460%) skewX(-18deg); } }
  /* As the film begins, the glass catches the light once before the porthole opens. */
  .ap-ring.is-wind .glass::after { animation: glint-once 1.3s ease-in-out .05s both; }
  @keyframes glint-once { from { transform: translateX(-160%) skewX(-18deg); } to { transform: translateX(460%) skewX(-18deg); } }
  @keyframes cue { 0% { transform: scaleY(0); opacity: 1; } 55% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
  /* Arriving: the headline rises line by line, then the rest, then the porthole. */
  .js .hero h1 .ln > span { animation: rise 1.1s var(--ease) .05s backwards; }
  .js .hero h1 .ln:nth-child(2) > span { animation-delay: .15s; }
  .js .hero .lede { animation: fade-up 1s var(--ease) .38s backwards; }
  .js .hero .cta-row { animation: fade-up 1s var(--ease) .5s backwards; }
  .js .win { animation: port-in 1.3s var(--ease) .3s backwards; }
  .js .cue { animation: fade-in 1s ease 1.3s backwards; }
  @keyframes rise { from { transform: translateY(108%); } }
  @keyframes fade-up { from { opacity: 0; transform: translateY(16px); } }
  @keyframes fade-in { from { opacity: 0; } }
  @keyframes port-in { from { opacity: 0; transform: translateY(30px) scale(.86); } }
}

/* ── Short windows: the copy steps back so the product keeps its room ── */
@media (max-height: 640px) and (min-width: 900px), (max-height: 520px) {
  .th-copy .lede { display: none; }
  .chip { width: 26px; height: 26px; }
  .chip::after { right: 4px; bottom: 4px; width: 7px; height: 7px; }
  .set-name { line-height: 26px; }
  .proof-more { display: none; }
  .rail { top: 12px; }
  .syl { font-size: 12.5px; padding: 9px 14px 8px; }
  .syl-l { padding: 2px 0; }
}
@media (max-height: 560px) { .cue { display: none; } }
/* ── Narrow ── */
@media (max-width: 899px) {
  .bar-nav a:nth-child(n + 3) { display: none; }
  .cal-head { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .answers { grid-template-columns: minmax(0, 1fr); }
  .answers .h2 { position: static; }
  .qa-more { grid-column: 1; }
  .tile, .t-class, .t-search { grid-column: span 6; }
  .pill-sm { min-height: 36px; }
}
/* Narrow, with the height for it: one column; the words sit above the product. */
@media (max-width: 899px) and (min-height: 521px) {
  .how-grid { --cap-h: 216px; grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--cap-h) minmax(0, 1fr); gap: 6px; padding-top: 10px; }
  .rail { top: 0; }
  .caps { top: 38px; }
  .cap, .cap.before, .cap.after { top: 0; transform: none; }
  .cap.before { transform: translateY(-14px); }
  .cap.after { transform: translateY(14px); }
  .cap:nth-child(3) .lede, .syl { display: none; }
  .gc-wrap { place-items: start center; }
  .gc { --gc-fs: max(8px, min(22px, 3.44cqw, calc((100svh - var(--bar-h) - var(--cap-h) - 58px) / 31.4))); }
  .try { margin-top: 8px; padding: 8px 14px; }
  .sl { margin-top: 0; }
  /* A taller place to put a finger than the row it sits in. */
  .sl input { height: 36px; margin-block: -5px; }
  .try-out { margin-top: 2px; padding-top: 6px; }
  .th-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; gap: 14px; }
  .th-copy { display: contents; }
  .th-copy .h2 { order: -1; }
  .th-copy .lede { display: none; }
  .th-now { margin-top: 0; }
  .th-tools { order: 3; min-width: 0; }
  /* The page's own shape on a phone too, so each theme shows whole, as in the hero. */
  .tw { width: max(200px, min(100% + 2 * var(--edge), calc((100svh - var(--bar-h) - 262px) * 1.6))); aspect-ratio: 16 / 10; }
  .chips { display: flex; gap: 16px; margin-inline: calc(var(--gl) * -1) calc(var(--gr) * -1); padding: 6px var(--gr) 8px var(--gl); overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
           -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent); }
  .chips::-webkit-scrollbar { display: none; }
  .theme-set { flex: none; flex-wrap: nowrap; padding-left: 0; }
  .set-name { position: static; width: auto; margin-right: 2px; line-height: inherit; }
  .chip { width: 36px; height: 36px; }
  .chip::after { right: 6px; bottom: 6px; width: 9px; height: 9px; }
}
@media (min-width: 600px) and (max-width: 899px) and (min-height: 521px) {
  .how-grid { --cap-h: 236px; }
}
/* Narrow and very short (a phone on its side, a laptop zoomed far in): side by side again, and everything smaller. */
@media (max-width: 899px) and (max-height: 520px) {
  .h2 { font-size: clamp(21px, 7.2svh, 31px); }
  .cap .lede { font-size: 14px; margin-top: 6px; }
  .cap:nth-child(3) .lede, .syl { display: none; }
  .try { margin-top: 8px; padding: 7px 12px; }
  .sl { margin-top: 0; font-size: 13px; }
  .sl input { height: 24px; }
  .try-out { margin-top: 2px; padding-top: 4px; }
  .try-out b { font-size: 22px; }
  .th-copy .h2 { font-size: 21px; }
  .th-now { margin-top: 8px; }
  .th-name { font-size: 22px; }
  .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
  .theme-set { display: contents; }
  .set-name { display: none; }
}
/* So short the headline, the button and the porthole can't all stand: the headline takes one line and the rest waits below. */
@media (max-height: 420px) {
  .hero h1 .ln { display: inline; }
  .hero .lede, .proof { display: none; }
}
@media (max-width: 759px) {
  .bar-nav { display: none; }
  .bar .nav-right { margin-left: auto; }
  .say-text { font-size: clamp(27px, min(7.8vw, 5.2svh), 34px); }
  /* On a phone the calendar is the whole week at once, inside the page's margins: the picture's left 22% (DoreScore's sidebar)
     is cropped so the days are as large as they can be. Nothing to swipe. */
  .cal-win { aspect-ratio: 1 / .7917; border-radius: 12px; transform: none; box-shadow: 0 2px 6px rgb(30 18 4 / .2), 0 24px 48px -16px rgb(30 18 4 / .5); }
  .cal-scroll { overflow: clip; } /* not a scroller at all, so nothing (not even the drift to Thursday) can move it */
  /* The calendar's own panel (x .2162-.9662, y .009-.945 of the picture) centred with an even 2.5% margin all round;
     the shift is a share of the picture, and the window's colour is the picture's, so the margins are seamless. */
  .cal-pan { width: 126.67%; translate: -19.65% 2.26%; }
  .cal-swipe { display: none !important; }
  .cal-swipe { position: absolute; z-index: 3; left: 50%; bottom: 16px; translate: -50% 0; display: flex; align-items: center; gap: 7px; margin: 0; padding: 7px 14px; border-radius: 999px; background: rgb(8 13 26 / .74); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16); color: var(--cream); font-size: 13px; font-weight: 600; white-space: nowrap; pointer-events: none; transition: opacity .4s ease; }
  .cal-swipe::after { content: ""; width: 6px; height: 6px; border: solid currentColor; border-width: 1.6px 1.6px 0 0; transform: rotate(45deg); }
  .cal-fig.swiped .cal-swipe { opacity: 0; }
  .leads, .tagc { display: none; }
  .cal-list { display: grid; gap: 10px; margin-top: 18px; padding: 0; font-size: 15.5px; color: var(--ink-soft); }
  .cal-list span { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 10px; align-items: baseline; }
  .cal-list span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--brand-gold); translate: 0 -1px; }
  /* The four tiles become a row to swipe through. */
  .bento { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(84%, 340px); margin-inline: calc(var(--gl) * -1) calc(var(--gr) * -1); padding: 4px var(--gr) 26px var(--gl); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gl); scrollbar-width: none; overscroll-behavior-x: contain; }
  .bento::-webkit-scrollbar { display: none; }
  .tile, .t-class, .t-search { grid-column: auto; height: 380px; scroll-snap-align: start; }
  .t-class .tile-pic img { --w: 217%; --x: -44.5%; }
  .t-search .tile-pic img { --w: 150%; --x: -4%; }
  .facts { grid-template-columns: minmax(0, 1fr); gap: 0; max-width: 460px; }
  .facts div { padding: 18px 4px; }
  .facts div + div { border-left: 0; border-top: 1px solid rgb(27 23 18 / .16); }
  .qa { grid-template-columns: minmax(0, 1fr); }
  .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-cols nav:nth-child(3) { grid-column: 1 / -1; }
  .spine b { font-size: 11.5px; }
  .proof { justify-items: center; text-align: center; }
}
/* The narrowest phones: the bar keeps the name and the button, and drops the color picker. */
@media (max-width: 430px) {
  .dial { padding-right: 5px; }
  .dial-name { display: none; }
}
/* So the switch and the wheel still share a line. */
@media (max-width: 340px) { .seg button { padding: 0 12px; } }
@media (max-width: 380px) {
  .bar .appear { display: none; }
  .wordmark { font-size: 18.5px; }
  .pill-sm { padding: 0 13px; }
}
/* ── Less motion, less see-through, more contrast: each asked for by the visitor's own settings ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .js .rv { opacity: 1; transform: none; }
  .js .lib-row { opacity: 1; translate: 0 0; }
  .lib-row { overflow-x: auto; cursor: auto; -webkit-mask: none; mask: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .bar::before { background: var(--sea-0); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  :root { --cream-2: rgb(246 239 223 / .92); --cream-3: rgb(246 239 223 / .8); --ink-soft: #2f2921; --ui-dim: #cfd5e0; }
  .bar::before { background: var(--sea-0); }
  .seg, .dial, .lib-field, .try, .placard { box-shadow: inset 0 0 0 1.5px var(--cream-2); }
}

/* ── Without the script (turned off, blocked, failed to load, or a browser too old for it):
   a plain scroll. Nothing is pinned and nothing waits to be revealed. index.html takes the
   "js" class back off if index.js never reports in. ── */
html:not(.js) .pin { height: auto !important; }
html:not(.js) .stage { position: static !important; height: auto !important; overflow: visible !important; }
html:not(.js) .hero .stage { padding: 96px 16px 64px; display: flex; flex-direction: column; align-items: center; gap: 30px; }
html:not(.js) :is(.hero-copy, .hero-ctl, .say-text, .win, .ap, .how-grid, .how-side, .caps, .th-grid) { position: static !important; opacity: 1 !important; transform: none !important; visibility: visible !important; }
html:not(.js) .say-text { translate: none; width: auto; max-width: 900px; }
html:not(.js) #ctlSay { opacity: 1; transform: none; }
html:not(.js) .hero-copy { height: auto !important; }
html:not(.js) .ap { width: min(100%, 1100px) !important; height: auto !important; clip-path: none !important; border-radius: 14px; overflow: hidden; }
html:not(.js) :is(.ap-zoom, .ap-full) { position: static; transform: none !important; }
html:not(.js) .ap-zoom img { position: static !important; width: 100% !important; height: auto !important; opacity: 1; }
html:not(.js) :is(.ap-ring, .ap-edge, .film-skip, .bs-old, .cue, .seg, .dial, .ctl-say:not(#ctlSay), .rail, .gc-wrap, .glow, .iris, .syl, .try, .dd, .bar-prog) { display: none !important; }
html:not(.js) :is(.how-grid, .th-grid) { display: block; padding: 72px 16px; }
html:not(.js) .th-fig { margin-bottom: 28px; }
html:not(.js) .cap { position: static; opacity: 1; transform: none; margin-bottom: 40px; }
html:not(.js) .over { margin-top: 0; }
html:not(.js) .tw img.wait { display: none; }
html:not(.js) .cal-win { transform: none; }
html:not(.js) .lib-answers:empty { display: none; }

/* Moving between pages (Chrome's cross-page view transitions): the header stays
   put; the old page fades out quickly and the new one fades in, rising a few
   pixels, the way Apple's pages change. */
@view-transition { navigation: auto; }
html { background-color: #0a101f; }
.bar.top { view-transition-name: site-header; }
::view-transition-group(site-header) { animation-duration: 0s; }
::view-transition-old(root) { animation: ds-fade-out 180ms cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: ds-fade-in 460ms cubic-bezier(.25, .1, .25, 1) 80ms both; }
@keyframes ds-fade-out { to { opacity: 0; } }
@keyframes ds-fade-in { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}