/* /products/vs — page-specific styles for the 2026 "Claude Design"
 * handoff (imaginando-3-0/project/Imaginando VS.html inline <style>).
 *
 * SCOPE: only VS-custom sections live here. The standardized sections
 * (overview, features, tutorials, expansions, press, testimonials,
 * requirements, help, faq) are rendered by shared mixins and styled by
 * public/style.css — do NOT redefine their base classes here.
 *
 * PALETTE: global lime --accent for all chrome; the cool VS palette
 * (--vs-1..4) is scoped to the shader/diagram visuals. Card surfaces use
 * var(--card, #0a0a12) so the light theme reskins them; the demo "screens"
 * keep their dark backgrounds (they're synth displays) in both themes.
 *
 * MOTION: the interactive demos + WebGL shaders are mounted by
 * public/pages/vs.js (rAF, IntersectionObserver-gated, reduced-motion
 * safe). The .vs-poster inside each demo mount is the no-JS fallback.
 */

:root {
  --vs-1: #5a8cff;
  --vs-2: #a96bff;
  --vs-3: #ff6bd6;
  --vs-4: #3effb1;
}

/* ============================================================
 * Section header — VS scale (bigger, two-column). Applies to every
 * .sec-head on the page (custom + standardized mixins) for one consistent
 * display scale, matching the handoff.
 * ============================================================ */
.sec-head { display: grid; grid-template-columns: 1.4fr 0.8fr; gap: 32px; align-items: end; margin-bottom: 48px; }
@media (max-width: 900px) { .sec-head { grid-template-columns: 1fr; } }
.sec-head .l { max-width: 46ch; }
.sec-head h2 { font-family: var(--display); font-weight: 500; font-size: clamp(36px, 5vw, 68px); line-height: 0.98; letter-spacing: -0.025em; margin: 8px 0 0; max-width: none; text-wrap: balance; }
.sec-head h2 em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--accent); }
.sec-head .meta { font-family: var(--mono); font-size: 11px; color: var(--fg-faint); letter-spacing: 0.1em; text-transform: uppercase; text-align: right; display: block; }
@media (max-width: 900px) { .sec-head .meta { text-align: left; } }

/* ============================================================
 * HERO — full-bleed reactive WebGL shader stage
 * ============================================================ */
/* VS uses the shared +productHero (.phero-*). Breadcrumb, copy, stat grid and
   the product-shot framing all come from the shared .phero-* rules in
   style.css — these are only the two VS-only extras: the reactive shader
   canvas in .phero-bg, and the audio/MIDI HUD. */

/* .phero-bg is position:absolute; inset:0 over the whole hero (style.css).
   With no JS / reduced-motion this gradient stands in for the shader. */
.vs-hero .phero-bg {
  background: radial-gradient(130% 120% at 30% 24%, #2a2160 0%, #171436 44%, var(--bg) 100%);
}
/* Reactive WebGL canvas — fills .phero-bg, behind the copy. vs.js#initHero
   renders the shader here (targets [data-vs-hero]). */
.phero-shader { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
/* Scrim for headline legibility over the busy shader (left + bottom weighted). */
.vs-hero .phero-bg::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, color-mix(in oklab, var(--bg) 88%, transparent) 0%, color-mix(in oklab, var(--bg) 52%, transparent) 34%, transparent 66%),
    linear-gradient(0deg, color-mix(in oklab, var(--bg) 78%, transparent) 0%, transparent 46%);
}
/* Keep the hero grid (copy + shot + HUD) above the canvas + scrim. */
.vs-hero .phero-grid { position: relative; z-index: 2; }

/* On mobile the hero copy spans the full width (single column), so the
   desktop left-weighted scrim leaves the text over the bright part of the
   shader and it becomes unreadable. Swap to a stronger, full-width vertical
   wash so the copy stays legible across the whole hero. */
@media (max-width: 900px) {
  .vs-hero .phero-bg::after {
    background:
      linear-gradient(0deg,
        color-mix(in oklab, var(--bg) 90%, transparent) 0%,
        color-mix(in oklab, var(--bg) 70%, transparent) 45%,
        color-mix(in oklab, var(--bg) 45%, transparent) 100%);
  }
}

/* Audio/MIDI HUD — compact, minimal-tech. Sits directly BELOW the product shot
   (its top meets the shot's bottom), right-aligned to the shot's right edge,
   with a small gap. Solid single-colour meters (audio = accent, MIDI = --vs-2),
   no gradient, no glow. */
.hero-hud { display: flex; gap: 8px; justify-content: flex-end; align-items: stretch; margin-top: 12px; }
@media (max-width: 560px) { .hero-hud { gap: 6px; } }
.hud-panel { background: rgba(8,8,12,.66); backdrop-filter: blur(10px) saturate(120%); -webkit-backdrop-filter: blur(10px) saturate(120%); border: 0.5px solid var(--line-strong); border-radius: 6px; padding: 6px 8px 5px; width: 100px; display: flex; flex-direction: column; }
.hud-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 5px; font-family: var(--mono); font-size: 7px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-dim); }
.hud-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }
.hud-note { color: var(--vs-2); font-weight: 500; }
.hud-bars { display: flex; align-items: flex-end; gap: 1.5px; height: 20px; }
.hud-bar { flex: 1; min-width: 0; height: 8%; border-radius: 0.5px; background: var(--accent); }
.hud-level { margin-top: 4px; height: 1.5px; border-radius: 2px; background: rgba(244,241,234,.10); overflow: hidden; }
.hud-level span { display: block; height: 100%; width: 0; background: var(--accent); }
.hud-keys { display: flex; align-items: flex-end; gap: 1.5px; height: 20px; }
.hud-key { flex: 1; min-width: 0; height: 100%; border-radius: 0.5px; background: color-mix(in oklab, var(--vs-2) calc(var(--v,0)*100%), rgba(244,241,234,.10)); transform: scaleY(calc(0.55 + var(--v,0)*0.45)); transform-origin: bottom; transition: transform 0.04s linear; }
.hud-key.black { height: 62%; }
.hud-cap { margin-top: 4px; font-family: var(--mono); font-size: 7px; letter-spacing: 0.05em; color: var(--fg-faint); }

