:root {
  color-scheme: dark;
  --ink: #eaf6f2;
  --muted: #83a39b;
  --bg: #07100e;
  --panel: rgba(12, 29, 25, .88);
  --line: rgba(94, 255, 199, .18);
  --mint: #5effc7;
  --amber: #ffcc66;
  --red: #ff6f73;
}
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; overflow-x: hidden;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  color: var(--ink); background: radial-gradient(circle at 50% 35%, #14382e 0, var(--bg) 42%, #030706 100%);
}
.noise { position: fixed; inset: 0; pointer-events: none; opacity: .11; 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='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E"); }
main { width: min(1440px, 96vw); margin: auto; padding: 32px 24px 20px; position: relative; }
header { display: flex; align-items: flex-start; justify-content: space-between; gap: 30px; }
.eyebrow { color: var(--mint); letter-spacing: .18em; font-size: 11px; margin: 0 0 10px; }
h1 { margin: 0; font-family: Impact, Haettenschweiler, sans-serif; font-size: clamp(58px, 8vw, 108px); letter-spacing: .025em; line-height: .86; }
h1 span { color: transparent; -webkit-text-stroke: 1px var(--mint); text-shadow: 0 0 34px rgba(94,255,199,.2); }
.lede { color: var(--muted); max-width: 680px; font-size: 14px; }
.assurance { border: 1px solid var(--line); background: var(--panel); padding: 13px 17px; display: flex; gap: 12px; align-items: center; min-width: 190px; }
.assurance small { display: block; color: var(--amber); margin-top: 3px; }
.assurance.valid small { color: var(--mint); }
.pulse { width: 11px; height: 11px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 15px currentColor; animation: pulse 1.4s infinite; }
.valid .pulse { background: var(--mint); }
@keyframes pulse { 50% { opacity: .35; transform: scale(.75); } }
.telemetry { margin: 28px 0 8px; display: grid; grid-template-columns: 1.4fr .8fr 1fr .8fr; border: 1px solid var(--line); background: rgba(5,17,14,.72); }
.telemetry div { padding: 13px 16px; border-right: 1px solid var(--line); min-width: 0; }
.telemetry div:last-child { border: 0; }
.telemetry small { display: block; color: var(--muted); font-size: 9px; letter-spacing: .14em; }
.telemetry strong { display: block; margin-top: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
.safe { color: var(--mint); }
.publication-note { margin: 24px 0 8px; padding: 12px 16px; border: 1px solid rgba(255,204,102,.35); background: rgba(53,37,8,.42); display: flex; align-items: center; justify-content: space-between; gap: 18px; font-size: 10px; }
.publication-note strong { color: var(--amber); display: block; margin-bottom: 4px; letter-spacing: .12em; }
.publication-note span { color: #c7b98e; }
.publication-note nav { display: flex; gap: 9px; flex-shrink: 0; }
.publication-note a { border: 1px solid rgba(255,204,102,.55); color: var(--amber); padding: 8px 10px; text-decoration: none; white-space: nowrap; }
.publication-note a:hover { color: #07100e; background: var(--amber); }
.stage { height: 690px; position: relative; border: 1px solid var(--line); overflow: hidden; background: linear-gradient(rgba(94,255,199,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(94,255,199,.025) 1px, transparent 1px); background-size: 35px 35px; }
.links { position: absolute; inset: 0; width: 100%; height: 100%; }
.links path { fill: none; stroke: var(--mint); stroke-width: 2; stroke-dasharray: 7 11; opacity: 0; filter: drop-shadow(0 0 8px var(--mint)); }
.connected .links path { opacity: .7; animation: flow 1.2s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -36; } }
.silo { position: absolute; width: 290px; min-height: 230px; padding: 20px; border: 1px solid rgba(94,255,199,.23); border-radius: 50% / 16%; background: linear-gradient(180deg, rgba(22,53,44,.97), rgba(8,19,16,.97)); box-shadow: inset 0 0 35px rgba(94,255,199,.06), 0 18px 50px rgba(0,0,0,.35); transition: transform .5s, border-color .5s; }
.silo::before { content: ""; position: absolute; inset: -1px -1px auto; height: 35px; border: 1px solid rgba(94,255,199,.34); border-radius: 50%; background: #173d32; }
.silo:hover { transform: translateY(-4px); border-color: var(--mint); }
.silo.north { left: 4%; top: 5%; } .silo.south { right: 4%; top: 5%; }
.silo.east { left: 4%; bottom: 5%; } .silo.west { right: 4%; bottom: 5%; }
.silo h3 { position: relative; margin: 15px 0 2px; font-size: 16px; }
.silo .role { color: var(--muted); font-size: 10px; }
.silo ul { padding: 0; margin: 13px 0; list-style: none; font-size: 10px; color: #b8cec8; line-height: 1.5; }
.silo li::before { content: "› "; color: var(--mint); }
.readout { display: grid; grid-template-columns: 1fr auto; gap: 5px 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 10px; }
.readout span { color: var(--muted); } .readout b { color: var(--amber); }
.core { position: absolute; left: 50%; top: 50%; width: 205px; height: 205px; transform: translate(-50%,-50%); border-radius: 50%; border: 1px solid rgba(94,255,199,.35); background: #071410; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; box-shadow: 0 0 70px rgba(94,255,199,.08); z-index: 3; }
.core-ring { position: absolute; inset: 13px; border: 1px dashed rgba(94,255,199,.3); border-radius: 50%; animation: spin 18s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.core small { color: var(--muted); font-size: 9px; }.core strong { font-size: 18px; margin: 6px; color: var(--amber); }
.core button, footer button { position: relative; border: 1px solid var(--mint); color: var(--mint); background: rgba(94,255,199,.07); padding: 9px 12px; font: inherit; font-size: 10px; cursor: pointer; }
.core button:hover, footer button:hover { color: #05100d; background: var(--mint); }
.connected .core { box-shadow: 0 0 95px rgba(94,255,199,.3); }
.connected .core strong { color: var(--mint); }
.result-panel { margin-top: 12px; display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 12px; transition: opacity .5s, transform .5s; }
.result-panel.hidden { opacity: 0; transform: translateY(10px); pointer-events: none; height: 0; overflow: hidden; margin: 0; }
.verdict,.utility,.audit-card { border: 1px solid var(--line); background: var(--panel); padding: 20px; }
.verdict h2 { margin: 3px 0 10px; text-transform: uppercase; font-size: clamp(18px,3vw,30px); }
.verdict>p:last-child { color: var(--mint); }
.confidence { height: 5px; background: rgba(255,255,255,.08); }.confidence span { display: block; width: 0; height: 100%; background: var(--mint); box-shadow: 0 0 10px var(--mint); transition: width 1s; }
.equation { display: grid; grid-template-columns: 1fr auto auto 1fr auto; align-items: center; gap: 9px; }
.equation span { color: var(--muted); font-size: 10px; }.equation b { font-size: 28px; }.equation i { color: var(--mint); font-style: normal; }
.utility>p:last-child { color: var(--muted); font-size: 10px; line-height: 1.5; }
.audit-card ul { list-style: none; margin: 0; padding: 0; }.audit-card li { display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); padding: 8px 0; font-size: 9px; }.audit-card span { color: var(--muted); }.audit-card b { color: var(--mint); }
footer { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: 10px; padding: 15px 0; }
@media (max-width: 950px) {
  .publication-note { align-items: flex-start; flex-direction: column; }.publication-note nav { flex-wrap: wrap; }
  .telemetry { grid-template-columns: 1fr 1fr; }.telemetry div:nth-child(2) { border-right: 0; }
  .stage { height: auto; padding: 20px; }.links,.core { display:none; }.silos { display:grid; grid-template-columns:1fr 1fr; gap:12px; }.silo { position:relative!important; inset:auto!important; width:auto; min-height:220px; }
  .result-panel { grid-template-columns:1fr; }
}