/* ==========================================================================
   Pulsar Styles
   1984 CRT Aesthetic - RGB phosphor glow, scanlines, true black
   ========================================================================== */

/* --------------------------------------------------------------------------
   Design Tokens - CRT Theme
   -------------------------------------------------------------------------- */
:root {
  /* ==========================================================================
     TIER 1: PRIMITIVES - Raw values, foundation tokens
     ========================================================================== */

  /* --- Colors: Grays --- */
  --ps-gray-000: #000000;
  --ps-gray-050: #050505;
  --ps-gray-100: #0a0a0a;
  --ps-gray-200: #1a1a1a;
  --ps-gray-300: #333333;
  --ps-gray-400: #666666;
  --ps-gray-500: #888888;
  --ps-gray-600: #afafaf;
  --ps-gray-700: #cccccc;
  --ps-gray-800: #e0e0e0;
  --ps-gray-900: #ffffff;

  /* --- Colors: Cyan family --- */
  --ps-cyan-500: #00cccc;
  --ps-cyan-700: #00ffff;
  --ps-cyan-900: #a0f0ff;

  /* --- Colors: Blue family --- */
  --ps-blue-300: #0033ff;
  --ps-blue-500: #0066ff;
  --ps-blue-700: #00aaff;

  /* --- Colors: Pink family --- */
  --ps-pink-500: #ff0088;
  --ps-pink-700: #ff44aa;

  /* --- Colors: Orange family --- */
  --ps-orange-500: #ff6600;
  --ps-orange-700: #ffaa00;

  /* --- Colors: Red family --- */
  --ps-red-500: #ff3333;
  --ps-red-700: #ff4422;

  /* --- Colors: Purple family --- */
  --ps-purple-500: #8844ff;

  /* --- Colors: Green family (Matrix) --- */
  --ps-green-500: #008f11;
  --ps-green-700: #00bb30;
  --ps-green-900: #00ff41;

  /* --- Spacing Primitives --- */
  --ps-space-4: 4px;
  --ps-space-8: 8px;
  --ps-space-12: 12px;
  --ps-space-16: 16px;
  --ps-space-24: 24px;

  /* --- Sizing Primitives --- */
  --ps-size-20: 20px;
  --ps-size-32: 32px;
  --ps-size-44: 44px;
  --ps-size-56: 56px;

  /* --- Border Radius Primitives --- */
  --ps-radius-2: 2px;
  --ps-radius-4: 4px;

  /* --- Timing Primitives --- */
  --ps-duration-fast: 0.15s;
  --ps-easing-default: ease;

  /* --- Opacity Primitives --- */
  --ps-opacity-08: 0.08;
  --ps-opacity-15: 0.15;
  --ps-opacity-50: 0.5;
  --ps-opacity-60: 0.6;
  --ps-opacity-85: 0.85;
  --ps-opacity-90: 0.9;

  /* ==========================================================================
     TIER 2: SEMANTIC TOKENS (Default: Synthwave)
     ========================================================================== */

  /* CRT Effect Controls - Configurable */
  --crt-scanline-opacity: 0.15;
  --crt-scanline-spacing: 4px;
  --crt-glow-intensity: 1; /* Bloom multiplier (0-2) */
  --crt-rgb-separation: 0.8px; /* Chromatic aberration offset (0 = disabled) */
  --crt-vignette-intensity: 0.35;

  /* Colors - CRT palette */
  --ps-bg: #000000; /* True black */
  --ps-bg-elevated: #0a0a0a; /* Near black */
  --ps-bg-panel: #050505; /* Panel background */
  --ps-text: #cccccc; /* CRT gray-white */
  --ps-text-muted: #666666; /* Dimmed text */
  --ps-text-bright: #ffffff; /* Bright white */
  /* Accent colors - derived from row palette */
  /* accent: row-0 (cyan), accent-warm: row-19 (gold) */
  --ps-accent: #00ffff;
  --ps-accent-dim: rgba(0, 255, 255, 0.15);
  --ps-accent-warm: #ff9900;
  --ps-accent-warm-dim: rgba(255, 153, 0, 0.2);
  --ps-error: #ff3333;
  --ps-border: #1a1a1a; /* Subtle border */
  --ps-border-bright: #333333; /* Visible border */

  /* Grid colors */
  --ps-cell-dead: rgba(35, 35, 35, 0.8);
  --ps-grid-line: rgba(40, 40, 40, 0.5);
  --ps-playhead: rgba(224, 224, 224, 0.08);

  /* Cell rendering */
  --ps-cell-empty: #0a0a0a;
  --ps-cell-border: rgba(50, 50, 50, 0.3);

  /* Chromatic aberration (synthwave CRT effect) - base colors without alpha */
  --ps-chroma-magenta: #ff0088;
  --ps-chroma-cyan: #00ffff;

  /* Minimap */
  --ps-minimap-stroke: rgba(255, 255, 255, 0.8);
  --ps-minimap-playhead: rgba(255, 255, 255, 0.5);

  /* Background gradient (vignette center) */
  --ps-bg-gradient: #0a0012;

  /* Playhead default colors (white/neutral) */
  --ps-playhead-default: #e0e0e0;
  --ps-playhead-core: #ffffff;
  --ps-playhead-glow: rgba(224, 224, 224, 0.2);

  /* Row colors - Type-based system */
  /* Melody rows (0-11): Cyan → Blue gradient (dramatic shift) */
  --ps-row-0: #00ffff; /* E4 - Electric cyan */
  --ps-row-1: #00e8ff; /* D4 */
  --ps-row-2: #00d0ff; /* C4 */
  --ps-row-3: #00b8ff; /* B3 - Sky blue */
  --ps-row-4: #00a0ff; /* A3 */
  --ps-row-5: #0088ff; /* G3 */
  --ps-row-6: #0070ff; /* F3 - Azure */
  --ps-row-7: #0058ff; /* E3 */
  --ps-row-8: #0044ff; /* D3 */
  --ps-row-9: #0033ff; /* C3 - Royal blue */
  --ps-row-10: #0022ff; /* B2 */
  --ps-row-11: #0011ff; /* A2 - Deep blue */
  /* Bass + Drums (rows 12-19): Purple → Gold gradient */
  --ps-row-12: #8844ff; /* Bass - Purple (transition from blue) */
  --ps-row-13: #aa22ff; /* Reese - Bright magenta */
  --ps-row-14: #cc00dd; /* Kick - Magenta-pink */
  --ps-row-15: #ee0099; /* Snare - Hot pink */
  --ps-row-16: #ff0055; /* Hi-hat - Red-pink */
  --ps-row-17: #ff3311; /* Open Hi-hat - Red-orange */
  --ps-row-18: #ff6600; /* Clap - Orange */
  --ps-row-19: #ff9900; /* Tom - Gold */

  /* Typography - Synthwave retro style */
  --ps-font: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
  --ps-font-display: 'Share Tech Mono', 'SF Mono', monospace;
  --ps-font-size-xs: 0.625rem;
  --ps-font-size-sm: 0.75rem;
  --ps-font-size-base: 0.875rem;

  /* Spacing */
  --ps-space-1: 4px;
  --ps-space-2: 8px;
  --ps-space-3: 12px;
  --ps-space-4: 16px;
  --ps-space-6: 24px;

  /* Sizing */
  --ps-toolbar-height: 56px;
  --ps-row-label-width: 32px;
  --ps-cell-size: 20px;

  /* Border radius - slightly rounded for CRT softness */
  --ps-radius: 4px;
  --ps-radius-sm: 2px;
  --ps-transition: 0.15s ease;

  /* Glow effects - Synthwave neon with chromatic aberration */
  --ps-glow-accent:
    calc(-1 * var(--crt-rgb-separation)) 0 0 rgba(255, 0, 136, 0.2),
    var(--crt-rgb-separation) 0 0 rgba(0, 255, 255, 0.25),
    0 0 calc(12px * var(--crt-glow-intensity)) rgba(0, 255, 255, 0.4),
    0 0 calc(24px * var(--crt-glow-intensity)) rgba(0, 212, 255, 0.2);
  --ps-glow-warm:
    calc(-1 * var(--crt-rgb-separation)) 0 0 rgba(255, 0, 68, 0.2),
    var(--crt-rgb-separation) 0 0 rgba(255, 0, 136, 0.2),
    0 0 calc(12px * var(--crt-glow-intensity)) rgba(255, 0, 136, 0.5),
    0 0 calc(24px * var(--crt-glow-intensity)) rgba(255, 0, 136, 0.25);
  --ps-glow-text:
    calc(-1 * var(--crt-rgb-separation)) 0 0 rgba(255, 0, 136, 0.15),
    var(--crt-rgb-separation) 0 0 rgba(0, 255, 255, 0.18),
    0 0 calc(8px * var(--crt-glow-intensity)) rgba(0, 255, 255, 0.5);
  --ps-glow-white:
    0 0 calc(10px * var(--crt-glow-intensity)) rgba(255, 255, 255, 0.8),
    0 0 calc(20px * var(--crt-glow-intensity)) rgba(255, 255, 255, 0.5),
    0 0 calc(30px * var(--crt-glow-intensity)) rgba(255, 255, 255, 0.3);
  --ps-glow-white-strong:
    0 0 calc(10px * var(--crt-glow-intensity)) rgba(255, 255, 255, 1),
    0 0 calc(25px * var(--crt-glow-intensity)) rgba(255, 255, 255, 0.8),
    0 0 calc(40px * var(--crt-glow-intensity)) rgba(255, 255, 255, 0.5);
  --ps-glow-white-box:
    0 0 calc(15px * var(--crt-glow-intensity)) rgba(255, 255, 255, 0.5),
    0 0 calc(30px * var(--crt-glow-intensity)) rgba(255, 255, 255, 0.25);

  /* Button Design System */
  --ps-btn-size: 44px; /* Uniform button size */
  --ps-btn-icon-size: 1.25rem; /* Icon font size */

  /* Icon button colors (toolbar icons) */
  --ps-btn-icon: rgba(255, 255, 255, 0.6); /* Default icon button */
  --ps-btn-icon-hover: rgba(255, 255, 255, 0.9); /* Icon button hover */
  --ps-btn-icon-active: var(--ps-text-bright); /* References --ps-text-bright (#ffffff) */

  /* Outline button colors (text buttons with borders) */
  --ps-btn-outline: rgba(255, 255, 255, 0.5); /* Standard outline button border/text */
  --ps-btn-outline-hover: var(--ps-btn-icon-hover); /* Reuse icon hover for consistency */

  /* Accent hierarchy - derived from row palette */
  /* secondary: emphasis/titles (magenta-pink, row-14), tertiary: subtle states (purple, row-12) */
  --ps-accent-secondary: #cc00dd;
  --ps-accent-tertiary: #8844ff;

  /* Freeze state - distinct ice blue (not from row palette) */
  --ps-ice: #a0f0ff;

  /* Overlay/backdrop */
  --ps-backdrop: rgba(0, 0, 0, 0.85); /* Modal/menu backdrop */
  --ps-backdrop-light: rgba(0, 0, 0, 0.5); /* Lighter overlay (shadows) */

  /* Z-index */
  --ps-z-canvas: 1;
  --ps-z-labels: 10;
  --ps-z-toolbar: 100;
  --ps-z-backdrop: 150;
  --ps-z-menu: 200;

  /* --- Highlight (most attention-grabbing color per theme) --- */
  --ps-highlight: var(--ps-cyan-700);

  /* --- Cell State Semantics (Game of Life specific) --- */
  /* Birth/death colors are distinct from cell row colors across all themes */
  --ps-state-born: #ffee00; /* Bright yellow - distinct from all cell colors */
  --ps-state-dying: #ff2244; /* Bright red - universal "death" color */
  --ps-state-alive: var(--ps-accent);

  /* ==========================================================================
     TIER 3: COMPONENT TOKENS
     ========================================================================== */

  /* WTF Dialog cell states - aliases to state semantics */
  --wtf-born: var(--ps-state-born);
  --wtf-dying: var(--ps-state-dying);
  --wtf-alive: var(--ps-state-alive);
}

