/* DOWN BAD, THE MONITOR (the owner, Wed 21 Oct: every screen designed as a still and approved, "that is terrible design work"
   for what came before): every screen but the run is THE BUNKER'S CCTV MONITOR. An old tube's glass fills almost the whole
   screen (bowed, rounded, black round it), the live game seen through it: AMBER on the cover, the terms and the end screen, in its
   own colours on the stage and under the placards; over the picture the smoke, the grain, the scanlines, a slow rolling band, the
   glare and the bow of the glass; the monitor's own words in amber JetBrains Mono (the camera top left, LIVE, the sound and full
   screen keys top right, a camera frame's corners), one signal colour (#ffb000), Silkscreen for display.
   ONE SCALE: the stills were made at 1728 by 1000; every size here is the still's in px times --u (runner/main.js monLay: the
   viewport over the still's, the smaller of the two ways), so every desktop looks like the still. --sp is the display letters'
   step (Silkscreen is 8 letter px an em: on a 2x screen half a device px a letter px, as the stills have it, on a 1x screen a whole
   px, so they stay crisp; rounded down, so a word never outgrows its box), --dp a device px (lines on whole device px), --ti the
   glass's inset, --sx the room either side of the still's width. What sits by an edge of the glass keeps to that edge; the rest
   stands in .frame, the still's own box in the middle of the glass.
   MOTION: stepped, never blurred, all of it off under reduced motion. */
:root{--u:1px;--sp:2px;--dp:.5px;--ti:20px;--sx:0px}
#mon{position:fixed;inset:0;z-index:100;overflow:hidden;pointer-events:none;--A:#ffb000;
  --k6:max(var(--dp),round(calc(6 * var(--u)),var(--dp)));--b3:max(var(--dp),round(calc(3 * var(--u)),var(--dp)));--b2:max(var(--dp),round(calc(2 * var(--u)),var(--dp)));
  font:400 calc(16 * var(--u))/normal "JetBrains Mono",ui-monospace,monospace;-webkit-font-smoothing:antialiased;color:#ececec;
  opacity:1;transition:opacity .22s steps(4)}
#mon[hidden]{display:none}
#mon.out{opacity:0}
#mon.out,#mon.out *{pointer-events:none!important}   /* (fading out as the count begins: a finger put down now is the run's, the rev's) */
#mon,#mon *,#mon *::before,#mon *::after{box-sizing:border-box}
:where(#mon) :where(button,a){-webkit-appearance:none;appearance:none;margin:0;padding:0;border:0;background:none;font:inherit;color:inherit;cursor:pointer;text-decoration:none;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation}
:where(#mon) :where(button,a):focus-visible{outline:none}
:where(#mon) :where(p,h2){margin:0}
/* the glass: everything outside it black (its own shadow, just far enough to reach the screen's corners past its rounded ones), the
   picture under it */
#tv{position:absolute;inset:var(--ti);border-radius:calc(70 * var(--u))/calc(60 * var(--u));overflow:hidden;box-shadow:0 0 0 calc(2 * var(--ti) + 160 * var(--u)) #030303}
.frame{position:absolute;left:50%;top:50%;width:calc(1688 * var(--u));height:calc(960 * var(--u));margin:calc(-480 * var(--u)) 0 0 calc(-844 * var(--u))}
.scr{position:absolute;inset:0;display:none}
#mon[data-scr="cover"] #sCover,#mon[data-scr="ride"] #sRide,#mon[data-scr="stage"] #sStage,#mon[data-scr="end"] #sEnd,#mon[data-scr="replay"] #sRep{display:block}
/* ================= THE PICTURE: the run's own canvas under the glass ================= */
/* (the cover's cross fade, #cut below, wears the picture's own filter, so its frozen frame reads as the feed it froze) */
html[data-feed="amber"] #view,html[data-feed="amber"] #cut{filter:grayscale(1) sepia(1) saturate(2.6) hue-rotate(-12deg) brightness(.62) contrast(1.25) blur(.6px)}
html[data-feed="amber"][data-dim] #view,html[data-feed="amber"][data-dim] #cut{filter:grayscale(1) sepia(1) saturate(2.6) hue-rotate(-12deg) brightness(.62) contrast(1.25) blur(.6px) blur(calc(5 * var(--u))) brightness(.45)}
html[data-feed="col"][data-dim] #view,html[data-feed="col"][data-dim] #cut{filter:blur(calc(4 * var(--u))) brightness(.45)}
#tv .smoke{position:absolute;inset:0;background:radial-gradient(90% 80% at 50% 46%,rgba(8,6,3,.38),rgba(8,6,3,.72) 60%,rgba(4,3,2,.93))}
#mon[data-feed="col"] .smoke{background:radial-gradient(80% 70% at 50% 62%,rgba(6,5,4,0),rgba(6,5,4,.35) 55%,rgba(4,3,2,.8))}
#mon[data-scr="end"] .smoke{background:radial-gradient(90% 80% at 50% 50%,rgba(8,6,3,.62),rgba(8,6,3,.84) 60%,rgba(4,3,2,.95))}
#mon[data-scr="ride"] .smoke{display:none}
/* (the replay: the run's own heads up lies under the glass, so the smoke only darkens the very edges) */
#mon[data-scr="replay"] .smoke{background:radial-gradient(92% 88% at 50% 50%,rgba(6,5,4,0) 62%,rgba(6,5,4,.3) 84%,rgba(4,3,2,.62))}
/* THE GRAIN, a field of noise overlaid, still as the stills have it: over the live picture it lies in the page's own stack right over
   the run's canvas (#grain: the monitor's own stack would blend it with nothing under it), in the garage inside the glass over the
   room; then the scanlines and the glare as one layer, a faint band rolling down */
#grain,#tv .grain{pointer-events:none;opacity:.5;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E")}
#grain{position:fixed;inset:var(--ti);border-radius:calc(70 * var(--u))/calc(60 * var(--u));display:none}
html.mon-on[data-feed="amber"] #grain,html.mon-on[data-feed="col"] #grain{display:block}
html[data-feed="col"] #grain{opacity:.28}
html[data-dim="5"] #grain{filter:blur(calc(5 * var(--u))) brightness(.45)}
html[data-dim="4"] #grain{filter:blur(calc(4 * var(--u))) brightness(.45)}
#tv .grain{position:absolute;inset:0;display:none}
#mon[data-scr="ride"] #tv .grain{display:block}
/* THE CUT's cross fade (runner/cut.js): the outgoing camera's last frame over the live picture and under the grain, on the run's
   canvas's very box (set by the script), every render px whole, fading out */
#cut{position:fixed;left:0;top:0;display:block;pointer-events:none;image-rendering:pixelated}
#cut[hidden]{display:none}
#tv .fx{position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(160deg,rgba(255,236,190,.10) 0%,rgba(255,236,190,.03) 22%,transparent 40%),repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0 1px,transparent 1px 4px)}
#mon[data-feed="col"] .fx{background:linear-gradient(160deg,rgba(255,236,190,.10) 0%,rgba(255,236,190,.03) 22%,transparent 40%),repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 4px)}
#tv .roll{position:absolute;left:0;right:0;top:0;height:22%;background:linear-gradient(rgba(255,214,150,0),rgba(255,214,150,.035) 50%,rgba(255,214,150,0));
  transform:translateY(-100%);animation:roll 11s steps(330) infinite}
@keyframes roll{0%{transform:translateY(-100%)}100%{transform:translateY(455%)}}
#tv .bow{position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 calc(160 * var(--u)) calc(40 * var(--u)) rgba(0,0,0,.75),inset 0 0 0 var(--b2) rgba(255,190,80,.10)}
/* ================= THE MONITOR'S OWN WORDS, amber phosphor ================= */
.osd{position:absolute;font:700 calc(14 * var(--u))/1 "JetBrains Mono",monospace;letter-spacing:.2em;color:rgba(255,176,0,.85);text-shadow:0 0 calc(10 * var(--u)) rgba(255,150,0,.45);
  text-transform:uppercase;white-space:nowrap}
.osd.tl{left:calc(128 * var(--u));top:calc(112 * var(--u));line-height:calc(40 * var(--u))}
.osd.tr{right:calc(128 * var(--u));top:calc(112 * var(--u));display:flex;align-items:center;gap:calc(22 * var(--u))}
.osd .rec{display:inline-flex;align-items:center;gap:calc(10 * var(--u))}
.osd .rec i{width:calc(12 * var(--u));height:calc(12 * var(--u));border-radius:50%;background:#ff4d3d;box-shadow:0 0 calc(10 * var(--u)) #ff4d3d;animation:live 1.6s steps(1) infinite}
@keyframes live{55%{opacity:.18}}
/* (the two keys: the still's 40 px frame, pressed over 44 px or more) */
#mon .ic{position:relative;width:calc(40 * var(--u));height:calc(40 * var(--u));display:flex;align-items:center;justify-content:center;box-sizing:border-box;
  border:var(--b2) solid rgba(255,176,0,.55);color:rgba(255,176,0,.9);pointer-events:auto}
#mon .ic svg{width:calc(20 * var(--u));height:calc(20 * var(--u));fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:square;stroke-linejoin:miter}
#mon .ic:hover,#mon .ic:focus-visible{border-color:#ffb000;color:#ffcf6b;background:rgba(255,176,0,.08)}
#mon .ic::after,#mon .lk::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,44px);height:max(100%,44px);transform:translate(-50%,-50%)}
#mSnd .off,#mSnd[aria-pressed="false"] .on,#mFs .co,#mFs.on .ex{display:none}
#mSnd[aria-pressed="false"] .off,#mFs.on .co{display:block}
.osd.bl{left:calc(128 * var(--u));bottom:calc(112 * var(--u));color:rgba(255,176,0,.6);font-weight:500}
.osd.br{right:calc(128 * var(--u));bottom:calc(112 * var(--u));display:flex;gap:calc(30 * var(--u));color:rgba(255,176,0,.6);font-weight:500}
#mon .lk{display:block;pointer-events:auto;line-height:1}
#mon .br .lk{position:relative}
#mon .lk:hover,#mon .lk:focus-visible{color:#ffb000}
/* the corners of the camera's frame */
.tick{position:absolute;width:calc(40 * var(--u));height:calc(40 * var(--u));box-sizing:border-box;border:var(--b3) solid rgba(255,176,0,.55)}
.tick.a{left:calc(62 * var(--u));top:calc(62 * var(--u));border-right:0;border-bottom:0}.tick.b{right:calc(62 * var(--u));top:calc(62 * var(--u));border-left:0;border-bottom:0}
.tick.c{left:calc(62 * var(--u));bottom:calc(62 * var(--u));border-right:0;border-top:0}.tick.d{right:calc(62 * var(--u));bottom:calc(62 * var(--u));border-left:0;border-top:0}
/* which of the bottom words show: LEADERBOARD and TERMS PRIVACY on the cover and the end screen */
#mon #mBoard,#mon .osd.br{display:none}
#mon[data-scr="cover"] #mBoard,#mon[data-scr="end"] #mBoard{display:grid}
#mon[data-scr="cover"] .osd.br,#mon[data-scr="end"] .osd.br{display:flex}
/* a word that swaps for a moment (SOON, SIGN OUT) in the same box: both laid on one cell, the box as wide as the wider */
#mon .a,#mon .o{grid-area:1/1;text-align:center}
#mon .o{visibility:hidden}
#mon .lk:has(.o),#mon #cConn,#mon #oBoard,#mon #oNo,#mon #tHd,#mon #oWhy{display:grid;justify-items:center;align-items:center}
#mon .on2 .a{visibility:hidden}#mon .on2 .o{visibility:visible}
/* ================= THE KEYS, in pixel steps ================= */
#mon .k{position:relative;width:calc(300 * var(--u));height:max(44px,calc(72 * var(--u)));display:flex;align-items:center;justify-content:center;gap:calc(16 * var(--u));box-sizing:border-box;
  font:400 round(down,calc(24 * var(--u)),var(--sp))/1 Silkscreen,monospace;letter-spacing:.14em;white-space:nowrap;pointer-events:auto;
  clip-path:polygon(0 var(--k6),var(--k6) var(--k6),var(--k6) 0,calc(100% - var(--k6)) 0,calc(100% - var(--k6)) var(--k6),100% var(--k6),100% calc(100% - var(--k6)),calc(100% - var(--k6)) calc(100% - var(--k6)),calc(100% - var(--k6)) 100%,var(--k6) 100%,var(--k6) calc(100% - var(--k6)),0 calc(100% - var(--k6)))}
#mon .k.start{background:#ffb000;color:#0a0a0a;box-shadow:inset 0 var(--k6) 0 rgba(255,255,255,.35),inset 0 calc(-1 * var(--k6)) 0 rgba(120,60,0,.5)}
#mon .k.start i{width:0;height:0;border-left:calc(13 * var(--u)) solid #0a0a0a;border-top:calc(10 * var(--u)) solid transparent;border-bottom:calc(10 * var(--u)) solid transparent}
#mon .k.wal{background:rgba(10,8,4,.55);color:#ffcf6b;box-shadow:inset 0 0 0 var(--b3) rgba(255,176,0,.75)}
#mon .k.start:hover:not(:disabled){background:#ffc233}
#mon .k.start:active:not(:disabled){background:#e49e01}
#mon .k.wal:hover{background:rgba(40,28,6,.7);color:#ffe7a8}
#mon .k:disabled{cursor:default;filter:grayscale(1) brightness(.6)}
/* the key a controller or Tab is on: the camera frame's corners inside it, in its own letters' colour */
#mon .k.sel,#mon .b.sel,#mon .arw.sel{outline:none}
#mon :is(.k,.b,.arw).sel::after,html.kbd #mon :is(.k,.b,.arw):focus-visible::after{content:"";position:absolute;inset:calc(9 * var(--u));pointer-events:none;
  --l:calc(14 * var(--u));--w:var(--b3);--c:currentColor;
  background:linear-gradient(var(--c),var(--c)) left top/var(--l) var(--w) no-repeat,linear-gradient(var(--c),var(--c)) left top/var(--w) var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) right top/var(--l) var(--w) no-repeat,linear-gradient(var(--c),var(--c)) right top/var(--w) var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) left bottom/var(--l) var(--w) no-repeat,linear-gradient(var(--c),var(--c)) left bottom/var(--w) var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) right bottom/var(--l) var(--w) no-repeat,linear-gradient(var(--c),var(--c)) right bottom/var(--w) var(--l) no-repeat}
