/* Ask and Answer. A night-time service counter: dark petrol room, a brass-edged counter,
   and paper slips that carry the real text. Amber is the application layer (HTTP) on every
   networking explainer; teal is transport, violet is TLS, blue is IP. */
:root{
  color-scheme:dark;
  --bg:#0b1418; --room:#0f1b20; --panel:#0d171b; --chip:#16252b; --rule:#213640; --edge:#35525e;
  --ink:#ece5d6; --muted:#93a6ab; --brass:#c79a4a; --wood:#2b2019;
  --paper:#f1e7d0; --paper2:#dfe9e2; --pink:#f2d9d2; --pen:#1f1c16; --pencil:#6a614f; --line:#cfc3a6;
  --amber:#f5a524; --tls:#a78bfa; --tcp:#2dd4bf; --ip:#60a5fa; --link:#4ade80; --phy:#94a3b8;
  --s1:#f5a524; --s3:#fb7185; --s5:#e9e2cf;
  --ok:#1f7a3d; --go:#1d5fa8; --you:#b45309; --me:#b3261e; --wait:#555;
  --display:"Young Serif", Georgia, "Times New Roman", serif;
  --body:"Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--amber);outline-offset:2px;border-radius:4px}
code{font:500 .9em var(--mono);background:var(--chip);padding:1px 5px;border-radius:4px;color:#f6d9a0;overflow-wrap:anywhere}
a{color:var(--amber)}

.app{height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.top{display:flex;align-items:center;gap:14px;padding:10px 18px;border-bottom:1px solid var(--rule)}
.brand{font:400 24px/1 var(--display);color:var(--ink);text-decoration:none;white-space:nowrap}
.tag{color:var(--muted);font-size:14px;margin-right:auto}
.btn{min-height:40px;padding:0 16px;border-radius:8px;border:1px solid var(--edge);background:var(--chip);font-weight:500}
.btn:hover{border-color:var(--brass)}
.btn.go{background:var(--amber);border-color:var(--amber);color:#1b1305;font-weight:600}
.btn:disabled{opacity:.4;cursor:default}
.menu{position:absolute;z-index:20;right:12px;top:58px;width:min(360px,calc(100vw - 24px));max-height:calc(100vh - 130px);overflow:auto;background:var(--panel);border:1px solid var(--edge);border-radius:12px;padding:10px;box-shadow:0 18px 50px rgba(0,0,0,.55)}
.menu button{display:flex;gap:10px;width:100%;min-height:40px;align-items:center;text-align:left;background:none;border:0;border-radius:8px;padding:4px 10px}
.menu button:hover,.menu button[aria-current="true"]{background:var(--chip)}
.menu button b{font:500 13px var(--mono);color:var(--brass);width:22px}
.menu .foot{border-top:1px solid var(--rule);margin-top:8px;padding:10px}

.main{display:grid;grid-template-columns:minmax(0,1fr) 384px;min-height:0}
.stage{min-width:0;overflow:auto;padding:18px 22px 26px;background:
  radial-gradient(900px 420px at 50% -80px,#17303a 0,transparent 70%),var(--room)}
.panel{border-left:1px solid var(--rule);background:var(--panel);overflow:auto;padding:20px 22px 26px}
.panel .kick{font:500 13px var(--mono);color:var(--brass);margin:0 0 6px}
.panel h1{font:400 30px/1.12 var(--display);margin:0 0 14px}
.panel h2{font:600 14px/1.3 var(--body);color:var(--amber);margin:20px 0 4px}
.panel p{margin:0 0 10px;font-size:15.5px}
.panel .mix{border-left:3px solid var(--brass);padding:2px 0 2px 12px}
.panel .mix h2{margin-top:0;color:var(--brass)}
.starts{display:grid;gap:6px;margin:6px 0 4px}
.starts button{min-height:44px;text-align:left;padding:6px 12px;border-radius:8px;border:1px solid var(--rule);background:var(--chip);display:flex;justify-content:space-between;gap:10px;align-items:center}
.starts button:hover{border-color:var(--amber)}
.starts button span{color:var(--muted);font-size:13px;white-space:nowrap}
.foot{font-size:14px;color:var(--muted);margin-top:22px;padding-top:12px;border-top:1px solid var(--rule)}
.foot a{display:inline-block;padding:9px 6px;margin-right:2px}
.foot p{margin:0;font-size:14px}

.bar{display:flex;align-items:center;gap:12px;padding:8px 18px;border-top:1px solid var(--rule);background:var(--bg)}
.dots{list-style:none;display:flex;gap:2px;margin:0 auto;padding:0}
.dots button{width:40px;height:40px;border-radius:50%;border:0;background:none;font:500 13px var(--mono);color:var(--muted);position:relative}
.dots button::before{content:"";position:absolute;inset:6px;border-radius:50%;border:1px solid var(--rule)}
.dots button:hover::before{border-color:var(--brass)}
.dots button[aria-current="true"]{color:#1b1305}
.dots button[aria-current="true"]::before{background:var(--amber);border-color:var(--amber);z-index:-1}
.dots li{position:relative;z-index:0}
.count{display:none;margin:0 auto;color:var(--muted);font:500 14px var(--mono)}

/* ---------- the counter ---------- */
.counter{display:grid;grid-template-columns:minmax(0,1fr) 116px minmax(0,1fr);gap:0;align-items:start}
.side{min-width:0}
.who{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin:0 2px 8px;font-size:14px;font-weight:600}
.who small{font:400 12.5px var(--mono);color:var(--muted)}
.window{align-self:stretch;display:flex;flex-direction:column;align-items:center;gap:10px;padding-top:30px;position:relative;
  background:linear-gradient(90deg,transparent 0,transparent calc(50% - 5px),var(--wood) calc(50% - 5px),var(--wood) calc(50% + 5px),transparent calc(50% + 5px));}
.window::before{content:"";position:absolute;top:26px;bottom:0;left:calc(50% - 6px);width:2px;background:var(--brass);opacity:.7}
.sign{position:relative;background:var(--bg);border:1px solid var(--brass);border-radius:6px;padding:5px 6px;text-align:center;font:500 11px/1.35 var(--mono);color:var(--brass)}
.send{position:relative;width:92px;min-height:64px;border-radius:10px;border:0;background:var(--amber);color:#1b1305;font:600 15px/1.15 var(--body);padding:8px 4px;box-shadow:0 3px 0 #9a6410}
.send:active{transform:translateY(2px);box-shadow:0 1px 0 #9a6410}
.send.nudge{animation:nudge 1.1s ease-in-out infinite}
@keyframes nudge{50%{box-shadow:0 3px 0 #9a6410,0 0 0 6px rgba(245,165,36,.28)}}
.fly{position:absolute;top:150px;left:50%;width:34px;height:22px;margin-left:-17px;background:var(--paper);border-radius:2px;opacity:0;pointer-events:none;
  background-image:linear-gradient(var(--pencil) 0 0),linear-gradient(var(--pencil) 0 0);background-size:22px 2px,14px 2px;background-position:6px 7px,6px 13px;background-repeat:no-repeat}
.fly.out{animation:out .45s ease-in-out}
.fly.back{animation:back .4s ease-in-out;background-color:var(--paper2)}
@keyframes out{0%{transform:translateX(-70px);opacity:0}20%{opacity:1}80%{opacity:1}100%{transform:translateX(70px);opacity:0}}
@keyframes back{0%{transform:translateX(70px);opacity:0}20%{opacity:1}80%{opacity:1}100%{transform:translateX(-70px);opacity:0}}

.slip{position:relative;background:var(--paper);color:var(--pen);font:500 13px/1.5 var(--mono);padding:14px 12px 22px;border-radius:3px 3px 0 0;
  -webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/14px 100%;mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/14px 100%}
.slip.res{background:var(--paper2)}
.slip.stale>*:not(.stalemsg){opacity:.35}
.stalemsg{font:500 13px var(--body);color:var(--me);margin:0 0 6px}
.slip.empty{min-height:150px;color:var(--pencil);font:400 14px var(--body)}
.slip :focus-visible{outline-color:var(--pen)}
.slip .cap{font:600 11.5px var(--body);color:var(--pencil);margin:0 0 6px;display:flex;justify-content:space-between;gap:6px}
.row{display:flex;align-items:center;gap:6px;min-height:30px;border-bottom:1px solid var(--line)}
.row.in{animation:print .25s both}
@keyframes print{from{opacity:0;transform:translateY(-4px)}}
.slip select,.slip input{background:transparent;border:0;border-bottom:1.5px dashed #a5987a;font:600 13px var(--mono);color:var(--pen);min-width:0;height:28px;padding:0 2px;border-radius:0}
.slip select{flex:none}
.slip input{flex:1 1 0;width:100%}
.slip input:hover,.slip select:hover{border-bottom-color:var(--pen)}
.slip .ver{color:var(--pencil);white-space:nowrap}
.hn{flex:none;background:none;border:0;padding:0 2px;height:28px;font:600 13px var(--mono);color:#8a4b00;text-align:left;text-decoration:underline dotted #b9a67c;text-underline-offset:3px}
.res .hn{color:#0f5a4c}
.hv{flex:1 1 0;min-width:0;overflow-wrap:anywhere;padding:4px 0}
.auto{flex:none;font:500 10.5px var(--body);background:var(--pen);color:var(--paper);border-radius:3px;padding:1px 5px}
.rm{flex:none;width:28px;height:28px;border:0;background:none;color:var(--pencil);font:600 16px var(--mono);border-radius:4px}
.rm:hover{background:var(--line);color:var(--me)}
.rowbtn{display:block;width:100%;text-align:left;background:none;border:0;font:inherit;color:inherit;padding:4px 2px;min-height:30px}
.rowbtn:hover,.hn:hover{background:rgba(0,0,0,.06)}
.blank{color:var(--pencil);font:400 12px var(--body);min-height:24px;border-bottom:0}
.bodytxt{margin:0;font:500 12px/1.45 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere;color:#3a3529;background:rgba(0,0,0,.05);padding:6px 8px;border-radius:3px;max-height:150px;overflow:auto}
.bodycap{font:400 12.5px/1.4 var(--body);color:var(--pencil);margin:5px 0 0}
.blocks{height:44px;border-radius:3px;background:repeating-linear-gradient(90deg,#3a3529 0 5px,transparent 5px 8px,#6a614f 8px 11px,transparent 11px 13px,#3a3529 13px 20px,transparent 20px 23px);opacity:.55}
.adders{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px;align-items:center;font:400 12px var(--body);color:var(--pencil)}
.adders button{border:1px dashed #a5987a;background:none;border-radius:4px;font:500 12px var(--mono);color:var(--pen);padding:3px 6px;min-height:28px}
.adders button:hover{border-style:solid;background:rgba(0,0,0,.06)}
.stamp{position:absolute;right:10px;top:8px;transform:rotate(7deg);border:2.5px solid currentColor;border-radius:6px;padding:1px 8px;font:400 22px/1.2 var(--display);opacity:.85;pointer-events:none;background:rgba(255,255,255,.25)}
.stamp.in{animation:thump .3s cubic-bezier(.2,2,.4,1) both}
@keyframes thump{from{transform:rotate(7deg) scale(2.2);opacity:0}}
.f1{color:var(--wait)}.f2{color:var(--ok)}.f3{color:var(--go)}.f4{color:var(--you)}.f5{color:var(--me)}

.try{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0;align-items:center;font-size:13.5px;color:var(--muted)}
.chip{min-height:34px;padding:0 11px;border-radius:999px;border:1px solid var(--edge);background:var(--chip);font-size:13.5px;font-weight:500}
.chip:hover{border-color:var(--amber)}
.chip[aria-pressed="true"]{background:var(--amber);border-color:var(--amber);color:#1b1305}
.under{margin-top:14px;display:grid;gap:10px}
.note{background:var(--bg);border:1px solid var(--rule);border-left:3px solid var(--amber);border-radius:6px;padding:10px 12px;font-size:14.5px;line-height:1.5}
.note b{color:var(--amber);font-weight:600}
.note p{margin:0}
.note p+p{margin-top:6px;color:var(--muted)}
.trail{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:13px;color:var(--muted)}
.hop{font:500 12px var(--mono);background:var(--paper);color:var(--pen);padding:3px 7px;border-radius:3px}
.hop b{font-weight:700}
.nexts{display:flex;flex-wrap:wrap;gap:8px}
.extras{margin-top:14px}
.box{background:var(--bg);border:1px solid var(--rule);border-radius:8px;padding:12px 14px}
.box h3{font:600 13.5px var(--body);margin:0 0 8px;color:var(--ink)}
.box h3 small{font:400 12.5px var(--mono);color:var(--muted);margin-left:6px}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.raw{margin:0;font:500 12.5px/1.6 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere;color:var(--paper)}
.raw i{font-style:normal;color:var(--tcp);opacity:.8}
.small{font-size:13.5px;color:var(--muted);margin:8px 0 0}
table.t{border-collapse:collapse;width:100%;font:500 12.5px var(--mono)}
table.t td,table.t th{text-align:left;padding:4px 8px 4px 0;border-bottom:1px solid var(--rule);vertical-align:top;overflow-wrap:anywhere}
table.t th{font:600 12px var(--body);color:var(--muted);white-space:nowrap;overflow-wrap:normal}
.plates{display:flex;flex-wrap:wrap;gap:8px}
.plate{border:1px solid var(--edge);border-radius:6px;padding:6px 10px;font:500 13px var(--mono);color:var(--muted)}
.plate.on{border-color:var(--amber);color:#1b1305;background:var(--amber)}
.stub{display:inline-block;background:var(--pink);color:var(--pen);font:600 13px var(--mono);padding:6px 12px;border-radius:3px;border-left:3px dashed #b88}
.browser{border:1px solid var(--edge);border-radius:8px;overflow:hidden;background:#fbf8f1;color:#222}
.browser .url{background:#d9d4c7;color:#333;font:500 12px var(--mono);padding:5px 10px}
.browser .view{padding:10px 12px;min-height:96px;font:15px/1.4 Georgia,serif}
.browser .view h4{font:700 20px Georgia,serif;margin:0 0 6px}
.browser pre{margin:0;font:12px/1.45 var(--mono);white-space:pre-wrap}
.sizebar{height:16px;border-radius:3px;background:var(--amber);min-width:3px;transition:width .35s}
.sizebar.rawb{background:var(--edge)}
.sizes{display:grid;grid-template-columns:auto 1fr;gap:6px 10px;align-items:center;font:500 12.5px var(--mono)}

/* ---------- status board ---------- */
.board{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.fam{background:var(--bg);border:1px solid var(--rule);border-radius:8px;padding:10px;border-top:4px solid var(--c)}
.fam h3{font:400 26px/1 var(--display);margin:0;color:var(--c)}
.fam p{margin:2px 0 8px;font-size:13px;color:var(--muted);line-height:1.3;min-height:34px}
.fam button{display:flex;gap:8px;align-items:baseline;width:100%;min-height:40px;text-align:left;border:1px solid transparent;background:none;border-radius:6px;padding:4px 6px;font-size:13px;line-height:1.2}
.fam button b{font:600 15px var(--mono);color:var(--muted)}
.fam button.often b{color:var(--c)}
.fam button:hover{background:var(--chip)}
.fam button[aria-pressed="true"]{border-color:var(--c);background:var(--chip)}
.detail{margin-top:14px;display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:16px;align-items:start}
.detail .slip{min-height:96px}
.detail p{margin:0 0 8px;font-size:15px}

/* ---------- controls ---------- */
.ctl{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 12px}
.ctl>span{font-size:13.5px;color:var(--muted)}
.player{display:flex;align-items:center;gap:10px;margin:0 0 12px}
.player input[type=range]{flex:1;min-width:0;height:40px;accent-color:var(--amber)}
.player output{font:500 13px var(--mono);color:var(--muted);min-width:92px;text-align:right}
.lead{font:400 21px/1.2 var(--display);margin:0 0 12px}

/* ---------- cache ---------- */
.shelves{display:grid;grid-template-columns:1fr 54px 1fr 54px 1fr;align-items:stretch}
.shelf{background:var(--bg);border:1px solid var(--rule);border-radius:8px;padding:10px 12px;min-width:0}
.shelf.hit{border-color:var(--amber);box-shadow:0 0 0 1px var(--amber)}
.shelf h3{font:600 14px var(--body);margin:0}
.shelf small{display:block;color:var(--muted);font-size:12.5px;line-height:1.3;margin-bottom:8px}
.copy{background:var(--paper2);color:var(--pen);font:500 12px/1.4 var(--mono);padding:6px 8px;border-radius:3px}
.copy.none{background:none;border:1px dashed var(--edge);color:var(--muted);font-family:var(--body)}
.copy.stale{background:#cbbf9f}
.meter{height:6px;border-radius:3px;background:var(--rule);margin-top:6px;overflow:hidden}
.meter i{display:block;height:100%;background:var(--link)}
.meter i.old{background:var(--me)}
.wire{display:flex;flex-direction:column;justify-content:center;align-items:center;font:500 11px/1.3 var(--mono);color:var(--edge);text-align:center;position:relative}
.wire::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:2px dashed var(--edge)}
.wire.on{color:var(--amber)}.wire.on::before{border-top:3px solid var(--amber)}
.wire span{position:relative;background:var(--room);padding:2px 3px;border-radius:3px}
.verdict{margin-top:12px}
.verdict .big{font:400 20px/1.25 var(--display);margin:0 0 6px;color:var(--ink)}

/* ---------- waterfall ---------- */
.wf{position:relative;background:var(--bg);border:1px solid var(--rule);border-radius:8px;padding:10px 12px}
.wfrow{display:grid;grid-template-columns:96px 1fr;gap:8px;align-items:center;height:24px;font:500 12px var(--mono);color:var(--muted)}
.track{position:relative;height:14px;background:rgba(255,255,255,.03);border-radius:2px}
.seg{position:absolute;top:0;height:100%;border-radius:2px}
.seg.q{background:none;border-top:1px dashed var(--edge);top:50%;height:0}
.seg.tcp{background:var(--tcp)}.seg.tls{background:var(--tls)}.seg.rt{background:var(--amber)}
.seg.off{opacity:.16}
.cursor{position:absolute;top:8px;bottom:8px;width:2px;background:var(--ink);pointer-events:none}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px;color:var(--muted);margin:10px 0 0}
.legend i{display:inline-block;width:14px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px}

/* ---------- frames ---------- */
.h2{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:14px;align-items:start}
.ladder{background:linear-gradient(90deg,transparent calc(50% - 1px),var(--rule) calc(50% - 1px),var(--rule) calc(50% + 1px),transparent calc(50% + 1px));padding:4px 0}
.ends{display:flex;justify-content:space-between;font:500 12px var(--mono);color:var(--muted);margin-bottom:4px}
.fr{display:flex;align-items:center;gap:8px;width:80%;min-height:40px;margin:5px 0;padding:4px 10px;border-radius:5px;border:1px solid var(--edge);border-left:6px solid var(--c);background:var(--chip);font:500 12.5px var(--mono);text-align:left;transition:opacity .25s}
.fr.in{margin-left:20%;border-left:1px solid var(--edge);border-right:6px solid var(--c)}
.fr{white-space:nowrap}
.fr b{font-weight:700;color:var(--c)}
.fr span{color:var(--muted);margin-left:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.fr.hid{opacity:.12}
.fr[aria-pressed="true"]{outline:2px solid var(--ink);outline-offset:1px}
.hexrow{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0 10px}
.hexrow div{border:1px solid var(--edge);border-radius:4px;padding:3px 6px;text-align:center;font:600 13px var(--mono)}
.hexrow small{display:block;font:400 11px var(--body);color:var(--muted)}
.hexdump{font:500 12px/1.5 var(--mono);color:var(--muted);overflow-wrap:anywhere;margin:6px 0 0}

/* ---------- loss ---------- */
.stacks{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.stack{border:1px solid var(--rule);border-radius:8px;padding:8px;background:var(--bg);opacity:.5}
.stack.on{opacity:1;border-color:var(--edge)}
.stack h3{font:600 13.5px var(--body);margin:0 0 6px}
.stack div{font:600 12.5px var(--mono);color:#0b1418;padding:4px 8px;border-radius:3px;margin-top:3px}
.pk{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:4px;margin:6px 0 4px}
.pk button{height:44px;border-radius:5px;border:1px solid var(--edge);background:var(--c);color:#0b1418;font:700 13px var(--mono);padding:0}
.pk button.lost{background:none;color:var(--me);border:2px dashed var(--me)}
.pk button.yet{opacity:.25}
.lane{display:grid;grid-template-columns:92px repeat(4,minmax(0,1fr)) minmax(0,1.6fr);gap:5px;align-items:center;margin-top:6px;font:500 12.5px var(--mono)}
.cell{height:34px;border-radius:4px;border:1px dashed var(--edge);display:flex;align-items:center;justify-content:center;font:500 11px var(--body);color:var(--muted);text-align:center;line-height:1.1}
.cell.held{border:1px solid var(--c);color:var(--ink);background:repeating-linear-gradient(45deg,transparent 0 5px,rgba(255,255,255,.1) 5px 10px)}
.cell.done{background:var(--c);border-color:var(--c);color:#0b1418;font-weight:600}
.cell.gone{border-color:var(--me);color:#ff9a90}
.lane .end{color:var(--muted);font-size:12px}

/* ---------- receipt ---------- */
.tapewrap{display:flex;justify-content:center}
.tape{width:min(470px,100%);background:var(--paper);color:var(--pen);padding:16px 16px 26px;font:500 12.5px/1.5 var(--mono);min-height:240px;
  -webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/14px 100%;mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/14px 100%}
.tape h3{font:400 20px var(--display);text-align:center;margin:0 0 2px}
.tape .sub{text-align:center;color:var(--pencil);font-size:11.5px;border-bottom:1px dashed var(--pencil);padding-bottom:8px;margin-bottom:8px}
.beat{padding:7px 0;border-bottom:1px dashed var(--line);animation:print .3s both}
.beat .d{font:600 11.5px var(--body);color:#8a4b00}
.beat.in .d{color:#0f5a4c}
.beat.aside .d{color:var(--pencil)}
.beat pre{margin:2px 0;font:inherit;white-space:pre-wrap;overflow-wrap:anywhere}
.beat p{margin:2px 0 0;font:400 13px/1.4 var(--body);color:var(--pencil)}
.beat.last{background:rgba(245,165,36,.2);margin:0 -8px;padding-left:8px;padding-right:8px}

@media (max-width:860px){
  html,body{height:auto}
  .app{display:block;height:auto}
  .top{padding:8px 16px}
  .tag{display:none}
  .brand{margin-right:auto;font-size:21px}
  .main{display:block}
  .stage{overflow:visible;padding:14px 16px 18px}
  .panel{border-left:0;border-top:1px solid var(--rule);padding:18px 16px 90px}
  .bar{position:fixed;left:0;right:0;bottom:0;padding:8px 16px;z-index:10}
  .dots{display:none}.count{display:block}
  .counter{display:block}
  .window{flex-direction:row;justify-content:center;padding:12px 0;background:none;gap:12px}
  .window::before{top:50%;bottom:auto;left:0;right:0;width:auto;height:2px}
  .send{width:auto;min-height:48px;padding:8px 22px}
  .fly{display:none}
  .row{min-height:40px}
  .slip select,.slip input,.hn,.rm{height:40px}
  .rm{width:40px}
  .rowbtn{min-height:40px}
  .adders button{min-height:40px;padding:3px 10px}
  .chip{min-height:40px}
  .board{grid-template-columns:1fr 1fr}
  .detail,.h2{grid-template-columns:1fr}
  .shelves{grid-template-columns:1fr}
  .wire{height:46px}
  .wire::before{left:50%;right:auto;top:0;bottom:0;border-top:0;border-left:2px dashed var(--edge)}
  .wire.on::before{border-top:0;border-left:3px solid var(--amber)}
  .wfrow{grid-template-columns:70px 1fr;font-size:11px}
  .fr{width:88%}.fr.in{margin-left:12%}
  .fr span{display:none}
  .pk{grid-template-columns:repeat(6,minmax(0,1fr))}
  .lane{grid-template-columns:70px repeat(4,minmax(0,1fr))}
  .lane>span:first-child{white-space:nowrap}
  .lane .end{grid-column:1/-1}
  .stacks{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}