:root{--bg:#0d0d10;--fg:#ececf1;--muted:#7d7d87;--faint:#ffffff12;--card:#121217b8;--accent:#fca5a5;--accent-rgb:252, 165, 165;--glow:rgba(var(--accent-rgb), .13);--led:#ff4d4d;--power:#fdba74;--gnd:#52525b;--mono:ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;--radius:16px}*{box-sizing:border-box;margin:0}body{background-color:var(--bg);background-image:radial-gradient(ellipse 70% 55% at 50% -10%, var(--glow), transparent 70%), radial-gradient(#ffffff09 1px, transparent 1px);min-height:100vh;color:var(--fg);-webkit-font-smoothing:antialiased;background-size:auto,22px 22px;background-attachment:fixed;padding:0 16px 32px;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}.top{text-align:center;padding:clamp(28px,7vh,64px) 0 clamp(20px,4vh,36px);animation:.9s cubic-bezier(.2,.7,.2,1) both rise}.logo{letter-spacing:-.03em;font-size:clamp(2rem,6vw,3.25rem);font-weight:250;line-height:1.1}.logo span{color:var(--accent);font-weight:400}.logo:after{content:"";background:linear-gradient(90deg, transparent, var(--accent), transparent);border-radius:2px;width:56px;height:2px;margin:1rem auto 0;display:block}.tagline{max-width:34rem;color:var(--muted);margin:1rem auto 0;font-size:.95rem;line-height:1.55}.lab{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:20px;max-width:1180px;margin:0 auto;animation:.9s cubic-bezier(.2,.7,.2,1) .1s both rise;display:grid}@media (max-width:880px){.lab{grid-template-columns:minmax(0,1fr)}}.card{background:var(--card);border:1px solid var(--faint);border-radius:var(--radius);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);min-width:0;padding:18px}.foot{text-align:center;max-width:1180px;color:var(--muted);margin:28px auto 0;font-size:.85rem}.dim{opacity:.65}.board svg{width:100%;height:auto;display:block}.pcb{fill:#ffffff06;stroke:#ffffff1a}.mount circle{fill:var(--bg);stroke:#ffffff1f}.header-frame{fill:#00000059;stroke:#ffffff14}.chip{fill:#ffffff0a;stroke:#ffffff1f}.chip.dim{fill:#ffffff05}.chip-label,.pin-num,.part-label,.board-label{font-family:var(--mono);fill:var(--muted)}.chip-label{font-size:10px}.pin-num{font-size:8px}.part-label{font-size:10px}.part-label.dim{opacity:.7;font-size:8.5px}.board-label{letter-spacing:.04em;font-size:11px}.board-label.dim{font-size:9px}.port{fill:#ffffff08;stroke:#ffffff1a}.breadboard{fill:#ffffff05;stroke:#ffffff14}.hole{fill:#ffffff12}.pin rect{fill:#ffffff0a;stroke:#ffffff1a;stroke-width:.8px}.pin circle{fill:#8b8b94;transition:fill .12s}.pin.pwr3 circle,.pin.pwr5 circle{fill:var(--power);opacity:.75}.pin.gnd circle{fill:var(--gnd)}.pin.gpio.out circle{fill:color-mix(in srgb, var(--accent) calc(var(--level,0) * 100%), #5b5b63)}.pin.gpio.out rect{stroke:rgba(var(--accent-rgb), calc(.15 + var(--level,0) * .6))}.pin.gpio.in circle{fill:var(--bg);stroke:var(--accent);stroke-width:1.2px}.pin.gpio.in rect{stroke:rgba(var(--accent-rgb), .45)}.wire{fill:none;stroke-width:2.4px;stroke-linecap:round;transition:stroke .12s}.wire.signal{stroke:color-mix(in srgb, var(--wire,var(--accent)) calc(25% + var(--level,0) * 75%), transparent)}.wire.gnd{stroke:#ffffff2e}.leg{stroke:#a1a1aa;stroke-width:1.6px;stroke-linecap:round}.led-glow{fill:var(--led);opacity:0;transition:opacity 50ms}.led-body{fill:#3a1518;stroke:#ff787840}.led-rim{fill:#4a1c20}.led-lit{fill:var(--led);opacity:0;transition:opacity 50ms}.rgb-glow{opacity:0;transition:opacity 50ms}.rgb-body{fill:#2a2a31;stroke:#ffffff2e}.rgb-rim{fill:#34343c}.rgb-lit{opacity:0;transition:opacity 50ms}.buzzer-body{fill:#141418;stroke:#ffffff2e}.buzzer-hole{fill:#050507;stroke:#ffffff1a}.buzzer-plus{font-family:var(--mono);fill:var(--muted);font-size:8px}.buzz-wave{fill:none;stroke:var(--accent);stroke-width:1.6px;stroke-linecap:round;opacity:0}.buzzer.on .buzz-wave{animation:.5s ease-out infinite buzz}.buzzer.on .buzz-wave.w2{animation-delay:.12s}.buzzer.on .buzzer-body{stroke:rgba(var(--accent-rgb), .6)}.servo-body{fill:#60a5fa29;stroke:#60a5fa66}.servo-tab{fill:#60a5fa1a;stroke:#60a5fa4d}.servo-cable{fill:none;stroke:#b45309;stroke-width:3px;stroke-linecap:round}.servo-plug{fill:#18181b;stroke:#ffffff40}.servo-horn path,.servo-horn circle{fill:#71717a;stroke:#0006}.servo.attached .servo-horn path,.servo.attached .servo-horn circle{fill:#e4e4e7}.servo-screw{fill:#3f3f46}.sensor-body{fill:#38bdf821;stroke:#38bdf866}.transducer{fill:#3f3f46;stroke:#a1a1aa;stroke-width:1.2px;transition:stroke .2s}.transducer-mesh{stroke:none}.mesh-dot{fill:#18181b}.distance.active .transducer{stroke:var(--accent)}.sensor-text{font-family:var(--mono);fill:var(--fg);font-size:7.5px}.adc-body{fill:#18181b;stroke:#ffffff38}.adc-notch{fill:var(--bg);stroke:#ffffff38}.adc-label{font-family:var(--mono);fill:var(--muted);font-size:7px}.chip-pin{fill:#a1a1aa}.pot-base{fill:#3b82f638;stroke:#3b82f673}.pot-knob{fill:#27272a;stroke:#a1a1aa}.pot-pointer{stroke:var(--accent);stroke-width:2px;stroke-linecap:round}.board-note{font-family:var(--mono);fill:var(--muted);opacity:.6;font-size:8px}.button{cursor:pointer;touch-action:none;outline:none}.button-body{fill:#1c1c22;stroke:#ffffff24}.button-cap{fill:#2c2c34;stroke:#fff3;transition:fill 80ms}.button:hover .button-cap{fill:#34343d}.button.pressed .button-cap{fill:rgba(var(--accent-rgb), .55)}.button:focus-visible .button-body{stroke:var(--accent);stroke-width:1.5px}.legend{color:var(--muted);flex-wrap:wrap;justify-content:center;gap:6px 16px;margin-top:12px;padding:0;font-size:.8rem;list-style:none;display:flex}.legend li{align-items:center;gap:6px;display:flex}.dot{border-radius:50%;width:9px;height:9px;display:inline-block}.dot.out{background:var(--accent);box-shadow:0 0 6px var(--accent)}.dot.in{border:1.5px solid var(--accent)}.dot.power{background:var(--power);opacity:.75}.dot.gnd{background:var(--gnd)}.controls{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:8px 20px;margin-top:12px;display:grid}.control{color:var(--muted);align-items:center;gap:10px;font-size:.8rem;display:flex}.control span{min-width:6.5em}.control input[type=range]{min-width:0;accent-color:var(--accent);flex:1}.control output{text-align:right;min-width:4.5ch;font-family:var(--mono);color:var(--fg);font-size:.75rem}.board-foot{flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 14px;margin-top:10px;display:flex}.hint{color:var(--muted);font-size:.8rem}kbd{font-family:var(--mono);border:1px solid var(--faint);border-radius:4px;padding:1px 5px;font-size:.75rem}.code-card{flex-direction:column;gap:12px;display:flex}.toolbar{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.spacer{flex:1}select,.btn{font:inherit;color:var(--fg);border:1px solid var(--faint);cursor:pointer;background:#ffffff0a;border-radius:999px;padding:6px 14px;font-size:.875rem}select{max-width:100%}select option{background:#18181d}.btn:disabled{opacity:.4;cursor:default}.btn.primary{background:var(--accent);border-color:var(--accent);color:#2a0d0d;padding:6px 20px;font-weight:600}.btn.primary:not(:disabled):hover{box-shadow:0 0 18px rgba(var(--accent-rgb), .45)}.btn.small{padding:3px 12px;font-size:.75rem}.btn[aria-pressed=true]{border-color:rgba(var(--accent-rgb), .5);color:var(--accent)}.btn.ghost:not(:disabled):hover{border-color:rgba(var(--accent-rgb), .5)}select:focus-visible,.btn:focus-visible,.link:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.status{color:var(--muted);align-items:center;gap:7px;font-size:.8rem;display:inline-flex}.status:before{content:"";background:var(--muted);border-radius:50%;width:7px;height:7px}body[data-state=ready] .status:before{background:#86efac}body[data-state=running] .status:before{background:var(--accent);animation:1.2s ease-in-out infinite blink}body[data-state=loading] .status:before,body[data-state=stopping] .status:before{animation:.8s ease-in-out infinite blink}body[data-state=error] .status:before{background:#f87171}.editor{resize:vertical;border:1px solid var(--faint);background:#00000059;border-radius:12px;height:360px;min-height:200px;overflow:hidden}.editor:focus-within{border-color:rgba(var(--accent-rgb), .4)}.console-head{color:var(--muted);letter-spacing:.08em;text-transform:uppercase;justify-content:space-between;align-items:baseline;font-size:.75rem;display:flex}.link{font:inherit;color:var(--muted);cursor:pointer;letter-spacing:inherit;text-transform:inherit;background:0 0;border:none}.link:hover{color:var(--fg)}.console{border:1px solid var(--faint);min-height:90px;max-height:220px;font-family:var(--mono);white-space:pre-wrap;word-break:break-word;background:#00000059;border-radius:12px;padding:12px 16px;font-size:12.5px;line-height:1.55;overflow:auto}.console [data-stream=stderr]{color:var(--accent)}.console [data-stream=info]{color:var(--muted)}@keyframes rise{0%{opacity:0;transform:translateY(10px)}}@keyframes buzz{0%{opacity:.9}to{opacity:.1}}@keyframes blink{50%{opacity:.35}}@media (prefers-reduced-motion:reduce){.top,.lab{animation:none}.status:before{animation:none!important}.buzzer.on .buzz-wave{opacity:.8;animation:none}}
