/* ============================================================================
   FX EXPRESS — THE PRESS DESIGN SYSTEM
   ----------------------------------------------------------------------------
   Concept: a contemporary letterpress / risograph atelier.
   Print-shop metaphors. Editorial layouts. CMYK registration as signature.
   FX assets stay crystal clear — chrome carries all the chromatic personality.
   ============================================================================ */

/* ---- TOKENS ---- */
:root {
  /* paper */
  --paper:    #f1e7d3;     /* warm cream, slightly aged */
  --paper-2:  #e7dcc4;
  --paper-3:  #d8caa9;
  --paper-4:  #c8b88f;
  --paper-edge: #b3a079;

  /* ink */
  --ink:      #1a1722;
  --ink-2:    rgba(26,23,34,0.78);
  --ink-3:    rgba(26,23,34,0.5);
  --ink-4:    rgba(26,23,34,0.28);
  --line:     rgba(26,23,34,0.12);
  --line-2:   rgba(26,23,34,0.22);
  --line-3:   rgba(26,23,34,0.4);

  /* PALETTE C — Lilac & Mint (soft pastel stationery)
     "magenta" and "cyan" are kept as variable names for compatibility,
     but the values are now lilac + mint. */
  --magenta:  #c0a8d4;     /* lilac (was hot pink) */
  --cyan:     #a8d4c4;     /* mint (was federal blue) */
  --magenta-rgb: 192,168,212;
  --cyan-rgb:    168,212,196;

  /* secondary inks — soft pastels */
  --yellow:   #e8d4a8;     /* cream butter */
  --green:    #b8d8a8;     /* leaf soft */
  --violet:   #a8b4d4;     /* periwinkle */
  --extra-1:  #e8b8a8;     /* peach soft */
  --yellow-rgb: 232,212,168;
  --green-rgb:  184,216,168;
  --violet-rgb: 168,180,212;

  /* aberration */
  --aber-l:   var(--magenta);
  --aber-r:   var(--cyan);
  --aber:     2px;

  /* spacing — 4px base grid (pixel-aligned) */
  --u: 4px;
  --u-2: 8px;
  --u-3: 12px;
  --u-4: 16px;
  --u-5: 24px;
  --u-6: 32px;
  --u-7: 48px;
  --u-8: 64px;
  --u-9: 96px;
  --u-10: 128px;

  /* radii — none. all hard. */
  --r: 0;

  /* type scale (pixel-tight) */
  --t-mono: 'Press Start 2P', monospace;
  --t-body: 'VT323', monospace;
  --t-display: 'Press Start 2P', monospace;
  --t-serif:   'Instrument Serif', 'EB Garamond', serif;

  /* z layers — cursor must be ABOVE modals/overlays to stay visible */
  --z-bg: 0;
  --z-base: 1;
  --z-sticky: 50;
  --z-toast: 90;
  --z-modal: 100;
  --z-overlay: 110;
  --z-loader: 200;
  --z-cursor: 9999;
}

/* ============================================================================
   RESET
   ============================================================================ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  image-rendering: pixelated;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: auto;
}
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--t-body);
  font-size: 18px;
  line-height: 1.4;
  min-height: 100vh;
  overflow-x: hidden;
  cursor: none;
  position: relative;
}
@media (hover: none) { body { cursor: auto; } }
img, picture, video, svg { display: block; max-width: 100%; image-rendering: pixelated; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: none; }
@media (hover: none) { button { cursor: pointer; } }
a { color: inherit; text-decoration: none; cursor: none; }
@media (hover: none) { a { cursor: pointer; } }
ul, ol { list-style: none; }

/* ============================================================================
   PAPER GRAIN BACKGROUND — the soul of the site
   ============================================================================ */
body::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  /* single-layer halftone — much cheaper to repaint */
  background-image: radial-gradient(rgba(26,23,34,0.05) 1px, transparent 1.5px);
  background-size: 5px 5px;
}
body::after {
  /* paper edge vignette */
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 60%, rgba(120,90,40,0.10) 100%);
}

/* ============================================================================
   ABERRATION — the chromatic signature
   ============================================================================ */
/* aberration is STATIC by default — text-shadow is essentially free this way.
   Only the hero (.aber-iri.glitchy) animates. */
.aber {
  position: relative;
  text-shadow:
    calc(var(--aber) * -1) 0 var(--aber-l),
    var(--aber) 0 var(--aber-r);
}

/* full iridescent RGB shift — 6 layers, static */
.aber-iri {
  position: relative;
  text-shadow:
    -3px 0 var(--magenta),
    -2px 0 var(--violet),
    -1px 0 var(--yellow),
     1px 0 var(--green),
     2px 0 var(--cyan),
     3px 0 var(--violet);
}

/* periodic glitch — pause when offscreen via .pause-fx wrapper */
.glitchy { animation: glitchJolt 11s steps(1) infinite; will-change: transform; }
@keyframes glitchJolt {
  0%, 97%, 100% { transform: translate(0); filter: none; }
  98%  { transform: translate(-3px, 1px); filter: hue-rotate(15deg) saturate(120%); }
  99%  { transform: translate(2px, -1px); filter: hue-rotate(-10deg); }
}

/* iridescent gradient fill — used in highlights, static */
.iri-fill {
  background: linear-gradient(110deg,
    var(--magenta) 0%, var(--violet) 25%, var(--cyan) 50%, var(--green) 75%, var(--yellow) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* keep iriFlow keyframe — used by scroll-bar fill and toast etc */
@keyframes iriFlow {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* ============================================================================
   PIXEL CURSOR — fine crosshair + 4 viewfinder corners (cinematic instrument)
   On hover over clickables: corners spread outward ("frame-out"), no big square.
   ============================================================================ */
.cursor {
  position: fixed; top: 0; left: 0;
  width: 14px; height: 14px;
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: var(--z-cursor);
  transition: width 0.18s steps(3), height 0.18s steps(3);
}
/* fine crosshair lines */
.cursor::before, .cursor::after {
  content: ''; position: absolute; background: var(--ink);
}
.cursor::before {
  top: 50%; left: 0; right: 0; height: 1px;
  transform: translateY(-50%);
}
.cursor::after {
  left: 50%; top: 0; bottom: 0; width: 1px;
  transform: translateX(-50%);
}

/* aberration trail — 2 small offset crosses, magenta and cyan */
.cursor-aber {
  position: fixed; top: 0; left: 0;
  width: 14px; height: 14px;
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: calc(var(--z-cursor) - 1);
  transition: width 0.18s steps(3), height 0.18s steps(3);
}
.cursor-aber::before, .cursor-aber::after {
  content: ''; position: absolute;
  top: 50%; left: 0; right: 0; height: 1px;
  transform: translateY(-50%);
}
.cursor-aber::before { background: var(--magenta); transform: translate(-2px, -50%); }
.cursor-aber::after  { background: var(--cyan);    transform: translate( 2px, -50%); }

/* viewfinder corners — 4 L-shaped pixel marks at the corners.
   They "frame out" (move outward) when hovering a clickable. */
.cursor-corners {
  position: fixed; top: 0; left: 0;
  width: 22px; height: 22px;
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: var(--z-cursor);
  transition: width 0.2s var(--e-spring, cubic-bezier(.34,1.56,.64,1)),
              height 0.2s var(--e-spring, cubic-bezier(.34,1.56,.64,1));
}
.cursor-corners > span {
  position: absolute;
  width: 5px; height: 5px;
}
.cursor-corners > span::before, .cursor-corners > span::after {
  content: ''; position: absolute; background: var(--ink);
}
.cursor-corners > span::before { top: 0; left: 0; width: 5px; height: 1px; }
.cursor-corners > span::after  { top: 0; left: 0; width: 1px; height: 5px; }
/* tl */
.cursor-corners .tl { top: 0; left: 0; }
/* tr — flip horizontally */
.cursor-corners .tr { top: 0; right: 0; transform: scaleX(-1); }
/* bl — flip vertically */
.cursor-corners .bl { bottom: 0; left: 0; transform: scaleY(-1); }
/* br — flip both */
.cursor-corners .br { bottom: 0; right: 0; transform: scale(-1, -1); }

/* hover state: corners frame out (cursor-corners gets bigger),
   crosshair shrinks slightly to focus the "subject" */
.cursor.is-hover { width: 10px; height: 10px; }
.cursor-aber.is-hover { width: 10px; height: 10px; }
.cursor-corners.is-hover { width: 36px; height: 36px; }

/* click pulse */
.cursor.is-click {
  animation: cursorPunch 0.18s steps(3);
}
@keyframes cursorPunch {
  0%   { transform: translate(-50%, -50%) scale(1); }
  50%  { transform: translate(-50%, -50%) scale(0.7); }
  100% { transform: translate(-50%, -50%) scale(1); }
}

.cursor.is-text, .cursor-aber.is-text, .cursor-corners.is-text { display: none; }
@media (hover: none) { .cursor, .cursor-aber, .cursor-corners { display: none; } }

/* click burst */
.burst {
  position: fixed; pointer-events: none; z-index: var(--z-cursor);
  width: 4px; height: 4px;
  transform: translate(-50%, -50%);
  animation: burstFly 0.5s steps(5) forwards;
}
.burst.b-1 { background: var(--magenta); }
.burst.b-2 { background: var(--cyan); }
.burst.b-3 { background: var(--yellow); }
.burst.b-4 { background: var(--green); }
.burst.b-5 { background: var(--violet); }
@keyframes burstFly {
  0%   { transform: translate(-50%, -50%) translate(0,0); opacity: 1; }
  100% { transform: translate(-50%, -50%) translate(var(--bx,0), var(--by,0)); opacity: 0; }
}

/* ============================================================================
   PAPER MARQUEE (top strip)
   ============================================================================ */
.marquee {
  position: relative;
  background: var(--ink);
  color: var(--paper);
  border-bottom: 2px solid var(--paper-edge);
  overflow: hidden;
  height: 28px;
  display: flex; align-items: center;
  z-index: var(--z-sticky);
}
.marquee::before {
  /* the bleed line — paper edge */
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: repeating-linear-gradient(90deg, var(--ink) 0 4px, transparent 4px 8px);
}
.marquee-track {
  display: flex; gap: 32px;
  animation: marqueeScroll 60s linear infinite;
  white-space: nowrap;
  font-family: var(--t-mono); font-size: 9px; letter-spacing: 2px;
  text-transform: uppercase;
  padding-right: 32px;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marqueeScroll {
  to { transform: translateX(-50%); }
}
.marquee-item .star { color: var(--magenta); }
.marquee-item .triangle { color: var(--cyan); }
.marquee-item.dot { color: var(--paper-3); }

/* ============================================================================
   NAV
   ============================================================================ */
.nav {
  position: sticky; top: var(--u-3); z-index: var(--z-sticky);
  margin: var(--u-3) var(--u-5) 0;
  padding: var(--u-3) var(--u-4);
  background: var(--paper);
  border: 2px solid var(--ink);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--u-5);
  font-family: var(--t-mono);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  /* registration mark — pixel CMYK indicator at top-left */
  position: sticky;
}
.nav::before {
  /* color registration mark — top-left of the press */
  content: '';
  position: absolute; left: -8px; top: -8px;
  width: 16px; height: 16px;
  background:
    linear-gradient(45deg, var(--magenta) 0 50%, var(--cyan) 50% 100%);
  border: 1px solid var(--ink);
}
.nav.is-scrolled {
  background: rgba(241,231,211,0.96);
}
.brand {
  display: flex; align-items: center; gap: var(--u-2);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 2px;
}
.brand .ink-spot {
  display: inline-block;
  width: 14px; height: 14px;
  background: var(--ink);
  position: relative;
}
.brand .ink-spot::before {
  content: ''; position: absolute; inset: -2px -1px -1px -2px;
  background: var(--magenta);
  z-index: -1;
}
.brand .ink-spot::after {
  content: ''; position: absolute; inset: -1px -2px -2px -1px;
  background: var(--cyan);
  z-index: -2;
}
.brand .x { color: var(--magenta); margin: 0 1px; }
.brand .ed {
  font-size: 9px;
  color: var(--ink-3);
  margin-left: var(--u-3);
  letter-spacing: 1px;
}
.brand .ed b { color: var(--ink); }
.nav-links {
  display: flex; gap: var(--u-5);
  justify-content: center;
}
.nav-links a {
  position: relative;
  padding: 6px 4px;
  transition: color 0.15s steps(2);
}
.nav-links a::before {
  content: '►';
  position: absolute;
  left: -14px; top: 50%; transform: translateY(-50%);
  color: var(--magenta);
  opacity: 0; transition: opacity 0.12s, transform 0.18s steps(3);
}
.nav-links a:hover::before { opacity: 1; transform: translate(2px, -50%); }
.nav-links a:hover { color: var(--magenta); }
.nav-tools {
  display: flex; align-items: center; gap: var(--u-2);
}
.nav-tool {
  padding: 6px 10px;
  border: 2px solid var(--ink);
  background: var(--paper);
  font-family: inherit; font-size: 9px;
  letter-spacing: 1.5px;
  transition: all 0.12s;
  position: relative;
}
.nav-tool:hover {
  background: var(--ink); color: var(--paper);
}
.nav-tool .kbd {
  font-size: 8px; opacity: 0.6; margin-left: 4px;
}
.nav-tool.is-active {
  background: var(--magenta); color: var(--paper);
  box-shadow: 2px 2px 0 var(--cyan);
}
.nav-cta {
  padding: 8px 14px;
  background: var(--ink); color: var(--paper);
  border: 2px solid var(--ink);
  font-family: inherit; font-size: 10px;
  letter-spacing: 2px; text-transform: uppercase;
  transition: all 0.15s;
  position: relative;
}
.nav-cta::before {
  content: ''; position: absolute; inset: -2px -2px 4px -2px; z-index: -1;
  background: var(--magenta);
  transition: inset 0.15s steps(3);
}
.nav-cta::after {
  content: ''; position: absolute; inset: -2px -4px 2px 2px; z-index: -2;
  background: var(--cyan);
  transition: inset 0.15s steps(3);
}
.nav-cta:hover {
  transform: translate(-1px, -1px);
}
.nav-cta:hover::before { inset: -3px -3px 5px -3px; }
.nav-cta:hover::after  { inset: -3px -5px 1px 3px; }

/* ============================================================================
   SCROLL PROGRESS — paper edge tear
   ============================================================================ */
.scroll-bar {
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  z-index: var(--z-sticky);
  background: transparent;
}
.scroll-bar-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--magenta), var(--violet), var(--cyan));
  transition: width 0.05s linear;
}

/* ============================================================================
   SECTION DOTS — chapter markers right side
   ============================================================================ */
.section-dots {
  position: fixed; right: var(--u-3); top: 50%;
  transform: translateY(-50%);
  z-index: var(--z-sticky);
  display: flex; flex-direction: column; gap: 8px;
}
.section-dots button {
  position: relative;
  width: 12px; height: 12px;
  background: var(--paper);
  border: 2px solid var(--ink);
  transition: all 0.15s steps(3);
}
.section-dots button::after {
  content: attr(data-label);
  position: absolute;
  right: 18px; top: 50%; transform: translateY(-50%);
  background: var(--ink); color: var(--paper);
  font-family: var(--t-mono); font-size: 8px;
  letter-spacing: 1.5px; text-transform: uppercase;
  padding: 4px 8px;
  white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity 0.15s;
}
.section-dots button:hover::after { opacity: 1; }
.section-dots button.active {
  background: var(--magenta);
  box-shadow: -2px 0 var(--cyan), 2px 0 var(--cyan);
  transform: scale(1.2);
}

/* ============================================================================
   SECTIONS
   ============================================================================ */
section {
  position: relative; z-index: var(--z-base);
  padding: var(--u-9) var(--u-5);
  max-width: 1320px; margin: 0 auto;
}
.sec-eye {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px;
  background: var(--ink); color: var(--paper);
  font-family: var(--t-mono); font-size: 9px;
  letter-spacing: 2px; text-transform: uppercase;
  margin-bottom: var(--u-4);
  position: relative;
}
.sec-eye::before { content: '✦'; color: var(--magenta); }
.sec-eye::after {
  /* offset CMYK shadow */
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--magenta); transform: translate(2px, 2px);
}
.sec-title {
  font-family: var(--t-mono);
  font-size: clamp(22px, 3.6vw, 44px);
  line-height: 1.25;
  letter-spacing: -1px;
  margin-bottom: var(--u-3);
  text-transform: uppercase;
}
.sec-sub {
  font-family: var(--t-body);
  font-size: 22px;
  color: var(--ink-2);
  max-width: 640px; line-height: 1.4;
  margin-bottom: var(--u-7);
}

/* ============================================================================
   BUTTONS
   ============================================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--t-mono);
  font-size: 11px; letter-spacing: 2px;
  padding: var(--u-4) var(--u-5);
  border: 2px solid var(--ink);
  text-transform: uppercase;
  position: relative;
  transition: transform 0.15s steps(3);
}
.btn-primary {
  background: var(--ink); color: var(--paper);
}
.btn-primary::before {
  content:''; position: absolute; inset: 0; z-index: -1;
  background: var(--magenta);
  transform: translate(4px, 4px);
  transition: transform 0.15s steps(3);
}
.btn-primary::after {
  content:''; position: absolute; inset: 0; z-index: -2;
  background: var(--cyan);
  transform: translate(7px, 7px);
  transition: transform 0.15s steps(3);
}
.btn-primary:hover { transform: translate(-2px, -2px); }
.btn-primary:hover::before { transform: translate(6px, 6px); }
.btn-primary:hover::after  { transform: translate(10px, 10px); }
.btn-primary:active { transform: translate(2px, 2px); }
.btn-primary:active::before { transform: translate(2px, 2px); }
.btn-primary:active::after  { transform: translate(4px, 4px); }

.btn-secondary {
  background: var(--paper); color: var(--ink);
  position: relative;
}
.btn-secondary::before {
  content:''; position: absolute; inset: 0; z-index: -1;
  background: var(--cyan);
  transform: translate(4px, 4px);
  transition: transform 0.15s steps(3);
}
.btn-secondary:hover { transform: translate(-2px, -2px); }
.btn-secondary:hover::before { transform: translate(6px, 6px); }

/* ============================================================================
   HERO — asymmetric magazine cover
   ============================================================================ */
.hero {
  position: relative; z-index: var(--z-base);
  padding: var(--u-7) var(--u-5) var(--u-9);
  max-width: 1320px; margin: 0 auto;
}
/* Edition stamp top-left */
.hero-stamp {
  display: inline-flex; align-items: baseline; gap: 12px;
  font-family: var(--t-mono); font-size: 10px;
  letter-spacing: 2px; text-transform: uppercase;
  padding: 6px 12px;
  background: var(--paper);
  border: 2px solid var(--ink);
  margin-bottom: var(--u-5);
  position: relative;
}
.hero-stamp::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--magenta);
  transform: translate(3px, 3px);
}
.hero-stamp .live {
  display: inline-block;
  width: 8px; height: 8px;
  background: var(--green);
  box-shadow: -2px 0 var(--magenta), 2px 0 var(--cyan);
  animation: livePulse 1.6s steps(2) infinite;
}
@keyframes livePulse { 50% { opacity: 0.5; } }

/* Layout: title (left, big) + meta column (right, small) */
.hero-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--u-7);
  align-items: end;
  margin-bottom: var(--u-7);
}
.hero h1 {
  font-family: var(--t-mono);
  font-size: clamp(32px, 6.5vw, 84px);
  line-height: 1.05;
  letter-spacing: -2px;
  text-transform: uppercase;
}
.hero h1 .l1 { display: block; margin-bottom: 0.18em; }
.hero h1 .l2 {
  display: block;
  font-family: var(--t-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 0.85em;
  line-height: 1.0;
  letter-spacing: -1px;
  text-transform: none;
}
.hero-meta {
  font-family: var(--t-body); font-size: 18px;
  line-height: 1.5;
  border-left: 2px solid var(--ink);
  padding-left: var(--u-4);
}
.hero-meta .lede {
  font-size: 22px;
  line-height: 1.4;
  margin-bottom: var(--u-4);
}
.hero-meta .lede b { color: var(--magenta); font-weight: normal; padding: 0 3px; background: rgba(230,38,107,0.08); }
.hero-meta .col {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--u-3);
  font-family: var(--t-mono); font-size: 9px;
  letter-spacing: 1.5px; text-transform: uppercase;
  margin-top: var(--u-4);
  border-top: 1px dashed var(--line-2);
  padding-top: var(--u-3);
}
.hero-meta .col span { display: block; color: var(--ink-3); margin-bottom: 4px; }
.hero-meta .col b { color: var(--ink); font-weight: normal; font-size: 14px; font-family: var(--t-body); letter-spacing: 0; }

.hero-ctas {
  display: flex; gap: var(--u-3); flex-wrap: wrap;
  margin-top: var(--u-3);
}

/* HERO PLATE — the big FX showcase, framed like an engraved plate */
.hero-plate {
  margin-top: var(--u-7);
  position: relative;
  background: var(--paper-2);
  border: 2px solid var(--ink);
  padding: var(--u-3);
}
.hero-plate::before {
  /* CMYK registration shadow underneath */
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--magenta);
  transform: translate(4px, 4px);
}
.hero-plate::after {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background: var(--cyan);
  transform: translate(8px, 8px);
}
.hero-plate-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 8px var(--u-3);
  border-bottom: 1px dashed var(--line-2);
  margin-bottom: var(--u-3);
  font-family: var(--t-mono); font-size: 8px;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--ink-3);
}
.hero-plate-grid {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}
.hero-plate-cell {
  position: relative;
  aspect-ratio: 1;
  background: var(--ink);  /* dark bg makes FX pop */
  border: 1px solid var(--ink);
  display: grid; place-items: center;
  padding: 10px;
  cursor: none;
  transition: transform 0.15s steps(3), box-shadow 0.12s;
  overflow: hidden;
}
.hero-plate-cell:hover {
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--magenta);
}
.hero-plate-cell img {
  width: 100%; height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  position: relative; z-index: 1;
}
.hero-plate-cell-tag {
  position: absolute;
  top: 4px; left: 4px;
  font-family: var(--t-mono); font-size: 7px;
  letter-spacing: 1px;
  color: rgba(241,231,211,0.4);  /* light on dark bg */
  z-index: 2;
}

/* HERO STATS — colophon row */
.hero-stats {
  margin-top: var(--u-7);
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 2px solid var(--ink);
  background: var(--paper);
  position: relative;
}
.hero-stats::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--magenta); transform: translate(3px, 3px);
}
.stat {
  text-align: center;
  padding: var(--u-4) var(--u-3);
  border-right: 2px solid var(--ink);
  position: relative;
}
.stat:last-child { border-right: 0; }
.stat-num {
  font-family: var(--t-mono);
  font-size: clamp(18px, 2.6vw, 32px);
  line-height: 1; letter-spacing: -1px;
  margin-bottom: 6px;
}
.stat-num.iri {
  background: linear-gradient(110deg, var(--magenta) 0%, var(--violet) 50%, var(--cyan) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stat-lbl {
  font-family: var(--t-mono); font-size: 8px;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--ink-3);
}

/* scroll hint */
.scroll-hint {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  margin-top: var(--u-7);
  font-family: var(--t-mono); font-size: 9px; letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink-3);
  animation: bounce 2s steps(2) infinite;
}
.scroll-hint .arrow { font-size: 14px; color: var(--magenta); }
@keyframes bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* ============================================================================
   LIBRARY
   ============================================================================ */
