/* ═══════════════════════════════════════════════════════════════════════
   SYNTHOGRASIZER — CEL-PASTEL THEME
   1990s DIC animation pastels (Madeline / Care Bears / Inspector Gadget)
   with coherent 2.5px navy-ink outlines and offset "sticker" shadows.

   Activated by `body.theme-cel-pastel`. Layers over base styles; the
   hardware theme is untouched when this class is absent.

   Visual rules (kept consistent across every element):
     1. INK   — 2.5px navy-ink (#1d2233) stroke on every interactive surface
     2. DROP  — offset-only ink shadow (no blur). Press collapses + nudges.
     3. CEL   — flat pastel fill split top/bottom; top highlight + bottom band
     4. RADII — 0 / 8 / 12 / 18 / 999 (pill). Nothing in between.
     5. PALETTE — 8 named pastels + ink + paper. No drift.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Tokens ───────────────────────────────────────────────────────────── */
body.theme-cel-pastel {
  /* Cel pastels */
  --cp-bubblegum:    #ffb6c8;  /* Madeline pink */
  --cp-peach:        #ffcb9a;  /* Care Bear apricot */
  --cp-butter:       #ffe79e;  /* butter yellow */
  --cp-mint:         #b8e8c8;
  --cp-sky:          #b6dafd;
  --cp-periwinkle:   #c4c8f0;
  --cp-lilac:        #dbb8ec;
  --cp-cherry:       #ef7a7a;  /* accent / danger */

  /* Darker companions (for inner band + active states) */
  --cp-bubblegumD:   #f08aa6;
  --cp-peachD:       #f2a872;
  --cp-butterD:      #f2cf6a;
  --cp-mintD:        #8fd4a8;
  --cp-skyD:         #8bbcec;
  --cp-periwinkleD:  #9fa4dd;
  --cp-lilacD:       #b58dcf;
  --cp-cherryD:      #d44a4a;

  /* Ink / paper */
  --cp-ink:    #1d2233;        /* navy-black outline */
  --cp-ink2:   #3a4055;
  --cp-ink3:   #6c7088;
  --cp-paper:  #fff5e0;        /* cream */
  --cp-paper2: #f7e9c8;
  --cp-paper3: #e9d8a8;
  --cp-white:  #fffdf6;

  /* Stroke widths */
  --cp-stroke: 2.5px;
  --cp-stroke-thin: 1.5px;

  /* Drop/cel utilities (referenced via box-shadow) */
  --cp-drop:        4px 5px 0 0 var(--cp-ink);
  --cp-drop-sm:     3px 4px 0 0 var(--cp-ink);
  --cp-drop-hover:  5px 7px 0 0 var(--cp-ink);
  --cp-drop-soft:   2px 3px 0 0 rgba(29,34,51,.55);
  --cp-cel-inner:
    inset 0 2px 0 0 rgba(255,255,255,0.55),
    inset 0 -3px 0 0 rgba(29,34,51,0.18);
  --cp-cel-inner-pressed:
    inset 0 2px 0 0 rgba(29,34,51,0.18),
    inset 0 -3px 0 0 rgba(255,255,255,0.30);

  /* Override global tokens — keeps base CSS in sync without rewriting */
  --bg-main:        var(--cp-paper);
  --bg-card:        var(--cp-white);
  --border-color:   var(--cp-ink);
  --text-primary:   var(--cp-ink);
  --text-secondary: var(--cp-ink2);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --shadow-sm: var(--cp-drop-sm);
  --shadow-md: var(--cp-drop);
  --shadow-lg: var(--cp-drop-hover);

  /* Variable accent colors (used by base style.css var-token classes) */
  --color-blue:     var(--cp-sky);
  --color-yellow:   var(--cp-butter);
  --color-orange:   var(--cp-peach);
  --color-pink:     var(--cp-bubblegum);
  --color-purple:   var(--cp-lilac);
  --color-cyan:     var(--cp-mint);
  --color-green:    var(--cp-mint);
  --color-red:      var(--cp-cherry);

  /* Type */
  --cp-font-display: 'Fredoka', 'Quicksand', system-ui, sans-serif;
  --cp-font-body:    'Nunito', 'Fredoka', system-ui, sans-serif;
  --cp-font-mono:    'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
}

/* ── Base canvas ──────────────────────────────────────────────────────── */
body.theme-cel-pastel,
body.theme-cel-pastel .page-wrapper {
  font-family: var(--cp-font-body) !important;
  color: var(--cp-ink);
  background:
    radial-gradient(var(--cp-ink3) 1px, transparent 1px) 0 0 / 18px 18px,
    var(--cp-paper) !important;
  background-attachment: fixed;
}
/* Subtle vignette so the dotted grid doesn't feel rigid */
body.theme-cel-pastel::before {
  content: '';
  position: fixed; inset: 0;
  background: radial-gradient(ellipse at center, transparent 55%, var(--cp-paper) 100%);
  pointer-events: none; z-index: 0;
}
body.theme-cel-pastel .page-wrapper { position: relative; z-index: 1; }

body.theme-cel-pastel ::selection { background: var(--cp-butter); color: var(--cp-ink); }

/* ── App bar ──────────────────────────────────────────────────────────── */
body.theme-cel-pastel .app-bar {
  background: var(--cp-paper) !important;
  border-bottom: var(--cp-stroke) solid var(--cp-ink) !important;
  box-shadow: 0 4px 0 0 var(--cp-ink);
  padding: 10px 24px;
}
body.theme-cel-pastel .app-bar-logo {
  font-family: var(--cp-font-display) !important;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 1px;
  color: var(--cp-ink) !important;
  text-shadow: 2px 2px 0 var(--cp-bubblegum);
}
body.theme-cel-pastel .app-bar-tpl-btn,
body.theme-cel-pastel .layout-btn {
  background: linear-gradient(var(--cp-butter) 0 50%, var(--cp-butterD) 50% 100%) !important;
  border: var(--cp-stroke) solid var(--cp-ink) !important;
  border-radius: 12px !important;
  box-shadow: var(--cp-drop), var(--cp-cel-inner) !important;
  font-family: var(--cp-font-display) !important;
  font-weight: 600 !important;
  color: var(--cp-ink) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  padding: 6px 12px !important;
  transition: transform 90ms cubic-bezier(.2,.7,.3,1), box-shadow 90ms;
}
body.theme-cel-pastel .layout-btn { padding: 6px 14px !important; }
body.theme-cel-pastel .app-bar-tpl-btn:hover,
body.theme-cel-pastel .layout-btn:hover {
  transform: translate(-1px, -2px);
  box-shadow: var(--cp-drop-hover), var(--cp-cel-inner) !important;
}
body.theme-cel-pastel .app-bar-tpl-btn:active,
body.theme-cel-pastel .layout-btn:active {
  transform: translate(4px, 5px);
  box-shadow: 0 0 0 0 transparent, var(--cp-cel-inner-pressed) !important;
}
body.theme-cel-pastel .layout-btn[data-layout="a"],
body.theme-cel-pastel .layout-btn.active[data-layout="a"] {
  background: linear-gradient(var(--cp-mint) 0 50%, var(--cp-mintD) 50% 100%) !important;
}
body.theme-cel-pastel .layout-btn[data-mode="composer"] {
  background: linear-gradient(var(--cp-lilac) 0 50%, var(--cp-lilacD) 50% 100%) !important;
}
body.theme-cel-pastel .layout-btn.active {
  outline: none;
  box-shadow:
    inset 0 0 0 var(--cp-stroke) var(--cp-ink),
    inset 0 4px 0 0 rgba(29,34,51,0.18),
    inset 0 -3px 0 0 rgba(255,255,255,0.30),
    var(--cp-drop-sm) !important;
  transform: translate(2px, 3px);
}
body.theme-cel-pastel .app-bar-tpl-name { color: var(--cp-ink); }
body.theme-cel-pastel .app-bar-tpl-change {
  font-family: var(--cp-font-mono);
  color: var(--cp-ink2);
  letter-spacing: 0.06em;
}

/* ── Theme picker chip ───────────────────────────────────────────────── */
.theme-picker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border: 2px solid #5a5040;
  border-radius: 6px;
  background: var(--hw-panel, #e4dccf);
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: #5a5040;
}
.theme-picker-btn {
  appearance: none;
  border: 1.5px solid transparent;
  background: transparent;
  font: inherit; color: inherit;
  padding: 3px 8px;
  border-radius: 4px;
  cursor: pointer;
  text-transform: uppercase;
}
.theme-picker-btn:hover { background: rgba(0,0,0,.06); }
.theme-picker-btn.active {
  background: #fff;
  border-color: #5a5040;
  color: #2e2418;
}
body.theme-cel-pastel .theme-picker {
  background: linear-gradient(var(--cp-peach) 0 50%, var(--cp-peachD) 50% 100%) !important;
  border: var(--cp-stroke) solid var(--cp-ink) !important;
  border-radius: 12px !important;
  box-shadow: var(--cp-drop), var(--cp-cel-inner) !important;
  color: var(--cp-ink) !important;
  font-family: var(--cp-font-mono) !important;
}
body.theme-cel-pastel .theme-picker-btn {
  border-color: transparent;
  font-family: var(--cp-font-display);
  font-weight: 600;
}
body.theme-cel-pastel .theme-picker-btn.active {
  background: var(--cp-white);
  border-color: var(--cp-ink);
  box-shadow: inset 0 -2px 0 0 rgba(29,34,51,0.20);
}

