/* Karyon Design System version 44, tokens v7.
   Generated by site/tools/vendor_design_system.py from tokens.json; do
   not edit. Dark is the default, so a page with no script renders dark. */
:root{
  color-scheme:dark;
  --surface-000:#020305;
  --surface-100:#0a0f18;
  --surface-200:#111826;
  --line:#1a2230;
  --line-strong:#2a3548;
  --ink:#eef4fb;
  --ink-2:#8b9bb5;
  --ink-3:#707f99;
  --ink-4:#5e6b83;
  --blue:#2f7bff;
  --blue-on:#020305;
  --ice:#cfe8ff;
  --teal:#2feaff;
  --status-good:#5fae82;
  --status-warn:#c98a3e;
  --status-crit:#d97a80;
  --status-crit-on:#020305;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --radius-sm:4px;
  --radius-md:8px;
  --radius-lg:16px;
  --radius-full:9999px;
  --font-sans:"Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:"Space Mono", ui-monospace, "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
}
:root[data-theme="light"]{
  color-scheme:light;
  --surface-000:#f3f5fa;
  --surface-100:#ffffff;
  --surface-200:#e6ebf3;
  --line:#d8e0ec;
  --line-strong:#7c8cab;
  --ink:#0c1220;
  --ink-2:#4a5470;
  --ink-3:#5e6883;
  --ink-4:#7a839b;
  --blue:#1554c4;
  --blue-on:#ffffff;
  --ice:#0a6fb0;
  --teal:#0a8f8c;
  --status-good:#3f7a58;
  --status-warn:#8a5a1e;
  --status-crit:#a13f45;
  --status-crit-on:#ffffff;
}

/* Self-hosted: Space Grotesk and Space Mono, Latin, SIL OFL 1.1 (see /fonts/). */
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/space-grotesk-400.65fd17fc.woff2) format("woff2")}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/space-grotesk-500.1b1a8131.woff2) format("woff2")}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/space-grotesk-600.685bbbf6.woff2) format("woff2")}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/space-grotesk-700.35f8aec5.woff2) format("woff2")}
@font-face{font-family:"Space Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/space-mono-400.fb4a81a2.woff2) format("woff2")}
@font-face{font-family:"Space Mono";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/space-mono-700.2d46bd15.woff2) format("woff2")}

/* as46307.net styles. Every colour, size, space and radius is a design-system
   token (tokens.css, prepended by build.py along with the @font-face rules) or
   a value a component already uses. Where this file and the system disagree,
   the system is right.

   Two type roles: sans (Space Grotesk) for anything a person reads, mono
   (Space Mono, the `data` style) for every value - ASNs, prefixes,
   communities, addresses, the as-set, POC handles. */


*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0 auto;max-width:1200px;padding:var(--space-4);
  background:var(--surface-000);color:var(--ink);font:400 15px/23px var(--font-sans)}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
a{color:var(--blue)}
p{margin:0 0 var(--space-3)}
ul,ol{margin:0 0 var(--space-3);padding-left:var(--space-5)}
li{margin-bottom:var(--space-1)}
strong{font-weight:700}

/* Type styles, as tokens.json names them. */
h1{font-size:28px;line-height:34px;font-weight:700;margin:0 0 var(--space-3)}
h2{font-size:20px;line-height:26px;font-weight:700;margin:var(--space-6) 0 var(--space-3)}
.label{font-size:12px;line-height:16px;font-weight:600;letter-spacing:.09em;text-transform:uppercase}
.v{font-family:var(--font-mono);font-size:14px;line-height:20px;font-weight:500}
code{font-family:var(--font-mono);font-size:13px;line-height:20px;font-weight:400}
pre{margin:0 0 var(--space-3);padding:var(--space-3);overflow-x:auto;
  background:var(--surface-100);border:1px solid var(--line);border-radius:var(--radius-md);
  color:var(--ink)}
.lede{color:var(--ink-2);max-width:720px}
.prose{max-width:720px}
.muted{color:var(--ink-2)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--space-4);top:var(--space-4);z-index:1;background:var(--surface-100);
  padding:var(--space-2) var(--space-3);border-radius:var(--radius-md)}

/* An icon inline with a link, at the smallest size the Icons set allows. */
.ic{width:16px;height:16px;flex:none;display:block}
a.ext{display:inline-flex;align-items:center;gap:var(--space-1)}
h2 .ic,.panel-title .ic{width:20px;height:20px;color:var(--ink-3)}

/* Brand: the CentauriNet mark, token-bound, plus a live wordmark. It sits on
   surface-000 because the mark's nucleus cells are filled with that token. */
