/* Oxo Sample theme editor (products/oxo_sample/theme_editor). Same structure
   as oxo_simple_theme_editor.css, nested under .oxo-sample-editor. The
   mockup is the plugin's canvas: the 1024 x 335 sampler zone (every element
   absolutely placed, same table as Shared/OxoLayout.swift) plus the
   sequencer zone below it, laid out at its natural 1280 px width and scaled
   by 0.8 like the plugin does (Shared/DrumsLayout.swift). */

@font-face {
  font-family: "Michroma";
  src: url("/assets/Michroma-Regular-b9f7c022.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "DSEG7 Classic";
  src: url("/assets/DSEG7Classic-Regular-6f1ee0eb.ttf") format("truetype");
  font-display: swap;
}

body.theme-editor-page::before,
body.theme-editor-page::after { background: #3a3a3a; }

.oxo-sample-editor {
  --editor-scale: 1;
  display: grid;
  justify-content: center;
  gap: 24px 0;
  zoom: var(--editor-scale);
  -webkit-font-smoothing: antialiased;

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

  & {
    /* Element colors, one per theme JSON key (--t-<key>, underscores as
       hyphens). Defaults = the plugin's original palette (00.Default.json);
       theme.js overrides them inline from the theme. #rrggbb or #rrggbbaa. */
    --t-bg: #101113;
    --t-panel-bg: #141518;
    --t-panel-border: #8a8f981f;
    --t-panel-divider: #8a8f981a;
    --t-topbar-bg: #00000000;
    --t-topbar-logo: #d0d0d3;
    --t-topbar-text: #6b6b70;
    --t-topbar-text-accent: #607594;
    --t-topbar-button-bg: #1c1c20;
    --t-topbar-button-border: #232323;
    --t-topbar-button-text: #6b6b70;
    --t-topbar-sequencer-on: #bcb6a3;
    --t-topbar-lit-bg: #632926;
    --t-topbar-lit-border: #cb585bcc;
    --t-topbar-lit-text: #f2dede;
    --t-topbar-solo: #e0d152;
    --t-group-label: #8a8f9880;
    --t-knob-ring: #101012;
    --t-knob-outer-ring: #8a8f981a;
    --t-knob-ticks: #7f848b4d;
    --t-knob-label: #6e7480;
    --t-knob-modulation: #e0a15e;
    --t-mini-knob-body: #121418;
    --t-mini-knob-border: #4a555d;
    --t-mini-knob-dial: #8ac8d4;
    --t-mini-knob-label: #8a8f98b8;
    --t-chip-bg: #16181c;
    --t-chip-border: #6e748061;
    --t-chip-text: #6e7480;
    --t-chip-lit: #64a5b6;
    --t-loop-chip-text: #8a8f98e6;
    --t-loop-chip-active-border: #78c4d2b8;
    --t-button-bg: #16181c;
    --t-button-border: #8a8f981a;
    --t-button-text: #6e7480;
    --t-mute-active: #cb585b;
    --t-solo-active: #e0d152;
    --t-button-active-text: #111111;
    --t-input-chip-border: #2c313c;
    --t-input-chip-dot: #4a4f58;
    --t-input-chip-on: #4a2b2b;
    --t-input-chip-text-on: #9a9ea5;
    --t-input-chip-text-off: #6e7480;
    --t-meter-bg: #090a0b;
    --t-meter-border: #2b2d2f;
    --t-meter-scale: #9ca0a3;
    --t-meter-ticks: #919395;
    --t-meter-off: #101214;
    --t-meter-bar-border: #1d1f21;
    --t-meter-green: #9fe237;
    --t-meter-yellow: #dbcf42;
    --t-meter-amber: #f98a2b;
    --t-meter-red: #ff4a52;
    --t-slot-pad: #bcb6a3;
    --t-slot-pad-border: #7d7866;
    --t-slot-pad-border-active: #d7d0bb;
    --t-slot-pad-text: #2a2d33cc;
    --t-slot-pad-text-active: #131417f2;
    --t-slot-led: #ff6f77;
    --t-slot-led-off: #2c0f10;
    --t-slot-led-off-border: #170809;
    --t-slot-midi-activity: #40454d;
    --t-rec-pad: #632926;
    --t-rec-pad-border: #331410;
    --t-model-label: #cfc19e;
    --t-model-label-recording: #ff6f77;
    --t-sample-name: #d7d9ddb3;
    --t-action-copy-bg: #64a5b6;
    --t-action-copy-border: #486c88;
    --t-action-copy-text: #101d29;
    --t-action-load-bg: #9ea5a8;
    --t-action-load-border: #697074;
    --t-action-load-text: #191a1b;
    --t-action-save-bg: #b57071;
    --t-action-save-border: #8e3f40;
    --t-action-save-text: #2a0f10;
    --t-slider-label: #5fb6c799;
    --t-slider-track: #060709;
    --t-slider-track-line: #0f1418;
    --t-slider-track-border: #8a8f981a;
    --t-slider-handle: #11161a;
    --t-slider-handle-border: #212d3b;
    --t-slider-led: #8dcfd8;
    --t-slider-ruler: #8bcfd7;
    --t-seg-bg: #180b0b;
    --t-seg-border: #1c1212;
    --t-seg-text: #ff4a43;
    --t-steps-text: #d0d0d3;
    --t-steps-muted: #6b6b70;
    --t-steps-step: #1c1c20;
    --t-steps-border: #232323;
    --t-steps-playhead: #2a2a2a;
    --t-sequencer-active-bg: #416f7d;
    --t-sequencer-active-text: #000000;
    --t-sequencer-events: #5394a7;
    --t-sequencer-events-bg: #00000000;
    --t-scene-active-bg: #416f7d;
    --t-scene-active-text: #000000;
    --t-topbar-button-radius: 2px;

    --bg: var(--t-bg);
    --panel: var(--t-panel-bg);
    --panel-opacity: 1;                /* .5 while a background image is set */
    --accent: var(--t-sequencer-events); /* the lane events (theme `sequencer_events`) */
    --text: #d7d9dd;
    --text-light: #9a9ea5;
    --knob-pointer: #101012;
    --topbar-h: 50px;
    --app-bg-image: none;
    --app-bg-position: top;
    --font: -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;

    --theme-1: #e0a15e;  --theme-1-dial: var(--knob-pointer);
    --theme-2: #bcb6a3;  --theme-2-dial: var(--knob-pointer);
    --theme-3: #8c79a7;  --theme-3-dial: var(--knob-pointer);
    --theme-4: #6e7179;  --theme-4-dial: var(--knob-pointer);
    --theme-5: #64a5b6;  --theme-5-dial: var(--knob-pointer);
    --theme-6: #429984;  --theme-6-dial: var(--knob-pointer);
    --theme-7: #8dcfd8;  --theme-7-dial: var(--knob-pointer);
    --theme-8: #c96b6b;  --theme-8-dial: var(--knob-pointer);
    --theme-9: #d4c26a;  --theme-9-dial: var(--knob-pointer);
    --theme-10: #e8e6df; --theme-10-dial: var(--knob-pointer);
  }

  .app {
    position: sticky;
    top: var(--sticky-top, 0px);
    z-index: 5;
    width: 1024px;
    height: 754px;                     /* 335 sampler + 419 sequencer (524 x 0.8) */
    /* The theme's optional image over the flat colour, placed like the
       plugin (OxoBackgroundImageView): fit to the width, ratio kept; taller
       than the canvas = centred and cropped, shorter = top-aligned. */
    background: var(--app-bg-image, none) var(--app-bg-position) / 1024px auto no-repeat,
                linear-gradient(var(--bg), var(--bg)),
                #0e0e10;
    overflow: hidden;
    font-family: var(--font);
  }

  /* ---------- theme editor (page tooling, not part of the plugin UI) ---------- */

  .theme-section {
    width: 1024px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 8px;
    background: rgba(6, 8, 12, .3);
    color: var(--text);
    font-family: var(--font);
  }
  .theme-section summary {
    list-style: none;
    display: flex; align-items: baseline; gap: 12px;
    padding: 8px 8px 8px 16px;
    cursor: default; user-select: none;
  }
  .theme-section summary::-webkit-details-marker { display: none; }
  .section-fold {
    flex: none; margin-left: auto; align-self: center;
    width: 28px; height: 28px; padding: 0;
    display: grid; place-items: center;
    background: none; border: 0; border-radius: 6px;
    cursor: pointer;
  }
  .section-fold:hover { background: rgba(255, 255, 255, .08); }
  .section-fold:focus-visible { outline: 1.5px solid var(--text-light); outline-offset: -1px; }
  .section-fold::after {
    content: "";
    width: 7px; height: 7px;
    border: solid var(--text-light); border-width: 0 1.5px 1.5px 0;
    rotate: 45deg; translate: 0 -2px;
    transition: rotate .15s;
  }
  .section-fold:hover::after { border-color: #fff; }
  .theme-section:not([open]) .section-fold::after { rotate: -45deg; translate: -2px 0; }
  .section-num {
    flex: none;
    width: 20px; height: 20px; align-self: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    font: 700 11px/20px var(--font); text-align: center;
    color: var(--text);
  }
  .section-title { font: 700 13px var(--font); letter-spacing: .2px; color: var(--text); }
  .section-hint { font: 12px var(--font); color: var(--text-light); }
  .section-body { padding: 4px 16px 16px; display: grid; gap: 14px; }

  .section-help, .section-note, .field-help, .bg-note, .section-steps {
    font: 12px/1.5 var(--font); color: var(--text-light);
    b { color: var(--text); font-weight: 600; }
    code { font: 11px "Menlo", "Courier New", monospace; color: var(--text); }
    a { text-decoration: underline; text-underline-offset: 2px; }
    a:hover { color: #fff; }
  }
  .section-steps { padding-left: 18px; display: grid; gap: 6px; align-content: start; }
  .section-steps li::marker { color: var(--text); font-weight: 700; }

  .theme-row { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 24px; align-items: start; }
  .theme-field { display: grid; gap: 8px; align-content: start; }
  .field-label { font: 700 9px var(--font); letter-spacing: .8px; text-transform: uppercase; color: var(--text-light); }
  .theme-presets { display: flex; flex-wrap: wrap; gap: 6px; }
  .theme-presets button {
    height: 26px; padding: 0 10px;
    border-radius: 13px;
    border: 1px solid rgba(255, 255, 255, .15);
    background: #1d1f26; color: var(--text-light);
    font: 600 11px var(--font); letter-spacing: .3px;
    cursor: pointer;
  }
  .theme-presets button:hover { color: var(--text); background: #262932; }
  .theme-presets button.active { color: #fff; border-color: #fff; background: #262932; }
  .theme-saved { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
  .theme-saved select, .theme-saved button {
    height: 26px; padding: 0 10px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, .15);
    background: #1d1f26; color: var(--text);
    font: 600 11px var(--font);
    cursor: pointer;
  }
  .theme-saved select { min-width: 150px; }
  .theme-saved button:hover:not(:disabled) { background: #262932; }
  .theme-saved :disabled { opacity: .45; cursor: default; }

  .theme-bar { display: flex; align-items: flex-start; gap: 28px; }
  .theme-bar .section-steps { flex: 1; min-width: 0; padding-top: 2px; }
  .swatches { display: grid; grid-template-columns: auto repeat(10, 32px); gap: 8px; align-items: center; }
  .swatches .row-label { font: 700 9px var(--font); letter-spacing: .8px; text-transform: uppercase; color: var(--text-light); padding-right: 6px; }
  .swatch {
    position: relative; touch-action: manipulation;
    width: 32px; height: 32px;
    border-radius: 6px;
    background: var(--c);
    border: 2px solid rgba(255, 255, 255, .12);
    cursor: pointer;
    font: 700 9px/1 var(--font);
    color: rgba(0, 0, 0, .55);
    display: flex; align-items: flex-end; justify-content: flex-end;
    padding: 3px;
  }
  .swatch.dial { color: rgba(255, 255, 255, .45); }
  .swatch.selected { border-color: #fff; box-shadow: 0 0 0 2px rgba(255, 255, 255, .25); }
  .swatch input[type="color"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
  .theme-actions { display: flex; flex-wrap: wrap; gap: 8px; }
  .theme-actions button {
    height: 26px; padding: 0 12px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, .15);
    background: #1d1f26; color: var(--text);
    font: 600 11px var(--font);
    cursor: pointer;
  }
  .theme-actions button:hover { background: #262932; }
  .theme-actions .save-theme { background: #2b4f5c; border-color: #3d6b7c; }
  .theme-actions .save-theme:hover { background: #335f6e; }
  .load-error { color: #e07070; }
  .load-error[hidden] { display: none; }

  .theme-bg { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
  .theme-bg .bg-name { font: 11px var(--font); color: var(--text-light); }
  .theme-bg :disabled { opacity: .45; cursor: default; }
  .theme-bg .bg-note, .theme-bg .bg-error { flex: 1 1 100%; }
  .theme-bg button {
    height: 26px; padding: 0 12px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, .15);
    background: #1d1f26; color: var(--text);
    font: 600 11px var(--font);
    cursor: pointer;
    white-space: nowrap;
  }
  .theme-bg button:hover:not(:disabled) { background: #262932; }

  .theme-elements {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 28px;
    align-items: start;
  }
  .theme-elements .element-group h4 {
    margin: 0 0 6px;
    font: 700 9px var(--font); letter-spacing: .8px; text-transform: uppercase;
    color: var(--text-light);
  }
  .element-row {
    display: grid; grid-template-columns: 1fr 22px 60px 70px; gap: 8px; align-items: center;
    height: 24px;
    font: 500 11px var(--font); color: var(--text);
  }
  .element-row > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .element-row .element-swatch {
    position: relative; touch-action: manipulation;
    width: 22px; height: 18px; border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, .18);
    background: linear-gradient(var(--c), var(--c)),
                repeating-conic-gradient(#666 0 25%, #333 0 50%) 0 0 / 8px 8px;
    cursor: pointer;
  }
  .element-row .element-swatch input[type="color"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
  .element-row input[type="range"] { width: 60px; height: 14px; accent-color: #8dcfd8; cursor: pointer; }
  .element-row .element-hex {
    width: 70px; height: 20px; padding: 0 4px;
    border: 1px solid rgba(255, 255, 255, .12); border-radius: 4px;
    background: #0e0f11; color: var(--text-light);
    font: 10px "Menlo", "Courier New", monospace;
  }
  .element-row .element-hex.invalid { border-color: #e07070; }
  .element-row.radius { grid-template-columns: 1fr 90px 40px; }
  .element-row .element-value { font: 10px "Menlo", "Courier New", monospace; color: var(--text-light); text-align: right; }

  /* ============ SAMPLER ZONE (1024 x 335, absolute) ============ */

  .sampler { position: absolute; left: 0; top: 0; width: 1024px; height: 335px; }
  .sampler div, .sampler svg, .sampler span { position: absolute; }
  .sampler .knob:not(.top) { cursor: pointer; }

  .label, .mini-label, .group-label span, .toggle, .ms-btn, .action-btn, .seg .label, .ctl-label {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--t-knob-label);
    text-align: center;
    white-space: nowrap;
  }

  /* ---------- knobs (33 x 46.8: label 10 + gap 8 + dial 28.8) ---------- */

  .knob {
    width: 33px;
    height: 46.8px;
    --v: attr(data-value type(<number>), 0);
    --color: var(--theme-4);
  }
  .knob .label { left: -10px; right: -10px; top: 0; height: 10px; line-height: 10px; }
  .knob::before {
    content: "";
    position: absolute;
    left: -1.5px; top: 14.4px;
    width: 36px; height: 36px;
    border-radius: 50%;
    background:
      radial-gradient(circle at 5.63px 30.37px,  var(--t-knob-ticks) 0 .7px, transparent .9px),
      radial-gradient(circle at 1.36px 23.41px,  var(--t-knob-ticks) 0 .7px, transparent .9px),
      radial-gradient(circle at .72px 15.26px,   var(--t-knob-ticks) 0 .7px, transparent .9px),
      radial-gradient(circle at 3.84px 7.71px,   var(--t-knob-ticks) 0 .7px, transparent .9px),
      radial-gradient(circle at 10.06px 2.41px,  var(--t-knob-ticks) 0 .7px, transparent .9px),
      radial-gradient(circle at 18px .5px,       var(--t-knob-ticks) 0 .7px, transparent .9px),
      radial-gradient(circle at 25.94px 2.41px,  var(--t-knob-ticks) 0 .7px, transparent .9px),
      radial-gradient(circle at 32.16px 7.71px,  var(--t-knob-ticks) 0 .7px, transparent .9px),
      radial-gradient(circle at 35.28px 15.26px, var(--t-knob-ticks) 0 .7px, transparent .9px),
      radial-gradient(circle at 34.64px 23.41px, var(--t-knob-ticks) 0 .7px, transparent .9px),
      radial-gradient(circle at 30.37px 30.37px, var(--t-knob-ticks) 0 .7px, transparent .9px);
  }
  .knob::after {
    content: "";
    position: absolute;
    left: 3px; top: 18.9px;
    width: 27px; height: 27px;
    border-radius: 50%;
    background: var(--t-knob-ring);
    box-shadow: 0 0 0 1px var(--t-knob-outer-ring);
  }
  .knob .dial {
    left: 4.5px; top: 20.4px;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--color);
    box-shadow: inset 0 -1px 1px rgba(0, 0, 0, .18);
    transform: rotate(calc(-135deg + var(--v) * 2.7deg));
    z-index: 1;
  }
  .knob .dial::after {
    content: "";
    position: absolute;
    left: 50%; top: 2.5px;
    width: 2px; height: 6px;
    margin-left: -1px;
    border-radius: 1px;
    background: var(--pointer, var(--knob-pointer));
  }
  .knob.dimmed { opacity: .35; }

  .knob.rec.input  { --color: var(--theme-1); --pointer: var(--theme-1-dial); }
  .knob.rec.monitor{ --color: var(--theme-2); --pointer: var(--theme-2-dial); }
  .knob.tune       { --color: var(--theme-4); --pointer: var(--theme-4-dial); }
  .knob.lfo        { --color: var(--theme-5); --pointer: var(--theme-5-dial); }
  .knob.filter     { --color: var(--theme-6); --pointer: var(--theme-6-dial); }
  .knob.shape      { --color: var(--theme-6); --pointer: var(--theme-6-dial); }
  .knob.output     { --color: var(--theme-2); --pointer: var(--theme-2-dial); }

  /* ---------- mini knobs ---------- */

  .mini-knob {
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--t-mini-knob-body);
    border: 1px solid var(--t-mini-knob-border);
    box-shadow: inset 0 0 0 1px #20272d;
    --v: attr(data-value type(<number>), 0);
    transform: rotate(calc(-135deg + var(--v) * 2.7deg));
  }
  .mini-knob::after {
    content: "";
    position: absolute;
    left: 50%; top: 1.5px;
    width: 1.5px; height: 4.5px;
    margin-left: -.75px;
    border-radius: 1px;
    background: var(--t-mini-knob-dial);
  }
  .mini-knob.dimmed { opacity: .35; }
  .mini-label { width: 36px; height: 7.2px; line-height: 7.2px; font-size: 6px; color: var(--t-mini-knob-label); }
  .mini-label.dimmed { opacity: .35; }

  /* ---------- chips (POLY / FREE / PITCH / MASTER) ---------- */

  .toggle {
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--t-chip-border);
    border-radius: 1.8px;
    background: var(--t-chip-bg);
    color: var(--t-chip-text);
  }
  .toggle.mini { width: 49px; height: 14px; font-size: 7.2px; letter-spacing: .7px; top: 245.2px; cursor: pointer; }
  .toggle.mini.lit { color: var(--t-chip-lit); border-color: color-mix(in srgb, var(--t-chip-lit) 60%, transparent); }

  /* ============ TOP BAR ============ */

  .topbar { left: 0; top: 0; width: 1024px; height: var(--topbar-h); background: var(--t-topbar-bg); }

  .logo { left: 17px; top: 16px; width: 70px; height: 18px; fill: var(--t-topbar-logo); fill-rule: evenodd; }

  .button.top {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    top: 11px; height: 28px;
    border-radius: var(--t-topbar-button-radius);
    background: var(--t-topbar-button-bg);
    border: 1px solid var(--t-topbar-button-border);
    color: var(--t-topbar-button-text);
    font-size: 12px; font-weight: 600; white-space: nowrap;
  }
  .button.top svg { position: static; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .button.top.dim > * { opacity: .35; }
  /* Lit chips: Rec (live step record) and MIDI IN capture. */
  .button.top.lit { background: var(--t-topbar-lit-bg); border-color: var(--t-topbar-lit-border); color: var(--t-topbar-lit-text); }
  .button.top.midi-capture { left: 128px; width: 36px; cursor: pointer; }
  /* Keyboard glyph: 3 outlined keys + 2 black keys (13 x 11, 1 px strokes). */
  .button.top.midi-capture .keys { position: relative; width: 13px; height: 11px; border: 1px solid currentColor; }
  .button.top.midi-capture .keys i { position: absolute; top: 0; width: 1px; height: 9px; background: currentColor; }
  .button.top.midi-capture .keys i::after { content: ""; position: absolute; left: -.5px; top: 0; width: 2px; height: 6px; background: currentColor; }
  .button.top.midi-capture .keys i:nth-child(1) { left: 3px; }
  .button.top.midi-capture .keys i:nth-child(2) { left: 7px; }
  .button.top.rec { left: 630px; width: 60px; cursor: pointer; }
  .button.top.rec .dot { position: static; width: 8px; height: 8px; border-radius: 50%; background: color-mix(in srgb, var(--t-topbar-lit-border) 70%, transparent); }
  .button.top.rec.lit .dot { background: #fff; }
  .button.top.sequencer { left: 700px; width: 88px; color: var(--t-topbar-sequencer-on); }
  .button.top.undo    { left: 546px; width: 32px; }
  .button.top.redo    { left: 588px; width: 32px; }
  .button.top.presets { left: 798px; width: 88px; }
  .button.top.save    { left: 896px; width: 76px; }
  .button.top.save svg { width: 12px; height: 12px; stroke-width: 2; }
  .button.top.menu    { left: 982px; width: 32px; }

  .preset { left: 185.34px; top: 11px; width: 305px; height: 38px; }
  .preset-name { left: 0; top: 0; height: 28px; line-height: 28px; font-size: 12px; font-weight: 600; color: var(--t-topbar-text); }
  .preset-size { left: 0; top: 24px; height: 14px; line-height: 14px; font-size: 8px; font-weight: 600; letter-spacing: .3px; color: var(--t-topbar-text-accent); }

  /* Volume: a 16 px mini knob centred in its 36 x 28 slot. */
  .knob.top.volume { left: 500px; top: 11px; width: 36px; height: 28px; }
  .knob.top.volume::before, .knob.top.volume::after { content: none; }
  .knob.top.volume .dial {
    left: 10px; top: 6px; width: 16px; height: 16px;
    background: var(--t-mini-knob-body);
    border: 1px solid var(--t-mini-knob-border);
    box-shadow: inset 0 0 0 1px #20272d;
  }
  .knob.top.volume .dial::after { top: 1.5px; height: 4px; width: 1.2px; margin-left: -.6px; background: var(--t-mini-knob-dial); }

  /* ============ PANEL ============ */

  .panel { left: 10px; top: 49.98px; width: 1004px; height: 275.02px; }
  .panel::before {
    content: ""; position: absolute; inset: 0;
    background: var(--panel); opacity: var(--panel-opacity);
    border-radius: 8px;
  }
  .panel::after {
    content: ""; position: absolute; inset: 0;
    border: 1px solid var(--t-panel-border); border-radius: 8px;
  }
  .divider { background: var(--t-panel-divider); }
  .divider.row { display: none; } /* dropped in the plugin (2026-09) */
  .divider.v { top: 72.98px; width: 1px; height: 132.02px; }
  .divider.v1 { left: 161.95px; }
  .divider.v2 { left: 438.16px; }
  .divider.v3 { left: 698.59px; }

  /* ---------- Rec group ---------- */

  .meter {
    left: 28.59px; top: 72.98px; width: 114.86px; height: 43.77px;
    background: var(--t-meter-bg); border: 1px solid var(--t-meter-border); border-radius: 2.4px;
  }
  .meter-scale { left: 38.39px; top: 79.58px; width: 95.27px; height: 9px; display: flex; }
  .meter-scale span { position: static; flex: 1; text-align: center; font: 600 7.2px/9px var(--font); font-variant-numeric: tabular-nums; color: var(--t-meter-scale); }
  .meter-ticks {
    left: 38.39px; top: 90.5px; width: 95.27px; height: 6.4px;
    background: repeating-linear-gradient(to right, var(--t-meter-ticks) 0 1px, transparent 1px calc(95.27px / 7)),
                linear-gradient(var(--t-meter-ticks), var(--t-meter-ticks)) right / 1px 100% no-repeat;
  }
  .meter-bars { left: 39.19px; top: 101.77px; width: 93.67px; height: 5.59px; display: flex; gap: 2.39px; }
  .meter-bars i {
    position: static; width: 11.33px; height: 5.59px; border-radius: 1px;
    background: var(--t-meter-off); border: 1px solid var(--t-meter-bar-border);
  }
  .meter-bars.off { opacity: .45; }
  .meter-bars.on i.g { background: linear-gradient(color-mix(in srgb, var(--t-meter-green) 80%, #fff), var(--t-meter-green)); }
  .meter-bars.on i.y { background: linear-gradient(color-mix(in srgb, var(--t-meter-yellow) 80%, #fff), var(--t-meter-yellow)); }
  .meter-bars.on i.a { background: linear-gradient(color-mix(in srgb, var(--t-meter-amber) 80%, #fff), var(--t-meter-amber)); }
  .meter-bars.on i.r { background: linear-gradient(color-mix(in srgb, var(--t-meter-red) 80%, #fff), var(--t-meter-red)); }

  .toggle.input-on {
    left: 28.59px; top: 124.75px; width: 114.86px; height: 20px;
    border-radius: 1.6px; gap: 6px;
    font-size: 8.6px; font-weight: 400; letter-spacing: .7px;
    background: none; border-color: var(--t-input-chip-border); color: var(--t-input-chip-text-off);
    cursor: pointer;
  }
  .toggle.input-on .led { position: static; width: 7px; height: 7px; border-radius: 50%; background: var(--t-input-chip-dot); }
  .toggle.input-on .input-label { position: static; }
  .toggle.input-on.on { border-color: var(--t-input-chip-on); color: var(--t-input-chip-text-on); font-weight: 600; }
  .toggle.input-on.on .led { background: var(--t-input-chip-on); }

  .knob.rec.input   { left: 35.59px;  top: 154.75px; }
  .knob.rec.monitor { left: 103.59px; top: 154.75px; }

  /* ---------- Slots (6 columns, stride 39.985) ---------- */

  .slot { top: 0; width: 30.39px; height: 0; }
  .slot .led {
    left: 7.19px; width: 16px; height: 4px; border-radius: 2px;
    background: var(--t-slot-led-off); border: 1px solid var(--t-slot-led-off-border); opacity: .7;
  }
  .slot .led.on {
    border: 0; border-radius: 1px; opacity: 1;
    background: linear-gradient(var(--t-slot-led), color-mix(in srgb, var(--t-slot-led) 72%, #000));
    box-shadow: 0 0 5px color-mix(in srgb, var(--t-slot-led) 65%, transparent);
  }
  .slot .led.select { top: 72.98px; }
  .slot .led.trigger { top: 126.37px; }
  .slot .pad {
    left: 0; width: 30.39px; height: 28.8px; border-radius: 3.2px;
    display: flex; align-items: center; justify-content: center;
    font: 600 10px var(--font);
  }
  .slot .pad.select { top: 79.98px; background: var(--t-slot-pad); border: 1px solid var(--t-slot-pad-border); color: var(--t-slot-pad-text); cursor: pointer; }
  .slot.active .pad.select { border-color: var(--t-slot-pad-border-active); color: var(--t-slot-pad-text-active); box-shadow: 0 0 2px color-mix(in srgb, var(--t-slot-pad-border-active) 38%, transparent); }
  .slot .midi { left: 7.19px; top: 112.78px; width: 16px; height: 4px; border-radius: 1px; background: var(--t-slot-midi-activity); opacity: 0; }
  .slot .pad.trigger { top: 133.37px; background: var(--t-rec-pad); border: 1px solid var(--t-rec-pad-border); }
  .slot .pad.trigger.dim { opacity: .38; }
  .slot .ms-btn.mute { left: 0; top: 185.78px; width: 30.39px; height: 19.2px; }

  .ms-btn {
    display: flex; align-items: center; justify-content: center;
    font-size: 8.4px; font-weight: 700; letter-spacing: .7px;
    background: var(--t-button-bg); border: 1px solid var(--t-button-border); border-radius: 2px;
    color: var(--t-button-text);
    cursor: pointer;
  }
  .ms-btn.active { color: var(--t-button-active-text); border-color: #0f1012; }
  .ms-btn.active.mute { background: var(--t-mute-active); }
  .ms-btn.active.solo { background: var(--t-solo-active); }

  /* ---------- Sample group ---------- */

  .model-play { left: 446.55px; top: 89.5px; width: 9px; height: 9px; background: var(--t-model-label); opacity: .2; clip-path: polygon(0 0, 100% 50%, 0 100%); }
  .model-label {
    left: 461.55px; top: 74px; height: 36px; line-height: 36px;
    font: 26px/36px "Michroma", "Avenir Next", "Helvetica Neue", sans-serif;
    letter-spacing: 1.82px;
    white-space: nowrap;
    color: transparent;
    -webkit-text-stroke: 1.5px color-mix(in srgb, var(--t-model-label) 45%, transparent);
    opacity: .5;
  }
  .model-label::after {
    content: attr(data-text);
    position: absolute; left: 0; top: 0;
    color: transparent;
    -webkit-text-stroke: .8px color-mix(in srgb, var(--t-model-label) 28%, transparent);
  }
  .sample-name { left: 461.55px; top: 135.98px; width: 164px; height: 19.19px; line-height: 19.19px; font-size: 11.5px; letter-spacing: .5px; color: var(--t-sample-name); white-space: nowrap; overflow: hidden; }
  .edit-btn {
    left: 633.55px; top: 135.98px; width: 42.55px; height: 19.19px;
    display: flex; align-items: center; justify-content: center;
    font-size: 7.9px; font-weight: 700; letter-spacing: .6px;
    background: var(--t-button-bg); border: 1px solid var(--t-button-border); border-radius: 1.6px;
    color: color-mix(in srgb, var(--t-button-text) 95%, transparent);
  }
  .action-btn {
    top: 176.98px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    font-size: 7.9px; font-weight: 700; letter-spacing: .6px;
    border: 1px solid; border-radius: 2.4px;
  }
  .action-btn.copy  { left: 461.55px; width: 48.17px; }
  .action-btn.clear { left: 516.11px; width: 52.98px; }
  .action-btn.load  { left: 575.48px; width: 47.59px; }
  .action-btn.save  { left: 629.47px; width: 46.63px; }
  .action-btn.copy, .action-btn.clear { background: var(--t-action-copy-bg); border-color: var(--t-action-copy-border); color: var(--t-action-copy-text); }
  .action-btn.load { background: var(--t-action-load-bg); border-color: var(--t-action-load-border); color: var(--t-action-load-text); }
  .action-btn.save { background: var(--t-action-save-bg); border-color: var(--t-action-save-border); color: var(--t-action-save-text); }

  /* ---------- START / END / LOOP ---------- */

  .slider-label { left: 721.98px; height: 11px; line-height: 11px; font-size: 8.9px; font-weight: 700; letter-spacing: .7px; color: var(--t-slider-label); }
  .slider-label.start { top: 75.98px; }
  .slider-label.end   { top: 120.3px; }
  .slider-label.loop  { top: 166.61px; }
  .slider-label.dimmed, .hslider.dimmed { opacity: .2; }
  .hslider {
    left: 721.98px; width: 232.42px; height: 12.8px;
    background: linear-gradient(transparent calc(50% - .5px), var(--t-slider-track-line) calc(50% - .5px), var(--t-slider-track-line) calc(50% + .5px), transparent calc(50% + .5px)), var(--t-slider-track);
    border: 1px solid var(--t-slider-track-border); border-radius: 1px;
  }
  .hslider.start { top: 90.97px; }
  .hslider.end   { top: 136.28px; }
  .hslider.loop  { top: 181.59px; }
  .hslider .handle {
    top: 1.4px; width: 20.8px; height: 8px;
    background: var(--t-slider-handle); border: 1px solid var(--t-slider-handle-border); border-radius: 1px;
  }
  .hslider .handle::after {
    content: ""; position: absolute; left: 7.4px; top: 0; width: 5.2px; height: 6px; border-radius: 1px;
    background: var(--t-slider-led); box-shadow: 0 0 4px color-mix(in srgb, var(--t-slider-led) 30%, transparent);
  }
  .hslider .ruler {
    left: 2.4px; top: 13.99px; width: 225.64px; height: 6.39px;
    background:
      repeating-linear-gradient(to right, color-mix(in srgb, var(--t-slider-ruler) 35%, transparent) 0 1px, transparent 1px calc(225.64px / 10)),
      repeating-linear-gradient(to right, transparent 0 calc(225.64px / 20), color-mix(in srgb, var(--t-slider-ruler) 16%, transparent) calc(225.64px / 20) calc(225.64px / 20 + 1px), transparent calc(225.64px / 20 + 1px) calc(225.64px / 10)) 0 0 / 100% 55% no-repeat,
      linear-gradient(color-mix(in srgb, var(--t-slider-ruler) 35%, transparent), color-mix(in srgb, var(--t-slider-ruler) 35%, transparent)) right / 1px 100% no-repeat;
  }
  .mini-label.random { left: 959.41px; top: 79.17px; }
  .mini-label.xfade  { left: 959.41px; top: 169.8px; }
  .mini-knob.random  { left: 970.41px; top: 90.38px; }
  .mini-knob.xfade   { left: 970.41px; top: 181px; }
  .loop-chip {
    left: 963.41px; top: 134.69px; width: 28px; height: 16px;
    display: flex; align-items: center; justify-content: center;
    font-size: 8.9px; font-weight: 700;
    background: var(--t-chip-bg); border: 1px solid var(--t-button-border); border-radius: 1.6px;
    color: var(--t-loop-chip-text);
    cursor: pointer;
  }
  .loop-chip.active { border-color: var(--t-loop-chip-active-border); box-shadow: 0 0 2px color-mix(in srgb, var(--t-loop-chip-active-border) 28%, transparent); }

  /* ============ CONTROLS ROW ============ */

  .group-label { top: 236px; height: 9px; display: flex; align-items: center; gap: 6.4px; }
  .group-label::before, .group-label::after { content: ""; flex: 1; min-width: 7px; height: 1px; background: var(--t-group-label); }
  .group-label span { position: static; color: var(--t-group-label); font-size: 7.2px; letter-spacing: 1.15px; font-weight: 600; }
  .group-label.midi   { left: 28.59px;  width: 100px; }
  .group-label.tune   { left: 182px;    width: 186.33px; }
  .group-label.lfo    { left: 399.34px; width: 139px; }
  .group-label.filter { left: 569.38px; width: 139px; }
  .group-label.shape  { left: 739.39px; width: 86px; }
  .group-label.output { left: 856.41px; width: 139px; }

  .knob.tune, .knob.lfo, .knob.filter, .knob.shape, .knob.output { top: 263.2px; }

  /* 7-segment displays: MIDI channel (big) + ROOT. */
  .seg {
    display: flex; align-items: center; justify-content: center;
    background: var(--t-seg-bg);
    border: 1px solid var(--t-seg-border); border-radius: 1.6px;
    font-family: "DSEG7 Classic", "Menlo", monospace;
    color: var(--t-seg-text);
  }
  /* Flat like the plugin now: no gradient, glow, ghost "88" or opacity. */
  .seg .ghost { display: none; }
  .seg .digits { position: relative; }
  .seg.midi { left: 28.59px; top: 257px; width: 48px; height: 35px; font-size: 16.6px; letter-spacing: 1.8px; }
  .seg.root { left: 182px; top: 283.3px; width: 27.2px; height: 24.6px; font-size: 9.1px; letter-spacing: 1px; }
  .ctl-label { height: 10px; line-height: 10px; font-size: 7.9px; font-weight: 600; letter-spacing: .9px; }
  .ctl-label.channel { left: 28.59px; top: 300px; width: 48px; }
  .ctl-label.root { left: 182px; top: 263.2px; width: 27.33px; }
  .ms-btn.mute { left: 96.59px; top: 257.5px; width: 48px; height: 20px; }
  .ms-btn.solo { left: 96.59px; top: 289.5px; width: 48px; height: 20px; }

  .toggle.mini.voice-mode { left: 221.33px; }
  .mini-knob.portamento   { left: 291.83px; top: 245.2px; }
  .knob.tune.octave { left: 229.33px; }
  .knob.tune.coarse { left: 282.33px; }
  .knob.tune.fine   { left: 335.33px; }

  .toggle.mini.lfo-phase  { left: 399.34px; }
  .toggle.mini.lfo-target { left: 489.34px; }
  .knob.lfo.speed { left: 399.34px; }
  .knob.lfo.depth { left: 452.34px; }
  .knob.lfo.delay { left: 505.34px; }

  .mini-knob.lpf-vel { left: 684.88px; top: 245.2px; }
  .knob.filter.hpf  { left: 569.38px; }
  .knob.filter.gain { left: 622.38px; }
  .knob.filter.lpf  { left: 675.38px; }

  .knob.shape.attack  { left: 739.39px; }
  .knob.shape.release { left: 792.39px; }

  .toggle.mini.output-bus { left: 901.41px; }
  .mini-knob.level-vel { left: 971.91px; top: 245.2px; }
  .knob.output.spread { left: 856.41px; }
  .knob.output.pan    { left: 909.41px; }
  .knob.output.level  { left: 962.41px; }

  /* ============ SEQUENCER ZONE (1280 x 513.5, scaled 0.8 under the sampler) ============ */

  .steps {
    position: absolute; left: 0; top: 335px;
    width: 1280px; height: 524px;
    transform: scale(.8); transform-origin: top left;
    padding: 5.5px 12.5px 12.5px;
    display: flex; flex-direction: column; gap: 18px;
    font-family: var(--font);
    color: var(--t-steps-muted);
  }
  .steps .btn {
    display: flex; align-items: center; justify-content: center;
    background: var(--t-steps-step); border: 1px solid var(--t-steps-border);
    color: var(--t-steps-muted);
    font-size: 12px; font-weight: 600; white-space: nowrap;
  }
  .steps .btn.active { background: var(--t-sequencer-active-bg); color: var(--t-sequencer-active-text); }

  /* Scene row: 41 high. The scene / Copy / Swap options and the resolution
     dropdown fill the row (ModalOption with fillHeight, radius 4); the Resync
     pill is 33 high and hugs its label (padding 20) centred in a 104 slot. */
  .scene-row { height: 41px; display: flex; align-items: center; gap: 8px; }
  /* The row wears the sampler panel's button_* keys (MUTE / SOLO family). */
  .scene-row .btn { height: 41px; border-radius: 4px; background: var(--t-button-bg); border-color: var(--t-button-border); color: var(--t-button-text); }
  .scene-row .resync-slot { width: 104px; height: 41px; display: flex; align-items: center; justify-content: center; }
  .scene-row .resync { height: 33px; padding: 0 20px; border-radius: 2px; }
  /* Swing knob (TopBarSwingKnob): 28 px, 2.1 px arc open at the bottom
     (270 deg sweep), track in button_bg, progress / pointer / label in
     scene_active_bg, a 2 x 9 pointer at -135 deg (swing 50), a 12 px label
     line under it. */
  .scene-row .swing { width: 64px; height: 41px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding-bottom: 12px; }
  .scene-row .swing i {
    position: relative; width: 28px; height: 28px; border-radius: 50%;
    border: 2.1px solid var(--t-button-bg);
    -webkit-mask: conic-gradient(from 225deg, #000 0 270deg, transparent 270deg);
    mask: conic-gradient(from 225deg, #000 0 270deg, transparent 270deg);
  }
  .scene-row .swing i::after {
    content: ""; position: absolute; left: 50%; top: 50%; width: 2px; height: 9px; margin: -4.5px 0 0 -1px;
    background: var(--t-scene-active-bg);
    transform: rotate(-135deg) translateY(-6.72px);
  }
  .scene-row .scene { flex: 1; position: relative; }
  /* Active scene + presence line = the scene row's own pair (scene_active_*). */
  .scene-row .scene.active { background: var(--t-scene-active-bg); color: var(--t-scene-active-text); }
  .scene-row .scene::after { content: ""; position: absolute; left: 3px; right: 3px; bottom: 0; height: 1px; background: var(--t-scene-active-bg); }
  .scene-row .resolution { width: 132px; justify-content: space-between; padding: 0 10px; }
  .scene-row .resolution::after { content: ""; width: 6px; height: 6px; border: solid var(--t-button-text); border-width: 0 1.5px 1.5px 0; rotate: 45deg; translate: 0 -2px; }
  .scene-row .action { width: 88px; }

  /* Panel + sidebar + content. */
  .steps-panel {
    flex: 1;
    display: flex; align-items: flex-start;
    padding: 12px;
    background: color-mix(in srgb, var(--t-panel-bg) calc(var(--panel-opacity) * 100%), transparent);
    border: 1px solid var(--t-panel-border); border-radius: 10px;
  }
  .sidebar { width: 132px; flex: none; border-right: 1px solid var(--t-steps-border); display: flex; flex-direction: column; gap: 14px; align-self: stretch; }
  .lane-label { height: 25px; display: flex; align-items: center; padding: 0 8px; font-size: 13px; font-weight: 600; letter-spacing: 1.2px; color: var(--t-steps-muted); white-space: nowrap; }
  .sidebar .gate { margin-top: 10px; }
  .sidebar .value-spacer { height: 8px; }
  .sidebar .nav { height: 215px; margin-top: -8px; display: flex; flex-direction: column; gap: 8px; }
  .sidebar .nav .lane-label { height: auto; line-height: 15px; padding: 4px 8px; margin-right: 6px; border: 1px solid transparent; border-radius: 5px; gap: 6px; }
  .sidebar .nav .lane-label small { font-size: 11px; font-weight: 500; letter-spacing: 0; opacity: .55; }
  .sidebar .nav .lane-label.active { color: var(--t-steps-text); border-color: #666; }
  .sidebar .pages { margin-top: 18px; }
  .sidebar .patterns { margin-top: 10px; }

  .content { flex: 1; min-width: 0; padding-left: 12px; display: flex; flex-direction: column; gap: 14px; }
  .strip {
    display: grid; grid-template-columns: repeat(16, 1fr);
    background: var(--t-steps-step); outline: 1px solid var(--t-steps-border); outline-offset: -1px;
    position: relative;
  }
  .strip.gate { height: 25px; margin-top: 10px; }
  .strip.hold { height: 25px; }
  .strip .cell { position: relative; border-left: 1px solid var(--t-steps-border); }
  .strip .cell.playhead { background: var(--t-steps-playhead); }
  .strip .cell:nth-child(4n+1) { border-left-color: #555; }
  /* Stipple over the events_bg plate (transparent by default; set it equal to
     sequencer_events for solid events). */
  .strip .cell.on::after {
    content: ""; position: absolute; inset: 2px; border-radius: 2px;
    background: radial-gradient(circle, var(--accent) .65px, transparent .8px) 0 0 / 3px 3px var(--t-sequencer-events-bg);
    border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
  }
  .strip .cell.hold-on::after { inset: 2px; border-radius: 2px; border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent); background: none; }
  .strip::after { content: ""; position: absolute; right: 0; top: 0; width: 1px; height: 100%; background: #78141b; }

  .value-row { height: 14px; margin-top: -6px; display: grid; grid-template-columns: repeat(16, 1fr); align-items: end; }
  .value-row span { text-align: center; font-size: 12px; color: var(--t-steps-muted); line-height: 14px; }

  .strip.tall { height: 215px; margin-top: -8px; }
  .strip.tall .cell { padding: 2px; display: flex; align-items: flex-end; }
  /* A value event whose gate is OFF is dimmed (Theme.gateOffEventOpacity 0.5);
     the mockup's gate lane is on at every odd cell, so the even ones are off. */
  .strip.tall .cell:nth-child(even) .bar { opacity: .5; }
  .strip.tall .bar {
    width: 100%; height: calc(var(--h) * 1%); border-radius: 2px;
    background: radial-gradient(circle, var(--accent) .65px, transparent .8px) 0 0 / 3px 3px var(--t-sequencer-events-bg);
    border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
  }

  .grid-row { height: 25px; display: grid; grid-template-columns: repeat(16, 1fr); }
  .grid-row.pages { margin-top: 18px; }
  .grid-row.patterns { margin-top: 10px; }
  /* Both rows wear the sampler panel's button_* keys, like the scene row. */
  .grid-row .btn { border-radius: 2px; background: var(--t-button-bg); border-color: var(--t-button-border); color: var(--t-button-text); }
  .grid-row .btn.active { background: var(--t-sequencer-active-bg); color: var(--t-sequencer-active-text); }
  .grid-row .gap { }
  .grid-row .direction { grid-column: span 2; margin: 0 14px; border-radius: 4px; justify-content: space-between; padding: 0 10px; font-size: 14px; font-weight: 700; }
  .grid-row .direction::after { content: ""; width: 6px; height: 6px; border: solid var(--t-button-text); border-width: 0 1.5px 1.5px 0; rotate: 45deg; translate: 0 -2px; }
  .grid-row .wide { grid-column: span 2; }
  .grid-row .btn.playhead::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: color-mix(in srgb, var(--t-steps-text) 20%, transparent); }
  .grid-row .btn { position: relative; }
}