:root { color-scheme: light dark; font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif; color: #202a32; background: #f4f6f7; --panel: #fff; --line: #d9e0e4; --muted: #5f707a; --accent: #086b60; }
* { box-sizing: border-box; }
body { margin: 0; padding: 24px 16px calc(24px + env(safe-area-inset-bottom)); }
main { max-width: 680px; margin: 0 auto; }
h1 { margin: 0 0 12px; font-size: 28px; letter-spacing: -.6px; }
h2 { font-size: 16px; margin: 22px 0 10px; }
p { line-height: 1.6; }
header > p:last-child, details p { color: var(--muted); font-size: 14px; }
.eyebrow { color: var(--accent); font-size: 11px; font-weight: 700; letter-spacing: 1.6px; }
.environment { padding: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
.environment div { margin: 6px 0; }
dt { color: var(--muted); font-size: 12px; }
dd { margin: 4px 0 12px; overflow-wrap: anywhere; font: 13px/1.5 ui-monospace, monospace; }
.actions, .secondary-actions { display: flex; flex-wrap: wrap; gap: 8px; }
button { flex: 1 1 auto; min-height: 46px; padding: 10px 14px; border: 1px solid var(--accent); border-radius: 8px; font: inherit; font-size: 14px; cursor: pointer; background: var(--accent); color: #fff; }
button.secondary { color: inherit; background: var(--panel); border-color: var(--line); }
button:disabled { cursor: wait; opacity: .55; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid #e39735; outline-offset: 3px; }
#status { padding: 10px 0; font-weight: 600; overflow-wrap: anywhere; }
#status[data-state="error"] { color: #c33d35; }
video { width: 100%; max-height: 320px; background: #101719; border-radius: 10px; margin: 0 0 16px; }
a { color: var(--accent); overflow-wrap: anywhere; }
#peer { margin: 18px 0; }
details { padding: 16px 0; border-bottom: 1px solid var(--line); }
summary { cursor: pointer; font-weight: 600; }
ol { padding-left: 22px; font-size: 14px; line-height: 1.7; }
li { margin: 8px 0; }
pre { padding: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; font: 12px/1.7 ui-monospace, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (prefers-color-scheme: dark) { :root { color: #e1e9ed; background: #121b22; --panel: #1c2830; --line: #34434c; --muted: #a7b7bf; --accent: #65cdb6; } button { color: #102d27; } #status[data-state="error"] { color: #ff9187; } }