/* Shared theme switch; the native product screenshots retain their actual appearance. */
.theme-toggle { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--hairline); border-radius: 50%; color: var(--text); background: transparent; cursor: pointer; }
.theme-toggle:hover { background: var(--glass-fill); }
.theme-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .theme-moon { display: none; }
:root[data-theme="light"] .theme-toggle .theme-sun { display: none; }
:root[data-theme="light"] .theme-toggle .theme-moon { display: block; }
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f7f8fa;
  --text: #181b22;
  --muted: #515966;
  --faint: #626c7a;
  --hairline: rgb(25 35 55 / .13);
  --accent: #323f54;
  --teal: #076ca8;
  --glass-fill: linear-gradient(180deg, #ffffff, #f0f2f6);
  --glass-float: rgb(255 255 255 / .88);
  --glass-rim: linear-gradient(155deg, rgb(25 35 55 / .18), rgb(25 35 55 / .07));
  --glass-inner: inset 0 0 0 1px rgb(25 35 55 / .11);
  --glass-drop: 0 8px 30px -16px rgb(25 35 55 / .18);
}
:root[data-theme="light"] h1 span { background: linear-gradient(110deg, #263244, #63728a, #263244) 0 0 / 220% 100%; background-clip: text; -webkit-background-clip: text; }
:root[data-theme="light"] .nav::before, :root[data-theme="light"] .nav.scrolled::before, :root[data-theme="light"] .replay-consent { background: var(--glass-float); box-shadow: var(--glass-inner), 0 8px 28px -12px rgb(25 35 55 / .2); }
:root[data-theme="light"] .lens { background: #e3e7ee; box-shadow: inset 0 0 0 1px rgb(25 35 55 / .08); }
:root[data-theme="light"] .button { color: #fff; background: linear-gradient(180deg, #303947, #1b222d); box-shadow: 0 4px 12px -6px rgb(25 35 55 / .35); }
:root[data-theme="light"] .button:hover { box-shadow: 0 6px 16px -6px rgb(25 35 55 / .35); }
:root[data-theme="light"] .button-ghost, :root[data-theme="light"] .button-ghost:hover { color: var(--text); background: #fff; box-shadow: var(--glass-inner), var(--glass-drop); }
:root[data-theme="light"] .feature-showcase:hover, :root[data-theme="light"] .feature-card:hover, :root[data-theme="light"] .plan:hover { box-shadow: var(--glass-inner), 0 14px 38px -22px rgb(25 35 55 / .24); }
:root[data-theme="light"] .plan-pro { --glass-rim: linear-gradient(155deg, #8da0bd, #d0d9e6); background: linear-gradient(180deg, #eaf0f8, #fff); }
:root[data-theme="light"] .cta { background: linear-gradient(180deg, #edf1f7, #fff); }
:root[data-theme="light"] .notch-stage, :root[data-theme="light"] .notch-stage:hover { background: linear-gradient(145deg, #e9edf3, #cbd4e1); box-shadow: inset 0 0 0 1px rgb(25 35 55 / .15), 0 20px 48px -28px rgb(25 35 55 / .28); }
:root[data-theme="light"] .notch-stage::after { background: none; box-shadow: none; }
:root[data-theme="light"] .desktop-menu { color: #394454; }
:root[data-theme="light"] .replay-consent-actions button { background: #e5e9f0; box-shadow: var(--glass-inner); }
:root[data-theme="light"] .replay-consent-actions button:hover { background: #d8dfea; }
:root[data-theme="light"] .replay-consent-actions button:last-child { color: #fff; background: #263244; box-shadow: none; }
:root[data-theme="light"] .guide-body kbd, :root[data-theme="light"] .guide-body .tip, :root[data-theme="light"] .guide-toc { background: #edf0f5; box-shadow: var(--glass-inner); }
:root[data-theme="light"] .guide-body .pro { color: #955000; background: #fff0d6; }
:root[data-theme="light"] .guide-body th, :root[data-theme="light"] .guide-body td { border-color: var(--hairline); }
:root[data-theme="light"] .article a:not(.button) { text-decoration-color: #8290a4; }
:root[data-theme="light"] .article td.yes { color: #237342; }
@media (max-width: 680px) {
  :root[data-theme="light"] .nav-notch { background: var(--glass-float); box-shadow: var(--glass-inner), var(--glass-drop); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root[data-theme="light"] .nav::before, :root[data-theme="light"] .nav-notch, :root[data-theme="light"] .replay-consent { background-color: #fff !important; }
}

/* System appearance still works if JavaScript is disabled. */
@media (prefers-color-scheme: light) {
:root:not([data-theme]) {
  color-scheme: light;
  --bg: #f7f8fa;
  --text: #181b22;
  --muted: #515966;
  --faint: #626c7a;
  --hairline: rgb(25 35 55 / .13);
  --accent: #323f54;
  --teal: #076ca8;
  --glass-fill: linear-gradient(180deg, #ffffff, #f0f2f6);
  --glass-float: rgb(255 255 255 / .88);
  --glass-rim: linear-gradient(155deg, rgb(25 35 55 / .18), rgb(25 35 55 / .07));
  --glass-inner: inset 0 0 0 1px rgb(25 35 55 / .11);
  --glass-drop: 0 8px 30px -16px rgb(25 35 55 / .18);
}
:root:not([data-theme]) h1 span { background: linear-gradient(110deg, #263244, #63728a, #263244) 0 0 / 220% 100%; background-clip: text; -webkit-background-clip: text; }
:root:not([data-theme]) .nav::before, :root:not([data-theme]) .nav.scrolled::before, :root:not([data-theme]) .replay-consent { background: var(--glass-float); box-shadow: var(--glass-inner), 0 8px 28px -12px rgb(25 35 55 / .2); }
:root:not([data-theme]) .lens { background: #e3e7ee; box-shadow: inset 0 0 0 1px rgb(25 35 55 / .08); }
:root:not([data-theme]) .button { color: #fff; background: linear-gradient(180deg, #303947, #1b222d); box-shadow: 0 4px 12px -6px rgb(25 35 55 / .35); }
:root:not([data-theme]) .button:hover { box-shadow: 0 6px 16px -6px rgb(25 35 55 / .35); }
:root:not([data-theme]) .button-ghost, :root:not([data-theme]) .button-ghost:hover { color: var(--text); background: #fff; box-shadow: var(--glass-inner), var(--glass-drop); }
:root:not([data-theme]) .feature-showcase:hover, :root:not([data-theme]) .feature-card:hover, :root:not([data-theme]) .plan:hover { box-shadow: var(--glass-inner), 0 14px 38px -22px rgb(25 35 55 / .24); }
:root:not([data-theme]) .plan-pro { --glass-rim: linear-gradient(155deg, #8da0bd, #d0d9e6); background: linear-gradient(180deg, #eaf0f8, #fff); }
:root:not([data-theme]) .cta { background: linear-gradient(180deg, #edf1f7, #fff); }
:root:not([data-theme]) .notch-stage, :root:not([data-theme]) .notch-stage:hover { background: linear-gradient(145deg, #e9edf3, #cbd4e1); box-shadow: inset 0 0 0 1px rgb(25 35 55 / .15), 0 20px 48px -28px rgb(25 35 55 / .28); }
:root:not([data-theme]) .notch-stage::after { background: none; box-shadow: none; }
:root:not([data-theme]) .desktop-menu { color: #394454; }
:root:not([data-theme]) .replay-consent-actions button { background: #e5e9f0; box-shadow: var(--glass-inner); }
:root:not([data-theme]) .replay-consent-actions button:hover { background: #d8dfea; }
:root:not([data-theme]) .replay-consent-actions button:last-child { color: #fff; background: #263244; box-shadow: none; }
:root:not([data-theme]) .guide-body kbd, :root:not([data-theme]) .guide-body .tip, :root:not([data-theme]) .guide-toc { background: #edf0f5; box-shadow: var(--glass-inner); }
:root:not([data-theme]) .guide-body .pro { color: #955000; background: #fff0d6; }
:root:not([data-theme]) .guide-body th, :root:not([data-theme]) .guide-body td { border-color: var(--hairline); }
:root:not([data-theme]) .article a:not(.button) { text-decoration-color: #8290a4; }
:root:not([data-theme]) .article td.yes { color: #237342; }
@media (max-width: 680px) {
  :root:not([data-theme]) .nav-notch { background: var(--glass-float); box-shadow: var(--glass-inner), var(--glass-drop); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root:not([data-theme]) .nav::before, :root:not([data-theme]) .nav-notch, :root:not([data-theme]) .replay-consent { background-color: #fff !important; }
}

}