/* ── App header / titles ─────────────────────────────────────────────── */
body.theme-cel-pastel .synthograsizer-small { background: transparent; }
body.theme-cel-pastel .app-header { margin-bottom: 16px; }
body.theme-cel-pastel .app-title {
  font-family: var(--cp-font-display) !important;
  font-weight: 700;
  font-size: 32px;
  letter-spacing: -0.5px;
  color: var(--cp-ink);
  text-shadow: 3px 3px 0 var(--cp-bubblegum);
  text-transform: none;
}
body.theme-cel-pastel .app-tagline {
  font-family: var(--cp-font-body) !important;
  color: var(--cp-ink2);
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
}

/* ── Output card ─────────────────────────────────────────────────────── */
body.theme-cel-pastel .output-section {
  background: var(--cp-white);
  border: var(--cp-stroke) solid var(--cp-ink);
  border-radius: 18px;
  box-shadow: var(--cp-drop), var(--cp-cel-inner);
  padding: 18px 20px;
}
body.theme-cel-pastel .output-label {
  font-family: var(--cp-font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cp-ink2);
  font-weight: 700;
}
body.theme-cel-pastel .output-container {
  background: var(--cp-paper);
  border: var(--cp-stroke-thin) solid var(--cp-ink);
  border-radius: 12px;
  padding: 14px 16px;
  font-family: var(--cp-font-mono);
  color: var(--cp-ink);
  box-shadow: inset 0 2px 0 0 rgba(29,34,51,0.08);
}
body.theme-cel-pastel .output-container[contenteditable="true"] {
  background: var(--cp-white);
  box-shadow: 0 0 0 3px var(--cp-butter), 0 0 0 5px var(--cp-ink);
}
body.theme-cel-pastel .output-container:empty::before {
  color: var(--cp-ink3);
  font-style: normal;
}
body.theme-cel-pastel .output-container .variable-value {
  font-family: var(--cp-font-display);
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 999px;
  border: 1.5px solid var(--cp-ink);
  color: var(--cp-ink);
  box-shadow: 1px 1px 0 0 var(--cp-ink);
}
body.theme-cel-pastel .output-container .variable-value.var-blue   { background: var(--cp-sky); }
body.theme-cel-pastel .output-container .variable-value.var-yellow { background: var(--cp-butter); }
body.theme-cel-pastel .output-container .variable-value.var-orange { background: var(--cp-peach); }
body.theme-cel-pastel .output-container .variable-value.var-pink   { background: var(--cp-bubblegum); }
body.theme-cel-pastel .output-container .variable-value.var-purple { background: var(--cp-lilac); }
body.theme-cel-pastel .output-container .variable-value.var-cyan,
body.theme-cel-pastel .output-container .variable-value.var-green  { background: var(--cp-mint); }
body.theme-cel-pastel .output-container .variable-value.var-red    { background: var(--cp-cherry); color: var(--cp-white); }
body.theme-cel-pastel .output-container .variable-highlighted {
  outline: 2.5px solid var(--cp-ink);
  outline-offset: 1px;
}

/* Icon row above output */
body.theme-cel-pastel .icon-btn {
  background: linear-gradient(var(--cp-peach) 0 50%, var(--cp-peachD) 50% 100%);
  border: var(--cp-stroke-thin) solid var(--cp-ink);
  border-radius: 10px;
  box-shadow: var(--cp-drop-sm), var(--cp-cel-inner);
  color: var(--cp-ink);
  font-family: var(--cp-font-display);
  font-weight: 600;
  padding: 6px 10px;
  text-transform: none;
  letter-spacing: 0;
}
body.theme-cel-pastel .icon-btn:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 5px 0 0 var(--cp-ink), var(--cp-cel-inner);
}
body.theme-cel-pastel .icon-btn:active {
  transform: translate(3px, 4px);
  box-shadow: 0 0 0 0 transparent, var(--cp-cel-inner-pressed);
}
body.theme-cel-pastel .icon-btn.favorite-btn.favorited {
  background: linear-gradient(var(--cp-bubblegum) 0 50%, var(--cp-bubblegumD) 50% 100%);
}
body.theme-cel-pastel .icon-btn.copied {
  background: linear-gradient(var(--cp-mint) 0 50%, var(--cp-mintD) 50% 100%);
}
body.theme-cel-pastel .kbd-tip {
  background: var(--cp-white);
  border: 1.5px solid var(--cp-ink);
  border-radius: 6px;
  padding: 1px 5px;
  font-family: var(--cp-font-mono);
  color: var(--cp-ink);
  box-shadow: 1px 1px 0 0 var(--cp-ink);
}

/* ── Output history strip ────────────────────────────────────────────── */
body.theme-cel-pastel .output-history-strip {
  background: var(--cp-paper);
  border-top: 1.5px solid var(--cp-ink);
  border-radius: 0 0 14px 14px;
  padding: 8px 12px;
}
body.theme-cel-pastel .output-history-label {
  font-family: var(--cp-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--cp-ink2);
}
body.theme-cel-pastel .output-history-thumbs-btn,
body.theme-cel-pastel .output-history-clear-btn {
  background: var(--cp-white);
  border: 1.5px solid var(--cp-ink);
  border-radius: 6px;
  color: var(--cp-ink);
  font-family: var(--cp-font-mono);
}