.lib-controls {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: var(--u-3);
  margin-bottom: var(--u-3);
}
.lib-search {
  position: relative;
  display: flex;
  background: var(--paper);
  border: 2px solid var(--ink);
}
.lib-search::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--magenta); transform: translate(3px, 3px);
}
.lib-search-icon {
  display: grid; place-items: center; padding: 0 14px;
  font-family: var(--t-mono); font-size: 12px;
  color: var(--magenta);
  border-right: 2px solid var(--ink);
}
.lib-search input {
  flex: 1; padding: 12px 14px;
  background: transparent; border: 0; outline: none;
  font-family: var(--t-body); font-size: 20px; color: var(--ink);
}
.lib-search input::placeholder { color: var(--ink-3); }
.lib-search-clear {
  width: 36px; opacity: 0; pointer-events: none;
  font-family: var(--t-mono); font-size: 11px;
  color: var(--ink-2);
  border-left: 2px solid var(--ink);
  transition: opacity 0.12s;
}
.lib-search.has-value .lib-search-clear { opacity: 1; pointer-events: all; }
.lib-search-clear:hover { background: var(--magenta); color: var(--paper); }

.lib-count, .lib-view, .lib-sort {
  background: var(--paper);
  border: 2px solid var(--ink);
  font-family: var(--t-mono); font-size: 10px;
  letter-spacing: 1.5px; text-transform: uppercase;
  display: flex; align-items: center;
}
.lib-count { padding: 0 var(--u-3); white-space: nowrap; }
.lib-count b { color: var(--magenta); }

.lib-view button, .lib-sort button {
  padding: 12px 14px;
  border: 0;
  background: var(--paper);
  font-family: inherit; font-size: 10px;
  letter-spacing: 1.5px; text-transform: uppercase;
  border-right: 2px solid var(--ink);
}
.lib-view button:last-child, .lib-sort button:last-child { border-right: 0; }
.lib-view button.active, .lib-sort button.active {
  background: var(--ink); color: var(--paper);
}
.lib-view button:hover:not(.active), .lib-sort button:hover:not(.active) {
  background: var(--paper-3);
}

/* filter rows */
.lib-filters {
  display: flex; flex-wrap: wrap; gap: 6px;
  align-items: center;
  margin-bottom: var(--u-3);
}
.lib-filter-label {
  font-family: var(--t-mono); font-size: 9px;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--ink-3);
  margin-right: 6px;
  padding: 0 6px;
}
.chip {
  padding: 6px 12px;
  background: var(--paper);
  border: 2px solid var(--ink);
  font-family: var(--t-mono); font-size: 9px;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--ink-2);
  transition: all 0.12s steps(2);
  position: relative;
}
.chip:hover { color: var(--ink); transform: translate(-1px, -1px); box-shadow: 2px 2px 0 var(--cyan); }
.chip.active {
  background: var(--ink); color: var(--paper);
  box-shadow: 2px 2px 0 var(--magenta);
}
.chip .count {
  font-size: 8px; opacity: 0.5; margin-left: 4px;
}

.lib-active-pills {
  display: flex; gap: 4px; flex-wrap: wrap; align-items: center;
  min-height: 24px;
  margin-bottom: var(--u-3);
}
.lib-active-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 8px;
  background: var(--magenta); color: var(--paper);
  font-family: var(--t-mono); font-size: 9px; letter-spacing: 1px;
  text-transform: uppercase;
}
.lib-active-pill button { color: var(--paper); padding: 0 2px; font-size: 10px; }
.lib-clear-all {
  font-family: var(--t-mono); font-size: 9px;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--ink-2);
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 4px 6px;
}
.lib-clear-all:hover { color: var(--magenta); }

/* ============================================================================
   LIBRARY — VIRTUALIZED GRID (clean rules, no inheritance from old .fx-tile)
   ============================================================================ */
.lib-grid-virt {
  position: relative;
  margin-top: var(--u-4);
  /* height set by JS based on item count */
}
.lib-tile {
  position: absolute;
  background: var(--ink);  /* dark bg makes FX pop */
  border: 2px solid var(--ink);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  cursor: none;
  transition: border-color 0.12s, box-shadow 0.12s;
}
@media (hover: none) { .lib-tile { cursor: pointer; } }
.lib-tile:hover {
  border-color: var(--magenta);
  z-index: 2;
  box-shadow: 4px 4px 0 var(--cyan);
}
.lib-tile-corner {
  position: absolute;
  top: 4px; left: 4px;
  font-family: var(--t-mono); font-size: 7px;
  letter-spacing: 1px;
  color: rgba(241,231,211,0.4);  /* light on dark bg */
  z-index: 2;
  pointer-events: none;
}
.lib-tile-heart {
  position: absolute;
  top: 4px; right: 4px;
  width: 22px; height: 22px;
  background: var(--paper);
  border: 2px solid var(--paper);
  display: grid; place-items: center;
  font-size: 12px;
  color: var(--ink);
  opacity: 0;
  transition: opacity 0.12s, color 0.12s, background 0.12s;
  z-index: 3;
  cursor: none;
}
.lib-tile:hover .lib-tile-heart, .lib-tile-heart.is-on { opacity: 1; }
.lib-tile-heart.is-on { background: var(--magenta); color: var(--paper); border-color: var(--magenta); }

.lib-tile-img-wrap {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 14px;
  min-height: 0;
}
.lib-tile-img-wrap img {
  width: 80%;
  height: 80%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}
.lib-tile-meta {
  position: absolute; left: 6px; right: 6px; bottom: 6px;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--t-mono); font-size: 8px;
  letter-spacing: 1px; text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.12s;
  pointer-events: none;
}
.lib-tile:hover .lib-tile-meta { opacity: 1; }
.lib-tile-name {
  background: var(--ink); color: var(--paper);
  padding: 3px 6px;
  max-width: 65%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.lib-tile-pack {
  background: var(--magenta); color: var(--paper);
  padding: 3px 6px;
}

/* list view variant */
/* ==== LIST VIEW MODE ==== */
.lib-tile.is-list {
  flex-direction: row;
  align-items: center;
  padding: 0;
  background: var(--ink);
  border: 2px solid var(--ink);
  transition: border-color 0.15s, transform 0.15s steps(3), box-shadow 0.15s;
}
.lib-tile.is-list:hover {
  border-color: var(--magenta);
  transform: translateX(4px);
  box-shadow: 4px 4px 0 var(--magenta);
}
/* index column (left) */
.lib-tile.is-list .lib-tile-corner {
  position: static;
  flex: 0 0 60px;
  padding: 0 12px;
  font-family: var(--t-mono); font-size: 9px;
  letter-spacing: 1.5px;
  color: rgba(241,231,211,0.4);
  text-align: left;
}
/* image — small thumbnail on the left */
.lib-tile.is-list .lib-tile-img-wrap {
  position: static;
  flex: 0 0 64px;
  width: 64px; height: 64px;
  padding: 4px;
  background: rgba(0,0,0,0.4);
  border-right: 2px solid var(--ink);
}
.lib-tile.is-list .lib-tile-img-wrap::before { display: none; }
.lib-tile.is-list .lib-tile-img-wrap img {
  width: 100%; height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}
.lib-tile.is-list:hover .lib-tile-img-wrap img { transform: scale(1.06); }
/* meta — name + pack inline */
.lib-tile.is-list .lib-tile-meta {
  position: static;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 16px;
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.lib-tile.is-list .lib-tile-name {
  background: transparent;
  color: var(--paper);
  padding: 0;
  max-width: none;
  font-family: var(--t-mono);
  font-size: 11px;
  letter-spacing: 1px;
  flex: 1;
}
.lib-tile.is-list .lib-tile-pack {
  background: var(--magenta);
  color: var(--ink);
  padding: 4px 10px;
  font-size: 9px;
  letter-spacing: 1.5px;
  flex-shrink: 0;
}
/* heart — visible always in list mode, in the right slot */
.lib-tile.is-list .lib-tile-heart {
  position: static;
  flex: 0 0 32px;
  width: 32px; height: 32px;
  margin-right: 8px;
  background: transparent;
  border: 2px solid rgba(241,231,211,0.2);
  color: rgba(241,231,211,0.5);
  opacity: 1;
}
.lib-tile.is-list .lib-tile-heart:hover { border-color: var(--magenta); color: var(--magenta); }
.lib-tile.is-list .lib-tile-heart.is-on {
  background: var(--magenta);
  border-color: var(--magenta);
  color: var(--ink);
}
/* hide the iridescent halo on list mode (it's overkill there) */
.lib-tile.is-list::after { display: none; }

/* empty state */
.lib-empty {
  text-align: center; padding: var(--u-9) var(--u-5);
  font-family: var(--t-mono); font-size: 12px;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--ink-3);
}
.lib-empty .glyph {
  font-size: 56px; color: var(--magenta);
  margin-bottom: var(--u-3); display: block;
}
.lib-empty .reset-btn {
  display: inline-block;
  margin-top: var(--u-4);
  padding: 8px 16px;
  background: var(--ink); color: var(--paper);
  border: 2px solid var(--ink);
  font-family: inherit; font-size: 10px;
  letter-spacing: 1.5px;
}

/* load more */
.lib-loadmore {
  display: flex; justify-content: center;
  margin-top: var(--u-7);
}

/* ============================================================================
   FORMATS
   ============================================================================ */
.formats {
  display: grid;
  grid-template-columns: 320px 1fr;
  background: var(--paper);
  border: 2px solid var(--ink);
  position: relative;
  margin-top: var(--u-5);
}
.formats::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--magenta); transform: translate(4px, 4px);
}
.formats-tabs {
  display: flex; flex-direction: column;
  border-right: 2px solid var(--ink);
}
.ftab {
  padding: var(--u-4) var(--u-4);
  background: var(--paper);
  border: 0;
  border-bottom: 2px solid var(--ink);
  font-family: var(--t-mono); font-size: 11px;
  letter-spacing: 1.5px; text-transform: uppercase;
  text-align: left;
  color: var(--ink-2);
  transition: all 0.12s;
  position: relative;
}
.ftab:last-child { border-bottom: 0; }
.ftab small {
  display: block;
  font-family: var(--t-body);
  font-size: 14px; font-weight: normal;
  letter-spacing: 0.5px;
  margin-top: 4px;
  color: var(--ink-3);
  text-transform: none;
}
.ftab:hover:not(.active) { background: var(--paper-3); color: var(--ink); }
.ftab.active {
  background: var(--ink); color: var(--paper);
}
.ftab.active small { color: var(--paper); opacity: 0.8; }
.ftab.active::after {
  content: '►';
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  color: var(--magenta);
}
.ftab-stage {
  background: var(--paper-2);
  min-height: 460px;
  display: grid; place-items: center;
  padding: var(--u-6);
  position: relative; overflow: hidden;
}
.ftab-stage img {
  max-width: 80%; max-height: 380px;
  image-rendering: pixelated;
  position: relative; z-index: 1;
  transition: opacity 0.18s, transform 0.18s steps(3);
}
.ftab-stage.is-switching img { opacity: 0; transform: scale(0.95); }

/* use cases below formats */
.formats-use {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: var(--u-3);
  margin-top: var(--u-5);
}
.use-card {
  padding: var(--u-4);
  background: var(--paper);
  border: 2px solid var(--ink);
  position: relative;
}
.use-card::before {
  content:''; position: absolute; inset: 0; z-index: -1;
  background: var(--cyan); transform: translate(3px, 3px);
}
.use-card-icon {
  font-family: var(--t-mono); font-size: 22px;
  margin-bottom: 8px;
  color: var(--magenta);
}
.use-card-title {
  font-family: var(--t-mono); font-size: 10px;
  letter-spacing: 1.5px; text-transform: uppercase;
  margin-bottom: 6px;
}
.use-card-text {
  font-family: var(--t-body); font-size: 16px;
  color: var(--ink-2); line-height: 1.4;
}

/* ============================================================================
   RESOLUTIONS — focus mode
   ============================================================================ */
.resolutions {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--u-3);
  margin-top: var(--u-5);
}
.res-card {
  position: relative;
  aspect-ratio: 0.85;
  background: var(--paper);
  border: 2px solid var(--ink);
  padding: var(--u-4);
  text-align: center;
  transition: all 0.18s steps(3);
  overflow: hidden;
}
.res-card::before {
  content:''; position: absolute; inset: 0; z-index: -1;
  background: var(--magenta);
  transform: translate(0,0);
  transition: transform 0.15s steps(3);
  opacity: 0;
}
.resolutions:hover .res-card { opacity: 0.5; filter: saturate(0.8); }
.resolutions .res-card:hover { opacity: 1; filter: none; transform: translate(-3px, -3px); }
.resolutions .res-card:hover::before { transform: translate(5px, 5px); opacity: 1; }
.res-stage {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative; z-index: 1;
  background: var(--ink);
  border: 2px solid var(--ink);
  margin: 0 0 var(--u-3) 0;
  padding: 0;
  overflow: hidden;
}
.res-stage img {
  /* force a square viewport that exactly fits the stage interior so the
     FX is always vertically AND horizontally centered, regardless of the
     gif's aspect ratio quirks. */
  width: 180px;
  height: 180px;
  object-fit: contain;
  image-rendering: pixelated;
  display: block;
  /* important: kill any inline style overrides from older HTML */
  max-width: none !important;
  max-height: none !important;
}
.res-name {
  font-family: var(--t-mono); font-size: 14px;
  margin-top: var(--u-3);
  letter-spacing: 1px;
}
.res-role {
  font-family: var(--t-mono); font-size: 8px;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 4px;
}
.res-rule {
  margin-top: 8px;
  height: 6px;
  background: repeating-linear-gradient(90deg, var(--ink) 0 1px, transparent 1px 4px);
  position: relative;
}
.res-rule::before, .res-rule::after {
  content: ''; position: absolute; top: -2px; bottom: -2px; width: 1px; background: var(--ink);
}
.res-rule::before { left: 0; }
.res-rule::after  { right: 0; }
.res-rule-lbl {
  font-family: var(--t-mono); font-size: 7px;
  color: var(--ink-3); letter-spacing: 1px;
  margin-top: 4px;
}

/* ============================================================================
   PACKS STRIP — Numbered Editions
   ============================================================================ */
.packs-strip {
  position: relative;
  margin-top: var(--u-5);
  background: var(--paper);
  border: 2px solid var(--ink);
  overflow: hidden;
  padding: var(--u-4) 0;
}
.packs-strip::before {
  content:''; position: absolute; inset: 0; z-index: -1;
  background: var(--cyan); transform: translate(4px, 4px);
}
.packs-track {
  display: flex; gap: var(--u-3);
  animation: packsScroll 80s linear infinite;
  width: max-content;
  padding: 0 var(--u-3);
}
.packs-track:hover { animation-play-state: paused; }
@keyframes packsScroll { to { transform: translateX(-50%); } }
.pack-card {
  width: 220px; flex-shrink: 0;
  background: var(--paper-2);
  border: 2px solid var(--ink);
  padding: var(--u-3);
  display: flex; flex-direction: column; gap: var(--u-2);
  cursor: none;
  transition: transform 0.15s steps(3);
  position: relative;
}
.pack-card.is-real {
  border-color: var(--magenta);
}
.pack-card:hover {
  transform: translate(-3px, -3px);
  box-shadow: 5px 5px 0 var(--magenta);
  background: var(--paper);
}
.pack-card.is-real:hover {
  box-shadow: 5px 5px 0 var(--cyan);
}
.pack-card-num {
  font-family: var(--t-mono); font-size: 9px;
  color: var(--ink-3); letter-spacing: 1.5px;
  display: flex; justify-content: space-between; align-items: center;
}
.pack-card.is-real .pack-card-num { color: var(--magenta); }
.pack-card-num .badge {
  background: var(--magenta); color: var(--paper);
  padding: 2px 5px; font-size: 7px; letter-spacing: 1px;
}
.pack-card-name {
  font-family: var(--t-mono); font-size: 11px;
  letter-spacing: 1px; line-height: 1.3;
  text-transform: uppercase;
}
.pack-card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.pack-card-grid > div {
  aspect-ratio: 1;
  background: var(--ink);  /* dark bg makes FX pop */
  border: 1px solid var(--ink);
  display: grid; place-items: center;
  padding: 4px;
  overflow: hidden;
}
.pack-card-grid img {
  width: 100%; height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}
.pack-card-foot {
  display: flex; justify-content: space-between;
  font-family: var(--t-body); font-size: 14px;
  color: var(--ink-3);
}

/* ============================================================================
   TODAY'S EDITION (free daily drop)
   ============================================================================ */
.daily {
  margin-top: var(--u-5);
  position: relative;
  background: var(--paper);
  border: 2px solid var(--ink);
  padding: var(--u-6);
}
.daily::before {
  content:''; position: absolute; inset: 0; z-index: -1;
  background: var(--magenta); transform: translate(5px, 5px);
}
.daily::after {
  content:''; position: absolute; inset: 0; z-index: -2;
  background: var(--cyan); transform: translate(10px, 10px);
}
.daily-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  border-bottom: 2px solid var(--ink);
  padding-bottom: var(--u-3);
  margin-bottom: var(--u-4);
}
.daily-head .lbl {
  font-family: var(--t-mono); font-size: 10px;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--magenta);
}
.daily-head h3 {
  font-family: var(--t-mono); font-size: clamp(20px, 3vw, 32px);
  letter-spacing: -1px; text-transform: uppercase;
  margin-top: 6px;
}
.daily-head .date {
  font-family: var(--t-mono); font-size: 10px;
  text-align: right; color: var(--ink-3);
  letter-spacing: 1.5px;
}
.daily-head .countdown {
  font-family: var(--t-mono); font-size: 14px;
  margin-top: 6px; color: var(--ink);
  letter-spacing: 1px;
}
.daily-head .countdown b { color: var(--magenta); }
.daily-grid {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: var(--u-3);
}
.daily-cell {
  aspect-ratio: 1;
  background: var(--ink);  /* dark bg */
  border: 2px solid var(--ink);
  display: grid; place-items: center;
  padding: var(--u-2);
  position: relative;
  cursor: none;
  transition: transform 0.15s steps(3), box-shadow 0.12s;
  overflow: hidden;
}
.daily-cell:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--magenta); }
.daily-cell img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.daily-cell-tag {
  position: absolute; top: 4px; left: 4px;
  font-family: var(--t-mono); font-size: 7px;
  color: rgba(241,231,211,0.4); letter-spacing: 1px;
  z-index: 2;
}
.daily-foot {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: var(--u-4);
  padding-top: var(--u-3);
  border-top: 2px solid var(--ink);
}
.daily-foot .meta {
  font-family: var(--t-mono); font-size: 9px;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--ink-3);
}
.daily-foot .meta b { color: var(--ink); }

/* ============================================================================
   IN ACTION
   ============================================================================ */
.in-action {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: var(--u-3);
  margin-top: var(--u-5);
}
.action-card {
  position: relative;
  background: var(--paper);
  border: 2px solid var(--ink);
  padding: var(--u-3);
  display: flex; flex-direction: column;
  transition: transform 0.18s steps(3), box-shadow 0.18s steps(3);
}
.action-card::before {
  content:''; position: absolute; inset: 0; z-index: -1;
  background: var(--magenta); transform: translate(3px, 3px);
  transition: transform 0.18s steps(3);
}
.action-card:hover { transform: translate(-3px, -3px); }
.action-card:hover::before { transform: translate(6px, 6px); }
.action-card-tag {
  font-family: var(--t-mono); font-size: 9px;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--magenta);
  margin-bottom: 8px;
  display: flex; justify-content: space-between; align-items: center;
}
.action-card-img {
  flex: 1;
  display: grid; place-items: center;
  background: var(--ink);
  border: 1px solid var(--ink);
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/10;
}
.action-card-img img {
  width: 100%; height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  display: block;
}
.action-card-foot {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px dashed var(--line-2);
  font-family: var(--t-mono); font-size: 8px;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--ink-3);
}
.action-card-edition {
  background: var(--ink); color: var(--paper);
  padding: 2px 6px;
  letter-spacing: 1px;
}
.engines {
  display: flex; flex-wrap: wrap; gap: var(--u-3);
  margin-top: var(--u-5);
  justify-content: center;
}
.engine-tag {
  padding: 8px 14px;
  background: var(--paper);
  border: 2px solid var(--ink);
  font-family: var(--t-mono); font-size: 10px;
  letter-spacing: 1.5px; text-transform: uppercase;
}

/* ============================================================================
   PRICING
   ============================================================================ */
.pricing-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--u-4);
  margin-top: var(--u-5);
}
.price-card {
  position: relative;
  padding: var(--u-5);
  background: var(--paper);
  border: 2px solid var(--ink);
  display: flex; flex-direction: column; gap: var(--u-3);
  transition: transform 0.18s steps(3);
}
.price-card::before {
  content:''; position: absolute; inset: 0; z-index: -1;
  background: var(--cyan);
  transform: translate(4px, 4px);
  transition: transform 0.18s steps(3);
}
.price-card:hover { transform: translate(-3px, -3px); }
.price-card:hover::before { transform: translate(7px, 7px); }
.price-card.featured {
  border-color: var(--magenta);
  border-width: 3px;
}
.price-card.featured::before { background: var(--magenta); }
.price-card.featured::after {
  content:''; position: absolute; inset: 0; z-index: -2;
  background: var(--cyan); transform: translate(8px, 8px);
}
.price-card.featured:hover::after { transform: translate(11px, 11px); }
.price-tag {
  font-family: var(--t-mono); font-size: 9px;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--ink-3);
}
.price-tag.featured { color: var(--magenta); }
.price-name {
  font-family: var(--t-mono); font-size: 18px;
  letter-spacing: 1px; line-height: 1.3;
  text-transform: uppercase;
}
.price-amount { display: flex; align-items: baseline; gap: 6px; }
.price-amount .v {
  font-family: var(--t-mono); font-size: 32px; line-height: 1;
}
.price-amount .u {
  font-family: var(--t-body); font-size: 16px;
  color: var(--ink-3);
}
.price-feats { display: flex; flex-direction: column; gap: 8px; flex: 1; font-family: var(--t-body); font-size: 18px; }
.price-feats li { display: flex; align-items: flex-start; gap: 8px; }
.price-feats .check {
  width: 16px; height: 16px;
  background: var(--magenta); color: var(--paper);
  display: grid; place-items: center;
  font-family: var(--t-mono); font-size: 8px;
  flex-shrink: 0;
  margin-top: 4px;
}
.price-feats strong { color: var(--ink); font-weight: normal; background: rgba(230,38,107,0.08); padding: 0 3px; }
.price-cta {
  margin-top: var(--u-2); padding: var(--u-3);
  border: 2px solid var(--ink);
  font-family: var(--t-mono); font-size: 10px;
  letter-spacing: 1.5px; text-transform: uppercase;
  text-align: center;
  transition: all 0.15s;
}
.price-cta.primary { background: var(--ink); color: var(--paper); }
.price-cta.primary:hover { background: var(--magenta); transform: translate(-2px,-2px); box-shadow: 2px 2px 0 var(--cyan); }
.price-cta.secondary { background: var(--paper); }
.price-cta.secondary:hover { background: var(--paper-3); transform: translate(-2px,-2px); box-shadow: 2px 2px 0 var(--magenta); }

