/* Pixel Stroke landing page — "The Stroke".
 *
 * Vertical scroll experience. A single brushstroke runs the length of
 * the page, morphing between smooth vector / paint / pixel / back as
 * the visitor scrolls. Cards float at z-depths with mouse-parallax.
 * One real interactive demo embedded. Bright saturated palette.
 *
 * NOT a graphic-design magazine. NOT editorial. This is a creativity
 * pipeline container telling its own story by demonstrating itself. */

/* Skip-link — preserved from the deleted mock-shared.css for the
 * accessibility landmark the marketing-page tests assert on. */
.skip-link {
  position: absolute;
  top: -100px; left: 16px;
  background: #1d2033;
  color: #f8f6f2;
  padding: 10px 16px;
  border-radius: 6px;
  text-decoration: none;
  z-index: 100;
  font-weight: 600;
}
.skip-link:focus { top: 16px; }

/* Links in running text, the same rule as site-layout.css: the ink on a
 * solid two-pixel indigo bar, both turning brand yellow on hover. Nav,
 * footer and button links set their own colour and drop the bar; the
 * hover is held to the weight of a bare `a` so they keep it. */
a {
  color: var(--text-1);
  text-decoration-line: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-decoration-skip-ink: none;
  text-underline-offset: 4px;
  transition:
    color 160ms cubic-bezier(0.2, 0.9, 0.25, 1),
    text-decoration-color 160ms cubic-bezier(0.2, 0.9, 0.25, 1);
}
a:where(:hover) { color: var(--yellow-ink); text-decoration-color: var(--brand-yellow); }

.stroke {
  /* Full-dark palette — mirrors the pixel-stroke editor + the icon's
   * RGB-cubes-on-navy aesthetic. The icon shows red/green/blue cubes
   * outlined in a deep navy that matches the page background — borders
   * appear stamped out of the page itself. */

  /* Layered surfaces — deepest at 0, raised at 3 */
  --bg-0:       #06070f;   /* deeper than editor (icon outline color) */
  --bg-1:       #0a0a1e;   /* page default (matches icon bg) */
  --bg-2:       #10142a;   /* card surface */
  --bg-3:       #161b35;   /* raised panel */
  --bg-hover:   #1e2442;
  --bg-active:  #242a4a;

  /* Text scale */
  --text-1:     #e8e9f2;
  --text-2:     #a0a4b8;
  --text-3:     #8388a6;   /* 4.5:1 or better on the page, card and panel surfaces */
  --text-4:     #4a4e68;

  /* Brand RGB — pulled from the icon's three cubes */
  --brand-red:    #e02948;
  --brand-green:  #3fc26a;
  --brand-blue:   #3a8fff;
  --brand-yellow: #ffd24c;  /* where the cubes intersect */

  /* Marketing accents (kept from prior palette — pop harder on dark) */
  --red:        #ec2a2a;
  --red-2:      #f54a3a;
  --coral:      #ff5b3e;
  --yellow:     #ffd23c;
  --lime:       #c4f024;
  --blue:       #3060ff;
  --cyan:       #00d4ff;
  --violet:     #7a3bff;

  /* Editor indigo accent */
  --accent:        #6c5ce7;
  --accent-soft:   rgba(108, 92, 231, 0.18);
  --accent-text:   #9488f1;  /* the accent, legible as small text */

  /* Page tokens */
  --page-bg:    var(--bg-1);
  --rule:       rgba(255, 255, 255, 0.08);
  --outline:    var(--bg-0);  /* thick black-navy border (icon signature) */
  --ledge:      var(--outline);           /* the offset "pixel ledge" under cards */
  --shadow-deep: rgba(0, 0, 0, 0.5);
  --shadow-near: rgba(10, 10, 30, 0.3);
  /* Accent colors for TEXT. Same as the accents in dark; darker in light
   * so small text keeps a 4.5:1 contrast on cream. */
  --yellow-ink: var(--yellow);
  --lime-ink:   var(--lime);
  --cyan-ink:   var(--cyan);
  --coral-ink:  var(--coral);
  --green-ink:  var(--brand-green);
  --violet-ink: #a37dff;   /* --violet is too dark for small text on navy */

  /* Legacy aliases — keep existing rules working without renaming. */
  --ink:        var(--text-1);
  --ink-soft:   var(--text-2);
  --ink-faint:  var(--text-3);
  --cream:      var(--text-1);
  --cream-warm: var(--bg-3);

  /* Mouse parallax (set by JS) */
  --mx: 0;
  --my: 0;
}

/* Pixel Stroke · light theme — selected from the hero palette
 * dropdown. The full-dark navy palette inverts to a paper-cream
 * surface; brand colours shift to slightly desaturated values so
 * they read against the lighter background without losing their
 * pixel-stroke character. The swatches in the palette float
 * reference these vars so they update automatically when the
 * theme changes; the landing's stroke, sections, drawer, export
 * panel etc all follow because they pull from the same tokens. */
html[data-theme="pixel-stroke-light"].stroke,
html[data-theme="pixel-stroke-light"] .stroke,
html[data-theme="pixel-stroke-light"] :root {
  --bg-0:       #d9d4c6;
  --bg-1:       #efeae0;
  --bg-2:       #f7f3e9;
  --bg-3:       #ffffff;
  --bg-hover:   #e8e3d8;
  --bg-active:  #d5cebf;

  --text-1:     #161b35;
  --text-2:     #3a4170;
  --text-3:     #6d7290;
  --text-4:     #9aa0b8;

  --brand-red:    #cc1f3a;
  --brand-green:  #2ea65b;
  --brand-blue:   #2667d6;
  --brand-yellow: #cf9a18;

  --red:        #d12340;
  --red-2:      #e04434;
  --coral:      #d65b3e;
  --yellow:     #d49b1f;
  --lime:       #8ba81a;
  --blue:       #2848d0;
  --cyan:       #1aa3c4;
  --violet:     #6533c0;

  --accent:        #5142c2;
  --accent-soft:   rgba(81, 66, 194, 0.16);
  --accent-text:   #5142c2;

  --rule:       rgba(20, 24, 50, 0.10);
  --outline:    #1c2040;

  /* Soft, warm shadows: the dark theme's black ledges and 50% drop
   * shadows read as smudges on paper. */
  --ledge:       #cdc5b3;
  --shadow-deep: rgba(74, 60, 36, 0.16);
  --shadow-near: rgba(74, 60, 36, 0.10);
  --text-3:     #5d6282;
  --text-4:     #767b96;

  --yellow-ink: #855c00;
  --lime-ink:   #4a6600;
  --cyan-ink:   #0a6880;
  --coral-ink:  #ad3a20;
  --green-ink:  #1b7439;
  --violet-ink: var(--violet);
}
/* Page surface follows the theme even when CSS variables alone
 * aren't enough (e.g. the secondary-pages CSS keeps its own base
 * body bg). The .stroke + .site-body roots both pick the page-bg
 * up from --bg-1 which we redefine above, so this is mostly belt
 * and braces for theme-aware embeds. */
html[data-theme="pixel-stroke-light"] body { background: var(--bg-1, #efeae0); }

.stroke body, .stroke {
  background: var(--page-bg);
  color: var(--ink);
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.stroke * { box-sizing: border-box; }
.stroke img, .stroke svg, .stroke canvas { max-width: 100%; display: block; }

/* The stroke canvas runs full-viewport-height, fixed on the right side
 * of the page. JS draws into it. Pointer events pass through to the
 * content underneath. */
#stroke-canvas {
  position: fixed;
  top: 0;
  right: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 1;
}

/* Fluid sizing tokens. Scale gracefully from 1280px (small laptop)
 * through 3k/4k/8k (large monitors + smart-TV-class displays). The
 * old `max-width: 1200px` produced a tiny column on >2560px screens;
 * these tokens let sections breathe with the viewport while never
 * collapsing reading width past comfortable line lengths. */
.stroke {
  --content-cap:    clamp(1100px, 88vw, 2640px);
  --content-cap-xl: clamp(1200px, 92vw, 3200px); /* hero + outputs */
  --gutter-x:       clamp(24px, 4vw, 120px);
  --gutter-y:       clamp(64px, 7vw, 180px);
  --section-gap:    clamp(32px, 4vw, 120px);
}

/* Sections sit above the stroke canvas */
.stroke-section {
  position: relative;
  z-index: 2;
  max-width: var(--content-cap);
  margin: 0 auto;
  padding: var(--gutter-y) var(--gutter-x);
}

/* HERO ----------------------------------------------------------- */

.stroke-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(16px, 1.4vw, 28px) clamp(20px, 3vw, 64px);
  background: color-mix(in srgb, var(--page-bg) 86%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--rule);
}
.stroke-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
}
.stroke-brand-mark {
  width: auto; height: 26px;
  display: block;
}
.stroke-nav {
  display: flex;
  align-items: center;
  gap: 24px;
}
.stroke-nav a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
}
.stroke-nav a:hover { color: var(--ink); }
/* The header's call to action is quiet: the hero carries the red button,
 * and two loud buttons a few hundred pixels apart fight each other. */
.stroke-nav a.stroke-cta {
  background: transparent;
  color: var(--text-1);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1.5px solid color-mix(in srgb, var(--text-1) 30%, transparent);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}
.stroke-nav a.stroke-cta:hover {
  border-color: var(--brand-red);
  background: color-mix(in srgb, var(--brand-red) 12%, transparent);
  color: var(--text-1);
}

.hero {
  position: relative;
  max-width: var(--content-cap-xl);
  margin: 0 auto;
  padding:
    clamp(80px, 8vw, 200px)
    var(--gutter-x)
    clamp(120px, 12vw, 280px);
}
.hero-tag {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 40px;
}
.hero-tag::before {
  content: "";
  width: 32px;
  height: 2px;
  background: var(--red);
}
/* Headlines set in the display face. */
.hero-headline, .section-headline, .close-headline, .drawer-title, .iter-title {
  font-family: var(--font-display);
}
.hero-headline {
  font-size: clamp(48px, 6.4vw, 280px);
  line-height: 1;
  letter-spacing: -0.02em;
  font-weight: 700;
  margin: 0 0 clamp(32px, 3vw, 64px);
  /* Stay inside the left column so the right-side float cluster
   * doesn't crash into the words. Hero floats start around 50% right;
   * cap headline at a bit less than half the hero width. */
  max-width: min(13ch, 52%);
}
.hero-tag,
.hero-lede,
.hero-cta-row { max-width: min(60ch, 52%); }
.hero-tag { max-width: none; }
.hero-headline .word {
  display: inline-block;
  transform: translateZ(0);
}
.hero-headline .accent-red { color: var(--red); }
.hero-headline .accent-blue { color: var(--blue); }
.hero-headline .accent-coral { color: var(--coral); }
.hero-lede {
  font-size: clamp(18px, 1.4vw, 32px);
  color: var(--ink-soft);
  max-width: 56ch;
  margin: 0 0 clamp(32px, 3vw, 64px);
  line-height: 1.5;
}
.hero-cta-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: inherit;
  font-size: clamp(15px, 0.95vw, 22px);
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  padding: clamp(12px, 0.9vw, 22px) clamp(22px, 1.6vw, 40px);
  border-radius: 999px;
  cursor: pointer;
  transition: all 200ms cubic-bezier(0.2, 0.9, 0.25, 1);
  white-space: nowrap;
}
/* Primary: brand red with a deeper red "pixel" ledge and a soft glow,
 * the same in both themes. */
