/* Dark-net theme: corrupted signal over a void. Body text stays plain and high-contrast;
   the corruption lives in the background, the gate title, and the access-state readout. */

@font-face { font-family: "Metal Mania"; font-style: normal; font-weight: 400; font-display: block; src: url("/static/fonts/metal-mania-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Chakra Petch"; font-weight: 500; font-display: swap; src: url("/static/fonts/chakra-petch-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Chakra Petch"; font-weight: 600; font-display: swap; src: url("/static/fonts/chakra-petch-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Chakra Petch"; font-weight: 700; font-display: swap; src: url("/static/fonts/chakra-petch-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap; src: url("/static/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-display: swap; src: url("/static/fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-display: swap; src: url("/static/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }

:root {
  color-scheme: dark;
  --void: #060203;
  --console: #100506;
  --raised: #1a090c;
  --vein: #3d1519;
  --text: #f4eaeb;
  --muted: #b99ca0;
  --accent: #ff2b45;
  --split: #17f1ff;
  --ember: #ffb020;
  --glitch: #ff1438;
  --glitch-text: #ff6576;
  --display: "Chakra Petch", "Segoe UI", system-ui, sans-serif;
  --body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --cut: 14px;
}

* { box-sizing: border-box; }
html { scrollbar-color: var(--vein) var(--void); }
body {
  margin: 0; min-height: 100vh; color: var(--text); background: var(--void);
  font: 400 1rem/1.6 var(--body); font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

/* The corrupted backdrop: a dead grid, two bleeding glows, scanlines, and film grain. */
body::before, body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1; }
body::before {
  background:
    radial-gradient(60rem 40rem at 8% -10%, rgba(255, 20, 56, .16), transparent 60%),
    radial-gradient(50rem 36rem at 100% 110%, rgba(255, 43, 69, .11), transparent 60%),
    linear-gradient(rgba(255, 43, 69, .045) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(90deg, rgba(255, 43, 69, .045) 1px, transparent 1px) 0 0 / 56px 56px;
}
body::after {
  z-index: 100; opacity: .5; mix-blend-mode: overlay;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .28) 0 1px, transparent 1px 3px),
    url("/static/noise.svg");
}

/* Signal damage: a slow CRT roll bar, and a few torn fragments that fade out toward the middle. */
html::before, html::after { content: ""; position: fixed; left: 0; right: 0; pointer-events: none; z-index: -1; }
html::before {
  top: -22vh; height: 22vh; animation: roll 13s linear infinite;
  background: linear-gradient(180deg, transparent, rgba(255, 43, 69, .05) 45%, rgba(255, 20, 56, .07) 56%, transparent);
}
html::after {
  top: 0; bottom: 0;
  background: linear-gradient(180deg,
    transparent 0 13%, rgba(255, 20, 56, .16) 13% 13.5%, transparent 13.5% 31%, rgba(255, 43, 69, .12) 31% 31.3%,
    transparent 31.3% 58%, rgba(255, 20, 56, .12) 58% 58.8%, transparent 58.8% 83%, rgba(255, 43, 69, .14) 83% 83.4%, transparent 83.4%);
  -webkit-mask-image: linear-gradient(90deg, #000, transparent 22%, transparent 78%, #000);
  mask-image: linear-gradient(90deg, #000, transparent 22%, transparent 78%, #000);
}
@keyframes roll { to { transform: translateY(150vh); } }

a { color: var(--accent); }
h1, h2, h3 { font-family: var(--display); font-weight: 600; margin: 0; letter-spacing: .01em; line-height: 1.15; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.125rem; }
p { margin: 0 0 .75rem; max-width: 70ch; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.num { font-family: var(--display); font-weight: 500; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ── navigation: always visible, big targets, current place lit ─────────── */
.topbar {
  position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 1.5rem;
  padding: 0 1.5rem; min-height: 4rem; background: rgba(6, 2, 3, .88); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--vein);
}
.brand { display: flex; align-items: center; gap: .6rem; font: 700 1.125rem var(--display); color: var(--text); text-decoration: none; }
.brand svg { width: 1.5rem; height: 1.5rem; color: var(--accent); filter: drop-shadow(0 0 6px rgba(255, 43, 69, .8)); }
.brand small { font: 500 .8125rem var(--body); color: var(--muted); }
.nav { display: flex; align-self: stretch; gap: .25rem; margin-right: auto; }
.nav a {
  display: flex; align-items: center; padding: 0 1.1rem; min-height: 44px; color: var(--muted);
  font: 600 1rem var(--display); text-decoration: none; position: relative; border-radius: 0;
}
.nav a:hover { color: var(--text); background: rgba(255, 43, 69, .06); }
.nav a[aria-current="page"] { color: var(--accent); }
.nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: .6rem; right: .6rem; bottom: 0; height: 3px;
  background: var(--accent); box-shadow: 0 0 12px var(--accent);
}
.who { display: flex; align-items: center; gap: .75rem; color: var(--muted); font-size: .9375rem; }

main { max-width: 68rem; margin: 0 auto; padding: 2rem 1.5rem 6rem; }
.stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.row { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.grid2 { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); }

/* ── panels: chamfered plates, not identical cards ──────────────────────── */
.panel {
  min-width: 0;
  position: relative; background: linear-gradient(160deg, var(--raised), var(--console) 55%);
  padding: 1.25rem 1.5rem 1.5rem 1.75rem; box-shadow: inset 3px 0 0 var(--vein);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}
.panel > h2, .panel > .row > h2 { margin-bottom: .9rem; }
.panel.lit { box-shadow: inset 3px 0 0 var(--accent); }
.panel.hot { box-shadow: inset 3px 0 0 var(--glitch); }
.panel.quiet { background: var(--console); }

/* ── the one loud thing: the access-state readout ───────────────────────── */
.hero { padding: 2rem 2rem 1.75rem 2.25rem; box-shadow: inset 4px 0 0 var(--ember); }
.hero .lede { color: var(--muted); margin-bottom: .25rem; }
.glitch {
  position: relative; display: inline-block; margin: .25rem 0 .5rem; font: 700 clamp(3.25rem, 11vw, 7.5rem)/1 var(--display);
  letter-spacing: .02em; text-transform: uppercase; color: var(--state, var(--ember)); text-shadow: 0 0 28px color-mix(in srgb, var(--state, var(--ember)) 45%, transparent);
}
.glitch::before, .glitch::after { content: attr(data-text); position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; }
.glitch::before { color: var(--glitch); transform: translate(-3px, 0); clip-path: inset(0 0 100% 0); animation: tear-a 7s steps(1) infinite; }
.glitch::after { color: var(--split); transform: translate(3px, 0); clip-path: inset(100% 0 0 0); animation: tear-b 7s steps(1) infinite 0.35s; }
@keyframes tear-a {
  0%, 91%, 100% { clip-path: inset(0 0 100% 0); }
  92% { clip-path: inset(12% 0 62% 0); } 94% { clip-path: inset(58% 0 14% 0); } 96% { clip-path: inset(30% 0 44% 0); } 98% { clip-path: inset(0 0 100% 0); }
}
@keyframes tear-b {
  0%, 92%, 100% { clip-path: inset(100% 0 0 0); }
  93% { clip-path: inset(66% 0 8% 0); } 95% { clip-path: inset(6% 0 70% 0); } 97% { clip-path: inset(44% 0 30% 0); } 99% { clip-path: inset(100% 0 0 0); }
}
.state-open { --state: var(--ember); }
.state-closed { --state: #b99ca0; }
.state-wait { --state: #f2c6cb; }
.state-bad { --state: var(--glitch-text); }
.clock { font: 600 1.375rem var(--display); }

/* ── week strip: when the signal is lit ─────────────────────────────────── */
.strip { display: grid; gap: 5px; margin-top: 1.25rem; }
.strip-row { display: grid; grid-template-columns: 4.5rem 1fr; align-items: center; gap: .75rem; }
.strip-day { font: 500 .875rem var(--display); color: var(--muted); }
.strip-row.today .strip-day { color: var(--text); }
.track {
  position: relative; height: 16px; background: rgba(255, 255, 255, .035);
  background-image: linear-gradient(90deg, var(--vein) 1px, transparent 1px); background-size: 25% 100%;
}
.win { position: absolute; top: 0; bottom: 0; min-width: 3px; background: var(--ember); box-shadow: 0 0 10px rgba(255, 176, 32, .65); }
.win.live { background: var(--accent); box-shadow: 0 0 12px var(--accent); }
.nowline { position: absolute; top: -3px; bottom: -3px; width: 2px; background: #fff; box-shadow: 0 0 8px #fff; }
.strip-hours { display: grid; grid-template-columns: 4.5rem 1fr; gap: .75rem; color: var(--muted); font-size: .75rem; }
.strip-hours span { display: flex; justify-content: space-between; }

/* ── controls ───────────────────────────────────────────────────────────── */
button, .btn {
  font: 600 .9375rem var(--display); letter-spacing: .01em; min-height: 40px; padding: .45rem 1.1rem; cursor: pointer;
  color: var(--text); background: var(--raised); border: 1px solid var(--vein); border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
  transition: background .12s, color .12s, border-color .12s;
}
button:hover { border-color: var(--accent); color: var(--accent); }
button.primary { color: #1c0205; background: var(--accent); border-color: var(--accent); }
button.primary:hover { background: #ff5c70; color: #1c0205; }
button.danger { color: var(--glitch-text); border-color: rgba(255, 20, 56, .5); }
button.danger:hover { background: rgba(255, 20, 56, .16); border-color: var(--glitch); color: #ffd6da; }
button.kill.armed { color: #fff; background: var(--glitch); border-color: var(--glitch); animation: pulse 1.6s ease-in-out infinite; }
button:disabled { opacity: .45; cursor: default; }
@keyframes pulse { 50% { box-shadow: 0 0 0 4px rgba(255, 20, 56, .25); } }

label { display: grid; gap: .3rem; font-weight: 500; font-size: .9375rem; }
input, select {
  font: 400 1rem var(--body); color: var(--text); background: #0a0304; border: 1px solid var(--vein); border-radius: 0;
  padding: .55rem .7rem; min-height: 42px; width: 100%;
}
input::placeholder { color: #7d5b60; }
input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255, 43, 69, .18); outline: none; }
input[type="checkbox"] { width: 1.15rem; height: 1.15rem; min-height: 0; accent-color: var(--accent); }
.check { display: inline-flex; grid-auto-flow: column; align-items: center; gap: .45rem; font-weight: 400; }
.chips { display: flex; gap: .5rem; flex-wrap: wrap; }
.chip { padding: .3rem .8rem; border: 1px solid var(--vein); background: var(--console); }
.chip:has(input:checked) { border-color: var(--accent); background: rgba(255, 43, 69, .1); }
form.inline { display: flex; gap: .6rem; align-items: end; flex-wrap: wrap; }
form.inline > label { flex: 1 1 10rem; }

/* ── data ───────────────────────────────────────────────────────────────── */
.scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
th { text-align: left; font: 500 .875rem var(--display); color: var(--muted); padding: .4rem .9rem .5rem 0; border-bottom: 1px solid var(--vein); white-space: nowrap; }
td { padding: .7rem .9rem .7rem 0; border-bottom: 1px solid rgba(61, 21, 25, .6); vertical-align: top; }
tr.click { cursor: pointer; } tr.click:hover td { background: rgba(255, 43, 69, .05); }
td.name a { font: 600 1.0625rem var(--display); color: var(--text); text-decoration: none; }
td.name a:hover { color: var(--accent); }
.badge { display: inline-block; white-space: nowrap; padding: .05rem .6rem; font: 600 .8125rem var(--display); border: 1px solid currentColor; }
.badge.open, .badge.active { color: var(--ember); }
.badge.closed, .badge.expired, .badge.pending { color: #b99ca0; }
.badge.revoked, .badge.disabled, .badge.bad { color: var(--glitch-text); }
.badge.on { color: var(--accent); }
.metric { font: 600 1.75rem/1.1 var(--display); }
.metrics { display: flex; gap: 2.25rem; flex-wrap: wrap; }
.metrics > div { display: grid; gap: .1rem; }

.tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--vein); margin: 1.25rem 0 1.5rem; overflow-x: auto; }
.tabs a { padding: .65rem 1.1rem; min-height: 44px; color: var(--muted); font: 600 1rem var(--display); text-decoration: none; border-bottom: 3px solid transparent; }
.tabs a:hover { color: var(--text); }
.tabs a[aria-current="page"] { color: var(--accent); border-color: var(--accent); }

.notice { padding: .8rem 1rem; border-left: 3px solid var(--accent); background: rgba(255, 43, 69, .07); }
.notice.err { border-color: var(--glitch); background: rgba(255, 20, 56, .09); color: #ffd6da; }
.notice.warn { border-color: var(--ember); background: rgba(255, 176, 32, .08); }
.notice ul { margin: .4rem 0 .6rem; padding-left: 1.2rem; }
.secret {
  display: block; font: 500 1.0625rem/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace; word-break: break-all;
  padding: .75rem 1rem; background: #0a0304; border: 1px dashed var(--ember); color: var(--ember); user-select: all;
}
pre.snippet { margin: .5rem 0 0; padding: .75rem 1rem; overflow-x: auto; background: #0a0304; border: 1px solid var(--vein); font: 400 .875rem/1.55 ui-monospace, Menlo, Consolas, monospace; color: #e6d2d4; }
.empty { padding: 1.5rem 0; color: var(--muted); }

/* ── sign-in ────────────────────────────────────────────────────────────── */
.gate { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; }
.gate .panel { width: min(26rem, 100%); }

/* ── small screens: the menu moves to a thumb-height bar at the bottom ──── */
@media (max-width: 720px) {
  /* backdrop-filter would make the top bar the containing block for the fixed bottom menu */
  .topbar { padding: 0 1rem; gap: .75rem; backdrop-filter: none; background: var(--void); }
  .brand small, .who .who-name { display: none; }
  .nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; margin: 0; align-self: auto; gap: 0;
    background: rgba(6, 2, 3, .96); border-top: 1px solid var(--vein); padding-bottom: env(safe-area-inset-bottom);
  }
  .nav a { flex: 1; justify-content: center; min-height: 56px; }
  .nav a[aria-current="page"]::after { top: 0; bottom: auto; }
  .topbar .who { margin-left: auto; }
  main { padding: 1.25rem 1rem 6rem; }
  .strip-row, .strip-hours { grid-template-columns: 3rem 1fr; gap: .5rem; }
  .panel { padding: 1rem 1.1rem 1.25rem 1.35rem; }
}

@media (prefers-reduced-motion: reduce) {
  .glitch::before, .glitch::after, button.kill.armed, html::before { animation: none; }
  html::before { display: none; }
  .glitch::before, .glitch::after { display: none; }
  * { transition: none !important; }
}

.metrics + p { margin-top: 1.1rem; }

/* ── layout rhythm ──────────────────────────────────────────────────────── */
.panel > h2, .section-head { margin-bottom: 1rem; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.section-head h2 { margin: 0; }
.panel > :last-child { margin-bottom: 0; }
.panel p:last-child { margin-bottom: 0; }
.panel .scroll + p, .panel table + p { margin-top: 1rem; }
.hint { color: var(--muted); font-size: .875rem; font-weight: 400; margin: 0; }
label .hint { margin-top: .1rem; }
td.end { text-align: right; padding-right: 0; width: 1%; white-space: nowrap; }
.metric.bad { color: var(--glitch-text); }
.customer-head { display: grid; gap: .5rem; }
.customer-head h1 { font-size: 2.25rem; }
.back { font-weight: 500; text-decoration: none; }
.back::before { content: "‹ "; }
.stack > .tabs { margin: 0; }
fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: .6rem; min-width: 0; }
legend { font-weight: 500; font-size: .9375rem; padding: 0; margin-bottom: .45rem; }
.row.quick { gap: .5rem; }
.row > label:not(.check) { flex: 1 1 8rem; }
.hours .row { align-items: end; }
.hours .check { min-height: 42px; }
input.time { font-family: var(--display); font-weight: 500; letter-spacing: .04em; max-width: 9rem; }
input:disabled, select:disabled { opacity: .4; cursor: not-allowed; }

button.sm { min-height: 32px; padding: .25rem .8rem; font-size: .875rem;
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px)); }
button.danger.solid { color: #fff; background: var(--glitch); border-color: var(--glitch); }
button.danger.solid:hover { background: #ff4a5e; color: #fff; }
button.icon { min-height: 36px; width: 36px; padding: 0; font-size: 1.5rem; line-height: 1; background: transparent; border-color: transparent; clip-path: none; }

.form-error { margin: 0; padding: .65rem .9rem; border-left: 3px solid var(--glitch); background: rgba(255, 20, 56, .1); color: #ffd6da; }
.form-error[hidden] { display: none; }

/* ── modals ─────────────────────────────────────────────────────────────── */
dialog.modal {
  width: min(34rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); padding: 0; color: var(--text);
  background: linear-gradient(160deg, var(--raised), var(--console) 60%); border: 1px solid var(--vein);
  box-shadow: inset 3px 0 0 var(--accent), 0 30px 80px rgba(0, 0, 0, .7), 0 0 60px rgba(255, 43, 69, .08);
}
dialog.modal.wide { width: min(46rem, calc(100vw - 2rem)); }
dialog.modal::backdrop { background: rgba(3, 1, 2, .85); backdrop-filter: blur(3px); }
dialog.modal[open] { animation: modal-in .16s ease-out; }
@keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(.985); } }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.25rem .25rem 1.5rem; }
.modal-body { display: grid; gap: 1rem; padding: .75rem 1.5rem 1.5rem; overflow-y: auto; }
.modal-actions { display: flex; justify-content: flex-end; gap: .6rem; flex-wrap: wrap; margin-top: .5rem; }

/* ── toasts: bottom-right, always in view ───────────────────────────────── */
.toasts { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 200; display: grid; gap: .6rem; width: min(24rem, calc(100vw - 2.5rem)); }
.toast {
  display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; padding: .75rem .6rem .75rem 1rem;
  background: var(--raised); border: 1px solid var(--vein); box-shadow: inset 3px 0 0 var(--accent), 0 12px 40px rgba(0, 0, 0, .6);
  animation: toast-in .18s ease-out;
}
.toast.err { box-shadow: inset 3px 0 0 var(--glitch), 0 12px 40px rgba(0, 0, 0, .6); color: #ffd6da; }
.toast-x { min-height: 0; padding: 0 .35rem; font-size: 1.25rem; line-height: 1; background: none; border: 0; clip-path: none; color: var(--muted); }
@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } }
@media (max-width: 720px) { .toasts { right: 1rem; left: 1rem; bottom: 5rem; width: auto; } }
@media (prefers-reduced-motion: reduce) { dialog.modal[open], .toast { animation: none; } }

/* ── more damage: the torn fragments flicker and jump now and then ──────── */
html::after { animation: fragments 11s steps(1) infinite; }
@keyframes fragments {
  0%, 100% { opacity: 1; transform: none; }
  61% { opacity: .2; transform: translateY(9vh); }
  62% { opacity: 1; transform: translateY(-4vh) scaleY(1.4); }
  63% { opacity: .6; transform: none; }
  88% { opacity: 1; transform: translateX(2vw); }
  89% { transform: none; }
}
h1 { text-shadow: -1px 0 rgba(255, 20, 56, .55), 1px 0 rgba(23, 241, 255, .25); }

/* ── spacing fixes ──────────────────────────────────────────────────────── */
.secret + .row { margin-top: .75rem; }
.stack > .secret + .row { margin-top: 0; }

/* ── who is signed in, and whether the page is live ─────────────────────── */
.user-chip { display: inline-flex; align-items: center; gap: .55rem; padding: .25rem .8rem .25rem .25rem; min-height: 40px;
  background: var(--console); border: 1px solid var(--vein); color: var(--text); font: 600 .9375rem var(--display); }
.avatar { display: grid; place-items: center; width: 30px; height: 30px; background: var(--accent); color: #1c0205;
  font: 700 1rem var(--display); text-transform: uppercase; clip-path: polygon(0 0, 100% 0, 100% 70%, 70% 100%, 0 100%); }
.live-state { display: inline-flex; align-items: center; gap: .45rem; font: 500 .875rem var(--display); color: var(--muted); }
.live-state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.live-state.on { color: var(--text); }
.live-state.on::before { background: var(--accent); box-shadow: 0 0 8px var(--accent); animation: beat 2.4s ease-in-out infinite; }
@keyframes beat { 50% { opacity: .35; } }
@media (max-width: 720px) { .user-chip .who-name, .live-state span { display: none; } .user-chip { padding-right: .25rem; } }

/* ── the gate: skull, name, and a door ──────────────────────────────────── */
.gate { position: relative; min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: .75rem 1rem; overflow: hidden; }
.gate::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(34rem 28rem at 50% 34%, rgba(255, 20, 56, .26), transparent 70%); opacity: .7; }
.gate-inner { position: relative; display: grid; justify-items: center; gap: .9rem; width: min(76rem, 100%); }
.gate-stage { position: relative; justify-self: center; display: grid; place-items: center; }
.gate-alert {
  position: absolute; z-index: 2; left: 50%; top: 46%; width: min(92vw, 46rem); margin: 0; pointer-events: none;
  translate: -50% -50%; text-align: center; text-wrap: balance;
  font: 700 clamp(2rem, min(7vw, 9vh), 4.75rem)/1 var(--display); letter-spacing: .04em; text-transform: uppercase;
  color: #fff; text-shadow: -3px 0 rgba(255, 20, 56, .95), 3px 0 rgba(23, 241, 255, .7), 0 0 24px var(--accent), 0 0 60px var(--glitch);
}
.gate-alert.show { animation: alert-slam 3.2s steps(1, end) forwards, alert-fade 3.2s ease-in forwards; }
.gate-alert.blocked { font-size: clamp(1.25rem, 3vw, 2rem); line-height: 1.3; }
@keyframes alert-slam {
  0% { transform: scale(1.35) skewX(-12deg); } 4% { transform: translateX(-10px) skewX(8deg); clip-path: inset(0 0 55% 0); }
  8% { transform: translateX(8px); clip-path: inset(40% 0 0 0); } 12% { transform: none; clip-path: none; }
  46% { transform: translateX(-4px) skewX(-6deg); } 48% { transform: none; }
  71% { transform: translateX(5px); clip-path: inset(20% 0 45% 0); } 73% { transform: none; clip-path: none; }
}
@keyframes alert-fade { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
.skull {
  display: block; justify-self: center; width: min(92vw, calc(min(54vh, 100dvh - 24.5rem, 41rem) * .86)); aspect-ratio: .86;
  filter: drop-shadow(0 0 6px rgba(255, 20, 56, .4)); user-select: none;
}
/* Static crimson lettering with gouges and a dim red halo. */
html:has(.gate)::after { display: none; }
.gate-mark { display: grid; justify-items: center; margin-top: clamp(-6.5rem, -7vh, -2.5rem); position: relative; isolation: isolate; }
.gate-mark::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: -8%; right: -8%; top: -18%; height: 115%;
  background: radial-gradient(ellipse at 50% 62%, rgba(255, 15, 43, .38), rgba(129, 0, 18, .18) 38%, transparent 70%);
  filter: blur(12px); opacity: .7;
}
.gate-title {
  position: relative; display: flex; margin: 0; padding: .06em 0 .18em .045em;
  font: 400 clamp(2.25rem, min(11.8vw, 14vh), 9.5rem)/1.05 "Metal Mania", Georgia, serif;
  letter-spacing: .045em; white-space: nowrap; max-width: 100%; text-transform: uppercase;
  color: #ed1734; text-shadow: none; visibility: hidden;
  filter: drop-shadow(0 3px 0 #32020b) drop-shadow(0 0 18px rgba(255, 15, 43, .35));
}
.gate-title.font-ready { visibility: visible; }
.gate-letter {
  display: inline-block; position: relative;
  background:
    linear-gradient(112deg, transparent 0 39%, rgba(18, 0, 4, .8) 39.5% 40.5%, transparent 41% 67%, rgba(37, 0, 7, .65) 67.5% 68.5%, transparent 69%),
    linear-gradient(180deg, #ff354b 4%, #ed1734 23%, #b80725 48%, #620015 69%, #d90027 87%, #34000c 100%);
  background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.gate-letter:nth-child(3n) { background-position: -.18em 0, 0 0; }
.gate-letter:nth-child(4n) { background-position: .12em 0, 0 -.06em; }
.gate-from { margin: .35rem 0 0; font: 500 clamp(.875rem, 1.6vw, 1.125rem) var(--display); letter-spacing: .32em; color: var(--muted); text-indent: .32em; }
.gate-from a { color: var(--text); text-decoration: none; }
.gate-from a:hover { color: var(--accent); }
.gate-lines { display: block; max-width: 34rem; text-align: center; color: var(--muted); font-size: .9375rem; }
.gate-lines strong { color: var(--text); font-weight: 600; }
.gate form { width: min(24rem, 100%); display: grid; gap: .7rem; }
.gate form button[type=submit] { width: 100%; min-height: 48px; font-size: 1.0625rem; letter-spacing: .12em; text-transform: uppercase; }
.gate input { background: rgba(10, 3, 4, .85); }
.gate.denied .gate-inner { animation: shake .42s cubic-bezier(.36, .07, .19, .97) 1; }
.gate.denied::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: rgba(255, 20, 56, .22); animation: flash .5s ease-out forwards; }
@keyframes shake { 20%, 60% { transform: translateX(-9px); } 40%, 80% { transform: translateX(9px); } }
@keyframes flash { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  html::after, .live-state.on::before, .gate.denied .gate-inner { animation: none; }
  .gate-alert.show { animation: alert-fade 3.2s ease-in forwards; }
}
.clip { position: fixed; top: 0; left: -9999px; opacity: 0; }

/* Expandable customer model configuration. */
.model-details { border-top: 1px solid var(--vein); padding-top: .75rem; }
.model-details summary { cursor: pointer; font-weight: 500; overflow-wrap: anywhere; }
.model-details[open] summary { margin-bottom: 1rem; }
.model-details td { overflow-wrap: anywhere; }