:root{--ink:#173f3c;--paper:#f5f2e9;--line:#d4dcd3;--accent:#e9683f;--muted:#6e807a;--mono:'Courier New',monospace;--title:Georgia,'Times New Roman',serif}*{box-sizing:border-box}body{margin:0;color:var(--ink);background:radial-gradient(ellipse at 20% 0,#e0e9d7,transparent 48%),var(--paper);font:14px/1.5 'Trebuchet MS',sans-serif}button,input,select,textarea{font:inherit}button{cursor:pointer;border:1px solid var(--line);border-radius:7px;background:#fffdf6;color:var(--ink);padding:7px 11px}button:hover{border-color:var(--ink);background:#e7eddf}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid var(--accent);outline-offset:2px}button.primary{background:var(--ink);color:white;border-color:var(--ink)}header{padding:18px 28px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{font:bold 29px var(--title);display:flex;gap:15px;color:var(--ink);text-decoration:none}.brand>span{font:700 20px 'Trebuchet MS',sans-serif}.brand small{display:block;font:9px var(--mono);letter-spacing:2px}.header-actions{display:flex;gap:8px}.intro{display:flex;align-items:center;justify-content:space-between;padding:22px 28px}.eyebrow{font:10px var(--mono);letter-spacing:2px;color:var(--accent)}h1{font:32px var(--title);margin:5px 0}.intro p{font-size:12px;color:var(--muted)}main{display:grid;grid-template-columns:236px minmax(400px,1fr) 310px;margin:0 20px 20px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fbfcf7;min-height:660px}aside{padding:15px;border-right:1px solid var(--line)}.section-title{font:11px var(--mono);letter-spacing:1px;display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.section-title button{font-size:10px}input:not([type=color]),select{border:1px solid var(--line);background:white;border-radius:6px;padding:9px;width:100%;color:var(--ink)}select{margin-top:7px}.legend{font-size:10px;margin:12px 0;color:var(--muted)}.legend i{display:inline-block;width:6px;height:6px;background:var(--accent);border-radius:50%;margin-right:5px}.legend span{margin-left:10px}#catalog{height:530px;overflow:auto;display:grid;grid-template-columns:1fr 1fr;gap:7px;align-content:start}.catalog-item{height:88px;text-align:left;padding:9px;font-size:11px}.catalog-item b{display:block;font:22px var(--mono);color:var(--accent);margin-bottom:3px}.catalog-item small{display:block;color:var(--muted);font-size:9px}.workspace{min-width:0;display:flex;flex-direction:column}.toolbar{display:flex;justify-content:space-between;gap:5px;flex-wrap:wrap;padding:10px;border-bottom:1px solid var(--line)}.toolbar button{font-size:11px;padding:6px}.toolbar label{font-size:11px}input[type=color]{border:0;width:27px;height:25px;background:none;vertical-align:middle}.canvas-scroll{overflow:auto;height:515px;touch-action:pan-x pan-y;background:#eef2e9}#board{width:2200px;height:1900px;position:relative;background-image:radial-gradient(#acbeb0 .8px,transparent .8px);background-size:18px 18px}#wires,#parts{position:absolute;inset:0;pointer-events:none}#wires{overflow:visible}#wires path{pointer-events:stroke;cursor:pointer}.canvas-label{position:absolute;top:20px;left:22px;font:11px var(--mono);letter-spacing:2px;pointer-events:none;color:#748b7b}.canvas-label span{display:block;font:11px 'Trebuchet MS',sans-serif;letter-spacing:0}.part{position:absolute;background:#fffdf5;border:2px solid #718f78;border-radius:9px;padding:18px 20px 21px;min-width:160px;box-shadow:0 5px 0 #193d3120;pointer-events:auto;cursor:grab;touch-action:none;user-select:none}.part.selected{outline:3px solid var(--accent);outline-offset:4px}.part h3{font-size:12px;margin:8px 0;max-width:170px;pointer-events:none}.part small{font:10px var(--mono);pointer-events:none}.part.uno{background:#167985;color:white;min-width:290px;border-color:#08555e;padding:26px 20px 35px}.uno h3{font-size:21px;letter-spacing:1px}.chip{width:90px;height:25px;border:3px dashed #89938c;background:#243832;margin:14px 0;color:white;font:8px var(--mono);text-align:center;padding-top:3px}.pins{display:flex;gap:5px;flex-wrap:wrap;max-width:280px}.pin{position:relative;padding:3px;min-width:23px;height:25px;font:8px var(--mono);border-radius:2px;background:#263c35;color:#fff;border:1px solid #899b86;cursor:crosshair}.pin.pending{outline:3px solid var(--accent)}.bulb{display:inline-block;width:23px;height:25px;border-radius:50% 50% 5px 5px;background:#8b3827;border:2px solid #6b291a}.bulb.on,.builtin.on{background:#ff6b31;box-shadow:0 0 22px 10px #ff943c88}.builtin{display:inline-block;width:8px;height:8px;background:#41574b;border-radius:50%;margin-left:8px}.resistor-icon{display:block;width:65px;height:20px;background:linear-gradient(90deg,#dfc395 25%,#6e3123 25% 32%,#1d1d1b 32% 39%,#d44127 39% 46%,#dfc395 46% 80%,#a08d3c 80% 87%,#dfc395 87%);border-radius:5px}#status{padding:8px 12px;font-size:11px;background:#e2ebdc;border-top:1px solid var(--line);min-height:34px}.inspector{display:flex;flex-wrap:wrap;gap:6px;padding:12px}.inspector strong{font-size:11px;flex:1 0 100%}.inspector #value{width:170px}.inspector button{font-size:11px}.code-panel{border-left:1px solid var(--line);padding:15px;display:flex;flex-direction:column}.notice{font-size:11px;margin:0 0 12px;color:var(--muted)}textarea{resize:vertical;min-height:290px;width:100%;padding:13px;background:#173c38;color:#e8efdd;border:0;border-radius:8px;font:12px/1.7 var(--mono);tab-size:2}details{font-size:11px;margin:12px 0}details p{color:var(--muted)}.monitor-head{display:flex;align-items:center;justify-content:space-between;font:11px var(--mono)}.monitor-head button{font-size:10px}pre{background:#e9eee3;padding:10px;min-height:85px;max-height:150px;overflow:auto;white-space:pre-wrap;font:11px/1.6 var(--mono)}.safety{font-size:10px;color:var(--muted);margin-top:auto}main{animation:appear .5s ease-out}@keyframes appear{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media(min-width:1600px){main{grid-template-columns:255px 1fr 370px}.canvas-scroll{height:620px}#catalog{height:630px}}@media(max-width:1100px){main{grid-template-columns:210px 1fr}.code-panel{grid-column:1/-1;border-left:0;border-top:1px solid var(--line)}textarea{min-height:220px}.intro h1{font-size:26px}}@media(max-width:650px){header{padding:12px;align-items:start;gap:10px}.brand{font-size:22px;gap:8px}.brand>span{font-size:16px}.brand small{font-size:7px;letter-spacing:0}.header-actions{flex-wrap:wrap;justify-content:flex-end;max-width:190px}.header-actions button{font-size:10px;padding:7px}.intro{padding:18px 14px}.intro h1{font-size:24px}.intro p{display:none}main{margin:0 8px 15px;display:flex;flex-direction:column}aside{border-right:0;border-bottom:1px solid var(--line);padding:10px}aside .section-title{margin-bottom:8px}#search{width:60%}select{width:38%;margin:0}.legend{margin:6px 0}#catalog{display:flex;height:90px;overflow-x:auto}#catalog button{min-width:120px;height:80px}.canvas-scroll{height:410px}.toolbar{padding:6px}.code-panel{padding:12px}.canvas-label{font-size:10px}.inspector{padding:9px}}@media(prefers-reduced-motion:reduce){main{animation:none}}

/* Component illustrations share a fixed viewBox so pins and wires remain independent of artwork. */
.component-art{display:block;width:100%;height:auto;overflow:visible;pointer-events:none;user-select:none}
.catalog-item{height:126px;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;padding:6px 7px 8px;background:linear-gradient(155deg,#fffef8,#edf1e7);transition:border-color .15s,background-color .15s}
.catalog-item .component-art{height:64px;width:100%;flex:none;margin:0 auto 2px;filter:drop-shadow(0 3px 2px #1d393315)}
.catalog-item>span{line-height:1.2;min-height:25px;font-size:10px}
.catalog-item small{margin-top:auto;font:8px var(--mono);color:#6e807a}
.part{width:202px;min-width:0;padding:10px 12px 12px;background:linear-gradient(145deg,#fffef7ed,#f4f4e9ed);border:1px solid #b5c5af;box-shadow:0 3px 0 #70837119,0 8px 18px #2246380e;border-radius:12px}
.part .component-art{height:106px;margin:0 auto 3px;filter:drop-shadow(0 5px 3px #15392e1f)}
.part h3{font:700 11px/1.25 'Trebuchet MS',sans-serif;letter-spacing:0;margin:3px 0 1px;max-width:none;color:#254a40}
.part>small{display:block;font:10px var(--mono);color:#6a7969;min-height:13px;margin:2px 0 6px;overflow-wrap:anywhere}
.part .pins{gap:4px;max-width:none;padding-top:7px;border-top:1px solid #bdcbb75e}
.part .pin{position:relative;min-width:24px;height:25px;padding:3px 4px 3px 11px;background:#e5e9db;color:#304b40;border:1px solid #a9b69f;border-bottom:3px solid #93a084;font-size:8px;box-shadow:0 1px 2px #2a4c2814}
.part .pin::before{content:'';position:absolute;width:4px;height:4px;left:3px;top:8px;background:#263d32;box-shadow:0 0 0 1px #c2b778;border-radius:50%}
.part .pin:hover{background:#f6dec0;border-color:#d38b56}
.part .pin.pending{background:#ffe3c2;outline:3px solid var(--accent);outline-offset:2px}
.part-mode{position:absolute;right:9px;top:8px;z-index:1;font:7px var(--mono);letter-spacing:.6px;border:1px solid #c7cebd;padding:2px 4px;border-radius:4px;background:#f4f6ebda;color:#6a7866;pointer-events:none}
.part-mode.model{color:#52703c;border-color:#a8ba8a;background:#eff4e3da}
.part.uno{width:322px;min-width:0;padding:12px 14px;background:linear-gradient(145deg,#eff6eced,#dfeadbed);border-color:#8caaa0;color:var(--ink)}
.part.uno .component-art{height:174px;margin:0 0 4px}
.part.uno h3{font-size:13px;letter-spacing:0}
.part.uno .pins{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.part.uno .pin{min-width:0;background:#263e3d;color:#e8eddc;border-color:#556e5a;border-bottom-color:#19322d}
.part.uno .pin::before{background:#0a1f1d;box-shadow:0 0 0 1px #aeaa6b}
.part.resistor,.part.led,.part.diode,.part.schottky,.part.reed{width:184px}
.part.resistor .component-art,.part.diode .component-art,.part.schottky .component-art,.part.reed .component-art{height:72px}
.part.led .component-art{height:91px}
.component-art .bulb{fill:#ae3c2d;stroke:#7e3022;transition:fill .08s,filter .08s}
.component-art .bulb.on{fill:#ff713f;filter:drop-shadow(0 0 7px #ff883e) drop-shadow(0 0 15px #ff9e4f)}
.component-art .builtin{fill:#40532c}
.component-art .builtin.on{fill:#ffdb57;filter:drop-shadow(0 0 5px #ffd649)}
@media(max-width:650px){#catalog{height:128px}#catalog button{height:118px;min-width:118px;max-width:118px}.catalog-item .component-art{height:61px}.catalog-item>span{font-size:10px}.part .pin{min-width:27px;height:28px}.part .pin::before{top:9px}}
@media(prefers-reduced-motion:reduce){.catalog-item,.component-art .bulb{transition:none}}

/* Circuits workspace: freestanding parts with terminals anchored to their artwork. */
body{background:#f4f6f6}
header{padding:12px 20px;background:#fff;box-shadow:0 1px 4px #233f3412}
.brand small{letter-spacing:1px}
.intro{display:none}
main{margin:0;border-radius:0;border:0;min-height:calc(100vh - 77px);grid-template-columns:minmax(380px,1fr) 310px 252px;grid-template-areas:'work code library';animation:none}
.workspace{grid-area:work}
aside{grid-area:library;border-left:1px solid #d3dada;border-right:0;background:#fff}
.code-panel{grid-area:code;border-left:1px solid #d3dada;background:#f7f9f8}
.code-hidden main{grid-template-columns:minmax(380px,1fr) 252px;grid-template-areas:'work library'}
.code-hidden .code-panel{display:none}
.toolbar{background:#fff}
.canvas-scroll{height:calc(100vh - 240px);min-height:480px;background:#f6f8f8}
#board{background-color:#f7f9f9;background-image:radial-gradient(#c5cece .7px,transparent .7px);background-size:20px 20px}
.canvas-label{font-size:10px;letter-spacing:1px;opacity:.6}
#catalog{height:calc(100vh - 260px);min-height:300px}
.catalog-item{background:#fff;border-color:#e0e5e2;box-shadow:none}
.catalog-item:hover{background:#f0f6f3;border-color:#86a89a}
.part,.part.uno,.part.resistor,.part.led,.part.diode,.part.schottky,.part.reed{width:240px;min-width:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;color:var(--ink)}
.part.uno{width:400px}
.part.resistor,.part.diode,.part.schottky,.part.reed{width:200px}
.part.led{width:170px}
.component-stage{position:relative;width:100%;aspect-ratio:240/144;overflow:visible}
.part .component-stage .component-art{width:100%;height:100%;margin:0;filter:drop-shadow(0 3px 2px #163c3026)}
.part h3,.part.uno h3{font-size:10px;font-weight:400;text-align:center;margin:25px 0 0;letter-spacing:0;color:#586c62}
.part>small{font-size:9px;text-align:center;margin:0;min-height:12px}
.part-mode,.part-mode.model{position:static;display:block;border:0;background:transparent;text-align:center;padding:0;font-size:7px;color:#829184}
.part.selected{outline:1px dashed #329278;outline-offset:12px;border-radius:5px}
.part .pins,.part.uno .pins{position:absolute;inset:0;display:block;padding:0;border:0;pointer-events:none;max-width:none}
.part .pin,.part.uno .pin{position:absolute;transform:translate(-50%,-50%);padding:0;margin:0;min-width:0;width:12px;height:12px;border:1px solid #b7ac68;border-radius:2px;background:#233c37;box-shadow:0 0 0 2px #ffffff40;pointer-events:auto;overflow:visible;z-index:2}
.part .pin::before,.part.uno .pin::before{width:4px;height:4px;left:3px;top:3px;border:0;background:#b7b58b;box-shadow:none;border-radius:50%}
.part .pin::after{content:attr(data-label);position:absolute;pointer-events:none;color:#304d43;background:#f7f9f9e6;font:8px/1.1 'Courier New',monospace;padding:1px 2px;border-radius:2px;white-space:nowrap}
.part .terminal-top::after{bottom:15px;left:2px;transform:rotate(-65deg);transform-origin:left bottom}
.part .terminal-bottom::after{top:15px;left:3px;transform:rotate(55deg);transform-origin:left top}
.part .terminal-left::after{right:17px;top:0}
.part .terminal-right::after{left:17px;top:0}
.part .pin:hover,.part .pin:focus-visible{background:#f5bc4a;outline:3px solid #51ac85;outline-offset:2px;z-index:4}
.part .pin.pending{outline:3px solid #e67b3a;background:#ffd27b;z-index:4}
.part .pin:hover::after,.part .pin:focus-visible::after{font-size:11px;font-weight:bold;z-index:5}
.part.uno h3{margin-top:30px}
.inspector{background:#fff;border-top:1px solid #d3dada}
@media(max-width:1100px){main{grid-template-columns:minmax(330px,1fr) 252px;grid-template-areas:'work library' 'code code'}.code-panel{grid-column:auto}.code-hidden main{grid-template-columns:minmax(330px,1fr) 252px}.canvas-scroll{height:540px}}
@media(max-width:650px){main,.code-hidden main{display:flex;flex-direction:column}.workspace{order:1}aside{order:2;border-left:0;border-top:1px solid #d3dada}.code-panel{order:3}#catalog{height:128px;min-height:0}.canvas-scroll{height:440px;min-height:0}.part .pin,.part.uno .pin{min-width:0;width:14px;height:14px}.part .pin::before,.part.uno .pin::before{top:4px;left:4px}header{padding:10px}.header-actions{max-width:210px}.brand small{display:none}}

#wires .wire-visible,#wires .wire-selection,#wires .wire-preview{pointer-events:none}
#wires .wire-hit{pointer-events:stroke;cursor:pointer;outline:none}
#wires .wire-hit:focus{stroke:#428b9470}
#wires .wire-handle{pointer-events:all;cursor:move;touch-action:none;outline:none}
#wires .wire-handle:hover,#wires .wire-handle:focus{fill:#f4bc60;stroke:#305d52;stroke-width:3}
.wire-help{margin:0;padding:6px 12px;background:#fff;border-bottom:1px solid #d3dada;font-size:11px}.wire-help summary{cursor:pointer;color:#44786b}.wire-help p{max-width:850px;margin:8px 0}