:root{--bg:#0e1116;--surface:#161a20;--surface-raised:#1c2128;--surface-sunken:#11141a;--border:#272d36;--border-strong:#353c47;--text:#e3e7ec;--text-soft:#b4bcc7;--muted:#7d8794;--accent:#6b9bf2;--success:#98c379;--warning:#d19a66;--danger:#e06c75;--radius:8px;--shadow:0 12px 32px #00000059;--font:"IBM Plex Sans", system-ui, sans-serif;--mono:"IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;color:var(--text);font:14px/1.45 var(--font);-webkit-font-smoothing:antialiased;margin:0;overflow:hidden}button{font:inherit}.icon{vertical-align:middle;flex:none}#viewport{position:fixed;inset:0}#viewport canvas{display:block}.label-layer{pointer-events:none;position:absolute;inset:0}.hud{z-index:10;position:fixed}.hud-title{pointer-events:none;top:20px;left:24px}.brand{align-items:center;gap:10px;display:flex}.brand__mark{border:1px solid var(--border-strong);background:var(--surface);width:30px;height:30px;color:var(--accent);border-radius:7px;place-items:center;display:grid}.brand h1{letter-spacing:-.01em;margin:0;font-size:17px;font-weight:600}.brand p{color:var(--muted);margin:0;font-size:12px}.hud-hint{color:var(--muted);flex-wrap:wrap;gap:4px 14px;margin:12px 0 0;padding:0;font-size:11px;list-style:none;display:flex}kbd{border:1px solid var(--border-strong);color:var(--text-soft);font:500 10px var(--mono);border-bottom-width:2px;border-radius:4px;margin-right:4px;padding:0 5px}.caption{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);width:max-content;max-width:min(640px,100vw - 48px);box-shadow:var(--shadow);align-items:center;gap:12px;padding:10px 16px;font-size:13px;transition:opacity .25s,transform .25s;display:flex;top:20px;left:50%;transform:translate(-50%)}.caption[hidden]{opacity:0;pointer-events:none;display:flex;transform:translate(-50%,-8px)}.caption__step{background:var(--surface-raised);color:var(--accent);font:600 11px var(--mono);border-radius:4px;flex:none;padding:2px 8px}.device-label{--accent:var(--muted);border:1px solid var(--border-strong);white-space:nowrap;cursor:pointer;pointer-events:auto;-webkit-user-select:none;user-select:none;background:#161a20f0;border-radius:6px;grid-template-columns:auto 1fr;align-items:center;column-gap:6px;padding:4px 9px 5px;font-size:11px;line-height:1.3;transition:transform .15s,border-color .15s;display:grid}.device-label__marker{background:var(--accent);border-radius:2px;width:6px;height:6px}.device-label__name{font-weight:600}.device-label__ip{color:var(--muted);font:10px var(--mono);grid-column:2}.device-label.is-hovered{border-color:var(--muted);transform:translateY(-2px)}.device-label.is-selected{border-color:var(--accent)}.device-label.is-down{opacity:.55}.device-label.is-down .device-label__marker{background:var(--danger)}.device-label.is-down .device-label__ip{color:var(--danger)}.zone-label{pointer-events:none}.zone-label span{color:var(--accent);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;align-items:baseline;gap:8px;font-size:11px;font-weight:600;display:flex;transform:translate(50%)}.zone-label small{color:var(--muted);font:400 10px var(--mono);letter-spacing:0;text-transform:none}.packet-tag{border:1px solid color-mix(in srgb, var(--accent) 55%, transparent);color:color-mix(in srgb, var(--accent) 55%, white);font:500 10px var(--mono);white-space:nowrap;pointer-events:none;background:#0e1116eb;border-radius:4px;padding:1px 6px;display:block}.fx-note{--tone:var(--accent);--stack:0;border:1px solid var(--border-strong);border-left:3px solid var(--tone);color:var(--text);white-space:nowrap;pointer-events:none;background:#161a20f5;border-radius:5px;padding:4px 9px;font-size:11px;animation:2.6s ease-out forwards note-rise;display:block}.fx-note--success{--tone:var(--success)}.fx-note--danger{--tone:var(--danger)}.fx-note--warning{--tone:var(--warning)}@keyframes note-rise{0%{opacity:0;transform:translateY(calc(-34px - var(--stack) * 28px))}12%,75%{opacity:1;transform:translateY(calc(-46px - var(--stack) * 28px))}to{opacity:0;transform:translateY(calc(-54px - var(--stack) * 28px))}}.panel{--accent:var(--muted);z-index:11;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);width:360px;max-height:calc(100vh - 40px);box-shadow:var(--shadow);scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent;top:20px;right:20px;overflow-y:auto}.panel[hidden]{display:none}.panel.is-entering{animation:.22s cubic-bezier(.2,.8,.2,1) panel-in}@keyframes panel-in{0%{opacity:0;transform:translate(12px)}}.panel__header{border-bottom:1px solid var(--border);align-items:flex-start;gap:12px;padding:16px 16px 14px;display:flex}.panel__icon{border:1px solid var(--border-strong);background:var(--surface-raised);width:38px;height:38px;color:var(--accent);border-radius:8px;flex:none;place-items:center;display:grid}.panel__heading{flex:1;min-width:0}.panel__type{color:var(--muted);font-size:11px;font-weight:500}.panel h2{margin:0;font-size:16px;font-weight:600}.panel__model{color:var(--muted);margin:0;font-size:12px}.icon-button{width:28px;height:28px;color:var(--muted);cursor:pointer;background:0 0;border:1px solid #0000;border-radius:6px;place-items:center;display:grid}.icon-button:hover{border-color:var(--border-strong);color:var(--text)}.panel__meta{justify-content:space-between;align-items:center;gap:8px;padding:12px 16px 0;display:flex}.status{color:var(--success);align-items:center;gap:6px;font-size:12px;font-weight:500;display:inline-flex}.status:before{content:"";background:currentColor;border-radius:50%;width:7px;height:7px}.status.is-down{color:var(--danger)}.panel__section{padding:14px 16px 0}.panel__section:last-child{padding-bottom:16px}.panel h3,.legend h3{color:var(--muted);letter-spacing:.06em;text-transform:uppercase;margin:0 0 6px;font-size:11px;font-weight:600}.kv{border-collapse:collapse;width:100%;font-size:12.5px}.kv td{border-bottom:1px solid var(--border);vertical-align:top;padding:6px 0}.kv tr:last-child td{border-bottom:0}.kv td+td{padding-left:10px}.kv td:first-child{color:var(--muted)}.kv td:last-child{text-align:right}.kv small{color:var(--muted);font-size:11px;display:block}.kv--policies td:first-child{width:1%}.kv--policies td:last-child{white-space:nowrap}code{color:var(--text);font:12px var(--mono)}.muted{color:var(--muted)}.chips{flex-wrap:wrap;gap:6px;display:flex}.chip{--chip:var(--muted);border:1px solid var(--border-strong);color:var(--text-soft);white-space:nowrap;border-radius:4px;align-items:center;gap:5px;padding:1px 7px;font-size:11px;display:inline-flex}.chip:before{content:"";background:var(--chip);border-radius:2px;width:6px;height:6px}.chip--trunk{--chip:#aeb6c2}.chip--wan,.chip--deny{--chip:var(--danger)}.chip--accept{--chip:var(--success)}.chip--off{--chip:#4b5360;color:var(--muted)}.button{border:1px solid var(--border-strong);background:var(--surface-raised);color:var(--text);cursor:pointer;border-radius:6px;align-items:center;gap:6px;padding:5px 10px;font-size:12px;font-weight:500;transition:border-color .15s,background .15s;display:inline-flex}.button:hover:not(:disabled){border-color:var(--muted)}.button:disabled{opacity:.45;cursor:default}.button--primary{background:var(--accent);color:#0e1116;border-color:#0000}.button--primary:hover:not(:disabled){background:#82acf5;border-color:#0000}.command-chip{border:1px solid var(--border);background:var(--surface-sunken);color:var(--text-soft);font:11px var(--mono);cursor:pointer;border-radius:5px;padding:3px 8px}.command-chip:hover:not(:disabled){border-color:var(--border-strong);color:var(--text)}.command-chip:disabled{opacity:.4;cursor:default}.link-button{color:var(--text-soft);cursor:pointer;background:0 0;border:0;align-items:center;gap:4px;padding:0;font-size:11px;display:inline-flex}.link-button:hover{color:var(--text)}.dock{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);width:min(640px,100vw - 40px);box-shadow:var(--shadow);bottom:20px;left:20px;overflow:hidden}.dock__tabs{border-bottom:1px solid var(--border);align-items:stretch;padding:0 6px;display:flex}.dock__tab{color:var(--muted);cursor:pointer;background:0 0;border:0;border-bottom:2px solid #0000;align-items:center;gap:7px;margin-bottom:-1px;padding:10px 12px;font-size:12.5px;font-weight:500;display:flex}.dock__tab:hover{color:var(--text-soft)}.dock__tab[aria-selected=true]{color:var(--text);border-bottom-color:var(--accent)}.dock__badge{background:var(--surface-raised);min-width:18px;color:var(--text-soft);font:500 10px/16px var(--mono);text-align:center;border-radius:4px;padding:0 5px}.dock__toggle{align-self:center;margin-left:auto;transition:transform .2s}.dock.is-collapsed .dock__body{display:none}.dock.is-collapsed .dock__tabs{border-bottom:0}.dock.is-collapsed .dock__toggle{transform:rotate(180deg)}.dock__pane[hidden]{display:none}.scenarios{flex-direction:column;height:340px;display:flex}.scenarios__list{flex:1;margin:0;padding:6px;list-style:none;overflow-y:auto}.scenario{border-radius:6px;grid-template-columns:1fr auto;align-items:center;gap:2px 12px;padding:10px;display:grid}.scenario:hover{background:var(--surface-raised)}.scenario.is-running{background:var(--surface-raised);box-shadow:inset 2px 0 0 var(--accent)}.scenario h4{margin:0;font-size:13px;font-weight:600}.scenario p{color:var(--muted);grid-column:1;margin:0;font-size:12px}.scenario .button{grid-area:1/2/span 2}.scenarios__footer{border-top:1px solid var(--border);color:var(--muted);justify-content:space-between;align-items:center;padding:10px 14px;font-size:11px;display:flex}.terminal{height:340px;font:12px/1.5 var(--mono);background:#0c0e12;flex-direction:column;display:flex}.terminal__bar{border-bottom:1px solid var(--border);background:var(--surface);color:var(--muted);font:12px var(--font);justify-content:space-between;align-items:center;padding:8px 12px;display:flex}.terminal__bar select{border:1px solid var(--border-strong);background:var(--surface-raised);color:var(--text);font:12px var(--font);border-radius:5px;margin-left:6px;padding:3px 6px}.terminal__status{color:var(--text-soft)}.terminal__screen{color:#c9d1d9;white-space:pre;scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent;flex:1;padding:10px 12px 0;overflow-y:auto}.terminal__text--command{color:#f0f3f6}.terminal__text--warning{color:var(--warning)}.terminal__line{color:#f0f3f6;padding:2px 12px 8px;display:flex}.terminal__input{color:#f0f3f6;min-width:0;font:inherit;caret-color:var(--accent);background:0 0;border:0;outline:0;flex:1;padding:0}.terminal.is-busy .terminal__line{opacity:.4}.terminal__suggestions{border-top:1px solid var(--border);background:var(--surface);flex-wrap:wrap;gap:6px;padding:8px 12px 10px;display:flex}.capture{flex-direction:column;height:340px;display:flex}.capture__bar{border-bottom:1px solid var(--border);color:var(--muted);justify-content:space-between;padding:8px 12px;font-size:12px;display:flex}.capture__scroll{scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent;flex:1;overflow:auto}.capture__table{border-collapse:collapse;width:100%;font:11px var(--mono)}.capture__table th{border-bottom:1px solid var(--border);background:var(--surface-raised);color:var(--muted);font:600 11px var(--font);text-align:left;padding:6px 8px;position:sticky;top:0}.capture__table td{color:var(--text-soft);white-space:nowrap;border-bottom:1px solid #272d3699;padding:4px 8px}.capture__table td:nth-child(5){color:var(--proto);font-weight:500}.capture__table tr.is-dropped td{color:#e8a0a6;background:#e06c7514}.capture__empty{color:var(--muted);text-align:center;padding:28px;font-size:12px}.capture.has-rows .capture__empty{display:none}.legend{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);width:210px;box-shadow:var(--shadow);padding:12px 14px 14px;font-size:12px;top:20px;right:20px}.legend h3{margin-top:14px}.legend ul{color:var(--text-soft);gap:5px;margin:0;padding:0;list-style:none;display:grid}.legend li{align-items:center;gap:8px;display:flex}.legend__dot{background:var(--swatch);border-radius:50%;width:8px;height:8px}.legend__line{background:var(--swatch);border-radius:2px;width:16px;height:3px}.legend__speed{border:1px solid var(--border);background:var(--surface-sunken);border-radius:6px;grid-template-columns:repeat(4,1fr);gap:2px;padding:2px;display:grid}.legend__speed button{color:var(--muted);font:500 11px var(--mono);cursor:pointer;background:0 0;border:0;border-radius:4px;padding:3px 0}.legend__speed button[aria-pressed=true]{background:var(--surface-raised);color:var(--text)}@media (width<=1180px){.legend{display:none}}@media (width<=760px){.panel{z-index:11;width:auto;max-height:45vh;inset:auto 16px 16px}.dock{width:calc(100vw - 32px);bottom:16px;left:16px}.caption{max-width:calc(100vw - 32px);top:auto;bottom:400px}.hud-hint{display:none}}.toggle{cursor:pointer;align-items:center;gap:7px;display:inline-flex}.toggle input{opacity:0;pointer-events:none;position:absolute}.toggle__track{border:1px solid var(--border-strong);background:var(--surface-sunken);border-radius:999px;width:28px;height:16px;transition:background .15s,border-color .15s;position:relative}.toggle__track:after{content:"";background:var(--muted);border-radius:50%;width:10px;height:10px;transition:transform .15s,background .15s;position:absolute;top:2px;left:2px}.toggle input:checked+.toggle__track{border-color:color-mix(in srgb, var(--success) 60%, transparent);background:color-mix(in srgb, var(--success) 22%, transparent)}.toggle input:checked+.toggle__track:after{background:var(--success);transform:translate(12px)}.toggle input:focus-visible+.toggle__track{outline:2px solid var(--accent);outline-offset:2px}.toggle__label{min-width:46px;color:var(--muted);font:500 11px var(--mono);text-align:left}.toggle input:checked~.toggle__label{color:var(--success)}.cable-break{border:1px solid var(--danger);background:var(--surface);width:18px;height:18px;color:var(--danger);font:600 13px/1 var(--font);pointer-events:none;border-radius:50%;place-items:center;display:grid}.panel__actions{gap:6px;display:flex}.button--danger:hover:not(:disabled){border-color:var(--danger);color:var(--danger)}.kv td:last-child .icon-button{width:24px;height:24px;margin:-3px -4px -3px 0}.caption__text{flex:1}.caption__actions{flex:none;align-items:center;gap:4px;display:flex}.caption__actions [hidden]{display:none}.scenarios__footer .toggle{color:var(--text-soft);font-size:12px}.scenarios__footer .toggle input:disabled~*{opacity:.5}