:root{--font-body: "Albert Sans", ui-sans-serif, system-ui;--font-display: "Newsreader", ui-serif, Georgia;--space-1: 6px;--space-2: 10px;--space-3: 14px;--space-4: 18px;--space-5: 24px;--space-6: 32px;--r-1: 12px;--r-2: 18px;--r-3: 28px;--shadow-1: 0 12px 28px rgba(0, 0, 0, .22);--shadow-2: 0 8px 18px rgba(0, 0, 0, .16);--shadow-3: 0 18px 46px rgba(0, 0, 0, .28);--ease-out: cubic-bezier(.2, .8, .2, 1);--ease-soft: cubic-bezier(.16, 1, .3, 1);font-family:var(--font-body);line-height:1.45;font-weight:450;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html[data-theme=dark]{--bg: #0b0d12;--bg2: #121625;--surface: rgba(255, 255, 255, .06);--surface2: rgba(255, 255, 255, .085);--text: rgba(255, 255, 255, .92);--muted: rgba(255, 255, 255, .65);--line: rgba(255, 255, 255, .12);--focus: #9cff57;--accent: #9cff57;--accent2: #ff5ea8;--danger: #ff4d4d;--shadow-color: rgba(0, 0, 0, .42);--card-glow-a: color-mix(in oklab, var(--text) 10%, transparent);--card-glow-b: color-mix(in oklab, var(--accent2) 10%, transparent)}html[data-theme=light]{--bg: #fbf8f1;--bg2: #f0efe8;--surface: rgba(10, 12, 18, .075);--surface2: rgba(10, 12, 18, .11);--text: rgba(10, 12, 18, .92);--muted: rgba(10, 12, 18, .62);--line: rgba(10, 12, 18, .16);--focus: #2a54ff;--accent: #2a54ff;--accent2: #ff2e7a;--danger: #c41616;--shadow-color: rgba(10, 12, 18, .14);--card-glow-a: color-mix(in oklab, var(--text) 4%, transparent);--card-glow-b: color-mix(in oklab, var(--accent2) 6%, transparent)}html{color-scheme:light dark}body{margin:0;min-width:320px;min-height:100vh;color:var(--text);background:radial-gradient(1200px 700px at 10% -10%,color-mix(in oklab,var(--accent) 28%,transparent),transparent 60%),radial-gradient(900px 600px at 100% 0%,color-mix(in oklab,var(--accent2) 24%,transparent),transparent 55%),radial-gradient(800px 520px at 55% 110%,color-mix(in oklab,var(--accent) 12%,transparent),transparent 60%),linear-gradient(180deg,var(--bg),var(--bg2))}body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.11;mix-blend-mode:overlay;background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.06),rgba(255,255,255,.06) 1px,transparent 1px,transparent 3px),repeating-linear-gradient(90deg,rgba(0,0,0,.06),rgba(0,0,0,.06) 1px,transparent 1px,transparent 4px)}::selection{background:color-mix(in oklab,var(--accent) 28%,transparent)}a{color:var(--text);text-decoration-color:color-mix(in oklab,var(--text) 30%,transparent);text-underline-offset:3px}a:hover{text-decoration-color:color-mix(in oklab,var(--accent) 70%,transparent)}*:focus-visible{outline:3px solid color-mix(in oklab,var(--focus) 70%,transparent);outline-offset:2px}.app{display:flex;min-height:100vh;flex-direction:column}.topbar{position:sticky;top:0;z-index:5;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:linear-gradient(180deg,color-mix(in oklab,var(--bg) 78%,transparent),color-mix(in oklab,var(--bg) 62%,transparent));border-bottom:1px solid var(--line)}.topbar__inner{max-width:1100px;margin:0 auto;padding:var(--space-4) var(--space-5);display:flex;align-items:center;gap:var(--space-4);justify-content:space-between}.brand{display:flex;align-items:center;gap:var(--space-3)}.brand__mark{width:42px;height:42px;border-radius:var(--r-2);background:radial-gradient(16px 16px at 30% 30%,color-mix(in oklab,var(--accent) 85%,transparent),transparent 70%),radial-gradient(22px 22px at 70% 60%,color-mix(in oklab,var(--accent2) 70%,transparent),transparent 65%),color-mix(in oklab,var(--surface2) 60%,transparent);border:1px solid var(--line);display:grid;place-items:center;font-family:var(--font-display);font-weight:650;letter-spacing:.04em;box-shadow:0 1px color-mix(in oklab,var(--text) 12%,transparent) inset,var(--shadow-2)}.brand__name{font-family:var(--font-display);font-size:22px;font-weight:650;letter-spacing:-.02em}.brand__tag{font-size:12px;color:var(--muted);margin-top:2px}.topnav{max-width:1100px;margin:0 auto;padding:0 var(--space-5) var(--space-3);display:flex;gap:var(--space-2)}.topnav__link{padding:10px 12px;border-radius:999px;border:1px solid transparent;background:transparent;color:var(--muted);font-weight:600;font-size:13px;transition:background .16s var(--ease-out),border-color .16s var(--ease-out),color .16s var(--ease-out),transform .16s var(--ease-out)}.topnav__link:hover{color:color-mix(in oklab,var(--text) 88%,var(--muted));background:color-mix(in oklab,var(--surface2) 42%,transparent);border-color:color-mix(in oklab,var(--line) 60%,transparent);transform:translateY(-.5px)}.topnav__link.is-active{color:var(--text);background:color-mix(in oklab,var(--surface2) 70%,transparent);border-color:var(--line);box-shadow:0 1px color-mix(in oklab,var(--text) 12%,transparent) inset}.themeToggle{display:inline-flex;align-items:center;gap:var(--space-2);padding:10px 12px;border-radius:999px;border:1px solid var(--line);background:color-mix(in oklab,var(--surface2) 65%,transparent);color:var(--text);cursor:pointer;transition:transform .14s var(--ease-out),background .16s var(--ease-out),border-color .16s var(--ease-out)}.themeToggle:hover{background:color-mix(in oklab,var(--surface2) 78%,transparent);border-color:color-mix(in oklab,var(--line) 75%,transparent)}.themeToggle:active{transform:translateY(1px)}.themeToggle__dot{width:10px;height:10px;border-radius:999px;background:var(--accent);box-shadow:0 0 0 6px color-mix(in oklab,var(--accent) 18%,transparent)}.themeToggle__label{font-weight:650;font-size:12px;letter-spacing:.02em}.content{width:100%;max-width:1100px;margin:0 auto;padding:var(--space-5);padding-bottom:calc(90px + env(safe-area-inset-bottom))}.bottomnav{position:fixed;left:50%;transform:translate(-50%);bottom:calc(12px + env(safe-area-inset-bottom));width:min(520px,calc(100% - 24px));display:none;gap:8px;padding:10px;border-radius:999px;border:1px solid var(--line);background:color-mix(in oklab,var(--bg) 60%,transparent);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 18px 44px var(--shadow-color)}.bottomnav__link{flex:1;min-height:44px;display:flex;align-items:center;justify-content:center;text-align:center;padding:10px;border-radius:999px;color:var(--muted);font-weight:700;font-size:12px;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:background .16s var(--ease-out),color .16s var(--ease-out),transform .16s var(--ease-out)}.bottomnav__link:hover{background:color-mix(in oklab,var(--surface2) 38%,transparent);color:color-mix(in oklab,var(--text) 86%,var(--muted));transform:translateY(-.5px)}.bottomnav__link.is-active{color:var(--text);background:color-mix(in oklab,var(--surface2) 70%,transparent);box-shadow:0 1px color-mix(in oklab,var(--text) 12%,transparent) inset,0 0 0 1px color-mix(in oklab,var(--line) 40%,transparent)}.page{display:flex;flex-direction:column;gap:var(--space-5);animation:pageIn .42s var(--ease-soft) both}@keyframes pageIn{0%{opacity:0;transform:translateY(10px);filter:blur(2px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}.page__header{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-5)}.h1{font-family:var(--font-display);font-size:32px;margin:0;letter-spacing:-.03em}.h2{font-family:var(--font-display);font-size:20px;margin:0 0 var(--space-2);letter-spacing:-.02em}.subtle{color:var(--muted);margin:6px 0 0}.row{display:flex;align-items:center;gap:var(--space-3)}.spacer{flex:1}.card{position:relative;overflow:hidden;border-radius:var(--r-3);border:1px solid var(--line);padding:var(--space-5);box-shadow:var(--shadow-2);transition:transform .22s var(--ease-soft),box-shadow .22s var(--ease-soft),border-color .22s var(--ease-soft)}.card:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(900px 240px at 20% 0%,var(--card-glow-a),transparent 55%),radial-gradient(800px 260px at 85% 0%,var(--card-glow-b),transparent 60%);opacity:.55}.card:after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;box-shadow:0 1px color-mix(in oklab,var(--text) 12%,transparent) inset;opacity:.9}@media(hover:hover){.card:hover{transform:translateY(-1px);box-shadow:var(--shadow-3);border-color:color-mix(in oklab,var(--line) 80%,transparent)}}.card--surface{background:color-mix(in oklab,var(--surface2) 78%,transparent)}.card--soft{background:color-mix(in oklab,var(--surface) 78%,transparent);box-shadow:none}.card--outline{background:transparent;box-shadow:none}.btn{border:1px solid var(--line);border-radius:999px;font-family:var(--font-body);font-weight:750;letter-spacing:.02em;cursor:pointer;transition:transform .14s var(--ease-out),background .14s var(--ease-out),border-color .14s var(--ease-out)}.btn:hover{border-color:color-mix(in oklab,var(--line) 78%,transparent)}.btn:active{transform:translateY(1px)}.btn:disabled{cursor:not-allowed;opacity:.62;filter:saturate(.9)}.btn--md{padding:12px 14px;font-size:13px}.btn--sm{padding:10px 12px;font-size:12px}.btn--primary{background:color-mix(in oklab,var(--accent) 22%,var(--surface2));border-color:color-mix(in oklab,var(--accent) 30%,var(--line));color:var(--text);box-shadow:0 0 0 1px color-mix(in oklab,var(--accent) 12%,transparent) inset}.btn--secondary{background:color-mix(in oklab,var(--surface2) 70%,transparent);color:var(--text)}.btn--ghost{background:transparent;color:var(--text)}.btn--danger{background:color-mix(in oklab,var(--danger) 18%,var(--surface2));border-color:color-mix(in oklab,var(--danger) 35%,var(--line));color:var(--text)}.progress{height:12px;border-radius:999px;background:color-mix(in oklab,var(--surface) 75%,transparent);border:1px solid var(--line);overflow:hidden}.progress__bar{height:100%;background:linear-gradient(90deg,var(--accent),color-mix(in oklab,var(--accent2) 70%,var(--accent)));border-radius:999px;transition:width .22s var(--ease-out)}.goal{display:grid;justify-items:end;gap:2px}.goal__label{font-size:12px;color:var(--muted)}.goal__value{font-family:var(--font-display);font-size:18px;font-weight:650}.learnCard__top{display:flex;align-items:flex-start;gap:var(--space-4);justify-content:space-between}.wordRow{display:flex;align-items:baseline;gap:var(--space-3);flex-wrap:wrap}.word{font-family:var(--font-display);font-size:34px;letter-spacing:-.03em}.phonetic{color:var(--muted);font-size:14px}.tags{margin-top:var(--space-2);display:flex;gap:8px;flex-wrap:wrap}.tag{font-size:12px;padding:6px 10px;border-radius:999px;border:1px solid var(--line);background:color-mix(in oklab,var(--surface) 65%,transparent);color:var(--muted);transition:background .16s var(--ease-out),border-color .16s var(--ease-out),color .16s var(--ease-out)}.tag:hover{background:color-mix(in oklab,var(--surface2) 55%,transparent);border-color:color-mix(in oklab,var(--line) 75%,transparent);color:color-mix(in oklab,var(--text) 76%,var(--muted))}.pill{border:1px solid var(--line);padding:8px 12px;border-radius:999px;font-weight:800;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}.pill--mastered{color:color-mix(in oklab,var(--accent) 70%,var(--text));border-color:color-mix(in oklab,var(--accent) 35%,var(--line))}.pill--learning{color:color-mix(in oklab,var(--accent2) 70%,var(--text));border-color:color-mix(in oklab,var(--accent2) 35%,var(--line))}.reveal__toggle{border:1px solid var(--line);background:color-mix(in oklab,var(--surface2) 40%,transparent);color:var(--text);padding:10px 12px;border-radius:var(--r-2);cursor:pointer;font-weight:700;transition:transform .16s var(--ease-out),background .16s var(--ease-out),border-color .16s var(--ease-out)}.reveal__toggle:hover{background:color-mix(in oklab,var(--surface2) 62%,transparent);border-color:color-mix(in oklab,var(--line) 80%,transparent)}.meaning{margin-top:var(--space-4);display:grid;gap:var(--space-2);animation:fadeUp .26s var(--ease-soft) both}.meaning__main{font-size:16px;font-weight:650}.meaning__ex{color:var(--muted);border-left:3px solid color-mix(in oklab,var(--accent) 40%,var(--line));padding-left:12px}.learnCard__actions{margin-top:var(--space-5);display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}.seg{display:inline-flex;padding:6px;border-radius:999px;border:1px solid var(--line);background:color-mix(in oklab,var(--surface) 70%,transparent)}.seg__btn{border:1px solid transparent;background:transparent;padding:10px 12px;border-radius:999px;color:var(--muted);font-weight:750;cursor:pointer;font-size:12px;transition:background .16s var(--ease-out),color .16s var(--ease-out),transform .16s var(--ease-out)}.seg__btn:hover{background:color-mix(in oklab,var(--surface2) 40%,transparent);color:color-mix(in oklab,var(--text) 86%,var(--muted));transform:translateY(-.5px)}.seg__btn.is-active{color:var(--text);background:color-mix(in oklab,var(--surface2) 70%,transparent);border-color:var(--line)}.quizPrompt{font-family:var(--font-display);font-size:34px;letter-spacing:-.03em;margin-bottom:var(--space-4)}.options{display:grid;gap:var(--space-2)}.option{text-align:left;padding:12px 14px;border-radius:var(--r-2);border:1px solid var(--line);background:color-mix(in oklab,var(--surface) 70%,transparent);color:var(--text);font-weight:650;cursor:pointer;transition:transform .16s var(--ease-out),background .16s var(--ease-out),border-color .16s var(--ease-out)}.option:hover{transform:translateY(-1px);background:color-mix(in oklab,var(--surface2) 62%,transparent);border-color:color-mix(in oklab,var(--line) 80%,transparent)}.option:disabled{cursor:not-allowed;opacity:.95}.option.is-correct{border-color:color-mix(in oklab,var(--accent) 40%,var(--line));background:color-mix(in oklab,var(--accent) 12%,var(--surface2))}.option.is-wrong{border-color:color-mix(in oklab,var(--danger) 40%,var(--line));background:color-mix(in oklab,var(--danger) 10%,var(--surface2))}.quizCard__meta{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);margin-bottom:var(--space-4)}.quizCard__actions{margin-top:var(--space-4);display:flex;justify-content:flex-end}.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4)}.stat__label{color:var(--muted);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}.stat__value{font-family:var(--font-display);font-size:42px;letter-spacing:-.03em;margin-top:6px}.stat__unit{font-size:18px;margin-left:4px;color:var(--muted)}.stat__hint{margin-top:6px;color:var(--muted)}.field{display:grid;gap:8px}.field__label{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}.input,.select{border-radius:var(--r-2);border:1px solid var(--line);padding:12px;background:color-mix(in oklab,var(--surface) 70%,transparent);color:var(--text);font:inherit;transition:border-color .16s var(--ease-out),background .16s var(--ease-out),transform .16s var(--ease-out)}.input::placeholder{color:color-mix(in oklab,var(--muted) 85%,transparent)}.input:hover,.select:hover{background:color-mix(in oklab,var(--surface2) 55%,transparent);border-color:color-mix(in oklab,var(--line) 80%,transparent)}.file{position:relative;overflow:hidden}.file input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}.file__btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:999px;padding:10px 12px;font-weight:750;font-size:12px;background:color-mix(in oklab,var(--surface2) 70%,transparent)}.details{margin-top:var(--space-4)}.code{margin:var(--space-3) 0 0;padding:var(--space-4);border-radius:var(--r-2);border:1px solid var(--line);background:color-mix(in oklab,var(--bg) 85%,transparent);overflow:auto;max-height:280px;font-size:12px;color:var(--muted)}.notice,.error{display:flex;align-items:baseline;gap:10px;margin-top:var(--space-2);padding:10px 12px;border-radius:var(--r-2);border:1px solid var(--line);background:color-mix(in oklab,var(--surface2) 65%,transparent);font-size:12px;font-weight:650;animation:fadeUp .24s var(--ease-soft) both}.notice:before,.error:before{content:"";width:8px;height:8px;border-radius:999px;background:var(--notice-accent, var(--danger));box-shadow:0 0 0 6px color-mix(in oklab,var(--notice-accent, var(--danger)) 18%,transparent);transform:translateY(-1px)}.notice{color:var(--muted);--notice-accent: var(--accent)}.notice--info{--notice-accent: var(--accent)}.notice--ok{--notice-accent: var(--accent);color:color-mix(in oklab,var(--accent) 75%,var(--text))}.notice--error,.error{--notice-accent: var(--danger);color:color-mix(in oklab,var(--danger) 80%,var(--text))}.diag{margin-top:var(--space-3);padding:var(--space-4);border-radius:var(--r-2);border:1px solid var(--line);background:color-mix(in oklab,var(--bg) 85%,transparent);display:grid;gap:var(--space-2);font-size:12px;color:var(--muted)}@keyframes fadeUp{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.diag__row{display:grid;grid-template-columns:90px 1fr;gap:var(--space-3);align-items:start}.diag__k{font-size:11px;font-weight:850;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}.diag__v{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;color:color-mix(in oklab,var(--text) 80%,var(--muted));word-break:break-word}.diag__meta{margin-left:8px;color:var(--muted)}.feedback{color:var(--muted);font-weight:650}.feedback.is-ok{color:color-mix(in oklab,var(--accent) 75%,var(--text))}.feedback.is-bad{color:color-mix(in oklab,var(--danger) 75%,var(--text))}@media(max-width:760px){.topnav{display:none}.bottomnav{display:flex}.content{padding:var(--space-4);padding-bottom:calc(110px + env(safe-area-inset-bottom))}.grid2{grid-template-columns:1fr}.page__header{align-items:flex-start;flex-direction:column}}@media(prefers-reduced-motion:reduce){*{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important;scroll-behavior:auto!important}}