:root{font-family:Inter,system-ui,sans-serif;color:#ecf4f5;background:#111b23;font-synthesis:none}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{touch-action:none;overscroll-behavior:none}canvas{display:block;width:100%;height:100%}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;border:1px solid #ffffff30;background:#16242bd9;border-radius:12px;min-height:44px;min-width:44px}button:hover{background:#29434c}button:focus-visible,a:focus-visible{outline:3px solid #78dce8;outline-offset:3px}header{position:fixed;top:max(22px,env(safe-area-inset-top));left:max(24px,env(safe-area-inset-left));display:flex;gap:16px;align-items:center;pointer-events:none;text-shadow:0 2px 10px #000}header a{pointer-events:auto;text-decoration:none;color:#fff;font-size:24px}small{font-size:10px;letter-spacing:2px;color:#9cb9c4}header small{display:block;margin-bottom:6px}header strong{font-size:22px;font-weight:500}header strong span{font-size:15px;color:#c0d3d8}time{font-size:13px;font-variant-numeric:tabular-nums;border-left:1px solid #ffffff44;padding-left:18px}#tools{position:fixed;right:max(22px,env(safe-area-inset-right));top:max(22px,env(safe-area-inset-top));display:flex;gap:8px}#crosshair{position:fixed;left:50%;top:50%;width:6px;height:6px;border:1px solid #fff;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 3px #0004;pointer-events:none}#prompt{position:fixed;top:calc(50% + 28px);width:100%;text-align:center;font-size:13px;pointer-events:none;text-shadow:0 1px 6px #000}#status{position:fixed;bottom:65px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:16px;font-size:10px;letter-spacing:1.2px;padding:12px 16px;border-radius:30px;background:#10222bcc;pointer-events:none}#blueStatus{color:#63c6ff}#orangeStatus{color:#ffb16b}#status .active{text-shadow:0 0 10px currentColor}#status i{height:1px;width:24px;background:#81949b}#objective{position:fixed;bottom:28px;text-align:center;width:100%;font-size:10px;letter-spacing:1.5px;pointer-events:none;text-shadow:0 1px 8px #000}#objective span{color:#73dece;margin:0 10px}section{position:fixed;inset:0;background:#07131bad;backdrop-filter:blur(7px);display:flex;align-items:center;justify-content:center;padding:24px}section[hidden]{display:none}.card{width:470px;max-width:100%;padding:40px;border:1px solid #ffffff22;background:linear-gradient(135deg,#1a303bef,#0d1d27f5);border-radius:24px;box-shadow:0 24px 100px #0005}h1{font-size:52px;font-weight:500;letter-spacing:-2px;line-height:1.08;margin:22px 0}p{font-size:14px;color:#c4d5dc;line-height:1.7}.instructions{font-size:12px;line-height:1.9;color:#9cb4be;margin:22px 0}.instructions b{color:#e7f3f6}.card button{width:100%;background:#d1f4ee;color:#0c2529;font-weight:600;display:flex;align-items:center;justify-content:space-between;padding:0 18px;border:0;height:52px}.start-actions{display:flex;gap:10px}.start-actions #start{flex:1;width:auto;font-size:14px;padding:0 12px;gap:8px}.start-actions #fullscreen{width:auto;background:#16242b;color:#d1f4ee;border:1px solid #ffffff30;font-size:12px;padding:0 12px}#fullscreen-status:not([hidden]){display:block;margin-top:10px;letter-spacing:0}.footnote{display:block;margin-top:20px;font-size:9px;letter-spacing:.5px}#touch,.touch-copy{display:none}@media(pointer:coarse),(max-width:700px),(max-height:500px){#touch{display:block}.instructions{font-size:0}.instructions b,.instructions>br{display:none}.touch-copy{display:block;font-size:12px}#look{position:fixed;left:43%;right:0;top:85px;bottom:0;touch-action:none}#stick{position:fixed;left:max(28px,env(safe-area-inset-left));bottom:max(32px,env(safe-area-inset-bottom));width:116px;height:116px;background:#10232b55;border:1px solid #ffffff44;border-radius:50%;touch-action:none}#knob{position:absolute;top:38px;left:38px;width:38px;height:38px;border-radius:50%;background:#d6f1f1aa;pointer-events:none}#actions{position:fixed;right:max(24px,env(safe-area-inset-right));bottom:max(32px,env(safe-area-inset-bottom));display:grid;grid-template-columns:64px 64px;gap:10px}#actions button{height:52px;font-size:10px;letter-spacing:.6px;background:#162832bb}#blue{color:#7ed4ff;border-color:#55baff88}#orange{color:#ffc187;border-color:#ff9b5188}#interact{grid-column:1/3}#status{bottom:24px}#objective{display:none}#rotate{display:none}header{top:14px;left:16px;gap:12px}#tools{right:14px;top:14px}header strong{font-size:18px}header small{font-size:8px}time{padding-left:12px}#tools button{min-width:38px;min-height:38px}}@media(pointer:coarse) and (orientation:portrait),(max-width:700px) and (orientation:portrait){#rotate{display:block;position:fixed;top:90px;width:100%;text-align:center;font-size:10px;color:#d0e1e6;pointer-events:none}header time{position:fixed;left:18px;top:75px;border:0;padding:0}header strong span{font-size:12px}#status{bottom:174px}.card{padding:28px}h1{font-size:42px}}@media(max-height:500px){.card{padding:22px 30px;width:550px}h1{font-size:36px;margin:10px 0}p{margin:8px 0}.instructions{margin:10px 0}.footnote{margin-top:10px}#status{bottom:16px}}#quality{font-size:9px;letter-spacing:.5px;padding:0 9px;min-width:66px}@media(pointer:coarse),(max-width:700px),(max-height:500px){#quality{min-width:56px;padding:0 5px;font-size:8px}}@media(max-width:380px) and (orientation:portrait){#tools{top:66px}#rotate{top:114px}}@media(max-height:380px){.card{padding:14px 24px}h1{font-size:30px}.card p{font-size:12px}.instructions{line-height:1.5}}