/* ── tokens.css ── */
/* ScoreKeeper landing — shared tokens and incumbent primitives.
   LEAD-OWNED CONTRACT FILE. Workers read it; nobody but the lead edits it.
   Everything here is lifted from the live site (src/components/LandingPage.tsx,
   LANDING_CSS) so the redesign stays the same brand: same ink, same red, same
   Barlow Condensed italic, same glass scorebug, same buttons. */

:root{
  /* colour — unchanged from the live site */
  --ink:#0B0B0D;            /* page ground */
  --ink2:#060608;           /* footer / deepest */
  --ink3:#131317;           /* raised solid surface (monitor bezel, phone body) */
  --red:#E3132C; --redb:#F0242F; --red2:#A51119;
  --tx:#F4F6FA; --mut:#B9BEC9; --faint:#8990A0;
  --live:#2BE38A;           /* the live dot. Nothing else is green. */
  --line:rgba(255,255,255,.10);
  --line2:rgba(255,255,255,.06);

  /* type — unchanged families */
  --cond:'Barlow Condensed','Oswald','Arial Narrow',sans-serif;   /* display, labels, numerals */
  --ui:'Barlow','Inter',system-ui,sans-serif;                     /* body, controls */

  /* the brand's one angle: the italic of the wordmark. Every wipe, tag and divider leans on it. */
  --slant:-12deg;
  --slant-tan:.2126;        /* tan(12deg) — for clip-path parallelograms */

  /* motion */
  --ease:cubic-bezier(.16,1,.3,1);       /* arrivals: fast out, long settle */
  --ease-exit:cubic-bezier(.7,0,.84,0);  /* exits: quicker than entrances */
  --t-fast:140ms; --t-state:260ms; --t-move:520ms; --t-stage:760ms;

  /* layout */
  --wrap:1240px;
  --gut:clamp(18px,4vw,40px);
  --nav-h:64px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--tx);font-family:var(--ui);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
img,svg,canvas{display:block}
:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:4px}

/* numerals never jitter */
.num,.sk-bug .sc,.sk-bug .tm{font-variant-numeric:tabular-nums}

/* ── buttons (incumbent) ───────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;border:0;border-radius:10px;cursor:pointer;
  font-family:var(--ui);white-space:nowrap;transition:transform var(--t-fast),filter var(--t-fast),background var(--t-fast)}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.red{color:#fff;background:linear-gradient(145deg,var(--redb),var(--red2));box-shadow:0 14px 34px -12px var(--red)}
.btn.red:hover{filter:brightness(1.08)}
.btn.glass{color:#fff;background:rgba(255,255,255,.1);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.btn.glass:hover{background:rgba(255,255,255,.16)}
.btn.lg{height:54px;padding:0 28px;font-size:15px}
.btn.md{height:44px;padding:0 18px;font-size:14px}
.btn .pi{width:15px;height:15px;fill:#fff;stroke:none}

/* ── the scorebug (incumbent .lp-bug, renamed) ─────────────────────────
   Built by SK.bug.mount() in data.js. `--bug-h` scales the whole thing; every
   inner size is expressed in em off it, so one variable resizes the bug. */
.sk-bug{--bug-h:64px;font-size:calc(var(--bug-h) / 4);display:inline-flex;align-items:stretch;height:var(--bug-h);border-radius:.75em;overflow:hidden;
  position:relative;color:#fff;white-space:nowrap;
  background:linear-gradient(180deg,rgba(20,19,24,.82),rgba(10,9,13,.92));-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 1.6em 3.75em -1.1em rgba(0,0,0,.8),inset 0 0 0 1px rgba(255,255,255,.12)}
.sk-bug .side{display:flex;align-items:center;gap:.56em;padding:0 .875em}
.sk-bug .side.a{flex-direction:row-reverse}
.sk-bug .cr{width:2em;height:2em;border-radius:.5em;flex:none;overflow:hidden}
.sk-bug .cr svg{width:100%;height:100%;display:block}
.sk-bug .nm{font-family:var(--cond);font-weight:700;font-size:1.0625em;letter-spacing:.04em;text-transform:uppercase}
.sk-bug .sc{display:flex;align-items:center;gap:.33em;padding:0 .5em;background:rgba(0,0,0,.32);font-family:var(--cond);font-weight:700;font-size:1.875em}
.sk-bug .sc .dash{color:#6a7089;font-size:.66em}
/* each score digit sits in a 1-line window so a goal can roll the new number up */
.sk-bug .dg{display:inline-block;height:1.1em;line-height:1.1em;overflow:hidden;min-width:.56em;text-align:center}
.sk-bug .dg>span{display:block;transition:transform var(--t-move) var(--ease)}
.sk-bug .dg.roll>span{transform:translateY(-1.1em)}
.sk-bug .ck{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.06em;padding:0 .94em;background:rgba(0,0,0,.44);border-left:1px solid rgba(255,255,255,.1);min-width:5.25em}
.sk-bug .ck .p{display:flex;align-items:center;gap:.3em;font-family:var(--cond);font-size:.69em;font-weight:700;letter-spacing:.12em;color:var(--live)}
.sk-bug .ck .p i{width:.45em;height:.45em;border-radius:50%;background:var(--live);box-shadow:0 0 .6em .08em var(--live)}
.sk-bug .ck .tm{font-family:var(--cond);font-weight:700;font-size:1.31em;line-height:1}
/* goal: a red sheet sweeps across the bug on the brand slant, once */
.sk-bug::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(100deg,transparent 0 30%,rgba(240,36,47,.0) 30%,rgba(240,36,47,.55) 46%,rgba(255,255,255,.5) 50%,rgba(240,36,47,.55) 54%,transparent 70%);
  transform:translateX(-110%)}
.sk-bug.flash::after{animation:skBugFlash 900ms var(--ease) 1}
@keyframes skBugFlash{0%{opacity:1;transform:translateX(-110%)}100%{opacity:1;transform:translateX(110%)}}

/* Motion is switched by <html data-motion>, set in data.js - never by a media
   query (see the motion policy at the top of data.js). */
html[data-motion="off"] .sk-bug .dg>span{transition:none}
html[data-motion="off"] .sk-bug.flash::after{animation:none}
html[data-motion="off"] .btn{transition:none}

/* ── onair.css ── */
/* ScoreKeeper landing — ticket ONAIR: the on-air graphics kit and the phone demo.
   Loads after tokens.css. Everything is prefixed sk-.

   Scale: every on-air graphic is drawn in em off its own root, where 1em = 16px
   is the product at scale 1 (a 56px lower third, a 64px scorebug, a 24px LIVE
   bug). A host sets one font-size (usually in cqw) and the graphic follows.

   Motion: only transform, opacity, clip-path and filter are animated. The three
   levels come from <html data-motion> (data.js), never from a media query:
   full = as authored; calm = the broadcast still plays but slide and drop travel
   about 20px instead of across the frame; off = static, JS adds .is-static.
   --sk-seek is how a ?t= frame is drawn: every delay subtracts it and the
   animation is held paused, so the graphic shows exactly that moment. */

/* ═══════════════════════════════════════════════════════════════════════
   1 · LOWER THIRDS — goal, card, substitution on one chassis
   ═══════════════════════════════════════════════════════════════════════ */
.sk-lt-slot{display:flex;width:100%;pointer-events:none}
.sk-lt-slot--right{justify-content:flex-end}

.sk-lt{--sk-lt-club:#E3132C;--sk-lt-accent:#F4F6FA;--sk-seek:0s;--sk-d0:calc(0s - var(--sk-seek));
  /* In the product, Drop is the one entrance that overshoots and settles
     (bannerAnimations.ts, skbDrop: a back-out curve, y2 = 1.56). This page bans
     overshoot (SPEC 3), so here it falls and settles on the house curve; put the
     product curve in this variable to get the overshoot back. */
  --sk-lt-drop-ease:var(--ease);
  position:relative;display:inline-flex;align-items:stretch;height:3.5em;max-width:100%;
  border-radius:.6em;overflow:hidden;color:#fff;white-space:nowrap;font-family:var(--cond);
  font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,rgba(20,19,24,.94),rgba(10,9,13,.97));
  box-shadow:0 1.1em 2.5em -.9em rgba(0,0,0,.75),inset 0 0 0 1px rgba(255,255,255,.1)}

/* the club block: says whose event it is */
.sk-lt-crest{flex:none;width:3.625em;display:grid;place-items:center;overflow:hidden;
  background:linear-gradient(160deg,var(--sk-lt-club),rgba(0,0,0,.55))}
.sk-lt-badge{display:block;width:2.125em;height:2.125em}
.sk-lt-badge svg{display:block;width:100%;height:100%}

.sk-lt-body{display:flex;align-items:center;gap:.875em;padding:0 1.125em;min-width:0}
.sk-lt--goal .sk-lt-body{padding-left:0}
.sk-lt-lines{display:flex;flex-direction:column;justify-content:center;gap:.2em;min-width:0}

/* GOAL — a red slab, full height, its trailing edge on the brand slant */
.sk-lt-tag{position:relative;align-self:stretch;display:flex;align-items:center;flex:none;
  padding:0 1.5em 0 1em;isolation:isolate}
.sk-lt-tag::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(145deg,var(--redb),var(--red2));
  clip-path:polygon(0 0,100% 0,calc(100% - .744em) 100%,0 100%)}
.sk-lt-tag b{font-style:italic;font-weight:700;font-size:1.625em;line-height:1;letter-spacing:.04em;text-transform:uppercase}

.sk-lt-l1{display:flex;align-items:center;font-weight:700;font-size:1.125em;line-height:1.1;letter-spacing:.03em;text-transform:uppercase}
.sk-lt-name{overflow:hidden;text-overflow:ellipsis}
.sk-lt-no{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:1.75em;height:1.42em;
  padding:0 .4em;margin-right:.6em;border-radius:.33em;background:rgba(255,255,255,.16);
  font-style:normal;font-weight:700;font-size:.667em;letter-spacing:.02em}
.sk-lt-min{flex:none;margin-left:.55em;font-size:.84em;font-weight:700;color:var(--sk-lt-accent)}
.sk-lt-l2{font-weight:600;font-size:.6875em;line-height:1.1;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);
  overflow:hidden;text-overflow:ellipsis}
.sk-lt-l2 em{font-style:normal;color:var(--faint);margin-right:.5em}

