:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,'Noto Sans JP',sans-serif;color:#e9f6f1;background:#102731;font-synthesis:none}*{box-sizing:border-box}body{margin:0;overflow:hidden}canvas{display:block;width:100vw;height:100dvh}#shade{position:fixed;inset:0;pointer-events:none;background:linear-gradient(180deg,#06233277,transparent 34%,transparent 65%,#05202b99)}header{position:fixed;top:30px;left:36px;right:36px;display:flex;justify-content:space-between;align-items:flex-start}.brand{font-size:26px;font-weight:750;letter-spacing:.27em}.brand span{display:block;font-size:11px;letter-spacing:.18em;margin-top:7px;color:#b7d4d8}button{color:inherit;background:#112e3cd9;border:1px solid #a7d3d33a;border-radius:6px;min-height:42px;padding:9px 16px;font:600 14px inherit;cursor:pointer;backdrop-filter:blur(10px)}button:hover{background:#275361}button:focus-visible{outline:3px solid #6bf2c4;outline-offset:3px}nav{display:flex;gap:8px}#metrics{position:fixed;top:142px;left:36px;width:190px;text-shadow:0 2px 10px #092c3d}#metrics>div{margin-bottom:28px}label{font-size:12px;letter-spacing:.1em;color:#c4dade;display:block}label small{float:right;font-size:11px;color:#9bc0c5}strong{font-variant-numeric:tabular-nums;display:block;font-size:48px;font-weight:400;line-height:1.3;letter-spacing:.04em}.throttle label b{float:right;font-weight:400;color:#6bf2c4}.bar{height:3px;background:#d6eeee33;margin-top:14px}.bar i{display:block;height:100%;background:#6bf2c4;width:0}#course{position:fixed;top:142px;right:36px;text-align:right}#course strong{font-size:42px}#course em{font-size:22px;color:#b5d1d6;font-style:normal}.dots{display:flex;justify-content:flex-end;gap:7px;margin-top:10px}.dots i{width:26px;height:3px;background:#cbe0dc44}.dots i.passed{background:#6bf2c4}#distance{font-size:12px;color:#b5d1d6}#reticle{position:fixed;top:47%;left:50%;transform:translate(-50%,-50%);font-size:26px;font-weight:200;color:#e7ffed88;pointer-events:none}#message{position:fixed;left:50%;top:38%;transform:translate(-50%,-25%);text-align:center;width:min(460px,80vw);padding:28px;background:#0c29399c;backdrop-filter:blur(8px);border:1px solid #adcfce29;border-radius:12px}.eyebrow{color:#6bf2c4;letter-spacing:.15em;font-size:11px}h1{font-size:30px;font-weight:500;letter-spacing:.03em;margin:15px 0}#subtitle{font-size:14px;line-height:1.85;color:#c9dedd}#start{margin-top:10px;background:#6bf2c4;color:#11332f;border:0;min-width:192px}kbd{font:12px ui-monospace,monospace;border:1px solid #acc3c955;padding:3px 6px;border-radius:3px}#start kbd{margin-left:20px;border-color:#163f4155}footer{position:fixed;bottom:25px;left:36px;right:36px;display:flex;gap:28px;font:12px ui-monospace,monospace;color:#d3e7e7;letter-spacing:.02em}.note{margin-left:auto;color:#95b5bd;font-size:10px}#warning{position:fixed;bottom:85px;left:50%;transform:translateX(-50%);font-size:14px;color:#fff0b7;text-shadow:0 1px 5px #001c29}#helpPanel{position:fixed;z-index:5;right:36px;top:92px;width:min(370px,calc(100vw - 32px));padding:24px;background:#0c2634f5;border:1px solid #688c9466;border-radius:8px;box-shadow:0 15px 70px #0004}#helpPanel h2{font-size:20px;margin-top:0}#helpPanel p{font-size:14px;line-height:1.8}.tip{color:#9cbcc1;font-size:12px!important}#touch{display:none;position:fixed;bottom:68px;left:20px;right:20px;justify-content:space-between;pointer-events:none}#touch button{touch-action:none;user-select:none;pointer-events:auto;background:#12313bbb;min-width:58px}.touchThrottle{display:flex;flex-direction:column;justify-content:flex-end;gap:9px}.touchPad{display:grid;grid-template-columns:58px 72px 58px;grid-template-rows:48px 48px 48px;gap:4px}.up{grid-area:1/2}.left{grid-area:2/1}.right{grid-area:2/3}.down{grid-area:3/2}@media(pointer:coarse){#touch{display:flex}}@media(max-width:650px){header{top:18px;left:18px;right:18px}.brand{font-size:19px}.brand span{font-size:9px;letter-spacing:.08em}nav{gap:4px}nav button{padding:8px 9px;font-size:12px}#metrics{top:108px;left:18px;width:120px}#metrics>div{margin-bottom:15px}strong{font-size:33px}label{font-size:10px}#course{top:108px;right:18px}#course strong{font-size:30px}.dots i{width:16px}#distance{font-size:10px}#message{top:39%;padding:20px}h1{font-size:25px}footer{left:18px;right:18px;gap:15px;bottom:18px;font-size:10px}.note{display:none}#helpPanel{right:16px;top:78px;max-height:calc(100dvh - 90px);overflow:auto}#warning{bottom:240px;white-space:nowrap;font-size:12px}}@media(max-height:500px){#metrics,#course{top:94px}#metrics>div{margin-bottom:10px}strong{font-size:30px}#message{top:32%;padding:16px}h1{margin:8px 0}#subtitle{margin:8px 0}#touch{bottom:40px}.touchPad{grid-template-rows:36px 36px 36px}#warning{bottom:48px}}
#osd{position:fixed;left:22%;right:22%;top:18%;display:flex;justify-content:space-between;font:13px ui-monospace,monospace;text-shadow:1px 1px #112b26,-1px -1px #112b26;letter-spacing:.06em;pointer-events:none;color:#eff9e9}body:not(.fpv) #osd{display:none}.fpv #metrics{top:auto;bottom:80px;width:150px;font-family:ui-monospace,monospace}.fpv #metrics>div{margin-bottom:12px}.fpv #metrics strong{font-size:32px}.fpv #course{top:110px}.fpv #reticle{font-family:monospace;top:50%;text-shadow:1px 1px #14352b}.fpv #message{background:#08222de6}.fpv label{color:#e1efe3;text-shadow:1px 1px #123128}#touch button{font-size:12px}@media(max-width:650px){header{flex-wrap:wrap;gap:14px}nav{margin-left:auto}.fpv #metrics{left:18px;bottom:235px;width:100px}.fpv #metrics strong{font-size:25px}.fpv #metrics label small{font-size:9px}#osd{left:18px;right:18px;top:94px;font-size:10px}.fpv #course{top:126px}.fpv #message{top:36%}nav button{min-height:35px}.dots{gap:3px}.dots i{width:12px}}@media(max-height:500px){.fpv #metrics{bottom:40px}.fpv #course{top:90px}#osd{top:86px;left:25%;right:25%}.fpv #message{top:37%;max-width:390px}}
