/* Palette from the Sample Squad Media Player (AppColors.cs) so the Sample Squad apps match. */
:root {
  --black: #111111;          /* window background */
  --charcoal: #232326;       /* panels */
  --charcoal-2: #2c2c30;     /* raised panels, inputs */
  --line: #36363b;
  --line-soft: #29292d;
  --orange: #985629;         /* brand, titles, carriers */
  --orange-text: #c07a45;    /* the same hue lifted for small text on black */
  --blue: #0091ff;           /* interactive */
  --blue-pressed: #0070cc;
  --text: #e5e4e2;
  --label: #7393b3;          /* secondary labels, modulators */
  --muted: #8a8987;
  --warn: #e0533d;
  --radius: 6px;
  --ui: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: "DM Mono", Consolas, "Cascadia Mono", monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--black); color: var(--text); font-family: var(--ui); min-height: 100vh; }
.shell { max-width: 1440px; margin: auto; padding: 0 32px; }

header { height: 72px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 12px; font-weight: 600; letter-spacing: .16em; font-size: 14px; }
.brand-mark { border: 1px solid var(--orange); color: var(--orange-text); padding: 6px; border-radius: 4px; font-family: var(--mono); }
.status { font: 12px var(--mono); letter-spacing: .08em; color: var(--label); }
.status i { display: inline-block; width: 7px; height: 7px; background: var(--blue); border-radius: 50%; box-shadow: 0 0 10px var(--blue); margin-right: 8px; }
body.busy .status i { background: var(--orange-text); box-shadow: 0 0 10px var(--orange); }

.workbench { display: grid; grid-template-columns: minmax(380px, .85fr) minmax(560px, 1.15fr); min-height: calc(100vh - 126px); }
.composer { padding: 56px 6vw 48px 0; border-right: 1px solid var(--line); }
.result { padding: 42px 0 36px 4vw; }
body.busy .result { opacity: .6; transition: opacity .2s; }

.eyebrow { font: 11px var(--mono); color: var(--orange-text); letter-spacing: .14em; margin: 0 0 20px; }
h1 { font-size: clamp(38px, 4.2vw, 68px); line-height: 1; letter-spacing: -.04em; margin: 0 0 48px; font-weight: 600; }
h1 em { font-style: normal; color: var(--orange-text); }
label { font-size: 13px; font-weight: 600; color: var(--label); }

textarea { display: block; width: 100%; height: 140px; margin: 10px 0 14px; background: var(--charcoal); border: 1px solid var(--line); border-radius: var(--radius); color: var(--text); padding: 18px; font: 16px/1.55 var(--ui); resize: none; outline: none; transition: .2s; }
textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px #0091ff22; }

