html[data-site-theme="dark"], html[data-site-theme="dark"] body { background-color: #000; color-scheme: dark; }
html[data-site-theme="light"], html[data-site-theme="light"] body { background-color: #fff; color-scheme: light; }
html, body { min-height: 100%; }
html[data-initial-theme="dark"] .app {
  --bg:#000; --subtle:#000; --surface:#0a0a0a; --text:#ededed;
  --secondary:#a0a0a0; --muted:#8f8f8f; --border:#ffffff24;
  --soft:#1a1a1a; --solid:#ededed; --solidText:#000; --blue:#47a8ff;
  --shadow:0 1px 2px rgba(0,0,0,.16);
  color-scheme:dark; background:var(--bg); color:var(--text);
}
html[data-initial-theme] .app { transition: none; }
.app .theme-preference {
  max-width: 110px;
  min-height: 32px;
  padding: 4px 6px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--secondary);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.theme-preference:focus-visible { outline: 2px solid var(--secondary); outline-offset: 2px; }