:root{--bg0: #0e1412;--bg1: #16201c;--bg2: #1e2c26;--ink: #e6f0ea;--muted: #8aa396;--accent: #3ecf8e;--accent-dim: #2a9a68;--warn: #e8b84a;--err: #e85d5d;--line: #2a3a33;--font-display: "IBM Plex Sans", "Segoe UI", sans-serif;--font-mono: "IBM Plex Mono", "SF Mono", ui-monospace, monospace}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:radial-gradient(1200px 600px at 10% -10%,#1a3d32 0%,transparent 55%),radial-gradient(900px 500px at 100% 0%,#243528 0%,transparent 50%),var(--bg0);color:var(--ink);font-family:var(--font-display)}.app{max-width:1400px;margin:0 auto;padding:1rem 1.25rem 1.5rem;min-height:100vh;display:flex;flex-direction:column;gap:.85rem}.header{display:flex;flex-direction:column;gap:.25rem}.brand{display:flex;align-items:baseline;gap:.75rem}.brand-mark{font-size:clamp(1.6rem,3.5vw,2.2rem);font-weight:700;letter-spacing:-.04em;color:var(--accent)}.brand-sub{font-size:.95rem;color:var(--muted)}.tagline{margin:0;color:var(--muted);font-size:.85rem}.main{flex:1;display:grid;grid-template-columns:minmax(0,1.55fr) minmax(280px,1fr);gap:1rem;min-height:0}@media(max-width:960px){.main{grid-template-columns:1fr}}.workspace-pane{border:1px solid var(--line);background:var(--bg1);min-height:520px;height:calc(100vh - 8rem);overflow:hidden;position:relative}#blocklyDiv{position:absolute;top:0;right:0;bottom:0;left:0}.side-pane{display:flex;flex-direction:column;gap:.65rem;min-height:420px;max-height:calc(100vh - 8rem);overflow:auto}.side-pane>*{flex-shrink:0}.actions{display:flex;flex-wrap:wrap;gap:.5rem}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--line);background:var(--bg2);color:var(--ink);font:inherit;font-weight:600;padding:.55rem 1rem;cursor:pointer;transition:background .15s ease,border-color .15s ease,transform .1s ease}.btn:hover:not(:disabled){border-color:var(--accent-dim);transform:translateY(-1px)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn-primary{background:var(--accent);border-color:var(--accent);color:#062016}.btn-accent{background:transparent;border-color:var(--accent);color:var(--accent)}.btn-ghost{background:transparent}.hint{margin:0;font-size:.75rem;line-height:1.45;color:var(--muted)}.sim{display:flex;flex-direction:column;gap:.45rem;padding:.55rem 0 .15rem;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.sim-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.sim-head .preview-title{margin:0}.sim-actions{display:flex;gap:.4rem}.sim-actions .btn{padding:.35rem .75rem;font-size:.85rem}.sim-tabs{display:flex;gap:.25rem;border-bottom:1px solid var(--line);padding-bottom:.35rem}.sim-tab{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid transparent;background:transparent;color:var(--muted);font:inherit;font-size:.78rem;font-weight:600;padding:.3rem .65rem;cursor:pointer;letter-spacing:.03em}.sim-tab:hover{color:var(--ink)}.sim-tab.active{color:var(--accent);border-color:var(--line);background:var(--bg2)}.sim-panels{min-height:8rem}.sim-panel[hidden]{display:none!important}.sim-panel.active{display:block}.sim-ast-view{margin:0;padding:.55rem .65rem;background:var(--bg1);border:1px solid var(--line);font-family:var(--font-mono);font-size:.7rem;line-height:1.4;max-height:220px;overflow:auto}.ast-line{padding:.1rem .25rem;border-radius:2px;color:var(--ink);white-space:pre}.ast-line.active{background:#1a3d32;color:var(--accent);outline:1px solid var(--accent-dim)}.ast-line.ancestor{background:#152820;color:#b8d4c4}.ast-line.expanded{color:var(--muted)}.ast-line.expanded.active{color:var(--accent)}.ast-pad{color:transparent;-webkit-user-select:none;user-select:none}.sim-trace-current{margin:0 0 .35rem;font-family:var(--font-mono);font-size:.75rem;color:var(--accent);padding:.4rem .55rem;background:var(--bg1);border:1px solid var(--accent-dim)}.sim-trace-log{margin:0;padding:.55rem .65rem;background:var(--bg1);border:1px solid var(--line);font-family:var(--font-mono);font-size:.68rem;line-height:1.4;max-height:160px;overflow:auto;white-space:pre-wrap;color:var(--muted)}.sim-board{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.25rem}.uiap-root{width:100%}.uiap-shell{display:flex;flex-direction:column;gap:.55rem}.uiap-pcb{position:relative;width:min(100%,200px);margin:0 auto;aspect-ratio:.58;max-height:340px;border-radius:10px;background:radial-gradient(ellipse 80% 40% at 50% 18%,#2a4a3c 0%,transparent 55%),linear-gradient(165deg,#1a332a,#12241e 45%,#0e1c18);border:1px solid #3a5a4a;box-shadow:inset 0 0 0 1px #0006,0 8px 24px #0006;overflow:hidden}.uiap-usb{position:absolute;top:0;left:50%;transform:translate(-50%,-35%);width:42%;height:9%;display:flex;flex-direction:column;align-items:center;z-index:2}.uiap-usb-mouth{display:block;width:100%;height:70%;border-radius:0 0 4px 4px;background:linear-gradient(180deg,#9aa8a0,#5a6860 40%,#2a3230);border:1px solid #c8d4cc;box-shadow:inset 0 2px 4px #0008}.uiap-usb-label{font-size:.55rem;letter-spacing:.04em;color:#7a9a88;margin-top:.1rem}.uiap-silk{position:absolute;top:12%;right:22%;bottom:8%;left:22%;display:flex;flex-direction:column;align-items:center;gap:.35rem;pointer-events:none}.uiap-brand{font-size:.62rem;font-weight:700;letter-spacing:.06em;color:#8fbfa8;text-transform:uppercase}.uiap-mcu{font-family:var(--font-mono);font-size:.55rem;color:#6a8a78;padding:.35rem .55rem;border:1px solid #3a5a4a;background:#0a1612;border-radius:2px}.uiap-led-chip{width:.7rem;height:.7rem;margin-top:.35rem;border-radius:2px;background:#3a2820;border:1px solid #5a4030;box-shadow:inset 0 0 3px #0008;opacity:.35;transition:background .08s ease,box-shadow .08s ease,opacity .08s ease}.uiap-led-chip.on{background:#ff9a3c;border-color:#ffb060;box-shadow:0 0 10px #ff8a3088,inset 0 0 3px #fff6;opacity:1}.uiap-rst{margin-top:auto;font-size:.5rem;color:#6a8a78;border:1px solid #3a5a4a;border-radius:50%;width:1.4rem;height:1.4rem;display:flex;align-items:center;justify-content:center;background:#152820}.uiap-col{position:absolute;top:11%;bottom:4%;display:flex;flex-direction:column;justify-content:space-between;width:42%}.uiap-col-left{left:0;padding-left:.15rem}.uiap-col-right{right:0;padding-right:.15rem}.uiap-pad{display:flex;align-items:center;gap:.2rem;min-height:0;flex:1;font-size:.52rem;line-height:1.05;color:#9ab8a8;-webkit-user-select:none;user-select:none}.uiap-col-left .uiap-pad{justify-content:flex-end;text-align:right}.uiap-col-right .uiap-pad{justify-content:flex-start;text-align:left}.uiap-pad-text{display:flex;flex-direction:column;min-width:0}.uiap-pad-main{font-family:var(--font-mono);font-weight:600;font-size:.58rem;color:#c8e0d4}.uiap-pad-sub{font-size:.45rem;color:#6a8a78;white-space:nowrap}.uiap-hole{flex:0 0 auto;width:.55rem;height:.55rem;border-radius:50%;background:#050a08;border:1.5px solid #8aa396;box-shadow:inset 0 0 2px #000a}.uiap-pad-power .uiap-hole{border-color:#6a7a70}.uiap-pad-nc{opacity:.4}.uiap-pad-nc .uiap-hole{border-style:dashed}.uiap-pad.interactive{cursor:pointer;pointer-events:auto}.uiap-pad.interactive:hover .uiap-hole,.uiap-pad.selected .uiap-hole{border-color:var(--accent);box-shadow:0 0 6px #3ecf8e66}.uiap-pad.pressed .uiap-hole,.uiap-pad.low .uiap-hole{background:#1a4030;border-color:var(--accent)}.uiap-pad.high .uiap-hole{border-color:#e8b84a;box-shadow:0 0 4px #e8b84a44}.uiap-pad.led-lit .uiap-pad-main{color:#ffb060}.uiap-pad.pwm .uiap-hole{border-color:#6a9cff}.uiap-controls{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.55rem .75rem}.uiap-note{margin:0;flex:1 1 100%;font-size:.65rem;color:var(--muted)}.sim-led-wrap{display:flex;flex-direction:column;align-items:center;gap:.35rem}.sim-led{width:2.4rem;height:2.4rem;border-radius:50%;background:#1a2420;border:2px solid var(--line);box-shadow:inset 0 0 8px #0008;transition:background .08s ease,box-shadow .08s ease,opacity .08s ease;opacity:.35}.sim-led.on{background:#6dffb0;border-color:#3ecf8e;box-shadow:0 0 14px #3ecf8e88,inset 0 0 6px #fff4;opacity:1}.sim-led-label{font-size:.7rem;color:var(--muted)}.sim-controls{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.55rem .75rem;flex:1;min-width:12rem}.sim-field{display:flex;flex-direction:column;gap:.2rem;font-size:.72rem;color:var(--muted)}.sim-field select,.sim-field input[type=range]{font:inherit;font-family:var(--font-mono);font-size:.75rem;color:var(--ink);background:var(--bg1);border:1px solid var(--line);padding:.3rem .4rem}.sim-analog{flex:1;min-width:8rem}.sim-analog input[type=range]{width:100%;padding:0;accent-color:var(--accent)}.sim-press{padding:.4rem .85rem;font-size:.8rem;-webkit-user-select:none;user-select:none}.sim-press:active,.sim-press.pressed{border-color:var(--accent);color:var(--accent);background:#1a3d32}.sim-status{margin:0;font-family:var(--font-mono);font-size:.72rem;color:var(--muted)}.sim-status.running{color:var(--warn)}.hint code{font-family:var(--font-mono);color:var(--accent);font-size:.72rem}.status{font-family:var(--font-mono);font-size:.8rem;color:var(--muted);padding:.2rem 0}.status.ok{color:var(--accent)}.status.err{color:var(--err)}.status.busy{color:var(--warn)}.payload{display:flex;flex-direction:column;gap:.35rem}.payload-summary{max-height:140px;min-height:72px;border-color:var(--accent-dim)}.payload-meta{margin:0;font-family:var(--font-mono);font-size:.72rem;color:var(--accent);line-height:1.4}.output{margin:0;padding:.75rem .9rem;background:var(--bg1);border:1px solid var(--line);color:var(--ink);font-family:var(--font-mono);font-size:.75rem;line-height:1.45;overflow:auto;white-space:pre-wrap;word-break:break-word;min-height:120px;max-height:180px}.previews{display:flex;flex-direction:column;gap:.85rem}.preview{display:flex;flex-direction:column;gap:.35rem}.preview-title{margin:0;font-size:.78rem;font-weight:600;color:var(--muted);letter-spacing:.04em;text-transform:uppercase}.preview-body{margin:0;padding:.7rem .85rem;background:var(--bg1);border:1px solid var(--line);color:var(--ink);font-family:var(--font-mono);font-size:.72rem;line-height:1.45;overflow:auto;white-space:pre-wrap;min-height:4.5rem;max-height:10rem}.blocklyMainBackground{fill:#16201c!important}.blocklyToolboxDiv{background:#1e2c26!important;border-right:1px solid var(--line)}.blocklyFlyoutBackground{fill:#1a2621!important}.blocklyScrollbarHandle{fill:#3a4e44!important}.blocklyWidgetDiv,.blocklyDropDownDiv{font-family:var(--font-display)}