/* band.css (loaded last; owned by one pass)
   1. What makes this different (#different), a paper band: a three-beat explainer.
      01 Built, not painted: a video model paints a picture out of static; a coding assistant
         types a short recipe and each line snaps one real file onto the frame, then Render.
      02 Many rounds, not one prompt: a one-shot post beside the real strip of versions and notes.
      03 Even this guide: my records flow into the rebuilt history (the replay's own data).
   2. One tip (#one-tip), a dark starfield band: the setup (Opus 5.5, Medium) and the odds.
   Motion lives in band.js: in view only, paused offscreen. Every part's resting state here is
   its finished state, so reduced motion (and no script) simply shows the finished pictures.
   Beat 01 animates only under .is-anim, which band.js sets. */

/* =========================================================
   1. what makes this different
   ========================================================= */
main > section.df { padding: clamp(52px, 4.6vw, 66px) 0 clamp(46px, 3.8vw, 54px); background: var(--paper); }
.df-head { margin-bottom: clamp(22px, 2.2vw, 30px); }
.df-k { margin: 0 0 14px; font: 500 var(--t-label)/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--signal-ink); }
.df-head h2 { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(27px, 2.75vw, 40px); line-height: 1.12; letter-spacing: -0.022em; color: var(--ink); }
.df-head h2 > span { display: block; text-wrap: balance; }
.df-head h2 > span + span { color: var(--signal-ink); }
@media (min-width: 1000px) { .df-head h2 > span { white-space: nowrap; } }