#mon .arw.sel::after,html.kbd #mon .arw:focus-visible::after{--c:#ffb000}
html.kbd #mon .lk:focus-visible,html.kbd #mon .ic:focus-visible{outline:var(--b2) solid #ffb000;outline-offset:calc(4 * var(--u))}
/* ================= THE COVER ================= */
/* the camera's caption along the foot of the picture (the owner, Thu 22 Oct: the caution tape's words as the monitor's own words):
   the OSD's letters, in the middle of the camera frame's bottom line */
#sCover .cap{left:0;right:0;bottom:calc(56 * var(--u));text-align:center}
#sCover .cap i{font-style:normal}
/* the name: runner/cover.js drops its letters in from the top of the glass (laid by runner/main.js layCover on whole device px) */
#cvMark{position:absolute;left:0;top:0;display:block;image-rendering:pixelated;filter:drop-shadow(0 0 calc(40 * var(--u)) rgba(255,160,0,.28)) drop-shadow(0 calc(16 * var(--u)) 0 rgba(0,0,0,.55))}
#sCover .keys{position:absolute;left:50%;top:calc(700 * var(--u));transform:translateX(-50%);display:flex;gap:calc(24 * var(--u))}
#sCover .hint{position:absolute;left:50%;top:calc(798 * var(--u));transform:translateX(-50%);font:500 calc(12 * var(--u))/1 "JetBrains Mono",monospace;letter-spacing:.24em;color:rgba(255,176,0,.5);white-space:nowrap}
/* (a replay link refused: its line in the signal colour while it shows) */
#sCover .hint.note{color:#ffb000}
/* the keys come up as the last letter lands */
#sCover .keys,#sCover .hint{transition:opacity .24s steps(4),visibility 0s .24s;opacity:0;visibility:hidden}
#sCover.up .keys,#sCover.up .hint{opacity:1;visibility:visible;transition:opacity .24s steps(4)}
/* connected: the key holds the address, SIGN OUT under a pointer or a key */
#cConn.me .a{text-transform:uppercase;letter-spacing:.08em}
#cConn.me:hover .a,#cConn.me:focus-visible .a{visibility:hidden}#cConn.me:hover .o,#cConn.me:focus-visible .o{visibility:visible}
/* (the owner, Thu 22 Oct: no reason to connect a wallet until the mint) the wallet's key off, runner/main.js WALLET_KEY: START alone in
   the middle, and on an upright phone the line under it one key nearer */
#mon #cConn[hidden]{display:none}
#mon.cmp:not(.land) #sCover:has(#cConn[hidden]) .hint{top:calc(var(--mkT,40%) + var(--mkH,60px) + 110 * var(--u) + max(44px,calc(72 * var(--u))) + 26 * var(--u))}
/* ================= YOUR RIDE: THE GARAGE ================= */
#garage{position:absolute;inset:0;display:none}
#mon[data-scr="ride"] #garage{display:block}
#garage .room{position:absolute;inset:0;overflow:hidden;background:linear-gradient(180deg,#120f0b 0%,#0d0b08 52%,#16120c 52.2%,#0b0907 100%)}
/* the floor's grid in perspective (the still's: a 120 by 46 grid laid back 58 degrees under a 500 px perspective), drawn flat as a
   picture by runner/main.js floorGrid, so it costs the compositor nothing */
#garage .floor{position:absolute;left:0;right:0;top:52%;bottom:0;background:no-repeat 0 0 / 100% 100%}
#garage .beam{position:absolute;left:50%;top:calc(-40 * var(--u));width:calc(900 * var(--u));height:calc(900 * var(--u));transform:translateX(-50%);
  background:linear-gradient(180deg,rgba(255,214,140,.16),rgba(255,214,140,.05) 70%,transparent);clip-path:polygon(40% 0,60% 0,100% 100%,0 100%)}
#garage .lamp{position:absolute;left:50%;top:calc(40 * var(--u));width:calc(120 * var(--u));height:calc(26 * var(--u));transform:translateX(-50%);background:#0a0a0a;
  box-shadow:0 calc(10 * var(--u)) calc(30 * var(--u)) rgba(255,200,120,.45),inset 0 calc(-6 * var(--u)) 0 #ffe7a8}
/* the turntable and its pool of light where runner/main.js layRoom puts them: the platform's top the car's own turn's rim (--ttX,
   --ttY, --ttW, --ttH: its box), its side band --ttR deep (the still's shapes: its 860 by 150 disc, 26 deep, made the car's) */