/* ── Primary actions (Randomize / Generate / Run) ───────────────────── */
body.theme-cel-pastel .primary-actions-section { gap: 14px; }
body.theme-cel-pastel .primary-btn {
  background: linear-gradient(var(--cp-butter) 0 50%, var(--cp-butterD) 50% 100%);
  border: var(--cp-stroke) solid var(--cp-ink);
  border-radius: 14px;
  box-shadow: var(--cp-drop), var(--cp-cel-inner);
  font-family: var(--cp-font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.04em;
  color: var(--cp-ink);
  padding: 12px 22px;
  text-transform: uppercase;
  transition: transform 90ms cubic-bezier(.2,.7,.3,1), box-shadow 90ms;
}
body.theme-cel-pastel .primary-btn::before { display: none; }
body.theme-cel-pastel .primary-btn:hover {
  transform: translate(-1px, -2px);
  box-shadow: var(--cp-drop-hover), var(--cp-cel-inner);
}
body.theme-cel-pastel .primary-btn:active {
  transform: translate(4px, 5px);
  box-shadow: 0 0 0 0 transparent, var(--cp-cel-inner-pressed);
}
body.theme-cel-pastel .randomize-btn {
  background: linear-gradient(var(--cp-bubblegum) 0 50%, var(--cp-bubblegumD) 50% 100%);
}
body.theme-cel-pastel .generate-btn {
  background: linear-gradient(var(--cp-mint) 0 50%, var(--cp-mintD) 50% 100%);
}
body.theme-cel-pastel .p5-run-main-btn {
  background: linear-gradient(var(--cp-lilac) 0 50%, var(--cp-lilacD) 50% 100%);
}
body.theme-cel-pastel .p5-run-main-btn.running {
  background: linear-gradient(var(--cp-cherry) 0 50%, var(--cp-cherryD) 50% 100%);
  color: var(--cp-white);
}
body.theme-cel-pastel .keybind-badge {
  background: var(--cp-white);
  border: 1.5px solid var(--cp-ink);
  border-radius: 6px;
  padding: 1px 6px;
  font-family: var(--cp-font-mono);
  color: var(--cp-ink);
  box-shadow: 1px 1px 0 0 var(--cp-ink);
}

/* ── p5 live mount ───────────────────────────────────────────────────── */
body.theme-cel-pastel .p5-live-section {
  background: var(--cp-white);
  border: var(--cp-stroke) solid var(--cp-ink);
  border-radius: 18px;
  box-shadow: var(--cp-drop), var(--cp-cel-inner);
  padding: 14px;
}
body.theme-cel-pastel .p5-live-mount {
  background: var(--cp-ink);
  border: 1.5px solid var(--cp-ink);
  border-radius: 10px;
  box-shadow: inset 0 2px 0 0 rgba(255,255,255,0.06);
}
body.theme-cel-pastel .p5-capture-btn,
body.theme-cel-pastel .p5-display-btn,
body.theme-cel-pastel .p5-scope-btn {
  background: linear-gradient(var(--cp-peach) 0 50%, var(--cp-peachD) 50% 100%);
  border: 1.5px solid var(--cp-ink);
  border-radius: 8px;
  box-shadow: var(--cp-drop-sm), var(--cp-cel-inner);
  color: var(--cp-ink);
  font-family: var(--cp-font-display);
  font-weight: 600;
}
body.theme-cel-pastel .p5-scope-btn { background: linear-gradient(var(--cp-mint) 0 50%, var(--cp-mintD) 50% 100%); }
body.theme-cel-pastel .p5-display-btn { background: linear-gradient(var(--cp-lilac) 0 50%, var(--cp-lilacD) 50% 100%); }

/* ── Variable control: mode toggle + D-pad + knobs ──────────────────── */
body.theme-cel-pastel .variable-control-section {
  background: var(--cp-white);
  border: var(--cp-stroke) solid var(--cp-ink);
  border-radius: 18px;
  box-shadow: var(--cp-drop), var(--cp-cel-inner);
  padding: 18px;
}
body.theme-cel-pastel .control-mode-toggle {
  background: var(--cp-paper2);
  border: 2px solid var(--cp-ink);
  border-radius: 12px;
  padding: 3px;
  gap: 3px;
  box-shadow: var(--cp-drop-sm);
}
body.theme-cel-pastel .mode-toggle-btn {
  background: transparent;
  border: none;
  border-radius: 9px;
  color: var(--cp-ink);
  font-family: var(--cp-font-display);
  font-weight: 600;
}
body.theme-cel-pastel .mode-toggle-btn.active {
  background: linear-gradient(var(--cp-sky) 0 50%, var(--cp-skyD) 50% 100%);
  box-shadow:
    inset 0 0 0 1.8px var(--cp-ink),
    inset 0 2px 0 0 rgba(255,255,255,0.55),
    inset 0 -3px 0 0 rgba(29,34,51,0.18);
  color: var(--cp-ink);
}

/* D-pad container — borrow cel-shaded ink ring around the cross */
body.theme-cel-pastel .center-control {
  background: transparent;
  border: none;
  box-shadow: none;
}
body.theme-cel-pastel .control-box {
  background: transparent;
}
/* Cross arms: peach pastel with ink stroke + sticker drop */
body.theme-cel-pastel .nav-arrow,
body.theme-cel-pastel .control-arrow {
  background: linear-gradient(var(--cp-sky) 0 50%, var(--cp-skyD) 50% 100%) !important;
  border: var(--cp-stroke) solid var(--cp-ink) !important;
  border-radius: 10px !important;
  box-shadow: var(--cp-drop), var(--cp-cel-inner) !important;
  color: var(--cp-ink);
  transition: transform 90ms cubic-bezier(.2,.7,.3,1), box-shadow 90ms;
}
body.theme-cel-pastel .nav-arrow svg path,
body.theme-cel-pastel .control-arrow svg path { fill: var(--cp-ink); }
body.theme-cel-pastel .nav-arrow:hover,
body.theme-cel-pastel .control-arrow:hover {
  transform: translate(-1px,-2px);
  box-shadow: var(--cp-drop-hover), var(--cp-cel-inner) !important;
}
body.theme-cel-pastel .nav-arrow:active,
body.theme-cel-pastel .control-arrow:active,
body.theme-cel-pastel .nav-arrow.active,
body.theme-cel-pastel .control-arrow.active {
  transform: translate(4px,5px);
  box-shadow: 0 0 0 0 transparent, var(--cp-cel-inner-pressed) !important;
}

/* Center display readout — VarDisplay equivalent */
body.theme-cel-pastel .control-variable-name {
  background: var(--cp-white);
  border: var(--cp-stroke) solid var(--cp-ink);
  border-radius: 14px;
  box-shadow: var(--cp-drop),
              inset 0 2px 0 0 rgba(29,34,51,0.10),
              inset 0 -3px 0 0 rgba(255,255,255,0.6);
  padding: 10px 14px;
}
body.theme-cel-pastel .control-variable-name::before {
  content: attr(data-variable-name);
  display: block;
  font-family: var(--cp-font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--cp-ink);
  text-transform: lowercase;
  letter-spacing: 0;
  margin-bottom: 4px;
}
body.theme-cel-pastel .control-value {
  background: linear-gradient(var(--cp-butter) 0 50%, var(--cp-butterD) 50% 100%);
  border: 1.8px solid var(--cp-ink);
  border-radius: 8px;
  padding: 6px 10px;
  font-family: var(--cp-font-mono) !important;
  font-weight: 700;
  color: var(--cp-ink) !important;
  box-shadow: inset 0 2px 0 0 rgba(255,255,255,0.55), inset 0 -3px 0 0 rgba(29,34,51,0.18);
}
body.theme-cel-pastel .control-value-sublabel {
  font-family: var(--cp-font-mono);
  color: var(--cp-ink2);
}

/* Knobs */
body.theme-cel-pastel .knob-item {
  background: var(--cp-paper);
  border: 1.8px solid var(--cp-ink);
  border-radius: 14px;
  box-shadow: var(--cp-drop-sm), var(--cp-cel-inner);
  padding: 10px;
}
body.theme-cel-pastel .knob-item.active {
  background: linear-gradient(var(--cp-butter) 0 50%, var(--cp-butterD) 50% 100%);
}
body.theme-cel-pastel .knob-dial {
  background: linear-gradient(var(--cp-lilac) 0 50%, var(--cp-lilacD) 50% 100%);
  border: var(--cp-stroke) solid var(--cp-ink);
  box-shadow: var(--cp-drop-sm),
              inset 0 3px 0 0 rgba(255,255,255,0.55),
              inset 0 -4px 0 0 rgba(29,34,51,0.18);
}
body.theme-cel-pastel .knob-indicator { background: var(--cp-ink) !important; }
body.theme-cel-pastel .knob-ring { border-color: var(--cp-ink2); }
body.theme-cel-pastel .knob-item.active .knob-ring,
body.theme-cel-pastel .knob-item:hover .knob-ring { border-color: var(--cp-cherry); }
body.theme-cel-pastel .knob-value-label,
body.theme-cel-pastel .knob-var-name {
  font-family: var(--cp-font-mono);
  color: var(--cp-ink);
}
body.theme-cel-pastel .knob-item.active .knob-value-label { color: var(--cp-ink); font-weight: 700; }

/* Variable indicators */
body.theme-cel-pastel .variable-indicators .indicator-dot {
  background: var(--cp-paper3);
  border: 1.2px solid var(--cp-ink);
  box-shadow: 1px 1px 0 0 var(--cp-ink);
}
body.theme-cel-pastel .variable-indicators .indicator-dot.active {
  background: var(--cp-cherry);
  width: 18px;
}
body.theme-cel-pastel .variable-indicators .indicator-dot.completed {
  background: var(--cp-ink);
}

/* Keyboard hint */
body.theme-cel-pastel .keyboard-hint {
  font-family: var(--cp-font-mono);
  color: var(--cp-ink2);
}
body.theme-cel-pastel .keyboard-hint kbd {
  background: var(--cp-white);
  border: 1.5px solid var(--cp-ink);
  border-radius: 6px;
  padding: 1px 6px;
  font-family: var(--cp-font-mono);
  color: var(--cp-ink);
  box-shadow: 1px 1px 0 0 var(--cp-ink);
}

/* ── Connections (MIDI · Scope · Display · API) ─────────────────────── */
body.theme-cel-pastel .connections-group {
  background: var(--cp-paper);
  border: 2px solid var(--cp-ink);
  border-radius: 14px;
  padding: 10px;
  box-shadow: var(--cp-drop-sm), var(--cp-cel-inner);
}
body.theme-cel-pastel .connections-header {
  border-bottom: 1.5px dashed var(--cp-ink2);
  padding-bottom: 6px;
  margin-bottom: 8px;
}
body.theme-cel-pastel .connections-toggle-btn {
  font-family: var(--cp-font-display);
  font-weight: 700;
  color: var(--cp-ink);
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
}
body.theme-cel-pastel .connections-filter-btn {
  background: var(--cp-white);
  border: 1.5px solid var(--cp-ink);
  border-radius: 999px;
  color: var(--cp-ink);
  font-family: var(--cp-font-mono);
  padding: 2px 10px;
}
body.theme-cel-pastel .connections-filter-btn.active {
  background: linear-gradient(var(--cp-mint) 0 50%, var(--cp-mintD) 50% 100%);
}

/* MIDI bar / Scope bar / Display bar — all share .midi-bar / .osc-bar */
body.theme-cel-pastel .midi-bar,
body.theme-cel-pastel .osc-bar {
  background: transparent;
  border: none;
}
body.theme-cel-pastel .midi-toggle-btn,
body.theme-cel-pastel .osc-toggle-btn {
  background: linear-gradient(var(--cp-white) 0 50%, var(--cp-paper2) 50% 100%);
  border: var(--cp-stroke) solid var(--cp-ink);
  border-radius: 10px;
  box-shadow: var(--cp-drop-sm), var(--cp-cel-inner);
  color: var(--cp-ink);
  font-family: var(--cp-font-mono);
  font-weight: 700;
  padding: 6px 10px;
  letter-spacing: 0.05em;
}
body.theme-cel-pastel .midi-toggle-btn:hover,
body.theme-cel-pastel .osc-toggle-btn:hover {
  transform: translate(-1px,-1px);
  box-shadow: 4px 5px 0 0 var(--cp-ink), var(--cp-cel-inner);
}
body.theme-cel-pastel .midi-dot,
body.theme-cel-pastel .osc-dot {
  width: 10px; height: 10px; border-radius: 999px;
  background: var(--cp-paper3);
  border: 1.5px solid var(--cp-ink);
  box-shadow: 1px 1px 0 0 var(--cp-ink);
}
body.theme-cel-pastel .midi-dot.connected,
body.theme-cel-pastel .midi-dot.on,
body.theme-cel-pastel .osc-dot.connected,
body.theme-cel-pastel .osc-dot.on {
  background: var(--cp-mint);
  box-shadow: 0 0 6px var(--cp-mint), 1px 1px 0 0 var(--cp-ink);
}
body.theme-cel-pastel .midi-dot.error,
body.theme-cel-pastel .osc-dot.error {
  background: var(--cp-cherry);
}
body.theme-cel-pastel .midi-dot.streaming,
body.theme-cel-pastel .osc-dot.streaming {
  background: var(--cp-cherry);
  animation: cp-led-pulse 1.2s ease-in-out infinite;
}
@keyframes cp-led-pulse {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.35); }
}

