:root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:#07151c;color:#f4fbf7}*{box-sizing:border-box}html,body{width:100%;min-width:320px;height:100%;margin:0;overflow:hidden}button{font:inherit}.runner-shell,.runner-viewport,.runner-stage{position:fixed;inset:0;width:100%;height:100%;overflow:hidden}.runner-shell{isolation:isolate;background:#102c38}.runner-viewport{z-index:0}.runner-stage canvas{display:block;width:100%;height:100%;background:#102c38}.runner-shell:before,.runner-shell:after{position:fixed;z-index:1;pointer-events:none;content:""}.runner-shell:before{inset:0;background:linear-gradient(90deg,rgba(3,13,17,.58),transparent 25%,transparent 70%,rgba(3,13,17,.18)),linear-gradient(0deg,rgba(3,12,16,.64),transparent 24%,transparent 78%,rgba(4,13,17,.28))}.runner-shell:after{inset:10px;border:1px solid rgba(193,244,222,.12);border-radius:20px;box-shadow:inset 0 0 70px #030d1129}.runner-panel{position:fixed;inset:0;z-index:2;pointer-events:none}.runner-panel>*{pointer-events:auto}.runner-brand{position:absolute;top:28px;left:30px;width:min(360px,calc(100vw - 60px));padding:16px 18px 17px;border:1px solid rgba(196,246,221,.22);border-radius:14px;background:linear-gradient(135deg,#05181ce0,#0a2627ad);box-shadow:0 18px 50px #01090c4d;backdrop-filter:blur(18px) saturate(1.2)}.runner-panel .label{display:flex;gap:8px;align-items:center;color:#b9f4d5;font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}.runner-panel .label i,.contract-status i{width:7px;height:7px;border-radius:50%;background:#79f0bc;box-shadow:0 0 14px #79f0bc}.runner-brand h1{margin:7px 0 0;font-size:clamp(25px,2.2vw,34px);font-weight:840;line-height:1;letter-spacing:-.045em}.runner-brand .claim{max-width:32ch;margin:10px 0 0;color:#c4ded4;font-size:12px;line-height:1.45}.panel-metrics{position:absolute;top:28px;right:30px;width:min(560px,calc(100vw - 440px));display:grid;gap:8px}.metrics-row{display:grid;grid-template-columns:repeat(5,minmax(82px,1fr));gap:6px;padding:6px;border:1px solid rgba(196,246,221,.2);border-radius:14px;background:#05161bb8;box-shadow:0 18px 50px #01090c38;backdrop-filter:blur(16px) saturate(1.15)}.metrics-row article{min-width:0;padding:10px 11px;border-radius:9px;background:linear-gradient(180deg,#daffee14,#daffee06)}.metrics-row span{display:block;color:#9bcab8;font-size:9px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}.metrics-row strong{display:block;margin-top:4px;overflow:hidden;color:#fffdf0;font-size:18px;line-height:1;text-overflow:ellipsis;white-space:nowrap}.metric--flow strong{color:#ffe993}.metric--checkpoint strong{color:#9bf4d5}.objective{justify-self:end;max-width:100%;padding:8px 12px;border:1px solid rgba(121,240,188,.26);border-radius:999px;background:#05191cc7;color:#e2f8ed;font-size:11px;box-shadow:0 12px 32px #01090c38;backdrop-filter:blur(14px)}.runner-controls{position:absolute;bottom:26px;left:30px;display:grid;width:330px;gap:8px}.runner-controls h2{display:none}.button-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;padding:7px;border:1px solid rgba(196,246,221,.2);border-radius:15px;background:#05161bc2;box-shadow:0 18px 50px #01090c47;backdrop-filter:blur(16px)}.button-grid button{display:grid;min-width:0;min-height:54px;place-content:center;gap:2px;border:1px solid rgba(188,240,216,.2);border-radius:10px;background:linear-gradient(180deg,#32685cc2,#0f302ddb);color:#f1fff8;cursor:pointer;touch-action:none}.button-grid button b{font-size:17px}.button-grid button span{color:#baddcf;font-size:9px;font-weight:760;text-transform:uppercase}.button-grid button:hover,.button-grid button:focus-visible,.button-grid button[aria-pressed=true]{border-color:#79f0bc;background:linear-gradient(180deg,#439778e6,#12483af0);outline:none;box-shadow:0 0 18px #79f0bc38}.controls-list{display:flex;gap:8px;margin:0;padding:0 8px;color:#b8d5ca;font-size:10px;list-style:none}.controls-list kbd{color:#f2fff8;font:inherit;font-weight:800}.route-contract{position:absolute;right:30px;bottom:26px;width:245px;padding:12px 14px;border:1px solid rgba(196,246,221,.16);border-radius:12px;background:#05161b9e;color:#aac8bd;backdrop-filter:blur(14px)}.contract-status{display:flex;gap:8px;align-items:center;color:#dff9ed;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.route-contract p{margin:7px 0 0;font-size:10px;line-height:1.4}@media(max-width:980px){.runner-brand{width:290px}.runner-brand .claim{display:none}.panel-metrics{width:calc(100vw - 360px)}.metrics-row{grid-template-columns:repeat(5,minmax(60px,1fr))}.route-contract{display:none}}@media(max-width:620px){.runner-shell:after{inset:5px;border-radius:14px}.runner-brand{top:10px;left:10px;width:auto;max-width:190px;padding:9px 11px;border-radius:10px}.runner-brand h1{margin-top:4px;font-size:19px}.runner-panel .label{font-size:8px}.panel-metrics{top:10px;right:10px;width:174px;gap:5px}.metrics-row{grid-template-columns:repeat(3,1fr);gap:3px;padding:4px;border-radius:10px}.metrics-row article{padding:6px 5px;border-radius:7px}.metrics-row article:nth-child(4),.metric--checkpoint{display:none}.metrics-row span{font-size:7px;letter-spacing:.04em}.metrics-row strong{margin-top:2px;font-size:13px}.objective{max-width:174px;padding:5px 8px;overflow:hidden;font-size:8px;text-overflow:ellipsis;white-space:nowrap}.runner-controls{left:10px;right:10px;bottom:max(10px,env(safe-area-inset-bottom));width:auto}.button-grid{gap:5px;padding:5px;border-radius:13px}.button-grid button{min-height:58px;border-radius:9px}.button-grid button b{font-size:19px}.controls-list{display:none}}
