:root{--bg:#f6f7f9;--surface:#fff;--border:#d7dbe2;--text:#1b1f26;--text-muted:#5b6472;--accent:#1f6feb;--state-online:#1a7f37;--state-offline:#c62828;--radius:10px;--space:8px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;color:var(--text);background:var(--bg);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:16px;line-height:1.45}*{box-sizing:border-box}body{min-height:100vh;margin:0}#root{height:100vh}.app{flex-direction:column;height:100vh;display:flex}.app__header{background:var(--surface);border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;gap:16px;padding:10px 20px;display:flex}.app__title{letter-spacing:.01em;margin:0;font-size:1.125rem}.app__actions{align-items:center;gap:8px;display:flex}.lang-switch{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);gap:2px;margin-left:8px;padding:2px;display:flex}.lang-switch__button{font:inherit;letter-spacing:.04em;color:var(--text-muted);cursor:pointer;background:0 0;border:1px solid #0000;border-radius:6px;align-items:center;gap:6px;padding:6px 10px;font-size:.8125rem;font-weight:600;transition:color .12s,border-color .12s;display:flex}.lang-switch__button:hover{color:var(--accent)}.lang-switch__button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.lang-switch__button--active{color:var(--accent);background:var(--surface);border-color:var(--accent)}.lang-switch__flag{border:1px solid var(--border);border-radius:2px;width:22px;height:15px;display:block}.lang-switch__label{line-height:1}.app__body{flex:auto;min-height:0;display:flex}.banner{background:var(--surface);border-bottom:1px solid var(--border);border-left:3px solid var(--state-offline);justify-content:space-between;align-items:center;gap:12px;padding:8px 20px;display:flex}.banner__text{color:var(--state-offline);margin:0}.zone__title{text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);margin:0 0 12px;font-size:.75rem;font-weight:600}.palette{background:var(--surface);border-right:1px solid var(--border);flex:0 0 200px;padding:16px 12px;overflow-y:auto}.palette__list{flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;display:flex}.palette__button{width:100%;font:inherit;color:var(--text);background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);cursor:grab;align-items:center;gap:10px;padding:10px 12px;transition:border-color .12s;display:flex}.palette__button:hover:not(:disabled){border-color:var(--accent)}.palette__button:disabled{opacity:.5;cursor:not-allowed}.palette__button:focus-visible,.button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.palette__note{color:var(--state-offline);margin:12px 0 0;font-size:.8125rem}.palette__hint{color:var(--text-muted);margin:12px 0 0;font-size:.8125rem}.palette--trash{background:var(--bg);outline:2px dashed var(--accent);outline-offset:-6px}.palette__hint--trash{color:var(--accent);font-weight:600}.canvas-zone{flex-direction:column;flex:auto;gap:8px;min-width:0;padding:12px;display:flex}.canvas-zone__caption{min-height:1.45em;color:var(--text-muted);margin:0;font-size:.9375rem}.canvas{border:1px solid var(--border);border-radius:var(--radius);touch-action:none;flex:auto;width:100%;height:100%;min-height:0;display:block}.canvas__background{fill:var(--surface)}.canvas__empty text{fill:var(--text-muted);text-anchor:middle;font-size:16px}.cable{stroke:var(--text-muted);stroke-width:2.5px;stroke-linecap:round;pointer-events:none}.cable__hit:focus-visible{stroke:var(--accent);stroke-width:3px;stroke-dasharray:4 3;outline:none}.cable__hit{fill:none;stroke:#0000;stroke-width:14px;stroke-linecap:round;cursor:pointer}.cable--selected{stroke:var(--accent);stroke-width:4px}.cable--preview{stroke:var(--accent);stroke-width:2.5px;stroke-dasharray:6 6}.cable__badge{cursor:pointer}.cable__badge circle{fill:var(--surface);stroke:var(--accent);stroke-width:2px;transition:fill .12s}.cable__badge text{fill:var(--accent);font-size:13px}.cable__badge:hover circle{fill:var(--accent)}.cable__badge:hover text{fill:var(--surface)}.route__stroke{fill:none;stroke:var(--accent);stroke-width:3px;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:.55}.route__stroke--return{stroke:var(--state-online)}.packet{fill:var(--accent);stroke:var(--surface);stroke-width:1.5px}.packet--return{fill:var(--state-online)}.device{cursor:grab}.canvas-zone[aria-busy=true] .device{cursor:default}.device--dragging{cursor:grabbing}.device__box{fill:var(--surface);stroke:var(--border);stroke-width:1.5px;transition:stroke .12s}.device__box--offline{stroke:var(--state-offline)}.device__selection{fill:none;stroke:var(--accent);stroke-width:2px}.device__caption{fill:var(--text-muted);pointer-events:none;font-size:12px}.port{stroke-width:1.5px;cursor:crosshair;transition:fill .12s}.port--free{fill:var(--surface);stroke:var(--text-muted)}.port--used{fill:var(--text-muted);stroke:var(--surface)}.port__label{fill:var(--text-muted);pointer-events:none;font-size:9px}.canvas-zone[aria-busy=true] .port{cursor:default}.glyph{color:var(--text)}.device__wifi{color:var(--text-muted);transition:color .12s}.device__wifi--online{color:var(--state-online)}.device__wifi--off{color:var(--text-muted)}.device__wifi--disconnected{color:var(--state-offline)}.tooltip rect{fill:var(--surface);stroke:var(--border);stroke-width:1px}.tooltip__line{font-size:11.5px}.tooltip__line--plain{fill:var(--text)}.tooltip__line--online{fill:var(--state-online)}.tooltip__line--offline{fill:var(--state-offline)}.panel{background:var(--surface);border-left:1px solid var(--border);flex-direction:column;flex:0 0 340px;gap:16px;padding:16px;display:flex;overflow-y:auto}.panel__header{flex-direction:column;gap:6px;display:flex}.panel__kind{text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);margin:0;font-size:.75rem;font-weight:600}.panel__name-static{margin:0;font-size:1.1rem}.panel__section{border-top:1px solid var(--border);flex-direction:column;gap:8px;padding-top:12px;display:flex}.panel__subtitle{text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin:0;font-size:.8125rem;font-weight:600}.panel__row,.panel__static{justify-content:space-between;gap:12px;margin:0;font-size:.9375rem;display:flex}.panel__key{color:var(--text-muted)}.panel__value{text-align:right;font-variant-numeric:tabular-nums}.panel__value--online{color:var(--state-online)}.panel__value--offline{color:var(--state-offline)}.panel__reason{color:var(--state-offline);margin:0;font-size:.9375rem}.panel__note{color:var(--text-muted);margin:0;font-size:.9375rem}.field{flex-direction:column;gap:4px;display:flex}.field__label{color:var(--text-muted);font-size:.8125rem}.field__input{font:inherit;color:var(--text);background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:8px 10px;transition:border-color .12s}.field__input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.toggle{align-items:center;gap:8px;display:flex}.toggle__input{width:18px;height:18px;accent-color:var(--accent)}.toggle__label{font-size:.9375rem}.button{font:inherit;color:var(--text);background:var(--surface);border:1px solid var(--border);cursor:pointer;border-radius:8px;padding:8px 12px;transition:border-color .12s}.button:hover:not(:disabled){border-color:var(--accent)}.button:disabled{opacity:.5;cursor:not-allowed}.button--wide{width:100%}.ports,.cables,.cable-group__list{flex-direction:column;gap:6px;margin:0;padding:0;list-style:none;display:flex}.ports__row{justify-content:space-between;gap:12px;font-size:.9375rem;display:flex}.ports__name{color:var(--text)}.ports__state{color:var(--text-muted)}.cables__row{justify-content:space-between;align-items:center;gap:8px;display:flex}.cables__text{font-size:.9375rem}.cable-group{flex-direction:column;gap:6px;display:flex}.cable-group__title{color:var(--text-muted);margin:0;font-size:.875rem}.concept{flex-direction:column;gap:2px;display:flex}.concept__term{margin:0;font-size:.9375rem;font-weight:600}.concept__explanation{color:var(--text-muted);margin:0;font-size:.9375rem}.concept__analogy{border-left:2px solid var(--border);margin:0;padding-left:8px;font-size:.9375rem}.app__panel{display:contents}.panel__note{color:var(--text-muted);margin:0;padding:8px 16px 0;font-size:.8125rem}