@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-display: swap; src: url("../fonts/barlow-condensed-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }

:root {
  --ink: #e6eef3;
  --muted: #9db0bc;
  --cold: #8fd6ff;
  --accent: var(--cold);
  --bg: #071017;
  --panel: rgba(8, 17, 24, 0.84);
  --line: rgba(143, 214, 255, 0.24);
  --metal: #1a242c;
  --metal-hi: #2a3843;
  --u-size: 15px;
  --display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --body: "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.6 var(--body); overflow-x: hidden; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }

#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: -2; }
/* Stands in for the scene when WebGL is missing, and darkens it enough for text when it is not. */
.backdrop { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, rgba(4, 9, 13, 0.55), rgba(4, 9, 13, 0) 55%); }
html.no-webgl .backdrop { background: radial-gradient(ellipse at 50% 30%, #123044, var(--bg) 70%); }

.skip { position: fixed; left: 16px; top: -60px; z-index: 30; background: var(--ink); color: var(--bg); padding: 8px 14px; }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.topbar { position: fixed; inset: 0 0 auto; z-index: 20; display: flex; align-items: center; gap: 28px; height: 60px; padding: 0 28px; background: rgba(5, 11, 16, 0.78); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); transition: border-color .6s; }
.brand { font: 600 22px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; }
.topbar nav { display: flex; gap: 22px; margin-left: auto; font: 400 13px/1 var(--mono); }
.topbar nav a { color: var(--muted); text-decoration: none; padding: 6px 0; }
.topbar nav a:hover { color: var(--accent); }

.btn { display: inline-block; padding: 10px 18px; border: 1px solid var(--accent); background: transparent; color: var(--ink); font: 400 13px/1.2 var(--mono); text-decoration: none; cursor: pointer; transition: background .2s, color .2s, border-color .6s; }
.btn:hover { background: rgba(143, 214, 255, 0.14); }
.btn-solid { background: var(--accent); color: #05090c; }
.btn-solid:hover { background: var(--ink); }


main { display: block; }
.eyebrow { font: 400 13px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); transition: color .6s; }
h1 { font: 600 clamp(72px, 13vw, 176px)/.88 var(--display); text-transform: uppercase; letter-spacing: .01em; margin: 18px 0 24px; }
/* Brushed steel on the name. The bands repeat per line of text, so each line reads as
   its own lit bar, and the darkest stays light enough to read against the aisle. */
@supports (background-clip: text) or (-webkit-background-clip: text) {
  h1, .brand {
    --steel: linear-gradient(180deg, #f4f8fa 0%, #c9d3da 30%, #8b98a2 49%, #5f6d78 52%, #a9b5bd 66%, #e3eaee 84%, #8b98a2 100%);
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
  }
  h1 {
    background-image:
      linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.85) 50%, transparent 58%),
      repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.07) 0 1px, rgba(0, 0, 0, 0.07) 1px 3px),
      var(--steel);
    background-size: 300% 100%, auto, 100% .88em;
    background-position: 130% 0, 0 0, 0 0;
    background-repeat: no-repeat, repeat, repeat;
    filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.28)) drop-shadow(0 -1px 0 rgba(0, 0, 0, 0.65)) drop-shadow(0 8px 18px rgba(0, 0, 0, 0.65));
    animation: glint 11s ease-in-out 1.5s infinite;
  }
  .brand { background-image: var(--steel); }
}
/* Most of the cycle is rest: the light crosses once, and the metal sits still. */
@keyframes glint {
  0% { background-position: 130% 0, 0 0, 0 0; }
  22%, 100% { background-position: -30% 0, 0 0, 0 0; }
}
@media (forced-colors: active) {
  h1, .brand { color: CanvasText; background: none; filter: none; animation: none; }
}
h2 { font: 600 clamp(38px, 5vw, 56px)/1 var(--display); text-transform: uppercase; letter-spacing: .02em; margin: 8px 0 16px; }
h3 { font: inherit; }

