:root{font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;color:#292325;background:#f2eee7;font-size:16px;accent-color:#8e3640}*{box-sizing:border-box}body{margin:0}main{max-width:1200px;margin:auto}header{padding:18px 24px 10px}header>a{float:right;font-size:.875rem;color:#6e2733}header span{color:#7c4f39;font-size:.875rem;font-weight:700;letter-spacing:.08em}h1{font-size:clamp(1.35rem,4vw,2rem);margin:6px 0}header p{margin:4px 0;font-size:.875rem;line-height:1.6}.viewport{position:relative;background:#ccb68f;height:min(62vh,600px);min-height:300px;overflow:hidden}canvas{display:block;width:100%;height:100%;touch-action:none;outline-offset:-3px}#frame-label{position:absolute;pointer-events:none;left:14px;top:14px;max-width:90%;padding:7px 11px;border-radius:5px;background:#fff9e9d9;font-size:.875rem;font-weight:600;color:#503b32}#failure{position:absolute;inset:20px;background:#fff;padding:16px}.controls{padding:14px 24px 24px}.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.row label{display:flex;align-items:center;gap:7px;font-size:.875rem}button,select{font:inherit;font-size:.875rem;border:1px solid #bcb0a6;border-radius:8px;padding:10px 12px;background:#fffaf2;color:#34272a;min-height:42px}button{cursor:pointer}button:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid #a2552d;outline-offset:3px}#play{background:#812f3c;color:#fff;border-color:#812f3c;min-width:100px}button[aria-pressed=true]{background:#5d4440;color:#fff}.angles{display:flex;gap:5px}.scrub{margin:14px 0}.scrub label{font-size:.875rem;display:flex;justify-content:space-between}input[type=range]{display:block;width:100%;height:30px}#instruction{line-height:1.7;font-size:1rem;margin:12px 0}details{border-top:1px solid #d5c7b8;padding-top:10px;font-size:.875rem;line-height:1.7}details a{color:#742f3d}summary{cursor:pointer}output{font-variant-numeric:tabular-nums}@media(max-width:540px){header{padding:12px 14px 8px}header>a{font-size:.8rem}.controls{padding:12px 14px 22px}.viewport{height:46vh;min-height:270px}.row{gap:7px}button,select{padding:9px}#exercise{max-width:230px}.row label{flex-wrap:wrap}}
.exercise-row{margin-top:10px}.exercise-row label{max-width:100%}#exercise{max-width:min(100%,470px)}.hint{color:#66574d;font-size:.8rem;line-height:1.6;margin:8px 0 14px}button:disabled{cursor:default;opacity:.6}input:focus-visible,canvas:focus-visible{outline:3px solid #a2552d;outline-offset:2px}.scrub label{gap:12px}.scrub output{white-space:nowrap}#instruction{min-height:3.4em}#mode,#people{max-width:100%}@media(max-width:540px){.exercise-row label{width:100%;flex-wrap:nowrap}#exercise{min-width:0;max-width:calc(100% - 38px);flex:1}.playback-row label{flex-wrap:nowrap}.hint{font-size:.75rem}.scrub label{font-size:.8rem}.angles button{min-width:46px}}