@font-face { font-family: "Unbounded"; font-weight: 500; font-style: normal; font-display: swap; src: url("/fonts/unbounded-latin-500-normal.woff2") format("woff2"); }
  @font-face { font-family: "Unbounded"; font-weight: 700; font-style: normal; font-display: swap; src: url("/fonts/unbounded-latin-700-normal.woff2") format("woff2"); }
  @font-face { font-family: "Manrope"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/manrope-latin-400-normal.woff2") format("woff2"); }
  @font-face { font-family: "Manrope"; font-weight: 600; font-style: normal; font-display: swap; src: url("/fonts/manrope-latin-600-normal.woff2") format("woff2"); }
  @font-face { font-family: "Manrope"; font-weight: 700; font-style: normal; font-display: swap; src: url("/fonts/manrope-latin-700-normal.woff2") format("woff2"); }
  @font-face { font-family: "JetBrains Mono"; font-weight: 500; font-style: normal; font-display: swap; src: url("/fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2"); }
  *, *::before, *::after { box-sizing: border-box; }
  [hidden] { display: none !important; }
  img { max-width: 100%; }

  :root {
    color-scheme: dark;
    --bg: #0d1120;
    --panel: #141a2d;
    --panel-2: #1a2238;
    --line: #28324d;
    --text: #ebe8df;
    --muted: #97a0b6;
    --ocean: #173a5e;
    --land: #d9c8a0;
    --start: #ff8a3d;
    --exit: #8fe3ee;
    --display: "Unbounded", "Arial Black", system-ui, sans-serif;
    --body: "Manrope", "Segoe UI", system-ui, sans-serif;
    --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  }
  html, body { background: var(--bg); color: var(--text); }
  body { margin: 0; -webkit-text-size-adjust: 100%; }
  a { color: var(--exit); }
  body {
    font-family: var(--body); font-size: 15px; line-height: 1.55;
    padding-inline: 16px; padding-block: 28px 40px;
    background: radial-gradient(1200px 600px at 20% 0%, #182246 0%, var(--bg) 60%) fixed;
  }
  .wrap { max-width: 1120px; margin: 0 auto; display: grid; gap: 28px; }
  header { display: grid; gap: 8px; }
  .eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--start); }
  h1 { font-family: var(--display); font-weight: 700; font-size: clamp(28px, 5vw, 48px); line-height: 1.05; margin: 0; text-wrap: balance; }
  .lede { color: var(--muted); max-width: 60ch; margin: 0; font-size: 16px; }

  .grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 24px; align-items: start; }
  @media (max-width: 860px) { .grid { grid-template-columns: 1fr; } }

  .globe-box { position: relative; display: grid; gap: 12px; }
  .stage { position: relative; }
  #globe { width: 100%; aspect-ratio: 1 / 1; max-width: 100%; display: block; cursor: grab; touch-action: none; }
  #globe.dragging { cursor: grabbing; }
  #globe { border-radius: 50%; }
  #tunnel { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 50%;
    opacity: 0; pointer-events: none; box-shadow: 0 0 60px rgba(255,138,61,.25); }
  #tunnel.on { opacity: 1; }
  /* the dive goes through darkness, which also hides the swap between the two canvases.
     its opacity is animated from JS, in step with the rest of the flight. */
  .blackout { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 50%; z-index: 3;
    background: #000; opacity: 0; pointer-events: none; }
  .legend { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; color: var(--muted); align-items: center; }
  .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
  .seg { margin-left: auto; display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; gap: 2px; }
  .seg button { font: 600 13px var(--body); color: var(--muted); background: none; border: 0; padding: 6px 12px; border-radius: 999px; cursor: pointer; }
  .seg button[aria-pressed="true"] { background: var(--panel-2); color: var(--text); }

  .panel { display: grid; gap: 18px; }
  .controls { display: grid; gap: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
  label { font-size: 13px; color: var(--muted); font-weight: 600; }
  .row { display: flex; gap: 10px; flex-wrap: wrap; }
  select {
    flex: 1 1 180px; min-width: 0; font: 600 15px var(--body); color: var(--text);
    background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
  }
  #dig {
    flex: 0 0 auto; font: 700 15px var(--display); letter-spacing: .02em; color: #1b0f05;
    background: var(--start); border: 0; border-radius: 10px; padding: 10px 22px; cursor: pointer;
    box-shadow: 0 0 0 0 rgba(255,138,61,.5); transition: transform .15s, box-shadow .2s;
  }
  #dig:hover { transform: translateY(-1px); box-shadow: 0 6px 24px -6px rgba(255,138,61,.7); }
  #dig:disabled { opacity: .5; cursor: progress; transform: none; }
  :focus-visible { outline: 2px solid var(--exit); outline-offset: 2px; }
  .hint { font-size: 13px; color: var(--muted); margin: 0; }
  .coords { font-family: var(--mono); font-size: 13px; color: var(--text); }

  .xsec { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px; display: grid; gap: 12px; }
  #xsec { width: 100%; height: 260px; display: block; }
  .readouts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
  @media (max-width: 480px) { .readouts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .ro { display: grid; gap: 2px; }
  .ro span { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
  .ro b { font-family: var(--mono); font-weight: 500; font-size: 15px; font-variant-numeric: tabular-nums; line-height: 1.3; }

  .result { border-radius: 14px; padding: 18px; background: linear-gradient(160deg, #1d2a45, var(--panel)); border: 1px solid #33456b; display: grid; gap: 6px; }
  .result .eyebrow { color: var(--exit); }
  .result h2 { font-family: var(--display); font-weight: 700; font-size: clamp(22px, 3.4vw, 30px); line-height: 1.1; margin: 0; text-wrap: balance; }
  .result p { margin: 0; color: var(--muted); }
  .result .coords { color: var(--exit); }
  .result.pending h2 { color: var(--muted); }

  .facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  @media (max-width: 760px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .fact { border-top: 1px solid var(--line); padding-top: 12px; display: grid; gap: 4px; }
  .fact b { font-family: var(--display); font-weight: 500; font-size: 22px; font-variant-numeric: tabular-nums; }
  .fact span { font-size: 13px; color: var(--muted); }
  footer { font-size: 12px; color: var(--muted); }
  @media (prefers-reduced-motion: reduce) { #dig { transition: none; } }

  .dot-start { background: var(--start); }
  .dot-exit { background: var(--exit); }
  .loading { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: var(--muted); font-size: 14px; pointer-events: none; }
  .ghost {
    justify-self: start; font: 600 14px var(--body); color: var(--text); background: none; cursor: pointer;
    border: 1px solid var(--line); border-radius: 10px; padding: 8px 14px; display: inline-flex; gap: 8px; align-items: center;
  }
  .ghost:hover { border-color: #3e4c72; background: var(--panel-2); }
  .ghost:disabled { opacity: .6; cursor: progress; }
  .ghost::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--start); box-shadow: 0 0 0 3px rgba(255,138,61,.25); }
  .share-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
  .share {
    font: 700 14px var(--body); color: #06232a; background: var(--exit); border: 0; border-radius: 10px;
    padding: 9px 16px; cursor: pointer;
  }
  .share.alt { color: var(--text); background: none; border: 1px solid #3a4c74; }
  .faq { display: grid; gap: 10px; max-width: 760px; }
  .faq h2 { font-family: var(--display); font-weight: 500; font-size: 22px; margin: 0 0 6px; }
  .faq details { border-top: 1px solid var(--line); padding-block: 12px; }
  .faq summary { cursor: pointer; font-weight: 700; font-size: 16px; list-style-position: outside; }
  .faq details p { margin: 10px 0 0; color: var(--muted); max-width: 65ch; }
  footer p { margin: 0 0 4px; }
  .toast {
    position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    background: var(--text); color: var(--bg); font-weight: 700; padding: 10px 16px; border-radius: 10px; z-index: 10;
    box-shadow: 0 10px 30px rgba(0,0,0,.4);
  }
  .noscript { text-align: center; color: var(--muted); padding: 16px; }
  .offscreen { position: fixed; left: -9999px; top: 0; opacity: 0; }

  /* ---------- site navigation ---------- */
  .topnav { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
  .brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font: 700 16px var(--display); }
  .brand img { border-radius: 7px; }
  .links { display: flex; gap: 4px; }
  .links a { color: var(--muted); text-decoration: none; font-weight: 700; padding: 8px 14px; border-radius: 999px; }
  .links a:hover { color: var(--text); background: var(--panel); }
  .links a[aria-current="page"] { color: var(--text); background: var(--panel-2); }

  /* ---------- cards ---------- */
  .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
  .card { display: grid; align-content: start; gap: 6px; text-decoration: none; color: var(--text); background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 12px; transition: border-color .15s, transform .15s; }
  .card:hover { border-color: #3e4c72; transform: translateY(-2px); }
  .card img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: contain; border-radius: 9px; background: #141a2d; }
  .card .k { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--start); margin-top: 4px; }
  .card b { font-family: var(--display); font-weight: 500; font-size: 16px; line-height: 1.3; text-wrap: balance; }
  .card .d { font-size: 13px; color: var(--muted); }
  .learn-teaser { display: grid; gap: 14px; }
  .lt-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
  .lt-head h2 { font-family: var(--display); font-weight: 500; font-size: 22px; margin: 0; }
  .lt-head a { font-weight: 700; }

  /* ---------- hub ---------- */
  .hub { display: grid; gap: 36px; }
  .hub-head { display: grid; gap: 8px; }
  .hub-head h1 { font-family: var(--display); font-weight: 700; font-size: clamp(28px, 5vw, 46px); line-height: 1.08; margin: 0; }
  .hub-group { display: grid; gap: 14px; }
  .hub-group h2 { font-family: var(--display); font-weight: 500; font-size: 20px; margin: 0; }

  /* ---------- article ---------- */
  .article-main { display: grid; gap: 48px; }
  .crumbs { font-size: 13px; color: var(--muted); display: flex; gap: 8px; }
  .crumbs a { color: var(--muted); }
  .article { max-width: 760px; font-size: 17px; line-height: 1.7; display: grid; gap: 0; }
  .article h1 { font-family: var(--display); font-weight: 700; font-size: clamp(28px, 4.6vw, 44px); line-height: 1.1; margin: 8px 0 14px; text-wrap: balance; }
  .article .standfirst { font-size: 19px; color: var(--text); opacity: .9; margin: 0 0 12px; max-width: 62ch; }
  .article .byline { font-size: 13px; color: var(--muted); margin: 0 0 24px; }
  .article h2 { font-family: var(--display); font-weight: 500; font-size: 22px; line-height: 1.25; margin: 36px 0 8px; text-wrap: balance; }
  .article p, .article ul, .article ol { margin: 0 0 16px; max-width: 68ch; }
  .article li { margin-bottom: 6px; }
  .article strong { color: #fff; }
  .article figure { margin: 8px 0 28px; }
  .article figure img { width: 100%; height: auto; display: block; border-radius: 14px; }
  .article figcaption { font-size: 13px; color: var(--muted); margin-top: 8px; }
  .table-wrap { overflow-x: auto; margin: 4px 0 20px; border: 1px solid var(--line); border-radius: 12px; }
  table { border-collapse: collapse; width: 100%; font-size: 15px; min-width: 520px; }
  th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
  th { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); background: var(--panel); }
  tr:last-child td { border-bottom: 0; }
  .stat-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 12px 0 24px; }
  @media (max-width: 640px) { .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .stat-row div { border-top: 2px solid var(--start); padding-top: 10px; display: grid; gap: 2px; }
  .stat-row b { font-family: var(--display); font-weight: 500; font-size: 22px; }
  .stat-row span { font-size: 13px; color: var(--muted); line-height: 1.4; }
  .timeline { list-style: none; padding: 0; border-left: 2px solid var(--line); }
  .timeline li { padding-left: 18px; position: relative; margin-bottom: 14px; }
  .timeline li::before { content: ""; position: absolute; left: -7px; top: 9px; width: 12px; height: 12px; border-radius: 50%; background: var(--start); }
  .timeline b { font-family: var(--mono); font-weight: 500; color: var(--start); margin-right: 8px; }
  .facts-list li { margin-bottom: 12px; }
  .facts-list a { font-size: 14px; white-space: nowrap; }
  .try { margin: 28px 0 8px; display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; background: linear-gradient(160deg, #1d2a45, var(--panel)); border: 1px solid #33456b; border-radius: 14px; padding: 18px; }
  .try div { display: grid; gap: 2px; }
  .try b { font-family: var(--display); font-weight: 500; font-size: 17px; }
  .try span { color: var(--muted); font-size: 15px; }
  .btn { font: 700 15px var(--display); color: #1b0f05; background: var(--start); border-radius: 10px; padding: 11px 20px; text-decoration: none; white-space: nowrap; }
  .sources { margin-top: 28px; border-top: 1px solid var(--line); padding-top: 8px; }
  .sources h2 { font-size: 16px; margin-top: 16px; }
  .sources ul { font-size: 14px; color: var(--muted); padding-left: 18px; }
  .more { display: grid; gap: 14px; }
  .more h2 { font-family: var(--display); font-weight: 500; font-size: 20px; margin: 0; }
  .sitefoot { border-top: 1px solid var(--line); padding-top: 18px; font-size: 13px; color: var(--muted); display: grid; gap: 4px; }
  .sitefoot a { color: var(--muted); }

  .hud { position: absolute; left: 0; right: 0; bottom: 14%; z-index: 4; display: grid; justify-items: center; gap: 2px; pointer-events: none; text-shadow: 0 2px 12px rgba(0,0,0,.7); opacity: 0; transition: opacity .5s ease; }
  .hud.show { opacity: 1; }

  /* pause / continue during the flight */
  .pause {
    position: absolute; top: 10px; right: 10px; z-index: 6; opacity: 0; transition: opacity .5s ease;
    font: 700 12px var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--text);
    background: rgba(10,14,26,.72); border: 1px solid rgba(235,232,223,.3); border-radius: 999px;
    padding: 8px 16px; cursor: pointer; backdrop-filter: blur(6px);
  }
  .pause.show { opacity: 1; }
  .pause:hover { background: rgba(10,14,26,.92); border-color: rgba(235,232,223,.55); }

  /* short layer briefing, shown while the flight is paused */
  .layercard {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%); z-index: 5;
    width: min(290px, 80%); display: grid; gap: 5px; padding: 14px 16px;
    background: rgba(10,14,26,.86); border: 1px solid #33456b; border-radius: 14px; backdrop-filter: blur(8px);
    box-shadow: 0 18px 40px rgba(0,0,0,.45);
    max-height: calc(100% - 24px); overflow-y: auto;
  }
  /* on a phone the stage is narrow, so the card sits along the bottom and leaves the button clear */
  @media (max-width: 560px) {
    .layercard { left: 8px; right: 8px; width: auto; top: auto; bottom: 8px; transform: none;
      max-height: calc(100% - 52px); gap: 3px; padding: 11px 13px; }
    .lc-rows .r-span { display: none; }   /* the thickness row already says it, and space is tight */
    .layercard h3 { font-size: 17px; }
    .lc-rows { font-size: 11px; gap: 2px 8px; margin-top: 2px; }
    .lc-rows dd { font-size: 11px; }
    .lc-text { font-size: 12px; line-height: 1.45; margin-top: 4px; }
    .lc-link { font-size: 12px; }
  }
  .lc-kicker { margin: 0; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--start); }
  .layercard h3 { margin: 0; font: 700 19px var(--display); line-height: 1.15; }
  .lc-rows { margin: 4px 0 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 10px; font-size: 12px; }
  .lc-rows dt { color: var(--muted); }
  .lc-rows dd { margin: 0; font-family: var(--mono); font-size: 12px; }
  .lc-text { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
  .lc-link { font-size: 13px; font-weight: 700; }

  /* clickable layer labels on the cross-section */
  .xwrap { position: relative; }
  .xlabels a { color: #c9cbd6; font: 600 11px var(--body); text-decoration: none; border-bottom: 1px solid rgba(201,203,214,.35); }
  .xlabels a:hover { color: var(--text); border-bottom-color: var(--start); }
  .xlabels.pinned { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
  .xlabels.pinned a { position: absolute; transform: translateY(-50%); white-space: nowrap; pointer-events: auto; }
  .xlabels.stacked { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; margin-top: 10px; }
  .hud b { font: 700 clamp(18px, 3.4vw, 28px) var(--display); color: #fff; }
  .hud span { font: 500 clamp(13px, 2vw, 16px) var(--mono); color: rgba(255,255,255,.85); }
  .credit { font-size: 14px; }
  .credit a { color: var(--text); font-weight: 700; }