/* a beat: its head (title | lede) on the same two columns as its pictures */
.bx-beat + .bx-beat { margin-top: clamp(32px, 3vw, 40px); }
.bx { --bx-gap: clamp(28px, 3.4vw, 48px); }
.bx-bh, .bx-a, .bx-b, .bx-c { display: grid; grid-template-columns: minmax(0, 38fr) minmax(0, 62fr); column-gap: var(--bx-gap); }
.bx-bh { align-items: baseline; row-gap: 8px; margin-bottom: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.bx-bh h3 { display: flex; align-items: baseline; gap: 12px; margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(22px, 1.75vw, 25px); line-height: 1.15; letter-spacing: -0.018em; color: var(--ink); white-space: nowrap; }
.bx-bh h3 i { flex: none; font: 500 var(--t-label)/1 var(--mono); font-style: normal; letter-spacing: .08em; color: var(--signal-ink); translate: 0 -2px; }
.bx-bh p { margin: 0; max-width: 64ch; font-size: 16.5px; line-height: 1.55; color: var(--text); text-wrap: pretty; }

/* a labelled picture */
.bx-way { margin: 0; min-width: 0; }
.bx-wl { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; margin: 0 0 11px; font-size: 14.5px; line-height: 1.3; }
.bx-wl b { font-weight: 650; color: var(--ink); }
.bx-wl span { color: var(--soft); }
.bx-cap { margin: 11px 0 0; font-size: 14.5px; line-height: 1.45; color: var(--soft); text-wrap: balance; }

/* ---------- 01 the video model: static resolves into an invented picture ---------- */
.bx-canvas { position: relative; aspect-ratio: 16 / 9; overflow: hidden; isolation: isolate; border-radius: var(--r-s); background: oklch(0.55 0.02 60);
  box-shadow: 0 0 0 1px oklch(0.185 0.01 70 / .08), 0 18px 34px -24px oklch(0.185 0.01 70 / .55); }
.bx-l { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.bx-l1, .bx-l2, .bx-noise { opacity: 0; }
.bx-noise { overflow: hidden; }
/* static: fractal noise, contrast pushed so it reads as a screen of coloured grain */
.bx-noise i { position: absolute; inset: -14%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='101'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='2.3 0 0 0 -.62  0 2.3 0 0 -.62  0 0 2.3 0 -.62  0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 180px 101px; }
.bx-chip { position: absolute; left: 10px; bottom: 10px; z-index: 2; display: inline-grid; grid-template-columns: auto; align-items: center; row-gap: 5px; padding: 6px 9px 7px; border-radius: 7px; background: oklch(0.165 0.008 70 / .74); color: var(--on-dark); font: 500 10.5px/1 var(--mono); letter-spacing: .06em; }
.bx-c0, .bx-c1 { grid-area: 1 / 1; transition: opacity .3s; }
.bx-c0 { opacity: 0; }
.bx-chip > i { display: block; height: 2px; border-radius: 1px; background: oklch(1 0 0 / .2); overflow: hidden; }
.bx-chip > i b { display: block; height: 100%; background: var(--signal); transform-origin: 0 50%; transform: scaleX(var(--p, 1)); transition: transform .6s linear; }

/* ---------- 01 the coding assistant: a recipe, a frame, Render ---------- */
.bx-bench { display: grid; grid-template-columns: minmax(0, 43fr) minmax(0, 57fr); gap: 14px; align-items: stretch; }
/* recipe -> frame: a small arrow where the two meet */
.bx-recipe::after { content: ""; position: absolute; z-index: 3; right: -20px; top: 50%; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%; box-shadow: 0 0 0 3px var(--paper);
  background: var(--signal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23231f1a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12h11M13 7.5 17.5 12 13 16.5'/%3E%3C/svg%3E") center / 16px no-repeat; }
.bx-recipe { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 14px 16px 14px 12px; border-radius: var(--r-s); background: var(--ink); color: var(--on-dark-2); box-shadow: 0 18px 34px -24px oklch(0.185 0.01 70 / .55); }
.bx-rh { margin: 0 0 13px 4px; font: 500 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-soft); white-space: nowrap; }
.bx-rh span { margin-left: 6px; letter-spacing: .02em; text-transform: none; color: var(--dark-mute); }
.bx-code { list-style: none; margin: 0; padding: 0; counter-reset: bxl; display: grid; gap: 11px; }
.bx-ln { counter-increment: bxl; display: grid; grid-template-columns: 14px auto; align-items: baseline; gap: 9px; min-width: 0; font: 400 clamp(12px, .95vw, 13.5px)/1.5 var(--mono); white-space: nowrap; }
.bx-ln::before { content: counter(bxl); text-align: right; color: var(--dark-mute); transition: color .25s; }
.bx-ln.is-hot::before { color: var(--signal); }
.bx-tx { position: relative; display: inline-block; justify-self: start; overflow: hidden; vertical-align: top; }
.bx-tx b { font-weight: 500; color: var(--signal); }
.bx-tx em { font-style: normal; color: var(--on-dark-soft); }
/* the typing: a cover in the card's colour steps off the text one character at a time; its edge is the caret */
.bx-tx::after { content: ""; position: absolute; inset: 0; background: var(--ink); box-shadow: inset 2px 0 0 transparent; transform: translateX(calc(var(--k, 99) * 1ch)); }
.bx-ln.is-typing .bx-tx::after { box-shadow: inset 2px 0 0 var(--signal); }
.bx-code { transition: opacity .3s; }
.bx-code.is-clear { opacity: 0; }
.bx-go { align-self: flex-start; display: inline-grid; grid-template-columns: auto auto; align-items: center; column-gap: 7px; margin: auto 0 0 4px; height: 30px; padding: 0 13px 0 10px; border-radius: var(--r-pill); background: var(--signal); color: var(--ink); font: 650 13px/1 var(--sans); transition: transform .14s ease, background-color .2s; }
.bx-go svg { width: 11px; height: 11px; fill: currentColor; }
.bx-g0, .bx-g1 { grid-area: 1 / 2; transition: opacity .2s; }
.bx-g1 { opacity: 0; }
.bx-go.is-press { transform: scale(.93); background: var(--signal-strong); }
.bx-go.is-busy .bx-g0 { opacity: 0; }
.bx-go.is-busy .bx-g1 { opacity: 1; }

/* the frame: an empty stage until the recipe's files land on it (sizes in the frame's own width) */
.bx-stage { position: relative; aspect-ratio: 16 / 9; overflow: hidden; isolation: isolate; container-type: inline-size; border-radius: var(--r-s); background: var(--dark-2);
  box-shadow: 0 18px 34px -24px oklch(0.185 0.01 70 / .6); }
.bx-stage::before { content: ""; position: absolute; inset: 7% 5%; border: 1px dashed oklch(1 0 0 / .16); border-radius: 4px; }
.bx-pc { position: absolute; }
.bx-photo { inset: 0; }
.bx-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; }
.bx-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, oklch(0.165 0.008 70 / .3), oklch(0.165 0.008 70 / .38) 42%, oklch(0.165 0.008 70 / .86)); }
.bx-title { left: 6cqw; bottom: 13.5cqw; margin: 0; font: 650 5.3cqw/1.08 var(--sans); letter-spacing: -0.02em; color: oklch(0.99 0.004 88); }
.bx-title span { display: block; white-space: nowrap; }
.bx-title span + span { color: var(--signal); }
/* the real QR card, cut from the film's own closing frame */
.bx-qr { right: 6cqw; top: 41%; width: 19.5cqw; aspect-ratio: 236 / 276; translate: 0 -50%; border-radius: 1.2cqw; background: #fff url("assets/ending.jpg") 92.82% 51.52% / 406.78% 195.65% no-repeat; box-shadow: 0 1.4cqw 3cqw -1cqw oklch(0 0 0 / .55); }
/* the double that transitions.js flies onto this frame: a copy of the finished stage */
.tr-g .bx-stage.is-ghost { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border-radius: inherit; box-shadow: none; }
.bx-pc.is-snap { outline: 2px solid var(--signal); outline-offset: .7cqw; }
.bx-photo.is-snap { outline-offset: -2px; }
.bx-prog { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: 3px; background: oklch(1 0 0 / .14); opacity: 0; transition: opacity .25s; }
.bx-prog i { position: absolute; inset: 0; background: var(--signal); transform-origin: 0 50%; transform: scaleX(0); }
.bx-player { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; align-items: center; gap: 2.4cqw; height: 9.5cqw; padding: 1.6cqw 3.6cqw 0; background: linear-gradient(180deg, transparent, oklch(0.165 0.008 70 / .72)); transition: opacity .35s; }
.bx-player svg { flex: none; width: 3.1cqw; height: 3.1cqw; fill: oklch(0.99 0.004 88); }
.bx-track { position: relative; flex: 1; height: .8cqw; min-height: 2px; overflow: hidden; border-radius: 1cqw; background: oklch(1 0 0 / .28); }
.bx-track i { position: absolute; inset: 0; background: var(--signal); transform-origin: 0 50%; transform: scaleX(.62); }
.bx-player .bx-t { font: 500 2.7cqw/1 var(--mono); color: oklch(0.99 0.004 88); font-variant-numeric: tabular-nums; }
.bx-file { display: inline-flex; align-items: center; gap: 6px; height: 26px; margin: -3px 0 -3px 10px; padding: 0 10px 0 8px; vertical-align: middle; border-radius: var(--r-pill); background: var(--card); box-shadow: inset 0 0 0 1px var(--line); font: 500 12px/1 var(--mono); color: var(--ink); transition: opacity .35s, transform .35s; }
.bx-file .ic { width: 14px; height: 14px; fill: none; stroke: var(--signal-ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* the loop's states (band.js): the resting state above is the finished frame */
.bx-a.is-anim .bx-pc { opacity: 0; transform: scale(1.07); transition: opacity .26s ease, transform .5s cubic-bezier(.2, .9, .25, 1.12); }
.bx-a.is-anim .bx-title { transform: translateY(1.6cqw); transition: opacity .5s ease, transform .6s cubic-bezier(.2, .8, .2, 1); }
.bx-a.is-anim .bx-pc.is-in { opacity: 1; transform: none; }
.bx-a.is-anim .bx-player { opacity: 0; }
.bx-a.is-anim .bx-stage.is-done .bx-player { opacity: 1; }
.bx-a.is-anim .bx-stage.is-rendering .bx-prog { opacity: 1; }
.bx-a.is-anim .bx-file { opacity: 0; transform: translateY(4px); }
.bx-a.is-anim.is-done .bx-file { opacity: 1; transform: none; }
.bx-a.is-anim .bx-canvas[data-s] .bx-l1, .bx-a.is-anim .bx-canvas[data-s] .bx-l2, .bx-a.is-anim .bx-canvas[data-s] .bx-noise { transition: opacity .62s linear; }
.bx-a.is-anim .bx-canvas[data-s="0"] .bx-noise { opacity: 1; transition-duration: .35s; }
.bx-a.is-anim .bx-canvas[data-s="1"] .bx-noise { opacity: .9; }
.bx-a.is-anim .bx-canvas[data-s="2"] .bx-noise { opacity: .76; }
.bx-a.is-anim .bx-canvas[data-s="3"] .bx-noise { opacity: .62; }
.bx-a.is-anim .bx-canvas[data-s="4"] .bx-noise { opacity: .48; }
.bx-a.is-anim .bx-canvas[data-s="5"] .bx-noise { opacity: .34; }
.bx-a.is-anim .bx-canvas[data-s="6"] .bx-noise { opacity: .21; }
.bx-a.is-anim .bx-canvas[data-s="7"] .bx-noise { opacity: .09; }
.bx-a.is-anim .bx-canvas:is([data-s="0"], [data-s="1"], [data-s="2"]) .bx-l1 { opacity: 1; }
.bx-a.is-anim .bx-canvas[data-s="3"] .bx-l1 { opacity: .66; }
.bx-a.is-anim .bx-canvas[data-s="4"] .bx-l1 { opacity: .28; }
.bx-a.is-anim .bx-canvas:is([data-s="3"], [data-s="4"]) .bx-l2 { opacity: 1; }
.bx-a.is-anim .bx-canvas[data-s="5"] .bx-l2 { opacity: .7; }
.bx-a.is-anim .bx-canvas[data-s="6"] .bx-l2 { opacity: .4; }
.bx-a.is-anim .bx-canvas[data-s="7"] .bx-l2 { opacity: .16; }
.bx-a.is-anim .bx-canvas.is-painting .bx-c0 { opacity: 1; }
.bx-a.is-anim .bx-canvas.is-painting .bx-c1 { opacity: 0; }
.bx-a.is-run .bx-canvas.is-painting .bx-noise i { animation: bx-boil .44s infinite; }
@keyframes bx-boil {
  0% { transform: translate(0, 0); animation-timing-function: steps(1, end); }
  25% { transform: translate(-7%, 4%); animation-timing-function: steps(1, end); }
  50% { transform: translate(5%, -6%); animation-timing-function: steps(1, end); }
  75% { transform: translate(-3%, -3%); animation-timing-function: steps(1, end); }
}

.bx-why { margin: 16px 0 0; padding: 2px 0 2px 16px; box-shadow: inset 2px 0 0 var(--signal-strong); font-size: 16.5px; line-height: 1.55; color: var(--text); text-wrap: balance; }
.bx-why b { font-weight: 650; color: var(--ink); }

/* ---------- 02 a one-shot post beside the real versions ---------- */
.bx-b { align-items: start; }
.bx-pcard { max-width: 304px; padding: 12px 13px 10px; border-radius: var(--r-m); background: var(--card); box-shadow: 0 0 0 1px var(--line), 0 20px 40px -30px oklch(0.185 0.01 70 / .45); }
.bx-pu { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 14.5px; line-height: 1.2; }
.bx-av { flex: none; width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 50% 38%, var(--mute) 0 5.5px, transparent 6px), radial-gradient(ellipse 11px 8px at 50% 100%, var(--mute) 0 99%, transparent 100%), var(--paper-2); }
.bx-pu b { font-weight: 650; color: var(--ink); }
.bx-pu span { color: var(--soft); }
.bx-pt { margin: 8px 0 9px; font-size: 15.5px; line-height: 1.35; color: var(--ink); }
.bx-pv { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; background: #2a1a4a; }
.bx-pv svg { display: block; width: 100%; height: 100%; }
.bx-pdur { position: absolute; right: 8px; bottom: 9px; padding: 4px 6px; border-radius: 5px; background: oklch(0.165 0.008 70 / .7); font: 500 10.5px/1 var(--mono); color: #fff; }
.bx-pbar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: oklch(1 0 0 / .22); }
.bx-pbar i { position: absolute; inset: 0; background: oklch(1 0 0 / .9); transform-origin: 0 50%; transform: scaleX(.34); }
.bx-b.is-live .bx-pbar i { animation: bx-play 15s linear infinite; }
@keyframes bx-play { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.bx-pm { display: flex; justify-content: space-between; gap: 8px; margin: 9px 2px 0; font: 500 12px/1 var(--mono); color: var(--soft); }
.bx-pm span { display: inline-flex; align-items: center; gap: 6px; }
.bx-pm svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* the real versions on a film leader, with three of my notes pinned where they landed */
.bx-real .df-vis { position: relative; }
.df-strip { list-style: none; margin: 0; padding: 20px 10px 12px; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; border-radius: 12px;
  background: radial-gradient(circle, var(--paper) 1.6px, transparent 2.1px) 6px 6px / 13px 8px repeat-x, var(--dark); }
.df-strip li { min-width: 0; }
.df-fr { display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 4px; background: var(--dark-3); box-shadow: 0 0 0 1px oklch(1 0 0 / .08); }
.df-fr img { display: block; width: 100%; height: 100%; object-fit: cover; }
.df-v { display: block; margin-top: 7px; font: 500 10.5px/1 var(--mono); letter-spacing: .04em; color: var(--on-dark-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }
.df-v em { font-style: normal; color: var(--signal); }
.df-strip .is-ok .df-v { color: var(--signal); }
.df-strip .is-ok .df-fr { box-shadow: 0 0 0 1.5px var(--signal); }
.df-vis .df-pin { position: absolute; top: -9px; left: calc(6px + (100% - 12px) * var(--at) / 8); display: grid; place-items: center; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%; background: var(--signal); color: var(--ink); font: 500 11px/1 var(--mono); box-shadow: 0 0 0 3px var(--paper); pointer-events: none; }
.df-notes { position: relative; list-style: none; margin: 0; padding: 14px 0 0; display: grid; gap: 6px; }
.df-notes li { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: baseline; gap: 10px; font-size: 14.5px; line-height: 1.35; color: var(--ink); }
.df-notes i { font-style: normal; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--signal); color: var(--ink); font: 500 11px/1 var(--mono); translate: 0 -1px; }
.df-notes q { min-width: 0; font-family: var(--display); font-style: italic; font-size: 16px; }
.df-notes small { font: 500 11px/1 var(--mono); letter-spacing: .04em; color: var(--soft); white-space: nowrap; }
/* dealt in once it comes into view (band.js adds .is-deal first, then .is-dealt) */
.bx-real.is-deal .df-strip li, .bx-real.is-deal .df-pin, .bx-real.is-deal .df-notes li { opacity: 0; transform: translateY(8px); }
.bx-real.is-deal.is-dealt .df-strip li { opacity: 1; transform: none; transition: opacity .45s ease, transform .6s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--i) * 70ms); }
.bx-real.is-deal.is-dealt .df-pin { opacity: 1; transform: none; transition: opacity .3s ease, transform .45s cubic-bezier(.3, 1.4, .5, 1); transition-delay: calc(var(--at) * 70ms + 260ms); }
.bx-real.is-deal.is-dealt .df-notes li { opacity: 1; transform: none; transition: opacity .45s ease, transform .6s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--at) * 70ms + 420ms); }

/* ---------- 03 my records flow into the rebuilt history ---------- */
.bx-c { align-items: center; }
.bx-reads { display: flex; align-items: center; min-width: 0; }
.bx-src { position: relative; flex: 1; min-width: 0; list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
/* the bus: where the four lines meet */
.bx-src::after { content: ""; position: absolute; right: 0; top: 16px; bottom: 16px; width: 1.5px; background: var(--line-2); }
.bx-src li { display: flex; align-items: center; gap: 9px; min-width: 0; height: 32px; font-size: 14.5px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.bx-src .ic { flex: none; width: 32px; height: 32px; padding: 7.5px; border-radius: 9px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.bx-src li > i, .bx-ai::after { position: relative; flex: 1; min-width: 14px; height: 1.5px; background: var(--line-2); }
/* a dot runs along each line: a full-width track slides its dot from start to end (transform only) */
.bx-src li > i::after, .bx-ai::before { content: ""; position: absolute; left: 0; top: -2.5px; width: 100%; height: 6.5px; background: radial-gradient(circle at 3.25px 50%, var(--signal-strong) 2.6px, transparent 3.1px) no-repeat; opacity: 0; }
.bx-c.is-live .bx-src li > i::after { opacity: 1; animation: bx-run 1.7s cubic-bezier(.45, 0, .55, 1) infinite; }
.bx-c.is-live .bx-src li:nth-child(2) > i::after { animation-delay: -.45s; }
.bx-c.is-live .bx-src li:nth-child(3) > i::after { animation-delay: -1.05s; }
.bx-c.is-live .bx-src li:nth-child(4) > i::after { animation-delay: -.7s; }
@keyframes bx-run { from { transform: translateX(-3px); } to { transform: translateX(calc(100% - 3px)); } }
.bx-ai { position: relative; flex: none; display: inline-flex; align-items: center; gap: 6px; height: 32px; margin-left: 12px; padding: 0 12px 0 9px; border-radius: var(--r-pill); background: var(--ink); color: var(--on-dark); font: 500 12px/1 var(--mono); letter-spacing: .06em; }
.bx-ai .ic { width: 15px; height: 15px; fill: none; stroke: var(--signal); stroke-width: 1.8; stroke-linecap: round; }
/* from the AI into the history, across the column gap */
.bx-ai::after { content: ""; position: absolute; left: 100%; top: 50%; width: clamp(28px, 3.4vw, 48px); flex: none; translate: 0 -.75px; }
.bx-ai::before { left: 100%; top: calc(50% - 3.25px); width: clamp(28px, 3.4vw, 48px); z-index: 1; }
.bx-c.is-live .bx-ai::before { opacity: 1; animation: bx-run 1.1s cubic-bezier(.45, 0, .55, 1) infinite; }

.bx-tl { position: relative; display: block; min-width: 0; overflow: hidden; padding: 14px 18px 16px; border-radius: var(--r-m); background: var(--dark); color: var(--on-dark-2); text-decoration: none; box-shadow: 0 20px 40px -30px oklch(0.185 0.01 70 / .7); transition: box-shadow .25s; }
.bx-tl:hover { box-shadow: 0 0 0 1.5px var(--signal), 0 20px 40px -30px oklch(0.185 0.01 70 / .7); }
.bx-tl:focus-visible { outline: 2px solid var(--signal-strong); outline-offset: 3px; }
.bx-tlh { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.bx-tlh b { font: 500 var(--t-label)/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark); }
.bx-watch { font-size: 14.5px; font-weight: 650; line-height: 1; color: var(--on-dark); text-decoration: underline; text-decoration-color: var(--signal); text-decoration-thickness: 2px; text-underline-offset: 5px; white-space: nowrap; transition: color .2s; }
.bx-tl:hover .bx-watch { color: var(--signal); }
.bx-tlg { --lab: 128px; position: relative; display: grid; gap: 7px; }
.bx-days { position: relative; height: 12px; margin: 0 0 2px var(--lab); font: 500 10.5px/1 var(--mono); color: var(--on-dark-soft); }
.bx-days span { position: absolute; left: calc(var(--x) * 100%); white-space: nowrap; }
/* a day cut: a hairline down through the lanes */
.bx-days .is-cut::before { content: ""; position: absolute; left: 0; top: 15px; width: 1px; height: 76px; background: oklch(1 0 0 / .1); }
.bx-days .is-cut { padding-left: 5px; }
.bx-lane { display: grid; grid-template-columns: 26px calc(var(--lab) - 26px) minmax(0, 1fr); align-items: center; height: 18px; margin: 0; font-size: 12.5px; line-height: 1; white-space: nowrap; }
.bx-lane > b { font: 500 12px/1 var(--mono); color: var(--on-dark); font-variant-numeric: tabular-nums; }
.bx-lane > span:not(.bx-tk) { color: var(--on-dark-soft); }
.bx-tk { position: relative; height: 100%; }
.bx-tk::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: oklch(1 0 0 / .1); }
.bx-tk i { position: absolute; left: calc(var(--x) * 100%); top: 50%; }
.bx-lv i { width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--on-dark); }
.bx-lv i.is-ok { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; background: var(--signal); }
.bx-ls i { width: 1.5px; height: 12px; margin: -6px 0 0 -.75px; border-radius: 1px; background: var(--on-dark-soft); }
.bx-lo i { width: 8px; height: 8px; margin: -4px 0 0 -4px; background: var(--signal); rotate: 45deg; border-radius: 1.5px; }
.bx-lv b { color: var(--on-dark); }
.bx-lo b { color: var(--signal); }
/* the sweep that rebuilds it, left to right (band.js loops .is-build) */
.bx-sweep { position: absolute; left: var(--lab); right: 0; top: 14px; bottom: -2px; pointer-events: none; opacity: 0; }
.bx-sweep::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1.5px; background: var(--signal); }
.bx-tl.is-anim .bx-tk i { opacity: 0; transform: scale(.4); transition: opacity .3s ease, transform .3s ease; }
.bx-tl.is-anim.is-build .bx-tk i { opacity: 1; transform: none; transition: opacity .25s ease calc(var(--x) * 2.4s), transform .45s cubic-bezier(.3, 1.5, .5, 1) calc(var(--x) * 2.4s); }
.bx-tl.is-anim.is-build .bx-sweep { opacity: 1; transform: translateX(100%); transition: transform 2.4s linear, opacity .2s; }
.bx-tl.is-anim.is-build.is-built .bx-sweep { opacity: 0; transition: opacity .4s; }

/* ---------- 1. responsive ---------- */
@media (max-width: 1100px) {
  .bx-bh { grid-template-columns: minmax(0, 1fr); }
  .bx-bh h3 { white-space: normal; }
  .bx-a, .bx-b, .bx-c { grid-template-columns: minmax(0, 1fr); row-gap: 26px; }
  .bx-a .bx-paint { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 18px; }
  .bx-a .bx-paint .bx-wl { grid-column: 1 / -1; }
  .bx-a .bx-paint .bx-capw { align-self: end; }
  .bx-a .bx-paint .bx-cap { margin: 0; }
  .bx-pcard { max-width: 380px; }
  /* the records, then the AI, then the history, top to bottom */
  .bx-c { row-gap: 18px; }
  .bx-reads { flex-direction: column; align-items: center; }
  .bx-src { align-self: stretch; grid-template-columns: repeat(4, max-content); justify-content: start; gap: 8px 24px; }
  .bx-src::after, .bx-src li > i { display: none; }
  .bx-ai { margin: 18px 0 0; }
  .bx-ai::before, .bx-ai::after { display: block; left: 50%; width: 1.5px; height: 18px; background: var(--line-2); translate: -.75px 0; animation: none; opacity: 1; }
  .bx-ai::before { top: auto; bottom: 100%; }
  .bx-ai::after { top: 100%; }
  .bx-c.is-live .bx-ai::before { animation: none; }
}
@media (max-width: 700px) {
  .bx-a .bx-paint { display: block; }
  .bx-a .bx-paint .bx-cap { margin-top: 11px; }
  .bx-file { margin: 8px 0 0; }
  .bx-bench { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .bx-recipe::after { right: auto; left: 50%; top: auto; bottom: -20px; margin: 0 0 0 -13px; rotate: 90deg; }
  .bx-recipe { padding: 12px 14px 12px 10px; }
  .bx-code { gap: 6px; }
  .bx-go { margin-top: 12px; }
  .bx-tlg { --lab: 124px; }
  .bx-lane { font-size: 12px; }
}
@media (max-width: 620px) {
  .df-head h2 { font-size: 27px; }
  .bx-bh p, .bx-why { font-size: 15.5px; }
  .df-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 12px; padding: 18px 8px 10px; }
  .df-vis .df-pin { display: none; }
  .df-notes li { grid-template-columns: 20px minmax(0, 1fr); }
  .df-notes small { grid-column: 2; }
  .df-notes q { font-size: 15px; }
  .bx-src { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
  .bx-src li { font-size: 13.5px; }
  .bx-tl { padding: 12px 12px 14px; }
  .bx-tlh { margin-bottom: 10px; }
  .bx-tlg { --lab: 116px; }
  .bx-lane { font-size: 11.5px; }
  .bx-days span:nth-child(2) { color: transparent; }
}

/* =========================================================
   2. one tip: the setup and the odds, side by side, then my experience
   (tip.css keeps the head, the copy, the proof, the links and the caveats)
   ========================================================= */
.ot-lede { margin: 16px 0 0; font-size: var(--t-lead); line-height: 1.45; color: var(--on-dark-2); text-wrap: balance; }
.ot-grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 10.6fr) minmax(0, 10.4fr); grid-template-areas: "mock odds copy" "cav cav cav"; column-gap: clamp(24px, 2.8vw, 40px); row-gap: clamp(26px, 2.6vw, 34px); align-items: stretch; }
.ot-mock { grid-area: mock; }
.ot-odds { grid-area: odds; display: flex; flex-direction: column; }
.ot-copy { grid-area: copy; align-self: center; }
.ot-cav { grid-area: cav; }