.sk-lt-kick{flex:none;font-weight:700;font-size:.75em;line-height:1;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.sk-lt-kick .sk-lt-min{font-size:1em;margin-left:.5em}

/* the card is a drawn card, tipped onto the slant */
.sk-lt-card{flex:none;width:1.375em;height:1.875em;border-radius:.2em;transform:rotate(12deg);
  background:linear-gradient(160deg,#F7D03C,#D6A400);box-shadow:0 .4em .9em -.25em rgba(0,0,0,.7)}
.sk-lt-card--red{background:linear-gradient(160deg,var(--redb),var(--red2))}

/* substitution: on above, off below, each with a drawn arrow */
.sk-lt-sub{display:flex;align-items:center;font-weight:700;font-size:.9375em;line-height:1.05;letter-spacing:.03em;text-transform:uppercase}
.sk-lt-sub svg{flex:none;width:.74em;height:.74em;margin-right:.5em}
.sk-lt-sub .sk-lt-no{font-size:.73em;margin-right:.5em}
.sk-lt-sub--on svg{fill:var(--live)}
.sk-lt-sub--off{color:var(--mut)}
.sk-lt-sub--off svg{fill:var(--redb)}

/* ── entrances and their exits ───────────────────────────────────────────
   The wipe polygons run well outside the box so the shadow of the bar is never
   clipped once it has settled; the leading edge keeps the 12° lean all the
   way across. */
@keyframes skLtWipe{
  from{clip-path:polygon(-4em -2em,-2.2em -2em,-4em calc(100% + 3em),-4em calc(100% + 3em))}
  to{clip-path:polygon(-4em -2em,calc(100% + 4.8em) -2em,calc(100% + 3em) calc(100% + 3em),-4em calc(100% + 3em))}}
@keyframes skLtWipeOut{
  from{clip-path:polygon(-2.2em -2em,calc(100% + 5em) -2em,calc(100% + 5em) calc(100% + 3em),-4em calc(100% + 3em))}
  to{clip-path:polygon(calc(100% + 4.8em) -2em,calc(100% + 5em) -2em,calc(100% + 5em) calc(100% + 3em),calc(100% + 3em) calc(100% + 3em))}}
@keyframes skLtSlideL{from{opacity:0;transform:translateX(-40%)}to{opacity:1;transform:none}}
@keyframes skLtSlideLOut{to{opacity:0;transform:translateX(-24%)}}
@keyframes skLtSlideR{from{opacity:0;transform:translateX(40%)}to{opacity:1;transform:none}}
@keyframes skLtSlideROut{to{opacity:0;transform:translateX(24%)}}
@keyframes skLtDrop{from{opacity:0;transform:translateY(-130%)}to{opacity:1;transform:none}}
@keyframes skLtDropOut{to{opacity:0;transform:translateY(-70%)}}
@keyframes skLtCrest{from{transform:translateX(-170%)}to{transform:none}}
/* a piece of text wipes on with the same lean; --ps is that lean across the height of the piece */
@keyframes skLtPiece{
  from{clip-path:polygon(-.4em -.5em,-.4em -.5em,calc(-.4em - var(--ps)) calc(100% + .5em),-.4em calc(100% + .5em));transform:translateX(-.7em)}
  to{clip-path:polygon(-.4em -.5em,calc(100% + 1.4em + var(--ps)) -.5em,calc(100% + 1.4em) calc(100% + .5em),-.4em calc(100% + .5em));transform:none}}
.sk-lt-p{--ps:.5em}
.sk-lt-tag{--ps:.96em}
.sk-lt-cardw{--ps:.7em;flex:none;display:flex;padding:.3em .25em}

.sk-lt.in.sk-lt-e-wipe{animation:skLtWipe .64s var(--ease) var(--sk-d0) both}
.sk-lt.out.sk-lt-e-wipe{animation:skLtWipeOut .32s var(--ease-exit) var(--sk-d0) both}

.sk-lt.in.sk-lt-e-slide{animation:skLtSlideL .56s var(--ease) var(--sk-d0) both}
.sk-lt.out.sk-lt-e-slide{animation:skLtSlideLOut .28s var(--ease-exit) var(--sk-d0) both}
.sk-lt-slot--right .sk-lt.in.sk-lt-e-slide{animation-name:skLtSlideR}
.sk-lt-slot--right .sk-lt.out.sk-lt-e-slide{animation-name:skLtSlideROut}

.sk-lt.in.sk-lt-e-drop{animation:skLtDrop .56s var(--sk-lt-drop-ease) var(--sk-d0) both}
.sk-lt.out.sk-lt-e-drop{animation:skLtDropOut .28s var(--ease-exit) var(--sk-d0) both}

/* calm: the same bars, but nothing travels further than about 20px */
@keyframes skLtSlideLCalm{from{opacity:0;transform:translateX(-22px)}to{opacity:1;transform:none}}
@keyframes skLtSlideLOutCalm{to{opacity:0;transform:translateX(-14px)}}
@keyframes skLtSlideRCalm{from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:none}}
@keyframes skLtSlideROutCalm{to{opacity:0;transform:translateX(14px)}}
@keyframes skLtDropCalm{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:none}}
@keyframes skLtDropOutCalm{to{opacity:0;transform:translateY(-12px)}}
html[data-motion="calm"] .sk-lt.in.sk-lt-e-slide{animation-name:skLtSlideLCalm}
html[data-motion="calm"] .sk-lt.out.sk-lt-e-slide{animation-name:skLtSlideLOutCalm}
html[data-motion="calm"] .sk-lt-slot--right .sk-lt.in.sk-lt-e-slide{animation-name:skLtSlideRCalm}
html[data-motion="calm"] .sk-lt-slot--right .sk-lt.out.sk-lt-e-slide{animation-name:skLtSlideROutCalm}
html[data-motion="calm"] .sk-lt.in.sk-lt-e-drop{animation-name:skLtDropCalm}
html[data-motion="calm"] .sk-lt.out.sk-lt-e-drop{animation-name:skLtDropOutCalm}

/* staged — the produced one: the plate wipes on, the crest rides in behind
   the wipe, then each piece of text wipes on in turn */
.sk-lt.in.sk-lt-e-staged{animation:skLtWipe .48s var(--ease) var(--sk-d0) both}
.sk-lt.in.sk-lt-e-staged .sk-lt-badge{animation:skLtCrest .5s var(--ease) var(--sk-d0) both}
.sk-lt.in.sk-lt-e-staged .sk-lt-p{animation:skLtPiece .42s var(--ease) calc(.26s + var(--i,0) * .11s - var(--sk-seek)) both}
.sk-lt.out.sk-lt-e-staged{animation:skLtWipeOut .3s var(--ease-exit) var(--sk-d0) both}

.sk-lt.is-frozen,.sk-lt.is-frozen *{animation-play-state:paused!important}
/* calm: the crest is simply uncovered by the wipe instead of riding in */
html[data-motion="calm"] .sk-lt.in.sk-lt-e-staged .sk-lt-badge{animation:none}
.sk-lt.is-static,.sk-lt.is-static *,html[data-motion="off"] .sk-lt,html[data-motion="off"] .sk-lt *{animation:none!important}

/* ═══════════════════════════════════════════════════════════════════════
   2 · CORNER BUG — LIVE (the product ships this as the "broadcast slab")
   ═══════════════════════════════════════════════════════════════════════ */
.sk-cb{display:inline-flex;visibility:hidden;vertical-align:top;filter:drop-shadow(0 .3em .5em rgba(0,0,0,.45))}
.sk-cb.on,.sk-cb.off{visibility:visible}
.sk-cb-wipe{display:inline-flex}
.sk-cb-slab{display:inline-flex;align-items:center;gap:.4em;height:1.5em;padding:0 1em 0 .6875em;
  background:var(--red);color:#fff;white-space:nowrap;
  clip-path:polygon(0 0,100% 0,calc(100% - .32em) 100%,0 100%)}
.sk-cb-slab b{font-family:var(--cond);font-weight:700;font-size:.6875em;line-height:1;letter-spacing:.18em;text-transform:uppercase}
.sk-cb-dot{flex:none;width:.4em;height:.4em;border-radius:50%;background:var(--live)}

@keyframes skCbIn{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes skCbOut{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 0 0 100%)}}
/* the tally: two hard blinks as it comes on … */
@keyframes skCbBlink{0%,40%{opacity:.12}20%,60%,100%{opacity:1}}
/* … then it holds, breathing slowly */
@keyframes skCbHold{0%,100%{opacity:1}50%{opacity:.5}}
.sk-cb.on .sk-cb-wipe{animation:skCbIn .46s var(--ease) calc(0s - var(--sk-seek,0s)) both}
.sk-cb.on .sk-cb-dot{animation:skCbBlink .7s steps(1,end) calc(.3s - var(--sk-seek,0s)) 1 backwards,
  skCbHold 2.6s ease-in-out calc(1.4s - var(--sk-seek,0s)) infinite}
.sk-cb.is-frozen *{animation-play-state:paused!important}
.sk-cb.off .sk-cb-wipe{animation:skCbOut .22s var(--ease-exit) both}
.sk-cb.is-away .sk-cb-dot{animation-play-state:paused}
.sk-cb.is-static .sk-cb-wipe,.sk-cb.is-static .sk-cb-dot,html[data-motion="off"] .sk-cb *{animation:none!important}
.sk-cb.is-static.off{visibility:hidden}

/* ═══════════════════════════════════════════════════════════════════════
   3 · SPORT BUGS — the same glass as .sk-bug, one per sport
   ═══════════════════════════════════════════════════════════════════════ */
.sk-sbug{font-size:var(--sk-sbug-fs,16px);display:inline-flex;flex-direction:column;align-items:stretch;width:max-content;
  vertical-align:top;color:#fff;white-space:nowrap;font-family:var(--cond);font-variant-numeric:tabular-nums}
.sk-sbug .sk-bug{--bug-h:4em;display:flex}
.sk-sbug .sk-bug .side{flex:1 1 auto;justify-content:center}
.sk-sbug--soccer .sk-bug .side{justify-content:flex-start}

/* a club without a crest: a block of its colour with its three letters */
.sk-sbug .sk-bug .sk-sb-blk{width:auto;min-width:2.9em;height:2em;padding:0 .45em;display:flex;align-items:center;justify-content:center;
  border-radius:.4em;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);
  font-weight:700;font-size:1em;letter-spacing:.06em;line-height:1}
.sk-sb-n{display:inline-block;min-width:1.12em;text-align:center}
.sk-sb-n.is-1{min-width:.6em}

/* countdown clocks are m:ss, so the clock cell can be narrower than the soccer one */
.sk-sbug .sk-bug .ck{min-width:4.6em}

/* an extra cell on the right of the bug: shot clock, play clock, inning … */
.sk-sb-cell{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.14em;flex:none;
  padding:0 .8em;min-width:3.5em;background:rgba(0,0,0,.6);border-left:1px solid rgba(255,255,255,.1)}
.sk-sb-cell .k{font-weight:700;font-size:.625em;line-height:1;letter-spacing:.16em;text-indent:.16em;text-transform:uppercase;color:var(--faint)}
.sk-sb-cell .v{font-weight:700;font-size:1.5em;line-height:.95}
.sk-sb-cell.is-low .v{color:var(--redb)}

/* the strip under the bug: one row, caps, the situation */
.sk-sb-strip{display:flex;align-items:center;gap:.9em;height:1.75em;margin-top:.375em;padding:0 .75em;border-radius:.56em;
  background:linear-gradient(180deg,rgba(20,19,24,.82),rgba(10,9,13,.92));
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
  font-weight:700;font-size:.8125em;letter-spacing:.06em;text-transform:uppercase}
