*{box-sizing:border-box}html,body{margin:0;width:100%;background:transparent;color:#ffd2b0;font-family:system-ui,sans-serif}html{overflow:hidden}.instrument{position:relative;width:100%;max-width:608px;aspect-ratio:608/840;margin:0 auto;isolation:isolate}canvas{display:block;width:100%;height:100%}.surface{position:absolute;display:block;margin:0;padding:0;background:transparent;border:0;border-radius:5px;cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent;color:transparent}.dial{border-radius:50%;cursor:ns-resize}.surface:focus-visible{outline:2px solid #54f3ff;outline-offset:3px}.surface:disabled{cursor:wait}.surface:active:not(:disabled):not(.dial){background:rgba(255,150,70,.14)}#readout{position:absolute;transform:translate(-50%,0);background:#111d;color:#ffc191;border:1px solid #a65436;border-radius:3px;padding:3px 7px;font:12px/1.4 monospace;white-space:nowrap;pointer-events:none;z-index:2}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}#error{margin:8px auto;max-width:608px;padding:12px;background:#291510;color:#ffbba4;font-size:14px}dialog{background:#24211c;color:#f7d0b4;border:1px solid #a96549;border-radius:6px;max-width:90vw;padding:20px}dialog::backdrop{background:#0009}dialog label{display:block;margin-bottom:10px}dialog input{width:100%;padding:10px;background:#100d0a;color:#ffa06a;border:1px solid #716153;font:18px monospace}dialog form>div{display:flex;gap:10px;justify-content:flex-end;margin-top:16px}dialog button{padding:8px 16px;background:#37231b;color:#ffc4a0;border:1px solid #a65f42;border-radius:3px;cursor:pointer}