* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 32px; }
body { margin: 0; color: var(--text); background: var(--bg); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--accent); text-underline-offset: 5px; }
svg { width: 22px; height: 22px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { line-height: 1.18; letter-spacing: -.035em; }
h1 { font-size: clamp(40px, 4.8vw, 64px); font-weight: 700; }
h1 span { color: var(--accent); }
h2 { font-size: clamp(28px, 3.1vw, 40px); font-weight: 600; }
h3 { font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
p { color: var(--muted); }
:is(a, button, summary, [tabindex]):focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; border-radius: 4px; }
main:focus { outline: none; }
.wrap { width: min(1160px, calc(100% - 64px)); margin-inline: auto; }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 25px; border-bottom: 1px solid var(--border); }
.header-brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.brand { display: inline-flex; align-items: center; min-height: 44px; gap: 10px; color: var(--text); text-decoration: none; font-size: 23px; line-height: 1.2; font-weight: 600; letter-spacing: -.035em; }
.site-header nav, .site-footer nav { display: flex; align-items: center; gap: 28px; }
.site-header nav > a:not(.button), .site-footer nav > a { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 600; }
.site-header nav > a:hover, .site-footer nav > a:hover, .site-header nav > a[aria-current] { color: var(--text); }
.site-header nav > a[aria-current] { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 8px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 48px; padding: 12px 22px; color: var(--text); border: 1px solid var(--border); border-radius: 8px; text-decoration: none; font-size: 15px; line-height: 1.4; font-weight: 600; }
.button.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.button:disabled { opacity: var(--disabled-button-opacity); cursor: not-allowed; }
.button.primary:where(:not(:disabled)):hover { background: var(--brand-hover); border-color: var(--brand-hover); }
.button.primary:where(:not(:disabled)):active { background: var(--brand-pressed); }
.button.secondary { background: var(--surface); }
.button.secondary:where(:not(:disabled)):hover { background: var(--control); }
.button.secondary:where(:not(:disabled)):active { background: var(--call-hover); }
.button.nav-connect { min-height: 44px; padding: 10px 18px; font-size: 14px; }
.connect-pair {
    --cord-gap: 32px;
    --cord-travel: 0px;
    --connect-duration: 300ms;
    --connect-spark-animation: none;
    --connect-electric-animation: none;
    --connect-branch-animation: none;
    --connect-glow-opacity: 0;
    --connect-glow-delay: 0ms;
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 10fr) minmax(0, 3fr);
    align-items: center;
    gap: var(--cord-gap);
    width: min(100%, 512px);
}
.connect-cord { width: 100%; height: auto; pointer-events: none; user-select: none; transition: transform var(--connect-duration) cubic-bezier(.2, .8, .2, 1); }
.connect-cord:first-child { transform: translateX(var(--cord-travel)); }
.connect-cord:last-child { transform: translateX(calc(-1 * var(--cord-travel))); }
/* Each shared SVG has 10/112 of its width beyond the inward-facing plug tip.
   Close that space and the grid gap, tucking the tip 2px behind the button. */
