@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700;800&display=swap');
:root{--ink:#28463c;--green:#2b7964;--mint:#e4f2e7;--paper:#fbfaf4;--line:#dfe7da;--muted:#718570;--gold:#e8b94e;--blue:#5d83b5}*{box-sizing:border-box}body{margin:0;background:var(--paper);font-family:'Noto Sans SC',system-ui,sans-serif;color:var(--ink);font-size:16px}button,input,select,textarea{font:inherit}button,a,input,select{touch-action:manipulation}button{cursor:pointer;border:1px solid var(--line);background:#fffef8;border-radius:10px;padding:9px 12px;color:var(--ink);font-size:14px;line-height:1.5}button:hover{border-color:#80b197;background:#f0f7ed}button:disabled{opacity:.4;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,svg [tabindex]:focus-visible{outline:3px solid #e8b94e;outline-offset:3px}.accent{background:var(--green);border-color:var(--green);color:white}.accent:hover{background:#205e4e;color:white}a{color:var(--green);text-decoration:none}[hidden]{display:none!important}.lab-header{height:85px;background:#fffef9;border-bottom:1px solid var(--line);padding:0 32px;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:flex;align-items:center;gap:11px;font-size:20px;font-weight:800;white-space:nowrap}.brand-mark{background:var(--green);color:#ffe49b;border-radius:13px;display:grid;place-items:center;width:40px;height:44px;font-size:37px}.brand small{display:block;font-size:10px;letter-spacing:2.5px;color:#829381;margin-top:3px}.lab-header nav{display:flex;gap:8px}.lab-header nav a{padding:10px 17px;border-radius:22px;font-size:14px;color:#758974}.lab-header nav a[aria-current]{background:#e5f1e4;color:#25634f;font-weight:600}.studio{padding:24px 28px 20px;max-width:2000px;margin:auto}.studio-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:22px}.eyebrow{font-size:12px;color:#84967b;letter-spacing:1.5px}h1{font-size:27px;margin:8px 0 0;letter-spacing:.6px}h1 span{color:#deb969;font-size:25px;margin-left:9px}.mode-tabs{background:#eaf0e2;padding:5px;border-radius:15px;display:flex;gap:3px}.mode-tabs button{background:transparent;border-color:transparent;font-size:15px;padding:10px 17px}.mode-tabs button[aria-pressed=true]{background:#fffef8;border-color:#dbe6d2;box-shadow:0 2px 5px #23482508;font-weight:600}.workbench{display:grid;grid-template-columns:210px minmax(0,1fr) 266px;gap:18px;align-items:start}.palette,.inspector{background:#fffef8;border:1px solid var(--line);border-radius:17px;padding:18px 15px}.panel-heading{display:flex;justify-content:space-between;align-items:center;gap:10px}.panel-heading h2{font-size:16px;margin:0}.panel-heading span{font-size:12px;color:#8ba17f}.tiny{font-size:12px;color:#8d9c85;margin:7px 0 18px}.palette-group{margin-bottom:16px}.palette-group h3{font-size:12px;font-weight:500;color:#8d9c86;margin:12px 0 8px}.palette-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.palette-item{display:flex;flex-direction:column;gap:6px;align-items:center;padding:11px 5px;font-size:13px;min-height:76px}.palette-item span{font-size:20px;color:#648c70;line-height:1.2}.palette-item small{font-size:11px;color:#8b9e83}.palette-guide{padding:15px 12px;background:#eef4e5;border-radius:12px}.palette-guide b{font-size:14px}.palette-guide p{font-size:13px;line-height:1.8;color:#6b8464}.palette-guide button{font-size:13px;width:100%;background:#fffcf2}.board-panel{min-width:0}.toolbar{display:flex;justify-content:space-between;flex-wrap:wrap;gap:9px;background:#fffef8;border:1px solid var(--line);border-radius:17px 17px 0 0;padding:11px 13px}.edit-actions,.sim-actions{display:flex;align-items:center;gap:5px}.toolbar button{font-size:13px;padding:7px 10px}.separator{height:22px;width:1px;background:var(--line);margin:0 4px}.board-wrap{height:570px;position:relative;border:1px solid var(--line);border-top:0;overflow:hidden;background:#f4f7ec}#board{display:block;width:100%;height:100%;touch-action:none;user-select:none}#board.pan{cursor:grab}#board.panning{cursor:grabbing}.empty-board{position:absolute;top:33%;left:10%;width:80%;text-align:center;pointer-events:none}.empty-board>span{font-size:45px;color:#a9bc87}.empty-board h2{font-size:20px}.empty-board p{font-size:14px;color:#8a9c7a}.empty-board button{pointer-events:auto}.connection-tip{position:absolute;top:12px;left:12px;right:12px;margin:auto;max-width:440px;padding:9px 13px;border-radius:11px;background:#e4f1deed;border:1px solid #c6ddbb;font-size:13px;text-align:center;color:#426d4c;pointer-events:none}.view-controls{position:absolute;bottom:13px;right:12px;display:flex;align-items:center;padding:4px;gap:3px;background:#fffef6eb;border:1px solid #dde6d4;border-radius:12px}.view-controls button{border:0;background:none;padding:7px;font-size:13px}.view-controls button[aria-pressed=true]{background:#e5efdc}.view-controls span{font-size:12px;color:#8b9c7f;padding:0 2px}.board-footer{border:1px solid var(--line);border-top:0;border-radius:0 0 14px 14px;padding:11px 14px;display:flex;justify-content:space-between;gap:10px;font-size:12px;background:#fffef8}.board-footer #sim-status{color:#567c5a}.board-footer #sim-status.error{color:#b0644b}.board-footer #board-count{white-space:nowrap;color:#8a9c7a}.project-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px}.project-name{display:flex;align-items:center;gap:10px}.project-name span{font-size:12px;color:#8c9c83}.project-name input{border:0;border-bottom:1px solid #cedcc2;padding:8px 3px;background:none;color:var(--ink);max-width:195px;font-size:14px}.project-bar>div{display:flex;gap:6px;flex-wrap:wrap}.project-bar button{font-size:12px;padding:8px 10px}.storage-note{font-size:12px;color:#8a9d7c;line-height:1.7}.inspector{padding:18px}.inspector-placeholder{color:#7f9377;font-size:14px;line-height:1.9;padding:20px 2px}.inspector-placeholder .big{font-size:27px;display:block;margin-bottom:8px}.inspect-title{font-size:18px;margin:19px 0 9px}.inspect-description{font-size:13px;color:#7b9271;line-height:1.8}.inspect-values{padding:12px;background:#edf4e6;border-radius:10px;display:grid;gap:7px;font-size:13px;word-break:break-word}.inspect-values strong{color:#497b57}.field{display:grid;gap:6px;margin:14px 0;font-size:13px}.field input,.field select,.field textarea{border:1px solid #d6e3cf;border-radius:8px;padding:8px 10px;width:100%;background:#fffef9;font-size:14px;color:var(--ink)}.field input[type=range]{padding:0}.field textarea{font-family:ui-monospace,monospace;line-height:1.6;min-height:155px;font-size:13px;resize:vertical}.field small{font-size:12px;line-height:1.6;color:#839778}.inspector-actions{display:flex;gap:7px;margin:10px 0;flex-wrap:wrap}.inspector-actions button{font-size:13px}.pin-legend{font-size:12px;color:#7f9375;line-height:1.8;margin:15px 0}.guide-card{background:#eff5e7;border-radius:13px;padding:16px 13px;margin-top:17px}.guide-card h3,.path-card h3{font-size:15px;line-height:1.7;margin:7px 0}.guide-card p,.path-card p{font-size:13px;line-height:1.9;color:#708863}.guide-card ol{font-size:13px;line-height:1.85;color:#637f58;padding-left:20px;display:grid;gap:7px}.guide-card button{font-size:13px;width:100%;background:#fffdf5}.path-card{background:#f7efd9;border:1px solid #ebdfbd;border-radius:12px;margin:17px 0;padding:12px}.path-card button{font-size:13px;background:#fffdf5;width:100%}.model-note{font-size:12px;line-height:1.9;color:#879779}.model-note summary{cursor:pointer}.model-note p{font-size:12px}.component-shell{stroke:#a9c2a3;stroke-width:1.5;fill:#fffdf5}.component.selected .component-shell{stroke:#2f8969;stroke-width:3}.component-title{cursor:move}.component-title rect{fill:#e9f1e1}.component-name{font-size:14px;fill:#365d45;font-weight:600}.component-value{font-size:22px;font-weight:600;fill:#638960}.component-subtitle{font-size:11px;fill:#8b9f7d}.pin-label{font-size:11px;fill:#6d8968;pointer-events:none}.pin-dot{stroke:#91ad84;stroke-width:2;fill:#fffdf6}.pin-dot.output{fill:#dbe9f6;stroke:#81a4c0}.pin-dot.high{fill:#ecc85e;stroke:#c8a342}.pin-dot.unknown{fill:#e8dfd1;stroke:#b19f88}.pin-dot.pending{fill:#5f9c71;stroke:#276645;stroke-width:3}.pin{cursor:crosshair}.pin:hover .pin-dot{stroke:#2c7961;stroke-width:3}.lab-wire{stroke:#97b594;stroke-width:3;fill:none;pointer-events:none}.lab-wire.high{stroke:#dfb345}.lab-wire.bus{stroke-width:5}.lab-wire.unknown{stroke:#c3b7a2;stroke-dasharray:7 5}.wire-hit{stroke:transparent;stroke-width:15;fill:none;cursor:pointer}.wire-selected{stroke:#347964!important;stroke-width:5}.live-glow{fill:#f9d77b;opacity:.25}.state-button{cursor:pointer}.state-button rect{fill:#edf4e7;stroke:#bbd0b0}.state-button text{font-size:13px;fill:#47774f}.binary-bits{font-family:ui-monospace,monospace;font-size:15px;letter-spacing:2px;fill:#5d7e54}.spin{transform-box:fill-box;transform-origin:center;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}dialog{border:1px solid #d6e2d0;border-radius:20px;color:var(--ink);background:#fffef7;box-shadow:0 15px 90px #23452830;padding:25px;max-width:min(760px,94vw);width:760px;max-height:88vh}dialog::backdrop{background:#2a493c66}.dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:15px}.dialog-heading h2{font-size:23px;margin:7px 0 12px}.dialog-heading>button{font-size:24px;border:0;background:none;padding:0 8px}.example-tabs{display:flex;gap:8px;margin:15px 0 19px}.example-tabs button.active{background:#dfefd9;border-color:#a9cca0}#examples-list{display:grid;grid-template-columns:1fr 1fr;gap:13px}.example-card{padding:16px;text-align:left;display:block;min-height:133px}.example-card strong{font-size:16px;display:block;line-height:1.7;margin-bottom:5px}.example-card p{font-size:13px;line-height:1.8;color:#7b9170;margin:5px 0}.example-card small{font-size:12px;color:#a58b52}.help-list{padding-left:22px;display:grid;gap:14px;font-size:15px;line-height:1.9}.key-note{font-size:13px;color:#7f9375;line-height:1.9}.confirm-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}#confirm-dialog{width:410px}#confirm-dialog h2{font-size:21px}#confirm-dialog p{font-size:14px;line-height:1.9}#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);padding:14px 22px;background:#2c7964;color:white;border-radius:13px;font-size:14px;max-width:90vw;z-index:10;box-shadow:0 5px 25px #29432f25}
@media(min-width:1550px){.workbench{grid-template-columns:225px minmax(0,1fr) 290px}.board-wrap{height:650px}.palette-item{font-size:14px}}@media(max-width:1150px){.studio{padding:20px 16px}.workbench{grid-template-columns:170px minmax(0,1fr)}.inspector{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:10px 25px}.inspector>.panel-heading{grid-column:1/-1}.guide-card{margin-top:0}.path-card{margin:0}.model-note{grid-column:1/-1}.palette{padding:15px 10px}.palette-item{font-size:12px}.board-wrap{height:570px}.toolbar{padding:10px 8px}.toolbar button{font-size:12px}.studio-heading h1{font-size:25px}.mode-tabs button{padding:9px 12px;font-size:14px}}@media(max-width:700px){.lab-header{height:auto;min-height:78px;padding:14px 16px;flex-wrap:wrap;gap:13px}.brand{font-size:17px}.brand-mark{width:33px;height:36px;font-size:31px}.brand small{font-size:8px}.lab-header nav{order:3;width:100%;justify-content:center;gap:5px}.lab-header nav a{font-size:13px;padding:8px 19px}.lab-header>button{font-size:12px;padding:7px 9px}.studio{padding:17px 12px}.studio-heading{display:block;margin-bottom:15px}.studio-heading h1{font-size:23px}.mode-tabs{margin-top:15px;width:max-content}.eyebrow{font-size:10px}.workbench{display:flex;flex-direction:column;gap:12px}.palette{width:100%;padding:13px}.palette>.tiny{margin:5px 0 10px}.palette-group{display:contents}.palette-group h3{display:none}#palette{display:flex;overflow-x:auto;gap:7px;padding-bottom:5px}.palette-grid{display:contents}.palette-item{min-width:75px;min-height:69px;font-size:12px;padding:8px}.palette-item span{font-size:17px}.palette-guide{display:none}.board-panel{width:100%}.toolbar{gap:7px}.toolbar button{font-size:12px;padding:7px 8px}.board-wrap{height:470px}.view-controls{left:9px;right:auto;bottom:9px}.view-controls button{padding:7px;font-size:12px}.empty-board{top:30%}.empty-board h2{font-size:17px}.empty-board p{font-size:13px}.project-bar{gap:8px}.board-footer{padding:10px;font-size:11px}.board-footer #sim-status{max-width:68%}.board-footer #board-count{font-size:10px}.inspector{width:100%;display:block;padding:18px}.guide-card{margin-top:20px}.path-card{margin-top:18px}#examples-list{grid-template-columns:1fr}.example-card{min-height:0}.connection-tip{font-size:12px;top:8px;padding:8px}.project-bar button{font-size:12px}.storage-note{font-size:12px}}@media(prefers-reduced-motion:reduce){*{animation:none!important}}

#palette{max-height:440px;overflow-y:auto;scrollbar-width:thin;padding-right:3px}.wide-canvas .workbench{display:flex;flex-direction:column}.wide-canvas .palette{display:none}.wide-canvas .board-panel{width:100%}.wide-canvas .board-wrap{height:70vh;min-height:520px}.wide-canvas .inspector{width:100%;display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px}.wide-canvas .inspector>.panel-heading{grid-column:1/-1}.wide-canvas .guide-card,.wide-canvas .path-card{margin-top:0}.wide-canvas .model-note{grid-column:1/-1}@media(max-width:700px){#palette{max-height:none;padding-right:0;overflow-y:visible}.wide-canvas .inspector{display:block}.wide-canvas .guide-card,.wide-canvas .path-card{margin-top:20px}.toolbar .edit-actions{flex-wrap:wrap}.wide-canvas .board-wrap{min-height:450px}}

.lab-wire{stroke-linejoin:round;stroke-linecap:round}.bend-handle{fill:#fffdf5;stroke:#2b7964;stroke-width:2;cursor:move}.bend-handle:hover{fill:#e8b94e}.route-preview{fill:none;stroke:#2b7964;stroke-width:2;stroke-dasharray:7 5;pointer-events:none}.route-anchor{fill:#e8b94e;stroke:#2b7964;pointer-events:none}

.lab-context-menu{position:fixed;z-index:50;width:230px;max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px);overflow-y:auto;padding:8px;background:#fffef8;border:1px solid #c5d8bd;border-radius:14px;box-shadow:0 10px 36px #294c3c28;overscroll-behavior:contain}.lab-context-menu button{display:block;width:100%;border:0;background:transparent;text-align:left;padding:9px 12px;font-size:14px;border-radius:8px}.lab-context-menu button:hover,.lab-context-menu button:focus-visible{background:#e9f3e2;outline:2px solid #93b88b;outline-offset:-2px}.lab-context-menu button[data-menu-action=delete]{color:#a15641}.context-title{padding:7px 12px;font-size:13px;font-weight:600;color:#55754e}.context-label{padding:6px 12px 2px;font-size:12px;color:#819577}.context-divider{height:1px;background:#dde8d6;margin:6px 4px}.context-sizes{display:flex;gap:2px;padding:4px}.context-sizes button{padding:8px 3px;text-align:center;font-size:12px}

.bend-selected{fill:#e8b94e;stroke-width:3}

.device-caption{font-size:11px;fill:#638960;font-weight:600}.fan{transform-origin:90px 82px}.fan.turning{animation:fan-turn 1.5s linear infinite}@keyframes fan-turn{to{transform:rotate(360deg)}}.sound-waves{animation:sound-wave .8s ease-in-out infinite}@keyframes sound-wave{50%{opacity:.35}}#media-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden}.media-screen{position:absolute;object-fit:contain;border-radius:4px;background:#213b34;pointer-events:none}.media-upload{margin:15px 0;padding:12px;background:#f0f4e7;border-radius:12px}.media-upload p{overflow-wrap:anywhere;font-size:12px}.media-upload small{display:block;color:#68815f;font-size:12px;line-height:1.7}#sound[aria-pressed=true]{background:#f7e5ac}.sim-actions{flex-wrap:wrap}@media(prefers-reduced-motion:reduce){.fan.turning,.sound-waves{animation:none}}

.logic-lesson{padding:14px 18px;background:#f3f6e9;border-bottom:1px solid #d4dfc5}.logic-lesson[hidden]{display:none}.logic-basics{display:flex;flex-wrap:wrap;gap:7px 18px;font-size:12px;line-height:1.7}.logic-basics span{color:#71836a}.trace-controls{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin:10px 0;font-size:12px}.trace-controls label{display:flex;align-items:center;gap:4px}.trace-controls input{accent-color:#2d7964}.trace-controls button,.trace-controls select{font-size:12px;padding:5px 8px}#trace-caption{min-height:64px;font-size:14px;line-height:1.7}#trace-caption strong{color:#2d7964}#trace-caption p{margin:4px 0 8px}.logic-lesson>small{display:block;color:#829074;font-size:11px;line-height:1.6}#trace-summary details{margin:7px 0;font-size:12px;line-height:1.8}#trace-summary summary{cursor:pointer;color:#427c59;font-weight:600}#trace-summary ul{padding-left:20px;max-height:190px;overflow:auto}#trace-summary button{padding:3px 6px;font-size:12px}.instruction-note{margin:8px 0}.logic-calculation{border-radius:12px;background:#f0f4e8;padding:12px;margin:12px 0;font-size:13px;line-height:1.8}.logic-calculation h4{margin:0;color:#377f62}.logic-calculation p{margin:5px 0}.truth-table{width:100%;border-collapse:collapse;text-align:center;font-size:12px}.truth-table caption{font-size:11px;margin:7px 0;color:#7e8d72}.truth-table th,.truth-table td{padding:3px;border-bottom:1px solid #d8e3cf}.current-truth{background:#f6df97;font-weight:700}.pin-value{font-size:10px;font-weight:700;fill:#728c63;pointer-events:none}.signal-focus>.component-shell{stroke:#e5a933;stroke-width:4;fill:#fff9df}.signal-walk{stroke:#ec9b36!important;stroke-width:6!important;stroke-dasharray:10 7;animation:signal-walk .7s linear infinite}@keyframes signal-walk{to{stroke-dashoffset:-34}}

.logic-lesson{position:sticky;top:0;z-index:4}#trace-caption{max-height:110px;overflow:auto}
.component.signal-focus>.component-shell{stroke:#e5a933;stroke-width:4;fill:#fff9df}
/* Pointer selection uses the component border; keep keyboard focus visible. */
#board:focus:not(:focus-visible),#board [tabindex]:focus:not(:focus-visible){outline:none}