/* Layout: a nautical-chart page. Cool chart-paper ground, navy ink, one signal-orange accent
     (the colour of lifejackets and survival craft), bearing-line grid in the hero. */
  :root {
    --bg: #F2F5F7;        /* chart paper, slightly blue */
    --surface: #FFFFFF;
    --ink: #0B1F33;       /* navy ink */
    --muted: #4F6378;
    --line: #D3DCE4;
    --accent: #D9480F;    /* international orange */
    --accent-ink: #FFFFFF;
    --deep: #0A2740;      /* deep-water panels */
    --deep-fg: #E7EEF5;
    --deep-muted: #9FB4C8;
    --ok: #1F7A4D;
    --warn: #A15C07;
    --grid: rgba(11, 31, 51, 0.07);
    --contour: rgba(11, 31, 51, 0.16);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg: #06131F; --surface: #0C2034; --ink: #E7EEF5; --muted: #93A8BC; --line: #1B3550;
      --accent: #FF7433; --accent-ink: #0B1F33; --deep: #0E2B46; --deep-fg: #E7EEF5; --deep-muted: #9FB4C8;
      --ok: #45BE80; --warn: #EAA23B; --grid: rgba(231, 238, 245, 0.06); --contour: rgba(231, 238, 245, 0.14);
      color-scheme: dark;
    }
  }
  :root[data-theme="dark"] {
    --bg: #06131F; --surface: #0C2034; --ink: #E7EEF5; --muted: #93A8BC; --line: #1B3550;
    --accent: #FF7433; --accent-ink: #0B1F33; --deep: #0E2B46; --deep-fg: #E7EEF5; --deep-muted: #9FB4C8;
    --ok: #45BE80; --warn: #EAA23B; --grid: rgba(231, 238, 245, 0.06); --contour: rgba(231, 238, 245, 0.14);
    color-scheme: dark;
  }
  html { scroll-behavior: smooth; }
  body { background: var(--bg); color: var(--ink); font-family: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif; font-size: 16px; line-height: 1.6; }
  h1, h2, h3 { text-wrap: balance; }
  .display { font-family: "Archivo", "Arial Narrow", Arial, sans-serif; font-stretch: 112%; letter-spacing: -0.02em; }
  .eyebrow { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; }
  .prose-w { max-width: 62ch; }
  .chart-grid {
    background-image:
      linear-gradient(var(--grid) 1px, transparent 1px),
      linear-gradient(90deg, var(--grid) 1px, transparent 1px);
    background-size: 48px 48px;
  }
  #hero-chart { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
  .header-glass { background: color-mix(in srgb, var(--bg) 90%, transparent); }
  .chip-ok { background: color-mix(in srgb, var(--ok) 15%, transparent); }
  .tint-warn { background: color-mix(in srgb, var(--warn) 12%, transparent); }
  .step-rule { border-color: color-mix(in srgb, var(--deep-fg) 12%, transparent); }
  .step-rule-bg { background: color-mix(in srgb, var(--deep-fg) 12%, transparent); }
  .tab { font-variant-numeric: tabular-nums; }
  a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
    outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px;
  }
  .rise { animation: rise 700ms cubic-bezier(.2,.7,.2,1) both; }
  .rise-2 { animation-delay: 120ms; } .rise-3 { animation-delay: 240ms; }
  @keyframes rise { from { transform: translateY(10px); opacity: .001; } to { transform: none; opacity: 1; } }
  .meter { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
  .meter > span { display: block; height: 100%; background: var(--accent); transform-origin: left; animation: fill 1.2s 400ms cubic-bezier(.2,.7,.2,1) both; }
  @keyframes fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .rise, .meter > span { animation: none; }
  }