/* MIDI panel + Scope panel */
body.theme-cel-pastel .midi-panel,
body.theme-cel-pastel .osc-panel {
  background: var(--cp-white);
  border: var(--cp-stroke) solid var(--cp-ink);
  border-radius: 14px;
  box-shadow: var(--cp-drop), var(--cp-cel-inner);
  padding: 12px;
  margin-top: 8px;
}
body.theme-cel-pastel .midi-panel-title,
body.theme-cel-pastel .osc-panel-title {
  font-family: var(--cp-font-display);
  font-weight: 700;
  color: var(--cp-ink);
}
body.theme-cel-pastel .midi-device-name { color: var(--cp-ink2); font-family: var(--cp-font-mono); }

body.theme-cel-pastel .midi-automap-btn,
body.theme-cel-pastel .osc-send-btn {
  background: linear-gradient(var(--cp-peach) 0 50%, var(--cp-peachD) 50% 100%);
  border: 1.8px solid var(--cp-ink);
  border-radius: 8px;
  box-shadow: var(--cp-drop-sm), var(--cp-cel-inner);
  color: var(--cp-ink);
  font-family: var(--cp-font-display);
  font-weight: 600;
  padding: 4px 10px;
}
body.theme-cel-pastel .midi-automap-btn:hover,
body.theme-cel-pastel .osc-send-btn:hover {
  transform: translate(-1px,-1px);
  box-shadow: 3px 4px 0 0 var(--cp-ink), var(--cp-cel-inner);
}
body.theme-cel-pastel .midi-automap-btn:active,
body.theme-cel-pastel .osc-send-btn:active {
  transform: translate(2px,3px);
  box-shadow: 0 0 0 0 transparent, var(--cp-cel-inner-pressed);
}
body.theme-cel-pastel .midi-automap-note {
  background: linear-gradient(var(--cp-mint) 0 50%, var(--cp-mintD) 50% 100%);
}

body.theme-cel-pastel .midi-learn-cancel-btn,
body.theme-cel-pastel .midi-clear-btn {
  background: linear-gradient(var(--cp-cherry) 0 50%, var(--cp-cherryD) 50% 100%);
  color: var(--cp-white);
  border: 1.8px solid var(--cp-ink);
  border-radius: 8px;
  box-shadow: var(--cp-drop-sm), var(--cp-cel-inner);
  font-family: var(--cp-font-display);
  font-weight: 700;
  padding: 4px 10px;
}

body.theme-cel-pastel .midi-learn-hint {
  background: var(--cp-butter);
  border: 1.5px solid var(--cp-ink);
  border-radius: 8px;
  padding: 6px 10px;
  font-family: var(--cp-font-mono);
  color: var(--cp-ink);
  animation: cp-led-pulse 1.2s ease-in-out infinite;
}

/* MIDI mapping grid cells */
body.theme-cel-pastel .midi-mappings-grid > * {
  background: var(--cp-white);
  border: 1.8px solid var(--cp-ink);
  border-radius: 10px;
  box-shadow: var(--cp-drop-sm), var(--cp-cel-inner);
  padding: 6px 10px;
  font-family: var(--cp-font-mono);
  color: var(--cp-ink);
}
body.theme-cel-pastel .midi-mappings-grid .cc-tag,
body.theme-cel-pastel .midi-mappings-grid .mapping-cc {
  background: linear-gradient(var(--cp-mint) 0 50%, var(--cp-mintD) 50% 100%);
  border: 1.5px solid var(--cp-ink);
  border-radius: 6px;
  padding: 1px 6px;
  font-weight: 700;
  color: var(--cp-ink);
  box-shadow: 1px 1px 0 0 var(--cp-ink);
}

body.theme-cel-pastel .osc-row { color: var(--cp-ink); font-family: var(--cp-font-mono); }
body.theme-cel-pastel .osc-input {
  background: var(--cp-white);
  border: 1.8px solid var(--cp-ink);
  border-radius: 8px;
  color: var(--cp-ink);
  font-family: var(--cp-font-mono);
  padding: 4px 8px;
  box-shadow: inset 0 2px 0 0 rgba(29,34,51,0.08);
}
body.theme-cel-pastel .osc-input:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--cp-butter), 0 0 0 5px var(--cp-ink), inset 0 2px 0 0 rgba(29,34,51,0.08);
}
body.theme-cel-pastel .scope-section {
  background: var(--cp-paper);
  border: 1.5px dashed var(--cp-ink2);
  border-radius: 10px;
  padding: 6px;
  margin-top: 6px;
}
body.theme-cel-pastel .scope-section-header {
  font-family: var(--cp-font-display);
  font-weight: 700;
  color: var(--cp-ink);
}

/* ── Action buttons (Batch / Liked / Templates) ─────────────────────── */
body.theme-cel-pastel .actions-section { gap: 12px; }
body.theme-cel-pastel .action-btn {
  background: linear-gradient(var(--cp-periwinkle) 0 50%, var(--cp-periwinkleD) 50% 100%);
  border: var(--cp-stroke) solid var(--cp-ink);
  border-radius: 12px;
  box-shadow: var(--cp-drop), var(--cp-cel-inner);
  color: var(--cp-ink);
  font-family: var(--cp-font-display);
  font-weight: 600;
  padding: 10px 16px;
  text-transform: none;
  letter-spacing: 0;
  transition: transform 90ms cubic-bezier(.2,.7,.3,1), box-shadow 90ms;
}
body.theme-cel-pastel .action-btn:hover {
  transform: translate(-1px,-2px);
  box-shadow: var(--cp-drop-hover), var(--cp-cel-inner);
}
body.theme-cel-pastel .action-btn:active {
  transform: translate(4px,5px);
  box-shadow: 0 0 0 0 transparent, var(--cp-cel-inner-pressed);
}
body.theme-cel-pastel .batch-btn      { background: linear-gradient(var(--cp-sky) 0 50%, var(--cp-skyD) 50% 100%); }
body.theme-cel-pastel .favorites-btn  { background: linear-gradient(var(--cp-bubblegum) 0 50%, var(--cp-bubblegumD) 50% 100%); }
body.theme-cel-pastel .perf-template-gen-btn { background: linear-gradient(var(--cp-mint) 0 50%, var(--cp-mintD) 50% 100%); }
body.theme-cel-pastel .template-btn   { background: linear-gradient(var(--cp-peach) 0 50%, var(--cp-peachD) 50% 100%); }
body.theme-cel-pastel .template-nav-btn {
  background: var(--cp-white);
  border: 1.8px solid var(--cp-ink);
  border-radius: 8px;
  box-shadow: var(--cp-drop-sm);
  color: var(--cp-ink);
}

