*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{color-scheme:light;--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;--bg-canvas: #f6f8fa;--bg-surface: #ffffff;--bg-subtle: #f6f8fa;--bg-overlay: rgba(31, 35, 40, .45);--border-default: #d0d7de;--border-muted: #d8dee4;--text-primary: #1f2328;--text-secondary: #59636e;--text-muted: #6e7781;--accent: #0969da;--accent-hover: #0550ae;--accent-subtle: #ddf4ff;--success: #1a7f37;--danger: #cf222e;--danger-subtle: #ffebe9;--map-bg: #f6f8fa;--radius-sm: 6px;--radius-md: 8px;--radius-lg: 12px;--shadow-sm: 0 1px 0 rgba(27, 31, 36, .04);--shadow-md: 0 8px 24px rgba(140, 149, 159, .2);--transition-fast: .15s ease;--transition-med: .25s ease;--heat-cold: #1e40af;--heat-cool: #06b6d4;--heat-mid: #22c55e;--heat-warm: #eab308;--heat-hot: #ef4444}@media(prefers-color-scheme:dark){:root{color-scheme:dark;--bg-canvas: #0d1117;--bg-surface: #161b22;--bg-subtle: #0d1117;--bg-overlay: rgba(1, 4, 9, .75);--border-default: #30363d;--border-muted: #21262d;--text-primary: #e6edf3;--text-secondary: #9da7b3;--text-muted: #7d8590;--accent: #2f81f7;--accent-hover: #58a6ff;--accent-subtle: rgba(56, 139, 253, .15);--success: #3fb950;--danger: #f85149;--danger-subtle: rgba(248, 81, 73, .12);--map-bg: #0d1117;--shadow-sm: 0 1px 0 rgba(1, 4, 9, .3);--shadow-md: 0 8px 24px rgba(1, 4, 9, .5)}}html,body{min-height:100%}body{font-family:var(--font-sans);font-size:16px;line-height:1.5;background:var(--bg-canvas);color:var(--text-primary);-webkit-font-smoothing:antialiased}#app{min-height:100vh}.screen{display:none;min-height:100vh}.screen.active{display:flex}#intro-screen{align-items:center;justify-content:center;padding:2.5rem 1.25rem}.intro-content{width:100%;max-width:760px;padding:2rem;border:1px solid var(--border-default);border-radius:var(--radius-lg);background:var(--bg-surface);box-shadow:var(--shadow-sm);text-align:center}.intro-badge{display:inline-block;padding:4px 10px;border:1px solid var(--border-default);border-radius:999px;background:var(--bg-subtle);color:var(--text-secondary);font-size:.75rem;font-weight:600;letter-spacing:.02em;margin-bottom:1.25rem}.intro-title{margin-bottom:1rem}.title-accent{display:block;color:var(--text-secondary);font-size:.85rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:.2rem}.title-main{display:block;font-size:clamp(2rem,4vw,2.75rem);font-weight:700;line-height:1.2}.intro-subtitle{color:var(--text-secondary);font-size:1rem;margin:0 auto 1.5rem;max-width:64ch}.intro-subtitle em,.intro-note em{font-style:normal;font-weight:600;color:var(--text-primary)}.intro-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;margin-bottom:1.5rem}.stat{padding:.75rem;border:1px solid var(--border-default);border-radius:var(--radius-md);background:var(--bg-subtle)}.stat-number{display:block;font-size:1.25rem;font-weight:700}.stat-label{display:block;color:var(--text-secondary);font-size:.75rem;margin-top:.1rem}.intro-note{margin-top:1rem;color:var(--text-muted);font-size:.9rem}.btn-primary,.btn-secondary,.btn-generate,.btn-skip,.btn-map-nav,.btn-change-answer,.btn-modal-cancel,.btn-modal-remove,.btn-close-panel{font:inherit}.btn-primary,.btn-generate{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:var(--radius-md);border:1px solid rgba(0,0,0,0);background:var(--accent);color:#fff;font-size:.9rem;font-weight:600;cursor:pointer;transition:background var(--transition-fast),border-color var(--transition-fast)}.btn-primary{padding:10px 18px}.btn-generate{padding:9px 14px}.btn-primary:hover,.btn-generate:hover:not(:disabled){background:var(--accent-hover)}.btn-primary:focus-visible,.btn-generate:focus-visible,.btn-secondary:focus-visible,.choice-btn:focus-visible,.btn-skip:focus-visible,.btn-review-skip:focus-visible,.btn-map-nav:focus-visible,.btn-change-answer:focus-visible,.btn-modal-cancel:focus-visible,.btn-modal-remove:focus-visible,.modal-choice-btn:focus-visible,.btn-close-panel:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.btn-generate:disabled{opacity:.55;cursor:not-allowed}.btn-secondary,.btn-skip,.btn-map-nav,.btn-review-skip,.btn-change-answer,.btn-modal-cancel{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--bg-surface);color:var(--text-primary);border:1px solid var(--border-default);border-radius:var(--radius-md);cursor:pointer;transition:background var(--transition-fast),border-color var(--transition-fast)}.btn-secondary,.btn-skip{padding:9px 12px;font-size:.85rem;font-weight:500}.btn-secondary:hover,.btn-skip:hover,.btn-map-nav:hover:not(:disabled),.btn-change-answer:hover,.btn-modal-cancel:hover{background:var(--bg-subtle);border-color:var(--text-muted)}#quiz-screen{flex-direction:column}.quiz-header{position:sticky;top:0;z-index:100;display:grid;grid-template-columns:auto minmax(220px,420px) auto;align-items:center;gap:1rem;padding:10px 20px;background:var(--bg-surface);border-bottom:1px solid var(--border-default);height:64px}.quiz-logo{font-size:1.35rem;font-weight:700;line-height:1;white-space:nowrap}.header-center{justify-self:center;width:100%}.progress-container{display:flex;flex-direction:column;gap:6px}.progress-bar{width:100%;height:8px;border-radius:999px;background:var(--bg-subtle);border:1px solid var(--border-default);overflow:hidden}.progress-fill{width:0%;height:100%;background:linear-gradient(90deg,var(--accent),#54aeff);border-radius:999px;transition:width .25s ease}.progress-text{color:var(--text-secondary);font-size:.78rem;text-align:center}.header-right{display:flex;align-items:center;gap:8px;justify-content:flex-end}.quiz-body{display:flex;width:min(1320px,100%);margin:0 auto;padding:20px;gap:20px;align-items:flex-start}.quiz-main{flex:1;min-width:0}.question-card{width:100%;max-width:760px;margin:0 auto;border:1px solid var(--border-default);border-radius:var(--radius-lg);background:var(--bg-surface);box-shadow:var(--shadow-sm);padding:24px}.question-number-badge{display:inline-block;margin-bottom:14px;padding:4px 10px;border-radius:999px;border:1px solid var(--border-default);background:var(--bg-subtle);color:var(--text-secondary);font-size:.75rem;font-weight:600}.question-text{margin-bottom:16px;font-size:1.1rem;font-weight:650;line-height:1.45}.question-text .ipa-symbol,.choice-text .ipa-symbol,.answer-history-question .ipa-symbol,.answer-history-choice .ipa-symbol,.review-question-text .ipa-symbol,.review-choice-text .ipa-symbol,.modal-question .ipa-symbol,.modal-choice-btn .ipa-symbol{display:inline-block;width:auto;height:1em;margin:0 1px;vertical-align:text-bottom}.choices-container,.modal-choices{display:flex;flex-direction:column;gap:10px}.choice-btn,.modal-choice-btn{display:flex;align-items:flex-start;gap:12px;width:100%;border-radius:var(--radius-md);border:1px solid var(--border-default);background:var(--bg-surface);color:var(--text-primary);text-align:left;cursor:pointer;transition:background var(--transition-fast),border-color var(--transition-fast)}.choice-btn{padding:12px 14px}.modal-choice-btn{padding:10px 12px}.choice-btn:hover,.modal-choice-btn:hover{background:var(--bg-subtle);border-color:var(--text-muted)}.choice-btn.selected,.modal-choice-btn.selected{background:var(--accent-subtle);border-color:var(--accent)}.choice-letter{display:inline-flex;align-items:center;justify-content:center;width:28px;min-width:28px;height:28px;border-radius:999px;border:1px solid var(--border-default);color:var(--text-secondary);font-size:.78rem;font-weight:700;text-transform:uppercase}.choice-btn.selected .choice-letter,.modal-choice-btn.selected .choice-letter{border-color:var(--accent);color:var(--accent);background:var(--bg-surface)}.choice-text{flex:1;font-size:.94rem;line-height:1.45}.choice-pct{color:var(--text-muted);font-size:.8rem;font-weight:500;min-width:48px;text-align:right}.question-actions{display:flex;justify-content:center;margin-top:16px}.map-panel{width:480px;min-width:380px}.map-panel.hidden{display:none}.map-card{position:sticky;top:86px;border:1px solid var(--border-default);border-radius:var(--radius-lg);background:var(--bg-surface);box-shadow:var(--shadow-sm);padding:16px}.map-title{font-size:1rem;font-weight:700}.map-subtitle{color:var(--text-secondary);font-size:.82rem;margin-top:2px;margin-bottom:12px}.map-canvas-wrapper,.results-map-wrapper{border:1px solid var(--border-default);border-radius:var(--radius-md);background:var(--map-bg);overflow:hidden}.map-canvas-wrapper{margin-bottom:10px}.map-canvas-wrapper canvas,.results-map-wrapper canvas{display:block;width:100%;height:auto}.map-history-nav{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:10px}.btn-map-nav{width:30px;height:30px;padding:0}.btn-map-nav:disabled{opacity:.5;cursor:not-allowed}.map-history-text{color:var(--text-secondary);font-size:.82rem;min-width:92px;text-align:center}.map-legend,.results-legend{display:flex;align-items:center;justify-content:center;gap:8px}.legend-label{font-size:.72rem;color:var(--text-muted)}.legend-gradient{width:124px;height:8px;border-radius:999px;background:linear-gradient(90deg,var(--heat-cold),var(--heat-cool),var(--heat-mid),var(--heat-warm),var(--heat-hot))}.map-settings-panel{margin-top:12px;border:1px solid var(--border-default);border-radius:var(--radius-md);background:var(--bg-subtle)}.map-settings-panel[open]{padding:10px}.map-settings-summary{padding:10px 12px;font-size:.82rem;font-weight:600;cursor:pointer;color:var(--text-primary);list-style:none}.map-settings-summary::-webkit-details-marker{display:none}.map-settings-summary:before{content:"▸";display:inline-block;margin-right:8px;color:var(--text-muted);transition:transform var(--transition-fast)}.map-settings-panel[open] .map-settings-summary{padding:0;margin-bottom:8px}.map-settings-panel[open] .map-settings-summary:before{transform:rotate(90deg)}.map-settings-intro{margin-bottom:10px;color:var(--text-secondary);font-size:.76rem;line-height:1.4}.map-setting-control+.map-setting-control{margin-top:10px}.map-setting-header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:4px}.map-setting-header label{font-size:.78rem;font-weight:600;color:var(--text-primary)}.map-setting-value{font-size:.75rem;color:var(--text-secondary);font-variant-numeric:tabular-nums}.map-setting-control input[type=range]{width:100%}.map-setting-help{margin-top:4px;color:var(--text-secondary);font-size:.72rem;line-height:1.35}.map-settings-actions{display:flex;gap:8px;margin-top:12px}.map-settings-btn{flex:1;padding:8px 10px;font-size:.78rem;font-weight:600}.answer-history-panel{position:fixed;top:0;right:-390px;width:390px;height:100vh;display:flex;flex-direction:column;background:var(--bg-surface);border-left:1px solid var(--border-default);box-shadow:var(--shadow-md);transition:right var(--transition-med);z-index:200}.answer-history-panel.visible{right:0}.answer-history-panel .answer-history-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid var(--border-default)}.answer-history-title{font-size:1rem;font-weight:700}.btn-close-panel{width:30px;height:30px;padding:0;border-radius:var(--radius-md);border:1px solid var(--border-default);background:var(--bg-surface);color:var(--text-secondary);cursor:pointer}.btn-close-panel:hover{background:var(--bg-subtle)}.answer-history-list{flex:1;overflow-y:auto;padding:12px}.empty-message{color:var(--text-secondary);text-align:center;padding:2rem 1rem}.answer-history-item{border:1px solid var(--border-default);border-radius:var(--radius-md);background:var(--bg-surface);padding:12px;margin-bottom:10px}.answer-history-item .answer-history-header{display:flex;flex-direction:column;gap:4px;margin-bottom:10px;padding:0;border:0}.answer-history-qnum{color:var(--text-secondary);font-size:.72rem;font-weight:700;text-transform:uppercase}.answer-history-question{font-size:.86rem;color:var(--text-secondary);line-height:1.4}.answer-history-answer{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:10px}.answer-history-choice{font-size:.88rem;line-height:1.4}.answer-history-pct{font-size:.77rem;color:var(--text-muted);white-space:nowrap}.answer-history-actions{display:flex;justify-content:flex-end}.btn-change-answer{padding:6px 10px;font-size:.8rem;font-weight:500}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;padding:16px;background:var(--bg-overlay);z-index:300}.modal-content{width:min(640px,100%);max-height:calc(100vh - 32px);overflow-y:auto;border:1px solid var(--border-default);border-radius:var(--radius-lg);background:var(--bg-surface);box-shadow:var(--shadow-md);padding:18px}.modal-title{font-size:1.15rem;font-weight:700;margin-bottom:8px}.modal-question{color:var(--text-secondary);margin-bottom:12px}.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:14px}.btn-modal-cancel,.btn-modal-remove{padding:8px 12px;border-radius:var(--radius-md);border:1px solid var(--border-default);font-size:.85rem;cursor:pointer}.btn-modal-remove{border-color:var(--danger);background:var(--danger-subtle);color:var(--danger)}.btn-modal-remove:hover{opacity:.92}.hidden{display:none!important}.font-brand{font-family:Playwrite AT,cursive}.quiz-logo a{text-decoration:none;color:inherit;cursor:pointer}.intro-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-bottom:1.5rem}.intro-about{margin-top:2rem;padding-top:2rem;border-top:1px solid var(--border-default);text-align:left}.intro-about h3{font-size:1.1rem;margin-bottom:.75rem;color:var(--text-primary)}.intro-about p{font-size:.95rem;line-height:1.6;color:var(--text-secondary);margin-bottom:1rem}#review-screen{flex-direction:column}#review-screen .quiz-header,#results-screen .quiz-header{grid-template-columns:1fr auto}#review-screen .header-right,#results-screen .header-right{justify-self:end}.review-container{width:min(1440px,100%);margin:0 auto;padding:16px 20px 24px}.review-layout{display:grid;grid-template-columns:minmax(220px,280px) minmax(0,1fr);align-items:start;gap:14px}.review-summary-card{position:sticky;top:84px;border:1px solid var(--border-default);border-radius:var(--radius-lg);background:var(--bg-surface);box-shadow:var(--shadow-sm);padding:14px}.review-summary-card h3{font-size:1.02rem;margin-bottom:10px}.review-summary-stats{display:flex;flex-direction:column;gap:8px}.review-summary-stat{border:1px solid var(--border-default);border-radius:var(--radius-md);background:var(--bg-subtle);padding:10px 12px}.review-summary-value{display:block;font-size:1.12rem;font-weight:700}.review-summary-label{display:block;color:var(--text-secondary);font-size:.82rem}.review-summary-note{margin-top:10px;color:var(--text-secondary);font-size:.82rem;line-height:1.35}.review-main{min-width:0}.review-header-content{margin-bottom:10px}.review-header-content h2{font-size:clamp(1.32rem,1.7vw,1.65rem);margin-bottom:.2rem}.review-header-content p{color:var(--text-secondary);font-size:.9rem}.review-list{display:flex;flex-direction:column;gap:10px}.review-item{border:1px solid var(--border-default);border-radius:var(--radius-lg);background:var(--bg-surface);box-shadow:var(--shadow-sm);padding:12px}.review-item-header{display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:center;gap:10px;margin-bottom:8px}.review-qnum{font-size:.76rem;font-weight:700;color:var(--text-secondary);background:var(--bg-subtle);padding:3px 8px;border-radius:999px;border:1px solid var(--border-default)}.review-status-chip{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.02em;border-radius:999px;padding:3px 8px;border:1px solid var(--border-default);color:var(--text-secondary);background:var(--bg-subtle)}.review-status-chip.answered{border-color:#9ecbff;color:#0550ae;background:#e7f3ff}.review-status-chip.skipped{border-color:#e2bf48;color:#8a6400;background:#fff8cf}.review-question-text{font-size:.98rem;font-weight:600;line-height:1.3}.review-item-actions{display:flex;justify-content:flex-end;margin-bottom:8px}.btn-review-skip{border:1px solid var(--border-default);border-radius:var(--radius-sm);background:var(--bg-surface);color:var(--text-secondary);font-size:.74rem;font-weight:600;padding:4px 8px;cursor:pointer;transition:background var(--transition-fast),border-color var(--transition-fast)}.btn-review-skip:hover:not(:disabled){background:var(--bg-subtle);border-color:var(--text-muted)}.btn-review-skip:disabled{opacity:.85;cursor:default}.review-choices{display:flex;flex-direction:column;gap:6px}.review-choice-btn{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 10px;border:1px solid var(--border-default);border-radius:var(--radius-md);background:var(--bg-subtle);cursor:pointer;text-align:left;transition:border-color var(--transition-fast),background var(--transition-fast)}.review-choice-btn:hover{background:var(--bg-canvas)}.review-choice-btn.selected{background:var(--accent-subtle);border-color:var(--accent)}.review-choice-main{flex:1;min-width:0}.review-choice-line{display:flex;align-items:flex-start;gap:8px}.review-choice-meta{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:4px;min-width:108px}.review-choice-letter{font-weight:700;color:var(--text-secondary);font-size:.8rem;text-transform:uppercase;line-height:1.3}.review-choice-pct{font-size:.76rem;color:var(--text-muted);line-height:1}.review-choice-text{font-size:.89rem;line-height:1.3}.review-choice-bar{width:86px;height:6px;border-radius:999px;background:var(--border-muted);overflow:hidden}.review-choice-bar-fill{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--accent),#54aeff)}.review-choice-btn.selected .review-choice-text{color:var(--accent-hover);font-weight:500}.review-choice-btn.selected .review-choice-bar-fill{background:linear-gradient(90deg,var(--accent-hover),var(--accent))}@media(prefers-color-scheme:dark){.review-choice-btn:hover{background:#1f2630}.review-status-chip.answered{border-color:#245f99;color:#8dc6ff;background:#152739}.review-status-chip.skipped{border-color:#6d5920;color:#f1cf78;background:#2a2411}}@media(max-width:1180px){.review-layout{grid-template-columns:1fr}.review-summary-card{position:static}}@media(max-width:920px){.review-choice-meta{min-width:84px}.review-choice-bar{width:70px}}#results-screen{flex-direction:column;align-items:stretch;justify-content:flex-start;padding:24px}.results-content{width:min(980px,100%);margin:0 auto;border:1px solid var(--border-default);border-radius:var(--radius-lg);background:var(--bg-surface);box-shadow:var(--shadow-sm);padding:22px;text-align:center}.results-title{font-size:1.6rem;font-weight:700;margin-bottom:6px}.results-subtitle{color:var(--text-secondary);margin-bottom:14px}.results-map-wrapper{margin-bottom:14px}.results-legend{margin-bottom:18px}.results-actions{display:flex;justify-content:center}.question-card.transitioning{animation:cardSwap .32s ease}@keyframes cardSwap{0%{opacity:1;transform:translateY(0)}40%{opacity:.2;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@media(max-width:1180px){.quiz-body{flex-direction:column}.map-panel{width:100%;min-width:0}.map-card{position:static}}@media(max-width:860px){.quiz-header{grid-template-columns:1fr;gap:10px;height:auto;padding:12px 16px;position:relative}.header-center{justify-self:stretch;order:3}.header-left{order:1;text-align:left}.header-right{order:2;position:absolute;right:16px;top:12px}.progress-bar{height:6px}.quiz-logo{font-size:1.25rem}}@media(max-width:640px){.quiz-header{display:flex;flex-direction:column;align-items:stretch}.header-left{text-align:center;order:1;margin-bottom:8px}.header-right{position:static;order:2;justify-content:center;margin-bottom:10px;flex-wrap:wrap}.header-center{order:3;width:100%}#intro-screen,.intro-content{padding:1rem}.intro-stats{grid-template-columns:1fr}.quiz-body{padding:12px}.question-card{padding:16px}.header-right .btn-secondary span,.header-right .btn-generate span:not(.always-visible){display:none}.header-right .btn-secondary{padding:8px}.review-container{padding:16px 12px}.map-settings-actions{flex-direction:column}}