/* calculator */
.price-calc {
  margin-top: var(--u-7);
  background: var(--paper);
  border: 2px solid var(--ink);
  padding: var(--u-5);
  position: relative;
}
.price-calc::before {
  content:''; position: absolute; inset: 0; z-index: -1;
  background: var(--magenta); transform: translate(5px, 5px);
}
.price-calc h3 {
  font-family: var(--t-mono); font-size: 14px;
  letter-spacing: 1px; text-transform: uppercase;
  margin-bottom: var(--u-4);
}
.price-calc .row {
  display: grid; grid-template-columns: 200px 1fr;
  gap: var(--u-4); align-items: center;
  margin-bottom: var(--u-3);
}
.price-calc input[type=range] {
  width: 100%;
  -webkit-appearance: none; appearance: none;
  background: transparent;
}
.price-calc input[type=range]::-webkit-slider-runnable-track {
  height: 6px; background: var(--paper-3); border: 2px solid var(--ink);
}
.price-calc input[type=range]::-moz-range-track {
  height: 6px; background: var(--paper-3); border: 2px solid var(--ink);
}
.price-calc input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px; height: 22px;
  background: var(--magenta);
  border: 2px solid var(--ink);
  cursor: none;
  margin-top: -10px;
  box-shadow: 2px 2px 0 var(--cyan);
}
.price-calc input[type=range]::-moz-range-thumb {
  width: 16px; height: 22px;
  background: var(--magenta);
  border: 2px solid var(--ink);
  cursor: none;
  box-shadow: 2px 2px 0 var(--cyan);
}
.price-calc-output {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--u-4);
  margin-top: var(--u-4);
  padding-top: var(--u-4);
  border-top: 2px dashed var(--line-2);
}
.calc-cell { text-align: center; }
.calc-lbl {
  font-family: var(--t-mono); font-size: 9px;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 4px;
}
.calc-val {
  font-family: var(--t-mono); font-size: 22px;
}
.calc-cell.savings .calc-val { color: var(--ink); }
.calc-cell.savings[data-kind="save"] .calc-val {
  color: var(--paper);
  background: var(--ink);
  display: inline-block;
  padding: 4px 12px;
  font-weight: 700;
  box-shadow: 3px 3px 0 var(--magenta);
}
.calc-cell.savings[data-kind="even"] .calc-val { color: var(--ink-2); font-size: 16px; }
.calc-cell.savings[data-kind="over"] .calc-val { color: var(--ink-3); font-size: 14px; line-height: 1.3; }

/* compare table */
.compare-table {
  margin-top: var(--u-7);
  background: var(--paper);
  border: 2px solid var(--ink);
  padding: var(--u-5);
  position: relative;
}
.compare-table::before {
  content:''; position: absolute; inset: 0; z-index: -1;
  background: var(--magenta); transform: translate(5px, 5px);
}
.compare-head { margin-bottom: var(--u-4); }
.compare-table h3 {
  font-family: var(--t-mono); font-size: 14px;
  letter-spacing: 1px; text-transform: uppercase;
  margin-bottom: 4px;
}
.compare-sub {
  font-family: var(--t-body); font-size: 17px;
  color: var(--ink-3);
  line-height: 1.4;
}
.compare-table table { width: 100%; border-collapse: collapse; font-family: var(--t-body); font-size: 17px; }
.compare-table th, .compare-table td {
  text-align: center; padding: 10px 12px;
  border-bottom: 1px dashed var(--line-2);
}
.compare-table th {
  font-family: var(--t-mono); font-size: 10px;
  letter-spacing: 2px; text-transform: uppercase;
  background: var(--paper-2);
  color: var(--ink);
  border-bottom: 2px solid var(--ink);
  padding: 12px;
}
.compare-table th.featured {
  background: var(--ink);
  color: var(--paper);
  position: relative;
}
.compare-table th.featured::before {
  content: '★ BEST';
  position: absolute;
  top: -10px; left: 50%; transform: translateX(-50%);
  background: var(--magenta); color: var(--paper);
  padding: 3px 8px;
  font-size: 8px; letter-spacing: 1.5px;
  border: 2px solid var(--ink);
}
.compare-table td:first-child, .compare-table th:first-child {
  text-align: left;
  color: var(--ink-2);
  font-family: var(--t-mono); font-size: 11px;
  letter-spacing: 0.5px; text-transform: uppercase;
  background: var(--paper-2);
}
.compare-table td.col-bundle, .compare-table tbody tr td:nth-child(4) {
  background: rgba(192, 168, 212, 0.18);   /* highlight bundle column */
  font-weight: 500;
}
.compare-table tbody tr:hover td { background: var(--paper-3); }
.compare-table tbody tr:hover td:nth-child(4) { background: rgba(192, 168, 212, 0.32); }
.compare-table .ok {
  display: inline-block;
  width: 18px; height: 18px;
  background: var(--magenta);
  color: var(--paper);
  font-family: var(--t-mono); font-size: 10px; font-weight: bold;
  border: 1.5px solid var(--ink);
  line-height: 14px;
  text-align: center;
}
.compare-table .ko {
  display: inline-block;
  font-family: var(--t-mono); font-size: 14px;
  color: var(--ink-3);
  line-height: 18px;
}
.compare-table tr:last-child td { border-bottom: 0; }
.compare-table strong { font-weight: 600; }
.compare-table tbody tr:last-child {
  background: var(--paper-2);
}
.compare-table tbody tr:last-child td {
  font-family: var(--t-mono); font-size: 14px;
  letter-spacing: 1px;
}
.compare-table tbody tr:last-child td strong { font-size: 18px; color: var(--magenta); }

/* trust */
.trust-row {
  display: flex; gap: var(--u-5);
  justify-content: center; align-items: center; flex-wrap: wrap;
  margin-top: var(--u-5);
  padding: var(--u-3);
  background: var(--paper-2);
  border: 2px solid var(--ink);
  font-family: var(--t-mono); font-size: 10px;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--ink-2);
}
.trust-row b { color: var(--ink); }
.trust-row .star { color: var(--magenta); }

/* ============================================================================
   NEWSLETTER + TESTIMONIALS
   ============================================================================ */
.newsletter {
  margin-top: var(--u-5);
  background: var(--ink); color: var(--paper);
  padding: var(--u-7) var(--u-6);
  position: relative;
  overflow: hidden;
}
.newsletter::before {
  content:''; position: absolute; inset: 0; z-index: 0;
  background:
    repeating-linear-gradient(45deg, rgba(230,38,107,0.06) 0 4px, transparent 4px 8px),
    repeating-linear-gradient(-45deg, rgba(0,157,214,0.06) 0 4px, transparent 4px 8px);
  pointer-events: none;
}
.newsletter > * { position: relative; z-index: 1; }
.newsletter h3 {
  font-family: var(--t-mono); font-size: clamp(18px, 2.6vw, 28px);
  letter-spacing: -1px; text-transform: uppercase;
  margin-bottom: var(--u-2);
}
.newsletter p {
  font-family: var(--t-body); font-size: 18px;
  color: rgba(241,231,211,0.7);
  margin-bottom: var(--u-4);
  max-width: 540px;
}
.newsletter form {
  display: flex; gap: 0;
  max-width: 480px;
  border: 2px solid var(--paper);
}
.newsletter input {
  flex: 1; padding: 12px 14px;
  background: transparent;
  border: 0; outline: none;
  font-family: var(--t-body); font-size: 18px;
  color: var(--paper);
}
.newsletter input::placeholder { color: rgba(241,231,211,0.5); }
.newsletter button {
  padding: 12px 18px;
  background: var(--magenta); color: var(--paper);
  border: 0;
  border-left: 2px solid var(--paper);
  font-family: var(--t-mono); font-size: 10px;
  letter-spacing: 1.5px; text-transform: uppercase;
  transition: background 0.15s;
}
.newsletter button:hover { background: var(--cyan); }
.newsletter .socials {
  display: flex; gap: var(--u-2);
  margin-top: var(--u-4);
}
.newsletter .socials a {
  padding: 6px 12px;
  background: rgba(241,231,211,0.06);
  border: 1px solid var(--paper);
  font-family: var(--t-mono); font-size: 9px;
  letter-spacing: 1.5px; text-transform: uppercase;
  transition: all 0.12s;
}
.newsletter .socials a:hover {
  background: var(--paper); color: var(--ink);
}

.testimonials {
  margin-top: var(--u-5);
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--u-3);
}
.testimonial {
  padding: var(--u-4);
  background: var(--paper);
  border: 2px solid var(--ink);
  position: relative;
}
.testimonial::before {
  content: '"'; position: absolute;
  top: -12px; left: 12px;
  font-family: var(--t-serif);
  font-size: 64px; line-height: 1;
  color: var(--magenta);
}
.testimonial p {
  font-family: var(--t-body); font-size: 17px;
  line-height: 1.5; margin-bottom: var(--u-3);
}
.testimonial-by {
  display: flex; align-items: center; gap: 10px;
  border-top: 1px dashed var(--line-2);
  padding-top: var(--u-2);
}
.testimonial-avatar {
  width: 24px; height: 24px;
  background: var(--magenta);
  display: grid; place-items: center;
  font-family: var(--t-mono); font-size: 10px;
  color: var(--paper);
}
.testimonial-avatar.b2 { background: var(--cyan); }
.testimonial-avatar.b3 { background: var(--violet); }
.testimonial-name {
  font-family: var(--t-mono); font-size: 9px;
  letter-spacing: 1.5px; text-transform: uppercase;
}
.testimonial-handle {
  font-family: var(--t-body); font-size: 14px;
  color: var(--ink-3);
}

/* ============================================================================
   FAQ
   ============================================================================ */
.faq-search {
  margin-top: var(--u-5);
  margin-bottom: var(--u-3);
  position: relative;
  background: var(--paper);
  border: 2px solid var(--ink);
}
.faq-search::before {
  content:''; position: absolute; inset: 0; z-index: -1;
  background: var(--cyan); transform: translate(3px, 3px);
}
.faq-search input {
  width: 100%;
  padding: 12px 16px 12px 44px;
  background: transparent; border: 0; outline: none;
  font-family: var(--t-body); font-size: 18px;
}
.faq-search-icon {
  position: absolute;
  left: 16px; top: 50%; transform: translateY(-50%);
  font-family: var(--t-mono); font-size: 12px;
  color: var(--magenta);
}

.faq-list { display: flex; flex-direction: column; gap: 6px; }
.faq-item {
  background: var(--paper);
  border: 2px solid var(--ink);
  overflow: hidden;
  transition: all 0.15s;
  position: relative;
}
.faq-item::before {
  content:''; position: absolute; inset: 0; z-index: -1;
  background: var(--magenta);
  transform: translate(0,0);
  opacity: 0;
  transition: transform 0.15s steps(3), opacity 0.12s;
}
.faq-item.open::before { transform: translate(3px, 3px); opacity: 1; }
.faq-q {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--u-4) var(--u-5);
  font-family: var(--t-mono); font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.5px; text-transform: uppercase;
}
.faq-q .icon {
  font-family: var(--t-mono); font-size: 18px;
  color: var(--magenta);
  transition: transform 0.18s steps(3);
}
.faq-item.open .icon { transform: rotate(45deg); color: var(--cyan); }
.faq-q .cat {
  font-family: var(--t-mono); font-size: 8px;
  background: var(--paper-3); color: var(--ink-2);
  padding: 2px 6px;
  letter-spacing: 1px; text-transform: uppercase;
  margin-right: var(--u-3);
}
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.3s; }
.faq-item.open .faq-a { max-height: 320px; }
.faq-a-inner {
  padding: 0 var(--u-5) var(--u-4);
  font-family: var(--t-body); font-size: 18px;
  line-height: 1.5; color: var(--ink-2);
}

/* ============================================================================
   FOOTER
   ============================================================================ */
.footer {
  position: relative; z-index: var(--z-base);
  margin: var(--u-9) auto 0;
  max-width: 1320px;
  padding: var(--u-7) var(--u-5) var(--u-4);
  background: var(--ink); color: var(--paper);
  position: relative;
}
.footer::before {
  /* CMYK strip on top */
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px;
  background:
    linear-gradient(90deg,
      var(--magenta) 0 25%,
      var(--cyan) 25% 50%,
      var(--yellow) 50% 75%,
      var(--paper) 75% 100%);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--u-7);
  margin-bottom: var(--u-7);
}
.footer-brand .brand-name {
  font-family: var(--t-mono); font-size: 18px;
  letter-spacing: 1px;
  margin-bottom: var(--u-2);
}
.footer-brand .brand-name .x { color: var(--magenta); }
.footer-brand p {
  font-family: var(--t-body); font-size: 16px;
  color: rgba(241,231,211,0.6);
  line-height: 1.5;
  max-width: 320px;
  margin-bottom: var(--u-3);
}
.footer-brand .colophon {
  font-family: var(--t-mono); font-size: 9px;
  color: rgba(241,231,211,0.4);
  letter-spacing: 1.5px; text-transform: uppercase;
}
.footer-col h4 {
  font-family: var(--t-mono); font-size: 9px;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--magenta);
  margin-bottom: var(--u-3);
}
.footer-col a {
  display: block;
  font-family: var(--t-body); font-size: 17px;
  color: rgba(241,231,211,0.7);
  padding: 3px 0;
  transition: color 0.12s;
}
.footer-col a:hover { color: var(--paper); }
.footer-bottom {
  padding-top: var(--u-3);
  border-top: 1px dashed rgba(241,231,211,0.2);
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--t-mono); font-size: 9px;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: rgba(241,231,211,0.4);
}

/* ============================================================================
   MODAL
   ============================================================================ */
.modal-bd {
  position: fixed; inset: 0; z-index: var(--z-modal);
  background: rgba(26,23,34,0.85);
  display: none; align-items: center; justify-content: center;
  padding: var(--u-4);
  opacity: 0; transition: opacity 0.2s;
}
.modal-bd.is-open { display: flex; opacity: 1; }
.modal {
  width: min(1080px, 94vw);
  max-height: 92vh;
  background: var(--paper);
  border: 3px solid var(--ink);
  display: grid; grid-template-columns: 1.4fr 1fr;
  position: relative;
  transform: translate(-8px, -8px);
  transition: transform 0.25s steps(4);
}
.modal::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--magenta); transform: translate(8px, 8px);
}
.modal::after {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background: var(--cyan); transform: translate(16px, 16px);
}
.modal-bd.is-open .modal { transform: translate(0, 0); }

.modal-left {
  background: var(--paper-2);
  border-right: 2px solid var(--ink);
  padding: var(--u-4);
  display: flex; flex-direction: column; gap: var(--u-3);
  min-height: 540px;
}
.modal-edition {
  font-family: var(--t-mono); font-size: 9px;
  color: var(--ink-3); letter-spacing: 2px;
  text-transform: uppercase;
}
.modal-stage {
  flex: 1; min-height: 320px;
  background: var(--paper);
  border: 2px solid var(--ink);
  display: grid; place-items: center;
  position: relative;
  overflow: hidden;
  transition: background 0.15s;
}
.modal-stage.bg-paper { background: var(--paper); }
.modal-stage.bg-dark { background: var(--ink); }
.modal-stage.bg-checker {
  background-image:
    linear-gradient(45deg, var(--paper-3) 25%, transparent 25%, transparent 75%, var(--paper-3) 75%),
    linear-gradient(45deg, var(--paper-3) 25%, var(--paper) 25%, var(--paper) 75%, var(--paper-3) 75%);
  background-size: 20px 20px;
  background-position: 0 0, 10px 10px;
}
.modal-stage img {
  max-width: 80%; max-height: 80%;
  image-rendering: pixelated;
  position: relative; z-index: 1;
  transition: opacity 0.18s, transform 0.2s steps(3);
  transform: scale(var(--zoom, 1));
}
.modal-stage.is-switching img { opacity: 0; transform: scale(calc(var(--zoom, 1) * 0.95)); }

