@font-face {
  font-family: "Anybody";
  src: url("../fonts/anybody-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 50% 150%;
  font-display: swap;
}
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../fonts/schibsted-normal.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../fonts/schibsted-italic.woff2") format("woff2");
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Shantell Sans";
  src: url("../fonts/shantell-normal.woff2") format("woff2");
  font-weight: 300 800;
  font-display: swap;
}
@font-face {
  font-family: "BTB Wordmark";
  src: url("../fonts/inter-900-logo.woff2") format("woff2");
  font-weight: 900;
  font-display: block;
  unicode-range: U+41-42, U+44-45, U+48, U+4B, U+4E-4F, U+52, U+54;
}

:root {
  --paper: #edf3f7;
  --ink: #0d182d;
  --coral: #e8552f;
  --coral-hi: #fa7150;
  --sky: #91d5f9;
  --pen-red: #c12b09;
  --pen-deep: #a3240a;

  --f-display: "Anybody", "Arial Narrow", sans-serif;
  --f-body: "Schibsted Grotesk", "Segoe UI", system-ui, sans-serif;
  --f-hand: "Shantell Sans", "Segoe Print", "Comic Sans MS", cursive;
  --f-mark: "BTB Wordmark", "Arial Black", sans-serif;

  --gut: clamp(16px, 4.4vw, 76px);
  --maxw: 1360px;
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 40px;
  --sp-5: 64px;
  --sp-6: 104px;

  --t-q: clamp(2.3rem, 1.1rem + 4.7vw, 6rem);
  --t-big: clamp(1.45rem, 0.95rem + 1.75vw, 2.6rem);
  --t-body: clamp(1.0625rem, 1rem + 0.25vw, 1.25rem);
  --t-small: 0.9375rem;
  --t-note: clamp(1.3rem, 1.05rem + 0.85vw, 1.85rem);

  --out: cubic-bezier(0.16, 1, 0.3, 1);
  --fall: cubic-bezier(0.55, 0, 0.8, 0.45);
}

