:root{font-family:Inter,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;color:#25293d;background:#f5f6fb;font-synthesis:none;font-size:16px;--primary:#6254e8;--primary-light:#eeecfd;--line:#e9ebf2;--muted:#8a8fa4;--ink:#32374d}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:default;opacity:.35}button,a,input{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,input:focus-visible,svg:focus-visible{outline:3px solid #a59af7;outline-offset:3px}button{color:inherit}svg{display:block}button svg,.header svg,.panel-heading svg,.document-title>svg,.snap-indicator svg,.canvas-hint svg,.library-note>svg{width:18px;height:18px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.header{height:88px;display:flex;align-items:center;padding:0 28px;gap:26px;background:#fff;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;flex-shrink:0}.brand-mark{height:42px;width:42px;border-radius:12px;background:var(--primary);display:grid;place-items:center;box-shadow:0 3px 8px #6254e81a}.brand-mark svg{width:29px;height:29px;stroke:white;stroke-width:2.1}.brand strong{font-size:21px;letter-spacing:.05em;display:block}.brand small{display:block;font-size:10px;letter-spacing:.15em;color:#9699ae;margin-top:4px}.header-divider{width:1px;height:28px;background:var(--line)}.header-description{font-size:14px;color:#979bae;letter-spacing:.025em}.header-actions{display:flex;gap:14px;align-items:center;margin-left:auto}.button{display:inline-flex;justify-content:center;align-items:center;gap:8px;border:1px solid transparent;min-height:42px;padding:0 16px;border-radius:8px;font-size:14px;font-weight:500;transition:background .15s,transform .15s}.button:active{transform:translateY(1px)}.primary{background:var(--primary);color:white;box-shadow:0 3px 6px #6254e81a}.primary:hover{background:#5345d7}.quiet{background:transparent;color:#757a91}.quiet:hover{background:#f5f5fb}.outline{background:#fff;border-color:#e2e5ef;color:#5f647c}.outline:hover{background:#f9f9ff}.workspace{display:grid;grid-template-columns:228px minmax(360px,1fr) 240px;height:calc(100dvh - 88px);min-height:650px}.library,.inspector{background:white;padding:24px 20px;display:flex;flex-direction:column;min-width:0;overflow:auto}.library{border-right:1px solid var(--line)}.inspector{border-left:1px solid var(--line)}.panel-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.panel-heading h1,.panel-heading h2{font-size:16px;margin:0;font-weight:600}.panel-heading>svg{color:#a0a4b7}.count-pill{font-size:12px;background:#f2f3f8;color:#9195a9;padding:2px 7px;border-radius:5px}.muted{color:var(--muted);font-size:13px}.library-intro{margin:0 0 26px}.palette-heading{font-size:12px;color:#a0a5b6;letter-spacing:.06em;margin:0 0 12px;font-weight:500}.palette-group{margin-bottom:23px}.palette-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.component-card{background:#fff;border:1px solid #e8eaf2;border-radius:8px;display:flex;flex-direction:column;align-items:center;padding:11px 4px 10px;gap:5px;min-width:0;transition:background .15s,border-color .15s,box-shadow .15s;color:#5c6077}.component-card:hover{background:#f8f7ff;border-color:#b7aff9;box-shadow:0 2px 7px #6254e809;color:var(--primary)}.component-card:active{background:#eeebff}.component-card svg{width:65px;height:34px;color:#464b63;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}.component-card span{font-size:14px}.library-note{display:flex;align-items:flex-start;gap:8px;color:#9693b1;background:#f7f6fd;border-radius:8px;padding:12px 10px;margin-top:auto}.library-note>svg{width:15px;height:15px;color:#8175d8;margin-top:2px}.library-note p{margin:0;font-size:12px;line-height:1.9;color:#706989}.library-note p span{color:#a09aaf;font-size:11px}.shortcut-block{margin-top:22px;padding-top:18px;border-top:1px solid #f0f1f6;display:grid;gap:10px}.shortcut-block>div{display:flex;justify-content:space-between;font-size:12px;color:#9a9eaf}kbd{font-family:inherit;font-size:11px;background:#f7f8fb;border:1px solid #e8eaf1;color:#9298ac;border-radius:4px;min-width:20px;padding:1px 5px;display:inline-flex;justify-content:center;line-height:1.5}.canvas-panel{display:flex;flex-direction:column;padding:0 22px;min-width:0}.document-bar{height:77px;display:flex;align-items:center;justify-content:space-between;gap:8px;flex-shrink:0}.document-title{display:flex;align-items:center;gap:9px;min-width:0}.document-title>svg{color:#858aa2;width:19px}.document-title input{font-weight:600;font-size:16px;background:transparent;border:1px solid transparent;max-width:230px;width:180px;color:#32374d;padding:6px 4px;border-radius:5px}.document-title input:hover{border-color:#e0dff1}.document-tag{color:#9696ae;font-size:11px;border:1px solid #e5e4ee;padding:3px 7px;border-radius:4px;white-space:nowrap}.icon-button{height:34px;width:34px;border:0;display:inline-flex;align-items:center;justify-content:center;background:transparent;border-radius:6px;color:#83879d;flex-shrink:0}.icon-button:hover{background:#ececf7;color:var(--primary)}.toolbar{height:56px;border:1px solid var(--line);border-radius:11px 11px 0 0;background:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 12px;gap:10px;flex-shrink:0}.tools{display:flex;align-items:center;gap:4px}.tool{display:flex;align-items:center;gap:7px;font-size:14px;border:0;background:transparent;border-radius:6px;color:#747a91;padding:8px 10px;white-space:nowrap}.tool svg{width:17px;height:17px}.tool.active{background:var(--primary-light);color:var(--primary);font-weight:500}.tool:hover{background:#f2f1fc}.tool-divider{width:1px;height:22px;background:#e8eaf2;margin:0 6px}.canvas-options{display:flex;align-items:center;gap:18px;color:#9599aa;font-size:12px;white-space:nowrap}.canvas-options label,.export-grid{display:flex;align-items:center;gap:5px;cursor:pointer}input[type=checkbox],input[type=radio]{accent-color:var(--primary)}.canvas-options input{width:14px;height:14px}.snap-indicator{display:flex;gap:5px;align-items:center}.snap-indicator svg{width:14px;height:14px}.canvas-wrap{flex:1;min-height:380px;position:relative;border:1px solid var(--line);border-top:0;border-radius:0 0 11px 11px;background:#fafbfe;overflow:hidden}#circuit-canvas{width:100%;height:100%;touch-action:none;user-select:none;-webkit-user-select:none;position:absolute;inset:0}#circuit-canvas.mode-wire{cursor:crosshair}#circuit-canvas.mode-erase{cursor:crosshair}#circuit-canvas.panning{cursor:grabbing}.canvas-hint{position:absolute;top:18px;left:50%;transform:translateX(-50%);border-radius:7px;border:1px solid #eeeff7;background:#fffffff2;display:flex;align-items:center;gap:7px;padding:9px 13px;color:#a0a4b5;font-size:12px;white-space:nowrap;pointer-events:none;box-shadow:0 2px 4px #3a405005}.canvas-hint svg{height:13px;width:13px;color:#a7a2c9}.zoom-control{position:absolute;bottom:18px;right:18px;background:white;border:1px solid #e5e7f0;border-radius:7px;display:flex;align-items:center;box-shadow:0 2px 7px #20204006;padding:2px}.zoom-control button{border:0;background:transparent;border-radius:4px;font-size:12px;color:#757a91;height:31px;min-width:31px;display:flex;align-items:center;justify-content:center}.zoom-control button:hover{background:#f2f0ff;color:var(--primary)}.zoom-control button svg{width:15px;height:15px}#zoom-label{min-width:49px}.zoom-control>span{width:1px;height:19px;background:#eceef3;margin:0 4px}.canvas-footer{height:46px;display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:11px;color:#9298ad;flex-shrink:0}.canvas-footer>span{display:flex;gap:6px;align-items:center}.footer-dot{width:5px;height:5px;background:#8980dc;border-radius:50%}.footer-tip{color:#a9adbf}.component{cursor:grab}.component:active{cursor:grabbing}.component-symbol{fill:none;stroke:#343a51;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}.component-label{font-family:inherit;font-size:15px;font-weight:500;fill:#565d78;stroke:none}.component-value{font-size:12px;font-weight:400;fill:#9197ae}.component-hit{fill:transparent;stroke:none}.selection-box{fill:#7164ec09;stroke:#9a8cf1;stroke-dasharray:4 3;stroke-width:1;rx:7}.port{fill:#fff;stroke:#a19bbd;stroke-width:1.8;cursor:crosshair}.port:hover,.port.connecting{fill:var(--primary);stroke:#fff;stroke-width:2}.port-ring{fill:transparent;stroke:none;cursor:crosshair}.wire-path{fill:none;stroke:#737a93;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}.wire-hit{fill:none;stroke:transparent;stroke-width:18;cursor:pointer}.wire.selected .wire-path{stroke:var(--primary);stroke-width:3}.wire:hover .wire-path{stroke:#7b6eeb}.wire.selected .wire-node{fill:#fff;stroke:var(--primary);stroke-width:1.5}.draft-wire{fill:none;stroke:var(--primary);stroke-width:2;stroke-dasharray:6 4;pointer-events:none}.inspector .panel-heading{margin-bottom:26px}.selection-title{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:600;margin-bottom:20px}.selection-title>svg{width:34px;height:34px;background:#f4f2fe;border-radius:7px;padding:4px;fill:none;stroke:var(--primary);stroke-width:2}.inspector-field{display:flex;flex-direction:column;gap:9px;margin-bottom:18px}.inspector-field>span,.field-label{font-size:14px;color:#959aae}.inspector-field input,.inspector-field select{width:100%;border:1px solid #e7e9f2;background:#fcfcfe;border-radius:6px;padding:10px;font-size:14px;color:#5c617a;outline-offset:1px}.direction-control{display:flex;gap:6px}.direction-control button{border:1px solid #e8eaf2;flex:1;min-height:35px;background:white;border-radius:5px;font-size:14px;color:#969bb0}.direction-control button.active{color:var(--primary);background:#f2efff;border-color:#c4bbf8}.inspector-divider{height:1px;background:var(--line);margin:24px 0}.inspector-buttons{display:flex;gap:8px}.inspector-buttons .button{flex:1;min-height:37px;padding:0 9px;font-size:14px}.danger-button{color:#ce6e7e;background:#fff8f8;border:1px solid #f3dfe3}.danger-button:hover{background:#ffedef}.overview-heading{font-size:14px;font-weight:600;margin:0 0 13px}.overview-copy{font-size:14px;color:#969bb0;line-height:1.9;margin:0 0 18px}.overview-stats{display:flex;gap:10px;margin-bottom:23px}.overview-stats>div{flex:1;background:#f8f8fc;border:1px solid #eeeff6;border-radius:7px;padding:13px 8px}.overview-stats strong{font-size:23px;font-weight:500;display:block;color:#51556f;margin-bottom:5px}.overview-stats span{font-size:11px;color:#9a9db1}.steps{list-style:none;padding:0;margin:0;display:grid;gap:17px}.steps li{display:flex;align-items:flex-start;gap:10px;color:#81879e;font-size:14px;line-height:1.7}.steps li>span{font-size:10px;color:#9e97c8;border:1px solid #e6e2f6;border-radius:50%;width:21px;height:21px;display:grid;place-items:center;flex-shrink:0}.learning-note{margin-top:auto;padding-top:34px}.small-eyebrow{font-size:11px;letter-spacing:.04em;color:#a0a1b5;font-weight:500}.tip-diagram{border:1px solid #eeeef6;background:#fafaff;border-radius:8px;margin:11px 0 15px;display:flex;justify-content:center;padding:11px}.tip-diagram svg{width:148px;height:40px;stroke:#b0a8d6;stroke-width:1.8;fill:none}.tip-diagram circle{fill:#fff;stroke:#a394d5}.learning-note strong{font-size:14px;color:#70758f;font-weight:500}.learning-note p{font-size:14px;line-height:1.9;color:#a1a4b6;margin:9px 0 0}.sample-button{margin-top:21px;min-height:38px;font-size:14px;border-color:#eae9f3}.sample-button svg{width:15px}.toast{position:fixed;bottom:28px;left:50%;transform:translate(-50%,12px);padding:12px 20px;background:#343449;color:white;box-shadow:0 4px 20px #24243d20;font-size:14px;border-radius:8px;opacity:0;pointer-events:none;transition:opacity .15s,transform .15s;z-index:20;max-width:calc(100vw - 32px)}.toast.visible{opacity:1;transform:translate(-50%,0)}.empty-canvas{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}.empty-canvas[hidden]{display:none}.empty-canvas>svg{height:60px;width:60px;padding:14px;border:1px solid #e2def7;border-radius:16px;fill:none;stroke:#9a90d8;stroke-width:1.5;background:#f3f0ff;margin-bottom:14px}.empty-canvas h2{font-size:16px;color:#8e88ab;font-weight:500;margin:0 0 10px}.empty-canvas p{font-size:13px;color:#aaa7bc;margin:0}.modal{border:1px solid #e3e2ef;padding:28px;border-radius:16px;background:#fff;color:#36384d;width:min(480px,calc(100vw - 32px));box-shadow:0 24px 90px #24204033;max-height:90dvh;overflow:auto}.modal::backdrop{background:#2422375c;backdrop-filter:blur(4px)}.modal-header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:27px}.modal h2{font-size:22px;margin:6px 0 0;font-weight:600}.modal-header .icon-button{margin:-4px -7px 0 0}.help-step{display:flex;gap:17px;margin-bottom:24px}.help-step>span{font-size:16px;color:#b3aaea;line-height:1.6;font-weight:500}.help-step h3{font-size:15px;margin:0 0 7px;font-weight:600}.help-step p{font-size:14px;color:#8a8fa4;line-height:1.85;margin:0}.help-keys{display:flex;flex-wrap:wrap;gap:14px;background:#f8f7fc;border-radius:8px;padding:12px;font-size:12px;color:#9591a5}.help-keys>span{display:flex;gap:5px;align-items:center}.help-foot{font-size:12px;line-height:1.8;color:#a2a4b4;margin:18px 0}.full{width:100%}.export-preview{height:180px;border:1px solid #e9e9f2;border-radius:8px;overflow:hidden;background:#fafaff;padding:15px;display:flex;align-items:center;justify-content:center;margin-bottom:20px}.export-preview svg{max-width:100%;max-height:100%;height:100%;width:100%}.format-options{display:grid;gap:10px;margin-bottom:16px}.format-options label{padding:13px;border:1px solid #e6e6f0;border-radius:8px;display:flex;gap:10px;align-items:center;cursor:pointer}.format-options label:has(input:checked){border-color:#b7acf6;background:#f8f6ff}.format-options input{width:16px;height:16px}.format-options strong{display:block;font-size:14px;font-weight:500}.format-options small{display:block;font-size:12px;color:#9595aa;margin-top:5px}.format-badge{margin-left:auto;font-size:11px;color:#9d93c6;background:#ede8fa;border-radius:4px;padding:4px 6px}.export-grid{font-size:13px;color:#9693a7;margin-bottom:21px;gap:7px}.confirm-modal p{font-size:14px;color:#8c8ea3;line-height:1.8}.confirm-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:24px}@media(min-width:1500px){.workspace{grid-template-columns:250px minmax(400px,1fr) 268px}.library,.inspector{padding:27px 24px}.canvas-panel{padding:0 28px}.component-card{padding:15px 5px}.component-card span{font-size:14px}.canvas-options{font-size:13px}.tool{font-size:14px}}@media(max-width:1180px){.workspace{grid-template-columns:200px minmax(300px,1fr) 210px}.header{padding:0 20px}.library,.inspector{padding:23px 16px}.canvas-panel{padding:0 14px}.snap-indicator,.footer-tip{display:none}.tool{padding:8px}.canvas-options{gap:7px}.document-tag{display:none}.header-description{display:none}.header-divider{display:none}}@media(max-width:960px){.workspace{grid-template-columns:184px minmax(300px,1fr);min-height:580px}.inspector{grid-column:1 / -1;border-top:1px solid var(--line);border-left:0;display:block;max-height:none;overflow:visible}.workspace{height:auto;grid-template-rows:calc(100dvh - 88px) auto}.inspector .panel-heading{margin-bottom:14px}.inspector-content{max-width:600px}.learning-note{display:none}.sample-button{margin-top:15px}.overview-stats{max-width:260px}.steps{grid-template-columns:repeat(3,1fr);gap:20px}.inspector-field{max-width:500px}.direction-control,.inspector-buttons{max-width:500px}.inspector-divider{max-width:500px}.library-note{display:none}.shortcut-block{margin-top:auto}}@media(max-width:620px){.header{height:72px;padding:0 14px;gap:10px}.brand-mark{width:35px;height:35px;border-radius:9px}.brand strong{font-size:18px}.brand small{font-size:8px}.header-actions{gap:4px}.header-actions .button{padding:0 10px;min-height:37px;font-size:12px}.header-actions .quiet span{display:none}.header-actions .quiet svg{width:19px;height:19px}.workspace{grid-template-columns:108px minmax(0,1fr);grid-template-rows:calc(100dvh - 72px) auto}.library{padding:18px 9px}.panel-heading h1{font-size:14px}.count-pill{font-size:10px}.library-intro{font-size:10px;line-height:1.6;margin-bottom:15px}.palette-grid{grid-template-columns:1fr;gap:7px}.component-card{padding:5px;flex-direction:row;gap:3px}.component-card svg{width:34px;height:27px}.component-card span{font-size:14px}.palette-heading{font-size:10px}.palette-group{margin-bottom:15px}.shortcut-block{display:none}.canvas-panel{padding:0 9px}.document-bar{height:61px}.document-title{gap:4px}.document-title input{width:145px;font-size:14px;min-width:0}.document-title>svg{display:none}.toolbar{height:49px;padding:0 5px;gap:0}.tool{padding:7px;gap:0}.tool span{display:none}.tool-divider{margin:0 3px}.tools{gap:0}.tools .icon-button{width:30px}.canvas-options{font-size:11px}.canvas-options input{width:12px;height:12px}.canvas-hint{font-size:10px;padding:7px 8px;top:13px;max-width:95%}.canvas-hint svg{display:none}.canvas-footer{font-size:10px;height:39px}.zoom-control{right:10px;bottom:10px}.zoom-control button{min-width:25px;height:28px;font-size:11px}#zoom-label{min-width:42px}.inspector{padding:21px}.steps{grid-template-columns:1fr;gap:13px}.modal{padding:23px}.modal h2{font-size:20px}}@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

@media(max-width:430px){.canvas-options{display:none}.header-actions .primary{font-size:12px;padding:0 9px}.document-title input{width:128px}.canvas-footer{gap:4px}.footer-tip{display:none}.canvas-hint{font-size:10px}.component-card{min-height:35px}.canvas-wrap{min-height:350px}}

.selection-title{align-items:flex-start;flex-wrap:wrap;line-height:1.65}.selection-title>svg{flex-shrink:0}.selection-name{flex:1;min-width:100px}.selection-title .count-pill{flex-shrink:0;align-self:center}.source-note{border:1px solid #e9e5f9;background:#faf8ff;border-radius:8px;padding:12px;margin-top:4px}.source-note p{margin:0;font-size:13px;line-height:1.9;color:#7f779c}.source-code{display:inline-block;margin-bottom:7px;padding:2px 7px;border-radius:4px;background:#eee9fb;color:#8071bd;font-size:12px;letter-spacing:.03em}.source-note .source-control-tip{border-top:1px solid #eeeaf8;margin-top:9px;padding-top:9px;color:#9990b0}.component-card.source-card>span{line-height:1.6}
@media(max-width:620px){.component-card.source-card{flex-direction:column;gap:2px;padding:7px 3px}.component-card.source-card svg{width:60px;height:30px}.component-card.source-card>span{font-size:14px}}

.apply-properties{min-height:34px;margin:-3px 0 20px;font-size:13px}