:root{--font-sans:"Avenir Next", "Segoe UI", "Inter", system-ui, -apple-system, sans-serif;--font-serif:"Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;--font-cjk:"Noto Sans TC", "PingFang TC", "PingFang HK", "Microsoft JhengHei", "Noto Sans CJK TC", sans-serif;--bg:#f6f3ec;--bg-glow:#e8f1ec;--surface:#fffdf8;--surface-2:#f1ede3;--surface-3:#e8e2d5;--ink:#1c1917;--ink-soft:#44403c;--muted:#6b655d;--line:#e4ded2;--line-strong:#d3cab9;--brand:#0f766e;--brand-strong:#115e59;--brand-soft:#d9f4ee;--on-brand:#fff;--accent:#b45309;--accent-soft:#fdf0dc;--correct:#15803d;--correct-soft:#e3f6e9;--wrong:#b91c1c;--wrong-soft:#fdecec;--shadow-sm:0 1px 2px #2925240d;--shadow-md:0 12px 30px -18px #29252459;--shadow-lg:0 30px 70px -40px #29252480;--radius-sm:10px;--radius-md:16px;--radius-lg:24px;--radius-xl:30px;--space:clamp(1rem, 2.4vw, 1.75rem);--container:1080px}[data-theme=dark]{--bg:#111413;--bg-glow:#16201c;--surface:#191d1b;--surface-2:#202622;--surface-3:#29302b;--ink:#f4f1ea;--ink-soft:#d6d1c7;--muted:#a7a29a;--line:#2c332e;--line-strong:#3a423c;--brand:#5eead4;--brand-strong:#99f6e4;--brand-soft:#123b36;--on-brand:#062a26;--accent:#fbbf24;--accent-soft:#33280e;--correct:#4ade80;--correct-soft:#12351f;--wrong:#f87171;--wrong-soft:#3a1717;--shadow-sm:0 1px 2px #0006;--shadow-md:0 12px 30px -18px #000c;--shadow-lg:0 30px 70px -40px #000000e6}*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{min-width:320px;min-height:100dvh;font-family:var(--font-sans);color:var(--ink);background:radial-gradient(1200px 600px at 85% -10%, var(--bg-glow) 0%, transparent 55%), radial-gradient(900px 500px at -10% 20%, var(--bg-glow) 0%, transparent 50%), var(--bg);text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;background-attachment:fixed;margin:0;font-size:16px;line-height:1.55}h1,h2,h3,p{margin:0}h1,h2,h3{font-family:var(--font-serif);letter-spacing:-.015em;font-weight:600;line-height:1.15}h1{font-size:clamp(2.1rem,4.6vw,3.6rem)}h2{font-size:clamp(1.3rem,2.2vw,1.65rem)}h3{font-size:1.05rem}button,input{font:inherit;color:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed}a{color:var(--brand)}::selection{background:var(--brand-soft);color:var(--ink)}:focus-visible{outline:3px solid color-mix(in srgb, var(--brand) 60%, transparent);outline-offset:2px}.app-shell{flex-direction:column;min-height:100dvh;display:flex}.container{width:min(var(--container), 100% - 2.5rem);margin-inline:auto}.button{min-height:44px;color:var(--ink);background:0 0;border:1px solid #0000;border-radius:999px;justify-content:center;align-items:center;gap:.5rem;padding:.6rem 1.1rem;font-size:.95rem;font-weight:600;line-height:1;transition:background-color .16s,border-color .16s,color .16s,transform .16s;display:inline-flex}.button:active:not(:disabled){transform:translateY(1px)}.button-primary{background:var(--brand);color:var(--on-brand);box-shadow:var(--shadow-sm)}.button-primary:hover:not(:disabled){background:var(--brand-strong)}.button-secondary{background:var(--surface);border-color:var(--line-strong)}.button-secondary:hover:not(:disabled){background:var(--surface-2)}.button-ghost{border-color:var(--line);background:0 0}.button-ghost:hover:not(:disabled){background:var(--surface-2)}.button-icon{border-color:var(--line);border-radius:50%;width:44px;height:44px;padding:0;font-size:1.15rem}.button-large{min-height:54px;padding:.9rem 1.6rem;font-size:1.02rem}.button:disabled{opacity:.45}.link-button{color:var(--brand);text-underline-offset:3px;background:0 0;border:0;padding:0;font-weight:600;text-decoration:underline}.kbd,kbd{border:1px solid var(--line-strong);background:var(--surface);min-width:1.5rem;font-family:var(--font-sans);text-align:center;border-bottom-width:2px;border-radius:6px;padding:.1rem .35rem;font-size:.78rem;display:inline-block}@media (max-width:600px){.container{width:min(var(--container), 100% - 1.75rem)}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}}.app-header{z-index:20;border-bottom:1px solid var(--line);background:color-mix(in srgb, var(--bg) 82%, transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);position:sticky;top:0}.app-header-inner{width:min(var(--container), 100% - 2.5rem);justify-content:space-between;align-items:center;gap:1rem;margin-inline:auto;padding:.8rem 0;display:flex}.brand{align-items:center;gap:.75rem;min-width:0;display:flex}.brand-mark{background:var(--brand);width:42px;height:42px;color:var(--on-brand);font-family:var(--font-cjk);box-shadow:var(--shadow-sm);border-radius:13px;place-items:center;font-size:1.35rem;font-weight:600;display:grid}.brand-text{flex-direction:column;line-height:1.15;display:flex}.brand-text strong{font-family:var(--font-serif);letter-spacing:-.01em;font-size:1.08rem}.brand-sub{color:var(--muted);letter-spacing:.02em;font-size:.76rem}.header-actions{align-items:center;gap:.6rem;display:flex}.setup{flex-direction:column;gap:1.1rem;padding:clamp(2rem,5vw,4rem) 0 3rem;display:flex}.hero{text-align:center;max-width:760px;margin:0 auto .5rem}.eyebrow{color:var(--brand);letter-spacing:.14em;text-transform:uppercase;margin-bottom:.8rem;font-size:.76rem;font-weight:700}.hero h1{margin-bottom:1rem}.accent{color:var(--brand);font-style:italic}.hero-copy{max-width:58ch;color:var(--muted);margin-inline:auto;font-size:clamp(1rem,1.4vw,1.1rem)}.panel{border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-md);padding:clamp(1.25rem,2.6vw,1.9rem)}.panel-heading{justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:1.2rem;display:flex}.panel-sub{color:var(--muted);margin-top:.35rem;font-size:.93rem}.preset-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem;display:grid}.preset-card{border:1.5px solid var(--line);border-radius:var(--radius-md);background:var(--surface);text-align:left;flex-direction:column;gap:.35rem;padding:1rem 1rem .9rem;transition:border-color .16s,background-color .16s,transform .16s;display:flex;position:relative}.preset-card:hover{border-color:var(--line-strong);background:var(--surface-2);transform:translateY(-1px)}.preset-card.is-active{border-color:var(--brand);background:var(--brand-soft)}.preset-check{border:1px solid var(--line-strong);background:var(--surface);width:22px;height:22px;color:var(--brand);border-radius:50%;place-items:center;font-size:.75rem;font-weight:700;display:grid;position:absolute;top:.7rem;right:.7rem}.preset-card.is-active .preset-check{border-color:var(--brand);background:var(--brand);color:var(--on-brand)}.preset-title{padding-right:1.5rem;font-size:.98rem;font-weight:700}.preset-desc{color:var(--muted);font-size:.84rem;line-height:1.4}.preset-example{background:color-mix(in srgb, var(--surface) 70%, transparent);color:var(--ink-soft);font-family:var(--font-serif);border-radius:999px;align-self:flex-start;margin-top:.35rem;padding:.25rem .55rem;font-size:.84rem}.filter-block+.filter-block{margin-top:1.15rem}.filter-label{color:var(--muted);letter-spacing:.09em;text-transform:uppercase;margin-bottom:.55rem;font-size:.76rem;font-weight:700}.chip-row{flex-wrap:wrap;gap:.5rem;display:flex}.chip{border:1px solid var(--line);background:var(--surface);min-height:40px;color:var(--ink-soft);border-radius:999px;align-items:center;gap:.4rem;padding:.45rem .95rem;font-size:.9rem;font-weight:600;transition:border-color .14s,background-color .14s,color .14s;display:inline-flex}.chip:hover{border-color:var(--line-strong);background:var(--surface-2)}.chip.is-active{border-color:var(--brand);background:var(--brand);color:var(--on-brand)}.chip-input{gap:.5rem;padding-right:.55rem}.chip-input input{border:1px solid var(--line);background:var(--surface);width:4.2rem;color:var(--ink);text-align:center;border-radius:999px;padding:.2rem .4rem;font-size:.86rem}.start-panel{border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-md);justify-content:space-between;align-items:center;gap:1.25rem;padding:1.1rem 1.25rem;display:flex}.pool-summary{color:var(--muted);flex-wrap:wrap;align-items:baseline;gap:.5rem;font-size:.92rem;display:flex}.pool-summary strong{color:var(--ink);font-family:var(--font-serif);font-size:1.65rem;line-height:1}.lifetime{color:var(--muted);flex-basis:100%;font-size:.8rem}.tips{color:var(--muted);grid-template-columns:1.2fr 1fr;gap:1.5rem;padding:.5rem .35rem 0;font-size:.9rem;display:grid}.tips h3{color:var(--ink);margin-bottom:.35rem}.tips .link-button{margin-top:.4rem;font-size:.86rem}.quiz{flex-direction:column;gap:1rem;max-width:820px;padding:clamp(1.5rem,4vw,3rem) 0 2.5rem;display:flex}.quiz-top{justify-content:space-between;align-items:flex-start;gap:1rem;display:flex}.quiz-status{flex:1;min-width:0}.quiz-count{color:var(--muted);letter-spacing:.08em;text-transform:uppercase;margin-bottom:.5rem;font-size:.82rem;font-weight:700;display:block}.progress-track{background:var(--surface-2);border-radius:999px;height:8px;overflow:hidden}.progress-fill{border-radius:inherit;background:linear-gradient(90deg, var(--brand), var(--brand-strong));height:100%;transition:width .32s}.quiz-meta{align-items:center;gap:.45rem;display:flex}.score-pill,.streak-pill{border:1px solid var(--line);background:var(--surface);color:var(--muted);white-space:nowrap;border-radius:999px;padding:.35rem .7rem;font-size:.78rem;font-weight:600}.streak-pill{border-color:color-mix(in srgb, var(--accent) 35%, var(--line));color:var(--accent)}.question-area{animation:.32s both rise}.question-card{border:1px solid var(--line);border-radius:var(--radius-xl);background:radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--brand-soft) 55%, transparent) 0%, transparent 70%), var(--surface);box-shadow:var(--shadow-md);text-align:center;padding:clamp(1.6rem,4vw,2.6rem)}.question-label{color:var(--brand);letter-spacing:.12em;text-transform:uppercase;margin-bottom:1rem;font-size:.76rem;font-weight:700}.prompt{word-break:break-word;justify-content:center;align-items:center;min-height:1.3em;display:flex}.prompt-zh{font-family:var(--font-cjk);letter-spacing:.06em;font-size:clamp(2.6rem,9vw,4.4rem);font-weight:500;line-height:1.25}.prompt-yale{font-family:var(--font-serif);font-size:clamp(2rem,5.5vw,3.3rem);font-style:italic;line-height:1.25}.prompt-en{font-family:var(--font-serif);font-size:clamp(1.7rem,4.5vw,2.65rem);line-height:1.3}.question-hint{color:var(--muted);margin-top:1rem;font-size:.82rem}.options{flex-direction:column;gap:.65rem;margin-top:1rem;display:flex}.option{border:1.5px solid var(--line);border-radius:var(--radius-md);background:var(--surface);text-align:left;align-items:center;gap:.9rem;width:100%;min-height:62px;padding:.75rem 1rem;transition:border-color .15s,background-color .15s,transform .15s,opacity .15s;display:flex}.option:hover:not(:disabled){border-color:var(--brand);background:var(--surface-2);transform:translateY(-1px)}.option:disabled{opacity:1}.option-letter{background:var(--surface-2);width:34px;height:34px;color:var(--muted);border-radius:10px;flex:none;place-items:center;font-size:.85rem;font-weight:700;display:grid}.option-text{flex:1;font-size:clamp(1rem,1.8vw,1.15rem);line-height:1.4}.option-text[lang=zh-Hant],.option[lang=zh-Hant] .option-text{font-family:var(--font-cjk);letter-spacing:.03em;font-size:1.25rem}.option[lang=zh-Latn] .option-text{font-family:var(--font-serif)}.option-icon{flex:none;font-size:1.15rem;font-weight:700}.option.is-correct{border-color:var(--correct);background:var(--correct-soft)}.option.is-correct .option-letter{background:var(--correct);color:#fff}.option.is-correct .option-icon{color:var(--correct)}.option.is-wrong{border-color:var(--wrong);background:var(--wrong-soft)}.option.is-wrong .option-letter{background:var(--wrong);color:#fff}.option.is-wrong .option-icon{color:var(--wrong)}.option.is-muted{opacity:.55}.feedback-slot{margin-top:1rem}.feedback{border:1px solid var(--line);border-left:5px solid var(--brand);border-radius:var(--radius-md);background:var(--surface);padding:1.1rem 1.2rem;animation:.22s both slide-in}.feedback.is-correct{border-left-color:var(--correct)}.feedback.is-wrong{border-left-color:var(--wrong)}.feedback-head{flex-wrap:wrap;align-items:baseline;gap:.6rem;margin-bottom:.7rem;display:flex}.feedback-head strong{font-size:1.05rem}.feedback.is-correct .feedback-head strong{color:var(--correct)}.feedback.is-wrong .feedback-head strong{color:var(--wrong)}.feedback-chosen{color:var(--muted);font-size:.86rem}.glossary{background:var(--surface-2);text-align:center;border-radius:12px;padding:.9rem 1rem}.glossary-zh{font-family:var(--font-cjk);font-size:2rem;line-height:1.3}.glossary-yale{color:var(--brand);font-family:var(--font-serif);margin-top:.15rem;font-size:1.35rem;font-style:italic}.glossary-en{margin-top:.2rem;font-size:1.05rem}.glossary-meta{color:var(--muted);flex-wrap:wrap;justify-content:center;gap:.4rem .8rem;margin-top:.6rem;font-size:.76rem;display:flex}.glossary-meta span+span:before{content:"·";color:var(--line-strong);margin-right:.8rem}.glossary-note{color:var(--muted);margin-top:.5rem;font-size:.8rem}.feedback-actions{flex-wrap:wrap;gap:.6rem;margin-top:.9rem;display:flex}.keyboard-hint{color:var(--muted);text-align:center;margin-top:1rem;font-size:.78rem}.empty-state{color:var(--muted);text-align:center;padding:3rem 0}.results{flex-direction:column;gap:1.1rem;padding:clamp(2rem,4.5vw,3.5rem) 0 2rem;display:flex}.results-hero{align-items:center;gap:clamp(1.5rem,4vw,3rem);padding:.5rem 0;display:flex}.score-ring{background:conic-gradient(var(--brand) var(--pct,0%), var(--surface-2) 0);border-radius:50%;flex:none;place-items:center;width:168px;height:168px;display:grid}.score-ring-inner{background:var(--bg);width:132px;height:132px;box-shadow:inset 0 0 0 1px var(--line);border-radius:50%;place-items:center;display:grid}.score-ring-inner strong{font-family:var(--font-serif);font-size:2.4rem;line-height:1}.score-ring-inner span{color:var(--muted);letter-spacing:.1em;text-transform:uppercase;font-size:.72rem}.results-copy h1{margin-bottom:.4rem;font-size:clamp(1.9rem,4vw,2.9rem)}.results-copy>p:not(.eyebrow){color:var(--muted)}.results-actions{flex-wrap:wrap;gap:.6rem;margin-top:1.1rem;display:flex}.results-columns{grid-template-columns:1fr 1fr;gap:1.1rem;display:grid}.breakdown{flex-direction:column;gap:.85rem;display:flex}.breakdown-label{justify-content:space-between;gap:1rem;margin-bottom:.3rem;font-size:.88rem;display:flex}.breakdown-value{color:var(--muted);font-variant-numeric:tabular-nums}.breakdown-track{background:var(--surface-2);border-radius:999px;height:7px;overflow:hidden}.breakdown-fill{border-radius:inherit;background:var(--brand);height:100%;transition:width .4s}.missed-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;margin:0;padding:0;list-style:none;display:grid}.missed-item{border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface-2);padding:.9rem 1rem}.missed-prompt{border-bottom:1px dashed var(--line-strong);flex-direction:column;gap:.2rem;padding-bottom:.55rem;display:flex}.missed-label{color:var(--muted);letter-spacing:.07em;text-transform:uppercase;font-size:.7rem;font-weight:700}.missed-text{font-size:1.02rem;font-weight:600}.missed-zh{font-family:var(--font-cjk);font-size:1.3rem}.missed-answer{flex-wrap:wrap;align-items:baseline;gap:.5rem;margin-top:.6rem;display:flex}.missed-yale{color:var(--brand);font-family:var(--font-serif);font-style:italic}.missed-en{font-size:.9rem}.missed-chosen,.missed-meta{color:var(--muted);margin-top:.4rem;font-size:.78rem}.perfect-state{border-radius:var(--radius-md);background:var(--correct-soft);color:var(--correct);text-align:center;padding:1.2rem;font-weight:600}.modal-backdrop{z-index:50;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#11141380;place-items:center;padding:1rem;animation:.16s both fade-in;display:grid;position:fixed;inset:0}.modal{border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);width:min(660px,100%);max-height:90dvh;box-shadow:var(--shadow-lg);padding:clamp(1.2rem,3vw,1.8rem);animation:.22s both rise;overflow-y:auto}.modal-head{justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:1.1rem;display:flex}.modal-head h2{font-size:1.5rem}.modal-section+.modal-section{margin-top:1.1rem}.choice-row{grid-template-columns:1fr 1fr;gap:.6rem;display:grid}.choice{border:1.5px solid var(--line);border-radius:var(--radius-md);background:var(--surface);text-align:left;flex-direction:column;gap:.2rem;padding:.8rem .9rem;transition:border-color .14s,background-color .14s;display:flex}.choice:hover:not(:disabled){border-color:var(--line-strong);background:var(--surface-2)}.choice.is-active{border-color:var(--brand);background:var(--brand-soft)}.choice strong{font-size:.92rem}.choice span{color:var(--muted);font-size:.8rem;line-height:1.4}.checkbox-row{color:var(--ink-soft);cursor:pointer;align-items:center;gap:.55rem;margin-top:.75rem;font-size:.88rem;display:flex}.checkbox-row input{width:18px;height:18px;accent-color:var(--brand)}.form-error{background:var(--wrong-soft);color:var(--wrong);border-radius:10px;margin-top:.9rem;padding:.7rem .9rem;font-size:.85rem}.modal-actions{flex-wrap:wrap;gap:.6rem;margin-top:1.2rem;display:flex}.modal-note{color:var(--muted);margin-top:.9rem;font-size:.8rem;line-height:1.5}.site-footer{border-top:1px solid var(--line);color:var(--muted);margin-top:auto;padding:1.4rem 0;font-size:.78rem}.site-footer p{width:min(var(--container), 100% - 2.5rem);margin-inline:auto}.site-footer p+p{opacity:.8;margin-top:.3rem}@keyframes rise{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@keyframes slide-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@media (max-width:900px){.preset-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.results-columns,.missed-list,.tips{grid-template-columns:1fr}}@media (max-width:680px){.app-header-inner{width:min(var(--container), 100% - 1.75rem)}.brand-sub{display:none}.brand-text strong{white-space:nowrap;font-size:1rem}.export-button{border-radius:50%;width:44px;padding:0;font-size:1.05rem}.button-label{display:none}.preset-grid,.choice-row{grid-template-columns:1fr}.start-panel{flex-direction:column;align-items:stretch}.start-panel .button{width:100%}.results-hero{flex-direction:column;align-items:flex-start}.quiz-top{flex-direction:column}.quiz-meta{align-self:flex-start}.feedback-actions .button{flex:1}.score-ring{width:138px;height:138px}.score-ring-inner{width:108px;height:108px}.score-ring-inner strong{font-size:2rem}.modal-actions .button{flex:100%}}
