:root {
  color-scheme: light;
  --color-bg: #f8fafc;
  --color-surface: #ffffff;
  --color-surface-elevated: #f8fafc;
  --color-text: #0f172a;
  --color-text-muted: #475569;
  --color-border: #cbd5e1;
  --color-accent: #1e3a8a;
  --color-accent-strong: #0f2954;
  --color-accent-violet: #6d28d9;
  --color-accent-teal: #0f766e;
  --color-accent-amber: #b45309;
  --surface-shadow: 0 16px 36px rgba(15, 23, 42, 0.08);
  --surface-shadow-hover: 0 20px 42px rgba(15, 23, 42, 0.14);
  --glass-top: rgba(255, 255, 255, 0.82);
  --glass-bottom: rgba(255, 255, 255, 0.62);
  --overlay-backdrop: rgba(2, 6, 23, 0.78);
  --workflow-weather-1: #0f766e;
  --workflow-weather-2: #2563eb;
  --workflow-macro-1: #2563eb;
  --workflow-macro-2: #4f46e5;
  --workflow-themes-1: #4f46e5;
  --workflow-themes-2: #7c3aed;
  --workflow-mixer-1: #7c3aed;
  --workflow-mixer-2: #b45309;
  --workflow-outputs-1: #b45309;
  --workflow-outputs-2: #059669;
}

html.dark {
  color-scheme: dark;
  --color-bg: #020814;
  --color-surface: #0b1220;
  --color-surface-elevated: #111a2d;
  --color-text: #eef4ff;
  --color-text-muted: #a8b5c8;
  --color-border: #334766;
  --color-accent: #60a5fa;
  --color-accent-strong: #dbeafe;
  --color-accent-violet: #a78bfa;
  --color-accent-teal: #2dd4bf;
  --color-accent-amber: #f59e0b;
  --surface-shadow: 0 20px 42px rgba(2, 6, 23, 0.46);
  --surface-shadow-hover: 0 26px 54px rgba(2, 6, 23, 0.58);
  --glass-top: rgba(8, 15, 29, 0.9);
  --glass-bottom: rgba(11, 18, 32, 0.76);
  --overlay-backdrop: rgba(2, 6, 23, 0.86);
  --workflow-weather-1: #14b8a6;
  --workflow-weather-2: #60a5fa;
  --workflow-macro-1: #60a5fa;
  --workflow-macro-2: #818cf8;
  --workflow-themes-1: #818cf8;
  --workflow-themes-2: #a78bfa;
  --workflow-mixer-1: #a78bfa;
  --workflow-mixer-2: #f59e0b;
  --workflow-outputs-1: #f59e0b;
  --workflow-outputs-2: #34d399;
}

body {
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--color-accent) 10%, transparent), transparent 35%), var(--color-bg);
  color: var(--color-text);
}

.theme-muted { color: var(--color-text-muted); }
.theme-border { border-color: var(--color-border) !important; }
.theme-surface { background: var(--color-surface) !important; }
.theme-surface-elevated { background: var(--color-surface-elevated) !important; }

.public-header {
  background: color-mix(in srgb, var(--color-surface) 88%, transparent);
  border-bottom-color: color-mix(in srgb, var(--color-border) 56%, transparent);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--color-text) 8%, transparent);
}

.nav-link {
  position: relative;
  color: color-mix(in srgb, var(--color-text) 90%, var(--color-accent) 10%);
  transition: color .2s ease;
}

.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -0.35rem;
  width: 100%;
  height: 2px;
  border-radius: 999px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s ease;
  background: linear-gradient(90deg, var(--color-accent), var(--color-accent-violet));
}

.nav-link:hover,
.nav-link:focus-visible {
  color: var(--color-accent-strong);
}

.nav-link:hover::after,
.nav-link:focus-visible::after {
  transform: scaleX(1);
}

.theme-glass {
  background: linear-gradient(165deg, var(--glass-top), var(--glass-bottom));
  backdrop-filter: blur(10px);
}

.premium-panel {
  box-shadow: var(--surface-shadow);
  border-color: color-mix(in srgb, var(--color-border) 85%, transparent) !important;
}

.interactive-card {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.interactive-card:hover,
.interactive-card:focus-within {
  transform: translateY(-3px);
  box-shadow: var(--surface-shadow-hover);
  border-color: color-mix(in srgb, var(--color-accent-violet) 42%, var(--color-border)) !important;
}

.theme-toggle {
  min-height: 2.2rem;
  border: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
  color: var(--color-text);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 9%, transparent);
}

.theme-toggle[data-theme='dark'] {
  color: var(--color-accent-strong);
}

.theme-toggle[data-theme='light'] {
  color: color-mix(in srgb, var(--color-text) 88%, var(--color-accent) 12%);
}