.s-paper { --bg: var(--paper); --fg: var(--ink); --soft: #3d4b62; --pen-c: var(--pen-red); --btn-bg: var(--ink); --btn-fg: var(--paper); --thumb: var(--coral); --track: var(--ink); }
.s-ink { --bg: var(--ink); --fg: var(--paper); --soft: #a8b7c9; --pen-c: var(--paper); --btn-bg: var(--paper); --btn-fg: var(--ink); --thumb: var(--paper); --track: var(--paper); }
.s-coral { --bg: var(--coral); --fg: var(--ink); --soft: var(--ink); --pen-c: var(--ink); --btn-bg: var(--ink); --btn-fg: var(--paper); --thumb: var(--ink); --track: var(--ink); }
.s-sky { --bg: var(--sky); --fg: var(--ink); --soft: #24405f; --pen-c: var(--pen-deep); --btn-bg: var(--ink); --btn-fg: var(--paper); --thumb: var(--coral); --track: var(--ink); }
.s-paper, .s-ink, .s-coral, .s-sky { background-color: var(--bg); color: var(--fg); }

*, *::before, *::after { box-sizing: border-box; }
html {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-color: var(--ink) var(--paper);
}
body {
  margin: 0;
  overflow-x: clip;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--t-body)/1.55 var(--f-body);
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
}
::selection { background: var(--ink); color: var(--paper); }
.s-ink ::selection { background: var(--paper); color: var(--ink); }
img, video, canvas, svg { display: block; max-width: 100%; }
p { margin: 0 0 1em; max-width: 62ch; text-wrap: pretty; }
h1, h2, h3 { margin: 0; font-weight: inherit; }
ul, ol { margin: 0; }
button { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--fg, var(--ink)); outline-offset: 4px; }
input, button { caret-color: var(--coral); }

.sr {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.skip {
  position: fixed; z-index: 90; left: 12px; top: 12px;
  padding: 12px 18px;
  background: var(--ink); color: var(--paper);
  font-weight: 700; text-decoration: none;
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

/* wordmark, from the logo kit */
.btb-logo {
  --slide: 0.07em;
  position: relative;
  display: inline-block;
  white-space: nowrap;
  font-family: var(--f-mark);
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: -0.035em;
  color: var(--ink);
  text-transform: uppercase;
}
.btb-logo__top, .btb-logo__bot { display: block; }
.btb-logo__top { clip-path: polygon(0 0, 100% 0, 100% 44%, 0 58%); }
.btb-logo__bot {
  position: absolute; inset: 0;
  clip-path: polygon(0 60%, 100% 46%, 100% 100%, 0 100%);
  transform: translateX(var(--slide));
  transition: transform 0.9s var(--out);
}
.btb-logo__sep {
  display: inline-block;
  width: 0.16em; height: 0.16em;
  margin: 0 0.09em;
  background: var(--coral-hi);
}
.btb-logo.g-slip .btb-logo__bot { animation: btbSlip 0.42s steps(1, end) both; }
.btb-logo.g-tear .btb-logo__top { animation: btbTearTop 0.36s steps(1, end) both; }
.btb-logo.g-tear .btb-logo__bot { animation: btbTearBot 0.36s steps(1, end) both; }
.btb-logo.g-chroma .btb-logo__top,
.btb-logo.g-chroma .btb-logo__bot { animation: btbChroma 0.5s steps(1, end) both; }
.btb-logo.g-skip { animation: btbSkip 0.4s steps(1, end) both; }
.btb-logo.g-wrench .btb-logo__top { animation: btbWrenchTop 0.46s var(--out) both; }
.btb-logo.g-wrench .btb-logo__bot { animation: btbWrenchBot 0.46s var(--out) both; }
@keyframes btbSlip {
  0% { transform: translateX(var(--slide)) }
  16% { transform: translateX(calc(var(--slide) + 0.2em)) }
  33% { transform: translateX(calc(var(--slide) - 0.06em)) }
  50% { transform: translateX(calc(var(--slide) + 0.13em)) }
  68% { transform: translateX(calc(var(--slide) - 0.03em)) }
  84% { transform: translateX(calc(var(--slide) + 0.04em)) }
  100% { transform: translateX(var(--slide)) }
}
@keyframes btbTearTop {
  0%, 100% { clip-path: polygon(0 0, 100% 0, 100% 44%, 0 58%) }
  28% { clip-path: polygon(0 0, 100% 0, 100% 31%, 0 47%) }
  56% { clip-path: polygon(0 0, 100% 0, 100% 53%, 0 66%) }
  78% { clip-path: polygon(0 0, 100% 0, 100% 40%, 0 55%) }
}
@keyframes btbTearBot {
  0%, 100% { clip-path: polygon(0 60%, 100% 46%, 100% 100%, 0 100%); transform: translateX(var(--slide)) }
  28% { clip-path: polygon(0 49%, 100% 33%, 100% 100%, 0 100%); transform: translateX(calc(var(--slide) + 0.07em)) }
  56% { clip-path: polygon(0 68%, 100% 55%, 100% 100%, 0 100%); transform: translateX(calc(var(--slide) - 0.04em)) }
  78% { clip-path: polygon(0 57%, 100% 42%, 100% 100%, 0 100%); transform: translateX(calc(var(--slide) + 0.02em)) }
}
@keyframes btbChroma {
  0%, 100% { text-shadow: none }
  18% { text-shadow: -0.035em 0 var(--coral-hi), 0.028em 0 #5aa2ff }
  42% { text-shadow: 0.04em 0 var(--coral-hi), -0.03em 0 #5aa2ff }
  64% { text-shadow: -0.018em 0 var(--coral-hi) }
  82% { text-shadow: 0.012em 0 #5aa2ff }
}
@keyframes btbSkip {
  0%, 100% { transform: translate(0, 0) scaleX(1); opacity: 1 }
  12% { transform: translate(-0.025em, -0.012em) scaleX(1.035); opacity: 0.82 }
  26% { transform: translate(0.018em, 0.014em) scaleX(0.978); opacity: 1 }
  44% { transform: translate(-0.008em, 0) scaleX(1.012); opacity: 0.55 }
  62% { transform: translate(0, 0) scaleX(1); opacity: 1 }
  74% { opacity: 0.75 }
}
@keyframes btbWrenchTop {
  0%, 100% { transform: translateY(0) }
  26% { transform: translateY(-0.04em) }
  58% { transform: translateY(0.014em) }
}
@keyframes btbWrenchBot {
  0%, 100% { transform: translateX(var(--slide)) translateY(0) }
  26% { transform: translateX(calc(var(--slide) + 0.035em)) translateY(0.045em) }
  58% { transform: translateX(calc(var(--slide) - 0.018em)) translateY(-0.014em) }
}

/* fixed tab */
.tab {
  position: fixed; z-index: 40;
  top: 10px; left: 10px;
  padding: 8px 12px 7px;
  background: var(--paper);
  border: 2px solid var(--ink);
  font-size: clamp(15px, 0.85rem + 0.45vw, 22px);
  text-decoration: none;
  transform: translateY(-170%);
  transition: transform 0.45s var(--out);
}
.tab.is-on { transform: none; }

/* dock */
.dock {
  position: fixed; z-index: 40;
  right: max(10px, env(safe-area-inset-right));
  bottom: max(10px, env(safe-area-inset-bottom));
  display: flex; gap: 6px;
  transition: transform 0.35s var(--out);
}
.dock.is-away { transform: translateY(calc(100% + 24px)); }
.dock__btn {
  display: inline-flex; align-items: center; gap: 10px;
  min-width: 46px; min-height: 46px;
  padding: 0 14px;
  background: var(--ink); color: var(--paper);
  border: 2px solid var(--paper);
  font: 700 0.9375rem/1 var(--f-body);
  cursor: pointer;
}
.dock__btn:focus-visible { outline: 3px solid var(--coral-hi); outline-offset: 2px; }
.dock__count { font: 800 1.0625rem/1 var(--f-body); font-variant-numeric: tabular-nums; }
.dock__count b { display: inline-block; font-weight: 900; }
.dock__count .of { margin: 0 -0.04em; }
.dock__count.is-bump b { animation: bump 0.6s var(--out); }
@keyframes bump {
  0% { transform: translateX(0) }
  20% { transform: translateX(5px) skewX(-12deg); color: var(--coral-hi) }
  45% { transform: translateX(-2px) }
  100% { transform: none }
}
.spk { width: 22px; height: 22px; flex: none; overflow: visible; }
.spk__body { fill: currentColor; }
.spk__w, .spk__x { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.spk__w { transform-origin: 12px 12px; transition: opacity 0.3s; }
.spk__w1 { transform: scale(calc(0.85 + var(--lvl, 0) * 0.25)); }
.spk__w2 { transform: scale(calc(0.8 + var(--lvl, 0) * 0.35)); opacity: calc(0.45 + var(--lvl, 0) * 0.55); }
.spk__x { display: none; }
.dock__music[aria-pressed="false"] .spk__w { display: none; }
.dock__music[aria-pressed="false"] .spk__x { display: inline; }
.note.dock__say {
  --pen-c: var(--pen-red);
  position: fixed; z-index: 41;
  right: 14px; bottom: 70px;
  max-width: 17ch;
  margin: 0;
  background: var(--paper);
  border: 2px solid var(--ink);
  padding: 10px 14px 12px;
  pointer-events: none;
}

/* buttons: the cut */
.btn {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 28px;
  border: 0; background: none;
  color: var(--btn-fg);
  font: 700 1.125rem/1 var(--f-body);
  text-decoration: none; white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none; -webkit-user-select: none;
}
.btn::before, .btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--btn-bg);
}
.btn::before { clip-path: polygon(0 0, 100% 0, 100% 80%, 0 89%); }
.btn::after {
  clip-path: polygon(0 93%, 100% 84%, 100% 100%, 0 100%);
  transform: translateX(6px);
  transition: transform 0.3s var(--out);
}
.btn:hover::after { transform: translateX(13px); }
.btn:active::after { transform: translateX(1px); transition-duration: 0.06s; }
.btn:disabled { cursor: not-allowed; opacity: 0.45; }
.btn:disabled::after { transform: translateX(6px); }
.btn--quiet { color: var(--fg); padding: 0 20px; min-height: 48px; border: 3px solid currentColor; }
.btn--quiet::before, .btn--quiet::after { display: none; }
.btn--quiet:hover { background: var(--fg); color: var(--bg); }
.btn--quiet[aria-pressed="true"] { background: var(--fg); color: var(--bg); }

/* the teacher's pen */
.note {
  font-family: var(--f-hand);
  font-weight: 620;
  font-size: var(--t-note);
  line-height: 1.16;
  color: var(--pen-c);
  font-variation-settings: "INFM" 60, "BNCE" 30, "SPAC" 0;
  max-width: 24ch;
  transform: rotate(-1.4deg);
  transform-origin: 0 50%;
  text-wrap: balance;
}
.note s { text-decoration: none; }
.note .w { display: inline-block; white-space: nowrap; }
.pen-ready .note:not(.is-written) .c { opacity: 0; }
.note.is-writing .c { animation: ink 0.09s linear var(--t, 0s) both; }
@keyframes ink {
  from { opacity: 0; }
  to { opacity: 1; }
}
.pen-layer {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 5;
}
.pen-layer path {
  fill: var(--pen-c);
  stroke: none;
}

/* sections */
.lesson, .finale {
  position: relative;
  padding-block: clamp(96px, 14vh, 176px);
}
.wrap {
  position: relative;
  width: min(100% - 2 * var(--gut), var(--maxw));
  margin-inline: auto;
}
.cut-top {
  --cut-h: clamp(36px, 7vw, 110px);
  margin-top: calc(-1 * var(--cut-h));
  padding-top: calc(var(--cut-h) + clamp(80px, 12vh, 150px));
  clip-path: polygon(0 var(--cut-h), 100% 0, 100% 100%, 0 100%);
}
.q {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: var(--t-q);
  font-stretch: 108%;
  line-height: 1.05;
  letter-spacing: -0.012em;
  max-width: 16ch;
  margin-bottom: var(--sp-4);
  overflow-wrap: break-word;
  min-width: 0;
}
.q--xl { font-size: clamp(2.6rem, 1rem + 6.2vw, 7.6rem); max-width: 14ch; }
.lede { font-size: calc(var(--t-body) * 1.1); max-width: 50ch; }
.big {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-big);
  font-stretch: 100%;
  line-height: 1.14;
  letter-spacing: -0.006em;
  max-width: 28ch;
  margin-block: var(--sp-4) var(--sp-3);
}
.strong { font-weight: 800; font-size: calc(var(--t-body) * 1.2); max-width: 40ch; }
.small { font-size: var(--t-small); color: var(--soft); }
.sub {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(1.4rem, 1rem + 1.4vw, 2.2rem);
  font-stretch: 112%;
  margin: var(--sp-5) 0 var(--sp-3);
}
.cols {
  display: grid;
  gap: var(--sp-2) var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
  max-width: 1120px;
}
.cols h3 { font: 800 1.3rem/1.2 var(--f-display); font-stretch: 112%; margin-bottom: 10px; }
.claims {
  list-style: none;
  padding: 0;
  margin: var(--sp-5) 0 var(--sp-4);
  display: grid;
  gap: var(--sp-4);
  max-width: 980px;
}
.claims li {
  position: relative;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-big);
  line-height: 1.14;
  max-width: 30ch;
}
.claims b { font-weight: 900; }
@media (min-width: 900px) {
  .claims--two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5) var(--sp-6); max-width: 1180px; }
  .claims--two li { max-width: 22ch; }
}
.fine { margin-top: var(--sp-4); max-width: 64ch; }
.fine summary {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 44px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.fine summary::-webkit-details-marker { display: none; }
.fine summary::before {
  content: "";
  width: 16px; height: 16px; flex: none;
  background:
    linear-gradient(currentColor, currentColor) 50% 50% / 100% 3px no-repeat,
    linear-gradient(currentColor, currentColor) 50% 50% / 3px 100% no-repeat;
  transition: transform 0.3s var(--out);
}
.fine[open] summary::before { transform: rotate(45deg); }
.fine p { margin: var(--sp-1) 0 0; color: var(--soft); }
.fine summary:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }

.ready .reveal:not(.is-open) { display: none; }
.reveal.is-open { animation: wipe 0.7s var(--out) both; }
@keyframes wipe {
  from { clip-path: inset(0 0 100% 0); transform: translateY(-12px); }
  to { clip-path: inset(0 0 -10% 0); transform: none; }
}

/* range inputs */
.range {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 60px;
  margin: var(--sp-2) 0;
  background: transparent;
  cursor: pointer;
  touch-action: pan-y;
}
.range::-webkit-slider-runnable-track { height: 6px; background: var(--track); }
.range::-moz-range-track { height: 6px; background: var(--track); }
.range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 30px; height: 56px;
  margin-top: -25px;
  background: var(--thumb);
  border: 3px solid var(--bg);
  border-radius: 0;
}
.range::-moz-range-thumb {
  width: 30px; height: 56px;
  background: var(--thumb);
  border: 3px solid var(--bg);
  border-radius: 0;
}
.range:focus-visible { outline: 3px solid var(--fg); outline-offset: 6px; }
.range:active::-webkit-slider-thumb { transform: skewX(-10deg); }

