/* Cool studio minimalism: a light grey seamless, near-black Helvetica, one tiny red. */
:root {
  --ink: #0d0d0f; --grey: #d4d6dc; --grey-deep: #bcc0c9; --white: #fff; --red: #e0141e;
  --hair: rgba(13, 13, 15, .2); --hair-strong: rgba(13, 13, 15, .55);
  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --gutter: 20px; --label: 70px;
  /* themed parts: light is the default, dark below (the system's choice, or the strip's light / dark) */
  --on-ink: #fff; --wordmark: #0d0d0f; --ink-soft: rgba(13, 13, 15, .35); --ink-faint: rgba(13, 13, 15, .12); --ink-hover: rgba(13, 13, 15, .06);
  --drawer-bg: rgba(212, 214, 220, .93);
  --stage-bg: radial-gradient(ellipse 80% 70% at 50% 42%, #dfe1e7 0%, #d2d5dc 55%, #b9bec8 100%);
  --head-filter: saturate(.6) contrast(1.15);
  --tint: #8ea3d6; --tint-opacity: .35;
  --strobe-dark: #050507; --strobe-flash: #f2f6ff;
  color-scheme: light;
}
/* Dark: a near-black studio sweep with a deep cold blue-teal falloff, off-white wordmark, light grey text, white hairlines
   at low alpha, the same tiny red. The head grade stays cold but is less desaturated, so the pale skin glows. */
:root[data-theme="dark"] {
  --ink: #d8dde0; --grey: #0a1114; --grey-deep: #060a0c; --white: #0a1114; --red: #e0141e;
  --hair: rgba(255, 255, 255, .16); --hair-strong: rgba(255, 255, 255, .55);
  --on-ink: #0a1114; --wordmark: #eceef0; --ink-soft: rgba(216, 221, 224, .4); --ink-faint: rgba(255, 255, 255, .1); --ink-hover: rgba(255, 255, 255, .07);
  --drawer-bg: rgba(10, 17, 20, .94);
  --stage-bg: radial-gradient(ellipse 80% 70% at 50% 42%, #0f1a1f 0%, #0a1317 55%, #050708 100%);
  --head-filter: saturate(.8) contrast(1.12);
  --tint: #80a6d2; --tint-opacity: .32;
  --strobe-dark: #000; --strobe-flash: #f2f6ff;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #d8dde0; --grey: #0a1114; --grey-deep: #060a0c; --white: #0a1114;
    --hair: rgba(255, 255, 255, .16); --hair-strong: rgba(255, 255, 255, .55);
    --on-ink: #0a1114; --wordmark: #eceef0; --ink-soft: rgba(216, 221, 224, .4); --ink-faint: rgba(255, 255, 255, .1); --ink-hover: rgba(255, 255, 255, .07);
    --drawer-bg: rgba(10, 17, 20, .94);
    --stage-bg: radial-gradient(ellipse 80% 70% at 50% 42%, #0f1a1f 0%, #0a1317 55%, #050708 100%);
    --head-filter: saturate(.8) contrast(1.12);
    --tint: #80a6d2; --tint-opacity: .32;
    --strobe-dark: #000; --strobe-flash: #f2f6ff;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html, body { height: 100%; background: var(--grey); color: var(--ink); font: 400 11px/1.3 var(--font); letter-spacing: .06em; -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; }
body { display: grid; grid-template-rows: minmax(0, 1fr) auto; height: 100vh; height: 100dvh; overflow: hidden; }
button, input, select { font: inherit; color: inherit; letter-spacing: inherit; }
button { background: none; border: 0; cursor: pointer; }
.cap { color: var(--hair-strong); }

/* stage: the cover */
#stage { position: relative; overflow: hidden; background: var(--stage-bg); }
#wordmark { position: absolute; left: 0; right: 0; top: 14px; pointer-events: none; }
#wordmark span { display: block; width: max-content; font: 700 100px/.74 var(--font); letter-spacing: -.04em; text-transform: uppercase; white-space: nowrap; color: var(--wordmark); transform: translate(0, .02em); }
#head { position: absolute; inset: 0; width: 100%; height: 100%; display: block; filter: var(--head-filter); }
#tint { position: absolute; inset: 0; background: var(--tint); mix-blend-mode: soft-light; opacity: var(--tint-opacity); pointer-events: none; }
#dark { position: absolute; inset: 0; background: var(--strobe-dark); opacity: 0; pointer-events: none; }
#flash { position: absolute; inset: 0; background: var(--strobe-flash); opacity: 0; pointer-events: none; }
#status { position: absolute; right: var(--gutter); bottom: 12px; color: var(--ink); opacity: .6; text-transform: lowercase; letter-spacing: .14em; }
#toast { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); padding: 6px 12px; background: var(--ink); color: var(--on-ink); display: none; max-width: 90%; z-index: 6; }
#toast.on { display: block; }
#strobenote { position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); display: flex; gap: 14px; align-items: baseline; padding: 7px 12px; background: var(--ink); color: var(--on-ink); z-index: 6; max-width: 92%; }
#strobenote button { text-decoration: underline; text-underline-offset: 3px; }

/* bottom strip */
#strip { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; padding: 10px var(--gutter); border-top: 1px solid var(--hair); background: var(--grey); position: relative; z-index: 4; }
#strip .logo { width: 82px; flex: none; color: var(--ink); opacity: .85; }
#strip .logo svg { width: 100%; height: auto; display: block; }
#edition { font-weight: 400; text-transform: lowercase; letter-spacing: .14em; color: var(--hair-strong); }
#edition:empty { display: none; }
.buttons { display: flex; gap: 16px; }
button.text { text-transform: lowercase; letter-spacing: .14em; padding: 2px 0; border-bottom: 1px solid transparent; }
button.text:hover { border-bottom-color: var(--ink); }
button#play.on { color: var(--red); }
button#play.on::before { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--red); margin-right: 7px; vertical-align: 1px; }
button#bang.on, button#roll.on { text-decoration: underline; }
.ctl { display: flex; align-items: center; gap: 8px; }
.ctl .cap, .group .cap, .group h3 { text-transform: lowercase; letter-spacing: .14em; }
.ctl output { min-width: 28px; text-align: right; }
#strip input[type="range"] { width: 62px; }
.seg { display: flex; gap: 8px; }
.seg button { padding: 1px 0; color: var(--hair-strong); border-bottom: 1px solid transparent; }
.seg button.on { color: var(--ink); border-bottom-color: var(--ink); }
.seg button:hover { color: var(--ink); }
input[type="range"] { -webkit-appearance: none; appearance: none; flex: 1; min-width: 0; height: 14px; background: none; }
input[type="range"]::-webkit-slider-runnable-track { height: 1px; background: var(--ink); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 9px; height: 9px; margin-top: -4px; border-radius: 50%; background: var(--ink); border: 0; }
input[type="range"]::-moz-range-track { height: 1px; background: var(--ink); }
input[type="range"]::-moz-range-thumb { width: 9px; height: 9px; border-radius: 50%; background: var(--ink); border: 0; }
#strobetoggle { min-width: 66px; text-align: left; color: var(--hair-strong); }
#strobetoggle.on { color: var(--ink); border-bottom-color: var(--ink); }
#strip input.dim { opacity: .35; }
select, option { background: var(--grey); color: var(--ink); }
#heads { display: flex; gap: 8px; }
#heads button { width: 24px; height: 24px; border-radius: 50%; overflow: hidden; padding: 0; opacity: .5; outline: 1px solid var(--hair-strong); outline-offset: 2px; }
#heads button img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; display: block; filter: grayscale(.8) contrast(1.1); }
#heads button:hover { opacity: 1; }
#heads button.on { opacity: 1; outline-color: var(--ink); }
#themetoggle { margin-left: auto; }
#themetoggle { display: flex; gap: 6px; align-items: center; }
#themetoggle .sep { color: var(--hair-strong); }
#themetoggle button { color: var(--hair-strong); padding: 1px 0; border-bottom: 1px solid transparent; text-transform: lowercase; letter-spacing: .14em; }
#themetoggle button.on { color: var(--ink); border-bottom-color: var(--ink); }
#themetoggle button:hover { color: var(--ink); }
#presetnav { display: flex; align-items: center; gap: 4px; width: 150px; flex: none; }
#presetnav button { color: var(--hair-strong); }
#presetnav button:hover { color: var(--ink); }
#presetname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; color: var(--ink); }
#presetname.empty { color: var(--hair-strong); }

/* edit drawer */
#drawer { position: absolute; left: 0; right: 0; bottom: 0; max-height: 66%; overflow-y: auto; z-index: 3; padding: 18px var(--gutter) 16px; background: var(--drawer-bg); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-top: 1px solid var(--hair); }
.drawer-grid { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 28px; align-items: start; }
.drawer-side { display: flex; flex-direction: column; gap: 14px; }
.group h3 { font-weight: 400; color: var(--hair-strong); margin-bottom: 4px; }
.group.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.group.row .text:last-child { margin-left: auto; }
#kick .field { display: flex; align-items: center; gap: 8px; height: 17px; }
#kick .field .mono { width: 40px; flex: none; color: var(--hair-strong); text-transform: lowercase; letter-spacing: .14em; }
#kick output { width: 34px; text-align: right; }
#dig select { width: 100%; border: 0; border-bottom: 1px solid var(--hair-strong); background: none; padding: 3px 0; margin-bottom: 4px; }
#dig .partrow { display: grid; grid-template-columns: 48px 56px 1fr; gap: 6px; align-items: center; margin-bottom: 1px; }
#dig .partrow button { text-align: left; color: var(--hair-strong); text-transform: lowercase; }
#dig .partrow button.on { color: var(--ink); text-decoration: underline; }
#dig .partrow select { margin: 0; font-size: 10px; }
#dig .field { margin-bottom: 2px; }
.group select { border: 0; border-bottom: 1px solid var(--hair-strong); background: none; }

/* preset browser */
#presets { margin-top: 14px; }
.presethead { display: flex; align-items: center; gap: 22px; margin-bottom: 4px; }
.presethead .cap { text-transform: lowercase; letter-spacing: .14em; width: 52px; }
#presetlist { width: 320px; max-height: 160px; overflow-y: auto; border: 1px solid var(--hair); }
#presetlist button.item { display: block; width: 100%; height: 20px; padding: 0 8px; text-align: left; text-transform: lowercase; letter-spacing: .14em; font-size: 10.5px; border-bottom: 1px solid var(--hair); }
#presetlist button.item:hover { background: var(--ink-hover); }
#presetlist button.item.on { background: var(--ink); color: var(--on-ink); }

/* step grid */
#grid { position: relative; user-select: none; -webkit-user-select: none; touch-action: none; }
.row { display: grid; grid-template-columns: var(--label) minmax(0, 1fr); align-items: center; height: 21px; }
.row .head { display: flex; align-items: center; gap: 8px; }
.row .mute { width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--ink); background: var(--ink); flex: none; }
.row .mute.off { background: none; }
.row .label { font-size: 10px; text-transform: lowercase; letter-spacing: .14em; }
.row.muted-row .label { color: var(--hair-strong); text-decoration: line-through; }
.cells { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); height: 17px; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.cell { border-left: 1px solid var(--hair); font: 400 7px/17px var(--font); text-align: center; overflow: hidden; color: transparent; }
.cell:first-child { border-left: 1px solid var(--hair-strong); }
.cell.beat { border-left-color: var(--hair-strong); }
.cell.bar { border-left: 1px solid var(--ink); }
.cell.on { background: linear-gradient(var(--ink), var(--ink)) center / 55% 55% no-repeat; }
.cell.accent { background: var(--ink); }
.cell.on:not([data-dot]) { color: transparent; }
.cell.tie { background: linear-gradient(var(--ink-soft), var(--ink-soft)) center / 100% 3px no-repeat; }
.row.muted-row .cell.on, .row.muted-row .cell.accent, .row.muted-row .cell.tie { opacity: .2; }
.playhead { position: absolute; top: 0; bottom: 0; background: rgba(224, 20, 30, .1); border-left: 1px solid var(--red); pointer-events: none; }

.legendrow { display: flex; align-items: flex-start; gap: 20px; margin-top: 12px; }
.legend { display: flex; gap: 3px; flex-wrap: wrap; min-width: 0; }
.key { display: flex; flex-direction: column; align-items: center; width: 26px; gap: 1px; }
.key .cap { display: grid; place-items: center; width: 22px; height: 19px; border: 1px solid var(--hair-strong); font: 400 9px var(--font); color: var(--ink); }
.key .txt { font: 400 7px var(--font); color: var(--hair-strong); }
.key.black .cap { background: var(--ink-faint); }
.key.on .cap { background: var(--ink); color: var(--on-ink); }
#keyhelp { margin-left: auto; text-align: right; line-height: 1.6; color: var(--hair-strong); flex: none; }

@media (max-width: 1000px) {
  :root { --gutter: 14px; --label: 60px; }
  .drawer-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  #keyhelp { display: none; }
  #strip { gap: 8px 16px; }
}
@media (max-width: 640px) {
  #strip input[type="range"] { width: 64px; }
  #strip .logo { width: 64px; }
}