/**
 * Modern theme design tokens.
 *
 * Usage:
 * 1. Import after `base.css` to make the aliases available.
 * 2. Wrap the target DOM subtree in an element with the `.theme-modern` class.
 * 3. Toggle `[data-theme]` attributes inside that subtree to reuse the shared mode selectors.
 */

:root {
  --font-family-sans: "Inter", "Open Sans", "Helvetica Neue", Arial, sans-serif;
  --font-family-display: "Work Sans", "Russo One", "Helvetica Neue", Arial, sans-serif;
  --font-family-mono: "JetBrains Mono", "Fira Code", "Source Code Pro", monospace;
}

.theme-modern {
  /* Palette */
  --modern-color-background: #f4f6fb;
  --modern-color-surface: #ffffff;
  --modern-color-surface-muted: #e9edfb;
  --modern-color-border: rgba(15, 23, 42, 0.08);
  --modern-color-primary: #2563eb;
  --modern-color-primary-soft: #3b82f6;
  --modern-color-secondary: #8b5cf6;
  --modern-color-accent: #14b8a6;
  --modern-color-text: #0f172a;
  --modern-color-text-muted: #475569;
  --modern-color-text-inverted: #f8fafc;
  --modern-color-focus-ring: #c7d2fe;
  --modern-hero-visual-surface: color-mix(
    in srgb,
    var(--modern-color-surface) 92%,
    var(--modern-color-surface-muted) 8%
  );
  --modern-hero-visual-border: color-mix(in srgb, var(--modern-color-border) 75%, transparent);
  --modern-hero-chip-bg: color-mix(
    in srgb,
    var(--modern-color-primary) 16%,
    var(--modern-color-surface) 84%
  );
  --modern-hero-chip-bg-strong: color-mix(
    in srgb,
    var(--modern-color-primary) 28%,
    var(--modern-color-surface) 72%
  );
  --modern-hero-chip-bg-accent: color-mix(
    in srgb,
    var(--modern-color-accent) 24%,
    var(--modern-color-surface) 76%
  );
  --modern-hero-chip-text: var(--modern-color-text);
  --modern-hero-chip-text-inverted: var(--modern-color-text-inverted);
  --modern-hero-accent-gradient: linear-gradient(
    135deg,
    color-mix(in srgb, var(--modern-color-secondary) 42%, transparent) 0%,
    color-mix(in srgb, var(--modern-color-primary) 38%, transparent) 100%
  );
  --modern-hero-accent-glow: linear-gradient(
    180deg,
    color-mix(in srgb, var(--modern-color-accent) 28%, transparent) 0%,
    transparent 80%
  );

  /* Radii */
  --modern-radius-sm: 8px;
  --modern-radius-md: 12px;
  --modern-radius-lg: 20px;
  --modern-radius-full: 9999px;

  /* Shadows */
  --modern-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.08), 0 1px 1px rgba(15, 23, 42, 0.04);
  --modern-shadow-md: 0 8px 30px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15, 23, 42, 0.08);
  --modern-shadow-lg: 0 18px 45px rgba(15, 23, 42, 0.16);
  --modern-shadow-color-ambient: rgba(15, 23, 42, 0.16);
  --modern-shadow-color-strong: rgba(15, 23, 42, 0.22);
  --modern-shadow-color-accent: rgba(37, 99, 235, 0.26);

  /* Typography scale */
  --modern-font-size-xs: 0.75rem;
  --modern-font-size-sm: 0.875rem;
  --modern-font-size-md: 1rem;
  --modern-font-size-lg: 1.25rem;
  --modern-font-size-xl: 1.5rem;
  --modern-font-size-2xl: clamp(2rem, 4vw, 2.5rem);
  --modern-font-weight-regular: 400;
  --modern-font-weight-medium: 500;
  --modern-font-weight-semibold: 600;
  --modern-font-weight-bold: 700;
  --modern-letter-spacing-tight: -0.01em;
  --modern-letter-spacing-wide: 0.08em;

  /* Map shared tokens */
  --color-background: var(--modern-color-background);
  --color-surface: var(--modern-color-surface);
  --color-tertiary: var(--modern-color-surface-muted);
  --color-border: var(--modern-color-border);
  --color-primary: var(--modern-color-primary);
  --color-secondary: var(--modern-color-secondary);
  --color-text: var(--modern-color-text);
  --color-text-muted: var(--modern-color-text-muted);
  --color-text-inverted: var(--modern-color-text-inverted);
  --link-color: var(--modern-color-primary);
  --focus-outline-color: var(--modern-color-focus-ring);
  --button-bg: var(--modern-color-primary);
  --button-hover-bg: var(--modern-color-primary-soft);
  --button-active-bg: #1d4ed8;
  --button-text-color: var(--modern-color-text-inverted);
  --button-disabled-bg: #c4c8cf;
  --button-disabled-pattern: none;
  --switch-off-bg: #cbd2d8;
  --switch-on-bg: #6692f1;
  --color-slider-dot: rgba(15, 23, 42, 0.2);
  --color-slider-active: var(--modern-color-primary);
  --color-border-strong: rgba(15, 23, 42, 0.12);
  --shadow-base: var(--modern-shadow-sm);
  --shadow-hover: var(--modern-shadow-md);
  --radius-sm: var(--modern-radius-sm);
  --radius-md: var(--modern-radius-md);
  --radius-lg: var(--modern-radius-lg);
  --radius-pill: var(--modern-radius-full);
  --font-small: var(--modern-font-size-sm);
  --font-medium: var(--modern-font-size-md);
  --font-large: var(--modern-font-size-lg);
  --font-extra-large: var(--modern-font-size-2xl);
  --font-family-base: var(--font-family-sans);
  --font-family-heading: var(--font-family-display);
  --font-weight-regular: var(--modern-font-weight-regular);
  --font-weight-medium: var(--modern-font-weight-medium);
  --font-weight-semibold: var(--modern-font-weight-semibold);
  --font-weight-bold: var(--modern-font-weight-bold);
}

