:root{color-scheme:dark;--bg:#101721;--panel:#151e2a;--panel-deep:#101822;--bar:#192331;--line:#2b3848;--text:#e9f0f6;--muted:#a6b5c7;--faint:#8193aa;--mint:#8bf3d3;--blue:#79bdfb;--red:#ff9b9f;--amber:#f6cf89;--mono:"Cascadia Code","SFMono-Regular",Consolas,"Liberation Mono",monospace;--sans:"Segoe UI","Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif;--code-size:13px;--code-line:24px}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(ellipse at 83% -30%,#1c3140 0,transparent 61%),var(--bg);color:var(--text);font:14px/1.55 var(--sans);min-width:280px}
button,select,textarea{font:inherit}
button{cursor:pointer;color:inherit}
button:disabled{opacity:.48;cursor:default}
button:focus-visible,select:focus-visible,summary:focus-visible,textarea:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
[hidden]{display:none!important}
h1,h2,h3,p,ol{margin:0}
kbd{font:11px var(--mono);background:#1c2837;border:1px solid #354456;border-radius:4px;padding:3px 6px;color:#becadb;white-space:nowrap}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.topbar{height:69px;padding:0 max(24px,calc((100vw - 1560px)/2 + 24px));display:flex;justify-content:space-between;align-items:center;background:#121a25e8;border-bottom:1px solid var(--line);gap:12px}
.brand,.top-actions,.autosave{display:flex;align-items:center;gap:13px}
.brand{font-weight:750;font-size:17px;letter-spacing:.03em;white-space:nowrap}
.brand small{display:block;font:9px var(--mono);color:var(--faint);letter-spacing:.18em;margin-top:3px}
.brand-icon{width:36px;height:36px;display:grid;place-items:center;background:#15362f;border:1px solid #346759;border-radius:9px;color:var(--mint)}
.brand-icon svg{width:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.autosave{color:var(--muted);font-size:12px;gap:7px}
.autosave i,.pcb-power{width:6px;height:6px;border-radius:50%;background:var(--mint);display:inline-block;box-shadow:0 0 8px #8bf3d37a}
.frame{max-width:1560px;margin:auto;padding:23px 24px 0}
.exercise-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.exercise{display:flex;align-items:center;text-align:left;gap:13px;min-height:68px;padding:11px 15px;background:#17212e;border:1px solid var(--line);border-radius:9px;transition:background .15s,border-color .15s}
.exercise:hover{background:#1b2836;border-color:#567183}
.exercise.selected{background:linear-gradient(95deg,#19352f,#172831 83%);border-color:#497a70}
.exercise-number{width:38px;height:38px;display:grid;place-items:center;border-radius:7px;font:700 17px var(--mono);color:var(--muted);background:#212e3d;border:1px solid #364659;flex:none}
.selected .exercise-number{color:var(--mint);background:#1c4439;border-color:#3d6d60}
.exercise small,.exercise b{display:block}
.exercise small{color:var(--muted);font-size:11px;letter-spacing:.08em}
.exercise b{font-size:16px;letter-spacing:.02em}
.exercise-arrow{margin-left:auto;font-size:16px;color:var(--faint)}
.selected .exercise-arrow{color:var(--mint)}
.workspace-bar{display:flex;justify-content:space-between;align-items:end;gap:14px;margin:23px 0 13px}
.eyebrow,.section-heading{color:var(--faint);font:10px/1.5 var(--mono);letter-spacing:.16em;font-weight:600}
h1{font-size:25px;line-height:1.35;font-weight:750;letter-spacing:.025em;margin-top:4px}
.workspace-actions{display:flex;gap:8px;flex-wrap:wrap}
.button{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid #3a495d;background:#1c2837;border-radius:6px;min-height:34px;padding:5px 11px;font-size:12px;font-weight:650;white-space:nowrap}
.button:hover:not(:disabled){background:#28394a;border-color:#62788b}
.button.primary{color:#102921;background:var(--mint);border-color:var(--mint);padding-inline:14px}
.button.primary:hover{background:#b7ffe8;border-color:#b7ffe8}
.button.flat{background:transparent;border-color:transparent}
.button.small{padding:3px 7px;min-height:29px;font-size:11px}
.lab-grid{display:grid;grid-template-columns:minmax(211px,.78fr) minmax(0,2.4fr) minmax(292px,1fr);align-items:stretch;gap:11px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:9px;min-width:0;overflow:hidden}
.panel-heading{height:43px;background:var(--bar);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:9px;padding:0 13px}
.panel-heading h2{font-size:13px;font-weight:700;white-space:nowrap}
.panel-heading .button{margin-left:auto}
.panel-icon{font:700 14px var(--mono);color:var(--mint)}
.brief-body{padding:13px 13px 10px}
.tags{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:10px}
.tag{font:11px var(--mono);color:#a9d4ff;background:#1c3045;border:1px solid #36526c;padding:3px 6px;border-radius:4px}
.requirements{list-style:none;padding:0;display:grid;gap:7px;color:#c9d5e1;font-size:12px;line-height:1.6;counter-reset:req}
.requirements li{display:grid;grid-template-columns:20px 1fr;gap:4px;counter-increment:req}
.requirements li::before{content:counter(req,decimal-leading-zero);font:10px/1.95 var(--mono);color:var(--faint)}
.restrictions{border-left:2px solid #ac864b;background:#342b25;color:#f0d3a3;border-radius:0 5px 5px 0;padding:6px 8px;margin-top:11px;font-size:11px}
.hint{font-size:11px;color:var(--muted);margin-top:8px}
.hint summary{cursor:pointer;color:var(--blue)}
.hint p{padding-top:4px}
.section-heading{border-top:1px solid var(--line);padding:10px 13px 5px}
.tree-title{display:flex;gap:7px;padding:1px 13px 4px;font:11px/1.6 var(--mono);color:var(--muted)}
.tree-folder{color:var(--amber)}
.section-list{display:grid;gap:1px;padding:2px 6px 9px}
.section-item{background:transparent;border:1px solid transparent;border-radius:5px;display:flex;align-items:center;gap:7px;padding:5px 7px 5px 10px;text-align:left;color:var(--muted);min-height:31px;white-space:nowrap;font-size:11px}
.section-item:hover{background:#233344}
.section-item[aria-pressed="true"]{background:#203b3c;border-color:#31565a;color:#d0f9ed}
.section-item .section-code{font:10px var(--mono);color:#93c9f6;width:19px}
.section-item .section-role{margin-left:auto;color:var(--faint);font-size:10px}
.section-item.has-error .section-role{color:var(--red)}
.ide{display:flex;flex-direction:column;background:var(--panel-deep)}
.editor-tabs{height:43px;flex:none;display:flex;justify-content:space-between;align-items:center;background:var(--bar);border-bottom:1px solid var(--line);position:relative;padding-right:7px}
.file-tab{height:43px;display:flex;gap:9px;align-items:center;font:600 13px var(--mono);padding:0 16px;border-top:2px solid var(--mint);border-right:1px solid var(--line);background:var(--panel-deep)}
.file-c{color:var(--blue);font-weight:900}
#editor-options{font-size:21px;line-height:1;min-height:28px;padding:0 8px}
.menu{position:absolute;z-index:4;right:7px;top:38px;display:grid;background:#1e2c3b;padding:4px;border:1px solid #41566a;box-shadow:0 10px 20px #0005;border-radius:6px}
.menu button{border:0;background:transparent;text-align:left;padding:7px 9px;font-size:12px;border-radius:4px}
.menu button:hover{background:#304356}
.editor-path{display:flex;align-items:center;gap:8px;min-height:32px;padding:4px 12px;white-space:nowrap;overflow:auto;scrollbar-width:thin;border-bottom:1px solid #233143;color:var(--faint);font:11px var(--mono)}
.editor-path b{color:#668198}
.editor-path strong{color:#b2cbdf}
.editor-outer{position:relative;flex:1;min-height:354px;display:grid;grid-template-columns:42px minmax(0,1fr)}
.gutter{position:relative;overflow:hidden;background:#121c28;border-right:1px solid #253142}
#lines{position:absolute;top:10px;left:0;right:0;text-align:right;color:#7488a0;font:11px/var(--code-line) var(--mono);padding-right:8px}
.line{height:var(--code-line)}
.line-error{background:#6b2e3c;color:#ffe0e1;border-left:3px solid var(--red);margin-right:-8px;padding-right:8px}
.editor-wrap{position:relative;overflow:hidden}
#code,.highlight{position:absolute;inset:0;margin:0;padding:10px 12px;border:0;tab-size:4;text-align:left;font:var(--code-size)/var(--code-line) var(--mono);letter-spacing:0;font-variant-ligatures:none;white-space:pre;word-wrap:normal}
.highlight{color:#e4edf8;overflow:hidden;pointer-events:none}
#code{resize:none;overflow:auto;color:transparent;caret-color:var(--mint);background:transparent;outline:none;scrollbar-color:#3b5267 #141e29}
#code::selection{background:#4c679a8c;color:transparent}
#code:focus-visible{box-shadow:inset 0 0 0 1px #385d60;outline:0}
#highlight-row{position:absolute;left:0;right:0;height:var(--code-line);background:#69384949;pointer-events:none;border-left:2px solid var(--red);visibility:hidden}
.syntax-comment{color:#8ea79f}.syntax-key{color:#c8a4fc}.syntax-name{color:#8ad3fc}.syntax-number{color:#f5c389}
.editor-status{padding:4px 9px;display:flex;align-items:center;gap:13px;background:#192635;border-top:1px solid var(--line);font:10px var(--mono);color:#abbfd2;min-height:26px;white-space:nowrap}
.editor-status .position{margin-left:auto}
#editor-marker{color:var(--red);overflow:hidden;text-overflow:ellipsis}
.hardware-body{padding:12px}
.pcb{height:150px;position:relative;overflow:hidden;background:linear-gradient(145deg,#1a3838,#183337 72%);border:1px solid #426263;border-radius:9px}
.pcb-traces{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.pcb-label{position:absolute;top:12px;left:20px;color:#b8d4cb;font:9px var(--mono);letter-spacing:.08em}
.pcb-label .pcb-power{margin-right:3px;width:5px;height:5px}
.board-leds{position:absolute;inset:36px 0 0;display:flex;justify-content:center;align-items:center;gap:22px}
.led-unit{display:grid;justify-items:center;gap:3px;min-width:42px}
.led{--light:#8bf3d3;--unlit:#365d56;width:21px;height:21px;background:#152a2c;border:1px solid var(--unlit);border-radius:50%;box-shadow:inset 0 0 0 4px #1b3839;transition:box-shadow .08s}
.led.blue{--light:#82c8ff;--unlit:#3b576c}
.led.amber{--light:#f6cf89;--unlit:#705e42}
.led.on{background:var(--light);border-color:var(--light);box-shadow:0 0 17px var(--light),inset 0 0 0 4px #ffffff42}
.led-unit b{font:600 11px var(--mono);color:#c8e1dc;margin-top:5px}
.led-unit small{font:9px var(--mono);color:#a1bbb5}
.user-button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;margin:10px 0 8px;background:#202d3d;border:1px solid #405268;border-radius:7px;padding:7px 9px;min-height:49px}
.user-button:hover:not(:disabled){background:#2b3c50;border-color:var(--blue)}
.user-button.active{background:#253f50;border-color:var(--blue)}
.button-pad{display:grid;place-items:center;color:#8dc2ee;background:#182637;border:1px solid #435e7c;width:28px;height:28px;border-radius:6px}
.user-button b,.user-button small{display:block}
.user-button b{font:700 12px var(--mono)}
.user-button small{font-size:10px;color:#acbed1;margin-top:3px}
.user-button kbd{margin-left:auto}
.sim-controls{display:flex;flex-wrap:wrap;gap:5px}
select{background:#1c2837;color:var(--text);border:1px solid #3a495d;border-radius:6px;font:11px var(--mono);padding:3px 4px;min-height:29px;margin-left:auto}
.signals-head{display:flex;justify-content:space-between;align-items:center;margin:11px 0 5px}
.signals-head h3{font-size:11px}
.time{font:11px var(--mono);color:var(--mint)}
#wave{width:100%;display:block;border:1px solid #2b394a;border-radius:5px;background:#111a25;overflow:hidden}
.output{grid-column:1/-1}
.output-head{height:40px}
.result-state{padding:2px 7px;border:1px solid #3d5063;background:#212f3e;border-radius:4px;font-size:10px;color:#c5d3e1;white-space:nowrap}
.result-state.ok{color:var(--mint);background:#1b3832;border-color:#396356}
.result-state.error{color:#ffd0d1;background:#492932;border-color:#77454c}
.output-help{color:var(--faint);margin-left:auto;font-size:11px}
.diagnostics{background:#111923;padding:10px 13px;min-height:80px;max-height:330px;overflow:auto}
.empty-output{color:var(--muted);font-size:12px;padding:9px 0}
.empty-output span{font:700 15px var(--mono);color:var(--mint);margin-right:5px}
.check{padding:8px 5px;border-bottom:1px solid #283646;display:grid;grid-template-columns:19px minmax(0,1fr) auto;gap:8px;align-items:start}
.check:last-child{border-bottom:0}
.check .check-symbol{color:var(--mint);font:700 15px var(--mono)}
.check.fail .check-symbol{color:var(--red)}
.check h3{font-size:12px}
.check p{color:#b3c4d4;font-size:11px;margin-top:2px}
.check-actions{display:flex;gap:5px;flex-wrap:wrap}
.check-fix{margin:6px 0 0;white-space:pre-wrap;overflow-wrap:anywhere;background:#23232d;border-left:2px solid #ad7952;padding:5px 8px;color:#f7d7ac;font:11px/1.6 var(--mono)}
footer{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;padding:13px 0 17px;color:var(--faint);font:10px/1.8 var(--mono)}
footer span span{color:#5d7d8e;margin-inline:4px}
dialog{background:var(--panel);color:var(--text);border:1px solid #485b70;border-radius:10px;padding:0;width:min(730px,calc(100vw - 28px));max-height:86vh;box-shadow:0 25px 75px #0009}
dialog::backdrop{background:#080e17c4}
.dialog-head{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;z-index:1;background:#1b2735;border-bottom:1px solid #39495b;padding:10px 15px}
.dialog-head h2{font-size:16px}
#close-dialog{font-size:22px;line-height:1}
.dialog-body{padding:15px;display:grid;gap:12px}
.dialog-body p,.dialog-body li{font-size:13px;color:#c5d0dc}
.dialog-body ul,.dialog-body ol{margin:0;padding-left:22px}
.dialog-body h3{font-size:13px;color:var(--mint);margin-bottom:5px}
.dialog-body pre{background:#101721;border:1px solid #344354;border-radius:6px;margin:0;padding:10px;max-height:55vh;overflow:auto;font:12px/1.65 var(--mono)}
.dialog-body details>summary{font-size:13px;color:var(--blue);cursor:pointer;margin-bottom:5px}
.dialog-actions{display:flex;gap:7px;justify-content:flex-end;flex-wrap:wrap}
.toast{position:fixed;z-index:10;bottom:18px;right:18px;border:1px solid #48786c;background:#193a35;color:#dcfff4;border-radius:6px;padding:8px 12px;box-shadow:0 8px 30px #0007}
@media(max-width:1120px){.lab-grid{grid-template-columns:minmax(178px,.7fr) minmax(0,2fr) minmax(260px,1fr)}.frame{padding-inline:15px}.topbar{padding-inline:15px}.brief-body{padding-inline:10px}.sim-controls .button{padding-inline:5px}}
@media(max-width:880px){.lab-grid{grid-template-columns:minmax(0,1.65fr) minmax(240px,1fr)}.brief{grid-column:1/-1}.brief-body{display:grid;grid-template-columns:1fr 1.5fr;gap:6px 12px}.tags,.restrictions,.hint{margin:0}.requirements{grid-column:2;grid-row:1/4}.section-heading,.tree-title{display:none}.section-list{display:flex;flex-wrap:wrap;padding:3px 8px 8px}.section-item .section-role{display:none}.editor-outer{min-height:355px}}
@media(max-width:620px){.topbar{height:58px}.top-actions .autosave{display:none}.brand{font-size:14px;gap:7px}.brand-icon{width:31px;height:31px}.frame{padding-top:12px}.exercise-nav{gap:6px}.exercise{padding:7px;gap:6px;min-height:55px}.exercise-number{width:26px;height:28px;font-size:13px}.exercise b{font-size:11px}.exercise small{font-size:9px}.exercise-arrow{display:none}.workspace-bar{align-items:start;flex-direction:column;margin-top:14px}.workspace-actions{gap:5px}.workspace-actions .button{font-size:11px;padding-inline:7px}h1{font-size:21px}.lab-grid{grid-template-columns:minmax(0,1fr);gap:8px}.brief-body{display:block}.tags{margin-bottom:6px}.requirements{gap:3px}.restrictions,.hint{margin-top:7px}.hardware{grid-row:4}.editor-outer{min-height:315px}.output-help{display:none}.check{grid-template-columns:14px minmax(0,1fr)}.check-actions{grid-column:2}.board-leds{gap:30px}.pcb-traces{width:100%}.diagnostics{max-height:410px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;scroll-behavior:auto!important}}