#garage .pool{position:absolute;left:calc(var(--ttX,0px) - var(--ttW,860px) * .14);top:calc(var(--ttY,596px) - var(--ttH,150px) * .2);width:calc(var(--ttW,860px) * 1.28);height:calc(var(--ttH,150px) * 1.87);background:radial-gradient(50% 50% at 50% 50%,rgba(255,200,120,.22),transparent 70%)}
/* the turntable: a dark disc, its top lit, its edge one solid gunmetal (the owner, Thu 22 Oct: "it pulls too much attention away
   from the car, just make it a solid edge that has some variance with shadow") and its ring of lamps, amber and pale by turns, chasing round it */
#garage .tt{--a:calc(var(--ttR,26px) / 13);position:absolute;left:var(--ttX,0px);top:var(--ttY,596px);width:var(--ttW,860px);height:calc(var(--ttH,150px) + var(--ttR,26px) + 14px)}
/* (the edge in the platform's own art px (--a, a 13th of its depth: whole device px), three of the 256 deep: its lip catching the
   lamp (::after, 2 deep), its side (::before, 6) and its foot (the rim, 5), each a disc the platform's size dropped that far so its
   band follows the curve; darker to the ends as the pool's light falls off; under it a stepped contact shadow on the floor (::before
   of the turntable), no blur) */
#garage .tt::before{content:"";position:absolute;left:calc(-34 * var(--a));right:calc(-34 * var(--a));top:calc(var(--ttR,26px) - 2 * var(--a));height:calc(var(--ttH,150px) + 12 * var(--a));
  background:radial-gradient(closest-side,rgba(0,0,0,.5) 0 93%,rgba(0,0,0,.3) 93% 96.5%,rgba(0,0,0,.15) 96.5% 100%,transparent 100%)}
#garage .rim,#garage .rim::before,#garage .rim::after{border-radius:50%}
#garage .rim{position:absolute;left:0;right:0;top:var(--ttR,26px);height:var(--ttH,150px);
  background:linear-gradient(90deg,#0a0a0a 0 14%,#111111 14% 28%,#171717 28% 72%,#111111 72% 86%,#0a0a0a 86%)}
#garage .rim::before,#garage .rim::after{content:"";position:absolute;left:0;right:0;height:100%}
#garage .rim::before{top:calc(-5 * var(--a));background:linear-gradient(90deg,#111111 0 14%,#171717 14% 28%,#282726 28% 72%,#171717 72% 86%,#111111 86%)}
#garage .rim::after{top:calc(-11 * var(--a));background:linear-gradient(90deg,#282726 0 14%,#383635 14% 28%,#484746 28% 72%,#383635 72% 86%,#282726 86%)}
#garage .top{position:absolute;left:0;right:0;top:0;height:var(--ttH,150px);border-radius:50%;background:radial-gradient(60% 70% at 50% 40%,#3a342b,#1d1a15 60%,#12100d);
  box-shadow:inset 0 calc(-6 * var(--u)) 0 rgba(0,0,0,.6),inset 0 calc(4 * var(--u)) 0 rgba(255,220,160,.18)}
#garage .ring{position:absolute;left:8.14%;right:8.14%;top:calc(var(--ttH,150px) * .12);height:calc(var(--ttH,150px) * .76);border-radius:50%;box-shadow:0 0 0 var(--b3) rgba(255,176,0,.35)}
#garage .leds{position:absolute;left:0;right:0;top:0;height:var(--ttH,150px)}
#garage .leds i{position:absolute;width:calc(10 * var(--u));height:calc(10 * var(--u));margin:calc(-5 * var(--u));background:#ffb000;box-shadow:0 0 calc(10 * var(--u)) rgba(255,190,90,.9)}
#garage .leds i.p{background:#ffe7a8}
/* (the chase: a lamp at a time burns white hot for a moment, round the rim the way it turns; the owner, Thu 22 Oct: "i like the
   lights around the turntable, you can put them back") */
#garage .leds i::after{content:"";position:absolute;inset:0;background:#fffbe6;box-shadow:0 0 calc(14 * var(--u)) rgba(255,240,200,.95);opacity:0;animation:led 1.2s steps(1) infinite;animation-delay:var(--dl,0s)}
@keyframes led{0%{opacity:1}8.33%{opacity:0}}
/* the ride on it: a canvas over the garage (runner/showroom.js), laid on whole device px */
#ttRide{position:absolute;left:0;top:0;display:block;image-rendering:pixelated}
#sRide .ttl{position:absolute;left:50%;top:calc(112 * var(--u));transform:translateX(-50%);text-align:center;font:700 calc(14 * var(--u))/1 "JetBrains Mono",monospace;letter-spacing:.3em;color:rgba(255,176,0,.85);white-space:nowrap}
#sRide .dashes{position:absolute;left:50%;top:calc(146 * var(--u));transform:translateX(-50%);display:flex;gap:calc(10 * var(--u))}
#sRide .dashes i{width:calc(14 * var(--u));height:calc(6 * var(--u));background:rgba(255,176,0,.3)}#sRide .dashes i.on{background:#ffb000}
#mon .arw{position:absolute;display:flex;align-items:center;justify-content:center;pointer-events:auto;box-sizing:border-box;
  clip-path:polygon(0 5px,5px 5px,5px 0,calc(100% - 5px) 0,calc(100% - 5px) 5px,100% 5px,100% calc(100% - 5px),calc(100% - 5px) calc(100% - 5px),calc(100% - 5px) 100%,5px 100%,5px calc(100% - 5px),0 calc(100% - 5px))}
#mon .arw:hover,#mon .arw:focus-visible{background:rgba(60,40,6,.75)}
#mon .arw:active{background:rgba(255,176,0,.25)}
#mon .arw svg{display:block}
#sRide .arw{top:calc(470 * var(--u));width:max(44px,calc(88 * var(--u)));height:max(44px,calc(88 * var(--u)));background:rgba(10,8,4,.7);box-shadow:inset 0 0 0 var(--b3) #ffb000}
#sRide .arw svg{width:calc(40 * var(--u));height:calc(40 * var(--u));fill:#ffb000}
#sRide .arw.l{left:calc(150 * var(--u))}#sRide .arw.r{right:calc(150 * var(--u))}
#sRide .foot2{position:absolute;left:50%;bottom:calc(92 * var(--u));transform:translateX(-50%);display:flex;align-items:center;gap:calc(40 * var(--u))}
/* (the name's block as wide as the still's, CAR over LOW AND CLOSE; a longer name runs out to the left, so CHOOSE never moves) */
#sRide .nm2{display:flex;justify-content:flex-end;width:calc(138.58 * var(--u))}
#sRide .nm2 .in{flex:none;display:grid;justify-items:stretch}
#sRide .nm2 .gh{display:none}
#sRide .nm2 b{display:block;font:400 min(round(down,calc(54 * var(--u)),var(--sp)),var(--nmF,999px))/1 Silkscreen,monospace;letter-spacing:.08em;color:#fbfbf6;text-shadow:0 0 calc(24 * var(--u)) rgba(255,170,40,.3);white-space:nowrap}
#sRide .nm2 span{display:block;margin-top:calc(10 * var(--u));font:700 calc(13 * var(--u))/1 "JetBrains Mono",monospace;letter-spacing:.22em;color:rgba(255,176,0,.8);white-space:nowrap}
#sRide.locked .nm2 b{color:#5a6167}
/* ================= THE STAGE ================= */
#sStage .head{position:absolute;left:50%;top:var(--hdT,calc(112 * var(--u)));transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;isolation:isolate}
#sStage .head::before{content:"";position:absolute;left:calc(-260 * var(--u));right:calc(-260 * var(--u));top:calc(-60 * var(--u));bottom:calc(-40 * var(--u));z-index:-1;
  background:radial-gradient(50% 50% at 50% 50%,rgba(6,5,4,.78),rgba(6,5,4,0))}
#sStage .k0{font:700 calc(14 * var(--u))/1 "JetBrains Mono",monospace;letter-spacing:.3em;color:rgba(255,176,0,.85);text-shadow:0 0 calc(10 * var(--u)) rgba(255,150,0,.4);white-space:nowrap}
#sStage .nm{font:400 round(down,calc(72 * var(--u)),var(--sp))/1 Silkscreen,monospace;letter-spacing:.06em;color:#fbfbf6;margin:calc(16 * var(--u)) 0 calc(12 * var(--u));white-space:nowrap;
  text-shadow:0 0 calc(30 * var(--u)) rgba(255,170,40,.3),0 calc(6 * var(--u)) 0 rgba(0,0,0,.7)}
#sStage .ds{font:700 calc(14 * var(--u))/1 "JetBrains Mono",monospace;letter-spacing:.22em;color:rgba(236,236,236,.85);white-space:nowrap}
#sStage .chs{display:flex;gap:calc(10 * var(--u));margin-top:calc(16 * var(--u))}
#sStage .chs i{width:calc(30 * var(--u));height:calc(24 * var(--u));display:flex;align-items:center;justify-content:center;font:400 round(down,calc(13 * var(--u)),var(--sp))/1 Silkscreen,monospace;font-style:normal;
  color:rgba(255,176,0,.75);box-shadow:inset 0 0 0 var(--b2) rgba(255,176,0,.45);background:rgba(10,8,4,.5)}
