/* ---- H3 · the race (key blue room), E5b: two lanes, one clock (race.js) ---- */
.race .h2{max-width:16em;margin:0 auto}
.race .h2 em{font-style:italic;margin-right:.04em}
/* the lanes one above the other, so each window is as wide as the room
   allows: the framing is still and holds the ribbon through Format */
.lanes{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(12px,1.4vw,18px);margin-top:clamp(36px,4.4vw,60px)}
.lane{position:relative;min-width:0;padding:14px 14px 18px;border-radius:var(--r-card);background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),inset 0 1px 0 rgba(255,255,255,.12)}
.lane.keys{background:rgba(255,255,255,.13);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),inset 0 1px 0 rgba(255,255,255,.16)}
.lhead{position:relative;display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 2px 12px;font:700 16px/1.2 var(--ui);color:#fff}
/* the clock: m:ss, as the film's time; it stops with a tick */
.clock{display:inline-flex;align-items:center;gap:7px;min-width:4.4em;justify-content:flex-end;padding:7px 11px;border-radius:10px;background:rgba(0,0,0,.22);font:600 21px/1 var(--mono);font-variant-numeric:tabular-nums;color:#fff}
.clock.fin::before{content:"";width:16px;height:16px;border-radius:50%;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%230B4FAF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
/* the window, in its framing's proportions (race.js FRAMES) */
.lview{aspect-ratio:1152/506;border-radius:var(--r-win);background:#F5F5F5;box-shadow:0 24px 48px -28px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.2)}
[data-frame=crop] .lview{aspect-ratio:706/506}
[data-frame=whole] .lview{aspect-ratio:1440/900}
.lview>.xk-win{border-radius:0;box-shadow:none}
/* the checklist: each command ticks as it lands, its check easing in
   (race.js sets --tk from the film's time; opacity alone under Reduce Motion) */
.todo{position:relative;list-style:none;margin:14px 2px 0;padding:0;display:grid;gap:7px;font:600 14.5px/1.25 var(--ui);color:rgba(255,255,255,.66)}
.todo li{display:flex;align-items:center;gap:10px;min-height:24px}
.todo li::before{content:"";width:16px;height:16px;border-radius:50%;box-shadow:inset 0 0 0 2px rgba(255,255,255,.42);flex:none}
.todo li.now{color:#fff}
.todo li.now::before{box-shadow:inset 0 0 0 2px #fff}
.todo li.done{color:#fff}
.todo li.done::before{box-shadow:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%230B4FAF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
.todo li.done::before,.clock.fin::before{opacity:var(--tk,1);transform:scale(calc(.7 + .3 * var(--tk,1)))}
html.gentle .todo li.done::before,html.gentle .clock.fin::before{transform:none}
.todo .hk{font-size:22px}
.todo .nm{min-width:0}
/* a laptop or a wide tablet: each window beside its name, clock and list,
   so both lanes stand on one screen */
@media (min-width:900px){
  .lane{display:grid;grid-template-columns:minmax(0,1fr) 300px;grid-template-areas:"view head" "view todo";grid-template-rows:auto 1fr;column-gap:22px;padding:14px 18px 14px 14px}
  .lhead{grid-area:head;margin:2px 0 14px}
  .lview{grid-area:view}
  .todo{grid-area:todo;margin:0;align-content:start}
}
/* G23 (the user, 2026-10-13): on a laptop and up, each window is as tall as
   the list beside it, in its framing's proportions, and each lane holds just
   the two, centred in the room, so both lanes stand on one screen. The list
   is 259 px: its name and clock, then seven rows of 24 px, 7 apart, its
   longest row whole in 340 px; 259 × 1152/506 is 590. */
@media (min-width:1180px){
  .lane{grid-template-columns:590px 340px;width:fit-content;margin:0 auto}
  .lview{align-self:center}
}
@media (min-width:900px) and (max-width:1179px){
  .lane{grid-template-columns:minmax(0,1fr) 248px;column-gap:16px}
  .lhead{font-size:15px}
  .clock{font-size:18px;padding:6px 9px}
  .todo{font-size:13px;gap:5px}
  .todo .hk{font-size:18px}
}
@media (max-width:699px){
  .todo{font-size:14px;gap:5px}
}