:root{--color-bg:#0d0d1a;--color-surface:#12122a;--color-surface-hover:#1a1a2e;--color-surface-raised:#1a1a2e;--color-border:#2a2a40;--color-border-strong:#3a3a55;--color-text:#ffffffee;--color-text-secondary:#ffffffdd;--color-text-muted:#aab;--color-text-subtle:#71717a;--color-text-faint:#555570;--color-text-ghost:#555570;--color-primary:#5b3cf5;--color-primary-hover:#4f30e8;--color-primary-light:#a78bfa;--color-primary-muted:#5b3cf520;--color-primary-border:#5b3cf5;--color-primary-ghost:#5b3cf510;--color-success:#22c55e;--color-success-bright:#4ade80;--color-success-muted:rgba(34,197,94,.2);--color-success-glow:rgba(34,197,94,.3);--color-success-border:#1a3a2a;--color-warning:#facc15;--color-warning-muted:rgba(250,204,21,.15);--color-warning-border:rgba(245,158,11,.3);--color-error:#ef4444;--color-error-bright:#f87171;--color-error-muted:rgba(239,68,68,.15);--color-error-border:#3a1a1a;--color-peer-self:rgba(91,60,245,.25);--color-peer-self-border:rgba(91,60,245,.5);--color-peer-other:rgba(34,197,94,.2);--color-peer-other-border:rgba(34,197,94,.25);--color-state-joining:#94a3b8;--color-state-syncing:#facc15;--color-state-ready:#22c55e;--color-toast-bg:#111820;--color-toast-info-border:#1a2a3a;--space-xs:0.25rem;--space-sm:0.5rem;--space-md:0.75rem;--space-lg:1rem;--space-xl:1.5rem;--space-2xl:2rem;--font-body:"Inter",system-ui,-apple-system,sans-serif;--font-mono:"Geist Mono","SF Mono","Fira Code",monospace;--text-xs:11px;--text-sm:12px;--text-base:13px;--text-md:14px;--text-lg:15px;--text-xl:16px;--text-2xl:20px;--text-3xl:24px;--text-4xl:28px;--text-5xl:32px;--radius-sm:6px;--radius-md:8px;--radius-lg:10px;--radius-full:999px;--glow-success:0 0 24px rgba(16,185,129,.3);--shadow-hud:0 4px 12px rgba(0,0,0,.4);--transition-fast:0.15s ease;--transition-normal:0.2s ease;--transition-slow:0.3s ease}*{box-sizing:border-box;padding:0;margin:0}body,html{max-width:100vw;overflow-x:hidden;font-family:var(--font-body);background:var(--color-bg);color:var(--color-text)}a{color:inherit;text-decoration:none}button{cursor:pointer}button,input,select{font-family:inherit}.container{max-width:1200px;margin:0 auto;padding:var(--space-lg)}.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-xl);margin-bottom:var(--space-lg)}.button{background:var(--color-primary);color:#fff;border:none;padding:var(--space-sm) var(--space-lg);border-radius:var(--radius-sm);font-size:var(--text-md);transition:background var(--transition-normal)}.button:hover{background:var(--color-primary-hover)}.button:disabled{background:var(--color-surface-raised);color:var(--color-text-subtle);cursor:not-allowed}.button.secondary{background:var(--color-primary-muted);color:var(--color-text);border:1px solid var(--color-primary-ghost)}.button.secondary:hover{background:var(--color-primary-ghost)}.input{background:var(--color-surface-hover);border:1px solid var(--color-border);color:var(--color-text);padding:var(--space-sm);border-radius:var(--radius-sm);font-size:var(--text-base);width:100%}.input:focus{outline:none;border-color:var(--color-primary)}.select{background:var(--color-surface-hover);border:1px solid var(--color-border);color:var(--color-text);padding:var(--space-sm);border-radius:var(--radius-sm);font-size:var(--text-base);width:100%}.label{display:block;margin-bottom:var(--space-xs);color:var(--color-text-muted)}.hud,.label{font-size:var(--text-sm)}.hud{position:fixed;bottom:var(--space-lg);right:var(--space-lg);background:rgba(0,0,0,.8);border:1px solid var(--color-border-strong);border-radius:var(--radius-md);padding:var(--space-lg);font-family:var(--font-mono);min-width:200px;z-index:1000;cursor:move;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-shadow:var(--shadow-hud)}.hud.dragging{cursor:-webkit-grabbing;cursor:grabbing}.hud-item{display:flex;justify-content:space-between;margin-bottom:.5rem}.hud-label{color:hsla(0,0%,100%,.6)}.hud-value{font-weight:700}.toggle{display:flex;align-items:center;gap:.5rem}.toggle input[type=checkbox]{width:2.5rem;height:1.25rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:hsla(0,0%,100%,.1);border-radius:1rem;position:relative;cursor:pointer;transition:background .2s}.toggle input[type=checkbox]:checked{background:#2563eb}.toggle input[type=checkbox]:after{content:"";position:absolute;top:.125rem;left:.125rem;width:1rem;height:1rem;background:#fff;border-radius:50%;transition:transform .2s}.toggle input[type=checkbox]:checked:after{transform:translateX(1.25rem)}.slider{width:100%;margin:.5rem 0}.slider-container{display:flex;align-items:center;gap:.5rem}.slider-value{min-width:3rem;text-align:right;font-family:monospace}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes performance-fade-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes performance-rec-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.85)}}.performance-mode{max-width:1200px;margin:0 auto;padding:1rem 1rem 4.5rem;display:flex;flex-direction:column;gap:.9rem;min-height:100vh;animation:performance-fade-in .3s ease-out}.performance-peer-badges{display:flex;gap:.5rem;min-height:48px;padding:.35rem .25rem;overflow-x:auto;scrollbar-width:thin;align-items:center}.performance-peer-badge{display:inline-flex;align-items:center;gap:.45rem;padding:.3rem .7rem;background:hsla(0,0%,100%,.05);border:1px solid hsla(0,0%,100%,.1);border-radius:999px;font-size:.85rem;white-space:nowrap;flex-shrink:0}.performance-peer-badge.is-self{outline:1.5px solid hsla(0,0%,100%,.55);outline-offset:1px}.performance-peer-dot{display:inline-block;width:10px;height:10px;border-radius:50%}.performance-peer-name{max-width:14ch;overflow:hidden;text-overflow:ellipsis}.performance-peer-self{color:hsla(0,0%,100%,.55);font-size:.75rem;margin-left:.25rem}.performance-hero{flex:1 1 auto;display:flex;min-height:260px;transition:min-height .25s ease-out}.performance-hero.is-reduced{min-height:180px;flex:0 1 auto}.performance-hero>:first-child{flex:1 1;margin-bottom:0}.performance-keymap{background:hsla(0,0%,100%,.04);border:1px solid hsla(0,0%,100%,.08);border-radius:8px;padding:.6rem .9rem;font-size:.8rem;color:hsla(0,0%,100%,.85);display:flex;flex-direction:column;gap:.3rem}.performance-keymap-row{display:flex;align-items:center;gap:.75rem;font-family:monospace;flex-wrap:wrap}.performance-keymap-label{color:hsla(0,0%,100%,.55);font-family:inherit;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;min-width:3.5rem}.performance-keymap-keys,.performance-keymap-notes{letter-spacing:.12em}.performance-keymap-notes{color:hsla(0,0%,100%,.6)}.performance-keymap-arrow{color:hsla(0,0%,100%,.4)}.performance-keymap-footer .performance-keymap-value{font-family:monospace;font-size:.9rem;color:#fff;font-weight:700}.performance-keymap-hint{color:hsla(0,0%,100%,.5);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:.75rem}.performance-status-bar{position:fixed;bottom:0;left:0;right:0;height:44px;display:flex;align-items:center;gap:.75rem;padding:0 1rem;background:rgba(0,0,0,.85);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-top:1px solid hsla(0,0%,100%,.08);z-index:500}.performance-status-pill{display:inline-flex;align-items:center;gap:.4rem;font-size:.85rem}.performance-status-dot{width:10px;height:10px;border-radius:50%;display:inline-block}.performance-status-label{color:hsla(0,0%,100%,.9)}.performance-status-separator{width:1px;height:18px;background:hsla(0,0%,100%,.15)}.performance-status-spacer{flex:1 1}.performance-status-toggle{background:hsla(0,0%,100%,.08);color:hsla(0,0%,100%,.9);border:1px solid hsla(0,0%,100%,.15);padding:.3rem .75rem;border-radius:6px;font-size:.82rem;transition:background .15s}.performance-status-toggle:hover{background:hsla(0,0%,100%,.14)}.performance-capture-indicator{display:inline-flex;align-items:center;gap:.4rem;font-size:.82rem;color:hsla(0,0%,100%,.85)}.performance-capture-dot{width:8px;height:8px;border-radius:50%;background:hsla(0,0%,100%,.3)}.performance-capture-dot.is-recording{background:#ef4444;animation:performance-rec-pulse 1.4s ease-in-out infinite}.performance-capture-label{font-family:monospace;letter-spacing:.04em}.dashboard-panel{background:hsla(0,0%,100%,.04);border:1px solid hsla(0,0%,100%,.08);border-radius:10px;overflow:hidden;max-height:65vh;overflow-y:auto;display:flex;flex-direction:column;animation:performance-fade-in .25s ease-out}.dashboard-section{border-bottom:1px solid hsla(0,0%,100%,.06)}.dashboard-section:last-child{border-bottom:none}.dashboard-section-header{display:flex;align-items:center;gap:.5rem;width:100%;padding:.75rem 1rem;background:transparent;border:none;color:#fff;font-size:.9rem;font-weight:500;text-align:left}.dashboard-section-header:hover{background:hsla(0,0%,100%,.04)}.dashboard-section-caret{color:hsla(0,0%,100%,.5);font-size:.75rem;width:1rem;text-align:center}.dashboard-section-body{padding:.25rem 1rem 1rem}.dashboard-section-body>.card{margin-bottom:0;background:hsla(0,0%,100%,.02)}.dashboard-latency-readout{display:grid;grid-template-columns:1fr 1fr;grid-gap:.4rem 1.25rem;gap:.4rem 1.25rem;font-family:monospace;font-size:.85rem;padding:.25rem .1rem}.dashboard-latency-row{display:flex;justify-content:space-between}.dashboard-latency-label{color:hsla(0,0%,100%,.55)}.dashboard-latency-value{color:#fff;font-weight:700}@media (max-width:768px){.performance-mode{padding:.75rem .75rem 4rem;gap:.75rem}.performance-hero{min-height:220px}.performance-hero.is-reduced{min-height:150px}}@media (max-width:480px){.performance-peer-name{display:none}.performance-peer-badge{padding:.35rem .5rem}.performance-peer-badge.is-self:after{content:"you";font-size:.65rem;color:hsla(0,0%,100%,.55);margin-left:.25rem}.performance-keymap{font-size:.72rem}.performance-status-bar{gap:.5rem;padding:0 .6rem}.performance-status-toggle{font-size:.75rem;padding:.25rem .55rem}.dashboard-latency-readout{grid-template-columns:1fr}}