/* 两版主页共用的内嵌式样式切换器。主题差异由 data-home-variant 控制。 */
.home-switch-slot { display: flex; align-items: center; }

.home-switch {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: 7px;
  padding: 3px 4px 3px 9px;
  border: 1px solid var(--switch-line);
  border-radius: 6px;
  background: var(--switch-bg);
  color: var(--switch-ink);
  box-shadow: var(--switch-shadow);
}

.home-switch-caption {
  color: var(--switch-muted);
  font: 800 9px/1 "Courier New", monospace;
  letter-spacing: 1px;
  white-space: nowrap;
}

.home-switch-group {
  display: flex;
  gap: 2px;
}

.home-switch-option {
  display: inline-flex;
  min-width: 42px;
  min-height: 26px;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 3px;
  padding: 0 8px;
  color: var(--switch-muted);
  font: 900 10px/1 "Courier New", monospace;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 120ms ease, background-color 120ms ease, color 120ms ease;
}

.home-switch-option[aria-current="page"] {
  border-color: var(--switch-active-line);
  background: var(--switch-active-bg);
  color: var(--switch-active-ink);
  cursor: default;
}

a.home-switch-option:hover,
a.home-switch-option:focus-visible {
  border-color: var(--switch-hover-line);
  background: var(--switch-hover-bg);
  color: var(--switch-hover-ink);
  outline: none;
}

html[data-home-variant="gpt"] {
  --switch-line: rgba(255,255,255,.16);
  --switch-bg: #111419;
  --switch-ink: #f7f5ef;
  --switch-muted: #9ca2ab;
  --switch-active-line: #ffd145;
  --switch-active-bg: #ffd145;
  --switch-active-ink: #17130a;
  --switch-hover-line: #38d9d2;
  --switch-hover-bg: rgba(56,217,210,.12);
  --switch-hover-ink: #b9f5f1;
  --switch-shadow: 3px 3px 0 rgba(0,0,0,.34);
}

html[data-home-variant="claude"] {
  --switch-line: #d8d2c8;
  --switch-bg: #fbfaf7;
  --switch-ink: #1d2430;
  --switch-muted: #788393;
  --switch-active-line: #1d2430;
  --switch-active-bg: #1d2430;
  --switch-active-ink: #fbfaf7;
  --switch-hover-line: #b4472c;
  --switch-hover-bg: #f3e7e1;
  --switch-hover-ink: #91351f;
  --switch-shadow: 2px 2px 0 #ddd8cf;
}

@media (max-width: 620px) {
  .home-switch-caption { display: none; }
  .home-switch { padding-left: 4px; }
  .home-switch-option { min-width: 38px; padding-inline: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .home-switch-option { transition: none; }
}