/* H$G Steps: black & gold, a nod to old-school Fruity Loops 3. Mobile-first. */
:root { --bg:#000; --panel:#0b0b0b; --panel2:#131109; --line:#2b261b; --text:#f4efe3; --muted:#a39d8f; --gold:#d4af37; --gold2:#f5d77a; --gold3:#8a6d1d; --red:#ff5a5a; --ok:#7ad19b; --cell:#17140c; --cell2:#1f1b10; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html, body { margin:0; background:var(--bg); color:var(--text); }
body { font:14px/1.4 Inter, system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent; }
a { color:var(--gold2); } button, input, select { font:inherit; color:inherit; }
:focus-visible { outline:2px solid var(--gold2); outline-offset:2px; }
kbd { font:600 11px/1 Inter, sans-serif; border:1px solid #4a412b; border-bottom-width:2px; border-radius:4px; padding:2px 5px; background:#15130d; color:var(--gold2); }
.gold { background:linear-gradient(180deg,var(--gold2),var(--gold) 55%,var(--gold3)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.app { max-width:1120px; margin:0 auto; padding:12px 10px 10px; }
.top { display:grid; grid-template-columns:auto 1fr auto; gap:8px 14px; align-items:center; margin-bottom:10px; }
.eyebrow { margin:0; font:600 10px/1 Inter,sans-serif; letter-spacing:.3em; text-transform:uppercase; color:var(--gold); }
.brand h1 { margin:4px 0 0; font:900 clamp(26px,5vw,38px)/1 Cinzel,serif; letter-spacing:.02em; }
.privacy { margin:0; font-size:12px; color:var(--muted); justify-self:center; text-align:center; }
.top-btns { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
@media (max-width:760px) { .top { grid-template-columns:1fr; } .top-btns { justify-content:flex-start; } .privacy { justify-self:start; text-align:left; } }
.chip { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:34px; padding:0 12px; border-radius:999px; border:1px solid var(--line); background:var(--panel2); cursor:pointer; font-weight:600; font-size:12px; white-space:nowrap; }
.chip:hover { border-color:var(--gold); color:var(--gold2); } .chip.small { min-height:30px; padding:0 10px; }
.gold-chip { border-color:var(--gold); background:linear-gradient(180deg,#3a2f0f,#1d1707); color:var(--gold2); }
.chip.on { background:var(--gold); color:#120d02; border-color:var(--gold2); }
.help { display:grid; gap:12px 28px; grid-template-columns:1fr; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:12px 14px; margin-bottom:10px; font-size:13px; }
@media (min-width:760px) { .help { grid-template-columns:1.2fr 1fr; } }
.help h2, .panel h2 { margin:0 0 6px; font:700 14px Cinzel,serif; color:var(--gold2); letter-spacing:.05em; } .help ol { margin:0; padding-left:18px; } .help li { margin-bottom:4px; } .keys-more { color:var(--muted); margin:0 0 6px; }

/* transport */
.transport { display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; background:linear-gradient(180deg,#141108,#0a0905); border:1px solid var(--line); border-radius:14px; padding:8px 10px; margin-bottom:8px; }
.play { display:inline-flex; align-items:center; gap:8px; min-height:42px; padding:0 20px; border-radius:10px; border:2px solid var(--gold); background:linear-gradient(180deg,var(--gold2),var(--gold) 55%,var(--gold3)); color:#120d02; font-weight:800; cursor:pointer; letter-spacing:.04em; text-transform:uppercase; }
.play[aria-pressed="true"] { background:linear-gradient(180deg,#5a2020,#2b0d0d); color:#ffd0d0; border-color:#c55; }
.seg { display:inline-flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.segb { min-height:34px; padding:0 12px; border:0; background:var(--panel2); cursor:pointer; font-weight:600; font-size:12px; border-right:1px solid var(--line); }
.segb:last-child { border-right:0; } .segb.on { background:var(--gold); color:#120d02; }
.num { display:inline-flex; align-items:center; gap:4px; } .num span, .rng span { font:600 10px/1 Inter,sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin-right:4px; }
.num input { width:64px; min-height:34px; text-align:center; background:#050505; border:1px solid var(--line); border-radius:6px; font:700 16px Inter,sans-serif; font-variant-numeric:tabular-nums; color:var(--gold2); -moz-appearance:textfield; }
.num input::-webkit-outer-spin-button, .num input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.step-btn { width:34px; height:34px; border-radius:8px; border:1px solid var(--line); background:var(--panel2); cursor:pointer; font-weight:700; }
.rng { display:inline-flex; align-items:center; gap:6px; } .rng b { color:var(--gold2); font-weight:600; letter-spacing:0; }
.rng input { width:110px; } .rng.master input { width:100px; }
#meter { width:60px; height:14px; border-radius:3px; background:#050505; border:1px solid var(--line); }
input[type=range] { -webkit-appearance:none; appearance:none; height:28px; background:transparent; cursor:pointer; margin:0; min-width:0; }
input[type=range]::-webkit-slider-runnable-track { height:4px; border-radius:2px; background:#3a3220; }
input[type=range]::-moz-range-track { height:4px; border-radius:2px; background:#3a3220; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:16px; height:16px; border-radius:50%; background:var(--gold); border:2px solid #120d02; margin-top:-6px; }
input[type=range]::-moz-range-thumb { width:12px; height:12px; border-radius:50%; background:var(--gold); border:2px solid #120d02; }

.patterns { display:grid; gap:6px; margin-bottom:8px; }
.pat-row { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.tag { font:600 10px/1 Inter,sans-serif; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); min-width:58px; }
.pat-btns, .playlist { display:flex; gap:4px; flex-wrap:wrap; }
.pat-btn { width:38px; height:34px; border-radius:6px; border:1px solid var(--line); background:var(--cell); cursor:pointer; font-weight:700; }
.pat-btn.has { color:var(--gold2); } .pat-btn.on { background:var(--gold); color:#120d02; border-color:var(--gold2); }
.pl-chip { display:inline-flex; align-items:center; gap:4px; min-height:30px; padding:0 4px 0 10px; border-radius:6px; border:1px solid var(--gold3); background:#1b1608; font-weight:700; color:var(--gold2); }
.pl-chip.now { background:var(--gold); color:#120d02; } .pl-chip button { border:0; background:transparent; cursor:pointer; opacity:.7; width:24px; height:26px; }
.pl-empty { color:var(--muted); font-size:12px; }

/* channel rack */
.rack { display:grid; gap:4px; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:8px; }
.ch { display:grid; grid-template-columns:236px 1fr; gap:4px 10px; align-items:center; border-radius:8px; padding:3px 4px; }
.ch.dragover { outline:2px dashed var(--gold2); }
.ch.sel { background:#14110a; }
.ch-ctl { display:grid; grid-template-columns:auto 1fr; gap:3px 6px; align-items:center; min-width:0; }
.ch-name { display:flex; align-items:center; gap:4px; min-width:0; grid-column:1 / -1; }
.ch-btn { min-width:30px; height:30px; border-radius:6px; border:1px solid var(--line); background:var(--cell2); cursor:pointer; font-weight:700; font-size:11px; padding:0 4px; }
.ch-btn.on { background:var(--gold); color:#120d02; } .ch-btn.mute.on { background:#7a2a2a; color:#fff; }
.ch-label { flex:1; min-width:0; text-align:left; background:#0f0d07; border:1px solid var(--line); border-radius:6px; height:30px; padding:0 8px; font-weight:700; letter-spacing:.03em; cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--gold2); }
.ch-label small { display:block; font-weight:500; color:var(--muted); font-size:9px; line-height:1; margin-top:-2px; overflow:hidden; text-overflow:ellipsis; }
.knobs { grid-column:1 / -1; display:grid; grid-template-columns:repeat(3,1fr); gap:2px 4px; }
.knob { display:flex; flex-direction:column; min-width:0; } .knob span { font:600 8px/1 Inter,sans-serif; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); text-align:center; }
.knob input { width:100%; height:26px; }
.steps { display:grid; gap:3px; overflow-x:auto; padding-bottom:2px; touch-action:pan-x pan-y; }
.cell { height:34px; min-width:0; border-radius:4px; border:1px solid #2a2415; background:var(--cell); cursor:pointer; padding:0; position:relative; font:700 11px Inter,sans-serif; color:#120d02; }
.cell.g1 { background:var(--cell2); }
.cell.on { background:linear-gradient(180deg,var(--gold2),var(--gold) 60%,var(--gold3)); border-color:var(--gold2); box-shadow:0 0 8px rgba(212,175,55,.35); }
.cell.head::after { content:""; position:absolute; inset:-1px; border-radius:4px; border:2px solid #fff; opacity:.85; pointer-events:none; }
.cell.mute-row.on { filter:grayscale(1) brightness(.5); }
.steps.s16 { grid-template-columns:repeat(16,minmax(0,1fr)); } .steps.s32 { grid-template-columns:repeat(32,minmax(0,1fr)); }
@media (max-width:760px) {
  .ch { grid-template-columns:1fr; gap:3px; padding:4px 2px 6px; border-bottom:1px solid #17140c; }
  .ch-ctl { grid-template-columns:auto 1fr; } .knobs { grid-template-columns:repeat(3,1fr); }
  .cell { height:30px; border-radius:3px; } .steps.s32 { grid-template-columns:repeat(32,24px); } .steps.s32 .cell { height:32px; }
}
@media (min-width:761px) { .knobs { grid-template-columns:repeat(3,1fr); } .ch-ctl { grid-template-columns:auto 1fr; } }
.toolbar2 { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:10px 0; } .status { color:var(--muted); font-size:12px; flex:1; min-width:120px; }
.status.err { color:var(--red); } .status.ok { color:var(--ok); }
.panel { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:10px 12px; margin-bottom:10px; }
.panel-head { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; align-items:center; margin-bottom:6px; } .panel .sub { font:500 12px Inter,sans-serif; color:var(--muted); letter-spacing:0; margin-left:6px; }
.row { display:flex; gap:8px; align-items:center; } .row.wrap { flex-wrap:wrap; margin:6px 0; }
.hint { color:var(--muted); font-size:12px; margin:0; }
.wave-wrap { position:relative; margin:8px 0; border-radius:8px; overflow:hidden; border:1px solid var(--line); background:#050505; }
#wave { display:block; width:100%; height:150px; touch-action:none; cursor:crosshair; }
.wave-empty { position:absolute; inset:0; display:grid; place-items:center; color:var(--muted); font-size:13px; pointer-events:none; text-align:center; padding:8px; }
.slice-pads { display:flex; flex-wrap:wrap; gap:4px; }
.pad { min-width:42px; height:38px; border-radius:6px; border:1px solid var(--gold3); background:#1b1608; font-weight:800; color:var(--gold2); cursor:pointer; padding:0 6px; }
.pad.on { background:var(--gold); color:#120d02; }
.mixer { display:flex; gap:6px; overflow-x:auto; padding-bottom:4px; }
.strip { flex:0 0 64px; display:flex; flex-direction:column; align-items:center; gap:6px; background:var(--panel2); border:1px solid var(--line); border-radius:8px; padding:8px 4px; }
.strip.master { border-color:var(--gold); } .strip .nm { font:700 10px Inter,sans-serif; letter-spacing:.06em; color:var(--gold2); max-width:60px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.strip input[type=range].v { writing-mode:vertical-lr; direction:rtl; width:28px; height:110px; }
.strip input[type=range].pan { width:56px; height:28px; } .strip .val { font-size:10px; color:var(--muted); }
.foot { display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 14px; color:var(--muted); font-size:11px; padding:6px 2px; } .foot .soft, .foot a.soft { color:#7d7766; }

/* export dialog */
.overlay { margin:0 0 10px; }
.dlg { width:100%; background:#0a0a0a; border:1px solid var(--gold3); border-radius:16px; padding:14px; box-shadow:0 12px 40px rgba(0,0,0,.7); }
.dlg-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; } .dlg-head h2 { margin:0; font:900 22px Cinzel,serif; }
.field { display:flex; flex-direction:column; gap:4px; border:0; padding:0; margin:0 0 10px; min-width:0; } .field > span, .field legend { font:600 10px/1 Inter,sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); padding:0; margin-bottom:4px; }
.field.inline { flex-direction:row; align-items:center; gap:8px; margin:6px 0 0; } .field.inline > span { margin:0; }
.field input[type=text], select { min-height:38px; background:#050505; border:1px solid var(--line); border-radius:8px; padding:0 10px; color:var(--text); }
.fmt-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:6px; }
.fmt { min-height:44px; border:1px solid var(--line); border-radius:8px; background:var(--panel2); cursor:pointer; font-weight:700; font-size:12px; padding:4px 6px; }
.fmt.on { background:var(--gold); color:#120d02; border-color:var(--gold2); }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; } @media (max-width:560px) { .grid2 { grid-template-columns:1fr; } }
.radio, .check { display:flex; align-items:flex-start; gap:8px; margin:3px 0; font-size:13px; cursor:pointer; min-height:28px; } .radio input, .check input { margin-top:3px; width:18px; height:18px; accent-color:var(--gold); flex:none; }
.check.dis { opacity:.45; }
.cta { min-height:46px; padding:0 22px; border-radius:999px; border:2px solid var(--gold); background:linear-gradient(180deg,#f3d36b 0%,#d4af37 55%,#b8901f 100%); color:#000; font-weight:800; letter-spacing:.06em; text-transform:uppercase; cursor:pointer; }
.cta:disabled { opacity:.5; cursor:wait; }
.progress { margin:8px 0; } .bar { height:10px; background:#1a170e; border-radius:6px; overflow:hidden; border:1px solid var(--line); } .bar i { display:block; height:100%; width:0; background:linear-gradient(90deg,var(--gold3),var(--gold2)); transition:width .2s; }
#exp-plabel { font-size:12px; color:var(--muted); }
.result, .tray { margin-top:10px; background:#101008; border:1px solid var(--gold3); border-radius:10px; padding:10px; display:grid; gap:8px; }
.result audio { width:100%; } .result .acts, .tray .acts { display:flex; gap:8px; flex-wrap:wrap; }
.result a.dl, .tray a.dl, .result button.shr, .tray button.shr { min-height:42px; display:inline-flex; align-items:center; padding:0 16px; border-radius:999px; border:1px solid var(--gold); background:#1d1707; color:var(--gold2); font-weight:700; text-decoration:none; cursor:pointer; }
.tray { margin:0 0 10px; }
.dropveil { position:fixed; inset:0; z-index:60; background:rgba(0,0,0,.7); border:3px dashed var(--gold2); display:grid; place-items:center; font:700 22px Cinzel,serif; color:var(--gold2); pointer-events:none; }

.projname { display:inline-flex; align-items:center; gap:6px; } .projname span { font:600 10px/1 Inter,sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); }
.projname input { width:150px; min-height:34px; background:#050505; border:1px solid var(--line); border-radius:8px; padding:0 10px; color:var(--text); }
.ch-ctl .ch-name .ch-btn.x { min-width:26px; }