:root{--bg:#0E1116;--sf:#151A20;--bd:#2A3138;--tx:#ECEAE4;--mu:#8B9199;--sc:#B8BEC6;--ac:#5EEAD4;--ok:#7BD389;--bad:#F07178;--warn:#E5B567;--hd:'Unbounded',system-ui,sans-serif}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{color-scheme:dark}
body{margin:0;font-family:'Golos Text',system-ui,-apple-system,"Segoe UI",sans-serif;background-color:var(--bg);background-image:linear-gradient(rgba(94,234,212,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(94,234,212,.035) 1px,transparent 1px);background-size:64px 64px;color:var(--tx);min-height:100vh}
button,input{font-family:inherit}button{cursor:pointer}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0}
.muted{color:var(--mu)}.sm{font-size:13px}.acc{color:var(--ac)}
/* шапка */
.top{border-bottom:1px solid var(--bd);background:var(--bg)}
.top-in{max-width:1100px;margin:0 auto;padding:16px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.logo{font-family:var(--hd);font-weight:700;font-size:16px;letter-spacing:.02em;color:var(--tx)}
.top-r{display:flex;align-items:center;gap:10px}
.pill{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px;border:1px solid var(--bd);border-radius:999px;font-size:13px;color:var(--sc)}
.dot{display:block;width:8px;height:8px;border-radius:50%;background:var(--ok);animation:pulse 1.8s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(123,211,137,.65)}70%{box-shadow:0 0 0 8px rgba(123,211,137,0)}100%{box-shadow:0 0 0 0 rgba(123,211,137,0)}}
@media(prefers-reduced-motion:reduce){.dot{animation:none}}
.icon{width:36px;height:36px;padding:0;display:grid;place-items:center;border-radius:8px;border:1px solid var(--bd);background:var(--sf);color:var(--sc)}
.view{max-width:1100px;margin:0 auto;padding:24px 16px 48px}
/* кнопки */
.btn{height:48px;padding:0 22px;border:0;border-radius:8px;background:var(--ac);color:#0E1116;font-weight:700;font-size:15px}
.btn.ghost{background:transparent;border:1px solid var(--bd);color:var(--tx);font-weight:500}
.btn.bad{background:transparent;border:1px solid var(--bad);color:var(--bad);font-weight:600}
.btn.big{width:100%}.btn:disabled{opacity:.4;cursor:default}
.btn:focus-visible,.opt:focus-visible,.urow:focus-visible,.chip:focus-visible,.tabs button:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.row{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}.row>.btn{flex:1;min-width:120px}
/* карточки */
.card{background:var(--sf);border:1px solid var(--bd);border-radius:12px;padding:18px;margin-bottom:16px}
.card h3{font-size:16px;font-weight:600;margin-bottom:8px}
.gl{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px;color:var(--mu);font-size:13px}
.gl b{font-family:var(--hd);font-weight:500;font-size:15px;color:var(--tx);font-variant-numeric:tabular-nums}
.bar{height:8px;border-radius:4px;background:var(--bd);overflow:hidden}.bar i{display:block;height:100%;background:var(--ac);border-radius:4px;transition:width .5s}
.rev{display:flex;align-items:center;justify-content:space-between;gap:16px}.rev .t{font-size:16px;font-weight:600;margin-bottom:4px}
.promo p{margin:6px 0 0;color:var(--mu);font-size:14px}
input{width:100%;height:48px;margin-top:10px;padding:0 16px;border-radius:8px;border:1px solid var(--bd);background:var(--bg);color:var(--tx);font-size:16px}
input:focus{outline:none;border-color:var(--ac)}
/* главная */
.home{display:grid;grid-template-columns:minmax(0,1fr);gap:0 48px;align-items:start}
@media(min-width:900px){.home{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}.home aside{order:2}.view{padding:40px 48px 64px}.top-in{padding:20px 48px}}
.tabs{display:flex;gap:24px;border-bottom:1px solid var(--bd);margin-bottom:4px;overflow-x:auto}
.tabs button{padding:0 0 12px;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;background:transparent;color:var(--mu);font-size:15px;white-space:nowrap}
.tabs button.on{color:var(--tx);font-weight:600;border-bottom-color:var(--ac)}
.urow{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:14px 8px 14px 0;border:0;border-bottom:1px solid var(--bd);background:transparent;color:var(--tx);text-align:left}
.urow small{display:block;font-size:13px;color:var(--mu)}.urow b{display:block;font-weight:600;margin-top:2px}
.urow .ur{text-align:right;flex:none}.urow .s{font-size:14px;font-weight:600;margin:0}.urow .ur small{font-variant-numeric:tabular-nums}
.urow.done .s{color:var(--ok)}.urow.open .s{color:var(--ac)}.urow.locked{opacity:.5;cursor:default}.urow.locked .s{color:var(--mu)}
.urow.cur{background:rgba(94,234,212,.06)}.urow.cur .ul small{color:var(--ac);font-weight:600}.urow.cur .s{font-weight:700}
.urow:hover:not(:disabled){background:rgba(94,234,212,.04)}
.empty{padding:20px 0;color:var(--mu)}
.item{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--bd)}
.item button{background:none;border:0;color:var(--bad);font-size:18px}.mylist{margin-top:12px}
/* урок */
.lesson{display:flex;flex-direction:column;min-height:100vh}
.lbar{display:flex;align-items:center;gap:16px;width:100%;max-width:640px;margin:0 auto;padding:20px}
.back{padding:0;border:0;background:transparent;color:var(--mu);font-size:14px;white-space:nowrap}
.prog{flex:1;height:8px;border-radius:4px;background:var(--bd);overflow:hidden}.prog i{display:block;width:0;height:100%;background:var(--ac);border-radius:4px;transition:width .4s}
.cnt{font-family:var(--hd);font-weight:500;font-size:14px;font-variant-numeric:tabular-nums}
.lbody{flex:1;width:100%;max-width:640px;margin:0 auto;padding:16px 20px 28px}
.q-label{font-size:13px;color:var(--mu);margin-bottom:12px}
.q-prompt{font-family:var(--hd);font-weight:700;font-size:40px;line-height:1.15;letter-spacing:-.01em;margin-bottom:14px;overflow-wrap:anywhere}
.q-sub{font-size:14px;color:var(--mu);margin-top:10px}
.speak{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 20px;border-radius:8px;border:1px solid var(--bd);background:transparent;color:var(--tx);font-size:15px;font-weight:500}
.speak svg{stroke:var(--ac)}
.opts{list-style:none;margin:28px 0 0;padding:0;border-top:1px solid var(--bd)}
.opt{display:flex;align-items:center;gap:20px;width:100%;min-height:64px;padding:12px 8px;border:0;border-bottom:1px solid var(--bd);background:transparent;color:var(--tx);font-size:17px;text-align:left}
.opt .k{min-width:24px;color:var(--ac);font-weight:700}.opt .t{flex:1}.opt .tag{font-size:13px;font-weight:700;letter-spacing:.04em}
.opt.sel{background:rgba(94,234,212,.08);border-bottom-color:var(--ac)}
.opt.ok{background:rgba(123,211,137,.08);border-bottom-color:var(--ok)}.opt.ok .k,.opt.ok .tag{color:var(--ok)}
.opt.bad{background:rgba(240,113,120,.08);border-bottom-color:var(--bad)}.opt.bad .k,.opt.bad .tag{color:var(--bad)}
.opt:disabled:not(.ok):not(.bad){opacity:.5}
.ti{height:56px;font-size:20px;margin-top:24px}.ti.ok{border-color:var(--ok);background:rgba(123,211,137,.08)}.ti.bad{border-color:var(--bad);background:rgba(240,113,120,.08)}
.slots{min-height:64px;border-top:1px solid var(--bd);border-bottom:1px solid var(--bd);padding:10px 0;display:flex;flex-wrap:wrap;gap:8px;margin:24px 0}
.bank{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:10px 14px;border-radius:8px;border:1px solid var(--bd);background:var(--sf);color:var(--tx);font-size:16px;font-weight:500}
.intro{margin-top:8px}.intro .it{font-size:22px;color:var(--ac);font-weight:600;margin:6px 0 16px}.intro .ie{display:flex;gap:12px;align-items:center;color:var(--sc);font-size:15px;line-height:1.5}
.intro .speak{height:44px}
.lfoot{position:sticky;bottom:0;background:var(--sf);border-top:1px solid var(--bd)}.lfoot.ok{border-top-color:var(--ok)}.lfoot.bad{border-top-color:var(--bad)}
.lfi{max-width:640px;margin:0 auto;padding:16px 20px calc(20px + env(safe-area-inset-bottom))}
.fb{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}.fb:empty{display:none}
.fb-t{font-size:13px;font-weight:700;letter-spacing:.04em}.fb-t.ok{color:var(--ok)}.fb-t.bad{color:var(--bad)}
.fb-l{font-size:13px;color:var(--mu);font-weight:500;margin-top:6px}
.fb-a{font-family:var(--hd);font-weight:500;font-size:22px;line-height:1.25}
.fb-e{font-size:15px;line-height:1.5;color:var(--sc)}
/* результат */
.result{max-width:640px;margin:0 auto;padding:40px 20px 48px}
.result h1{font-family:var(--hd);font-weight:700;font-size:28px;letter-spacing:-.01em;margin:8px 0 0}
.rtop{display:flex;align-items:center;gap:28px;padding:28px 0;border-bottom:1px solid var(--bd);flex-wrap:wrap}
.donut{width:132px;height:132px;flex:0 0 132px;border-radius:50%;display:grid;place-items:center}
.donut span{width:104px;height:104px;border-radius:50%;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.donut b{font-family:var(--hd);font-size:22px;font-variant-numeric:tabular-nums}.donut small{font-size:12px;color:var(--mu)}
.kv{list-style:none;margin:0;padding:0;flex:1;min-width:180px;display:flex;flex-direction:column;gap:8px;font-size:15px}
.kv li{display:flex;justify-content:space-between;gap:16px}.kv li span:first-child{color:var(--mu)}.kv .v{font-variant-numeric:tabular-nums}
table.wt{width:100%;border-collapse:collapse;font-size:15px;margin-top:20px}
.wt th{text-align:left;color:var(--mu);font-size:13px;font-weight:500;padding:0 0 12px;border-bottom:1px solid var(--bd)}.wt th:last-child,.wt td:last-child{text-align:right}
.wt td{padding:14px 0;border-bottom:1px solid var(--bd)}.wt small{display:block;font-size:13px;color:var(--mu)}
.st-pass{color:var(--ok);font-weight:600}.st-warn{color:var(--warn);font-weight:600}.st-fail{color:var(--bad);font-weight:600}
.rbtn{display:flex;flex-direction:column;gap:10px;margin-top:28px}
.q-prompt.s{font-size:24px;line-height:1.3}.fb-a.s{font-size:18px}
.speak.mini{height:36px;width:36px;padding:0;justify-content:center;flex:none}.speak.mini svg{width:16px;height:16px}
.rule{font-size:16px;line-height:1.6;color:var(--sc);padding:16px;background:var(--sf);border:1px solid var(--bd);border-radius:12px}.rule b{color:var(--ac);font-weight:600}
.ie{display:flex;gap:12px;align-items:center;justify-content:space-between;color:var(--tx);font-size:15px;line-height:1.5;padding:12px 0;border-bottom:1px solid var(--bd)}
.intro .ie{border-bottom:0;padding:0;justify-content:flex-start}
.rd-text{font-size:18px;line-height:1.7;margin:0 0 8px}.rd-ru{font-size:16px;line-height:1.6;color:var(--sc);margin:0;padding:14px 16px;border-left:2px solid var(--ac);background:var(--sf);border-radius:0 8px 8px 0}
.gloss{list-style:none;margin:0;padding:0}.gloss li{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--bd);font-size:15px}
.peek{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 20px;border-radius:8px;border:1px solid var(--bd);background:transparent;color:var(--tx);font-size:15px;font-weight:500}
.back.aside{color:var(--ac);font-weight:600;border:1px solid var(--bd);border-radius:8px;padding:6px 12px}
mark{background:transparent;color:var(--ac);font-weight:700}
.gr-h{font-size:13px;color:var(--mu);margin:22px 0 10px}.rule{margin:0}
.forms{display:flex;flex-direction:column;border-top:1px solid var(--bd)}.form{display:flex;gap:16px;padding:12px 0;border-bottom:1px solid var(--bd);font-size:15px;line-height:1.5}.form b{flex:0 0 96px;font-weight:600;color:var(--tx)}.form span{color:var(--sc)}
.tips{margin:0;padding-left:20px;color:var(--sc);font-size:15px;line-height:1.6}.tips li{margin-bottom:6px}.tips b{color:var(--tx)}
.trap{margin-top:18px;padding:14px 16px;border:1px solid rgba(240,113,120,.4);background:rgba(240,113,120,.06);border-radius:12px;font-size:15px;line-height:1.5}.trap b:first-child{display:block;color:var(--bad);font-size:13px;margin-bottom:4px}.trap p{margin:0;color:var(--sc)}.trap p b{color:var(--tx)}
.modal{position:fixed;inset:0;background:rgba(6,8,11,.86);z-index:20;display:flex;justify-content:center;align-items:flex-end}
.modal-in{width:100%;max-width:640px;max-height:92vh;display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--bd);border-radius:12px 12px 0 0}
.modal-body{overflow:auto;padding:24px 20px}.modal-body h2{font-family:var(--hd);font-size:22px;margin-bottom:8px}.modal-foot{padding:14px 20px calc(18px + env(safe-area-inset-bottom));border-top:1px solid var(--bd);background:var(--sf)}
@media(min-width:700px){.modal{align-items:center}.modal-in{border-radius:12px}}