/* Website preferences are independent of the signed-in console preferences. */
html[data-website-theme] { background: var(--ob-canvas, #f6f7fa); color-scheme: light; }
html[data-website-theme='dark'] {
  color-scheme: dark;
  --ob-canvas: #0f1014; --ob-surface: #191a20; --ob-panel: #212229;
  --ob-border: #303139; --ob-separator: #27282f; --ob-line: #42444f;
  --ob-ink: #f3f3f6; --ob-secondary: #c4c5ce; --ob-muted: #a1a3b1; --ob-quiet: #9295a5;
  --ob-detail: #797d8e; --ob-connector: #666a7a; --ob-grid: #26272f; --ob-shadow: #000000;
  --ob-border-rgb: 48,49,57; --ob-ink-rgb: 243,243,246; --ob-muted-rgb: 161,163,177; --ob-shadow-rgb: 0,0,0;
  --ob-brand: #9b83ff; --ob-accent: #ad99ff; --ob-accent-hover: #c5b7ff;
  --ob-accent-soft: #262235; --ob-accent-subtle: #1c1a25; --ob-accent-border: #483d68;
  --ob-accent-mid: #7865af; --ob-accent-muted: #332b48; --ob-accent-decoration: #7865af;
  --ob-accent-rgb: 173,153,255; --ob-accent-mid-rgb: 120,101,175;
  --ob-action: #6d4ee8; --ob-action-hover: #795bf0; --ob-on-accent: #ffffff;
  --ob-success: #8ecfa9; --ob-success-soft: #192b22; --ob-success-border: #355442;
  --ob-warning: #e9c17c; --ob-warning-soft: #30281a; --ob-warning-border: #5e4c2d;
  --ob-danger: #f2a4b2; --ob-danger-soft: #321f26; --ob-danger-border: #663844;
  --ob-info: #a8c2f1; --ob-info-soft: #202a3a; --ob-info-border: #3d5272;
  --ob-site-section: #14151a;
}

/* Large page surfaces stay neutral so the product and actions carry the color. */
html[data-website-theme='dark'] .mp-site :is(.mh-bold, .mp-page-sections, .mp-product-section) {
  background: var(--ob-canvas);
}
html[data-website-theme='dark'] .mp-site :is(.mp-channel-strip, .muc-section, .mp-pricing, .mt-control-section) {
  background: var(--ob-site-section);
  border-color: var(--ob-separator);
}
html[data-website-theme='dark'] .mp-site .mp-header {
  background: color-mix(in srgb, var(--ob-canvas) 94%, transparent);
  border-color: var(--ob-separator);
}
html[data-website-theme='dark'] .mp-site .mh-bold::before { opacity: .45; }
html[data-website-theme='dark'] .mp-site :is(.mh-bold-window, .mp-demo-frame, .mcc-story, .mcs-workspace, .mt-board, .mpg-guide) {
  box-shadow: 0 24px 64px rgba(0,0,0,.2);
}
html[data-website-theme='dark'] .mp-site :is(.mh-arrival, .mh-bold-handoff) {
  background: var(--ob-surface);
  border-color: var(--ob-border);
}
html[data-website-theme='dark'] .mp-site :is(.mh-bold-window-heading, .mh-bold-compose) {
  background: var(--ob-surface);
}
html[data-website-theme='dark'] .mp-site .mh-bold-message-body { background: var(--ob-panel); }
html[data-website-theme='dark'] .mp-site .mh-bold-bubble.is-incoming {
  background: var(--ob-surface);
  border-color: var(--ob-border);
  color: var(--ob-ink);
}

/* Active controls use a quiet tint; solid buttons keep OmniBox's purple. */
html[data-website-theme='dark'] .mp-site .mp-console-link { border-color: var(--ob-action); }
html[data-website-theme='dark'] .mp-site .mp-demo-switch>button.is-active {
  background: var(--ob-accent-soft);
  border-color: var(--ob-accent-border);
}
html[data-website-theme='dark'] .mp-site .mp-price-workspace {
  border-color: var(--ob-accent-border);
  background: linear-gradient(150deg, var(--ob-accent-subtle), var(--ob-surface) 46%);
  box-shadow: inset 0 2px var(--ob-action);
}
html[data-website-theme='dark'] .mp-site .mp-price-workspace>.mp-plan-button { border-color: var(--ob-action); }
html[data-website-theme='dark'] .mp-site .mp-final-cta {
  background: linear-gradient(115deg, #3a2a78, #241c48 62%, #1c1734);
  border: 1px solid var(--ob-accent-border);
}
html[data-website-theme='dark'] .mp-site .mp-final-actions>.mp-button {
  background: #f3efff;
  color: #3b1f8c!important;
  border-color: #f3efff;
  box-shadow: none;
}
html[data-website-theme='dark'] .mp-site .mp-final-actions>.mp-button:hover { background: #ffffff; }
html[data-website-theme='dark'] .mp-site .mp-closing-light {
  background: radial-gradient(ellipse at 30% 35%,rgba(255,255,255,.04),transparent 40%), radial-gradient(ellipse at 80% 80%,rgba(255,255,255,.025),transparent 40%);
}
html[data-website-theme='dark'] .mp-site :is(.mf-scene-card, .mf-scene-pause) { box-shadow: 0 8px 20px rgba(0,0,0,.16); }
html[data-website-theme='dark'] .mp-site .mp-hero-backdrop-tile { box-shadow: 0 3px 12px rgba(0,0,0,.12); }