/* Canonical appearance selector extracted from the homepage. */
html { scrollbar-gutter: stable; }

:root {
  --appearance-unit: 1rem;
  --appearance-ink: var(--ink, var(--text, #f4f1f6));
  --appearance-muted: var(--ink-muted, var(--muted, #bbb7c4));
  --appearance-accent: var(--accent, #ed1e40);
  --appearance-night: var(--night, var(--bg, #0f0e16));
  --appearance-surface: var(--surface, #1a1822);
  --appearance-panel: #17151f;
  --appearance-panel-surface: #24212c;
  --appearance-line: rgba(244, 241, 246, 0.1);
  --appearance-shadow-color: rgba(0, 0, 0, 0.48);
  --appearance-header-height: var(--header-height, var(--chrome-header-height, 72px));
  --appearance-gutter: var(--gutter, var(--chrome-gutter, clamp(1.25rem, 4vw, 4rem)));
  --appearance-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

html[data-theme="light"] {
  --appearance-panel: #fffdfd;
  --appearance-panel-surface: #eee9ed;
  --appearance-line: rgba(25, 22, 31, 0.14);
  --appearance-shadow-color: rgba(38, 27, 36, 0.18);
}

html[data-theme="raf"] {
  --appearance-panel: #1f1d1a;
  --appearance-panel-surface: #232220;
  --appearance-line: #3a3530;
  --appearance-shadow-color: rgba(0, 0, 0, 0.52);
}

html[data-theme="kyle"] {
  --appearance-panel: #fffaf2;
  --appearance-panel-surface: #e9e1d6;
  --appearance-line: #d0c8bc;
  --appearance-shadow-color: rgba(52, 40, 29, 0.2);
}

html[data-theme="nomad"] {
  --appearance-panel: #111827;
  --appearance-panel-surface: #1e293b;
  --appearance-line: #334155;
  --appearance-shadow-color: rgba(0, 0, 0, 0.58);
}

html[data-theme="lime"] {
  --appearance-panel: #171916;
  --appearance-panel-surface: #23251f;
  --appearance-line: #394030;
  --appearance-shadow-color: rgba(0, 0, 0, 0.52);
}

html[data-theme="electric"] {
  --appearance-panel: #1b102c;
  --appearance-panel-surface: #2c1a43;
  --appearance-line: #56346d;
  --appearance-shadow-color: rgba(7, 3, 15, 0.64);
}

html[data-theme="ember"] {
  --appearance-panel: #211811;
  --appearance-panel-surface: #35251c;
  --appearance-line: #594131;
  --appearance-shadow-color: rgba(0, 0, 0, 0.56);
}

.settings-modal {
  font-family: "Geist Sans", "Avenir Next", "Helvetica Neue", sans-serif;
  font-size: var(--appearance-unit);
  line-height: normal;
  color-scheme: dark;
  color: var(--appearance-ink);
}
html[data-theme="light"] .settings-modal, html[data-theme="kyle"] .settings-modal { color-scheme: light; }
.settings-close, .settings-scrim, .sound-toggle { font-family: Arial, sans-serif; }

.settings-trigger {
  display: inline-grid;
  width: calc(2.75 * var(--appearance-unit));
  height: calc(2.75 * var(--appearance-unit));
  flex: 0 0 calc(2.75 * var(--appearance-unit));
  padding: 0;
  place-items: center;
  border: 1px solid var(--appearance-line);
  border-radius: 50%;
  background: var(--appearance-surface);
  color: var(--appearance-accent);
  cursor: pointer;
  transition: transform 180ms var(--appearance-ease), background-color 180ms ease, border-color 180ms ease;
}

.settings-trigger:hover {
  border-color: var(--appearance-accent);
  transform: translateY(calc(-0.125 * var(--appearance-unit)));
}

.settings-trigger svg {
  width: calc(1.3125 * var(--appearance-unit));
  height: calc(1.3125 * var(--appearance-unit));
  overflow: visible;
}

.settings-bolt-icon {
  transform-box: fill-box;
  transform-origin: center;
}

.settings-bolt-path {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.settings-trigger.is-animating .settings-bolt-icon {
  animation: settings-bolt-icon 700ms ease-in-out both;
}

@keyframes settings-bolt-icon {
  0%, 100% { transform: scale(1) rotate(0deg); }
  45% { transform: scale(1.08) rotate(-4deg); }
  75% { transform: scale(0.96) rotate(3deg); }
}

.settings-modal[hidden] {
  display: none;
}

.settings-modal {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  padding: calc(var(--appearance-header-height) + calc(0.75 * var(--appearance-unit))) max(var(--appearance-gutter), env(safe-area-inset-right)) calc(1.25 * var(--appearance-unit)) max(var(--appearance-gutter), env(safe-area-inset-left));
  align-items: start;
  justify-items: end;
}

.settings-scrim {
  position: absolute;
  inset: 0;
  border: 0;
  background: color-mix(in srgb, var(--appearance-ink) 12%, transparent);
  cursor: default;
}

html[data-theme="dark"] .settings-scrim,
html[data-theme="raf"] .settings-scrim,
html[data-theme="nomad"] .settings-scrim,
html[data-theme="lime"] .settings-scrim,
html[data-theme="electric"] .settings-scrim,
html[data-theme="ember"] .settings-scrim {
  background: rgba(0, 0, 0, 0.52);
}

.settings-panel {
  position: relative;
  width: min(calc(18 * var(--appearance-unit)), calc(100vw - (2 * var(--appearance-gutter))));
  padding: calc(1 * var(--appearance-unit));
  border: 1px solid var(--appearance-line);
  border-radius: calc(1.125 * var(--appearance-unit));
  background: var(--appearance-panel);
  color: var(--appearance-ink);
  box-shadow: 0 calc(1.5 * var(--appearance-unit)) calc(3.75 * var(--appearance-unit)) var(--appearance-shadow-color);
  animation: settings-panel-in 280ms var(--appearance-ease) both;
}

.settings-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(0.625 * var(--appearance-unit));
  margin-bottom: calc(0.625 * var(--appearance-unit));
}

.settings-panel h2 {
  margin: 0;
  font-size: calc(1 * var(--appearance-unit));
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.04em;
}

.settings-close {
  display: grid;
  width: calc(1.75 * var(--appearance-unit));
  height: calc(1.75 * var(--appearance-unit));
  padding: 0;
  place-items: center;
  border: 1px solid var(--appearance-line);
  border-radius: 50%;
  background: transparent;
  color: var(--appearance-ink);
  cursor: pointer;
  font-size: calc(1.125 * var(--appearance-unit));
  line-height: 1;
}

.theme-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(0.1875 * var(--appearance-unit));
  padding: calc(0.1875 * var(--appearance-unit));
  border-radius: calc(0.625 * var(--appearance-unit));
  background: var(--appearance-panel-surface);
}

.theme-option {
  min-height: calc(2.375 * var(--appearance-unit));
  padding: 0 calc(0.375 * var(--appearance-unit));
  border: 0;
  border-radius: calc(0.5 * var(--appearance-unit));
  background: transparent;
  color: var(--appearance-muted);
  cursor: pointer;
  font: inherit;
  font-size: calc(0.8125 * var(--appearance-unit));
  font-weight: 500;
  transition: color 180ms ease, background-color 180ms ease, transform 180ms var(--appearance-ease), box-shadow 180ms ease;
}

.theme-option:hover {
  color: var(--appearance-ink);
}

.theme-option.is-active {
  background: var(--appearance-night);
  color: var(--appearance-ink);
  box-shadow: 0 calc(0.125 * var(--appearance-unit)) calc(0.5 * var(--appearance-unit)) color-mix(in srgb, var(--appearance-ink) 10%, transparent);
}

.settings-sound {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(1 * var(--appearance-unit));
  margin-top: calc(1.125 * var(--appearance-unit));
}

.settings-sound h2 {
  margin: 0;
  color: var(--appearance-ink);
  font-size: calc(0.875 * var(--appearance-unit));
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.02em;
}

.sound-toggle {
  position: relative;
  width: calc(2.625 * var(--appearance-unit));
  height: calc(1.5 * var(--appearance-unit));
  flex: 0 0 calc(2.625 * var(--appearance-unit));
  padding: calc(0.1875 * var(--appearance-unit));
  border: 0;
  border-radius: 999px;
  background: var(--appearance-muted);
  cursor: pointer;
  transition: background-color 180ms ease;
}

.sound-toggle::after {
  display: block;
  width: calc(1.125 * var(--appearance-unit));
  height: calc(1.125 * var(--appearance-unit));
  border-radius: 50%;
  background: var(--appearance-night);
  box-shadow: 0 calc(0.125 * var(--appearance-unit)) calc(0.375 * var(--appearance-unit)) color-mix(in srgb, var(--appearance-ink) 24%, transparent);
  content: "";
  transform: translateX(0);
  transition: transform 220ms var(--appearance-ease);
}

.sound-toggle[aria-checked="true"] {
  background: var(--appearance-ink);
}

.sound-toggle[aria-checked="true"]::after {
  transform: translateX(calc(1.125 * var(--appearance-unit)));
}

@keyframes settings-panel-in {
  from { opacity: 0; transform: translateY(calc(-0.625 * var(--appearance-unit))) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}


.settings-panel { max-height: calc(100dvh - var(--appearance-header-height) - 2 * var(--appearance-unit)); overflow-y: auto; }
.settings-trigger:focus-visible, .settings-close:focus-visible, .theme-option:focus-visible, .sound-toggle:focus-visible {
  outline: 2px solid var(--appearance-ink);
  outline-offset: calc(.25 * var(--appearance-unit));
}
.desktop-nav a[aria-current], .mobile-nav a[aria-current], .case-jumps a[aria-current] { text-decoration: none; }
@media (prefers-reduced-motion: reduce) {
  .settings-trigger.is-animating .settings-bolt-icon, .settings-panel { animation: none; }
  .settings-trigger, .theme-option, .sound-toggle, .sound-toggle::after { transition-duration: .01ms; }
}