:root {
  --bg: #050505;
  --panel: rgba(9, 9, 9, 0.78);
  --panel-2: rgba(13, 13, 13, 0.72);
  --text: #d8d8d8;
  --muted: #737373;
  --faint: #3d3d3d;
  --line: #232323;
  --red: #851d27;
  --red-hot: #b72a38;
  --red-soft: rgba(133, 29, 39, 0.16);
  --green: #7d9b82;
  --mouse-x: 50vw;
  --mouse-y: 50vh;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
html { background: var(--bg); }
body {
  margin: 0;
  background:
    radial-gradient(900px 600px at var(--mouse-x) var(--mouse-y), rgba(113, 17, 29, 0.055), transparent 68%),
    linear-gradient(#050505, #030303);
  color: var(--text);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 13px;
  letter-spacing: .015em;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 170px rgba(0,0,0,.82);
  z-index: 30;
}

::selection { background: var(--red); color: #fff; }
button, a { font: inherit; }

.noise,
.scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 29;
}
.noise {
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.93' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
  animation: noiseShift .26s steps(2) infinite;
}
.scanlines {
  opacity: .16;
  background: repeating-linear-gradient(to bottom, transparent 0, transparent 3px, rgba(255,255,255,.015) 4px);
}
@keyframes noiseShift {
  0% { transform: translate(0,0); }
  25% { transform: translate(-1.2%,.6%); }
  50% { transform: translate(.8%,-.9%); }
  75% { transform: translate(.4%,.5%); }
}

.boot {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: #020202;
  z-index: 100;
  transition: opacity .28s ease, visibility .28s ease;
}
.boot.is-done { opacity: 0; visibility: hidden; }
.boot__frame { width: min(620px, calc(100vw - 40px)); }
.boot__eyebrow {
  color: #5d5d5d;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 28px;
}
.boot__steps { border-top: 1px solid #1c1c1c; }
.boot-line {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #141414;
  color: #555;
  transition: color .12s linear, background .12s linear;
}
.boot-line span { letter-spacing: .08em; }
.boot-line b { font-size: 10px; font-weight: 500; color: #3c3c3c; }
.boot-line.is-running { color: #b9b9b9; background: linear-gradient(90deg, rgba(112,18,31,.08), transparent 58%); }
.boot-line.is-running b { color: var(--red-hot); }
.boot-line.is-ok { color: #8e8e8e; }
.boot-line.is-ok b { color: #667b69; }
.boot-line.is-error b { color: #a86f43; }
.boot__meter { margin-top: 22px; height: 1px; background: #151515; overflow: hidden; }
.boot__meter i { display:block; height:100%; width:0%; background: var(--red-hot); box-shadow: 0 0 14px var(--red-hot); transition: width .2s ease; }
.boot__result {
  margin-top: 26px;
  color: #e3e3e3;
  font-size: 18px;
  letter-spacing: .2em;
  opacity: 0;
  filter: blur(8px);
  transform: translateX(-3px);
}
.boot__result.is-visible {
  animation: targetResolved .38s steps(2,end) forwards;
}
@keyframes targetResolved {
  0% { opacity: 0; filter: blur(8px); transform: translateX(-6px); }
  42% { opacity: 1; filter: blur(0); transform: translateX(2px); text-shadow: 3px 0 rgba(183,42,56,.55); }
  64% { transform: translateX(-1px); text-shadow: -2px 0 rgba(183,42,56,.35); }
  100% { opacity: 1; filter: blur(0); transform: translateX(0); text-shadow: none; }
}

.shell {
  width: min(1420px, calc(100vw - 36px));
  margin: 0 auto;
  padding: 26px 0 24px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .32s ease, transform .32s ease;
  position: relative;
  z-index: 2;
}
.shell.is-visible { opacity: 1; transform: none; }

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  min-height: 72px;
  border-bottom: 1px solid var(--line);
}
.brand { font-size: 15px; font-weight: 650; letter-spacing: .08em; }
.brand span { color: var(--red-hot); padding: 0 7px; }
.subline { margin-top: 7px; color: #505050; font-size: 9px; letter-spacing: .13em; }
.topbar__right { display:flex; align-items:center; gap:8px; color:#666; font-size:10px; letter-spacing:.12em; padding-top:3px; }
.live-dot { width:6px; height:6px; background: var(--green); border-radius:50%; box-shadow:0 0 8px rgba(125,155,130,.32); }
.live-dot.is-offline { background:#8f3b3b; box-shadow:0 0 8px rgba(143,59,59,.3); }

.hero-strip {
  min-height: 116px;
  display: grid;
  grid-template-columns: 105px minmax(220px, .8fr) 1.1fr;
  align-items: center;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.hero-strip::after {
  content:"";
  position:absolute;
  left:0; bottom:-1px;
  width:17%; height:1px;
  background:var(--red-hot);
  box-shadow:0 0 18px rgba(183,42,56,.2);
}
.hero-strip__label { color:#585858; font-size:10px; letter-spacing:.18em; }
.hero-strip__ip { color:#ececec; font-size: clamp(21px, 2.2vw, 34px); letter-spacing:.035em; overflow-wrap:anywhere; }
.hero-strip__meta { color:#656565; font-size:10px; letter-spacing:.08em; display:flex; justify-content:flex-end; gap:30px; flex-wrap:wrap; text-align:right; }

.grid {
  display: grid;
  grid-template-columns: 1.08fr 1.15fr .82fr;
  border-left: 1px solid var(--line);
}
.panel {
  min-width:0;
  background: linear-gradient(180deg, rgba(13,13,13,.68), rgba(6,6,6,.55));
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 0 22px 19px;
  position:relative;
}
.panel::before {
  content:"";
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
  background: radial-gradient(420px circle at var(--panel-x,50%) var(--panel-y,50%), rgba(132,29,39,.075), transparent 58%);
  transition:opacity .18s ease;
}
.panel:hover::before { opacity:1; }
.panel--network { grid-row: span 2; }
.panel--device { grid-row: span 2; }
.panel--session { min-height: 275px; }
.panel--edge { min-height: 228px; }
.panel__head {
  height: 54px;
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  border-bottom: 1px solid #1b1b1b;
  position:relative;
  z-index:1;
}
.panel__head > span { color:var(--red-hot); font-size:9px; }
.panel__head h2 { margin:0; font-size:11px; letter-spacing:.14em; font-weight:600; }
.panel__head b { font-size:9px; font-weight:500; color:#657167; letter-spacing:.09em; }

.data-list { margin:0; position:relative; z-index:1; }
.data-list > div {
  min-height: 41px;
  display:grid;
  grid-template-columns: 42% 58%;
  align-items:center;
  border-bottom:1px solid #171717;
  gap:12px;
}
.data-list dt { color:#555; font-size:9px; letter-spacing:.11em; }
.data-list dd { margin:0; color:#c5c5c5; font-size:11px; line-height:1.35; overflow-wrap:anywhere; }
.data-list dd em { margin-left:7px; color:#6f343a; font-size:8px; font-style:normal; letter-spacing:.09em; text-transform:uppercase; }

.confidence { margin-top:20px; border-left:2px solid #3d171b; padding-left:13px; position:relative; z-index:1; }
.confidence > div { display:flex; justify-content:space-between; gap:20px; margin:7px 0; }
.confidence span { color:#4f4f4f; font-size:8px; letter-spacing:.1em; }
.confidence strong { color:#777; font-size:8px; font-weight:500; text-align:right; letter-spacing:.06em; }

.session-note {
  margin-top:17px;
  min-height:31px;
  border:1px solid #1e1e1e;
  border-left-color:#492027;
  display:flex;
  align-items:center;
  padding:0 10px;
  color:#595959;
  font-size:8px;
  letter-spacing:.1em;
  position:relative;
  z-index:1;
}

.edge-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  border-left:1px solid #191919;
  border-top:1px solid #191919;
  margin-top:17px;
  position:relative;
  z-index:1;
}
.edge-grid > div { min-height:55px; padding:10px; border-right:1px solid #191919; border-bottom:1px solid #191919; }
.edge-grid span { display:block; color:#4b4b4b; font-size:8px; letter-spacing:.09em; margin-bottom:7px; }
.edge-grid strong { color:#aaa; font-size:10px; font-weight:500; overflow-wrap:anywhere; }
.signal { height:30px; display:flex; align-items:end; gap:4px; margin-top:16px; opacity:.34; }
.signal i { flex:1; max-width:10px; background:#74303a; height:8px; animation:signal 1.9s ease-in-out infinite alternate; transform-origin:bottom; }
.signal i:nth-child(2n){animation-delay:-.4s}.signal i:nth-child(3n){animation-delay:-.9s}.signal i:nth-child(5n){animation-delay:-1.4s}
@keyframes signal { from{height:5px;opacity:.35} to{height:24px;opacity:.95} }

.terminal { border:1px solid var(--line); border-top:0; background:rgba(4,4,4,.84); }
.terminal__head { height:38px; display:flex; justify-content:space-between; align-items:center; padding:0 15px; border-bottom:1px solid #191919; color:#5d5d5d; font-size:8px; letter-spacing:.12em; }
.terminal__body { min-height:152px; max-height:210px; overflow:auto; padding:11px 15px 15px; scrollbar-width:thin; scrollbar-color:#282828 transparent; }
.log-line { min-height:24px; display:grid; grid-template-columns:88px 1fr auto; gap:14px; align-items:center; color:#777; font-size:10px; border-bottom:1px dotted rgba(255,255,255,.035); }
.log-line time { color:#454545; }
.log-line span { min-width:0; overflow-wrap:anywhere; }
.log-line b { color:#4c5f50; font-size:8px; font-weight:500; letter-spacing:.08em; }
.log-line.warn b { color:#946b47; }
.log-line.hot span { color:#a4a4a4; }

.footer { min-height:46px; display:flex; align-items:center; gap:22px; flex-wrap:wrap; border-bottom:1px solid var(--line); color:#414141; font-size:8px; letter-spacing:.08em; }
.footer__dry { margin-left:auto; color:#55393c; }

.cursor-crosshair { display:none; }
@media (hover:hover) and (pointer:fine) {
  body { cursor:crosshair; }
  a, button { cursor:crosshair; }
  .cursor-crosshair {
    display:block;
    position:fixed;
    left:0; top:0;
    width:18px; height:18px;
    transform:translate(-50%,-50%);
    pointer-events:none;
    z-index:200;
    opacity:.45;
  }
  .cursor-crosshair::before,
  .cursor-crosshair::after { content:""; position:absolute; background:#9a414c; }
  .cursor-crosshair::before { left:8px; top:0; width:1px; height:18px; }
  .cursor-crosshair::after { left:0; top:8px; width:18px; height:1px; }
}

@media (max-width: 980px) {
  .grid { grid-template-columns:1fr 1fr; }
  .panel--network,.panel--device { grid-row:auto; }
  .hero-strip { grid-template-columns:80px 1fr; padding:20px 0; }
  .hero-strip__meta { grid-column:1/-1; justify-content:flex-start; text-align:left; padding-top:14px; }
}
@media (max-width: 680px) {
  body { font-size:12px; }
  .shell { width:calc(100vw - 22px); padding-top:16px; }
  .topbar { min-height:65px; }
  .subline { font-size:8px; }
  .grid { grid-template-columns:1fr; }
  .hero-strip { min-height:106px; grid-template-columns:1fr; gap:7px; align-content:center; }
  .hero-strip__label { display:none; }
  .hero-strip__ip { font-size:24px; }
  .hero-strip__meta { grid-column:auto; padding-top:3px; gap:8px 18px; }
  .panel { padding-left:15px; padding-right:15px; }
  .data-list > div { grid-template-columns:39% 61%; }
  .terminal__body { max-height:190px; }
  .log-line { grid-template-columns:72px 1fr; gap:8px; }
  .log-line b { display:none; }
  .footer { gap:10px 18px; padding:10px 0; }
  .footer__dry { margin-left:0; width:100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; }
  .noise { animation:none; }
}