/* TrenchKey. One figure in the dark, a terminal that slides over it, pixels everywhere.
   Sixtyfour for the sign, Syne Mono for every line the terminal prints. */
:root{
  --bg:#050a07;--deep:#030604;--panel:#0a120d;--panel2:#0f1a13;--line:#173023;--line2:#22462f;
  --ink:#d9e8dc;--dim:#8faa98;--mute:#587463;--green:#7dffa8;--greenD:#1f7a45;--brass:#d8b15a;--brassD:#7d6224;--red:#ff6b57;
  --d:'Sixtyfour',monospace;--m:'Syne Mono',ui-monospace,monospace
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{overflow-x:hidden;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font:14.5px/1.6 var(--m);min-height:100vh}
a{color:var(--green)}
img,video{display:block;max-width:100%;image-rendering:pixelated}
button,input,select{font:inherit;color:inherit}
.mono{font-family:var(--m)}.dim{color:var(--dim)}.mute{color:var(--mute)}.green{color:var(--green)}.brass{color:var(--brass)}.red{color:var(--red)}
.cap{font:11px var(--m);letter-spacing:.24em;text-transform:uppercase;color:var(--mute)}
.wordmark{font:22px var(--d);color:var(--green);text-decoration:none;letter-spacing:.02em}

/* ---------------------------------------------------------------- the top and bottom rails */
.hud{position:fixed;left:0;right:0;z-index:30;padding:12px 16px;display:flex;align-items:center;gap:14px;pointer-events:none}
.hud > *{pointer-events:auto}
.hud.top{top:0}.hud.bottom{bottom:0;flex-wrap:wrap}
.hud .mid{margin:0 auto;display:flex;gap:10px;align-items:center}
.pill{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px;border:1px solid var(--line2);background:rgba(5,10,7,.8);font:12px var(--m);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.pill i{width:7px;height:7px;background:var(--green);display:block;box-shadow:0 0 8px var(--green)}
.pill.off i{background:var(--red);box-shadow:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:32px;padding:0 12px;border:1px solid var(--line2);background:rgba(5,10,7,.85);color:var(--ink);font:13px var(--m);text-decoration:none;cursor:pointer;white-space:nowrap;text-transform:lowercase}
.btn:hover{border-color:var(--green);color:var(--green)}
.btn.go{border-color:var(--brass);color:var(--brass)}
.btn.go:hover{background:var(--brass);color:#0b0e08}
.btn:disabled{opacity:.4;cursor:default}
.btn img{width:13px;height:13px}.btn img.xi{filter:invert(1)}
.tabs{display:flex;gap:14px;font:13px var(--m);color:var(--dim)}
.tabs a{text-decoration:none;color:var(--dim);border-bottom:1px solid transparent}
.tabs a.on,.tabs a:hover{color:var(--green);border-bottom-color:var(--green)}
.ca{display:flex;gap:10px;align-items:center;font:12px var(--m);color:var(--dim);flex-wrap:wrap}
.ca b{color:var(--brass);font-weight:400}
.ca .addr{color:var(--ink);word-break:break-all}

/* ---------------------------------------------------------------- the figure */
.stage{position:relative;min-height:100svh;display:grid;place-items:center;overflow:hidden}
.stage .fig{position:relative;width:min(70vh,92vw);aspect-ratio:1;-webkit-mask-image:radial-gradient(circle at 50% 48%,#000 46%,rgba(0,0,0,.85) 58%,transparent 72%);mask-image:radial-gradient(circle at 50% 48%,#000 46%,rgba(0,0,0,.85) 58%,transparent 72%)}
.stage .fig video,.stage .fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.stage .prompt{position:absolute;left:50%;top:50%;transform:translate(-50%,-38%);text-align:center;width:min(360px,80vw)}
.stage .prompt button{background:none;border:0;cursor:pointer;color:var(--green);font:clamp(18px,3.2vw,30px) var(--m);letter-spacing:.06em;text-shadow:0 0 14px rgba(125,255,168,.4)}
.stage .prompt button::after{content:"_";animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.stage .prompt small{display:block;margin-top:8px;font:12.5px var(--m);color:var(--dim);letter-spacing:.08em}
.crowd{position:absolute;inset:0;pointer-events:none}
.crowd i{position:absolute;width:14px;height:18px;background:url(/assets/hood-small.png) center/contain no-repeat;opacity:.55}

/* ---------------------------------------------------------------- the terminal overlay */
.term{position:fixed;inset:0;z-index:50;background:rgba(3,6,4,.92);display:none;overflow:auto;padding:70px 16px 40px}
.term.on{display:block}
.term .win{max-width:920px;margin:0 auto;border:1px solid var(--line2);background:var(--panel)}
.term .tb{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 14px;border-bottom:1px solid var(--line);font:12.5px var(--m);color:var(--green);letter-spacing:.06em}
.term .tb button{background:none;border:1px solid var(--line2);color:var(--dim);font:12px var(--m);padding:3px 8px;cursor:pointer}
.term .sheet{padding:22px 24px 28px}
.term h2{font:20px var(--m);color:var(--ink);margin-bottom:12px}
.term h2::before{content:"> ";color:var(--green)}
.term h3{font:12px var(--m);letter-spacing:.22em;text-transform:uppercase;color:var(--mute);margin:20px 0 8px}
.term p{color:var(--dim);max-width:720px;margin-bottom:8px}
.term p b{color:var(--ink);font-weight:400}
.term ol{margin:6px 0 0 20px;color:var(--dim)}
.term li{margin-bottom:8px}.term li b{color:var(--ink);font-weight:400}
.kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:5px 16px;font:13px var(--m)}
.kv span:nth-child(odd){color:var(--mute)}
.kv span:nth-child(even){color:var(--ink);word-break:break-all}
.tbl{width:100%;border-collapse:collapse;font:13px var(--m)}
.tbl th{text-align:left;font:11px var(--m);letter-spacing:.18em;text-transform:uppercase;color:var(--mute);padding:8px 8px;border-bottom:1px solid var(--line)}
.tbl td{padding:8px;border-bottom:1px solid var(--line);white-space:nowrap;vertical-align:middle}
.tbl td.num,.tbl th.num{text-align:right}
.st{font:11px var(--m);letter-spacing:.14em;text-transform:uppercase;padding:2px 7px;border:1px solid var(--line2);color:var(--dim)}
.st.on{color:var(--green);border-color:var(--greenD)}.st.win{color:var(--brass);border-color:var(--brassD)}.st.off{color:var(--red);border-color:#6a2a24}
.field{margin-top:12px}
.field label{display:block;font:11px var(--m);letter-spacing:.2em;text-transform:uppercase;color:var(--mute);margin-bottom:5px}
.in{width:100%;height:36px;background:var(--deep);border:1px solid var(--line2);padding:0 10px;font:13.5px var(--m);outline:none;color:var(--ink)}
.in:focus{border-color:var(--green)}
.sizes{display:flex;gap:6px;flex-wrap:wrap}
.sizes button{height:34px;padding:0 12px;border:1px solid var(--line2);background:var(--deep);font:13px var(--m);cursor:pointer;color:var(--dim)}
.sizes button.on{border-color:var(--green);color:var(--green)}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:12px}
.status{font:12.5px var(--m);color:var(--dim);margin-top:10px;word-break:break-word;min-height:18px}
.status.bad{color:var(--red)}.status.ok{color:var(--green)}
.ticket{background:var(--deep);border:1px dashed var(--line2);padding:10px;font:12px var(--m);color:var(--dim);white-space:pre-wrap;word-break:break-all}
.count{font:26px var(--d);color:var(--green);letter-spacing:.02em}
.hoods{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;margin-top:12px}
.hood{background:var(--deep);border:1px solid var(--line);padding:8px;text-align:center;text-decoration:none;color:var(--ink)}
.hood canvas{width:100%;aspect-ratio:1;image-rendering:pixelated}
.hood small{display:block;font:11px var(--m);color:var(--mute);margin-top:6px}
.hist{display:grid;grid-template-columns:repeat(auto-fit,minmax(6px,1fr));gap:2px;align-items:end;height:80px;margin-top:8px}
.hist i{background:var(--greenD);display:block;min-height:2px}
.hist i.top{background:var(--green)}
.empty{padding:16px 0;color:var(--dim)}
.md{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.7);display:none;place-items:center;padding:20px}
.md.on{display:grid}
.md .box{background:var(--panel);border:1px solid var(--line2);padding:14px;width:min(340px,100%);display:grid;gap:6px}
.md button{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--line);background:var(--deep);cursor:pointer;font:13px var(--m)}
.md button img{width:20px;height:20px}
@media (max-width:760px){
  .hud{padding:10px 12px;gap:8px;flex-wrap:wrap}
  .hud.top .mid{order:3;width:100%;justify-content:center}
  .hud.top .wordmark{font-size:18px}
  .hud .mid .pill{height:28px;font-size:10.5px;letter-spacing:.06em;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
  .hud .mid .pill span{overflow:hidden;text-overflow:ellipsis}
  .stage{padding-top:70px}
  .hud.bottom{justify-content:center}
  .stage .fig{width:min(60vh,94vw)}
  .term{padding:56px 10px 30px}
  .term .sheet{padding:16px}
  .tbl th:nth-child(n+5),.tbl td:nth-child(n+5){display:none}
}
@media (prefers-reduced-motion:reduce){.stage .prompt button::after{animation:none}}