:root{--bg:#0a0b0d;--panel:#121418;--raised:#1a1d22;--line:#262a31;--ink:#eceef0;--ink2:#a8adb5;--muted:#737983;--diy:#1fa38f;--mech:#cf7520;--review:#e6c34a;--danger:#e0533f;--tech:"Chakra Petch", ui-monospace, monospace;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body{background:var(--bg);color:var(--ink);margin:0;font:15px/1.45 Inter,system-ui,sans-serif}button,input,select,textarea{font:inherit;color:inherit}button{cursor:pointer}h1,h2,h3,.tech{font-family:var(--tech);letter-spacing:.04em}h2,h3{text-transform:uppercase;color:var(--ink2);margin:0;font-size:.95rem;font-weight:600}.muted{color:var(--muted)}.small{font-size:.82rem}:focus-visible{outline:2px solid var(--accent,#fff);outline-offset:2px}.app{grid-template-columns:1fr clamp(420px,32vw,520px);height:100vh;display:grid}.stage{background:var(--bg);height:100%;position:relative;overflow:hidden}.side{background:var(--panel);border-left:2px solid var(--accent);padding-bottom:24px;position:relative;overflow-y:auto}@media (width<=899px){.app{flex-direction:column;height:auto;min-height:100svh;display:flex}.stage{height:60svh;min-height:340px}.side{border-left:0;border-top:2px solid var(--accent);overflow:visible}.keys{display:none}}.hud{padding:calc(10px + env(safe-area-inset-top)) 16px 10px;pointer-events:none;background:linear-gradient(#0a0b0dee,#0a0b0d00);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 16px;display:flex;position:absolute;inset:0 0 auto}.hud>*{pointer-events:auto}.hud h1{text-transform:uppercase;letter-spacing:.18em;margin:0;font-size:1rem}.hud h1:before{content:"";background:var(--accent);width:10px;height:10px;margin-right:8px;display:inline-block;transform:skew(-18deg)}.cars{gap:6px;display:flex}.cars button{border:1px solid var(--line);background:#15171bcc;border-bottom:3px solid #0000;border-radius:6px;flex-direction:column;align-items:flex-start;min-width:92px;padding:6px 12px;transition:border-color .2s;display:flex}.cars button b{font-family:var(--tech);font-size:.95rem}.cars button small{color:var(--muted);font-size:.75rem}.cars button[aria-selected=true]{border-bottom-color:var(--accent);background:#1d2026e6}.plate{pointer-events:none;text-shadow:0 1px 6px #000;flex-direction:column;gap:2px;display:flex;position:absolute;bottom:68px;left:16px}.plate .tech{color:var(--ink2);text-transform:uppercase;font-size:.8rem}.saved{font-family:var(--tech);color:var(--ink2);font-size:.9rem}.saved .count{color:var(--ink);margin-left:4px;font-size:1.6rem}.controls{flex-wrap:wrap;align-items:center;gap:8px;display:flex;position:absolute;bottom:18px;left:12px;right:12px}.seg{border:1px solid var(--line);background:#15171bdd;border-radius:999px;padding:3px;display:inline-flex}.seg button{min-height:36px;color:var(--ink2);background:0 0;border:0;border-radius:999px;padding:0 14px;font-weight:600}.seg button[aria-checked=true]{background:var(--ink);color:#111}.seg button.diy[aria-checked=true]{background:var(--diy);color:#fff}.seg button.mechanic[aria-checked=true]{background:var(--mech);color:#fff}.chip{border:1px solid var(--line);min-height:36px;color:var(--ink2);background:#15171bdd;border-radius:999px;padding:0 14px;font-weight:600}.chip.on{border-color:var(--accent);color:var(--ink);box-shadow:inset 0 0 0 1px var(--accent)}.legend{color:var(--ink2);pointer-events:none;flex-direction:column;gap:3px;margin:0;padding:0;font-size:.75rem;list-style:none;display:flex;position:absolute;bottom:68px;right:12px}@media (width<=899px){.legend{bottom:auto;left:16px;right:auto;top:calc(112px + env(safe-area-inset-top));flex-direction:row;gap:12px}}.keys{color:var(--muted);margin-left:auto;font-size:.75rem}kbd{border:1px solid var(--line);background:var(--raised);min-width:20px;color:var(--ink2);font:600 .7rem/18px var(--tech);text-align:center;border-bottom-width:2px;border-radius:4px;margin:0 2px 0 8px;padding:0 5px;display:inline-block}kbd+kbd,kbd:first-child{margin-left:2px}.legend li:before{content:"";vertical-align:-1px;border-radius:50%;width:10px;height:10px;margin-right:6px;display:inline-block}.legend .diy:before{background:var(--diy)}.legend .mechanic:before{background:var(--mech)}.legend .both:before{background:conic-gradient(var(--diy) 0 50%, var(--mech) 0)}.legend .none:before{border:2px solid #fffa}.credit{color:#ffffff40;pointer-events:none;font-size:.6rem;position:absolute;bottom:2px;right:12px}.loading{z-index:30;font-family:var(--tech);color:var(--ink2);background:#000a;border-radius:6px;padding:8px 14px;position:absolute;top:45%;left:50%;transform:translate(-50%,-50%)}.hotspot{background:0 0;border:0;border-radius:50%;width:32px;height:32px;padding:0;transition:opacity .25s;position:relative}.hotspot:before{content:"";border:2px solid #0a0b0d;border-radius:50%;transition:transform .15s;position:absolute;inset:8px;box-shadow:0 0 0 1px #fffa,0 2px 8px #000}.hotspot:hover:before,.hotspot:focus-visible:before{transform:scale(1.25)}.hotspot .tip{color:var(--ink);font:600 .75rem var(--tech);white-space:nowrap;opacity:0;pointer-events:none;background:#000d;border-radius:4px;padding:3px 8px;transition:opacity .15s;position:absolute;bottom:100%;left:50%;transform:translate(-50%)}.hotspot:hover .tip,.hotspot:focus-visible .tip{opacity:1}.hotspot.diy:before{background:var(--diy)}.hotspot.mechanic:before{background:var(--mech)}.hotspot.both:before{background:conic-gradient(var(--diy) 0 50%, var(--mech) 0)}.hotspot.unset:before{background:var(--ink)}.hotspot.none:before{background:#0a0b0d88;border-color:#fffb;box-shadow:0 2px 8px #000}.hotspot.due:after{content:"";border:2px solid var(--review);border-radius:50%;animation:1.8s ease-out infinite pulse;position:absolute;inset:4px}@keyframes pulse{0%{opacity:.9;transform:scale(.8)}to{opacity:0;transform:scale(1.8)}}@media (prefers-reduced-motion:reduce){.hotspot.due:after{animation:none}}.tabs{z-index:2;background:var(--panel);border-bottom:1px solid var(--line);display:flex;position:sticky;top:0}.tabs button{white-space:nowrap;min-height:48px;color:var(--muted);font-family:var(--tech);text-transform:uppercase;letter-spacing:.06em;background:0 0;border:0;border-bottom:2px solid #0000;flex:1;padding:0 8px;font-size:.82rem;font-weight:600}.tabs button[aria-selected=true]{color:var(--ink);border-bottom-color:var(--accent)}.tabs .new{background:var(--accent);color:#fff;border:0;border-radius:6px;flex:none;min-height:34px;margin:7px 10px 7px 4px;padding:0 14px}.tabs button:hover:not([aria-selected=true]):not(.new){color:var(--ink2)}.entry,.build tr,.badges li{transition:background .15s}.entry:hover{background:#1e2127}.panel{flex-direction:column;gap:12px;padding:14px 16px;display:flex}.zone-head{align-items:center;gap:12px;display:flex}.zone-head h2{color:var(--ink);flex:1;font-size:1.05rem}.empty{color:var(--muted);text-align:center;padding:24px 0}.link{color:var(--ink2);text-underline-offset:3px;background:0 0;border:0;padding:0;text-decoration:underline}.filters{align-items:center;gap:12px;display:flex}select,input,textarea{background:var(--raised);border:1px solid var(--line);border-radius:6px;width:100%;min-height:42px;padding:8px 10px}.filters select{width:auto}.check{color:var(--ink2);align-items:center;gap:8px;display:flex}.check input{width:18px;min-height:18px}.entry{background:var(--raised);border:1px solid var(--line);border-left:3px solid var(--muted);border-radius:8px;padding:12px 14px}.entry.diy{border-left-color:var(--diy)}.entry.mechanic{border-left-color:var(--mech)}.entry header{color:var(--muted);justify-content:space-between;align-items:center;font-size:.8rem;display:flex}.entry h3{color:var(--ink);text-transform:none;letter-spacing:0;margin:4px 0 6px;font-family:Inter,sans-serif;font-size:1rem}.method{border:1px solid;border-radius:999px;padding:1px 8px;font-size:.72rem;font-weight:600}.method.diy{color:#4fd1bc}.method.mechanic{color:#f0a060}.method.unset{color:var(--ink2)}.entry dl{grid-template-columns:auto 1fr;gap:2px 12px;margin:0;font-size:.88rem;display:grid}.entry dt{color:var(--muted)}.entry dd{margin:0}.notes{color:var(--ink2);white-space:pre-wrap;margin:8px 0 0;font-size:.88rem}.review{color:var(--review);margin:0 0 6px;font-size:.82rem;font-weight:600}small.review{margin:0}.entry footer{justify-content:space-between;margin-top:8px;font-size:.85rem;display:flex}.entry footer a{color:var(--ink2)}.entry footer .link:only-child{margin-left:auto}.photos{flex-wrap:wrap;gap:6px;margin-top:8px;display:flex}.photos img{object-fit:cover;border-radius:6px;width:72px;height:72px;display:block}.thumb{background:0 0;border:0;padding:0;position:relative}.thumb span{background:#000c;border-radius:50%;width:20px;height:20px;line-height:20px;position:absolute;top:2px;right:2px}.build{border-collapse:collapse;width:100%}.build th,.build td{border-bottom:1px solid var(--line);text-align:left;vertical-align:top;padding:10px 4px}.build th{width:40%;font-weight:500}.build th .link{color:var(--ink2);text-decoration:none}.stats{flex-direction:column;gap:10px;display:flex}.stats h3{margin-top:10px}.heroes{grid-template-columns:1fr 1fr;gap:10px;display:grid}.hero{background:var(--raised);border:1px solid var(--line);border-radius:8px;padding:12px}.hero small{color:var(--muted);display:block}.hero .count{font-family:var(--tech);font-size:1.7rem;font-weight:600}.bars{flex-direction:column;gap:8px;display:flex}.bar-row{grid-template-columns:92px 1fr auto;align-items:center;gap:4px 10px;font-size:.88rem;display:grid}.bar-row small{grid-column:2/4;margin-top:-4px;font-size:.75rem}.track{background:var(--bg);border-radius:4px;height:10px}.fill{border-radius:0 4px 4px 0;min-width:2px;height:100%;transition:width .6s}.timeline{margin:0}.timeline svg{width:100%;height:auto;display:block}.timeline .axis{stroke:var(--line)}.timeline text{fill:var(--muted);font-size:9px}.timeline g.on rect[rx]{stroke:var(--ink);stroke-width:1px}.legend-row{color:var(--ink2);flex-wrap:wrap;gap:4px 12px;margin-bottom:6px;font-size:.8rem;display:flex}.legend-row .tip{color:var(--ink);margin-left:auto}.key:before{content:"";vertical-align:-1px;border-radius:2px;width:10px;height:10px;margin-right:5px;display:inline-block}.key.diy:before{background:var(--diy)}.key.mechanic:before{background:var(--mech)}.badges{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;margin:0;padding:0;list-style:none;display:grid}.badges li{text-align:center;background:var(--raised);border:1px solid var(--line);color:var(--muted);border-radius:10px;flex-direction:column;align-items:center;gap:2px;padding:14px 8px;display:flex}.badges .medal{font-size:1.8rem;line-height:1}.badges b{font-family:var(--tech);font-size:.9rem}.badges small{font-size:.75rem}.badges li.earned{color:var(--ink);border-color:var(--accent);box-shadow:0 0 18px -6px var(--accent)}.badges li.earned .medal{color:var(--review)}.readonly{text-align:center;color:var(--muted);font-size:.8rem}.sheet{z-index:50;background:#000b;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.sheet form{background:var(--panel);border-top:3px solid var(--accent);border-radius:14px;flex-direction:column;gap:12px;width:100%;max-width:680px;max-height:92vh;padding:20px 24px 24px;display:flex;overflow-y:auto}@media (width<=899px){.sheet{align-items:flex-end}.sheet form{padding:16px 16px calc(20px + env(safe-area-inset-bottom));border-radius:14px 14px 0 0}}.sheet header{justify-content:space-between;align-items:center;display:flex}.sheet label{color:var(--ink2);flex-direction:column;gap:4px;font-size:.82rem;display:flex}.sheet label.check{flex-direction:row;font-size:.9rem}.sheet input,.sheet select,.sheet textarea{color:var(--ink);font-size:16px}.row{grid-template-columns:1fr 1fr;gap:10px;display:grid}.seg.big{border-radius:10px;display:flex}.seg.big button{border-radius:8px;flex:1;min-height:44px}.sheet footer{justify-content:flex-end;gap:10px;display:flex}.primary{background:var(--accent);color:#fff;border:0;border-radius:8px;min-height:46px;padding:0 22px;font-weight:600}.primary:disabled{opacity:.6}.danger{border:1px solid var(--danger);min-height:46px;color:var(--danger);background:0 0;border-radius:8px;margin-right:auto;padding:0 18px}.error{color:var(--danger);margin:0}.login{--accent:#a3172a;flex-direction:column;gap:14px;max-width:340px;margin:18svh auto 0;padding:0 16px;display:flex}.login h1{text-transform:uppercase;letter-spacing:.16em;font-size:1.2rem}.login label{color:var(--ink2);flex-direction:column;gap:4px;font-size:.85rem;display:flex}.hud,.plate,.controls,.legend,.credit{z-index:25}
