:root{--bg:#0f172a;--surface:#1e293b;--surface-2:#243449;--border:rgba(255,255,255,.1);--text:#f1f5f9;--muted:#a9b8cb;--violet:#a78bfa;--indigo:#6366f1;--cyan:#22d3ee;--pink:#f472b6;--green:#4ade80;--red:#fb7185}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 50% -12%,#29376c 0%,#17213d 26%,var(--bg) 58%);color:var(--text);font-family:'Noto Sans TC',system-ui,sans-serif;line-height:1.65}button,select,input{font:inherit}button{cursor:pointer}.container{max-width:1380px;margin:auto;padding:32px 28px 18px}.header{text-align:center;padding:43px 24px 36px;border:1px solid var(--border);border-radius:20px;background:rgba(255,255,255,.035)}.eyebrow,.section-kicker{color:var(--cyan);font-size:.76rem;font-weight:700;letter-spacing:.19em}.header h1{margin:12px 0 8px;font-size:clamp(2rem,4vw,3.45rem);letter-spacing:.02em;line-height:1.25}.header h1 span{display:inline-block;color:#b7a5ff}.subtitle{color:var(--muted);margin:0;font-size:1.04rem}.quick-nav{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:25px}.quick-nav a{color:#d8dcff;text-decoration:none;border:1px solid var(--border);background:rgba(99,102,241,.15);border-radius:999px;padding:5px 18px;font-size:.85rem}.quick-nav a:hover,.quick-nav a:focus-visible{background:rgba(99,102,241,.34)}.intro-strip{display:flex;align-items:center;justify-content:center;gap:22px;margin:24px 0 43px;padding:18px 22px;border-radius:16px;border:1px solid var(--border);background:rgba(30,41,59,.62)}.intro-strip>div{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.intro-strip strong{font-size:.95rem}.intro-strip small{color:var(--muted)}.step{display:grid;place-items:center;width:31px;height:31px;border-radius:50%;background:#353968;color:#d8d2ff;font-size:.75rem;font-weight:700}.strip-arrow{color:var(--violet)}section{scroll-margin-top:24px}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:18px;margin-bottom:18px}.section-heading h2,.training-card h2{margin:4px 0 0;font-size:1.55rem}.section-heading>p{margin:0;color:var(--muted);font-size:.9rem}.lab-grid{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:20px}.lab-left{display:grid;gap:20px;min-width:0}.card{border:1px solid var(--border);border-radius:17px;background:rgba(30,41,59,.87);box-shadow:0 20px 45px rgba(0,0,0,.14);padding:22px}.card-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}.card h3{font-size:1.08rem;margin:0}.pill{border-radius:999px;padding:4px 11px;background:rgba(167,139,250,.17);color:#c7b8ff;font-size:.73rem;white-space:nowrap}.pill.muted{background:rgba(148,163,184,.12);color:#b8c7d7}.diagram-card{min-height:365px}.neuron-diagram{display:block;width:100%;max-height:295px;margin:10px auto 0}.wire{stroke:#2dd4e4;stroke-width:5;stroke-linecap:round;opacity:.75}.output-wire{stroke:#a78bfa}.input-node{fill:#0e6679;stroke:var(--cyan);stroke-width:3}.center-glow{fill:rgba(167,139,250,.11)}.neuron-node{fill:url(#nodeGradient);stroke:#c5b5ff;stroke-width:3}.output-node{fill:#7c355f;stroke:var(--pink);stroke-width:3;transition:fill .2s}.output-node.off{fill:#334155;stroke:#94a3b8}.node-text{fill:#fff;font-size:26px;font-weight:700}.node-caption,.weight-label,.bias-label{fill:#cbd5e1;font-size:17px}.weight-label{fill:#67e8f9;font-weight:700}.bias-label{fill:#c4b5fd}.center-symbol{fill:#fff;font-size:35px;font-weight:700}.center-value{fill:#f5f3ff;font-size:16px;font-weight:700}.legend{display:flex;justify-content:center;flex-wrap:wrap;gap:24px;color:var(--muted);font-size:.8rem}.legend span{display:inline-flex;align-items:center;gap:8px}.legend-dot{width:10px;height:10px;border-radius:50%;display:inline-block}.legend-dot.cyan{background:var(--cyan)}.legend-dot.violet{background:var(--violet)}.legend-dot.pink{background:var(--pink)}.math-card{padding-bottom:17px}.equation{margin:17px 0;padding:18px;border:1px solid rgba(167,139,250,.18);border-radius:11px;background:#141f35;color:#d7e4f5;text-align:center;font-size:clamp(.85rem,1.6vw,1.08rem);overflow-wrap:anywhere}.equation strong{color:var(--cyan)}.result-row{display:flex;justify-content:space-between;align-items:center;gap:10px;color:var(--muted);font-size:.91rem}.result-badge{border-radius:8px;padding:5px 12px;color:#dcfce7;background:rgba(34,197,94,.19);white-space:nowrap}.result-badge.off{color:#e2e8f0;background:rgba(148,163,184,.2)}.fine-print{margin:13px 0 0;color:#94a3b8;font-size:.8rem}.controls{display:flex;flex-direction:column}.controls h4{font-size:.94rem;margin:0 0 11px}.field-label{display:block;color:#cbd5e1;font-size:.86rem;margin-top:18px;margin-bottom:7px}.controls select{width:100%;border:1px solid #485779;border-radius:9px;background:#111c30;color:var(--text);padding:10px}.control-hint{margin:9px 0 0;color:var(--muted);font-size:.79rem}.control-divider{height:1px;background:var(--border);margin:20px 0}.toggle-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.toggle{display:flex;justify-content:space-between;align-items:center;border:1px solid #45566e;border-radius:10px;padding:10px 13px;background:#17243a;color:var(--muted)}.toggle strong{display:grid;place-items:center;width:29px;height:29px;border-radius:7px;background:#334155;color:#fff}.toggle.on{border-color:#2caabc;color:#d2faff;background:rgba(34,211,238,.12)}.toggle.on strong{background:#0e7490}.slider-row{margin:0 0 17px}.slider-row label{display:flex;justify-content:space-between;color:#cbd5e1;font-size:.85rem}.slider-row output{color:#c4b5fd;font-weight:700;font-variant-numeric:tabular-nums}.slider-row input{width:100%;accent-color:var(--indigo);cursor:pointer}.secondary-button,.primary-button{border-radius:9px;padding:11px 15px;font-size:.87rem;font-weight:700}.secondary-button{background:#334155;border:1px solid #53637b;color:#f1f5f9}.secondary-button:hover{background:#40516a}.primary-button{border:1px solid transparent;color:#fff;background:linear-gradient(135deg,#7878f5,#5145cd)}.primary-button:hover{filter:brightness(1.14)}.controls>.secondary-button{margin-top:auto}.analysis-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px}.card-intro{color:var(--muted);font-size:.82rem;margin:8px 0 15px}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;text-align:center;font-size:.87rem}th{color:#aebbd0;font-weight:500;background:#162237;padding:9px 5px}td{padding:8px 5px;border-bottom:1px solid var(--border)}tbody tr{cursor:pointer}tbody tr:hover,tbody tr.selected{background:rgba(99,102,241,.18)}tbody tr:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px}.correct{color:var(--green)}.wrong{color:var(--red)}.boundary-card svg{width:100%;height:230px;display:block}.plot-bg{fill:#132238;stroke:#334155}.plot-region-one{fill:rgba(99,102,241,.17)}.axis{stroke:#94a3b8;stroke-width:1.5}.axis-label,.point-label{fill:#cbd5e1;font-size:15px}.boundary-line{stroke:#e9c46a;stroke-width:3;stroke-dasharray:8 5}.plot-point{stroke:#e2e8f0;stroke-width:2}.plot-point.one{fill:#a78bfa}.plot-point.zero{fill:#475569}.plot-point.selected{stroke:#fbbf24;stroke-width:4}.training-card{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:30px;margin-top:24px;background:linear-gradient(110deg,rgba(55,48,109,.58),rgba(30,41,59,.9))}.training-copy p{color:var(--muted);font-size:.9rem;max-width:700px}.rule{display:inline-block;padding:12px 17px;border-radius:9px;background:#141d36;color:#e6d7ff;font-size:clamp(.78rem,1.7vw,1rem);font-weight:700}.rule span{color:#65748c;padding:0 8px}.training-actions{display:flex;flex-direction:column;justify-content:center;gap:10px}.train-message{min-height:65px;color:#cbd5e1;font-size:.83rem;line-height:1.55;border-left:3px solid var(--violet);padding:7px 0 7px 12px}.next-section{margin-top:45px}.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.info-card{min-height:205px}.info-number{color:#8b91f7;font-size:.75rem;font-weight:700;letter-spacing:.15em}.info-card h3{margin:10px 0}.info-card p{color:var(--muted);font-size:.88rem;margin:0}.info-card a{color:#a5eff7;font-size:.83rem;display:inline-block;margin-top:10px}.footer{border-top:1px solid var(--border);display:flex;justify-content:space-between;gap:15px;margin-top:37px;padding:24px 3px;color:var(--muted);font-size:.85rem}.footer a{color:#c4b5fd;text-decoration:none}a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
@media(max-width:950px){.lab-grid{grid-template-columns:1fr}.controls{display:block}.controls>.secondary-button{width:100%}.analysis-grid{grid-template-columns:1fr 1fr}.intro-strip{gap:10px}.intro-strip small{display:none}}@media(max-width:700px){.container{padding:15px}.header{padding:35px 18px}.intro-strip{align-items:stretch;justify-content:space-between;margin-bottom:32px;padding:15px 10px;gap:5px}.intro-strip>div{flex-direction:column;text-align:center;gap:2px;flex:1}.intro-strip strong{font-size:.72rem}.strip-arrow{align-self:center}.section-heading{display:block}.section-heading>p{margin-top:5px}.analysis-grid,.training-card,.info-grid{grid-template-columns:1fr}.training-card{gap:14px}.card{padding:17px}.diagram-card{min-height:0}.neuron-diagram{height:auto}.footer{flex-direction:column}.equation{padding:13px 8px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}