:root {
  --bg: #09090b;
  --surface: #18181b;
  --surface-2: #232329;
  --paper: #fafafa;
  --ink: #0b0b0d;
  --text: #f4f4f5;
  --muted: #a1a1aa;
  --primary: #39ff14;
  --secondary: #ff007f;
  --cyan: #26e6ff;
  --warning: #ffd60a;
  --danger: #ff3b30;
  --ok: #39ff14;
  --shadow: 12px 12px 0 var(--primary);
  --radius: 2px 38px 3px 25px / 38px 5px 32px 3px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 8% 8%, rgba(57,255,20,.12), transparent 27rem),
    radial-gradient(circle at 92% 18%, rgba(255,0,127,.13), transparent 26rem),
    linear-gradient(180deg, #09090b, #0e0e12 55%, #09090b);
  color: var(--text);
  font-family: "JetBrains Mono", "Cascadia Code", Consolas, monospace;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .16;
  z-index: 99;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 30px 30px;
  mask-image: linear-gradient(to bottom, black, transparent 82%);
}
img, svg, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
h1,h2,h3,h4 { font-family: Impact, "Arial Black", sans-serif; text-transform: uppercase; line-height: .95; letter-spacing: .02em; text-wrap: balance; }
p { text-wrap: pretty; }

.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 1000; background: var(--primary); color: #000; padding: .7rem 1rem; font-weight: 900; }
.skip-link:focus { top: 1rem; }

.scroll-progress { position: fixed; top: 0; left: 0; height: 4px; width: 0; background: linear-gradient(90deg, var(--primary), var(--secondary), var(--cyan)); z-index: 1000; box-shadow: 0 0 18px var(--primary); }