/* ---------- hero ---------- */
.hero {
  --gl-top-bg: var(--paper);
  --gl-top-ink: var(--ink);
  --gl-low-bg: var(--coral);
  --gl-low-ink: var(--ink);
  --gl-gap: var(--ink);
  --gl-top-pos: 0;
  --gl-low-pos: 0;
  position: relative;
  min-height: 100svh;
  background: var(--gl-gap);
  color: var(--gl-top-ink);
  overflow: clip;
  --s: 4vw;
  --y0u: 58%;
  --y1u: 52%;
  --y0l: 61%;
  --y1l: 55%;
}
.hero__fb, .hero__gl, .hero__video { position: absolute; }
.hero__fb { inset: 0; z-index: 0; }
.hero__fb-up, .hero__fb-lo { position: absolute; inset: 0; }
.hero__fb-up { background: var(--gl-top-bg); clip-path: polygon(0 0, 100% 0, 100% var(--y1u), 0 var(--y0u)); }
.hero__fb-lo { background: var(--gl-low-bg); clip-path: polygon(0 var(--y0l), 100% var(--y1l), 100% 100%, 0 100%); transform: translateX(var(--s)); }
.hero__video {
  z-index: 0;
  left: var(--fx, 60%); top: var(--fy, 0); width: var(--fw, 40%); height: var(--fh, 100%);
  object-fit: cover;
  filter: grayscale(1) contrast(1.35) brightness(1.15);
  mix-blend-mode: multiply;
}
.hero__gl { inset: 0; z-index: 1; width: 100%; height: 100%; opacity: 0; transition: opacity 0.6s linear; }
.gl-on .hero__gl { opacity: 1; }
.hero__inner {
  position: relative; z-index: 2;
  display: grid;
  min-height: 100svh;
  padding: max(var(--gut), 18px) var(--gut) calc(var(--gut) + 54px);
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(150px, 1fr) auto auto;
  grid-template-areas: "logo" "frame" "hl" "talk";
  row-gap: clamp(14px, 2.4vh, 26px);
}
/* the wordmark with the sek.si credit standing on its baseline. Both are sized from the row's width
   (wordmark plus credit is about 10.4em), so the pair always fits on one line */
