:root{--paper: #FBF7EF;--ink: #1C1B19;--muted: #5A544B;--line: #E4DCCB;--line-2: #D8CFBD;--card-line: #ECE4D4;--brand: #C8322B;--blue: #2457C5;--blue-dark: #163A8A;--green: #2E8B57;--green-ink: #1F5C3A;--green-soft: #8CC7A1;--amber: #B7790A;--amber-soft: #FDEBC4;--coral: #E07A62;--danger: #B4442C;--gold: #E8B23A;--gold-dark: #C9962A;--font: "Andika", "Andika New Basic", "Comic Sans MS", sans-serif;color-scheme:light}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--paper);color:var(--ink);font-family:var(--font)}body{overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}button{font-family:inherit;color:inherit;cursor:pointer;touch-action:manipulation}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.screen{height:100dvh;max-width:1180px;margin:0 auto;display:flex;flex-direction:column;padding:28px 40px 0;position:relative;overflow:hidden}.top{display:flex;align-items:center;justify-content:space-between;height:72px;gap:16px}.logo{display:flex;align-items:center;gap:10px;width:260px}.logo-mark{width:52px;height:52px;border-radius:15px;background:var(--brand);box-shadow:inset 0 -4px #00000029;display:flex;align-items:center;justify-content:center;font-size:29px;font-weight:700;letter-spacing:-.06em;color:var(--paper);padding-bottom:2px}.logo-word{font-size:24px;font-weight:700;color:var(--brand)}.dots{display:flex;gap:10px;align-items:center}.dots span{width:18px;height:18px;border-radius:50%;background:var(--line);transition:background .3s,transform .3s}.dots span.on{background:var(--green)}.dots span.pop{transform:scale(1.4)}.coins{display:flex;align-items:center;justify-content:flex-end;gap:8px;width:260px;height:64px}.coins b{font-size:30px;min-width:24px;text-align:right}.stage{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:36px;padding-bottom:8px}.countdown{display:flex;gap:10px;height:22px;align-items:center;opacity:0;transition:opacity .4s}.countdown.show{opacity:1}.countdown span{width:18px;height:18px;border-radius:50%;background:#cfe0fa;border:2px solid #9DBDF0;box-shadow:inset -3px -3px #2457c51f;position:relative;transition:transform .35s cubic-bezier(.3,1.6,.5,1),opacity .35s}.countdown span:after{content:"";position:absolute;top:3px;left:4px;width:5px;height:5px;border-radius:50%;background:#fff}.countdown span.pop{transform:scale(0);opacity:0;transition:transform .25s ease-in,opacity .25s}.sentence{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;column-gap:26px;row-gap:28px;font-size:clamp(40px,6.6vw,68px);line-height:1.15;max-width:960px}.word{--bg: transparent;--fg: var(--ink);--ring: transparent;--ul: transparent;--ls: solid;--mk: #B3AA9A;position:relative;display:inline-flex;align-items:flex-end;padding:6px 14px 4px;border-radius:18px;background:var(--bg);color:var(--fg);border:3px solid var(--ring);border-bottom:6px var(--ls) var(--ul);transition:background .25s,color .25s,border-color .25s,opacity .3s,transform .3s;touch-action:manipulation}.word.read{--fg: var(--green-ink);--ul: var(--green-soft);--mk: var(--green-soft)}.word.current{--bg: #E8EFFC;--ul: var(--blue);--mk: var(--blue);font-weight:700}.word.trying{--bg: var(--amber-soft);--ul: var(--amber);--ls: dashed;--mk: var(--amber);font-weight:700}.word.help{--ring: var(--coral);--ul: var(--coral);--mk: #D0644B;font-weight:700}.word.missed{--fg: var(--muted);--ul: #C9BFAE;--ls: dotted;--mk: #C9BFAE}.word.helped{--fg: var(--green-ink);--ul: var(--green-soft);--mk: var(--green-soft);font-weight:700}.word.current{animation:glow 1.8s ease-in-out infinite}@keyframes glow{50%{border-bottom-color:#6e92e0}}.sentence.dim .word:not(.focus){opacity:.3}.word.focus{transform:scale(1.1);z-index:1}.trail{padding-bottom:22px}.g{display:inline-flex;flex-direction:column;align-items:center;gap:4px;border-radius:10px;position:relative;transition:background .15s}.g .m{height:12px;width:100%;display:flex;align-items:center;justify-content:center}.g .m i{display:block}.marks .g.single .m i{width:11px;height:11px;border-radius:50%;background:var(--mk)}.marks .g.friend .m i{width:calc(100% - 8px);height:6px;border-radius:3px;background:var(--mk)}.marks .g.split .m i{width:11px;height:11px;border-radius:50%;border:3px solid var(--mk)}.word.split .g{margin:0 .09em;transition:margin .3s}.g.lit{background:var(--amber-soft);box-shadow:0 0 0 4px var(--amber-soft)}.ring .g.tricky:after{content:"";position:absolute;top:0;right:-5px;bottom:14px;left:-5px;border:3px dashed var(--coral);border-radius:14px}.bridge{position:absolute;left:0;bottom:0;pointer-events:none;overflow:visible}.badge{position:absolute;top:-18px;right:-14px;width:36px;height:36px;border-radius:50%;background:#fff;border:3px solid var(--gold);display:flex;align-items:center;justify-content:center;animation:pop .4s ease-out}@keyframes pop{0%{transform:scale(0)}70%{transform:scale(1.25)}to{transform:scale(1)}}.bottom{position:relative;height:128px;display:flex;align-items:flex-end;justify-content:center}.icon-btn{width:56px;height:56px;border-radius:16px;border:2px solid var(--line);background:#fff;display:flex;align-items:center;justify-content:center;padding:0}.icon-btn:active{transform:translateY(2px)}.bottom .left{position:absolute;left:0;bottom:32px}.bottom .right{position:absolute;right:0;bottom:32px;display:flex;gap:12px}.mic{position:relative;margin-bottom:28px;width:300px;height:96px;padding:8px;border-radius:48px;background:#fff;box-shadow:inset 0 5px #1c1b191a}.mic .thumb{position:absolute;top:8px;left:150px;width:142px;height:74px;border-radius:38px;background:var(--blue);box-shadow:0 6px 0 var(--blue-dark);transition:left .22s ease,background .22s ease}.mic.off .thumb{left:8px;background:#fff;box-shadow:0 6px #c9bfae}.mic .btns{position:relative;display:grid;grid-template-columns:1fr 1fr;height:80px}.mic button{height:74px;border:0;border-radius:38px;background:transparent;display:flex;align-items:center;justify-content:center;gap:10px}.mic .bars{display:flex;align-items:center;gap:4px;height:32px}.mic .bars span{width:6px;border-radius:3px;background:#fff;transition:height .1s}.mic.off .bars{display:none}.mic .talking{position:absolute;top:8px;right:8px;bottom:8px;left:8px;border-radius:38px;background:#2b6a47;box-shadow:0 6px 0 var(--green-ink);display:none;align-items:center;justify-content:center}.mic.audio .talking{display:flex}.status{position:absolute;bottom:6px;left:50%;transform:translate(-50%);font-size:14px;color:var(--muted);white-space:nowrap}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#1c1b1973;display:flex;align-items:center;justify-content:center;padding:16px;z-index:10}.overlay[hidden]{display:none}.dialog{background:var(--paper);border-radius:28px;padding:28px 32px 32px;box-shadow:0 24px 60px #1c1b194d;display:flex;flex-direction:column;gap:18px;max-height:calc(100dvh - 32px);overflow:auto}.start{align-items:center;text-align:center;width:440px;gap:14px;padding:22px 28px}.start .logo-mark{width:64px;height:64px;border-radius:20px;font-size:34px}.start h1{margin:0;font-size:34px;color:var(--brand);line-height:1.1}.big-btn{height:84px;width:100%;border:0;border-radius:42px;background:var(--blue);color:#fff;font-size:30px;font-weight:700;box-shadow:0 6px 0 var(--blue-dark)}.big-btn:active{transform:translateY(4px);box-shadow:0 2px 0 var(--blue-dark)}.note{font-size:16px;color:var(--muted);margin:0}.note.big{font-size:22px;color:var(--ink)}.code-dots{display:flex;gap:14px}.code-dots span{width:50px;height:50px;border-radius:50%;border:3px dashed var(--line-2);display:flex;align-items:center;justify-content:center;font-size:32px;background:#fff}.code-dots span.on{border:3px solid var(--blue);animation:pop .3s ease-out}.start.bad .code-dots{animation:wiggle .4s}@keyframes wiggle{25%{transform:translate(-10px)}75%{transform:translate(10px)}}.emoji-keys{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:100%}.emoji-keys button{height:68px;border-radius:22px;background:#fff;border:2px solid var(--line);font-size:44px;line-height:1;box-shadow:0 4px 0 var(--line)}.emoji-keys button:active{transform:translateY(3px);box-shadow:0 1px 0 var(--line)}.emoji-keys button.text{background:transparent;border:0;box-shadow:none;display:flex;align-items:center;justify-content:center}.err{font-size:16px;font-weight:700;color:var(--danger);margin:0;min-height:20px}.pin{width:400px;align-items:center}.pin h2{margin:0;font-size:26px}.pin .pin-dots{display:flex;gap:14px}.pin .pin-dots span{width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid var(--ink)}.pin .pin-dots span.on{background:var(--ink)}.pin.bad .pin-dots span{border-color:var(--danger)}.keys{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%}.keys button{height:60px;border-radius:14px;font-weight:700;font-size:26px;background:#fff;border:2px solid var(--line)}.keys button.text{background:transparent;border:0;font-size:17px;color:var(--muted)}.settings{width:900px;gap:22px}.settings header{display:flex;align-items:center;justify-content:space-between}.settings header>div{display:flex;align-items:center;gap:14px}.settings h2{margin:0;font-size:32px}.settings .sep{width:2px;height:28px;background:var(--line)}.cols{display:grid;grid-template-columns:1fr 1fr;gap:28px}.card{background:#fff;border:2px solid var(--card-line);border-radius:20px;padding:22px;display:flex;flex-direction:column;gap:20px}.card h3{margin:0;font-size:22px}.field{display:flex;flex-direction:column;gap:8px}.field>.label{font-size:17px;font-weight:700}.field>.hint{font-size:15px;color:var(--muted)}.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.seg button{height:48px;border-radius:12px;font-size:17px;font-weight:700;background:#fff;border:2px solid var(--line-2)}.seg button[aria-pressed=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}.text-in{height:48px;border-radius:12px;border:2px solid var(--line-2);background:#fff;padding:0 14px;font-family:inherit;font-size:18px;color:var(--ink)}.stepper{display:flex;align-items:center;gap:12px}.stepper button{width:48px;height:48px;border-radius:12px;border:2px solid var(--line-2);background:#fff;font-size:26px;font-weight:700}.stepper b{min-width:44px;text-align:center;font-size:28px}.prog{display:flex;align-items:center;gap:14px;background:#fbf4e2;border-radius:16px;padding:14px 16px}.prog div{display:flex;flex-direction:column;gap:2px}.prog .hint{font-size:15px;color:var(--muted)}.danger-btn{height:48px;border-radius:12px;border:2px solid var(--danger);background:#fff;color:var(--danger);font-size:17px;font-weight:700}.plain-btn{height:48px;border-radius:12px;border:2px solid var(--line-2);background:#fff;font-size:17px;font-weight:700;padding:0 16px}.solid-danger{height:48px;border-radius:12px;border:0;background:var(--danger);color:#fff;font-size:17px;font-weight:700}.confirm{display:flex;flex-direction:column;gap:10px;border:2px solid var(--danger);border-radius:14px;padding:12px 14px}.confirm .row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.inline{display:flex;gap:10px}.inline .text-in{width:120px;letter-spacing:.3em}.foot{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:15px;color:var(--muted)}.celebrate{background:transparent;box-shadow:none;align-items:center;pointer-events:none}.celebrate .burst{animation:pop .5s ease-out}.celebrate p.small{font-size:28px}.celebrate p{margin:0;text-align:center;font-size:44px;font-weight:700;color:#fff;text-shadow:0 3px 0 rgba(0,0,0,.25)}.overlay.soft{background:#1c1b1940;pointer-events:none}@media(max-width:960px){.screen{padding:16px 16px 0}.logo,.coins{width:auto}.logo-word{display:none}.dots{gap:6px}.dots span{width:12px;height:12px}.cols{grid-template-columns:1fr}.settings,.start,.pin{width:100%}.mic{width:220px;height:80px}.mic .thumb{left:110px;width:102px;height:58px}.mic.off .thumb{left:8px}.mic .btns{height:64px}.mic button{height:58px}}@media(prefers-reduced-motion:reduce){*,*:after{animation:none!important;transition:none!important}}.recorder{width:640px;gap:16px}.recorder header{display:flex;justify-content:space-between;align-items:center}.recorder h2{margin:0;font-size:28px}.rec-card{display:flex;gap:24px;align-items:center;background:#fff;border:2px solid var(--card-line);border-radius:20px;padding:20px 24px}.rec-g{font-size:96px;font-weight:700;min-width:150px;text-align:center;line-height:1}.rec-meta{display:flex;flex-direction:column;gap:8px;font-size:18px}.rec-ex b{color:var(--brand)}.rec-hint{color:var(--muted)}.rec-state{font-size:15px;color:var(--amber);font-weight:700}.rec-state.ok{color:var(--green-ink)}.rec-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.rec-btn{width:auto;height:64px;font-size:24px;padding:0 28px;flex:1}.rec-btn.on{background:var(--danger);box-shadow:0 6px #7f2c1c}.solid-ok{height:48px;border-radius:12px;border:0;background:var(--green);color:#fff;font-size:17px;font-weight:700;padding:0 20px}.rec-nav{display:flex;gap:10px;align-items:center}.rec-nav select{flex:1}.rec-nav button:disabled{opacity:.4}.switch{display:flex;align-items:center;gap:10px;font-size:17px}.switch input{width:24px;height:24px;accent-color:var(--blue)}