:root{font-family:system-ui,sans-serif;color:#d7e7ea;background:#080e13;color-scheme:dark}*{box-sizing:border-box}body{margin:0;overflow:hidden}canvas{display:block;width:100vw;height:100vh;touch-action:none}header{position:fixed;top:23px;left:28px;right:28px;display:flex;align-items:center;justify-content:space-between;pointer-events:none}.brand{color:#cfdfdf;text-decoration:none;letter-spacing:.13em;font-size:11px;pointer-events:auto}.brand span{color:#829da7;letter-spacing:.08em}button,select{font:inherit;font-size:12px;color:#dce8ec;background:#14212be8;border:1px solid #435663;border-radius:7px;min-height:36px;padding:8px 13px;cursor:pointer;pointer-events:auto}button:hover,select:hover{border-color:#a8c5ce;background:#233743}button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid #efbf79;outline-offset:3px}button:disabled{opacity:.6;cursor:default}#enter{color:#edc88f}#status{position:fixed;top:80px;left:28px;display:flex;align-items:baseline;gap:14px;pointer-events:none}#play-state{font-size:10px;letter-spacing:.15em;color:#e2ba7b}#phase{font-size:17px}#phase-detail{color:#92aeb9;font-size:12px}nav{position:fixed;bottom:36px;left:50%;transform:translate(-50%);display:flex;gap:7px;align-items:center;max-width:96vw;white-space:nowrap}#desktop-hint{position:fixed;bottom:13px;left:0;right:0;text-align:center;color:#67828d;font-size:10px;letter-spacing:.03em;pointer-events:none}#settings-panel{position:fixed;right:24px;bottom:87px;width:280px;max-height:calc(100vh - 180px);overflow:auto;padding:20px;background:#101d27f5;border:1px solid #3a515f;border-radius:12px;box-shadow:0 12px 40px #0005}aside label{display:block;font-size:12px;margin:0 0 14px}output{float:right;color:#ebc48a}input[type=range]{width:100%;margin:10px 0 0;accent-color:#c9a770}aside select{display:block;width:100%;margin-top:8px}aside p{font-size:11px;color:#8da5b0;line-height:1.5}#error{position:fixed;bottom:90px;left:24px;max-width:460px;padding:14px;color:#ffd3c1;background:#461f19;border:1px solid #a2604b;border-radius:7px;font-size:13px}body.xr header,body.xr nav,body.xr #status,body.xr #desktop-hint,body.xr aside{display:none}@media(max-width:700px){header{left:16px;right:16px;top:16px}.brand{font-size:9px}.brand span{display:none}#status{top:67px;left:16px;right:16px;display:grid;grid-template-columns:auto 1fr;gap:5px 12px}#phase-detail{grid-column:1 / 3;line-height:1.4}nav{bottom:35px;flex-wrap:wrap;justify-content:center;width:96vw}nav button,nav select{font-size:10px;padding:7px 9px;min-height:32px}#settings-panel{right:12px;bottom:120px;width:270px}}
