*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#030407;color:#e9edf5;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;font-family:"Arial Narrow","Roboto Condensed","Helvetica Neue",Arial,sans-serif}
#app{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;--u:1}
#stage{position:relative;width:min(100vw,calc(100vh*16/9));height:min(100vh,calc(100vw*9/16));background:#07090f;overflow:hidden;box-shadow:0 0 0 1px #1a1f2b}
#app.portrait #stage{width:100vw;height:calc(100dvh - 176px);max-height:none}
canvas#cv{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
svg.i{width:1em;height:1em;display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
svg.i .f{fill:currentColor;stroke:none}
/* ---- HUD ---- */
#hud{position:absolute;inset:0;pointer-events:none;color:#e9edf5;font-size:calc(var(--u)*16px)}
#hud[hidden],#streak[hidden],#pad[hidden]{display:none}
.p{position:absolute;background:linear-gradient(180deg,rgba(7,10,18,.82),rgba(7,10,18,.66));border:1px solid rgba(255,255,255,.09);padding:calc(var(--u)*7px) calc(var(--u)*12px);clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));backdrop-filter:blur(2px)}
.lb{font-size:calc(var(--u)*11px);letter-spacing:.2em;color:#8e99b0;font-weight:700;text-transform:uppercase}
.lb em{font-style:normal;color:#cfd6e6;letter-spacing:.06em;margin-left:.5em}
.tl{left:calc(var(--u)*14px);top:calc(var(--u)*12px);min-width:calc(var(--u)*118px)}
#pos{display:flex;align-items:baseline;gap:calc(var(--u)*2px);line-height:1;font-style:italic}
#pos b{font-size:calc(var(--u)*50px);font-weight:900;color:#fff;text-shadow:0 0 18px rgba(255,59,78,.55)}
#pos sup{font-size:calc(var(--u)*17px);font-weight:900;color:#ff5a6a;margin-right:calc(var(--u)*6px)}
#pos span{font-size:calc(var(--u)*15px);color:#8e99b0;font-weight:700}
#pos.pod b{text-shadow:0 0 18px rgba(255,200,70,.7)}#pos.pod sup{color:#ffc646}
.tc{left:50%;transform:translateX(-50%);top:calc(var(--u)*12px);width:calc(var(--u)*330px);text-align:center;padding-bottom:calc(var(--u)*6px)}
#trk{position:relative;height:calc(var(--u)*9px);background:#0a0e18;border:1px solid #2a3244;margin:calc(var(--u)*4px) 0 calc(var(--u)*5px)}
#trkFill{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,#7a1424,#ff3b4e)}
#trk .rv{position:absolute;top:-4px;width:calc(var(--u)*6px);height:calc(var(--u)*16px);margin-left:calc(var(--u)*-3px);background:var(--c,#aaa);border:1px solid rgba(0,0,0,.6);transform:skewX(-14deg)}
#trk .fl{position:absolute;right:0;top:-3px;bottom:-3px;width:calc(var(--u)*5px);background:repeating-linear-gradient(0deg,#fff 0 3px,#111 3px 6px)}
#trkYou{position:absolute;top:calc(var(--u)*-7px);width:0;height:0;margin-left:calc(var(--u)*-6px);border-left:calc(var(--u)*6px) solid transparent;border-right:calc(var(--u)*6px) solid transparent;border-top:calc(var(--u)*9px) solid #fff;filter:drop-shadow(0 0 4px #ff3b4e)}
.tr{right:calc(var(--u)*14px);top:calc(var(--u)*12px);text-align:right;min-width:calc(var(--u)*170px)}
#score{font-size:calc(var(--u)*34px);font-weight:900;font-style:italic;letter-spacing:.02em;line-height:1.05;color:#fff;font-variant-numeric:tabular-nums}
#tk{margin-top:calc(var(--u)*2px)}#tk b{color:#ffb347;font-size:1.25em}
.bl{left:calc(var(--u)*14px);bottom:calc(var(--u)*58px);width:calc(var(--u)*250px);display:flex;flex-direction:column;gap:calc(var(--u)*6px)}
.bar{display:flex;align-items:center;gap:calc(var(--u)*8px)}
.bar .ic{font-size:calc(var(--u)*17px);width:calc(var(--u)*18px)}
.bar .tr{flex:1;position:static;min-width:0;height:calc(var(--u)*9px);background:#0a0e18;border:1px solid #2a3244;padding:0;overflow:hidden;clip-path:none;text-align:left}
.bar .tr i{display:block;height:100%;width:100%;transition:width .08s linear}
.bar b{font-size:calc(var(--u)*13px);min-width:calc(var(--u)*28px);text-align:right;color:#cfd6e6;font-variant-numeric:tabular-nums}
.hull .ic{color:#46f08a}.hull i{background:linear-gradient(90deg,#1fa85c,#46f08a)}.hull.mid .ic{color:#ffc646}.hull.mid i{background:linear-gradient(90deg,#c88a14,#ffc646)}.hull.low .ic{color:#ff4256}.hull.low i{background:linear-gradient(90deg,#a01428,#ff4256);animation:blink .5s steps(2) infinite}
.fuel .ic{color:#ffd23a}.fuel i{background:linear-gradient(90deg,#b88a10,#ffd23a)}.fuel.low i{background:linear-gradient(90deg,#a01428,#ff4256)}
.nos .ic{color:#38c8ff}.nos i{background:linear-gradient(90deg,#1c6cc8,#7ff0ff)}.nos.on i{box-shadow:0 0 12px #38c8ff}.nos.empty .ic{color:#4a5468}
@keyframes blink{50%{opacity:.35}}
.bc{left:50%;transform:translateX(-50%);bottom:calc(var(--u)*58px);display:flex;align-items:center;gap:calc(var(--u)*12px);padding:calc(var(--u)*6px) calc(var(--u)*16px)}
.bc .mx{font-size:calc(var(--u)*46px);font-weight:900;font-style:italic;line-height:1;color:#ffb347;text-shadow:0 0 16px rgba(255,150,40,.6)}
.bc .mx b{font-size:1.15em}.bc.hot .mx{color:#ff5a3a;text-shadow:0 0 22px rgba(255,80,40,.9)}
.bc .st{min-width:calc(var(--u)*110px)}.bc .st span{font-size:calc(var(--u)*12px);letter-spacing:.18em;font-weight:800;color:#cfd6e6}
.bc .tr{position:static;height:calc(var(--u)*6px);margin-top:calc(var(--u)*4px);background:#0a0e18;border:1px solid #3a2a1a;padding:0;min-width:0;clip-path:none;text-align:left;overflow:hidden}.bc .tr i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#ff5a2a,#ffc646)}
.br{right:calc(var(--u)*14px);bottom:calc(var(--u)*58px);text-align:right}
#spd{line-height:1}#spd b{font-size:calc(var(--u)*40px);font-weight:900;font-style:italic;font-variant-numeric:tabular-nums}#spd small{font-size:calc(var(--u)*12px);color:#8e99b0;letter-spacing:.2em;margin-left:calc(var(--u)*5px)}
#chips{display:flex;gap:calc(var(--u)*6px);justify-content:flex-end;margin-top:calc(var(--u)*5px);min-height:calc(var(--u)*20px)}
.chip{font-size:calc(var(--u)*11px);font-weight:800;letter-spacing:.14em;padding:calc(var(--u)*2px) calc(var(--u)*7px);border:1px solid;background:rgba(0,0,0,.4)}
.chip.sh{color:#9fe8ff;border-color:#9fe8ff}.chip.tk{color:#ff7ae6;border-color:#ff7ae6}.chip.nos{color:#7ff0ff;border-color:#38c8ff;box-shadow:0 0 10px rgba(56,200,255,.5)}
#feed{position:absolute;left:calc(var(--u)*14px);top:calc(var(--u)*106px);display:flex;flex-direction:column;gap:calc(var(--u)*5px);pointer-events:none;width:calc(var(--u)*280px)}
.ft{font-size:calc(var(--u)*13px);font-weight:800;letter-spacing:.1em;padding:calc(var(--u)*4px) calc(var(--u)*10px);border-left:3px solid var(--c,#ffb347);background:linear-gradient(90deg,rgba(7,10,18,.85),rgba(7,10,18,0));text-shadow:0 1px 0 #000;animation:ft 2.4s forwards;text-transform:uppercase}
.ft b{color:var(--c,#ffb347)}
@keyframes ft{0%{opacity:0;transform:translateX(-14px)}8%{opacity:1;transform:none}80%{opacity:1}100%{opacity:0}}
#count{position:absolute;left:0;right:0;top:34%;text-align:center;font-size:calc(var(--u)*120px);font-weight:900;font-style:italic;color:#fff;text-shadow:0 0 40px rgba(255,59,78,.8),0 4px 0 #000;pointer-events:none;letter-spacing:.04em}
#count.go{color:#46f08a;text-shadow:0 0 40px rgba(70,240,138,.8),0 4px 0 #000}
#count .sub{display:block;font-size:calc(var(--u)*17px);letter-spacing:.4em;color:#cfd6e6;font-style:normal;text-shadow:none;margin-top:calc(var(--u)*6px)}
#count.pop{animation:pop .5s}
@keyframes pop{0%{transform:scale(1.6);opacity:0}30%{opacity:1}100%{transform:scale(1)}}
#tools{position:absolute;right:calc(var(--u)*14px);top:calc(var(--u)*118px);display:flex;flex-direction:column;gap:calc(var(--u)*6px);align-items:flex-end;z-index:5}
#tools.title{top:calc(var(--u)*14px);flex-direction:row}
#tools button,#back{display:flex;align-items:center;justify-content:center;gap:6px;height:calc(var(--u)*30px);min-width:calc(var(--u)*30px);padding:0 calc(var(--u)*8px);color:#cfd6e6;background:rgba(7,10,18,.78);border:1px solid rgba(255,255,255,.14);font:700 calc(var(--u)*11px)/1 "Arial Narrow",Arial,sans-serif;letter-spacing:.16em;text-decoration:none;cursor:pointer;font-size:calc(var(--u)*15px)}
#back em{font-style:normal;font-size:calc(var(--u)*10px)}
#tools button:hover,#back:hover,#tools button[aria-pressed=true]{background:rgba(40,50,70,.9);color:#fff}
/* ---- overlays ---- */
.ov{position:absolute;inset:0;display:none;align-items:center;justify-content:center;z-index:4}
.ov.on{display:flex}
.ov.dim{background:radial-gradient(ellipse at center,rgba(3,4,8,.55),rgba(3,4,8,.9))}
.ov.title{align-items:stretch;justify-content:flex-start;background:linear-gradient(90deg,rgba(3,4,8,.92) 0,rgba(3,4,8,.7) 42%,rgba(3,4,8,.05) 78%)}
.hero{display:flex;flex-direction:column;justify-content:center;padding:0 calc(var(--u)*56px);max-width:calc(var(--u)*640px)}
.hero .kick{font-size:calc(var(--u)*13px);letter-spacing:.5em;color:#ff5a6a;font-weight:800;margin-bottom:calc(var(--u)*8px)}
.hero h1{margin:0;font-size:calc(var(--u)*92px);line-height:.88;font-weight:900;font-style:italic;letter-spacing:-.01em;color:#fff;text-transform:uppercase;text-shadow:0 0 30px rgba(255,59,78,.35),0 4px 0 rgba(0,0,0,.6)}
.hero h1 span{display:block;color:#ff3b4e;font-size:.82em;letter-spacing:.02em}
.hero h1 i{font-style:normal;color:#8e99b0;font-weight:400;margin:0 .1em}
.hero p{margin:calc(var(--u)*16px) 0 calc(var(--u)*22px);font-size:calc(var(--u)*17px);line-height:1.35;color:#c4cbdb;max-width:calc(var(--u)*440px);letter-spacing:.02em}
.hero p b{color:#fff}
.btns{display:flex;gap:calc(var(--u)*10px);flex-wrap:wrap}
.btn{font:900 calc(var(--u)*17px)/1 "Arial Narrow",Arial,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#fff;background:linear-gradient(180deg,#ff4a5c,#c8182c);border:0;padding:calc(var(--u)*14px) calc(var(--u)*30px);cursor:pointer;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));box-shadow:0 0 24px rgba(255,59,78,.4);font-style:italic}
.btn:hover,.btn:focus-visible{background:linear-gradient(180deg,#ff6a7a,#e01c34);outline:none}
.btn.alt{background:rgba(255,255,255,.08);box-shadow:none;color:#cfd6e6;border:1px solid rgba(255,255,255,.18)}
.btn.alt:hover{background:rgba(255,255,255,.16)}
.btn[disabled]{opacity:.4;cursor:default}
.hint{margin-top:calc(var(--u)*18px);font-size:calc(var(--u)*12px);letter-spacing:.14em;color:#8e99b0}
.hint kbd{font:700 .95em "Arial Narrow",Arial,sans-serif;border:1px solid #4a5468;background:#10151f;color:#e9edf5;padding:1px 6px;border-radius:2px;margin:0 2px}
.sel{width:min(96%,calc(var(--u)*1160px));max-height:96%;overflow:auto;padding:calc(var(--u)*20px) calc(var(--u)*26px);background:linear-gradient(180deg,rgba(7,10,18,.94),rgba(7,10,18,.9));border:1px solid rgba(255,255,255,.1);clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px))}
.sel h2{margin:0 0 calc(var(--u)*4px);font-size:calc(var(--u)*13px);letter-spacing:.34em;color:#ff5a6a;font-weight:800}
.sel .row{display:grid;gap:calc(var(--u)*12px);margin-bottom:calc(var(--u)*16px)}
.sel .r3{grid-template-columns:repeat(3,1fr)}.sel .r4{grid-template-columns:repeat(4,1fr)}
.card{position:relative;text-align:left;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);color:#e9edf5;padding:0;cursor:pointer;font:inherit;overflow:hidden}
.card:hover{background:rgba(255,255,255,.09)}
.card.on{border-color:#ff3b4e;box-shadow:0 0 0 1px #ff3b4e,0 0 22px rgba(255,59,78,.35);background:rgba(255,59,78,.08)}
.card canvas{display:block;width:100%;height:auto;background:#05070c}
.card .m{padding:calc(var(--u)*8px) calc(var(--u)*12px) calc(var(--u)*10px)}
.card .n{font-size:calc(var(--u)*20px);font-weight:900;font-style:italic;letter-spacing:.06em}
.card .s{font-size:calc(var(--u)*11px);letter-spacing:.2em;color:#8e99b0;margin-top:2px}
.card .b{font-size:calc(var(--u)*11px);letter-spacing:.12em;color:#ffc646;margin-top:calc(var(--u)*5px);font-weight:800}
.stat{display:flex;align-items:center;gap:6px;margin-top:calc(var(--u)*4px);font-size:calc(var(--u)*10px);letter-spacing:.14em;color:#8e99b0;font-weight:700}
.stat span{width:calc(var(--u)*46px)}.stat i{display:block;height:calc(var(--u)*5px);background:linear-gradient(90deg,#ff3b4e,#ffb347);flex:none}
.stat u{flex:1;height:calc(var(--u)*5px);background:#10151f;display:block;text-decoration:none}.stat u i{height:100%}
.legend{display:flex;flex-wrap:wrap;gap:calc(var(--u)*8px) calc(var(--u)*18px);margin:calc(var(--u)*4px) 0 calc(var(--u)*14px);font-size:calc(var(--u)*11px);letter-spacing:.12em;color:#9aa5bb}
.legend span{display:flex;align-items:center;gap:6px}.legend b{color:#e9edf5}
.legend .pi{width:calc(var(--u)*18px);height:calc(var(--u)*18px)}
.selbar{display:flex;gap:calc(var(--u)*24px);align-items:center;justify-content:flex-start;flex-wrap:wrap}
.selbar .note{font-size:calc(var(--u)*12px);color:#8e99b0;letter-spacing:.1em;max-width:calc(var(--u)*520px)}
/* how to */
.how{width:min(94%,calc(var(--u)*980px));max-height:96%;overflow:auto;padding:calc(var(--u)*22px) calc(var(--u)*28px);background:rgba(7,10,18,.95);border:1px solid rgba(255,255,255,.1)}
.how h2{margin:0 0 10px;font-size:calc(var(--u)*13px);letter-spacing:.34em;color:#ff5a6a}
.how .g{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u)*18px)}
.how h3{margin:calc(var(--u)*10px) 0 calc(var(--u)*4px);font-size:calc(var(--u)*13px);letter-spacing:.2em;color:#ffb347}
.how p,.how li{font-size:calc(var(--u)*13.5px);line-height:1.4;color:#c4cbdb;margin:0 0 5px}.how ul{margin:0;padding-left:1.1em}
.how .en{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;font-size:calc(var(--u)*12.5px);color:#c4cbdb}.how .en b{color:#fff;letter-spacing:.1em}
/* result */
.res{width:min(96%,calc(var(--u)*1080px));max-height:97%;overflow:auto;padding:calc(var(--u)*18px) calc(var(--u)*26px);background:linear-gradient(180deg,rgba(7,10,18,.95),rgba(7,10,18,.92));border:1px solid rgba(255,255,255,.1);clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px))}
.res .top{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap}
.res h2{margin:0;font-size:calc(var(--u)*13px);letter-spacing:.34em;color:#ff5a6a;font-weight:800}
.res .big{font-size:calc(var(--u)*66px);font-weight:900;font-style:italic;line-height:.95;color:#fff}
.res .big sup{font-size:.4em;color:#ff5a6a}.res .big.pod{color:#ffc646;text-shadow:0 0 28px rgba(255,200,70,.5)}
.stamp{display:inline-block;margin-top:calc(var(--u)*6px);padding:calc(var(--u)*6px) calc(var(--u)*14px);font-weight:900;letter-spacing:.22em;font-size:calc(var(--u)*14px);border:2px solid;transform:rotate(-2deg)}
.stamp.ok{color:#46f08a;border-color:#46f08a;background:rgba(70,240,138,.08)}
.stamp.no{color:#ffb347;border-color:#ffb347;background:rgba(255,179,71,.08)}
.stamp.bad{color:#ff4256;border-color:#ff4256;background:rgba(255,66,86,.08)}
.res .why{margin:calc(var(--u)*8px) 0 0;font-size:calc(var(--u)*14px);line-height:1.35;color:#c4cbdb;max-width:calc(var(--u)*560px)}
.res .why b{color:#fff}
.res .mid{display:grid;grid-template-columns:1.05fr 1fr;gap:calc(var(--u)*22px);margin-top:calc(var(--u)*14px)}
.pod3{display:flex;align-items:flex-end;justify-content:center;gap:calc(var(--u)*8px);height:calc(var(--u)*170px);padding-top:calc(var(--u)*8px)}
.step{flex:1;max-width:calc(var(--u)*130px);display:flex;flex-direction:column;align-items:center;justify-content:flex-end}
.step .nm{font-size:calc(var(--u)*12px);font-weight:800;letter-spacing:.12em;margin-bottom:4px;text-align:center}
.step .sw{width:calc(var(--u)*34px);height:calc(var(--u)*14px);margin-bottom:4px;border-radius:3px;background:var(--c);box-shadow:0 0 12px var(--c)}
.step .bk{width:100%;display:flex;align-items:flex-start;justify-content:center;font-size:calc(var(--u)*34px);font-weight:900;font-style:italic;color:rgba(0,0,0,.65);background:linear-gradient(180deg,var(--m),var(--d));clip-path:polygon(0 8px,8px 0,100% 0,100% 100%,0 100%)}
.step.p1 .bk{height:calc(var(--u)*100px);--m:#ffd75e;--d:#b8861a}.step.p2 .bk{height:calc(var(--u)*72px);--m:#d8dde6;--d:#7c8594}.step.p3 .bk{height:calc(var(--u)*52px);--m:#e0955a;--d:#8a4a22}
.step.you .nm{color:#fff}.step.you .bk{outline:2px solid #ff3b4e;outline-offset:2px}
.tbl{width:100%;border-collapse:collapse;font-size:calc(var(--u)*13px)}
.tbl td{padding:calc(var(--u)*3px) calc(var(--u)*6px);border-bottom:1px solid rgba(255,255,255,.07)}
.tbl td:first-child{width:calc(var(--u)*34px);font-weight:900;font-style:italic;color:#8e99b0}.tbl tr.pod td:first-child{color:#ffc646}.tbl td:last-child{text-align:right;color:#8e99b0}
.tbl tr.you{background:rgba(255,59,78,.14)}.tbl tr.you td{color:#fff;font-weight:800}
.tbl tr.cut td{border-top:1px dashed rgba(255,179,71,.6)}
.brk{margin-top:calc(var(--u)*12px);display:grid;grid-template-columns:repeat(4,1fr);gap:calc(var(--u)*8px)}
.brk div{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);padding:calc(var(--u)*7px) calc(var(--u)*10px)}
.brk b{display:block;font-size:calc(var(--u)*22px);font-weight:900;font-style:italic;color:#fff;font-variant-numeric:tabular-nums}.brk span{font-size:calc(var(--u)*10px);letter-spacing:.18em;color:#8e99b0;font-weight:700}
.brk div.tot{background:rgba(255,59,78,.1);border-color:rgba(255,59,78,.4)}
.res .sync{margin-top:calc(var(--u)*10px);font-size:calc(var(--u)*12px);color:#8e99b0;letter-spacing:.08em;min-height:1.4em}
.res .btns{margin-top:calc(var(--u)*14px)}
.pz{text-align:center}.pz h1{font-size:calc(var(--u)*56px);margin:0 0 6px;font-style:italic;font-weight:900;letter-spacing:.1em}
/* touch pad */
#pad{display:none;position:relative;width:100%;height:176px;background:linear-gradient(180deg,#06080d,#0a0d14);border-top:1px solid #1a1f2b;padding:10px 12px 50px}
#app.portrait #pad:not([hidden]),#app.touch #pad:not([hidden]){display:flex;justify-content:space-between;align-items:center}
#app.touch:not(.portrait) #pad{position:absolute;left:0;right:0;bottom:0;height:auto;background:none;border:0;padding:0 14px 40px;pointer-events:none}
#pad .grp{display:flex;gap:12px;pointer-events:auto}
#pad button{width:76px;height:76px;border-radius:14px;color:#e9edf5;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);font-size:34px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:0;touch-action:none}
#pad button em{font-style:normal;font-size:10px;letter-spacing:.16em;font-weight:800}
#pad button.on{background:rgba(255,59,78,.4);border-color:#ff3b4e}
#pad .nosb{width:92px;height:92px;border-radius:50%;color:#7ff0ff;border-color:#38c8ff;background:rgba(56,200,255,.12)}#pad .nosb.on{background:rgba(56,200,255,.45);box-shadow:0 0 22px #38c8ff}
#pad .bkb{width:76px;height:76px;margin:0;display:flex;grid-template-columns:none;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);padding:0}
#pad span{font-size:26px;display:block;line-height:1}
/* portrait phone */
#app.portrait{--u:.8}
#app.portrait .tc{display:none}
#app.portrait .tl{padding:5px 9px}#app.portrait #pos b{font-size:calc(var(--u)*56px)}
#app.portrait .bl{width:calc(var(--u)*230px);bottom:calc(var(--u)*14px);gap:5px}
#app.portrait .br{bottom:calc(var(--u)*14px)}
#app.portrait .bc{bottom:calc(var(--u)*86px);padding:4px 12px}
#app.portrait #tools{top:calc(var(--u)*100px)}
#app.portrait #feed{top:calc(var(--u)*118px);width:calc(var(--u)*260px)}
#app.portrait .hero{padding:0 22px;max-width:100%;justify-content:flex-end;padding-bottom:20px}
#app.portrait .hero h1{font-size:calc(var(--u)*100px)}
#app.portrait .ov.title{background:linear-gradient(0deg,rgba(3,4,8,.95) 0,rgba(3,4,8,.78) 52%,rgba(3,4,8,0) 100%)}
#app.portrait .sel{padding:12px 12px;width:98%}
#app.portrait .sel .r3{grid-template-columns:1fr;gap:8px}#app.portrait .sel .r4{grid-template-columns:1fr 1fr;gap:8px}
#app.portrait .card .m{padding:5px 8px 7px}#app.portrait .card.crs{display:grid;grid-template-columns:42% 1fr}#app.portrait .card.crs .m{align-self:center}
#app.portrait .res .mid,#app.portrait .how .g{grid-template-columns:1fr}#app.portrait .brk{grid-template-columns:1fr 1fr}
#app.portrait .res .big{font-size:calc(var(--u)*80px)}
#app.portrait .pod3{height:calc(var(--u)*150px)}
@media (max-height:520px) and (orientation:landscape){#app{--u:.6}}
@media (prefers-reduced-motion:reduce){.ft,#count.pop{animation:none}}

.ov.dim{padding-bottom:calc(var(--u)*50px)}
.card img{display:block;width:100%;background:#05070c}
.card.crs img{height:calc(var(--u)*150px);object-fit:cover}
.card.rd img{height:calc(var(--u)*96px);object-fit:cover;object-position:center 82%}
.sel{max-height:100%}
#tools.title #bPause{display:none}
.hero .hint:last-child{color:#6f7a90}
#app.portrait .card.crs img{height:100%;min-height:calc(var(--u)*80px)}
#app.portrait .card.rd img{height:calc(var(--u)*70px)}

.bc{bottom:auto;top:calc(var(--u)*74px)}
#app.portrait .bc{top:calc(var(--u)*14px);bottom:auto;padding:3px 10px;gap:8px}
#app.portrait .bc .st span{display:none}#app.portrait .bc .st{min-width:calc(var(--u)*50px)}
#app.portrait .bc .mx{font-size:calc(var(--u)*44px)}
#app:not(.racing) #pad .grp{visibility:hidden}