/* ──────────────────────────────────────────────────────────────────────
 Youphony, visual system

 Dark, near-black field with a violet cast; color is scarce and neon. The
 rule that keeps "bright" from becoming "busy": at any moment exactly ONE
 element is at full saturation (the next thing to press) and exactly ONE
 thing moves (the playhead, or the hero when idle). Everything else is
 structure at 3–8% white.

 Glow does the work borders used to. Hairlines are 1px at 7% white; the
 color lives in soft outer shadows, so panels read as lit rather than
 outlined and the screen stays calm at a glance.

 LAYOUT RULE: fits the window with no page scroll, down to 1024x600. Every
 column is elastic, every panel scrolls inside itself, the roll takes what
 is left.
 ────────────────────────────────────────────────────────────────────── */

:root {
 --bg: #07080F;
 --bg-2: #0C0E1A;
 --bg-3: #12152410;
 --panel: rgba(255,255,255.035);
 --panel-2: rgba(255,255,255.055);
 --line: rgba(255,255,255.075);
 --line-2: rgba(255,255,255.14);

 --ink: #E9EDFA;
 --dim: #8D96B4;
 --faint: #5A6280;
 --ghost: #3C4360;

 --cyan: #22E4FF;
 --cyan-d: rgba(34,228,255.16);
 --violet: #A855F7;
 --violet-d: rgba(168,85,247.16);
 --lime: #3DFFA8;
 --amber: #FFC145;
 --rose: #FF4D6D;

 --r-s: 7px; --r: 11px; --r-l: 16px;
 --bar-h: 46px;
 --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
 --body: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
 --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
 --ease: cubic-bezier(.2.8.25,1);
 color-scheme: dark;
}

* { box-sizing: border-box; min-width: 0; }
[hidden] { display: none !important; }

html, body { height: 100%; height: 100dvh; margin: 0; overflow: hidden; }
body {
 background:
 radial-gradient(1100px 620px at 12% -14%, rgba(34,228,255.055), transparent 62%)
 radial-gradient(900px 520px at 92% -6%, rgba(168,85,247.05), transparent 60%)
 var(--bg);
 color: var(--ink);
 font: 400 14px/1.5 var(--body);
 -webkit-font-smoothing: antialiased;
 display: flex; flex-direction: column;
}

h1,h2,h3 { font-family: var(--display); margin: 0; letter-spacing: -.015em; font-weight: 700; }
h1 { font-size: clamp(26px, 3.3vw, 48px); line-height: .98; font-variation-settings: "wdth" 106; }
h2 { font-size: 18px; }
h3 { font-size: 9.5px; text-transform: uppercase; letter-spacing: .16em; color: var(--cyan);
 font-variation-settings: "wdth" 112; display: flex; align-items: baseline; gap: 7px; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.eyebrow { font-family: var(--display); font-size: 10px; font-weight: 600; text-transform: uppercase;
 letter-spacing: .22em; color: var(--cyan); margin: 0 0 10px; }
.lede { color: var(--dim); font-size: 14.5px; max-width: 52ch; margin: 14px 0 0; }
.lede b { color: var(--ink); font-weight: 600; }
.fineprint { font-size: 11px; line-height: 1.5; color: var(--faint); margin: 10px 0 0; }
.fineprint b { color: var(--dim); font-weight: 600; }
.fineprint.warn { color: var(--amber); }
.panel-help { font-size: 11.5px; line-height: 1.5; color: var(--dim); margin: 0 0 12px; }
.hint { font-size: 10.5px; color: var(--ghost); }

/* ── motion ──────────────────────────────────────────────────────────── */
@keyframes rise { from { opacity: 0; transform: translateY(6px) } }
@keyframes pop { from { opacity: 0; transform: translateY(14px) scale(.97) } }
@keyframes fade { from { opacity: 0 } }
@keyframes breathe{ 0%,100%{opacity:1} 50%{opacity:.3} }
@keyframes ringPulse {
 0% { box-shadow: 0 0 0 0 rgba(34,228,255.34), 0 0 14px rgba(34,228,255.22) }
 70% { box-shadow: 0 0 0 9px rgba(34,228,255,0), 0 0 22px rgba(34,228,255.3) }
 100% { box-shadow: 0 0 0 0 rgba(34,228,255,0), 0 0 14px rgba(34,228,255.22) }
}
@keyframes sweep { from { transform: translateX(-120%) } to { transform: translateX(220%) } }
@keyframes scan { from { background-position: 0 0 } to { background-position: 0 -220px } }

/* A single traveling highlight on primary controls. Not decoration: it is
 what marks the one control that is the obvious next thing to press. */
.sweepable { position: relative; overflow: hidden; isolation: isolate; }
.sweepable::after {
 content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
 background: linear-gradient(105deg, transparent 35%, rgba(255,255,255.30) 50%, transparent 65%);
 transform: translateX(-120%);
}
.sweepable:hover::after { animation: sweep .62s var(--ease); }

/* ── top bar ─────────────────────────────────────────────────────────── */
.bar { height: var(--bar-h); flex: none; display: flex; align-items: center; gap: 9px;
 padding: 0 12px; border-bottom: 1px solid var(--line);
 background: linear-gradient(rgba(7,8,15.94), rgba(7,8,15.72));
 backdrop-filter: blur(18px); position: relative; z-index: 20; }
.bar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
 background: linear-gradient(90deg, transparent, rgba(34,228,255.5), rgba(168,85,247.4), transparent); }
.bar-spacer { flex: 1; }
.mark { display: flex; align-items: center; gap: 9px; flex: none; }
.mark-name { font-family: var(--display); font-weight: 700; font-size: 13px; white-space: nowrap;
 background: linear-gradient(92deg, var(--cyan), var(--violet));
 -webkit-background-clip: text; background-clip: text; color: transparent; }
.mark-keys { display: flex; align-items: flex-end; gap: 2px; height: 16px; }
.mark-keys i { width: 3px; height: 16px; border-radius: 1px; background: var(--ghost); }
.mark-keys i:nth-child(1).mark-keys i:nth-child(2) { height: 10px; background: var(--cyan);
 box-shadow: 0 0 8px rgba(34,228,255.7); }
.mark-keys i:nth-child(3) { margin-left: 2px; }

.lamp { display: inline-flex; align-items: center; gap: 6px; font: 600 10px/1 var(--display);
 letter-spacing: .09em; text-transform: uppercase; color: var(--rose); white-space: nowrap;
 padding: 5px 10px 5px 8px; border: 1px solid rgba(255,77,109.4); border-radius: 99px;
 background: rgba(255,77,109.1); box-shadow: 0 0 18px rgba(255,77,109.2); }
.lamp i { width: 6px; height: 6px; border-radius: 50%; background: var(--rose);
 box-shadow: 0 0 8px var(--rose); animation: breathe 1.5s ease-in-out infinite; }
.chip { font: 500 10.5px/1 var(--mono); color: var(--dim); background: rgba(255,255,255.04);
 border: 1px solid var(--line); border-radius: 99px; padding: 6px 10px; white-space: nowrap;
 display: inline-flex; align-items: center; gap: 6px; }
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan);
 box-shadow: 0 0 7px var(--cyan); animation: breathe 2s ease-in-out infinite; }
.chip.done::before { background: var(--lime); box-shadow: 0 0 7px var(--lime); animation: none; }
.chip.bad { color: #FFC4CE; border-color: rgba(255,77,109.4); }
.chip.bad::before { background: var(--rose); box-shadow: 0 0 7px var(--rose); animation: none; }

/* ── shell ───────────────────────────────────────────────────────────── */
.shell { flex: 1; min-height: 0; display: grid; gap: 8px; padding: 8px;
 grid-template-columns: clamp(200px, 21vw, 292px) minmax(260px, 1fr) clamp(198px, 20vw, 284px); }
.rail { display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow: hidden; }

/* One panel at a time.
 *
 * Stacking Shape it, Start from and the pattern bank into one column left the
 * bank squashed to seventy pixels with four and a half thousand pixels of list
 * inside it, and the rail reported that it fitted - so nothing could scroll to
 * it and the bank was simply unreachable. Tabs give each panel the whole rail
 * which also scales: instruments and tracks become more tabs rather than more
 * things fighting for the same column. */
.rail-tabs { display: flex; gap: 3px; padding: 3px; flex: none;
 background: var(--panel); border: 1px solid var(--line); border-radius: 999px; }
.rtab { flex: 1; padding: 7px 4px; border: 0; border-radius: 999px; background: transparent;
 color: var(--faint); font: 700 10px/1 var(--display); letter-spacing: .1em;
 text-transform: uppercase; cursor: pointer; transition: all .16s; }
.rtab:hover { color: var(--ink); background: rgba(255,255,255.05); }
.rtab.is-on { color: #04121A; background: var(--cyan);
 box-shadow: 0 0 16px rgba(34,228,255.4); }
.rail-body { position: relative; flex: 1; min-height: 0; }
.rpanel { position: absolute; inset: 0; display: none; flex-direction: column;
 overflow-y: auto; overscroll-behavior: contain;
 background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-l);
 padding: 12px; }
.rpanel.is-on { display: flex; animation: fade .2s both; }
.blk { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-l);
 padding: 12px; backdrop-filter: blur(20px); min-height: 0;
 box-shadow: 0 18px 44px -30px #000, inset 0 1px 0 rgba(255,255,255.045); }
.blk h3 { margin-bottom: 10px; }
.count { color: var(--ghost); font-size: 9.5px; letter-spacing: 0; text-transform: none; }

/* ── source buttons ──────────────────────────────────────────────────── */
.src-btn { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
 padding: 10px; margin-bottom: 7px; cursor: pointer; font: inherit; color: var(--ink);
 background: rgba(255,255,255.028); border: 1px solid var(--line); border-radius: var(--r);
 transition: border-color .18s, background .18s, box-shadow .18s, transform .18s var(--ease); }
