:root{color:#27213b;font-synthesis:none;text-rendering:optimizelegibility;background:#fff7e6;font-family:ui-rounded,Avenir Next,Segoe UI,system-ui,-apple-system,sans-serif}*{box-sizing:border-box}body{background:radial-gradient(circle at 8% 4%,#ffd55c6b,#0000 24rem),radial-gradient(circle at 92% 20%,#74d5be4d,#0000 28rem),linear-gradient(#fffaf0 0%,#f7f1ff 100%);min-width:320px;min-height:100vh;margin:0;overflow-x:hidden}button{min-height:44px;font:inherit}button:focus-visible{outline-offset:3px;outline:4px solid #2c67d7}.app-shell{width:min(1180px,100%);margin:0 auto;padding:22px clamp(16px,3vw,38px) 34px}.app-header{align-items:center;gap:13px;margin-bottom:17px;display:flex}.brand-mark{background:#ffd95a;border:3px solid #27213b;border-radius:18px 18px 12px;flex:none;place-items:center;width:58px;height:58px;display:grid;transform:rotate(-3deg);box-shadow:4px 5px #27213b}.brand-bolt{letter-spacing:-.02em;font-size:.72rem;font-weight:900}.brand-copy h1,.brand-copy p,.mission-card h2,.mission-card p,.component-heading span,.component-heading small,.safety-note,.connection-note,.keyboard-help,.modal h2,.modal p{margin:0}.brand-copy h1{letter-spacing:-.045em;font-size:clamp(1.45rem,3vw,2.2rem);line-height:1}.brand-copy p{color:#6b607b;letter-spacing:.11em;text-transform:uppercase;margin-top:4px;font-size:.95rem;font-weight:800}.workshop-sign{color:#6b607b;letter-spacing:.08em;text-transform:uppercase;background:#ffffffa6;border:2px solid #d9cbed;border-radius:999px;margin-left:auto;padding:8px 13px;font-size:.78rem;font-weight:800}.playground{grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:14px 18px;display:grid}.mission-card{background:#ffffffdb;border:2px solid #ddd2ea;border-radius:22px;min-height:108px;padding:17px 20px;box-shadow:0 10px 32px #4b376614}.eyebrow{color:#8a4f20;letter-spacing:.12em;text-transform:uppercase;margin-bottom:6px;font-size:.75rem;font-weight:900;display:block}.mission-card h2{letter-spacing:-.02em;max-width:760px;font-size:clamp(1.08rem,2vw,1.45rem);line-height:1.22}.mission-card p{color:#6b607b;margin-top:7px;font-size:.91rem}.lab-controls{gap:8px;padding-bottom:2px;display:flex}.lab-controls button,.modal button,.switch-toggle{color:#352b49;cursor:pointer;background:#fff;border:2px solid #d5c8e4;border-radius:13px;font-weight:800;transition:transform .15s,background-color .15s,border-color .15s}.lab-controls button{white-space:nowrap;padding:0 15px}.lab-controls button:hover,.modal button:hover,.switch-toggle:hover{background:#f7f1ff;border-color:#8c73aa;transform:translateY(-1px)}.lab-controls button[aria-pressed=true]{color:#fff;background:#55466c;border-color:#55466c}.safety-note{color:#573b05;background:#fff3bd;border:2px solid #e5ae38;border-radius:15px;grid-column:1/-1;padding:12px 16px;font-weight:750}.connection-note{color:#55466c;text-align:center;grid-column:1/-1;font-size:.86rem;font-weight:750}.circuit-board{aspect-ratio:1000/560;touch-action:none;-webkit-user-select:none;user-select:none;background-color:#dff5e8;background-image:radial-gradient(circle,#38765a30 1.6px,#0000 1.8px),linear-gradient(135deg,#ffffff6b,#0000 48%);background-size:24px 24px,100% 100%;border:4px solid #4f3d67;border-radius:30px;grid-column:1/-1;width:100%;position:relative;overflow:hidden;box-shadow:0 9px #c6aee2,0 19px 38px #402b5724}.circuit-board:before{z-index:0;content:"";pointer-events:none;border:2px dashed #4d4e6329;border-radius:20px;position:absolute;inset:16px}.component{z-index:2;color:#332844;border:3px solid #493b5d;border-radius:clamp(15px,2vw,24px);flex-direction:column;justify-content:space-between;align-items:center;padding:clamp(8px,1.7vw,18px);display:flex;position:absolute;box-shadow:0 7px #493b5d3b,inset 0 2px #ffffffa8}.component:after{content:"";pointer-events:none;border:2px solid #ffffff75;border-radius:15px;position:absolute;inset:7px}.battery-component{background:#ffbd68;width:23%;height:48%;top:22%;left:5%}.switch-component{background:#a9d8ff;width:24%;height:38%;top:10%;left:39%}.device-component{background:#f5c9e7;width:25%;height:49%;top:26%;left:69%}.parts-tray,.discovery-panel{background:#fffdf8;border:2px solid #ddd2ea;border-radius:22px;grid-column:1/-1;padding:16px 20px}.parts-tray h3,.discovery-panel h3{margin:0 0 5px}.parts-tray p{color:#655672;margin:0 0 12px}.parts-options{gap:12px;display:flex}.parts-options button{color:#332844;cursor:pointer;text-align:left;background:#fff;border:2px solid #c8bdd6;border-radius:16px;flex:1;align-items:center;gap:10px;padding:8px 12px;display:flex}.parts-options button[aria-pressed=true]{background:#e5f6ee;border-color:#277f7b}.parts-options button span{gap:3px;display:grid}.parts-options button>small{margin-left:auto;font-weight:700}.parts-options .device-picture{flex-shrink:0;width:50px;height:48px}.device-picture{width:100%;height:100%;overflow:visible}.lamp-glass{fill:#fff7db;stroke:#85764e;stroke-width:3px}.powered .lamp-glass{fill:#ffe367;filter:drop-shadow(0 0 8px #ffca35)}.device-display{z-index:1;width:63%;height:54%}.device-caption{z-index:1;align-items:center;gap:6px;width:100%;display:flex}.device-caption .device-symbol{width:36%;height:26px}.device-state{font-size:clamp(.65rem,1vw,.85rem);font-weight:800}.device-state[data-powered=true]{text-underline-offset:3px;text-decoration:underline}.powered .fan-rotor{transform-origin:70px 49px;animation:1s linear infinite fan-spin}@keyframes fan-spin{to{transform:rotate(360deg)}}.discovery-panel{margin-top:10px}.discovery-panel p,.discovery-panel li{line-height:1.55}.discovery-controls{gap:10px;display:flex}.discovery-controls button{color:#352b49;cursor:pointer;background:#f7f1ff;border:2px solid #c8bdd6;border-radius:12px;padding:7px 16px;font-weight:800}@media (width<=800px){.parts-options{gap:7px}.parts-options button{flex-wrap:wrap;justify-content:center;padding:8px}.parts-options button>small{text-align:center;width:100%;margin:0}}@media (prefers-reduced-motion:reduce){.powered .fan-rotor{animation:none}}.component-heading{z-index:1;text-align:center;width:100%;display:grid}.component-heading span{letter-spacing:-.02em;font-size:clamp(.92rem,1.8vw,1.28rem);font-weight:900}.component-heading small{color:#655672;margin-top:2px;font-size:clamp(.68rem,1.05vw,.82rem);font-weight:700}.component>svg{z-index:1;width:min(72%,130px);height:auto;overflow:visible}.component>svg line,.component>svg circle{fill:none;stroke:currentColor;stroke-width:5px;stroke-linecap:round;stroke-linejoin:round}.component svg text{fill:currentColor;font-size:20px;font-weight:900}.switch-toggle{z-index:2;border-color:#5c7ea3;min-height:44px;padding:4px 15px;font-size:clamp(.68rem,1vw,.8rem)}.switch-toggle[aria-pressed=true]{color:#fff;background:#348c68;border-color:#2f6e55}.cable-layer{z-index:4;pointer-events:none;width:100%;height:100%;position:absolute;inset:0;overflow:visible}.cable{fill:none;stroke:#68547f;stroke-width:13px;stroke-linecap:round;filter:drop-shadow(0 4px 1px #37244738);transition:stroke .18s,filter .18s}.cable.energized{stroke:#ff9f31;stroke-dasharray:18 12;filter:drop-shadow(0 0 7px #ffac34e6);animation:.85s ease-in-out infinite alternate power-travel}.cable-preview{stroke:#786493;stroke-width:10px;stroke-dasharray:9 10;opacity:.78}@keyframes power-travel{0%{stroke-dashoffset:-18px}to{stroke-dashoffset:18px}}.terminal{z-index:6;aspect-ratio:1;color:#fff;cursor:grab;touch-action:none;background:#277f7b;border:5px solid #fff;border-radius:50%;place-items:center;width:clamp(48px,5.4vw,62px);min-height:0;padding:0;font-size:1rem;font-weight:900;transition:transform .15s,box-shadow .15s,background-color .15s;display:grid;position:absolute;transform:translate(-50%,-50%);box-shadow:0 0 0 3px #493b5d,0 6px #493b5d57}.terminal:active{cursor:grabbing}.terminal-positive{background:#d84d51}.terminal-negative{background:#38405f}.terminal[data-occupied=true]{box-shadow:inset 0 0 0 5px #ffffff70,0 0 0 3px #493b5d,0 6px #493b5d57}.terminal[data-targeted=true],.terminal[aria-pressed=true]{background:#e07a21;transform:translate(-50%,-50%)scale(1.16);box-shadow:0 0 0 5px #fff2a8,0 0 0 9px #ffa9338c,0 7px #493b5d4d}.keyboard-help{color:#6b607b;text-align:center;grid-column:1/-1;font-size:.82rem}.modal{background:#fffdf8;border:3px solid #493b5d;border-radius:22px;width:min(460px,100%);max-width:calc(100% - 40px);margin:auto;padding:24px;box-shadow:0 15px #27213b40}.modal::backdrop{background:#27213b94}.modal h2{font-size:1.35rem}.modal p{color:#5e526b;margin-top:10px;line-height:1.55}.modal>button,.dialog-actions{margin-top:20px}.modal button{padding:0 16px}.dialog-actions{justify-content:flex-end;gap:10px;display:flex}.dialog-actions button:last-child{color:#fff;background:#55466c;border-color:#55466c}@media (width<=800px){.app-shell{padding-top:14px}.workshop-sign{display:none}.playground{grid-template-columns:1fr;gap:11px}.mission-card{min-height:0;padding:14px 16px}.lab-controls{justify-content:stretch}.lab-controls button{flex:1}.circuit-board{border-width:3px;border-radius:22px;grid-column:1}.component{border-width:2px;box-shadow:0 5px #493b5d3b}.component:after{border-width:1px;inset:5px}.switch-toggle{min-height:44px;padding:4px 11px}}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@media (width<=560px){.app-header{margin-bottom:12px}.brand-mark{border-radius:15px;width:48px;height:48px}.mission-card p,.keyboard-help,.component-heading small{display:none}.lab-controls button{padding-inline:8px;font-size:.85rem}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}.cable.energized{stroke-dasharray:none;animation-name:none}}