.btn-red {
  background: var(--brand-red);
  color: #fff;
  border: 0;
  box-shadow:
    0 3px 0 0 color-mix(in srgb, var(--brand-red) 55%, #000),
    0 12px 28px -14px color-mix(in srgb, var(--brand-red) 80%, transparent);
}
.btn-red:hover {
  background: color-mix(in srgb, var(--brand-red) 88%, #fff);
  color: #fff;
  transform: translate(0, -1px);
  box-shadow:
    0 4px 0 0 color-mix(in srgb, var(--brand-red) 55%, #000),
    0 16px 32px -14px color-mix(in srgb, var(--brand-red) 85%, transparent);
}
.btn-ghost {
  background: transparent;
  color: var(--text-1);
  border-color: var(--text-1);
}
.btn-ghost:hover {
  background: var(--text-1);
  color: var(--bg-1);
}

/* Hero floating UI cards demonstrating depth.
 *
 * Positioned with percentages within the hero box so they scale with
 * viewport — pre-redesign they used fixed `right: 240px` offsets and
 * collapsed into a tight cluster at 3k/4k while the headline sat
 * lonely on the left. Cards live in the right half of the hero, the
 * headline lives in the left half. Card widths use clamp() so they
 * scale up on big monitors without becoming huge. */
.hero-floats {
  position: absolute;
  inset: 0;
  pointer-events: none;
  perspective: 1200px;
  transform-style: preserve-3d;
}
.float-card {
  position: absolute;
  background: var(--bg-2);
  border: 2px solid var(--outline);
  border-radius: 14px;
  box-shadow:
    0 6px 0 0 var(--ledge),
    0 24px 60px var(--shadow-deep);
  padding: clamp(14px, 1vw, 22px);
  color: var(--text-1);
  transform-style: preserve-3d;
  transition: transform 480ms cubic-bezier(0.2, 0.9, 0.25, 1);
}
/* Layout band assignments — each card lives in its own vertical
 * band so they don't crash into each other at mid-range desktop
 * widths (≈1280-1600). The palette card moved up from the
 * bottom-zone (which overlapped state-machine) into the top-zone
 * between layers and frames. */
.float-card.layers {
  top: 8%; right: 32%;
  width: clamp(200px, 14vw, 320px);
  transform:
    rotateY(calc(var(--mx) * -6deg))
    rotateX(calc(var(--my) * 4deg))
    translateZ(40px);
}
.float-card.palette {
  top: 38%; right: 36%;
  width: clamp(200px, 14vw, 320px);
  transform:
    rotateY(calc(var(--mx) * -8deg))
    rotateX(calc(var(--my) * 6deg))
    translateZ(60px);
}
.float-card.frames {
  top: 24%; right: 4%;
  width: clamp(220px, 17vw, 380px);
  transform:
    rotateY(calc(var(--mx) * -10deg))
    rotateX(calc(var(--my) * 7deg))
    translateZ(80px);
}
.float-card.state-machine {
  top: 62%; right: 24%;
  width: clamp(220px, 16vw, 360px);
  padding: clamp(12px, 0.9vw, 20px) clamp(14px, 1vw, 22px) clamp(10px, 0.8vw, 18px);
  transform:
    rotateY(calc(var(--mx) * -7deg))
    rotateX(calc(var(--my) * 5deg))
    translateZ(54px);
}
.float-card.rhai {
  bottom: 12%; right: 3%;
  width: clamp(260px, 19vw, 420px);
  padding: clamp(12px, 1vw, 22px);
  transform:
    rotateY(calc(var(--mx) * -9deg))
    rotateX(calc(var(--my) * 8deg))
    translateZ(72px);
}

/* Theme-palette dropdown inside the palette float card. Plays nice
 * with the small float chrome — no native select shadow, monospace
 * metadata, accent halo on hover/focus.
 *
 * IMPORTANT: native <select> elements size themselves to fit their
 * WIDEST option's text by default; the "Create your own or use a
 * built-in" hint is long enough to blow the select out of its
 * parent flex item. min-width:0 + max-width:100% + flex-shrink:1
 * let the flex container clamp it, and the white-space/overflow
 * trio truncates the visible selected value with an ellipsis. */
.palette-theme-select {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-2);
  background: var(--bg-1);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 3px 22px 3px 8px;
  cursor: pointer;
  pointer-events: auto;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-3) 50%),
    linear-gradient(135deg, var(--text-3) 50%, transparent 50%);
  background-position:
    calc(100% - 10px) 50%,
    calc(100% - 6px)  50%;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
  transition: border-color 160ms ease, color 160ms ease;
  /* Keep the select inside the card no matter how wide its options. */
  min-width: 0;
  max-width: 100%;
  flex-shrink: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.palette-theme-select:hover,
.palette-theme-select:focus {
  color: var(--text-1);
  border-color: var(--accent);
  outline: none;
}
.palette-theme-select option {
  /* Native popup uses system bg/colour normally; force a dark surface
   * + light text so the popup matches the rest of the float chrome
   * on dark theme. (Browsers can ignore this; that's fine — the
   * popup remains usable either way.) */
  background: var(--bg-1);
  color: var(--text-1);
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
}
.palette-theme-select option:disabled {
  color: var(--text-4);
  font-style: italic;
}
.float-card-title {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  /* Allow children (like the theme <select>) to shrink past their
   * intrinsic min-content width so they never overflow the card. */
  min-width: 0;
}
.float-card-title > span:first-child { flex: 0 0 auto; }
.float-card-title > select { flex: 1 1 auto; }

/* STATE-MACHINE FLOAT */
.state-machine-graph {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  background: var(--bg-0);
  border: 1px solid var(--outline);
}
.sm-nodes g {
  cursor: default;
}
.sm-nodes circle {
  fill: var(--bg-2);
  stroke: var(--outline);
  stroke-width: 1.5;
  transition: fill 220ms ease, stroke 220ms ease;
}
.sm-nodes text {
  fill: var(--text-2);
  font-family: var(--font-mono);
  font-size: 8.5px;
  text-anchor: middle;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: fill 220ms ease;
}
.sm-nodes g.is-active circle {
  /* The accent-soft tint, pre-mixed over the graph's ground: a
   * see-through fill let the edges and the pulse show over the label. */
  fill: color-mix(in srgb, var(--accent) 18%, var(--bg-0));
  stroke: var(--accent);
  filter: drop-shadow(0 0 6px var(--accent));
}
.sm-nodes g.is-active text { fill: var(--text-1); }
.sm-edges path {
  transition: stroke 220ms ease, color 220ms ease;
}
.sm-edges path.is-active {
  stroke: var(--brand-yellow);
  color: var(--brand-yellow);
}
.sm-pulse {
  filter: drop-shadow(0 0 4px var(--brand-yellow));
  transition: cx 720ms cubic-bezier(0.65, 0, 0.35, 1),
              cy 720ms cubic-bezier(0.65, 0, 0.35, 1),
              opacity 220ms ease;
}
.state-machine-meta {
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--text-3);
  display: flex;
  align-items: center;
  gap: 8px;
}
.state-machine-meta::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brand-yellow);
  box-shadow: 0 0 6px var(--brand-yellow);
  animation: act-pulse 1.4s ease-in-out infinite;
}

/* RHAI FLOAT */
.rhai-badge {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.14em;
  color: var(--accent-text);
  background: var(--accent-soft);
  padding: 2px 6px;
  border-radius: 3px;
  white-space: nowrap;
  border: 1px solid rgba(108, 92, 231, 0.4);
  text-transform: uppercase;
}
.rhai-code {
  margin: 0;
  padding: 10px 12px 10px 38px;
  background: var(--bg-0);
  border: 1px solid var(--outline);
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.55;
  color: var(--text-1);
  position: relative;
  overflow: hidden;
  height: 132px;
  white-space: pre;
}
.rhai-gutter {
  position: absolute;
  top: 10px; left: 0;
  width: 28px;
  text-align: right;
  padding-right: 8px;
  color: var(--text-3);
  font-size: 10.5px;
  line-height: 1.55;
  border-right: 1px solid var(--bg-3);
  white-space: pre;
  pointer-events: none;
}
.rhai-code code {
  display: block;
  white-space: pre;
}
.rhai-code .rh-kw  { color: var(--brand-blue); }
.rhai-code .rh-func { color: var(--yellow-ink); }
.rhai-code .rh-str { color: var(--green-ink); }
.rhai-code .rh-num { color: var(--coral-ink); }
.rhai-code .rh-cm  { color: var(--text-3); font-style: italic; }
.rhai-cursor {
  position: absolute;
  display: inline-block;
  color: var(--brand-yellow);
  animation: rhai-blink 0.9s steps(2, start) infinite;
}
@keyframes rhai-blink {
  to { visibility: hidden; }
}
.rhai-meta {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--text-3);
}
.rhai-meta-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent);
}
.layer-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-size: 13px;
}
.layer-row + .layer-row { border-top: 1px solid var(--rule); }
.layer-dot {
  width: 14px; height: 14px;
  border-radius: 3px;
  flex: 0 0 14px;
}
.swatch-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}
.swatch {
  aspect-ratio: 1;
  border-radius: 4px;
}
.frame-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}
.frame-cell {
  aspect-ratio: 1;
  background: var(--bg-3);
  border: 1px solid var(--outline);
  border-radius: 3px;
  position: relative;
  overflow: hidden;
}
/* The cells hold slime key poses drawn by art-showcase.js. */

/* SECTIONS ------------------------------------------------------- */

.section-eyebrow {
  font-family: var(--font-mono);
  font-size: clamp(11px, 0.7vw, 18px);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: clamp(20px, 1.6vw, 40px);
}
.section-eyebrow::before {
  content: "";
  width: clamp(28px, 2vw, 56px); height: 2px;
}
.section-eyebrow.red::before { background: var(--red); }
.section-eyebrow.blue::before { background: var(--blue); }
.section-eyebrow.yellow::before { background: var(--yellow); }
.section-eyebrow.coral::before { background: var(--coral); }
.section-eyebrow.violet::before { background: var(--violet); }

.section-headline {
  font-size: clamp(36px, 3.4vw, 196px);
  line-height: 1.02;
  letter-spacing: -0.015em;
  font-weight: 700;
  margin: 0 0 clamp(20px, 1.6vw, 48px);
  max-width: 18ch;
}
.section-headline em { font-style: normal; }
.section-lede {
  font-size: clamp(17px, 1.05vw, 32px);
  color: var(--ink-soft);
  line-height: 1.5;
  max-width: 64ch;
  margin: 0 0 clamp(32px, 2.6vw, 72px);
}

/* Ideate-together — shared canvas with two cursors */
.section-ideate {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(32px, 4vw, 96px);
  align-items: center;
}
.shared-canvas {
  aspect-ratio: 4 / 3;
  background:
    radial-gradient(ellipse at 20% 25%, rgba(224, 41, 72, 0.16), transparent 60%),
    radial-gradient(ellipse at 80% 70%, rgba(58, 143, 255, 0.16), transparent 60%),
    var(--bg-2);
  border: 2px solid var(--outline);
  border-radius: 18px;
  position: relative;
  overflow: hidden;
  cursor: crosshair;
  box-shadow:
    0 8px 0 0 var(--ledge),
    0 30px 80px var(--shadow-deep);
}
.shared-canvas canvas[data-act-canvas] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}
.shared-stroke {
  position: absolute;
  inset: 0;
}
.shared-stroke svg { width: 100%; height: 100%; }
.peer-cursor {
  position: absolute;
  z-index: 4;
  pointer-events: none;
  left: 0;
  top: 0;
  /* Position is driven by JS via translate(); transition smooths the
   * cursor's hops between waypoints. */
  transform: translate(0, 0);
  transition: transform 80ms cubic-bezier(0.2, 0.9, 0.25, 1);
  opacity: 1;
}
.peer-cursor.is-hidden { opacity: 0; pointer-events: none; }
.peer-cursor::before {
  content: "";
  display: block;
  width: 18px; height: 18px;
  background: var(--bg, var(--red));
  clip-path: polygon(0 0, 0 100%, 30% 78%, 50% 100%, 60% 90%, 40% 60%, 80% 50%);
  filter: drop-shadow(0 1px 0 var(--ledge)) drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}
.peer-cursor::after {
  content: attr(data-name);
  position: absolute;
  left: 22px; top: 22px;
  background: var(--bg, var(--red));
  color: #fff;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid var(--outline);
  font-size: 10px;
  font-weight: 600;
  font-family: var(--font-mono);
  white-space: nowrap;
  letter-spacing: 0.06em;
  box-shadow: 0 2px 0 var(--ledge);
}
.peer-cursor[data-peer-cursor="shon"]  { --bg: var(--brand-red); }
.peer-cursor[data-peer-cursor="river"] { --bg: var(--brand-blue); }
.peer-cursor[data-peer-cursor="lupin"] { --bg: var(--brand-yellow); }
.peer-cursor[data-peer-cursor="lupin"]::after { color: var(--bg-0); }

/* Status row beneath the section lede that narrates what the demo is
 * currently doing — "Shon is sketching", "your turn", etc. */
.act-status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 24px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-2);
}
.act-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-3);
  transition: background-color 240ms ease, box-shadow 240ms ease;
}
.act-status[data-act-state="playing"] .act-status-dot {
  background: var(--brand-yellow);
  box-shadow: 0 0 8px var(--brand-yellow);
  animation: act-pulse 1.4s ease-in-out infinite;
}
.act-status[data-act-state="waiting"] .act-status-dot {
  background: var(--brand-green);
  box-shadow: 0 0 8px var(--brand-green);
}
.act-status[data-act-state="user"] .act-status-dot {
  background: var(--brand-red);
  box-shadow: 0 0 8px var(--brand-red);
}
.act-status[data-act-state="autofill"] .act-status-dot {
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  animation: act-pulse 0.9s ease-in-out infinite;
}
@keyframes act-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.4); }
}

/* Floating prompt on the canvas asking the user to take their turn. */
.act-prompt {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%) translateY(0);
  background: var(--bg-3);
  color: var(--text-1);
  border: 2px solid var(--outline);
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 13px;
  font-family: var(--font-mono);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 4px 0 var(--ledge);
  opacity: 1;
  transition: opacity 240ms ease, transform 320ms cubic-bezier(0.2, 0.9, 0.25, 1);
  pointer-events: none;
  z-index: 3;
}
.act-prompt.is-hidden {
  opacity: 0;
  transform: translateX(-50%) translateY(8px);
}
.act-prompt-arrow {
  color: var(--brand-yellow);
  font-size: 18px;
  line-height: 1;
  animation: act-arrow-bob 1.2s ease-in-out infinite;
}
@keyframes act-arrow-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}

/* Drawer-of-assets — open project document.
 *
 * Reads like a panel in the actual editor: titlebar-style header,
 * an asset grid where each tile mimics a project file. Tiles split
 * into a preview area (top) and a JetBrains-Mono metadata strip
 * (bottom) — the same way the editor lays out a project file. */
