:root {
  color-scheme: dark; --bg:#0b0f19; --panel:#101725; --raised:#151f30; --line:#27374e;
  --text:#deebf3; --muted:#8196ad; --cyan:#35d7e5; --green:#49dfa0; --amber:#ffbd59;
  --pink:#ff6694; --mono:"Roboto Mono","Fira Code","Cascadia Mono",Consolas,monospace;
}
* { box-sizing:border-box; } html,body { background:var(--bg); margin:0; min-height:100%; }
body { color:var(--text); font:14px Inter,"Segoe UI",Arial,sans-serif; }
.instrument { display:grid; grid-template-rows:auto minmax(0,1fr) 2rem; min-height:100vh; }
.topbar { align-items:center; background:#080d16; border-bottom:1px solid var(--line); display:grid; gap:1rem; grid-template-columns:minmax(26rem,1fr) minmax(30rem,.9fr) auto; padding:.8rem 1rem; }
.brand p { color:var(--cyan); font:.62rem var(--mono); letter-spacing:.2em; margin:0 0 .3rem; }
.brand h1 { color:#f6fbff; font:600 clamp(1.3rem,2vw,1.75rem) var(--mono); letter-spacing:.13em; margin:0; }
.brand span { color:var(--muted); display:block; font:.59rem var(--mono); letter-spacing:.13em; margin-top:.32rem; }
.health { display:grid; gap:1px; grid-template-columns:repeat(4,1fr); margin:0; }
.health div,.metrics article { background:var(--panel); border:1px solid var(--line); padding:.55rem .64rem; }
.health dt,.metrics h2 { color:var(--muted); font:.58rem var(--mono); letter-spacing:.15em; margin-bottom:.3rem; }
.health dd { align-items:center; display:flex; font:.78rem var(--mono); gap:.4rem; margin:0; }
#engine-light { background:var(--muted); border-radius:50%; height:.5rem; width:.5rem; }
#engine-light.online { background:var(--green); box-shadow:0 0 9px var(--green); }
#engine-light.busy { background:var(--amber); } #engine-light.failed { background:var(--pink); }
nav { display:flex; gap:.4rem; } button { background:var(--raised); border:1px solid var(--line); color:var(--text); cursor:pointer; font:700 .65rem var(--mono); height:2.4rem; letter-spacing:.1em; padding:0 .7rem; }
button.on,button:hover { border-color:var(--cyan); color:var(--cyan); }
.layout { display:grid; gap:1px; grid-template-columns:19.5rem minmax(46rem,1fr) 22rem; min-height:0; }
.panel { background:var(--panel); border:1px solid var(--line); min-width:0; }
.panel header { align-items:center; background:rgba(21,31,48,.76); border-bottom:1px solid var(--line); display:flex; justify-content:space-between; min-height:2.6rem; padding:.6rem .72rem; }
.panel h2 { color:#f5fbff; font:600 .66rem var(--mono); letter-spacing:.13em; margin:0; }
.panel header span { color:var(--muted); font:.56rem var(--mono); letter-spacing:.1em; }
.controls { background:#080d16; border-left:0; overflow:auto; }
fieldset { border:0; border-bottom:1px solid var(--line); margin:0; padding:.76rem; }
legend { color:var(--cyan); font:600 .59rem var(--mono); letter-spacing:.17em; padding:0; }
label { color:var(--muted); display:grid; font:.61rem var(--mono); gap:.35rem; letter-spacing:.07em; margin-top:.72rem; }
output { color:var(--amber); float:right; }
select {
  background:var(--panel); border:1px solid var(--line); color:var(--text);
  font:.65rem var(--mono); height:2rem; outline:none; padding:0 .42rem; width:100%;
}
select:focus { border-color:var(--accent); }
input[type=range] { appearance:none; background:var(--line); height:2px; width:100%; }
input[type=range]::-webkit-slider-thumb { appearance:none; background:var(--cyan); height:.8rem; width:.42rem; }
input[type=range]::-moz-range-thumb { background:var(--cyan); border:0; border-radius:0; height:.8rem; width:.42rem; }
.science { display:grid; gap:1px; grid-template-rows:auto minmax(36rem,1fr) minmax(11rem,.32fr); min-height:0; }
.metrics { background:#080d16; display:grid; gap:1px; grid-template-columns:repeat(5,1fr); }
.metrics strong { color:var(--cyan); display:block; font:500 clamp(.82rem,1vw,1.02rem) var(--mono); }
.metrics span { color:var(--muted); display:block; font:.56rem var(--mono); letter-spacing:.1em; margin-top:.2rem; }
.heatmaps { display:grid; gap:1px; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(0,1fr)); min-height:0; }
.view { display:grid; grid-template-rows:auto minmax(0,1fr); min-height:0; }
canvas { contain:strict; display:block; height:100%; min-height:0; width:100%; }
.history { display:grid; grid-template-rows:auto minmax(0,1fr); min-height:0; }
.right { display:grid; gap:1px; grid-template-rows:auto auto minmax(12rem,1fr); min-height:0; }
.right .panel { border-right:0; }
table { border-collapse:collapse; font:.61rem var(--mono); width:100%; }
th { color:var(--muted); font-weight:500; text-align:left; } th,td { border-bottom:1px solid rgba(39,55,78,.65); padding:.44rem .62rem; }
td:last-child { color:var(--amber); text-align:right; }
.equations p { color:var(--muted); font:.65rem/1.65 var(--mono); margin:.5rem .7rem; }
.events { display:grid; grid-template-rows:auto minmax(0,1fr); min-height:0; }
.events ol { color:var(--muted); font:.61rem/1.7 var(--mono); list-style:none; margin:0; overflow:auto; padding:.55rem .7rem; }
.events li { border-bottom:1px solid rgba(39,55,78,.55); padding:.27rem 0; } .events li::before { color:var(--green); content:"> "; }
footer { align-items:center; background:#080d16; border-top:1px solid var(--line); color:var(--muted); display:flex; font:.58rem var(--mono); justify-content:space-between; letter-spacing:.15em; padding:0 .8rem; }
footer span { color:var(--cyan); }
@media (max-width:1360px) { .topbar { grid-template-columns:1fr 1fr; } nav { grid-column:1/-1; } .layout { grid-template-columns:19rem 1fr; } .right { grid-column:1/-1; grid-template-columns:repeat(3,1fr); grid-template-rows:18rem; } }
@media (max-width:950px) { .topbar,.layout,.right { display:block; } .health,.metrics,.heatmaps { grid-template-columns:repeat(2,1fr); margin-top:.7rem; } .view canvas { height:19rem; } }

:root { --accent:#ae80ff; --accent-rgb:174,128,255; --console-black:#050811; }
body { background:var(--console-black); font-family:var(--mono); letter-spacing:.008em; }
body::before {
  background:repeating-linear-gradient(0deg, rgba(168,210,229,.024) 0, rgba(168,210,229,.024) 1px, transparent 1px, transparent 4px);
  content:""; inset:0; mix-blend-mode:screen; opacity:.45; pointer-events:none; position:fixed; z-index:90;
}
.instrument {
  background:
    radial-gradient(circle at 60% 11%, rgba(var(--accent-rgb),.13), transparent 29rem),
    radial-gradient(circle at 88% 77%, rgba(53,215,229,.06), transparent 31rem),
    linear-gradient(90deg, rgba(var(--accent-rgb),.035) 1px, transparent 1px) 0 0/54px 54px,
    linear-gradient(rgba(var(--accent-rgb),.026) 1px, transparent 1px) 0 0/54px 54px,
    var(--console-black);
  isolation:isolate; position:relative;
}
.instrument::after {
  background:linear-gradient(90deg,var(--accent),transparent 22%) left top/19rem 1px no-repeat, linear-gradient(270deg,var(--cyan),transparent 22%) right top/19rem 1px no-repeat;
  content:""; inset:0; opacity:.68; pointer-events:none; position:absolute; z-index:5;
}
.topbar {
  background:linear-gradient(90deg,rgba(var(--accent-rgb),.08),transparent 31%),rgba(5,8,17,.98);
  box-shadow:inset 0 -1px 0 rgba(var(--accent-rgb),.15),0 10px 30px rgba(0,0,0,.34);
  padding-top:1.62rem; position:relative;
}
.topbar::before {
  color:var(--muted); content:"AWL // AOT RELEASE // ESO CIAO1 CLOSED LOOP // MODEL MODE: USER CONTROLLED";
  font:.55rem var(--mono); left:1rem; letter-spacing:.22em; position:absolute; top:.48rem;
}
.brand { border-left:2px solid var(--accent); padding-left:.9rem; }
.brand p { color:var(--accent); }
.brand h1 { text-shadow:0 0 23px rgba(var(--accent-rgb),.16); }
.health div {
  background:linear-gradient(145deg,rgba(21,31,48,.91),rgba(7,11,20,.95));
  box-shadow:inset 0 1px 0 rgba(205,222,235,.045); position:relative;
}
.health div::after {
  background:var(--accent); bottom:0; content:""; height:1px; left:.62rem; opacity:.62; position:absolute; width:1.1rem;
}
button {
  background:linear-gradient(180deg,rgba(28,40,59,.97),rgba(9,14,24,.98));
  box-shadow:inset 0 1px 0 rgba(210,230,238,.07);
}
button.on,button:hover { border-color:var(--accent); box-shadow:0 0 18px rgba(var(--accent-rgb),.14),inset 0 1px 0 rgba(230,240,246,.08); color:var(--accent); }
.panel {
  background:linear-gradient(150deg,rgba(18,27,43,.98),rgba(7,11,20,.98));
  box-shadow:inset 0 1px 0 rgba(185,210,224,.035),0 10px 25px rgba(0,0,0,.38);
  overflow:hidden; position:relative;
}
.panel::before {
  background:linear-gradient(90deg,var(--accent),transparent 4.5rem); content:""; height:1px; left:0; opacity:.8; position:absolute; top:0; width:7.5rem; z-index:1;
}
.panel header { background:linear-gradient(90deg,rgba(var(--accent-rgb),.075),transparent 43%),rgba(12,19,32,.9); }
.controls {
  background:linear-gradient(rgba(var(--accent-rgb),.026) 1px,transparent 1px) 0 0/100% 2.62rem,#060a13;
  scrollbar-color:var(--line) var(--console-black); scrollbar-width:thin;
}
fieldset { background:linear-gradient(100deg,rgba(var(--accent-rgb),.025),transparent 49%); }
legend {
  background:rgba(var(--accent-rgb),.1); border-left:2px solid var(--accent); color:var(--accent); padding:.18rem .4rem;
}
.dataset {
  background:linear-gradient(105deg,rgba(53,215,229,.10),transparent 67%),rgba(7,12,22,.92);
}
.dataset legend { border-left-color:var(--cyan); color:var(--cyan); }
.dataset-note {
  border-top:1px solid rgba(53,215,229,.18); color:var(--muted); font:.58rem/1.55 var(--mono);
  letter-spacing:.05em; margin:.75rem 0 0; padding-top:.62rem;
}

.sampling-boundary {
  color: #f4bf75;
  line-height: 1.45;
}

.evidence p {
  margin: 0;
  padding: 10px 12px 0;
  color: #b9c8d8;
  font-size: 11px;
  line-height: 1.5;
}

.evidence strong { color: #eef7ff; }

.evidence img {
  display: block;
  width: calc(100% - 24px);
  height: auto;
  margin: 12px;
  border: 1px solid rgba(81, 109, 143, .35);
}

.evidence .evidence-links { padding-bottom: 12px; }
.evidence a { color: #35d7e5; }
.toggle { align-items:center; display:flex; justify-content:space-between; }
.toggle output { color:var(--cyan); margin-left:auto; margin-right:.5rem; }
input[type=checkbox] { accent-color:var(--cyan); height:1rem; width:1rem; }
.model-controls {
  border-top:1px solid rgba(255,189,89,.23); transition:filter .14s ease,opacity .14s ease;
}
.model-controls.inactive { filter:saturate(.42); opacity:.47; }
.model-controls legend { border-left-color:var(--amber); color:var(--amber); }
input[type=range] { background:linear-gradient(90deg,rgba(var(--accent-rgb),.5),var(--line) 35%); }
input[type=range]::-webkit-slider-thumb { background:var(--accent); }
input[type=range]::-moz-range-thumb { background:var(--accent); }
.metrics { counter-reset:ao-metric; }
.metrics article {
  background:linear-gradient(135deg,rgba(var(--accent-rgb),.08),transparent 46%),linear-gradient(180deg,rgba(17,25,40,.98),rgba(8,12,21,.98));
  min-height:5.08rem; overflow:hidden; padding-left:.94rem; position:relative;
}
.metrics article::before {
  color:rgba(129,150,173,.13); content:"0" counter(ao-metric); counter-increment:ao-metric;
  font:700 2.24rem var(--mono); letter-spacing:-.08em; position:absolute; right:.5rem; top:.22rem;
}
.metrics article::after {
  background:linear-gradient(90deg,var(--accent),transparent); bottom:0; content:""; height:2px; left:0; position:absolute; width:54%;
}
.metrics strong { color:#c59fff; position:relative; text-shadow:0 0 13px rgba(var(--accent-rgb),.3); z-index:1; }
.view canvas,.history canvas {
  background:radial-gradient(circle at center,rgba(var(--accent-rgb),.03),transparent 70%);
  filter:contrast(1.05) saturate(1.13);
}
.view::after {
  border:1px solid rgba(var(--accent-rgb),.16); content:""; inset:3.05rem .6rem .55rem; pointer-events:none; position:absolute;
}
.events li::before { color:var(--accent); content:"[AO] "; }
footer {
  background:linear-gradient(90deg,rgba(var(--accent-rgb),.09),transparent 25%),var(--console-black);
  box-shadow:0 -8px 22px rgba(0,0,0,.26);
}
footer span { color:var(--accent); text-shadow:0 0 12px rgba(var(--accent-rgb),.38); }
@media (max-width:950px) { .topbar { padding-top:1.95rem; } }