/* Shared display control. Diagram colors are intentionally preserved. */
html{color-scheme:light}html[data-theme=dark]{color-scheme:dark}
.theme-toggle{display:inline-flex!important;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:8px 13px!important;border:1px solid #657681!important;border-radius:999px!important;background:#14232d!important;color:#eef2f5!important;font:500 13px/1.2 system-ui!important;letter-spacing:0!important;white-space:nowrap;cursor:pointer}.theme-toggle:focus-visible{outline:3px solid #849bb5!important;outline-offset:3px}.theme-toolbar{display:flex;justify-content:flex-end;padding:14px 24px}body>header nav{display:flex;align-items:center;flex-wrap:wrap;gap:20px}
html[data-theme=light]{background:white;color:#26313b}html[data-theme=light] body{background:#fff!important;color:#26313b!important}
html[data-theme=light] .theme-toggle{background:#fff!important;color:#26313b!important;border-color:#b8c1ca!important}html[data-theme=light] .theme-toggle:hover{background:#f2f4f6!important}
html[data-theme=light] .company-brand img,html[data-theme=light] .brand img,html[data-theme=light] .brand-symbol{filter:brightness(0)}
html[data-theme=light] :is(.vb-art,#story-drawing,#cell-stage,#scene){background:#0b202e!important;color:#eef8f5!important;border-radius:8px}
html[data-theme=light] :is(button[aria-pressed=true],button[aria-current=true],.product-live,.perspective-options label:has(input:checked)){background:#e9edf1!important;color:#17212b!important;border-color:#788795!important}
html[data-theme=light] a{text-decoration-color:#8a98a5}html[data-theme=light] :is(input,textarea)::placeholder{color:#66727e!important;opacity:1}
html[data-theme=light] .mf-summary-columns>div+div::before{background:#ccd2d8!important}
@media(max-width:600px){body>header{flex-wrap:wrap}body>header nav{gap:14px}.theme-toggle{min-height:44px}}

html[data-theme=dark] body:has(#component-index){background:#091019;color:#dce9ed}
html[data-theme=dark] body:has(#component-index) article{background:#10212a;border-color:#38515c}
html[data-theme=dark] body:has(#component-index) :is(a,.group){color:#a7d8d1}

/* Keep the invisible 44px hit area separate from its single visible chip. */
html[data-theme=light] .profile-choices .perspective-options label,
html[data-theme=light] .profile-choices .perspective-options label:has(input:checked){border:0!important;background:transparent!important;box-shadow:none!important}
html[data-theme=light] .profile-choices .perspective-options label:has(input:checked)::before{background:#e9edf1!important;border-color:#788795!important;box-shadow:none!important}
html[data-theme=light] .profile-choices .perspective-options label:hover::before{border-color:#788795!important}

/* Preserve legibility of scientific artwork independently of the page palette. */
html[data-theme=light] :is(#diagram,#three-structure,.vb-organ-focus svg){background:#0b202e!important}
/* Explicit state colors must win over page-specific high-specificity rules. */
html[data-theme=light] body :is(button[aria-pressed=true],button[aria-current=true],button[aria-selected=true],.steps button[aria-pressed=true],.mf-questions button[aria-current=true]){background:#e9edf1!important;color:#17212b!important;border-color:#788795!important}
html[data-theme=dark] body:has(#explorer) .brand img{filter:brightness(0) invert(1)}