@supports (color: color-mix(in srgb, black 0%, white 100%)) {
  .theme-modern {
    --button-active-bg: color-mix(in srgb, var(--modern-color-primary) 82%, black 18%);
    --button-disabled-bg: color-mix(
      in srgb,
      var(--modern-color-text-muted) 32%,
      var(--modern-color-surface) 68%
    );
    --switch-off-bg: color-mix(
      in srgb,
      var(--modern-color-text-muted) 28%,
      var(--modern-color-surface) 72%
    );
    --switch-on-bg: color-mix(in srgb, var(--modern-color-primary) 70%, white 30%);
    --color-slider-dot: color-mix(in srgb, var(--modern-color-text) 20%, transparent);
    --color-border-strong: color-mix(in srgb, var(--modern-color-text) 12%, transparent);
  }

  .theme-modern[data-theme="dark"],
  .theme-modern [data-theme="dark"] {
    --button-disabled-bg: color-mix(
      in srgb,
      var(--modern-color-text-muted) 40%,
      var(--modern-color-surface) 60%
    );
    --switch-off-bg: color-mix(
      in srgb,
      var(--modern-color-text-muted) 32%,
      var(--modern-color-background) 68%
    );
    --switch-on-bg: color-mix(
      in srgb,
      var(--modern-color-primary) 70%,
      var(--modern-color-surface) 30%
    );
    --color-slider-dot: color-mix(in srgb, var(--modern-color-text) 35%, transparent);
  }

  .theme-modern[data-theme="retro"],
  .theme-modern [data-theme="retro"] {
    --button-hover-bg: color-mix(in srgb, var(--modern-color-primary) 75%, black 25%);
    --switch-off-bg: color-mix(
      in srgb,
      var(--modern-color-text) 18%,
      var(--modern-color-background) 82%
    );
  }
}

.theme-modern[data-theme="dark"],
.theme-modern [data-theme="dark"] {
  --modern-color-background: #0f172a;
  --modern-color-surface: #111827;
  --modern-color-surface-muted: #1e293b;
  --modern-color-border: rgba(148, 163, 184, 0.24);
  --modern-color-primary: #3b82f6;
  --modern-color-primary-soft: #60a5fa;
  --modern-color-secondary: #a855f7;
  --modern-color-accent: #22d3ee;
  --modern-color-text: #e2e8f0;
  --modern-color-text-muted: #94a3b8;
  --modern-color-text-inverted: #0f172a;
  --modern-color-focus-ring: rgba(96, 165, 250, 0.6);
  --modern-hero-visual-surface: color-mix(
    in srgb,
    var(--modern-color-surface) 88%,
    var(--modern-color-surface-muted) 12%
  );
  --modern-hero-visual-border: color-mix(in srgb, var(--modern-color-border) 80%, transparent);
  --modern-hero-chip-bg: color-mix(
    in srgb,
    var(--modern-color-primary) 32%,
    var(--modern-color-surface) 68%
  );
  --modern-hero-chip-bg-strong: color-mix(
    in srgb,
    var(--modern-color-secondary) 42%,
    var(--modern-color-surface) 58%
  );
  --modern-hero-chip-bg-accent: color-mix(
    in srgb,
    var(--modern-color-accent) 38%,
    var(--modern-color-surface) 62%
  );
  --modern-hero-chip-text: var(--modern-color-text);
  --modern-hero-chip-text-inverted: var(--modern-color-text-inverted);
  --modern-hero-accent-gradient: linear-gradient(
    135deg,
    color-mix(in srgb, var(--modern-color-secondary) 54%, transparent) 0%,
    color-mix(in srgb, var(--modern-color-primary) 42%, transparent) 100%
  );
  --modern-hero-accent-glow: linear-gradient(
    200deg,
    color-mix(in srgb, var(--modern-color-accent) 46%, transparent) 0%,
    transparent 85%
  );
  --shadow-base: 0 14px 35px rgba(2, 6, 23, 0.45);
  --shadow-hover: 0 22px 55px rgba(2, 6, 23, 0.6);
  --button-disabled-bg: #454f61;
  --switch-off-bg: #394357;
  --switch-on-bg: #2e62b7;
  --color-slider-dot: rgba(226, 232, 240, 0.35);
}