/* --------------------------------------------------------------------------
   Theme: Vaporwave - Saturated pink/cyan/purple, retro aesthetic
   -------------------------------------------------------------------------- */
.theme-vaporwave {
  /* Disable chromatic aberration (0px) - pastels get washed out by pink/cyan ghosts */
  --crt-rgb-separation: 0px;
  --crt-glow-intensity: 1; /* Standard bloom for vibrant pastels */

  /* Row colors - Intense lavender → cyan gradient (high saturation) */
  --ps-row-0: #e085ff; /* Intense lavender */
  --ps-row-1: #db8afc;
  --ps-row-2: #d590f8;
  --ps-row-3: #cf96f4;
  --ps-row-4: #c89cf0;
  --ps-row-5: #c0a5eb;
  --ps-row-6: #b5b2e5;
  --ps-row-7: #a5c5de;
  --ps-row-8: #90d8d8;
  --ps-row-9: #75e5dd;
  --ps-row-10: #5af0e5;
  --ps-row-11: #40f8e8; /* Intense cyan */
  /* Bass + Drums (rows 12-19): Purple → Warm gold gradient */
  --ps-row-12: #b850d0; /* Bass - Intense purple */
  --ps-row-13: #d040b8; /* Reese - Purple-magenta */
  --ps-row-14: #e535a0; /* Kick - Magenta-pink */
  --ps-row-15: #f53088; /* Snare - Hot pink */
  --ps-row-16: #ff4070; /* Hi-hat - Coral-pink */
  --ps-row-17: #ff5858; /* Open Hi-hat - Coral */
  --ps-row-18: #ff7545; /* Clap - Coral-orange */
  --ps-row-19: #ff9535; /* Tom - Warm gold */

  /* Background - warm black (not pure black or purple) */
  --ps-bg: #0e0b14;
  --ps-bg-elevated: #1b1626;
  --ps-bg-panel: #161220;

  /* Accent hierarchy - derived from row palette */
  /* accent: lavender (row-0), secondary: magenta-pink (row-14), tertiary: cyan (row-11) */
  --ps-accent: #e085ff;
  --ps-accent-secondary: #e535a0;
  --ps-accent-tertiary: #40f8e8;
  --ps-accent-warm: #ff9535;
  --ps-ice: #80ffff;

  /* Highlight and cell state semantics */
  --ps-highlight: #e085ff; /* Lavender - theme's most attention-grabbing */
  --ps-state-born: #ffee00; /* Bright yellow - distinct from all cell colors */
  --ps-state-dying: #ff2244; /* Bright red - universal "death" color */
  --ps-state-alive: var(--ps-accent);

  /* Glow effects - intense bloom */
  --ps-glow-accent:
    0 0 calc(10px * var(--crt-glow-intensity)) rgba(224, 133, 255, 0.6),
    0 0 calc(20px * var(--crt-glow-intensity)) rgba(64, 248, 232, 0.4);
  --ps-glow-warm:
    0 0 calc(10px * var(--crt-glow-intensity)) rgba(255, 149, 53, 0.6),
    0 0 calc(20px * var(--crt-glow-intensity)) rgba(229, 53, 160, 0.4);
  --ps-glow-text: 0 0 calc(8px * var(--crt-glow-intensity)) rgba(224, 133, 255, 0.7);

  /* Background gradient (vaporwave purple tint) */
  --ps-bg-gradient: #1a0a20;
}

/* --------------------------------------------------------------------------
   Theme: Monochrome - High contrast grayscale
   -------------------------------------------------------------------------- */
.theme-monochrome {
  /* Disable chromatic aberration for clean look */
  --crt-rgb-separation: 0px;
  --crt-glow-intensity: 0.8;

  /* Row colors - Smooth white → medium gray gradient (20 steps) */
  --ps-row-0: #ffffff; /* E4 - White */
  --ps-row-1: #f7f7f7; /* D4 */
  --ps-row-2: #f0f0f0; /* C4 */
  --ps-row-3: #e8e8e8; /* B3 */
  --ps-row-4: #e0e0e0; /* A3 */
  --ps-row-5: #d9d9d9; /* G3 */
  --ps-row-6: #d1d1d1; /* F3 */
  --ps-row-7: #c9c9c9; /* E3 */
  --ps-row-8: #c2c2c2; /* D3 */
  --ps-row-9: #bababa; /* C3 */
  --ps-row-10: #b2b2b2; /* B2 */
  --ps-row-11: #aaaaaa; /* A2 */
  --ps-row-12: #a3a3a3; /* Bass */
  --ps-row-13: #9b9b9b; /* Reese */
  --ps-row-14: #939393; /* Kick */
  --ps-row-15: #8c8c8c; /* Snare */
  --ps-row-16: #848484; /* Hi-hat */
  --ps-row-17: #7c7c7c; /* Open Hi-hat */
  --ps-row-18: #757575; /* Clap */
  --ps-row-19: #6d6d6d; /* Tom - medium gray */

  /* Background - Pure black */
  --ps-bg: #000000;
  --ps-bg-elevated: #0a0a0a;
  --ps-bg-panel: #050505;

  /* Accent hierarchy - derived from row palette (grayscale) */
  /* accent: white (row-0), secondary: white, tertiary: gray (row-3) */
  --ps-text: #e0e0e0;
  --ps-accent: #ffffff;
  --ps-accent-secondary: #ffffff;
  --ps-accent-tertiary: #d7d7d7;
  --ps-accent-warm: #afafaf;
  --ps-ice: #e0e0e0;

  /* Highlight and cell state semantics */
  --ps-highlight: #ffffff; /* White - brightest in grayscale */
  --ps-state-born: #ffee00; /* Bright yellow - distinct from all cell colors */
  --ps-state-dying: #ff2244; /* Bright red - universal "death" color */
  --ps-state-alive: var(--ps-accent-warm); /* Gray - differentiated from born */

  /* Glow effects - White only, no color split */
  --ps-glow-accent:
    0 0 calc(10px * var(--crt-glow-intensity)) rgba(255, 255, 255, 0.5),
    0 0 calc(20px * var(--crt-glow-intensity)) rgba(255, 255, 255, 0.25);
  --ps-glow-warm:
    0 0 calc(10px * var(--crt-glow-intensity)) rgba(255, 255, 255, 0.5),
    0 0 calc(20px * var(--crt-glow-intensity)) rgba(255, 255, 255, 0.25);
  --ps-glow-text: 0 0 calc(8px * var(--crt-glow-intensity)) rgba(255, 255, 255, 0.6);

  /* Background gradient (neutral dark) */
  --ps-bg-gradient: #050505;
}

/* --------------------------------------------------------------------------
   Theme: Matrix - Green phosphor terminal aesthetic
   -------------------------------------------------------------------------- */
