.switch {
  --primary: #f2ad32;
  --secondary: #191c24;
  --surface: #f1eee7;
  --on: var(--secondary);
  --off: color-mix(in srgb, var(--secondary) 22%, var(--surface));
  --thumb: var(--surface);
  position: relative;
  display: inline-flex;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.hero .fx-spotlight {
  --ink: #fff0c7;
  --ink-2: #f2ad32;
  --ink-3: #91aaff;
  color: var(--ink-2);
  font: inherit;
  letter-spacing: inherit;
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .hero .fx-spotlight {
    background: radial-gradient(3.5ch 100% at 50% 50%,
      var(--ink) 20%, var(--ink-2) 75%) 0 0 / 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: fx-spotlight 3.4s ease-in-out infinite alternate;
  }
}
@keyframes fx-spotlight {
  0% { background-position: 100% 0; }
  100% { background-position: 0% 0; }
}
@media (prefers-reduced-motion: reduce), (forced-colors: active) {
  .hero .fx-spotlight { animation: none; background: none; color: var(--ink-2); }
}
.switch input { position: absolute; opacity: 0; width: 0; height: 0; min-height: 0; margin: 0; padding: 0; border: 0; }
.switch .track {
  position: relative; width: 52px; height: 28px; border-radius: 9999px;
  background: var(--off);
  transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.switch .thumb {
  position: absolute; top: 3px; left: 3px; width: 22px; height: 22px;
  border-radius: 50%; background: var(--thumb);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s ease, box-shadow 0.3s ease;
}
.switch input:checked + .track { background: var(--on); }
.switch input:checked + .track .thumb { transform: translateX(24px); }
.switch input:focus-visible + .track { outline: 2px solid var(--primary); outline-offset: 2px; }
.sw-7 .track { background: var(--secondary); }
.sw-7 .thumb { background: #f2ad32; }
.sw-7 .thumb::after { content: "\2600"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; color: #78500e; }
.sw-7 input:checked + .track { background: var(--secondary); }
.sw-7 input:checked + .track .thumb { background: var(--surface); }
.sw-7 input:checked + .track .thumb::after { content: "\263E"; color: var(--secondary); }
.header .switch { margin: 0; min-height: 44px; align-items: center; flex-shrink: 0; }
.header:has(.switch) nav { margin-left: auto; }
@media(min-width: 901px) {
  .header .switch { position: fixed; top: 20px; right: 16px; z-index: 30; }
  .header:has(.switch) { padding-right: 60px; }
}
html:is([data-theme="dark"], :not([data-theme]):has(.sw-7 input:checked)) {
  color-scheme: dark;
  --bg: #222326; --panel: #2d2e32; --ink: #f1eee7;
  --muted: #bbb7af; --line: #54565e; --link: #91aaff; --accent: #f2ad32;
  background: var(--bg); color: var(--ink);
}
html:is([data-theme="dark"], :not([data-theme]):has(.sw-7 input:checked)) :is(.work, .journal-page, .service-page .header, .journal-page .header, .projects-page .header, .city-page .header, .city-page .city-hero) {
  color-scheme: dark;
  --bg: #222326; --panel: #2d2e32; --ink: #f1eee7;
  --muted: #bbb7af; --line: #54565e; --link: #91aaff; --accent: #f2ad32;
  color: var(--ink);
}
html:is([data-theme="dark"], :not([data-theme]):has(.sw-7 input:checked)) .work { background: var(--bg); }
html:is([data-theme="dark"], :not([data-theme]):has(.sw-7 input:checked)) .header .menu-toggle { color: #f1eee7; border-color: #93949b; }
html:is([data-theme="dark"], :not([data-theme]):has(.sw-7 input:checked)) .header .nav-contact { border-color: #93949b; }
html:is([data-theme="dark"], :not([data-theme]):has(.sw-7 input:checked)) :is(.tinted, .offer-seo, .analytics-consent) { background: var(--panel); }
html:is([data-theme="dark"], :not([data-theme]):has(.sw-7 input:checked)) :is(.offer-web, .service-brief, .performance-result) { background: #191c24; }
html:is([data-theme="dark"], :not([data-theme]):has(.sw-7 input:checked)) :is(.project-type, .process li>span, .product-links>a, .analytics-consent p) { color: var(--muted); }
html:is([data-theme="dark"], :not([data-theme]):has(.sw-7 input:checked)) :is(.service-page .header .brand span, .journal-page .header .brand span, .analytics-consent>a) { color: var(--link); }
html:is([data-theme="dark"], :not([data-theme]):has(.sw-7 input:checked)) :is(.analytics-consent, .analytics-consent h2, .analytics-consent button) { color: var(--ink); }
html:is([data-theme="dark"], :not([data-theme]):has(.sw-7 input:checked)) .analytics-consent button:hover { background: #3c3e45; }
html:is([data-theme="dark"], :not([data-theme]):has(.sw-7 input:checked)) :focus-visible { outline-color: #91aaff; }
html:is([data-theme="dark"], :not([data-theme]):has(.sw-7 input:checked)) .scope-items li::marker { color: #f2ad32; }
html:is([data-theme="dark"], :not([data-theme]):has(.sw-7 input:checked)) :is(.contact, .site-footer) { background: #191c24; }
html:is([data-theme="dark"], :not([data-theme]):has(.sw-7 input:checked)) .hero { background: #222326; }
html:is([data-theme="dark"], :not([data-theme]):has(.sw-7 input:checked)) .landscape:after {
  background: linear-gradient(180deg, #222326f5 0%, #222326e8 35%, #222326ae 54%, #22232626 78%, #222326 100%);
}
html:is([data-theme="dark"], :not([data-theme]):has(.sw-7 input:checked)) :is(input, textarea, select) { background: #222326; border-color: #93949b; }
html:is([data-theme="dark"], :not([data-theme]):has(.sw-7 input:checked)) .journal-footer-bottom { border-color: var(--line); }
html:is([data-theme="dark"], :not([data-theme]):has(.sw-7 input:checked)) :is(.blog-table-wrap, .blog-prose td, .blog-prose th) { border-color: #777983; }
html:is([data-theme="dark"], :not([data-theme]):has(.sw-7 input:checked)) :is(.catalog-feature, .extension-feature, .desktop-mouzi, .github-panel, .linkedin-panel, .blog-code-block) { background: #191c24; }
html:is([data-theme="dark"], :not([data-theme]):has(.sw-7 input:checked)) .service-local .service-brief { background: var(--panel); color: var(--ink); }
html:is([data-theme="dark"], :not([data-theme]):has(.sw-7 input:checked)) :is(.service-local .service-brief p, .desktop-rule-examples dd) { color: var(--muted); }
html:is([data-theme="dark"], :not([data-theme]):has(.sw-7 input:checked)) .service-local .service-brief li:first-child { color: var(--accent); }
html:is([data-theme="dark"], :not([data-theme]):has(.sw-7 input:checked)) .desktop-rule-examples dt { color: var(--ink); }
html:is([data-theme="dark"], :not([data-theme]):has(.sw-7 input:checked)) :is(.scope-list>div, .workflow-list li, .city-materials, .catalog-publication-list article, .extension-row, .desktop-rule-examples>div, .service-process li) { border-color: var(--line); }
html:is([data-theme="dark"], :not([data-theme]):has(.sw-7 input:checked)) :is(.city-map img, .local-map) { filter: invert(1) grayscale(1); mix-blend-mode: screen; }
html:is([data-theme="dark"], :not([data-theme]):has(.sw-7 input:checked)) .error-page { background: var(--bg); color: var(--ink); }
html:is([data-theme="dark"], :not([data-theme]):has(.sw-7 input:checked)) .error-number { color: var(--accent); }
.error-dot { color: var(--ink); }
.error-page .header { position: relative; color: var(--ink); --ink: inherit; }
.error-page .header .switch { margin-left: auto; }
html:is([data-theme="dark"], :not([data-theme]):has(.sw-7 input:checked)) .error-page .header { --ink: #f1eee7; }
html:is([data-theme="dark"], :not([data-theme]):has(.sw-7 input:checked)) .error-page footer { border-color: var(--line); }

@media(max-width: 900px) {
  .header:has(.switch) { gap: 14px; }
  .header:has(.switch) nav { gap: 16px; }
}
@media(max-width: 700px) {
  .header:has(.switch) .menu-toggle { margin-left: auto; }
  html:is([data-theme="dark"], :not([data-theme]):has(.sw-7 input:checked)) .header nav { background: #222326; color: #f1eee7; }
}
@media(prefers-reduced-motion: reduce) {
  .switch .track, .switch .thumb { animation: none; transition-duration: 0.01ms; }
}