/* Concept C, "See behind it". claude, 2026-11-13.
   Every working window has a front (what the learner sees) and a back (the rules, the checks and
   the person). One motion, used everywhere: the front sheet is cut away from the bottom up,
   with a brass edge travelling across, and the quieter back is there underneath. */

:root {
  --cb-back: #121b1d;        /* the back: a quiet slate */
  --cb-back-2: #19252a;
  --cb-bar: #0c1315;
  --cb-line: rgba(233, 228, 214, .13);
  --cb-line-2: rgba(233, 228, 214, .22);
  --cb-ink: #ece7db;
  --cb-soft: #a2ada8;
  --cb-acc: #e2b466;         /* the one accent: the switch and the back */
  --cb-acc-ink: #1b1406;
  --cb-acc-deep: #855610;    /* the accent as ink on paper */
  --paper: #f6f2e9;
  --paper-2: #ece6d9;
  --paper-ink: #172120;
  --paper-soft: #59635f;
  --paper-line: rgba(23, 33, 32, .14);
  --cb-ease: cubic-bezier(.66, 0, .18, 1);
  --cb-flip: 680ms;
  --cb-r: 10px;
}

.cb-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ------------------------------------------------------------- screens -- */
.cb { font-family: 'Geist', system-ui, sans-serif; color: var(--cb-ink); -webkit-font-smoothing: antialiased; }
.cb ::selection { background: var(--cb-acc); color: var(--cb-acc-ink); }
.cb :focus-visible { outline: 2px solid var(--cb-acc); outline-offset: 3px; border-radius: 6px; }
.cb .win__front :focus-visible, .cb .paper :focus-visible { outline-color: var(--paper-ink); }

.cb-screen { position: relative; height: 175svh; }
.cb-screen--short { height: 150svh; }
.cb-screen--last { height: auto; min-height: 100svh; }
.cb-hold {
  position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; justify-content: center;
  padding: var(--pill-clear) var(--gutter) clamp(20px, 3.4svh, 40px);
}
.cb-screen--last .cb-hold { position: relative; height: auto; min-height: 100svh; }
.cb-frame { width: 100%; max-width: 1180px; margin: 0 auto; }
/* the simulation window keeps 16:9 and the height it has */
.cb-frame--sim { max-width: min(1180px, calc((100svh - var(--pill-clear) - 236px) * 16 / 9)); }

/* headings sit straight on the scene, with ink chosen for what is behind them */
.cb-head { margin: 0 0 clamp(16px, 2.6svh, 28px); color: #fbf7ee; text-shadow: 0 1px 22px rgba(0, 10, 12, .35); }
.cb-head[data-tone=light] { color: #10201b; text-shadow: none; }
.cb-h { margin: 0; font: 600 clamp(28px, 2.7vw, 44px)/1.06 'Geist', system-ui, sans-serif; letter-spacing: -.032em; text-wrap: balance; max-width: 22em; }
.cb-sub { margin: .55em 0 0; font: 400 clamp(16px, 1.25vw, 19px)/1.4 'Geist', system-ui, sans-serif; letter-spacing: -.005em; opacity: .86; }
.cb-head[data-tone=light] .cb-sub { opacity: .8; }

/* -------------------------------------------------------------- windows -- */
.win {
  position: relative; background: var(--cb-back); color: var(--cb-ink); border: 1px solid rgba(233, 228, 214, .16);
  border-radius: var(--cb-r); overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .18), 0 28px 60px -42px rgba(0, 0, 0, .75);
}
.win__bar {
  display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 8px 9px 8px 18px;
  background: var(--cb-bar); border-bottom: 1px solid var(--cb-line); font-size: 14px;
}
.win__gap { flex: 1; }
.win__name { font: 500 12px/1 'Geist Mono', ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--cb-soft); }
.win__name b { margin-left: .9em; font: 600 14.5px/1 'Geist', system-ui, sans-serif; letter-spacing: -.01em; text-transform: none; color: var(--cb-ink); }
.win__full { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 10px; color: var(--cb-soft); text-decoration: none; font-size: 13.5px; border-radius: 6px; }
.win__full svg { width: 11px; height: 11px; }
.win__full:hover { color: var(--cb-ink); }

