/* 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; }

.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:     #6d7290;
  --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);

  /* Page tokens */
  --page-bg:    var(--bg-1);
  --rule:       rgba(255, 255, 255, 0.08);
  --outline:    var(--bg-0);  /* thick black-navy border (icon signature) */

  /* 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);

  --rule:       rgba(20, 24, 50, 0.10);
  --outline:    #1c2040;
}
/* 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:
    'Söhne', 'Inter Display', 'Inter', -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, sans-serif;
  font-feature-settings: 'ss01' on, 'cv11' on;
  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;
}
img.stroke-brand-mark {
  width: 28px; height: 28px;
  display: block;
  filter: drop-shadow(0 2px 0 var(--outline));
}
.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); }
.stroke-cta {
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 999px;
  border: 2px solid var(--outline);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 0 0 var(--outline);
  transition: all 200ms cubic-bezier(0.2, 0.9, 0.25, 1);
}
.stroke-cta:hover {
  background: var(--brand-red);
  transform: translate(0, -1px);
  box-shadow: 0 5px 0 0 var(--outline);
}

.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: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  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);
}
.hero-headline {
  font-size: clamp(48px, 6.4vw, 280px);
  line-height: 0.96;
  letter-spacing: -0.035em;
  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;
}
.btn-red {
  background: var(--brand-red);
  color: #fff;
  border: 2px solid var(--outline);
  box-shadow: 0 4px 0 0 var(--outline);
}
.btn-red:hover {
  background: var(--brand-yellow);
  color: var(--bg-0);
  transform: translate(0, -2px);
  box-shadow: 0 6px 0 0 var(--outline);
}
.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(--outline),
    0 24px 60px rgba(0, 0, 0, 0.55);
  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: 'JetBrains Mono', monospace;
  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: 'JetBrains Mono', monospace;
  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: 'JetBrains Mono', monospace;
  font-size: 8.5px;
  text-anchor: middle;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: fill 220ms ease;
}
.sm-nodes g.is-active circle {
  fill: var(--accent-soft);
  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: 'JetBrains Mono', monospace;
  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: 'JetBrains Mono', monospace;
  font-size: 8.5px;
  letter-spacing: 0.14em;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 2px 6px;
  border-radius: 3px;
  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: 'JetBrains Mono', monospace;
  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-4);
  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(--brand-yellow); }
.rhai-code .rh-str { color: var(--brand-green); }
.rhai-code .rh-num { color: var(--coral); }
.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: 'JetBrains Mono', monospace;
  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;
}
.frame-cell::after {
  content: "";
  position: absolute;
  width: 30%; height: 30%;
  background: var(--coral);
  border-radius: 50%;
  left: var(--fx, 35%);
  top: var(--fy, 35%);
}
.frame-cell:nth-child(1)::after { --fx: 25%; --fy: 40%; }
.frame-cell:nth-child(2)::after { --fx: 35%; --fy: 30%; }
.frame-cell:nth-child(3)::after { --fx: 45%; --fy: 40%; }
.frame-cell:nth-child(4)::after { --fx: 55%; --fy: 30%; }

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

.section-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  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.025em;
  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(--outline),
    0 30px 80px rgba(0, 0, 0, 0.55);
}
.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(--outline)) 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: 'JetBrains Mono', monospace;
  white-space: nowrap;
  letter-spacing: 0.06em;
  box-shadow: 0 2px 0 var(--outline);
}
.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: 'JetBrains Mono', monospace;
  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: 'JetBrains Mono', monospace;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 4px 0 var(--outline);
  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: #6d7290;
  --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 rgba(10, 10, 30, 0.45),
    0 4px 12px rgba(10, 10, 30, 0.30);
}
.drawer-tag {
  font-family: 'JetBrains Mono', monospace;
  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: 'JetBrains Mono', monospace;
  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 rgba(0, 0, 0, 0.45);
}
.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: 'JetBrains Mono', monospace;
  font-size: clamp(11px, 0.78vw, 14px);
  letter-spacing: 0.04em;
  color: var(--ec-text-1);
  font-weight: 600;
}
.asset-card .kind {
  font-family: 'JetBrains Mono', monospace;
  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 rgba(0, 0, 0, 0.35);
}
@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:      #6d7290;
  --ec-text-4:      #4a4e68;
  --ec-accent:      #6c5ce7;
  --ec-accent-soft: rgba(108, 92, 231, 0.18);
  --ec-danger:      #e74c3c;
  --ec-success:     #2ecc71;

  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 rgba(10, 10, 30, 0.35),
    0 4px 12px rgba(10, 10, 30, 0.20);
  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;
}
.ec-titlebar-meta {
  margin-left: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--ec-text-3);
  text-transform: uppercase;
}

/* BODY (3-column: tools / center / right) ------------------- */
.ec-body {
  display: grid;
  grid-template-columns: clamp(48px, 3.4vw, 72px) 1fr clamp(240px, 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: rgba(108, 92, 231, 0.4);
  box-shadow: 0 0 0 1px rgba(108, 92, 231, 0.2);
}
.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: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ec-text-3);
}
.ec-opt-val {
  font-family: 'JetBrains Mono', monospace;
  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: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset, 0 1px 4px rgba(108, 92, 231, 0.45);
}
.ec-kbd {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  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: rgba(255,255,255,0.85);
  background: rgba(0,0,0,0.18);
  border-color: rgba(255,255,255,0.18);
}
.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: 'JetBrains Mono', monospace;
  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: 'JetBrains Mono', monospace;
  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: 'JetBrains Mono', monospace;
  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: 'JetBrains Mono', monospace;
  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: 'JetBrains Mono', monospace;
  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: 'JetBrains Mono', monospace;
  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: 'JetBrains Mono', monospace;
  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: 'JetBrains Mono', monospace;
  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: 'JetBrains Mono', monospace;
  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: 'JetBrains Mono', monospace;
  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: #6d7290;

  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 rgba(10, 10, 30, 0.45),
    0 4px 12px rgba(10, 10, 30, 0.30);
}
.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: 'JetBrains Mono', monospace;
  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: 'JetBrains Mono', monospace;
  font-size: clamp(13px, 0.95vw, 18px);
  font-weight: 600;
  color: var(--ec-text-1);
  letter-spacing: 0.02em;
}
.export-arrow {
  font-family: 'JetBrains Mono', monospace;
  color: var(--ec-text-3);
  font-size: clamp(13px, 0.9vw, 18px);
}
.export-target {
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(11px, 0.78vw, 15px);
  color: var(--ec-text-2);
  letter-spacing: 0.04em;
}
.export-badge {
  font-family: 'JetBrains Mono', monospace;
  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); }
