:root{--bg: #06090F;--surface: #0B1118;--surface-2: #131A24;--surface-3: #1A2230;--border: #1F2937;--border-grid: #161D28;--border-bright: #2B3648;--ink: #E6EDF6;--ink-mute: #8B95A7;--ink-dim: #5A6477;--accent-paper: #E7E5DF;--sdi: #3B82F6;--signal: #FF3366;--signal-hover: #ff527e;--audio: #34D399;--madi: #F5C842;--multiview: #EC4899;--surface2: var(--surface-2);--text: var(--ink);--text-dim: var(--ink-mute);--text-muted: var(--ink-dim);--accent: var(--sdi);--accent-soft: rgba(59,130,246,.16);--accent-ring: rgba(59,130,246,.3);--signal-out: var(--signal);--accent2: var(--audio);--cam-line: var(--sdi);--danger: #FF4655;--green: var(--audio);--grid-line: rgba(255,255,255,.035);--font-mono: "JetBrains Mono", "Fira Code", monospace;--font-ui: "Geist", "Inter", system-ui, sans-serif;--font-display: "Space Grotesk", "Geist", system-ui, sans-serif}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:var(--font-ui);-webkit-font-smoothing:antialiased}.header-logo{display:block;flex-shrink:0}.app-shell{display:flex;flex-direction:column;height:100vh;overflow:hidden}.app-body{display:flex;flex:1;overflow:hidden}.header{background:linear-gradient(135deg,#0d0f16,#12151c);border-bottom:1px solid var(--border);padding:10px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;z-index:100;flex-shrink:0}.header-left{display:flex;align-items:center;gap:14px}.header-title{font-size:14px;font-weight:700;color:var(--text);font-family:var(--font-display);letter-spacing:.2px}.header-title-input{font-size:14px;font-weight:700;color:var(--text);background:transparent;border:1px solid transparent;border-radius:5px;padding:2px 6px;margin:-2px -6px;font-family:var(--font-display);letter-spacing:.2px;outline:none;max-width:320px;width:100%}.header-title-input:hover{border-color:var(--border)}.header-title-input:focus{border-color:var(--accent);background:var(--surface2)}.header-sub{font-size:10px;color:var(--text-dim);margin-top:1px}.tab-group{display:flex;gap:4px}.tab-btn{display:inline-flex;align-items:center;gap:5px;background:var(--surface2);border:1px solid var(--border);color:var(--text-dim);padding:5px 11px;border-radius:6px;font-size:11px;cursor:pointer;font-family:var(--font-display);font-weight:600;letter-spacing:.8px;transition:all .15s}.tab-btn:hover{border-color:var(--border-bright);color:var(--text)}.tab-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}.header-actions{display:flex;gap:6px;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--surface2);border:1px solid var(--border-bright);color:var(--text);padding:6px 11px;border-radius:6px;font-size:11px;line-height:1;cursor:pointer;transition:background .15s,border-color .15s,color .15s;font-family:var(--font-ui);font-weight:500;white-space:nowrap}.btn svg,.tab-btn svg,.of-menu>summary svg{display:block;flex-shrink:0}.btn:hover{background:var(--border);border-color:#5a6585}.btn:disabled{opacity:.4;cursor:not-allowed}.btn.active{background:var(--accent);border-color:var(--accent);color:#fff}.btn-edit{border-color:var(--sdi);color:var(--sdi)}.btn-edit:hover{background:#3b82f624}.btn-edit.active{background:var(--sdi);border-color:var(--sdi);color:#06090f}.btn-draw{border-color:var(--madi);color:var(--madi)}.btn-draw:hover{background:#f5c84224}.btn-draw.active{background:var(--madi);border-color:var(--madi);color:#06090f}.btn-clear{border-color:var(--danger);color:var(--danger)}.btn-clear:hover{background:#ff46551f}.btn-share{background:var(--signal);border-color:var(--signal);color:#06090f;font-weight:600}.btn-share:hover{background:var(--signal-hover);border-color:var(--signal-hover)}.sidebar{width:240px;min-width:240px;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;z-index:10}.sidebar-header{padding:10px 12px 6px;border-bottom:1px solid var(--border)}.sidebar-stats{font-size:10px;color:var(--text-muted);display:flex;gap:4px}.sep{color:var(--border-bright)}.sidebar-search-wrap{position:relative;padding:8px 10px 4px}.search-box{width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:6px;padding:6px 28px 6px 10px;color:var(--text);font-size:11px;outline:none;font-family:var(--font-ui)}.search-box:focus{border-color:var(--border-bright)}.search-box::placeholder{color:var(--text-muted)}.search-clear{position:absolute;right:16px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:11px;padding:2px;margin-top:2px}.sidebar-scroll{flex:1;overflow-y:auto;padding:6px 8px}.sidebar-scroll::-webkit-scrollbar{width:3px}.sidebar-scroll::-webkit-scrollbar-track{background:transparent}.sidebar-scroll::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}.sidebar-group{margin-bottom:4px}.section-label{font-size:9px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-muted);padding:8px 6px 4px}.device-chip{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:6px;cursor:pointer;transition:all .12s;margin-bottom:1px;border:1px solid transparent}.device-chip:hover{background:var(--surface2);border-color:var(--border)}.device-chip.selected{background:var(--accent-soft);border-color:var(--accent)}.device-chip.dragging{opacity:.4}.device-chip.drag-over{border-top:2px solid var(--accent)}.chip-icon{width:26px;height:26px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0}.chip-info{flex:1;min-width:0}.chip-code{font-size:11px;font-weight:600;font-family:var(--font-mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chip-name{font-size:9px;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chip-ports{display:flex;gap:3px;flex-shrink:0}.port-badge{font-size:8px;padding:1px 4px;border-radius:3px;font-weight:600}.port-in{background:#34d39926;color:var(--audio)}.port-out{background:#ff336626;color:var(--signal)}.sidebar-empty{text-align:center;color:var(--text-muted);font-size:11px;padding:20px 0}.sidebar-legend{padding:10px 12px;border-top:1px solid var(--border)}.legend-title{font-size:9px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-muted);margin-bottom:7px}.legend-item{display:flex;align-items:center;gap:7px;margin-bottom:4px;font-size:10px;color:var(--text-dim)}.legend-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}.canvas-area{flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative}.canvas-toolbar{background:var(--surface);border-bottom:1px solid var(--border);padding:6px 14px;display:flex;align-items:center;gap:8px;flex-shrink:0;flex-wrap:wrap}.toolbar-sep{width:1px;height:20px;background:var(--border);flex-shrink:0}.toolbar-zoom-badge{margin-left:auto;font-size:10px;color:var(--text-dim);background:var(--surface2);padding:3px 8px;border-radius:4px;border:1px solid var(--border);font-family:var(--font-mono)}.card-size-control{display:flex;align-items:center;gap:4px;flex-shrink:0}.card-size-control .cs-icon{font-size:12px;color:var(--text-dim);margin-right:2px}.cs-preset{background:var(--surface2);border:1px solid var(--border-bright);color:var(--text);width:22px;height:22px;border-radius:5px;font-size:10px;font-weight:600;cursor:pointer;transition:all .15s;font-family:var(--font-ui)}.cs-preset:hover{background:var(--border);border-color:#5a6585}.cs-preset.active{background:var(--accent);border-color:var(--accent);color:#fff}.cs-slider{width:84px;accent-color:var(--accent);cursor:pointer}.cs-pct{font-size:10px;color:var(--text-dim);font-family:var(--font-mono);min-width:30px;text-align:right}.canvas-wrap{flex:1;position:relative;overflow:hidden;background:var(--bg);background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);background-size:40px 40px;touch-action:none;user-select:none;-webkit-user-select:none}.canvas-wrap:active{cursor:grabbing}.device-card{background:var(--surface);border:1px solid var(--border);border-radius:11px;min-width:230px;max-width:280px;position:relative;box-shadow:0 8px 26px #0000006b;transition:border-color .15s,box-shadow .15s;transform:scale(var(--card-scale, 1));transform-origin:0 0}.device-card[data-type=switcher],.device-card[data-type=router],.device-card[data-type=ampli],.device-card[data-type=iem_dist]{border-color:var(--border-bright);box-shadow:0 14px 36px #0009}.device-card:hover{border-color:var(--border-bright)}.device-card.highlighted{border-color:var(--accent);box-shadow:0 0 0 1px var(--bg),0 0 0 3px var(--accent-ring)}.device-card.edit-mode-card{border-style:dashed}.device-card.wide{min-width:420px;max-width:560px}.device-card.wide .port-cols{display:flex;gap:14px}.device-card.wide .port-col{flex:1;min-width:0}.port-row.side-r{flex-direction:row-reverse}.port-row.side-r .port-content{text-align:right}.card-del-btn{position:absolute;top:-8px;right:-8px;width:18px;height:18px;background:var(--danger);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;cursor:pointer;z-index:50;color:#fff;border:2px solid var(--bg);transition:transform .12s}.card-del-btn:hover{transform:scale(1.15)}.card-header{padding:10px 12px 8px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:9px}.card-icon{width:32px;height:32px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}.card-title{flex:1;min-width:0}.card-code{font-size:12px;font-weight:700;font-family:var(--font-mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card-name{font-size:9px;color:var(--text-dim);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card-edit-actions{display:none;gap:2px}.edit-mode-card .card-edit-actions{display:flex}.card-body{padding:8px 12px 10px}.card-section{margin-bottom:7px;padding-bottom:7px;border-bottom:1px solid var(--border)}.cards-list{display:flex;flex-wrap:wrap;gap:3px;margin-top:3px}.card-tag{font-size:8px;padding:1px 5px;border-radius:3px;background:#34a8531f;color:var(--green);border:1px solid rgba(52,168,83,.2);font-family:var(--font-mono)}.port-section{margin-bottom:6px}.port-section:last-child{margin-bottom:0}.port-section-title{font-size:8px;font-weight:700;font-family:var(--font-display);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:4px}.pt-in{color:var(--accent2)}.pt-out{color:var(--signal-out)}.port-kind-group{border-left:2px solid var(--border-bright);padding-left:5px;margin-bottom:5px}.port-kind-group:last-child{margin-bottom:0}.port-kind-title{font-size:7px;font-weight:700;font-family:var(--font-mono);letter-spacing:1px;text-transform:uppercase;opacity:.85;margin-bottom:2px}.port-row{display:flex;align-items:center;padding:3px 4px;cursor:crosshair;border-radius:4px;position:relative;transition:background .1s;gap:5px}.port-row:hover{background:var(--surface2)}.port-row{--kind: var(--kind-base, var(--accent2))}.port-row.out-row{--kind: color-mix(in srgb, var(--kind-base) 70%, #fff)}:root[data-theme=light] .port-row.out-row{--kind: color-mix(in srgb, var(--kind-base) 58%, #000)}.port-dot{width:9px;height:9px;border-radius:50%;border:2px solid var(--kind, var(--border-bright));background:var(--surface);flex-shrink:0;transition:all .12s;cursor:crosshair}.port-dot:hover{border-color:var(--kind, var(--accent2));background:var(--kind, var(--accent2));transform:scale(1.3)}.port-dot.connected{border-color:var(--kind, var(--accent2));background:var(--kind, var(--accent2));box-shadow:0 0 6px color-mix(in srgb,var(--kind, var(--accent2)) 70%,transparent)}.port-content{flex:1;min-width:0}.port-signal-name{font-size:10px;font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.port-dest-label{font-size:8px;color:var(--text-muted);font-family:var(--font-mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.port-connector{font-size:8px;padding:1px 4px;border-radius:3px;font-family:var(--font-mono);flex-shrink:0}.in-conn,.out-conn{color:var(--kind, var(--accent2));background:color-mix(in srgb,var(--kind, var(--accent2)) 12%,transparent)}.port-edit-actions{display:flex;gap:2px;flex-shrink:0}.mini-btn{width:17px;height:17px;display:inline-flex;align-items:center;justify-content:center;border-radius:3px;font-size:9px;cursor:pointer;border:1px solid var(--border-bright);background:var(--surface2);color:var(--text-dim);transition:all .1s}.mini-btn:hover{color:#fff;border-color:#6b8cff}.mini-btn.del:hover{color:var(--danger);border-color:var(--danger)}.add-port-btn{width:100%;margin-top:3px;padding:3px 0;border:1px dashed var(--border-bright);border-radius:4px;background:transparent;color:var(--text-muted);font-size:9px;cursor:pointer;font-family:var(--font-ui);transition:all .1s}.add-port-btn.add-in:hover{color:var(--accent2);border-color:var(--accent2)}.add-port-btn.add-out:hover{color:var(--signal-out);border-color:var(--signal-out)}.view-only-badge{display:inline-flex;align-items:center;gap:4px;padding:6px 12px;border-radius:6px;font-size:11px;font-weight:700;letter-spacing:1px;background:#00d4aa24;color:var(--accent2);border:1px solid rgba(0,212,170,.4)}.cloud-modal{width:460px}.cloud-sep{height:1px;background:var(--border);margin:16px 0 4px}.cloud-empty{font-size:12px;color:var(--text-muted);padding:12px 0;text-align:center}.cloud-list{display:flex;flex-direction:column;gap:5px;margin-top:6px;max-height:280px;overflow-y:auto}.cloud-row{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--border);border-radius:7px;background:var(--surface2)}.cloud-row.current{border-color:var(--accent2)}.cloud-row-info{flex:1;min-width:0}.cloud-row-name{font-size:12px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:6px}.cloud-row-time{font-size:10px;color:var(--text-muted);margin-top:1px}.cloud-tag{font-size:8px;font-weight:700;letter-spacing:.5px;padding:1px 5px;border-radius:3px;background:#00d4aa2e;color:var(--accent2)}.cloud-row-actions{display:flex;gap:4px;flex-shrink:0}.cloud-del:hover{color:var(--danger);border-color:var(--danger)}.sidebar-panel-tabs{display:flex;gap:4px;padding:8px 10px;border-bottom:1px solid var(--border)}.sidebar-panel-tabs .spt{flex:1;padding:6px 8px;font-size:11px;font-weight:600;background:var(--surface2);border:1px solid var(--border);border-radius:6px;color:var(--text-dim);cursor:pointer;transition:all .12s;font-family:var(--font-ui)}.sidebar-panel-tabs .spt:hover{color:var(--text);border-color:var(--border-bright)}.sidebar-panel-tabs .spt.active{background:var(--accent);border-color:var(--accent);color:#fff}.lib-actions{display:flex;gap:6px;padding:6px 10px}.btn-sm{padding:5px 9px;font-size:11px}.lib-actions .btn-sm{flex:1}.lib-chip{position:relative;padding-right:24px}.lib-del{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:18px;height:18px;border-radius:4px;border:1px solid var(--border-bright);background:var(--surface2);color:var(--text-muted);font-size:10px;cursor:pointer;opacity:0;transition:opacity .12s;display:flex;align-items:center;justify-content:center}.lib-chip:hover .lib-del{opacity:1}.lib-del:hover{color:var(--danger);border-color:var(--danger)}.lib-empty{text-align:center;padding:24px 16px;color:var(--text-dim);font-size:12px}.lib-empty .btn-sm{margin-top:8px}.lib-error{margin:8px 10px;padding:8px 10px;background:#ff46551a;border:1px solid rgba(255,70,85,.3);border-radius:6px;color:#ff8c8c;font-size:11px}.lib-setup{padding:16px;font-size:12px;color:var(--text-dim);line-height:1.6}.lib-setup-title{font-size:13px;font-weight:700;color:var(--text);margin-bottom:8px}.lib-setup code{background:var(--surface2);padding:1px 5px;border-radius:3px;color:var(--accent2);font-family:var(--font-mono)}.canvas-label{z-index:6;color:#8fa3c8;font-family:var(--font-display);font-weight:700;letter-spacing:4px;text-transform:uppercase;padding:5px 12px 5px 16px;border:1px solid var(--border);border-radius:6px;background:#0e11166b;white-space:nowrap;-webkit-user-select:none;user-select:none;cursor:grab}.canvas-label:before{content:"";position:absolute;left:6px;top:50%;transform:translateY(-50%);width:3px;height:58%;border-radius:2px;background:var(--accent)}.canvas-label:hover{border-color:var(--border-bright);background:#141a2899}.canvas-label .lbl-actions{display:none;margin-left:10px}.canvas-label:hover .lbl-actions{display:inline-flex;gap:4px}.canvas-label .lbl-btn{cursor:pointer;padding:1px 6px;border:1px solid #3d4a66;border-radius:4px;background:#141a28;color:#8fa3c8;font-weight:400;letter-spacing:0;font-size:11px}.canvas-label .lbl-btn:hover{color:#fff;border-color:#6b8cff}.port-dot.drop-ok{border-color:#3ddc84!important;background:#3ddc84!important;box-shadow:0 0 0 4px #3ddc8459,0 0 12px #3ddc84e6!important;transform:scale(1.35)}.zoom-controls{position:absolute;right:14px;bottom:14px;z-index:200;display:flex;flex-direction:column;gap:3px;background:var(--surface2);border:1px solid var(--border-bright);border-radius:10px;padding:5px;box-shadow:0 8px 24px #0006}.canvas-legend{position:absolute;top:12px;left:12px;z-index:40;background:#0e1116c7;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid var(--border);border-radius:9px;padding:8px 11px 9px;box-shadow:0 6px 18px #0000006b;pointer-events:none}.legend-title{font-family:var(--font-display);font-size:8px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--text-dim);margin-bottom:7px}.legend-row{display:flex;align-items:center;gap:9px;padding:2px 0}.legend-swatch{width:20px;height:3px;border-radius:2px;flex-shrink:0}.legend-label{font-family:var(--font-ui);font-size:10px;letter-spacing:.2px;color:var(--text)}.btn:focus-visible,.tab-btn:focus-visible,.cs-preset:focus-visible,.mini-btn:focus-visible,.header-title-input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}@media (max-width: 820px){.canvas-legend{display:none}}.zoom-controls button{width:32px;height:28px;border:none;border-radius:5px;background:transparent;color:var(--text);font-size:15px;cursor:pointer;font-family:var(--font-ui);transition:background .1s}.zoom-controls button:hover{background:var(--border)}.zoom-badge{font-size:9px;text-align:center;color:var(--text-dim);padding:1px 0;font-family:var(--font-mono)}.minimap-container{position:absolute;left:14px;bottom:14px;z-index:200;background:var(--surface2);border:1px solid var(--border-bright);border-radius:8px;padding:6px 8px 8px;box-shadow:0 8px 24px #0006}.minimap-title{font-size:8px;font-weight:700;letter-spacing:1.5px;color:var(--text-muted);margin-bottom:5px;text-transform:uppercase}.info-panel{width:250px;min-width:250px;background:var(--surface);border-left:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden}.info-header{padding:12px 14px;border-bottom:1px solid var(--border);font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-dim)}.info-body{flex:1;overflow-y:auto;padding:12px 14px}.info-body::-webkit-scrollbar{width:3px}.info-body::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}.info-empty{text-align:center;color:var(--text-muted);font-size:11px;padding:30px 0;line-height:1.6}.info-section{margin-bottom:14px}.info-section-title{font-size:9px;font-weight:700;font-family:var(--font-display);letter-spacing:1.5px;text-transform:uppercase;color:var(--text-muted);margin-bottom:7px}.info-row{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:5px;gap:8px}.info-key{font-size:10px;color:var(--text-dim);flex-shrink:0}.info-val{font-size:10px;color:var(--text);text-align:right;font-family:var(--font-mono)}.conn-list-item{background:var(--surface2);border:1px solid var(--border);border-radius:5px;padding:5px 8px;margin-bottom:4px;font-size:10px;cursor:pointer;transition:border-color .12s;line-height:1.4}.conn-list-item:hover{border-color:var(--border-bright)}.cli-arrow{color:var(--accent2);margin:0 4px}.cli-arrow.out{color:var(--signal-out)}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#04060abf;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:3000;display:none;align-items:center;justify-content:center;padding:16px}.modal-backdrop.open{display:flex}.modal{width:400px;max-width:calc(100vw - 32px);max-height:calc(100vh - 60px);overflow-y:auto;background:var(--surface);border:1px solid var(--border-bright);border-radius:12px;box-shadow:0 24px 64px #000000b3;padding:20px}.modal h3{font-size:14px;font-weight:700;margin-bottom:14px;letter-spacing:.3px}.modal label{display:block;font-size:9px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--text-muted);margin:10px 0 4px}.modal input[type=text],.modal select,.modal textarea{width:100%;background:var(--surface2);border:1px solid var(--border-bright);border-radius:6px;color:var(--text);padding:7px 10px;font-size:12px;font-family:var(--font-ui);outline:none}.modal input:focus,.modal select:focus,.modal textarea:focus{border-color:#6b8cff}.modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:18px}.notification{position:fixed;bottom:20px;left:50%;transform:translate(-50%);background:var(--surface2);border:1px solid var(--border-bright);border-radius:8px;padding:10px 18px;font-size:12px;z-index:9999;opacity:0;transition:opacity .3s;pointer-events:none;box-shadow:0 8px 24px #0006}.notification.show{opacity:1}::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}@keyframes lp-pulse-dot{0%,to{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}@keyframes lp-ticker{0%{transform:translate(0)}to{transform:translate(-50%)}}@keyframes lp-scan{0%{transform:translateY(-4px);opacity:0}8%{opacity:1}92%{opacity:1}to{transform:translateY(284px);opacity:0}}@keyframes lp-enter{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.lp-reveal{opacity:0}.lp-reveal.in-view{animation:lp-enter .55s cubic-bezier(.16,1,.3,1) var(--lp-delay, 0s) both}@media (prefers-reduced-motion: reduce){.lp-wire{animation:none!important;stroke-dashoffset:0!important}.lp-mc,.lp-status-dot,.lp-ticker-track{animation:none!important}.lp-pulse,.lp-scanline{display:none!important}.lp-reveal{opacity:1!important;transform:none!important;animation:none!important}}.lp{height:100dvh;overflow-y:auto;overflow-x:hidden;background:var(--bg);color:var(--text);scroll-behavior:smooth;background-image:radial-gradient(ellipse 900px 560px at 80% -5%,rgba(76,130,219,.1) 0%,transparent 60%),radial-gradient(ellipse 700px 500px at 5% 12%,rgba(0,212,170,.06) 0%,transparent 60%)}.lp-nav{position:sticky;top:0;z-index:40;background:#0e1116d1;backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);border-bottom:1px solid var(--border)}.lp-nav-inner{max-width:1200px;margin:0 auto;padding:13px 28px;display:flex;align-items:center;justify-content:space-between}.lp-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}.lp-wordmark{font-family:var(--font-display);font-size:14px;font-weight:600;letter-spacing:.1px}.lp-nav-right{display:flex;align-items:center;gap:8px}.lp-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;font-family:var(--font-ui);font-size:13px;font-weight:600;padding:9px 18px;border-radius:9px;cursor:pointer;text-decoration:none;border:1px solid transparent;transition:background .18s,border-color .18s,transform .12s,color .18s;white-space:nowrap}.lp-btn:active{transform:translateY(1px) scale(.99)}.lp-btn.primary{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:0 6px 20px #4c82db47}.lp-btn.primary:hover{background:#3f74d4;box-shadow:0 8px 26px #4c82db5c}.lp-btn.ghost{background:transparent;color:var(--text);border-color:var(--border-bright)}.lp-btn.ghost:hover{border-color:var(--text-dim);background:var(--surface)}.lp-btn.sm{font-size:12px;padding:7px 14px}.lp-btn.lg{font-size:14px;padding:12px 22px;border-radius:10px}.lp-btn.full{width:100%}.lp-btn:disabled{opacity:.55;cursor:not-allowed;transform:none}.lp-hero{max-width:1200px;margin:0 auto;padding:64px 28px 36px;display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}.lp-hero-content{display:flex;flex-direction:column;gap:22px;align-items:flex-start}.lp-status{display:inline-flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--border);border-radius:100px;padding:6px 14px}.lp-status-dot{width:7px;height:7px;border-radius:50%;background:var(--accent2);box-shadow:0 0 #00d4aa80;animation:lp-pulse-dot 2.2s ease-in-out infinite}.lp-status-live{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:1.4px;color:var(--accent2)}.lp-status-sep{color:var(--border-bright);font-size:11px}.lp-status-label{font-family:var(--font-mono);font-size:11px;color:var(--text-dim)}.lp-title{font-family:var(--font-display);font-size:clamp(40px,5.4vw,68px);font-weight:700;line-height:1.02;letter-spacing:-.038em;text-wrap:balance}.lp-title .accent{color:var(--cam-line)}.lp-sub{font-size:16px;line-height:1.65;color:var(--text-dim);max-width:48ch}.lp-cta{display:flex;gap:10px;flex-wrap:wrap}.lp-mock{position:relative;border:1px solid var(--border);border-radius:14px;overflow:hidden;background:#090b10;box-shadow:0 28px 72px #0000009e,0 0 0 1px #ffffff0d,inset 0 1px #ffffff0f;--surface: #0B1118;--surface-2: #131A24;--surface2: var(--surface-2);--border: #1F2937;--border-bright: #2B3648;--ink: #E6EDF6;--text: var(--ink);--text-dim: var(--ink-mute);--text-muted: var(--ink-dim);--sdi: #3B82F6;--signal: #FF3366;--audio: #34D399;--madi: #F5C842;--multiview: #EC4899;--accent2: var(--audio);--signal-out: var(--signal)}.lp-mock-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:var(--surface);border-bottom:1px solid var(--border)}.lp-mock-dot{width:10px;height:10px;border-radius:50%;background:var(--border-bright)}.lp-mock-dot.red{background:#ff5f57}.lp-mock-dot.amber{background:#febc2e}.lp-mock-dot.green{background:#28c840}.lp-mock-title{flex:1;font-family:var(--font-mono);font-size:10px;color:var(--text-muted);text-align:center}.lp-mock-live{font-family:var(--font-mono);font-size:10px;color:var(--accent2);font-weight:600}.lp-mock-canvas{position:relative;height:290px;background-image:radial-gradient(circle,rgba(255,255,255,.055) 1px,transparent 1px);background-size:22px 22px}.lp-mock-svg{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:1}.lp-mc{position:absolute;z-index:2;background:var(--surface2);border:1px solid var(--border-bright);border-radius:7px;padding:8px 10px;min-width:76px;animation:lp-float 4s ease-in-out infinite;box-shadow:0 6px 18px #00000073}.lp-mc.accent{border-color:var(--accent);box-shadow:0 0 0 1px #4c82db2e,0 6px 18px #00000073}.lp-mc-tag{display:inline-block;font-family:var(--font-mono);font-size:8px;font-weight:700;letter-spacing:1px;padding:1px 5px;border-radius:3px;background:var(--border);color:var(--text-muted);margin-bottom:4px}.lp-mc-tag.cam{background:#00e5ff1f;color:var(--cam-line)}.lp-mc-tag.sw{background:#4c82db26;color:var(--accent)}.lp-mc-code{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.4px}.lp-mc-sub{font-family:var(--font-mono);font-size:9px;color:var(--text-muted);margin-top:1px}.lp-mc-ports{display:flex;gap:3px;margin-top:6px;padding-top:5px;border-top:1px solid rgba(58,65,80,.6)}.lp-mc-port{width:5px;height:5px;border-radius:50%;flex-shrink:0}.lp-mc-port.in{background:#00d4aa}.lp-mc-port.out{background:#ff4655}.lp-mc-port.n{background:#3a4150}.lp-wire{fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-dasharray:60;stroke-dashoffset:60;animation:lp-draw 1.3s cubic-bezier(.16,1,.3,1) forwards}.lp-wire.cam{stroke:var(--cam-line)}.lp-wire.out{stroke:var(--signal-out)}.lp-mock-prop{position:absolute;bottom:12px;right:12px;z-index:3;background:var(--surface);border:1px solid var(--border);border-radius:7px;padding:10px 12px;min-width:108px;font-family:var(--font-mono)}.lp-mock-prop-title{font-size:10px;font-weight:700;margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid var(--border)}.lp-mock-prop-row{display:flex;justify-content:space-between;gap:8px;margin-top:4px}.lp-mock-prop-key{font-size:9px;color:var(--text-muted)}.lp-mock-prop-val{font-size:9px;color:var(--text-dim)}.lp-mock-prop-val.lp-accent2{color:var(--accent2)}.lp-mock-prop-val.lp-out{color:var(--signal-out)}.lp-canvas-glow{position:absolute;width:140px;height:100px;border-radius:50%;pointer-events:none;z-index:0;background:radial-gradient(circle,rgba(76,130,219,.18) 0%,transparent 70%)}.lp-scanline{position:absolute;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.04) 40%,rgba(255,255,255,.04) 60%,transparent);pointer-events:none;z-index:4;animation:lp-scan 5s ease-in-out infinite}.lp-conn-label{position:absolute;z-index:3;pointer-events:none;font-family:var(--font-mono);font-size:8px;font-weight:600;padding:1px 5px;border-radius:3px;background:#00e5ff1a;border:1px solid rgba(0,229,255,.25);color:#00e5ff;letter-spacing:.4px}.lp-bento-section{padding:40px 28px 88px;max-width:1200px;margin:0 auto}.lp-bento-inner{display:flex;flex-direction:column;gap:30px}.lp-h2{font-family:var(--font-display);font-size:clamp(22px,2.6vw,32px);font-weight:700;letter-spacing:-.025em;line-height:1.18;text-wrap:balance;max-width:30ch}.lp-bento{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(168px,auto);gap:16px}.lp-cell{position:relative;border:1px solid var(--border);border-radius:14px;background:var(--surface);padding:22px;display:flex;flex-direction:column;gap:10px;overflow:hidden;transition:border-color .2s,transform .2s}.lp-cell--feature:hover{border-color:var(--border-bright);transform:translateY(-2px)}.lp-cell--mock{grid-column:span 2;grid-row:span 2;background:transparent;border:0;padding:0;gap:14px}.lp-cell-head{display:flex;align-items:center;justify-content:space-between;padding:0 2px}.lp-cell-tag{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:1.6px;color:var(--text-muted)}.lp-cell-live{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:10px;color:var(--accent2)}.lp-cell-live-dot{width:6px;height:6px;border-radius:50%;background:var(--accent2);animation:lp-pulse-dot 2.2s ease-in-out infinite}.lp-cell-caption{font-size:13px;color:var(--text-dim);line-height:1.55;padding:0 2px;max-width:60ch}.lp-cell--feature{min-height:168px}.lp-cell--feature.wide{grid-column:span 2}.lp-feature-top{display:flex;align-items:center;gap:10px}.lp-feature-icon{width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:9px;border:1px solid var(--border-bright);background:var(--surface2);color:var(--tint-strong, var(--accent))}.lp-feature-tag{font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:1.4px;color:var(--text-muted)}.lp-feature-title{font-family:var(--font-display);font-size:17px;font-weight:600;letter-spacing:-.01em;line-height:1.28;margin-top:2px}.lp-feature-desc{font-size:13.5px;line-height:1.6;color:var(--text-dim)}.lp-feature-motif{margin-top:auto;padding-top:8px}.lp-feature-motif .lp-motif{width:100%;height:52px;display:block}.tint-cam{--tint: rgba(0,229,255,.06);--tint-strong: #00E5FF}.tint-accent{--tint: rgba(76,130,219,.07);--tint-strong: #4C82DB}.tint-accent2{--tint: rgba(0,212,170,.07);--tint-strong: #00D4AA}.tint-out{--tint: rgba(255,70,85,.06);--tint-strong: #FF4655}.lp-cell--feature.tint-cam,.lp-cell--feature.tint-accent,.lp-cell--feature.tint-accent2,.lp-cell--feature.tint-out{background-image:linear-gradient(155deg,var(--tint),transparent 62%);background-color:var(--surface)}.lp-motif{overflow:visible}.lp-motif-wire{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:90;stroke-dashoffset:90;animation:lp-draw 1.3s cubic-bezier(.16,1,.3,1) forwards}.lp-motif-wire.cam{stroke:var(--cam-line)}.lp-motif-wire.out{stroke:var(--signal-out)}.lp-motif-node{fill:var(--surface2);stroke:var(--cam-line);stroke-width:1.6}.lp-motif-node--out{stroke:var(--signal-out)}.lp-motif-node-circle{fill:var(--surface2);stroke:var(--accent2);stroke-width:1.6}.lp-motif-pulse{fill:var(--cam-line)}.lp-motif-eye ellipse{fill:none;stroke:var(--accent2);stroke-width:2}.lp-motif-eye .lp-motif-pupil{fill:var(--accent2);stroke:none}.lp-signals{border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--surface);padding:76px 28px}.lp-signals-inner{max-width:1100px;margin:0 auto;display:flex;flex-direction:column;gap:40px}.lp-signals-title{font-family:var(--font-display);font-size:clamp(22px,2.6vw,32px);font-weight:700;letter-spacing:-.025em;line-height:1.18;text-wrap:balance;max-width:26ch}.lp-signal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.lp-signal{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto auto;gap:4px 14px;align-items:start;padding:22px;border:1px solid var(--border);border-radius:12px;background:var(--bg)}.lp-signal-swatch{grid-row:1 / span 3;width:4px;align-self:stretch;border-radius:100px;min-height:48px}.lp-signal.swatch-cam .lp-signal-swatch{background:var(--cam-line);box-shadow:0 0 18px #00e5ff80}.lp-signal.swatch-in .lp-signal-swatch{background:var(--accent2);box-shadow:0 0 18px #00d4aa73}.lp-signal.swatch-out .lp-signal-swatch{background:var(--signal-out);box-shadow:0 0 18px #ff465573}.lp-signal-code{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:1px;color:var(--text-dim)}.lp-signal-name{font-family:var(--font-display);font-size:16px;font-weight:600;letter-spacing:-.01em}.lp-signal-desc{font-size:13px;line-height:1.55;color:var(--text-muted)}.lp-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding-top:8px;border-top:1px solid var(--border)}.lp-stat{display:flex;flex-direction:column;gap:4px;padding-top:18px}.lp-stat-k{font-family:var(--font-display);font-size:clamp(22px,2.4vw,30px);font-weight:700;letter-spacing:-.02em;color:var(--text)}.lp-stat-v{font-family:var(--font-mono);font-size:11px;letter-spacing:.5px;color:var(--text-muted);text-transform:uppercase}.lp-ticker{overflow:hidden;background:var(--bg);padding:16px 0;mask-image:linear-gradient(90deg,transparent,#000 70px,#000 calc(100% - 70px),transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 70px,#000 calc(100% - 70px),transparent)}.lp-ticker-track{display:flex;width:max-content;animation:lp-ticker 34s linear infinite}.lp-ticker-item{display:flex;align-items:center;gap:9px;padding:0 22px;font-family:var(--font-mono);font-size:11px;font-weight:600;color:var(--text-muted);white-space:nowrap;letter-spacing:.6px;text-transform:uppercase}.lp-ticker-dot{width:4px;height:4px;border-radius:50%;background:var(--border-bright);flex-shrink:0}.lp-auth-section{background:var(--bg);border-top:1px solid var(--border);padding:80px 28px}.lp-auth-inner{max-width:1040px;margin:0 auto;display:grid;grid-template-columns:1fr 400px;gap:64px;align-items:center}.lp-auth-copy{display:flex;flex-direction:column;gap:22px;align-items:flex-start}.lp-auth-copy .lp-h2{max-width:22ch}.lp-auth-bullets{list-style:none;display:flex;flex-direction:column;gap:11px;margin:0;padding:0}.lp-auth-bullets li{display:flex;align-items:center;gap:11px;font-size:14.5px;color:var(--text-dim)}.lp-auth-bullets li:before{content:"";display:block;width:6px;height:6px;border-radius:50%;background:var(--accent2);flex-shrink:0;box-shadow:0 0 10px #00d4aa80}.lp-auth-free{font-family:var(--font-mono);font-size:12px;color:var(--text-muted)}.lp-auth-form-wrap{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:26px;box-shadow:0 18px 48px #00000059}.lp-auth-signed-in-note{font-size:13px;color:var(--text-dim);margin:0 0 16px}.lp-auth-tabs{display:flex;background:var(--surface2);border:1px solid var(--border);border-radius:9px;padding:3px;margin-bottom:20px}.lp-auth-tab{flex:1;font-family:var(--font-ui);font-size:13px;font-weight:600;padding:8px;border:none;background:transparent;color:var(--text-dim);border-radius:7px;cursor:pointer;transition:all .15s}.lp-auth-tab.active{background:var(--surface);color:var(--text);box-shadow:0 1px 3px #0000004d}.lp-auth-form{display:flex;flex-direction:column;gap:14px}.lp-auth-field{display:flex;flex-direction:column;gap:5px}.lp-auth-field label{font-size:12px;font-weight:600;color:var(--text-dim)}.lp-auth-field input{font-family:var(--font-ui);font-size:14px;padding:10px 12px;background:var(--surface2);border:1px solid var(--border);border-radius:8px;color:var(--text);outline:none;transition:border-color .15s,box-shadow .15s;width:100%}.lp-auth-field input::placeholder{color:var(--text-muted)}.lp-auth-field input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}.lp-auth-msg{font-size:12px;padding:8px 12px;border-radius:7px;background:#ff46551a;border:1px solid rgba(255,70,85,.28);color:#ff7380}.lp-auth-msg.ok{background:#00d4aa1a;border-color:#00d4aa47;color:var(--accent2)}.lp-auth-divider{display:flex;align-items:center;gap:12px;margin:14px 0;color:var(--text-muted);font-size:12px}.lp-auth-divider:before,.lp-auth-divider:after{content:"";flex:1;height:1px;background:var(--border)}.lp-auth-note{text-align:center;font-size:12px;color:var(--text-muted);margin:14px 0 0}.lp-auth-note a{color:var(--accent);text-decoration:none}.lp-auth-note a:hover{text-decoration:underline}.lp-footer{padding:26px 28px;border-top:1px solid var(--border);background:var(--bg)}.lp-footer-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.lp-footer-tagline{font-size:12px;color:var(--text-muted);font-family:var(--font-mono)}@media (max-width: 1000px){.lp-bento{grid-template-columns:repeat(2,1fr)}.lp-cell--mock{grid-column:span 2;grid-row:auto}.lp-cell--feature.wide{grid-column:span 2}.lp-signal-grid{grid-template-columns:1fr}.lp-stats{grid-template-columns:repeat(2,1fr)}}@media (max-width: 900px){.lp-hero{grid-template-columns:1fr;padding:44px 20px 28px;gap:30px}.lp-hero-visual{order:-1}.lp-bento-section{padding:24px 20px 64px}}@media (max-width: 640px){.lp-nav-inner{padding:12px 18px}.lp-hero{padding:34px 18px 24px}.lp-bento{grid-template-columns:1fr;grid-auto-rows:auto}.lp-cell--mock,.lp-cell--feature.wide{grid-column:auto}.lp-cell{min-height:0}.lp-signals,.lp-auth-section{padding:56px 18px}.lp-auth-inner{grid-template-columns:1fr;gap:36px}.lp-footer-inner{justify-content:flex-start}}@keyframes lp-pulse-dot{0%,to{box-shadow:0 0 #00d4aa80}50%{box-shadow:0 0 0 5px #00d4aa00}}@keyframes lp-draw{to{stroke-dashoffset:0}}@keyframes lp-float{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}@keyframes lp-scan{0%{top:-2%}to{top:102%}}@keyframes lp-ticker{to{transform:translate(-50%)}}:root[data-theme=light] .lp-nav{background:#f4f6fae0}:root[data-theme=light] .lp-auth-form-wrap{box-shadow:0 14px 40px #1c263a1a}:root[data-theme=light] .lp-mock{box-shadow:0 24px 60px #1c263a38,0 0 0 1px #0000000a}@media (prefers-reduced-motion: reduce){.lp-wire,.lp-motif-wire{animation:none;stroke-dashoffset:0}.lp-pulse,.lp-motif-pulse{display:none}.lp-scanline,.lp-status-dot,.lp-cell-live-dot,.lp-mc,.lp-ticker-track{animation:none}}.mobile-toggle{display:none}.drawer-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#04060a8c;z-index:150}@media (max-width: 820px){.mobile-toggle{display:inline-flex;align-items:center;justify-content:center;min-width:40px;min-height:36px;font-size:17px;padding:4px 8px}.header{padding:8px 12px;gap:8px}.header-title-input{max-width:150px;font-size:13px}.header-actions{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}.header-actions::-webkit-scrollbar{height:0}.header-actions .btn{flex-shrink:0}.sidebar{position:fixed;top:0;left:0;bottom:0;width:84%;max-width:320px;min-width:0;transform:translate(-104%);transition:transform .25s ease;box-shadow:8px 0 28px #0000008c;z-index:200}.sidebar.open{transform:translate(0)}.info-panel{position:fixed;top:0;right:0;bottom:0;width:84%;max-width:320px;min-width:0;transform:translate(104%);transition:transform .25s ease;box-shadow:-8px 0 28px #0000008c;z-index:200;border-left:1px solid var(--border-bright)}.info-panel.open{transform:translate(0)}.canvas-area{width:100%}.canvas-toolbar{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}.canvas-toolbar::-webkit-scrollbar{height:0}.canvas-toolbar .btn{flex-shrink:0}.device-chip{padding:10px}.zoom-controls{bottom:14px;right:14px}.zoom-controls button{width:40px;height:36px;font-size:18px}}.auth-modal{max-width:360px}.auth-google{width:100%;justify-content:center;font-weight:600}.auth-or{display:flex;align-items:center;gap:8px;margin:12px 0;color:var(--text-dim);font-size:12px}.auth-info{margin-top:8px;font-size:12px;color:var(--accent)}.acct{display:inline-flex;align-items:center;gap:6px}.acct-email{font-size:12px;color:var(--text-dim);max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cloud-gate{padding:12px 0 8px;display:flex;flex-direction:column;gap:10px}:root[data-theme=light]{--bg: #F4F6FA;--surface: #FFFFFF;--surface-2: #EAEEF4;--surface-3: #E2E7EF;--border: #D5DBE5;--border-grid: #E6EAF1;--border-bright: #BFC7D4;--ink: #1A1F28;--ink-mute: #586173;--ink-dim: #8A93A3;--surface2: var(--surface-2);--text: var(--ink);--text-dim: var(--ink-mute);--text-muted: var(--ink-dim);--sdi: #2E6BD0;--signal: #E03442;--audio: #079A80;--madi: #B98A1A;--multiview: #C73B7E;--accent: var(--sdi);--accent-soft: rgba(46,107,208,.12);--accent-ring: rgba(46,107,208,.35);--signal-out: var(--signal);--accent2: var(--audio);--cam-line: var(--sdi);--danger: #E03442;--green: var(--audio);--grid-line: rgba(28,38,58,.06)}:root[data-theme=light] .header{background:var(--surface)}:root[data-theme=light] .lp-nav{background:#f4f6faeb}.theme-toggle{font-size:14px;line-height:1;padding:6px 9px}:root[data-theme=light] .canvas-label{background:#2e6bd014;color:var(--text-dim)}:root[data-theme=light] .canvas-label:hover{background:#2e6bd024}:root[data-theme=light] .canvas-label .lbl-btn{background:var(--surface2);color:var(--text-dim)}:root[data-theme=light] .canvas-label .lbl-btn:hover{color:var(--accent)}.of-menu{position:relative;display:none}.of-menu>summary{list-style:none;display:inline-flex;align-items:center;justify-content:center;min-width:40px;min-height:36px;font-size:18px;line-height:1}.of-menu>summary::-webkit-details-marker{display:none}.of-menu-panel{position:absolute;right:0;top:calc(100% + 6px);background:var(--surface);border:1px solid var(--border-bright);border-radius:8px;box-shadow:0 10px 30px #00000073;padding:6px;display:flex;flex-direction:column;gap:4px;z-index:250;min-width:168px;max-width:80vw}.of-menu-panel .btn{width:100%;text-align:left;white-space:nowrap}.of-menu-panel .card-size-control{padding:6px 4px}.of-menu:not([open])>.of-menu-panel{display:none}@media (max-width: 600px){.of-menu{display:inline-flex}.phone-collapse{display:none!important}.header{padding:8px 10px;gap:6px}.header-left{gap:8px;flex-wrap:wrap}.header-title-input{max-width:130px;font-size:13px}.tab-group{gap:4px}.tab-btn{padding:6px 9px;font-size:11px}.header-actions{gap:5px}.header-actions,.canvas-toolbar{overflow:visible}}.header{position:relative}.portpin{position:absolute;top:50%;transform:translateY(-50%);width:7px;height:7px;border-radius:50%;border:2px solid var(--bg);z-index:3;pointer-events:none}.portpin-right{right:-4px}.portpin-left{left:-4px}.logo-wrap{position:relative;display:inline-flex;align-items:center;flex-shrink:0}.header-project{display:flex;flex-direction:column;min-width:0}.header-sub{font-family:var(--font-mono);font-size:10px;color:var(--ink-dim);letter-spacing:.04em;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.domain-switch{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:inline-flex;gap:2px;padding:3px;background:var(--surface);border:1px solid var(--border);border-radius:8px;z-index:4}.domain-btn{position:relative;display:inline-flex;align-items:center;gap:6px;background:transparent;border:1px solid transparent;color:var(--ink-mute);padding:5px 12px;border-radius:5px;font-family:var(--font-display);font-size:11px;font-weight:600;letter-spacing:.1em;cursor:pointer;transition:all .15s}.domain-btn:hover{color:var(--ink);background:var(--surface-2)}.domain-btn.active{background:color-mix(in srgb,var(--d) 16%,transparent);border-color:color-mix(in srgb,var(--d) 42%,transparent);color:var(--d)}.sync-pill{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:.12em;color:var(--audio)}.sync-dot{width:7px;height:7px;border-radius:50%;background:var(--audio);box-shadow:0 0 8px var(--audio);animation:pulse-dot 2s ease-in-out infinite}@keyframes pulse-dot{0%,to{opacity:1}50%{opacity:.4}}.auth-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:500;background:#06090fd1;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:20px;animation:overlay-in .18s ease}@keyframes overlay-in{0%{opacity:0}to{opacity:1}}.auth-card{position:relative;width:420px;max-width:100%;background:var(--surface);border:1px solid var(--border-bright);border-radius:12px;padding:22px;box-shadow:0 24px 60px #00000080;animation:modal-in .22s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column;gap:12px}@keyframes modal-in{0%{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}.auth-x{position:absolute;top:12px;right:12px;background:transparent;border:none;color:var(--ink-dim);font-size:14px;cursor:pointer;width:26px;height:26px;border-radius:6px}.auth-x:hover{background:var(--surface-2);color:var(--ink)}.auth-seg{display:flex;gap:4px;padding:4px;background:var(--surface-2);border-radius:8px}.auth-tab{flex:1;padding:8px;border:none;background:transparent;color:var(--ink-mute);font-family:var(--font-ui);font-size:13px;font-weight:600;border-radius:6px;cursor:pointer;transition:all .15s}.auth-tab.active{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px #0000004d}.auth-google{justify-content:center;padding:10px;background:var(--surface-2);border:1px solid var(--border-bright);color:var(--ink);font-weight:500}.auth-google:hover{background:var(--surface-3)}.auth-or{display:flex;align-items:center;gap:10px;color:var(--ink-dim);font-size:11px;font-family:var(--font-mono)}.auth-or:before,.auth-or:after{content:"";flex:1;height:1px;background:var(--border)}.auth-fields{display:flex;flex-direction:column;gap:10px}.auth-field{display:flex;flex-direction:column;gap:5px}.auth-field span{font-size:11px;font-weight:600;color:var(--ink-mute);font-family:var(--font-mono);letter-spacing:.04em}.auth-field input{font-family:var(--font-ui);font-size:14px;padding:9px 11px;background:var(--bg);border:1px solid var(--border);border-radius:7px;color:var(--ink);outline:none;transition:border-color .15s,box-shadow .15s}.auth-field input:focus{border-color:var(--sdi);box-shadow:0 0 0 3px #3b82f62e}.auth-cta{padding:11px;background:var(--signal);border:1px solid var(--signal);color:#06090f;font-family:var(--font-display);font-weight:600;font-size:14px;border-radius:7px}.auth-cta:hover:not(:disabled){background:var(--signal-hover);border-color:var(--signal-hover)}.auth-cta:disabled{opacity:.45;cursor:not-allowed}.auth-switch{text-align:center;font-size:12px;color:var(--ink-mute)}.auth-switch button{background:none;border:none;color:var(--sdi);font-weight:600;cursor:pointer;font-size:12px;padding:0}.auth-switch button:hover{text-decoration:underline}.auth-info{font-size:12px;color:var(--audio);background:#34d3991a;border:1px solid rgba(52,211,153,.25);padding:8px 10px;border-radius:6px}@media (max-width: 820px){.domain-switch{position:static;transform:none}}.sidebar-panel-tabs .spt{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.1em}.sidebar-stats{font-family:var(--font-mono);font-size:10px;color:var(--ink-mute);letter-spacing:.06em}.sidebar-stats b{color:var(--ink);font-weight:700}.search-box{font-family:var(--font-mono)}.search-box::placeholder{color:var(--ink-dim)}.section-label{font-family:var(--font-mono);font-size:9px;font-weight:600;letter-spacing:.06em;text-transform:lowercase;color:var(--ink-dim);padding:10px 6px 4px}.device-chip{position:relative}.chip-badge{flex-shrink:0;min-width:30px;text-align:center;font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:.5px;padding:3px 4px;border-radius:3px;background:color-mix(in srgb,var(--c, var(--ink-dim)) 16%,transparent);color:var(--c, var(--ink-mute))}.device-chip.selected .chip-badge{background:color-mix(in srgb,var(--c, var(--sdi)) 28%,transparent)}.portpin-chip{right:7px;background:transparent;border-color:var(--ink-dim);width:6px;height:6px}.portpin-chip.on{background:var(--sdi);border-color:var(--sdi);box-shadow:0 0 6px var(--sdi)}.legend-title{font-family:var(--font-mono)}.device-card{border-color:var(--border-bright)}.device-card.highlighted{border:1.5px solid var(--sdi);box-shadow:0 0 36px #3b82f647,0 0 0 4px #3b82f614}.card-code{letter-spacing:.02em}.port-section-title{font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}.port-section-title.pt-in{color:var(--sdi)}.port-section-title.pt-out{color:var(--signal)}.port-kind-title{font-family:var(--font-mono);font-size:8px;letter-spacing:.1em}.canvas-toolbar{position:absolute;left:50%;bottom:14px;transform:translate(-50%);z-index:20;border:1px solid var(--border-bright);border-bottom:none;background:#0b1118b8;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:10px;padding:6px 10px;box-shadow:0 8px 24px #0006;max-width:calc(100% - 32px);justify-content:center}.canvas-toolbar .toolbar-zoom-badge{margin-left:8px;font-family:var(--font-mono);color:var(--ink-dim);background:var(--surface-2);padding:3px 7px;border-radius:5px}.info-panel{background:var(--surface);border-left:1px solid var(--border)}.info-header{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--ink-mute);padding:12px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center}.insp-device-name{font-family:var(--font-display);font-size:16px;font-weight:600;letter-spacing:-.01em}.insp-device-sub{font-size:11px;color:var(--ink-mute);margin:2px 0 10px}.info-section-title{font-family:var(--font-mono);font-size:9px;font-weight:600;letter-spacing:.1em;text-transform:lowercase;color:var(--ink-dim);margin-bottom:7px}.util-row{display:flex;align-items:center;gap:8px;margin-bottom:5px}.util-label{font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:.05em;min-width:54px}.util-bar{flex:1;height:6px;background:var(--surface-2);border-radius:3px;overflow:hidden}.util-fill{height:100%;border-radius:3px}.util-count{font-family:var(--font-mono);font-size:9px;color:var(--ink-mute);min-width:30px;text-align:right}.conn-list-item.mono{display:flex;align-items:center;gap:4px;font-family:var(--font-mono);font-size:10px;padding:3px 0}.cli-tag{font-size:8px;font-weight:700;padding:1px 4px;border-radius:2px}.cli-tag.in{background:#3b82f62e;color:var(--sdi)}.cli-tag.out{background:#ff33662e;color:var(--signal)}.cli-port{color:var(--ink-mute)}.cli-target{color:var(--ink)}.info-empty-sm{font-family:var(--font-mono);font-size:10px;color:var(--ink-dim)}.insp-actions{display:flex;gap:6px;margin-top:12px}.insp-actions .btn{flex:1;font-family:var(--font-mono);font-size:10px}.cards-row{display:flex;flex-wrap:wrap;gap:4px}.color-swatches{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:8px}.color-swatch{width:20px;height:20px;border-radius:5px;cursor:pointer;display:inline-block}.conn-color-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.conn-color-input{width:38px;height:28px;border-radius:6px;border:1px solid var(--border-bright);background:none;cursor:pointer}.route-hint{font-size:10px;color:var(--ink-dim);margin-bottom:8px;line-height:1.5;font-family:var(--font-mono)}.route-tools{display:flex;align-items:center;gap:8px}.route-tools input[type=range]{flex:1;accent-color:var(--sdi)}.lp-brand-mark{display:block;flex-shrink:0}.lp-brand{gap:9px}