:root{--ink: #1d1d1b;--paper: #f6f5f0;--accent: #6a3d9a}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#cfe0ec;font:14px/1.4 system-ui,-apple-system,sans-serif;color:var(--ink)}#view{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block;touch-action:none}#crosshair{position:fixed;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;border:2px solid rgba(255,255,255,.9);box-shadow:0 0 2px #0009;pointer-events:none}#prompt{position:fixed;left:50%;top:calc(50% + 22px);transform:translate(-50%);padding:4px 10px;border-radius:4px;background:#141414b8;color:#fff;font-size:13px;pointer-events:none;white-space:nowrap}#loading,#intro{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#f6f5f0eb;text-align:center;padding:16px}#intro[hidden],#loading[hidden],#prompt[hidden],#touch[hidden],#paused[hidden]{display:none}#paused{position:fixed;left:50%;bottom:18px;transform:translate(-50%);padding:7px 14px;border-radius:999px;background:#141414b8;color:#fff;font-size:13px;pointer-events:none}#intro h1{margin:0 0 4px;font-size:28px;letter-spacing:.02em}#intro p{margin:0 0 18px;color:#555}#start{font:inherit;font-size:16px;padding:10px 22px;border:0;border-radius:6px;background:var(--ink);color:#fff;cursor:pointer}.help{list-style:none;padding:0;margin:18px 0 0;color:#444}.help li{margin:4px 0}#levels{position:fixed;left:12px;top:12px;display:flex;flex-wrap:wrap;gap:6px;max-width:calc(100% - 24px)}#levels button{font:inherit;font-size:12px;padding:6px 10px;border:0;border-radius:4px;background:#ffffffe0;color:var(--ink);cursor:pointer;box-shadow:0 1px 3px #0003}#levels button:hover{background:#fff}#touch{position:fixed;inset:auto 0 0 0;height:0}#stick{position:fixed;left:24px;bottom:24px;width:120px;height:120px;border-radius:50%;background:#ffffff40;border:2px solid rgba(255,255,255,.6)}#knob{position:absolute;left:40px;top:40px;width:40px;height:40px;border-radius:50%;background:#ffffffd9}#use{position:fixed;right:24px;bottom:40px;width:72px;height:72px;border-radius:50%;border:0;font:inherit;background:#ffffffd9;color:var(--ink)}html,body{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}#use{opacity:.45;transition:opacity .15s}#use.ready{opacity:1}#stick,#use{bottom:calc(24px + env(safe-area-inset-bottom))}@media (pointer: coarse){#levels button{font-size:14px;padding:9px 12px}#prompt{top:auto;bottom:calc(160px + env(safe-area-inset-bottom))}}
