:root{--panel: rgba(28, 22, 16, .66);--line: rgba(236, 220, 188, .14);--ink: #f3e9d6;--muted: #c2b49c;--accent: #e3ad62;--bad: #e2795b;--good: #a9cf84;--paper: #efe4cb;--paper-ink: #2c2318;--paper-muted: #6d5c45;--serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#1f1a14;color:var(--ink);font:13px/1.4 ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif}#app{position:fixed;inset:0}canvas{display:block;width:100%;height:100%}.hud{position:fixed;inset:0;pointer-events:none}.crosshair{position:absolute;left:50%;top:50%;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;background:#fff6e4d9;box-shadow:0 0 2px #000000b3}.prompt{position:absolute;left:50%;top:calc(50% + 22px);transform:translate(-50%);padding:4px 10px;border:1px solid var(--line);border-radius:3px;background:var(--panel);white-space:nowrap}.prompt b{color:var(--accent)}.hands{position:absolute;left:16px;bottom:16px;padding:8px 12px;border:1px solid var(--line);border-radius:3px;background:var(--panel)}.hands div span{color:var(--muted)}.hints{position:absolute;right:16px;bottom:16px;padding:8px 12px;border:1px solid var(--line);border-radius:3px;background:var(--panel);color:var(--muted);text-align:right}.hints b{color:var(--ink);font-weight:600}.work{position:absolute;right:16px;top:16px;width:270px;padding:10px 12px;border:1px solid var(--line);border-radius:3px;background:var(--panel)}.work h3{margin:0 0 2px;font:600 16px/1.2 var(--serif)}.work .sub{color:var(--muted);font-size:11px;margin-bottom:8px}.work .row{display:flex;justify-content:space-between;gap:8px}.work .row span:first-child{color:var(--muted)}.bar{position:relative;height:6px;margin:4px 0 8px;border-radius:1px;background:#ecdcbc24;overflow:hidden}.bar i{position:absolute;left:0;top:0;bottom:0;background:var(--accent)}.bar u{position:absolute;top:-2px;bottom:-2px;width:2px;background:#fff6e4}.chip{font-weight:600}.chip.bad{color:var(--bad)}.chip.good{color:var(--good)}.cursor{position:absolute;width:18px;height:18px;margin:-9px 0 0 -9px;border:1.5px solid rgba(255,246,228,.9);border-radius:50%;box-shadow:0 0 2px #000000b3}.cursor:after{content:"";position:absolute;left:7px;top:7px;width:2px;height:2px;background:#fff6e4}.overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#18120c6b;pointer-events:auto;cursor:pointer}.overlay .card{width:min(620px,calc(100vw - 24px));max-height:calc(100vh - 24px);overflow-y:auto;padding:26px 32px 22px;border:1px solid #b9a67f;border-radius:2px;outline:1px solid rgba(44,35,24,.5);outline-offset:-7px;background:var(--paper);color:var(--paper-ink);box-shadow:0 18px 50px #0000006b}.overlay h1{margin:0 0 8px;font:500 34px/1.1 var(--serif);letter-spacing:.01em}.overlay p{margin:6px 0;color:var(--paper-muted)}.overlay #start-hint{margin-top:12px;font:italic 15px/1.3 var(--serif);color:var(--paper-ink)!important}.controls-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:36px}.controls-grid h2{margin:10px 0 3px;color:var(--paper-ink);font-size:12px;font-weight:600}.control{display:flex;justify-content:space-between;align-items:center;gap:12px;color:var(--paper-muted);line-height:21px}.keycap{min-width:22px;padding:0 6px;border:1px solid rgba(44,35,24,.32);border-radius:2px;background:#ffffff52;color:var(--paper-ink);font:inherit;line-height:17px;text-align:center;cursor:pointer}.keycap:hover,.keycap:focus-visible{outline:1px solid var(--paper-muted)}.keycap.listening{background:var(--accent);color:var(--paper-ink);outline:1px solid var(--paper-ink)}.slider{display:grid;grid-template-columns:1fr 44px;align-items:center;margin-top:10px;color:var(--paper-muted);cursor:default}.slider input{grid-row:2;width:100%;margin:2px 0 0;accent-color:var(--paper-muted)}.slider output{grid-row:2;text-align:right;font-size:11px}#controls p{font-size:12px}.reset-controls{padding:0;border:0;background:none;color:var(--paper-muted);font:inherit;text-decoration:underline;cursor:pointer}.reset-controls:hover,.reset-controls:focus-visible{color:var(--paper-ink)}.overlay .reload{margin-top:8px;padding:6px 14px;border:1px solid var(--paper-ink);border-radius:2px;background:transparent;color:var(--paper-ink);font:inherit;cursor:pointer}.overlay .start-over{width:fit-content;margin:10px 0 0 auto;color:var(--paper-muted);font-size:11px;cursor:default}.overlay .start-over button{margin-left:10px;padding:0;border:0;background:none;color:var(--paper-muted);font:inherit;text-decoration:underline;cursor:pointer}.overlay kbd{display:inline-block;min-width:20px;padding:0 5px;border:1px solid rgba(44,35,24,.32);border-radius:2px;background:#ffffff52;color:var(--paper-ink);font:inherit;text-align:center}.stats{position:absolute;left:16px;top:16px;color:var(--muted);font-size:11px;text-shadow:0 1px 2px rgba(0,0,0,.5)}