.theme-matrix {
  /* Enhanced scanlines for terminal feel */
  --crt-scanline-opacity: 0.18;
  --crt-glow-intensity: 1.2;
  /* Disable chromatic aberration - pure green only */
  --crt-rgb-separation: 0px;

  /* Row colors - Smooth 20-step gradient using authentic Matrix colors */
  /* #00FF41 (row 0) → #006B0A (row 19) - visible green throughout */
  --ps-row-0: #00ff41; /* Malachite - brightest */
  --ps-row-1: #00f73e;
  --ps-row-2: #00ef3b;
  --ps-row-3: #00e838;
  --ps-row-4: #00e035;
  --ps-row-5: #00d833;
  --ps-row-6: #00d030;
  --ps-row-7: #00c92d;
  --ps-row-8: #00c12a;
  --ps-row-9: #00b927;
  --ps-row-10: #00b124;
  --ps-row-11: #00a921;
  --ps-row-12: #00a21e; /* Bass */
  --ps-row-13: #009a1b; /* Reese */
  --ps-row-14: #009219; /* Kick */
  --ps-row-15: #008a16; /* Snare */
  --ps-row-16: #008313; /* Hi-hat */
  --ps-row-17: #007b10; /* Open Hi-hat */
  --ps-row-18: #00730d; /* Clap */
  --ps-row-19: #006b0a; /* Tom - dark green */

  /* Background - Vampire Black (authentic Matrix CRT) */
  --ps-bg: #0d0208;
  --ps-bg-elevated: #0d0208;
  --ps-bg-panel: #0a0106;

  /* Accent hierarchy - derived from row palette (green gradient) */
  /* accent: brightest (row-0), secondary: same, tertiary: dimmer (row-4) */
  --ps-text: #00bb30;
  --ps-text-muted: #006618;
  --ps-text-bright: #00ff41;
  --ps-accent: #00ff41;
  --ps-accent-secondary: #00ff41;
  --ps-accent-tertiary: #00c729;
  --ps-accent-warm: #00c729;
  --ps-ice: #80ffaa;
  --ps-border: #003b00;
  --ps-border-bright: #005a08;

  /* Highlight and cell state semantics */
  --ps-highlight: #ffffff; /* White - stands out in all-green */
  --ps-state-born: #ffee00; /* Bright yellow - distinct from all cell colors */
  --ps-state-dying: #ff2244; /* Bright red - universal "death" color */
  --ps-state-alive: var(--ps-accent);

  /* Glow effects - Malachite phosphor glow */
  --ps-glow-accent:
    0 0 calc(8px * var(--crt-glow-intensity)) rgba(0, 255, 65, 0.6),
    0 0 calc(16px * var(--crt-glow-intensity)) rgba(0, 255, 65, 0.3),
    0 0 calc(32px * var(--crt-glow-intensity)) rgba(0, 255, 65, 0.15);
  --ps-glow-warm:
    0 0 calc(8px * var(--crt-glow-intensity)) rgba(0, 255, 65, 0.6),
    0 0 calc(16px * var(--crt-glow-intensity)) rgba(0, 255, 65, 0.3);
  --ps-glow-text:
    0 0 calc(6px * var(--crt-glow-intensity)) rgba(0, 255, 65, 0.8),
    0 0 calc(12px * var(--crt-glow-intensity)) rgba(0, 255, 65, 0.4);

  /* Cell rendering (Matrix dark green) */
  --ps-cell-empty: #0d0208;

  /* Background gradient (Matrix vampire black) */
  --ps-bg-gradient: #0d0208;
}

/* ==========================================================================
   LIGHT MODE THEMES
   ========================================================================== */

/* --------------------------------------------------------------------------
   Light Mode Base - Shared by Neumorphic and Flat
   -------------------------------------------------------------------------- */
.mode-light {
  /* Disable CRT effects completely */
  --crt-scanline-opacity: 0;
  --crt-scanline-spacing: 0;
  --crt-glow-intensity: 0;
  --crt-rgb-separation: 0px;
  --crt-vignette-intensity: 0;

  /* Background - Soft gray neumorphic base */
  --ps-bg: #e0e5ec;
  --ps-bg-elevated: #ffffff;
  --ps-bg-panel: #e8ecf2;
  --ps-bg-gradient: #e0e5ec;

  /* Text - Dark for contrast */
  --ps-text: #5a6a7a;
  --ps-text-muted: #8e9aaf;
  --ps-text-bright: #2d3748;

  /* Borders */
  --ps-border: #d1d9e6;
  --ps-border-bright: #b8c4d4;

  /* Cell rendering */
  --ps-cell-empty: #d5dbe5;
  --ps-cell-border: rgba(163, 177, 198, 0.4);

  /* Chromatic aberration disabled in light mode */
  --ps-chroma-magenta: transparent;
  --ps-chroma-cyan: transparent;

  /* Minimap */
  --ps-minimap-stroke: rgba(45, 55, 72, 0.8);
  --ps-minimap-playhead: rgba(45, 55, 72, 0.5);

  /* Playhead colors */
  --ps-playhead-default: #5a6a7a;
  --ps-playhead-core: #2d3748;
  --ps-playhead-glow: rgba(90, 106, 122, 0.2);

  /* Accent - Soft blue that works on light */
  --ps-accent: #4a90d9;
  --ps-accent-dim: rgba(74, 144, 217, 0.15);
  --ps-accent-secondary: #7b68ee;
  --ps-accent-tertiary: #40a0f0;
  --ps-accent-warm: #f5a623;
  --ps-accent-warm-dim: rgba(245, 166, 35, 0.15);
  --ps-ice: #60c5e8;
  --ps-highlight: #4a90d9;

  /* Cell state semantics - Keep distinct for visibility */
  --ps-state-born: #ffd700;
  --ps-state-dying: #ff6b6b;
  --ps-state-alive: var(--ps-accent);

  /* Grid colors */
  --ps-cell-dead: rgba(180, 190, 210, 0.6);
  --ps-grid-line: rgba(163, 177, 198, 0.3);
  --ps-playhead: rgba(74, 144, 217, 0.1);

  /* Backdrop */
  --ps-backdrop: rgba(0, 0, 0, 0.3);
  --ps-backdrop-light: rgba(0, 0, 0, 0.1);

  /* Button colors - Darker for light bg */
  --ps-btn-icon: #6b7a8c;
  --ps-btn-icon-hover: #4a5568;
  --ps-btn-icon-active: #2d3748;
  --ps-btn-outline: rgba(45, 55, 72, 0.5);
  --ps-btn-outline-hover: rgba(45, 55, 72, 0.8);

  /* Typography - Friendly rounded font */
  --ps-font-display: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Glow effects - Soft, warm glows for light mode */
  --ps-glow-accent: 0 0 12px rgba(74, 144, 217, 0.3), 0 0 24px rgba(74, 144, 217, 0.15);
  --ps-glow-warm: 0 0 12px rgba(245, 166, 35, 0.3), 0 0 24px rgba(245, 166, 35, 0.15);
  --ps-glow-text: 0 0 8px rgba(74, 144, 217, 0.4);
  --ps-glow-white: none;
  --ps-glow-white-strong: none;
  --ps-glow-white-box: none;

  /* WTF Dialog cells */
  --wtf-born: var(--ps-state-born);
  --wtf-dying: var(--ps-state-dying);
  --wtf-alive: var(--ps-state-alive);
}

/* Hide CRT effects in light mode */
.mode-light::before,
.mode-light::after {
  display: none !important;
}

/* Light mode body gets soft gradient */
.mode-light body {
  background: var(--ps-bg);
}

/* Light mode toolbar - flexible spacing for comfortable button layout */
.mode-light .toolbar {
  gap: clamp(16px, 4vw, 40px);
}

@media (max-width: 639px) {
  .mode-light .toolbar {
    gap: clamp(12px, 3vw, 24px);
  }
}

/* --------------------------------------------------------------------------
   Theme: Neumorphic - Soft shadows, embossed cells, warm glow
   -------------------------------------------------------------------------- */
.mode-light.theme-neumorphic {
  /* Neumorphic shadow primitives - flatter, more subtle */

  /* Cell socket gradient ring (creates inset 3D effect) */
  --neu-socket-gradient-start: rgba(163, 177, 198, 0.35);
  --neu-socket-gradient-mid: rgba(200, 210, 220, 0.1);
  --neu-socket-gradient-end: rgba(255, 255, 255, 0.5);

  /* Raised element shadows - reduced offset and blur for flatter appearance */
  --neu-shadow-raised:
    -3px -3px 8px rgba(255, 255, 255, 0.5), 3px 3px 8px rgba(163, 177, 198, 0.25);

  /* Inset/pressed shadows - subtler */
  --neu-shadow-inset:
    inset 2px 2px 4px rgba(163, 177, 198, 0.2), inset -2px -2px 4px rgba(255, 255, 255, 0.5);

  /* Pressed state (slightly more pronounced than inset) */
  --neu-shadow-pressed:
    inset 3px 3px 6px rgba(163, 177, 198, 0.25), inset -3px -3px 6px rgba(255, 255, 255, 0.5);

  /* Soft colored glow for active/hover states */
  --neu-glow-accent: 0 0 16px rgba(74, 144, 217, 0.35);
  --neu-glow-ice: 0 0 16px rgba(96, 197, 232, 0.4);

  /* Row colors - Rainbow spectrum top to bottom (red → purple) */
  --ps-row-0: #ff5555; /* Red */
  --ps-row-1: #ff6644; /* Red-orange */
  --ps-row-2: #ff8833; /* Orange */
  --ps-row-3: #ffaa22; /* Orange-yellow */
  --ps-row-4: #ffcc11; /* Yellow */
  --ps-row-5: #dddd22; /* Yellow-lime */
  --ps-row-6: #aadd33; /* Lime */
  --ps-row-7: #66dd55; /* Green */
  --ps-row-8: #44dd88; /* Green-teal */
  --ps-row-9: #44ddbb; /* Teal */
  --ps-row-10: #44dddd; /* Cyan */
  --ps-row-11: #44bbee; /* Cyan-blue */
  --ps-row-12: #4499ff; /* Light blue */
  --ps-row-13: #4477ff; /* Blue */
  --ps-row-14: #5555ff; /* Blue-indigo */
  --ps-row-15: #6644ff; /* Indigo */
  --ps-row-16: #7733ff; /* Indigo-purple */
  --ps-row-17: #8822ff; /* Purple */
  --ps-row-18: #9911ee; /* Purple-violet */
  --ps-row-19: #aa00dd; /* Violet */
}

/* Neumorphic button styles - normal 48px sizing */
.mode-light.theme-neumorphic .btn {
  width: 48px;
  height: 48px;
  padding: 0;
  box-sizing: border-box;
  background: var(--ps-bg);
  box-shadow: var(--neu-shadow-raised);
  transition:
    box-shadow 0.2s ease,
    transform 0.1s ease,
    color 0.15s ease;
}

.mode-light.theme-neumorphic .btn .material-symbols-rounded {
  font-size: 28px;
}

.mode-light.theme-neumorphic .btn:hover {
  color: var(--ps-btn-icon-active);
  box-shadow: var(--neu-shadow-raised), var(--neu-glow-accent);
}

.mode-light.theme-neumorphic .btn:active {
  box-shadow: var(--neu-shadow-pressed);
  transform: scale(0.98);
}

