:root{--mesh-brand: #4776ff;--mesh-brand-dark: #3a5bc7;--mesh-bg: #f4f6fb;--mesh-surface: #ffffff;--mesh-border: #dfe6f1;--mesh-text: #17233d;--mesh-text-secondary: #64748b;--mesh-text-muted: #7b8ba5;--mesh-terminal-bg: #0b1524;--mesh-terminal-text: #a9c5e0;--mesh-accent: #ffca72;--mesh-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;--mesh-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace}@media(prefers-color-scheme:dark){:root{--mesh-bg: #0f1724;--mesh-surface: #151f2d;--mesh-border: #2a3a4d;--mesh-text: #f0f8fb;--mesh-text-secondary: #8ea6b5;--mesh-text-muted: #71899a;--mesh-terminal-bg: #08111c;--mesh-terminal-text: #8ea6b5}}*{box-sizing:border-box}body{margin:0;min-width:320px;background:var(--mesh-bg);color:var(--mesh-text);font-family:var(--mesh-font-sans);font-synthesis:none;-webkit-font-smoothing:antialiased}main{width:min(1120px,calc(100% - 32px));margin:0 auto;padding:40px 0 64px}header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:28px}header>div:first-child{max-width:640px}.eyebrow{margin:0;color:var(--mesh-brand);font:700 11px/1.4 var(--mesh-font-mono);letter-spacing:.12em;text-transform:uppercase}h1{margin:10px 0 0;font-size:clamp(24px,3vw,34px);font-weight:800;letter-spacing:-.02em;line-height:1.15}.status{flex-shrink:0;padding:7px 14px;border:1px solid var(--mesh-border);border-radius:100px;background:var(--mesh-surface);color:var(--mesh-text-secondary);font-size:12px;font-weight:600;white-space:nowrap}.peer-banner{margin-bottom:20px;padding:12px 18px;border:1px solid #e8d5a0;border-radius:10px;background:#fdf8ec;color:#7a5c13;font-size:13px;line-height:1.5}@media(prefers-color-scheme:dark){.peer-banner{border-color:#5a4a20;background:#ffca7214;color:#e8c97a}}.player-tabs{display:flex;flex-wrap:wrap;gap:4px;padding:4px;margin-bottom:18px;border:1px solid var(--mesh-border);border-radius:12px;background:var(--mesh-surface);max-width:100%}.player-tab{height:34px;padding:0 16px;border:none;border-radius:8px;background:transparent;color:var(--mesh-text-secondary);font-size:13px;font-weight:600;cursor:pointer;transition:all .15s ease;font-family:var(--mesh-font-mono)}.player-tab:hover{color:var(--mesh-brand);background:#4776ff0f}.player-tab-active{background:var(--mesh-brand);color:#fff;box-shadow:0 2px 8px #4776ff4d}.player-tab-active:hover{color:#fff;background:var(--mesh-brand)}.controls{display:grid;grid-template-columns:2fr 1.2fr 1fr auto auto;gap:12px;align-items:end;padding:20px;border:1px solid var(--mesh-border);border-radius:12px;background:var(--mesh-surface);box-shadow:0 4px 16px #1f2a440a}label{display:grid;gap:6px;color:var(--mesh-text-muted);font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}input,select{min-width:0;height:40px;padding:0 12px;border:1px solid var(--mesh-border);border-radius:8px;background:var(--mesh-bg);font:500 13px/1 var(--mesh-font-sans);color:var(--mesh-text);transition:border-color .15s ease,box-shadow .15s ease}input:focus,select:focus{outline:none;border-color:var(--mesh-brand);box-shadow:0 0 0 3px #4776ff1f}button{height:40px;padding:0 18px;border:1px solid var(--mesh-brand);border-radius:8px;background:var(--mesh-brand);color:#fff;font-size:13px;font-weight:700;cursor:pointer;transition:all .15s ease;white-space:nowrap}button:hover:not(:disabled){background:var(--mesh-brand-dark);border-color:var(--mesh-brand-dark);transform:translateY(-1px);box-shadow:0 4px 12px #4776ff40}button:disabled{border-color:var(--mesh-border);background:var(--mesh-border);color:var(--mesh-text-muted);cursor:default;transform:none;box-shadow:none}#simulate{background:transparent;color:var(--mesh-brand)}#simulate:hover:not(:disabled){background:#4776ff14;box-shadow:none}video{display:block;width:100%;aspect-ratio:16 / 9;margin-top:18px;background:#000;border-radius:12px;box-shadow:0 8px 32px #00000026}.metrics{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:18px}.metrics div{display:flex;flex-direction:column;gap:6px;min-width:0;padding:16px 14px;border:1px solid var(--mesh-border);border-radius:10px;background:var(--mesh-surface);transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}.metrics div:hover{transform:translateY(-2px);border-color:var(--mesh-brand);box-shadow:0 6px 18px #4776ff1a}.metrics span{color:var(--mesh-text-muted);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}.metrics strong{overflow:hidden;color:var(--mesh-brand);font:800 20px/1.2 var(--mesh-font-mono);text-overflow:ellipsis;letter-spacing:-.01em}pre{min-height:100px;max-height:200px;overflow:auto;margin:18px 0 0;padding:16px 18px;border:1px solid #1a2a3d;border-radius:12px;background:var(--mesh-terminal-bg);color:var(--mesh-terminal-text);font:12px/1.7 var(--mesh-font-mono);white-space:pre-wrap;word-break:break-all}pre::-webkit-scrollbar{width:6px}pre::-webkit-scrollbar-thumb{background:#2a3a4d;border-radius:3px}@media(max-width:900px){.controls{grid-template-columns:1fr 1fr}.controls label:first-child,.controls label:nth-child(2){grid-column:1 / -1}.metrics{grid-template-columns:repeat(3,1fr)}}@media(max-width:560px){main{padding:24px 0 48px}header{flex-direction:column}.controls{grid-template-columns:1fr}.metrics{grid-template-columns:repeat(2,1fr)}.protocol-tabs{width:100%;justify-content:center}}.capability-strip{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}.cap-badge{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-radius:999px;font-size:12px;font-weight:650;font-family:var(--mesh-font-sans);letter-spacing:.02em;border:1px solid var(--mesh-border);background:var(--mesh-surface);color:var(--mesh-text-muted)}.cap-badge:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--mesh-text-muted)}.cap-badge.cap-on{color:var(--mesh-brand);border-color:#4776ff59;background:#4776ff12}.cap-badge.cap-on:before{background:var(--mesh-brand)}.cap-badge.cap-off{opacity:.65}.cap-badge.cap-off:before{background:#d05a5a}.segment-panel{margin:22px 0;padding:18px 20px;border:1px solid var(--mesh-border);border-radius:14px;background:var(--mesh-surface)}.segment-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;font-size:12px;font-weight:700;color:var(--mesh-text-secondary);font-family:var(--mesh-font-mono);letter-spacing:.04em}.segment-legend{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-family:var(--mesh-font-sans);letter-spacing:0}.dot{display:inline-block;width:8px;height:8px;border-radius:3px;margin-left:8px}.dot-p2p{background:var(--mesh-brand)}.dot-cdn{background:#9fb2c8}.segment-blocks{display:flex;flex-wrap:wrap;gap:5px;min-height:20px}.seg-block{display:inline-block;width:16px;height:22px;border-radius:4px}.seg-p2p{background:var(--mesh-brand)}.seg-cdn{background:#aebdcf}.seg-idle{background:transparent}@media(prefers-color-scheme:dark){.seg-cdn{background:#4a5d75}}