/* 12 Nov (Jack): the technical deep dive and the button into it wear the rauno version's design, so the blog's own rules stop at
   their edge; the rules themselves are unchanged */
@scope (html) to (#technical, .ddbar) {
/* Layout: Jack's drawn pages in one flowing scroll. A slim column set left of centre, like the PAIR reference (more room on the
   right than on the left). Words on the left, the picture on the right, both starting at the same height; the picture stays put
   while its words scroll past and is pushed up by the next section. Anything still low on the screen waits in grey; once it rises
   past the line near the foot of the screen it takes its colour, its marks draw and its animation plays. Pictures sit on the page
   itself, with no cards. One light theme on purpose, like the original blog and its figures. */
:scope {
  color-scheme: light;
  --paper: #FFFFFF;
  --mist: #F4F4F7;
  --ink: #1D1D1F;
  --text: #2A2A2E;
  --dim: #6E6E73;
  --faint: #A1A1A8;
  --line: #E6E6EB;
  --fig-ink: #1A2545;
  --fig-dim: #4A5578;
  --fig-faint: #C3C9E0;
  --fig-track: #ECEEF6;
  /* the accent for what call 8 added (the deep-dive bar, the scene cards): the original purple; 12 Nov Jack went back to the original colours */
  --accent: #5B2BC9; --accent-ink: #5B2BC9; --accent-hi: #B3A1FF; --accent-soft: #EEF0F5;
  --red: #E0382F; --blue: #2747D9; --lime: #3FBF2A; --cyan: #17BFAE; --pink: #5B2BC9; --yellow: #F2C230; --purple: #5B2BC9;
  --crew: #2747D9; --imp: #E0382F; --people: #5B2BC9;
  --people-soft: #EEF0F5;
  --marker: rgba(255, 212, 64, .55);
  --signs: #8A90A6; --wins: #5B2BC9;
  --display: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --fig: "Barlow", "Bricolage Grotesque", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --col: 880px;
  --stage: 480px;
  --gl: max(16px, env(safe-area-inset-left, 0px));
  --gr: max(16px, env(safe-area-inset-right, 0px));
}
*, *::before, *::after { box-sizing: border-box; }
:scope { -webkit-text-size-adjust: 100%; overscroll-behavior-y: none; }   /* 12 Nov (Jack): the page never springs past its top (or foot) to show a white bar */
body { overscroll-behavior-y: none; }
body { margin: 0; background: var(--paper); color: var(--text); font: 400 16px/1.45 var(--serif); font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
::selection { background: rgba(248, 201, 48, .42); }
:focus-visible { outline: 2px solid #0A66D8; outline-offset: 3px; border-radius: 4px; }
button { font: inherit; color: inherit; }
/* the column: slim, a little left of centre (40 % of the spare width on the left, 60 % on the right) */
.wrap { max-width: calc(var(--col) + 32px); padding-left: var(--gl); padding-right: var(--gr); margin-left: auto; margin-right: auto; }


/* ------------------------------------------------------------------ what waits below the line is grey */
[data-unit] { transition: opacity .7s ease, filter .7s ease; }
[data-unit].wait { opacity: .26; filter: grayscale(1); }
/* what you have read and moved on from: a little grey, so the eye goes to where you are */
[data-unit].past { opacity: .5; filter: grayscale(1); }
@media (prefers-reduced-motion: reduce) { [data-unit] { transition: none; } }

/* ------------------------------------------------------------------ type */
p { margin: 0 0 12px; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
strong, b { font-weight: 600; color: var(--ink); }
.prose p { text-align: justify; -webkit-hyphens: auto; hyphens: auto; }
.lead { font-weight: 600; color: var(--ink); }
/* the marks. Highlight: the point of a paragraph (one at most). Underline (hand-drawn): a lead word that frames the argument, or
   the items of a list. Circle (hand-drawn): a term we are introducing. Colour: the two teams. */
.hl { padding: 0 .12em; margin: 0 -.06em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background: linear-gradient(var(--marker), var(--marker)) no-repeat 0 55% / 0% 78%; transition: background-size 1.1s cubic-bezier(.45, .05, .25, 1) .1s; }
.on .hl { background-size: 100% 78%; }
.hl.one { white-space: nowrap; }
.crew-c { color: var(--crew); font-weight: 600; }
.imp-c { color: var(--imp); font-weight: 600; }
.ann { position: relative; }
.ann[data-ann~="circle"] { margin: 0 .3em; }
p, li, h1, h2 { position: relative; isolation: isolate; }
.rough-annotation { pointer-events: none; z-index: -1 !important; }

/* ------------------------------------------------------------------ page 1: masthead, title, the game on film */
/* the opening: the claim and the numbers on the left, the results chart on the right; the leaderboard under the numbers.
   It is a little wider than the reading column (same left edge), so the chart has room. */
:scope { --kid: clamp(36px, 3.6vw, 51px); }
.castrow { overflow-x: clip; }
.wrap.wide { max-width: calc(1120px + 32px); }
.hero { padding-bottom: 76px; overflow-x: clip; }
.brandbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 22px 0; }
.brandbar img { height: 26px; width: auto; display: block; }
.brandbar .pmt { font: 750 15px/1 var(--display); letter-spacing: -0.015em; color: var(--ink); white-space: nowrap; }
.lead2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); grid-template-areas: "claim res" "board res"; grid-template-rows: auto 1fr;
  column-gap: 56px; align-items: start; padding-top: 38px; }
.claim { grid-area: claim; min-width: 0; }
.res { grid-area: res; min-width: 0; }
.board { grid-area: board; min-width: 0; }
.hero h1 { font: 800 clamp(32px, 3.3vw, 46px)/1.08 var(--display); font-variation-settings: "opsz" 96, "wdth" 92; letter-spacing: -0.032em;
  color: var(--ink); margin: 0 0 16px; text-wrap: balance; }
.hero h1 .l2 { display: block; margin-top: .12em; }
.hero h1 .hl { padding: 0 .1em; margin: 0 -.04em; background-position: 0 62%; background-size: 0% 84%; }
.on .hero h1 .hl, .hero.on h1 .hl { background-size: 100% 84%; }
.hero .sub { font: 800 clamp(14px, 1.25vw, 17px)/1.3 var(--display); letter-spacing: .09em; text-transform: uppercase; color: var(--purple); margin: 0 0 28px; }
.res .note { font: 500 12.5px/1.45 var(--fig); color: var(--fig-dim); margin: 14px 0 0; max-width: 520px; }
.res .note .em { font-weight: 700; color: var(--fig-ink); }
.how .label, .gtext .label, .soon .kicker, .thead .label { font: 700 12px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--dim); margin: 0 0 12px; }
.reel { display: grid; gap: 12px; min-width: 0; }
.film { position: relative; aspect-ratio: 1404 / 1080; max-width: 100%; border-radius: 10px; overflow: hidden; background: #0E1222; cursor: pointer;
  outline: 1.5px solid var(--ink); outline-offset: 4px; margin: 6px 6px 4px; }
.film .pp { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; background: var(--paper);
  box-shadow: 0 0 0 5px rgba(255, 255, 255, .22), 0 12px 26px -10px rgba(5, 8, 20, .7); display: grid; place-items: center;
  opacity: 0; transform: scale(.6) rotate(-8deg); transition: opacity .2s ease, transform .35s cubic-bezier(.34, 1.6, .64, 1); pointer-events: none; }
.film .pp.on { opacity: 1; transform: none; }
.film .tag b { color: #fff; font-weight: 700; letter-spacing: .07em; }
.film .pp svg { width: 20px; height: 20px; fill: var(--ink); stroke: var(--ink); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
.film video, .film img { display: block; width: 100%; height: 100%; object-fit: cover; }
.film .tag { position: absolute; left: 8px; bottom: 18px; font: 500 10.5px/1 var(--fig); color: rgba(255, 255, 255, .86); background: rgba(10, 14, 30, .62);
  padding: 5px 7px; border-radius: 5px; letter-spacing: .01em; }
.film .clock { position: absolute; left: 12px; right: 12px; bottom: 0; height: 20px; cursor: pointer; touch-action: none; z-index: 2; outline: none; }
.film .clock .tr { position: absolute; left: 0; right: 0; bottom: 7px; height: 2px; border-radius: 2px; overflow: hidden; background: rgba(255, 255, 255, .2);
  transition: height .16s ease, bottom .16s ease; }
.film .clock i { display: block; height: 100%; width: 100%; background: rgba(255, 255, 255, .85); transform-origin: 0 50%; transform: scaleX(0); }
.film .clock .dot { position: absolute; left: var(--p, 0%); bottom: 8px; width: 10px; height: 10px; margin: 0 0 -5px -5px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .35); transform: scale(0); transition: transform .16s ease; }
@media (hover: hover) { .film .clock:hover .tr { height: 4px; bottom: 6px; } .film .clock:hover .dot { transform: none; } }
.film .clock.drag .tr, .film .clock:focus-visible .tr { height: 4px; bottom: 6px; }
.film .clock.drag .dot, .film .clock:focus-visible .dot { transform: none; }
.film .ld { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .25);
  border-top-color: #fff; background: rgba(10, 14, 30, .55); box-shadow: 0 0 0 6px rgba(10, 14, 30, .55); opacity: 0; transition: opacity .25s ease;
  pointer-events: none; animation: ld-spin .8s linear infinite paused; }
.film.loading .ld { opacity: 1; transition-delay: .15s; animation-play-state: running; }
/* the seat's mind, in time with the film: its brief, its plan (or its meeting), and our note on the moment */
.mind { font-family: var(--fig); color: var(--fig-ink); display: grid; gap: 10px; }
.mind .who { display: flex; align-items: baseline; gap: 8px; font: 600 12px/1.2 var(--fig); color: var(--fig-dim); min-width: 0; }
.mind .who b { font: 700 13px/1.2 var(--fig); color: var(--fig-ink); }
.mind .who .role { font: 700 10px/1 var(--fig); letter-spacing: .06em; text-transform: uppercase; padding: 3px 6px; border-radius: 999px; background: var(--fig-track); color: var(--crew); }
.mind .who .role.opp { color: var(--imp); }
.mind .who .role:empty { display: none; }
.mind .who .t { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--faint); }
.mind .two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.mind .two > .box { overflow: hidden; transition: height .45s cubic-bezier(.3, .7, .3, 1); }
.mind .box { min-width: 0; }
.mind h4 { margin: 0 0 4px; font: 700 10.5px/1 var(--fig); letter-spacing: .07em; text-transform: uppercase; color: var(--fig-dim); }
.mind .body { font: 500 12px/1.38 var(--fig); color: var(--fig-ink); min-height: 4.2em; transition: opacity .3s ease; }
.mind .two .body { font-size: 10.5px; line-height: 1.34; min-height: 3.6em; }
.mind .two .ln .at { font-size: 9px; }
.mind .body.fade { opacity: 0; }
.mind .body .wait { color: var(--faint); font-style: italic; }
.mind .body .gap { color: var(--faint); }
.mind .body b { font-weight: 700; }
.mind .body mark { color: inherit; padding: 0 2px; border-radius: 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background: linear-gradient(var(--marker), var(--marker)) no-repeat 0 55% / 100% 88%; }
.mind .body mark { animation: sweep 1.1s cubic-bezier(.45, .05, .25, 1) .35s both; }
.mind ol, .mind ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; }
.mind ol li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 4px; color: var(--fig-dim); }
.mind ol li.run { color: var(--fig-ink); }
.mind ol li .mk { font-weight: 700; color: var(--fig-faint); }
.mind ol li.run .mk { color: var(--imp); }
.mind .if { color: var(--fig-dim); }
.mind .ln .at { display: block; font-size: 10px; color: var(--faint); }
.mind .vote { margin-top: 3px; font-weight: 700; }
.mind .meta { border-top: 1px solid var(--line); padding-top: 9px; overflow: hidden; transition: height .45s cubic-bezier(.3, .7, .3, 1); }
.mind .meta .body { min-height: 2.8em; }
.mind .meta li { padding-left: 11px; position: relative; }
.mind .meta li::before { content: ""; position: absolute; left: 0; top: .55em; width: 4px; height: 4px; border-radius: 50%; background: var(--fig-dim); }
.mind li.in { animation: rise .45s ease both; }
/* the kids: a row along the foot of the opening (on a wide screen standing whole on the foot of the screen) */
.hero .spacer { flex: 1 1 auto; min-height: 24px; }
.cast { position: relative; display: flex; justify-content: center; gap: clamp(8px, 2.6vw, 34px); pointer-events: none; }

.cast .kid { position: relative; width: clamp(36px, 3.6vw, 51px); aspect-ratio: 172 / 217; animation: bob 3.2s ease-in-out infinite; animation-delay: calc(var(--i) * -0.53s); }
.cast .kid img { position: absolute; left: 50%; bottom: 0; height: 100%; width: auto; max-width: none; transform: translateX(-50%); filter: drop-shadow(0 8px 8px rgba(20, 20, 40, .18)); }
.cast .kid img:not(.on) { visibility: hidden; }
.cast.small { gap: 8px; margin-bottom: 14px; }
.cast.small .kid { width: 30px; }

/* ------------------------------------------------------------------ sections */
/* one gap between every two sections, whatever they are: text to text, text to a grey band, the kids to the first section */
:scope { --gap: 144px; }
.sec { padding-block: calc(var(--gap) / 2); }
.dive + .sec, .castrow + .sec { padding-top: var(--gap); }
.sec:has(+ .dive) { padding-bottom: var(--gap); }
/* hold and push: a section that fits on the screen stays where it is while the next one comes up from below; when the next one
   reaches its natural distance, it pushes this one out. The page turns it on only where the section fits (.fits). */
:scope { --holdtop: 48px; }
.hold.fits > .holdin { position: sticky; top: var(--holdtop); }
.scene { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, var(--stage)); column-gap: 40px; align-items: start; }
.copy { min-width: 0; }
.stage { min-width: 0; align-self: stretch; }
/* the picture stays while its words scroll past, then the next section pushes it up */
.stage .stick { position: static; }   /* the chart moves with the words beside it */

.stage iframe { display: block; border: 0; background: transparent; width: 100%; height: 460px; }