.container { width: min(92%, 1240px); margin-inline: auto; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 80;
  background: rgba(9,9,11,.88);
  border-bottom: 1px solid rgba(57,255,20,.35);
  backdrop-filter: blur(16px);
}
.header-inner {
  min-height: 92px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding-block: .85rem;
}
.logo-button, .queue-button {
  position: relative;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 2px solid var(--primary);
  color: var(--primary);
  box-shadow: 4px 4px 0 var(--secondary);
  transition: transform .2s ease, box-shadow .2s ease, color .2s ease;
}
.logo-button:hover, .queue-button:hover { transform: translate(-3px,-3px) rotate(-2deg); box-shadow: 7px 7px 0 var(--secondary); color: #fff; }
.queue-badge { position: absolute; right: -8px; top: -8px; min-width: 25px; height: 25px; border-radius: 999px; display: grid; place-items: center; padding: 0 .3rem; background: var(--secondary); color: #fff; border: 2px solid var(--bg); font-size: .76rem; font-weight: 900; }
.header-copy { text-align: center; min-width: 0; }
.chaos-title { display: flex; flex-wrap: wrap; justify-content: center; gap: .12em; color: var(--ink); font-size: clamp(2rem, 5vw, 4.4rem); text-shadow: none; }
.chaos-title span { display: inline-grid; place-items: center; min-width: .72em; padding: .05em .12em; line-height: 1; color: var(--ink); }
.header-kicker { color: var(--muted); letter-spacing: .18em; text-transform: uppercase; font-size: clamp(.68rem,1.4vw,.9rem); margin-top: .45rem; }

.hero { padding: clamp(3rem,7vw,7rem) 0 2.5rem; position: relative; }
.hero::after { content:""; position:absolute; width:200px; height:70px; left: 4%; top: 20%; background: rgba(255,0,127,.18); transform: rotate(-8deg); border: 1px dashed rgba(255,255,255,.18); pointer-events:none; }
.eyebrow { color: var(--secondary); font-weight: 900; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 1rem; }
.hero-grid { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(280px,.75fr); gap: 2rem; align-items: center; }
.hero h2 { color: var(--primary); font-size: clamp(3rem,8vw,7.8rem); text-shadow: 5px 5px 0 var(--secondary); max-width: 10ch; }
.hero-copy { margin-top: 1.5rem; color: #d4d4d8; max-width: 68ch; font-size: clamp(1rem,1.5vw,1.16rem); }
.hero-actions { display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.5rem; }
.hero-panel { position: relative; background: var(--paper); color: var(--ink); border: 4px solid #000; border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow); transform: rotate(1.3deg); }
.hero-panel::before { content:"LIVE FIELD OPS"; position:absolute; right:-.9rem; top:-1rem; padding:.25rem .6rem; background:var(--secondary); color:#fff; font-weight:900; transform:rotate(5deg); border:2px solid #000; }
.hero-panel h3 { color: var(--ink); font-size: 1.7rem; margin-bottom: 1rem; }
.metric-list { display:grid; gap:.65rem; }
.metric { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.7rem .75rem; background:#ececec; border:2px solid #111; }
.metric b { color: #000; }
.metric span { color: #3f3f46; text-align:right; }

.btn { position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.5rem; min-height:46px; padding:.68rem 1rem; border:2px solid var(--primary); background:transparent; color:var(--primary); font-weight:900; letter-spacing:.06em; text-transform:uppercase; transition:.2s ease; overflow:hidden; }
.btn:hover, .btn:focus-visible { background:var(--primary); color:var(--bg); box-shadow:5px 5px 0 var(--secondary); transform:translate(-4px,-4px); }
.btn.secondary { border-color:var(--secondary); color:var(--secondary); }
.btn.secondary:hover, .btn.secondary:focus-visible { background:var(--secondary); color:#fff; box-shadow:5px 5px 0 var(--primary); }
.btn.dark { background: var(--ink); border-color: var(--ink); color:#fff; }
.btn.dark:hover { background: var(--ink); color: var(--secondary); }
.btn.busy::after { content:""; position:absolute; inset:0; background:var(--secondary); transform:translateX(-100%); animation: sweep 1.4s ease forwards; }
.btn.busy::before { content:"✓"; position:absolute; z-index:2; font-size:1.6rem; color:#fff; opacity:0; animation: check .35s 1.1s forwards; }
.btn.busy span, .btn.busy svg { opacity:.15; }
@keyframes sweep { to { transform:translateX(0); } }
@keyframes check { to { opacity:1; } }

.stats-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; padding:1rem 0 3rem; }
.stat { border:1px solid rgba(255,255,255,.14); background:rgba(24,24,27,.72); padding:1rem; }
.stat strong { display:block; color:var(--primary); font-family:Impact,"Arial Black",sans-serif; font-size:clamp(1.6rem,3vw,2.5rem); line-height:1; }
.stat span { color:var(--muted); font-size:.78rem; text-transform:uppercase; letter-spacing:.12em; }

.section { padding: clamp(2.5rem,6vw,5.5rem) 0; }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:1rem; margin-bottom:2rem; }
.section-heading h2 { font-size:clamp(2.4rem,5vw,5rem); color:var(--primary); text-shadow:3px 3px 0 var(--secondary); }
.section-heading p { color:var(--muted); max-width:56ch; }
.items { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2.2rem; }
.item {
  background: var(--paper);
  color: var(--ink);
  border: 4px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(1.2rem,3vw,2rem);
  position: relative;
  transform: rotate(-1deg);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease;
}
.item:nth-child(even) { transform:rotate(.9deg); box-shadow:12px 12px 0 var(--secondary); }
.item:hover, .item:focus-within { transform:rotate(0) translate(-5px,-5px); box-shadow:17px 17px 0 var(--primary); }
.item:nth-child(even):hover { box-shadow:17px 17px 0 var(--secondary); }
.item > h3 { display:flex; flex-wrap:wrap; justify-content:center; gap:1px; color:var(--ink); font-size:clamp(1.6rem,3vw,2.6rem); margin-bottom:1rem; }
.item > h3 span { display:inline-block; min-width:.64em; padding:.08em .18em; border:1px solid #777; line-height:1; }
.item > h3 .space { width:.3em; min-width:.3em; border:0; background:transparent!important; }
.letter-v1 { background:#fff; color:#000; }
.letter-v2 { background:var(--primary); color:#000; }
.letter-v3 { background:var(--secondary); color:#fff; }
.item-content { display:grid; grid-template-columns:minmax(130px,.75fr) minmax(0,1.25fr); gap:1.35rem; align-items:start; }
.module-visual { min-height:190px; display:grid; place-items:center; background:var(--surface); border:3px solid #000; overflow:hidden; position:relative; }
.module-visual::before { content:""; position:absolute; inset:0; background:repeating-linear-gradient(135deg,transparent 0 10px,rgba(57,255,20,.08) 10px 12px); }
.module-visual svg { width:68%; color:var(--primary); filter:drop-shadow(5px 5px 0 rgba(255,0,127,.8)); position:relative; z-index:1; }
.item-copy { display:flex; flex-direction:column; align-items:flex-start; gap:1rem; min-width:0; }
.description { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4; overflow:hidden; color:#27272a; }
.special { display:inline-block; padding:.28rem .55rem; background:var(--surface); border:3px dotted var(--primary); color:var(--primary); font-weight:900; text-transform:uppercase; transform:rotate(-3deg); }
.control-group { width:100%; display:grid; gap:.65rem; }
.input-row { display:grid; grid-template-columns:minmax(95px,.38fr) 1fr; gap:.75rem; align-items:center; }
label { font-weight:900; }
input, select, textarea { width:100%; min-height:42px; border:2px solid #18181b; background:#fff; color:#09090b; padding:.55rem .65rem; outline:none; }
textarea { min-height:92px; resize:vertical; }
input:focus, select:focus, textarea:focus { border-color:var(--secondary); box-shadow:3px 3px 0 var(--primary); }
.item-actions { display:flex; flex-wrap:wrap; gap:.65rem; margin-top:.2rem; }

.panel { background:rgba(24,24,27,.82); border:1px solid rgba(255,255,255,.16); padding:1.2rem; }
.panel h3 { color:var(--primary); font-size:1.4rem; margin-bottom:.8rem; }
.output { white-space:pre-wrap; word-break:break-word; max-height:330px; overflow:auto; background:#050506; border:1px solid #34343b; color:#d4d4d8; padding:1rem; font-size:.85rem; }
.table-wrap { width:100%; overflow:auto; border:1px solid #d4d4d8; }
table { width:100%; border-collapse:collapse; min-width:620px; background:#fff; color:#111; }
th,td { padding:.7rem .75rem; text-align:left; border-bottom:1px solid #d4d4d8; vertical-align:top; }
th { background:#111; color:var(--primary); text-transform:uppercase; letter-spacing:.06em; }
.badge { display:inline-flex; align-items:center; gap:.35rem; padding:.18rem .45rem; border:1px solid currentColor; font-size:.76rem; font-weight:900; text-transform:uppercase; }
.badge.open, .badge.active, .badge.healthy { color:#047857; background:#d1fae5; }
.badge.high, .badge.repair, .badge.warning { color:#9a3412; background:#ffedd5; }
.badge.critical, .badge.retired, .badge.offline { color:#b91c1c; background:#fee2e2; }
.badge.medium, .badge.spare { color:#1d4ed8; background:#dbeafe; }

.workspace { display:grid; gap:1.25rem; }
.toolbar { display:flex; flex-wrap:wrap; gap:.7rem; align-items:center; }
.toolbar input, .toolbar select { width:auto; min-width:180px; }
.empty { padding:2rem; text-align:center; color:#71717a; background:#f4f4f5; border:2px dashed #a1a1aa; }

.purpose-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.purpose-card { padding:1.2rem; border:1px solid rgba(255,255,255,.16); background:linear-gradient(145deg,rgba(24,24,27,.94),rgba(12,12,15,.96)); position:relative; overflow:hidden; }
.purpose-card::after { content:""; position:absolute; width:65px; height:18px; right:-10px; top:8px; background:rgba(57,255,20,.25); transform:rotate(12deg); }
.purpose-card h3 { color:var(--secondary); font-size:1.35rem; margin-bottom:.65rem; }
.purpose-card p { color:#d4d4d8; }

.site-footer { border-top:1px solid rgba(57,255,20,.3); padding:2rem 0 3rem; color:var(--muted); }
.footer-inner { display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; }

.toast-region { position:fixed; right:1rem; bottom:1rem; z-index:200; display:grid; gap:.55rem; width:min(360px,calc(100vw - 2rem)); }
.toast { background:#fff; color:#111; border:3px solid #111; box-shadow:7px 7px 0 var(--primary); padding:.8rem 1rem; animation:toast-in .25s ease both; }
.toast.error { box-shadow:7px 7px 0 var(--danger); }
@keyframes toast-in { from { opacity:0; transform:translateY(16px) rotate(1deg); } }

.drawer { position:fixed; inset:0; z-index:150; pointer-events:none; }
.drawer.open { pointer-events:auto; }
.drawer-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.72); opacity:0; transition:.2s; }
.drawer-panel { position:absolute; right:0; top:0; height:100%; width:min(500px,100%); background:#111114; border-left:2px solid var(--primary); padding:1.25rem; transform:translateX(102%); transition:.25s cubic-bezier(.2,.8,.2,1); overflow:auto; }
.drawer.open .drawer-backdrop { opacity:1; }
.drawer.open .drawer-panel { transform:none; }
.drawer-header { display:flex; justify-content:space-between; gap:1rem; align-items:center; margin-bottom:1rem; }
.drawer-header h2 { color:var(--primary); font-size:2rem; }
.icon-close { width:42px; height:42px; border:2px solid var(--secondary); color:var(--secondary); background:transparent; font-size:1.5rem; }
.queue-list { display:grid; gap:.75rem; }
.queue-entry { background:#fafafa; color:#111; border:3px solid #111; box-shadow:5px 5px 0 var(--secondary); padding:.85rem; }
.queue-entry h3 { color:#111; font-size:1.1rem; margin-bottom:.35rem; }
.queue-entry small { color:#52525b; }

.install-banner { display:none; position:fixed; left:50%; bottom:1rem; transform:translateX(-50%); z-index:140; width:min(620px,calc(100% - 2rem)); background:#fafafa; color:#111; border:3px solid #111; box-shadow:8px 8px 0 var(--secondary); padding:1rem; align-items:center; justify-content:space-between; gap:1rem; }
.install-banner.show { display:flex; }

.reveal { opacity:0; transform:translateY(28px) rotate(.4deg); filter:blur(4px); }
.reveal.visible { opacity:1; transform:none; filter:none; transition:opacity .55s ease, transform .55s cubic-bezier(.2,.8,.2,1), filter .55s ease; }

@media (max-width: 900px) {
  .hero-grid, .items { grid-template-columns:1fr; }
  .stats-strip { grid-template-columns:repeat(2,1fr); }
  .purpose-grid { grid-template-columns:1fr; }
  .item-content { grid-template-columns:1fr; }
  .module-visual { min-height:150px; }
}
@media (max-width: 620px) {
  .header-inner { grid-template-columns:auto 1fr auto; min-height:78px; }
  .logo-button,.queue-button { width:44px;height:44px; }
  .chaos-title { font-size:clamp(1.38rem,7vw,2rem); }
  .header-kicker { display:none; }
  .hero { padding-top:2.7rem; }
  .hero h2 { font-size:clamp(2.8rem,14vw,4.8rem); }
  .stats-strip { grid-template-columns:1fr 1fr; gap:.6rem; }
  .section-heading { display:block; }
  .section-heading p { margin-top:.8rem; }
  .item { padding:1rem; box-shadow:8px 8px 0 var(--primary); }
  .item:nth-child(even) { box-shadow:8px 8px 0 var(--secondary); }
  .input-row { grid-template-columns:1fr; gap:.2rem; }
  .toolbar { align-items:stretch; }
  .toolbar input,.toolbar select,.toolbar .btn { width:100%; }
  .install-banner { align-items:flex-start; flex-direction:column; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
  .reveal { opacity:1; transform:none; filter:none; }
}
/* Prevent intrinsic table and form widths from expanding mobile layouts. */
.items, .item, .item-content, .item-copy, .table-wrap, .workspace { min-width: 0; }
.table-wrap { max-width: 100%; }
@media (max-width: 620px) {
  table { min-width: 560px; }
  .header-inner { width: 100%; }
  .header-copy { min-width: 0; overflow: hidden; }
}
html, body { width: 100%; max-width: 100%; overflow-x: clip; }
.drawer { overflow: hidden; }
.drawer-panel { max-width: 100vw; }
@media (max-width: 620px) {
  .queue-badge { right: -2px; top: -6px; }
}