/* Redline Speed Node — cluster UI.
   Fonts are served from this node; the page makes zero external requests so
   nothing competes with the measurement. */

@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/chakra-petch-600.woff2) format('woff2')}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/chakra-petch-700.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/barlow-400.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/barlow-600.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/jetbrains-mono-500.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/jetbrains-mono-700.woff2) format('woff2')}

/* Light is the base palette; dark overrides only the tokens. Both were
   validated for colourblind separation against their own surface. */
:root{
  --bg:#F5F6F7; --surface:#FFFFFF; --line:#DCE0E5; --ink:#14161A;
  --muted:#5B6470; --faint:#B3BAC2;
  --red:#C8102E; --dl:#0891B2; --ul:#7C3AED; --lat:#B45309; --jit:#DB2777;
  --glow:0;
  /* ambient: two drifting colour fields + an instrument-panel hairline grid */
  --glow-a:rgba(200,16,46,.05); --glow-b:rgba(8,145,178,.045);
  --grid:rgba(20,22,26,.045);
  --panel-shadow:0 18px 44px -22px rgba(20,22,26,.28);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0B0C0E; --surface:#121417; --line:#22262E; --ink:#F2F3F5;
    --muted:#9AA1A9; --faint:#4A5058;
    --red:#FF3B3B; --dl:#00A3C4; --ul:#8B5CF6; --lat:#D97706; --jit:#EC4899;
    --glow:1;
    --glow-a:rgba(255,59,59,.055); --glow-b:rgba(0,163,196,.05);
    --grid:rgba(242,243,245,.027);
    --panel-shadow:0 24px 60px -24px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.035);
  }
}
:root[data-theme="dark"]{
  --bg:#0B0C0E; --surface:#121417; --line:#22262E; --ink:#F2F3F5;
  --muted:#9AA1A9; --faint:#4A5058;
  --red:#FF3B3B; --dl:#00A3C4; --ul:#8B5CF6; --lat:#D97706; --jit:#EC4899;
  --glow:1;
  --glow-a:rgba(255,59,59,.055); --glow-b:rgba(0,163,196,.05);
  --grid:rgba(242,243,245,.027);
  --panel-shadow:0 24px 60px -24px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.035);
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  background-color:var(--bg); color:var(--ink);
  /* Instrument-panel hairline grid. Static — painted once, costs nothing. */
  background-image:
    repeating-linear-gradient(0deg,  var(--grid) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, var(--grid) 0 1px, transparent 1px 44px);
  font-family:'Barlow','Segoe UI',system-ui,sans-serif; font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column; align-items:center;
  padding:28px 18px 40px; min-height:100vh;
}
button{font-family:inherit}

/* Ambient light. Two large colour fields — brand red and the download cyan —
   drifting very slowly. Compositor-only (transform on pre-painted layers), so
   the motion costs nothing per frame and can never compete with a
   measurement. */
.ambient{position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:0}
.ambient i{position:absolute; display:block; border-radius:50%}
.ambient .a{width:110vmax; height:110vmax; left:-32vmax; top:-58vmax;
  background:radial-gradient(circle closest-side, var(--glow-a), transparent 70%)}
.ambient .b{width:95vmax; height:95vmax; right:-30vmax; bottom:-50vmax;
  background:radial-gradient(circle closest-side, var(--glow-b), transparent 70%)}
@media (prefers-reduced-motion:no-preference){
  .ambient .a{animation:drift-a 70s ease-in-out infinite alternate}
  .ambient .b{animation:drift-b 55s ease-in-out infinite alternate}
}
@keyframes drift-a{to{transform:translate3d(7vmax,5vmax,0)}}
@keyframes drift-b{to{transform:translate3d(-6vmax,-7vmax,0)}}

.wrap{width:100%; max-width:1080px; position:relative; z-index:1}
.brand{display:flex; align-items:center; gap:11px; margin:0 0 16px 2px}
.logo{width:34px; height:34px; flex:none}
.logo .ring{stroke:currentColor; stroke-width:3.2; stroke-linecap:round; opacity:.92}
.logo .zone{stroke:var(--red); stroke-width:3.6; stroke-linecap:round}
.logo .lneedle{stroke:var(--red); stroke-width:3; stroke-linecap:round; transform-origin:24px 24px}
.logo .hub{fill:var(--bg); stroke:currentColor; stroke-width:1.6}
.logo .hubdot{fill:var(--red)}
@media (prefers-reduced-motion:no-preference){
  /* The mark performs its own miniature ignition sweep, once. */
  .logo .lneedle{animation:logo-sweep 1.25s cubic-bezier(.3,1.45,.45,1) 1 both}
}
@keyframes logo-sweep{from{transform:rotate(109deg)}to{transform:rotate(0deg)}}
.brand h1{
  font-family:'Chakra Petch',sans-serif; font-weight:700; font-style:italic;
  font-size:30px; letter-spacing:-.01em; text-transform:uppercase; margin:0;
}
.brand h1 span{color:var(--red)}
.brand .tag{font-size:13.5px; color:var(--muted)}