.suggestions { display: flex; flex-wrap: wrap; gap: 8px; }
.suggestions button { border: 1px solid var(--line); color: var(--text); background: var(--charcoal); border-radius: 99px; padding: 7px 12px; cursor: pointer; font: 12px var(--ui); }
.suggestions button:hover { border-color: var(--blue); color: #fff; }

.controls { display: flex; align-items: end; gap: 22px; margin-top: 34px; }
.controls label { flex: 1; }
.controls input { display: block; width: 100%; accent-color: var(--blue); margin-top: 12px; }
.controls output { float: right; color: var(--text); font-family: var(--mono); }
.primary { border: 0; border-radius: var(--radius); background: var(--blue); color: #fff; padding: 16px 20px; font: 600 14px var(--ui); min-width: 170px; cursor: pointer; }
.primary span { float: right; margin-left: 20px; }
.primary:hover { filter: brightness(1.08); }
.primary:active { background: var(--blue-pressed); }
.primary:disabled { opacity: .6; cursor: progress; }

.interpretation, .shaper { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); }
.interpret-head { display: flex; justify-content: space-between; gap: 12px; font: 10px var(--mono); letter-spacing: .1em; color: var(--label); }
.interpret-head small { font: 10px var(--mono); color: var(--muted); letter-spacing: .02em; text-align: right; }
.trait-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.trait-chip { display: flex; gap: 8px; align-items: center; border: 1px solid var(--line); background: var(--charcoal); border-radius: 4px; padding: 6px 9px; font: 10px var(--mono); }
.trait-chip b { color: var(--text); font-weight: 500; }
.trait-chip.family { border-color: var(--orange); }
.trait-chip .tag { font-style: normal; color: var(--orange-text); font-size: 9px; letter-spacing: .08em; }
#interpretNote { color: var(--muted); font-size: 12px; line-height: 1.5; margin: 10px 0 0; }

/* Sound-shaping sliders */
.group-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 6px; }
.group-tabs button { border: 1px solid var(--line); background: transparent; color: var(--label); border-radius: 99px; padding: 6px 12px; font: 12px var(--ui); cursor: pointer; }
.group-tabs button[aria-selected="true"] { background: var(--charcoal-2); color: var(--text); border-color: var(--blue); }
.group-tabs button[data-count]:not([data-count=""])::after { content: attr(data-count); margin-left: 6px; font: 10px var(--mono); color: var(--orange-text); }
.sliders { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 22px; margin-top: 8px; }
.slider { padding: 10px 0 4px; border-bottom: 1px solid var(--line-soft); }
.slider-head { display: flex; justify-content: space-between; align-items: baseline; }
.slider-head label { color: var(--text); font-weight: 500; font-size: 13px; }
.slider-head output { font: 11px var(--mono); color: var(--label); }
.slider.changed .slider-head output { color: var(--blue); }
.slider input { width: 100%; margin: 8px 0 2px; appearance: none; -webkit-appearance: none; height: 18px; background: transparent; cursor: pointer; }
.slider input::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--line) 0 50%, var(--line) 50% 100%); background: linear-gradient(90deg, var(--line) calc(min(var(--pos), 50%)), var(--blue) calc(min(var(--pos), 50%)) calc(max(var(--pos), 50%)), var(--line) calc(max(var(--pos), 50%))); }
.slider input::-moz-range-track { height: 4px; border-radius: 2px; background: var(--line); }
.slider input::-moz-range-progress { height: 4px; background: transparent; }
.slider input::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border-radius: 50%; background: var(--text); border: 2px solid var(--black); box-shadow: 0 0 0 1px var(--line); }
.slider input::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--text); border: 2px solid var(--black); }
.slider input:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }
.slider.off { opacity: .55; }
.slider.off input { cursor: not-allowed; }
.slider-why { font-size: 10px; color: var(--muted); line-height: 1.35; }
.slider-ends { display: flex; justify-content: space-between; font-size: 10px; color: var(--muted); }
.shaper-actions { display: flex; gap: 10px; margin-top: 14px; }
.shaper-actions button { border: 1px solid var(--line); background: var(--charcoal); color: var(--text); border-radius: var(--radius); padding: 8px 12px; font: 12px var(--ui); cursor: pointer; }
.shaper-actions button:hover { border-color: var(--blue); }

/* Result column */
.result-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 20px; }
.result-head .eyebrow { margin-bottom: 10px; }
.result-head #patchTitle { font: 500 28px var(--mono); letter-spacing: .04em; background: transparent; color: var(--text); border: 0; border-bottom: 1px solid transparent; width: 300px; outline: none; }
.dx7-name { display: flex; align-items: center; gap: 7px; margin-top: 7px; font: 9px var(--mono); letter-spacing: .1em; color: var(--muted); cursor: help; }
.dx7-name input { font: 11px var(--mono); letter-spacing: .1em; background: var(--charcoal-2); border: 1px solid var(--line); border-radius: 4px; color: var(--label); padding: 2px 5px; width: 104px; text-transform: uppercase; outline: none; }
.dx7-name input:focus { border-color: var(--blue); color: var(--text); }
.result-head input:focus { border-color: var(--blue); }
.valid { font: 10px var(--mono); letter-spacing: .1em; color: var(--orange-text); border: 1px solid var(--orange); border-radius: 4px; padding: 8px; max-width: 230px; text-align: right; }