/* ============================================================
 * Core-engine / Visual-sources dividers
 * ============================================================ */
.core-divider { padding: 104px 0 60px; }
.core-h2 { font-family: var(--display); font-weight: 500; font-size: clamp(52px, 8vw, 120px); line-height: 0.9; letter-spacing: -0.035em; margin: 14px 0 22px; text-wrap: balance; }
.core-h2 em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--accent); }
.core-lede { max-width: 62ch; color: var(--fg-dim); font-size: 18px; line-height: 1.55; margin: 0 0 32px; text-wrap: pretty; }
.core-index { display: flex; flex-wrap: wrap; gap: 10px; }
.core-idx { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 0.5px solid var(--line-strong); border-radius: 999px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-dim); transition: color 0.2s, border-color 0.2s, transform 0.2s; }
.core-idx:hover { color: var(--fg); border-color: var(--fg); transform: translateY(-1px); }
.core-idx .arrow { transition: transform 0.2s; }
.core-idx:hover .arrow { transform: translateY(2px); }

/* ============================================================
 * Shaders — play / tweak player + editor
 * ============================================================ */
.shv-demo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
@media (max-width: 900px) { .shv-demo { grid-template-columns: 1fr; } }
.shv-left { display: flex; flex-direction: column; gap: 14px; }
/* The stage fills the left column so it matches the height of the tile grid on
   the right. It renders at whatever aspect it ends up — the runtime sizes the GL
   buffer to the target box, so the shader never stretches. */
