:root{--surface-1: var(--neutral-0);--surface-2: var(--neutral-50);--surface-3: var(--neutral-100);--fg-1: var(--neutral-900);--fg-2: var(--neutral-600);--fg-3: var(--neutral-500);--fg-4: var(--neutral-400);--border: var(--neutral-200);--border-strong: var(--neutral-300);--link: var(--accent-500);--link-hover: var(--accent-600);--tip-bg: #E8ECFF;--tip-fg: #3942A8;--note-bg: #F4F4F4;--note-fg: #525252;--warn-bg: #FBEFD9;--warn-fg: #8A4A14;--danger-bg: #FBE6E6;--danger-fg: #B43E3E;--success-bg: #E6F4EB;--success-fg: #2D8A4E;--font-sans: "Inter Tight", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--fs-xs: 12px;--fs-sm: 14px;--fs-md: 18px;--fs-lg: 22px;--fs-xl: 28px;--fw-medium: 500;--fw-semibold: 600;--lh-snug: 1.3;--lh-normal: 1.5;--lh-relaxed: 1.65;--ls-tight: -.02em;--ls-wide: .02em;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 24px;--space-6: 32px;--space-8: 64px;--radius-full: 999px;--width-content: 1100px;--ease-out: cubic-bezier(.2, 0, 0, 1);--dur-fast: .12s}[data-theme=dark]{--surface-1: #0F0F10;--surface-2: #18181A;--surface-3: #1F1F22;--fg-1: #EDEDED;--fg-2: #A8A8A8;--fg-3: #767676;--fg-4: #525252;--border: #1F1F22;--border-strong: #2E2E2E;--accent-500: #4FB070;--accent-600: #3FA060;--link: var(--accent-500);--link-hover: var(--accent-300);--tip-bg: #1F2747;--tip-fg: #A6B0FF;--note-bg: #1F1F22;--note-fg: #A8A8A8;--warn-bg: #3A2C18;--warn-fg: #E8B547;--danger-bg: #3A1F1F;--danger-fg: #E36868;--success-bg: #1A2E22;--success-fg: #5BB07A}*{box-sizing:border-box}[hidden]{display:none!important}html,body{height:100%;margin:0;background:var(--bg);color:var(--fg-1);overflow:hidden}body{height:100dvh;display:flex;flex-direction:column}.app-header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--surface-1) 78%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}.app-header-inner{max-width:var(--width-content);margin:0 auto;padding:8px var(--space-5);display:flex;align-items:center;justify-content:space-between;gap:var(--space-5)}.app-brand{display:inline-flex;align-items:center;gap:var(--space-3);text-decoration:none;color:var(--fg-1)}.app-brand:hover{text-decoration:none}.app-brand-logo{display:block;height:20px;width:auto}.app-brand-logo-dark{display:none}:root[data-theme=dark] .app-brand-logo-light{display:none}:root[data-theme=dark] .app-brand-logo-dark{display:block}.app-header-nav{display:inline-flex;align-items:center;gap:var(--space-2)}.app-link{background:transparent;border:0;font:inherit;font-size:var(--fs-sm);color:var(--fg-2);padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);cursor:pointer;transition:color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out)}.app-link:hover{color:var(--fg-1);background:var(--surface-2)}.app-link-quiet{padding:0;font-size:var(--fs-sm)}.app-link-quiet:hover{background:transparent;text-decoration:underline;text-underline-offset:2px}.app-theme-toggle{background:transparent;border:1px solid var(--border);border-radius:var(--radius-md);width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;color:var(--fg-2);cursor:pointer;transition:color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}.app-theme-toggle:hover{color:var(--fg-1);border-color:var(--border-strong)}.app-theme-icon{display:none}.app-theme-icon-light{display:inline-flex}:root[data-theme=dark] .app-theme-icon-light{display:none}:root[data-theme=dark] .app-theme-icon-dark{display:inline-flex}.app-main{flex:1;width:100%;max-width:var(--width-content);margin:0 auto;padding:var(--space-5) var(--space-5) var(--space-8);display:flex;flex-direction:column;min-height:0;overflow:hidden}.app-hero{margin-bottom:var(--space-4);max-width:980px}.app-hero h1{font-size:clamp(var(--fs-lg),2vw,var(--fs-xl));line-height:var(--lh-snug);letter-spacing:0;font-weight:var(--fw-semibold);margin:0;text-wrap:balance}.app-workspace{display:flex;flex-direction:column;gap:var(--space-4);flex:1;min-height:0}.app-filter{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface-1)}.app-filter select:nth-of-type(1){grid-column:1}.app-filter select:nth-of-type(2){grid-column:2}#reset-filters{grid-column:3;align-self:center}.app-field{display:flex;flex-direction:column;gap:4px;min-width:0}.app-filter .app-field label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.app-field label{font-size:var(--fs-xs);letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--fg-3);font-weight:var(--fw-medium)}.app-filter select,.app-field select,.app-field input[type=search],.app-field input[type=text],.app-field textarea{width:100%;font:inherit;font-size:var(--fs-sm);color:var(--fg-1);background:var(--surface-3);border:1px solid var(--border);border-radius:var(--radius-md);padding:0 var(--space-3);height:32px;transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out);appearance:none;-webkit-appearance:none}.app-field textarea{height:auto;padding:var(--space-3);font-family:var(--font-mono);line-height:var(--lh-normal);resize:vertical;min-height:160px}.app-filter select,.app-field select{background-image:linear-gradient(45deg,transparent 50%,var(--fg-3) 50%),linear-gradient(135deg,var(--fg-3) 50%,transparent 50%);background-position:calc(100% - 14px) 14px,calc(100% - 9px) 14px;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:var(--space-6)}.app-field select:focus,.app-filter select:focus,.app-field input:focus,.app-field textarea:focus{outline:none;border-color:var(--accent-500);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent-500) 18%,transparent)}.app-filter-summary{display:none;font-size:var(--fs-xs);color:var(--fg-3);line-height:var(--lh-normal);margin:0;padding-top:var(--space-3);border-top:1px solid var(--border)}.app-filter-summary strong{font-family:var(--font-mono);color:var(--fg-1);font-weight:var(--fw-semibold)}.practice-filter-note{display:block;margin-top:6px;color:var(--fg-4)}.app-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);font:inherit;font-size:var(--fs-sm);font-weight:var(--fw-medium);height:36px;padding:0 var(--space-4);border-radius:var(--radius-md);border:1px solid transparent;cursor:pointer;transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),opacity var(--dur-fast) var(--ease-out)}.app-btn:active{transform:scale(.985)}.app-btn:disabled{opacity:.45;cursor:not-allowed}.app-btn-primary{background:var(--accent-500);color:var(--neutral-0);border-color:var(--accent-500)}.app-btn-primary:hover:not(:disabled){background:var(--accent-600);border-color:var(--accent-600)}.app-btn-ghost{background:transparent;color:var(--fg-1);border-color:var(--border)}.app-btn-ghost:hover:not(:disabled){background:var(--surface-2);border-color:var(--border-strong)}.app-stage{display:flex;flex-direction:column;flex:1;min-height:0;padding:0;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface-1);overflow:hidden}.question-stage{display:flex;flex-direction:column;gap:var(--space-5);flex:1;min-height:0;overflow-y:auto;padding:var(--space-5)}.app-stage-head{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:var(--space-3);padding:var(--space-5);border-bottom:1px solid var(--border);flex-shrink:0}.app-stage-head-left{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-3)}.app-stage-counter{font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--fg-3);margin:0}.app-question-status{font-family:var(--font-mono);font-size:var(--fs-xs);font-weight:var(--fw-semibold);letter-spacing:var(--ls-wide);padding:2px var(--space-3);border-radius:var(--radius-full);border:1px solid transparent}.app-question-status--unseen{color:var(--fg-3);background:var(--surface-3);border-color:var(--border)}.app-question-status--mastered{color:var(--success-fg);background:var(--success-bg)}.app-question-status--review{color:var(--warn-fg);background:var(--warn-bg)}.app-timer{justify-self:end;font-family:var(--font-mono);font-size:var(--fs-xs);font-weight:var(--fw-semibold);letter-spacing:var(--ls-wide);color:var(--fg-2);background:var(--surface-3);border:1px solid var(--border);border-radius:var(--radius-full);padding:2px var(--space-3);font-variant-numeric:tabular-nums}.app-timer--low{color:var(--warn-fg);background:var(--warn-bg)}.app-timer--expired{color:var(--danger-fg);background:var(--danger-bg)}.app-badges{display:inline-flex;flex-wrap:wrap;gap:var(--space-2)}.practice-badge{display:inline-flex;align-items:center;font-family:var(--font-sans);font-size:var(--fs-xs);font-weight:var(--fw-medium);color:var(--fg-2);background:var(--surface-3);border:1px solid var(--border);border-radius:var(--radius-full);padding:2px var(--space-3);line-height:1.4}.practice-badge-strong{color:var(--accent-700);background:var(--accent-100);border-color:color-mix(in srgb,var(--accent-500) 30%,transparent)}:root[data-theme=dark] .practice-badge-strong{color:var(--accent-300);background:color-mix(in srgb,var(--accent-700) 35%,transparent);border-color:color-mix(in srgb,var(--accent-500) 40%,transparent)}.practice-badge-review{color:var(--warn-fg);background:var(--warn-bg);border-color:color-mix(in srgb,var(--warn-fg) 30%,transparent)}.app-question{margin:0}.app-meta{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--fg-3);letter-spacing:var(--ls-wide);text-transform:uppercase;margin:0 0 var(--space-3)}.app-question h2{font-size:var(--fs-xl);line-height:var(--lh-snug);letter-spacing:var(--ls-tight);font-weight:var(--fw-semibold);margin:0 0 var(--space-4);text-wrap:pretty}.app-callout{border-left:2px solid var(--border-strong);background:var(--note-bg);color:var(--note-fg);padding:var(--space-4) var(--space-5);border-radius:var(--radius-md);font-size:var(--fs-sm);line-height:var(--lh-relaxed);margin:var(--space-4) 0 0;white-space:pre-wrap}.app-answer{display:flex;flex-direction:column;gap:var(--space-4)}.app-options{display:flex;flex-direction:column;gap:var(--space-2)}.practice-option{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--space-3);padding:var(--space-4);border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface-1);cursor:pointer;transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}.practice-option:hover{background:var(--surface-2)}.practice-option:focus-within{outline:none;border-color:var(--accent-500);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent-500) 18%,transparent)}.practice-option input[type=radio]{position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}.practice-option:has(input:checked){border-color:var(--accent-500);background:color-mix(in srgb,var(--accent-100) 80%,transparent)}:root[data-theme=dark] .practice-option:has(input:checked){background:color-mix(in srgb,var(--accent-700) 25%,transparent)}.practice-option.is-disabled{cursor:default}.practice-option.is-disabled:hover{background:var(--surface-1)}.practice-option.is-correct{border-color:color-mix(in srgb,var(--success-fg) 45%,var(--border));background:var(--success-bg)}.practice-option.is-correct:hover{background:var(--success-bg)}.practice-option.is-incorrect{border-color:color-mix(in srgb,var(--danger-fg) 45%,var(--border));background:var(--danger-bg)}.practice-option.is-incorrect:hover{background:var(--danger-bg)}.practice-option-copy{display:inline-flex;align-items:center;min-width:0;font-size:var(--fs-md);line-height:var(--lh-relaxed);color:var(--fg-1)}.practice-option-text{min-width:0}.practice-option-shortcut{min-width:28px;height:24px;display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:var(--fs-xs);font-weight:var(--fw-semibold);line-height:1;color:var(--fg-3);background:var(--surface-3);border:1px solid var(--border);border-radius:6px;box-shadow:inset 0 -1px color-mix(in srgb,var(--border-strong) 70%,transparent)}.practice-option:has(input:checked) .practice-option-shortcut{color:var(--accent-700);border-color:color-mix(in srgb,var(--accent-500) 38%,var(--border))}:root[data-theme=dark] .practice-option:has(input:checked) .practice-option-shortcut{color:var(--accent-300)}.app-feedback{border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-5);background:var(--surface-1);display:flex;flex-direction:column;gap:var(--space-4)}.practice-feedback-status{display:inline-flex;align-items:center;align-self:flex-start;font-size:var(--fs-xs);font-weight:var(--fw-semibold);letter-spacing:var(--ls-wide);text-transform:uppercase;padding:4px var(--space-3);border-radius:var(--radius-full)}.practice-feedback-status-correct{color:var(--success-fg);background:var(--success-bg)}.practice-feedback-status-incorrect{color:var(--danger-fg);background:var(--danger-bg)}.practice-feedback-status-neutral{color:var(--tip-fg);background:var(--tip-bg)}.practice-reference{font-size:var(--fs-md);line-height:var(--lh-relaxed);color:var(--fg-1);padding:var(--space-4);background:var(--surface-3);border-radius:var(--radius-md);border:1px solid var(--border)}.practice-reference strong{display:inline-block;font-size:var(--fs-xs);letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--fg-3);font-weight:var(--fw-semibold);margin-bottom:var(--space-2)}.practice-reference p{margin:0}.practice-reference p+p{margin-top:var(--space-2)}.practice-reference-label{font-weight:var(--fw-semibold);color:var(--fg-2)}.app-feedback p{font-size:var(--fs-md);line-height:var(--lh-relaxed);color:var(--fg-1);margin:0}.app-empty{padding:var(--space-5);overflow-y:auto;text-align:left}.app-empty h3{font-size:var(--fs-xl);font-weight:var(--fw-semibold);letter-spacing:var(--ls-tight);margin:0 0 var(--space-3)}.app-empty p{color:var(--fg-2);margin:0}.app-pager{position:relative;z-index:20;flex-shrink:0;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-5);border-top:1px solid var(--border);margin:0;background:color-mix(in srgb,var(--surface-1) 92%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:0 0 var(--radius-lg) var(--radius-lg)}.app-pager-btn{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius-md);font:inherit;font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--fg-2);min-width:116px;height:38px;padding:0 var(--space-4);cursor:pointer;transition:color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}.app-pager-btn:first-child{grid-column:1;justify-self:start}.app-pager-btn:last-child{grid-column:3;justify-self:end}.app-pager-btn:hover:not(:disabled){color:var(--fg-1);background:var(--surface-2);border-color:var(--border-strong)}.app-pager-btn:last-child{background:var(--accent-500);border-color:var(--accent-500);color:var(--neutral-0)}.app-pager-btn:last-child:hover:not(:disabled){background:var(--accent-600);border-color:var(--accent-600);color:var(--neutral-0)}.app-pager-btn:disabled{opacity:.35;cursor:not-allowed}.app-pager-link{grid-column:2;justify-self:center;white-space:nowrap;background:transparent;border:0;font:inherit;font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--fg-2);padding:var(--space-2) var(--space-3);cursor:pointer;transition:color var(--dur-fast) var(--ease-out)}.app-pager-link:hover{color:var(--fg-1)}@media(max-width:420px){.app-pager-btn{min-width:104px}.app-pager-link{font-size:var(--fs-xs);padding-inline:var(--space-2)}}