/* the setup, drawn as a small settings card */
.ot-mock { position: relative; margin: 0; min-width: 0; padding: 18px; border-radius: var(--r-l); background: var(--dark-2); box-shadow: inset 0 0 0 1px oklch(1 0 0 / .07); }
.ot-app { display: flex; align-items: center; gap: 11px; margin: 0 0 16px; }
.ot-app b { font-size: 16px; font-weight: 650; color: var(--on-dark); white-space: nowrap; }
.ot-app em { margin-left: auto; padding: 5px 8px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--dark-line); font: 500 11px/1 var(--mono); font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark-soft); white-space: nowrap; }
.ot-mock .ot-ic { width: 38px; height: 38px; }
.ot-mr + .ot-mr { margin-top: 14px; }
.ot-ml { margin: 0 0 8px; font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark-soft); }
/* the model picker: its highlight settles on Opus 5.5 */
.ot-pick { position: relative; list-style: none; margin: 0; padding: 4px; display: grid; border-radius: 12px; background: var(--dark); box-shadow: inset 0 0 0 1px oklch(1 0 0 / .06); }
.ot-pick::before { content: ""; position: absolute; left: 4px; right: 4px; top: 4px; height: calc((100% - 8px) / 2); border-radius: 9px; background: var(--dark-3); box-shadow: inset 0 0 0 1px oklch(0.86 0.165 92 / .4); transform: translateY(100%); transition: transform .55s cubic-bezier(.3, .7, .2, 1) .15s; }
.ot-pick li { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 34px; padding: 0 12px; font-size: 14.5px; font-weight: 600; color: var(--on-dark-soft); white-space: nowrap; transition: color .3s .35s; }
.ot-pick li.is-on { color: var(--on-dark); }
.ot-pick .ic { flex: none; width: 17px; height: 17px; fill: none; stroke: var(--signal); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: opacity .3s .6s, transform .45s cubic-bezier(.3, 1.6, .5, 1) .6s; }
/* the effort control: four stops, the thumb comes down from Max and rests on Medium.
   The thumb carries its own copy of the labels, slid the other way, so the chosen word stays dark on yellow */