.modal-controls {
  display: grid; grid-template-columns: 1fr auto auto; gap: 6px;
}
.modal-bg-toggle, .modal-zoom {
  display: flex; gap: 0;
  background: var(--paper);
  border: 2px solid var(--ink);
  position: relative;
  overflow: hidden;
}
.modal-bg-toggle button, .modal-zoom button {
  padding: 8px 10px;
  background: transparent; border: 0;
  border-right: 2px solid var(--ink);
  font-family: var(--t-mono); font-size: 9px;
  letter-spacing: 1.2px; text-transform: uppercase;
  transition: background 0.12s, color 0.18s, transform 0.18s, letter-spacing 0.2s;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.modal-bg-toggle button:last-child, .modal-zoom button:last-child { border-right: 0; }
.modal-bg-toggle button.active, .modal-zoom button.active {
  background: var(--ink); color: var(--paper);
}
.modal-bg-toggle button:hover:not(.active), .modal-zoom button:hover:not(.active) { background: var(--paper-3); }

.modal-tabs {
  display: flex; gap: 0;
  background: var(--paper);
  border: 2px solid var(--ink);
  position: relative;
  overflow: hidden;
}
.modal-tabs button {
  flex: 1; padding: 10px 8px;
  background: transparent;
  border: 0;
  border-right: 2px solid var(--ink);
  font-family: var(--t-mono); font-size: 9px;
  letter-spacing: 1.2px;
  transition: background 0.12s, color 0.18s, transform 0.18s, letter-spacing 0.2s;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.modal-tabs button:last-child { border-right: 0; }
.modal-tabs button.active {
  background: var(--ink); color: var(--paper);
}
.modal-tabs button:hover:not(.active):not(.is-disabled) { background: var(--paper-3); }

/* ============================================================================
   SEGMENTED FX-CONTROLS — feedback for size/format/bg/zoom buttons
   ============================================================================ */

/* hover: subtle "pulling" letter-spacing + tiny lift */
.modal-tabs button:hover:not(.active):not(.is-disabled),
.modal-bg-toggle button:hover:not(.active),
.modal-zoom button:hover:not(.active) {
  letter-spacing: 1.6px;
  transform: translateY(-1px);
}

/* ACTIVATED — ink stamp impression */
.modal-tabs button.just-activated,
.modal-bg-toggle button.just-activated,
.modal-zoom button.just-activated {
  animation: segActivate 0.5s cubic-bezier(.34,1.56,.64,1);
  z-index: 2;
}
@keyframes segActivate {
  0%   { transform: scale(0.92); background-color: var(--magenta); color: var(--paper); letter-spacing: 0.5px; }
  35%  { transform: scale(1.08); background-color: var(--cyan);    color: var(--ink);   letter-spacing: 2.2px; }
  60%  { transform: scale(1.02); background-color: var(--ink);     color: var(--paper); }
  100% { transform: scale(1);    background-color: var(--ink);     color: var(--paper); letter-spacing: 1.2px; }
}

/* DEACTIVATED — fade out the previous selection */
.modal-tabs button.just-deactivated,
.modal-bg-toggle button.just-deactivated,
.modal-zoom button.just-deactivated {
  animation: segDeactivate 0.32s ease-out;
}
@keyframes segDeactivate {
  0%   { background-color: var(--ink); color: var(--paper); }
  100% { background-color: transparent; color: var(--ink); }
}

/* RIPPLE on click — radial pulse from the press point */
.seg-ripple {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 70%);
  transform: translate(-50%, -50%) scale(0);
  animation: segRipple 0.55s ease-out forwards;
  z-index: 3;
  mix-blend-mode: screen;
}
@keyframes segRipple {
  0%   { transform: translate(-50%, -50%) scale(0);   opacity: 0.9; }
  100% { transform: translate(-50%, -50%) scale(2.5); opacity: 0; }
}

/* SLIDING INDICATOR — colored bar at the bottom of the active button */
.modal-tabs button.active::after,
.modal-bg-toggle button.active::after,
.modal-zoom button.active::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--magenta), var(--cyan), var(--violet));
  background-size: 200% 100%;
  animation: segIndicator 0.45s cubic-bezier(.34,1.56,.64,1), segIndicatorFlow 3s linear infinite 0.45s;
}
@keyframes segIndicator {
  0%   { transform: scaleX(0); transform-origin: left center; }
  100% { transform: scaleX(1); }
}
@keyframes segIndicatorFlow {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* tiny "tick" mark above active label */
.modal-tabs button.active::before,
.modal-bg-toggle button.active::before,
.modal-zoom button.active::before {
  content: '▾';
  position: absolute;
  top: -2px; left: 50%;
  transform: translateX(-50%) translateY(-100%);
  color: var(--magenta);
  font-size: 8px;
  animation: segTick 0.35s cubic-bezier(.34,1.56,.64,1) 0.15s backwards;
  pointer-events: none;
}
@keyframes segTick {
  0%   { opacity: 0; transform: translateX(-50%) translateY(-50%) scale(0); }
  100% { opacity: 1; transform: translateX(-50%) translateY(-100%) scale(1); }
}

/* CONTAINER PULSE — group flashes briefly when a selection changes */
.modal-tabs.is-changed,
.modal-bg-toggle.is-changed,
.modal-zoom.is-changed {
  animation: segContainerPulse 0.45s ease-out;
}
@keyframes segContainerPulse {
  0%   { box-shadow: 0 0 0 0 rgba(192, 168, 212, 0.6); }
  100% { box-shadow: 0 0 0 8px rgba(192, 168, 212, 0); }
}

/* DISABLED state — subtle diagonal hatch instead of just opacity */
.modal-tabs button.is-disabled,
.modal-tabs button:disabled {
  background: repeating-linear-gradient(
    -45deg,
    transparent 0 4px,
    rgba(0,0,0,0.06) 4px 5px
  );
}

/* ============================================================================
   FX TRANSITION ANIMATIONS — visual feedback on the FX itself when controls change
   ============================================================================ */

/* SIZE change — pixel rebuild (steps + scale) */
.modal-stage.fx-anim-size img,
.modal-stage.fx-anim-size .modal-frames-grid {
  animation: fxSizePunch 0.5s steps(8);
}
@keyframes fxSizePunch {
  0%   { transform: scale(calc(var(--zoom, 1) * 1));   filter: brightness(1) blur(0); }
  20%  { transform: scale(calc(var(--zoom, 1) * 0.6)); filter: brightness(1.6) blur(2px); }
  50%  { transform: scale(calc(var(--zoom, 1) * 1.18)); filter: brightness(1.4); }
  80%  { transform: scale(calc(var(--zoom, 1) * 0.95)); filter: brightness(1.1); }
  100% { transform: scale(calc(var(--zoom, 1) * 1));   filter: none; }
}

/* FORMAT change — scanline wipe + chromatic split */
.modal-stage.fx-anim-format img,
.modal-stage.fx-anim-format .modal-frames-grid {
  animation: fxFormatWipe 0.55s cubic-bezier(.22,1,.36,1);
}
@keyframes fxFormatWipe {
  0%   { clip-path: inset(0 0 0 0); filter: none; transform: scale(var(--zoom, 1)); }
  20%  { clip-path: inset(50% 0 50% 0); filter: drop-shadow(3px 0 0 var(--magenta)) drop-shadow(-3px 0 0 var(--cyan)); transform: scale(calc(var(--zoom, 1) * 1.05)) skewX(-2deg); }
  50%  { clip-path: inset(0 0 0 0); filter: drop-shadow(2px 0 0 var(--magenta)) drop-shadow(-2px 0 0 var(--cyan)); }
  100% { clip-path: inset(0 0 0 0); filter: none; transform: scale(var(--zoom, 1)) skewX(0); }
}

/* horizontal scan bar that crosses the stage */
.modal-stage.fx-anim-format::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: 0; height: 4px;
  background: linear-gradient(90deg, transparent, var(--magenta), var(--cyan), var(--violet), transparent);
  z-index: 7;
  pointer-events: none;
  animation: fxFormatScan 0.55s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes fxFormatScan {
  0%   { top: 0; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

/* BG change — flash + fade through the new bg */
.modal-stage.fx-anim-bg {
  animation: fxBgFlash 0.45s ease-out;
}
@keyframes fxBgFlash {
  0%   { box-shadow: inset 0 0 0 0 rgba(192,168,212,0); }
  30%  { box-shadow: inset 0 0 80px 8px rgba(192,168,212,0.5); }
  100% { box-shadow: inset 0 0 0 0 rgba(192,168,212,0); }
}
.modal-stage.fx-anim-bg img,
.modal-stage.fx-anim-bg .modal-frames-grid {
  animation: fxBgPulse 0.45s ease-out;
}
@keyframes fxBgPulse {
  0%   { filter: none; transform: scale(var(--zoom, 1)); }
  40%  { filter: brightness(1.4) drop-shadow(0 0 12px var(--magenta)); transform: scale(calc(var(--zoom, 1) * 1.06)); }
  100% { filter: none; transform: scale(var(--zoom, 1)); }
}

/* ZOOM-IN — punch in with squash */
.modal-stage.fx-anim-zoom-in img,
.modal-stage.fx-anim-zoom-in .modal-frames-grid {
  animation: fxZoomIn 0.4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes fxZoomIn {
  0%   { transform: scale(calc(var(--zoom, 1) * 0.7)); filter: blur(3px) brightness(1.3); }
  60%  { transform: scale(calc(var(--zoom, 1) * 1.1)); filter: blur(0) brightness(1.15); }
  100% { transform: scale(var(--zoom, 1));             filter: none; }
}

/* ZOOM-OUT — pull back with motion blur */
.modal-stage.fx-anim-zoom-out img,
.modal-stage.fx-anim-zoom-out .modal-frames-grid {
  animation: fxZoomOut 0.4s cubic-bezier(.22,1,.36,1);
}
@keyframes fxZoomOut {
  0%   { transform: scale(calc(var(--zoom, 1) * 1.4)); filter: blur(2px) brightness(1.2); }
  60%  { transform: scale(calc(var(--zoom, 1) * 0.92)); filter: blur(0) brightness(1.05); }
  100% { transform: scale(var(--zoom, 1));              filter: none; }
}

/* burst ring on bg/zoom — radial pulse from center */
.modal-stage.fx-anim-bg::after,
.modal-stage.fx-anim-zoom-in::after,
.modal-stage.fx-anim-zoom-out::after {
  /* Reuse existing ::after but override (existing one is the scanline) */
  /* We can't have two ::after, so use a new pseudo via halo */
}
.modal-stage.fx-anim-bg .modal-stage-halo,
.modal-stage.fx-anim-zoom-in .modal-stage-halo,
.modal-stage.fx-anim-zoom-out .modal-stage-halo,
.modal-stage.fx-anim-size .modal-stage-halo,
.modal-stage.fx-anim-format .modal-stage-halo {
  animation: fxHaloPulse 0.55s ease-out;
}
@keyframes fxHaloPulse {
  0%   { box-shadow: 0 0 0 0 rgba(192,168,212,0.6), inset 0 0 0 0 rgba(192,168,212,0); opacity: 0.8; }
  60%  { box-shadow: 0 0 60px 8px rgba(192,168,212,0.3), inset 0 0 60px 8px rgba(192,168,212,0.15); opacity: 1; }
  100% { box-shadow: 0 0 0 0 rgba(192,168,212,0); opacity: 0.5; }
}

@media (prefers-reduced-motion: reduce) {
  .modal-stage.fx-anim-size img,
  .modal-stage.fx-anim-format img,
  .modal-stage.fx-anim-bg img,
  .modal-stage.fx-anim-zoom-in img,
  .modal-stage.fx-anim-zoom-out img,
  .modal-stage.fx-anim-size .modal-frames-grid,
  .modal-stage.fx-anim-format .modal-frames-grid,
  .modal-stage.fx-anim-bg .modal-frames-grid {
    animation: none !important;
  }
  .modal-stage.fx-anim-format::before { display: none; }
}
.modal-tabs button.is-disabled,
.modal-tabs button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}

.modal-right {
  padding: var(--u-5);
  display: flex; flex-direction: column; gap: var(--u-3);
  overflow-y: auto;
  max-height: 92vh;
}
.modal-tag {
  font-family: var(--t-mono); font-size: 9px;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--magenta);
}
.modal-name {
  font-family: var(--t-mono);
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-top: 2px;
}
.modal-desc {
  font-family: var(--t-body); font-size: 17px;
  color: var(--ink-2);
  line-height: 1.4;
  border-top: 1px dashed var(--line-2);
  padding-top: var(--u-3);
}
.modal-meta {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--u-2);
  padding: var(--u-3) 0;
  border-top: 1px dashed var(--line-2);
  border-bottom: 1px dashed var(--line-2);
}
.modal-meta-cell .k {
  font-family: var(--t-mono); font-size: 8px;
  color: var(--ink-3); letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.modal-meta-cell .v {
  font-family: var(--t-body); font-size: 16px;
  color: var(--ink);
}
.modal-stats {
  display: flex; gap: var(--u-4);
  font-family: var(--t-mono); font-size: 9px;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--ink-3);
}
.modal-stats b { color: var(--ink); font-weight: normal; font-family: var(--t-body); font-size: 14px; }

.modal-section-h {
  font-family: var(--t-mono); font-size: 9px;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 6px;
}
.modal-swatches { display: flex; gap: 4px; }
.modal-swatch {
  flex: 1; aspect-ratio: 1;
  background: var(--ink);  /* dark bg so the FX preview pops */
  border: 2px solid var(--ink);
  display: grid; place-items: center;
  padding: 4px;
  position: relative;
  cursor: none;
  transition: transform 0.12s steps(3), box-shadow 0.12s;
  overflow: hidden;
}
@media (hover: none) { .modal-swatch { cursor: pointer; } }
/* tiny color label dot in the corner — identifies which variant */
.modal-swatch::before {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 6px; height: 6px; z-index: 2;
  pointer-events: none;
}
.modal-swatch[data-v="1"]::before { background: var(--magenta); }
.modal-swatch[data-v="2"]::before { background: var(--cyan); }
.modal-swatch[data-v="3"]::before { background: var(--green); }
.modal-swatch[data-v="4"]::before { background: var(--yellow); }
.modal-swatch[data-v="5"]::before { background: var(--violet); }
.modal-swatch:hover { transform: translate(-1px,-1px); }
.modal-swatch.active {
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--magenta);
}
.modal-swatch.is-disabled {
  cursor: not-allowed;
  pointer-events: none;
}
.modal-swatch img {
  width: 100%; height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.modal-related {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}
.modal-related-cell {
  aspect-ratio: 1;
  background: var(--ink);
  border: 2px solid var(--ink);
  display: grid; place-items: center;
  padding: 4px;
  cursor: none;
  transition: transform 0.12s steps(3), box-shadow 0.12s;
  overflow: hidden;
}
.modal-related-cell:hover {
  transform: translate(-1px,-1px);
  box-shadow: 2px 2px 0 var(--magenta);
}
.modal-related-cell img {
  width: 100%; height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

.modal-actions {
  display: grid; grid-template-columns: 1fr auto auto;
  gap: 6px; margin-top: auto;
}
.modal-buy {
  padding: var(--u-3); background: var(--ink); color: var(--paper);
  border: 2px solid var(--ink);
  font-family: var(--t-mono); font-size: 10px;
  letter-spacing: 1.5px; text-transform: uppercase;
  text-align: center;
  transition: all 0.15s;
}
.modal-buy:hover { background: var(--magenta); transform: translate(-2px,-2px); box-shadow: 3px 3px 0 var(--cyan); }
.modal-action-btn {
  width: 44px; height: 44px;
  background: var(--paper-2);
  border: 2px solid var(--ink);
  display: grid; place-items: center;
  font-family: var(--t-mono); font-size: 14px;
  transition: all 0.12s;
}
.modal-action-btn:hover { background: var(--paper-3); }
.modal-action-btn.is-on { background: var(--magenta); color: var(--paper); }

.modal-close {
  position: absolute; top: -20px; right: -20px; z-index: 5;
  width: 40px; height: 40px;
  background: var(--ink); color: var(--paper);
  border: 2px solid var(--ink);
  font-family: var(--t-mono); font-size: 14px;
  transition: all 0.15s steps(3);
}
.modal-close:hover { background: var(--magenta); transform: rotate(90deg); }
.modal-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px;
  background: var(--paper);
  border: 2px solid var(--ink);
  font-family: var(--t-mono); font-size: 14px;
  z-index: 5;
  transition: all 0.15s steps(3);
}
.modal-nav.prev { left: -22px; }
.modal-nav.next { right: -22px; }
.modal-nav:hover { background: var(--magenta); color: var(--paper); transform: translateY(-50%) translate(-2px,-2px); box-shadow: 4px 4px 0 var(--cyan); }
.modal-nav:disabled { opacity: 0.3; cursor: not-allowed; }
.modal-counter {
  position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: var(--paper);
  padding: 4px 12px;
  font-family: var(--t-mono); font-size: 9px;
  letter-spacing: 1.5px;
  z-index: 5;
}

/* ============================================================================
   INDEX PANEL (no command palette terminal — editorial sidebar)
   ============================================================================ */
.idx-bd {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  background: rgba(26,23,34,0.4);
  display: none;
  opacity: 0; transition: opacity 0.18s;
}
.idx-bd.is-open { display: block; opacity: 1; }
.idx {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(420px, 88vw);
  background: var(--paper);
  border-left: 3px solid var(--ink);
  padding: var(--u-5);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s steps(5);
  z-index: var(--z-overlay);
  overflow-y: auto;
}
.idx-bd.is-open .idx { transform: translateX(0); }
.idx-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: var(--u-4);
  border-bottom: 2px solid var(--ink);
  padding-bottom: var(--u-3);
}
.idx-head h3 {
  font-family: var(--t-mono); font-size: 14px;
  letter-spacing: 1px; text-transform: uppercase;
}
.idx-close {
  width: 32px; height: 32px;
  background: var(--ink); color: var(--paper);
  font-family: var(--t-mono); font-size: 12px;
}
.idx-search {
  position: relative;
  border: 2px solid var(--ink);
  margin-bottom: var(--u-3);
  background: var(--paper);
}
.idx-search input {
  width: 100%; padding: 10px 12px 10px 36px;
  background: transparent; border: 0; outline: none;
  font-family: var(--t-body); font-size: 18px;
}
.idx-search-icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  font-family: var(--t-mono); font-size: 11px;
  color: var(--magenta);
}
.idx-results { flex: 1; overflow-y: auto; }
.idx-group {
  font-family: var(--t-mono); font-size: 8px;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--ink-3);
  padding: var(--u-3) 0 var(--u-2);
  border-top: 1px dashed var(--line-2);
}
.idx-group:first-child { border-top: 0; }
.idx-item {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 6px;
  cursor: none;
  transition: all 0.1s;
  border-left: 3px solid transparent;
}
.idx-item.is-selected {
  background: var(--paper-2);
  border-left-color: var(--magenta);
}
.idx-item-num {
  font-family: var(--t-mono); font-size: 9px;
  color: var(--ink-3);
  letter-spacing: 1px;
  width: 22px;
}
.idx-item-text { flex: 1; }
.idx-item-name {
  font-family: var(--t-body); font-size: 17px;
  color: var(--ink);
}
.idx-item-desc {
  font-family: var(--t-mono); font-size: 9px;
  letter-spacing: 1px;
  color: var(--ink-3);
  margin-top: 1px;
}
.idx-item-shortcut {
  font-family: var(--t-mono); font-size: 8px;
  background: var(--paper-3);
  padding: 2px 6px;
  letter-spacing: 1px;
  color: var(--ink-2);
}
.idx-foot {
  padding-top: var(--u-3);
  border-top: 1px dashed var(--line-2);
  font-family: var(--t-mono); font-size: 9px;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--ink-3);
  display: flex; justify-content: space-between;
}

/* ============================================================================
   COLLECTION (wishlist) DRAWER
   ============================================================================ */
.coll-bd {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  background: rgba(26,23,34,0.4);
  display: none;
  opacity: 0; transition: opacity 0.18s;
}
.coll-bd.is-open { display: block; opacity: 1; }
.coll {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: min(380px, 88vw);
  background: var(--paper);
  border-right: 3px solid var(--ink);
  padding: var(--u-5);
  display: flex; flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.3s steps(5);
  z-index: var(--z-overlay);
  overflow-y: auto;
}
.coll-bd.is-open .coll { transform: translateX(0); }
.coll-head {
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 2px solid var(--ink);
  padding-bottom: var(--u-3);
  margin-bottom: var(--u-3);
}
.coll-head h3 {
  font-family: var(--t-mono); font-size: 14px;
  letter-spacing: 1px; text-transform: uppercase;
}
.coll-head h3 .count {
  background: var(--magenta); color: var(--paper);
  padding: 2px 8px;
  margin-left: 8px;
  font-size: 12px;
}
.coll-empty {
  text-align: center;
  padding: var(--u-7) 0;
  font-family: var(--t-body); font-size: 18px;
  color: var(--ink-3);
}
.coll-empty .glyph {
  font-family: var(--t-mono); font-size: 32px;
  color: var(--magenta); display: block;
  margin-bottom: var(--u-3);
}
.coll-list { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.coll-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px;
  background: var(--paper-2);
  border: 2px solid var(--ink);
  position: relative;
  cursor: none;
}
.coll-item-img {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  background: var(--paper);
  border: 1px solid var(--line-2);
}
.coll-item-img img { width: 80%; image-rendering: pixelated; }
.coll-item-text { flex: 1; min-width: 0; }
.coll-item-name {
  font-family: var(--t-mono); font-size: 9px;
  letter-spacing: 1px; text-transform: uppercase;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.coll-item-pack {
  font-family: var(--t-body); font-size: 14px;
  color: var(--ink-3);
}
.coll-item-rm {
  width: 24px; height: 24px;
  background: transparent;
  border: 1px solid var(--ink);
  font-family: var(--t-mono); font-size: 10px;
}
.coll-item-rm:hover { background: var(--magenta); color: var(--paper); }
.coll-foot {
  padding-top: var(--u-3); border-top: 2px solid var(--ink);
  margin-top: var(--u-3);
}
.coll-foot .summary {
  font-family: var(--t-body); font-size: 16px;
  color: var(--ink-2);
  margin-bottom: var(--u-2);
}
.coll-foot .summary b { color: var(--magenta); }

/* ============================================================================
   TOAST
   ============================================================================ */
.toast-host {
  position: fixed; bottom: var(--u-4); left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-toast);
  display: flex; flex-direction: column; gap: 6px;
  align-items: center;
  pointer-events: none;
}
.toast {
  padding: 10px 16px;
  background: var(--ink); color: var(--paper);
  border: 2px solid var(--ink);
  font-family: var(--t-mono); font-size: 10px;
  letter-spacing: 1.5px; text-transform: uppercase;
  display: flex; align-items: center; gap: 8px;
  position: relative;
  opacity: 0; transform: translateY(8px);
  animation: toastIn 0.25s steps(3) forwards, toastOut 0.25s steps(3) 2.7s forwards;
  pointer-events: all;
}
.toast::before {
  content:''; position: absolute; inset: 0; z-index: -1;
  background: var(--magenta); transform: translate(3px, 3px);
}
.toast.success::before { background: var(--green); }
.toast.error::before { background: var(--magenta); }
.toast.info::before { background: var(--cyan); }
@keyframes toastIn { to { opacity: 1; transform: translateY(0); } }
@keyframes toastOut { to { opacity: 0; transform: translateY(-6px); } }

/* ============================================================================
   TOOLTIP
   ============================================================================ */
.tooltip {
  position: fixed;
  padding: 6px 10px;
  background: var(--ink); color: var(--paper);
  border: 2px solid var(--ink);
  font-family: var(--t-mono); font-size: 9px;
  letter-spacing: 1.2px; text-transform: uppercase;
  pointer-events: none;
  z-index: 99;
  opacity: 0; transition: opacity 0.12s;
  white-space: nowrap;
}
.tooltip::before {
  content:''; position: absolute; inset: 0; z-index: -1;
  background: var(--magenta); transform: translate(2px, 2px);
}
.tooltip.is-visible { opacity: 1; }

/* ============================================================================
   LOADER
   ============================================================================ */
.loader {
  position: fixed; inset: 0; z-index: var(--z-loader);
  background: var(--paper);
  display: grid; place-items: center;
  pointer-events: all;
}
.loader-inner {
  text-align: center;
  font-family: var(--t-mono);
}
.loader-title {
  font-size: 24px; letter-spacing: 4px;
  text-transform: uppercase;
  margin-bottom: var(--u-4);
}
.loader-title .l-magenta { color: var(--magenta); }
.loader-title .l-cyan { color: var(--cyan); }
.loader-title .l-yellow { color: var(--yellow); }
.loader-bar {
  width: 320px; height: 12px;
  background: var(--paper-3);
  border: 2px solid var(--ink);
  position: relative;
  overflow: hidden;
  margin: 0 auto var(--u-2);
}
.loader-bar-magenta, .loader-bar-cyan {
  position: absolute; top: 0; bottom: 0;
  width: 0%;
  transition: width 0.2s linear;
}
.loader-bar-magenta { background: var(--magenta); left: 0; }
.loader-bar-cyan {
  background: var(--cyan); left: 0;
  mix-blend-mode: multiply;
  transform: translateX(2px);
}
.loader-status {
  font-size: 9px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--ink-3);
}
.loader.done { animation: loaderOut 0.4s steps(3) forwards; }
@keyframes loaderOut { to { opacity: 0; visibility: hidden; transform: scale(1.05); } }

