:root {
  color-scheme: light dark;
  --color-brand-50: #eefbff;
  --color-brand-100: #d6f5ff;
  --color-brand-200: #a3ebff;
  --color-brand-300: #5cdcff;
  --color-brand-400: #00d2ff;
  --color-brand-500: #00a8cc;
  --color-brand-600: #0088a8;
  --color-brand-700: #006d88;
  --color-brand-800: #005870;
  --color-brand-900: #00485d;
  --brand-gradient: linear-gradient(90deg, #00d2ff, #928dab);
  --cta-fill: linear-gradient(90deg, #5cdcff, #16c6f5);
  --brand-gradient-decorative: var(--text);
  --radius-card: 16px;
  --radius-input: 12px;
  --radius-cta: 999px;
  --mat-environment: #fafafa;
  --mat-document: #ffffff;
  --mat-chrome: rgba(250, 250, 250, 0.72);
  --mat-sheet: #ffffff;
  --chrome-blur: 20px;
  --bg: var(--mat-environment);
  --panel: var(--mat-document);
  --surface-subtle: #f3f4f6;
  --line: #e5e7eb;
  --line-strong: #cfd3d8;
  --text: #1a1a1a;
  --muted: #6b7280;
  --ink: var(--text);
  --ink-muted: var(--muted);
  --soft: var(--surface-subtle);
  --subtle-surface: var(--surface-subtle);
  --accent: var(--color-brand-600);
  --blue: var(--color-brand-600);
  --green: #0f7b57;
  --amber: #a15c12;
  --red: #b42318;
  --violet: #655f7b;
  --gray: #68706f;
  --focus-ring: #00788a;
  --focus-halo: rgba(0, 136, 168, 0.24);
  --interactive-text: var(--color-brand-700);
  --text-on-brand: #ffffff;
  --map-route-line: #6b7280;
  --surface-user: #f3f4f6;
  --surface-info: color-mix(in srgb, var(--mat-document) 94%, var(--color-brand-600));
  --surface-positive: color-mix(in srgb, var(--mat-document) 94%, var(--green));
  --surface-warning: color-mix(in srgb, var(--mat-document) 94%, var(--amber));
  --surface-danger: color-mix(in srgb, var(--mat-document) 94%, var(--red));
  --node-surface-actor: #fafafa;
  --node-surface-artifact: #fafafa;
  --node-surface-risk: #fafafa;
  --weak-text: #4b5563;
  --drawer-width: 420px;
  --shadow: 0 10px 30px rgba(29, 29, 31, 0.05);
  --soft-shadow: 0 24px 64px rgba(29, 29, 31, 0.12);
  --document-shadow: 0 14px 36px rgba(17, 24, 39, 0.08);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --node-reserved-min-height: 22rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --mat-environment: #1a1a1a;
    --mat-document: color-mix(in srgb, #fafafa 7%, #1a1a1a);
    --mat-chrome: rgba(28, 29, 33, 0.72);
    --mat-sheet: var(--mat-document);
    --surface-subtle: color-mix(in srgb, var(--mat-document) 92%, #fafafa);
    --line: rgba(229, 231, 235, 0.14);
    --line-strong: rgba(229, 231, 235, 0.28);
    --text: rgba(250, 250, 250, 0.92);
    --muted: rgba(229, 231, 235, 0.62);
    --ink: var(--text);
    --ink-muted: var(--muted);
    --soft: var(--surface-subtle);
    --subtle-surface: var(--surface-subtle);
    --accent: rgba(250, 250, 250, 0.84);
    --blue: rgba(250, 250, 250, 0.78);
    --green: #79c8a6;
    --amber: #e2b878;
    --red: #f2a29a;
    --violet: #b8b1cd;
    --gray: rgba(229, 231, 235, 0.66);
    --focus-ring: #5cdcff;
    --focus-halo: rgba(92, 220, 255, 0.22);
    --interactive-text: rgba(250, 250, 250, 0.84);
    --map-route-line: rgba(229, 231, 235, 0.5);
    --surface-user: color-mix(in srgb, var(--mat-document) 91%, #fafafa);
    --surface-info: color-mix(in srgb, var(--mat-document) 96%, #fafafa);
    --surface-positive: color-mix(in srgb, var(--mat-document) 94%, var(--green));
    --surface-warning: color-mix(in srgb, var(--mat-document) 94%, var(--amber));
    --surface-danger: color-mix(in srgb, var(--mat-document) 94%, var(--red));
    --node-surface-actor: color-mix(in srgb, var(--mat-document) 97%, #fafafa);
    --node-surface-artifact: color-mix(in srgb, var(--mat-document) 96%, #fafafa);
    --node-surface-risk: color-mix(in srgb, var(--mat-document) 94%, var(--red));
    --weak-text: rgba(229, 231, 235, 0.72);
    --shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
    --soft-shadow: 0 24px 64px rgba(0, 0, 0, 0.34);
    --document-shadow: 0 16px 38px rgba(0, 0, 0, 0.3);
  }
}

* { box-sizing: border-box; }
html { min-width: 0; height: 100%; background: var(--bg); scroll-behavior: smooth; }
body {
  display: grid; grid-template-rows: auto minmax(0, 1fr);
  margin: 0;
  min-width: 0;
  min-height: 0;
  height: 100svh;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font: 100%/1.55 "Inter", "Noto Sans SC", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
button, textarea { font: inherit; }
button { color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px var(--focus-halo);
}
button:disabled { cursor: wait; opacity: 0.55; }
h1, h2, h3, p { margin-block: 0; }
h1, h2, h3 { text-wrap: balance; }
h1, h2 { letter-spacing: -0.025em; }
h1 { font-size: clamp(1.35rem, 2vw, 1.75rem); line-height: 1.18; }
h2 { font-size: clamp(1.25rem, 1.8vw, 1.55rem); line-height: 1.2; }
h3 { font-size: 0.98rem; line-height: 1.32; letter-spacing: -0.012em; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; z-index: 1000; inset: 0 auto auto 0; padding: 0.65rem 0.9rem;
  background: var(--text); color: var(--mat-document); transform: translateY(-120%);
}
.skip-link:focus { transform: translateY(0); }
.eyebrow {
  margin-bottom: 0.25rem; color: var(--muted); font-size: 0.69rem;
  font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}