.theme-modern[data-theme="retro"],
.theme-modern [data-theme="retro"] {
  --modern-color-background: #05140d;
  --modern-color-surface: #061a0f;
  --modern-color-surface-muted: #072010;
  --modern-color-border: #4ae38f;
  --modern-color-primary: #9dff8a;
  --modern-color-primary-soft: #86f071;
  --modern-color-secondary: #9dff8a;
  --modern-color-accent: #36f1cd;
  --modern-color-text: #9dff8a;
  --modern-color-text-muted: #6ddb5f;
  --modern-color-text-inverted: #031f12;
  --modern-color-focus-ring: rgba(77, 227, 143, 0.6);
  --modern-hero-visual-surface: color-mix(
    in srgb,
    var(--modern-color-surface) 92%,
    var(--modern-color-background) 8%
  );
  --modern-hero-visual-border: color-mix(in srgb, var(--modern-color-border) 65%, transparent);
  --modern-hero-chip-bg: color-mix(
    in srgb,
    var(--modern-color-primary) 32%,
    var(--modern-color-background) 68%
  );
  --modern-hero-chip-bg-strong: color-mix(
    in srgb,
    var(--modern-color-primary) 48%,
    var(--modern-color-background) 52%
  );
  --modern-hero-chip-bg-accent: color-mix(
    in srgb,
    var(--modern-color-accent) 42%,
    var(--modern-color-background) 58%
  );
  --modern-hero-chip-text: var(--modern-color-text);
  --modern-hero-chip-text-inverted: var(--modern-color-text-inverted);
  --modern-hero-accent-gradient: linear-gradient(
    135deg,
    color-mix(in srgb, var(--modern-color-secondary) 52%, transparent) 0%,
    color-mix(in srgb, var(--modern-color-primary) 46%, transparent) 100%
  );
  --modern-hero-accent-glow: linear-gradient(
    200deg,
    color-mix(in srgb, var(--modern-color-accent) 48%, transparent) 0%,
    transparent 85%
  );
  --shadow-base: none;
  --shadow-hover: none;
  --button-hover-bg: #76bf67;
  --switch-off-bg: #203e23;
  --switch-on-bg: var(--modern-color-primary);
  --color-slider-dot: var(--modern-color-text);
  --color-slider-active: var(--modern-color-primary);
  --link-color: var(--modern-color-primary);
}

.theme-modern .header,
.theme-modern .modern-header {
  background-color: color-mix(
    in srgb,
    var(--modern-color-surface) 90%,
    var(--modern-color-surface-muted) 10%
  );
  background-image: linear-gradient(
    135deg,
    color-mix(in srgb, var(--modern-color-primary) 12%, transparent) 0%,
    color-mix(in srgb, var(--modern-color-secondary) 8%, transparent) 100%
  );
  color: var(--modern-color-text);
  box-shadow: var(--modern-shadow-sm);
}

.theme-modern .modern-header {
  display: flex;
  align-items: center;
}

.theme-modern .header a,
.theme-modern .header svg {
  color: inherit;
  fill: currentColor;
}

.theme-modern .logo-container {
  justify-content: flex-start;
  padding-inline-start: clamp(var(--space-sm), 4vw, var(--space-lg));
}

.theme-modern .logo-container a {
  border-radius: var(--modern-radius-md);
}

.theme-modern .logo {
  border-radius: var(--modern-radius-md);
}

@media (min-width: 960px) {
  .theme-modern .header {
    grid-template-columns: auto 1fr auto;
    padding-inline: clamp(var(--space-md), 5vw, var(--space-xl));
  }
}

.theme-modern .modern-header__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(0.5rem, 4vw, 1.5rem);
  width: min(1120px, 100%);
  margin: 0 auto;
  padding: clamp(0.25rem, 1.5vh, 0.5rem) clamp(0.5rem, 5vw, 2rem);
}