/* ============================================================================
   REVEALS
   ============================================================================ */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s steps(4), transform 0.5s steps(4);
}
.reveal.is-revealed { opacity: 1; transform: translateY(0); }

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-meta { border-left: 0; padding-left: 0; border-top: 2px solid var(--ink); padding-top: var(--u-4); }
  .hero-plate-grid { grid-template-columns: repeat(4, 1fr); }
  .testimonials { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .nav-links { display: none; }
  .lib-controls { grid-template-columns: 1fr; }
  .formats { grid-template-columns: 1fr; }
  .resolutions { grid-template-columns: repeat(2, 1fr); }
  .pricing-grid { grid-template-columns: 1fr; }
  .modal { grid-template-columns: 1fr; max-height: 96vh; overflow-y: auto; }
  .modal-nav { display: none; }
  .section-dots { display: none; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
  .hero-stats .stat:nth-child(2n) { border-right: 0; }
  .hero-plate-grid { grid-template-columns: repeat(3, 1fr); }
  .daily-grid { grid-template-columns: repeat(2, 1fr); }
  .in-action { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .lib-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-plate-grid { grid-template-columns: repeat(2, 1fr); }
  section { padding: var(--u-7) var(--u-3); }
  .hero { padding: var(--u-4) var(--u-3) var(--u-7); }
}

/* ============================================================================
   REDUCED MOTION
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    transition-duration: 0.001s !important;
  }
}

/* ============================================================================
   PREMIUM PASS — Stage halo, magnetic nav, frames canvas, hover juice,
                  cinematic reveals, scroll indicator, FLIP morph
   ============================================================================ */

/* Modal stage — iridescent breathing halo */
.modal-stage { position: relative; overflow: hidden; }
.modal-stage-halo {
  position: absolute; inset: 8%;
  pointer-events: none;
  background:
    radial-gradient(ellipse at var(--mx, 50%) var(--my, 50%),
      rgba(var(--magenta-rgb), 0.18) 0%,
      rgba(var(--cyan-rgb), 0.12) 30%,
      rgba(var(--violet-rgb), 0.08) 55%,
      transparent 75%);
  filter: blur(40px);
  opacity: 0.85;
  z-index: 0;
  animation: haloBreathe 6s ease-in-out infinite;
}
@keyframes haloBreathe {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50%      { transform: scale(1.1); opacity: 0.95; }
}
/* Corner viewfinder marks around stage */
.modal-stage-corners {
  position: absolute; inset: 14px;
  pointer-events: none; z-index: 2;
}
.msc {
  position: absolute; width: 18px; height: 18px;
  pointer-events: none;
}
.msc::before, .msc::after {
  content: ''; position: absolute; background: rgba(241,231,211,0.4);
}
.msc::before { width: 100%; height: 1.5px; }
.msc::after  { width: 1.5px; height: 100%; }
.msc.tl { top: 0; left: 0; }
.msc.tr { top: 0; right: 0; }
.msc.bl { bottom: 0; left: 0; }
.msc.br { bottom: 0; right: 0; }
.msc.tl::before, .msc.tr::before { top: 0; }
.msc.tl::after, .msc.bl::after { left: 0; }
.msc.tr::after, .msc.br::after { right: 0; }
.msc.bl::before, .msc.br::before { bottom: 0; }
.modal-stage img,
.modal-stage canvas {
  position: relative; z-index: 1;
}
.modal-stage.bg-paper .msc::before,
.modal-stage.bg-paper .msc::after { background: rgba(26,23,34,0.4); }

/* FRAMES CANVAS GRID */
.modal-frames-grid {
  position: absolute; inset: 0;
  z-index: 5;  /* above image */
  background: var(--ink);  /* fully covers GIF underneath */
  display: grid;
  gap: 4px;
  padding: 18px;
  align-content: center;
  justify-content: center;
}
/* explicit hide via attribute — defeats display heritage */
.modal-frames-grid[hidden] { display: none !important; }
.modal-scrubber[hidden]    { display: none !important; }
.modal-stage img[hidden]   { display: none !important; }
.frame-cell {
  position: relative;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(241,231,211,0.15);
  display: grid; place-items: center;
  transition: all 0.18s steps(3);
  cursor: none;
  overflow: hidden;
}
.frame-cell canvas { display: block; image-rendering: pixelated; }
.frame-cell-num {
  position: absolute; top: 2px; left: 4px;
  font-family: var(--t-mono); font-size: 7px;
  color: rgba(241,231,211,0.45);
  letter-spacing: 1px;
  pointer-events: none;
  z-index: 2;
}
.frame-cell.is-current {
  border-color: var(--magenta);
  box-shadow: inset 0 0 0 1px var(--magenta);
  z-index: 2;
}
.frame-cell.is-current .frame-cell-num { color: var(--magenta); }
.frame-cell:hover { border-color: var(--cyan); transform: scale(1.05); z-index: 3; }

/* SCRUBBER */
.modal-scrubber {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  background: var(--paper);
  border: 2px solid var(--ink);
  margin-top: 4px;
}
.msc-play {
  width: 32px; height: 32px;
  background: var(--ink); color: var(--paper);
  font-family: var(--t-mono); font-size: 11px;
  display: grid; place-items: center;
  cursor: none; border: 0;
}
.msc-play:hover { background: var(--magenta); }
.msc-slider {
  flex: 1; -webkit-appearance: none; appearance: none;
  background: transparent; cursor: none;
}
.msc-slider::-webkit-slider-runnable-track {
  height: 6px; background: var(--paper-3); border: 2px solid var(--ink);
}
.msc-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px; height: 18px;
  background: var(--magenta);
  border: 2px solid var(--ink);
  margin-top: -8px;
  cursor: none;
}
.msc-slider::-moz-range-track {
  height: 6px; background: var(--paper-3); border: 2px solid var(--ink);
}
.msc-slider::-moz-range-thumb {
  width: 14px; height: 18px;
  background: var(--magenta);
  border: 2px solid var(--ink);
  cursor: none;
}
.msc-readout {
  font-family: var(--t-mono); font-size: 10px;
  letter-spacing: 1px;
  min-width: 56px; text-align: center;
}
.msc-speed { display: flex; gap: 0; border: 2px solid var(--ink); }
.msc-speed button {
  padding: 4px 8px;
  background: var(--paper); border: 0;
  border-right: 2px solid var(--ink);
  font-family: var(--t-mono); font-size: 9px;
  cursor: none;
}
.msc-speed button:last-child { border-right: 0; }
.msc-speed button.active { background: var(--ink); color: var(--paper); }
.msc-speed button:hover:not(.active) { background: var(--paper-3); }

/* MAGNETIC NEXT/PREV */
.modal-nav {
  position: absolute; top: 50%;
  transform: translateY(-50%);
  width: 48px; height: 88px;
  background: var(--paper);
  border: 2px solid var(--ink);
  cursor: none;
  z-index: 6;
  transition: width 0.25s steps(4), background 0.18s steps(3),
              transform 0.18s steps(3), box-shadow 0.18s steps(3);
  overflow: hidden;
  display: grid; place-items: center;
}
.modal-nav.prev { left: -24px; }
.modal-nav.next { right: -24px; }
.mn-arrow {
  font-family: var(--t-mono); font-size: 22px; font-weight: bold;
  transition: transform 0.18s steps(3), opacity 0.18s, color 0.18s;
}
.mn-preview {
  position: absolute;
  left: 4px; right: 4px;
  top: 4px; bottom: 26px;       /* label is 22px tall, leave 4px gap */
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
  padding: 0;
  overflow: hidden;
}
.mn-preview img {
  width: 95%;
  height: 95%;
  object-fit: contain;
  image-rendering: pixelated;
  display: block;
  flex-shrink: 0;
}
.mn-label {
  position: absolute; bottom: 4px; left: 4px; right: 4px;
  font-family: var(--t-mono); font-size: 7px;
  color: var(--paper);
  background: var(--magenta);
  padding: 2px 4px;
  letter-spacing: 1px; text-transform: uppercase;
  text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
  text-align: center;
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
}
.mn-kbd {
  position: absolute; top: 4px; right: 4px;
  font-family: var(--t-mono); font-size: 8px;
  color: var(--paper);
  background: rgba(26,23,34,0.85);
  padding: 1px 4px;
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
}
.modal-nav:hover {
  width: 140px;
  background: var(--ink);
  box-shadow: 4px 4px 0 var(--magenta);
}
.modal-nav.prev:hover { transform: translateY(-50%) translate(-2px, -2px); }
.modal-nav.next:hover { transform: translateY(-50%) translate(2px, -2px); }
.modal-nav:hover .mn-arrow { color: var(--paper); transform: scale(0.6); opacity: 0.25; }
.modal-nav:hover .mn-preview,
.modal-nav:hover .mn-label,
.modal-nav:hover .mn-kbd { opacity: 1; }
.modal-nav:disabled { opacity: 0.25; pointer-events: none; }

/* LIBRARY TILE — iridescent halo on hover + image lift */
.lib-tile {
  transition: border-color 0.12s, box-shadow 0.12s;
}
.lib-tile::after {
  content: '';
  position: absolute;
  inset: -4px;
  z-index: -1;
  background: conic-gradient(from var(--rot, 0deg),
    var(--magenta), var(--violet), var(--cyan), var(--green), var(--yellow), var(--magenta));
  opacity: 0;
  filter: blur(10px);
  transition: opacity 0.2s;
  pointer-events: none;
}
.lib-tile:hover { z-index: 5; border-color: var(--magenta); }
.lib-tile:hover::after { opacity: 0.5; }
.lib-tile-img-wrap { position: relative; }
.lib-tile-img-wrap::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 22%, rgba(255,255,255,0.07) 0%, transparent 60%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}
.lib-tile:hover .lib-tile-img-wrap::before { opacity: 1; }
.lib-tile-img-wrap img {
  transition: transform 0.25s steps(4);
}
.lib-tile:hover .lib-tile-img-wrap img { transform: scale(1.06); }