.cluster{border:1.5px solid var(--line); border-radius:14px; background:var(--surface);
  overflow:hidden; container-type:inline-size; box-shadow:var(--panel-shadow)}

/* Everything in the header aligns to the node-name line; the URL hangs below
   it without dragging the other controls off-axis. */
.c-head{display:flex; align-items:flex-start; gap:14px; flex-wrap:wrap; padding:14px 18px; border-bottom:1.5px solid var(--line)}
.c-head > *{min-height:30px}
.c-head .node-id,.c-head .load-chip,.c-head .plate{display:flex}
.c-head .load-chip,.c-head .plate{align-items:center; height:30px}
.node-id{display:flex; flex-direction:column; gap:1px}
.node-chip{display:flex; align-items:center; gap:9px; height:30px;
  font-family:'Chakra Petch',sans-serif; font-weight:600; font-size:13.5px; letter-spacing:.05em}
.node-chip .dot{width:8px;height:8px;border-radius:50%;background:var(--dl)}
.node-chip .site{color:var(--muted); font-weight:600}
.node-url{font-family:'JetBrains Mono',monospace; font-size:11.5px; color:var(--muted);
  text-decoration:none; padding-left:17px; margin-top:-4px}
.node-url:hover{color:var(--red); text-decoration:underline}
.node-url:focus-visible{outline:2px solid var(--red); outline-offset:2px; border-radius:3px}

.load-chip{display:flex; align-items:center; gap:8px; border:1.5px solid var(--line); border-radius:6px; padding:6px 10px;
  font-family:'Chakra Petch',sans-serif; font-weight:600; font-size:11.5px; letter-spacing:.08em; color:var(--muted)}
.load-chip .slots{display:flex; gap:3px}
.load-chip .slot{width:4px;height:11px;border-radius:1.5px;background:var(--line)}
.load-chip .slot.on{background:var(--muted)}
.load-chip .slot.own{background:var(--dl); box-shadow:0 0 calc(var(--glow)*5px) var(--dl)}
.load-chip.full{color:var(--red); border-color:var(--red)}
.load-chip.full .slot.on{background:var(--red)}

.mode-toggle{display:flex; border:1.5px solid var(--line); border-radius:6px; overflow:hidden; height:30px}
.mode-toggle button{border:none; background:transparent; color:var(--muted); cursor:pointer;
  font-family:'Chakra Petch',sans-serif; font-weight:600; font-size:11px; letter-spacing:.08em;
  padding:0 12px; text-transform:uppercase}
.mode-toggle button+button{border-left:1.5px solid var(--line)}
.mode-toggle button[aria-pressed="true"]{background:var(--red); color:#fff}
.mode-toggle button:focus-visible{outline:2px solid var(--red); outline-offset:-2px}

.plate{display:flex; align-items:stretch; margin-left:auto; border:1.5px solid var(--line); border-radius:6px; overflow:hidden}
/* Red edge keeps the plate motif; the label says what the number is. */
.plate-label{display:flex; align-items:center; padding:0 10px; border-left:3px solid var(--red);
  font-family:'Chakra Petch',sans-serif; font-weight:600; font-size:10px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted); white-space:nowrap}
.plate .ip{font-family:'JetBrains Mono',Consolas,monospace; font-size:14px; font-weight:500; padding:6px 11px 6px 9px;
  display:flex; align-items:center; font-variant-numeric:tabular-nums}
/* Which family the node actually saw. Muted: it is context for the address
   beside it, not a measurement. */
.plate .ip-fam{display:flex; align-items:center; padding:0 9px 0 0; align-self:center;
  font-family:'Chakra Petch',sans-serif; font-size:9.5px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--faint); white-space:nowrap}
.plate button{border:none; border-left:1.5px solid var(--line); background:transparent; color:var(--muted);
  padding:0 10px; cursor:pointer; display:flex; align-items:center}