.win__body { position: relative; display: grid; }
.win__front, .win__back { grid-area: 1 / 1; min-width: 0; min-height: 0; position: relative; }
.win__back {
  background-color: var(--cb-back);
  background-image: linear-gradient(rgba(233, 228, 214, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(233, 228, 214, .035) 1px, transparent 1px);
  background-size: 28px 28px; background-position: -1px -1px;
}
.win__front { z-index: 2; clip-path: inset(0 0 0 0); transition: clip-path var(--cb-flip) var(--cb-ease); }
.win[data-side=back] .win__front { clip-path: inset(0 0 100% 0); }
.win__back > * { transition: transform var(--cb-flip) var(--cb-ease), opacity var(--cb-flip) var(--cb-ease); }
.win[data-side=front] .win__back > * { transform: translateY(18px); opacity: .25; }
/* the travelling edge of the sheet */
.win__edge { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 2px; background: var(--cb-acc); opacity: 0; pointer-events: none;
  box-shadow: 0 0 0 1px rgba(226, 180, 102, .18); transition: bottom var(--cb-flip) var(--cb-ease); }
.win[data-side=back] .win__edge { bottom: calc(100% - 2px); }
.win.is-flipping .win__edge { opacity: 1; }

/* the one control: Behind it */
.flip {
  display: inline-flex; align-items: center; gap: 11px; height: 40px; padding: 0 6px 0 14px; cursor: pointer;
  border: 1px solid var(--cb-line-2); border-radius: 999px; background: transparent; color: var(--cb-ink);
  font: 600 14px/1 'Geist', system-ui, sans-serif; letter-spacing: -.005em; transition: border-color .2s, background-color .2s;
}
.flip:hover { border-color: rgba(226, 180, 102, .6); }
.flip__t { position: relative; width: 40px; height: 26px; border-radius: 999px; background: rgba(233, 228, 214, .14); transition: background-color .3s var(--cb-ease); }
.flip__t i { position: absolute; left: 4px; top: 4px; width: 18px; height: 18px; border-radius: 50%; background: var(--cb-ink); transition: transform .3s var(--cb-ease), background-color .3s; }
.flip[aria-checked=true] { border-color: var(--cb-acc); background: rgba(226, 180, 102, .08); }
.flip[aria-checked=true] .flip__t { background: var(--cb-acc); }
.flip[aria-checked=true] .flip__t i { transform: translateX(14px); background: var(--cb-acc-ink); }

/* small tags */
.tag { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border: 1px solid currentColor; border-radius: 4px;
  font: 500 10.5px/1 'Geist Mono', ui-monospace, monospace; letter-spacing: .09em; text-transform: uppercase; color: var(--cb-soft); }
.tag--paper { color: var(--paper-soft); border-color: rgba(23, 33, 32, .3); }
.tag--soft { color: var(--paper-soft); border-color: rgba(23, 33, 32, .28); border-style: dashed; white-space: nowrap; }

/* the three marks */
.mark__k { display: flex; align-items: center; gap: 9px; margin: 0; font: 500 12px/1 'Geist Mono', ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--cb-acc); }
.mark__k svg { flex: none; width: 16px; height: 16px; color: var(--cb-acc); }
.marks { list-style: none; margin: 0; padding: 0; display: grid; align-content: center; }
.mark { display: grid; gap: 9px; padding: 18px 0; border-top: 1px solid var(--cb-line); }
.mark:last-child { border-bottom: 1px solid var(--cb-line); }
.mark__v { font: 500 clamp(15px, 1.2vw, 18px)/1.35 'Geist', system-ui, sans-serif; letter-spacing: -.012em; color: var(--cb-ink); max-width: 19em; }