.section-drawer {
  padding-top: 0;
}
.drawer {
  /* Pull the editor's surface tokens so the drawer reads as a
   * window into the actual pixel-stroke editor, not a marketing
   * card with arbitrary dark styling. */
  --ec-bg-0: #0a0a1e;
  --ec-bg-1: #10142a;
  --ec-bg-2: #161b35;
  --ec-bg-3: #1e2442;
  --ec-border: #252b4a;
  --ec-border-sub: #1a1f3a;
  --ec-text-1: #e8e9f2;
  --ec-text-2: #a0a4b8;
  --ec-text-3: #8388a6;
  --ec-accent: #6c5ce7;

  background: var(--ec-bg-1);
  border: 1px solid var(--ec-border);
  border-radius: 14px;
  padding: clamp(32px, 4vw, 96px);
  color: var(--ec-text-1);
  position: relative;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 24px 80px var(--shadow-deep),
    0 4px 12px var(--shadow-near);
}
.drawer-tag {
  font-family: var(--font-mono);
  font-size: clamp(10px, 0.65vw, 14px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ec-text-3);
  margin-bottom: clamp(12px, 1vw, 24px);
}
.drawer-title {
  font-size: clamp(28px, 2.2vw, 56px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
  color: var(--ec-text-1);
}
.drawer-meta {
  font-size: clamp(12px, 0.78vw, 18px);
  color: var(--ec-text-3);
  font-family: var(--font-mono);
  margin: 0 0 clamp(28px, 2.4vw, 64px);
}
.asset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(180px, 14vw, 260px), 1fr));
  gap: clamp(12px, 1vw, 24px);
}
.asset-card {
  background: var(--ec-bg-2);
  border: 1px solid var(--ec-border-sub);
  border-radius: 10px;
  display: grid;
  grid-template-rows: 1fr auto;
  overflow: hidden;
  transition: transform 220ms cubic-bezier(0.2, 0.9, 0.25, 1),
              border-color 220ms ease,
              box-shadow 220ms ease;
  cursor: pointer;
}
.asset-card:hover {
  transform: translate(0, -3px);
  border-color: var(--ec-border);
  box-shadow: 0 6px 24px var(--shadow-deep);
}
.asset-card .preview {
  position: relative;
  width: 100%;
  /* aspect-ratio locks the preview to a square — without this, the
   * grid track stretches the preview to fill the card and ellipses
   * the "circles" inside (jump_loop, boot_loop's LED dots). */
  aspect-ratio: 1;
  /* Don't set a base background-color here: each preview-* sets its
   * own (lime tilemap, navy sprite, blue illustration). A base
   * declaration would win on (0,2,0) specificity over the (0,1,0)
   * preview-* rules and wipe out their colours. */
  border-bottom: 1px solid var(--ec-border-sub);
  overflow: hidden;
}
.asset-card .meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px 12px;
}
.asset-card .name {
  font-family: var(--font-mono);
  font-size: clamp(11px, 0.78vw, 14px);
  letter-spacing: 0.04em;
  color: var(--ec-text-1);
  font-weight: 600;
}
.asset-card .kind {
  font-family: var(--font-mono);
  font-size: clamp(9px, 0.6vw, 11px);
  letter-spacing: 0.16em;
  color: var(--ec-text-3);
  text-transform: uppercase;
}
.asset-card.span-2 { grid-column: span 2; }
.asset-card.span-2 .preview { aspect-ratio: 2; }

/* Asset previews — sized in percentages so they read at the new
 * locked aspect-ratio:1 cards (~180-260px) without going invisible.
 * Background-color set separately from background-image: putting a
 * solid colour inside a comma list of layered backgrounds invalidates
 * the whole declaration in spec-strict parsers, dropping the
 * gradients entirely. */
.preview-sprite {
  background-color: var(--ec-bg-0);
  background-image:
    radial-gradient(circle at 38% 42%, var(--yellow) 0 6%, transparent 7%),
    radial-gradient(circle at 62% 42%, var(--yellow) 0 6%, transparent 7%),
    radial-gradient(circle at 50% 70%, var(--coral) 0 9%, transparent 10%),
    radial-gradient(circle at 50% 55%, rgba(255, 91, 62, 0.18), transparent 60%);
  image-rendering: pixelated;
}
.preview-font {
  background: var(--ec-bg-0);
  display: flex; align-items: center; justify-content: center;
}
.preview-font::after {
  content: "Aa";
  font-family: 'Söhne', 'Inter Display', sans-serif;
  font-weight: 800;
  font-size: clamp(48px, 5vw, 96px);
  color: var(--lime);
  letter-spacing: -0.04em;
}
.preview-anim {
  background:
    linear-gradient(120deg, rgba(236,42,42,0.7), rgba(122,59,255,0.7));
  position: relative;
  /* The animated ball uses aspect-ratio:1 below so it stays circular
   * regardless of card aspect — span-2 cards are 2:1 and would
   * stretch a percentage-sized child into an ellipse otherwise. */
}
.preview-anim::before {
  content: "";
  position: absolute;
  width: 32%;
  aspect-ratio: 1;
  background: var(--yellow);
  border-radius: 50%;
  left: 34%;
  top: 34%;
  animation: anim-bounce 1.4s ease-in-out infinite;
  box-shadow: 0 4px 12px var(--shadow-near);
}
@keyframes anim-bounce {
  0%, 100% { transform: translate(-20%, 0); }
  50% { transform: translate(20%, -25%); }
}
.preview-illustration {
  background-color: var(--blue);
  background-image:
    radial-gradient(ellipse at 28% 30%, rgba(255,210,60,0.9), transparent 55%),
    radial-gradient(ellipse at 72% 62%, rgba(236,42,42,0.7), transparent 55%),
    radial-gradient(ellipse at 50% 50%, rgba(122,59,255,0.45), transparent 60%),
    linear-gradient(135deg, var(--blue), var(--violet));
}
.preview-icons {
  background-color: var(--ec-bg-0);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 10%;
  padding: 12%;
}
.preview-icons span {
  background: var(--cyan);
  border-radius: 4px;
}
.preview-icons span:nth-child(2) { background: var(--lime); border-radius: 50%; }
.preview-icons span:nth-child(3) { background: var(--red); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.preview-icons span:nth-child(4) { background: var(--yellow); }
.preview-icons span:nth-child(5) { background: var(--coral); border-radius: 50%; }
.preview-icons span:nth-child(6) { background: var(--violet); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.preview-tilemap {
  background-color: var(--lime);
  background-image:
    linear-gradient(rgba(0,0,0,0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.10) 1px, transparent 1px);
  background-size: 18px 18px;
}
.preview-led {
  background: var(--bg-0);
  display: grid;
  /* 13 columns wide, 8 rows tall — fix each cell to a square so
   * the dots stay circular instead of ellipsing when the card
   * aspect changes. */
  grid-template-columns: repeat(13, 1fr);
  grid-auto-rows: 1fr;
  gap: 2%;
  padding: 8%;
  /* Force the grid box itself to 13:8 so cells inherit a 1:1 track. */
  aspect-ratio: 13 / 8;
  width: 100%;
  max-height: 100%;
  align-self: center;
  justify-self: center;
}
.preview-led i {
  aspect-ratio: 1;
  background: rgba(251,250,246,0.06);
  border-radius: 50%;
}
.preview-led i.on { background: var(--red); box-shadow: 0 0 6px var(--red); }
.preview-led i.on2 { background: var(--cyan); box-shadow: 0 0 6px var(--cyan); }

/* Brush demo — REAL interactive canvas, wrapped in a dark editor-skin.
 *
 * Tokens here mirror pixel-stroke/apps/web/www/design-tokens.css so the
 * widget reads as a window into the actual editor. Keep these in sync
 * if the editor's chrome ever changes.
 */
.section-demo {
  text-align: left;
}

.editor-card {
  /* Editor surface tokens (mirrors design-tokens.css) */
  --ec-bg-0:        #0a0a1e;
  --ec-bg-1:        #10142a;
  --ec-bg-2:        #161b35;
  --ec-bg-3:        #1e2442;
  --ec-bg-hover:    #242a4a;
  --ec-bg-active:   #2e355a;
  --ec-canvas:      #1a1f3a;
  --ec-border-sub:  #1a1f3a;
  --ec-border:      #252b4a;
  --ec-border-str:  #3a4170;
  --ec-text-1:      #e8e9f2;
  --ec-text-2:      #a0a4b8;
  --ec-text-3:      #9499b6;
  --ec-text-4:      #4a4e68;
  --ec-accent:      #6c5ce7;
  --ec-on-accent:   #ffffff;
  --ec-accent-soft: rgba(108, 92, 231, 0.18);
  --ec-danger:      #e74c3c;
  --ec-success:     #2ecc71;
  --ec-check-a:     #20264a;
  --ec-check-b:     #1a1f3a;
  color-scheme: dark;

  background: var(--ec-bg-1);
  border: 1px solid var(--ec-border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 24px 80px var(--shadow-deep),
    0 4px 12px var(--shadow-near);
  font-family: var(--ps-font-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
  color: var(--ec-text-1);
  position: relative;
}

/* TITLE BAR ------------------------------------------------- */
.ec-titlebar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 36px;
  padding: 0 14px;
  background: linear-gradient(180deg, var(--ec-bg-2) 0%, var(--ec-bg-1) 100%);
  border-bottom: 1px solid var(--ec-border-sub);
}
.ec-traffic {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}
.ec-traffic i {
  width: 11px; height: 11px;
  border-radius: 50%;
  display: inline-block;
}
.ec-traffic i:nth-child(1) { background: #ff5f57; }
.ec-traffic i:nth-child(2) { background: #ffbd2e; }
.ec-traffic i:nth-child(3) { background: #28c93f; }
.ec-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: 6px 6px 0 0;
  font-size: 12px;
  color: var(--ec-text-2);
  background: transparent;
  border: 1px solid transparent;
  border-bottom-color: transparent;
  position: relative;
  top: 1px;
}
.ec-tab.is-active {
  background: var(--ec-bg-3);
  color: var(--ec-text-1);
  border-color: var(--ec-border);
  border-bottom-color: var(--ec-bg-3);
}
.ec-tab.is-ghost { color: var(--ec-text-3); }
.ec-tab-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ec-accent);
  box-shadow: 0 0 6px var(--ec-accent);
}
.ec-tab-close {
  font-size: 14px;
  color: var(--ec-text-3);
  line-height: 1;
  margin-left: 2px;
}

/* BODY (3-column: tools / center / right) ------------------- */
.ec-body {
  display: grid;
  grid-template-columns: clamp(64px, 4.6vw, 84px) 1fr clamp(250px, 18vw, 360px);
  min-height: clamp(540px, 42vw, 880px);
}

/* TOOL RAIL ------------------------------------------------- */
.ec-tools {
  background: var(--ec-bg-0);
  border-right: 1px solid var(--ec-border-sub);
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}
.ec-tool {
  width: 32px; height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--ec-text-2);
  cursor: pointer;
  transition: all 120ms cubic-bezier(0.2, 0.9, 0.25, 1);
  padding: 0;
}
.ec-tool svg { width: 16px; height: 16px; }
.ec-tool:hover { background: var(--ec-bg-hover); color: var(--ec-text-1); }
.ec-tool.is-active {
  background: var(--ec-accent-soft);
  color: var(--ec-accent);
  border-color: color-mix(in srgb, var(--ec-accent) 40%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ec-accent) 20%, transparent);
}
.ec-tool-divider {
  width: 60%;
  height: 1px;
  background: var(--ec-border-sub);
  margin: 4px 0;
}

/* CENTER COLUMN -------------------------------------------- */
.ec-center {
  display: flex;
  flex-direction: column;
  background: var(--ec-bg-1);
}

/* Tool options strip --------------------------------------- */
.ec-toolopts {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--ec-border-sub);
  background: var(--ec-bg-2);
  font-size: 12px;
  color: var(--ec-text-2);
  flex-wrap: wrap;
}
.ec-opt-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ec-opt-divider {
  width: 1px;
  height: 18px;
  background: var(--ec-border-sub);
}
.ec-opt-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ec-text-3);
}
.ec-opt-val {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ec-text-1);
  min-width: 38px;
  text-align: right;
}
.ec-chips {
  background: var(--ec-bg-0);
  border: 1px solid var(--ec-border-sub);
  border-radius: 7px;
  padding: 2px;
  gap: 0;
}
.ec-chip {
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  background: transparent;
  color: var(--ec-text-2);
  border: 0;
  padding: 6px 12px;
  border-radius: 5px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 120ms cubic-bezier(0.2, 0.9, 0.25, 1);
}
.ec-chip:hover { color: var(--ec-text-1); }
.ec-chip.is-active {
  background: var(--ec-accent);
  color: var(--ec-on-accent);
  box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset, 0 1px 4px color-mix(in srgb, var(--ec-accent) 45%, transparent);
}
.ec-kbd {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--ec-text-3);
  background: var(--ec-bg-0);
  padding: 1px 5px;
  border-radius: 3px;
  border: 1px solid var(--ec-border-sub);
}
.ec-chip.is-active .ec-kbd {
  color: var(--ec-on-accent);
  background: rgba(0,0,0,0.18);
  border-color: color-mix(in srgb, var(--ec-on-accent) 25%, transparent);
}
.ec-slider input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  width: 110px;
  height: 4px;
  border-radius: 2px;
  background: var(--ec-bg-0);
  outline: none;
  cursor: pointer;
}
.ec-slider input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ec-accent);
  border: 2px solid var(--ec-bg-2);
  box-shadow: 0 0 0 1px var(--ec-accent);
  cursor: grab;
}
.ec-slider input[type=range]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ec-accent);
  border: 2px solid var(--ec-bg-2);
  box-shadow: 0 0 0 1px var(--ec-accent);
  cursor: grab;
}
.ec-opt-clear {
  margin-left: auto;
  font: inherit;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--ec-border);
  color: var(--ec-text-2);
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 120ms ease;
}
.ec-opt-clear:hover {
  color: var(--ec-danger);
  border-color: var(--ec-danger);
}