/* FILTER CHIPS bouncy click */
.chip { transition: all 0.15s steps(3); }
.chip:active { transform: translate(1px, 1px); }
.chip.active { animation: chipPunch 0.25s steps(3); }
@keyframes chipPunch {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* HEART BURST */
.heart-burst {
  position: fixed; pointer-events: none;
  z-index: 9999;
  font-family: var(--t-mono); font-size: 14px;
  color: var(--magenta);
  animation: heartFly 0.7s steps(7) forwards;
  transform: translate(-50%, -50%);
  text-shadow: 1px 1px 0 var(--ink);
}
@keyframes heartFly {
  0%   { transform: translate(-50%,-50%) scale(0); opacity: 1; }
  50%  { transform: translate(-50%,-50%) translate(var(--dx,0px), var(--dy,-30px)) scale(1.4); opacity: 1; }
  100% { transform: translate(-50%,-50%) translate(var(--dx,0px), var(--dy2,-80px)) scale(0.5); opacity: 0; }
}

/* NAV TOOL kbd bump */
.nav-tool .kbd {
  display: inline-block;
  transition: transform 0.2s cubic-bezier(.34,1.56,.64,1);
}
.nav-tool .kbd.bump { animation: kbdBump 0.5s steps(5); }
@keyframes kbdBump {
  0%, 100% { transform: scale(1); }
  30%      { transform: scale(1.6); color: var(--magenta); }
  60%      { transform: scale(0.9); }
}

/* SECTION CINEMATIC REVEAL */
.sec-title.is-revealing .sw {
  display: inline-block;
  opacity: 0;
  transform: translateY(24px);
  animation: wordRise 0.5s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay: var(--word-delay, 0ms);
}
@keyframes wordRise {
  to { opacity: 1; transform: translateY(0); }
}
.sec-eye.is-revealing {
  animation: eyeSlide 0.5s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes eyeSlide {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}
.sec-sub.is-revealing {
  animation: subFade 0.6s ease forwards;
  animation-delay: 0.2s;
}
@keyframes subFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* SCROLL INDICATOR — current section */
.scroll-indicator {
  position: fixed;
  right: 18px; bottom: 18px;
  z-index: 49;
  background: var(--paper);
  border: 2px solid var(--ink);
  padding: 8px 12px;
  font-family: var(--t-mono); font-size: 9px;
  letter-spacing: 1.5px; text-transform: uppercase;
  display: flex; align-items: center; gap: 8px;
  box-shadow: 3px 3px 0 var(--magenta);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s, transform 0.25s steps(3);
  transform: translateY(8px);
}
.scroll-indicator.is-visible {
  opacity: 1; transform: translateY(0);
}
.scroll-indicator .pct { color: var(--magenta); min-width: 28px; }
.scroll-indicator .sec { color: var(--ink); }
.scroll-indicator .bar {
  width: 32px; height: 4px;
  background: var(--paper-3);
  border: 1px solid var(--ink);
  position: relative;
  overflow: hidden;
}
.scroll-indicator .bar > span {
  display: block; height: 100%;
  background: var(--magenta);
  width: var(--p, 0%);
  transition: width 0.1s linear;
}
@media (max-width: 768px) {
  .scroll-indicator { display: none; }
}

/* FLIP morph from tile to modal — uses transform only for smooth scaling */
.flip-ghost {
  position: fixed;
  z-index: 99;
  pointer-events: none;
  background: var(--ink);
  border: 2px solid var(--ink);
  display: grid; place-items: center;
  padding: 14px;
  transform-origin: top left;
  transition: transform 0.45s cubic-bezier(.34,1.36,.64,1),
              opacity 0.2s 0.3s;
  box-shadow: 4px 4px 0 var(--magenta);
}
.flip-ghost img {
  width: 100%; height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

/* ============================================================================
   MODAL BUILD-UP — UI assembles piece by piece when modal opens
   ============================================================================ */
.modal.is-building [data-build] {
  opacity: 0;
  transform: translateY(8px);
}
.modal.is-building [data-build="meta-cell"] { transform: scale(0.85); transform-origin: top left; }
.modal.is-building [data-build="swatch"]    { transform: scale(0.6); }
.modal.is-building [data-build="related"]   { transform: scale(0.7); }
.modal.is-building [data-build="tab"]       { transform: translateY(12px); }
.modal.is-building [data-build="bg-toggle"], .modal.is-building [data-build="zoom"] { transform: translateY(8px); }
.modal.is-building [data-build="cta"]       { transform: translateY(20px) scale(0.95); }

/* LEFT-SIDE specific entries */
.modal.is-building [data-build="left-edition"] { transform: translateX(-12px); }
.modal.is-building [data-build="left-stage"]   { transform: scale(0.94); transform-origin: center; }
.modal.is-building [data-build="left-controls"],
.modal.is-building [data-build="left-sizes"],
.modal.is-building [data-build="left-formats"] {
  transform: translateY(16px);
}

.modal.is-built [data-build] {
  opacity: 1;
  transform: none;
  transition: opacity 0.4s var(--e-out, cubic-bezier(.16,1,.3,1)),
              transform 0.4s var(--e-out, cubic-bezier(.16,1,.3,1));
  transition-delay: var(--build-delay, 0ms);
}
.modal.is-built [data-build="cta"] {
  transition: opacity 0.4s, transform 0.4s cubic-bezier(.34,1.56,.64,1);
  transition-delay: var(--build-delay, 0ms);
}

/* ============================================================================
   REBUILD on prev/next — cinematic FX swap
   ============================================================================ */

/* Modal shakes slightly in the direction of nav */
.modal.is-rebuilding {
  animation: modalShakeNext 0.45s cubic-bezier(.36,.07,.19,.97);
}
.modal.is-rebuilding-prev {
  animation: modalShakePrev 0.45s cubic-bezier(.36,.07,.19,.97);
}
@keyframes modalShakeNext {
  0%   { transform: translate(0,0); }
  20%  { transform: translate(8px, -2px); }
  40%  { transform: translate(-3px, 1px); }
  60%  { transform: translate(2px, 0); }
  100% { transform: translate(0,0); }
}
@keyframes modalShakePrev {
  0%   { transform: translate(0,0); }
  20%  { transform: translate(-8px, -2px); }
  40%  { transform: translate(3px, 1px); }
  60%  { transform: translate(-2px, 0); }
  100% { transform: translate(0,0); }
}

/* Right panel text slides in from the direction we're navigating to */
.modal.is-rebuilding [data-build="name"],
.modal.is-rebuilding [data-build="desc"],
.modal.is-rebuilding [data-build="tag"],
.modal.is-rebuilding [data-build="stats"] {
  animation: fxSwapIn 0.4s cubic-bezier(.16,1,.3,1);
}
.modal.is-rebuilding [data-build="meta-cell"] {
  animation: fxSwapIn 0.45s cubic-bezier(.16,1,.3,1);
  animation-delay: var(--rebuild-delay, 0ms);
}
.modal.is-rebuilding [data-build="swatch"] {
  animation: swatchPop 0.5s cubic-bezier(.34,1.56,.64,1);
  animation-delay: var(--rebuild-delay, 0ms);
}

/* same swatchPop "shake bouncy" applied to FROM THE SAME EDITION cells + main stage */
.modal.is-rebuilding .modal-related-cell {
  animation: swatchPop 0.55s cubic-bezier(.34,1.56,.64,1);
  animation-delay: var(--rebuild-delay, 0ms);
}
.modal.is-rebuilding .modal-stage img,
.modal.is-rebuilding .modal-stage .modal-frames-grid {
  animation: stagePopZoom 0.6s cubic-bezier(.34,1.56,.64,1);
}
@keyframes stagePopZoom {
  0%   { opacity: 0; transform: scale(calc(var(--zoom, 1) * 0.5)) rotate(-8deg); filter: brightness(1.4); }
  60%  { opacity: 1; transform: scale(calc(var(--zoom, 1) * 1.12)) rotate(2deg); filter: brightness(1.15); }
  100% { opacity: 1; transform: scale(var(--zoom, 1)) rotate(0); filter: none; }
}

/* Direction-aware: prev → slide from left */
.modal.is-rebuilding-prev [data-build="name"],
.modal.is-rebuilding-prev [data-build="desc"],
.modal.is-rebuilding-prev [data-build="tag"],
.modal.is-rebuilding-prev [data-build="stats"] {
  animation: fxSwapInLeft 0.4s cubic-bezier(.16,1,.3,1);
}

@keyframes fxSwapIn {
  0%   { opacity: 0; transform: translateX(28px); filter: blur(2px); }
  60%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes fxSwapInLeft {
  0%   { opacity: 0; transform: translateX(-28px); filter: blur(2px); }
  60%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes swatchPop {
  0%   { opacity: 0; transform: scale(0.5) rotate(-8deg); }
  60%  { opacity: 1; transform: scale(1.12) rotate(2deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

/* Edition number — typewriter-ish scramble + slide */
.modal.is-rebuilding .modal-edition {
  animation: editionScramble 0.5s cubic-bezier(.16,1,.3,1);
}
@keyframes editionScramble {
  0%   { opacity: 0; transform: translateY(-6px); letter-spacing: 4px; }
  50%  { opacity: 0.6; letter-spacing: 3px; filter: blur(1px); }
  100% { opacity: 1; transform: translateY(0); letter-spacing: 2px; filter: none; }
}

/* Stage — the FX itself does a wipe + flash */
.modal.is-rebuilding .modal-stage > img,
.modal.is-rebuilding .modal-stage > canvas {
  animation: stagePunchNext 0.5s cubic-bezier(.22,1,.36,1);
}
.modal.is-rebuilding-prev .modal-stage > img,
.modal.is-rebuilding-prev .modal-stage > canvas {
  animation: stagePunchPrev 0.5s cubic-bezier(.22,1,.36,1);
}
@keyframes stagePunchNext {
  0%   { transform: translateX(60px) scale(0.9); opacity: 0; filter: brightness(2.2) saturate(0.5); }
  30%  { opacity: 1; filter: brightness(1.6); }
  60%  { transform: translateX(-6px) scale(1.04); }
  100% { transform: translateX(0) scale(1); opacity: 1; filter: none; }
}
@keyframes stagePunchPrev {
  0%   { transform: translateX(-60px) scale(0.9); opacity: 0; filter: brightness(2.2) saturate(0.5); }
  30%  { opacity: 1; filter: brightness(1.6); }
  60%  { transform: translateX(6px) scale(1.04); }
  100% { transform: translateX(0) scale(1); opacity: 1; filter: none; }
}

/* Halo flashes brighter during rebuild */
.modal.is-rebuilding .modal-stage-halo {
  animation: haloFlash 0.5s cubic-bezier(.22,1,.36,1);
}
@keyframes haloFlash {
  0%   { opacity: 0; transform: scale(0.5); filter: blur(80px) hue-rotate(0deg); }
  40%  { opacity: 1.2; transform: scale(1.3); filter: blur(60px) hue-rotate(45deg); }
  100% { opacity: 0.85; transform: scale(1); filter: blur(40px); }
}

/* Corner brackets blink */
.modal.is-rebuilding .modal-stage-corners .msc {
  animation: cornerBlink 0.5s steps(4);
}
@keyframes cornerBlink {
  0%, 100% { opacity: 1; }
  25%      { opacity: 0.2; transform: scale(1.4); }
  50%      { opacity: 1;   transform: scale(0.9); }
}
/* slight delay per corner so they don't all blink at once */
.modal.is-rebuilding .msc.tl { animation-delay: 0ms; }
.modal.is-rebuilding .msc.tr { animation-delay: 60ms; }
.modal.is-rebuilding .msc.br { animation-delay: 120ms; }
.modal.is-rebuilding .msc.bl { animation-delay: 180ms; }

/* Counter "N / 1264" bump */
.modal.is-rebuilding .modal-counter {
  animation: counterBump 0.4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes counterBump {
  0%   { transform: translateX(-50%) scale(0.7); background: var(--magenta); }
  60%  { transform: translateX(-50%) scale(1.15); }
  100% { transform: translateX(-50%) scale(1); }
}

/* Particle burst container — JS spawns particles inside this */
.stage-burst {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  overflow: hidden;
}
.stage-burst-particle {
  position: absolute;
  top: 50%; left: 50%;
  width: 4px; height: 4px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: burstFly 0.55s cubic-bezier(.22,1,.36,1) forwards;
}
.stage-burst-particle.p-magenta { background: var(--magenta); box-shadow: 0 0 6px var(--magenta); }
.stage-burst-particle.p-cyan    { background: var(--cyan);    box-shadow: 0 0 6px var(--cyan); }
.stage-burst-particle.p-yellow  { background: var(--yellow);  box-shadow: 0 0 6px var(--yellow); }
.stage-burst-particle.p-green   { background: var(--green);   box-shadow: 0 0 6px var(--green); }
.stage-burst-particle.p-violet  { background: var(--violet);  box-shadow: 0 0 6px var(--violet); }
@keyframes burstFly {
  0%   { transform: translate(-50%, -50%) scale(0.3); opacity: 1; }
  60%  { opacity: 1; }
  100% { transform: translate(-50%, -50%) translate(var(--bx, 0), var(--by, 0)) scale(0); opacity: 0; }
}

/* glitch scanline that sweeps when rebuilding (existing — kept) */
.modal-stage::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: 0; height: 2px;
  background: linear-gradient(90deg,
    transparent, var(--magenta), var(--cyan), var(--violet), transparent);
  opacity: 0;
  pointer-events: none;
  z-index: 6;
}
.modal.is-rebuilding .modal-stage::after {
  animation: stageScanline 0.55s steps(20) forwards;
}
@keyframes stageScanline {
  0%   { top: 0;   opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

/* nav button punch when clicked — bigger / shake */
.modal-nav.is-pressed {
  animation: navPunch 0.4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes navPunch {
  0%   { box-shadow: 4px 4px 0 var(--magenta); }
  30%  { transform: translateY(-50%) scale(1.18); box-shadow: 10px 10px 0 var(--cyan); }
  60%  { transform: translateY(-50%) scale(0.92); box-shadow: 2px 2px 0 var(--violet); }
  100% { transform: translateY(-50%) scale(1);  box-shadow: 4px 4px 0 var(--magenta); }
}

/* Right-panel chromatic aberration sweep during rebuild */
.modal.is-rebuilding .modal-right {
  animation: rightAberration 0.5s steps(8);
}
@keyframes rightAberration {
  0%, 100% { filter: none; }
  20%      { filter: drop-shadow(2px 0 0 var(--magenta)) drop-shadow(-2px 0 0 var(--cyan)); }
  40%      { filter: drop-shadow(-1px 0 0 var(--magenta)) drop-shadow(1px 0 0 var(--cyan)); }
}

/* sweep "scan line" that moves down the right panel as it builds */
.modal-right { position: relative; overflow: hidden; }
.modal-right::after {
  content: '';
  position: absolute; left: 0; right: 0;
  top: 0; height: 3px;
  background: linear-gradient(90deg,
    transparent, var(--magenta), var(--cyan), var(--violet), transparent);
  opacity: 0;
  pointer-events: none;
  z-index: 10;
}
.modal.is-building .modal-right::after {
  animation: rightScanline 0.9s steps(20) forwards;
}
@keyframes rightScanline {
  0%   { top: 0;  opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

/* progressive reveal flicker on the stage as it loads */
.modal.is-building .modal-stage {
  animation: stageBoot 0.4s steps(4);
}
@keyframes stageBoot {
  0%   { filter: brightness(0.3) saturate(0); }
  50%  { filter: brightness(1.4) saturate(2); }
  100% { filter: none; }
}

/* HERO PLATE halo on hover */
.hero-plate-cell::after {
  content: '';
  position: absolute;
  inset: -3px;
  z-index: -1;
  background: conic-gradient(from var(--rot, 45deg),
    var(--magenta), var(--cyan), var(--violet), var(--magenta));
  opacity: 0;
  filter: blur(10px);
  transition: opacity 0.2s;
  pointer-events: none;
}
.hero-plate-cell:hover::after { opacity: 0.55; }

/* live dot stronger */
.hero-stamp .live {
  animation: livePulseStrong 1.4s ease infinite;
}
@keyframes livePulseStrong {
  0%, 100% { opacity: 1; box-shadow: -2px 0 var(--magenta), 2px 0 var(--cyan), 0 0 0 0 rgba(var(--green-rgb),0.6); }
  50%      { opacity: 0.65; box-shadow: -2px 0 var(--magenta), 2px 0 var(--cyan), 0 0 0 6px rgba(var(--green-rgb),0); }
}

/* ============================================================================
   PRESS FEEDBACK — generic squash/punch for ALL UI buttons
   ============================================================================ */

/* hover lift on tab-style buttons (subtle, fast) */
.modal-tabs button,
.modal-bg-toggle button,
.modal-zoom button,
.msc-speed button {
  transition: transform 90ms cubic-bezier(.34,1.56,.64,1),
              box-shadow 90ms ease,
              background 120ms ease,
              color 120ms ease,
              border-color 120ms ease;
}
.modal-tabs button:hover,
.modal-bg-toggle button:hover,
.modal-zoom button:hover,
.msc-speed button:hover {
  transform: translateY(-1px);
}

/* :active immediate squash (perceived sub-frame feedback) */
.modal-tabs button:active,
.modal-bg-toggle button:active,
.modal-zoom button:active,
.msc-speed button:active,
.modal-action-btn:active,
.modal-buy:active,
.modal-swatch:active,
.msc-play:active,
.lib-view-btn:active,
.lib-sort-btn:active,
.chip:active,
.nav-tool:active,
.cta:active,
.btn:active,
.lib-tile-heart:active,
.modal-close:active {
  transform: translate(1px, 1px) scale(0.94) !important;
  filter: brightness(1.15);
  transition: transform 60ms steps(2), filter 60ms;
}

/* .is-pressed — JS-driven punch animation (overrides :active for full sequence) */
.is-pressed-punch {
  animation: btnPunch 0.32s cubic-bezier(.34,1.56,.64,1);
}
@keyframes btnPunch {
  0%   { transform: scale(1); }
  20%  { transform: scale(0.88) translateY(2px); filter: brightness(1.3); }
  55%  { transform: scale(1.08) translateY(-1px); filter: brightness(1.15); }
  100% { transform: scale(1); filter: none; }
}

/* swatch press — bigger pop with rotation */
.modal-swatch.is-pressed-punch {
  animation: swatchPunch 0.42s cubic-bezier(.34,1.56,.64,1);
}
@keyframes swatchPunch {
  0%   { transform: scale(1) rotate(0); }
  25%  { transform: scale(0.78) rotate(-6deg); filter: brightness(1.4); }
  60%  { transform: scale(1.18) rotate(4deg); filter: brightness(1.2); box-shadow: 0 0 0 4px rgba(255,255,255,0.4); }
  100% { transform: scale(1) rotate(0); filter: none; box-shadow: none; }
}

/* CTA / buy button press — bouncy with shadow shift */
.modal-buy.is-pressed-punch,
.cta.is-pressed-punch,
.btn-primary.is-pressed-punch {
  animation: ctaPunch 0.4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes ctaPunch {
  0%   { transform: translateY(0); box-shadow: 4px 4px 0 var(--ink); }
  30%  { transform: translateY(4px); box-shadow: 0 0 0 var(--ink); filter: brightness(1.2); }
  65%  { transform: translateY(-3px); box-shadow: 6px 6px 0 var(--magenta); filter: brightness(1.1); }
  100% { transform: translateY(0); box-shadow: 4px 4px 0 var(--ink); filter: none; }
}

/* heart / wishlist action — pulse + color flash */
.modal-action-btn.is-pressed-punch,
.lib-tile-heart.is-pressed-punch {
  animation: heartPunch 0.45s cubic-bezier(.34,1.56,.64,1);
}
@keyframes heartPunch {
  0%   { transform: scale(1); }
  25%  { transform: scale(0.7); filter: hue-rotate(-15deg) brightness(1.3); }
  55%  { transform: scale(1.25); filter: hue-rotate(10deg) brightness(1.2); }
  80%  { transform: scale(0.95); }
  100% { transform: scale(1); filter: none; }
}

/* tab/format/size/bg toggle press — quick tick */
.modal-tabs button.is-pressed-punch,
.modal-bg-toggle button.is-pressed-punch,
.modal-zoom button.is-pressed-punch,
.msc-speed button.is-pressed-punch,
.lib-view-btn.is-pressed-punch,
.lib-sort-btn.is-pressed-punch {
  animation: tabPunch 0.28s steps(4);
}
@keyframes tabPunch {
  0%   { transform: scale(1); background-color: rgba(255,255,255,0); }
  30%  { transform: scale(0.92); background-color: rgba(192, 168, 212, 0.4); }
  60%  { transform: scale(1.06); }
  100% { transform: scale(1); background-color: rgba(255,255,255,0); }
}

/* play/pause press — rotate */
.msc-play.is-pressed-punch {
  animation: playPunch 0.32s cubic-bezier(.34,1.56,.64,1);
}
@keyframes playPunch {
  0%   { transform: scale(1) rotate(0); }
  40%  { transform: scale(0.85) rotate(-12deg); filter: brightness(1.3); }
  100% { transform: scale(1) rotate(0); filter: none; }
}

/* nav-tool (cmd, sound, get bundle) press */
.nav-tool.is-pressed-punch {
  animation: navToolPunch 0.3s cubic-bezier(.34,1.56,.64,1);
}
@keyframes navToolPunch {
  0%   { transform: scale(1); }
  35%  { transform: scale(0.88) translateY(2px); filter: brightness(1.2); }
  70%  { transform: scale(1.06); }
  100% { transform: scale(1); filter: none; }
}

/* chip press — already has chipPunch on .active, this is for click feedback */
.chip.is-pressed-punch {
  animation: chipPressPunch 0.26s steps(3);
}
@keyframes chipPressPunch {
  0%   { transform: translate(0, 0); }
  35%  { transform: translate(2px, 2px) scale(0.94); filter: brightness(1.2); }
  70%  { transform: translate(-1px, -1px) scale(1.04); }
  100% { transform: translate(0, 0); filter: none; }
}

/* close button press — spin */
.modal-close.is-pressed-punch {
  animation: closePunch 0.36s cubic-bezier(.34,1.56,.64,1);
}
@keyframes closePunch {
  0%   { transform: rotate(0) scale(1); }
  50%  { transform: rotate(90deg) scale(0.8); filter: brightness(1.3); }
  100% { transform: rotate(0) scale(1); filter: none; }
}

/* respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .is-pressed-punch { animation: none !important; }
  .modal-tabs button:active,
  .modal-bg-toggle button:active,
  .modal-zoom button:active,
  .msc-speed button:active,
  .modal-action-btn:active,
  .modal-buy:active,
  .modal-swatch:active,
  .msc-play:active,
  .lib-view-btn:active,
  .lib-sort-btn:active,
  .chip:active,
  .nav-tool:active,
  .cta:active,
  .btn:active,
  .modal-close:active {
    transform: none !important;
    filter: none !important;
  }
}

/* ============================================================================
   ============================================================================
   GLOBAL VISUAL POLISH PASS — feedback, life, and motion across the page
   Added all at once. Each block is self-contained.
   ============================================================================
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. SECTION TITLES — chromatic shimmer on entry + accent ribbon
   --------------------------------------------------------------------------- */
.sec-eye {
  position: relative;
  overflow: visible;
}
.sec-eye::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 24px;
  height: 1px;
  background: linear-gradient(90deg, var(--magenta), var(--cyan));
  transform: translateX(-32px);
  opacity: 0.6;
  pointer-events: none;
  animation: secEyeRibbon 3.5s ease-in-out infinite;
}
@keyframes secEyeRibbon {
  0%, 100% { transform: translateX(-32px) scaleX(1); opacity: 0.4; }
  50%      { transform: translateX(-40px) scaleX(1.4); opacity: 0.9; }
}
.sec-title {
  position: relative;
}
.sec-title .aber {
  display: inline-block;
  transition: text-shadow 0.4s ease, letter-spacing 0.5s ease;
}
.sec-title:hover .aber {
  text-shadow: -3px 0 var(--magenta), 3px 0 var(--cyan), 0 0 12px rgba(192,168,212,0.4);
  letter-spacing: 1.5px;
}

/* ---------------------------------------------------------------------------
   2. HERO PLATE CELLS — rich hover with FX zoom + accent halo + corner ticks
   --------------------------------------------------------------------------- */
.hero-plate-cell {
  position: relative;
  overflow: hidden;
}
.hero-plate-cell::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid transparent;
  pointer-events: none;
  transition: border-color 0.2s, box-shadow 0.3s;
  z-index: 2;
}
.hero-plate-cell::after {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px dashed transparent;
  pointer-events: none;
  transition: border-color 0.3s 0.05s;
  z-index: 1;
}
.hero-plate-cell:hover::before {
  border-color: var(--magenta);
  box-shadow: inset 0 0 30px rgba(192,168,212,0.4);
  animation: heroCellMagentaPulse 1.4s ease-in-out infinite;
}
.hero-plate-cell:hover::after {
  border-color: var(--cyan);
}
@keyframes heroCellMagentaPulse {
  0%, 100% { box-shadow: inset 0 0 30px rgba(192,168,212,0.3), 0 0 0 0 rgba(192,168,212,0.5); }
  50%      { box-shadow: inset 0 0 50px rgba(192,168,212,0.5), 0 0 0 4px rgba(192,168,212,0.2); }
}
.hero-plate-cell img {
  transition: transform 0.4s cubic-bezier(.34,1.56,.64,1), filter 0.3s;
}
.hero-plate-cell:hover img {
  transform: scale(1.12);
  filter: brightness(1.15) drop-shadow(0 0 8px rgba(192,168,212,0.6));
}

/* ---------------------------------------------------------------------------
   3. LIBRARY TILES — corner tick reveal + image float + edition stamp slide
   --------------------------------------------------------------------------- */
.lib-tile {
  /* keep position:absolute set in earlier rule — do NOT override it.
     do NOT set isolation: isolate — it traps the conic halo from .lib-tile::after */
}
.lib-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    transparent 0%, transparent 60%,
    rgba(192,168,212,0.15) 80%, rgba(140,210,210,0.2) 100%);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
  z-index: 1;
}
.lib-tile:hover::before { opacity: 1; }
.lib-tile-img-wrap img {
  transition: transform 0.45s cubic-bezier(.34,1.56,.64,1), filter 0.25s;
}
.lib-tile:hover .lib-tile-img-wrap img {
  transform: scale(1.08) translateY(-2px);
  filter: brightness(1.15) drop-shadow(0 4px 6px rgba(0,0,0,0.4));
}
.lib-tile-corner {
  transition: opacity 0.18s, transform 0.18s cubic-bezier(.34,1.56,.64,1);
  transform: scale(0);
}
.lib-tile:hover .lib-tile-corner {
  transform: scale(1);
  animation: tileCornerBlink 0.5s steps(2) infinite;
}
@keyframes tileCornerBlink {
  0%, 100% { color: var(--magenta); }
  50%      { color: var(--cyan); }
}

/* "press here" indicator — pulsing dot bottom-right of tile.
   Uses .lib-tile-img-wrap::after to avoid colliding with the conic halo on .lib-tile::after */
.lib-tile-img-wrap::after {
  content: '';
  position: absolute;
  bottom: 4px; right: 4px;
  width: 6px; height: 6px;
  background: var(--magenta);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.2s, transform 0.3s cubic-bezier(.34,1.56,.64,1);
  z-index: 3;
  box-shadow: 0 0 0 0 rgba(192,168,212,0.6);
  pointer-events: none;
}
.lib-tile:hover .lib-tile-img-wrap::after {
  opacity: 1;
  transform: scale(1);
  animation: tileDotPulse 1.2s ease-in-out infinite 0.2s;
}
@keyframes tileDotPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(192,168,212,0.6); }
  50%      { box-shadow: 0 0 0 6px rgba(192,168,212,0); }
}

/* ---------------------------------------------------------------------------
   4. DAILY CELLS — countdown-warm glow + numeric stamp
   --------------------------------------------------------------------------- */
.daily-cell {
  position: relative;
  transition: transform 0.25s cubic-bezier(.34,1.56,.64,1), box-shadow 0.25s;
}
.daily-cell:hover {
  transform: translateY(-3px) rotate(-0.5deg);
  box-shadow: 6px 6px 0 var(--magenta), 12px 12px 0 var(--cyan);
}
.daily-cell::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(255,210,100,0.25), transparent 60%);
  opacity: 0;
  transition: opacity 0.35s;
  pointer-events: none;
  z-index: 0;
}
.daily-cell:hover::before { opacity: 1; }

/* daily-grid: stamp every cell with subtle vignette */
.daily-grid img {
  transition: transform 0.35s cubic-bezier(.34,1.56,.64,1), filter 0.25s;
}
.daily-cell:hover img {
  transform: scale(1.1);
  filter: brightness(1.2) saturate(1.15);
}

.daily-countdown b {
  display: inline-block;
  animation: countdownTick 1s steps(2) infinite;
}
@keyframes countdownTick {
  0%, 100% { color: var(--ink); }
  50%      { color: var(--magenta); }
}

/* ---------------------------------------------------------------------------
   5. PACK CARDS — tilt + edition number flip + ribbon shine
   --------------------------------------------------------------------------- */
.pack-card {
  position: relative;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(.34,1.56,.64,1), box-shadow 0.3s;
}
.pack-card:hover {
  transform: translateY(-4px) rotate(-0.8deg);
  box-shadow: 6px 6px 0 var(--ink), 12px 12px 0 var(--magenta);
}
.pack-card::before {
  content: '';
  position: absolute;
  top: -50%; left: -100%;
  width: 80%; height: 200%;
  background: linear-gradient(90deg,
    transparent, rgba(255,255,255,0.4), transparent);
  transform: skewX(-20deg);
  transition: left 0.6s cubic-bezier(.22,1,.36,1);
  pointer-events: none;
  z-index: 4;
}
.pack-card:hover::before {
  left: 200%;
}

/* ---------------------------------------------------------------------------
   6. ACTION CARDS (In Action GIFs) — viewfinder corners on hover + tag pop
   --------------------------------------------------------------------------- */
.action-card {
  position: relative;
  transition: transform 0.3s, box-shadow 0.3s;
}
.action-card::before,
.action-card::after {
  content: '';
  position: absolute;
  width: 18px; height: 18px;
  border: 2px solid var(--magenta);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s, transform 0.35s cubic-bezier(.34,1.56,.64,1);
  z-index: 5;
}
.action-card::before {
  top: 8px; left: 8px;
  border-right: 0; border-bottom: 0;
  transform: translate(6px, 6px);
}
.action-card::after {
  bottom: 8px; right: 8px;
  border-left: 0; border-top: 0;
  transform: translate(-6px, -6px);
}
.action-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
.action-card:hover::before,
.action-card:hover::after {
  opacity: 1;
  transform: translate(0, 0);
}
.action-card-img img {
  transition: transform 0.45s cubic-bezier(.22,1,.36,1), filter 0.3s;
}
.action-card:hover .action-card-img img {
  transform: scale(1.04);
  filter: brightness(1.08) contrast(1.05);
}
.action-card-tag {
  transition: letter-spacing 0.3s, color 0.2s;
}
.action-card:hover .action-card-tag {
  letter-spacing: 2px;
  color: var(--magenta);
}

/* ---------------------------------------------------------------------------
   7. RESOLUTION CARDS — size-grow effect + measurement line animate
   --------------------------------------------------------------------------- */
.res-card {
  position: relative;
  transition: transform 0.3s cubic-bezier(.34,1.56,.64,1);
}
.res-card:hover {
  transform: translateY(-4px) scale(1.02);
}
.res-stage img {
  transition: transform 0.4s cubic-bezier(.34,1.56,.64,1), filter 0.3s;
}
.res-card:hover .res-stage img {
  transform: scale(1.12);
  filter: brightness(1.15) drop-shadow(0 0 12px rgba(192,168,212,0.5));
}
.res-name {
  transition: color 0.2s, letter-spacing 0.3s;
}
.res-card:hover .res-name {
  color: var(--magenta);
  letter-spacing: 2.5px;
}
.res-rule {
  position: relative;
  overflow: hidden;
}
.res-rule::after {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  background: linear-gradient(90deg, var(--magenta), var(--cyan));
  transition: width 0.5s cubic-bezier(.22,1,.36,1);
}
.res-card:hover .res-rule::after { width: 100%; }

/* ---------------------------------------------------------------------------
   8. PRICE CARDS — featured shimmer + tier hover transformation
   --------------------------------------------------------------------------- */
.price-card {
  position: relative;
  transition: transform 0.3s cubic-bezier(.34,1.56,.64,1), box-shadow 0.3s;
  overflow: hidden;
}
.price-card:hover {
  transform: translateY(-6px) rotate(-0.3deg);
  box-shadow: 8px 8px 0 var(--ink), 16px 16px 0 var(--magenta);
}
.price-card.featured {
  animation: priceFeaturedFloat 4s ease-in-out infinite;
}
@keyframes priceFeaturedFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
.price-card.featured::before {
  content: '';
  position: absolute;
  top: -50%; left: -100%;
  width: 60%; height: 200%;
  background: linear-gradient(90deg,
    transparent, rgba(255,210,100,0.3), transparent);
  transform: skewX(-25deg);
  pointer-events: none;
  z-index: 1;
  animation: priceShimmer 4s ease-in-out infinite 1s;
}
@keyframes priceShimmer {
  0%, 100% { left: -100%; }
  50%      { left: 200%; }
}
.price-amount .v {
  display: inline-block;
  transition: transform 0.3s cubic-bezier(.34,1.56,.64,1);
}
.price-card:hover .price-amount .v {
  transform: scale(1.1);
}

/* feature list checks animate in on hover */
.price-feats li {
  position: relative;
  transition: padding-left 0.25s, color 0.2s;
}
.price-card:hover .price-feats li {
  padding-left: 6px;
}
.price-feats li .check {
  display: inline-block;
  transition: transform 0.3s cubic-bezier(.34,1.56,.64,1), color 0.2s;
}
.price-card:hover .price-feats li:hover .check {
  transform: scale(1.4) rotate(90deg);
  color: var(--magenta);
}

/* ---------------------------------------------------------------------------
   9. FAQ ITEMS — typewriter expand + "+" rotates
   --------------------------------------------------------------------------- */
.faq-item {
  transition: background 0.2s;
  position: relative;
}
.faq-item::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  background: linear-gradient(180deg, var(--magenta), var(--cyan));
  transition: width 0.25s;
}
.faq-item:hover::before { width: 3px; }
.faq-item.open::before { width: 4px; animation: faqBarPulse 2s ease-in-out infinite; }
@keyframes faqBarPulse {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}
.faq-q {
  transition: padding-left 0.2s;
}
.faq-item:hover .faq-q { padding-left: 14px; }
.faq-item.open .faq-q { padding-left: 14px; }
.faq-q .icon {
  display: inline-block;
  transition: transform 0.3s cubic-bezier(.34,1.56,.64,1), color 0.2s;
}
.faq-item.open .faq-q .icon {
  transform: rotate(135deg) scale(1.2);
  color: var(--magenta);
}
.faq-item:hover .faq-q .icon {
  transform: rotate(45deg);
  color: var(--magenta);
}

/* ---------------------------------------------------------------------------
   10. ENGINE TAGS — sequential reveal on hover of parent + glow
   --------------------------------------------------------------------------- */
.engine-tag {
  position: relative;
  transition: transform 0.2s cubic-bezier(.34,1.56,.64,1), color 0.2s, background 0.2s, box-shadow 0.2s, letter-spacing 0.3s;
  cursor: default;
}
.engine-tag:hover {
  transform: translateY(-3px) rotate(-2deg);
  color: var(--paper);
  background: var(--ink);
  box-shadow: 3px 3px 0 var(--magenta), 6px 6px 0 var(--cyan);
  letter-spacing: 2.5px;
}

/* ---------------------------------------------------------------------------
   11. STATS — counter "punch" when in viewport + iridescent shimmer
   --------------------------------------------------------------------------- */
.stat-num {
  display: inline-block;
  transition: transform 0.3s cubic-bezier(.34,1.56,.64,1);
}
.stat:hover .stat-num {
  transform: scale(1.15);
  animation: statShake 0.5s steps(4);
}
@keyframes statShake {
  0%, 100% { transform: scale(1.15) rotate(0); }
  25%      { transform: scale(1.18) rotate(-1.5deg); }
  75%      { transform: scale(1.18) rotate(1.5deg); }
}
.stat-num.iri {
  background: linear-gradient(90deg, var(--magenta), var(--cyan), var(--violet), var(--magenta));
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: iriShift 4s linear infinite;
}
@keyframes iriShift {
  0%   { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

/* ---------------------------------------------------------------------------
   12. NAV LINKS — underline draw + sub-frame jiggle on hover
   --------------------------------------------------------------------------- */
.nav-links a {
  position: relative;
  transition: color 0.18s;
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 2px;
  background: linear-gradient(90deg, var(--magenta), var(--cyan));
  transition: width 0.3s cubic-bezier(.22,1,.36,1);
}
.nav-links a:hover {
  color: var(--magenta);
}
.nav-links a:hover::after {
  width: 100%;
}

/* brand wordmark — letter wave on hover */
.brand:hover .x {
  animation: brandXSpin 0.6s cubic-bezier(.34,1.56,.64,1);
}
@keyframes brandXSpin {
  0%   { transform: rotate(0); }
  60%  { transform: rotate(180deg) scale(1.4); color: var(--cyan); }
  100% { transform: rotate(360deg); }
}
.brand .ed {
  transition: letter-spacing 0.3s, color 0.2s;
}
.brand:hover .ed {
  letter-spacing: 2px;
  color: var(--magenta);
}

/* ---------------------------------------------------------------------------
   13. FOOTER LINKS — staggered hover lift
   --------------------------------------------------------------------------- */
.footer-col a {
  display: block;
  position: relative;
  transition: padding-left 0.25s, color 0.2s;
}
.footer-col a::before {
  content: '▸';
  position: absolute;
  left: -14px;
  opacity: 0;
  color: var(--magenta);
  transition: opacity 0.25s, left 0.3s cubic-bezier(.34,1.56,.64,1);
}
.footer-col a:hover {
  padding-left: 12px;
  color: var(--magenta);
}
.footer-col a:hover::before {
  opacity: 1;
  left: -2px;
}

/* ---------------------------------------------------------------------------
   14. SCROLL HINT — bouncier arrow + breathing text
   --------------------------------------------------------------------------- */
.scroll-hint .arrow {
  display: inline-block;
  animation: scrollArrowBounce 1.6s cubic-bezier(.34,1.56,.64,1) infinite;
}
@keyframes scrollArrowBounce {
  0%, 100% { transform: translateY(0);   opacity: 0.6; }
  50%      { transform: translateY(8px); opacity: 1; }
}
.scroll-hint span:first-child {
  animation: scrollHintBreathe 3s ease-in-out infinite;
}
@keyframes scrollHintBreathe {
  0%, 100% { letter-spacing: 1.5px; opacity: 0.6; }
  50%      { letter-spacing: 3px;   opacity: 1; }
}

/* ---------------------------------------------------------------------------
   15. SECTION DOTS — active dot pulse + label slide
   --------------------------------------------------------------------------- */
.section-dots button {
  position: relative;
  transition: transform 0.25s cubic-bezier(.34,1.56,.64,1);
}
.section-dots button:hover { transform: scale(1.5); }
.section-dots button.active {
  animation: secDotActivePulse 2s ease-in-out infinite;
}
@keyframes secDotActivePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(192,168,212,0.6); }
  50%      { box-shadow: 0 0 0 6px rgba(192,168,212,0); }
}

/* ---------------------------------------------------------------------------
   16. MARQUEE — items pulse + accent stars rotate
   --------------------------------------------------------------------------- */
.marquee-item .star {
  display: inline-block;
  animation: marqueeStarSpin 6s linear infinite;
  color: var(--yellow, #f4d35e);
}
@keyframes marqueeStarSpin {
  0%   { transform: rotate(0); }
  100% { transform: rotate(360deg); }
}
.marquee-item .triangle {
  display: inline-block;
  animation: marqueeTriPulse 1.5s ease-in-out infinite;
  color: var(--magenta);
}
@keyframes marqueeTriPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.3); opacity: 0.7; }
}

/* ---------------------------------------------------------------------------
   17. CTA BUTTONS — already styled, but add resting "breath"
   --------------------------------------------------------------------------- */
.btn-primary {
  animation: btnPrimaryBreath 3.5s ease-in-out infinite;
}
@keyframes btnPrimaryBreath {
  0%, 100% { box-shadow: 4px 4px 0 var(--ink); }
  50%      { box-shadow: 6px 6px 0 var(--magenta); }
}

/* ---------------------------------------------------------------------------
   18. LIVE DOT — extra glow halo
   --------------------------------------------------------------------------- */
.hero-stamp .live::before {
  content: '';
  position: absolute;
  inset: -4px;
  border: 1px solid var(--green, #6cc24a);
  border-radius: 50%;
  opacity: 0;
  animation: liveHalo 1.5s ease-out infinite;
}
@keyframes liveHalo {
  0%   { transform: scale(0.5); opacity: 1; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* ---------------------------------------------------------------------------
   19. CALC SLIDER — value indicator + filled track
   --------------------------------------------------------------------------- */
.price-calc input[type="range"] {
  transition: filter 0.2s;
}
.price-calc input[type="range"]:hover {
  filter: brightness(1.1) drop-shadow(0 0 4px var(--magenta));
}
/* Savings cell — clean (full-cell shimmer removed; was distracting). */
.calc-cell.savings { position: relative; }

/* The badge (black pill with the $$$ amount) — tasteful gold sweep that runs
   across just the badge, plus a soft pulsing gold glow on the box-shadow.
   Text inside is rendered with a subtle gold iridescent gradient. */
.calc-cell.savings[data-kind="save"] .calc-val {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  animation: saveBadgeGlow 2.6s ease-in-out infinite;
  /* iridescent gold text directly on the element (works with text nodes) */
  background-image: linear-gradient(90deg, #ffe28a 0%, #fff8d6 50%, #ffe28a 100%);
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  /* keep the black pill */
  background-color: var(--ink);
  background-blend-mode: normal;
  animation:
    saveBadgeGlow 2.6s ease-in-out infinite,
    saveTextFlow 3.6s linear infinite;
}

/* Diagonal gold sweep — only one moment in time, with a long pause */
.calc-cell.savings[data-kind="save"] .calc-val::before {
  content: '';
  position: absolute;
  top: -10%; left: -60%;
  width: 45%; height: 120%;
  background: linear-gradient(105deg,
    transparent 0%,
    rgba(255, 230, 150, 0) 30%,
    rgba(255, 240, 180, 0.85) 50%,
    rgba(255, 230, 150, 0) 70%,
    transparent 100%);
  transform: skewX(-18deg);
  pointer-events: none;
  mix-blend-mode: screen;
  animation: saveBadgeShimmer 4s cubic-bezier(.4,0,.2,1) infinite;
}

/* Soft halo behind the badge — pulses with the glow */
.calc-cell.savings[data-kind="save"] .calc-val::after {
  content: '';
  position: absolute;
  inset: -6px;
  background: radial-gradient(ellipse at center,
    rgba(255, 210, 100, 0.35) 0%,
    rgba(255, 210, 100, 0) 70%);
  pointer-events: none;
  z-index: -1;
  animation: saveHaloBreathe 2.6s ease-in-out infinite;
}

@keyframes saveBadgeShimmer {
  0%   { left: -60%; }
  35%  { left: 160%; }
  100% { left: 160%; }
}
@keyframes saveBadgeGlow {
  0%, 100% {
    box-shadow: 3px 3px 0 var(--magenta),
                0 0 0 0 rgba(255, 210, 100, 0);
  }
  50% {
    box-shadow: 3px 3px 0 var(--magenta),
                0 0 18px 2px rgba(255, 210, 100, 0.6);
  }
}
@keyframes saveTextFlow {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
@keyframes saveHaloBreathe {
  0%, 100% { opacity: 0.4; transform: scale(0.95); }
  50%      { opacity: 1;   transform: scale(1.05); }
}

/* ---------------------------------------------------------------------------
   20. COMPARE TABLE — row highlight + featured column subtle pulse
   --------------------------------------------------------------------------- */
.compare-table tbody tr {
  transition: background 0.25s, transform 0.2s;
}
.compare-table tbody tr {
  transition: transform 0.2s;
}
.compare-table tbody tr:hover {
  transform: translateX(2px);
}
/* keep last-row $20 readable when row is hovered (lila bg vs lila text) */
.compare-table tbody tr:last-child:hover td:nth-child(4) strong {
  color: var(--ink);
  text-shadow: 0 0 0 var(--ink);
}
.compare-table .ok {
  display: inline-block;
  transition: transform 0.25s cubic-bezier(.34,1.56,.64,1), color 0.2s;
}
.compare-table tbody tr:hover .ok {
  transform: scale(1.2);
}

/* ---------------------------------------------------------------------------
   21. SAVED-PILLS / ACTIVE FILTERS — slide-in entry
   --------------------------------------------------------------------------- */
.lib-active-pills > * {
  animation: pillSlideIn 0.32s cubic-bezier(.34,1.56,.64,1);
}
@keyframes pillSlideIn {
  0%   { opacity: 0; transform: translateY(-8px) scale(0.7); }
  60%  { opacity: 1; transform: translateY(2px) scale(1.05); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------------------------------------------------------------------------
   22. SEARCH FIELD — focus glow + icon pulse
   --------------------------------------------------------------------------- */
.lib-search,
.faq-search {
  position: relative;
  transition: box-shadow 0.25s, border-color 0.25s;
}
.lib-search:focus-within,
.faq-search:focus-within {
  box-shadow: 0 0 0 3px rgba(192,168,212,0.4), 4px 4px 0 var(--magenta);
}
.lib-search-icon,
.faq-search-icon {
  transition: transform 0.3s cubic-bezier(.34,1.56,.64,1), color 0.2s;
}
.lib-search:focus-within .lib-search-icon,
.faq-search:focus-within .faq-search-icon {
  transform: scale(1.2) rotate(-15deg);
  color: var(--magenta);
}

/* ---------------------------------------------------------------------------
   23. TRUST ROW — subtle stagger float
   --------------------------------------------------------------------------- */
.trust-row span {
  display: inline-block;
  transition: transform 0.25s cubic-bezier(.34,1.56,.64,1), color 0.2s;
}
.trust-row span:hover {
  transform: translateY(-4px);
  color: var(--magenta);
}
.trust-row b {
  background: linear-gradient(90deg, var(--magenta), var(--cyan));
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: iriShift 5s linear infinite;
}

/* ---------------------------------------------------------------------------
   24. GLOBAL — ambient floating dust particles (CSS-only)
   --------------------------------------------------------------------------- */
.dust-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}
.dust {
  position: absolute;
  width: 2px; height: 2px;
  background: var(--magenta);
  opacity: 0.3;
  border-radius: 50%;
  animation: dustFloat var(--d, 25s) linear infinite;
  animation-delay: var(--delay, 0s);
  left: var(--x, 50%);
  top: 110%;
}
@keyframes dustFloat {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  10%  { opacity: 0.5; }
  90%  { opacity: 0.5; }
  100% { transform: translateY(-110vh) translateX(var(--drift, 30px)); opacity: 0; }
}

/* ---------------------------------------------------------------------------
   25. TILE CLICK BURST — radial particle burst when opening modal
   --------------------------------------------------------------------------- */
.tile-burst {
  position: fixed;
  width: 6px; height: 6px;
  pointer-events: none;
  z-index: 9999;
  border-radius: 50%;
  animation: tileBurst 0.7s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes tileBurst {
  0%   { transform: translate(0, 0) scale(0.5); opacity: 1; }
  100% { transform: translate(var(--bx, 0), var(--by, 0)) scale(0); opacity: 0; }
}

/* ---------------------------------------------------------------------------
   26. GENERIC IMAGE LAZY-LOAD FADE-IN
   --------------------------------------------------------------------------- */
img {
  transition: opacity 0.25s, filter 0.25s;
}
img.is-loading {
  opacity: 0;
  filter: blur(4px);
}

/* ---------------------------------------------------------------------------
   27. PRICE TAG ribbon corner stamp pulse
   --------------------------------------------------------------------------- */
.price-tag {
  animation: priceTagBob 4s ease-in-out infinite;
}
.price-tag.featured {
  animation: priceTagBobFeat 2.5s ease-in-out infinite;
}
@keyframes priceTagBob {
  0%, 100% { transform: rotate(-2deg); }
  50%      { transform: rotate(2deg); }
}
@keyframes priceTagBobFeat {
  0%, 100% { transform: rotate(-3deg) scale(1);   filter: drop-shadow(0 0 0 var(--magenta)); }
  50%      { transform: rotate(3deg)  scale(1.05); filter: drop-shadow(0 0 8px var(--magenta)); }
}

/* ---------------------------------------------------------------------------
   28. SCROLL BAR (top progress) — gradient + pulse on update
   --------------------------------------------------------------------------- */
.scroll-bar-fill {
  background: linear-gradient(90deg, var(--magenta), var(--cyan), var(--violet)) !important;
  background-size: 200% 100% !important;
  animation: scrollBarFlow 2s linear infinite;
}
@keyframes scrollBarFlow {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* ---------------------------------------------------------------------------
   29. MODAL BACKDROP — subtle radial vignette breath
   --------------------------------------------------------------------------- */
.modal-bd {
  background: radial-gradient(ellipse at center,
    rgba(26,23,34,0.7) 0%,
    rgba(26,23,34,0.92) 100%);
}

/* ---------------------------------------------------------------------------
   30. KEYBOARD HINT — subtle press-to-show effect
   --------------------------------------------------------------------------- */
.kbd {
  transition: transform 0.15s, background 0.15s;
}
button:hover .kbd,
.modal-buy:hover .kbd {
  transform: scale(1.1);
  background: var(--magenta);
  color: var(--paper);
}

/* counter final punch — fired when counter reaches its target */
.counter-final-punch {
  animation: counterFinalPunch 0.6s cubic-bezier(.34,1.56,.64,1);
}
@keyframes counterFinalPunch {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.25); filter: drop-shadow(0 0 16px var(--magenta)); }
  60%  { transform: scale(0.95); }
  100% { transform: scale(1); filter: none; }
}

/* ============================================================================
   ============================================================================
   WORKSHOP — Interactive FX compositor
   ============================================================================
   ============================================================================ */

#workshop {
  padding: var(--u-7) var(--u-5);
}

.workshop {
  display: grid;
  grid-template-columns: minmax(360px, 1fr) minmax(380px, 1fr);
  gap: var(--u-5);
  margin-top: var(--u-5);
  align-items: start;
}
@media (max-width: 900px) {
  .workshop { grid-template-columns: 1fr; }
}

/* ----- LEFT: STAGE ----- */
.ws-stage-col {
  display: flex; flex-direction: column;
  gap: var(--u-3);
  position: sticky; top: 80px;
}
.ws-stage-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--t-mono); font-size: 9px;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--ink-2);
}
.ws-tag b { color: var(--magenta); font-weight: 700; }
.ws-stage-fps b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }

.ws-stage {
  position: relative;
  background: #0a0712;
  border: 2px solid var(--ink);
  box-shadow: 6px 6px 0 var(--magenta), 12px 12px 0 var(--cyan);
  aspect-ratio: 1 / 1;
  width: 100%;
  display: grid; place-items: center;
  overflow: hidden;
  isolation: isolate;
}
.ws-stage canvas {
  width: 100%; height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  display: block;
}
.ws-corners { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.ws-corners i {
  position: absolute;
  width: 20px; height: 20px;
  border: 2px solid var(--magenta);
  filter: drop-shadow(0 0 4px var(--magenta));
}
.ws-corners .tl { top: 8px; left: 8px;        border-right: 0; border-bottom: 0; }
.ws-corners .tr { top: 8px; right: 8px;       border-left: 0;  border-bottom: 0; }
.ws-corners .bl { bottom: 8px; left: 8px;     border-right: 0; border-top: 0; }
.ws-corners .br { bottom: 8px; right: 8px;    border-left: 0;  border-top: 0; }

.ws-stage-overlay {
  position: absolute;
  top: 12px; left: 12px;
  font-family: var(--t-mono); font-size: 9px;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: rgba(192,168,212,0.5);
  pointer-events: none;
  z-index: 2;
}
.ws-stage-overlay::before {
  content: '◉ rec  ';
  color: var(--magenta);
  animation: wsRecBlink 1s steps(2) infinite;
}
@keyframes wsRecBlink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.2; }
}

.ws-stage-foot {
  display: grid;
  grid-template-columns: auto 1fr 1fr 1fr;
  gap: 4px;
}
.ws-btn {
  background: var(--paper);
  border: 2px solid var(--ink);
  padding: 10px 12px;
  font-family: var(--t-mono); font-size: 10px;
  letter-spacing: 1.2px; text-transform: uppercase;
  cursor: none;
  transition: transform 0.15s cubic-bezier(.34,1.56,.64,1),
              background 0.15s, color 0.15s, box-shadow 0.15s;
}
.ws-btn:hover {
  transform: translate(-2px, -2px);
  background: var(--ink); color: var(--paper);
  box-shadow: 4px 4px 0 var(--magenta);
}
.ws-btn:active { transform: translate(1px, 1px); }
.ws-btn-cta {
  background: var(--ink); color: var(--paper);
  border-color: var(--magenta);
  box-shadow: 3px 3px 0 var(--magenta);
}
.ws-btn-cta:hover {
  background: var(--magenta); color: var(--paper);
  border-color: var(--ink);
  box-shadow: 4px 4px 0 var(--cyan);
}

.ws-readout {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  background: var(--paper);
  border: 2px solid var(--ink);
}
.ws-rd-cell {
  padding: 8px 6px;
  border-right: 1px solid var(--paper-3);
  text-align: center;
  display: flex; flex-direction: column;
  gap: 2px;
}
.ws-rd-cell:last-child { border-right: 0; }
.ws-rd-cell span {
  font-family: var(--t-mono); font-size: 7px;
  letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--ink-3);
}
.ws-rd-cell b {
  font-family: var(--t-mono); font-size: 12px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  transition: color 0.15s, transform 0.2s cubic-bezier(.34,1.56,.64,1);
}
.ws-rd-cell.bumped b {
  color: var(--magenta);
  transform: scale(1.18);
}

/* ----- RIGHT: CONTROLS ----- */
.ws-ctrl-col {
  display: flex; flex-direction: column;
  gap: var(--u-3);
}

.ws-panel {
  background: var(--paper);
  border: 2px solid var(--ink);
  padding: var(--u-3);
  box-shadow: 3px 3px 0 var(--ink);
}
.ws-panel-h {
  font-family: var(--t-mono); font-size: 9px;
  letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--magenta);
  margin-bottom: 10px;
  font-weight: 700;
}

/* archetype grid — 3x2 buttons */
.ws-arch-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}
.ws-arch {
  background: var(--paper);
  border: 2px solid var(--ink);
  padding: 10px 6px;
  display: flex; flex-direction: column;
  align-items: center; gap: 4px;
  cursor: none;
  transition: transform 0.15s cubic-bezier(.34,1.56,.64,1),
              background 0.15s, color 0.15s, box-shadow 0.15s;
}
.ws-arch .g {
  font-size: 22px;
  line-height: 1;
  font-family: var(--t-mono);
  transition: transform 0.25s cubic-bezier(.34,1.56,.64,1), color 0.2s;
}
.ws-arch .l {
  font-family: var(--t-mono); font-size: 8px;
  letter-spacing: 1.2px; text-transform: uppercase;
}
.ws-arch:hover {
  transform: translate(-1px, -1px);
  background: var(--paper-3);
  box-shadow: 2px 2px 0 var(--magenta);
}
.ws-arch:hover .g { transform: scale(1.2) rotate(-8deg); color: var(--magenta); }
.ws-arch.active {
  background: var(--ink); color: var(--paper);
  box-shadow: 3px 3px 0 var(--magenta);
}
.ws-arch.active .g { color: var(--paper); }

