/* =====================================================================
   MIST Compute — one-pager
   Dark engineering-sheet aesthetic. Single accent green, reserved for the
   live/active state.

   THE GRID IS LOAD-BEARING, AND EVERYTHING IS BUILT ON IT.
   One module M = min(viewportH/22, viewportW/30) is set on .grid by app.js
   and drives the CSS layout, the canvas, AND every type size + space value
   below (each is a decimal of M, with small px floors for legibility).
   Resize the window and the whole sheet — outer cells, inner dividers and
   text alike — rescales on the same module.

   Fonts: Bricolage Grotesque (display) / IBM Plex Mono (technical) / Turret Road (headline).
   ===================================================================== */

:root {
  --ink:#0B0B10; --tx:#ECECEF; --dim:#8a8a95; --dim2:#62626c;
  --line:rgba(255,255,255,.07); --line2:rgba(255,255,255,.16);
  --green:#2456a8;  /* accent — deep blue (radar-P7 structure); single source for CSS + canvas */
  --emit:#9ef77f;   /* signal — phosphor green; live state + node hit-emission (read by the canvas) */
  --fd:"Bricolage Grotesque", system-ui, sans-serif;   /* display / UI */
  --fb:"IBM Plex Sans", system-ui, sans-serif;          /* body fallback */
  --fm:"IBM Plex Mono", ui-monospace, monospace;        /* mono / technical */
  --fh:"Turret Road", system-ui, sans-serif;            /* headline */

  /* tonal scale of the accents — three intensities (15 / 55 / 85), intentionally uneven */
  --blue-lo:  color-mix(in srgb, var(--green) 15%, transparent);
  --blue-mid: color-mix(in srgb, var(--green) 55%, transparent);
  --blue-hi:  color-mix(in srgb, var(--green) 85%, transparent);
  --emit-lo:  color-mix(in srgb, var(--emit) 15%, transparent);
  --emit-mid: color-mix(in srgb, var(--emit) 55%, transparent);
  --emit-hi:  color-mix(in srgb, var(--emit) 85%, transparent);
}

* { box-sizing:border-box; margin:0; padding:0; }
body { background:var(--ink); color:var(--tx); font-family:var(--fb); -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
::selection { background:var(--green); color:var(--ink); }
:focus-visible { outline:2px solid var(--green); outline-offset:2px; border-radius:3px; }

/* Sheet + canvas ----------------------------------------------------- */
.sheet { position:relative; width:min(1240px, calc(100vw - 28px)); margin:14px auto; }
#mx { position:absolute; inset:0; z-index:0; width:100%; height:100%;
  /* fade the dot-matrix out on all four edges — vertical + horizontal gradients, intersected
     (side % is smaller than top/bottom % so the falloff band is ~equal in px, since W > H) */
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 7%, #000 93%, transparent 100%), linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to bottom, transparent 0, #000 7%, #000 93%, transparent 100%), linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
  mask-composite:intersect; }
#mxn { position:absolute; inset:0; z-index:40; width:100%; height:100%; pointer-events:none; }   /* node mirrored here, above the request window */

/* One grid drives the layout; the canvas reads the same --m + column count.
   --m is set inline by app.js; the 42px fallback keeps type sane pre-JS. */