#sStage .chs i.on{background:#ffb000;color:#0a0a0a;box-shadow:none}
#sStage .k.start{width:calc(320 * var(--u));margin-top:calc(24 * var(--u))}
#sStage .arw{top:calc(560 * var(--u));width:max(44px,calc(76 * var(--u)));height:max(44px,calc(76 * var(--u)));background:rgba(10,8,4,.6);box-shadow:inset 0 0 0 var(--b3) rgba(255,176,0,.8)}
#sStage .arw svg{width:calc(36 * var(--u));height:calc(36 * var(--u));fill:#ffb000}
#sStage .arw.l{left:calc(330 * var(--u))}#sStage .arw.r{right:calc(330 * var(--u))}
#sBack{color:rgba(255,176,0,.75);text-shadow:none;font-weight:700}
#sBack:hover,#sBack:focus-visible{color:#ffb000}
/* ================= THE END SCREEN ================= */
#sEnd .grid{position:absolute;left:50%;top:50%;transform:translate(-50%,-52%);display:flex;align-items:center;gap:calc(88 * var(--u))}
#sEnd .card{width:calc(300 * var(--u));display:flex;flex-direction:column;align-items:center;gap:calc(18 * var(--u))}
/* (the frame the still's 300 px; the picture in it at whole device px an art px, the PFP's own background round it) */
#sEnd .pf{display:flex;align-items:center;justify-content:center;width:calc(300 * var(--u));height:calc(300 * var(--u));background:var(--pfbg,#c4c4c4);
  box-shadow:0 0 0 calc(6 * var(--u)) #0a0a0a,0 0 0 calc(10 * var(--u)) #ffb000,0 calc(24 * var(--u)) calc(50 * var(--u)) rgba(0,0,0,.6)}
#oPfp{display:block;image-rendering:pixelated}
#sEnd .who{font:700 calc(13 * var(--u))/1 "JetBrains Mono",monospace;letter-spacing:.2em;color:rgba(255,176,0,.75);margin-top:calc(10 * var(--u));white-space:nowrap}
#sEnd .bests{display:flex;gap:calc(14 * var(--u));width:100%}
#sEnd .bests div{flex:1;padding:calc(14 * var(--u)) 0 calc(12 * var(--u));text-align:center;background:rgba(10,8,4,.6);box-shadow:inset 0 0 0 var(--b2) rgba(255,176,0,.45)}
#sEnd .bests i{display:block;font:500 calc(11 * var(--u))/1 "JetBrains Mono",monospace;letter-spacing:.2em;color:rgba(255,176,0,.7);font-style:normal;margin-bottom:calc(9 * var(--u));white-space:nowrap}
#sEnd .bests b{font:400 round(down,calc(26 * var(--u)),var(--sp))/1 Silkscreen,monospace;color:#ececec;white-space:nowrap}
/* (a dash, drawn: no board yet) */
#sEnd .nil{display:inline-block;vertical-align:middle;width:calc(20 * var(--u));height:max(var(--dp),round(calc(3 * var(--u)),var(--dp)));background:#ececec}
#sEnd .tot{display:flex;flex-direction:column;align-items:center;position:relative}
#sEnd .lab{font:400 round(down,calc(26 * var(--u)),var(--sp))/1 Silkscreen,monospace;letter-spacing:.2em;color:#ffb000;text-shadow:0 0 calc(18 * var(--u)) rgba(255,150,0,.5);white-space:nowrap}
#sEnd .num{font:400 round(down,calc(172 * var(--u)),var(--sp))/1 Silkscreen,monospace;letter-spacing:.02em;color:#fbfbf6;margin:calc(18 * var(--u)) 0 calc(8 * var(--u));white-space:nowrap;text-align:center;
  text-shadow:0 0 calc(50 * var(--u)) rgba(255,170,40,.35),0 calc(10 * var(--u)) 0 rgba(0,0,0,.6)}
#sEnd .new{position:absolute;right:calc(-74 * var(--u));top:calc(-6 * var(--u));transform:rotate(9deg);background:#ffb000;color:#0a0a0a;padding:calc(10 * var(--u)) calc(14 * var(--u)) calc(9 * var(--u));
  font:400 round(down,calc(20 * var(--u)),var(--sp))/1 Silkscreen,monospace;letter-spacing:.08em;white-space:nowrap;box-shadow:0 calc(6 * var(--u)) 0 rgba(0,0,0,.5);
  border-top:calc(7 * var(--u)) solid transparent;border-image:repeating-linear-gradient(-45deg,#0a0a0a 0 calc(7 * var(--u)),#ffb000 calc(7 * var(--u)) calc(14 * var(--u))) 7;visibility:hidden}
#sEnd .new.on{visibility:visible}
#sEnd .new.slap{animation:slap .3s steps(5) 1}
@keyframes slap{0%{transform:rotate(9deg) scale(2.2);opacity:0}40%{opacity:1}70%{transform:rotate(9deg) scale(.9)}100%{transform:rotate(9deg)}}
#sEnd .stats{display:flex;margin-top:calc(22 * var(--u));border-top:var(--b2) solid rgba(255,176,0,.35);border-bottom:var(--b2) solid rgba(255,176,0,.35)}
#sEnd .stats div{width:calc(190 * var(--u));padding:calc(18 * var(--u)) 0 calc(16 * var(--u));text-align:center}
#sEnd .stats div+div{border-left:var(--b2) solid rgba(255,176,0,.2)}
#sEnd .stats i{display:block;font:500 calc(12 * var(--u))/1 "JetBrains Mono",monospace;letter-spacing:.22em;color:rgba(255,176,0,.75);font-style:normal;margin-bottom:calc(12 * var(--u));white-space:nowrap}
#sEnd .stats b{font:400 round(down,calc(30 * var(--u)),var(--sp))/1 Silkscreen,monospace;color:#ececec;white-space:nowrap}
#sEnd .stats b.am{color:#ffb000}
/* (the keys: PLAY AGAIN and THE BOARD, and under them, smaller, REPLAY and SHARE in the same columns) */
#sEnd .ends{display:grid;grid-template-columns:calc(320 * var(--u)) calc(240 * var(--u));gap:calc(16 * var(--u)) calc(20 * var(--u));margin-top:calc(40 * var(--u))}
#again{width:calc(320 * var(--u))!important}#oBoard{width:calc(240 * var(--u))!important}
#mon .k.sm{width:100%;height:max(44px,calc(54 * var(--u)));font-size:round(down,calc(18 * var(--u)),var(--sp))}
/* (a line under the keys for a moment: SHARE pressed on a controller, which a browser never lets open X; laid over nothing, so
   nothing moves) */
#sEnd .ends{position:relative}
#oHint{position:absolute;left:50%;top:calc(100% + 22 * var(--u));transform:translateX(-50%);margin:0;font:500 max(10px,calc(12 * var(--u)))/1 "JetBrains Mono",monospace;letter-spacing:.24em;color:#ffb000;white-space:nowrap;visibility:hidden;pointer-events:none}
#oHint.on{visibility:visible}
/* ================= THE REPLAY (runner/main.js rpStart): the run as the CCTV feed, CAM and its stage top left, REPLAY top right, the
   run's own heads up under the glass (laid in it by main.js monLay, --rpT, --rpS, --rpB), and at the foot one bar: the timeline with
   the run's moments (a stage crossed, a hit, the furthest metre at its end) and the keys (back 5 s, pause, forward 5 s, twice as fast,
   EXIT at the left) ================= */
/* (a shade under the bar, so its words and keys read over any picture) */
#sRep::before{content:"";position:absolute;left:0;right:0;bottom:0;height:calc(240 * var(--u));background:linear-gradient(rgba(6,5,4,0),rgba(6,5,4,.62))}
#sRep .bar{position:absolute;left:calc(128 * var(--u));right:calc(128 * var(--u));bottom:calc(96 * var(--u));display:flex;flex-direction:column;gap:calc(14 * var(--u))}
#sRep .tl{position:relative;display:flex;align-items:center;gap:calc(18 * var(--u));height:max(24px,calc(28 * var(--u)));pointer-events:auto;cursor:pointer;touch-action:none}
#sRep .trk{position:relative;flex:1;height:max(var(--dp),round(calc(4 * var(--u)),var(--dp)));background:rgba(255,176,0,.3)}
#rpFill{position:absolute;inset:0;background:#ffb000;transform-origin:0 50%;transform:scaleX(0)}
#rpPh{position:absolute;left:calc(-2 * var(--u));top:50%;width:calc(4 * var(--u));height:calc(20 * var(--u));margin-top:calc(-10 * var(--u));background:#ffe7a8;box-shadow:0 0 calc(10 * var(--u)) rgba(255,190,90,.8)}
#rpMk{position:absolute;inset:0;pointer-events:none}
#rpMk i{position:absolute;bottom:calc(100% + 3 * var(--u));width:max(var(--dp),round(calc(3 * var(--u)),var(--dp)));height:calc(12 * var(--u));background:rgba(236,236,236,.85)}
#rpMk i.h{width:max(var(--dp),round(calc(3 * var(--u)),var(--dp)));height:calc(14 * var(--u));background:#ff4d3d}
#rpMk i.e{width:max(var(--dp),round(calc(3 * var(--u)),var(--dp)));height:calc(14 * var(--u));background:#ffb000}
/* (the furthest metre's width kept from the start, nine letters and their spacing, so the track never narrows as it comes) */
#rpEnd{flex:none;min-width:calc(9ch + 1.44em);text-align:right;font:700 calc(13 * var(--u))/1 "JetBrains Mono",monospace;letter-spacing:.16em;color:#ffb000;white-space:nowrap}
#sRep .row{position:relative;display:flex;align-items:center;justify-content:center;height:max(44px,calc(52 * var(--u)))}
#rpExit{position:absolute;left:0;top:50%;transform:translateY(-50%);font:700 calc(14 * var(--u))/1 "JetBrains Mono",monospace;letter-spacing:.2em;color:rgba(255,176,0,.75)}
#rpExit:hover,#rpExit:focus-visible{color:#ffb000}
#sRep .tp{display:flex;gap:calc(22 * var(--u))}
#sRep .ic{width:calc(52 * var(--u));height:calc(52 * var(--u));background:rgba(10,8,4,.55)}
#sRep .ic svg{width:calc(24 * var(--u));height:calc(24 * var(--u));fill:currentColor;stroke:none}
/* (pause and play, the key that matters most: amber) */
#mon #rpPlay{background:#ffb000;border-color:#ffb000;color:#0a0a0a}
#mon #rpPlay:hover,#mon #rpPlay:focus-visible{background:#ffc233;border-color:#ffc233;color:#0a0a0a}
#sRep .ic.tx{font:700 calc(16 * var(--u))/1 "JetBrains Mono",monospace;letter-spacing:.06em}
#mon #rpSpd[aria-pressed="true"]{background:#ffb000;border-color:#ffb000;color:#0a0a0a}
#rpPlay .pl,#rpPlay.p .pa{display:none}#rpPlay.p .pl{display:block}
/* (paused: the dot holds still) */
#mon.pz .osd .rec i{animation:none}
html.kbd #mon #rpExit:focus-visible{outline:var(--b2) solid #ffb000;outline-offset:calc(4 * var(--u))}
/* ================= THE PLACARDS: amber, a hazard band along the top, on the dimmed monitor ================= */
#mon .dlg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:calc(560 * var(--u));box-sizing:border-box;background:#ffb000;color:#0a0a0a;text-align:center;pointer-events:auto;display:none;
  --c8:max(var(--dp),round(calc(8 * var(--u)),var(--dp)));
  clip-path:polygon(0 var(--c8),var(--c8) var(--c8),var(--c8) 0,calc(100% - var(--c8)) 0,calc(100% - var(--c8)) var(--c8),100% var(--c8),100% calc(100% - var(--c8)),calc(100% - var(--c8)) calc(100% - var(--c8)),calc(100% - var(--c8)) 100%,var(--c8) 100%,var(--c8) calc(100% - var(--c8)),0 calc(100% - var(--c8)));
  box-shadow:inset 0 var(--c8) 0 rgba(255,255,255,.3),inset 0 calc(-1 * var(--c8)) 0 rgba(120,60,0,.45);filter:drop-shadow(0 calc(30 * var(--u)) calc(60 * var(--u)) rgba(0,0,0,.7))}
