:root { color-scheme: light dark; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
  body { margin: 0; font: 14px system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
  img { max-width: 100%; }
  [hidden] { display: none !important; }
/* ---------------------------------------------------------------------
     ScotMesh brand tokens — scotmesh.github.io/branding
     Dark-first: :root carries the Night palette (the brand's primary
     ground). Light is the consistent swap, defined for both the unstamped
     prefers-color-scheme state and an explicit data-theme="light".
     --------------------------------------------------------------------- */
  :root {
    --night:    #0A1424;
    --saltire:  #005EB8;
    --mist:     #E6EDF7;
    --signal:   #F2B33D;
    --meshcore: #56B4F5;
    --meshcore-deep: #0069A6;

    --bg:       var(--night);
    --well:     #0C1729;
    --card:     #101C30;
    --line:     #22324D;
    --ink:      var(--mist);
    --muted:    #8FA2BD;
    --link:     #7FB2EE;

    --up:       #22c55e;
    --stale:    #f59e0b;
    --down:     #ef4444;

    --accent:   var(--meshcore);        /* network data: nodes, links, charts, live figures */
    --on-accent:#04121F;
    --chrome:   var(--saltire);         /* ScotMesh chrome: primary buttons, chips, keylines */
    --chrome-ink: #7FB2EE;              /* Saltire as text on Night needs the lighter step */
    --signal-ink: var(--signal);        /* amber as text; darkened on light surfaces */
    --mark-field: var(--saltire);
    --mark-ink:   #FFFFFF;
    --hero-glow: radial-gradient(120% 90% at 50% -10%, rgba(86,180,245,.16), transparent 62%);
    --shadow:   0 1px 0 rgba(255,255,255,.03), 0 12px 32px -18px rgba(0,0,0,.9);

    --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
    --sans: "IBM Plex Sans Condensed", "Roboto Condensed", "Arial Narrow", system-ui, sans-serif;

    --maxw: 1140px;
  }

  @media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
      --bg:    #F4F7FC;
      --well:  #EAF0F9;
      --card:  #FFFFFF;
      --line:  #D3DEEE;
      --ink:   var(--night);
      --muted: #5A6B85;
      --link:  var(--saltire);
      --accent: var(--meshcore-deep);
      --on-accent: #FFFFFF;
      --chrome-ink: var(--saltire);
      --signal-ink: #8A5A00;
      --hero-glow: radial-gradient(120% 90% at 50% -10%, rgba(0,105,166,.10), transparent 62%);
      --shadow: 0 1px 0 rgba(255,255,255,.7), 0 12px 28px -20px rgba(10,20,36,.45);
    }
  }
  :root[data-theme="light"] {
    --bg:    #F4F7FC;
    --well:  #EAF0F9;
    --card:  #FFFFFF;
    --line:  #D3DEEE;
    --ink:   var(--night);
    --muted: #5A6B85;
    --link:  var(--saltire);
    --accent: var(--meshcore-deep);
    --on-accent: #FFFFFF;
    --chrome-ink: var(--saltire);
    --signal-ink: #8A5A00;
    --hero-glow: radial-gradient(120% 90% at 50% -10%, rgba(0,105,166,.10), transparent 62%);
    --shadow: 0 1px 0 rgba(255,255,255,.7), 0 12px 28px -20px rgba(10,20,36,.45);
  }

  * { box-sizing: border-box; }

  body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }

  .wrap {
    width: 100%;
    max-width: var(--maxw);
    margin-inline: auto;
    padding-inline: 20px;
  }

  h1, h2, h3, .lbl, .stat-v, .nav a, .btn, th {
    font-family: var(--mono);
  }
  h1, h2, h3 { font-weight: 600; letter-spacing: -.01em; text-wrap: balance; margin: 0; }


  a { color: var(--link); }
  a:focus-visible, button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 3px;
  }

  /* ---------------- brand assets ----------------
     The real files from ScotMesh/branding → networks/meshcore, inlined
     unaltered. The stacked lockup is the documented default for nav bars
     and site headers; text in these SVGs is already outlined. */
  .lockup { display: inline-flex; align-items: center; text-decoration: none; }
  .lockup svg { display: block; height: 34px; width: auto; }
  .lockup .on-light { display: none; }
  .lockup .on-dark  { display: block; }
  @media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .lockup .on-light { display: block; }
    :root:not([data-theme="dark"]) .lockup .on-dark  { display: none; }
  }
  :root[data-theme="light"] .lockup .on-light { display: block; }
  :root[data-theme="light"] .lockup .on-dark  { display: none; }

  /* The hero art carries its own Night ground, so the banner stays dark in
     both themes and its lockup is always the on-dark one. */
  .hero .lockup .on-light { display: none; }
  .hero .lockup .on-dark  { display: block; }
  .mark { display: block; border-radius: 6px; }

  /* ---------------- nav ---------------- */
  .nav {
    position: sticky;
    top: env(safe-area-inset-top, 0px);
    z-index: 50;
    background: var(--bg);
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
  }
  .nav-in {
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: 60px;
    flex-wrap: wrap;
  }
  .nav nav { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap; }
  /* The menu button only exists on a narrow screen; see the query at the end. */
  .nav-toggle {
    display: none;
    align-items: center;
    gap: 7px;
    margin-left: auto;
    font-family: var(--mono);
    font-size: 13.5px;
    color: var(--ink);
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 7px 12px;
    cursor: pointer;
  }
  .nav-toggle[aria-expanded="true"] { border-color: var(--accent); }
  .nav nav a, .nav nav button {
    font-size: 13.5px;
    font-weight: 400;
    letter-spacing: .02em;
    color: var(--muted);
    text-decoration: none;
    padding: 7px 11px;
    border-radius: 6px;
    border: 1px solid transparent;
    background: none;
    cursor: pointer;
    font-family: var(--mono);
  }
  .nav nav a:hover, .nav nav button:hover { color: var(--ink); background: var(--well); }
  .nav nav a[aria-current="page"],
  .nav nav button[aria-current="page"] {
    color: var(--chrome-ink);
    border-color: color-mix(in srgb, var(--chrome) 45%, transparent);
    background: color-mix(in srgb, var(--chrome) 12%, transparent);
  }

  .theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 32px;
    padding: 0;
    margin-left: 4px;
    color: var(--muted);
    background: none;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
  }
  .theme-toggle:hover { color: var(--ink); background: var(--well); }
  /* dark now, so offer the sun; light now, so offer the moon */
  .theme-toggle .t-light { display: none; }
  .theme-toggle .t-dark { display: block; }
  @media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .theme-toggle .t-dark { display: none; }
    :root:not([data-theme="dark"]) .theme-toggle .t-light { display: block; }
  }
  :root[data-theme="light"] .theme-toggle .t-dark { display: none; }
  :root[data-theme="light"] .theme-toggle .t-light { display: block; }
  :root[data-theme="dark"] .theme-toggle .t-dark { display: block; }
  :root[data-theme="dark"] .theme-toggle .t-light { display: none; }

  /* ---------------- hero banner ----------------
     Same treatment scotmesh.net uses: header-mesh art pinned right, a
     left-to-right scrim so the heading sits on flat ground. The art carries
     its own Night field, so the banner stays dark in both themes and pins
     its own text tokens rather than inheriting the page's. */
  .hero {
    position: relative;
    overflow: hidden;
    color: var(--ink);
    border-bottom: 1px solid #22324D;
    background: #0A1424 url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNTAwIiBoZWlnaHQ9IjUwMCIgdmlld0JveD0iMCAwIDE1MDAgNTAwIiByb2xlPSJpbWciIGFyaWEtbGFiZWw9IlNjb3RNZXNoIE1lc2hDb3JlIj48dGl0bGU+U2NvdE1lc2ggTWVzaENvcmU8L3RpdGxlPjxyZWN0IHdpZHRoPSIxNTAwIiBoZWlnaHQ9IjUwMCIgZmlsbD0iIzBBMTQyNCIvPjxwYXRoIGQ9Ik0yODYgNDM5LjdMMjY1LjUgNTAwLjhNMjg2IDQzOS43TDI3OC40IDM0OS4yTTI4NiA0MzkuN0wzNTIuNiAzNjIuMk0xMjQ1LjQgMzcwLjlMMTI4NSAzNDVNMTI0NS40IDM3MC45TDEyNTUuMyA0NTcuMU0xMjQ1LjQgMzcwLjlMMTMzMyAzMjEuMk05NTMuNyAzNTYuOUw5MjUgNDI2LjJNOTUzLjcgMzU2LjlMOTI1LjEgMjY4LjFNOTUzLjcgMzU2LjlMMTAwMCA0NDBNODg0LjQgMTMzLjFMODg3LjkgMjAwLjJNODg0LjQgMTMzLjFMOTUxLjggMTQ5LjVNODg0LjQgMTMzLjFMODU0LjUgNjYuNU0xNDI0LjIgMTM1TDE0NDQuNCAxOTcuOE0xNDI0LjIgMTM1TDE1MDcuOCAxNTguMU0xNDI0LjIgMTM1TDEzODAgNjBNMTMxMyAyMjUuOUwxMjg1IDE1NU0xMzEzIDIyNS45TDEzMzMgMzIxLjJNMTMxMyAyMjUuOUwxMjg1IDM0NU0xMDIzIDE2MC4xTDk1MS44IDE0OS41TTEwMjMgMTYwLjFMMTA5NSAxNTVNMTAyMyAxNjAuMUw5OTEuMiAyNDguM001NC4xIDQ1My4yTC0xMC43IDQ4OS4zTTU0LjEgNDUzLjJMMTAwLjYgNTE0TTU0LjEgNDUzLjJMOS44IDM1OC43TTc5MC42IDI0Ni44TDg0NC42IDI4NC42TTc5MC42IDI0Ni44TDY5My4xIDI3My43TTc5MC42IDI0Ni44TDg4Ny45IDIwMC4yTTQ1Ni45IDMzNS43TDQ3My4xIDI2OC42TTQ1Ni45IDMzNS43TDM4NS4yIDI2My41TTQ1Ni45IDMzNS43TDM1Mi42IDM2Mi4yTTgzMi4yIDQ5Ni44TDkxNC4xIDUxNC4zTTgzMi4yIDQ5Ni44TDc3Mi42IDQzNS41TTgzMi4yIDQ5Ni44TDkyNSA0MjYuMk04NTQuNSA2Ni41TDgxMC40IDEyNy40TTg1NC41IDY2LjVMODMxLjkgLTUuOE05MjUuMSAyNjguMUw5OTEuMiAyNDguM005MjUuMSAyNjguMUw4ODcuOSAyMDAuMk05MjUuMSAyNjguMUw4NDQuNiAyODQuNk05OTEuMiAyNDguM0wxMDQ2LjYgMjg4LjVNOTkxLjQgNTEwLjZMMTA1NC4xIDUxNi4zTTk5MS40IDUxMC42TDEwMDAgNDQwTTk5MS40IDUxMC42TDkxNC4xIDUxNC4zTTEzOTIuOSAtOC40TDE0NjAuNSAtNS40TTEzOTIuOSAtOC40TDEzODAgNjBNMTM5Mi45IC04LjRMMTMyMi40IDEyLjJNMTEwNi45IDMxLjNMMTE2MS40IDExMC4zTTExMDYuOSAzMS4zTDEwMDggNC4xTTExMDYuOSAzMS4zTDEyMTAuNCA3LjRNMTQ4MS4zIDM3Ni42TDE0MzIuOCA0MzQuM00xNDgxLjMgMzc2LjZMMTQ4MC44IDQ3NS42TTE0ODEuMyAzNzYuNkwxNDM5LjkgMjY2LjlNMTIwMS41IDE2Ni44TDExNjEuNCAxMTAuM00xMjAxLjUgMTY2LjhMMTE5MCAyNTBNMTIwMS41IDE2Ni44TDEyODUgMTU1TTEwODEuMSA0NDNMMTA1NC4xIDUxNi4zTTEwODEuMSA0NDNMMTAwMCA0NDBNMTA4MS4xIDQ0M0wxMTQwLjcgMzY1LjFNNDczLjEgMjY4LjZMNTQzLjcgMjQyLjZNNDczLjEgMjY4LjZMMzg1LjIgMjYzLjVNMTA0Ni42IDI4OC41TDEwOTUgMzQ1TTEwNDYuNiAyODguNUwxMTEzLjIgMjQwLjlNMTQzMi44IDQzNC4zTDEzODAgNDQwTTE0MzIuOCA0MzQuM0wxNDgwLjggNDc1LjZNLTE1LjkgMjI4LjlMNjQuOCAyNDRNLTE1LjkgMjI4LjlMNjIuMSAxNjEuOE0tMTUuOSAyMjguOUw5LjggMzU4LjdNMTIwLjEgODMuNkw2OS43IDQ1TTEyMC4xIDgzLjZMMTgxIDI1LjNNMTIwLjEgODMuNkw2Mi4xIDE2MS44TTI1MiA4My41TDE4MSAyNS4zTTI1MiA4My41TDM3NiA3My45TTI1MiA4My41TDEyMC4xIDgzLjZNMTI1Mi4zIDU5LjJMMTIxMC40IDcuNE0xMjUyLjMgNTkuMkwxMzIyLjQgMTIuMk0xMjUyLjMgNTkuMkwxMjg1IDE1NU0xNDM5LjkgMjY2LjlMMTUwMS4xIDI1My4yTTE0MzkuOSAyNjYuOUwxNDQ0LjQgMTk3LjhNLTEwLjcgNDg5LjNMMTAwLjYgNTE0TS0xMC43IDQ4OS4zTDkuOCAzNTguN00xMzI5LjkgNDc0LjNMMTM4MCA0NDBNMTMyOS45IDQ3NC4zTDEyNTUuMyA0NTcuMU0xMzI5LjkgNDc0LjNMMTQxNiA1MTcuNk0xMjU1LjMgNDU3LjFMMTE3OS41IDQ0OS40TTExNzkuNSA0NDkuNEwxMTQwLjcgMzY1LjFNMTE3OS41IDQ0OS40TDEwODEuMSA0NDNNNDY2IDQ2Mi40TDU1NS42IDQ5Ni45TTQ2NiA0NjIuNEwzNzMuOSA1MTEuOU00NjYgNDYyLjRMNDU2LjkgMzM1LjdNODI5LjUgMzU1LjVMODQ0LjYgMjg0LjZNODI5LjUgMzU1LjVMNzM1LjMgMzc0TTgyOS41IDM1NS41TDc3Mi42IDQzNS41TTcuNyA1MC44TDY5LjcgNDVNNy43IDUwLjhMMTIwLjEgODMuNk03LjcgNTAuOEw2Mi4xIDE2MS44TTI1Ny43IDIzMi4yTDE4NC44IDIwOS4zTTI1Ny43IDIzMi4yTDI3OC40IDM0OS4yTTI1Ny43IDIzMi4yTDM4NS4yIDI2My41TTE4MSAyNS4zTDY5LjcgNDVNODg3LjkgMjAwLjJMOTUxLjggMTQ5LjVNOTI1IDQyNi4yTDEwMDAgNDQwTTkyNSA0MjYuMkw5MTQuMSA1MTQuM00xMTEzLjIgMjQwLjlMMTE5MCAyNTBNMTExMy4yIDI0MC45TDEwOTUgMTU1TTEyMTAuNCA3LjRMMTMyMi40IDEyLjJNMTE2MS40IDExMC4zTDEwOTUgMTU1TTE1MDcuOCAxNTguMUwxNTExLjkgODcuMk0xNTA3LjggMTU4LjFMMTQ0NC40IDE5Ny44TTExNDAuNyAzNjUuMUwxMDk1IDM0NU05LjggMzU4LjdMNzguMSAzMzVNOS44IDM1OC43TDY0LjggMjQ0TTE0ODAuOCA0NzUuNkwxNDE2IDUxNy42TTQyNiAtMkw0NDQuNCA3MS43TTQyNiAtMkw1MDEuOCA0Ni44TTQyNiAtMkwzNzYgNzMuOU0xMzMzIDMyMS4yTDEyODUgMzQ1TTUwMS44IDQ2LjhMNDQ0LjQgNzEuN001MDEuOCA0Ni44TDU0MC41IDE0MS41TTY1NC40IDkzLjhMNzI2LjMgMTUxLjlNNjU0LjQgOTMuOEw2MDYuNyAxNC4xTTY1NC40IDkzLjhMNjY4LjIgLTAuM004MzEuOSAtNS44TDkwNC45IC05LjJNODMxLjkgLTUuOEw3NzMuMSA2MS4xTTU0My43IDI0Mi42TDU0MC41IDE0MS41TTU0My43IDI0Mi42TDQ2My41IDE2OU00NjMuNSAxNjlMNDAyLjIgMTUyLjhNNDYzLjUgMTY5TDU0MC41IDE0MS41TTQ2My41IDE2OUw0NDQuNCA3MS43TTEzMjIuNCAxMi4yTDEzODAgNjBNMzg1LjIgMjYzLjVMMzUyLjYgMzYyLjJNOTUxLjggMTQ5LjVMOTQ1LjMgNzcuNU02OTMuMSAyNzMuN0w3MzUuMyAzNzRNNjkzLjEgMjczLjdMNzI2LjMgMTUxLjlNNzA2LjkgNDM3TDc3Mi42IDQzNS41TTcwNi45IDQzN0w3MzUuMyAzNzRNNzA2LjkgNDM3TDY0MC4yIDUxOC42TTgxMC40IDEyNy40TDg4NC40IDEzMy4xTTgxMC40IDEyNy40TDc3My4xIDYxLjFNMzczLjkgNTExLjlMMjY1LjUgNTAwLjhNMzczLjkgNTExLjlMMjg2IDQzOS43TTE4NC44IDIwOS4zTDY0LjggMjQ0TTE4NC44IDIwOS4zTDYyLjEgMTYxLjhNNzM1LjMgMzc0TDc3Mi42IDQzNS41TTE1MTEuOSA4Ny4yTDE0MjQuMiAxMzVNMTUxMS45IDg3LjJMMTQ2MC41IC01LjRNNjQwLjIgNTE4LjZMNTU1LjYgNDk2LjlNNjQwLjIgNTE4LjZMNzcyLjYgNDM1LjVNMTQxNiA1MTcuNkwxNDMyLjggNDM0LjNNMTQxNiA1MTcuNkwxMzgwIDQ0ME0xMDA4IDQuMUwxMDAwIDYwTTEwMDggNC4xTDk0NS4zIDc3LjVNMzc2IDczLjlMNDQ0LjQgNzEuN00zNzYgNzMuOUw0MDIuMiAxNTIuOE02MDYuNyAxNC4xTDY2OC4yIC0wLjNNNjA2LjcgMTQuMUw1MDEuOCA0Ni44TTE2OCA1MTUuOUwxMDAuNiA1MTRNMTY4IDUxNS45TDE3Ni44IDQ0Mi4zTTE2OCA1MTUuOUwyNjUuNSA1MDAuOE02NjguMiAtMC4zTDczNS4zIC0yLjdNNTU1LjYgNDk2LjlMNzA2LjkgNDM3TTI3OC40IDM0OS4yTDM1Mi42IDM2Mi4yTTczNS4zIC0yLjdMNzczLjEgNjEuMU03MzUuMyAtMi43TDgzMS45IC01LjhNNjIuMSAxNjEuOEw2NC44IDI0NE00MDIuMiAxNTIuOEw0NDQuNCA3MS43TTk0NS4zIDc3LjVMMTAwMCA2ME05NDUuMyA3Ny41TDg4NC40IDEzMy4xTTEwNTQuMSA1MTYuM0wxMDAwIDQ0ME03NzMuMSA2MS4xTDg1NC41IDY2LjVNMTQ2MC41IC01LjRMMTM4MCA2ME02NC44IDI0NEw3OC4xIDMzNU03MjYuMyAxNTEuOUw4MTAuNCAxMjcuNE03MjYuMyAxNTEuOUw3NzMuMSA2MS4xTTc4LjEgMzM1TDU0LjEgNDUzLjJNMjY1LjUgNTAwLjhMMTc2LjggNDQyLjNNOTA0LjkgLTkuMkw4NTQuNSA2Ni41TTkwNC45IC05LjJMOTQ1LjMgNzcuNU0xNTAxLjEgMjUzLjJMMTQ0NC40IDE5Ny44TTE1MDEuMSAyNTMuMkwxNTA3LjggMTU4LjFNMTAwLjYgNTE0TDE3Ni44IDQ0Mi4zTTEwMDAgNjBMOTUxLjggMTQ5LjVNMTI4NSAzNDVMMTI1NS4zIDQ1Ny4xTTEwOTUgMzQ1TDEwODEuMSA0NDNNMTE5MCAyNTBMMTE0MC43IDM2NS4xIiBmaWxsPSJub25lIiBzdHJva2U9IiMyMzQwNkEiIHN0cm9rZS13aWR0aD0iMS42Ii8+PGcgZmlsbD0iIzRCNzJBNiI+PGNpcmNsZSBjeD0iMjg2IiBjeT0iNDM5LjciIHI9IjMuNiIvPjxjaXJjbGUgY3g9IjEyNDUuNCIgY3k9IjM3MC45IiByPSIzLjYiLz48Y2lyY2xlIGN4PSI5NTMuNyIgY3k9IjM1Ni45IiByPSIzLjYiLz48Y2lyY2xlIGN4PSI4ODQuNCIgY3k9IjEzMy4xIiByPSIzLjYiLz48Y2lyY2xlIGN4PSIxNDI0LjIiIGN5PSIxMzUiIHI9IjMuNiIvPjxjaXJjbGUgY3g9IjEzMTMiIGN5PSIyMjUuOSIgcj0iMy42Ii8+PGNpcmNsZSBjeD0iMTAyMyIgY3k9IjE2MC4xIiByPSIzLjYiLz48Y2lyY2xlIGN4PSI1NC4xIiBjeT0iNDUzLjIiIHI9IjMuNiIvPjxjaXJjbGUgY3g9Ijc5MC42IiBjeT0iMjQ2LjgiIHI9IjMuNiIvPjxjaXJjbGUgY3g9IjQ1Ni45IiBjeT0iMzM1LjciIHI9IjMuNiIvPjxjaXJjbGUgY3g9IjgzMi4yIiBjeT0iNDk2LjgiIHI9IjMuNiIvPjxjaXJjbGUgY3g9Ijg1NC41IiBjeT0iNjYuNSIgcj0iMy42Ii8+PGNpcmNsZSBjeD0iOTI1LjEiIGN5PSIyNjguMSIgcj0iMy42Ii8+PGNpcmNsZSBjeD0iOTkxLjIiIGN5PSIyNDguMyIgcj0iMy42Ii8+PGNpcmNsZSBjeD0iOTkxLjQiIGN5PSI1MTAuNiIgcj0iMy42Ii8+PGNpcmNsZSBjeD0iMTM5Mi45IiBjeT0iLTguNCIgcj0iMy42Ii8+PGNpcmNsZSBjeD0iMTEwNi45IiBjeT0iMzEuMyIgcj0iMy42Ii8+PGNpcmNsZSBjeD0iMTQ4MS4zIiBjeT0iMzc2LjYiIHI9IjMuNiIvPjxjaXJjbGUgY3g9IjEyMDEuNSIgY3k9IjE2Ni44IiByPSIzLjYiLz48Y2lyY2xlIGN4PSIxMDgxLjEiIGN5PSI0NDMiIHI9IjMuNiIvPjxjaXJjbGUgY3g9IjQ3My4xIiBjeT0iMjY4LjYiIHI9IjMuNiIvPjxjaXJjbGUgY3g9IjEwNDYuNiIgY3k9IjI4OC41IiByPSIzLjYiLz48Y2lyY2xlIGN4PSIxNDMyLjgiIGN5PSI0MzQuMyIgcj0iMy42Ii8+PGNpcmNsZSBjeD0iLTE1LjkiIGN5PSIyMjguOSIgcj0iMy42Ii8+PGNpcmNsZSBjeD0iMTIwLjEiIGN5PSI4My42IiByPSIzLjYiLz48Y2lyY2xlIGN4PSIyNTIiIGN5PSI4My41IiByPSIzLjYiLz48Y2lyY2xlIGN4PSIxMjUyLjMiIGN5PSI1OS4yIiByPSIzLjYiLz48Y2lyY2xlIGN4PSIxNDM5LjkiIGN5PSIyNjYuOSIgcj0iMy42Ii8+PGNpcmNsZSBjeD0iLTEwLjciIGN5PSI0ODkuMyIgcj0iMy42Ii8+PGNpcmNsZSBjeD0iMTMyOS45IiBjeT0iNDc0LjMiIHI9IjMuNiIvPjxjaXJjbGUgY3g9IjEyNTUuMyIgY3k9IjQ1Ny4xIiByPSIzLjYiLz48Y2lyY2xlIGN4PSIxMTc5LjUiIGN5PSI0NDkuNCIgcj0iMy42Ii8+PGNpcmNsZSBjeD0iNDY2IiBjeT0iNDYyLjQiIHI9IjMuNiIvPjxjaXJjbGUgY3g9IjgyOS41IiBjeT0iMzU1LjUiIHI9IjMuNiIvPjxjaXJjbGUgY3g9IjcuNyIgY3k9IjUwLjgiIHI9IjMuNiIvPjxjaXJjbGUgY3g9IjI1Ny43IiBjeT0iMjMyLjIiIHI9IjMuNiIvPjxjaXJjbGUgY3g9IjE4MSIgY3k9IjI1LjMiIHI9IjMuNiIvPjxjaXJjbGUgY3g9Ijg4Ny45IiBjeT0iMjAwLjIiIHI9IjMuNiIvPjxjaXJjbGUgY3g9IjkyNSIgY3k9IjQyNi4yIiByPSIzLjYiLz48Y2lyY2xlIGN4PSIxMTEzLjIiIGN5PSIyNDAuOSIgcj0iMy42Ii8+PGNpcmNsZSBjeD0iMTIxMC40IiBjeT0iNy40IiByPSIzLjYiLz48Y2lyY2xlIGN4PSIxMTYxLjQiIGN5PSIxMTAuMyIgcj0iMy42Ii8+PGNpcmNsZSBjeD0iMTUwNy44IiBjeT0iMTU4LjEiIHI9IjMuNiIvPjxjaXJjbGUgY3g9IjExNDAuNyIgY3k9IjM2NS4xIiByPSIzLjYiLz48Y2lyY2xlIGN4PSI5LjgiIGN5PSIzNTguNyIgcj0iMy42Ii8+PGNpcmNsZSBjeD0iOTE0LjEiIGN5PSI1MTQuMyIgcj0iMy42Ii8+PGNpcmNsZSBjeD0iMTQ4MC44IiBjeT0iNDc1LjYiIHI9IjMuNiIvPjxjaXJjbGUgY3g9IjQyNiIgY3k9Ii0yIiByPSIzLjYiLz48Y2lyY2xlIGN4PSIxMzMzIiBjeT0iMzIxLjIiIHI9IjMuNiIvPjxjaXJjbGUgY3g9IjUwMS44IiBjeT0iNDYuOCIgcj0iMy42Ii8+PGNpcmNsZSBjeD0iNjU0LjQiIGN5PSI5My44IiByPSIzLjYiLz48Y2lyY2xlIGN4PSI4MzEuOSIgY3k9Ii01LjgiIHI9IjMuNiIvPjxjaXJjbGUgY3g9IjU0My43IiBjeT0iMjQyLjYiIHI9IjMuNiIvPjxjaXJjbGUgY3g9IjQ2My41IiBjeT0iMTY5IiByPSIzLjYiLz48Y2lyY2xlIGN4PSIxMzIyLjQiIGN5PSIxMi4yIiByPSIzLjYiLz48Y2lyY2xlIGN4PSI1NDAuNSIgY3k9IjE0MS41IiByPSIzLjYiLz48Y2lyY2xlIGN4PSIzODUuMiIgY3k9IjI2My41IiByPSIzLjYiLz48Y2lyY2xlIGN4PSI5NTEuOCIgY3k9IjE0OS41IiByPSIzLjYiLz48Y2lyY2xlIGN4PSI2OTMuMSIgY3k9IjI3My43IiByPSIzLjYiLz48Y2lyY2xlIGN4PSI3MDYuOSIgY3k9IjQzNyIgcj0iMy42Ii8+PGNpcmNsZSBjeD0iODEwLjQiIGN5PSIxMjcuNCIgcj0iMy42Ii8+PGNpcmNsZSBjeD0iMzczLjkiIGN5PSI1MTEuOSIgcj0iMy42Ii8+PGNpcmNsZSBjeD0iMTg0LjgiIGN5PSIyMDkuMyIgcj0iMy42Ii8+PGNpcmNsZSBjeD0iNzM1LjMiIGN5PSIzNzQiIHI9IjMuNiIvPjxjaXJjbGUgY3g9IjE1MTEuOSIgY3k9Ijg3LjIiIHI9IjMuNiIvPjxjaXJjbGUgY3g9IjY0MC4yIiBjeT0iNTE4LjYiIHI9IjMuNiIvPjxjaXJjbGUgY3g9IjE0MTYiIGN5PSI1MTcuNiIgcj0iMy42Ii8+PGNpcmNsZSBjeD0iMTQ0NC40IiBjeT0iMTk3LjgiIHI9IjMuNiIvPjxjaXJjbGUgY3g9IjEwMDgiIGN5PSI0LjEiIHI9IjMuNiIvPjxjaXJjbGUgY3g9IjM3NiIgY3k9IjczLjkiIHI9IjMuNiIvPjxjaXJjbGUgY3g9IjYwNi43IiBjeT0iMTQuMSIgcj0iMy42Ii8+PGNpcmNsZSBjeD0iMTY4IiBjeT0iNTE1LjkiIHI9IjMuNiIvPjxjaXJjbGUgY3g9IjQ0NC40IiBjeT0iNzEuNyIgcj0iMy42Ii8+PGNpcmNsZSBjeD0iNjY4LjIiIGN5PSItMC4zIiByPSIzLjYiLz48Y2lyY2xlIGN4PSI1NTUuNiIgY3k9IjQ5Ni45IiByPSIzLjYiLz48Y2lyY2xlIGN4PSIyNzguNCIgY3k9IjM0OS4yIiByPSIzLjYiLz48Y2lyY2xlIGN4PSI3MzUuMyIgY3k9Ii0yLjciIHI9IjMuNiIvPjxjaXJjbGUgY3g9IjYyLjEiIGN5PSIxNjEuOCIgcj0iMy42Ii8+PGNpcmNsZSBjeD0iNDAyLjIiIGN5PSIxNTIuOCIgcj0iMy42Ii8+PGNpcmNsZSBjeD0iNjkuNyIgY3k9IjQ1IiByPSIzLjYiLz48Y2lyY2xlIGN4PSI5NDUuMyIgY3k9Ijc3LjUiIHI9IjMuNiIvPjxjaXJjbGUgY3g9Ijc3Mi42IiBjeT0iNDM1LjUiIHI9IjMuNiIvPjxjaXJjbGUgY3g9Ijg0NC42IiBjeT0iMjg0LjYiIHI9IjMuNiIvPjxjaXJjbGUgY3g9IjEwNTQuMSIgY3k9IjUxNi4zIiByPSIzLjYiLz48Y2lyY2xlIGN4PSIzNTIuNiIgY3k9IjM2Mi4yIiByPSIzLjYiLz48Y2lyY2xlIGN4PSI3NzMuMSIgY3k9IjYxLjEiIHI9IjMuNiIvPjxjaXJjbGUgY3g9IjE0NjAuNSIgY3k9Ii01LjQiIHI9IjMuNiIvPjxjaXJjbGUgY3g9IjY0LjgiIGN5PSIyNDQiIHI9IjMuNiIvPjxjaXJjbGUgY3g9IjcyNi4zIiBjeT0iMTUxLjkiIHI9IjMuNiIvPjxjaXJjbGUgY3g9Ijc4LjEiIGN5PSIzMzUiIHI9IjMuNiIvPjxjaXJjbGUgY3g9IjI2NS41IiBjeT0iNTAwLjgiIHI9IjMuNiIvPjxjaXJjbGUgY3g9IjkwNC45IiBjeT0iLTkuMiIgcj0iMy42Ii8+PGNpcmNsZSBjeD0iMTUwMS4xIiBjeT0iMjUzLjIiIHI9IjMuNiIvPjxjaXJjbGUgY3g9IjEwMC42IiBjeT0iNTE0IiByPSIzLjYiLz48Y2lyY2xlIGN4PSIxNzYuOCIgY3k9IjQ0Mi4zIiByPSIzLjYiLz48L2c+PHBhdGggZD0iTTEwMDAgNjBMMTM4MCA0NDBNMTM4MCA2MEwxMDAwIDQ0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNTZCNEY1IiBzdHJva2Utb3BhY2l0eT0iMC4yOCIgc3Ryb2tlLXdpZHRoPSIyMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PHBhdGggZD0iTTEwMDAgNjBMMTM4MCA0NDBNMTM4MCA2MEwxMDAwIDQ0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjRkZGRkZGIiBzdHJva2Utd2lkdGg9IjYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjxnIGZpbGw9IiNGRkZGRkYiPjxjaXJjbGUgY3g9IjEwMDAiIGN5PSI2MCIgcj0iMTAiLz48Y2lyY2xlIGN4PSIxMDk1IiBjeT0iMTU1IiByPSIxMCIvPjxjaXJjbGUgY3g9IjEyODUiIGN5PSIzNDUiIHI9IjEwIi8+PGNpcmNsZSBjeD0iMTM4MCIgY3k9IjQ0MCIgcj0iMTAiLz48Y2lyY2xlIGN4PSIxMzgwIiBjeT0iNjAiIHI9IjEwIi8+PGNpcmNsZSBjeD0iMTI4NSIgY3k9IjE1NSIgcj0iMTAiLz48Y2lyY2xlIGN4PSIxMDk1IiBjeT0iMzQ1IiByPSIxMCIvPjxjaXJjbGUgY3g9IjEwMDAiIGN5PSI0NDAiIHI9IjEwIi8+PC9nPjxjaXJjbGUgY3g9IjExOTAiIGN5PSIyNTAiIHI9IjE1IiBmaWxsPSIjNTZCNEY1IiBzdHJva2U9IiNGRkZGRkYiIHN0cm9rZS13aWR0aD0iNyIvPjxjaXJjbGUgY3g9IjExNDQuNCIgY3k9IjI5NS42IiByPSIxNiIgZmlsbD0iIzU2QjRGNSIgZmlsbC1vcGFjaXR5PSIwLjI1Ii8+PGNpcmNsZSBjeD0iMTE0NC40IiBjeT0iMjk1LjYiIHI9IjciIGZpbGw9IiM1NkI0RjUiLz48L3N2Zz4K") right center / auto 100% no-repeat;

    --bg:        #0A1424;
    --ink:       #E6EDF7;
    --muted:     #8FA2BD;
    --line:      #22324D;
    --card:      #101C30;
    --accent:    #56B4F5;
    --on-accent: #04121F;
    --link:      #7FB2EE;
    --chrome-ink: #7FB2EE;
    --signal-ink: #F2B33D;
  }
  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #0A1424 38%, rgba(10,20,36,.55) 62%, rgba(10,20,36,0) 85%);
    pointer-events: none;
  }
  .hero-in {
    position: relative;
    z-index: 1;
    padding-block: 52px 44px;
    display: grid;
    gap: 22px;
    justify-items: start;
  }
  .hero-in > * { max-width: calc(100% - 300px); }
  @media (max-width: 900px) { .hero-in > * { max-width: 100%; } }
  @media (max-width: 700px) {
    .hero { background-size: auto 58%; background-position: right bottom; }
  }
  .eyebrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .chip {
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    border: 0;
    color: #FFFFFF;
    background: var(--chrome);
  }
  h1 { font-size: clamp(30px, 4.4vw, 46px); line-height: 1.07; max-width: 18ch; }
  /* A character waiting to be typed still occupies its space, so the line wraps
     once and never reflows while typing. */
  #hero-h1 .ch { visibility: hidden; }
  #hero-h1 .ch.is-on { visibility: visible; }
  #hero-h1.static .ch { visibility: visible; }

  /* The caret is drawn outside the layout, so it can never tip a wrap. */
  #hero-h1 .caret {
    position: relative;
    display: inline-block;
    width: 0;
    height: .92em;
    vertical-align: -.06em;
  }
  #hero-h1 .caret::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: .07em;
    height: 100%;
    background: var(--accent);
    animation: caret-blink 1.05s steps(1, end) infinite;
  }
  #hero-h1.typing .caret::after { animation: none; }
  #hero-h1.static .caret { display: none; }
  @keyframes caret-blink { 50% { opacity: 0; } }
  @media (prefers-reduced-motion: reduce) { #hero-h1 .caret { display: none; } }
  .lede { font-size: clamp(16px, 2vw, 19px); color: var(--muted); max-width: 54ch; margin: 0; }

  .cta-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
  .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    padding: 11px 17px;
    border-radius: 8px;
    border: 1px solid var(--line);
    color: var(--ink);
    background: var(--card);
    transition: border-color .12s ease;
  }
  .btn:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
  .btn-primary {
    background: var(--chrome);
    color: #FFFFFF;
    border-color: var(--chrome);
  }
  .btn-primary:hover { border-color: var(--chrome); filter: brightness(1.08); }

  /* ---------------- quick start rail ---------------- */
  section { padding-block: 44px; }
  .sec-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 24px; }
  .sec-head h2 { font-size: clamp(20px, 2.6vw, 26px); }
  .sec-head p { margin: 0; color: var(--muted); font-size: 14.5px; }

  .start {
    background: var(--well);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 22px;
  }
  .steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
    margin-top: 18px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
  }
  .step { background: var(--card); padding: 16px 15px; display: grid; gap: 6px; align-content: start; }
  .step-n {
    font-family: var(--mono);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--chrome-ink);
  }
  .step h3 { font-size: 15px; }
  .step-critical { box-shadow: inset 0 3px 0 var(--chrome); }
  .step-critical .step-n { color: var(--chrome-ink); }
  .step p { margin: 0; font-size: 14.5px; color: var(--muted); }
  .spec-k code, .note code {
    font-family: var(--mono);
    font-size: 12.5px;
    color: var(--ink);
    background: var(--well);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 1px 5px;
  }
  .step code {
    font-family: var(--mono);
    font-size: 12.5px;
    color: var(--ink);
    background: var(--well);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 1px 5px;
  }

  /* ---------------- stats ---------------- */
  .stats {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 2px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
  }
  .stat { background: var(--card); padding: 17px 16px; display: grid; gap: 3px; }
  .stat-v {
    font-size: clamp(22px, 3vw, 30px);
    font-weight: 600;
    letter-spacing: -.03em;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
  }
  .stat-k { font-size: 13.5px; color: var(--muted); }

  .livedot {
    display: inline-block;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--up);
    margin-right: 6px;
    vertical-align: middle;
    animation: pulse 2.4s ease-in-out infinite;
  }
  @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
  @media (prefers-reduced-motion: reduce) {
    .livedot { animation: none; }
    .btn { transition: none; }
  }


  /* ---------------- live Scotland map ----------------
     123 real node positions from CoreScope, the 439 observed links between
     them, and the busiest links carrying a travelling packet. Link opacity is
     weighted by how often each link was actually observed, so a one-off
     long-distance fluke stays faint. */
  .live-grid-retired {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 30px;
    align-items: start;
  }
  .mapfig {
    margin: 0;
    padding: 14px 14px 10px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--well);
    box-shadow: var(--shadow);
  }
  .scotmap { display: block; width: 100%; height: auto; max-height: 600px; margin-inline: auto; }
  .scotmap .coast {
    fill: none;
    stroke: var(--muted);
    stroke-opacity: .62;
    stroke-width: 1.1;
    stroke-linejoin: round;
    stroke-linecap: round;
  }
  .mapfig figcaption {
    margin-top: 8px;
    font-size: 12.5px;
    color: var(--muted);
    text-align: center;
  }
  .legend {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 16px;
    font-size: 13px;
    color: var(--muted);
  }
  .legend b { font-weight: 400; color: var(--ink); }
  .key {
    display: inline-block;
    width: 9px; height: 9px;
    border-radius: 50%;
    margin-right: 7px;
    vertical-align: 0;
  }
  .key-rep { background: var(--accent); }
  .key-room { background: var(--signal); }
  .key-comp { background: var(--ink); opacity: .72; }
  .key-pkt { background: var(--signal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal) 28%, transparent); }
  @media (prefers-reduced-motion: reduce) { .scotmap .pulse { display: none; } }
  @media (max-width: 860px) {
    .live-grid { grid-template-columns: 1fr; }
    .mapfig { order: -1; }
    .scotmap { max-height: 420px; }
  }


  /* ---------------- analytics ----------------
     Marks follow the dataviz spec: 2px line, ≥8px end markers with a 2px
     surface ring, area at ~10%, ≤24px columns with a 4px rounded cap, hairline
     solid grid, selective labels, one hover layer, and a table twin per chart.
     Text never wears a data colour. */
  .an-grid { display: grid; gap: 16px; }

  .filters {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
    padding: 12px 0 2px;
  }
  .fgroup { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .fk { font-family: var(--mono); font-size: 13px; color: var(--muted); }
  .segs { display: flex; flex-wrap: wrap; gap: 6px; }
  .seg {
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
    background: var(--well);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 6px 11px;
    cursor: pointer;
    white-space: nowrap;
  }
  .seg:hover { color: var(--ink); }
  .seg[aria-pressed="true"] { color: #FFFFFF; background: var(--chrome); border-color: var(--chrome); }
  .scope-line { margin: 0; margin-left: auto; font-size: 14px; color: var(--muted); }

  .kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
  }
  .kpi { background: var(--card); padding: 16px; display: grid; gap: 3px; }
  .kpi-v { font-family: var(--mono); font-size: clamp(24px, 4vw, 32px); font-weight: 600; letter-spacing: -.03em; line-height: 1.05; }
  .kpi-k { font-size: 13.5px; color: var(--muted); }

  figure.panel { margin: 0; }
  .panel-sum { font-size: 13.5px; color: var(--muted); margin-left: auto; }
  .panel-head .btn-sm { margin-left: auto; }
  .panel-sum + .btn-sm { margin-left: 8px; }
  .btn-sm { padding: 6px 11px; font-size: 12.5px; }
  .chart-note { padding: 0 18px 14px; font-size: 13px; color: var(--muted); }

  .chart { display: block; width: 100%; height: auto; font-family: var(--mono); }
  .chart .grid { stroke: var(--line); stroke-width: 1; }
  .chart .tick { fill: var(--muted); font-size: 11.5px; }
  .chart .label { fill: var(--ink); font-size: 12.5px; font-weight: 600; }
  .chart .line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
  .chart .area { fill: var(--accent); opacity: .10; }
  .chart .dot { fill: var(--card); stroke: var(--accent); stroke-width: 2; }
  .chart .dot-end { fill: var(--accent); stroke: var(--card); stroke-width: 2; }
  .chart .cross { stroke: var(--muted); stroke-width: 1; }
  .chart .bar { fill: var(--accent); opacity: .55; transition: opacity .12s ease; }
  .chart .bar-now { opacity: .95; }
  .chart .col.hot .bar { opacity: 1; }
  @media (prefers-reduced-motion: reduce) { .chart .bar { transition: none; } }

  .areas { display: grid; gap: 6px; padding: 14px 18px 8px; }
  .arow {
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    gap: 12px;
    background: none;
    border: 0;
    padding: 4px 0;
    cursor: pointer;
    color: inherit;
    text-align: left;
    border-radius: 6px;
  }
  .arow:hover .afill, .arow.is-on .afill { opacity: 1; }
  .acode { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--ink); }
  .atrack { display: block; height: 18px; background: var(--well); border-radius: 0 4px 4px 0; overflow: hidden; }
  .afill { display: block; height: 100%; background: var(--accent); opacity: .6; border-radius: 0 4px 4px 0; min-width: 2px; }
  .aval { font-family: var(--mono); font-size: 13px; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }

  th[data-sort] { cursor: pointer; }
  th[data-sort]:hover { color: var(--ink); }
  .tfoot { padding: 10px 18px 14px; display: flex; justify-content: flex-end; }
  .tfoot:empty { display: none; }
  .muted { color: var(--muted); font-size: 13.5px; }
  .empty-title { font-family: var(--mono); font-weight: 600; font-size: 14.5px; color: var(--ink); margin: 0; }

  /* status: an icon and a word in text tokens, with the colour only on the icon */
  .status { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--ink); white-space: nowrap; }
  .status-ico { font-size: 9px; line-height: 1; }
  .status-good .status-ico { color: var(--up); }
  .status-warning .status-ico { color: var(--stale); }
  .status-critical .status-ico { color: var(--down); }

  .tip {
    position: fixed;
    z-index: 80;
    pointer-events: none;
    background: var(--card);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 8px 11px;
    font-size: 13px;
    box-shadow: var(--shadow);
    max-width: 260px;
  }
  .tip-row { display: flex; align-items: baseline; gap: 8px; }
  .tip-row + .tip-row { margin-top: 3px; }
  .tip-key { width: 12px; height: 2px; background: var(--accent); align-self: center; flex: none; }
  .tip strong { font-family: var(--mono); font-weight: 600; }
  .tip-label { color: var(--muted); }

  @media (max-width: 860px) {
    .kpis { grid-template-columns: repeat(2, 1fr); }
    .scope-line { margin-left: 0; width: 100%; }
  }


  /* ---------------- home hero: the map is the banner ----------------
     The brand's header-mesh art stays on the analytics hero; here the real
     network is the art. Coastline in MeshCore tint on Night, nodes brightest,
     packets in Signal. One load sequence — coastline draws in, nodes come up —
     then it rests. Everything is visible from the first frame. */
  .hero-map { background-image: none; }
  .hero-map::before { display: none; }
  .hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(300px, 420px);
    gap: 28px;
    align-items: center;
    padding-block: 40px 28px;
  }
  .hero-copy { display: grid; gap: 20px; justify-items: start; }
  .hero-copy > * { max-width: 100%; }
  .hero-legend { margin-top: 0; color: var(--muted); }
  .hero-legend b { color: var(--ink); }
  .hero-map-layer { position: relative; }
  .hero-map-layer .scotmap { display: block; width: 100%; height: auto; max-height: 540px; margin-inline: auto; }
  .hero-map-layer::after {
    /* a soft field behind the map so the nodes sit in their own light */
    content: "";
    position: absolute;
    inset: 6% -6%;
    background: radial-gradient(60% 55% at 62% 62%, rgba(86,180,245,.13), transparent 70%);
    z-index: -1;
    pointer-events: none;
  }
  .hero-map .scotmap .coast {
    stroke: var(--saltire);
    stroke-opacity: .95;
    stroke-width: 1.15;
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
    animation: coast-in 1.4s cubic-bezier(.4, 0, .2, 1) both;
  }
  .hero-map .scotmap .links { stroke: var(--meshcore); }
  .hero-map .scotmap .dots { filter: drop-shadow(0 0 3px rgba(86,180,245,.55)); animation: nodes-up 1s ease-out .5s both; }
  /* live packets: the real hop chain, drawn over the snapshot's links */
  .hero-map .scotmap .live-trail {
    fill: none;
    stroke: var(--signal);
    stroke-width: 1.4;
    stroke-opacity: .75;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke-opacity 1.4s ease;
  }
  .hero-map .scotmap .live-trail.is-fading { stroke-opacity: 0; }
  .hero-map .scotmap .live-ring {
    fill: none;
    stroke: var(--signal);
    stroke-width: 1.2;
    animation: ring-out .9s ease-out forwards;
  }
  /* Once real traffic is flowing the sample loops are noise, so they stop. */
  .hero-map .scotmap.is-live .pulse { display: none; }

  .hero-map .scotmap .inset-box { fill: rgba(0,94,184,.10); stroke: var(--saltire); stroke-opacity: .7; stroke-width: .8; }
  .hero-map .scotmap .inset-label { fill: var(--muted); font-family: var(--mono); font-size: 9.5px; }
  .hero-map .scotmap .inset .coast { animation-delay: .9s; }
  @keyframes coast-in { from { stroke-dashoffset: 1; stroke-opacity: .3; } to { stroke-dashoffset: 0; stroke-opacity: .95; } }
  @keyframes nodes-up { from { opacity: .35; } to { opacity: 1; } }
  @media (prefers-reduced-motion: reduce) {
    .hero-map .scotmap .coast, .hero-map .scotmap .dots { animation: none; }
  }

  /* the figures ride the banner's bottom edge as a row of cards; only the live one is Saltire */
  .hero-map .hero-grid { padding-bottom: 76px; }
  .hero-stats { position: relative; z-index: 2; margin-top: -46px; }
  .hero-stats-in { display: grid; gap: 10px; padding-block: 0 4px; }
  .stats-hero { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; background: none; border: 0; border-radius: 0; overflow: visible; }
  .stats-hero .stat {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 14px 16px 13px;
    box-shadow: var(--shadow);
  }
  .stats-hero .stat-v { font-size: clamp(22px, 3vw, 30px); color: var(--ink); }
  .stats-hero .stat-k { color: var(--muted); }
  .stats-hero .stat.is-live { background: var(--saltire); border-color: var(--saltire); }
  .stats-hero .stat.is-live .stat-v { color: #FFFFFF; }
  .stats-hero .stat.is-live .stat-k { color: rgba(255,255,255,.85); }
  .hero-stats-k { margin: 6px 0 0; font-size: 13px; color: var(--muted); }

  @media (max-width: 900px) {
    .hero-grid { grid-template-columns: 1fr; padding-block: 34px 8px; }
    .hero-map-layer { order: -1; }
    .hero-map-layer .scotmap { max-height: 380px; }
    .hero-map .hero-grid { padding-bottom: 60px; }
    .hero-stats { margin-top: -36px; }
    .stats-hero { grid-template-columns: repeat(3, 1fr); }
  }
  @media (max-width: 540px) {
    .stats-hero { grid-template-columns: repeat(2, 1fr); }
    .stats-hero .stat.is-live { grid-column: 1 / -1; }
  }


  /* ---------------- region script builder + live map ---------------- */
  .builder { margin-top: 14px; }
  .builder .panel-head { align-items: baseline; }
  .builder .panel-sum { margin-left: 0; flex-basis: 100%; }
  .b-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; padding: 18px; }
  .b-col { display: grid; gap: 16px; align-content: start; }
  .b-field { display: grid; gap: 8px; }
  .b-help { margin: 0; font-size: 13px; color: var(--muted); max-width: 46ch; }
  .seg-groups { display: grid; gap: 10px; }
  .seg-group { display: grid; gap: 5px; }
  .seg-group-k { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
  .seg-tag { font-weight: 400; opacity: .75; }
  .seg-prop { border-style: dashed; }
  .seg-prop[aria-pressed="true"] { border-style: solid; }
  .seg:disabled { opacity: .45; cursor: default; }
  .b-out { display: grid; gap: 8px; align-content: start; }
  .b-out-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .b-out .cli { border: 1px solid var(--line); border-radius: 8px; min-height: 280px; margin: 0; }
  .b-spec { border-top: 1px solid var(--line); }
  .spec-v-text { font-size: 13.5px; color: var(--muted); text-align: right; max-width: 34ch; }
  .spec-v-text code, .spec-k code { font-family: var(--mono); font-size: 12.5px; color: var(--ink); background: var(--well); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; }
  @media (max-width: 860px) { .b-body { grid-template-columns: 1fr; } .spec-v-text { text-align: left; max-width: none; } .b-spec .spec-row { flex-direction: column; align-items: flex-start; gap: 4px; } }

  .hero-map .scotmap .live-pkt { fill: var(--signal); }
  .hero-map .scotmap .live-ring { fill: none; stroke: var(--signal); stroke-width: 1.2; animation: ring-out .9s ease-out forwards; }
  @keyframes ring-out { from { r: 3; opacity: .9; } to { r: 14; opacity: 0; } }
  .hero-legend[data-live="true"]::after { content: "Live"; font-family: var(--mono); font-size: 11px; color: var(--signal); margin-left: 6px; }


  /* ---------------- observer tabs ---------------- */
  .tabs { display: flex; flex-wrap: wrap; gap: 0; border-bottom: 1px solid var(--line); background: var(--well); padding: 0 8px; }
  .tab {
    font-family: var(--mono);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--muted);
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    padding: 14px 12px 12px;
    cursor: pointer;
    margin-bottom: -1px;
  }
  .tab:hover { color: var(--ink); }
  .tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
  .pane { padding: 20px 18px 18px; }
  .pane-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: start; }
  .pane-copy h3 { font-size: 16px; margin-bottom: 8px; }
  .pane-copy p { margin: 0 0 12px; font-size: 15px; }
  .pane-copy code { font-family: var(--mono); font-size: 12.5px; color: var(--ink); background: var(--well); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; }
  .steps-list { margin: 0 0 12px; padding-left: 20px; font-size: 15px; display: grid; gap: 8px; }
  .steps-list.plain { list-style: none; padding-left: 0; }
  .pane .b-out .cli { min-height: 0; }
  .pane .spec { border: 1px solid var(--line); border-radius: 8px; }
  @media (max-width: 860px) { .pane-grid { grid-template-columns: 1fr; } }


  /* ---------------- folds: the "run a…" sections stay closed until wanted ---------------- */
  .fold { border: 1px solid var(--line); border-left: 3px solid var(--chrome); border-radius: 12px; background: var(--card); margin-top: 14px; }
  .fold > .panel { border: 0; border-radius: 0 0 12px 12px; border-top: 1px solid var(--line); margin-top: 0; }
  .fold-head {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "title chev" "sum chev";
    gap: 4px 16px;
    align-items: center;
    padding: 16px 18px;
    cursor: pointer;
    border-radius: 12px;
  }
  .fold-head::-webkit-details-marker { display: none; }
  .fold-head:hover { background: var(--well); }
  .fold[open] > .fold-head { border-radius: 12px 12px 0 0; background: var(--well); }
  .fold-title { grid-area: title; font-family: var(--mono); font-weight: 600; font-size: 16px; color: var(--ink); }
  .fold-sum { grid-area: sum; font-size: 14.5px; color: var(--muted); max-width: 70ch; }
  .fold-chev { grid-area: chev; width: 10px; height: 10px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .15s ease; margin-right: 4px; }
  .fold[open] > .fold-head .fold-chev { transform: rotate(-135deg); }
  @media (prefers-reduced-motion: reduce) { .fold-chev { transition: none; } }
  .raw { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
  .raw > summary { cursor: pointer; font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--link); list-style: none; }
  .raw > summary::-webkit-details-marker { display: none; }
  .raw > summary::before { content: "+ "; color: var(--muted); }
  .raw[open] > summary::before { content: "– "; }
  .raw .b-out-head { margin-top: 10px; }
  .panel-spec { border: 1px solid var(--line); border-radius: 8px; }
  .spec-v.small { font-size: 11.5px; white-space: normal; word-break: break-all; }

  .band { background: var(--well); border-block: 1px solid var(--line); }
  .band .panel, .band .fold, .band .start { background: var(--card); }
  .band .fold > .panel { background: var(--card); }

  /* ---------------- services ---------------- */
  .svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .svc {
    display: grid;
    gap: 7px;
    align-content: start;
    padding: 18px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: var(--card);
    text-decoration: none;
    color: inherit;
    transition: border-color .14s ease;
  }
  .svc:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
  .svc h3 { font-size: 16px; display: flex; align-items: center; gap: 8px; }
  .svc p { margin: 0; font-size: 14.5px; color: var(--muted); }
  .svc .host {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--muted);
    opacity: .8;
    word-break: break-all;
  }
  .svc-ico { width: 18px; height: 18px; flex: none; color: var(--accent); }

  /* ---------------- analytics ---------------- */
  .panel {
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--card);
    overflow: hidden;
  }
  .panel-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 18px;
    border-bottom: 1px solid var(--line);
    background: var(--well);
    flex-wrap: wrap;
  }
  .panel-head h3 { font-size: 15px; }
  .count-pill {
    margin-left: auto;
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid var(--line);
    color: var(--muted);
    font-variant-numeric: tabular-nums;
  }

  .node-link { color: var(--ink); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); }
  .node-link:hover { color: var(--accent); border-bottom-color: var(--accent); }

  .tbl-scroll { overflow-x: auto; }
  table { width: 100%; border-collapse: collapse; font-size: 14px; }
  th {
    text-align: left;
    font-size: 11.5px;
    font-weight: 400;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
  }
  td { padding: 13px 16px; border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent); }
  tr:last-child td { border-bottom: 0; }
  .nm { font-family: var(--mono); font-size: 13.5px; }
  .num { font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }

  .sev {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--mono);
    font-size: 11.5px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
  }
  .sev::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
  .sev { color: var(--ink); background: var(--well); }
  .sev-new::before  { background: var(--up); }
  .sev-warn::before { background: var(--stale); }

  .empty { padding: 30px 18px; display: grid; gap: 7px; justify-items: center; text-align: center; }
  .empty .big { font-family: var(--mono); font-weight: 600; font-size: 15px; color: var(--ink); }
  .empty p { margin: 0; color: var(--muted); font-size: 14.5px; max-width: 46ch; }

  .chart-wrap { padding: 20px 18px 10px; }
  .chart-legend { display: flex; gap: 16px; flex-wrap: wrap; padding: 0 18px 18px; font-size: 13px; color: var(--muted); }
  .swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }

  .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

  .note {
    border-left: 2px solid var(--accent);
    background: var(--well);
    padding: 14px 16px;
    border-radius: 0 8px 8px 0;
    font-size: 14.5px;
    color: var(--muted);
  }
  .note strong { color: var(--ink); font-weight: 600; }
  .note.warn { border-left-color: var(--chrome); }

  /* ---------------- settings spec sheet ---------------- */
  .spec { display: grid; }
  .spec-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 9px 18px;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
  }
  .spec-row:last-child { border-bottom: 0; }
  .spec-k { font-size: 14px; color: var(--muted); flex: 1 1 auto; }
  .spec-v {
    font-family: var(--mono);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .spec-v.hl { color: var(--accent); }
  .key-radio { box-shadow: inset 0 3px 0 var(--chrome); }
  .key-scope { box-shadow: inset 0 3px 0 var(--accent); }

  .cli {
    margin: 0;
    padding: 14px 18px;
    background: var(--well);
    border-top: 1px solid var(--line);
    font-family: var(--mono);
    font-size: 13px;
    line-height: 1.7;
    color: var(--ink);
    overflow-x: auto;
  }
  .cli .c { color: var(--muted); }

  /* ---------------- footer ---------------- */
  footer { padding-block: 34px 44px; font-size: 14px; color: var(--muted); }
  .foot-grid { display: grid; grid-template-columns: 1.5fr repeat(3, minmax(0,1fr)); gap: 26px; }
  .foot-grid ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
  .foot-grid a { color: var(--muted); text-decoration: none; }
  .foot-grid a:hover { color: var(--ink); }
  .lbl { font-family: var(--mono); font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
  .lockup-scotmesh { display: inline-block; }
  .lockup-scotmesh svg { display: block; height: 26px; width: auto; }
  .foot-bar { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 14px;
    flex-wrap: wrap; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 13.5px; }
  .foot-bar .mono { font-family: var(--mono); }

  [hidden] { display: none !important; }

  /* ---------------- responsive ---------------- */
  @media (max-width: 860px) {
    .nav-in { padding-block: 10px; row-gap: 4px; }
    .svc-grid { grid-template-columns: repeat(2, 1fr); }
    .steps { grid-template-columns: repeat(2, 1fr); }
    .stats { grid-template-columns: repeat(3, 1fr); }
    .foot-grid { grid-template-columns: 1fr 1fr; }
    .two-col { grid-template-columns: 1fr; }
  }
  @media (max-width: 540px) {
    body { font-size: 16px; }
    .wrap { padding-inline: 16px; }
    .svc-grid { grid-template-columns: 1fr; }
    .steps { grid-template-columns: 1fr; }
    .stats { grid-template-columns: repeat(2, 1fr); }
    .foot-grid { grid-template-columns: 1fr; }
    .hero-in { padding-block: 40px 34px; }
  }

  /* Eight destinations do not fit across a phone. Below this width the bar
     keeps the lockup, the theme toggle and a menu button, and the
     destinations drop down underneath when asked for. */
  @media (max-width: 760px) {
    .nav-toggle { display: inline-flex; }
    .nav-in { flex-wrap: wrap; gap: 10px; }
    .nav nav {
      display: none;
      order: 3;
      width: 100%;
      margin-left: 0;
      flex-direction: column;
      align-items: stretch;
      gap: 2px;
      padding-bottom: 10px;
    }
    .nav-in[data-menu="open"] nav { display: flex; }
    .nav nav a, .nav nav button { padding: 10px 12px; text-align: left; font-size: 15px; }
    .nav nav .theme-toggle { display: none; }
  }