/* ============================================================
   KIT v3.2 — CRT TERMINAL
   ------------------------------------------------------------
   PURELY ADDITIVE. Edits nothing. Loads after absynth-matrix.css
   and re-dresses what is already there:
     * no markup changes
     * no edits to absynth-matrix.css
     * removing the one <link> reverts the page completely

   v3.1 used box-drawing characters as CHROME — corner ticks,
   ═══ rules, ╔══ on title bars. Wrong note: ASCII belongs in the
   TEXT, and the chrome should read as a screen. So:

     gone     corner ticks, ═ rules, box-drawn title bars
     kept     >  [ID]  //  ···  ▸  001.  and the block cursor
     added    outlined panels with no fill, real bloom on every
              stroke, scanlines, flicker, curvature, vignette

   PALETTE, from the terminal reference. Measured by bucketing
   every pixel by hue and keeping the brightest saturated sample
   in each bucket — palettegen only returns area averages, which
   on a glowing image come back muddy.
     coral  hue 13-24   frames
     amber  hue 46      body text          <- the Fallout note
     lime   hue 65      meters
     mint   hue 167     active / selected
   Those samples are bloom PEAKS, so saturation is pushed back up
   toward the stroke core. That part is judgement, not measurement.

   Deliberately NOT touched, all known to break:
     - position on header / nav      (unhides the mobile drawer)
     - .nav-void background-image    (it paints its own border)
     - overflow-x on html/body       (kills position:sticky)
   ============================================================ */

:root{
  --t-void:#050408;
  --t-deep:#0a0710;

  --t-coral:#f0705c;
  --t-amber:#f5c75a;
  --t-lime:#d9e35f;
  --t-mint:#5fe3c4;
  --t-rose:#ce6e74;
  --t-dim:#6b4a46;

  --t-term:'VT323','JetBrains Mono',ui-monospace,monospace;
  --t-mono:'JetBrains Mono',ui-monospace,monospace;

  /* one bloom recipe, reused — this is what makes it read as a screen */
  --t-glow:0 0 4px currentColor, 0 0 11px currentColor;
}

/* ---------- the screen ---------- */
body[data-kit="v3"]{
  background-color:var(--t-void);
  color:var(--t-amber);
  font-family:var(--t-mono);
}
/* scanlines + phosphor haze + a slow flicker */
body[data-kit="v3"]::before{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,.46) 0 1px, rgba(0,0,0,0) 1px 3px),
    radial-gradient(ellipse 80% 62% at 50% 44%, color-mix(in srgb, var(--t-coral) 9%, transparent), transparent 70%);
  animation:tFlicker 5.5s steps(1,end) infinite;
}
@keyframes tFlicker{
  0%,96%{opacity:1}
  97%{opacity:.92}
  98%{opacity:1}
  99%{opacity:.95}
}
/* curvature: darken the corners so the plane reads as a tube */
body[data-kit="v3"]::after{
  content:''; position:fixed; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(ellipse 100% 92% at 50% 50%, transparent 46%, rgba(0,0,0,.82) 100%),
    linear-gradient(90deg, rgba(0,0,0,.4), transparent 7%, transparent 93%, rgba(0,0,0,.4));
}
[data-kit="v3"] main, [data-kit="v3"] header, [data-kit="v3"] footer,
[data-kit="v3"] .mn-box, [data-kit="v3"] .k3-status{ position:relative; z-index:2; }

/* ---------- panels: outline only, no fill ---------- */
[data-kit="v3"] .mn-box{
  border:1px solid var(--t-coral);
  background:transparent;
  border-radius:0;
  box-shadow:0 0 5px color-mix(in srgb, var(--t-coral) 45%, transparent), 0 0 22px -4px color-mix(in srgb, var(--t-coral) 30%, transparent),
             inset 0 0 36px -14px color-mix(in srgb, var(--t-coral) 30%, transparent);
}
[data-kit="v3"] .mn-bar{
  background:transparent;
  border-bottom:1px solid var(--t-coral);
  box-shadow:0 1px 7px -3px color-mix(in srgb, var(--t-coral) 70%, transparent);
}
[data-kit="v3"] .mn-bar-title{
  color:var(--t-coral); background:transparent;
  font-family:var(--t-mono); font-size:.6rem; letter-spacing:.34em;
  text-shadow:var(--t-glow);
}
[data-kit="v3"] .mn-body{ background:transparent; }

/* ---------- boot block ---------- */
[data-kit="v3"] .mn-boot{
  background:transparent;
  border:1px solid color-mix(in srgb, var(--t-mint) 42%, transparent);
  border-left:2px solid var(--t-mint);
  box-shadow:inset 0 0 26px -12px color-mix(in srgb, var(--t-mint) 50%, transparent);
  padding:10px 14px;
  font-family:var(--t-term); font-size:1.16rem; line-height:1.4;
}
[data-kit="v3"] .mn-boot-line{
  color:var(--t-mint); -webkit-text-fill-color:var(--t-mint);
  text-shadow:var(--t-glow);
}
[data-kit="v3"] .mn-boot-line::before{ content:'> '; }
[data-kit="v3"] .mn-caret{
  background:var(--t-mint); box-shadow:0 0 9px var(--t-mint);
}
[data-kit="v3"] .mn-human{
  color:var(--t-lime); -webkit-text-fill-color:var(--t-lime);
  font-family:var(--t-term); font-size:1.16rem; text-shadow:var(--t-glow);
}

/* ---------- title ---------- */
[data-kit="v3"] .mn-title-sub{
  color:var(--t-rose); -webkit-text-fill-color:var(--t-rose);
  font-family:var(--t-mono); font-size:.58rem; letter-spacing:.45em;
  text-shadow:var(--t-glow);
}

/* ---------- ticker ---------- */
[data-kit="v3"] .mn-ticker{
  border-top:1px solid color-mix(in srgb, var(--t-coral) 45%, transparent);
  border-bottom:1px solid color-mix(in srgb, var(--t-coral) 45%, transparent);
  background:transparent;
}
[data-kit="v3"] .mn-tk-k{
  color:var(--t-void); -webkit-text-fill-color:var(--t-void); background:var(--t-mint); background-image:none; -webkit-background-clip:border-box; background-clip:border-box;
  font-family:var(--t-mono); font-size:.5rem; letter-spacing:.16em;
  padding:2px 9px; border:none; text-shadow:none;
  box-shadow:0 0 10px color-mix(in srgb, var(--t-mint) 60%, transparent);
}
[data-kit="v3"] .mn-tk-t{
  color:var(--t-amber); -webkit-text-fill-color:var(--t-amber);
  font-family:var(--t-term); font-size:1.18rem; text-shadow:var(--t-glow);
}

/* ---------- feed headers ---------- */
[data-kit="v3"] .mn-feed{ --ph:var(--t-coral); }
[data-kit="v3"] .mn-feed:nth-child(2){ --ph:var(--t-mint); }
[data-kit="v3"] .mn-feed-head{
  border-bottom:1px solid var(--ph);
  box-shadow:0 1px 8px -4px var(--ph);
}
[data-kit="v3"] .mn-feed-code{
  font-family:var(--t-mono); font-size:.52rem; letter-spacing:.18em;
  color:var(--t-void); background:var(--ph); padding:3px 10px;
  border:none; text-shadow:none; box-shadow:0 0 11px -1px var(--ph);
}
[data-kit="v3"] .mn-feed-sub{
  color:var(--t-dim); font-family:var(--t-mono); font-size:.72rem;
}
[data-kit="v3"] .mn-feed-sub::before{ content:'// '; }

/* ---------- entries: outlined rows, numbered, glowing ---------- */
[data-kit="v3"] .mn-item{
  counter-increment:tRow;
  position:relative;
  border:1px solid color-mix(in srgb, var(--t-coral) 26%, transparent);
  border-radius:0;
  background:transparent;
  transition:border-color .15s, box-shadow .15s;
}
[data-kit="v3"] .mn-feed{ counter-reset:tRow; }   /* per column, not per page */
[data-kit="v3"] .mn-item:hover,
[data-kit="v3"] .mn-item:first-child{
  border-color:var(--ph);
  box-shadow:0 0 5px -1px var(--ph), inset 0 0 30px -16px var(--ph);
}

/* 001. 002. — straight off the reference */
[data-kit="v3"] .mn-item-id{
  font-family:var(--t-mono); font-size:.6rem; letter-spacing:.1em;
  color:var(--t-dim); background:none; border:none;
  text-shadow:0 0 7px color-mix(in srgb, var(--t-rose) 50%, transparent);
}
[data-kit="v3"] .mn-item-id::before{
  /* decimal-leading-zero pads to two digits, so a tenth row reads 010
     rather than 0010 */
  content:'0' counter(tRow, decimal-leading-zero) '.  ['; color:var(--ph);
}
[data-kit="v3"] .mn-item-id::after{ content:']'; color:var(--ph); }

[data-kit="v3"] .mn-item-title{
  font-family:var(--t-term); font-size:1.56rem; line-height:1.14;
  color:var(--t-amber); -webkit-text-fill-color:var(--t-amber);
  text-shadow:0 0 4px color-mix(in srgb, var(--t-amber) 85%, transparent), 0 0 14px color-mix(in srgb, var(--t-amber) 40%, transparent);
}
[data-kit="v3"] .mn-item-excerpt{
  color:var(--t-rose); font-family:var(--t-mono); font-size:.76rem; line-height:1.85;
}
[data-kit="v3"] .mn-item-meta{
  color:var(--t-lime); -webkit-text-fill-color:var(--t-lime);
  font-family:var(--t-mono); font-size:.58rem; letter-spacing:.1em;
  text-shadow:0 0 8px color-mix(in srgb, var(--t-lime) 55%, transparent);
}
[data-kit="v3"] .mn-item-meta::before{ content:'\00b7\00b7\00b7 '; color:var(--t-dim); }
[data-kit="v3"] .mn-item-read{
  color:var(--t-mint); -webkit-text-fill-color:var(--t-mint);
  font-family:var(--t-mono); font-size:.58rem; letter-spacing:.14em;
  text-shadow:var(--t-glow);
}
[data-kit="v3"] .mn-item-read::before{ content:'\25B8 '; }
[data-kit="v3"] .mn-feed .mn-item:first-child .mn-item-read::after{
  content:'\2588'; margin-left:6px;
  animation:tBlink 1.05s steps(1,end) infinite;
}
@keyframes tBlink{0%,49%{opacity:1}50%,100%{opacity:0}}

/* ---------- index rail ---------- */
[data-kit="v3"] .mn-index{
  border:1px solid color-mix(in srgb, var(--t-coral) 45%, transparent);
  background:transparent; border-radius:0;
  box-shadow:inset 0 0 40px -18px color-mix(in srgb, var(--t-coral) 40%, transparent);
}
[data-kit="v3"] .mn-index-tabs{
  border-bottom:1px solid color-mix(in srgb, var(--t-coral) 45%, transparent); gap:0;
}
[data-kit="v3"] .mn-tab{
  border:none; border-right:1px solid color-mix(in srgb, var(--t-coral) 30%, transparent);
  background:transparent; color:var(--t-dim);
  border-radius:0; font-family:var(--t-mono); font-size:.52rem;
  letter-spacing:.14em; text-shadow:none;
}
[data-kit="v3"] .mn-tab.active,
[data-kit="v3"] .mn-tab[aria-selected="true"]{
  background:var(--t-mint); color:var(--t-void);
  box-shadow:0 0 13px -2px var(--t-mint);
}
[data-kit="v3"] .mn-tab-soon{ opacity:.45; }
[data-kit="v3"] .mn-index-item{
  border-bottom:1px solid color-mix(in srgb, var(--t-coral) 14%, transparent);
  border-left:2px solid transparent;
  background:transparent; border-radius:0;
}
[data-kit="v3"] .mn-index-item::after{ display:none; }
[data-kit="v3"] .mn-index-item:hover{
  border-left-color:var(--t-mint);
  box-shadow:inset 0 0 24px -12px var(--t-mint);
}
[data-kit="v3"] .mn-index-id{
  font-family:var(--t-mono); font-size:.54rem; color:var(--t-coral);
  text-shadow:0 0 7px color-mix(in srgb, var(--t-coral) 50%, transparent);
}
[data-kit="v3"] .mn-index-title{
  font-family:var(--t-mono); font-size:.74rem;
  color:var(--t-amber); -webkit-text-fill-color:var(--t-amber); text-shadow:none;
}
[data-kit="v3"] .mn-index-foot{
  border-top:1px solid color-mix(in srgb, var(--t-coral) 30%, transparent);
  color:var(--t-dim); font-family:var(--t-mono); font-size:.54rem;
}
[data-kit="v3"] .mn-index-soon,
[data-kit="v3"] .mn-index-soon-k{ color:var(--t-dim); font-family:var(--t-mono); }
[data-kit="v3"] .mn-prelink{ color:var(--t-amber); border-bottom:1px dotted var(--t-dim); }

/* ---------- nav: re-tint only ---------- */
[data-kit="v3"] header nav a,
[data-kit="v3"] header nav .nav-dropdown-trigger{
  color:var(--t-dim); font-family:var(--t-mono);
}
[data-kit="v3"] header nav a:hover,
[data-kit="v3"] header nav .nav-dropdown-trigger:hover{
  color:var(--t-amber); text-shadow:var(--t-glow);
}
[data-kit="v3"] header nav a.n-red{ color:var(--t-coral); -webkit-text-fill-color:var(--t-coral); background:none; text-shadow:var(--t-glow); }
[data-kit="v3"] header nav a.n-blue{ color:var(--t-mint); -webkit-text-fill-color:var(--t-mint); background:none; text-shadow:var(--t-glow); }
[data-kit="v3"] header nav a.n-purple{ color:var(--t-lime); -webkit-text-fill-color:var(--t-lime); background:none; text-shadow:var(--t-glow); }
[data-kit="v3"] .nav-divider{ color:color-mix(in srgb, var(--t-coral) 30%, transparent); }
[data-kit="v3"] .nav-dropdown-menu{
  background:var(--t-deep); border:1px solid var(--t-coral); border-radius:0;
  box-shadow:0 0 18px -6px color-mix(in srgb, var(--t-coral) 60%, transparent);
}
[data-kit="v3"] .nav-dropdown-menu a{ color:var(--t-amber); }
[data-kit="v3"] .nav-dropdown-menu a.current{ color:var(--t-mint); text-shadow:var(--t-glow); }

/* ---------- display typeface ---------- */
.k3-word{
  /* the size JS asks for, capped so a wordmark cannot overflow a phone */
  --k3-gs:min(var(--k3-gs-max, 40px), 9vw);
  /* Each sprite cell is 110px wide but the glyph and its brackets sit inside
     it with roughly 10px of blank either side, so butting cells together
     already leaves ~20 source px between neighbours. A positive gap on top of
     that read as broken tracking. This pulls them back in; raise --k3-track
     toward 0 for looser, past -.2 for overlapping brackets. */
  --k3-track:-.13;
  display:inline-flex; align-items:flex-end; vertical-align:-.1em;
  gap:calc(var(--k3-gs) * var(--k3-track));
  /* painted with background-color, so it must not rely on currentColor: the
     matrix layer sets color:transparent on heading descendants for its
     gradient text, which made the glyphs vanish */
  color:var(--k3-ink, var(--t-coral));
  -webkit-text-fill-color:var(--k3-ink, var(--t-coral));
  filter:drop-shadow(0 0 5px var(--k3-ink, var(--t-coral)))
         drop-shadow(0 0 16px color-mix(in srgb, var(--t-coral) 45%, transparent));
}
.k3-gl{
  display:inline-block;
  width:calc(var(--k3-gs,40px) * 1.1);
  height:var(--k3-gs,40px);
  background-color:var(--k3-ink, var(--t-coral));
  -webkit-mask-image:url('/assets/type/cyber-glyphs.webp');
          mask-image:url('/assets/type/cyber-glyphs.webp');
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:calc(var(--k3-gs,40px) * 28.6) 100%;
          mask-size:calc(var(--k3-gs,40px) * 28.6) 100%;
  -webkit-mask-position:calc(var(--k3-i,0) * var(--k3-gs,40px) * -1.1) 0;
          mask-position:calc(var(--k3-i,0) * var(--k3-gs,40px) * -1.1) 0;
}
.k3-sp{ display:inline-block; width:calc(var(--k3-gs,40px) * .45); }