.grid {
  position:relative; display:grid;
  grid-template-columns:repeat(30, 1fr);
  grid-template-rows:repeat(22, var(--m, 42px));

  /* type scale — decimals of the module (floors keep small text legible) */
  --t-h1:   calc(var(--m, 42px) * 1.16);
  --t-num:  max(17px,   calc(var(--m, 42px) * .4));
  --t-name: max(13px,   calc(var(--m, 42px) * .26));
  --t-sub:  max(13px,   calc(var(--m, 42px) * .26));
  --t-body: max(10.5px, calc(var(--m, 42px) * .19));
  --t-eye:  max(10px,   calc(var(--m, 42px) * .185));
  --t-mark: max(11px,   calc(var(--m, 42px) * .2));
  --t-lbl:  max(9px,    calc(var(--m, 42px) * .16));
  --t-fine: max(8px,    calc(var(--m, 42px) * .145));

  --cell-gap: .04;   /* bottom-row cell gutter (×module) — tunable via the dev panel */
  --cell-rad: .1;    /* bottom-row cell corner radius (×module) */
  --req-gap: .14;    /* request CTA inset within its 3×1 cells (×module) — scale, like cell-gap */
  --req-rad: .1;     /* request CTA corner radius (×module) */
  --reqwin-gap: .2;  /* request form inset within its grid-area (×module) — scale */
  --reqwin-rad: .1;  /* request form corner radius (×module) */
  --reqwin-cut: .6;  /* request form top-right circular corner cut (radius ×module) — the node nestles in it */
  --rqf: 1;          /* request form type scale (multiplies the form's font sizes) */
  --req-anim-dur: .75s;                       /* form open: CRT power-on duration */
  --req-anim-stag: .065s;                     /* form open: content cascade gap */
  --req-anim-ease: cubic-bezier(.4,0,.2,1);   /* form open: easing */
  --cat-grad: color-mix(in srgb, var(--green) 15%, transparent);  /* C2·B blue gradient intensity */
  --cat-grad-hi: color-mix(in srgb, var(--green) 25%, transparent); /* C2·B selected-model tint (overlaid on the base 15%) — baked from V's tuning */
  --cat-ctx:  color-mix(in srgb, var(--emit) 8%, transparent);    /* C2·B context chip intensity */

  --logo-size: .95;         /* header logo glyph height (×module) — tunable via the dev panel */
  --logo-col:  var(--dim2); /* header logo tint (drives currentColor); --emit stays reserved for the live state */
}
.grid > * { position:relative; z-index:1; min-width:0; }

/* Header ------------------------------------------------------------- */
.head { grid-area:1/2/3/30; --m:calc(var(--m0) * .93); display:flex; align-items:center; justify-content:space-between; padding:0 calc(var(--m) * .32); font-family:var(--fm); }
.head::after { content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:linear-gradient(to right, transparent, var(--line2) 5%, var(--line2) 95%, transparent); }
.mark { font-family:var(--fd); font-size:calc(var(--m) * .5); letter-spacing:.2em; display:flex; align-items:center; gap:calc(var(--m) * .16); }
.mark small { color:var(--dim); letter-spacing:.16em; font-size:var(--t-fine); }
/* brand mark — standalone grid item, movable independently via the dev panel.
   Inline SVG tinted via currentColor (--logo-col), height on the module. */
.logo { grid-area:1/2/3/4; --m:calc(var(--m0) * .67); place-self:center; z-index:2;
  width:calc(var(--m) * var(--logo-size)); height:calc(var(--m) * var(--logo-size));
  display:block; color:var(--logo-col); }
.req { grid-area:2 / 27 / 3 / 30; place-self:stretch; z-index:2; margin:calc(var(--m0) * var(--req-gap)); display:flex; align-items:center; justify-content:center;
  font-family:var(--fm); font-size:calc(var(--m) * .175); font-weight:500; letter-spacing:.16em; white-space:nowrap;
  border:1px solid var(--line2); border-radius:calc(var(--m0) * var(--req-rad)); color:var(--tx); transition:.18s; }   /* locked to the main grid: 3 cols × 1 row; scale + radius tunable */
