/* ==========================================================================
   Hero console — a dark example console floating on the cream page.
   Markup: renderFrame() in js/hero-console.js (written into index.html).
   3D is CSS only: the figure holds the perspective, the panel turns, inner
   layers lift with translateZ. Only transform and opacity animate.
   ========================================================================== */

.hero{overflow-x:clip}

/* ---- Figure: perspective, glow, ground shadow --------------------------- */
.hero__visual,.ref-console{position:relative;margin:0;perspective:1800px;container-type:inline-size}
.hero__visual{width:min(calc(100% + var(--gutter) * .5),960px);justify-self:end;margin-right:calc(var(--gutter) * -.5)}
.hero__visual::before,.ref-console::before{content:'';position:absolute;inset:-12% -8%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,var(--gold-glow),transparent 72%)}
.hero__visual::after{content:'';position:absolute;left:10%;right:10%;bottom:28px;height:34px;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,var(--cx-ground),transparent);filter:blur(6px)}
.hero__visual-cap{margin-top:22px;text-align:right;font-family:var(--font-mono);font-size:10px;letter-spacing:var(--ls-mono);
  text-transform:uppercase;color:var(--muted)}

/* Everything inside is sized in em, and the em follows the panel width, so the
   console scales as one piece at real font sizes: sharp text at any size. */
.cx{position:relative;transform-style:preserve-3d;
  font-family:var(--font-body);font-size:11px;font-size:clamp(11px,calc(100cqw / 54),16px);line-height:1.3;color:var(--void-text);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  animation:cx-in 1.4s var(--e) 1.5s both}
@keyframes cx-in{from{opacity:0;transform:rotateY(-16deg)}to{opacity:1;transform:none}}
.cx *{box-sizing:border-box}
.cx b,.cx strong{color:inherit;font-weight:inherit}

.cx__panel{position:relative;transform-style:preserve-3d;
  transform:rotateY(calc(-12deg + var(--ry,0deg))) rotateX(calc(5deg + var(--rx,0deg)))}
.cx__screen{position:relative;display:flex;overflow:visible;flex-direction:column;transform-style:preserve-3d;
  background:linear-gradient(160deg,var(--void) 0%,var(--void-2) 100%);
  border:1px solid var(--cx-edge);border-radius:1.364em;box-shadow:inset 0 1px 0 var(--cx-glare),var(--cx-shadow)}
.cx__glare{position:absolute;inset:0;border-radius:1.364em;pointer-events:none;
  background:linear-gradient(115deg,var(--cx-glare) 0%,transparent 42%);transform:translateX(calc(var(--gx,0) * 1px))}
/* lit top edge: a thin gold line fading at both ends */
.cx__screen::before{content:'';position:absolute;left:12%;right:12%;top:-1px;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--gold-lit) 50%,transparent);opacity:.55}

/* ---- Title bar ----------------------------------------------------------- */
.cx__bar{display:flex;align-items:center;gap:1.091em;height:3.273em;padding:0 1.273em;flex:none;border-bottom:1px solid var(--void-line)}
.cx__dots{display:flex;gap:0.545em}
.cx__dots i{width:0.636em;height:0.636em;border-radius:50%;background:var(--cx-faint)}
.cx__path{font-family:var(--font-mono);font-size:1em;color:var(--cx-muted)}
.cx__path b{font-weight:400;color:var(--void-text)}
.cx__live{margin-left:auto;display:flex;align-items:center;gap:0.545em;font-size:0.909em;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ok)}
.cx__live i{width:0.545em;height:0.545em;border-radius:50%;background:var(--ok);animation:cx-pulse 2.4s ease-in-out infinite}
@keyframes cx-pulse{50%{opacity:.25}}
.cx__tag{padding:0.182em 0.545em;border:1px solid var(--void-line-2);border-radius:0.273em;font-size:0.864em;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-lit)}
.cx__kill{display:flex;align-items:center;gap:0.636em;font-size:0.955em;color:var(--cx-muted)}
.cx__sw{position:relative;width:2.182em;height:1.182em;border-radius:0.636em;background:var(--cx-faint);overflow:hidden}
.cx__sw::before{content:'';position:absolute;inset:0;background:var(--bad);opacity:0;transition:opacity .4s}
.cx__sw i{position:absolute;left:0.182em;top:0.182em;width:0.818em;height:0.818em;border-radius:50%;background:var(--void-text);transition:transform .4s var(--e)}
.is-killed .cx__sw::before{opacity:1}
.is-killed .cx__sw i{transform:translateX(1em)}
.is-killed .cx__kill{color:var(--bad)}

