/* Homepage MIDI Studio Pro feature (components/MidiLabPreview.tsx). A static HTML/CSS miniature of the real workspace, using its
   own colour tokens (.mlp in styles.css). Visual only: no script, no audio. Scoped to .mlpv / .home-midilab. */
body.home-page .home-midilab { padding-top: 64px; padding-bottom: 56px; }
.home-midilab__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "visual copy"; gap: 32px 56px; align-items: center; }
.home-midilab__copy { grid-area: copy; }
.home-midilab__visual { grid-area: visual; min-width: 0; }
.home-midilab__copy h2 { margin: 4px 0 12px; }
.home-midilab__copy p { margin: 0 0 20px; max-width: 34em; }
.home-midilab__cta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; }
.home-midilab__note { font-size: 0.8125rem; color: var(--muted, #515659); }
.home-midilab__copy .home-midilab__alt { margin: 14px 0 0; font-size: 0.9375rem; }

.mlpv {
  --m-bg: #171a1e; --m-panel: #1e2227; --m-line: rgba(255,255,255,0.11); --m-text: #e8ebee; --m-muted: #a3adb6; --m-field: #14171a;
  --m-roll: #1b1f24; --m-white: #23282e; --m-black: #1c2025; --m-key-white: #d5dade; --m-key-black: #14171a; --m-key-text: #3b444c;
  --m-accent: #aa96c6; --m-chords: #7fa8bf; --m-bass: #aa96c6; --m-melody: #83b8ae; --m-row: 7px;
  display: grid; grid-template-columns: 200px minmax(0, 1fr); background: var(--m-bg); color: var(--m-text); border: 1px solid #0e1114;
  border-radius: 6px; overflow: hidden; box-shadow: 0 6px 18px -12px rgba(23, 26, 30, 0.6); min-width: 0; user-select: none; font-size: 11px;
}
.mlpv, .mlpv * { box-sizing: border-box; }
.mlpv u { text-decoration: none; }
.mlpv i { font-style: normal; }

/* ---- left panel ---- */
.mlpv__panel { background: var(--m-panel); border-right: 1px solid var(--m-line); padding: 12px 12px 14px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.mlpv__brand { display: flex; align-items: center; gap: 10px; min-height: 26px; }
.mlpv__logo { display: block; height: 21px; width: auto; flex: none; opacity: 0.92; }
.mlpv__brand b { font: 700 9.5px/22px var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; padding-left: 10px; border-left: 1px solid var(--m-line); white-space: nowrap; }
.mlpv__group > i, .mlpv__parts > i { display: block; font: 600 9px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--m-muted); padding-bottom: 5px; margin-bottom: 6px; border-bottom: 1px solid var(--m-line); }
.mlpv__fields { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: 6px; }
.mlpv__fields label { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mlpv__fields label span { font: 600 8.5px/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--m-muted); }
.mlpv__fields label u { display: block; height: 22px; line-height: 20px; padding: 0 7px; border: 1px solid var(--m-line); border-radius: 3px; background: var(--m-field); color: var(--m-text); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mlpv__wide { grid-column: 1 / -1; }
.mlpv__generate { display: block; text-align: center; padding: 9px 0; border-radius: 4px; background: #665581; color: #fff; font: 700 10.5px/1 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; }
.mlpv__parts { display: flex; flex-direction: column; gap: 5px; }
.mlpv__part { display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 600; }
.mlpv__dot { width: 9px; height: 9px; border-radius: 2px; background: var(--m-chords); }
.mlpv__dot--bass { background: var(--m-bass); }
.mlpv__dot--melody { background: var(--m-melody); }

/* ---- stage: transport fragment + piano roll ---- */
.mlpv__stage { display: flex; flex-direction: column; min-width: 0; }
.mlpv__bar { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--m-line); font-size: 11px; white-space: nowrap; overflow: hidden; }
.mlpv__btn { padding: 4px 9px; border: 1px solid var(--m-line); border-radius: 3px; background: rgba(255,255,255,0.05); font-weight: 600; }
.mlpv__pos { margin-left: 4px; font: 600 9.5px/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--m-muted); }
.mlpv__pos b { color: var(--m-text); }
.mlpv__edit { margin-left: auto; font: 600 9px/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--m-muted); }
.mlpv__edit u { display: inline-block; margin-left: 4px; padding: 4px 7px; border: 1px solid var(--m-line); border-radius: 3px; background: rgba(255,255,255,0.05); color: var(--m-text); }
.mlpv__roll { display: grid; grid-template-columns: 38px minmax(0, 1fr); flex: 1; background: var(--m-roll); }
.mlpv__keys { display: flex; flex-direction: column; margin-top: 16px; }
.mlpv__key { flex: 1 1 0; min-height: var(--m-row); background: var(--m-key-white); border-bottom: 1px solid #b9c0c6; font: 8px/var(--m-row) var(--font-mono); color: var(--m-key-text); text-align: right; padding-right: 3px; overflow: hidden; }
.mlpv__key.is-black { background: var(--m-key-black); border-bottom-color: #000; margin-right: 12px; }
.mlpv__grid { display: flex; flex-direction: column; min-width: 0; }
.mlpv__ruler { height: 16px; display: grid; grid-template-columns: repeat(4, 1fr); background: #14171a; border-bottom: 1px solid var(--m-line); }
.mlpv__ruler span { padding: 3px 0 0 4px; font: 600 8.5px/1 var(--font-mono); color: var(--m-muted); border-left: 1px solid rgba(255,255,255,0.36); }
.mlpv__ruler span:first-child { border-left: 0; }
.mlpv__notes { position: relative; min-height: calc(var(--m-row) * 36); flex: 1 1 auto; }
.mlpv__rows { position: absolute; inset: 0; display: flex; flex-direction: column; z-index: 0; }
.mlpv__rows span { flex: 1; background: var(--m-white); }
.mlpv__rows span.is-black { background: var(--m-black); }
.mlpv__notes::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background:
    repeating-linear-gradient(to right, rgba(255,255,255,0.36) 0 1px, transparent 1px 25%),
    repeating-linear-gradient(to right, rgba(255,255,255,0.14) 0 1px, transparent 1px 6.25%); }
.mlpv__note { position: absolute; z-index: 2; border-radius: 1.5px; background: var(--m-chords); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.35); }
.mlpv__note--bass { background: var(--m-bass); }
.mlpv__note--melody { background: var(--m-melody); }

/* Narrow two-column desktop: the stage is too short for the Grid / Snap fragment, so it is left out rather than clipped. */
@media (min-width: 901px) and (max-width: 1100px) { .mlpv__edit { display: none; } }

/* ---- tablet / phone ---- */
@media (max-width: 900px) {
  .home-midilab__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "visual"; gap: 28px; }
}
@media (max-width: 760px) {
  .mlpv { grid-template-columns: 168px minmax(0, 1fr); }
  .mlpv__edit, .mlpv__btn--opt, .mlpv__pos { display: none; }
}
@media (max-width: 560px) {
  body.home-page .home-midilab { padding-top: 44px; padding-bottom: 40px; }
  /* Phone: the same workspace, condensed. The settings panel becomes a one-row header + part legend above the roll. */
  .mlpv { grid-template-columns: minmax(0, 1fr); --m-row: 5px; }
  .mlpv__panel { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 9px 10px; border-right: 0; border-bottom: 1px solid var(--m-line); }
  .mlpv__group, .mlpv__generate, .mlpv__parts > i { display: none; }
  .mlpv__parts { flex-direction: row; gap: 12px; margin-left: auto; }
  .mlpv__bar { padding: 6px 10px; }
  .mlpv__roll { grid-template-columns: 30px minmax(0, 1fr); }
  .mlpv__key { font-size: 6.5px; }
}