html,body{margin:0;height:100%;overflow:hidden;background:#14261c;font-family:system-ui,Segoe UI,sans-serif}[hidden]{display:none!important}#game{position:fixed;top:0;right:0;bottom:0;left:0}#game canvas{display:block}.demo-loading{position:fixed;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;color:#fff5d3;font:600 22px system-ui,sans-serif;background:#14261c;z-index:5}.demo-capture{position:fixed;left:-200px;top:0;width:20px;height:20px;opacity:0}.demo-root{position:fixed;pointer-events:none;color:#fff8e2;z-index:10}.demo-root>*{pointer-events:none}.demo-root>.demo-kb{pointer-events:auto;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}.demo-key{cursor:pointer}.demo-top{position:absolute;z-index:2;left:0;right:0;top:0;display:flex;justify-content:space-between;align-items:flex-start;padding:.8em 1em;gap:1em}.demo-pill{background:#14261cc7;border:.12em solid rgba(255,245,211,.35);border-radius:1em;padding:.35em .9em;font-size:1em;text-align:center;min-width:6em}.demo-pill b{display:block;font-size:1.9em;line-height:1.05;font-variant-numeric:tabular-nums}.demo-label{font-size:.8em;opacity:.85;letter-spacing:.04em}.demo-zone{align-self:center;font-weight:700;font-size:1.15em;min-width:9em}.demo-zone:empty{visibility:hidden}.demo-zone.pulse{animation:demo-pulse 2.4s}@keyframes demo-pulse{0%,70%{transform:scale(1.14);background:#ffe299eb;color:#2b2418;border-color:#fff5d3}to{transform:scale(1)}}.demo-timer.last-word{background:#ffe299eb;color:#2b2418;border-color:#fff5d3}.demo-root .demo-exit,.demo-root .demo-back{pointer-events:auto;text-decoration:none;cursor:pointer;align-self:flex-start;font:inherit;font-size:.85em;font-weight:700;color:inherit;background:#14261cc7;border:.12em solid rgba(255,245,211,.35);border-radius:1em;padding:.45em 1em;touch-action:manipulation}.demo-root .demo-exit:hover,.demo-root .demo-exit:focus-visible,.demo-root .demo-back:hover,.demo-root .demo-back:focus-visible{background:#ffe299eb;color:#2b2418;border-color:#fff5d3}.demo-root .demo-exit[hidden]{display:none}.demo-zone small{display:block;font-size:.72em;font-weight:600;opacity:.85}.demo-badge{position:absolute;transform:translate(-50%,-100%);display:flex;gap:.25em;padding:.35em .7em .45em;background:#14261cd1;border:.12em solid rgba(255,245,211,.45);border-radius:.9em;white-space:nowrap}.demo-letter{font-size:2.6em;font-weight:800;line-height:1;min-width:.62em;text-align:center;text-transform:lowercase}.demo-letter.done{color:#9be37f}.demo-letter.todo{color:#fff8e28c}.demo-letter.now{color:#fff;border-bottom:.14em solid var(--finger, #fff);transform:scale(1.25);transform-origin:50% 80%;text-shadow:0 0 .3em rgba(255,255,255,.4)}.demo-badge.wrong{animation:demo-shake .25s}@keyframes demo-shake{25%{transform:translate(-54%,-100%)}75%{transform:translate(-46%,-100%)}}.demo-kb{position:absolute;left:50%;bottom:1.4em;transform:translate(-50%);display:flex;flex-direction:column;gap:.25em;padding:.5em .7em;background:#14261c99;border-radius:.8em}.demo-kb-row{display:flex;gap:.25em}.demo-key{width:2.35em;height:2.35em;display:grid;place-items:center;font-size:.95em;font-weight:700;color:#1d2a22;border-radius:.35em;position:relative;background:color-mix(in srgb,var(--finger) 38%,#fff7e6);border:.08em solid color-mix(in srgb,var(--finger) 70%,#fff7e6)}.demo-key.marker:after{content:"";position:absolute;bottom:.25em;width:.7em;height:.12em;border-radius:.1em;background:#00000073}.demo-key.on{background:var(--finger);color:#fff;transform:scale(1.18);z-index:1;box-shadow:0 0 .7em var(--finger)}@media(hover:none)and (pointer:coarse){.demo-kb{font-size:1.3em;bottom:.9em}}.demo-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:#0a160eb8;pointer-events:auto}.demo-panel{max-width:36em;margin:.8em;padding:.9em 1.6em;text-align:center;background:#fff5d3;color:#2b2418;border-radius:1.2em;box-shadow:0 .6em 2em #00000073}.demo-panel h1{margin:0 0 .15em;font-size:2em;line-height:1.1}.demo-logo{margin:0 0 .1em!important;line-height:0!important}.demo-logo img{width:10.5em;height:auto;max-width:100%}.demo-choose{font-weight:700;margin-bottom:.3em!important}.demo-scenarios{display:flex;justify-content:center;gap:.6em;flex-wrap:wrap;margin-bottom:.4em}.demo-card{display:flex;flex-direction:column;align-items:center;gap:.25em;width:7.4em;padding:.3em;border:.15em solid rgba(43,36,24,.25);border-radius:.8em;background:#fffdf2;color:#2b2418;font:700 .85em system-ui,sans-serif;cursor:pointer}.demo-card img{width:100%;height:auto;border-radius:.5em;display:block}.demo-card.on{border-color:#3e8f3a;box-shadow:0 0 0 .15em #3e8f3a}.demo-card:hover,.demo-card:focus-visible{border-color:#2f7a2b;outline:none}.demo-panel.demo-start{max-width:58em;display:grid;grid-template-columns:1fr 1fr;gap:.2em 1.6em;align-items:center}.demo-start .demo-col{display:flex;flex-direction:column;align-items:center}.demo-card{position:relative}.demo-wait{display:none;position:absolute;top:0;right:0;bottom:0;left:0;align-items:center;justify-content:center;background:#fffdf2d9;border-radius:.8em;font-style:normal;font-weight:700}.demo-card.loading .demo-wait{display:flex}.demo-start .demo-scenarios{display:grid;grid-template-columns:1fr 1fr;gap:.5em;width:100%}.demo-start .demo-card{flex-direction:row;align-items:center;width:auto;text-align:left;gap:.45em}.demo-start .demo-card img{width:4.2em;flex:none}.demo-card-text{display:flex;flex-direction:column;line-height:1.15}.demo-card-text b{font-size:1.05em}.demo-card:disabled{cursor:not-allowed;opacity:.55;filter:grayscale(.6)}.demo-card:disabled:hover{border-color:#2b241840}.demo-news{color:#2f7a2b;font-weight:700;margin:.2em 0!important}.demo-card-text small{font-size:.78em;font-weight:600;opacity:.75;letter-spacing:.04em}.demo-panel h2{margin:0 0 .4em;font-size:1.1em;color:#6b5a2f;font-weight:600}.demo-panel p{margin:.4em 0;font-size:1em;line-height:1.35}.demo-hint{font-size:.9em!important;color:#6b5a2f}.demo-touch-note{display:none;font-size:.9em!important;font-weight:600;color:#7a3b12}@media(hover:none)and (pointer:coarse){.demo-touch-note{display:block}}.demo-button{font:800 1.25em system-ui,sans-serif;padding:.4em 1.6em;margin-top:.4em;border:0;border-radius:.8em;background:#3e8f3a;color:#fff;cursor:pointer}.demo-button:hover,.demo-button:focus-visible{background:#2f7a2b;outline:.15em solid #1d4d1b;outline-offset:.12em}.demo-results{display:grid;grid-template-columns:1fr auto;gap:.35em 1.4em;margin:.8em 0;font-size:1.15em;text-align:left}.demo-results dt{margin:0}.demo-results dd{margin:0;font-weight:800;text-align:right;font-variant-numeric:tabular-nums}.demo-weakest{font-weight:600}@media(prefers-reduced-motion:reduce){.demo-zone.pulse{animation:none;outline:.18em solid #ffe299}.demo-badge.wrong{animation:none;outline:.12em solid #ffb3a0}.demo-letter.now,.demo-key.on{transform:none}}
