/* Three appearance modes share the same reference artwork. */
:root { color-scheme: light; }
.theme-control {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  gap: 10px;
  min-width: 68px;
  min-height: 76px;
  --toggle-edge: #208ea4;
  --toggle-glow: #208ea435;
  --toggle-rim-light: #effeff;
  --toggle-rim-mid: #a7c6cd;
  --toggle-rim-dark: #315d67;
  --toggle-side: #35636f;
  --toggle-depth: #173d49;
  --toggle-shadow: #09232c55;
  color: var(--deep);
}
.theme-toggle {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  min-width: 52px;
  min-height: 52px;
  padding: 3px;
  background: linear-gradient(145deg, var(--toggle-rim-light), var(--toggle-rim-mid) 18%, var(--toggle-rim-dark) 48%, var(--toggle-rim-light) 74%, var(--toggle-rim-dark));
  border: 2px solid var(--toggle-edge);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: inset 0 1px 1px #ffffffc0, inset 0 -1px 2px #0006,
    0 1px 0 var(--toggle-side), 0 2px 0 var(--toggle-side),
    0 3px 0 var(--toggle-depth), 0 4px 0 var(--toggle-depth),
    0 5px 0 var(--toggle-depth), 0 8px 12px var(--toggle-shadow);
  transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease, filter 150ms ease;
}
.theme-toggle:hover { transform: translateY(-1px); filter: brightness(1.04); }
.theme-toggle:active {
  transform: translateY(4px);
  filter: brightness(.98);
  box-shadow: inset 0 1px 2px #0006, inset 0 -1px 1px #ffffff60,
    0 1px 0 var(--toggle-depth), 0 3px 5px var(--toggle-shadow);
}
.theme-toggle:focus-visible { outline: 3px solid var(--toggle-edge); outline-offset: 4px; }
.theme-symbol {
  display: block;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1px solid #07151fcc;
  background: #071219;
  box-shadow: 0 1px 0 #ffffff80;
}
.theme-symbol::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, #ffffff60, #ffffff18 32%, transparent 50%, #00000030);
  box-shadow: inset 0 1px 3px #ffffff80, inset 0 -2px 4px #00000060;
}
.theme-symbol img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08);
}
.theme-mode-label { display: block; font-size: 11px; font-weight: 700; line-height: 1.2; text-align: center; white-space: nowrap; }
html { scroll-padding-top: 128px; }
.more-menu { top: calc(100% + 10px); }
html[data-theme-mode='dark'] .theme-control {
  --toggle-edge: #bacbdd;
  --toggle-rim-light: #edf3fa;
  --toggle-rim-mid: #788795;
  --toggle-rim-dark: #263b49;
  --toggle-side: #536775;
  --toggle-depth: #1b2e39;
  --toggle-shadow: #00000090;
  color: #c8d8dc;
}
.theme-options { margin: 8px 4px 4px; padding: 10px 0 0; border: 0; border-top: 1px solid var(--line); min-inline-size: 0; }
.theme-options legend { font-size: 12px; font-weight: 700; padding: 0 8px; color: var(--muted); }
.theme-options label { display: flex; align-items: center; gap: 10px; padding: 11px 8px; min-height: 44px; font-size: 14px; border-radius: 8px; cursor: pointer; }
.theme-options label:hover { background: #e8f3f4; }
.theme-options label:has(input:checked) { color: var(--deep); font-weight: 700; background: #e8f3f4; }
.theme-options input { margin: 0; width: 18px; height: 18px; accent-color: var(--deep); }
.theme-options small { display: block; font-size: 11px; font-weight: 400; color: var(--muted); }
.theme-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 600px) {
  .theme-control { min-width: 58px; min-height: 64px; gap: 8px; }
  .theme-toggle { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
  .theme-mode-label { font-size: 10px; }
}
@media (max-width: 380px) {
  header { padding: 12px; }
  .brand { gap: 7px; font-size: 9px; letter-spacing: .4px; }
  .brand b { font-size: 11px; }
  .brand img { width: 32px; height: 32px; }
  .header-actions { gap: 4px; }
}
html[data-theme='dark'] .theme-options label:hover,
html[data-theme='dark'] .theme-options label:has(input:checked) { background: #18383e; }
@media (prefers-reduced-motion: reduce) {
  .theme-toggle { transition: none; }
  .theme-toggle:hover, .theme-toggle:active { transform: none; }
}