@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(fonts/chakra-petch-latin-ext-500-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(fonts/chakra-petch-latin-500-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(fonts/chakra-petch-latin-ext-600-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(fonts/chakra-petch-latin-600-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(fonts/chakra-petch-latin-ext-700-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(fonts/chakra-petch-latin-700-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(fonts/ibm-plex-mono-latin-ext-400-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(fonts/ibm-plex-mono-latin-ext-500-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(fonts/ibm-plex-mono-latin-ext-600-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(fonts/ibm-plex-mono-latin-600-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(fonts/ibm-plex-sans-latin-ext-400-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(fonts/ibm-plex-sans-latin-400-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(fonts/ibm-plex-sans-latin-ext-500-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(fonts/ibm-plex-sans-latin-500-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(fonts/ibm-plex-sans-latin-ext-600-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(fonts/ibm-plex-sans-latin-600-normal.woff2) format('woff2');
}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}body{margin:0;font:14px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}img{max-width:100%}[hidden]{display:none!important}

/* Layout: an arcade cabinet. HUD strip on top, the network playfield in the middle (Alice left, Bob right, three routes between), route controls under it. One deliberate night-time look: deep indigo ground, cyan voice packets, orange jams, violet storms, red losses, gold priority. */
:root {
  --bg: #0a0f22;
  --panel: #111936;
  --panel2: #18224a;
  --line: #27325c;
  --ink: #e9edf9;
  --muted: #8e97bb;
  --packet: #4cc9f0;
  --good: #7bd88f;
  --jam: #ff8a3d;
  --storm: #b39dff;
  --lost: #ff5c7a;
  --gold: #ffd166;
  --pink: #ff7ac6;
  --display: "Chakra Petch", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --sans: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  color-scheme: dark;
}
[hidden] { display: none !important; }
*, *::before, *::after { box-sizing: border-box; }
body {
  background: var(--bg); color: var(--ink); font: 14.5px/1.5 var(--sans);
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 14px 32px;
}
button { font: inherit; color: inherit; }
button:focus-visible { outline: 2px solid var(--packet); outline-offset: 2px; }
.wrap { max-width: 1180px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.title { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 8px 20px; }
h1 { margin: 0; font: 700 clamp(26px, 4vw, 38px)/1 var(--display); letter-spacing: 0.02em; text-transform: uppercase; }
h1 span { color: var(--packet); }
.title p { margin: 4px 0 0; color: var(--muted); max-width: 64ch; }

.hud { display: grid; grid-template-columns: auto auto auto auto minmax(180px, 1fr); gap: 10px; }
.hcell { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 8px 14px; min-width: 0; }
.hcell .k { font: 600 10px/1.2 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.hcell .v { font: 700 22px/1.2 var(--display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hcell .v small { font: 500 12px var(--mono); color: var(--muted); margin-left: 4px; }
.combo .v { color: var(--gold); }
.meter { display: flex; flex-direction: column; gap: 5px; }
.meter-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.meter-top .v { font-size: 20px; }
.mbar { position: relative; height: 10px; border-radius: 999px; background: var(--panel2); overflow: hidden; }
.mbar i { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: var(--good); transition: width 0.25s, background 0.25s; }
.mbar s { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--lost); left: calc((2.6 - 1) / 3.5 * 100%); }

.stage { position: relative; background: radial-gradient(120% 90% at 50% 40%, var(--panel) 0%, var(--bg) 75%); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; touch-action: manipulation; }
.stage canvas { display: block; width: 100%; cursor: pointer; }
.overlay { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; background: color-mix(in srgb, var(--bg) 70%, transparent); backdrop-filter: blur(2px); }
.box { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 22px 24px; max-width: 520px; width: 100%; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45); }
.box h2 { margin: 0; font: 700 28px/1.05 var(--display); text-transform: uppercase; letter-spacing: 0.02em; }
.box h2 em { font-style: normal; color: var(--packet); }
.box p { margin: 0; color: var(--muted); }
.box ul { margin: 0; padding-left: 18px; color: var(--muted); display: flex; flex-direction: column; gap: 3px; }
.box b { color: var(--ink); font-weight: 600; }
.box .kbd { font: 600 11.5px var(--mono); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; color: var(--ink); }
.big { font: 700 40px/1 var(--display); color: var(--gold); font-variant-numeric: tabular-nums; }
.rowstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.rowstats div { background: var(--panel2); border-radius: 8px; padding: 8px 10px; }
.rowstats b { display: block; font: 700 18px var(--display); }
.rowstats span { font-size: 12px; color: var(--muted); }
.learn { border-left: 3px solid var(--packet); padding: 4px 0 4px 10px; color: var(--ink) !important; font-size: 14px; }
.cta { align-self: flex-start; border: 0; background: var(--packet); color: var(--bg); font: 700 15px var(--display); letter-spacing: 0.06em; text-transform: uppercase; padding: 10px 22px; border-radius: 10px; cursor: pointer; box-shadow: 0 0 0 0 color-mix(in srgb, var(--packet) 60%, transparent); animation: glow 1.8s ease-in-out infinite; }
@keyframes glow { 50% { box-shadow: 0 0 0 8px transparent; } 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--packet) 50%, transparent); } }

.controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto auto auto auto; gap: 8px; }
.route-btn { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; cursor: pointer; text-align: left; display: flex; align-items: center; gap: 10px; min-width: 0; }
.route-btn .num { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--panel2); font: 700 15px var(--display); }
.route-btn b { display: block; font-size: 13.5px; }
.route-btn span.st { display: block; font: 500 11.5px var(--mono); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.route-btn[aria-pressed="true"] { border-color: var(--packet); background: color-mix(in srgb, var(--packet) 12%, var(--panel)); }
.route-btn[aria-pressed="true"] .num { background: var(--packet); color: var(--bg); }
.route-btn.jam span.st { color: var(--jam); } .route-btn.storm span.st { color: var(--storm); } .route-btn.warn span.st { color: var(--gold); }
.tool { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 8px 14px; cursor: pointer; font-weight: 600; font-size: 13px; white-space: nowrap; }
.tool:hover:not(:disabled) { border-color: var(--muted); }
.tool:disabled { opacity: 0.4; cursor: default; }
.tool.boost { border-color: color-mix(in srgb, var(--gold) 60%, var(--line)); color: var(--gold); }
.tool.boost.on { background: var(--gold); color: var(--bg); }
.foot { color: var(--muted); font-size: 13px; margin: 0; }
.tool.danger { color: var(--lost); border-color: color-mix(in srgb, var(--lost) 45%, var(--line)); }
.sndgrp { display: flex; align-items: center; gap: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 0 12px 0 0; }
.sndgrp .tool { border: 0; background: none; }
.sndgrp input { width: 90px; accent-color: var(--packet); }
.eyebrow { font: 600 11px/1.3 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.scoreline { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.stars i { font-style: normal; font-size: 28px; color: var(--panel2); text-shadow: 0 0 0 transparent; margin-right: 2px; }
.stars i.on { color: var(--gold); text-shadow: 0 0 14px color-mix(in srgb, var(--gold) 60%, transparent); animation: starpop 0.5s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
.stars i.on:nth-child(2) { animation-delay: 0.15s; } .stars i.on:nth-child(3) { animation-delay: 0.3s; }
@keyframes starpop { from { transform: scale(0.2) rotate(-40deg); opacity: 0; } to { transform: none; opacity: 1; } }
.badge { background: var(--gold); color: var(--bg); font: 700 12px var(--display); text-transform: uppercase; letter-spacing: 0.08em; padding: 4px 10px; border-radius: 999px; }
.muted { color: var(--muted); font-size: 13px; }
.btns { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.ghost { background: none; border: 1px solid var(--line); color: var(--ink); font: 600 13.5px var(--sans); padding: 9px 16px; border-radius: 10px; cursor: pointer; }
.ghost:hover { border-color: var(--muted); }
.ghost.danger { color: var(--lost); border-color: color-mix(in srgb, var(--lost) 45%, var(--line)); }
.diff { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 6px; }
.diff button { background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px; cursor: pointer; text-align: left; }
.diff button b { display: block; font: 700 14px var(--display); }
.diff button span { font-size: 11.5px; color: var(--muted); }
.diff button[aria-pressed="true"] { border-color: var(--packet); background: color-mix(in srgb, var(--packet) 14%, var(--panel2)); }
.diff button[aria-pressed="true"] b { color: var(--packet); }
.scores { display: flex; flex-direction: column; gap: 3px; font: 12.5px var(--mono); }
.scores > div { display: grid; grid-template-columns: 22px 70px 1fr auto; gap: 8px; padding: 3px 8px; border-radius: 6px; color: var(--muted); }
.scores > div span:nth-child(2) { color: var(--ink); font-weight: 600; }
.scores > div.me { background: color-mix(in srgb, var(--gold) 16%, transparent); }
.scores > div.me span:nth-child(2) { color: var(--gold); }
.box { max-height: calc(100% - 24px); overflow-y: auto; }
.foot b { color: var(--ink); }

@media (max-width: 860px) {
  .hud { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hud .meter { grid-column: 1 / -1; }
  .controls { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sndgrp { grid-column: span 3; justify-content: space-between; }
  .sndgrp input { flex: 1; max-width: 220px; }
}
@media (max-width: 520px) {
  .hud { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .route-btn { padding: 7px 8px; gap: 6px; }
  .route-btn span.st { display: none; }
  .box { padding: 18px; }
  .box h2 { font-size: 23px; }
}
@media (prefers-reduced-motion: reduce) { .cta, .stars i.on { animation: none; } }
.aiv-home{position:fixed;z-index:9999;right:max(10px,env(safe-area-inset-right,0px));bottom:max(10px,env(safe-area-inset-bottom,0px));font:500 11px/1 ui-monospace,Menlo,Consolas,monospace;color:#74f79a;background:#040805cc;border:1px solid #173a22;padding:5px 7px;text-decoration:none;opacity:.75}.aiv-home:hover,.aiv-home:focus-visible{opacity:1}