.hero__logo {
  grid-area: logo;
  container-type: inline-size;
  --wm: clamp(30px, 8.6vw, 60px);
  --fg: var(--gl-top-ink);
  line-height: 1;
  white-space: nowrap;
}
.hero__logo h1, .hero__by { display: inline; font-size: var(--wm); font-size: min(var(--wm), 100cqi / 10.5); }
/* far enough right that the glitch's slipped half never touches "by" */
.hero__by { margin-left: 0.42em; }
.hero__by-t { font: 600 max(13px, 0.3em)/1 var(--f-body); }
.hero__by a { display: inline-block; margin-left: 0.14em; color: inherit; }
/* 1.3734em puts the .SI box exactly at the wordmark's cap height */
.hero__by svg { width: auto; height: 1.3734em; aspect-ratio: 112.2 / 181; }
.hero__by .sek-r { display: none; }
.hero__frame { grid-area: frame; margin-inline: calc(-1 * var(--gut)); min-height: 150px; }
.hl {
  grid-area: hl;
  position: relative;
  font-family: var(--f-display);
  font-weight: 900;
  font-size: var(--hl-size, clamp(2.4rem, 10vw, 8.2rem));
  line-height: 0.9;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--gl-top-ink);
  cursor: default;
  user-select: none; -webkit-user-select: none;
}
.hl__row { position: relative; display: flex; align-items: flex-end; height: 0.9em; white-space: nowrap; }
.hl__line { display: inline-block; font-size: var(--hl-fit, 1em); line-height: 0.9; font-stretch: var(--fs, 100%); white-space: pre; }
.hl__gap { height: var(--hl-gap, 0.5em); }
.hl__low { translate: var(--s) 0; color: var(--gl-low-ink); }
.hl__row[data-row="2"] { transition: transform 0.4s var(--fall); }
.hl__row[data-row="2"].is-lifted {
  transform: translate(calc(-1 * var(--s)), calc(-0.9em - var(--hl-gap, 0.5em)));
  transition: none;
}
.hl__line.has-caret::after {
  content: "";
  display: inline-block;
  width: 0.07em; height: 0.74em;
  margin-left: 0.07em;
  background: currentColor;
  vertical-align: -0.02em;
  animation: caret 0.9s steps(1, end) infinite;
}
@keyframes caret { 50% { opacity: 0; } }
.hero__talk {
  grid-area: talk;
  translate: var(--s) 0;
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-2) var(--sp-4);
  --pen-c: var(--ink);
  --btn-bg: var(--ink);
  --btn-fg: var(--paper);
  padding-right: var(--s);
}
.hero__talk .note { margin: 0; max-width: 21ch; }
/* the film's own controls, in its top right corner: theme switch, then pause */
.hero__ctl {
  position: absolute; z-index: 3;
  top: calc(var(--fy, 0px) + 14px);
  right: calc(100% - var(--fx, 60%) - var(--fw, 40%) + 14px);
  display: flex; gap: 6px;
}
.hero__still, .hero__theme {
  height: 44px;
  display: grid; place-items: center;
  border: 2px solid var(--ink);
  background: var(--paper); color: var(--ink);
  cursor: pointer;
}
.hero__still { width: 44px; }
.hero__theme { min-width: 44px; padding: 0 12px; font: 700 0.9375rem/1 var(--f-body); }
.hero__still:hover, .hero__theme:hover { background: var(--ink); color: var(--paper); }
.still-ico { position: relative; width: 14px; height: 16px; }
.still-ico::before, .still-ico::after { content: ""; position: absolute; top: 0; bottom: 0; width: 4px; background: currentColor; }
.still-ico::before { left: 1px; }
.still-ico::after { right: 1px; }
.hero__still[aria-pressed="true"] .still-ico::before { left: 2px; width: 0; height: 0; background: none; border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent currentColor; }
.hero__still[aria-pressed="true"] .still-ico::after { display: none; }

@media (min-width: 900px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1fr) min(38vw, 56svh);
    grid-template-rows: auto 1fr auto auto;
    grid-template-areas: "logo frame" ". frame" "hl frame" "talk frame";
    column-gap: clamp(24px, 3vw, 56px);
    padding-bottom: var(--gut);
  }
  .hero__logo { --wm: clamp(40px, 4.4vw, 86px); }
  /* the top padding is deep enough here for the tall logo to rise into it, so the row keeps the wordmark's height */
  .hero__by a { margin-top: -0.5em; }
  .hero__frame { margin: calc(-1 * max(var(--gut), 18px)) calc(-1 * var(--gut)) calc(-1 * var(--gut)) 0; }
}

/* ---------- 1 products ---------- */
.pick { margin-top: var(--sp-5); display: grid; gap: 0; }
.pick__row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: baseline;
  gap: 4px var(--sp-5);
  width: 100%;
  padding: clamp(18px, 2.6vw, 30px) 0;
  border: 0;
  border-top: 4px solid var(--fg);
  background: none;
  text-align: left;
  cursor: pointer;
}
.pick__row:last-child { border-bottom: 4px solid var(--fg); }
.pick__name {
  justify-self: start;
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(2.1rem, 0.8rem + 3.6vw, 4.7rem);
  font-stretch: 116%;
  line-height: 0.95;
  letter-spacing: -0.015em;
  transition: font-stretch 0.5s var(--out), transform 0.5s var(--out);
}
.pick__info { display: grid; gap: 8px; align-content: start; }
.pick__sub { font-weight: 700; color: var(--soft); }
.pick__more { display: none; max-width: 46ch; }
.pick__row:hover .pick__name { font-stretch: 126%; }
.l-products.is-picked .pick__row { cursor: default; }
.l-products.is-picked .pick__row:hover .pick__name { font-stretch: 118%; }
.l-products.is-picked .pick__more { display: block; animation: wipe 0.6s var(--out) both; }
.pick__row.is-chosen .pick__name { color: var(--pen-c); }
.l-products .note--react { margin-top: var(--sp-4); max-width: 30ch; }
.l-products .note--side { margin-top: var(--sp-5); margin-left: clamp(0px, 8vw, 120px); max-width: 16ch; }
@media (min-width: 900px) {
  .pick__row { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; }
  .pick__info { padding-top: 0.5em; }
  /* the side remark goes under the descriptions, so its arrow has a clear path up to the loop */
  .l-products .wrap { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: var(--sp-5); align-items: start; }
  .l-products .wrap > :not(.note) { grid-column: 1 / -1; }
  .l-products .note--side { grid-column: 2; margin: var(--sp-5) 0 0; }
}

/* ---------- 2 salt ---------- */
.l-salt .q { max-width: 14ch; }
.salt__top { display: grid; gap: var(--sp-3) var(--sp-6); align-items: end; }
@media (min-width: 900px) {
  .salt__top { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); }
  .salt__top .salt__read { grid-template-columns: 1fr; margin: 0 0 var(--sp-3); }
}
.salt { position: relative; margin-top: var(--sp-4); }
.salt__line { width: 100%; height: clamp(150px, 24vw, 300px); overflow: visible; }
.salt__line path { fill: none; stroke: var(--fg); stroke-width: 6; stroke-linejoin: miter; stroke-linecap: square; vector-effect: non-scaling-stroke; }
.salt__ends { display: flex; justify-content: space-between; font: 800 1.15rem/1 var(--f-display); font-stretch: 120%; margin-top: var(--sp-3); }
.salt__read {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: var(--sp-3);
  margin: var(--sp-3) 0 0;
}
.salt__read div { padding-top: 12px; border-top: 3px solid var(--fg); }
.salt__read dt { color: var(--soft); font-size: var(--t-small); }
.salt__read dd { margin: 4px 0 0; font: 800 clamp(1.3rem, 1rem + 1vw, 1.9rem)/1.1 var(--f-display); font-stretch: 110%; }
.l-salt .note--prompt { margin: 0 0 var(--sp-2); }