.theme-modern .modern-header__branding {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-family-heading);
  font-weight: var(--modern-font-weight-semibold);
  letter-spacing: var(--modern-letter-spacing-wide);
  text-transform: uppercase;
}

.theme-modern .modern-header__logo-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  border-radius: var(--modern-radius-pill);
  transition:
    background-color 0.2s ease,
    box-shadow 0.2s ease;
}

.theme-modern .modern-header__logo-link:hover,
.theme-modern .modern-header__logo-link:focus-visible {
  background-color: color-mix(in srgb, var(--modern-color-primary) 16%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--modern-color-primary) 16%, transparent);
}

.theme-modern .modern-header__logo-link:focus-visible {
  outline: 3px solid var(--modern-color-primary);
  outline-offset: 3px;
}

.theme-modern .modern-header__product {
  font-size: var(--modern-font-size-sm);
  color: var(--modern-color-text-muted);
}

.theme-modern .modern-header__breadcrumb ol {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: var(--modern-font-size-sm);
  color: var(--modern-color-text-muted);
}

.theme-modern .modern-header__breadcrumb a {
  color: inherit;
  text-decoration: none;
}

.theme-modern .modern-header__breadcrumb a:hover,
.theme-modern .modern-header__breadcrumb a:focus-visible {
  color: var(--modern-color-primary);
  text-decoration: underline;
}

.theme-modern .modern-header__breadcrumb li + li::before {
  content: "/";
  margin-inline: 0.25rem;
  color: color-mix(in srgb, var(--modern-color-text-muted) 70%, transparent);
}

.theme-modern .modern-header__actions {
  display: flex;
  justify-content: flex-end;
}

.theme-modern .modern-header__theme-toggle {
  display: grid;
  grid-template-columns: auto;
  gap: 0.25rem;
  text-align: right;
}

.theme-modern .modern-header__theme-label {
  font-size: var(--modern-font-size-xs);
  font-weight: var(--modern-font-weight-medium);
  color: var(--modern-color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--modern-letter-spacing-wide);
}

.theme-modern .modern-header__theme-controls {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.theme-modern .modern-header__theme-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: calc(0.25rem + 2px) 0.75rem;
  border-radius: var(--modern-radius-pill);
  border: 1px solid color-mix(in srgb, var(--modern-color-border) 60%, transparent);
  background: color-mix(in srgb, var(--modern-color-surface) 92%, transparent);
  color: var(--modern-color-text);
  font-size: var(--modern-font-size-xs);
  cursor: pointer;
  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.theme-modern .modern-header__theme-pill:hover,
.theme-modern .modern-header__theme-pill:focus-visible {
  border-color: var(--modern-color-primary);
  color: var(--modern-color-primary);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--modern-color-primary) 22%, transparent);
}

.theme-modern:not([data-theme]) .modern-header__theme-pill[for="header-display-mode-light"],
.theme-modern[data-theme="light"] .modern-header__theme-pill[for="header-display-mode-light"] {
  background: var(--modern-color-primary);
  border-color: var(--modern-color-primary);
  color: var(--modern-color-text-inverted);
  box-shadow: var(--modern-shadow-sm);
}

.theme-modern[data-theme="dark"] .modern-header__theme-pill[for="header-display-mode-dark"] {
  background: var(--modern-color-secondary);
  border-color: var(--modern-color-secondary);
  color: var(--modern-color-text-inverted);
  box-shadow: var(--modern-shadow-sm);
}

.theme-modern .modern-header__anchor {
  font-size: var(--modern-font-size-xs);
  color: var(--modern-color-primary);
  text-decoration: none;
  justify-self: end;
}

.theme-modern .modern-header__anchor:hover,
.theme-modern .modern-header__anchor:focus-visible {
  text-decoration: underline;
}

.theme-modern .settings-main {
  display: grid;
  gap: clamp(var(--space-lg), 4vw, var(--space-xxl));
  width: min(1120px, 100%);
  margin: 0 auto;
  padding-inline: clamp(var(--space-sm), 5vw, var(--space-xl));
}

.theme-modern .modern-hero {
  position: relative;
  display: grid;
  gap: clamp(var(--space-lg), 4vw, var(--space-xxl));
  padding: clamp(var(--space-xl), 6vw, var(--space-xxl));
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--modern-color-primary) 10%, transparent) 0%,
      color-mix(in srgb, var(--modern-color-accent) 5%, transparent) 100%
    ),
    var(--modern-color-surface);
  border: 1px solid color-mix(in srgb, var(--modern-color-border) 65%, transparent);
  border-radius: var(--modern-radius-lg);
  box-shadow: var(--modern-shadow-sm);
  overflow: hidden;
}