.theme-toggle:hover {
  border-color: color-mix(in srgb, var(--color-accent) 48%, var(--color-border));
  background: color-mix(in srgb, var(--color-accent) 16%, var(--color-surface));
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.theme-toggle [data-theme-toggle-icon] {
  display: inline-flex;
  width: 1rem;
  height: 1rem;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.theme-toggle [data-theme-toggle-icon] svg {
  width: 1rem;
  height: 1rem;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#proof-lightbox > button[data-lightbox-close] {
  background: var(--overlay-backdrop);
}

.proof-card {
  position: relative;
}

.proof-card > button {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.proof-thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 68%, transparent);
  background: linear-gradient(145deg, color-mix(in srgb, var(--color-accent) 10%, var(--color-surface)), color-mix(in srgb, var(--color-accent-violet) 8%, var(--color-surface-elevated)));
}

.proof-image {
  position: absolute;
  inset: 0.95rem;
  width: calc(100% - 1.9rem);
  height: calc(100% - 1.9rem);
  display: block;
  object-fit: contain;
  object-position: center top;
  border-radius: 1rem;
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
  box-shadow: 0 14px 28px color-mix(in srgb, var(--color-text) 12%, transparent);
}

.proof-copy {
  display: block;
  padding: 1rem;
}

.proof-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.proof-caption {
  display: block;
  margin-top: 0.55rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: color-mix(in srgb, var(--color-text) 76%, var(--color-text-muted));
}

.proof-fallback {
  display: none;
  position: absolute;
  inset: 0.95rem;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  text-align: center;
  border-radius: 1rem;
  border: 1px dashed color-mix(in srgb, var(--color-border) 82%, transparent);
  background: color-mix(in srgb, var(--color-surface) 84%, transparent);
  color: var(--color-text-muted);
}

.proof-card[data-missing='true'] .proof-image {
  display: none;
}

.proof-card[data-missing='true'] .proof-fallback {
  display: flex;
}


.section-spotlight {
  position: relative;
  overflow: hidden;
}

.section-spotlight::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 85% 12%, color-mix(in srgb, var(--color-accent-violet) 16%, transparent), transparent 38%);
  pointer-events: none;
}

.section-spotlight > * {
  position: relative;
  z-index: 1;
}

.flow-chain-card {
  border: 1px solid color-mix(in srgb, var(--color-border) 82%, transparent);
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
}

.flow-chain-card .flow-index {
  display: inline-flex;
  width: 1.55rem;
  height: 1.55rem;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--color-accent-strong);
  background: color-mix(in srgb, var(--color-accent) 18%, var(--color-surface));
  border: 1px solid color-mix(in srgb, var(--color-accent) 32%, transparent);
}

.flow-divider {
  color: color-mix(in srgb, var(--color-accent-violet) 48%, var(--color-text-muted));
  font-weight: 600;
  display: none;
}

.workflow-plain {
  border: 1px solid color-mix(in srgb, var(--color-border) 82%, transparent);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--color-accent) 10%, var(--color-surface)), color-mix(in srgb, var(--color-accent-violet) 6%, var(--color-surface-elevated)));
  box-shadow: var(--surface-shadow);
}

.workflow-plain-list {
  display: grid;
  gap: 0.9rem;
}

.workflow-plain-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.8rem;
  align-items: start;
}

.workflow-card {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--color-border) 82%, transparent);
  background: color-mix(in srgb, var(--color-surface) 93%, transparent);
}

.workflow-card[open] {
  border-color: color-mix(in srgb, var(--color-accent) 34%, var(--color-border));
  box-shadow: var(--surface-shadow);
}

.workflow-card summary {
  list-style: none;
  cursor: pointer;
  padding: 1rem 1.05rem;
}

.workflow-card summary::-webkit-details-marker {
  display: none;
}

.workflow-card summary::marker {
  content: '';
}

.workflow-card .workflow-toggle {
  display: inline-flex;
  width: 1.9rem;
  height: 1.9rem;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--color-border) 82%, transparent);
  color: var(--color-accent-strong);
  background: color-mix(in srgb, var(--color-surface-elevated) 96%, transparent);
  transition: transform .22s ease, border-color .22s ease, background .22s ease;
}

.workflow-card[open] .workflow-toggle {
  transform: rotate(45deg);
  border-color: color-mix(in srgb, var(--color-accent) 40%, transparent);
  background: color-mix(in srgb, var(--color-accent) 18%, var(--color-surface));
}

.workflow-card .workflow-panel {
  padding: 0 1.05rem 1rem;
  border-top: 1px solid color-mix(in srgb, var(--color-border) 72%, transparent);
}

.workflow-card .workflow-meta {
  display: grid;
  gap: 0.75rem;
  margin-top: 0.95rem;
}

.workflow-card .workflow-meta-block {
  border: 1px solid color-mix(in srgb, var(--color-border) 76%, transparent);
  border-radius: 1rem;
  padding: 0.8rem;
  background: color-mix(in srgb, var(--color-surface-elevated) 92%, transparent);
}

.workflow-card .workflow-meta-label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
}

@media (min-width: 768px) {
  .workflow-card .workflow-meta {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .flow-divider { display: flex; align-items: center; justify-content: center; }
}

.cta-spotlight {
  background: linear-gradient(100deg, color-mix(in srgb, var(--color-accent) 94%, #1d4ed8), color-mix(in srgb, var(--color-accent-violet) 66%, #312e81));
  color: #fff;
  box-shadow: 0 14px 30px color-mix(in srgb, var(--color-accent) 28%, transparent);
}

.cta-spotlight:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 34px color-mix(in srgb, var(--color-accent-violet) 28%, transparent);
}