/* palette grid */
.ws-pal-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin-bottom: 10px;
}
.ws-pal {
  position: relative;
  height: 44px;
  border: 2px solid var(--ink);
  cursor: none;
  background: linear-gradient(135deg,
    var(--p1, #fff) 0%, var(--p1, #fff) 25%,
    var(--p2, #ccc) 25%, var(--p2, #ccc) 50%,
    var(--p3, #888) 50%, var(--p3, #888) 75%,
    var(--p4, #000) 75%, var(--p4, #000) 100%);
  transition: transform 0.15s cubic-bezier(.34,1.56,.64,1), box-shadow 0.15s;
  overflow: hidden;
}
.ws-pal span {
  position: absolute;
  bottom: 2px; left: 0; right: 0;
  font-family: var(--t-mono); font-size: 7px;
  letter-spacing: 1.2px; text-transform: uppercase;
  text-align: center;
  color: var(--paper);
  background: rgba(26,23,34,0.85);
  padding: 2px 0;
  pointer-events: none;
}
.ws-pal:hover {
  transform: translate(-1px, -1px) scale(1.04);
  box-shadow: 2px 2px 0 var(--ink);
  z-index: 2;
}
.ws-pal.active {
  box-shadow: 3px 3px 0 var(--magenta), 0 0 0 2px var(--magenta) inset;
  transform: translate(-1px, -1px);
}
.ws-pal.active::after {
  content: '✓';
  position: absolute;
  top: 2px; right: 2px;
  font-family: var(--t-mono); font-size: 11px;
  font-weight: 700;
  color: var(--paper);
  background: var(--magenta);
  width: 18px; height: 18px;
  display: grid; place-items: center;
  border: 1.5px solid var(--ink);
  animation: wsPalCheck 0.4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes wsPalCheck {
  0%   { transform: scale(0) rotate(-90deg); }
  60%  { transform: scale(1.3) rotate(10deg); }
  100% { transform: scale(1) rotate(0); }
}

/* slider rows */
.ws-slider-row {
  display: flex; flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}
.ws-slider-row:last-child { margin-bottom: 0; }
.ws-slider-row label {
  display: flex; justify-content: space-between;
  font-family: var(--t-mono); font-size: 9px;
  letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--ink-2);
}
.ws-slider-row label b {
  color: var(--magenta);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  transition: transform 0.2s cubic-bezier(.34,1.56,.64,1);
}
.ws-slider-row input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  background: var(--paper-3);
  border: 1.5px solid var(--ink);
  outline: none;
  cursor: none;
}
.ws-slider-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px; height: 16px;
  background: var(--magenta);
  border: 2px solid var(--ink);
  cursor: none;
  box-shadow: 2px 2px 0 var(--ink);
  transition: transform 0.15s;
}
.ws-slider-row input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.2);
  background: var(--cyan);
}
.ws-slider-row input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px;
  background: var(--magenta);
  border: 2px solid var(--ink);
  cursor: none;
  box-shadow: 2px 2px 0 var(--ink);
}

/* toggle buttons */
.ws-toggles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}
.ws-toggles-2 {
  grid-template-columns: 1fr 1fr;
  margin-top: 8px;
}
.ws-tog {
  background: var(--paper);
  border: 2px solid var(--ink);
  padding: 8px 4px;
  font-family: var(--t-mono); font-size: 8px;
  letter-spacing: 1.2px; text-transform: uppercase;
  cursor: none;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 4px;
  transition: transform 0.15s cubic-bezier(.34,1.56,.64,1),
              background 0.15s, color 0.15s, box-shadow 0.15s;
}
.ws-tog .g { font-size: 13px; line-height: 1; transition: transform 0.25s cubic-bezier(.34,1.56,.64,1); }
.ws-tog:hover {
  transform: translate(-1px, -1px);
  background: var(--paper-3);
  box-shadow: 2px 2px 0 var(--magenta);
}
.ws-tog:hover .g { transform: scale(1.2) rotate(15deg); }
.ws-tog.active {
  background: var(--ink); color: var(--paper);
  box-shadow: 3px 3px 0 var(--magenta);
}

/* CTA bottom */
.ws-cta {
  background: var(--paper-2);
  border: 2px dashed var(--ink);
  padding: var(--u-4);
  text-align: center;
}
.ws-cta p {
  font-family: var(--t-mono); font-size: 10px;
  line-height: 1.6;
  letter-spacing: 0.5px;
  margin: 0 0 12px;
  color: var(--ink-2);
}
.ws-cta p b { color: var(--magenta); font-weight: 700; }

/* burst flash on stage when triggered */
.ws-stage.is-bursting {
  animation: wsStageBurst 0.4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes wsStageBurst {
  0%   { box-shadow: 6px 6px 0 var(--magenta), 12px 12px 0 var(--cyan); }
  35%  { box-shadow: 0 0 0 6px var(--magenta), 0 0 30px 4px var(--magenta); transform: scale(1.01); }
  100% { box-shadow: 6px 6px 0 var(--magenta), 12px 12px 0 var(--cyan); transform: scale(1); }
}

/* readout cell pulse on slider change */
@keyframes wsRdBump {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.18); color: var(--magenta); }
  100% { transform: scale(1); }
}

/* panel sub-headline */
.ws-panel-sub {
  font-family: var(--t-mono); font-size: 8px;
  letter-spacing: 0.6px;
  color: var(--ink-3);
  margin: -4px 0 10px;
  line-height: 1.5;
}

/* PRESETS */
.ws-presets {
  display: flex; flex-direction: column;
  gap: 4px;
}
.ws-preset {
  display: grid;
  grid-template-columns: 24px 1fr auto auto auto;
  align-items: center;
  gap: 6px;
  border: 1.5px solid var(--ink);
  background: var(--paper);
  padding: 4px 8px;
  font-family: var(--t-mono); font-size: 9px;
  letter-spacing: 1px; text-transform: uppercase;
  transition: background 0.15s, transform 0.15s;
}
.ws-preset:hover { background: var(--paper-3); }
.ws-preset.is-empty .ws-preset-name { color: var(--ink-3); font-style: italic; }
.ws-preset.is-empty .ws-preset-load,
.ws-preset.is-empty .ws-preset-clear { opacity: 0.3; pointer-events: none; }
.ws-preset.is-loaded {
  background: var(--ink); color: var(--paper);
  box-shadow: 3px 3px 0 var(--magenta);
  transform: translate(-1px, -1px);
}
.ws-preset.is-loaded .ws-preset-n { color: var(--magenta); }
.ws-preset-n {
  font-weight: 700;
  color: var(--magenta);
  font-size: 11px;
}
.ws-preset-name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ws-preset button {
  background: transparent;
  border: 1px solid var(--ink);
  width: 22px; height: 22px;
  display: grid; place-items: center;
  cursor: none;
  font-size: 11px;
  transition: background 0.15s, transform 0.12s;
}
.ws-preset button:hover {
  background: var(--magenta); color: var(--paper);
  transform: translate(-1px,-1px);
}
.ws-preset.is-loaded button { border-color: var(--paper); color: var(--paper); }
.ws-preset.is-loaded button:hover { background: var(--magenta); border-color: var(--magenta); }