/* ------------------------------------------------- 1. the live simulation -- */
.win--sim .win__body { aspect-ratio: 16 / 9; }
.seg { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--cb-line); border-radius: 999px; }
.seg__b { height: 34px; padding: 0 15px; border: 0; border-radius: 999px; background: transparent; color: var(--cb-soft); cursor: pointer; font: 500 14px/1 'Geist', system-ui, sans-serif; letter-spacing: -.005em; transition: background-color .2s, color .2s; }
.seg__b:hover { color: var(--cb-ink); }
.seg__b[aria-pressed=true] { background: var(--cb-ink); color: #0d1516; }

.player { position: absolute; inset: 0; overflow: hidden; background: #020713; }
.player__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.player__play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 10px;
  height: 52px; padding: 0 24px 0 20px; border: 0; border-radius: 999px; cursor: pointer;
  background: #f6f2e9; color: #10181a; font: 600 16px/1 'Geist', system-ui, sans-serif; letter-spacing: -.01em;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .7); transition: transform .2s var(--cb-ease), background-color .2s;
}
.player__play svg { width: 14px; height: 14px; }
.player__play:hover { background: #fff; transform: translate(-50%, -50%) scale(1.03); }
.player__stage { position: absolute; left: 50%; top: 50%; width: 1280px; height: 720px; transform-origin: 50% 50%; display: none; }
.player__stage iframe { width: 100%; height: 100%; border: 0; display: block; background: #020713; }
.player.is-live .player__poster, .player.is-live .player__play { display: none; }
.player.is-live .player__stage { display: block; }

.bp { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 48px); align-items: center; padding: clamp(18px, 3%, 40px) clamp(22px, 4%, 52px); }
.bp__art { width: 100%; height: 100%; max-height: 100%; overflow: visible; }
.bp__art text { font: 500 11px 'Geist Mono', ui-monospace, monospace; letter-spacing: .04em; fill: var(--cb-soft); }
.bp__art .t-acc { fill: var(--cb-acc); }
.bp__art .t-big { font-size: 13px; fill: var(--cb-ink); }

/* ------------------------------------------------------------ 2. lesson -- */
.win--lesson .win__body { height: clamp(420px, calc(100svh - var(--pill-clear) - 210px), 600px); }
.lesson { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas: "sim side" "check check"; gap: 14px 16px; padding: 14px 16px 16px; background: var(--paper); color: var(--paper-ink); }
.lesson__part { position: relative; min-height: 0; }
.lesson__k { display: block; margin: 2px 0 8px; font: 500 11px/1 'Geist Mono', ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--paper-soft); }
.lesson__sim { grid-area: sim; display: flex; flex-direction: column; }
.lesson__side { grid-area: side; }
.lesson__check { grid-area: check; padding-top: 12px; border-top: 1px solid var(--paper-line); }
.lesson__check .lesson__k { display: flex; gap: 14px; align-items: baseline; }
.player--lesson { position: relative; inset: auto; flex: 1; border-radius: 6px; }
.player--lesson .player__poster { object-fit: contain; }
.lesson__side { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.lesson__watch { flex: 1 1 0; display: flex; flex-direction: column; min-height: 90px; }
.clip { position: relative; flex: 1; min-height: 0; border-radius: 6px; overflow: hidden; background: #020713; }
.clip__v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.clip__b { position: absolute; right: 10px; top: 14px; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: #f6f2e9; color: #10181a; cursor: pointer; }
.clip__b svg { width: 13px; height: 13px; }
.clip__b .i-pause, .clip__b[aria-pressed=true] .i-play { display: none; }
.clip__b[aria-pressed=true] .i-pause { display: block; }
.lesson__listen { flex: none; }
.audio { display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 12px 0 6px; border: 1px solid var(--paper-line); border-radius: 6px; background: #fbf8f2; }
.audio__b { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border: 1px dashed rgba(23, 33, 32, .35); border-radius: 50%; color: rgba(23, 33, 32, .45); }
.audio__b svg { width: 12px; height: 12px; }
.audio__wave { flex: 1; min-width: 0; height: 26px; }
.audio__wave rect { fill: rgba(23, 33, 32, .22); }
.quiz { display: flex; align-items: center; gap: 12px 22px; flex-wrap: wrap; }
.quiz__q { margin: 0; font: 600 16px/1.3 'Geist', system-ui, sans-serif; letter-spacing: -.012em; }
.quiz__opts { display: flex; flex-wrap: wrap; gap: 8px; }
.quiz__o { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 12px; text-align: left; border: 1px solid var(--paper-line); border-radius: 6px;
  background: #fbf8f2; color: var(--paper-ink); cursor: pointer; font: 450 14.5px/1.25 'Geist', system-ui, sans-serif; transition: border-color .2s, background-color .2s; }
.quiz__o::before { content: ''; flex: none; width: 12px; height: 12px; border: 1.5px solid rgba(23, 33, 32, .35); border-radius: 50%; }
.quiz__o:hover { border-color: rgba(23, 33, 32, .4); }
.quiz__o[aria-pressed=true] { border-color: var(--paper-ink); }
.quiz__o[aria-pressed=true]::before { background: var(--paper-ink); border-color: var(--paper-ink); box-shadow: inset 0 0 0 2px #fbf8f2; }
.quiz__o.is-right { border-color: #2f6a4c; background: #eef4ee; }
.quiz__o.is-right::before { background: #2f6a4c; border-color: #2f6a4c; }
.quiz__fb { font: 500 13.5px/1.3 'Geist', system-ui, sans-serif; letter-spacing: -.005em; text-transform: none; color: #8a3b24; }
.quiz__fb.is-right { color: #2f6a4c; }

.notes-wrap { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; padding: clamp(18px, 3svh, 36px) clamp(22px, 4%, 52px); }
.notes { align-self: center; max-height: 100%; overflow: hidden; padding: clamp(18px, 2.6svh, 30px) clamp(20px, 2.4vw, 34px); background: #e7e3da; color: #2a302e; border-radius: 3px; box-shadow: 0 18px 40px -26px rgba(0, 0, 0, .8); font-family: 'Geist', system-ui, sans-serif; }
.notes__top { margin: 0 0 12px; }
.notes__h { margin: 0 0 12px; font: 600 20px/1.2 'Geist', system-ui, sans-serif; letter-spacing: -.01em; }
.notes__list { margin: 0; padding-left: 1.3em; display: grid; gap: .45em; font: 400 clamp(14px, 1.08vw, 16px)/1.45 'Geist', system-ui, sans-serif; }
.notes__list li::marker { color: #7a817e; font-size: .9em; }

/* ------------------------------------------------------------ 3. marking -- */
.cb-frame--mark { max-width: 1000px; }
.win--mark .win__body { height: clamp(380px, calc(100svh - var(--pill-clear) - 236px), 470px); }
.markchip { display: inline-flex; align-items: baseline; gap: 2px; height: 40px; align-items: center; padding: 0 14px; border: 1px solid var(--cb-line); border-radius: 999px;
  font: 500 12px/1 'Geist Mono', ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--cb-soft); }
.markchip b { margin-left: 8px; font: 600 16px/1 'Geist', system-ui, sans-serif; color: var(--cb-ink); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.markchip__of { font: 500 15px/1 'Geist', system-ui, sans-serif; color: var(--cb-soft); text-transform: none; letter-spacing: 0; white-space: pre; }
.markchip.is-bump b { color: var(--cb-acc); }

.paper { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 540px) auto; justify-content: center; gap: clamp(32px, 7vw, 120px); align-items: center;
  padding: clamp(24px, 4svh, 48px) clamp(26px, 5%, 64px); background: var(--paper); color: var(--paper-ink); }
.paper__top { margin: 0 0 14px; }
.paper__q { margin: 0 0 clamp(18px, 3svh, 30px); max-width: 30em; font: 500 clamp(16px, 1.3vw, 19px)/1.4 'Geist', system-ui, sans-serif; letter-spacing: -.01em; }
.answer { list-style: none; margin: 0; padding: 0 0 0 20px; border-left: 2px solid var(--paper-line); display: grid; gap: clamp(6px, 1.2svh, 12px); }
.answer li { display: flex; align-items: baseline; gap: 22px; }
.answer__w { font: italic 400 clamp(26px, 2.4vw, 36px)/1.15 'Newsreader', Georgia, serif; color: #1f2c4a; min-width: 6.2em; }
.answer__m { display: inline-flex; gap: 12px; font: 500 12px/1 'Geist Mono', ui-monospace, monospace; letter-spacing: .06em; color: var(--cb-acc-deep); }
.answer__m i { font-style: normal; display: inline-flex; align-items: center; gap: 5px; }
.answer__m i svg { width: 14px; height: 14px; }
.answer__m i.miss { color: #9a3b26; }
.paper__mark { display: grid; justify-items: center; gap: 14px; }
.ring { position: relative; width: clamp(130px, 13vw, 176px); aspect-ratio: 1; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 5; }
.ring__bg { stroke: var(--paper-line); }
.ring__fg { stroke: var(--paper-ink); stroke-linecap: round; stroke-dasharray: 75 100; transition: stroke-dasharray .5s var(--cb-ease); }
.ring__n { position: absolute; inset: 0; display: grid; place-content: center; grid-auto-flow: column; align-items: baseline; font-variant-numeric: tabular-nums; }
.ring__n b { font: 600 clamp(46px, 4.4vw, 62px)/1 'Geist', system-ui, sans-serif; letter-spacing: -.04em; }
.ring__of { font: 500 clamp(20px, 1.8vw, 26px)/1 'Geist', system-ui, sans-serif; color: var(--paper-soft); margin-left: 2px; }
.stamp { height: 28px; display: inline-flex; align-items: center; padding: 0 10px; border: 1.5px solid #2f6a4c; border-radius: 4px; color: #2f6a4c;
  font: 600 11.5px/1 'Geist Mono', ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; transform: rotate(-4deg); visibility: hidden; }
.win--mark.is-approved .stamp { visibility: visible; }

.rules { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 60px); padding: clamp(20px, 3.4svh, 40px) clamp(22px, 4%, 52px); align-items: center; }
.rules__list { display: grid; gap: 8px; }
.rules__list > .mark__k { margin-bottom: 8px; }
.rules__by { color: var(--cb-soft); letter-spacing: .06em; text-transform: none; font-size: 12px; }
.rule { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; min-height: 58px; padding: 0 18px 0 14px; text-align: left; cursor: pointer;
  border: 1px solid var(--cb-line); border-radius: 8px; background: var(--cb-back-2); color: var(--cb-ink); font: 500 clamp(15px, 1.25vw, 18px)/1.2 'Geist', system-ui, sans-serif; letter-spacing: -.012em;
  transition: border-color .2s, background-color .2s, color .2s; }
.rule:hover { border-color: var(--cb-line-2); }
.rule__t { position: relative; width: 46px; height: 28px; border-radius: 999px; background: rgba(233, 228, 214, .14); transition: background-color .3s var(--cb-ease); }
.rule__t i { position: absolute; left: 4px; top: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--cb-ink); transition: transform .3s var(--cb-ease), background-color .3s; }
.rule[aria-checked=true] .rule__t { background: var(--cb-acc); }
.rule[aria-checked=true] .rule__t i { transform: translateX(18px); background: var(--cb-acc-ink); }
.rule[aria-checked=false] { color: var(--cb-soft); background: transparent; }
.rule[aria-checked=false] .rule__n { text-decoration: line-through; text-decoration-color: rgba(233, 228, 214, .35); }
.rule__f { font: 500 11.5px/1 'Geist Mono', ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--cb-soft); }
.rule__f[data-met=false] { color: #e8957d; }
.rule[aria-checked=false] .rule__f { opacity: .45; }
.rules__side { display: grid; gap: clamp(22px, 4svh, 40px); align-content: center; }
.sum, .sign { display: grid; gap: 14px; padding-top: 18px; border-top: 1px solid var(--cb-line); }
.sum__eq { margin: 0; font: 500 clamp(18px, 1.5vw, 22px)/1.2 'Geist Mono', ui-monospace, monospace; color: var(--cb-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sum__eq b { font: 600 clamp(34px, 3vw, 44px)/1 'Geist', system-ui, sans-serif; color: var(--cb-ink); letter-spacing: -.03em; vertical-align: -4px; }
.sum__of { font-family: 'Geist', system-ui, sans-serif; }
.sign__b { justify-self: start; display: inline-flex; align-items: center; min-height: 46px; padding: 0 20px; cursor: pointer; border-radius: 999px;
  border: 1px solid var(--cb-acc); background: transparent; color: var(--cb-acc); font: 600 15px/1 'Geist', system-ui, sans-serif; letter-spacing: -.005em; transition: background-color .2s, color .2s; }
.sign__b:hover { background: rgba(226, 180, 102, .1); }
.sign__b .sign__on { display: none; }
.sign__b[aria-pressed=true] { background: var(--cb-acc); color: var(--cb-acc-ink); }
.sign__b[aria-pressed=true] .sign__on { display: inline; }
.sign__b[aria-pressed=true] .sign__off { display: none; }

/* ------------------------------------------------------- 4. your job -- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 clamp(16px, 2.6svh, 26px); }
.chip { min-height: 42px; padding: 0 17px; border-radius: 999px; cursor: pointer; border: 1px solid rgba(16, 32, 27, .28); background: rgba(251, 248, 240, .72); color: #10201b;
  font: 500 15px/1 'Geist', system-ui, sans-serif; letter-spacing: -.008em; transition: background-color .2s, border-color .2s, color .2s; }
.chip:hover { background: rgba(251, 248, 240, .95); }
.chip[aria-pressed=true] { background: var(--cb-back); border-color: var(--cb-back); color: var(--cb-ink); }
.chip:focus-visible { outline-color: #10201b; }
.three { --px: clamp(26px, 4%, 52px); --gap: clamp(20px, 3vw, 48px); position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); padding: clamp(30px, 5svh, 56px) var(--px) clamp(30px, 5.4svh, 60px); }
.three__line { position: absolute; left: calc(var(--px) + 22px); right: calc(var(--px) + (100% - 2 * var(--px) - 2 * var(--gap)) / 3 - 22px); top: calc(clamp(30px, 5svh, 56px) + 21px); height: 1px; background: var(--cb-line-2); }
.three__run { position: absolute; top: -3px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--cb-acc); opacity: 0; }
.three__run.is-going { animation: cb-run .9s var(--cb-ease) forwards; }
@keyframes cb-run { 0% { left: 0; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: calc(100% - 7px); opacity: 0; } }
.three__c { position: relative; min-width: 0; }
.three__node { position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 22px; border-radius: 50%; background: var(--cb-back); border: 1px solid var(--cb-acc); color: var(--cb-acc); }
.three__node svg { width: 18px; height: 18px; }
.three__k { margin: 0 0 10px; font: 500 clamp(15px, 1.15vw, 17px)/1.35 'Geist', system-ui, sans-serif; letter-spacing: -.008em; color: var(--cb-acc); }
.three__v { margin: 0; font: 600 clamp(20px, 1.9vw, 28px)/1.18 'Geist', system-ui, sans-serif; letter-spacing: -.025em; color: var(--cb-ink); text-wrap: balance; transition: opacity .25s, transform .25s var(--cb-ease); }
.three__v.is-out { opacity: 0; transform: translateY(6px); }

/* ------------------------------------------------------ 5. other builds -- */
.builds { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.builds li { min-width: 0; }
.builds li + li { border-left: 1px solid var(--cb-line); }
.build { display: grid; width: 100%; height: 100%; gap: 6px; align-content: start; padding: clamp(16px, 2.2svh, 24px) clamp(16px, 1.6vw, 24px) clamp(18px, 2.6svh, 28px); text-align: left; cursor: pointer;
  border: 0; background: transparent; color: var(--cb-ink); border-radius: 0; transition: background-color .25s; }
.build:hover, .build[aria-pressed=true] { background: rgba(233, 228, 214, .035); }
.cb .build:focus-visible { outline-offset: -4px; }
.build__art { width: 100%; height: auto; aspect-ratio: 240 / 150; margin-bottom: 12px; overflow: visible; }
.build__n { font: 600 clamp(15px, 1.2vw, 18px)/1.25 'Geist', system-ui, sans-serif; letter-spacing: -.015em; }
.build__s { font: 500 11.5px/1.3 'Geist Mono', ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--cb-soft); }
.build__art .ln { fill: none; stroke: rgba(233, 228, 214, .55); stroke-width: 1.2; }
.build__art .ln--soft { stroke: rgba(233, 228, 214, .22); }
.build__art .dot { fill: rgba(233, 228, 214, .55); }
/* tactics */
.art-pitch .team-a circle { fill: var(--cb-acc); }
.art-pitch .team-b circle { fill: none; stroke: var(--cb-ink); stroke-width: 1.3; }
.art-pitch g { transition: transform 1.2s var(--cb-ease); }
.art-pitch .run { fill: none; stroke: var(--cb-acc); stroke-width: 1.3; stroke-dasharray: 3 4; opacity: .55; }
.art-pitch .run--2 { opacity: 0; transition: opacity .6s; }
.build:hover .art-pitch .team-a, .build[aria-pressed=true] .art-pitch .team-a { transform: translate(8px, -2px); }
.build:hover .art-pitch .team-b, .build[aria-pressed=true] .art-pitch .team-b { transform: translate(4px, 3px); }
.build:hover .art-pitch .run, .build[aria-pressed=true] .art-pitch .run { animation: cb-dash 1.6s linear infinite; opacity: .95; }
@keyframes cb-dash { to { stroke-dashoffset: -14; } }
/* stream deck */
.art-deck .say { font: italic 400 15px 'Newsreader', Georgia, serif; fill: var(--cb-ink); }
.art-deck .caret { fill: var(--cb-acc); animation: cb-blink 1.1s steps(1) infinite; }
@keyframes cb-blink { 50% { opacity: 0; } }
.art-deck .key { fill: rgba(233, 228, 214, .06); stroke: rgba(233, 228, 214, .3); stroke-width: 1; transition: fill .4s, stroke .4s; }
.art-deck .key.is-made { transition-delay: .15s; }
.build:hover .art-deck .key.is-made, .build[aria-pressed=true] .art-deck .key.is-made { fill: var(--cb-acc); stroke: var(--cb-acc); }
.art-deck .mic { fill: none; stroke: rgba(233, 228, 214, .5); stroke-width: 1.4; stroke-linecap: round; transition: stroke .4s .15s; }
.build:hover .art-deck .mic, .build[aria-pressed=true] .art-deck .mic { stroke: var(--cb-acc-ink); }
/* website */
.art-web .net line { stroke: rgba(233, 228, 214, .2); stroke-width: 1; transition: stroke .5s; }
.art-web .net circle { fill: rgba(233, 228, 214, .6); transition: fill .5s, transform .8s var(--cb-ease); transform-box: fill-box; transform-origin: center; }
.build:hover .art-web .net line, .build[aria-pressed=true] .art-web .net line { stroke: rgba(226, 180, 102, .55); }
.build:hover .art-web .net circle, .build[aria-pressed=true] .art-web .net circle { fill: var(--cb-acc); }
/* dj */
.art-dj .wheel { transform-box: fill-box; transform-origin: center; }
.build:hover .art-dj .wheel, .build[aria-pressed=true] .art-dj .wheel { animation: cb-spin 2.4s linear infinite; }
.build:hover .art-dj .wheel--b, .build[aria-pressed=true] .art-dj .wheel--b { animation-duration: 3s; }
@keyframes cb-spin { to { transform: rotate(360deg); } }
.art-dj .wave rect { fill: rgba(233, 228, 214, .4); transition: fill .4s; }
.art-dj .wave rect.is-past { fill: var(--cb-acc); }
.art-dj .fader { fill: var(--cb-back-2); stroke: rgba(233, 228, 214, .55); transition: transform .8s var(--cb-ease); }
.build:hover .art-dj .fader, .build[aria-pressed=true] .art-dj .fader { transform: translateX(14px); }

/* ------------------------------------------------------ 6. about, contact -- */
.about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 88px); align-items: center; }
.who { padding: clamp(26px, 4svh, 44px) clamp(26px, 3vw, 44px); }
.who__k { margin-bottom: 22px; }
.who__n { margin: 0 0 22px; font: 600 clamp(30px, 2.8vw, 44px)/1.05 'Geist', system-ui, sans-serif; letter-spacing: -.035em; }
.who__facts { list-style: none; margin: 0; padding: 0; }
.who__facts li { padding: 14px 0; border-top: 1px solid var(--cb-line); font: 450 clamp(16px, 1.25vw, 18px)/1.4 'Geist', system-ui, sans-serif; letter-spacing: -.01em; }
.ask { color: #fbf7ee; }
.ask[data-tone=light] { color: #10201b; }
.ask__h { margin: 0; font: 600 clamp(40px, 4.4vw, 72px)/1 'Geist', system-ui, sans-serif; letter-spacing: -.045em; text-shadow: 0 2px 30px rgba(0, 12, 6, .35); }
.ask__s { margin: 16px 0 28px; font: 500 clamp(17px, 1.3vw, 20px)/1.4 'Geist', system-ui, sans-serif; text-shadow: 0 1px 14px rgba(20, 10, 2, .55); }
.ask[data-tone=light] .ask__s, .ask[data-tone=light] .ask__h { text-shadow: none; }
.mail__note.is-ping { animation: cb-ping .9s var(--cb-ease); }
@keyframes cb-ping { 30% { color: var(--cb-acc); } }
.mail { min-height: 54px; padding: 0 28px; border-radius: 999px; cursor: pointer; border: 1.5px dashed rgba(251, 247, 238, .75); background: rgba(10, 22, 16, .35); color: inherit;
  font: 600 17px/1 'Geist', system-ui, sans-serif; letter-spacing: -.01em; transition: background-color .2s, border-color .2s; }
.mail:hover { background: rgba(10, 22, 16, .55); border-color: var(--cb-acc); }
.mail__note { margin: 12px 0 0; font: 500 12px/1.3 'Geist Mono', ui-monospace, monospace; letter-spacing: .04em; opacity: .85; }
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; width: 100%; max-width: 1180px; margin: clamp(40px, 8svh, 90px) auto 0; padding-top: 16px;
  border-top: 1px solid rgba(251, 247, 238, .3); font: 500 12px/1.3 'Geist Mono', ui-monospace, monospace; letter-spacing: .06em; color: #fbf7ee; opacity: .9; }

/* ------------------------------------------------- the scrollbar: a thread -- */
.cb-rail { position: fixed; z-index: 55; right: 8px; top: 96px; bottom: 28px; width: 24px; cursor: pointer; color: #f4efe2; }
.cb-rail[data-tone=light] { color: #14231e; }
.cb-rail__line, .cb-rail__fill { position: absolute; left: 11.5px; top: 0; width: 1px; pointer-events: none; }
.cb-rail__line { bottom: 0; background: currentColor; opacity: .3; }
.cb-rail__fill { height: 0; background: var(--cb-acc); box-shadow: 0 0 0 .5px rgba(226, 180, 102, .4); }
.cb-rail i { position: absolute; left: 8px; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; pointer-events: none;
  background: var(--cb-rail-bg, #0d1516); border: 1px solid currentColor; opacity: .75; transition: transform .3s var(--cb-ease), background-color .3s, border-color .3s, opacity .3s; }
.cb-rail[data-tone=light] i { --cb-rail-bg: #eef1ea; }
.cb-rail i.is-past { background: var(--cb-acc); border-color: var(--cb-acc); opacity: 1; }
.cb-rail i.is-now { background: var(--cb-acc); border-color: var(--cb-acc); opacity: 1; transform: scale(1.35); box-shadow: 0 0 0 3px rgba(226, 180, 102, .22); }
.cb-rail:hover .cb-rail__line { opacity: .5; }

/* ------------------------------------------------------- smaller windows -- */
@media (max-height: 800px) and (min-width: 761px) {
  .mark { padding: 13px 0; }
  .cb-h { font-size: clamp(26px, 2.4vw, 36px); }
  .cb-sub { font-size: 16px; }
  .rule { min-height: 50px; }
  .rules__list { gap: 6px; }
  .quiz__o { min-height: 40px; padding: 4px 12px; }
}
@media (max-width: 1100px) and (min-width: 761px) {
  .builds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .builds li:nth-child(3) { border-left: 0; }
  .builds li:nth-child(n+3) { border-top: 1px solid var(--cb-line); }
}
/* a window too short to hold a screen still: let it scroll */
@media (max-height: 640px) and (min-width: 761px) {
  .cb-screen, .cb-screen--short { height: auto; }
  .cb-hold { position: relative; height: auto; min-height: 100svh; padding-top: calc(var(--pill-clear) + 16px); padding-bottom: 60px; }
}

/* ------------------------------------------------------------- phone -- */
@media (max-width: 760px) {
  .cb-screen, .cb-screen--short, .cb-screen--last { height: auto; min-height: 0; }
  .cb-hold { position: relative; height: auto; min-height: 0; padding: calc(var(--pill-clear) + 24px) 16px 72px; }
  .cb-screen--last .cb-hold { min-height: 100svh; }
  .cb-frame--sim { max-width: none; }
  .cb-h { font-size: 28px; }
  .win__bar { flex-wrap: wrap; padding: 8px 8px 8px 14px; row-gap: 8px; }
  .win--sim .win__bar .seg { order: -2; flex: 1 1 100%; }
  .seg__b { flex: 1; padding: 0 8px; height: 38px; }
  /* on a phone the two sides differ in height: the hidden side stops taking room */
  .win[data-side=front] .win__back, .win[data-side=back] .win__front { position: absolute; inset: 0; overflow: hidden; }
  .win--sim .win__body { aspect-ratio: auto; }
  .win--sim .win__front { aspect-ratio: 16 / 9; }
  .player__play { height: 48px; }
  .bp { position: relative; inset: auto; grid-template-columns: 1fr; gap: 6px; padding: 18px 18px 8px; }
  .bp__art { height: auto; }
  .mark { padding: 14px 0; }
  .mark__v { font-size: 16px; }

  .win--lesson .win__body, .win--mark .win__body { height: auto; }
  .lesson { position: relative; inset: auto; grid-template-columns: 1fr; grid-template-rows: auto; grid-template-areas: "sim" "side" "check"; padding: 12px; }
  .quiz__opts { flex-direction: column; width: 100%; }
  .lesson__check .lesson__k { flex-direction: column; gap: 6px; }
  .player--lesson { flex: none; aspect-ratio: 16 / 9; }
  .lesson__watch { flex: none; }
  .clip { flex: none; aspect-ratio: 16 / 9; }
  .notes-wrap { position: relative; inset: auto; grid-template-columns: 1fr; gap: 20px; padding: 18px; }
  .notes { align-self: auto; }

  .markchip { order: -1; }
  .win--mark .win__name { flex: 1 1 100%; order: -2; }
  .win--mark .win__gap { display: none; }
  .win--mark .flip { margin-left: auto; }
  .paper { position: relative; inset: auto; grid-template-columns: 1fr; gap: 22px; padding: 22px 20px 26px; }
  .paper__mark { grid-auto-flow: column; justify-content: start; align-items: center; gap: 18px; }
  .ring { width: 104px; }
  .ring__n b { font-size: 38px; }
  .ring__of { font-size: 18px; }
  .answer li { flex-wrap: wrap; gap: 4px 14px; }
  .rules { position: relative; inset: auto; grid-template-columns: 1fr; gap: 26px; padding: 20px 16px 24px; }
  .rule { gap: 12px; padding: 0 12px; min-height: 56px; }

  .chip { min-height: 42px; padding: 0 14px; font-size: 14.5px; }
  .three { grid-template-columns: 1fr; gap: 26px; padding: 26px 20px 28px 20px; }
  .three__line { left: calc(20px + 21px); right: auto; top: 26px; bottom: 28px; width: 1px; height: auto; }
  .three__run { display: none; }
  .three__c { display: grid; grid-template-columns: 44px 1fr; column-gap: 16px; }
  .three__node { grid-row: span 2; margin: 0; }
  .three__k { margin: 4px 0 6px; }
  .three__v { font-size: 20px; }

  .builds { grid-template-columns: 1fr 1fr; }
  .builds li:nth-child(3) { border-left: 0; }
  .builds li:nth-child(n+3) { border-top: 1px solid var(--cb-line); }
  .build { padding: 14px 12px 16px; }
  .build__art { margin-bottom: 8px; }
  .build__n { font-size: 15px; }
  .build__s { font-size: 10.5px; }

  .about { grid-template-columns: 1fr; gap: 40px; }
  .who { padding: 24px 20px; }
  .cb-rail { display: none; }
}

/* reduced motion: finished states, no travel */
html.rm .win__front, html.rm .win__back > *, html.rm .win__edge, html.rm .three__v, html.rm .ring__fg,
html.rm .flip__t, html.rm .flip__t i, html.rm .rule__t, html.rm .rule__t i { transition: none !important; }
html.rm .three__run { display: none; }
html.rm .build__art *, html.rm .build__art { animation: none !important; transition: none !important; }