.plate button:hover{color:var(--ink); background:var(--line)}
.plate button:focus-visible{outline:2px solid var(--red); outline-offset:-2px}

.c-main{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(210px,1fr); gap:8px; padding:18px 22px 4px; align-items:center}
@container (max-width:660px){ .c-main{grid-template-columns:1fr} }

.gauge-wrap{max-width:470px; margin:0 auto; width:100%}
.dial{position:relative}
.gauge-wrap svg{display:block; width:100%; height:auto}
.range-chip{position:absolute; top:16.5%; left:50%; transform:translateX(-50%);
  font-family:'Chakra Petch',sans-serif; font-size:11px; font-weight:600; letter-spacing:.12em;
  color:var(--faint); text-transform:uppercase; transition:color .3s}
.range-chip.shifted{color:var(--red)}
.readout{position:absolute; left:50%; bottom:-1%; transform:translateX(-50%); text-align:center; width:56%}
.readout .val{font-family:'JetBrains Mono',monospace; font-weight:700; font-size:clamp(30px,8cqw,46px);
  line-height:1; font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.readout .unit{font-family:'Chakra Petch',sans-serif; font-weight:600; font-size:13px;
  letter-spacing:.14em; text-transform:uppercase; margin-top:4px; color:var(--muted)}

.status{width:64%; margin:16px auto 4px; text-align:center}
.status-label{font-family:'Chakra Petch',sans-serif; font-weight:600; font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted); margin-bottom:6px; transition:color .25s}
.status-track{position:relative; height:4px; border-radius:2px; background:var(--line); overflow:hidden}
.status-track::before,.status-track::after{content:""; position:absolute; top:0; bottom:0; width:2px; background:var(--surface); z-index:1}
.status-track::before{left:17.5%}
.status-track::after{left:61.9%}
.status-fill{height:100%; width:0%; border-radius:2px; background:var(--faint); transition:background .25s}
[data-phase="lat"] .status-label{color:var(--lat)} [data-phase="lat"] .status-fill{background:var(--lat); box-shadow:0 0 calc(var(--glow)*8px) var(--lat)}
[data-phase="dl"] .status-label{color:var(--dl)}   [data-phase="dl"] .status-fill{background:var(--dl); box-shadow:0 0 calc(var(--glow)*8px) var(--dl)}
[data-phase="ul"] .status-label{color:var(--ul)}   [data-phase="ul"] .status-fill{background:var(--ul); box-shadow:0 0 calc(var(--glow)*8px) var(--ul)}
.cluster.complete .status-label{color:var(--ink)}
.cluster.complete .status-fill{background:var(--red); box-shadow:0 0 calc(var(--glow)*8px) var(--red)}
.cluster.failed .status-label{color:var(--red)}
/* Cancelling is the user's own choice — neutral, not alarming. */
.cluster.cancelled .status-label{color:var(--muted)}
.cluster.cancelled .status-fill{background:var(--faint); box-shadow:none}

.c-side{display:flex; flex-direction:column; align-items:center; gap:18px; padding:10px 0}
.startbtn{width:104px; height:104px; border-radius:50%; cursor:pointer; border:3px solid var(--red);
  background:var(--surface); color:var(--ink);
  font-family:'Chakra Petch',sans-serif; font-weight:700; font-size:15px; letter-spacing:.12em;
  box-shadow:0 0 0 5px var(--surface), 0 0 0 6.5px var(--line); transition:transform .08s, box-shadow .3s}