.ot-seg { --n: 1; position: relative; height: 34px; padding: 3px; border-radius: var(--r-pill); background: var(--dark); box-shadow: inset 0 0 0 1px oklch(1 0 0 / .06); }
.ot-sl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); height: 100%; }
.ot-sl span { display: grid; place-items: center; font-size: 13px; font-weight: 550; color: var(--on-dark-soft); white-space: nowrap; }
.ot-th { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / 4); overflow: hidden; border-radius: var(--r-pill); background: var(--signal); transform: translateX(calc(var(--n) * 100%)); transition: transform .7s cubic-bezier(.3, .7, .2, 1) .8s; }
.ot-th .ot-sl { width: 400%; transform: translateX(calc(var(--n) * -25%)); transition: transform .7s cubic-bezier(.3, .7, .2, 1) .8s; }
.ot-th .ot-sl span { font-weight: 650; color: var(--ink); }
.ot-tag { position: relative; display: inline-flex; margin: 11px 0 0 calc(25% - 2px); padding: 6px 10px; border-radius: 7px; background: oklch(0.86 0.165 92 / .13); font: 500 12px/1 var(--mono); letter-spacing: .04em; color: var(--signal); white-space: nowrap; transition: opacity .45s 1.5s, transform .55s cubic-bezier(.2, .8, .2, 1) 1.5s; }
.ot-tag::before { content: ""; position: absolute; left: 22px; top: -5px; border: 5px solid transparent; border-top: 0; border-bottom-color: oklch(0.86 0.165 92 / .13); }

