:root{--bg: #111318;--surface: #1a1d24;--line: #2a2f3a;--text: #e7e9ee;--dim: #9aa3b2;--accent: #7aa2f7;--again: #f7768e;--hard: #e0af68;--good: #9ece6a;--easy: #7dcfff;color-scheme:dark}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);font:16px/1.55 ui-sans-serif,-apple-system,Segoe UI,system-ui,sans-serif;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}.app{max-width:42rem;margin:0 auto;min-height:100%;display:flex;flex-direction:column;padding:1rem;gap:1rem}.bar{display:flex;align-items:center;justify-content:space-between;gap:.75rem;font-size:.8rem;color:var(--dim)}.brand{font-weight:600;letter-spacing:.02em;color:var(--text)}.status{display:flex;align-items:center;gap:.5rem}.dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--good);flex:none}.dot.offline{background:var(--hard)}button{font:inherit;color:inherit;background:var(--surface);border:1px solid var(--line);border-radius:.6rem;min-height:2.75rem;padding:.6rem 1rem;cursor:pointer}button:disabled{opacity:.5}button:active{transform:translateY(1px)}.primary{background:var(--accent);border-color:var(--accent);color:#0b0d12;font-weight:600;width:100%}.ghost{background:transparent}input{font:inherit;color:inherit;background:var(--surface);border:1px solid var(--line);border-radius:.6rem;padding:.7rem .85rem;width:100%;min-height:2.75rem}input:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.panel{background:var(--surface);border:1px solid var(--line);border-radius:.9rem;padding:1.1rem}.stack{display:flex;flex-direction:column;gap:.75rem}.center{flex:1;display:flex;flex-direction:column;justify-content:center;gap:1rem}.muted{color:var(--dim);font-size:.9rem}.error{color:var(--again);font-size:.9rem}h1{font-size:1.25rem;margin:0}.review{flex:1;display:flex;flex-direction:column;justify-content:center;gap:.9rem}.card{display:flex;flex-direction:column;gap:1rem;text-align:center;padding:.5rem .25rem}.note{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--dim)}.front{font-size:1.3rem;font-weight:500;white-space:pre-wrap}.back{font-size:1.05rem;color:var(--text);white-space:pre-wrap;border-top:1px solid var(--line);padding-top:1.25rem}.grades{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}.grades button{display:flex;flex-direction:column;align-items:center;gap:.15rem;padding:.5rem .25rem;font-size:.85rem;font-weight:600}.key{font-size:.68rem;font-weight:500;color:var(--dim);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.actions{display:flex;gap:.5rem;align-items:center}.actions .primary{flex:1}.flag{flex:none;color:var(--again);padding-inline:.9rem}.hint{text-align:center;font-size:.72rem;color:var(--dim);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}@media(pointer:coarse){.hint,.key{display:none}}.reason{display:flex;flex-direction:column;gap:.5rem}.g1{color:var(--again)}.g2{color:var(--hard)}.g3{color:var(--good)}.g4{color:var(--easy)}.progress{height:3px;background:var(--line);border-radius:2px;overflow:hidden}.progress>div{height:100%;background:var(--accent);transition:width .16s ease}@media(min-width:40rem){.front{font-size:1.5rem}}