:root {
  --ink: #f1f4ed;
  --muted: #929a8f;
  --bg: #070a08;
  --panel: #0d110e;
  --line: #252b26;
  --green: #76b900;
  --acid: #b7ff38;
  --warn: #ffb548;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
.topbar { height: 72px; padding: 0 4vw; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 10; background: rgba(7,10,8,.9); backdrop-filter: blur(14px); }
.brand { display: flex; gap: 12px; align-items: center; color: var(--ink); text-decoration: none; font-size: 12px; font-weight: 800; line-height: 1.05; letter-spacing: .14em; }
.brand small { color: var(--muted); font-size: 8px; }
.brand-mark { width: 34px; height: 34px; background: var(--green); color: #081000; display: grid; place-items: center; font-size: 20px; font-weight: 900; transform: skew(-8deg); }
nav { display: flex; gap: 30px; }
nav a { color: var(--muted); text-decoration: none; font-size: 12px; }
nav a:hover { color: var(--acid); }
.system-status { color: var(--muted); font: 10px ui-monospace, monospace; display: flex; align-items: center; gap: 8px; }
.system-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px var(--green); }
main { width: min(1600px, 94vw); margin: auto; }
.hero { min-height: 340px; padding: 70px 1vw 55px; display: grid; grid-template-columns: 1.5fr .8fr; gap: 8vw; align-items: end; }
.eyebrow, .step { color: var(--green); font: 600 10px ui-monospace, monospace; letter-spacing: .18em; }
h1 { font-size: clamp(50px, 6.4vw, 100px); line-height: .88; letter-spacing: -.065em; margin: 18px 0 0; }
h1 em { font-style: normal; color: transparent; -webkit-text-stroke: 1px #838b80; }
.hero-copy { color: #b8bfb5; line-height: 1.8; font-size: 15px; max-width: 520px; border-left: 1px solid var(--green); padding-left: 25px; }
.release-strip { display: grid; grid-template-columns: repeat(4,1fr); border: 1px solid var(--line); margin: 0 0 24px; background: var(--panel); }
.release-strip article { min-height: 112px; padding: 20px; border-right: 1px solid var(--line); }
.release-strip article:last-child { border-right: 0; }
.release-strip span { display: block; color: var(--green); font: 9px ui-monospace, monospace; letter-spacing: .12em; }
.release-strip strong { display: block; margin: 12px 0 7px; font-size: 15px; }
.release-strip small { color: var(--muted); font-size: 10px; line-height: 1.5; }
.release-strip .boundary { background: rgba(255,181,72,.045); }
.release-strip .boundary span { color: var(--warn); }
.workspace { display: grid; grid-template-columns: minmax(280px, .9fr) minmax(430px, 1.6fr) minmax(280px, .85fr); border: 1px solid var(--line); }
.panel { background: var(--panel); min-width: 0; }
.panel + .panel { border-left: 1px solid var(--line); }
.composer, .dataset { padding: 24px; }
.world { padding: 24px; background: #0a0d0b; }
.panel-head { min-height: 55px; display: flex; justify-content: space-between; align-items: flex-start; gap: 15px; margin-bottom: 20px; }
.panel-head p { margin: 0 0 7px; }
h2 { margin: 0; font-size: 22px; letter-spacing: -.035em; }
.icon-button { border: 1px solid var(--line); background: transparent; width: 36px; height: 36px; cursor: pointer; }
.presets, .mode-tabs { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); margin-bottom: 20px; }
.presets button, .mode-tabs button { border: 0; border-right: 1px solid var(--line); padding: 10px 5px; background: #090c0a; color: var(--muted); cursor: pointer; font-size: 11px; }
.presets button:last-child, .mode-tabs button:last-child { border: 0; }
.presets button.active, .mode-tabs button.active { background: var(--green); color: #071000; font-weight: 800; }
form label, .nim-config label { display: block; color: #aab1a7; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 12px; }
input, textarea, select { width: 100%; margin-top: 6px; border: 1px solid var(--line); background: #080b09; color: var(--ink); padding: 10px 11px; outline: none; resize: vertical; border-radius: 0; }
input:focus, textarea:focus, select:focus { border-color: var(--green); box-shadow: 0 0 0 1px rgba(118,185,0,.2); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.primary, .secondary { width: 100%; min-height: 44px; border: 0; cursor: pointer; font-weight: 800; font-size: 11px; letter-spacing: .08em; }
.primary { background: var(--green); color: #071000; display: flex; justify-content: center; align-items: center; gap: 20px; }
.primary b { font: 10px ui-monospace, monospace; opacity: .6; }
.primary:disabled { opacity: .28; cursor: not-allowed; }
.secondary { background: transparent; border: 1px solid var(--line); margin-top: 8px; }
.form-error { color: #ffbd6e; background: rgba(255,181,72,.08); border-left: 2px solid var(--warn); padding: 10px; font-size: 11px; margin-bottom: 12px; line-height: 1.5; }
.model-pill, #queue-count { font: 9px ui-monospace, monospace; padding: 6px 8px; border: 1px solid #33402e; color: var(--acid); white-space: nowrap; }
.viewport { height: 450px; position: relative; overflow: hidden; background: radial-gradient(circle at 60% 25%, #445329 0, #182011 20%, #080b08 65%); border: 1px solid #283124; perspective: 800px; }
.scanlines { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: .13; background: repeating-linear-gradient(0deg, transparent 0 3px, #b6ff7f 4px); }
.warehouse-scene { position: absolute; inset: 0; overflow: hidden; }
.warehouse-scene:after { content: ""; position: absolute; left: 18%; right: 18%; bottom: -15%; height: 65%; background: linear-gradient(120deg, #232a20, #0e120e); transform: perspective(300px) rotateX(35deg); border: 1px solid #3e4938; }
.shelf { position: absolute; width: 24%; height: 72%; top: 15%; z-index: 2; background: repeating-linear-gradient(0deg, #151b14 0 18%, #5f6d56 19% 20%), repeating-linear-gradient(90deg, transparent 0 28%, #4b5644 29% 32%); border: 2px solid #5b6753; box-shadow: 0 15px 40px #000; }
.shelf:after { content: ""; position: absolute; inset: 5% 10%; background: repeating-linear-gradient(0deg, transparent 0 21%, rgba(118,185,0,.35) 22% 26%); }
.shelf-a { left: -3%; transform: skewY(3deg); }
.shelf-b { right: -3%; transform: skewY(-3deg); }
.floor-line { position: absolute; bottom: -10%; width: 2px; height: 65%; background: var(--green); opacity: .45; z-index: 3; transform-origin: bottom; }
.floor-line.one { left: 38%; transform: rotate(13deg); }.floor-line.two { right: 38%; transform: rotate(-13deg); }
.robot { width: 74px; height: 58px; position: absolute; bottom: 18%; left: 43%; z-index: 5; background: #9bad86; border: 3px solid #dce8d2; clip-path: polygon(10% 0,85% 0,100% 70%,80% 100%,10% 100%,0 65%); box-shadow: 0 0 28px rgba(183,255,56,.2); }
.robot i { position: absolute; width: 26px; height: 12px; background: #111; left: 24px; top: 9px; border: 2px solid var(--green); }
.robot span { position: absolute; width: 6px; height: 34px; background: #708060; left: 35px; bottom: 100%; }
.human { position: absolute; right: 30%; bottom: 25%; z-index: 5; width: 18px; height: 55px; background: #bd6c3c; clip-path: polygon(30% 0,70% 0,100% 45%,75% 100%,25% 100%,0 45%); }
.human i { position: absolute; width: 15px; height: 15px; border-radius: 50%; background: #c4a189; top: -14px; left: 2px; }
.hazard-zone { position: absolute; width: 110px; height: 60px; border: 1px solid var(--warn); right: 24%; bottom: 17%; z-index: 4; transform: skewX(-20deg); animation: pulse 2s infinite; }
.view-hud { position: absolute; left: 15px; right: 15px; z-index: 6; display: flex; justify-content: space-between; font: 9px ui-monospace, monospace; color: #d6dfcf; }
.hud-top { top: 14px; }.hud-bottom { bottom: 12px; }.hud-bottom i { display: inline-block; width: 6px; height: 6px; background: var(--green); border-radius: 50%; margin-right: 5px; }
.play { position: absolute; z-index: 7; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 58px; height: 58px; border-radius: 50%; border: 1px solid rgba(255,255,255,.5); background: rgba(5,8,6,.62); backdrop-filter: blur(8px); cursor: pointer; }
.playing .robot { animation: robotMove 3s ease-in-out infinite alternate; }
.playing .human { animation: humanMove 2.4s ease-in-out infinite alternate; }
.risk-strip { display: grid; grid-template-columns: 90px 1fr auto; gap: 15px; align-items: center; margin: 18px 0; }
.risk-strip span { color: var(--muted); font-size: 9px; display: block; }.risk-strip strong { font-size: 24px; }
.risk-bar { height: 4px; background: #222a21; }.risk-bar i { display: block; height: 100%; background: linear-gradient(90deg,var(--green),var(--warn)); transition: width .4s; }
.risk-strip p { color: var(--muted); font: 9px ui-monospace, monospace; }
.prompt-block { border: 1px solid var(--line); background: #080b09; }
.prompt-head { border-bottom: 1px solid var(--line); padding: 8px 12px; display: flex; justify-content: space-between; color: var(--green); font: 9px ui-monospace, monospace; }
.prompt-head button { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 9px; }
.prompt-block p { margin: 0; padding: 14px; color: #aab2a7; font: 10px/1.7 ui-monospace, monospace; max-height: 105px; overflow: auto; }
.mode-tabs { grid-template-columns: 1fr 1fr; }
.nim-config { padding: 12px; border: 1px solid var(--line); margin-bottom: 12px; }
.nim-health { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; font: 9px ui-monospace, monospace; }
.nim-health span { display: flex; align-items: center; gap: 7px; }.nim-health i { width: 7px; height: 7px; background: #596157; border-radius: 50%; display: inline-block; }.nim-health i.ready { background: var(--green); box-shadow: 0 0 8px var(--green); }.nim-health i.failed { background: #ff675f; }
.nim-health button { border: 1px solid var(--line); background: transparent; color: var(--muted); padding: 6px 9px; cursor: pointer; font-size: 9px; }
.retry-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.empty-queue { height: 300px; display: grid; place-content: center; text-align: center; color: var(--muted); }
.empty-queue span { color: #394136; font-size: 54px; }.empty-queue p { margin: 8px 0 3px; color: #c4cbc1; }.empty-queue small { font-size: 10px; }
.queue { height: 300px; overflow: auto; border-top: 1px solid var(--line); }
.queue-item { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); padding: 12px 5px; }
.queue-index { color: #596157; font: 10px ui-monospace, monospace; }.queue-item strong { display: block; font-size: 11px; }.queue-item small { color: var(--muted); font: 8px ui-monospace, monospace; }.queue-item b { font: 8px ui-monospace, monospace; color: var(--muted); }
.queue-item.running b { color: var(--warn); }.queue-item.complete b, .queue-item.succeeded b { color: var(--green); }.queue-item.failed b { color: #ff675f; }
.queue-item.retrying b { color: var(--warn); }.queue-item { cursor: default; }.queue-item.complete, .queue-item.succeeded, .queue-item.failed { cursor: pointer; }.queue-item em { display: block; color: #6e766c; font: 8px ui-monospace, monospace; font-style: normal; margin-top: 3px; }
.result-player { border: 1px solid var(--line); margin-top: 14px; background: #050705; }.result-head { display: flex; justify-content: space-between; padding: 8px 10px; border-bottom: 1px solid var(--line); font: 8px ui-monospace, monospace; color: var(--green); }.result-head a { color: var(--muted); text-decoration: none; }.result-player video { width: 100%; display: block; max-height: 230px; background: #000; }
.dataset-actions { margin-top: 18px; }
.privacy-note { color: #60675f; font-size: 9px; line-height: 1.5; }
.architecture { padding: 90px 1vw; }
.analysis-lab { margin-top: 40px; border: 1px solid var(--line); display: grid; grid-template-columns: .75fr 1.6fr; background: var(--panel); }
.analysis-copy { padding: 34px; border-right: 1px solid var(--line); }.analysis-copy h2 { font-size: clamp(28px,3vw,46px); line-height: 1.05; max-width: 520px; }.analysis-copy > p:last-child { color: var(--muted); line-height: 1.7; font-size: 12px; max-width: 480px; }
.reason-panel { padding: 24px; }.reason-config { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end; }.reason-config label { color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }.reason-config input { margin-top: 6px; }.reason-config .auto-evaluate { display: flex; align-items: center; gap: 8px; height: 42px; white-space: nowrap; }.auto-evaluate input { width: auto; margin: 0; accent-color: var(--green); }
.reason-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0; }.reason-actions .secondary { margin: 0; }
.isaac-runner { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 10px; align-items: end; margin: 16px 0; padding: 14px; border: 1px solid var(--line); }.isaac-runner label { color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }.isaac-runner .secondary { margin: 0; }
.isaac-result { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-bottom: 16px; }.isaac-result article { background: #090c0a; padding: 12px; }.isaac-result span { color: var(--muted); display: block; font: 8px ui-monospace, monospace; }.isaac-result strong { display: block; margin-top: 6px; font-size: 18px; }.isaac-result .passed strong { color: var(--green); }.isaac-result .failed strong { color: #ff675f; }
.ranking-empty { border: 1px dashed #30362f; color: #697066; min-height: 170px; display: grid; place-items: center; text-align: center; font-size: 11px; }
.ranking { border-top: 1px solid var(--line); }.rank-row { display: grid; grid-template-columns: 36px 1fr 66px; gap: 12px; padding: 14px 5px; border-bottom: 1px solid var(--line); align-items: center; }.rank-row > b { color: var(--green); font: 12px ui-monospace, monospace; }.rank-row h3 { margin: 0 0 7px; font-size: 13px; }.score-grid { display: grid; grid-template-columns: repeat(4, minmax(70px,1fr)); gap: 7px; }.score-grid span { color: var(--muted); font: 8px ui-monospace, monospace; }.score-grid strong { color: var(--ink); display: block; font-size: 13px; margin-top: 2px; }.rank-reason { color: #777f75; font-size: 9px; line-height: 1.5; margin: 8px 0 0; }.priority { width: 58px; height: 58px; border-radius: 50%; border: 1px solid var(--green); display: grid; place-items: center; text-align: center; color: var(--acid); font: 17px ui-monospace, monospace; }.priority small { display: block; font-size: 6px; color: var(--muted); }
.flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; gap: 20px; align-items: center; margin-top: 25px; }
.flow article { border-top: 1px solid var(--line); padding-top: 18px; }.flow b { color: var(--green); font: 10px ui-monospace, monospace; display: block; margin-bottom: 25px; }.flow span { font-size: 17px; display: block; }.flow small { color: var(--muted); }.flow > i { color: #465043; }
footer { border-top: 1px solid var(--line); padding: 25px 4vw; display: flex; justify-content: space-between; color: #697066; font: 9px ui-monospace, monospace; }
@keyframes pulse { 50% { opacity: .3; } }
@keyframes robotMove { to { transform: translate(80px,-25px) scale(.85); } }
@keyframes humanMove { to { transform: translate(-55px,8px); } }
@media (max-width: 1100px) {
  .release-strip { grid-template-columns: 1fr 1fr; }.release-strip article:nth-child(2) { border-right: 0; }.release-strip article:nth-child(-n+2) { border-bottom: 1px solid var(--line); }.workspace { grid-template-columns: 1fr 1.5fr; }.dataset { grid-column: 1 / -1; border-left: 0 !important; border-top: 1px solid var(--line); }.queue, .empty-queue { height: 220px; }
}
@media (max-width: 720px) {
  nav { display: none; }.system-status span { display: none; }.hero { grid-template-columns: 1fr; min-height: 420px; }.release-strip { grid-template-columns: 1fr; }.release-strip article { border-right: 0; border-bottom: 1px solid var(--line); }.release-strip article:last-child { border-bottom: 0; }.workspace { display: block; }.panel + .panel { border-left: 0; border-top: 1px solid var(--line); }.viewport { height: 390px; }.risk-strip { grid-template-columns: 80px 1fr; }.risk-strip p { grid-column: 1 / -1; margin: 0; }.analysis-lab { display: block; }.analysis-copy { border-right: 0; border-bottom: 1px solid var(--line); }.reason-config, .isaac-runner { grid-template-columns: 1fr; }.isaac-result { grid-template-columns: 1fr 1fr; }.score-grid { grid-template-columns: 1fr 1fr; }.flow { grid-template-columns: 1fr; }.flow > i { transform: rotate(90deg); justify-self: center; }.architecture { padding: 60px 2vw; } footer { gap: 20px; }
}