:root{--bg: #eef0f5;--canvas: #f7f8fb;--surface: #ffffff;--surface-2: #f3f5f9;--surface-3: #eaedf3;--ink: #15171c;--muted: #626a78;--faint: #9aa1ad;--border: #e4e7ee;--border-strong: #d4d9e3;--accent: #5b5bf0;--accent-press: #4848d6;--accent-soft: #ececff;--on-accent: #ffffff;--success: #138a5a;--success-soft: #e2f6ec;--danger: #d33f3f;--danger-soft: #fcebeb;--gold: #e0a32e;--ring: 0 0 0 4px rgba(91, 91, 240, .18);--shadow-sm: 0 1px 2px rgba(20, 23, 30, .06);--shadow: 0 10px 30px rgba(28, 32, 48, .1);--shadow-lg: 0 24px 60px rgba(28, 32, 48, .16);--r-sm: 10px;--r-md: 14px;--r-lg: 20px;--r-xl: 28px;--sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;--serif: "Lora", Georgia, "Times New Roman", serif;color-scheme:light}@media(prefers-color-scheme:dark){:root{--bg: #0c0e13;--canvas: #111319;--surface: #171a22;--surface-2: #1d212b;--surface-3: #242936;--ink: #f1f3f8;--muted: #9aa3b2;--faint: #6b7382;--border: #262b36;--border-strong: #333a48;--accent: #8888ff;--accent-press: #9b9bff;--accent-soft: #20223a;--on-accent: #0c0e13;--success: #4ed09a;--success-soft: #14271f;--danger: #ff8585;--danger-soft: #2a1718;--gold: #e9bd5e;--ring: 0 0 0 4px rgba(136, 136, 255, .22);--shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);--shadow: 0 12px 32px rgba(0, 0, 0, .45);--shadow-lg: 0 28px 64px rgba(0, 0, 0, .55);color-scheme:dark}}*{box-sizing:border-box}html,body{margin:0;padding:0}body{min-height:100vh;background:radial-gradient(1200px 600px at 50% -10%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 60%),var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}button,input{font:inherit;color:inherit}button{-webkit-tap-highlight-color:transparent}::selection{background:var(--accent-soft)}.app{width:100%;max-width:560px;min-height:100vh;margin:0 auto;display:flex;flex-direction:column;background:var(--canvas);position:relative}.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px 14px;background:color-mix(in srgb,var(--canvas) 86%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--border)}.brand{display:flex;align-items:center;gap:10px}.brand-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:linear-gradient(150deg,var(--accent),color-mix(in srgb,var(--accent) 55%,var(--gold)));color:var(--on-accent);font-weight:800;font-size:1.05rem;box-shadow:var(--shadow-sm)}.brand-text b{display:block;font-size:1.02rem;font-weight:800;letter-spacing:-.01em;line-height:1}.brand-text span{font-size:.72rem;color:var(--muted);font-weight:600}.streak{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:var(--surface);border:1px solid var(--border);font-size:.82rem;font-weight:700;box-shadow:var(--shadow-sm)}.content{flex:1;padding:18px 18px 110px}.page{display:flex;flex-direction:column;gap:16px;animation:rise .28s cubic-bezier(.2,.7,.2,1) both}@keyframes rise{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.page-head h1{margin:2px 0 0;font-size:1.7rem;letter-spacing:-.02em}.kicker{margin:0;font-size:.74rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}.page-head p.sub{margin:6px 0 0;color:var(--muted);font-weight:500}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:20px}.stack{display:grid;gap:12px}.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border);color:var(--muted);font-size:.76rem;font-weight:700}.chip.accent{background:var(--accent-soft);border-color:transparent;color:var(--accent)}.chip.dot:before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 20px;border:1px solid transparent;border-radius:var(--r-md);background:var(--surface-2);color:var(--ink);font-weight:700;cursor:pointer;transition:transform .12s ease,background .14s ease,box-shadow .14s ease,opacity .14s ease}.btn:active{transform:translateY(1px) scale(.99)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn.block{width:100%}.btn.primary{background:var(--accent);color:var(--on-accent);box-shadow:0 8px 20px color-mix(in srgb,var(--accent) 35%,transparent)}.btn.primary:active{background:var(--accent-press)}.btn.ghost{background:transparent;border-color:var(--border-strong);color:var(--muted)}.btn.success{background:var(--success);color:#fff}.btn.danger-soft{background:var(--danger-soft);color:var(--danger)}.btn.sm{min-height:40px;padding:0 14px;font-size:.86rem;border-radius:var(--r-sm)}.audio-btn{display:inline-grid;place-items:center;width:44px;height:44px;flex:none;border:1px solid var(--border);border-radius:50%;background:var(--surface-2);color:var(--accent);cursor:pointer;transition:transform .12s ease,background .14s ease}.audio-btn.lg{width:56px;height:56px}.audio-btn:active{transform:scale(.92)}.audio-btn.speaking{background:var(--accent);color:var(--on-accent);animation:pulse 1s ease-in-out infinite}@keyframes pulse{0%,to{box-shadow:0 0 color-mix(in srgb,var(--accent) 45%,transparent)}50%{box-shadow:0 0 0 8px color-mix(in srgb,var(--accent) 0%,transparent)}}.session-bar{display:flex;align-items:center;gap:12px}.session-track{flex:1;height:9px;border-radius:999px;background:var(--surface-3);overflow:hidden}.session-fill{height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 55%,var(--gold)));transition:width .36s cubic-bezier(.2,.7,.2,1)}.session-count{font-size:.8rem;font-weight:800;color:var(--muted);font-variant-numeric:tabular-nums}.exercise{display:flex;flex-direction:column;gap:18px;animation:rise .26s cubic-bezier(.2,.7,.2,1) both}.exercise-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.exercise-label{font-size:.78rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}.prompt{color:var(--muted);font-weight:600;font-size:.96rem;margin:0}.sentence{font-family:var(--serif);font-size:clamp(1.9rem,8.5vw,2.7rem);line-height:1.22;letter-spacing:-.01em;margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:.12em .34em}.sentence.compact{font-size:clamp(1.4rem,6vw,1.9rem)}.word{position:relative;border:0;background:transparent;padding:0 .06em;margin:0;font:inherit;color:var(--ink);cursor:pointer;border-bottom:2px dotted color-mix(in srgb,var(--accent) 45%,transparent);transition:color .12s ease,background .12s ease;border-radius:4px}.word:hover{color:var(--accent)}.word.active{background:var(--accent-soft);color:var(--accent);border-bottom-color:transparent}.punct{font-family:var(--serif)}.gloss{min-height:24px;display:flex;align-items:center;gap:8px;color:var(--muted);font-size:.95rem;font-weight:600}.gloss b{color:var(--ink)}.gloss .hint{color:var(--faint);font-weight:500;font-style:italic}.translation{border-left:3px solid var(--accent);background:var(--surface-2);border-radius:0 var(--r-md) var(--r-md) 0;padding:12px 14px}.translation .lbl{font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}.translation p{margin:4px 0 0;font-size:1.15rem;font-weight:600}.tip{display:flex;gap:10px;background:color-mix(in srgb,var(--gold) 12%,var(--surface));border:1px solid color-mix(in srgb,var(--gold) 30%,var(--border));border-radius:var(--r-md);padding:12px 14px;font-size:.92rem;line-height:1.45}.tip .tip-icon{flex:none;color:var(--gold)}.tip b{color:var(--ink)}.answer-zone{min-height:64px;display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start;padding:12px;border-radius:var(--r-md);border:2px dashed var(--border-strong);background:var(--surface-2)}.answer-zone.empty:before{content:"Tap the words in the right order";color:var(--faint);font-size:.9rem;font-weight:600}.answer-zone.correct{border-style:solid;border-color:var(--success);background:var(--success-soft)}.answer-zone.wrong{border-style:solid;border-color:var(--danger);background:var(--danger-soft)}.bank{display:flex;flex-wrap:wrap;gap:8px;min-height:48px}.tile{font-family:var(--serif);font-size:1.12rem;font-weight:600;padding:9px 15px;border-radius:12px;border:1px solid var(--border-strong);background:var(--surface);color:var(--ink);cursor:pointer;box-shadow:var(--shadow-sm);transition:transform .12s ease,opacity .14s ease,border-color .14s ease,background .14s ease;animation:pop .18s cubic-bezier(.2,.7,.2,1) both}@keyframes pop{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}.tile:active{transform:scale(.94)}.tile.in-answer{border-color:var(--accent)}.tile.bad{border-color:var(--danger);background:var(--danger-soft);color:var(--danger);animation:shake .36s ease}@keyframes shake{0%,to{transform:translate(0)}20%,60%{transform:translate(-5px)}40%,80%{transform:translate(5px)}}.feedback{display:flex;align-items:center;gap:8px;font-weight:700;font-size:.95rem}.feedback.ok{color:var(--success)}.feedback.no{color:var(--danger)}.actions{display:grid;gap:10px}.actions.two{grid-template-columns:1fr 1fr}.celebrate{text-align:center;padding:36px 22px;display:flex;flex-direction:column;align-items:center;gap:12px}.celebrate .big{font-size:3rem;line-height:1}.celebrate h2{margin:4px 0 0;font-size:1.5rem}.celebrate p{margin:0;color:var(--muted)}.lesson-row{display:flex;align-items:center;gap:14px;cursor:pointer;text-align:left;width:100%;border:1px solid var(--border);background:var(--surface);border-radius:var(--r-lg);padding:16px 18px;box-shadow:var(--shadow);transition:transform .12s ease,border-color .14s ease}.lesson-row:active{transform:scale(.995)}.lesson-row.open{border-color:var(--accent)}.lesson-badge{display:grid;place-items:center;width:46px;height:46px;flex:none;border-radius:14px;background:var(--accent-soft);color:var(--accent);font-weight:800;font-size:.92rem}.lesson-row .grow{flex:1;min-width:0}.lesson-row h3{margin:0;font-size:1.08rem}.lesson-row p{margin:3px 0 0;color:var(--muted);font-size:.88rem;font-weight:500}.lesson-row .caret{color:var(--faint);transition:transform .2s ease}.lesson-row.open .caret{transform:rotate(90deg)}.study-item{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface)}.study-item .grow{flex:1;min-width:0}.study-item .de{font-family:var(--serif);font-size:1.15rem;font-weight:600;margin:0}.study-item .en{margin:3px 0 0;color:var(--muted);font-size:.92rem}.study-item .topic{font-size:.68rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}.search{position:relative}.search input{width:100%;min-height:50px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);padding:0 16px 0 44px;outline:none;transition:border-color .14s ease,box-shadow .14s ease}.search input:focus{border-color:var(--accent);box-shadow:var(--ring)}.search .icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--faint)}.word-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface)}.word-row .grow{flex:1;min-width:0}.word-row .de{font-family:var(--serif);font-size:1.18rem;font-weight:600}.word-row .en{color:var(--muted);font-size:.9rem}.word-row .meta{font-size:.74rem;color:var(--faint);font-weight:600;white-space:nowrap}.known-dot{width:9px;height:9px;border-radius:50%;flex:none;background:var(--surface-3)}.known-dot.on{background:var(--success);box-shadow:0 0 0 3px var(--success-soft)}.ring-wrap{display:flex;align-items:center;gap:20px}.ring{--p: 0;width:116px;height:116px;flex:none;border-radius:50%;display:grid;place-items:center;background:radial-gradient(closest-side,var(--surface) 72%,transparent 73%),conic-gradient(var(--accent) calc(var(--p) * 1%),var(--surface-3) calc(var(--p) * 1%))}.ring-value{grid-area:1 / 1;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;gap:3px}.ring b{font-size:1.65rem;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1}.ring span{font-size:.62rem;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.08em;line-height:1}.ring-info h3{margin:0 0 4px;font-size:1.15rem}.ring-info p{margin:0;color:var(--muted);font-size:.92rem}.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.stat{padding:14px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface)}.stat b{display:block;font-size:1.5rem;font-weight:800}.stat span{color:var(--muted);font-size:.78rem;font-weight:600}.bar-row{display:grid;gap:7px}.bar-label{display:flex;justify-content:space-between;font-size:.85rem;font-weight:700}.bar-label span:last-child{color:var(--muted)}.bar-track{height:10px;border-radius:999px;background:var(--surface-3);overflow:hidden}.bar-fill{height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 55%,var(--gold)));transition:width .5s cubic-bezier(.2,.7,.2,1)}.state{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;padding:40px 20px;color:var(--muted)}.spinner{width:32px;height:32px;border-radius:50%;border:3px solid var(--surface-3);border-top-color:var(--accent);animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.error{border:1px solid color-mix(in srgb,var(--danger) 40%,var(--border));background:var(--danger-soft);color:var(--danger);padding:12px 14px;border-radius:var(--r-md);font-weight:600;font-size:.92rem}.nav{position:fixed;left:50%;bottom:14px;transform:translate(-50%);z-index:30;width:calc(100% - 28px);max-width:420px;display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:7px;background:color-mix(in srgb,var(--surface) 88%,transparent);-webkit-backdrop-filter:saturate(1.5) blur(16px);backdrop-filter:saturate(1.5) blur(16px);border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow-lg)}.nav-item{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;border-radius:14px;text-decoration:none;color:var(--faint);font-size:.7rem;font-weight:700;transition:color .14s ease,background .14s ease}.nav-item.active{color:var(--accent);background:var(--accent-soft)}.nav-item svg{width:22px;height:22px}.streak{cursor:pointer;transition:border-color .14s ease,background .14s ease}.streak:active{transform:scale(.97)}.level-screen{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;overflow-y:auto;display:flex;align-items:flex-start;justify-content:center;padding:28px 18px calc(28px + env(safe-area-inset-bottom));background:radial-gradient(900px 500px at 50% -10%,color-mix(in srgb,var(--accent) 18%,transparent),transparent 60%),var(--canvas);animation:rise .24s cubic-bezier(.2,.7,.2,1) both}.level-inner{width:100%;max-width:520px;display:flex;flex-direction:column;gap:18px}.level-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.level-card{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;padding:16px 16px 14px;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow);cursor:pointer;transition:transform .12s ease,border-color .14s ease,box-shadow .14s ease}.level-card:hover{border-color:color-mix(in srgb,var(--accent) 50%,var(--border))}.level-card:active{transform:translateY(1px) scale(.99)}.level-card.current{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent) inset,var(--shadow)}.lvl-code{font-family:var(--serif);font-size:1.9rem;font-weight:700;line-height:1;color:var(--accent);letter-spacing:-.01em}.lvl-name{font-size:.95rem;font-weight:800;margin-top:2px}.lvl-desc{font-size:.82rem;color:var(--muted);line-height:1.35;font-weight:500}.lvl-count{margin-top:8px;font-size:.72rem;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--accent);min-height:.9em}.lvl-count.soon{color:var(--faint)}@media(max-width:380px){.stats-grid{grid-template-columns:repeat(2,1fr)}.level-grid{grid-template-columns:1fr}}