.src-btn:hover { border-color: rgba(34,228,255.55); background: rgba(34,228,255.06);
 box-shadow: 0 0 22px -6px rgba(34,228,255.5); transform: translateY(-1px); }
.src-btn strong { display: block; font: 600 13px/1.2 var(--body); }
.src-btn small { display: block; font-size: 10.5px; color: var(--dim); margin-top: 2px; }
.src-ico { flex: none; width: 30px; height: 30px; display: grid; place-items: center;
 border-radius: 50%; background: var(--cyan-d); border: 1px solid rgba(34,228,255.4); }
.src-ico svg { width: 17px; height: 17px; fill: none; stroke: var(--cyan);
 stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.src-btn.rec .src-ico { background: rgba(255,77,109.13); border-color: rgba(255,77,109.45); }
.src-btn.rec .src-ico svg { fill: var(--rose); stroke: none; }
.src-btn.rec:hover { border-color: rgba(255,77,109.55); background: rgba(255,77,109.07);
 box-shadow: 0 0 22px -6px rgba(255,77,109.55); }

/* ── pattern bank ────────────────────────────────────────────────────── */
.bank { flex: 1; min-height: 0; display: flex; flex-direction: column;
 overflow: hidden; }
/* Everything below the list scrolls with it rather than being cut off at
 the bottom of the rail. */
.bank-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden;
 overscroll-behavior: contain;
 display: flex; flex-direction: column; margin: 0 -3px; padding: 0 3px; }
/* The wrapper owns the scrolling; a second scrollbar inside it is noise. */
.bank-scroll .patlist { flex: 0 0 auto; max-height: none; overflow: visible; }
.search { position: relative; margin-bottom: 8px; flex: none; }
.search > svg { position: absolute; left: 9px; top: 50%; transform: translateY(-50%);
 width: 14px; height: 14px; fill: none; stroke: var(--faint); stroke-width: 1.8;
 stroke-linecap: round; pointer-events: none; }
.search input { width: 100%; padding: 8px 30px 8px 29px; font: 400 12.5px/1 var(--body);
 color: var(--ink); background: rgba(255,255,255.04); border: 1px solid var(--line);
 border-radius: var(--r-s); transition: border-color .18s, box-shadow .18s; }
.search input::placeholder { color: var(--ghost); }
.search input::-webkit-search-cancel-button { display: none; }
.search input:focus { border-color: var(--cyan); outline: none;
 box-shadow: 0 0 0 3px rgba(34,228,255.13), 0 0 18px -6px rgba(34,228,255.7); }
.search-x { position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
 width: 20px; height: 20px; border-radius: 50%; border: 0; cursor: pointer;
 background: rgba(255,255,255.07); color: var(--dim); font-size: 13px; line-height: 1;
 display: grid; place-items: center; transition: .16s; }
.search-x:hover { background: rgba(255,77,109.2); color: #FFC4CE; }

.chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; flex: none; }
.pchip { font: 600 10px/1 var(--body); padding: 5px 9px; border-radius: 99px; cursor: pointer;
 color: var(--dim); background: transparent; border: 1px solid var(--line);
 transition: .16s var(--ease); }
.pchip:hover { color: var(--ink); border-color: var(--line-2); }
.pchip.is-on { background: var(--cyan); border-color: var(--cyan); color: #04121A;
 box-shadow: 0 0 16px -3px rgba(34,228,255.75); }

.patlist { flex: 1; min-height: 60px; overflow-y: auto; overscroll-behavior: contain;
 margin: 0 -3px; padding: 0 3px; }
.pat { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
 padding: 6px 8px; margin-bottom: 2px; cursor: pointer; font: inherit; color: var(--ink);
 background: transparent; border: 1px solid transparent; border-radius: var(--r-s);
 animation: rise .2s ease both; transition: background .14s, border-color .14s, box-shadow .14s; }
.pat:hover { background: rgba(34,228,255.07); border-color: rgba(34,228,255.32);
 box-shadow: 0 0 16px -8px rgba(34,228,255.8); }
.pat .pn { font: 600 12px/1.25 var(--body); color: var(--ink); }
.pat .ps { font-size: 10px; color: var(--faint); }
.pat .pnum { margin-left: auto; font: 500 9.5px/1 var(--mono); color: var(--ghost);
 background: rgba(255,255,255.05); padding: 3px 5px; border-radius: 99px; flex: none; }
.patlist .empty-msg { color: var(--faint); font-size: 11.5px; padding: 12px 6px; }

.bank-foot { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding-top: 8px;
 border-top: 1px solid var(--line); flex: none; flex-wrap: wrap; }
.mini { display: inline-flex; align-items: center; gap: 5px; font: 600 9px/1 var(--display);
 text-transform: uppercase; letter-spacing: .1em; color: var(--faint); }
.mini select { padding: 4px 5px; min-width: 0; width: 62px; font-size: 11px; }

/* ── suggestions ─────────────────────────────────────────────────────── */
.suggest { border: 1px solid rgba(168,85,247.32); background: rgba(168,85,247.07);
 border-radius: var(--r-s); padding: 8px 9px; margin-bottom: 9px; flex: none;
 box-shadow: 0 0 24px -14px rgba(168,85,247.9); animation: rise .24s var(--ease) both; }
.suggest-head { display: flex; align-items: center; justify-content: space-between;
 gap: 6px; margin-bottom: 7px; }
.suggest-head > span { font: 600 9px/1 var(--display); letter-spacing: .13em;
 text-transform: uppercase; color: var(--violet); }
.suggest-actions { display: flex; gap: 4px; }
.suggest-list { display: grid; gap: 4px; }
.sgg { display: block; width: 100%; text-align: left; cursor: pointer; font: inherit;
 background: rgba(255,255,255.04); border: 1px solid var(--line); border-radius: var(--r-s);
 padding: 6px 8px; color: var(--ink); transition: .16s; animation: rise .22s ease both; }
.sgg:hover { border-color: rgba(168,85,247.6); background: rgba(168,85,247.1);
 box-shadow: 0 0 16px -8px rgba(168,85,247.9); }
.sgg b { display: block; font: 600 11.5px/1.25 var(--body); }
.sgg small { display: block; font-size: 10px; color: var(--faint); }

/* ── shaper ──────────────────────────────────────────────────────────── */
.shaper { flex: none; margin-top: 8px; border-top: 1px solid var(--line); padding-top: 8px; }
.shaper > summary { cursor: pointer; list-style: none; display: flex; align-items: baseline;
 justify-content: space-between; gap: 8px;
 font: 600 9px/1 var(--display); letter-spacing: .13em; text-transform: uppercase;
 color: var(--cyan); }
.shaper > summary::-webkit-details-marker { display: none; }
.shaper > summary::before { content: "▸"; margin-right: 5px; transition: transform .2s; display: inline-block; }
.shaper[open] > summary::before { transform: rotate(90deg); }
.shaper-now { font-size: 9.5px; color: var(--ghost); letter-spacing: 0; text-transform: none;
 font-weight: 400; text-align: right; }
.opts { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 8px; margin-top: 9px;
 animation: rise .2s ease both; }
.opt { display: flex; flex-direction: column; gap: 3px; }
.opt > span { font: 600 8.5px/1 var(--display); letter-spacing: .1em; text-transform: uppercase;
 color: var(--faint); }
.opt select { width: 100%; max-width: none; padding: 4px 5px; font-size: 11px; }
.opt.wide { grid-column: 1 / -1; }
.opt .chk { margin: 0; font-size: 10.5px; }

/* ── stage ───────────────────────────────────────────────────────────── */
.stage { min-width: 0; min-height: 0; display: flex; flex-direction: column;
 background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-l);
 overflow: hidden; backdrop-filter: blur(20px);
 box-shadow: 0 22px 60px -34px #000, inset 0 1px 0 rgba(255,255,255.05); }

.playbar { flex: none; padding: 8px 10px; border-bottom: 1px solid var(--line);
 display: flex; flex-direction: column; gap: 7px; background: rgba(255,255,255.014); }
.pb-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pb-row.second { gap: 16px; row-gap: 10px; align-items: flex-end; }
.pb-row.edit-row { border-top: 1px dashed var(--line); padding-top: 8px; }
.zoomgrp { margin-left: auto; }
.sel-status { font-size: 10.5px; color: var(--faint); white-space: nowrap; }
.sel-status.right { margin-left: auto; }

.grp { display: inline-flex; flex-direction: column; gap: 4px; flex: none; }
.grp-cap { font: 600 8.5px/1 var(--display); text-transform: uppercase; letter-spacing: .14em;
 color: var(--faint); }
.zoom-pair { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; }

.transport { flex: none; display: flex; align-items: stretch; gap: 8px;
 padding: 7px 10px; border-bottom: 1px solid var(--line); background: rgba(255,255,255.014); }
.transport .lbtn.transport .clock.transport .chk { align-self: center; }
.clock { font-size: 12.5px; color: var(--dim); white-space: nowrap; flex: none; }
.posbar { position: relative; flex: 1 1 auto; min-width: 120px;
 border: 1px solid var(--line-2); border-radius: var(--r-s); overflow: hidden;
 background: rgba(0,0,0.35); cursor: pointer; transition: border-color .18s, box-shadow .18s; }
.posbar:hover { border-color: rgba(34,228,255.55); box-shadow: 0 0 20px -8px rgba(34,228,255.8); }
.posbar-cap { position: absolute; left: 8px; top: 3px; pointer-events: none;
 font: 600 8.5px/1 var(--display); letter-spacing: .13em; text-transform: uppercase;
 color: var(--faint); }
.srcwave { width: 100%; height: 46px; display: block; background: transparent; }
.ruler { width: 100%; height: 22px; display: block; background: rgba(255,255,255.02);
 border-bottom: 1px solid var(--line); flex: none; cursor: ew-resize; }
