:root{--color-paper: oklch(12% .015 150);--color-surface: oklch(16% .018 150);--color-elevated: oklch(20% .02 150);--color-ink: oklch(92% .02 145);--color-muted: oklch(68% .02 145);--color-faint: oklch(45% .015 145);--color-rule: oklch(28% .02 150);--color-accent: oklch(78% .18 145);--color-focus: oklch(78% .18 145);--color-positive: oklch(78% .18 145);--color-negative: oklch(65% .18 25);--color-warning: oklch(78% .12 85);--font-display: "IBM Plex Mono", ui-monospace, monospace;--font-body: "IBM Plex Sans", system-ui, sans-serif;--font-mono: "IBM Plex Mono", ui-monospace, monospace;--space-4: .25rem;--space-8: .5rem;--space-12: .75rem;--space-16: 1rem;--space-24: 1.5rem;--space-32: 2rem;--space-48: 3rem;--space-64: 4rem;--text-xs: .75rem;--text-sm: .8125rem;--text-base: .9375rem;--text-lg: 1.125rem;--text-xl: 1.375rem;--text-2xl: 1.75rem;--text-3xl: clamp(1.75rem, 2vw + 1rem, 2.25rem);--ease-out: cubic-bezier(.16, 1, .3, 1);--ease-in-out: cubic-bezier(.45, 0, .55, 1);--dur-fast: .14s;--dur-normal: .24s;--radius-sm: 4px;--radius-md: 8px;--radius-pill: 999px;--rule: 1px solid var(--color-rule)}html,body{overflow-x:clip}*{box-sizing:border-box}body{font-family:var(--font-body);font-size:var(--text-base);line-height:1.55;color:var(--color-ink);background:radial-gradient(1200px 500px at 10% -10%,oklch(20% .04 145 / .35),transparent 60%),var(--color-paper);max-width:980px;margin:0 auto;padding:var(--space-32) var(--space-24) var(--space-64);-webkit-font-smoothing:antialiased;min-width:0}h1,h2,h3{font-family:var(--font-display);letter-spacing:-.02em;text-wrap:balance;overflow-wrap:anywhere;min-width:0}h1{font-size:var(--text-3xl);font-weight:600;margin:0 0 var(--space-8)}h2{font-size:var(--text-xl);font-weight:500;margin:var(--space-32) 0 var(--space-12)}p{color:var(--color-muted);margin:0 0 var(--space-16);max-width:65ch}a{color:var(--color-accent);text-decoration:none}a:hover{color:var(--color-ink)}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}code{font-family:var(--font-mono);font-size:.85em;background:var(--color-surface);border:var(--rule);padding:.1em .35em;border-radius:3px;color:var(--color-accent)}button{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:500;padding:var(--space-8) var(--space-12);border-radius:var(--radius-sm);border:var(--rule);background:var(--color-surface);color:var(--color-ink);cursor:pointer;transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}button:hover{background:var(--color-elevated);border-color:var(--color-faint)}button:active{transform:translateY(1px)}button:disabled{opacity:.35;cursor:not-allowed;transform:none}input,select{font-family:var(--font-mono);font-size:var(--text-sm);padding:var(--space-8) var(--space-12);border-radius:var(--radius-sm);border:var(--rule);background:var(--color-surface);color:var(--color-ink)}.workbench-header{display:grid;gap:var(--space-8);margin-bottom:var(--space-24);padding-bottom:var(--space-16);border-bottom:var(--rule)}.workbench-kicker{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-accent);text-transform:uppercase;letter-spacing:.08em;margin:0}.app-nav{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4);margin-bottom:var(--space-32);padding:var(--space-4);background:var(--color-surface);border:var(--rule);border-radius:var(--radius-pill);width:fit-content;max-width:100%}.app-nav-brand{font-family:var(--font-display);font-size:var(--text-sm);font-weight:600;color:var(--color-muted);padding:var(--space-4) var(--space-12);margin-right:var(--space-4);border-right:var(--rule)}.app-nav a{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-muted);padding:var(--space-4) var(--space-12);border-radius:var(--radius-pill);white-space:nowrap}.app-nav a.active{color:var(--color-ink);background:var(--color-elevated)}.nav-auth{margin-left:auto}.nav-auth-btn{background:transparent;border:none;color:var(--color-muted)}.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-12);margin:var(--space-16) 0 var(--space-24)}.metric-card{background:var(--color-surface);border:var(--rule);border-radius:var(--radius-md);padding:var(--space-16);min-width:0}.metric-label{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-faint);text-transform:uppercase;letter-spacing:.06em;margin:0 0 var(--space-8)}.metric-value{font-family:var(--font-mono);font-size:var(--text-lg);font-variant-numeric:tabular-nums;margin:0;overflow-wrap:anywhere}.metric-value.pos{color:var(--color-positive)}.metric-value.neg{color:var(--color-negative)}.panel{background:var(--color-surface);border:var(--rule);border-radius:var(--radius-md);padding:var(--space-16);margin-bottom:var(--space-16)}.panel-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--space-8);margin-bottom:var(--space-12)}.panel-title{font-family:var(--font-display);font-size:var(--text-base);margin:0}.actions{display:flex;flex-wrap:wrap;gap:var(--space-8);margin-bottom:var(--space-24)}.status{font-family:var(--font-mono);font-size:var(--text-xs);padding:2px 8px;border-radius:var(--radius-pill)}.status.connected{color:var(--color-positive);background:#61d46a1a}.status.disconnected{color:var(--color-faint);background:var(--color-elevated)}.status.warn{color:var(--color-warning);background:#dbb1551a}.error-msg{color:var(--color-negative);font-family:var(--font-mono);font-size:var(--text-xs)}.table-wrap{overflow-x:auto;border:var(--rule);border-radius:var(--radius-md)}table.data{width:100%;border-collapse:collapse;min-width:640px}table.data th,table.data td{padding:var(--space-8) var(--space-12);text-align:left;border-bottom:var(--rule);font-family:var(--font-mono);font-size:var(--text-xs);font-variant-numeric:tabular-nums}table.data th{color:var(--color-faint);text-transform:uppercase;letter-spacing:.04em;font-weight:500;background:var(--color-elevated)}table.data .pos{color:var(--color-positive)}table.data .neg{color:var(--color-negative)}.chart-wrap{width:100%;min-width:0}.chart-svg{width:100%;height:auto;display:block}.chart-grid line{stroke:var(--color-rule);stroke-width:1}.chart-line{fill:none;stroke:var(--color-accent);stroke-width:2}.chart-area{fill:#61d46a1f}.chart-bar.pos{fill:var(--color-positive)}.chart-bar.neg{fill:var(--color-negative)}.chart-axis{fill:var(--color-faint);font-family:var(--font-mono);font-size:10px}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000008c;display:flex;align-items:center;justify-content:center;z-index:50;padding:var(--space-24)}.modal{width:min(420px,100%);background:var(--color-surface);border:var(--rule);border-radius:var(--radius-md);padding:var(--space-24)}.modal h2{margin-top:0}.modal input{width:100%;margin-bottom:var(--space-12)}.stats-inline{display:flex;flex-wrap:wrap;gap:var(--space-8) var(--space-24);font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-muted);margin-bottom:var(--space-16)}@media(max-width:768px){body{padding:var(--space-24) var(--space-16) var(--space-48)}.metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.app-nav{width:100%}.app-nav-brand{border-right:none}}@media(max-width:414px){.metric-grid{grid-template-columns:minmax(0,1fr)}}@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}