/* Template dropdown menu */
body.theme-cel-pastel .template-dropdown-menu {
  background: var(--cp-white);
  border: var(--cp-stroke) solid var(--cp-ink);
  border-radius: 14px;
  box-shadow: var(--cp-drop), var(--cp-cel-inner);
  padding: 6px;
}
body.theme-cel-pastel .template-search-input {
  background: var(--cp-paper);
  border: 1.8px solid var(--cp-ink);
  border-radius: 8px;
  color: var(--cp-ink);
  font-family: var(--cp-font-body);
}
body.theme-cel-pastel .template-search-input:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--cp-butter), 0 0 0 5px var(--cp-ink);
}
body.theme-cel-pastel .template-section-label {
  font-family: var(--cp-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--cp-ink2);
  padding: 6px 8px 2px;
  font-size: 11px;
}
body.theme-cel-pastel .template-option {
  background: var(--cp-paper);
  border: 1.5px solid var(--cp-ink);
  border-radius: 8px;
  margin: 2px 0;
  padding: 6px 10px;
  color: var(--cp-ink);
  font-family: var(--cp-font-display);
  font-weight: 600;
  box-shadow: 1px 1px 0 0 var(--cp-ink);
}
body.theme-cel-pastel .template-option:hover {
  background: linear-gradient(var(--cp-butter) 0 50%, var(--cp-butterD) 50% 100%);
  transform: translate(-1px,-1px);
  box-shadow: 2px 2px 0 0 var(--cp-ink);
}

/* Error banner */
body.theme-cel-pastel .error-message {
  background: linear-gradient(var(--cp-cherry) 0 50%, var(--cp-cherryD) 50% 100%);
  border: var(--cp-stroke) solid var(--cp-ink);
  border-radius: 12px;
  box-shadow: var(--cp-drop), var(--cp-cel-inner);
  color: var(--cp-white);
  font-family: var(--cp-font-display);
  font-weight: 700;
  padding: 10px 14px;
}

/* Tag badges */
body.theme-cel-pastel .tag-badges-container { gap: 6px; margin-top: 8px; }
body.theme-cel-pastel .tag-badges-container > * {
  background: linear-gradient(var(--cp-lilac) 0 50%, var(--cp-lilacD) 50% 100%);
  border: 1.5px solid var(--cp-ink);
  border-radius: 999px;
  padding: 2px 10px;
  font-family: var(--cp-font-mono);
  color: var(--cp-ink);
  box-shadow: 1px 1px 0 0 var(--cp-ink);
}

/* Custom tooltip recolor (uses [data-tip] attribute selector) */
body.theme-cel-pastel [data-tip]::before {
  background: var(--cp-ink);
  color: var(--cp-paper);
  font-family: var(--cp-font-mono);
  border-radius: 6px;
  border: 1.5px solid var(--cp-ink);
  box-shadow: 2px 2px 0 0 var(--cp-ink);
}
body.theme-cel-pastel [data-tip]::after {
  border-top-color: var(--cp-ink);
}

/* Scrollbars (webkit) */
body.theme-cel-pastel ::-webkit-scrollbar {
  width: 12px; height: 12px;
}
body.theme-cel-pastel ::-webkit-scrollbar-track {
  background: var(--cp-paper);
  border: 1.5px solid var(--cp-ink);
}
body.theme-cel-pastel ::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--cp-lilac) 0 50%, var(--cp-lilacD) 50% 100%);
  border: 1.5px solid var(--cp-ink);
  border-radius: 999px;
}

