:root{color:#242924;font-synthesis:none;text-rendering:optimizelegibility;--ink:#242924;--muted:#747a71;--paper:#fffdf8;--line:#d8d4ca;--lime:#c8ec4b;--lime-dark:#496b17;--orange:#f47b3c;--blue:#3385d4;--red:#d94b46;--mono:Consolas, "Cascadia Mono", monospace;background:#f2eee6;font-family:Yu Gothic UI,Yu Gothic,Meiryo,sans-serif}*{box-sizing:border-box}body{background:radial-gradient(circle at 76% 8%,#c8ec4b29,#0000 25rem),#f2eee6;min-width:320px;min-height:100vh;margin:0}button{font:inherit}button:focus-visible{outline-offset:2px;outline:3px solid #3385d461}.app-shell{grid-template-rows:76px auto;grid-template-columns:260px minmax(0,1fr);min-height:100vh;display:grid}.topbar{z-index:20;color:#f8f5ed;background:#232823;grid-column:1/-1;align-items:center;gap:14px;padding:0 28px;display:flex;position:sticky;top:0;box-shadow:0 5px 20px #191c182e}.brand-mark{flex:none;width:35px;height:35px;position:relative}.brand-mark span{background:var(--lime);border-radius:8px;position:absolute}.brand-mark span:first-child{width:9px;height:30px;bottom:1px;left:1px;transform:rotate(-18deg)}.brand-mark span:nth-child(2){width:9px;height:22px;bottom:5px;left:14px;transform:rotate(18deg)}.brand-mark span:nth-child(3){width:9px;height:14px;bottom:9px;left:25px;transform:rotate(-18deg)}.brand-copy{min-width:170px;line-height:1}.brand-copy p{color:var(--lime);font:600 9px/1 var(--mono);letter-spacing:.18em;margin:0 0 6px}.brand-copy h1{letter-spacing:.08em;margin:0;font-size:20px}.source-chip{color:#d7dbd2;white-space:nowrap;border:1px solid #464d45;border-radius:8px;margin-left:auto;padding:8px 12px;font-size:11px}.source-chip span{color:var(--lime);font:600 9px var(--mono);letter-spacing:.1em;margin-right:8px}.mode-switch{background:#191d19;border:1px solid #424942;border-radius:10px;padding:4px;display:flex}.mode-switch button{color:#aeb5ac;cursor:pointer;background:0 0;border:0;border-radius:7px;padding:8px 14px;font-size:12px;font-weight:700}.mode-switch button.active{color:#1d231b;background:var(--lime)}.sidebar{background:#ebe6dc;border-right:1px solid #d2cec3;grid-area:2/1;height:calc(100vh - 76px);padding:25px 18px;position:sticky;top:76px;overflow:hidden auto}.sidebar-heading{justify-content:space-between;align-items:baseline;padding:0 7px 13px;display:flex}.sidebar-heading span{color:#5f655d;font-size:12px;font-weight:700}.sidebar-heading strong{color:#777d74;font:600 11px var(--mono)}.circuit-item{text-align:left;color:#515850;cursor:pointer;width:100%;box-shadow:none;background:#fffdf894;border:1px solid #d5d0c5;border-radius:11px;grid-template-columns:27px 1fr auto;align-items:center;gap:10px;padding:14px 11px;display:grid;position:relative}.circuit-list{gap:6px;display:grid}.circuit-item.active{color:#fff;background:#292f29;border-color:#272d26;box-shadow:0 8px 20px #21262026}.circuit-item>span:nth-child(2){min-width:0}.priority-dot{color:#22291e;background:var(--lime);width:25px;height:25px;font:700 12px var(--mono);border-radius:50%;place-items:center;display:grid}.priority-dot.priority-b{color:#183f62;background:#a9d8ff}.priority-dot.priority-c{color:#58346f;background:#e1c7f2}.circuit-item:disabled{cursor:default}.circuit-item strong,.circuit-item small{display:block}.circuit-item strong{font-size:13px}.circuit-item small{text-overflow:ellipsis;white-space:nowrap;color:#858b83;max-width:118px;font:500 9px var(--mono);margin-top:3px;overflow:hidden}.circuit-item.active small{color:#abb2aa}.item-status{color:var(--lime-dark);white-space:nowrap;border:1px solid #aab78b;border-radius:5px;padding:4px 6px;font-size:8px}.circuit-item.active .item-status{color:var(--lime);border-color:#596250}.item-number{color:#969b93;font:600 7px var(--mono);position:absolute;top:4px;right:7px}.circuit-item.active .item-number{color:#737c72}.locked-list{margin-top:13px}.locked-item{color:#777c74;border-bottom:1px solid #d8d3c8;grid-template-columns:27px 1fr auto;gap:8px;padding:12px 8px;font-size:11px;display:grid}.locked-item>span{font:500 10px var(--mono)}.locked-item i{font-style:normal;font:500 8px var(--mono);color:#9b9f97}.source-note{border-left:3px solid var(--lime-dark);background:#fffdf894;margin:30px 5px 0;padding:15px}.source-note span{color:var(--lime-dark);font:700 9px var(--mono);letter-spacing:.12em}.source-note p{color:#646a62;margin:7px 0 0;font-size:10px;line-height:1.6}.workspace{grid-area:2/2;min-width:0;padding:28px clamp(20px,4vw,58px) 54px}.lesson-header{justify-content:space-between;align-items:flex-end;gap:30px;max-width:1250px;margin:0 auto 18px;display:flex}.eyebrow{color:#697067;font:600 10px var(--mono);letter-spacing:.1em}.eyebrow span{color:#26301c;background:var(--lime);border-radius:4px;margin-right:9px;padding:4px 7px;display:inline-block}.lesson-header h2{letter-spacing:-.03em;margin:10px 0 7px;font-size:clamp(22px,2.7vw,36px)}.lesson-header p{color:#71766e;margin:0;font-size:12px}.difference-badge{color:#674278;font:700 8px var(--mono);letter-spacing:.08em;background:#f7effa;border:1px solid #cdb5d8;border-radius:5px;margin-top:9px;padding:5px 8px;display:inline-block}.variant-picker{flex-wrap:wrap;align-items:center;gap:5px;margin-top:10px;display:flex}.variant-picker>span{color:#777d74;font:700 8px var(--mono);letter-spacing:.08em;margin-right:3px}.variant-picker button{color:#6d736b;cursor:pointer;background:#fffdf8;border:1px solid #d4cfc5;border-radius:6px;min-height:28px;padding:0 9px;font-size:9px;font-weight:700}.variant-picker button.active{color:#2c312a;background:var(--lime);border-color:#8da631}.difficulty-picker{background:#f9f6ef;border:1px solid #d3cec3;border-radius:10px;flex:none;grid-template-columns:auto repeat(3,66px);align-items:stretch;display:grid;overflow:hidden}.difficulty-picker>span{color:#777c73;place-items:center;padding:0 12px;font-size:10px;font-weight:700;display:grid}.difficulty-picker button{color:#6f756d;cursor:pointer;background:0 0;border:0;border-left:1px solid #ded9cf;padding:8px 4px}.difficulty-picker button b,.difficulty-picker button small{display:block}.difficulty-picker button b{font:700 12px var(--mono)}.difficulty-picker button small{margin-top:2px;font-size:8px}.difficulty-picker button.active{color:#20271d;background:var(--lime)}.test-console,.stats-card{background:#fffdf8;border:1px solid #d6d1c7;border-radius:13px;max-width:1250px;margin:0 auto 18px;box-shadow:0 10px 30px #3537310f}.test-console{padding:15px 18px}.test-console-head{align-items:center;gap:16px;display:flex}.test-console-head>div{margin-right:auto}.test-console-head span{color:var(--lime-dark);font:700 8px var(--mono);letter-spacing:.12em}.test-console-head h2{font:700 18px var(--mono);margin:3px 0 0}.timer-toggle{color:#6f756d;font-size:10px;font-weight:700}.timer-readout{color:#293128;min-width:60px;font:700 15px var(--mono)}.test-start-actions{border-top:1px solid #e5e0d7;flex-wrap:wrap;align-items:center;gap:8px;margin-top:13px;padding-top:13px;display:flex}.test-start-actions button,.test-progress-row button,.next-test-button{color:#545b53;cursor:pointer;background:#fff;border:1px solid #cfcac0;border-radius:8px;min-height:36px;padding:0 13px;font-size:10px;font-weight:700}.test-start-actions button.recommended{color:#20261d;background:var(--lime);border-color:#88a72f}.test-start-actions p{color:#858a82;flex:300px;margin:0 0 0 5px;font-size:9px;line-height:1.6}.test-progress-row{align-items:center;gap:12px;margin-top:13px;display:flex}.test-progress-track{background:#e8e4db;border-radius:99px;flex:1;height:8px;overflow:hidden}.test-progress-track span{background:var(--lime-dark);border-radius:inherit;height:100%;transition:width .2s;display:block}.test-results{flex-wrap:wrap;gap:6px;margin-top:12px;display:flex}.test-results span{border-radius:6px;padding:5px 8px;font-size:9px}.test-results .pass{color:#35551d;background:#eff8d8}.test-results .retry{color:#74322f;background:#fbecea}.next-test-button{color:#fff!important;background:#293128!important;border-color:#293128!important}.stats-card{padding:17px 19px}.stats-card>div:first-child{justify-content:space-between;align-items:baseline;display:flex}.stats-card>div:first-child span{color:#737970;font-size:11px;font-weight:700}.stats-card>div:first-child strong{font:700 19px var(--mono)}.stats-grid{grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:7px;margin-top:13px;display:grid}.stats-grid span{background:#faf8f2;border:1px solid #e1ddd4;border-radius:7px;padding:9px 10px}.stats-grid b,.stats-grid i{display:block}.stats-grid b{text-overflow:ellipsis;white-space:nowrap;font-size:9px;overflow:hidden}.stats-grid i{color:#858b82;font:normal 8px var(--mono);margin-top:3px}.canvas-card,.controls-card{background:var(--paper);border:1px solid #d6d1c7;max-width:1250px;margin-inline:auto;box-shadow:0 16px 42px #35373114}.canvas-card{border-radius:15px 15px 0 0;position:relative;overflow:hidden}.canvas-toolbar{background:#faf7f0;border-bottom:1px solid #e0dcd3;justify-content:space-between;align-items:center;gap:16px;min-height:43px;padding:0 17px;display:flex}.canvas-toolbar>span{color:#4f564d;font:600 9px var(--mono);letter-spacing:.08em}.live-dot{background:var(--lime-dark);border-radius:50%;width:7px;height:7px;margin-right:6px;display:inline-block;box-shadow:0 0 0 4px #496b171a}.key-help{color:#94988f;gap:16px;font-size:9px;display:flex}.key-help b{color:#60665d;margin-left:2px;font-weight:700}.canvas-viewport{background:#fffefb;position:relative;overflow:hidden}.zoom-controls{z-index:5;flex-direction:column;gap:6px;display:flex;position:absolute;bottom:10px;right:10px}.zoom-controls button{color:#4a5044;cursor:pointer;background:#fffefbf0;border:1px solid #c6c1b5;border-radius:9px;width:36px;height:36px;font-size:16px;font-weight:700;box-shadow:0 3px 10px #1e28171f}.zoom-controls button:disabled{opacity:.35;cursor:default}.circuit-canvas{touch-action:none;-webkit-user-select:none;user-select:none;background:#fffefb;width:100%;height:min(55vh,560px);min-height:370px;display:block}.grid-field{color:#d9d8d0;fill:#fffefb}#dot-grid circle{fill:currentColor;opacity:.58}.wire{stroke:#3e4740;stroke-width:4px;stroke-linecap:round;fill:none;transition:stroke .2s,stroke-width .2s,opacity .2s}.wire-layer[class*=path-] .wire{opacity:.17}.wire-layer.path-on .wire-active{stroke:var(--orange);stroke-width:9px;opacity:.96}.wire-layer.path-off .wire-active{stroke:var(--blue);stroke-width:9px;opacity:.96}.node-dot{fill:#3e4740}.fixed-symbol,.placed-symbol,.answer-ghost{stroke:#222a24;stroke-width:3.3px;fill:none;stroke-linecap:round;stroke-linejoin:round}.fixed-scaffold{opacity:.42;stroke-dasharray:2 2}.symbol-fill{fill:#fffefb}.placed-symbol{cursor:grab}.placed-symbol:active{cursor:grabbing}.symbol-hitbox{fill:#0000;stroke:none}.symbol-gate{stroke-width:2.5px}.thyristor-body{fill:#fffefb}.thyristor-gate{stroke-width:3px}.source-wave{stroke-width:2.6px}.symbol-polarity{fill:#272e28;stroke:none;font:700 13px var(--mono)}.fixed-part-label{fill:#586058;stroke:none;font:700 11px var(--mono)}.freewheel-diode{stroke-width:2.3px}.power-switch-channel{stroke-width:4.2px}.transformer-core{stroke-width:2px}.transformer-dot{fill:#222a24;stroke:none}.answer-ghost{opacity:.28;stroke:var(--blue);stroke-dasharray:3 3;pointer-events:none}.symbol-inactive{opacity:.14}.slot{fill:#f9f7f0b8;stroke:#aeb3aa;stroke-width:2.3px;stroke-dasharray:7 6;transition:stroke .15s,fill .15s,filter .15s}.slot-selected{stroke:#67715f;stroke-dasharray:none}.slot-snap{fill:#c8ec4b40;stroke:#82ab21;stroke-width:4px;stroke-dasharray:none;filter:url(#slot-glow);transform-box:fill-box;transform-origin:50%;animation:.5s ease-out snap-pulse}.snap-ring{fill:none;stroke:#82ab21;stroke-width:5px;pointer-events:none;transform-box:fill-box;transform-origin:50%;animation:.55s ease-out infinite snap-thump}.snap-ring-delayed{animation-delay:.27s}@keyframes snap-thump{0%{opacity:.95;transform:scale(.55)}to{opacity:0;transform:scale(2.1)}}@keyframes snap-pulse{0%{transform:scale(1.25)}to{transform:scale(1)}}.slot-error{fill:#d94b460f;stroke:var(--red);stroke-width:4px;stroke-dasharray:none}.slot-id{fill:#5e665e;font:700 14px var(--mono);letter-spacing:.05em}.slot-hint{fill:#a2a79f;font:600 9px Yu Gothic UI,sans-serif}.slot-question{fill:#adb2aa;font:600 24px var(--mono)}.canvas-label{fill:#323a34;font:700 14px var(--mono)}.label-muted{fill:#858c83;font-size:10px}.label-accent{fill:var(--lime-dark)}.drag-ghost{z-index:100;pointer-events:none;color:#22281f;background:var(--lime);border:1px solid #93b82e;border-radius:6px;padding:6px 10px;font-size:10px;font-weight:700;position:fixed;transform:translate(-50%,-54px);box-shadow:0 8px 22px #1e28172e}.drag-ghost.ghost-snapped{color:#fff;background:#6e9418;border-color:#55750e;font-size:12px;transform:translate(-50%,-60px)scale(1.12)}.state-panel{background:#f7f4ed;border-top:1px solid #ddd8ce;align-items:center;gap:18px;padding:13px 18px;display:flex}.state-tabs{flex:none;gap:6px;display:flex}.state-tabs button{color:#777c74;cursor:pointer;background:#fffdf8;border:1px solid #d0ccc3;border-radius:7px;padding:7px 11px;font-size:10px;font-weight:700}.state-tabs button.on.active{color:#7c3515;border-color:var(--orange);background:#f47b3c1f}.state-tabs button.off.active{color:#194d80;border-color:var(--blue);background:#3385d41f}.state-panel p{color:#646b62;margin:0;font-size:11px;line-height:1.6}.path-key{vertical-align:3px;border-radius:4px;width:20px;height:4px;margin-right:8px;display:inline-block}.path-key.on{background:var(--orange)}.path-key.off{background:var(--blue)}.part-inspector{color:#fff;background:#232823f5;border:1px solid #555e53;border-radius:11px;width:220px;padding:16px 18px;position:absolute;top:62px;right:18px;box-shadow:0 14px 35px #191b1840}.part-inspector button{float:right;color:#bac1b7;cursor:pointer;background:0 0;border:0;width:24px;height:24px}.part-inspector>span{color:var(--lime);font:700 10px var(--mono);display:block}.part-inspector strong{margin:6px 0;font-size:14px;display:block}.part-inspector p{color:#bcc2ba;margin:0;font-size:10px}.controls-card{border-top:0;border-radius:0 0 15px 15px}.tray-heading{justify-content:space-between;align-items:center;padding:16px 20px 9px;display:flex}.tray-heading span{color:var(--lime-dark);font:700 8px var(--mono);letter-spacing:.12em}.tray-heading h3{margin:2px 0 0;font-size:14px}.tray-heading p{color:#91968d;margin:0;font-size:9px}.part-tray{scrollbar-width:thin;gap:9px;padding:3px 20px 17px;display:flex;overflow-x:auto}.part-card{color:#60665e;text-align:left;cursor:grab;touch-action:pan-x;background:#fbf9f4;border:1px solid #d7d3ca;border-radius:9px;grid-template-columns:27px 1fr;align-items:center;gap:5px;min-width:112px;padding:6px 9px;font-size:9px;display:grid;position:relative}.part-card:hover{background:#f7faeb;border-color:#91aa53;transform:translateY(-1px)}.part-card svg{stroke:#303832;stroke-width:4.8px;fill:none;stroke-linecap:round;stroke-linejoin:round;grid-row:1/span 2;width:31px;height:31px}.part-card .symbol-fill{fill:#fbf9f4}.part-card .symbol-polarity{fill:#303832;font-size:16px}.part-code{color:#2e342f;font:700 12px var(--mono)}.action-row{background:#f7f4ed;border-top:1px solid #e3dfd6;justify-content:space-between;align-items:center;gap:14px;padding:13px 20px;display:flex}.secondary-actions,.primary-actions{gap:8px;display:flex}.action-row button{color:#5e655c;cursor:pointer;background:#fffdf9;border:1px solid #d4d0c7;border-radius:8px;min-height:38px;padding:0 14px;font-size:10px;font-weight:700}.action-row button:disabled{opacity:.4;cursor:default}.answer-button{color:#3f627c!important;border-color:#bacbd6!important}.score-button{min-width:130px;box-shadow:0 5px 14px #7592252e;color:#20261d!important;background:var(--lime)!important;border-color:#88a72f!important}.score-button span{margin-left:12px;font-size:16px}.feedback{border-radius:10px;margin:0 20px 18px;overflow:hidden}.feedback-score{align-items:center;gap:14px;padding:13px 16px;display:flex}.feedback-score>span{min-width:58px;font:700 25px var(--mono)}.feedback-score>span small{font-size:12px}.feedback-score strong{font-size:12px;display:block}.feedback-score p{margin:2px 0 0;font-size:9px}.feedback.needs-work{color:#74322f;background:#fbecea;border:1px solid #efcac6}.feedback.perfect{color:#35551d;background:#eff8d8;border:1px solid #d0e5a0}.feedback ul{flex-wrap:wrap;gap:7px;margin:0;padding:0 16px 13px;list-style:none;display:flex}.feedback li{background:#ffffff8c;border-radius:6px;align-items:center;gap:7px;padding:6px 8px;font-size:9px;display:flex}.feedback li b{font:700 10px var(--mono)}.feedback li span{color:#95544f;border-left:1px solid #e6c2bf;padding-left:7px}@media (width<=900px){.app-shell{display:block}.topbar{height:69px;padding:0 15px;position:sticky}.brand-copy{min-width:0}.brand-copy p,.source-chip{display:none}.mode-switch{margin-left:auto}.sidebar{border-bottom:1px solid #d2cec3;border-right:0;gap:8px;height:auto;padding:11px 15px;display:flex;position:static;overflow:auto hidden}.sidebar-heading,.locked-list,.source-note{display:none}.circuit-list{gap:8px;display:flex}.circuit-item{min-width:230px}.workspace{padding:21px 14px 40px}.test-console-head{flex-wrap:wrap;align-items:flex-start}.lesson-header{display:block}.difficulty-picker{width:fit-content;margin-top:16px}.key-help{display:none}.circuit-canvas{height:48vh;min-height:330px}.state-panel{display:block}.state-panel p{margin-top:9px}}@media (width<=620px){.brand-mark{transform-origin:0;width:27px;height:28px;transform:scale(.8)}.brand-copy h1{font-size:16px}.mode-switch button{padding:7px 10px;font-size:10px}.lesson-header h2{font-size:23px}.lesson-header p{line-height:1.7}.difficulty-picker{grid-template-columns:auto repeat(3,1fr);width:100%}.circuit-canvas{min-height:290px}.circuit-canvas[data-wide=true]{height:56vh}.tray-heading p{display:none}.action-row{flex-direction:column-reverse;align-items:stretch}.primary-actions,.secondary-actions{width:100%}.primary-actions button,.secondary-actions button{flex:1;padding:0 7px}.score-button{min-width:0}.state-tabs button{flex:1}.state-tabs{width:100%}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition:none!important}.snap-ring{opacity:.85;animation:none;transform:scale(1.1)}.snap-ring-delayed{display:none}.slot-snap{animation:none}}