:root { --ink:#14235c; --muted:#57627e; --page:#f4f6fb; --surface:#fff; --line:#d8deed; --gold:#f2c94c; --good:#137349; --bad:#a13744; --shadow:0 16px 44px rgba(18,35,92,.09); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { min-width:320px; margin:0; background:var(--page); color:var(--ink); font-family:"PingFang TC","Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif; line-height:1.75; }
button { font:inherit; }
a { color:inherit; }
:focus-visible { outline:3px solid #596bb7; outline-offset:3px; }
.skip-link { position:fixed; top:12px; left:12px; z-index:5; padding:8px 14px; border-radius:999px; background:var(--ink); color:#fff; transform:translateY(-150%); }
.skip-link:focus { transform:none; }
.hero, main, footer { width:min(860px,calc(100% - 32px)); margin-inline:auto; }
.hero { margin-top:18px; padding:22px clamp(22px,5vw,48px) 42px; border:1px solid var(--line); border-radius:24px; background:var(--surface); box-shadow:var(--shadow); }
.brand-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding-bottom:15px; border-bottom:1px solid var(--line); font-size:.9rem; font-weight:800; }
.brand-row img { width:154px; height:44px; object-fit:contain; }
.brand-row a { color:var(--muted); text-decoration:none; }
.brand-row a:hover { text-decoration:underline; text-underline-offset:3px; }
.eyebrow,.subject,.rank { margin:24px 0 6px; color:#4052a4; font-size:.8rem; font-weight:900; letter-spacing:.08em; }
.hero h1 { margin:0; font-size:clamp(2.5rem,8vw,5rem); letter-spacing:-.065em; line-height:1.02; }
.lede { margin:18px 0 22px; color:var(--muted); font-size:1.05rem; }
.hero-meta { display:flex; flex-wrap:wrap; gap:8px; }
.hero-meta span { padding:5px 10px; border-radius:999px; background:#e8edff; color:#263b91; font-size:.82rem; font-weight:800; }
main { display:grid; gap:22px; margin-top:22px; }
.reading-note,.question-card { border:1px solid var(--line); border-radius:20px; background:var(--surface); box-shadow:var(--shadow); }
.reading-note { padding:18px 22px; }
.reading-note h2,.reading-note p { margin:0; }
.reading-note p { margin-top:5px; color:var(--muted); }
.question-card { padding:clamp(20px,4vw,34px); }
.question-header { display:grid; grid-template-columns:54px 1fr; gap:12px; align-items:start; }
.rank { display:grid; width:48px; height:48px; place-items:center; margin:0; border-radius:14px; background:var(--ink); color:#fff; letter-spacing:0; }
.subject { margin:0; }
.error-rate { margin:2px 0 0; color:var(--muted); font-size:.9rem; font-weight:750; }
.question-card h2 { margin:22px 0; font-size:clamp(1.18rem,3vw,1.48rem); line-height:1.65; }
.practice-options { display:grid; gap:10px; }
.practice-option { display:grid; grid-template-columns:38px minmax(0,1fr); gap:12px; align-items:center; width:100%; padding:13px 15px; border:1px solid var(--line); border-radius:14px; background:#fff; color:var(--ink); text-align:left; cursor:pointer; transition:border-color .16s ease,background .16s ease; }
.practice-option:hover:not(:disabled) { border-color:#5264bd; background:#f4f6ff; }
.practice-option:disabled { cursor:default; }
.option-key { display:grid; width:32px; height:32px; place-items:center; border:1px solid currentColor; border-radius:999px; font-weight:900; }
.option-copy { min-width:0; }
.practice-option.is-correct { border-color:#6ec99a; background:#e7f8ee; color:#0d5031; }
.practice-option.is-incorrect { border-color:#df8993; background:#ffedef; color:#7c1d2a; }
.question-result { min-height:1.75em; margin:14px 0 0; font-weight:900; }
.feedback { display:grid; gap:16px; margin-top:20px; padding-top:20px; border-top:1px solid var(--line); }
.feedback[hidden] { display:none; }
.feedback section > h3 { margin:0; font-size:1rem; }
.feedback section > p { margin:4px 0 0; color:#283250; white-space:pre-line; }
.option-analyses { display:grid; gap:0; }
.option-analysis { padding:14px 0; border-bottom:1px solid var(--line); }
.option-analysis h4,.option-analysis p { margin:0; }
.option-analysis p { margin-top:4px; color:#283250; white-space:pre-line; }
.reset-question { justify-self:start; padding:9px 14px; border:1px solid #8793c8; border-radius:999px; background:#fff; color:var(--ink); font-weight:850; cursor:pointer; }
.practice-mcq-campaign { display:block; width:min(78%,680px); aspect-ratio:1200 / 630; margin:0 auto; border:1px solid var(--line); border-radius:18px; background:url("mcq-cta-background.png") 0 0 / 100% 100% no-repeat; box-shadow:var(--shadow); }
footer { margin-top:22px; margin-bottom:26px; }
footer > p { color:var(--muted); font-size:.84rem; text-align:center; }
.footer-campaign { position:relative; display:block; aspect-ratio:1462 / 444; border:1px solid var(--line); border-radius:18px; background:url("courses-cta-background.png") 0 0 / 100% 100% no-repeat; box-shadow:var(--shadow); opacity:1; }
.footer-campaign span { position:absolute; top:80.5%; left:49%; padding:4px 11px; border:2px solid var(--gold); border-radius:999px; background:rgba(255,255,255,.97); color:var(--ink); font-size:clamp(.7rem,1.4vw,.92rem); font-weight:850; }
.footer-campaign b { color:#293f99; }
@media (max-width:560px) { .hero,main,footer { width:min(100% - 20px,860px); } .hero { padding:20px; } .question-card { padding:20px; } .practice-mcq-campaign { width:100%; } .footer-campaign span { left:47%; font-size:.68rem; } }