/* Homepage Drum Studio feature. Static, non-interactive and light: it borrows the instrument's colour tokens and grid
 * structure (four beats of four steps) from drum-lab.css but shares none of its code, so the homepage never loads the
 * sequencer. Active state never relies on colour alone: ghost = dot, normal = short bar, accent = bars + top bar. */
body.home-page .home-drumlab { padding-top: 84px; padding-bottom: 36px; }
.home-drumlab__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px 48px; align-items: center; }
.home-drumlab__copy h2 { margin: 4px 0 12px; }
.home-drumlab__copy p { margin: 0 0 20px; max-width: 34em; }
.home-drumlab__cta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; }
.home-drumlab__note { font-size: 0.8125rem; color: var(--muted, #515659); }

.dlp {
  --p-body: #e7e3d9; --p-body-2: #ddd8cb; --p-key: #f4f1e9; --p-key-2: #ebe7dc; --p-line: #bdb6a6; --p-line-2: #a9a291;
  --p-ink: #25282c; --p-ghost: #686d74; --p-muted: #515659; --p-led: #e2531a; --p-beat: 9px; --p-label: 76px; --p-rowh: 30px;
  background: var(--p-body); border: 1px solid var(--p-line-2); border-radius: 6px; box-shadow: 0 1px 0 #fff inset, 0 6px 18px -12px rgba(37, 40, 44, 0.5);
  color: var(--p-ink); font-size: 13px; min-width: 0; overflow: hidden; user-select: none;
}
.dlp__bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; padding: 10px 14px; background: var(--p-body-2); border-bottom: 1px solid var(--p-line-2); }
.dlp__brand { display: flex; align-items: center; gap: 10px; margin-right: 4px; }
.dlp__logo { display: block; height: 26px; width: auto; }
.dlp__name { display: flex; flex-direction: column; line-height: 1.15; padding-left: 10px; border-left: 1px solid var(--p-line-2); }
.dlp__brand b { font-family: var(--font-heading); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; }
.dlp__name i { font-style: normal; font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--p-muted); }
.dlp__play { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 12px; border: 1px solid var(--p-ink); border-radius: 3px; background: var(--p-key); font-family: var(--font-heading); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.dlp__play::before { content: ""; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent var(--p-ink); }
.dlp__tempo { display: grid; grid-template-columns: 24px 54px 24px; height: 28px; border: 1px solid var(--p-line-2); border-radius: 3px; background: var(--p-key); overflow: hidden; }
.dlp__tempo u { display: grid; place-items: center; background: var(--p-key-2); text-decoration: none; font-size: 15px; line-height: 1; }
.dlp__tempo b { display: grid; place-items: center; font-family: var(--font-mono); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.dlp__bpm, .dlp__swing i { font-size: 9.5px; font-style: normal; letter-spacing: 0.14em; text-transform: uppercase; color: var(--p-muted); }
.dlp__swing { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.dlp__slider { position: relative; width: 70px; height: 8px; border-radius: 4px; background: var(--p-key-2); box-shadow: inset 0 0 0 1px var(--p-line); }
.dlp__slider::after { content: ""; position: absolute; left: 0; top: -3px; width: 14px; height: 14px; border-radius: 50%; background: #b8402a; border: 2px solid #fff; box-sizing: border-box; }

.dlp__grid { padding: 12px 14px 10px; }
.dlp__row { display: grid; grid-template-columns: var(--p-label) repeat(4, minmax(0, 1fr)) var(--p-beat) repeat(4, minmax(0, 1fr)) var(--p-beat) repeat(4, minmax(0, 1fr)) var(--p-beat) repeat(4, minmax(0, 1fr)); column-gap: 3px; align-items: center; margin-bottom: 4px; }
.dlp__row > :nth-child(6) { grid-column: 7; }
.dlp__row > :nth-child(10) { grid-column: 12; }
.dlp__row > :nth-child(14) { grid-column: 17; }
.dlp__row--head { margin-bottom: 3px; }
.dlp__label { font-family: var(--font-heading); font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
.dlp__short { display: none; }
.dlp__num { text-align: center; font-family: var(--font-mono); font-size: 10.5px; color: var(--p-muted); }
.dlp__num.is-beat { font-weight: 700; color: var(--p-ink); }
.dlp__step { position: relative; height: var(--p-rowh); border: 1px solid var(--p-line-2); border-bottom-width: 3px; border-radius: 3px; background: var(--p-key); box-sizing: border-box; }
.dlp__step.is-alt { background: var(--p-key-2); }
.dlp__mark { position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%); width: 0; height: 0; }
.dlp__step[data-level="1"] { background: var(--p-ghost); border-color: #55595f; }
.dlp__step[data-level="1"] .dlp__mark { top: 50%; bottom: auto; transform: translate(-50%, -50%); width: 5px; height: 5px; border-radius: 50%; background: var(--p-led); }
.dlp__step[data-level="2"], .dlp__step[data-level="3"] { background: var(--p-ink); border-color: #15171a; }
.dlp__step[data-level="2"] .dlp__mark { width: 54%; height: 3px; background: var(--p-led); }
.dlp__step[data-level="3"] .dlp__mark { width: 78%; height: 3px; background: var(--p-led); box-shadow: 0 -7px 0 0 var(--p-led), 0 -14px 0 -1px #f4f1e9; }
.dlp__row--beats { margin: 6px 0 0; }
.dlp__beat { text-align: center; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--p-muted); border-top: 1px solid var(--p-line-2); padding-top: 4px; }

@media (max-width: 900px) {
  .home-drumlab__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}
/* Phone: the same four beats, kept legible by switching to short names, tall narrow pads and beat numbers only. */
@media (max-width: 560px) {
  body.home-page .home-drumlab { padding-top: 56px; padding-bottom: 28px; }
  .dlp { --p-label: 40px; --p-beat: 7px; --p-rowh: 34px; }
  .dlp__bar { padding: 9px 10px; gap: 8px 10px; }
  .dlp__swing { display: none; }
  .dlp__brand { gap: 8px; margin-right: 0; }
  .dlp__logo { height: 22px; }
  .dlp__name { padding-left: 8px; }
  .dlp__name i { display: none; }
  .dlp__brand b { font-size: 11px; letter-spacing: 0.08em; }
  .dlp__bar { gap: 8px; }
  .dlp__play { padding: 0 10px; }
  .dlp__tempo { grid-template-columns: 22px 46px 22px; }
  .dlp__bpm { display: none; }
  .dlp__grid { padding: 10px 10px 8px; }
  .dlp__row { column-gap: 2px; }
  .dlp__full { display: none; }
  .dlp__short { display: inline; font-size: 10px; letter-spacing: 0; }
  .dlp__num:not(.is-beat) { visibility: hidden; }
  .dlp__step { border-radius: 2px; }
}