:root{--bg: #eef1f5;--surface: #ffffff;--surface-2: #f6f7f9;--surface-3: #edf0f4;--border: #e1e5eb;--border-strong: #cfd5de;--text: #1d2430;--muted: #677184;--accent: #ea5a0c;--accent-hover: #d14f08;--accent-soft: #fff1e8;--ok: #1f9d55;--ok-soft: #e5f6ec;--warn: #b7791f;--warn-soft: #fff6e0;--err: #d33b3b;--err-soft: #fdecec;--text-2: #3a4352;--digital: #ff6a2a;--digital-tint: #ffeadf;--digital-ink: #a63c0a;--analog: #ffc928;--analog-tint: #fff4cc;--analog-ink: #7a5600;--iic: #3d6fe0;--iic-tint: #e4ecff;--iic-ink: #2346a6;--motor: #df2a2f;--motor-tint: #fde4e4;--motor-ink: #a51c20;--float-edge: rgba(20, 30, 50, .1);--float-shadow: 0 2px 6px rgba(20, 30, 50, .08), 0 8px 24px rgba(20, 30, 50, .1);--radius: 10px;--shadow: 0 1px 2px rgba(20, 30, 50, .06), 0 4px 14px rgba(20, 30, 50, .08);--font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;color-scheme:light}*{box-sizing:border-box}html,body{height:100%;margin:0}body{background:var(--bg);color:var(--text);font:14px/1.45 var(--font);display:flex;flex-direction:column;overflow:hidden}button,select,input{font:inherit;color:inherit}button{cursor:pointer}.muted{color:var(--muted)}.small{font-size:12px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}[hidden]{display:none!important}svg.chev{width:14px;height:14px;opacity:.6}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.btn{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 13px;border:1px solid var(--border-strong);border-radius:8px;background:var(--surface);font-weight:600;transition:background .12s,border-color .12s,box-shadow .12s}.btn:hover{background:var(--surface-2)}.btn:active{transform:translateY(1px)}.btn svg{width:15px;height:15px;flex:none}.btn.big{height:38px;padding:0 16px;font-size:15px}.btn.icon-only{padding:0;width:38px;justify-content:center}.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}.btn.primary:hover{background:var(--accent-hover)}.btn.ghost{border-color:transparent;background:transparent}.btn.ghost:hover{background:var(--surface-3)}.btn.small{height:28px;padding:0 10px;font-size:12.5px}.btn.full{width:100%;justify-content:center;text-align:center}.btn.full:not(.small){height:auto;min-height:38px;padding:8px 12px;line-height:1.25}.link{color:var(--muted);font-size:12px;font-weight:500}.link:hover{color:var(--text);text-decoration:underline}.topbar{display:flex;align-items:center;gap:20px;padding:8px 16px;background:var(--surface);border-bottom:1px solid var(--border)}.brand{display:flex;align-items:baseline;gap:8px}.brand-mark{align-self:center;position:relative;width:24px;height:18px;border-radius:5px;background:var(--accent)}.brand-mark i{position:absolute;top:6px;width:4px;height:4px;background:#fff;border-radius:1px}.brand-mark i:first-child{left:5px}.brand-mark i:last-child{right:5px}.brand-name{font-weight:800;font-size:18px;letter-spacing:.01em}.brand-sub{color:var(--muted);font-weight:500}.run-controls{display:flex;align-items:center;gap:8px}.file-controls{display:flex;align-items:center;gap:6px;margin-left:auto}.status{display:inline-flex;align-items:center;gap:7px;margin-left:4px;padding:4px 11px;border-radius:999px;background:var(--surface-3);color:var(--muted);font-weight:600;font-size:13px}.status .dot{width:8px;height:8px;border-radius:50%;background:#9aa3b2}.status.running{background:var(--ok-soft);color:var(--ok)}.status.running .dot{background:var(--ok);animation:pulse 1.4s ease-in-out infinite}@keyframes pulse{50%{opacity:.35}}.menu-wrap{position:relative}.menu{position:absolute;right:0;top:calc(100% + 6px);z-index:30;width:340px;max-height:70vh;overflow-y:auto;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);padding:6px}.menu-item{display:block;width:100%;text-align:left;border:0;background:none;padding:9px 11px;border-radius:8px}.menu-item:hover,.menu-item:focus-visible{background:var(--surface-2);outline:none}.menu-item b{display:block;font-weight:600}.menu-item span{color:var(--muted);font-size:12.5px}.layout{flex:1;min-height:0;display:grid;grid-template-columns:var(--code-w, 44%) 6px 1fr}.right-col{min-width:0;min-height:0;display:flex;flex-direction:column}.right-col .stage{flex:1;min-height:200px}.hresizer{flex:none;height:6px;cursor:row-resize;background:var(--border);transition:background .15s}.hresizer:hover,.hresizer.dragging{background:var(--accent)}.right-col .side{flex:none;height:var(--side-h, 40%);min-height:0}.right-col .side.collapsed{height:auto}.side.collapsed .side-body{display:none}.right-col:has(.side.collapsed) .hresizer{display:none}.pane{min-width:0;min-height:0;display:flex;flex-direction:column}.resizer{cursor:col-resize;background:var(--border);transition:background .15s}.resizer:hover,.resizer.dragging{background:var(--accent)}body.resizing iframe{pointer-events:none}.tabs{display:inline-flex;gap:2px;padding:3px;background:var(--surface-3);border-radius:9px}.tabs button{border:0;background:transparent;padding:5px 14px;border-radius:7px;font-weight:600;color:var(--muted)}.tabs button:hover{color:var(--text)}.tabs button.active{background:var(--surface);color:var(--text);box-shadow:0 1px 2px #00000014}.code-pane{background:var(--surface)}.pane-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px;border-bottom:1px solid var(--border)}.code-body{flex:1;min-height:0;position:relative}.tab-panel{position:absolute;top:0;right:0;bottom:0;left:0}#blocks{background:#fff}#blocks iframe{width:100%;height:100%;border:0;display:block}#editor{overflow:hidden}#editor .cm-editor{height:100%;font-size:13px}#editor .cm-scroller{font-family:var(--mono)}.console{border-top:1px solid var(--border);background:var(--surface-2)}.console-bar{display:flex;align-items:center;gap:8px;width:100%;padding:7px 12px;border:0;background:none;font-weight:600;text-align:left}.console-bar .spacer{flex:1}.console-bar .chev{transform:rotate(180deg);transition:transform .15s}.console.open .console-bar .chev{transform:none}.console #clear-console{display:none}.console.open #clear-console{display:inline}#console{display:none;height:150px;overflow-y:auto;padding:4px 12px 8px;font:12.5px/1.5 var(--mono)}.console.open #console{display:block}#console .line{white-space:pre-wrap;word-break:break-word;padding:1px 0}#console .serial{color:#1d4f91}#console .info{color:var(--muted)}#console .warn{color:var(--warn)}#console .error{color:var(--err)}#console .count{color:var(--muted);margin-left:6px}.badge{display:inline-flex;align-items:center;height:19px;padding:0 7px;border-radius:999px;font-size:11.5px;font-weight:700;margin-right:4px}.badge.warn{background:var(--warn-soft);color:var(--warn)}.badge.error{background:var(--err-soft);color:var(--err)}.stage{position:relative;background:#dde3ea;container:stage / size}@container stage (max-width: 660px){.field-label{display:none}.field{padding-left:4px}.pill-select select{max-width:170px}.seg button{padding:0 8px}}@container stage (max-height: 520px){.mb-float{width:150px}.mb-actions .btn{height:26px;padding:0 6px}}#viewport{position:absolute;top:0;right:0;bottom:0;left:0}#viewport canvas{display:block;touch-action:none}.overlay{position:absolute;display:flex;gap:8px;align-items:center}.bottom-left{left:12px;bottom:12px;align-items:stretch}.bottom-right{right:12px;bottom:12px}.stage-bar{position:absolute;left:12px;right:12px;top:12px;display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;pointer-events:none}.stage-bar>*{pointer-events:auto}.field,.toolbar,.mb-float,.move-banner{background:var(--surface);border:1px solid var(--float-edge);box-shadow:var(--float-shadow)}.field{display:inline-flex;align-items:center;gap:4px;height:40px;padding:0 4px 0 12px;border-radius:12px}.field-label{font-size:12px;font-weight:500;color:var(--muted)}.pill-select{position:relative;display:inline-flex;align-items:center}.pill-select select{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;background:transparent;font-weight:600;height:32px;padding:0 30px 0 8px;border-radius:8px;max-width:240px}.pill-select select:hover{background:var(--surface-2)}.pill-select .chev{position:absolute;right:9px;pointer-events:none}.seg{display:inline-flex;padding:3px;border-radius:9px;gap:2px;background:var(--surface-3)}.seg button{border:0;background:none;height:28px;padding:0 11px;border-radius:7px;font-weight:600;color:var(--muted)}.seg button:hover{color:var(--text)}.seg button.active{background:var(--surface);color:var(--text);box-shadow:0 1px 2px #141e321f}.toolbar{display:flex;gap:2px;padding:4px;border-radius:14px}.tool{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:62px;height:52px;padding:0 8px;border:0;border-radius:10px;background:none;font-size:12px;font-weight:600;color:var(--muted)}.tool svg{width:20px;height:20px}.tool:hover{background:var(--surface-2);color:var(--text)}.tool[aria-pressed=true]{color:var(--text)}.tool[aria-pressed=false] svg{opacity:.4}#move-robot[aria-pressed=false] svg{opacity:1}#move-robot[aria-pressed=true]{background:var(--accent);color:#fff}#fullscreen[aria-pressed=false] svg{opacity:1}.stage:fullscreen{width:100vw;height:100vh}body.stage-max .stage{position:fixed;top:0;right:0;bottom:0;left:0;z-index:60}.move-banner{position:absolute;left:50%;top:64px;transform:translate(-50%);display:flex;align-items:center;gap:8px;padding:6px 6px 6px 14px;border-radius:12px;font-weight:600;white-space:nowrap}.move-banner .tool{min-width:36px;height:32px}.mb-float{flex-direction:column;gap:0;padding:4px;border-radius:14px;width:188px}.mb-head{display:flex;align-items:center;gap:7px;width:100%;height:32px;padding:0 8px;border:0;border-radius:9px;background:none;font-weight:600;font-size:13px;color:var(--text)}.mb-head:hover{background:var(--surface-2)}.mb-head .ico{width:16px;height:16px;color:var(--muted)}.mb-head .chev{margin-left:auto;transition:transform .15s}.mb-float.collapsed{width:auto}.mb-float.collapsed .mb-body{display:none}.mb-float.collapsed .mb-head .chev{transform:rotate(180deg)}.mb-body{padding:2px 4px 4px}#microbit svg{width:100%;height:auto;display:block;-webkit-user-select:none;user-select:none}#microbit .mb-btn{cursor:pointer}#microbit .mb-btn:hover circle.cap{fill:#444}#microbit .mb-btn.down circle.cap{fill:var(--accent)}#microbit .logo{cursor:pointer}#microbit .logo.down path{stroke:var(--accent)}.mb-actions{display:flex;gap:6px;justify-content:center;margin-top:6px}.mb-actions .btn{flex:1;justify-content:center}.side{background:var(--surface);border-top:1px solid var(--border)}.side-head{display:flex;align-items:flex-end;gap:8px;padding:0 12px;border-bottom:1px solid var(--border)}.side-tabs{flex:1;display:flex;gap:4px;padding:0;background:none;border-radius:0}.side-tabs button{position:relative;display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 12px;border:0;border-radius:0;background:none;box-shadow:none;font-weight:600;color:var(--muted)}.side-tabs button:after{content:"";position:absolute;left:8px;right:8px;bottom:-1px;height:2px;border-radius:2px;background:transparent}.side-tabs button:hover{color:var(--text)}.side-tabs button.active{color:var(--text);background:none;box-shadow:none}.side-tabs button.active:after{background:var(--text)}.side.collapsed .side-tabs button.active:after{background:transparent}.side.collapsed .side-tabs button.active{color:var(--muted)}.tab-count:empty{display:none}.tab-count{min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--surface-3);color:var(--muted);font-size:12px;line-height:20px;text-align:center;font-variant-numeric:tabular-nums}.side-tabs button.active .tab-count{background:var(--text);color:#fff}.side-toggle{align-self:center;margin-left:auto;flex:none}.side-tabs{min-width:0}.side-toggle .chev{transition:transform .15s}.side.collapsed .side-toggle .chev{transform:rotate(180deg)}.side-body{flex:1;min-height:0;overflow-y:auto;padding:16px;container-type:inline-size;background:var(--surface-2)}.side-panel{max-width:980px;margin:0 auto}.section-title{margin:20px 0 8px;font-size:13px;font-weight:600;color:var(--text-2)}.section-title:first-child{margin-top:0}.hint{color:var(--muted);font-size:13px;margin:6px 0 0}.kind-chip{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:6px;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;background:var(--kind-tint);color:var(--kind-ink)}.k-digital{--kind: var(--digital);--kind-tint: var(--digital-tint);--kind-ink: var(--digital-ink)}.k-analog{--kind: var(--analog);--kind-tint: var(--analog-tint);--kind-ink: var(--analog-ink)}.k-iic{--kind: var(--iic);--kind-tint: var(--iic-tint);--kind-ink: var(--iic-ink)}.k-motor{--kind: var(--motor);--kind-tint: var(--motor-tint);--kind-ink: var(--motor-ink)}.dot{display:inline-block;width:9px;height:9px;border-radius:50%;flex:none}.montage{display:grid;gap:16px}@container (min-width: 700px){.montage{grid-template-columns:minmax(0,2fr) minmax(250px,1fr);align-items:start}.montage-mode{grid-column:1 / -1}}.panel-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px 16px}.montage-mode{display:flex;gap:4px;padding:4px;border-radius:12px;background:var(--surface-3)}.montage-mode button{flex:1;display:flex;align-items:center;gap:10px;min-height:52px;padding:6px 12px;text-align:left;border:0;border-radius:9px;background:none;color:var(--muted)}.montage-mode button svg{width:26px;height:26px;flex:none}.montage-mode button b{display:block;font-weight:600;color:inherit}.montage-mode button span{display:block;font-size:12px}.montage-mode button:hover{color:var(--text)}.montage-mode button.active{background:var(--surface);color:var(--text);box-shadow:0 1px 3px #141e321f}.montage-mode button.active span{color:var(--muted)}.board{display:grid;grid-template-columns:minmax(0,1fr) 76px minmax(0,1fr);gap:8px;align-items:stretch}.board .col{display:flex;flex-direction:column;gap:6px}.board .row{grid-column:1 / -1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.nezha-pic{display:flex;align-items:center;justify-content:center}.nezha-pic svg{width:72px;height:auto}.port{position:relative;display:flex;align-items:center;gap:8px;min-height:44px;padding:6px 10px 6px 12px;text-align:left;overflow:hidden;border:1px dashed var(--border-strong);border-radius:9px;background:var(--surface);transition:border-color .12s,background .12s}.port:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--kind);opacity:.45}.port .what{display:flex;align-items:center;gap:6px;min-width:0;font-size:13px;font-weight:500;color:var(--muted);line-height:1.2}.port .what .name{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.port.filled{border-style:solid;border-color:var(--border)}.port.filled:before{opacity:1}.port.filled .what{color:var(--text);font-weight:600}.port:hover{border-color:var(--border-strong);background:var(--surface-2)}.port.open{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.port.motor{flex-direction:column;align-items:flex-start;gap:4px}@container (max-width: 480px){.board{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.nezha-pic{display:none}.board .row{grid-template-columns:repeat(2,minmax(0,1fr))}.montage-mode button span{display:none}}.legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:12px;font-size:12px;color:var(--muted)}.legend span{display:inline-flex;align-items:center;gap:6px}.legend i{width:10px;height:10px;border-radius:3px;background:var(--kind)}.cables{display:flex;flex-direction:column;gap:8px}.cables .line{display:flex;justify-content:space-between;align-items:baseline;font-weight:600}.cables .line small{font-weight:500;color:var(--muted);font-size:12px}.cables.over .line{color:var(--err)}.cable-bar{display:grid;grid-template-columns:repeat(var(--n),1fr);gap:4px}.cable-bar i{height:8px;border-radius:4px;background:var(--surface-3)}.cable-bar i.on{background:var(--text)}.cable-bar i.over{background:var(--err)}.montage-actions{display:flex;flex-direction:column;gap:6px;margin-top:14px}.btn.dark{background:var(--text);border-color:var(--text);color:#fff}.btn.dark:hover{background:#343c4a}.btn.danger-text{border-color:transparent;background:none;color:var(--err)}.btn.danger-text:hover{background:var(--err-soft)}.kit-box{display:flex;flex-wrap:wrap;gap:6px}.chip{display:inline-flex;align-items:center;gap:6px;height:26px;font-size:12.5px;font-weight:500;padding:0 10px;border-radius:999px;background:var(--surface-3)}.popover{position:fixed;z-index:40;min-width:220px;padding:6px;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--float-shadow)}.popover .pop-title{display:flex;align-items:center;gap:8px;padding:4px 10px 8px;font-size:13px;font-weight:600}.popover .pop-title small{color:var(--muted);font-weight:500}.popover button{display:flex;align-items:center;gap:8px;width:100%;height:34px;text-align:left;border:0;background:none;padding:0 10px;border-radius:7px;font-weight:500}.popover button:hover{background:var(--surface-2)}.popover button.current{background:var(--surface-3);font-weight:600}.popover button .note{margin-left:auto;color:var(--muted);font-size:12px}.popover button.remove{color:var(--err)}.popover hr{border:0;border-top:1px solid var(--border);margin:4px 0}.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}.card{display:flex;flex-direction:column;gap:10px;border:1px solid var(--border);border-radius:12px;padding:14px 16px;background:var(--surface)}.card .title{display:flex;align-items:center;gap:8px;font-weight:600}.card .title .kind-chip{margin-left:auto}.card .value{display:flex;align-items:baseline;gap:6px;font-size:26px;font-weight:600;line-height:1.1;font-variant-numeric:tabular-nums;letter-spacing:-.01em}.card .value small{font-size:13px;font-weight:500;color:var(--muted);letter-spacing:0}.card .value.quiet{font-size:15px;color:var(--muted);font-weight:500}.meter{height:8px;border-radius:4px;background:var(--surface-3);overflow:hidden}.meter i{display:block;height:100%;width:0;border-radius:4px;background:var(--kind, var(--text));transition:width .15s}.meter-scale{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}.ir-pair{display:grid;grid-template-columns:1fr 1fr;gap:8px}.ir-cell{display:flex;align-items:center;gap:8px;height:40px;padding:0 10px;border-radius:9px;background:var(--surface-2);font-size:13px;color:var(--muted)}.ir-cell i{width:14px;height:14px;border-radius:50%;border:2px solid var(--border-strong);background:var(--surface)}.ir-cell.on{background:#1d2430;color:#fff}.ir-cell.on i{background:#3a8cff;border-color:#3a8cff}.swatch{width:44px;height:44px;border-radius:10px;border:1px solid var(--border-strong);flex:none}.color-read{display:flex;align-items:center;gap:12px}.lamp{width:22px;height:22px;border-radius:50%;display:inline-block;border:2px solid var(--border-strong);flex:none;align-self:center}.slider-label{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;color:var(--muted)}.slider-label output{font-size:15px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}.slider{display:flex;flex-direction:column;gap:6px}.slider input{width:100%;accent-color:var(--kind, var(--text))}.empty{display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--muted);padding:14px 16px;border:1px dashed var(--border-strong);border-radius:12px;background:var(--surface)}.motor-card{display:grid;grid-template-columns:48px 1fr;gap:6px 12px;align-items:center}.motor-card svg{width:48px;height:48px;grid-row:span 2}.motor-card .who{display:flex;align-items:center;gap:8px;font-weight:600}.motor-card .vals{display:flex;align-items:baseline;gap:8px;font-size:22px;font-weight:600;font-variant-numeric:tabular-nums}.motor-card .vals small{font-size:13px;font-weight:500;color:var(--muted)}.motor-card .meter{grid-column:1 / -1}.motor-card.unplugged{border-style:dashed;background:transparent}.motor-card.unplugged svg{opacity:.3;filter:grayscale(1)}.motor-card.unplugged .vals{font-size:14px;color:var(--muted);font-weight:500}.motor-card.active svg .ring{stroke:var(--ok)}dialog{border:0;border-radius:14px;background:var(--surface);color:var(--text);padding:0;width:min(520px,calc(100vw - 32px));box-shadow:0 20px 60px #00000040}dialog::backdrop{background:#14192366}.dialog{padding:20px 22px;display:flex;flex-direction:column;gap:10px}.dialog h2{margin:0;font-size:17px}.dialog p{margin:0}.dialog input{height:38px;padding:0 12px;border-radius:8px;border:1px solid var(--border-strong)}.dialog .error{color:var(--err);min-height:1em;font-size:12.5px}.dialog-actions{display:flex;justify-content:flex-end;gap:8px}@media (max-width: 1180px){.layout{grid-template-columns:var(--code-w, 46%) 6px 1fr}.brand-sub{display:none}}@media (max-width: 960px){body{overflow:auto}.layout{display:flex;flex-direction:column;flex:none;min-height:auto}.layout>*{flex:none}.resizer{display:none}.right-col{order:-1}.right-col .stage{flex:none;height:58vh;min-height:360px}.hresizer{display:none}.right-col .side{height:auto}.side-body{overflow:visible}.code-pane{height:75vh;border-top:1px solid var(--border)}}@media (max-width: 560px){.side-head{padding:0 6px}.side-tabs button{padding:0 8px}.topbar{gap:8px;padding:8px 10px;flex-wrap:wrap}.run-controls .lbl,.file-controls .lbl{display:none}.file-controls{margin-left:auto}.status .label{display:none}.mb-float{width:150px}.tool{min-width:46px;height:46px}.tool span{display:none}.seg button{padding:0 8px}.field-label{display:none}}
