/* Homepage Vocal Studio feature. Static and light: it borrows the instrument's colour tokens, shares none of its code.
 * Slices are numbered and outlined, rests are dashed with a dash character: nothing depends on colour alone. */
body.home-page .home-vocal { padding-top: 64px; padding-bottom: 64px; }
.home-vocal__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px 48px; align-items: center; }
.home-vocal__copy h2 { margin: 4px 0 12px; }
.home-vocal__copy p { margin: 0 0 20px; max-width: 34em; }
.home-vocal__cta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; }
.home-vocal__note { font-size: 0.8125rem; color: var(--muted, #515659); }
.vsp { --p-body: #e7e3d9; --p-body-2: #ddd8cb; --p-key: #f4f1e9; --p-line: #bdb6a6; --p-line-2: #a9a291; --p-ink: #25282c; --p-muted: #515659; --p-led: #e2531a;
  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; }
.vsp__bar { display: flex; align-items: center; gap: 10px 14px; padding: 10px 14px; background: var(--p-body-2); border-bottom: 1px solid var(--p-line-2); }
.vsp__brand { display: flex; align-items: center; gap: 10px; }
.vsp__logo { display: block; height: 26px; width: auto; }
.vsp__name { display: flex; flex-direction: column; line-height: 1.15; padding-left: 10px; border-left: 1px solid var(--p-line-2); }
.vsp__name b { font-family: var(--font-heading); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; }
.vsp__name i { font-style: normal; font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--p-muted); }
.vsp__play { margin-left: auto; 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; letter-spacing: 0.1em; text-transform: uppercase; }
.vsp__play::before { content: ""; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent var(--p-ink); }
.vsp__wave { position: relative; height: 120px; margin: 12px; background: var(--p-key); border: 1px solid var(--p-line-2); border-radius: 3px; }
.vsp__bars { position: absolute; inset: 8px 0; display: flex; align-items: center; gap: 0; padding: 0 1px; }
.vsp__bars i { flex: 1 1 0; margin: 0 1px; background: var(--p-ink); border-radius: 1px; min-height: 2px; opacity: 0.85; }
.vsp__slice { position: absolute; top: 0; bottom: 0; border-left: 2px solid var(--p-ink); background: rgba(224, 80, 30, 0.10); box-sizing: border-box; }
.vsp__slice:nth-child(even) { background: rgba(224, 80, 30, 0.20); }
.vsp__slice b { position: absolute; left: 4px; top: 2px; font-family: var(--font-heading); font-size: 11px; }
.vsp__steps { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 3px; padding: 0 12px 12px; }
.vsp__step { display: grid; place-items: center; height: 34px; border-radius: 3px; background: var(--p-ink); color: #f4f1e9; font-family: var(--font-heading); font-weight: 700; font-size: 13px; border-bottom: 3px solid var(--p-led); }
.vsp__step.is-rest { background: transparent; color: var(--p-muted); border: 1px dashed var(--p-line-2); border-bottom-width: 1px; font-weight: 400; }
.vsp__step.is-beat:not(.is-rest) { box-shadow: 0 -3px 0 0 var(--p-line-2); }
@media (max-width: 860px) { .home-vocal__grid { grid-template-columns: minmax(0, 1fr); } .vsp__step { height: 28px; font-size: 11px; } }