.theme-modern .modern-hero__layout {
  display: contents;
}

@media (min-width: 720px) {
  .theme-modern .modern-hero {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.65fr);
  }
}

.theme-modern .modern-hero::after {
  content: "";
  position: absolute;
  inset-block-start: -25%;
  inset-inline-end: -12%;
  inline-size: clamp(160px, 32vw, 280px);
  block-size: clamp(160px, 32vw, 280px);
  background: radial-gradient(
    circle at center,
    color-mix(in srgb, var(--modern-color-secondary) 35%, transparent) 0%,
    transparent 70%
  );
  opacity: 0.24;
  pointer-events: none;
}

.theme-modern .modern-hero__content {
  display: grid;
  gap: clamp(var(--space-md), 2vw, var(--space-xl));
  color: var(--modern-color-text);
  font-family: var(--font-family-sans);
}

.theme-modern .modern-hero__visual {
  position: relative;
  display: grid;
  place-items: center;
  padding: clamp(var(--space-md), 4vw, var(--space-xl));
}

.theme-modern .modern-hero__visual::before,
.theme-modern .modern-hero__visual::after {
  content: "";
  position: absolute;
  inline-size: clamp(132px, 26vw, 220px);
  block-size: clamp(132px, 26vw, 220px);
  border-radius: 32px;
  background: var(--modern-hero-accent-gradient);
  filter: blur(0.5px);
  opacity: 0.34;
  z-index: 0;
}

.theme-modern .modern-hero__visual::before {
  inset-block-end: clamp(-36px, -6vw, -16px);
  inset-inline-end: clamp(-28px, -4vw, -12px);
}

.theme-modern .modern-hero__visual::after {
  inset-block-start: clamp(-40px, -6vw, -18px);
  inset-inline-start: clamp(-30px, -4vw, -16px);
  background: var(--modern-hero-accent-glow);
  border-radius: 999px;
  filter: blur(20px);
  opacity: 0.36;
}

@media (prefers-reduced-motion: reduce) {
  .theme-modern .modern-hero__visual::before,
  .theme-modern .modern-hero__visual::after {
    filter: none;
    opacity: 0.3;
  }
}

.theme-modern .modern-hero-preview {
  position: relative;
  display: grid;
  gap: var(--space-md);
  padding: clamp(var(--space-lg), 4vw, var(--space-xl));
  background: var(--modern-hero-visual-surface);
  border: 1px solid var(--modern-hero-visual-border);
  border-radius: var(--modern-radius-lg);
  box-shadow: var(--modern-shadow-sm);
  max-inline-size: clamp(260px, 38vw, 360px);
  z-index: 1;
}

.theme-modern .modern-hero-preview__card {
  display: grid;
  gap: var(--space-md);
}

.theme-modern .modern-hero-preview__header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-family-sans);
  font-size: var(--modern-font-size-sm);
  font-weight: var(--modern-font-weight-medium);
  color: color-mix(in srgb, var(--modern-color-text) 85%, var(--modern-color-text-muted) 15%);
}

.theme-modern .modern-hero-preview__title {
  text-transform: uppercase;
  letter-spacing: var(--modern-letter-spacing-wide);
  font-size: var(--modern-font-size-xs);
}

.theme-modern .modern-hero-preview__dot {
  inline-size: 12px;
  block-size: 12px;
  border-radius: 999px;
  background: var(--modern-hero-chip-bg);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--modern-color-border) 40%, transparent);
}

.theme-modern .modern-hero-preview__dot--primary {
  background: var(--modern-hero-chip-bg-strong);
}

.theme-modern .modern-hero-preview__dot--accent {
  background: var(--modern-hero-chip-bg-accent);
}

.theme-modern .modern-hero-preview__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.theme-modern .modern-hero-preview-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding-block: 0.35rem;
  padding-inline: 0.85rem;
  border-radius: var(--modern-radius-full);
  font-size: var(--modern-font-size-xs);
  font-weight: var(--modern-font-weight-medium);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: var(--modern-hero-chip-bg);
  color: var(--modern-hero-chip-text);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--modern-color-surface) 35%, transparent);
}

.theme-modern .modern-hero-preview-chip--dark {
  background: var(--modern-hero-chip-bg-strong);
  color: var(--modern-hero-chip-text-inverted);
}

.theme-modern .modern-hero-preview-chip--accent {
  background: var(--modern-hero-chip-bg-accent);
}