.startbtn:hover:not([disabled]){box-shadow:0 0 0 5px var(--surface),0 0 0 6.5px var(--line),0 0 26px calc(var(--glow)*10px) var(--red)}
.startbtn:active:not([disabled]){transform:scale(.955)}
.startbtn:focus-visible{outline:2.5px solid var(--red); outline-offset:4px}
.startbtn[disabled]{cursor:default; opacity:.65}
.startbtn.full{border-color:var(--line); color:var(--muted); box-shadow:0 0 0 5px var(--surface),0 0 0 6.5px var(--line)}
.startbtn small{display:block; font-size:9px; letter-spacing:.22em; color:var(--muted); margin-top:3px}
/* Stop state: same control, unmistakably a different action. */
.startbtn.stop{border-style:dashed; font-size:14px}
.startbtn.stop:hover{background:var(--red); color:#fff; border-style:solid}
.startbtn.stop:hover small{color:rgba(255,255,255,.85)}

.phases{display:flex; flex-direction:column; gap:8px; width:100%; max-width:220px}
.phase{display:flex; align-items:center; gap:10px; border:1.5px solid var(--line); border-radius:7px; padding:8px 12px;
  font-family:'Chakra Petch',sans-serif; font-size:12px; font-weight:600; letter-spacing:.09em; color:var(--muted)}
.phase .pdot{width:9px;height:9px;border-radius:50%;background:var(--faint);flex:none;transition:background .25s}
.phase .pfig{margin-left:auto; font-family:'JetBrains Mono',monospace; font-weight:500; font-size:12.5px;
  font-variant-numeric:tabular-nums; letter-spacing:0}
.phase.active{color:var(--ink)}
.phase.done{color:var(--ink)}
.phase[data-k="lat"].active .pdot,.phase[data-k="lat"].done .pdot{background:var(--lat)}
.phase[data-k="dl"].active .pdot,.phase[data-k="dl"].done .pdot{background:var(--dl)}
.phase[data-k="ul"].active .pdot,.phase[data-k="ul"].done .pdot{background:var(--ul)}
.phase[data-k="mtu"].done .pdot{background:var(--muted)}
@media (prefers-reduced-motion:no-preference){ .phase.active .pdot{animation:pulse 1.1s ease-in-out infinite} }
@keyframes pulse{50%{opacity:.35}}

.dur{display:flex; border:1.5px solid var(--line); border-radius:7px; overflow:hidden; width:100%; max-width:220px}
.dur button{flex:1; border:none; background:transparent; color:var(--muted); cursor:pointer;
  font-family:'Chakra Petch',sans-serif; font-weight:600; font-size:10.5px; letter-spacing:.06em;
  padding:8px 6px; text-transform:uppercase}
.dur button+button{border-left:1.5px solid var(--line)}
.dur button[aria-checked="true"]{color:var(--ink); box-shadow:inset 0 -2px 0 var(--red)}
.dur button:focus-visible{outline:2px solid var(--red); outline-offset:-2px}

.trace-wrap{padding:4px 22px 18px}
.trace-head{display:flex; align-items:center; gap:16px; margin-bottom:6px}
.trace-head .tl{font-family:'Chakra Petch',sans-serif; font-size:11px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--faint)}
.legend{display:flex; gap:14px; margin-left:auto; font-size:12px; color:var(--muted); flex-wrap:wrap}
.legend span{display:flex; align-items:center; gap:6px}
.legend i{width:8px;height:8px;border-radius:50%;display:inline-block}
canvas{display:block; width:100%; height:150px; border:1.5px solid var(--line); border-radius:8px; background:var(--surface)}

.slip{margin:0 22px 18px; border:1.5px solid var(--line); border-radius:10px; overflow:hidden;
  max-height:0; opacity:0; transition:max-height .6s ease, opacity .5s ease .1s}
.slip.show{max-height:520px; opacity:1}
.slip-head{display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:13px 16px; border-bottom:1.5px dashed var(--line)}
.verdict{border:1.5px solid var(--line); border-radius:5px; padding:5px 12px;
  font-family:'Chakra Petch',sans-serif; font-weight:700; font-size:13px; letter-spacing:.1em}
.slip-head .meta{font-size:13px; color:var(--muted)}
.rid-wrap{margin-left:auto; display:flex; align-items:center; gap:3px}
.slip-head .rid{font-family:'JetBrains Mono',monospace; font-size:12.5px; color:var(--muted)}
.rid-copy{border:none; background:transparent; color:var(--muted); cursor:pointer;
  padding:3px 5px; border-radius:5px; display:flex; align-items:center}
.rid-copy:hover{color:var(--ink); background:var(--line)}
.rid-copy:focus-visible{outline:2px solid var(--red); outline-offset:-2px}

/* Hero tier: the two figures the customer came for, at full volume. */
.slip-hero{display:grid; grid-template-columns:1fr 1fr; border-bottom:1.5px dashed var(--line)}
.slip-hero .slip-cell{padding:15px 20px 13px}
.slip-hero .slip-cell+.slip-cell{border-left:1.5px solid var(--line)}
.slip-hero .v{font-size:33px; letter-spacing:-.015em; line-height:1.15}
.slip-hero .v small{font-size:13px}

.slip-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(108px,1fr)); padding:4px 0}
.slip-cell{padding:11px 16px}
.slip-grid .slip-cell+.slip-cell{border-left:1.5px solid var(--line)}

/* Detail on demand: what used to be a subline under every figure is now a
   hover (or keyboard focus) away. Screenshots stay clean; the record stays
   complete. */
