:root{--bg:#171a21;--bg-deep:#10141a;--bg-navy:#1b2838;--surface:#1f242c;--surface-2:#262d37;--field:#0c0f14;--field-deep:#080a0e;--line:#323a46;--line-bright:#45505f;--text:#e6e8ea;--muted:#8a98a8;--faint:#5f6b7a;--field-text:#c7ccd3;--log-text:#aab2bd;--on-accent:#fff;--accent:#1a9fff;--accent-bright:#66c0f4;--accent-soft:rgba(var(--accent-rgb), .16);--accent-hi:#3eafff;--accent-lo:#0f8de8;--accent-side:#0b5f9e;--danger:#ec5f59;--danger-hi:#f2756f;--danger-lo:#e0524c;--danger-edge:#c0433d;--danger-side:#99332e;--danger-flash:#ffb3ae;--danger-bright:#ff8a7d;--ok:#5ba32b;--cap:#2a2e36;--cap-hi:#353b45;--cap-lo:#20242c;--cap-edge:#14171c;--cap-side:#05070a;--cap-text:#e6e8ea;--accent-rgb:26, 159, 255;--danger-rgb:236, 95, 89;--bg-deep-rgb:16, 20, 26;--white-rgb:255, 255, 255;--black-rgb:0, 0, 0;--key:66px;--font:"Archivo", system-ui, sans-serif;--mono:"IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace}*{box-sizing:border-box}[hidden]{display:none!important}html{height:100%}body{min-height:100vh;font-family:var(--font);color:var(--text);background:radial-gradient(1100px 620px at 50% -8%, rgba(var(--accent-rgb), .12), transparent 62%), linear-gradient(180deg, var(--bg-navy) 0%, var(--bg) 42%, var(--bg-deep) 100%), var(--bg);background-attachment:fixed;flex-direction:column;margin:0;display:flex}::selection{background:var(--accent-soft);color:var(--text)}.masthead{justify-content:space-between;align-items:center;padding:18px clamp(16px,4vw,40px) 14px;display:flex}.brand{align-items:center;gap:13px;display:flex}.brand-mark{background:linear-gradient(160deg, var(--accent-bright), var(--accent));width:42px;height:42px;color:var(--on-accent);box-shadow:0 3px 0 var(--accent-side), inset 0 1px 0 rgba(var(--white-rgb), .25);border-radius:11px;place-items:center;font-size:15px;font-weight:800;display:grid}.brand-text h1{letter-spacing:.2em;text-transform:uppercase;margin:0;font-size:20px;font-weight:800;line-height:1.1}.brand-text p{color:var(--muted);font-family:var(--mono);letter-spacing:.22em;text-transform:uppercase;margin:0;font-size:10px}.checker{opacity:.4;background:conic-gradient(rgba(var(--white-rgb), .18) 25%, transparent 0 50%, rgba(var(--white-rgb), .18) 0 75%, transparent 0) 0 0 / 16px 16px;height:8px}.chip{font-family:var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);background:var(--surface);border:1px solid var(--line);border-radius:999px;align-items:center;gap:8px;padding:7px 14px;font-size:10.5px;display:flex}.chip .dot{background:var(--accent);width:8px;height:8px;box-shadow:0 0 8px var(--accent);border-radius:50%;animation:2.2s ease-in-out infinite pulse}@keyframes pulse{50%{opacity:.45}}main{flex:1;place-items:center;padding:28px 16px;display:grid}.screen{text-align:center;width:100%;max-width:800px}.screen[hidden]{display:none}.screen>*{animation:.55s cubic-bezier(.2,.7,.2,1) backwards rise}.screen>:nth-child(2){animation-delay:50ms}.screen>:nth-child(3){animation-delay:.1s}.screen>:nth-child(4){animation-delay:.15s}.screen>:nth-child(5){animation-delay:.2s}.screen>:nth-child(6){animation-delay:.25s}@keyframes rise{0%{opacity:0;transform:translateY(14px)}}.hero-icon{width:78px;color:var(--accent);filter:drop-shadow(0 0 18px var(--accent-soft))}.hero-icon-wide{width:118px}.screen h2{letter-spacing:.02em;margin:18px 0 10px;font-size:clamp(24px,4vw,34px);font-weight:800}.lede{color:var(--muted);max-width:54ch;margin:0 auto 28px;font-size:15px;line-height:1.65}.hint{color:var(--faint);max-width:52ch;margin:22px auto 0;font-size:13px;line-height:1.6}.hint strong,.lede strong{color:var(--text);font-weight:600}.connect-status{font-family:var(--mono);color:var(--danger);min-height:1.2em;font-size:12.5px}.btn-cta{font:inherit;letter-spacing:.09em;text-transform:uppercase;color:var(--on-accent);background:linear-gradient(var(--accent-hi), var(--accent-lo));cursor:pointer;box-shadow:0 6px 0 var(--accent-side), 0 14px 32px rgba(var(--accent-rgb), .32);border:none;border-radius:11px;padding:16px 36px;font-size:16px;font-weight:700;transition:transform 70ms,box-shadow 70ms,filter .15s}.btn-cta:hover{filter:brightness(1.07)}.btn-cta:active{box-shadow:0 2px 0 var(--accent-side), 0 8px 20px rgba(var(--accent-rgb), .25);transform:translateY(4px)}.drive-caption{color:var(--muted);font-family:var(--mono);letter-spacing:.18em;text-transform:uppercase;font-size:12px}.drive-caption strong{color:var(--text);font-weight:600}.drive-stack{flex-direction:column;align-items:center;gap:20px;display:flex}.cluster{flex-direction:column;align-items:center;gap:10px;display:flex}.cluster-row{gap:10px;display:flex}.driving{flex-direction:column;align-items:center;gap:0;display:flex}.key{width:var(--key);height:var(--key);font:inherit;color:var(--cap-text);background:linear-gradient(178deg, var(--cap-hi), var(--cap-lo));border:1px solid var(--cap-edge);box-shadow:0 5px 0 var(--cap-side), 0 8px 16px rgba(var(--black-rgb), .4), inset 0 1px 0 rgba(var(--white-rgb), .08);cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:none;border-radius:14px;flex-direction:column;justify-content:center;align-items:center;gap:1px;font-size:21px;font-weight:700;transition:transform 50ms,box-shadow 50ms,border-color .12s,color .12s;display:flex}.key .sub{font-family:var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-size:8px;font-weight:500}.key.active,.key[data-action]:active{box-shadow:0 1px 0 var(--cap-side), 0 0 22px var(--accent-soft), inset 0 0 14px rgba(var(--accent-rgb), .2);border-color:var(--accent);color:var(--accent-bright);transform:translateY(4px)}.key.active .sub{color:var(--accent-bright)}.key:disabled{opacity:.32;cursor:not-allowed}.no-reverse{color:var(--faint);font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase;margin:0;font-size:11px}.key-stop{width:calc(var(--key) * 3 + 20px);height:var(--key);letter-spacing:.2em;color:var(--on-accent);background:linear-gradient(178deg, var(--danger-hi), var(--danger-lo));border-color:var(--danger-edge);box-shadow:0 5px 0 var(--danger-side), 0 8px 16px rgba(var(--black-rgb), .4), inset 0 1px 0 rgba(var(--white-rgb), .25);text-shadow:0 1px 2px rgba(var(--black-rgb), .28);gap:3px;font-size:18px;font-weight:800}.key-stop .sub{color:rgba(var(--white-rgb), .7)}.key-stop.active,.key-stop:active{box-shadow:0 1px 0 var(--danger-side), 0 0 22px rgba(var(--danger-rgb), .45), inset 0 0 14px rgba(var(--black-rgb), .22);border-color:var(--danger-flash);color:var(--on-accent);transform:translateY(4px)}.key-stop.active .sub{color:rgba(var(--white-rgb), .85)}.panel{background:var(--surface);border:1px solid var(--line);text-align:left;box-shadow:inset 0 1px 0 rgba(var(--white-rgb), .03);border-radius:14px;padding:16px 22px 18px}.panel-label{font-family:var(--mono);letter-spacing:.26em;text-transform:uppercase;color:var(--muted);margin-bottom:12px;font-size:10px;display:block}.speed-controls{align-items:center;gap:14px;display:flex}.key-small{border-radius:10px;width:46px;height:46px;font-size:23px}.speed-readout{text-align:center;font-variant-numeric:tabular-nums;min-width:100px;font-size:36px;font-weight:800;line-height:1}.speed-readout small{color:var(--muted);margin-left:2px;font-size:14px}.speed-meter{gap:4px;margin-top:14px;display:flex}.speed-meter i{background:var(--surface-2);border-radius:2px;flex:1;height:7px;transition:background .15s}.speed-meter i.on{background:linear-gradient(90deg, var(--accent-bright), var(--accent));box-shadow:0 0 8px rgba(var(--accent-rgb), .4)}footer{padding:26px clamp(16px,4vw,40px) 22px;position:relative}.disclaimer{text-align:center;max-width:80ch;color:var(--faint);font-family:var(--mono);margin:0 auto;font-size:10.5px;line-height:1.7}.disclaimer strong{color:var(--muted)}.dev-link{color:var(--faint);font-family:var(--mono);letter-spacing:.16em;text-transform:uppercase;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:6px;padding:4px 9px;font-size:10px;position:absolute;bottom:12px;right:12px}.dev-link:hover{color:var(--muted);border-color:var(--line)}#dev-drawer{z-index:50;background:rgba(var(--bg-deep-rgb), .97);max-height:78vh;color:var(--text);border-top:2px solid var(--accent);box-shadow:0 -16px 44px rgba(var(--black-rgb), .55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:14px clamp(14px,3vw,30px) 22px;animation:.22s ease-out drawer-in;position:fixed;bottom:0;left:0;right:0;overflow-y:auto}#dev-drawer[hidden]{display:none}@keyframes drawer-in{0%{opacity:0;transform:translateY(24px)}}.dev-head{align-items:center;gap:14px;margin-bottom:12px;display:flex}.dev-title{font-family:var(--mono);letter-spacing:.28em;color:var(--accent);font-size:12px;font-weight:600}.dev-hint{color:var(--faint);flex:1;font-size:11px}.dev-close{cursor:pointer;border:1px solid var(--line);width:28px;height:28px;color:var(--muted);background:0 0;border-radius:8px}.dev-close:hover{color:var(--text)}.dev-grid{grid-template-columns:1fr 1fr;gap:14px;display:grid}@media (width<=860px){.dev-grid{grid-template-columns:1fr}}.dev-card{background:var(--surface);border:1px solid var(--line);text-align:left;border-radius:12px;padding:14px 16px}.dev-card h3{font-family:var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin:0 0 12px;font-size:10.5px}.dev-card-wide{grid-column:1/-1}.dev-row{color:var(--muted);flex-wrap:wrap;align-items:center;gap:10px;margin:9px 0;font-size:13px;display:flex}.ch-grid{grid-template-columns:repeat(4,1fr);gap:6px;display:grid}.ch-grid input{display:none}.ch-grid span{text-align:center;cursor:pointer;border:1px solid var(--line);color:var(--muted);border-radius:8px;padding:7px 4px;font-size:12px;display:block}.ch-grid input:checked+span{border-color:var(--accent);color:var(--accent-bright);background:var(--accent-soft)}.btn{font:inherit;cursor:pointer;border:1px solid var(--line);background:var(--surface-2);color:var(--text);border-radius:8px;padding:8px 14px;font-size:13px}.btn:hover{border-color:var(--line-bright)}.btn:disabled{opacity:.5;cursor:default}.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600}.btn-danger{background:var(--danger);border-color:var(--danger);color:var(--on-accent);font-weight:600}textarea{resize:vertical;background:var(--field);width:100%;height:170px;color:var(--field-text);border:1px solid var(--line);font-family:var(--mono);border-radius:8px;padding:8px;font-size:12px}input[type=number]{background:var(--field);width:76px;color:var(--text);border:1px solid var(--line);font:inherit;border-radius:6px;padding:5px 6px;font-size:13px}input[type=range]{accent-color:var(--accent);width:150px}#dev-log{background:var(--field-deep);border:1px solid var(--line);min-height:80px;max-height:200px;font-family:var(--mono);color:var(--log-text);white-space:pre-wrap;border-radius:8px;margin:0;padding:10px;font-size:12px;overflow-y:auto}.log-err{color:var(--danger-bright)}.log-ok{color:var(--accent-bright)}kbd{font-family:var(--mono);color:var(--cap-text);background:var(--cap);border:1px solid var(--cap-edge);border-bottom-width:2px;border-radius:5px;padding:1px 6px;font-size:11px}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}