/* Active toggle state - inset with accent glow */
.mode-light.theme-neumorphic .btn.is-active {
  color: var(--ps-accent);
  box-shadow: var(--neu-shadow-inset), var(--neu-glow-accent);
}

/* Play button - Larger (56px) as hero element */
.mode-light.theme-neumorphic .btn--play {
  width: 56px;
  height: 56px;
  padding: 0;
}

.mode-light.theme-neumorphic .btn--play .material-symbols-rounded {
  font-size: 36px;
}

/* WTF button - Soft neumorphic pill (override base .btn sizing) */
.mode-light.theme-neumorphic .btn--wtf {
  width: auto;
  height: 32px;
  padding: 0 16px;
  box-sizing: border-box;
  background: var(--ps-bg);
  border: none;
  border-radius: 16px;
  box-shadow: var(--neu-shadow-raised);
}

.mode-light.theme-neumorphic .btn--wtf:hover {
  box-shadow: var(--neu-shadow-raised), var(--neu-glow-accent);
}

.mode-light.theme-neumorphic .btn--wtf:active {
  box-shadow: var(--neu-shadow-pressed);
}

/* Close button - simple, no neumorphic styling */
.mode-light.theme-neumorphic .btn--close {
  width: auto;
  height: auto;
  padding: 8px;
  box-sizing: border-box;
  background: transparent;
  box-shadow: none;
}

.mode-light.theme-neumorphic .btn--close:hover {
  box-shadow: none;
}

/* Menu button - same sizing as regular buttons */
.mode-light.theme-neumorphic .btn--menu {
  width: 48px;
  height: 48px;
  padding: 0;
}

/* Freeze button active - Ice blue glow effect */
.mode-light.theme-neumorphic .btn--freeze.is-active {
  color: var(--ps-ice);
  box-shadow: var(--neu-shadow-inset), var(--neu-glow-ice);
}

/* Menu panel - Soft floating sidebar */
.mode-light.theme-neumorphic .menu-panel {
  background: var(--ps-bg);
  box-shadow: -12px 0 32px rgba(163, 177, 198, 0.3);
}

/* Sliders - Softer track and glowing thumb */
.mode-light.theme-neumorphic .slider {
  background: var(--ps-border);
  box-shadow: var(--neu-shadow-inset);
  border-radius: 6px;
}

.mode-light.theme-neumorphic .slider::-webkit-slider-thumb {
  width: 18px;
  height: 18px;
  background: var(--ps-bg);
  box-shadow: var(--neu-shadow-raised);
}

.mode-light.theme-neumorphic .slider::-webkit-slider-thumb:hover {
  box-shadow: var(--neu-shadow-raised), var(--neu-glow-accent);
  transform: scale(1.1);
}

.mode-light.theme-neumorphic .slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: var(--ps-bg);
  box-shadow: var(--neu-shadow-raised);
}

/* Segment control - More rounded, softer */
.mode-light.theme-neumorphic .segment-control {
  background: var(--ps-bg);
  box-shadow: var(--neu-shadow-inset);
  border-radius: 12px;
  padding: 4px;
}

.mode-light.theme-neumorphic .segment-control button {
  background: transparent;
  border-radius: 10px;
  transition: all 0.2s ease;
}

.mode-light.theme-neumorphic .segment-control button.is-active {
  background: var(--ps-bg);
  box-shadow: var(--neu-shadow-raised);
  color: var(--ps-accent);
}

.mode-light.theme-neumorphic .segment-control button:hover:not(.is-active) {
  color: var(--ps-text-bright);
}

/* Grid size buttons - Softer with more rounded corners */
.mode-light.theme-neumorphic .grid-size-btn {
  background: var(--ps-bg);
  border: none;
  border-radius: 8px;
  box-shadow: var(--neu-shadow-raised);
  transition: box-shadow 0.2s ease;
}

.mode-light.theme-neumorphic .grid-size-btn:hover {
  box-shadow: var(--neu-shadow-raised), var(--neu-glow-accent);
}

.mode-light.theme-neumorphic .grid-size-btn.is-active {
  box-shadow: var(--neu-shadow-inset), var(--neu-glow-accent);
  border: none;
}

/* Pattern utilities - Soft pill buttons */
.mode-light.theme-neumorphic .pattern-utilities button {
  background: var(--ps-bg);
  border: none;
  border-radius: 8px;
  box-shadow: var(--neu-shadow-raised);
  transition:
    box-shadow 0.2s ease,
    color 0.15s ease;
}

.mode-light.theme-neumorphic .pattern-utilities button:hover {
  box-shadow: var(--neu-shadow-raised), var(--neu-glow-accent);
  color: var(--ps-accent);
}

.mode-light.theme-neumorphic .pattern-utilities button:active {
  box-shadow: var(--neu-shadow-pressed);
}

/* Select dropdown - Soft inset with rounded corners */
.mode-light.theme-neumorphic .ps-select {
  background-color: var(--ps-bg);
  border: none;
  border-radius: 8px;
  box-shadow: var(--neu-shadow-inset);
}

.mode-light.theme-neumorphic .ps-select:focus {
  box-shadow: var(--neu-shadow-inset), var(--neu-glow-accent);
}

/* Toggle checkbox - Soft track with glowing thumb */
.mode-light.theme-neumorphic .toggle-row input[type='checkbox'] {
  background: var(--ps-border);
  box-shadow: var(--neu-shadow-inset);
  border-radius: 12px;
}

.mode-light.theme-neumorphic .toggle-row input[type='checkbox']::after {
  background: var(--ps-bg);
  box-shadow: var(--neu-shadow-raised);
}

.mode-light.theme-neumorphic .toggle-row input[type='checkbox']:checked {
  background: var(--ps-accent-dim);
}

.mode-light.theme-neumorphic .toggle-row input[type='checkbox']:checked::after {
  background: var(--ps-accent);
  box-shadow: var(--neu-shadow-raised), var(--neu-glow-accent);
}

/* WTF Modal - Soft floating panel */
.mode-light.theme-neumorphic .wtf-modal {
  background: var(--ps-bg);
  border-radius: 16px;
  box-shadow:
    0 20px 60px rgba(163, 177, 198, 0.4),
    var(--neu-shadow-raised);
}

.mode-light.theme-neumorphic .wtf-cell {
  background: var(--ps-border);
  box-shadow: var(--neu-shadow-inset);
}

.mode-light.theme-neumorphic .wtf-cell--alive {
  box-shadow: var(--neu-shadow-raised);
}

/* Got it button in modal */
.mode-light.theme-neumorphic .wtf-modal__got-it {
  background: var(--ps-bg);
  border: none;
  border-radius: 12px;
  box-shadow: var(--neu-shadow-raised);
}

.mode-light.theme-neumorphic .wtf-modal__got-it:hover {
  box-shadow: var(--neu-shadow-raised), var(--neu-glow-accent);
}

/* --------------------------------------------------------------------------
   Theme: Flat - Same colors, no shadows
   -------------------------------------------------------------------------- */
.mode-light.theme-flat {
  /* Warmer, more neutral whites - less cool/blue tint */
  --ps-bg: #f5f5f5;
  --ps-bg-elevated: #ffffff;
  --ps-bg-panel: #fafafa;
  --ps-bg-gradient: #f5f5f5;

  /* Borders - neutral gray */
  --ps-border: #e0e0e0;
  --ps-border-bright: #d0d0d0;

  /* Text - warmer grays */
  --ps-text: #555555;
  --ps-text-muted: #888888;
  --ps-text-bright: #333333;

  /* Cell rendering - neutral */
  --ps-cell-empty: #ebebeb;
  --ps-cell-border: rgba(180, 180, 180, 0.4);
  --ps-cell-dead: rgba(200, 200, 200, 0.6);
  --ps-grid-line: rgba(180, 180, 180, 0.3);

  /* Button colors - neutral */
  --ps-btn-icon: #666666;
  --ps-btn-icon-hover: #444444;
  --ps-btn-icon-active: #333333;
  --ps-btn-outline: rgba(51, 51, 51, 0.5);
  --ps-btn-outline-hover: rgba(51, 51, 51, 0.8);

  /* Playhead - neutral */
  --ps-playhead-default: #555555;
  --ps-playhead-core: #333333;
  --ps-playhead-glow: rgba(85, 85, 85, 0.2);

  /* Row colors - Rainbow spectrum (red → purple), softer pastels */
  --ps-row-0: #ff6b6b; /* Coral red */
  --ps-row-1: #ff7b5d; /* Red-orange */
  --ps-row-2: #ff9b4d; /* Orange */
  --ps-row-3: #ffbb3d; /* Orange-yellow */
  --ps-row-4: #ffdb3d; /* Yellow */
  --ps-row-5: #e5eb4d; /* Yellow-lime */
  --ps-row-6: #b5e85d; /* Lime */
  --ps-row-7: #7de87d; /* Green */
  --ps-row-8: #5de8a8; /* Green-teal */
  --ps-row-9: #5de8d8; /* Teal */
  --ps-row-10: #5dd8e8; /* Cyan */
  --ps-row-11: #5db8f8; /* Cyan-blue */
  --ps-row-12: #5d98ff; /* Light blue */
  --ps-row-13: #6b7bff; /* Blue */
  --ps-row-14: #8b6bff; /* Blue-indigo */
  --ps-row-15: #a85dff; /* Indigo */
  --ps-row-16: #c85dee; /* Indigo-purple */
  --ps-row-17: #dd5dd8; /* Purple */
  --ps-row-18: #e85dc0; /* Purple-magenta */
  --ps-row-19: #ee5da8; /* Magenta-violet */
}

/* Flat button styles - Clean borders, no shadows */
.mode-light.theme-flat .btn {
  background: var(--ps-bg-elevated);
  border: 1px solid var(--ps-border);
  box-shadow: none;
}

.mode-light.theme-flat .btn:hover {
  background: var(--ps-bg);
  border-color: var(--ps-border-bright);
}

.mode-light.theme-flat .btn:active {
  background: var(--ps-border);
}