.theme-modern .modern-hero__control-cluster {
  display: grid;
  gap: var(--space-md);
  margin-top: clamp(var(--space-lg), 3.5vw, var(--space-xl));
  padding: clamp(var(--space-sm), 2vw, var(--space-md));
  border: 1px solid
    color-mix(in srgb, var(--modern-color-primary) 20%, var(--modern-color-border) 80%);
  border-radius: var(--modern-radius-md);
  background: color-mix(in srgb, var(--modern-color-surface) 96%, var(--modern-color-primary) 4%);
}

.theme-modern .modern-hero__display-mode {
  border: 0;
  padding: 0;
  margin-top: 0;
  max-inline-size: min(680px, 100%);
}

.theme-modern .modern-hero__display-mode legend {
  margin: 0 0 var(--space-sm);
  font-size: var(--modern-font-size-sm);
  font-weight: var(--modern-font-weight-semibold);
  letter-spacing: var(--modern-letter-spacing-wide);
  text-transform: uppercase;
  color: color-mix(in srgb, var(--modern-color-text) 84%, var(--modern-color-text-muted) 16%);
}

.theme-modern .modern-hero__display-mode .display-mode-group {
  margin: 0;
  padding: clamp(0.75rem, 2vw, 1rem);
  border-radius: var(--modern-radius-lg);
  border: 1px solid
    color-mix(in srgb, var(--modern-color-primary) 36%, var(--modern-color-border) 64%);
  background: color-mix(in srgb, var(--modern-color-surface) 94%, var(--modern-color-primary) 6%);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--modern-color-primary) 20%, transparent),
    0 10px 24px color-mix(in srgb, var(--modern-shadow-color-accent) 12%, transparent);
}

.theme-modern .modern-hero__display-mode .display-mode-flex {
  gap: clamp(var(--space-sm), 2.2vw, var(--space-lg));
  flex-wrap: wrap;
  justify-content: flex-start;
}

.theme-modern .modern-hero__display-mode .display-mode-option {
  flex: 1 1 45%;
  min-inline-size: clamp(220px, 45%, 280px);
}

.theme-modern .modern-hero__display-mode .display-mode-option__pill {
  justify-content: flex-start;
  background: color-mix(in srgb, var(--modern-color-surface) 97%, var(--modern-color-primary) 3%);
  border: 1px solid color-mix(in srgb, var(--modern-color-border) 75%, transparent);
  color: color-mix(in srgb, var(--modern-color-text) 90%, var(--modern-color-text-muted) 10%);
  padding-block: clamp(0.75rem, 2.1vw, 1rem);
  padding-inline: clamp(1.2rem, 3vw, 1.6rem);
  font-size: var(--modern-font-size-sm);
  font-weight: var(--modern-font-weight-semibold);
  letter-spacing: 0.01em;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--modern-color-surface) 35%, transparent);
}

.theme-modern .modern-hero__display-mode .display-mode-option__icon {
  inline-size: clamp(2.25rem, 4.8vw, 2.75rem);
  block-size: clamp(2.25rem, 4.8vw, 2.75rem);
  border-radius: var(--modern-radius-full);
  background: color-mix(in srgb, var(--modern-color-primary) 26%, var(--modern-color-surface) 74%);
  color: color-mix(in srgb, var(--modern-color-primary) 92%, var(--modern-color-text) 8%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--modern-color-surface) 28%, transparent);
  transition:
    transform var(--transition-fast),
    background var(--transition-fast),
    color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.theme-modern .modern-hero__display-mode .display-mode-option__icon-svg {
  inline-size: 1.35rem;
  block-size: 1.35rem;
}

.theme-modern
  .modern-hero__display-mode
  .display-mode-option[data-mode="dark"]
  .display-mode-option__icon {
  background: color-mix(
    in srgb,
    var(--modern-color-secondary) 30%,
    var(--modern-color-surface) 70%
  );
  color: color-mix(in srgb, var(--modern-color-secondary) 82%, var(--modern-color-text) 18%);
}

.theme-modern
  .modern-hero__display-mode
  .display-mode-option[data-mode="retro"]
  .display-mode-option__icon {
  background: color-mix(in srgb, var(--modern-color-accent) 28%, var(--modern-color-surface) 72%);
  color: color-mix(in srgb, var(--modern-color-accent) 80%, var(--modern-color-text) 20%);
}

.theme-modern .modern-hero__display-mode .display-mode-option__label {
  flex: 1;
  text-align: left;
}

.theme-modern .modern-hero__display-mode .display-mode-option:hover .display-mode-option__pill {
  border-color: color-mix(in srgb, var(--modern-color-primary) 40%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--modern-color-surface) 35%, transparent),
    0 12px 26px color-mix(in srgb, var(--modern-shadow-color-accent) 22%, transparent);
}