/* Canvas wrap ---------------------------------------------- */
.demo-canvas-wrap {
  flex: 1 1 auto;
  background:
    /* faint checkerboard at very low contrast */
    conic-gradient(from 90deg at 50% 50%, rgba(255,255,255,0.012) 0% 25%, transparent 0% 50%, rgba(255,255,255,0.012) 0% 75%, transparent 0%) 0 0/16px 16px,
    var(--ec-canvas);
  position: relative;
  overflow: hidden;
  cursor: crosshair;
  border-bottom: 1px solid var(--ec-border-sub);
  min-height: 320px;
}
.demo-canvas-wrap canvas {
  width: 100%; height: 100%;
  display: block;
}
/* Tool-overlay canvas — sits on top of the main canvas and ignores
 * pointer events so the underlying drawing surface still receives
 * the strokes. Used for line/select previews. */
.demo-canvas-wrap canvas[data-tool-overlay] {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.demo-canvas-wrap .placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ec-text-3);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  pointer-events: none;
  transition: opacity 240ms ease;
}
.demo-canvas-wrap.has-strokes .placeholder { opacity: 0; }
.ec-canvas-rulers { position: absolute; inset: 0; pointer-events: none; }
.ec-ruler-h, .ec-ruler-v {
  position: absolute;
  background: linear-gradient(to right, transparent 0, rgba(108, 92, 231, 0.4) 50%, transparent 100%);
  opacity: 0.4;
}
.ec-ruler-h { left: 0; right: 0; top: 50%; height: 1px; }
.ec-ruler-v {
  top: 0; bottom: 0; left: 50%; width: 1px;
  background: linear-gradient(to bottom, transparent 0, rgba(108, 92, 231, 0.4) 50%, transparent 100%);
}

/* Frame strip ---------------------------------------------- */
.ec-framestrip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--ec-bg-2);
  border-top: 1px solid var(--ec-border-sub);
}
.ec-rail-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ec-text-3);
  margin-right: 4px;
}
.ec-frame {
  width: 56px;
  height: 36px;
  background: var(--ec-bg-0);
  border: 1px solid var(--ec-border-sub);
  border-radius: 5px;
  position: relative;
  cursor: pointer;
  transition: all 120ms ease;
  flex: 0 0 auto;
  overflow: hidden;
}
.ec-frame:hover { border-color: var(--ec-border-str); }
.ec-frame.is-active {
  border-color: var(--ec-accent);
  box-shadow: 0 0 0 1px var(--ec-accent);
}
.ec-frame-thumb {
  position: absolute;
  inset: 4px 4px 11px 4px;
  background:
    radial-gradient(circle at var(--fx, 50%) var(--fy, 50%),
      var(--fc, #ec2a2a) 0 22%, transparent 24%);
  border-radius: 2px;
  opacity: 0.85;
}
.ec-frame-thumb.t1 { --fx: 28%; --fy: 60%; --fc: #ec2a2a; }
.ec-frame-thumb.t2 { --fx: 40%; --fy: 40%; --fc: #ff5b3e; }
.ec-frame-thumb.t3 { --fx: 52%; --fy: 30%; --fc: #ffd23c; }
.ec-frame-thumb.t4 { --fx: 64%; --fy: 40%; --fc: #c4f024; }
.ec-frame-thumb.t5 { --fx: 76%; --fy: 60%; --fc: #00d4ff; }
.ec-frame-thumb.t6 { --fx: 80%; --fy: 30%; --fc: #7a3bff; }
.ec-frame-num {
  position: absolute;
  bottom: 1px;
  right: 4px;
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.04em;
  color: var(--ec-text-3);
}
.ec-frame.is-add {
  background: transparent;
  border-style: dashed;
  color: var(--ec-text-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
}
.ec-fps {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--ec-text-3);
}

/* RIGHT PANEL ---------------------------------------------- */
.ec-rightpanel {
  background: var(--ec-bg-2);
  border-left: 1px solid var(--ec-border-sub);
  display: flex;
  flex-direction: column;
}
.ec-panel {
  padding: 12px 14px;
  border-bottom: 1px solid var(--ec-border-sub);
}
.ec-panel:last-child { flex: 1; }
.ec-panel-tabs {
  display: flex;
  gap: 14px;
  margin-bottom: 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.ec-panel-tab {
  color: var(--ec-text-3);
  cursor: pointer;
  position: relative;
  padding-bottom: 6px;
}
.ec-panel-tab.is-active {
  color: var(--ec-text-1);
}
.ec-panel-tab.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--ec-accent);
  border-radius: 1px;
}
.ec-panel-header {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ec-text-2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.ec-panel-action {
  font-size: 13px;
  color: var(--ec-text-3);
  cursor: pointer;
  width: 18px; height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}
.ec-panel-action:hover {
  color: var(--ec-accent);
  background: var(--ec-bg-hover);
}

/* Swatches */
.ec-swatches {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
  margin-bottom: 10px;
}
.ec-swatch {
  aspect-ratio: 1;
  background: var(--c, #fff);
  border: 1px solid var(--ec-border-sub);
  border-radius: 4px;
  cursor: pointer;
  padding: 0;
  position: relative;
  transition: transform 120ms ease;
}
.ec-swatch:hover { transform: scale(1.08); }
.ec-swatch.is-active {
  box-shadow:
    0 0 0 1px var(--ec-bg-2),
    0 0 0 3px var(--ec-accent);
  z-index: 1;
}
.ec-swatch.ec-swatch-dark { border-color: var(--ec-border-str); }

.ec-current {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: var(--ec-bg-0);
  border: 1px solid var(--ec-border-sub);
  border-radius: 5px;
  font-family: var(--font-mono);
  font-size: 11px;
}
.ec-current-chip {
  width: 16px; height: 16px;
  border-radius: 3px;
  border: 1px solid rgba(255,255,255,0.08);
}
.ec-current-name { color: var(--ec-text-1); }
.ec-current-hex { margin-left: auto; color: var(--ec-text-3); letter-spacing: 0.04em; }

/* Layers */
.ec-layer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 5px;
  font-size: 12px;
  color: var(--ec-text-2);
  cursor: pointer;
  transition: background 120ms ease;
}
.ec-layer:hover { background: var(--ec-bg-hover); color: var(--ec-text-1); }
.ec-layer.is-active {
  background: var(--ec-accent-soft);
  color: var(--ec-text-1);
}
.ec-eye {
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 1px solid var(--ec-text-3);
  display: inline-block;
  position: relative;
}
.ec-eye.on {
  border-color: var(--ec-accent);
  background: var(--ec-accent);
  box-shadow: 0 0 0 2px var(--ec-bg-2);
}
.ec-eye.on::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--ec-bg-2);
}
.ec-layer-chip {
  width: 18px; height: 14px;
  border-radius: 2px;
  border: 1px solid rgba(255,255,255,0.06);
}
.ec-layer-name { flex: 1; }
.ec-layer-pct {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ec-text-3);
}

/* STATUS BAR ------------------------------------------------ */
.ec-statusbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 14px;
  background: var(--ec-bg-2);
  border-top: 1px solid var(--ec-border-sub);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--ec-text-3);
}
.ec-status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ec-success);
  box-shadow: 0 0 6px var(--ec-success);
}
.ec-status-text { color: var(--ec-text-2); }
.ec-status-spacer { flex: 1; }
.ec-status-meta { color: var(--ec-text-3); }

.ec-footnote {
  margin-top: 16px;
  font-size: 14px;
  color: var(--ink-soft);
  max-width: 60ch;
  line-height: 1.5;
}

/* Multi-output — same project, many exports */
.section-outputs {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(40px, 5vw, 120px);
  align-items: center;
}

/* Export panel — reads like an actual export dialog. Each row is one
 * format the same project document can ship to, colour-coded by
 * format kind. Mirrors the editor chrome (titlebar dot + monospace
 * meta) so visitors recognise this as part of the same UI. */
.export-panel {
  --ec-bg-0: #0a0a1e;
  --ec-bg-1: #10142a;
  --ec-bg-2: #161b35;
  --ec-bg-3: #1e2442;
  --ec-border: #252b4a;
  --ec-border-sub: #1a1f3a;
  --ec-text-1: #e8e9f2;
  --ec-text-2: #a0a4b8;
  --ec-text-3: #8388a6;

  background: var(--ec-bg-1);
  border: 1px solid var(--ec-border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 24px 80px var(--shadow-deep),
    0 4px 12px var(--shadow-near);
}
.export-panel-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: clamp(12px, 0.9vw, 22px) clamp(16px, 1.2vw, 28px);
  background: linear-gradient(180deg, var(--ec-bg-2) 0%, var(--ec-bg-1) 100%);
  border-bottom: 1px solid var(--ec-border-sub);
  font-family: var(--font-mono);
  font-size: clamp(11px, 0.78vw, 14px);
  letter-spacing: 0.06em;
  color: var(--ec-text-2);
}
.export-panel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand-green);
  box-shadow: 0 0 8px var(--brand-green);
}
.export-panel-title {
  color: var(--ec-text-1);
  font-weight: 600;
}
.export-panel-meta {
  margin-left: auto;
  color: var(--ec-text-3);
  text-transform: uppercase;
  font-size: clamp(9px, 0.6vw, 12px);
  letter-spacing: 0.18em;
}
.export-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.export-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  align-items: center;
  gap: clamp(10px, 0.9vw, 22px);
  padding: clamp(14px, 1vw, 24px) clamp(16px, 1.2vw, 32px);
  border-bottom: 1px solid var(--ec-border-sub);
  transition: background 200ms ease, padding-left 200ms ease;
  cursor: pointer;
}
.export-row:last-child { border-bottom: 0; }
.export-row:hover {
  background: var(--ec-bg-2);
  padding-left: clamp(20px, 1.6vw, 40px);
}
.export-glyph {
  width: clamp(28px, 2.2vw, 44px);
  height: clamp(28px, 2.2vw, 44px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--ec-bg-3);
  border: 1px solid var(--ec-border-sub);
}
.export-glyph svg {
  width: 60%;
  height: 60%;
  display: block;
}
.export-name {
  font-family: var(--font-mono);
  font-size: clamp(13px, 0.95vw, 18px);
  font-weight: 600;
  color: var(--ec-text-1);
  letter-spacing: 0.02em;
}
.export-arrow {
  font-family: var(--font-mono);
  color: var(--ec-text-3);
  font-size: clamp(13px, 0.9vw, 18px);
}
.export-target {
  font-family: var(--font-mono);
  font-size: clamp(11px, 0.78vw, 15px);
  color: var(--ec-text-2);
  letter-spacing: 0.04em;
}
.export-badge {
  font-family: var(--font-mono);
  font-size: clamp(10px, 0.65vw, 12px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 4px;
  background: var(--ec-bg-0);
  border: 1px solid var(--ec-border-sub);
}
.export-row[data-fmt="png"]   .export-glyph { color: var(--yellow-ink); }
.export-row[data-fmt="png"]   .export-badge { color: var(--yellow-ink); border-color: rgba(255, 210, 60, 0.35); }
.export-row[data-fmt="svg"]   .export-glyph { color: var(--cyan-ink); }
.export-row[data-fmt="svg"]   .export-badge { color: var(--cyan-ink); border-color: rgba(0, 212, 255, 0.35); }
.export-row[data-fmt="gif"]   .export-glyph { color: var(--red); }
.export-row[data-fmt="gif"]   .export-badge { color: var(--red); border-color: rgba(236, 42, 42, 0.35); }
.export-row[data-fmt="ttf"]   .export-glyph { color: var(--lime-ink); }
.export-row[data-fmt="ttf"]   .export-badge { color: var(--lime-ink); border-color: rgba(196, 240, 36, 0.35); }
.export-row[data-fmt="atlas"] .export-glyph { color: var(--coral-ink); }
.export-row[data-fmt="atlas"] .export-badge { color: var(--coral-ink); border-color: rgba(255, 91, 62, 0.35); }
.export-row[data-fmt="led"]   .export-glyph { color: var(--violet); }
.export-row[data-fmt="led"]   .export-badge { color: var(--violet-ink); border-color: rgba(122, 59, 255, 0.4); }

/* Animation pipeline — film-strip editor + live preview.
 *
 * Reads like a slice of the editor's animation surface: framestrip on
 * the left, height-control slider, autoplaying preview on the right.
 * Editing any frame's ball height re-plays the loop with the change. */
.section-anim-pipeline {
  position: relative;
}
.anim-pipeline {
  display: grid;
  grid-template-columns: 1.1fr 0.95fr;
  gap: clamp(24px, 2.6vw, 64px);
  align-items: stretch;
}
.anim-editor {
  background: var(--bg-2);
  border: 1px solid var(--rule);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.anim-editor-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: clamp(12px, 0.9vw, 22px) clamp(16px, 1.2vw, 28px);
  background: var(--bg-3);
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: clamp(11px, 0.78vw, 14px);
  letter-spacing: 0.06em;
  color: var(--text-2);
}
.anim-editor-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent);
}
.anim-editor-title { color: var(--text-1); font-weight: 600; }
.anim-editor-meta {
  margin-left: auto;
  font-size: clamp(10px, 0.65vw, 12px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
}
.anim-frames {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(8px, 0.7vw, 16px);
  padding: clamp(20px, 1.6vw, 40px);
}
.anim-frame {
  appearance: none;
  background: var(--bg-1);
  border: 2px solid var(--rule);
  border-radius: 8px;
  padding: 8px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  transition: transform 200ms cubic-bezier(0.2, 0.9, 0.25, 1),
              border-color 200ms ease;
}
.anim-frame:hover { border-color: var(--text-3); transform: translate(0, -2px); }
.anim-frame.is-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(108, 92, 231, 0.35);
}
.anim-frame-canvas {
  aspect-ratio: 1;
  background-color: var(--bg-0);
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 12.5% 12.5%;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}
/* Per-frame ball position injected via inline style (--by) so JS can
 * tweak it from the height slider without re-painting the canvas. */