.mode-light.theme-flat .btn.is-active {
  background: var(--ps-accent-dim);
  border-color: var(--ps-accent);
  color: var(--ps-accent);
}

/* WTF button - Flat outline */
.mode-light.theme-flat .btn--wtf {
  background: var(--ps-bg-elevated);
  border: 1px solid var(--ps-border-bright);
}

.mode-light.theme-flat .btn--wtf:hover {
  background: var(--ps-bg);
  border-color: var(--ps-accent);
  color: var(--ps-accent);
}

/* Freeze button active */
.mode-light.theme-flat .btn--freeze.is-active {
  background: rgba(96, 197, 232, 0.15);
  border-color: var(--ps-ice);
  color: var(--ps-ice);
}

/* Menu panel - Clean border */
.mode-light.theme-flat .menu-panel {
  background: var(--ps-bg-elevated);
  border-left: 1px solid var(--ps-border);
  box-shadow: none;
}

/* Segment control */
.mode-light.theme-flat .segment-control {
  border: 1px solid var(--ps-border);
  border-radius: 8px;
}

.mode-light.theme-flat .segment-control button.is-active {
  background: var(--ps-accent-dim);
  color: var(--ps-accent);
}

/* Grid size buttons */
.mode-light.theme-flat .grid-size-btn {
  background: var(--ps-bg-elevated);
  border: 1px solid var(--ps-border);
}

.mode-light.theme-flat .grid-size-btn.is-active {
  background: var(--ps-accent-dim);
  border-color: var(--ps-accent);
}

/* Pattern utilities */
.mode-light.theme-flat .pattern-utilities button {
  background: var(--ps-bg-elevated);
  border: 1px solid var(--ps-border);
}

.mode-light.theme-flat .pattern-utilities button:hover {
  border-color: var(--ps-accent);
  color: var(--ps-accent);
}

/* Select dropdown */
.mode-light.theme-flat .ps-select {
  background-color: var(--ps-bg-elevated);
  border: 1px solid var(--ps-border);
}

/* WTF Modal */
.mode-light.theme-flat .wtf-modal {
  background: var(--ps-bg-elevated);
  border: 1px solid var(--ps-border);
}

/* --------------------------------------------------------------------------
   Theme: Analog - Vintage hardware sequencer with earth tones
   -------------------------------------------------------------------------- */
.mode-light.theme-analog {
  /* Surface colors - warm sage-cream palette */
  --ps-bg: #e0e4d2;
  --ps-bg-elevated: #e8ebe0;
  --ps-bg-gradient: #e8ebe0;
  --ps-text: #4a4a3a;
  --ps-text-muted: #6a6a58;
  --ps-border: #c0c4b2;
  --ps-accent: #d4a84b;
  --ps-accent-hover: #c49a40;
  --ps-ice: #8b9b7a;

  /* Cell colors */
  --ps-cell-empty: #a8a99a;
  --ps-cell-border: rgba(120, 121, 104, 0.3);
  --ps-playhead: rgba(212, 168, 75, 0.15);

  /* Playhead styling */
  --ps-playhead-default: #d4a84b;
  --ps-playhead-core: #e8c070;
  --ps-playhead-glow: rgba(212, 168, 75, 0.3);

  /* Minimap */
  --ps-minimap-stroke: rgba(74, 74, 58, 0.6);
  --ps-minimap-playhead: rgba(212, 168, 75, 0.5);

  /* Button colors */
  --ps-btn-icon: #5a5a4a;
  --ps-btn-icon-active: #4a4a3a;

  /* Grid section labels */
  --ps-grid-label-width: 48px;

  /* Analog inset shadow for pegboard holes */
  --analog-hole-shadow:
    inset 2px 2px 4px rgba(0, 0, 0, 0.25), inset -1px -1px 2px rgba(255, 255, 255, 0.4);

  /* Analog socket gradient for inset effect (matches neumorphic pattern) */
  --analog-socket-gradient-start: rgba(120, 121, 104, 0.4); /* Dark olive */
  --analog-socket-gradient-mid: rgba(168, 169, 154, 0.15); /* Muted sage */
  --analog-socket-gradient-end: rgba(255, 255, 255, 0.45); /* Warm highlight */

  /* Row colors - Earth tone gradients by section */
  /* Melody (rows 0-11): Olive → Moss (darkened top for visibility) */
  --ps-row-0: #788868; /* Muted olive-sage */
  --ps-row-1: #708060; /* Olive-sage */
  --ps-row-2: #687858; /* Sage-olive */
  --ps-row-3: #607050; /* Light olive */
  --ps-row-4: #586848; /* Olive */
  --ps-row-5: #506040; /* Olive-green */
  --ps-row-6: #4a5a3c; /* Muted green */
  --ps-row-7: #445438; /* Forest moss */
  --ps-row-8: #3e4e34; /* Deep moss */
  --ps-row-9: #384830; /* Dark moss */
  --ps-row-10: #32422c; /* Deep forest */
  --ps-row-11: #2c3c28; /* Darkest moss */

  /* Bass (rows 12-13): Warm brown/umber tones */
  --ps-row-12: #8b6b4a; /* Warm umber */
  --ps-row-13: #7d5f40; /* Deep umber */

  /* Drums (rows 14-19): Terracotta → Rust → Brick (darkened top) */
  --ps-row-14: #9a6450; /* Terracotta */
  --ps-row-15: #8e5846; /* Terracotta-rust */
  --ps-row-16: #824c3c; /* Light rust */
  --ps-row-17: #764032; /* Rust */
  --ps-row-18: #6a3428; /* Dark rust */
  --ps-row-19: #5e281e; /* Brick */

  /* Font for light mode */
  --ps-font: 'Nunito', -apple-system, sans-serif;
}

/* Analog button styles - flat with subtle borders */
.mode-light.theme-analog .btn {
  background: var(--ps-bg-elevated);
  border: 1px solid var(--ps-border);
  box-shadow: none;
  transition:
    border-color 0.15s ease,
    color 0.15s ease;
}

.mode-light.theme-analog .btn:hover {
  border-color: var(--ps-accent);
  color: var(--ps-accent);
}

.mode-light.theme-analog .btn:active {
  background: var(--ps-bg);
}

.mode-light.theme-analog .btn.is-active {
  border-color: var(--ps-accent);
  color: var(--ps-accent);
  background: rgba(212, 168, 75, 0.1);
}

.mode-light.theme-analog .btn--wtf:hover {
  border-color: var(--ps-accent);
  color: var(--ps-accent);
}

/* Freeze button active - muted sage glow */
.mode-light.theme-analog .btn--freeze.is-active {
  border-color: var(--ps-ice);
  color: var(--ps-ice);
  background: rgba(139, 155, 122, 0.1);
}

/* Menu panel */
.mode-light.theme-analog .menu-panel {
  background: var(--ps-bg-elevated);
  border-left: 1px solid var(--ps-border);
  box-shadow: -4px 0 12px rgba(0, 0, 0, 0.08);
}

/* Segment control */
.mode-light.theme-analog .segment-control {
  background: var(--ps-bg);
  border: 1px solid var(--ps-border);
}

.mode-light.theme-analog .segment-control button.is-active {
  background: var(--ps-accent);
  color: #fff;
}

/* Grid size buttons */
.mode-light.theme-analog .grid-size-btn {
  background: var(--ps-bg-elevated);
  border: 1px solid var(--ps-border);
}

.mode-light.theme-analog .grid-size-btn.is-active {
  border-color: var(--ps-accent);
  background: rgba(212, 168, 75, 0.15);
}

/* Pattern utilities */
.mode-light.theme-analog .pattern-utilities button {
  background: var(--ps-bg-elevated);
  border: 1px solid var(--ps-border);
}

.mode-light.theme-analog .pattern-utilities button:hover {
  border-color: var(--ps-accent);
  color: var(--ps-accent);
}

/* Select dropdown */
.mode-light.theme-analog .ps-select {
  background-color: var(--ps-bg-elevated);
  border: 1px solid var(--ps-border);
}

/* Slider - earthy tones */
.mode-light.theme-analog .slider {
  background: linear-gradient(to right, var(--ps-border), var(--ps-accent));
}

.mode-light.theme-analog .slider::-webkit-slider-thumb {
  background: var(--ps-bg-elevated);
  border: 2px solid var(--ps-accent);
}

.mode-light.theme-analog .slider::-moz-range-thumb {
  background: var(--ps-bg-elevated);
  border: 2px solid var(--ps-accent);
}

/* Toggle checkboxes */
.mode-light.theme-analog .toggle-row input[type='checkbox'] {
  background: var(--ps-bg);
  border: 1px solid var(--ps-border);
}

.mode-light.theme-analog .toggle-row input[type='checkbox']:checked {
  background: var(--ps-accent);
  border-color: var(--ps-accent);
}

/* WTF Modal */
.mode-light.theme-analog .wtf-modal {
  background: var(--ps-bg-elevated);
  border: 1px solid var(--ps-border);
}

.mode-light.theme-analog .wtf-cell {
  background: var(--ps-cell-empty);
  box-shadow: var(--analog-hole-shadow);
}

.mode-light.theme-analog .wtf-cell--alive {
  background: var(--ps-row-7);
  box-shadow: inset 0 0 6px rgba(96, 136, 82, 0.5);
}

.mode-light.theme-analog .wtf-modal__got-it {
  background: var(--ps-accent);
  color: #fff;
  border: none;
}

.mode-light.theme-analog .wtf-modal__got-it:hover {
  background: var(--ps-accent-hover);
}

/* --------------------------------------------------------------------------
   Grid Section Labels (Analog theme only)
   -------------------------------------------------------------------------- */

/* Hidden by default */
.grid-labels {
  display: none;
}

/* Show only in Analog theme - labels positioned by JavaScript */
.mode-light.theme-analog .grid-labels {
  display: block;
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

.mode-light.theme-analog .grid-label {
  position: absolute;
  /* top and left set by JavaScript in renderer.js positionLabels() */
  font-family: 'Nunito', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ps-text-muted);
  opacity: 0.5;
  white-space: nowrap;
}