#mon[data-dlg="terms"] #terms,#mon[data-dlg="pause"] #paused,#mon[data-dlg="offer"] #offer{display:block}
#mon .dlg .band{height:calc(22 * var(--u));background:repeating-linear-gradient(-45deg,#0a0a0a 0 calc(14 * var(--u)),#ffb000 calc(14 * var(--u)) calc(28 * var(--u)));margin:var(--c8) var(--c8) 0}
#mon .dlg .in{padding:calc(30 * var(--u)) calc(44 * var(--u)) calc(40 * var(--u))}
#mon .dlg h2{margin:0;font:400 round(down,calc(32 * var(--u)),var(--sp))/1 Silkscreen,monospace;letter-spacing:.14em;white-space:nowrap}
#mon .dlg .pbig{font:400 round(down,calc(96 * var(--u)),var(--sp))/1 Silkscreen,monospace;margin:calc(26 * var(--u)) 0 calc(12 * var(--u));letter-spacing:.02em;white-space:nowrap}
#mon .dlg .sub{display:flex;justify-content:center;gap:calc(34 * var(--u));font:700 calc(16 * var(--u))/1 "JetBrains Mono",monospace;letter-spacing:.16em;white-space:nowrap}
#mon .dlg .ks{display:flex;flex-direction:column;gap:calc(14 * var(--u));margin-top:calc(32 * var(--u))}
#mon .dlg .b{position:relative;height:max(44px,calc(66 * var(--u)));display:flex;align-items:center;justify-content:center;gap:calc(14 * var(--u));pointer-events:auto;
  font:400 round(down,calc(22 * var(--u)),var(--sp))/1 Silkscreen,monospace;letter-spacing:.14em;
  clip-path:polygon(0 5px,5px 5px,5px 0,calc(100% - 5px) 0,calc(100% - 5px) 5px,100% 5px,100% calc(100% - 5px),calc(100% - 5px) calc(100% - 5px),calc(100% - 5px) 100%,5px 100%,5px calc(100% - 5px),0 calc(100% - 5px))}
#mon .dlg .b1{background:#0a0a0a;color:#ffb000}
#mon .dlg .b1:hover{background:#1f1a12}
#mon .dlg .b2{color:#0a0a0a;box-shadow:inset 0 0 0 var(--b3) #0a0a0a;height:max(44px,calc(54 * var(--u)));font-size:round(down,calc(18 * var(--u)),var(--sp))}
#mon .dlg .b2:hover{background:rgba(10,10,10,.1)}
#mon .dlg .b1 i{width:0;height:0;border-left:calc(13 * var(--u)) solid #ffb000;border-top:calc(10 * var(--u)) solid transparent;border-bottom:calc(10 * var(--u)) solid transparent}
#mon .dlg .ring{width:calc(150 * var(--u));height:calc(150 * var(--u));margin:calc(24 * var(--u)) auto calc(6 * var(--u));position:relative}
#mon .dlg .ring svg{display:block;width:100%;height:100%;transform:rotate(-90deg)}
#mon .dlg .ring b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:400 round(down,calc(64 * var(--u)),var(--sp))/1 Silkscreen,monospace}
#mon .dlg .ring b.ask{display:none;font-size:round(down,calc(40 * var(--u)),var(--sp))}
#offer.ask .ring svg,#offer.ask #oSec{visibility:hidden}#offer.ask .ring b.ask{display:flex}
#offer.ask #oWhy .a,#offer.ask #oNo .a{visibility:hidden}#offer.ask #oWhy .o,#offer.ask #oNo .o{visibility:visible}
#offer.ask #oPr{display:none}   /* (the owner, Thu 22 Oct: "center buy and cancel": the price is out of the key on the ask, so BUY sits in its middle) */
#mon .dlg .why{font:700 calc(15 * var(--u))/1.5 "JetBrains Mono",monospace;letter-spacing:.06em;text-transform:uppercase;margin-top:calc(6 * var(--u));white-space:nowrap}
#mon .dlg .pr{margin-left:calc(6 * var(--u));padding:calc(4 * var(--u)) calc(8 * var(--u));background:#ffb000;color:#0a0a0a;font:400 round(down,calc(16 * var(--u)),var(--sp))/1 Silkscreen,monospace;letter-spacing:.14em}
/* the terms: wider, the consent in two lines, the keys side by side */
#terms{width:calc(640 * var(--u))!important}
#mon #terms .in{padding:calc(34 * var(--u)) calc(48 * var(--u)) calc(40 * var(--u))}
#mon #terms h2{font-size:round(down,calc(30 * var(--u)),var(--sp));letter-spacing:.1em;margin-bottom:calc(22 * var(--u))}
#terms .tx{font:700 calc(16 * var(--u))/1.6 "JetBrains Mono",monospace;letter-spacing:.03em;text-transform:uppercase}
#terms .tx a{color:#0a0a0a;text-decoration:none;border-bottom:var(--b3) solid #0a0a0a;pointer-events:auto;white-space:nowrap}
#terms .tx a{position:relative}#terms .tx a::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
#terms .tx a:hover,#terms .tx a:focus-visible{background:#0a0a0a;color:#ffb000;outline:none}
#terms .ks.row{flex-direction:row;gap:calc(16 * var(--u))}
#mon #terms .b{flex:1;height:max(44px,calc(64 * var(--u)));font-size:round(down,calc(22 * var(--u)),var(--sp))}
#mon #terms .b2{background:transparent}
#terms.no{animation:shake .36s steps(6) 1}
@keyframes shake{0%,100%{transform:translate(-50%,-50%)}17%{transform:translate(calc(-50% - 10px),-50%)}33%{transform:translate(calc(-50% + 8px),-50%)}50%{transform:translate(calc(-50% - 6px),-50%)}67%{transform:translate(calc(-50% + 4px),-50%)}83%{transform:translate(calc(-50% - 2px),-50%)}}
/* the placard drops in */
#mon .dlg.drop{animation:drop .42s steps(7) 1}
@keyframes drop{0%{transform:translate(-50%,calc(-50% - 60vh))}62%{transform:translate(-50%,calc(-50% + 14px))}82%{transform:translate(-50%,calc(-50% - 5px))}100%{transform:translate(-50%,-50%)}}
/* the monitor dimmed and blurred under a placard */
#mon[data-dim="5"] #tv > :not(.bow):not(.dlg):not(.roll){filter:blur(calc(5 * var(--u))) brightness(.45)}
#mon[data-dim="4"] #tv > :not(.bow):not(.dlg):not(.roll){filter:blur(calc(4 * var(--u))) brightness(.45)}
#mon[data-dim] .scr,#mon[data-dim] .osd button,#mon[data-dim] .osd a,#mon[data-dim] .arw{pointer-events:none!important}
#mon[data-dim] .scr *{pointer-events:none!important}
/* ================= COMPACT: a phone, or a window too narrow for the still (runner/main.js monLay: #mon.cmp, .land on its side). Not
   designed yet (the owner: "just on desktop first"): the same pieces at a size to read, laid out to fit, nothing off the glass or
   over another, every key 44 px or more ================= */
