/* Subnet Sprint. Fonts, neutrals and shapes come from ../theme.css; light and dark follow the visitor's system setting.
   Two colours carry the meaning everywhere: violet is the network part of an address, amber is the host part.
   Addresses and bits are data, so they keep a monospace face with tabular figures; everything else is Inter. */

:root {
  --bg: var(--wl-bg); --card: var(--wl-surface); --raise: var(--wl-bg); --well: var(--wl-surface-2);
  --ink: var(--wl-ink); --ink-2: var(--wl-ink-2); --ink-3: var(--wl-ink-3);
  --line: var(--wl-edge); --line-2: color-mix(in srgb, var(--wl-ink) 18%, transparent);
  --net: #5a35c8; --net-ink: #ffffff; --net-soft: #ece6fd; --net-text: #4a28b3;
  --host: #f2b033; --host-ink: #3a2500; --host-soft: #fdf0d2; --host-text: #855000;
  --ok: #12733a; --ok-soft: #dcf3e4; --bad: #b9281d; --bad-soft: #fbe4e0;
  --focus: var(--wl-focus);
  --body: var(--wl-font);
  --mono: var(--wl-mono);
  color-scheme: light;
}
:root:not([data-theme="light"]) {
  --net: #a48bff; --net-ink: #150b38; --net-soft: #261f48; --net-text: #bca9ff;
  --host: #ffb53d; --host-ink: #2e1d00; --host-soft: #33270e; --host-text: #ffc566;
  --ok: #53d688; --ok-soft: #12301f; --bad: #ff8073; --bad-soft: #3b1a16;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.55 var(--body); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ul, ol, dl, dd, fieldset, legend { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; min-width: 0; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
code, .mono { font-family: var(--mono); font-size: .9em; font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

.app { max-width: 780px; margin: 0 auto; padding: 0 16px calc(32px + env(safe-area-inset-bottom)); }

/* ---------- top bar ---------- */
.bar { display: flex; align-items: center; gap: 10px; padding: 16px 0 14px; }
/* Link back to the site homepage, left of the title. */
.home { display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--wl-pill); background: var(--card); color: var(--ink-2); flex: none; transition: background .15s, color .15s; }
.home:hover { background: var(--well); color: var(--ink); }
.home svg { width: 18px; height: 18px; }
.bar h1 { font: 750 22px/1 var(--body); letter-spacing: -.03em; white-space: nowrap; }
.tabs { margin-left: auto; display: flex; padding: 4px; gap: 2px; background: var(--card); border-radius: var(--wl-pill); }
.tabs button { border: 0; background: none; padding: 6px 14px; min-height: 34px; border-radius: var(--wl-pill); font-weight: 600; font-size: 14px; color: var(--ink-2); transition: background .15s, color .15s; }
.tabs button:hover { color: var(--ink); }
.tabs button[aria-pressed="true"] { background: var(--raise); color: var(--ink); box-shadow: var(--wl-shadow); }

/* ---------- shared pieces ---------- */
.card { background: var(--card); border-radius: var(--wl-radius); padding: 22px; }
.card + .card { margin-top: 16px; }
.eyebrow { font: 600 14px/1.2 var(--body); color: var(--net-text); }
.card h2 { font: 750 30px/1.08 var(--body); letter-spacing: -.035em; margin-top: 8px; text-wrap: balance; }
.card h3 { font: 700 17px/1.2 var(--body); letter-spacing: -.02em; color: var(--ink); margin: 28px 0 12px; }
.lede { margin-top: 10px; color: var(--ink-2); max-width: 56ch; }
.hint { font-size: 14px; color: var(--ink-3); }

.btn { border: 0; background: var(--well); border-radius: var(--wl-pill); padding: 9px 18px; min-height: 44px; font-weight: 600; font-size: 15px; transition: background .15s, color .15s, box-shadow .15s; }
.btn:hover { background: color-mix(in srgb, var(--ink) 12%, var(--well)); }
.btn.small { min-height: 36px; padding: 6px 14px; font-size: 14px; }
.btn.primary { background: var(--net); color: var(--net-ink); }
.btn.primary:hover { background: color-mix(in srgb, var(--net) 86%, var(--ink)); box-shadow: 0 10px 24px -12px var(--net); }
.btn.big { width: 100%; min-height: 54px; font: 700 18px/1 var(--body); letter-spacing: -.01em; }
.btn:disabled { opacity: .5; cursor: default; }
.linkish { border: 0; background: none; padding: 8px 0; min-height: 36px; color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; font-size: 14px; font-weight: 500; }
.linkish:hover { color: var(--ink); text-decoration-color: currentColor; }

/* ---------- start ---------- */
.set { margin-top: 24px; display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.set legend { float: left; width: 100%; grid-column: 1 / -1; font: 700 15px/1.2 var(--body); letter-spacing: -.01em; color: var(--ink); margin-bottom: 10px; }
.set legend .why { font: 400 13px/1.2 var(--body); color: var(--ink-3); margin-left: 6px; }
.set:disabled .pick { opacity: .45; }
.pick { position: relative; display: block; cursor: pointer; }
.pick input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.pick > span { display: block; height: 100%; padding: 12px 14px; border-radius: var(--wl-radius-md); background: var(--raise); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .15s, background .15s; }
.pick strong { display: block; font: 700 16px/1.2 var(--body); letter-spacing: -.015em; }
.pick small { display: block; margin-top: 3px; font-size: 13px; line-height: 1.35; color: var(--ink-2); }
.pick input:checked + span { background: var(--net-soft); box-shadow: inset 0 0 0 2px var(--net); }
.pick input:checked + span strong { color: var(--net-text); }
.pick input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 3px; }
.pick:hover > span { box-shadow: inset 0 0 0 1px var(--line-2), var(--wl-shadow); }
.pick:hover input:checked + span { box-shadow: inset 0 0 0 2px var(--net); }
.set:disabled .pick, .set:disabled .pick input { cursor: default; }

.topics { margin-top: 24px; border-radius: var(--wl-radius-md); background: var(--raise); box-shadow: inset 0 0 0 1px var(--line); }
.topics summary { display: flex; align-items: baseline; gap: 10px; padding: 14px 16px; cursor: pointer; list-style: none; border-radius: var(--wl-radius-md); }
.topics summary::-webkit-details-marker { display: none; }
.topics summary::after { content: '+'; margin-left: auto; font: 500 22px/1 var(--body); color: var(--ink-2); }
.topics[open] summary::after { content: '−'; }
.sum-k { font: 700 15px/1.2 var(--body); letter-spacing: -.01em; color: var(--ink); }
.topics .set { margin: 0; padding: 0 16px 12px; display: block; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.chip span { display: block; padding: 7px 13px; border-radius: var(--wl-pill); font-size: 14px; font-weight: 500; background: var(--well); color: var(--ink-2); transition: background .15s, color .15s; }
.chip:hover span { color: var(--ink); }
.chip input:checked + span { background: var(--net); color: var(--net-ink); }
.chip input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 3px; }
.set:disabled .chip { opacity: .45; }

.go-wrap { position: sticky; bottom: 0; margin: 18px -22px -22px; padding: 12px 22px calc(14px + env(safe-area-inset-bottom)); background: var(--card); box-shadow: 0 -1px 0 var(--line); border-radius: 0 0 var(--wl-radius) var(--wl-radius); z-index: 2; }
.go-wrap .hint { margin-top: 8px; text-align: center; min-height: 1.4em; }

.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.stats > div { border-radius: var(--wl-radius-md); padding: 12px 14px; background: var(--raise); }
.stats dt { font: 500 13px/1.2 var(--body); color: var(--ink-3); }
.stats dd { font: 750 26px/1.15 var(--body); letter-spacing: -.03em; margin-top: 4px; font-variant-numeric: tabular-nums; }
.stats dd small { font: 400 13px/1 var(--body); letter-spacing: 0; color: var(--ink-3); margin-left: 4px; }
.stats.big dd { font-size: 32px; }

.bars li { display: grid; grid-template-columns: minmax(0, 11.5em) minmax(40px, 1fr) 6.2em; align-items: center; gap: 12px; padding: 6px 0; font-size: 14px; }
.bars .meter { height: 8px; border-radius: var(--wl-pill); background: var(--well); overflow: hidden; }
.bars .meter i { display: block; height: 100%; background: var(--net); border-radius: var(--wl-pill); }
.bars .meter i.low { background: var(--bad); }
.bars .n { text-align: right; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bars .n b { color: var(--ink); font-weight: 600; }
.rec-actions { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; }

/* ---------- play ---------- */
.status { position: sticky; top: 0; z-index: 3; background: var(--bg); padding: 4px 0 12px; }
.hud { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.hud > div { background: var(--card); border-radius: var(--wl-radius-md); padding: 8px 12px 9px; }
.hud .k { display: block; font: 500 12px/1.3 var(--body); color: var(--ink-3); }
.hud b { display: block; font: 750 24px/1.1 var(--body); letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hud b.warn { color: var(--bad); }

/* The clock: the fill runs from left to right as time passes. */
.track { position: relative; height: 8px; margin-top: 10px; border-radius: var(--wl-pill); background: var(--card); overflow: hidden; }
.track i { display: block; height: 100%; width: 0; background: var(--net); border-radius: var(--wl-pill); }
.track.warn i { background: var(--bad); }

.pips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.pips i { width: 12px; height: 12px; border-radius: 50%; background: var(--well); }
.pips i.ok { background: var(--ok); }
.pips i.no { background: var(--bad); }
.pips i.now { box-shadow: inset 0 0 0 2px var(--ink); }
.pips i.life { background: var(--net); }
.pips i.life.lost { background: none; box-shadow: inset 0 0 0 1.5px var(--line-2); }
.pips.large i { width: 18px; height: 18px; }
.pips:empty { display: none; }

.q { outline: none; }
.q-head { display: flex; align-items: center; gap: 10px; min-height: 32px; }
.tag { display: inline-block; padding: 5px 12px; border-radius: var(--wl-pill); background: var(--net-soft); font: 600 13px/1.2 var(--body); color: var(--net-text); }
.q-head .linkish { margin-left: auto; }
.float { font: 750 18px/1 var(--body); letter-spacing: -.02em; color: var(--ok); opacity: 0; font-variant-numeric: tabular-nums; }
.float.bad { color: var(--bad); }
.float.show { animation: rise .9s ease-out both; }
@keyframes rise { 0% { opacity: 0; transform: translateY(6px); } 20% { opacity: 1; transform: none; } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-6px); } }

.q-prompt { font: 700 22px/1.35 var(--body) !important; letter-spacing: -.02em !important; margin-top: 14px !important; text-wrap: pretty; }
.q-prompt code, .working code, .r-answer code, .missed .m-q code { font-family: var(--mono); font-size: .88em; font-weight: 600; letter-spacing: 0; background: var(--net-soft); color: var(--net-text); padding: .1em .4em; border-radius: 6px; white-space: nowrap; font-variant-numeric: tabular-nums; }
sup { font-size: .68em; line-height: 0; }

.opts { display: grid; gap: 8px; margin-top: 20px; }
.opts.two { grid-template-columns: 1fr 1fr; }
.opt { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 16px; text-align: left;
  border: 0; border-radius: var(--wl-radius-md); background: var(--raise); box-shadow: inset 0 0 0 1px var(--line);
  font: 600 17px/1.2 var(--mono); font-variant-numeric: tabular-nums; transition: box-shadow .15s, background .15s; }
.opt.words { font: 600 17px/1.25 var(--body); letter-spacing: -.01em; }
.opt .key { flex: none; display: none; width: 26px; height: 26px; place-items: center; border-radius: 8px; background: var(--well); font: 600 12px/1 var(--body); color: var(--ink-3); }
@media (hover: hover) and (pointer: fine) { .opt .key { display: grid; } .opt:not(:disabled):hover { box-shadow: inset 0 0 0 2px var(--net); } }
.opt:not(:disabled):active { transform: translateY(1px); }
.opt:disabled { cursor: default; color: var(--ink-3); }
.opt.right { background: var(--ok-soft); color: var(--ink); box-shadow: inset 0 0 0 2px var(--ok); }
.opt.wrong { background: var(--bad-soft); color: var(--ink); box-shadow: inset 0 0 0 2px var(--bad); }
.opt .mark { margin-left: auto; padding: 4px 10px; border-radius: var(--wl-pill); font: 700 12px/1 var(--body); background: var(--raise); }
.opt.right .mark { color: var(--ok); } .opt.wrong .mark { color: var(--bad); }

.typed { display: flex; gap: 8px; margin-top: 20px; }
.t-field { flex: 1; min-width: 0; display: flex; align-items: center; border-radius: var(--wl-radius-md); background: var(--raise); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .15s; }
.t-field:focus-within { box-shadow: inset 0 0 0 2px var(--net), 0 0 0 4px var(--net-soft); }
.t-slash { padding-left: 16px; font: 600 22px/1 var(--mono); color: var(--ink-3); }
.typed input { flex: 1; min-width: 0; width: 100%; border: 0; background: none; outline: none; padding: 12px 16px; min-height: 56px; font: 600 20px/1.2 var(--mono); font-variant-numeric: tabular-nums; }
.t-slash:not([hidden]) + input { padding-left: 4px; }
.typed input::placeholder { color: var(--ink-3); opacity: .6; }
.t-field.ok { background: var(--ok-soft); box-shadow: inset 0 0 0 2px var(--ok); }
.t-field.no { background: var(--bad-soft); box-shadow: inset 0 0 0 2px var(--bad); }
.typed .btn { min-height: 56px; padding: 0 24px; }

.q-tools { display: flex; gap: 8px; margin-top: 14px; }
.hintbox { margin-top: 16px; padding: 14px 16px; border-radius: var(--wl-radius-md); background: var(--raise); }
.hintbox .strip { margin-top: 0; }

.result { margin-top: 20px; padding: 18px; border-radius: var(--wl-radius-md); background: var(--raise); scroll-margin-top: 150px; }   /* clear of the status strip, which stays at the top */
.verdict { font: 750 24px/1.1 var(--body); letter-spacing: -.03em; }
.verdict.ok { color: var(--ok); } .verdict.no { color: var(--bad); }
.r-answer { margin-top: 8px; font-weight: 500; }
.working { margin-top: 10px; color: var(--ink-2); display: grid; gap: 6px; max-width: 62ch; }
.r-foot { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.r-foot .pts { margin-left: auto; font: 700 18px/1 var(--body); letter-spacing: -.02em; color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.r-foot .btn { min-width: 110px; }

/* ---------- the bit strip ---------- */
.strip { margin-top: 16px; display: grid; gap: 14px; }
.s-row { display: grid; gap: 6px; }
.s-label { display: flex; align-items: baseline; gap: 10px; font: 600 13px/1.2 var(--body); color: var(--ink-3); }
.s-label code { font: 600 13px/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.s-octets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 12px; }
.s-oct { display: grid; gap: 3px; }
.s-bits { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 2px; }
.bit { position: relative; display: grid; place-items: center; height: 30px; padding: 0; border: 0; border-radius: 5px; font: 600 12px/1 var(--mono); }
.bit.n { background: var(--net); color: var(--net-ink); }
.bit.n.z { background: var(--net-soft); color: var(--net-text); box-shadow: inset 0 0 0 1px var(--net); }
.bit.h { background: var(--host); color: var(--host-ink); }
.bit.h.z { background: var(--host-soft); color: var(--host-text); box-shadow: inset 0 0 0 1px var(--host); }
.bit.bor::after { content: ''; position: absolute; left: 0; right: 0; bottom: -5px; height: 3px; background: var(--ink); border-radius: 2px; }
/* the line between network and host bits */
.bit.edge::before { content: ''; position: absolute; left: -3px; top: -4px; bottom: -4px; width: 3px; margin-left: -1px; background: var(--ink); border-radius: 2px; z-index: 1; }
.s-oct:not(:first-child) .bit.edge:first-child::before { left: -7px; }
button.bit { cursor: pointer; height: 40px; }
button.bit:hover { filter: brightness(1.12); }
.s-dec { margin-top: 2px; text-align: center; font: 500 12px/1.2 var(--mono); font-variant-numeric: tabular-nums; color: var(--ink-2); }
.s-place { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 2px; text-align: center; font: 400 10px/1.3 var(--mono); color: var(--ink-3); }
.s-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; color: var(--ink-2); }
.s-legend span { display: inline-flex; align-items: center; gap: 6px; }
.s-legend i { width: 12px; height: 12px; border-radius: 4px; background: var(--net); }
.s-legend i.h { background: var(--host); }
.s-legend i.bor { background: none; border-bottom: 3px solid var(--ink); border-radius: 0; height: 8px; }
.strip.byte { max-width: 340px; }

/* ---------- end ---------- */
.e-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.report .pips { margin-top: 16px; }
.missed { display: grid; gap: 10px; counter-reset: m; }
.missed li { border-radius: var(--wl-radius-md); padding: 14px 16px; background: var(--raise); }
.missed .m-q { font-weight: 600; letter-spacing: -.01em; }
.missed .m-a { margin-top: 6px; font-size: 14px; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 2px 16px; }
.missed .m-a b { color: var(--ink); font-weight: 600; }
.missed .m-a .yours b { color: var(--bad); }
.missed details { margin-top: 6px; }
.missed summary { cursor: pointer; font-size: 14px; font-weight: 500; color: var(--ink-2); padding: 6px 0; }
.missed summary:hover { color: var(--ink); }

/* ---------- explorer ---------- */
.lab-in { margin-top: 22px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 14px; align-items: end; }
.field { display: grid; gap: 8px; }
.field .k { font: 600 14px/1.2 var(--body); color: var(--ink-2); }
#x-ip { width: 100%; min-height: 52px; padding: 10px 16px; border: 0; border-radius: var(--wl-radius-md); background: var(--raise); box-shadow: inset 0 0 0 1px var(--line); font: 600 18px/1.2 var(--mono); font-variant-numeric: tabular-nums; transition: box-shadow .15s; }
#x-ip:focus { outline: none; box-shadow: inset 0 0 0 2px var(--net), 0 0 0 4px var(--net-soft); }
#x-ip[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--bad); }
.stepper { display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: var(--wl-pill); background: var(--raise); box-shadow: inset 0 0 0 1px var(--line); }
.stepper .btn { width: 44px; min-height: 44px; padding: 0; font: 500 22px/1 var(--body); }
.stepper output { min-width: 3.1em; text-align: center; font: 750 26px/1 var(--body); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.slider { grid-column: 1 / -1; width: 100%; height: 32px; margin: 0; accent-color: var(--net); }
.err { min-height: 1.4em; font-size: 14px; color: var(--bad); margin-top: 4px; }

.facts { margin-top: 18px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; padding: 6px 18px; border-radius: var(--wl-radius-md); background: var(--raise); }
.facts > div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.facts > div:nth-last-child(-n+2):nth-child(odd), .facts > div:last-child { border-bottom: 0; }
.facts dt { font-size: 14px; color: var(--ink-2); white-space: nowrap; }
.facts dd { font: 600 14px/1.3 var(--mono); font-variant-numeric: tabular-nums; text-align: right; overflow-wrap: anywhere; }
.facts dd.words { font: 600 15px/1.3 var(--body); letter-spacing: -.01em; }
.note { margin-top: 12px; font-size: 14px; color: var(--ink-2); max-width: 62ch; }
.note:empty { display: none; }
.note code { font-family: var(--mono); font-size: .9em; }

.near { display: grid; gap: 6px; }
.near li { display: flex; align-items: center; gap: 10px; }
.near button { flex: 1; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; text-align: left; border-radius: var(--wl-radius-md); background: var(--raise); font: 600 14px/1.3 var(--mono); font-variant-numeric: tabular-nums; }
.near button:hover { background: var(--well); }
.near button small { font: 400 13px/1.3 var(--body); color: var(--ink-3); }
.near .here { flex: 1; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 9px 18px; min-height: 44px; align-items: center; border-radius: var(--wl-radius-md); background: var(--net-soft); box-shadow: inset 0 0 0 2px var(--net); font: 600 14px/1.3 var(--mono); font-variant-numeric: tabular-nums; }
.near .here small { font: 400 13px/1.3 var(--body); color: var(--ink-2); }

.splits { display: flex; flex-wrap: wrap; gap: 6px; }
.splits .btn { background: var(--raise); }
.splits .btn:hover { background: var(--well); }
.splits .btn[aria-pressed="true"] { background: var(--net); color: var(--net-ink); }
.splits .btn code { font-size: .9em; }
.table-wrap { margin-top: 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--wl-radius-md); background: var(--raise); }
.table-wrap:has(.subs:empty) { display: none; }
.subs { width: 100%; border-collapse: collapse; font: 500 13px/1.3 var(--mono); font-variant-numeric: tabular-nums; }
.subs th { text-align: left; font: 600 13px/1.2 var(--body); color: var(--ink-3); padding: 12px 12px 8px 0; border-bottom: 1px solid var(--line); white-space: nowrap; }
.subs td { padding: 8px 12px 8px 0; border-bottom: 1px solid var(--line); white-space: nowrap; }
.subs th:first-child, .subs td:first-child { padding-left: 16px; }
.subs tr:last-child td { border-bottom: 0; }
.subs tr.here td { background: var(--net-soft); }
.subs tr.here td:first-child { box-shadow: inset 3px 0 0 var(--net); }
.subs:empty { display: none; }
.lab-actions { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }

.foot { margin-top: 20px; text-align: center; font-size: 13px; color: var(--ink-3); }

/* ---------- wider screens ---------- */
@media (min-width: 620px) {
  .card { padding: 32px; }
  .card h2 { font-size: 38px; }
  .bar h1 { font-size: 24px; }
  #modes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #levels { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .go-wrap { position: static; margin: 24px 0 0; padding: 0; box-shadow: none; background: none; }
  .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .q-prompt { font-size: 26px !important; }
  .bit { height: 34px; font-size: 13px; }
}

/* ---------- phones ---------- */
@media (max-width: 619px) {
  #levels { grid-template-columns: 1fr; }
  #levels .pick > span { display: flex; align-items: baseline; gap: 10px; }
  #levels .pick small { margin: 0; }
  .s-octets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* two octets a row: the line before the third octet sits at the start of a row */
  .s-oct:nth-child(3) .bit.edge:first-child::before { left: -4px; }
  /* the row you can tap gets one octet a line, so each bit is big enough for a thumb */
  .s-row.live .s-octets { grid-template-columns: 1fr; gap: 6px; }
  .s-row.live .s-oct { grid-template-columns: minmax(0, 1fr) 3.2em; align-items: center; gap: 8px; }
  .s-row.live .s-bits { gap: 4px; }
  .s-row.live .s-dec { margin: 0; text-align: right; font-size: 14px; font-weight: 600; color: var(--ink); }
  .s-row.live .s-oct .bit.edge:first-child::before { left: -4px; }
  .s-row.live .bit.edge::before { left: -4px; }
  .facts { grid-template-columns: 1fr; }
  .facts > div:nth-last-child(-n+2):nth-child(odd):not(:last-child) { border-bottom: 1px solid var(--line); }
  .bars li { grid-template-columns: minmax(0, 1fr) 64px 5.6em; }
  .lab-in { grid-template-columns: 1fr; }
  .stepper { justify-content: space-between; }
  .stepper .btn { width: 64px; }
  .e-actions .btn { flex: 1 1 46%; border-radius: var(--wl-radius-md); line-height: 1.25; }
  .result { margin-left: -8px; margin-right: -8px; padding: 16px 14px; }
  /* the split table stacks: one subnet per block, with its labels in front */
  .subs thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .subs tr { display: grid; padding: 10px 14px; border-bottom: 1px solid var(--line); gap: 2px; }
  .subs tr:last-child { border-bottom: 0; }
  .subs td, .subs td:first-child { padding: 0; border: 0; font-size: 12px; }
  .subs td:first-child { font-weight: 600; font-size: 14px; }
  .subs td[data-k]::before { content: attr(data-k) ' '; font: 400 13px/1.3 var(--body); color: var(--ink-3); margin-right: 4px; }
  .subs tr.here { background: var(--net-soft); box-shadow: inset 3px 0 0 var(--net); }
  .subs tr.here td { background: none; }
  .subs tr.here td:first-child { box-shadow: none; }
  .r-foot { flex-wrap: wrap; }
  .r-foot .btn { flex: 1 1 100%; min-height: 52px; }
}
@media (max-width: 380px) {
  .bar h1 { font-size: 19px; }
  .tabs button { padding: 6px 10px; }
  .opt, .typed input { font-size: 15px; }
  .hud b { font-size: 21px; }
  .hud > div { padding: 7px 9px 8px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .float.show { opacity: 1; }
}