:root{--bg:#fff;--surface:#f4f6f8;--ink:#0b1220;--muted:#5b6472;--border:#d8dee6;--brand:#0072ce;--brand-pressed:#005a9e;--brand-soft:#e6f2fb;--success:#1b8a4a;--success-soft:#e6f6ec;--danger:#c62828;--danger-soft:#fdecea;--xp:#f5a623;--streak:#e85d04;--disabled:#a0a8b4;--r-sm:8px;--r-md:12px;--r-lg:16px;--r-pill:999px;--shadow:0 1px 3px #0b122014;--tabbar-h:64px;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;font-family:Inter,Segoe UI,system-ui,-apple-system,Roboto,sans-serif;line-height:1.35}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}html,body,#root{min-height:100%;margin:0}body{min-height:100dvh}button{font:inherit;color:inherit;cursor:pointer}button:disabled{cursor:default}:focus-visible{outline:3px solid var(--brand);outline-offset:2px}h1,h2,p{margin:0}.h1{letter-spacing:-.01em;font-size:26px;font-weight:800;line-height:1.2}.h2{font-size:20px;font-weight:700;line-height:1.25}.lead{color:var(--ink);font-size:17px}.muted{color:var(--muted)}.small{font-size:14px}.block{display:block}.grow{flex:1;min-width:0}.et{color:var(--brand-pressed);font-size:18px;font-weight:600}.et.big{font-size:22px}.eyebrow{letter-spacing:.06em;text-transform:uppercase;color:var(--brand);margin-bottom:6px;font-size:12px;font-weight:700}.row-between{justify-content:space-between;align-items:baseline;gap:8px;display:flex}.btn{border-radius:var(--r-md);background:var(--surface);border:2px solid #0000;min-height:52px;padding:0 20px;font-size:16px;font-weight:700;transition:background .15s,transform 50ms}.btn:active:not(:disabled){transform:translateY(1px)}.btn:disabled{color:var(--disabled);background:#e7eaee}.btn-block{width:100%}.btn-primary{background:var(--brand);color:#fff;box-shadow:0 3px 0 var(--brand-pressed)}.btn-primary:hover:not(:disabled){background:#0066b9}.btn-primary:disabled{box-shadow:none}.btn-secondary{border-color:var(--border);color:var(--ink);background:#fff}.btn-secondary:hover:not(:disabled){border-color:var(--brand);color:var(--brand)}.btn-success{background:var(--success);color:#fff}.btn-danger{background:var(--danger);color:#fff}.btn-danger-outline{border-color:var(--danger);color:var(--danger);background:#fff}.btn-col{gap:10px;width:100%;margin-top:8px;display:grid}.btn-row{flex-wrap:wrap;gap:10px;display:flex}.link-btn{color:var(--brand);background:0 0;border:0;min-height:44px;padding:8px 0;font-weight:600}.icon-btn{border-radius:var(--r-pill);width:48px;height:48px;color:var(--muted);background:0 0;border:0;place-items:center;margin-left:-12px;display:inline-grid}.icon-btn:hover{background:var(--surface);color:var(--ink)}.pills{flex-shrink:0;gap:8px;display:flex}.pill{border-radius:var(--r-pill);background:var(--surface);align-items:center;gap:4px;padding:6px 12px;font-size:15px;font-weight:800;display:inline-flex}.pill-streak{color:var(--streak);background:#fff1e8}.pill-xp{color:#b37000;background:#fff6e5}.tag{color:#fff;background:var(--brand);border-radius:var(--r-pill);width:fit-content;margin-top:4px;padding:2px 8px;font-size:12px;font-weight:700;display:inline-block}.tab-shell{min-height:100dvh}.tab-main{padding:calc(20px + env(safe-area-inset-top)) 16px calc(var(--tabbar-h) + 24px + env(safe-area-inset-bottom));max-width:1100px;margin:0 auto}.tabbar{height:calc(var(--tabbar-h) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);border-top:1px solid var(--border);z-index:10;background:#fff;display:flex;position:fixed;bottom:0;left:0;right:0}.tab{color:var(--muted);background:0 0;border:0;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:2px;min-height:48px;font-size:12px;font-weight:700;display:flex}.tab.active{color:var(--brand)}.rail{display:none}@media (width>=900px){.tab-shell{grid-template-columns:240px 1fr;display:grid}.tabbar{display:none}.rail{height:100dvh;padding:calc(24px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom));border-right:1px solid var(--border);flex-direction:column;gap:6px;display:flex;position:sticky;top:0}.brand{color:var(--brand);padding:0 12px 20px;font-size:28px;font-weight:900}.rail-item{border-radius:var(--r-md);min-height:52px;color:var(--muted);text-align:left;background:0 0;border:2px solid #0000;align-items:center;gap:12px;padding:0 14px;font-weight:700;display:flex}.rail-item:hover{background:var(--surface)}.rail-item.active{color:var(--brand);background:var(--brand-soft);border-color:#b9dbf5}.rail-foot{color:var(--muted);margin-top:auto;padding:0 12px;font-size:13px}.tab-main{width:100%;padding:36px 40px 48px}}.page{gap:20px;display:grid}.page-head{justify-content:space-between;align-items:flex-start;gap:12px;display:flex}.card{border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow);background:#fff;padding:18px}.today-grid,.profile-grid{gap:14px;display:grid}@media (width>=900px){.today-grid{grid-template-columns:1.4fr 1fr;align-items:start}.today-grid .continue-card{grid-row:span 2}.today-grid .units-card{grid-column:1/-1}.profile-grid{grid-template-columns:1fr 1fr;align-items:start}}.continue-card{border:2px solid var(--brand);background:linear-gradient(180deg, var(--brand-soft), #fff 70%);gap:8px;display:grid}.continue-card .btn{margin-top:8px}.streak-card,.review-card{align-items:center;gap:14px;display:flex}.streak-card{color:var(--streak)}.streak-card b{color:var(--ink)}.streak-card.done{background:#fff6ef;border-color:#f7c9a8}.review-card{color:var(--brand)}.review-card b{color:var(--ink)}.unit-row{border:0;border-top:1px solid var(--surface);text-align:left;background:0 0;align-items:center;gap:12px;width:100%;min-height:56px;padding:10px 0;display:flex}.unit-row:first-of-type{border-top:0}.unit-num{border-radius:var(--r-pill);background:var(--brand-soft);width:36px;height:36px;color:var(--brand);flex-shrink:0;place-items:center;font-weight:800;display:grid}.unit-title{margin-bottom:6px;font-weight:600;display:block}.bar{border-radius:var(--r-pill);background:var(--surface);height:8px;display:block;overflow:hidden}.bar>span{background:var(--brand);border-radius:inherit;height:100%;transition:width .2s ease-out;display:block}.unit{gap:14px;padding-bottom:8px;display:grid}.unit-head{background:var(--brand);color:#fff;border-radius:var(--r-lg);padding:16px 18px}.unit-head .eyebrow{color:#cfe6fb}.unit-head .muted{color:#e3effa;align-items:center;gap:6px;margin-top:6px;display:flex}.unit-locked .unit-head{background:#8c96a4}.path{gap:14px;margin:0;padding:4px 0 12px;list-style:none;display:grid}.node-row{align-items:center;gap:16px;display:flex}.node-row.offset-1{padding-left:40px}.node-row.offset-2{padding-left:80px}.node-row.offset-3{padding-left:40px}@media (width<=380px){.node-row.offset-2{padding-left:56px}}.node{border:0;border-radius:50%;flex-shrink:0;place-items:center;width:72px;height:72px;font-size:18px;font-weight:800;display:grid}.node-done{background:var(--success);color:#fff;box-shadow:0 4px #136a38}.node-current{background:var(--brand);color:#fff;box-shadow:0 4px 0 var(--brand-pressed), 0 0 0 6px var(--brand-soft)}.node-open{color:var(--brand);border:3px solid var(--brand);background:#fff;box-shadow:0 4px #b9dbf5}.node-locked{color:var(--disabled);background:#e7eaee;box-shadow:0 4px #d3d8de}.node-label{gap:2px;display:grid}.focus-screen{min-height:100dvh;padding-bottom:200px;padding-top:env(safe-area-inset-top);flex-direction:column;display:flex}.focus-screen.player{padding-top:0}.focus-col{width:100%;max-width:640px;margin:0 auto;padding:0 16px}.focus-screen>.focus-col{gap:14px;padding-top:12px;display:grid}.sticky-foot{border-top:1px solid var(--border);padding:14px max(0px, env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) max(0px, env(safe-area-inset-left));z-index:5;background:#fff;position:fixed;bottom:0;left:0;right:0}.tip{background:var(--brand-soft);border-radius:var(--r-md);gap:4px;padding:12px 14px;display:grid}.vocab{gap:6px;margin:0;padding:0;list-style:none;display:grid}.vocab li{background:var(--surface);border-radius:var(--r-md);align-items:center;gap:12px;min-height:48px;padding:6px 12px;display:flex}.vocab-et{min-width:40%;font-weight:700}.player-top{z-index:4;padding:8px 0;padding-top:calc(8px + env(safe-area-inset-top));background:#fff;position:sticky;top:0}.player-top-row{align-items:center;gap:12px;display:flex}.progress{background:var(--surface);border-radius:var(--r-pill);flex:1;height:14px;overflow:hidden}.progress>span{background:var(--brand);border-radius:inherit;height:100%;transition:width .2s ease-out;display:block}.ex-area{gap:18px;padding-top:8px;display:grid}.ex-meta{margin-bottom:-8px}.prompt{gap:10px;display:grid}.ex-label{color:var(--muted);font-size:15px;font-weight:700}.prompt-row{align-items:center;gap:12px;display:flex}.prompt-en{font-size:26px;font-weight:800}.prompt-et{color:var(--ink);font-size:26px;font-weight:800}.speak{border-radius:var(--r-md);background:var(--brand);color:#fff;width:48px;height:48px;box-shadow:0 3px 0 var(--brand-pressed);border:0;flex-shrink:0;place-items:center;display:grid}.speak-big{border-radius:50%;width:112px;height:112px}.speak.playing{opacity:.75}.listen-box{background:var(--brand-soft);border-radius:var(--r-lg);text-align:center;justify-items:center;gap:10px;padding:20px;display:grid}.listen-box.no-audio{background:var(--surface)}.note{color:var(--muted)}.choices{gap:10px;display:grid}@media (width>=640px){.choices{grid-template-columns:1fr 1fr}}.choice{border-radius:var(--r-md);border:2px solid var(--border);text-align:left;min-height:60px;box-shadow:0 2px 0 var(--border);background:#fff;align-items:center;gap:12px;padding:12px 16px;font-size:17px;font-weight:600;display:flex}.choice:hover:not(:disabled){border-color:#9ccbef}.choice.selected{border-color:var(--brand);background:var(--brand-soft);color:var(--brand-pressed);box-shadow:0 2px 0 var(--brand)}.choice-num{border:2px solid var(--border);border-radius:var(--r-sm);width:28px;height:28px;color:var(--muted);flex-shrink:0;place-items:center;font-size:13px;display:grid}.choice.selected .choice-num{border-color:var(--brand);color:var(--brand)}.slot{border-bottom:2px solid var(--border);border-top:2px solid var(--border);flex-wrap:wrap;align-items:center;gap:8px;min-height:72px;padding:12px;display:flex}.bank{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.tile{border-radius:var(--r-md);border:2px solid var(--border);min-height:48px;box-shadow:0 2px 0 var(--border);background:#fff;padding:10px 16px;font-size:17px;font-weight:600}.tile.in-slot{border-color:var(--brand);background:var(--brand-soft)}.tile.used{background:var(--surface);color:#0000;box-shadow:none;border-color:var(--surface)}.type-input{border:2px solid var(--border);border-radius:var(--r-md);background:var(--surface);width:100%;min-height:56px;padding:12px 16px;font-family:inherit;font-size:20px}.type-input:focus{border-color:var(--brand);background:#fff;outline:none}.special-keys{grid-template-columns:repeat(4,1fr);gap:10px;display:grid}.key{border-radius:var(--r-md);border:2px solid var(--border);min-height:52px;box-shadow:0 2px 0 var(--border);background:#fff;font-size:22px;font-weight:700}.key:hover:not(:disabled){border-color:var(--brand);color:var(--brand)}.hint{color:#6b4500;border-radius:var(--r-md);background:#fff6e5;border:1px solid #f5d08a;padding:10px 14px;font-weight:600}.match-grid{grid-template-columns:1fr 1fr;gap:10px;display:grid}.match-col{align-content:start;gap:10px;display:grid}.match-chip{border-radius:var(--r-md);border:2px solid var(--border);min-height:56px;box-shadow:0 2px 0 var(--border);text-align:center;background:#fff;justify-content:center;align-items:center;gap:6px;padding:10px 12px;font-size:16px;font-weight:600;display:flex}.match-chip.selected{border-color:var(--brand);background:var(--brand-soft)}.match-chip.matched{background:var(--success-soft);color:var(--success);box-shadow:none;border-color:#9ad3b0}.match-chip.wrong{border-color:var(--danger);background:var(--danger-soft);animation:.3s shake}@keyframes shake{25%{transform:translate(-4px)}75%{transform:translate(4px)}}.sheet{padding:18px max(0px, env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) max(0px, env(safe-area-inset-left));z-index:6;border-top:2px solid;animation:.15s ease-out up;position:fixed;bottom:0;left:0;right:0}.sheet .focus-col{gap:10px;display:grid}@keyframes up{0%{opacity:0;transform:translateY(24px)}}.sheet-ok{background:var(--success-soft);color:#0f5a30;border-color:#9ad3b0}.sheet-bad{background:var(--danger-soft);color:#8a1c1c;border-color:#f2b3ae}.sheet-head{align-items:center;gap:12px;display:flex}.sheet-icon{background:#fff;border-radius:50%;place-items:center;width:40px;height:40px;display:grid}.sheet-title{font-size:20px;display:block}.sheet-xp{color:#b37000;font-weight:800}.sheet-answer{font-size:17px}.center-screen{min-height:100dvh;padding:calc(24px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom));background:linear-gradient(180deg, var(--brand-soft), #fff 40%);place-items:center;display:grid}.card-lg{border:1px solid var(--border);text-align:center;background:#fff;border-radius:20px;justify-items:center;gap:12px;width:100%;max-width:480px;padding:28px 22px;display:grid;box-shadow:0 8px 30px #0b122014}.logo{background:var(--brand);color:#fff;width:72px;height:72px;box-shadow:0 4px 0 var(--brand-pressed);border-radius:20px;place-items:center;font-size:40px;font-weight:900;display:grid}.wordmark{color:var(--brand);font-size:40px;font-weight:900}.et-sample{margin-top:6px;font-size:22px;font-weight:700}.feature-list{text-align:left;gap:12px;width:100%;margin:8px 0;padding:0;list-style:none;display:grid}.feature-list li{align-items:flex-start;gap:12px;display:flex}.fi{border-radius:var(--r-md);flex-shrink:0;place-items:center;width:44px;height:44px;display:grid}.fi-brand{background:var(--brand-soft);color:var(--brand)}.fi-streak{color:var(--streak);background:#fff1e8}.fi-ink{background:var(--surface);color:var(--ink)}.badge-ok{background:var(--success);color:#fff;width:88px;height:88px;box-shadow:0 0 0 10px var(--success-soft);border-radius:50%;place-items:center;margin:8px 0;display:grid}.stats,.stat-row{grid-template-columns:repeat(3,1fr);gap:10px;width:100%;display:grid}.stat{border-radius:var(--r-md);color:#b37000;background:#fff6e5;justify-items:center;gap:2px;padding:12px 6px;display:grid}.stat b{color:var(--ink);font-size:24px}.stat-streak{color:var(--streak);background:#fff1e8}.stat-acc{background:var(--success-soft);color:var(--success)}.stat-row .stat{background:var(--surface)}.stat-row .stat:first-child{color:var(--streak)}.big-num{font-size:24px}.xp-breakdown{gap:4px;width:100%;margin:0;padding:0;list-style:none;display:grid}.xp-breakdown li{color:var(--muted);justify-content:space-between;display:flex}.xp-breakdown span{color:var(--ink);font-weight:700}.callout{color:#8a3a00;border-radius:var(--r-md);background:#fff1e8;width:100%;padding:10px 14px;font-weight:600}.week{text-align:center;grid-template-columns:repeat(7,1fr);gap:6px;display:grid}.day{color:var(--muted);justify-items:center;gap:4px;display:grid}.day-dot{background:var(--surface);border-radius:50%;place-items:center;width:36px;height:36px;display:grid}.day.active .day-dot{background:var(--streak);color:#fff}.day.today .day-dot{outline:2px solid var(--brand);outline-offset:2px}.unit-progress{gap:6px;padding:8px 0;display:grid}.toggle-row{justify-content:space-between;align-items:center;gap:16px;padding:8px 0 16px;display:flex}.switch{appearance:none;border-radius:var(--r-pill);background:var(--disabled);cursor:pointer;flex-shrink:0;width:52px;height:32px;transition:background .15s;position:relative}.switch:after{content:"";background:#fff;border-radius:50%;width:24px;height:24px;transition:left .15s;position:absolute;top:4px;left:4px}.switch:checked{background:var(--brand)}.switch:checked:after{left:24px}.danger-zone{border-top:1px solid var(--border);padding:16px 0 12px}.confirm{background:var(--danger-soft);border-radius:var(--r-md);gap:10px;padding:14px;display:grid}.empty{text-align:center;color:var(--brand);justify-items:center;gap:6px;display:grid}.empty p{color:var(--ink)}@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}@media (width>=900px){.path-page{max-width:760px}}.hint p+.hint-pair{margin-top:4px}.hint-pair{font-size:15px;font-weight:500}.resume-bar{margin:4px 0 2px}.center{text-align:center}.continue-card .link-btn{justify-self:center}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.voice-note{color:#6b4500;border-radius:var(--r-md);background:#fff6e5;border:1px solid #f5d08a;margin:0;padding:8px 12px;font-size:14px;font-weight:600}.listen-box .voice-note{text-align:center;width:100%}.prompt .voice-note{margin-top:4px}.account{text-align:left;justify-items:stretch}.seg{background:var(--surface);border-radius:var(--r-md);grid-template-columns:1fr 1fr;gap:4px;padding:4px;display:grid}.seg-btn{border-radius:var(--r-sm);min-height:44px;color:var(--muted);background:0 0;border:0;font-size:15px;font-weight:700}.seg-btn.active{color:var(--brand-pressed);box-shadow:var(--shadow);background:#fff}.account-form{gap:14px;display:grid}.field{gap:6px;display:grid}.field label{font-weight:700}.text-input{width:100%;min-height:48px;color:var(--ink);border:2px solid var(--border);border-radius:var(--r-md);background:#fff;padding:10px 14px;font-family:inherit;font-size:16px}.text-input:focus{border-color:var(--brand)}.text-input[aria-invalid=true]{border-color:var(--danger)}.pw-row{gap:8px;display:flex}.pw-row .text-input{flex:1;min-width:0}.pw-toggle{min-width:72px;min-height:48px;padding:0 12px}.field-error,.form-error{color:var(--danger);font-size:15px;font-weight:600}.form-error{background:var(--danger-soft);border-radius:var(--r-md);padding:10px 12px}.link-btn.inline{min-height:44px;padding:0 4px;text-decoration:underline;display:inline}.danger-link{color:var(--danger)}.account-card{gap:10px;display:grid}.check-row{align-items:center;gap:12px;min-height:44px;display:flex}.check-row input{width:24px;height:24px;accent-color:var(--brand);flex-shrink:0}.toast-host{left:0;right:0;bottom:calc(var(--tabbar-h) + 12px + env(safe-area-inset-bottom));pointer-events:none;z-index:50;justify-items:center;padding:0 16px;display:grid;position:fixed}.toast{background:var(--ink);color:#fff;border-radius:var(--r-md);max-width:480px;padding:12px 16px;font-weight:600;box-shadow:0 6px 20px #0b122040}