.connect-pair:has(> .connect-cta:focus-visible) {
    --cord-travel: calc(var(--cord-gap) + 8.929% + 2px);
    --connect-spark-animation: connect-spark 240ms ease-out var(--connect-duration) both;
    --connect-electric-animation: electric-wave 840ms linear var(--connect-duration) infinite;
    --connect-branch-animation: electric-branches 1680ms linear var(--connect-duration) infinite;
    --connect-glow-opacity: 1;
    --connect-glow-delay: var(--connect-duration);
}
@media (hover: hover) {
    .connect-pair:has(> .connect-cta:hover) {
        --cord-travel: calc(var(--cord-gap) + 8.929% + 2px);
        --connect-spark-animation: connect-spark 240ms ease-out var(--connect-duration) both;
        --connect-electric-animation: electric-wave 840ms linear var(--connect-duration) infinite;
        --connect-branch-animation: electric-branches 1680ms linear var(--connect-duration) infinite;
        --connect-glow-opacity: 1;
        --connect-glow-delay: var(--connect-duration);
    }
}
.button.connect-cta {
    position: relative;
    z-index: 1;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    min-height: 72px;
    padding: 16px clamp(12px, 1.8vw, 24px);
    font-size: clamp(20px, 1.6vw, 22px);
    font-weight: 700;
    border-color: color-mix(in srgb, var(--accent) 50%, var(--brand));
    box-shadow: 0 8px 28px color-mix(in srgb, var(--brand) 28%, transparent), inset 0 1px 0 color-mix(in srgb, var(--text) 14%, transparent);
}
.button.connect-cta:hover { border-color: var(--accent); box-shadow: 0 10px 32px color-mix(in srgb, var(--brand) 42%, transparent), inset 0 1px 0 color-mix(in srgb, var(--text) 20%, transparent); }
.button.connect-cta:active { border-color: var(--brand-pressed); box-shadow: inset 0 2px 5px color-mix(in srgb, var(--bg) 24%, transparent); }
.button.connect-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: 0 0 24px color-mix(in srgb, var(--brand) 40%, transparent), inset 0 0 18px color-mix(in srgb, var(--accent) 18%, transparent);
    opacity: var(--connect-glow-opacity);
    transition: opacity 200ms ease var(--connect-glow-delay);
}
.connect-spark {
    --spark-direction: 1;
    position: absolute;
    top: 50%;
    left: 0;
    width: 32px;
    height: 40px;
    pointer-events: none;
    color: var(--accent);
    stroke-width: 1.5;
    filter: drop-shadow(0 0 3px var(--brand-hover));
    opacity: 0;
    transform: translate(-50%, -50%) scaleX(var(--spark-direction)) scale(.55);
    animation: var(--connect-spark-animation);
}
.connect-spark-right { left: 100%; --spark-direction: -1; }
.connect-label { position: relative; z-index: 1; }
.connect-electricity {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 48px;
    transform: translateY(-50%);
    pointer-events: none;
    color: color-mix(in srgb, var(--text) 85%, var(--accent));
    opacity: var(--connect-glow-opacity);
    transition: opacity 200ms ease var(--connect-glow-delay);
    /* The arc crosses the button's centerline, fading behind the readable label. */
    mask-image: linear-gradient(to right, #000 calc(50% - 72px), transparent calc(50% - 56px), transparent calc(50% + 56px), #000 calc(50% + 72px));
    filter: drop-shadow(0 0 2px color-mix(in srgb, var(--accent) 40%, transparent));
}
.connect-electricity path { vector-effect: non-scaling-stroke; }
.electric-arc { stroke-width: 1.2; animation: var(--connect-electric-animation); }
.electric-core { opacity: .5525; }
.electric-echo { color: var(--accent); stroke-width: .8; opacity: .26; animation-duration: 1100ms; animation-direction: reverse; }
.electric-branch { color: var(--accent); stroke-width: .65; opacity: .26; animation: var(--connect-branch-animation); }
/* Continuously change the jagged geometry across the entire arc. */
@keyframes electric-wave {
    0%, 100% { d: path('M0 36L10 35L17 30L23 38L27 27L33 41L42 31L49 37L54 22L61 41L68 28L76 39L86 31L95 37L104 30L115 39L126 31L140 36L154 39L164 31L176 39L185 29L194 43L203 32L211 39L219 23L226 37L232 30L241 43L248 31L255 40L262 32L270 37L280 36'); }
    14% { d: path('M0 36L10 38L17 42L23 33L27 45L33 30L42 40L49 28L54 42L61 32L68 48L76 34L86 40L95 30L104 39L115 32L126 39L140 36L154 32L164 42L176 30L185 44L194 32L203 45L211 29L219 41L226 26L232 40L241 30L248 44L255 33L262 41L270 35L280 36'); }
    28% { d: path('M0 36L10 33L17 39L23 25L27 37L33 29L42 46L49 34L54 40L61 24L68 36L76 29L86 42L95 33L104 41L115 34L126 38L140 36L154 40L164 32L176 43L185 34L194 24L203 38L211 31L219 47L226 34L232 43L241 26L248 38L255 30L262 40L270 34L280 36'); }
    43% { d: path('M0 36L10 39L17 32L23 42L27 33L33 47L42 34L49 41L54 30L61 44L68 32L76 43L86 32L95 41L104 34L115 40L126 33L140 36L154 34L164 40L176 33L185 42L194 29L203 44L211 34L219 25L226 40L232 31L241 46L248 35L255 44L262 33L270 38L280 36'); }
    57% { d: path('M0 36L10 34L17 28L23 40L27 30L33 38L42 24L49 37L54 29L61 40L68 27L76 38L86 29L95 39L104 31L115 38L126 32L140 36L154 39L164 31L176 40L185 28L194 40L203 30L211 44L219 32L226 42L232 27L241 38L248 30L255 41L262 29L270 35L280 36'); }
    71% { d: path('M0 36L10 38L17 44L23 34L27 47L33 36L42 42L49 30L54 43L61 34L68 45L76 32L86 40L95 30L104 38L115 32L126 39L140 36L154 33L164 39L176 31L185 41L194 33L203 47L211 35L219 42L226 31L232 44L241 33L248 46L255 32L262 41L270 37L280 36'); }
    86% { d: path('M0 36L10 34L17 39L23 29L27 38L33 25L42 36L49 27L54 39L61 29L68 38L76 25L86 36L95 31L104 40L115 33L126 38L140 36L154 39L164 33L176 41L185 30L194 42L203 33L211 23L219 36L226 28L232 39L241 24L248 37L255 29L262 39L270 35L280 36'); }
}
@keyframes electric-branches {
    0%, 100% { d: path('M27 27L35 22L33 15L42 18L47 10M61 41L66 49L74 46L80 58M219 23L212 17L215 10L204 14M241 43L237 50L244 55L232 60'); }
    35% { d: path('M27 36L21 28L24 21L16 16L20 10M61 36L58 46L66 49L63 58M219 36L225 28L222 18L231 13M241 36L249 44L246 52L256 57'); }
    70% { d: path('M27 33L35 26L32 20L39 14L36 9M61 40L68 44L65 52L74 57M219 33L211 28L216 22L208 13M241 39L236 46L239 54L230 58'); }
}
@keyframes connect-spark {
    0% { opacity: 0; transform: translate(-50%, -50%) scaleX(var(--spark-direction)) scale(.55); }
    20% { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -50%) scaleX(var(--spark-direction)) scale(1.15); }
}
.actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.eyebrow { margin-bottom: 18px; font-size: 12px; line-height: 1.5; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.lead { max-width: 550px; margin-top: 24px; font-size: 18px; line-height: 1.75; }
.hero {
    --hero-copy-gap: 24px;
    --hero-action-gap: 60px;
    --hero-link-gap: 24px;
    --hero-padding: 30px;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    align-items: center;
    gap: 64px;
    padding-block: var(--hero-padding);
}
.hero .eyebrow { margin-bottom: var(--hero-copy-gap); }
.hero h1 { line-height: 1.1; }
.hero .lead { margin-top: var(--hero-copy-gap); }
.hero-actions { display: flex; flex-direction: column; align-items: center; width: min(100%, 552px); margin-top: var(--hero-action-gap); gap: var(--hero-link-gap); }
.hero-secondary { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: 24px; row-gap: 8px; }
.promo-trigger { color: var(--text); }
.promo-play { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--information-border); border-radius: 50%; color: var(--accent); background: var(--surface); }
.promo-play svg { width: 16px; height: 16px; fill: currentColor; stroke-width: 0; }
.promo-trigger:hover .promo-play { background: var(--brand); border-color: var(--accent); color: #fff; }

/* The same dialog tokens, header and close presentation used by the app;
   the wider content area accommodates a 16:9 film instead of a form. */
html.promo-open { overflow: hidden; scrollbar-gutter: stable; }
.promo-dialog:not([open]) { display: none; }
.promo-dialog { width: min(960px, calc(100% - 2 * var(--dialog-clearance))); max-width: none; max-height: calc(100dvh - 2 * var(--dialog-clearance)); margin: auto; padding: var(--dialog-padding) var(--dialog-padding) var(--dialog-padding-bottom); overflow: auto; overscroll-behavior: contain; border: 1px solid var(--border); border-radius: var(--dialog-radius); background: var(--surface); color: var(--text); font: inherit; font-size: 14px; line-height: 1.5; box-shadow: 0 16px 48px #0008; }
.promo-dialog::backdrop { background: #000b; }
.promo-dialog .app-dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: var(--dialog-title-gap); }
.promo-dialog h2 { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.3; }
.promo-dialog .app-dialog-header p { margin-top: 6px; font-size: 14px; }
.promo-dialog .app-dialog-close { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; padding: 14px; border: 0; border-radius: 8px; color: var(--muted); background: transparent; cursor: pointer; }
.promo-dialog .app-dialog-close svg { width: 16px; height: 16px; }
.promo-dialog .app-dialog-close:hover { background: var(--call-hover); color: var(--text); }
.promo-dialog .app-dialog-close:active { background: var(--call-pressed); }
.promo-stage { position: relative; overflow: hidden; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); }
.promo-video { display: block; width: 100%; height: auto; max-height: max(140px, calc(100dvh - 280px)); aspect-ratio: 16 / 9; object-fit: contain; background: var(--bg); }
.promo-status:not(:empty) { margin-top: 10px; }
.promo-error { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; padding: 16px; background: var(--bg); text-align: center; }
.promo-error[hidden] { display: none; }
.promo-error > div { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 16px; }
.promo-error p { color: var(--text); }
.promo-error button { cursor: pointer; }
.promo-next { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: var(--dialog-footer-gap); }
.promo-next strong { font-size: 16px; font-weight: 600; }
.promo-next p { margin-top: 4px; font-size: 13px; }
.promo-next-actions { display: flex; flex: none; align-items: center; }
.promo-next-actions .text-link { font-size: 14px; }
@media (max-width: 640px) {
    .promo-next { align-items: stretch; flex-direction: column; }
}
@media (max-height: 560px) and (min-width: 641px) {
    .promo-dialog .app-dialog-header { margin-bottom: 12px; }
    .promo-dialog .app-dialog-header p, .promo-next > div:first-child { display: none; }
    .promo-video { max-height: 45dvh; }
    .promo-next { justify-content: flex-end; margin-top: 12px; }
}
.sound-controls { display: flex; align-items: center; gap: 4px; }
.text-link.sound-preview { padding: 0 4px; border: 0; background: transparent; color: var(--accent); font-family: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; }
.button.sound-toggle {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    min-height: 44px;
    height: 44px;
    width: 44px;
    padding: 0;
    color: var(--muted);
    background: transparent;
    border-color: transparent;
    cursor: pointer;
}
.button.sound-toggle[aria-pressed="true"] { color: var(--accent); }
.button.sound-toggle:is(:hover, :active) { color: var(--text); }
.sound-toggle svg { display: block; }
.sound-toggle[hidden], .sound-preview[hidden], .sound-toggle .sound-on, .sound-toggle[aria-pressed="true"] .sound-off { display: none; }
.sound-toggle[aria-pressed="true"] .sound-on { display: initial; }

.room-preview { margin: 0; max-width: 454px; justify-self: end; width: 100%; padding: 5px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--card-radius); box-shadow: 0 20px 70px #0005; }
.preview-chrome { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 4px 12px 9px; color: var(--muted); font-size: 11px; }
.window-marks { margin-left: auto; white-space: nowrap; }
.room-preview-app { container-type: inline-size; width: 100%; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); overflow: hidden; }
/* Scale the illustrative app as a whole; its pictured controls are not interactive. */
.preview-screen { --preview-unit: calc(100cqw / 520); display: flex; flex-direction: column; aspect-ratio: 520 / 640; padding: calc(24 * var(--preview-unit)) calc(28 * var(--preview-unit)) calc(16 * var(--preview-unit)); font-size: calc(13 * var(--preview-unit)); line-height: 1.55; user-select: none; }
.preview-header { display: flex; align-items: center; justify-content: space-between; gap: calc(16 * var(--preview-unit)); padding-bottom: calc(24 * var(--preview-unit)); border-bottom: 1px solid var(--border); }
.preview-brand { display: flex; align-items: center; gap: calc(10 * var(--preview-unit)); }
.preview-brand > img { width: calc(38 * var(--preview-unit)); }
.preview-brand > div { display: grid; gap: calc(2 * var(--preview-unit)); }
.preview-brand strong { font-size: calc(24 * var(--preview-unit)); line-height: 1.2; letter-spacing: -.035em; font-weight: 600; }
.preview-brand span { color: var(--muted); font-size: calc(12 * var(--preview-unit)); white-space: nowrap; }
.preview-friends { display: flex; align-items: center; gap: calc(8 * var(--preview-unit)); font-weight: 600; white-space: nowrap; }
.preview-icon { display: block; flex: none; width: calc(24 * var(--preview-unit)); height: calc(24 * var(--preview-unit)); background: currentColor; mask: var(--preview-icon) center / contain no-repeat; }
.preview-icon-friends { --preview-icon: url('/assets/icons/voice_friends.svg'); }
.preview-icon-copy { --preview-icon: url('/assets/icons/voice_copy.svg'); }
.preview-icon-mic { --preview-icon: url('/assets/icons/voice_mic.svg'); }
.preview-icon-chevron_down { --preview-icon: url('/assets/icons/voice_chevron_down.svg'); }
.preview-icon-headphones { --preview-icon: url('/assets/icons/voice_headphones.svg'); }
.preview-icon-disconnect { --preview-icon: url('/assets/icons/voice_disconnect.svg'); }
.preview-icon-settings { --preview-icon: url('/assets/icons/voice_settings.svg'); }
.preview-intro { margin-top: calc(28 * var(--preview-unit)); }
.preview-intro > strong { display: block; font-size: calc(32 * var(--preview-unit)); line-height: 1.2; letter-spacing: -.04em; }
.preview-intro > p { margin-top: calc(6 * var(--preview-unit)); }
.preview-room { margin-top: calc(20 * var(--preview-unit)); padding: calc(20 * var(--preview-unit)); border: 1px solid var(--border); border-radius: calc(14 * var(--preview-unit)); background: var(--surface); }
.preview-room-header { display: flex; align-items: flex-start; justify-content: space-between; gap: calc(12 * var(--preview-unit)); }
.preview-room-header strong { display: block; font-size: calc(24 * var(--preview-unit)); line-height: 1.25; font-weight: 600; letter-spacing: -.025em; }
.preview-room-header p { margin-top: calc(6 * var(--preview-unit)); }
.preview-edit { display: flex; align-items: center; flex: none; min-height: calc(44 * var(--preview-unit)); color: var(--muted); font-weight: 600; }
.preview-code { display: grid; gap: calc(10 * var(--preview-unit)); margin-top: calc(16 * var(--preview-unit)); padding-bottom: calc(20 * var(--preview-unit)); border-bottom: 1px solid var(--border); }
.preview-code > span { font-size: calc(14 * var(--preview-unit)); font-weight: 600; }
.preview-code-control { display: grid; grid-template-columns: 2fr 1fr; min-height: calc(48 * var(--preview-unit)); border: 1px solid var(--border); border-radius: calc(8 * var(--preview-unit)); overflow: hidden; background: var(--control); }
.preview-code-control > strong { display: grid; place-items: center; font-size: calc(24 * var(--preview-unit)); line-height: 1.25; font-variant-numeric: tabular-nums; letter-spacing: .22em; padding-left: .22em; }
.preview-copy { display: flex; align-items: center; justify-content: center; gap: calc(8 * var(--preview-unit)); font-size: calc(14 * var(--preview-unit)); font-weight: 600; background: var(--brand); color: #fff; }
.preview-copy .preview-icon { width: calc(20 * var(--preview-unit)); height: calc(20 * var(--preview-unit)); }
.preview-waiting { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr) minmax(0, 1fr); align-items: center; min-height: calc(48 * var(--preview-unit)); gap: calc(8 * var(--preview-unit)); margin-top: calc(20 * var(--preview-unit)); }
.preview-cord { width: 100%; max-width: calc(84 * var(--preview-unit)); grid-row: 1; }
.preview-cord:first-child { grid-column: 1; justify-self: end; }
.preview-cord:last-child { grid-column: 3; justify-self: start; }
.preview-waiting-label { grid-area: 1 / 2; display: grid; grid-template-columns: minmax(calc(15em / 13), 1fr) max-content minmax(calc(15em / 13), 1fr); align-items: center; margin-inline: calc(-15em / 13); container-type: inline-size; }
.preview-waiting-label > strong { grid-area: 1 / 2; padding-inline: .4em; font-size: calc(20em / 13); font-weight: 600; white-space: nowrap; }
.preview-wave { position: relative; grid-row: 1; height: calc(48em / 13); overflow: hidden; pointer-events: none; opacity: .65; }
.preview-wave-left { grid-column: 1; mask-image: linear-gradient(to right, #000 calc(100% - 16em / 13), transparent); }
.preview-wave-right { grid-column: 3; mask-image: linear-gradient(to left, #000 calc(100% - 16em / 13), transparent); }
.preview-wave img { position: absolute; top: 0; width: 100cqw; max-width: none; height: 100%; }
.preview-wave-left img { left: 0; }
.preview-wave-right img { right: 0; }
.preview-dock { display: flex; align-items: center; gap: calc(8 * var(--preview-unit)); margin-top: auto; padding: calc(8 * var(--preview-unit)); border: 1px solid var(--border); border-radius: calc(12 * var(--preview-unit)); background: var(--surface); }
.preview-profile { display: flex; flex: 1; min-width: 0; align-items: center; gap: calc(10 * var(--preview-unit)); padding: calc(4 * var(--preview-unit)); }
.preview-avatar { position: relative; display: grid; place-items: center; flex: none; width: calc(40 * var(--preview-unit)); height: calc(40 * var(--preview-unit)); border-radius: 50%; background: var(--call-pressed); color: var(--accent); font-size: calc(18 * var(--preview-unit)); font-weight: 600; }
.preview-avatar i { position: absolute; right: -1px; bottom: -1px; width: calc(13 * var(--preview-unit)); height: calc(13 * var(--preview-unit)); border: calc(3 * var(--preview-unit)) solid var(--surface); border-radius: 50%; background: var(--holycord-presence); }
.preview-identity { display: grid; min-width: 0; gap: calc(1 * var(--preview-unit)); }
.preview-identity strong { font-size: calc(14 * var(--preview-unit)); font-weight: 600; }
.preview-identity > span { color: var(--muted); font-size: calc(12 * var(--preview-unit)); }
.preview-identity > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.preview-controls { display: flex; align-items: center; gap: calc(8 * var(--preview-unit)); }
.preview-device { display: flex; }
.preview-controls > span:not(.preview-device), .preview-device > span { display: grid; place-items: center; width: calc(44 * var(--preview-unit)); height: calc(44 * var(--preview-unit)); }
.preview-disconnect { background: var(--danger); border-radius: calc(8 * var(--preview-unit)); }
.preview-controls .preview-icon-chevron_down { width: calc(16 * var(--preview-unit)); height: calc(16 * var(--preview-unit)); }
.preview-controls .preview-icon-settings { width: calc(18 * var(--preview-unit)); height: calc(18 * var(--preview-unit)); }
.room-preview figcaption { margin-top: 6px; text-align: center; color: var(--muted); font-size: 11px; }
.section-heading { max-width: 720px; margin-bottom: 36px; }
.section-heading p:not(.eyebrow) { margin-top: 16px; }
.section-copy > p:not(.eyebrow) { margin-top: 22px; }
.feature-list { display: grid; gap: 24px; padding: 0; list-style: none; margin-block: 28px; }
.feature-list h3 { margin-bottom: 9px; font-size: 17px; }
.feature-list p { font-size: 15px; }
.text-link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; font-weight: 600; text-decoration: none; }
.text-link:hover { text-decoration: underline; }
.availability { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; font-size: 13px; }
.availability-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); }
.replay-illustration { margin: 0; min-width: 0; border: 1px solid var(--border); border-radius: var(--card-radius); background: var(--surface); padding: 28px; }
.replay-top { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.replay-top svg { color: var(--accent); }
.capture-status { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; color: var(--holycord-success); font-size: 12px; }
.capture-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.game-scene { position: relative; isolation: isolate; height: 208px; margin-top: 24px; overflow: hidden; border: 1px solid var(--border); border-radius: 8px; background: radial-gradient(ellipse at 70% 25%, var(--call-pressed), var(--bg) 75%); }
.game-landscape { position: absolute; z-index: -1; width: 100%; height: 100%; inset: 0; stroke-width: 1; }
.landscape-moon { fill: var(--accent); stroke: none; opacity: .8; }
.landscape-back { fill: var(--control); stroke: var(--border); }
.landscape-front { fill: var(--bg); stroke: var(--call-hover); }
.landscape-trail { stroke: var(--accent); stroke-width: 2; }
.landscape-stars { stroke: var(--accent); }
.scene-label { position: absolute; top: 16px; left: 16px; color: var(--text); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.scene-caption { position: absolute; bottom: 52px; left: 16px; max-width: 80%; font-size: 25px; font-weight: 600; line-height: 1.2; letter-spacing: -.035em; text-shadow: 0 2px 8px var(--bg); }
.scene-format { position: absolute; inset: auto 16px 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 12px; }
.scene-format svg { width: 18px; height: 18px; color: var(--accent); }
.replay-history { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-block: 20px 14px; color: var(--muted); font-size: 12px; }
.replay-history > strong { display: flex; align-items: center; gap: 14px; font-weight: 400; }
.replay-history b { padding: 3px 9px; border: 1px solid var(--accent); border-radius: 4px; color: var(--accent); background: var(--call-pressed); font-weight: 600; }
.timeline { display: flex; align-items: center; height: 62px; position: relative; border-bottom: 1px solid var(--border); }
.timeline-past { height: 100%; width: 17%; border: 1px dashed var(--border); border-right: 0; }
.timeline-saved { flex: 1; height: 100%; display: flex; align-items: center; justify-content: space-evenly; gap: 5px; padding: 8px; border: 1px solid var(--accent); background: var(--call-pressed); border-radius: 4px; }
.timeline-saved i { width: 5px; height: 52%; border-radius: 3px; background: var(--accent); }
.timeline-saved i:nth-child(3n) { height: 85%; }.timeline-saved i:nth-child(2n) { height: 35%; }
.timeline > span { width: 2px; background: var(--text); height: 84px; }
.timeline-labels { display: flex; justify-content: space-between; margin-top: 16px; font-size: 11px; color: var(--muted); }
.replay-save { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); }
.save-check { display: grid; place-items: center; flex-shrink: 0; width: 32px; height: 32px; border: 1px solid var(--success-border); border-radius: 50%; color: var(--holycord-success); background: var(--success-surface); }
.save-check svg { width: 18px; height: 18px; }
.replay-save > span:nth-child(2) { display: grid; gap: 2px; flex: 1; }
.replay-save strong { font-size: 13px; }
.replay-save > span > span { color: var(--muted); font-size: 11px; }
.shortcut { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px; color: var(--muted); font-size: 11px; }
kbd { min-width: 23px; padding: 3px 6px; border: 1px solid var(--border); border-bottom-width: 3px; border-radius: 4px; background: var(--control); color: var(--text); font-family: inherit; font-size: 12px; line-height: 1.5; font-weight: 600; text-align: center; }
.replay-illustration figcaption { margin-top: 16px; color: var(--muted); text-align: center; font-size: 11px; }
.gaming-section { padding-block: 48px 64px; }.gaming-section > .availability { margin-top: 24px; }


.gaming-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.gaming-grid article { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 24px; border: 1px solid var(--border); border-radius: var(--card-radius); background: var(--surface); }
.gaming-grid article > svg { margin-bottom: 24px; color: var(--accent); }
.gaming-grid h3 { width: 100%; margin-bottom: 8px; }.gaming-grid h3 a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; color: var(--text); text-decoration: none; }.gaming-grid h3 a:hover { color: var(--accent); }.gaming-grid h3 a svg { width: 18px; height: 18px; color: var(--accent); }
.gaming-grid p { font-size: 16px; text-wrap: balance; }

.feature-shortcut { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; width: 100%; }
.feature-shortcut > span:first-child { color: var(--muted); font-size: 12px; }

.connection-section { display: grid; grid-template-columns: 1fr 1.1fr; align-items: center; gap: 80px; padding-block: 80px; }
.peer-diagram { margin: 0; padding: 20px; border: 1px solid var(--border); border-radius: var(--card-radius); background: var(--surface); }
.peer-network { position: relative; height: 360px; }
.peer-routes { position: absolute; inset: 0; width: 100%; height: 100%; }
.peer-routes path { vector-effect: non-scaling-stroke; }
.signal-route { stroke: var(--muted); stroke-dasharray: 5 7; stroke-width: 1; }
.media-route { stroke: var(--accent); stroke-width: 2; }
.connect-service { position: absolute; top: 24px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; width: max-content; max-width: 100%; padding: 12px 16px; background: var(--control); border: 1px solid var(--border); border-radius: 8px; }
.connect-service > span { display: grid; gap: 2px; }
.connect-service strong { font-size: 14px; }
.connect-service > span > span { color: var(--muted); font-size: 11px; }
.peer-node { position: absolute; top: 57%; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 4px; width: 29%; max-width: 132px; padding: 12px 6px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); text-align: center; }
.peer-node > svg { margin-bottom: 4px; color: var(--accent); }
.peer-node strong { font-size: 13px; }
.peer-node > span { color: var(--muted); font-size: 11px; }
.peer-you { left: 15.38%; }
.peer-friend { left: 84.62%; }
.peer-third { left: 50%; top: 87.78%; }
.peer-encryption { position: absolute; top: 49%; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 5px; padding: 4px 8px; background: var(--surface); color: var(--accent); font-size: 11px; }
.peer-encryption svg { width: 14px; height: 14px; }
.diagram-legend { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 20px; margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--border); color: var(--muted); font-size: 12px; }
.diagram-legend > span { display: inline-flex; align-items: center; gap: 8px; }
.diagram-legend i { width: 24px; height: 0; border-top: 2px solid var(--accent); }
.diagram-legend .legend-signal { border-top: 1px dashed var(--muted); }
.connection-note { margin-top: 20px; font-size: 13px; }
.premium-label { display: flex; align-items: center; justify-content: inherit; gap: 9px; color: var(--premium-gold); font-size: 14px; font-weight: 600; margin-bottom: 16px; }
.premium-crown { width: 18px; height: 18px; }
.faq-section { padding-block: 64px 80px; border-top: 1px solid var(--border); display: grid; grid-template-columns: .8fr 1.2fr; gap: 64px; }
.questions details { border-bottom: 1px solid var(--border); padding-block: 6px; }
.questions details:first-child { border-top: 1px solid var(--border); }
.questions summary { cursor: pointer; padding-block: 18px; font-size: 16px; font-weight: 600; list-style-position: outside; margin-left: 18px; padding-left: 6px; }
.questions details p { padding: 0 0 20px 24px; font-size: 15px; }
.site-footer { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 32px; padding-block: 36px; border-top: 1px solid var(--border); }
.site-footer .brand { font-size: 20px; }.site-footer .brand img { width: 30px; height: 30px; }.site-footer p { font-size: 12px; margin-top: 10px; }
.site-footer nav { margin-left: auto; gap: 24px; }.site-footer .copyright { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; width: 100%; margin: 0; }
.owner-credit { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); text-decoration: none; }.owner-credit:hover { color: var(--text); text-decoration: underline; }
.page-intro { padding-block: 60px 64px; }.page-intro .lead { max-width: 660px; }.page-intro .small { max-width: 680px; margin-top: 18px; }
.page-intro .availability { font-size: 15px; min-height: 48px; padding-right: 16px; }