/* Placeholder content, loud on purpose so none of it can ship unnoticed. */
.ph { color: #ffd479; border-bottom: 1px dashed rgba(255, 212, 121, 0.55); }

.hero { min-height: 100svh; padding: 110px 6vw 60px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.lede { max-width: 34em; font-size: 20px; line-height: 1.5; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.scroll-cue { margin-top: 56px; font: 400 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

.stop { min-height: 100svh; padding: 90px 6vw; display: flex; align-items: center; }
.stop-right { justify-content: flex-end; }
.panel { width: min(620px, 100%); padding: 32px 34px; background: var(--panel); border: 1px solid var(--line); backdrop-filter: blur(6px); transition: border-color .6s; }
.panel-wide { width: min(860px, 100%); }


/* The rack. --u is a server's height in rack units. */
.rack { display: grid; grid-template-columns: 22px 1fr 22px; padding: 10px 8px; background: #0a0f13; border: 1px solid var(--metal-hi); border-radius: 3px; }
.rail { background-image: radial-gradient(circle at 50% 50%, #05080a 2.4px, transparent 3px), linear-gradient(90deg, #232f38, #303e49 45%, #1c262e); background-size: 100% var(--u-size), 100% 100%; }
.units { display: grid; gap: 1px; background: #05080a; padding: 0 2px; min-width: 0; }
.blank { height: calc(var(--u) * var(--u-size)); background: repeating-linear-gradient(180deg, #151d23 0 calc(var(--u-size) - 1px), #0b1115 calc(var(--u-size) - 1px) var(--u-size)); }
.server { min-height: calc(var(--u) * var(--u-size)); min-width: 0; background: var(--metal); transition: box-shadow .35s, transform .35s; display: flex; flex-direction: column; }
.bezel { flex: 1; margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 110px); align-items: center; gap: 16px; min-height: 58px; padding: 10px 16px; font: inherit; background: linear-gradient(180deg, var(--metal-hi), var(--metal) 16%, #141c22); }
.leds { display: grid; gap: 6px; }
.leds i { width: 7px; height: 7px; border-radius: 50%; background: #2bd97c; box-shadow: 0 0 7px #2bd97c; animation: blink 2.6s steps(2, jump-none) infinite; }
.leds i + i { background: var(--cold); box-shadow: 0 0 7px var(--cold); animation-duration: 1.1s; }
@keyframes blink { 0%, 70% { opacity: 1; } 71%, 100% { opacity: .3; } }
.id { min-width: 0; display: grid; }
.id b { font: 600 24px/1.1 var(--display); letter-spacing: .02em; }
.id small { font: 400 13px/1.4 var(--mono); color: var(--muted); }
.vents { height: 26px; align-self: center; background: repeating-linear-gradient(90deg, #070b0e 0 3px, transparent 3px 7px); opacity: .85; }



/* A patch panel: a metal faceplate with mounting ears, four jacks over four. */
.panel-patch { width: min(1080px, 100%); }
.patch { counter-reset: port; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px 18px; padding: 22px 44px; position: relative; background: linear-gradient(180deg, var(--metal-hi), var(--metal) 8%, #141c22); border: 1px solid var(--metal-hi); border-radius: 3px; }
.patch::before, .patch::after { content: ""; position: absolute; top: 0; bottom: 0; width: 26px; background-image: radial-gradient(circle, #05080a 3.5px, transparent 4.5px); background-size: 100% 50%; }
.patch::before { left: 8px; }
.patch::after { right: 8px; }
.patch li { counter-increment: port; display: grid; align-content: start; gap: 4px; min-width: 0; text-align: center; }
/* The port number, then an RJ45 jack, then the label. */
.patch b { display: grid; justify-items: center; font: 600 16px/1.2 var(--body); }
.patch b::before { content: counter(port, decimal-leading-zero); order: -2; margin-bottom: 6px; font: 400 11px/1 var(--mono); color: var(--muted); }
.patch b::after { content: ""; order: -1; width: 46px; height: 40px; margin-bottom: 10px; background: #05080a; box-shadow: inset 0 0 0 2px #3a4a56; clip-path: polygon(0 0, 100% 0, 100% 78%, 72% 78%, 72% 100%, 28% 100%, 28% 78%, 0 78%); }
.patch span { font-size: 14px; line-height: 1.4; color: var(--muted); }

/* The lab: chassis-style tiles for each environment, then power and the GPUs. */
.lab-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 20px; }
.lab-stamp { display: flex; align-items: center; gap: 8px; font: 400 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.lab-led { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #2bd97c; box-shadow: 0 0 7px #2bd97c; animation: blink 3.2s steps(2, jump-none) infinite; }
.lab.stale .lab-led { background: #ffb547; box-shadow: 0 0 7px #ffb547; }
.lab.offline .lab-led { background: #4a5966; box-shadow: none; animation: none; }
.lab .ph { margin-top: 2px; font: 400 12px/1.4 var(--mono); display: inline-block; }
.envs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, .72fr); gap: 12px; margin-top: 22px; }
.env, .feed { min-width: 0; padding: 14px 16px 16px; background: linear-gradient(180deg, var(--metal-hi), var(--metal) 14%, #141c22); border: 1px solid var(--metal-hi); border-radius: 3px; }
.env h3, .feed h3 { display: flex; align-items: center; gap: 9px; font: 600 22px/1.1 var(--display); letter-spacing: .03em; text-transform: uppercase; }
.env .lab-led:nth-child(1) { animation-delay: calc(var(--i, 0) * -.7s); }
.envs li:nth-child(2) { --i: 1; } .envs li:nth-child(3) { --i: 2; } .envs li:nth-child(4) { --i: 3; }
.stack { display: flex; gap: 10px; margin-top: 10px; }
.stack img { display: block; width: 22px; height: 22px; }
.hw { margin-top: 4px; font: 400 12px/1.4 var(--mono); color: var(--muted); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(58px, 1fr)); gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .08); }
.stats dt { font: 400 10px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.stats dd { margin-top: 4px; font: 600 34px/1 var(--display); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.stats dd small { margin-left: 3px; font: 400 12px/1 var(--mono); color: var(--muted); }
/* A small label over a row of figures, with the divider moved above it. */
.tag { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .08); font: 400 10px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.tag + .stats { margin-top: 8px; padding-top: 0; border-top: 0; }
.specs { grid-template-columns: repeat(auto-fit, minmax(0, max-content)); justify-content: space-between; gap: 10px 16px; }
.specs dd { font-size: 26px; }
.tag + .gpus { margin-top: 10px; }
/* Cluster tiles: each figure takes its own width, so a long one cannot run into the next. */
.env .stats { grid-template-columns: repeat(auto-fit, minmax(0, max-content)); justify-content: space-between; gap: 10px 14px; }
.env .stats dd { font-size: 30px; }
.stats dd.model { font-size: 22px; line-height: 1.15; white-space: normal; }
.lab-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.feed .hw { min-height: 0; }
.spark { display: block; width: 100%; height: 56px; margin-top: 14px; }
.spark-line { fill: none; stroke: var(--cold); stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.spark-fill { fill: rgba(143, 214, 255, .12); stroke: none; }
.axis { display: flex; justify-content: space-between; margin-top: 4px; font: 400 10px/1 var(--mono); color: var(--muted); }
.gpus { display: grid; gap: 12px; margin-top: 14px; }
.gpus li { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 12px; }
.gpus b { font: 400 11px/1 var(--mono); color: var(--muted); }
.bar { height: 10px; background: #05080a; border: 1px solid #2a3843; }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, #2bd97c, var(--cold)); box-shadow: 0 0 8px rgba(143, 214, 255, .45); transition: width .8s; }
.g-figs { grid-column: 2; font: 400 12px/1.2 var(--mono); color: var(--ink); }
/* Hardware still reads without the live figures: no script, no file, or too old. */
html:not(.js) .lab :is(.stats:not(.specs), .spark, .axis, .tag-live, .gpus, .lab-stamp),
.lab:not(.loaded) :is(.stats:not(.specs), .spark, .axis, .tag-live, .gpus),
.lab.offline :is(.stats:not(.specs), .spark, .axis, .tag-live, .gpus) { display: none; }

.turnstile:not(:empty) { margin-block: 0.75rem; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
form { display: grid; gap: 14px; margin-top: 22px; justify-items: start; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; width: 100%; }
label { display: grid; gap: 6px; width: 100%; font: 400 12px/1.3 var(--mono); color: var(--muted); }
input, select, textarea { width: 100%; padding: 10px 12px; font: 400 16px/1.4 var(--body); color: var(--ink); background: rgba(0, 0, 0, .42); border: 1px solid rgba(255, 255, 255, .2); border-radius: 0; }
select option { color: #111; background: #fff; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); outline: 1px solid var(--accent); }
.form-status { min-height: 1.4em; font-size: 14px; color: var(--accent); }

.foot { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 22px 6vw 88px; font: 400 12px/1.4 var(--mono); color: var(--muted); background: rgba(5, 8, 10, .82); }

@media (max-width: 860px) {
  body { font-size: 16px; }
  html { scroll-padding-top: 66px; }
  .topbar { height: 56px; padding: 0 16px; gap: 12px; justify-content: space-between; }
  .topbar nav, .vents { display: none; }
  .backdrop { background: rgba(4, 9, 13, .4); }
  .hero { padding: 90px 16px 40px; }
  .stop { min-height: 0; padding: 40px 16px; }
  .panel { padding: 22px 18px; }
  .bezel { grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; padding: 10px 12px; }
  .rack { grid-template-columns: 10px 1fr 10px; padding: 6px 3px; }
  .rail { background-image: linear-gradient(90deg, #232f38, #303e49 45%, #1c262e); }
  .row { grid-template-columns: 1fr; }
  .patch { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 18px 30px; gap: 18px 10px; }
  .patch::before { left: 2px; }
  .patch::after { right: 2px; }
  .foot { padding-bottom: 24px; }
  .envs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .env, .feed { padding: 12px 12px 14px; }
  .stats dd { font-size: 28px; }
  .lab-row { grid-template-columns: 1fr; gap: 10px; }
  .specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .envs { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* In print: no scene and no chrome. */
@media print {
  @page { margin: 13mm 15mm; }
  :root { --ink: #111; --muted: #444; --accent: #111; --line: #bbb; }
  html, body { background: #fff; color: #111; font-size: 10pt; line-height: 1.4; }
  *, *::before, *::after { transition: none !important; animation: none !important; box-shadow: none !important; }
  #scene, .backdrop, .topbar, .skip, .scroll-cue, .hero-actions, .leds, .vents, .rail, .blank, #lab, #contact, .foot { display: none !important; }
  .hero, .stop { min-height: 0; padding: 0; margin: 0 0 9pt; display: block; }
  .hero h1 br { display: none; }
  h1, .brand { color: #111; background: none; filter: none; }
  h1 { font-size: 34pt; margin: 4pt 0; }
  h2 { font-size: 18pt; margin: 2pt 0 6pt; }
  .lede { font-size: 12pt; }
  .panel, .panel-wide, .panel-patch { width: auto; padding: 0; border: 0; background: none; backdrop-filter: none; }
  .rack { display: block; padding: 0; border: 0; background: none; }
  .units { display: block; background: none; padding: 0; gap: 0; }
  .server { min-height: 0; background: none; margin-bottom: 6pt; break-inside: avoid; }
  .bezel { display: block; min-height: 0; padding: 0; background: none; color: #111; }
  .id b { font-size: 13pt; }
  .patch { background: none; border: 0; padding: 0; gap: 8pt; }
  .patch::before, .patch::after, .patch b::before, .patch b::after { display: none; }
  .patch li { text-align: left; break-inside: avoid; }
  .patch b { justify-items: start; font-size: 10pt; }
  .patch span { color: #444; font-size: 9pt; }
  .ph { color: #111; border: 0; }
}