.sk-sb-strip .g{display:flex;align-items:center;gap:.6em}
.sk-sb-strip .g.r{margin-left:auto}
.sk-sb-strip .g.c{margin:0 auto}
.sk-sb-strip .q{color:var(--mut)}
.sk-sb-strip .q b{color:#fff;font-weight:700}
.sk-sb-strip .sep{width:1px;height:.9em;background:rgba(255,255,255,.18);transform:skewX(var(--slant))}

/* chips: the one fact that changes how the next play is read */
.sk-sb-chip{display:inline-flex;align-items:center;gap:.5em;height:1.4em;padding:0 .55em;border-radius:.3em;
  background:var(--tx);color:var(--ink);font-size:.9em;letter-spacing:.1em;line-height:1}
.sk-sb-chip svg{width:.62em;height:.62em;fill:currentColor;flex:none}

/* timeouts: lit bars on the slant, used ones kept as ghosts */
.sk-sb-pips{display:inline-flex;gap:.24em}
.sk-sb-pips i{width:.72em;height:.26em;border-radius:1px;background:rgba(255,255,255,.2);transform:skewX(var(--slant))}
.sk-sb-pips i.on{background:#fff}

/* baseball: inning, diamond, count */
.sk-sb-inn svg{width:.6em;height:.6em;fill:#fff}
.sk-sb-inn .v{font-size:1.25em}
.sk-sb-dia{position:relative;width:2.7em;height:1.95em;flex:none}
.sk-sb-dia i{position:absolute;width:.8em;height:.8em;transform:rotate(45deg);border-radius:.06em;
  box-shadow:inset 0 0 0 .1em rgba(255,255,255,.4)}
.sk-sb-dia i.on{background:#fff;box-shadow:none}
.sk-sb-dia .b2{left:.95em;top:.2em}
.sk-sb-dia .b1{left:1.65em;top:.9em}
.sk-sb-dia .b3{left:.25em;top:.9em}
.sk-sb-cnt{gap:.34em}
.sk-sb-outs{display:inline-flex;gap:.3em}
.sk-sb-outs i{width:.5em;height:.5em;border-radius:50%;box-shadow:inset 0 0 0 .09em rgba(255,255,255,.5)}
.sk-sb-outs i.on{background:#fff;box-shadow:none}

/* tennis: a two-row card, not a bug */
.sk-tn{display:flex;flex-direction:column;width:23em;border-radius:.75em;overflow:hidden;
  background:linear-gradient(180deg,rgba(20,19,24,.82),rgba(10,9,13,.92));
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 1.6em 3.75em -1.1em rgba(0,0,0,.8),inset 0 0 0 1px rgba(255,255,255,.12)}
.sk-tn-r{display:grid;grid-template-columns:1.7em minmax(0,1fr) 3em 3em 4.1em;align-items:stretch;height:2.75em}
.sk-tn-r>*{display:flex;align-items:center;justify-content:center;min-width:0}
.sk-tn-r+.sk-tn-r{border-top:1px solid rgba(255,255,255,.1)}
.sk-tn-r .nm{justify-content:flex-start;font-weight:700;font-size:1.19em;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.sk-tn-r .st{font-weight:700;font-size:1.19em;color:var(--mut);border-left:1px solid rgba(255,255,255,.1)}
.sk-tn-r .gm{font-weight:700;font-size:1.19em;background:rgba(255,255,255,.06);border-left:1px solid rgba(255,255,255,.1)}
.sk-tn-r .pt{font-weight:700;font-size:1.5em}
.sk-tn-r.sk-tn-h{height:1.45em;background:rgba(0,0,0,.4)}
.sk-tn-r.sk-tn-h>*{font-weight:700;font-size:.625em;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);
  background:none;border:0}
.sk-tn-sv i{width:.5em;height:.5em;border-radius:50%;background:#fff;opacity:0;transform:scale(.4);
  transition:opacity var(--t-state) var(--ease),transform var(--t-state) var(--ease)}
.sk-tn-sv.on i{opacity:1;transform:none}
.sk-sbug.is-static .sk-tn-sv i,html[data-motion="off"] .sk-tn-sv i{transition:none}

/* ═══════════════════════════════════════════════════════════════════════
   4 · HOW IT WORKS — phone, signal path, program monitor
   ═══════════════════════════════════════════════════════════════════════ */
.sk-how{position:relative;container-type:inline-size}
.sk-how.is-static *,html[data-motion="off"] .sk-how *{transition:none!important}
.sk-how-grid{display:grid;grid-template-columns:min(360px,100%) clamp(150px,18cqw,230px) minmax(0,1fr);align-items:center}
.sk-how-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* ── the phone: a plain dark device ─────────────────────────────────── */
.sk-ph{width:min(360px,100%);border-radius:38px;padding:8px;background:var(--ink3);
  box-shadow:inset 0 0 0 1px var(--line),0 34px 64px -30px #000,0 12px 24px -14px rgba(0,0,0,.8)}
.sk-ph-screen{position:relative;aspect-ratio:390/660;border-radius:30px;overflow:hidden;background:var(--ink);
  container-type:inline-size;font-family:var(--ui);color:#E6E9ED}
/* --u is one px of the real 390-wide deck, so the replica keeps its proportions at any phone width */
.sk-ph-deck{--u:calc(100cqw / 390);position:absolute;inset:0;display:flex;flex-direction:column;
  -webkit-user-select:none;user-select:none}
.sk-ph-deck button{font-family:inherit;color:inherit;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.sk-ph-deck button:focus-visible{outline:2px solid #fff;outline-offset:2px}

.sk-ph-pin{flex:none;position:relative;z-index:3;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(13,13,16,.94),rgba(11,11,13,.8));
  box-shadow:0 calc(18 * var(--u)) calc(44 * var(--u)) calc(-22 * var(--u)) #000}

/* the scorebug, in its full (un-collapsed) state */
.sk-ph-bug{position:relative;height:calc(152 * var(--u));padding:calc(13 * var(--u)) calc(12 * var(--u)) calc(12 * var(--u));
  display:flex;flex-direction:column}
.sk-ph-row{flex:none;height:calc(38 * var(--u));display:flex;align-items:center;gap:calc(9 * var(--u));
  border-radius:calc(12 * var(--u));padding:0 calc(10 * var(--u));
  background:linear-gradient(180deg,rgba(16,16,20,.94),rgba(6,6,9,.97));
  box-shadow:0 calc(16 * var(--u)) calc(40 * var(--u)) calc(-16 * var(--u)) #000,inset 0 1px 0 rgba(255,255,255,.08)}
.sk-ph-cr{flex:none;width:calc(26 * var(--u));height:calc(26 * var(--u))}
.sk-ph-cr svg{width:100%;height:100%}
.sk-ph-abbr{font-family:var(--cond);font-weight:700;font-size:calc(16 * var(--u));letter-spacing:.06em;color:#F0F1F3}
.sk-ph-ps{margin:0 auto;display:flex;align-items:center;gap:calc(7 * var(--u));padding:0 calc(12 * var(--u));
  height:calc(26 * var(--u));border-radius:calc(8 * var(--u));background:rgba(0,0,0,.36)}
.sk-ph-ps b{font-family:var(--cond);font-weight:700;font-size:calc(24 * var(--u));line-height:1;color:#fff;
  font-variant-numeric:tabular-nums;min-width:calc(12 * var(--u));text-align:center}
.sk-ph-ps span{color:#616772;font-size:calc(14 * var(--u));line-height:1}
.sk-ph-clockline{flex:none;height:calc(44 * var(--u));margin-top:calc(9 * var(--u));display:flex;align-items:center;justify-content:center}
.sk-ph-clock{font-family:var(--cond);font-weight:700;font-size:calc(42 * var(--u));line-height:1;letter-spacing:.01em;color:var(--tx);
  font-variant-numeric:tabular-nums}
.sk-ph-meta{flex:none;height:calc(13 * var(--u));margin-top:calc(7 * var(--u));display:flex;align-items:center;justify-content:center;
  gap:calc(7 * var(--u));font-family:var(--cond);font-weight:600;font-size:calc(11 * var(--u));line-height:1;letter-spacing:.19em;color:#9BA1AD}
.sk-ph-dot{width:calc(5 * var(--u));height:calc(5 * var(--u));border-radius:50%;background:var(--live);flex:none}
.sk-ph-dot.off{background:#4a4f5b}
.sk-ph-comp{flex:none;height:calc(14 * var(--u));margin-top:calc(2 * var(--u));text-align:center;font-weight:700;
  font-size:calc(10 * var(--u));line-height:calc(14 * var(--u));letter-spacing:.19em;text-transform:uppercase;color:#7C8391;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* start / pause. Drawn at the 44 design px of the deck; the ::after pads the target to 56 real px */
.sk-ph-transport{position:absolute;right:calc(12 * var(--u));top:calc(60 * var(--u));width:calc(44 * var(--u));height:calc(44 * var(--u));
  padding:0;border-radius:calc(13 * var(--u));cursor:pointer;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);background:rgba(255,255,255,.075);color:var(--tx);transition:transform .12s var(--ease)}
.sk-ph-transport::after{content:"";position:absolute;left:50%;top:50%;width:56px;height:56px;transform:translate(-50%,-50%)}
.sk-ph-transport svg{width:calc(20 * var(--u));height:calc(20 * var(--u));stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.sk-ph-transport .pl{fill:currentColor;stroke:none}
.sk-ph-transport:active{transform:scale(.94)}

/* the scoring bar: never collapses, one big button per club */
.sk-ph-scoring{flex:none;padding:calc(6 * var(--u)) calc(12 * var(--u));display:grid;grid-template-columns:1fr 1fr;gap:calc(9 * var(--u))}
.sk-ph-side{position:relative;min-width:0}
.sk-ph-add{--club:#E3132C;width:100%;height:calc(72 * var(--u));min-height:56px;padding:0;border-radius:calc(15 * var(--u));cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(2 * var(--u));
  border:1px solid rgba(255,255,255,.26);background:rgba(255,255,255,.07);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1);
  transition:transform .12s var(--ease),filter .14s var(--ease)}
@supports (background:color-mix(in srgb,red 50%,transparent)){
  .sk-ph-add{background:linear-gradient(180deg,color-mix(in srgb,var(--club) 78%,transparent),color-mix(in srgb,var(--club) 46%,transparent));
    border-color:color-mix(in srgb,var(--club) 52%,#fff 48%);color:color-mix(in srgb,var(--club) 16%,#fff)}
}
.sk-ph-add .sk-ph-cr{width:calc(30 * var(--u));height:calc(30 * var(--u))}
.sk-ph-add .pl{font-family:var(--cond);font-weight:700;font-size:calc(26 * var(--u));line-height:.9;letter-spacing:.02em}
.sk-ph-add:active,.sk-ph-add.is-press{transform:scale(.955);filter:brightness(1.5)}
.sk-ph-minus{position:absolute;top:calc(2 * var(--u));right:calc(2 * var(--u));width:calc(44 * var(--u));height:calc(44 * var(--u));
  padding:0;border-radius:50%;border:1px solid var(--line);background:#14161c;color:#B4BAC5;cursor:pointer;z-index:2;
  display:flex;align-items:center;justify-content:center;box-shadow:0 4px 10px -2px rgba(0,0,0,.7);
  transition:transform .12s var(--ease),filter .14s var(--ease)}
/* 56 real px of target, grown outward into the gutters so it takes as little of the + as possible */
.sk-ph-minus::after{content:"";position:absolute;right:-8px;top:-8px;width:56px;height:56px;border-radius:50%}
.sk-ph-minus svg{width:calc(16 * var(--u));height:calc(16 * var(--u));stroke:currentColor;stroke-width:2.6;stroke-linecap:round;fill:none}
.sk-ph-minus:active,.sk-ph-minus.is-press{transform:scale(.92);filter:brightness(1.6)}

/* the body of the Score tab — a picture of the deck under the fold, not a control */
.sk-ph-body{flex:1;min-height:0;overflow:hidden;padding:calc(14 * var(--u)) calc(12 * var(--u)) 0}
.sk-ph-card{border-radius:calc(12 * var(--u));border:1px solid var(--line);background:rgba(255,255,255,.045);
  padding:calc(18 * var(--u)) calc(18 * var(--u)) calc(24 * var(--u))}
.sk-ph-card svg{stroke:currentColor;stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round}
.sk-ph-hd{display:flex;align-items:center;gap:calc(10 * var(--u));font-weight:700;font-size:calc(15 * var(--u));color:var(--tx)}
.sk-ph-hd i{width:calc(30 * var(--u));height:calc(30 * var(--u));border-radius:calc(8 * var(--u));border:1px solid var(--line);
  background:rgba(255,255,255,.05);display:grid;place-items:center}
.sk-ph-hd svg{width:calc(17 * var(--u));height:calc(17 * var(--u))}
.sk-ph-sub{margin:calc(17 * var(--u)) 0 calc(9 * var(--u));font-weight:700;font-size:calc(10 * var(--u));line-height:1;letter-spacing:.17em;
  text-transform:uppercase;color:#8E939C}
.sk-ph-chips{display:grid;grid-template-columns:repeat(5,1fr);gap:calc(7 * var(--u))}
.sk-ph-chips span{height:calc(44 * var(--u));border-radius:calc(22 * var(--u));border:1px solid var(--line);background:rgba(255,255,255,.045);
  display:flex;align-items:center;justify-content:center;gap:calc(5 * var(--u));font-weight:700;font-size:calc(13 * var(--u));color:#9BA1AD}
.sk-ph-chips span.on{border-color:rgba(255,255,255,.42);background:rgba(255,255,255,.1);color:#fff}
.sk-ph-chips span.on::before{content:"";width:calc(5 * var(--u));height:calc(5 * var(--u));border-radius:50%;background:var(--live)}
.sk-ph-step{margin-top:calc(14 * var(--u));display:grid;grid-template-columns:calc(46 * var(--u)) 1fr calc(46 * var(--u));align-items:center}
.sk-ph-step i{height:calc(54 * var(--u));border-radius:calc(12 * var(--u));border:1px solid var(--line);background:rgba(255,255,255,.045);
  display:grid;place-items:center;color:var(--tx)}
.sk-ph-step i svg{width:calc(16 * var(--u));height:calc(16 * var(--u));stroke-width:2.2}
.sk-ph-step div{text-align:center}
.sk-ph-step b{display:block;font-family:var(--cond);font-weight:700;font-size:calc(25 * var(--u));line-height:1;color:var(--tx)}
.sk-ph-step small{display:block;margin-top:calc(5 * var(--u));font-weight:700;font-size:calc(9 * var(--u));line-height:1;letter-spacing:.18em;color:#7C8391}
.sk-ph-tiles{display:grid;grid-template-columns:1fr 1fr;gap:calc(9 * var(--u))}
.sk-ph-tiles span{height:calc(46 * var(--u));border-radius:calc(12 * var(--u));border:1px solid var(--line);background:rgba(255,255,255,.045);
  display:flex;align-items:center;gap:calc(9 * var(--u));padding:0 calc(13 * var(--u));font-weight:700;font-size:calc(14 * var(--u));color:#9BA1AD}
.sk-ph-tiles svg{width:calc(17 * var(--u));height:calc(17 * var(--u));flex:none}
.sk-ph-tiles em{margin-left:auto;font-style:normal;font-size:calc(9.5 * var(--u));letter-spacing:.12em;color:#6c727d}
.sk-ph-tiles span.on{border-color:rgba(255,255,255,.42);background:rgba(255,255,255,.1);color:#fff}
.sk-ph-tiles span.on em{color:#fff}

/* the tab rail */
.sk-ph-rail{flex:none;position:relative;z-index:3;display:flex;padding:0 calc(4 * var(--u)) calc(9 * var(--u));
  border-top:1px solid var(--line);background:linear-gradient(180deg,rgba(11,11,13,.9),rgba(11,11,13,.99))}
.sk-ph-tab{flex:1;position:relative;min-height:calc(56 * var(--u));padding-top:calc(11 * var(--u));display:flex;flex-direction:column;
  align-items:center;gap:calc(5 * var(--u));color:#8E939C}
.sk-ph-tab svg{width:calc(22 * var(--u));height:calc(22 * var(--u));stroke:currentColor;stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round}
.sk-ph-tab b{font-weight:700;font-size:calc(10.5 * var(--u));line-height:1;letter-spacing:.03em}
.sk-ph-tab.on{color:#F0F1F3}
.sk-ph-tab.on::before{content:"";position:absolute;top:-1px;left:24%;right:24%;height:calc(3 * var(--u));
  border-radius:0 0 calc(4 * var(--u)) calc(4 * var(--u));background:var(--red)}

/* where the scripted "finger" lands */
.sk-ph-ring{position:absolute;left:0;top:0;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;z-index:6;pointer-events:none;
  background:rgba(255,255,255,.16);box-shadow:inset 0 0 0 2px rgba(255,255,255,.9);opacity:0;will-change:transform,opacity}

/* ── the signal path ─────────────────────────────────────────────────── */
.sk-path{position:relative;height:44px;margin:0 28px}
.sk-path-line{position:absolute;left:0;right:0;top:10px;height:1px;background:rgba(255,255,255,.22)}
.sk-path-stop{position:absolute;top:10px;width:0;height:0}
.sk-path-stop.s0{left:0}.sk-path-stop.s1{left:50%}.sk-path-stop.s2{left:100%}
.sk-path-stop i,.sk-path-stop u{position:absolute;left:-4.5px;top:-4px;width:9px;height:9px;border-radius:50%}
.sk-path-stop i{background:var(--ink);box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}
.sk-path-stop u{background:#fff;opacity:0;transition:opacity .22s var(--ease)}
.sk-path-stop b{position:absolute;top:15px;left:0;transform:translateX(-50%);font-family:var(--cond);font-weight:600;font-size:12px;line-height:1;
  letter-spacing:.16em;text-transform:uppercase;color:#fff;opacity:.55;transition:opacity .22s var(--ease)}


.sk-path-stop.is-lit u,.sk-path-stop.is-lit b{opacity:1}
.sk-path-run{position:absolute;left:0;right:0;top:10px;height:0;pointer-events:none;transform:translateX(calc(var(--p,0) * 100%));will-change:transform}
.sk-path-run i{position:absolute;left:-4px;top:-3.5px;width:8px;height:8px;border-radius:50%;background:var(--redb)}
/* the tail grows out of the PHONE stop instead of starting behind it */
.sk-path-run i::before{content:"";position:absolute;right:6px;top:3px;width:38px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,rgba(240,36,47,0),var(--redb));
  transform-origin:100% 50%;transform:scaleX(clamp(0,calc(var(--p,0) * 5),1))}

/* ── the program monitor (same family as monitor.css) ────────────────── */
.sk-pgm{border-radius:14px;padding:8px 8px 0;background:var(--ink3);
  box-shadow:inset 0 0 0 1px var(--line),0 30px 60px -32px #000,0 10px 22px -14px rgba(0,0,0,.8)}
.sk-pgm-frame{position:relative;aspect-ratio:16/9;border-radius:7px;overflow:hidden;background:#050506;container-type:inline-size}
/* the camera: the hero photograph (1900x1425) cropped to its pitch - the 1200x675
   window at its bottom-left: far stand, goal, centre circle, running track */
.sk-pgm-frame img{position:absolute;left:0;top:-111.11%;width:158.33%;height:211.11%;max-width:none}
.sk-pgm-frame::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,6,8,.5),rgba(6,6,8,.14) 40%,rgba(6,6,8,.2))}   /* the grade: a layer, not a filter on the photo */
.sk-pgm .sk-pgm-bug{--bug-h:max(6.6cqw,34px);position:absolute;left:4cqw;top:4cqw;z-index:2}
.sk-pgm-bar{display:flex;align-items:center;gap:8px;height:36px;padding:0 6px 1px;font-family:var(--cond);font-weight:600;font-size:12px;line-height:1;
  letter-spacing:.14em;color:var(--faint);font-variant-numeric:tabular-nums}
.sk-pgm-bar i{width:7px;height:7px;border-radius:50%;background:var(--red)}
.sk-pgm-bar b{font-weight:700;color:var(--tx)}
.sk-pgm-bar span{margin-left:auto}

/* the goal sweep held on one frame for a ?t= capture */
.sk-how .sk-bug.is-flash-hold::after{animation:skBugFlash 900ms var(--ease) 1 both paused;animation-delay:var(--sk-seek,0s)}

/* ── stacked: phone, path, monitor ───────────────────────────────────── */
@container (max-width:760px){
  .sk-how-grid{grid-template-columns:minmax(0,1fr);justify-items:center}
  .sk-how-phone{width:100%;display:flex;justify-content:center}
  .sk-how-mon{width:100%}
  .sk-path{width:100%;height:116px;margin:18px 0 20px}
  .sk-path-line{left:50%;right:auto;top:0;bottom:0;width:1px;height:auto}
  .sk-path-stop,.sk-path-stop.s0,.sk-path-stop.s1,.sk-path-stop.s2{left:50%;top:0}
  .sk-path-stop.s1{top:50%}.sk-path-stop.s2{top:100%}
  .sk-path-stop i,.sk-path-stop u{left:-4px;top:-4.5px}
  .sk-path-stop b,.sk-path-stop.s0 b,.sk-path-stop.s2 b{left:16px;top:-6px;transform:none;margin:0}
  .sk-path-run{left:50%;right:auto;top:0;bottom:0;width:0;height:auto;transform:translateY(calc(var(--p,0) * 100%))}
  .sk-path-run i{left:-3.5px;top:-4px}
  .sk-path-run i::before{right:auto;left:3px;top:auto;bottom:6px;width:2px;height:38px;
    background:linear-gradient(180deg,rgba(240,36,47,0),var(--redb));
    transform-origin:50% 100%;transform:scaleY(clamp(0,calc(var(--p,0) * 3),1))}
}


/* ── monitor.css ── */
/* ScoreKeeper landing — program monitor and match-stats panel (ticket LP1-MONITOR).
   Loads after tokens.css. Everything inside the 16:9 frame is sized in cqw, so the
   picture scales with the monitor; small type carries a 9 px floor (max(…, 9px)) so
   it stays readable on a narrow monitor, and below a 480 px monitor the graphics
   step up and shed their tertiary labels (the last block of each section).

   Motion: there is no CSS animation or transition in this file. monitor.js writes
   transform, opacity and clip-path per frame from one clock and reads the motion
   level (full / calm / off) from SK.motion, so nothing here needs a media query. */

/* ── the monitor: bezel, frame, label strip ─────────────────────────── */
.sk-mon{position:relative;container-type:inline-size;container-name:skmon;
  background:var(--ink3);border:1px solid var(--line);border-radius:14px;padding:8px 8px 0;
  box-shadow:0 36px 64px -32px rgba(0,0,0,.92),0 12px 24px -16px rgba(0,0,0,.7);
  color:var(--tx);font-family:var(--cond);text-align:left}
.sk-mon-frame{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:7px;background:var(--ink2);
  container-type:inline-size;container-name:skframe;isolation:isolate}
/* The camera. The feed is the hero photograph (1900 x 1425) and the camera is its
   pitch: the picture is laid out at twice the frame's width and hung so the frame
   shows x 1-51 %, y 61.5-99 % of it: the goal, the centre circle, the track. */
.sk-mon-feed{position:absolute;inset:0;overflow:hidden}
.sk-mon-feed img{position:absolute;left:-2%;top:-164%;width:200%;height:266.67%;max-width:none;object-fit:cover;
  filter:brightness(.72) saturate(.86) contrast(1.04);transform:scale(1.012);transform-origin:26% 80%}
.sk-mon-grade{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,11,13,.5) 0,rgba(11,11,13,0) 30%,rgba(11,11,13,0) 58%,rgba(11,11,13,.62) 100%)}
.sk-mon-air,.sk-mon-scene{position:absolute;inset:0}
.sk-mon-air{font-family:var(--cond);color:#fff}
.sk-mon-safe{position:absolute;inset:1.9cqw;pointer-events:none;z-index:6}
.sk-mon-safe i{position:absolute;width:1.5cqw;height:1.5cqw;border:0 solid rgba(255,255,255,.22)}
.sk-mon-safe i:nth-child(1){left:0;top:0;border-width:1px 0 0 1px}
.sk-mon-safe i:nth-child(2){right:0;top:0;border-width:1px 1px 0 0}
.sk-mon-safe i:nth-child(3){left:0;bottom:0;border-width:0 0 1px 1px}
.sk-mon-safe i:nth-child(4){right:0;bottom:0;border-width:0 1px 1px 0}

.sk-mon-strip{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:14px;
  height:36px;padding:0 6px 1px;font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);white-space:nowrap;line-height:1}
.sk-mon-l{display:flex;align-items:center;gap:8px;min-width:0}
.sk-mon-lamp{width:7px;height:7px;border-radius:50%;background:var(--red);flex:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.sk-mon-pgm{color:var(--tx);font-weight:700;flex:none}
.sk-mon-cap{display:flex;align-items:center;gap:7px;min-width:0;overflow:hidden}
.sk-mon-cap::before{content:"";width:1px;height:12px;margin:0 3px 0 4px;background:rgba(255,255,255,.22);
  transform:skewX(var(--slant));flex:none}
.sk-mon-cap:empty{display:none}
.sk-mon-cap i{font-style:normal}
.sk-mon-cap b{font-weight:700;color:var(--tx);overflow:hidden;text-overflow:ellipsis}
.sk-mon-src{justify-self:center}
.sk-mon-tc{justify-self:end;font-variant-numeric:tabular-nums;letter-spacing:.09em;color:var(--mut)}
@container skmon (max-width:600px){
  .sk-mon-strip{grid-template-columns:minmax(0,1fr) auto;gap:10px;height:32px;font-size:11px;padding:0 4px 1px}
  .sk-mon-src{display:none}
  .sk-mon-cap i{display:none}
}

/* ── placement inside the frame ─────────────────────────────────────── */
.sk-mon-anch{position:absolute;display:flex}
.sk-mon-anch.sk-tl{left:4cqw;top:4cqw}
.sk-mon-anch.sk-tr{right:4cqw;top:4cqw;justify-content:flex-end}
.sk-mon-anch.sk-bl{left:4cqw;bottom:4cqw;align-items:flex-end}
.sk-mon-anch.sk-br{right:4cqw;bottom:4cqw;align-items:flex-end;justify-content:flex-end}
.sk-mon-p{--sl:1.8cqw}
.sk-mon .sk-bug{--bug-h:8.4cqw}
.sk-mon-s-lowerthirds .sk-bug,.sk-mon-s-network .sk-bug{--bug-h:6.6cqw}
.sk-mon .sk-bug .ck .p{font-size:max(.69em,9px)}

/* ── scorebug styles (replicas of src/lib/overlayStyles.ts; 1em = 16 design px) ── */
.sk-bgx{font-family:var(--cond);font-weight:700;color:#fff;white-space:nowrap;text-transform:uppercase;
  font-variant-numeric:tabular-nums;line-height:1.15}
.sk-bgx .sk-cr{flex:none;display:block}
.sk-bgx .sk-cr svg{width:100%;height:100%;display:block}
.sk-bgx .sk-pd{color:var(--live)}
.sk-bgx .sk-tm{color:#fff}

/* Ledger: layout "stacked", crest inline, clock in a footer */
.sk-bgl{font-size:2.1cqw;display:inline-flex;flex-direction:column;min-width:17.5em;border-radius:.625em;overflow:hidden;
  background:linear-gradient(180deg,rgba(20,19,24,.9),rgba(10,9,13,.95));
  box-shadow:0 1em 1.9em -.7em rgba(0,0,0,.75),inset 0 0 0 1px rgba(255,255,255,.09)}
.sk-bgl .sk-row{position:relative;display:flex;align-items:center;gap:.625em;height:2.625em;padding:0 .8125em}
.sk-bgl .sk-row+.sk-row{border-top:.125em solid rgba(255,255,255,.09)}
.sk-bgl .sk-row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:.25em;background:var(--c)}
.sk-bgl .sk-cr{width:1.75em;height:1.75em}
.sk-bgl .sk-nm{font-size:1em;letter-spacing:.05em}
.sk-bgl .sk-sc{margin-left:auto;padding-left:1.2em;font-size:1.5em;line-height:1}
.sk-bgl .sk-ft{display:flex;align-items:center;justify-content:space-between;gap:.75em;height:2.2em;padding:0 .8125em;
  background:rgba(0,0,0,.45)}
.sk-bgl .sk-pd{font-size:max(.75em,9px);letter-spacing:.12em}
.sk-bgl .sk-tm{font-size:max(.825em,9px)}

/* Colonnade: layout "badge", full club-colour columns, score in each column */
.sk-bgc{font-size:1.9cqw;display:inline-flex;align-items:stretch;height:7.25em;border-radius:.5em;overflow:hidden;
  background:linear-gradient(180deg,rgba(20,19,24,.9),rgba(10,9,13,.95));
  box-shadow:0 1em 1.9em -.7em rgba(0,0,0,.75)}
.sk-bgc .sk-col{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3125em;
  padding:0 1.25em;min-width:6.25em;background:var(--c)}
.sk-bgc .sk-cr{width:2.75em;height:2.75em}
.sk-bgc .sk-nm{font-size:max(.9375em,9px);letter-spacing:.09em;line-height:1;padding-left:.09em}
.sk-bgc .sk-sc{font-size:2.25em;line-height:1}
.sk-bgc .sk-ck{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.125em;
  padding:0 1.125em;min-width:6em;background:rgba(0,0,0,.42);border-left:1px solid rgba(255,255,255,.08)}
.sk-bgc .sk-pd{font-size:max(.625em,9px);letter-spacing:.16em;padding-left:.16em}
.sk-bgc .sk-tm{font-size:1.35em;line-height:1.1}

/* Plinth: crest blocks sitting on a shared score bar */
.sk-bgp{font-size:1.9cqw;display:inline-flex;flex-direction:column;align-items:center;min-width:18.75em}
.sk-bgp .sk-top{display:flex;gap:7em;position:relative;z-index:2}
.sk-bgp .sk-blk{display:flex;flex-direction:column;align-items:center;gap:.25em;padding:.5625em .875em .75em;
  border-radius:.6875em .6875em 0 0;background:var(--c)}
.sk-bgp .sk-cr{width:2.375em;height:2.375em}
.sk-bgp .sk-nm{font-size:max(.75em,9px);letter-spacing:.11em;line-height:1;padding-left:.11em}
.sk-bgp .sk-bar{display:flex;align-items:center;justify-content:center;gap:1.125em;width:100%;height:3.5em;
  border-radius:.6875em;margin-top:-.25em;
  background:linear-gradient(180deg,rgb(22,21,26),rgb(11,10,14));
  box-shadow:0 1em 1.9em -.7em rgba(0,0,0,.75),inset 0 0 0 1px rgba(255,255,255,.09)}
.sk-bgp .sk-sc{font-size:2em;line-height:1}
.sk-bgp .sk-tk{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.125em;
  padding-left:1.125em;border-left:1px solid rgba(255,255,255,.12)}
.sk-bgp .sk-pd{font-size:max(.625em,9px);letter-spacing:.16em;padding-left:.16em}
.sk-bgp .sk-tm{font-size:1.2em;line-height:1.1}

@container skframe (max-width:470px){
  .sk-mon .sk-bug{--bug-h:10.6cqw}
  .sk-mon-s-lowerthirds .sk-bug,.sk-mon-s-network .sk-bug{--bug-h:10.2cqw}
  .sk-bgl{font-size:2.8cqw}
  .sk-bgc{font-size:2.7cqw;height:6.9em}
  .sk-bgc .sk-col{padding:0 .9em;min-width:5.3em}
  .sk-bgc .sk-ck{padding:0 .8em;min-width:5.2em}
  .sk-bgc .sk-cr{width:2.4em;height:2.4em}
  .sk-bgp{font-size:2.7cqw;min-width:17em}
  .sk-bgp .sk-top{gap:6em}
  .sk-bgp .sk-cr{width:2em;height:2em}
  .sk-bgp .sk-blk{padding:.45em .8em .6em}
  .sk-bgp .sk-bar{height:3.2em}
  .sk-bgc .sk-pd,.sk-bgp .sk-pd{letter-spacing:.1em;padding-left:.1em}
}

/* ── lower thirds: host + the built-in fallback bar (1em = 16 design px) ── */
.sk-mon-l3host{position:absolute;left:4cqw;bottom:5cqw;font-size:2.3cqw}
.sk-l3slot{position:absolute;left:0;bottom:0;--sl:1.8cqw}
.sk-l3{display:flex;align-items:stretch;height:3.5em;border-radius:.75em;overflow:hidden;white-space:nowrap;
  font-family:var(--cond);font-weight:700;color:#fff;text-transform:uppercase;line-height:1;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,rgba(20,19,24,.92),rgba(10,9,13,.96));
  box-shadow:0 1.1em 2.5em -.9em rgba(0,0,0,.75),inset 0 0 0 1px rgba(255,255,255,.08)}
.sk-l3-cr{width:3.625em;flex:none;display:grid;place-items:center;background:linear-gradient(160deg,var(--c),rgba(0,0,0,.55))}
.sk-l3-cr span{display:block;width:2em;height:2em}
.sk-l3-cr svg{width:100%;height:100%;display:block}
.sk-l3-b{display:flex;align-items:center;gap:.875em;padding:0 1.25em 0 1.125em}
.sk-l3-goal{font-style:italic;font-size:1.6em;letter-spacing:.04em;color:var(--ac);padding-right:.08em}
.sk-l3-st{display:flex;flex-direction:column;gap:.22em}
.sk-l3-nm{display:flex;align-items:center;font-size:1.125em;letter-spacing:.03em}
.sk-l3-chip{display:inline-flex;align-items:center;justify-content:center;min-width:1.75em;height:1.42em;padding:0 .42em;
  margin-right:.58em;border-radius:.33em;background:rgba(255,255,255,.16);font-size:max(.667em,9px);letter-spacing:.02em}
.sk-l3-min{margin-left:.55em;font-size:.86em;color:var(--mut)}
.sk-l3-sub{font-weight:600;font-size:max(.72em,9px);letter-spacing:.1em;color:var(--mut)}
.sk-l3-sub em{font-style:normal;color:var(--faint);margin-right:.5em}
.sk-l3-k{display:flex;align-items:center;font-size:max(.78em,9px);letter-spacing:.12em;color:var(--mut)}
.sk-l3-card{flex:none;width:1.375em;height:1.875em;border-radius:.19em;transform:rotate(12deg);
  background:linear-gradient(160deg,#F7D03C,#D6A400);box-shadow:0 .375em .875em -.25em rgba(0,0,0,.7)}
.sk-l3-io{display:flex;flex-direction:column;gap:.3em;font-size:.95em;letter-spacing:.03em}
.sk-l3-io span{display:flex;align-items:center}
.sk-l3-io svg{width:.62em;height:.5em;margin-right:.6em;flex:none;fill:currentColor}
.sk-l3-io .sk-off{color:var(--faint)}
.sk-l3-io .sk-off .sk-l3-chip{background:rgba(255,255,255,.09)}

@container skframe (max-width:470px){
  .sk-mon-l3host{font-size:2.9cqw;bottom:4.4cqw}
  .sk-l3-sub{display:none}
  .sk-l3-k{letter-spacing:.07em}
  .sk-l3-b{gap:.7em;padding:0 1em 0 .9em}
  /* The bars themselves come from the on-air kit (onair.css, .sk-lt-*). On a phone-
     sized monitor its smallest labels fall under 9 px, so here, inside this host
     only, the assist line is dropped and the kicker and shirt chips are raised. */
  .sk-mon-l3host .sk-lt-l2{display:none}
  .sk-mon-l3host .sk-lt-kick{font-size:.92em;letter-spacing:.07em}
  .sk-mon-l3host .sk-lt-no{font-size:.82em}
  .sk-mon-l3host .sk-lt-sub .sk-lt-no{font-size:.98em}
  .sk-mon-l3host .sk-lt-body{gap:.7em;padding-right:.9em}
}

/* ── full-frame cards (replicas of src/lib/cardStyles.ts skeleton + two grounds) ── */
.sk-card{position:absolute;inset:0;overflow:hidden;--sl:12.2cqw;font-family:var(--cond);z-index:3}
.sk-card .sk-bg,.sk-card .sk-bg i{position:absolute;inset:0}
.sk-card .sk-bg img{position:absolute;inset:-3%;width:106%;height:106%;max-width:none;object-fit:cover;object-position:50% 34%}
.sk-card .sk-fg{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:2.4cqw;padding:5cqw 6cqw;text-align:center}
.sk-card .sk-hd{font-weight:700;font-size:9.8cqw;line-height:.92;letter-spacing:.01em;text-transform:uppercase;white-space:nowrap;color:#fff}
.sk-card .sk-mid{display:grid;grid-template-columns:minmax(0,1fr) 22cqw auto 22cqw minmax(0,1fr);grid-template-rows:auto auto;
  row-gap:1.4cqw;width:100%;align-items:start}
.sk-card .sk-sh{grid-row:1;justify-self:center;align-self:center;width:14cqw;height:15.4cqw;
  filter:drop-shadow(0 .35cqw .9cqw rgba(0,0,0,.5))}
.sk-card .sk-sh svg{width:100%;height:100%;display:block}
.sk-card .sk-nm{grid-row:2;justify-self:center;font-weight:700;font-size:3.7cqw;line-height:1.02;letter-spacing:.04em;
  text-transform:uppercase;padding-left:.04em;color:#fff}
.sk-card .sk-h{grid-column:2}
.sk-card .sk-a{grid-column:4}
.sk-card .sk-vs{grid-row:1;grid-column:3;align-self:center;justify-self:center;margin:0 2.4cqw;font-weight:700;font-size:4.4cqw;
  letter-spacing:.02em;color:rgba(255,255,255,.9);font-variant-numeric:tabular-nums;white-space:nowrap}
.sk-card.sk-final .sk-vs{font-size:6.4cqw}
.sk-card .sk-meta{display:flex;flex-direction:column;gap:.5cqw;margin-top:.6cqw}
.sk-card .sk-meta span{font-weight:600;font-size:max(2.3cqw,9px);line-height:1.25;letter-spacing:.17em;text-transform:uppercase;
  padding-left:.17em;color:rgba(255,255,255,.82);white-space:nowrap}
.sk-card .sk-meta span.sk-cmp{font-size:max(2.7cqw,10px)}
/* 18 Floodlit: the night bowl under a dark ramp, a thin letter-spaced headline */
.sk-card.sk-k18 .sk-bg{background:#08090C}
.sk-card.sk-k18 .sk-bg img{filter:brightness(.82) saturate(.9)}
.sk-card.sk-k18 .sk-bg i{background:
  radial-gradient(64% 58% at 50% 50%,rgba(5,6,12,.5),rgba(5,6,12,0) 100%),
  linear-gradient(180deg,rgba(5,6,12,.34),rgba(5,6,12,.84) 75%)}
.sk-card.sk-k18 .sk-hd{font-size:6.4cqw;line-height:1;letter-spacing:.18em;padding-left:.18em;color:var(--tx)}
.sk-card.sk-k18 .sk-nm{letter-spacing:.1em;padding-left:.1em;color:var(--tx)}
.sk-card.sk-k18 .sk-vs{font-size:3.6cqw;letter-spacing:.14em;padding-left:.14em;color:var(--mut)}
/* 04 Dark mode: near black, the headline drawn as an outline */
.sk-card.sk-k04 .sk-bg{background:linear-gradient(150deg,#15171C,#08090C 70%)}
.sk-card.sk-k04 .sk-bg i{background:radial-gradient(50% 40% at 50% 20%,rgba(255,255,255,.06),transparent)}
.sk-card.sk-k04 .sk-hd{color:transparent;-webkit-text-stroke:.3cqw rgba(255,255,255,.34);font-style:italic}

@container skframe (max-width:470px){
  .sk-card .sk-meta span{letter-spacing:.1em;padding-left:.1em}
  .sk-card .sk-meta span.sk-cmp{font-size:max(2.9cqw,10px)}
  .sk-card .sk-fg{gap:2cqw}
}

/* ── team sheet (replica of LineupGraphic "split", the Broadcast split layout) ── */
.sk-ts{position:absolute;inset:0;overflow:hidden;color:#fff;font-family:var(--cond);z-index:3}
.sk-ts-scrim{position:absolute;inset:0;
  background:linear-gradient(105deg,rgba(6,6,10,.96) 0%,rgba(6,6,10,.9) 44%,rgba(6,6,10,.55) 72%,rgba(6,6,10,.35) 100%)}
.sk-ts-bar{position:absolute;left:0;top:0;bottom:0;width:.45cqw;background:linear-gradient(180deg,var(--c),var(--ac))}
.sk-ts-col{position:absolute;left:4.4%;top:6.4%;bottom:5.6%;width:37%;display:flex;flex-direction:column}
.sk-ts-hd{display:flex;align-items:center;gap:1.3cqw;margin-bottom:1.25cqw}
.sk-ts-hd .sk-cr{width:5cqw;height:5cqw;flex:none;filter:drop-shadow(0 .3cqw .7cqw rgba(0,0,0,.65))}
.sk-ts-hd .sk-cr svg{width:100%;height:100%;display:block}
.sk-ts-k{display:flex;align-items:center;gap:.7cqw;font-weight:700;font-size:max(1.2cqw,9px);line-height:1;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ac);white-space:nowrap}
.sk-ts-k i{display:block;width:1.1cqw;height:max(1px,.15cqw);background:var(--ac);flex:none}
.sk-ts-team{font-weight:700;font-size:2.55cqw;line-height:1;text-transform:uppercase;margin-top:.45cqw;white-space:nowrap}
.sk-ts-sub{display:none}
.sk-ts-title{font-weight:700;font-size:4.9cqw;line-height:.86;text-transform:uppercase;white-space:nowrap}
.sk-ts-title span{color:transparent;-webkit-text-stroke:.14cqw rgba(255,255,255,.55)}
.sk-ts-rows{flex:1;min-height:0;margin-top:.8cqw;display:flex;flex-direction:column;justify-content:space-evenly}
.sk-ts-row{display:flex;align-items:center;gap:.9cqw;padding:.1cqw 0;border-bottom:1px solid rgba(255,255,255,.08);
  font-weight:700;font-size:2.05cqw;line-height:1.25;text-transform:uppercase;white-space:nowrap}
.sk-ts-row b{color:var(--ac);min-width:1.45em;font-variant-numeric:tabular-nums}
.sk-ts-row em{font-style:normal;margin-left:auto;font-size:max(.76em,9px);letter-spacing:.12em;color:var(--mut)}
.sk-ts-corner{position:absolute;right:10%;top:6.4%;display:flex;flex-direction:column;align-items:flex-end}
.sk-ts-corner .sk-v{font-weight:700;font-size:4.3cqw;line-height:1;margin-top:.45cqw;font-variant-numeric:tabular-nums}
.sk-ts-stage{position:absolute;right:4%;top:20%;width:47%;bottom:14%}
.sk-ts-persp{position:absolute;inset:0;perspective:140cqw}
.sk-ts-tilt{position:absolute;inset:0;transform:rotateX(34deg);transform-origin:50% 66%}
.sk-ts-turf{position:absolute;inset:0;border-radius:.4cqw;overflow:hidden;
  box-shadow:inset 0 0 0 .18cqw rgba(255,255,255,.3),0 2cqw 3cqw -1cqw rgba(0,0,0,.85)}
.sk-ts-turf i{position:absolute;border:.16cqw solid rgba(255,255,255,.3)}
.sk-ts-mks{position:absolute;inset:0}
.sk-ts-mk{position:absolute;left:var(--x);top:var(--y);width:16%;transform:translate(-50%,-50%)}
.sk-ts-mk>span{display:flex;flex-direction:column;align-items:center;gap:.2cqw}
.sk-ts-shirt{display:block;width:var(--w)}
.sk-ts-shirt svg{width:100%;display:block;filter:drop-shadow(0 .32cqw .36cqw rgba(0,0,0,.6))}
.sk-ts-plate{display:flex;align-items:center;gap:.34cqw;white-space:nowrap;background:rgba(6,6,10,.94);border-radius:.3cqw;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);padding:.22cqw .55cqw .22cqw .36cqw;font-weight:700;line-height:1;text-transform:uppercase}
.sk-ts-plate b{color:var(--ac);font-size:max(1.42cqw,9px);min-width:1.05em;text-align:center;font-variant-numeric:tabular-nums}
.sk-ts-plate span{font-size:max(1.34cqw,9px)}
.sk-ts-mgr{position:absolute;right:0;bottom:-10.5%;display:flex;align-items:center;gap:.8cqw;background:rgba(6,6,10,.9);
  border-radius:99px;padding:.45cqw 1.4cqw;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);white-space:nowrap;line-height:1}
.sk-ts-mgr small{font-weight:600;font-size:max(1.1cqw,9px);letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.sk-ts-mgr b{font-weight:700;font-size:max(1.75cqw,11px);text-transform:uppercase}

/* a phone-sized monitor: the pitch and its name plates take the frame; the list goes */
@container skframe (max-width:470px){
  .sk-ts-scrim{background:linear-gradient(180deg,rgba(6,6,10,.95),rgba(6,6,10,.84))}
  .sk-ts-col{left:5%;top:5%;bottom:auto;width:auto}
  .sk-ts-hd{gap:2cqw;margin:0}
  .sk-ts-hd .sk-cr{width:7.6cqw;height:7.6cqw}
  .sk-ts-k,.sk-ts-title,.sk-ts-rows{display:none}
  .sk-ts-team{font-size:3.8cqw;margin:0}
  .sk-ts-sub{display:block;margin-top:.8cqw;font-weight:700;font-size:2.7cqw;line-height:1;letter-spacing:.2em;
    text-transform:uppercase;color:var(--ac);white-space:nowrap}
  .sk-ts-corner{right:5%;top:4.6%}
  .sk-ts-corner .sk-v{font-size:5.4cqw;margin:0}
  .sk-ts-stage{left:5%;right:5%;width:auto;top:28.5%;bottom:3.5%}
  .sk-ts-mk{top:var(--ys)}
  .sk-ts-shirt{width:calc(var(--w) * .58)}
  .sk-ts-plate b{display:none}
  .sk-ts-plate{padding:.3cqw .7cqw}
  .sk-ts-plate span{font-size:2.7cqw}
  .sk-ts-mgr{bottom:auto;top:-7.6cqw;gap:1.1cqw;padding:.55cqw 1.5cqw}
  .sk-ts-mgr small{font-size:2.65cqw;letter-spacing:.1em}
  .sk-ts-mgr b{font-size:2.9cqw}
}

/* ── network furniture: strap, LIVE bug, broadcaster mark, sponsor ticker ── */
.sk-nw-bug{--bug-h:6.6cqw;display:flex;flex-direction:column;align-items:flex-start}
.sk-nw-clip{overflow:hidden;border-radius:calc(var(--bug-h) * .1875) calc(var(--bug-h) * .1875) 0 0}
.sk-nw-strap{display:flex;align-items:center;gap:calc(var(--bug-h) * .1375);height:calc(var(--bug-h) * .45);
  padding:0 calc(var(--bug-h) * .24);font-family:var(--cond);font-weight:700;font-size:max(calc(var(--bug-h) * .22),9px);
  letter-spacing:.16em;text-transform:uppercase;color:var(--mut);white-space:nowrap;line-height:1;
  background:linear-gradient(90deg,rgba(11,11,13,.95),rgba(11,11,13,.74))}
.sk-nw-strap i{display:block;width:calc(var(--bug-h) * .05);height:calc(var(--bug-h) * .2);
  border-radius:calc(var(--bug-h) * .025);background:var(--ac);flex:none}
.sk-nw-strap em{font-style:normal;font-size:max(.84em,9px);letter-spacing:.12em;color:rgba(255,255,255,.62);margin-left:.3em}
.sk-nw-bug .sk-bug{border-top-left-radius:0}
.sk-nw-tr{position:absolute;right:4cqw;top:4cqw;display:flex;flex-direction:column;align-items:flex-end;gap:1.7cqw}
.sk-live{display:inline-flex;align-items:center;gap:.545em;height:2.18em;padding:0 1.4em 0 1em;background:var(--red);
  font-family:var(--cond);font-weight:700;font-size:max(1.9cqw,9px);letter-spacing:.18em;text-transform:uppercase;color:#fff;line-height:1;
  white-space:nowrap;clip-path:polygon(0 0,100% 0,calc(100% - .464em) 100%,0 100%)}
.sk-live i{width:.545em;height:.545em;border-radius:50%;background:var(--live);flex:none}
/* the broadcaster mark: an invented regional production lettermark, white and
   see-through like a station bug. The letters are cut out of a slanted tile. */
.sk-mark{display:flex;flex-direction:column;align-items:center;gap:.55cqw;opacity:.86;color:#fff;line-height:1;font-family:var(--cond);
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.6)) drop-shadow(0 3px 10px rgba(0,0,0,.4))}
.sk-mark svg{display:block;height:4.5cqw;width:auto}
.sk-mark text{font-family:var(--cond);font-style:italic;font-weight:700;font-size:31px}
.sk-mark small{font-weight:700;font-size:max(1.25cqw,9px);letter-spacing:.34em;padding-left:.34em;text-transform:uppercase;white-space:nowrap}
.sk-tick{position:absolute;left:4cqw;right:4cqw;bottom:4cqw;height:5cqw;border-radius:.8cqw;overflow:hidden;display:flex;
  background:linear-gradient(90deg,rgba(8,9,14,.96),rgba(8,9,14,.88));--sl:1.1cqw}
.sk-tick::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.13);pointer-events:none}
.sk-tick-tab{flex:none;display:flex;align-items:center;padding:0 1.5cqw;background:var(--tx);color:var(--ink);
  font-family:var(--cond);font-weight:700;font-size:max(1.35cqw,9px);letter-spacing:.18em;text-transform:uppercase;line-height:1}
.sk-tick-win{flex:1;min-width:0;overflow:hidden;position:relative}
.sk-tick-lane{display:flex;align-items:center;height:100%;width:max-content;white-space:nowrap;color:var(--tx);line-height:1}
.sk-tick-it{flex:none;margin:0 2.3cqw}
.sk-tick-it.v1{font-family:var(--cond);font-weight:700;font-size:2.2cqw;letter-spacing:.06em;text-transform:uppercase}
.sk-tick-it.v2{font-family:var(--ui);font-weight:600;font-size:1.9cqw;letter-spacing:-.01em}
.sk-tick-it.v3{font-family:var(--cond);font-weight:700;font-style:italic;font-size:2.4cqw;letter-spacing:.02em;text-transform:uppercase}
.sk-tick-it.v4{font-family:var(--ui);font-weight:500;font-size:max(1.5cqw,9px);letter-spacing:.24em;text-transform:uppercase}
.sk-tick-sep{flex:none;width:1px;height:1.9cqw;background:rgba(255,255,255,.28);transform:skewX(var(--slant))}

@container skframe (max-width:470px){
  .sk-nw-bug{--bug-h:10.2cqw}
  .sk-nw-strap{height:calc(var(--bug-h) * .5);font-size:max(calc(var(--bug-h) * .27),9px);letter-spacing:.1em}
  .sk-nw-strap em{display:none}
  .sk-live{font-size:2.7cqw;letter-spacing:.12em}
  .sk-mark small{display:none}
  .sk-mark svg{height:6.4cqw}
  .sk-tick{height:6.6cqw}
  .sk-tick-tab{display:none}
  .sk-tick-it{margin:0 2.8cqw}
  .sk-tick-it.v1{font-size:2.9cqw}
  .sk-tick-it.v2{font-size:2.7cqw}
  .sk-tick-it.v3{font-size:3.1cqw}
  .sk-tick-it.v4{font-size:2.65cqw;letter-spacing:.14em}
  .sk-tick-sep{height:2.6cqw}
}

/* ── match-stats panel ────────────────────────────────────────────────
   The product's stats strip (ScoreboardBanner.tsx) carrying the product's own
   numbers: label, bar, numeral. Two techniques ported from 21st.dev (refs/21st.md):
   #6 Leaderboard Bars - one shared axis, grid ticks behind every bar, hairline
   tracks, tick labels under the axis; #3 Sliding Number - one clipped 1ch column
   per digit holding the digits stacked, rolled to its value by monitor.js. */
.sk-stats{container-type:inline-size;container-name:skstats;font-family:var(--cond);color:var(--tx);text-align:left}
.sk-stats-p{border-radius:12px;padding:14px 22px 14px;
  background:linear-gradient(180deg,rgb(22,21,26),rgb(13,12,16));
  box-shadow:0 30px 54px -30px rgba(0,0,0,.85),inset 0 0 0 1px rgba(255,255,255,.08)}
.sk-stats-hd{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:11px;margin-bottom:12px;
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.12);font-weight:700;font-size:12px;line-height:1;letter-spacing:.17em;
  text-transform:uppercase;color:var(--faint);white-space:nowrap}
.sk-stats-hd b{font-weight:700;font-size:14px;letter-spacing:.05em;color:var(--tx)}
.sk-stats-b{position:relative;--lab:200px;--num:40px;--gap:16px;--tkc:rgba(255,255,255,.075)}
.sk-stats-grid{position:absolute;top:-2px;bottom:19px;left:calc(var(--lab) + var(--gap));right:calc(var(--num) + var(--gap));pointer-events:none}
.sk-stats-grid i{position:absolute;top:0;bottom:0;width:1px;margin-left:-.5px;background:var(--tkc)}
.sk-stats-l{position:relative;list-style:none;margin:0;padding:0;display:grid;row-gap:9px}
.sk-stats-r{display:grid;grid-template-columns:var(--lab) minmax(0,1fr) var(--num);align-items:center;column-gap:var(--gap)}
.sk-stats-lb{font-weight:700;font-size:13px;line-height:1.15;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);white-space:nowrap}
.sk-stats-tr{position:relative;display:block;height:16px}
.sk-stats-tr::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;margin-top:-.5px;background:rgba(255,255,255,.16)}
.sk-stats-tr i{position:absolute;left:0;top:5px;height:6px;width:var(--w,0%);transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,#F0242F,#A51119);box-shadow:inset -1px 0 0 rgba(255,255,255,.55)}
.sk-stats-nu{display:flex;justify-content:flex-end;height:1.1em;overflow:hidden;font-weight:700;font-size:22px;line-height:1.1;
  font-variant-numeric:tabular-nums;color:#fff}
.sk-od{display:block;flex:none;width:1ch;height:1.1em;overflow:hidden;text-align:center}
.sk-od>span{display:block}
.sk-od b{display:block;height:1.1em;font-weight:inherit}
.sk-stats-ax{position:relative;height:13px;margin:6px calc(var(--num) + var(--gap)) 0 calc(var(--lab) + var(--gap));
  font-weight:600;font-size:11px;line-height:13px;letter-spacing:.06em;color:var(--faint);font-variant-numeric:tabular-nums}
.sk-stats-ax span{position:absolute;top:0;transform:translateX(-50%)}
.sk-stats-ax span:first-child{transform:none}
.sk-stats-ax span:last-child{transform:translateX(-100%)}
.sk-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@container skstats (max-width:540px){
  .sk-stats-p{padding:12px 16px 12px}
  .sk-stats-b{--lab:0px;--num:0px;--gap:0px;--tkc:rgba(255,255,255,.14)}
  .sk-stats-grid{display:none}
  .sk-stats-l{row-gap:8px}
  .sk-stats-r{grid-template-columns:minmax(0,1fr) auto;column-gap:10px;row-gap:2px;align-items:end}
  .sk-stats-lb{grid-column:1;grid-row:1;font-size:12px}
  .sk-stats-nu{grid-column:2;grid-row:1;font-size:19px}
  .sk-stats-tr{grid-column:1 / -1;grid-row:2;background:var(--tk)}
}

/* ── page.css ── */
/* ScoreKeeper landing — "ON AIR" — the page shell (ticket LP1-SHELL).
   Loads after tokens.css, onair.css and monitor.css. Classes are prefixed lp-.
   Everything is visible by default; the only staged state is the hero opening,
   and only under html.intro (set by the inline script in <head>).
   Animated properties: transform, opacity, clip-path, filter. Nothing else. */

:root{
  --sec:clamp(84px,10.6vw,152px);          /* section padding, top and bottom */
  --h2:clamp(40px,6.2vw,92px);
  --head-gap:clamp(36px,4.6vw,68px);       /* heading → first content */
  --lp-body:clamp(16.5px,1.26vw,18px);
}

html{scroll-behavior:smooth;scroll-padding-top:var(--nav-h)}
/* motion follows <html data-motion> (data.js), never a media query */
html[data-motion="calm"],html[data-motion="off"],html.frozen{scroll-behavior:auto}
body{min-width:320px}
h1,h2,h3,h4,p,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}

.lp-wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.r{color:var(--red)}

.lp-skip{position:fixed;left:12px;top:10px;z-index:100;padding:10px 14px;border-radius:8px;background:#fff;color:var(--ink);font-weight:700;font-size:14px;transform:translateY(-200%)}
.lp-skip:focus-visible{transform:none}

/* the playing surface, fixed behind everything */
.lp-field,.lp-beams{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.lp-nav,.lp-hero,.lp-sec,.lp-close,.lp-foot{position:relative;z-index:1}

/* ── shared type ─────────────────────────────────────────────────────── */
.lp-h2{font-family:var(--cond);font-weight:700;font-style:italic;text-transform:uppercase;font-size:var(--h2);line-height:.88;letter-spacing:-.015em}
.lp-h2>span{display:block}
.lp-h2>span:only-child{display:inline}

/* the dual wipe: a white curtain leaves first and a red one a beat behind it, both cut on the
   slant. Curtains are pseudo-elements at scaleX(0) until .is-wiping runs them. The padding and
   its negative margin give italic overhang and comma tails room inside the clip. */
/* (its parent is a flex column, so the negative margins add up instead of collapsing) */
.lp-h1,.lp-sport-h{display:flex;flex-direction:column;align-items:flex-start}
.lp-dw{position:relative;display:block;width:fit-content;padding:.06em .18em .14em .06em;margin:-.06em -.18em -.14em -.06em}
.lp-dw::before,.lp-dw::after{content:"";position:absolute;inset:-.1em -.45em;transform:skewX(var(--slant)) scaleX(0);transform-origin:100% 50%;pointer-events:none}
.lp-dw::before{background:var(--red)}
.lp-dw::after{background:var(--tx)}
.lp-dw.is-wiping{overflow:hidden}
.lp-dw.is-wiping::after{animation:lpCurtain .5s cubic-bezier(.65,0,.35,1) both}
.lp-dw.is-wiping::before{animation:lpCurtain .5s cubic-bezier(.65,0,.35,1) .1s both}
@keyframes lpCurtain{from{transform:skewX(var(--slant)) scaleX(1)}to{transform:skewX(var(--slant)) scaleX(0)}}
html[data-motion="off"] .lp-dw::before,html[data-motion="off"] .lp-dw::after,html.frozen .lp-dw::before,html.frozen .lp-dw::after{display:none}

/* a run of short facts, split by the brand slant instead of bullets */
.lp-slash{display:flex;flex-wrap:wrap;align-items:center;row-gap:6px;font-family:var(--cond);font-weight:600;font-size:13px;line-height:1.35;letter-spacing:.11em;text-transform:uppercase;color:var(--mut)}
.lp-slash>li{display:inline-flex;align-items:center;gap:.42em;white-space:nowrap}
.lp-slash>li:not(:last-child)::after{content:"";flex:none;width:1px;height:1.05em;margin-inline:.53em .95em;background:rgba(255,255,255,.34);transform:skewX(var(--slant))}
.lp-slash b{font-weight:700;color:var(--tx)}

/* a text link with a drawn arrow */
.lp-link{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-weight:600;font-size:15.5px;color:var(--tx);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;text-decoration-color:rgba(255,255,255,.28)}
.lp-link:hover{text-decoration-color:#fff}
.lp-arw{flex:none;width:20px;height:12px;fill:none;stroke:var(--redb);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--t-state) var(--ease)}
.lp-link:hover .lp-arw{transform:translateX(4px)}

/* ── 6.0 nav ─────────────────────────────────────────────────────────── */
.lp-nav{position:sticky;top:0;z-index:60;height:var(--nav-h);background:rgba(11,11,13,.72);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.lp-nav-in{height:100%;display:flex;align-items:center;gap:clamp(10px,1.8vw,26px)}
.lp-logo{display:inline-flex;align-items:center;gap:9px;min-height:44px;flex:none}
.lp-mark{flex:none}
.lp-word{font-family:var(--cond);font-weight:700;font-style:italic;font-size:23px;line-height:1;letter-spacing:.015em;color:#fff}
.lp-word span{color:var(--red)}
.lp-nav-links{display:flex;align-items:center;margin-left:clamp(4px,1.2vw,18px)}
.lp-nav-links a{display:inline-flex;align-items:center;height:44px;padding:0 13px;font-weight:600;font-size:14.5px;color:rgba(244,246,250,.8);white-space:nowrap}
.lp-nav-links a:hover{color:#fff}
/* the compact live score: the same match, shown once the hero's bug has scrolled away */
.lp-nav-live{flex:1;min-width:0;display:flex;justify-content:flex-end;align-items:center;opacity:0;pointer-events:none;transform:translateY(-10px);
  transition:opacity var(--t-fast) var(--ease-exit),transform var(--t-fast) var(--ease-exit)}
.lp-nav-live.is-on{opacity:1;transform:none;transition:opacity var(--t-state) var(--ease),transform var(--t-move) var(--ease)}
#lp-navbug{--bug-h:30px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);-webkit-backdrop-filter:none;backdrop-filter:none}
.lp-nav-act{display:flex;align-items:center;gap:10px;flex:none}
.lp-menu-btn{display:none;width:44px;height:44px;flex:none;align-items:center;justify-content:center;padding:0;border:0;border-radius:10px;background:transparent;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.lp-menu-btn svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:1.75;stroke-linecap:round}
.lp-menu-btn:hover{background:rgba(255,255,255,.08)}
@media (max-width:1099px){.lp-nav-live{display:none}.lp-nav-act{margin-left:auto}}
@media (max-width:859px){
  .lp-nav-links,.lp-nav-signin{display:none}
  html.js .lp-menu-btn,.lp-sheet .lp-menu-btn{display:inline-flex}
}
@media (max-width:420px){
  .lp-nav .lp-word{font-size:20px}
  .lp-nav .btn.md{padding:0 14px}
  .lp-nav-in{gap:8px}
}
@media (max-width:374px){.lp-nav .lp-word{display:none}}

/* the menu sheet: a real <dialog>, opened with showModal() */
.lp-sheet{position:fixed;inset:0 0 auto 0;width:100%;max-width:none;max-height:100dvh;margin:0;padding:0;border:0;overflow:auto;background:var(--ink);color:var(--tx);border-bottom:1px solid var(--line);box-shadow:0 30px 60px -20px rgba(0,0,0,.9)}
.lp-sheet::backdrop{background:rgba(6,6,8,.72)}
.lp-sheet[open]{animation:lpSheet var(--t-state) var(--ease)}
@keyframes lpSheet{from{opacity:0;transform:translateY(-12px)}}
.lp-sheet-top{height:var(--nav-h);display:flex;align-items:center;justify-content:space-between}
.lp-sheet-links a{display:flex;align-items:center;min-height:68px;border-top:1px solid var(--line);font-family:var(--cond);font-weight:700;font-style:italic;font-size:38px;line-height:1;letter-spacing:-.01em;text-transform:uppercase}
.lp-sheet-foot{padding:22px 0 28px;border-top:1px solid var(--line)}
.lp-sheet-foot .btn{width:100%}

/* ── 6.1 hero: the camera shot ───────────────────────────────────────── */
.lp-hero{--hb:clamp(24px,4.4svh,46px);isolation:isolate;display:flex;flex-direction:column;overflow:hidden;background:var(--ink);
  min-height:clamp(640px,calc(100svh - var(--nav-h)),1080px)}
.lp-hero-photo,.lp-hero-stage,.lp-hero-scrim{position:absolute;inset:0;width:100%;height:100%}
.lp-hero-photo{z-index:-3;object-fit:cover;object-position:50% 58%}
.lp-hero-stage{z-index:-2}
/* floodlight beams: inside the stadium's own layer when it has one, over the stage otherwise */
.lp-hero-rays{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.lp-hero>.lp-hero-rays{z-index:-2}
.lp-hero.has-stage .lp-hero-photo{visibility:hidden}
.lp-hero-scrim{z-index:-1;background:
  linear-gradient(180deg,rgba(11,11,13,.5) 0%,rgba(11,11,13,.1) 20%,rgba(11,11,13,0) 42%,rgba(11,11,13,.36) 74%,rgba(11,11,13,.88) 93%,var(--ink) 100%),
  linear-gradient(90deg,rgba(11,11,13,.74) 0%,rgba(11,11,13,.5) 30%,rgba(11,11,13,.2) 54%,rgba(11,11,13,.04) 72%,rgba(11,11,13,0) 84%)}

.lp-hero-pic{position:relative;flex:1;display:flex;flex-direction:column}
.lp-hero-in{position:relative;flex:1;display:flex;flex-direction:column;padding-top:26px}

/* safe-area ticks, as on a camera viewfinder */
.lp-ticks{--tk:clamp(9px,1.5vw,22px);position:absolute;inset:0;pointer-events:none}
.lp-ticks i{position:absolute;width:18px;height:18px;border:0 solid rgba(255,255,255,.22)}
.lp-ticks i:nth-child(1){top:var(--tk);left:var(--tk);border-top-width:1px;border-left-width:1px}
.lp-ticks i:nth-child(2){top:var(--tk);right:var(--tk);border-top-width:1px;border-right-width:1px}
.lp-ticks i:nth-child(3){bottom:var(--tk);left:var(--tk);border-bottom-width:1px;border-left-width:1px}
.lp-ticks i:nth-child(4){bottom:var(--tk);right:var(--tk);border-bottom-width:1px;border-right-width:1px}

.lp-hero-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.lp-hero-bug.sk-bug{--bug-h:clamp(44px,12.2vw,64px);flex:none}
.lp-hero-live{min-height:1.5em;font-size:clamp(18px,1.5vw,21px);line-height:1}
.lp-hero-live .lp-live-fb{font-size:15px}
.lp-live-fb{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 15px 0 13px;background:var(--red);color:#fff;
  font-family:var(--cond);font-weight:700;font-size:15px;line-height:1;letter-spacing:.14em;text-transform:uppercase;
  clip-path:polygon(7px 0,100% 0,calc(100% - 7px) 100%,0 100%)}
.lp-live-fb i{width:7px;height:7px;border-radius:50%;background:#fff}
@media (max-width:699px){.lp-hero-live{display:none}}

.lp-hero-copy{margin-top:auto;padding-top:44px;padding-bottom:var(--hb)}
.lp-h1{--h1:clamp(58px,min(11.2vw,19.5svh),164px);font-family:var(--cond);font-weight:700;font-style:italic;text-transform:uppercase;
  font-size:var(--h1);line-height:.82;letter-spacing:-.018em;filter:drop-shadow(0 6px 22px rgba(0,0,0,.42))}
.lp-hero-lede{max-width:52ch;margin-top:clamp(18px,2.4svh,28px);font-size:clamp(16.5px,1.34vw,19px);line-height:1.5;font-weight:500;color:var(--tx);text-shadow:0 1px 14px rgba(0,0,0,.6);text-wrap:pretty}
.lp-hero-act{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px;margin-top:clamp(22px,3svh,30px)}
.lp-hero-demo{text-shadow:0 1px 14px rgba(0,0,0,.7)}

/* lower-third host: bottom-right, sitting on the same line as the lede's last line */
.lp-hero-l3{position:absolute;right:var(--gut);bottom:calc(var(--hb) + 54px + clamp(22px,3svh,30px));width:min(36vw,460px);min-height:6em;
  display:flex;align-items:flex-end;justify-content:flex-end;font-size:clamp(12px,1.16vw,17px);pointer-events:none}
@media (max-width:759px){.lp-hero-l3{display:none}}

.lp-proof .lp-slash{padding:15px 0 17px;border-top:1px solid var(--line)}

@media (max-width:600px){
  .lp-h1{--h1:21.5vw}
  .lp-h1-l:first-child>span{display:block}
  .lp-hero-copy{padding-top:36px}
  .lp-hero-act{flex-direction:column;align-items:stretch;gap:12px}
  .lp-hero-act .btn{width:100%}
  .lp-hero-demo{align-self:flex-start}
  .lp-proof .lp-slash{font-size:12px;letter-spacing:.09em}
}
@media (min-width:601px) and (max-height:740px){
  .lp-hero-lede{font-size:16.5px}
  .lp-hero-copy{padding-top:28px}
}

/* the opening — only under html.intro; page.js adds .is-on piece by piece */
html.intro .lp-hero-photo{opacity:0}
html.intro .lp-hero.is-lit .lp-hero-photo{opacity:1;transition:opacity 1500ms cubic-bezier(.3,0,.2,1)}
html.intro [data-st="wipe"]{--sl:.28em;--px:6px;--y0:-30%;--y1:130%;
  clip-path:polygon(calc(0px - var(--px)) var(--y0),calc(0px - var(--px)) var(--y0),calc(0px - var(--px) - var(--sl)) var(--y1),calc(0px - var(--px) - var(--sl)) var(--y1))}
html.intro [data-st="wipe"].is-on{transition:clip-path 620ms var(--ease);
  clip-path:polygon(calc(0px - var(--px)) var(--y0),calc(100% + var(--px) + var(--sl)) var(--y0),calc(100% + var(--px)) var(--y1),calc(0px - var(--px) - var(--sl)) var(--y1))}
html.intro .lp-hero-bug[data-st="wipe"]{--sl:44px;--px:60px;--y1:290%}
html.intro [data-st="dw"]{visibility:hidden}
html.intro [data-st="dw"].is-on{visibility:visible;animation:lpDwIn 220ms var(--ease) both}
@keyframes lpDwIn{from{clip-path:polygon(0 -10%,0 -10%,-.3em 110%,-.3em 110%)}to{clip-path:polygon(0 -10%,calc(100% + .3em) -10%,100% 110%,-.3em 110%)}}
html.intro [data-st="rise"]{opacity:0;transform:translateY(12px)}
html.intro [data-st="rise"].is-on{opacity:1;transform:none;transition:opacity var(--t-move) var(--ease),transform var(--t-stage) var(--ease)}
html.intro [data-st="cut"]{opacity:0}
html.intro [data-st="cut"].is-on{opacity:1;transition:opacity var(--t-fast) linear}

/* ── sections ────────────────────────────────────────────────────────── */
.lp-sec{padding-block:var(--sec);scroll-margin-top:calc(var(--sec) * -.42)}

/* the field markings fade out where a section meets one of the two photographs */
.lp-pkg::before,.lp-nums::after{content:"";position:absolute;left:0;right:0;z-index:-1;height:clamp(120px,14vw,220px);pointer-events:none}
.lp-pkg::before{top:0;background:linear-gradient(180deg,var(--ink),rgba(11,11,13,0))}
.lp-nums::after{bottom:0;background:linear-gradient(0deg,var(--ink),rgba(11,11,13,0))}

/* ── 6.2 the package ─────────────────────────────────────────────────── */
.lp-pkg-grid{margin-top:var(--head-gap)}
.lp-pkg-lede{max-width:50ch;font-size:clamp(17px,1.4vw,19.5px);line-height:1.5;color:var(--tx)}

.lp-mon{position:relative;aspect-ratio:16/9;border-radius:6px;overflow:hidden;background:var(--ink3);box-shadow:0 34px 60px -34px rgba(0,0,0,.95)}
.lp-mon::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);pointer-events:none}
.lp-mon-feed{position:absolute;inset:0;background-repeat:no-repeat;background-size:218% auto;background-position:0% 93%;filter:saturate(.9) brightness(.8)}
html:not(.js) .lp-pkg-mon{display:none}
/* scripts off: no monitor to pin, so the rundown closes up into one readable column */
html:not(.js) .lp-pkg-grid{display:block}
html:not(.js) .lp-pkg-lede{padding-bottom:clamp(28px,3vw,44px)}
html:not(.js) .lp-rows{max-width:640px}
html:not(.js) .lp-row{min-height:0}
html:not(.js) .lp-tab-ball,html:not(.js) .lp-sport-bug{display:none}
.lp-mon-host{position:absolute;inset:0}
/* monitor.js brings its own bezel, frame and label strip */
.lp-mon.is-mounted{aspect-ratio:auto;background:none;box-shadow:none;overflow:visible;border-radius:0}
.lp-mon.is-mounted::after,.lp-mon.is-mounted .lp-mon-feed{display:none}
.lp-mon.is-mounted .lp-mon-host{position:relative;inset:auto}

.lp-rows{position:relative}
.lp-row{position:relative;padding:22px 0 30px;border-top:1px solid var(--line)}
/* the rule above each row fills with red as the reader moves through that row (21st.dev #5) */
.lp-row-rule{position:absolute;left:0;right:0;top:-1px;height:2px;overflow:hidden;pointer-events:none}
.lp-row-rule i{display:block;height:100%;background:var(--red);transform:scaleX(var(--p,0));transform-origin:0 50%}
html[data-motion="calm"] .lp-row-rule i{transition:transform var(--t-move) var(--ease)}
.lp-row-hd{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.lp-row h3{font-family:var(--cond);font-weight:700;font-style:italic;font-size:clamp(31px,3.25vw,44px);line-height:.95;letter-spacing:-.01em;text-transform:uppercase}
.lp-row-t{display:inline-flex;align-items:center;min-height:44px;padding:0;border:0;background:none;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;text-align:left;cursor:pointer}
/* the duration column of a rundown: small, on the title's baseline */
.lp-row-ct{flex:none;font-family:var(--cond);font-weight:600;font-size:13px;line-height:1;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);white-space:nowrap}
.lp-row-ct .num{display:inline-block;margin-right:.3em;font-weight:700;font-size:19px;letter-spacing:.02em;color:var(--tx)}
/* the count as an odometer (21st.dev #3): one clipped 1ch column per digit, 0–9 stacked inside */
.lp-odo{display:inline-flex;height:1em;line-height:1;overflow:hidden;vertical-align:-.1em}
.lp-odo-c{display:block;width:1ch;height:1em}
.lp-odo-s{display:block;transform:translateY(calc(var(--d,0) * -1em))}
.lp-odo-s b{display:block;height:1em;font-weight:inherit;text-align:center}
html[data-motion="calm"] .lp-odo-s{transition:transform 500ms var(--ease)}
.lp-vh{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.lp-row-body{max-width:46ch;margin-top:10px;font-size:var(--lp-body);line-height:1.55;color:var(--mut)}
.lp-facts{margin-top:18px;color:var(--faint)}
.lp-pkg-note{padding:24px 0 0;border-top:1px solid var(--line);font-size:15px;line-height:1.5;color:var(--faint)}
.lp-pkg-note p{max-width:44ch}
.lp-pkg-note .lp-link{margin-top:4px}

/* the active row. Only once page.js is driving it (.is-live) do the others stand down. */
.lp-rows.is-live .lp-row>:not(.lp-row-rule){opacity:.62;transition:opacity var(--t-state) linear}
.lp-rows.is-live .lp-row[aria-current="true"]>*,.lp-rows.is-live .lp-row:focus-within>*{opacity:1}

@media (min-width:1000px){
  .lp-pkg-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:auto 1fr;column-gap:clamp(40px,5.4vw,78px)}
  .lp-pkg-lede{grid-column:1;grid-row:1;padding-bottom:clamp(36px,4vw,56px)}
  .lp-pkg-mon{grid-column:2;grid-row:1 / span 2;align-self:start;position:sticky;top:calc(var(--nav-h) + 28px)}
  .lp-rows{grid-column:1;grid-row:2}
  .lp-row{min-height:clamp(290px,46vh,430px)}
}
@media (max-width:999px){
  .lp-pkg-mon{position:sticky;top:var(--nav-h);z-index:4;margin:26px calc(var(--gut) * -1) 0;padding:12px var(--gut) 14px;background:var(--ink);border-bottom:1px solid var(--line)}
  .lp-mon{width:min(100%,calc((100svh - var(--nav-h)) * .36 * 16 / 9));margin-inline:auto}
  .lp-rows{margin-top:10px}
  .lp-row{padding-bottom:34px}
}

/* ── 6.3 sports ──────────────────────────────────────────────────────── */
/* the row hangs --tp into the gutter on each side, so the balls and labels — not the plate — sit on the grid */
.lp-tabs{--tp:14px;position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));margin:var(--head-gap) calc(var(--tp) * -1) 0;padding-bottom:10px}
.lp-tabs::after{content:"";position:absolute;left:var(--tp);right:var(--tp);bottom:0;height:1px;background:var(--line)}
.lp-tab{position:relative;display:flex;align-items:center;gap:12px;min-height:72px;padding:10px var(--tp);border:0;background:none;cursor:pointer;
  font-family:var(--cond);font-weight:700;font-size:19px;line-height:1;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);text-align:left}
button.lp-tab:hover{color:var(--tx)}
.lp-tab:focus-visible{outline-offset:-3px}
.lp-tab-ball{flex:none;width:44px;height:44px;opacity:.5}
button.lp-tab:hover .lp-tab-ball{opacity:.8}
.lp-tab-ball canvas{width:100% !important;height:100% !important}
.lp-sports.no-thumbs .lp-tab-ball{display:none}
.lp-tab-bar{display:none}
/* without the plate (no JavaScript) the selected tab is simply full strength */
.lp-tabs:not(.has-plate) .lp-tab[aria-selected="true"]{color:var(--tx)}
.lp-tabs:not(.has-plate) .lp-tab[aria-selected="true"] .lp-tab-ball{opacity:1}
/* the plate: a second row in the active style, clipped to the active tab. The clip glides,
   so the label changes colour as the plate's edge passes over it. Solid, not glass. */
.lp-tabs-on{position:absolute;inset:0 0 10px;display:grid;grid-template-columns:inherit;pointer-events:none;background:rgba(255,255,255,.1);
  clip-path:inset(0 100% 0 0 round 8px);transition:clip-path 280ms var(--ease)}
.lp-tabs-on .lp-tab{color:var(--tx)}
.lp-tabs-on .lp-tab-ball{opacity:1}
/* the 7 s auto-advance runs along the plate's bottom edge; the sport's tint lives only here and under the ball */
.lp-tabs-on .lp-tab-bar{display:block;position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(var(--tint),.24)}
.lp-tabs-on .lp-tab-bar i{display:block;height:100%;background:rgb(var(--tint));transform-origin:0 50%}
.lp-tabs.is-auto .lp-tabs-on .lp-tab.is-current .lp-tab-bar i{animation:lpTabFill 7s linear forwards}
.lp-tabs.is-auto.is-paused .lp-tabs-on .lp-tab-bar i{animation-play-state:paused}
@keyframes lpTabFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
html[data-motion="off"] .lp-tabs-on,html.frozen .lp-tabs-on{transition:none}

.lp-stage{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);column-gap:clamp(28px,5vw,76px);align-items:center;margin-top:clamp(20px,3vw,44px)}
/* the clipping wrapper: balls roll in from the left and leave to the right behind soft edges */
.lp-ball{position:relative;aspect-ratio:1/1;max-height:600px;width:100%;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%)}
.lp-ball::before{content:"";position:absolute;inset:16% 8% 2%;background:radial-gradient(closest-side,rgba(var(--tint),.13),rgba(var(--tint),.05) 55%,rgba(var(--tint),0) 100%);pointer-events:none}
.lp-ball canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:pan-y}
.lp-sports.no-ball .lp-ball canvas{display:none}
html:not(.js) .lp-ball{display:none}
html:not(.js) .lp-stage{grid-template-columns:minmax(0,1fr)}

.lp-sport{container-type:inline-size;min-width:0}
.lp-sport-swap{min-height:var(--swap-h,0px)}
.lp-sport-h{font-family:var(--cond);font-weight:700;font-style:italic;text-transform:uppercase;font-size:clamp(27px,9.3cqw,54px);line-height:.92;letter-spacing:-.012em}
.lp-sport-h>span{white-space:nowrap}
.lp-sport-lede{max-width:54ch;margin-top:18px;font-size:var(--lp-body);line-height:1.55;color:var(--mut);text-wrap:pretty}
.lp-sport-bug{--sk-sbug-fs:clamp(11px,3.1cqw,15px);display:flex;align-items:center;min-height:calc(var(--sk-sbug-fs) * 6.2);margin-top:26px}
.lp-sport-bug>.sk-bug{--bug-h:clamp(42px,12cqw,56px)}
.lp-sport-feats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px;margin-top:26px;border-bottom:1px solid var(--line)}
.lp-sport-feats li{display:flex;align-items:center;min-height:var(--feat-h,58px);padding:12px 0;border-top:1px solid var(--line);font-weight:600;font-size:16px;line-height:1.3;color:var(--tx);text-wrap:balance}
.lp-sport .lp-link{margin-top:14px}
.lp-sport-swap.is-out{clip-path:polygon(calc(100% + 140px) -4%,calc(100% + 140px) -4%,calc(100% + 20px) 104%,calc(100% + 20px) 104%);transition:clip-path 200ms var(--ease-exit)}
.lp-sport-swap.is-pre{clip-path:polygon(-20px -4%,-20px -4%,-140px 104%,-140px 104%)}
.lp-sport-swap.is-in{clip-path:polygon(-20px -4%,calc(100% + 140px) -4%,calc(100% + 20px) 104%,-140px 104%);transition:clip-path 420ms var(--ease)}
.lp-sport-swap.is-out{clip-path:polygon(calc(100% + 140px) -4%,calc(100% + 140px) -4%,calc(100% + 20px) 104%,calc(100% + 20px) 104%)}
.lp-sport-swap.is-hold{clip-path:polygon(-20px -4%,calc(100% + 140px) -4%,calc(100% + 20px) 104%,-140px 104%)}

.lp-sports-note{margin-top:clamp(40px,5vw,72px);padding-top:18px;border-top:1px solid var(--line);font-size:15px;line-height:1.5;color:var(--faint)}

@media (max-width:999px){
  .lp-tab{flex-direction:column;align-items:flex-start;justify-content:center;gap:8px;min-height:92px;font-size:15px;letter-spacing:.05em}
  .lp-tabs{--tp:12px}
  .lp-tab-ball{width:36px;height:36px}
}
@media (max-width:859px){
  .lp-stage{grid-template-columns:minmax(0,1fr);row-gap:8px}
  .lp-ball{aspect-ratio:auto;height:clamp(280px,56vw,420px)}
}
@media (max-width:599px){
  .lp-tabs{--tp:8px;grid-template-columns:repeat(3,minmax(0,1fr));row-gap:4px}
  .lp-tab{flex-direction:row;align-items:center;justify-content:flex-start;gap:8px;min-height:52px;padding-block:6px;font-size:15px;letter-spacing:.03em}
  .lp-tab-ball{width:28px;height:28px}
  .lp-sport-feats{column-gap:18px}
  .lp-sport-feats li{font-size:15px}
}

/* ── 6.4 how it works ────────────────────────────────────────────────── */
.lp-how-sub{margin-top:clamp(12px,1.5vw,20px);font-family:var(--cond);font-weight:700;font-style:italic;font-size:clamp(22px,2.7vw,36px);line-height:1.05;color:var(--mut)}
.lp-demo{margin-top:var(--head-gap)}
/* the space the phone demo takes: side by side above 760px of column, stacked below */
html.js .lp-demo{min-height:598px}
@media (max-width:839px){html.js .lp-demo{min-height:calc(790px + (100vw - 2 * var(--gut) - 16px) * .5625)}}
html.js .lp-demo.is-mounted{min-height:0}

/* four facts: a row of type with hairlines between the columns */
.lp-truths{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(56px,7vw,104px);border-top:1px solid var(--line)}
.lp-truths li{padding:26px clamp(18px,2.2vw,30px) 4px 0}
.lp-truths li+li{padding-left:clamp(18px,2.2vw,30px);border-left:1px solid var(--line)}
.lp-truths h3{font-family:var(--cond);font-weight:700;font-size:22px;line-height:1.05;letter-spacing:.03em;text-transform:uppercase}
.lp-truths p{margin-top:10px;font-size:16px;line-height:1.5;color:var(--mut)}
@media (max-width:999px){
  .lp-truths{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lp-truths li{padding-bottom:26px}
  .lp-truths li:nth-child(odd){padding-left:0;border-left:0}
  .lp-truths li:nth-child(n+3){border-top:1px solid var(--line)}
}
@media (max-width:599px){
  .lp-truths{grid-template-columns:minmax(0,1fr)}
  .lp-truths li,.lp-truths li+li{padding:22px 0 24px;border-left:0}
  .lp-truths li+li{border-top:1px solid var(--line)}
}

/* three steps: red italic numerals standing on one hairline */
.lp-steps-h{margin-top:clamp(76px,9.4vw,136px);font-family:var(--cond);font-weight:700;font-style:italic;font-size:clamp(28px,3.5vw,48px);line-height:.92;letter-spacing:-.01em;text-transform:uppercase}
.lp-steps{--num:clamp(88px,9.6vw,138px);position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(24px,4vw,56px);margin-top:clamp(10px,1.4vw,20px)}
.lp-steps::before{content:"";position:absolute;left:0;right:0;top:calc(var(--num) * .86);height:1px;background:rgba(255,255,255,.24);transform-origin:0 50%}
.lp-steps.will-draw::before{transform:scaleX(0)}
.lp-steps.will-draw.is-drawn::before{transform:none;transition:transform 1100ms var(--ease)}
.lp-step-n{display:block;height:calc(var(--num) * .86);font-family:var(--cond);font-weight:700;font-style:italic;font-size:var(--num);line-height:.9;letter-spacing:-.02em;color:var(--red)}
.lp-steps h4{margin-top:22px;font-family:var(--cond);font-weight:700;font-size:23px;line-height:1.05;letter-spacing:.03em;text-transform:uppercase}
.lp-steps p{max-width:34ch;margin-top:8px;font-size:16.5px;line-height:1.5;color:var(--mut)}
@media (max-width:699px){
  .lp-steps{--num:76px;grid-template-columns:minmax(0,1fr);margin-top:20px}
  .lp-steps::before{display:none}
  .lp-steps li{display:grid;grid-template-columns:64px minmax(0,1fr);align-items:start;padding:18px 0 22px;border-top:1px solid var(--line)}
  .lp-step-n{height:auto;line-height:.8}
  .lp-steps h4{margin-top:4px}
}

/* ── 6.5 by the numbers ──────────────────────────────────────────────── */
.lp-nums-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:clamp(40px,8vw,118px);align-items:start}
.lp-nums-lede{max-width:30ch;margin-top:clamp(22px,2.6vw,34px);font-size:clamp(18px,1.6vw,22px);line-height:1.4;color:var(--tx)}
.lp-plain{margin-top:clamp(26px,3vw,40px);border-bottom:1px solid var(--line)}
.lp-plain li{padding:15px 0 16px;border-top:1px solid var(--line);font-size:16.5px;line-height:1.5;color:var(--mut)}
.lp-nums-r{padding-top:.5em;min-width:0}
/* static fallback for the stats panel: label and numeral, no JavaScript needed */
.lp-stats-fb{border-bottom:1px solid var(--line)}
.lp-stats-fb li{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:10px 0 9px;border-top:1px solid var(--line)}
.lp-stats-fb span{font-family:var(--cond);font-weight:600;font-size:15px;letter-spacing:.09em;text-transform:uppercase;color:var(--mut)}
.lp-stats-fb b{font-family:var(--cond);font-weight:700;font-size:26px;line-height:1;color:var(--tx)}
@media (max-width:899px){
  .lp-nums-grid{grid-template-columns:minmax(0,1fr);row-gap:44px}
  .lp-nums-r{padding-top:0}
}

/* ── 6.6 closing call ────────────────────────────────────────────────── */
.lp-close{isolation:isolate;display:flex;align-items:flex-end;overflow:hidden;background:var(--ink);min-height:clamp(720px,66vw,940px);text-align:center}
.lp-close-bg,.lp-close-scrim{position:absolute;inset:0}
/* the picture is hung 28% above the band, so the officials and the board sit in its upper half
   and the headline lands on the dark heads in the foreground */
.lp-close-bg{z-index:-2;top:-28%}
.lp-close-bg img{width:100%;height:100%;object-fit:cover;object-position:47% 50%;transform-origin:47% 40%;animation:lpPush 54s ease-in-out infinite alternate}
.lp-close.is-off .lp-close-bg img{animation-play-state:paused}
html[data-motion="calm"] .lp-close-bg img,html[data-motion="off"] .lp-close-bg img,html.frozen .lp-close-bg img{animation:none}
@keyframes lpPush{from{transform:scale(1)}to{transform:scale(1.075)}}
.lp-close-scrim{z-index:-1;background:linear-gradient(180deg,var(--ink) 0%,rgba(11,11,13,.5) 13%,rgba(11,11,13,.08) 34%,rgba(11,11,13,.34) 52%,rgba(11,11,13,.84) 70%,rgba(11,11,13,.95) 88%,var(--ink) 100%)}
.lp-close-in{padding-top:120px;padding-bottom:clamp(64px,8vw,112px)}
.lp-close .lp-h2{text-shadow:0 6px 30px rgba(0,0,0,.55)}
.lp-close p{text-wrap:balance;margin-top:clamp(16px,1.8vw,24px);font-size:clamp(17px,1.4vw,19.5px);line-height:1.5;color:var(--tx)}
.lp-close-act{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 14px;margin-top:clamp(24px,2.6vw,34px)}
@media (max-width:480px){.lp-close-act{flex-direction:column}.lp-close-act .btn{width:100%}}
/* narrow screens: the photograph takes the top of the band so the officials stand clear above the headline */
@media (max-width:699px){
  .lp-close-bg{bottom:12%}
  .lp-close-scrim{background:linear-gradient(180deg,var(--ink) 0%,rgba(11,11,13,.5) 10%,rgba(11,11,13,.08) 28%,rgba(11,11,13,.3) 46%,rgba(11,11,13,.8) 64%,var(--ink) 87%,var(--ink) 100%)}
}

/* ── 6.7 footer ──────────────────────────────────────────────────────── */
.lp-foot{background:var(--ink2);border-top:1px solid var(--line)}
.lp-foot-grid{display:grid;grid-template-columns:minmax(0,2.4fr) repeat(3,minmax(0,1fr));column-gap:clamp(24px,4vw,56px);padding:clamp(48px,5.4vw,76px) 0 clamp(36px,4vw,56px)}
.lp-foot-brand p{max-width:32ch;margin-top:12px;font-size:15px;line-height:1.5;color:var(--faint)}
.lp-foot-col h2{margin-bottom:6px;padding-top:12px;font-family:var(--cond);font-weight:700;font-size:13px;line-height:1.5;letter-spacing:.14em;text-transform:uppercase;color:var(--tx)}
.lp-foot-col a{display:flex;align-items:center;min-height:44px;font-size:15px;color:var(--mut)}
.lp-foot-col a:hover{color:#fff}
.lp-foot-btm{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px;padding:12px 0 16px;border-top:1px solid var(--line)}
.lp-foot-btm .lp-slash{color:var(--faint)}

/* Motion: Full / Calm / Off. Sets SK.motion for this visitor (data.js remembers it). */
.lp-motion{display:inline-flex;align-items:center;gap:14px}
html:not(.js) .lp-motion{display:none}
.lp-motion-l{font-family:var(--cond);font-weight:600;font-size:13px;line-height:1;letter-spacing:.11em;text-transform:uppercase;color:var(--faint)}
.lp-motion-seg{display:inline-flex;border-radius:9px;box-shadow:inset 0 0 0 1px var(--line)}
.lp-motion-seg button{min-width:56px;height:44px;padding:0 12px;border:0;border-radius:9px;background:none;cursor:pointer;
  font-family:var(--cond);font-weight:700;font-size:13px;line-height:1;letter-spacing:.11em;text-transform:uppercase;color:var(--mut)}
.lp-motion-seg button:hover{color:var(--tx)}
.lp-motion-seg button[aria-pressed="true"]{background:rgba(255,255,255,.1);color:var(--tx);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.lp-sheet-motion{display:flex;align-items:center;min-height:76px;border-top:1px solid var(--line)}
@media (max-width:859px){
  .lp-foot-grid{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:28px}
  .lp-foot-brand{grid-column:1 / -1}
}
@media (max-width:479px){
  .lp-foot-grid{column-gap:14px}
}
@media (max-width:359px){
  .lp-foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ── motion off: states change, nothing travels ───────────────────────── */
html[data-motion="off"] .lp-arw,html[data-motion="off"] .lp-nav-live,html[data-motion="off"] .lp-rows.is-live .lp-row>*{transition:none}
html[data-motion="off"] .lp-sheet[open]{animation:none}