/* No left padding needed - labels overlay the grid */
.mode-light.theme-analog .grid-wrapper {
  position: relative;
}

/* Allow labels to overflow container (melody label above grid) */
.mode-light.theme-analog .grid-container {
  overflow: visible;
}

/* Mobile: smaller labels on narrow screens */
@media (max-width: 639px) {
  .mode-light.theme-analog .grid-label {
    font-size: 8px;
    letter-spacing: 0.08em;
    opacity: 0.5;
  }
}

/* --------------------------------------------------------------------------
   Light Mode - Circular WTF Cells (matches canvas grid circles)
   -------------------------------------------------------------------------- */
.mode-light .wtf-cell {
  border-radius: 50%;
}

/* --------------------------------------------------------------------------
   Base Reset
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
}

body {
  font-family: var(--ps-font);
  font-size: var(--ps-font-size-base);
  line-height: 1.4;
  color: var(--ps-text);
  background:
    radial-gradient(ellipse at center, var(--ps-bg-gradient) 0%, var(--ps-bg) 70%), var(--ps-bg);
  overflow: hidden;
  height: 100vh;
  height: 100dvh; /* Dynamic viewport height - adjusts for mobile browser chrome */
  display: flex;
  flex-direction: column;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  /* Text rendering optimizations for Retina displays */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* --------------------------------------------------------------------------
   CRT Effects Layer
   -------------------------------------------------------------------------- */

/* Scanlines overlay - softened without expensive filter blur */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent var(--crt-scanline-spacing),
    rgba(0, 0, 0, calc(var(--crt-scanline-opacity) * 0.65)) var(--crt-scanline-spacing),
    rgba(0, 0, 0, calc(var(--crt-scanline-opacity) * 0.65)) calc(var(--crt-scanline-spacing) + 2px)
  );
  pointer-events: none;
  z-index: 50; /* Below toolbar (100) but above canvas (1) */
}

/* Vignette overlay - only on canvas area, not UI elements */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 50%,
    rgba(0, 0, 0, var(--crt-vignette-intensity)) 100%
  );
  pointer-events: none;
  z-index: 49; /* Below scanlines and toolbar */
}

/* --------------------------------------------------------------------------
   Toolbar - Glowing text controls layout
   -------------------------------------------------------------------------- */
.toolbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ps-space-6);
  padding: var(--ps-space-3) max(var(--ps-space-4), env(safe-area-inset-right))
    calc(env(safe-area-inset-bottom) + var(--ps-space-3))
    max(var(--ps-space-4), env(safe-area-inset-left));
  background: transparent;
  border-color: var(--ps-border);
  min-height: var(--ps-toolbar-height);
  flex-shrink: 0;
  position: relative;
  z-index: var(--ps-z-toolbar);
}

.toolbar--top {
  border-bottom: 1px solid var(--ps-border);
}

.toolbar--bottom {
  border-top: 1px solid var(--ps-border);
}

/* --------------------------------------------------------------------------
   Buttons - Simple Synthwave Glow
   --------------------------------------------------------------------------
   Clean, vibey glowing buttons with soft neon aesthetic.
   -------------------------------------------------------------------------- */

/* Base button */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  color: var(--ps-btn-icon-hover);
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* Respect hidden attribute when display is explicitly set */
.btn[hidden],
.snapback-btn[hidden] {
  display: none;
}

.btn .material-symbols-rounded {
  font-size: 28px;
}

.btn:hover {
  color: var(--ps-btn-icon-active);
  text-shadow: 0 0 20px currentColor;
}

.btn:active {
  transform: scale(0.95);
}

.btn:focus-visible {
  outline: 2px solid var(--ps-btn-icon);
  outline-offset: 4px;
}

/* Play button - Hero with strong white glow (always white across themes) */
.btn--play {
  width: 56px;
  height: 56px;
  color: var(--ps-text-bright);
  text-shadow: var(--ps-glow-white);
}

.btn--play .material-symbols-rounded {
  font-size: 36px;
}

.btn--play:hover {
  text-shadow: var(--ps-glow-white-strong);
}

/* Freeze button - Subtle white, ice-blue when active */
.btn--freeze {
  color: var(--ps-btn-icon);
}

.btn--freeze:hover {
  color: var(--ps-btn-icon-hover);
  text-shadow: none;
}

.btn--freeze.is-active {
  color: var(--ps-ice);
  text-shadow:
    0 0 10px rgba(160, 240, 255, 0.8),
    0 0 20px rgba(160, 240, 255, 0.5),
    0 0 30px rgba(160, 240, 255, 0.3);
}

.btn--freeze.is-active:hover {
  text-shadow:
    0 0 10px rgba(160, 240, 255, 1),
    0 0 25px rgba(160, 240, 255, 0.8),
    0 0 40px rgba(160, 240, 255, 0.5);
}

/* Zoom button - Only visible when zoom is active, always white glow */
.btn--zoom {
  font-weight: 600;
  font-size: var(--ps-font-size-base);
  letter-spacing: -0.02em;
  color: var(--ps-text-bright);
  text-shadow: var(--ps-glow-white);
}

.btn--zoom:hover {
  text-shadow: var(--ps-glow-white-strong);
}

/* Menu/Settings button - White, glow on hover, corner placement */
.btn--menu {
  position: absolute;
  right: max(var(--ps-space-4), env(safe-area-inset-right));
  color: var(--ps-text-bright);
}

.btn--menu:hover {
  text-shadow: var(--ps-glow-white-strong);
}

/* Close button - Simple icon, no circle */
.btn--close {
  width: auto;
  height: auto;
  padding: var(--ps-space-2);
  font-size: 1.5rem;
  color: var(--ps-btn-icon);
  border-radius: 0;
}

.btn--close:hover {
  color: var(--ps-btn-icon-active);
  text-shadow: none;
}

.btn--close:focus-visible {
  outline: none;
}

/* --------------------------------------------------------------------------
   WTF Button - Outline text button, left-positioned, white (glow on hover)
   -------------------------------------------------------------------------- */
.btn--wtf {
  position: absolute;
  left: max(var(--ps-space-4), env(safe-area-inset-left));
  width: auto;
  height: 32px;
  padding: 0 var(--ps-space-3);
  background: transparent;
  border: 1px solid var(--ps-btn-icon);
  border-radius: var(--ps-radius-sm);
  color: var(--ps-text-bright);
  font-family: var(--ps-font-display);
  font-size: var(--ps-font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: all var(--ps-transition);
}

.btn--wtf:hover,
.btn--wtf:focus-visible {
  border-color: var(--ps-btn-icon-hover);
  background: var(--ps-accent-dim);
  text-shadow: var(--ps-glow-white-strong);
  box-shadow: var(--ps-glow-white-box);
}

.btn--wtf:active {
  transform: scale(0.97);
}

/* Mobile: show short text only */
.wtf-text--full {
  display: none;
}

.wtf-text--short {
  display: inline;
}

/* Desktop: show full text only */
@media (min-width: 640px) {
  .wtf-text--full {
    display: inline;
  }

  .wtf-text--short {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   WTF Modal - Help overlay
   -------------------------------------------------------------------------- */

/* Native dialog backdrop (works with showModal's top layer) */
#wtf-modal::backdrop {
  background: var(--ps-backdrop);
}

/* Modal dialog */
.wtf-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - var(--ps-space-4) * 2);
  max-width: 420px;
  max-height: calc(100vh - var(--ps-space-6) * 2);
  overflow-y: auto;
  background: var(--ps-bg-panel);
  border: 1px solid var(--ps-border-bright);
  border-radius: var(--ps-radius);
  padding: 0;
  color: var(--ps-text);
  font-family: var(--ps-font);
  z-index: var(--ps-z-menu);
  display: none;
}

.wtf-modal[open] {
  display: block;
}

/* Header */
.wtf-modal__header {
  padding: var(--ps-space-4);
  border-bottom: 1px solid var(--ps-border);
}

.wtf-modal__title {
  margin: 0;
  font-family: var(--ps-font-display);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--ps-text-bright);
  text-shadow: var(--ps-glow-text);
}

/* Content */
.wtf-modal__content {
  padding: var(--ps-space-4);
}

/* Sections */
.wtf-section {
  margin-bottom: var(--ps-space-6);
}

.wtf-section:last-child {
  margin-bottom: 0;
}

