:root {
  color-scheme: light;
  --n4-color-primary: #0d9488;
  --n4-color-primary-hover: #0f766e;
  --n4-color-cyan: #06b6d4;
  --n4-color-indigo: #4f46e5;
  --n4-color-success: #10b981;
  --n4-color-warning: #d97706;
  --n4-color-danger: #e11d48;
  --n4-color-bg: #faf7f0;
  --n4-color-bg-alt: #f5f7fa;
  --n4-color-surface: #ffffff;
  --n4-color-border: #e2e8f0;
  --n4-color-text: #0f172a;
  --n4-color-muted: #475569;
  --n4-radius: 8px;
  --n4-radius-sm: 6px;
  --n4-shadow: 0 4px 16px -4px rgba(17, 24, 39, .08), 0 2px 4px -2px rgba(17, 24, 39, .04);
  --n4-font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --n4-font-display: "IBM Plex Sans", Inter, -apple-system, system-ui, sans-serif;
  --n4-font-mono: "JetBrains Mono", "Fira Code", "Cascadia Code", Consolas, monospace;
  --n4-grid-size: 52px;
}

:root[data-theme="dark"],
.n4-theme-dark {
  color-scheme: dark;
  --n4-color-primary: #2dd4bf;
  --n4-color-primary-hover: #5eead4;
  --n4-color-cyan: #22d3ee;
  --n4-color-indigo: #818cf8;
  --n4-color-bg: #0b1220;
  --n4-color-bg-alt: #0d1a2c;
  --n4-color-surface: #10233a;
  --n4-color-border: rgba(255, 255, 255, .12);
  --n4-color-text: rgba(255, 255, 255, .92);
  --n4-color-muted: rgba(255, 255, 255, .66);
  --n4-shadow: 0 4px 16px -4px rgba(0, 0, 0, .5);
}

.n4-app {
  background-color: var(--n4-color-bg);
  color: var(--n4-color-text);
  font-family: var(--n4-font-sans);
  letter-spacing: 0;
}

.n4-spectral-canvas {
  background-color: var(--n4-color-bg);
  background-image:
    radial-gradient(ellipse 90% 45% at 50% -8%, rgba(13, 148, 136, .07), transparent 70%),
    linear-gradient(rgba(20, 50, 48, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 50, 48, .035) 1px, transparent 1px);
  background-size: 100% 100%, var(--n4-grid-size) var(--n4-grid-size), var(--n4-grid-size) var(--n4-grid-size);
}

.n4-surface {
  background: var(--n4-color-surface);
  border: 1px solid var(--n4-color-border);
  border-radius: var(--n4-radius);
  box-shadow: var(--n4-shadow);
  color: var(--n4-color-text);
}

.n4-button {
  align-items: center;
  background: var(--n4-color-primary);
  border: 1px solid transparent;
  border-radius: var(--n4-radius-sm);
  color: #ffffff;
  display: inline-flex;
  font: 750 .9rem/1 var(--n4-font-sans);
  gap: .5rem;
  justify-content: center;
  min-height: 38px;
  padding: .65rem .85rem;
}

.n4-button:focus-visible,
.n4-button:hover {
  background: var(--n4-color-primary-hover);
  outline: 2px solid color-mix(in srgb, var(--n4-color-primary) 35%, transparent);
  outline-offset: 2px;
}

.n4-badge {
  align-items: center;
  border: 1px solid var(--n4-color-border);
  border-radius: 999px;
  color: var(--n4-color-muted);
  display: inline-flex;
  font: 800 .75rem/1 var(--n4-font-sans);
  min-height: 28px;
  padding: .45rem .6rem;
}

.n4-badge[data-tone="success"] {
  background: color-mix(in srgb, var(--n4-color-success) 14%, transparent);
  border-color: color-mix(in srgb, var(--n4-color-success) 32%, transparent);
  color: #087443;
}

.n4-badge[data-tone="warning"] {
  background: color-mix(in srgb, var(--n4-color-warning) 14%, transparent);
  border-color: color-mix(in srgb, var(--n4-color-warning) 32%, transparent);
  color: #9a4f00;
}

.n4-badge[data-tone="danger"] {
  background: color-mix(in srgb, var(--n4-color-danger) 12%, transparent);
  border-color: color-mix(in srgb, var(--n4-color-danger) 30%, transparent);
  color: #b42318;
}

.n4-panel-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

.n4-spectrum-strip {
  background: linear-gradient(90deg, var(--n4-color-primary-hover), var(--n4-color-primary), var(--n4-color-cyan), var(--n4-color-primary));
  background-size: 200% 100%;
  border-radius: 999px;
  height: 3px;
}

@media (prefers-reduced-motion: no-preference) {
  .n4-spectrum-strip {
    animation: n4-spectrum-strip 14s linear infinite;
  }
}

@keyframes n4-spectrum-strip {
  from { background-position: 0 0; }
  to { background-position: 200% 0; }
}