.slip-cell.tip{position:relative; cursor:help; outline:none}
.slip-cell.tip:hover::after, .slip-cell.tip:focus-visible::after{
  content:attr(data-tip); position:absolute; left:14px; bottom:calc(100% - 4px); z-index:6;
  background:var(--surface); border:1.5px solid var(--line); box-shadow:var(--panel-shadow);
  color:var(--ink); padding:7px 10px; border-radius:7px;
  font-family:'Barlow',sans-serif; font-size:11.5px; line-height:1.45;
  width:max-content; max-width:250px; pointer-events:none;
  /* pre-line keeps author newlines (the bufferbloat scale) and still wraps */
  white-space:pre-line}
/* The slip clips at its border (overflow:hidden for the reveal), so cells
   near the right edge anchor their tooltip right rather than spilling past
   the container and being cut mid-word. */
.slip-grid .slip-cell.tip:nth-last-child(-n+2):hover::after,
.slip-grid .slip-cell.tip:nth-last-child(-n+2):focus-visible::after{left:auto; right:14px}
.slip-hero .slip-cell.tip:last-child:hover::after,
.slip-hero .slip-cell.tip:last-child:focus-visible::after{left:auto; right:20px}
.slip-cell.tip:hover .k i, .slip-cell.tip:focus-visible .k i{transform:scale(1.25)}
.slip-cell .k i{transition:transform .2s}

/* A clamped path MTU is a finding, not a failure — amber, small, factual. */
.clamp-dot{display:inline-block; width:7px; height:7px; border-radius:50%;
  background:var(--lat); margin-left:8px; vertical-align:3px}

/* The settle: cells land in reading order, ~40ms apart. One quiet moment of
   craft at the point of payoff. */
.slip.show .slip-cell{animation:cellIn .5s cubic-bezier(.2,.7,.25,1) both}
.slip.show .slip-hero .slip-cell:nth-child(1){animation-delay:.04s}
.slip.show .slip-hero .slip-cell:nth-child(2){animation-delay:.09s}
.slip.show .slip-grid .slip-cell:nth-child(1){animation-delay:.15s}
.slip.show .slip-grid .slip-cell:nth-child(2){animation-delay:.19s}
.slip.show .slip-grid .slip-cell:nth-child(3){animation-delay:.23s}
.slip.show .slip-grid .slip-cell:nth-child(4){animation-delay:.27s}
.slip.show .slip-grid .slip-cell:nth-child(5){animation-delay:.31s}
@keyframes cellIn{from{opacity:0; transform:translateY(7px)}to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){
  .slip.show .slip-cell{animation:none}
}
.slip-cell .k{display:flex; align-items:center; gap:7px; font-family:'Chakra Petch',sans-serif; font-size:10.5px;
  font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--muted)}
.slip-cell .k i{width:8px;height:8px;border-radius:50%}
.slip-cell .v{font-family:'JetBrains Mono',monospace; font-weight:700; font-size:20px;
  font-variant-numeric:tabular-nums; margin-top:3px}
.slip-cell .v small{font-size:11px; font-weight:500; color:var(--muted)}

.tools{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:0; border-top:1.5px solid var(--line)}
.tool{padding:14px 18px}
.tool+.tool{border-left:1.5px solid var(--line)}
.tool h3{font-family:'Chakra Petch',sans-serif; font-size:11px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); margin:0 0 8px}
.tool .row{display:flex; gap:8px; flex-wrap:wrap}
.tool a,.tool code{font-family:'JetBrains Mono',monospace; font-size:12.5px}
.tool a{border:1.5px solid var(--line); border-radius:6px; padding:6px 11px; text-decoration:none; color:var(--ink)}
.tool a:hover{border-color:var(--red); color:var(--red)}
.tool a:focus-visible{outline:2px solid var(--red); outline-offset:2px}
.tool code{background:var(--bg); border:1.5px solid var(--line); border-radius:6px; padding:6px 10px;
  display:inline-block; color:var(--ink); word-break:break-all}

/* Onward links out of a tool panel. Quiet by default — they are useful, not
   the point of the page. */
.tool-links{display:flex; flex-direction:column; gap:2px; margin-top:12px}
.tool-links a{display:flex; align-items:center; gap:8px; padding:5px 0;
  border:none; border-radius:4px; font-family:inherit; font-size:13px;
  color:var(--muted); text-decoration:none}