.shv-stage { position: relative; flex: 1; min-height: 300px; border: 0.5px solid var(--line-strong); border-radius: 16px; overflow: hidden; background: #000; box-shadow: 0 40px 100px -30px rgba(0,0,0,.8); }
.shv-render { position: absolute; inset: 0; transition: filter 0.12s linear, transform 0.12s linear; }
.shv-render canvas, .shv-render svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.shv-name { position: absolute; left: 14px; bottom: 12px; z-index: 2; font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; background: rgba(0,0,0,.5); padding: 5px 10px; border-radius: 6px; border: 0.5px solid rgba(255,255,255,.1); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.shv-edit { position: absolute; right: 14px; top: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; background: rgba(6,6,10,.55); border: 0.5px solid var(--line-strong); border-radius: 999px; padding: 8px 14px; cursor: pointer; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: color 0.2s, border-color 0.2s, background 0.2s; }
.shv-edit:hover { border-color: #fff; color: #fff; background: rgba(6,6,10,.72); }
.shv-knobs { display: flex; gap: 10px; align-items: flex-start; padding: 16px 18px 20px; border: 0.5px solid var(--line-strong); border-radius: 16px; background: var(--card, #0a0a12); }
/* display:contents lets the param knobs join the same flex row, so COLOR, SPEED
   and every param share the width equally (.sh-knob is flex:1). */
.shv-pknobs { display: contents; }
.sh-swatch { width: 46px; height: 46px; padding: 0; border: 1px solid var(--line-strong); border-radius: 10px; background: none; cursor: pointer; -webkit-appearance: none; appearance: none; }
.sh-swatch::-webkit-color-swatch-wrapper { padding: 3px; }
.sh-swatch::-webkit-color-swatch { border: none; border-radius: 7px; }
.sh-swatch::-moz-color-swatch { border: none; border-radius: 7px; }

/* Custom colour picker popover (replaces the native <input type=color> OS
   popup on the shader COLOR control). Themed to the page — SV square + hue bar
   + hex field — and works in both light and dark via the shared tokens. */
.cp-pop { position: fixed; z-index: 300; width: 208px; padding: 12px; border-radius: 12px; background: var(--card); border: 0.5px solid var(--line-strong); box-shadow: 0 24px 60px -20px rgba(0,0,0,.55); display: flex; flex-direction: column; gap: 10px; animation: vs-fade 0.14s ease; }
.cp-sv { position: relative; width: 100%; height: 132px; border-radius: 8px; cursor: crosshair; touch-action: none; border: 0.5px solid var(--line); }
.cp-sv-dot { position: absolute; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.45); transform: translate(-50%, -50%); pointer-events: none; }
.cp-hue { position: relative; width: 100%; height: 12px; border-radius: 999px; cursor: ew-resize; touch-action: none; background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%); }
.cp-hue-handle { position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.45); transform: translate(-50%, -50%); pointer-events: none; }
.cp-row { display: flex; align-items: center; gap: 6px; border: 0.5px solid var(--line-strong); border-radius: 8px; padding: 6px 10px; }
.cp-hash { font-family: var(--mono); font-size: 12px; color: var(--fg-faint); }
.cp-hex { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: var(--fg); font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
.sh-knob { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: ns-resize; -webkit-user-select: none; user-select: none; touch-action: none; flex: 1; min-width: 0; }
.sh-dial { width: 46px; height: 46px; }
/* The knob track ring is drawn with an inline near-white stroke (good on the
   dark UI); this CSS rule wins over that presentation attribute and swaps in a
   theme-aware colour so the ring stays visible on the white light-mode panel. */
.sh-dtrack { stroke: var(--dial-track); }
/* Label sits above the dial (VS layout); while dragging it is replaced in place
   by the value (amber), so no tooltip and no reserved space. */
/* Labels never widen the knob: they ellipsize within the knob's share so a
   long parameter name can't blow out the grid track and shift the layout when
   switching shaders. (Dragging swaps the label for the short numeric value.) */
.sh-klbl { font-family: var(--mono); font-size: 8px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-knob.dragging .sh-klbl { color: var(--accent); letter-spacing: 0.04em; }
/* The 6 param knobs (COLOR·SPEED + the shader's params) are a no-wrap flex row;
   on a narrow phone they overrun the viewport and, since `main` is
   overflow-x: clip, the whole page gets clipped on the right. Wrap to 3-per-row
   on small screens so nothing forces horizontal overflow. */
@media (max-width: 560px) {
  .shv-knobs { flex-wrap: wrap; justify-content: center; row-gap: 16px; padding: 16px 14px 18px; }
  .shv-knobs .sh-knob { flex: 0 0 calc(33.333% - 8px); }
}
.shv-list { position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: auto; align-content: start; gap: 12px; }
@media (max-width: 900px) { .shv-list { grid-template-columns: repeat(2, 1fr); } }
.shv-prev { position: relative; aspect-ratio: 16 / 9; border: 0.5px solid var(--line); border-radius: 12px; overflow: hidden; background: #000; cursor: pointer; padding: 0; display: flex; align-items: flex-end; transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s; }
.shv-prev:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.shv-prev.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 10px 30px -10px color-mix(in oklab, var(--accent) 40%, transparent); }
.shv-prev-vis { position: absolute; inset: 0; }
.shv-prev-vis canvas, .shv-prev-vis svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.shv-prev-lbl { position: relative; z-index: 2; margin: 10px; font-family: var(--mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; background: rgba(0,0,0,.5); padding: 4px 8px; border-radius: 6px; border: 0.5px solid rgba(255,255,255,.1); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.shv-edlay { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; border: 0.5px solid var(--line-strong); background: #0a0a0b; box-shadow: 0 40px 100px -30px rgba(0,0,0,.85); animation: vs-fade 0.2s ease; }

.shaders-foot { margin-top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: var(--fg-faint); }
.shaders-foot .info { display: flex; gap: 18px; flex-wrap: wrap; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.shaders-foot .info b { color: var(--fg); font-weight: 500; }

/* Shader editor chrome (VS 2 mock) */
.sed-modal { position: fixed; inset: 0; z-index: 200; background: rgba(3,3,6,.72); backdrop-filter: blur(8px) saturate(120%); -webkit-backdrop-filter: blur(8px) saturate(120%); display: flex; align-items: center; justify-content: center; padding: 24px; animation: vs-fade 0.2s ease; }
@keyframes vs-fade { from { opacity: 0; } to { opacity: 1; } }
.sed-modal-inner { width: min(1120px, 96vw); max-height: 92vh; display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; border: 0.5px solid var(--line-strong); box-shadow: 0 60px 140px -30px rgba(0,0,0,.85); }
.sed-modal-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; background: #0b0b0d; border-bottom: 0.5px solid rgba(255,255,255,.08); }
/* The bar is permanent dark chrome, so its title + close control keep light
   colours in BOTH themes — the default var(--fg-dim)/var(--line-strong) tokens
   flip dark in light mode and vanish against #0b0b0d. */
.sed-modal-bar .mono { color: rgba(255,255,255,.62); }
.sed-modal-x { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,.7); background: transparent; border: 0.5px solid rgba(255,255,255,.22); border-radius: 999px; padding: 7px 14px; cursor: pointer; transition: color 0.2s, border-color 0.2s; }
.sed-modal-x:hover { color: #fff; border-color: #fff; }
.sed-modal-body { flex: 1; min-height: 0; overflow: auto; background: #0a0a0b; }
/* The editor is permanent dark chrome in both layouts (.shv-edlay docked +
   .sed-modal centred), so force dark, subtle scrollbars on the body and every
   scroll surface inside it (code textarea, error panel). Otherwise the OS
   default — light/white in light mode — cuts a bright gash across the dark UI. */
.sed-modal-body, .sed-modal-body * { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.24) transparent; }
.sed-modal-body::-webkit-scrollbar, .sed-modal-body ::-webkit-scrollbar { width: 10px; height: 10px; }
.sed-modal-body::-webkit-scrollbar-track, .sed-modal-body ::-webkit-scrollbar-track { background: transparent; }
.sed-modal-body::-webkit-scrollbar-thumb, .sed-modal-body ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
.sed-modal-body::-webkit-scrollbar-thumb:hover, .sed-modal-body ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.34); background-clip: padding-box; }
.sed-modal-body::-webkit-scrollbar-corner, .sed-modal-body ::-webkit-scrollbar-corner { background: transparent; }
.sed-window { display: flex; flex-direction: column; height: 100%; background: #0a0a0b; font-family: var(--mono); color: #d8d4cc; position: relative; font-size: 11px; }
.sed-titlebar { height: 34px; background: #3a3330; display: flex; align-items: center; padding: 0 14px; }
.sed-lights { display: flex; gap: 8px; }
.sed-lights i { width: 12px; height: 12px; border-radius: 50%; background: #e0e0e0; opacity: 0.9; }
.sed-lights i:nth-child(1) { background: #ff5f57; }
.sed-lights i:nth-child(2) { background: #febc2e; }
.sed-lights i:nth-child(3) { background: #28c840; }
.sed-toolbar { display: flex; align-items: center; gap: 22px; height: 48px; padding: 0 16px; background: #0b0b0d; border-bottom: 0.5px solid rgba(255,255,255,.06); }
.sed-burger { display: flex; flex-direction: column; gap: 3px; }
.sed-burger b { width: 16px; height: 1.6px; background: #c8c4bc; border-radius: 1px; }
.sed-logo { font-family: var(--display); font-weight: 400; font-size: 22px; letter-spacing: 0.04em; color: #e8e4dc; }
.sed-logo em { font-style: normal; font-weight: 300; margin-left: 4px; color: #e8e4dc; }
.sed-tb { display: flex; flex-direction: column; gap: 3px; line-height: 1; }
.sed-tb .t { font-size: 9px; letter-spacing: 0.1em; color: #e6b84b; }
.sed-tb .v { font-size: 12px; color: #d8d4cc; }
.sed-tb-icons { margin-left: auto; color: #8a867e; font-size: 15px; letter-spacing: 2px; }
.sed-body { display: flex; min-height: 0; }
.sed-rail { width: 52px; background: #0b0b0d; border-right: 0.5px solid rgba(255,255,255,.06); display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 22px 0; }
.sed-railicon { color: #6f6b63; font-size: 16px; }
.sed-railicon.on { color: #e6b84b; }
.sed-railicon.bottom { margin-top: auto; }
.sed-main { flex: 1; min-width: 0; background: #0a0a0b; display: flex; flex-direction: column; }
.sed-filebar { display: flex; align-items: center; gap: 16px; height: 46px; padding: 0 20px; border-bottom: 0.5px solid rgba(255,255,255,.05); }
.sed-file { font-family: var(--display); font-weight: 500; font-size: 15px; color: #efece5; }
.sed-divider { width: 1px; height: 20px; background: rgba(255,255,255,.12); }
.sed-fontstep { background: #1a1a1e; border: 0.5px solid rgba(255,255,255,.08); border-radius: 6px; padding: 4px 10px; color: #c8c4bc; font-size: 12px; }
.sed-fontstep b { color: #efece5; margin: 0 2px; }
.sed-search { color: #6f6b63; font-size: 12px; }
.sed-code { position: relative; flex: 1; padding: 12px 0 14px; overflow: hidden; }
.sed-preview { position: absolute; top: 14px; right: 18px; width: 232px; height: 132px; border-radius: 4px; overflow: hidden; border: 0.5px solid rgba(255,255,255,.14); background: #000; z-index: 2; box-shadow: 0 12px 40px -12px rgba(0,0,0,.8); }
@media (max-width: 900px) { .sed-preview { width: 170px; height: 96px; right: 12px; top: 12px; } }
@media (max-width: 600px) { .sed-preview { display: none; } }
.sed-preview canvas, .sed-preview svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sed-expand { position: absolute; right: 8px; bottom: 6px; color: rgba(255,255,255,.7); font-size: 13px; }
.sed-line { display: flex; align-items: baseline; gap: 14px; padding: 0 18px; line-height: 1.42; white-space: pre; }
.sed-ln { width: 26px; text-align: right; color: #4a463f; flex: none; -webkit-user-select: none; user-select: none; }
.sed-line code { color: #cfcabf; font-family: var(--mono); }
.sed-line code .k { color: #8fd6c8; }
.sed-line code .s { color: #7fc77f; }
.sed-line code .n { color: #b79cff; }
.sed-line code .b { color: #e6b84b; }
.sed-line code .c { color: #5c5850; }
.sed-foot { display: flex; align-items: center; justify-content: center; gap: 20px; padding: 14px 20px 18px; background: #0b0b0d; border-top: 0.5px solid rgba(255,255,255,.06); }
.sed-knobs { display: flex; gap: 18px; flex-wrap: nowrap; justify-content: space-around; width: 100%; max-width: 640px; overflow-x: auto; }
.sed-knob { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 44px; }
.sed-dial { width: 34px; height: 34px; }
.sed-swatch { width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #8fb0ff, #4f6bd8); border: 0.5px solid rgba(255,255,255,.2); margin: 4px 0; }
.sed-klbl { font-size: 8px; letter-spacing: 0.06em; color: #8a867e; text-align: center; line-height: 1.1; }
.sed-actions { display: flex; gap: 10px; flex: none; }
.sed-btn { background: #1a1a1e; border: 0.5px solid rgba(255,255,255,.12); border-radius: 6px; padding: 9px 18px; color: #d8d4cc; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; cursor: pointer; }
.sed-btn.save { background: #2a2723; border-color: rgba(230,184,75,.4); color: #e6b84b; }
.sed-status { padding: 8px 20px; background: #0a0a0b; color: #5c5850; font-size: 11px; border-top: 0.5px solid rgba(255,255,255,.05); font-family: var(--mono); letter-spacing: 0.04em; }
.sed-status.err { color: #ff7a7a; background: color-mix(in oklab, #ff5252 12%, #0a0a0b); white-space: pre-wrap; max-height: 84px; overflow: auto; }
/* Editable GLSL surface — the live shader source (recompiles on edit). */
.sed-codewrap { position: relative; flex: 1; min-height: 0; overflow: hidden; background: #0a0a0b; }
/* Highlight overlay (<pre>) sits under the transparent-text textarea; both share
   identical metrics so the caret + selection land exactly on the highlighted
   glyphs. line-height MUST be an integer px (not a unitless 1.55 → 19.375px):
   under fractional browser zoom / display scaling the <textarea> and <pre> snap
   each line to device pixels independently, and a fractional line box drifts them
   apart line-by-line (the selection then visibly slides off the text). 20px lands
   on whole device pixels at 1.25×/1.5×/2×. */
.sed-hl, .sed-editor { position: absolute; inset: 0; margin: 0; box-sizing: border-box; font-family: var(--mono); font-size: 13px; line-height: 20px; padding: 14px 20px 14px 56px; border: 0; white-space: pre; tab-size: 2; -moz-tab-size: 2; letter-spacing: normal; }
/* Line-number gutter — sticky opaque strip over the code layers (sits above the
   <pre> so code scrolls beneath it), same metrics so numbers track each row. */
.sed-gutter { position: absolute; left: 0; top: 0; bottom: 0; width: 44px; z-index: 2; overflow: hidden; box-sizing: border-box; padding: 14px 0; background: #0b0b0d; border-right: 0.5px solid rgba(255,255,255,.06); pointer-events: none; }
.sed-lnum { font-family: var(--mono); font-size: 13px; line-height: 20px; text-align: right; padding-right: 12px; color: #4a463f; }
.sed-lnum.err { color: #ff7a7a; background: rgba(255,82,82,.16); font-weight: 600; }
.sed-hl { overflow: hidden; pointer-events: none; z-index: 1; background: #0a0a0b; color: #cfcabf; }
.sed-hl code { font: inherit; letter-spacing: inherit; white-space: inherit; background: none; padding: 0; }
.sed-editor { z-index: 2; resize: none; outline: 0; overflow: auto; background: transparent; color: transparent; -webkit-text-fill-color: transparent; caret-color: var(--accent); }
/* Keep the textarea's own glyphs transparent even when selected. WebKit
   otherwise re-shows selected text (ignoring -webkit-text-fill-color), which
   would paint a SECOND set of glyphs over the highlighted <pre> — visibly
   doubled the instant the two layers desync by even a pixel (e.g. mid-scroll).
   With this, only the <pre> text + this selection band are ever visible. */
.sed-editor::selection { background: rgba(230,184,75,.28); color: transparent; -webkit-text-fill-color: transparent; }
.sed-hl .t-com { color: #6a6f7a; font-style: italic; }
.sed-hl .t-pre { color: #c58fe0; }
.sed-hl .t-kw { color: #e6b84b; }
.sed-hl .t-fn { color: #6cb6ff; }
.sed-hl .t-vs { color: #56d364; }
.sed-hl .t-num { color: #e0985f; }

/* ============================================================
 * "Also inside" feature mosaic (static SVG backdrops)
 * ============================================================ */
.features { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; }
.feat { position: relative; border: 0.5px solid var(--line); border-radius: 14px; background: var(--card, #0a0a12); padding: 24px; display: flex; flex-direction: column; gap: 14px; overflow: hidden; min-height: 240px; }
.feat .mono { align-self: flex-start; }
.feat h4 { font-family: var(--display); font-weight: 500; font-size: 22px; letter-spacing: -0.015em; margin: 0; line-height: 1.15; text-wrap: balance; }
.feat h4 em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--accent); }
.feat p { margin: 0; color: var(--fg-dim); font-size: 13.5px; line-height: 1.55; text-wrap: pretty; flex: 1; }
.feat .vis { position: relative; height: 130px; border-radius: 10px; overflow: hidden; border: 0.5px solid var(--line); background: #000; }
.feat .vis svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.feat.s4 { grid-column: span 4; }
.feat.s6 { grid-column: span 6; }
.feat.s8 { grid-column: span 8; }
.feat.s12 { grid-column: span 12; }
.feat.compact p { font-size: 12px; line-height: 1.5; flex: 0 0 auto; }
.feat.compact .vis { flex: 1; min-height: 130px; }
@media (max-width: 1100px) { .feat.s4 { grid-column: span 6; } .feat.s8 { grid-column: span 12; } }
@media (max-width: 640px) { .feat.s4, .feat.s6, .feat.s8, .feat.s12 { grid-column: span 12; } }

/* ============================================================
 * Visual sources — alternating copy / animated-canvas sub-sections
 * ============================================================ */
.vsrc-sec { padding: 60px 0; border-bottom: 0.5px solid var(--line); }
.vsrc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
@media (max-width: 900px) { .vsrc-row { grid-template-columns: 1fr; gap: 26px; } }
@media (min-width: 901px) { .vsrc-sec.rev .vsrc-copy { order: 2; } .vsrc-sec.rev .vsrc-vis { order: 1; } }
.vsrc-h3 { font-family: var(--display); font-weight: 500; font-size: clamp(30px, 3.4vw, 44px); line-height: 1.05; letter-spacing: -0.02em; margin: 12px 0 16px; text-wrap: balance; }
.vsrc-h3 em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--accent); }
.vsrc-body { color: var(--fg-dim); font-size: 15.5px; line-height: 1.6; max-width: 48ch; text-wrap: pretty; margin: 0; }
.vsrc-vis { position: relative; aspect-ratio: 16/9; border-radius: 16px; overflow: hidden; border: 0.5px solid var(--line-strong); background: #000; box-shadow: 0 30px 80px -30px rgba(0,0,0,.7); }
.vsrc-vis canvas, .vsrc-vis svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.vsrc-vis video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.vsrc-vis .vs-poster { position: absolute; inset: 0; min-height: 0; border: 0; border-radius: 0; z-index: 0; }

/* ============================================================
 * Who it's for (static SVG backdrops)
 * ============================================================ */
.who { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 1000px) { .who { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .who { grid-template-columns: 1fr; } }
.wcard { position: relative; border: 0.5px solid var(--line); border-radius: 14px; background: var(--card, #0a0a12); overflow: hidden; display: flex; flex-direction: column; }
.wcard .vis { aspect-ratio: 4/3; position: relative; background: #000; overflow: hidden; }
.wcard .vis svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.wcard .vis .wvis-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.wcard .body { padding: 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.wcard h4 { font-family: var(--display); font-weight: 600; font-size: 20px; letter-spacing: -0.01em; margin: 0; }
.wcard h4 em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--accent); }
.wcard p { margin: 0; color: var(--fg-dim); font-size: 13.5px; line-height: 1.55; text-wrap: pretty; flex: 1; }

/* ============================================================
 * Integrations (DAWs)
 * ============================================================ */
.daws { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 56px; align-items: center; }
@media (max-width: 1000px) { .daws { grid-template-columns: 1fr; } }
/* Integrations visual — cross-fading DAW screenshots with the VS plugin window
   overlaid on top (VS running inside the host). */
.daws-vis { position: relative; border: 0.5px solid var(--line); border-radius: 18px; background: #05070e; aspect-ratio: 16 / 9; overflow: hidden; }
.daws-slides { position: absolute; inset: 0; }
.daws-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.1s ease; }
.daws-slide.on { opacity: 1; }
.daws-scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(3,5,10,.30) 0%, rgba(3,5,10,.70) 100%); }
/* VS plugin window floating over the host, centred with margins (inset box +
   auto margins centres the intrinsic-size, max-capped image). */
.daws-plugin { position: absolute; top: 26px; left: 26px; right: 26px; bottom: 44px; margin: auto; max-width: calc(100% - 52px); max-height: calc(100% - 70px); border-radius: 10px; border: 0.5px solid var(--line-strong); box-shadow: 0 30px 80px -22px rgba(0,0,0,.85); }
.daws-cap { position: absolute; left: 20px; bottom: 15px; z-index: 2; color: var(--fg-dim); text-shadow: 0 1px 10px rgba(0,0,0,.85); }
.daws-list { display: flex; flex-direction: column; gap: 14px; }
.daw-row { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; padding: 18px 0; border-top: 0.5px solid var(--line); }
.daw-row:first-child { border-top: 0; }
.daw-row .num { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; color: var(--fg-faint); padding-top: 2px; }
.daw-row h5 { font-family: var(--display); font-weight: 500; font-size: 18px; letter-spacing: -0.01em; margin: 0 0 4px; line-height: 1.2; }
.daw-row p { margin: 0; color: var(--fg-dim); font-size: 13.5px; line-height: 1.55; text-wrap: pretty; }
.daw-row .pill { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-faint); padding: 4px 8px; border: 0.5px solid var(--line); border-radius: 999px; white-space: nowrap; }

/* ============================================================
 * Interactive demo shells (mounted by vs.js) — shared bits
 * ============================================================ */
.pv-lede { max-width: 66ch; color: var(--fg-dim); font-size: 16.5px; line-height: 1.6; margin: 0 0 40px; text-wrap: pretty; }
.pv-lede b { color: var(--fg); font-weight: 500; }

/* no-JS / pre-mount poster */
.vs-poster { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 320px; border: 0.5px solid var(--line-strong); border-radius: 16px; background: linear-gradient(135deg, color-mix(in oklab, var(--vs-1) 18%, #05050a), color-mix(in oklab, var(--vs-2) 20%, #05050a)); font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-faint); }

/* Audio-reactive material (shared: also the material renderer for MIDI/LFO/Mod) */
.mr-demo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; }
@media (max-width: 900px) { .mr-demo { grid-template-columns: 1fr; } }
.mr-left { display: flex; flex-direction: column; gap: 16px; }
.mr-panel { border: 0.5px solid var(--line-strong); border-radius: 16px; background: var(--card, #0a0a12); padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.mr-head { display: flex; align-items: center; justify-content: space-between; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-faint); }
.mr-head span:first-child { color: var(--fg-dim); }
.mr-tag { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-faint); }
.mr-roll { display: grid; grid-template-columns: 34px 1fr; gap: 8px; }
.mr-lanes { display: grid; grid-template-rows: repeat(4, 1fr); gap: 4px; }
.mr-lane { display: flex; align-items: center; font-family: var(--mono); font-size: 9px; letter-spacing: 0.06em; color: var(--fg-faint); }
.mr-steps { position: relative; }
.mr-cells { display: grid; gap: 4px; height: 100%; min-height: 132px; }
.mr-cell { border: 0.5px solid var(--line); border-radius: 5px; background: #06060c; cursor: pointer; padding: 0; transition: background 0.12s, border-color 0.12s, box-shadow 0.12s; }
.mr-cell:hover { border-color: var(--line-strong); }
.mr-cell.on { background: #5a8cff; border-color: #5a8cff; }
.mr-cell.hit { background: #3effb1; border-color: #3effb1; box-shadow: 0 0 14px rgba(62,255,177,.7); }
/* Empty cells are near-black by design on the dark UI; on the light-mode panel
   that reads as odd solid black rects, so give them a light recessed-slot look. */
[data-theme="light"] .mr-cell:not(.on):not(.hit) { background: var(--bg-2); border-color: var(--line-strong); }
/* "EG 1" label matches the mint envelope curve, but mint is illegible on the
   white light-mode panel — darken it there. */
.mr-eg-name { color: #3effb1; }
[data-theme="light"] .mr-eg-name { color: #0f9b6e; }
.mr-play { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--accent); box-shadow: 0 0 8px var(--accent); pointer-events: none; }
.mr-foot { font-family: var(--mono); font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-faint); }
.mr-eg-svg { display: block; width: 100%; height: 90px; background: #06060c; border: 0.5px solid var(--line); border-radius: 8px; }
.mr-right { display: flex; }
.mr-stage { position: relative; flex: 1; min-height: 360px; border: 0.5px solid var(--line-strong); border-radius: 16px; overflow: hidden; background: #05050a; box-shadow: 0 40px 100px -30px rgba(0,0,0,.8); }
@media (max-width: 900px) { .mr-stage { min-height: 300px; } }
.mr-mat { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Audio waveform card + audio-reactive canvas */
.ar2-wave { position: relative; height: 118px; border: 0.5px solid var(--line); border-radius: 8px; overflow: hidden; background: #06060c; }
.aw { position: absolute; inset: 0; }
/* The waveform canvas fills the whole box; the filename + time float over the
   top-left/right as an overlay (fixed light — the box is always dark), so the
   waveform uses the full height instead of a short middle band. */
.aw-wave { position: absolute; inset: 0; }
.aw-canvas { display: block; width: 100%; height: 100%; }
.aw-top { position: absolute; top: 9px; left: 12px; right: 12px; z-index: 2; display: flex; justify-content: space-between; align-items: center; font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,.55); text-shadow: 0 1px 6px #000; pointer-events: none; }
.aw-file { color: rgba(255,255,255,.82); }
.ar { position: absolute; inset: 0; overflow: hidden; }
.ar-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ar-top { position: absolute; top: 10px; left: 12px; right: 12px; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
/* These overlays sit on the always-dark reactive stage, so they keep fixed
   light colours in both themes (theme tokens would flip dark and vanish). */
.ar-src { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; color: rgba(255,255,255,.7); text-shadow: 0 1px 6px #000; }
.ar-listen { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border-radius: 999px; border: 0.5px solid rgba(255,255,255,.22); background: rgba(6,6,10,.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: rgba(255,255,255,.72); cursor: pointer; transition: color 0.2s, border-color 0.2s, background 0.2s; }
.ar-listen:hover { color: #fff; border-color: rgba(255,255,255,.5); }
.ar-listen.on { color: var(--accent); border-color: color-mix(in oklab, var(--accent) 55%, transparent); background: color-mix(in oklab, var(--accent) 14%, rgba(6,6,10,.55)); }
.ar-listen svg { display: block; width: 15px; height: 15px; }
.ar-tag { position: absolute; bottom: 9px; left: 12px; z-index: 2; font-family: var(--mono); font-size: 9px; letter-spacing: 0.06em; color: rgba(255,255,255,.55); text-shadow: 0 1px 6px #000; }

/* Audio modulator */
.am-scope { border: 0.5px solid var(--line); border-radius: 8px; overflow: hidden; background: #0a0a0e; height: 104px; }
.am-scope.spectrum .am-scope-canvas { cursor: ew-resize; touch-action: none; }
.am-scope-canvas { display: block; width: 100%; height: 100%; }
.am-row { display: flex; align-items: flex-end; gap: 20px 22px; flex-wrap: wrap; }
.am-ctl { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.am-lbl { font-family: var(--mono); font-size: 8px; letter-spacing: 0.08em; color: var(--fg); white-space: nowrap; }
.am-dial { width: 32px; height: 32px; }
.am-dial.live { cursor: ns-resize; touch-action: none; -webkit-user-select: none; user-select: none; }
/* VS-style toggle/selector button: dark + thin border when idle, solid amber
   with dark text when it holds an active value (matches the VS interface). */
.am-gate { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; color: var(--fg-dim); background: #141418; border: 1px solid rgba(255,255,255,.14); border-radius: 5px; padding: 9px 12px; cursor: pointer; transition: color 0.15s, border-color 0.15s, background 0.15s; }
.am-gate:hover { color: var(--fg); border-color: rgba(255,255,255,.28); }
.am-gate.on { color: #05050a; background: #e6b84b; border-color: #e6b84b; box-shadow: 0 0 10px -2px rgba(230,184,75,.5); }
.am-input { flex: 1; align-items: stretch; min-width: 104px; }
.am-drop { display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid rgba(112,134,207,.5); border-radius: 5px; padding: 9px 10px; font-family: var(--mono); font-size: 10px; color: #cfd6f0; letter-spacing: 0.06em; }
.am-drop i { font-style: normal; color: #7086cf; }
.am-panel { position: relative; }
.am-out { position: absolute; top: 14px; bottom: 14px; right: 6px; width: 2px; border-radius: 1px; background: rgba(255,255,255,.07); overflow: hidden; }
.am-out-fill { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: #e6b84b; box-shadow: 0 0 6px rgba(230,184,75,.6); }

/* LFO */
.lfo-panel { flex: 1; }
.lfo-scope { flex: 1; min-height: 150px; border: 0.5px solid var(--line); border-radius: 8px; overflow: hidden; background: #0a0a0e; }
.lfo-scope-svg { display: block; width: 100%; height: 100%; }
.lfo-box { border: 1px solid rgba(255,255,255,.14); border-radius: 5px; padding: 8px 10px; font-family: var(--mono); font-size: 10px; color: var(--fg-dim); background: #141418; letter-spacing: 0.06em; cursor: pointer; min-width: 46px; text-align: center; transition: color 0.15s, border-color 0.15s, background 0.15s; }
.lfo-box:hover { color: var(--fg); border-color: rgba(255,255,255,.28); }
.lfo-box.on { color: #05050a; background: #e6b84b; border-color: #e6b84b; box-shadow: 0 0 10px -2px rgba(230,184,75,.5); }

/* Polyphonic voices */
.pv-demo { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 16px; }
@media (max-width: 900px) { .pv-demo { grid-template-columns: 1fr; } }
.pv-panel { border: 0.5px solid var(--line-strong); border-radius: 16px; overflow: hidden; background: var(--card, #0a0a12); display: flex; flex-direction: column; }
.pv-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 0.5px solid var(--line); font-family: var(--display); font-weight: 500; font-size: 14px; color: var(--fg); }
.pv-tag { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-faint); }
.pv-count { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; color: var(--fg-faint); }
.pv-count b { color: var(--accent); font-weight: 500; font-size: 13px; }
.pv-canvas { display: block; width: 100%; height: 300px; }
@media (max-width: 900px) { .pv-canvas { height: 240px; } }
.pv-editable { cursor: crosshair; touch-action: none; }
.pv-foot { padding: 11px 18px; border-top: 0.5px solid var(--line); font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-faint); }

/* Modulation matrix */
.mm-demo { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 16px; align-items: stretch; }
@media (max-width: 900px) { .mm-demo { grid-template-columns: 1fr; } }
.mm-left { display: flex; flex-direction: column; gap: 16px; }
.mm-panel { border: 0.5px solid var(--line-strong); border-radius: 16px; background: var(--card, #0a0a12); overflow: hidden; }
.mm-matrix { padding: 18px 20px; }
.mm-grid { display: grid; grid-template-columns: 1.1fr 1fr 1fr 1fr; gap: 10px 12px; align-items: center; }
.mm-corner { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-faint); }
.mm-colh { font-family: var(--display); font-weight: 600; font-size: 13px; letter-spacing: 0.02em; text-align: center; padding-bottom: 8px; border-bottom: 0.5px solid var(--line); }
.mm-rowh { font-family: var(--display); font-weight: 500; font-size: 15px; color: var(--fg); }
.mm-cell { position: relative; height: 46px; border-radius: 9px; border: 0.5px solid var(--line); background: #06060c; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; transition: border-color 0.2s, box-shadow 0.2s; cursor: ns-resize; -webkit-user-select: none; user-select: none; touch-action: none; }
.mm-cell:hover { border-color: var(--line-strong); }
.mm-cell.on { border-color: color-mix(in oklab, var(--fg) 22%, var(--line)); }
.mm-cell.grab { cursor: grabbing; }
.mm-track { position: relative; width: 76%; height: 5px; border-radius: 3px; background: rgba(255,255,255,.08); }
.mm-mid { position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: rgba(255,255,255,.25); }
.mm-fill { position: absolute; top: 0; bottom: 0; border-radius: 3px; }
.mm-amt { font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em; }
.mm-hint { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-faint); }
.mm-foot2 { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
.mm-clear { font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-dim); background: #141418; border: 1px solid rgba(255,255,255,.14); border-radius: 5px; padding: 6px 11px; cursor: pointer; white-space: nowrap; transition: color 0.15s, border-color 0.15s; }
.mm-clear:hover { color: var(--fg); border-color: rgba(255,255,255,.28); }
.mm-scopes { display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: 16px 18px; }
.mm-scope { display: flex; flex-direction: column; gap: 7px; }
.mm-scope-h { display: flex; align-items: center; justify-content: space-between; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-faint); }
.mm-scope-svg { display: block; width: 100%; height: 58px; background: #06060c; border: 0.5px solid var(--line); border-radius: 8px; }
.mm-trig { font-family: var(--mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: #05050a; background: #3effb1; border: none; border-radius: 999px; padding: 5px 12px; cursor: pointer; transition: transform 0.12s ease, filter 0.2s ease; }
.mm-trig:hover { filter: brightness(1.08); }
.mm-trig:active { transform: scale(.94); }
.mm-right { display: flex; }
.mm-stage { position: relative; flex: 1; min-height: 360px; border: 0.5px solid var(--line-strong); border-radius: 16px; overflow: hidden; background: #05050a; box-shadow: 0 40px 100px -30px rgba(0,0,0,.8); }
@media (max-width: 900px) { .mm-stage { min-height: 300px; } }
.mm-mat-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Overlays the always-dark modulation stage, so keep a fixed light colour in
   both themes (var(--fg-faint) flips dark in light mode and disappears). */
.mm-tag { position: absolute; bottom: 12px; left: 14px; z-index: 2; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,.6); text-shadow: 0 1px 6px #000; }

/* Modulation sources panel (the "layers/modular" mosaic card is not used;
 * the panel appears in the modulation section left column if needed) */
.mod { position: relative; display: flex; flex-direction: column; background: #0a0a0e; font-family: var(--mono); border-radius: 12px; overflow: hidden; }
.mod-title { display: flex; align-items: center; justify-content: space-between; padding: 9px 14px; font-size: 11px; letter-spacing: 0.14em; color: #7086cf; border-bottom: 0.5px solid rgba(255,255,255,.08); }
.mod-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 8px 8px 0; }
.mod-tab { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 4px; background: #141418; border: 0.5px solid rgba(255,255,255,.06); border-radius: 5px 5px 0 0; cursor: pointer; transition: background 0.18s; }
.mod-tab.on { background: #26262e; }
.mod-tab .mod-tico { width: 24px; height: 15px; color: #e8e4dc; }
.mod-tab span { font-size: 11px; letter-spacing: 0.1em; color: #e6b84b; }
.mod-graphs { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 10px 12px 6px; }
.mod-graphs.two { grid-template-columns: 1fr 1fr; }
.mod-graph { background: #050506; border: 0.5px solid rgba(255,255,255,.06); border-radius: 3px; height: 118px; overflow: hidden; position: relative; }
.mod-graph-svg { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); }
.mod-insts { display: flex; gap: 2px; padding: 0 8px 8px; }
.mod-inst { flex: 1; padding: 7px 0; background: #141418; border: 0.5px solid rgba(255,255,255,.06); border-radius: 0 0 5px 5px; color: rgba(255,255,255,.45); font-family: var(--mono); font-size: 11px; cursor: pointer; transition: background 0.18s, color 0.18s; }
.mod-inst.on { background: #3a3a44; color: #f4f1ea; }

/* Pricing now uses the shared +pricing component (.pcol / .pricing-grid /
 * .demo-banner / .split-edu / .upgrade-banner) styled in style.css — no VS
 * pricing overrides here. */

/* ============================================================
 * Standardized-section per-page tweaks
 * ============================================================ */
/* Requirements — 4-up border logic (shared .req-grid / .req base) */
.req-grid .req:nth-child(4n) { border-right: 0; }
.req-grid .req:nth-last-child(-n+4) { border-bottom: 0; }
@media (max-width: 900px) { .req-grid .req:nth-child(odd) { border-right: 0.5px solid var(--line); } }
/* FAQ uses the shared single-column .faq-grid (no VS override) — same as every
   other product. */

/* ============================================================
 * Light-theme card reskins for the ported components
 * ============================================================ */
:root[data-theme="light"] .feat,
:root[data-theme="light"] .wcard,
:root[data-theme="light"] .daws-vis,
:root[data-theme="light"] .shv-knobs,
:root[data-theme="light"] .mr-panel,
:root[data-theme="light"] .pv-panel,
:root[data-theme="light"] .mm-panel,
:root[data-theme="light"] .split-edu .sblock { background: var(--card) !important; }
:root[data-theme="light"] .split-edu .sblock.warm { background: var(--accent) !important; border-color: var(--accent) !important; }

/* ============================================================
 * Reduced motion — the hero HUD pulse is decorative; vs.js already
 * skips rAF loops. Kill the CSS pulse too.
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .hud-dot { animation: none; }
  .shv-render { transition: none; }
}