.top{display:flex;align-items:center;padding:var(--space-2) 0 var(--space-5)}
.brand{display:flex;align-items:center;gap:var(--space-2);color:var(--ink);text-decoration:none}
.brand .mark{width:32px;height:32px;flex:none;display:block}
.brand .word{font-size:20px;line-height:26px;font-weight:700}
.brand .v{color:var(--ink-2)}

/* Page shell, with the Sidebar component's treatment. */
.shell{display:flex;gap:var(--space-5);align-items:flex-start}
.side{position:sticky;top:var(--space-4);flex:none;width:200px;
  background:var(--surface-100);border:1px solid var(--line);border-radius:var(--radius-md);
  padding:var(--space-3) 0;display:flex;flex-direction:column;gap:var(--space-4)}
.side .ngl{padding:0 var(--space-4) var(--space-1);font-size:12px;line-height:16px;
  font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.side a{display:flex;align-items:center;gap:var(--space-2);margin:0 var(--space-2);
  padding:var(--space-2);border-radius:var(--radius-md);color:var(--ink-2);
  font-size:14px;font-weight:500;text-decoration:none}
.side a:hover{background:var(--surface-200);color:var(--ink)}
.side a:focus-visible{outline-offset:-2px}
.side a[aria-current]{background:var(--surface-200);color:var(--blue);font-weight:600}
.main{flex:1;min-width:0}
/* Narrow: proposed Sidebar narrow variant. The nav wraps instead of
   scrolling, so every destination is on a phone's first screen. Group labels
   drop out and the items flow as one list. */
@media (max-width:900px){
  .shell{display:block}
  .side{position:static;width:auto;flex-direction:row;flex-wrap:wrap;
    gap:var(--space-1);padding:var(--space-2);margin-bottom:var(--space-5)}
  .side .ngl{display:none}
  .side .ngrp{display:contents}
  .side a{margin:0;white-space:nowrap}
}

.foot{display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:flex-end;
  justify-content:space-between;margin-top:var(--space-6);padding-top:var(--space-4);
  border-top:1px solid var(--line);color:var(--ink-3);font-size:14px;line-height:23px}
.foot p{margin:0 0 var(--space-1)}
.foot .v{font-size:13px}
.foot-text{min-width:0;max-width:720px}
.theme{display:flex;align-items:center;gap:var(--space-3)}
.theme .label{color:var(--ink-3)}

/* Menu's inline choice (.seg), unchanged. */
.seg{display:flex;gap:var(--space-1)}
.seg button{
  font-family:var(--font-sans);font-size:13px;line-height:18px;padding:2px var(--space-2);
  border:none;border-radius:var(--radius-sm);background:transparent;color:var(--ink-2);cursor:pointer;
}
.seg button:hover{background:var(--surface-200);color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--blue);color:var(--blue-on)}

/* Home: the one place the Field appears, behind the header only. */
.masthead{position:relative;overflow:hidden;margin-bottom:var(--space-5);
  padding:var(--space-6) var(--space-5);background:var(--surface-000);
  border:1px solid var(--line);border-radius:var(--radius-md)}
/* The field fills the right half of the header, clear of the text, and is
   drawn whole (meet, not slice) so no edge of it is cut mid-header. Below
   700px there is no right half to give it, and a NOC on a phone wants the
   facts on the first screen more than the texture, so it is not shown. */
.masthead .field{position:absolute;top:0;right:0;width:50%;height:100%;display:block}
.masthead h1,.masthead p{position:relative}
.masthead p{max-width:calc(50% - var(--space-5));margin:0;color:var(--ink-2)}
.masthead h1 .v{font-size:inherit;line-height:inherit;font-weight:700}
@media (max-width:700px){
  .masthead .field{display:none}
  .masthead p{max-width:none}
}
/* components/Field, unchanged. */
.fld-core{stroke:var(--teal);stroke-width:1.3;opacity:0.45}
.fld-spoke{stroke:var(--blue);stroke-width:0.75;opacity:0.4}
.fld-hub{fill:var(--ice)}
.fld-sm{fill:var(--blue);opacity:.6}
/* Dark only (and the no-JS default): spokes read too faint at the component's
   0.4 / 0.75px. Light and the core edges are unchanged. */
:root:not([data-theme="light"]) .fld-spoke{opacity:.8;stroke-width:1}

.glance{display:grid;grid-template-columns:3fr 2fr;gap:var(--space-5);align-items:start}
.glance .stack{display:grid;gap:var(--space-5)}
@media (max-width:1100px){.glance{grid-template-columns:1fr}}

/* Panel, as the component draws it. */
.panel{background:var(--surface-100);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.panel-head{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4);
  border-bottom:1px solid var(--line)}
