@font-face{font-family:"SlipCond";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/BarlowCondensed-Regular.ttf") format("truetype")}
@font-face{font-family:"SlipCond";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/BarlowCondensed-Medium.ttf") format("truetype")}
@font-face{font-family:"SlipCond";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/BarlowCondensed-Bold.ttf") format("truetype")}
@font-face{font-family:"SlipCond";font-style:normal;font-weight:900;font-display:swap;src:url("../fonts/BarlowCondensed-Black.ttf") format("truetype")}
@font-face{font-family:"SlipSans";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/Inter-Regular.ttf") format("truetype")}
@font-face{font-family:"SlipSans";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/Inter-SemiBold.ttf") format("truetype")}
@font-face{font-family:"SlipSans";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/Inter-Bold.ttf") format("truetype")}
:root{
  --bg:#06080c; --panel:#0d121a; --panel2:#111823; --line:#1d2735; --text:#f7fafc; --muted:#d5deea;
  --L:#5ec4ff; --R:#ffb24a; --green:#22e06b; --red:#ff3b3b; --amber:#ffc633;
  --cond:"SlipCond","Arial Narrow","Roboto Condensed",Impact,system-ui,sans-serif;
  --ui:"SlipSans",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body,button,input,select{font-family:var(--ui);font-weight:400;font-synthesis:none}
b,strong{font-weight:400}
a,a:link,a:visited,a:hover,a:focus,a:active,a *,a:link *,a:visited *{text-decoration:none;-webkit-text-decoration:none}
html{font-size:clamp(14px, min(1.05vw, 1.6vh), 16px);background:var(--bg);overflow-x:hidden}
body{height:100vh;height:100dvh;overflow:hidden;color:var(--text);font-family:var(--ui);max-width:100%;
  background:radial-gradient(120% 80% at 50% -10%,#16202e 0%,#0a0e14 45%,#05070a 100%);
  display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) minmax(16rem,22rem);gap:.8rem;padding:.9rem 1rem 1rem;
  -webkit-font-smoothing:antialiased;user-select:none;-webkit-user-select:none}
body.capture{cursor:none}
.num{font-family:var(--cond);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* header */
header{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:.45rem .6rem;height:auto;min-height:3.2rem;max-width:100%;min-width:0}
.headnav{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem}
.menu-btn{display:none;font-family:var(--cond);font-weight:400;font-size:.95rem;letter-spacing:.08em;text-transform:uppercase;color:#fff;
  background:linear-gradient(180deg,#1f2b3b,#141c27);border:1px solid #2c3a4e;border-radius:.6rem;padding:.45rem .8rem;cursor:pointer;min-height:2.6rem}
.brand{display:flex;align-items:center;gap:.6rem;min-width:0}
.brand .mark{height:2.94rem;width:calc(2.94rem * 500 / 374);max-height:2.94rem;max-width:calc(2.94rem * 500 / 374);min-width:calc(2.94rem * 500 / 374);flex:0 0 calc(2.94rem * 500 / 374);display:block;object-fit:contain}
.brand .word{font-family:var(--cond);font-weight:500;font-size:2rem;letter-spacing:.04em;text-transform:uppercase;line-height:1}
.brand .word .wb,.brand .word b{color:var(--L);font-weight:500} .brand .word .wi,.brand .word i{font-style:normal;color:var(--R);font-weight:500}
.platform{font-family:var(--ui);font-weight:400;font-size:.78rem;letter-spacing:.01em;text-transform:none;white-space:nowrap;color:var(--muted);line-height:1.2}
.intro .platform{font-size:1.15rem;letter-spacing:.04em;font-weight:400;color:var(--amber);margin-top:.35rem;text-transform:none}
.event{border-left:1px solid var(--line);padding-left:1rem;line-height:1.15}
.event .t{font-family:var(--cond);font-weight:400;font-size:1.25rem;letter-spacing:.03em;text-transform:uppercase}
.event .s{white-space:nowrap;font-size:.78rem;color:var(--muted);letter-spacing:.02em}
.badge{font-family:var(--cond);font-weight:500;font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;
  padding:.3rem .65rem;border-radius:.4rem;border:1px dashed #ffb40099;color:var(--amber);background:#ffb40012}
.status{white-space:nowrap;font-family:var(--cond);font-weight:400;font-size:1rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  display:flex;align-items:center;gap:.45rem}
.status .dot{width:.6rem;height:.6rem;border-radius:50%;background:#ff3a4c;box-shadow:0 0 .6rem #ff3a4c}
button.replay{font-family:var(--cond);font-weight:400;font-size:1.05rem;letter-spacing:.1em;text-transform:uppercase;color:#fff;
  background:linear-gradient(180deg,#1f2b3b,#141c27);border:1px solid #2c3a4e;border-radius:.6rem;padding:.5rem 1.1rem;cursor:pointer;
  display:flex;align-items:center;gap:.45rem;-webkit-tap-highlight-color:transparent;min-height:2.6rem}
button.replay:hover{border-color:var(--L)}
button.replay.pulse{box-shadow:0 0 0 .15rem #36b3ff55,0 0 1.2rem #36b3ff66;border-color:var(--L)}
button.replay svg{width:1.1rem;height:1.1rem}

/* top band */
main{display:grid;grid-template-columns:minmax(0,1fr) minmax(16rem,36rem) minmax(0,1fr);gap:.9rem;min-height:0;min-width:0;max-width:100%}
.card{position:relative;display:flex;flex-direction:column;min-height:0;border-radius:1rem;overflow:hidden;
  background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);will-change:transform,opacity}
.card.L{border-top:3px solid var(--L)} .card.R{border-top:3px solid var(--R)}
.photo{position:relative;flex:1;min-height:0;overflow:hidden;background:#0a0d12}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 12%}
.photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,#0d121af0 100%)}
.lanetag{position:absolute;z-index:2;top:.7rem;left:.7rem;font-family:var(--cond);font-weight:500;font-size:1rem;letter-spacing:.14em;
  padding:.2rem .6rem;border-radius:.35rem;color:#e8f4ff;background:#0b3d66;border:1px solid #8fd4ff}
.L .lanetag{background:#0b3d66;color:#e8f4ff} .R .lanetag{background:#5c3208;color:#fff4e4;border-color:#ffc56a;left:auto;right:.7rem}
.leadchip{position:absolute;z-index:2;top:.7rem;right:.7rem;font-family:var(--cond);font-weight:500;font-size:1rem;letter-spacing:.14em;
  padding:.2rem .6rem;border-radius:.35rem;background:#0e5a34;color:#f3fff6;border:1px solid #8dffb8;opacity:0;box-shadow:0 0 1rem #21e46a88}
.R .leadchip{right:auto;left:.7rem}
.winlight{position:absolute;z-index:3;top:.55rem;right:.8rem;width:2.2rem;height:2.2rem;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#fff 0%,#ffe9a0 25%,#ffb400 60%,#8a5a00 100%);opacity:0;
  box-shadow:0 0 1.2rem #ffcf40,0 0 2.6rem #ffb400aa}
.R .winlight{right:auto;left:.8rem}
.R .lanetag.shift{}
.winbanner{position:absolute;z-index:3;left:0;right:0;bottom:.6rem;display:flex;align-items:center;justify-content:center;gap:.5rem;opacity:0;pointer-events:none}
.winbanner .w{display:inline-block;font-family:var(--cond);font-weight:500;font-size:3.4rem;line-height:.9;letter-spacing:.1em;color:#fff;
  padding:.3rem 1.4rem .2rem;border-radius:.6rem;background:linear-gradient(180deg,#21e46a,#0fa84a);
  box-shadow:0 0 0 .2rem #ffffff22,0 0 2.5rem #21e46acc;text-shadow:0 .15rem 0 #0006}
.winbanner .m{font-family:var(--cond);font-weight:400;font-size:1.15rem;line-height:1.1;letter-spacing:.06em;color:#fff;text-align:left;
  background:#06080cd9;border:1px solid #21e46a88;border-radius:.5rem;padding:.35rem .6rem}
.info{padding:.7rem .9rem .8rem;display:flex;flex-direction:column;gap:.35rem}
.name{font-family:var(--cond);font-weight:400;font-size:2.3rem;line-height:1;text-transform:uppercase;letter-spacing:.02em;color:#ffffff}
.car{font-size:.95rem;color:#c6d1df;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.cls{font-family:var(--cond);font-weight:400;font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;padding:.12rem .5rem;border-radius:.3rem;border:1px solid}
.L .cls{color:var(--L);border-color:#36b3ff66;background:#36b3ff14} .R .cls{color:var(--R);border-color:#ff9d1f66;background:#ff9d1f14}
.hometown{font-size:.8rem;color:#c5d2e2}
.sponsors{display:grid;grid-template-columns:repeat(3,1fr);gap:.45rem;margin-top:.25rem}
.sponsors img{width:100%;height:auto;display:block;border-radius:.4rem}
.card.dim .photo img{filter:saturate(.55) brightness(.75)}

/* centre scoreboard */
.board{display:flex;flex-direction:column;min-height:0;border-radius:1rem;background:linear-gradient(180deg,#0e141d,#0a0f16);
  border:1px solid var(--line);overflow:hidden}
.clock{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:.55rem 1rem;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#121a26,#0d131c)}
.clock .lbl{font-family:var(--cond);font-weight:400;font-size:.8rem;letter-spacing:.18em;color:var(--muted);text-transform:uppercase}
.clock .big{font-family:var(--cond);font-weight:500;font-size:3.4rem;line-height:1;letter-spacing:.02em;text-align:center;min-width:12rem}
.clock .phase{text-align:right;font-family:var(--cond);font-weight:400;font-size:1.35rem;letter-spacing:.12em;text-transform:uppercase}
.slip{flex:1;display:grid;grid-template-columns:1fr 1.15fr 1fr;grid-auto-rows:minmax(0,1fr);min-height:0}
.slip > div{display:flex;align-items:center;justify-content:center;border-bottom:1px solid #16202c}
.slip .hd{font-family:var(--cond);font-weight:400;font-size:1rem;letter-spacing:.16em;text-transform:uppercase;background:#0b1118}
.slip .hd.L{color:var(--L)} .slip .hd.R{color:var(--R)} .slip .hd.M{color:var(--muted)}
.slip .lab{flex-direction:column;line-height:1.05;background:#0b1118}
.slip .lab .k{font-family:var(--cond);font-weight:400;font-size:1.05rem;letter-spacing:.08em;text-transform:uppercase;color:#c9d4e2}
.slip .lab .g{font-family:var(--cond);font-weight:400;font-size:.78rem;letter-spacing:.06em;color:#d5deea;height:.95rem}
.slip .v{font-family:var(--cond);font-weight:500;font-size:2.7rem;letter-spacing:.02em;color:#e7eef6;font-variant-numeric:tabular-nums;position:relative}
.slip .v.on{color:#fff}
.slip .v.ahead{color:#22e06b;text-shadow:0 0 1.1rem #22e06bcc}
.slip .v.behind{color:#ff3b3b;text-shadow:0 0 1.1rem #ff3b3bcc}
.slip .v .flash{position:absolute;inset:.2rem .6rem;border-radius:.4rem;background:currentColor;opacity:0;pointer-events:none}
.slip .row-last{border-bottom:none}
.result{display:none;position:absolute;left:44%;top:50%;transform:translate(-50%,-50%);padding:.45rem 1.4rem .5rem;text-align:center;font-family:var(--cond);font-weight:500;font-size:1.7rem;letter-spacing:.08em;white-space:nowrap;
  text-transform:uppercase;background:#06080ce8;border:1px solid #21e46a;border-radius:.6rem;color:#fff;box-shadow:0 0 1.6rem #21e46a44;z-index:5}
.result small{display:block;font-weight:400;font-size:1rem;letter-spacing:.1em;color:#b7c4d4}
.result b,.result .winword{color:var(--green);font-weight:400}

/* bottom band */
.bottom{display:grid;grid-template-columns:8rem minmax(0,1fr) minmax(18.5rem,26rem);gap:.7rem;min-height:0}
.h2h{min-height:0;overflow:auto;background:rgba(8,12,18,.92);border:1px solid var(--line);border-radius:.8rem;padding:.45rem .6rem .6rem;font-weight:400}
.h2h,.h2h *{font-weight:400}
.h2h summary{cursor:pointer;font-family:var(--cond);letter-spacing:.06em;text-transform:uppercase;color:var(--text);padding:.15rem 0 .35rem;list-style:none}
.h2h summary::-webkit-details-marker{display:none}
.h2h a,.h2h-open a{color:var(--L);text-decoration:none}
.h2h-open{margin:.4rem 0 0}
.h2h-open a{display:inline-block;border:1px solid #2c3a4e;border-radius:.45rem;padding:.28rem .55rem}
.h2h a:hover,.h2h a:focus-visible{background:#1c2838}
.h2h .h2h-rec{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;line-height:1.2}
.h2h .h2h-rec .num{font-family:var(--cond);font-size:1.7rem;font-weight:400}
.h2h .meta,.h2h .h2h-last,.h2h li{font-size:.78rem;color:var(--muted);line-height:1.35}
.h2h .h2h-last{color:var(--text)}
.h2h h3{margin:.45rem 0 .2rem;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:400}
.h2h-stats{width:100%;border-collapse:collapse}
.h2h-stats th,.h2h-stats td{font-size:.78rem;font-weight:400;text-align:center;padding:.12rem .15rem;border-bottom:1px solid #1d2735}
.h2h-stats .num{font-family:var(--cond);font-size:1rem;color:var(--text)}
.h2h .points,.h2h .h2h-paths ul{margin:0;padding-left:1rem}
.h2h .h2h-paths{display:grid;grid-template-columns:1fr 1fr;gap:.4rem}
.h2h .pair,.h2h a.pair{position:relative;display:block;border:1px solid #1d2735;border-radius:.45rem;padding:.28rem .4rem;margin-top:.28rem;color:inherit;text-decoration:none;background:transparent}
.h2h a.pair:hover,.h2h a.pair:focus-visible{background:#162433}
.h2h .thumb{width:1.6rem;height:2rem;object-fit:cover;object-position:50% 8%;border-radius:.25rem}
.h2h .driverlink{position:relative;z-index:2}
@media (min-width: 821px){
  .h2h summary{pointer-events:none}
}
.tree{position:relative;border-radius:1rem;border:1px solid var(--line);background:linear-gradient(180deg,#10161f,#0a0e14);
  display:grid;grid-template-columns:1fr .5rem 1fr;grid-template-rows:repeat(7,1fr);padding:.6rem .7rem;column-gap:.35rem;row-gap:.15rem}
.tree .pole{grid-column:2;grid-row:1/8;background:linear-gradient(90deg,#1b2430,#2a3544,#1b2430);border-radius:.2rem}
.tree .cell{display:flex;align-items:center;justify-content:center;gap:.25rem}
.bulb{width:1.45rem;height:1.45rem;border-radius:50%;background:#1a2029;box-shadow:inset 0 .1rem .3rem #000a;border:1px solid #232c38}
.bulb.sm{width:.95rem;height:.95rem}
.bulb.on.y{background:radial-gradient(circle at 40% 35%,#fff,#fff6c8 40%,#f1d56a 100%);box-shadow:0 0 .7rem #ffeaa0}
.bulb.on.a{background:radial-gradient(circle at 40% 35%,#fff3cc,#ffb400 55%,#b86e00 100%);box-shadow:0 0 1rem #ffb400,0 0 2rem #ffb40077}
.bulb.on.g{background:radial-gradient(circle at 40% 35%,#eaffef,#21e46a 55%,#0b8a3a 100%);box-shadow:0 0 1rem #21e46a,0 0 2.2rem #21e46a88}
.bulb.on.r{background:radial-gradient(circle at 40% 35%,#ffd6da,#ff3a4c 55%,#8a0010 100%);box-shadow:0 0 1rem #ff3a4c}
.tree .tl{position:absolute;bottom:-.05rem;left:0;right:0;text-align:center;font-family:var(--cond);font-size:.6rem;letter-spacing:.2em;color:#c5d0de}

.track{position:relative;border-radius:1rem;border:1px solid var(--line);overflow:hidden;
  background:linear-gradient(180deg,#0e131a,#0a0e13)}
.lane{position:absolute;left:0;right:0;height:38%;background:
  repeating-linear-gradient(90deg,#141a22 0 2px,transparent 2px 60px),linear-gradient(180deg,#151b24,#11161e);}
.lane.L{top:14%;border-top:1px solid #2a3442;border-bottom:1px dashed #3a4656}
.lane.R{top:52%;border-bottom:1px solid #2a3442}
.lane .lname{position:absolute;z-index:2;left:.5rem;top:.12rem;font-family:var(--cond);font-weight:400;font-size:.68rem;
  letter-spacing:.2em}
.lane.L .lname{color:var(--L)} .lane.R .lname{color:var(--R)}
.mk{position:absolute;top:12%;bottom:8%;width:0;border-left:2px dashed #2e3a4a}
.mk span{position:absolute;top:-1.35rem;left:0;transform:translateX(-50%);font-family:var(--cond);font-weight:400;font-size:.85rem;
  letter-spacing:.08em;color:var(--muted);white-space:nowrap}
.mk.start{border-left:3px solid #d8e2ee;border-left-style:solid}
.mk.finish{border-left:none;width:.7rem;transform:translateX(-50%);
  background:repeating-conic-gradient(#e9eff7 0 25%,#0a0e13 0 50%) 0 0/.7rem .7rem;opacity:.85}
.mk.finish span{left:50%;color:#e9eff7}
.carw{position:absolute;height:38%;display:flex;align-items:center;will-change:left}
.carw.L{top:14%} .carw.R{top:52%}
.carbox{position:absolute;right:0;top:50%;transform:translateY(-50%);width:5.6rem;height:2rem}
.carbox.dragster{width:11.5rem;height:2.7rem}
.carbox svg{width:100%;height:100%;display:block;filter:drop-shadow(0 0 .45rem rgba(0,0,0,.6));overflow:visible}
.trail{position:absolute;top:50%;height:.5rem;transform:translateY(-50%);border-radius:.5rem;opacity:0}
.carw.L .trail{background:linear-gradient(90deg,transparent,#36b3ffaa)} .carw.R .trail{background:linear-gradient(90deg,transparent,#ff9d1faa)}
.finlamp{position:absolute;width:1.2rem;height:1.2rem;border-radius:50%;background:#1a2029;border:1px solid #2a3442;transform:translate(-50%,-50%)}
.finlamp.on{background:radial-gradient(circle at 40% 35%,#fff,#ffe9a0 30%,#ffb400 70%);box-shadow:0 0 1rem #ffcf40,0 0 2rem #ffb400}
.toast{position:absolute;left:30%;top:52%;transform:translate(-50%,-50%);font-family:var(--cond);font-weight:500;font-size:1.6rem;
  letter-spacing:.14em;text-transform:uppercase;padding:.35rem 1.2rem;border-radius:.5rem;background:#06080cdd;border:1px solid var(--green);
  color:var(--green);box-shadow:0 0 1.5rem #21e46a55;opacity:0;white-space:nowrap;pointer-events:none}
.gapread{position:absolute;right:.7rem;bottom:.35rem;font-family:var(--cond);font-weight:400;font-size:.8rem;letter-spacing:.12em;color:var(--muted)}
.intro{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:.6rem;
  background:#05070aee;z-index:50;pointer-events:none}
.intro .a{font-family:var(--cond);font-weight:500;font-size:5rem;letter-spacing:.06em;text-transform:uppercase;line-height:1}
.intro .a .wb,.intro .a b{color:var(--L);font-weight:500} .intro .a .wi,.intro .a i{font-style:normal;color:var(--R);font-weight:500}
.intro .b{font-family:var(--cond);font-weight:400;font-size:1.3rem;letter-spacing:.3em;color:var(--muted);text-transform:uppercase}

/* v2 additions */
.ctrls{display:flex;align-items:center;gap:.5rem}
.seg{display:flex;border:1px solid #2c3a4e;border-radius:.6rem;overflow:hidden;background:#0d131c}
.seg button{font-family:var(--cond);font-weight:400;font-size:.9rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);white-space:nowrap;
  background:transparent;border:0;padding:.35rem .6rem;cursor:pointer;min-height:2.6rem;line-height:1.05;-webkit-tap-highlight-color:transparent}
.seg button small{display:block;font-size:.7rem;letter-spacing:.1em;opacity:.8}
.seg button + button{border-left:1px solid #2c3a4e}
.seg button.on{color:#fff;background:linear-gradient(180deg,#22324a,#172233);box-shadow:inset 0 -3px 0 var(--L)}
.seg.units button.on{box-shadow:inset 0 -3px 0 var(--amber)}
.badge.big{font-size:1rem;padding:.35rem .75rem;border:2px dashed #ffb400;background:#ffb4001f;color:#ffc633}
.slip.met .lab .k{text-transform:none}
.result small{text-transform:none}
.slip .lab .k small{font-size:.78rem;letter-spacing:.04em;color:var(--muted);margin-left:.25rem;text-transform:none}
.slip .lab .k .fin{display:inline-block;margin-left:.35rem;font-size:.66rem;letter-spacing:.14em;padding:.05rem .3rem;border-radius:.25rem;
  background:#e9eff7;color:#06080c;vertical-align:.12rem}
.slip .v.nr{font-size:1.05rem;letter-spacing:.14em;color:#d5deea;text-transform:uppercase;font-weight:400}
.slip .lab.nr .k{color:#d5deea}
.lane .lname .et{margin-left:.6rem;color:#c9d4e2;letter-spacing:.08em;font-size:.8rem}
.mk.faint{border-left:1px dotted #273241}
.mk.faint span{color:#3f4c5e}
.shutlbl{position:absolute;top:.3rem;font-family:var(--cond);font-weight:400;font-size:.72rem;letter-spacing:.2em;color:#3f4c5e;transform:translateX(-50%)}

header{min-width:0} .event{min-width:0;overflow:hidden;flex:1 1 12rem;max-width:22rem} .event .t{white-space:nowrap} .event .t,.event .s{overflow:hidden;text-overflow:ellipsis}
.brand,.status,.sdwrap,.seg.units,.classpill,.headnav,.menu-btn{flex:0 1 auto;min-width:0}
.classpill{display:flex;align-items:center;gap:.7rem;padding:.3rem 1.1rem .3rem 1.2rem;border-radius:2rem;white-space:nowrap;max-width:100%;
  background:linear-gradient(180deg,#1d2a3c,#121b28);border:2px solid #36b3ff;box-shadow:0 0 1.2rem #36b3ff44,inset 0 1px 0 #ffffff1a}
.classpill .cp-name{font-family:var(--cond);font-weight:500;font-size:1.75rem;line-height:1;letter-spacing:.08em;color:#fff}
.classpill .cp-dist{font-family:var(--cond);font-weight:400;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:#0b1320;background:#36b3ff;
  border-radius:1rem;padding:.12rem .55rem}
.sdwrap{display:flex;flex-direction:column;align-items:center;gap:.15rem}
.demonote{display:none;font-family:var(--cond);font-weight:400;font-size:.66rem;letter-spacing:.04em;color:#ffc633;white-space:nowrap;text-transform:uppercase}
body.realppl .demonote{display:block}
body.realppl .sdwrap .badge.big{font-size:.9rem;padding:.12rem .6rem}
.slipnote{display:none;padding:.3rem .6rem;text-align:center;font-family:var(--cond);font-weight:400;font-size:.82rem;letter-spacing:.1em;color:#ffc633;
  background:#ffb40014;border-top:1px dashed #ffb40088;text-transform:uppercase}
body.realppl .slipnote{display:block}
.result i.dm{font-style:normal;font-size:1rem;letter-spacing:.14em;color:#06080c;background:#ffc633;border-radius:.3rem;padding:.05rem .4rem;vertical-align:.25rem}
.wm{position:absolute;left:.7rem;bottom:.3rem;font-family:var(--cond);font-weight:500;font-size:.8rem;letter-spacing:.2em;color:#ffb400;opacity:.85}
@media (max-aspect-ratio: 5/4){ html{font-size:1.25vw} }

.navlink{font-family:var(--cond);font-weight:400;font-size:.95rem;letter-spacing:.08em;text-transform:uppercase;color:#fff;text-decoration:none;white-space:nowrap;
  background:linear-gradient(180deg,#1f2b3b,#141c27);border:1px solid #2c3a4e;border-radius:.6rem;padding:.45rem .7rem;min-height:2.6rem;display:inline-flex;align-items:center}
.navlink:hover{border-color:var(--L)}
.demonote{display:block}
.slipnote{display:block}
.samplebar{display:none}
.card,.board,.bottom,.track{min-width:0;max-width:100%}
@media (max-width: 1280px){
  .menu-btn{display:inline-flex}
  .headnav{display:none;position:absolute;top:calc(100% + .35rem);right:0;z-index:30;flex-direction:column;align-items:stretch;
    background:#101820;border:1px solid #2c3a4e;border-radius:.7rem;padding:.45rem;min-width:12rem;box-shadow:0 .8rem 2rem #000c}
  .headnav.open{display:flex}
  .headnav .navlink,.headnav .replay{width:100%;justify-content:center}
}
@media (max-width: 1024px){
  html{font-size:15px}
  main{grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr) minmax(0,.85fr)}
  .classpill .cp-name{font-size:1.2rem}
  .name{font-size:1.6rem}
  .slip .v{font-size:1.55rem}
  .clock .big{font-size:2.4rem;min-width:0}
}
@media (max-width: 820px){
  html{font-size:15px}
  body{height:auto;min-height:100dvh;overflow-x:hidden;overflow-y:auto;display:flex;flex-direction:column;padding:.45rem;gap:.55rem}
  .samplebar{display:block;position:sticky;top:0;z-index:40;text-align:center;font-family:var(--cond);font-weight:500;letter-spacing:.06em;font-size:.78rem;color:#ffc633;background:#2a2108;border-bottom:2px dashed #ffb400;padding:.4rem .5rem}
  header{padding-bottom:.15rem}
  .event,.classpill{flex:1 1 100%;max-width:100%}
  .classpill{justify-content:space-between}
  .classpill .cp-name{font-size:1.05rem;letter-spacing:.04em}
  main{display:flex;flex-direction:column;gap:.55rem}
  #cardL{order:1} #cardR{order:2} .board{order:3}
  .card{display:grid;grid-template-columns:6.6rem minmax(0,1fr);min-height:0}
  .photo{min-height:7.4rem;height:auto}
  .lanetag,.R .lanetag{top:.35rem;left:.3rem;right:auto;max-width:calc(100% - .55rem);font-size:.62rem;font-weight:500;letter-spacing:.04em;padding:.08rem .28rem}
  .leadchip,.R .leadchip{top:auto;bottom:.35rem;left:.3rem;right:auto;font-size:.62rem;font-weight:500;letter-spacing:.06em;padding:.08rem .28rem}
  .winlight,.R .winlight{top:.3rem;right:.25rem;left:auto;width:1.15rem;height:1.15rem}
  .info{padding:.5rem .65rem .6rem;gap:.2rem}
  .name{font-size:1.25rem}
  .car{font-size:.82rem}
  .sponsors{gap:.25rem;margin-top:.15rem}
  .board{min-height:20rem}
  .slip{grid-auto-rows:minmax(1.7rem,1fr)}
  .slip .v{font-size:1.55rem}
  .carbox.dragster{width:8.6rem;height:2.15rem}
  .clock .big{font-size:2.2rem}
  .bottom{display:grid;grid-template-columns:4.4rem minmax(0,1fr);grid-template-rows:13.5rem auto;height:auto;min-height:0}
  .tree{grid-column:1;grid-row:1;height:13.5rem}
  .track{grid-column:2;grid-row:1;min-height:12rem;height:13.5rem}
  .h2h{grid-column:1 / -1;grid-row:2;max-height:none}
  .h2h summary{cursor:pointer;pointer-events:auto}
  .toast{font-size:1rem;letter-spacing:.06em;left:50%;max-width:92%}
  .gapread{font-size:.72rem}
}