:root{color:#272d27;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;background:#f4f5f1;font-family:Arial,Helvetica,sans-serif;font-size:16px}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.45}button:focus-visible,input:focus-visible,[role=button]:focus-visible{outline-offset:3px;outline:2px solid #6d874c}h1,h2,p{margin-top:0}.app{min-height:100vh}.diagram-host[hidden],.workspace[hidden]{display:none}.topbar{color:#f5f7f1;background:#252b25;border-bottom:1px solid #1d211d;justify-content:space-between;align-items:center;height:56px;padding:0 24px;display:flex}.brand{letter-spacing:-.025em;font-size:17px;font-weight:700}.topbar-note{color:#c4cabe;font-size:13px}.tabs{background:#fff;border-bottom:1px solid #d6dbd2;align-items:stretch;gap:28px;height:50px;padding:0 24px;display:flex;overflow-x:auto}.tabs button{color:#687167;white-space:nowrap;background:0 0;border:0;border-bottom:2px solid #0000;padding:2px 0 0;font-size:14px}.tabs button.active{color:#252b25;border-bottom-color:#527048;font-weight:700}.tabs button:hover{color:#252b25}.diagram-workspace{background:#fff;grid-template-columns:252px minmax(0,1fr) 338px;max-width:1800px;min-height:calc(100vh - 106px);margin:auto;display:grid}.toolbox{background:#eef0e9;border-right:1px solid #d3d9cf;padding:24px 18px;overflow:auto}.toolbox h1{letter-spacing:-.025em;margin:0 0 10px;font-size:21px}.toolbox p{color:#616b5f;margin-bottom:28px;font-size:14px;line-height:1.5}.toolbox h2{margin:24px 0 11px;font-size:14px}.tool-inputs{gap:7px;display:flex}.tool-inputs button{color:#2d392d;background:#fff;border:1px solid #bbc7b5;border-radius:5px;place-items:center;width:34px;height:34px;font-size:14px;font-weight:700;display:grid}.tool-inputs button:hover:not(:disabled){background:#e9eee5;border-color:#758e6a}.input-block-list{margin-top:12px}.tool-actions{gap:7px;margin-top:12px;display:flex}.tool-actions button,.gate-list button,.canvas-footer button,.exercise-actions button,.actions button{color:#2d392d;background:#fff;border:1px solid #bfc8bc;border-radius:6px;padding:7px 9px;font-size:13px;font-weight:700}.tool-actions button:hover:not(:disabled),.gate-list button:hover,.canvas-footer button:hover:not(:disabled),.exercise-actions button:hover,.actions button:hover:not(:disabled){background:#e9eee5}.gate-tools{grid-template-columns:1fr 1fr;gap:7px;display:grid}.gate-tools button{text-align:left;color:#2f372e;background:#fff;border:1px solid #c5cdc1;border-radius:6px;align-items:center;gap:9px;min-height:43px;padding:5px 8px;font-size:13px;font-weight:700;display:flex}.gate-tools button:hover:not(:disabled){background:#f5f8f2;border-color:#758e6a}.tool-glyph{color:#4c6944;border:1px solid #b9c5b2;border-radius:4px;flex:none;place-items:center;width:26px;height:26px;font-size:16px;display:grid}.gate-list{margin:0;padding:0;list-style:none}.gate-list li{border-bottom:1px solid #d7ded3;justify-content:space-between;align-items:center;padding:5px 0;font-size:13px;font-weight:700;display:flex}.gate-list button{padding:4px 6px;font-weight:400}.canvas-pane{background:#fff;flex-direction:column;min-width:0;display:flex}.pane-toolbar{border-bottom:1px solid #dbe0d8;justify-content:space-between;align-items:center;gap:10px;min-height:54px;padding:0 18px;display:flex}.pane-toolbar h2{white-space:nowrap;margin:0;font-size:15px}.pane-toolbar span{color:#778174;text-align:right;font-size:12px}.canvas-scroll{flex:1;align-items:center;min-height:530px;display:flex;overflow:auto}.edit-canvas{touch-action:none;flex:none;max-width:none;margin:auto;display:block}.canvas-guide{fill:none;stroke:#e3e8df;stroke-dasharray:4 6}.canvas-input,.canvas-output{fill:#eef3e9;stroke:#7f9875;stroke-width:1.5px}.canvas-input.on,.canvas-output.on{fill:#dce9ca;stroke:#557638}.canvas-input{cursor:grab}.canvas-input:active{cursor:grabbing}.canvas-gate{fill:#fff;stroke:#566b52;stroke-width:1.7px;stroke-linejoin:round}.canvas-gate.on{fill:#e6efd7;stroke:#557638}.gate-drag-area{fill:#0000;cursor:grab}.gate-drag-area:active{cursor:grabbing}.canvas-label{text-anchor:middle;fill:#293629;pointer-events:none;-webkit-user-select:none;user-select:none;font-size:14px;font-weight:700}.pin{fill:#fff;stroke:#507345;stroke-width:2.5px;cursor:pointer}.pin:hover{fill:#e3eed9}.pin.selected{fill:#c1823e;stroke:#9b612b}.pin.connected{fill:#507345;stroke:#507345}.edit-wire{fill:none;stroke:#647d5d;stroke-width:2.4px}.edit-wire.on{stroke:#547a39;stroke-width:3px}.diagram-playing .edit-wire{stroke-dasharray:1;stroke-dashoffset:1px;animation:.32s forwards signal-wire}.diagram-playing .canvas-node,.diagram-playing .canvas-output{animation:.25s both signal-node}.canvas-footer{border-top:1px solid #dbe0d8;justify-content:space-between;align-items:center;gap:16px;min-height:62px;padding:10px 18px;display:flex}.canvas-footer span{overflow-wrap:anywhere;font-size:13px;line-height:1.4}.circuit-valid{color:#406835}.circuit-pending{color:#717b6e}.canvas-footer button{white-space:nowrap}.exercise-pane{background:#f8f9f6;border-left:1px solid #d3d9cf;min-width:0}.exercise-content{padding:20px}.exercise-content>p{color:#626e5f;margin-bottom:16px;font-size:14px;line-height:1.5}.generate-button,.actions button.primary{color:#fff;background:#365334;border:1px solid #365334;border-radius:6px;padding:10px 12px;font-size:13px;font-weight:700}.generate-button:hover:not(:disabled),.actions button.primary:hover{background:#294328}.exercise-content .table-wrap{background:#fff;border:1px solid #dbe1d7;border-radius:6px;max-height:510px;margin-top:22px}.exercise-actions{gap:8px;margin-top:14px;display:flex}.result{color:#a04835;margin:12px 0;font-size:13px;line-height:1.4}.result.success{color:#416d37}.workspace{grid-template-columns:minmax(270px,300px) minmax(280px,360px) minmax(360px,1fr);align-items:start;gap:16px;max-width:1600px;margin:0 auto;padding:20px 24px;display:grid}.panel{background:#fff;border:1px solid #d6dbd2;border-radius:8px;min-height:540px}.editor{padding:22px}.editor h1{letter-spacing:-.025em;margin-bottom:8px;font-size:20px}.editor h2{margin:26px 0 11px;font-size:14px}.section-intro,.hint{color:#657063;font-size:13px;line-height:1.5}.section-intro{margin-bottom:26px}.hint{margin:9px 0 0}.editor label{margin-bottom:7px;font-size:14px;font-weight:700;display:block}.editor input{border:1px solid #b9c4b5;border-radius:6px;width:100%;height:41px;padding:0 10px;font-size:15px}.error{color:#a04835;margin:9px 0 0;font-size:13px}.block-row{flex-wrap:wrap;gap:7px;display:flex}.block{color:#2e382e;background:#fff;border:1px solid #c6d0c1;border-radius:5px;min-width:34px;min-height:34px;padding:5px 8px;font-size:13px;font-weight:700}.block:hover{background:#edf3e9}.input-block{background:#eaf0e4}.example{color:#6e786d;border-top:1px solid #e2e7df;flex-direction:column;align-items:flex-start;gap:7px;margin-top:28px;padding-top:16px;font-size:13px;display:flex}.example button{color:#426b39;text-underline-offset:3px;text-align:left;background:0 0;border:0;padding:0;font-size:13px;text-decoration:underline}.simulator{border-top:1px solid #e2e7df;margin-top:24px;padding-top:1px}.simulator p{color:#657063;margin:0 0 14px;font-size:13px;line-height:1.5}.sim-inputs{flex-wrap:wrap;gap:8px;display:flex}.sim-input{flex-direction:column;gap:6px;min-width:52px;display:flex}.sim-input span{font-size:13px;font-weight:700}.sim-input button{color:#2d392d;background:#fff;border:1px solid #b9c4b5;border-radius:6px;height:40px;font-weight:700}.sim-input button[aria-pressed=true]{color:#fff;background:#365334;border-color:#365334}.sim-actions{align-items:center;gap:14px;margin-top:16px;display:flex}.sim-play{color:#fff;background:#365334;border:1px solid #365334;border-radius:6px;padding:9px 13px;font-size:13px;font-weight:700}.sim-play:hover:not(:disabled){background:#294328}.sim-actions output{color:#365334;font-size:16px;font-weight:700}.panel-heading{border-bottom:1px solid #dbe0d8;justify-content:space-between;align-items:center;gap:10px;height:54px;padding:0 18px;display:flex}.panel-heading h2{margin:0;font-size:15px}.panel-heading span{color:#778174;font-size:12px}.table-wrap{max-height:620px;overflow:auto}table{border-collapse:collapse;text-align:left;font-variant-numeric:tabular-nums;width:100%}th{color:#626e5f;z-index:1;background:#f3f5f0;border-bottom:1px solid #dbe0d8;height:40px;padding:0 16px;font-size:13px;font-weight:700;position:sticky;top:0}td{border-bottom:1px solid #ebefe9;height:42px;padding:0 16px;font-size:14px;font-weight:600}th:last-child,td:last-child{text-align:right;border-left:1px solid #e2e8df}tbody tr:hover{background:#f6f9f4}tbody tr.selected{background:#eef3e9}.output-cell{color:#496b3e}.output-button{color:#2f562d;background:#fff;border:1px solid #b8c6b2;border-radius:5px;min-width:35px;height:29px;font-weight:700}.output-button:hover{background:#edf3e9}.output-button.correct{background:#e8f2e2;border-color:#74a166}.output-button.incorrect{color:#a04835;background:#fff0ec;border-color:#c77c6c}.given-output{background:#e4edda;border-radius:5px;place-items:center;min-width:35px;height:29px;display:inline-grid}.table-note{color:#778174;margin:15px 18px;font-size:12px}.diagram{overflow:hidden}.circuit-scroll{min-height:300px;padding:8px 10px 0;overflow:auto}.circuit-scroll svg{max-width:none;display:block}.wire{fill:none;stroke:#aeb8aa;stroke-width:2px;stroke-linejoin:round}.wire.on{stroke:#6c8a46;stroke-width:2.5px}.circuit-playing .wire{stroke-dasharray:1;stroke-dashoffset:1px;animation:.32s forwards signal-wire}.circuit-playing .signal-symbol{animation:.25s both signal-node}.circuit-playing .signal-output{animation:.2s both signal-node}@keyframes signal-wire{to{stroke-dashoffset:0}}@keyframes signal-node{0%{opacity:.15}to{opacity:1}}.gate{fill:#f8faf5;stroke:#6c7769;stroke-width:1.5px}.gate.on{fill:#e6efd7;stroke:#557638}.gate-back{fill:none}.gate-text,.terminal-text,.output-text{text-anchor:middle;fill:#2d362b;font-family:Arial,Helvetica,sans-serif;font-size:13px;font-weight:700}.terminal{fill:#fff;stroke:#8f9d89;stroke-width:1.5px}.terminal.on{fill:#dce9ca;stroke:#557638}.inversion{fill:#fff;stroke:#6c7769;stroke-width:1.5px}.output-dot{fill:#aeb8aa}.output-dot.on{fill:#6c8a46}.output-text{text-anchor:start}.signal-key{color:#747e72;border-top:1px solid #e6ebe3;gap:20px;padding:15px 18px;font-size:12px;display:flex}.signal-key span{align-items:center;gap:7px;display:flex}.key-line{border-top:2px solid #aeb8aa;width:20px;display:inline-block}.key-line.high{border-color:#6c8a46}.problem,.derived{overflow-wrap:anywhere;background:#f7faf4;border:1px solid #dce4d7;border-radius:6px;flex-direction:column;gap:7px;padding:14px;display:flex}.problem span,.derived span,.input-control>span{color:#657063;font-size:13px}.problem strong,.derived strong{font-size:16px;line-height:1.45}.actions{flex-wrap:wrap;gap:8px;margin-top:18px;display:flex}.input-control{justify-content:space-between;align-items:center;gap:10px;display:flex}.input-list{gap:6px;display:flex}.input-name{background:#eaf0e4;border:1px solid #c6d4c0;border-radius:5px;place-items:center;width:31px;height:31px;font-size:13px;font-weight:700;display:grid}.derived{margin-top:26px}.empty-state{color:#737d71;padding:30px 18px;font-size:14px;line-height:1.5}@media (max-width:1220px){.diagram-workspace{grid-template-columns:238px minmax(0,1fr)}.exercise-pane{border-top:1px solid #d3d9cf;border-left:0;grid-column:1/-1}.exercise-content{max-width:700px}.workspace{grid-template-columns:minmax(250px,300px) minmax(300px,1fr)}.diagram{grid-column:1/-1}.panel{min-height:0}}@media (max-width:720px){.topbar{padding:0 16px}.topbar-note{display:none}.tabs{gap:22px;padding:0 16px}.diagram-workspace{display:block}.toolbox{border-bottom:1px solid #d3d9cf;border-right:0;padding:16px}.toolbox p{margin-bottom:16px}.toolbox h2{margin:16px 0 8px}.gate-tools{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}.gate-tools button{gap:4px;min-width:0;padding:5px;font-size:12px}.tool-glyph{width:21px;height:21px;font-size:13px}.canvas-scroll{min-height:450px}.canvas-footer{align-items:flex-start}.workspace{flex-direction:column;gap:12px;padding:14px;display:flex}.panel{width:100%}.editor{padding:20px}.diagram{min-height:360px}}@media (max-width:460px){.pane-toolbar span{max-width:170px}.canvas-footer{flex-direction:column;align-items:stretch}.canvas-footer button{align-self:flex-start}}@media (prefers-reduced-motion:reduce){.circuit-playing .wire,.diagram-playing .edit-wire{stroke-dasharray:none;stroke-dashoffset:0;animation:none}.circuit-playing .signal-symbol,.circuit-playing .signal-output,.diagram-playing .canvas-node,.diagram-playing .canvas-output{animation:none}}