:root{font-family:Inter,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;color:#111424;background:#f3f2ed;--ink:#111424;--lime:#d4ff75;--muted:#50576a;--line:#d9d8d0}
*{box-sizing:border-box}body{margin:0}a{color:inherit;text-decoration:none}.shell{width:min(1120px,calc(100% - 48px));margin-inline:auto}
header{background:var(--ink);color:#f6f7fc}header .shell{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:22px}.brand{display:flex;align-items:center;gap:9px;font-weight:800;letter-spacing:.08em;white-space:nowrap}.brand i{display:block;width:12px;height:12px;background:var(--lime);transform:skew(-14deg);border-radius:2px}.brand span{color:#aeb6ce;font-size:10px}
nav{display:flex;flex-wrap:wrap;gap:4px}nav a{padding:9px 11px;border-radius:7px;font-size:14px;color:#d2d7e6}nav a:hover,nav a[aria-current]{background:#30354c;color:white}
main{min-height:calc(100vh - 150px);padding-bottom:55px}.intro{padding:76px 0 35px}.intro h1{margin:0 0 15px;font-size:clamp(42px,7vw,86px);line-height:.99;letter-spacing:-.075em}.intro p{margin:0;color:var(--muted);font-size:clamp(15px,2vw,18px);line-height:1.6}
.overview{display:grid;grid-template-columns:1.1fr 1fr;gap:16px}.ip-tile{padding:32px;background:var(--ink);color:#fff;border-radius:23px;position:relative;overflow:hidden;min-width:0}.ip-tile::after{content:"";position:absolute;width:260px;height:260px;right:-160px;bottom:-170px;border:1px solid #68739d;border-radius:50%;box-shadow:0 0 0 25px #252b45,0 0 0 50px #1b2035;pointer-events:none}.label{font-size:11px;letter-spacing:.12em;font-weight:750;color:var(--muted)}.ip-tile .label{color:var(--lime)}[data-ip]{display:block;overflow-wrap:anywhere;font-size:clamp(24px,4vw,48px);letter-spacing:-.045em;font-variant-numeric:tabular-nums}.ip-tile a{display:inline-flex;gap:8px;color:var(--lime);margin-top:14px}.ip-tile [data-family]{color:#bac4d8}
.tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.tool-grid a,.panel{border:1px solid var(--line);background:#faf9f5;border-radius:17px;padding:24px}.tool-grid a:hover{border-color:#707a46;background:#f0f4dd}.tool-grid b{display:block;font-size:19px;letter-spacing:-.04em;margin-bottom:7px}.tool-grid span,.panel p{color:var(--muted);font-size:14px;line-height:1.55}
form{display:flex;align-items:end;gap:12px;flex-wrap:wrap}label{display:grid;gap:8px;font-weight:650;font-size:14px}label:first-child{flex:1;min-width:min(100%,200px)}input,select,button{font:inherit;border-radius:9px;padding:11px 14px;min-height:44px}input,select{border:1px solid #b7bbbc;background:white;color:var(--ink);min-width:0;width:100%}button{border:1px solid var(--ink);background:var(--ink);color:white;font-weight:650;cursor:pointer}button:hover{background:#30354c}button:disabled{opacity:.6}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #627943;outline-offset:3px}
.table-wrap{overflow-x:auto}table{border-collapse:collapse;width:100%;font-size:14px}th,td{text-align:left;padding:12px;border-bottom:1px solid var(--line);vertical-align:top}td:last-child{overflow-wrap:anywhere;min-width:200px}
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:24px}.metrics>div{background:#e9eae2;border-radius:12px;padding:16px;min-width:0}.metrics span,.metrics small{display:block;color:var(--muted);font-size:12px}.metrics strong{display:block;font-size:clamp(23px,5vw,48px);letter-spacing:-.06em;overflow-wrap:anywhere;margin-block:5px}.api pre{padding:14px;background:#e9eae2;border-radius:8px;overflow:auto}.api h2{font-size:19px;margin:26px 0 10px}.api h2:first-child{margin-top:0}dt{font-size:13px;color:var(--muted)}dd{margin:4px 0 14px;font-family:ui-monospace,monospace}footer{display:flex;justify-content:space-between;gap:10px;border-top:1px solid var(--line);padding:21px 0;color:var(--muted);font-size:13px}
@media(max-width:760px){header .shell{align-items:flex-start;flex-direction:column;gap:8px;padding-block:15px}.shell{width:calc(100% - 30px)}nav a{font-size:12px;padding:7px}.intro{padding:42px 0 24px}.overview{grid-template-columns:1fr}.panel,.tool-grid a{padding:15px}.ip-tile{padding:24px}.metrics{gap:6px}.metrics>div{padding:9px}.metrics span,.metrics small{font-size:11px}}

:root {
  color-scheme: dark;
  --ink: #080d18;
  --muted: #a4afc6;
  --line: #26334a;
  --accent: #a6e8ff;
  background: #080d18;
  color: #f1f5ff;
}
body {
  background: radial-gradient(ellipse at 73% 0%, #172a48 0%, transparent 44rem);
}
.shell { width: min(1056px, calc(100% - 56px)); }
header { background: #080d18dd; border-bottom: 1px solid var(--line); }
.brand i { background: var(--accent); box-shadow: 0 0 16px #81dfff80; }
.brand span { color: var(--muted); }
nav a { color: var(--muted); min-height: 44px; display: grid; place-items: center; }
nav a:hover, nav a[aria-current] { background: #20304b; color: #e2f7ff; }
.intro { padding-top: clamp(42px, 7vw, 94px); }
.intro h1 { font-size: clamp(38px, 7vw, 78px); letter-spacing: -.065em; text-wrap: balance; }
.intro p { max-width: 56ch; }
.panel, .tool-grid a { background: #111b2c; border-color: var(--line); border-radius: 20px; min-width: 0; }
.tool-grid a { transition: background .2s, border-color .2s, transform .2s; }
.tool-grid a:hover { border-color: #5c91af; background: #162842; transform: translateY(-2px); }
.ip-tile { background: #11253c; border: 1px solid #35516d; }
.ip-tile .label, .ip-tile a { color: var(--accent); }
.ip-tile::after { box-shadow: 0 0 0 25px #1d3754, 0 0 0 50px #172c45; }
input, select { background: #090f1e; border-color: #34445d; color: #f1f5ff; font-size: 16px; }
button { border: 0; background: #a6e8ff; color: #071724; transition: background .2s, opacity .2s; }
button:hover { background: #d1f3ff; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline-color: var(--accent); }
.api pre { background: #090f1e; }
.metrics>div { background: #0c1424; border: 1px solid var(--line); }
.speed-panel { max-width: 760px; margin-inline: auto; padding: clamp(16px, 4vw, 32px); }
.speed-console { text-align: center; }
.dial { position: relative; width: min(100%, 480px); margin-inline: auto; }
.dial canvas { display: block; width: 100%; height: auto; }
.dial-reading { position: absolute; inset: 32% 8% auto; display: grid; justify-items: center; gap: 4px; }
.dial-reading span, .dial-reading small { color: var(--muted); font-size: 13px; }
.dial-reading strong { font-size: clamp(33px, 10vw, 76px); line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.075em; }
.speed-action { max-width: 360px; margin-inline: auto; }
.speed-action button { width: 100%; min-height: 54px; border-radius: 14px; }
.speed-action button span { margin-left: 8px; }
.speed-action progress { display: block; width: 100%; height: 4px; margin-top: 16px; accent-color: var(--accent); }
.speed-action p { min-height: 44px; margin-block: 12px 16px; }
.speed-panel .metrics { grid-template-columns: repeat(2, minmax(0,1fr)); margin: 0; }
.speed-panel[data-phase="download"] .dial-reading strong { color: var(--accent); }
@media (max-width: 760px) {
  .shell { width: calc(100% - 32px); }
  header .shell { gap: 12px; padding-block: 14px 8px; }
  nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; gap: 4px; }
  nav a { font-size: 13px; white-space: nowrap; }
  .intro { padding-block: 35px 23px; }
  .panel, .tool-grid a { padding: 16px; }
  form { display: grid; grid-template-columns: minmax(0,1fr); }
  form button { min-height: 48px; }
  .tool-grid b { font-size: 17px; }
  .tool-grid span { font-size: 13px; }
  .speed-panel .metrics { gap: 8px; }
  .speed-panel .metrics>div { padding: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}