/* the two big numbers */
.bignums { display: grid; grid-template-columns: repeat(3, max-content); column-gap: clamp(22px, 2.6vw, 36px); margin: 0 0 30px; }
.bignum { margin: 0; }
.bignum .v { display: block; font: 800 clamp(30px, 2.9vw, 42px)/1 var(--display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; padding-bottom: .05em;
  background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.bignum.a .v { background-image: linear-gradient(95deg, #5B2BC9, #5B2BC9); }
.bignum.b .v { background-image: linear-gradient(95deg, #1D1D1F, #1D1D1F); }
.bignum.c .v { background-image: linear-gradient(95deg, #2747D9, #17BFAE); }
.bignum .l { display: block; margin-top: 4px; font: 650 13.5px/1.25 var(--display); color: var(--ink); }

/* drawn pictures: on the page itself */
.viz { position: relative; font-family: var(--fig); color: var(--fig-ink); }
.viz svg { display: block; width: 100%; height: auto; overflow: visible; }
.viz .t { font: 700 11px/1 var(--fig); letter-spacing: .07em; text-transform: uppercase; color: var(--fig-dim); margin: 0 0 12px; }
.viz .t.soft { color: var(--faint); }
.nmfade { transition: opacity .3s ease; }
svg text { font-family: var(--fig); }
/* the scale chart's bars: outlined like the stickers, a round top, a soft shine; the kid on ours swings his legs a little */
.viz .bar { fill: #CBD0E6; stroke: var(--fig-ink); stroke-width: 1.6; stroke-linejoin: round; }
.viz .bar.ours { fill: url(#ours); }
.viz .shine { fill: none; stroke: #fff; stroke-opacity: .5; stroke-width: 3; stroke-linecap: round; }
.viz .sitter { transform-box: fill-box; transform-origin: 50% 71%; animation: sit-sway 2.8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .viz .sitter { animation: none; } }
.ax { stroke: rgba(26, 37, 69, .1); stroke-width: 1; }
.tk { fill: var(--fig-dim); font-size: 11.5px; font-weight: 500; }
/* the dark label over a chart: short centred lines only, so the box is exactly as wide as what it says */
.tip { position: absolute; z-index: 6; pointer-events: none; background: var(--ink); color: #fff; border-radius: 10px; padding: 9px 13px 8px;
  font: 500 12.5px/1.35 var(--display); text-align: center; width: max-content; opacity: 0; transform: translateY(4px); transition: opacity .15s, transform .15s; }
.tip.on { opacity: 1; transform: none; }
.tip.glide { transition: opacity .15s, transform .15s, left .32s cubic-bezier(.3, .8, .25, 1), top .32s cubic-bezier(.3, .8, .25, 1); }
.tip b { color: #fff; font-weight: 700; }
.tip .nm { font-weight: 700; font-size: 13px; white-space: nowrap; }
.tip .st { display: flex; justify-content: center; gap: 16px; margin-top: 5px; }
.tip .st > div { display: flex; flex-direction: column; align-items: center; }
.tip .st b { font-size: 18px; line-height: 1.05; font-variant-numeric: tabular-nums; }
.tip .st span, .tip .ft, .tip .tm span { font-size: 10.5px; color: rgba(255, 255, 255, .62); white-space: nowrap; }
.tip .ft { margin-top: 3px; }
.tip b.c { color: #93A9FF; } .tip b.i { color: #FF8F8A; }
.tip .tm { display: grid; grid-template-columns: auto auto; gap: 2px 8px; margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(255, 255, 255, .14); text-align: left; align-items: baseline; }
.tip .tm span { text-align: right; }
/* the card over a dot on the benchmark chart: white, the lab's colour along its top, two bars */
.tip:has(.tc) { background: #fff; color: var(--ink); padding: 0; border-radius: 14px; text-align: left; overflow: hidden;
  box-shadow: 0 18px 40px -16px rgba(16, 20, 40, .35), 0 0 0 1px rgba(16, 20, 40, .08); transform: translateY(6px) scale(.97); transform-origin: 50% 100%; }
.tip.on:has(.tc) { transform: none; }
.tip .tc { width: 236px; padding: 12px 14px 11px; border-top: 4px solid var(--lc); }
.tip .th { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.tip .th .lg { width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--lc) 12%, #fff); color: var(--ink); }
.tip .th .lg.an { background: #F1ECE1; }
.tip .th .lg svg { width: 18px; height: 18px; display: block; }
.tip .tc .nm { font: 750 14.5px/1.15 var(--display); color: var(--ink); white-space: nowrap; }
.tip .tc .lb { font: 600 11px/1.2 var(--display); color: var(--lc); margin-top: 2px; }
.tip .tc .rk { margin-left: auto; font: 800 13px/1 var(--display); color: var(--dim); font-variant-numeric: tabular-nums; }
.tip .br { display: grid; grid-template-columns: 58px 1fr 26px; align-items: center; gap: 8px; margin: 5px 0; }
.tip .br span { font: 600 11.5px/1 var(--display); color: var(--dim); }
.tip .br i { height: 7px; border-radius: 4px; background: #EEF0F5; overflow: hidden; display: block; }
.tip .br u { display: block; height: 100%; border-radius: 4px; text-decoration: none; transition: width .5s cubic-bezier(.2, .8, .2, 1); }
.tip .br.c u { background: var(--crew); } .tip .br.i u { background: var(--imp); }
.tip .br b { font: 800 14px/1 var(--display); text-align: right; font-variant-numeric: tabular-nums; }
.tip .br.c b { color: var(--crew); } .tip .br.i b { color: var(--imp); }
.tip .tc .ft { margin-top: 8px; font-size: 10.5px; color: var(--dim); white-space: normal; }
.tip .tc .ft + .ft { margin-top: 2px; } .tip .tc .ft.em { color: var(--purple); font-weight: 600; }
.tip .tm em { font-style: normal; white-space: nowrap; }

/* ------------------------------------------------------------------ deep dives: one grey block, folded by default */
.dive { background: var(--mist); }
.dive > .dhead { position: relative; }
.dive .dhead { padding-block: 26px; }
.dive button.open { appearance: none; border: 0; background: none; width: 100%; text-align: left; cursor: pointer; padding: 0; display: grid; gap: 8px; }
.dive .tag { justify-self: start; font: 700 11.5px/1 var(--display); letter-spacing: .03em; color: var(--ink); border: 1.5px solid var(--ink); border-radius: 999px; padding: 5px 9px; }
.dive .ttl { display: flex; align-items: center; gap: 12px; font: 800 clamp(22px, 2.3vw, 28px)/1.1 var(--display); letter-spacing: -0.025em; color: var(--ink); }
.dive .chev { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); display: grid; place-items: center; transition: transform .35s cubic-bezier(.34, 1.4, .64, 1); }
.dive .chev svg { width: 12px; height: 12px; stroke: #fff; stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.dive.is-open .chev { transform: rotate(90deg); }
.dive button.open:hover .chev { transform: translateX(3px); }
.dive.is-open button.open:hover .chev { transform: rotate(90deg) translateX(2px); }
.dive .hint { font: 500 14px/1.4 var(--display); color: var(--dim); }
.dive > .body { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .5s cubic-bezier(.45, 0, .2, 1), opacity .4s ease .05s; }
.dive.is-open > .body { grid-template-rows: 1fr; opacity: 1; }
.dive:not(.is-open) > .body { transition-duration: .45s, .25s; transition-delay: 0s, 0s; transition-timing-function: cubic-bezier(.45, 0, .2, 1), ease; }
.dive .bin { min-height: 0; overflow: clip; }
.dive.is-open.settled .bin { overflow: visible; }
.dive .body .sec { padding-block: 4px 64px; }
.dive .stage::after { display: none; }
.dive .dclose { padding-block: 0 30px; }
.dive .dclose button { appearance: none; border: 0; background: rgba(29, 29, 31, .07); cursor: pointer; border-radius: 999px; padding: 9px 14px; font: 700 13px/1 var(--display); color: var(--ink);
  transition: transform .25s cubic-bezier(.34, 1.5, .64, 1), background-color .2s; }
.dive .dclose button:hover { transform: translateY(-2px); background: rgba(29, 29, 31, .11); }
/* the benchmark: one column, the formula and the score bar inside the text */
.single { max-width: 620px; }
.prose strong.cool { color: var(--purple); font-weight: 700; }
.formula { margin: 2px 0 14px; color: var(--fig-ink); }
.formula svg { display: block; width: 300px; max-width: 100%; height: auto; margin: 0 auto; }
.score { font-family: var(--fig); color: var(--fig-ink); margin: 0 0 16px; }
.score .labels { display: flex; justify-content: space-between; font: 700 12px/1 var(--fig); margin-bottom: 6px; }
.score .labels .a { color: var(--signs); } .score .labels .b { color: var(--wins); }
.score .split { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: var(--fig-track); }
.score .split i { display: block; height: 100%; }
.score .split .sa { background: var(--signs); } .score .split .sb { background: var(--wins); }
.score .time { position: relative; height: 28px; margin-top: 10px; }
.score .time .ln { position: absolute; left: 0; right: 0; top: 4px; height: 2px; border-radius: 1px; background: var(--fig-track); }
.score .time .fill { position: absolute; left: 0; top: 4px; height: 2px; border-radius: 1px; background: var(--fig-ink); width: 0; }
.score .time .dot { position: absolute; top: 0; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--fig-ink); left: 0; }
.score .time span { position: absolute; top: 14px; transform: translateX(-100%); font: 500 11px/1 var(--fig); color: var(--fig-dim); white-space: nowrap; }
.score .time span.cur { color: var(--fig-ink); font-weight: 700; }
.score .cap { font: 500 11.5px/1.3 var(--fig); color: var(--fig-dim); min-height: 1.3em; margin-top: 12px; }
/* the formula's two parts in the colours of the two things they weigh */
.formula .ta { color: var(--signs); } .formula .tb { color: var(--wins); }

/* ------------------------------------------------------------------ the question */
.ask { padding-bottom: 36px; }
.ask h2 { font: 800 clamp(26px, 2.8vw, 34px)/1.15 var(--display); letter-spacing: -0.03em; color: var(--ink); margin: 0; }

/* the results chart */
.mk { cursor: pointer; transition: opacity .4s ease; }
.mk .pop { transform-box: fill-box; transform-origin: center; transition: transform .55s cubic-bezier(.34, 1.7, .64, 1), opacity .3s ease; }
.mk.out .pop { transform: scale(0); opacity: 0; }
.mk .lbl { font: 600 10.5px/1 var(--fig); fill: var(--fig-dim); paint-order: stroke; stroke: var(--paper); stroke-width: 3px; stroke-linejoin: round; transition: opacity .35s ease .15s; pointer-events: none; }
.mk.fr .lbl { fill: var(--fig-ink); font-weight: 700; }
.mk.out .lbl { opacity: 0; transition-delay: 0s; }
.mk.dim { opacity: .25; }
.mk.dim.hot { opacity: 1; }
.mk:hover .pop, .mk.hot .pop { transform: scale(1.28) rotate(-6deg); transition-duration: .25s; }
.pbox { transition: opacity .3s ease; }
.six { opacity: 0; transition: opacity .5s ease; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; align-items: start; }
.six.on { opacity: 1; }
.six h3 { margin: 0 0 8px; font: 700 11px/1.2 var(--fig); letter-spacing: .07em; text-transform: uppercase; color: var(--fig-dim); }
.six ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.six li { display: flex; align-items: center; gap: 8px; padding: 4.5px 8px; margin: 0 -8px; border-radius: 8px; font: 600 13.5px/1.2 var(--fig); color: var(--fig-ink); cursor: default; min-width: 0;
  opacity: 0; translate: 0 6px; transition: opacity .4s ease, translate .4s ease, transform .25s cubic-bezier(.34, 1.5, .64, 1), background-color .2s; }
.six li > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.six.on li { opacity: 1; translate: 0 0; transition-delay: calc(var(--i) * 60ms), calc(var(--i) * 60ms), 0s, 0s; }
.six li:hover { transform: translateY(-2px) rotate(-.6deg); background: var(--mist); }
.six li svg { width: 15px; height: 15px; flex: none; }
.six li em.early { font: 600 9.5px/1 var(--fig); font-style: normal; color: var(--fig-dim); background: var(--mist); padding: 3px 6px; border-radius: 999px; flex: none; }
.mk + .early, svg .early { transition: opacity .4s ease .3s; pointer-events: none; }
.six li small { margin-left: auto; font: 500 11.5px/1 var(--fig); color: var(--fig-dim); font-variant-numeric: tabular-nums; white-space: nowrap; flex: none; }
.six li small .c { color: var(--crew); } .six li small .i { color: var(--imp); }
.six .key { grid-column: 1 / -1; margin: 12px 0 0; font: 500 11px/1.3 var(--fig); color: var(--faint); }

/* how the game works: a band of its own, with a fast look at one game beside it */
:scope { --band: #EFF2FB; }
.band + .castrow { padding-top: calc(var(--gap) / 2); }
.castrow + .next { padding-top: calc(var(--gap) / 2); }
.band { padding-block: 76px; }
.gameband { background: var(--band); }
.gb { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); column-gap: 56px; align-items: center; }
.gtext { min-width: 0; }
.gtext h2 { font: 800 clamp(24px, 2.5vw, 32px)/1.12 var(--display); letter-spacing: -0.03em; color: var(--ink); margin: 0 0 26px; text-wrap: balance; }
.ten { display: flex; gap: clamp(3px, .7vw, 9px); align-items: flex-end; margin: 0 0 26px; padding-top: 26px; }
.ten .k { position: relative; width: clamp(27px, 3.1vw, 40px); aspect-ratio: 172 / 217; opacity: 0; translate: 0 10px;
  transition: opacity .45s ease, translate .55s cubic-bezier(.34, 1.6, .64, 1); transition-delay: calc(var(--i) * 70ms); }
.ten .k img { position: absolute; left: 50%; bottom: 0; height: 100%; width: auto; max-width: none; transform: translateX(-50%); filter: drop-shadow(0 6px 6px rgba(20, 20, 40, .16)); }
.ten .k .pin { position: absolute; left: 50%; bottom: calc(100% + 5px); transform: translateX(-50%) translateY(-6px) scale(.6); opacity: 0; white-space: nowrap;
  font: 800 9.5px/1 var(--display); letter-spacing: .05em; text-transform: uppercase; color: #fff; background: var(--imp); padding: 4px 6px 3px; border-radius: 999px;
  transition: opacity .3s ease 1.05s, transform .45s cubic-bezier(.34, 1.8, .64, 1) 1.05s; }
.ten .k .pin::after { content: ""; position: absolute; left: 50%; top: 100%; margin-left: -4px; border: 4px solid transparent; border-top-color: var(--imp); }
.on .ten .k { opacity: 1; translate: 0 0; }
.on .ten .k .pin { opacity: 1; transform: translateX(-50%); }
.wins { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.wins .w { background: var(--paper); border-radius: 16px; padding: 16px 18px 17px; box-shadow: 0 1px 0 rgba(26, 37, 69, .06), 0 10px 24px -20px rgba(26, 37, 69, .35); }
.wins h3 { margin: 0 0 6px; font: 800 16.5px/1.15 var(--display); letter-spacing: -0.015em; }
.wins .imp h3 { color: var(--imp); } .wins .crew h3 { color: var(--crew); }
.wins p { margin: 0; font: 400 15px/1.45 var(--serif); color: var(--text); }
.gtext .who { margin: 18px 0 0; font: 600 15px/1.4 var(--display); color: var(--ink); }
.gvid { min-width: 0; }
.clip { position: relative; aspect-ratio: 1404 / 1080; max-width: 100%; border-radius: 10px; overflow: hidden; background: #0E1222; outline: 1.5px solid var(--ink); outline-offset: 4px; margin: 6px; }
.clip video { display: block; width: 100%; height: 100%; object-fit: cover; }
.clip .tag { position: absolute; left: 8px; bottom: 10px; font: 500 10.5px/1 var(--fig); color: rgba(255, 255, 255, .86); background: rgba(10, 14, 30, .62); padding: 5px 7px; border-radius: 5px; letter-spacing: .01em; }
.clip .tag b { color: #fff; font-weight: 700; letter-spacing: .07em; }

/* the biggest mafia-like game between humans and AI */
h2.big { font: 800 clamp(32px, 4.3vw, 60px)/1.08 var(--display); font-variation-settings: "opsz" 96, "wdth" 92; letter-spacing: -0.035em; color: var(--ink); margin: 0 0 64px; max-width: 15em; text-wrap: balance; }
h2.big .ann { margin: 0 .3em; font-variation-settings: "opsz" 96, "wdth" 100; letter-spacing: .01em; }

/* the matrix's heading */
.mxhead { max-width: 600px; margin: 0 0 26px; }
.mxhead h2 { font: 800 clamp(24px, 2.5vw, 30px)/1.12 var(--display); letter-spacing: -0.03em; color: var(--ink); margin: 0 0 8px; }
.mxhead p { font: 500 15px/1.45 var(--display); color: var(--dim); margin: 0; }

/* one whole game */
.full h2 { font: 800 clamp(24px, 2.5vw, 32px)/1.12 var(--display); letter-spacing: -0.03em; color: var(--ink); margin: 0 0 12px; }
.full .intro { font: 400 16.5px/1.5 var(--serif); color: var(--text); margin: 0 0 18px; }
.full .keys { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.full .keys li { font: 400 15px/1.45 var(--serif); color: var(--text); padding-left: 14px; border-left: 2px solid var(--line); }
.full .keys b { display: block; font: 700 11px/1.3 var(--fig); letter-spacing: .07em; text-transform: uppercase; color: var(--fig-dim); margin-bottom: 2px; }

/* the way into the technical deep dive: a band you can press */
.techband { background: var(--mist); padding-block: 34px; }
.techband .go { display: grid; gap: 8px; text-decoration: none; color: var(--ink); }
.techband .tag { justify-self: start; font: 700 11.5px/1 var(--display); letter-spacing: .03em; color: var(--ink); border: 1.5px solid var(--ink); border-radius: 999px; padding: 5px 9px; }
.techband .ttl { display: flex; align-items: center; gap: 12px; font: 800 clamp(22px, 2.3vw, 28px)/1.1 var(--display); letter-spacing: -0.025em; color: var(--ink); }
.techband .chev { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); display: grid; place-items: center; transition: transform .3s cubic-bezier(.34, 1.4, .64, 1); }
.techband .chev svg { width: 12px; height: 12px; stroke: #fff; stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.techband .go:hover .chev { transform: translateX(4px); }
.techband .hint { font: 500 14px/1.4 var(--display); color: var(--dim); max-width: 46em; }

/* the technical deep dive's own page */
.techview { min-height: 100vh; min-height: 100svh; padding-bottom: 40px; }
.tbar { position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.tbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 12px; }
.tbar .tname { font: 700 13px/1 var(--display); color: var(--dim); }
.back { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font: 700 13px/1 var(--display); color: var(--ink); background: rgba(29, 29, 31, .07);
  border-radius: 999px; padding: 9px 14px; transition: transform .25s cubic-bezier(.34, 1.5, .64, 1), background-color .2s; }
.back:hover { transform: translateY(-2px); background: rgba(29, 29, 31, .11); }
.back.big { font-size: 15px; padding: 13px 18px; }
.thead { padding-block: 56px 28px; }
.thead h1 { font: 800 clamp(28px, 3vw, 40px)/1.1 var(--display); letter-spacing: -0.03em; color: var(--ink); margin: 0; text-wrap: balance; }
.techview .sec { padding-block: 8px 64px; }
.tend { padding-block: 24px 64px; }
/* the team matrix */
.mxwrap { position: relative; max-width: 600px; margin: 0; }
.mx { display: grid; gap: 4px; font-family: var(--fig); }
.mx .h { font: 600 11.5px/1.15 var(--fig); color: var(--fig-ink); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; padding-bottom: 7px; min-width: 0; }
.mx .h .nm { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }
.mx .h .ic { display: flex; gap: 2px; justify-content: center; }
.mx .rh { flex-direction: row; justify-content: flex-end; align-items: center; gap: 8px; padding: 0 9px 0 0; }
.mx .rh .nm { writing-mode: horizontal-tb; transform: none; white-space: nowrap; text-align: right; }
.mx .rh .ic { width: 28px; flex: none; justify-content: flex-start; }
.mx .h.ppl, .mx .rh.ppl { color: var(--people); font-weight: 700; }
.mx .h svg { width: 13px; height: 13px; flex: none; }
.mx .cell { aspect-ratio: 1 / 1; border-radius: 7px; background: var(--fig-track); border: 0; padding: 0; cursor: pointer; position: relative; opacity: .0;
  transition: background-color .3s ease, opacity .3s ease, transform .25s cubic-bezier(.34, 1.6, .64, 1), box-shadow .2s; }
.mx .cell.in { opacity: 1; }
.mx .cell.pp { box-shadow: inset 0 0 0 2px rgba(91, 43, 201, .5); }
.mx .cell:hover, .mx .cell:focus-visible { transform: translateY(-2px) scale(1.1) rotate(-2deg); z-index: 3; box-shadow: 0 8px 16px -8px rgba(29, 29, 60, .45); }
.mx .corner { font: 700 10px/1.35 var(--fig); letter-spacing: .04em; text-transform: uppercase; color: var(--fig-dim); align-self: end; padding-bottom: 6px; }
.mx .corner .c { color: var(--crew); } .mx .corner .o { color: var(--imp); }
.mxkey { display: flex; align-items: center; gap: 10px; justify-content: center; max-width: 600px; margin-top: 14px; font: 600 11px/1 var(--fig); color: var(--fig-dim); }
.mxkey i { display: block; width: 120px; height: 6px; border-radius: 3px; }

/* ------------------------------------------------------------------ the picker */
.pick h2 { font: 800 clamp(26px, 2.8vw, 34px)/1.1 var(--display); letter-spacing: -0.03em; color: var(--ink); margin: 0 0 12px; }
.pick .scene { grid-template-columns: minmax(0, 1fr) minmax(0, 520px); column-gap: 56px; }
.pick .stage::after { display: none; }
.pick .copy p { font: 500 15px/1.45 var(--display); color: var(--dim); }
.shelf { display: grid; }
.tiles { display: grid; grid-template-columns: repeat(5, 55px); gap: 5px; justify-content: center; }
.pcard svg, .seat svg { pointer-events: none; }
.pcard { appearance: none; border: 1.5px solid var(--line); background: var(--paper); border-radius: 9px; padding: 7px 3px 3px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px;
  aspect-ratio: 1 / 1; overflow: hidden;
  cursor: grab; touch-action: manipulation; user-select: none; -webkit-user-select: none; min-width: 0; text-align: left;
  transition: transform .25s cubic-bezier(.34, 1.5, .64, 1), border-color .2s, box-shadow .2s; }
.pcard:hover { transform: translateY(-2px) rotate(-1deg); box-shadow: 0 8px 16px -10px rgba(29, 29, 60, .35); }
.pcard.sel { border-color: var(--ink); box-shadow: 0 0 0 1.5px var(--ink); }
.pcard .lg { flex: none; width: 17px; height: 17px; display: grid; place-items: center; color: var(--ink); }
.pcard .lg svg { width: 16px; height: 16px; }
.pcard .lg .r { font: 800 12px/1 var(--fig); color: var(--dim); }
.pcard.person { border-color: rgba(91, 43, 201, .45); background: var(--people-soft); }
.pcard.person .lg { color: var(--people); }
.pcard .nm { font: 650 9px/1.12 var(--display); color: var(--ink); text-align: center; overflow-wrap: anywhere; min-width: 0; width: 100%;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.felt { position: relative; aspect-ratio: 2.45 / 1; max-width: 100%; margin: 46px 4px 40px; }
.felt .oval { position: absolute; inset: 31% 15%; border-radius: 999px; background: var(--fig-track);
  display: grid; place-items: center; text-align: center; font: 700 10.5px/1.3 var(--fig); letter-spacing: .08em; text-transform: uppercase; color: var(--fig-dim); }
.felt .oval .vs { display: flex; gap: 8px; align-items: center; }
.felt .oval .vs .c { color: var(--crew); } .felt .oval .vs .o { color: var(--imp); }
.seat { position: absolute; width: 8.5%; max-width: 40px; transform: translate(-50%, -50%); appearance: none; border: 0; background: none; padding: 0; cursor: pointer; display: grid; justify-items: center; gap: 2px; }
.seat .ring { width: 100%; aspect-ratio: 1 / 1; max-width: 100%; border-radius: 50%; background: var(--paper); display: grid; place-items: center; box-shadow: 0 0 0 2.5px var(--crew), 0 6px 12px -8px rgba(29, 29, 60, .5);
  transition: transform .3s cubic-bezier(.34, 1.6, .64, 1), box-shadow .2s; color: var(--ink); }
.seat.imp .ring { box-shadow: 0 0 0 2.5px var(--imp), 0 6px 12px -8px rgba(29, 29, 60, .5); }
.seat .ring svg { width: 46%; height: 46%; }
.seat .ring .r { font: 800 13px/1 var(--fig); }
.seat .ring.ref { background: var(--mist); color: var(--dim); }
.seat .ring.ppl { background: var(--people-soft); color: var(--people); }
.seat .nm { font: 650 10px/1.1 var(--display); color: var(--ink); white-space: nowrap; max-width: 80px; overflow: hidden; text-overflow: ellipsis; }
.seat.drop .ring, .seat:hover .ring { transform: translateY(-2px) scale(1.12) rotate(-3deg); }
.seat.pop .ring { animation: pop .45s cubic-bezier(.34, 1.8, .64, 1); }
.pkbar { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin: 0; }
.pkbar button { appearance: none; border: 0; cursor: pointer; background: var(--mist); color: var(--ink); border-radius: 999px; padding: 7px 11px; font: 650 12px/1 var(--display);
  transition: transform .25s cubic-bezier(.34, 1.5, .64, 1), background-color .2s; }
.pkbar button:hover:not(:disabled) { transform: translateY(-2px); background: #EBEBF0; }
.pkbar button:disabled { opacity: .45; cursor: default; }
.bars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 18px; align-items: end; }
.bar { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; align-items: end; }
.bar .col { grid-row: span 2; width: 24px; height: 42px; border-radius: 6px; background: var(--mist); position: relative; overflow: hidden; }
.bar .col i { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; transform-origin: 50% 100%; transform: scaleY(var(--v, 0)); border-radius: 8px 8px 0 0; transition: transform .7s cubic-bezier(.34, 1.25, .64, 1); }
.bar.c .col i { background: var(--crew); } .bar.o .col i { background: var(--imp); }
.bar .num { font: 800 clamp(22px, 2.3vw, 30px)/1 var(--display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.bar.c .num { color: var(--crew); } .bar.o .num { color: var(--imp); }
.bar .lb { font: 650 13px/1.2 var(--display); color: var(--ink); }
.ghost { position: fixed; z-index: 60; pointer-events: none; display: grid; place-items: center; width: 34px; height: 34px; transform: translate(-50%, -50%) rotate(-4deg); box-shadow: 0 16px 32px -14px rgba(29, 29, 60, .5); background: #fff; border-radius: 50%; padding: 6px; }

/* ------------------------------------------------------------------ the end: reach out, then a small teaser of the next posts */
.next { padding-bottom: 72px; }
.cta { margin: 0; text-align: left; border-radius: 24px; padding: 36px 36px 34px; background: var(--mist); }
.cta p { font: 800 clamp(20px, 2.2vw, 26px)/1.18 var(--display); letter-spacing: -0.02em; color: var(--ink); margin: 0 0 20px; max-width: 24em; text-wrap: balance; }
.cta a { display: inline-flex; align-items: center; gap: 7px; font: 600 15px/1 var(--display); color: #fff; background: var(--ink); padding: 14px 20px; border-radius: 999px;
  text-decoration: none; user-select: text; transition: transform .25s cubic-bezier(.34, 1.5, .64, 1), background-color .2s; }
.cta a:hover { background: #3A3A40; transform: translateY(-2px); }
.soon { margin: 56px 0 0; }
.parts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; text-align: left; align-items: start; }
.part { border: 1.5px solid var(--line); border-radius: 16px; padding: 14px 16px 15px; rotate: var(--r, 0deg);
  transition: rotate .3s cubic-bezier(.34, 1.4, .64, 1), translate .3s cubic-bezier(.34, 1.4, .64, 1), box-shadow .3s; }
.part:nth-child(1) { --r: -.8deg; } .part:nth-child(2) { --r: .9deg; }
.part:hover { rotate: 0deg; translate: 0 -3px; box-shadow: 0 14px 28px -20px rgba(29, 29, 60, .4); }
.part .n { font: 700 11px/1 var(--display); color: var(--dim); margin: 0 0 7px; }
.part .t { font: 800 16.5px/1.15 var(--display); letter-spacing: -0.015em; color: var(--ink); margin: 0 0 5px; }
.part p { font: 400 14px/1.42 var(--serif); margin: 0; }
.signoff { text-align: center; padding-top: 64px; }
.signoff p { font: 750 18px/1.2 var(--display); letter-spacing: -0.02em; color: var(--ink); margin: 0; }


/* ================================================================== v5 (Jack's call, 10 Nov 2026) */
/* the opening: the wall of real games, held on the screen while scrolling zooms into it; then the line */
.wall { position: relative; height: 330vh; height: 330svh; background: #0B0F1E; }
.wstick { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.wstick video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: #0B0F1E; }
.wshade { position: absolute; inset: 0; pointer-events: none; opacity: var(--sh, .1);
  background: radial-gradient(ellipse 80% 70% at 42% 60%, rgba(7, 9, 22, .62), rgba(7, 9, 22, .9)); }
.wbar, .quote { position: absolute; left: 0; right: 0; z-index: 2; }
.wbar { top: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 22px 0; }
.wbar img { height: 26px; width: auto; display: block; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .45)); }
.wbar .pmt { font: 750 15px/1 var(--display); letter-spacing: -0.015em; color: #fff; white-space: nowrap; text-shadow: 0 1px 10px rgba(0, 0, 0, .5); }
.quote { bottom: max(64px, 13vh); opacity: var(--q, 0); translate: 0 calc((1 - var(--q, 0)) * 28px); }
.quote h1 { font: 800 clamp(36px, 5.6vw, 82px)/1.02 var(--display); font-variation-settings: "opsz" 96, "wdth" 90; letter-spacing: -0.035em;
  color: #fff; margin: 0 0 22px; max-width: 13.5em; text-wrap: balance; text-shadow: 0 2px 30px rgba(0, 0, 0, .35); }
.quote h1 .n { background: linear-gradient(95deg, #B3A1FF, #B3A1FF); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; white-space: nowrap; }
.qsub { display: flex; flex-wrap: wrap; gap: 8px 30px; margin: 0; font: 650 clamp(15px, 1.4vw, 19px)/1.2 var(--display); color: rgba(255, 255, 255, .78); }
.qsub b { color: #fff; font-weight: 800; font-variant-numeric: tabular-nums; }
.cue { position: absolute; left: 50%; bottom: 22px; translate: -50% 0; margin: 0; z-index: 2; display: grid; justify-items: center; gap: 8px; opacity: var(--cue, 1);
  font: 700 11px/1 var(--display); letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .78); }
.cue i { width: 2px; height: 26px; border-radius: 1px; background: rgba(255, 255, 255, .25); overflow: hidden; position: relative; }
.cue i::after { content: ""; position: absolute; left: 0; right: 0; top: -40%; height: 40%; background: #fff; animation: cue 1.6s cubic-bezier(.5, 0, .3, 1) infinite; }
@media (prefers-reduced-motion: reduce) { .cue i::after { animation: none; top: 30%; } }

/* shared heading pieces */
.kick { font: 800 12.5px/1.2 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--purple); margin: 0 0 12px; }
.dek { font: 500 16px/1.45 var(--display); color: var(--dim); margin: 0; max-width: 40em; }
.dek b { color: var(--ink); font-weight: 700; }
.h2s { font: 800 clamp(26px, 2.8vw, 36px)/1.1 var(--display); letter-spacing: -0.03em; color: var(--ink); margin: 0 0 12px; text-wrap: balance; max-width: 22em; }

/* the benchmark: full width under the opening */
.bench { padding-top: 88px; }
.bhead { max-width: 820px; margin-bottom: 22px; }
.bhead h2 { font: 800 clamp(30px, 3.5vw, 50px)/1.06 var(--display); font-variation-settings: "opsz" 96, "wdth" 92; letter-spacing: -0.032em; color: var(--ink); margin: 0 0 14px; text-wrap: balance; }
.bhead h2 .hl { padding: 0 .1em; margin: 0 -.04em; background-position: 0 62%; }
.on .bhead h2 .hl { background-size: 100% 84%; }
.labs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.labs button { appearance: none; display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--line); background: var(--paper); border-radius: 999px;
  padding: 5px 11px 5px 7px; font: 650 12.5px/1 var(--display); color: var(--ink); cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s, transform .25s cubic-bezier(.34, 1.5, .64, 1); }
.labs button:hover { transform: translateY(-1px); border-color: #CFCFD6; }
.labs button svg { width: 15px; height: 15px; flex: none; }
.labs button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.labs .hint { align-self: center; font: 500 12px/1 var(--fig); color: var(--faint); margin-left: 4px; }
#v-scatter .ax.z { stroke: rgba(26, 37, 69, .32); }
.mk.dim { opacity: .14; }
.mk.dim .lbl { opacity: 0; }

/* how the game works */
.gameband .gb { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center; }
.gtext h2 { font-size: clamp(32px, 3.6vw, 52px); line-height: 1.04; margin-bottom: 18px; }
.gtext .like { font: 500 17px/1.45 var(--display); color: var(--dim); margin: 0; max-width: 24em; }
.gright { min-width: 0; }
.gright .ten { justify-content: space-between; }

/* how we got them */
.growth h2 { font: 800 clamp(28px, 3.1vw, 42px)/1.08 var(--display); letter-spacing: -0.032em; color: var(--ink); margin: 0 0 14px; text-wrap: balance; max-width: 18em; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-top: 30px; }
.stat { border-radius: 16px; background: var(--mist); padding: 18px 18px 16px; }
.stat .v { display: block; font: 800 clamp(30px, 3vw, 40px)/1 var(--display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--ink); }
.stat:nth-child(4n+1) .v { color: #5B2BC9; } .stat:nth-child(4n+2) .v { color: #1D1D1F; } .stat:nth-child(4n+3) .v { color: #2747D9; } .stat:nth-child(4n+4) .v { color: #0E8F7E; }
.stat .l { display: block; margin-top: 8px; font: 600 13.5px/1.3 var(--display); color: var(--ink); }
.stat .s { display: block; margin-top: 4px; font: 500 12px/1.3 var(--display); color: var(--dim); }

/* the advanced part's door */
.advband { background: var(--mist); padding-block: 64px; }
.advband h2 { font: 800 clamp(30px, 3.4vw, 46px)/1.05 var(--display); letter-spacing: -0.035em; color: var(--ink); margin: 0 0 10px; }
.advband .label { font: 700 12px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--dim); margin: 0 0 12px; }
.pick .copy p.aside { font-size: 13px; color: var(--faint); }

/* the chart and its lab list beside it */
.bgrid { display: grid; grid-template-columns: minmax(0, 1fr) 168px; column-gap: 28px; align-items: start; }
.labs.side { flex-direction: column; flex-wrap: nowrap; gap: 4px; margin: 0; padding-top: 4px; }
.labs.side::before { content: "Show a lab"; font: 700 11px/1 var(--fig); letter-spacing: .07em; text-transform: uppercase; color: var(--fig-dim); margin: 0 0 8px 2px; }
.labs.side button { border-color: transparent; justify-content: flex-start; padding: 6px 10px 6px 8px; }
.labs.side button:hover { border-color: var(--line); transform: translateX(2px); }
.cutview { margin-top: 22px; }
.views { margin: 0 0 10px; }
.views button { padding: 7px 13px; }
.cutview .tk2 { margin: 0 0 6px; font: 600 15px/1.4 var(--display); color: var(--ink); min-height: 1.4em; }
.mk.mv { transition: transform .9s cubic-bezier(.6, 0, .2, 1), opacity .4s ease; }
.xax { transition: opacity .5s ease; }
/* three more cuts */
.cutgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; margin-top: 26px; }
.cut { min-width: 0; }
.cut h3 { margin: 0 0 4px; font: 800 16.5px/1.15 var(--display); letter-spacing: -0.015em; color: var(--ink); }
.cut .tk2 { margin: 0 0 12px; font: 500 13px/1.35 var(--display); color: var(--dim); min-height: 2.7em; }
.cut svg { display: block; width: 100%; height: auto; overflow: visible; }
.cut .lg { cursor: pointer; }
.cnote { margin: 18px 0 0; font: 500 12px/1.35 var(--fig); color: var(--faint); }

/* same moment, different minds */
.mlist { display: grid; gap: 20px; margin-top: 26px; }
.mo { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 22px; border: 1.5px solid var(--line); border-radius: 20px; padding: 18px; align-items: start; }
.mo .scn { position: relative; aspect-ratio: 4 / 3; border-radius: 14px; background: linear-gradient(180deg, #EEF1FA, #E3E7F4); overflow: hidden; }
.mo .scn .kd { position: absolute; width: 15%; aspect-ratio: 172 / 217; translate: -50% -100%; }
.mo .scn .kd img { width: 100%; height: 100%; object-fit: contain; display: block; filter: drop-shadow(0 6px 6px rgba(20, 20, 40, .16)); }
.mo .scn .kd.far { opacity: .55; }
.mo .scn .badge { position: absolute; left: 50%; bottom: calc(100% + 6px); translate: -50% 0; width: 30px; height: 30px; border-radius: 50%; background: #fff; display: grid; place-items: center;
  box-shadow: 0 0 0 1.6px var(--fig-ink), 0 6px 12px -6px rgba(20, 20, 40, .4); transition: transform .35s cubic-bezier(.34, 1.7, .64, 1); }
.mo .scn .badge svg { width: 17px; height: 17px; color: var(--fig-ink); }
.mo .scn .badge.swap { transform: scale(.4) rotate(-20deg); }
.mo .scn .tagline { position: absolute; left: 10px; bottom: 9px; right: 10px; font: 600 11px/1.3 var(--fig); color: var(--fig-dim); }
.mo .num { font: 700 11px/1 var(--fig); letter-spacing: .07em; text-transform: uppercase; color: var(--fig-dim); margin: 0 0 6px; }
.mo h3 { margin: 0 0 6px; font: 800 18px/1.15 var(--display); letter-spacing: -0.02em; color: var(--ink); }
.mo .sit { margin: 0 0 14px; font: 500 14px/1.4 var(--display); color: var(--dim); }
.mo .who { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.mo .who button { appearance: none; border: 1.5px solid var(--line); background: var(--paper); border-radius: 999px; width: 34px; height: 34px; display: grid; place-items: center; cursor: pointer; padding: 0;
  transition: transform .25s cubic-bezier(.34, 1.5, .64, 1), border-color .2s, background-color .2s; }
.mo .who button svg { width: 17px; height: 17px; }
.mo .who button:hover { transform: translateY(-2px); }
.mo .who button[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 1.5px var(--ink); }
.mo .think { position: relative; background: var(--mist); border-radius: 16px; padding: 13px 15px 14px; min-height: 7.5em; }
.mo .think::before { content: ""; position: absolute; left: -7px; top: 22px; width: 14px; height: 14px; background: var(--mist); border-radius: 50%; }
.mo .think .m { font: 700 11px/1 var(--fig); letter-spacing: .06em; text-transform: uppercase; color: var(--fig-dim); margin: 0 0 7px; }
.mo .think .tx { font: 400 15px/1.45 var(--serif); color: var(--text); margin: 0; white-space: pre-line; }
.mo .think .tx .car { display: inline-block; width: 2px; height: 1em; background: var(--ink); vertical-align: -2px; margin-left: 1px; animation: car 1s steps(2) infinite; }
.mo .did { margin: 10px 0 0; font: 600 13.5px/1.35 var(--display); color: var(--ink); min-height: 1.35em; }
.mo .did em { font-style: normal; color: var(--dim); font-weight: 500; }
@media (max-width: 640px) { .mo .who { flex-wrap: nowrap; gap: 4px; } .mo .who button { flex: 0 1 30px; min-width: 0; width: 30px; height: 30px; } .mo .who button svg { width: 14px; height: 14px; } .mo .bub .bt { font-size: 12.5px; } }
.mo .aft { margin: 12px 0 0; padding-top: 10px; border-top: 1px dashed var(--line); font: 500 13px/1.4 var(--display); color: var(--dim); }
.mo .nt { margin: 6px 0 0; font: 500 12px/1.4 var(--display); color: var(--dim); opacity: .8; }

/* what comes next */
.next .h2s { max-width: 20em; margin-bottom: 26px; }
.ahead { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 56px; align-items: stretch; }
.card { border: 1.5px solid var(--line); border-radius: 20px; padding: 20px 20px 18px; min-width: 0; }
.card .t { font: 800 18px/1.15 var(--display); letter-spacing: -0.02em; color: var(--ink); margin: 0 0 6px; }
.card p { font: 400 15px/1.45 var(--serif); }
.card p.small { font-size: 13.5px; color: var(--dim); margin-top: 14px; }
.card .viz { margin-top: 14px; }
.lens { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.lens li { font: 700 12.5px/1 var(--display); color: var(--ink); background: var(--mist); border-radius: 999px; padding: 7px 11px; }
.lens li:nth-child(1) { color: #1D1D1F; } .lens li:nth-child(2) { color: #5B2BC9; } .lens li:nth-child(3) { color: #0E8F7E; } .lens li:nth-child(4) { color: #2747D9; }


/* the picker's nudge: a hand that drags a player to a seat, once, until you try it */
.nudge { position: absolute; z-index: 5; pointer-events: none; left: 0; top: 0; opacity: 0; }
.nudge .chip { position: absolute; left: -17px; top: -17px; width: 34px; height: 34px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 12px 24px -12px rgba(29, 29, 60, .55); }
.nudge .chip svg { width: 20px; height: 20px; }
.nudge .hand { position: absolute; left: 4px; top: 6px; width: 26px; height: 26px; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .25)); }
.stage { position: relative; }
.dragtip { position: absolute; z-index: 4; font: 700 11.5px/1 var(--display); color: #fff; background: var(--ink); padding: 6px 9px; border-radius: 999px; white-space: nowrap;
  pointer-events: none; opacity: 0; translate: 0 4px; transition: opacity .3s ease, translate .3s ease; }
.dragtip.on { opacity: 1; translate: 0 0; }
.dragtip::after { content: ""; position: absolute; left: 50%; top: 100%; margin-left: -4px; border: 4px solid transparent; border-top-color: var(--ink); }

/* ---- v5.2 (Jack's notes on v5, 11 Nov): the wall wipes away and the line stands alone; moments as three boxes; matchups; advanced folds ---- */
.wstick video { filter: blur(calc(var(--w, 0) * 12px)); transform: scale(calc(1 + var(--w, 0) * .04)); }
.wipe { position: absolute; inset: 0; z-index: 2; background: var(--paper); pointer-events: none;
  transform: translateY(calc((1 - var(--w, 0)) * 104%)); }
.wipe::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 22vh; background: linear-gradient(180deg, rgba(255, 255, 255, 0), var(--paper)); }
.wbar { opacity: calc(1 - var(--w, 0)); z-index: 3; }
.quote { z-index: 4; top: 50%; bottom: auto; translate: 0 calc(-50% + (1 - var(--q, 0)) * 30px); }
.quote h1 { color: var(--ink); text-shadow: none; font-size: clamp(40px, 6.4vw, 96px); max-width: 12.5em; margin-bottom: 26px; }
.quote h1 .n { background-image: linear-gradient(95deg, var(--purple), var(--purple)); }
.qsub { color: var(--dim); }
.qsub b { color: var(--ink); }
.cue { z-index: 3; }

/* how the game works: the words and the ten on the left, the highlights on the right */
.gameband .gb { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); column-gap: 56px; align-items: center; }
.gtext .ten { margin: 26px 0 22px; justify-content: space-between; }
.gtext .like { margin-bottom: 0; }

/* the same moment in different minds: three boxes side by side */
.moments .dek { margin-bottom: 26px; }
.mgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.mo { display: flex; flex-direction: column; gap: 14px; border: 1.5px solid var(--line); border-radius: 20px; padding: 12px 12px 16px; background: var(--paper); min-width: 0; }
.mo .mstage { position: relative; flex: none; width: 100%; aspect-ratio: 4 / 3; border-radius: 13px; overflow: hidden; background: #0E1222; isolation: isolate; }
.mo .mstage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .35s ease; }
.mo .mstage video.off { opacity: 0; }
.mo .mstage.replay { cursor: pointer; }
.mo .badge:empty { opacity: 0; transform: scale(.3); }
.mo .where { transition: opacity .45s ease, transform .45s ease; }
.mo .mstage.replay:not(.at) .where { opacity: 0; transform: translateY(-4px); }
.mo .bub.long { max-width: calc(100% - 16px); }
.mo .bub.long .bt { font-size: 12px; line-height: 1.34; }
@media (max-width: 640px) { .mo .bub { max-width: calc(100% - 20px); } .mo .bub.long .bt { font-size: 11.5px; } }
.mo .mstage .vz { position: absolute; inset: 0; transform-origin: 0 0; will-change: transform; }
.mo .scn { position: absolute; inset: 0; background: linear-gradient(180deg, #EEF1FA, #E3E7F4); }
.mo .scn .kd { position: absolute; width: 15%; aspect-ratio: 172 / 217; translate: -50% -100%; }
.mo .scn .kd img { width: 100%; height: 100%; object-fit: contain; display: block; filter: drop-shadow(0 6px 6px rgba(20, 20, 40, .16)); }
.mo .scn .kd.far { opacity: .55; }
.mo .where { position: absolute; left: 10px; top: 10px; z-index: 3; font: 700 10.5px/1 var(--fig); letter-spacing: .06em; text-transform: uppercase; color: #fff;
  background: rgba(10, 14, 30, .55); padding: 5px 7px; border-radius: 6px; backdrop-filter: blur(4px); }
.mo .scn + .where, .mo .scn ~ .where { color: var(--fig-dim); background: rgba(255, 255, 255, .7); }
.mo .badge { position: absolute; z-index: 6; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; background: #fff; display: grid; place-items: center;
  box-shadow: 0 0 0 1.5px var(--ink), 0 4px 10px rgba(10, 14, 30, .3); transition: transform .22s cubic-bezier(.3, 1.6, .5, 1); will-change: left, top; }
.mo .badge svg { width: 16px; height: 16px; color: var(--fig-ink); }
.mo .badge.an { background: #F1ECE1; }
.mo .badge.swap { transform: scale(.3) rotate(-25deg); }
.mo .bub { position: absolute; z-index: 4; left: 0; top: 10px; max-width: min(78%, 340px); padding: 10px 12px 11px; border-radius: 16px; background: #fff; color: var(--ink);
  box-shadow: 0 10px 28px -10px rgba(10, 14, 30, .55), 0 0 0 1.5px var(--ink); transform-origin: var(--ox, 50%) 100%;
  transition: transform .28s cubic-bezier(.3, 1.45, .5, 1), opacity .2s ease; will-change: left, top; }
.mo .bub.out { transform: scale(.4); opacity: 0; }
.mo .bub .bm { margin: 0 0 4px; font: 700 10px/1 var(--fig); letter-spacing: .06em; text-transform: uppercase; color: var(--fig-dim); }
.mo .bub .bt { margin: 0; font: 500 13.5px/1.38 var(--display); white-space: pre-line; overflow-wrap: anywhere; }
.mo .bub .bt .car { display: inline-block; width: 2px; height: 1em; background: var(--ink); vertical-align: -2px; margin-left: 1px; animation: car 1s steps(2) infinite; }
.mo .dot { position: absolute; z-index: 4; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1.5px var(--ink); translate: -50% -50%; transition: opacity .2s ease; will-change: left, top; }
.mo .tail { position: absolute; z-index: 5; width: 14px; height: 10px; margin-left: -7px; background: #fff; clip-path: polygon(0 0, 100% 0, 50% 100%);
  filter: drop-shadow(0 1.5px 0 var(--ink)); transition: opacity .2s ease; will-change: left, top; }
.mo.speech .dot, .mo:not(.speech) .tail { display: none; }
.mo .hook { margin: 2px 4px 0; font: 750 16.5px/1.3 var(--display); letter-spacing: -0.012em; color: var(--ink); text-wrap: pretty; }
.mo .who { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 2px; }
.mo .who button { appearance: none; border: 1.5px solid var(--line); background: var(--paper); border-radius: 999px; width: 36px; height: 36px; display: grid; place-items: center; cursor: pointer; padding: 0;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.mo .who button svg { width: 17px; height: 17px; }
.mo .who button.an { background: #F1ECE1; }
.mo .who button:hover { transform: translateY(-2px); }
.mo .who button[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 1.5px var(--ink); }
.mo .did { margin: 0 4px; font: 600 13px/1.35 var(--display); color: var(--ink); min-height: 1.35em; }
.mo .did em { font-style: normal; color: var(--dim); font-weight: 500; }
@media (max-width: 640px) { .mo .who { flex-wrap: nowrap; gap: 4px; } .mo .who button { flex: 0 1 30px; min-width: 0; width: 30px; height: 30px; } .mo .who button svg { width: 14px; height: 14px; } .mo .bub .bt { font-size: 12.5px; } }
/* 10 makers in one row (PL2): buttons shrink together, stay round */
.mo .who { flex-wrap: nowrap; gap: 5px; width: 100%; align-self: stretch; box-sizing: border-box; }
.mo .who button { flex: 0 1 36px; width: auto; height: auto; aspect-ratio: 1; min-width: 0; }
@media (max-width: 640px) { .mo .who { gap: 3px; } .mo .who button svg { width: 13px; height: 13px; } }
.mo .did .mn { font: 500 12px/1.35 var(--display); color: var(--dim); }

/* pick any matchup */
.presets { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 14px; }
.presets button { appearance: none; border: 1.5px solid var(--line); background: var(--paper); border-radius: 999px; padding: 8px 13px; cursor: pointer;
  font: 650 13.5px/1.1 var(--display); color: var(--ink); transition: transform .15s ease, border-color .15s ease, background .15s ease; }
.presets button:hover { transform: translateY(-1px); border-color: #CFCFD6; }
.presets button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.presets button { display: inline-flex; align-items: baseline; gap: 6px; font: 700 13.5px/1 var(--display); color: var(--ink); }
.presets button i { font: 600 10.5px/1 var(--fig); font-style: normal; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); }
.presets button[aria-pressed="true"] i { color: rgba(255, 255, 255, .6); }
.presets button span { transition: transform .3s cubic-bezier(.3, 1.4, .5, 1); }
.presets button.swapped { flex-direction: row-reverse; }
.seatkey { display: flex; align-items: center; gap: 6px; margin: 0; font: 600 12.5px/1 var(--display); color: var(--dim); }
.seatkey i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-left: 8px; }
.seatkey i:first-child { margin-left: 0; }
.seatkey i.c { background: var(--crew); } .seatkey i.o { background: var(--imp); }

/* the advanced part: a button, then everything opens in place */
.advbtn { margin-top: 22px; appearance: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; padding: 13px 18px 13px 20px; border-radius: 999px;
  background: var(--ink); color: #fff; font: 700 15px/1 var(--display); transition: transform .15s ease, box-shadow .2s ease; }
.advbtn:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -12px rgba(10, 14, 30, .6); }
.advbtn i { width: 18px; height: 18px; display: grid; place-items: center; transition: transform .35s cubic-bezier(.3, 1.4, .5, 1); }
.advbtn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.advbtn[aria-expanded="true"] i { transform: rotate(180deg); }
.advanced.opening { animation: advin .7s cubic-bezier(.2, .8, .2, 1) both; }

/* how a game is set up */
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
.fact { background: var(--mist); border-radius: 16px; padding: 16px 18px 17px; }
.fact b { display: block; font: 800 16px/1.2 var(--display); letter-spacing: -0.012em; color: var(--ink); margin-bottom: 6px; }
.fact p { margin: 0; font: 400 15px/1.45 var(--serif); color: var(--text); }
.setup .why { margin: 18px 0 0; font: 400 16px/1.5 var(--serif); color: var(--text); }
.setup .why b { font-family: var(--display); }

@media (max-width: 900px) {
  .mgrid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding-bottom: 6px; margin-inline: -4px; padding-inline: 4px; }
  .mgrid .mo { flex: none; width: min(84%, 380px); scroll-snap-align: start; }
}
@media (max-width: 640px) {
  .gtext .ten { margin: 20px 0 16px; }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .quote h1 { font-size: clamp(36px, 10.5vw, 54px); }
}

/* ---- v5 design pass (reviewer notes, 11 Nov): one headline system, readable film notes, steady tabs ---- */
.bhead h2, .gtext h2, .growth h2, .advband h2, .next .h2s { font: 800 clamp(30px, 3.5vw, 50px)/1.06 var(--display); font-variation-settings: "opsz" 96, "wdth" 92; letter-spacing: -0.032em; }
.mxhead h2, .pick h2, .cuts .h2s, .moments .h2s, .full h2 { font: 800 clamp(26px, 2.8vw, 36px)/1.1 var(--display); letter-spacing: -0.03em; }
.gameband .label, .advband .label { font: 800 12.5px/1.2 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--purple); margin: 0 0 12px; }
.mxhead p, .pick .copy > p:not(.aside), .full .copy > p.intro { font: 500 16px/1.45 var(--display); color: var(--dim); }
.labs button svg { fill: currentColor; }
.mind .body { font-size: 13.5px; line-height: 1.42; }
.mind .two .body { font-size: 13px; line-height: 1.4; }
.film .pp { left: auto; top: auto; right: 16px; bottom: 34px; margin: 0; }
.cutview .tk2 { min-height: 2.8em; }
.ahead { align-items: start; }
.wall { height: 270vh; height: 270svh; }
@media (pointer: coarse) { .labs button, .views button, .pkbar button { min-height: 36px; } }
@media (min-width: 641px) and (max-width: 900px) { .copy, .prose, .dek, .full .copy { max-width: 640px; } .reel { max-width: 640px; } .felt { max-width: 560px; margin-inline: auto; } }
@media (max-width: 640px) { .cutview .tk2 { min-height: 4.2em; } .views { flex-wrap: nowrap; overflow-x: auto; } .views button { flex: none; } .mx .rh .nm { overflow-wrap: anywhere; hyphens: auto; } }

@media (max-width: 900px) {
  .cutgrid, .ahead, .bgrid { grid-template-columns: minmax(0, 1fr); }
  .labs.side { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; order: -1; margin: 0 calc(-1 * var(--gr)) 12px calc(-1 * var(--gl)); padding: 2px var(--gr) 6px var(--gl); scrollbar-width: none; }
  .labs.side::-webkit-scrollbar { display: none; }
  .labs.side::before { display: none; }
  .labs.side button { border-color: var(--line); flex: none; }
  .mo { grid-template-columns: minmax(0, 1fr); }
  .gameband .gb { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .bench { padding-top: 64px; }
  .quote { bottom: max(56px, 12vh); }
}

/* ------------------------------------------------------------------ narrow screens: one column, picture first */
@media (max-width: 900px) {
  .scene, .pick .scene, .gb, .wins { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .lead2 { grid-template-columns: minmax(0, 1fr); grid-template-areas: "claim" "res" "board"; grid-template-rows: auto; row-gap: 28px; padding-top: 30px; }
  .full .stage { order: 0; }
  .band { padding-block: 56px; }
  .hero { padding-bottom: 56px; }
  h2.big { margin-bottom: 36px; }
  h2.big .ann { margin: 0 .3em 0 .35em; }
  .wins { row-gap: 12px; }
  .stage { order: -1; }
  .pick .stage { order: 0; }
  .stage::after { display: none; }
  .parts { grid-template-columns: minmax(0, 1fr); }
  :scope { --gap: 112px; }
  :scope { --holdtop: 16px; }
  .castrow { margin-top: 56px; }
}
@media (max-width: 640px) {
  .growth .stats { grid-template-columns: minmax(0, 1fr); }
  .mind .two { grid-template-columns: minmax(0, 1fr); }
  .cta { padding: 26px 22px; }
  .seat .nm { font-size: 9px; max-width: 50px; }
  .mx .h { font-size: 9.5px; letter-spacing: -0.01em; gap: 4px; }
  .mx .rh { gap: 5px; padding-right: 5px; }
  .mx .rh .nm { white-space: normal; text-wrap: balance; }
  .mx .rh .ic { width: 24px; }
  .mx .h:not(.rh) .ic { flex-direction: column; }
  .mx .corner { font-size: 8.5px; letter-spacing: .02em; }
  .bignums { column-gap: 20px; }
  .six { grid-template-columns: minmax(0, 1fr); row-gap: 22px; }
  .ten { justify-content: space-between; }
  /* a phone has one column: no box keeps room for a second line it may not have */
  .mind .body, .mind .two .body, .mind .meta .body { min-height: 0; }
  .cta p { max-width: none; text-wrap: pretty; }
  .cta a { display: flex; flex-direction: column; gap: 4px; padding: 13px 18px; text-align: center; line-height: 1.2; }
  .cta a i { display: none; }
}
@media (prefers-reduced-motion: reduce) { .mk .pop, .six li, .hl, .cast .kid, .mind mark, .dive > .body, .ten .k, .ten .k .pin { transition: none; animation: none; } }

/* ================================================================== call 2 (Jack, 10 Nov 2026 late) */
/* titles take the whole width, with no early wrap; every eyebrow is grey */
h2.big, .growth h2, .h2s, .next .h2s, .bhead, .bhead h2, .pick h2, .quote h1, .tsec h2 { max-width: none; text-wrap: wrap; }
.kick, .gameband .label, .advband .label, .tsec .label { font: 800 12.5px/1.2 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); margin: 0 0 14px; }
.label .sep::before { content: "·"; margin: 0 .5em; }

/* the opening: the wall plays all the time; scrolling only zooms. At the end the whole screen blurs and darkens into the line. */
.wall { height: 220vh; height: 220svh; background: #070A18; }
.wlv { position: absolute; inset: 0; overflow: hidden; background: #070A18; filter: blur(calc(var(--w, 0) * 16px)); transform: scale(calc(1 + var(--w, 0) * .06)); }
.wlv .fr { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; will-change: transform; }
.wstick .wlv video { position: absolute; inset: auto; display: block; width: 1920px; height: 1080px; object-fit: fill; filter: none; transform-origin: 0 0; background: transparent; }
.wlv video.off { visibility: hidden; }
.wfog { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: var(--w, 0);
  background: radial-gradient(ellipse 90% 80% at 50% 50%, rgba(7, 10, 24, .62), rgba(7, 10, 24, .86)); }
.wbar { padding-block: 26px 0; align-items: center; }
.wbar img { height: clamp(32px, 3.4vw, 52px); }
.wbar .pmt { font: 650 clamp(14px, 1.15vw, 16px)/1 var(--display); letter-spacing: -0.005em; color: rgba(255, 255, 255, .86); text-shadow: 0 1px 12px rgba(0, 0, 0, .45); }
.quote h1 { color: #fff; text-shadow: 0 2px 40px rgba(0, 0, 0, .35); font-size: clamp(34px, 4.9vw, 74px); line-height: 1.06; margin: 0; text-wrap: pretty; }
.quote h1 .n { background-image: linear-gradient(95deg, #B3A1FF, #B3A1FF); }
.quote h1 .n b { font-weight: inherit; color: inherit; font-variant-numeric: tabular-nums; }
.cue { bottom: 28px; gap: 0; }
.cue i { width: 3px; height: 52px; border-radius: 2px; background: rgba(255, 255, 255, .2); box-shadow: 0 0 14px rgba(255, 255, 255, .12); }
.cue i::after { height: 42%; background: #fff; box-shadow: 0 0 8px rgba(255, 255, 255, .9); border-radius: 2px; }

/* the benchmark */
.bench { padding-top: 104px; }
.bhead { margin-bottom: 36px; }
.bhead h2 { font-size: clamp(30px, 3.9vw, 56px); line-height: 1.07; margin: 0 0 18px; }
.bhead h2 sup { font-size: .5em; line-height: 0; vertical-align: .55em; color: var(--dim); margin-left: .02em; }
.bhead .fn { font: 500 13.5px/1.4 var(--display); color: var(--faint); margin: 0; }
.labs.side::before { content: none; display: none; }
.labs.side { gap: 6px; padding-top: 2px; }
.labs.side button { width: 100%; border: 1.5px solid var(--line); border-radius: 11px; background: #F7F7FA; color: var(--faint); padding: 8px 10px 8px 9px;
  transition: background-color .2s, border-color .2s, color .2s, box-shadow .2s, transform .25s cubic-bezier(.34, 1.5, .64, 1); }
.labs.side button svg { opacity: .4; transition: opacity .2s; }
.labs.side button:hover { transform: translateX(2px); border-color: #D4D4DB; color: var(--dim); }
.labs.side button[aria-pressed="true"] { background: var(--paper); border-color: var(--ink); color: var(--ink); box-shadow: 0 6px 14px -12px rgba(16, 20, 40, .6); }
.labs.side button[aria-pressed="true"] svg { opacity: 1; }
.labs.side button.fly { margin-top: 10px; }
.taphint { position: absolute; z-index: 5; pointer-events: none; display: flex; align-items: center; gap: 5px; font: 600 11.5px/1 var(--display); color: var(--dim);
  opacity: 0; transition: opacity .6s ease; white-space: nowrap; }
.taphint.on { opacity: 1; }
.taphint svg { width: 19px; height: 19px; flex: none; transform-origin: 50% 50%; animation: tapme 1.4s ease-in-out infinite; }

/* how the game works */
.gameband { padding-block: 88px; }
.gtext .ten { margin: 30px 0 30px; }
.rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.rules li { padding-left: 20px; font: 500 clamp(17px, 1.45vw, 20px)/1.4 var(--display); color: var(--text); }
.rules li::before { content: ""; position: absolute; left: 0; top: .5em; width: 9px; height: 9px; border-radius: 50%; background: var(--crew); }
.rules li.imp::before { background: var(--imp); }
.rules b { font-weight: 800; }
.rules .crew b { color: var(--crew); } .rules .imp b { color: var(--imp); }

/* the biggest study */
.scale .scene { align-items: start; }

/* how we got them */
.growth h2 { margin-bottom: 14px; }
.growth .dek { max-width: 44em; }
.stats { margin-top: 34px; }
.stat .s { display: none; }

/* same moment, different minds */
.moments .kick { margin-bottom: 26px; }

/* which matchups */
.pick h2 { font: 800 clamp(30px, 3.5vw, 50px)/1.06 var(--display); font-variation-settings: "opsz" 96, "wdth" 92; letter-spacing: -0.032em; margin: 0; }
.pick .presets { margin: 22px 0 34px; }
.pkgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); column-gap: 64px; align-items: center; }
.pkgrid .shelf { display: grid; gap: 16px; }
.pkgrid .tiles { grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: 6px; justify-content: stretch; }
.pkgrid .pkbar { justify-content: flex-start; }
.pkgrid .stage { display: grid; justify-items: stretch; }
.pkgrid .felt { margin: 34px 6px 34px; }
.odds { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 18px; }
.odds .side { display: grid; gap: 5px; }
.odds .side.o { text-align: right; }
.odds .num { font: 800 clamp(26px, 2.6vw, 36px)/1 var(--display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.odds .c .num { color: var(--crew); } .odds .o .num { color: var(--imp); }
.odds .lb { font: 650 12.5px/1.2 var(--display); color: var(--dim); white-space: nowrap; }
.odds .split { display: flex; gap: 3px; height: 10px; border-radius: 999px; overflow: hidden; background: var(--mist); }
.odds .split i { display: block; height: 100%; min-width: 0; flex: var(--v, 0) 1 0%; transition: flex-grow .7s cubic-bezier(.34, 1.15, .64, 1); }
.odds .split .c { background: var(--crew); } .odds .split .o { background: var(--imp); }
.pick .reset { justify-self: center; appearance: none; border: 0; background: none; cursor: pointer; margin-top: 18px; padding: 6px 8px; font: 600 12.5px/1 var(--display); color: var(--dim);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line); }
.pick .reset:hover { color: var(--ink); text-decoration-color: currentColor; }

/* the way into the deep dive: one thin bar */
.advband { background: none; padding-block: 8px 72px; }
.ddbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; text-decoration: none; color: var(--ink); background: var(--mist); border-radius: 16px; padding: 22px 28px 22px 26px;
  transition: background-color .2s, transform .25s cubic-bezier(.34, 1.5, .64, 1); }
.ddbar:hover { background: #EDEDF2; }
.ddbar .tx { display: grid; gap: 8px; min-width: 0; }
.ddbar .label { margin: 0; }
.ddbar .h { font: 800 clamp(22px, 2.4vw, 32px)/1.1 var(--display); letter-spacing: -0.03em; }
.ddbar .arr { flex: none; display: grid; place-items: center; width: 22px; transition: transform .3s cubic-bezier(.34, 1.5, .64, 1); }
.ddbar .arr svg { width: 13px; height: 24px; fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ddbar:hover .arr { transform: translateX(5px); }

/* what comes next */
.next { padding-top: 32px; }
.next .h2s { margin-bottom: 30px; }
.ahead { align-items: stretch; margin-bottom: 18px; }
.card { display: flex; flex-direction: column; padding: 22px 22px 18px; }
.card .t { margin-bottom: 10px; }
.card .viz { margin-top: auto; padding-top: 10px; }
p.cta { display: block; margin: 0; padding: 22px 28px; border-radius: 16px; background: var(--ink); color: #fff; text-align: left;
  font: 700 clamp(16px, 1.5vw, 20px)/1.35 var(--display); letter-spacing: -0.01em; max-width: none; }
p.cta a { display: inline; padding: 0; border-radius: 0; background: none; color: #fff; font: inherit; user-select: text;
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; text-decoration-color: rgba(255, 255, 255, .45); }
p.cta a:hover { background: none; transform: none; text-decoration-color: #fff; }
.signoff { padding-top: 72px; }
/* the actor tree */
.tree text { font: 600 11px/1 var(--fig); fill: var(--fig-dim); }
.tree .br { fill: none; stroke-linecap: round; }
.tree .nd { stroke: #fff; stroke-width: 2; }

/* the deep dive: its own page, a faint grey */
.techview { background: #F4F4F7; }
.techview .tbar { background: rgba(244, 244, 247, .9); border-bottom-color: #E6E6EB; }
.tbar .back { background: none; padding: 8px 10px 8px 2px; gap: 9px; font-size: 14px; }
.tbar .back:hover { background: none; transform: translateX(-2px); }
.tbar .back svg { width: 8px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.techview .tsec { padding-block: 44px 52px; }
.techview .tsec.seats { padding-top: 64px; }
.tsec h2 { font: 800 clamp(26px, 2.8vw, 38px)/1.1 var(--display); letter-spacing: -0.03em; color: var(--ink); margin: 0 0 20px; }
.tsec .one { font: 400 18px/1.55 var(--serif); color: var(--text); max-width: 40em; margin: 0 0 22px; }
.tsec .stage iframe { background: transparent; }
.tsec .scene + .scene { margin-top: 0; }
.cuts .cutview { margin-top: 6px; }
.fgrid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); column-gap: 40px; align-items: start; }
.fgrid h2 { margin-bottom: 22px; }
.fgrid .film { margin: 6px; }

@media (min-width: 1000px) {
  .sec.wrap:not(.wide) h2.big, .sec.wrap:not(.wide) .growth h2, .growth h2, .next .h2s { width: min(1120px, calc(100vw - 2 * var(--gl) - (100vw - var(--col) - 32px) * .4)); max-width: none; }
}
/* the moments: the scene above, three named makers below */
.mo { gap: 12px; padding: 14px 12px 16px; }
.mo .hook { margin: 2px 4px 2px; font: 650 15.5px/1.38 var(--display); min-height: 5.52em; }
.mo .badge { display: none; }
.mo .who { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0; width: 100%; }
.mo .who button { flex: none; width: auto; height: auto; aspect-ratio: auto; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 6px;
  border: 1.5px solid var(--line); border-radius: 10px; background: #F7F7FA; padding: 8px 6px; font: 650 12px/1.15 var(--display); color: var(--dim);
  transition: background-color .2s, border-color .2s, color .2s, box-shadow .2s, transform .2s cubic-bezier(.34, 1.5, .64, 1); }
.mo .who button.an { background: #F7F7FA; }
.mo .who button span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mo .who button svg { width: 15px; height: 15px; flex: none; opacity: .45; transition: opacity .2s; }
.mo .who button:hover { transform: translateY(-1px); color: var(--ink); }
.mo .who button[aria-pressed="true"] { background: var(--paper); border-color: var(--ink); color: var(--ink); box-shadow: 0 6px 14px -12px rgba(16, 20, 40, .6); }
.mo .who button[aria-pressed="true"] svg { opacity: 1; }
.mo .did { min-height: 2.7em; }
@media (max-width: 640px) { .mo .who { gap: 4px; } .mo .who button { width: auto; height: auto; padding: 8px 4px; font-size: 11.5px; gap: 4px; } .mo .who button svg { width: 13px; height: 13px; } .mo .hook { min-height: 0; } }
/* the deep dive's charts: the same white cards as the first chart */
.tip .br.s u { background: var(--lc); } .tip .br.s b { color: var(--ink); }
.tip .tc .nm .vs { font-weight: 600; color: var(--dim); font-size: 12px; }
.tip .tc:not(:has(.lg)) .nm { white-space: normal; }
.techview .mxwrap { max-width: 680px; }
.techview .mxkey { max-width: 680px; }
.techview .cutview .views { margin-bottom: 18px; }
@media (max-width: 900px) {
  .bhead h2 br { display: none; }
  .pkgrid, .fgrid { grid-template-columns: minmax(0, 1fr); row-gap: 26px; }
  .fgrid .stage { order: -1; }
  .labs.side { order: 0; margin-top: 4px; }
  .labs.side button { width: auto; }
  .labs.side button.fly { margin-top: 0; }
  .gameband { padding-block: 64px; }
  .ddbar { padding: 18px 20px; }
}
@media (max-width: 640px) {
  .wbar img { height: 26px; }
  .wall { height: 205vh; height: 205svh; }
  .quote h1 { font-size: clamp(30px, 8.6vw, 44px); }
  p.cta { padding: 18px 20px; }
  p.cta a { display: inline; padding: 0; flex-direction: row; }
  .odds { column-gap: 12px; }
  .odds .lb { font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) { .taphint svg { animation: none; } }

/* ================================================================== call 3 (Jack, 10 Nov 2026 night): one centred grid for the whole
   page; words left and pictures right wherever they sit side by side; even spacing; the deep dive as a page of its own */
/* every section on the one wide column, centred; titles no wider than it */
@media (min-width: 1000px) { .sec.wrap:not(.wide) h2.big, .sec.wrap:not(.wide) .growth h2, .growth h2, .next .h2s { width: auto; } }
.caption, .bhead .fn, .growth .dek { font: 500 clamp(16px, 1.25vw, 18px)/1.45 var(--display); color: var(--dim); margin: 0; max-width: none; letter-spacing: -0.005em; }
.bhead .fn.strong { font: 700 clamp(18px, 1.5vw, 22px)/1.4 var(--display); color: var(--ink); letter-spacing: -0.01em; }  /* Jack 11 Nov: black and bold, not a grey caption */

/* the opening: a shorter run, the line centred over the wall in even lines */
.wall { height: 340vh; height: 340svh; }   /* 12 Nov (Jack): the zoom runs longer, in to about 15 games, and the wall holds still before the line */
.quote { text-align: center; }
.quote h1 { text-wrap: balance; max-width: 15.5em; margin-inline: auto; }

/* the benchmark: the hint as a small pill high in the empty part of the chart; the lab list ends level with the chart's floor */
.taphint { gap: 7px; font: 650 13px/1 var(--display); color: var(--ink); background: var(--paper); border: 1.5px solid var(--line); padding: 7px 13px 7px 9px;
  border-radius: 999px; box-shadow: 0 10px 24px -14px rgba(16, 20, 40, .45); flex-direction: row; transform: translateY(6px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .8, .2, 1); }
.taphint.on { transform: none; }
.taphint svg { width: 20px; height: 20px; }
.labs.side { display: flex; }
.labs.side button.fly { margin-top: 18px; }   /* 11 Nov (Jack): a small gap, not pushed to the floor */
@media (max-width: 900px) { .labs.side button.fly { margin-top: 0; } }
.mk .lead { transition: opacity .35s ease .15s; }
.mk.out .lead, .mk.dim .lead { opacity: 0; transition-delay: 0s; }
.cutbox.moving .lbl, .cutbox.moving .lead { opacity: 0 !important; transition: opacity .15s ease; }

/* the biggest study: words left, the chart right */
.scale .scene { grid-template-columns: minmax(0, 1fr) minmax(0, 580px); column-gap: 52px; }

/* how we got them */
.growth .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 36px; }
.stat { padding: 22px 22px 20px; border-radius: 18px; }
/* 12 Nov (Jack): three snug boxes, numbers in full, not stretched across the page */
.growth .stats { grid-template-columns: repeat(3, minmax(0, 264px)); gap: 14px; }
.growth .stat { padding: 20px 22px 19px; border-radius: 18px; display: flex; flex-direction: column; gap: 7px; }
.growth .stat .v { font-size: clamp(34px, 3.2vw, 44px); letter-spacing: -0.035em; }
.growth .stat .l { margin: 0; font: 650 15px/1.3 var(--display); color: var(--ink); max-width: 17em; text-wrap: pretty; letter-spacing: -0.005em; }
.growth .stat .l b { font-weight: 800; }
.growth .stat:nth-child(1) .l b { color: #5B2BC9; } .growth .stat:nth-child(2) .l b { color: #1D1D1F; } .growth .stat:nth-child(3) .l b { color: #2747D9; }

/* same moment, different minds: on a band of its own; white cards with even spacing all round, their parts lined up across the row */
.moments { position: relative; }
.moments > .holdin { position: relative; }
.moments > .holdin::before { content: ""; position: absolute; z-index: -1; top: calc(var(--gap) / -2); bottom: calc(var(--gap) / -2); left: 50%; width: 100vw; translate: -50% 0; background: var(--band); }
main { isolation: isolate; }
.mgrid { grid-template-rows: auto auto auto auto; gap: 0 20px; }
.mo { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 14px; padding: 20px; border: 0; border-radius: 24px; background: var(--paper);
  box-shadow: 0 1px 0 rgba(26, 37, 69, .05), 0 24px 48px -30px rgba(26, 37, 69, .38); }
.mo .mk { margin: 0; font: 800 11.5px/1.2 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.mo .mk .sep::before { content: "·"; margin: 0 .5em; }
.mo .hook { margin: 0; min-height: 0; font: 650 16px/1.42 var(--display); letter-spacing: -0.01em; color: var(--ink); }
.mo .mstage { border-radius: 16px; }
.mo .mstage video { transition: opacity .45s ease; }
.mo .where { left: 12px; top: 12px; }
/* the bubble: it eases in (no bounce), keeps its size while the words type, and the trail of dots rises from the head to it */
.mo .bub { transform-origin: var(--ox, 50%) 100%; transition: opacity .32s ease, transform .42s cubic-bezier(.2, .8, .2, 1); will-change: left, top, transform; }
.mo .bub, .mo .tail, .mo .dot { transition-property: opacity, transform; }
.mo .mstage.quiet .bub { opacity: 0; transform: translateY(8px) scale(.94); transition-duration: .2s, .2s; }
.mo .bub .bt { min-height: 1.38em; }
.mo .dot { opacity: 1; transform: scale(1); transition: opacity .3s ease, transform .35s cubic-bezier(.2, .8, .2, 1); }
.mo .dot:nth-of-type(3) { transition-delay: .0s; } 
.mo .mstage:not(.quiet) .dot { transition-delay: calc(var(--d, 0) * 1ms); }
.mo .mstage.quiet .dot, .mo .mstage.quiet .tail, .mo .mstage.nohead .dot { opacity: 0 !important; transform: scale(.3); transition-delay: 0s; }
.mo .mstage.nohead .bub { opacity: 0; }
/* the switch: three makers on a track; the white thumb slides to the one speaking and fills while the next one waits */
.seg { position: relative; display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); padding: 4px; border-radius: 14px; background: #F0F1F6; isolation: isolate; }
.seg .thumb { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: calc(4px + var(--i, 0) * (100% - 8px) / var(--n, 3)); width: calc((100% - 8px) / var(--n, 3));
  border-radius: 10px; background: var(--paper); box-shadow: 0 1px 2px rgba(16, 20, 40, .08), 0 6px 14px -8px rgba(16, 20, 40, .35); overflow: hidden; opacity: 0;
  transition: left .5s cubic-bezier(.3, .8, .25, 1), opacity .3s ease; }
.seg .thumb.on { opacity: 1; }
.seg .thumb .prog { position: absolute; left: 10px; right: 10px; bottom: 0; height: 2px; border-radius: 2px; background: var(--ink); opacity: .16; transform-origin: 0 50%; transform: scaleX(0); }
.seg.held .thumb .prog { display: none; }
.seg button { position: relative; z-index: 1; appearance: none; border: 0; background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 6px; border-radius: 10px; font: 650 13px/1.1 var(--display); color: var(--dim); min-width: 0; transition: color .25s ease; }
.seg button span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seg button svg { width: 15px; height: 15px; flex: none; opacity: .5; transition: opacity .25s ease; }
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { color: var(--ink); }
.seg button[aria-pressed="true"] svg { opacity: 1; }

/* which matchups: the six starting points in colour, so they are seen; the hint over the table a soft grey */
.pick .presets button { border-color: rgba(91, 43, 201, .5); background: #FAFAFC; }
.pick .presets button i { color: var(--purple); opacity: .7; }
.pick .presets button:hover { border-color: var(--purple); background: var(--people-soft); }
.pick .presets button[aria-pressed="true"] { background: var(--purple); border-color: var(--purple); color: #fff; }
.pick .presets button[aria-pressed="true"] i { color: #fff; opacity: .7; }
.dragtip { background: #55555D; }
.dragtip::after { border-top-color: #55555D; }

/* the way into the deep dive: a band across the page like How the game works, pressable as a whole */
.advband { background: var(--band); padding-block: 0; }
.ddbar { display: block; background: none; border-radius: 0; padding: 0; color: var(--ink); text-decoration: none; transition: background-color .25s ease; }
.ddbar:hover { background: #E8ECF8; }
.ddbar .ddin { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding-block: 64px; }
.ddbar .tx { display: grid; gap: 14px; min-width: 0; }
.ddbar .label { margin: 0; font: 800 12.5px/1.2 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.ddbar .h { font: 800 clamp(30px, 3.5vw, 50px)/1.06 var(--display); font-variation-settings: "opsz" 96, "wdth" 92; letter-spacing: -0.032em; color: var(--ink); }
.ddbar .arr { flex: none; width: 64px; height: 64px; margin-right: 8px; border-radius: 50%; background: var(--ink); display: grid; place-items: center;
  box-shadow: 0 14px 28px -14px rgba(16, 20, 40, .6); transition: transform .35s cubic-bezier(.34, 1.5, .64, 1), background-color .2s ease; }
.ddbar .arr svg { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ddbar:hover .arr { transform: translateX(6px); background: #000; }
.advband + .next { padding-top: var(--gap); }

/* what comes next: two cards of one height; the explorer's figure from the first blog, dark, on the right */
.next .h2s { margin-bottom: 36px; }
.ahead { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: stretch; margin-bottom: 0; }
.ahead .card { display: flex; flex-direction: column; padding: 24px; border: 1.5px solid var(--line); border-radius: 24px; }
.ahead .card .t { margin: 0 0 16px; }
.ahead .card .viz { margin-top: auto; padding-top: 0; }
.exfig { margin-top: auto; }
.exfig .fz { margin-inline: auto; }
.ctarow { display: flex; justify-content: center; padding-block: 56px; }
p.cta { display: inline-block; width: auto; max-width: 100%; padding: 14px 24px; border-radius: 999px; font: 650 clamp(15px, 1.2vw, 17px)/1.35 var(--display); text-align: center; }
.signoff { padding-top: 0; }
.next { padding-bottom: 64px; }

/* the deep dive: its own page */
.techview .tbar { background: rgba(244, 244, 247, .86); border-bottom: 1px solid transparent; transition: border-color .2s ease, box-shadow .2s ease; }
.techview .tbar.lifted { border-bottom-color: #E2E2E8; box-shadow: 0 8px 24px -20px rgba(16, 20, 40, .4); }
.tbar .tbin { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding-block: 0; height: 68px; }
.tbar .back { justify-self: start; display: inline-flex; align-items: center; gap: 9px; padding: 10px 16px 10px 12px; border-radius: 999px; background: var(--paper);
  box-shadow: 0 0 0 1.5px var(--line); font: 700 14.5px/1 var(--display); color: var(--ink); transition: transform .25s cubic-bezier(.34, 1.5, .64, 1), box-shadow .2s ease; }
.tbar .back:hover { background: var(--paper); transform: translateX(-2px); box-shadow: 0 0 0 1.5px #CFCFD6; }
.back svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.tbar .tname { justify-self: center; font: 750 15px/1 var(--display); letter-spacing: -0.01em; color: var(--ink); opacity: 0; transform: translateY(6px);
  transition: opacity .3s ease, transform .3s ease; white-space: nowrap; }
.tbar.titled .tname { opacity: 1; transform: none; }
.tnav { justify-self: end; display: flex; gap: 2px; }
.tnav button { appearance: none; border: 0; background: none; cursor: pointer; padding: 9px 12px; border-radius: 999px; font: 650 13.5px/1 var(--display); color: var(--dim);
  transition: color .2s ease, background-color .2s ease; }
.tnav button:hover { color: var(--ink); }
.tnav button.on { color: var(--ink); background: var(--paper); box-shadow: 0 0 0 1.5px var(--line); }
.thero { padding-block: 88px 24px; }
.thero .label { margin: 0 0 18px; }
.thero h1 { margin: 0 0 40px; font: 800 clamp(40px, 5.6vw, 84px)/1.02 var(--display); font-variation-settings: "opsz" 96, "wdth" 90; letter-spacing: -0.04em; color: var(--ink); text-wrap: balance; }
.chaps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.chaps button { appearance: none; border: 0; cursor: pointer; text-align: left; display: grid; gap: 6px; padding: 18px 18px 18px; border-radius: 18px; background: var(--paper);
  box-shadow: 0 1px 0 rgba(26, 37, 69, .05), 0 18px 36px -28px rgba(26, 37, 69, .4); transition: transform .3s cubic-bezier(.34, 1.5, .64, 1), box-shadow .25s ease; }
.chaps button:hover { transform: translateY(-3px); box-shadow: 0 1px 0 rgba(26, 37, 69, .05), 0 24px 40px -26px rgba(26, 37, 69, .5); }
.chaps i { font: 800 12px/1 var(--display); font-style: normal; letter-spacing: .08em; color: var(--purple); }
.chaps b { font: 800 19px/1.1 var(--display); letter-spacing: -0.02em; color: var(--ink); }
.chaps span { font: 500 13.5px/1.35 var(--display); color: var(--dim); }
.techview .tsec { padding-block: 72px; border-top: 1px solid #E6E6EB; }
.techview .thero + .tsec { border-top: 0; padding-top: 64px; }
.techview .tsec[data-unit="harness"] { border-top: 0; padding-top: 8px; }
.techview .tsec[data-unit="cuts"] { border-top: 0; padding-top: 24px; }
.techview .tsec[data-unit="film"] { border-top: 0; padding-top: 24px; }
.tsec .label { margin: 0 0 14px; }
.tsec h2 { font: 800 clamp(30px, 3.4vw, 48px)/1.06 var(--display); font-variation-settings: "opsz" 96, "wdth" 92; letter-spacing: -0.032em; margin: 0 0 24px; }
.techview .scene { grid-template-columns: minmax(0, 1fr) minmax(0, 520px); column-gap: 64px; align-items: start; }
.techview .seats .scene { align-items: start; }
.techview .seats .one { margin: 0; }
.techview .single { max-width: none; }
.techview .single p { font-size: 18px; line-height: 1.6; }
.techview .formula svg { width: 340px; }
.techview .mxwrap { max-width: 940px; margin: 8px auto 0; }
.techview .mxkey { max-width: none; margin-top: 18px; }
.mxkey i { width: 160px; }
.techview .cutview .views { margin-bottom: 18px; }
.cutview .bgrid { grid-template-columns: minmax(0, 1fr) 168px; column-gap: 28px; }
.tend { display: flex; justify-content: center; padding-block: 40px 96px; }
.back.home { display: inline-flex; align-items: center; gap: 10px; padding: 16px 26px 16px 20px; border-radius: 999px; background: var(--ink); color: #fff;
  font: 700 16px/1 var(--display); text-decoration: none; box-shadow: 0 16px 32px -18px rgba(16, 20, 40, .7); transition: transform .3s cubic-bezier(.34, 1.5, .64, 1), background-color .2s ease; }
.back.home:hover { background: #000; transform: translateY(-2px); }
.back.home svg { width: 18px; height: 18px; transition: transform .3s cubic-bezier(.34, 1.5, .64, 1); }
.back.home:hover svg { transform: translateX(-3px); }

@media (max-width: 1100px) { .tnav { display: none; } .tbar .tbin { grid-template-columns: auto 1fr; } .tbar .tname { justify-self: end; } }
@media (max-width: 900px) {
  .scale .scene, .techview .scene { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .techview .stage { order: 0; }
  .growth .stats { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .mgrid { display: flex; gap: 14px; }
  .mo { display: flex; flex-direction: column; gap: 14px; }
  .chaps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ahead { grid-template-columns: minmax(0, 1fr); }
  .ddbar .ddin { padding-block: 44px; gap: 18px; }
  .ddbar .arr { width: 52px; height: 52px; margin-right: 0; }
  .ddbar .arr svg { width: 22px; height: 22px; }
  .cutview .bgrid { grid-template-columns: minmax(0, 1fr); }
  .thero { padding-block: 48px 8px; }
  .techview .tsec { padding-block: 56px; }
}
@media (max-width: 640px) {
  .tbar .tbin { height: 58px; }
  .tbar .tname { font-size: 13px; }
  .tbar .back { padding: 9px 13px 9px 10px; font-size: 13.5px; }
  .chaps { gap: 10px; }
  .chaps button { padding: 14px; border-radius: 14px; }
  .chaps b { font-size: 16.5px; }
  .chaps span { font-size: 12.5px; }
  .ddbar .label { font-size: 11px; letter-spacing: .08em; line-height: 1.5; }
  .ddbar .label .sep::before { margin: 0 .35em; }
  .ctarow { padding-block: 40px; }
  p.cta { border-radius: 18px; padding: 14px 20px; font-size: 15px; }
  .seg button { padding: 10px 4px; gap: 5px; font-size: 12px; }
  .seg button svg { width: 13px; height: 13px; }
  .mo { padding: 16px; }
  .wall { height: 300vh; height: 300svh; }
}

/* call 3, second look */
.mo { grid-template-columns: minmax(0, 1fr); align-content: start; }
.exfig iframe { display: block; border: 0; background: transparent; width: 100%; }
.ahead .card .viz, .ahead .card .exfig { margin-block: auto; }
.thero .label, .tsec .label { font: 800 12.5px/1.2 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.thero .label .sep::before, .tsec .label .sep::before { content: "·"; margin: 0 .5em; }
.tbar .back svg, .back.home svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.seg button { padding: 10px 4px; gap: 6px; font-size: 12.5px; }
@media (max-width: 640px) {
  .tbar .tbx { display: none; }
  .mo .hook { flex: 1 0 auto; }
  p.cta { font-size: 14px; padding: 13px 20px; }
}

/* ================================================================== call 4 (Jack, 10–11 Nov 2026 night) */
/* no blue ring or tap flash on a logo that has been pressed, on any screen */
svg [tabindex]:focus, svg [tabindex]:focus-visible, .mx .cell:focus, .mx .cell:focus-visible, .labs button:focus:not(:focus-visible) { outline: none; }
svg [tabindex], .mx .cell, .labs button, .mo, .seg button, .presets button { -webkit-tap-highlight-color: transparent; }

/* "Press again to swap sides": a small dark label of the page's own, under the pressed preset */
.presets { position: relative; }
/* (the same small grey pill as the picker's "Drag a player onto a seat", its point upwards) */
.swaptip { position: absolute; z-index: 6; left: 0; top: 0; translate: -50% 0; pointer-events: none; white-space: nowrap; padding: 6px 9px; border-radius: 999px;
  background: #55555D; color: #fff; font: 700 11.5px/1 var(--display);
  opacity: 0; transform: translateY(-3px); transition: opacity .2s ease, transform .25s cubic-bezier(.2, .8, .2, 1); }
.swaptip::before { content: ""; position: absolute; left: 50%; bottom: 100%; margin-left: -4px; border: 4px solid transparent; border-bottom-color: #55555D; }
.swaptip.on { opacity: 1; transform: none; }

/* same moment, different minds: one card open and big, the other two folded beside it; hovering one (on a phone, tapping it) opens it */
.mgrid { display: grid; grid-template-columns: 3fr 1fr 1fr; grid-template-rows: none; gap: 20px; align-items: stretch;
  transition: grid-template-columns .62s cubic-bezier(.3, .8, .25, 1); }
.mo { display: flex; flex-direction: column; grid-row: auto; gap: 0; padding: 20px; overflow: hidden; min-width: 0; cursor: pointer; outline: none;
  transition: box-shadow .3s ease, transform .3s ease; }
.mo.open { cursor: default; }
.mo:not(.open):hover { box-shadow: 0 1px 0 rgba(26, 37, 69, .05), 0 30px 54px -30px rgba(26, 37, 69, .55); }
.mo:not(.open):focus-visible { box-shadow: 0 0 0 2px var(--ink), 0 24px 48px -30px rgba(26, 37, 69, .38); }
.mo .mhead { min-height: var(--hh, 0px); margin-bottom: 16px; }
.mo .mk { white-space: nowrap; }
.mo .mk .sub { transition: opacity .3s ease; }
.mo:not(.open) .mk .sub { opacity: 0; }
.mo .mhk, .mo .mtt { display: grid; transition: grid-template-rows .55s cubic-bezier(.3, .8, .25, 1), opacity .3s ease; }
.mo .mhk > p, .mo .mtt > p { min-height: 0; overflow: hidden; }
.mo .mhk { grid-template-rows: 0fr; opacity: 0; }
.mo.open .mhk { grid-template-rows: 1fr; opacity: 1; transition-delay: 0s, .22s; }
.mo .mtt { grid-template-rows: 1fr; }
.mo.open .mtt { grid-template-rows: 0fr; opacity: 0; transition-duration: .55s, .15s; }
.mo .hook { width: var(--iw, auto); padding-top: 10px; font: 650 17px/1.42 var(--display); text-wrap: pretty; }
.mo .ttl { margin: 0; padding-top: 8px; font: 800 22px/1.15 var(--display); letter-spacing: -0.022em; color: var(--ink); white-space: nowrap; }
.mo .mstage { width: 100%; flex: none; height: var(--sh-f, auto); aspect-ratio: auto; transition: height .55s cubic-bezier(.3, .8, .25, 1); }
.mo.open .mstage { height: var(--sh-o, auto); }
.mo .mstage video { object-fit: cover; object-position: 50% 50%; }
.mo .msw { display: grid; grid-template-rows: 1fr; width: var(--iw, auto); transition: grid-template-rows .55s cubic-bezier(.3, .8, .25, 1), opacity .35s ease .15s; }
.mo .msw > .segw { min-height: 0; overflow: hidden; padding-top: 16px; }
.mo:not(.open) .msw { grid-template-rows: 0fr; opacity: 0; pointer-events: none; transition: grid-template-rows .55s cubic-bezier(.3, .8, .25, 1), opacity .15s ease; }
.mo .fold { position: absolute; inset: 0; z-index: 8; display: grid; place-items: end center; padding-bottom: 18px;
  background: linear-gradient(180deg, rgba(10, 14, 30, 0) 45%, rgba(10, 14, 30, .5)); opacity: 0; pointer-events: none; transition: opacity .4s ease; }
.mo:not(.open) .fold { opacity: 1; }
.mo .fold span { display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; border-radius: 999px; background: rgba(255, 255, 255, .95); color: var(--ink);
  font: 700 12.5px/1 var(--display); white-space: nowrap; box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .6); transition: transform .3s cubic-bezier(.34, 1.5, .64, 1); }
.mo:not(.open):hover .fold span { transform: translateY(-2px); }
.mo:not(.open) .where, .mo:not(.open) .bub, .mo:not(.open) .dot { opacity: 0 !important; }
.mo .where { transition: opacity .3s ease; }
/* the bubble: a small grey label over the words; a spoken line's tail is part of the bubble, so it is only ever where the bubble is */
.mo .bub .bm { margin: 0 0 4px; font: 700 8.5px/1.25 var(--fig); letter-spacing: .1em; text-transform: uppercase; color: #8A93B5; }
.mo .bub .bt { font-size: 14px; line-height: 1.4; }
.mo .bub.long .bt { font-size: 12.5px; line-height: 1.36; }
.mo .bub .btail { position: absolute; left: var(--tx, 50%); top: calc(100% - 1.5px); width: 18px; height: 11px; margin-left: -9px; display: block; overflow: visible; }
.mo .tail { display: none !important; }
/* a thought's trail: white dots with the bubble's ink edge, rising from the head; one that would touch the head is left out */
.mo .dot { box-shadow: 0 0 0 1.5px var(--ink), 0 4px 10px -4px rgba(10, 14, 30, .5); }
.mo .dot.gone { opacity: 0 !important; transition-delay: 0s !important; }
@media (max-width: 700px) {
  .mgrid { display: flex; flex-direction: column; gap: 12px; overflow: visible; scroll-snap-type: none; margin-inline: 0; padding: 0; }
  .mgrid .mo { flex: none; width: auto; scroll-snap-align: none; }
  .mo { padding: 16px; }
  .mo .mhead { min-height: 0; margin-bottom: 12px; }
  .mo .hook { font-size: 15.5px; }
  .mo .ttl { font-size: 19px; padding-top: 6px; }
  .mo .msw > .segw { padding-top: 12px; }
  .mo .fold { place-items: center; padding: 0; }
}


/* the deep dive ends with the way back, as far below the last section as that section ends above it */
.techview .tsec.full { padding-bottom: 72px; }
.tend { padding-block: 0 72px; }
.techview { padding-bottom: 0; }

/* what comes next: a lead-in, then the question in a livelier face, centred */
.next .tease { text-align: center; margin: 0 auto 44px; max-width: 900px; }
.next .sofar { margin: 0 0 12px; font: 650 clamp(17px, 1.5vw, 21px)/1.3 var(--display); letter-spacing: -0.01em; color: var(--dim); }
.next .tease .h2s { margin: 0 auto; max-width: 14em; font: italic 700 clamp(38px, 5vw, 70px)/1.04 "Fraunces", "Newsreader", Georgia, serif;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; letter-spacing: -0.025em; color: var(--ink); text-wrap: balance; }
.next .tease .eq { color: var(--purple); }
/* the two cards: the pictures start right under their titles and end level with each other */
.ahead .card .viz, .ahead .card .exfig { margin-top: 0; margin-bottom: 0; }
.ahead .card .t { margin-bottom: 22px; }
#v-swarm svg { overflow: visible; }
@media (max-width: 640px) { .next .tease { margin-bottom: 28px; } .next .sofar { font-size: 16px; } }

/* ================================================================== call 5 (Jack, 11 Nov 2026) */
/* a scene's clip loops on its own; a loop's seam and a change of model pass under a short dip to dark, never one clip over another */
.mo .mstage video, .mo .mstage video.off { transition: none; }
.mo .dip { position: absolute; inset: 0; z-index: 2; background: #0E1222; opacity: 0; pointer-events: none; transition: opacity .24s ease; }
.mo .dip.on { opacity: 1; }
/* the wall's numbers hold their finished width while they count */
.quote h1 .n b { display: inline-block; text-align: right; }
/* sound: a small speaker in the top right corner of every film that has a sound track */
.snd { position: absolute; top: 10px; right: 10px; z-index: 9; width: 32px; height: 32px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%;
  background: rgba(10, 14, 30, .62); color: #fff; cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); -webkit-tap-highlight-color: transparent;
  transition: background .2s ease, transform .2s cubic-bezier(.34, 1.5, .64, 1); }
.snd:hover { background: rgba(10, 14, 30, .82); transform: scale(1.06); }
.snd:focus:not(:focus-visible) { outline: none; }
.snd svg { width: 17px; height: 17px; fill: #fff; }
.snd svg .w { fill: none; stroke: #fff; stroke-width: 1.9; stroke-linecap: round; }
.mo:not(.open) .snd { opacity: 0; pointer-events: none; }
.snd[hidden] { display: none; }
.mo .mstage.nohead:not(.quiet) .bub { opacity: 1; }
.mo .mstage.nohead .btail { opacity: 0; transition: opacity .2s ease; }
.mo { position: relative; }
/* a scene's speaker sits in the card's top corner, out of the game's own buttons */
.mo > .snd.flat { top: 14px; right: 14px; width: 30px; height: 30px; background: #EEF0F6; color: var(--ink); -webkit-backdrop-filter: none; backdrop-filter: none; }
.mo > .snd.flat:hover { background: #E2E5EF; }
.mo > .snd.flat svg { fill: var(--ink); }
.mo > .snd.flat svg .w { stroke: var(--ink); }
/* "51 seconds later": where a clip skips ahead in the game */
.mo .cutnote { position: absolute; left: 50%; top: 12px; z-index: 5; translate: -50% 0; padding: 7px 11px; border-radius: 999px; background: rgba(10, 14, 30, .78); color: #fff;
  font: 700 11px/1 var(--fig); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; opacity: 0; transform: translateY(-4px); pointer-events: none;
  transition: opacity .25s ease, transform .3s ease; }
.mo .cutnote.on { opacity: 1; transform: none; }
@media (max-width: 700px) {
  /* the words go under the picture as a caption; the picture keeps its own rounded box */
  .mo .mstage { background: transparent; }
  .mo .vz, .mo .dip { bottom: auto; height: calc(var(--iw) * .75); border-radius: 13px; overflow: hidden; }
  .mo .vz { background: #0E1222; }
  .mo.open .mstage { height: calc(var(--sh-o) + var(--cap, 0px)); }
  .mo.open .mstage.pending { height: calc(var(--iw) * .75); }   /* no clip yet, so no caption room under it */
  .mo .bub { max-width: none; box-shadow: 0 0 0 1.5px var(--line); transform-origin: 50% 0; }
  .mo .dot, .mo .bub .btail { display: none !important; }
  .mo > .snd.flat { top: 10px; right: 10px; }
}
/* on a phone the bubble keeps to the scale of the smaller picture, so it sits above the heads rather than over them */
@media (max-width: 700px) {
  .mo .bub { padding: 8px 10px 9px; border-radius: 14px; }
  .mo .bub .bm { font-size: 8px; margin-bottom: 3px; }
  .mo .bub .bt { font-size: 12.5px; line-height: 1.36; }
  .mo .bub.long .bt { font-size: 11.5px; line-height: 1.32; }
  .snd { top: 8px; right: 8px; width: 30px; height: 30px; }
}

/* the "N seconds later" pill sits at the foot of the picture, clear of a thought over the vote cards (desktop; a phone shows thoughts below) */
@media (min-width: 701px) { .mo .cutnote { top: auto; bottom: 14px; transform: translateY(4px); } .mo .cutnote.on { transform: none; } }
.mo .povnote { opacity: 0; transition: opacity .25s ease; pointer-events: none; }
.mo .povnote.on { opacity: 1; }
/* scripted scenes (11 Nov night): a thought's key words, marked the same way in every bubble */
.mo .bub .bt mark.hl { background: linear-gradient(180deg, transparent 52%, #FFD84D 52%, #FFD84D 92%, transparent 92%); color: inherit; font-weight: 700; padding: 0 1px; border-radius: 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* the leaderboard's bars (11 Nov 2026, Jack): views on the left, the key on the right, then the chart */
.bartop { display: flex; align-items: center; justify-content: space-between; gap: 10px 18px; flex-wrap: wrap; margin: 0 0 12px; }
.bartop .views { margin: 0; }
.barleg { display: flex; gap: 16px; font: 650 12.5px/1 var(--display); color: var(--fig-dim); }
.barleg span { display: inline-flex; align-items: center; gap: 7px; transition: opacity .35s ease; }
.barleg span::before { content: ""; width: 11px; height: 11px; border-radius: 3px; background: var(--crew); }
.barleg span.i::before { background: var(--imp); }
.barleg span.off { opacity: .28; }
.barbox { position: relative; }
.barbox .ytl { font: 700 12.5px/1 var(--display); transition: fill .4s ease; }
.barbox .pname { font: 700 12.5px/1 var(--display); fill: var(--people); paint-order: stroke; stroke: var(--paper); stroke-width: 4px; stroke-linejoin: round; }
.lbar { cursor: pointer; outline: none; }
.lbar .cr { fill: var(--crew); transition: fill .35s ease; }
.lbar .ir { fill: var(--imp); transition: fill .35s ease; }
.lbar .vl { font: 700 10.5px/1 var(--fig); fill: var(--fig-ink); font-variant-numeric: tabular-nums; pointer-events: none; }
.lbar .nm { font: 600 11px/1 var(--fig); fill: var(--fig-dim); transition: fill .3s ease, opacity .3s ease; }
.lbar.fr .nm { fill: var(--fig-ink); font-weight: 700; }
.lbar .lg .pop { transform-box: fill-box; transform-origin: center; transition: transform .25s cubic-bezier(.34, 1.7, .64, 1); }
.lbar:hover .lg .pop, .lbar:focus-visible .lg .pop { transform: scale(1.22) rotate(-6deg); }
.lbar:hover .cr, .lbar:focus-visible .cr { fill: #1C38B8; } .lbar:hover .ir, .lbar:focus-visible .ir { fill: #C4241C; }
.lbar:hover .nm, .lbar:focus-visible .nm { fill: var(--ink); }
/* 11 Nov (Jack): no grey column on hover; the other bars step back instead */
.lbar { transition: opacity .25s ease; }
.barbox svg:has(.lbar:hover) .lbar:not(:hover), .barbox svg:has(.lbar:focus-visible) .lbar:not(:focus-visible) { opacity: .42; }
.lbar.dim .cr { fill: #D9DCE6; } .lbar.dim .ir { fill: #E8EAF1; }
.lbar.dim .lg, .lbar.dim .vl { opacity: .38; } .lbar.dim .nm { fill: var(--faint); font-weight: 600; }
.barnote { margin: 14px 0 0; font: 500 13px/1.45 var(--display); color: var(--dim); max-width: 46em; }
#cuts .ax.z { stroke: rgba(26, 37, 69, .32); }
.tip .tc .sc { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 7px; padding-bottom: 7px; border-bottom: 1px solid #EEF0F5; }
.tip .tc .sc span { font: 600 11.5px/1 var(--display); color: var(--dim); }
.tip .tc .sc b { font: 800 20px/1 var(--display); color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
@media (max-width: 640px) { .bartop { flex-direction: column; align-items: stretch; } .barleg { justify-content: flex-start; } }
@media (prefers-reduced-motion: reduce) { .lbar .cr, .lbar .ir, .lbar .lg .pop { transition: none; } }
/* 12 Nov (Jack): the trait cards. The finding in bold, the script's line after it, the script's graph under it; a clip
   still being filmed shows a quiet cover until it lands */
.mo .mk { display: flex; align-items: center; gap: 7px; }
.mo .mk svg { width: 14px; height: 14px; flex: none; color: var(--ink); }
.mo .mk .sub { display: inline-flex; align-items: center; }
.mo .hook .tt { font-weight: 800; letter-spacing: -0.015em; }
.mo .hook .tl { font-weight: 550; color: var(--text); }
.tchart { display: grid; gap: 8px; margin-top: 16px; padding: 14px 16px 12px; border-radius: 14px; background: var(--mist); }
.tchart .tr { display: grid; grid-template-columns: minmax(0, 9.5em) minmax(0, 1fr) 2.2em; align-items: center; gap: 12px; }
.tchart .tn { display: flex; align-items: center; gap: 7px; min-width: 0; font: 650 13px/1.2 var(--display); color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tchart .tn svg { width: 14px; height: 14px; flex: none; color: currentColor; }
.tchart .tb { position: relative; height: 10px; border-radius: 999px; background: rgba(26, 37, 69, .07); overflow: hidden; }
.tchart .tb i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: #B9BFD3; transition: width .9s cubic-bezier(.2, .8, .2, 1); }
.mo.open .tchart .tb i { width: var(--w); }
.mo.open .tchart .tr:nth-child(2) .tb i { transition-delay: .08s; }
.mo.open .tchart .tr:nth-child(3) .tb i { transition-delay: .16s; }
.tchart .tv { font: 800 14px/1 var(--display); font-variant-numeric: tabular-nums; color: var(--dim); text-align: right; }
.tchart .tr.hi .tn, .tchart .tr.hi .tv { color: var(--ink); }
.tchart .tr.hi .tb i { background: var(--purple); }
.tchart .tcap { margin: 2px 0 0; font: 600 11.5px/1.3 var(--display); color: var(--faint); }
.mo .pend { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; opacity: 0; pointer-events: none; transition: opacity .4s ease;
  background: radial-gradient(120% 90% at 50% 40%, #1E2547, #0E1222 70%); overflow: hidden; }
.mo .pend::before { content: ""; position: absolute; inset: -50%; background: linear-gradient(100deg, transparent 40%, rgba(91, 43, 201, .22) 50%, transparent 60%);
  animation: pendsweep 2.6s cubic-bezier(.45, 0, .3, 1) infinite; }
.mo .pend span { position: relative; display: inline-flex; align-items: center; gap: 9px; padding: 10px 15px; border-radius: 999px; background: rgba(255, 255, 255, .08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); color: #fff; font: 700 12.5px/1 var(--display); white-space: nowrap; }
.mo .pend i { width: 8px; height: 8px; border-radius: 50%; background: #B3A1FF; box-shadow: 0 0 0 0 rgba(179, 161, 255, .6); animation: pendpulse 1.6s ease-out infinite; }
.mo .mstage.pending .pend { opacity: 1; }
.mo .mstage.pending video, .mo .mstage.pending .bub, .mo .mstage.pending .dot { opacity: 0 !important; }
@media (prefers-reduced-motion: reduce) { .mo .pend::before, .mo .pend i { animation: none; } }
@media (max-width: 700px) {
  .tchart { padding: 12px 13px 10px; gap: 7px; }
  .tchart .tr { grid-template-columns: minmax(0, 8.2em) minmax(0, 1fr) 2em; gap: 10px; }
  .tchart .tn { font-size: 12.5px; }
  .mo .pend { bottom: auto; height: calc(var(--iw) * .75); border-radius: 13px; overflow: hidden; }
}
/* 12 Nov (Jack): every scene, folded or open, says "Still generating"; a folded card wears a smaller pill */
.mo .pend span { transition: padding .3s ease, gap .3s ease, font-size .3s ease; }
.mo:not(.open) .pend span { gap: 7px; padding: 8px 12px; font-size: 11.5px; }
.mo:not(.open) .pend i { width: 7px; height: 7px; }
.mo .mk .sep::before { margin: 0 7px 0 -1px; }
/* 12 Nov (Jack): the way into the deep dive looks technical: a dark blueprint panel, code type for the label and the chapters */
.advband { background: var(--band); padding-block: 8px 80px; }
.ddbar { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 32px;
  padding: 44px 48px; border-radius: 24px; color: #fff; text-decoration: none; background: #0D1124;
  box-shadow: 0 30px 60px -36px rgba(13, 17, 36, .7); transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s ease; }
.ddbar::before { content: ""; position: absolute; z-index: -1; inset: 0;
  background-image: linear-gradient(rgba(130, 150, 255, .09) 1px, transparent 1px), linear-gradient(90deg, rgba(130, 150, 255, .09) 1px, transparent 1px);
  background-size: 32px 32px; background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(120% 140% at 100% 50%, #000 20%, transparent 85%); mask-image: radial-gradient(120% 140% at 100% 50%, #000 20%, transparent 85%); }
.ddbar::after { content: ""; position: absolute; z-index: -1; right: -10%; top: -60%; width: 60%; height: 220%; background: radial-gradient(closest-side, rgba(91, 43, 201, .35), transparent); }
.ddbar:hover { background: #0D1124; transform: translateY(-3px); box-shadow: 0 36px 66px -36px rgba(13, 17, 36, .8); }
.ddbar .tx { display: grid; gap: 16px; min-width: 0; }
.ddbar .label { margin: 0; font: 700 12.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #9AA6FF; }
.ddbar .label::before { content: "// "; color: rgba(154, 166, 255, .55); }
.ddbar .h { font: 800 clamp(30px, 3.5vw, 50px)/1.06 var(--display); font-variation-settings: "opsz" 96, "wdth" 92; letter-spacing: -0.032em; color: #fff; text-wrap: balance; }
.ddbar .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.ddbar .chips > span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px 8px 10px; border-radius: 8px; font: 500 13px/1 var(--mono); color: rgba(255, 255, 255, .82);
  background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(154, 166, 255, .2); }
.ddbar .chips i { font-style: normal; font-weight: 700; color: #9AA6FF; }
.ddbar .arr { flex: none; width: 64px; height: 64px; margin: 0; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 14px 28px -14px rgba(0, 0, 0, .6);
  transition: transform .35s cubic-bezier(.34, 1.5, .64, 1); }
.ddbar .arr svg { stroke: #0D1124; }
.ddbar:hover .arr { transform: translateX(6px); background: #fff; }
.advband + .next { padding-top: 88px; }


/* the biggest study (12 Nov, Jack): the words sit at the top, level with the top of the chart */
.scale .scene { align-items: start; }

@media (max-width: 700px) {
  .advband { padding-block: 0 56px; }
  .ddbar { flex-direction: column; align-items: flex-start; padding: 30px 24px 26px; gap: 22px; }
  .ddbar .chips > span { font-size: 12px; padding: 7px 10px 7px 8px; }
  .ddbar .arr { width: 52px; height: 52px; align-self: flex-end; margin-top: -8px; }
  .advband + .next { padding-top: 64px; }
}
@media (prefers-reduced-motion: reduce) { .ddbar, .ddbar .arr { transition: none; } }
/* 12 Nov (Jack): the deep dive looks technical, not like a template: code type for the small labels and chapter numbers, a thin
   blueprint grid behind the title, flat boxes */
.techview .thero { position: relative; isolation: isolate; padding-block: 72px 56px; }
.techview .thero::before { content: ""; position: absolute; z-index: -1; inset: 0 calc(50% - 50vw); pointer-events: none;
  background-image: linear-gradient(rgba(26, 37, 69, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(26, 37, 69, .07) 1px, transparent 1px);
  background-size: 32px 32px; background-position: center -1px;
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 100%); mask-image: linear-gradient(180deg, #000 30%, transparent 100%); }
.techview .thero .label { font: 700 12.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--purple); margin: 0 0 18px; }
.techview .thero .label::before { content: "// "; opacity: .55; }
.techview .thero h1 { margin: 0; }
.techview .tsub { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 0; }
.techview .tsub span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px 8px 10px; border-radius: 6px; font: 500 13px/1 var(--mono); color: var(--fig-ink);
  background: var(--paper); box-shadow: inset 0 0 0 1px #DCDFEA; }
.techview .tsub i { font-style: normal; font-weight: 700; color: var(--purple); }
.techview .tsec > .label, .techview .tsec .copy > .label { font: 700 12px/1 var(--mono); letter-spacing: .1em; color: var(--purple); }
.techview .tsec > .label .sep::before, .techview .tsec .copy > .label .sep::before { color: var(--faint); }
.tbar .tnav button { font-family: var(--mono); font-size: 12.5px; font-weight: 500; letter-spacing: 0; }

/* 12 Nov (Jack): Watch a full game, in the blog's own style: the film large, and what the player's mind says as three white cards */
.techview .fh { margin: 0 0 28px; }
.techview .fgrid { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); column-gap: 24px; align-items: start; }
.techview .fgrid .stage { order: -1; }
.techview .fgrid .film { margin: 0; border-radius: 18px; box-shadow: 0 30px 60px -36px rgba(13, 17, 36, .6); }
.techview .mind { gap: 12px; }
.techview .mind .who { align-items: center; padding: 2px 4px 2px; font: 600 13px/1.2 var(--display); }
.techview .mind .who b { font: 800 15px/1.2 var(--display); letter-spacing: -0.01em; }
.techview .mind .who .t { font: 500 12px/1 var(--mono); }
.techview .mind .two { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.techview .mind .box { padding: 15px 16px 16px; border-radius: 16px; background: var(--paper); box-shadow: 0 1px 0 rgba(26, 37, 69, .05), 0 18px 36px -28px rgba(26, 37, 69, .4); }
.techview .mind .meta { border-top: 0; padding-top: 15px; }
.techview .mind h4 { margin: 0 0 8px; font: 700 11px/1 var(--mono); letter-spacing: .1em; color: var(--purple); }
.techview .mind .body, .techview .mind .two .body { font: 500 14px/1.45 var(--display); min-height: 0; }
.techview .mind .two .ln .at, .techview .mind .ln .at { font: 500 11px/1.3 var(--mono); }
.techview .mind ol li { grid-template-columns: 18px minmax(0, 1fr); gap: 6px; }
@media (max-width: 900px) {
  .techview .fgrid { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
  .techview .thero { padding-block: 44px 36px; }
  .techview .tsub { display: grid; grid-template-columns: repeat(2, max-content); }
  .techview .tsub span { font-size: 12px; padding: 7px 10px 7px 8px; }
}
/* 12 Nov (Jack, call 7): the picked model's row lit in the card's chart, and one line under the tabs on what it does */
.tchart .tr .tn, .tchart .tr .tv { transition: color .35s ease; }
.tchart .tr .tb i { transition: width .9s cubic-bezier(.2, .8, .2, 1), background-color .35s ease, opacity .35s ease; }
.tchart .tr:not(.hi) .tb i { background: #C3C9E0; }
/* 12 Nov (Jack): switching models, the colour crossfades from one bar to the next instead of jumping */
.tchart .tr .tb i, .tchart .tr.hi .tb i { background: #C3C9E0; }
.tchart .tb i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--purple); opacity: 0; transition: opacity .5s ease; }
.tchart .tr.hi .tb i::after { opacity: 1; }
.tchart .tr .tn, .tchart .tr .tv { transition: color .5s ease; }
.mo .mtrait { margin: 12px 4px 0; font: 500 14.5px/1.42 var(--display); color: var(--dim); text-wrap: pretty; }
.mo .mtrait b { font-weight: 800; color: var(--ink); }
.mo .mtrait.in { animation: traitin .45s cubic-bezier(.2, .8, .2, 1) both; }
.mo:not(.open) .mtrait { display: none; }
@media (max-width: 700px) { .mo .mtrait { font-size: 14px; margin-top: 10px; } }
@media (prefers-reduced-motion: reduce) { .mo .mtrait.in { animation: none; } }
/* 12 Nov (Jack, call 7): Try it yourself as a white card at the foot of the rules, level with the foot of the film */
.gameband .gb { align-items: stretch; }
.gameband .gtext { display: flex; flex-direction: column; }
.gameband .gvid { display: flex; flex-direction: column; justify-content: flex-end; }   /* the film's foot level with the card's */
.playcta { margin-top: auto; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 12px 12px 12px 12px;
  border-radius: 20px; background: var(--paper); color: var(--ink); text-decoration: none;
  box-shadow: 0 1px 0 rgba(26, 37, 69, .05), 0 22px 44px -30px rgba(26, 37, 69, .45); transition: transform .4s cubic-bezier(.2, .8, .2, 1), box-shadow .4s ease; }
.gameband .gtext .rules { margin-bottom: 32px; }
.playcta:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(26, 37, 69, .05), 0 28px 50px -30px rgba(26, 37, 69, .55); }
.playcta .pci { width: 52px; height: 52px; border-radius: 14px; background: var(--people-soft); display: grid; place-items: end center; overflow: hidden; }
.playcta .pci img { height: 46px; width: auto; transform: translateY(5px); transition: transform .45s cubic-bezier(.34, 1.5, .64, 1); }
.playcta:hover .pci img { transform: translateY(2px) rotate(-4deg); }
.playcta .pctx { display: grid; gap: 4px; min-width: 0; }
.playcta .pctx b { font: 800 18px/1.1 var(--display); letter-spacing: -0.015em; }
.playcta .pctx span { font: 500 14px/1.3 var(--display); color: var(--dim); }
.playcta .pcgo { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--purple); color: #fff;
  box-shadow: 0 10px 20px -10px rgba(91, 43, 201, .8); transition: transform .35s cubic-bezier(.34, 1.5, .64, 1); }
.playcta .pcgo svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.playcta:hover .pcgo { transform: translate(2px, -2px); }

/* 12 Nov (Jack, call 7): at the end, Play AmogSchool is a pill like the email one, just to its left */
.ctarow { gap: 10px; flex-wrap: wrap; align-items: center; }
a.cta.play { display: inline-flex; align-items: center; gap: 8px; padding: 14px 20px 14px 22px; border-radius: 999px; text-decoration: none; color: #fff; white-space: nowrap;
  font: 650 clamp(15px, 1.2vw, 17px)/1.35 var(--display); background: linear-gradient(135deg, #6A3BD9, #4B22AE); box-shadow: 0 12px 24px -14px rgba(75, 34, 174, .8);
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease; }
a.cta.play svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s cubic-bezier(.34, 1.5, .64, 1); }
a.cta.play:hover { transform: translateY(-2px); box-shadow: 0 16px 28px -14px rgba(75, 34, 174, .9); }
a.cta.play:hover svg { transform: translate(2px, -2px); }

/* 12 Nov (Jack, call 7): the deep dive has no top bar: the way back sits on the grid at the top, For the curious leads the chapters */
.techview .thero { padding-block: 28px 56px; }
.thero .tback { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 52px; padding: 10px 16px 10px 12px; border-radius: 999px; background: var(--paper);
  color: var(--ink); text-decoration: none; font: 700 15px/1 var(--display); box-shadow: 0 0 0 1.5px #E2E2E8; transition: transform .3s cubic-bezier(.34, 1.5, .64, 1), box-shadow .2s ease; }
.thero .tback:hover { transform: translateX(-2px); box-shadow: 0 0 0 1.5px #CFCFD6; }
.thero .tback svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.techview .tsub { align-items: center; margin-top: 28px; }
.techview .tsub .label { padding: 0; background: none; box-shadow: none; margin: 0 8px 0 0; font: 700 12.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--purple); }
.techview .tsub .label::before { content: "// "; opacity: .55; }
.techview .tsub button { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px 8px 10px; border: 0; border-radius: 6px; font: 500 13px/1 var(--mono); color: var(--fig-ink);
  background: var(--paper); box-shadow: inset 0 0 0 1px #DCDFEA; cursor: pointer; transition: box-shadow .2s ease, transform .2s ease; }
.techview .tsub button:hover { box-shadow: inset 0 0 0 1px var(--purple); transform: translateY(-1px); }
.techview .tsub button i { font-style: normal; font-weight: 700; color: var(--purple); }
@media (max-width: 900px) {
  .playcta .pctx b { font-size: 17px; }
  .playcta .pctx span { font-size: 13px; }
  .techview .thero { padding-block: 20px 36px; }
  .thero .tback { margin-bottom: 36px; }
  .techview .tsub { display: grid; grid-template-columns: repeat(2, max-content); }
  .techview .tsub .label { grid-column: 1 / -1; margin: 0 0 4px; }
  .techview .tsub button { font-size: 12px; padding: 7px 10px 7px 8px; }
}
@media (max-width: 700px) {
  .ctarow { flex-direction: column; }
}
.playcta .pctx em { font-style: normal; }
@media (max-width: 480px) { .playcta .pctx em { display: none; } }
@media (prefers-reduced-motion: reduce) { .playcta, .playcta .pci img, .playcta .pcgo, a.cta.play { transition: none; } }
/* 12 Nov (Jack): the bar under the pointer stands out: its colours deepen, it lifts on a soft shadow, its number grows a touch */
.lbar .cr, .lbar .ir { transition: fill .3s ease, filter .3s ease; }
.lbar:hover .cr, .lbar:focus-visible .cr, .lbar:hover .ir, .lbar:focus-visible .ir { filter: drop-shadow(0 6px 10px rgba(26, 37, 69, .28)); }
.lbar .vl { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .25s cubic-bezier(.34, 1.5, .64, 1), fill .25s ease; }
.lbar:hover .vl, .lbar:focus-visible .vl { transform: scale(1.18); fill: var(--ink); }
.barbox svg:has(.lbar:hover) .lbar:not(:hover) { opacity: .5; }
/* 12 Nov (Jack): the three growth boxes stay three across down to a small tablet; on a phone each is one snug row, number then words */
@media (max-width: 900px) and (min-width: 601px) { .growth .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } }
@media (max-width: 600px) {
  .growth .stats { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 28px; }
  .growth .stat { flex-direction: row; align-items: center; gap: 16px; padding: 16px 18px; border-radius: 16px; }
  .growth .stat .v { flex: none; width: 112px; font-size: 32px; }
  .growth .stat .l { font-size: 14px; max-width: none; }
}
/* 12 Nov (Jack): the three growth numbers read as achievements. Each card has its own sticker (Codex, the school's comic style) that
   pops in and tilts on hover; the number counts up once; the record wears a gold ribbon */
.growth .stats { grid-template-columns: repeat(3, minmax(0, 300px)); gap: 18px; margin-top: 44px; }
.growth .stat { --c: #5B2BC9; --t: rgba(91, 43, 201, .08); position: relative; overflow: visible; padding: 26px 24px 22px; border-radius: 22px; gap: 8px;
  background: linear-gradient(160deg, var(--t), rgba(255, 255, 255, 0) 62%), #fff; box-shadow: 0 0 0 1px rgba(26, 37, 69, .07), 0 18px 40px -26px rgba(26, 37, 69, .35);
  transition: transform .35s cubic-bezier(.34, 1.4, .64, 1), box-shadow .35s ease; }
.growth .stat:nth-child(2) { --c: #1D1D1F; --t: rgba(26, 37, 69, .05); }
.growth .stat:nth-child(3) { --c: #2747D9; --t: rgba(39, 71, 217, .08); }
.growth .stat.rec { --t: rgba(242, 177, 46, .16); box-shadow: 0 0 0 1.5px rgba(226, 160, 30, .55), 0 18px 40px -24px rgba(196, 128, 10, .45); }
.growth .stat:hover { transform: translateY(-3px); }
.growth .stat .ico { position: absolute; right: 14px; top: -26px; width: 78px; height: 78px; object-fit: contain; pointer-events: none;
  filter: drop-shadow(0 8px 10px rgba(26, 37, 69, .18)); transform: rotate(8deg) scale(.4); opacity: 0;
  transition: transform .6s cubic-bezier(.34, 1.6, .64, 1), opacity .3s ease; transition-delay: calc(var(--i, 0) * 120ms + 200ms); }
.growth .stat:nth-child(2) .ico { --i: 1; } .growth .stat:nth-child(3) .ico { --i: 2; }
.growth.seen .stat .ico { transform: rotate(8deg); opacity: 1; }
.growth.seen .stat:hover .ico { transform: rotate(-4deg) scale(1.08); transition-delay: 0s; }
.growth .stat .v { color: var(--c) !important; font-size: clamp(40px, 3.8vw, 54px); line-height: .95; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.growth .stat .l { font-size: 15.5px; max-width: none; }
.growth .stat .l b { color: var(--c) !important; }
.growth .stat .tag { align-self: flex-start; margin-bottom: 4px; padding: 5px 10px 4px; border-radius: 999px; font: 800 10.5px/1 var(--display); letter-spacing: .1em; text-transform: uppercase;
  color: #6B4300; background: linear-gradient(180deg, #FFE08A, #F2B12E); box-shadow: inset 0 0 0 1px rgba(150, 95, 0, .35), 0 3px 8px -3px rgba(196, 128, 10, .6); }
.growth .stat:not(.rec)::before { content: ""; display: block; height: 19px; margin-bottom: 4px; }   /* keeps the three numbers level with the ribboned one */
@media (prefers-reduced-motion: reduce) { .growth .stat .ico { transition: none; transform: rotate(8deg); opacity: 1; } }
@media (max-width: 900px) and (min-width: 601px) { .growth .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .growth .stat .ico { width: 62px; height: 62px; top: -22px; } }
@media (max-width: 600px) {
  .growth .stats { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 32px; }
  .growth .stat { flex-direction: column; align-items: flex-start; padding: 20px 20px 18px; gap: 6px; }
  .growth .stat:not(.rec)::before { display: none; }
  .growth .stat .v { width: auto; font-size: 42px; }
  .growth .stat .l { max-width: 16em; }
  .growth .stat .ico { width: 70px; height: 70px; top: 50%; right: 16px; margin-top: -35px; }
}
/* 12 Nov: a scene still generating has nothing to watch yet, so its folded card shows only the pill, centred on the whole picture */
.mo:not(.open) .mstage.pending .fold { opacity: 0; }
@media (max-width: 700px) { .mo:not(.open) .pend { inset: 0; height: auto; } }

/* ================= 12 Nov (Jack, call 8): the scene cards ================= */
/* a shorter card: the chart tighter, no air between it and the picture */
.mo .mhead { margin-bottom: 12px; }
.tchart { gap: 5px; margin-top: 12px; padding: 10px 14px 9px; border-radius: 12px; }
.tchart .tn { font-size: 12.5px; }
.tchart .tb { height: 8px; }
.tchart .tv { font-size: 13px; }
.tchart .tcap { font-size: 11px; margin-top: 1px; }
/* a folded card's title wraps rather than running off its edge */
.mo .ttl { white-space: normal; text-wrap: balance; font-size: 20px; }
/* the picker: the tabs and the picked model's line in one box; the line on a white panel that hangs off its tab */
.mo .msw > .segw { padding-top: 12px; }
.mo .mpick { --n: 3; --i: 0; position: relative; padding: 4px; border-radius: 16px; background: #EEF0F5; }
.mo .mpick .seg { background: none; padding: 0; }
.mo .mpick .seg .thumb { top: 0; bottom: 0; left: calc(var(--i, 0) * 100% / var(--n, 3)); width: calc(100% / var(--n, 3)); }
.mo .mpick .mtrait { position: relative; margin: 6px 0 0; padding: 10px 14px 11px; border-radius: 12px; background: #fff; font: 500 13.5px/1.42 var(--display); color: var(--dim);
  box-shadow: 0 1px 2px rgba(14, 22, 48, .06); }
.mo .mpick .mtrait::before { content: ""; position: absolute; top: -5px; left: calc((var(--i, 0) + .5) * 100% / var(--n, 3)); width: 10px; height: 10px; margin-left: -5px;
  background: #fff; transform: rotate(45deg); border-radius: 2px; transition: left .45s cubic-bezier(.3, .8, .25, 1); }
.mo .mpick .mtrait b { color: var(--ink); }
/* how far the clip has run: a thin line along the foot of the picture */
.mo .mprog { position: absolute; left: 0; right: 0; bottom: 0; z-index: 7; height: 4px; background: rgba(255, 255, 255, .18); pointer-events: none; transition: opacity .3s ease; }
.mo .mprog i { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(0); background: var(--accent-hi); }
.mo:not(.open) .mprog, .mo .mstage.pending .mprog { opacity: 0; }
/* replay: one round button, top right, over the picture */
.mo .mreplay { position: absolute; top: 10px; right: 10px; z-index: 9; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; color: #fff; background: rgba(14, 22, 48, .62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .22), 0 6px 14px -6px rgba(0, 0, 0, .5); transition: opacity .3s ease, transform .25s cubic-bezier(.34, 1.5, .64, 1), background-color .2s ease; }
.mo .mreplay svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.mo .mreplay:hover { background: rgba(14, 22, 48, .82); transform: scale(1.06); }
.mo .mreplay:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 2px; }
.mo .mstage.spin .mreplay svg { animation: mspin .5s cubic-bezier(.3, .8, .25, 1); }
.mo:not(.open) .mreplay, .mo .mstage.pending .mreplay { opacity: 0; pointer-events: none; }
/* "Hover to watch": frosted, not solid white */
.mo .fold span { background: rgba(255, 255, 255, .7); -webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .5), 0 8px 20px -10px rgba(14, 22, 48, .45); }
@media (max-width: 700px) {
  .mo .mpick .mtrait { font-size: 13.5px; padding: 9px 12px 10px; }
  .mo .mreplay { width: 32px; height: 32px; top: 8px; right: 8px; }
}
@media (prefers-reduced-motion: reduce) { .mo .mstage.spin .mreplay svg { animation: none; } .mo .mpick .mtrait::before { transition: none; } }

/* ================= 12 Nov (Jack, call 8): the wall moves with every bit of scroll; less road to the first chart ================= */
.wall { height: 250vh; height: 250svh; }
.bench { padding-top: 64px; }
@media (max-width: 700px) { .wall { height: 230vh; height: 230svh; } .bench { padding-top: 48px; } }


/* 12 Nov (Jack, call 8): one unbroken grey from the scenes into the deep-dive band; the section paints it, not its sticky inner part */
.moments { isolation: isolate; }
.moments > .holdin::before { content: none; }
.moments::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; translate: -50% 0; background: var(--band); }

/* ================= 12 Nov (Jack, call 8): the deep dive reads as four steps =================
   a goal line under the title; a bar of the four steps that pins to the top and fills as you read each one; a line at the end of
   each step that hands over to the next; chapter 4's parts numbered 4.1 to 4.4 */
.techview { --tv: #F4F4F7; background: var(--tv); }
.techview .thero { padding-bottom: 28px; }
.techview .tgoal { max-width: 30em; margin: 22px 0 0; font: 500 clamp(18px, 1.6vw, 21px)/1.5 var(--display); color: var(--text); text-wrap: pretty; }
.tpath { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; margin-bottom: 8px; transition: background-color .3s ease, box-shadow .3s ease; }
.tpath::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(244, 244, 247, .84); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 1px 0 #E2E2E8, 0 10px 28px -22px rgba(14, 22, 48, .45); opacity: 0; transition: opacity .3s ease; }
.tpath.stuck::before { opacity: 1; }
.tpin { display: flex; align-items: center; padding-block: 14px; }
.tpath .tpback { flex: none; display: grid; place-items: center; width: 0; height: 36px; margin-right: 0; border-radius: 50%; overflow: hidden; color: var(--ink); background: var(--paper);
  box-shadow: 0 0 0 1px #E2E2E8; opacity: 0; transform: translateX(-8px); pointer-events: none;
  transition: width .35s cubic-bezier(.2, .8, .2, 1), margin .35s cubic-bezier(.2, .8, .2, 1), opacity .25s ease, transform .35s cubic-bezier(.2, .8, .2, 1); }
.tpath .tpback svg { flex: none; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.tpath.stuck .tpback { width: 36px; margin-right: 20px; opacity: 1; transform: none; pointer-events: auto; }
.tpath .tpback:hover { box-shadow: 0 0 0 1.5px #CFCFD6; }
.tpath ol { flex: 1; min-width: 0; display: flex; gap: 14px; margin: 0; padding: 0; list-style: none; }
.tpath li { flex: 1 1 0; min-width: 0; display: grid; gap: 9px; transition: flex-grow .45s cubic-bezier(.2, .8, .2, 1); }
.tpath li button { appearance: none; border: 0; background: none; padding: 0; cursor: pointer; display: flex; align-items: baseline; gap: 9px; min-width: 0; text-align: left;
  font: 600 13.5px/1.2 var(--mono); letter-spacing: -0.01em; color: var(--faint); transition: color .3s ease; }
.tpath li button i { font-style: normal; font-weight: 700; font-size: 12px; color: inherit; transition: color .3s ease; }
.tpath li button span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tpath li button:hover { color: var(--ink); }
.tpath li b { display: block; height: 2px; border-radius: 2px; background: #DCDDE5; overflow: hidden; }
.tpath li b u { display: block; height: 100%; background: var(--accent); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.tpath li.done button { color: var(--dim); }
.tpath li.done button i { color: var(--accent-ink); }
.tpath li.on button { color: var(--ink); }
.tpath li.on button i { color: var(--accent-ink); }
.tpath li.on b u { box-shadow: 0 0 10px rgba(91, 43, 201, .5); }
/* the chapter labels and the parts of chapter 4 speak the same code type as the bar */
.techview .tsec > .label, .techview .tsec .copy > .label { color: var(--accent-ink); }
.techview h2 .sn { display: inline-block; margin-right: .5em; font: 700 .42em/1 var(--mono); letter-spacing: 0; color: var(--accent-ink); vertical-align: .38em; }
/* the hand-over to the next step */
.handoff { display: flex; align-items: center; justify-content: space-between; gap: 18px 32px; flex-wrap: wrap; margin-top: 56px; padding-top: 28px; border-top: 1px dashed #D5D7E0; }
.handoff p { margin: 0; max-width: 34em; font: 650 clamp(19px, 1.7vw, 23px)/1.35 var(--display); letter-spacing: -0.015em; color: var(--ink); text-wrap: balance; }
.handoff button { appearance: none; flex: none; display: inline-flex; align-items: center; gap: 9px; padding: 11px 16px 11px 13px; border: 0; border-radius: 999px; cursor: pointer;
  font: 600 13px/1 var(--mono); color: #fff; background: var(--ink); box-shadow: 0 12px 24px -14px rgba(14, 22, 48, .7); transition: transform .3s cubic-bezier(.34, 1.5, .64, 1), background-color .2s ease; }
.handoff button i { font-style: normal; font-weight: 700; color: var(--accent-hi); }
.handoff button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s cubic-bezier(.34, 1.5, .64, 1); }
.handoff button:hover { background: #000; }
.handoff button:hover svg { transform: translateY(2px); }
.techview .single .handoff { margin-top: 48px; }
@media (max-width: 760px) {
  .tpin { padding-block: 11px; }
  .tpath ol { gap: 10px; }
  .tpath li { flex: 0 0 auto; }
  .tpath li.on { flex: 1 1 0; }
  .tpath li button { font-size: 12.5px; gap: 7px; }
  .tpath li:not(.on) button span { display: none; }
  .tpath li:not(.on) { min-width: 26px; }
  .tpath.stuck .tpback { width: 32px; height: 32px; margin-right: 12px; }
  .handoff { margin-top: 40px; padding-top: 22px; }
  .handoff button { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .tpath li, .tpath .tpback, .tpath::before { transition: none; } }
.techview #t-harness, .techview #t-bench, .techview #t-perf { border-top: 0; padding-top: 72px; }
@media (max-width: 760px) { .techview #t-harness, .techview #t-bench, .techview #t-perf { padding-top: 56px; } }

/* 12 Nov (Jack): a scene's footnote, e.g. "* Opps see further than Students": bottom left, clear of the game's buttons, above the progress line */
.mo .mnote { position: absolute; left: 12px; bottom: 14px; z-index: 6; max-width: calc(100% - 24px); padding: 6px 10px; border-radius: 8px; pointer-events: none;
  font: 600 11.5px/1.25 var(--display); letter-spacing: .01em; color: rgba(255, 255, 255, .9); background: rgba(10, 14, 30, .55);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); transition: opacity .35s ease; }
.mo:not(.open) .mnote, .mo .mstage.pending .mnote { opacity: 0; }
.mo .mstage:has(.cutnote.on) .mnote { opacity: 0; }   /* it steps aside while "Seconds later" shows at a cut */
.mo .mnote { font-size: 10.5px; padding: 5px 9px; }
@media (max-width: 700px) { .mo .mnote { left: 8px; bottom: 10px; font-size: 10.5px; padding: 5px 8px; } }

/* ================= 12 Nov (Jack): less pink and purple, so it stops reading girly =================
   no pink at all; one deeper, bluer violet (#5B2BC9) with a light one for dark ground (#B3A1FF); no lavender washes (neutral grey);
   no colour-to-colour gradients; the violet only for the charts' people line, what you can press, the headline numbers and "EQ";
   every small label, chapter number and hand-drawn mark in navy ink; the yellow highlighter stays as the one warm note */
.hero .sub, .kick, .gameband .label, .advband .label, .chaps i, .techview .thero .label, .techview .tsub i, .techview .tsub .label,
.techview .tsub button i, .techview .tsec > .label, .techview .tsec .copy > .label, .techview .mind h4, .tip .tc .ft.em,
.tpath li.done button i, .tpath li.on button i, .techview h2 .sn, .pick .presets button i { color: var(--ink); }
.techview .thero .label::before, .techview .tsub .label::before { opacity: .4; }
.ddbar { background: #0D1124; }
.ddbar::after { background: radial-gradient(closest-side, rgba(91, 43, 201, .42), transparent); }
.ddbar .label { color: #B3A1FF; }
.ddbar .chips i { color: #B3A1FF; }

/* ================= 12 Nov (Jack, call 9): one colour system, and the layout pass =================
   Every section is warm or cool, by topic, never by team: warm (yellow into orange) for people and play: the opening line, the biggest
   game, the growth, what comes next; cool (light into deeper blue) for measuring the models: the leaderboard, how the game works, the
   scenes. Both stop short of the game's own red and blue, which still mean only the two teams. Violet is the deep dive's alone. */
:scope {
  --warm: linear-gradient(100deg, #F6A928 0%, #F37B2E 55%, #EC5A36 100%);
  --warm-ink: #D9620F; --warm-hi: #FFB25C; --warm-soft: #FFF3E3;
  --cool: linear-gradient(100deg, #45B5F0 0%, #3A8BE6 55%, #3767DE 100%);
  --cool-ink: #2F74D8; --cool-hi: #7CC4F5; --cool-soft: #E9F2FD;
  --vio: linear-gradient(100deg, #9277F2 0%, #6B3FDB 55%, #5B2BC9 100%);
  --vio-ink: #5B2BC9; --vio-hi: #B3A1FF; --vio-soft: #F0ECFC;
  --people: #E2760E; --people-soft: #FFF2E2;
  --signs: #E2760E; --wins: #2F74D8;
  --band: #EEF3FB;
}
.wall, .scale, .growth, .next { --sec: var(--warm); --sec-ink: var(--warm-ink); --sec-hi: var(--warm-hi); --sec-soft: var(--warm-soft);
  --purple: var(--warm-ink); --accent: var(--warm-ink); --accent-ink: var(--warm-ink); --accent-hi: var(--warm-hi); --accent-soft: var(--warm-soft); }
.bench, .gameband, .moments { --sec: var(--cool); --sec-ink: var(--cool-ink); --sec-hi: var(--cool-hi); --sec-soft: var(--cool-soft);
  --purple: var(--cool-ink); --accent: var(--cool-ink); --accent-ink: var(--cool-ink); --accent-hi: var(--cool-hi); --accent-soft: var(--cool-soft); }
.advband, .techview { --sec: var(--vio); --sec-ink: var(--vio-ink); --sec-hi: var(--vio-hi); --sec-soft: var(--vio-soft);
  --purple: var(--vio-ink); --accent: var(--vio-ink); --accent-ink: var(--vio-ink); --accent-hi: var(--vio-hi); --accent-soft: var(--vio-soft); }
/* the score's two parts are people-made signs (warm) and wins (cool), in the deep dive too */
.techview { --signs: #E2760E; --wins: #2F74D8; }

/* gradient type: the opening's numbers, "EQ" */
.quote h1 .n, .next .tease .eq { background-image: var(--sec); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.next .tease .eq { padding-right: .06em; }
/* each section's small label in its own colour */
.kick, .gameband .label { color: var(--sec-ink); }
/* the score bar: no grey; signs warm, wins cool */
.score .labels .a, .formula .ta { color: var(--warm-ink); } .score .labels .b, .formula .tb { color: var(--cool-ink); }
.score .split { gap: 2px; background: none; }
.score .split i { border-radius: 999px; }
.score .split .sa { background: var(--warm); } .score .split .sb { background: var(--cool); }
/* the ways to play: warm, wherever they sit */
.playcta .pcgo { background: var(--warm); box-shadow: 0 10px 20px -10px rgba(236, 90, 54, .7); }
a.cta.play { background: var(--warm); box-shadow: 0 12px 24px -14px rgba(236, 90, 54, .8); }
a.cta.play:hover { box-shadow: 0 16px 28px -14px rgba(236, 90, 54, .9); }
/* the deep-dive band: navy with a violet glow, its label in the violet gradient */
.ddbar .label, .ddbar .chips i { color: #B3A1FF; }
.ddbar::after { background: radial-gradient(closest-side, rgba(107, 63, 219, .5), transparent); }
.tpath li b u { background: var(--vio); }
.tpath li.on b u { box-shadow: 0 0 10px rgba(107, 63, 219, .45); }
.techview .tsec > .label, .techview .tsec .copy > .label { color: var(--vio-ink); }
.pick .presets button[aria-pressed="true"] { background: var(--vio-ink); border-color: var(--vio-ink); }

/* ---- the growth cards: each wears its own sticker's colours ---- */
.growth .stat { --c: var(--warm-ink); --g: var(--warm); --t: rgba(246, 169, 40, .16); --e: rgba(236, 90, 54, .28); }
.growth .stat:nth-child(2) { --c: var(--cool-ink); --g: var(--cool); --t: rgba(69, 181, 240, .16); --e: rgba(55, 103, 222, .26); }
.growth .stat:nth-child(3), .growth .stat.rec { --c: #C98A06; --g: linear-gradient(100deg, #F9C846 0%, #EFA51C 60%, #E08A0C 100%); --t: rgba(249, 200, 70, .2); --e: rgba(226, 160, 30, .55); }
.growth .stat { background: linear-gradient(160deg, var(--t), rgba(255, 255, 255, 0) 64%), #fff; box-shadow: 0 0 0 1.5px var(--e), 0 18px 40px -26px rgba(26, 37, 69, .35); }
.growth .stat .v { background-image: var(--g); background-clip: text; -webkit-background-clip: text; color: transparent !important; -webkit-text-fill-color: transparent; padding-right: .04em; }
.growth .stat .l b { color: var(--c) !important; }

/* ---- the hard line: what has been read, or waits below, fades its content, never its section's ground; so neighbouring bands are
   always the same colour, scrolling down or up ---- */
[data-unit].wait, [data-unit].past { opacity: 1; filter: none; }
[data-unit] > * { transition: opacity .7s ease, filter .7s ease; }
[data-unit].wait > * { opacity: .26; filter: grayscale(1); }
[data-unit].past > * { opacity: .5; filter: grayscale(1); }
@media (prefers-reduced-motion: reduce) { [data-unit] > * { transition: none; } }
.moments::before, .advband { background: var(--band); }
.gameband { background: var(--band); }

/* ---- the scene cards (call 9): open on the left, the others stacked on its right as whole pictures; the script places every box ---- */
.mgrid { display: block; position: relative; height: 640px; grid-template-columns: none !important; transition: height .6s cubic-bezier(.3, .8, .25, 1); }
.mgrid .mo, .mo { position: absolute; left: 0; top: 0; display: block; margin: 0; padding: 0; gap: 0; width: auto; overflow: hidden; border: 0; border-radius: 22px;
  background: var(--paper); cursor: pointer; box-shadow: 0 1px 0 rgba(26, 37, 69, .04), 0 22px 44px -32px rgba(26, 37, 69, .45);
  transition: left .6s cubic-bezier(.3, .8, .25, 1), top .6s cubic-bezier(.3, .8, .25, 1), width .6s cubic-bezier(.3, .8, .25, 1), height .6s cubic-bezier(.3, .8, .25, 1),
    box-shadow .3s ease, transform .3s ease; }
.mo.open { cursor: default; }
.mo:not(.open):hover { transform: translateY(-3px); box-shadow: 0 1px 0 rgba(26, 37, 69, .05), 0 30px 54px -30px rgba(26, 37, 69, .6); }
.mo .min { position: absolute; left: 20px; top: 20px; display: flex; flex-direction: column; gap: 16px; opacity: 0; visibility: hidden;
  transition: opacity .18s ease, visibility 0s linear .18s; }
.mo.open .min { opacity: 1; visibility: visible; transition: opacity .4s ease .32s, visibility 0s; }
.mo .mhead { display: grid; gap: 8px; margin: 0; min-height: 0; }
.mo .mhead .mk { margin: 0; font: 800 12px/1.2 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--sec-ink); white-space: normal; }
.mo .hook { width: auto; margin: 0; padding: 0; font: 600 17px/1.42 var(--display); color: var(--text); text-wrap: pretty; }
.mo .hook .tt { color: var(--ink); }
.mo .msw, .mo:not(.open) .msw { display: block; width: auto; opacity: 1; pointer-events: auto; }
.mo .msw > .segw { padding: 0; overflow: visible; min-height: 0; }
.mo .mslot { flex: none; }
.mo .mchart .tchart { margin: 0; padding: 12px 16px; gap: 6px; border-radius: 14px; background: var(--mist); }
.tchart .tr { grid-template-columns: minmax(0, 9em) minmax(0, 1fr) 1.6em; gap: 12px; }
.tchart .tv { text-align: right; }
.tchart .tb i::after { background: var(--sec); }
.mo .mstage { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 0; aspect-ratio: auto; border-radius: 14px;
  transition: left .6s cubic-bezier(.3, .8, .25, 1), top .6s cubic-bezier(.3, .8, .25, 1), width .6s cubic-bezier(.3, .8, .25, 1), height .6s cubic-bezier(.3, .8, .25, 1),
    border-radius .6s ease; }
.mo:not(.open) .mstage { border-radius: 0; }
.mo .mprog i { background: var(--sec); }
/* the picture's two buttons together, top right: sound, then replay */
.mo .mstage .snd { top: 10px; right: 52px; width: 34px; height: 34px; background: rgba(14, 22, 48, .62); box-shadow: 0 0 0 1px rgba(255, 255, 255, .22), 0 6px 14px -6px rgba(0, 0, 0, .5);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.mo .mstage .snd:hover { background: rgba(14, 22, 48, .82); }
.mo .mreplay { top: 10px; right: 10px; }
.mo:not(.open) .snd, .mo:not(.open) .mreplay, .mo:not(.open) .mprog, .mo:not(.open) .mnote, .mo:not(.open) .cutnote, .mo:not(.open) .where,
.mo:not(.open) .bub, .mo:not(.open) .dot { opacity: 0 !important; pointer-events: none; transition-delay: 0s !important; }
/* folded: the scene's name and title on a dark fade at the picture's foot, and a play button */
.mo .mcap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 9; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; row-gap: 6px; align-items: end;
  padding: 56px 18px 18px; color: #fff; background: linear-gradient(180deg, rgba(8, 11, 24, 0), rgba(8, 11, 24, .55) 45%, rgba(8, 11, 24, .86));
  opacity: 0; pointer-events: none; transition: opacity .18s ease; }
.mo:not(.open) .mcap { opacity: 1; transition: opacity .45s ease .3s; }
.mo .mcap .mk { grid-column: 1; margin: 0; font: 800 11px/1.2 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--cool-hi); }
.mo .mcap b { grid-column: 1; font: 800 clamp(17px, 1.45vw, 21px)/1.15 var(--display); letter-spacing: -0.02em; color: #fff; text-wrap: balance; }
.mo .mcap .go { grid-column: 2; grid-row: 1 / span 2; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--cool);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .16), 0 10px 22px -10px rgba(0, 0, 0, .7); transition: transform .3s cubic-bezier(.34, 1.5, .64, 1); }
.mo .mcap .go svg { width: 18px; height: 18px; fill: #fff; margin-left: 3px; }
.mo:not(.open):hover .mcap .go { transform: scale(1.1); }
.mo .fold { display: none; }
/* the footnote's glint: a light runs once round its edge, about a second */
.mo .mnote::after { content: ""; position: absolute; inset: -2px; border-radius: 10px; padding: 2px; pointer-events: none; opacity: 0;
  background: conic-gradient(from var(--ga), transparent 0deg, transparent 250deg, rgba(255, 255, 255, .25) 300deg, #fff 345deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.mo .mnote.glint { animation: notepop 1.2s ease; }
.mo .mnote.glint::after { animation: glint 1.2s cubic-bezier(.45, .05, .55, .95); }
.mo .mstill { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; pointer-events: none; transition: opacity .4s ease; }
.mo:not(.open):not(.peek) .mstill[src] { opacity: 1; transition-delay: .25s; }
.mo:not(.open) .mstage.pending .pend { opacity: 1; }
@media (max-width: 700px) {
  .mgrid { display: block; flex-direction: initial; }
  .mo .min { left: 16px; top: 16px; gap: 12px; }
  .mo .hook { font-size: 15.5px; }
  .mo .mprog { top: calc(var(--iw) * .75 - 4px); bottom: auto; }
  .mo .mstage .snd { top: 8px; right: 48px; width: 32px; height: 32px; }
  .mo .mcap { padding: 40px 16px 14px; }
  .mo .mcap .go { width: 40px; height: 40px; }
  .tchart .tr { grid-template-columns: minmax(0, 8em) minmax(0, 1fr) 1.6em; gap: 10px; }
  /* under the picture, the thoughts have their own quiet panel, so the room they need reads as part of the card, not a gap */
  .mo .mstage::after { content: ""; position: absolute; z-index: 0; left: 0; right: 0; top: calc(var(--iw) * .75 + 10px); height: max(0px, calc(var(--cap, 0px) - 10px));
    border-radius: 14px; background: var(--mist); pointer-events: none; }
  .mo:not(.open) .mstage::after, .mo .mstage.pending::after { display: none; }
  .mo .mstage .bub { z-index: 1; }
  .mo .mnote { top: calc(var(--iw) * .75 - 36px); bottom: auto; }
}
@media (prefers-reduced-motion: reduce) { .mgrid, .mo, .mo .mstage, .mo .min, .mo .mcap { transition: none !important; } }

/* ---- the deep dive (call 9): four steps whose titles carry the story, then two extras, the full game on its own ground at the foot ---- */
.techview .tsec[data-unit="matrix"] { border-top: 1px solid #E6E6EB; padding-top: 72px; }
.techview .tsec[data-unit="pick"] { border-top: 0; padding-top: 32px; }
.techview .tsec[data-unit="cuts"] { border-top: 1px solid #E6E6EB; padding-top: 72px; }
.techview .subh { margin: 0; font: 800 clamp(22px, 2.2vw, 28px)/1.15 var(--display); letter-spacing: -0.025em; color: var(--ink); }
.techview .xsec > .label::before { content: "+"; display: inline-block; margin-right: .5em; font-weight: 800; }
.techview h2 .sn { display: none; }
.tfoot { position: relative; isolation: isolate; margin-top: 24px; }
.tfoot::before { content: ""; position: absolute; z-index: -1; inset: 0 calc(50% - 50vw); background: var(--paper); border-top: 1px solid #E6E6EB; }
.techview .tfoot .tsec.full { border-top: 0; padding-top: 72px; padding-bottom: 56px; }
.techview .tfoot .tend { padding-block: 0 72px; }
.tpath li.x { flex: 0 0 auto; }
@media (min-width: 761px) { .tpath li { flex: 1 1 auto; } .tpath li.x { flex: 0 0 auto; } .tpath ol { gap: 16px; } }   /* every step's whole name, where it fits */
.tpath li.x:first-of-type, .tpath li:not(.x) + li.x { margin-left: 10px; padding-left: 14px; border-left: 1px solid #DCDDE5; }
.tpath li.x button i { font-size: 14px; }
.tpath li.x button i svg { width: 10px; height: 10px; fill: currentColor; vertical-align: -1px; }
@media (max-width: 760px) {
  .techview .tsec[data-unit="matrix"], .techview .tsec[data-unit="cuts"], .techview .tfoot .tsec.full { padding-top: 56px; }
  .tpath li:not(.x) + li.x { margin-left: 4px; padding-left: 10px; }
}

/* ================= 12 Nov (Jack, call 10): the blog is all warm; the deep dive is all blue =================
   Every accent on the blog is the warm yellow into orange, but for the three record cards, which wear their own stickers' colours so
   they stand out. The deep dive is light blue into deeper blue throughout: no violet, no orange, no yellow (its highlighter too).
   The teams' own red and blue in the data are not accents and stay. */
:scope { --blue-grad: linear-gradient(100deg, #7CC8F6 0%, #3E95EA 55%, #2F66DC 100%); --blue-ink: #2F6FD8; --blue-hi: #8FD0F8; --blue-soft: #E8F3FD; }
.wall, .bench, .gameband, .scale, .growth, .moments, .advband, .next { --sec: var(--warm); --sec-ink: var(--warm-ink); --sec-hi: var(--warm-hi); --sec-soft: var(--warm-soft);
  --purple: var(--warm-ink); --accent: var(--warm-ink); --accent-ink: var(--warm-ink); --accent-hi: var(--warm-hi); --accent-soft: var(--warm-soft); }
.techview { --sec: var(--blue-grad); --sec-ink: var(--blue-ink); --sec-hi: var(--blue-hi); --sec-soft: var(--blue-soft);
  --purple: var(--blue-ink); --accent: var(--blue-ink); --accent-ink: var(--blue-ink); --accent-hi: var(--blue-hi); --accent-soft: var(--blue-soft);
  --people: #4FA8EC; --people-soft: #EAF5FD; --signs: #4FA8EC; --wins: #2F5FD0; --marker: rgba(124, 200, 246, .38); }
/* the deep-dive band on the blog: navy, warmed by an orange glow */
.ddbar::after { background: radial-gradient(closest-side, rgba(243, 123, 46, .38), transparent); }
.ddbar .label, .ddbar .chips i { color: var(--warm-hi); }
.ddbar .label::before { color: rgba(255, 178, 92, .55); }
/* the scene cards stand in their places from the start: boxes never glide into their first places */
.mgrid.snap .mo, .mgrid.snap .mo .mstage, .mgrid.snap, .mgrid.snap .mo .min, .mgrid.snap .mo .mcap, .mgrid.snap .mo .mstill,
.mgrid.snap .tchart .tb i { transition: none !important; }
/* the deep-dive band is the way into the deep dive, so it already wears the deep dive's blue */
.ddbar::after { background: radial-gradient(closest-side, rgba(62, 149, 234, .45), transparent); }
.ddbar .label, .ddbar .chips i { color: var(--blue-hi); }
.ddbar .label::before { color: rgba(143, 208, 248, .55); }
/* the folded scenes: their label and play button warm */
.mo .mcap .mk { color: var(--warm-hi); }
.mo .mcap .go { background: var(--warm); }
/* a play triangle sits on the circle's centre (its own box is centred; no nudge) */
.mo .mcap .go svg { margin: 0; }
/* the deep dive: every accent from the blue family */
.tpath li b u { background: var(--blue-grad); }
.tpath li.on b u { box-shadow: 0 0 10px rgba(62, 149, 234, .45); }
.techview .tsec > .label, .techview .tsec .copy > .label, .techview .thero .label, .techview .mind h4 { color: var(--blue-ink); }
.techview .pick .presets button { border-color: rgba(47, 111, 216, .45); }
.techview .pick .presets button[aria-pressed="true"] { background: var(--blue-ink); border-color: var(--blue-ink); color: #fff; }
.techview .pcard.person { border-color: rgba(79, 168, 236, .5); }
.techview .score .labels .a, .techview .formula .ta { color: #3E95EA; } .techview .score .labels .b, .techview .formula .tb { color: #2F5FD0; }
.techview .score .split .sa { background: linear-gradient(100deg, #A6DBFA, #6FBDF3); } .techview .score .split .sb { background: linear-gradient(100deg, #3E95EA, #2F5FD0); }
.techview .hl { background-image: linear-gradient(var(--marker), var(--marker)); }
/* 12 Nov (Jack): the picker's player tiles hold their logo and name in the middle of the box */
.pcard { justify-content: center; padding: 3px; }
/* 12 Nov (Jack): the deep dive's back button holds its arrow dead centre (it no longer takes the other back links' side padding) */
.tpath .tpback { padding: 0; gap: 0; }
/* 12 Nov (Jack): the moat, said plainly under the growth heading */
.growth .moat { font: 700 clamp(18px, 1.6vw, 22px)/1.35 var(--display); letter-spacing: -0.012em; color: var(--ink); margin: 14px 0 0; max-width: 44em; text-wrap: pretty; }
.growth .moat b { color: var(--sec-ink); font-weight: 800; }
.growth .dek { font: 700 clamp(18px, 1.6vw, 22px)/1.35 var(--display); letter-spacing: -0.012em; color: var(--ink); max-width: 44em; text-wrap: pretty; }   /* Jack: as big and dark as the moat line */
/* 12 Nov (Jack): the model-testing ask beside Play, kept quiet: a soft pill, ink text, the address underlined */
p.cta { background: var(--mist); color: var(--ink); }
p.cta a { color: var(--ink); text-decoration-color: rgba(26, 37, 69, .35); }
p.cta a:hover { text-decoration-color: var(--ink); }
/* 12 Nov (Jack): a simple tap cue in the middle of each folded scene card: subtle, see-through, a slow pulse */
.mo .tapcue { position: absolute; z-index: 7; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; display: grid; place-items: center;
  pointer-events: none; background: rgba(10, 14, 30, .38); border: 1.5px solid rgba(255, 255, 255, .7); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 4px 18px rgba(0, 0, 0, .35); opacity: .92; transition: opacity .3s ease; }
.mo .tapcue svg { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5)); width: 22px; height: 22px; margin: 2px 0 0 2px; transform-origin: 40% 20%; animation: tapme 1.8s ease-in-out infinite; }
.mo .tapcue::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .7); animation: tapring 1.8s ease-out infinite; }
.mo:not(.open):hover .tapcue { opacity: .55; }
.mo.open .tapcue, .mo .mstage.pending .tapcue { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .mo .tapcue svg, .mo .tapcue::after { animation: none; } }
/* 12 Nov (Jack's copy pass): the opening's quiet second line; the game heading's second sentence; the line under BIGGEST, as big and dark
   as the moat line; the scenes' own heading; the closing's supporting line */
.quote .qsub { display: block; margin: 22px auto 0; max-width: 40em; text-align: center; font: 600 clamp(16px, 1.45vw, 21px)/1.35 var(--display);
  letter-spacing: -0.01em; color: rgba(255, 255, 255, .82); text-shadow: 0 2px 24px rgba(0, 0, 0, .4); }
.gtext h2 .h2more { display: block; margin-top: 12px; font-size: max(15px, .5em); line-height: 1.3; font-weight: 700; letter-spacing: -0.012em; color: var(--dim); text-wrap: pretty; }
.scale .lede { font: 700 clamp(18px, 1.6vw, 22px)/1.35 var(--display); letter-spacing: -0.012em; color: var(--ink); margin: -40px 0 56px; max-width: 44em; text-wrap: pretty; }
.moments .h2s { margin: 0 0 26px; }
.next .after { margin: 28px auto 0; max-width: 40em; font: 650 clamp(17px, 1.5vw, 21px)/1.4 var(--display); letter-spacing: -0.01em; color: var(--dim); text-wrap: balance; }
.next .after b { color: var(--sec-ink); font-weight: 800; }
.next .tease .h2s .eq { margin-right: -.06em; }   /* the full stop sits close after the orange words */
.next .tease { margin-bottom: 64px; }
@media (max-width: 700px) { .scale .lede { margin: -16px 0 32px; font-size: 17px; } .next .after { font-size: 16px; margin-top: 18px; } .next .tease { margin-bottom: 36px; } }
/* 12 Nov (Jack): the scenes play Fable's edited films, 16:9 and always whole; folded, the picture sits above a solid caption band, so the
   card's title never lands on the film's own words */
.mo.film .mstage, .mo.film .vz { background: #0B0F1E; }
.mo.film:not(.open) .vz, .mo.film:not(.open) .mstill, .mo.film:not(.open) .dip { top: 0; bottom: auto; height: calc(100% - var(--fcap, 76px)); border-radius: 0; }
.mo.film:not(.open) .mcap { padding: 14px 18px 16px; background: #0B0F1E; }
.mo.film .tapcue { top: calc((100% - var(--fcap, 76px)) / 2); }
@media (max-width: 700px) {
  .mo.film .vz, .mo.film .dip { height: calc(var(--iw) * .5625); }
  .mo.film .mprog { top: calc(var(--iw) * .5625 - 4px); }
  .mo.film .mcap { padding: 12px 16px 14px; }
}
}
@keyframes ld-spin { to { transform: rotate(1turn); } }
@keyframes tapring { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes sweep { from { background-size: 0% 88%; } to { background-size: 100% 88%; } }
@keyframes rise { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes sit-sway { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
@keyframes pop { 0% { transform: scale(.6); } 100% { transform: scale(1); } }
@keyframes cue { to { top: 110%; } }
@keyframes car { 50% { opacity: 0; } }
@keyframes advin { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes tapme { 0%, 100% { transform: scale(1); } 50% { transform: scale(.78); } }
@keyframes pendsweep { from { transform: translateX(-45%); } to { transform: translateX(45%); } }
@keyframes pendpulse { to { box-shadow: 0 0 0 10px rgba(179, 161, 255, 0); } }
@keyframes traitin { from { opacity: 0; transform: translateY(4px); } }
@keyframes mspin { from { transform: rotate(0); } to { transform: rotate(-360deg); } }
@property --ga { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes glint { 0% { --ga: 0deg; opacity: 0; } 12% { opacity: 1; } 85% { opacity: 1; } 100% { --ga: 360deg; opacity: 0; } }
@keyframes notepop { 0%, 100% { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); } 40% { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 0 18px 2px rgba(255, 255, 255, .28); } }
/* ==================================================================== the technical deep dive: the rauno version
   (12 Nov, Jack: the deep dive takes the Rauno reference design, ~/amonggpt-experiments/blog-redesign-2026-11-12/rauno; its
   chapter bar at the top is gone, the ruler on the right stays) */
@scope (#technical) {
/* ==========================================================================
   "rauno": the blog as a measuring instrument.
   One grid, visible guides, hairlines, mono labels, two team colours and nothing else.
   Tokens first; every rule below uses them.
   ========================================================================== */
:scope {
  color-scheme: light;
  /* greys */
  --bg: #FCFCFC;
  --cell: #FFFFFF;
  --well: #F8F8F8;
  --well2: #F3F3F3;
  --line: #E8E8E8;
  --line2: #E2E2E2;
  --line3: #CFCFCF;
  --quiet: #8F8F8F;
  --body: #6F6F6F;
  --text: #444444;
  --ink: #171717;
  /* dark surfaces */
  --d-bg: #111111;
  --d-well: #161616;
  --d-line: rgba(255, 255, 255, .1);
  --d-quiet: rgba(255, 255, 255, .5);
  /* colour: the two teams, one highlight, one hot accent */
  --crew: rgb(5, 111, 247);
  --imp: rgb(244, 40, 0);
  --yellow: #FFEF00;
  --hot: #FF4D00;
  /* type */
  --sans: "Geist", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --serif: Georgia, "Times New Roman", serif;
  /* space: one 8 px scale */
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s6: 48px; --s8: 64px; --s12: 96px; --s16: 128px;
  /* radii */
  --r1: 4px; --r-chip: 6px; --r2: 8px; --r3: 12px;
  /* the one shadow */
  --shadow: 0 4px 8px rgba(0, 0, 0, .04), 0 1px 1px rgba(0, 0, 0, .02);
  /* motion: one family */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --t1: 150ms; --t2: 250ms; --t3: 400ms;
  /* the grid */
  --frame: 1184px;
  --gut: clamp(16px, 3.4vw, 48px);
  --pad: 32px;
  --strip: 48px;
  --film-edge: rgba(0, 0, 0, .08);
  /* names the charts' script reads */
  --paper: var(--cell);
  --fig-ink: var(--ink);
  --fig-dim: var(--body);
  --fig-faint: #C9C9C9;
  --people: var(--ink);
  --people-soft: var(--well2);
  --purple: var(--ink);
}
@supports (color: color(display-p3 1 1 1)) {
  :scope { --crew: color(display-p3 .071 .442 .945); --imp: color(display-p3 .94 .19 .04); --yellow: color(display-p3 1 .94 .01); --hot: color(display-p3 1 .302 0); }
}
*, *::before, *::after { box-sizing: border-box; }
:scope { margin: 0; background: var(--bg); color: var(--text); font: 400 16px/1.6 var(--sans); font-feature-settings: "ss01" 0; font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: clip; overscroll-behavior-y: none; }
::selection { background: var(--yellow); color: var(--ink); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: var(--r1); }
button { font: inherit; color: inherit; }
a { color: inherit; }
p { margin: 0 0 var(--s2); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; color: var(--ink); }
strong, b { font-weight: 500; color: var(--ink); }
em, i { font-style: normal; }
svg text { font-family: var(--mono); }
[hidden] { display: none !important; }

/* ------------------------------------------------------------------ the grid and its guides */
.wrap { width: min(var(--frame), 100% - 2 * var(--gut)); margin-inline: auto; padding-inline: var(--pad); }
main, :scope { position: relative; z-index: 1; }
.guides { position: fixed; z-index: 0; top: 0; bottom: 0; left: 50%; width: min(var(--frame), 100% - 2 * var(--gut)); transform: translateX(-50%);
  border-inline: 1px solid var(--line); pointer-events: none; }

/* a section: a full-width hairline along its top, a cross where it meets each guide, then a spec-sheet strip */
.sec, .band { position: relative; }
.sec::before, .band::before { content: ""; position: absolute; top: 0; left: calc(50% - 50vw); width: 100vw; height: 1px; background: var(--line2);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform 900ms var(--ease); }
.sec.shown::before, .band.shown::before { transform: none; }
.sec::after, .band > .wrap::after { content: ""; position: absolute; z-index: 2; top: calc(-5px - var(--band-pt, 0px)); left: -5px; right: -5px; height: 11px; pointer-events: none;
  background:
    linear-gradient(var(--ink), var(--ink)) 5px 0 / 1px 11px no-repeat, linear-gradient(var(--ink), var(--ink)) 0 5px / 11px 1px no-repeat,
    linear-gradient(var(--ink), var(--ink)) calc(100% - 5px) 0 / 1px 11px no-repeat, linear-gradient(var(--ink), var(--ink)) 100% 5px / 11px 1px no-repeat;
  opacity: 0; transition: opacity var(--t3) var(--ease) 300ms; }
.band > .wrap { position: relative; }
.sec.shown::after, .band.shown > .wrap::after { opacity: 1; }
.sec { padding-top: 0; padding-bottom: var(--s12); }
.band { padding-bottom: var(--s12); }
.cont::before, .cont::after { display: none; }   /* a section that carries on its chapter: no new line */

/* the strip: index in ink, label quiet, a second label at the far end; a hairline from guide to guide under it */
.label, .kick, .sofar { display: flex; align-items: center; gap: var(--s2); height: var(--strip); margin: 0 calc(-1 * var(--pad)) var(--s8); padding: 0 var(--pad);
  border-bottom: 1px solid var(--line); font: 500 11px/16px var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--quiet); white-space: nowrap; }
.label .no, .kick .no, .sofar .no { color: var(--ink); min-width: 2ch; }
.label .sep { display: none; }
.label .sep.far { display: block; flex: 1; }

/* headlines */
h2, .h2s, .subh { font: 500 clamp(28px, 2.9vw, 40px)/1.1 var(--sans); letter-spacing: -0.04em; color: var(--ink); margin: 0 0 var(--s3); max-width: 24em; text-wrap: balance; }
.subh { font-size: clamp(22px, 2vw, 28px); letter-spacing: -0.035em; }

/* ------------------------------------------------------------------ entrances: each block arrives once */
[data-in] { opacity: 0; transform: translateY(8px); filter: blur(4px); }
[data-in].arr { opacity: 1; transform: none; filter: none;
  transition: opacity var(--t3) var(--ease), transform var(--t3) var(--ease), filter var(--t3) var(--ease); transition-delay: calc(var(--di, 0) * 50ms); }

/* ------------------------------------------------------------------ marks: no hand, only rule */
/* the point of a paragraph: a flat yellow block that wipes in from the left */
.hl { padding: .06em .14em; margin: 0 -.14em; color: var(--ink); -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background: linear-gradient(var(--yellow), var(--yellow)) no-repeat 0 50% / 0% 100%; transition: background-size 700ms var(--ease) 250ms; }
.arr .hl, .hl.arr { background-size: 100% 100%; }
.arr .hl ~ .hl { transition-delay: 450ms; } .arr .hl ~ .hl ~ .hl { transition-delay: 650ms; }
/* a lead word: a 1 px ink line that draws under it */
.ann.lead, .ann[data-ann~="underline"] { color: var(--ink); background: linear-gradient(var(--ink), var(--ink)) no-repeat 0 100% / 0% 1px; padding-bottom: 2px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size 600ms var(--ease) 300ms; }
.ann.lead { font-weight: 500; }
.arr .ann.lead, .arr .ann[data-ann~="underline"] { background-size: 100% 1px; }
/* a term being introduced: a precise frame that draws itself, a small cross at each corner */
.ann[data-ann~="circle"] { position: relative; display: inline-block; margin: 0 .42em; color: var(--ink); }
.ann .frame { position: absolute; inset: -.1em -.34em; pointer-events: none; }
.ann .frame svg { position: absolute; left: 0; top: 0; width: calc(100% - 1px); height: calc(100% - 1px); overflow: visible; }
.ann .frame rect { fill: none; stroke: var(--ink); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 900ms var(--ease) 350ms; }
.arr .ann .frame rect { stroke-dashoffset: 0; }
.ann .frame i { position: absolute; width: 7px; height: 7px; opacity: 0; transition: opacity var(--t2) var(--ease) 1000ms;
  background: linear-gradient(var(--ink), var(--ink)) 50% 0 / 1px 100% no-repeat, linear-gradient(var(--ink), var(--ink)) 0 50% / 100% 1px no-repeat; }
.ann .frame i:nth-of-type(1) { left: -3.5px; top: -3.5px; } .ann .frame i:nth-of-type(2) { right: -3.5px; top: -3.5px; }
.ann .frame i:nth-of-type(3) { left: -3.5px; bottom: -3.5px; } .ann .frame i:nth-of-type(4) { right: -3.5px; bottom: -3.5px; }
.arr .ann .frame i { opacity: 1; }
h2 .ann[data-ann~="circle"] { margin: 0 .3em; }
h2 .ann .frame { inset: -.02em -.22em; }
h2 .ann .frame i { width: 9px; height: 9px; }
h2 .ann .frame i:nth-of-type(1) { left: -4.5px; top: -4.5px; } h2 .ann .frame i:nth-of-type(2) { right: -4.5px; top: -4.5px; }
h2 .ann .frame i:nth-of-type(3) { left: -4.5px; bottom: -4.5px; } h2 .ann .frame i:nth-of-type(4) { right: -4.5px; bottom: -4.5px; }

/* ------------------------------------------------------------------ shared pieces */
/* a framed cell: 1 px border, 12 px radius, white ground; a mono caption row (label left, value right) */
.cell { position: relative; border: 1px solid var(--line2); border-radius: var(--r3); background: var(--cell); min-width: 0; }
.caprow { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); min-height: 40px; padding: 0 var(--s2);
  font: 500 11px/16px var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--quiet); }
.cell > .caprow { border-top: 1px solid var(--line); }
.cell > .caprow:first-child { border-top: 0; border-bottom: 1px solid var(--line); }
.caprow b { font-weight: 500; color: var(--ink); }
.caprow .tc { color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.caprow .tc i { color: var(--quiet); }
.prose { max-width: 34em; }
.prose p { color: var(--text); }
.copy, .stage { min-width: 0; }
/* two cells in a row: the words left, the figure right, and between them an inner guide that runs from the strip's line down to the
   next section's line, a cross where it starts. The headline lives in the words' cell. */
.two { --fig: 592px; padding-bottom: 0; }
.two .label { margin-bottom: 0; }
.two .scene, .two .gb, .scale > .holdin, .two.grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, var(--fig)); column-gap: 0; align-items: stretch; }
.two.grid2 > .label, .scale > .holdin > .label { grid-column: 1 / -1; }
.two.grid2 > .scene, .scale .scene, .two.grid2 > .single { display: contents; }
/* the words' cell (one block, or the headline and the words under it) */
.two .scene > .copy, .two .gtext, .two.grid2 > h2, .scale h2.big, .two.grid2 > .single > p { grid-column: 1; position: relative; margin: 0; max-width: none; padding: 0 var(--s4) var(--s12) 0; border-right: 1px solid var(--line); }
.two .gtext, .seats .scene > .copy, .two.grid2 > h2, .scale h2.big { padding-top: var(--s8); }
.two.grid2 > h2, .scale h2.big { padding-bottom: var(--s4); }
.two.grid2 > .single > p { padding-bottom: var(--s2); }
.two.grid2 > .single > p:last-child { padding-bottom: var(--s12); }
.two .c1::after { content: ""; position: absolute; z-index: 2; right: -5px; top: -5px; width: 9px; height: 9px; pointer-events: none;
  background: linear-gradient(var(--ink), var(--ink)) 50% 0 / 1px 100% no-repeat, linear-gradient(var(--ink), var(--ink)) 0 50% / 100% 1px no-repeat; }
/* the figure's cell */
.two .scene > .stage, .two .gvid, .two.grid2 > .single > .cell { grid-column: 2; align-self: start; margin: var(--s8) 0 var(--s12) var(--s4); }
.two.grid2, .scale > .holdin { grid-template-rows: auto auto 1fr; }
#t-bench { grid-template-rows: auto auto repeat(5, auto) 1fr; }
.two.grid2 > .scene > .stage, .scale .scene > .stage { grid-row: 2 / span 2; }
.two.grid2 > .single > .cell { grid-row: 2 / span 7; }
.two.grid2 > .single > .cell { position: sticky; top: calc(var(--strip) + var(--s4)); }
/* chapter 2 runs over two sections: the guide carries straight on */
#t-harness .scene > .copy { padding-bottom: var(--s4); } #t-harness .scene > .stage { margin-bottom: var(--s4); }
.two.cont .scene > .copy { padding-top: var(--s4); } .two.cont .scene > .stage { margin-top: var(--s4); }
/* where the figure is taller than its words, the words travel down beside it, so the cell is never left empty */
.two .stk { position: sticky; top: calc(var(--strip) + var(--s4)); }
.stage { position: relative; }
.stage iframe, .exfig iframe { display: block; border: 0; background: transparent; width: 100%; height: 460px; }
.viz { position: relative; font-family: var(--mono); color: var(--ink); }
.viz > svg, .barbox > svg { display: block; width: 100%; height: auto; overflow: visible; }

/* chart parts drawn by the script */
.ax { stroke: var(--line2); stroke-width: 1; stroke-dasharray: 1 3; vector-effect: non-scaling-stroke; }
.ax.z { stroke: var(--line3); stroke-dasharray: none; }
.axd { transform-box: fill-box; transform-origin: 0 50%; transform: scaleX(0); transition: transform 700ms var(--ease); transition-delay: calc(var(--i, 0) * 40ms); }
.on .axd { transform: none; }
.tk { fill: var(--quiet); font: 400 10px/1 var(--mono); letter-spacing: 0; }
.ctl { font: 500 10px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; fill: var(--quiet); }
.nmfade { transition: opacity var(--t2) var(--ease); }

/* the read-out over a chart: a small white card, hairline, his tooltip shadow, mono numbers */
.tip { position: absolute; z-index: 6; pointer-events: none; width: max-content; background: var(--cell); color: var(--ink); border: 1px solid var(--line2); border-radius: var(--r2);
  box-shadow: var(--shadow); font: 400 12px/1.4 var(--sans); text-align: left; opacity: 0; transform: translateY(4px) scale(.98); transform-origin: 50% 100%;
  transition: opacity var(--t1) var(--ease), transform var(--t1) var(--ease); }
.tip.on { opacity: 1; transform: none; }
.tip.glide { transition: opacity var(--t1) var(--ease), transform var(--t1) var(--ease), left var(--t2) var(--ease), top var(--t2) var(--ease); }
.tip .tc { width: 224px; padding: 12px 12px 10px; }
.tip .th { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.tip .th .lg { width: 28px; height: 28px; flex: none; border-radius: var(--r-chip); display: grid; place-items: center; border: 1px solid var(--line2); background: var(--cell); color: var(--ink); }
.tip .th .lg.an { background: #F1ECE1; border-color: transparent; }
.tip .th .lg svg { width: 16px; height: 16px; display: block; }
.tip .tc .nm { font: 500 13px/16px var(--sans); letter-spacing: -0.01em; color: var(--ink); white-space: nowrap; }
.tip .tc:not(:has(.lg)) .nm { white-space: normal; }
.tip .tc .nm .vs { color: var(--quiet); font-weight: 400; }
.tip .tc .lb { font: 400 10px/14px var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--quiet); margin-top: 1px; }
.tip .tc .rk { margin-left: auto; align-self: flex-start; font: 400 11px/16px var(--mono); color: var(--quiet); }
.tip .tc .sc { display: flex; align-items: baseline; justify-content: space-between; margin: 0 -12px 8px; padding: 8px 12px; border-block: 1px solid var(--line); }
.tip .tc .sc span { font: 400 10px/14px var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--quiet); }
.tip .tc .sc b { font: 500 18px/20px var(--mono); letter-spacing: -0.04em; color: var(--ink); }
.tip .br { display: grid; grid-template-columns: 64px 1fr 24px; align-items: center; gap: 8px; height: 20px; }
.tip .br span { font: 400 10px/14px var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--quiet); }
.tip .br i { display: block; height: 2px; background: var(--line); overflow: hidden; }
.tip .br u { display: block; height: 100%; text-decoration: none; background: var(--ink); }
.tip .br.c u { background: var(--crew); } .tip .br.i u { background: var(--imp); }
.tip .br b { font: 500 12px/16px var(--mono); text-align: right; color: var(--ink); }
.tip .tc .ft { margin-top: 8px; font: 400 11px/15px var(--sans); color: var(--quiet); white-space: normal; }
.tip .tc .ft + .ft { margin-top: 2px; }
.tip .tc .ft.em { color: var(--ink); }

/* "Hover any bar": a hairline chip in the plot's corner */
.taphint { position: absolute; z-index: 5; pointer-events: none; display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 6px; white-space: nowrap;
  font: 500 11px/16px var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink); background: var(--cell); border: 1px solid var(--line2); border-radius: var(--r-chip);
  box-shadow: var(--shadow); opacity: 0; transform: translateY(4px); transition: opacity var(--t3) var(--ease), transform var(--t3) var(--ease); }
.taphint.on { opacity: 1; transform: none; }
.taphint svg { width: 16px; height: 16px; flex: none; }
.taphint svg path { stroke: var(--ink); stroke-width: 1.2; }

/* chips: 28 px, hairline, 6 px radius. Hover goes in at once and eases out; a press gives 2 % */
.labs { display: flex; flex-wrap: wrap; gap: 4px; }
.labs button, .presets button, .pkbar button, .pcard { appearance: none; display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 10px 0 8px; border: 1px solid var(--line2);
  border-radius: var(--r-chip); background: var(--cell); font: 500 12px/16px var(--sans); letter-spacing: -0.005em; color: var(--body); cursor: pointer; white-space: nowrap;
  -webkit-tap-highlight-color: transparent; transition: border-color var(--t2) var(--ease), color var(--t2) var(--ease), background-color var(--t2) var(--ease), transform var(--t1) var(--ease), box-shadow var(--t2) var(--ease); }
.labs button:hover, .presets button:hover, .pkbar button:hover:not(:disabled), .pcard:hover { border-color: var(--line3); color: var(--ink); transition-duration: 0s, 0s, 0s, var(--t1), 0s; }
.labs button:active, .presets button:active, .pkbar button:active:not(:disabled), .pcard:active { transform: scale(.98); }
.labs button svg { width: 14px; height: 14px; flex: none; fill: currentColor; opacity: .4; filter: grayscale(1); transition: opacity var(--t2) var(--ease), filter var(--t2) var(--ease); }
.labs button[aria-pressed="true"] { border-color: var(--ink); color: var(--ink); }
.labs button[aria-pressed="true"] svg { opacity: 1; filter: none; }
.labs button:focus:not(:focus-visible) { outline: none; }

/* tabs: one compact segmented control; the ink thumb slides to the pressed one */
.labs.views { position: relative; display: inline-flex; flex-wrap: nowrap; gap: 0; padding: 2px; border: 1px solid var(--line2); border-radius: var(--r2); background: var(--cell); isolation: isolate; }
.labs.views button { position: relative; z-index: 1; height: 26px; padding: 0 12px; border: 0; border-radius: var(--r-chip); background: none; font: 500 12px/16px var(--sans); color: var(--body); transition: color var(--t2) var(--ease); }
.labs.views button:hover { color: var(--ink); }
.labs.views button:active { transform: none; }
.labs.views button[aria-pressed="true"] { color: #fff; }
.labs.views:not(.thumbed) button[aria-pressed="true"] { background: var(--ink); }
.labs.views .vthumb { position: absolute; z-index: 0; top: 2px; bottom: 2px; left: 0; width: 0; border-radius: var(--r-chip); background: var(--ink);
  transition: transform var(--t2) var(--ease), width var(--t2) var(--ease); }

/* films: 12 px radius, a 1 px edge, a mono caption row underneath */
.clip, .film { position: relative; aspect-ratio: 1404 / 1080; overflow: hidden; border-radius: var(--r3); background: var(--d-bg); isolation: isolate; }
.clip video, .film video { display: block; width: 100%; height: 100%; object-fit: cover; }
.clip::after, .film::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--film-edge); pointer-events: none; }
p.tag { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); min-height: 40px; margin: 0; padding: 0 2px; font: 500 11px/16px var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--quiet); }
p.tag b { font-weight: 500; color: var(--ink); }
p.tag .tc { flex: none; color: var(--ink); letter-spacing: 0; }
p.tag .tc i { color: var(--quiet); }
/* the round buttons over a film: translucent, blurred, a 1 px light edge; their icons cross-fade with a slight blur */
.snd, .mo .mreplay, .film .pp { width: 36px; height: 36px; padding: 0; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .2); border-radius: 50%;
  background: rgba(17, 17, 17, .45); color: #fff; -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4); -webkit-tap-highlight-color: transparent; }
.snd, .mo .mreplay { position: absolute; z-index: 9; top: 12px; right: 12px; cursor: pointer; transition: background-color var(--t2) var(--ease), transform var(--t1) var(--ease), opacity var(--t2) var(--ease); }
.snd:hover, .mo .mreplay:hover { background: rgba(17, 17, 17, .7); transition-duration: 0s, var(--t1), var(--t2); }
.snd:active, .mo .mreplay:active { transform: scale(.94); }
.snd:focus:not(:focus-visible) { outline: none; }
.snd:focus-visible, .mo .mreplay:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 50%; }
.snd[hidden] { display: none; }
.snd svg { grid-area: 1 / 1; width: 16px; height: 16px; fill: #fff; }
.snd svg .w { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; transform-box: fill-box; transform-origin: 0 50%;
  transition: opacity var(--t2) var(--ease), filter var(--t2) var(--ease), transform var(--t2) var(--ease); }
.snd svg .w.a, .snd.on svg .w.b { opacity: 0; filter: blur(2px); transform: scale(.7); }
.snd.on svg .w.a { opacity: 1; filter: none; transform: none; }

/* ------------------------------------------------------------------ the scroll ruler */
.ruler, .rtrk { position: fixed; z-index: 40; right: 0; top: 50%; width: 44px; transform: translateY(-50%); opacity: 0; transition: opacity var(--t3) var(--ease); }
.ruler { cursor: pointer; mix-blend-mode: difference; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
.rtrk { pointer-events: none; }
.ruler.ready, .rtrk.ready { opacity: 1; }
.ruler:not(.ready) { pointer-events: none; }
.ruler .tick { display: block; height: 8px; position: relative; }
.ruler .tick::before { content: ""; position: absolute; right: 12px; top: 50%; height: 1px; margin-top: -.5px; width: 8px; background: #5C5C5C; transform-origin: 100% 50%;
  transform: scaleX(calc(1 + var(--k, 0) * 1.5)); transition: transform var(--t3) var(--ease); }
.ruler .tick.major::before { width: 16px; background: #E6E6E6; }
.ruler:hover .tick::before { transition-duration: 80ms; }
.rtrk .trk { position: absolute; right: 8px; top: 0; width: 28px; height: 1px; margin-top: -.5px; background: var(--hot); will-change: transform; }
.rtrk .rlab { position: absolute; right: 48px; top: 0; padding: 0 6px; height: 20px; margin-top: -10px; display: grid; place-items: center; font: 500 10px/1 var(--mono); letter-spacing: .04em; color: var(--ink);
  background: var(--cell); border: 1px solid var(--line2); border-radius: var(--r1); box-shadow: var(--shadow); white-space: nowrap; opacity: 0; transition: opacity var(--t1) var(--ease); }
.rtrk .rlab.on { opacity: 1; }
@media (max-width: 1100px), (hover: none) { .ruler, .rtrk { display: none; } }

/* ------------------------------------------------------------------ the opening: the wall, then the line.
   Kept exactly as the original page has it (Jack, 12 Nov: the wall stays in every version): its size, shade, blur, fog, the centred line
   with its warm numbers, the cue. Only the typeface of its words is this version's (Geist). Nothing of this version sits over it. */
.wall { position: relative; z-index: 2; height: 250vh; height: 250svh; background: #070A18; }
.wall .wrap { width: auto; max-width: calc(1120px + 32px); padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.wstick { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.wlv { position: absolute; inset: 0; overflow: hidden; background: #070A18; filter: blur(calc(var(--w, 0) * 16px)); transform: scale(calc(1 + var(--w, 0) * .06)); }
.wlv .fr { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; will-change: transform; }
.wstick .wlv video { position: absolute; inset: auto; display: block; width: 1920px; height: 1080px; object-fit: fill; filter: none; transform-origin: 0 0; background: transparent; }
.wlv video.off { visibility: hidden; }
.wshade { position: absolute; inset: 0; pointer-events: none; opacity: var(--sh, .1); background: radial-gradient(ellipse 80% 70% at 42% 60%, rgba(7, 9, 22, .62), rgba(7, 9, 22, .9)); }
.wfog { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: var(--w, 0); background: radial-gradient(ellipse 90% 80% at 50% 50%, rgba(7, 10, 24, .62), rgba(7, 10, 24, .86)); }
.wbar, .quote { position: absolute; left: 0; right: 0; }
.wbar { z-index: 3; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 26px 0; opacity: calc(1 - var(--w, 0)); }
.wbar img { height: clamp(32px, 3.4vw, 52px); width: auto; display: block; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .45)); }
.wbar .pmt { font: 600 clamp(14px, 1.15vw, 16px)/1 var(--sans); letter-spacing: -0.01em; color: rgba(255, 255, 255, .86); white-space: nowrap; text-shadow: 0 1px 12px rgba(0, 0, 0, .45); }
.quote { z-index: 4; top: 50%; bottom: auto; text-align: center; opacity: var(--q, 0); translate: 0 calc(-50% + (1 - var(--q, 0)) * 30px); }
.quote h1 { margin: 0 auto; max-width: 15.5em; font: 600 clamp(34px, 4.9vw, 74px)/1.06 var(--sans); letter-spacing: -0.045em; color: #fff; text-wrap: balance; text-shadow: 0 2px 40px rgba(0, 0, 0, .35); }
.quote h1 .n { background-image: linear-gradient(100deg, #F6A928 0%, #F37B2E 55%, #EC5A36 100%); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; white-space: nowrap; }
.quote h1 .n b { display: inline-block; text-align: right; font-weight: inherit; color: inherit; font-variant-numeric: tabular-nums; }
.cue { position: absolute; z-index: 3; left: 50%; bottom: 28px; translate: -50% 0; margin: 0; display: grid; justify-items: center; gap: 0; opacity: var(--cue, 1); }
.cue i { width: 3px; height: 52px; border-radius: 2px; background: rgba(255, 255, 255, .2); box-shadow: 0 0 14px rgba(255, 255, 255, .12); overflow: hidden; position: relative; }
.cue i::after { content: ""; position: absolute; left: 0; right: 0; top: -40%; height: 42%; background: #fff; box-shadow: 0 0 8px rgba(255, 255, 255, .9); border-radius: 2px; animation: cue 1.6s cubic-bezier(.5, 0, .3, 1) infinite; }
@media (max-width: 700px) { .wall { height: 230vh; height: 230svh; } }
@media (max-width: 640px) { .wbar img { height: 26px; } .quote h1 { font-size: clamp(30px, 8.6vw, 44px); } }
/* the first section after the wall starts on the wall's own edge: no line or cross of this version on it */
.bench::before, .bench::after { display: none; }

/* ------------------------------------------------------------------ 01 the leaderboard */
.bench .bhead { max-width: 800px; margin-bottom: var(--s6); }
.bench .fn { margin: 0; font: 400 18px/1.5 var(--sans); letter-spacing: -0.01em; color: var(--ink); max-width: 40em; }
.bgrid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 176px; align-items: start; border: 1px solid var(--line2); border-radius: var(--r3); background: var(--cell); }
.bgrid::before { content: ""; position: absolute; top: 0; bottom: 0; right: 176px; width: 1px; background: var(--line); }
.bartop { display: flex; align-items: center; justify-content: space-between; gap: var(--s1) var(--s2); flex-wrap: wrap; min-height: var(--strip); padding: 8px var(--s2); border-bottom: 1px solid var(--line); }
.barleg { display: flex; gap: var(--s2); font: 500 11px/16px var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--body); }
.barleg span { display: inline-flex; align-items: center; gap: 8px; transition: opacity var(--t2) var(--ease); }
.barleg span::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--crew); }
.barleg span.i::before { background: var(--imp); }
.barleg span.off { opacity: .3; }
.barbox { position: relative; margin: var(--s3) var(--s2) var(--s2); }
.labs.side { flex-direction: column; flex-wrap: nowrap; gap: 4px; padding: 10px; }
.labs.side button { width: 100%; justify-content: flex-start; }
.labs.side button.fly { margin-top: var(--s2); }
.barbox .ytl { font: 500 10px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; transition: fill var(--t3) var(--ease); }
.barbox .pname { font: 500 10px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; fill: var(--ink); paint-order: stroke; stroke: var(--cell); stroke-width: 4px; stroke-linejoin: round; }
.lbar { cursor: pointer; outline: none; transition: opacity var(--t2) var(--ease); }
.lbar .cr { fill: var(--crew); transition: fill var(--t2) var(--ease); }
.lbar .ir { fill: var(--imp); transition: fill var(--t2) var(--ease); }
.lbar .vl { font: 500 10px/1 var(--mono); letter-spacing: -0.02em; fill: var(--ink); font-variant-numeric: tabular-nums; pointer-events: none; }
.lbar .nm { font: 400 10px/1 var(--mono); fill: var(--body); transition: fill var(--t2) var(--ease); }
.lbar.fr .nm { fill: var(--ink); }
.lbar .hair { stroke: var(--ink); stroke-width: 1; opacity: 0; transition: opacity var(--t2) var(--ease); pointer-events: none; }
.lbar:hover .hair, .lbar:focus-visible .hair { opacity: 1; transition-duration: 0s; }
.lbar:hover .nm, .lbar:focus-visible .nm { fill: var(--ink); }
.barbox svg:has(.lbar:hover) .lbar:not(:hover), .barbox svg:has(.lbar:focus-visible) .lbar:not(:focus-visible) { opacity: .35; }
.lbar.dim .cr { fill: #E4E4E4; } .lbar.dim .ir { fill: #EEEEEE; }
.lbar.dim .lg { opacity: .45; filter: grayscale(1); } .lbar.dim .vl { fill: var(--fig-faint); } .lbar.dim .nm { fill: var(--fig-faint); }
svg [tabindex]:focus, svg [tabindex]:focus-visible { outline: none; }
svg [tabindex], .mx .cell, .mo, .seg button { -webkit-tap-highlight-color: transparent; }
/* a lab's mark follows the ink of its label wherever it has no colour of its own */
.seg button svg, .tchart .tn svg, .pcard .lg svg, .seat .ring svg, .ghost svg, .mx .h svg, .nudge .chip svg, .tip .lg svg { fill: currentColor; }

/* ------------------------------------------------------------------ 02 how the game works */
.gtext { min-width: 0; display: flex; flex-direction: column; }
.gtext h2 { margin-bottom: var(--s6); }
/* the ten stand on a hairline; an impostor is called out by a small tag on a 1 px stem */
.ten { display: flex; justify-content: space-between; align-items: flex-end; max-width: 448px; margin: 0 0 var(--s4); padding: 28px 4px 0; border-bottom: 1px solid var(--line3); }
.ten .k { position: relative; width: clamp(24px, 2.8vw, 34px); aspect-ratio: 172 / 217; opacity: 0; transform: translateY(6px); transition: opacity var(--t3) var(--ease), transform var(--t3) var(--ease); transition-delay: calc(var(--i) * 40ms); }
.ten .k img { position: absolute; left: 50%; bottom: 0; height: 100%; width: auto; max-width: none; transform: translateX(-50%); }
.ten .k .pin { position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translate(-50%, 4px); opacity: 0; white-space: nowrap; padding: 3px 5px; border-radius: var(--r1); background: var(--imp); color: #fff;
  font: 500 9px/10px var(--mono); letter-spacing: .06em; text-transform: uppercase; transition: opacity var(--t2) var(--ease) 700ms, transform var(--t2) var(--ease) 700ms; }
.ten .k .pin::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: 7px; background: var(--imp); }
.on .ten .k { opacity: 1; transform: none; }
.on .ten .k .pin { opacity: 1; transform: translate(-50%, 0); }
/* the two rules, as two rows of a sheet */
.rules { list-style: none; margin: 0 0 var(--s4); padding: 0; max-width: 448px; border-top: 1px solid var(--line); }
.rules li { display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--line); font: 400 15px/1.5 var(--sans); color: var(--text); }
.rules b { font: 500 11px/16px var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.rules .crew b { color: var(--crew); } .rules .imp b { color: var(--imp); }
/* try it yourself: a hairline row; the arrow slides 2 px */
.playcta { margin-top: auto; max-width: 448px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s2); padding: 12px; border: 1px solid var(--line2); border-radius: var(--r3);
  background: var(--cell); color: var(--ink); text-decoration: none; transition: border-color var(--t2) var(--ease), transform var(--t1) var(--ease); }
.playcta:hover { border-color: var(--ink); transition-duration: 0s, var(--t1); }
.playcta:active { transform: scale(.99); }
.playcta .pci { width: 40px; height: 40px; border-radius: var(--r2); background: var(--well2); display: grid; place-items: end center; overflow: hidden; }
.playcta .pci img { height: 36px; width: auto; transform: translateY(4px); }
.playcta .pctx { display: grid; gap: 2px; min-width: 0; }
.playcta .pctx b { font: 500 15px/20px var(--sans); letter-spacing: -0.01em; }
.playcta .pctx span { font: 400 11px/16px var(--mono); color: var(--quiet); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.playcta .pcgo { width: 32px; height: 32px; border-radius: var(--r2); display: grid; place-items: center; background: var(--ink); color: #fff; overflow: hidden; }
.playcta .pcgo svg, a.cta.play svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--t2) var(--ease); }
.playcta:hover .pcgo svg, a.cta.play:hover svg { transform: translate(2px, -2px); }
.gvid { min-width: 0; }

/* ------------------------------------------------------------------ 03 the biggest game */
/* the scale chart: circles by area. The cell is its frame; each study an open circle on a 1 px ink line, ours solid ink */
.scale .stage { overflow: hidden; }
.scale .stage .caprow { border-top: 1px solid var(--line); }
.viz .bar { fill: var(--cell); stroke: var(--ink); stroke-width: 1; transition: fill var(--t2) var(--ease); }
.viz .bar.ours { fill: var(--ink); stroke: none; }
.viz .shine { display: none; }
.viz .spiral { stroke: var(--line3); stroke-width: 1; stroke-dasharray: 1 3; }
.viz .brk { stroke: var(--quiet); stroke-width: 1; }
.viz a.study { cursor: pointer; }
.viz a.study:hover .bar, .viz a.study:focus-visible .bar { fill: var(--yellow); transition-duration: 0s; }
.viz a.study:focus-visible { outline: none; }
.viz .sitter { transform-box: fill-box; transform-origin: 50% 71%; animation: sit-sway 2.8s ease-in-out infinite; }

/* ------------------------------------------------------------------ 04 how we got them */
.growth .dek { margin: 0; font: 400 18px/1.5 var(--sans); letter-spacing: -0.01em; color: var(--body); max-width: 40em; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--s6); border: 1px solid var(--line2); border-radius: var(--r3); background: var(--cell); }
.stat { position: relative; display: flex; flex-direction: column; min-width: 0; padding: var(--s3); }
.stat + .stat { border-left: 1px solid var(--line); }
.stat .tag { align-self: flex-start; height: 20px; padding: 0 6px; display: inline-grid; place-items: center; border: 1px solid var(--ink); border-radius: var(--r1); font: 500 10px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.stat:not(.rec)::before { content: ""; display: block; height: 20px; }
.stat .ico { position: absolute; right: var(--s2); top: var(--s2); width: 44px; height: 44px; object-fit: contain; pointer-events: none; opacity: 0; transform: translateY(4px) scale(.9); filter: blur(3px);
  transition: opacity var(--t3) var(--ease), transform var(--t3) var(--ease), filter var(--t3) var(--ease); transition-delay: calc(var(--i, 0) * 60ms + 250ms); }
.stat:nth-child(2) .ico { --i: 1; } .stat:nth-child(3) .ico { --i: 2; }
.growth.seen .stat .ico { opacity: 1; transform: none; filter: none; }
.stat .v { display: block; margin-top: var(--s4); font: 500 clamp(36px, 3.8vw, 52px)/1 var(--sans); letter-spacing: -0.05em; font-variant-numeric: tabular-nums; color: var(--ink); }
.stat .l { display: block; margin-top: 12px; font: 400 15px/1.5 var(--sans); color: var(--body); }
.stat .l b { font-weight: 500; color: var(--ink); }

/* ------------------------------------------------------------------ 05 the scenes */
.mgrid { position: relative; height: 640px; transition: height 500ms var(--ease); }
.mo { position: absolute; left: 0; top: 0; margin: 0; padding: 0; overflow: hidden; border: 1px solid var(--line2); border-radius: var(--r3); background: var(--cell); cursor: pointer; outline: none;
  transition: left 500ms var(--ease), top 500ms var(--ease), width 500ms var(--ease), height 500ms var(--ease), border-color var(--t2) var(--ease); }
.mo.open { cursor: default; }
.mo:not(.open):hover { border-color: var(--ink); transition-duration: 500ms, 500ms, 500ms, 500ms, 0s; }
.mo:not(.open):focus-visible { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.mo .min { position: absolute; left: 24px; top: 24px; display: flex; flex-direction: column; gap: var(--s2); opacity: 0; visibility: hidden; transition: opacity var(--t1) var(--ease), visibility 0s linear var(--t1); }
.mo.open .min { opacity: 1; visibility: visible; transition: opacity var(--t3) var(--ease) 300ms, visibility 0s; }
.mo .mhead { display: grid; gap: var(--s1); margin: 0; }
.mo .mk { margin: 0; font: 500 11px/16px var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--quiet); }
.mo .hook { margin: 0; font: 400 18px/1.45 var(--sans); letter-spacing: -0.015em; color: var(--body); text-wrap: pretty; }
.mo .hook .tt { font-weight: 500; color: var(--ink); }
.mo .mslot { flex: none; }
/* the model picker: a segmented control, and the picked model's line under a tick that slides to its tab */
.mo .mpick { --n: 3; --i: 0; position: relative; }
.seg { position: relative; display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); padding: 2px; border: 1px solid var(--line2); border-radius: var(--r2); background: var(--cell); isolation: isolate; }
.seg .thumb { position: absolute; z-index: 0; top: 2px; bottom: 2px; left: calc(2px + var(--i, 0) * (100% - 4px) / var(--n, 3)); width: calc((100% - 4px) / var(--n, 3)); border-radius: var(--r-chip); background: var(--ink);
  transition: left var(--t2) var(--ease); }
.seg .thumb .prog { display: none; }
.seg button { position: relative; z-index: 1; appearance: none; border: 0; background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; height: 30px; padding: 0 6px; border-radius: var(--r-chip);
  font: 500 13px/16px var(--sans); color: var(--body); min-width: 0; transition: color var(--t2) var(--ease); }
.seg button span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seg button svg { width: 14px; height: 14px; flex: none; }
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { color: #fff; }
.mo .mtrait { position: relative; margin: 12px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line); font: 400 14px/1.5 var(--sans); color: var(--body); text-wrap: pretty; }
.mo .mtrait::before { content: ""; position: absolute; top: -8px; left: calc((var(--i, 0) + .5) * 100% / var(--n, 3)); width: 1px; height: 8px; background: var(--ink); transition: left var(--t2) var(--ease); }
.mo .mtrait b { font-weight: 500; color: var(--ink); }
.mo .mtrait.in { animation: traitin var(--t3) var(--ease) both; }
/* the card's chart: a small table, hairline rows, mono numbers; the picked model's row in ink */
.tchart { display: grid; margin: 0; }
.tchart .tr { display: grid; grid-template-columns: minmax(0, 10em) minmax(0, 1fr) 2.2em; align-items: center; gap: var(--s2); height: 32px; border-top: 1px solid var(--line); }
.tchart .tn { display: flex; align-items: center; gap: 8px; min-width: 0; font: 500 12px/16px var(--sans); color: var(--quiet); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color var(--t2) var(--ease); }
.tchart .tn svg { width: 14px; height: 14px; flex: none; opacity: .5; filter: grayscale(1); transition: opacity var(--t2) var(--ease), filter var(--t2) var(--ease); }
.tchart .tb { position: relative; height: 4px; background: var(--well2); overflow: hidden; border-radius: 0 2px 2px 0; }
.tchart .tb i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 0 2px 2px 0; background: #D4D4D4; transition: width 800ms var(--ease), background-color var(--t2) var(--ease); }
.mo.open .tchart .tb i { width: var(--w); }
.mo.open .tchart .tr:nth-child(2) .tb i { transition-delay: 60ms, 0s; }
.mo.open .tchart .tr:nth-child(3) .tb i { transition-delay: 120ms, 0s; }
.tchart .tv { font: 500 12px/16px var(--mono); font-variant-numeric: tabular-nums; color: var(--quiet); text-align: right; transition: color var(--t2) var(--ease); }
.tchart .tr.hi .tn, .tchart .tr.hi .tv { color: var(--ink); }
.tchart .tr.hi .tn svg { opacity: 1; filter: none; }
.tchart .tr.hi .tb i { background: var(--ink); }
.tchart .tcap { margin: 0; padding-top: 10px; border-top: 1px solid var(--line); font: 500 11px/16px var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--quiet); }
/* the picture */
.mo .mstage { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 0; overflow: hidden; border-radius: var(--r2); background: var(--d-bg); isolation: isolate;
  transition: left 500ms var(--ease), top 500ms var(--ease), width 500ms var(--ease), height 500ms var(--ease), border-radius 500ms var(--ease); }
.mo:not(.open) .mstage { border-radius: 0; }
.mo .mstage::before { content: ""; position: absolute; inset: 0; z-index: 8; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--film-edge); pointer-events: none; }
.mo .mstage .vz { position: absolute; inset: 0; transform-origin: 0 0; }
.mo .mstage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; }
.mo .mstage video.off { opacity: 0; }
.mo .mstill { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; pointer-events: none; transition: opacity var(--t3) var(--ease); }
.mo:not(.open):not(.peek) .mstill[src] { opacity: 1; transition-delay: 200ms; }
.mo .dip { position: absolute; inset: 0; z-index: 2; background: var(--d-bg); opacity: 0; pointer-events: none; transition: opacity 240ms ease; }
.mo .dip.on { opacity: 1; }
/* labels over the picture: mono, on a blurred translucent ground */
.mo .where, .mo .mnote, .mo .cutnote { position: absolute; z-index: 6; padding: 5px 8px; border-radius: var(--r1); pointer-events: none; white-space: nowrap; font: 500 10px/12px var(--mono); letter-spacing: .04em; text-transform: uppercase;
  color: #fff; background: rgba(17, 17, 17, .5); border: 1px solid rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: opacity var(--t2) var(--ease), transform var(--t2) var(--ease); }
.mo .where { left: 12px; top: 12px; z-index: 3; }
.mo .povnote { opacity: 0; } .mo .povnote.on { opacity: 1; }
.mo .mnote { left: 12px; bottom: 14px; max-width: calc(100% - 24px); white-space: normal; text-transform: none; letter-spacing: 0; }
.mo .mstage:has(.cutnote.on) .mnote { opacity: 0; }
.mo .cutnote { left: 50%; bottom: 14px; z-index: 5; opacity: 0; transform: translate(-50%, 4px); }
.mo .cutnote.on { opacity: 1; transform: translate(-50%, 0); }
@property --ga { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.mo .mnote::after { content: ""; position: absolute; inset: -1px; border-radius: var(--r1); padding: 1px; pointer-events: none; opacity: 0;
  background: conic-gradient(from var(--ga), transparent 0deg, transparent 250deg, rgba(255, 255, 255, .3) 300deg, #fff 345deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.mo .mnote.glint::after { animation: glint 1.2s cubic-bezier(.45, .05, .55, .95); }
/* the thought: white, hairline, 8 px, a mono label, the key words in flat yellow */
.mo .bub { position: absolute; z-index: 4; left: 0; top: 10px; max-width: min(78%, 340px); padding: 10px 12px 11px; border-radius: var(--r2); background: var(--cell); color: var(--ink); border: 1px solid rgba(0, 0, 0, .1);
  box-shadow: var(--shadow); transform-origin: var(--ox, 50%) 100%; transition: opacity var(--t2) var(--ease), transform var(--t2) var(--ease), filter var(--t2) var(--ease); will-change: left, top, transform; }
.mo .bub.long { max-width: calc(100% - 16px); }
.mo .mstage.quiet .bub { opacity: 0; transform: translateY(6px) scale(.98); filter: blur(3px); transition-duration: var(--t1); }
.mo .bub .bm { margin: 0 0 4px; font: 500 9px/12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--quiet); }
.mo .bub .bt { margin: 0; min-height: 1.4em; font: 400 14px/1.4 var(--sans); letter-spacing: -0.005em; white-space: pre-line; overflow-wrap: anywhere; }
.mo .bub.long .bt { font-size: 12.5px; line-height: 1.36; }
.mo .bub .bt mark.hl { background: var(--yellow); color: inherit; font-weight: 500; padding: 1px 3px; margin: 0 -1px; transition: none; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.mo .bub .bt .car { display: inline-block; width: 1px; height: 1em; background: var(--ink); vertical-align: -2px; margin-left: 1px; animation: car 1s steps(2) infinite; }
.mo .bub .btail { position: absolute; left: var(--tx, 50%); top: calc(100% - 1px); width: 18px; height: 11px; margin-left: -9px; display: block; overflow: visible; }
.mo .bub .btail path:last-child { stroke: rgba(0, 0, 0, .14); stroke-width: 1; }
.mo .dot { position: absolute; z-index: 4; border-radius: 50%; background: var(--cell); box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); translate: -50% -50%; opacity: 1; transform: scale(1);
  transition: opacity var(--t2) var(--ease), transform var(--t2) var(--ease); will-change: left, top; }
.mo .mstage:not(.quiet) .dot { transition-delay: calc(var(--d, 0) * 1ms); }
.mo .mstage.quiet .dot, .mo .mstage.nohead .dot { opacity: 0 !important; transform: scale(.3); transition-delay: 0s; }
.mo .dot.gone { opacity: 0 !important; transition-delay: 0s !important; }
.mo.speech .dot { display: none; }
.mo .mstage.nohead .btail { opacity: 0; transition: opacity var(--t2) var(--ease); }
/* how far the clip has run */
.mo .mprog { position: absolute; left: 0; right: 0; bottom: 0; z-index: 7; height: 2px; background: rgba(255, 255, 255, .2); pointer-events: none; transition: opacity var(--t2) var(--ease); }
.mo .mprog i { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(0); background: #fff; }
.mo .mstage .snd { right: 56px; }
.mo .mreplay svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.mo .mstage.spin .mreplay svg { animation: mspin 500ms var(--ease); }
/* a clip still on its way: dark, a mono label, one live dot */
.mo .pend { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; background: var(--d-well); opacity: 0; pointer-events: none; transition: opacity var(--t3) var(--ease); }
.mo .pend span { display: inline-flex; align-items: center; gap: 8px; font: 500 11px/16px var(--mono); letter-spacing: .04em; text-transform: uppercase; color: rgba(255, 255, 255, .7); white-space: nowrap; }
.mo .pend i { width: 6px; height: 6px; border-radius: 50%; background: var(--hot); animation: live 1.6s ease-in-out infinite; }
.mo .mstage.pending .pend { opacity: 1; }
.mo .mstage.pending video, .mo .mstage.pending .bub, .mo .mstage.pending .dot, .mo .mstage.pending .mprog, .mo .mstage.pending .mreplay, .mo .mstage.pending .mnote { opacity: 0 !important; }
.mo .mstage.pending .mreplay { pointer-events: none; }
/* folded: the whole picture, and its name on a caption row underneath */
.mo:not(.open) .snd, .mo:not(.open) .mreplay, .mo:not(.open) .mprog, .mo:not(.open) .mnote, .mo:not(.open) .cutnote, .mo:not(.open) .where,
.mo:not(.open) .bub, .mo:not(.open) .dot { opacity: 0 !important; pointer-events: none; transition-delay: 0s !important; }
.mo .mcap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 9; height: var(--fc, 64px); display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 2px; align-content: center; align-items: center;
  padding: 0 var(--s2); background: var(--cell); border-top: 1px solid var(--line); opacity: 0; pointer-events: none; transition: opacity var(--t1) var(--ease); }
.mo:not(.open) .mcap { opacity: 1; transition: opacity var(--t3) var(--ease) 250ms; }
.mo .mcap .mk { grid-column: 1; font-size: 10px; line-height: 14px; }
.mo .mcap b { grid-column: 1; font: 500 15px/20px var(--sans); letter-spacing: -0.015em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mo .mcap .go { grid-column: 2; grid-row: 1 / span 2; width: 32px; height: 32px; border-radius: var(--r2); display: grid; place-items: center; background: var(--ink); transition: background-color var(--t2) var(--ease), transform var(--t1) var(--ease); }
.mo .mcap .go svg { width: 14px; height: 14px; fill: #fff; }
.mo:not(.open):hover .mcap .go { background: #333; transition-duration: 0s, var(--t1); }
.mo:not(.open):active .mcap .go { transform: scale(.96); }
.mgrid.snap, .mgrid.snap .mo, .mgrid.snap .mo .mstage, .mgrid.snap .mo .min, .mgrid.snap .mo .mcap, .mgrid.snap .mo .mstill, .mgrid.snap .tchart .tb i { transition: none !important; }

/* ------------------------------------------------------------------ 06 the way into the deep dive: a dark panel, white guides */
.advband { --band-pt: var(--s8); padding-top: var(--band-pt); }
.ddbar { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; overflow: hidden; border-radius: var(--r3); background: var(--d-bg); color: #fff; text-decoration: none;
  transition: background-color var(--t3) var(--ease); }
.ddbar:hover { background: #1A1A1A; transition-duration: 0s; }
.ddbar:focus-visible { outline-offset: 3px; border-radius: var(--r3); }
.ddbar .tx { display: contents; }
.ddbar .label { grid-column: 1 / -1; grid-row: 1; margin: 0; padding: 0 var(--s4); border-bottom-color: var(--d-line); color: var(--d-quiet); }
.ddbar .label .no { color: #fff; }
.ddbar .h { grid-column: 1; grid-row: 2; padding: var(--s8) var(--s4); font: 500 clamp(28px, 2.9vw, 40px)/1.1 var(--sans); letter-spacing: -0.04em; color: #fff; text-wrap: balance; }
.ddbar .arr { grid-column: 2; grid-row: 2; margin-right: var(--s4); width: 48px; height: 48px; border-radius: var(--r2); background: #fff; display: grid; place-items: center; transition: transform var(--t1) var(--ease); }
.ddbar .arr svg { width: 18px; height: 18px; fill: none; stroke: var(--ink); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--t2) var(--ease); }
.ddbar:hover .arr svg { transform: translateX(2px); }
.ddbar:active .arr { transform: scale(.96); }
.ddbar .chips { grid-column: 1 / -1; grid-row: 3; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--d-line); }
.ddbar .chips > span { position: relative; display: flex; align-items: baseline; gap: 12px; min-width: 0; padding: var(--s2) var(--s4); font: 400 12px/16px var(--mono); color: rgba(255, 255, 255, .8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ddbar .chips > span + span { border-left: 1px solid var(--d-line); }
.ddbar .chips i { color: var(--d-quiet); }
.ddbar .chips > span + span::before { content: ""; position: absolute; left: -5px; top: -5px; width: 9px; height: 9px; opacity: .8;
  background: linear-gradient(#fff, #fff) 50% 0 / 1px 100% no-repeat, linear-gradient(#fff, #fff) 0 50% / 100% 1px no-repeat; }
.ddbar .chips { overflow: visible; } .ddbar .chips > span { overflow: visible; }

/* ------------------------------------------------------------------ 07 what comes next */
.next .tease { margin: 0 0 var(--s6); }
.next .tease .eq { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.02em; padding-right: .04em; }
.ahead { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; border: 1px solid var(--line2); border-radius: var(--r3); background: var(--cell); }
.ahead .card { display: flex; flex-direction: column; min-width: 0; padding: 0 var(--s3) var(--s3); }
.ahead .card + .card { border-left: 1px solid var(--line); }
.ahead .card .t { display: flex; align-items: center; min-height: var(--strip); margin: 0 calc(-1 * var(--s3)) var(--s3); padding: 12px var(--s3); border-bottom: 1px solid var(--line); font: 500 14px/20px var(--sans); letter-spacing: -0.01em; color: var(--ink); }
.exfig .fz { margin-inline: auto; }
.ctarow { display: flex; align-items: center; justify-content: space-between; gap: var(--s2) var(--s3); flex-wrap: wrap; margin-top: var(--s6); }
a.cta.play { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px 0 16px; border-radius: var(--r2); background: var(--ink); color: #fff; text-decoration: none; white-space: nowrap;
  font: 500 14px/20px var(--sans); letter-spacing: -0.01em; transition: background-color var(--t2) var(--ease), transform var(--t1) var(--ease); }
a.cta.play:hover { background: #333; transition-duration: 0s, var(--t1); }
a.cta.play:active { transform: scale(.98); }
p.cta { margin: 0; font: 400 14px/20px var(--sans); color: var(--body); }
p.cta a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--line3); transition: text-decoration-color var(--t2) var(--ease); }
p.cta a:hover { text-decoration-color: var(--ink); transition-duration: 0s; }
.next { padding-bottom: 0; }
.signoff { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s3); margin: var(--s12) calc(-1 * var(--pad)) 0; padding: 0 var(--pad); border-bottom: 1px solid var(--line2); }
.signoff p { margin: 0 0 12px; font: 500 11px/16px var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--quiet); }
.cast { position: relative; display: flex; gap: var(--s1); pointer-events: none; }
.cast .kid { position: relative; width: 26px; aspect-ratio: 172 / 217; }
.cast .kid img { position: absolute; left: 50%; bottom: 0; height: 100%; width: auto; max-width: none; transform: translateX(-50%); }
.cast .kid img:not(.on) { visibility: hidden; }
main::after { content: ""; display: block; height: var(--s8); }

/* ==================================================================== the deep dive */
:scope { min-height: 100vh; min-height: 100svh; }
.thero { padding-top: var(--s3); padding-bottom: var(--s6); }
.back { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font: 500 13px/20px var(--sans); color: var(--ink); }
.back svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--t2) var(--ease); }
.back:hover svg { transform: translateX(-2px); }
/* 12 Nov (Jack): less empty space between the way back and the title */
.thero .tback { margin: 0 0 var(--s6); height: 28px; padding: 0 10px 0 8px; border: 1px solid var(--line2); border-radius: var(--r-chip); background: var(--cell); font-size: 12px; transition: border-color var(--t2) var(--ease); }
.thero .tback:hover { border-color: var(--ink); transition-duration: 0s; }
.thero h1 { margin: 0; font: 500 clamp(34px, 4.3vw, 56px)/1.05 var(--sans); letter-spacing: -0.045em; color: var(--ink); text-wrap: balance; }
:scope:not([hidden]) .thero > * { animation: r-arrive var(--t3) var(--ease) both; } :scope:not([hidden]) .thero > h1 { animation-delay: 60ms; }
/* the chapter bar: a hairline row of mono labels, a 1 px line that fills as you read */
.tpath { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; margin-bottom: var(--s8); border-top: 1px solid var(--line2); border-bottom: 1px solid var(--line2); }
.tpath::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--bg); }
.tpin { display: flex; align-items: stretch; height: var(--strip); }
.tpath .tpback { flex: none; align-self: center; display: grid; place-items: center; padding: 0; gap: 0; width: 0; height: 28px; margin-right: 0; border: 0 solid var(--line2); border-radius: var(--r-chip); overflow: hidden; color: var(--ink); background: var(--cell);
  opacity: 0; pointer-events: none; transition: width var(--t2) var(--ease), margin var(--t2) var(--ease), opacity var(--t2) var(--ease), border-color var(--t2) var(--ease); }
.tpath.stuck .tpback { width: 28px; margin-right: var(--s2); border-width: 1px; opacity: 1; pointer-events: auto; }
.tpath .tpback:hover { border-color: var(--ink); }
.tpath ol { flex: 1; min-width: 0; display: flex; gap: var(--s4); margin: 0; padding: 0; list-style: none; }
.tpath li { position: relative; flex: 0 0 auto; min-width: 0; display: flex; align-items: center; }
.tpath li.x { margin-left: auto; }
.tpath li button { appearance: none; border: 0; background: none; padding: 0; height: 100%; cursor: pointer; display: flex; align-items: center; gap: 10px; min-width: 0; text-align: left;
  font: 500 11px/16px var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--quiet); transition: color var(--t2) var(--ease); }
.tpath li button i { color: inherit; }
.tpath li button span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tpath li button:hover { color: var(--ink); transition-duration: 0s; }
.tpath li button:focus-visible { outline-offset: -2px; }
.tpath li b { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; display: block; overflow: hidden; }
.tpath li b u { display: block; height: 100%; background: var(--ink); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.tpath li.done button { color: var(--body); }
.tpath li.on button { color: var(--ink); }
.tpath li.x { padding-left: var(--s3); border-left: 1px solid var(--line2); }
.tpath li.x b { left: var(--s3); }
.tpath li.x button i svg { width: 9px; height: 9px; fill: currentColor; display: block; }
:scope .tsec { padding-bottom: var(--s12); }
:scope .tsec.two { padding-bottom: 0; }
:scope .xsec .label .no::before { content: "+"; margin-right: 1ch; }
:scope .tsec.cont { padding-top: 0; }
.tsec .one { margin: 0; font: 400 16px/1.6 var(--sans); color: var(--text); max-width: 34em; }
.tsec > h2 { margin-bottom: var(--s6); }
.tsec .stage.cell { padding: var(--s3); }
/* the seats */
.seats .stage.cell { padding: var(--s4) var(--s3) var(--s3); }
/* the benchmark: the formula and the score bar in a cell that stays beside the words */
.two.grid2 > .single > .cell { padding: var(--s4) var(--s3) var(--s3); }
.formula { margin: 0 0 var(--s4); color: var(--ink); }
.formula svg { display: block; width: 340px; max-width: 100%; height: auto; margin: 0 auto; }
.formula .ta { color: var(--quiet); } .formula .tb { color: var(--ink); }
.score { font-family: var(--mono); color: var(--ink); margin: 0; }
.score .labels { display: flex; justify-content: space-between; font: 500 11px/16px var(--mono); letter-spacing: .04em; text-transform: uppercase; margin-bottom: 8px; }
.score .labels .a { color: var(--quiet); } .score .labels .b { color: var(--ink); }
.score .split { display: flex; gap: 2px; height: 8px; }
.score .split i { display: block; height: 100%; }
.score .split .sa { background: repeating-linear-gradient(135deg, var(--quiet) 0 1px, transparent 1px 4px); border-radius: 2px 0 0 2px; }
.score .split .sb { background: var(--ink); border-radius: 0 2px 2px 0; }
.score .time { position: relative; height: 32px; margin-top: var(--s2); }
.score .time .ln { position: absolute; left: 0; right: 0; top: 4px; height: 1px; background: var(--line2); }
.score .time .fill { position: absolute; left: 0; top: 4px; height: 1px; background: var(--ink); width: 0; }
.score .time .dot { position: absolute; top: 0; width: 1px; height: 9px; margin-left: -.5px; background: var(--hot); left: 0; }
.score .time span { position: absolute; top: 16px; transform: translateX(-100%); font: 400 10px/14px var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--quiet); white-space: nowrap; transition: color var(--t2) var(--ease); }
.score .time span.cur { color: var(--ink); }
.score .cap { margin: var(--s2) calc(-1 * var(--s3)) calc(-1 * var(--s3)); padding: 12px var(--s2); border-top: 1px solid var(--line); font: 400 13px/20px var(--sans); color: var(--body); min-height: 45px; }
/* the matrix: square cells, 3 px radius, 2 px gaps; a crosshair and a read-out on hover */
#v-matrix { border: 1px solid var(--line2); border-radius: var(--r3); background: var(--cell); padding: var(--s4) var(--s3) 0; }
.mxwrap { position: relative; max-width: 760px; margin: 0 auto; }
.mx { display: grid; gap: 2px; font-family: var(--mono); position: relative; }
.mx .h { font: 400 10px/1.2 var(--mono); letter-spacing: 0; color: var(--body); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; padding-bottom: 8px; min-width: 0; transition: color var(--t2) var(--ease); }
.mx .h .nm { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }
.mx .h .ic { display: flex; gap: 2px; justify-content: center; }
.mx .rh { flex-direction: row; justify-content: flex-end; align-items: center; gap: 8px; padding: 0 10px 0 0; }
.mx .rh .nm { writing-mode: horizontal-tb; transform: none; white-space: nowrap; text-align: right; }
.mx .rh .ic { width: 28px; flex: none; justify-content: flex-start; }
.mx .h.ppl { color: var(--ink); }
.mx .h svg { width: 12px; height: 12px; flex: none; }
.mx .h.hot { color: var(--ink); transition-duration: 0s; }
.mx .cell { aspect-ratio: 1 / 1; border-radius: 3px; background: var(--well2); border: 0; padding: 0; cursor: crosshair; position: relative; opacity: 0; outline: none;
  transition: background-color var(--t2) var(--ease), opacity var(--t2) var(--ease); }
.mx .cell.in { opacity: 1; }
.mx .cell.pp::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1px dashed rgba(23, 23, 23, .45); pointer-events: none; }
.mx.xon .cell.in:not(.xr):not(.xc) { opacity: .35; }
.mx .cell.xr, .mx .cell.xc { transition-duration: 0s; }
.mx .cell.hot { box-shadow: 0 0 0 1px var(--cell), 0 0 0 2px var(--ink); z-index: 3; }
.mx .cell:focus-visible { box-shadow: 0 0 0 1px var(--cell), 0 0 0 2px var(--ink); z-index: 3; }
.mx .xh, .mx .xv { position: absolute; z-index: 2; background: var(--ink); pointer-events: none; opacity: 0; transition: opacity var(--t2) var(--ease); }
.mx .xh { height: 1px; left: 0; right: 0; } .mx .xv { width: 1px; top: 0; bottom: 0; }
.mx.xon .xh, .mx.xon .xv { opacity: 1; transition-duration: 0s; }
.mx .corner { font: 500 10px/1.5 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--quiet); align-self: end; padding-bottom: 8px; white-space: nowrap; }
.mx .corner .c { color: var(--crew); } .mx .corner .o { color: var(--imp); }
.mxkey { display: flex; align-items: center; gap: 12px; justify-content: center; min-height: 40px; margin-top: var(--s3); font: 500 10px/14px var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--quiet); }
.mxkey span { white-space: nowrap; }
.mxkey i { display: block; flex: none; width: 120px; height: 4px; border-radius: 2px; }
/* the picker */
:scope .tsec.pick { margin-top: calc(-1 * var(--s4)); }
.pick .subh { margin-bottom: var(--s3); }
.presets { position: relative; display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 var(--s3); }
.presets button { gap: 6px; color: var(--ink); padding: 0 10px; }
.presets button i { font: 400 10px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--quiet); }
.presets button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.presets button[aria-pressed="true"] i { color: rgba(255, 255, 255, .6); }
.presets button.swapped { flex-direction: row-reverse; }
.presets button:focus:not(:focus-visible) { outline: none; }
.swaptip, .dragtip { position: absolute; z-index: 6; pointer-events: none; white-space: nowrap; height: 24px; padding: 0 8px; display: grid; place-items: center; border-radius: var(--r1); background: var(--ink); color: #fff;
  font: 500 10px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; opacity: 0; transition: opacity var(--t2) var(--ease), transform var(--t2) var(--ease); }
.swaptip { left: 0; top: 0; translate: -50% 0; transform: translateY(-3px); }
.dragtip { transform: translateY(3px); }
.swaptip.on, .dragtip.on { opacity: 1; transform: none; }
.pkgrid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: stretch; border: 1px solid var(--line2); border-radius: var(--r3); background: var(--cell); }
.pkgrid .shelf { display: flex; flex-direction: column; padding: calc(var(--s3) + 32px) var(--s3) var(--s3); border-right: 1px solid var(--line); min-width: 0; }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.pcard { justify-content: center; gap: 6px; padding: 0 8px 0 6px; color: var(--ink); cursor: grab; touch-action: manipulation; user-select: none; -webkit-user-select: none; min-width: 0; }
.pcard:hover { transform: translateY(-1px); box-shadow: var(--shadow); transition-duration: 0s, 0s, 0s, var(--t1), 0s; }
.pcard:active { cursor: grabbing; transform: translateY(-2px); box-shadow: var(--shadow); }
.pcard svg, .seat svg { pointer-events: none; }
.pcard .lg { flex: none; width: 14px; height: 14px; display: grid; place-items: center; color: var(--ink); }
.pcard .lg svg { width: 14px; height: 14px; }
.pcard .nm { font: inherit; white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pcard.sel { border-color: var(--ink); background: var(--ink); color: #fff; }
.pcard.sel .lg { color: #fff; }
.pcard.person { border-style: dashed; border-color: var(--line3); }
.pcard.person.sel { border-style: solid; border-color: var(--ink); }
.pkbar { display: flex; gap: 4px; flex-wrap: wrap; margin-top: var(--s2); padding-top: var(--s2); border-top: 1px solid var(--line); }
.pkbar button { color: var(--ink); padding: 0 10px; }
.pkbar button:disabled { color: var(--fig-faint); cursor: default; }
.pkgrid .stage { display: flex; flex-direction: column; padding: var(--s3); min-width: 0; }
.felt { position: relative; aspect-ratio: 2.45 / 1; width: 100%; margin: var(--s6) 0; }
.felt .oval { position: absolute; inset: 30% 14%; border: 1px solid var(--line2); border-radius: var(--r3); background: var(--well); display: grid; place-items: center; text-align: center;
  font: 500 10px/14px var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--quiet); }
.felt .oval .vs { display: flex; gap: 8px; align-items: center; }
.felt .oval .vs .c { color: var(--crew); } .felt .oval .vs .o { color: var(--imp); }
.seat { position: absolute; width: 40px; transform: translate(-50%, -50%); appearance: none; border: 0; background: none; padding: 0; cursor: pointer; display: grid; justify-items: center; gap: 8px; }
.seat .ring { width: 40px; height: 40px; border-radius: 50%; background: var(--cell); display: grid; place-items: center; color: var(--ink); box-shadow: 0 0 0 1px var(--crew); transition: transform var(--t2) var(--ease), box-shadow var(--t2) var(--ease); }
.seat.imp .ring { box-shadow: 0 0 0 1px var(--imp); }
.seat .ring svg { width: 18px; height: 18px; }
.seat .ring.ref { background: var(--well2); color: var(--body); }
.seat .ring.ppl { color: var(--ink); }
.seat .nm { font: 400 10px/12px var(--mono); color: var(--body); white-space: nowrap; max-width: 76px; overflow: hidden; text-overflow: ellipsis; }
.seat:hover .ring { box-shadow: 0 0 0 2px var(--crew); transition-duration: 0s; } .seat.imp:hover .ring { box-shadow: 0 0 0 2px var(--imp); }
.felt.dragging .seat .ring { outline: 1px dashed var(--ink); outline-offset: 3px; }
.seat.drop .ring { outline: 1px solid var(--ink) !important; outline-offset: 3px; }
.seat.pop .ring { animation: r-pop var(--t2) var(--ease); }
.seat:focus-visible { outline: none; } .seat:focus-visible .ring { outline: 2px solid var(--ink); outline-offset: 3px; }
.ghost { position: fixed; z-index: 60; pointer-events: none; display: grid; place-items: center; width: 32px; height: 32px; transform: translate(-50%, -50%) translateY(-2px); background: var(--cell); border: 1px solid var(--ink); border-radius: var(--r-chip);
  box-shadow: var(--shadow); color: var(--ink); }
.ghost svg { width: 16px; height: 16px; }
.odds { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: var(--s3); margin-top: auto; padding-top: var(--s3); border-top: 1px solid var(--line); }
.odds .side { display: grid; gap: 4px; }
.odds .side.o { text-align: right; }
.odds .num { font: 500 32px/1 var(--sans); letter-spacing: -0.05em; font-variant-numeric: tabular-nums; min-width: 2.6ch; }
.odds .c .num { color: var(--crew); } .odds .o .num { color: var(--imp); }
.odds .lb { font: 500 10px/14px var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--quiet); white-space: nowrap; }
.odds .split { display: flex; gap: 2px; height: 8px; }
.odds .split i { display: block; height: 100%; min-width: 0; flex: var(--v, 0) 1 0%; transition: flex-grow 600ms var(--ease); }
.odds .split .c { background: var(--crew); border-radius: 2px 0 0 2px; } .odds .split .o { background: var(--imp); border-radius: 0 2px 2px 0; }
.pick .reset { align-self: center; appearance: none; border: 0; background: none; cursor: pointer; margin-top: var(--s2); padding: 4px 8px; font: 500 10px/14px var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--quiet);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--line3); transition: color var(--t2) var(--ease); }
.pick .reset:hover { color: var(--ink); transition-duration: 0s; }
.nudge { position: absolute; z-index: 5; pointer-events: none; left: 0; top: 0; opacity: 0; }
.nudge .chip { position: absolute; left: -16px; top: -16px; width: 32px; height: 32px; border-radius: var(--r-chip); background: var(--cell); border: 1px solid var(--ink); display: grid; place-items: center; box-shadow: var(--shadow); }
.nudge .chip svg { width: 16px; height: 16px; }
.nudge .hand { position: absolute; left: 6px; top: 8px; width: 22px; height: 22px; }
/* the full game: the film, and the followed seat's mind as a sheet beside it */
.fgrid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); column-gap: var(--s3); align-items: start; }
.fgrid .stage { order: -1; }
.film { cursor: pointer; }
.film .pp { position: absolute; z-index: 3; left: 50%; top: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; opacity: 0; transform: scale(.9); transition: opacity var(--t2) var(--ease), transform var(--t2) var(--ease); pointer-events: none; }
.film .pp.on { opacity: 1; transform: none; }
.film .pp svg { grid-area: 1 / 1; width: 16px; height: 16px; fill: #fff; transition: opacity var(--t2) var(--ease), filter var(--t2) var(--ease), transform var(--t2) var(--ease); }
.film .pp[data-k="play"] svg.i-pause, .film .pp[data-k="pause"] svg.i-play { opacity: 0; filter: blur(2px); transform: scale(.7); }
.film .clock { position: absolute; left: 12px; right: 12px; bottom: 0; height: 24px; cursor: pointer; touch-action: none; z-index: 2; outline: none; }
.film .clock .tr { position: absolute; left: 0; right: 0; bottom: 10px; height: 2px; background: rgba(255, 255, 255, .24); transition: height var(--t1) var(--ease), bottom var(--t1) var(--ease); }
.film .clock i { display: block; height: 100%; width: 100%; background: #fff; transform-origin: 0 50%; transform: scaleX(0); }
.film .clock .dot { position: absolute; left: var(--p, 0%); bottom: 11px; width: 1px; height: 13px; margin: 0 0 -6.5px -.5px; background: var(--hot); transform: scaleY(0); transition: transform var(--t1) var(--ease); }
@media (hover: hover) { .film .clock:hover .tr { height: 4px; bottom: 9px; } .film .clock:hover .dot { transform: none; } }
.film .clock.drag .tr, .film .clock:focus-visible .tr { height: 4px; bottom: 9px; }
.film .clock.drag .dot, .film .clock:focus-visible .dot { transform: none; }
.film .ld { position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .25); border-top-color: #fff; opacity: 0;
  transition: opacity var(--t2) var(--ease); pointer-events: none; animation: r-ld-spin .8s linear infinite paused; }
.film.loading .ld { opacity: 1; transition-delay: 150ms; animation-play-state: running; }
.mind { font-family: var(--sans); color: var(--ink); display: grid; border: 1px solid var(--line2); border-radius: var(--r3); background: var(--cell); overflow: hidden; }
.mind .who { display: flex; align-items: center; gap: 8px; min-height: var(--strip); padding: 0 var(--s2); border-bottom: 1px solid var(--line); font: 400 11px/16px var(--mono); color: var(--quiet); min-width: 0; white-space: nowrap; }
.mind .who b { font: 500 14px/20px var(--sans); letter-spacing: -0.01em; color: var(--ink); }
.mind .who .role { height: 20px; padding: 0 6px; display: inline-grid; place-items: center; border-radius: var(--r1); border: 1px solid var(--crew); font: 500 10px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--crew); }
.mind .who .role.opp { color: var(--imp); border-color: var(--imp); }
.mind .who .role:empty { display: none; }
.mind .who .t { margin-left: auto; font: 500 11px/16px var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.mind .two { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }
.mind .box { min-width: 0; padding: var(--s2); overflow: hidden; border-bottom: 1px solid var(--line); transition: height var(--t3) var(--ease); }
.mind .box.meta { border-bottom: 0; }
.mind h4 { margin: 0 0 8px; font: 500 11px/16px var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--quiet); }
.mind .body { font: 400 14px/1.5 var(--sans); color: var(--text); transition: opacity var(--t2) var(--ease), filter var(--t2) var(--ease); }
.mind .body.fade { opacity: 0; filter: blur(2px); }
.mind .body .wait, .mind .body .gap { color: var(--quiet); }
.mind .body b { font-weight: 500; }
.mind .body mark { color: var(--ink); padding: 1px 3px; margin: 0 -1px; -webkit-box-decoration-break: clone; box-decoration-break: clone; background: linear-gradient(var(--yellow), var(--yellow)) no-repeat 0 50% / 100% 100%;
  animation: r-sweep 600ms var(--ease) 300ms both; }
.mind ol, .mind ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.mind ol li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 4px; color: var(--body); }
.mind ol li.run { color: var(--ink); }
.mind ol li .mk { font: 400 11px/21px var(--mono); color: var(--quiet); cursor: default; }
.mind ol li.run .mk { color: var(--hot); }
.mind .if { color: var(--quiet); }
.mind .ln .at { display: block; font: 400 10px/14px var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--quiet); }
.mind .vote { margin-top: 4px; font-weight: 500; color: var(--ink); }
.mind .meta li { padding-left: 14px; position: relative; }
.mind .meta li::before { content: ""; position: absolute; left: 0; top: .72em; width: 6px; height: 1px; background: var(--quiet); }
.mind li.in { animation: r-rise var(--t3) var(--ease) both; }
.tend { display: flex; justify-content: flex-start; padding-top: var(--s2); padding-bottom: var(--s12); }
.back.home { height: 40px; padding: 0 16px 0 12px; gap: 10px; border-radius: var(--r2); background: var(--ink); color: #fff; font: 500 14px/20px var(--sans); letter-spacing: -0.01em; transition: background-color var(--t2) var(--ease), transform var(--t1) var(--ease); }
.back.home:hover { background: #333; transition-duration: 0s, var(--t1); }
.back.home:active { transform: scale(.98); }
:scope .tfoot .tsec.full { padding-bottom: var(--s6); }

/* ------------------------------------------------------------------ narrower screens */
@media (max-width: 1100px) {
  :scope { --pad: 24px; }
  .two { --fig: 50%; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .pkgrid, .fgrid, .ahead { grid-template-columns: minmax(0, 1fr); row-gap: var(--s4); }
  /* one column: the cells stack, the inner guide goes */
  .two, :scope .tsec.two { padding-bottom: var(--s12); }
  .two .label { margin-bottom: var(--s8); }
  .two .scene, .two .gb, .scale > .holdin, .two.grid2 { display: block; }
  .two.grid2 > .scene, .scale .scene, .two.grid2 > .single { display: block; }
  .two .scene > .copy, .two .gtext, .two.grid2 > h2, .scale h2.big, .two.grid2 > .single > p { padding: 0; border-right: 0; }
  .two.grid2 > h2, .scale h2.big { margin-bottom: var(--s4); }
  .two.grid2 > .single > p { margin-bottom: var(--s2); }
  .two .c1::after { display: none; }
  .two .stk { position: static; }
  .two .scene > .stage, .two .gvid, .two.grid2 > .single > .cell { margin: var(--s4) 0 0; position: static; }
  .two.grid2 > .single > .cell { margin-bottom: var(--s4); }
  .two.cont { padding-top: 0; margin-top: calc(-1 * var(--s6)); }
  .ten, .rules, .playcta { max-width: none; }
  .gtext h2 { margin-bottom: var(--s4); }
  .bgrid { grid-template-columns: minmax(0, 1fr); }
  .bgrid::before { display: none; }
  .labs.side { order: -1; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; padding: 10px var(--s2); border-bottom: 1px solid var(--line); scrollbar-width: none; }
  .labs.side::-webkit-scrollbar { display: none; }
  .labs.side button { width: auto; flex: none; }
  .labs.side button.fly { margin-top: 0; }
  .pkgrid .shelf { border-right: 0; border-bottom: 1px solid var(--line); }
  .ahead .card + .card { border-left: 0; border-top: 1px solid var(--line); }
  .fgrid .stage { order: -1; }
  .fgrid { row-gap: var(--s1); }
  .ddbar .chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ddbar .chips > span:nth-child(3) { border-left: 0; }
  .ddbar .chips > span:nth-child(n+3) { border-top: 1px solid var(--d-line); }
  .ddbar .chips > span:nth-child(3)::before { display: none; }
  .tpath ol { gap: var(--s2); }
  .tpath li.on { flex: 0 1 auto; }
  .tpath li:not(.on) button span { display: none; }
  .tpath li.x { padding-left: var(--s2); } .tpath li.x b { left: var(--s2); }
}
@media (pointer: coarse) {
  .labs button, .presets button, .pkbar button, .pcard { height: 36px; }
  .labs.views button { height: 34px; }
  .seg button { height: 38px; }
}
@media (max-width: 700px) {
  :scope { --pad: 16px; --gut: 0px; --strip: 44px; }
  .guides { border-inline: 0; }
  .sec::after, .band > .wrap::after { left: 10px; right: 10px; }
  .sec, .band, .two, :scope .tsec, :scope .tsec.two { padding-bottom: var(--s8); }
  .label, .kick, .sofar, .two .label { margin-bottom: var(--s6); }
  h2, .h2s { font-size: 28px; }
  .bench .bhead { margin-bottom: var(--s4); }
  .bench .fn, .growth .dek { font-size: 16px; }
  .bartop { padding: 8px 12px; }
  .labs.views { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .labs.views::-webkit-scrollbar { display: none; }
  .labs.views button { flex: none; padding: 0 10px; }
  .barbox { margin: var(--s2) 12px 12px; }
  .labs.side { padding: 10px 12px; }
  .stats { grid-template-columns: minmax(0, 1fr); margin-top: var(--s4); }
  .stat { padding: var(--s2); }
  .stat + .stat { border-left: 0; border-top: 1px solid var(--line); }
  .stat:not(.rec)::before { display: none; }
  .stat .v { margin-top: 12px; font-size: 40px; }
  .stat.rec .v { margin-top: var(--s2); }
  .stat .ico { top: 50%; margin-top: -22px; }
  .stat .l { margin-top: 8px; max-width: 16em; }
  /* the scenes: one column; a thought sits under its picture as a caption */
  .mo .min { left: 16px; top: 16px; gap: 12px; }
  .mo .hook { font-size: 16px; }
  .mo .mstage { background: transparent; overflow: visible; }
  .mo .mstage::before { bottom: auto; height: calc(var(--iw) * .75); }
  .mo:not(.open) .mstage { overflow: hidden; background: var(--d-bg); }
  .mo:not(.open) .mstage::before { height: auto; bottom: 0; }
  .mo .vz, .mo .dip, .mo .pend { bottom: auto; height: calc(var(--iw) * .75); border-radius: var(--r2); overflow: hidden; }
  .mo:not(.open) .vz, .mo:not(.open) .dip, .mo:not(.open) .pend { inset: 0; height: auto; border-radius: 0; }
  .mo .vz { background: var(--d-bg); }
  .mo .bub { z-index: 1; max-width: none; padding: 10px 12px; box-shadow: none; border-color: var(--line2); transform-origin: 50% 0; }
  .mo .bub .bt { font-size: 13px; line-height: 1.4; }
  .mo .bub.long .bt { font-size: 12.5px; }
  .mo .dot, .mo .bub .btail { display: none !important; }
  .mo .mprog { top: calc(var(--iw) * .75 - 2px); bottom: auto; }
  .mo .mnote { top: calc(var(--iw) * .75 - 38px); bottom: auto; }
  .mo .cutnote { top: calc(var(--iw) * .75 - 38px); bottom: auto; }
  .mo .mcap { --fc: 56px; }
  .tchart .tr { grid-template-columns: minmax(0, 8.4em) minmax(0, 1fr) 2em; gap: 12px; }
  .advband { --band-pt: var(--s6); }
  .ddbar { grid-template-columns: minmax(0, 1fr) auto; }
  .ddbar .label, .ddbar .chips > span { padding-inline: var(--s2); }
  .ddbar .h { padding: var(--s6) var(--s2); font-size: 28px; }
  .ddbar .arr { width: 40px; height: 40px; margin-right: var(--s2); }
  .ddbar .chips { grid-template-columns: minmax(0, 1fr); }
  .ddbar .chips > span { padding-block: 12px; }
  .ddbar .chips > span + span { border-left: 0; border-top: 1px solid var(--d-line); }
  .ddbar .chips > span + span::before { display: none; }
  .ahead .card { padding: 0 var(--s2) var(--s2); }
  .ahead .card .t { margin: 0 calc(-1 * var(--s2)) var(--s2); padding: 12px var(--s2); }
  .ctarow { margin-top: var(--s4); }
  .signoff { margin-top: var(--s8); flex-direction: column-reverse; align-items: flex-start; gap: var(--s3); }
  .signoff p { margin: 0; }
  .thero .tback { margin-bottom: var(--s4); }
  .tpath ol { gap: 12px; }
  .tsec > h2 { margin-bottom: var(--s4); }
  .tsec .stage.cell, .seats .stage.cell, .two.grid2 > .single > .cell { padding: var(--s2); }
  .score .cap { margin: var(--s2) calc(-1 * var(--s2)) calc(-1 * var(--s2)); padding: 12px var(--s2); }
  #v-matrix { padding: var(--s2) 12px 0; }
  .mx .h { font-size: 8.5px; line-height: 1.1; gap: 4px; }
  .mx .rh { gap: 5px; padding-right: 6px; }
  .mx .rh .nm { white-space: normal; text-wrap: balance; }
  .mx .rh .ic { width: 24px; }
  .mx .h:not(.rh) .ic { flex-direction: column; }
  .mx .corner { font-size: 8px; letter-spacing: .02em; }
  .mxkey { gap: 8px; font-size: 9px; }
  .mxkey span { white-space: normal; max-width: 10ch; } .mxkey span:first-child { text-align: right; }
  .mxkey i { width: 64px; }
  .pkgrid .shelf, .pkgrid .stage { padding: var(--s2); }
  .pkgrid .shelf { padding-top: calc(var(--s2) + 32px); }
  .felt { margin: var(--s4) 0; }
  .seat, .seat .ring { width: 32px; } .seat .ring { height: 32px; }
  .seat .ring svg { width: 15px; height: 15px; }
  .seat .nm { font-size: 9px; max-width: 46px; }
  .odds { column-gap: 12px; }
  .odds .num { font-size: 26px; }
  .mind .who { flex-wrap: wrap; row-gap: 0; padding-block: 8px; }
  .tend { padding-bottom: var(--s8); }
}
@media (prefers-reduced-motion: reduce) {
  [data-in] { opacity: 1; transform: none; filter: none; }
  *, *::before, *::after { transition-duration: 0s !important; transition-delay: 0s !important; }
  .cue i::after { animation: none; top: 30%; }
  :scope .thero > *, .viz .sitter, .mo .pend i, .mind li.in, .mind .body mark, .mo .mtrait.in, .mo .mnote.glint::after, .mo .mstage.spin .mreplay svg, .seat.pop .ring { animation: none; }
  .sec::before, .band::before { transform: none; } .sec::after, .band > .wrap::after { opacity: 1; }
  .hl { background-size: 100% 100%; } .ann.lead, .ann[data-ann~="underline"] { background-size: 100% 1px; }
  .ann .frame rect { stroke-dashoffset: 0; } .ann .frame i { opacity: 1; } .axd { transform: none; }
}

/* in this page the guides live inside the deep dive, under everything it draws */
.guides { z-index: -1; }
/* the ghost of a dragged player is drawn here too */

/* ---- 12 Nov (Jack): more compact ----
   the benchmark: the formula and the score bar sit in the text again, across the column, as they did before */
#t-bench .single { max-width: none; }
#t-bench .single > .cell { margin: var(--s3) 0 var(--s4); padding: var(--s3); }
@media (max-width: 700px) { #t-bench .single > .cell { padding: var(--s2); } }
#t-bench .formula { margin-bottom: var(--s3); }
#t-bench .score .cap { min-height: 0; }
/* the matrix beside its headline, in the two cells every other chapter uses, rather than small in a cell as wide as the page */
@media (min-width: 901px) {
  #t-perf.two.grid2 > h2 { grid-row: 2 / span 2; padding-bottom: var(--s12); }
  #t-perf.two.grid2 > #v-matrix { grid-column: 2; grid-row: 2 / span 2; align-self: start; margin: var(--s8) 0 var(--s12) var(--s4); padding: var(--s3) var(--s2) 0; }
}
/* the full game: the film and its caption row in one cell, and the mind beside it ends on the same line */
.fgrid { align-items: stretch; }
.fgrid > .copy { display: flex; flex-direction: column; }
.fgrid .mind { flex: 1 1 auto; align-content: start; }
.fgrid .stage { display: flex; flex-direction: column; border: 1px solid var(--line2); border-radius: var(--r3); background: var(--cell); overflow: hidden; }
.fgrid .stage .film { border-radius: 0; }
.fgrid .stage .film::after { display: none; }
.fgrid .stage p.tag { margin-top: auto; padding: 0 var(--s2); border-top: 1px solid var(--line); }
.mind .who { min-height: 40px; }
.mind .box { padding: 12px var(--s2); }
.mind h4 { margin-bottom: 6px; }
}
@keyframes r-arrive { from { opacity: 0; transform: translateY(8px); filter: blur(4px); } }
@keyframes r-pop { 0% { transform: scale(.9); opacity: .4; } 100% { transform: scale(1); opacity: 1; } }
@keyframes r-ld-spin { to { transform: rotate(1turn); } }
@keyframes r-sweep { from { background-size: 0% 100%; } to { background-size: 100% 100%; } }
@keyframes r-rise { from { opacity: 0; transform: translateY(4px); filter: blur(2px); } }
body:has(> #technical:not([hidden])) { background: #FCFCFC; }
/* the way into the deep dive (12 Nov, Jack: the button looked like a template; it now opens onto the deep dive's own design):
   the rauno version's dark panel, a mono strip on top, the title, a square arrow, the four steps along the foot */
@scope (.ddbar) {
:scope { --ink: #171717; --line: #E8E8E8; --line2: #E2E2E2; --quiet: #8F8F8F; --d-bg: #111111; --d-line: rgba(255, 255, 255, .1); --d-quiet: rgba(255, 255, 255, .5);
  --sans: "Geist", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --mono: "Geist Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s6: 48px; --s8: 64px; --r1: 4px; --r2: 8px; --r3: 12px; --strip: 48px; --pad: 32px;
  --ease: cubic-bezier(.2, .8, .2, 1); --t1: 150ms; --t2: 250ms; --t3: 400ms;
  font-family: var(--sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
*, *::before, *::after { box-sizing: border-box; }
i { font-style: normal; }
.label { display: flex; align-items: center; gap: var(--s2); height: var(--strip); margin: 0 calc(-1 * var(--pad)) var(--s8); padding: 0 var(--pad);
  border-bottom: 1px solid var(--line); font: 500 11px/16px var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--quiet); white-space: nowrap; }
/* ------------------------------------------------------------------ 06 the way into the deep dive: a dark panel, white guides */
:scope { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; overflow: hidden; border-radius: var(--r3); background: var(--d-bg); color: #fff; text-decoration: none;
  transition: background-color var(--t3) var(--ease); }
:scope:hover { background: #1A1A1A; transition-duration: 0s; }
:scope:focus-visible { outline-offset: 3px; border-radius: var(--r3); }
:scope .tx { display: contents; }
:scope .label { grid-column: 1 / -1; grid-row: 1; margin: 0; padding: 0 var(--s4); border-bottom-color: var(--d-line); color: var(--d-quiet); }
:scope .label .no { color: #fff; }
/* 12 Nov (Jack): a little more compact */
:scope .h { grid-column: 1; grid-row: 2; padding: var(--s4) var(--s4); font: 500 clamp(28px, 2.9vw, 40px)/1.1 var(--sans); letter-spacing: -0.04em; color: #fff; text-wrap: balance; }
:scope .arr { grid-column: 2; grid-row: 2; margin-right: var(--s4); width: 48px; height: 48px; border-radius: var(--r2); background: #fff; display: grid; place-items: center; transition: transform var(--t1) var(--ease); }
:scope .arr svg { width: 18px; height: 18px; fill: none; stroke: var(--ink); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--t2) var(--ease); }
:scope:hover .arr svg { transform: translateX(2px); }
:scope:active .arr { transform: scale(.96); }
:scope .chips { grid-column: 1 / -1; grid-row: 3; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--d-line); }
:scope .chips > span { position: relative; display: flex; align-items: baseline; gap: 12px; min-width: 0; padding: var(--s2) var(--s4); font: 400 12px/16px var(--mono); color: rgba(255, 255, 255, .8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:scope .chips > span + span { border-left: 1px solid var(--d-line); }
:scope .chips i { color: var(--d-quiet); }
:scope .chips > span + span::before { content: ""; position: absolute; left: -5px; top: -5px; width: 9px; height: 9px; opacity: .8;
  background: linear-gradient(#fff, #fff) 50% 0 / 1px 100% no-repeat, linear-gradient(#fff, #fff) 0 50% / 100% 1px no-repeat; }
:scope .chips { overflow: visible; } :scope .chips > span { overflow: visible; }
@media (max-width: 900px) {
  :scope .chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :scope .chips > span:nth-child(3) { border-left: 0; }
  :scope .chips > span:nth-child(n+3) { border-top: 1px solid var(--d-line); }
  :scope .chips > span:nth-child(3)::before { display: none; }
}
@media (max-width: 700px) {
  :scope { --pad: 16px; --strip: 44px; }
  :scope { grid-template-columns: minmax(0, 1fr) auto; }
  :scope .label, :scope .chips > span { padding-inline: var(--s2); }
  :scope .h { padding: var(--s3) var(--s2); font-size: 28px; }
  :scope .arr { width: 40px; height: 40px; margin-right: var(--s2); }
  :scope .chips { grid-template-columns: minmax(0, 1fr); }
  :scope .chips > span { padding-block: 12px; }
  :scope .chips > span + span { border-left: 0; border-top: 1px solid var(--d-line); }
  :scope .chips > span + span::before { display: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0s !important; } }
}