/* ───────────────────────────────────────────────────────────────────────
   MOBILE — responsive treatment (applies regardless of theme; the
   cel-pastel theme tunes the visuals via the rules above).
   Target ≥44px hit targets; promote connections to a bottom drawer;
   sticky action bar; full-bleed output.
   ─────────────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  body { overflow-x: hidden; }
  .page-wrapper { padding: 0 !important; }
  .synthograsizer-small {
    padding: 12px 12px 96px !important; /* leave room for sticky bottom bar */
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
  }

  /* App bar collapses; modes wrap to a 2nd row */
  .app-bar {
    flex-wrap: wrap;
    padding: 8px 12px !important;
    gap: 8px !important;
  }
  .app-bar-brand { width: 100%; justify-content: space-between; }
  .app-bar-modes { width: 100%; flex-wrap: wrap; gap: 6px !important; }
  .app-bar-modes a[href*="changelog"],
  .app-bar-modes a[href*="taste-profile"] { display: none; }
  .layout-btn, .app-bar-tpl-btn { min-height: 44px; font-size: 13px !important; }

  /* App header tightens */
  .app-header { margin-bottom: 8px !important; padding: 0 4px !important; }
  .app-title { font-size: 24px !important; }
  .app-tagline { display: none; }

  /* Output card */
  .output-section { padding: 12px !important; }
  .output-controls { flex-wrap: wrap; gap: 6px !important; }
  .icon-btn { min-height: 40px; padding: 6px 10px !important; }
  .output-container { font-size: 14px !important; }

  /* Primary action row — pin to bottom as sticky strip */
  .primary-actions-section {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: var(--bg-main, #f5f5f5);
    border-top: 2px solid var(--border-color, #1d2233);
    padding: 8px 10px env(safe-area-inset-bottom, 10px);
    gap: 8px;
    z-index: 40;
    box-shadow: 0 -4px 0 0 rgba(0,0,0,0.08);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: stretch;
  }
  .primary-actions-section .primary-btn {
    flex: 1; min-height: 48px;
    font-size: 14px !important;
    padding: 10px 8px !important;
  }
  .primary-actions-section .keybind-badge { display: none; }

  /* Variable control: stack groups vertically; bigger D-pad */
  .variable-control-section {
    flex-direction: column !important;
    gap: 12px !important;
    padding: 12px !important;
  }
  .dpad-group, .connections-group {
    width: 100% !important;
    box-sizing: border-box;
  }
  .control-mode-toggle .mode-toggle-btn { min-height: 44px; padding: 0 16px; }

  /* D-pad bigger on mobile */
  .center-control { width: 280px !important; height: 280px !important; margin: 0 auto; }
  .control-box { width: 100% !important; height: 100% !important; }
  .nav-arrow, .control-arrow { min-width: 56px !important; min-height: 56px !important; }
  .nav-arrow svg, .control-arrow svg { width: 32px !important; height: 32px !important; }
  .control-variable-name { font-size: 14px !important; }
  .control-value { font-size: 18px !important; }

  /* Knobs scroll horizontally rather than wrap */
  .knobs-container {
    overflow-x: auto; overflow-y: hidden;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
  }
  .knob-item { flex: 0 0 auto; }
  /* Scale the wrapper (NOT the dial). The dial uses `inset: 6px` inside
     the wrapper, the ring uses `inset: 0`. Resizing the wrapper scales
     both correctly. The indicator rotates around `center calc(50%+20px)`
     which assumes the original 56px dial — bump the pivot to match. */
  .knob-dial-wrapper { width: 84px !important; height: 84px !important; }
  .knob-indicator { transform-origin: center calc(50% + 26px) !important; }

  /* Connections become a collapsible drawer pinned by its header */
  .connections-group { padding: 8px !important; }
  .connections-header { position: sticky; top: 0; z-index: 5; }
  .midi-toggle-btn, .osc-toggle-btn { min-height: 44px; }
  .midi-panel, .osc-panel { padding: 10px !important; }
  .midi-mappings-grid { grid-template-columns: 1fr !important; gap: 6px !important; }

  /* Actions row scrolls horizontally instead of stacking awkwardly */
  .actions-section {
    overflow-x: auto;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
  .actions-section .action-btn,
  .actions-section .template-controls { flex: 0 0 auto; min-height: 44px; }

  /* p5 mount stays full width */
  .p5-live-section { padding: 8px !important; }
  .p5-capture-btn, .p5-display-btn, .p5-scope-btn { min-height: 40px; padding: 6px 8px !important; }

  /* Hide development-only chrome on mobile */
  #beat-navigator { padding: 6px 10px; }
}

/* Phone-only refinements when cel-pastel is on */
@media (max-width: 720px) {
  body.theme-cel-pastel .primary-actions-section {
    background: var(--cp-paper);
    border-top: var(--cp-stroke) solid var(--cp-ink);
    box-shadow: 0 -4px 0 0 var(--cp-ink);
  }
  body.theme-cel-pastel .center-control {
    /* Add subtle "pad base" feel — paper2 cel-shaded plate behind cross */
    background: linear-gradient(var(--cp-paper2) 0 50%, var(--cp-paper3) 50% 100%) !important;
    border: var(--cp-stroke) solid var(--cp-ink) !important;
    border-radius: 999px !important;
    box-shadow: var(--cp-drop), var(--cp-cel-inner) !important;
    padding: 16px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   POST-REVIEW FIXES (Tier 1 + Tier 2)
   Notes:
   - Tier 1.1: Center display was truncating values. Fredoka is wider than
     Quantico; the original .control-value uses white-space:nowrap and
     clamp() font-size. We relax wrap, lift padding, and allow 2-line wrap.
   - Tier 1.2: Mobile app-bar had template button + theme picker pushing
     off-screen. We hide "CHANGE ▾", collapse "THEME" label, and force
     min-width:0 on the brand row.
   - Tier 1.3: Theme picker chip wraps the layout-switcher row at <1100px;
     give it flex-shrink controls so it stays visible without pushing
     mode buttons off.
   - Tier 2.4: AI Studio Tools cards inherit the global pastel palette so
     they compete with the Randomize/Generate/Run row visually. We demote
     them — cream paper bg, ink-outlined icon tile, no per-card hue —
     reserving saturated pastel for INTERACTIVE primary actions.
   - Tier 2.5: Variable indicator dots gain 1px ink shadow each, which
     reads as noise across a 12+ var strip. Drop the shadow on inactive
     dots; keep ink stroke + shadow only on the active red one.
   - Tier 2.6: Output container line-height was too tight for ink-stroked
     pill tokens — adjacent strokes touched across wrapped lines.
   - Tier 3.7: D-pad arrows had no press flash — bad for live perform
     visibility. Add a 220ms white overlay via ::after on :active.
   - Tier 3.10: Focus rings were inconsistent — only on text inputs.
     Spec ring (3px butter + 5px ink) on every interactive surface.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Tier 1.1: Variable display readability ─────────────────────────── */
/* The center readout is the most important text on the screen. Make it
   wrappable, give it room, drop the gradient-pill background so the
   value text sits on plain white — readability over decoration. */
body.theme-cel-pastel .control-variable-name {
  /* Let inner column shrink to fit */
  min-width: 0;
  overflow-wrap: anywhere;
}
body.theme-cel-pastel .control-value-row {
  padding: 8px 12px 4px;
}
body.theme-cel-pastel .control-value {
  /* Override the base nowrap so long values can wrap to 2 lines */
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  /* Drop the buttery pill — too much chrome for the value text. Use
     a flat butter underline strip instead (border-bottom). */
  background: transparent !important;
  border: none !important;
  border-bottom: 2.5px solid var(--cp-butter) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 4px 8px 6px !important;
  line-height: 1.2 !important;
  font-size: clamp(15px, 3.6cqw, 28px) !important;
}
body.theme-cel-pastel .control-value-sublabel {
  white-space: normal;
  font-family: var(--cp-font-mono);
  color: var(--cp-ink2);
  opacity: 0.85;
  margin-top: 2px;
}

/* The original ::before paints a white header strip per variable color;
   for cel-pastel we want that strip in the cel palette (cream paper +
   ink underline + Fredoka). Our earlier rule re-defined this via
   `display: block` content; tighten the strip so it doesn't dominate. */
body.theme-cel-pastel .control-variable-name::before {
  background: var(--cp-paper) !important;
  color: var(--cp-ink) !important;
  font-family: var(--cp-font-display) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 8px 12px !important;
  border-bottom: 2px solid var(--cp-ink) !important;
  border-radius: 11px 11px 0 0;
}

/* ── Tier 1.2: Mobile app-bar overflow ──────────────────────────────── */
@media (max-width: 720px) {
  .app-bar { min-width: 0; }
  .app-bar-brand {
    min-width: 0;
    gap: 8px !important;
  }
  /* Hide the "CHANGE ▾" affordance — the whole button is tappable */
  .app-bar-tpl-change { display: none !important; }
  .app-bar-tpl-name {
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .app-bar-tpl-btn {
    flex-shrink: 1;
    min-width: 0;
  }
  /* Collapse "THEME" label to save horizontal space */
  .theme-picker > span:first-child { display: none; }
  .theme-picker { padding: 4px 5px; gap: 4px; }
  .theme-picker-btn { padding: 4px 8px; font-size: 11px; }
}

/* ── Tier 1.3: Theme picker survives mid-width without wrapping ─────── */
.theme-picker { flex-shrink: 0; }
@media (max-width: 1100px) and (min-width: 721px) {
  /* At tablet widths the picker can collapse to icons-only */
  .theme-picker > span:first-child { display: none; }
  .theme-picker { padding: 4px 5px; }
}

/* ── Tier 2.4: Demote AI Studio Tools (kill the hue collision) ──────── */
/* Move the tools tray to neutral cream-paper cards. Each card keeps an
   ink-outlined icon tile (so it still reads as cel-pastel), but the body
   loses its color hue — leaving saturated pastel only on primary actions
   and the D-pad arms. Hover lifts a sticker shadow as usual. */
body.theme-cel-pastel .studio-controls-section {
  background: var(--cp-paper);
  border: 2px solid var(--cp-ink);
  border-radius: 14px;
  box-shadow: var(--cp-drop-sm), var(--cp-cel-inner);
  padding: 12px;
  margin-top: 12px;
}
body.theme-cel-pastel .studio-controls-header {
  font-family: var(--cp-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--cp-ink2);
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 8px;
}
body.theme-cel-pastel .studio-btn-large {
  /* Reset any per-card pastel that the base theme applied */
  background: var(--cp-white) !important;
  border: 2px solid var(--cp-ink) !important;
  border-radius: 12px !important;
  box-shadow: 2px 3px 0 0 var(--cp-ink), inset 0 2px 0 0 rgba(255,255,255,0.55) !important;
  color: var(--cp-ink) !important;
  font-family: var(--cp-font-display) !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  padding: 12px 10px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  transition: transform 90ms cubic-bezier(.2,.7,.3,1), box-shadow 90ms;
}
body.theme-cel-pastel .studio-btn-large:hover {
  transform: translate(-1px, -2px);
  box-shadow: 3px 5px 0 0 var(--cp-ink), inset 0 2px 0 0 rgba(255,255,255,0.55) !important;
}
body.theme-cel-pastel .studio-btn-large:active {
  transform: translate(2px, 3px);
  box-shadow: 0 0 0 0 transparent, inset 0 2px 0 0 rgba(29,34,51,0.18) !important;
}
/* Icon tile: small inset square with a single pastel hue that varies
   PER CATEGORY only (image / video / text / data / flow), not per
   button — so the eye reads a category stripe instead of a button rainbow. */
body.theme-cel-pastel .studio-btn-large .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  font-size: 22px;
  background: linear-gradient(var(--cp-peach) 0 50%, var(--cp-peachD) 50% 100%);
  border: 2px solid var(--cp-ink);
  border-radius: 10px;
  box-shadow: 1px 1px 0 0 var(--cp-ink), inset 0 2px 0 0 rgba(255,255,255,0.55);
}
/* Category hues */
body.theme-cel-pastel .btn-image-large .icon,
body.theme-cel-pastel .btn-analysis-large .icon,
body.theme-cel-pastel .btn-video-large .icon {
  background: linear-gradient(var(--cp-bubblegum) 0 50%, var(--cp-bubblegumD) 50% 100%);
}
body.theme-cel-pastel .btn-transform-large .icon,
body.theme-cel-pastel .btn-chat-large .icon,
body.theme-cel-pastel .btn-template-large .icon {
  background: linear-gradient(var(--cp-sky) 0 50%, var(--cp-skyD) 50% 100%);
}
body.theme-cel-pastel .btn-metadata-large .icon,
body.theme-cel-pastel .btn-trace-large .icon {
  background: linear-gradient(var(--cp-butter) 0 50%, var(--cp-butterD) 50% 100%);
}
body.theme-cel-pastel .btn-music-large .icon,
body.theme-cel-pastel .btn-workflow-large .icon,
body.theme-cel-pastel .btn-agent-large .icon,
body.theme-cel-pastel .btn-glitcher-large .icon {
  background: linear-gradient(var(--cp-mint) 0 50%, var(--cp-mintD) 50% 100%);
}
body.theme-cel-pastel .studio-btn-large .label {
  font-size: 12px;
  text-align: center;
  line-height: 1.2;
}

/* ── Tier 2.5: Quiet variable indicator dots ────────────────────────── */
/* Override the earlier rule. Inactive dots: 1px ink stroke only, no
   sticker shadow. Active dot keeps its sticker shadow. */
body.theme-cel-pastel .variable-indicators .indicator-dot {
  background: var(--cp-paper3);
  border: 1.2px solid var(--cp-ink);
  box-shadow: none;
  width: 8px; height: 8px;
}
body.theme-cel-pastel .variable-indicators .indicator-dot.active {
  background: var(--cp-cherry);
  width: 18px;
  box-shadow: 1px 1px 0 0 var(--cp-ink);
}
body.theme-cel-pastel .variable-indicators .indicator-dot.completed {
  background: var(--cp-ink);
  box-shadow: none;
}

/* ── Tier 2.6: Output line-height so chips don't touch ─────────────── */
body.theme-cel-pastel .output-container {
  line-height: 1.9;
}
body.theme-cel-pastel .output-container .variable-value,
body.theme-cel-pastel .output-container .var-token {
  /* Tighten chip vertical padding so the raised line-height doesn't
     make individual chips look hollow. */
  padding: 1px 9px;
  display: inline-block;
  vertical-align: baseline;
}

/* ── Tier 3.7: D-pad press flash ─────────────────────────────────────── */
/* 220ms white overlay on press — matches the design's dpad-flash spec.
   Implemented via ::after pseudo-element layered above the arrow body. */
body.theme-cel-pastel .nav-arrow,
body.theme-cel-pastel .control-arrow {
  position: relative;
  overflow: hidden;
}
body.theme-cel-pastel .nav-arrow::after,
body.theme-cel-pastel .control-arrow::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.55);
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
}
body.theme-cel-pastel .nav-arrow:active::after,
body.theme-cel-pastel .control-arrow:active::after {
  animation: cp-dpad-flash 220ms ease-out;
}
@keyframes cp-dpad-flash {
  0%   { opacity: 0.85; }
  100% { opacity: 0;    }
}

/* ── Tier 3.10: Consistent focus rings ──────────────────────────────── */
/* Spec: 3px butter + 5px ink. Applied to every interactive surface so
   keyboard nav works. Keep :focus-visible to avoid showing rings on
   mouse-clicks (which already have hover + active feedback). */
body.theme-cel-pastel .primary-btn:focus-visible,
body.theme-cel-pastel .action-btn:focus-visible,
body.theme-cel-pastel .icon-btn:focus-visible,
body.theme-cel-pastel .layout-btn:focus-visible,
body.theme-cel-pastel .app-bar-tpl-btn:focus-visible,
body.theme-cel-pastel .theme-picker-btn:focus-visible,
body.theme-cel-pastel .mode-toggle-btn:focus-visible,
body.theme-cel-pastel .nav-arrow:focus-visible,
body.theme-cel-pastel .control-arrow:focus-visible,
body.theme-cel-pastel .midi-toggle-btn:focus-visible,
body.theme-cel-pastel .osc-toggle-btn:focus-visible,
body.theme-cel-pastel .midi-automap-btn:focus-visible,
body.theme-cel-pastel .osc-send-btn:focus-visible,
body.theme-cel-pastel .studio-btn-large:focus-visible,
body.theme-cel-pastel .template-option:focus-visible,
body.theme-cel-pastel .connections-toggle-btn:focus-visible,
body.theme-cel-pastel .connections-filter-btn:focus-visible {
  outline: none;
  /* The 3px butter + 5px ink ring composes with the existing sticker
     shadow via comma-separated box-shadows. We pin the focus ring at
     the start so it draws over the underlying drop. */
  box-shadow:
    0 0 0 3px var(--cp-butter),
    0 0 0 5px var(--cp-ink),
    var(--cp-drop),
    var(--cp-cel-inner) !important;
  z-index: 2;
}
/* Some buttons (D-pad arms, icon-btn) sit close together; lift z-index
   so the ring isn't clipped by neighbors. */
body.theme-cel-pastel .nav-arrow:focus-visible,
body.theme-cel-pastel .control-arrow:focus-visible {
  z-index: 3;
}

/* ═══════════════════════════════════════════════════════════════════════
   REFINEMENT PASS — round 2.
   Targets: visual cohesion + density of the right column + hierarchy
   for the highlighted variable.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 16: Wordmark family cohesion ───────────────────────────────────── */
/* Bungee was carried over from the hardware theme. In cel-pastel we want
   one display family, so switch to Fredoka 700 with a sticker-shadow. */
body.theme-cel-pastel .app-bar-logo {
  font-family: var(--cp-font-display) !important;
  font-weight: 700 !important;
  font-size: 24px !important;
  letter-spacing: 1px !important;
  /* Two-tone offset shadow: bubblegum sticker + ink hard-edge. Keeps
     the "stamped on" feel while staying in the palette. */
  text-shadow:
    2px 2px 0 var(--cp-bubblegum),
    3px 3px 0 var(--cp-ink) !important;
  color: var(--cp-ink) !important;
}

/* ── 17: Status strip — group indicator dots + keyboard hint ────────── */
/* Both .variable-indicators and .keyboard-hint are siblings inside
   .dpad-group with no shared wrapper. Style them as a stacked module:
   a sticker-bordered top half (the dots) and a flat bottom half (the
   hint) that visually attach via shared horizontal extents + ink rule. */
body.theme-cel-pastel .dpad-group .variable-indicators {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
  background: var(--cp-paper);
  border: 2px solid var(--cp-ink);
  border-radius: 12px 12px 0 0;
  border-bottom: none;
  padding: 10px 14px 8px;
  margin: 12px auto 0;
  /* The two siblings need to share a width — set both to fit-content
     so the strip looks like one unit. */
  width: fit-content;
  min-width: 220px;
  max-width: 100%;
  box-sizing: border-box;
  box-shadow: 3px 0 0 0 var(--cp-ink);
}
body.theme-cel-pastel .dpad-group .keyboard-hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--cp-white);
  border: 2px solid var(--cp-ink);
  border-radius: 0 0 12px 12px;
  border-top: 1.5px dashed var(--cp-ink2);
  padding: 6px 14px 8px;
  margin: 0 auto;
  width: fit-content;
  min-width: 220px;
  max-width: 100%;
  box-sizing: border-box;
  box-shadow: 3px 4px 0 0 var(--cp-ink);
  font-size: 11px;
  letter-spacing: 0.04em;
}