/* ---------- status bar ---------- */
.k3-status{
  display:flex; flex-wrap:wrap; align-items:center;
  border-top:1px solid color-mix(in srgb, var(--t-coral) 40%, transparent); background:transparent;
  font-family:var(--t-mono); font-size:10px; letter-spacing:.08em;
  color:var(--t-dim);
}
.k3-status div{ padding:7px 13px; border-right:1px solid color-mix(in srgb, var(--t-coral) 20%, transparent); }
.k3-status div:last-child{ border-right:none; margin-left:auto; }
.k3-status b{ color:var(--t-amber); font-weight:400; text-shadow:0 0 8px color-mix(in srgb, var(--t-amber) 50%, transparent); }
.k3-status .ok{ color:var(--t-mint); text-shadow:var(--t-glow); }
.k3-status .warn{ color:var(--t-lime); text-shadow:var(--t-glow); }

@media (prefers-reduced-motion:reduce){
  body[data-kit="v3"]::before{ animation:none; }
  [data-kit="v3"] .mn-item{ transition:none; }
  [data-kit="v3"] .mn-feed .mn-item:first-child .mn-item-read::after{ animation:none; }
}
@media (max-width:620px){
  [data-kit="v3"] .mn-item-title{ font-size:1.3rem; }
  [data-kit="v3"] .mn-boot, [data-kit="v3"] .mn-human{ font-size:1rem; }
}

/* ============================================================
   v3.3 — further into the overhaul, same bones
   ------------------------------------------------------------
   Everything here is DRAWN, not typed: the brief is ASCII in the
   text, a screen everywhere else. Still additive, still scoped
   to [data-kit="v3"], still revertible by dropping the <link>.

   Kept from the old site on purpose: the window metaphor, the
   per-section colour coding, the scanline/CRT language and the
   VT323 + mono pairing. Those are the core feel; they stay.
   ============================================================ */

/* ---------- corner brackets, from the reference frames ----------
   Four corners in one background-image so no pseudo-element is
   spent on them. background-COLOR is untouched, so the panels stay
   unfilled; only the shorthand would reset background-clip, and
   that is the trap this file avoids. */
[data-kit="v3"] .mn-box,
[data-kit="v3"] .mn-index{
  --cnr:var(--t-coral);
  --cl:18px;
  background-image:
    linear-gradient(var(--cnr),var(--cnr)), linear-gradient(var(--cnr),var(--cnr)),
    linear-gradient(var(--cnr),var(--cnr)), linear-gradient(var(--cnr),var(--cnr)),
    linear-gradient(var(--cnr),var(--cnr)), linear-gradient(var(--cnr),var(--cnr)),
    linear-gradient(var(--cnr),var(--cnr)), linear-gradient(var(--cnr),var(--cnr));
  background-repeat:no-repeat;
  background-size:
    var(--cl) 2px, 2px var(--cl),
    var(--cl) 2px, 2px var(--cl),
    var(--cl) 2px, 2px var(--cl),
    var(--cl) 2px, 2px var(--cl);
  background-position:
    -1px -1px, -1px -1px,
    calc(100% + 1px) -1px, calc(100% + 1px) -1px,
    -1px calc(100% + 1px), -1px calc(100% + 1px),
    calc(100% + 1px) calc(100% + 1px), calc(100% + 1px) calc(100% + 1px);
}
[data-kit="v3"] .mn-item{
  --cnr:var(--ph);
  --cl:10px;
  background-image:
    linear-gradient(var(--cnr),var(--cnr)), linear-gradient(var(--cnr),var(--cnr)),
    linear-gradient(var(--cnr),var(--cnr)), linear-gradient(var(--cnr),var(--cnr));
  background-repeat:no-repeat;
  background-size:var(--cl) 1px, 1px var(--cl), var(--cl) 1px, 1px var(--cl);
  background-position:
    -1px -1px, -1px -1px,
    calc(100% + 1px) calc(100% + 1px), calc(100% + 1px) calc(100% + 1px);
  opacity:1;
}

/* ---------- tick rail down the index, like the reference's scale ---------- */
/* .mn-index is sticky (matrix) on desktop and static on phones; both are
   fine containing blocks for ::before. Forcing position:relative here made
   the matrix top:92px apply on phones and shoved the index over the feeds. */
[data-kit="v3"] .mn-index::before{
  content:''; position:absolute; left:-7px; top:14%; bottom:14%; width:5px;
  background:repeating-linear-gradient(
    to bottom,
    var(--t-coral) 0 1px,
    transparent 1px 13px);
  opacity:.5; pointer-events:none;
}

/* ---------- power-on sweep ---------- */
@keyframes tPowerOn{
  0%   { transform:scaleY(.004); opacity:0; filter:brightness(4); }
  38%  { transform:scaleY(.004); opacity:1; filter:brightness(4); }
  62%  { transform:scaleY(1);    opacity:1; filter:brightness(1.7); }
  100% { transform:scaleY(1);    opacity:1; filter:brightness(1); }
}
[data-kit="v3"] .mn-box{
  transform-origin:center;
  animation:tPowerOn .85s cubic-bezier(.2,.9,.2,1) 1;
}
/* a scanline wiping down the panel once, after it opens */
@keyframes tSweep{
  0%   { transform:translateY(-6%);  opacity:0; }
  12%  { opacity:.75; }
  100% { transform:translateY(106%); opacity:0; }
}
[data-kit="v3"] .mn-box > .mn-body{ position:relative; overflow:hidden; }
[data-kit="v3"] .mn-box > .mn-body::after{
  content:''; position:absolute; left:0; right:0; height:16%;
  background:linear-gradient(to bottom, transparent,
    color-mix(in srgb, var(--t-amber) 16%, transparent) 42%, color-mix(in srgb, var(--t-mint) 20%, transparent) 58%, transparent);
  animation:tSweep 1.5s ease-out .5s 1;
  pointer-events:none; z-index:3;
}

/* ---------- readouts in the margin ---------- */
[data-kit="v3"] .mn-feed-head{ position:relative; }
[data-kit="v3"] .mn-feed-head::after{
  content:'\25AE\25AE\25AE\25AF\25AF';
  position:absolute; right:0; bottom:7px;
  font-family:var(--t-mono); font-size:.5rem; letter-spacing:.22em;
  color:var(--ph); opacity:.55; text-shadow:0 0 7px var(--ph);
  pointer-events:none;
}

@media (prefers-reduced-motion:reduce){
  [data-kit="v3"] .mn-box{ animation:none; }
  [data-kit="v3"] .mn-box > .mn-body::after{ animation:none; display:none; }
}

/* ============================================================
   v3.4 — UNIVERSAL COMPONENTS
   ------------------------------------------------------------
   Everything above is scoped to MINDNET's .mn-* classes. This
   section covers the vocabulary the rest of the site shares, so
   one <link> dresses any page:

     page-head / eyebrow / accent / section-head   headers
     article-wrap / article-body                   posts
     cs-* / feat / fact / cp-row / hall-card       panels
     footer / footer-links                         chrome

   Still additive and still scoped to [data-kit="v3"]. The old
   site's bones are untouched: same markup, same layout, same
   colour coding — this re-skins, it does not rebuild.
   ============================================================ */

/* ---------- type ---------- */
[data-kit="v3"] h1, [data-kit="v3"] h2, [data-kit="v3"] h3{
  font-family:var(--t-term);
  color:var(--t-amber); -webkit-text-fill-color:var(--t-amber);
  background:none;
  text-shadow:0 0 4px color-mix(in srgb, var(--t-amber) 80%, transparent), 0 0 15px color-mix(in srgb, var(--t-amber) 35%, transparent);
  letter-spacing:.01em;
}
[data-kit="v3"] h1{ font-size:clamp(2rem,6vw,3.4rem); line-height:1.05; }
[data-kit="v3"] h2{ font-size:clamp(1.4rem,3.4vw,2rem); }
[data-kit="v3"] .accent{
  color:var(--t-mint); -webkit-text-fill-color:var(--t-mint);
  background:none; text-shadow:var(--t-glow);
}
[data-kit="v3"] .eyebrow, [data-kit="v3"] .section-head .tag{
  font-family:var(--t-mono); font-size:.56rem; letter-spacing:.3em;
  color:var(--t-coral); -webkit-text-fill-color:var(--t-coral);
  text-shadow:0 0 8px color-mix(in srgb, var(--t-coral) 55%, transparent);
}
[data-kit="v3"] .eyebrow::before{ content:'> '; }
[data-kit="v3"] p, [data-kit="v3"] li{ color:var(--t-rose); }
[data-kit="v3"] .sub, [data-kit="v3"] .section-subtitle,
[data-kit="v3"] .section-intro{ color:var(--t-rose); }
[data-kit="v3"] strong, [data-kit="v3"] b{
  color:var(--t-amber); -webkit-text-fill-color:var(--t-amber);
}
[data-kit="v3"] a{ color:var(--t-mint); }
[data-kit="v3"] .glow-field{ opacity:.35; }

/* ---------- posts ---------- */
[data-kit="v3"] .article-body{
  color:var(--t-rose); font-family:var(--t-mono); font-size:.84rem; line-height:1.95;
}
[data-kit="v3"] .article-title{
  font-family:var(--t-term);
  color:var(--t-amber); -webkit-text-fill-color:var(--t-amber);
  background:none; text-shadow:0 0 5px color-mix(in srgb, var(--t-amber) 75%, transparent), 0 0 18px color-mix(in srgb, var(--t-amber) 30%, transparent);
}
[data-kit="v3"] .article-date, [data-kit="v3"] .article-project{
  font-family:var(--t-mono); color:var(--t-coral); -webkit-text-fill-color:var(--t-coral);
  text-shadow:0 0 8px color-mix(in srgb, var(--t-coral) 50%, transparent);
}
[data-kit="v3"] .article-body a{
  color:var(--t-mint); border-bottom-color:color-mix(in srgb, var(--t-mint) 45%, transparent);
}
[data-kit="v3"] .back-link{ color:var(--t-coral); }
[data-kit="v3"] .back-link::before{ content:''; }

/* ---------- panels: outlined, cornered, unfilled ---------- */
[data-kit="v3"] .cs-point, [data-kit="v3"] .feat, [data-kit="v3"] .fact,
[data-kit="v3"] .cp-row, [data-kit="v3"] .hall-card, [data-kit="v3"] .door,
[data-kit="v3"] .cs-sib, [data-kit="v3"] .card, [data-kit="v3"] .box,
[data-kit="v3"] .cpa-box, [data-kit="v3"] .hoi-facts, [data-kit="v3"] .origin-box,
[data-kit="v3"] .dates-table, [data-kit="v3"] .vst-stat{
  --cnr:var(--t-coral); --cl:10px;
  background-color:transparent;
  border-color:color-mix(in srgb, var(--t-coral) 30%, transparent);
  border-radius:0;
  background-image:
    linear-gradient(var(--cnr),var(--cnr)), linear-gradient(var(--cnr),var(--cnr)),
    linear-gradient(var(--cnr),var(--cnr)), linear-gradient(var(--cnr),var(--cnr));
  background-repeat:no-repeat;
  background-size:var(--cl) 1px, 1px var(--cl), var(--cl) 1px, 1px var(--cl);
  background-position:
    -1px -1px, -1px -1px,
    calc(100% + 1px) calc(100% + 1px), calc(100% + 1px) calc(100% + 1px);
}
[data-kit="v3"] .cs-point:hover, [data-kit="v3"] .feat:hover,
[data-kit="v3"] .hall-card:hover, [data-kit="v3"] .door:hover,
[data-kit="v3"] .cp-row:hover, [data-kit="v3"] .card:hover{
  --cnr:var(--t-mint);
  border-color:var(--t-mint);
  box-shadow:0 0 6px -1px var(--t-mint), inset 0 0 34px -18px var(--t-mint);
}
[data-kit="v3"] .feat-title, [data-kit="v3"] .cs-point h3,
[data-kit="v3"] .hall-artist, [data-kit="v3"] .door h3{
  font-family:var(--t-term);
  color:var(--t-amber); -webkit-text-fill-color:var(--t-amber);
}
[data-kit="v3"] .cs-spec-k, [data-kit="v3"] .fact span,
[data-kit="v3"] .label, [data-kit="v3"] .kicker{
  color:var(--t-dim); font-family:var(--t-mono);
}
[data-kit="v3"] .cs-spec-v, [data-kit="v3"] .fact b, [data-kit="v3"] .val{
  color:var(--t-lime); -webkit-text-fill-color:var(--t-lime);
  font-family:var(--t-mono); text-shadow:0 0 8px color-mix(in srgb, var(--t-lime) 50%, transparent);
}
[data-kit="v3"] .count-line, [data-kit="v3"] .count-line b{
  color:var(--t-mint); -webkit-text-fill-color:var(--t-mint);
  font-family:var(--t-mono); text-shadow:var(--t-glow);
}

/* ---------- buttons and pills ---------- */
[data-kit="v3"] .pill, [data-kit="v3"] .btn, [data-kit="v3"] .dl-btn,
[data-kit="v3"] .mp-btn, [data-kit="v3"] .vst-waitlist, [data-kit="v3"] .hero-pill{
  border-radius:0;
  background:transparent;
  border:1px solid var(--t-coral);
  color:var(--t-coral);
  font-family:var(--t-mono);
  box-shadow:0 0 9px -3px color-mix(in srgb, var(--t-coral) 70%, transparent);
  text-shadow:0 0 7px color-mix(in srgb, var(--t-coral) 50%, transparent);
}
[data-kit="v3"] .pill:hover, [data-kit="v3"] .btn:hover,
[data-kit="v3"] .dl-btn:hover, [data-kit="v3"] .vst-waitlist:hover,
[data-kit="v3"] .hero-pill:hover{
  border-color:var(--t-mint); color:var(--t-mint);
  box-shadow:0 0 14px -2px var(--t-mint);
}

/* ---------- tables ---------- */
[data-kit="v3"] table th{
  color:var(--t-coral); border-bottom-color:color-mix(in srgb, var(--t-coral) 45%, transparent);
  font-family:var(--t-mono);
}
[data-kit="v3"] table td{
  color:var(--t-rose); border-bottom-color:color-mix(in srgb, var(--t-coral) 16%, transparent);
  font-family:var(--t-mono);
}
[data-kit="v3"] table td:first-child{ color:var(--t-amber); }

/* ---------- footer ---------- */
[data-kit="v3"] footer{
  border-top:1px solid color-mix(in srgb, var(--t-coral) 40%, transparent);
  color:var(--t-dim); font-family:var(--t-mono);
}
[data-kit="v3"] footer a, [data-kit="v3"] .footer-links a{ color:var(--t-rose); }
[data-kit="v3"] footer a:hover{ color:var(--t-mint); text-shadow:var(--t-glow); }
[data-kit="v3"] .logo{
  color:var(--t-coral); -webkit-text-fill-color:var(--t-coral);
  background:none; text-shadow:var(--t-glow);
}
[data-kit="v3"] .logo span{ color:var(--t-amber); -webkit-text-fill-color:var(--t-amber); }

/* ============================================================
   v3.5 — TRON. Brighter strokes, deeper bloom, wireframe ground.
   The reference is the josh-floyd frame: hot coral outlines,
   amber text, mint highlights, everything glowing on void.
   ============================================================ */