.anim-frame-canvas::after {
  content: "";
  position: absolute;
  width: 28%;
  aspect-ratio: 1;
  background: var(--brand-yellow);
  border-radius: 50%;
  left: 36%;
  bottom: var(--by, 8%);
  box-shadow: 0 4px 12px rgba(255, 210, 76, 0.35);
}
.anim-frame-num {
  font-family: var(--font-mono);
  font-size: clamp(10px, 0.7vw, 13px);
  letter-spacing: 0.18em;
  color: var(--text-3);
  text-align: center;
}
.anim-frame.is-active .anim-frame-num { color: var(--text-1); }

.anim-controls {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 14px;
  padding: clamp(16px, 1.2vw, 32px);
  border-top: 1px solid var(--rule);
  background: var(--bg-1);
}
.anim-control-label {
  font-family: var(--font-mono);
  font-size: clamp(10px, 0.7vw, 13px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.anim-height {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  grid-column: 1 / -1;
  height: 6px;
  border-radius: 3px;
  background:
    linear-gradient(90deg,
      var(--accent) 0,
      var(--accent) var(--fill, 0%),
      var(--bg-3) var(--fill, 0%),
      var(--bg-3) 100%);
  outline: none;
  cursor: pointer;
}
.anim-height::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--brand-yellow);
  border: 2px solid var(--bg-0);
  box-shadow: 0 0 0 1px var(--accent);
  cursor: grab;
}
.anim-height::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--brand-yellow);
  border: 2px solid var(--bg-0);
  box-shadow: 0 0 0 1px var(--accent);
  cursor: grab;
}
.anim-control-val {
  font-family: var(--font-mono);
  font-size: clamp(12px, 0.85vw, 16px);
  color: var(--text-1);
  font-weight: 600;
  min-width: 48px;
  text-align: right;
}
.anim-hint {
  margin: 0;
  padding: 0 clamp(16px, 1.2vw, 32px) clamp(14px, 1vw, 22px);
  font-family: var(--font-mono);
  font-size: clamp(10px, 0.7vw, 13px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}

.anim-preview {
  background: var(--bg-2);
  border: 1px solid var(--rule);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.anim-preview canvas {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  display: block;
  background-color: var(--bg-0);
  background-image:
    radial-gradient(ellipse at 50% 78%, rgba(108, 92, 231, 0.10), transparent 70%);
  cursor: pointer;
  min-height: 320px;
}
.anim-preview-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: clamp(12px, 0.9vw, 22px) clamp(16px, 1.2vw, 28px);
  border-top: 1px solid var(--rule);
  background: var(--bg-3);
  font-family: var(--font-mono);
  font-size: clamp(11px, 0.78vw, 14px);
  color: var(--text-2);
  letter-spacing: 0.06em;
}
.anim-preview-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand-green);
  box-shadow: 0 0 8px var(--brand-green);
  animation: anim-pulse-dot 1.4s ease-in-out infinite;
}
@keyframes anim-pulse-dot {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.35); }
}
.anim-preview-meta-right {
  margin-left: auto;
  color: var(--text-3);
  text-transform: uppercase;
  font-size: clamp(9px, 0.6vw, 12px);
  letter-spacing: 0.18em;
}

@media (max-width: 900px) {
  .anim-pipeline { grid-template-columns: 1fr; }
}

/* Iterate-forever — animations rail */
.iterations-rail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(280px, 22vw, 460px), 1fr));
  gap: clamp(16px, 1.6vw, 40px);
  margin-top: clamp(24px, 2vw, 56px);
}
.iter-card {
  background: var(--bg-2);
  border-radius: 14px;
  padding: 16px;
  border: 2px solid var(--outline);
  box-shadow: 0 4px 0 0 var(--ledge);
}
.iter-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 8px;
}
.iter-title {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 12px;
}
.iter-preview {
  aspect-ratio: 16 / 9;
  background: var(--bg-3);
  border-radius: 6px;
  border: 1px solid var(--outline);
  position: relative;
  overflow: hidden;
}
.iter-preview .dot {
  position: absolute;
  width: 18%;
  aspect-ratio: 1;
  background: var(--red);
  border-radius: 50%;
  top: 38%; left: 10%;
  animation: iter-bob 1.2s ease-in-out infinite alternate;
}
.iter-card:nth-child(2) .iter-preview .dot {
  background: var(--blue);
  animation-duration: 1.8s;
}
.iter-card:nth-child(3) .iter-preview .dot {
  background: var(--lime);
  animation-duration: 2.4s;
}
@keyframes iter-bob {
  from { left: 8%; transform: scale(0.92); }
  to { left: 76%; transform: scale(1.08); }
}

/* CLOSE ---------------------------------------------------------- */

.section-close {
  text-align: center;
  padding: clamp(120px, 12vw, 280px) var(--gutter-x);
}
.close-headline {
  font-size: clamp(48px, 5.6vw, 224px);
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 0.96;
  margin: 0 0 clamp(24px, 2vw, 56px);
  max-width: 16ch;
  margin-left: auto;
  margin-right: auto;
}
.close-headline em {
  font-style: normal;
  color: var(--red);
}
.close-lede {
  font-size: clamp(17px, 1.1vw, 32px);
  color: var(--ink-soft);
  max-width: 64ch;
  margin: 0 auto clamp(32px, 2.4vw, 64px);
}
.close-cta-row {
  display: flex; justify-content: center; gap: 16px; flex-wrap: wrap;
}

.stroke-footer {
  padding: 48px;
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.stroke-footer a {
  color: var(--ink-faint); text-decoration: none; margin-left: 20px;
  /* A 24px-tall target, so a thumb finds it. */
  display: inline-block; padding: 5px 0;
}
.stroke-footer a:hover { color: var(--ink); }

/* RESPONSIVE ----------------------------------------------------- */

/* Tablet (≤1024). The hero floats move into the flow below the CTAs
 * (see the responsive pass at the end of this file). */
@media (max-width: 1024px) {

  .section-ideate, .section-outputs { grid-template-columns: 1fr; gap: 32px; }
  .asset-grid { grid-template-columns: repeat(2, 1fr); }
  .asset-card.span-2 { grid-column: span 2; }
  .iterations-rail { grid-template-columns: 1fr; }

  /* Editor card: drop the right panel into a tabs-style row below */
  .editor-card .ec-body { grid-template-columns: 64px 1fr; }
  .editor-card .ec-rightpanel {
    grid-column: 1 / -1;
    border-left: 0;
    border-top: 1px solid var(--ec-border-sub);
    flex-direction: row;
  }
  .editor-card .ec-panel { flex: 1; border-bottom: 0; border-right: 1px solid var(--ec-border-sub); }
  .editor-card .ec-panel:last-child { border-right: 0; }
  .ec-swatches { grid-template-columns: repeat(9, 1fr); }
}

/* Narrow tablet / phone-landscape (≤768): hero floats can no longer
 * fit beside the headline. Pull them out of the absolute layout and
 * render as a compact card row beneath the CTA buttons so the brand
 * design language stays visible. min-width: 0 on the cards lets
 * their clamp() min override (180-220px) collapse to the column
 * width without overflowing the viewport. */
@media (max-width: 768px) {
  .hero-headline       { max-width: 16ch; }
  .hero-lede           { max-width: 56ch; }
  .hero-floats {
    position: static;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 40px;
    transform: none !important;
  }
  .float-card,
  .float-card.layers,
  .float-card.palette,
  .float-card.frames,
  .float-card.state-machine,
  .float-card.rhai {
    position: static;
    transform: none !important;
    width: auto;
    min-width: 0;
    margin: 0;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
  }
  .float-card.frames { grid-column: span 2; }
}

@media (max-width: 640px) {
  .stroke-section, .hero { padding-left: 24px; padding-right: 24px; }
  .hero { padding-top: 80px; padding-bottom: 100px; }
  .stroke-header { padding: 16px 20px; }
  .stroke-nav a:not(.stroke-cta) { display: none; }
  .stroke-nav { gap: 12px; }
  .drawer { padding: 32px 24px; border-radius: 16px; }
  .asset-grid { grid-template-columns: 1fr; }
  .asset-card.span-2 { grid-column: span 1; }
  .export-row {
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    row-gap: 4px;
  }
  .export-row .export-arrow,
  .export-row .export-target { grid-column: 2 / -1; }
  .export-row .export-badge { grid-row: 1; grid-column: 3; }
  .export-row .export-arrow { display: none; }
  .stroke-footer { flex-direction: column; gap: 16px; padding: 32px 24px; text-align: center; }
  .stroke-footer a { margin: 0 12px; }

  /* Editor card: stack everything vertically, but KEEP the tool rail
   * — surface it as a horizontal pill bar at the top so visitors can
   * still see + pick tools on phone. Previously the rail was hidden
   * entirely which left only palette swatches visible. */
  .editor-card .ec-body { grid-template-columns: 1fr; grid-auto-rows: auto; min-height: 0; }
  .editor-card .ec-tools {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    border-right: 0;
    border-bottom: 1px solid var(--ec-border-sub);
    padding: 8px 10px;
    gap: 6px;
    align-items: center;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .editor-card .ec-tools::-webkit-scrollbar { display: none; }
  .editor-card .ec-tool { flex: 0 0 auto; width: 38px; height: 38px; }
  .editor-card .ec-tool svg { width: 18px; height: 18px; }
  .editor-card .ec-tool-divider { width: 1px; height: 24px; margin: 0 4px; }
  .editor-card .ec-rightpanel { flex-direction: column; }
  .editor-card .ec-panel { border-right: 0; border-bottom: 1px solid var(--ec-border-sub); }
  .editor-card .ec-toolopts { gap: 8px; padding: 10px 12px; }
  .editor-card .ec-opt-divider { display: none; }
  .editor-card .ec-slider input[type=range] { width: 88px; }
  .editor-card .demo-canvas-wrap { min-height: 360px; }
  .editor-card .ec-framestrip { overflow-x: auto; padding: 8px 12px; gap: 6px; }
  .editor-card .ec-framestrip::-webkit-scrollbar { display: none; }
  .editor-card .ec-framestrip .ec-frame { flex: 0 0 56px; }
  .ec-swatches { grid-template-columns: repeat(6, 1fr); }
}

/* The signature stroke is decorative — drop it only when content uses
 * the full width (otherwise the stroke draws over paragraphs and
 * CTAs). Used to hide at ≤900px; now we keep it down to phones since
 * the user wants the brand mark visible everywhere. */
@media (max-width: 520px) {
  #stroke-canvas { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  #stroke-canvas { display: none; }
  .peer-cursor, .preview-anim::before, .iter-preview .dot {
    animation: none;
  }
  .float-card { transform: none !important; }
}

/* ===========================================================
 * Editor slice — live controls (static/assets/editor-slice.js)
 * =========================================================== */
:where(.editor-card button) { font: inherit; }
.editor-card [hidden] { display: none !important; }

.ec-tabs { display: flex; align-items: flex-end; gap: 2px; min-width: 0; overflow: hidden; }
.ec-tab { padding: 0; gap: 0; }
.ec-tab-open {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 4px 5px 12px;
  background: none; border: 0; color: inherit; cursor: pointer;
  font-size: 12px; white-space: nowrap;
}
.ec-tab:not(.is-active):hover { color: var(--ec-text-1); background: var(--ec-bg-hover); }
.ec-tab-dot.is-clean { background: transparent; box-shadow: none; border: 1px solid var(--ec-text-4); }
.ec-tab-close {
  background: none; border: 0; cursor: pointer;
  padding: 4px 10px 4px 6px; border-radius: 4px;
}
.ec-tab-close:hover { color: var(--ec-danger); }
.ec-tab-new {
  width: 22px; height: 22px; margin-left: 2px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid transparent; border-radius: 5px;
  color: var(--ec-text-3); cursor: pointer; font-size: 14px; line-height: 1;
}
.ec-tab-new:hover { color: var(--ec-text-1); border-color: var(--ec-border); }

.ec-chips.is-muted { opacity: 0.45; }

.demo-canvas-wrap { touch-action: none; }
.demo-canvas-wrap[data-tool="select"] { cursor: cell; }
.demo-canvas-wrap[data-tool="bucket"] { cursor: copy; }
.demo-canvas-wrap[data-tool="anim"] { cursor: pointer; }
.demo-canvas-wrap canvas:not([data-tool-overlay]) { position: absolute; inset: 0; }
.demo-canvas-wrap .ec-canvas-rulers { display: none; }

.ec-play {
  width: 30px; height: 30px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ec-bg-0); border: 1px solid var(--ec-border-sub); border-radius: 6px;
  color: var(--ec-text-2); cursor: pointer;
}
.ec-play svg { width: 12px; height: 12px; }
.ec-play:hover { color: var(--ec-text-1); border-color: var(--ec-border-str); }
.ec-play.is-on { color: var(--ec-on-accent); background: var(--ec-accent); border-color: var(--ec-accent); }

.ec-frames {
  display: flex; gap: 8px; align-items: center;
  overflow-x: auto; min-width: 0; padding: 2px; scrollbar-width: thin;
}
.ec-frame { padding: 0; }
.ec-frame-canvas {
  position: absolute; inset: 3px 3px 11px 3px;
  width: calc(100% - 6px); height: calc(100% - 14px);
  image-rendering: auto; border-radius: 2px;
}
.ec-frame.is-add:disabled, .ec-panel-action:disabled { opacity: 0.35; cursor: not-allowed; }
.ec-framestrip-spacer { flex: 1 1 auto; }
.ec-toggle, .ec-fps {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; margin-left: 0;
  background: transparent; border: 1px solid var(--ec-border-sub); border-radius: 5px;
  color: var(--ec-text-3); padding: 5px 8px; cursor: pointer; flex: 0 0 auto;
}
.ec-toggle:hover, .ec-fps:hover { color: var(--ec-text-1); border-color: var(--ec-border-str); }
.ec-toggle.is-on { color: var(--ec-text-1); border-color: var(--ec-accent); background: var(--ec-accent-soft); }

.ec-panel-tab { background: none; border: 0; padding: 0 0 6px; font-family: inherit; font-size: inherit; letter-spacing: inherit; text-transform: inherit; }
.ec-panel-tab:hover { color: var(--ec-text-1); }

.ec-swatches-dense { grid-template-columns: repeat(8, 1fr); gap: 4px; }
.ec-swatches-dense .ec-swatch { border-radius: 3px; }

.ec-hsl { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.ec-hsl-row { display: grid; grid-template-columns: 14px 1fr 40px; align-items: center; gap: 8px; }
.ec-hsl-key, .ec-hsl-val { font-family: var(--font-mono); font-size: 10px; color: var(--ec-text-3); }
.ec-hsl-val { text-align: right; color: var(--ec-text-1); }
.ec-hsl input[type=range] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 4px; outline: none; cursor: pointer;
  background: var(--track, linear-gradient(90deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00));
  border: 1px solid var(--ec-border-sub);
}
.ec-hsl input[data-hsl="h"] { --track: linear-gradient(90deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); }
.ec-hsl input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 12px; height: 12px; border-radius: 50%;
  background: #fff; border: 2px solid var(--ec-bg-2); box-shadow: 0 0 0 1px var(--ec-border-str);
}
.ec-hsl input[type=range]::-moz-range-thumb {
  width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid var(--ec-bg-2);
}