/* the odds: each ticket flips over, one after another, like a quick draw */
.ot-odds .ot-note { margin-top: auto; }
.ot-odds .ot-row:last-of-type { margin-bottom: 16px; }
.ot-draws li { position: relative; aspect-ratio: 16 / 9; perspective: 160px; }
.ot-draws li > i { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .55s cubic-bezier(.3, .7, .25, 1) calc(100ms + var(--i) * 55ms); }
.is-opus .ot-draws li > i { transition-delay: calc(450ms + var(--i) * 55ms); }
.ot-draws li > i::before, .ot-draws li > i::after { content: ""; position: absolute; inset: 0; border-radius: 3px; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.ot-draws li > i::before { box-shadow: inset 0 0 0 1px var(--dark-line); }
.ot-draws li.is-hit > i::before { background: var(--signal); box-shadow: none; }
.ot-draws li > i::after { background: var(--dark-3); box-shadow: inset 0 0 0 1px oklch(1 0 0 / .08); transform: rotateY(180deg); }
.ot-n { transition: opacity .4s .95s; }
.is-opus .ot-n { transition-delay: 1.3s; }

/* before they come into view (band.js): Earlier models picked and effort at Max (.is-pre), every ticket face down (.is-pre-odds) */
.ot-grid.is-pre .ot-pick::before { transform: none; transition: none; }
.ot-grid.is-pre .ot-pick li { transition: none; }
.ot-grid.is-pre .ot-pick li:first-child { color: var(--on-dark); }
.ot-grid.is-pre .ot-pick li.is-on { color: var(--on-dark-soft); }
.ot-grid.is-pre .ot-pick .ic { opacity: 0; transform: scale(.4); transition: none; }
.ot-grid.is-pre .ot-seg { --n: 3; }
.ot-grid.is-pre .ot-th, .ot-grid.is-pre .ot-th .ot-sl { transition: none; }
.ot-grid.is-pre .ot-tag { opacity: 0; transform: translateY(5px); transition: none; }
.ot-grid.is-pre-odds .ot-draws li > i { transform: rotateY(180deg); transition: none; }
.ot-grid.is-pre-odds .ot-n { opacity: 0; transition: none; }

@media (max-width: 1100px) {
  .ot-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); grid-template-areas: "mock odds" "copy copy" "cav cav"; }
  .ot-copy { align-self: start; }
}
@media (max-width: 700px) {
  .ot-grid { display: flex; flex-direction: column; gap: 0; }
  .ot-copy { display: contents; }
  .ot-mock { order: 1; }
  .ot-sub { order: 2; margin-top: 24px; }
  .ot-proof { order: 3; }
  .ot-odds { order: 4; margin-top: 26px; }
  .ot-cav { order: 5; margin-top: 24px; }
  .ot-links { order: 9; margin-top: 22px; }
}
@media (max-width: 620px) {
  .ot-lede { font-size: 17px; }
  .ot-mock { padding: 15px 14px; border-radius: var(--r-m); }
  .ot-mock .ot-ic { width: 34px; height: 34px; }
}