:root{--bg:#f6f7f9;--fg:#1b1f24;--card:#fff;--muted:#5d6673;--line:#c9cfd8;--ok:#1a7f4b;--bad:#b3261e;--acc:#2456d6;--on-acc:#fff}@media (prefers-color-scheme:dark){:root{--bg:#14171b;--fg:#e8eaed;--card:#1e2329;--muted:#9aa3ad;--line:#38404a;--ok:#4cc38a;--bad:#f2766e;--acc:#7aa2ff;--on-acc:#0d1b3d}}*{box-sizing:border-box}body{background:var(--bg);color:var(--fg);justify-content:center;margin:0;padding:16px;font:16px/1.45 system-ui,-apple-system,Segoe UI,sans-serif;display:flex}main{flex-direction:column;gap:16px;width:100%;max-width:640px;min-height:calc(100vh - 32px);display:flex}h1{margin:0;font-size:1.25rem}h2{margin:0 0 8px;font-size:1rem}p{margin:0}.muted{color:var(--muted);font-size:.9rem}.stack{flex-direction:column;gap:12px;display:flex}.row{flex-wrap:wrap;gap:12px;display:flex}.row>*{flex:1}.spread{justify-content:space-between;align-items:baseline;gap:12px;display:flex}button,.btn{font:inherit;border:1px solid var(--line);background:var(--card);color:var(--fg);cursor:pointer;text-align:center;border-radius:10px;min-height:44px;padding:12px 16px}button:hover:not(:disabled){border-color:var(--muted)}button:focus-visible,.card:focus-visible,input:focus-visible,label:focus-within{outline:2px solid var(--acc);outline-offset:2px}button:disabled{opacity:.5;cursor:default}button.primary{background:var(--acc);border-color:var(--acc);color:var(--on-acc)}button.primary .muted{color:inherit;opacity:.75}button.ok{border-color:var(--ok);color:var(--ok)}button.bad{border-color:var(--bad);color:var(--bad)}button.link{color:var(--acc);background:0 0;border:0;min-height:0;padding:4px 8px}button.link.danger{color:var(--bad)}.panel{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px}.drop{border:2px dashed var(--line);text-align:center;cursor:pointer;padding:36px 16px;display:block}.drop.over{border-color:var(--acc)}.errors{border-color:var(--bad);color:var(--bad)}.errors ul{margin:6px 0 0;padding-left:20px}.bar{background:var(--line);border-radius:3px;height:6px;overflow:hidden}.bar>div{background:var(--acc);height:100%;transition:width .2s}.card{background:var(--card);border:1px solid var(--line);text-align:center;overflow-wrap:anywhere;white-space:pre-wrap;border-radius:16px;flex-direction:column;flex:1;justify-content:center;align-items:center;min-height:200px;padding:24px;font-size:1.35rem;display:flex}.card .side{text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:12px;font-size:.75rem}.card.flip{cursor:pointer;-webkit-user-select:none;user-select:none}.answer{border-top:1px solid var(--line);margin-top:12px;padding-top:12px;font-size:1.1rem}.options{flex-direction:column;gap:8px;display:flex}.options button{text-align:left;gap:10px;display:flex}.options kbd,button kbd{font:inherit;color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:0 6px;font-size:.8rem}.options button.right{border-color:var(--ok);color:var(--ok)}.options button.wrong{border-color:var(--bad);color:var(--bad)}input[type=text]{font:inherit;border:1px solid var(--line);background:var(--card);color:var(--fg);border-radius:10px;width:100%;padding:12px}.verdict{font-weight:600}.verdict.good{color:var(--ok)}.verdict.bad{color:var(--bad)}.modes{flex-direction:column;gap:8px;display:flex}.modes label{border:1px solid var(--line);cursor:pointer;border-radius:10px;align-items:flex-start;gap:10px;padding:10px 12px;display:flex}.modes input{margin-top:4px}.pack-item{border-top:1px solid var(--line);align-items:center;gap:8px;padding:12px 0;display:flex}.pack-item:first-of-type{border-top:0}.pack-item .grow{flex:1;min-width:0}.pack-item .name{overflow-wrap:anywhere;font-weight:600}.score{font-size:2.4rem;font-weight:700}.missed{text-align:left;margin:8px 0 0;padding-left:20px;font-size:1rem}[hidden]{display:none!important}@media (width<=480px){body{padding:12px}.card{padding:18px;font-size:1.2rem}}textarea{font:inherit;border:1px solid var(--line);background:var(--card);color:var(--fg);resize:vertical;border-radius:10px;width:100%;padding:10px 12px}textarea:focus-visible{outline:2px solid var(--acc);outline-offset:2px}.field{flex-direction:column;gap:4px;display:flex}.field .label,summary .label{font-size:.9rem;font-weight:600}.card.small{flex:none;min-height:0;padding:16px;font-size:1.1rem}.card-editor>summary{cursor:pointer;list-style-position:inside}.card-editor[open]>summary{margin-bottom:12px}.q-preview{color:var(--muted);overflow-wrap:anywhere}.btn-link{color:var(--acc);cursor:pointer;padding:4px 8px}.errors-box ul,.panel ul{margin:6px 0 0;padding-left:20px}