:root{
  --t-coral:#ff6a52;
  --t-amber:#ffd166;
  --t-mint:#5cf2cf;
  --t-lime:#e6f066;
  --t-glow:0 0 3px currentColor, 0 0 9px currentColor, 0 0 22px currentColor;
}
/* perspective grid floor + horizon haze, the Tron ground plane */
body[data-kit="v3"]::before{
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,.44) 0 1px, rgba(0,0,0,0) 1px 3px),
    linear-gradient(to bottom, transparent 55%, color-mix(in srgb, var(--t-coral) 5%, transparent) 75%, color-mix(in srgb, var(--t-mint) 8%, transparent) 100%),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--t-coral) 6%, transparent) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(0deg,  color-mix(in srgb, var(--t-coral) 6%, transparent) 0 1px, transparent 1px 64px),
    radial-gradient(ellipse 80% 62% at 50% 44%, color-mix(in srgb, var(--t-coral) 10%, transparent), transparent 70%);
}
/* every outline burns */
[data-kit="v3"] .mn-box, [data-kit="v3"] .mn-index,
[data-kit="v3"] .cs-point, [data-kit="v3"] .feat, [data-kit="v3"] .fact,
[data-kit="v3"] .cp-row, [data-kit="v3"] .hall-card, [data-kit="v3"] .door,
[data-kit="v3"] .card, [data-kit="v3"] .box, [data-kit="v3"] .vst-stat{
  border-color:var(--t-coral);
  box-shadow:
    0 0 4px color-mix(in srgb, var(--t-coral) 70%, transparent), 0 0 14px color-mix(in srgb, var(--t-coral) 45%, transparent), 0 0 38px -8px color-mix(in srgb, var(--t-coral) 50%, transparent),
    inset 0 0 28px -12px color-mix(in srgb, var(--t-coral) 35%, transparent);
}
[data-kit="v3"] .mn-item{
  border-color:color-mix(in srgb, var(--t-coral) 40%, transparent);
  box-shadow:0 0 6px -2px color-mix(in srgb, var(--t-coral) 50%, transparent);
}
[data-kit="v3"] .mn-item:first-child, [data-kit="v3"] .mn-item:hover{
  box-shadow:0 0 6px var(--ph), 0 0 18px -4px var(--ph), inset 0 0 36px -16px var(--ph);
}
/* text burns too */
[data-kit="v3"] h1, [data-kit="v3"] h2, [data-kit="v3"] h3, [data-kit="v3"] .mn-item-title,
[data-kit="v3"] .article-title, [data-kit="v3"] .feat-title{
  text-shadow:0 0 3px color-mix(in srgb, var(--t-amber) 95%, transparent), 0 0 10px color-mix(in srgb, var(--t-amber) 60%, transparent), 0 0 28px color-mix(in srgb, var(--t-amber) 30%, transparent);
}
[data-kit="v3"] .mn-tk-k, [data-kit="v3"] .mn-feed-code, [data-kit="v3"] .mn-tab.active{
  box-shadow:0 0 8px var(--t-mint), 0 0 20px -2px var(--t-mint);
}
/* the wordmark burns hardest */
.k3-word{
  filter:drop-shadow(0 0 3px var(--k3-ink, var(--t-coral)))
         drop-shadow(0 0 10px var(--k3-ink, var(--t-coral)))
         drop-shadow(0 0 28px color-mix(in srgb, var(--t-coral) 60%, transparent));
}

/* ============================================================
   v3.6 — body copy stays readable; the new art goes behind it
   ============================================================ */

/* The matrix layer sets VT323 on p/li/td directly, which beats a rule on
   the PARENT (.article-body) because inheritance loses to a direct match.
   VT323 is a display face: fine for a headline, brutal across 600 words.
   Target the elements themselves so mono wins for running text. */
/* The matrix rule is `body :not(i):not(.fa):not([class*="icon"])` with
   !important: specificity (0,2,2). Leading `body` here ties it, and the
   later sheet wins the tie. Hero taglines (.sub) stay VT323 on purpose:
   one line of display text, not running copy. */
body[data-kit="v3"] .article-body p, body[data-kit="v3"] .article-body li,
body[data-kit="v3"] .article-body dd, body[data-kit="v3"] .article-body td,
body[data-kit="v3"] .mn-item-excerpt, body[data-kit="v3"] .cp-row-b,
body[data-kit="v3"] .feat p, body[data-kit="v3"] .cs-point p, body[data-kit="v3"] .hall-blurb,
body[data-kit="v3"] .overview p, body[data-kit="v3"] .section-intro{
  font-family:var(--t-mono) !important;
  font-size:.86rem;
  line-height:1.9;
}

/* Per-page backgrounds. The site already keys each page's art off
   <body data-mx-bg="…">; these override the image behind each existing key
   so every page picks up the new library with NO markup change. All nine
   are human-made Unsplash stills from the asset drop, re-encoded. The ten
   AI-generated nebulae in the same folder are deliberately not used:
   the AI Use Policy says no generated imagery after June 2026, and they
   are dated August. */
[data-kit="v3"][data-mx-bg="story-red"]      .mx-bg{ background-image:url('/assets/art/bg-glitch-blue.webp'); }
[data-kit="v3"][data-mx-bg="nebula-blue-red"].mx-bg,
[data-kit="v3"][data-mx-bg="nebula-blue-red"] .mx-bg{ background-image:url('/assets/art/bg-blackhole.webp'); }
[data-kit="v3"][data-mx-bg="galaxy-purple"]  .mx-bg{ background-image:url('/assets/art/bg-milkyway.webp'); }
[data-kit="v3"][data-mx-bg="vst-tunnel"]     .mx-bg{ background-image:url('/assets/art/bg-wire-curve.webp'); }
[data-kit="v3"][data-mx-bg="nebula-red"]     .mx-bg{ background-image:url('/assets/art/bg-glitch-warm.webp'); }
[data-kit="v3"][data-mx-bg="andromeda"]      .mx-bg{ background-image:url('/assets/art/bg-hex.webp'); }
[data-kit="v3"][data-mx-bg="vst-redblue"]    .mx-bg{ background-image:url('/assets/art/bg-light-curves.webp'); }
[data-kit="v3"][data-mx-bg="vst-purple"]     .mx-bg{ background-image:url('/assets/art/bg-wire-arc.webp'); }
[data-kit="v3"][data-mx-bg="duality-smoke"]  .mx-bg{ background-image:url('/assets/art/bg-rain.webp'); }
/* "church" is a specific interior and keeps its own image */

/* the art sits low so the neon reads over it */
body[data-kit="v3"] .mx-bg{
  opacity:.28;
  filter:saturate(.7) contrast(1.15);
  mix-blend-mode:screen;
}

/* ============================================================
   v3.7 — motion. One loop per hero, clipped to the hero, behind
   everything that was already there. Both files are 960x540, six
   seconds, muted, and under 700 KB together.
   ============================================================ */
[data-kit="v3"] .k3-vid-host{ position:relative; overflow:hidden; isolation:isolate; }
[data-kit="v3"] .k3-hero-vid{
  position:absolute; inset:0; z-index:-2; pointer-events:none;
  width:100%; height:100%; object-fit:cover;
  opacity:.55;
  filter:saturate(1.25) contrast(1.12) brightness(.9);
  /* fade the edges into the terminal so the loop reads as a window, not a banner */
  -webkit-mask-image:
    linear-gradient(180deg, transparent 0, #000 14%, #000 82%, transparent 100%),
    linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(180deg, transparent 0, #000 14%, #000 82%, transparent 100%),
    linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
  mask-composite:intersect;
}
/* scanlines over the footage so it sits in the same CRT as the text */
[data-kit="v3"] .k3-vid-host::after{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.42) 0 1px, transparent 1px 3px);
}
@media (prefers-reduced-motion:reduce){
  [data-kit="v3"] .k3-hero-vid{ display:none; }
}

/* v3.7b — the matrix layer lifts every child of #home/#absynth to
   z-index:1 with an ID selector, which beat the video's -2. Match it
   with one more class so the tie breaks our way (1,3,1 vs 1,3,0). */
body[data-kit="v3"] #home.mx-window > .k3-hero-vid,
body[data-kit="v3"] .k3-vid-host > .k3-hero-vid{ position:absolute; z-index:-2; }
/* the footage is bright; pool darkness under the copy so it stays legible */
[data-kit="v3"] .k3-hero-vid{ opacity:.5; }
[data-kit="v3"] .k3-vid-host::after{
  background:
    radial-gradient(ellipse 62% 58% at 50% 52%, rgba(5,4,8,.78), rgba(5,4,8,.3) 62%, rgba(5,4,8,0) 100%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.42) 0 1px, transparent 1px 3px);
}

/* v3.8 — gradient-text trap, closed. The matrix layer clips a moving
   gradient to the text of pills/buttons/eyebrows and sets the fill
   transparent. The kit removes that gradient (buttons are outlined),
   so without this the label is invisible. Found on the Labs hero. */
[data-kit="v3"] .pill, [data-kit="v3"] .hero-pill, [data-kit="v3"] .btn,
[data-kit="v3"] .dl-btn, [data-kit="v3"] .mp-btn, [data-kit="v3"] .vst-waitlist,
[data-kit="v3"] .eyebrow, [data-kit="v3"] .section-label,
[data-kit="v3"] footer a,
[data-kit="v3"] .pill span, [data-kit="v3"] .hero-pill span,
[data-kit="v3"] .btn span, [data-kit="v3"] .dl-btn span{
  -webkit-text-fill-color:currentColor;
  -webkit-background-clip:border-box; background-clip:border-box;
  background-image:none; /* with the clip back to border-box the matrix gradient would paint as a slab */
  animation:none;
}
[data-kit="v3"] .pill span, [data-kit="v3"] .hero-pill span,
[data-kit="v3"] .btn span, [data-kit="v3"] .dl-btn span{ color:inherit; }

/* Album/track titles: the matrix gives them a drifting gradient and
   color:transparent. Under the kit they go flat neon like every other
   heading, so the colour has to be stated, not inherited. */
[data-kit="v3"] .album-title, [data-kit="v3"] .track-title{
  color:var(--t-coral); -webkit-text-fill-color:var(--t-coral);
  background-image:none; animation:none; filter:none;
  text-shadow:0 0 2px currentColor, 0 0 8px color-mix(in srgb, var(--t-coral) 55%, transparent);
}
[data-kit="v3"] .track-title{ color:var(--t-amber); -webkit-text-fill-color:var(--t-amber);
  text-shadow:0 0 2px currentColor, 0 0 8px color-mix(in srgb, var(--t-amber) 50%, transparent); }
/* Spans inside headings: matrix forces them transparent so they fall
   into the parent's gradient clip. Kit headings are flat, so a span must
   paint itself. Classed spans (.crimson, .accent…) keep their own colour. */
[data-kit="v3"] h1 span, [data-kit="v3"] h2 span, [data-kit="v3"] h3 span,
[data-kit="v3"] .title span, [data-kit="v3"] .logo span{ -webkit-text-fill-color:currentColor; }
[data-kit="v3"] h1 span:not([class]), [data-kit="v3"] h2 span:not([class]),
[data-kit="v3"] h3 span:not([class]), [data-kit="v3"] .title span:not([class]){ color:inherit; }

/* v3.9 — hero pills. The matrix paints each one as a solid three-colour
   gradient slab with !important, which under the kit left coral text on a
   red/blue/green block: unreadable, and the only filled button on the site.
   Outlined neon, one colour per destination, same as every other control. */