.audition, .algorithm-card, .metrics, .why, .alternates { background: var(--charcoal); border: 1px solid var(--line); border-radius: var(--radius); }
.audition { padding: 14px 16px 10px; margin-bottom: 14px; }
.audition-head { display: flex; justify-content: space-between; align-items: center; font: 10px var(--mono); letter-spacing: .1em; color: var(--label); margin-bottom: 10px; gap: 12px; flex-wrap: wrap; }
.audition-controls { display: flex; align-items: center; gap: 8px; }
.audition-controls button { width: 24px; height: 22px; border: 1px solid var(--line); border-radius: 4px; background: var(--charcoal-2); color: var(--text); cursor: pointer; font: 12px var(--mono); }
.audition-controls output { font: 11px var(--mono); color: var(--text); min-width: 24px; text-align: center; }
.audition-controls label { font: 10px var(--mono); color: var(--label); display: flex; align-items: center; gap: 6px; margin-left: 10px; }
.audition-controls input { width: 80px; accent-color: var(--blue); }
.keyboard { display: flex; position: relative; height: 88px; user-select: none; touch-action: none; }
.key.white { flex: 1; background: var(--text); border: 1px solid var(--black); border-radius: 0 0 4px 4px; cursor: pointer; }
.key.black { width: 0; position: relative; z-index: 2; cursor: pointer; }
.key.black::before { content: ""; position: absolute; left: -9px; width: 18px; height: 54px; background: var(--black); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 3px 3px; }
.key.white.down { background: var(--blue); }
.key.black.down::before { background: var(--blue-pressed); }
.hint { display: block; color: var(--muted); font: 10px var(--mono); margin-top: 8px; }

.algorithm-card { display: grid; grid-template-columns: 150px 1fr; }
.algo-meta { border-right: 1px solid var(--line); padding: 20px; display: flex; flex-direction: column; justify-content: space-between; }
.algo-meta span, .metrics span { font: 10px var(--mono); color: var(--label); letter-spacing: .1em; }
.algo-meta strong { font: 400 54px var(--mono); color: var(--orange-text); }
.algo-meta { gap: 14px; justify-content: flex-start; }
.algo-key { list-style: none; margin: auto 0 0; padding: 0; display: grid; gap: 6px; font-size: 11px; color: var(--muted); }
.algo-key li { display: flex; align-items: center; gap: 7px; line-height: 1.2; }
.algo-key i { flex: none; width: 14px; height: 9px; border: 1.5px solid; border-radius: 2px; }
.algo-key .k-car { border-color: var(--orange-text); }
.algo-key .k-mod { border-color: var(--label); }
.algo-key .k-fb { border: 0; border-top: 1.5px solid var(--blue); border-right: 1.5px solid var(--blue); border-radius: 0; height: 7px; }
.algo-key .k-off { border-color: var(--line); }
#algoSvg { width: 100%; height: auto; max-height: 300px; display: block; padding: 6px 0; }