/* ---------- 3 pods ---------- */
.l-pods { --stick: var(--paper); --stick-tip: var(--ink); --stick-edge: var(--ink); }
.pods {
  display: grid;
  gap: 0 var(--sp-5);
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "q" "pile" "ctrl" "text";
}
.pods__q { grid-area: q; }
.pods__ctrl { grid-area: ctrl; }
.pods__text { grid-area: text; }
.pods__pile { grid-area: pile; position: relative; height: clamp(200px, 60vw, 300px); margin-bottom: var(--sp-2); }
.pile { position: absolute; inset: 0; width: 100%; height: 100%; }
.stepper { display: flex; align-items: stretch; gap: 0; margin: var(--sp-3) 0 var(--sp-3); }
.stepper .stepper__b { height: auto; min-height: 64px; }
.stepper__v {
  display: flex; flex-direction: column; justify-content: center;
  min-width: 170px; padding: 6px 22px;
  border: 4px solid var(--btn-bg);
  font-variant-numeric: tabular-nums;
}
.stepper__v b { font: 900 2.4rem/1 var(--f-display); font-stretch: 120%; }
.stepper__v span { font-size: var(--t-small); font-weight: 700; }
.pods__sum { font: 800 var(--t-big)/1.12 var(--f-display); font-stretch: 104%; max-width: 22ch; font-variant-numeric: tabular-nums; }
@media (min-width: 900px) {
  .pods {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    grid-template-areas: "q pile" "ctrl pile" "text pile";
  }
  .pods__pile { position: sticky; top: 12vh; align-self: start; height: min(66vh, 600px); margin: 0; }
}

/* ---------- 4 brain ---------- */
.age { display: flex; align-items: center; gap: clamp(12px, 2vw, 28px); }
.age__v {
  min-width: 2.1ch;
  text-align: center;
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(7rem, 4rem + 17vw, 20rem);
  /* on a phone the two buttons, the gaps and 2.1ch of number have to share the column */
  font-size: min(clamp(7rem, 4rem + 17vw, 20rem), calc((100vw - 2 * var(--gut) - 160px) / 1.8));
  font-stretch: 130%;
  line-height: 0.82;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  cursor: ew-resize;
  touch-action: pan-y;
  user-select: none; -webkit-user-select: none;
}
.age__v:focus-visible { outline-offset: 10px; }
.age__v.is-dragging { color: var(--pen-c); }
.stepper__b, .age__b {
  position: relative;
  width: 64px; height: 64px;
  border: 0;
  background: var(--btn-bg); color: var(--bg);
  cursor: pointer;
}
.stepper__b::before, .stepper__b::after, .age__b::before, .age__b::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 24px; height: 5px;
  margin: -2.5px 0 0 -12px;
  background: currentColor;
}
.stepper__b[data-step="1"]::after, .age__b[data-age="1"]::after { width: 5px; height: 24px; margin: -12px 0 0 -2.5px; }
.stepper__b[data-step="-1"]::after, .age__b[data-age="-1"]::after { display: none; }
.stepper__b:hover, .age__b:hover { color: var(--btn-fg); }
.stepper__b:active, .age__b:active { transform: translateY(2px); }
.l-brain .note--prompt { margin: var(--sp-2) 0 var(--sp-1); }
.age__top { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3) var(--sp-5); align-items: center; }
.age__top .q { margin-bottom: var(--sp-2); }
@media (min-width: 900px) {
  .age__top { grid-template-columns: minmax(0, 1fr) auto; }
}
.build { margin: var(--sp-4) 0 var(--sp-2); max-width: 1100px; }
.build__bar { position: relative; height: 34px; background: var(--paper); }
.build__fill {
  position: absolute; inset: 0 37.5% 0 0;
  background: repeating-linear-gradient(-45deg, var(--fg) 0 5px, transparent 5px 13px);
}
.build__you {
  position: absolute; top: -12px; bottom: -12px;
  left: clamp(0%, calc(var(--age, 16) / 40 * 100%), 100%);
  width: 8px; margin-left: -4px;
  background: var(--coral);
  transition: left 0.5s var(--out);
}
.build__scale { position: relative; display: flex; justify-content: space-between; margin-top: 10px; font-size: var(--t-small); font-weight: 700; }
.build__scale span:nth-child(2) { position: absolute; left: 62.5%; transform: translateX(-50%); white-space: nowrap; }

/* ---------- 5 lungs ---------- */
.l-lungs .q { margin-bottom: var(--sp-2); }
.breath { display: grid; justify-items: start; gap: var(--sp-3); margin-top: var(--sp-3); }
.breath__word {
  max-width: none;
  margin: 0;
  font-family: var(--f-display);
  font-weight: var(--bw, 360);
  font-size: var(--bsize, clamp(4rem, 15vw, 15rem));
  font-stretch: var(--bs, 60%);
  line-height: 0.86;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: var(--fg);
}
.btn--hold { touch-action: none; }
.btn--hold.is-holding::after { transform: translateX(34px); transition-duration: 4s; }
.breath__state { font: 600 var(--t-note)/1.2 var(--f-hand); color: var(--pen-c); min-height: 1.3em; margin: 0; }

/* ---------- 6 heart ---------- */
.l-heart { overflow: clip; }
.l-heart > .wrap > .note--prompt { margin: 0 0 var(--sp-3); }
.ecg-band { position: relative; height: clamp(240px, 38vh, 420px); margin-bottom: var(--sp-4); }
.ecg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ecg__read {
  position: absolute; right: var(--gut); top: 0;
  display: grid; gap: 10px; justify-items: end;
  margin: 0;
  padding: 6px 0 12px 18px;
  background: var(--bg);
  box-shadow: 0 0 0 10px var(--bg);
  text-align: right;
  font-size: var(--t-small);
  color: var(--soft);
}
.ecg__read span { display: block; }
.ecg__read b {
  display: block;
  font: 800 clamp(1.7rem, 1.1rem + 1.6vw, 2.7rem)/1 var(--f-display);
  font-stretch: 112%;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.ecg__read b.is-beat { animation: beat 0.3s var(--out); }
@keyframes beat { 30% { transform: translateY(-2px); } }
.ecg__plus { position: absolute; right: calc(var(--gut) + clamp(170px, 16vw, 240px)); top: 0; margin: 0; max-width: 11ch; text-align: right; padding: 4px 8px; background: var(--bg); }
.heart__act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); }
.heart__act .small { margin: 0; max-width: 38ch; }
.heart__q { margin-top: var(--sp-6); }

/* ---------- 7 metals ---------- */
.l-metals { padding-top: 0; --dust: rgb(13 24 45 / 0.18); --lens: var(--paper); --lens-ink: var(--ink); --lens-rim: var(--ink); }
.cloud { position: relative; height: max(560px, 92svh); }
.cloud__c { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: pan-y; }
@media (pointer: fine) { .cloud__c { cursor: none; } }
.cloud__head { position: relative; z-index: 2; padding-top: clamp(96px, 14vh, 176px); pointer-events: none; }
.cloud__head .btn, .cloud__head .note { pointer-events: auto; }
.cloud__head .note { margin-bottom: var(--sp-2); }
.l-metals .reveal { padding-top: var(--sp-4); }
.l-metals .claims { margin-top: var(--sp-4); }

