:root{color-scheme:dark;--bg:#0c1119;--panel:#121c29;--line:#2a384b;--ink:#f1f6ff;--muted:#adbed1;--mint:#7af0cb}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.55 Inter,"Microsoft JhengHei","PingFang TC",system-ui,sans-serif}header,footer{display:flex;justify-content:space-between;align-items:center;padding:16px max(4vw,20px);border-bottom:1px solid var(--line)}.brand{font-weight:800;letter-spacing:.08em}.logo{display:inline-grid;place-items:center;background:var(--mint);color:#102722;width:34px;height:34px;border-radius:9px;margin-right:6px;font-size:22px}.course,footer span{color:var(--muted);font-size:12px}main{max-width:1480px;margin:auto;padding:24px max(4vw,18px) 36px}nav{display:flex;gap:8px;border-bottom:1px solid var(--line);padding-bottom:13px}button,select{font:inherit;color:inherit;background:#1b2838;border:1px solid var(--line);border-radius:8px;padding:7px 11px}button{cursor:pointer}button:hover:not(:disabled){border-color:var(--mint)}button:focus-visible,select:focus-visible{outline:2px solid var(--mint);outline-offset:3px}button:disabled{opacity:.45;cursor:default}nav button{background:transparent;border-color:transparent;color:var(--muted)}button[aria-pressed=true]{color:var(--mint);background:#173331;border-color:#30574e}.intro{padding:22px 0 20px}h1,h2,h3,p{margin:0}h1{font-size:clamp(29px,4vw,49px);letter-spacing:.015em;line-height:1.2}.intro p{margin-top:8px;color:var(--muted)}h2{font-size:17px}h3{font-size:17px}.layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,365px);gap:16px;align-items:start}.stage,aside,.lesson-card{border:1px solid var(--line);border-radius:15px;overflow:hidden;background:var(--panel)}.stage{position:relative;background:radial-gradient(ellipse at 50% 43%,#20334a,#101a29 75%)}.stage-top,.stage-bottom{position:absolute;left:0;right:0;display:flex;justify-content:space-between;align-items:center;gap:8px;padding:12px 15px;pointer-events:none;color:var(--muted);font-size:12px}.stage-top{top:0}.stage-bottom{bottom:0;background:#101a29dc;border-top:1px solid var(--line)}i{display:inline-block;width:8px;height:8px;background:var(--mint);border-radius:50%;margin-right:5px}.camera{display:flex;gap:4px;pointer-events:auto}.camera button{padding:4px 8px}canvas{display:block;width:100%;height:clamp(455px,65vh,690px);touch-action:none;cursor:grab}canvas:active{cursor:grabbing}aside{padding:14px}.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.quiet{background:transparent;color:var(--muted);font-size:12px}#parts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}#parts button{text-align:left;font-size:13px;min-height:48px;padding:5px 9px}small{display:block;color:var(--muted);font-size:11px}.detail-text{color:var(--muted);margin:7px 0 11px}#detail{border-top:1px solid var(--line);margin-top:13px;padding-top:12px}#detail select{width:100%;margin:4px 0 9px}#detail label{font-size:12px;color:var(--muted)}.primary{background:var(--mint);color:#102922;font-weight:750;border-color:var(--mint)}#status{color:#ffc684;font-size:13px;margin-top:6px}.lesson-card{padding:clamp(14px,4vw,34px);max-width:1000px}#diagram{display:flex;flex-wrap:wrap;gap:9px;align-items:center;min-height:104px;padding:15px;background:#0e1724;border-radius:10px}.node{padding:10px 12px;border:1px solid var(--line);border-radius:8px}.node.on{color:var(--mint);border-color:var(--mint);background:#173331}.arrow{color:var(--muted)}#steps,.controls{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}#stepText{margin-top:20px;min-height:110px}#stepText p{margin-top:6px;color:var(--muted)}footer{border-top:1px solid var(--line);border-bottom:0;color:var(--muted);font-size:12px}@media(max-width:800px){.layout{grid-template-columns:1fr}canvas{height:420px}}@media(max-width:420px){nav button{padding:7px}.stage-bottom{padding:8px}.stage-bottom span{max-width:115px}canvas{height:370px}}
.model-note{margin-top:12px;color:var(--muted);font-size:12px}
body{background:#eaf0f5;color:#172d43;color-scheme:light}
main{max-width:1600px;padding:14px 24px 24px}
nav{position:sticky;top:0;z-index:5;background:#eaf0f5ed;backdrop-filter:blur(12px);padding:10px 0;gap:10px;border-color:#ccd8e2}
button,select{min-height:48px;touch-action:manipulation;font-size:15px}
nav button{color:#536a7c;background:#fff;border:1px solid #d5dfe8;padding:12px 24px;border-radius:12px}
nav button[aria-pressed=true]{background:#173b50;color:#bdffe9;border-color:#173b50}
.intro{padding:18px 0}h1{font-size:28px}.intro p{color:#566e82}
.layout{grid-template-columns:minmax(0,1fr) 340px;gap:20px}
.stage{border:1px solid #354c63;border-radius:20px;box-shadow:0 15px 35px #213a521c;background:radial-gradient(ellipse at 45% 40%,#304b64,#132538 80%)}
.stage-top{color:#d7e7f1;padding:18px 20px}
.view-tools{position:absolute;top:55px;left:16px;display:flex;gap:8px;z-index:1}
.view-tools button{background:#13293dd9;color:#cce8ef;border-color:#526c81;font-size:13px}
.view-tools button[aria-pressed=true]{background:#254b50;color:#aaffdf}
canvas{height:610px}
.stage-bottom{padding:12px;color:#d0e0ed}.camera button{min-width:46px;min-height:46px;background:#253c51;color:#fff}
aside{background:#fff;border-color:#d3dfe8;padding:18px;border-radius:20px;box-shadow:0 10px 30px #223c5010}
#parts button{background:#f3f7fa;border-color:#dbe5ec;min-height:64px;color:#344f64;padding:9px 12px}
#parts button[aria-pressed=true]{background:#dff6ed;border-color:#53a98e;color:#125e4c}
small,.detail-text,#detail label{color:#617586}.detail-text{font-size:15px;line-height:1.8}
#detail{border-color:#dbe4ec}#detail select{background:#f4f8fb;color:#213b51;border-color:#cbd9e3;min-height:50px}
#fit{width:100%;margin-top:4px}.quiet{color:#647c8e;border-color:#d2dce4}
#status{color:#a55215}.model-note{color:#697f90;font-size:12px}
.lesson-card{max-width:none;background:white;border-color:#d3dfe8;padding:22px;border-radius:20px}
#diagram{background:#eef4f8;padding:24px;justify-content:center;gap:16px}
.node{background:white;border-color:#c5d6e2;padding:18px 24px;color:#436176;font-size:18px}
.node.on{background:#d9f7eb;border-color:#4ab393;color:#155e4e;box-shadow:0 0 0 5px #dcf5eb}
#steps button,.controls button{background:#e8eff5;color:#26465c;border-color:#c7d6e1}
#steps button[aria-pressed=true]{background:#173b50;color:#afffe1}
#stepText p{color:#4e687b;font-size:18px;line-height:1.85}
#stepText{min-height:150px}.controls .primary{background:#174e49;color:white}
#flowStage{margin-bottom:20px}#flowStage canvas{height:440px}
#flowStage .view-tools{display:none}
.pulse{animation:pulse 1.3s ease-in-out infinite}
@keyframes pulse{50%{transform:translateY(-5px);box-shadow:0 8px 20px #51b79740}}
@media(max-width:1050px){main{padding:10px 16px}.layout{grid-template-columns:minmax(0,1fr) 310px;gap:12px}canvas{height:620px}.stage-bottom{flex-wrap:wrap;justify-content:center}.stage-bottom span{width:100%;text-align:center}.view-tools{top:51px}aside{padding:12px}}
@media(max-width:820px){.layout{grid-template-columns:1fr}canvas{height:480px}aside{display:grid;grid-template-columns:1fr 1fr;gap:16px}.panel-head{grid-column:1/-1;margin:0}#detail{margin:0;padding:0 0 0 16px;border-top:0;border-left:1px solid #dbe4ec}#status{grid-column:1/-1}#parts button{min-height:64px}nav button{flex:1;padding:12px 6px}.intro p{font-size:14px}}
@media(max-width:500px){aside{display:block}#detail{border-left:0;border-top:1px solid #dbe4ec;padding:14px 0 0;margin-top:14px}.panel-head{margin-bottom:10px}canvas{height:430px}.node{padding:12px;font-size:15px}}
@media(prefers-reduced-motion:reduce){.pulse{animation:none}}
#diagram[hidden]{display:none}#parts button{touch-action:none}#power{width:100%;margin-top:12px;grid-column:1/-1}.drag-part{position:fixed;transform:translate(-50%,-50%);pointer-events:none;z-index:99;background:#c4ffe7;color:#174535;padding:20px;border:2px solid #49bd90;border-radius:14px;box-shadow:0 10px 35px #0005}.drop-ready{outline:3px solid #5ae0b3;outline-offset:3px}#flowStage canvas{height:540px}#status{font-size:16px;padding-top:8px;line-height:1.7}
.stage .material-layer{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}.stage #view{position:relative;z-index:2}.stage-top,.stage-bottom,.view-tools{z-index:3}
html,body{height:100%;overflow:hidden;background:#101b29}main{height:100%;padding:0;max-width:none}nav{position:absolute;top:12px;left:16px;z-index:8;background:transparent;border:0;padding:0}nav button{min-height:42px;padding:8px 15px;background:#152a3de8;color:#c5dce8;border-color:#40586d;font-size:13px}#lab{height:100%}#lab>.intro,.model-note{display:none}.layout{height:100%;display:block}.stage{height:100%;border:0;border-radius:0;box-shadow:none}canvas#view{height:calc(100% - 156px);width:100%}.stage .material-layer{height:calc(100% - 156px)}.stage-top{top:63px;padding:8px 20px}.view-tools{top:104px;left:16px}.view-tools button{min-height:40px}.stage-bottom{bottom:164px;background:transparent;border:0;justify-content:flex-end;padding:0 16px}.stage-bottom>span{display:none}.camera{gap:6px}.camera button{background:#1b3246de}.stage>#power{position:absolute;right:18px;top:104px;z-index:4;width:auto;margin:0}.stage>#status{position:absolute;left:50%;transform:translateX(-50%);bottom:220px;z-index:5;background:#132b40eb;color:#e4f7ff;border-radius:12px;max-width:550px;padding:10px 18px;pointer-events:none}.stage>#status:empty{display:none}aside{display:none!important}body.show-info aside{display:block!important;position:fixed;right:16px;top:66px;bottom:170px;width:340px;max-width:90vw;overflow:auto;z-index:10;box-shadow:0 20px 80px #0008}#shelf{position:absolute;bottom:0;left:0;right:0;height:156px;z-index:4;display:flex;gap:14px;overflow-x:auto;padding:10px 18px 14px;background:linear-gradient(#263d50,#142435);border-top:5px solid #607487;box-shadow:0 -8px 24px #0004;overscroll-behavior-x:contain}.shelf-item{flex:0 0 144px;min-height:120px;background:transparent;border:0;color:#e4edf3;padding:4px 8px;touch-action:none;font-size:11px;line-height:1.35;display:flex;flex-direction:column;align-items:center;gap:4px}.shelf-item small{font-size:10px;color:#99b8c7}.shelf-item.fitted{opacity:.45}.mini{display:block;position:relative;width:77px;height:53px;margin:0 0 4px;border:2px solid #829295;border-radius:3px;box-shadow:5px 5px 0 #07121d,0 10px 12px #0005;transform:perspective(200px) rotateX(15deg) rotateY(-18deg);background:linear-gradient(125deg,#48645d,#263e36)}.mini i,.mini b{position:absolute;display:block}.mini-board i{width:23px;height:23px;left:18px;top:8px;background:#9dabb1;border:4px solid #283b41}.mini-board b{right:10px;top:5px;height:35px;width:7px;background:repeating-linear-gradient(#242e32 0 5px,#b2a874 5px 7px)}.mini-cpu{width:46px;height:46px;background:linear-gradient(135deg,#e5eaee,#778f9b);border:5px solid #39504a}.mini-ram{height:25px;margin-top:15px;background:repeating-linear-gradient(90deg,#35414b 0 9px,#172129 9px 17px);border-bottom:4px solid #b4a06c}.mini-drive{background:linear-gradient(135deg,#b7c1ca,#586b78)}.mini-drive i{width:33px;height:33px;border-radius:50%;background:conic-gradient(#ccd4d7,#7a8d9a,#dde3e5,#8699a2,#ccd4d7);left:5px;top:5px}.mini-drive b{height:14px;width:27px;background:#e1e7e9;right:4px;bottom:4px}.drive-0{height:21px;margin-top:17px;background:#25332f;border:1px solid #506c5e}.drive-0 i{border-radius:0;width:38px;height:13px;top:3px;background:#15202b}.drive-0 b{height:12px;width:20px;bottom:3px}.drive-2{background:#1c242b}.drive-2 i{border-radius:0;background:#45535e;width:50px;height:3px;top:15px;left:10px}.drive-2 b{background:#b64832;width:14px;height:12px}.mini-psu{background:linear-gradient(120deg,#55616b,#202c37)}.mini-psu i{left:8px;top:4px;width:41px;height:41px;border-radius:50%;background:repeating-radial-gradient(#1b2933 0 2px,#72828c 3px 4px)}.mini-gpu{background:#354551;height:34px;margin-top:12px;width:100px}.mini-gpu i,.mini-gpu b{width:27px;height:27px;top:2px;border-radius:50%;background:repeating-conic-gradient(#1c2931 0 20deg,#83929b 20deg 40deg);border:2px solid #15212b}.mini-gpu i{left:12px}.mini-gpu b{right:12px}#lesson{height:100%;overflow:auto;padding:76px 16px 16px;background:#eaf0f5}#flowStage .stage{height:640px}#flowStage #shelf,#flowStage #power{display:none}#flowStage canvas#view,#flowStage .material-layer{height:100%}#flowStage .stage-bottom{bottom:12px}#flowStage .stage-top{top:8px}
#lesson{height:100%;padding:0;overflow:hidden;color:#dfedf5;background:radial-gradient(ellipse at 45% 40%,#304b64,#132538 80%)}#lesson>.intro{display:none}.lesson-card{height:100%;position:relative;padding:0;border:0;border-radius:0;background:transparent;overflow:hidden}.lesson-dock{position:absolute;bottom:0;left:0;right:0;z-index:6;min-height:170px;padding:12px 22px 16px;border-top:5px solid #607487;background:linear-gradient(#263d50,#142435);display:grid;grid-template-columns:1fr auto;gap:8px 20px;box-shadow:0 -8px 24px #0004}#steps{margin:0;gap:7px}.lesson-dock #stepText{grid-column:1/-1;grid-row:2;margin:0;min-height:0}.lesson-dock #stepText h2{font-size:14px;color:#9fe8ce}.lesson-dock #stepText p{color:#c3d5e2;font-size:15px;line-height:1.6;margin-top:4px;max-width:1100px}.lesson-dock .controls{margin:0;flex-wrap:nowrap;align-self:start}#steps button,.controls button{min-height:44px;padding:8px 13px;background:#172d41;border-color:#4b6377;color:#d6e9f3}#steps button[aria-pressed=true],.controls .primary{background:#2c635c;border-color:#7ac9ae;color:#dcfff0}#flowStage{position:absolute;inset:0 0 170px;margin:0}#flowStage .stage{height:100%;background:transparent}#flowStage .stage-top{top:65px}#flowStage .stage-bottom{bottom:8px}#flowStage #status{display:none}#diagram{position:absolute;inset:65px 0 170px;border-radius:0;background:transparent;padding:24px 5%;display:flex;align-items:center;justify-content:center}.cycle-board{width:min(920px,100%);display:grid;grid-template-columns:1fr .6fr 1.75fr;align-items:center;position:relative;padding:38px 25px;background:linear-gradient(130deg,#253e40,#132a30);border:2px solid #537572;border-radius:18px;box-shadow:10px 14px 0 #0d2029,0 25px 60px #0005}.chip{min-height:128px;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;background:linear-gradient(135deg,#3b4d5a,#1b2b37);border:3px solid #647985;border-radius:8px;box-shadow:0 0 0 5px #162a32,0 8px 12px #0004;color:#bacdd7}.chip strong{font-size:clamp(22px,4vw,42px);letter-spacing:.06em}.chip span{font-size:14px}.chip small{min-height:18px;font-size:12px;color:#b8d5d7}.chip.active{border-color:#94f0cd;color:#d3fff0;box-shadow:0 0 0 5px #254b47,0 0 35px #76edbd30}.cpu-frame{display:grid;grid-template-columns:1fr 1fr;gap:20px;border:1px solid #657d87;padding:30px 15px 18px;border-radius:12px;position:relative;background:#101f2b66}.cpu-caption{position:absolute;top:6px;left:15px;font-size:12px;color:#a4bdcb}.bus{height:38px;background:repeating-linear-gradient(0deg,transparent 0 8px,#568f82 8px 10px);position:relative}.packet{position:absolute;left:0;top:5px;white-space:nowrap;padding:5px 9px;border-radius:6px;background:#a8f4d3;color:#153c32;font-size:12px;font-weight:700;z-index:2;animation:transmit 2.5s linear infinite;box-shadow:0 0 15px #7affbf60}[data-phase="3"] .packet{animation-direction:reverse}[data-phase="1"] .packet,[data-phase="2"] .packet{animation-name:signal}.paused .packet{animation-play-state:paused}@keyframes transmit{0%{left:0;opacity:0}15%{opacity:1}85%{opacity:1}100%{left:calc(100% - 35px);opacity:0}}@keyframes signal{50%{filter:brightness(1.3);transform:scale(1.05)}}@media(max-width:760px){.lesson-dock{padding:10px 14px;gap:8px;min-height:205px;grid-template-columns:1fr}.lesson-dock .controls{grid-row:3}.lesson-dock #stepText{grid-row:2}.lesson-dock #stepText p{font-size:13px}#diagram,#flowStage{bottom:205px}.cycle-board{padding:28px 14px;grid-template-columns:1fr .45fr 1.7fr}.cpu-frame{gap:10px;padding:27px 10px 12px}.chip{min-height:110px}.chip span{font-size:12px}.chip small{font-size:10px}}@media(max-height:580px){.lesson-dock{min-height:145px}#diagram,#flowStage{bottom:145px}.cycle-board{padding:22px 16px}.chip{min-height:95px}.lesson-dock #stepText p{font-size:13px}}@media(prefers-reduced-motion:reduce){.packet{animation:none}}
.stage-top{gap:16px;white-space:nowrap;align-items:center}.stage-top #count{font-size:12px;text-align:right;background:#12283cda;padding:5px 9px;border-radius:7px;max-width:65%;white-space:normal}nav button{white-space:nowrap;flex-shrink:0}.stage-top>span:first-child{flex-shrink:0}
.mini-cooler{width:56px;height:52px;background:repeating-linear-gradient(90deg,#a5b0b7 0 2px,#394952 2px 4px);border:2px solid #70808a}.mini-cooler i{left:6px;top:4px;width:40px;height:40px;border-radius:50%;background:repeating-conic-gradient(#17232c 0 20deg,#82929c 20deg 40deg);border:3px solid #263640}.mini-cooler b{left:21px;top:19px;width:10px;height:10px;border-radius:50%;background:#a2afb7}
.mini-cooler.cooler-1{width:48px;height:56px;background:repeating-linear-gradient(0deg,#adbcc7 0 2px,#45545f 2px 4px);transform:perspective(180px) rotateY(-28deg);border-top:5px solid #748794;border-bottom:5px solid #ba8758}.mini-cooler.cooler-1 i{left:30px;top:5px;width:24px;height:40px;border-radius:45%;border-color:#26333e}.mini-cooler.cooler-1 b{left:38px;top:20px;width:8px;height:10px}
#cacheTools{display:none;position:absolute;top:65px;right:14px;z-index:7;gap:6px}#lesson[data-page=cycle] #cacheTools{display:flex}#cacheTools button{min-height:34px;font-size:12px;padding:5px 10px;color:#d4eee8;background:#1d3b4b;border-color:#577a87}#cacheNote{position:absolute;z-index:12;right:14px;top:108px;bottom:180px;width:min(430px,calc(100% - 28px));padding:18px;overflow:auto;background:#132c3ff7;border:1px solid #6a929e;border-radius:12px;box-shadow:0 16px 45px #0006;font-size:14px;line-height:1.7}#cacheNote p{margin-top:12px}#cacheNote a{color:#9be4c7}#closeCache{float:right}#lesson[data-page=flow] #cacheNote{display:none}#lesson[data-page=cycle] .stage-top #count{display:none}
#lessonCaption{grid-column:1/-1;grid-row:2;margin:0;color:#b7ffe3;font-size:14px;line-height:1.4}.lesson-dock #stepText{grid-row:3}.lesson-dock #stepText h2{display:none}.lesson-dock #stepText p{margin:0}.lesson-dock{row-gap:6px}@media(max-width:760px){.lesson-dock .controls{grid-row:4}.lesson-dock #stepText{grid-row:3}#lessonCaption{font-size:13px}}