.tool-links a svg{flex:none; opacity:.85}
.tool-links a:hover{color:var(--red)}
.tool-links a:hover svg{opacity:1}
.tool-links a:focus-visible{outline:2px solid var(--red); outline-offset:3px}

/* Downloads, split by where the bytes come from. The distinction is the
   diagnostic: on-net vs an international reference is what separates a
   last-mile fault from peering or transit. */
.dl-group+.dl-group{margin-top:14px; padding-top:14px; border-top:1.5px solid var(--line)}
.dl-head{display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; margin-bottom:8px}
.dl-title{display:flex; align-items:center; gap:7px;
  font-family:'Chakra Petch',sans-serif; font-weight:600; font-size:12px;
  letter-spacing:.06em; color:var(--ink)}
.dl-dot{width:7px; height:7px; border-radius:50%; flex:none}
.dl-dot.on-net{background:var(--dl)}
.dl-dot.off-net{background:transparent; border:1.5px solid var(--muted)}
.dl-sub{font-size:11.5px; color:var(--muted)}
.dl-index{font-size:11.5px !important; color:var(--muted) !important; align-self:center;
  border-color:transparent !important; padding:6px 4px !important}
.dl-index:hover{color:var(--red) !important; text-decoration:underline}

/* iperf3: one copyable command per direction, each labelled by the colour
   its measurement wears everywhere else in the UI. */
.cmds{display:flex; flex-direction:column; gap:8px}
.cmd{display:flex; align-items:stretch; border:1.5px solid var(--line); border-radius:6px; overflow:hidden}
/* Fixed width so both commands start at the same column — the two lines are
   read as a pair and ragged starts make them look like different things. */
.cmd-label{display:flex; align-items:center; gap:6px; padding:0 10px; background:var(--bg);
  border-right:1.5px solid var(--line); width:108px; flex:none;
  font-family:'Chakra Petch',sans-serif; font-weight:600; font-size:10px;
  letter-spacing:.11em; text-transform:uppercase; color:var(--muted); white-space:nowrap}
.cmd-label i{width:7px; height:7px; border-radius:50%; flex:none}
.cmd code{flex:1; border:none; border-radius:0; background:transparent; padding:7px 10px;
  font-size:12.5px; display:flex; align-items:center}
.cmd-copy{border:none; border-left:1.5px solid var(--line); background:transparent; color:var(--muted);
  padding:0 10px; cursor:pointer; display:flex; align-items:center}
.cmd-copy:hover:not([disabled]){color:var(--ink); background:var(--line)}
.cmd-copy:focus-visible{outline:2px solid var(--red); outline-offset:-2px}
.cmd-copy[disabled]{opacity:.4; cursor:default}
@container (max-width:520px){
  .cmd{flex-wrap:wrap}
  .cmd code{flex-basis:100%; border-top:1.5px solid var(--line)}
}

.c-foot{display:flex; align-items:center; justify-content:center; gap:9px; padding:12px 20px;
  border-top:1.5px solid var(--line); font-family:'Chakra Petch',sans-serif; font-weight:600;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); text-align:center}
.c-foot::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--red); flex:none}

/* Node at capacity. Red, because it stops the test — but it is the node's
   condition, not the customer's fault, so the copy points somewhere useful. */
.full-banner{display:flex; align-items:flex-start; gap:11px; margin:0 22px 16px;
  border:1.5px solid var(--red); border-radius:8px; padding:12px 16px;
  background:var(--bg); color:var(--ink); font-size:14px}
.full-banner[hidden]{display:none}
.full-banner svg{color:var(--red); flex:none; margin-top:1px}
.full-banner b{display:block; font-family:'Chakra Petch',sans-serif; letter-spacing:.04em; font-size:14.5px}
.full-banner span{color:var(--muted); font-size:13px}

.err{margin:0 22px 16px; border:1.5px solid var(--red); border-radius:8px; padding:12px 16px;
  font-size:14px; color:var(--ink); display:none}
.err.show{display:block}
.err.notice{border-color:var(--line); color:var(--muted)}
.err b{font-family:'Chakra Petch',sans-serif; letter-spacing:.06em}
.err.notice b{color:var(--ink)}

#toast{position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(80px);
  background:var(--ink); color:var(--bg); font-family:'Chakra Petch',sans-serif; font-weight:600;
  font-size:13.5px; letter-spacing:.05em; padding:10px 18px; border-radius:7px;
  transition:transform .3s ease, opacity .3s ease; opacity:0; pointer-events:none; z-index:9}
#toast.on{transform:translateX(-50%) translateY(0); opacity:1}