/* ── 18: Highlighted variable token — butter halo ────────────────────── */
/* .variable-highlighted is set on whichever token corresponds to the
   currently-focused variable. Its previous treatment (outline + offset)
   was easy to miss. Promote to a butter halo + slight scale so the user
   can spot it from across a paragraph. */
body.theme-cel-pastel .output-container .variable-highlighted {
  outline: none;
  position: relative;
  z-index: 1;
  box-shadow:
    0 0 0 3px var(--cp-butter),
    0 0 0 4.5px var(--cp-ink),
    2px 2px 0 0 var(--cp-ink);
  transform: translate(-1px, -1px);
  transition: transform 90ms cubic-bezier(.2,.7,.3,1), box-shadow 90ms;
}

/* ── 19: AI Studio Tools card lift ──────────────────────────────────── */
/* Cards were too flush with the cream tray — looked like flat squares.
   Bump sticker shadow + crisper outline so each card reads as a tile. */
body.theme-cel-pastel .studio-controls-section {
  /* Slightly darker tray so the white cards stand out */
  background: var(--cp-paper2);
}
body.theme-cel-pastel .studio-btn-large {
  box-shadow:
    3px 4px 0 0 var(--cp-ink),
    inset 0 2px 0 0 rgba(255,255,255,0.55),
    inset 0 -3px 0 0 rgba(29,34,51,0.10) !important;
}
body.theme-cel-pastel .studio-btn-large:hover {
  box-shadow:
    4px 6px 0 0 var(--cp-ink),
    inset 0 2px 0 0 rgba(255,255,255,0.55),
    inset 0 -3px 0 0 rgba(29,34,51,0.10) !important;
}
/* Slightly bigger icon tile for better proportion */
body.theme-cel-pastel .studio-btn-large .icon {
  width: 44px;
  height: 44px;
  font-size: 24px;
}

/* ── 20: Connections as 2x2 pill grid ────────────────────────────────── */
/* The 4 bars (MIDI/Scope/Display/API) currently stack as a 1-column
   list, looking lifeless. Float them as a 2x2 grid of equal-height
   sticker pills so they register as a real patch bay.
   Hidden panels (display:none) drop out of layout; when shown, they
   break the flow and span full-width below the bars. */
body.theme-cel-pastel .connections-group {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
}
body.theme-cel-pastel .connections-group .connections-header {
  order: 0;
  flex: 1 1 100%;
}
/* Hidden bridge inputs shouldn't take a flex cell. */
body.theme-cel-pastel .connections-group > input[type="hidden"] { display: none; }
body.theme-cel-pastel .connections-group .midi-bar,
body.theme-cel-pastel .connections-group .osc-bar {
  flex: 1 1 calc(50% - 4px);
  min-width: 0;
  margin: 0;
}
/* Inner button stretches to fill the cell so all 4 read as equal */
body.theme-cel-pastel .connections-group .midi-bar .midi-toggle-btn,
body.theme-cel-pastel .connections-group .osc-bar .osc-toggle-btn {
  width: 100%;
  justify-content: flex-start;
  padding: 10px 12px;
  font-size: 12px;
}
/* The disp-bar has the BG color picker tacked on; let it span the row
   so the color swatch has room. */
