:root{color-scheme:light;--blue:#2775e5;--blue2:#e8f1ff;--ink:#18283c;--muted:#6d7b90;--line:#e4eaf1;--bg:#f5f8fc;--radius:16px}*{box-sizing:border-box}body,html{margin:0;height:100%;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--bg)}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{opacity:.44;cursor:not-allowed}a{color:inherit;text-decoration:none}:focus-visible{outline:3px solid #73aafa!important;outline-offset:3px}.shell{display:flex;flex-direction:column;height:100dvh;min-height:540px;overflow:hidden}.topbar{height:66px;min-height:66px;display:flex;gap:16px;align-items:center;padding:0 21px;background:#fff;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:9px;font-weight:790;font-size:17px;letter-spacing:-.5px}.brandmark{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;color:#fff;background:linear-gradient(135deg,#65c7ff,#1873eb);font-size:21px}.top-divider{width:1px;height:24px;background:var(--line)}.product-name{font-weight:650;font-size:15px;white-space:nowrap}.product-name b{color:var(--blue)}.private-label{font-size:12px;color:var(--muted)}.status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#30b68d;margin-right:4px}.top-actions{display:flex;gap:6px;margin-left:auto}.btn{border:1px solid transparent;border-radius:10px;padding:10px 13px;background:#f5f7fa;color:#263d55;font-weight:650;font-size:13px;white-space:nowrap}.btn:hover:not(:disabled),.part:hover,.toolbtn:hover:not(:disabled){filter:brightness(.97)}.btn.primary{background:var(--blue);color:#fff}.btn.secondary{border-color:#dbe5f1;background:#fff}.btn.ghost{background:0 0}.btn.run{background:#157f62;color:#fff}.btn.danger-subtle{background:#fff4f3;border-color:#f4dcd9;color:#ba4037}.btn.full{width:100%}.download-glyph{margin-left:6px}.studio{display:grid;grid-template-columns:258px minmax(0,1fr) 365px;flex:1;min-height:0}.side{background:#fff;min-height:0}.palette{display:flex;flex-direction:column;border-right:1px solid var(--line)}.side-scroll{overflow:auto;min-height:0;flex:1;padding:22px 17px}.eyebrow{font-size:10px;color:#6e8aab;font-weight:780;letter-spacing:1.55px}.palette h1{font-size:26px;line-height:1.17;letter-spacing:-1px;margin:12px 0}.muted{color:var(--muted);line-height:1.55;font-size:13px}.small{font-size:12px}.field{display:flex;flex-direction:column;gap:7px;margin:14px 0;color:#516277;font-size:12px;font-weight:660}.field input,.field select{border:1px solid #dfe6ee;background:#fff;color:var(--ink);padding:10px 11px;border-radius:9px;outline:0;min-width:0;width:100%}.field input:focus,.field select:focus,textarea:focus{border-color:#86b9fa;box-shadow:0 0 0 3px #e9f3ff}.section-row{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:20px 0 12px}.monitor-heading h2,.section-row h2{font-size:13px;font-weight:760;margin:0}.tiny{font-size:11px;color:#8b98aa}.parts{display:grid;gap:7px}.part{display:flex;align-items:center;gap:10px;text-align:left;border:1px solid var(--line);background:#fff;border-radius:11px;padding:10px}.part-emoji{width:34px;height:34px;display:grid;place-items:center;background:#ecf4ff;border-radius:9px;color:var(--blue);font-size:21px}.part b{display:block;font-size:12px}.part small{display:block;color:var(--muted);font-size:10px;margin-top:3px}.part .plus{margin-left:auto;color:var(--blue);font-size:19px}.callout,.info-box{background:#f3f7fd;border:1px solid #e5edf7;border-radius:12px;padding:12px;font-size:12px;line-height:1.55;color:#51677f;margin-top:17px}.info-box b{color:#254568}.info-box p{margin:7px 0 0}.text-btn{border:0;background:0 0;padding:7px 4px;color:var(--blue);font-weight:700;font-size:12px}.checks{display:grid;gap:7px;font-size:11px;color:var(--muted)}.check{padding:8px;border-radius:8px;background:#f7f9fc}.check.warning{color:#996a23;background:#fff7e9}.side-bottom{border-top:1px solid var(--line);padding:13px 16px;color:var(--muted);font-size:11px;line-height:1.5}.workspace{min-width:0;display:flex;flex-direction:column;background:#f7fafe}.canvas-toolbar{min-height:54px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:8px 13px;gap:8px}.toolbar-start{display:flex;gap:15px;align-items:center;min-width:0}.canvas-hint{font-size:11px;color:#7489a3;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.toolbar-end{display:flex;gap:4px;align-items:center;flex-shrink:0}.toolbtn{border:1px solid transparent;border-radius:8px;background:#fff;color:#42607c;padding:7px 10px;font-size:13px;font-weight:700}.zoom-label{font-size:11px;min-width:36px;text-align:center;color:#718299}.canvas-scroll{flex:1;min-height:150px;overflow:auto;background-image:radial-gradient(#d7e5f3 .8px,transparent .8px);background-size:19px 19px;scrollbar-color:#cbd9e7 transparent}.canvas-scroll svg{display:block;overflow:visible;touch-action:none}.transport{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:10px 14px;display:flex;gap:10px;justify-content:space-between;align-items:center}.transport-main,.transport-stats{display:flex;gap:7px;align-items:center}.transport .btn{padding:8px 12px}.transport-stats{color:#687e95;font-size:11px}.run-badge{background:#f1f4f8;padding:6px 9px;border-radius:14px;font-weight:760}.run-badge.active{background:#e1f8eb;color:#147a54}.run-badge.fail{background:#fff0ed;color:#bd4a3c}.speed-label select{font-size:12px;border:1px solid var(--line);padding:4px;border-radius:6px;background:#fff}.monitor{background:#fff;padding:10px 13px;min-height:105px;max-height:138px;overflow:auto}.monitor-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}.monitor-heading .muted{font-size:10px}.pin-monitor{display:grid;grid-template-columns:repeat(10,minmax(46px,1fr));gap:5px}.pin-readout{border:1px solid #e8edf4;padding:5px 4px;border-radius:7px;background:#f8fafc;text-align:center;font-size:10px;white-space:nowrap}.pin-readout b{display:block;font-size:11px}.pin-readout.on{background:#dff5eb;border-color:#a8dfc8;color:#127853}.inspector{display:flex;flex-direction:column;border-left:1px solid var(--line);min-width:0}.right-tabs{display:flex;gap:4px;padding:12px 16px 0;border-bottom:1px solid var(--line)}.right-tabs button{background:0 0;border:0;border-bottom:3px solid transparent;color:#77879b;font-size:13px;font-weight:700;padding:9px 16px}.right-tabs button.active{color:var(--blue);border-color:var(--blue)}.tab-body{flex:1;min-height:0;overflow:auto;padding:8px 17px 18px}.tab-body[hidden]{display:none}.tab-body#codePanel{display:flex;flex-direction:column}.tab-body#codePanel[hidden]{display:none}.tab-body .section-row{margin:13px 0 4px}.tab-body p{margin:6px 0 10px}.tab-body textarea{width:100%;flex:1;min-height:260px;resize:vertical;border:1px solid #dae4ed;border-radius:10px;background:#fbfdff;color:#243e59;outline:0;font-size:12px;line-height:1.65;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;padding:15px;tab-size:2}.code-hint{font-size:10px;color:#8999ac;line-height:1.5;margin-top:9px}.code-footer{display:flex;justify-content:space-between;align-items:center;margin-top:10px}.error-text{background:#fff0ef;border:1px solid #ffcfc9;color:#a63229;padding:10px;border-radius:8px;white-space:pre-wrap;font-size:12px;line-height:1.4}.inspector-footer{border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 13px}.save-label{font-size:10px;color:#7d8fa2}.empty-inspector{color:#7989a0;font-size:13px;line-height:1.65;padding:24px 12px;background:#f8faff;border-radius:12px;margin:18px 0}.detail-meta{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding:10px 0;font-size:12px;color:#8a98a8}.detail-meta strong{color:#38516c;max-width:70%;text-align:right;overflow-wrap:anywhere}.input-control{margin:16px 0;padding:12px;background:#f3f7fd;border-radius:10px}.input-control input{width:100%}.input-readout{font-size:11px;color:#6984a3}.serial-output{font:12px/1.7 ui-monospace,Consolas,monospace;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;max-height:62vh;background:#111e30;color:#cce6ff;border-radius:10px;padding:14px;min-height:220px}.mobile-dock{display:none}.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);max-width:min(440px,90vw);z-index:50;border-radius:12px;box-shadow:0 12px 38px #17344c33;background:#203c5b;color:#fff;font-size:12px;padding:13px 17px}.toast[hidden]{display:none}dialog{max-width:620px;width:calc(100% - 30px);padding:24px;border:1px solid #e4ebf3;border-radius:18px;box-shadow:0 30px 80px #1b36524d;line-height:1.55;font-size:13px}dialog::backdrop{background:#112b49b3}.dialog-top{display:flex;justify-content:space-between;align-items:center}.dialog-top h2{font-size:20px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}svg .wire{cursor:pointer}svg .wire.hit{stroke:transparent;stroke-width:15}svg .pin-select,svg .port{cursor:pointer}svg .part-body{cursor:grab}svg .part-body:active{cursor:grabbing}svg .node-selected .part-card{stroke:var(--blue);stroke-width:3}svg text{font-family:Inter,system-ui,sans-serif;user-select:none;pointer-events:none}svg .wire-selected{stroke:#ef8f3b!important;stroke-width:4!important}svg .pin-active{stroke:#ffae39;stroke-width:4}svg .pin-port{fill:#fff;stroke:#7198b5;stroke-width:2}svg .pin-port.power{stroke:#e5a74d}svg .pin-port.on{fill:#26b27d}svg .part-title{font-size:15px;font-weight:750;fill:#213d57}svg .part-subtitle{font-size:12px;fill:#72879b}svg .port-label{font-size:11px;fill:#5e7893}svg .board-label{font-size:12px;font-weight:700;fill:#d5faff}@media(max-width:1270px){.studio{grid-template-columns:216px minmax(0,1fr) 315px}.palette h1{font-size:23px}.side-scroll{padding:18px 13px}.pin-monitor{grid-template-columns:repeat(7,minmax(44px,1fr))}.canvas-hint{display:none}}@media(max-width:900px){.topbar{padding:0 12px;gap:10px}.private-label,.top-divider{display:none}.studio{display:block;position:relative;min-height:0}.inspector,.palette,.workspace{height:100%;width:100%;position:absolute;inset:0;display:none}.studio[data-mobile=inspector] .inspector,.studio[data-mobile=palette] .palette,.studio[data-mobile=workspace] .workspace{display:flex}.mobile-dock{display:flex;background:#fff;border-top:1px solid var(--line);height:60px;min-height:60px;justify-content:space-around}.mobile-dock button{border:0;background:0 0;color:#7e90a5;padding:10px 14px;font-weight:700;font-size:12px}.mobile-dock button.active{color:var(--blue)}.monitor{min-height:100px}.pin-monitor{grid-template-columns:repeat(10,minmax(44px,1fr))}.canvas-toolbar{flex-wrap:wrap}.canvas-hint{display:inline}.inspector .tab-body#codePanel textarea{min-height:300px}.topbar .brand{font-size:15px}.product-name{font-size:12px}}@media(max-width:520px){.topbar{height:60px;min-height:60px}.topbar .brand{font-size:0}.brandmark{font-size:20px}.product-name{font-size:12px}.top-actions{gap:2px}.top-actions .btn{padding:8px;font-size:11px}.download-glyph{display:none}.canvas-toolbar{padding:6px 8px}.toolbar-end{width:100%;justify-content:flex-end}.canvas-hint{font-size:10px}.transport{flex-wrap:wrap;gap:6px;padding:8px}.transport-main{gap:4px}.transport .btn{padding:7px 9px;font-size:11px}.transport-stats{margin-left:auto}.monitor{padding:9px}.pin-monitor{grid-template-columns:repeat(7,minmax(40px,1fr))}.save-label{font-size:9px}}@media(prefers-reduced-motion:reduce){*,:after,:before{transition:none!important;animation:none!important}}.code-actions{display:flex;align-items:center;gap:6px}.canvas-scroll{overscroll-behavior:contain}.part-body{user-select:none}.right-tabs{overflow-x:auto;flex-shrink:0}.right-tabs button{white-space:nowrap;padding-inline:11px}.pin-readout{cursor:pointer;font-family:inherit;color:inherit}.pin-readout:focus-visible{outline:3px solid #428bdb;outline-offset:2px}.trace-graph{display:block;width:100%;max-width:100%;background:#f5f9ff;border:1px solid #dde9f6;border-radius:10px;margin:10px 0}#pinExplanation{white-space:pre-line;overflow-wrap:anywhere;margin:8px 0}#traceStats{padding:6px 0;font-variant-numeric:tabular-nums}@media(max-width:520px){.right-tabs button{font-size:12px;padding:9px 10px}.pin-monitor{grid-template-columns:repeat(7,minmax(40px,1fr))}}