.rollwrap { position: relative; flex: 1 1 auto; min-height: 110px; background: #05060C; }
#roll { width: 100%; height: 100%; display: block; cursor: crosshair; }
.pedal { width: 100%; height: 38px; display: block; background: #05060C;
 border-top: 1px solid var(--line); flex: none; }

/* ── empty state / hero ──────────────────────────────────────────────── */
.empty { position: absolute; inset: 0; display: grid; place-items: center; padding: 3vh 4%;
 background:
 radial-gradient(700px 400px at 20% 20%, rgba(34,228,255.07), transparent 60%)
 radial-gradient(600px 380px at 82% 10%, rgba(168,85,247.06), transparent 58%)
 #05060C;
 overflow: hidden; }
#heroCanvas { position: absolute; inset: auto 0 0 0; width: 100%; height: 46%;
 opacity: .8; pointer-events: none;
 mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)
 linear-gradient(180deg, transparent, #000 22%);
 mask-composite: intersect; -webkit-mask-composite: source-in; }
.empty-copy { position: relative; max-width: 640px; width: 100%; align-self: start; padding-top: 1vh; }
/* The decorative note art occupies the lower half of the hero at full width
 which is where the buttons and the proof list also sit. Without this the
 bars ran straight through the words - most visibly through "Open a file"
 whose ghost style has no fill of its own. A scrim anchored to the text
 column keeps type on darkness while the art stays visible to its right. */
.empty-copy::before { content: ""; position: absolute; z-index: -1;
 inset: -26px -12% -34px -7%;
 background: linear-gradient(97deg, #05060C 0 62%, rgba(5,6,12.97) 74%
 rgba(5,6,12.72) 86%, rgba(5,6,12,0) 100%);
 pointer-events: none; }
.empty-copy h1 span { background: linear-gradient(92deg, var(--cyan), var(--violet) 70%);
 -webkit-background-clip: text; background-clip: text; color: transparent; }
.empty-cta { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.proof { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 7px; max-width: 56ch; }
.proof li { font-size: 11.5px; color: var(--dim); line-height: 1.45; padding-left: 15px; position: relative; }
.proof li::before { content: ""; position: absolute; left: 0; top: 6px; width: 6px; height: 6px;
 border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); opacity: .85; }
.proof b { color: var(--ink); font-weight: 600; }

/* ── inspector ───────────────────────────────────────────────────────── */
.insp { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-l);
 padding: 10px; backdrop-filter: blur(20px); overflow-y: auto; min-height: 0;
 display: flex; flex-direction: column;
 box-shadow: 0 18px 44px -30px #000, inset 0 1px 0 rgba(255,255,255.045); }
.tabs { display: flex; gap: 2px; padding: 3px; margin-bottom: 12px; flex: none; flex-wrap: wrap;
 background: rgba(0,0,0.3); border: 1px solid var(--line); border-radius: 99px; }
.tab { flex: 1; border: 0; background: transparent; cursor: pointer; border-radius: 99px;
 font: 600 10px/1 var(--body); color: var(--dim); padding: 7px 2px; min-width: 0;
 transition: .18s var(--ease); }