/* ---------- 8 cancer ---------- */
.ruler { position: relative; margin: var(--sp-4) 0 var(--sp-3); max-width: 1180px; }
.ruler__track { position: relative; height: 70px; }
.ruler__data, .ruler__zone { position: absolute; display: block; }
.ruler__data { left: 15px; width: calc((100% - 30px) * 0.375); bottom: 0; height: 26px; background: var(--fg); }
.ruler__zone {
  left: calc(15px + (100% - 30px) * 0.5); right: 15px; bottom: 0; height: 26px;
  background: repeating-linear-gradient(45deg, var(--pen-c) 0 3px, transparent 3px 11px);
  border: 3px solid var(--pen-c);
}
.range--ruler { position: absolute; left: 0; right: 0; top: 13px; margin: 0; z-index: 1; }
.range--ruler::-webkit-slider-runnable-track { background: transparent; }
.range--ruler::-moz-range-track { background: transparent; }
.ruler__ticks { position: relative; height: 1.4em; margin-top: 10px; }
.ruler__ticks span { position: absolute; top: 0; transform: translateX(-50%); }
.ruler__ticks { font: 700 var(--t-small)/1 var(--f-body); font-variant-numeric: tabular-nums; }
.ruler__legend { display: flex; flex-wrap: wrap; gap: 8px var(--sp-4); margin-top: var(--sp-2); font-size: var(--t-small); font-weight: 700; }
.ruler__legend span::before { content: ""; display: inline-block; width: 22px; height: 12px; margin-right: 8px; vertical-align: -1px; }
.ruler__legend .k-data::before { background: var(--fg); }
.ruler__legend .k-zone::before { background: repeating-linear-gradient(45deg, var(--pen-c) 0 3px, transparent 3px 8px); outline: 2px solid var(--pen-c); outline-offset: -2px; }
.l-cancer .q { max-width: 18ch; }
@media (min-width: 900px) {
  .cancer__head { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
  .cancer__head .note { transform: rotate(1.4deg); transform-origin: 100% 50%; }
}
.qmark { position: absolute; font: 700 2.4rem/1 var(--f-hand); color: var(--pen-c); pointer-events: none; }

/* ---------- 9 evali ---------- */
.l-evali .q { max-width: 20ch; font-size: clamp(2rem, 1rem + 3.2vw, 4.2rem); margin: 0; }
.evali__top { display: grid; gap: var(--sp-5) var(--sp-6); align-items: start; margin-bottom: var(--sp-4); }
@media (min-width: 900px) {
  .evali__top { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); }
}
.slip {
  --bg: var(--paper); --fg: var(--ink); --soft: #3d4b62; --pen-c: var(--pen-red);
  --thumb: var(--coral); --track: var(--ink); --btn-bg: var(--ink); --btn-fg: var(--paper);
  display: grid; gap: 6px; justify-items: start;
  padding: clamp(20px, 3vw, 34px);
  background: var(--paper); color: var(--ink);
  transform: rotate(1.2deg);
}
.slip__label { margin: 0; font-weight: 700; color: var(--soft); }
.guess__v {
  font-family: var(--f-hand);
  font-weight: 700;
  font-size: clamp(3rem, 2rem + 3.4vw, 5.2rem);
  line-height: 1;
  color: var(--pen-red);
  font-variation-settings: "INFM" 70, "BNCE" 20, "SPAC" 0;
  transform: rotate(-2deg);
}
.guess .range { width: 100%; }
.guess.is-locked .range { opacity: 0.4; pointer-events: none; }
.choose { display: grid; gap: 10px; max-width: 760px; }
.choose__b {
  min-height: 64px;
  padding: 16px 20px;
  text-align: left;
  background: none;
  border: 3px solid var(--fg);
  font: 700 1.15rem/1.3 var(--f-body);
  cursor: pointer;
}
.choose__b:hover { background: var(--fg); color: var(--bg); }
.choose.is-done .choose__b { cursor: default; }
.choose.is-done .choose__b:hover { background: none; color: inherit; }
.choose__b.is-right { background: var(--fg); color: var(--bg); }
.choose.is-done .choose__b.is-right:hover { background: var(--fg); color: var(--bg); }

/* ---------- 10 myths ---------- */
.quiz { position: relative; margin-top: var(--sp-4); display: grid; gap: var(--sp-4) var(--sp-6); align-items: start; }
.tally { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 46px)); gap: 6px; }
.tally li {
  display: grid; place-items: center;
  aspect-ratio: 1;
  border: 3px solid var(--fg);
  font: 800 0.95rem/1 var(--f-body);
  color: var(--fg);
}
.tally li.is-now { background: var(--fg); color: var(--bg); }
@media (min-width: 900px) {
  .quiz { grid-template-columns: minmax(0, 900px) auto; }
  .quiz .sheet { grid-row: 1; grid-column: 1; }
  .tally { grid-row: 1; grid-column: 2; grid-template-columns: 46px; gap: 8px; margin-top: var(--sp-3); }
  .l-myths [data-score] { grid-column: 1; }
}
.sheet {
  --bg: var(--paper); --fg: var(--ink); --soft: #3d4b62; --pen-c: var(--pen-red); --btn-bg: var(--ink); --btn-fg: var(--paper);
  position: relative;
  max-width: 900px;
  padding: clamp(24px, 4vw, 56px);
  background: var(--paper);
  color: var(--ink);
  transform: rotate(-0.8deg);
}
.sheet__n { font-weight: 700; color: var(--soft); font-variant-numeric: tabular-nums; }
.sheet__claim {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(1.9rem, 1rem + 3vw, 3.8rem);
  font-stretch: 106%;
  line-height: 1.04;
  max-width: 20ch;
  margin-bottom: var(--sp-4);
}
.sheet__ans { display: flex; flex-wrap: wrap; gap: 14px; }
.sheet__ans .btn { min-width: 150px; }
.sheet__ans.is-done .btn { pointer-events: none; }
.sheet__ans.is-done .btn:not(.is-picked):not(.is-right) { opacity: 0.35; }
.sheet__ans .btn.is-picked::before, .sheet__ans .btn.is-picked::after { background: transparent; }
.sheet__ans .btn.is-picked { color: var(--fg); box-shadow: inset 0 0 0 3px var(--fg); }
.sheet__out { margin-top: var(--sp-4); }
.sheet__verdict { font: 800 1.6rem/1.1 var(--f-display); font-stretch: 112%; margin-bottom: 10px; }
.l-myths [data-score] { margin-top: var(--sp-4); max-width: 26ch; }