/* EXPORT panel */
.ws-panel-export {
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
  border-color: var(--magenta);
  box-shadow: 4px 4px 0 var(--magenta);
}
.ws-panel-export .ws-panel-h { color: var(--ink); }
.ws-export-row {
  display: flex; align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.ws-export-row label {
  font-family: var(--t-mono); font-size: 9px;
  letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--ink-2);
}
.ws-export-seg {
  display: inline-flex;
  border: 1.5px solid var(--ink);
  background: var(--paper);
}
.ws-export-seg button {
  background: transparent;
  border: 0;
  border-right: 1.5px solid var(--ink);
  padding: 5px 10px;
  font-family: var(--t-mono); font-size: 10px;
  letter-spacing: 0.5px;
  cursor: none;
  font-variant-numeric: tabular-nums;
  transition: background 0.15s, color 0.15s;
}
.ws-export-seg button:last-child { border-right: 0; }
.ws-export-seg button.active {
  background: var(--ink); color: var(--paper);
}
.ws-export-seg button:hover:not(.active) { background: var(--paper-3); }

.ws-export-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin-top: 12px;
}
.ws-export-btn {
  background: var(--ink); color: var(--paper);
  border: 2px solid var(--ink);
  padding: 10px 8px;
  display: flex; flex-direction: column;
  align-items: center; gap: 6px;
  cursor: none;
  transition: transform 0.18s cubic-bezier(.34,1.56,.64,1),
              background 0.15s, box-shadow 0.18s;
  text-align: center;
  font-family: var(--t-mono); font-size: 10px;
  letter-spacing: 1.2px;
  line-height: 1.3;
  font-weight: 700;
}
.ws-export-btn .g {
  font-size: 18px;
  line-height: 1;
  color: var(--magenta);
  transition: transform 0.25s cubic-bezier(.34,1.56,.64,1);
}
.ws-export-sub {
  font-size: 7px;
  letter-spacing: 0.5px;
  color: var(--paper-2);
  font-weight: 400;
  text-transform: lowercase;
}
.ws-export-btn:hover {
  transform: translate(-2px, -2px);
  background: var(--magenta);
  box-shadow: 4px 4px 0 var(--cyan);
}
.ws-export-btn:hover .g { transform: scale(1.3) rotate(-8deg); color: var(--paper); }
.ws-export-btn:active { transform: translate(1px, 1px); }
.ws-export-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.ws-export-status {
  margin-top: 12px;
  padding: 8px;
  border: 1.5px solid var(--ink);
  background: var(--paper-3);
  font-family: var(--t-mono); font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  display: flex; flex-direction: column; gap: 6px;
}
.ws-export-bar {
  height: 6px;
  background: var(--paper);
  border: 1px solid var(--ink);
  overflow: hidden;
}
.ws-export-bar-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--magenta), var(--cyan));
  background-size: 200% 100%;
  animation: wsExpBarFlow 1.5s linear infinite;
  transition: width 0.2s;
}
@keyframes wsExpBarFlow {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* Make arch grid stay 3 columns even with 9 buttons */
.ws-arch-grid { grid-template-rows: repeat(3, auto); }

/* Touch-device fallback: many rules use `cursor: none` for the custom-cursor
   experience. Force normal cursors on touch / no-hover devices everywhere. */
@media (hover: none), (pointer: coarse) {
  *, *::before, *::after { cursor: auto !important; }
  button, a, input, [role="button"], .chip, .lib-tile, .modal-nav, .ws-btn,
  .ws-arch, .ws-pal, .ws-tog, .ws-export-btn, .ws-export-seg button,
  .modal-tabs button, .modal-bg-toggle button, .modal-zoom button,
  .modal-swatch, .nav-tool, .modal-action-btn, .modal-buy, .modal-close,
  .lib-view-btn, .lib-sort-btn, .modal-related-cell, .daily-cell,
  .pack-card, .hero-plate-cell, .faq-q, .idx-item, .coll-item,
  .price-cta, .reset-btn { cursor: pointer !important; }
}

/* ============================================================================
   LATEST EDITION — the weekly drop section
   ============================================================================ */
#latest {
  padding: var(--u-7) var(--u-5);
}

.latest {
  display: grid;
  grid-template-columns: minmax(380px, 1.1fr) minmax(360px, 1fr);
  gap: var(--u-5);
  margin-top: var(--u-5);
  align-items: stretch;
}
@media (max-width: 900px) {
  .latest { grid-template-columns: 1fr; }
}

/* ----- LEFT: showcase stage ----- */
.latest-stage {
  display: flex; flex-direction: column;
  gap: var(--u-3);
}
.latest-stage-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  letter-spacing: 1.5px;
  color: var(--ink-2);
  text-transform: uppercase;
}
.ls-tag b { color: var(--magenta); font-weight: 700; }
.ls-status {
  background: var(--magenta);
  color: var(--ink);
  padding: 4px 8px;
  border: 1.5px solid var(--ink);
  font-size: 8px;
  letter-spacing: 1.2px;
  animation: lsStatusBlink 1.4s ease-in-out infinite;
}
.ls-status.upcoming { background: var(--cyan); }
@keyframes lsStatusBlink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

.latest-plate {
  position: relative;
  background: var(--ink);
  border: 2.5px solid var(--ink);
  box-shadow: 6px 6px 0 var(--magenta), 12px 12px 0 var(--cyan);
  flex: 1;
  min-height: 420px;
  overflow: hidden;
  isolation: isolate;
}
.latest-plate::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(var(--magenta-rgb),0.20), transparent 70%),
    radial-gradient(ellipse at 70% 80%, rgba(var(--cyan-rgb),0.16), transparent 60%);
  z-index: 1;
}
.lp-corners i {
  position: absolute;
  width: 14px; height: 14px;
  border: 2px solid var(--magenta);
  z-index: 5;
  filter: drop-shadow(0 0 4px rgba(var(--magenta-rgb), 0.6));
  pointer-events: none;
}
.lp-corners i:nth-child(1) { top: 8px; left: 8px;        border-right: 0; border-bottom: 0; }
.lp-corners i:nth-child(2) { top: 8px; right: 8px;       border-left: 0;  border-bottom: 0; }
.lp-corners i:nth-child(3) { bottom: 8px; left: 8px;     border-right: 0; border-top: 0; }
.lp-corners i:nth-child(4) { bottom: 8px; right: 8px;    border-left: 0;  border-top: 0; }
.lp-stamp {
  position: absolute;
  bottom: 14px; right: 14px;
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  letter-spacing: 1.5px;
  color: var(--paper-3);
  z-index: 5;
}

/* 4×3 grid of FX */
.latest-grid {
  position: absolute;
  inset: 24px;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 8px;
}
.latest-grid .lg-cell {
  position: relative;
  background: rgba(192,168,212,0.05);
  border: 1.5px solid rgba(192,168,212,0.18);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.25s cubic-bezier(.34,1.56,.64,1), box-shadow 0.25s;
  cursor: none;
}
@media (hover: none) { .latest-grid .lg-cell { cursor: pointer; } }
.latest-grid .lg-cell:hover {
  transform: scale(1.08);
  box-shadow: 0 0 0 2px var(--magenta), 0 0 16px rgba(var(--magenta-rgb), 0.6);
  z-index: 4;
}
.latest-grid .lg-cell img {
  width: 88%; height: 88%;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 8px rgba(192,168,212,0.6));
  transition: transform 0.3s cubic-bezier(.34,1.56,.64,1);
}
.latest-grid .lg-cell:hover img { transform: scale(1.05); }

/* ----- RIGHT: copy column ----- */
.latest-copy {
  display: flex; flex-direction: column;
  gap: var(--u-3);
  background: var(--paper);
  border: 2.5px solid var(--ink);
  box-shadow: var(--sh-1);
  padding: var(--u-4);
  position: relative;
}

.lc-stamps {
  display: flex; gap: 10px; align-items: center;
}
.lc-stamp-pack {
  background: var(--ink);
  color: var(--paper);
  font-family: 'Press Start 2P', monospace;
  font-size: 18px;
  letter-spacing: 2.5px;
  padding: 9px 12px;
  border: 2.5px solid var(--ink);
  box-shadow: 3px 3px 0 var(--magenta);
}
.lc-stamp-new {
  background: var(--magenta);
  color: var(--ink);
  border: 2.5px solid var(--ink);
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  letter-spacing: 2px;
  padding: 7px 12px;
  box-shadow: 2px 2px 0 var(--ink);
  transform: rotate(-2deg);
  animation: lcNewBob 3s ease-in-out infinite;
}
@keyframes lcNewBob {
  0%, 100% { transform: rotate(-2deg); }
  50%      { transform: rotate(2deg); }
}

.lc-title {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 38px;
  line-height: 1.1;
  color: var(--ink);
  margin-top: 6px;
  text-shadow: 2px 2px 0 rgba(192,168,212,0.4);
}

.lc-desc {
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  line-height: 1.7;
  letter-spacing: 1px;
  color: var(--ink-2);
  text-transform: uppercase;
}

.lc-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  background: var(--paper);
  border: 2px solid var(--ink);
  margin-top: 4px;
}
.lc-stat {
  padding: 10px 6px;
  text-align: center;
  border-right: 1.5px solid var(--paper-3);
}
.lc-stat:last-child { border-right: 0; }
.lc-stat .v {
  font-family: 'VT323', monospace;
  font-size: 32px;
  line-height: 1;
  color: var(--ink);
  text-shadow: -1.5px 0 var(--magenta), 1.5px 0 var(--cyan);
}
.lc-stat .l {
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  letter-spacing: 1.2px;
  color: var(--ink-2);
  text-transform: uppercase;
  margin-top: 4px;
}

.lc-feats {
  display: flex; flex-direction: column;
  gap: 4px;
}
.lc-feat {
  display: flex; align-items: center; gap: 8px;
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--ink-2);
  text-transform: uppercase;
}
.lc-feat .ic {
  width: 16px; height: 16px;
  background: var(--magenta);
  color: var(--ink);
  border: 1.5px solid var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

.lc-cta {
  display: flex; flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
.lc-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  text-decoration: none;
  font-family: 'Press Start 2P', monospace;
  letter-spacing: 2px;
  text-transform: uppercase;
  border: 3px solid var(--ink);
  padding: 14px 16px;
  cursor: none;
  transition: transform 0.18s cubic-bezier(.34,1.56,.64,1),
              background 0.15s, box-shadow 0.18s;
  text-align: center;
}
@media (hover: none) { .lc-btn { cursor: pointer; } }
.lc-btn.primary {
  background: var(--ink);
  color: var(--paper);
  font-size: 14px;
  box-shadow: 5px 5px 0 var(--magenta), 10px 10px 0 var(--cyan);
}
.lc-btn.primary .arrow { color: var(--magenta); font-size: 16px; }
.lc-btn.primary:hover {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 var(--magenta), 14px 14px 0 var(--cyan);
}
.lc-btn.secondary {
  background: var(--paper);
  color: var(--ink);
  font-size: 10px;
  box-shadow: 3px 3px 0 var(--ink);
}
.lc-btn.secondary:hover {
  transform: translate(-1px, -1px);
  background: var(--paper-3);
}

.lc-countdown {
  margin-top: 8px;
  padding: 10px 12px;
  border: 2px dashed var(--ink);
  background: var(--paper-2);
  text-align: center;
  font-family: 'Press Start 2P', monospace;
}
.lc-cd-label {
  font-size: 9px;
  letter-spacing: 1.5px;
  color: var(--ink-2);
  text-transform: uppercase;
}
.lc-cd-value {
  display: block;
  font-family: 'VT323', monospace;
  font-size: 28px;
  letter-spacing: 2px;
  color: var(--ink);
  margin-top: 6px;
  text-shadow: -1.5px 0 var(--magenta), 1.5px 0 var(--cyan);
}
.lc-cd-value.dropped {
  color: var(--magenta);
  animation: lcDroppedPulse 1s ease-in-out infinite;
}
@keyframes lcDroppedPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}

/* ============================================================================
   DAILY DOWNLOAD — single big button below the 5 FX grid
   ============================================================================ */
.daily-download-row {
  margin-top: var(--u-4);
  display: flex; flex-direction: column;
  align-items: center;
  gap: 10px;
}
.daily-download-btn {
  background: var(--ink);
  color: var(--paper);
  border: 3px solid var(--ink);
  padding: 16px 32px;
  font-family: 'Press Start 2P', monospace;
  text-transform: uppercase;
  cursor: none;
  display: inline-flex; align-items: center; gap: 14px;
  box-shadow: 5px 5px 0 var(--magenta), 10px 10px 0 var(--cyan);
  transition: transform 0.18s cubic-bezier(.34,1.56,.64,1),
              background 0.15s,
              box-shadow 0.18s;
}
@media (hover: none) { .daily-download-btn { cursor: pointer; } }
.daily-download-btn:hover {
  transform: translate(-2px, -2px);
  background: var(--magenta);
  color: var(--ink);
  box-shadow: 7px 7px 0 var(--ink), 14px 14px 0 var(--cyan);
}
.daily-download-btn:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--magenta), 4px 4px 0 var(--cyan);
}
.daily-download-btn:disabled {
  opacity: 0.5;
  pointer-events: none;
}
.daily-download-btn .ddl-icon {
  font-size: 22px;
  line-height: 1;
  color: var(--magenta);
  animation: ddlIconBob 1.4s ease-in-out infinite;
}
.daily-download-btn:hover .ddl-icon { color: var(--ink); }
@keyframes ddlIconBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(3px); }
}
.daily-download-btn .ddl-text {
  font-size: 16px;
  letter-spacing: 3px;
  font-weight: 700;
}
.daily-download-btn .ddl-meta {
  font-size: 8px;
  letter-spacing: 1.2px;
  color: var(--paper-3);
  text-transform: uppercase;
  border-left: 1.5px solid var(--paper-3);
  padding-left: 14px;
}
.daily-download-btn:hover .ddl-meta {
  color: var(--ink-2);
  border-left-color: var(--ink-2);
}
@media (max-width: 700px) {
  .daily-download-btn { flex-direction: column; gap: 8px; padding: 14px 20px; }
  .daily-download-btn .ddl-meta { border-left: 0; padding-left: 0; border-top: 1.5px solid var(--paper-3); padding-top: 6px; }
}

/* status / progress */
.daily-download-status {
  width: 100%;
  max-width: 480px;
  display: flex; flex-direction: column;
  gap: 6px;
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  letter-spacing: 1.2px;
  color: var(--ink-2);
  text-transform: uppercase;
  text-align: center;
}
.ddl-bar {
  height: 8px;
  background: var(--paper-3);
  border: 1.5px solid var(--ink);
  overflow: hidden;
}
.ddl-bar-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--magenta), var(--cyan));
  background-size: 200% 100%;
  animation: ddlBarFlow 1.5s linear infinite;
  transition: width 0.25s;
}
@keyframes ddlBarFlow {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* ============================================================
   TOUR — first-visit guided onboarding
   ============================================================ */
.tour {
  position: fixed; inset: 0;
  z-index: 9000;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.tour.is-active {
  opacity: 1;
  pointer-events: auto;
}
.tour.is-fading {
  opacity: 0;
}

/* 4-piece dim mask cuts a hole around the spotlight */
.tour-mask {
  position: fixed;
  background: rgba(20, 18, 28, 0.78);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  transition: all 0.5s cubic-bezier(0.65, 0, 0.35, 1);
  pointer-events: auto;
}
.tm-top    { top: 0; left: 0; right: 0; height: 0; }
.tm-bottom { bottom: 0; left: 0; right: 0; height: 0; }
.tm-left   { top: 0; left: 0; width: 0; bottom: 0; }
.tm-right  { top: 0; right: 0; width: 0; bottom: 0; }

.tour.is-fullscreen .tm-top    { height: 100vh; }
.tour.is-fullscreen .tm-bottom { height: 0; }
.tour.is-fullscreen .tm-left,
.tour.is-fullscreen .tm-right  { width: 0; }

/* Spotlight ring (sits on top of the hole, no fill) */
.tour-spot {
  position: fixed;
  top: 50%; left: 50%;
  width: 0; height: 0;
  pointer-events: none;
  border: 2.5px dashed var(--magenta);
  background: transparent;
  transition: all 0.55s cubic-bezier(0.65, 0, 0.35, 1);
  box-shadow:
    0 0 0 4px rgba(255, 41, 168, 0.18),
    0 0 60px rgba(255, 41, 168, 0.35),
    inset 0 0 30px rgba(255, 41, 168, 0.08);
  border-radius: 6px;
  opacity: 0;
}
.tour.is-active .tour-spot { opacity: 1; }
.tour.is-fullscreen .tour-spot { opacity: 0; }

.ts-c {
  position: absolute;
  width: 18px; height: 18px;
  border: 2.5px solid var(--cyan);
  pointer-events: none;
}
.ts-c.tl { top: -8px;    left: -8px;    border-right: 0; border-bottom: 0; }
.ts-c.tr { top: -8px;    right: -8px;   border-left: 0;  border-bottom: 0; }
.ts-c.bl { bottom: -8px; left: -8px;    border-right: 0; border-top: 0; }
.ts-c.br { bottom: -8px; right: -8px;   border-left: 0;  border-top: 0; }

/* Pulse halo around the spotlight */
.ts-pulse {
  position: absolute; inset: -10px;
  border: 2px solid var(--magenta);
  border-radius: 6px;
  opacity: 0;
  animation: tourSpotPulse 1.6s ease-out infinite;
  pointer-events: none;
}
@keyframes tourSpotPulse {
  0%   { transform: scale(1);     opacity: 0.7; }
  100% { transform: scale(1.18);  opacity: 0;   }
}

/* Pointer arrow */
.tour-arrow {
  position: fixed;
  font-family: var(--t-mono);
  font-size: 28px;
  color: var(--magenta);
  pointer-events: none;
  text-shadow:
    -1.5px -1.5px 0 var(--cyan),
     1.5px  1.5px 0 var(--ink);
  opacity: 0;
  transition: all 0.5s cubic-bezier(0.65, 0, 0.35, 1);
  z-index: 9050;
  animation: tourArrowBob 1.2s ease-in-out infinite alternate;
}
.tour.is-active .tour-arrow { opacity: 1; }
.tour.is-fullscreen .tour-arrow { opacity: 0; }
@keyframes tourArrowBob {
  0%   { transform: translateY(0)    rotate(var(--arrow-rot, 0deg)); }
  100% { transform: translateY(8px)  rotate(var(--arrow-rot, 0deg)); }
}

/* Teaching card */
.tour-card {
  position: fixed;
  width: 380px;
  max-width: calc(100vw - 32px);
  background: var(--paper);
  border: 2.5px solid var(--ink);
  box-shadow:
    6px 6px 0 var(--ink),
    12px 12px 0 var(--magenta);
  padding: 22px 22px 18px;
  z-index: 9100;
  transition: all 0.5s cubic-bezier(0.65, 0, 0.35, 1);
  opacity: 0;
  transform: translateY(20px);
}
.tour.is-active .tour-card {
  opacity: 1;
  transform: translateY(0);
}

/* center-screen variant for intro/outro */
.tour-card.is-center {
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 460px;
}
.tour.is-active .tour-card.is-center {
  transform: translate(-50%, -50%);
}

.tour-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--t-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--ink-2);
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1.5px dashed var(--ink-3);
}
.tc-eye {
  color: var(--magenta);
  font-weight: 700;
}
.tc-step b {
  font-family: var(--t-display, var(--t-mono));
  color: var(--ink);
  font-size: 14px;
}

.tour-card-title {
  font-family: var(--t-display, "Instrument Serif", serif);
  font-size: 28px;
  line-height: 1.05;
  margin: 0 0 10px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.tour-card-title em {
  font-style: italic;
  color: var(--magenta);
}

.tour-card-body {
  font-family: "VT323", monospace;
  font-size: 17px;
  line-height: 1.4;
  color: var(--ink-2);
  margin: 0 0 14px;
}
.tour-card-body kbd {
  background: var(--paper-3);
  border: 1.5px solid var(--ink);
  padding: 1px 6px;
  font-family: var(--t-mono);
  font-size: 11px;
  margin: 0 2px;
  display: inline-block;
}

/* Demo strip — a small animated illustration per step */
.tour-demo {
  background: var(--paper-2);
  border: 1.5px solid var(--ink);
  padding: 10px 12px;
  margin: 0 0 14px;
  font-family: var(--t-mono);
  font-size: 12px;
  color: var(--ink-2);
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
}
.tour-demo .td-icon {
  font-size: 22px;
  line-height: 1;
  color: var(--magenta);
  animation: tourDemoIcon 1.4s ease-in-out infinite alternate;
}
@keyframes tourDemoIcon {
  0%   { transform: translateX(-3px) scale(1); }
  100% { transform: translateX(3px)  scale(1.1); }
}

.tour-progress {
  margin: 0 0 14px;
}
.tp-bar {
  width: 100%;
  height: 6px;
  background: var(--paper-3);
  border: 1.5px solid var(--ink);
  overflow: hidden;
  margin-bottom: 8px;
}
.tp-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--magenta), var(--cyan));
  background-size: 200% 100%;
  animation: ddlBarFlow 2s linear infinite;
  transition: width 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.tp-dots {
  display: flex;
  gap: 6px;
  justify-content: center;
}
.tp-dot {
  width: 8px; height: 8px;
  background: var(--paper-3);
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s;
}
.tp-dot:hover { background: var(--paper-2); }
.tp-dot.is-current {
  background: var(--magenta);
  transform: scale(1.3);
}
.tp-dot.is-done {
  background: var(--ink);
}

.tour-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.tour-foot-r {
  display: flex;
  gap: 8px;
}

.tour-btn {
  font-family: var(--t-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 8px 14px;
  background: var(--paper-3);
  border: 2px solid var(--ink);
  color: var(--ink);
  cursor: pointer;
  transition: all 0.15s;
  font-weight: 700;
  box-shadow: 2px 2px 0 var(--ink);
}
.tour-btn:hover:not(:disabled) {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--ink);
}
.tour-btn:active:not(:disabled) {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 var(--ink);
}
.tour-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  box-shadow: 2px 2px 0 var(--ink-3);
}
.tour-skip {
  background: transparent;
  border-color: var(--ink-3);
  color: var(--ink-2);
  box-shadow: none;
}
.tour-skip:hover {
  background: var(--paper-3);
  color: var(--ink);
}
.tour-action {
  background: var(--cyan);
  color: var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
}
.tour-next-cta {
  background: var(--magenta);
  color: var(--paper);
  box-shadow: 2px 2px 0 var(--ink);
}

/* Tour trigger button in nav */
#tour-trigger {
  background: linear-gradient(135deg, var(--magenta), var(--cyan));
  color: var(--paper);
  font-weight: 700;
  border-color: var(--ink);
}
#tour-trigger:hover {
  filter: brightness(1.08);
}

/* Highlight pulse on a target element when tour focuses it */
.tour-target-pulse {
  position: relative;
  z-index: 8995;
  animation: tourTargetPulse 1.5s ease-in-out infinite;
}
@keyframes tourTargetPulse {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(255, 41, 168, 0)); }
  50%      { filter: drop-shadow(0 0 12px rgba(255, 41, 168, 0.6)); }
}

/* Responsive */
@media (max-width: 720px) {
  .tour-card {
    width: calc(100vw - 24px);
    padding: 16px 16px 14px;
  }
  .tour-card-title { font-size: 22px; }
  .tour-card-body  { font-size: 15px; }
  .tour-card.is-center { width: calc(100vw - 24px); }
}