.capture-showcase { padding-bottom: 80px; }
.capture-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.capture-panels > article { min-width: 0; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: var(--card-radius); }
.capture-panel-copy { padding: 28px; }
.capture-panel-copy .eyebrow { margin-bottom: 12px; }
.capture-panel-copy h3 { margin-bottom: 16px; font-size: 24px; }
.capture-panel-copy .feature-shortcut { margin-top: 24px; }
.capture-panel-copy .small { margin-top: 16px; }
.source-illustration { display: grid; place-items: center; min-height: 268px; padding: 24px; border-bottom: 1px solid var(--border); background: var(--bg); }
.source-illustration > div { width: 100%; max-width: 360px; padding: 20px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.source-title { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.source-title svg { color: var(--accent); }
.source-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.source-options > span { display: grid; justify-items: center; gap: 6px; padding: 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; background: var(--control); }
.source-options svg { color: var(--accent); }
.source-options small, .source-caption { color: var(--muted); font-size: 11px; }
.source-caption { margin-top: 16px; text-align: center; }
.screenshot-illustration { padding: 24px; border-bottom: 1px solid var(--border); background: var(--bg); }
.screenshot-scene { height: 219px; margin-top: 0; }
.comparison-section { padding-bottom: 48px; }.comparison-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--card-radius); }
table { width: 100%; border-collapse: collapse; text-align: left; background: var(--surface); font-size: 15px; }th, td { padding: 22px 24px; }thead { background: var(--surface-alt); }.comparison-section thead th:last-child { color: var(--premium-gold); }tbody th { font-weight: 600; }td { color: var(--muted); }tbody tr { border-top: 1px solid var(--border); }.comparison-section > .small { margin-top: 18px; }
.not-found { min-height: 64vh; }.not-found .button { margin-top: 30px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 5; transform: translateY(-160%); background: var(--surface); padding: 12px 20px; border-radius: 8px; }.skip-link:focus { transform: none; }
.desktop-hero { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 64px; padding-block: 60px 64px; }
.desktop-hero .lead { font-size: 18px; }.desktop-hero .availability { font-size: 15px; }
.privacy-promise { padding-left: 20px; border-left: 2px solid var(--accent); color: var(--text); }
.connection-section .text-link { margin-top: 16px; }
.capture-quality { padding: 36px; border: 1px solid var(--border); border-radius: var(--card-radius); background: var(--surface); }
.quality-heading { display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.quality-heading h2 { font-size: 28px; }.quality-heading p:not(.premium-label) { margin-top: 12px; }.quality-heading .button { flex-shrink: 0; }
.quality-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 32px 0 0; padding-top: 28px; border-top: 1px solid var(--border); }
.quality-grid dt { color: var(--premium-gold); font-size: 28px; font-weight: 600; line-height: 1.3; letter-spacing: -.03em; }
.quality-grid dd { margin: 8px 0 0; color: var(--muted); font-size: 14px; }
.desktop-perks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; margin-top: 40px; }
.desktop-perks > div { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-content: start; gap: 8px 12px; }.desktop-perks svg { color: var(--accent); }.desktop-perks h3 { font-size: 17px; }.desktop-perks p { grid-column: 2; font-size: 15px; }
.system-requirements { padding-top: 64px; }
.requirements-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 40px; }
.requirements-grid > div { min-width: 0; }.requirements-grid h3 { margin-bottom: 20px; }
.system-specs { margin: 0; font-size: 15px; }
.system-specs > div { display: grid; grid-template-columns: 9em minmax(0, 1fr); gap: 16px; padding-block: 16px; border-top: 1px solid var(--border); }
.system-specs dt { font-weight: 600; }.system-specs dd { margin: 0; color: var(--muted); }
.requirements-table :is(th, td) { padding: 16px; vertical-align: top; }
.requirements-table span { color: var(--muted); font-size: 13px; font-weight: 400; }
.requirements-note { margin-top: 16px; font-size: 13px; }
.requirements-details { margin-top: 32px; }.requirements-details .requirements-sources { font-size: 13px; }
.desktop-social, .membership-action { display: flex; align-items: center; justify-content: space-between; gap: 36px; padding-block: 64px; }
.desktop-social h2, .membership-action h2 { font-size: 28px; }.desktop-social p, .membership-action p { margin-top: 12px; }.desktop-social .button, .membership-action .button { flex-shrink: 0; }
.membership-action { border-top: 1px solid var(--border); }
.plan-details { margin-top: 28px; }.plan-details .feature-list { padding-left: 24px; }.plan-details .feature-list p { padding: 0; }
.small { font-size: 13px; }.muted { color: var(--muted); }
@media (max-width: 1000px) {
    .hero, .desktop-hero { gap: 36px; }.hero h1 { font-size: clamp(38px, 5vw, 54px); }.hero .lead { font-size: 16px; }.faq-section, .connection-section { gap: 40px; }
    .gaming-grid article { padding: 20px; }.quality-heading { align-items: flex-start; flex-direction: column; gap: 20px; }.quality-grid dt { font-size: 25px; }
}
@media (max-width: 760px) {
    .system-requirements { padding-top: 48px; }.requirements-grid { grid-template-columns: 1fr; gap: 32px; }
    .wrap { width: calc(100% - 40px); }.site-header { flex-wrap: wrap; padding-block: 18px; gap: 16px; }.site-header nav { gap: 22px; }.site-header .brand { font-size: 21px; }.site-header .brand img { width: 32px; height: 32px; }
    .hero { --hero-copy-gap: 20px; --hero-link-gap: 16px; grid-template-columns: 1fr; gap: 40px; }.hero h1 { font-size: clamp(40px, 8.5vw, 58px); }.hero-copy { max-width: 580px; }
    .room-preview { justify-self: center; max-width: 420px; }
    .desktop-hero { grid-template-columns: 1fr; gap: 36px; padding-block: 48px; }.desktop-hero h1 { font-size: clamp(36px, 6vw, 46px); }
    .faq-section { grid-template-columns: 1fr; gap: 28px; padding-block: 48px 64px; }.replay-illustration { width: 100%; max-width: 520px; justify-self: center; }.section-heading { margin-bottom: 28px; }.faq-section .section-heading { margin-bottom: 0; }
    .page-intro { padding-block: 48px; }.page-intro h1 { font-size: clamp(36px, 6vw, 46px); }.page-intro .lead { font-size: 17px; }.site-footer nav { margin-left: 0; }
    .gaming-section, .capture-showcase { padding-bottom: 48px; }.gaming-grid { grid-template-columns: 1fr; }.gaming-grid article > svg { margin-bottom: 12px; }
    .connection-section { grid-template-columns: 1fr; gap: 36px; padding-block: 64px; }.connection-section > div:last-child { width: 100%; max-width: 560px; justify-self: center; }
    .capture-panels, .desktop-perks { grid-template-columns: 1fr; }.desktop-perks { gap: 24px; }
    .capture-quality { padding: 28px; }.quality-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
    .desktop-social, .membership-action { flex-direction: column; align-items: flex-start; gap: 24px; padding-block: 48px; }
}
@media (max-width: 480px) {
    .requirements-table :is(th, td) { padding: 12px 10px; font-size: 14px; }.requirements-table span { font-size: 12px; }
    .header-brand { width: 100%; justify-content: space-between; }
    .wrap { width: calc(100% - 32px); }.site-header { row-gap: 12px; }.site-header nav { width: 100%; gap: 16px; justify-content: space-between; }.site-header nav > a:not(.button) { font-size: 13px; }.button.nav-connect { padding-inline: 12px; gap: 6px; }
    .hero h1 { font-size: 40px; }.connect-pair { --cord-gap: 16px; }.button.connect-cta { min-height: 64px; padding: 12px; }.eyebrow { font-size: 11px; letter-spacing: .06em; }
    .replay-illustration { padding: 20px; }.replay-top { font-size: 12px; gap: 8px; }.capture-status { font-size: 11px; }.replay-top > svg { width: 18px; height: 18px; }
    .room-preview { padding: 4px; }.preview-chrome { font-size: 10px; padding-inline: 8px; }.window-marks { display: none; }
    th, td { padding: 16px 12px; font-size: 13px; overflow-wrap: anywhere; }tbody th { width: 32%; }.site-footer nav { flex-wrap: wrap; gap: 16px 24px; }.site-footer { gap: 24px; }.site-footer .copyright { font-size: 11px; }
    .game-scene { height: 190px; }.scene-caption { font-size: 22px; }.timeline-labels { gap: 12px; font-size: 10px; }
    .replay-save { display: grid; grid-template-columns: 32px minmax(0, 1fr); }.replay-save > .shortcut { grid-column: 2; }
    .peer-diagram { padding: 16px; }.peer-network { height: 340px; }.peer-node { padding: 10px 4px; }.peer-node strong { font-size: 11px; }.peer-node > span { font-size: 10px; }.connect-service { gap: 8px; padding: 10px; }.connect-service strong { font-size: 13px; }.connect-service > span > span { font-size: 10px; }
    .capture-panel-copy { padding: 20px; }.capture-panel-copy h3 { font-size: 22px; }.source-illustration, .screenshot-illustration { padding: 16px; }.source-illustration > div { padding: 16px; }.screenshot-scene { height: 235px; }
    .capture-quality { padding: 24px; }.quality-heading h2 { font-size: 25px; }.quality-heading .button { width: 100%; padding-inline: 12px; gap: 8px; }.quality-grid { gap: 24px 16px; }.quality-grid dt { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .connect-cord, .button.connect-cta::before, .connect-electricity { transition: none; }
    .connect-spark, .connect-electricity { display: none; }
    .preview-wave { display: none; }
    .connect-spark, .electric-arc, .electric-branch { animation: none; }
}
@media (forced-colors: active) {
    .promo-dialog, .promo-stage, .promo-play { border-color: CanvasText; }
    .promo-dialog, .promo-error, .promo-play { background: Canvas; color: CanvasText; box-shadow: none; }
    .promo-dialog .app-dialog-close { color: ButtonText; }
    .promo-dialog .app-dialog-close:hover, .promo-trigger:hover .promo-play { color: HighlightText; background: Highlight; }
    .button, .button.secondary { color: ButtonText; background: ButtonFace; border-color: ButtonText; box-shadow: none; }
    .brand, h1 span, .premium-label, .text-link { color: LinkText; }
    .room-preview { border-color: CanvasText; box-shadow: none; }
    .room-preview-app, .preview-room, .preview-dock, .preview-code-control { background: Canvas; color: CanvasText; border-color: CanvasText; }
    .preview-copy, .preview-disconnect { forced-color-adjust: none; background: Highlight; color: HighlightText; }
    .preview-icon { forced-color-adjust: none; }
    .comparison-scroll, details, .privacy-promise { border-color: CanvasText; }
    .timeline-saved { border-color: Highlight; }.timeline-saved i, .timeline > span, .availability-dot { background: CanvasText; }:is(a, button, summary, [tabindex]):focus-visible { outline-color: Highlight; }
    /* Keep link labels clear of system backplates. */
    .button.primary, .button.primary:hover, .button.primary:active { forced-color-adjust: none; color: HighlightText; background: Highlight; border-color: ButtonText; box-shadow: none; }
    .button:disabled, .button.primary:disabled { opacity: 1; color: GrayText; background: ButtonFace; border-color: GrayText; }
    .button.connect-cta::before, .connect-spark, .connect-electricity { display: none; }
    .preview-wave { display: none; }
    .connect-spark, .electric-arc, .electric-branch { animation: none; }
    .button.sound-toggle { forced-color-adjust: none; color: ButtonText; background: transparent; border-color: transparent; box-shadow: none; }
    .button.sound-toggle[aria-pressed="true"], .button.sound-toggle:is(:hover, :active) { color: Highlight; }
    .text-link.sound-preview { color: LinkText; }
    .game-scene, .game-landscape { background: Canvas; }.game-landscape { display: none; }.scene-caption { text-shadow: none; }
    .replay-illustration, .gaming-grid article, .peer-diagram, .peer-node, .connect-service, .capture-panels > article, .capture-quality, .source-illustration, .source-illustration > div, .source-options > span, .screenshot-illustration, .game-scene, .save-check, kbd { border-color: CanvasText; }
    .signal-route { stroke: CanvasText; }.media-route { stroke: Highlight; }.diagram-legend i { border-color: Highlight; }.diagram-legend .legend-signal { border-color: CanvasText; }
    .peer-node, .connect-service, .peer-encryption { background: Canvas; }.capture-status, .save-check, .quality-grid dt { color: CanvasText; }
    .peer-node > svg, .peer-encryption, .gaming-grid article > svg, .replay-top svg, .source-title svg, .source-options svg, .scene-format svg, .desktop-perks svg { color: CanvasText; }
}