/* ---------- 11 pregnancy ---------- */
.l-preg { padding-block: clamp(80px, 12vh, 150px); }
.preg { display: grid; gap: var(--sp-4) var(--sp-6); align-items: start; }
.preg__q { font-size: clamp(2.6rem, 1rem + 5vw, 6.6rem); max-width: none; margin: 0; line-height: 0.95; overflow-wrap: normal; }
.preg__body > p:first-child { font-size: calc(var(--t-body) * 1.12); }
.preg .note { margin-top: var(--sp-4); }
@media (min-width: 900px) {
  .preg { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .preg__body { padding-top: 0.6em; }
}

/* ---------- 12 kids ---------- */
.q--small { font-size: clamp(1.5rem, 1rem + 1.4vw, 2.3rem); max-width: 28ch; margin-bottom: var(--sp-3); }
.todo { display: grid; gap: 14px; max-width: 1120px; }
.todo__i {
  position: relative;
  display: flex; align-items: center;
  min-height: 96px;
  padding: 18px 24px 18px 108px;
  border: 4px solid var(--fg);
  background: transparent;
  color: var(--fg);
  text-align: left;
  font: 900 clamp(1.45rem, 0.9rem + 2.2vw, 3rem)/1.05 var(--f-display);
  font-stretch: 106%;
  cursor: pointer;
}
.todo__i::before {
  content: "";
  position: absolute; left: 26px; top: 50%;
  width: 50px; height: 50px; margin-top: -25px;
  border: 4px solid var(--fg);
}
.todo__i:hover { background: rgb(13 24 45 / 0.08); }
.todo__i[aria-pressed="true"] { background: var(--paper); }
.l-kids .note { margin-top: var(--sp-4); }

/* ---------- 13 dual ---------- */
.dual { display: grid; gap: var(--sp-4) var(--sp-6); align-items: end; max-width: 1180px; }
.dual__q { font-family: var(--f-display); font-weight: 800; font-size: var(--t-big); font-stretch: 104%; line-height: 1.1; max-width: 24ch; }
.dual__v { display: block; font: 900 clamp(2.4rem, 1.8rem + 2.4vw, 4.2rem)/1 var(--f-display); font-stretch: 116%; font-variant-numeric: tabular-nums; }
.gauge { position: relative; height: 64px; background: #d4dfe7; }
.gauge__fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--risk, 0.92) * 100%); background: var(--fg); transition: width 0.6s var(--out), height 0.6s var(--out); }
.gauge__label { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--paper); font-weight: 800; mix-blend-mode: difference; }
.dual__line { margin-bottom: var(--sp-6); }
@media (min-width: 900px) {
  .dual { grid-template-columns: minmax(0, 1fr) 150px; }
  .gauge { height: min(52vh, 420px); }
  .gauge__fill { top: auto; right: 0; width: auto; height: calc(var(--risk, 0.92) * 100%); }
  .gauge__label { left: 50%; top: auto; bottom: 14px; transform: translateX(-50%); width: 7em; text-align: center; }
}