.algo-chart { margin-top: 10px; }
.algo-chart-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.algo-chart-head small { flex: 1; min-width: 200px; font: 10px var(--mono); color: var(--muted); line-height: 1.4; }
.algo-chart:not(.open) .algo-chart-head small { display: none; }
#algoToggle { border: 1px solid var(--line); background: var(--charcoal); color: var(--text); border-radius: var(--radius); padding: 7px 12px; font: 12px var(--ui); cursor: pointer; }
#algoToggle:hover { border-color: var(--blue); }
.algo-grid { display: none; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; margin-top: 10px; background: var(--charcoal); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; }
.algo-chart.open .algo-grid { display: grid; }
.algo-pick { position: relative; background: var(--charcoal-2); border: 1px solid var(--line-soft); border-radius: 4px; padding: 4px 2px 2px; cursor: pointer; }
.algo-pick svg { width: 100%; height: auto; display: block; }
.algo-pick i { position: absolute; top: 3px; left: 5px; font: 10px var(--mono); font-style: normal; color: var(--muted); }
.algo-pick:hover { border-color: var(--blue); }
.algo-pick.kin { border-color: #3d4a57; }
.algo-pick.on { border-color: var(--orange); background: #241a12; }
.metrics { display: grid; grid-template-columns: 1.5fr 1fr 1fr; margin-top: 10px; }
.metrics div { padding: 14px 18px; border-right: 1px solid var(--line); }
.metrics div:last-child { border: 0; }
.metrics strong { display: block; font: 13px var(--mono); margin-top: 8px; }

.operators { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin: 18px 0; }
.op { background: var(--charcoal); border-top: 2px solid var(--label); border-radius: 0 0 4px 4px; padding: 12px; }
.op.carrier { border-color: var(--orange); }
.op.silent { opacity: .35; }
.op span { font: 10px var(--mono); color: var(--label); }
.op strong { display: block; font: 400 18px var(--mono); margin: 9px 0 3px; }
.op small { font: 9px var(--mono); color: var(--muted); }

.why, .alternates { padding: 14px 16px; margin: 14px 0; }
#whyText { color: var(--text); font-size: 13px; line-height: 1.55; margin: 10px 0; }
.measure { width: 100%; border-collapse: collapse; font: 11px var(--mono); }
.measure th { color: var(--label); font-weight: 400; font-size: 9px; letter-spacing: .1em; text-align: right; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.measure td { padding: 6px 8px; text-align: right; border-bottom: 1px solid var(--line-soft); }
.measure td:first-child, .measure th:first-child { text-align: left; color: var(--label); }
.measure td:last-child { color: var(--text); font-weight: 500; }
.measure.clips tr:last-child td:last-child { color: var(--warn); }
.alt-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 10px; }
.alt { text-align: left; border: 1px solid var(--line); border-radius: var(--radius); background: var(--charcoal-2); color: var(--text); padding: 9px 10px; cursor: pointer; }
.alt b { display: block; font: 500 12px var(--mono); }
.alt small { color: var(--label); font-size: 10px; }
.alt.on, .alt:hover { border-color: var(--blue); }

.download-row { border: 1px solid var(--line); border-radius: var(--radius); background: var(--charcoal); padding: 14px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.download-row > div { display: flex; align-items: center; gap: 13px; }
.file-icon { display: grid; place-items: center; width: 43px; height: 43px; border: 1px solid var(--orange); border-radius: 4px; color: var(--orange-text); font: 11px var(--mono); }
.download-row p { margin: 0; }
.download-row strong, .download-row small { display: block; }
.download-row strong { font: 13px var(--mono); }
.download-row small { color: var(--muted); margin-top: 4px; font-size: 11px; }
#nativeDownload { background: var(--blue); color: #fff; border: 0; border-radius: var(--radius); padding: 13px 18px; font: 600 13px var(--ui); cursor: pointer; }
#nativeDownload:hover { filter: brightness(1.08); }
#nativeDownload:active { background: var(--blue-pressed); }
.alternate-downloads { display: flex; justify-content: flex-end; gap: 18px; flex-wrap: wrap; }
.single-download { display: block; margin: 10px 0 0; border: 0; background: transparent; color: var(--label); font: 11px var(--ui); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 0; }
.single-download:hover { color: var(--blue); }
.carts { margin-top: 14px; padding: 12px 14px; background: var(--charcoal); border: 1px solid var(--line); border-radius: var(--radius); }
.carts .interpret-head small { font: 11px var(--ui); letter-spacing: 0; }
.cart-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; }
.cart-actions button, .file-btn { border: 1px solid var(--line); background: var(--charcoal-2); color: var(--text); border-radius: var(--radius); padding: 8px 12px; font: 12px var(--ui); cursor: pointer; font-weight: 400; }
.cart-actions button:hover, .file-btn:hover { border-color: var(--blue); }
.file-btn { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 600; }
.cart-store { display: flex; gap: 6px; align-items: center; }
.cart-store select { background: var(--charcoal-2); color: var(--text); border: 1px solid var(--line); border-radius: 4px; padding: 6px; font: 12px var(--ui); max-width: 190px; }
.cart-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 12px; }
.cart-cols h4 { margin: 0 0 8px; font: 10px var(--mono); letter-spacing: .1em; color: var(--label); font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cart-cols h4 input { background: transparent; border: 0; border-bottom: 1px solid transparent; color: var(--orange-text); font: 10px var(--mono); letter-spacing: .1em; width: 100%; outline: none; text-transform: uppercase; }
.cart-cols h4 input:focus { border-color: var(--blue); }
.slot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; max-height: 260px; overflow-y: auto; }
.slot { display: flex; gap: 6px; align-items: baseline; text-align: left; background: var(--charcoal-2); border: 1px solid var(--line-soft); border-radius: 4px; color: var(--text); padding: 5px 7px; font: 11px var(--mono); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slot i { font-style: normal; color: var(--label); min-width: 16px; }
.slot:hover { border-color: var(--blue); }
.slot.empty { color: var(--muted); cursor: default; background: transparent; }
.slot.empty:hover { border-color: var(--line-soft); }
.slot-empty { color: var(--muted); font-size: 12px; margin: 4px 0; }
.midi-row { margin-top: 14px; padding: 12px 14px; background: var(--charcoal); border: 1px solid var(--line); border-radius: var(--radius); }
.midi-head { display: flex; justify-content: space-between; gap: 12px; font: 10px var(--mono); letter-spacing: .1em; color: var(--label); }
.midi-head small { font: 11px var(--ui); letter-spacing: 0; color: var(--muted); text-align: right; }
.midi-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 10px; }
.midi-controls button { border: 1px solid var(--line); background: var(--charcoal-2); color: var(--text); border-radius: var(--radius); padding: 8px 12px; font: 12px var(--ui); cursor: pointer; }
.midi-controls button:hover:not(:disabled) { border-color: var(--blue); }
.midi-controls .midi-send { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 600; }
.midi-controls .midi-send:active { background: var(--blue-pressed); }
.midi-controls button:disabled { opacity: .5; cursor: default; }
.midi-field { display: flex; align-items: center; gap: 6px; font: 12px var(--ui); color: var(--label); font-weight: 400; }
.midi-field select { background: var(--charcoal-2); color: var(--text); border: 1px solid var(--line); border-radius: 4px; padding: 5px 6px; font: 12px var(--ui); max-width: 200px; }
.midi-auto input { accent-color: var(--blue); }
[hidden] { display: none !important; }
.compat { text-align: right; color: var(--muted); font: 10px var(--mono); }

.midi-in { margin-top: 8px; }
.midi-note { font: 9px var(--mono); color: var(--muted); }
#midiPanic { border: 1px solid var(--line); background: var(--charcoal-2); color: var(--text); border-radius: var(--radius); padding: 6px 10px; font: 11px var(--ui); cursor: pointer; }
#midiPanic:hover { border-color: var(--warn); }

/* Monitoring reverb */
.verb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.verb label { display: flex; align-items: center; gap: 6px; font: 10px var(--mono); letter-spacing: .06em; color: var(--label); }
.verb.off label:not(.verb-on) { opacity: .45; }
.verb-on { color: var(--text) !important; }
.verb-on input { accent-color: var(--blue); }
.verb select { background: var(--charcoal-2); border: 1px solid var(--line); border-radius: 4px; color: var(--text); font: 11px var(--mono); padding: 3px 4px; }
.verb input[type="range"] { width: 70px; accent-color: var(--blue); }
.verb output { font: 10px var(--mono); color: var(--muted); min-width: 32px; }
.verb-note { font: 9px var(--mono); color: var(--muted); letter-spacing: .06em; margin-left: auto; border-bottom: 1px dotted var(--line); cursor: help; }

/* Audition loop */
.loop { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 10px; }
.loop-head { display: flex; align-items: center; gap: 10px; }
.loop-head button { border: 1px solid var(--line); background: var(--charcoal-2); color: var(--text); border-radius: var(--radius); padding: 7px 12px; font: 12px var(--ui); cursor: pointer; }
.loop-head button:hover { border-color: var(--blue); }
.loop-play.on { border-color: var(--blue); background: #0091ff22; color: #fff; }
.loop-meter { position: relative; flex: 1; height: 8px; background: var(--charcoal-2); border: 1px solid var(--line); border-radius: 99px; overflow: hidden; }
.loop-meter i { display: block; height: 100%; width: 0; background: var(--blue); transition: width .08s linear; }
.loop-meter i.hot { background: var(--orange); }
.loop-meter em { position: absolute; right: 6px; top: -4px; font: 8px var(--mono); font-style: normal; letter-spacing: .1em; color: transparent; }
.loop-meter em.on { color: var(--warn); }
.loop-body { margin-top: 10px; }
.loop-controls { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.loop-controls label { display: flex; align-items: center; gap: 6px; font: 10px var(--mono); letter-spacing: .06em; color: var(--label); }
.loop-controls select, .loop-controls input[type="number"] { background: var(--charcoal-2); border: 1px solid var(--line); border-radius: 4px; color: var(--text); font: 11px var(--mono); padding: 3px 4px; }
.loop-controls input[type="number"] { width: 52px; text-align: right; }
.loop-controls input[type="range"] { width: 78px; accent-color: var(--blue); }
.loop-controls output, .loop-controls small { font: 10px var(--mono); color: var(--muted); }
.loop-hint { margin: 8px 0 0; font: 10px var(--mono); color: var(--orange-text); min-height: 12px; }

.roll { display: grid; grid-template-columns: 26px repeat(16, 1fr); gap: 2px; margin-top: 8px; }
.rlabels { display: grid; grid-template-rows: repeat(25, 1fr); gap: 1px; padding: 1px 0; }
.rlabel { display: flex; align-items: center; justify-content: flex-end; height: 8px; padding-right: 3px; font: 7px var(--mono); font-style: normal; color: var(--muted); }
.rcol { position: relative; display: grid; grid-template-rows: repeat(25, 1fr); gap: 1px; background: var(--charcoal-2); border-radius: 3px; padding: 1px; }
.rcol.head { background: #2f3a44; }
.rcell { display: block; height: 8px; background: var(--charcoal); border-radius: 1px; cursor: pointer; }
.rcell.black { background: #1b1b1e; }
.rcell:hover { background: #3a3a40; }
.rcell.on { background: var(--orange); }
.rcol.head .rcell.on { background: var(--orange-text); }
.off-roll { position: absolute; left: 0; right: 0; bottom: 1px; text-align: center; font: 9px var(--mono); color: var(--orange-text); text-decoration: none; pointer-events: none; }

/* The same columns as the roll, including its label gutter, so a velocity bar sits under the
   note it belongs to. They did not line up before, which is part of why the hold buttons read
   as captions for the velocity bars rather than as a row of their own. */
.lane { display: grid; grid-template-columns: 26px repeat(16, 1fr); gap: 2px; margin-top: 4px; align-items: center; }
.lane-vel { margin-top: 8px; }
.lane-label { font: 8px var(--mono); font-style: normal; letter-spacing: .1em; color: var(--muted); text-align: right; padding-right: 4px; }
.vbar { display: flex; align-items: flex-end; height: 34px; background: var(--charcoal-2); border-radius: 3px; cursor: ns-resize; touch-action: none; }
.vbar b { display: block; width: 100%; background: var(--label); border-radius: 0 0 3px 3px; }
.vbar.rest b { background: var(--line); }
.vbar.head b { background: var(--blue); }
.vbar:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
/* A tie mark rather than the word "hold" sixteen times: the lane is named once, on the left. */
.lane-tie .tie { border: 1px solid var(--line-soft); background: var(--charcoal-2); border-radius: 3px; padding: 4px 3px; cursor: pointer; }
.lane-tie .tie::after { content: ""; display: block; height: 2px; border-radius: 1px; background: var(--line); }
.lane-tie .tie:hover { border-color: var(--blue); }
.lane-tie .tie.on { border-color: var(--orange); background: #241a12; }
.lane-tie .tie.on::after { background: var(--orange-text); }

/* Classic editor */
.views { display: flex; gap: 6px; }
.views button { border: 1px solid var(--line); background: transparent; color: var(--label); border-radius: 99px; padding: 7px 14px; font: 12px var(--ui); cursor: pointer; }
.views button[aria-selected="true"] { background: var(--charcoal-2); color: var(--text); border-color: var(--blue); }
body.view-classic .workbench { grid-template-columns: minmax(600px, 1.35fr) minmax(400px, .65fr); }
.cl-intro, .cl-foot { color: var(--muted); font-size: 12px; line-height: 1.55; max-width: 60ch; }
.cl-foot { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 12px; }
.cl-foot b { color: var(--text); font-weight: 500; }
.classic-panel h1 { margin-bottom: 18px; }

.cl-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: 18px 0 12px; }
.cl-gestures { display: flex; gap: 6px; flex-wrap: wrap; }
.cl-gestures button { border: 1px solid var(--line); background: var(--charcoal); color: var(--text); border-radius: var(--radius); padding: 7px 12px; font: 12px var(--ui); cursor: pointer; }
.cl-gestures button:hover:not(:disabled) { border-color: var(--blue); }
.cl-gestures button:disabled { opacity: .45; cursor: default; }
.cl-gestures button.on { border-color: var(--orange); background: #241a12; color: var(--orange-text); }
#clStatus { font: 10px var(--mono); color: var(--muted); }

.op-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.op-chip { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); background: var(--charcoal); overflow: hidden; }
.op-chip.carrier { border-color: #4a3524; }
.op-chip.sel { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue) inset; }
.op-chip.muted { opacity: .5; }
.op-sel { display: block; width: 100%; text-align: left; border: 0; background: transparent; color: var(--text); padding: 8px 9px 6px; cursor: pointer; }
.op-sel b { display: block; font: 500 12px var(--mono); }
.op-sel i { font: 9px var(--mono); font-style: normal; letter-spacing: .08em; color: var(--label); }
.op-chip.carrier .op-sel i { color: var(--orange-text); }
.op-sel small { display: block; font: 10px var(--mono); color: var(--muted); margin-top: 3px; }
.op-power { border: 0; border-top: 1px solid var(--line-soft); background: var(--charcoal-2); color: var(--muted); font: 9px var(--mono); letter-spacing: .1em; padding: 4px; cursor: pointer; }
.op-chip:not(.muted) .op-power { color: var(--blue); }
.op-power:hover { background: var(--line); }

.cl-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; align-items: start; }
.cl-op-head { display: flex; justify-content: space-between; align-items: baseline; font: 11px var(--mono); letter-spacing: .1em; color: var(--orange-text); margin-bottom: 8px; }
.cl-op-head span { color: var(--muted); letter-spacing: 0; }
.cl-group { border: 1px solid var(--line); border-radius: var(--radius); background: var(--charcoal); padding: 10px 12px 12px; margin-bottom: 10px; }
.cl-group h5 { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 0 0 8px; font: 10px var(--mono); letter-spacing: .1em; color: var(--label); font-weight: 400; }
.cl-note { display: block; font: 10px var(--mono); color: var(--muted); margin-top: 6px; }
.eg-copy { color: var(--muted); font: 10px var(--mono); }
.eg-copy select, .pr-choice select { background: var(--charcoal-2); color: var(--text); border: 1px solid var(--line); border-radius: 4px; font: 11px var(--mono); padding: 3px 4px; }

.pr { display: grid; grid-template-columns: 1fr 88px 46px 52px; align-items: center; gap: 8px; padding: 3px 0; }
.pr-choice { grid-template-columns: 1fr auto; }
.pr label { display: flex; align-items: center; gap: 6px; font: 11px var(--ui); color: var(--text); font-weight: 400; }
.pr label b { font: 9px var(--mono); color: var(--muted); border: 1px solid var(--line); border-radius: 3px; padding: 0 3px; font-weight: 400; }
.pr output { font: 11px var(--mono); color: var(--label); text-align: right; }
.pr-range { width: 100%; accent-color: var(--blue); height: 16px; }
.pr-num { width: 100%; background: var(--charcoal-2); border: 1px solid var(--line); border-radius: 4px; color: var(--text); font: 11px var(--mono); padding: 3px 4px; text-align: right; }
.pr-num:focus, .pr-range:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.pr-num { cursor: ns-resize; }
.cl-cols.dragging, .dragging .pr-num { user-select: none; }
.dragging { cursor: ns-resize; }

.eg-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 6px; }
.eg-cell { display: flex; align-items: center; gap: 5px; }
.eg-cell span { font: 10px var(--mono); color: var(--label); width: 22px; }
.eg-graph { width: 100%; height: 56px; margin-top: 4px; background: var(--black); border: 1px solid var(--line-soft); border-radius: 4px; }
.eg-line { fill: none; stroke: var(--orange-text); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.eg-release { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }

@media (max-width: 1180px) {
  body.view-classic .workbench { grid-template-columns: 1fr; }
  body.view-classic .composer { border-right: 0; border-bottom: 1px solid var(--line); padding-right: 0; }
}
@media (max-width: 760px) {
  .cl-cols { grid-template-columns: 1fr; }
  .op-strip { grid-template-columns: repeat(3, 1fr); }
  .pr { grid-template-columns: 1fr 70px 46px; }
  .pr output { display: none; }
  .pr-choice { grid-template-columns: 1fr auto; }
  .views button { padding: 6px 10px; font-size: 11px; }
}

footer { height: 54px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; color: var(--muted); font: 10px var(--mono); letter-spacing: .1em; }

@media (max-width: 900px) {
  .shell { padding: 0 16px; }
  .workbench { display: block; }
  .composer { border-right: 0; border-bottom: 1px solid var(--line); padding: 40px 0; }
  .result { padding: 32px 0; }
  h1 { margin-bottom: 32px; }
  .operators { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  header .status { display: none; }
  .controls { display: block; }
  .primary { width: 100%; margin-top: 22px; }
  .sliders { grid-template-columns: 1fr; }
  .algorithm-card { grid-template-columns: 1fr; }
  .algo-meta { padding: 14px; flex-direction: row; flex-wrap: wrap; align-items: center; border-right: 0; border-bottom: 1px solid var(--line); }
  .algo-meta strong { font-size: 36px; }
  .algo-key { margin: 0; grid-template-columns: 1fr 1fr; flex: 1 1 100%; }
  .metrics { grid-template-columns: 1fr; }
  .metrics div { border-right: 0; border-bottom: 1px solid var(--line); }
  .download-row { flex-wrap: wrap; }
  .download-row small { display: none; }
  .result-head input { font-size: 22px; width: 180px; }
  .keyboard { height: 70px; }
  .key.black::before { width: 14px; left: -7px; height: 42px; }
  .measure { font-size: 10px; }
  .cart-cols { grid-template-columns: 1fr; }
  .roll { grid-template-columns: 18px repeat(16, 1fr); gap: 1px; }
  .lane { gap: 1px; grid-template-columns: 18px repeat(16, 1fr); }
  .lane-label { font-size: 0; }
  .loop-controls { gap: 8px; }
}