:root{font-family:Arial,system-ui,sans-serif;color:#29372f;background:#f5f2e9;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-height:100dvh}main{max-width:648px;margin:clamp(36px,9vh,84px) auto 0;padding:0 24px;text-align:center}header{display:flex;justify-content:space-between;align-items:center;height:24px;color:#8e8b7d}button,select{font:inherit}button{cursor:pointer;color:inherit}button:focus-visible,select:focus-visible{outline:2px solid #638253;outline-offset:5px}.info{border:0;background:none;color:#8e8b7d;padding:0;font-size:17px}#score{font:12px monospace;letter-spacing:2px}.scene{position:relative;width:100%;margin-top:4px}canvas{display:block;width:100%;height:auto}#overlay{position:absolute;inset:0;background:#f5f2e9cc;display:grid;place-items:center;font-size:38px;font-weight:600;color:#638253;white-space:pre-line}#cue{height:20px;margin:14px 0 8px;text-align:right;font-size:12px;font-weight:600;color:#777c6e}.commands{display:grid;grid-template-columns:1fr 1fr;gap:24px}.command{background:none;border:0;padding:0;min-width:0}.command>span{font-size:12px;font-weight:700;letter-spacing:1px}.command small{font-size:inherit}#duck>span{color:#9a512b}.command>strong{display:flex;justify-content:center;align-items:center;gap:.25em;flex-wrap:wrap;min-height:96px;font-size:30px;line-height:1.35;letter-spacing:-.4px;font-weight:600}.word{white-space:nowrap}.initial{font-weight:800;color:#3d6a43}.initial.n{color:#9a512b}.command.matched strong,.command.matched .initial{color:#55883c}.track{height:6px;background:#e0dfd3;border-radius:5px;overflow:hidden;margin-top:9px}#progress{height:100%;background:#b7bcaa;transform-origin:left}body[data-ready=true] #progress{background:#5f8e4b}body[data-ready=true] #cue{color:#356528}.heard{display:flex;justify-content:center;align-items:center;gap:8px;min-height:28px;margin:10px 0;font-size:14px;color:#777c6e}#mic{width:5px;height:5px;border-radius:50%;background:#638253;opacity:.25}#mic.active{opacity:1;box-shadow:0 0 0 4px #63825318}.start{border:0;border-radius:50%;height:48px;width:48px;background:#eae8dc;font-size:21px;margin:6px 0 20px}.start:hover{background:#dfdfce}.mode{display:flex;justify-content:center;gap:8px;align-items:center;color:#777c6e;font-size:12px}.mode select{background:transparent;color:inherit;border:1px solid #d6d6c7;border-radius:5px;padding:5px}.hint{font-size:11px;color:#96978a;line-height:1.7;margin-top:16px}#message{color:#a0613e;font-size:13px;line-height:1.6;margin:12px auto;max-width:420px}dialog{max-width:460px;width:calc(100% - 32px);border:1px solid #d6d6c7;border-radius:12px;background:#f5f2e9;color:#29372f;padding:26px;line-height:1.7;font-size:14px}dialog::backdrop{background:#29372f66}dialog h1{font-size:24px}dialog .close{border:0;background:#e2e5d6;border-radius:6px;padding:10px 20px}[hidden]{display:none!important}@media(max-width:600px){body{display:flex;align-items:center;padding:24px 0}main{width:100%;margin:0 auto;padding:0 18px}.commands{grid-template-columns:1fr;gap:8px}.command{display:grid;grid-template-columns:32px 1fr;align-items:center}.command small{display:none}.command>span{font-size:24px;font-weight:400}.command>strong{font-size:32px;min-height:72px}.hint{max-width:280px;margin:16px auto 0}}