.tab:hover { color: var(--ink); }
.tab.is-on { background: var(--cyan); color: #04121A; box-shadow: 0 0 16px -3px rgba(34,228,255.8); }
.tabpanel { display: none; animation: rise .2s ease both; }
.tabpanel.is-on { display: block; }
.tabpanel hr { border: 0; border-top: 1px solid var(--line); margin: 13px 0; }
.voices { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 11px; }
.voice { padding: 7px 8px; border-radius: var(--r-s); border: 1px solid var(--line);
 background: rgba(255,255,255.03); color: var(--dim); cursor: pointer; text-align: left;
 font: 600 11px/1.25 var(--body); transition: .16s; }
.voice:hover { border-color: var(--line-2); color: var(--ink); }
.voice.is-on { background: var(--violet-d); border-color: var(--violet); color: #E4CCFF;
 box-shadow: 0 0 18px -8px rgba(168,85,247.9); }
.voice small { display: block; font-weight: 400; font-size: 9.5px; color: var(--faint); margin-top: 1px; }
.velcurve { width: 100%; height: 84px; display: block; background: rgba(0,0,0.3);
 border: 1px solid var(--line); border-radius: var(--r-s); margin-bottom: 11px; }
.assist-card { background: rgba(0,0,0.28); border: 1px solid var(--line);
 border-radius: var(--r-s); padding: 9px 10px; margin: 9px 0; font-size: 11.5px;
 color: var(--dim); line-height: 1.45; }
.assist-card b { color: var(--ink); font-weight: 600; }
.assist-card .ok { color: var(--lime); }
.assist-card .warn { color: var(--amber); }
.assist-card ul { margin: 6px 0 0; padding-left: 15px; }
.assist-card li { margin: 2px 0; font-family: var(--mono); font-size: 10.5px; }

/* ── controls ────────────────────────────────────────────────────────── */
.btn { font: 600 12.5px/1 var(--body); padding: 9px 15px; border-radius: 99px; cursor: pointer;
 border: 1px solid var(--line-2); background: rgba(255,255,255.05); color: var(--ink);
 white-space: nowrap; position: relative;
 transition: background .18s, border-color .18s, box-shadow .18s, transform .14s var(--ease); }
.btn:hover:not(:disabled) { background: rgba(255,255,255.09); border-color: rgba(34,228,255.5);
 box-shadow: 0 0 22px -8px rgba(34,228,255.8); transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(0) scale(.985); }
.btn:disabled { opacity: .3; cursor: not-allowed; }
.btn.primary { background: linear-gradient(96deg, var(--cyan), #5BD0FF); border-color: transparent;
 color: #04121A; font-weight: 700; box-shadow: 0 0 24px -6px rgba(34,228,255.85); }
.btn.primary:hover:not(:disabled) { box-shadow: 0 0 34px -4px rgba(34,228,255,1); }
.btn.ghost { background: transparent; }
.btn.sm { padding: 6px 11px; font-size: 11.5px; }
.btn.lg { padding: 12px 22px; font-size: 14px; }
.btn.full { width: 100%; margin-top: 8px; }
.btn.primary.danger { background: linear-gradient(96deg, var(--rose), #FF7A93);
 box-shadow: 0 0 24px -6px rgba(255,77,109.85); color: #2A0710; }

.lbtn { display: inline-flex; align-items: center; gap: 7px; flex: none; position: relative;
 padding: 7px 13px; border-radius: 99px; cursor: pointer; white-space: nowrap;
 font: 600 12px/1 var(--body); color: var(--ink);
 background: rgba(255,255,255.045); border: 1px solid var(--line);
 transition: .16s var(--ease); }
.lbtn:hover:not(:disabled) { border-color: rgba(34,228,255.5); background: rgba(34,228,255.09);
 box-shadow: 0 0 18px -8px rgba(34,228,255.9); }
.lbtn:active:not(:disabled) { transform: scale(.97); }
.lbtn:disabled { opacity: .3; cursor: not-allowed; }
.lbtn svg { width: 13px; height: 13px; fill: currentColor; flex: none; }
.lbtn.play { background: linear-gradient(96deg, var(--cyan), #5BD0FF); border-color: transparent;
 color: #04121A; box-shadow: 0 0 22px -6px rgba(34,228,255.85); }
.lbtn.play:hover { box-shadow: 0 0 32px -4px rgba(34,228,255,1); }
.lbtn.sm { padding: 5px 10px; font-size: 11px; }
.lbtn.sq { width: 30px; height: 30px; padding: 0; justify-content: center; font-size: 16px;
 border-radius: 50%; }
.lbtn.danger:hover:not(:disabled) { border-color: rgba(255,77,109.6); color: #FFC4CE;
 background: rgba(255,77,109.1); box-shadow: 0 0 18px -8px rgba(255,77,109.9); }

.seg { display: inline-flex; background: rgba(0,0,0.3); border: 1px solid var(--line);
 border-radius: 99px; padding: 3px; gap: 2px; }
.seg.wide { width: 100%; margin-bottom: 11px; } .seg.wide .seg-o { flex: 1; }
.seg-o { border: 0; background: transparent; color: var(--dim); cursor: pointer;
 font: 600 11px/1 var(--body); padding: 6px 12px; border-radius: 99px; white-space: nowrap;
 transition: .18s var(--ease); }
.seg-o:hover:not(:disabled):not(.is-on) { color: var(--ink); background: rgba(255,255,255.05); }
.seg-o.is-on { background: var(--cyan); color: #04121A; box-shadow: 0 0 16px -4px rgba(34,228,255.85); }
.seg-o:disabled { opacity: .3; cursor: not-allowed; }

.row { display: flex; align-items: center; justify-content: space-between; gap: 8px;
 margin-bottom: 8px; font: 600 9px/1.3 var(--display); text-transform: uppercase;
 letter-spacing: .12em; color: var(--faint); }
.row > span:first-child { flex: 1 1 auto; }
.row em { font-style: normal; font-size: 9px; color: var(--ghost); flex: none; }
.row-end { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
select, input[type=number] { font: 500 12px/1 var(--body); text-transform: none; letter-spacing: 0;
 background: rgba(255,255,255.05); color: var(--ink); flex: none;
 border: 1px solid var(--line); border-radius: var(--r-s); padding: 5px 7px; max-width: 132px;
 transition: border-color .16s, box-shadow .16s; }
select:hover, input[type=number]:hover { border-color: var(--line-2); }
select:focus, input:focus { outline: none; border-color: var(--cyan);
 box-shadow: 0 0 0 3px rgba(34,228,255.13); }
input[type=range] { -webkit-appearance: none; appearance: none; height: 4px; flex: none;
 width: 104px; background: rgba(255,255,255.1); border-radius: 2px; cursor: pointer; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px;
 border-radius: 50%; background: var(--cyan); border: 2px solid var(--bg); cursor: pointer;
 box-shadow: 0 0 10px rgba(34,228,255.9); transition: transform .14s; }
input[type=range]:hover::-webkit-slider-thumb { transform: scale(1.15); }
.chk { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--dim);
 cursor: pointer; margin-bottom: 8px; text-transform: none; letter-spacing: 0; white-space: nowrap; }
.chk.sm { font-size: 10.5px; margin: 0; color: var(--faint); }
.chk.nowrap { white-space: nowrap; margin: 0; }
.chk:hover { color: var(--ink); }
.chk input { accent-color: var(--cyan); }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* A small toggle switch, for on/off things that deserve to look like a switch */
.sw { position: relative; display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
 font-size: 10.5px; color: var(--faint); white-space: nowrap; }
.sw input { position: absolute; opacity: 0; width: 0; height: 0; }
.sw i { width: 28px; height: 16px; border-radius: 99px; background: rgba(255,255,255.1);
 border: 1px solid var(--line); position: relative; transition: .2s var(--ease); flex: none; }
.sw i::after { content: ""; position: absolute; left: 2px; top: 1.5px; width: 11px; height: 11px;
 border-radius: 50%; background: var(--faint); transition: .2s var(--ease); }
.sw input:checked + i { background: var(--cyan-d); border-color: var(--cyan);
 box-shadow: 0 0 14px -4px rgba(34,228,255.9); }
.sw input:checked + i::after { left: 14px; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.sw:hover { color: var(--dim); }

/* ── sheets ──────────────────────────────────────────────────────────── */
.scrim { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px;
 background: rgba(4,5,10.7); backdrop-filter: blur(6px); animation: fade .2s ease both; }
.sheet { width: min(540px, 94vw); max-height: 90dvh; overflow-y: auto;
 background: linear-gradient(rgba(18,21,36.98), rgba(10,12,22.98));
 border: 1px solid var(--line-2); border-radius: 18px; padding: 20px;
 box-shadow: 0 40px 90px -30px #000, 0 0 60px -30px rgba(34,228,255.5);
 animation: pop .26s var(--ease) both; }
.sheet.narrow { width: min(440px, 94vw); }
.sheet.wide { width: min(900px, 96vw); }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
 margin-bottom: 14px; }

.meter { position: relative; height: 8px; background: rgba(0,0,0.4); border-radius: 99px;
 overflow: hidden; border: 1px solid var(--line); margin-top: 4px; }
.meter-f { position: absolute; inset: 0 auto 0 0; width: 0%;
 background: linear-gradient(90deg, var(--lime), var(--cyan) 60%, var(--rose) 92%);
 transition: width .05s linear; box-shadow: 0 0 12px rgba(34,228,255.6); }
.meter-p { position: absolute; top: 0; bottom: 0; width: 2px; left: 0; background: var(--ink);
 opacity: .7; transition: left .12s ease-out; }
.meter-m { position: absolute; top: 0; bottom: 0; left: var(--at); width: 1px;
 background: rgba(255,255,255.2); }
.meter-legend { display: flex; justify-content: space-between; margin: 6px 0 12px;
 font-size: 10.5px; color: var(--faint); }
.clipw { color: var(--rose); font-weight: 600; text-transform: uppercase; letter-spacing: .07em; }
.recwave { width: 100%; height: 96px; display: block; border-radius: var(--r);
 background: rgba(0,0,0.35); border: 1px solid var(--line); margin-bottom: 14px; }
.rec-transport { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.timer { font-size: 22px; margin-left: auto; }
.mem { font-size: 10px; color: var(--ghost); text-align: right; margin-top: 5px; min-height: 13px; }
.btn-rec { display: inline-flex; align-items: center; gap: 10px; padding: 10px 20px 10px 12px;
 border-radius: 99px; cursor: pointer; font: 700 13px/1 var(--display); letter-spacing: .04em;
 text-transform: uppercase; color: #FFDDE4;
 background: rgba(255,77,109.14); border: 1px solid rgba(255,77,109.5);
 box-shadow: 0 0 24px -10px rgba(255,77,109.9); transition: .18s; }
.btn-rec:hover { background: rgba(255,77,109.25); box-shadow: 0 0 30px -8px rgba(255,77,109,1); }
.dot { width: 14px; height: 14px; border-radius: 50%; background: var(--rose);
 box-shadow: 0 0 10px var(--rose); }
.btn-rec.is-live .dot { animation: ringPulse 1.5s ease-out infinite; }
#review audio { width: 100%; margin-top: 14px; }

.stages { list-style: none; padding: 0; margin: 16px 0; display: grid; gap: 1px;
 background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.stage-row { position: relative; display: grid; grid-template-columns: 18px 1fr auto;
 align-items: center; gap: 11px; padding: 9px 13px; background: rgba(12,14,26.9);
 font-size: 12.5px; color: var(--faint); }
.stage-row .tick { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--line-2); }
.stage-row.is-on { color: var(--ink); }
.stage-row.is-on .tick { border-color: var(--cyan); background: var(--cyan-d);
 box-shadow: 0 0 10px var(--cyan); animation: breathe 1.3s ease-in-out infinite; }
.stage-row.is-done { color: var(--dim); }
.stage-row.is-done .tick { border-color: var(--lime); background: var(--lime);
 box-shadow: 0 0 8px var(--lime); }
.stage-bar { position: absolute; left: 0; bottom: 0; height: 2px; background: var(--cyan);
 width: 0; transition: width .2s; box-shadow: 0 0 8px var(--cyan); }
.stage-pct { font: 400 10px/1 var(--mono); color: var(--ghost); }
.warnbox { border: 1px solid rgba(255,193,69.3); background: rgba(255,193,69.07);
 border-radius: var(--r); padding: 11px 13px; margin-bottom: 14px; font-size: 12px; color: var(--dim); }
.warnbox p { margin: 0 0 6px; } .warnbox p:last-child { margin: 0; }

.pa-rules { margin: 8px 0 14px; padding-left: 17px; }
.pa-rules li { font-size: 11.5px; color: var(--dim); margin: 3px 0; }
.pa-consent p { margin: 0 0 8px; }
.pa-hud { display: flex; align-items: center; gap: 16px; margin-bottom: 10px; flex-wrap: wrap; }
.pa-score { font-size: 30px; color: var(--cyan); min-width: 3ch; text-shadow: 0 0 18px rgba(34,228,255.7); }
.pa-stat { display: flex; flex-direction: column; line-height: 1.1; }
.pa-stat b { font: 600 15px/1 var(--mono); color: var(--ink); }
.pa-stat small { font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.pa-canvas { width: 100%; height: min(52vh, 440px); display: block; background: #05060C;
 border: 1px solid var(--line); border-radius: var(--r); }
.pa-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px;
 margin-top: 10px; font-size: 11px; color: var(--faint); }
.pa-result { text-align: center; padding: 10px 0; }
.pa-grade { font: 700 78px/1 var(--display);
 background: linear-gradient(92deg, var(--cyan), var(--violet));
 -webkit-background-clip: text; background-clip: text; color: transparent; }
.pa-lines { font-size: 13px; color: var(--dim); margin-top: 8px; line-height: 1.7; }
.pa-lines b { color: var(--ink); }
.pa-best { font-size: 11.5px; color: var(--faint); margin-top: 10px; }

.toast { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 90;
 background: rgba(18,21,36.97); border: 1px solid rgba(34,228,255.35); border-radius: 99px;
 padding: 9px 18px; font-size: 12.5px; color: var(--ink);
 box-shadow: 0 16px 44px -14px #000, 0 0 30px -14px rgba(34,228,255.9);
 animation: rise .24s ease both; max-width: min(92vw, 640px); }
.toast.bad { border-color: rgba(255,77,109.5); color: #FFD3DB; }

/* ── responsive ──────────────────────────────────────────────────────── */
@media (max-width: 1140px) {
 .shell { grid-template-columns: clamp(190px, 24vw, 262px) minmax(0,1fr); }
 .insp { position: fixed; right: 8px; top: calc(var(--bar-h) + 8px); bottom: 8px;
 width: 264px; z-index: 30; box-shadow: 0 24px 70px -20px #000; }
}
@media (max-width: 880px) {
 html, body { overflow: auto; height: auto; }
 .shell { grid-template-columns: 1fr; }
 .insp { position: static; width: auto; }
 .rollwrap { height: 46vh; }
}
@media (max-height: 660px) {
 .srcwave { height: 36px; } .pedal { height: 30px; } .velcurve { height: 66px; }
 .proof { display: none; }
}
@media (prefers-reduced-motion: reduce) {
 *, *::before, *::after { animation-duration: .001ms !important;
 animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

.bank-sw { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }

/* Give the roll's own scrollbar room and keep the shaper legible when the
 pattern list is short. */
.shaper { padding-bottom: 2px; }
.bank .fineprint { margin-bottom: 2px; }

/* ── themed dropdowns ────────────────────────────────────────────────
 The native popup is drawn by the OS in its own colors, so on a dark page
 it comes back white on white. The real <select> keeps the value; this is
 what the user actually sees and clicks. */
.dd { position: relative; display: inline-flex; min-width: 0; }
.dd-native { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.dd-btn { display: inline-flex; align-items: center; gap: 8px; width: 100%; min-width: 0;
 justify-content: space-between; padding: 6px 9px; border-radius: 8px;
 border: 1px solid var(--line); background: rgba(255,255,255.035); color: var(--ink);
 font: 500 12px/1 var(--body); cursor: pointer; text-align: left;
 transition: border-color .15s, background .15s, box-shadow .15s; }
.dd-btn:hover { border-color: rgba(34,228,255.45); background: rgba(34,228,255.06); }
.dd-btn:focus-visible { outline: none; border-color: var(--cyan);
 box-shadow: 0 0 0 3px rgba(34,228,255.16); }
.dd-btn[disabled] { opacity: .45; cursor: default; }
.dd-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-caret { width: 7px; height: 7px; flex: none; border-right: 1.6px solid var(--cyan);
 border-bottom: 1.6px solid var(--cyan); transform: translateY(-2px) rotate(45deg); }
.dd-btn[aria-expanded="true"] .dd-caret { transform: translateY(1px) rotate(225deg); }
.dd-btn[aria-expanded="true"] { border-color: var(--cyan); background: rgba(34,228,255.08); }

.dd-menu { position: fixed; z-index: 9000; overflow-y: auto; overscroll-behavior: contain;
 padding: 5px; border-radius: 10px; border: 1px solid rgba(34,228,255.34);
 background: #0A0C16; color: var(--ink);
 box-shadow: 0 18px 44px rgba(0,0,0.66), 0 0 0 1px rgba(0,0,0.5), 0 0 26px rgba(34,228,255.1);
 opacity: 0; transform: translateY(-4px) scale(.985); transform-origin: top center;
 transition: opacity .12s ease, transform .12s cubic-bezier(.2.9.3,1); }
.dd-menu.is-in { opacity: 1; transform: none; }
.dd-item { display: block; width: 100%; text-align: left; padding: 7px 10px; border: 0;
 border-radius: 7px; background: transparent; color: var(--ink);
 font: 500 12px/1.25 var(--body); cursor: pointer; }
.dd-item:hover { background: rgba(34,228,255.12); color: #fff; }
.dd-item.is-on { background: rgba(34,228,255.17); color: #fff; box-shadow: inset 2px 0 0 var(--cyan); }
.dd-item[disabled] { opacity: .4; cursor: default; }
.mini .dd.opt .dd { width: 100%; }
.mini .dd-btn { padding: 4px 6px; font-size: 11px; }
.opt .dd-btn { padding: 5px 7px; font-size: 11px; }
.row .dd { flex: 1; }

/* ── pattern rows: hear it, or drag it where you want it ─────────────── */
.pat { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 8px;
 width: 100%; padding: 8px 9px 8px 6px; border-radius: 9px; border: 1px solid transparent;
 background: rgba(255,255,255.028); cursor: grab; text-align: left;
 animation: rise .3s both cubic-bezier(.2.9.3,1);
 transition: background .14s, border-color .14s, transform .14s; }
.pat:hover { background: rgba(34,228,255.07); border-color: rgba(34,228,255.3);
 transform: translateX(2px); }
.pat:active { cursor: grabbing; }
.pat-main { display: block; min-width: 0; border: 0; background: none; padding: 0;
 color: inherit; text-align: left; cursor: inherit; font: inherit; }
.pat .pn { display: block; font: 600 12.5px/1.25 var(--body); color: var(--ink); }
.pat .ps { display: block; font: 500 10.5px/1.3 var(--body); color: var(--faint); margin-top: 1px; }
.pat .pnum { font: 500 10px/1 var(--mono); color: var(--ghost); }

.pat-play { width: 22px; height: 22px; flex: none; display: grid; place-items: center;
 border-radius: 50%; border: 1px solid rgba(34,228,255.36); background: rgba(34,228,255.09);
 cursor: pointer; padding: 0; transition: background .14s, transform .14s, box-shadow .14s; }
.pat-play i { width: 0; height: 0; border-left: 6px solid var(--cyan);
 border-top: 4px solid transparent; border-bottom: 4px solid transparent;
 margin-left: 2px; transition: border-left-color .14s; }
.pat-play:hover { background: var(--cyan); box-shadow: 0 0 14px rgba(34,228,255.5); }
.pat-play:hover i { border-left-color: #041018; }
.pat-play.is-hit { animation: ringPulse .5s ease-out; }

/* Dragging a pattern: quiet everything that is not a drop target. */
body.is-dragging-pattern .patlist { opacity: .5; }
body.is-dragging-pattern #roll { box-shadow: inset 0 0 0 2px rgba(61,255,168.4); }

/* ── suggestion channels ─────────────────────────────────────────────── */
.chan { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0 7px; }
.chan-o { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px 3px 6px;
 border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255.03);
 font: 600 9.5px/1 var(--body); color: var(--faint); cursor: pointer; user-select: none;
 transition: all .14s; }
.chan-o input { width: 11px; height: 11px; accent-color: var(--violet); margin: 0; }
.chan-o:hover { border-color: rgba(168,85,247.45); color: var(--ink); }
.chan-o:has(input:checked) { border-color: rgba(168,85,247.6); color: #E9D5FF;
 background: rgba(168,85,247.13); box-shadow: 0 0 12px rgba(168,85,247.18); }

.sgg { display: grid; grid-template-columns: 22px 1fr; align-items: center; gap: 8px;
 width: 100%; padding: 7px 9px 7px 7px; border-radius: 9px;
 border: 1px solid rgba(168,85,247.22); background: rgba(168,85,247.06);
 cursor: grab; animation: rise .3s both cubic-bezier(.2.9.3,1); transition: all .14s; }
.sgg:hover { background: rgba(168,85,247.13); border-color: rgba(168,85,247.5); }
.sgg-main { border: 0; background: none; padding: 0; text-align: left; cursor: inherit;
 min-width: 0; }
.sgg b { display: block; font: 600 12px/1.25 var(--body); color: var(--ink); }
.sgg small { display: block; font: 500 10px/1.3 var(--body); color: var(--faint); margin-top: 1px; }
.sgg .pat-play { border-color: rgba(168,85,247.45); background: rgba(168,85,247.12); }
.sgg .pat-play i { border-left-color: var(--violet); }
.sgg .pat-play:hover { background: var(--violet); }
.sgg .pat-play:hover i { border-left-color: #12041C; }

/* ── note stepper ────────────────────────────────────────────────────── */
.step-seg .seg-o { min-width: 26px; font-size: 13px; line-height: 1; padding: 5px 7px; }
.grp-note { font: 500 9.5px/1 var(--body); color: var(--ghost); margin-top: 3px;
 max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The selection count belongs on the same line as the controls it describes. */
.edit-row .sel-status { margin-left: 6px; align-self: center; }

/* ── sketch ──────────────────────────────────────────────────────────── */
.draw-btn { display: inline-flex; align-items: center; gap: 6px; }
.draw-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor;
 stroke-width: 1.7; stroke-linecap: round; }
.draw-btn.is-on { border-color: var(--lime); color: #06120C;
 background: var(--lime); box-shadow: 0 0 18px rgba(61,255,168.45); }
.draw-btn.is-on svg { stroke: #06120C; }

.sketch-pick { position: absolute; right: 16px; top: 74px; width: 268px; z-index: 40;
 padding: 10px; border-radius: 12px; border: 1px solid rgba(61,255,168.4);
 background: rgba(8,14,12.96);
 box-shadow: 0 16px 44px rgba(0,0,0.6), 0 0 26px rgba(61,255,168.14);
 animation: rise .26s both cubic-bezier(.2.9.3,1); }
.sk-head { display: flex; align-items: center; justify-content: space-between; gap: 8px;
 margin-bottom: 8px; }
.sk-head > span { font: 700 9px/1 var(--display); letter-spacing: .14em;
 text-transform: uppercase; color: var(--lime); }
.sk-list { display: grid; gap: 5px; }
.sk-o { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 8px;
 padding: 7px 9px 7px 7px; border-radius: 9px; border: 1px solid var(--line);
 background: rgba(255,255,255.03); animation: rise .3s both cubic-bezier(.2.9.3,1);
 transition: all .14s; }
.sk-o:hover { border-color: rgba(61,255,168.5); background: rgba(61,255,168.09); }
.sk-main { border: 0; background: none; padding: 0; text-align: left; cursor: pointer;
 min-width: 0; }
.sk-main b { display: block; font: 600 12px/1.25 var(--body); color: var(--ink); }
.sk-main small { display: block; font: 500 10px/1.3 var(--body); color: var(--faint);
 margin-top: 1px; }
.sk-score { font: 600 10px/1 var(--mono); color: var(--lime); }
.sk-o .pat-play { border-color: rgba(61,255,168.45); background: rgba(61,255,168.1); }
.sk-o .pat-play i { border-left-color: var(--lime); }
.sk-o .pat-play:hover { background: var(--lime); }
.sk-o .pat-play:hover i { border-left-color: #06120C; }
.sk-foot { margin: 8px 2px 0; font: 500 10px/1.4 var(--body); color: var(--ghost); }

/* One scrollbar in the rail, never two. */
.bank-scroll .suggest.bank-scroll .shaper { overflow: visible; max-height: none; }

/* Drawing is a third way to start, so it looks like one. */
.src-btn.draw { position: relative; }
.src-btn.draw .src-ico svg { fill: none; stroke: currentColor; stroke-width: 2.2;
 stroke-linecap: round; }
.src-btn.draw.is-on { border-color: rgba(61,255,168.55); background: rgba(61,255,168.09);
 box-shadow: 0 0 20px rgba(61,255,168.16); }
.src-btn.draw.is-on .src-ico { color: var(--lime); border-color: rgba(61,255,168.5);
 background: rgba(61,255,168.14); }
.src-sw { position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
 width: 30px; height: 17px; border-radius: 999px; border: 1px solid var(--line-2);
 background: rgba(255,255,255.05); transition: all .2s; }
.src-sw i { position: absolute; left: 2px; top: 1.5px; width: 12px; height: 12px;
 border-radius: 50%; background: var(--faint); transition: all .2s cubic-bezier(.2.9.3,1); }
.src-btn.draw.is-on .src-sw { border-color: var(--lime); background: rgba(61,255,168.22); }
.src-btn.draw.is-on .src-sw i { left: 15px; background: var(--lime);
 box-shadow: 0 0 10px rgba(61,255,168.9); }
.draw-note { border-left: 2px solid rgba(61,255,168.5); padding-left: 8px;
 animation: rise .3s both; }
.sk-acts { display: flex; gap: 4px; }
#skKeep { border-color: rgba(61,255,168.5); color: var(--lime); }
#skKeep:hover { background: var(--lime); color: #06120C; }
.sk-stop { width: 100%; margin-top: 8px; justify-content: center; }

/* ── composer ────────────────────────────────────────────────────────── */
.src-btn.compose .src-ico svg { fill: none; stroke: currentColor; stroke-width: 2;
 stroke-linecap: round; }
.src-btn.compose:hover { border-color: rgba(168,85,247.5); background: rgba(168,85,247.07); }
.src-btn.compose:hover .src-ico { color: var(--violet); border-color: rgba(168,85,247.5);
 background: rgba(168,85,247.13); }

.sheet.wide { max-width: 940px; width: min(94vw, 940px); }
.sheet-lede { margin: 0 0 14px; font: 500 12px/1.5 var(--body); color: var(--dim); max-width: 74ch; }
.cmp-grid { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(300px, 1.35fr);
 gap: 16px; align-items: start; }
@media (max-width: 780px) { .cmp-grid { grid-template-columns: 1fr; } }

.cmp-left { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.search.sm input { font-size: 12px; }
.cmp-list { display: grid; gap: 4px; max-height: 46vh; overflow-y: auto;
 overscroll-behavior: contain; padding-right: 3px; }
.cmp-o { display: block; width: 100%; text-align: left; padding: 7px 10px; border-radius: 8px;
 border: 1px solid transparent; background: rgba(255,255,255.028); cursor: pointer;
 animation: rise .26s both cubic-bezier(.2.9.3,1); transition: all .13s; }
.cmp-o:hover { background: rgba(168,85,247.09); border-color: rgba(168,85,247.34); }
.cmp-o.is-on { background: rgba(168,85,247.16); border-color: rgba(168,85,247.62);
 box-shadow: 0 0 14px rgba(168,85,247.2); }
.cmp-o b { display: block; font: 600 12.5px/1.25 var(--body); color: var(--ink); }
.cmp-o small { display: block; font: 500 10px/1.3 var(--mono); color: var(--faint); margin-top: 2px; }

.cmp-right { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cmp-card { padding: 13px 14px; border-radius: 12px; border: 1px solid rgba(168,85,247.28);
 background: rgba(168,85,247.055); }
.cmp-card h3 { margin: 0 0 5px; font: 700 16px/1.2 var(--display); color: var(--ink);
 letter-spacing: -.01em; }
.cmp-why { margin: 0 0 11px; font: 500 12px/1.55 var(--body); color: var(--dim); }
.cmp-facts { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.fact { display: inline-flex; align-items: baseline; gap: 5px; padding: 3px 8px;
 border-radius: 999px; background: rgba(255,255,255.05);
 font: 600 10.5px/1.4 var(--body); color: var(--ink); }
.fact i { font: 600 8.5px/1 var(--display); letter-spacing: .1em; text-transform: uppercase;
 color: var(--faint); font-style: normal; }
.cmp-progs { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.cmp-progs > i { font: 600 8.5px/1 var(--display); letter-spacing: .1em; text-transform: uppercase;
 color: var(--faint); font-style: normal; margin-right: 3px; }
.prog { padding: 3px 8px; border-radius: 6px; border: 1px solid rgba(168,85,247.3);
 font: 500 10.5px/1.4 var(--body); color: #D8B4FE; }

.cmp-controls { display: flex; flex-direction: column; gap: 9px; }
.slider-wrap { display: flex; align-items: center; gap: 9px; flex: 1; }
.slider-wrap input[type=range] { flex: 1; accent-color: var(--violet); }
.slider-val { font-size: 12px; color: var(--ink); min-width: 38px; text-align: right; }
.cmp-actions { display: flex; gap: 8px; align-items: center; }
.cmp-actions .btn.primary { flex: 1; justify-content: center; }
.cmp-plan { padding: 11px 12px; border-radius: 10px; border: 1px solid var(--line);
 background: rgba(255,255,255.03); animation: rise .3s both; }
.plan-head { font: 600 11.5px/1.4 var(--mono); color: var(--cyan); margin-bottom: 8px; }
.plan-secs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.plan-s { display: inline-flex; align-items: baseline; gap: 5px; padding: 3px 8px;
 border-radius: 6px; background: rgba(34,228,255.09); border: 1px solid rgba(34,228,255.22); }
.plan-s b { font: 600 10.5px/1.3 var(--body); color: var(--ink); }
.plan-s i { font: 500 9.5px/1 var(--mono); color: var(--faint); font-style: normal; }
.cmp-plan .fineprint { margin: 0; }
.genre-row { margin-top: 2px; }
.genre-row > span { font: 600 9px/1 var(--display); letter-spacing: .12em; text-transform: uppercase;
 color: var(--faint); flex: none; }

/* Shape it decides how every pattern below it will sound, so it sits above
 them and reads as a heading rather than a footnote. */
.shaper.up { margin: 0 0 9px; padding: 9px 10px; border-radius: 10px;
 border: 1px solid rgba(34,228,255.24); background: rgba(34,228,255.05); }
.shaper.up > summary { font: 700 9.5px/1 var(--display); letter-spacing: .13em;
 text-transform: uppercase; color: var(--cyan); display: flex; align-items: center;
 gap: 8px; cursor: pointer; list-style: none; }
.shaper.up > summary::-webkit-details-marker { display: none; }
.shaper.up > summary::after { content: ''; width: 6px; height: 6px; margin-left: auto;
 border-right: 1.6px solid var(--cyan); border-bottom: 1.6px solid var(--cyan);
 transform: translateY(-2px) rotate(45deg); transition: transform .18s; }
.shaper.up[open] > summary::after { transform: translateY(1px) rotate(225deg); }
.shaper.up .shaper-now { font-size: 10px; letter-spacing: 0; text-transform: none;
 color: var(--faint); font-weight: 500; }
.shaper.up .opts { margin-top: 9px; }

/* Three actions did not fit on one line, so "Start over" was clipped off the
 edge of the panel. */
.sk-head { flex-wrap: wrap; row-gap: 6px; }
.sk-acts { flex-wrap: wrap; }
.sketch-pick { width: 292px; }
.shaper.up .opt-note.shaper.up .fineprint { white-space: normal; overflow-wrap: anywhere; }

/* Drawing and deciding are two steps, so they are two buttons. */
.submit-btn { border-color: rgba(61,255,168.34); }
.submit-btn[disabled] { opacity: .4; }
.submit-btn.is-ready { border-color: var(--lime); color: #06120C; background: var(--lime);
 box-shadow: 0 0 16px rgba(61,255,168.4); animation: breathe 2.4s ease-in-out infinite; }
.submit-btn.is-ready:hover { filter: brightness(1.08); }

/* Shape it now heads the rail, so it reads as a panel not a disclosure. */
.shape-blk { flex: none; }
.shape-blk h3 { display: flex; align-items: baseline; gap: 8px; }
.shape-blk .shaper-now { font: 500 10px/1 var(--mono); letter-spacing: 0; text-transform: none;
 color: var(--faint); }
.blk-note { margin: -2px 0 9px; font: 500 10.5px/1.4 var(--body); color: var(--faint); }
.shape-blk .opts { margin: 0; }

/* The rail is narrow; long option labels have to wrap rather than run off. */
.shape-blk .opt.wide .chk { align-items: flex-start; line-height: 1.45; }
.shape-blk .opt.wide .chk.shape-blk .opt.wide > span { white-space: normal;
 overflow-wrap: anywhere; }
.shape-blk .opt { min-width: 0; }
.shape-blk .opts { grid-template-columns: 1fr 1fr; }
.shape-blk .opt.wide { grid-column: 1 / -1; }

/* Being able to check the input before recording is the whole point. */
.mic-check { display: flex; align-items: center; gap: 10px; margin: 8px 0 2px; flex-wrap: wrap; }
.mic-status { font: 500 11px/1.45 var(--body); color: var(--faint); flex: 1; min-width: 180px; }
.mic-status.good { color: var(--lime); }
.mic-status.bad { color: var(--amber); }

/* ── sliders instead of dropdowns ────────────────────────────────────── */
.slider-opt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.opt-lab { display: flex; align-items: baseline; justify-content: space-between; gap: 6px;
 font: 600 8.5px/1 var(--display); letter-spacing: .11em; text-transform: uppercase;
 color: var(--faint); }
.opt-val { font: 600 11px/1.2 var(--body); letter-spacing: 0; text-transform: none;
 color: var(--cyan); text-align: right; }
.slider-opt.is-random .opt-val { color: var(--violet); }
.opt-row { display: flex; align-items: center; gap: 7px; }
.opt-row input[type=range] { flex: 1; min-width: 0; }
.opt-ticks { display: flex; justify-content: space-between; padding: 0 2px; }
.opt-ticks i { width: 3px; height: 3px; border-radius: 50%; background: var(--ghost);
 transition: background .15s, transform .15s; }
.opt-ticks i.on { background: var(--cyan); transform: scale(1.6);
 box-shadow: 0 0 6px rgba(34,228,255.9); }
.slider-opt.is-random .opt-ticks i { background: rgba(168,85,247.35); }
.opt-note { font: 500 9.5px/1.3 var(--body); color: var(--ghost); }
.dice { width: 22px; height: 22px; flex: none; border-radius: 6px; padding: 0;
 border: 1px solid var(--line); background: rgba(255,255,255.04); color: var(--faint);
 font-size: 12px; line-height: 1; cursor: pointer; transition: all .14s; }
.dice:hover { border-color: rgba(168,85,247.55); color: var(--violet); }
.dice.is-on { border-color: var(--violet); background: rgba(168,85,247.2); color: #E9D5FF;
 box-shadow: 0 0 12px rgba(168,85,247.35); }
.wide-btn { grid-column: 1 / -1; justify-content: center; margin-top: 2px; }

input[type=range] { -webkit-appearance: none; appearance: none; height: 18px;
 background: transparent; cursor: pointer; }
input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 999px;
 background: linear-gradient(90deg, rgba(34,228,255.5), rgba(34,228,255.14)); }
input[type=range]::-moz-range-track { height: 4px; border-radius: 999px;
 background: linear-gradient(90deg, rgba(34,228,255.5), rgba(34,228,255.14)); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none;
 width: 13px; height: 13px; margin-top: -4.5px; border-radius: 50%; background: var(--cyan);
 border: 2px solid #07080F; box-shadow: 0 0 10px rgba(34,228,255.75); transition: transform .12s; }
input[type=range]::-moz-range-thumb { width: 13px; height: 13px; border-radius: 50%;
 background: var(--cyan); border: 2px solid #07080F;
 box-shadow: 0 0 10px rgba(34,228,255.75); }
input[type=range]:hover::-webkit-slider-thumb { transform: scale(1.15); }
input[type=range]:disabled { opacity: .45; cursor: default; }
.slider-opt.is-random input[type=range]::-webkit-slider-thumb { background: var(--violet); }

/* ── position bar handle ─────────────────────────────────────────────── */
.pos-track { position: absolute; left: 0; right: 0; bottom: 5px; height: 3px;
 background: rgba(255,255,255.1); border-radius: 999px; pointer-events: none; }
.pos-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px;
 background: linear-gradient(90deg, rgba(34,228,255.5), var(--cyan)); }
.pos-knob { position: absolute; bottom: 6.5px; width: 13px; height: 13px; margin-left: -6.5px;
 border-radius: 50%; background: var(--cyan); border: 2px solid #07080F; cursor: grab;
 box-shadow: 0 0 12px rgba(34,228,255.9); transition: transform .12s; z-index: 3; }
.pos-knob:hover.pos-knob:focus-visible { transform: scale(1.25); outline: none; }
.pos-knob:active { cursor: grabbing; }
.sk-fit { margin-top: 8px; }

/* Practicing one pattern, at a tempo you choose. */
.pa-pat { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 8px;
 padding: 10px; border-radius: 10px; border: 1px solid var(--line);
 background: rgba(255,255,255.025); }
.pa-pat-list { display: grid; gap: 4px; max-height: 168px; overflow-y: auto;
 overscroll-behavior: contain; }
.pa-pat-o { display: block; width: 100%; text-align: left; padding: 6px 9px;
 border-radius: 8px; border: 1px solid transparent; background: rgba(255,255,255.03);
 cursor: pointer; transition: all .13s; }
.pa-pat-o:hover { background: rgba(34,228,255.08); border-color: rgba(34,228,255.32); }
.pa-pat-o.is-on { background: rgba(34,228,255.15); border-color: var(--cyan); }
.pa-pat-o b { display: block; font: 600 12px/1.25 var(--body); color: var(--ink); }
.pa-pat-o small { display: block; font: 500 10px/1.3 var(--body); color: var(--faint); }

/* Composing a second piece: say what will happen before it happens. */
.cmp-where { display: flex; flex-direction: column; gap: 5px; padding: 9px 10px;
 border-radius: 10px; border: 1px solid rgba(255,193,69.3);
 background: rgba(255,193,69.06); animation: rise .26s both; }
.cmp-where .grp-cap { color: var(--amber); }
.cmp-where .seg { align-self: flex-start; }

/* Hearing it before keeping it. */
.cmp-preview { display: flex; flex-direction: column; gap: 9px; padding: 11px 12px;
 border-radius: 11px; border: 1px solid rgba(61,255,168.35);
 background: rgba(61,255,168.06); animation: rise .28s both; }
.prev-head .grp-cap { color: var(--lime); }
.prev-row { display: flex; align-items: center; gap: 9px; }
.prev-row .btn.primary { flex: 1; justify-content: center; }
.prev-bar { position: relative; flex: 1; height: 6px; border-radius: 999px;
 background: rgba(255,255,255.09); cursor: pointer; overflow: hidden; }
.prev-bar i { position: absolute; inset: 0 auto 0 0; width: 0;
 background: linear-gradient(90deg, rgba(61,255,168.55), var(--lime)); }
.prev-clock { font-size: 11px; color: var(--dim); white-space: nowrap; }
.fineprint.warn { color: var(--amber); border-left: 2px solid rgba(255,193,69.5);
 padding-left: 8px; margin: -2px 0 2px; }
#cmpBpmAuto { font: 700 10px/1 var(--display); }

/* Panels own their own padding now. */
.rpanel > h3:first-child { margin-top: 0; }
.rpanel .bank { flex: 1; min-height: 0; }
.rpanel .patlist { max-height: none; }

/* Tracks. Two today; the shape is what more instruments will use. */
.side-h { margin: 16px 0 8px; font: 700 9px/1 var(--display); letter-spacing: .14em;
 text-transform: uppercase; color: var(--faint); }
.tracks { display: grid; gap: 5px; }
.trk { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 9px;
 padding: 8px 10px; border-radius: 9px; border: 1px solid var(--line);
 background: rgba(255,255,255.03); transition: opacity .15s; }
.trk.is-off { opacity: .45; }
.trk-name { font: 600 12px/1.2 var(--body); color: var(--ink); }
.trk-name em { font-style: normal; color: var(--faint); font-weight: 500; font-size: 10.5px; }
.trk-meta { font-size: 10px; color: var(--ghost); }
.trk-on { width: 20px; height: 20px; border-radius: 6px; padding: 0; cursor: pointer;
 border: 1px solid var(--line-2); background: rgba(255,255,255.04);
 display: grid; place-items: center; transition: all .14s; }
.trk-on i { width: 7px; height: 7px; border-radius: 50%; background: var(--ghost);
 transition: all .14s; }
.trk-on.is-on { border-color: var(--cyan); background: rgba(34,228,255.16); }
.trk-on.is-on i { background: var(--cyan); box-shadow: 0 0 8px rgba(34,228,255.9); }
.trk { grid-template-columns: 20px 1fr 22px auto; }
.trk-solo { width: 20px; height: 20px; border-radius: 6px; padding: 0; cursor: pointer;
 border: 1px solid var(--line-2); background: rgba(255,255,255.04); color: var(--faint);
 font: 700 9px/1 var(--display); transition: all .14s; }
.trk-solo:hover { border-color: var(--amber); color: var(--amber); }
.trk-solo.is-on { border-color: var(--amber); background: rgba(255,193,69.2);
 color: var(--amber); box-shadow: 0 0 10px rgba(255,193,69.35); }

/* ── the loop builder ────────────────────────────────────────────────── */
.cmp-parts { display: flex; flex-direction: column; gap: 7px; padding: 11px 12px;
 border-radius: 11px; border: 1px solid rgba(34,228,255.26);
 background: rgba(34,228,255.045); }
.cmp-parts .grp-cap { color: var(--cyan); }
.cmp-parts .fineprint { margin: -2px 0 3px; }
.parts-list { display: grid; gap: 5px; }
.prow { display: grid; grid-template-columns: 18px 1fr auto auto auto; align-items: center;
 gap: 8px; padding: 7px 9px; border-radius: 9px; border: 1px solid var(--line);
 background: rgba(255,255,255.03); transition: all .15s; }
.prow.is-locked { border-color: rgba(61,255,168.55); background: rgba(61,255,168.08); }
.prow.is-off { opacity: .4; }
.prow input[type=checkbox] { width: 14px; height: 14px; accent-color: var(--cyan); margin: 0; }
.prow-name { font: 600 12px/1.2 var(--body); color: var(--ink); }
.prow-name em { font-style: normal; display: block; font-size: 10px; color: var(--faint);
 font-weight: 500; margin-top: 1px; }
.prow .lbtn { padding: 4px 9px; font-size: 10.5px; }
.prow-lock { min-width: 54px; justify-content: center; }
.prow.is-locked .prow-lock { border-color: var(--lime); color: var(--lime); }

/* ── replacements for dropdowns ──────────────────────────────────────── */
.ctl { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.ctl-native { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ctl-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ctl-label { font: 600 8.5px/1 var(--display); letter-spacing: .11em; text-transform: uppercase;
 color: var(--faint); }
.ctl-val { font: 600 11.5px/1.2 var(--body); color: var(--cyan); text-align: right; }
.ctl-ticks { display: flex; justify-content: space-between; padding: 0 2px; }
.ctl-ticks i { width: 3px; height: 3px; border-radius: 50%; background: var(--ghost);
 transition: all .15s; }
.ctl-ticks i.on { background: var(--cyan); transform: scale(1.6);
 box-shadow: 0 0 6px rgba(34,228,255.9); }
.seg-ctl .seg { flex-wrap: wrap; }
.picker-ctl { position: relative; }
.picker-search { width: 100%; padding: 6px 9px; border-radius: 8px;
 border: 1px solid var(--line); background: rgba(255,255,255.035); color: var(--ink);
 font: 500 11.5px/1 var(--body); }
.picker-search:focus { outline: none; border-color: var(--cyan); }
.picker-list { display: grid; gap: 3px; max-height: 168px; overflow-y: auto;
 overscroll-behavior: contain; }
.picker-o { text-align: left; padding: 5px 9px; border-radius: 7px; border: 1px solid transparent;
 background: rgba(255,255,255.03); color: var(--ink); font: 500 11.5px/1.25 var(--body);
 cursor: pointer; transition: all .12s; }
.picker-o:hover { background: rgba(34,228,255.1); border-color: rgba(34,228,255.3); }
.picker-o.is-on { background: rgba(34,228,255.17); border-color: var(--cyan); }
.picker-more { font: 500 10px/1.4 var(--body); color: var(--ghost); padding: 3px 6px; }
.row .ctl { flex: 1; }


/* Choosing the instrument for a part. */
.prow { grid-template-columns: 18px 1fr auto auto auto auto; }
.prow-inst { max-width: 108px; }
.prow-inst span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
 display: block; }
.inst-pick { display: grid; gap: 3px; margin: -2px 0 4px; padding: 7px;
 border-radius: 9px; border: 1px solid rgba(34,228,255.3);
 background: rgba(34,228,255.05); max-height: 210px; overflow-y: auto;
 overscroll-behavior: contain; animation: rise .2s both; }
.inst-o { text-align: left; padding: 6px 9px; border-radius: 7px;
 border: 1px solid transparent; background: rgba(255,255,255.03); cursor: pointer;
 transition: all .12s; }
.inst-o:hover { background: rgba(34,228,255.1); border-color: rgba(34,228,255.32); }
.inst-o.is-on { background: rgba(34,228,255.17); border-color: var(--cyan); }
.inst-o b { display: block; font: 600 11.5px/1.25 var(--body); color: var(--ink); }
.inst-o small { display: block; font: 500 10px/1.35 var(--body); color: var(--faint);
 margin-top: 1px; }
.inst-o .fits { font-style: normal; font-size: 9px; letter-spacing: .06em;
 text-transform: uppercase; color: var(--lime); margin-left: 5px; }
.parts-actions { display: flex; gap: 6px; }
.parts-actions .lbtn { flex: 1; justify-content: center; }


/* Ghost buttons sitting over the hero artwork need their own ground, or the
 note bars read straight through the label. */
.empty-cta .btn.ghost { background: rgba(9,11,20.86); backdrop-filter: blur(6px);
 border-color: rgba(255,255,255.16); }
.empty-cta .btn.ghost:hover { background: rgba(16,20,34.94);
 border-color: rgba(34,228,255.42); }


/* The hero must FIT. Measured at a 768px-tall window the copy was 414px tall
 inside a 400px box with overflow:hidden, which silently ate the third proof
 bullet - the one that credits the CC0 instruments. Nothing here may be
 reachable only by a scrollbar that does not exist. These steps tighten the
 vertical rhythm as the window gets shorter, in the order a designer would
 give things up: air first, then type. */
@media (max-height: 900px) {
 .empty { padding: 2vh 4%; }
 .empty-copy h1 { font-size: 40px; line-height: 1.06; }
 .lede { font-size: 13.5px; margin-top: 11px; }
 .empty-cta { margin-top: 14px; }
 .proof { margin-top: 14px; gap: 5px; }
}
@media (max-height: 780px) {
 .empty-copy h1 { font-size: 34px; }
 .lede { font-size: 13px; margin-top: 9px; max-width: 48ch; }
 .empty-cta { margin-top: 12px; }
 .btn.lg { padding: 9px 16px; font-size: 13px; }
 .proof { margin-top: 11px; gap: 4px; }
 .proof li { font-size: 11px; line-height: 1.38; }
}
@media (max-height: 680px) {
 .eyebrow { display: none; }
 .empty-copy h1 { font-size: 29px; }
 .lede { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
 overflow: hidden; margin-top: 8px; }
 /* Keep all three proof points. Hiding one would put us back where we
 started - a claim that exists in the markup and nowhere on the screen. */
 .empty-cta { margin-top: 10px; }
 .proof { margin-top: 9px; gap: 3px; }
 .proof li { font-size: 10.5px; line-height: 1.34; }
}

/* At short windows the copy grows down into the band the art occupies, and
 the art stops being atmosphere and starts being interference. Type wins:
 the scrim goes fully opaque under the text column and the art keeps only
 the right-hand margin. */
@media (max-height: 900px) {
 .empty-copy::before { background: linear-gradient(97deg, #05060C 0 74%
 rgba(5,6,12.9) 86%, rgba(5,6,12,0) 100%); }
 #heroCanvas { opacity: .62; }
}
@media (max-height: 780px) {
 .empty-copy::before { background: linear-gradient(97deg, #05060C 0 80%
 rgba(5,6,12.92) 91%, rgba(5,6,12,0) 100%); }
 #heroCanvas { opacity: .5; }
}


/* Sliders built from a <select> span their control.
 The global range rule is `width: 104px; flex: none`, written for the inline
 sliders in the inspector. .slider-wrap and .opt-row each override it; the
 generated controls never did, so the track was 104px wide while the tick row
 underneath it spanned the full 498px. At key = A the thumb sat at x=701 and
 the lit tick at x=1024 - the two halves of one control disagreeing about
 where the value was. This affected EVERY select-turned-slider, not just Key.

 The tick padding matches the thumb's travel: the thumb center stops half a
 thumb-width from each end, so the dots must inset by that much minus their
 own radius, or the first and last never line up. */
.ctl input[type=range] { width: 100%; flex: none; }
.ctl-ticks { padding: 0 5.5px; }


/* Legal links: quiet, permanent, and above the fold. */
.legal-rail { display: flex; flex-wrap: wrap; gap: 3px 12px; margin-top: 10px;
 padding-top: 9px; border-top: 1px solid var(--line); }
.legal-rail a { font: 500 10.5px/1.5 var(--body); color: var(--faint);
 text-decoration: none; transition: color .12s; }
.legal-rail a:hover.legal-rail a:focus-visible { color: var(--cyan); }


/* The Step control drew a 114px box around 54px of arrows.
 `.grp` is a column flex container, so its children stretch to the widest
 one - and the widest one is the hint line underneath, "step through note by
 note". The segmented control inherited that width, leaving 60px of empty
 bordered, apparently-clickable box to the right of the last arrow.
 Size the control by its content and let the hint be the wide one. */
.grp > .seg { align-self: start; width: max-content; }
.step-seg { align-self: start; width: max-content; }
.grp-note { max-width: 128px; }


/* The compose fork. Two doors, equal weight - neither is the "advanced" one. */
.cmp-fork { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 4px 0 2px; }
.fork-o { text-align: left; padding: 14px 16px; border-radius: 12px; cursor: pointer;
 border: 1px solid var(--line); background: rgba(255,255,255.03);
 transition: border-color .14s, background .14s, transform .14s; }
.fork-o:hover { background: rgba(34,228,255.07); border-color: rgba(34,228,255.45);
 transform: translateY(-1px); }
.fork-o:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.fork-o b { display: block; font: 600 14px/1.2 var(--display); color: var(--ink);
 margin-bottom: 5px; }
.fork-o small { display: block; font: 500 11px/1.45 var(--body); color: var(--dim); }
.cmp-fork.is-done { display: none; }
@media (max-width: 720px) { .cmp-fork { grid-template-columns: 1fr; } }


/* The style search is the primary way into 129 genres, so it gets the size
 that implies. The list below it can be put away once a style is chosen. */
#cmpSearch { font-size: 14.5px; padding: 11px 34px 11px 34px; }
.cmp-left .search.sm { min-height: 44px; }
.cmp-left .search.sm svg { width: 15px; height: 15px; }
.list-toggle { align-self: flex-start; }
.cmp-list { transition: max-height .22s ease, opacity .18s ease; overflow-y: auto; }
.cmp-list.is-hidden { max-height: 0; opacity: 0; pointer-events: none;
 border-color: transparent; margin: 0; }

/* ── accounts ──────────────────────────────────────────────────────── */
.sheet.narrow { max-width: 520px; }
.acct-btn.is-in { border-color: rgba(34,228,255.45); color: var(--cyan); }

.provider-list { display: grid; gap: 8px; margin: 4px 0 14px; }
.prov {
 display: flex; align-items: center; gap: 11px; width: 100%;
 padding: 12px 15px; border-radius: 11px; cursor: pointer;
 border: 1px solid var(--line); background: rgba(255,255,255.04);
 color: var(--ink); font: 600 14px/1 var(--body);
 transition: background .14s, border-color .14s, transform .14s;
}
.prov:hover { background: rgba(255,255,255.08); border-color: rgba(255,255,255.24);
 transform: translateY(-1px); }
.prov:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.prov svg { width: 19px; height: 19px; flex: none; }
.prov-none { color: var(--faint); font: 500 12px/1.5 var(--body); }

/* The privacy note is the point of this screen, not small print. */
.privacy-note { border: 1px solid rgba(34,228,255.22); background: rgba(34,228,255.05);
 border-radius: 11px; padding: 13px 15px; }
.privacy-note h4 { font: 600 12.5px/1.3 var(--display); color: var(--cyan);
 margin: 0 0 7px; letter-spacing: .01em; }
.privacy-note p { font: 500 11.5px/1.55 var(--body); color: var(--dim); margin: 0 0 8px; }
.privacy-note p:last-child { margin-bottom: 0; }
.privacy-note code { font: 500 11px/1 var(--mono); background: rgba(0,0,0.35);
 padding: 1px 5px; border-radius: 4px; color: var(--ink); }

.age-row { display: flex; gap: 8px; align-items: flex-end; margin: 10px 0; }
.age-row .fieldset { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.age-row input[type=email] { flex: 1; min-width: 0; padding: 9px 12px; border-radius: 9px;
 border: 1px solid var(--line); background: rgba(0,0,0.3); color: var(--ink);
 font: 500 13px/1 var(--body); }

.acct-stat { display: flex; align-items: baseline; gap: 9px; margin: 2px 0 4px; }
.acct-stat b { font: 700 30px/1 var(--display); color: var(--cyan); }
.acct-stat span { font: 500 12px/1 var(--body); color: var(--dim); }

.lbtn.danger { border-color: rgba(255,90,110.4); color: #FF7A88; }
.lbtn.danger:hover { background: rgba(255,90,110.12); border-color: #FF7A88; }
.err { font: 500 11.5px/1.45 var(--body); color: #FF7A88; margin: 6px 0 0; }
a.lbtn { text-decoration: none; display: inline-flex; align-items: center; }

/* Instruments a style does not use are reachable, never offered. */
.inst-more { margin-top: 4px; }
.inst-more summary { cursor: pointer; font: 500 10.5px/1.5 var(--body);
 color: var(--faint); padding: 4px 2px; list-style: none; }
.inst-more summary::-webkit-details-marker { display: none; }
.inst-more summary::before { content: "▸ "; }
.inst-more[open] summary::before { content: "▾ "; }
.inst-more summary:hover { color: var(--cyan); }
.inst-o .wrong { font-style: normal; font-size: 9px; letter-spacing: .05em;
 text-transform: uppercase; color: #FF7A88; margin-left: 5px; }
.inst-o.is-wrong { opacity: .62; }
.inst-o.is-wrong:hover { opacity: 1; }