:root{color-scheme:dark;--bg:#061627;--card:#102b45;--line:#2e5267;--mint:#67e2c7;--ink:#ebf8fb;--muted:#b4c9d9;--gold:#ffd078}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,"Noto Sans TC",sans-serif;line-height:1.75;overflow-x:hidden}a{color:var(--mint)}button,select,input{font:inherit}button,select{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--gold);outline-offset:3px}header{display:flex;justify-content:space-between;align-items:center;gap:1rem;border-bottom:1px solid var(--line);padding:14px 4%;background:#091e35}header strong{letter-spacing:.14em}header strong span{color:var(--mint)}header nav{display:flex;gap:1rem;flex-wrap:wrap}.page{display:grid;grid-template-columns:255px minmax(0,1fr);max-width:1450px;margin:auto;gap:24px;padding:22px}aside{align-self:start;position:sticky;top:10px;background:#0c243b;border:1px solid var(--line);padding:16px;border-radius:16px;max-height:calc(100vh - 20px);overflow-y:auto}aside h2{font-size:1.15rem}#station-nav{display:grid;gap:4px}#station-nav a{display:block;padding:5px 7px;text-decoration:none;border-radius:6px;font-size:.87rem}#station-nav a:hover{background:#183d52}.hero{background:linear-gradient(120deg,#123a59,#0c263d);border:1px solid #31627a;border-radius:22px;padding:32px}.hero small{color:var(--mint);letter-spacing:.16em}.hero h1{font-size:clamp(1.75rem,3vw,2.8rem);line-height:1.3}.hero p{max-width:780px}.stats{display:flex;gap:8px;flex-wrap:wrap}.stats span{padding:5px 14px;border:1px solid #407e80;border-radius:40px}.overview{padding:15px 6px}.station{margin:23px 0;border:1px solid var(--line);background:#0b2239;border-radius:20px;overflow:hidden;scroll-margin-top:12px}.station .inside{padding:22px}.station h2{margin:4px 0 15px;color:#d8fff3;line-height:1.4;font-size:1.55rem}.station .eyebrow{color:var(--mint);font-size:.85rem;font-weight:700}.lesson{background:#112e47;border-left:4px solid var(--mint);padding:14px 18px;margin:14px 0;border-radius:4px 12px 12px 4px}.lesson p{margin:8px 0}.figure{margin:17px 0;background:#071a2c;border:1px solid #335d70;border-radius:14px;padding:12px}.figure svg{width:100%;height:auto;display:block;max-height:420px}.figure figcaption{font-size:.88rem;color:#bfdde0}.slide{margin:18px 0;border:1px solid #31577a;border-radius:14px;padding:10px;background:#091e32}.slide img{display:block;max-width:100%;height:auto;margin:auto;max-height:680px;object-fit:contain}.slide figcaption{color:var(--muted);font-size:.85rem}.controls{display:flex;align-items:end;gap:12px;flex-wrap:wrap;background:#09223b;padding:13px;border-radius:12px}.controls label{display:grid;gap:3px;min-width:135px;flex:1}.controls input[type=range]{width:100%;accent-color:var(--mint)}.controls select{max-width:100%;background:#1a3e53;color:white;padding:8px;border:1px solid #598b97;border-radius:8px}.quick{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}.quick button{background:#194c58;border:1px solid #4f9e96;color:#fff;padding:5px 10px;border-radius:8px}.diagram-result{padding:7px;color:#bdf5dd}.question{margin:14px 0;padding:16px;border:1px solid #355c70;border-radius:14px;background:#0e2c46}.question h3{font-size:1.05rem;line-height:1.5}.options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.option{border:1px solid #507c8f;background:#17384e;color:#eefaff;border-radius:10px;padding:10px;text-align:left;line-height:1.5}.option:hover{background:#236077}.option.correct{border-color:#58e7ae;background:#16533f}.option.wrong{border-color:#f0a2a7;background:#62313c}.feedback{padding:12px;margin-top:9px;border-radius:9px;background:#1b4050}.retry{padding:7px 12px;border:1px solid var(--mint);color:var(--mint);background:transparent;border-radius:8px}.challenge{color:var(--gold)}.minor{background:transparent;color:var(--mint);border:1px solid var(--mint);border-radius:8px;padding:8px}.skip{position:absolute;left:-9999px}.skip:focus{position:static}.fig-small{font-size:12px}footer{padding:25px;color:var(--muted)}@media(max-width:900px){.page{grid-template-columns:minmax(0,1fr)}aside{position:static;max-height:none}#station-nav{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:520px){header{padding:10px;flex-wrap:wrap}.page{padding:8px;gap:10px}aside{padding:10px}#station-nav{grid-template-columns:repeat(2,minmax(0,1fr))}.hero{padding:18px}.station .inside{padding:12px}.options{grid-template-columns:1fr}.controls label{min-width:100%}.figure{padding:4px}.station h2{font-size:1.3rem}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}
.diagram-scroll{overflow-x:auto;overscroll-behavior-x:contain}.diagram-scroll-hint{display:none} @media(max-width:680px){.diagram-scroll svg{min-width:680px;max-height:none}.diagram-scroll-hint{display:block;color:var(--mint);font-size:.88rem}.slide img{min-width:0}}
[hidden]{display:none!important}.path-toggle{display:none;margin:0 0 10px}.diagram-scroll:focus-visible{outline:2px solid var(--gold);outline-offset:3px}@media(max-width:900px){.path-toggle{display:inline-block}}