#mon.cmp #tv{border-radius:calc(34 * var(--u))/calc(30 * var(--u))}
#mon.cmp .tick{width:calc(24 * var(--u));height:calc(24 * var(--u))}
#mon.cmp .tick.a,#mon.cmp .tick.b{top:calc(14 * var(--u))}#mon.cmp .tick.c,#mon.cmp .tick.d{bottom:calc(14 * var(--u))}
#mon.cmp .tick.a,#mon.cmp .tick.c{left:calc(14 * var(--u))}#mon.cmp .tick.b,#mon.cmp .tick.d{right:calc(14 * var(--u))}
#mon.cmp .osd.tl{left:calc(34 * var(--u));top:calc(30 * var(--u));line-height:calc(40 * var(--u))}
#mon.cmp .osd.tr{right:calc(28 * var(--u));top:calc(30 * var(--u));gap:calc(14 * var(--u))}
#mon.cmp .osd.bl{left:calc(34 * var(--u));bottom:calc(30 * var(--u))}#mon.cmp .osd.br{right:calc(34 * var(--u));bottom:calc(30 * var(--u))}
#mon.cmp .scr .frame{left:0;top:0;width:100%;height:100%;margin:0}
/* (upright, the top row's words give way: the camera's label keeps its room, LIVE and WRECKED keep their dot) */
#mon.cmp:not(.land) #mRec{display:none}
/* the cover: the name a little over a quarter down (laid by main.js), the keys under it, one over the other upright and side by
   side on its side; the caption over the foot's words (upright in two lines) */
#mon.cmp #sCover .cap{bottom:calc(84 * var(--u));line-height:1.7}
#mon.cmp:not(.land) #sCover .cap span{display:block}#mon.cmp:not(.land) #sCover .cap i{display:none}
#mon.cmp #sCover .keys{top:calc(var(--mkT,40%) + var(--mkH,60px) + 110 * var(--u));flex-direction:column;gap:calc(14 * var(--u))}
#mon.cmp #sCover .k{width:min(calc(300 * var(--u)),calc(100vw - 72px))}
#mon.cmp #sCover .hint{top:calc(var(--mkT,40%) + var(--mkH,60px) + 110 * var(--u) + 2 * max(44px,calc(72 * var(--u))) + 40 * var(--u));white-space:normal;width:calc(100% - 48px);text-align:center;line-height:1.5}
#mon.cmp.land #sCover .keys{top:calc(var(--mkT,40%) + var(--mkH,60px) + 44 * var(--u));flex-direction:row}
#mon.cmp.land #sCover .hint{top:calc(var(--mkT,40%) + var(--mkH,60px) + 44 * var(--u) + max(44px,calc(72 * var(--u))) + 22 * var(--u))}
/* the garage: the turntable and the ride sized to fit (main.js layRoom), the arrows by the name, the name over CHOOSE */
#mon.cmp #garage .lamp{top:calc(6 * var(--u));width:calc(90 * var(--u))}
#mon.cmp #sRide .ttl{top:calc(96 * var(--u))}#mon.cmp #sRide .dashes{top:calc(126 * var(--u))}
#mon.cmp #sRide .foot2{bottom:calc(40 * var(--u));flex-direction:column;gap:calc(16 * var(--u))}
/* (on a phone the name's block as wide as the widest name or line of every ride: each laid unseen in the same cell, runner/main.js
   nameGhosts, so CHOOSE under or beside it never moves) */
#mon.cmp #sRide .nm2{display:grid;width:auto;justify-items:center}#mon.cmp #sRide .nm2 .in{grid-area:1/1;justify-items:center}
#mon.cmp #sRide .nm2 .gh{display:grid;visibility:hidden}
#mon.cmp #sRide .arw{top:auto;bottom:calc(40 * var(--u) + max(44px,calc(72 * var(--u))) + 26 * var(--u));width:max(44px,calc(64 * var(--u)));height:max(44px,calc(64 * var(--u)))}
#mon.cmp #sRide .arw.l{left:calc(28 * var(--u))}#mon.cmp #sRide .arw.r{right:calc(28 * var(--u))}
#mon.cmp.land #sRide .ttl,#mon.cmp.land #sRide .dashes{display:none}
#mon.cmp.land #sRide .foot2{flex-direction:row;bottom:calc(30 * var(--u))}
#mon.cmp.land #sRide .arw{bottom:auto;top:calc(var(--ttMid,50%) - max(22px,32 * var(--u)) - 60 * var(--u))}
#mon.cmp.land #sRide .arw.l{left:calc(60 * var(--u))}#mon.cmp.land #sRide .arw.r{right:calc(60 * var(--u))}
/* the stage: its words at the top, the arrows either side of the car */
#mon.cmp #sStage .head{top:calc(92 * var(--u))}
#mon.cmp #sStage .nm{font-size:round(down,calc(48 * var(--u)),var(--sp))}
#mon.cmp #sStage .head::before{left:-40px;right:-40px}
#mon.cmp #sStage .arw{top:62%;width:max(44px,calc(64 * var(--u)));height:max(44px,calc(64 * var(--u)))}
#mon.cmp #sStage .arw.l{left:calc(24 * var(--u))}#mon.cmp #sStage .arw.r{right:calc(24 * var(--u))}
#mon.cmp.land #sStage .head{top:calc(22 * var(--u));left:0;right:0;transform:none}
#mon.cmp.land #sStage .nm{margin:calc(8 * var(--u)) 0;font-size:round(down,calc(40 * var(--u)),var(--sp))}
#mon.cmp.land #sStage .chs{margin-top:calc(10 * var(--u))}
/* (on its side the car fills the middle: START goes to the foot's right, YOUR RIDE stays at its left) */
#mon.cmp.land #sStage .k.start{position:fixed;right:calc(var(--ti) + 30 * var(--u));bottom:calc(var(--ti) + 20 * var(--u));margin:0;width:calc(240 * var(--u))}
#mon.cmp.land #sStage .arw{top:58%}#mon.cmp.land #sStage .arw.l{left:calc(80 * var(--u))}#mon.cmp.land #sStage .arw.r{right:calc(80 * var(--u))}
/* the replay: the bar the glass's width less a margin; upright the top row keeps REPLAY (the camera's label is short enough) */
#mon.cmp #sRep .bar{left:calc(24 * var(--u));right:calc(24 * var(--u));bottom:calc(30 * var(--u));gap:calc(12 * var(--u))}
/* (EXIT at the row's left, the keys at its right) */
#mon.cmp #sRep .row{justify-content:space-between}
#mon.cmp #rpExit{position:static;transform:none}
#mon.cmp #sRep .tp{gap:calc(12 * var(--u))}
#mon.cmp #sRep .ic{width:max(44px,calc(52 * var(--u)));height:max(44px,calc(52 * var(--u)))}
/* (upright: REPLAY on a line of its own under the sound and full screen keys, the camera's label keeping the top row) */
#mon.cmp:not(.land)[data-scr="replay"] #mRec{display:inline}
#mon.cmp:not(.land)[data-scr="replay"] .osd.tr{flex-wrap:wrap;justify-content:flex-end;row-gap:calc(12 * var(--u))}
#mon.cmp:not(.land)[data-scr="replay"] .osd.tr .rec{order:3;flex-basis:100%;justify-content:flex-end}
/* the placards: as wide as the glass less a margin */
#mon.cmp .dlg,#mon.cmp #terms{width:min(calc(560 * var(--u)),calc(100% - 32px))!important}
#mon.cmp #terms .tx{font-size:calc(14 * var(--u))}
/* (there the two links fall on lines a line apart: each one's press keeps to its own line, so a tap on Terms of Service never lands
   on the Privacy Policy under it, as the 44 px reach did) */
