*{box-sizing:border-box}body{margin:0;background:#dae8ef;color:#182e3b;font-family:"Avenir Next","Trebuchet MS",sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:disabled{cursor:wait}button:focus-visible,a:focus-visible{outline:3px solid #f65f39;outline-offset:5px}[hidden]{display:none!important}#app{height:100dvh;min-height:550px;overflow:hidden;position:relative}#scene{position:absolute;inset:0;width:100%;height:100%;touch-action:none;outline:none}header{position:absolute;inset:28px 36px auto;display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none}.brand{color:#183342;text-decoration:none;font-weight:950;font-size:22px;line-height:.88;letter-spacing:-1px;pointer-events:auto}.brand span{display:block;font-size:38px}.brand i{display:block;font:8px monospace;letter-spacing:1px;margin-top:12px}.top-right{display:flex;gap:12px;align-items:center;font:10px monospace;letter-spacing:1.1px}.top-right>span{padding-right:20px}.top-right button{pointer-events:auto;background:#f9fcfdba;border:1px solid #b5c8d1;border-radius:50px;padding:10px 13px;font-size:9px;color:#183342}#intro{position:absolute;top:26%;left:8%;width:430px;pointer-events:none}.eyebrow{font:10px monospace;letter-spacing:2px;margin-bottom:22px}h1{font-size:clamp(55px,6.7vw,106px);font-weight:950;line-height:.86;letter-spacing:-6px;margin:0}h1 em{font-style:normal;color:#e7603b}#intro p{font-size:16px;line-height:1.6;color:#3b5b6a;margin:26px 0}#intro>button,#result button,#paused button{pointer-events:auto;border:0;border-radius:7px;background:#e9613b;color:#fff8e9;padding:19px 28px;font-weight:850;font-size:13px;letter-spacing:1px;box-shadow:0 5px 0 #b7442c}#intro>button:disabled{opacity:.65}.instructions{margin-top:25px;display:flex;gap:17px;font:9px monospace;letter-spacing:.4px}.asset-line{font:9px monospace;color:#617e8b;margin-top:15px}footer{position:absolute;bottom:24px;left:36px;right:36px;display:flex;justify-content:space-between;align-items:end;font:9px/1.6 monospace;letter-spacing:.7px;color:#3a6171;pointer-events:none}footer div{display:flex;gap:18px;align-items:center}footer button,footer a{pointer-events:auto;border:0;background:none;font:9px monospace;letter-spacing:.5px;color:#335362;text-decoration:underline}.speed{position:absolute;bottom:122px;left:42px;display:flex;align-items:baseline;gap:8px}.speed strong{font-size:76px;letter-spacing:-5px;font-weight:900}.speed span{font:11px monospace}.stats{position:absolute;top:125px;right:38px;display:flex;flex-direction:column;gap:16px;min-width:135px}.stats span{font:9px monospace;letter-spacing:1px}.stats b{display:block;font:750 23px "Avenir Next",sans-serif;letter-spacing:-.5px;margin-top:5px}#health{color:#e7613c!important}.progress{position:absolute;bottom:87px;left:40px;right:40px;background:#45677c33;height:3px}.progress>div{height:100%;background:#e7603b;width:0}.distance{position:absolute;bottom:65px;left:40px;right:40px;display:flex;justify-content:space-between;font:9px monospace;letter-spacing:.9px}#toast{position:absolute;top:24%;left:0;right:0;text-align:center;font-weight:900;font-size:32px;text-shadow:0 2px 20px #fff;color:#e25a35;pointer-events:none}#controls{position:absolute;bottom:119px;left:50%;transform:translateX(-50%);display:flex;gap:9px}#controls button{width:49px;height:42px;border:1px solid #6f94a578;background:#f7fcff8c;color:#234654;border-radius:10px;font-size:22px;touch-action:none;user-select:none}#controls #brake{font:9px monospace;width:59px}#result,#paused{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;background:#f1f7f4ef;backdrop-filter:blur(10px);border:1px solid white;border-radius:14px;padding:42px 60px;min-width:390px;box-shadow:0 30px 100px #14355022}#result>span{font:10px monospace;letter-spacing:2px}h2{font-size:48px;letter-spacing:-2px;margin:14px 0}#result p{font:13px/1.8 monospace;margin:15px 0 25px}.sr{position:absolute;clip:rect(0,0,0,0);width:1px;height:1px;overflow:hidden}@media(max-width:650px){header{inset:20px 20px auto}.brand{font-size:17px}.brand span{font-size:30px}.brand i{font-size:6px}.top-right{gap:5px}.top-right>span{display:none}.top-right button{padding:8px;font-size:8px}#intro{left:25px;top:26%;width:calc(100% - 50px)}h1{font-size:62px;letter-spacing:-3px}.eyebrow{font-size:8px}#intro p{font-size:14px}.instructions{font-size:8px;gap:13px}footer{left:20px;right:20px;bottom:17px;font-size:7px}footer div{gap:8px}#perf{display:none}.stats{top:112px;right:20px;min-width:94px;gap:10px}.stats b{font-size:19px}.speed{left:22px;bottom:150px}.speed strong{font-size:56px}.progress{left:22px;right:22px}.distance{left:22px;right:22px;font-size:8px}#controls{bottom:110px}#toast{top:32%;font-size:24px}#result,#paused{min-width:0;width:calc(100% - 40px);padding:35px 20px}h2{font-size:40px}}
@media(min-width:651px){#intro{top:27%;width:540px}h1{font-size:clamp(56px,5.4vw,78px);letter-spacing:-4px}#intro h1 em{white-space:nowrap}#intro::before{content:"";position:absolute;z-index:-1;inset:-40px -40px -40px -90px;background:radial-gradient(ellipse at 35% 50%,#eef5f5ed,#eef5f588 60%,#eef5f500 75%);filter:blur(15px)}}
header::before{content:"";position:absolute;z-index:-1;inset:-28px -36px -50px;background:linear-gradient(#edf5f2bc,#edf5f200);pointer-events:none}header{isolation:isolate}#intro{isolation:isolate}
@media(max-width:650px){#intro::before{content:"";position:absolute;z-index:-1;inset:-30px -24px;background:linear-gradient(#ecf3f3dd,#ecf3f3dd 70%,#ecf3f300);filter:blur(10px)}}
#intro #inspect{display:block;background:transparent;color:#294c50;box-shadow:none;padding:18px 0 0;font-size:10px;text-decoration:underline;text-underline-offset:5px}#intro h1{font-size:clamp(42px,5.1vw,73px)}#intro p{font-size:14px}#character-lab{position:absolute;left:7%;top:20%;width:300px;pointer-events:none}#character-lab h2{font-size:65px;line-height:.85;margin:0 0 22px;letter-spacing:-3px}#character-lab em{font-style:normal;color:#dd643f}#character-lab p{font-size:12px;color:#456263}#hero-facts{font:10px/1.9 monospace;border-top:1px solid #9badaa;border-bottom:1px solid #9badaa;padding:12px 0;margin:18px 0}.lab-label{font:8px monospace;letter-spacing:1.4px;margin:14px 0 7px}.lab-buttons{display:flex;gap:5px}.lab-buttons button{pointer-events:auto;background:#edf2ef88;border:1px solid #91a7a3;border-radius:4px;color:#355352;padding:9px 10px;font:9px monospace}.lab-buttons button[aria-pressed=true]{background:#284e4c;color:#f4f7f1;border-color:#284e4c}#character-lab small{display:block;font:8px monospace;letter-spacing:.5px;margin-top:19px}#close-lab{pointer-events:auto;border:0;background:none;color:#254c4b;font:900 10px "Avenir Next",sans-serif;padding:22px 0;text-decoration:underline;text-underline-offset:5px}.inspecting footer,.inspecting .top-right{display:none}.inspecting .brand{opacity:.65}
@media(max-width:650px){#intro{top:auto;bottom:80px}#intro .eyebrow{margin-bottom:10px}#intro h1{font-size:43px;letter-spacing:-2px}#intro p{margin:13px 0;font-size:12px}#intro>button{padding:13px 21px;font-size:11px}#intro #inspect{padding-top:13px;font-size:9px}#intro .instructions{margin-top:16px}#intro .asset-line{font-size:7px}#intro::before{inset:-12px -25px;background:linear-gradient(#e0e8e500,#e0e8e5ed 18%,#e0e8e5 65%);filter:none}#character-lab{top:auto;bottom:10px;left:20px;width:calc(100% - 40px);background:#e1e9e6ed;padding:14px;border-radius:10px}#character-lab>.eyebrow,#character-lab h2,#character-lab p,#character-lab small{display:none}#hero-facts{margin:0 0 8px;padding:0 0 8px;border-top:0;font-size:8px}.lab-label{margin:8px 0 5px;font-size:7px}.lab-buttons button{padding:7px 10px;font-size:8px}#close-lab{padding:12px 0 0;font-size:9px}}
@media(max-width:650px){#intro::before{bottom:-100px}}
.instructions{flex-wrap:wrap;row-gap:8px}.instructions>span:last-child{flex-basis:100%}.motion-options{flex-wrap:wrap}#controls #crouch{font:11px "Avenir Next",sans-serif}.motion-options button{font-size:10px}#character-lab .motion-options{max-width:300px}@media(min-width:651px) and (max-height:800px){#character-lab{top:15%}#character-lab h2{font-size:48px;margin-bottom:14px}#character-lab .eyebrow{margin-bottom:12px}}
@media(max-width:650px){#character-lab .motion-options{gap:4px}#character-lab .motion-options button{padding:7px 8px;font-size:9px}}