.ec-layers { display: flex; flex-direction: column; gap: 2px; }
.ec-eye { padding: 0; cursor: pointer; background: transparent; flex: 0 0 auto; }
.ec-eye:hover { border-color: var(--ec-text-1); }
.ec-layer.is-hidden-layer .ec-layer-name, .ec-layer.is-hidden-layer .ec-layer-chip { opacity: 0.4; }
.ec-layer-pct {
  background: none; border: 1px solid transparent; border-radius: 4px; padding: 1px 4px; cursor: pointer;
}
.ec-layer-pct:hover { border-color: var(--ec-border); color: var(--ec-text-1); }

/* ===========================================================
 * Slime-jump animation editor (static/assets/anim-pipeline.js)
 * =========================================================== */
.anim-frames { grid-template-columns: repeat(4, 1fr); }
canvas.anim-frame-canvas {
  display: block; width: 100%; height: auto;
  aspect-ratio: 2 / 3;
  image-rendering: pixelated;
}
.anim-frame-canvas::after { content: none; display: none; }
.anim-frame { position: relative; }
.anim-frame.is-playing::before {
  content: ""; position: absolute; top: 6px; right: 6px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand-yellow, #ffd23c);
  box-shadow: 0 0 6px var(--brand-yellow, #ffd23c);
}
.anim-fps {
  background: none; border: 1px solid var(--rule); border-radius: 5px;
  padding: 3px 8px; cursor: pointer; font: inherit;
}
.anim-fps:hover { color: var(--text-1); border-color: var(--text-3); }
.anim-actions {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 0 clamp(20px, 1.6vw, 40px) clamp(16px, 1.4vw, 28px);
}
.anim-actions .anim-hint { margin: 0 0 0 auto; padding: 0; }
.anim-action {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-2);
  background: var(--bg-1); border: 1px solid var(--rule); border-radius: 6px;
  padding: 7px 12px; cursor: pointer;
}
.anim-action:hover { color: var(--text-1); border-color: var(--text-3); }
.anim-preview canvas { image-rendering: pixelated; }

/* ===========================================================
 * Art slots (static/assets/art-showcase.js)
 * =========================================================== */
.preview-art { background: var(--ec-bg-0); }
[data-art] { position: relative; overflow: hidden; }
canvas.art-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  image-rendering: pixelated;
}
.export-glyph[data-art] { background: var(--ec-bg-0); }

@media (max-width: 640px) {
  .ec-framestrip { flex-wrap: wrap; row-gap: 8px; }
  .ec-frames { flex: 1 1 140px; }
  .ec-framestrip-spacer { display: none; }
}
/* Grid columns must not take their width from the frame strip's
 * scrollable content; the strip scrolls inside the column instead. */
.ec-body > * { min-width: 0; }

/* ===========================================================
 * Shared demo chrome for the scripting + state-machine cards
 * =========================================================== */
