.theme-selector{position:fixed;top:16px;right:16px;display:inline-flex;flex-direction:column;gap:4px;background:transparent;padding:0;z-index:1000;transition:transform .2s ease,opacity .2s ease}.theme-selector.hidden{transform:translateY(-48px);opacity:0;pointer-events:none}.theme-selector.expanded{background:var(--canvas-default);border:1px solid var(--border-default);border-radius:24px;padding:4px;box-shadow:var(--shadow-medium)}.theme-toggle-btn{background:var(--canvas-subtle);border:1px solid var(--border-default);border-radius:50%;width:36px;height:36px;cursor:pointer;font-size:16px;transition:all .2s ease;display:flex;align-items:center;justify-content:center;padding:0;line-height:1;position:relative;flex-shrink:0;box-shadow:var(--shadow-small)}.theme-toggle-btn:hover{background:var(--button-bg-hover);border-color:var(--button-border-hover);transform:scale(1.1)}.theme-toggle-btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--keyboard-hint-bg)}.theme-selector.expanded .theme-toggle-btn{display:none}.theme-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--text-primary)}.theme-icon svg,.theme-btn svg{display:block;width:18px;height:18px}.theme-options{display:none;flex-direction:column;gap:4px;max-height:200px;transition:all .15s ease}.theme-selector.expanded .theme-options{display:flex}.theme-btn{background:transparent;border:none;border-radius:50%;width:36px;height:36px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;padding:0;color:var(--text-secondary)}.theme-btn:hover{background:var(--button-bg-hover);color:var(--text-primary)}.theme-btn.active{background:var(--accent-fg);color:var(--white);box-shadow:var(--shadow-small)}.theme-btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--keyboard-hint-bg)}@media(max-width:600px){.theme-selector{opacity:1;pointer-events:auto;flex-direction:column;background:transparent;padding:0}.theme-toggle-btn{opacity:1}.theme-options{display:none;flex-direction:column}.theme-selector.expanded .theme-options{display:flex;flex-direction:column}}.levels-container{width:100%}.level-category{margin-bottom:24px}.category-header{font-size:13px;font-weight:600;color:var(--text-secondary);margin-bottom:12px;display:flex;align-items:center;gap:8px;text-transform:uppercase;letter-spacing:.5px}.category-icon{font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;font-size:14px;color:var(--accent-fg)}.levels-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;width:100%}.level-btn{padding:16px;background:var(--canvas-subtle);border:1px solid var(--border-default);border-radius:6px;color:var(--text-primary);cursor:pointer;transition:background .15s ease,border-color .15s ease,box-shadow .2s ease,transform .15s ease;text-align:left;box-shadow:var(--shadow-small);opacity:0;animation:cardFadeIn .3s ease forwards}@keyframes cardFadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.level-btn:hover{background:var(--button-bg-hover);border-color:var(--button-border-hover);box-shadow:var(--shadow-hover);transform:translateY(-2px)}.level-btn:focus-visible{outline:none;box-shadow:var(--shadow-hover),0 0 0 3px var(--keyboard-hint-bg)}.level-btn:active{transform:scale(.98);box-shadow:var(--shadow-small)}.level-num{font-size:12px;font-weight:600;color:var(--text-secondary);margin-bottom:4px;text-transform:uppercase;letter-spacing:.5px}.level-name{font-size:14px;font-weight:600;margin-bottom:4px;color:var(--text-primary)}.level-desc{font-size:12px;color:var(--text-secondary);line-height:1.4}.level-btn.has-history{border-left:3px solid var(--accent-fg)}.level-progress{display:flex;align-items:center;gap:8px;margin-top:8px}.progress-bar{flex:1;height:4px;background:var(--border-muted);border-radius:2px;overflow:hidden}.progress-fill{height:100%;background:var(--success-fg);border-radius:2px;transition:width .3s ease}.progress-count{font-size:11px;font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;color:var(--text-tertiary);white-space:nowrap}@media(max-width:600px){.levels-grid{grid-template-columns:1fr;gap:12px}.level-btn{padding:14px}}.question-area{display:flex;flex-direction:column;align-items:center;width:100%;background:var(--canvas-default);border-radius:12px;padding:32px 24px;box-shadow:var(--shadow-medium);position:relative}.question-area.touch-enabled{cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation}.question-area.reviewing{opacity:.7}.difficulty{font-size:12px;color:var(--text-secondary);margin-bottom:48px;text-align:center;font-weight:500;text-transform:uppercase;letter-spacing:.5px}.difficulty.reviewing{color:var(--primary-color);font-weight:600}.tip-container{position:absolute;top:16px;right:16px;display:flex;flex-direction:column;align-items:flex-end;z-index:10;max-width:80%}.tip-toggle{background:var(--canvas-subtle);border:1px solid var(--border-default);width:36px;height:36px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;transition:all .2s ease;box-shadow:var(--shadow-small)}.tip-toggle:hover{background:var(--button-bg-hover);transform:scale(1.1)}.tip-container.active .tip-toggle{background:var(--accent-fg);border-color:var(--accent-emphasis);transform:rotate(15deg)}.tip-content{margin-top:8px;padding:12px 16px;background:var(--canvas-default);border:1px solid var(--accent-fg);border-radius:8px;font-size:13px;line-height:1.5;color:var(--text-primary);box-shadow:var(--shadow-medium);animation:slideDown .2s ease-out;max-width:280px;text-align:right}@keyframes slideDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.question{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:48px;width:min(480px,100%);min-height:120px;text-align:center;flex-wrap:wrap;animation:slideIn .25s cubic-bezier(.4,0,.2,1)}@keyframes slideIn{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}.display{font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;font-size:48px;font-weight:500;color:var(--text-primary);letter-spacing:-1px}sup{font-size:.55em;vertical-align:super}.answer-slot{position:relative;display:inline-flex;align-items:center;justify-content:center}.answer{font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;font-size:48px;font-weight:500;color:var(--answer-color);letter-spacing:-1px;animation:revealAnswer .35s cubic-bezier(.34,1.56,.64,1)}.answer-hidden{visibility:hidden;animation:none}@keyframes revealAnswer{0%{opacity:0;transform:scale(.8);filter:blur(4px)}60%{opacity:1;transform:scale(1.05);filter:blur(0)}to{opacity:1;transform:scale(1);filter:blur(0)}}.hint-text{position:absolute;font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;font-size:48px;font-weight:500;color:var(--text-tertiary);letter-spacing:-1px}.action-placeholder{height:48px;display:flex;align-items:center;justify-content:center;margin-bottom:48px}.show-hint{font-size:13px;color:var(--text-secondary);margin:0}.speed-indicator{font-size:14px;font-weight:600;color:var(--text-tertiary);margin-right:12px;background:var(--canvas-subtle);padding:4px 8px;border-radius:4px;font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;display:flex;align-items:center;gap:6px}.speed-indicator.is-pb{color:var(--success-fg);background:var(--success-bg-subtle);border:1px solid var(--success-fg)}.pb-badge{font-size:10px;background:var(--success-fg);color:#fff;padding:1px 4px;border-radius:3px;font-weight:800}.btn-next{padding:10px 24px;font-size:14px;font-weight:500;color:var(--white);background:var(--primary-emphasis);border:none;border-radius:6px;cursor:pointer;transition:background .15s ease,transform .1s ease}.btn-next:hover{background:var(--primary-color)}.btn-next:active{transform:scale(.98)}.btn-next:focus-visible{outline:none;box-shadow:0 0 0 3px var(--keyboard-hint-bg)}.keyboard-hints{margin-top:32px;font-size:12px;color:var(--text-secondary);text-align:center;line-height:1.8}.keyboard-hints span{display:inline-block;font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;background:var(--canvas-subtle);border:1px solid var(--border-default);padding:2px 6px;border-radius:3px;font-size:11px;font-weight:500;margin:0 3px}@media(max-width:600px){.display,.answer{font-size:32px}.hint-text{font-size:28px}.difficulty{margin-bottom:32px}.action-placeholder{height:40px;margin-bottom:32px}.btn-next{padding:10px 20px;font-size:14px}.question{margin-bottom:32px;min-height:80px}}.milestone-toast{position:fixed;bottom:32px;left:50%;transform:translate(-50%);padding:12px 24px;background:var(--canvas-default);border:2px solid var(--accent-fg);color:var(--text-primary);border-radius:16px;box-shadow:var(--shadow-hover);display:flex;align-items:center;gap:16px;animation:toastSlideUp .3s cubic-bezier(.34,1.56,.64,1),toastFadeOut .3s ease-in 2.7s forwards;z-index:1000;min-width:240px}.milestone-icon{font-size:24px}.milestone-content{display:flex;flex-direction:column}.milestone-count{font-weight:700;font-size:16px;color:var(--accent-fg)}.milestone-message{font-size:13px;color:var(--text-secondary)}@keyframes toastSlideUp{0%{opacity:0;transform:translate(-50%) translateY(20px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@keyframes toastFadeOut{0%{opacity:1}to{opacity:0}}*{margin:0;padding:0;box-sizing:border-box}.skip-link{position:absolute;top:-100px;left:16px;padding:12px 20px;background:var(--primary-color);color:var(--white);font-weight:600;border-radius:8px;text-decoration:none;z-index:1000;transition:top .2s ease}.skip-link:focus{top:16px}:root[data-theme=light]{--canvas-default: #ffffff;--canvas-subtle: #f6f8fa;--canvas-inset: #f6f8fa;--fg-default: #1f2328;--fg-muted: #59636e;--fg-subtle: #6e7681;--border-default: #d1d9e0;--border-muted: #d8dee4;--accent-fg: #0969da;--accent-emphasis: #0550ae;--success-fg: #1a7f37;--danger-fg: #d1242f;--text-primary: var(--fg-default);--text-secondary: var(--fg-muted);--text-tertiary: var(--fg-subtle);--white: #ffffff;--button-bg: var(--canvas-subtle);--button-bg-hover: #e8ebef;--button-border: var(--border-default);--button-border-hover: #b8c0c8;--primary-color: var(--accent-fg);--primary-emphasis: var(--accent-emphasis);--answer-color: var(--success-fg);--keyboard-hint-bg: rgba(9, 105, 218, .1);--backdrop: rgba(0, 0, 0, .4);--streak-fg: #d35400;--streak-bg: rgba(211, 84, 0, .1);--success-bg-subtle: rgba(26, 127, 55, .1);--shadow-small: 0 1px 2px rgba(31, 35, 40, .04);--shadow-medium: 0 3px 6px rgba(31, 35, 40, .08), 0 2px 4px rgba(31, 35, 40, .06);--shadow-hover: 0 4px 12px rgba(31, 35, 40, .12)}:root[data-theme=dark]{--canvas-default: #22272e;--canvas-subtle: #2d333b;--canvas-inset: #1c2128;--fg-default: #adbac7;--fg-muted: #768390;--fg-subtle: #636e7b;--border-default: #444c56;--border-muted: #373e47;--accent-fg: #539bf5;--accent-emphasis: #316dca;--success-fg: #57ab5a;--danger-fg: #e5534b;--text-primary: var(--fg-default);--text-secondary: var(--fg-muted);--text-tertiary: var(--fg-subtle);--white: #ffffff;--button-bg: var(--canvas-subtle);--button-bg-hover: #373e47;--button-border: var(--border-default);--button-border-hover: #545d68;--primary-color: var(--accent-fg);--primary-emphasis: var(--accent-emphasis);--answer-color: var(--success-fg);--keyboard-hint-bg: rgba(83, 155, 245, .15);--backdrop: rgba(0, 0, 0, .7);--streak-fg: #ff8c00;--streak-bg: rgba(255, 140, 0, .2);--success-bg-subtle: rgba(87, 171, 90, .15);--shadow-small: 0 1px 2px rgba(0, 0, 0, .2);--shadow-medium: 0 3px 6px rgba(0, 0, 0, .3), 0 2px 4px rgba(0, 0, 0, .2);--shadow-hover: 0 4px 12px rgba(0, 0, 0, .3)}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Noto Sans,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";background:var(--canvas-default);min-height:100vh;display:flex;align-items:center;justify-content:center;color:var(--text-primary);transition:background-color .15s ease}.container{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;max-width:544px;padding:96px 24px 48px;min-height:100vh}#question-area{display:flex;flex-direction:column;width:100%}h1{font-size:24px;color:var(--text-primary);margin-bottom:8px;text-align:center;font-weight:600}.app-header{text-align:center;margin-bottom:24px}.logo{display:flex;align-items:center;justify-content:center;gap:12px}.logo h1{margin-bottom:0;font-size:24px}.logo-icon{font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;font-size:16px;font-weight:600;color:var(--accent-fg);background:var(--canvas-subtle);padding:8px 10px;border-radius:8px;border:1px solid var(--border-default);letter-spacing:1px}.tagline{font-size:14px;color:var(--text-secondary);margin-top:8px}.stats-bar{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--canvas-subtle);border:1px solid var(--border-muted);border-radius:8px;margin-bottom:24px}.total-cards{font-size:13px;color:var(--text-secondary)}.main-stats{display:flex;align-items:center;gap:12px}.streak-badge{font-size:13px;font-weight:600;color:var(--streak-fg);background:var(--streak-bg);padding:2px 8px;border-radius:12px;display:flex;align-items:center;gap:4px}.session-summary{position:fixed;inset:0;background:var(--backdrop);display:flex;align-items:center;justify-content:center;z-index:1500;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fadeIn .2s ease-out}.summary-content{background:var(--canvas-default);padding:32px;border-radius:16px;box-shadow:var(--shadow-hover);text-align:center;max-width:320px;width:90%;border:1px solid var(--border-default)}.summary-content h3{margin-bottom:24px;font-size:20px}.summary-stats{display:flex;justify-content:space-around;margin-bottom:32px}.stat{display:flex;flex-direction:column;gap:4px}.stat-value{font-size:24px;font-weight:700;color:var(--accent-fg);font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace}.stat-label{font-size:12px;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px}.summary-close{width:100%;padding:12px;background:var(--primary-emphasis);color:#fff;border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:background .2s ease}.summary-close:hover{background:var(--primary-color)}.header{width:100%;margin-bottom:32px}.header h1{margin-bottom:0;font-size:20px;text-align:center}.reset-history-btn{padding:6px 12px;font-size:12px;font-weight:500;color:var(--text-secondary);background:transparent;border:1px solid var(--border-muted);border-radius:6px;cursor:pointer;transition:background .15s ease,border-color .15s ease,transform .1s ease}.back-button{align-self:flex-start;margin-bottom:24px;padding:8px 16px;border-radius:6px;border:1px solid var(--button-border);background:var(--button-bg);color:var(--text-primary);font-size:14px;font-weight:500;cursor:pointer;transition:background .15s ease,border-color .15s ease}.back-button:hover{background:var(--button-bg-hover);border-color:var(--button-border-hover)}.back-button:active{transform:scale(.98)}.back-button:focus-visible{outline:none;box-shadow:0 0 0 3px var(--keyboard-hint-bg)}.reset-history-btn:hover:not(:disabled){background:var(--button-bg);border-color:var(--button-border);color:var(--text-primary)}.reset-history-btn:active:not(:disabled){transform:scale(.98)}.reset-history-btn:disabled{opacity:.5;cursor:not-allowed}.reset-history-btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--keyboard-hint-bg)}.back-button-fixed{position:fixed;top:16px;left:16px;z-index:900}@media(max-width:600px){.container{padding-top:80px;padding-left:16px;padding-right:16px}h1{font-size:20px}.header h1{font-size:18px}.subtitle{font-size:13px;margin-bottom:24px}}@media(min-width:769px){.container{padding-top:120px}.back-button-fixed{top:24px;left:24px}}
