@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');

    :root {
      --bg-0: #0a0a0a;
      --bg-1: #111111;
      --bg-2: #171717;
      --bg-3: #1e1e1e;
      --bg-4: #262626;
      --border-0: #222222;
      --border-1: #2e2e2e;
      --border-2: #3a3a3a;
      --text-0: #f0f0f0;
      --text-1: #b0b0b0;
      --text-2: #707070;
      --text-3: #4a4a4a;
      --accent: #5eead4;
      --accent-dim: rgba(94,234,212,0.12);
      --accent-mid: rgba(94,234,212,0.35);
      --orange: #fb923c;
      --orange-dim: rgba(251,146,60,0.15);
      --blue: #60a5fa;
      --blue-dim: rgba(96,165,250,0.12);
      --rose: #fb7185;
      --rose-dim: rgba(251,113,133,0.12);
      --violet: #a78bfa;
      --violet-dim: rgba(167,139,250,0.12);
      --amber: #fbbf24;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      font-family: 'Inter', -apple-system, sans-serif;
      background: var(--bg-0);
      color: var(--text-0);
      overflow: hidden;
      height: 100vh;
    }

    .mono { font-family: 'IBM Plex Mono', monospace; }

    .toolbar {
      height: 42px;
      background: var(--bg-1);
      border-bottom: 1px solid var(--border-0);
      display: flex;
      align-items: center;
      padding: 0 14px;
      gap: 1px;
      user-select: none;
    }

    .toolbar-group {
      display: flex;
      align-items: center;
      height: 100%;
      padding: 0 10px;
      gap: 8px;
      border-right: 1px solid var(--border-0);
    }

    .toolbar-group:last-child { border-right: none; }
    .toolbar-group.push-right { margin-left: auto; border-right: none; border-left: 1px solid var(--border-0); }

    .logo {
      font-family: 'IBM Plex Mono', monospace;
      font-weight: 700;
      font-size: 14px;
      letter-spacing: 2px;
      color: var(--accent);
    }

    .logo-sub {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 9px;
      color: var(--text-3);
      letter-spacing: 1px;
      margin-left: 6px;
    }

    .sep { width: 1px; height: 20px; background: var(--border-0); }

    /* Transport */
    .t-btn {
      width: 30px; height: 26px;
      border: 1px solid var(--border-1);
      background: var(--bg-2);
      color: var(--text-2);
      border-radius: 4px;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: all 0.12s;
    }
    .t-btn:hover { border-color: var(--text-2); color: var(--text-1); background: var(--bg-3); }
    .t-btn.active { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); }

    .bpm-readout {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      font-weight: 500;
      color: var(--text-1);
      background: var(--bg-0);
      border: 1px solid var(--border-0);
      border-radius: 3px;
      padding: 3px 10px;
      min-width: 72px;
      text-align: center;
      transition: color 0.3s;
    }

    .bpm-readout.flash { animation: bpmFlash 0.3s ease-out; }
    @keyframes bpmFlash {
      0% { background: var(--bg-0); }
      40% { background: var(--accent-dim); }
      100% { background: var(--bg-0); }
    }

    .time-display {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 11px; color: var(--text-2);
      min-width: 40px; text-align: center;
    }

    /* Genre Select */
    .genre-select {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 10px;
      font-weight: 500;
      letter-spacing: 0.5px;
      color: var(--text-1);
      background: var(--bg-0);
      border: 1px solid var(--border-0);
      border-radius: 3px;
      padding: 3px 8px 3px 8px;
      cursor: pointer;
      outline: none;
      -webkit-appearance: none;
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg width='8' height='5' viewBox='0 0 8 5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L4 4L7 1' stroke='%23707070' stroke-width='1.2'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 6px center;
      padding-right: 20px;
      transition: border-color 0.2s;
    }
    .genre-select:hover { border-color: var(--text-2); }
    .genre-select:focus { border-color: var(--accent); }
    .genre-select option { background: var(--bg-1); color: var(--text-0); }

    /* Volume */
    .vol-group { display: flex; align-items: center; gap: 5px; }
    .vol-icon { font-size: 11px; color: var(--text-3); }
    #vol-slider { width: 60px; height: 3px; }
    #vol-slider::-webkit-slider-runnable-track { height: 3px; background: var(--border-1); border-radius: 2px; border: none; }
    #vol-slider::-webkit-slider-thumb {
      -webkit-appearance: none; width: 10px; height: 10px;
      border-radius: 50%; background: var(--text-2); border: none;
      margin-top: -3.5px; cursor: pointer;
    }
    #vol-slider::-moz-range-track { height: 3px; background: var(--border-1); border-radius: 2px; border: none; }
    #vol-slider::-moz-range-thumb { width: 10px; height: 10px; border-radius: 50%; background: var(--text-2); border: none; cursor: pointer; }

    /* Channel LEDs */
    .ch-leds { display: flex; gap: 3px; }
    .ch-led {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 8px; font-weight: 600; letter-spacing: 0.8px;
      padding: 2px 6px; border-radius: 2px;
      background: var(--bg-0); border: 1px solid var(--border-0);
      color: var(--text-3); transition: all 0.25s; line-height: 1.3;
      cursor: pointer; user-select: none;
      position: relative;
    }
    .ch-led:hover { background: var(--bg-3); }
    .ch-led.on-accent { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }
    .ch-led.on-orange { border-color: var(--orange); color: var(--orange); background: var(--orange-dim); }
    .ch-led.on-blue { border-color: var(--blue); color: var(--blue); background: var(--blue-dim); }
    .ch-led.on-rose { border-color: var(--rose); color: var(--rose); background: var(--rose-dim); }
    .ch-led.on-violet { border-color: var(--violet); color: var(--violet); background: var(--violet-dim); }
    .ch-led.on-amber { border-color: var(--amber); color: var(--amber); background: rgba(251,191,36,0.12); }
    .ch-led.selected { box-shadow: 0 0 0 1px currentColor; }
    .ch-led.selected::after {
      content: ''; position: absolute; bottom: -1px; left: 25%; right: 25%;
      height: 2px; background: currentColor; border-radius: 1px;
    }

    .settings-btn {
      width: 24px; height: 24px;
      border: 1px solid var(--border-1);
      background: var(--bg-2);
      color: var(--text-2);
      border-radius: 4px;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: all 0.15s;
    }
    .settings-btn:hover,
    .settings-btn.active {
      border-color: var(--amber);
      color: var(--amber);
      background: rgba(251,191,36,0.10);
    }

    .main-wrap {
      height: calc(100vh - 42px);
      display: grid;
      grid-template-rows: 1fr auto auto;
      gap: 0;
    }

    .viz-panel {
      background: var(--bg-0);
      border-bottom: 1px solid var(--border-0);
      position: relative;
      min-height: 140px;
    }
    #visualizer { width: 100%; height: 100%; display: block; }

    .viz-badge {
      position: absolute;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 9px; letter-spacing: 1.5px;
      color: var(--text-3);
    }
    .viz-badge.tl { top: 8px; left: 12px; }
    .viz-badge.tr { top: 8px; right: 12px; }

    .channel-strip {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1px;
      background: var(--border-0);
      border-bottom: 1px solid var(--border-0);
    }

    .ch-slot {
      background: var(--bg-1);
      padding: 14px 18px 12px;
      position: relative;
    }

    .ch-header {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 12px;
    }

    .ch-label {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 9px; font-weight: 600; letter-spacing: 2px;
      color: var(--text-2); text-transform: uppercase;
    }

    .ch-val {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 20px; font-weight: 300;
      color: var(--text-3); line-height: 1;
    }

    .ch-range {
      display: flex; justify-content: space-between;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 8px; color: var(--text-3);
      letter-spacing: 0.8px; margin-top: 8px;
    }

    /* Range inputs */
    input[type="range"] {
      -webkit-appearance: none; appearance: none;
      width: 100%; height: 4px; border-radius: 2px;
      outline: none; cursor: pointer; background: transparent;
    }
    input[type="range"]::-webkit-slider-runnable-track {
      height: 4px; border-radius: 2px;
      background: var(--bg-4); border: none;
    }
    input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none; appearance: none;
      width: 16px; height: 16px; border-radius: 50%;
      background: var(--bg-2); border: 2px solid var(--accent);
      margin-top: -6px; cursor: pointer;
      transition: box-shadow 0.15s, transform 0.1s;
    }
    input[type="range"]::-webkit-slider-thumb:hover {
      box-shadow: 0 0 0 3px var(--accent-dim);
    }
    input[type="range"]::-webkit-slider-thumb:active { transform: scale(0.92); }

    input[type="range"]::-moz-range-track {
      height: 4px; border-radius: 2px;
      background: var(--bg-4); border: none;
    }
    input[type="range"]::-moz-range-thumb {
      width: 14px; height: 14px; border-radius: 50%;
      background: var(--bg-2); border: 2px solid var(--accent);
      cursor: pointer;
    }

    #slider-complexity::-webkit-slider-thumb { border-color: var(--accent); }
    #slider-energy::-webkit-slider-thumb { border-color: var(--orange); }
    #slider-mood::-webkit-slider-thumb { border-color: var(--violet); }
    #slider-evolution::-webkit-slider-thumb { border-color: var(--amber); }
    #slider-anthemic::-webkit-slider-thumb { border-color: var(--rose); }
    #slider-listener-length::-webkit-slider-thumb { border-color: var(--blue); }
    #slider-complexity::-moz-range-thumb { border-color: var(--accent); }
    #slider-energy::-moz-range-thumb { border-color: var(--orange); }
    #slider-mood::-moz-range-thumb { border-color: var(--violet); }
    #slider-evolution::-moz-range-thumb { border-color: var(--amber); }
    #slider-anthemic::-moz-range-thumb { border-color: var(--rose); }
    #slider-listener-length::-moz-range-thumb { border-color: var(--blue); }

    .seq-bar {
      height: 32px;
      background: var(--bg-1);
      display: flex; align-items: center;
      padding: 0 14px; gap: 6px;
    }
    .seq-dots { display: flex; gap: 2px; flex: 1; }
    .seq-dot {
      flex: 1; height: 4px; border-radius: 1px;
      background: var(--bg-3); transition: all 0.06s;
      max-width: 50px;
    }
    .seq-dot.beat { background: var(--border-1); }
    .seq-dot.active { background: var(--accent); box-shadow: 0 0 6px var(--accent-dim); }
    .seq-info {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 9px; color: var(--text-3); letter-spacing: 1px;
      min-width: 136px; text-align: right;
    }

    /* Record Button */
    .rec-btn {
      width: 28px; height: 26px;
      border: 1px solid var(--border-1);
      background: var(--bg-2);
      border-radius: 4px;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: all 0.15s;
      position: relative;
    }
    .rec-btn:hover { border-color: #ef4444; }
    .rec-dot {
      width: 10px; height: 10px;
      border-radius: 50%;
      background: #6b2121;
      transition: all 0.2s;
    }
    .rec-btn:hover .rec-dot { background: #dc2626; }
    .rec-btn.recording {
      border-color: #ef4444;
      background: rgba(239,68,68,0.1);
    }
    .rec-btn.recording .rec-dot {
      background: #ef4444;
      animation: recPulse 1s ease-in-out infinite;
      box-shadow: 0 0 6px rgba(239,68,68,0.5);
    }
    @keyframes recPulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.5; transform: scale(0.85); }
    }
    .rec-label {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 9px;
      color: #ef4444;
      letter-spacing: 0.5px;
      min-width: 0;
      transition: all 0.2s;
    }

    .inst-panel {
      position: fixed; top: 42px; left: 0; right: 0; bottom: 0;
      background: rgba(0,0,0,0.75);
      backdrop-filter: blur(8px);
      z-index: 100;
      display: none;
      align-items: flex-start; justify-content: center;
      padding: 24px;
    }
    .inst-panel.open { display: flex; }
    .settings-panel {
      position: fixed; top: 42px; left: 0; right: 0; bottom: 0;
      background: rgba(0,0,0,0.75);
      backdrop-filter: blur(8px);
      z-index: 110;
      display: none;
      align-items: flex-start; justify-content: center;
      padding: 24px;
    }
    .settings-panel.open { display: flex; }

    .inst-card,
    .settings-card {
      background: var(--bg-1);
      border: 1px solid var(--border-1);
      border-radius: 8px;
      width: 100%; max-width: 560px;
      max-height: calc(100vh - 90px);
      overflow-y: auto;
      box-shadow: 0 20px 60px rgba(0,0,0,0.6);
    }
    .settings-card { max-width: 520px; }

    .inst-card-head,
    .settings-card-head {
      display: flex; align-items: center; justify-content: space-between;
      padding: 14px 18px;
      border-bottom: 1px solid var(--border-0);
      position: sticky; top: 0; background: var(--bg-1); z-index: 2;
    }
    .inst-card-title,
    .settings-card-title {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 11px; font-weight: 600; letter-spacing: 2px;
    }
    .inst-card-preset,
    .settings-card-sub {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 9px; color: var(--text-2); letter-spacing: 0.5px;
    }
    .inst-card-close {
      width: 24px; height: 24px; border: 1px solid var(--border-1);
      background: var(--bg-2); color: var(--text-2); border-radius: 4px;
      cursor: pointer; display: flex; align-items: center; justify-content: center;
      font-size: 14px; line-height: 1;
    }
    .inst-card-close:hover { color: var(--text-0); border-color: var(--text-2); }

    .inst-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1px;
      background: var(--border-0);
      padding: 0;
    }
    .settings-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1px;
      background: var(--border-0);
    }
    .settings-slot {
      background: var(--bg-2);
      padding: 18px;
    }

    .inst-preset {
      background: var(--bg-2);
      padding: 12px 16px;
      cursor: pointer;
      transition: all 0.12s;
      border: 2px solid transparent;
    }
    .inst-preset:hover { background: var(--bg-3); }
    .inst-preset.active {
      border-color: var(--ch-color, var(--accent));
      background: var(--bg-3);
    }
    .inst-preset-name {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 11px; font-weight: 600;
      color: var(--text-0); margin-bottom: 3px;
    }
    .inst-preset-desc {
      font-size: 10px; color: var(--text-3);
      line-height: 1.35;
    }
    .inst-preset.active .inst-preset-name { color: var(--ch-color, var(--accent)); }

    /* Responsive */
    @media (max-width: 768px) {
      .channel-strip { grid-template-columns: 1fr; }
      .ch-leds { display: none; }
      .settings-btn { display: none; }
      .logo-sub { display: none; }
      .toolbar-group { padding: 0 6px; gap: 5px; }
      .genre-select { font-size: 9px; padding: 2px 18px 2px 5px; }
    }