#mon.cmp #terms .tx a::after{height:1.6em}
#mon.cmp .dlg h2,#mon.cmp .dlg .why{white-space:normal}
#mon.cmp.land .dlg .in{padding:calc(20 * var(--u)) calc(36 * var(--u)) calc(26 * var(--u))}
#mon.cmp.land .dlg .pbig{margin:calc(14 * var(--u)) 0 calc(8 * var(--u));font-size:round(down,calc(72 * var(--u)),var(--sp))}
#mon.cmp.land .dlg .ring{width:calc(110 * var(--u));height:calc(110 * var(--u));margin-top:calc(12 * var(--u))}
#mon.cmp.land .dlg .ks{margin-top:calc(18 * var(--u))}
/* the end screen: the survivor over the score upright, its numbers two by two; side by side on its side, smaller */
#mon.cmp #sEnd{--u:var(--ue,1px)}
#mon.cmp #sEnd .grid{flex-direction:column;gap:calc(24 * var(--u));transform:translate(-50%,-50%)}
#mon.cmp #sEnd .card{width:calc(240 * var(--u));gap:calc(12 * var(--u))}
#mon.cmp #sEnd .pf{width:calc(180 * var(--u));height:calc(180 * var(--u))}
#mon.cmp #sEnd .num{font-size:round(down,calc(112 * var(--u)),var(--sp));margin:calc(10 * var(--u)) 0 calc(4 * var(--u))}
#mon.cmp #sEnd .new{right:calc(-6 * var(--u));top:calc(34 * var(--u))}
#mon.cmp #sEnd .stats{display:grid;grid-template-columns:1fr 1fr;width:min(calc(400 * var(--u)),calc(100vw - 64px));margin-top:calc(14 * var(--u))}
#mon.cmp #sEnd .stats div{width:auto;padding:calc(12 * var(--u)) 0}
#mon.cmp #sEnd .stats div:nth-child(3){border-left:0}
#mon.cmp #sEnd .stats div:nth-child(n+3){border-top:var(--b2) solid rgba(255,176,0,.2)}
#mon.cmp #sEnd .ends{margin-top:calc(22 * var(--u));gap:calc(12 * var(--u));grid-template-columns:1fr 1fr;width:min(calc(300 * var(--u)),calc(100vw - 64px))}
#mon.cmp #sEnd #again,#mon.cmp #sEnd #oBoard{grid-column:1/-1;width:100%!important}
#mon.cmp.land #sEnd .ends{grid-template-columns:calc(250 * var(--u)) calc(200 * var(--u));width:auto}#mon.cmp.land #sEnd #again,#mon.cmp.land #sEnd #oBoard{grid-column:auto}
#mon.cmp.land #sEnd .grid{flex-direction:row;gap:calc(48 * var(--u))}
#mon.cmp.land #sEnd .pf{width:calc(150 * var(--u));height:calc(150 * var(--u))}
#mon.cmp.land #sEnd .num{font-size:round(down,calc(88 * var(--u)),var(--sp))}
#mon.cmp.land #sEnd .stats{display:flex;width:auto}
#mon.cmp.land #sEnd .stats div{width:calc(130 * var(--u))}
#mon.cmp.land #sEnd .stats div:nth-child(3){border-left:var(--b2) solid rgba(255,176,0,.2)}
#mon.cmp.land #sEnd .stats div:nth-child(n+3){border-top:0}
#mon.cmp.land #sEnd .new{right:calc(-64 * var(--u));top:calc(-8 * var(--u))}
#mon.cmp.land #sEnd .bests b{font-size:round(down,calc(20 * var(--u)),var(--sp))}
/* ================= the run's own keys step aside while the monitor shows (it has its own) ================= */
html.mon-on #fsKey,html.mon-on #fsHint,html.mon-on #keys{display:none!important}
/* ================= MOTION OFF under reduced motion ================= */
@media (prefers-reduced-motion:reduce){
  #mon,#tv .roll,.osd .rec i,#garage .leds i::after,#sEnd .new.slap,#mon .dlg.drop,#terms.no,#sCover .keys,#sCover .hint{animation:none!important;transition:none!important}
  #tv .roll{display:none}
}
/* ================= THE LEADERBOARD (runner/board.js; the owner, Thu 22 Oct: "leaderboard is key", "i expect leaderboard to follow
   the cover page style"): the game's one panel on the glass over the dimmed live feed (over the glass's vignette, as the wallet
   picker and the terms panel), in the cover's own look: .95 dark glass, a pixel frame in the heading's own pixels (--p, a
   Silkscreen pixel of the heading: stepped corners, a dark outer line, an amber inner one, its top row lit), the dotted amber
   rule, an amber bracket in each corner; the heading in the cover's amber display letters, the monitor's amber mono for its
   words, the close key the monitor's own OSD key. Three tabs, the top ten between thin amber rules (rank, the survivor's whole
   PFP on its own background, the name, the score; no distance), your row outlined in amber, pinned under the ten when you are
   not in them, or for a guest on SEASON one short line in its place. One size a screen (the rows' height --rh, runner/board.js
   lay), centred on the glass on whole device px; nothing in it ever moves or resizes it. Every size the still's px times --u.
   THE LETTERS: Silkscreen sizes are whole steps of --lsp (the monitor's --sp; 8/3 px on a 3x screen, so each font pixel is 8
   device px), and the tabs, ranks and scores never under two steps (a 1x screen's step is 8 px: 16 px, never 8) ================= */
#lbVeil{position:absolute;inset:0;pointer-events:auto;background:transparent}
#lbVeil[hidden],#lb[hidden]{display:none!important}
/* (the monitor dims and blurs everything on the glass under a panel; this panel and its veil stay sharp) */
#mon[data-dim] #tv > #lb,#mon[data-dim] #tv > #lbVeil{filter:none}
#lb{position:absolute;left:0;top:0;box-sizing:border-box;pointer-events:auto;display:flex;flex-direction:column;--lsp:var(--sp);
  --hdF:max(calc(2 * var(--lsp)),round(down,calc(32 * var(--u)),var(--lsp)));--p:max(var(--dp),round(down,calc(var(--hdF) / 8),var(--dp)));
  --pw:calc(760 * var(--u));--px:calc(44 * var(--u));--pt:calc(38 * var(--u));--pb:calc(34 * var(--u));
  --tbF:max(calc(2 * var(--lsp)),round(down,calc(20 * var(--u)),var(--lsp)));--rkF:max(calc(2 * var(--lsp)),round(down,calc(20 * var(--u)),var(--lsp)));
  --scF:max(calc(2 * var(--lsp)),round(down,calc(22 * var(--u)),var(--lsp)));
  --nmF:calc(15 * var(--u));--pf:calc(38 * var(--u));--rkw0:calc(72 * var(--u));--scw:calc(140 * var(--u));
  --cg:calc(18 * var(--u));--rp:calc(12 * var(--u));--tg:calc(56 * var(--u));
  width:var(--pw);padding:var(--pt) var(--px) var(--pb);background:rgba(10,8,4,.95);color:#ececec;text-align:left;
  clip-path:polygon(0 calc(var(--p) * 2),var(--p) calc(var(--p) * 2),var(--p) var(--p),calc(var(--p) * 2) var(--p),calc(var(--p) * 2) 0,
    calc(100% - var(--p) * 2) 0,calc(100% - var(--p) * 2) var(--p),calc(100% - var(--p)) var(--p),calc(100% - var(--p)) calc(var(--p) * 2),100% calc(var(--p) * 2),
    100% calc(100% - var(--p) * 2),calc(100% - var(--p)) calc(100% - var(--p) * 2),calc(100% - var(--p)) calc(100% - var(--p)),calc(100% - var(--p) * 2) calc(100% - var(--p)),calc(100% - var(--p) * 2) 100%,
    calc(var(--p) * 2) 100%,calc(var(--p) * 2) calc(100% - var(--p)),var(--p) calc(100% - var(--p)),var(--p) calc(100% - var(--p) * 2),0 calc(100% - var(--p) * 2));
  box-shadow:inset 0 0 0 var(--p) #050403,inset 0 0 0 calc(var(--p) * 2) rgba(255,176,0,.34),
    inset 0 calc(var(--p) * 3) 0 calc(var(--p) * -1) rgba(255,214,150,.08),inset 0 calc(var(--p) * -3) 0 calc(var(--p) * -1) rgba(0,0,0,.4)}
#lb:focus{outline:none}
/* the four amber brackets, a camera frame's corners inside the panel's */
#lb::after{content:"";position:absolute;inset:calc(var(--p) * 4);pointer-events:none;--a:#ffb000;--l:calc(var(--p) * 4);
  background:linear-gradient(var(--a),var(--a)) left top/var(--l) var(--p) no-repeat,linear-gradient(var(--a),var(--a)) left top/var(--p) var(--l) no-repeat,
    linear-gradient(var(--a),var(--a)) right top/var(--l) var(--p) no-repeat,linear-gradient(var(--a),var(--a)) right top/var(--p) var(--l) no-repeat,
    linear-gradient(var(--a),var(--a)) left bottom/var(--l) var(--p) no-repeat,linear-gradient(var(--a),var(--a)) left bottom/var(--p) var(--l) no-repeat,
    linear-gradient(var(--a),var(--a)) right bottom/var(--l) var(--p) no-repeat,linear-gradient(var(--a),var(--a)) right bottom/var(--p) var(--l) no-repeat}
/* the heading and the close key, the dotted rule, the three tabs (on a phone on its side all on one row) */
#lb .lh{flex:none;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"h x" "r r" "t t";align-items:center;column-gap:calc(20 * var(--u))}
#lb h2{grid-area:h;margin:0;min-width:0;font:400 var(--hdF)/1 Silkscreen,monospace;letter-spacing:.14em;color:#ffb000;text-shadow:0 0 calc(18 * var(--u)) rgba(255,150,0,.5);white-space:nowrap}
#lb .x{grid-area:x;position:relative;width:calc(40 * var(--u));height:calc(40 * var(--u));display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 0 0 var(--b2) rgba(255,176,0,.55);color:rgba(255,176,0,.9)}
#lb .x svg{width:calc(18 * var(--u));height:calc(18 * var(--u));fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:square}
#lb .x:hover,#lb .x:focus-visible{box-shadow:inset 0 0 0 var(--b2) #ffb000;color:#ffcf6b;background:rgba(255,176,0,.08)}
#lb .rule{height:var(--p);background:repeating-linear-gradient(90deg,rgba(255,176,0,.5) 0 var(--p),transparent var(--p) calc(var(--p) * 2))}
#lb .lh .rule{grid-area:r;margin:calc(18 * var(--u)) 0 calc(12 * var(--u))}
#lb .lbtabs{grid-area:t;display:flex;justify-content:center;gap:var(--tg)}
#lb .lbtab{position:relative;height:calc(44 * var(--u));padding:0 0 0 .14em;display:flex;align-items:center;font:400 var(--tbF)/1 Silkscreen,monospace;letter-spacing:.14em;
  color:rgba(255,176,0,.4);white-space:nowrap}