/* ---------- 14 out ---------- */
.wave { position: relative; max-width: 1180px; margin-top: var(--sp-4); }
.wave__plot { position: relative; padding-inline: 20px; }
.wave__inner { position: relative; }
.range--plot { position: absolute; top: 0; bottom: 0; left: 20px; right: 20px; width: calc(100% - 40px); height: 100%; margin: 0; opacity: 0; cursor: ew-resize; z-index: 2; }
.wave__plot:focus-within { outline: 3px solid var(--fg); outline-offset: 10px; }
.wave__plot:has(.range--plot:focus:not(:focus-visible)) { outline: none; }
.wave__svg { width: 100%; height: clamp(150px, 20vw, 260px); overflow: visible; }
.wave__svg path { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.wave__svg .w-done { stroke: var(--fg); stroke-width: 5; }
.wave__svg .w-todo { stroke: var(--fg); stroke-width: 2; stroke-dasharray: 2 9; opacity: 0.55; }
.wave__svg .w-dot { fill: var(--coral); stroke: var(--fg); stroke-width: 3; vector-effect: non-scaling-stroke; }
.wave__dot {
  position: absolute;
  width: 22px; height: 22px;
  margin: -11px 0 0 -11px;
  background: var(--coral);
  border: 4px solid var(--fg);
  pointer-events: none;
}
.wave__day { display: block; font: 900 clamp(2.2rem, 1.6rem + 2vw, 3.6rem)/1 var(--f-display); font-stretch: 116%; font-variant-numeric: tabular-nums; margin-top: var(--sp-3); }
.wave__note { min-height: 2.4em; margin-top: var(--sp-1); max-width: 30ch; }
.bars { display: grid; gap: 14px; margin: var(--sp-4) 0; max-width: 960px; }
.bars__r { display: grid; grid-template-columns: minmax(0, 15ch) minmax(0, 1fr) 4ch; gap: 16px; align-items: center; }
.bars__l { font-weight: 700; }
.bars__b { position: relative; height: 34px; }
.bars__b::before {
  content: ""; position: absolute; inset: 0 auto 0 0;
  width: calc(var(--v) * 100% / 0.51);
  background: repeating-linear-gradient(-45deg, var(--fg) 0 4px, transparent 4px 9px);
  border: 3px solid var(--fg);
  transform-origin: 0 50%;
  transform: scaleX(var(--grow, 0));
  transition: transform 1.2s var(--out);
}
.bars.is-drawn .bars__b::before { --grow: 1; }
.bars__n { font: 900 1.4rem/1 var(--f-display); font-variant-numeric: tabular-nums; }

/* ---------- finale ---------- */
.finale { transition: background-color 1.4s linear; overflow: clip; }
.finale.is-free { --bg: var(--sky); --pen-c: var(--pen-deep); }
.breaker { margin-top: var(--sp-6); position: relative; }
.breaker__ink { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 3; }
.breaker__ink path { fill: none; stroke: var(--fg); stroke-width: 5px; stroke-linecap: round; stroke-linejoin: round; }
.breaker__mark {
  display: inline-block;
  position: relative;
  margin: var(--sp-3) 0 var(--sp-4);
  font-family: var(--f-mark);
  font-weight: 900;
  font-size: var(--bm, 12vw);
  line-height: 1.06;
  letter-spacing: -0.035em;
  white-space: nowrap;
  color: var(--fg);
  cursor: crosshair;
  touch-action: none;
  user-select: none; -webkit-user-select: none;
}
.breaker__top, .breaker__bot { display: block; }
.breaker__top { clip-path: polygon(0 0, 100% 0, 100% 44%, 0 58%); transition: transform 1.1s var(--out); }
.breaker__bot {
  position: absolute; inset: 0;
  clip-path: polygon(0 60%, 100% 46%, 100% 100%, 0 100%);
  transform: translateX(0.07em);
  transition: transform 1.4s var(--out);
}
.breaker i { display: inline-block; width: 0.16em; height: 0.16em; margin: 0 0.09em; background: var(--paper); }
.finale.is-broken .breaker__top { transform: translate(-0.04em, -0.1em) rotate(-1.2deg); }
.finale.is-broken .breaker__bot { transform: translate(0.62em, 0.14em) rotate(0.8deg); }
.finale.is-broken .breaker .btn,
.finale.is-broken .breaker .note--prompt { visibility: hidden; }
.after { display: grid; gap: var(--sp-5) var(--sp-6); align-items: start; margin-top: var(--sp-4); }
.after .big { max-width: 24ch; margin-top: 0; }
@media (min-width: 900px) {
  .after { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
}
.report {
  --bg: var(--paper); --fg: var(--ink); --soft: #3d4b62; --pen-c: var(--pen-red);
  position: relative;
  max-width: 620px;
  margin: 0;
  padding: clamp(24px, 4vw, 44px);
  background: var(--paper);
  color: var(--ink);
  transform: rotate(0.9deg);
}
.report h3 { font: 900 2rem/1 var(--f-display); font-stretch: 120%; margin-bottom: var(--sp-3); }
.report__list { margin: 0 0 var(--sp-3); display: grid; gap: 10px; }
.report__list div { display: flex; justify-content: space-between; gap: var(--sp-3); border-bottom: 2px solid var(--fg); padding-bottom: 8px; }
.report__list dt { font-weight: 700; white-space: nowrap; }
.report__list dd { margin: 0; font-weight: 800; text-align: right; text-wrap: balance; }
.help { max-width: 64ch; margin-bottom: var(--sp-4); }
.help h3 { font: 800 1.5rem/1.2 var(--f-display); font-stretch: 112%; margin-bottom: 10px; }

/* footer */
.foot { position: relative; padding-block: var(--sp-6) calc(var(--sp-6) + 40px); }
.foot__grid { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.foot h2 { font: 800 1.6rem/1.15 var(--f-display); font-stretch: 112%; margin-bottom: var(--sp-3); }
.foot ul { padding-left: 1.1em; display: grid; gap: 10px; color: var(--soft); }
.foot .foot__src { list-style: none; padding: 0; gap: 9px; margin-bottom: var(--sp-3); }
.foot__src a { color: var(--fg); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.foot__src a:hover { text-decoration-thickness: 2px; }
.note--mile { margin: 0 0 var(--sp-3); font-size: calc(var(--t-note) * 0.92); }
.foot p { color: var(--soft); }
/* sek.si credit: the brand kit's reversed drawing, so the SI cut-out shows the navy. "by" sits on the logo's baseline */
.foot__by { margin: var(--sp-5) 0 0; font-size: var(--t-small); }
.foot__by a { display: inline-block; margin-left: 0.3em; color: var(--fg); }
.foot__by svg { width: auto; height: clamp(48px, 40px + 1.5vw, 64px); aspect-ratio: 112.2 / 181; }

/* lessons dialog */
.index {
  width: min(560px, calc(100% - 24px));
  max-height: calc(100svh - 24px);
  padding: 0;
  border: 0;
  background: var(--paper);
  color: var(--ink);
  --fg: var(--ink); --bg: var(--paper); --btn-bg: var(--ink); --btn-fg: var(--paper); --pen-c: var(--pen-red);
}
.index__opts { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: var(--sp-3); }
.index::backdrop { background: rgb(13 24 45 / 0.72); }
.index__in { display: flex; flex-direction: column; max-height: calc(100svh - 24px); padding: clamp(24px, 4vw, 40px) clamp(24px, 4vw, 40px) clamp(20px, 3vw, 32px); }
.index h2 { font: 900 2.2rem/1 var(--f-display); font-stretch: 118%; margin-bottom: var(--sp-3); }
.index__list { list-style: none; padding: 0; margin: 0 0 var(--sp-4); display: grid; min-height: 0; overflow-y: auto; }
.index__list a {
  display: flex; align-items: center; gap: 14px;
  min-height: 40px;
  padding: 4px 0;
  border-bottom: 2px solid var(--fg);
  text-decoration: none;
  font-weight: 700;
}
.index__list a:hover { color: var(--pen-c); }
.index__list .box { position: relative; width: 24px; height: 24px; flex: none; border: 3px solid var(--fg); }
.index__list .is-done .box::after {
  content: "";
  position: absolute; left: 3px; top: -6px;
  width: 9px; height: 18px;
  border: solid var(--pen-c);
  border-width: 0 4px 4px 0;
  transform: rotate(40deg);
}

/* still mode */
.still *, .still *::before, .still *::after {
  animation-duration: 0.001s !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0s !important;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0s !important;
  }
}

@media (max-width: 899px) {
  .dock__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .dock__btn { padding: 0 12px; }
  .l-products .note--side { margin-left: 24px; }
  .pick__info { padding-top: 14px; }
}
.heart__more > p:first-child { max-width: 60ch; }
@media (min-width: 900px) {
  .lesson .wrap > .note--prompt { margin-bottom: var(--sp-3); }
}

/* ---------- dark theme: the default ----------
   Everything above is the light theme, which applies with data-theme="light" on <html> (the switch
   on the film, or ?theme=light). Navy replaces paper as the ground. The coral and sky floods stay full floods with navy type,
   the teacher writes in chalk on navy, and the paper objects (quiz sheet, guess slip, report card,
   notes, the lessons list) stay paper. No tinted dark grounds and no grey-blue caption tier:
   those land on the stock dark palette that generated sites ship with. */
/* screen only: printouts always use the light theme, so the text stays dark on paper */
@media screen {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    scrollbar-color: #4b5b77 var(--ink);
  }
  :root:not([data-theme="light"]) body { background: var(--ink); color: var(--paper); }
  :root:not([data-theme="light"]) ::selection { background: var(--paper); color: var(--ink); }
  :root:not([data-theme="light"]) .s-paper,
  :root:not([data-theme="light"]) .s-ink { --bg: var(--ink); --fg: var(--paper); --soft: var(--paper); --pen-c: var(--paper); --btn-bg: var(--paper); --btn-fg: var(--ink); --thumb: var(--paper); --track: var(--paper); }

  :root:not([data-theme="light"]) .skip { background: var(--paper); color: var(--ink); }
  :root:not([data-theme="light"]) .hero .btb-logo,
  :root:not([data-theme="light"]) .tab .btb-logo { color: var(--paper); }
  :root:not([data-theme="light"]) .tab { --fg: var(--paper); background: var(--ink); border-color: var(--paper); }
  /* sek.si: the reversed drawing for a light logo on navy */
  :root:not([data-theme="light"]) .hero__by .sek-p { display: none; }
  :root:not([data-theme="light"]) .hero__by .sek-r { display: inline; }

  /* hero: the top slab turns navy and the film prints on it in paper ink; the coral slab is unchanged */
  :root:not([data-theme="light"]) .hero { --gl-top-bg: var(--ink); --gl-top-ink: var(--paper); --gl-top-pos: 1; }
  /* the third line types in the navy slab, so it is paper until it lands on the coral */
  :root:not([data-theme="light"]) .hl__row[data-row="2"] { transition: transform 0.4s var(--fall), color 0.4s steps(1, end); }
  :root:not([data-theme="light"]) .hl__row[data-row="2"].is-lifted { color: var(--gl-top-ink); transition: none; }
  :root:not([data-theme="light"]) .hero__video { filter: grayscale(1) contrast(1.5) brightness(0.85); mix-blend-mode: screen; }
  :root:not([data-theme="light"]) .hero__ctl { --fg: var(--paper); }
  :root:not([data-theme="light"]) .hero__still,
  :root:not([data-theme="light"]) .hero__theme { background: var(--ink); border-color: var(--paper); color: var(--paper); }
  :root:not([data-theme="light"]) .hero__still:hover,
  :root:not([data-theme="light"]) .hero__theme:hover { background: var(--paper); color: var(--ink); }

  /* the cloud prints as a halftone screen: loose dots on navy would read as a particle backdrop */
  :root:not([data-theme="light"]) .l-metals { --dust: var(--paper); --lens-rim: var(--paper); --cloud-screen: 1; }
  :root:not([data-theme="light"]) .gauge { background: none; box-shadow: inset 0 0 0 2px var(--paper); }
}

@media print {
  .tab, .dock, .hero__gl, .hero__video, .ecg, .cloud__c, .pile { display: none !important; }
  .ready .reveal:not(.is-open) { display: block; }
}