* { box-sizing: border-box; margin: 0; padding: 0; }
    html, body { width: 100%; height: 100%; overflow: hidden; }
    body {
      background:
        radial-gradient(120% 90% at 50% -10%, rgba(139,92,246,.14), transparent 60%),
        radial-gradient(100% 80% at 90% 110%, rgba(34,211,238,.12), transparent 55%),
        #07070d;
      font-family: "Space Grotesk", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: white;
    }
    #app { position: relative; width: 100vw; height: 100vh; overflow: hidden; }
    .shader-layer {
      position: absolute; inset: 0; width: 100%; height: 100%;
      cursor: crosshair; opacity: 0;
      filter: saturate(.96) contrast(.98) brightness(.98);
      transition: opacity var(--shader-xfade,4200ms) cubic-bezier(.22,1,.36,1), filter var(--shader-xfade,4200ms) cubic-bezier(.22,1,.36,1);
      will-change: opacity, filter;
    }
    .shader-layer.is-active, .shader-layer.is-crossfade-in { opacity: 1; filter: saturate(1) contrast(1) brightness(1); }
    .shader-layer:not(.is-active):not(.is-crossfade-in) { pointer-events: none; }
    .overlay {
      position: absolute; inset: 0; pointer-events: none;
      background:
        radial-gradient(circle at 50% 35%, transparent 0%, rgba(0,0,0,.10) 42%, rgba(0,0,0,.52) 100%),
        linear-gradient(to bottom, rgba(0,0,0,.1), transparent 42%, rgba(0,0,0,.72));
    }
    .panel {
      position: absolute; top: 20px; left: 20px; z-index: 10;
      width: 410px; max-height: calc(100vh - 40px); overflow: auto;
      padding: 18px; border-radius: 28px;
      border: 1px solid rgba(255,255,255,.13);
      background: linear-gradient(180deg, rgba(18,20,30,.82), rgba(5,7,13,.58)), radial-gradient(120% 90% at 50% 0%, rgba(125,211,252,.10), transparent 60%);
      backdrop-filter: blur(26px) saturate(145%);
      box-shadow: 0 28px 90px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.10), inset 0 -1px 0 rgba(255,255,255,.04);
      transition: opacity .24s ease, transform .24s ease;
    }
    body.panel-hidden .panel { opacity: 0; pointer-events: none; transform: translateY(-16px) scale(.98); }
    body.panel-collapsed .panel { opacity: 0; pointer-events: none; transform: translateX(-18px) scale(.98); }
    .panel-toggle {
      position: absolute; top: 20px; right: 20px; z-index: 12;
      min-width: 46px; height: 46px; display: inline-grid; place-items: center;
      border-radius: 999px; border: 1px solid rgba(125,211,252,.26);
      background: linear-gradient(180deg, rgba(18,20,30,.78), rgba(5,7,13,.52));
      color: rgba(238,252,255,.92); backdrop-filter: blur(18px) saturate(140%);
      box-shadow: 0 18px 44px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.08);
      cursor: pointer;
      transition: transform .18s ease, border-color .18s ease, background .18s ease, opacity .18s ease;
    }
    .panel-toggle:hover { transform: translateY(-1px); border-color: rgba(125,211,252,.54); background: linear-gradient(180deg, rgba(34,211,238,.18), rgba(5,7,13,.52)); }
    .brand-row {
      display: flex; align-items: center; justify-content: space-between; gap: 12px;
      margin-bottom: 14px; padding-bottom: 2px;
    }
    h1 {
      font-size: 34px; line-height: .92; letter-spacing: -.065em; margin: 0;
      background: linear-gradient(92deg,#fff,#c084fc 38%,#67e8f9 72%,#fff);
      -webkit-background-clip: text; background-clip: text; color: transparent; text-wrap: balance;
      white-space: nowrap;
    }
    .sub {
      display: inline-flex; align-items: center; width: fit-content; padding: 6px 9px;
      border-radius: 999px; border: 1px solid rgba(125,211,252,.16); background: rgba(125,211,252,.055);
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 9px; color: rgba(186,230,253,.70); letter-spacing: .16em; text-transform: uppercase; margin: 0;
      white-space: nowrap;
    }
    .hint { display: none; }

    /* -- Help / tutorial ---------------------------------------- */
    .controls-heading { margin-bottom: 11px; }
    .panel-help-btn {
      width: 34px; height: 30px; display: inline-grid; place-items: center;
      border-radius: 12px; border: 1px solid rgba(192,132,252,.26);
      background: linear-gradient(180deg,rgba(192,132,252,.13),rgba(255,255,255,.035));
      color: rgba(250,245,255,.92); font-size: 14px; font-weight: 900; line-height: 1; cursor: pointer;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
      transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
    }
    .panel-help-btn:hover { transform: translateY(-1px); border-color: rgba(192,132,252,.58); background: linear-gradient(180deg,rgba(192,132,252,.22),rgba(34,211,238,.06)); box-shadow: 0 10px 22px rgba(168,85,247,.14); }
    .help-modal {
      position: absolute; inset: 0; z-index: 30; display: none; align-items: center; justify-content: center;
      padding: 20px; background: radial-gradient(circle at 50% 10%, rgba(125,211,252,.10), transparent 35%), rgba(0,0,0,.56);
      backdrop-filter: blur(16px) saturate(130%);
    }
    .help-modal.is-open { display: flex; }
    .help-dialog {
      width: min(760px, calc(100vw - 28px)); max-height: min(82vh, 760px); overflow: auto;
      border-radius: 28px; border: 1px solid rgba(255,255,255,.14);
      background: linear-gradient(180deg, rgba(18,20,30,.94), rgba(5,7,13,.90)), radial-gradient(110% 80% at 50% 0%, rgba(192,132,252,.13), transparent 58%);
      box-shadow: 0 34px 110px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.10);
      padding: 22px;
    }
    .help-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
    .help-kicker {
      display: inline-flex; width: fit-content; padding: 6px 9px; border-radius: 999px;
      border: 1px solid rgba(125,211,252,.18); background: rgba(125,211,252,.07);
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: rgba(186,230,253,.76); margin-bottom: 9px;
    }
    .help-title { font-size: 30px; line-height: 1; letter-spacing: -.055em; margin-bottom: 8px; }
    .help-intro { color: rgba(255,255,255,.62); font-size: 14px; line-height: 1.45; max-width: 620px; }
    .help-close {
      width: 36px; height: 36px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.05); color: rgba(255,255,255,.78); cursor: pointer; font-size: 20px; line-height: 1;
      transition: transform .16s ease, border-color .16s ease, background .16s ease;
    }
    .help-close:hover { transform: translateY(-1px); border-color: rgba(248,113,113,.44); background: rgba(248,113,113,.08); }
    .help-quick {
      display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 8px; margin: 16px 0;
    }
    .help-chip {
      padding: 10px 8px; border-radius: 16px; border: 1px solid rgba(255,255,255,.09);
      background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
      text-align: center; font-size: 11px; color: rgba(255,255,255,.72);
    }
    .help-chip strong { display: block; color: #eefcff; font-size: 12px; margin-bottom: 3px; }
    .help-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 14px; }
    .help-card {
      padding: 13px; border-radius: 20px; border: 1px solid rgba(255,255,255,.09);
      background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.022));
    }
    .help-card h3 {
      font-size: 12px; letter-spacing: .13em; text-transform: uppercase; color: rgba(186,230,253,.82); margin-bottom: 8px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    }
    .help-card p, .help-card li { font-size: 13px; color: rgba(255,255,255,.64); line-height: 1.42; }
    .help-card ul { padding-left: 17px; display: grid; gap: 5px; }
    .help-card strong { color: rgba(255,255,255,.88); }
    .help-advanced-toggle {
      width: 100%; margin-top: 12px; padding: 11px; border-radius: 16px; border: 1px solid rgba(125,211,252,.18);
      background: linear-gradient(180deg, rgba(34,211,238,.08), rgba(255,255,255,.025)); color: rgba(238,252,255,.78);
      cursor: pointer; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 10px; font-weight: 800;
      letter-spacing: .13em; text-transform: uppercase;
    }
    .help-advanced { display: none; margin-top: 10px; }
    .help-advanced.is-open { display: block; }
    @media (max-width: 760px) {
      .help-dialog { padding: 17px; max-height: 86vh; }
      .help-quick, .help-grid { grid-template-columns: 1fr; }
      .help-title { font-size: 26px; }
    }

    .group {
      margin-bottom: 14px; padding: 13px; border-radius: 20px;
      background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.028));
      border: 1px solid rgba(255,255,255,.10); box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
    }
    .controls-group {
      padding: 12px;
      background: linear-gradient(180deg, rgba(34,211,238,.075), rgba(255,255,255,.028)), radial-gradient(90% 90% at 50% 0%, rgba(192,132,252,.10), transparent 60%);
    }
    .group-title {
      display: flex; align-items: center; gap: 8px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 10px; text-transform: uppercase; letter-spacing: .22em; color: rgba(255,255,255,.52); margin-bottom: 11px;
    }
    .group-title::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: rgba(125,211,252,.82); box-shadow: 0 0 16px rgba(125,211,252,.5); }
    .group-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 11px; }
    .group-heading .group-title { margin-bottom: 0; }
    .dice-btn {
      position: relative; width: 34px; height: 30px; display: inline-grid; place-items: center;
      border-radius: 12px; border: 1px solid rgba(125,211,252,.22);
      background: linear-gradient(180deg, rgba(34,211,238,.13), rgba(255,255,255,.035));
      color: rgba(238,252,255,.92); font-size: 15px; line-height: 1; cursor: pointer;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
      transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
    }
    .dice-btn:hover { transform: translateY(-1px); border-color: rgba(125,211,252,.52); background: linear-gradient(180deg, rgba(34,211,238,.22), rgba(192,132,252,.08)); box-shadow: 0 10px 22px rgba(8,145,178,.18); }
    .row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
    label { font-size: 13px; color: rgba(255,255,255,.88); }
    .action-bar {
      display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; padding: 7px;
      border-radius: 18px; background: linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
      border: 1px solid rgba(255,255,255,.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 10px 30px rgba(0,0,0,.14);
    }
    .performance-status {
      margin-top: 10px; padding: 10px; border-radius: 16px;
      background: linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.022)), radial-gradient(90% 90% at 50% 0%,rgba(34,211,238,.08),transparent 58%);
      border: 1px solid rgba(255,255,255,.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
    }
    .energy-topline, .audio-topline {
      display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 7px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.52);
    }
    .energy-topline strong, .audio-topline span:last-child { color: rgba(186,230,253,.82); font-weight: 800; }
    .energy-meter, .audio-meter {
      position: relative; height: 7px; overflow: hidden; border-radius: 999px;
      background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.07); box-shadow: inset 0 1px 3px rgba(0,0,0,.45);
    }
    .energy-meter span, .audio-meter span {
      position: absolute; inset: 0 auto 0 0; width: 0%; border-radius: inherit;
      background: linear-gradient(90deg,rgba(125,211,252,.95),rgba(192,132,252,.86),rgba(52,211,153,.86));
      box-shadow: 0 0 18px rgba(125,211,252,.20); transition: width .18s ease;
    }
    .audio-topline { margin-top: 9px; }
    .audio-meter span { background: linear-gradient(90deg,rgba(52,211,153,.88),rgba(34,211,238,.92)); box-shadow: 0 0 18px rgba(52,211,153,.18); }
    body.energy-calm .energy-topline strong { color: rgba(186,230,253,.95); }
    body.energy-build .energy-topline strong { color: rgba(216,180,254,.95); }
    body.energy-peak .energy-topline strong { color: rgba(252,211,77,.95); }
    body.energy-release .energy-topline strong { color: rgba(167,243,208,.95); }
    .performance-mode-row { display: grid; grid-template-columns: .85fr repeat(4,1fr); gap: 6px; margin-top: 10px; }
    .stage-btn {
      min-height: 30px; border-radius: 11px; border: 1px solid rgba(255,255,255,.09);
      background: linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025));
      color: rgba(255,255,255,.62);
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 9px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; cursor: pointer;
      transition: transform .16s ease, border-color .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease;
    }
    .stage-btn:hover { transform: translateY(-1px); color: rgba(255,255,255,.88); border-color: rgba(125,211,252,.28); background: linear-gradient(180deg,rgba(34,211,238,.11),rgba(255,255,255,.03)); }
    .stage-btn.is-active { color: #eefcff; border-color: rgba(125,211,252,.48); background: linear-gradient(180deg,rgba(34,211,238,.19),rgba(192,132,252,.08)); box-shadow: 0 0 0 1px rgba(125,211,252,.10), 0 10px 24px rgba(8,145,178,.10); }
    body.energy-peak .stage-btn[data-stage="peak"].is-active { border-color: rgba(252,211,77,.54); background: linear-gradient(180deg,rgba(252,211,77,.20),rgba(244,63,94,.08)); box-shadow: 0 0 0 1px rgba(252,211,77,.10), 0 10px 24px rgba(245,158,11,.10); }
    body.energy-build .stage-btn[data-stage="build"].is-active { border-color: rgba(216,180,254,.54); background: linear-gradient(180deg,rgba(192,132,252,.20),rgba(34,211,238,.06)); }
    body.energy-release .stage-btn[data-stage="release"].is-active { border-color: rgba(167,243,208,.54); background: linear-gradient(180deg,rgba(52,211,153,.18),rgba(34,211,238,.05)); }
    .action-btn {
      position: relative; overflow: hidden; min-height: 54px; padding: 8px; border-radius: 14px;
      border: 1px solid rgba(255,255,255,.10); background: linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.035));
      color: rgba(255,255,255,.88); font-size: 11px; font-weight: 760; letter-spacing: -.01em; cursor: pointer;
      display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
      transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease;
    }
    .action-btn::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 0%,rgba(255,255,255,.14),transparent 58%); opacity: .7; pointer-events: none; }
    .action-btn:hover { transform: translateY(-1px); border-color: rgba(255,255,255,.22); background: linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.05)); box-shadow: 0 10px 24px rgba(0,0,0,.18); }
    .action-icon { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 999px; font-size: 13px; line-height: 1; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.08); color: rgba(186,230,253,.95); }
    .action-btn-accent { border-color: rgba(125,211,252,.26); background: linear-gradient(180deg,rgba(34,211,238,.16),rgba(59,130,246,.08)); color: #eefcff; }
    .action-btn-accent:hover { border-color: rgba(125,211,252,.46); box-shadow: 0 12px 28px rgba(8,145,178,.16); }
    .action-btn-strong { background: linear-gradient(180deg,rgba(34,211,238,.22),rgba(59,130,246,.12)); border-color: rgba(125,211,252,.34); }
    .action-btn-strong.is-playing { background: linear-gradient(180deg,rgba(192,132,252,.24),rgba(34,211,238,.14)); border-color: rgba(192,132,252,.52); color: #fff; box-shadow: 0 0 0 1px rgba(192,132,252,.14), 0 12px 30px rgba(168,85,247,.14); }
    .action-btn-audio.is-audio { background: linear-gradient(180deg,rgba(52,211,153,.24),rgba(34,211,238,.10)); border-color: rgba(52,211,153,.52); color: #f0fff9; box-shadow: 0 0 0 1px rgba(52,211,153,.14), 0 12px 30px rgba(16,185,129,.14); }
    .action-btn-audio.is-audio .action-icon { color: rgba(220,252,231,.96); background: rgba(52,211,153,.14); border-color: rgba(52,211,153,.22); box-shadow: 0 0 18px rgba(52,211,153,.22); }
    .action-btn-audio.is-audio-error { border-color: rgba(248,113,113,.48); color: rgba(254,226,226,.96); }
    .action-btn-audio.is-audio-nosignal { border-color: rgba(250,204,21,.38); color: rgba(254,249,195,.96); }
    .action-btn-camera.is-camera { background: linear-gradient(180deg,rgba(192,132,252,.24),rgba(34,211,238,.10)); border-color: rgba(192,132,252,.52); color: #f8f0ff; box-shadow: 0 0 0 1px rgba(192,132,252,.14), 0 12px 30px rgba(168,85,247,.14); }
    .action-btn-camera.is-camera .action-icon { color: rgba(250,245,255,.96); background: rgba(192,132,252,.14); border-color: rgba(192,132,252,.24); box-shadow: 0 0 18px rgba(192,132,252,.22); }
    .action-btn-camera.is-camera-error { border-color: rgba(248,113,113,.50); color: rgba(254,226,226,.98); }

    /* V13.8 Header & live controls polish */
    .action-bar { grid-template-columns: repeat(6,minmax(0,1fr)); }
    .action-btn.is-playing,
    .action-btn-audio.is-audio,
    .action-btn-camera.is-camera {
      transform: translateY(-1px);
    }
    .action-btn.is-playing::before,
    .action-btn-audio.is-audio::before,
    .action-btn-camera.is-camera::before {
      content: "ON";
      position: absolute; top: 5px; right: 6px; z-index: 2;
      padding: 2px 5px; border-radius: 999px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 7px; font-weight: 950; letter-spacing: .11em;
      color: #fff; border: 1px solid rgba(255,255,255,.24);
      background: rgba(15,23,42,.72); box-shadow: 0 0 14px rgba(255,255,255,.10);
    }
    .action-btn.is-playing::before { background: rgba(192,132,252,.78); box-shadow: 0 0 18px rgba(192,132,252,.34); }
    .action-btn-audio.is-audio::before { background: rgba(16,185,129,.82); box-shadow: 0 0 18px rgba(52,211,153,.34); }
    .action-btn-camera.is-camera::before { background: rgba(59,130,246,.82); box-shadow: 0 0 18px rgba(96,165,250,.34); }
    .action-btn.is-playing .action-icon,
    .action-btn-audio.is-audio .action-icon,
    .action-btn-camera.is-camera .action-icon { transform: scale(1.08); }
    .action-btn-audio.is-audio { animation: auraLiveControlPulse 1.85s ease-in-out infinite; }
    .action-btn-camera.is-camera { animation: auraCameraControlPulse 2.2s ease-in-out infinite; }
    @keyframes auraLiveControlPulse { 0%,100% { box-shadow: 0 0 0 1px rgba(52,211,153,.14), 0 12px 30px rgba(16,185,129,.14); } 50% { box-shadow: 0 0 0 1px rgba(52,211,153,.24), 0 14px 34px rgba(16,185,129,.28), 0 0 26px rgba(52,211,153,.14); } }
    @keyframes auraCameraControlPulse { 0%,100% { box-shadow: 0 0 0 1px rgba(192,132,252,.14), 0 12px 30px rgba(168,85,247,.14); } 50% { box-shadow: 0 0 0 1px rgba(96,165,250,.24), 0 14px 34px rgba(59,130,246,.22), 0 0 26px rgba(192,132,252,.12); } }

    .performance-status { padding: 11px; }
    .engine-live-row {
      display: grid; grid-template-columns: 1fr 1fr auto auto; gap: 8px; align-items: stretch;
      margin-top: 10px;
    }
    .engine-pill {
      min-height: 36px; padding: 8px 9px; border-radius: 14px;
      border: 1px solid rgba(255,255,255,.09);
      background: linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.022));
      display: flex; align-items: center; justify-content: space-between; gap: 8px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      text-transform: uppercase;
    }
    .engine-pill-label { color: rgba(255,255,255,.48); font-size: 9px; letter-spacing: .13em; font-weight: 850; }
    .engine-pill strong { color: rgba(238,252,255,.88); font-size: 11px; letter-spacing: .08em; font-weight: 900; }
    .engine-pill.is-on { border-color: rgba(52,211,153,.35); background: linear-gradient(180deg,rgba(52,211,153,.13),rgba(34,211,238,.035)); }
    .engine-pill.is-on strong { color: rgba(220,252,231,.98); }
    .beat-pulse {
      width: 9px; height: 9px; border-radius: 999px; flex: 0 0 auto;
      background: rgba(148,163,184,.38); box-shadow: 0 0 0 rgba(125,211,252,0);
      transition: transform .08s ease, background .08s ease, box-shadow .08s ease;
    }
    .beat-pulse.is-hot { transform: scale(1.55); background: #f87171; box-shadow: 0 0 18px rgba(248,113,113,.72), 0 0 34px rgba(34,211,238,.22); }
    .bpm-lock { color: rgba(167,243,208,.72); font-size: 8px; margin-left: 4px; letter-spacing: .1em; }
    .bpm-search { color: rgba(250,204,21,.72); font-size: 8px; margin-left: 4px; letter-spacing: .1em; }
    .engine-live-row .tap-btn, .engine-live-row .bpm-clear { height: 36px; align-self: stretch; }
    .engine-live-row .tap-btn { padding: 0 11px; }
    .audio-meter { margin-top: 8px; }

    .camera-reactor-panel { padding: 16px; }
    .camera-reactor-panel .group-heading { margin-bottom: 14px; }
    .camera-mode-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-bottom: 14px; }
    .camera-mode-btn {
      min-height: 40px; border-radius: 14px; border: 1px solid rgba(255,255,255,.09);
      background: linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025));
      color: rgba(255,255,255,.62);
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
      transition: transform .16s ease, border-color .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease;
    }
    .camera-mode-btn:hover { transform: translateY(-1px); color: rgba(255,255,255,.88); border-color: rgba(192,132,252,.36); background: linear-gradient(180deg,rgba(192,132,252,.13),rgba(255,255,255,.03)); }
    .camera-mode-btn.is-active { color: #fff; border-color: rgba(192,132,252,.58); background: linear-gradient(180deg,rgba(192,132,252,.22),rgba(34,211,238,.07)); box-shadow: 0 0 0 1px rgba(192,132,252,.10), 0 10px 24px rgba(168,85,247,.10); }
    .camera-reactor-panel.is-hidden { display: none; }
    .collapsible-group .group-heading { cursor: pointer; user-select: none; }
    .collapsible-actions { display: inline-flex; align-items: center; gap: 8px; }
    .collapse-btn {
      width: 34px; height: 30px; display: inline-grid; place-items: center; border-radius: 12px;
      border: 1px solid rgba(255,255,255,.10); background: linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025));
      color: rgba(238,252,255,.82); cursor: pointer;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 14px; font-weight: 900; line-height: 1;
      transition: transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
    }
    .collapse-btn:hover { transform: translateY(-1px); border-color: rgba(125,211,252,.42); background: linear-gradient(180deg,rgba(34,211,238,.13),rgba(255,255,255,.035)); color: #fff; }
    .collapse-icon { display: inline-block; transform: rotate(0deg); transition: transform .18s ease; }
    .collapsible-group:not(.is-collapsed) .collapse-icon { transform: rotate(90deg); }
    .collapsible-content { display: block; }
    .collapsible-group.is-collapsed .collapsible-content { display: none; }

    /* V13.7 Performance Panel UX Rework */
    .group[data-ux-priority="setup"], .group[data-ux-priority="advanced"] {
      background: linear-gradient(180deg, rgba(255,255,255,.038), rgba(255,255,255,.018));
      border-color: rgba(255,255,255,.075);
    }
    .group[data-ux-priority="advanced"] .group-title::before {
      background: rgba(192,132,252,.66);
      box-shadow: 0 0 12px rgba(192,132,252,.28);
    }
    .fine-tune-content { display: grid; gap: 12px; }
    .fine-tune-section {
      padding: 10px; border-radius: 18px;
      background: rgba(255,255,255,.025);
      border: 1px solid rgba(255,255,255,.065);
    }
    .fine-tune-heading {
      display: flex; align-items: center; justify-content: space-between; gap: 10px;
      margin-bottom: 10px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 10px; font-weight: 850; letter-spacing: .18em; text-transform: uppercase;
      color: rgba(255,255,255,.46);
    }
    .fine-tune-heading .dice-btn { width: 30px; height: 28px; border-radius: 11px; }

    .shader-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
    .shader-card {
      position: relative; min-height: 78px; overflow: hidden; border: 1px solid rgba(255,255,255,.10);
      border-radius: 18px; background: #080812; color: white; text-align: left; cursor: pointer;
      transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, filter .18s ease;
    }
    .shader-card:hover { transform: translateY(-1px); border-color: rgba(255,255,255,.34); }
    .shader-card.active { border-color: rgba(125,211,252,.92); box-shadow: 0 0 0 1px rgba(125,211,252,.35), 0 18px 42px rgba(0,0,0,.32), 0 0 36px rgba(34,211,238,.12); }
    .shader-card.shuffle-card { grid-column: 1/-1; min-height: 66px; }
    .shader-card.shuffle-card .preview { background: radial-gradient(circle at 18% 42%,rgba(125,211,252,.72),transparent 20%), radial-gradient(circle at 58% 38%,rgba(192,132,252,.62),transparent 22%), radial-gradient(circle at 82% 62%,rgba(52,211,153,.45),transparent 20%), linear-gradient(135deg,rgba(4,7,18,.96),rgba(12,55,74,.75),rgba(31,15,70,.72)); opacity: .92; }
    .shader-card.shuffle-card.active { border-color: rgba(192,132,252,.92); box-shadow: 0 0 0 1px rgba(192,132,252,.35), 0 18px 42px rgba(0,0,0,.32), 0 0 44px rgba(192,132,252,.16); }
    .shader-transition-veil { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; background: radial-gradient(circle at 50% 45%,rgba(125,211,252,.10),transparent 30%), radial-gradient(circle at 45% 50%,rgba(192,132,252,.08),transparent 42%); mix-blend-mode: screen; transition: opacity 2.8s ease; }
    .shader-transition-veil.is-active { opacity: .18; }
    .shader-card .preview { position: absolute; inset: 0; background: var(--preview); opacity: .85; transform: scale(1.03); }
    .shader-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top,rgba(0,0,0,.84),rgba(0,0,0,.18),transparent); }
    .shader-card .meta { position: absolute; z-index: 1; left: 10px; right: 10px; bottom: 9px; display: flex; gap: 8px; align-items: baseline; }
    .shader-card .num { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 11px; color: #c084fc; }
    .shader-card .name { font-size: 13px; font-weight: 750; line-height: 1; }
    /* V13.5 Shader Library Visual Rework */
    .shader-card {
      --p1: var(--aura-p1, #00f2c3);
      --p2: var(--aura-p2, #8a3cff);
      --bg: var(--aura-bg, #05091c);
    }
    .shader-card .preview {
      opacity: .96;
      transform: scale(1.04);
      filter: saturate(1.12) contrast(1.08);
      transition: transform .38s ease, filter .38s ease, opacity .38s ease;
    }
    .shader-card:hover .preview, .shader-card.active .preview { transform: scale(1.10); filter: saturate(1.32) contrast(1.18) brightness(1.06); }
    .shader-card .preview::before, .shader-card .preview::after {
      content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
    }
    .shader-card .preview::after { opacity: .36; background: repeating-linear-gradient(0deg, rgba(255,255,255,.16) 0 1px, transparent 1px 5px); mix-blend-mode: overlay; }
    .shader-card.active::before {
      content: "LIVE"; position: absolute; top: 8px; right: 8px; z-index: 3;
      padding: 3px 6px; border-radius: 999px; border: 1px solid rgba(125,211,252,.46);
      background: rgba(3,7,18,.58); color: rgba(224,252,255,.96);
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 8px; font-weight: 900; letter-spacing: .14em; box-shadow: 0 0 18px rgba(34,211,238,.22);
    }
    .shader-card .meta { align-items: flex-end; justify-content: space-between; gap: 8px; }
    .shader-card .shader-title-wrap { min-width: 0; display: grid; gap: 5px; }
    .shader-card .name { display: block; font-size: 12.5px; line-height: 1.02; text-shadow: 0 2px 12px rgba(0,0,0,.65); }
    .shader-card .num { align-self: flex-start; padding-top: 1px; min-width: 20px; color: rgba(186,230,253,.92); text-shadow: 0 0 14px rgba(34,211,238,.35); }
    .shader-tags { display: flex; flex-wrap: wrap; gap: 4px; max-width: 100%; }
    .shader-tag {
      display: inline-flex; align-items: center; height: 15px; padding: 0 5px; border-radius: 999px;
      background: rgba(255,255,255,.075); border: 1px solid rgba(255,255,255,.10);
      color: rgba(224,242,254,.74); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 7.5px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase;
    }
    .shuffle-card .shader-tag { color: rgba(244,232,255,.82); border-color: rgba(192,132,252,.18); background: rgba(192,132,252,.10); }
    .shader-card.shuffle-card { min-height: 78px; }
    .shader-card.shuffle-card .name { font-size: 13px; }
    .shader-card.shuffle-card .num { color: rgba(216,180,254,.95); }
    .shader-card.shuffle-card .preview { background:
      radial-gradient(circle at 50% 50%, rgba(255,255,255,.22), transparent 10%),
      conic-gradient(from 90deg at 50% 50%, var(--p1), var(--p2), rgba(255,255,255,.55), var(--p1)),
      radial-gradient(circle at 50% 50%, transparent 0 14%, rgba(0,0,0,.72) 58%, rgba(0,0,0,.96) 100%) !important;
    }
    .shader-card.shuffle-card .preview::before { background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,.35) 0 2deg, transparent 2deg 18deg); opacity: .42; }
    .preview-aura-vj { background: radial-gradient(circle at 45% 52%, color-mix(in srgb, var(--p1) 90%, white 10%), transparent 18%), radial-gradient(circle at 68% 44%, color-mix(in srgb, var(--p2) 86%, white 14%), transparent 22%), linear-gradient(135deg, var(--bg), color-mix(in srgb, var(--bg) 55%, var(--p1) 45%), color-mix(in srgb, var(--bg) 50%, var(--p2) 50%)) !important; }
    .preview-aura-vj::before { background: repeating-linear-gradient(102deg, transparent 0 14px, rgba(255,255,255,.15) 15px 17px, transparent 18px 31px); opacity: .32; }
    .preview-nebula { background: radial-gradient(circle at 35% 38%, color-mix(in srgb, var(--p1) 80%, white 20%), transparent 22%), radial-gradient(circle at 64% 58%, color-mix(in srgb, var(--p2) 82%, white 18%), transparent 18%), radial-gradient(circle at 52% 50%, rgba(255,255,255,.22), transparent 7%), linear-gradient(135deg, var(--bg), #02030a) !important; }
    .preview-nebula::before { background: radial-gradient(circle at 20% 28%, rgba(255,255,255,.65) 0 1px, transparent 2px), radial-gradient(circle at 72% 30%, rgba(255,255,255,.42) 0 1px, transparent 2px), radial-gradient(circle at 46% 70%, rgba(255,255,255,.52) 0 1px, transparent 2px); }
    .preview-plasma-drift { background: linear-gradient(135deg, var(--p1), var(--p2), color-mix(in srgb, var(--p1) 54%, var(--p2) 46%), var(--bg)) !important; }
    .preview-plasma-drift::before { background: radial-gradient(ellipse at 30% 42%, rgba(255,255,255,.34), transparent 28%), radial-gradient(ellipse at 70% 55%, rgba(0,0,0,.38), transparent 34%); }
    .preview-aurora-flow { background: linear-gradient(145deg, var(--bg), color-mix(in srgb, var(--p1) 72%, #00ff88 28%), color-mix(in srgb, var(--p2) 72%, #ffae00 28%)) !important; }
    .preview-aurora-flow::before { background: repeating-linear-gradient(118deg, transparent 0 9px, rgba(255,255,255,.23) 10px 13px, transparent 14px 26px); filter: blur(.5px); }
    .preview-chromatic-glitch { background: linear-gradient(90deg, var(--p2), var(--p1), rgba(255,255,255,.58), var(--p2)) !important; }
    .preview-chromatic-glitch::before { background: repeating-linear-gradient(0deg, rgba(255,255,255,.48) 0 1px, transparent 1px 5px), repeating-linear-gradient(90deg, transparent 0 18px, rgba(0,0,0,.34) 18px 24px, transparent 24px 31px); opacity: .58; }
    .preview-signal-bloom { background: radial-gradient(circle at 50% 45%, rgba(255,255,255,.84), transparent 8%), radial-gradient(circle at 43% 50%, var(--p1), transparent 30%), radial-gradient(circle at 60% 52%, var(--p2), transparent 34%), linear-gradient(135deg, var(--bg), #02030a) !important; }
    .preview-signal-bloom::before { background: repeating-radial-gradient(circle at 50% 50%, transparent 0 9px, rgba(255,255,255,.19) 10px 12px, transparent 13px 26px); }
    .preview-sub-bass-monolith { background: linear-gradient(180deg, rgba(255,255,255,.04), transparent), linear-gradient(90deg, var(--bg), color-mix(in srgb, var(--bg) 70%, var(--p1) 30%), var(--bg)) !important; }
    .preview-sub-bass-monolith::before { background: linear-gradient(90deg, transparent 0 10%, color-mix(in srgb, var(--p1) 82%, white 18%) 11% 20%, transparent 21% 30%, color-mix(in srgb, var(--p2) 84%, white 16%) 31% 48%, transparent 49% 58%, color-mix(in srgb, var(--p1) 70%, var(--p2) 30%) 59% 70%, transparent 71% 100%); filter: blur(2px); opacity: .75; }
    .preview-gyroid-reactor { background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--p1) 70%, white 30%), transparent 12%), linear-gradient(135deg, var(--bg), color-mix(in srgb, var(--bg) 68%, var(--p2) 32%)) !important; }
    .preview-gyroid-reactor::before { background: repeating-linear-gradient(35deg, transparent 0 6px, color-mix(in srgb, var(--p1) 72%, transparent 28%) 7px 9px, transparent 10px 17px), repeating-linear-gradient(125deg, transparent 0 8px, color-mix(in srgb, var(--p2) 65%, transparent 35%) 9px 11px, transparent 12px 20px); opacity: .58; }
    .preview-acid-rain { background: linear-gradient(180deg, color-mix(in srgb, var(--p1) 38%, var(--bg) 62%), var(--bg)) !important; }
    .preview-acid-rain::before { background: repeating-linear-gradient(94deg, transparent 0 9px, color-mix(in srgb, var(--p1) 78%, white 22%) 10px 12px, transparent 13px 24px), repeating-linear-gradient(88deg, transparent 0 17px, color-mix(in srgb, var(--p2) 74%, white 26%) 18px 20px, transparent 21px 31px); opacity: .68; filter: blur(.5px); }
    .preview-glitch-stream { background: radial-gradient(ellipse at 50% 20%, rgba(255,255,255,.28), transparent 24%), linear-gradient(160deg, var(--bg), color-mix(in srgb, var(--bg) 62%, var(--p1) 38%), color-mix(in srgb, var(--bg) 58%, var(--p2) 42%)) !important; }
    .preview-glitch-stream::before { background: repeating-linear-gradient(110deg, transparent 0 11px, color-mix(in srgb, var(--p1) 82%, white 18%) 12px 14px, transparent 15px 29px), repeating-linear-gradient(18deg, transparent 0 18px, color-mix(in srgb, var(--p2) 80%, white 20%) 19px 22px, transparent 23px 46px); opacity: .7; }
    .preview-sdf-morph { background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--p2) 88%, white 12%) 0 12%, transparent 14%), radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--p1) 72%, transparent 28%) 0 27%, transparent 29%), linear-gradient(135deg, var(--bg), #04040e) !important; }
    .preview-sdf-morph::before { background: repeating-radial-gradient(circle at 50% 50%, transparent 0 8px, rgba(255,255,255,.22) 9px 10px, transparent 11px 20px); }
    .preview-blade-tunnel { background: radial-gradient(circle at 50% 50%, #000 0 7%, transparent 8%), repeating-conic-gradient(from 0deg at 50% 50%, color-mix(in srgb, var(--p1) 86%, white 14%) 0deg 3deg, transparent 4deg 8deg, color-mix(in srgb, var(--p2) 88%, white 12%) 9deg 12deg, transparent 13deg 20deg), radial-gradient(circle at 50% 50%, transparent 0 11%, color-mix(in srgb, var(--p1) 35%, var(--bg) 65%) 36%, var(--bg) 100%) !important; }
    .preview-blade-tunnel::before { background: repeating-radial-gradient(circle at 50% 50%, transparent 0 8px, rgba(255,255,255,.22) 9px 11px, transparent 12px 24px), repeating-linear-gradient(0deg, transparent 0 13px, color-mix(in srgb, var(--p2) 66%, transparent 34%) 14px 17px, transparent 18px 31px); opacity: .62; }
    .preview-pressure-field { background: radial-gradient(circle at 30% 46%, var(--p1), transparent 12%), radial-gradient(circle at 68% 54%, var(--p2), transparent 14%), linear-gradient(135deg, var(--bg), #02060d) !important; }
    .preview-pressure-field::before { background: repeating-radial-gradient(circle at 34% 48%, transparent 0 8px, rgba(255,255,255,.28) 9px 10px, transparent 11px 19px), repeating-radial-gradient(circle at 68% 54%, transparent 0 10px, rgba(255,255,255,.20) 11px 12px, transparent 13px 24px); }
    .preview-thin-film { background: conic-gradient(from 110deg at 50% 50%, var(--p1), var(--p2), rgba(255,255,255,.55), var(--p1), color-mix(in srgb, var(--p2) 64%, var(--bg) 36%)) !important; }
    .preview-thin-film::before { background: repeating-radial-gradient(ellipse at 50% 50%, transparent 0 6px, rgba(255,255,255,.20) 7px 8px, transparent 9px 17px); }
    .preview-pixel-forest { background: linear-gradient(180deg,var(--bg) 0%,color-mix(in srgb, var(--bg) 70%, var(--p1) 30%) 38%,var(--bg) 100%), repeating-linear-gradient(90deg,color-mix(in srgb, var(--p1) 56%, transparent 44%) 0 2px,transparent 2px 10px), repeating-linear-gradient(0deg,color-mix(in srgb, var(--p2) 46%, transparent 54%) 0 1px,transparent 1px 8px), radial-gradient(circle at 52% 58%,color-mix(in srgb, var(--p2) 34%, transparent 66%),transparent 24%) !important; }
    .preview-pixel-forest::before { background: repeating-linear-gradient(90deg,color-mix(in srgb, var(--p1) 58%, transparent 42%) 0 1px,transparent 1px 7px), repeating-linear-gradient(0deg,color-mix(in srgb, var(--p2) 36%, transparent 64%) 0 1px,transparent 1px 9px), linear-gradient(180deg,color-mix(in srgb, var(--p1) 22%, transparent 78%),transparent 58%); opacity: .70; }
    @media (prefers-reduced-motion: no-preference) {
      .shader-card.active .preview::before { animation: auraPreviewPulse 1.6s ease-in-out infinite alternate; }
      .shader-card:hover .preview::before { animation: auraPreviewPulse 1.2s ease-in-out infinite alternate; }
      .preview-acid-rain::before, .preview-glitch-stream::before { animation: auraPreviewDrift 1.8s linear infinite; }
      .preview-blade-tunnel::before, .preview-pixel-forest::before { animation: auraPreviewTunnel 2.2s linear infinite; }
    }
    @keyframes auraPreviewPulse { from { opacity: .35; transform: scale(1); } to { opacity: .72; transform: scale(1.06); } }
    @keyframes auraPreviewDrift { from { transform: translateY(-8px); } to { transform: translateY(8px); } }
    @keyframes auraPreviewTunnel { from { transform: scale(1) rotate(0deg); } to { transform: scale(1.08) rotate(8deg); } }

    /* V13.5.1 Shader Library Polish: always-on previews, cleaner cards, louder LIVE badge */
    .shader-card .preview {
      animation: auraPreviewBreathe 4.8s ease-in-out infinite alternate;
      transform-origin: 50% 50%;
      will-change: transform, filter, opacity;
    }
    .shader-card .preview::before {
      animation: auraPreviewLayerMotion 3.6s ease-in-out infinite alternate;
      transform-origin: 50% 50%;
      opacity: .62;
      will-change: transform, opacity, filter;
    }
    .shader-card .preview::after {
      animation: auraPreviewScan 3.1s linear infinite;
      opacity: .30;
      will-change: transform, opacity;
    }
    .shader-card:hover .preview, .shader-card.active .preview {
      transform: scale(1.11);
      filter: saturate(1.34) contrast(1.20) brightness(1.07);
    }
    .shader-card.active::before {
      content: "LIVE";
      top: 7px; right: 7px;
      padding: 4px 7px;
      border-radius: 999px;
      border: 1px solid rgba(254,202,202,.88);
      background: linear-gradient(180deg, rgba(239,68,68,.98), rgba(153,27,27,.96));
      color: #fff;
      text-shadow: 0 1px 5px rgba(0,0,0,.45);
      box-shadow: 0 0 0 1px rgba(248,113,113,.28), 0 0 18px rgba(239,68,68,.62), 0 0 38px rgba(239,68,68,.32);
      animation: auraLiveBadgePulse .82s ease-in-out infinite alternate;
    }
    .shader-card .shader-title-wrap { gap: 0; }
    .shader-card .name { font-size: 13px; letter-spacing: -.01em; }
    .shader-tags, .shader-tag { display: none !important; }

    /* More faithful static compositions, still palette-aware */
    .preview-blade-tunnel {
      background:
        radial-gradient(circle at 50% 50%, #000 0 8%, rgba(0,0,0,.74) 9%, transparent 13%),
        repeating-conic-gradient(from 5deg at 50% 50%, color-mix(in srgb, var(--p1) 88%, white 12%) 0deg 2.2deg, transparent 2.8deg 7deg, color-mix(in srgb, var(--p2) 86%, white 14%) 7.5deg 10deg, transparent 10.5deg 17deg),
        radial-gradient(circle at 50% 50%, transparent 0 9%, color-mix(in srgb, var(--p1) 42%, var(--bg) 58%) 30%, color-mix(in srgb, var(--p2) 35%, var(--bg) 65%) 55%, var(--bg) 100%) !important;
    }
    .preview-blade-tunnel::before {
      background:
        repeating-radial-gradient(circle at 50% 50%, transparent 0 7px, rgba(255,255,255,.26) 8px 10px, transparent 11px 22px),
        repeating-linear-gradient(0deg, transparent 0 10px, color-mix(in srgb, var(--p2) 72%, transparent 28%) 11px 14px, transparent 15px 27px),
        linear-gradient(100deg, transparent 0 35%, color-mix(in srgb, var(--p1) 72%, transparent 28%) 36% 39%, transparent 40% 100%);
      opacity: .72;
    }
    .preview-glitch-stream::before {
      background:
        linear-gradient(112deg, transparent 0 20%, color-mix(in srgb, var(--p1) 88%, white 12%) 21% 23%, transparent 24% 44%, color-mix(in srgb, var(--p2) 90%, white 10%) 45% 47%, transparent 48% 100%),
        repeating-linear-gradient(0deg, transparent 0 9px, rgba(255,255,255,.24) 10px 11px, transparent 12px 24px),
        repeating-linear-gradient(94deg, transparent 0 10px, color-mix(in srgb, var(--p1) 76%, transparent 24%) 11px 13px, transparent 14px 26px);
      opacity: .74;
    }
    .preview-gyroid-reactor::before {
      background:
        repeating-linear-gradient(33deg, transparent 0 5px, color-mix(in srgb, var(--p1) 84%, transparent 16%) 6px 8px, transparent 9px 16px),
        repeating-linear-gradient(123deg, transparent 0 7px, color-mix(in srgb, var(--p2) 78%, transparent 22%) 8px 10px, transparent 11px 19px),
        radial-gradient(circle at 50% 50%, rgba(255,255,255,.34), transparent 19%);
      opacity: .70;
    }
    .preview-sub-bass-monolith::before {
      background:
        linear-gradient(90deg, transparent 0 8%, color-mix(in srgb, var(--p1) 86%, white 14%) 9% 18%, transparent 19% 29%, color-mix(in srgb, var(--p2) 86%, white 14%) 30% 48%, transparent 49% 56%, color-mix(in srgb, var(--p1) 65%, var(--p2) 35%) 57% 70%, transparent 71% 100%),
        repeating-linear-gradient(0deg, transparent 0 8px, rgba(255,255,255,.13) 9px 10px, transparent 11px 18px);
      opacity: .80; filter: blur(1.6px);
    }
    .preview-pressure-field::before {
      background:
        repeating-radial-gradient(circle at 32% 48%, transparent 0 7px, color-mix(in srgb, var(--p1) 70%, white 30%) 8px 9px, transparent 10px 18px),
        repeating-radial-gradient(circle at 70% 55%, transparent 0 9px, color-mix(in srgb, var(--p2) 68%, white 32%) 10px 11px, transparent 12px 22px),
        radial-gradient(circle at 51% 51%, rgba(255,255,255,.24), transparent 16%);
      opacity: .70;
    }
    .preview-acid-rain::before {
      background:
        repeating-linear-gradient(92deg, transparent 0 7px, color-mix(in srgb, var(--p1) 84%, white 16%) 8px 10px, transparent 11px 20px),
        repeating-linear-gradient(88deg, transparent 0 15px, color-mix(in srgb, var(--p2) 82%, white 18%) 16px 18px, transparent 19px 29px),
        linear-gradient(180deg, rgba(255,255,255,.18), transparent 55%);
      opacity: .72; filter: blur(.45px);
    }
    .preview-pixel-forest::before { background: repeating-linear-gradient(90deg,color-mix(in srgb, var(--p1) 58%, transparent 42%) 0 1px,transparent 1px 7px), repeating-linear-gradient(0deg,color-mix(in srgb, var(--p2) 36%, transparent 64%) 0 1px,transparent 1px 9px), linear-gradient(180deg,color-mix(in srgb, var(--p1) 22%, transparent 78%),transparent 58%); opacity: .70; }
    @media (prefers-reduced-motion: no-preference) {
      .shader-card .preview { animation: auraPreviewBreathe 4.8s ease-in-out infinite alternate !important; }
      .shader-card .preview::before { animation: auraPreviewLayerMotion 3.6s ease-in-out infinite alternate !important; }
      .shader-card .preview::after { animation: auraPreviewScan 3.1s linear infinite !important; }
      .preview-acid-rain::before, .preview-glitch-stream::before { animation: auraPreviewVerticalFlow 1.9s linear infinite !important; }
      .preview-blade-tunnel::before, .preview-pixel-forest::before { animation: auraPreviewTunnelFlow 2.25s linear infinite !important; }
      .preview-pressure-field::before, .preview-signal-bloom::before, .preview-sdf-morph::before, .preview-thin-film::before { animation: auraPreviewWavePulse 3.2s ease-in-out infinite alternate !important; }
    }


    /* V13.6 Real Shader Preview Snapshots: real WebGL frame under lightweight CSS motion */
    .shader-card .preview .real-preview-img {
      position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
      opacity: 0; transform: scale(1.02); transition: opacity .45s ease, filter .45s ease, transform .45s ease;
      z-index: 0; pointer-events: none; mix-blend-mode: normal;
    }
    .shader-card.has-real-preview .preview .real-preview-img { opacity: .93; filter: saturate(1.18) contrast(1.08) brightness(.96); }
    .shader-card.preview-generating .preview::after { opacity: .48; }
    .shader-card .preview::before, .shader-card .preview::after { z-index: 1; }
    .shader-card.has-real-preview .preview::before { opacity: .26; mix-blend-mode: screen; }
    .shader-card.has-real-preview .preview::after { opacity: .22; mix-blend-mode: overlay; }
    .shader-card.has-real-preview:hover .preview .real-preview-img, .shader-card.has-real-preview.active .preview .real-preview-img { filter: saturate(1.35) contrast(1.15) brightness(1.04); transform: scale(1.08); }

    /* V13.10.1 Preview Refresh: real shader snapshots stay alive and respond to palette changes */
    .shader-card.has-real-preview .preview .real-preview-img {
      animation: auraRealPreviewFloat 6.8s ease-in-out infinite alternate;
      transform-origin: 50% 50%;
    }
    .shader-card.preview-stale .preview .real-preview-img {
      opacity: .22;
      filter: saturate(.75) contrast(.9) brightness(.55);
    }
    .shader-card.preview-stale .preview::before { opacity: .54 !important; }
    .shader-card.preview-stale .preview::after { opacity: .40 !important; }
    .shader-card.preview-generating .preview::after {
      animation: auraPreviewScan .95s linear infinite !important;
    }
    @keyframes auraRealPreviewFloat {
      0% { transform: scale(1.035) translate3d(-1.8%, -1.2%, 0); filter: saturate(1.12) contrast(1.04) brightness(.94); }
      45% { transform: scale(1.075) translate3d(1.4%, .7%, 0); filter: saturate(1.26) contrast(1.10) brightness(1.00); }
      100% { transform: scale(1.055) translate3d(.6%, -1.4%, 0); filter: saturate(1.18) contrast(1.08) brightness(.97); }
    }

    /* V13.8.1 Live status polish: controls + engine badges + consistent shader card titles */
    .action-btn.is-playing,
    .action-btn-audio.is-audio,
    .action-btn-camera.is-camera {
      border-color: rgba(254,202,202,.86) !important;
      background: linear-gradient(180deg, rgba(239,68,68,.28), rgba(127,29,29,.18)) !important;
      color: #fff !important;
      box-shadow: 0 0 0 1px rgba(248,113,113,.24), 0 0 22px rgba(239,68,68,.24), 0 12px 30px rgba(127,29,29,.18) !important;
      animation: auraLiveControlBadgePulse .95s ease-in-out infinite alternate !important;
    }
    .action-btn.is-playing::before,
    .action-btn-audio.is-audio::before,
    .action-btn-camera.is-camera::before {
      content: "ON" !important;
      background: linear-gradient(180deg, rgba(239,68,68,.98), rgba(153,27,27,.96)) !important;
      border: 1px solid rgba(254,202,202,.86) !important;
      color: #fff !important;
      text-shadow: 0 1px 5px rgba(0,0,0,.45);
      box-shadow: 0 0 0 1px rgba(248,113,113,.28), 0 0 18px rgba(239,68,68,.62), 0 0 38px rgba(239,68,68,.24) !important;
      animation: auraLiveBadgePulse .82s ease-in-out infinite alternate;
    }
    .action-btn.is-playing .action-icon,
    .action-btn-audio.is-audio .action-icon,
    .action-btn-camera.is-camera .action-icon {
      background: rgba(239,68,68,.18) !important;
      border-color: rgba(254,202,202,.40) !important;
      box-shadow: 0 0 18px rgba(239,68,68,.34) !important;
    }
    .engine-pill { position: relative; overflow: hidden; padding-right: 44px; }
    .engine-pill.is-on {
      border-color: rgba(254,202,202,.66) !important;
      background: linear-gradient(180deg, rgba(239,68,68,.18), rgba(34,211,238,.035)) !important;
      box-shadow: 0 0 0 1px rgba(248,113,113,.14), 0 0 18px rgba(239,68,68,.14);
    }
    .engine-pill.is-on::before {
      content: "LIVE";
      position: absolute; top: 7px; right: 7px; z-index: 2;
      padding: 3px 6px; border-radius: 999px;
      border: 1px solid rgba(254,202,202,.82);
      background: linear-gradient(180deg, rgba(239,68,68,.96), rgba(153,27,27,.92));
      color: #fff;
      font-size: 7px; font-weight: 950; letter-spacing: .12em;
      text-shadow: 0 1px 5px rgba(0,0,0,.45);
      box-shadow: 0 0 14px rgba(239,68,68,.46);
      animation: auraLiveBadgePulse .82s ease-in-out infinite alternate;
    }
    .bpm-engine-pill.is-searching {
      border-color: rgba(250,204,21,.45) !important;
      background: linear-gradient(180deg, rgba(250,204,21,.13), rgba(255,255,255,.025)) !important;
    }
    .beat-pulse {
      animation: auraBeatIdle 1.4s ease-in-out infinite alternate;
    }
    .beat-pulse.is-hot {
      animation: auraBeatHot .22s ease-out infinite alternate;
    }
    .bpm-detected, .bpm-candidate { color: rgba(255,255,255,.98) !important; }
    .bpm-source { color: rgba(186,230,253,.74); font-size: 8px; margin-left: 5px; letter-spacing: .1em; }
    .bpm-lock { color: rgba(254,202,202,.86) !important; }
    .bpm-search { color: rgba(250,204,21,.86); font-size: 8px; margin-left: 5px; letter-spacing: .1em; }


    /* V13.9 Camera Reactor UX Rework: MIC/BPM are technical status pills, not LIVE badges */
    .performance-status .engine-pill {
      padding: 8px 10px !important;
      padding-right: 10px !important;
      overflow: hidden !important;
      display: grid !important;
      grid-template-columns: auto minmax(0, 1fr) !important;
      align-items: center !important;
      column-gap: 8px !important;
      min-width: 0 !important;
    }
    .performance-status .engine-pill::before,
    .performance-status .engine-pill::after {
      content: none !important;
      display: none !important;
    }
    .performance-status .engine-pill-label {
      white-space: nowrap !important;
      min-width: max-content !important;
    }
    .performance-status .engine-pill strong {
      min-width: 0 !important;
      text-align: right !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      letter-spacing: .06em !important;
    }
    .performance-status .mic-engine-pill.is-on {
      border-color: rgba(34,211,238,.46) !important;
      background: linear-gradient(180deg, rgba(34,211,238,.13), rgba(52,211,153,.045)) !important;
      box-shadow: 0 0 0 1px rgba(34,211,238,.10), 0 0 16px rgba(34,211,238,.10) !important;
    }
    .performance-status .mic-engine-pill.is-on strong {
      color: rgba(238,252,255,.98) !important;
    }
    .performance-status .bpm-engine-pill {
      grid-template-columns: auto auto minmax(0, 1fr) !important;
    }
    .performance-status .bpm-engine-pill.is-on {
      border-color: rgba(34,211,238,.42) !important;
      background: linear-gradient(180deg, rgba(34,211,238,.12), rgba(192,132,252,.045)) !important;
      box-shadow: 0 0 0 1px rgba(34,211,238,.10), 0 0 16px rgba(34,211,238,.08) !important;
    }
    .performance-status .bpm-engine-pill.is-searching {
      border-color: rgba(250,204,21,.38) !important;
      background: linear-gradient(180deg, rgba(250,204,21,.10), rgba(255,255,255,.022)) !important;
    }
    .performance-status .bpm-engine-pill.is-locked {
      border-color: rgba(52,211,153,.44) !important;
      background: linear-gradient(180deg, rgba(52,211,153,.12), rgba(34,211,238,.035)) !important;
    }
    .performance-status .bpm-engine-pill.is-locked strong { color: rgba(220,252,231,.98) !important; }
    .performance-status .bpm-source,
    .performance-status .bpm-lock,
    .performance-status .bpm-search {
      display: inline-block !important;
      margin-left: 5px !important;
      font-size: 7px !important;
      vertical-align: baseline !important;
      letter-spacing: .08em !important;
    }
    .performance-status .bpm-lock { color: rgba(134,239,172,.92) !important; }
    .performance-status .bpm-search { color: rgba(250,204,21,.90) !important; }
    .performance-status .beat-pulse {
      width: 7px !important;
      height: 7px !important;
      align-self: center !important;
      justify-self: start !important;
    }
    .shader-card .meta {
      left: 9px !important; right: 9px !important; bottom: 8px !important;
      display: grid !important; grid-template-columns: auto minmax(0,1fr) !important;
      align-items: end !important; justify-content: start !important; gap: 8px !important;
      text-align: left !important;
    }
    .shader-card .num {
      align-self: end !important; min-width: 26px !important; height: 20px !important;
      display: inline-flex !important; align-items: center !important; justify-content: center !important;
      padding: 0 6px !important; border-radius: 999px;
      background: rgba(2,6,23,.58); border: 1px solid rgba(186,230,253,.22);
      color: rgba(224,252,255,.96) !important;
      font-size: 10px !important; line-height: 1 !important;
    }
    .shader-card .shader-title-wrap {
      display: block !important; min-width: 0 !important; text-align: left !important;
    }
    .shader-card .name {
      display: block !important; width: 100% !important; text-align: left !important;
      white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
      font-size: 13px !important; line-height: 1.05 !important;
    }
    .shader-card.shuffle-card .meta { grid-template-columns: auto minmax(0,1fr) !important; }
    @keyframes auraLiveControlBadgePulse {
      from { filter: saturate(1.02) brightness(.98); }
      to { filter: saturate(1.35) brightness(1.12); }
    }
    @keyframes auraBeatIdle {
      from { transform: scale(.82); background: rgba(148,163,184,.38); box-shadow: 0 0 0 rgba(125,211,252,0); }
      to { transform: scale(1.08); background: rgba(248,113,113,.58); box-shadow: 0 0 14px rgba(248,113,113,.34); }
    }
    @keyframes auraBeatHot {
      from { transform: scale(1.05); }
      to { transform: scale(1.72); }
    }

    @keyframes auraPreviewBreathe { from { transform: scale(1.035); filter: saturate(1.10) contrast(1.06) brightness(.98); } to { transform: scale(1.075); filter: saturate(1.25) contrast(1.14) brightness(1.04); } }
    @keyframes auraPreviewLayerMotion { from { transform: translate3d(-2px,-1px,0) scale(1); opacity: .44; } to { transform: translate3d(3px,2px,0) scale(1.055); opacity: .76; } }
    @keyframes auraPreviewScan { from { transform: translateY(-8px); opacity: .18; } to { transform: translateY(8px); opacity: .36; } }
    @keyframes auraLiveBadgePulse { from { transform: scale(1); filter: brightness(.95); } to { transform: scale(1.08); filter: brightness(1.32); } }
    @keyframes auraPreviewVerticalFlow { from { transform: translateY(-10px) skewX(-2deg); opacity: .48; } to { transform: translateY(12px) skewX(2deg); opacity: .82; } }
    @keyframes auraPreviewTunnelFlow { from { transform: scale(1) rotate(0deg); opacity: .50; } to { transform: scale(1.13) rotate(7deg); opacity: .82; } }
    @keyframes auraPreviewWavePulse { from { transform: scale(.98); opacity: .40; } to { transform: scale(1.08); opacity: .78; } }



    /* V13.10 Live Control Deck Rework */
    .controls-deck {
      display: grid;
      gap: 10px;
      padding: 7px;
      border-radius: 20px;
      background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.018));
      border: 1px solid rgba(255,255,255,.08);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 10px 30px rgba(0,0,0,.12);
    }
    .control-subgroup {
      padding: 8px;
      border-radius: 17px;
      border: 1px solid rgba(255,255,255,.065);
      background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.018));
    }
    .control-subgroup.live-modules {
      background:
        radial-gradient(90% 120% at 20% 0%, rgba(34,211,238,.10), transparent 62%),
        linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018));
    }
    .control-subtitle {
      margin: 0 2px 7px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 9px;
      font-weight: 900;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: rgba(186,230,253,.56);
    }
    .live-module-grid, .quick-action-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
    }
    .action-btn.live-module {
      min-height: 72px;
      padding: 10px 8px 9px;
      border-radius: 17px;
      gap: 5px;
      background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.026));
    }
    .action-btn.live-module .action-icon {
      width: 26px;
      height: 26px;
      font-size: 15px;
      margin-bottom: 1px;
    }
    .action-btn.live-module .action-label {
      font-size: 12px;
      font-weight: 850;
      letter-spacing: -.02em;
      line-height: 1;
    }
    .action-state {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 34px;
      height: 16px;
      padding: 0 6px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(15,23,42,.55);
      color: rgba(203,213,225,.70);
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 8px;
      font-weight: 950;
      letter-spacing: .12em;
    }
    .action-btn.live-module.is-playing .action-state,
    .action-btn.live-module.is-audio .action-state,
    .action-btn.live-module.is-camera .action-state {
      color: #fff;
      border-color: rgba(254,202,202,.62);
      background: linear-gradient(180deg, rgba(239,68,68,.92), rgba(153,27,27,.88));
      box-shadow: 0 0 14px rgba(239,68,68,.32);
      animation: auraLiveControlBadgePulse .82s ease-in-out infinite alternate;
    }
    .action-btn.live-module.is-playing::before,
    .action-btn.live-module.is-audio::before,
    .action-btn.live-module.is-camera::before {
      content: none !important;
      display: none !important;
    }
    .action-btn.live-module.is-playing {
      border-color: rgba(254,202,202,.66) !important;
      background: linear-gradient(180deg, rgba(239,68,68,.19), rgba(192,132,252,.08)) !important;
      box-shadow: 0 0 0 1px rgba(248,113,113,.16), 0 0 24px rgba(239,68,68,.16), 0 12px 28px rgba(168,85,247,.10) !important;
    }
    .action-btn.live-module.is-audio {
      border-color: rgba(254,202,202,.66) !important;
      background: linear-gradient(180deg, rgba(239,68,68,.19), rgba(34,211,238,.07)) !important;
      box-shadow: 0 0 0 1px rgba(248,113,113,.16), 0 0 24px rgba(239,68,68,.16), 0 12px 28px rgba(16,185,129,.10) !important;
    }
    .action-btn.live-module.is-camera {
      border-color: rgba(254,202,202,.66) !important;
      background: linear-gradient(180deg, rgba(239,68,68,.19), rgba(59,130,246,.08)) !important;
      box-shadow: 0 0 0 1px rgba(248,113,113,.16), 0 0 24px rgba(239,68,68,.16), 0 12px 28px rgba(59,130,246,.10) !important;
    }
    .audio-route-card {
      margin-top: 8px;
      padding: 9px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,.08);
      background: linear-gradient(180deg, rgba(255,255,255,.038), rgba(255,255,255,.020)), radial-gradient(90% 120% at 0% 0%, rgba(34,211,238,.08), transparent 58%);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
    }
    .audio-route-card[data-audio-route-expanded="false"] .audio-source-row {
      display: none;
    }
    .audio-route-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }
    .audio-route-actions {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .audio-route-kicker {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 9px;
      font-weight: 800;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: rgba(186,230,253,.62);
    }
    .audio-route-statusline {
      margin-top: 7px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .audio-route-statusline strong {
      font-size: 13px;
      color: rgba(255,255,255,.92);
      letter-spacing: -.01em;
    }
    .audio-route-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 58px;
      min-height: 22px;
      padding: 0 9px;
      border-radius: 999px;
      border: 1px solid rgba(125,211,252,.16);
      background: rgba(15,23,42,.44);
      color: rgba(226,232,240,.86);
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 8px;
      font-weight: 900;
      letter-spacing: .14em;
      text-transform: uppercase;
      flex: 0 0 auto;
    }
    .audio-route-info {
      width: 24px;
      height: 24px;
      display: inline-grid;
      place-items: center;
      border-radius: 999px;
      border: 1px solid rgba(125,211,252,.18);
      background: rgba(15,23,42,.44);
      color: rgba(226,232,240,.88);
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 11px;
      font-weight: 900;
      cursor: pointer;
      transition: transform .16s ease, border-color .16s ease, background .16s ease, color .16s ease;
    }
    .audio-route-info:hover {
      transform: translateY(-1px);
      border-color: rgba(125,211,252,.38);
      background: rgba(14,116,144,.24);
      color: #eefcff;
    }
    .audio-route-info[aria-expanded="true"] {
      border-color: rgba(125,211,252,.40);
      background: rgba(14,116,144,.28);
      color: #eefcff;
    }
    .audio-route-card[data-audio-route-state="live"] .audio-route-badge {
      color: #ecfdf5;
      border-color: rgba(52,211,153,.34);
      background: rgba(16,185,129,.20);
      box-shadow: 0 0 18px rgba(16,185,129,.16);
    }
    .audio-route-card[data-audio-route-state="error"] .audio-route-badge {
      color: #fee2e2;
      border-color: rgba(248,113,113,.34);
      background: rgba(239,68,68,.18);
    }
    .audio-route-card[data-audio-route-state="warning"] .audio-route-badge {
      color: #fef3c7;
      border-color: rgba(250,204,21,.30);
      background: rgba(245,158,11,.18);
    }
    .audio-route-note {
      margin-top: 8px;
      padding-top: 8px;
      border-top: 1px solid rgba(255,255,255,.06);
      font-size: 12px;
      line-height: 1.4;
      color: rgba(255,255,255,.58);
    }
    .audio-source-row {
      display: grid;
      grid-template-columns: repeat(2,minmax(0,1fr));
      gap: 7px;
      margin-top: 8px;
    }
    .audio-source-btn {
      min-height: 38px;
      padding: 8px 10px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,.09);
      background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.020));
      color: rgba(255,255,255,.62);
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 8px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 9px;
      font-weight: 850;
      letter-spacing: .10em;
      cursor: pointer;
      transition: transform .16s ease, border-color .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease, opacity .16s ease;
    }
    .audio-source-icon {
      width: 22px;
      height: 22px;
      display: inline-grid;
      place-items: center;
      border-radius: 999px;
      background: rgba(255,255,255,.07);
      border: 1px solid rgba(255,255,255,.08);
      font-size: 12px;
      flex: 0 0 auto;
    }
    .audio-source-name {
      font-size: 10px;
      color: rgba(255,255,255,.88);
      letter-spacing: .08em;
      text-transform: uppercase;
      flex: 1 1 auto;
      text-align: left;
    }
    .audio-source-chip {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 50px;
      min-height: 18px;
      padding: 0 7px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.08);
      background: rgba(15,23,42,.42);
      color: rgba(255,255,255,.46);
      font-size: 7px;
      font-weight: 900;
      letter-spacing: .10em;
      text-transform: uppercase;
      flex: 0 0 auto;
    }
    .audio-source-btn:hover {
      transform: translateY(-1px);
      color: rgba(255,255,255,.86);
      border-color: rgba(125,211,252,.32);
      background: linear-gradient(180deg, rgba(34,211,238,.10), rgba(255,255,255,.025));
    }
    .audio-source-btn.is-active {
      color: #eefcff;
      border-color: rgba(125,211,252,.46);
      background: linear-gradient(180deg, rgba(34,211,238,.16), rgba(192,132,252,.06));
      box-shadow: 0 0 0 1px rgba(125,211,252,.10), 0 10px 22px rgba(8,145,178,.08);
    }
    .audio-source-btn.is-active .audio-source-chip {
      color: #eefcff;
      border-color: rgba(125,211,252,.26);
      background: rgba(14,116,144,.26);
    }
    .audio-source-btn.is-active .audio-source-icon {
      border-color: rgba(125,211,252,.24);
      background: rgba(14,116,144,.20);
      box-shadow: 0 0 14px rgba(34,211,238,.10);
    }
    .audio-source-btn.is-live {
      border-color: rgba(52,211,153,.42);
      background: linear-gradient(180deg, rgba(16,185,129,.18), rgba(34,211,238,.05));
      box-shadow: 0 0 0 1px rgba(52,211,153,.10), 0 10px 22px rgba(16,185,129,.10);
    }
    .audio-source-btn.is-live .audio-source-chip {
      color: #ecfdf5;
      border-color: rgba(52,211,153,.28);
      background: rgba(16,185,129,.24);
      box-shadow: 0 0 14px rgba(16,185,129,.14);
    }
    .audio-source-btn.is-live .audio-source-icon {
      border-color: rgba(52,211,153,.24);
      background: rgba(16,185,129,.18);
      box-shadow: 0 0 14px rgba(16,185,129,.12);
    }
    .audio-source-btn.is-disabled {
      opacity: .68;
    }
    .audio-source-btn.is-disabled .audio-source-chip {
      color: rgba(255,255,255,.34);
      background: rgba(15,23,42,.26);
    }
    .quick-action-grid .quick-action {
      min-height: 42px;
      flex-direction: row;
      border-radius: 14px;
      font-size: 11px;
      gap: 7px;
      color: rgba(238,252,255,.78);
      background: linear-gradient(180deg, rgba(255,255,255,.060), rgba(255,255,255,.024));
    }
    .quick-action-grid .quick-action .action-icon {
      width: 19px;
      height: 19px;
      font-size: 12px;
      flex: 0 0 auto;
    }
    #randomize.quick-action {
      border-color: rgba(125,211,252,.24);
      background: linear-gradient(180deg, rgba(34,211,238,.12), rgba(192,132,252,.040));
    }
    #presetDefault.quick-action {
      opacity: .88;
    }
    #fullscreen.quick-action {
      opacity: .92;
    }
    @media (max-width: 760px) {
      .live-module-grid, .quick-action-grid { grid-template-columns: 1fr; }
      .action-btn.live-module { min-height: 58px; flex-direction: row; justify-content: flex-start; padding: 10px 12px; }
      .action-btn.live-module .action-state { margin-left: auto; }
      .audio-route-head { align-items: center; }
      .audio-source-row { grid-template-columns: 1fr; }
    }

    .color-stack { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }

    /* V13.11 Palette Drift */
    .palette-drift-deck {
      display: grid; grid-template-columns: 1.2fr .8fr; gap: 8px;
      margin-bottom: 10px;
    }
    .palette-drift-btn {
      position: relative; min-height: 38px; padding: 8px 10px;
      border-radius: 14px; border: 1px solid rgba(255,255,255,.10);
      background: linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.025));
      color: rgba(255,255,255,.82); cursor: pointer;
      display: flex; align-items: center; justify-content: space-between; gap: 8px;
      font-size: 11px; font-weight: 820; letter-spacing: .01em;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
      transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease, color .18s ease;
    }
    .palette-drift-btn:hover { transform: translateY(-1px); border-color: rgba(125,211,252,.38); background: linear-gradient(180deg, rgba(34,211,238,.13), rgba(192,132,252,.055)); }
    .palette-drift-btn .state-pill {
      padding: 3px 7px; border-radius: 999px;
      border: 1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.18);
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 9px; letter-spacing: .12em; color: rgba(255,255,255,.58);
    }
    .palette-drift-btn.is-active {
      color: #fff; border-color: rgba(248,113,113,.68);
      background: linear-gradient(180deg, rgba(248,113,113,.20), rgba(192,132,252,.10));
      box-shadow: 0 0 0 1px rgba(248,113,113,.16), 0 0 26px rgba(248,113,113,.14), inset 0 1px 0 rgba(255,255,255,.08);
    }
    .palette-drift-btn.is-active .state-pill {
      color: #fff; border-color: rgba(248,113,113,.58); background: rgba(248,113,113,.18);
      box-shadow: 0 0 18px rgba(248,113,113,.18);
      animation: auraLivePulse 1.35s ease-in-out infinite alternate;
    }
    .palette-drift-btn.is-freeze { opacity: .72; }
    .palette-drift-btn.is-freeze:not(:disabled):hover { opacity: 1; }
    .palette-drift-btn:disabled { cursor: not-allowed; opacity: .36; transform: none; }
    .palette-drift-note {
      margin: -2px 2px 10px;
      font-size: 11px; line-height: 1.35; color: rgba(255,255,255,.44);
    }
    .color-control { padding: 10px; border-radius: 18px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.08); min-width: 0; display: grid; gap: 8px; }
    .color-control .row { margin-bottom: 0; gap: 6px; justify-content: flex-start; }
    .color-label { display: flex; align-items: center; gap: 8px; font-size: 12px; color: rgba(255,255,255,.72); }
    .color-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--dot); box-shadow: 0 0 14px var(--dot); }
    .color-code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 10px; color: rgba(255,255,255,.42); text-transform: uppercase; display: block; text-align: center; }
    input[type="color"] { width: 100%; height: 46px; border: 0; border-radius: 16px; background: transparent; cursor: pointer; padding: 0; }
    input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
    input[type="color"]::-webkit-color-swatch { border: 1px solid rgba(255,255,255,.20); border-radius: 16px; box-shadow: inset 0 1px 0 rgba(255,255,255,.20), 0 12px 30px rgba(0,0,0,.22); }
    input[type="color"]::-moz-color-swatch { border: 1px solid rgba(255,255,255,.20); border-radius: 16px; }
    @media (max-width: 760px) {
      .color-stack { grid-template-columns: 1fr; gap: 10px; }
    }
    .slider-control { padding: 10px 10px 12px; border-radius: 18px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.075); margin-bottom: 10px; }
    .slider-control:last-child { margin-bottom: 0; }
    .slider-control .row { margin-bottom: 8px; }
    .slider-control label { font-size: 13px; color: rgba(255,255,255,.78); }
    .value { min-width: 58px; padding: 4px 7px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 11px; color: rgba(186,230,253,.78); text-align: right; }
    input[type="range"] { width: 100%; height: 24px; appearance: none; -webkit-appearance: none; background: transparent; cursor: pointer; }
    input[type="range"]::-webkit-slider-runnable-track { height: 8px; border-radius: 999px; background: linear-gradient(90deg,rgba(125,211,252,.92),rgba(192,132,252,.72) var(--fill,50%),rgba(255,255,255,.16) var(--fill,50%),rgba(255,255,255,.12)); border: 1px solid rgba(255,255,255,.12); box-shadow: inset 0 1px 2px rgba(0,0,0,.5); }
    input[type="range"]::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; margin-top: -6px; border-radius: 999px; background: #7dd3fc; border: 2px solid rgba(255,255,255,.92); box-shadow: 0 0 0 5px rgba(125,211,252,.16), 0 8px 18px rgba(0,0,0,.34); }
    input[type="range"]::-moz-range-track { height: 8px; border-radius: 999px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.12); }
    input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 999px; background: #7dd3fc; border: 2px solid rgba(255,255,255,.92); box-shadow: 0 0 0 5px rgba(125,211,252,.16), 0 8px 18px rgba(0,0,0,.34); }
    .camera-preset-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-bottom: 14px; }
    .camera-preset-btn, .camera-toggle-option {
      min-height: 42px; border-radius: 14px; border: 1px solid rgba(255,255,255,.10);
      background: linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025));
      color: rgba(255,255,255,.72);
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; cursor: pointer;
      transition: transform .16s ease, border-color .16s ease, background .16s ease, color .16s ease;
    }
    .camera-preset-btn:hover, .camera-toggle-option:hover { transform: translateY(-1px); color: rgba(255,255,255,.92); border-color: rgba(125,211,252,.32); background: linear-gradient(180deg,rgba(34,211,238,.13),rgba(192,132,252,.05)); }
    .camera-select-control, .camera-toggle-control { padding: 13px; border-radius: 20px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.075); margin-bottom: 14px; }
    .camera-select-control .row, .camera-toggle-control .row { margin-bottom: 11px; }
    .camera-select { width: 100%; min-height: 46px; padding: 0 14px; border-radius: 15px; border: 1px solid rgba(125,211,252,.20); background: rgba(5,7,13,.72); color: rgba(238,252,255,.90); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 11px; font-weight: 800; letter-spacing: .10em; text-transform: uppercase; outline: none; }
    .camera-toggle-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
    .camera-reactor-panel .slider-control { margin-bottom: 12px; padding: 12px 12px 14px; border-radius: 20px; }
    .camera-reactor-panel .slider-control:last-child { margin-bottom: 0; }
    .camera-toggle-option.is-active { color: #eefcff; border-color: rgba(125,211,252,.52); background: linear-gradient(180deg,rgba(34,211,238,.18),rgba(192,132,252,.08)); }
    .footer-note { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.08); font-size: 12px; color: rgba(255,255,255,.52); line-height: 1.4; text-align: center; }
    .footer-note a { color: rgba(255,255,255,.78); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.28); transition: .18s ease; }
    .footer-note a:hover { color: #fff; border-color: rgba(255,255,255,.72); }
    .fullscreen-note {
      position: absolute; right: 22px; bottom: 18px; z-index: 8; display: inline-flex; align-items: center; gap: 9px;
      padding: 10px 13px; border-radius: 999px; background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.1);
      backdrop-filter: blur(14px); color: rgba(255,255,255,.58); font-family: inherit; font-size: 12px;
      opacity: 0; pointer-events: none; cursor: pointer;
      transition: opacity .24s ease, transform .18s ease, border-color .18s ease, color .18s ease;
    }
    .fullscreen-note:hover { transform: translateY(-1px); border-color: rgba(255,255,255,.24); color: rgba(255,255,255,.82); }
    .fullscreen-note .note-close { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 999px; background: rgba(255,255,255,.08); color: rgba(255,255,255,.72); font-size: 13px; line-height: 1; }
    .shader-error-toast {
      position: absolute; left: 50%; bottom: 18px; z-index: 13; transform: translateX(-50%) translateY(12px);
      max-width: min(520px, calc(100vw - 32px)); padding: 11px 14px; border-radius: 999px;
      border: 1px solid rgba(248,113,113,.34); background: linear-gradient(180deg, rgba(50,12,20,.78), rgba(8,8,14,.72));
      color: rgba(254,226,226,.96); backdrop-filter: blur(18px) saturate(140%);
      box-shadow: 0 18px 48px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.07);
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 10px; font-weight: 800;
      letter-spacing: .08em; text-transform: uppercase; opacity: 0; pointer-events: none;
      transition: opacity .24s ease, transform .24s ease;
    }
    .shader-error-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
    .shader-card.is-invalid { border-color: rgba(248,113,113,.60) !important; filter: saturate(.55) brightness(.72); }
    body.panel-hidden .fullscreen-note { opacity: 1; pointer-events: auto; }
    body.panel-hidden .fullscreen-note.is-hidden, .fullscreen-note.is-hidden { opacity: 0 !important; pointer-events: none !important; }

    /* ── BPM ───────────────────────────────────────── */
    .bpm-row {
      display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 9px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.52);
    }
    .bpm-right { display: flex; align-items: center; gap: 6px; }
    #bpmLabel { color: rgba(186,230,253,.82); font-weight: 800; min-width: 58px; text-align: right; transition: color .12s; }
    #bpmLabel.bpm-active { color: #67e8f9; }
    #bpmLabel.bpm-detected { color: #a7f3d0; }
    .bpm-source { color: rgba(255,255,255,.34); font-size: 8px; margin-left: 2px; }
    .tap-btn {
      height: 24px; padding: 0 10px; border-radius: 999px; border: 1px solid rgba(125,211,252,.28);
      background: linear-gradient(180deg,rgba(34,211,238,.14),rgba(59,130,246,.06));
      color: rgba(238,252,255,.88);
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; cursor: pointer;
      transition: transform .1s ease, background .1s ease, border-color .1s ease, box-shadow .1s ease;
    }
    .tap-btn:hover { border-color: rgba(125,211,252,.52); background: linear-gradient(180deg,rgba(34,211,238,.24),rgba(59,130,246,.10)); }
    .tap-btn.is-flash { transform: scale(.94); background: linear-gradient(180deg,rgba(34,211,238,.42),rgba(125,211,252,.22)); border-color: rgba(125,211,252,.80); box-shadow: 0 0 14px rgba(34,211,238,.30); }
    .bpm-clear {
      width: 24px; height: 24px; border-radius: 999px; display: inline-grid; place-items: center;
      border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.04);
      color: rgba(255,255,255,.38); font-size: 11px; cursor: pointer; transition: color .18s, border-color .18s, background .18s;
    }
    .bpm-clear:hover { color: rgba(255,255,255,.72); border-color: rgba(248,113,113,.40); background: rgba(248,113,113,.08); }

    /* ── Presets ──────────────────────────────────── */
    .preset-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
    .preset-slot {
      position: relative; min-height: 64px; border-radius: 16px; border: 1px solid rgba(255,255,255,.10);
      overflow: hidden; cursor: pointer;
      transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
    }
    .preset-slot:hover { transform: translateY(-1px); }
    .preset-slot.is-empty {
      border-style: dashed; border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.025);
      display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    }
    .preset-slot.is-empty:hover { border-color: rgba(125,211,252,.38); background: rgba(34,211,238,.04); }
    .preset-slot.is-empty .preset-num { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 10px; color: rgba(255,255,255,.22); letter-spacing: .12em; }
    .preset-slot.is-empty .preset-save-hint { font-size: 10px; color: rgba(255,255,255,.28); letter-spacing: .05em; }
    .preset-slot.is-filled { background: rgba(5,7,13,.65); }
    .preset-slot.is-filled:hover { box-shadow: 0 8px 24px rgba(0,0,0,.28); }
    /* Flash on save */
    .preset-slot.preset-flash { border-color: rgba(125,211,252,.80) !important; box-shadow: 0 0 20px rgba(34,211,238,.30) !important; }
    .preset-bg { position: absolute; inset: 0; opacity: .22; }
    .preset-body { position: relative; z-index: 1; padding: 9px 10px 8px; display: flex; flex-direction: column; gap: 5px; height: 100%; }
    .preset-swatches { display: flex; gap: 4px; align-items: center; }
    .preset-swatch { width: 8px; height: 8px; border-radius: 999px; box-shadow: 0 0 8px currentColor; flex-shrink: 0; }
    .preset-name { font-size: 11px; font-weight: 700; color: rgba(255,255,255,.82); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; }
    .preset-footer { margin-top: auto; display: flex; align-items: center; justify-content: space-between; }
    .preset-load-label { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.32); }
    .preset-delete {
      width: 20px; height: 20px; border-radius: 999px; display: inline-grid; place-items: center;
      border: 1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.25); color: rgba(255,255,255,.36);
      font-size: 12px; cursor: pointer; line-height: 1; transition: color .16s, border-color .16s, background .16s;
    }
    .preset-delete:hover { color: rgba(248,113,113,.92); border-color: rgba(248,113,113,.38); background: rgba(248,113,113,.10); }
    .preset-save-btn {
      display: block; width: 100%; margin-top: 10px; padding: 9px; border-radius: 14px;
      border: 1px solid rgba(125,211,252,.20); background: linear-gradient(180deg,rgba(34,211,238,.08),rgba(255,255,255,.02));
      color: rgba(238,252,255,.62);
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; text-align: center;
      transition: background .18s, border-color .18s, color .18s;
    }
    .preset-save-btn:hover { background: linear-gradient(180deg,rgba(34,211,238,.18),rgba(125,211,252,.06)); border-color: rgba(125,211,252,.40); color: #eefcff; }

    /* ── OBS Sync panel ─────────────────────────────────────── */
    .obs-sync-content { display: grid; gap: 10px; }
    .obs-sync-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; }
    .obs-sync-field { display: grid; gap: 7px; }
    .obs-sync-field label {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 9px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
      color: rgba(255,255,255,.46);
    }
    .obs-sync-input {
      width: 100%; min-height: 38px; padding: 0 12px; border-radius: 14px;
      border: 1px solid rgba(125,211,252,.16); background: rgba(5,7,13,.58);
      color: rgba(238,252,255,.88); outline: none;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 10px; font-weight: 800; letter-spacing: .06em;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
    }
    .obs-sync-input:focus { border-color: rgba(125,211,252,.42); box-shadow: 0 0 0 1px rgba(125,211,252,.10), inset 0 1px 0 rgba(255,255,255,.05); }
    .obs-sync-input[readonly] { color: rgba(255,255,255,.58); background: rgba(255,255,255,.035); }
    .obs-sync-btn {
      min-height: 38px; padding: 0 12px; border-radius: 14px; border: 1px solid rgba(125,211,252,.22);
      background: linear-gradient(180deg,rgba(34,211,238,.10),rgba(255,255,255,.025)); color: rgba(238,252,255,.78);
      cursor: pointer; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 9px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase;
      transition: transform .16s ease, border-color .16s ease, background .16s ease, color .16s ease;
      white-space: nowrap;
    }
    .obs-sync-btn:hover { transform: translateY(-1px); border-color: rgba(125,211,252,.48); background: linear-gradient(180deg,rgba(34,211,238,.18),rgba(192,132,252,.06)); color: #eefcff; }
    .obs-sync-status {
      display: inline-flex; align-items: center; gap: 7px; width: fit-content; margin-top: 1px;
      padding: 6px 9px; border-radius: 999px; border: 1px solid rgba(255,255,255,.08);
      background: rgba(255,255,255,.035); color: rgba(255,255,255,.46);
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 9px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase;
    }
    .obs-sync-status::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: rgba(255,255,255,.30); box-shadow: 0 0 10px rgba(255,255,255,.08); }
    .obs-sync-status.is-live { color: rgba(220,252,231,.82); border-color: rgba(52,211,153,.18); background: rgba(52,211,153,.055); }
    .obs-sync-status.is-live::before { background: rgba(52,211,153,.95); box-shadow: 0 0 14px rgba(52,211,153,.38); }
    .obs-sync-status.is-offline { color: rgba(254,226,226,.70); border-color: rgba(248,113,113,.16); background: rgba(248,113,113,.045); }
    .obs-sync-status.is-offline::before { background: rgba(248,113,113,.78); box-shadow: 0 0 12px rgba(248,113,113,.22); }
    .obs-health-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
    .obs-health-card { border: 1px solid rgba(255,255,255,.075); border-radius: 11px; padding: 8px 9px; background: rgba(255,255,255,.035); }
    .obs-health-label { display:block; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.38); margin-bottom: 3px; }
    .obs-health-value { font-size: 11px; color: rgba(255,255,255,.78); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .obs-health-card.is-good .obs-health-value { color: rgba(187,247,208,.90); }
    .obs-health-card.is-warn .obs-health-value { color: rgba(253,230,138,.90); }
    .obs-health-card.is-bad .obs-health-value { color: rgba(254,202,202,.90); }
    .obs-sync-panel .obs-sync-heading { cursor: default; }
    .obs-sync-panel .obs-advanced-toggle { cursor: pointer; }
    .collapsible-group.obs-sync-panel .collapse-icon { transform: rotate(0deg); }
    .collapsible-group.obs-sync-panel.is-debug-open .collapse-icon { transform: rotate(90deg); }
    .obs-mini-status {
      min-height: 34px; display: flex; align-items: center; justify-content: center;
      padding: 8px 10px; border-radius: 14px; border: 1px solid rgba(255,255,255,.075);
      background: rgba(255,255,255,.030); color: rgba(255,255,255,.58);
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 9px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase;
    }
    .obs-mini-status.is-good { color: rgba(220,252,231,.86); border-color: rgba(52,211,153,.16); background: rgba(52,211,153,.045); }
    .obs-mini-status.is-warn, .obs-mini-status.is-pending { color: rgba(253,230,138,.84); border-color: rgba(253,230,138,.14); background: rgba(253,230,138,.040); }
    .obs-mini-status.is-bad { color: rgba(254,202,202,.88); border-color: rgba(248,113,113,.18); background: rgba(248,113,113,.050); }
    .obs-debug-panel { display: none; gap: 8px; }
    .obs-debug-panel.is-open { display: grid; }
    .obs-debug-header {
      display: flex; align-items: center; justify-content: space-between; gap: 10px;
      padding: 1px 1px 0;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 9px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase;
      color: rgba(255,255,255,.38);
    }
    .obs-debug-badge { color: rgba(255,255,255,.46); }
    .obs-debug-badge.is-good { color: rgba(187,247,208,.88); }
    .obs-debug-badge.is-warn, .obs-debug-badge.is-pending { color: rgba(253,230,138,.88); }
    .obs-debug-badge.is-bad { color: rgba(254,202,202,.90); }



    /* ── V13.9 Camera Reactor UX Rework ───────────────────────── */
    .camera-reactor-panel.v139-camera-reactor { 
      padding: 14px; 
      border-color: rgba(248,113,113,.22);
      background:
        radial-gradient(110% 90% at 20% 0%, rgba(248,113,113,.08), transparent 58%),
        radial-gradient(90% 80% at 100% 10%, rgba(125,211,252,.08), transparent 54%),
        linear-gradient(180deg, rgba(255,255,255,.052), rgba(255,255,255,.024));
    }
    .camera-reactor-panel.v139-camera-reactor.is-hidden { display:none; }
    .camera-reactor-panel .camera-live-header { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
    .camera-reactor-panel .camera-live-title { display:flex; align-items:center; gap:8px; min-width:0; }
    .camera-reactor-panel .camera-live-title .group-title { margin-bottom:0; }
    .camera-live-badge {
      display:inline-flex; align-items:center; gap:6px; padding:5px 9px; border-radius:999px;
      color:#fff; background:linear-gradient(180deg, rgba(239,68,68,.94), rgba(127,29,29,.72));
      border:1px solid rgba(254,202,202,.42); box-shadow:0 0 20px rgba(239,68,68,.32), inset 0 1px 0 rgba(255,255,255,.18);
      font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; font-size:9px; font-weight:900; letter-spacing:.16em;
      text-transform:uppercase; animation:auraLivePulse 1.8s ease-in-out infinite;
    }
    .camera-live-badge::before { content:""; width:6px; height:6px; border-radius:999px; background:#fff; box-shadow:0 0 10px rgba(255,255,255,.85); }
    .camera-summary {
      display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin-bottom:12px; padding:8px 9px; border-radius:16px;
      background:rgba(0,0,0,.20); border:1px solid rgba(255,255,255,.075);
      font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; font-size:10px; font-weight:800; letter-spacing:.10em; color:rgba(226,246,255,.72); text-transform:uppercase;
    }
    .camera-summary strong { color:rgba(255,255,255,.94); font-weight:950; }
    .camera-warning {
      display:none; align-items:center; justify-content:space-between; gap:10px; padding:9px 10px; margin-bottom:12px; border-radius:16px;
      background:rgba(251,191,36,.09); border:1px solid rgba(251,191,36,.28); color:rgba(254,243,199,.92); font-size:11px; line-height:1.25;
    }
    .camera-warning.is-visible { display:flex; }
    .camera-warning button {
      border:1px solid rgba(251,191,36,.34); background:rgba(251,191,36,.12); color:#fff7d6; border-radius:999px; padding:6px 9px;
      font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; font-size:9px; font-weight:900; letter-spacing:.10em; text-transform:uppercase; cursor:pointer;
    }
    .camera-section-label { margin:11px 0 8px; font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; font-size:9px; font-weight:900; letter-spacing:.20em; color:rgba(255,255,255,.45); text-transform:uppercase; }
    .camera-mode-row.camera-primary-modes { grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; margin-bottom:10px; }
    .camera-mode-row.camera-primary-modes .camera-mode-btn { min-height:40px; padding:8px 6px; border-radius:15px; font-size:9px; letter-spacing:.10em; }
    .camera-look-row { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:7px; margin-bottom:12px; }
    .camera-look-btn {
      position:relative; min-height:36px; padding:8px 5px; border-radius:14px; border:1px solid rgba(255,255,255,.10);
      background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025)); color:rgba(255,255,255,.70);
      font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; font-size:8.5px; font-weight:900; letter-spacing:.08em; text-transform:uppercase;
      cursor:pointer; transition:transform .16s ease, border-color .16s ease, color .16s ease, background .16s ease, box-shadow .16s ease;
    }
    .camera-look-btn:hover { transform:translateY(-1px); color:#fff; border-color:rgba(125,211,252,.32); background:linear-gradient(180deg, rgba(34,211,238,.13), rgba(192,132,252,.06)); }
    .camera-look-btn.is-active { color:#fff; border-color:rgba(248,113,113,.48); box-shadow:0 0 0 1px rgba(248,113,113,.12), 0 0 20px rgba(248,113,113,.12); background:linear-gradient(180deg, rgba(248,113,113,.18), rgba(34,211,238,.07)); }
    .camera-main-sliders { display:grid; gap:10px; }
    .camera-main-sliders .slider-control { margin-bottom:0; padding:11px 11px 13px; border-radius:18px; }
    .camera-advanced {
      margin-top:12px; padding:0; border-radius:18px; border:1px solid rgba(255,255,255,.075); background:rgba(255,255,255,.026); overflow:hidden;
    }
    .camera-advanced summary {
      list-style:none; display:flex; align-items:center; justify-content:space-between; padding:11px 12px; cursor:pointer;
      font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; font-size:10px; font-weight:900; letter-spacing:.16em; color:rgba(255,255,255,.58); text-transform:uppercase;
    }
    .camera-advanced summary::-webkit-details-marker { display:none; }
    .camera-advanced summary::after { content:"›"; transform:rotate(0deg); transition:transform .18s ease; font-size:16px; color:rgba(125,211,252,.80); }
    .camera-advanced[open] summary::after { transform:rotate(90deg); }
    .camera-advanced-content { padding:0 12px 12px; }
    .camera-advanced .camera-select-control, .camera-advanced .camera-toggle-control { margin-bottom:10px; padding:11px; border-radius:16px; }
    .camera-advanced .slider-control { margin-bottom:10px; padding:11px 11px 13px; border-radius:16px; }
    .camera-toggle-row.compact { grid-template-columns:repeat(2,minmax(0,1fr)); }
    @media (max-width:760px){ .camera-mode-row.camera-primary-modes { grid-template-columns:repeat(2,minmax(0,1fr)); } .camera-look-row { grid-template-columns:repeat(2,minmax(0,1fr)); } }

    /* ── Controller / OBS Output sync modes ───────────────────── */
    html.aura-output-boot body { background: #000 !important; }
    html.aura-output-boot .panel,
    html.aura-output-boot .panel-toggle,
    html.aura-output-boot .fullscreen-note,
    html.aura-output-boot .help-modal,
    html.aura-output-boot .shader-error-toast { display: none !important; opacity: 0 !important; pointer-events: none !important; }
    html.aura-output-boot .shader-layer { cursor: none; }
    body.output-mode { cursor: none; background: #000; }
    body.output-mode .panel,
    body.output-mode .panel-toggle,
    body.output-mode .fullscreen-note,
    body.output-mode .help-modal,
    body.output-mode .shader-error-toast { display: none !important; }
    body.output-mode .overlay { opacity: .72; }
    body.output-mode .shader-layer { cursor: none; }

    @media (max-width: 760px) {
      .panel { width: calc(100vw - 24px); left: 12px; top: 12px; max-height: 68vh; }
      .shader-grid, .action-bar { grid-template-columns: repeat(2,minmax(0,1fr)); }
      .brand-row { align-items: flex-start; flex-direction: column; gap: 7px; }
      .engine-live-row { grid-template-columns: 1fr 1fr; }
      .engine-live-row .tap-btn, .engine-live-row .bpm-clear { min-height: 32px; }
    }
  
/* ── V16: Performance Mode ─────────────────────────────────────────────────── */
/* Meters: compositor-only updates (transform instead of width → no layout/frame) */
.energy-meter span, .audio-meter span { transform-origin: left center; transform: scaleX(0); width: 100% !important; will-change: transform; }
/* Perform mode hides setup/advanced sections; alerts pierce via the banner below */
body.perform-mode .group[data-ux-priority="setup"],
body.perform-mode .group[data-ux-priority="advanced"] { display: none; }
body.perform-mode .action-btn, body.perform-mode .stage-btn { min-height: 44px; } /* touch targets */
.perform-toggle { margin-left: auto; margin-right: 8px; background: rgba(125,211,252,.10); border: 1px solid rgba(125,211,252,.35); color: #dbeafe; border-radius: 8px; padding: 4px 10px; font-size: 11px; letter-spacing: .08em; cursor: pointer; }
.perform-toggle.is-on { background: rgba(52,211,153,.16); border-color: rgba(52,211,153,.5); color: #d1fae5; }
/* Status strip: thin always-visible line at the top of the panel (seed of the V16.1 HUD) */
.perform-strip { display: flex; align-items: center; gap: 10px; padding: 6px 10px; margin: 6px 0 10px; border-radius: 10px; background: rgba(8,14,28,.72); border: 1px solid rgba(125,211,252,.16); font-size: 11px; letter-spacing: .04em; color: #cbd5e1; }
.perform-strip .ps-dot { width: 8px; height: 8px; border-radius: 999px; background: #64748b; box-shadow: 0 0 10px rgba(100,116,139,.5); }
.perform-strip .ps-dot.is-good { background: #34d399; box-shadow: 0 0 10px rgba(52,211,153,.7); }
.perform-strip .ps-dot.is-warn { background: #fbbf24; box-shadow: 0 0 10px rgba(251,191,36,.7); }
.perform-strip .ps-dot.is-bad  { background: #f87171; box-shadow: 0 0 12px rgba(248,113,113,.8); }
.perform-strip strong { color: #f0f9ff; font-weight: 600; }
/* Alert banner: pierces perform mode; tap expands setup */
.perform-alert { display: none; padding: 8px 12px; margin: 0 0 10px; border-radius: 10px; background: rgba(127,29,29,.5); border: 1px solid rgba(248,113,113,.6); color: #fecaca; font-size: 12px; cursor: pointer; }
.perform-alert.is-visible { display: block; animation: performAlertPulse 1.6s ease-in-out infinite; }
@keyframes performAlertPulse { 0%,100%{ box-shadow: 0 0 0 rgba(248,113,113,0);} 50%{ box-shadow: 0 0 18px rgba(248,113,113,.45);} }

/* V16: CAM slot removed — the two live modules fill the row */
.live-module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }