:root{--bg:#14171c;--panel:#1f242c;--text:#f2f4f7;--dim:#98a2b3;--accent:#ffb020}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);margin:0;font:20px/1.4 system-ui,sans-serif}main{flex-direction:column;gap:16px;max-width:640px;margin:0 auto;padding:16px;display:flex}h1,h2{margin:0}h1{color:var(--accent);font-size:2rem}h2{font-size:1.5rem}p{margin:0}.dim{color:var(--dim);font-size:.9rem}.panel{background:var(--panel);border-radius:12px;flex-direction:column;gap:12px;padding:16px;display:flex}button,input,select{font:inherit;border:2px solid #0000;border-radius:10px;min-height:56px;padding:10px 16px}input,select{background:var(--bg);color:var(--text);border-color:#3a424d}button{background:var(--panel);color:var(--text);cursor:pointer;border-color:#3a424d}button.primary{background:var(--accent);color:#1a1200;border-color:var(--accent);font-weight:700}button:disabled{opacity:.4;cursor:default}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.row{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.row>*{flex:1}.code{letter-spacing:.2em;text-align:center;color:var(--accent);font-size:4rem;font-weight:800}.word{text-align:center;background:var(--bg);cursor:pointer;border-radius:12px;padding:24px 8px;font-size:2.5rem;font-weight:800}.word.hidden{color:#0000;background:repeating-linear-gradient(45deg,#2a303a,#2a303a 10px,#232830 10px 20px)}ul{flex-direction:column;gap:6px;margin:0;padding:0;list-style:none;display:flex}li{justify-content:space-between;gap:8px;display:flex}li.current{color:var(--accent);font-weight:700}li.done{color:var(--dim);text-decoration:line-through}.error{background:#5a1f24;border-radius:10px;padding:10px 14px}.grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;display:grid}