:root,html[data-theme=light]{--bg: #fefefe;--bg-card: #ffffff;--bg-slot: #f3f4f6;--bg-option: #f9fafb;--bg-option-hover: #eef2ff;--text: #111827;--text-muted: #6b7280;--text-inverse: #ffffff;--border: #e5e7eb;--accent: #6366f1;--accent-soft: #eef2ff;--correct: #16a34a;--correct-bg: #dcfce7;--incorrect: #dc2626;--incorrect-bg: #fef2f2;--shadow: 0 1px 3px rgba(0,0,0,.08);--shadow-lg: 0 4px 24px rgba(0,0,0,.1);--radius: 12px;--radius-sm: 8px;--font: "Segoe UI", system-ui, -apple-system, sans-serif;--font-mono: "Cascadia Code", "Fira Code", monospace}html[data-theme=dark]{--bg: #0f172a;--bg-card: #1e293b;--bg-slot: #334155;--bg-option: #1e293b;--bg-option-hover: #312e81;--text: #f1f5f9;--text-muted: #94a3b8;--text-inverse: #0f172a;--border: #334155;--accent: #818cf8;--accent-soft: #1e1b4b;--correct: #4ade80;--correct-bg: #14532d;--incorrect: #f87171;--incorrect-bg: #450a0a;--shadow: 0 1px 3px rgba(0,0,0,.4);--shadow-lg: 0 4px 24px rgba(0,0,0,.5)}@media(prefers-color-scheme:dark){html[data-theme=system]{--bg: #0f172a;--bg-card: #1e293b;--bg-slot: #334155;--bg-option: #1e293b;--bg-option-hover: #312e81;--text: #f1f5f9;--text-muted: #94a3b8;--text-inverse: #0f172a;--border: #334155;--accent: #818cf8;--accent-soft: #1e1b4b;--correct: #4ade80;--correct-bg: #14532d;--incorrect: #f87171;--incorrect-bg: #450a0a;--shadow: 0 1px 3px rgba(0,0,0,.4);--shadow-lg: 0 4px 24px rgba(0,0,0,.5)}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-font-smoothing:antialiased;overflow-x:hidden}body{font-family:var(--font);background:var(--bg);color:var(--text);min-height:100dvh;transition:background .3s,color .3s;overflow-x:hidden}#root{min-height:100dvh;display:flex;flex-direction:column;overflow-x:hidden}#root>*{min-width:0}.app-shell{max-width:720px;margin:0 auto;padding:2rem 1.5rem;width:100%;display:flex;flex-direction:column;gap:2rem;flex:1}.app-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.75rem}.app-header h1{font-size:1.4rem;font-weight:700;letter-spacing:-.02em}.app-header .level-badge{background:var(--accent-soft);color:var(--accent);padding:.3rem .75rem;border-radius:99px;font-size:.8rem;font-weight:600}.settings-btn{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.5rem .75rem;cursor:pointer;font-size:1.1rem;color:var(--text-muted);transition:background .15s}.settings-btn:hover{background:var(--bg-slot)}.settings-panel{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;display:flex;flex-direction:column;gap:1rem;box-shadow:var(--shadow-lg)}.settings-panel h3{font-size:1rem;font-weight:600}.settings-row{display:flex;justify-content:space-between;align-items:center;gap:1rem}.settings-row label{font-size:.9rem;color:var(--text-muted)}.settings-row select,.settings-row button{padding:.4rem .75rem;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg);color:var(--text);font-size:.85rem;cursor:pointer;font-family:var(--font)}.settings-row button.danger{color:var(--incorrect);border-color:var(--incorrect)}.settings-row button.danger:hover{background:var(--incorrect-bg)}.score-bar{display:flex;gap:1.5rem;align-items:center;font-size:.85rem;color:var(--text-muted)}.score-bar .correct{color:var(--correct);font-weight:600}.score-bar .wrong{color:var(--incorrect);font-weight:600}.score-bar .streak{color:var(--accent);font-weight:600}.progress-dots{display:flex;gap:.5rem;justify-content:center}.progress-dot{width:10px;height:10px;border-radius:50%;border:1px solid var(--border);transition:background .3s}.progress-dot.active{background:var(--accent);border-color:var(--accent)}.progress-dot.done{background:var(--correct);border-color:var(--correct)}.progress-dot.wrong{background:var(--incorrect);border-color:var(--incorrect)}.challenge-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:2rem;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:1.5rem;transition:border-color .3s,box-shadow .3s}.challenge-card.correct{border-color:var(--correct);box-shadow:0 0 0 3px var(--correct-bg)}.challenge-card.incorrect{border-color:var(--incorrect);box-shadow:0 0 0 3px var(--incorrect-bg)}.sentence-canvas-wrapper{display:flex;flex-direction:row;align-items:baseline;justify-content:center;flex-wrap:wrap;gap:.35rem}.translation-trigger{position:relative;display:inline-flex}.translation-badge{display:inline-flex;align-items:center;justify-content:center;background:var(--bg-slot);color:var(--text-muted);border:1px solid var(--border);border-radius:4px;font-size:.65rem;font-weight:700;letter-spacing:.03em;padding:.15em .5em;cursor:pointer;-webkit-user-select:none;user-select:none;line-height:1.4;transition:background .15s,color .15s,border-color .15s}.translation-badge:hover,.translation-badge:focus-visible{background:var(--accent);color:var(--text-inverse);border-color:var(--accent);outline:none}.translation-badge:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.translation-popover{visibility:hidden;opacity:0;position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%);background:var(--text);color:var(--text-inverse);padding:.4rem .75rem;border-radius:var(--radius-sm);font-size:.85rem;white-space:nowrap;pointer-events:none;transition:opacity .2s,visibility .2s;z-index:100;box-shadow:var(--shadow-lg)}.translation-popover:after{content:"";position:absolute;top:100%;left:50%;transform:translate(-50%);border:6px solid transparent;border-top-color:var(--text)}.translation-popover.visible{visibility:visible;opacity:1}.sentence-canvas{font-size:1.4rem;line-height:1.8;text-align:center;padding:.5rem 0}.sentence-word{transition:all .3s ease}.sentence-word.static{color:var(--text)}.sentence-word.modifier{background:var(--bg-slot);border-radius:.35rem;padding:0 .25rem;font-weight:700}.sentence-word.correct{color:var(--correct);animation:popLock .4s ease}.sentence-word.locked{color:var(--correct);font-weight:700}.sentence-word.incorrect{color:var(--incorrect);text-decoration:line-through;text-decoration-thickness:2px;animation:shakeX .4s ease}.sentence-word.strikethrough{text-decoration:line-through;text-decoration-thickness:2px}@keyframes popLock{0%{transform:scale(1)}50%{transform:scale(1.15)}to{transform:scale(1)}}@keyframes shakeX{0%,to{transform:translate(0)}20%{transform:translate(-4px)}40%{transform:translate(4px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.modifier-options{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}.option-btn{padding:.75rem 2rem;font-size:1.15rem;font-weight:600;border-radius:var(--radius);border:2px solid var(--border);background:var(--bg-option);color:var(--text);cursor:pointer;transition:all .15s;font-family:var(--font);min-width:140px}.option-btn:hover:not(:disabled){background:var(--bg-option-hover);border-color:var(--accent);transform:translateY(-1px)}.option-btn:active:not(:disabled){transform:translateY(0)}.option-btn:disabled{cursor:default;opacity:.7}.option-btn.chosen-correct{border-color:var(--correct);background:var(--correct-bg);color:var(--correct);animation:popLock .4s ease}.option-btn.chosen-incorrect{border-color:var(--incorrect);background:var(--incorrect-bg);color:var(--incorrect);animation:shakeX .4s ease}.option-btn.reveal-correct{border-color:var(--correct);background:var(--correct-bg);color:var(--correct)}.correction-hint{color:var(--correct);font-weight:600;font-size:1.1em;margin:0 .3rem;animation:popIn .4s cubic-bezier(.34,1.56,.64,1);white-space:nowrap}.noun-highlight{display:inline-block;padding:.15em .5em;border-radius:.45rem;margin:0 .1rem;animation:glowReveal .6s ease}.noun-highlight.de{background:#2563eb26;box-shadow:0 0 0 3px #2563eb1f}.noun-highlight.het{background:#ea580c26;box-shadow:0 0 0 3px #ea580c1f}.sentence-word.badged{font-weight:800;color:var(--text)}.article-badge{display:inline-block;font-size:.7em;font-weight:800;padding:.2em .65em;border-radius:99px;margin-left:.4em;vertical-align:middle;animation:badgeSlam .55s cubic-bezier(.18,.89,.32,1.28);letter-spacing:.02em;line-height:1.3;white-space:nowrap;box-shadow:0 2px 8px #0003}.article-badge.de{background:#2563eb;color:#fff}.article-badge.het{background:#ea580c;color:#fff}.challenge-card.incorrect{animation:cardFlash .5s ease}@keyframes badgeSlam{0%{opacity:0;transform:scale(0) rotate(-8deg) translateY(10px)}60%{opacity:1;transform:scale(1.3) rotate(2deg) translateY(-3px)}80%{transform:scale(.95) rotate(0) translateY(1px)}to{transform:scale(1) rotate(0) translateY(0)}}@keyframes glowReveal{0%{opacity:0;transform:scale(.9)}50%{opacity:.5}to{opacity:1;transform:scale(1)}}@keyframes popIn{0%{opacity:0;transform:scale(.5)}70%{transform:scale(1.2)}to{opacity:1;transform:scale(1)}}@keyframes cardFlash{0%{background:var(--bg-card)}20%{background:var(--incorrect-bg)}to{background:var(--bg-card)}}.explanation{text-align:center;font-size:.9rem;color:var(--text-muted);padding:.75rem 1rem;background:var(--bg-slot);border-radius:var(--radius-sm);animation:fadeInUp .35s ease}.explanation strong{color:var(--text);font-weight:600}.next-btn{align-self:center;padding:.75rem 2.5rem;font-size:1rem;font-weight:600;border:none;border-radius:var(--radius);background:var(--accent);color:var(--text-inverse);cursor:pointer;transition:all .15s;font-family:var(--font);animation:fadeInUp .35s ease}.next-btn:hover{filter:brightness(1.1);transform:translateY(-1px)}.next-btn:active{transform:translateY(0)}.repair-shop{background:var(--incorrect-bg);border:1px solid var(--incorrect);border-radius:var(--radius);padding:1.5rem;text-align:center;animation:fadeInUp .4s ease}.repair-shop h4{color:var(--incorrect);font-size:1rem;margin-bottom:.5rem}.repair-shop p{font-size:.85rem;color:var(--text-muted);margin-bottom:1rem}.repair-input-row{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap}.repair-input{padding:.6rem 1rem;font-size:1.1rem;border:2px solid var(--border);border-radius:var(--radius-sm);background:var(--bg);color:var(--text);font-family:var(--font);text-align:center;transition:border-color .2s}.repair-input:focus{outline:none;border-color:var(--accent)}.repair-input.correct{border-color:var(--correct)}.repair-input.incorrect{border-color:var(--incorrect)}.level-complete{text-align:center;padding:2rem}.level-complete h2{font-size:1.6rem;margin-bottom:.5rem}.level-complete p{color:var(--text-muted);margin-bottom:1.5rem}.level-complete .stats{display:flex;gap:2rem;justify-content:center;font-size:1.2rem;margin-bottom:1.5rem}.empty-state{text-align:center;padding:3rem 1rem}.empty-state h2{font-size:1.3rem;margin-bottom:.5rem}.empty-state p{color:var(--text-muted);margin-bottom:1rem}.flex-center{display:flex;justify-content:center;align-items:center}.gap-sm{gap:.5rem}.gap-md{gap:1rem}.tour-btn{background:var(--bg-card);border:2px solid var(--border);border-radius:50%;width:28px;height:28px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:.85rem;font-weight:700;color:var(--text-muted);transition:all .15s;font-family:var(--font)}.tour-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}.tour-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;z-index:10000;animation:fadeIn .25s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.tour-highlight{pointer-events:none;box-shadow:0 0 0 4px var(--accent),0 0 0 9999px #00000080;border-radius:12px;transition:all .3s ease}.tour-tooltip{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem;box-shadow:var(--shadow-lg);min-width:280px;max-width:380px;animation:tourTipIn .3s ease;color:var(--text)}@keyframes tourTipIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.tour-tooltip-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.tour-step-counter{font-size:.75rem;color:var(--text-muted);font-weight:600}.tour-close-btn{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:1rem;padding:0 .25rem;line-height:1}.tour-close-btn:hover{color:var(--text)}.tour-tooltip-title{font-size:1.05rem;font-weight:700;margin-bottom:.4rem;line-height:1.3}.tour-tooltip-body{font-size:.9rem;color:var(--text-muted);line-height:1.55;margin-bottom:1rem}.tour-tooltip-footer{display:flex;justify-content:space-between;align-items:center;gap:.75rem}.tour-nav-btn{padding:.45rem 1rem;font-size:.85rem;font-weight:600;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg);color:var(--text);cursor:pointer;font-family:var(--font);transition:all .15s}.tour-nav-btn:hover{background:var(--bg-slot)}.tour-nav-btn.tour-next{background:var(--accent);color:var(--text-inverse);border-color:var(--accent)}.tour-nav-btn.tour-next:hover{filter:brightness(1.1)}.app-footer{text-align:center;padding:1.5rem 0;font-size:.85rem;color:var(--text-muted);display:flex;justify-content:center;align-items:center;gap:.5rem}.app-footer a{color:var(--text-muted);text-decoration:none;transition:color .15s}.app-footer a:hover{color:var(--accent)}.footer-sep{opacity:.4}.level-progress{display:flex;flex-direction:column;gap:.5rem}.lp-row{display:flex;align-items:center;gap:.75rem;font-size:.82rem}.lp-label{width:6.5rem;text-align:right;color:var(--text-muted);font-weight:500;flex-shrink:0}.lp-track{flex:1;height:10px;background:var(--bg-slot);border-radius:99px;overflow:hidden}.lp-fill{height:100%;background:var(--accent);border-radius:99px;transition:width .4s ease,background .3s}.lp-row.met .lp-fill{background:var(--correct)}.lp-value{width:2.8rem;text-align:left;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums;flex-shrink:0}.lp-row.met .lp-value{color:var(--correct)}.compound-stems{margin-top:.75rem;padding:.75rem 1rem;background:var(--bg);border:1px dashed var(--border);border-radius:var(--radius-sm);font-size:.95rem;line-height:1.8;text-align:center;animation:fadeInUp .4s ease}