@font-face { font-family:'Fraunces'; src:url(fonts/fraunces-latin.woff2) format('woff2');
      font-weight:400 600; font-style:normal; font-display:swap; }
    @font-face { font-family:'Fraunces'; src:url(fonts/fraunces-italic-latin.woff2) format('woff2');
      font-weight:500; font-style:italic; font-display:swap; }
    @font-face { font-family:'IBM Plex Mono'; src:url(fonts/plexmono-400.woff2) format('woff2');
      font-weight:400; font-style:normal; font-display:swap; }
    @font-face { font-family:'IBM Plex Mono'; src:url(fonts/plexmono-600.woff2) format('woff2');
      font-weight:600; font-style:normal; font-display:swap; }

    :root {
      color-scheme: dark;
      --void:#05080f; --void-2:#0a0f1e;
      --panel:rgba(16,23,42,.62); --panel-2:rgba(22,30,52,.72);
      --ink:#e9ecf8; --ink-dim:#97a1c1; --ink-faint:#6e7a9c;
      --line:rgba(150,170,215,.14); --line-2:rgba(150,170,215,.26);
      --cyan:#74e2ff; --cyan-deep:#2a93c4; --cyan-ghost:rgba(116,226,255,.10);
      --gold:#f1c66b; --gold-deep:#c79a3e;
      --up:#62d6a0; --down:#ff7389; --stale:#f1c66b;
      --display:'Fraunces',Georgia,'Times New Roman',serif;
      --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
      --glow-cyan:0 0 18px rgba(116,226,255,.45);
      --shadow:0 24px 60px -28px rgba(0,0,0,.85);
    }

    * { box-sizing:border-box; }
    html { -webkit-text-size-adjust:100%; }
    body {
      margin:0; min-height:100vh; color:var(--ink);
      font:400 15px/1.65 var(--mono);
      background:var(--void); position:relative; overflow-x:hidden;
      letter-spacing:.005em;
    }
    body::before {
      content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
      background:
        radial-gradient(1100px 760px at 78% -8%, rgba(116,226,255,.13), transparent 60%),
        radial-gradient(900px 700px at 8% 108%, rgba(241,198,107,.09), transparent 55%),
        radial-gradient(1400px 1000px at 50% 42%, #0c1428 0%, #070b16 48%, var(--void) 100%),
        repeating-linear-gradient(0deg, transparent 0 59px, var(--line) 59px 60px),
        repeating-linear-gradient(90deg, transparent 0 59px, var(--line) 59px 60px);
    }
    body::after {
      content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
      background-image:
        radial-gradient(1.4px 1.4px at 18% 24%, #fff, transparent),
        radial-gradient(1.2px 1.2px at 62% 14%, #d6ecff, transparent),
        radial-gradient(1px 1px at 84% 62%, #fff, transparent),
        radial-gradient(1.5px 1.5px at 33% 78%, #fdeecb, transparent),
        radial-gradient(1px 1px at 9% 64%, #cfe6ff, transparent),
        radial-gradient(1.3px 1.3px at 73% 84%, #fff, transparent),
        radial-gradient(1px 1px at 46% 47%, #bcd4ff, transparent),
        radial-gradient(1.6px 1.6px at 92% 28%, #fff, transparent),
        radial-gradient(1px 1px at 27% 9%, #fff, transparent);
      background-repeat:no-repeat;
      opacity:.9; animation:twinkle 7s ease-in-out infinite;
    }
    @keyframes twinkle { 0%,100%{opacity:.55} 50%{opacity:.95} }

    header {
      display:flex; align-items:center; justify-content:space-between; gap:1rem;
      padding:.85rem clamp(1rem,4vw,2.4rem);
      border-bottom:1px solid var(--line-2);
      background:linear-gradient(180deg, rgba(8,12,24,.86), rgba(8,12,24,.5));
      backdrop-filter:blur(9px); position:sticky; top:0; z-index:20;
    }
    .brand { display:flex; align-items:baseline; gap:.6rem; text-decoration:none; color:inherit; }
    .brand .star { color:var(--gold); width:1.3rem; height:1.3rem; flex:none; align-self:center;
      filter:drop-shadow(0 0 6px rgba(241,198,107,.7));
      animation:pulse-star 4s ease-in-out infinite; }
    .brand .name { font-family:var(--display); font-weight:600; font-size:1.28rem; letter-spacing:.02em;
      font-variation-settings:'opsz' 80,'SOFT' 30; }
    .brand .sub { font-size:.66rem; letter-spacing:.42em; text-transform:uppercase; color:var(--cyan);
      opacity:.85; padding-bottom:.1rem; }
    .asn { font-size:.74rem; letter-spacing:.12em; color:var(--gold); opacity:.85; }
    nav { display:flex; align-items:center; gap:.9rem; }
    .startime { font-size:.7rem; letter-spacing:.16em; color:var(--ink-dim); text-transform:uppercase;
      white-space:nowrap; }
    .startime b { color:var(--cyan); font-weight:400; letter-spacing:.1em; }
    .whoami { font-size:.74rem; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

    main { max-width:1080px; margin:0 auto; padding:clamp(1.4rem,4vw,2.8rem) clamp(1rem,4vw,1.6rem) 5rem;
      position:relative; z-index:1; }

    h1 { font-family:var(--display); font-weight:600; font-size:clamp(1.9rem,5vw,2.9rem);
      line-height:1.05; letter-spacing:.005em; margin:.2rem 0 .4rem;
      font-variation-settings:'opsz' 110,'SOFT' 20; }
    h1.mono { font-family:var(--mono); font-weight:600; font-size:clamp(1.6rem,4vw,2.1rem); letter-spacing:.02em; }
    h2 { font-family:var(--mono); font-weight:600; font-size:.78rem; text-transform:uppercase; letter-spacing:.28em;
      color:var(--cyan); margin:2.6rem 0 .9rem; display:flex; align-items:center; gap:.7rem; }
    h2::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--cyan);
      box-shadow:var(--glow-cyan); flex:none; }
    h2::after { content:""; flex:1; height:1px; background:linear-gradient(90deg,var(--line-2),transparent); }
    p { margin:.7rem 0; }
    .lede { font-family:var(--display); font-size:clamp(1.05rem,2.4vw,1.32rem); line-height:1.6;
      color:var(--ink); font-variation-settings:'opsz' 40,'SOFT' 40; }
    .lede em { font-style:italic; color:var(--gold); font-weight:500; }
    .lede .tech { font-family:var(--mono); color:var(--gold); font-size:.88em; letter-spacing:.02em; word-spacing:-.5em; }
    .lede a { color:var(--gold); text-decoration:none; }
    .lede a:hover { color:var(--gold-deep); }
    code, .mono { font-family:var(--mono); }
    .muted { color:var(--ink-dim); }
    a { color:var(--cyan); text-decoration:none; }
    a:hover { text-decoration:underline; text-underline-offset:3px; }

    .panel { background:var(--panel); border:1px solid var(--line-2); border-radius:14px;
      padding:1.1rem 1.2rem; box-shadow:var(--shadow); backdrop-filter:blur(4px); }
    .panel.tight { padding:0; overflow-x:auto; }
    .duo { display:grid; gap:1rem; align-items:start;
      grid-template-columns:repeat(auto-fit, minmax(min(23rem,100%), 1fr)); }
    .side-cap { display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
      margin:0; padding:.6rem 1.1rem; font-size:.72rem; font-weight:600; text-transform:uppercase;
      letter-spacing:.2em; color:var(--gold); opacity:.85; border-bottom:1px solid var(--line-2); }
    .side-cap .hint { font-weight:400; text-transform:none; letter-spacing:.04em; color:var(--ink-dim);
      text-align:right; }
    .role { display:block; color:var(--cyan); opacity:.8; }
    .duo .empty { margin:.8rem 1.1rem; }

    table { border-collapse:collapse; width:100%; margin:.4rem 0; font-size:.88rem; }
    thead th { text-align:left; padding:.55rem .8rem; font-size:.72rem; font-weight:600;
      text-transform:uppercase; letter-spacing:.2em; color:var(--gold); opacity:.85;
      border-bottom:1px solid var(--line-2); white-space:nowrap; }
    tbody td { padding:.6rem .8rem; border-bottom:1px solid var(--line); vertical-align:top; }
    tbody tr:last-child td { border-bottom:0; }
    tbody tr.rowlink { cursor:pointer; transition:background .15s; }
    tbody tr.rowlink:hover { background:var(--cyan-ghost); }
    a.plain { color:inherit; text-decoration:none; }
    tbody th { text-align:left; padding:.6rem .8rem; border-bottom:1px solid var(--line);
      font-weight:400; color:var(--ink-dim); font-size:.7rem; text-transform:uppercase; letter-spacing:.14em;
      white-space:nowrap; width:1%; }
    tbody th + td { overflow-wrap:anywhere; }
    .ep-sub { position:relative; padding-left:1.2em; }
    .ep-sub::before { content:""; position:absolute; left:.4em; top:.82em; width:.5em; height:1px;
      background:var(--ink-faint); }
    .ep-sub::after { content:""; position:absolute; left:.4em; top:-.1em; bottom:0; width:1px;
      background:var(--ink-faint); }
    .ep-sub:last-child::after { height:.92em; bottom:auto; }

    .panel.tight table { margin:0; }
    .panel.tight thead th:first-child, .panel.tight tbody td:first-child,
    .panel.tight tbody th:first-child { padding-left:1.1rem; }
    .panel.tight thead th:last-child, .panel.tight tbody td:last-child { padding-right:1.1rem; }

    .btn { display:inline-flex; align-items:center; gap:.4rem; font-family:var(--mono); font-size:.76rem;
      font-weight:600; letter-spacing:.1em; text-transform:uppercase; padding:.55rem .95rem; border-radius:8px;
      border:1px solid var(--line-2); background:rgba(255,255,255,.03); color:var(--ink);
      text-decoration:none; cursor:pointer; transition:.18s; }
    .btn:hover { border-color:var(--cyan); color:#fff; box-shadow:var(--glow-cyan); text-decoration:none; }
    .btn.primary { background:linear-gradient(180deg,#9ceaff,var(--cyan)); color:#04222e; border-color:transparent;
      box-shadow:0 0 22px rgba(116,226,255,.35); }
    .btn.primary:hover { box-shadow:0 0 30px rgba(116,226,255,.6); color:#04222e; }
    .btn.danger { color:var(--down); border-color:rgba(255,115,137,.4); background:rgba(255,115,137,.06); }
    .btn.danger:hover { border-color:var(--down); color:#fff; box-shadow:0 0 18px rgba(255,115,137,.4); }
    .copybtn { font:600 .7rem/1 var(--mono); letter-spacing:.12em; text-transform:uppercase;
      color:var(--ink-dim); background:rgba(255,255,255,.04); border:1px solid var(--line-2);
      border-radius:6px; padding:.26rem .5rem; margin-left:.55rem; min-width:4rem;
      cursor:pointer; vertical-align:baseline; white-space:nowrap; transition:.15s; }
    .copybtn:hover { color:var(--cyan); border-color:var(--cyan); box-shadow:0 0 10px rgba(116,226,255,.25); }
    .copybtn:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(116,226,255,.28); }
    .copybtn.ok { color:var(--up); border-color:rgba(98,214,160,.5); background:rgba(98,214,160,.08); }
    .copybtn.fail { color:var(--down); border-color:rgba(255,115,137,.5); background:rgba(255,115,137,.08); }
    form.inline { display:inline; }
    .actions { display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; margin-top:1.6rem; }

    label { display:block; margin:1.3rem 0 .35rem; font-size:.72rem; font-weight:600; text-transform:uppercase;
      letter-spacing:.16em; color:var(--ink-dim); }
    label.checkbox { display:flex; align-items:center; gap:.5rem; text-transform:none; letter-spacing:.04em;
      font-size:.86rem; color:var(--ink); cursor:pointer; }
    label.checkbox input { width:auto; }
    input, select { font:inherit; font-size:.9rem; padding:.6rem .7rem; border:1px solid var(--line-2);
      border-radius:8px; width:100%; max-width:30rem; background:rgba(6,10,20,.6); color:var(--ink);
      transition:.16s; }
    input:focus, select:focus { outline:none; border-color:var(--cyan); box-shadow:0 0 0 3px rgba(116,226,255,.18); }
    input[readonly] { color:var(--ink-dim); background:rgba(255,255,255,.02); }
    input::placeholder { color:var(--ink-faint); }
    select { appearance:none; cursor:pointer; padding-right:2.3rem;
      background-image:url(chevron.svg); background-repeat:no-repeat; background-position:right .85rem center; }
    option { background:var(--void-2); color:var(--ink); }
    @supports selector(::picker(select)) {
      select, ::picker(select) { appearance:base-select; }
      select::picker-icon { display:none; }
      ::picker(select) { background:var(--panel-2); border:1px solid var(--line-2); border-radius:10px;
        padding:.3rem; margin:.35rem 0; box-shadow:var(--shadow); backdrop-filter:blur(9px); }
      option { background:none; padding:.5rem .65rem; border-radius:7px; transition:background .12s; }
      option:hover, option:focus-visible { background:var(--cyan-ghost); outline:none; }
      option:checked { color:var(--cyan); }
      option::checkmark { color:var(--cyan); }
    }
    .err { color:var(--down); font-size:.8rem; margin:.3rem 0 0; }
    .field-help { font-size:.78rem; color:var(--ink-dim); margin-top:.3rem; max-width:30rem; line-height:1.55; }
    .field-help code { color:var(--cyan); }
    [hidden] { display:none !important; }
    .peering-form input, .peering-form select, .peering-form .field-help { max-width:none; }
    .field { margin-top:1.05rem; }
    .field > label { margin-top:0; }
    .form-section + .field { margin-top:.25rem; }
    .form-section { font-family:var(--mono); font-weight:600; font-size:.72rem; text-transform:uppercase;
      letter-spacing:.24em; color:var(--cyan); margin:2rem 0 1rem; display:flex; align-items:center; gap:.6rem; }
    .form-section:first-of-type { margin-top:.3rem; }
    .form-section::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--cyan);
      box-shadow:var(--glow-cyan); flex:none; }
    .form-section::after { content:""; flex:1; height:1px; background:linear-gradient(90deg,var(--line-2),transparent); }
    .opt { font-size:.66rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-dim);
      border:1px solid var(--line); border-radius:999px; padding:.06rem .42rem; margin-left:.5rem; vertical-align:middle; }
    .peering-form .actions { border-top:1px solid var(--line); padding-top:1.3rem; margin-top:1.9rem; }

    .radio-cards { display:grid; gap:.6rem; margin-top:.1rem; }
    .radio-card { display:flex; align-items:flex-start; gap:.7rem; margin:0; cursor:pointer;
      padding:.75rem .85rem; border:1px solid var(--line-2); border-radius:10px;
      background:rgba(6,10,20,.5); color:var(--ink); text-transform:none; letter-spacing:normal;
      font-weight:400; transition:.16s; }
    .radio-card:hover { border-color:var(--cyan-deep); background:var(--panel-2); }
    .radio-card:has(:checked) { border-color:var(--cyan); background:var(--cyan-ghost);
      box-shadow:0 0 0 1px var(--cyan), var(--glow-cyan); }
    .radio-card:has(:focus-visible) { box-shadow:0 0 0 3px rgba(116,226,255,.28); }
    .radio-card input { appearance:auto; width:auto; max-width:none; flex:none; margin:.18rem 0 0;
      accent-color:var(--cyan); cursor:pointer; }
    .radio-card input:focus { box-shadow:none; }
    .rc-body { display:flex; flex-direction:column; gap:.18rem; }
    .rc-title { display:flex; align-items:center; gap:.55rem; font-size:.92rem; font-weight:600;
      color:var(--ink); letter-spacing:.01em; }
    .rc-desc { font-size:.78rem; color:var(--ink-dim); line-height:1.5; }
    .rc-rec { font-size:.66rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
      color:var(--gold); border:1px solid rgba(241,198,107,.4); border-radius:999px;
      padding:.05rem .42rem; background:rgba(241,198,107,.08); }

    .flash, .notice { border-radius:10px; padding:.7rem 1rem; margin-bottom:1.2rem; font-size:.86rem;
      border:1px solid var(--line-2); border-left-width:3px; }
    .flash { background:rgba(116,226,255,.08); border-left-color:var(--cyan); }
    .notice { background:rgba(241,198,107,.08); border-left-color:var(--gold); }

    .pill { display:inline-flex; align-items:center; gap:.45rem; padding:.2rem .6rem .2rem .5rem;
      border-radius:999px; font-size:.72rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
      border:1px solid var(--line-2); color:var(--ink-dim); }
    .pill::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor;
      box-shadow:0 0 8px currentColor; }
    .pill.up { color:var(--up); border-color:rgba(98,214,160,.4); background:rgba(98,214,160,.08); }
    .pill.down { color:var(--down); border-color:rgba(255,115,137,.4); background:rgba(255,115,137,.08); }
    .pill.stale { color:var(--stale); border-color:rgba(241,198,107,.4); background:rgba(241,198,107,.08); }
    .pill.up::before { animation:pulse-dot 2s ease-in-out infinite; }
    .up{color:var(--up)} .down{color:var(--down)} .stale{color:var(--stale)}

    .chart-frame { position:relative; border:1px solid var(--line-2); border-radius:14px; overflow:hidden;
      background:radial-gradient(120% 120% at 50% 0%, #0b1426, #060a14); box-shadow:var(--shadow);
      margin:.6rem 0; }
    .chart-frame .cap { position:absolute; top:.7rem; left:.9rem; right:.9rem; display:flex;
      justify-content:space-between; font-size:.7rem; letter-spacing:.26em; text-transform:uppercase;
      color:var(--ink-faint); pointer-events:none; z-index:2; }
    .chart-frame .cap .live { color:var(--cyan); display:inline-flex; align-items:center; gap:.4rem; }
    .chart-frame .cap .live::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--cyan);
      box-shadow:var(--glow-cyan); animation:pulse-dot 2s ease-in-out infinite; }
    .nodemap { display:block; width:100%; height:auto; }
    .nodemap .land { opacity:.5; filter:brightness(.7) sepia(1) hue-rotate(155deg) saturate(2.4); }
    .constellation { fill:none; stroke:rgba(116,226,255,.5); stroke-width:1; stroke-linecap:round;
      stroke-linejoin:round; filter:drop-shadow(0 0 4px rgba(116,226,255,.6)); }
    .star-core { fill:#eafaff; }
    .star-halo { fill:var(--cyan); opacity:.22; }
    .star-glow { fill:none; stroke:var(--cyan); stroke-width:1; opacity:.55; }
    .star-lbl { fill:var(--gold); font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.3px;
      text-anchor:middle; paint-order:stroke; stroke:#060a14; stroke-width:3px; }
    .star { cursor:default; }
    .star .star-halo { animation:pulse-halo 4s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
    .empty { color:var(--ink-dim); font-style:italic; font-family:var(--display); }

    @keyframes pulse-dot { 0%,100%{opacity:1} 50%{opacity:.35} }
    @keyframes pulse-star { 0%,100%{opacity:.8;filter:drop-shadow(0 0 4px rgba(241,198,107,.5))}
      50%{opacity:1;filter:drop-shadow(0 0 9px rgba(241,198,107,.9))} }
    @keyframes pulse-halo { 0%,100%{opacity:.12;transform:scale(.8)} 50%{opacity:.30;transform:scale(1.15)} }
    @keyframes rise { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }
    @keyframes draw { to{stroke-dashoffset:0} }

    .reveal { opacity:0; animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards; }
    .reveal.d1{animation-delay:.05s}.reveal.d2{animation-delay:.16s}
    .reveal.d3{animation-delay:.28s}.reveal.d4{animation-delay:.4s}
    .no-reveal .reveal { opacity:1; animation:none; }

    @media (max-width:640px) {
      .asn, .startime { display:none; }
    }

    @media (prefers-reduced-motion:reduce) {
      *, body::after { animation:none !important; }
      .reveal { opacity:1; }
    }