.export-row[data-fmt="png"]   .export-badge { color: var(--yellow); border-color: rgba(255, 210, 60, 0.35); }
.export-row[data-fmt="svg"]   .export-glyph { color: var(--cyan); }
.export-row[data-fmt="svg"]   .export-badge { color: var(--cyan); 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); }
.export-row[data-fmt="ttf"]   .export-badge { color: var(--lime); border-color: rgba(196, 240, 36, 0.35); }
.export-row[data-fmt="atlas"] .export-glyph { color: var(--coral); }
.export-row[data-fmt="atlas"] .export-badge { color: var(--coral); 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); 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: 'JetBrains Mono', monospace;
  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: 'JetBrains Mono', monospace;
  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: 'JetBrains Mono', monospace;
  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: 'JetBrains Mono', monospace;
  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: 'JetBrains Mono', monospace;
  font-size: clamp(10px, 0.7vw, 13px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-4);
}

.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: 'JetBrains Mono', monospace;
  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; }
  .anim-frames { grid-template-columns: repeat(5, 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(--outline);
}
.iter-tag {
  font-family: 'JetBrains Mono', monospace;
  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.03em;
  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: 'JetBrains Mono', monospace;
  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; }
.stroke-footer a:hover { color: var(--ink); }

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

/* Tablet (≤1024): drop the dense scripting/state-machine floats,
 * but keep three core ones (layers, palette, frames) since those are
 * the design icons the brand reads from. Reposition them so they
 * fit the narrower hero without crashing into the headline. */
@media (max-width: 1024px) {
  .float-card.state-machine,
  .float-card.rhai { display: none; }
  .float-card.layers   { top: 6%;  right: 4%;  width: 200px; }
  .float-card.palette  { top: 32%; right: 4%;  width: 200px; }
  .float-card.frames   { top: 58%; right: 4%;  width: 220px; }
  .hero-headline       { max-width: min(13ch, 56%); }
  .hero-lede           { max-width: min(48ch, 56%); }

  .section-ideate, .section-outputs { grid-template-columns: 1fr; gap: 32px; }
  .asset-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 140px; }
  .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: 44px 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-titlebar-meta { display: none; }
  .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; }
}