.wtf-section__title {
  margin: 0 0 var(--ps-space-2) 0;
  font-family: var(--ps-font-display);
  font-size: var(--ps-font-size-base);
  font-weight: 400;
  color: var(--ps-accent);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.wtf-section__intro {
  margin: 0 0 var(--ps-space-3) 0;
  font-size: var(--ps-font-size-sm);
  color: var(--ps-text);
}

.wtf-section__note {
  margin: var(--ps-space-3) 0 0 0;
  font-size: var(--ps-font-size-xs);
  color: var(--ps-text-muted);
  font-style: italic;
}

/* Footer - sticky so close button is always reachable */
.wtf-modal__footer {
  position: sticky;
  bottom: 0;
  padding: var(--ps-space-4);
  border-top: 1px solid var(--ps-border);
  background: var(--ps-bg-panel);
  text-align: center;
}

.wtf-modal__got-it {
  padding: var(--ps-space-2) var(--ps-space-6);
  background: transparent;
  border: 1px solid var(--ps-btn-outline);
  border-radius: var(--ps-radius);
  color: var(--ps-btn-outline);
  font-family: var(--ps-font-display);
  font-size: var(--ps-font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all var(--ps-transition);
}

.wtf-modal__got-it:hover,
.wtf-modal__got-it:focus {
  border-color: var(--ps-btn-outline-hover);
  color: var(--ps-btn-outline-hover);
  background: rgba(255, 255, 255, 0.05);
  outline: none;
}

/* --------------------------------------------------------------------------
   WTF Modal - Game of Life Diagrams
   -------------------------------------------------------------------------- */

.wtf-rules {
  display: flex;
  justify-content: space-around;
  gap: var(--ps-space-3);
  flex-wrap: wrap;
}

.wtf-rule {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ps-space-2);
}

.wtf-grid {
  display: grid;
  grid-template-columns: repeat(3, 20px);
  grid-template-rows: repeat(3, 20px);
  gap: 2px;
}

.wtf-cell {
  background: var(--ps-cell-dead);
  border-radius: var(--ps-radius-sm);
}

.wtf-cell--alive {
  background: var(--wtf-alive);
  box-shadow: 0 0 6px var(--wtf-alive);
}

.wtf-cell--center {
  border: 2px solid var(--ps-text-muted);
  box-sizing: border-box;
}

.wtf-cell--dying {
  background: var(--wtf-dying);
  box-shadow: 0 0 6px var(--wtf-dying);
}

.wtf-cell--born {
  background: var(--wtf-born);
  box-shadow: 0 0 8px var(--wtf-born);
}

.wtf-rule__caption {
  font-family: var(--ps-font-display);
  font-size: var(--ps-font-size-xs);
  color: var(--ps-text-muted);
}

/* --------------------------------------------------------------------------
   WTF Modal - Sequencer Row Strip
   -------------------------------------------------------------------------- */

.wtf-sequencer {
  display: flex;
  align-items: stretch;
  gap: var(--ps-space-3);
  justify-content: center;
}

.wtf-strip {
  display: flex;
  flex-direction: column;
  width: 24px;
  border-radius: var(--ps-radius-sm);
  overflow: hidden;
}

.wtf-strip__row {
  height: 10px;
}

.wtf-strip__labels {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-family: var(--ps-font-display);
  font-size: var(--ps-font-size-xs);
  color: var(--ps-text-muted);
  padding: 2px 0;
}

.wtf-strip__label {
  display: flex;
  align-items: center;
}

.wtf-strip__label::before {
  content: '';
  width: 8px;
  height: 1px;
  background: var(--ps-text-muted);
  margin-right: var(--ps-space-2);
}

/* Position labels to align with strip sections */
.wtf-strip__label--melody {
  /* Rows 0-11: 12 rows * 10px = 120px, center at 60px */
  margin-top: 0;
  height: 120px;
  align-items: flex-start;
  padding-top: 50px;
}

.wtf-strip__label--bass {
  /* Row 12: 1 row * 10px = 10px */
  height: 10px;
}

.wtf-strip__label--drums {
  /* Rows 13-15: 3 rows * 10px = 30px */
  height: 30px;
  align-items: center;
}

/* --------------------------------------------------------------------------
   Menu Backdrop
   -------------------------------------------------------------------------- */
.menu-backdrop {
  position: fixed;
  inset: 0;
  background: var(--ps-backdrop);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.25s ease,
    visibility 0.25s ease;
  z-index: var(--ps-z-backdrop);
}

.menu-backdrop.is-visible {
  opacity: 1;
  visibility: visible;
}

/* --------------------------------------------------------------------------
   Menu Panel - Bottom sheet (mobile) / Sidebar (desktop)
   -------------------------------------------------------------------------- */
.menu-panel {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 70vh;
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--ps-bg-panel);
  border-top: 1px solid var(--ps-border-bright);
  box-shadow: 0 -4px 32px var(--ps-backdrop-light);
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: var(--ps-z-menu);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.menu-panel.is-open {
  transform: translateY(0);
}

.menu-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ps-space-3) var(--ps-space-4);
  border-bottom: 1px solid var(--ps-border);
  position: sticky;
  top: 0;
  background: var(--ps-bg-panel);
}

.menu-panel__title {
  font-family: var(--ps-font-display);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--ps-text-bright);
  text-shadow: var(--ps-glow-white);
}

/* Desktop sidebar */
@media (min-width: 640px) {
  .menu-panel {
    top: 0;
    bottom: 0;
    left: auto;
    right: 0;
    width: 300px;
    max-height: none;
    transform: translateX(100%);
    border-top: none;
    border-left: 1px solid var(--ps-border-bright);
    box-shadow: -4px 0 32px var(--ps-backdrop-light);
  }

  .menu-panel.is-open {
    transform: translateX(0);
  }
}

/* --------------------------------------------------------------------------
   Mini-map Container
   -------------------------------------------------------------------------- */
.minimap-container {
  position: absolute;
  bottom: var(--ps-space-3);
  left: var(--ps-space-3);
  display: none; /* Hidden by default, shown when minimap is visible */
  align-items: center;
  gap: var(--ps-space-2);
  z-index: var(--ps-z-labels);
}

.minimap-container:has(.minimap.is-visible) {
  display: flex;
}

/* Desktop: move minimap to top-right (to left of settings button) */
@media (min-width: 640px) {
  .minimap-container {
    --settings-btn-width: 48px; /* Matches .btn width */
    position: fixed;
    bottom: auto;
    left: auto;
    top: var(--ps-space-3);
    right: calc(
      max(var(--ps-space-4), env(safe-area-inset-right)) + var(--settings-btn-width) +
        var(--ps-space-3)
    );
  }
}

/* --------------------------------------------------------------------------
   Mini-map
   -------------------------------------------------------------------------- */
.minimap {
  /* width/height controlled by JS based on grid ratio */
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid var(--ps-border-bright);
  border-radius: var(--ps-radius);
  pointer-events: auto;
  display: none; /* Hidden by default, shown via JS */
}

.minimap.is-visible {
  display: block;
}

/* --------------------------------------------------------------------------
   Snapback Button
   -------------------------------------------------------------------------- */
.snapback-btn {
  width: 36px;
  height: 36px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--ps-text);
  cursor: pointer;
  transition:
    color 0.15s ease,
    transform 0.15s ease,
    text-shadow 0.15s ease;
}

.snapback-btn .material-symbols-rounded {
  font-size: 24px;
}

.snapback-btn:hover {
  color: var(--ps-glow-accent);
  text-shadow: 0 0 8px var(--ps-glow-accent);
}

.snapback-btn:active {
  transform: scale(0.95);
}

/* --------------------------------------------------------------------------
   Toggle Switch
   -------------------------------------------------------------------------- */
.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ps-space-2) 0;
  cursor: pointer;
}

.toggle-input {
  display: none;
}

.toggle-switch {
  position: relative;
  width: 44px;
  height: 24px;
  background: var(--ps-border-bright);
  border-radius: 12px;
  transition: background var(--ps-transition);
}

.toggle-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: var(--ps-text-muted);
  border-radius: 50%;
  transition:
    transform var(--ps-transition),
    background var(--ps-transition);
}

.toggle-input:checked + .toggle-switch {
  background: var(--ps-accent-dim);
}

.toggle-input:checked + .toggle-switch::after {
  transform: translateX(20px);
  background: var(--ps-accent);
  box-shadow: var(--ps-glow-accent);
}

/* --------------------------------------------------------------------------
   Menu Sections
   -------------------------------------------------------------------------- */
.menu-section {
  padding: var(--ps-space-4);
  border-bottom: 1px solid var(--ps-border);
  overflow-x: hidden;
}

.menu-section:last-child {
  border-bottom: none;
}

.menu-section__title {
  font-family: var(--ps-font-display);
  font-size: var(--ps-font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ps-text-bright);
  margin-bottom: var(--ps-space-1);
  text-shadow: var(--ps-glow-white);
}

.menu-section__subtitle {
  font-size: var(--ps-font-size-xs);
  color: var(--ps-text-muted);
  margin-bottom: var(--ps-space-3);
}

/* --------------------------------------------------------------------------
   Advanced Settings Section (Collapsible)
   -------------------------------------------------------------------------- */
.advanced-section {
  border-bottom: 1px solid var(--ps-border);
}

.advanced-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ps-space-4);
  font-family: var(--ps-font-display);
  font-size: var(--ps-font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ps-text-muted);
  cursor: pointer;
  transition: color var(--ps-transition);
  list-style: none; /* Remove default marker */
}

.advanced-header::-webkit-details-marker {
  display: none; /* Remove Safari marker */
}

.advanced-header::after {
  content: '';
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid currentColor;
  transform: rotate(-90deg);
  transition: transform 0.2s ease;
}

.advanced-section[open] .advanced-header::after {
  transform: rotate(0deg);
}

.advanced-header:hover {
  color: var(--ps-text);
}

/* First section in advanced-content gets a top border for visual separation */
.advanced-content .menu-section:first-child {
  border-top: 1px solid var(--ps-border);
}

.advanced-content .menu-section:last-child {
  border-bottom: none;
}

/* --------------------------------------------------------------------------
   Segment Control
   -------------------------------------------------------------------------- */
.segment-control {
  display: flex;
  gap: 1px;
  background: var(--ps-border);
  border-radius: var(--ps-radius);
  overflow: hidden;
}

.segment-control button {
  flex: 1;
  padding: var(--ps-space-2) var(--ps-space-3);
  font-family: inherit;
  font-size: var(--ps-font-size-sm);
  color: var(--ps-text-muted);
  background: var(--ps-bg-elevated);
  border: none;
  cursor: pointer;
  transition: all var(--ps-transition);
}

.segment-control button:hover {
  color: var(--ps-text);
  background: var(--ps-bg);
}

.segment-control button.is-active {
  color: var(--ps-accent);
  background: var(--ps-bg);
  text-shadow: var(--ps-glow-text);
}

/* Text-based segment control (STEP/BEAT/BAR) */
.segment-control--text button {
  letter-spacing: 0.08em;
  font-size: var(--ps-font-size-xs);
}

/* --------------------------------------------------------------------------
   Grid Size Selector - Horizontally scrolling buttons with dot grids
   -------------------------------------------------------------------------- */
.grid-size-scroll {
  display: flex;
  gap: var(--ps-space-2);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  padding: var(--ps-space-1) 0;
  margin: 0 calc(-1 * var(--ps-space-4));
  padding-left: var(--ps-space-4);
  padding-right: var(--ps-space-4);
}

.grid-size-scroll::-webkit-scrollbar {
  display: none;
}

.grid-size-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ps-space-2);
  background: var(--ps-bg-elevated);
  border: 1px solid var(--ps-border-bright);
  border-radius: var(--ps-radius);
  cursor: pointer;
  transition: all var(--ps-transition);
}