.theme-modern .modern-hero__display-mode .display-mode-option:hover .display-mode-option__icon {
  transform: translateY(-1px);
}

.theme-modern
  .modern-hero__display-mode
  .display-mode-option
  input:checked
  + .display-mode-option__pill {
  background: color-mix(in srgb, var(--modern-color-primary) 18%, var(--modern-color-surface) 82%);
  border-color: color-mix(in srgb, var(--modern-color-primary) 62%, transparent);
  color: color-mix(in srgb, var(--modern-color-primary) 92%, var(--modern-color-text) 8%);
  box-shadow: 0 16px 38px color-mix(in srgb, var(--modern-shadow-color-accent) 38%, transparent);
}

.theme-modern
  .modern-hero__display-mode
  .display-mode-option[data-mode="dark"]
  input:checked
  + .display-mode-option__pill {
  background: color-mix(
    in srgb,
    var(--modern-color-secondary) 22%,
    var(--modern-color-surface) 78%
  );
  border-color: color-mix(in srgb, var(--modern-color-secondary) 60%, transparent);
  color: color-mix(in srgb, var(--modern-color-secondary) 88%, var(--modern-color-text) 12%);
  box-shadow: 0 16px 38px color-mix(in srgb, var(--modern-shadow-color-strong) 40%, transparent);
}

.theme-modern
  .modern-hero__display-mode
  .display-mode-option[data-mode="retro"]
  input:checked
  + .display-mode-option__pill {
  background: color-mix(in srgb, var(--modern-color-accent) 24%, var(--modern-color-surface) 76%);
  border-color: color-mix(in srgb, var(--modern-color-accent) 60%, transparent);
  color: color-mix(in srgb, var(--modern-color-accent) 88%, var(--modern-color-text) 12%);
  box-shadow: 0 16px 38px color-mix(in srgb, var(--modern-shadow-color-accent) 42%, transparent);
}

.theme-modern
  .modern-hero__display-mode
  .display-mode-option
  input:checked
  + .display-mode-option__pill
  .display-mode-option__icon {
  background: color-mix(in srgb, currentColor 35%, var(--modern-color-surface) 65%);
  color: color-mix(in srgb, currentColor 85%, var(--modern-color-text) 15%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--modern-color-surface) 35%, transparent);
  transform: translateY(-1px) scale(1.05);
}

.theme-modern
  .modern-hero__display-mode
  .display-mode-option
  input:focus-visible
  + .display-mode-option__pill {
  outline: none;
  box-shadow:
    0 0 0 3px var(--modern-color-focus-ring),
    0 16px 38px color-mix(in srgb, var(--modern-shadow-color-accent) 32%, transparent);
}

.theme-modern
  .modern-hero__display-mode
  .display-mode-option
  input:focus-visible
  + .display-mode-option__pill
  .display-mode-option__icon {
  transform: translateY(-1px) scale(1.08);
}

.theme-modern .modern-hero__eyebrow {
  font-size: var(--modern-font-size-xs);
  letter-spacing: var(--modern-letter-spacing-wide);
  font-weight: var(--modern-font-weight-medium);
  text-transform: uppercase;
  color: var(--modern-color-text-muted);
}

.theme-modern .modern-hero__description {
  color: color-mix(in srgb, var(--modern-color-text) 72%, var(--modern-color-text-muted) 28%);
  font-size: clamp(var(--modern-font-size-md), 2vw, var(--modern-font-size-lg));
  line-height: 1.6;
}

.theme-modern .modern-hero__actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
}

.theme-modern .modern-hero__cta {
  font-family: var(--font-family-sans);
  font-weight: var(--modern-font-weight-semibold);
  border: 1px solid color-mix(in srgb, var(--modern-color-primary) 35%, transparent);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--modern-shadow-color-accent) 26%, transparent);
}

.theme-modern .modern-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin: 0;
  padding: clamp(var(--space-lg), 4vw, var(--space-xl));
  background: var(--modern-color-surface);
  border: 1px solid color-mix(in srgb, var(--modern-color-border) 55%, transparent);
  border-radius: var(--modern-radius-lg);
  box-shadow: var(--modern-shadow-sm);
  transition:
    transform 220ms ease,
    box-shadow 220ms ease;
}

.theme-modern .modern-card:last-of-type {
  margin-bottom: 0;
}

.theme-modern .modern-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--modern-color-primary) 10%, transparent) 0%,
    transparent 55%
  );
  opacity: 0;
  transition: opacity 220ms ease;
  pointer-events: none;
}

.theme-modern .modern-card:hover,
.theme-modern .modern-card:focus-within {
  box-shadow: var(--modern-shadow-md);
  transform: translateY(-4px);
}