.section-eyebrow.lime::before { background: var(--lime); }
.section-script .section-headline em { color: var(--lime-ink); }
.section-fsm .section-headline em { color: var(--violet); }
.section-lede code {
  font-family: var(--font-mono);
  font-size: 0.86em;
  color: var(--text-1);
  background: var(--bg-3);
  border: 1px solid var(--rule);
  border-radius: 5px;
  padding: 1px 6px;
}
.script-card, .fsm-card {
  background: #10142a;
  border: 1px solid #252b4a;
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 24px 80px var(--shadow-deep),
    0 4px 12px var(--shadow-near);
  color: var(--text-1);
}
:where(.script-card, .fsm-card) button { font: inherit; }
.sc-btn, .fsm-btn {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-2);
  background: #0c0f22;
  border: 1px solid #252b4a;
  border-radius: 6px;
  padding: 7px 12px;
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
.sc-btn:hover:not(:disabled), .fsm-btn:hover:not(:disabled) { color: var(--text-1); border-color: #3a4170; }
.sc-btn:disabled, .fsm-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ---------- Scripting (static/assets/script-runner.js) ---------- */
.sc-head {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  background: linear-gradient(180deg, #161b35 0%, #10142a 100%);
  border-bottom: 1px solid #1a1f3a;
}
.sc-tabs { display: flex; gap: 4px; overflow-x: auto; min-width: 0; scrollbar-width: none; }
.sc-tabs::-webkit-scrollbar { display: none; }
.sc-tab {
  flex: 0 0 auto;
  font-family: var(--font-mono); font-size: 12px;
  color: var(--text-3); background: transparent;
  border: 1px solid transparent; border-radius: 6px;
  padding: 6px 10px; cursor: pointer; white-space: nowrap;
}
.sc-tab:hover { color: var(--text-1); }
.sc-tab.is-active { color: var(--text-1); background: #1a1f3a; border-color: #252b4a; }
.sc-tab.is-edited::after { content: " \2022"; color: var(--lime); }
.sc-status {
  margin-left: auto; flex: 0 0 auto;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-3); white-space: nowrap;
}
.sc-body { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.sc-code { display: flex; flex-direction: column; border-right: 1px solid #1a1f3a; min-width: 0; }
.sc-editor {
  position: relative;
  flex: 1 1 auto;
  min-height: 320px;
  background: #0a0d1e;
  --sc-font: 14px;
  --sc-line: 1.7;
}
.sc-highlight, .sc-editor textarea {
  position: absolute; inset: 0;
  margin: 0;
  padding: 18px 18px 18px 54px;
  font-family: var(--font-mono);
  font-size: var(--sc-font);
  line-height: var(--sc-line);
  tab-size: 4;
  white-space: pre;
  border: 0;
  letter-spacing: 0;
}
.sc-highlight { overflow: hidden; color: var(--text-2); pointer-events: none; }
.sc-highlight code { font: inherit; display: block; min-width: max-content; }
.sc-editor textarea {
  width: 100%; height: 100%;
  resize: none; outline: none;
  background: transparent;
  color: transparent;
  caret-color: var(--text-1);
  overflow: auto;
  -webkit-text-fill-color: transparent;
}
.sc-editor textarea::selection { background: rgba(108, 92, 231, 0.4); -webkit-text-fill-color: transparent; }
.sc-highlight .ln { display: block; position: relative; margin: 0 -18px 0 -54px; padding: 0 18px 0 54px; }
.sc-highlight .ln::before {
  content: attr(data-n);
  position: absolute; left: 0; width: 38px;
  text-align: right; color: var(--text-4);
}
.sc-highlight .ln.is-run { background: rgba(196, 240, 36, 0.12); box-shadow: inset 3px 0 0 var(--lime); }
.sc-highlight .ln.is-run::before { color: var(--lime); }
.sc-highlight .ln.is-error { background: rgba(236, 42, 42, 0.16); box-shadow: inset 3px 0 0 var(--red); }
.t-kw  { color: #b39dff; }
.t-ps  { color: var(--lime); }
.t-fn  { color: var(--cyan); }
.t-str { color: #ffb38a; }
.t-num { color: var(--yellow); }
.t-com { color: var(--text-3); font-style: italic; }
/* A hex color string shows its color as a bar under the text. The
 * inset shadow keeps the overlay aligned with the textarea. */
.t-hex { box-shadow: inset 0 -3px 0 var(--sw); border-radius: 1px; }
.sc-actions {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 12px 14px;
  border-top: 1px solid #1a1f3a;
  background: #10142a;
}
.sc-run { color: #0a0a1e; background: var(--lime); border-color: var(--lime); font-weight: 700; }
.sc-run:hover:not(:disabled) { color: #0a0a1e; background: #d6ff4a; border-color: #d6ff4a; }
.script-card.is-running .sc-run { opacity: 0.7; }
.script-card.is-busy .sc-run { background: var(--red); border-color: var(--red); color: #fff; opacity: 1; }
.sc-kbd {
  margin-left: auto;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-3);
}
.sc-out { display: flex; flex-direction: column; min-width: 0; }
.sc-canvas-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #0c0f22;
  border-bottom: 1px solid #1a1f3a;
}
.sc-canvas-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.sc-badge {
  position: absolute; left: 12px; top: 12px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-2);
  background: rgba(10, 10, 30, 0.8); border: 1px solid #252b4a; border-radius: 5px;
  padding: 3px 8px;
}
/* Under the canvas: what the macro runs on, and the d-pad for games. */
.sc-under {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 14px; border-bottom: 1px solid #1a1f3a;
}
.sc-caption {
  margin: 0; flex: 1 1 12em;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em;
  color: var(--text-3);
}
.sc-pad { display: inline-flex; gap: 4px; }
.sc-pad button {
  width: 34px; height: 30px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-1); background: #0c0f22;
  border: 1px solid #3a4170; border-radius: 6px; cursor: pointer;
}
.sc-pad button:hover { border-color: var(--lime); color: var(--lime); }
.sc-pad button:active { background: #1a1f3a; }
.sc-pad svg { width: 11px; height: 11px; }
.sc-play {
  position: absolute; right: 12px; top: 12px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-1);
  background: rgba(10, 10, 30, 0.8); border: 1px solid #3a4170; border-radius: 5px;
  padding: 3px 9px; cursor: pointer;
}
.sc-play:hover { border-color: var(--lime); color: var(--lime); }
.sc-hint {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
  pointer-events: none; white-space: nowrap;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em;
  color: #0a0a1e; background: var(--lime); border-radius: 999px;
  padding: 5px 12px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}
.script-card.is-playable .sc-canvas-wrap { cursor: pointer; }
.sc-canvas-wrap:focus { outline: none; }
.sc-canvas-wrap:focus-visible, .script-card.is-playable .sc-canvas-wrap:focus {
  box-shadow: inset 0 0 0 2px var(--lime);
}
.sc-console {
  list-style: none; margin: 0; padding: 10px 14px;
  flex: 1 1 auto; min-height: 120px; max-height: 190px; overflow: auto;
  font-family: var(--font-mono); font-size: 12px; line-height: 1.6;
  background: #0a0d1e;
}
.sc-log { color: var(--text-2); white-space: pre-wrap; word-break: break-word; }
.sc-log[role="button"] { cursor: pointer; border-radius: 4px; padding: 0 4px; margin: 0 -4px; }
.sc-log[role="button"]:hover, .sc-log[role="button"]:focus-visible { background: #1a1f3a; outline: none; }
.sc-log-step { color: var(--text-1); }
.sc-log-out { color: var(--cyan); }
.sc-log-out::before { content: "print  "; color: var(--text-4); }
.sc-log-err { color: #ff8a8a; }
.sc-log-done { color: var(--lime); }
.sc-log-note { color: var(--text-3); }

/* ---------- State machine (static/assets/state-machine.js) ---------- */
.fsm-body { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.fsm-card:focus { outline: none; }
.fsm-stage { display: flex; flex-direction: column; border-right: 1px solid #1a1f3a; min-width: 0; }
.fsm-canvas-wrap { position: relative; aspect-ratio: 2 / 1; background: #0a0a1e; }
.fsm-canvas-wrap canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  image-rendering: pixelated; cursor: none; touch-action: none;
}
.fsm-card[data-state="idle"] .fsm-canvas-wrap canvas { cursor: crosshair; }
.fsm-card[data-machine="knight"] .fsm-canvas-wrap canvas { cursor: pointer; }
.fsm-canvas-wrap:focus { outline: none; }
.fsm-canvas-wrap:focus-visible { box-shadow: inset 0 0 0 2px var(--violet); }
.fsm-state-pill {
  position: absolute; left: 12px; top: 12px; pointer-events: none;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em;
  color: var(--text-1);
  background: rgba(10, 10, 30, 0.9); border: 1px solid #3a4170; border-radius: 999px;
  padding: 5px 12px;
}
.fsm-state-pill b { color: var(--yellow); font-weight: 700; margin-left: 4px; }
.fsm-state-sub { color: var(--text-2); }
.fsm-toolbar {
  display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap;
  padding: 12px 14px; border-top: 1px solid #1a1f3a; background: #10142a;
}
.fsm-stamps { display: flex; gap: 6px; flex-wrap: wrap; }
.fsm-stamp {
  width: 40px; height: 40px; padding: 3px;
  background: #0c0f22; border: 1px solid #252b4a; border-radius: 8px; cursor: pointer;
}
.fsm-stamp canvas { width: 32px; height: 32px; display: block; image-rendering: pixelated; }
.fsm-stamp:hover { border-color: #3a4170; }
.fsm-stamp.is-active { border-color: var(--violet); box-shadow: 0 0 0 1px var(--violet); background: rgba(122, 59, 255, 0.12); }
.fsm-scrub { display: inline-flex; align-items: center; gap: 6px; }
.fsm-scrub .fsm-btn { padding: 5px 10px; font-size: 14px; letter-spacing: 0; }
.fsm-frame {
  font-family: var(--font-mono); font-size: 11px; color: var(--text-1);
  min-width: 9ch; text-align: center;
}
.fsm-edit { display: inline-flex; gap: 6px; margin-left: auto; }
.fsm-hint {
  margin: 0; padding: 0 14px 12px; background: #10142a;
  font-size: 13px; color: var(--text-2);
}
.fsm-hint kbd {
  font: inherit; color: var(--text-2);
  border: 1px solid #252b4a; border-radius: 3px; padding: 0 4px;
}
.fsm-side { display: flex; flex-direction: column; min-width: 0; background: #0c0f22; }
.fsm-graph { width: 100%; height: auto; display: block; padding: 18px 14px 6px; }
.fsm-edges path {
  stroke: rgba(232, 233, 242, 0.26);
  stroke-width: 1.4;
  marker-end: url(#fsm-arrow);
  transition: stroke 200ms ease;
}
.fsm-edges path.is-firing {
  stroke: var(--yellow);
  stroke-width: 2.4;
  marker-end: url(#fsm-arrow-hot);
  stroke-dasharray: 6 5;
  animation: fsm-flow 0.6s linear infinite;
}
@keyframes fsm-flow { to { stroke-dashoffset: -22; } }
.fsm-labels text {
  font-family: var(--font-mono); font-size: 10px;
  fill: var(--text-2);
}
.fsm-nodes rect { fill: #1e2442; stroke: rgba(232, 233, 242, 0.32); stroke-width: 1.2; transition: fill 200ms ease, stroke 200ms ease; }
.fsm-nodes text {
  font-family: var(--font-mono); font-size: 13px; font-weight: 700;
  fill: #e8e9f2; text-anchor: middle;
}
.fsm-nodes .is-active rect { fill: #4a2a9e; stroke: #a98bff; stroke-width: 2; }
.fsm-nodes .is-active text { fill: #ffffff; }
.fsm-log {
  list-style: none; margin: 0; padding: 10px 14px 14px;
  border-top: 1px solid #1a1f3a;
  font-family: var(--font-mono); font-size: 11px; line-height: 1.5;
  min-height: 150px;
}
.fsm-log:empty::before { content: "Point at the canvas to start."; color: var(--text-3); }
.fsm-log li {
  display: grid; grid-template-columns: 6ch auto 1fr; gap: 0 10px;
  padding: 3px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  color: var(--text-2);
}
.fsm-log li:first-child { color: var(--text-1); }
.fsm-t { color: var(--text-3); }
.fsm-ev { color: var(--cyan); }
.fsm-tr { color: inherit; }
.fsm-d { grid-column: 2 / -1; color: var(--text-3); }

/* Hero float links into the live demos. */
.float-link {
  pointer-events: auto;
  margin-left: auto;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; text-decoration: none;
  color: var(--yellow);
}
.float-link:hover { text-decoration: underline; }
.state-machine-meta, .rhai-meta { display: flex; align-items: center; gap: 8px; }
.state-machine-meta > span, .rhai-meta > span:not(.rhai-meta-dot) { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.float-link { flex: 0 0 auto; white-space: nowrap; }

/* Collab: keep a peer's name tag inside the canvas near its edges. */
.peer-cursor.is-flip-x::after { left: auto; right: 4px; }
.peer-cursor.is-flip-y::after { top: auto; bottom: 22px; }

/* ===========================================================
 * Responsive pass: tablet (<=1024) and phone (<=640)
 * =========================================================== */
@media (max-width: 1024px) {
  /* Hero floats leave the absolute layout and sit under the CTAs as a
   * grid, all five of them (the scripting and state-machine floats
   * used to be dropped here). */
  .hero-headline { max-width: 16ch; }
  .hero-lede { max-width: 56ch; }
  .hero-floats {
    position: static;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
    align-items: start;
    margin-top: 48px;
    transform: none !important;
  }
  .float-card,
  .float-card.layers,
  .float-card.palette,
  .float-card.frames,
  .float-card.state-machine,
  .float-card.rhai {
    display: block;
    position: static;
    transform: none !important;
    width: auto;
    min-width: 0;
    margin: 0;
    inset: auto;
  }
  .float-card.layers, .float-card.palette, .float-card.frames { grid-column: span 2; }
  .float-card.state-machine, .float-card.rhai { grid-column: span 3; }

  /* Asset cards size to their square preview + meta; the fixed
   * 140px rows cut every preview in half. */
  .asset-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: auto; grid-auto-flow: row dense; }

  .iterations-rail { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

  .sc-head { flex-wrap: wrap; row-gap: 6px; }
  .sc-tabs { flex: 1 1 100%; }
  .sc-status { margin-left: 2px; }
}

@media (max-width: 900px) {
  .sc-body { grid-template-columns: minmax(0, 1fr); }
  .sc-code { border-right: 0; border-bottom: 1px solid #1a1f3a; }
  .sc-editor { min-height: 280px; }
  .sc-canvas-wrap { aspect-ratio: 2 / 1; }
  .fsm-body { grid-template-columns: minmax(0, 1fr); }
  .fsm-stage { border-right: 0; border-bottom: 1px solid #1a1f3a; }
  .fsm-side { display: flex; }
  .anim-frames { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; padding: 16px; }
  .anim-frame { padding: 5px; }
  .anim-preview canvas { min-height: 0; aspect-ratio: 16 / 10; height: auto; }
  .anim-preview-meta { flex-wrap: wrap; row-gap: 4px; }
}

@media (max-width: 640px) {
  .hero-floats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .float-card.layers, .float-card.palette { grid-column: span 1; }
  .float-card.frames, .float-card.state-machine, .float-card.rhai { grid-column: span 2; }
  .float-card.palette .swatch-grid { grid-template-columns: repeat(4, 1fr); }

  .asset-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; grid-auto-flow: row dense; }
  .asset-card.span-2 { grid-column: span 2; }
  .asset-card .meta { padding: 10px 12px; }

  .editor-card .demo-canvas-wrap { min-height: 0; aspect-ratio: 16 / 10.8; flex: 0 0 auto; }

  .anim-frames { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .sc-editor { --sc-font: 13px; min-height: 250px; }
  .sc-highlight, .sc-editor textarea { padding: 14px 14px 14px 44px; }
  .sc-highlight .ln { margin: 0 -14px 0 -44px; padding: 0 14px 0 44px; }
  .sc-highlight .ln::before { width: 30px; }
  .sc-kbd { display: none; }
  .fsm-side { display: flex; }
  .fsm-log { min-height: 0; }
  .fsm-edit { margin-left: 0; }
  .fsm-hint { padding-top: 0; }
}
@media (max-width: 640px) and (pointer: coarse) {
  /* iOS zooms the page when a focused field is under 16px. */
  .sc-editor { --sc-font: 16px; }
}

/* ---------- App panels keep the editor's dark look ---------- */
/* The scripting and state-machine cards are slices of the (dark) editor,
 * so they carry the dark tokens in either theme. Without this the light
 * theme's navy text landed on their navy backgrounds, which is how the
 * selected Rhai tab's title vanished. */
.script-card, .fsm-card {
  --bg-0: #06070f; --bg-1: #0a0a1e; --bg-2: #10142a; --bg-3: #161b35;
  --bg-hover: #1e2442; --bg-active: #242a4a;
  --text-1: #e8e9f2; --text-2: #a9adc2; --text-3: #8a8fac; --text-4: #6d7290;
  --red: #ec2a2a; --coral: #ff5b3e; --yellow: #ffd23c; --lime: #c4f024;
  --blue: #3060ff; --cyan: #00d4ff; --violet: #7a3bff;
  --brand-red: #e02948; --brand-green: #3fc26a; --brand-blue: #3a8fff; --brand-yellow: #ffd24c;
  --accent: #6c5ce7; --accent-soft: rgba(108, 92, 231, 0.18);
  --rule: rgba(255, 255, 255, 0.08); --outline: #06070f;
  --yellow-ink: #ffd23c; --lime-ink: #c4f024; --cyan-ink: #00d4ff; --coral-ink: #ff5b3e; --green-ink: #3fc26a;
  color: var(--text-1);
}

/* ---------- Light theme refinements ---------- */
html[data-theme="pixel-stroke-light"] .stroke-footer {
  background: var(--bg-2);
  color: var(--text-2);
  border-top-color: rgba(28, 32, 64, 0.10);
}
html[data-theme="pixel-stroke-light"] .stroke-footer a { color: var(--text-2); }
html[data-theme="pixel-stroke-light"] .stroke-footer a:hover { color: var(--text-1); }
/* The hero's code panels sat on the darkest cream with yellow text. */
html[data-theme="pixel-stroke-light"] .rhai-code {
  background: #faf7f0;
  border-color: rgba(28, 32, 64, 0.14);
}
html[data-theme="pixel-stroke-light"] .rhai-cursor { color: var(--yellow-ink); }
html[data-theme="pixel-stroke-light"] .preview-font::after { color: var(--lime-ink); }

/* ===========================================================
 * Editor slice v2: themes, labeled tools, palettes, wheel, coach
 * =========================================================== */

/* Editor themes. Night Shade is the default token set above. */
.editor-card[data-ec-theme="parchment"] {
  --ec-bg-0:        #e6dcc8;
  --ec-bg-1:        #f6f1e6;
  --ec-bg-2:        #efe7d7;
  --ec-bg-3:        #fbf8f1;
  --ec-bg-hover:    #e4d9c3;
  --ec-bg-active:   #d9cbb0;
  --ec-canvas:      #e1d6c0;
  --ec-border-sub:  #ddd1ba;
  --ec-border:      #cfc1a5;
  --ec-border-str:  #b3a283;
  --ec-text-1:      #2a2335;
  --ec-text-2:      #4f4660;
  --ec-text-3:      #6a6076;
  --ec-text-4:      #988e86;
  --ec-accent:      #b8321f;
  --ec-on-accent:   #ffffff;
  --ec-accent-soft: rgba(184, 50, 31, 0.12);
  --ec-danger:      #b42318;
  --ec-success:     #2f8f4e;
  --ec-check-a:     #d8ccb4;
  --ec-check-b:     #e3d9c4;
  color-scheme: light;
}
.editor-card[data-ec-theme="ember"] {
  --ec-bg-0:        #140b0c;
  --ec-bg-1:        #1c1012;
  --ec-bg-2:        #241417;
  --ec-bg-3:        #2e1a1d;
  --ec-bg-hover:    #3a2226;
  --ec-bg-active:   #48292d;
  --ec-canvas:      #211315;
  --ec-border-sub:  #2b181b;
  --ec-border:      #3d2428;
  --ec-border-str:  #5e3a3e;
  --ec-text-1:      #f7e8dd;
  --ec-text-2:      #cdb0a2;
  --ec-text-3:      #a38679;
  --ec-text-4:      #725a52;
  --ec-accent:      #ff7a3d;
  --ec-on-accent:   #1c1012;
  --ec-accent-soft: rgba(255, 122, 61, 0.16);
  --ec-danger:      #ff5b5b;
  --ec-success:     #ffb347;
  --ec-check-a:     #2a181b;
  --ec-check-b:     #221316;
}
.editor-card[data-ec-theme="tidepool"] {
  --ec-bg-0:        #04151a;
  --ec-bg-1:        #071d23;
  --ec-bg-2:        #0b252c;
  --ec-bg-3:        #102f37;
  --ec-bg-hover:    #153b44;
  --ec-bg-active:   #1b4852;
  --ec-canvas:      #092127;
  --ec-border-sub:  #0e2b32;
  --ec-border:      #163c45;
  --ec-border-str:  #255661;
  --ec-text-1:      #e3fbf6;
  --ec-text-2:      #a2cdc6;
  --ec-text-3:      #77a6a0;
  --ec-text-4:      #4b746f;
  --ec-accent:      #2ee6c5;
  --ec-on-accent:   #04211c;
  --ec-accent-soft: rgba(46, 230, 197, 0.14);
  --ec-danger:      #ff6b6b;
  --ec-success:     #2ee6c5;
  --ec-check-a:     #0f2a31;
  --ec-check-b:     #0b242a;
}
.editor-card { transition: background-color 200ms ease, color 200ms ease; }

/* Theme picker in the titlebar */
.ec-theme-pick {
  margin-left: auto;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.ec-theme-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ec-text-3);
}
.ec-theme-pick select {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  font-size: 12px;
  color: var(--ec-text-1);
  background: var(--ec-bg-0);
  border: 1px solid var(--ec-border);
  border-radius: 6px;
  padding: 3px 26px 3px 9px;
  cursor: pointer;
}
.ec-theme-pick select:hover { border-color: var(--ec-border-str); }
.ec-theme-pick select:focus-visible { outline: 2px solid var(--ec-accent); outline-offset: 1px; }
.ec-theme-pick::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  width: 5px;
  height: 5px;
  border-right: 1.5px solid var(--ec-text-2);
  border-bottom: 1.5px solid var(--ec-text-2);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

/* Labeled tool rail */
.ec-tools { padding: 10px 6px; gap: 2px; }
.ec-tool {
  width: 100%;
  height: auto;
  min-height: 48px;
  flex-direction: column;
  gap: 5px;
  padding: 7px 2px 6px;
}
.ec-tool-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
}
.ec-tool[aria-pressed="true"] .ec-tool-label,
.ec-tool.is-active .ec-tool-label { color: var(--ec-text-1); }
.ec-tool-divider { width: 70%; }

/* Undo / redo, muted controls */
.ec-opt-history { display: inline-flex; gap: 4px; margin-left: auto; }
.ec-opt-history + .ec-opt-clear { margin-left: 0; }
.ec-opt-icon {
  width: 30px; height: 26px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--ec-border);
  border-radius: 5px;
  color: var(--ec-text-2);
  cursor: pointer;
}
.ec-opt-icon svg { width: 14px; height: 14px; }
.ec-opt-icon:hover:not(:disabled) { color: var(--ec-text-1); border-color: var(--ec-border-str); }
.ec-opt-icon:disabled { opacity: 0.4; cursor: not-allowed; }
.ec-slider.is-muted { opacity: 0.45; }

/* Palettes */
.ec-palettes { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.ec-palette-picker { display: flex; flex-direction: column; gap: 2px; }
.ec-palette {
  display: grid;
  grid-template-columns: minmax(72px, 0.9fr) 1.4fr 20px;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 5px;
  color: var(--ec-text-2);
  cursor: pointer;
  text-align: left;
  font-size: 11.5px;
}
.ec-palette:hover { background: var(--ec-bg-hover); color: var(--ec-text-1); }
.ec-palette.is-active {
  background: var(--ec-accent-soft);
  border-color: color-mix(in srgb, var(--ec-accent) 45%, transparent);
  color: var(--ec-text-1);
}
.ec-palette-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ec-palette-strip { height: 10px; border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25); }
.ec-palette-count { font-family: var(--font-mono); font-size: 10px; color: var(--ec-text-3); text-align: right; }
.ec-palettes .ec-swatches { grid-template-columns: repeat(6, 1fr); gap: 5px; margin-bottom: 0; }
.ec-palettes .ec-swatches.ec-swatches-dense { grid-template-columns: repeat(8, 1fr); gap: 4px; }

/* Wheel */
.ec-wheel { display: flex; justify-content: center; margin-bottom: 10px; }
.ec-wheel canvas {
  width: 100%;
  max-width: 200px;
  height: auto;
  aspect-ratio: 1;
  touch-action: none;
  cursor: crosshair;
}

/* Layers */
.ec-layer-tag {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ec-text-3);
  border: 1px solid var(--ec-border);
  border-radius: 3px;
  padding: 0 4px;
  vertical-align: 1px;
}

/* Status bar: say what the dot means */
.ec-status-engine {
  color: var(--ec-text-2);
  padding-right: 12px;
  border-right: 1px solid var(--ec-border);
  white-space: nowrap;
}
.ec-status-dot.is-error { background: var(--ec-danger); box-shadow: 0 0 6px var(--ec-danger); }

/* Coach target: a pulsing ring on the control the current step needs */
.editor-card .is-coach-target {
  outline: 2px solid var(--ec-accent);
  outline-offset: 2px;
  animation: ec-coach-pulse 1.6s ease-in-out infinite;
}
@keyframes ec-coach-pulse {
  0%, 100% { outline-color: var(--ec-accent); }
  50% { outline-color: color-mix(in srgb, var(--ec-accent) 20%, transparent); }
}

/* Coach strip above the card (page tokens, not editor tokens) */
.ec-coach {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px 22px;
  margin: 0 0 16px;
  padding: 14px 18px;
  background: var(--bg-2);
  border: 1px solid var(--rule);
  border-radius: 12px;
  box-shadow: 0 4px 0 var(--ledge), 0 10px 28px var(--shadow-near);
  color: var(--text-1);
  font-size: 15px;
}
.ec-coach:empty { display: none; }
.ec-coach-head { display: flex; flex-direction: column; gap: 7px; }
.ec-coach-count {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--coral-ink);
  white-space: nowrap;
}
.ec-coach-pips { display: flex; gap: 4px; }
.ec-coach-pips i { width: 14px; height: 6px; background: var(--text-4); opacity: 0.5; }
.ec-coach-pips i.is-done { background: var(--green-ink); opacity: 1; }
.ec-coach-pips i.is-now { background: var(--coral); opacity: 1; }
.ec-coach-body { line-height: 1.5; min-width: 0; }
.ec-coach-title { font-family: var(--font-display); font-weight: 700; font-size: 16px; }
.ec-coach-text { color: var(--text-2); }
.ec-coach-actions { display: flex; gap: 8px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.ec-coach-go, .ec-coach-cta {
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  background: var(--brand-red);
  border: 0;
  border-radius: 8px;
  padding: 9px 14px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 3px 0 color-mix(in srgb, var(--brand-red) 55%, #000);
}
.ec-coach-go:hover, .ec-coach-cta:hover { filter: brightness(1.08); }
.ec-coach-ghost, .ec-coach-reopen {
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-1);
  background: transparent;
  border: 1px solid var(--text-4);
  border-radius: 8px;
  padding: 8px 13px;
  cursor: pointer;
  white-space: nowrap;
}
.ec-coach-ghost:hover, .ec-coach-reopen:hover { border-color: var(--text-2); }
.ec-coach-hide {
  font: inherit;
  font-size: 13px;
  color: var(--text-3);
  background: none;
  border: 0;
  padding: 4px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ec-coach-hide:hover { color: var(--text-1); }
.ec-coach.is-collapsed {
  display: flex;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}
.ec-coach.is-final { border-color: color-mix(in srgb, var(--green-ink) 55%, transparent); }
.ec-coach.is-final .ec-coach-count { color: var(--green-ink); }

@media (prefers-reduced-motion: reduce) {
  .editor-card .is-coach-target { animation: none; }
}
@media (max-width: 1024px) {
  .ec-palettes .ec-swatches { grid-template-columns: repeat(12, 1fr); }
  .ec-palettes .ec-swatches.ec-swatches-dense { grid-template-columns: repeat(16, 1fr); }
}
@media (max-width: 768px) {
  .ec-coach { grid-template-columns: 1fr; padding: 14px; }
  .ec-coach-head { flex-direction: row; align-items: center; justify-content: space-between; }
  .ec-coach-actions { justify-content: flex-start; }
}
@media (max-width: 640px) {
  .editor-card .ec-tool { width: auto; min-width: 54px; height: auto; min-height: 46px; padding: 6px 6px 5px; }
  .editor-card .ec-tool svg { width: 16px; height: 16px; }
  .ec-theme-label { display: none; }
  .ec-palettes .ec-swatches { grid-template-columns: repeat(6, 1fr); }
  .ec-palettes .ec-swatches.ec-swatches-dense { grid-template-columns: repeat(8, 1fr); }
  .ec-opt-history { margin-left: 0; }
}
/* Keep the tool options on one row at desktop widths. */
.ec-toolopts { gap: 10px; }
.ec-slider input[type=range] { width: clamp(64px, 5vw, 110px); }

/* Script card scrollbars: thin, on the card's own dark surfaces,
 * instead of the browser's default bars. */
.sc-editor textarea, .sc-console {
  scrollbar-width: thin;
  scrollbar-color: #3a4170 #0a0d1e;
}
.sc-editor textarea::-webkit-scrollbar, .sc-console::-webkit-scrollbar { width: 10px; height: 10px; }
.sc-editor textarea::-webkit-scrollbar-track, .sc-console::-webkit-scrollbar-track { background: #0a0d1e; }
.sc-editor textarea::-webkit-scrollbar-thumb, .sc-console::-webkit-scrollbar-thumb {
  background: #2e355a;
  border: 2px solid #0a0d1e;
  border-radius: 6px;
}
.sc-editor textarea::-webkit-scrollbar-thumb:hover, .sc-console::-webkit-scrollbar-thumb:hover { background: #3a4170; }
.sc-editor textarea::-webkit-scrollbar-corner, .sc-console::-webkit-scrollbar-corner { background: #0a0d1e; }
@media (max-width: 640px) {
  .sc-hint { white-space: normal; text-align: center; width: max-content; max-width: 86%; }
}
.sc-pad[hidden], .sc-hint[hidden], .sc-play[hidden] { display: none; }
/* A game draws its own HUD along the top: the badge would cover it. */
.script-card.is-playable .sc-badge { display: none; }

/* ---------- State machines v2: tabs, knight controls, clips, Rhai ---------- */
.fsm-tabs {
  display: flex; gap: 4px; padding: 10px 14px;
  background: linear-gradient(180deg, #161b35 0%, #10142a 100%);
  border-bottom: 1px solid #1a1f3a;
  overflow-x: auto; scrollbar-width: none;
}
.fsm-tabs::-webkit-scrollbar { display: none; }
.fsm-tab {
  flex: 0 0 auto;
  font-family: var(--font-mono); font-size: 12px;
  color: var(--text-2); background: transparent;
  border: 1px solid transparent; border-radius: 6px;
  padding: 6px 12px; cursor: pointer; white-space: nowrap;
}
.fsm-tab:hover { color: var(--text-1); }
.fsm-tab.is-active { color: var(--text-1); background: #1e2442; border-color: #3a4170; }
.fsm-card [hidden] { display: none !important; }
.fsm-controls { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.fsm-hold { touch-action: none; user-select: none; }
.fsm-hold:active { background: #1e2442; color: var(--text-1); }
.fsm-attack { color: #0a0a1e; background: var(--yellow); border-color: var(--yellow); font-weight: 700; }
.fsm-attack:hover:not(:disabled) { color: #0a0a1e; background: #ffe17a; border-color: #ffe17a; }
.fsm-clips { display: flex; gap: 8px; margin-left: auto; }
.fsm-clip {
  display: grid; grid-template-columns: auto; justify-items: center; gap: 2px;
  padding: 5px 6px 6px; border: 1px solid #252b4a; border-radius: 8px; background: #0c0f22;
  transition: border-color 160ms ease, background 160ms ease;
}
.fsm-clip-art { width: 64px; height: 50px; border-radius: 4px; }
.fsm-clip-name { font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--text-1); }
.fsm-clip-meta { font-family: var(--font-mono); font-size: 9.5px; color: var(--text-3); }
.fsm-clip.is-active { border-color: var(--violet); background: rgba(122, 59, 255, 0.16); box-shadow: 0 0 0 1px var(--violet); }
.fsm-scrub-label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-3);
}
.fsm-code {
  margin: 0; padding: 10px 0;
  border-top: 1px solid #1a1f3a; background: #0a0d1e;
  font-family: var(--font-mono); font-size: 10.5px; line-height: 1.6;
  color: var(--text-2); overflow-x: auto;
  scrollbar-width: thin; scrollbar-color: #3a4170 #0a0d1e;
}
.fsm-code code { font: inherit; display: block; min-width: max-content; }
.fsm-ln { display: block; padding: 0 14px; white-space: pre; transition: background 300ms ease; }
.fsm-ln.is-live { background: rgba(196, 240, 36, 0.14); box-shadow: inset 3px 0 0 var(--lime); }
.fsm-graph[data-fsm-graph] { padding: 16px 14px 4px; }
@media (max-width: 1100px) {
  .fsm-clips { margin-left: 0; }
}
@media (max-width: 640px) {
  .fsm-clip-art { width: 52px; height: 40px; }
  .fsm-clips { width: 100%; justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) {
  .fsm-ln { transition: none; }
}
.fsm-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
/* The event log sits under the stage, beside what made the events. */
.fsm-stage .fsm-log { flex: 1 1 auto; min-height: 168px; background: #0c0f22; }
@media (max-width: 640px) {
  .fsm-stage .fsm-log { min-height: 96px; }
}