.panel-title{display:flex;align-items:center;gap:var(--space-2);margin:0;
  font-size:15px;line-height:23px;font-weight:700;color:var(--ink)}
.panel-body{padding:var(--space-4);font-size:14px;line-height:23px;color:var(--ink-2)}
.panel-body p:last-child{margin-bottom:0}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--space-5);margin-bottom:var(--space-3)}

/* Key/value rows inside a panel: keys in the label style, values in data. */
.facts{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:var(--space-3) var(--space-5);
  align-items:baseline;margin:0}
.facts dt{font-size:12px;line-height:16px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-2)}
.facts dd{margin:0;color:var(--ink);min-width:0;overflow-wrap:anywhere}
.facts dd .muted{display:block}
.facts + p{margin-top:var(--space-3)}
/* Stacked: key above value. Narrow screens, and the contact cards, which are
   too narrow for an address beside its key. */
@media (max-width:560px){
  .facts{grid-template-columns:minmax(0,1fr);gap:var(--space-1)}
  .facts dd{margin-bottom:var(--space-3)}
}
.cards .facts{grid-template-columns:minmax(0,1fr);gap:var(--space-1)}
.cards .facts dd{margin-bottom:var(--space-3)}

.section-label{color:var(--ink-3);margin:var(--space-6) 0 var(--space-3)}
.notes-list{list-style:none;padding:0;margin:0;display:grid;gap:var(--space-3)}
.notes-list li{margin:0}
.notes-list a{font-weight:700;font-size:15px}
.notes-list .meta{display:block;color:var(--ink-3);font-size:14px}
.notes-list p{margin:var(--space-1) 0 0;color:var(--ink-2);max-width:720px}

/* Table, as the component draws it; the wrapper scrolls instead of the page. */
.tbl-wrap{border:1px solid var(--line);border-radius:var(--radius-md);overflow-x:auto;
  background:var(--surface-100);margin-bottom:var(--space-3)}
table.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl thead th{
  background:var(--surface-200);color:var(--ink-2);
  font-family:var(--font-sans);font-size:12px;font-weight:600;
  letter-spacing:0.09em;text-transform:uppercase;
  text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);
  white-space:nowrap;
}
.tbl tbody td{padding:10px 12px;border-bottom:1px solid var(--line);color:var(--ink);vertical-align:top}
.tbl tbody tr:last-child td{border-bottom:none}
.tbl tbody tr:hover td{background:var(--surface-200)}
.tbl td.data{font-family:var(--font-mono);font-weight:500;white-space:nowrap}
.tbl td.ink2{color:var(--ink-2)}
.tbl td.wrap{min-width:220px}
.tbl td.nw{white-space:nowrap}

/* Notes. */
.kicker{color:var(--ink-3);margin:0 0 var(--space-2)}
.byline{color:var(--ink-2);margin:0 0 var(--space-5)}
.prose h2:first-of-type{margin-top:var(--space-5)}
figure{margin:var(--space-5) 0}
figcaption{color:var(--ink-2);font-size:14px;line-height:23px;margin-top:var(--space-2);max-width:720px}
.sources li{color:var(--ink-2)}
/* Diagrams: structure in ink-2 and line-strong, the subject in blue, status
   colour only where the drawing shows health, and always with a word. */
.dg{display:block;width:100%;max-width:480px;height:auto}
.dg .box{fill:var(--surface-100);stroke:var(--line-strong);stroke-width:1}
.dg .wire{fill:none;stroke:var(--ink-2);stroke-width:1.2}
.dg .head{fill:var(--ink-2)}
.dg .t{fill:var(--ink-2);font-family:var(--font-sans);font-size:13px}
.dg .tl{fill:var(--ink-2);font-family:var(--font-sans);font-size:12px;font-weight:600;letter-spacing:.09em}
.dg .sep{stroke:var(--line-strong);stroke-width:1}
.dg .tv{fill:var(--ink);font-family:var(--font-mono);font-size:13px}
.dg .subj{fill:var(--blue)}
.dg .subj-box{fill:var(--surface-100);stroke:var(--blue);stroke-width:1.2}
.dg .bad{fill:var(--status-crit);font-family:var(--font-sans);font-size:13px;font-weight:600}

/* The mark's paint, as classes: the CSP allows no style attributes. */
.mark .mk1{fill:none;stroke:var(--ice);stroke-width:1.6;opacity:0.85}
.mark .mk2{fill:var(--blue);opacity:1.0}
.mark .mk3{fill:var(--surface-000);fill-opacity:1;stroke:var(--ice);stroke-width:1.0;stroke-opacity:0.6}