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

    html, body {
      height: 100%;
      overflow: hidden;
      background: #0d0d0d;
      font-family: sans-serif;
      color: #f2e8d8;
    }

    /* ── Hub Landing Overlay ── */
    #hub-landing {
      position: absolute;
      inset: 0;
      z-index: 200;
      display: flex;
      flex-direction: column;
      background: radial-gradient(ellipse at 50% 30%, #12082a 0%, #080410 60%, #060308 100%);
      overflow: hidden;
      transition: opacity 0.45s ease;
    }
    #hub-landing.hiding {
      opacity: 0;
      pointer-events: none;
    }
    #hub-landing-inner {
      flex: 1;
      display: flex;
      flex-direction: column;
      width: 100%;
      padding: 6px;
      min-height: 0;
      box-sizing: border-box;
    }
    #hub-landing-grid {
      flex: 1;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      gap: 6px;
      min-height: 0;
    }
    /* All 4 cards equal — 2×2 grid */
    .hub-zone-card { grid-column: span 1; }
    .hub-zone-card {
      background: rgba(4,2,12,0.6);
      border: 1px solid rgba(210,175,70,0.14);
      border-radius: 12px;
      overflow: hidden;
      cursor: pointer;
      padding: 0;
      font-family: inherit;
      color: inherit;
      transition: border-color 0.22s, transform 0.18s, box-shadow 0.22s;
      position: relative;
      width: 100%;
      height: 100%;
    }
    .hub-zone-card:hover {
      border-color: rgba(210,175,70,0.6);
      transform: translateY(-2px) scale(1.01);
      box-shadow: 0 10px 28px rgba(145,80,200,0.32);
    }
    .zone-preview {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      display: block;
    }
    .zone-card-body {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 2;
      display: flex;
      align-items: flex-end;
      gap: 10px;
      padding: 44px 16px 16px;
      background: linear-gradient(to top, rgba(3,1,10,0.92) 0%, rgba(3,1,10,0.72) 55%, rgba(0,0,0,0) 100%);
    }
    .zone-icon {
      flex-shrink: 0;
      color: rgba(215,182,78,0.85);
      margin-bottom: 2px;
      filter: drop-shadow(0 0 4px rgba(215,182,78,0.4));
    }
    .zone-card-text {
      display: flex;
      flex-direction: column;
      gap: 3px;
    }
    .zone-name {
      font-size: 32px;
      font-weight: 900;
      letter-spacing: 0.04em;
      text-transform: lowercase;
      color: rgba(252,240,220,1);
      text-shadow: 0 2px 16px rgba(0,0,0,0.98), 0 0 30px rgba(0,0,0,0.8);
    }
    .zone-sub {
      font-size: 17px;
      letter-spacing: 0.04em;
      color: rgba(220,195,255,0.92);
      text-transform: lowercase;
      text-shadow: 0 1px 8px rgba(0,0,0,0.9);
      font-weight: 600;
    }
    .zone-desc {
      font-size: 15px;
      letter-spacing: 0.02em;
      color: rgba(230,220,205,0.78);
      text-transform: lowercase;
      line-height: 1.45;
      text-shadow: 0 1px 5px rgba(0,0,0,0.7);
    }
    .hub-zone-card:hover .zone-name { color: rgba(255,245,225,1); }
    .hub-zone-card:hover .zone-sub  { color: rgba(220,195,255,0.88); }
    .hub-zone-card:hover .zone-desc { color: rgba(230,220,205,0.72); }
    .hub-zone-card:focus-visible {
      outline: 2px solid rgba(210,175,70,0.7);
      outline-offset: 2px;
    }
    @media (max-width: 620px) {
      #hub-landing-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 5px; }
      .hub-zone-card { grid-column: span 1; }
      .zone-desc { display: none; }
    }

    /* ── Page scaffold ── */
    #page {
      height: 100%;
      display: flex;
      flex-direction: column;
    }

    /* ── Top nav ── */
    #nav {
      height: 54px;
      flex-shrink: 0;
      background: #111;
      border-bottom: 1px solid #1e1e1e;
      display: flex;
      align-items: stretch;
      justify-content: center;
      gap: 0;
      position: relative;
      z-index: 50;
    }
    /* Minimal left pad — tabs flow naturally from left */
    #nav::before { content:''; width:0px; flex-shrink:0; }
    #nav-left {
      position: absolute;
      left: 12px;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      align-items: center;
      gap: 10px;
    }
    #hub-home-btn {
      position: absolute;
      right: 108px;
      top: 50%;
      transform: translateY(-50%);
      z-index: 55;
    }
    #hub-home-btn:hover {
      border-color: rgba(232,188,64,0.7) !important;
      color: rgba(248,208,80,1) !important;
      background: rgba(232,188,64,0.1);
    }
    /* TV bottom bar — channel nav only by default; synth expands above */
    #tv-bottom {
      display: none;
      background: rgba(6,3,14,0.97);
      border-top: 1px solid rgba(120,90,180,0.25);
      height: 54px;
      align-items: center;
      overflow: visible;
      position: relative;
    }
    #tv-bottom.visible {
      display: flex;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 300;
    }
    /* Pad the TV iframe so fixed channel bar doesn't overlap it */
    #tv-panel.active { padding-bottom: 54px; }

    /* Synth expandable panel above the bar */
    #tv-synth-panel {
      position: absolute;
      bottom: 100%;
      left: 0; right: 0;
      background: rgba(6,3,18,0.97);
      border-top: 1px solid rgba(120,90,180,0.3);
      height: 88px;
      display: none;
      flex-direction: row;
      align-items: stretch;
      gap: 0;
    }

    /* Synth piano strip */
    #tv-synth-strip {
      flex: 1; display: flex; align-items: stretch;
      border-right: 1px solid rgba(120,90,180,0.2); position: relative; overflow: hidden;
    }
    #tv-keys-wrap {
      flex: 1; display: flex; position: relative; padding: 6px 8px 6px;
    }
    .tv-key-w {
      flex: 1; background: rgba(228,218,248,0.88); border-radius: 0 0 5px 5px;
      border: 1px solid rgba(145,80,200,0.35); border-top: none;
      cursor: pointer; transition: background 0.06s; position: relative;
    }
    .tv-key-w:hover, .tv-key-w.pressed { background: rgba(175,128,245,0.85); }
    .tv-key-b {
      position: absolute; top: 6px; width: 58%; height: 54%;
      background: rgba(12,4,28,0.95); border-radius: 0 0 4px 4px;
      border: 1px solid rgba(145,80,200,0.5); border-top: none;
      cursor: pointer; z-index: 2; transition: background 0.06s;
    }
    .tv-key-b:hover, .tv-key-b.pressed { background: rgba(145,80,200,0.8); }
    .tv-key-label {
      position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%);
      font-size: 9px; color: rgba(145,80,200,0.55); letter-spacing: 0.05em; pointer-events: none;
    }

    /* Channel nav */
    #tv-ch-display {
      flex: 1;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center; gap: 4px;
    }
    #tv-ch-name {
      font-size: 13px; font-weight: 900; color: rgba(220,205,255,0.9); letter-spacing: 0.14em;
      text-transform: uppercase; font-family: inherit; text-align: center;
    }
    #tv-ch-mini-nav {
      display: flex; gap: 6px; align-items: center;
    }
    .tv-ch-arrow {
      background: none; border: 1px solid rgba(120,90,180,0.3); border-radius: 6px;
      color: rgba(175,128,245,0.7); font-size: 12px; padding: 2px 8px; cursor: pointer;
      font-family: inherit; transition: all 0.14s;
    }
    .tv-ch-arrow:hover { background: rgba(120,90,180,0.18); border-color: rgba(145,80,200,0.55); }

    /* Sound pads in expandable synth panel */
    #tv-pads-strip {
      flex: 1; display: grid; grid-template-columns: repeat(4,1fr);
      grid-template-rows: repeat(2,1fr); gap: 5px; padding: 7px 10px;
      border-left: 1px solid rgba(120,90,180,0.2);
    }
    .tv-pad {
      background: rgba(255,255,255,0.03); border: 1px solid rgba(145,80,200,0.22);
      border-radius: 6px; color: rgba(195,155,235,0.75); font-family: inherit;
      font-size: 11px; letter-spacing: 0.07em; cursor: pointer; text-transform: lowercase;
      transition: all 0.08s;
    }
    .tv-pad:hover { background: rgba(145,80,200,0.18); border-color: rgba(145,80,200,0.55); color: rgba(220,190,255,0.95); }
    .tv-pad.hit { background: rgba(145,80,200,0.45); border-color: rgba(175,128,245,0.8); color: #fff; transform: scale(0.94); }
    .tv-pad[data-sound="kick"]  { border-color: rgba(255,80,80,0.3); }
    .tv-pad[data-sound="snare"] { border-color: rgba(255,200,80,0.3); }
    .tv-pad[data-sound="hat"]   { border-color: rgba(80,220,180,0.3); }
    .tv-pad[data-sound="perc"]  { border-color: rgba(80,160,255,0.3); }
    .tv-pad[data-sound="bass"]  { border-color: rgba(200,80,255,0.3); }
    .tv-pad[data-sound="lead"]  { border-color: rgba(255,160,80,0.3); }
    .tv-pad[data-sound="chord"] { border-color: rgba(100,220,255,0.3); }
    .tv-pad[data-sound="fx"]    { border-color: rgba(255,80,200,0.3); }

    /* Compose mini synth pads */
    .cs-pad {
      flex: 1;
      min-width: 48px;
      height: 32px;
      background: rgba(30,12,44,0.5);
      border: 1px solid rgba(220,100,160,0.2);
      border-radius: 6px;
      color: rgba(220,160,195,0.7);
      font-family: inherit;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      cursor: pointer;
      transition: all 0.1s;
    }
    .cs-pad:hover { background: rgba(220,100,160,0.15); border-color: rgba(220,100,160,0.45); color: rgba(240,190,220,0.95); }
    .cs-pad[data-sound="kick"]  { border-color: rgba(255,80,80,0.25); }
    .cs-pad[data-sound="snare"] { border-color: rgba(255,200,80,0.25); }
    .cs-pad[data-sound="hat"]   { border-color: rgba(80,220,180,0.25); }
    .cs-pad[data-sound="perc"]  { border-color: rgba(80,160,255,0.25); }
    .cs-pad[data-sound="bass"]  { border-color: rgba(200,80,255,0.25); }
    .cs-pad[data-sound="lead"]  { border-color: rgba(255,160,80,0.25); }
    .cs-pad[data-sound="chord"] { border-color: rgba(100,220,255,0.25); }
    .cs-pad[data-sound="fx"]    { border-color: rgba(255,80,200,0.25); }

    /* Compose XY pad — instrument + octave buttons */
    .cs-inst-btn {
      width: 100%;
      height: 22px;
      background: rgba(30,12,44,0.5);
      border: 1px solid rgba(220,100,160,0.18);
      border-radius: 5px;
      color: rgba(220,160,195,0.55);
      font-family: inherit;
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      cursor: pointer;
      transition: all 0.12s;
    }
    .cs-inst-btn:hover { border-color: rgba(220,100,160,0.4); color: rgba(240,180,220,0.85); }
    .cs-inst-btn.active {
      border-color: rgba(220,100,160,0.65);
      color: rgba(230,110,175,0.95);
      background: rgba(220,100,160,0.14);
    }
    .cs-oct-btn {
      width: 26px;
      height: 22px;
      background: rgba(30,12,44,0.5);
      border: 1px solid rgba(220,100,160,0.18);
      border-radius: 5px;
      color: rgba(220,160,195,0.7);
      font-family: inherit;
      font-size: 13px;
      line-height: 1;
      cursor: pointer;
      transition: all 0.12s;
    }
    .cs-oct-btn:hover { border-color: rgba(220,100,160,0.45); background: rgba(220,100,160,0.1); }

    #tv-chin-canvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 0;
    }

    /* ── TV orb navigation buttons ─────────────────────────── */
    .tv-orb-btn {
      position: relative;
      width: 60px;
      height: 60px;
      border: none;
      border-radius: 50%;
      background: radial-gradient(circle at 40% 35%, rgba(40,20,80,0.96) 0%, rgba(8,4,20,0.99) 100%);
      cursor: pointer;
      transition: transform 0.18s, box-shadow 0.22s;
      box-shadow: 0 0 18px rgba(145,80,200,0.28), inset 0 0 14px rgba(145,80,200,0.09);
      flex-shrink: 0;
      z-index: 1;
    }
    .tv-orb-btn:hover {
      transform: scale(1.12);
      box-shadow: 0 0 36px rgba(145,80,200,0.55), 0 0 18px rgba(100,210,185,0.25),
                  inset 0 0 22px rgba(145,80,200,0.12);
    }
    .tv-orb-btn:active { transform: scale(0.93); }

    .tv-orb-ring {
      position: absolute; inset: 0; width: 100%; height: 100%;
      pointer-events: none;
      animation: tvOrbSpin 5s linear infinite;
    }
    #next-ch .tv-orb-ring {
      animation-direction: reverse;
      animation-duration: 3.8s;
    }
    @keyframes tvOrbSpin { to { transform: rotate(360deg); } }

    .tv-orb-inner {
      position: relative; z-index: 1;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 3px; width: 100%; height: 100%; pointer-events: none;
    }
    .tv-orb-icon {
      width: 20px; height: 20px;
      color: rgba(215,180,255,0.92);
      filter: drop-shadow(0 0 6px rgba(175,128,245,0.7));
      transition: filter 0.18s;
    }
    .tv-orb-btn:hover .tv-orb-icon {
      filter: drop-shadow(0 0 10px rgba(175,128,245,1)) drop-shadow(0 0 4px #fff);
    }
    .tv-orb-label {
      font-size: 10px; font-weight: 800; letter-spacing: 0.16em;
      text-transform: uppercase; color: rgba(175,128,245,0.7);
      transition: color 0.18s;
    }
    .tv-orb-btn:hover .tv-orb-label { color: rgba(210,175,255,0.9); }

    /* tv-ch-display, tv-ch-name, tv-ch-num rules now in tv-bottom block above */

    .mode-btn {
      flex: 1;
      min-width: 90px;
      max-width: 160px;
      padding: 0;
      border: none;
      border-radius: 0;
      color: transparent;
      background: transparent;
      cursor: pointer;
      font-family: inherit;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      height: 100%;
      /* invisible — p5 canvas draws all visuals */
      opacity: 0;
      position: relative;
      z-index: 2;
      flex-shrink: 0;
    }
    .mode-btn svg { flex-shrink: 0; }
    .mode-btn:hover { background: transparent; }
    .mode-btn.active { background: transparent; }

    /* ── Content area ── */
    #content {
      flex: 1;
      overflow: hidden;
      position: relative;
    }

    /* ── Panels ── */
    .panel {
      position: absolute;
      inset: 0;
      display: none;
      flex-direction: column;
    }
    .panel.active { display: flex; }

    /* ── Back button — lives in #nav-left inside the nav bar ── */
    #chin {
      display: none;
      align-items: center;
      gap: 10px;
    }
    #chin [id$="-chin-title"] { display: none; }

    /* ══════════════════════════════
       TV MODE
    ══════════════════════════════ */
    #tv-panel { background: #000; overflow: hidden; }

    #tv-iframe {
      width: 100%;
      height: 100%;
      border: none;
      display: block;
    }

    /* TV chin orb buttons — .tv-orb-btn styles defined above in desktop block */

    /* #tv-ch-name sizing handled in #tv-ch-display block above */

    /* ══════════════════════════════
       ARCADE MODE
    ══════════════════════════════ */
    #arcade-panel { background: #0e0e0e; }

    /* Game grid sub-state */
    #arcade-grid-view {
      flex: 1;
      min-height: 0;
      display: flex;
      flex-direction: column;
    }

    /* ── Category picker: 4 full-screen cards ── */
    #cat-picker {
      flex: 1;
      min-height: 0;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      gap: 6px;
      padding: 6px;
    }

    .cat-card {
      position: relative;
      overflow: hidden;
      border-radius: 14px;
      border: 1.5px solid rgba(255,255,255,0.07);
      background: #141414;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0;
      transition: border-color 0.2s, transform 0.15s;
    }
    .cat-card:hover { transform: scale(1.015); }
    .cat-card[data-cat="arcade"] { border-color: rgba(122,189,130,0.25); }
    .cat-card[data-cat="board"]  { border-color: rgba(96,144,216,0.25); }
    .cat-card[data-cat="brain"]  { border-color: rgba(216,160,64,0.25); }
    .cat-card[data-cat="worlds"] { border-color: rgba(160,96,216,0.25); }
    .cat-card[data-cat="arcade"]:hover { border-color: rgba(122,189,130,0.6); }
    .cat-card[data-cat="board"]:hover  { border-color: rgba(96,144,216,0.6); }
    .cat-card[data-cat="brain"]:hover  { border-color: rgba(216,160,64,0.6); }
    .cat-card[data-cat="worlds"]:hover { border-color: rgba(160,96,216,0.6); }

    .cat-card-art {
      position: relative;
      z-index: 1;
      width: 180px;
      height: 180px;
      flex-shrink: 0;
      margin-bottom: 8px;
      filter: drop-shadow(0 0 32px currentColor);
    }
    .cat-card[data-cat="arcade"] .cat-card-art { color: rgba(122,189,130,0.3); }
    .cat-card[data-cat="board"]  .cat-card-art { color: rgba(96,144,216,0.3); }
    .cat-card[data-cat="brain"]  .cat-card-art { color: rgba(216,160,64,0.3); }
    .cat-card[data-cat="worlds"] .cat-card-art { color: rgba(160,96,216,0.3); }

    .cat-card-label {
      position: relative;
      z-index: 1;
      font-size: clamp(28px, 3.2vw, 42px);
      font-weight: 900;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      line-height: 1;
    }
    .cat-card[data-cat="arcade"] .cat-card-label { color: #7abd82; }
    .cat-card[data-cat="board"]  .cat-card-label { color: #6090d8; }
    .cat-card[data-cat="brain"]  .cat-card-label { color: #d8a040; }
    .cat-card[data-cat="worlds"] .cat-card-label { color: #a060d8; }

    .cat-card-sub {
      position: relative;
      z-index: 1;
      font-size: 13px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      margin-top: 8px;
      opacity: 0.5;
    }
    .cat-card[data-cat="arcade"] .cat-card-sub { color: #7abd82; }
    .cat-card[data-cat="board"]  .cat-card-sub { color: #6090d8; }
    .cat-card[data-cat="brain"]  .cat-card-sub { color: #d8a040; }
    .cat-card[data-cat="worlds"] .cat-card-sub { color: #a060d8; }

    /* ── Category game bar (shown when in cat-grid state) ── */
    #cat-game-bar { display: none; }

    #game-grid {
      flex: 1;
      min-height: 0;
      overflow: hidden;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-auto-rows: 1fr;
      gap: 10px;
      padding: 10px;
      position: relative;
    }

    .game-tile {
      --tc-r: 122; --tc-g: 189; --tc-b: 130;
      background: rgba(12, 14, 18, 0.62);
      border: 1.5px solid rgba(var(--tc-r), var(--tc-g), var(--tc-b), 0.18);
      border-radius: 18px;
      padding: 12px;
      text-align: center;
      color: rgb(var(--tc-r), var(--tc-g), var(--tc-b));
      cursor: pointer;
      font-family: inherit;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      position: relative;
      overflow: hidden;
      transition: border-color 0.18s, background 0.18s, transform 0.18s, box-shadow 0.18s;
      min-height: 0;
      backdrop-filter: blur(3px);
      -webkit-backdrop-filter: blur(3px);
      z-index: 1;
    }
    .game-tile:hover {
      background: rgba(22, 26, 34, 0.80);
      transform: scale(1.03);
      border-color: rgba(var(--tc-r), var(--tc-g), var(--tc-b), 0.55);
      box-shadow: 0 0 20px rgba(var(--tc-r), var(--tc-g), var(--tc-b), 0.12);
    }
    .game-tile .tile-emoji {
      flex: 1;
      min-height: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: clamp(2.4em, 5vw, 4em);
      line-height: 1;
      transition: transform 0.18s;
    }
    .game-tile:hover .tile-emoji { transform: scale(1.08); }
    .tile-img-wrap { display: flex; align-items: center; justify-content: center; }
    .game-tile .tile-emoji svg { width: min(180px, 78%) !important; height: auto !important; }
    .tile-kenney-img {
      width: min(180px, 78%); height: auto;
      object-fit: contain;
      image-rendering: pixelated;
      transition: transform 0.18s;
    }
    .game-tile:hover .tile-kenney-img { transform: scale(1.08); }
    .game-tile .tile-name {
      font-size: clamp(15px, 1.8vw, 26px);
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      line-height: 1;
      text-align: center;
      flex-shrink: 0;
    }

    /* Grid layout overrides — colors now come from per-tile CSS vars set in buildGrid() */
    #game-grid[data-cat="worlds"] { grid-template-columns: repeat(2, 1fr); }
    #game-grid[data-cat="board"]  { grid-template-columns: repeat(2, 1fr); }

    /* 2-col full-bleed tile layout — SVG fills tile, name overlays at bottom */
    #game-grid[data-cat="board"] .game-tile,
    #game-grid[data-cat="worlds"] .game-tile {
      padding: 0;
      justify-content: flex-start;
      overflow: hidden;
    }
    #game-grid[data-cat="board"] .game-tile .tile-emoji,
    #game-grid[data-cat="worlds"] .game-tile .tile-emoji {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      flex: none;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }
    #game-grid[data-cat="board"] .game-tile .tile-emoji svg,
    #game-grid[data-cat="worlds"] .game-tile .tile-emoji svg {
      width: 82% !important;
      height: 72% !important;
      max-height: 160px;
      object-fit: contain;
    }
    #game-grid[data-cat="board"] .game-tile .tile-name,
    #game-grid[data-cat="worlds"] .game-tile .tile-name {
      position: absolute;
      bottom: 0; left: 0; right: 0;
      padding: 36px 14px 14px;
      background: linear-gradient(transparent, rgba(0,0,0,0.88));
      z-index: 2;
      font-size: clamp(16px, 2vw, 28px);
    }
    #game-grid[data-cat="worlds"] .game-tile { min-height: 0; }

    /* Floating tile tooltip */
    #tile-tooltip {
      position: fixed;
      z-index: 9999;
      background: rgba(6,8,12,0.92);
      color: rgba(255,255,255,0.82);
      font-size: 11px;
      font-weight: 400;
      letter-spacing: 0.06em;
      text-transform: lowercase;
      padding: 5px 10px;
      border-radius: 6px;
      border: 1px solid rgba(255,255,255,0.1);
      pointer-events: none;
      display: none;
      max-width: 210px;
      line-height: 1.4;
      backdrop-filter: blur(8px);
    }
    /* Star/favorite button on tile */
    .tile-star {
      position: absolute;
      top: 6px;
      left: 8px;
      font-size: 14px;
      background: none;
      border: none;
      cursor: pointer;
      color: rgba(255,255,255,0.18);
      padding: 2px 3px;
      line-height: 1;
      z-index: 4;
      transition: color 0.15s, transform 0.15s;
    }
    .tile-star:hover { color: rgba(255,210,40,0.9); transform: scale(1.25); }
    .tile-star.active { color: rgba(255,200,30,0.95); }
    /* Fullscreen button over game view */
    #game-fs-btn {
      position: absolute;
      top: 14px;
      right: 14px;
      z-index: 100;
      background: rgba(6,8,12,0.78);
      border: 1.5px solid rgba(255,255,255,0.22);
      border-radius: 10px;
      color: rgba(255,255,255,0.8);
      font-size: 22px;
      cursor: pointer;
      padding: 10px 14px;
      line-height: 1;
      transition: background 0.15s, color 0.15s, transform 0.1s;
      backdrop-filter: blur(8px);
      box-shadow: 0 2px 12px rgba(0,0,0,0.4);
    }
    #game-fs-btn:hover { background: rgba(40,50,60,0.95); color: #fff; transform: scale(1.06); }

    /* Game playing sub-state */
    #arcade-game-view {
      flex: 1;
      min-height: 0;
      display: none;
      width: 100%;
      overflow: hidden;
      position: relative;
    }

    /* ARCHIVED [2026-06-02] — arcade chin moved to parent frame (turtleden.html #den-game-chin) via postMessage
    #arcade-chin { display:none; flex-shrink:0; height:36px; ... }
    #arcade-chin-back { ... }
    #arcade-chin-name { ... }
    */


    #game-iframe { width: 1200px; height: 675px; border: none; display: block; margin: 0; }
    #game-iframe-scaler { transform-origin: top left; display: block; }

    #random-game-btn {
      background: transparent;
      border: 1.5px solid #6e8a71;
      color: #6e8a71;
      border-radius: 20px;
      padding: 6px 14px;
      font-family: inherit;
      font-size: 18px;
      cursor: pointer;
      white-space: nowrap;
      flex-shrink: 0;
      transition: background 0.13s, color 0.13s;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    #random-game-btn:hover { background: #6e8a71; color: #fff; }

    /* ══════════════════════════════
       CALM MODE
    ══════════════════════════════ */
    #calm-panel {
      background: #0d1420;
      align-items: center;
      justify-content: space-between;
      padding: 0 0 8px 0;
    }

    /* Orb area */
    #calm-top {
      flex: 1;
      min-height: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 20px;
      padding: 70px 0 20px;
      position: relative;
      width: 100%;
    }

    /* SVG rings layer */
    #calm-rings-svg {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      overflow: visible;
      pointer-events: none;
    }

    /* Breathing orb (CSS div, JS-animated size) */
    #breath-circle {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background: radial-gradient(circle at 38% 32%, #d4f0d8 0%, #8ab48e 38%, #6e8a71 68%, #3a5c3d 100%);
      box-shadow: 0 0 20px 6px rgba(110,138,113,0.32), 0 0 60px 0 rgba(110,138,113,0.08);
      position: relative;
      z-index: 1;
      flex-shrink: 0;
    }
    @keyframes hold-glow {
      0%, 100% { box-shadow: 0 0 55px 28px rgba(110,138,113,0.58), 0 0 120px 0 rgba(110,138,113,0.22); }
      50%       { box-shadow: 0 0 95px 32px rgba(110,138,113,0.90), 0 0 180px 0 rgba(110,138,113,0.35); }
    }
    #breath-circle.holding { animation: hold-glow 2s ease-in-out infinite; }

    #breath-label {
      font-size: 22px;
      color: rgba(255,255,255,0.55);
      letter-spacing: 0.18em;
      font-weight: 400;
      transition: opacity 0.8s ease-in-out;
      margin-top: 20px;
      text-transform: none;
    }

    /* Bottom: soundscapes + Spotify + tagline */
    #calm-bottom {
      flex-shrink: 0;
      width: 100%;
      padding: 10px 20px 4px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    #calm-sound-label {
      font-size: 15px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: lowercase;
      color: rgba(255,255,255,0.65);
      text-align: center;
      flex-shrink: 0;
      margin-bottom: 2px;
    }

    #calm-sound-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      flex-shrink: 0;
    }

    .sound-pill {
      padding: 10px 22px;
      border-radius: 999px;
      font-size: 17px;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: lowercase;
      cursor: pointer;
      font-family: inherit;
      background: rgba(255,255,255,0.04);
      border: 1.5px solid rgba(255,255,255,0.42);
      color: rgba(255,255,255,0.92);
      transition: background 0.13s, color 0.13s, border-color 0.13s;
    }
    .sound-pill:hover:not(.active) { border-color: #6e8a71; color: #6e8a71; }
    .sound-pill.active { border-color: #6e8a71; color: #6e8a71; background: rgba(110,138,113,0.12); }

    #calm-spotify {
      flex-shrink: 0;
      max-width: 100%;
      margin: 16px auto 0;
      width: 100%;
    }
    #calm-spotify iframe {
      width: 100%;
      height: 80px;
      border: none;
      border-radius: 10px;
      display: block;
    }

    #spotify-mood-row {
      display: flex;
      gap: 8px;
      justify-content: center;
      margin-bottom: 8px;
    }
    .spotify-pill {
      padding: 5px 14px;
      border-radius: 999px;
      font-size: 17px;
      font-weight: 600;
      font-family: inherit;
      letter-spacing: 0.05em;
      text-transform: lowercase;
      background: transparent;
      border: 1.5px solid rgba(110,138,113,0.45);
      color: rgba(255,255,255,0.6);
      cursor: pointer;
      transition: background 0.13s, color 0.13s, border-color 0.13s;
    }
    .spotify-pill:hover:not(.active) { border-color: #6e8a71; color: #fff; }
    .spotify-pill.active { background: #6e8a71; border-color: #6e8a71; color: #fff; }

    @keyframes taglinePulse {
      0%   { transform: scale(1);    opacity: 0.7; }
      21%  { transform: scale(1.03); opacity: 1;   }
      58%  { transform: scale(1.03); opacity: 1;   }
      100% { transform: scale(1);    opacity: 0.7; }
    }
    #calm-tagline {
      text-align: center;
      font-size: 22px;
      font-weight: 300;
      color: #6a9a7a;
      letter-spacing: 0.12em;
      padding: 16px 20px 8px;
      margin-top: 24px;
      text-transform: lowercase;
      flex-shrink: 0;
      animation: taglinePulse 19s ease-in-out infinite;
      position: relative;
    }

    /* ── Body scan ── */
    #calm-scan-section {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      margin: 16px 0 8px;
      flex-shrink: 0;
    }
    #scan-toggle-btn {
      background: transparent;
      border: 1px solid rgba(255,255,255,0.3);
      color: rgba(255,255,255,0.75);
      border-radius: 999px;
      padding: 10px 28px;
      font-size: 16px;
      font-weight: 700;
      font-family: inherit;
      cursor: pointer;
      letter-spacing: 0.06em;
      transition: background 0.13s, border-color 0.13s, color 0.13s;
    }
    #scan-toggle-btn:hover { border-color: #6e8a71; color: #6e8a71; }
    #scan-toggle-btn.active { border-color: #6e8a71; color: #6e8a71; background: rgba(110,138,113,0.12); }
    #scan-status {
      font-size: 15px;
      font-style: italic;
      color: rgba(255,255,255,0.45);
      text-align: center;
      min-height: 16px;
      max-width: 320px;
    }

    /* Meditation picker dropdown */
    #med-picker-label {
      font-size: 16px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.35);
      text-align: center;
      margin-bottom: 6px;
    }
    #med-picker {
      position: relative;
    }
    #med-picker-trigger {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 9px 16px;
      background: rgba(255,255,255,0.07);
      border: 1px solid rgba(255,255,255,0.2);
      border-radius: 20px;
      cursor: pointer;
      transition: border-color 0.13s, background 0.13s;
      user-select: none;
      white-space: nowrap;
    }
    #med-picker-trigger:hover { border-color: #6e8a71; background: rgba(110,138,113,0.12); }
    #med-picker-name {
      flex: 1;
      font-size: 15px;
      font-weight: 700;
      color: rgba(255,255,255,0.9);
      text-transform: lowercase;
    }
    #med-picker-duration {
      font-size: 17px;
      color: rgba(255,255,255,0.45);
      white-space: nowrap;
    }
    #med-picker-arrow {
      font-size: 16px;
      color: rgba(255,255,255,0.4);
      flex-shrink: 0;
    }
    #med-picker-panel {
      display: none;
      position: fixed;
      bottom: 90px;
      left: 50%;
      transform: translateX(-50%);
      background: #1a1a2e;
      border: 1.5px solid rgba(110,138,113,0.4);
      border-radius: 14px;
      padding: 16px;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
      width: 580px;
      max-width: 96vw;
      max-height: 70vh;
      overflow-y: auto;
      z-index: 500;
      box-shadow: 0 8px 32px rgba(0,0,0,0.6);
    }
    #med-picker-panel.open { display: grid; }
    .med-sort-in-panel {
      grid-column: 1 / -1;
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      margin-bottom: 4px;
    }
    .med-sort-in-panel button {
      background: none;
      border: none;
      color: rgba(242,232,216,0.5);
      font-size: 16px;
      font-family: inherit;
      cursor: pointer;
      padding: 0;
      transition: color 0.12s;
    }
    .med-sort-in-panel button.active { color: rgba(242,232,216,0.9); text-decoration: underline; }
    .med-option {
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.15);
      border-radius: 10px;
      padding: 10px 12px;
      cursor: pointer;
      font-size: 18px;
      color: #f2e8d8;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      transition: background 0.15s;
    }
    .med-option:hover { background: rgba(110,138,113,0.3); }
    .med-option.active { background: rgba(110,138,113,0.5); border-color: #6e8a71; }
    .med-option-name { font-size: 17px; font-weight: 600; color: inherit; text-transform: lowercase; }
    .med-option-dur { font-size: 16px; opacity: 0.6; }

    /* Calm ambient BG — sits behind everything */
    #calm-bg-svg {
      position: absolute;
      inset: 0;
      width: 100%; height: 100%;
      pointer-events: none;
      overflow: hidden;
      z-index: 0;
    }
    /* Native canvas background — above SVG (z=0), below content (z=10) */
    #calm-bg-canvas {
      position: absolute;
      inset: 0;
      z-index: 5;
      pointer-events: none;
    }
    /* All content layers above the backgrounds (z=5) */
    #calm-top     { z-index: 10; }
    #calm-tagline { z-index: 10; }
    #calm-controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      padding: 12px 20px;
      flex-shrink: 0;
      flex-wrap: wrap;
      position: relative;
      z-index: 10;
    }
    /* Soundscape custom picker */
    #sound-picker { position: relative; }
    #sound-picker-trigger {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 9px 16px;
      background: rgba(255,255,255,0.07);
      border: 1px solid rgba(255,255,255,0.2);
      border-radius: 20px;
      cursor: pointer;
      transition: border-color 0.13s, background 0.13s;
      user-select: none;
      white-space: nowrap;
    }
    #sound-picker-trigger:hover { border-color: #6e8a71; background: rgba(110,138,113,0.12); }
    #sound-picker-name { font-size: 15px; font-weight: 700; color: rgba(255,255,255,0.9); text-transform: lowercase; }
    #sound-picker-arrow-el { font-size: 16px; color: rgba(255,255,255,0.4); flex-shrink: 0; }
    #sound-picker-panel {
      display: none;
      position: absolute;
      bottom: 100%;
      right: 0;
      margin-bottom: 6px;
      background: #1a1a2e;
      border: 1px solid #3a3a5e;
      border-radius: 12px;
      box-shadow: 0 8px 32px rgba(0,0,0,0.4);
      min-width: 160px;
      z-index: 100;
      overflow: hidden;
    }
    #sound-picker-panel.open { display: block; }
    .sound-option {
      padding: 11px 16px;
      cursor: pointer;
      font-size: 14px;
      font-family: inherit;
      color: rgba(255,255,255,0.8);
      text-transform: lowercase;
      transition: background 0.1s;
      border-bottom: 1px solid rgba(255,255,255,0.05);
    }
    .sound-option:last-child { border-bottom: none; }
    .sound-option:hover { background: rgba(110,138,113,0.15); }
    .sound-option.active { background: rgba(110,138,113,0.12); color: #6e8a71; }

    /* Calm chin */
    #calm-chin { display: none; }
    #calm-chin-text {
      font-size: 18px;
      color: #6e8a71;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    /* Body scan region highlights */
    .scan-region { transition: fill 0.4s ease; fill: none; }
    .scan-region.lit { fill: rgba(110,138,113,0.3); filter: drop-shadow(0 0 12px rgba(110,138,113,0.8)); }

    /* Results-ready notification banner */
    #results-ready-banner {
      display: none;
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      background: #6e8a71;
      color: #f2e8d8;
      padding: 16px;
      font-size: 16px;
      z-index: 9999;
      align-items: center;
      justify-content: center;
      gap: 16px;
    }
    #results-ready-banner.visible { display: flex; }
    #results-ready-btn {
      background: #f2e8d8;
      color: #3a5c3d;
      border: none;
      border-radius: 8px;
      padding: 8px 20px;
      font-size: 15px;
      font-weight: 700;
      cursor: pointer;
      font-family: inherit;
      transition: background 0.13s;
      white-space: nowrap;
    }
    #results-ready-btn:hover { background: #fff; }

  /* ── Session launcher modal ── */
  #begin-session-btn {
    background: rgba(60,90,64,0.25);
    border: 2px solid rgba(110,160,118,0.7);
    color: rgba(200,230,205,0.95);
    border-radius: 999px;
    padding: 14px 48px;
    font-size: 18px;
    font-weight: 900;
    font-family: inherit;
    cursor: pointer;
    letter-spacing: 0.12em;
    text-transform: lowercase;
    box-shadow: 0 0 22px rgba(80,160,90,0.22), 0 2px 8px rgba(0,0,0,0.4);
    transition: background 0.16s, border-color 0.16s, color 0.16s, box-shadow 0.16s;
  }
  #begin-session-btn:hover {
    background: rgba(80,130,88,0.4);
    border-color: rgba(140,210,150,0.9);
    color: #c8f0cc;
    box-shadow: 0 0 36px rgba(80,160,90,0.38), 0 2px 8px rgba(0,0,0,0.4);
  }

  .session-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.75);
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .session-modal-box {
    background: #181e32;
    border: 1.5px solid rgba(110,138,113,0.5);
    border-radius: 20px;
    padding: 36px 40px;
    width: 720px;
    max-width: 92vw;
    max-height: 85vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 12px 48px rgba(0,0,0,0.5);
  }

  .session-modal-close {
    position: absolute;
    top: 14px; right: 16px;
    background: none; border: none;
    color: rgba(255,255,255,0.4);
    font-size: 18px; cursor: pointer;
  }
  .session-modal-close:hover { color: #fff; }

  .session-step-label {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #6e8a71;
    margin-bottom: 22px;
  }

  .session-guide-cards {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-bottom: 24px;
  }

  .session-guide-card {
    flex: 1;
    max-width: 160px;
    padding: 20px 16px;
    border: 1.5px solid rgba(255,255,255,0.15);
    border-radius: 14px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
  }
  .session-guide-card:hover { border-color: #6e8a71; background: rgba(110,138,113,0.08); }
  .session-guide-card.selected { border-color: #6e8a71; background: rgba(110,138,113,0.18); }

  .guide-name { font-size: 20px; font-weight: 700; margin-bottom: 5px; color: rgba(255,255,255,0.95); }
  .guide-desc { font-size: 14px; color: rgba(255,255,255,0.6); letter-spacing: 0.04em; }

  .session-sound-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-bottom: 16px;
  }

  .session-sound-pill {
    padding: 8px 16px;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 999px;
    background: transparent;
    color: rgba(255,255,255,0.7);
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.13s;
  }
  .session-sound-pill:hover { border-color: #6e8a71; color: #6e8a71; }
  .session-sound-pill.selected { border-color: #6e8a71; background: rgba(110,138,113,0.18); color: #6e8a71; }

  .session-spotify-row {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-bottom: 24px;
  }

  .session-spotify-pill {
    padding: 8px 16px;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 999px;
    background: transparent;
    color: rgba(255,255,255,0.7);
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.13s;
  }
  .session-spotify-pill:hover { border-color: #1db954; color: #1db954; }
  .session-spotify-pill.selected { border-color: #1db954; background: rgba(29,185,84,0.15); color: #1db954; }

  .session-next-btn, .session-begin-btn {
    display: block;
    width: 100%;
    padding: 13px;
    border: none;
    border-radius: 999px;
    background: #6e8a71;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    letter-spacing: 0.04em;
    transition: background 0.15s, opacity 0.15s;
    margin-top: 8px;
  }
  .session-next-btn:disabled, .session-begin-btn:disabled { opacity: 0.4; cursor: default; }
  .session-next-btn:not(:disabled):hover, .session-begin-btn:not(:disabled):hover { background: #5a7360; }

  #session-med-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 20px;
    max-height: 360px;
    overflow-y: auto;
  }

  .session-med-pill {
    padding: 18px 18px;
    border: 1.5px solid rgba(110,138,113,0.22);
    border-radius: 14px;
    background: rgba(110,138,113,0.04);
    color: rgba(255,255,255,0.8);
    font-size: 16px;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    transition: all 0.15s;
    position: relative;
    overflow: hidden;
  }
  .session-med-pill:hover { border-color: rgba(110,138,113,0.6); background: rgba(110,138,113,0.1); transform: translateY(-1px); }
  .session-med-pill.selected { border-color: #6e8a71; background: rgba(110,138,113,0.18); color: #fff; box-shadow: 0 0 18px rgba(110,138,113,0.18); }
  .session-med-pill .pill-name { font-weight: 700; font-size: 17px; display: block; margin-bottom: 4px; letter-spacing: 0.02em; }
  .session-med-pill .pill-dur { font-size: 13px; color: rgba(255,255,255,0.4); letter-spacing: 0.08em; }
  .pill-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
  .pill-tag {
    font-size: 15px;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(110,138,113,0.15);
    color: rgba(255,255,255,0.45);
    border: 1px solid rgba(110,138,113,0.22);
  }

  /* ── Filter bars (step 3) ── */
  .session-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
  }

  /* Duration pills — standard rounded pill */
  .session-filter-pill {
    padding: 4px 12px;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 999px;
    background: transparent;
    color: rgba(255,255,255,0.5);
    font-size: 17px;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.13s, background 0.13s, color 0.13s;
  }
  .session-filter-pill:hover { border-color: #6e8a71; color: #6e8a71; }
  .session-filter-pill.active { border-color: #6e8a71; background: rgba(110,138,113,0.18); color: #6e8a71; }

  /* Tag filter pills — browser-tab style */
  #session-tag-filters {
    gap: 0;
    margin-bottom: 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }
  #session-tag-filters .session-filter-pill {
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 6px 6px 0 0;
    padding: 6px 13px 8px;
    color: rgba(255,255,255,0.35);
    background: transparent;
    margin-bottom: -1px;
    transition: color 0.13s, background 0.13s, border-bottom-color 0.13s;
  }
  #session-tag-filters .session-filter-pill:hover {
    color: rgba(255,255,255,0.7);
    background: rgba(255,255,255,0.04);
  }
  #session-tag-filters .session-filter-pill.active {
    border-bottom-color: #6e8a71;
    color: #fff;
    background: transparent;
  }

  /* ── Step 3 header with duration slider ── */
  .step-3-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
  }
  .step-3-header .session-step-label { margin-bottom: 0; }
  .session-dur-slider-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
  }
  .session-dur-label {
    font-size: 17px;
    color: rgba(255,255,255,0.5);
    white-space: nowrap;
    min-width: 64px;
    text-align: right;
  }
  .session-dur-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 80px;
    height: 3px;
    background: rgba(255,255,255,0.15);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
  }
  .session-dur-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #6e8a71;
    cursor: pointer;
    box-shadow: 0 0 0 3px rgba(110,138,113,0.2);
  }
  .session-dur-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #6e8a71;
    border: none;
    cursor: pointer;
  }

  /* ── Step 2 select dropdowns ── */
  .s2-field {
    margin-bottom: 16px;
  }
  .s2-lbl {
    display: block;
    font-size: 13px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(168,200,176,0.55);
    margin-bottom: 6px;
  }
  .s2-select-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .s2-swatch {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    flex-shrink: 0;
    border: 1.5px solid rgba(110,138,113,0.3);
    transition: background 0.3s;
  }
  .s2-select {
    width: 100%;
    padding: 10px 14px;
    background: rgba(10,18,12,0.92);
    border: 1.5px solid rgba(110,138,113,0.35);
    border-radius: 10px;
    color: rgba(210,240,215,0.9);
    font-size: 15px;
    font-family: inherit;
    cursor: pointer;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236e8a71' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 34px;
    transition: border-color 0.15s;
  }
  .s2-select:hover { border-color: rgba(110,138,113,0.65); }
  .s2-select:focus { border-color: #6e8a71; box-shadow: 0 0 0 2px rgba(110,138,113,0.18); }
  .s2-select option { background: #0d1a10; color: rgba(210,240,215,0.9); }
  .s2-select optgroup { background: #0a1a0e; color: rgba(168,200,176,0.55); font-size: 12px; }

  /* ══════════════════════════════
     CREATE MODE
  ══════════════════════════════ */
  #create-panel { background: #0c0a08; display: none; flex-direction: column; }
  #create-panel.active { display: flex; }

  #create-home {
    flex: 1; display: flex; flex-direction: column;
    align-items: stretch; justify-content: flex-start; padding: 0; gap: 0;
    position: relative; overflow: hidden;
    background: radial-gradient(ellipse 70% 50% at 30% 35%, rgba(80,50,10,0.22) 0%, transparent 70%),
                radial-gradient(ellipse 60% 60% at 75% 65%, rgba(50,20,80,0.15) 0%, transparent 70%),
                linear-gradient(180deg, #0d0a0e 0%, #080609 100%);
  }
  #create-home::before {
    content: '';
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: radial-gradient(ellipse 62% 40% at 50% 38%, rgba(140,95,220,0.08) 0%, transparent 70%),
                radial-gradient(ellipse 45% 30% at 22% 65%, rgba(180,130,50,0.06) 0%, transparent 65%),
                radial-gradient(ellipse 40% 28% at 78% 62%, rgba(55,110,200,0.05) 0%, transparent 65%);
    animation: createGlowShift 12s ease-in-out infinite alternate;
  }
  @keyframes createGlowShift {
    0%   { opacity: 0.7; transform: scale(1) translateY(0); }
    50%  { opacity: 1;   transform: scale(1.04) translateY(-6px); }
    100% { opacity: 0.75; transform: scale(0.98) translateY(4px); }
  }
  #create-home-header { display: none; }
  #create-home-p5 { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

  #create-tools-grid {
    flex: 1;
    display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr);
    grid-auto-flow: column;
    gap: 0; position: relative; z-index: 1; width: 100%; height: 100%;
  }

  .create-card {
    height: auto; border-radius: 0; cursor: pointer;
    position: relative; overflow: hidden;
    border: none;
    border-right: 1px solid rgba(200,160,70,0.1);
    border-bottom: 1px solid rgba(200,160,70,0.1);
    transition: filter 0.2s;
  }
  /* Right column (slots 3+4) — no right border */
  .create-card:nth-child(3), .create-card:nth-child(4) { border-right: none; }
  /* Bottom row (slots 2+4) — no bottom border */
  .create-card:nth-child(2), .create-card:nth-child(4) { border-bottom: none; }
  .create-card:hover:not(.soon) { filter: brightness(1.15); }
  .create-card.soon { opacity: 0.4; cursor: default; }
  .create-card-canvas {
    position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; display: block;
    mix-blend-mode: screen; opacity: 0.72;
  }
  .create-card-icon {
    position: absolute; inset: 0; z-index: 0; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
  }
  .create-card-icon svg { width: 100%; height: 100%; }
  .create-card-content {
    position: absolute; inset: 0; z-index: 3;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 0 28px 30px;
    background: linear-gradient(0deg, rgba(0,0,0,0.94) 0%, rgba(0,0,0,0.55) 42%, rgba(0,0,0,0.12) 72%, transparent 100%);
  }
  .create-card-title {
    font-size: 36px; font-weight: 900; letter-spacing: 0.08em;
    color: #f8e080; margin: 0 0 10px; text-transform: lowercase;
    text-shadow: 0 0 18px rgba(255,220,80,0.55), 0 2px 8px rgba(0,0,0,0.9);
  }
  .create-card-desc {
    display: block; font-size: 15px; color: rgba(230,210,155,0.92);
    letter-spacing: 0.04em; line-height: 1.65; max-width: 380px;
    text-shadow: 0 1px 6px rgba(0,0,0,0.95);
  }
  .create-card-badge {
    position: absolute; top: 14px; right: 14px; z-index: 3;
    font-size: 11px; letter-spacing: 0.12em; font-weight: 700;
    color: rgba(150,120,60,0.7); border: 1px solid rgba(150,120,60,0.28);
    border-radius: 5px; padding: 3px 8px; text-transform: uppercase;
    background: rgba(0,0,0,0.5);
  }

  #create-tool-view {
    flex: 1; display: none; flex-direction: column;
  }
  #create-tool-view.open { display: flex; }
  #create-tool-iframe { width: 100%; flex: 1; border: none; }

  /* ── Groove Panel ─────────────────────────────────────────── */
  #groove-panel { background: #0e0a0d; display: none; flex-direction: column; }
  #groove-panel.active { display: flex; }

  /* ── Groove home: 2-section split ── */
  #groove-home {
    flex: 1; display: flex; flex-direction: row;
    overflow: hidden; background: #06040a;
  }
  .groove-half-section {
    flex: 1; display: flex; flex-direction: column;
    position: relative; overflow: hidden; min-width: 0;
  }
  .ghs-canvas {
    position: absolute; inset: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 0; display: block;
  }
  .ghs-header {
    position: relative; z-index: 2; flex-shrink: 0;
    padding: 20px 22px 14px;
    background: linear-gradient(to bottom, rgba(6,4,10,0.82) 0%, rgba(6,4,10,0.12) 100%);
    border-bottom: 1px solid rgba(220,100,160,0.14);
  }
  .ghs-header-play { border-bottom-color: rgba(100,185,230,0.14); }
  .ghs-title {
    font-size: 24px; font-weight: 900; letter-spacing: 0.18em; text-transform: lowercase;
    color: rgba(252,215,238,0.96); display: flex; align-items: center; gap: 9px;
    text-shadow: 0 0 28px rgba(220,100,160,0.55), 0 2px 10px rgba(0,0,0,0.9);
  }
  .ghs-title-play {
    color: rgba(195,232,252,0.96);
    text-shadow: 0 0 28px rgba(100,185,230,0.55), 0 2px 10px rgba(0,0,0,0.9);
  }
  .ghs-subtitle {
    font-size: 13px; letter-spacing: 0.12em; color: rgba(255,255,255,0.28);
    margin-top: 5px; text-transform: lowercase;
  }
  /* Center divider */
  #groove-center-divider {
    width: 17px; flex-shrink: 0; position: relative; z-index: 3;
    display: flex; align-items: center; justify-content: center;
  }
  #groove-center-divider svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
  #groove-divider-dot {
    position: relative; z-index: 2; width: 7px; height: 7px; border-radius: 50%;
    background: rgba(220,100,160,0.9);
    box-shadow: 0 0 10px rgba(220,100,160,0.8), 0 0 22px rgba(220,100,160,0.4);
  }

  /* Half-section: clickable, enter hint */
  .groove-half-section { cursor: pointer; }
  .groove-half-section:hover { background: rgba(255,255,255,0.015); }
  .ghs-enter-hint {
    position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
    z-index: 3; font-size: 15px; letter-spacing: 0.14em; color: rgba(220,100,160,0.42);
    transition: color 0.18s; pointer-events: none;
  }
  .groove-half-section:hover .ghs-enter-hint { color: rgba(220,100,160,0.9); }
  .ghs-enter-hint-play { color: rgba(100,185,230,0.42); }
  .groove-half-section:hover .ghs-enter-hint-play { color: rgba(100,185,230,0.9); }

  /* Compose mode tabs in full-view header */
  #groove-compose-tabs {
    display: none; align-items: center; gap: 4px;
  }
  .gct-tab {
    background: none; border: 1px solid rgba(255,255,255,0.08); border-radius: 14px;
    color: rgba(200,155,180,0.5); font: inherit; font-size: 17px; font-weight: 600;
    padding: 6px 18px; cursor: pointer; letter-spacing: 0.08em; text-transform: lowercase;
    transition: all 0.15s;
  }
  .gct-tab:hover { border-color: rgba(220,100,160,0.3); color: rgba(230,175,210,0.8); }
  .gct-tab.active {
    border-color: rgba(220,100,160,0.55); color: rgba(245,195,225,0.95);
    background: rgba(220,100,160,0.1);
    box-shadow: 0 0 10px rgba(220,100,160,0.18);
  }

  /* ── Groove full view (card entered) ── */
  #groove-full-view { display: none; flex: 1; flex-direction: column; overflow: hidden; }
  #groove-full-view.open { display: flex; }
  #groove-full-header {
    display: none;
  }
  #groove-back-home {
    background: none; border: 1px solid rgba(255,255,255,0.09); border-radius: 16px;
    color: rgba(200,160,180,0.7); font: inherit; font-size: 18px;
    padding: 7px 18px; cursor: pointer; letter-spacing: 0.07em;
    display: flex; align-items: center; gap: 6px; transition: all 0.15s;
  }
  #groove-back-home:hover { border-color: rgba(220,100,160,0.4); color: rgba(240,185,215,0.88); }
  #groove-full-title {
    position: absolute; left: 50%; transform: translateX(-50%);
    font-size: 28px; font-weight: 700; letter-spacing: 0.18em;
    color: rgba(240,185,220,0.92); text-transform: lowercase;
    text-shadow: 0 0 22px rgba(220,100,160,0.4), 0 2px 8px rgba(0,0,0,0.8);
    pointer-events: none;
  }
  #groove-full-body {
    flex: 1; display: flex; flex-direction: column; overflow: hidden; position: relative;
  }

  /* Studio / Stage horizontal split (legacy — hidden) */
  #groove-split { display: flex; flex-direction: column; flex: 1; overflow: hidden; }
  .groove-half {
    flex: 1; display: flex; flex-direction: column; position: relative;
    overflow: hidden; min-width: 0; min-height: 0;
  }
  .groove-half-canvas {
    position: absolute; inset: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 0; display: block;
  }
  .groove-half-inner {
    position: relative; z-index: 1; flex: 1; display: flex;
    flex-direction: column; min-height: 0;
  }
  .groove-half-header {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 14px 16px 12px; flex-shrink: 0; height: 92px; position: relative;
    border-bottom: 1px solid rgba(220,100,160,0.18);
    background: linear-gradient(to bottom, rgba(6,4,10,0.68) 0%, rgba(6,4,10,0.18) 100%);
  }
  .groove-half-title {
    position: absolute; bottom: 13px; left: 16px;
    font-size: 21px; font-weight: 800; letter-spacing: 0.14em;
    color: rgba(255,218,238,0.95); text-transform: lowercase;
    display: flex; align-items: center; gap: 8px;
    text-shadow: 0 0 26px rgba(220,100,160,0.55), 0 2px 10px rgba(0,0,0,0.9);
  }
  .groove-half-tabs {
    position: absolute; top: 12px; right: 12px; display: flex; gap: 5px;
  }
  .groove-half-tab {
    background: rgba(0,0,0,0.45); border: 1px solid rgba(220,100,160,0.22); border-radius: 14px;
    color: rgba(200,150,180,0.62); font-family: inherit; font-size: 14px;
    padding: 5px 16px; cursor: pointer; letter-spacing: 0.07em; transition: all 0.15s;
    backdrop-filter: blur(4px);
  }
  .groove-half-tab.active {
    border-color: rgba(220,100,160,0.65); color: rgba(248,200,228,0.96);
    background: rgba(220,100,160,0.18);
  }
  .groove-half-tab:hover:not(.active) { border-color: rgba(220,100,160,0.38); color: rgba(230,178,205,0.82); }
  /* Stage half — blue accent */
  #groove-stage-half .groove-half-title {
    color: rgba(195,232,252,0.95);
    text-shadow: 0 0 26px rgba(100,185,230,0.55), 0 2px 10px rgba(0,0,0,0.9);
  }
  #groove-stage-half .groove-half-header { border-bottom-color: rgba(100,185,230,0.18); }
  #groove-stage-half .groove-half-tab { border-color: rgba(100,185,230,0.22); color: rgba(120,190,225,0.62); }
  #groove-stage-half .groove-half-tab.active { border-color: rgba(100,185,230,0.65); color: rgba(200,232,252,0.96); background: rgba(100,185,230,0.18); }
  #groove-stage-half .groove-half-tab:hover:not(.active) { border-color: rgba(100,185,230,0.38); color: rgba(155,210,235,0.82); }

  .groove-half-body {
    flex: 1; display: flex; flex-direction: column; overflow: hidden; position: relative;
    background: rgba(6,4,10,0.6);
  }
  /* Glowing center divider — horizontal */
  #groove-divider {
    height: 17px; width: 100%; flex-shrink: 0; position: relative;
    background: none; display: flex; align-items: center; justify-content: stretch;
  }
  #groove-divider svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
  #groove-divider-dot {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    width: 7px; height: 7px; border-radius: 50%;
    background: rgba(220,100,160,0.9);
    box-shadow: 0 0 10px rgba(220,100,160,0.8), 0 0 22px rgba(220,100,160,0.4);
    z-index: 2;
  }

  /* Groove half cover cards */
  .groove-cover {
    position: absolute; inset: 0; z-index: 8;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    cursor: pointer;
    background: linear-gradient(to bottom, rgba(8,4,14,0.55) 0%, rgba(6,4,10,0.38) 100%);
    transition: opacity 0.28s;
  }
  .groove-cover.dismissed { opacity: 0; pointer-events: none; }
  .groove-cover-main {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 10px; text-align: center;
  }
  .groove-cover-title {
    font-size: 38px; font-weight: 900; letter-spacing: 0.22em; text-transform: uppercase;
    text-shadow: 0 0 40px rgba(220,100,160,0.75), 0 2px 18px rgba(0,0,0,0.95);
    color: rgba(255,222,242,0.97);
  }
  #groove-stage-cover .groove-cover-title {
    color: rgba(195,232,252,0.97);
    text-shadow: 0 0 40px rgba(100,185,230,0.75), 0 2px 18px rgba(0,0,0,0.95);
  }
  .groove-cover-sub {
    font-size: 15px; letter-spacing: 0.18em; color: rgba(255,255,255,0.45);
    text-transform: lowercase; font-weight: 400;
  }
  .groove-cover-enter {
    margin-top: 16px;
    background: rgba(220,100,160,0.14); border: 1px solid rgba(220,100,160,0.4);
    border-radius: 20px; color: rgba(255,200,230,0.88); font-family: inherit;
    font-size: 15px; letter-spacing: 0.12em; padding: 9px 28px; cursor: pointer;
    transition: all 0.14s;
  }
  .groove-cover-enter:hover { background: rgba(220,100,160,0.28); border-color: rgba(220,100,160,0.65); }
  #groove-stage-cover .groove-cover-enter {
    background: rgba(100,185,230,0.14); border-color: rgba(100,185,230,0.4); color: rgba(180,225,252,0.88);
  }
  #groove-stage-cover .groove-cover-enter:hover { background: rgba(100,185,230,0.28); border-color: rgba(100,185,230,0.65); }

  /* Views within halves */
  #groove-beat-view { flex: 1; display: none; flex-direction: column; overflow: hidden; background: #0a060e; }
  #groove-beat-view.open { display: flex; }
  #groove-beat-iframe { flex: 1; border: none; display: block; width: 100%; height: 100%; }

  #groove-studio-view { flex: 1; display: none; flex-direction: column; overflow-y: auto; overflow-x: hidden; }
  #groove-studio-view.open { display: flex; }
  .groove-mode-tabs {
    display: flex; border-bottom: 1px solid rgba(220,100,160,0.14);
    padding: 0 18px; flex-shrink: 0; background: rgba(0,0,0,0.3);
    gap: 2px;
  }
  .groove-mode-tab {
    background: none; border: none; color: rgba(200,150,175,0.5); font-family: inherit;
    font-size: 16px; font-weight: 600; letter-spacing: 0.1em; padding: 14px 20px 13px; cursor: pointer;
    border-bottom: 2px solid transparent; transition: all 0.18s; margin-bottom: -1px;
    text-transform: lowercase;
  }
  .groove-mode-tab.active {
    color: rgba(242,190,218,0.96); border-bottom-color: rgba(220,100,160,0.75);
    text-shadow: 0 0 14px rgba(220,100,160,0.35);
  }
  .groove-mode-tab:hover:not(.active) { color: rgba(228,175,202,0.72); }

  /* answers breadcrumb bar */
  #groove-answers-bar {
    flex-shrink: 0; min-height: 44px; padding: 8px 20px;
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    border-bottom: 1px solid rgba(220,100,160,0.08);
    background: rgba(0,0,0,0.3);
  }
  #groove-answers-bar:empty { display: none; }
  .groove-ans-tag {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 12px 4px 10px; border-radius: 20px; font-size: 15px; letter-spacing: 0.04em;
    background: rgba(220,100,160,0.14); border: 1px solid rgba(220,100,160,0.32);
    color: rgba(245,190,215,0.9); animation: tagIn 0.25s ease;
  }
  .groove-ans-tag .tag-key { color: rgba(200,140,175,0.55); font-size: 15px; margin-right: 2px; }
  @keyframes tagIn { from { opacity:0; transform:scale(0.85) translateY(-4px); } to { opacity:1; transform:none; } }

  /* convo panel — art canvas + question overlay */
  #groove-convo-panel { flex: 1; display: flex; flex-direction: column; overflow: hidden; position: relative; }

  /* generative art canvas that fills the space */
  #groove-vis {
    position: absolute; inset: 0; z-index: 0; overflow: hidden;
    transition: background 1.2s ease;
    background: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(200,80,140,0.08) 0%, transparent 70%),
                radial-gradient(ellipse 50% 40% at 20% 70%, rgba(120,60,200,0.06) 0%, transparent 65%),
                #0e0a0d;
  }
  #groove-vis canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.55; }

  /* centered question + input card */
  #groove-question-card {
    position: relative; z-index: 2;
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 28px;
    padding: 32px 24px;
  }
  #groove-current-question {
    font-size: 26px; font-weight: 300; letter-spacing: 0.04em;
    color: rgba(245,200,225,0.92); text-align: center;
    text-shadow: 0 0 40px rgba(220,100,160,0.4);
    max-width: 520px; line-height: 1.4;
    transition: opacity 0.3s;
  }
  #groove-convo-input-area { width: 100%; max-width: 680px; }
  .groove-chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; padding: 0; }
  .groove-chip {
    background: rgba(220,100,160,0.07); border: 1px solid rgba(220,100,160,0.25); border-radius: 24px;
    color: rgba(220,170,200,0.8); font-family: inherit; font-size: 18px; letter-spacing: 0.04em;
    padding: 10px 22px; cursor: pointer; transition: all 0.18s; backdrop-filter: blur(4px);
  }
  .groove-chip:hover { border-color: rgba(220,100,160,0.55); color: rgba(245,190,220,0.95); background: rgba(220,100,160,0.14); transform: translateY(-2px); }
  .groove-chip.selected { background: rgba(220,100,160,0.22); border-color: rgba(220,100,160,0.7); color: rgba(255,205,230,1); box-shadow: 0 0 18px rgba(220,100,160,0.25); }
  .groove-input-row { display: flex; flex-direction: column; gap: 12px; width: 100%; }
  .groove-text-input {
    background: rgba(255,255,255,0.05); border: 1px solid rgba(220,100,160,0.22);
    border-radius: 12px; color: rgba(235,200,218,0.9); font-family: inherit; font-size: 19px;
    padding: 12px 18px; outline: none; transition: border-color 0.18s; width: 100%; box-sizing: border-box;
  }
  .groove-text-input:focus { border-color: rgba(220,100,160,0.5); }
  .groove-text-input::placeholder { color: rgba(200,150,175,0.3); }
  .groove-input-btns { display: flex; gap: 10px; align-items: center; justify-content: center; }
  .groove-skip-link {
    background: none; border: none; color: rgba(180,130,155,0.4); font-family: inherit;
    font-size: 16px; letter-spacing: 0.05em; cursor: pointer; padding: 4px 8px; transition: color 0.15s;
  }
  .groove-skip-link:hover { color: rgba(200,155,178,0.72); }
  #groove-quick-area { flex: 1; padding: 28px 24px; display: none; flex-direction: column; gap: 16px; overflow-y: auto; }
  #groove-quick-area.visible { display: flex; }
  .groove-prompt-textarea {
    background: rgba(255,255,255,0.04); border: 1px solid rgba(220,100,160,0.18);
    border-radius: 12px; color: rgba(235,200,218,0.9); font-family: inherit; font-size: 18px;
    padding: 14px 16px; outline: none; resize: vertical; min-height: 110px;
    width: 100%; box-sizing: border-box; line-height: 1.6; transition: border-color 0.18s;
  }
  .groove-prompt-textarea:focus { border-color: rgba(220,100,160,0.42); }
  .groove-prompt-textarea::placeholder { color: rgba(200,150,175,0.32); }
  .groove-btn {
    background: none; border: 1px solid rgba(220,100,160,0.28); border-radius: 24px;
    color: rgba(235,175,205,0.82); font-family: inherit; font-size: 17px; letter-spacing: 0.05em;
    padding: 9px 20px; cursor: pointer; transition: all 0.18s; display: inline-flex; align-items: center; gap: 7px;
  }
  .groove-btn:hover { background: rgba(220,100,160,0.1); border-color: rgba(220,100,160,0.5); color: rgba(245,195,220,0.95); }
  .groove-btn:disabled { opacity: 0.35; cursor: default; pointer-events: none; }
  .groove-btn.primary { background: rgba(220,100,160,0.18); border-color: rgba(220,100,160,0.45); color: rgba(245,200,220,0.95); }
  .groove-btn.primary:hover { background: rgba(220,100,160,0.3); border-color: rgba(220,100,160,0.7); }
  .groove-spinner {
    width: 28px; height: 28px; border-radius: 50%;
    border: 2px solid rgba(220,100,160,0.15); border-top-color: rgba(220,100,160,0.7);
    animation: grooveSpin 0.85s linear infinite;
  }
  @keyframes grooveSpin { to { transform: rotate(360deg); } }
  .groove-song-card {
    margin: 0 24px 20px; background: rgba(220,100,160,0.06);
    border: 1px solid rgba(220,100,160,0.2); border-radius: 14px; padding: 20px 22px;
    display: flex; flex-direction: column; gap: 12px;
  }
  .groove-song-card-art {
    width: 100%; height: 72px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; letter-spacing: 0.2em; color: rgba(255,255,255,0.4);
  }
  .groove-song-card-title { font-size: 18px; font-weight: 700; color: rgba(245,195,220,0.95); letter-spacing: 0.02em; }
  .groove-song-card-meta  { font-size: 16px; color: rgba(195,150,175,0.75); letter-spacing: 0.04em; }
  .groove-song-card-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
  #groove-generating {
    position: absolute; inset: 0; z-index: 5; display: none; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 16px; color: rgba(220,170,195,0.68); font-size: 18px; letter-spacing: 0.04em;
    background: rgba(14,10,13,0.7); backdrop-filter: blur(8px);
  }
  #groove-result-card {
    position: absolute; inset: 0; z-index: 5; display: none;
    overflow-y: auto; padding: 32px 24px;
    background: rgba(14,10,13,0.85); backdrop-filter: blur(10px);
  }

  /* Play view: library sidebar + DDR game side by side */
  #groove-stage-view { flex: 1; display: none; flex-direction: row; background: #0a0910; overflow: hidden; }
  #groove-stage-view.open { display: flex; }
  /* Library sidebar inside play view */
  #groove-library-view {
    width: 260px; flex-shrink: 0; display: flex; flex-direction: column; overflow: hidden;
    border-right: 1px solid rgba(100,185,230,0.12); background: rgba(6,4,12,0.92);
  }
  /* DDR game area */
  #groove-stage-game {
    flex: 1; display: flex; flex-direction: column; overflow: hidden; background: #0e0e18;
  }
  #groove-stage-scaler-wrap { flex: 1; overflow: hidden; position: relative; display: flex; align-items: flex-start; justify-content: center; }
  #groove-game-scaler { width: 1200px; height: 675px; transform-origin: top left; flex-shrink: 0; }
  #groove-game-iframe { width: 1200px; height: 675px; border: none; display: block; }

  /* Library sidebar tab bar (compact — sidebar is 260px) */
  #groove-lib-tabs {
    display: flex; flex-direction: column; gap: 0; flex-shrink: 0;
    padding: 10px 0 0;
    border-bottom: 1px solid rgba(100,185,230,0.14);
    background: rgba(0,0,0,0.3);
  }
  .glib-tab {
    background: none; border: none; border-left: 3px solid transparent;
    color: rgba(160,195,220,0.45); font-family: inherit; font-size: 15px; font-weight: 600;
    letter-spacing: 0.1em; padding: 12px 16px;
    cursor: pointer; transition: color 0.16s, border-color 0.16s; text-transform: lowercase;
    text-align: left;
  }
  .glib-tab:hover { color: rgba(160,210,240,0.72); }
  .glib-tab.active {
    color: rgba(195,232,252,0.96); border-left-color: rgba(100,185,230,0.8);
    background: rgba(100,185,230,0.06);
  }

  /* tab sections */
  .glib-section { display: none; flex: 1; flex-direction: column; overflow: hidden; }
  .glib-section.active { display: flex; }

  #groove-library-grid, #groove-originals-grid {
    flex: 1; overflow-y: auto; padding: 10px 12px 16px;
    display: flex; flex-direction: column; gap: 8px; align-content: start;
  }
  #groove-community-grid { flex: 1; overflow-y: auto; padding: 10px 12px 16px; display: flex; flex-direction: column; gap: 8px; align-content: start; }
  #groove-library-empty {
    flex: 1; display: none; flex-direction: column; align-items: center; justify-content: center;
    gap: 12px; color: rgba(190,145,168,0.36); font-size: 18px; letter-spacing: 0.05em; text-align: center; padding: 40px;
  }
  .groove-lib-card {
    background: rgba(255,255,255,0.025); border: 1px solid rgba(220,100,160,0.12);
    border-radius: 12px; overflow: hidden; transition: all 0.2s; position: relative;
  }
  .groove-lib-card:hover { border-color: rgba(220,100,160,0.3); background: rgba(220,100,160,0.05); }
  .groove-lib-art {
    height: 64px; width: 100%;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; letter-spacing: 0.15em; color: rgba(255,255,255,0.35);
  }
  .groove-lib-info { padding: 10px 12px 4px; }
  .groove-lib-title { font-size: 18px; font-weight: 700; color: rgba(240,185,210,0.9); margin-bottom: 4px; letter-spacing: 0.02em; }
  .groove-lib-meta  { font-size: 15px; color: rgba(180,135,158,0.75); letter-spacing: 0.03em; }
  .groove-lib-actions { padding: 6px 10px 10px; display: flex; gap: 8px; }
  .groove-lib-play {
    flex: 1; background: rgba(220,100,160,0.12); border: 1px solid rgba(220,100,160,0.28);
    border-radius: 18px; color: rgba(240,185,210,0.88); font-family: inherit; font-size: 16px;
    letter-spacing: 0.04em; padding: 5px 10px; cursor: pointer; transition: all 0.16s;
    display: flex; align-items: center; justify-content: center; gap: 5px;
  }
  .groove-lib-play:hover { background: rgba(220,100,160,0.25); border-color: rgba(220,100,160,0.52); }
  .groove-lib-del {
    background: none; border: 1px solid rgba(200,80,80,0.14); border-radius: 18px;
    color: rgba(200,110,110,0.42); font-family: inherit; font-size: 16px;
    padding: 5px 9px; cursor: pointer; transition: all 0.16s;
  }
  .groove-lib-del:hover { border-color: rgba(200,80,80,0.38); color: rgba(220,130,130,0.8); }

  /* ── Scene button (replaces vibes select) ── */
  #calm-vibes-wrap {
    position: relative; display: flex; align-items: center;
    justify-content: center; flex-shrink: 0;
  }
  #calm-bg-btn {
    appearance: none; background: rgba(255,255,255,0.04);
    border: 1px solid rgba(110,138,113,0.28); border-radius: 20px;
    color: rgba(170,210,178,0.85); font-family: inherit; font-size: 15px;
    letter-spacing: 0.07em; padding: 7px 22px; cursor: pointer;
    transition: all 0.16s; outline: none; min-width: 120px;
  }
  #calm-bg-btn:hover { border-color: rgba(110,138,113,0.55); background: rgba(110,138,113,0.08); color: rgba(200,230,205,1); }
  #calm-bg-btn.open { border-color: rgba(110,138,113,0.7); background: rgba(110,138,113,0.12); }

  /* ── Background picker panel ── */
  #calm-bg-panel {
    position: fixed; inset: 0; z-index: 9000;
    display: flex; flex-direction: column; justify-content: flex-end;
    pointer-events: none; opacity: 0; transition: opacity 0.22s;
  }
  #calm-bg-panel.open { opacity: 1; pointer-events: all; }
  #calm-bg-panel-backdrop {
    position: absolute; inset: 0;
    background: rgba(2,8,4,0.72); backdrop-filter: blur(4px);
  }
  #calm-bg-panel-sheet {
    position: relative; z-index: 1;
    background: linear-gradient(170deg, rgba(4,12,8,0.99) 0%, rgba(5,14,9,0.98) 60%, rgba(3,8,5,0.99) 100%);
    border-top: 1.5px solid rgba(78,203,138,0.28);
    border-radius: 0;
    padding: 0 0 env(safe-area-inset-bottom,0);
    height: 100%; max-height: 100%; display: flex; flex-direction: column;
    transform: translateY(100%); transition: transform 0.32s cubic-bezier(0.22,1,0.36,1);
    box-shadow: 0 -8px 60px rgba(0,0,0,0.75), 0 -2px 0 rgba(78,203,138,0.12);
  }
  #calm-bg-panel.open #calm-bg-panel-sheet { transform: translateY(0); }
  #cbp-handle-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 24px 14px; flex-shrink: 0;
    background: linear-gradient(90deg, rgba(78,203,138,0.06) 0%, transparent 60%);
    border-bottom: 1px solid rgba(78,203,138,0.14);
  }
  #cbp-title {
    font-size: 22px; font-weight: 800; letter-spacing: 0.18em;
    color: rgba(190,245,210,0.95); text-transform: lowercase;
    text-shadow: 0 0 28px rgba(78,203,138,0.55), 0 0 60px rgba(78,203,138,0.2);
  }
  #cbp-session-row {
    display: flex; gap: 8px; padding: 0 14px 10px; flex-shrink: 0;
    border-bottom: 1px solid rgba(110,138,113,0.12); margin-bottom: 4px;
  }
  #cbp-session-btn, #cbp-mixer-shortcut-btn {
    display: inline-flex; align-items: center; gap: 7px;
    background: none; border: 1px solid rgba(110,138,113,0.22); border-radius: 18px;
    color: rgba(150,200,160,0.72); font-family: inherit; font-size: 12px;
    padding: 6px 14px; cursor: pointer; letter-spacing: 0.06em; transition: all 0.15s;
  }
  #cbp-session-btn:hover, #cbp-mixer-shortcut-btn:hover {
    border-color: rgba(110,138,113,0.5); color: rgba(180,230,190,0.9);
    background: rgba(110,138,113,0.1);
  }
  #cbp-close {
    width: 28px; height: 28px; border-radius: 50%; border: none;
    background: rgba(110,138,113,0.12); color: rgba(170,210,178,0.7);
    font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: background 0.14s;
  }
  #cbp-close:hover { background: rgba(110,138,113,0.24); }
  #cbp-filters {
    flex-shrink: 0; padding: 0 14px 10px; display: flex; flex-direction: column; gap: 8px;
  }
  .cbp-filter-row {
    display: flex; flex-wrap: wrap; gap: 7px; padding-bottom: 2px;
  }
  .cbp-chip {
    flex: 1 1 auto; padding: 7px 10px; border-radius: 14px; font-size: 12.5px;
    letter-spacing: 0.06em; border: 1px solid rgba(110,138,113,0.22);
    background: transparent; color: rgba(140,180,148,0.65); cursor: pointer;
    font-family: inherit; transition: all 0.13s; white-space: nowrap; text-align: center;
    min-width: 64px;
  }
  .cbp-chip:hover { border-color: rgba(110,138,113,0.5); color: rgba(170,215,178,0.9); }
  .cbp-chip.active { background: rgba(110,138,113,0.18); border-color: rgba(110,138,113,0.65); color: rgba(190,230,200,1); }
  /* My-collections chips */
  .cbp-chip-mine { border-color: rgba(210,175,80,0.2); color: rgba(210,185,100,0.75); }
  .cbp-chip-mine:hover { border-color: rgba(210,175,80,0.5); color: rgba(230,200,110,0.95); }
  .cbp-chip-mine.active { background: rgba(210,175,80,0.14); border-color: rgba(210,175,80,0.6); color: rgba(240,210,120,1); }
  /* Saved chip (♥) */
  .cbp-chip-saved { border-color: rgba(210,90,120,0.2); color: rgba(210,110,130,0.7); }
  .cbp-chip-saved:hover { border-color: rgba(210,90,120,0.5); color: rgba(235,120,145,0.95); }
  .cbp-chip-saved.active { background: rgba(210,90,120,0.14); border-color: rgba(210,90,120,0.6); color: rgba(240,130,155,1); }
  #cbp-search-row {
    flex-shrink: 0; padding: 0 14px 10px; display: flex; gap: 8px;
  }
  #cbp-search {
    flex: 1; background: rgba(255,255,255,0.04); border: 1px solid rgba(110,138,113,0.2);
    border-radius: 10px; color: rgba(180,220,188,0.9); font-family: inherit; font-size: 13px;
    padding: 7px 12px; outline: none; letter-spacing: 0.05em;
  }
  #cbp-search::placeholder { color: rgba(110,138,113,0.38); }
  #cbp-search-go {
    padding: 7px 14px; border-radius: 10px; border: 1px solid rgba(110,138,113,0.3);
    background: rgba(110,138,113,0.1); color: rgba(170,210,178,0.85); font-family: inherit;
    font-size: 13px; cursor: pointer; letter-spacing: 0.06em; transition: all 0.13s; white-space: nowrap;
  }
  #cbp-search-go:hover { background: rgba(110,138,113,0.2); border-color: rgba(110,138,113,0.55); }
  #cbp-grid-wrap {
    flex: 1; overflow-y: auto; padding: 6px 16px 16px; scrollbar-width: thin;
    scrollbar-color: rgba(78,203,138,0.18) transparent;
  }
  #cbp-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(130px,1fr)); gap: 10px;
  }
  #cbp-empty-state {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 14px; padding: 48px 24px; color: rgba(110,138,113,0.38);
    font-size: 13px; letter-spacing: 0.07em; text-align: center; line-height: 1.6;
  }
  #cbp-empty-state svg { opacity: 0.28; }
  .cbp-thumb {
    position: relative; border-radius: 12px; overflow: hidden; cursor: pointer;
    aspect-ratio: 16/9; background: rgba(8,18,10,0.8);
    border: 1.5px solid rgba(78,203,138,0.1); transition: border-color 0.16s, transform 0.14s, box-shadow 0.16s;
  }
  .cbp-thumb:hover { border-color: rgba(78,203,138,0.45); transform: scale(1.03); box-shadow: 0 4px 20px rgba(0,0,0,0.5), 0 0 14px rgba(78,203,138,0.12); }
  .cbp-thumb.active { border-color: rgba(78,203,138,0.9); box-shadow: 0 0 0 2px rgba(78,203,138,0.22), 0 0 20px rgba(78,203,138,0.2); }
  .cbp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .cbp-thumb-grad {
    width: 100%; height: 100%; display: flex; align-items: flex-end; justify-content: flex-start;
    font-size: 10px; letter-spacing: 0.09em; color: rgba(210,245,220,0.85); text-align: left;
    padding: 6px 8px; box-sizing: border-box; line-height: 1.3; font-weight: 600;
    text-shadow: 0 1px 4px rgba(0,0,0,0.7);
  }
  .cbp-thumb-lbl {
    position: absolute; bottom: 0; left: 0; right: 0; padding: 18px 7px 5px;
    font-size: 10px; letter-spacing: 0.06em; color: rgba(205,235,210,0.92);
    background: linear-gradient(transparent, rgba(0,0,0,0.8)); text-align: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600;
  }
  .cbp-thumb .cbp-anim-badge {
    position: absolute; top: 5px; right: 5px; font-size: 8px; letter-spacing: 0.07em;
    background: rgba(78,203,138,0.25); color: rgba(170,240,195,0.95);
    border-radius: 5px; padding: 2px 6px; border: 1px solid rgba(78,203,138,0.3);
    font-weight: 700; text-transform: uppercase; backdrop-filter: blur(4px);
  }
  /* Heart save button on Unsplash thumbs */
  .cbp-heart {
    position: absolute; top: 4px; left: 4px; width: 22px; height: 22px; border-radius: 50%;
    background: rgba(0,0,0,0.45); border: none; cursor: pointer; display: flex;
    align-items: center; justify-content: center; font-size: 12px; line-height: 1;
    opacity: 0; transition: opacity 0.15s, transform 0.12s; color: rgba(255,255,255,0.7);
    backdrop-filter: blur(3px); z-index: 2; padding: 0;
  }
  .cbp-thumb:hover .cbp-heart { opacity: 1; }
  .cbp-heart.saved { opacity: 1; color: rgba(235,110,140,0.95); background: rgba(0,0,0,0.55); }
  .cbp-heart:hover { transform: scale(1.2); color: rgba(235,110,140,0.95); }
  #cbp-load-more {
    margin: 8px auto 0; display: block; padding: 8px 24px; border-radius: 12px;
    border: 1px solid rgba(110,138,113,0.25); background: transparent;
    color: rgba(140,180,148,0.7); font-family: inherit; font-size: 13px;
    letter-spacing: 0.07em; cursor: pointer; transition: all 0.14s;
  }
  #cbp-load-more:hover { background: rgba(110,138,113,0.1); border-color: rgba(110,138,113,0.5); }
  #cbp-load-more:disabled { opacity: 0.35; cursor: default; }
  #cbp-status {
    text-align: center; font-size: 12px; letter-spacing: 0.07em;
    color: rgba(110,138,113,0.45); padding: 8px 0; display: none;
  }
  #cbp-attribution {
    flex-shrink: 0; padding: 6px 14px; font-size: 10px; letter-spacing: 0.06em;
    color: rgba(110,138,113,0.3); text-align: center;
  }
  #cbp-attribution a { color: rgba(110,138,113,0.45); }

  /* ── Vibe panel top-level tabs ── */
  /* ── Wizard step bar ── */
  /* ── Wizard step pills ── */
  #cbp-steps {
    display: flex; align-items: center; padding: 12px 16px 14px; flex-shrink: 0; gap: 0;
    border-bottom: 1px solid rgba(110,138,113,0.14);
    background: rgba(0,0,0,0.18);
  }
  .cbp-step {
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    background: none; border: none; cursor: pointer; padding: 6px 2px;
    border-radius: 10px; transition: background 0.14s; flex: 1;
  }
  .cbp-step:hover { background: rgba(78,203,138,0.06); }
  .cbp-step-num {
    width: 34px; height: 34px; border-radius: 50%;
    border: 1.5px solid rgba(110,138,113,0.2);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700; color: rgba(110,138,113,0.38);
    font-family: inherit; transition: all 0.22s;
  }
  .cbp-step-lbl {
    font-size: 10px; letter-spacing: 0.06em; text-transform: lowercase;
    color: rgba(110,138,113,0.38); font-family: inherit; transition: color 0.18s;
    white-space: nowrap;
  }
  .cbp-step.active .cbp-step-num {
    border-color: rgba(78,203,138,0.9); background: rgba(78,203,138,0.2);
    color: rgba(170,248,205,1); box-shadow: 0 0 18px rgba(78,203,138,0.4), 0 0 6px rgba(78,203,138,0.6);
    transform: scale(1.08);
  }
  .cbp-step.active .cbp-step-lbl { color: rgba(150,225,175,1); font-weight: 700; letter-spacing: 0.08em; }
  .cbp-step.done .cbp-step-num {
    background: rgba(78,203,138,0.25); border-color: rgba(78,203,138,0.65);
    color: rgba(150,235,185,0.95);
  }
  .cbp-step.done .cbp-step-lbl { color: rgba(110,185,140,0.8); }
  .cbp-step-arrow {
    flex-shrink: 0; display: flex; align-items: center; margin-top: -18px; padding: 0 2px;
    color: rgba(78,203,138,0.2);
  }
  .cbp-step-arrow svg { display: block; }

  /* ── Wizard step pages ── */
  .cbp-wizard-step { display: none; flex-direction: column; flex: 1; overflow: hidden; min-height: 0; }
  .cbp-wizard-step.active { display: flex; }
  .cbp-step-heading {
    font-size: 28px; font-weight: 800; letter-spacing: 0.06em; text-transform: lowercase;
    color: rgba(200,240,215,0.92); padding: 20px 24px 4px; flex-shrink: 0;
  }
  .cbp-step-sub {
    font-size: 14px; color: rgba(110,138,113,0.6); letter-spacing: 0.06em;
    padding: 0 24px 14px; flex-shrink: 0;
  }
  .cbp-wiz-nav {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 24px 20px; flex-shrink: 0;
    border-top: 1px solid rgba(110,138,113,0.1); margin-top: auto;
    background: rgba(5,12,7,0.5);
  }
  .cbp-wiz-back {
    background: none; border: 1px solid rgba(110,138,113,0.22); border-radius: 22px;
    color: rgba(110,138,113,0.65); font: inherit; font-size: 15px; padding: 11px 26px;
    cursor: pointer; letter-spacing: 0.06em; transition: all 0.14s;
  }
  .cbp-wiz-back:hover { border-color: rgba(110,138,113,0.5); color: rgba(150,200,162,0.9); }
  .cbp-wiz-next {
    background: rgba(78,203,138,0.14); border: 1px solid rgba(78,203,138,0.45); border-radius: 22px;
    color: rgba(160,238,195,0.92); font: inherit; font-size: 15px; font-weight: 700;
    padding: 11px 32px; cursor: pointer; letter-spacing: 0.1em; transition: all 0.14s;
  }
  .cbp-wiz-next:hover { background: rgba(78,203,138,0.26); border-color: rgba(78,203,138,0.7); color: rgba(180,245,210,1); }
  .cbp-wiz-begin {
    background: linear-gradient(135deg, rgba(78,203,138,0.28) 0%, rgba(50,180,110,0.22) 100%);
    border: 1.5px solid rgba(78,203,138,0.65); border-radius: 22px;
    color: rgba(170,248,205,0.98); font: inherit; font-size: 16px; padding: 13px 40px;
    cursor: pointer; letter-spacing: 0.14em; font-weight: 700; transition: all 0.16s;
    box-shadow: 0 0 24px rgba(78,203,138,0.22);
  }
  .cbp-wiz-begin:hover {
    background: linear-gradient(135deg, rgba(78,203,138,0.42) 0%, rgba(50,180,110,0.34) 100%);
    border-color: rgba(78,203,138,0.85); box-shadow: 0 0 36px rgba(78,203,138,0.38);
  }
  .cbp-wiz-skip {
    background: none; border: none; color: rgba(110,138,113,0.42);
    font: inherit; font-size: 13px; cursor: pointer; letter-spacing: 0.06em;
    padding: 11px 14px; transition: color 0.13s;
  }
  .cbp-wiz-skip:hover { color: rgba(130,168,138,0.75); }

  /* ── Guide cards ── */
  #cbp-guide-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 8px 24px 12px; flex: 1; overflow-y: auto; }
  .cbp-guide-card {
    display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 24px 14px;
    background: rgba(0,0,0,0.35); border: 1.5px solid rgba(110,138,113,0.15); border-radius: 18px;
    cursor: pointer; transition: all 0.16s; font-family: inherit;
  }
  .cbp-guide-card:hover { border-color: rgba(110,138,113,0.42); background: rgba(110,138,113,0.08); transform: translateY(-2px); }
  .cbp-guide-card.active {
    border-color: rgba(78,203,138,0.78); background: rgba(78,203,138,0.1);
    box-shadow: 0 0 22px rgba(78,203,138,0.18);
  }
  .cbp-guide-avatar { width: 80px; height: 80px; }
  .cbp-guide-avatar svg { width: 100%; height: 100%; }
  .cbp-guide-name { font-size: 18px; color: rgba(190,235,205,0.95); letter-spacing: 0.06em; font-weight: 700; }
  .cbp-guide-desc { font-size: 13px; color: rgba(110,138,113,0.62); letter-spacing: 0.05em; text-align: center; line-height: 1.5; }

  /* ── Meditation cards ── */
  #cbp-med-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; padding: 8px 20px 10px; flex: 1; overflow-y: auto; }
  .cbp-med-card {
    display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 8px 14px;
    background: rgba(0,0,0,0.35); border: 1.5px solid rgba(110,138,113,0.13); border-radius: 14px;
    cursor: pointer; transition: all 0.16s; font-family: inherit;
  }
  .cbp-med-card:hover { border-color: rgba(110,138,113,0.38); background: rgba(110,138,113,0.08); transform: translateY(-2px); }
  .cbp-med-card.active { border-color: rgba(78,203,138,0.68); background: rgba(78,203,138,0.1); box-shadow: 0 0 18px rgba(78,203,138,0.16); }
  .cbp-med-icon { width: 36px; height: 36px; }
  .cbp-med-icon svg { width: 100%; height: 100%; }
  .cbp-med-name { font-size: 11.5px; color: rgba(185,225,195,0.92); font-weight: 700; letter-spacing: 0.04em; text-align: center; }
  .cbp-med-desc { font-size: 9px; color: rgba(110,138,113,0.5); letter-spacing: 0.04em; text-align: center; line-height: 1.4; }

  /* ── Go cards ── */
  #cbp-go-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 4px 16px 8px; flex: 1; overflow-y: auto; }
  .cbp-go-card {
    display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 20px 10px;
    background: rgba(0,0,0,0.35); border: 1.5px solid rgba(110,138,113,0.15); border-radius: 14px;
    cursor: pointer; transition: all 0.16s; font-family: inherit;
  }
  .cbp-go-card:hover { border-color: rgba(110,138,113,0.4); transform: translateY(-1px); background: rgba(110,138,113,0.08); }
  .cbp-go-card.active { border-color: rgba(78,203,138,0.72); background: rgba(78,203,138,0.12); box-shadow: 0 0 18px rgba(78,203,138,0.18); }
  .cbp-go-icon { width: 40px; height: 40px; }
  .cbp-go-icon svg { width: 100%; height: 100%; }
  .cbp-go-name { font-size: 14px; color: rgba(190,235,205,0.95); font-weight: 700; letter-spacing: 0.04em; }
  .cbp-go-desc { font-size: 10px; color: rgba(110,138,113,0.55); text-align: center; line-height: 1.4; }

  #cbp-top-tabs {
    display: flex; gap: 6px; padding: 0 14px 10px; flex-shrink: 0;
    border-bottom: 1px solid rgba(110,138,113,0.1);
    margin-bottom: 2px;
  }
  .cbp-top-tab {
    flex: 1; padding: 8px 12px; border-radius: 12px; border: 1px solid rgba(110,138,113,0.18);
    background: transparent; color: rgba(140,180,148,0.55); font-family: inherit;
    font-size: 13px; letter-spacing: 0.1em; cursor: pointer; transition: all 0.14s;
  }
  .cbp-top-tab:hover { border-color: rgba(110,138,113,0.4); color: rgba(170,215,178,0.85); }
  .cbp-top-tab.active {
    background: rgba(110,138,113,0.16); border-color: rgba(110,138,113,0.55);
    color: rgba(190,230,200,1);
  }
  .cbp-top-sec { display: flex; flex-direction: column; flex: 1; overflow: hidden; min-height: 0; }
  #cbp-sec-backgrounds, #cbp-sec-sounds { display: flex; flex-direction: column; flex: 1; overflow: hidden; min-height: 0; }

  /* ── Sub-tabs (still/live, loops/spotify) ── */
  .cbp-sub-tabs {
    display: flex; gap: 6px; padding: 10px 16px 8px; flex-shrink: 0;
  }
  .cbp-sub-tab {
    padding: 7px 16px; border-radius: 18px; border: 1.5px solid rgba(110,138,113,0.16);
    background: transparent; color: rgba(110,138,113,0.55); font-family: inherit;
    font-size: 12.5px; font-weight: 600; letter-spacing: 0.09em; cursor: pointer;
    transition: all 0.14s; text-transform: lowercase;
  }
  .cbp-sub-tab:hover { border-color: rgba(110,138,113,0.38); color: rgba(158,208,168,0.9); background: rgba(110,138,113,0.05); }
  .cbp-sub-tab.active {
    background: rgba(78,203,138,0.14); border-color: rgba(78,203,138,0.5);
    color: rgba(175,240,200,0.98); box-shadow: 0 0 10px rgba(78,203,138,0.14);
  }
  .cbp-bgsub-sec { display: flex; flex-direction: column; flex: 1; overflow: hidden; min-height: 0; }

  /* ── Pexels live section ── */
  #cbp-pexels-presets {
    display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 14px 8px; flex-shrink: 0;
  }
  .cbp-pexels-preset { min-width: 52px; }
  .cbp-pexels-preset.active {
    background: rgba(110,138,113,0.18); border-color: rgba(110,138,113,0.65); color: rgba(190,230,200,1);
  }
  #cbp-pexels-search-row {
    flex-shrink: 0; padding: 0 14px 8px; display: flex; gap: 8px;
  }
  #cbp-pexels-search {
    flex: 1; background: rgba(255,255,255,0.04); border: 1px solid rgba(110,138,113,0.2);
    border-radius: 10px; color: rgba(180,220,188,0.9); font-family: inherit; font-size: 13px;
    padding: 7px 12px; outline: none; letter-spacing: 0.05em;
  }
  #cbp-pexels-search::placeholder { color: rgba(110,138,113,0.38); }
  #cbp-pexels-go {
    padding: 7px 14px; border-radius: 10px; border: 1px solid rgba(110,138,113,0.3);
    background: rgba(110,138,113,0.1); color: rgba(170,210,178,0.85); font-family: inherit;
    font-size: 13px; cursor: pointer; letter-spacing: 0.06em; transition: all 0.13s; white-space: nowrap;
  }
  #cbp-pexels-go:hover { background: rgba(110,138,113,0.2); border-color: rgba(110,138,113,0.55); }
  #cbp-pexels-status {
    text-align: center; font-size: 12px; letter-spacing: 0.07em;
    color: rgba(110,138,113,0.45); padding: 4px 0; display: none; flex-shrink: 0;
  }
  #cbp-pexels-grid-wrap {
    flex: 1; overflow-y: auto; padding: 0 14px 8px; scrollbar-width: thin;
    scrollbar-color: rgba(110,138,113,0.22) transparent;
  }
  #cbp-pexels-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(110px,1fr)); gap: 8px;
  }
  .cbp-pex-thumb {
    position: relative; border-radius: 10px; overflow: hidden; cursor: pointer;
    aspect-ratio: 16/9; background: rgba(110,138,113,0.06);
    border: 1.5px solid transparent; transition: border-color 0.14s, transform 0.13s;
  }
  .cbp-pex-thumb:hover { border-color: rgba(110,138,113,0.4); transform: scale(1.02); }
  .cbp-pex-thumb.active { border-color: rgba(110,138,113,0.85); box-shadow: 0 0 0 2px rgba(110,138,113,0.25); }
  .cbp-pex-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .cbp-pex-play {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.28); opacity: 0; transition: opacity 0.14s;
  }
  .cbp-pex-thumb:hover .cbp-pex-play { opacity: 1; }
  .cbp-pex-play svg { filter: drop-shadow(0 1px 4px rgba(0,0,0,0.6)); }
  .cbp-pex-lbl {
    position: absolute; bottom: 0; left: 0; right: 0; padding: 12px 5px 3px;
    font-size: 9px; letter-spacing: 0.05em; color: rgba(200,230,205,0.88);
    background: linear-gradient(transparent, rgba(0,0,0,0.7)); text-align: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  #cbp-pexels-attr {
    flex-shrink: 0; padding: 4px 14px; font-size: 10px; letter-spacing: 0.06em;
    color: rgba(110,138,113,0.3); text-align: center;
  }
  #cbp-pexels-attr a { color: rgba(110,138,113,0.45); }

  /* ── Sounds: loop buttons ── */
  .cbp-sndsub-sec { display: flex; flex-direction: column; flex: 1; overflow: hidden; min-height: 0; }
  #cbp-loops { display: flex; flex-direction: column; flex: 1; overflow: hidden; min-height: 0; padding: 4px 14px 0; }
  #cbp-loops-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
    overflow-y: auto; padding-bottom: 8px; scrollbar-width: thin;
    scrollbar-color: rgba(110,138,113,0.18) transparent;
  }
  .cbp-loop-btn {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 12px 6px; border-radius: 14px; border: 1.5px solid rgba(110,138,113,0.16);
    background: rgba(0,0,0,0.2); color: rgba(140,180,148,0.6); cursor: pointer;
    font-family: inherit; font-size: 11.5px; letter-spacing: 0.06em;
    transition: all 0.14s; min-height: 70px; justify-content: center;
  }
  .cbp-loop-btn:hover { border-color: rgba(110,138,113,0.42); color: rgba(175,220,185,0.92); background: rgba(110,138,113,0.08); transform: translateY(-1px); }
  .cbp-loop-btn.on {
    background: rgba(78,203,138,0.15); border-color: rgba(78,203,138,0.6);
    color: rgba(190,245,210,1); box-shadow: 0 0 14px rgba(78,203,138,0.18);
  }
  #cbp-loops-hint {
    flex-shrink: 0; text-align: center; font-size: 10px; letter-spacing: 0.07em;
    color: rgba(110,138,113,0.3); padding: 6px 0;
  }
  #cbp-loops-vol {
    flex-shrink: 0; display: flex; align-items: center; gap: 10px;
    padding: 6px 0 10px;
  }
  .cbp-vol-lbl { font-size: 11px; letter-spacing: 0.08em; color: rgba(110,138,113,0.45); white-space: nowrap; }
  #cbp-loops-vol-sl {
    flex: 1; accent-color: rgba(110,138,113,0.8); height: 3px;
  }

  /* ── Create tools as backgrounds ── */
  #cbp-create { display: flex; flex-direction: column; flex: 1; overflow: hidden; min-height: 0; padding: 8px 14px 0; }
  #cbp-create-hint {
    font-size: 11px; letter-spacing: 0.07em; color: rgba(110,138,113,0.38);
    text-align: center; padding: 0 0 10px; flex-shrink: 0;
  }
  #cbp-create-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
    overflow-y: auto; padding-bottom: 10px;
  }
  .cbp-create-tile {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 20px 12px 16px; border-radius: 18px;
    border: 1px solid rgba(110,138,113,0.18); background: rgba(255,255,255,0.025);
    cursor: pointer; font-family: inherit; transition: all 0.15s;
  }
  .cbp-create-tile:hover { border-color: rgba(110,138,113,0.45); background: rgba(110,138,113,0.07); transform: translateY(-2px); }
  .cbp-create-tile.active { border-color: rgba(110,138,113,0.72); background: rgba(110,138,113,0.12); box-shadow: 0 0 20px rgba(110,138,113,0.16); }
  .cbp-create-tile-icon { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; }
  .cbp-create-tile-icon svg { width: 100%; height: 100%; }
  .cbp-create-tile-label { font-size: 14px; letter-spacing: 0.08em; color: rgba(170,210,178,0.88); font-weight: 700; }
  .cbp-create-tile-sub { font-size: 11px; letter-spacing: 0.06em; color: rgba(110,138,113,0.5); }

  /* ── Sounds: Spotify list ── */
  #cbp-spotify { display: flex; flex-direction: column; flex: 1; overflow: hidden; min-height: 0; padding: 4px 14px 0; }
  #cbp-spotify-list { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; padding-bottom: 10px; }
  .cbp-pl-item {
    display: flex; align-items: center; gap: 12px; padding: 10px 14px;
    border-radius: 12px; border: 1px solid rgba(110,138,113,0.14);
    background: rgba(255,255,255,0.025); text-decoration: none;
    transition: all 0.14s; cursor: pointer;
  }
  .cbp-pl-item:hover { border-color: rgba(110,138,113,0.35); background: rgba(110,138,113,0.07); }
  .cbp-pl-name { font-size: 13px; letter-spacing: 0.07em; color: rgba(180,220,188,0.85); margin-bottom: 2px; }
  .cbp-pl-desc { font-size: 10.5px; letter-spacing: 0.06em; color: rgba(110,138,113,0.5); }

  /* ── Session step 2 new layout ── */
  .s2-top-tabs {
    display: flex; gap: 6px; margin-bottom: 10px;
  }
  .s2-top-tab {
    flex: 1; padding: 8px 10px; border-radius: 12px; border: 1px solid rgba(110,138,113,0.18);
    background: transparent; color: rgba(140,180,148,0.55); font-family: inherit;
    font-size: 12.5px; letter-spacing: 0.08em; cursor: pointer; transition: all 0.14s;
  }
  .s2-top-tab.active {
    background: rgba(110,138,113,0.15); border-color: rgba(110,138,113,0.55);
    color: rgba(190,230,200,1);
  }
  .s2-top-sec { display: flex; flex-direction: column; }
  .s2-sub-tabs { display: flex; gap: 4px; margin-bottom: 8px; }
  .s2-sub-tab {
    padding: 5px 14px; border-radius: 10px; border: 1px solid rgba(110,138,113,0.14);
    background: transparent; color: rgba(110,138,113,0.5); font-family: inherit;
    font-size: 11.5px; letter-spacing: 0.07em; cursor: pointer; transition: all 0.13s;
  }
  .s2-sub-tab.active {
    background: rgba(110,138,113,0.12); border-color: rgba(110,138,113,0.45);
    color: rgba(170,215,178,0.95);
  }
  .s2-bgsub-sec, .s2-sndsub-sec { display: flex; flex-direction: column; }
  .s2-loops-grid {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 6px;
  }
  .s2-loop-btn {
    padding: 6px 4px; border-radius: 9px; border: 1px solid rgba(110,138,113,0.18);
    background: transparent; color: rgba(140,180,148,0.6); font-family: inherit;
    font-size: 10.5px; letter-spacing: 0.05em; cursor: pointer; transition: all 0.13s;
    text-align: center;
  }
  .s2-loop-btn:hover { border-color: rgba(110,138,113,0.4); color: rgba(170,215,178,0.9); }
  .s2-loop-btn.active {
    background: rgba(110,138,113,0.18); border-color: rgba(110,138,113,0.65);
    color: rgba(190,230,200,1);
  }

  /* ── Calm sound mixer ── */
  #calm-mixer-panel {
    display: none; position: absolute; bottom: 0; left: 0; right: 0;
    z-index: 10; background: rgba(4,8,6,0.94); border-top: 1px solid rgba(110,138,113,0.2);
    padding: 16px 20px 20px; max-height: 70vh; overflow-y: auto;
    animation: mixerSlideUp 0.22s ease;
  }
  #calm-mixer-panel.open { display: block; }
  @keyframes mixerSlideUp { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
  #calm-mixer-title {
    font-size: 15px; letter-spacing: 0.18em; text-transform: uppercase;
    color: rgba(110,138,113,0.6); margin-bottom: 14px; display: flex;
    align-items: center; justify-content: space-between;
    position: sticky; top: 0; background: rgba(4,8,6,0.97);
    padding: 4px 0 10px; z-index: 2;
  }
  #calm-mixer-close {
    background: none; border: none; color: rgba(255,255,255,0.35); cursor: pointer;
    font-size: 18px; line-height: 1; padding: 0;
  }
  .mixer-channel {
    display: flex; align-items: center; gap: 12px; margin-bottom: 12px;
  }
  .mixer-ch-toggle {
    width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
    background: rgba(110,138,113,0.08); border: 1.5px solid rgba(110,138,113,0.22);
    color: rgba(110,138,113,0.55); font-size: 14px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s;
  }
  .mixer-ch-toggle.on { background: rgba(110,138,113,0.22); border-color: rgba(110,138,113,0.65); color: rgba(160,210,168,0.95); }
  .mixer-ch-name {
    width: 72px; flex-shrink: 0; font-size: 14px; letter-spacing: 0.06em;
    color: rgba(200,220,205,0.65); text-transform: lowercase;
  }
  .mixer-ch-vol {
    flex: 1; -webkit-appearance: none; appearance: none; height: 3px;
    border-radius: 2px; background: rgba(110,138,113,0.2); outline: none; cursor: pointer;
  }
  .mixer-ch-vol::-webkit-slider-thumb {
    -webkit-appearance: none; width: 13px; height: 13px; border-radius: 50%;
    background: rgba(110,138,113,0.8); cursor: pointer;
  }
  #calm-mixer-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 16px; background: rgba(110,138,113,0.07);
    border: 1px solid rgba(110,138,113,0.22); border-radius: 20px;
    color: rgba(140,180,145,0.7); font-family: inherit; font-size: 16px;
    letter-spacing: 0.06em; cursor: pointer; transition: all 0.15s;
  }
  #calm-mixer-btn:hover, #calm-mixer-btn.open { background: rgba(110,138,113,0.16); border-color: rgba(110,138,113,0.5); color: rgba(160,210,168,0.9); }

  /* ── Sleep timer row ── */
  #calm-sleep-timer-row {
    display: flex; align-items: center; gap: 8px; margin-top: 16px;
    padding-top: 14px; border-top: 1px solid rgba(110,138,113,0.15);
  }
  .sleep-label {
    font-size: 13px; letter-spacing: 0.08em; color: rgba(180,210,185,0.5);
    text-transform: lowercase; flex-shrink: 0;
  }
  .sleep-btn {
    padding: 4px 10px; border-radius: 14px; font-family: inherit; font-size: 13px;
    letter-spacing: 0.05em; cursor: pointer; transition: all 0.14s;
    background: rgba(110,138,113,0.08); border: 1px solid rgba(110,138,113,0.22);
    color: rgba(160,210,168,0.65);
  }
  .sleep-btn:hover { background: rgba(110,138,113,0.18); }
  .sleep-btn.active { background: rgba(110,138,113,0.28); border-color: rgba(110,138,113,0.7); color: rgba(200,240,210,0.95); }
  #sleep-timer-display {
    margin-left: auto; font-size: 14px; letter-spacing: 0.12em;
    color: rgba(160,210,168,0.7); font-variant-numeric: tabular-nums;
  }

  /* ── Daily Challenge Banner ── */
  #daily-challenge-banner {
    display: flex; align-items: stretch; gap: 0;
    margin: 0 0 18px; border-radius: 12px; overflow: hidden;
    border: 1.5px solid rgba(232,192,64,0.38);
    background: linear-gradient(135deg,#0e0a00 0%,#1a1000 60%,#0c0800 100%);
    box-shadow: 0 0 28px rgba(232,192,64,0.1), inset 0 0 0 1px rgba(232,192,64,0.06);
    position: relative; cursor: default;
    animation: dc-enter 0.5s ease both;
  }
  @keyframes dc-enter { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }
  #dc-art {
    flex-shrink: 0; width: 88px; display: flex; align-items: center; justify-content: center;
    background: rgba(232,192,64,0.06); border-right: 1px solid rgba(232,192,64,0.18);
    padding: 10px 0;
  }
  #dc-art svg { width: 56px; height: 56px; }
  #dc-body { flex: 1; padding: 13px 16px; display: flex; flex-direction: column; gap: 5px; }
  #dc-label {
    font-size: 9px; letter-spacing: 0.2em; color: rgba(232,192,64,0.55);
    text-transform: uppercase; font-weight: 700; line-height: 1;
  }
  #dc-game-name {
    font-size: 18px; font-weight: 800; letter-spacing: 0.06em; line-height: 1.1;
    color: rgba(248,220,100,0.95);
  }
  #dc-desc {
    font-size: 12px; color: rgba(210,180,80,0.55); letter-spacing: 0.04em; line-height: 1.3;
  }
  #dc-cta-row { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
  #dc-play-btn {
    padding: 6px 18px; border-radius: 20px; border: 1.5px solid rgba(232,192,64,0.7);
    background: rgba(232,192,64,0.12); color: rgba(248,224,110,0.95);
    font-family: inherit; font-size: 12px; font-weight: 700; letter-spacing: 0.12em;
    cursor: pointer; text-transform: uppercase; transition: all 0.14s;
  }
  #dc-play-btn:hover { background: rgba(232,192,64,0.25); border-color: rgba(232,192,64,1); }
  #dc-streak {
    font-size: 12px; letter-spacing: 0.06em; color: rgba(232,192,64,0.5);
    display: flex; align-items: center; gap: 5px;
  }
  #dc-streak svg { width: 14px; height: 14px; }
  #dc-done-badge {
    display: none; padding: 5px 14px; border-radius: 20px;
    background: rgba(100,200,80,0.15); border: 1.5px solid rgba(100,200,80,0.5);
    color: rgba(140,220,120,0.9); font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
  }
  #dc-pulse {
    position: absolute; top: 8px; right: 10px;
    width: 8px; height: 8px; border-radius: 50%;
    background: rgba(232,192,64,0.8);
    animation: dc-pulse 2.2s ease-in-out infinite;
  }
  @keyframes dc-pulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(232,192,64,0.7); }
    50%      { box-shadow: 0 0 0 7px rgba(232,192,64,0); }
  }