body.theme-cel-pastel .connections-group #disp-bar {
  flex: 1 1 100%;
  display: flex;
  align-items: center;
  gap: 8px;
}
body.theme-cel-pastel .connections-group #disp-bar .disp-toggle-btn,
body.theme-cel-pastel .connections-group #disp-bar #disp-toggle-btn { flex: 1; }
body.theme-cel-pastel .connections-group .disp-bg-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--cp-white);
  border: 1.8px solid var(--cp-ink);
  border-radius: 8px;
  padding: 4px 8px;
  font-family: var(--cp-font-mono);
  font-size: 11px;
}
/* Panels span the full width when revealed; they sit naturally between
   bars in source order so the flex wrap keeps them in place. */
body.theme-cel-pastel .connections-group .midi-panel,
body.theme-cel-pastel .connections-group .osc-panel {
  flex: 1 1 100%;
}

/* ── 21: Liked Prompts text contrast ────────────────────────────────── */
/* .favorites-btn background is bubblegum; the base CSS set the label
   white, which fails on light pastel. Force ink. */
body.theme-cel-pastel .favorites-btn,
body.theme-cel-pastel .favorites-btn .label,
body.theme-cel-pastel .favorites-btn svg {
  color: var(--cp-ink) !important;
  fill: var(--cp-ink) !important;
}
/* Same audit for any other action-btn whose base styles might pin white text */
body.theme-cel-pastel .action-btn .label { color: var(--cp-ink); }
body.theme-cel-pastel .primary-btn .label { color: var(--cp-ink); }
body.theme-cel-pastel .p5-run-main-btn .label,
body.theme-cel-pastel .p5-run-main-btn.running .label { color: inherit; }

/* ═══════════════════════════════════════════════════════════════════════
   ROUND 3 — annotated fixes
   - 23: App-bar groups weren't readable as distinct controls (MODE vs
     LINKS vs THEME). Added inline section labels + divider chips.
   - 24: Knob wrapper bug (mobile dial overflowed its ring) fixed above
     by scaling .knob-dial-wrapper instead of .knob-dial.
   ═══════════════════════════════════════════════════════════════════════ */

/* Section labels + dividers in the app-bar.
   Style them theme-agnostic so the hardware theme also gets the grouping. */
.app-bar-section-label {
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hw-text-label, #6b7088);
  opacity: 0.7;
  align-self: center;
  padding: 0 4px;
  white-space: nowrap;
}
.app-bar-section-divider {
  display: inline-block;
  width: 2px;
  height: 22px;
  background: currentColor;
  opacity: 0.18;
  margin: 0 2px;
  align-self: center;
  border-radius: 1px;
}
/* On mobile, dividers become full-row horizontal rules to delimit
   the chip groups when they wrap onto multiple rows. */
@media (max-width: 720px) {
  .app-bar-section-divider {
    width: 100%;
    height: 1px;
    margin: 4px 0;
    opacity: 0.20;
  }
  .app-bar-section-label {
    width: 100%;
    text-align: left;
    padding: 2px 4px 0;
  }
  /* Re-show the "THEME" caption inside the picker so users see two
     labeled groups (MODE / THEME) — previously hidden to save space,
     but the savings cost clarity. The picker buttons stay compact. */
  .theme-picker > span:first-child { display: inline !important; }
}

/* Cel-pastel theme: render section labels in the design family */
body.theme-cel-pastel .app-bar-section-label {
  font-family: var(--cp-font-mono);
  color: var(--cp-ink2);
  opacity: 1;
  font-weight: 700;
}
body.theme-cel-pastel .app-bar-section-divider {
  background: var(--cp-ink);
  opacity: 0.35;
}

/* ── Composer mobile fallback notice ─────────────────────────────────────
   Shown when viewport < 1024px. Hardware theme uses dark brown; pastel
   needs paper + ink + sticker shadow to match the rest of the surface. */
body.theme-cel-pastel .composer-mobile-notice {
  background: var(--cp-white);
  border: var(--cp-stroke) solid var(--cp-ink);
  box-shadow:
    4px 5px 0 0 var(--cp-ink),
    inset 0 2px 0 0 rgba(255,255,255,0.55),
    inset 0 -3px 0 0 rgba(29,34,51,0.12);
  color: var(--cp-ink);
  font-family: 'Nunito', system-ui, sans-serif;
  border-radius: 16px;
}
body.theme-cel-pastel .composer-mobile-notice h3 {
  font-family: 'Fredoka', 'Quicksand', system-ui, sans-serif;
  color: var(--cp-ink);
  letter-spacing: 0;
}
body.theme-cel-pastel .composer-mobile-notice p {
  color: var(--cp-ink2);
  font-size: 14px;
}
body.theme-cel-pastel .composer-mobile-notice strong { color: var(--cp-ink); }
body.theme-cel-pastel .composer-mobile-notice button {
  background: linear-gradient(var(--cp-sky) 0 50%, var(--cp-skyD) 50% 100%);
  color: var(--cp-ink);
  border: var(--cp-stroke) solid var(--cp-ink);
  border-radius: 12px;
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0;
  padding: 8px 18px;
  box-shadow:
    3px 4px 0 0 var(--cp-ink),
    inset 0 2px 0 0 rgba(255,255,255,0.55),
    inset 0 -3px 0 0 rgba(29,34,51,0.18);
  transition: transform 90ms cubic-bezier(.2,.7,.3,1), box-shadow 90ms;
}
body.theme-cel-pastel .composer-mobile-notice button:hover {
  background: linear-gradient(var(--cp-sky) 0 50%, var(--cp-skyD) 50% 100%);
  transform: translate(-1px, -2px);
  box-shadow:
    4px 6px 0 0 var(--cp-ink),
    inset 0 2px 0 0 rgba(255,255,255,0.55),
    inset 0 -3px 0 0 rgba(29,34,51,0.18);
}

/* ── Active Taste Profile pill ─────────────────────────────────────────── */
body.theme-cel-pastel .active-profile-pill-btn {
  background: linear-gradient(var(--cp-lilac) 0 50%, var(--cp-lilacD) 50% 100%);
  border: var(--cp-stroke) solid var(--cp-ink);
  color: var(--cp-ink);
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 600;
  border-radius: 99px;
  box-shadow:
    3px 4px 0 0 var(--cp-ink),
    inset 0 2px 0 0 rgba(255,255,255,0.55),
    inset 0 -3px 0 0 rgba(29,34,51,0.18);
}
body.theme-cel-pastel .active-profile-pill-btn:hover {
  background: linear-gradient(var(--cp-lilac) 0 50%, var(--cp-lilacD) 50% 100%);
  transform: translate(-1px, -2px);
  box-shadow:
    4px 5px 0 0 var(--cp-ink),
    inset 0 2px 0 0 rgba(255,255,255,0.55),
    inset 0 -3px 0 0 rgba(29,34,51,0.18);
}
body.theme-cel-pastel .active-profile-pill-btn[aria-expanded="true"] {
  transform: translate(2px, 3px);
  box-shadow: 0 0 0 0 transparent;
}
body.theme-cel-pastel .active-profile-pill-dot {
  background: var(--cp-cherry);
  box-shadow: 0 0 0 1.5px var(--cp-ink);
}
body.theme-cel-pastel .active-profile-pill-name {
  color: var(--cp-ink);
}
body.theme-cel-pastel .active-profile-pill-caret {
  color: var(--cp-ink2);
}
body.theme-cel-pastel .active-profile-pill-menu {
  background: var(--cp-white);
  border: var(--cp-stroke) solid var(--cp-ink);
  border-radius: 14px;
  box-shadow:
    4px 5px 0 0 var(--cp-ink),
    inset 0 2px 0 0 rgba(255,255,255,0.55),
    inset 0 -3px 0 0 rgba(29,34,51,0.12);
  font-family: 'Nunito', system-ui, sans-serif;
}
body.theme-cel-pastel .active-profile-pill-menu .apm-section-label {
  color: var(--cp-ink2);
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
}
body.theme-cel-pastel .active-profile-pill-menu .apm-item {
  color: var(--cp-ink);
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 600;
  border-radius: 8px;
}
body.theme-cel-pastel .active-profile-pill-menu .apm-item:hover {
  background: var(--cp-paper2);
}
body.theme-cel-pastel .active-profile-pill-menu .apm-item.active::before {
  color: var(--cp-cherry);
}
body.theme-cel-pastel .active-profile-pill-menu .apm-item.active {
  color: var(--cp-cherryD);
}
body.theme-cel-pastel .active-profile-pill-menu .apm-item-tagline {
  color: var(--cp-ink2);
  font-family: 'Nunito', system-ui, sans-serif;
  font-weight: 400;
}
body.theme-cel-pastel .active-profile-pill-menu .apm-divider {
  background: var(--cp-ink);
  opacity: 0.25;
}
body.theme-cel-pastel .active-profile-pill-menu .apm-item.danger {
  color: var(--cp-cherryD);
}