/* ---- Body: rail + main --------------------------------------------------- */
.cx__body{flex:1;min-height:0;display:grid;grid-template-columns:9.636em minmax(0,1fr);transform-style:preserve-3d}
.cx__rail{position:relative;padding:0.909em 0.727em;border-right:1px solid var(--void-line)}
.cx__ri{display:flex;align-items:center;gap:0.727em;height:2.273em;padding-left:0.727em;font-size:1em;color:var(--cx-muted);transition:color .4s}
.cx__ri.is-on{color:var(--void-text)}
.cx__ri svg{width:1.091em;height:1.091em;flex:none;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.cx__mark{position:absolute;left:0;top:0.909em;width:0.182em;height:2.273em;background:var(--gold-lit);
  transform:translateY(calc(var(--n) * 2.273em));transition:transform .6s var(--e)}
.cx__main{min-width:0;min-height:0;display:flex;flex-direction:column;gap:0.727em;padding:0.909em 1.091em 0.909em;transform-style:preserve-3d;
  background-image:linear-gradient(var(--cx-grid) 1px,transparent 1px),linear-gradient(90deg,var(--cx-grid) 1px,transparent 1px);background-size:2.182em 2.182em}

/* ---- KPIs ---------------------------------------------------------------- */
.cx__kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0.545em;flex:none}
.cx-kpi{position:relative;padding:0.545em 0.818em 1.182em;background:linear-gradient(180deg,var(--void-3),var(--void-2));box-shadow:inset 0 1px 0 var(--cx-glare);border:1px solid var(--void-line);border-radius:0.545em}
.cx-kpi__k{display:block;font-size:0.909em;line-height:1.25;color:var(--cx-muted)}
.cx-kpi__v{display:block;margin-top:0.182em;font-family:var(--font-mono);font-size:1.364em;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.cx-kpi__v b{font-weight:400}
.cx-kpi__s{position:absolute;left:0.818em;bottom:0.273em;font-size:0.818em;color:var(--cx-muted)}
.cx-meter{position:absolute;left:0.818em;right:0.818em;bottom:0.545em;height:0.182em;background:var(--cx-faint);overflow:hidden;border-radius:1px}
.cx-meter i{position:absolute;inset:0;background:var(--gold-lit);transform-origin:left;transform:scaleX(.0638)}  /* 6 of 94 */

/* ---- Stream -------------------------------------------------------------- */
.cx__stream{--rh:2.182em;position:relative;flex:1;min-height:0;display:flex;flex-direction:column;transform:translateZ(1.818em)}
.cx__cmd{display:flex;gap:1.091em;justify-content:space-between;margin:0 0 0.455em;font-family:var(--font-mono);font-size:0.955em;color:var(--cx-muted);white-space:nowrap}
.cx__cmd span{overflow:hidden;text-overflow:ellipsis}
.cx__cmd b{color:var(--gold-lit)}
.cx__cmd em{flex:none;font-family:var(--font-body);font-style:normal;font-size:0.864em}
.cx__head,.cx-r{display:grid;grid-template-columns:4.6em minmax(0,1.45fr) minmax(0,1.6fr) 3.4em 6.6em minmax(0,1.05fr);gap:0.85em;align-items:center}
.cx__head{padding:0 0.364em 0.455em;border-bottom:1px solid var(--void-line);font-size:0.864em;letter-spacing:.1em;text-transform:uppercase;color:var(--cx-muted)}
.cx__rows{position:relative;height:calc(6 * var(--rh));overflow:hidden;flex:none}
.cx-r{position:absolute;left:0;right:0;top:0;height:var(--rh);padding:0 0.364em;border-bottom:1px solid var(--void-line);
  font-family:var(--font-mono);font-size:1em;font-variant-numeric:tabular-nums;
  transform:translateY(calc(var(--i) * var(--rh)));opacity:0;transition:transform .6s var(--e),opacity .5s ease}
.cx-r.is-go,.cx-r.is-done{opacity:1}
.cx-r.is-gone{opacity:0}
.cx-r.no-tr,.cx-r.no-tr *{transition:none!important}
.cx-r > span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cx-t,.cx-w{color:var(--cx-muted)}
.cx-a{color:var(--void-text)}
.cx-k{color:#fff}
.cx-x{color:var(--cx-muted);text-align:center}
.cx-x.is-hot{color:var(--warn-lit)}
.cx-r--bad .cx-w{color:var(--void-text)}
.cx-r--bad::before{content:'';position:absolute;inset:0;background:var(--bad-bg);opacity:0;pointer-events:none}
.cx-r.is-pulse::before{animation:cx-flash .3s ease .5s 1}
@keyframes cx-flash{50%{opacity:1}}

/* nine checks, then the verdict */
.cx-v{position:relative;height:1.636em;overflow:visible}
.cx-pipe{position:absolute;left:0;top:0.364em;display:flex;gap:0.182em;transition:opacity .25s ease .48s}
.cx-pipe i{position:relative;width:0.455em;height:0.909em;border-radius:1px;background:var(--cx-faint)}
.cx-pipe i::after{content:'';position:absolute;inset:0;border-radius:1px;background:var(--gold-lit);opacity:0;transition:opacity .12s ease}
.cx-pipe i:nth-child(1)::after{transition-delay:0s}.cx-pipe i:nth-child(2)::after{transition-delay:.04s}.cx-pipe i:nth-child(3)::after{transition-delay:.08s}
.cx-pipe i:nth-child(4)::after{transition-delay:.12s}.cx-pipe i:nth-child(5)::after{transition-delay:.16s}.cx-pipe i:nth-child(6)::after{transition-delay:.2s}
.cx-pipe i:nth-child(7)::after{transition-delay:.24s}.cx-pipe i:nth-child(8)::after{transition-delay:.28s}.cx-pipe i:nth-child(9)::after{transition-delay:.32s}
.cx-r.is-go .cx-pipe i::after{opacity:1}
.cx-r.is-go .cx-pipe,.cx-r.is-done .cx-pipe{opacity:0}
.cx-r.is-done .cx-pipe{transition:none}
.cx-v .cx-pill{position:absolute;left:0;top:0;opacity:0;transition:opacity .3s ease .55s}
.cx-r.is-go .cx-pill,.cx-r.is-done .cx-pill{opacity:1}
.cx-r.is-done .cx-pill{transition:none}
.cx-pill{display:inline-flex;align-items:center;gap:0.364em;padding:0.182em 0.636em;border-radius:0.364em;font-family:var(--font-body);font-size:0.955em;font-weight:600;white-space:nowrap}
.cx-pill--ok{background:var(--ok-bg);color:var(--ok)}
.cx-pill--warn{background:var(--warn-bg);color:var(--warn-lit)}
.cx-pill--bad{background:var(--bad-bg);color:var(--bad)}

.cx__halt{position:absolute;left:50%;top:58%;transform:translate(-50%,-50%) translateZ(0.909em);padding:0.636em 1.273em;border:1px solid var(--bad);border-radius:0.545em;
  background:var(--void);color:var(--bad);font-size:1.045em;font-weight:600;white-space:nowrap;opacity:0;transition:opacity .4s ease}
.is-killed .cx__halt{opacity:1}
.is-killed .cx__rows{opacity:.35;transition:opacity .4s}

/* ---- Audit chain --------------------------------------------------------- */
.cx__chain{flex:none;display:flex;align-items:center;gap:1.091em;margin-top:auto;padding-top:0.818em;border-top:1px solid var(--void-line)}
.cx__chainl{flex:none;max-width:13.636em;font-size:0.864em;line-height:1.35;color:var(--cx-muted)}
.cx__blocks{flex:1;min-width:0;display:flex;justify-content:flex-end;gap:1.091em;overflow:hidden;padding-top:0.818em;margin-top:-0.818em}
.cx-b{position:relative;flex:none;display:flex;flex-direction:column;align-items:center;padding:0.273em 0.545em;border:1px solid var(--void-line-2);border-radius:0.364em;
  font-family:var(--font-mono);font-size:0.909em;color:var(--void-text);transition:transform .6s var(--e),opacity .5s ease}
.cx-b b{font-weight:400}
.cx-b::before{content:'';position:absolute;right:100%;top:50%;width:1.091em;height:1px;background:var(--void-line-2)}
.cx-b.is-seal{border-color:var(--gold-lit)}
.cx-b em{position:absolute;top:-0.727em;right:-0.364em;padding:0 0.273em;border-radius:0.182em;background:var(--gold-lit);color:var(--void);
  font-family:var(--font-body);font-style:normal;font-size:0.727em;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.cx-b.is-new{opacity:0;transform:translateX(1.636em)}

/* ---- Floating cards ------------------------------------------------------ */
.cx-card{position:absolute;width:46%;padding:1em 1.182em 1.091em;border:1px solid var(--void-line-2);border-radius:0.909em;
  background:var(--cx-card);box-shadow:var(--lift-dark);
  opacity:0;transform:translateZ(0.909em);transition:opacity .45s ease,transform .8s var(--e)}
.cx-card.is-on{opacity:1;transform:translateZ(var(--z))}
.cx-card--deny{--z:7.636em;left:-7%;bottom:9%;border-left:0.182em solid var(--bad)}
.cx-card--esc{--z:6.182em;right:-8%;top:24%;border-left:0.182em solid var(--warn-lit)}
.cx > .cx__panel > .cx-card--deny.is-on{animation:cx-lift .9s var(--e) 2.8s backwards}
@keyframes cx-lift{from{opacity:0;transform:translateZ(0)}}
.cx-card p{margin:0}
.cx-card__h{display:flex;align-items:center;gap:0.727em;font-family:var(--font-mono);font-size:0.955em;color:var(--cx-muted)}
.cx-card__k{margin-top:0.636em!important;font-family:var(--font-mono);font-size:1.091em;color:#fff}
.cx-card__w{margin-top:0.273em!important;font-size:1em;color:var(--void-text)}
.cx-card__done{display:none;color:var(--bad);font-weight:600}
.cx-card.is-done .cx-card__open{display:none}
.cx-card.is-done .cx-card__done{display:inline}
.cx-card__acts{display:flex;gap:0.545em;margin-top:0.909em!important}
.cx-card__acts span{padding:0.364em 0.727em;border:1px solid var(--void-line-2);border-radius:0.364em;font-size:0.955em;color:var(--void-text);transition:opacity .4s,background .2s,color .2s}
.cx-card__acts .cx-deny.is-press{background:var(--bad-bg);border-color:var(--bad);color:var(--bad)}
.cx-card.is-done .cx-card__acts span:not(.cx-deny){opacity:.35}

/* injection chip: floats over the top-right corner */
.cx-inj{position:absolute;right:3%;bottom:24%;max-width:52%;margin:0;padding:0.545em 0.909em;border:1px solid var(--warn-lit);border-radius:0.545em;
  background:var(--cx-card);box-shadow:var(--lift-dark);color:var(--warn-lit);font-size:0.955em;line-height:1.4;
  opacity:0;transform:translateZ(0.909em);transition:opacity .45s ease,transform .8s var(--e)}
.cx-inj b{display:block;font-family:var(--font-mono);font-weight:400}
.cx-inj.is-on{opacity:1;transform:translateZ(4.545em)}

/* ---- Steps mode (referee) ------------------------------------------------ */
.ref-console .cx{animation:none}
.ref-console .cx__views{min-height:21em}
.ref-console .cx__panel{transform:rotateY(8deg) rotateX(4deg)}
.ref-console .cx__body{grid-template-columns:8.727em minmax(0,1fr)}
.ref-console .cx__ri{font-size:0.955em}
.ref-console .cx__head,.ref-console .cx-r{grid-template-columns:4.909em minmax(0,1.2fr) minmax(0,1.3fr) 3.4em 6.727em}
.ref-console .cx-w,.ref-console .cx__head span:last-child{display:none}
.ref-console .cx-card--esc{right:-6%;top:auto;bottom:22%;width:56%}
.cx__views{position:relative;flex:1;min-height:0;transform-style:preserve-3d}
.cx__views > *{position:absolute;inset:0;opacity:0;transition:opacity .5s ease}
.cx__views > .cx__stream{opacity:1;transform:translateZ(1.818em)}
.cx[data-scene="rules"] .cx__views > .cx__stream,.cx[data-scene="seen"] .cx__views > .cx__stream,.cx[data-scene="record"] .cx__views > .cx__stream{opacity:0}
.cx[data-scene="rules"] .cx-view--policy,.cx[data-scene="seen"] .cx-view--pipe,.cx[data-scene="record"] .cx-view--audit{opacity:1}
.cx-view{padding:0.364em 0.182em;transform:translateZ(1.818em)}
.cx-view__h{margin:0 0 0.909em;font-family:var(--font-mono);font-size:1em;color:var(--gold-lit)}
.cx-view__f{display:flex;align-items:center;gap:0.909em;margin:1.091em 0 0;font-size:1em;color:var(--cx-muted)}
.cx-pol{display:flex;gap:2.182em;margin:0;font-size:0.909em;letter-spacing:.1em;text-transform:uppercase;color:var(--cx-muted)}
.cx-pol b{display:block;font-family:var(--font-mono);font-size:2em;font-weight:400;letter-spacing:0;color:#fff}
.cx-meter--lg{position:relative;left:auto;right:auto;bottom:auto;display:block;height:0.273em;margin:0.909em 0 1.091em}
.cx-caps{list-style:none;margin:0;padding:0;display:grid;gap:0.455em;font-family:var(--font-mono);font-size:1em}
.cx-caps li{display:flex;gap:0.727em}
.cx-ok{color:var(--ok)}
.cx-caps .is-no{color:var(--bad)}
.cx-pol__ok{margin:1.091em 0 0;font-size:1.045em;font-weight:600;color:var(--ok)}
.cx-checks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0.545em}
.cx-checks li{position:relative;display:flex;align-items:center;gap:0.727em;padding:0.727em 0.818em;border:1px solid var(--void-line);border-radius:0.545em;background:var(--void-3);font-size:1em}
.cx-checks li b{font-family:var(--font-mono);font-weight:400;color:var(--gold-lit)}
.cx-checks li::after{content:'';position:absolute;inset:-1px;border:1px solid var(--gold-lit);border-radius:0.545em;background:var(--gold-glow);opacity:0;transition:opacity .2s ease}
.pipe-go .cx-checks li::after{opacity:1;transition-delay:calc(var(--d) * .18s)}
.cx-view--pipe .cx-view__f .cx-pill{opacity:0;transition:opacity .3s ease}
.pipe-go .cx-view--pipe .cx-view__f .cx-pill{opacity:1;transition-delay:1.75s}
.cx-audit{display:flex;flex-wrap:wrap;gap:1.273em 1.455em;padding-top:0.545em}
.cx-audit .cx-b{font-size:1em;padding:0.455em 0.727em}
.cx-seal{color:var(--gold-lit);font-weight:600}

/* ---- Narrow desktop: content sets the height, icon rail, no reason column */
@media(min-width:1000px) and (max-width:1240px){
  .hero__visual .cx{aspect-ratio:auto}
  .hero__visual .cx__panel,.hero__visual .cx__screen{position:relative;inset:auto}
  .hero__visual .cx__body{grid-template-columns:42px minmax(0,1fr)}
  .hero__visual .cx__ri{padding-left:6px}
  .hero__visual .cx__ri span{display:none}
  .hero__visual .cx__head,.hero__visual .cx-r{grid-template-columns:54px minmax(0,1fr) minmax(0,1.1fr) 26px 74px}
  .hero__visual .cx-w,.hero__visual .cx__head span:last-child,.hero__visual .cx__cmd em,.hero__visual .cx__tag{display:none}
  .hero__visual .cx__main{gap:10px}
  .hero__visual .cx__chainl{max-width:110px}
  .hero__visual .cx-card,.hero__visual .cx-inj{width:52%;max-width:60%}
}

/* ---- Tablet and phone: flat, in flow ------------------------------------- */
@media(max-width:999px){
  .hero__visual{width:100%;justify-self:stretch;margin:48px 0 0;perspective:none}
  .hero__visual-cap{text-align:left}
  .cx{aspect-ratio:auto;font-size:11px;animation:cx-fade .8s ease 1.4s both}
  @keyframes cx-fade{from{opacity:0}}
  .cx__panel{position:relative;inset:auto;transform:none}
  .cx__screen{position:relative;inset:auto}
  .cx__body{grid-template-columns:minmax(0,1fr)}
  .cx__rail,.cx__dots,.cx__tag{display:none}
  .cx__kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cx-kpi__k,.cx__head,.cx__chainl,.cx-kpi__s{font-size:11px}
  .cx-kpi{padding-bottom:17px}
  .cx__stream{--rh:32px;transform:none}
  .cx__rows{height:calc(4 * var(--rh))}
  .cx__head,.cx-r{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) 76px}
  .cx-t,.cx-x,.cx-w,.cx__head span:nth-child(1),.cx__head span:nth-child(4),.cx__head span:nth-child(6),.cx-inj,.cx__cmd em{display:none}
  .cx__chainl{max-width:90px}
  .cx-card,.cx-card.is-on{position:relative;left:auto;right:auto;top:auto;bottom:auto;width:auto;margin-top:10px;opacity:1;transform:none;animation:none!important}
  .cx-card__w{min-height:1.3em}
  .ref-console,.referee__visual{display:none}
}
@media(max-width:420px){ .cx__bar{gap:8px;padding:0 10px} .cx__main{padding:10px} .cx__path{font-size:10.5px} }

@media(prefers-reduced-motion:reduce){
  .cx,.cx-card,.cx-card.is-on,.cx__live i{animation:none!important}
  .cx-r,.cx-b,.cx-card,.cx__mark,.cx-pipe,.cx-pill,.cx-checks li::after{transition:none!important}
}