:root{
  --bg:#141416; --panel:#222226; --panel-hi:#2d2d33; --panel-lo:#17171a; --edge:#4a4a52; --ink:#ecebe6;
  --muted:#a4a3a0; --link:#8fc1ff; --field:#0e0e10; --focus:#ffd24a;
  --red:#e5484d; --orange:#f08c2e; --yellow:#f2c230; --green:#3fb950; --blue:#3b82f6;
  --led-ok:var(--green); --led-warn:var(--orange); --led-bad:var(--red); --led-off:#55555c;
  --radius:10px; --font:"Helvetica Neue",Arial,sans-serif; --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --grain:repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 1px,rgba(0,0,0,.05) 1px 3px);
}
*{box-sizing:border-box}
html{background:var(--bg);color:var(--ink);font:15px/1.45 var(--font)}
body{margin:0 auto;max-width:1180px;padding:0 14px 40px}
a{color:var(--link)}
header.top{display:flex;align-items:center;gap:14px;padding:14px 0 10px;flex-wrap:wrap}
header.top svg{width:46px;height:46px}
header.top .name{font:700 22px var(--mono);letter-spacing:.25em;text-transform:uppercase}
.stripe{height:8px;border-radius:4px;background:linear-gradient(90deg,var(--red) 0 20%,var(--orange) 20% 40%,
  var(--yellow) 40% 60%,var(--green) 60% 80%,var(--blue) 80% 100%)}
nav{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0}
nav a,.btn,button{font:700 13px var(--mono);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;
  color:var(--ink);background:linear-gradient(var(--panel-hi),var(--panel-lo));border:1px solid var(--edge);
  border-radius:var(--radius);padding:8px 14px;cursor:pointer;box-shadow:0 2px 0 #000}
nav a[aria-current=page]{border-color:var(--yellow);box-shadow:0 2px 0 #000,inset 0 0 0 1px var(--yellow)}
button:active,.btn:active{transform:translateY(2px);box-shadow:none}
button.go{border-color:var(--green)} button.stop{border-color:var(--red)}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.panel{background:var(--grain),linear-gradient(var(--panel-hi),var(--panel));border:1px solid var(--edge);
  border-radius:var(--radius);padding:14px 16px;margin:14px 0;box-shadow:0 3px 0 #000}
.panel>h2,.panel>h3{margin:0 0 10px;font:700 13px var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted)}
h1{font:700 18px var(--mono);letter-spacing:.14em;text-transform:uppercase;margin:18px 0 4px}
table{border-collapse:collapse;width:100%}
th{font:700 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:left}
th,td{padding:6px 8px;border-bottom:1px solid var(--edge);vertical-align:top}
td.mono,.mono{font-family:var(--mono);font-size:13px}
pre{white-space:pre-wrap;background:var(--field);border:1px solid var(--edge);padding:8px;border-radius:6px;
  font:13px var(--mono);margin:6px 0}
label{display:block;font:700 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  margin:10px 0 4px}
input[type=text],input[type=password],select,textarea{width:100%;background:var(--field);color:var(--ink);
  border:1px solid var(--edge);border-radius:6px;padding:8px;font:14px var(--mono)}
textarea{min-height:110px;resize:vertical}
.row{display:flex;gap:14px;flex-wrap:wrap}.row>*{flex:1 1 260px}
.led{display:inline-flex;align-items:center;gap:7px;font:700 12px var(--mono);letter-spacing:.08em;
  text-transform:uppercase}
.led::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--led-off);
  box-shadow:inset 0 -2px 3px rgba(0,0,0,.5),0 0 6px var(--led-off);border:1px solid #000}
.led.ok::before{background:var(--led-ok);box-shadow:inset 0 -2px 3px rgba(0,0,0,.4),0 0 8px var(--led-ok)}
.led.warn::before{background:var(--led-warn);box-shadow:inset 0 -2px 3px rgba(0,0,0,.4),0 0 8px var(--led-warn);
  border-radius:2px}
.led.bad::before{background:var(--led-bad);box-shadow:inset 0 -2px 3px rgba(0,0,0,.4),0 0 8px var(--led-bad);
  transform:rotate(45deg);border-radius:1px}
.switch{display:inline-flex;align-items:center;gap:8px;margin:4px 14px 4px 0;font:700 13px var(--mono);
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.switch input{appearance:none;width:46px;height:24px;border-radius:12px;background:var(--panel-lo);
  border:1px solid var(--edge);position:relative;cursor:pointer;margin:0}
.switch input::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;
  background:var(--muted);transition:left .12s}
.switch input:checked{background:#12361a;border-color:var(--green)}
.switch input:checked::after{left:24px;background:var(--green)}
.switch input:checked+span::after{content:" on"}.switch input:not(:checked)+span::after{content:" off"}
input[type=range]{width:100%;appearance:none;height:34px;background:transparent}
input[type=range]::-webkit-slider-runnable-track{height:8px;background:var(--field);border:1px solid var(--edge);
  border-radius:4px}
input[type=range]::-moz-range-track{height:8px;background:var(--field);border:1px solid var(--edge);border-radius:4px}
input[type=range]::-webkit-slider-thumb{appearance:none;width:22px;height:34px;margin-top:-14px;border-radius:4px;
  background:linear-gradient(var(--ink),var(--muted));border:1px solid #000;box-shadow:0 2px 0 #000}
input[type=range]::-moz-range-thumb{width:22px;height:34px;border-radius:4px;background:var(--ink);border:1px solid #000}
.ticks{display:flex;justify-content:space-between;font:12px var(--mono);color:var(--muted)}
.flash{border-left:6px solid var(--yellow);background:var(--field);padding:8px 12px;margin:12px 0;border-radius:6px}
.flash.bad{border-color:var(--red)}
.muted{color:var(--muted)}.small{font-size:12px}
.tag{display:inline-block;border:1px solid var(--edge);border-radius:4px;padding:0 6px;font:12px var(--mono)}
form.inline{display:inline}
.login{max-width:380px;margin:60px auto}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}