.req:hover { color:#fff; border-color:rgba(255,255,255,.55); }   /* text-only: brighten label + border, no fill */

/* Hero --------------------------------------------------------------- */
.hero { grid-area:2/3/15/19; --m:calc(var(--m0) * 1.07); align-self:center; padding-right:calc(var(--m) * .3);
  background:linear-gradient(95deg, var(--ink) 30%, rgba(11,11,16,.5) 62%, transparent); }
.eye { font-family:var(--fm); font-size:var(--t-eye); letter-spacing:.16em; color:var(--dim); margin-bottom:calc(var(--m) * .3); }
.eye .on { color:var(--green); }
h1 { font-family:var(--fh); font-weight:400; font-size:var(--t-h1); line-height:var(--m); letter-spacing:-.03em; margin-bottom:calc(var(--m) * .3); text-wrap:balance; }
h1 em { font-style:normal; font-weight:700; }
.sub { font-family:var(--fm); color:var(--dim); font-size:calc(var(--m) * .28); max-width:42ch; line-height:calc(var(--m) * .42); margin-bottom:calc(var(--m) * .34); }
.readout { font-family:var(--fm); display:flex; gap:calc(var(--m) * .42); }
.ro b { display:block; font-family:var(--fd); font-weight:500; font-size:var(--t-num); line-height:1; letter-spacing:-.02em; color:#fff; margin-bottom:calc(var(--m) * .1); }
.ro b small { font-size:.5em; font-weight:500; letter-spacing:0; }
.ro span { font-family:var(--fd); font-weight:800; font-size:var(--t-lbl); letter-spacing:.08em; color:var(--dim2); text-transform:uppercase; }
.ro span.bm { color:var(--green); }


/* Node capture meter — easter-egg readout by the node. Every captured packet adds 4 bits;
   the underline gauge fills toward the next tick so the climb stays visible. Mono, node-green. */
.cap-meter { grid-area:6/21/7/27; align-self:start; justify-self:end; display:flex; align-items:center; gap:calc(var(--m0) * .12);
  font-family:var(--fm); font-size:var(--t-lbl); letter-spacing:.14em; color:var(--dim2); white-space:nowrap;
  transform:translate(calc(var(--m0) * 2.122), calc(var(--m0) * .397)); }
.cap-meter .cm-dot { flex:none; width:max(5px, calc(var(--m0) * .1)); height:max(5px, calc(var(--m0) * .1)); border-radius:50%;
  background:var(--emit); box-shadow:0 0 5px color-mix(in srgb, var(--emit) 50%, transparent); opacity:.55; transition:opacity .2s, box-shadow .2s; }
.cap-meter .cm-lbl { text-transform:uppercase; }
.cap-meter .cm-val { color:var(--emit); letter-spacing:.06em; min-width:4.5ch; text-align:right; position:relative; transition:color .25s, text-shadow .25s; }
.cap-meter .cm-val::after { content:""; position:absolute; left:0; bottom:calc(var(--m0) * -.05); height:2px; width:calc(var(--cm-prog, 0) * 100%); background:var(--emit); box-shadow:0 0 5px color-mix(in srgb, var(--emit) 70%, transparent); opacity:.85; transition:width .2s ease-out; }   /* climb gauge: fills toward the next tick */
.cap-meter.hit .cm-dot { opacity:1; box-shadow:0 0 11px var(--emit); }
.cap-meter.hit .cm-val { text-shadow:0 0 9px color-mix(in srgb, var(--emit) 75%, transparent); }

/* Title-block cells -------------------------------------------------- */
.cell { background:rgba(13,13,18,.16); border:1px solid var(--line2); display:flex; margin:calc(var(--m0) * var(--cell-gap)); border-radius:calc(var(--m0) * var(--cell-rad)); overflow:hidden; }
.c-console { grid-area:14/2/21/8; --m:calc(var(--m0) * .86); }
.c-catalog { grid-area:14/8/21/26; --m:calc(var(--m0) * .95); }
.c-sov { grid-area:14/26/21/30; }
.vlabel { width:calc(var(--m) * .6); border-right:1px solid var(--line2); display:flex; align-items:center; justify-content:center; flex:none; }
.vlabel span { writing-mode:vertical-rl; transform:rotate(180deg); font-family:var(--fm); font-size:var(--t-lbl); letter-spacing:.24em; color:var(--dim2); text-transform:uppercase; }
/* internals measured in fractions of the module — every line tracks the grid */
.cbody { flex:1; padding:calc(var(--m) * .5) calc(var(--m) * .55); min-width:0; display:flex; flex-direction:column; }

/* Console */
.con-head { display:flex; align-items:center; gap:calc(var(--m) * .13); font-family:var(--fd); font-weight:250; font-size:calc(var(--m) * .21); color:var(--dim); margin-bottom:calc(var(--m) * .16); }   /* baked from V's tuning */
.con-head .dot { width:max(5px, calc(var(--m) * .1)); height:max(5px, calc(var(--m) * .1)); border-radius:50%; background:var(--emit); box-shadow:0 0 7px color-mix(in srgb, var(--emit) 70%, transparent); }
.con-head .ep { color:var(--tx); }
.con-body { font-family:var(--fm); font-size:calc(var(--m) * .25 * var(--con-fs-k, 1)); line-height:1.4; flex:1; overflow:hidden; }   /* .25×M baked from V's tuning · --con-fs-k stays a dev knob */
.c-q { color:var(--dim); } .c-q::before { content:"\203A  "; color:var(--dim2); }
.c-a { color:var(--tx); white-space:pre-wrap; }
.c-a .tool { color:#9aa6c4; } .c-a .key { color:var(--green); }
.cursor { display:inline-block; width:calc(var(--m) * .1); height:calc(var(--m) * .22); background:var(--emit); translate:0 2px; animation:blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity:0; } }

/* Catalog */
.clab { font-family:var(--fm); font-weight:800; font-size:calc(var(--m) * .22); letter-spacing:.14em; color:var(--dim2); text-transform:uppercase; display:flex; align-items:center; justify-content:space-between; min-height:calc(var(--m) * .5); }
.models { display:flex; flex-direction:column; }   /* groups the model rows so they move as one box */
/* C2·B — uniform blue-gradient row (primary @55), role + context chips; context chip = secondary green @15 */
.m { display:grid; grid-template-columns:1fr auto; grid-template-rows:auto auto; gap:calc(var(--m) * .07) calc(var(--m) * .16); align-items:center; min-height:calc(var(--m) * 1.3); border-bottom:1px solid var(--line); border-left:2px solid var(--green); padding-left:calc(var(--m) * .22); background:linear-gradient(90deg, var(--cat-grad, var(--blue-mid)), transparent 62%); }
.m-name { grid-row:1; grid-column:1; font-family:var(--fd); font-weight:500; font-size:calc(var(--m) * .3); letter-spacing:-.01em; }
.m-tps { grid-row:1; grid-column:2; text-align:right; font-family:var(--fd); font-size:calc(var(--m) * .25); color:#fff; } .m-tps small { color:var(--dim); }
.chips { grid-row:2; grid-column:1 / span 2; display:flex; gap:calc(var(--m) * .1); flex-wrap:wrap; }
.chip { font-family:var(--fm); font-size:var(--t-fine); letter-spacing:.04em; color:var(--dim); border:1px solid var(--line2); border-radius:calc(var(--m) * .06); padding:calc(var(--m) * .03) calc(var(--m) * .12); }
.chip-ctx { background:var(--cat-ctx, var(--emit-lo)); border-color:color-mix(in srgb, var(--emit) 35%, transparent); color:var(--emit); }
.api { font-family:var(--fm); font-weight:700; font-size:calc(var(--m) * .22); letter-spacing:.06em; color:var(--dim); margin-top:auto; padding-top:calc(var(--m) * .13); }

/* Model activation — the console orchestrator (app.js) lights the loading model: a stronger tint fades in,
   with a one-shot flicker + gradient-wave on selection. Echoes the CRT-flutter vocabulary (reqCrt). */
.m { position:relative; overflow:hidden; isolation:isolate; transition:box-shadow .45s ease; }
.m::before, .m::after { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; }
.m::before { background:linear-gradient(90deg, var(--cat-grad-hi, var(--blue-mid)), transparent 62%); opacity:0; transition:opacity .45s ease; }  /* steady "selected" intensity, over the base 15% tint */
.m.active::before { opacity:1; }
.m.active { box-shadow:inset 2px 0 10px color-mix(in srgb, var(--m-glow-col, var(--emit)) var(--m-glow-int, 10%), transparent); border-left-color:var(--m-glow-col, var(--emit)); }
.m-name { transition:color .4s ease; }
.m.active .m-name { color:#fff; }
.m::after { background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--green) 34%, transparent), transparent); width:42%; inset:0 auto 0 0; transform:translateX(-130%); opacity:0; }  /* gradient-wave band, swept once on selection */
.m.flick::after { animation:mwave var(--m-wave-dur, 1.8s) cubic-bezier(.33,0,.2,1) both; }
.m.flick { animation:mflick var(--m-flick-dur, .1s) steps(1) both; }
@keyframes mflick { 0%{filter:brightness(1)} 14%{filter:brightness(1.7);opacity:.55} 28%{filter:brightness(.6);opacity:1} 42%{filter:brightness(1.5);opacity:.8} 64%{filter:brightness(1);opacity:1} 100%{filter:brightness(1);opacity:1} }
@keyframes mwave { 0%{transform:translateX(-130%);opacity:0} 12%{opacity:1} 88%{opacity:1} 100%{transform:translateX(330%);opacity:0} }
.m { cursor:pointer; }                            /* selectable — click (or Enter) loads that model */
.m:not(.active):hover::before { opacity:.5; }     /* hover previews the selected tint */

/* Sovereignty */
.recpt { list-style:none; font-family:var(--fm); font-weight:400; font-size:calc(var(--m) * .22); letter-spacing:.025em; line-height:calc(var(--m) * .3); display:flex; flex-direction:column; gap:calc(var(--m) / 3); }
.recpt li { display:flex; gap:calc(var(--m) * .15); align-items:flex-start; color:var(--tx); }
.recpt .k { color:var(--green); flex:none; }
.sov-meta { font-family:var(--fd); font-size:calc(var(--m) * .16); letter-spacing:.06em; color:var(--dim2); margin-top:auto; padding-top:calc(var(--m) * .16); line-height:1.7; }

/* Footer ------------------------------------------------------------- */
.foot { grid-area:21/2/23/30; --m:calc(var(--m0) * .93); display:flex; align-items:center; justify-content:space-between; padding:0 calc(var(--m) * .32); font-family:var(--fd); font-size:var(--t-lbl); letter-spacing:.05em; color:var(--dim); }
.foot::before { content:""; position:absolute; left:0; right:0; top:0; height:1px; background:linear-gradient(to right, transparent, var(--line2) 5%, var(--line2) 95%, transparent); }
.foot a { color:var(--tx); }
.foot a.cta { color:var(--green); }

/* Desktop: size the sheet to the viewport (app.js sets the width inline) -- */
@media (min-width:881px) {
  body { min-height:100dvh; display:flex; align-items:center; justify-content:center; }
  .sheet { margin:0; -webkit-user-select:none; user-select:none; }   /* no accidental drag-select while clicking packets on the canvas */
  .reqwin input, .reqwin textarea { -webkit-user-select:text; user-select:text; }   /* keep the request-form fields selectable */
}

/* Grid-coherent text placements (desktop only) — baked from the dev-panel
   "Snap text to grid" + tuning. Transform-only, in module (--m0) fractions, so
   flow and the mobile stack are untouched. */
@media (min-width:881px) {
  .mark    { transform:translate(calc(var(--m0) * 2.047), 0); }
  .eye     { transform:translate(0, calc(var(--m0) * .041)); }
  h1       { transform:translate(0, calc(var(--m0) * .246)); }
  .sub     { transform:translate(0, calc(var(--m0) * .332)) scale(.75); transform-origin:top left; }
  .readout .ro:nth-of-type(1) { transform:translate(calc(var(--m0) * .028), 0); }
  .readout .ro:nth-of-type(2) { transform:translate(calc(var(--m0) * -.023), 0); }
  .readout .ro:nth-of-type(3) { transform:translate(calc(var(--m0) * -.054), 0); }
  .con-head { transform:translate(0, calc(var(--m0) * -.018)); }
  .con-body { transform:translate(0, calc(var(--m0) * .242)); transform-origin:top left; }
  .clab    { transform:translate(calc(var(--m0) * .008), calc(var(--m0) * .471)); }
  .models  { transform:translate(calc(var(--m0) * .508), calc(var(--m0) * .999)); }
  .api     { transform:translate(calc(var(--m0) * .008), calc(var(--m0) * .198)); }
  .recpt   { transform:translate(calc(var(--m0) * .311), calc(var(--m0) * -.334)); }
  .sov-meta { transform:translate(calc(var(--m0) * .311), calc(var(--m0) * .072)); }
  .foot span:nth-of-type(1) { transform:translate(calc(var(--m0) * .148), calc(var(--m0) * -.501)); }
  .foot span:nth-of-type(2) { transform:translate(calc(var(--m0) * -.436), calc(var(--m0) * -.501)); }
}

/* Bottom-row cells — content locked to the page grid ------------------
   Structure on the base module (--m0); type stays on the scaled --m.
   Module 1 = header band; main content from grid line 15; footers on line 20.
   Desktop-only: mobile stacks with the canvas hidden, so alignment is moot. */
@media (min-width:881px) {
  .m { height:var(--m0); min-height:0; align-content:center; }
  .c-catalog .cbody { padding-top:0;
    padding-left:calc(var(--m0) * .96 - var(--m) * .6 - 2px);   /* row left + green accent -> col 9 (8*m0) */
    padding-right:calc(var(--m0) * .96 - 1px);                  /* rule right end -> col 24 (23*m0) */
    padding-bottom:calc(var(--m0) * .96 - 1px); }               /* API line -> grid line 20 (one-module margin below) */
  .c-catalog .clab { height:calc(var(--m0) * .96 - 1px); }       /* header fills module 1 -> .models starts at 14*m0 */

  /* Live/console — con-head fills module 1; stream starts on grid line 15 */
  .c-console .cbody { padding-top:0; }
  .c-console .con-head { height:calc(var(--m0) * .96 - 1px); margin-bottom:0; }

  /* Sovereignty — empty module-1 band (the rail labels it); list at line 15, meta on line 20 */
  .c-sov .cbody { padding-top:calc(var(--m0) * .96 - 1px);
    padding-left:calc(var(--m0) * .96 - var(--m) * .6 - 2px);    /* recpt left -> col 26 (25*m0) */
    padding-bottom:calc(var(--m0) * .96 - 1px); }                /* sov-meta -> grid line 20 */
}

/* Request-access window — a scaled-down bottom-cell spawned from the node.
   Top-right corner pins at the node (row line 6 / col line 27); scales out down-left along
   the node's row + column lines. Reuses .cell params (border / radius / gap); opaque-ish
   fill so it stays legible over the dot field near the node. */
.reqwin { grid-area:6/18/13/27; z-index:30; display:none;
  margin:calc(var(--m0) * var(--reqwin-gap)); border-radius:calc(var(--m0) * var(--reqwin-rad));   /* scale + corners, tunable like the CTA */
  background:rgba(13,13,18,.92); transform-origin:100% 0;
  -webkit-mask:radial-gradient(circle at calc(100% + var(--m0) * var(--reqwin-gap)) calc(-1 * var(--m0) * var(--reqwin-gap)), transparent calc(var(--m0) * var(--reqwin-cut)), #000 calc(var(--m0) * var(--reqwin-cut) + .5px));
  mask:radial-gradient(circle at calc(100% + var(--m0) * var(--reqwin-gap)) calc(-1 * var(--m0) * var(--reqwin-gap)), transparent calc(var(--m0) * var(--reqwin-cut)), #000 calc(var(--m0) * var(--reqwin-cut) + .5px));   /* circular bite centred on the node (grid-area corner) so it nestles in, even when the form is inset */
  grid-template-columns:repeat(9,1fr); grid-template-rows:repeat(7,1fr); }   /* interior on the actual page grid (9×7 modules); top-right pins at the node */
/* open: CRT power-on the blank box (unrolls DOWN from the node — transform-origin 100% 0),
   then the contents cascade in. Baked from the popup lab: CRT .49s, stagger .065s, cubic-bezier(.4,0,.2,1). */
.reqwin.open { display:grid; animation:reqCrt var(--req-anim-dur) var(--req-anim-ease) both; }
@keyframes reqCrt {
  0%   { transform:scaleY(.02); filter:brightness(3.2); }
  18%  { transform:scaleY(.02); filter:brightness(.45); }
  28%  { transform:scaleY(.04); filter:brightness(2.6); }
  72%  { transform:scaleY(1.04); filter:brightness(1.1); }
  88%  { transform:scaleY(.98); filter:brightness(1); }
  100% { transform:scaleY(1);   filter:brightness(1); }
}
.reqwin.open::after {   /* phosphor power-on flash — fades before the content arrives */
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:5;
  background:linear-gradient(180deg, rgba(255,255,255,.5), rgba(158,247,127,.4) 50%, rgba(255,255,255,.5));
  animation:reqGlow var(--req-anim-dur) var(--req-anim-ease) both;
}
@keyframes reqGlow { 0%{opacity:.85;} 18%{opacity:.2;} 28%{opacity:.7;} 55%{opacity:.15;} 80%,100%{opacity:0;} }
/* contents cascade in after the CRT (.49s), .065s apart; backwards-fill hides them until their turn */
.reqwin.open .rq-head, .reqwin.open .rq-email, .reqwin.open .rq-msg,
.reqwin.open .rq-actions, .reqwin.open .rq-status, .reqwin.open .rq-foot {
  animation:reqStaged .24s var(--req-anim-ease) both;
}
@keyframes reqStaged { from { opacity:0; transform:translateY(calc(var(--m0) * .14)); } to { opacity:1; transform:translateY(0); } }
.reqwin.open .rq-head    { animation-delay:calc(var(--req-anim-dur) + var(--req-anim-stag) * 0); }
.reqwin.open .rq-email   { animation-delay:calc(var(--req-anim-dur) + var(--req-anim-stag) * 1); }
.reqwin.open .rq-msg     { animation-delay:calc(var(--req-anim-dur) + var(--req-anim-stag) * 2); }
.reqwin.open .rq-actions { animation-delay:calc(var(--req-anim-dur) + var(--req-anim-stag) * 3); }
.reqwin.open .rq-status  { animation-delay:calc(var(--req-anim-dur) + var(--req-anim-stag) * 3); }
.reqwin.open .rq-foot    { animation-delay:calc(var(--req-anim-dur) + var(--req-anim-stag) * 4); }
.reqwin .cbody, .reqwin .rq-form { display:contents; }              /* unwrap → the form elements become grid items of .reqwin */
.rq-title { font-family:var(--fh); font-weight:500; font-size:calc(var(--m) * .42 * var(--rqf)); letter-spacing:-.01em; }
/* place each element on the page-grid rows */
.rq-head    { grid-row:1; grid-column:1/-1; padding-inline:calc(var(--m) * .4); }
.rq-email   { grid-row:2/4; }
.rq-msg     { grid-row:4/6; }
.rq-email, .rq-msg { grid-column:1/-1; justify-content:center; padding-inline:calc(var(--m) * .4); }
.rq-actions { grid-row:6; grid-column:1/-1; justify-self:start; padding-inline:calc(var(--m) * .4); }
.rq-status  { grid-row:6; grid-column:1/-1; justify-self:end; align-self:center; padding-inline:calc(var(--m) * .4); }
.rq-foot    { grid-row:7; grid-column:1/-1; align-self:center; padding-inline:calc(var(--m) * .4); }
.rq-field { display:flex; flex-direction:column; gap:calc(var(--m) * .08); font-family:var(--fm); font-weight:400; font-size:calc(var(--m) * .25 * var(--rqf)); letter-spacing:.06em; text-transform:uppercase; color:var(--dim); }
.rq-field i { text-transform:none; letter-spacing:0; opacity:.7; }
.rq-field input, .rq-field textarea { font-family:var(--fm); font-weight:350; font-size:calc(var(--m) * .22 * var(--rqf)); color:var(--tx); background:rgba(255,255,255,.05); border:1px solid var(--line2); border-radius:calc(var(--m) * .07); padding:calc(var(--m) * .16) calc(var(--m) * .22); text-transform:none; letter-spacing:0; }
.rq-field input:focus, .rq-field textarea:focus { outline:none; border-color:var(--green); }
.rq-field textarea { resize:none; }
.rq-hp { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.rq-actions { display:flex; align-items:center; gap:calc(var(--m) * .26); margin-top:calc(var(--m) * .06); }
.rq-submit { font-family:var(--fm); font-weight:500; font-size:calc(var(--m) * .22 * var(--rqf)); letter-spacing:.1em; color:var(--tx); background:rgba(255,255,255,.07); border:1px solid var(--line2); border-radius:calc(var(--m) * .07); padding:calc(var(--m) * .18) calc(var(--m) * .4); cursor:pointer; transition:.15s; }
.rq-submit:hover { border-color:var(--emit); color:var(--emit); box-shadow:0 0 calc(var(--m) * .22) rgba(158,247,127,.22); }
.rq-submit:disabled { opacity:.5; cursor:default; }
.rq-cancel { font-family:var(--fm); font-size:calc(var(--m) * .22 * var(--rqf)); color:var(--dim); background:none; border:none; cursor:pointer; }
.rq-cancel:hover { color:var(--tx); }
.rq-head { display:flex; align-items:center; }
.rq-status { font-family:var(--fm); font-size:calc(var(--m) * .2 * var(--rqf)); min-height:1.1em; color:var(--dim); }
.rq-status.ok { color:var(--emit); }
.rq-foot { font-family:var(--fm); font-size:calc(var(--m) * .17 * var(--rqf)); color:var(--dim2); line-height:1.4; }
/* Mobile — node/canvas off; the .req button opens the window as a fixed bottom sheet. */
@media (max-width:880px) {
  .reqwin.open { position:fixed; left:16px; right:16px; bottom:16px; --m:42px; --reqwin-cut:0; --reqwin-gap:0; z-index:60; animation:none;
    background:rgba(13,13,18,.985); box-shadow:0 0 0 100vmax rgba(0,0,0,.55); }   /* opaque sheet + dimmed backdrop over the page */
  .reqwin.open::after { display:none; }   /* no CRT flash on the mobile bottom-sheet */
  .reqwin.open .rq-head, .reqwin.open .rq-email, .reqwin.open .rq-msg,
  .reqwin.open .rq-actions, .reqwin.open .rq-status, .reqwin.open .rq-foot { animation:none; }
}

/* Reduced motion ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .cursor { animation:none; }
  .m.flick, .m.flick::after { animation:none; }   /* selected tint still applies statically */
}

/* Mobile — stack, drop the canvas + its annotation, fixed-px spacing --- */
@media (max-width:880px) {
  html, body { overflow-x:hidden; }   /* never a horizontal scrollbar on mobile */
  .grid { grid-template-columns:1fr; grid-template-rows:none; }
  .grid > * { grid-area:auto !important; }
  #mxn { display:none; }
  #mx { display:block; position:absolute; inset:auto; top:0; left:0; z-index:0; pointer-events:none; }   /* sized inline by app.js (W x content-height); spans the sheet and scrolls WITH the content */
  .cap-meter { display:none; }
  .hero { background:none; padding:24px 16px; }
  h1 { font-size:clamp(28px, 7.5vw, 40px); line-height:1.06; margin-bottom:14px; }
  .sub { font-size:15px; line-height:1.5; margin-bottom:16px; max-width:none; }
  .readout { gap:20px; }
  .cell { min-height:160px; background:rgba(13,13,18,.45); }   /* translucent — the dot-matrix + grid read THROUGH the cells, one sheet (not boxes over wallpaper) */
  .c-console { height:178px; }   /* fixed terminal — mobile copy is compressed + clipped so it never reflows the page */
  .c-console .con-body { overflow:hidden; }
  .logo { height:34px; margin:14px 0 0; }   /* fixed size when the module collapses */
  .head, .foot { padding:14px 16px; min-height:54px; flex-wrap:wrap; gap:10px; }
  .req { place-self:start; margin:0 16px 4px; padding:11px 16px; min-height:44px; font-size:13px; }   /* standalone CTA when the grid collapses to one column */
  /* module shrinks single-column — fall back to fixed spacing */
  .vlabel { width:26px; }
  .cbody { padding:16px; }
  .clab { min-height:0; margin-bottom:6px; }
  .m { min-height:0; padding:11px 0; }
  .con-body { font-size:14px; line-height:1.6; }
  .recpt { font-size:13px; line-height:1.55; gap:11px; }

  /* readable interior type on phones — the pinned 42px module makes the
     M-fraction sizes too small otherwise (sov-meta was ~6.7px) */
  .mark { font-size:16px; }
  .con-head { font-size:13px; }
  .clab { font-size:11px; }
  .m-name { font-size:15px; }
  .m-tps { font-size:14px; }
  .chip { font-size:10px; }
  .api { font-size:12px; }
  .sov-meta { font-size:11px; line-height:1.65; }
  .vlabel span { font-size:10px; }

  /* stack order: brand -> pitch -> CTA -> proof (DOM puts the CTA before the hero) */
  .logo { order:1; justify-self:start; margin:16px 0 0 16px; }
  .head { order:2; }
  .hero { order:3; }
  .req { order:4; }
  .c-console { order:5; }
  .c-catalog { order:6; }
  .c-sov { order:7; }
  .foot { order:8; }
}