:root{--bg: #0f1114;--panel: #171a1f;--panel-2: #1e222a;--line: #2a2f38;--line-lit: #3d4553;--canvas: #14161a;--text: #e8eef7;--muted: #8a93a3;--dim: #6b7482;--dimmest: #4e5663;--accent: #6fb8ff;--frequency: #ffb057;--emphasis: #ff6b9d;--selected: #ffd166;--ok: #57e08a;--warn: #ffcc66;--error: #ff6b6b;--sans: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;--mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;color-scheme:dark}*{box-sizing:border-box}html,body,#app{height:100%;margin:0}body{background:var(--bg);color:var(--text);font:13px/1.45 var(--sans)}input,select,.readout{font-family:var(--mono);font-variant-numeric:tabular-nums}button,input,select{font:inherit;color:inherit;background:var(--panel-2);border:1px solid var(--line);border-radius:6px;padding:0 9px;height:28px}button{font-family:var(--sans);display:inline-flex;align-items:center;justify-content:center;gap:7px;height:30px;padding:0 13px;border-radius:7px;background:transparent;cursor:pointer;white-space:nowrap}button:hover:not(:disabled){border-color:var(--line-lit);background:var(--panel-2)}button:disabled{opacity:.4;cursor:not-allowed}button.primary{background:var(--accent);color:#08131f;border-color:transparent;font-weight:600}button.primary:hover:not(:disabled){background:#8ac6ff;border-color:transparent}button.ghost{border-color:transparent;color:var(--muted)}button[aria-pressed=true]{border-color:var(--accent);color:var(--accent)}button.tint-frequency[aria-pressed=true]{border-color:var(--frequency);color:var(--frequency)}button.tint-emphasis[aria-pressed=true]{border-color:var(--emphasis);color:var(--emphasis)}select{padding:0 4px}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:4px;padding:0;border:0;border-radius:2px;background:var(--line);outline:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;background:var(--text);cursor:grab}input[type=range]::-moz-range-thumb{width:13px;height:13px;border:0;border-radius:50%;background:var(--text);cursor:grab}input[type=checkbox]{height:auto;accent-color:var(--accent)}.app{display:grid;grid-template-columns:1fr 288px;grid-template-rows:auto auto 1fr auto;height:100%}.header{grid-column:1 / -1;display:flex;align-items:center;gap:16px;height:52px;padding:0 16px;background:var(--panel);border-bottom:1px solid var(--line)}.header .wordmark{display:flex;align-items:center;gap:9px;font-weight:600;letter-spacing:-.01em}.header .divider{width:1px;height:22px;background:var(--line);flex:none}.header .identity{display:flex;align-items:center;gap:10px;min-width:0}.header .identity input{flex:0 1 190px;min-width:90px;font-family:var(--sans);font-weight:500}.toolbar{grid-column:1 / -1;display:flex;align-items:center;gap:16px;padding:7px 16px;background:var(--panel);border-bottom:1px solid var(--line)}.group{display:flex;align-items:center;gap:6px}.spacer{flex:1}.label{font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--dim)}.readout{color:var(--muted);font-size:11px}.editor{overflow:hidden;display:flex;flex-direction:column;background:var(--canvas)}.ruler{position:relative;height:24px;border-bottom:1px solid var(--line);cursor:col-resize}.lane{position:relative;border-bottom:1px solid var(--line)}.lane-amplitude{flex:1 1 0;min-height:120px}.lane-frequency{flex:none}.lane-canvas{position:absolute;top:0;right:0;bottom:0;left:0;display:block}.lane-overlay{pointer-events:auto}.lane-label{position:absolute;top:8px;left:10px;pointer-events:none;font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--dim)}.lane-readout{position:absolute;top:8px;right:12px;pointer-events:none;font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:11px;color:var(--dimmest)}.lane-readout.live{color:var(--text)}.side{background:var(--panel);border-left:1px solid var(--line);display:flex;flex-direction:column;min-height:0}.side .scroll{overflow-y:auto;flex:1}.tabs{display:flex;border-bottom:1px solid var(--line)}.tabs button{flex:1 1 0;height:auto;padding:10px 0;border:0;border-radius:0;background:transparent;color:var(--muted)}.tabs button:hover{background:var(--panel-2)}.tabs button[aria-pressed=true]{color:var(--text);box-shadow:inset 0 -2px 0 currentColor}.section{padding:14px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:9px}.section h3{margin:0;font-size:10px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--dim)}.section h3.frequency{color:var(--frequency)}.row{display:grid;grid-template-columns:92px 1fr;gap:8px;align-items:center}.row>label{color:var(--muted)}.row input,.row select{width:100%}.row input[type=checkbox]{width:auto;justify-self:start}.row button{justify-self:start}.section>button{align-self:flex-start}.slider{display:flex;align-items:center;gap:8px}.slider input[type=range]{flex:1}.slider .value{width:34px;text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}.hint{color:var(--dim);font-size:12px;line-height:1.5;margin:0}.hint.warn{color:var(--warn)}.list{display:flex;flex-direction:column;gap:3px}.list button{justify-content:space-between;padding:8px 10px;border:0;border-radius:7px;color:var(--muted);text-align:left}.list button:hover{background:var(--panel-2)}.list button[aria-pressed=true]{background:#23272f;color:var(--text);font-weight:500}.list button small{color:var(--dim);font-family:var(--mono);font-variant-numeric:tabular-nums}.stack{display:flex;flex-direction:column;align-items:flex-start;gap:4px}.status-strip{display:flex;align-items:center;gap:9px;padding:12px 14px;border-top:1px solid var(--line);background:var(--canvas);color:var(--muted)}.status-strip span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lintbar{grid-column:1 / -1;display:flex;align-items:center;gap:10px;padding:6px 16px;background:var(--panel);border-top:1px solid var(--line);font-size:12px}.badge{border-radius:999px;padding:1px 8px;font-size:11px;font-family:var(--mono)}.badge.error{background:#ff6b6b2e;color:var(--error)}.badge.warn{background:#ffcc6629;color:var(--warn)}.badge.ok{background:#57e08a26;color:var(--ok)}.issue{border:0;background:transparent;padding:0;height:auto;color:var(--muted)}.issue:hover{background:transparent;text-decoration:underline}.issue.error{color:var(--error)}.issue.warning{color:var(--warn)}.dot{width:7px;height:7px;border-radius:50%;display:inline-block;flex:none}.dot.connected{background:var(--ok)}.dot.unreachable,.dot.blocked{background:var(--error)}.dot.unknown,.dot.probing{background:var(--dim)}.qr{width:100%;max-width:220px;align-self:center;background:#fff;padding:10px;border-radius:8px}