#lb .lbtab:hover{color:rgba(255,176,0,.75)}
#lb .lbtab[aria-selected="true"]{color:#ffb000;text-shadow:0 0 calc(18 * var(--u)) rgba(255,150,0,.5)}
#lb .lbtab[aria-selected="true"]::before{content:"";position:absolute;left:.14em;right:.14em;bottom:calc(3 * var(--u));height:var(--p);background:#ffb000;box-shadow:0 0 calc(10 * var(--u)) rgba(255,150,0,.5)}
#lb .lbtab::after,#lb .x::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,44px);height:max(100%,44px);transform:translate(-50%,-50%)}
html.kbd #lb .lbtab:focus-visible,html.kbd #lb .x:focus-visible{outline:var(--b2) solid #ffb000;outline-offset:calc(4 * var(--u))}
/* THE ROWS: rank, picture, name, score; an empty row keeps its place but draws no rule */
#lb .bd{flex:none;position:relative;margin-top:calc(8 * var(--u))}
#lb .rows{list-style:none;margin:0;padding:0;border-top:var(--b2) solid rgba(255,176,0,.35);border-bottom:var(--b2) solid rgba(255,176,0,.35)}
#lb .row{position:relative;box-sizing:border-box;display:flex;align-items:center;gap:var(--cg);height:var(--rh,calc(46 * var(--u)));padding:0 var(--rp)}
#lb .rows .row+.row{border-top:var(--b2) solid rgba(255,176,0,.12)}
#lb .rows .row.nil+.row.nil{border-top-color:transparent}
/* (the rank column holds 99,999 at every size, runner/board.js lay --rkw; a longer rank spills left into the row's padding, so the
   name's left edge never moves) */
#lb .rk{flex:none;box-sizing:border-box;width:var(--rkw,var(--rkw0));display:flex;justify-content:flex-end;overflow:visible;font:400 var(--rkF)/1 Silkscreen,monospace;color:rgba(255,176,0,.8);white-space:nowrap}
#lb .rk.probe{position:absolute;left:0;top:0;width:auto;display:block;visibility:hidden;pointer-events:none}
#lb .pf{flex:none;width:var(--pf);height:var(--pf);display:flex;align-items:center;justify-content:center;overflow:hidden}
#lb .pf.on{background:var(--pfbg,#c4c4c4)}
#lb .pf canvas{display:none;flex:none;image-rendering:pixelated}
#lb .pf.on canvas{display:block}
#lb .nm{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 var(--nmF)/1.2 "JetBrains Mono",monospace;letter-spacing:.14em;color:#ececec}
#lb .sco{flex:none;min-width:var(--scw);text-align:right;font:400 var(--scF)/1 Silkscreen,monospace;color:#fbfbf6;white-space:nowrap}
/* yours: outlined in amber, as the end screen's boxes */
#lb .row.you{box-shadow:inset 0 0 0 var(--b2) #ffb000;background:rgba(255,176,0,.08)}
#lb .row.you .nm{color:#ffcf6b}
/* your name is a key (runner/board.js rename): underlined in amber dots; pressed, a box in the same letters */
#lb .row.you .nm{cursor:pointer;text-decoration:underline dotted rgba(255,176,0,.7);text-underline-offset:.3em}
#lb .nm .nmi{box-sizing:border-box;width:100%;margin:0;padding:0;border:0;border-bottom:var(--b2) solid #ffb000;border-radius:0;outline:0;background:none;
  font:inherit;letter-spacing:inherit;color:#ffcf6b;text-transform:uppercase;caret-color:#ffb000}
#lb .nm .nmi::placeholder{color:rgba(255,176,0,.5);opacity:1}
#lb .row.you:has(.nmi) .nm{overflow:visible;text-decoration:none}
/* your row under the ten when you are not in them, or a guest's one line on SEASON (its room kept either way, so nothing moves) */
#lb .mine{flex:none;position:relative;margin-top:calc(10 * var(--u))}
#lb .mine .rule{margin-bottom:calc(10 * var(--u))}
#lb .mine:not(.on){visibility:hidden}
#lb .mine .note{display:none;position:absolute;left:0;right:0;bottom:0;height:var(--rh,calc(46 * var(--u)));margin:0;align-items:center;justify-content:center;
  font:700 max(11px,calc(14 * var(--u)))/1 "JetBrains Mono",monospace;letter-spacing:.24em;color:rgba(255,176,0,.8);white-space:nowrap}
#lb .mine.nt .row{visibility:hidden}
#lb .mine.nt .note{display:flex}
/* over the rows: the board on its way (three amber blocks stepping), none yet, no answer */
#lb .msg{position:absolute;inset:0;margin:0;display:none;align-items:center;justify-content:center;pointer-events:none;
  font:700 calc(14 * var(--u))/1 "JetBrains Mono",monospace;letter-spacing:.24em;color:rgba(255,176,0,.8);text-shadow:0 0 calc(10 * var(--u)) rgba(255,150,0,.35);white-space:nowrap}
#lb[data-st="load"] .msg,#lb[data-st="empty"] .msg,#lb[data-st="off"] .msg{display:flex}
/* runner/board.js's two settings. SEASON before Season 2: one line in the panel's own letters, centred where the rows and your row
   sit, their room kept (no rows, no rules), so the box never moves between tabs. No picture column until a row can show a
   survivor: the name where the picture was, no gap */
#lb .bw{flex:none;position:relative;display:flex;flex-direction:column}
#lb .soon{display:none;position:absolute;inset:0;margin:0;padding-left:.24em;align-items:center;justify-content:center;pointer-events:none;
  font:700 max(11px,calc(14 * var(--u)))/1 "JetBrains Mono",monospace;letter-spacing:.24em;color:rgba(255,176,0,.8);text-shadow:0 0 calc(10 * var(--u)) rgba(255,150,0,.35);white-space:nowrap}
#lb.s2 .bd,#lb.s2 .mine{visibility:hidden}
#lb.s2 .soon{display:flex}
#lb.nopf .pf{display:none}
#lb .dots{display:flex;gap:calc(12 * var(--u))}
#lb .dots i{width:calc(12 * var(--u));height:calc(12 * var(--u));background:rgba(255,176,0,.22);animation:lbdot 1.2s steps(1) infinite}
#lb .dots i:nth-child(2){animation-delay:.4s}#lb .dots i:nth-child(3){animation-delay:.8s}
@keyframes lbdot{0%{background:#ffb000;box-shadow:0 0 calc(10 * var(--u)) rgba(255,160,0,.7)}33.3%{background:rgba(255,176,0,.22);box-shadow:none}}
/* LEADERBOARD on the cover, a controller or the arrows on it: lit, the camera frame's line round it */
#mon .lk.sel{color:#ffb000;outline:var(--b2) solid #ffb000;outline-offset:calc(8 * var(--u))}
/* a phone held upright: the panel the glass's width less a margin, the rows' words smaller */
#mon.cmp #lb{--hdF:max(calc(2 * var(--lsp)),round(down,calc(22 * var(--u)),var(--lsp)));--pw:min(calc(760 * var(--u)),calc(100vw - 2 * var(--ti) - 24px));--px:calc(18 * var(--u));--pt:calc(24 * var(--u));--pb:calc(22 * var(--u));
  --tbF:max(calc(2 * var(--lsp)),round(down,calc(15 * var(--u)),var(--lsp)));--rkF:max(calc(2 * var(--lsp)),round(down,calc(15 * var(--u)),var(--lsp)));
  --scF:max(calc(2 * var(--lsp)),round(down,calc(16 * var(--u)),var(--lsp)));
  --nmF:max(11px,calc(13 * var(--u)));--pf:calc(30 * var(--u));--rkw0:calc(40 * var(--u));--scw:calc(64 * var(--u));
  --cg:calc(8 * var(--u));--rp:calc(6 * var(--u));--tg:calc(26 * var(--u))}
#mon.cmp #lb .nm{letter-spacing:.08em}
#mon.cmp #lb .mine .note{letter-spacing:.12em}
#mon.cmp #lb .lh .rule{margin:calc(14 * var(--u)) 0 calc(6 * var(--u))}
/* a phone on its side: the heading, the tabs and the close key on one row, the rows as tall as fit */
#mon.cmp.land #lb{--hdF:max(calc(2 * var(--lsp)),round(down,calc(20 * var(--u)),var(--lsp)));--pw:min(calc(860 * var(--u)),calc(100vw - 2 * var(--ti) - 24px));--px:calc(26 * var(--u));--pt:calc(18 * var(--u));--pb:calc(20 * var(--u));
  --tbF:max(calc(2 * var(--lsp)),round(down,calc(14 * var(--u)),var(--lsp)));--tg:calc(20 * var(--u));--pf:calc(26 * var(--u));--rkw0:calc(48 * var(--u));--scw:calc(96 * var(--u));--cg:calc(14 * var(--u))}
#mon.cmp.land #lb .lh{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"h t x" "r r r"}
#mon.cmp.land #lb .lh .rule{margin:calc(10 * var(--u)) 0 0}
#mon.cmp.land #lb .lbtab{height:calc(36 * var(--u))}
#mon.cmp.land #lb .bd{margin-top:calc(6 * var(--u))}
#mon.cmp.land #lb .mine{margin-top:calc(6 * var(--u))}#mon.cmp.land #lb .mine .rule{margin-bottom:calc(6 * var(--u))}
@media (prefers-reduced-motion:reduce){#lb .dots i{animation:none!important;background:#ffb000}}