/* skin.7c1d5a.css — Frost Glass palette (#eef2f6 frosted white, #bae6fd ice blue, slate ink) */
:root {
  --fg-bg-ground: #eef2f6;
  --fg-bg-gradient-top: #f4f7fb;
  --fg-bg-gradient-bottom: #e6eef7;
  --fg-glass-surface: rgba(255, 255, 255, 0.84);
  --fg-glass-strong: rgba(255, 255, 255, 0.93);
  --fg-glass-tint: rgba(224, 242, 254, 0.65);
  --fg-glass-warm: rgba(248, 250, 252, 0.92);
  --fg-ice-border: #bae6fd;
  --fg-slate-border: #cbd5e1;
  --fg-ink-primary: #0f172a;
  --fg-ink-secondary: #1e293b;
  --fg-ink-muted: #334155;
  --fg-accent-deep: #0c4a6e;
  --fg-accent-link: #0369a1;
  --fg-accent-hover: #075985;
  --fg-myth-pill-bg: #e0f2fe;
  --fg-myth-pill-ink: #0c4a6e;
  --fg-fact-pill-bg: #dcfce7;
  --fg-fact-pill-ink: #14532d;
  --fg-shadow-soft: 0 12px 32px -8px rgba(15, 23, 42, 0.07), 0 2px 6px -1px rgba(15, 23, 42, 0.04);
  --fg-radius-lg: 20px;
  --fg-radius-md: 14px;
  --fg-radius-sm: 10px;
}

body {
  background-color: var(--fg-bg-ground);
  background-image:
    radial-gradient(circle at 12% 8%, rgba(186, 230, 253, 0.55), transparent 42%),
    radial-gradient(circle at 88% 22%, rgba(224, 242, 254, 0.7), transparent 46%),
    linear-gradient(180deg, var(--fg-bg-gradient-top) 0%, var(--fg-bg-ground) 55%, var(--fg-bg-gradient-bottom) 100%);
  color: var(--fg-ink-primary);
}

a {
  color: var(--fg-accent-link);
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

a:hover {
  color: var(--fg-accent-hover);
}

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--fg-accent-link);
  outline-offset: 2px;
}

.fg-skip-link {
  background: var(--fg-accent-deep);
  color: #ffffff;
  border-radius: var(--fg-radius-sm);
  text-decoration: none;
}

.fg-topbar {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--fg-ice-border);
}

.fg-brand-link {
  color: var(--fg-ink-primary);
}

.fg-guide-badge {
  background: var(--fg-myth-pill-bg);
  color: var(--fg-myth-pill-ink);
  border: 1px solid var(--fg-ice-border);
  border-radius: 999px;
}

.fg-rail {
  background: var(--fg-glass-surface);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--fg-ice-border);
  border-radius: var(--fg-radius-lg);
  box-shadow: var(--fg-shadow-soft);
}

.fg-rail-heading {
  color: var(--fg-ink-muted);
}

.fg-rail-link {
  color: var(--fg-ink-secondary);
  border-radius: var(--fg-radius-sm);
  border: 1px solid transparent;
}

.fg-rail-link:hover {
  background: rgba(186, 230, 253, 0.35);
  border-color: var(--fg-ice-border);
  color: var(--fg-ink-primary);
}

.fg-rail-link[aria-current="page"] {
  background: var(--fg-myth-pill-bg);
  border-color: #7dd3fc;
  color: var(--fg-accent-deep);
  font-weight: 600;
}

.fg-hero,
.fg-myth-section,
.fg-toggle-panel,
.fg-howto-box,
.fg-next-bar,
.fg-sources {
  background: var(--fg-glass-surface);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--fg-ice-border);
  border-radius: var(--fg-radius-lg);
  box-shadow: var(--fg-shadow-soft);
}

.fg-hero {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.92) 0%, rgba(224, 242, 254, 0.65) 100%);
}

.fg-hero-kicker {
  color: var(--fg-accent-deep);
}

.fg-hero-lead {
  color: var(--fg-ink-secondary);
}

.fg-image {
  border-radius: var(--fg-radius-md);
  border: 1px solid var(--fg-ice-border);
  background: #dbeafe;
}

.fg-figcaption {
  color: var(--fg-ink-muted);
}

.fg-myth-tag {
  background: var(--fg-myth-pill-bg);
  color: var(--fg-myth-pill-ink);
  border: 1px solid #7dd3fc;
  border-radius: 999px;
}

.fg-callout {
  background: var(--fg-glass-strong);
  border: 1px solid var(--fg-slate-border);
  border-left: 4px solid var(--fg-accent-link);
  border-radius: var(--fg-radius-md);
}

.fg-callout-fact {
  background: rgba(240, 249, 255, 0.9);
  border-color: #7dd3fc;
  border-left: 4px solid var(--fg-accent-deep);
}

.fg-callout-questions {
  background: var(--fg-glass-warm);
  border-color: var(--fg-ice-border);
  border-left: 4px solid #0284c7;
}

.fg-toggle-btn {
  background: #ffffff;
  color: var(--fg-ink-secondary);
  border: 1px solid var(--fg-slate-border);
  border-radius: 999px;
}

.fg-toggle-btn:hover {
  background: var(--fg-myth-pill-bg);
  border-color: #7dd3fc;
  color: var(--fg-accent-deep);
}

.fg-toggle-btn[aria-pressed="true"] {
  background: var(--fg-accent-deep);
  color: #ffffff;
  border-color: var(--fg-accent-deep);
}

.fg-toggle-card {
  background: var(--fg-glass-strong);
  border: 1px solid var(--fg-ice-border);
  border-radius: var(--fg-radius-md);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, opacity 0.18s ease;
}

.fg-toggle-card[data-fg-active="true"] {
  border-color: var(--fg-accent-link);
  box-shadow: 0 8px 24px -6px rgba(3, 105, 161, 0.18);
}

.fg-toggle-card[data-fg-dimmed="true"] {
  opacity: 0.58;
}

.fg-step-card {
  background: var(--fg-glass-strong);
  border: 1px solid var(--fg-ice-border);
  border-radius: var(--fg-radius-md);
}

.fg-btn-link {
  background: var(--fg-accent-deep);
  color: #ffffff;
  border: 1px solid var(--fg-accent-deep);
  border-radius: 999px;
}

.fg-btn-link:hover {
  background: var(--fg-accent-hover);
  border-color: var(--fg-accent-hover);
  color: #ffffff;
}

.fg-btn-secondary {
  background: #ffffff;
  color: var(--fg-accent-deep);
  border: 1px solid #7dd3fc;
}

.fg-btn-secondary:hover {
  background: var(--fg-myth-pill-bg);
  color: var(--fg-accent-deep);
}

.fg-source-item {
  background: var(--fg-glass-strong);
  border: 1px solid var(--fg-slate-border);
  border-radius: var(--fg-radius-sm);
}

.fg-footer {
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--fg-ice-border);
  color: var(--fg-ink-secondary);
}