.grid-size-btn:hover {
  border-color: var(--ps-text-muted);
}

.grid-size-btn.is-active {
  border-color: var(--ps-accent);
  box-shadow: var(--ps-glow-accent);
}

/* Dot grid container - uses background-image for dots */
.grid-size-dots {
  background-image: radial-gradient(circle, var(--ps-text-muted) 1px, transparent 1px);
  background-size: 5px 5px;
}

/* 8 columns × 16 rows (1:2 ratio) → 4×8 dots */
.grid-size-dots--8 {
  width: calc(4 * 5px);
  height: calc(8 * 5px);
}

/* 16 columns × 16 rows (1:1 ratio) → 8×8 dots */
.grid-size-dots--16 {
  width: calc(8 * 5px);
  height: calc(8 * 5px);
}

/* 32 columns × 16 rows (2:1 ratio) → 16×8 dots */
.grid-size-dots--32 {
  width: calc(16 * 5px);
  height: calc(8 * 5px);
}

/* 64 columns × 16 rows (4:1 ratio) → 32×8 dots */
.grid-size-dots--64 {
  width: calc(32 * 5px);
  height: calc(8 * 5px);
}

/* Active state - accent colored dots */
.grid-size-btn.is-active .grid-size-dots {
  background-image: radial-gradient(circle, var(--ps-accent) 1px, transparent 1px);
}

/* --------------------------------------------------------------------------
   Pattern Utilities (Clear, Random buttons)
   -------------------------------------------------------------------------- */
.pattern-utilities {
  display: flex;
  gap: var(--ps-space-2);
  margin-bottom: var(--ps-space-3);
}

.pattern-utilities button {
  flex: 1;
  padding: var(--ps-space-2) var(--ps-space-3);
  font-size: var(--ps-font-size-sm);
  font-weight: 500;
  color: var(--ps-text-muted);
  background: var(--ps-bg-elevated);
  border: 1px solid var(--ps-border-bright);
  border-radius: var(--ps-radius);
  cursor: pointer;
  transition: all var(--ps-transition);
}

.pattern-utilities button:hover {
  color: var(--ps-accent);
  border-color: var(--ps-accent);
  text-shadow: var(--ps-glow-text);
  box-shadow: var(--ps-glow-accent);
}

/* --------------------------------------------------------------------------
   Pattern List
   -------------------------------------------------------------------------- */
.pattern-list {
  display: flex;
  flex-direction: column;
  gap: var(--ps-space-2);
}

.pattern-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: var(--ps-space-2) var(--ps-space-3);
  font-family: inherit;
  text-align: left;
  background: var(--ps-bg-elevated);
  border: 1px solid var(--ps-border);
  border-radius: var(--ps-radius);
  cursor: pointer;
  transition: all var(--ps-transition);
}

.pattern-item:hover {
  border-color: var(--ps-accent);
  box-shadow: var(--ps-glow-accent);
}

.pattern-item:active {
  transform: scale(0.98);
}

.pattern-item__name {
  font-size: var(--ps-font-size-sm);
  font-weight: 500;
  color: var(--ps-text);
}

.pattern-item__desc {
  font-size: var(--ps-font-size-xs);
  color: var(--ps-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* --------------------------------------------------------------------------
   Slider
   -------------------------------------------------------------------------- */
.slider-group {
  display: flex;
  align-items: center;
  gap: var(--ps-space-3);
}

.slider-group input[type='range'] {
  flex: 1;
}

.slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: var(--ps-border-bright);
  border-radius: var(--ps-radius-sm);
  cursor: pointer;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  background: var(--ps-accent);
  border-radius: 50%;
  cursor: pointer;
  transition:
    transform var(--ps-transition),
    box-shadow var(--ps-transition);
  box-shadow: var(--ps-glow-accent);
}

.slider::-webkit-slider-thumb:hover {
  transform: scale(1.2);
  box-shadow:
    calc(-1.5 * var(--crt-rgb-separation)) 0 0 rgba(255, 0, 0, 0.2),
    calc(1.5 * var(--crt-rgb-separation)) 0 0 rgba(0, 255, 255, 0.2),
    0 0 calc(16px * var(--crt-glow-intensity)) rgba(255, 255, 255, 0.6);
}

.slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: var(--ps-accent);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: var(--ps-glow-accent);
}

.slider-value {
  font-size: var(--ps-font-size-sm);
  color: var(--ps-accent);
  min-width: 48px;
  text-align: right;
  text-shadow: var(--ps-glow-text);
  font-variant-numeric: tabular-nums;
}

.slider-labels {
  display: flex;
  justify-content: space-between;
  font-size: var(--ps-font-size-xs);
  color: var(--ps-text-muted);
  margin-top: var(--ps-space-1);
}

/* --------------------------------------------------------------------------
   Radio Group (Playhead Style)
   -------------------------------------------------------------------------- */
.radio-group {
  display: flex;
  flex-direction: column;
  gap: var(--ps-space-2);
}

.radio-group label {
  display: flex;
  align-items: center;
  gap: var(--ps-space-2);
  padding: var(--ps-space-2);
  cursor: pointer;
  border-radius: var(--ps-radius);
  transition: background var(--ps-transition);
}

.radio-group label:hover {
  background: var(--ps-bg-elevated);
}

.radio-group input[type='radio'] {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border: 2px solid var(--ps-border-bright);
  border-radius: 50%;
  cursor: pointer;
  transition: all var(--ps-transition);
}

.radio-group input[type='radio']:checked {
  border-color: var(--ps-accent);
  background: var(--ps-accent);
  box-shadow: var(--ps-glow-accent);
}

.radio-group input[type='radio']:checked + span {
  color: var(--ps-accent);
  text-shadow: var(--ps-glow-text);
}

/* --------------------------------------------------------------------------
   Select Dropdown
   -------------------------------------------------------------------------- */
.ps-control-group {
  display: flex;
  flex-direction: column;
  gap: var(--ps-space-2);
}

.ps-label {
  font-family: var(--ps-font-display);
  font-size: var(--ps-font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ps-text-muted);
}

.ps-select {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  padding: var(--ps-space-2) var(--ps-space-3);
  padding-right: calc(var(--ps-space-3) + 20px); /* Space for arrow */
  font-family: inherit;
  font-size: var(--ps-font-size-sm);
  color: var(--ps-text);
  background-color: var(--ps-bg-elevated);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666666' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--ps-space-2) center;
  border: 1px solid var(--ps-border-bright);
  border-radius: var(--ps-radius);
  cursor: pointer;
  transition: all var(--ps-transition);
}

.ps-select:hover {
  border-color: var(--ps-text-muted);
}

.ps-select:focus {
  outline: none;
  border-color: var(--ps-accent);
  box-shadow: var(--ps-glow-accent);
}

.ps-select option {
  background: var(--ps-bg-elevated);
  color: var(--ps-text);
  padding: var(--ps-space-2);
}

/* --------------------------------------------------------------------------
   Toggle Checkbox
   -------------------------------------------------------------------------- */
.toggle-group {
  display: flex;
  flex-direction: column;
  gap: var(--ps-space-2);
}

.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ps-space-2) 0;
  cursor: pointer;
  transition: color var(--ps-transition);
}

.toggle-row:hover {
  color: var(--ps-text-bright);
}

.toggle-row span {
  font-size: var(--ps-font-size-sm);
  color: var(--ps-text);
}

.toggle-row input[type='checkbox'] {
  -webkit-appearance: none;
  appearance: none;
  width: 36px;
  height: 20px;
  background: var(--ps-border-bright);
  border-radius: 10px;
  cursor: pointer;
  position: relative;
  transition: background var(--ps-transition);
}

.toggle-row input[type='checkbox']::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: var(--ps-text-muted);
  border-radius: 50%;
  transition:
    transform var(--ps-transition),
    background var(--ps-transition),
    box-shadow var(--ps-transition);
}

.toggle-row input[type='checkbox']:checked {
  background: var(--ps-accent-dim);
}

.toggle-row input[type='checkbox']:checked::after {
  transform: translateX(16px);
  background: var(--ps-accent);
  box-shadow: var(--ps-glow-accent);
}

.toggle-row input[type='checkbox']:focus-visible {
  outline: 2px solid var(--ps-accent);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Grid Container
   -------------------------------------------------------------------------- */
.grid-container {
  flex: 1;
  display: flex;
  overflow: hidden;
  position: relative;
  align-items: stretch;
  min-height: 0; /* Allow flex shrinking */
}

#grid-canvas {
  display: block;
  z-index: var(--ps-z-canvas);
}

.grid-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: visible;
}

/* --------------------------------------------------------------------------
   Mobile Adjustments
   -------------------------------------------------------------------------- */
@media (max-width: 639px) {
  :root {
    --ps-toolbar-height: 52px;
    --ps-row-label-width: 28px;
    --ps-cell-size: 18px;
  }

  /* On mobile, toolbar at bottom */
  body {
    flex-direction: column-reverse;
  }

  .toolbar--bottom {
    border-top: none;
  }
}

/* --------------------------------------------------------------------------
   PWA Standalone Mode
   -------------------------------------------------------------------------- */
@media (display-mode: standalone), (display-mode: fullscreen) {
  .toolbar--bottom {
    /* Ensure minimum padding for iOS home indicator (~34px) */
    padding-bottom: max(34px, calc(env(safe-area-inset-bottom) + var(--ps-space-3)));
  }
}

/* --------------------------------------------------------------------------
   Reduced Motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  body::before,
  body::after {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Focus Styles for Accessibility
   -------------------------------------------------------------------------- */
:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--ps-accent);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Scrollbar Styling
   -------------------------------------------------------------------------- */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--ps-bg);
}

::-webkit-scrollbar-thumb {
  background: var(--ps-border-bright);
  border-radius: var(--ps-radius-sm);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--ps-text-muted);
}

/* --------------------------------------------------------------------------
   Audio Error State
   -------------------------------------------------------------------------- */
.audio-error {
  opacity: 0.5;
  cursor: not-allowed;
}