.theme-modern .modern-card:hover::before,
.theme-modern .modern-card:focus-within::before {
  opacity: 1;
}

.theme-modern .modern-card details {
  margin: 0;
}

.theme-modern form.settings-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(var(--space-lg), 4vw, var(--space-xxl));
  padding-block-end: calc(
    var(--space-xl) + var(--footer-height) + env(safe-area-inset-bottom) + var(--space-md)
  );
}

.theme-modern .settings-section summary {
  font-family: var(--font-family-sans);
  font-weight: var(--modern-font-weight-semibold);
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  letter-spacing: var(--modern-letter-spacing-tight);
  color: color-mix(in srgb, var(--modern-color-text) 96%, var(--modern-color-text-muted) 4%);
  background: color-mix(
    in srgb,
    var(--modern-color-surface-muted) 80%,
    var(--modern-color-surface) 20%
  );
  border: 1px solid color-mix(in srgb, var(--modern-color-border) 85%, transparent);
  border-radius: var(--modern-radius-md);
  padding-block: clamp(var(--space-sm), 2vh, var(--space-md));
  padding-inline: clamp(var(--space-md), 3vw, var(--space-lg));
  box-shadow: 0 6px 16px color-mix(in srgb, var(--modern-shadow-color-ambient) 18%, transparent);
  transition:
    color 220ms ease,
    background-color 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease;
}

.theme-modern .settings-section summary::after {
  inline-size: 0.75rem;
  block-size: 0.75rem;
  border-inline-end: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  transform-origin: center;
  transition: transform 220ms ease;
}

.theme-modern .settings-section[open] summary::after,
.theme-modern .settings-section--open summary::after {
  transform: rotate(225deg) translateY(1px);
}

.theme-modern .settings-section summary:hover,
.theme-modern .settings-section summary:focus-visible {
  background: color-mix(
    in srgb,
    var(--modern-color-primary-soft) 24%,
    var(--modern-color-surface) 76%
  );
  border-color: color-mix(in srgb, var(--modern-color-primary) 45%, var(--modern-color-border) 55%);
  color: var(--modern-color-text);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--modern-shadow-color-accent) 20%, transparent);
}

.theme-modern .modern-card form.settings-form fieldset {
  background: color-mix(in srgb, var(--modern-color-surface-muted) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--modern-color-border) 45%, transparent);
  border-radius: var(--modern-radius-md);
  padding: clamp(var(--space-md), 3vw, var(--space-lg));
  box-shadow: none;
}

.theme-modern .modern-card form.settings-form fieldset > * + * {
  margin-top: var(--space-md);
}

.theme-modern .modern-card form.settings-form fieldset:last-of-type {
  margin-bottom: 0;
}

.theme-modern .modern-card .settings-links-list {
  padding: 0;
}

.theme-modern .modern-card .centered-button-container {
  padding-top: var(--space-md);
}

.theme-modern form.settings-form legend,
.theme-modern form.settings-form label,
.theme-modern form.settings-form p,
.theme-modern form.settings-form a {
  font-family: var(--font-family-sans);
  color: color-mix(in srgb, var(--modern-color-text) 88%, var(--modern-color-text-muted) 12%);
}

.theme-modern form.settings-form a {
  font-weight: var(--modern-font-weight-medium);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 65%, transparent);
}

.theme-modern form.settings-form a:hover,
.theme-modern form.settings-form a:focus-visible {
  text-decoration-thickness: 3px;
}

@media (max-width: 768px) {
  .theme-modern .modern-header__inner {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: var(--space-sm);
  }

  .theme-modern .modern-header__actions {
    justify-content: center;
    width: 100%;
  }

  .theme-modern .modern-header__theme-toggle {
    justify-items: center;
    text-align: center;
  }

  .theme-modern .modern-header__anchor {
    justify-self: center;
  }

  .theme-modern .modern-card {
    padding-inline: var(--space-md);
  }
}

@media (min-width: 960px) {
  .theme-modern form#settings-form.settings-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .theme-modern .modern-card {
    transition: box-shadow 0.01ms linear;
  }

  .theme-modern .modern-card,
  .theme-modern .modern-card:hover,
  .theme-modern .modern-card:focus-within {
    transform: none;
  }

  .theme-modern .modern-card::before {
    transition: none;
  }

  .theme-modern .settings-section summary::after,
  .theme-modern .switch .slider,
  .theme-modern .switch .slider::before {
    transition-duration: 0.01ms;
  }

  .theme-modern .switch:hover,
  .theme-modern .switch:focus-within {
    background: color-mix(in srgb, var(--modern-color-surface-muted) 45%, transparent);
  }
}