:root{--sky:#E8F1F5;--paper:#fff;--ink:#16303F;--ink2:#4B6270;--back:#C8891A;--backsoft:#FBEFD6;--front:#1F7FA3;--frontsoft:#DDEFF6;--ok:#2E8B57;--oksoft:#E1F3E8;--no:#B23A3A;--nosoft:#F7E0E0;--line:#CFDCE4}*{box-sizing:border-box}html,body{margin:0;background:var(--sky);color:var(--ink);font-family:Manrope,system-ui,sans-serif;font-size:17px;line-height:1.5}.kz{font-family:"Noto Serif",Georgia,serif}#app{max-width:640px;margin:0 auto;padding:0 18px calc(80px + env(safe-area-inset-bottom))}h1{font-family:"Noto Serif",serif;font-weight:600;font-size:1.6rem;margin:26px 0 8px}h2{font-family:"Noto Serif",serif;font-weight:600;font-size:1.3rem;margin:6px 0 12px}p{margin:0 0 12px}.card{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:20px;margin-bottom:14px}.muted{color:var(--ink2);font-size:.92rem}.note{background:var(--sky);border-radius:12px;padding:12px 14px;font-size:.95rem;color:var(--ink2)}.btn{border:none;background:var(--ink);color:#fff;border-radius:12px;padding:12px 18px;font:inherit;font-weight:600;cursor:pointer}.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line)}.btn.small{padding:8px 12px;font-size:.88rem}.btn:disabled{opacity:.5;cursor:default}button:focus-visible{outline:3px solid var(--front);outline-offset:2px}.row{display:flex;gap:10px;justify-content:space-between;align-items:center;margin-top:14px;flex-wrap:wrap}.tabs{position:fixed;left:0;right:0;bottom:0;background:var(--paper);border-top:1px solid var(--line);display:flex;padding-bottom:env(safe-area-inset-bottom)}.tabs button{flex:1;border:none;background:none;font:inherit;font-size:.8rem;font-weight:600;color:var(--ink2);padding:12px 4px;cursor:pointer}.tabs button.active{color:var(--ink)}.opts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.opts button{border:1.5px solid var(--line);background:var(--paper);border-radius:12px;padding:12px 10px;font:inherit;font-size:1.1rem;cursor:pointer;color:var(--ink)}.opts button.right{background:var(--oksoft);border-color:var(--ok)}.opts button.wrong{background:var(--nosoft);border-color:var(--no)}.opts button:disabled{cursor:default}.gloss{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}.gloss span{background:var(--sky);border-radius:8px;padding:6px 9px;font-size:.85rem;line-height:1.3}.gloss span b{display:block;font-family:"Noto Serif",serif;font-weight:400;font-size:1rem}.gloss span.hi b{color:var(--front)}.big{font-size:1.5rem;line-height:1.35;margin:6px 0 4px}.blank{border-bottom:2px solid var(--front);color:var(--front);padding:0 6px}.play{border:1.5px solid var(--line);background:var(--paper);border-radius:999px;width:40px;height:40px;font-size:1rem;cursor:pointer;vertical-align:middle}.stat{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line);font-size:.95rem}.stat b{font-family:"Noto Serif",serif;font-size:1.15rem;font-weight:600}.bar{height:8px;background:var(--sky);border-radius:4px;overflow:hidden;margin:4px 0 10px}.bar i{display:block;height:100%;background:var(--front)}.fb{margin-top:10px;font-size:.93rem}.fb.ok{color:var(--ok)}.fb.no{color:var(--no)}input{width:100%;font:inherit;padding:12px;border:1.5px solid var(--line);border-radius:12px;margin-bottom:10px}.chips{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 14px}.chips button{border:1.5px solid var(--line);background:var(--paper);border-radius:12px;padding:8px 12px;font:inherit;cursor:pointer;color:var(--ink)}.chips button.sel{border-color:var(--ink);background:var(--ink);color:#fff}