*{box-sizing:border-box}body{margin:0;background:#1b2341;color:#fff4ce;font-family:'Courier New',monospace;padding-bottom:0!important}main{width:min(1500px,98vw);margin:auto;padding:10px;min-height:100dvh;display:flex;flex-direction:column;gap:8px}header{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:center;background:#58351e;border:4px solid #10182b;padding:9px;color:#ffe277;font-size:12px;font-weight:bold}header a{color:inherit;text-decoration:none}.heading{display:flex;justify-content:space-between;align-items:center;gap:10px}h1{font-size:clamp(19px,2.4vw,30px);margin:3px 0}nav{display:flex;align-items:center;gap:7px;flex-wrap:wrap}button,select,input,a.button{font:700 15px 'Courier New',monospace;border:3px solid #142c43;box-shadow:3px 3px #091329;background:#6cc9ff;color:#142c43;padding:10px;cursor:pointer}select{background:#fff4ce;max-width:320px}button:hover,a.button:hover{background:#ace7ff}button:disabled{cursor:default;opacity:.55}button:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible,a:focus-visible{outline:4px solid #e49a13;outline-offset:3px}button,a.button{touch-action:manipulation}input{background:white;cursor:text;min-width:0;max-width:95%}h2{font-size:clamp(21px,2.5vw,31px);margin:0}h3,p{margin:0}.teacher{background:#fff4ce;color:#142c43;border:3px solid #142c43;display:flex;gap:12px;align-items:center;padding:7px}.teacher img{width:47px;height:55px;object-fit:cover;object-position:20% 30%;border:2px solid #74512d}.teacher p{font-size:19px}.picture-guide{margin:0!important;padding:8px 12px!important;border-width:3px!important;flex-shrink:0}.guide-dots,.guide-example,.guide-dock,.teacher>p{display:none!important}.guide-words p{font-size:clamp(17px,2vw,23px)!important}.guide-symbol{font-size:33px!important;min-width:40px!important}.guide-actions button{font-size:14px!important;padding:7px!important;min-height:38px!important}.teacher:has(.picture-guide){display:none}body>.picture-guide{display:none}#workbench{display:grid;grid-template-columns:34% 1fr;gap:14px;min-height:330px;flex:1;border:5px solid #10182b;background:#273c58;padding:12px;box-shadow:5px 5px #090e22}#computer{position:relative;min-height:300px;background:#1a695e;border:10px solid #758a9e;box-shadow:inset 0 0 0 5px #152c42;overflow:hidden}.case-label{position:absolute;top:5px;left:12px;color:#bcf8df;font-size:12px;letter-spacing:2px}.board-traces{position:absolute;inset:40px 15px 20px;background:repeating-linear-gradient(90deg,transparent 0 32px,#319883 33px 36px,transparent 37px 56px),repeating-linear-gradient(0deg,transparent 0 38px,#319883 39px 42px,transparent 43px 71px)}.component{position:absolute;display:flex;align-items:center;justify-content:center;text-align:center;gap:5px;border:4px solid #172e43;background:#b5c5c2;color:#142c43;font-size:clamp(11px,1.2vw,17px);font-weight:bold;padding:5px;box-shadow:3px 3px #143c36}.component.active{outline:5px solid #ffd65c;box-shadow:0 0 22px #ffdc7d}.component.learned{background:#91d0ab}.component.pulse{animation:signal .4s steps(2) infinite}[data-part=motherboard]{top:13%;left:5%;width:54%;height:13%;background:#4dbaa0}[data-part=cpu]{top:35%;left:13%;width:34%;height:24%;background:#d7b1d6;border-style:double;border-width:8px}[data-part=ram]{top:31%;right:8%;width:21%;height:32%;background:repeating-linear-gradient(0deg,#347a59 0 20px,#c3dc99 21px 30px);color:white}[data-part=ssd]{bottom:9%;left:7%;width:42%;height:15%;background:#d8b576}[data-part=power]{bottom:8%;right:5%;width:36%;height:15%;background:#c2bbac}[data-part=fan]{top:8%;right:5%;width:30%;height:19%;background:#b3bfd0;flex-direction:column}.fan-art{font-size:34px;line-height:1}[data-part=gpu]{top:68%;left:9%;width:78%;height:12%;background:#81accc}.case-light{position:absolute;bottom:2%;right:3%;width:9px;height:9px;background:#6f7d77}#computer.powered .case-light{background:#aaff7b;box-shadow:0 0 12px #aaff7b}#activity{background:#fff4ce;color:#142c43;border:4px solid #142c43;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:18px;min-width:0;text-align:center;overflow:auto}#activity .explain{font-size:clamp(18px,2vw,25px);max-width:560px;line-height:1.4}.part-icon{font-size:clamp(40px,6vw,75px)}.actions,.tray,.slots,.commands,.repair-options{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}.chip{min-width:94px;min-height:65px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;touch-action:none;user-select:none;cursor:grab}.chip span{font-size:28px}.slot{min-width:105px;min-height:75px;background:#e0e4cf;border:3px dashed #63808b;box-shadow:none}.slot.full{background:#9bdfb3;border-style:solid}.selected{outline:4px solid #d28913}.chip.dragging{position:relative;z-index:20;cursor:grabbing;opacity:.9}#circuit{width:min(100%,450px);max-height:220px;touch-action:none;cursor:crosshair;background:#1b665b;border:4px solid #18384b}#circuit path{fill:none;stroke:#627f74;stroke-width:16;stroke-linecap:round;stroke-linejoin:round}#circuit .lit{stroke:#ffe070;stroke-width:8}#circuit circle{fill:#ffe070;stroke:#18384b;stroke-width:4}.pet-screen{border:8px solid #244357;background:#a8dce7;padding:14px;min-width:150px;min-height:100px;display:flex;align-items:center;justify-content:center}.pixel-pet{width:84px;height:70px;position:relative;background:#c88a56;clip-path:polygon(0 0,25% 0,25% 15%,75% 15%,75% 0,100% 0,100% 85%,75% 85%,75% 100%,25% 100%,25% 85%,0 85%)}.pixel-pet:before{content:'';position:absolute;inset:30% 0 0;background:linear-gradient(90deg,transparent 20%,#172f43 20% 30%,transparent 30% 70%,#172f43 70% 80%,transparent 80%);height:12px}.pixel-pet:after{content:'';position:absolute;background:#ffcaab;width:35%;height:20%;left:33%;top:58%;border-top:7px solid #172f43}.hopping{animation:hop .5s steps(3) infinite}.spinning{animation:spin .7s linear infinite}.wagging{animation:wag .25s steps(2) infinite}.memory-status{display:flex;gap:20px;align-items:center;justify-content:center;flex-wrap:wrap}.memory-status p{padding:12px;border:3px solid #63808b;background:#e1e7d6;font-weight:bold}#danceForm{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}#danceName{width:230px}.power-socket{padding:22px;border:6px dashed #597889;min-width:140px;background:#d5dfcf}.power-socket.full{background:#94d8a7}.fan-demo{font-size:85px;line-height:1;color:#355b76}.fan-demo.turning{animation:spin .6s linear infinite}#fanHold{touch-action:none;user-select:none}meter{width:min(300px,80%);height:30px}.pixel-grid{display:grid;grid-template-columns:repeat(2,70px);gap:4px;padding:8px;background:#18384b}.pixel-grid .slot{min-width:70px;min-height:60px;padding:5px;border-width:2px}.tile{min-width:60px;min-height:55px}.tile[data-id=ear],.pixel-grid .slot[data-kind=ear]{background:#c88a56}.tile[data-id=eye],.pixel-grid .slot[data-kind=eye]{background:#31516a;color:white}.tile[data-id=nose],.pixel-grid .slot[data-kind=nose]{background:#ffcaab}.tile[data-id=tail],.pixel-grid .slot[data-kind=tail]{background:#e5b76c}#feedback{min-height:24px;font-size:15px;margin:0}a.button{display:inline-block;text-decoration:none}.badge{background:#9bdfb3;padding:10px;border:3px solid #265741}.saved-name{font-size:20px;font-weight:bold;overflow-wrap:anywhere;max-width:100%}@keyframes signal{50%{filter:brightness(1.6)}}@keyframes hop{50%{transform:translateY(-15px)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes wag{50%{transform:rotate(8deg)}}@media(min-width:900px) and (min-height:580px){main{height:100dvh;min-height:0;overflow:hidden}#workbench{min-height:0}#computer{min-height:0}#activity{padding:12px;gap:10px}.teacher{display:none}.picture-guide{flex-shrink:0}}@media(max-height:700px) and (min-width:900px){nav button,nav select{padding:6px}#activity{gap:8px}.part-icon{font-size:48px}#activity .explain{font-size:21px}.pet-screen{min-height:83px;padding:6px}.chip{min-height:53px}.slot{min-height:60px}#circuit{max-height:180px}header{padding:6px}.heading h1{font-size:24px}}@media(max-width:700px){main{padding:7px}header{font-size:10px}nav{font-size:12px}nav button,select{font-size:12px;padding:7px}select{max-width:230px}#workbench{grid-template-columns:1fr;padding:6px;gap:8px}#computer{min-height:120px;border-width:6px}.case-label{font-size:9px;top:2px}.component{font-size:10px;border-width:2px;padding:2px;box-shadow:none}[data-part=motherboard]{left:3%;top:25%;width:30%;height:25%}[data-part=cpu]{left:36%;top:25%;width:25%;height:35%;border-width:4px}[data-part=ram]{right:3%;top:23%;width:15%;height:60%}[data-part=fan]{top:5%;right:22%;width:13%;height:42%;font-size:8px}.fan-art{font-size:19px}[data-part=gpu]{left:36%;top:66%;width:40%;height:25%}[data-part=ssd]{left:3%;bottom:8%;width:29%;height:29%}[data-part=power]{left:63%;top:48%;width:16%;height:15%;font-size:7px}#activity{min-height:360px;padding:12px}.teacher{display:none}.picture-guide{gap:6px!important}.guide-actions button{font-size:12px!important}.guide-words{min-width:160px!important}.guide-words p{font-size:17px!important}.chip{min-width:80px}.slot{min-width:88px}.part-icon{font-size:48px}}

.teacher{display:none}.hardware-page .stage{position:relative}.hardware-page .picture-guide{background:#fff4ce}.hardware-page .guide-point{display:none!important}
.command-work,.memory-work{display:flex;align-items:center;justify-content:center;gap:18px;width:100%;min-width:0}.command-controls{display:flex;flex-direction:column;gap:12px;min-width:0}.command-controls .chip,.command-controls .slot{min-width:80px}.command-controls .tray,.command-controls .slots{gap:7px}.command-work .pet-screen,.memory-work .pet-screen{min-width:110px;flex-shrink:0}#danceForm{align-items:center}@media(max-width:700px){.command-work,.memory-work{flex-direction:column;gap:12px}.command-controls .chip,.command-controls .slot{min-width:78px}.command-controls{gap:10px}.memory-work .slots{flex-wrap:nowrap}}
.gpu-work{display:flex;align-items:center;justify-content:center;gap:25px}.gpu-work .pixel-pet{transition:opacity .2s}.chip.dragging{pointer-events:none}@media(max-width:700px){.gpu-work{gap:12px}.gpu-work .pet-screen{min-width:100px}}
.hardware-page #guideCheer{display:none!important}.component[data-part=motherboard]{background:transparent!important;border:0;box-shadow:none;color:#d3ffe9}.component[data-part=motherboard].active{outline:0;box-shadow:none}#computer:has([data-part=motherboard].active){outline:4px solid #ffd65c;outline-offset:-4px}

#circuit .circuit-start{animation:circuit-dot 1s ease-in-out infinite}#circuit.tracing .circuit-start{animation:none}#circuit .circuit-tip{fill:#fff8ce;stroke:#fff8ce;stroke-width:1;pointer-events:none}@keyframes circuit-dot{50%{fill:#fff8ce;stroke:#ffd65c;stroke-width:7}}