body[data-kit="v3"] .hero-pill,
body[data-kit="v3"] .hero-pill.absynth, body[data-kit="v3"] .hero-pill.seraph, body[data-kit="v3"] .hero-pill.labs{
  --pc:var(--t-coral);
  background:transparent !important; background-image:none !important;
  border:1px solid var(--pc) !important;
  color:var(--pc) !important; -webkit-text-fill-color:var(--pc) !important;
  text-shadow:0 0 2px currentColor, 0 0 9px currentColor !important;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.35), 0 0 10px -2px var(--pc), inset 0 0 14px -8px var(--pc) !important;
  filter:none !important;
}
body[data-kit="v3"] .hero-pill.seraph{ --pc:#6fbccd; }
body[data-kit="v3"] .hero-pill.labs{ --pc:var(--t-mint); }
body[data-kit="v3"] .hero-pill:hover{
  background:var(--pc) !important; color:var(--t-void) !important; -webkit-text-fill-color:var(--t-void) !important;
  text-shadow:none !important; box-shadow:0 0 18px -2px var(--pc) !important;
}

/* ============================================================
   v4 — refined against the ART STYLE REFERENCE set (2026-11-08).
   Measured: 11 of 14 references are a single phosphor on near-black
   (green 119-157°, amber 36-45°, blueprint blue 225°, red 358°) with
   0-9% of lit pixels off-hue. So: one phosphor per section, imagery
   duotoned to it, data drawn as leaders and brackets, schematics in
   blueprint blue, glow in the glass rather than on every letter.
   ============================================================ */

/* ---- 4.1 header stacking: dropdowns were sliding under .mn-box/.hero
   (both position:relative; z-index:2, later in the DOM). z-index only —
   never position, that unhides the mobile drawer. */
body[data-kit="v3"] header{ z-index:80; }

/* ---- 4.2 phosphor per section. Every kit token is remapped, so the whole
   layer follows. <body data-phos="…"> is set per page by the rollout. */
body[data-kit="v3"][data-phos="green"]{
  --t-coral:#5dff7a; --t-amber:#c8ffd4; --t-mint:#2ee06a; --t-lime:#9dffb0;
  --t-rose:#2ee06a;  --t-dim:#1e5a33;  --t-void:#020704; --t-deep:#06130a;
  --ph-rot:95deg; --ph-sat:2.4; --ph-bri:.92;
}
body[data-kit="v3"][data-phos="amber"]{
  --t-coral:#ffc24a; --t-amber:#ffe7b0; --t-mint:#f0a030; --t-lime:#ffd98a;
  --t-rose:#f0a030;  --t-dim:#5a4420;  --t-void:#0e0904; --t-deep:#1a120a;
  --ph-rot:-6deg; --ph-sat:2.6; --ph-bri:.95;
}
body[data-kit="v3"][data-phos="blue"]{
  --t-coral:#8db4ff; --t-amber:#eef3ff; --t-mint:#5a8cff; --t-lime:#b9d0ff;
  --t-rose:#5a8cff;  --t-dim:#22355e;  --t-void:#010103; --t-deep:#060a16;
  --ph-rot:185deg; --ph-sat:1.8; --ph-bri:.95;
}
body[data-kit="v3"][data-phos="red"]{
  --t-coral:#ff5a66; --t-amber:#ffd2d4; --t-mint:#e0334a; --t-lime:#ff9aa3;
  --t-rose:#e0334a;  --t-dim:#5a2028;  --t-void:#0a0608; --t-deep:#140a0d;
  --ph-rot:-52deg; --ph-sat:2.2; --ph-bri:.9;
}
/* glow belongs to the glass: a tight core and a soft spill, not three rings */
body[data-kit="v3"]{ --t-glow:0 0 1px currentColor, 0 0 7px currentColor; background-color:var(--t-void); }

/* hero pills preview their destination's phosphor */
body[data-kit="v3"] .hero-pill.absynth{ --pc:#ff5a66; }
body[data-kit="v3"] .hero-pill.seraph { --pc:#8db4ff; }
body[data-kit="v3"] .hero-pill.labs   { --pc:#ffc24a; }

/* ---- 4.3 imagery takes the phosphor (Rogue Scroll). Full colour on hover
   so the art is still there for anyone who wants it. */
/* Album art stays full colour (the red wash over every cover was too much —
   user, 2026-11-08). The phosphor treatment is for footage and portraits. */
[data-kit="v3"] :is(.hall-art, .ambient-art) img,
[data-kit="v3"] .author-pic, [data-kit="v3"] .k3-hero-vid{
  filter:grayscale(1) sepia(1) saturate(var(--ph-sat,2.2)) hue-rotate(var(--ph-rot,-52deg))
         brightness(var(--ph-bri,.9)) contrast(1.15);
  transition:filter .35s ease;
}
[data-kit="v3"] .hall-art:hover img{ filter:none; }
[data-kit="v3"] .k3-hero-vid{ opacity:.6; }

/* ---- 4.4 schematics are blue (Imperial blueprints): screenshots sit in a
   wireframe frame with a tick rail and a figure label, duotoned to blue. */
[data-kit="v3"] :is(.article-shot, .cs-shot){
  --bp:#8db4ff; position:relative; margin:34px 0 30px; padding:16px;
  border:1px solid rgba(141,180,255,.55);
  background:
    repeating-linear-gradient(90deg, rgba(141,180,255,.5) 0 1px, transparent 1px 12px) 0 0 / 100% 5px no-repeat,
    repeating-linear-gradient(0deg,  rgba(141,180,255,.5) 0 1px, transparent 1px 12px) 0 0 / 5px 100% no-repeat,
    linear-gradient(rgba(141,180,255,.04), rgba(141,180,255,.02));
  box-shadow:0 0 26px -10px var(--bp), inset 0 0 40px -30px var(--bp);
}
[data-kit="v3"] :is(.article-shot, .cs-shot)::before{
  content:'FIG. // SCHEMATIC VIEW'; position:absolute; top:-8px; left:14px;
  padding:0 7px; background:var(--t-void);
  font:10px/1.4 var(--t-mono); letter-spacing:.22em; color:var(--bp);
}
[data-kit="v3"] :is(.article-shot, .cs-shot)::after{
  content:'SCALE 1:1  ·  REV A'; position:absolute; bottom:-7px; right:14px;
  padding:0 7px; background:var(--t-void);
  font:9px/1.4 var(--t-mono); letter-spacing:.2em; color:rgba(141,180,255,.7);
}
[data-kit="v3"] :is(.article-shot, .cs-shot) img{
  display:block; width:100%; border:1px solid rgba(141,180,255,.25);
  filter:grayscale(1) sepia(1) saturate(1.7) hue-rotate(185deg) brightness(.95) contrast(1.1);
  transition:filter .35s ease;
}
[data-kit="v3"] :is(.article-shot, .cs-shot):hover img{ filter:none; }
[data-kit="v3"] :is(.article-shot, .cs-shot) figcaption{
  margin-top:10px; font:10.5px/1.7 var(--t-mono); letter-spacing:.08em;
  text-transform:uppercase; color:rgba(141,180,255,.75);
}

/* ---- 4.5 data as leaders and brackets (Skynet boot screen):
   LABEL ........................ [ VALUE ] */
[data-kit="v3"] .k3-status{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
  gap:2px 26px; padding:10px 18px 12px; border-top:1px solid var(--t-dim);
}
[data-kit="v3"] .k3-status > div{ display:flex; align-items:baseline; gap:8px; white-space:nowrap; color:var(--t-rose); }
[data-kit="v3"] .k3-status > div::after{
  content:''; order:1; flex:1 1 14px; border-bottom:1px dotted var(--t-dim); transform:translateY(-3px);
}
[data-kit="v3"] .k3-status > div > b{ order:2; color:var(--t-coral); font-weight:400; }
[data-kit="v3"] .k3-status > div > b::before{ content:'[ '; color:var(--t-dim); }
[data-kit="v3"] .k3-status > div > b::after { content:' ]'; color:var(--t-dim); }
[data-kit="v3"] .k3-status > div > b.ok  { color:var(--t-mint); }
[data-kit="v3"] .k3-status > div > b.warn{ color:var(--t-amber); }
[data-kit="v3"] .k3-status > #k3Clock::after{ display:none; }
[data-kit="v3"] .k3-status > #k3Clock{ justify-content:flex-end; color:var(--t-coral); }

[data-kit="v3"] .cs-specs{
  display:grid; grid-template-columns:1fr; gap:7px; position:relative;
  padding:20px 20px 16px; margin:26px 0;
  border:1px solid var(--t-dim); background:transparent;
}
[data-kit="v3"] .cs-specs::before{
  content:'SPEC SHEET'; position:absolute; top:-7px; left:12px; padding:0 7px;
  background:var(--t-void); font:10px/1.3 var(--t-mono); letter-spacing:.24em; color:var(--t-rose);
}
[data-kit="v3"] .cs-spec{ display:flex; align-items:baseline; gap:10px; border:0; padding:0; background:transparent; }
[data-kit="v3"] .cs-spec-k{ order:0; flex:0 0 auto; font:11px/1.6 var(--t-mono); letter-spacing:.18em; text-transform:uppercase; color:var(--t-rose); }
[data-kit="v3"] .cs-spec::after{ content:''; order:1; flex:1 1 16px; border-bottom:1px dotted var(--t-dim); transform:translateY(-4px); }
[data-kit="v3"] .cs-spec-v{ order:2; font-family:var(--t-term); font-size:1.05rem; color:var(--t-coral); text-shadow:var(--t-glow); }
[data-kit="v3"] .cs-spec-v::before{ content:'[ '; color:var(--t-dim); text-shadow:none; }
[data-kit="v3"] .cs-spec-v::after { content:' ]'; color:var(--t-dim); text-shadow:none; }

/* ---- 4.6 the wordmark, rebuilt. The sprite is now 26 letter-only cells,
   60px square, hard-edged alpha (the old one kept the sheet's rails and
   pins and read as hollow, hazy letters). Framed like the Skynet title. */
.k3-word{
  --k3-track:.1;
  filter:drop-shadow(0 0 1px var(--k3-ink, var(--t-coral)))
         drop-shadow(0 0 9px color-mix(in srgb, var(--k3-ink, var(--t-coral)) 60%, transparent));
}
.k3-gl{
  width:var(--k3-gs,40px);
  -webkit-mask-size:calc(var(--k3-gs,40px) * 26) 100%;
          mask-size:calc(var(--k3-gs,40px) * 26) 100%;
  -webkit-mask-position:calc(var(--k3-i,0) * var(--k3-gs,40px) * -1) 0;
          mask-position:calc(var(--k3-i,0) * var(--k3-gs,40px) * -1) 0;
}
.k3-sp{ width:calc(var(--k3-gs,40px) * .5); }
[data-kit="v3"] .mn-title{
  display:inline-flex; flex-direction:column; align-items:flex-start; gap:6px;
  padding:16px 24px 12px; margin:6px 0 10px;
  border:3px double var(--t-coral); position:relative;
  box-shadow:0 0 22px -10px var(--t-coral), inset 0 0 30px -24px var(--t-coral);
}
[data-kit="v3"] .mn-title::before{
  content:'SYS // ABSYNTH808 // NODE 01'; position:absolute; top:-8px; left:14px; padding:0 7px;
  background:var(--t-void); font:9.5px/1.4 var(--t-mono); letter-spacing:.24em; color:var(--t-rose);
}
[data-kit="v3"] .mn-title-main{ filter:none; margin:0; line-height:1; }
[data-kit="v3"] .mn-title-sub{
  font:11px/1 var(--t-mono); letter-spacing:.42em; text-transform:uppercase; color:var(--t-rose); margin:0;
}
[data-kit="v3"] .mn-title-sub::before{ content:'// '; color:var(--t-dim); }

/* ---- 4.7 glitch copies follow the phosphor. The matrix fires a red and a
   cyan ghost of each heading when it scrolls into view; on a green page the
   "Stream of Thought" head read pink. Same effect, same phosphor. */
[data-kit="v3"] .mx-glitch.mx-fire::before{
  color:var(--ph, var(--t-coral)); -webkit-text-fill-color:var(--ph, var(--t-coral));
}
[data-kit="v3"] .mx-glitch.mx-fire::after{
  color:var(--t-amber); -webkit-text-fill-color:var(--t-amber);
}

/* ---- 4.8 grids that drew their cell borders from a lit background with a
   1px gap: a short last row left a glowing empty block. Cells carry their
   own hairline now; the grid itself is dark. */
[data-kit="v3"] .album-grid, [data-kit="v3"] .track-grid, [data-kit="v3"] .credit-grid{
  gap:14px; background:transparent;
}
[data-kit="v3"] .album-card{
  background:transparent; border:1px solid var(--t-dim); padding:18px 18px 16px;
}
[data-kit="v3"] .album-card:hover{ border-color:var(--t-rose); box-shadow:0 0 18px -8px var(--t-coral); }
[data-kit="v3"] .album-cover{ border-color:var(--t-dim); border-radius:0; }
[data-kit="v3"] .album-year{ font-family:var(--t-mono); color:var(--t-rose); letter-spacing:.14em; }
[data-kit="v3"] .release-sub{
  font:11px/1.6 var(--t-mono); letter-spacing:.3em; text-transform:uppercase; color:var(--t-rose);
}
[data-kit="v3"] .release-sub::before{ content:'// '; color:var(--t-dim); }

/* ============================================================
   v4.9 — MMED: Live, rebuilt as an instrument. The amber tracker
   references (neofetch, braille charts): one phosphor, readouts in
   brackets, a log rail you can scrub, every clip behind amber glass.
   mmed.html carries data-phos="amber" for this.
   ============================================================ */
[data-kit="v3"] .mmed-shell{ --cnr:var(--t-coral); }

/* readouts */
[data-kit="v3"] .mmed-stats{ display:grid; grid-template-columns:repeat(auto-fit, minmax(170px,1fr)); gap:12px; }
[data-kit="v3"] .mmed-stat{
  position:relative; padding:14px 16px 12px; background:transparent; border:1px solid var(--t-dim);
  background-image:
    linear-gradient(var(--cnr),var(--cnr)), linear-gradient(var(--cnr),var(--cnr)),
    linear-gradient(var(--cnr),var(--cnr)), linear-gradient(var(--cnr),var(--cnr));
  background-size:14px 1px, 1px 14px, 14px 1px, 1px 14px;
  background-position:0 0, 0 0, 100% 100%, 100% 100%;
  background-repeat:no-repeat;
}
[data-kit="v3"] .mmed-stat-k{ font:10px/1.4 var(--t-mono); letter-spacing:.26em; text-transform:uppercase; color:var(--t-rose); }
[data-kit="v3"] .mmed-stat-k::before{ content:'// '; color:var(--t-dim); }
[data-kit="v3"] .mmed-stat-v{ font-family:var(--t-term); font-size:2rem; line-height:1.1; color:var(--t-coral); -webkit-text-fill-color:var(--t-coral); text-shadow:var(--t-glow); margin-top:4px; }
[data-kit="v3"] .mmed-stat-v::before{ content:'[ '; color:var(--t-dim); text-shadow:none; font-size:.7em; vertical-align:.12em; }
[data-kit="v3"] .mmed-stat-v::after { content:' ]'; color:var(--t-dim); text-shadow:none; font-size:.7em; vertical-align:.12em; }

/* prompt + controls */
[data-kit="v3"] .mmed-search input{
  background:transparent; border:0; border-bottom:1px solid var(--t-dim); border-radius:0;
  color:var(--t-coral); -webkit-text-fill-color:var(--t-coral); caret-color:var(--t-coral);
  font-family:var(--t-term); font-size:1.1rem; padding:10px 10px 8px 28px;
}
[data-kit="v3"] .mmed-search input:focus{ border-color:var(--t-coral); box-shadow:0 1px 0 var(--t-coral), 0 8px 18px -12px var(--t-coral); }
[data-kit="v3"] .mmed-search input::placeholder{ color:var(--t-dim); -webkit-text-fill-color:var(--t-dim); }
[data-kit="v3"] .mmed-search::before{ color:var(--t-coral); text-shadow:var(--t-glow); }
[data-kit="v3"] .mmed-btn{
  background:transparent; border:1px solid var(--t-dim); border-radius:0;
  color:var(--t-rose); -webkit-text-fill-color:var(--t-rose);
  font:10.5px/1 var(--t-mono); letter-spacing:.2em; text-transform:uppercase; padding:10px 14px;
}
[data-kit="v3"] .mmed-btn:hover{ border-color:var(--t-coral); color:var(--t-coral); -webkit-text-fill-color:var(--t-coral); box-shadow:0 0 12px -4px var(--t-coral); }
[data-kit="v3"] .mmed-btn.on{ background:var(--t-coral); border-color:var(--t-coral); color:var(--t-void); -webkit-text-fill-color:var(--t-void); text-shadow:none; }

/* run divider inside the feed */
[data-kit="v3"] .mmed-era{
  background:transparent; border:0; border-top:1px dotted var(--t-dim); padding:18px 0 6px; margin:34px 0 10px;
}
[data-kit="v3"] .mmed-era-k{ font:10px/1.4 var(--t-mono); letter-spacing:.3em; text-transform:uppercase; color:var(--t-rose); }
[data-kit="v3"] .mmed-era-k::before{ content:'── '; color:var(--t-dim); }
[data-kit="v3"] .mmed-era-t{ font-family:var(--t-term); font-size:1.5rem; color:var(--t-coral); -webkit-text-fill-color:var(--t-coral); text-shadow:var(--t-glow); }
[data-kit="v3"] .mmed-era-m{ font:11px/1.8 var(--t-mono); color:var(--t-rose); }

/* day panels: outlined, cornered, day bar as a leader line */
[data-kit="v3"] .mmed-day{
  background:transparent; border:1px solid var(--t-dim); border-radius:0; padding:14px 16px 12px; position:relative;
  background-image:
    linear-gradient(var(--cnr),var(--cnr)), linear-gradient(var(--cnr),var(--cnr)),
    linear-gradient(var(--cnr),var(--cnr)), linear-gradient(var(--cnr),var(--cnr)),
    linear-gradient(var(--cnr),var(--cnr)), linear-gradient(var(--cnr),var(--cnr)),
    linear-gradient(var(--cnr),var(--cnr)), linear-gradient(var(--cnr),var(--cnr));
  background-size:16px 1px, 1px 16px, 16px 1px, 1px 16px, 16px 1px, 1px 16px, 16px 1px, 1px 16px;
  background-position:0 0, 0 0, 100% 0, 100% 0, 0 100%, 0 100%, 100% 100%, 100% 100%;
  background-repeat:no-repeat;
  box-shadow:none;
}
[data-kit="v3"] .mmed-day:hover{ border-color:var(--t-rose); box-shadow:0 0 22px -12px var(--t-coral); }
[data-kit="v3"] .mmed-day.is-aside{ border-style:dashed; }
[data-kit="v3"] .mmed-day-bar{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; border:0; padding:0 0 10px; margin:0 0 12px; border-bottom:1px solid var(--t-dim); }
[data-kit="v3"] .mmed-day-n{ font-family:var(--t-term); font-size:1.5rem; color:var(--t-coral); -webkit-text-fill-color:var(--t-coral); text-shadow:var(--t-glow); margin:0; }
[data-kit="v3"] .mmed-day-bar time{ font:11px/1.6 var(--t-mono); letter-spacing:.16em; color:var(--t-rose); }
[data-kit="v3"] .mmed-day-bar time::before{ content:'[ '; color:var(--t-dim); }
[data-kit="v3"] .mmed-day-bar time::after { content:' ]'; color:var(--t-dim); }
[data-kit="v3"] .mmed-day-meta{ margin-left:auto; font:10px/1.6 var(--t-mono); letter-spacing:.18em; text-transform:uppercase; color:var(--t-dim); }
[data-kit="v3"] .mmed-tag{
  font:9.5px/1 var(--t-mono); letter-spacing:.22em; text-transform:uppercase; padding:4px 7px;
  border:1px solid currentColor; border-radius:0; background:transparent;
}
[data-kit="v3"] .mmed-tag.latest{ color:var(--t-void); -webkit-text-fill-color:var(--t-void); background:var(--t-coral); border-color:var(--t-coral); box-shadow:0 0 12px -2px var(--t-coral); }
[data-kit="v3"] .mmed-tag.recap { color:var(--t-amber); -webkit-text-fill-color:var(--t-amber); }
[data-kit="v3"] .mmed-tag.aside { color:var(--t-rose);  -webkit-text-fill-color:var(--t-rose); }
[data-kit="v3"] .mmed-tag.run   { color:var(--t-mint);  -webkit-text-fill-color:var(--t-mint); }

/* clips behind amber glass */
[data-kit="v3"] .mmed-clip{ background:transparent; }
[data-kit="v3"] .mmed-stage{ border:1px solid var(--t-dim); border-radius:0; background:var(--t-deep); }
[data-kit="v3"] .mmed-thumb img{
  opacity:1;
  filter:grayscale(1) sepia(1) saturate(var(--ph-sat,2.6)) hue-rotate(var(--ph-rot,-6deg)) brightness(.85) contrast(1.15);
  transition:filter .35s ease, transform .35s ease;
}
[data-kit="v3"] .mmed-thumb:hover img{ filter:none; transform:none; }
[data-kit="v3"] .mmed-thumb::after{
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.38) 0 1px, transparent 1px 3px);
  opacity:1;
}
[data-kit="v3"] .mmed-play{
  width:44px; height:44px; border-radius:0; background:rgba(0,0,0,.55);
  border:1px solid var(--t-coral); box-shadow:0 0 14px -4px var(--t-coral), inset 0 0 10px -6px var(--t-coral);
}
[data-kit="v3"] .mmed-play svg{ fill:var(--t-coral); }
[data-kit="v3"] .mmed-thumb:hover .mmed-play{ background:var(--t-coral); box-shadow:0 0 22px -4px var(--t-coral); }
[data-kit="v3"] .mmed-thumb:hover .mmed-play svg{ fill:var(--t-void); }
[data-kit="v3"] .mmed-clip-foot{ display:flex; justify-content:space-between; font:10px/1.6 var(--t-mono); letter-spacing:.18em; text-transform:uppercase; color:var(--t-rose); padding-top:8px; }
[data-kit="v3"] .mmed-clip-part::before{ content:'// '; color:var(--t-dim); }
[data-kit="v3"] .mmed-clip-views{ color:var(--t-dim); }

/* notes */
[data-kit="v3"] .mmed-note{ border:0; border-top:1px dotted var(--t-dim); background:transparent; margin-top:12px; padding-top:10px; }
[data-kit="v3"] .mmed-note-k{ font:10px/1.5 var(--t-mono); letter-spacing:.26em; text-transform:uppercase; color:var(--t-rose); }
[data-kit="v3"] .mmed-note-k::before{ content:'// '; color:var(--t-dim); }
[data-kit="v3"] .mmed-note-body{ font:12px/1.8 var(--t-mono); color:var(--t-amber); }
[data-kit="v3"] .mmed-note-body.empty{ color:var(--t-dim); font-style:normal; }
[data-kit="v3"] .mmed-note-draft{ color:var(--t-mint); }
[data-kit="v3"] .mmed-note textarea{
  background:transparent; border:1px dashed var(--t-dim); border-radius:0; color:var(--t-coral); -webkit-text-fill-color:var(--t-coral);
  font:12px/1.7 var(--t-mono); caret-color:var(--t-coral);
}

/* the log rail */
[data-kit="v3"] .mmed-rail{ background:transparent; border:1px solid var(--t-dim); border-radius:0; box-shadow:0 0 30px -18px var(--t-coral); }
[data-kit="v3"] .mmed-rail-head{
  background:var(--t-coral); color:var(--t-void); -webkit-text-fill-color:var(--t-void);
  font:10px/1 var(--t-mono); letter-spacing:.3em; text-transform:uppercase; padding:8px 12px; border:0; text-shadow:none;
}
[data-kit="v3"] .mmed-rail-head::before{ content:'■ '; }
[data-kit="v3"] .mmed-rail-list{ scrollbar-width:thin; scrollbar-color:var(--t-dim) transparent; }
[data-kit="v3"] .mmed-rail-list::-webkit-scrollbar-thumb{ background:var(--t-dim); }
[data-kit="v3"] .mmed-rail-era{
  font:9.5px/1.4 var(--t-mono); letter-spacing:.28em; text-transform:uppercase; color:var(--t-rose);
  padding:12px 12px 6px; background:transparent; border:0; border-top:1px dotted var(--t-dim);
}
[data-kit="v3"] .mmed-rail-era::before{ content:'── '; color:var(--t-dim); }
[data-kit="v3"] .mmed-rail-item{
  display:grid; grid-template-columns:auto 1fr auto; align-items:baseline; gap:10px;
  width:100%; padding:7px 12px 7px 10px; background:transparent; border:0; border-left:2px solid transparent; border-radius:0;
  color:var(--t-amber); text-align:left; cursor:pointer;
}
[data-kit="v3"] .mmed-rail-item:hover,
[data-kit="v3"] .mmed-rail-item.on, [data-kit="v3"] .mmed-rail-item.active, [data-kit="v3"] .mmed-rail-item[aria-current]{
  background:color-mix(in srgb, var(--t-coral) 12%, transparent); border-left-color:var(--t-coral);
}
[data-kit="v3"] .mmed-rail-n{ font-family:var(--t-term); font-size:1.05rem; color:var(--t-coral); -webkit-text-fill-color:var(--t-coral); text-shadow:var(--t-glow); min-width:3.2em; }
[data-kit="v3"] .mmed-rail-d{
  font:10px/1.5 var(--t-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--t-rose);
  background:repeating-linear-gradient(90deg, var(--t-dim) 0 1px, transparent 1px 5px) left 55% / 100% 1px no-repeat;
}
[data-kit="v3"] .mmed-rail-c{ font:10px/1.5 var(--t-mono); color:var(--t-rose); }
[data-kit="v3"] .mmed-rail-c::before{ content:'[ '; color:var(--t-dim); }
[data-kit="v3"] .mmed-rail-c::after { content:' ]'; color:var(--t-dim); }
[data-kit="v3"] .mmed-rail-note{ color:var(--t-mint); }
[data-kit="v3"] .mmed-rail-foot{ font:10px/1.6 var(--t-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--t-dim); padding:8px 12px; border-top:1px solid var(--t-dim); background:transparent; }
[data-kit="v3"] .mmed-rail-foot::before{ content:'// '; }

/* same 1px-gap fix for the other lit grids */
[data-kit="v3"] .beat-grid, [data-kit="v3"] .beat-scroller, [data-kit="v3"] .credit-list{ gap:14px; background:transparent; }

/* the page sets -webkit-text-fill-color on these directly; match it */
[data-kit="v3"] .mmed-rail-d, [data-kit="v3"] .mmed-rail-c, [data-kit="v3"] .mmed-rail-era,
[data-kit="v3"] .mmed-stat-k, [data-kit="v3"] .mmed-era-k, [data-kit="v3"] .mmed-era-m,
[data-kit="v3"] .mmed-day-meta, [data-kit="v3"] .mmed-clip-foot, [data-kit="v3"] .mmed-note-k,
[data-kit="v3"] .mmed-rail-foot, [data-kit="v3"] .mmed-search::before{ -webkit-text-fill-color:currentColor; }
[data-kit="v3"] .mmed-rail-item{ -webkit-text-fill-color:var(--t-amber); }
[data-kit="v3"] .mmed-rail-c{ color:var(--t-rose); -webkit-text-fill-color:var(--t-rose); }

/* ============================================================
   v4.10 — Absynth Accounts UI (.aa-*). Same terminal grammar:
   hairline panels, leaders, brackets, one phosphor via the tokens.
   ============================================================ */
/* header link / chip */
header nav .aa-nav{ display:inline-flex; align-items:center; gap:7px; }
header nav .aa-nav-pic{ width:18px; height:18px; border:1px solid var(--t-coral, #ff6a52); object-fit:cover; }
header nav .aa-nav-mode{ font:8px/1 var(--t-mono, monospace); letter-spacing:.2em; padding:2px 4px; border:1px solid currentColor; opacity:.7; }
[data-kit="v3"] header nav .aa-nav.on{ color:var(--t-mint); }

/* hearts on tiles */
.aa-heart{
  position:absolute; top:8px; right:8px; z-index:5; width:28px; height:28px; display:grid; place-items:center;
  background:rgba(0,0,0,.6); border:1px solid var(--t-dim, #555); cursor:pointer; opacity:0; transition:opacity .2s, border-color .2s;
}
.aa-heart svg{ width:14px; height:14px; fill:none; stroke:var(--t-coral, #ff6a52); stroke-width:1.6; }
.track-tile:hover .aa-heart, .album-card:hover .aa-heart, .latest-card:hover .aa-heart, .aa-heart.on, .aa-heart:focus-visible{ opacity:1; }
.aa-heart:hover{ border-color:var(--t-coral, #ff6a52); }
.aa-heart.on svg{ fill:var(--t-coral, #ff6a52); filter:drop-shadow(0 0 6px var(--t-coral, #ff6a52)); }

/* shared bits */
[data-kit="v3"] .aa-btn{
  display:inline-block; background:transparent; border:1px solid var(--t-coral); color:var(--t-coral); -webkit-text-fill-color:var(--t-coral);
  font:10.5px/1 var(--t-mono); letter-spacing:.2em; text-transform:uppercase; padding:10px 14px; cursor:pointer; text-decoration:none; border-radius:0;
}
[data-kit="v3"] .aa-btn:hover{ background:var(--t-coral); color:var(--t-void); -webkit-text-fill-color:var(--t-void); }
[data-kit="v3"] .aa-btn.on{ background:var(--t-coral); color:var(--t-void); -webkit-text-fill-color:var(--t-void); }
[data-kit="v3"] .aa-note{ font:10.5px/1.7 var(--t-mono); color:var(--t-rose); -webkit-text-fill-color:var(--t-rose); }
[data-kit="v3"] .aa-note a{ color:var(--t-coral); }
[data-kit="v3"] .aa-empty{ font:11px/1.7 var(--t-mono); letter-spacing:.08em; color:var(--t-dim); -webkit-text-fill-color:var(--t-dim); }
[data-kit="v3"] .aa-k{ font:10px/1.4 var(--t-mono); letter-spacing:.26em; text-transform:uppercase; color:var(--t-rose); -webkit-text-fill-color:var(--t-rose); margin-bottom:12px; }
[data-kit="v3"] .aa-k small{ letter-spacing:.1em; text-transform:none; color:var(--t-dim); }
[data-kit="v3"] .aa-count{ color:var(--t-coral); -webkit-text-fill-color:var(--t-coral); font-weight:400; }
[data-kit="v3"] .aa-msg{ font:11px/1.6 var(--t-mono); color:var(--t-amber); -webkit-text-fill-color:var(--t-amber); min-height:1.2em; margin:8px 0 0; }
[data-kit="v3"] .aa-mode{ margin-top:14px; padding:10px 12px; border:1px dashed var(--t-dim); font:10.5px/1.7 var(--t-mono); color:var(--t-amber); -webkit-text-fill-color:var(--t-amber); }
[data-kit="v3"] .aa-del{ background:transparent; border:0; color:var(--t-dim); -webkit-text-fill-color:var(--t-dim); font:10px/1 var(--t-mono); letter-spacing:.14em; cursor:pointer; padding:2px 4px; }
[data-kit="v3"] .aa-del:hover{ color:var(--t-coral); -webkit-text-fill-color:var(--t-coral); }

/* the Void bar */
[data-kit="v3"] .aa-void{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; justify-content:center; margin:14px auto 0; }
[data-kit="v3"] .aa-pl{ display:inline-flex; align-items:center; gap:8px; font:10.5px/1 var(--t-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--t-rose); -webkit-text-fill-color:var(--t-rose); }
[data-kit="v3"] .aa-pl select{ background:var(--t-deep); border:1px solid var(--t-dim); color:var(--t-coral); font:11px var(--t-mono); padding:6px 8px; border-radius:0; }

/* comments */
[data-kit="v3"] .aa-comments{ margin:46px 0 20px; padding-top:22px; border-top:1px dotted var(--t-dim); }
[data-kit="v3"] .aa-comments .aa-h{ font-family:var(--t-term); font-size:1.4rem; margin:0 0 16px; }
[data-kit="v3"] .aa-c{ display:flex; gap:12px; padding:12px 0; border-bottom:1px dotted var(--t-dim); }
[data-kit="v3"] .aa-c-pic{ width:36px; height:36px; flex:0 0 36px; border:1px solid var(--t-dim); object-fit:cover; }
[data-kit="v3"] .aa-c-meta{ font:10px/1.5 var(--t-mono); letter-spacing:.12em; color:var(--t-rose); -webkit-text-fill-color:var(--t-rose); }
[data-kit="v3"] .aa-c-meta b{ color:var(--t-coral); -webkit-text-fill-color:var(--t-coral); font-weight:400; text-transform:uppercase; }
[data-kit="v3"] .aa-rank{ border:1px solid var(--t-dim); padding:1px 5px; margin:0 6px; }
[data-kit="v3"] .aa-c-body p{ margin:6px 0 0; font:12.5px/1.75 var(--t-mono) !important; color:var(--t-amber); }
[data-kit="v3"] .aa-form{ display:grid; gap:10px; margin-top:16px; }
[data-kit="v3"] .aa-form label{ display:grid; gap:5px; font:10px/1.4 var(--t-mono); letter-spacing:.2em; text-transform:uppercase; color:var(--t-rose); -webkit-text-fill-color:var(--t-rose); }
[data-kit="v3"] .aa-form label small{ letter-spacing:.06em; text-transform:none; color:var(--t-dim); }
[data-kit="v3"] .aa-form input, [data-kit="v3"] .aa-form textarea{
  background:transparent; border:0; border-bottom:1px solid var(--t-dim); border-radius:0; padding:9px 6px 7px;
  color:var(--t-coral); -webkit-text-fill-color:var(--t-coral); caret-color:var(--t-coral); font:1.05rem var(--t-term); letter-spacing:.04em;
}
[data-kit="v3"] .aa-form input:focus, [data-kit="v3"] .aa-form textarea:focus{ outline:none; border-color:var(--t-coral); box-shadow:0 1px 0 var(--t-coral); }
[data-kit="v3"] .aa-form textarea{ font:12.5px/1.7 var(--t-mono); border:1px solid var(--t-dim); padding:10px; }
[data-kit="v3"] .aa-row{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }

/* account page */
[data-kit="v3"] .aa-wrap{ position:relative; z-index:2; max-width:960px; margin:0 auto; padding:4vh 5vw 12vh; display:grid; gap:18px; }
[data-kit="v3"] .aa-panel{ position:relative; border:1px solid var(--t-dim); padding:22px 22px 20px; background:transparent;
  background-image:linear-gradient(var(--t-coral),var(--t-coral)),linear-gradient(var(--t-coral),var(--t-coral)),linear-gradient(var(--t-coral),var(--t-coral)),linear-gradient(var(--t-coral),var(--t-coral));
  background-size:16px 1px,1px 16px,16px 1px,1px 16px; background-position:0 0,0 0,100% 100%,100% 100%; background-repeat:no-repeat; }
[data-kit="v3"] .aa-tabs{ display:flex; gap:2px; margin-bottom:16px; border-bottom:1px solid var(--t-dim); }
[data-kit="v3"] .aa-tab{ background:transparent; border:1px solid transparent; border-bottom:0; padding:9px 14px; cursor:pointer;
  font:10.5px/1 var(--t-mono); letter-spacing:.2em; text-transform:uppercase; color:var(--t-rose); -webkit-text-fill-color:var(--t-rose); }
[data-kit="v3"] .aa-tab.on{ border-color:var(--t-dim); color:var(--t-coral); -webkit-text-fill-color:var(--t-coral); background:var(--t-deep); }
[data-kit="v3"] .aa-idrow{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-bottom:18px; }
[data-kit="v3"] .aa-bigpic{ width:84px; height:84px; border:1px solid var(--t-coral); box-shadow:0 0 18px -6px var(--t-coral); object-fit:cover; }
[data-kit="v3"] .aa-tagline{ font-family:var(--t-term); font-size:2rem; line-height:1; color:var(--t-coral); -webkit-text-fill-color:var(--t-coral); text-shadow:var(--t-glow); }
[data-kit="v3"] .aa-rankline, [data-kit="v3"] .aa-email{ font:10.5px/1.7 var(--t-mono); letter-spacing:.14em; color:var(--t-rose); -webkit-text-fill-color:var(--t-rose); }
[data-kit="v3"] .aa-email{ color:var(--t-dim); -webkit-text-fill-color:var(--t-dim); letter-spacing:.04em; }
[data-kit="v3"] .aa-idrow .aa-out{ margin-left:auto; }
[data-kit="v3"] .aa-pics{ display:grid; grid-template-columns:repeat(auto-fill, minmax(64px,1fr)); gap:6px; margin-bottom:14px; }
[data-kit="v3"] .aa-pic{ padding:0; border:1px solid var(--t-dim); background:#000; cursor:pointer; aspect-ratio:1; }
[data-kit="v3"] .aa-pic img{ width:100%; height:100%; object-fit:cover; display:block; opacity:.75; }
[data-kit="v3"] .aa-pic.on{ border-color:var(--t-coral); box-shadow:0 0 12px -3px var(--t-coral); } [data-kit="v3"] .aa-pic.on img{ opacity:1; }
[data-kit="v3"] .aa-keys{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
[data-kit="v3"] .aa-keys li{ font:10.5px/1 var(--t-mono); letter-spacing:.18em; text-transform:uppercase; padding:8px 10px; border:1px solid var(--t-mint); color:var(--t-mint); -webkit-text-fill-color:var(--t-mint); }
[data-kit="v3"] .aa-keys li::before{ content:'\25A0 '; }
[data-kit="v3"] .aa-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(110px,1fr)); gap:8px; }
[data-kit="v3"] .aa-tile{ display:block; border:1px solid var(--t-dim); text-decoration:none; background:#000; }
[data-kit="v3"] .aa-tile img{ width:100%; aspect-ratio:1; object-fit:cover; display:block; }
[data-kit="v3"] .aa-tile span{ display:block; padding:6px 7px; font:9.5px/1.4 var(--t-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--t-amber); -webkit-text-fill-color:var(--t-amber); }
[data-kit="v3"] .aa-playlist{ border-top:1px dotted var(--t-dim); padding:12px 0; }
[data-kit="v3"] .aa-pl-head{ display:flex; align-items:baseline; gap:10px; font:11px/1.5 var(--t-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--t-amber); -webkit-text-fill-color:var(--t-amber); }
[data-kit="v3"] .aa-pl-head b{ color:var(--t-coral); -webkit-text-fill-color:var(--t-coral); font-weight:400; }
[data-kit="v3"] .aa-pl-tracks{ margin:8px 0 0 18px; padding:0; font:11.5px/1.9 var(--t-mono); color:var(--t-amber); }
[data-kit="v3"] .aa-pl-tracks a{ color:var(--t-amber); text-decoration:none; border-bottom:1px dotted var(--t-dim); }
[data-kit="v3"] .aa-newpl{ grid-template-columns:1fr auto; align-items:end; margin-top:14px; }

/* games gate */
.aa-gate{ position:fixed; inset:0; z-index:500; display:grid; place-items:center; background:rgba(2,1,3,.9); backdrop-filter:blur(8px); padding:6vw; }
[data-kit="v3"] .aa-gate-box{ max-width:520px; border:1px solid var(--t-coral); padding:26px 28px; background:var(--t-void); box-shadow:0 0 60px -20px var(--t-coral); text-align:center; display:grid; gap:14px; justify-items:center; }
[data-kit="v3"] .aa-gate-k{ font:10px/1.4 var(--t-mono); letter-spacing:.3em; color:var(--t-rose); -webkit-text-fill-color:var(--t-rose); }
[data-kit="v3"] .aa-gate-box p{ font:13px/1.8 var(--t-mono) !important; color:var(--t-amber); margin:0; }
html.aa-locked{ overflow:hidden; }

/* toast */
.aa-toast{ position:fixed; left:50%; bottom:28px; transform:translate(-50%, 20px); z-index:600; opacity:0; transition:opacity .25s, transform .25s;
  background:#000; border:1px solid var(--t-coral, #ff6a52); color:var(--t-coral, #ff6a52); font:11px/1 var(--t-mono, monospace); letter-spacing:.16em; text-transform:uppercase; padding:10px 14px; }
.aa-toast.show{ opacity:1; transform:translate(-50%, 0); }

/* ---- 4.11 cyan phosphor (MMED: Live). Same grammar, cold tube. */
body[data-kit="v3"][data-phos="cyan"]{
  --t-coral:#5ce6ff; --t-amber:#d6f7ff; --t-mint:#2fc4e0; --t-lime:#a8f0ff;
  --t-rose:#2fb6d0;  --t-dim:#1a4a58;  --t-void:#02070a; --t-deep:#061119;
  --ph-rot:150deg; --ph-sat:1.6; --ph-bri:.95;
}
/* the CRT wash over the MMED clips at half strength: colour tint eased, scanlines lighter */
[data-kit="v3"] .mmed-thumb img{
  filter:grayscale(.5) sepia(.5) saturate(1.3) hue-rotate(var(--ph-rot,150deg)) brightness(.92) contrast(1.08);
}
[data-kit="v3"] .mmed-thumb::after{
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.19) 0 1px, transparent 1px 3px);
}
[data-kit="v3"] .source-tabs-tracks{ margin:0 0 18px; }

/* account badges: Founder-granted marks beside the rank */
[data-kit="v3"] .aa-badge{ display:inline-block; margin-left:6px; padding:1px 6px; border:1px solid currentColor; font:9.5px/1.4 var(--t-mono); letter-spacing:.2em; text-transform:uppercase; vertical-align:middle; }
[data-kit="v3"] .aa-badge-webmaster{ color:var(--t-mint); -webkit-text-fill-color:var(--t-mint); }
[data-kit="v3"] .aa-badge-808{ color:var(--t-coral); -webkit-text-fill-color:var(--t-coral); box-shadow:0 0 8px -3px var(--t-coral); }

/* ---- MINDSCAPE ---- */
[data-kit="v3"] .ms-wrap{ position:relative; z-index:2; padding:3vh 3vw 10vh; max-width:1500px; margin:0 auto; }
[data-kit="v3"] .ms-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:12px 24px; margin-bottom:14px; }
[data-kit="v3"] .ms-stage{ position:relative; border:1px solid var(--t-dim); background:var(--t-deep); height:min(72vh, 820px); overflow:hidden;
  box-shadow:inset 0 0 80px -30px var(--t-coral); }
[data-kit="v3"] .ms-stage canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
[data-kit="v3"] .ms-star{ position:absolute; width:44px; height:44px; margin:-22px 0 0 -22px; border:1px solid var(--t-dim); background:#000; cursor:pointer; padding:0;
  box-shadow:0 0 12px -4px var(--t-coral); transition:transform .2s, box-shadow .2s, border-color .2s; }
[data-kit="v3"] .ms-star img{ width:100%; height:100%; object-fit:cover; display:block; opacity:.9; }
[data-kit="v3"] .ms-star:hover, [data-kit="v3"] .ms-star.on{ transform:scale(1.18); border-color:var(--t-coral); box-shadow:0 0 22px -4px var(--t-coral); z-index:3; }
[data-kit="v3"] .ms-star.me{ border-color:var(--t-mint); box-shadow:0 0 18px -4px var(--t-mint); }
[data-kit="v3"] .ms-star .ms-tag{ position:absolute; left:50%; top:100%; transform:translate(-50%, 4px); white-space:nowrap; font:9px/1 var(--t-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--t-rose); -webkit-text-fill-color:var(--t-rose); pointer-events:none; }
[data-kit="v3"] .ms-panel{ position:absolute; right:14px; top:14px; width:min(320px, calc(100% - 28px)); border:1px solid var(--t-coral); background:var(--t-void); padding:16px 18px; z-index:5; display:none;
  box-shadow:0 0 30px -10px var(--t-coral); }
[data-kit="v3"] .ms-panel.open{ display:block; }
[data-kit="v3"] .ms-panel .aa-bigpic{ width:64px; height:64px; }
[data-kit="v3"] .ms-row{ display:flex; gap:14px; align-items:center; margin-bottom:10px; }
[data-kit="v3"] .ms-bio{ font:12px/1.7 var(--t-mono) !important; color:var(--t-amber); margin:8px 0 12px; }
[data-kit="v3"] .ms-close{ position:absolute; top:6px; right:8px; }
[data-kit="v3"] .ms-legend{ display:flex; gap:18px; flex-wrap:wrap; font:10px/1.6 var(--t-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--t-rose); -webkit-text-fill-color:var(--t-rose); }
[data-kit="v3"] .ms-legend i{ display:inline-block; width:22px; height:0; border-top:1px solid var(--t-coral); vertical-align:middle; margin-right:6px; }
[data-kit="v3"] .ms-legend i.grid{ border-top:1px dotted var(--t-dim); }
@media (max-width:640px){ [data-kit="v3"] .ms-star{ width:34px; height:34px; margin:-17px 0 0 -17px; } [data-kit="v3"] .ms-star .ms-tag{ display:none; } }

[data-kit="v3"] .aa-founder{ border-color:var(--t-mint); }
[data-kit="v3"] .aa-founder .aa-k{ color:var(--t-mint); -webkit-text-fill-color:var(--t-mint); }
[data-kit="v3"] .aa-grant2 select{ background:var(--t-deep); border:1px solid var(--t-dim); color:var(--t-coral); font:12px var(--t-mono); padding:8px; border-radius:0; }
[data-kit="v3"] .aa-grant2 input[type=checkbox]{ accent-color:var(--t-coral); width:14px; height:14px; }

/* ---- preview engine: ▶ on tiles + the dock ---- */
.pv-btn{ position:absolute; left:8px; bottom:8px; z-index:12; width:34px; height:34px; display:grid; place-items:center; font:13px/1 ui-monospace,monospace; padding-left:3px;
  color:var(--t-coral,#ff6a52); -webkit-text-fill-color:var(--t-coral,#ff6a52); background:var(--t-void,#000); border:1px solid var(--t-coral,#ff6a52); box-shadow:0 0 0 1px #000, 0 0 14px -2px var(--t-coral,#ff6a52); cursor:pointer; opacity:0; transition:opacity .2s, border-color .2s, background .2s; }
/* track tiles: top-left, clear of the name + date overlay that rises from the bottom on hover */
.track-tile .pv-btn{ top:8px; bottom:auto; }
.track-tile:hover .pv-btn, .album-card:hover .pv-btn, .latest-single:hover .pv-btn, .pv-btn:focus-visible, .pv-active .pv-btn{ opacity:1; }
@media (hover:none){ .pv-btn{ opacity:.85; } }
.pv-btn:hover, .pv-active .pv-btn{ border-color:var(--t-coral,#ff6a52); }
.pv-playing .pv-btn{ background:var(--t-coral,#ff6a52); color:var(--t-void,#000); }
.pv-playing .pv-btn::before{ content:'\275A\275A'; } .pv-playing .pv-btn{ font-size:0; } .pv-playing .pv-btn::before{ font-size:10px; }
.pv-active{ outline:1px solid var(--t-coral,#ff6a52); outline-offset:-1px; }
.pv-dock{ position:fixed; left:50%; bottom:14px; transform:translate(-50%, 140%); z-index:150; width:min(760px, calc(100vw - 24px));
  display:grid; grid-template-columns:52px 1fr auto auto auto auto; gap:12px; align-items:center; padding:9px 10px 9px 9px;
  background:var(--t-void,#050408); border:1px solid var(--t-coral,#ff6a52); box-shadow:0 0 40px -12px var(--t-coral,#ff6a52), 0 10px 30px rgba(0,0,0,.6);
  transition:transform .3s ease; }
.pv-dock.open{ transform:translate(-50%, 0); }
.pv-frames{ position:absolute; width:1px; height:1px; overflow:hidden; opacity:0; pointer-events:none; left:0; top:0; }
.pv-frames iframe{ width:300px; height:166px; border:0; }
.pv-art{ width:52px; height:52px; object-fit:cover; border:1px solid var(--t-dim,#555); background:#000; }
.pv-meta{ min-width:0; }
.pv-kind{ font:9px/1.4 ui-monospace,monospace; letter-spacing:.24em; color:var(--t-rose,#c66); -webkit-text-fill-color:var(--t-rose,#c66); }
.pv-title{ font:13px/1.3 ui-monospace,monospace; color:var(--t-amber,#ffd166); -webkit-text-fill-color:var(--t-amber,#ffd166); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pv-bar{ margin-top:6px; height:3px; background:var(--t-dim,#333); cursor:pointer; position:relative; }
.pv-fill{ position:absolute; left:0; top:0; bottom:0; width:0; background:var(--t-coral,#ff6a52); box-shadow:0 0 8px var(--t-coral,#ff6a52); }
.pv-time{ font:10px/1 ui-monospace,monospace; letter-spacing:.1em; color:var(--t-rose,#c66); -webkit-text-fill-color:var(--t-rose,#c66); min-width:74px; text-align:right; }
.pv-ctl{ display:flex; gap:6px; }
.pv-prev, .pv-next{ width:30px; height:34px; display:grid; place-items:center; background:transparent; border:1px solid var(--t-dim,#555); color:var(--t-coral,#ff6a52); -webkit-text-fill-color:var(--t-coral,#ff6a52); font:12px/1 ui-monospace,monospace; cursor:pointer; border-radius:0; }
.pv-prev:hover, .pv-next:hover{ border-color:var(--t-coral,#ff6a52); }
.pv-prev:disabled, .pv-next:disabled{ opacity:.3; cursor:default; }
.pv-prev:disabled:hover, .pv-next:disabled:hover{ border-color:var(--t-dim,#555); }
.pv-beat.pv-active{ outline:1px solid var(--t-coral,#ff6a52); outline-offset:2px; }
.pv-beat.pv-playing .beat-play{ background:var(--t-coral,#ff6a52) !important; border-color:var(--t-coral,#ff6a52) !important; }
.pv-play, .pv-close, .pv-open{ width:34px; height:34px; display:grid; place-items:center; background:transparent; border:1px solid var(--t-dim,#555); color:var(--t-coral,#ff6a52); -webkit-text-fill-color:var(--t-coral,#ff6a52); font:12px/1 ui-monospace,monospace; cursor:pointer; text-decoration:none; border-radius:0; }
.pv-play:hover, .pv-close:hover, .pv-open:hover{ border-color:var(--t-coral,#ff6a52); background:var(--t-coral,#ff6a52); color:var(--t-void,#000); -webkit-text-fill-color:var(--t-void,#000); }
.pv-dock.playing .pv-play{ background:var(--t-coral,#ff6a52); color:var(--t-void,#000); -webkit-text-fill-color:var(--t-void,#000); }
.pv-toast{ position:fixed; left:50%; bottom:84px; transform:translate(-50%, 16px); z-index:600; opacity:0; transition:opacity .25s, transform .25s; background:#000; border:1px solid var(--t-coral,#ff6a52); color:var(--t-coral,#ff6a52); font:11px/1 ui-monospace,monospace; letter-spacing:.14em; text-transform:uppercase; padding:10px 14px; }
.pv-toast.show{ opacity:1; transform:translate(-50%, 0); }
@media (max-width:640px){ .pv-dock{ grid-template-columns:44px 1fr auto auto; gap:8px; } .pv-time, .pv-open{ display:none; } .pv-art{ width:44px; height:44px; } .pv-prev, .pv-next{ width:26px; } }

/* ---- 4.12 the drawer. Under 900px the nav is a slide-in panel; with three
   dropdowns always expanded it overflowed the viewport and could not scroll,
   so Laboratory / Universe / Contact sat below the fold on most pages.
   Menus now fold until tapped, and the panel scrolls. (overflow on nav only —
   never position on header/nav from this layer.) */
@media (max-width:900px){
  body[data-kit="v3"] header nav{ overflow-y:auto; overscroll-behavior:contain; max-height:100vh; padding-bottom:40px; }
  body[data-kit="v3"] header nav .nav-dropdown{ display:block; width:100%; }
  body[data-kit="v3"] header nav .nav-dropdown-trigger{ width:100%; text-align:left; display:flex; justify-content:space-between; align-items:center; }
  body[data-kit="v3"] header nav .nav-dropdown-menu{
    position:static; transform:none; opacity:1; visibility:visible; display:none;
    margin:4px 0 10px; border:1px solid var(--t-dim); background:var(--t-deep); box-shadow:none; min-width:0;
  }
  body[data-kit="v3"] header nav .nav-dropdown.open .nav-dropdown-menu{ display:block; }
  body[data-kit="v3"] header nav .nav-divider{ display:none; }
  body[data-kit="v3"] header nav .aa-nav{ margin-top:6px; }
}
@media (max-width:900px){
  /* the matrix orders the drawer; the Galaxy menu slots after Labs, before Contact */
  body[data-kit="v3"] header nav.open > #navGalaxyDropdown{ order:8; }
  body[data-kit="v3"] header nav.open > .nav-contact{ order:9; }
  body[data-kit="v3"] header nav.open > .aa-nav{ order:10; }
}

/* ---- 4.13 hero reel: several clips, glitch cuts, a colour grade per clip ---- */
[data-kit="v3"] .k3-hero-reel{ --reel-hue:0deg; --reel-sat:1.25; --reel-tint:255,90,102; }
[data-kit="v3"] .k3-hero-reel .k3-reel-vid{ opacity:0; transition:opacity .18s steps(2, end);
  filter:hue-rotate(var(--reel-hue)) saturate(var(--reel-sat)) contrast(1.12) brightness(.88); }
[data-kit="v3"] .k3-hero-reel .k3-reel-vid.on{ opacity:.6; }
/* the scanline layer takes the clip's colour */
[data-kit="v3"] .k3-hero-reel::after{
  background:
    radial-gradient(ellipse 62% 58% at 50% 52%, rgba(5,4,8,.78), rgba(5,4,8,.3) 62%, rgba(5,4,8,0) 100%),
    linear-gradient(rgba(var(--reel-tint), .10), rgba(var(--reel-tint), .04)),
    repeating-linear-gradient(0deg, rgba(0,0,0,.42) 0 1px, transparent 1px 3px);
  transition:background .4s;
}
/* the tear */
@keyframes k3-tear{
  0%  { clip-path:polygon(0 0,100% 0,100% 100%,0 100%); transform:none; }
  15% { clip-path:polygon(0 12%,100% 12%,100% 31%,0 31%); transform:translateX(-14px); }
  30% { clip-path:polygon(0 44%,100% 44%,100% 52%,0 52%); transform:translateX(18px) scaleY(1.02); }
  45% { clip-path:polygon(0 0,100% 0,100% 100%,0 100%); transform:translateX(0); }
  60% { clip-path:polygon(0 63%,100% 63%,100% 78%,0 78%); transform:translateX(-22px); }
  75% { clip-path:polygon(0 0,100% 0,100% 100%,0 100%); transform:translateX(6px) skewX(-2deg); }
  100%{ clip-path:polygon(0 0,100% 0,100% 100%,0 100%); transform:none; }
}
@keyframes k3-split{
  0%,100%{ filter:hue-rotate(var(--reel-hue)) saturate(var(--reel-sat)) contrast(1.12) brightness(.88); }
  35%    { filter:hue-rotate(calc(var(--reel-hue) + 120deg)) saturate(2.4) contrast(1.4) brightness(1.1) drop-shadow(-6px 0 0 rgba(255,0,80,.7)) drop-shadow(6px 0 0 rgba(0,220,255,.7)); }
  70%    { filter:hue-rotate(calc(var(--reel-hue) - 60deg)) saturate(1.8) contrast(1.3) brightness(.95) drop-shadow(4px 0 0 rgba(255,0,80,.6)) drop-shadow(-4px 0 0 rgba(0,220,255,.6)); }
}
[data-kit="v3"] .k3-hero-reel.glitching .k3-reel-vid.on{ animation:k3-tear .5s steps(1, end) both, k3-split .5s linear both; }
[data-kit="v3"] .k3-hero-reel.glitching.micro .k3-reel-vid.on{ animation-duration:.16s, .16s; }
[data-kit="v3"] .k3-hero-reel.glitching h1, [data-kit="v3"] .k3-hero-reel.glitching .sub{ animation:k3-tear .3s steps(1,end) both; }
@media (prefers-reduced-motion:reduce){ [data-kit="v3"] .k3-hero-reel .k3-reel-vid{ animation:none !important; } }

/* ---- 4.14 MINDNET masthead: a real glitch on the sprite wordmark, a status
   column, corner brackets and a scan sweep. The matrix layer's text ghost
   (.mx-glitch::before with data-mx-text) is switched off here: it paints
   "MINDNET" in a font the sprite does not match and read as a smear. ---- */
[data-kit="v3"] .mn-title-main.mx-glitch::before,
[data-kit="v3"] .mn-title-main.mx-glitch::after{ content:none !important; display:none !important; }
[data-kit="v3"] .mn-title{
  display:flex; flex-direction:row; align-items:stretch; justify-content:space-between; gap:28px;
  width:100%; box-sizing:border-box; padding:20px 26px 16px; margin:26px 0 14px;
  border:1px solid color-mix(in srgb, var(--t-coral) 70%, transparent);
  background:
    linear-gradient(var(--t-coral), var(--t-coral)) top left / 18px 2px no-repeat,
    linear-gradient(var(--t-coral), var(--t-coral)) top left / 2px 18px no-repeat,
    linear-gradient(var(--t-coral), var(--t-coral)) top right / 18px 2px no-repeat,
    linear-gradient(var(--t-coral), var(--t-coral)) top right / 2px 18px no-repeat,
    linear-gradient(var(--t-coral), var(--t-coral)) bottom left / 18px 2px no-repeat,
    linear-gradient(var(--t-coral), var(--t-coral)) bottom left / 2px 18px no-repeat,
    linear-gradient(var(--t-coral), var(--t-coral)) bottom right / 18px 2px no-repeat,
    linear-gradient(var(--t-coral), var(--t-coral)) bottom right / 2px 18px no-repeat,
    repeating-linear-gradient(0deg, transparent 0 2px, color-mix(in srgb, var(--t-coral) 6%, transparent) 2px 3px),
    radial-gradient(120% 90% at 0% 50%, color-mix(in srgb, var(--t-coral) 12%, transparent), transparent 60%),
    var(--t-deep);
  box-shadow:0 0 28px -12px var(--t-coral), inset 0 0 40px -30px var(--t-coral);
}
[data-kit="v3"] .mn-title::before{ top:-7px; left:18px; }
/* scan sweep: a bright band crosses the plate every few seconds */
[data-kit="v3"] .mn-title::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, transparent 0 42%, color-mix(in srgb, var(--t-coral) 14%, transparent) 50%, transparent 58% 100%);
  background-size:220% 100%; mix-blend-mode:screen;
  animation:mn-sweep 6.5s cubic-bezier(.7,0,.3,1) infinite;
}
@keyframes mn-sweep{ 0%{ background-position:200% 0; } 35%,100%{ background-position:-100% 0; } }
[data-kit="v3"] .mn-mast-word{ display:flex; flex-direction:column; gap:8px; min-width:0; position:relative; z-index:1; }
[data-kit="v3"] .mn-title-main{ position:relative; display:inline-block; }
[data-kit="v3"] .k3-glitching .k3-word{ animation:k3-flicker 5.2s steps(1,end) infinite; }
[data-kit="v3"] .k3-ghost{
  position:absolute; left:0; top:0; pointer-events:none; mix-blend-mode:screen; filter:none;
  clip-path:inset(0 0 100% 0);
}
[data-kit="v3"] .k3-ghost-a{ --k3-ink:color-mix(in srgb, var(--t-coral) 15%, #ff2a55); opacity:.95; animation:k3-tear-a 5.2s steps(1,end) infinite; }
[data-kit="v3"] .k3-ghost-b{ --k3-ink:color-mix(in srgb, var(--t-lime) 15%, #2ae6ff); opacity:.95; animation:k3-tear-b 5.2s steps(1,end) infinite .06s; }
@keyframes k3-tear-a{
  0%,38%,41%,78%,100%{ clip-path:inset(0); opacity:.26; transform:translate(-1.5px,0); }
  39%{ opacity:.95; clip-path:inset(40% 0 40% 0); transform:translate(-7px,0); }
  79%{ opacity:.95; clip-path:inset(8% 0 62% 0);  transform:translate(-11px,0); }
  81%{ opacity:.95; clip-path:inset(55% 0 20% 0); transform:translate(9px,2px); }
  83%{ opacity:.95; clip-path:inset(30% 0 48% 0); transform:translate(-6px,0); }
  85%{ clip-path:inset(0); opacity:.26; }
  90%{ opacity:.95; clip-path:inset(70% 0 8% 0);  transform:translate(8px,0); }
  92%{ clip-path:inset(0); opacity:.26; }
}
@keyframes k3-tear-b{
  0%,38%,41%,78%,100%{ clip-path:inset(0); opacity:.26; transform:translate(1.5px,0); }
  39%{ opacity:.95; clip-path:inset(20% 0 65% 0); transform:translate(7px,0); }
  79%{ opacity:.95; clip-path:inset(60% 0 12% 0); transform:translate(11px,0); }
  81%{ opacity:.95; clip-path:inset(12% 0 70% 0); transform:translate(-9px,-2px); }
  83%{ opacity:.95; clip-path:inset(44% 0 30% 0); transform:translate(6px,0); }
  85%{ clip-path:inset(0); opacity:.26; }
  90%{ opacity:.95; clip-path:inset(20% 0 55% 0); transform:translate(-8px,0); }
  92%{ clip-path:inset(0); opacity:.26; }
}
@keyframes k3-flicker{
  0%,38%,41%,78%,100%{ transform:none; opacity:1; }
  39%{ transform:translate(-2px,0); opacity:.85; }
  79%{ transform:translate(2px,0); opacity:.86; }
  81%{ transform:translate(-2px,0); opacity:1; }
  83%{ transform:translate(1px,0); opacity:.92; }
  85%{ transform:none; opacity:1; }
  90%{ transform:translate(-1px,0); opacity:.8; }
  91%{ transform:none; opacity:1; }
}
[data-kit="v3"] .mn-title-sub{
  --k3-ink:var(--t-rose); font:12px/1 var(--t-mono); letter-spacing:.5em; text-transform:uppercase; color:var(--t-rose); -webkit-text-fill-color:var(--t-rose);
  display:inline-flex; align-items:center; gap:12px; margin-top:4px; text-shadow:0 0 8px color-mix(in srgb, var(--t-rose) 60%, transparent);
}
[data-kit="v3"] .mn-title-sub .k3-word{ --k3-track:.16; filter:drop-shadow(0 0 1px var(--t-rose)) drop-shadow(0 0 8px color-mix(in srgb, var(--t-rose) 55%, transparent)); }
[data-kit="v3"] .mn-title-sub::before{ content:'//'; font:14px/1 var(--t-mono); color:var(--t-dim); -webkit-text-fill-color:var(--t-dim); }
[data-kit="v3"] .mn-title-sub::after{ content:''; width:12px; height:22px; background:var(--t-rose); animation:mn-caret 1s steps(1,end) infinite; }
@keyframes mn-caret{ 50%{ opacity:0; } }
/* status column: leader rows + a level meter */
[data-kit="v3"] .mn-mast-stat{
  display:flex; flex-direction:column; justify-content:flex-end; gap:5px; min-width:190px; position:relative; z-index:1;
  padding-left:22px; border-left:1px dashed color-mix(in srgb, var(--t-coral) 40%, transparent);
}
[data-kit="v3"] .mn-ld{ display:flex; align-items:baseline; gap:8px; font:10px/1.2 var(--t-mono); letter-spacing:.2em; text-transform:uppercase; color:var(--t-dim); }
[data-kit="v3"] .mn-ld i{ flex:1; border-bottom:1px dotted color-mix(in srgb, var(--t-dim) 80%, transparent); transform:translateY(-3px); }
[data-kit="v3"] .mn-ld b{ font-weight:400; color:var(--t-amber); -webkit-text-fill-color:var(--t-amber); text-shadow:0 0 8px color-mix(in srgb, var(--t-amber) 50%, transparent); }
[data-kit="v3"] .mn-ld b.mn-live{ color:var(--t-lime); -webkit-text-fill-color:var(--t-lime); }
[data-kit="v3"] .mn-ld b.mn-live::before{ content:'\25CF  '; animation:mn-caret 1.4s steps(1,end) infinite; }
[data-kit="v3"] .mn-eq{ display:flex; align-items:flex-end; gap:3px; height:22px; margin-top:6px; }
[data-kit="v3"] .mn-eq i{ flex:1; height:30%; background:var(--t-coral); opacity:.75; box-shadow:0 0 6px -1px var(--t-coral); animation:mn-eq 1.3s ease-in-out infinite alternate; }
[data-kit="v3"] .mn-eq i:nth-child(2n){ animation-duration:1.7s; animation-delay:-.4s; }
[data-kit="v3"] .mn-eq i:nth-child(3n){ animation-duration:1.1s; animation-delay:-.9s; }
[data-kit="v3"] .mn-eq i:nth-child(5n){ animation-duration:2.1s; animation-delay:-.2s; }
[data-kit="v3"] .mn-eq i:nth-child(7n){ animation-duration:.9s; animation-delay:-.6s; }
@keyframes mn-eq{ from{ height:12%; } to{ height:100%; } }
@media (max-width:720px){
  [data-kit="v3"] .mn-title{ flex-direction:column; gap:14px; padding:16px 18px 12px; }
  [data-kit="v3"] .mn-mast-stat{ border-left:0; padding-left:0; border-top:1px dashed color-mix(in srgb, var(--t-coral) 40%, transparent); padding-top:10px; min-width:0; }
  [data-kit="v3"] .mn-eq{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  [data-kit="v3"] .mn-title::after, [data-kit="v3"] .k3-ghost, [data-kit="v3"] .k3-glitching .k3-word, [data-kit="v3"] .mn-eq i,
  [data-kit="v3"] .mn-title-sub::after, [data-kit="v3"] .mn-ld b.mn-live::before{ animation:none; }
  [data-kit="v3"] .k3-ghost{ display:none; }
}

/* ---- 4.14b masthead effects: grain, a rolling tracking band, plate flicker,
   glow breathing. All layers sit under the text (z-index) and never catch
   the pointer. ---- */
[data-kit="v3"] .mn-title{ isolation:isolate; animation:mn-plate-flicker 9s steps(1,end) infinite; }
[data-kit="v3"] .mn-noise, [data-kit="v3"] .mn-band{ position:absolute; inset:0; pointer-events:none; z-index:0; }
[data-kit="v3"] .mn-noise{
  opacity:.16; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  background-size:160px 160px; animation:mn-grain .4s steps(1,end) infinite;
}
@keyframes mn-grain{ 0%{ background-position:0 0; } 25%{ background-position:-37px 53px; } 50%{ background-position:61px -29px; } 75%{ background-position:-18px -71px; } 100%{ background-position:44px 17px; } }
[data-kit="v3"] .mn-band{
  background:linear-gradient(180deg, transparent 0 40%, color-mix(in srgb, var(--t-coral) 22%, transparent) 50%, transparent 60% 100%);
  background-size:100% 36px; background-repeat:no-repeat; mix-blend-mode:screen;
  animation:mn-band 7.3s linear infinite;
}
@keyframes mn-band{ 0%{ background-position:0 -40px; } 100%{ background-position:0 calc(100% + 40px); } }
@keyframes mn-plate-flicker{ 0%,100%{ opacity:1; } 61%{ opacity:.92; } 61.6%{ opacity:1; } 62.4%{ opacity:.88; } 63%{ opacity:1; } 87%{ opacity:.95; } 87.5%{ opacity:1; } }
[data-kit="v3"] .k3-glitching{ animation:mn-breathe 4.6s ease-in-out infinite; }
@keyframes mn-breathe{ 0%,100%{ filter:brightness(1) saturate(1); } 50%{ filter:brightness(1.12) saturate(1.25); } }
[data-kit="v3"] .mn-mast-stat::before{
  content:'SIGNAL'; position:absolute; right:0; top:-2px; font:9px/1 var(--t-mono); letter-spacing:.3em; color:var(--t-dim);
}
[data-kit="v3"] .mn-mast-stat{ padding-top:14px; }
@media (prefers-reduced-motion: reduce){
  [data-kit="v3"] .mn-title, [data-kit="v3"] .mn-noise, [data-kit="v3"] .mn-band, [data-kit="v3"] .k3-glitching{ animation:none; }
}

/* ---- 4.14c retro CRT treatment for the masthead: curved glass with a
   highlight, heavy scanlines that crawl, interlace flicker, phosphor bloom
   behind the wordmark, a vignette. The plate reads as a tube, the text as
   lit phosphor. ---- */
[data-kit="v3"] .mn-title{
  border-radius:14px / 18px;
  box-shadow:0 0 34px -10px var(--t-coral), inset 0 0 60px -18px #000, inset 0 0 0 1px color-mix(in srgb, var(--t-coral) 25%, transparent), 0 14px 40px -20px #000;
}
[data-kit="v3"] .mn-title::before{ border-radius:3px; }
/* heavy scanlines + vignette + glass highlight, over the plate's background but under the text */
[data-kit="v3"] .mn-noise::before, [data-kit="v3"] .mn-noise::after{ content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; }
[data-kit="v3"] .mn-noise{ border-radius:14px / 18px; overflow:hidden; opacity:1; mix-blend-mode:normal; background:none; animation:none; }
[data-kit="v3"] .mn-noise::before{
  background:
    repeating-linear-gradient(180deg, rgba(0,0,0,.28) 0 1px, transparent 1px 3px),
    radial-gradient(120% 140% at 50% 50%, transparent 55%, rgba(0,0,0,.55) 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--t-amber) 9%, transparent) 0%, transparent 18%);
  animation:mn-crawl 7s linear infinite;
}
[data-kit="v3"] .mn-noise::after{
  opacity:.14; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  background-size:160px 160px; animation:mn-grain .4s steps(1,end) infinite;
}
@keyframes mn-crawl{ from{ background-position:0 0, 0 0, 0 0; } to{ background-position:0 3px, 0 0, 0 0; } }
/* interlace: every other frame the lines shift by one, as a tube does */
[data-kit="v3"] .mn-mast-word, [data-kit="v3"] .mn-mast-stat{ animation:mn-interlace .12s steps(1,end) infinite; }
@keyframes mn-interlace{ 0%{ transform:translateY(0); } 50%{ transform:translateY(.4px); } }
/* phosphor bloom: the wordmark glows out of its own shape */
[data-kit="v3"] .k3-glitching .k3-word:first-child{
  filter:drop-shadow(0 0 1px var(--k3-ink, var(--t-coral))) drop-shadow(0 0 10px color-mix(in srgb, var(--k3-ink, var(--t-coral)) 70%, transparent)) drop-shadow(0 0 28px color-mix(in srgb, var(--k3-ink, var(--t-coral)) 45%, transparent));
}
[data-kit="v3"] .mn-title-sub .k3-word{ filter:drop-shadow(0 0 1px var(--t-rose)) drop-shadow(0 0 10px color-mix(in srgb, var(--t-rose) 65%, transparent)) drop-shadow(0 0 22px color-mix(in srgb, var(--t-rose) 35%, transparent)); }
/* the glyph ink itself is lit from within: a touch of white at the core */
[data-kit="v3"] .k3-glitching .k3-word:first-child .k3-gl{ background-color:color-mix(in srgb, var(--k3-ink, var(--t-coral)) 82%, #fff); }
[data-kit="v3"] .mn-title-sub .k3-word .k3-gl{ background-color:color-mix(in srgb, var(--t-rose) 80%, #fff); }
/* the readouts flicker like a tube's text, not a screen's */
[data-kit="v3"] .mn-ld b{ animation:mn-tube 3.1s steps(1,end) infinite; }
[data-kit="v3"] .mn-ld:nth-child(2) b{ animation-delay:-1.1s; } [data-kit="v3"] .mn-ld:nth-child(3) b{ animation-delay:-2.2s; }
@keyframes mn-tube{ 0%,100%{ opacity:1; } 71%{ opacity:.72; } 72%{ opacity:1; } 74%{ opacity:.88; } 75%{ opacity:1; } }
@media (prefers-reduced-motion: reduce){
  [data-kit="v3"] .mn-noise::before, [data-kit="v3"] .mn-noise::after, [data-kit="v3"] .mn-mast-word, [data-kit="v3"] .mn-mast-stat, [data-kit="v3"] .mn-ld b{ animation:none; }
}

/* ---- 4.15 THE VOID + FOURTHNODE buttons. The page keeps painting the Void's
   two-layer animated border (never override its background-image or
   animation); the kit adds the glitch: RGB ghosts of the label that tear on a
   timer, a scanline skin, a phase flicker, a pulsing dot. FOURTHNODE is the
   same control in neon blue, with its own border paint. ---- */
body[data-kit="v3"] .nav-void{ --nv:#8b3bff; --nv-2:#ff2a9a; --nv-3:#00e5ff; --nv-ink:#efe4ff; border-radius:3px !important; letter-spacing:.14em; }
body[data-kit="v3"] .nav-void::before{ border-radius:3px; }
body[data-kit="v3"] .nav-void::after{
  content:''; position:absolute; inset:0; pointer-events:none; border-radius:inherit; mix-blend-mode:screen;
  background:repeating-linear-gradient(180deg, rgba(255,255,255,.06) 0 1px, transparent 1px 3px);
  animation:nv-phase 4.4s steps(1,end) infinite;
}
@keyframes nv-phase{ 0%,100%{ opacity:1; } 62%{ opacity:.35; } 63%{ opacity:1; } 64.5%{ opacity:.5; } 65%{ opacity:1; } }
body[data-kit="v3"] .nav-void .nv-txt{ position:relative; display:inline-block; color:var(--nv-ink); -webkit-text-fill-color:var(--nv-ink); animation:nv-jit 4.4s steps(1,end) infinite; }
body[data-kit="v3"] .nav-void .nv-txt::before, body[data-kit="v3"] .nav-void .nv-txt::after{
  content:attr(data-text); position:absolute; left:0; top:0; pointer-events:none; mix-blend-mode:screen; clip-path:inset(0 0 100% 0);
}
body[data-kit="v3"] .nav-void .nv-txt::before{ color:var(--nv-2); -webkit-text-fill-color:var(--nv-2); animation:nv-tear-a 4.4s steps(1,end) infinite; }
body[data-kit="v3"] .nav-void .nv-txt::after{ color:var(--nv-3); -webkit-text-fill-color:var(--nv-3); animation:nv-tear-b 4.4s steps(1,end) infinite; }
@keyframes nv-tear-a{ 0%,60%,70%,100%{ clip-path:inset(0 0 100% 0); transform:none; } 61%{ clip-path:inset(0 0 55% 0); transform:translate(-2px,0); } 63%{ clip-path:inset(45% 0 0 0); transform:translate(2px,0); } 66%{ clip-path:inset(30% 0 30% 0); transform:translate(-1px,0); } }
@keyframes nv-tear-b{ 0%,60%,70%,100%{ clip-path:inset(0 0 100% 0); transform:none; } 61%{ clip-path:inset(50% 0 0 0); transform:translate(2px,0); } 63%{ clip-path:inset(0 0 50% 0); transform:translate(-2px,0); } 66%{ clip-path:inset(20% 0 40% 0); transform:translate(1px,0); } }
@keyframes nv-jit{ 0%,60%,70%,100%{ transform:none; } 61%{ transform:translate(1px,0); } 63%{ transform:translate(-1px,0); } 66%{ transform:translate(0,1px); } }
body[data-kit="v3"] .nav-void .void-dot{ width:7px; height:7px; border-radius:0; transform:rotate(45deg); background:var(--nv); box-shadow:0 0 8px var(--nv), 0 0 16px var(--nv); animation:nv-dot 1.6s ease-in-out infinite; }
@keyframes nv-dot{ 0%,100%{ transform:rotate(45deg) scale(1); opacity:1; } 50%{ transform:rotate(45deg) scale(.7); opacity:.6; } }
body[data-kit="v3"] .nav-void:hover .nv-txt::before, body[data-kit="v3"] .nav-void:hover .nv-txt::after, body[data-kit="v3"] .nav-void:hover .nv-txt{ animation-duration:.6s; }
/* FOURTHNODE: neon blue twin */
body[data-kit="v3"] .nav-node{
  --nv:#19c7ff; --nv-2:#7df9ff; --nv-3:#2a6dff; --nv-ink:#dff6ff; margin-right:22px;
  color:var(--nv-ink) !important; -webkit-text-fill-color:var(--nv-ink) !important;
  background:
    linear-gradient(#030507,#030507) padding-box,
    linear-gradient(90deg, #030507, #19c7ff, #2a6dff, #7df9ff, #030507) border-box;
  background-size:100% 100%, 300% 100%;
  box-shadow:0 0 16px rgba(25,199,255,.5), 0 0 28px rgba(42,109,255,.3), inset 0 0 12px rgba(25,199,255,.14);
  text-shadow:-0.5px 0 rgba(0,229,255,.35), 0.5px 0 rgba(255,255,255,.25), 0 0 9px rgba(25,199,255,.7) !important;
  animation-delay:-2.2s;
}
body[data-kit="v3"] .nav-node:hover{ box-shadow:0 0 24px rgba(25,199,255,.8), 0 0 40px rgba(42,109,255,.5), inset 0 0 16px rgba(25,199,255,.22); }
body[data-kit="v3"] .nav-node::after, body[data-kit="v3"] .nav-node .nv-txt, body[data-kit="v3"] .nav-node .nv-txt::before, body[data-kit="v3"] .nav-node .nv-txt::after{ animation-delay:-2.2s; }
body[data-kit="v3"] .nav-node .nv-txt{ font-family:var(--t-mono); }
@media (max-width:900px){ body[data-kit="v3"] .nav-node{ margin-right:12px; padding:8px 12px; font-size:.6rem; } body[data-kit="v3"] header nav.open > .nav-node{ order:0; } }
@media (prefers-reduced-motion: reduce){
  body[data-kit="v3"] .nav-void::after, body[data-kit="v3"] .nav-void .nv-txt, body[data-kit="v3"] .nav-void .nv-txt::before, body[data-kit="v3"] .nav-void .nv-txt::after, body[data-kit="v3"] .nav-void .void-dot{ animation:none; }
}

/* ---- 4.16 header fit. With THE VOID + FOURTHNODE + the Galaxy menu the desktop
   nav ran ~1214px against ~1000px of room at 1440 and wrapped to two rows. Under
   1560px the slash dividers go and items take a small margin instead; the two
   buttons tighten. At 1560px and up the dividers return. ---- */
@media (min-width:901px){
  body[data-kit="v3"] header nav > .nav-void{ margin-right:10px; padding:7px 11px; letter-spacing:.09em; font-size:.62rem; }
  body[data-kit="v3"] header nav > .nav-node{ margin-right:12px; }
  body[data-kit="v3"] header nav > .aa-nav{ margin-left:4px; }
}
@media (min-width:1560px){
  body[data-kit="v3"] header nav > .nav-divider{ margin-left:10px; margin-right:10px; }
}
@media (min-width:901px) and (max-width:1559px){
  body[data-kit="v3"] header nav > .nav-divider{ display:none; }
  body[data-kit="v3"] header nav > a:not(.nav-void):not(.nav-node), body[data-kit="v3"] header nav > .nav-dropdown{ margin-left:7px; margin-right:7px; }
  body[data-kit="v3"] header nav > .nav-dropdown .nav-dropdown-trigger{ padding-left:4px; padding-right:4px; }
  body[data-kit="v3"] header nav > .aa-nav{ margin-left:6px; }
}
@media (min-width:901px) and (max-width:1559px){
  body[data-kit="v3"] header nav > .nav-void, body[data-kit="v3"] header nav > .nav-node{ padding:7px 10px; font-size:.58rem; margin-right:8px; }
  body[data-kit="v3"] header nav > a:not(.nav-void):not(.nav-node), body[data-kit="v3"] header nav > .nav-dropdown{ margin-left:6px; margin-right:6px; }
}

/* ---- 4.17 nav scale. The three coloured links sat at ~11px while the dropdown
   triggers rendered at ~20px; one scale for the row now: 13px tracked uppercase
   for links and triggers, 11px for the pills and the account chip, everything
   centred on one baseline with even margins. Desktop only; the drawer keeps the
   matrix's own sizing. ---- */
@media (min-width:901px){
  body[data-kit="v3"] header nav{ align-items:center; }
  body[data-kit="v3"] header nav > a:not(.nav-void):not(.nav-node):not(.nav-contact):not(.home),
  body[data-kit="v3"] header nav .nav-dropdown-trigger{
    font-size:13px !important; line-height:1 !important; letter-spacing:.15em !important; text-transform:uppercase !important;
    padding:6px 2px !important; align-items:center; gap:6px;
  }
  body[data-kit="v3"] header nav > a.home{ display:none !important; }
  body[data-kit="v3"] header nav .nav-dropdown-trigger{ padding:6px 4px !important; color:var(--t-amber); -webkit-text-fill-color:var(--t-amber); }
  body[data-kit="v3"] header nav .nav-dropdown-trigger .caret{ font-size:9px; line-height:1; opacity:.75; transform:translateY(-1px); }
  body[data-kit="v3"] header nav .nav-dropdown.open .nav-dropdown-trigger .caret{ transform:translateY(-1px) rotate(180deg); }
  body[data-kit="v3"] header nav .nav-dropdown-trigger:hover, body[data-kit="v3"] header nav .nav-dropdown.open .nav-dropdown-trigger{ color:#fff; -webkit-text-fill-color:#fff; }
  body[data-kit="v3"] header nav > .nav-void, body[data-kit="v3"] header nav > .nav-node{ font-size:11px !important; line-height:1; padding:7px 11px; letter-spacing:.12em; }
  body[data-kit="v3"] header nav > .nav-contact{ font-size:11px !important; line-height:1; padding:7px 13px !important; letter-spacing:.14em; }
  body[data-kit="v3"] header nav > .aa-nav{ font-size:11px; }
  body[data-kit="v3"] header nav > a:not(.nav-void):not(.nav-node), body[data-kit="v3"] header nav > .nav-dropdown{ margin-left:10px; margin-right:10px; }
  body[data-kit="v3"] header nav > .nav-void{ margin-right:10px; } body[data-kit="v3"] header nav > .nav-node{ margin-right:14px; }
  /* the menus match the row */
  body[data-kit="v3"] header nav .nav-dropdown-menu{ top:calc(100% + 12px); min-width:200px; padding:6px 0; }
  body[data-kit="v3"] header nav .nav-dropdown-menu a{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; padding:9px 16px; line-height:1.2; }
}
@media (min-width:901px) and (max-width:1559px){
  body[data-kit="v3"] header nav > a:not(.nav-void):not(.nav-node), body[data-kit="v3"] header nav > .nav-dropdown{ margin-left:8px; margin-right:8px; }
}
@media (min-width:901px) and (max-width:1339px){
  body[data-kit="v3"] header nav > a:not(.nav-void):not(.nav-node):not(.nav-contact), body[data-kit="v3"] header nav .nav-dropdown-trigger{ font-size:12px !important; letter-spacing:.12em !important; }
  body[data-kit="v3"] header nav > a:not(.nav-void):not(.nav-node), body[data-kit="v3"] header nav > .nav-dropdown{ margin-left:6px; margin-right:6px; }
  body[data-kit="v3"] header nav > .nav-void, body[data-kit="v3"] header nav > .nav-node{ font-size:10px !important; padding:6px 9px; letter-spacing:.1em; }
}
@media (min-width:901px) and (max-width:1199px){
  body[data-kit="v3"] header nav > a:not(.nav-void):not(.nav-node):not(.nav-contact), body[data-kit="v3"] header nav .nav-dropdown-trigger{ font-size:11px !important; letter-spacing:.1em !important; }
  body[data-kit="v3"] header nav > a:not(.nav-void):not(.nav-node), body[data-kit="v3"] header nav > .nav-dropdown{ margin-left:5px; margin-right:5px; }
  body[data-kit="v3"] header nav > .nav-void{ margin-right:8px; } body[data-kit="v3"] header nav > .nav-node{ margin-right:10px; }  /* narrow desktops: the two pills join the utility strip, which frees the main row */
  body[data-kit="v3"] header nav > .nav-void, body[data-kit="v3"] header nav > .nav-node{ position:absolute; top:0; margin:0 !important; height:22px; padding:0 9px; display:inline-flex; align-items:center; }
  body[data-kit="v3"] header nav > .nav-node{ right:calc(var(--k3-chip-w, 92px) + 72px); }
  body[data-kit="v3"] header nav > .nav-void:not(.nav-node){ right:calc(var(--k3-chip-w, 92px) + 72px + 91px); }
  body[data-kit="v3"] header nav::before{ width:min(520px, 60%); }
}

/* ---- 4.18 utility row. Contact and the account chip leave the main run and sit
   in a small strip top-right, above the nav (James, 2026-11-10). The nav is
   position:relative already, so the strip is the nav's own top padding. Desktop
   only; in the drawer they stay in the list. ---- */
@media (min-width:901px){
  body[data-kit="v3"] header nav{ padding-top:30px; }
  body[data-kit="v3"] header nav > .nav-contact, body[data-kit="v3"] header nav > .aa-nav{
    position:absolute; top:0; margin:0 !important; height:22px; display:inline-flex; align-items:center;
  }
  body[data-kit="v3"] header nav > .aa-nav{ right:0; font-size:10px; letter-spacing:.14em; }
  body[data-kit="v3"] header nav > .nav-contact{ right:calc(100% - 100% + var(--k3-chip-w, 92px)); font-size:10px !important; padding:4px 11px !important; letter-spacing:.18em; }
  body[data-kit="v3"] header nav > .aa-nav + *{ margin-right:0; }
  /* a hairline under the strip ties it to the row */
  body[data-kit="v3"] header nav::before{ content:''; position:absolute; top:26px; right:0; width:min(340px, 40%); height:1px; background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--t-coral) 45%, transparent)); pointer-events:none; }
}