:root {
  color-scheme: light dark;
  --bg: #f3f0e8;
  --surface: #fffdf7;
  --surface-2: #e8e3d8;
  --ink: #191a18;
  --muted: #5f615b;
  --line: #d3cec1;
  --header: rgb(24 24 22 / .92);
  --header-ink: #fffaf0;
  --gold: #e9b949;
  --gold-dark: #5f4304;
  --shadow: 0 1.25rem 4rem rgb(37 30 13 / .12);
  --radius: 1.5rem;
  --shell: 74rem;
  font-family: Inter, Aptos, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
:root[data-theme="dark"] {
  --bg: #111210;
  --surface: #1b1c19;
  --surface-2: #282925;
  --ink: #f3efe4;
  --muted: #b9b6ad;
  --line: #3a3b36;
  --header: rgb(12 13 11 / .94);
  --header-ink: #fffaf0;
  --gold: #efbd4c;
  --gold-dark: #211702;
  --shadow: 0 1.5rem 4rem rgb(0 0 0 / .35);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #111210; --surface: #1b1c19; --surface-2: #282925; --ink: #f3efe4;
    --muted: #b9b6ad; --line: #3a3b36; --header: rgb(12 13 11 / .94);
    --header-ink: #fffaf0; --gold: #efbd4c; --gold-dark: #211702;
    --shadow: 0 1.5rem 4rem rgb(0 0 0 / .35);
  }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
body { margin: 0; background: var(--bg); color: var(--ink); font-size: 1rem; line-height: 1.65; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: .2em; }
button, input { font: inherit; }
:focus-visible { outline: .2rem solid var(--gold); outline-offset: .2rem; }
.shell { width: min(calc(100% - 2.5rem), var(--shell)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 100; top: .5rem; left: .5rem; padding: .75rem 1rem; background: var(--gold); color: #15120b; transform: translateY(-150%); }
.skip-link:focus { transform: none; }
.site-header { position: sticky; z-index: 50; top: 0; min-height: 4.5rem; background: var(--header); color: var(--header-ink); border-bottom: 1px solid rgb(255 255 255 / .1); backdrop-filter: blur(18px); }
.nav { min-height: 4.5rem; display: flex; align-items: center; gap: 1.5rem; }
.brand { display: inline-flex; align-items: center; gap: .65rem; font-weight: 800; text-decoration: none; letter-spacing: -.02em; white-space: nowrap; }
.brand svg { width: 2.15rem; fill: none; stroke: var(--gold); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.nav-links { margin-left: auto; display: flex; align-items: center; gap: 1.4rem; }
.nav-links a { padding-block: 1.35rem; color: #e7e2d7; font-size: .94rem; font-weight: 650; text-decoration: none; border-bottom: .16rem solid transparent; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: #fff; border-bottom-color: var(--gold); }
.nav-actions { display: flex; align-items: center; gap: .65rem; }
.icon-button { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border: 1px solid rgb(255 255 255 / .2); border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
.nav-toggle { display: none; margin-left: auto; }
.button { min-height: 3rem; display: inline-flex; align-items: center; justify-content: center; padding: .75rem 1.25rem; border: 1px solid var(--gold); border-radius: 999px; background: var(--gold); color: #1b1609; font-weight: 800; text-decoration: none; cursor: pointer; box-shadow: 0 .45rem 1.3rem rgb(93 64 4 / .18); }
.button:hover { filter: brightness(1.05); transform: translateY(-1px); }
.button-small { min-height: 2.65rem; padding: .55rem 1rem; font-size: .9rem; }
.text-link { display: inline-flex; gap: .5rem; align-items: center; color: inherit; font-weight: 800; text-decoration-color: var(--gold); text-decoration-thickness: .13rem; }
.button-row { display: flex; align-items: center; flex-wrap: wrap; gap: 1.25rem; }
.hero { position: relative; min-height: calc(100svh - 4.5rem); display: grid; align-items: center; overflow: hidden; background: #171715; color: #fffaf0; }
.hero-image, .hero-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-image { object-fit: cover; object-position: 50% center; }
.hero-shade { background: linear-gradient(90deg, rgb(12 12 11 / .93) 0%, rgb(12 12 11 / .78) 34%, rgb(12 12 11 / .18) 68%, rgb(12 12 11 / .08) 100%), linear-gradient(0deg, rgb(12 12 11 / .5), transparent 50%); }
.hero-content { position: relative; z-index: 1; padding-block: clamp(5rem, 13vh, 9rem); }
.hero-content > * { max-width: 42rem; }
.hero h1 { max-width: 12ch; margin: .35rem 0 1.25rem; font-size: clamp(3rem, 7vw, 6.7rem); line-height: .96; letter-spacing: -.055em; text-wrap: balance; }
.hero .lede { max-width: 35rem; color: #e7e1d5; }
.hero-note { margin-top: 2.25rem; color: #c8c2b8; font-size: .9rem; }
.eyebrow { margin: 0 0 .55rem; color: #9b6e08; font-size: .78rem; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.hero .eyebrow, .register-card .eyebrow { color: var(--gold); }
h1, h2, h3 { font-weight: 780; letter-spacing: -.035em; }
h1 { font-size: clamp(2.4rem, 6vw, 4.8rem); line-height: 1.02; }
h2 { max-width: 16ch; margin: .2rem 0 1.2rem; font-size: clamp(2.15rem, 4.8vw, 4.4rem); line-height: 1.04; text-wrap: balance; }
h3 { margin: .2rem 0 .35rem; font-size: 1.45rem; line-height: 1.15; }
p, li { max-width: 68ch; }
.lede { margin: 0 0 1.75rem; color: var(--muted); font-size: clamp(1.08rem, 2vw, 1.3rem); line-height: 1.55; }
.section { padding-block: clamp(5rem, 11vw, 9rem); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(3rem, 8vw, 8rem); }
.section-copy { max-width: 34rem; }
.section-heading { max-width: 48rem; margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.section-heading h2 { max-width: 14ch; }
.feature-list { display: grid; gap: 0; margin: 2rem 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.feature-list li { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding: .9rem 0; border-bottom: 1px solid var(--line); font-weight: 700; }
.microcopy, .form-note, .asset-note { color: var(--muted); font-size: .88rem; }
.centered { margin: 2rem auto 0; text-align: center; }
.remote-section { overflow: hidden; }
.remote-figure { margin: 0; display: grid; justify-items: center; }
.remote-figure figcaption { max-width: 26rem; margin-top: 1rem; color: var(--muted); font-size: .85rem; text-align: center; }
.remote { position: relative; width: min(18rem, 76vw); padding: 2rem 1.35rem 2.4rem; border: .3rem solid #32322f; border-radius: 4rem; background: linear-gradient(145deg, #2f302d, #111210 70%); color: #f6f2e8; box-shadow: inset 0 1px 1px rgb(255 255 255 / .18), inset 0 -1rem 2rem rgb(0 0 0 / .35), 1.7rem 2rem 4.5rem rgb(0 0 0 / .3); transform: rotate(5deg); }
.remote::before { content: ""; position: absolute; inset: .55rem; border: 1px solid rgb(255 255 255 / .08); border-radius: 3.3rem; pointer-events: none; }
.remote-mark { margin-bottom: 1.2rem; color: var(--gold); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-align: center; text-transform: uppercase; }
.remote-pair { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-top: .75rem; }
.remote-button { min-height: 4.55rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem; border: 1px solid #464741; border-radius: 1.25rem; background: linear-gradient(#373834, #20211f); box-shadow: inset 0 .12rem .15rem rgb(255 255 255 / .1), 0 .2rem .3rem rgb(0 0 0 / .4); }
.remote-button.power { width: 4.75rem; min-height: 4.75rem; margin: 0 auto 1rem; border-radius: 50%; }
.remote-button.power span { color: #ef5850; }
.remote-button.accent { border-color: #8c6a20; }
.remote-button b, .remote-button > span { font-size: 1.65rem; line-height: 1; }
.remote-button small { color: #cfcbc2; font-size: .62rem; font-weight: 700; line-height: 1.2; text-align: center; text-transform: uppercase; }
.content-section { background: var(--surface-2); }
.channel-rail { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.channel-card { min-height: 21rem; position: relative; display: flex; align-items: flex-end; padding: 1.75rem; overflow: hidden; border: 1px solid rgb(255 255 255 / .14); border-radius: var(--radius); color: #fffaf0; box-shadow: var(--shadow); isolation: isolate; }
.channel-card::before, .channel-card::after { content: ""; position: absolute; inset: 0; z-index: -2; }
.channel-card::after { z-index: -1; background: linear-gradient(0deg, rgb(8 8 7 / .92), transparent 75%); }
.channel-card.programme::before { background: radial-gradient(circle at 70% 20%, #cc8f4a, transparent 28%), linear-gradient(135deg, #48301f, #171715); }
.channel-card.music::before { background: radial-gradient(circle at 34% 28%, #d6aa41, transparent 5%), radial-gradient(circle at 55% 45%, #5f3766, transparent 32%), linear-gradient(135deg, #222342, #151516); }
.channel-card.series::before { background: radial-gradient(circle at 65% 34%, #758e7b, transparent 33%), linear-gradient(145deg, #26392e, #131814); }
.channel-number { position: absolute; top: 1rem; right: 1.25rem; color: rgb(255 255 255 / .55); font-size: 2.5rem; font-weight: 800; letter-spacing: -.08em; }
.channel-card p { margin: 0; color: #d2cec5; }
.channel-card .card-kicker { color: var(--gold); font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.gadget-section { background: var(--surface); }
.gadget-visual { min-height: 25rem; display: grid; place-items: center; overflow: hidden; border-radius: 1.75rem; background: #f8f5ed; }
.gadget-image { width: 100%; height: auto; object-fit: contain; }
.steps { margin: 2rem 0; border-top: 1px solid var(--line); }
.steps > div { display: grid; grid-template-columns: 2.5rem 1fr; align-items: center; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.steps span { width: 1.8rem; height: 1.8rem; display: grid; place-items: center; border-radius: 50%; background: var(--gold); color: #17130a; font-weight: 800; }
.steps p { margin: 0; }
.app-section { background: #181917; color: #f5f1e7; }
.app-section .lede, .app-section .asset-note { color: #bdb9b0; }
.app-section .eyebrow { color: var(--gold); }
.phone-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: clamp(1.25rem, 4vw, 3rem); max-width: 58rem; margin: auto; }
.phone-slot { margin: 0; }
.phone-frame { aspect-ratio: 592 / 1280; overflow: hidden; border: .35rem solid #3b3c38; border-radius: 2.25rem; background: #0d1014; box-shadow: 0 1.8rem 3rem rgb(0 0 0 / .35); }
.phone-screenshot { width: 100%; height: 100%; object-fit: contain; }
.phone-slot figcaption { display: grid; gap: .25rem; padding: 1.25rem .25rem; }
.phone-slot figcaption strong { font-size: 1.2rem; }
.phone-slot figcaption span { color: #aaa79f; font-size: .88rem; }
.asset-note { margin: 1.5rem auto 0; text-align: center; }
.register-section { padding-block: clamp(3rem, 8vw, 6rem); background: var(--bg); }
.register-card { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem, 7vw, 6rem); padding: clamp(2rem, 6vw, 4rem); border-radius: 2rem; background: #24241f; color: #fffaf0; box-shadow: var(--shadow); }
.register-card h2 { font-size: clamp(2rem, 4vw, 3.5rem); }
.register-card p { color: #cbc6bc; }
.interest-form { align-self: center; }
.interest-form label { display: block; margin-bottom: .5rem; font-size: .88rem; font-weight: 800; }
.form-row { display: flex; gap: .7rem; }
.form-row input { min-width: 0; flex: 1; min-height: 3.2rem; padding: .7rem 1rem; border: 1px solid #5c5c54; border-radius: .75rem; background: #151613; color: #fff; }
.form-note { margin: .7rem 0 0; line-height: 1.5; }
.form-status { min-height: 1.5em; margin: .35rem 0 0; color: #f0c96f !important; font-size: .85rem; }
.faq-preview { background: var(--surface); }
.accordion-list details { border-top: 1px solid var(--line); }
.accordion-list details:last-of-type { border-bottom: 1px solid var(--line); margin-bottom: 1.5rem; }
.accordion-list summary { position: relative; padding: 1.15rem 2rem 1.15rem 0; font-weight: 750; cursor: pointer; }
.accordion-list summary::marker { color: var(--gold); }
.accordion-list details p { margin-top: 0; color: var(--muted); }
.site-footer { padding: 4rem 0 1.5rem; background: #111210; color: #eee9df; }
.footer-grid { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 2rem; }
.footer-grid h2 { margin: 0 0 .8rem; color: #8f8d86; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; }
.footer-grid a:not(.brand) { display: block; width: fit-content; margin: .42rem 0; color: #d7d2c8; font-size: .9rem; text-decoration: none; }
.footer-grid p { color: #92918b; font-size: .9rem; }
.footer-bottom { display: flex; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid #33342f; color: #8f8d86; font-size: .78rem; }
.page-hero { padding-block: clamp(4rem, 9vw, 7rem) 3rem; background: var(--surface-2); }
.page-hero h1 { max-width: 14ch; margin: .3rem 0 1rem; }
.page-layout { display: grid; grid-template-columns: minmax(12rem, .32fr) minmax(0, 1fr); gap: clamp(2rem, 7vw, 6rem); padding-block: 4rem 7rem; }
.side-nav { position: sticky; top: 6rem; align-self: start; display: grid; gap: .35rem; padding: 1rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--surface); }
.side-nav a { padding: .5rem .7rem; border-radius: .5rem; color: var(--muted); text-decoration: none; }
.side-nav a:hover { background: var(--surface-2); color: var(--ink); }
.article { max-width: 48rem; }
.article h2 { max-width: none; margin-top: 3.5rem; font-size: clamp(1.65rem, 3vw, 2.4rem); }
.article h3 { margin-top: 2rem; }
.article p, .article li { color: var(--muted); }
.article .notice, .notice { padding: 1rem 1.2rem; border-left: .3rem solid var(--gold); border-radius: .4rem; background: color-mix(in srgb, var(--gold) 13%, var(--surface)); color: var(--ink); }
.help-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.help-card, .panel { padding: 1.5rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--surface); box-shadow: 0 .5rem 1.8rem rgb(0 0 0 / .05); }
.help-card h2, .panel h2 { margin: 0 0 .5rem; font-size: 1.35rem; }
.help-card p { color: var(--muted); }
.plain-main { max-width: 62rem; margin: 0 auto; padding: clamp(2rem, 7vw, 5rem) 1.25rem; }
.plain-main > h1 { max-width: 16ch; }
.plain-main h2 { max-width: none; margin-top: 2.5rem; font-size: 1.5rem; }
.plain-main .panel { max-width: 48rem; }
.required { color: #a83a2d; font-weight: 700; }
body > header:not(.site-header) { padding: 1rem max(1.25rem, calc((100% - 62rem) / 2)); background: #171815; color: #fffaf0; }
body > header:not(.site-header) a { color: #fffaf0; font-weight: 800; text-decoration: none; }
body > main:not(#main) { max-width: 62rem; margin: 0 auto; padding: clamp(2rem, 7vw, 5rem) 1.25rem; }
body > main:not(#main) > h1 { max-width: 16ch; }
body > main:not(#main) .panel { max-width: 48rem; }
body > footer:not(.site-footer) { padding: 1.5rem max(1.25rem, calc((100% - 62rem) / 2)); border-top: 1px solid var(--line); color: var(--muted); }

@media (max-width: 58rem) {
  .nav-toggle { display: grid; }
  .nav-links { display: none; position: absolute; inset: 4.5rem 0 auto; margin: 0; padding: .75rem 1.25rem 1.25rem; flex-direction: column; align-items: stretch; gap: 0; background: #151613; border-bottom: 1px solid #33342f; }
  .nav-links[data-open="true"] { display: flex; }
  .nav-links a { padding: .8rem 0; border-bottom: 1px solid #33342f; }
  .nav-actions .button { display: none; }
  .split, .register-card { grid-template-columns: 1fr; }
  .remote-layout .section-copy { order: 1; }
  .remote-layout .remote-figure { order: 2; }
  .channel-rail { grid-template-columns: 1fr; }
  .channel-card { min-height: 15rem; }
  .gadget-layout .gadget-visual { order: 2; min-height: 0; }
  .phone-grid { gap: 1rem; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .page-layout { grid-template-columns: 1fr; }
  .side-nav { position: static; }
}
@media (max-width: 38rem) {
  .shell { width: min(calc(100% - 1.5rem), var(--shell)); }
  .brand span { font-size: .95rem; }
  .nav { gap: .55rem; }
  .hero { min-height: 44rem; align-items: end; }
  .hero-image { height: 24rem; object-position: 50% center; }
  .hero-shade { background: linear-gradient(0deg, rgb(12 12 11 / .96) 0%, rgb(12 12 11 / .74) 58%, rgb(12 12 11 / .1) 100%); }
  .hero-content { padding-block: 21rem 3rem; }
  .hero h1 { font-size: clamp(2.75rem, 14vw, 4.2rem); }
  .feature-list li { grid-template-columns: 1fr; gap: .25rem; }
  .phone-grid { grid-template-columns: 1fr; max-width: 18rem; }
  .phone-slot:nth-child(n+2) { margin-top: 1rem; }
  .form-row { flex-direction: column; }
  .form-row .button { width: 100%; }
  .help-grid, .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}

/* Quick setup and provider help */
.setup-overview { display: grid; grid-template-columns: minmax(0, .75fr) minmax(24rem, 1.25fr); gap: clamp(2rem, 7vw, 6rem); align-items: start; }
.visual-steps { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.visual-steps li { display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; align-items: start; padding: 1.15rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--surface); }
.visual-steps p { margin: .2rem 0 0; color: var(--muted); }
.visual-step-icon { width: 2.7rem; height: 2.7rem; display: grid; place-items: center; border-radius: 50%; background: var(--gold); color: #17130a; font-size: 1.15rem; font-weight: 850; }
.privacy-aside { margin: 1.5rem 0; padding: 1rem 1.2rem; border-radius: .75rem; background: var(--surface); }
.control-guide { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.control-guide > div { display: grid; gap: .25rem; padding: 1rem; border: 1px solid var(--line); border-radius: .75rem; background: var(--surface); }
.control-guide span { color: var(--muted); font-size: .92rem; }
.provider-index { display: flex; flex-wrap: wrap; gap: .55rem; margin: -1.5rem 0 2.25rem; }
.provider-index a { padding: .5rem .8rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: .88rem; font-weight: 750; text-decoration: none; }
.provider-index a:hover { border-color: var(--gold); }
.provider-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; align-items: start; }
.provider-list details { scroll-margin-top: 6rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--surface); overflow: hidden; }
.provider-list summary { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 1.1rem 1.2rem; cursor: pointer; font-weight: 800; }
.provider-list summary::marker { color: var(--gold); }
.provider-list summary small { color: var(--muted); font-weight: 600; text-align: right; }
.provider-list details[open] { box-shadow: 0 .75rem 2rem rgb(0 0 0 / .07); }
.provider-body { padding: 0 1.2rem 1.25rem; border-top: 1px solid var(--line); }
.provider-body h3 { margin: 1rem 0 .25rem; font-size: 1rem; letter-spacing: -.01em; }
.provider-body p { margin: 0; color: var(--muted); }
.provider-body code { padding: .08rem .3rem; border-radius: .25rem; background: var(--surface-2); color: var(--ink); font-size: .86em; overflow-wrap: anywhere; }
.provider-support-note { margin-top: 2rem; }

@media (max-width: 58rem) {
  .setup-overview, .provider-list { grid-template-columns: 1fr; }
}
@media (max-width: 38rem) {
  .control-guide { grid-template-columns: 1fr; }
  .provider-list summary { align-items: start; flex-direction: column; gap: .2rem; }
  .provider-list summary small { text-align: left; }
}

@media print {
  .site-header, .site-footer, .nav-actions, .side-nav, .button-row { display: none !important; }
  .page-hero, .section, .page-layout { padding-block: 1.25rem; }
  .page-layout, .setup-overview, .provider-list { display: block; }
  .provider-list details { break-inside: avoid; margin-bottom: .75rem; }
  .provider-list details > *:not(summary) { display: block; }
}

/* Interactive system map */
.system-page { background: #0f100e; }
.system-page .site-header { position: relative; }
.system-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(20rem, .72fr); gap: clamp(2rem, 7vw, 7rem); align-items: end; padding-block: clamp(3rem, 8vw, 6.5rem) clamp(2.5rem, 6vw, 4.5rem); color: #f4efe3; }
.system-heading h1 { max-width: 12ch; margin: .3rem 0 0; }
.system-heading .lede { margin: 0; color: #aaa89f; }
.system-workspace { padding-bottom: 5rem; }
.system-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .9rem; }
.system-legend { display: flex; flex-wrap: wrap; gap: .55rem 1rem; color: #a9a79f; font-size: .8rem; }
.system-legend span { display: inline-flex; align-items: center; gap: .38rem; }
.legend-dot { width: .68rem; height: .68rem; border-radius: 50%; background: #74766f; }
.legend-dot.source { background: #65b8c5; }.legend-dot.adapter { background: #9d8de0; }.legend-dot.core { background: #efbd4c; }.legend-dot.state { background: #75b88e; }.legend-dot.output { background: #df8172; }
.system-clear { padding: .5rem .85rem; border: 1px solid #45463f; border-radius: 999px; background: #191a17; color: #e9e4d9; cursor: pointer; }
.system-clear:disabled { opacity: .38; cursor: default; }
.system-stage-shell { width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-color: #696b62 #171815; background: radial-gradient(circle at 50% 44%, rgb(239 189 76 / .065), transparent 31%), #131411; border-block: 1px solid #30312c; }
.system-stage { width: 1640px; height: 1165px; position: relative; margin: 0 auto; }
.system-links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.system-links marker path { fill: #6f716a; }
.system-link { cursor: pointer; transition: opacity .18s ease; }
.link-line { fill: none; stroke: #62645e; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.link-hit { fill: none; stroke: transparent; stroke-width: 16; vector-effect: non-scaling-stroke; }
.link-label { opacity: 0; fill: #90928a; font: 600 10px Inter, Aptos, sans-serif; paint-order: stroke; stroke: #131411; stroke-width: 5px; stroke-linejoin: round; pointer-events: none; transition: opacity .15s ease; }
.system-link:hover .link-label, .system-link:focus .link-label, .system-link.is-selected .link-label { opacity: 1; }
.system-node { width: 258px; min-height: 166px; position: absolute; left: var(--x); top: var(--y); z-index: 2; display: flex; flex-direction: column; align-items: stretch; padding: 1rem; border: 1px solid #3a3b36; border-top: .22rem solid #74766f; border-radius: 1rem; background: linear-gradient(145deg, #22231f, #191a17); color: #f3efe4; text-align: left; box-shadow: 0 .9rem 2rem rgb(0 0 0 / .24); cursor: pointer; transition: opacity .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.system-node:hover { transform: translateY(-2px); border-color: #74766f; box-shadow: 0 1.1rem 2.5rem rgb(0 0 0 / .34); }
.system-node.source { border-top-color: #65b8c5; }.system-node.adapter { border-top-color: #9d8de0; }.system-node.core { border-top-color: #efbd4c; }.system-node.state { border-top-color: #75b88e; }.system-node.output { border-top-color: #df8172; }
.system-node[data-node="caregiver-app"], .node-inspect[data-inspect="caregiver-app"] { --x: 28px; --y: 55px; }
.system-node[data-node="physical-remote"], .node-inspect[data-inspect="physical-remote"] { --x: 28px; --y: 278px; }
.system-node[data-node="television"], .node-inspect[data-inspect="television"] { --x: 28px; --y: 501px; }
.system-node[data-node="providers"], .node-inspect[data-inspect="providers"] { --x: 28px; --y: 724px; }
.system-node[data-node="update-feed"], .node-inspect[data-inspect="update-feed"] { --x: 28px; --y: 947px; }
.system-node[data-node="realtime"], .node-inspect[data-inspect="realtime"] { --x: 358px; --y: 55px; }
.system-node[data-node="remote-adapter"], .node-inspect[data-inspect="remote-adapter"] { --x: 358px; --y: 278px; }
.system-node[data-node="tv-controller"], .node-inspect[data-inspect="tv-controller"] { --x: 358px; --y: 501px; }
.system-node[data-node="provider-adapters"], .node-inspect[data-inspect="provider-adapters"] { --x: 358px; --y: 724px; }
.system-node[data-node="ota-updater"], .node-inspect[data-inspect="ota-updater"] { --x: 358px; --y: 947px; }
.system-node[data-node="command-policy"], .node-inspect[data-inspect="command-policy"] { --x: 688px; --y: 190px; }
.system-node[data-node="playback-controller"], .node-inspect[data-inspect="playback-controller"] { --x: 688px; --y: 474px; }
.system-node[data-node="status-cache"], .node-inspect[data-inspect="status-cache"] { --x: 688px; --y: 810px; }
.system-node[data-node="channel-store"], .node-inspect[data-inspect="channel-store"] { --x: 1020px; --y: 72px; }
.system-node[data-node="audio"], .node-inspect[data-inspect="audio"] { --x: 1020px; --y: 323px; }
.system-node[data-node="viewer"], .node-inspect[data-inspect="viewer"] { --x: 1020px; --y: 574px; }
.system-node[data-node="release-slots"], .node-inspect[data-inspect="release-slots"] { --x: 1020px; --y: 825px; }
.system-node[data-node="app-display"], .node-inspect[data-inspect="app-display"] { --x: 1350px; --y: 104px; }
.system-node[data-node="tv-picture"], .node-inspect[data-inspect="tv-picture"] { --x: 1350px; --y: 480px; }
.system-node[data-node="diagnostics"], .node-inspect[data-inspect="diagnostics"] { --x: 1350px; --y: 856px; }
.system-node.primary { background: linear-gradient(145deg, #30291a, #1b1a15); border-color: #6b5727; border-top-color: #efbd4c; }
.node-inspect { position: absolute; left: calc(var(--x) + 184px); top: calc(var(--y) + 11px); z-index: 4; min-width: 60px; padding: .3rem .48rem; border: 1px solid #4a4b45; border-radius: 999px; background: #121310; color: #d9d5ca; font: 750 .66rem/1 Inter, Aptos, sans-serif; cursor: pointer; transition: border-color .16s ease, background .16s ease, color .16s ease, opacity .18s ease; }
.node-inspect:hover, .node-inspect:focus-visible { border-color: var(--gold); background: #292515; color: var(--gold); }
.node-inspect.is-dimmed { opacity: .12; }
.node-kind { margin-bottom: .35rem; color: #8e9088; font-size: .66rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.system-node strong { font-size: 1.08rem; line-height: 1.18; letter-spacing: -.015em; }
.node-summary { margin-top: .25rem; color: #b7b5ad; font-size: .75rem; line-height: 1.35; }
.state-list { display: flex; flex-wrap: wrap; gap: .28rem; margin-top: auto; padding-top: .75rem; }
.state-list em { padding: .16rem .38rem; border: 1px solid #41423d; border-radius: 999px; color: #c9c6bc; font-size: .59rem; font-style: normal; line-height: 1.3; }
.system-node.is-dimmed, .system-link.is-dimmed { opacity: .12; }
.system-node.is-active { opacity: 1; border-color: #b9b7ac; }
.system-node.is-selected { transform: translateY(-3px); border-color: var(--gold); box-shadow: 0 0 0 2px rgb(239 189 76 / .22), 0 1.2rem 3rem rgb(0 0 0 / .38); }
.system-link.is-active .link-line { stroke: #c1b075; stroke-width: 2.3; }.system-link.is-active .link-label { fill: #e6ddc5; }.system-link.is-selected .link-line { stroke: var(--gold); stroke-width: 3.2; }.system-link.is-selected .link-label { fill: var(--gold); font-size: 11px; }
.system-detail { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(28rem, .9fr); gap: clamp(2rem, 6vw, 5rem); margin-top: 2rem; padding: clamp(1.5rem, 4vw, 2.7rem); border: 1px solid #383934; border-radius: 1.4rem; background: #191a17; color: #f3efe4; }
.system-detail h2 { max-width: none; margin: .2rem 0 .7rem; font-size: clamp(1.6rem, 3vw, 2.4rem); }
.system-detail p { margin: 0; color: #b5b3ab; }
.detail-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.detail-columns h3 { margin: 0 0 .55rem; color: #efbd4c; font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; }
.detail-columns ul { margin: 0; padding-left: 1.1rem; color: #c6c3ba; font-size: .86rem; }
.detail-columns li + li { margin-top: .35rem; }
.system-notes { display: grid; grid-template-columns: minmax(0, .72fr) minmax(24rem, 1fr); gap: clamp(2rem, 7vw, 7rem); align-items: start; padding-block: clamp(4rem, 9vw, 7rem); color: #f3efe4; }
.system-notes h2 { max-width: 12ch; font-size: clamp(2rem, 4vw, 3.6rem); }.system-notes > p { margin: .25rem 0 0; color: #aaa89f; font-size: 1.08rem; }
.block-dialog { width: min(760px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); padding: 0; border: 1px solid #4b4c46; border-radius: 1.35rem; background: #191a17; color: #f3efe4; box-shadow: 0 2rem 6rem rgb(0 0 0 / .6); }
.block-dialog::backdrop { background: rgb(3 4 3 / .78); backdrop-filter: blur(5px); }
.block-dialog[open] { animation: block-dialog-in .16s ease-out; }
.block-dialog-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.5rem 1.5rem 1.15rem; border-bottom: 1px solid #34352f; background: rgb(25 26 23 / .96); }
.block-dialog-head h2 { max-width: none; margin: .15rem 0 0; font-size: clamp(1.55rem, 4vw, 2.35rem); }
.block-dialog-close { flex: 0 0 auto; width: 2.5rem; height: 2.5rem; border: 1px solid #484942; border-radius: 50%; background: #22231f; color: #f1ede2; font-size: 1.65rem; line-height: 1; cursor: pointer; }
.block-dialog-summary { margin: 0; padding: 1.25rem 1.5rem 0; color: #b9b6ad; font-size: 1rem; }
.internal-section { padding: 1.25rem 1.5rem 0; }
.internal-section:last-child { padding-bottom: 1.6rem; }
.internal-section h3 { margin: 0 0 .72rem; color: #efbd4c; font-size: .78rem; letter-spacing: .11em; text-transform: uppercase; }
.internal-section ul { margin: 0; padding-left: 1.15rem; color: #d0cdc3; }
.internal-section li + li { margin-top: .48rem; }
.internal-state-list { display: flex; flex-wrap: wrap; gap: .5rem; }
.internal-state-list span { padding: .4rem .65rem; border: 1px solid #55564f; border-radius: .55rem; background: #22231f; color: #e5e1d6; font-size: .8rem; font-weight: 750; }
.state-machine-section[hidden] { display: none; }
.machine-hint { margin: -.2rem 0 .65rem; color: #9f9d95; font-size: .76rem; }
.state-machine-scroll { overflow-x: auto; border: 1px solid #3d3e38; border-radius: .85rem; background: radial-gradient(circle at 50% 50%, rgb(239 189 76 / .06), transparent 52%), #131411; scrollbar-color: #696b62 #171815; }
.state-machine-diagram { display: block; min-width: 700px; width: 100%; height: auto; }
.machine-edge { fill: none; stroke: #77796f; stroke-width: 1.7; vector-effect: non-scaling-stroke; }
.machine-edge-label { fill: #bbb8ae; font: 650 10px Inter, Aptos, sans-serif; paint-order: stroke; stroke: #131411; stroke-width: 5px; stroke-linejoin: round; }
.machine-node rect { fill: #252620; stroke: #6c6e64; stroke-width: 1.5; }
.machine-node.is-start rect { fill: #342c19; stroke: #efbd4c; stroke-width: 2; }
.machine-node text { fill: #f1ede2; font: 800 11px Inter, Aptos, sans-serif; letter-spacing: .025em; text-anchor: middle; }
.machine-start-dot { fill: #efbd4c; }
.flow-boundary { fill: rgb(239 189 76 / .035); stroke: #66572f; stroke-width: 1.4; stroke-dasharray: 7 6; }
.flow-boundary-label { fill: #efbd4c; font: 800 10px Inter, Aptos, sans-serif; letter-spacing: .09em; }
.flow-node rect { fill: #252620; stroke: #6c6e64; stroke-width: 1.5; }
.flow-node.is-input rect { fill: #1c2829; stroke: #5eb8c8; }
.flow-node.is-control rect { fill: #342c19; stroke: #efbd4c; stroke-width: 2; }
.flow-node.is-output rect { fill: #203026; stroke: #75bc91; }
.flow-node text { fill: #f1ede2; font: 750 11px Inter, Aptos, sans-serif; text-anchor: middle; }
.flow-decision { fill: #29241a; stroke: #efbd4c; stroke-width: 1.8; }
.flow-decision-text { fill: #f1ede2; font: 800 11px Inter, Aptos, sans-serif; text-anchor: middle; }
.flow-arrow { fill: none; stroke: #898b81; stroke-width: 1.8; vector-effect: non-scaling-stroke; }
.flow-arrow-label { fill: #efbd4c; font: 800 10px Inter, Aptos, sans-serif; paint-order: stroke; stroke: #131411; stroke-width: 5px; stroke-linejoin: round; }
.internal-grid { display: grid; grid-template-columns: 1fr 1fr; }
.internal-connections { margin-top: 1.2rem; border-top: 1px solid #34352f; }
@keyframes block-dialog-in { from { opacity: 0; transform: translateY(.5rem) scale(.985); } }
@media (max-width: 58rem) {
  .system-heading, .system-detail, .system-notes { grid-template-columns: 1fr; }
  .system-heading { align-items: start; }
  .system-stage { margin-left: .75rem; }
}
@media (max-width: 38rem) {
  .system-toolbar { align-items: flex-end; }
  .system-legend { display: grid; grid-template-columns: repeat(2, auto); }
  .system-stage-shell::before { content: "Swipe sideways to explore the complete map"; position: sticky; left: .75rem; z-index: 4; display: block; width: max-content; padding: .65rem 0 .15rem; color: #9c9a92; font-size: .75rem; }
  .detail-columns { grid-template-columns: 1fr; }
  .internal-grid { grid-template-columns: 1fr; }
}