.hl-demo [hidden] { display: none !important; }
.hl-demo { --demo-gold: #f4af38; --demo-start: 0%; --demo-end: 100%; }
.hl-demo-groove-meta { display: grid; gap: 7px; max-width: 230px; }
.hl-demo-groove-meta p { margin: 0; color: var(--hl-muted); font-size: 14px; line-height: 1.5; }
.hl-demo-groove-beats { display: flex; gap: 7px; }
.hl-demo-groove-beats i { width: 8px; height: 8px; border-radius: 50%; background: #565b4d; }
.hl-demo-groove-beats i.is-active { background: #f4af38; box-shadow: 0 0 10px #f4af3860; }
.hl-demo-stage { container-type: inline-size; isolation: isolate; }
.hl-demo-native { position: absolute; inset: 0; }
.hl-demo button { font-family: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.hl-demo button:focus-visible, .hl-demo input:focus-visible { outline: 3px solid #f4af38; outline-offset: 4px; }
.hl-demo-pad-grid { position: absolute; left: 1.5873%; top: 17.51152%; width: 46.8254%; height: 54.60829%; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); gap: 2.1097% 1.69492%; }
.hl-demo-pad { appearance: none; padding: 0; border: 1px solid transparent; border-radius: 6%; background: transparent; position: relative; transition: background 120ms, box-shadow 120ms; }
.hl-demo-pad:first-child:not(.is-selected) { box-shadow: inset 0 0 0 3px #746365; }
.hl-demo-pad.is-selected { box-shadow: inset 0 0 0 2px var(--demo-gold); }
.hl-demo-pad:hover { background: #ffffff0c; box-shadow: inset 0 0 0 2px var(--pad-color), 0 0 22px color-mix(in srgb, var(--pad-color), transparent 70%); }
.hl-demo-pad.is-playing { background: #f4af3829; box-shadow: inset 0 0 0 2px #ffd282, 0 0 22px #f4af3855; }
.hl-demo-pad-face { position: absolute; inset: 1px; display: flex; flex-direction: column; justify-content: space-between; padding: .85cqw .9cqw; border: 1px solid color-mix(in srgb,var(--pad-color),transparent 35%); border-radius: 5%; background: linear-gradient(135deg,color-mix(in srgb,var(--pad-color),#242830 73%),#2b2930); color: #e9e7e3; text-align: left; }
.hl-demo-pad-top { display: flex; align-items: center; justify-content: space-between; font: 500 .78cqw/1.2 system-ui,sans-serif; }
.hl-demo-pad-top > :last-child,.hl-demo-pad-top svg { color: var(--pad-color); }
.hl-demo-pad-top svg { width: 1.25cqw; height: 1.25cqw; }
.hl-demo-pad-face strong { font: 600 1.12cqw/1.25 system-ui,sans-serif; }
.hl-demo-pad-face small { font: 500 .76cqw/1.3 system-ui,sans-serif; color: #c6c8cf; }
.hl-demo-pad-custom { background: #10141b; border-color: var(--pad-color); }
.hl-demo-pad-custom.is-selected .hl-demo-pad-face { border-color: var(--demo-gold); }
.hl-demo-pad-custom:hover .hl-demo-pad-face { filter: brightness(1.15); }
.hl-demo-pad-custom.is-playing .hl-demo-pad-face { background: linear-gradient(135deg,#806444,#51413a); border-color: #ffd282; }
.hl-demo-native-title { position: absolute; left: 53.89%; top: 14.73%; width: 31.5%; height: 3.8%; display: flex; align-items: center; background: #1e2129; color: #e8e7e3; font: 600 1.37cqw/1.3 system-ui, sans-serif; letter-spacing: .01em; }
.hl-demo-native-format { position: absolute; left: 51.2%; top: 18.5%; width: 24%; height: 1.8%; background: #1e2129; color: #aaaeb8; font: .9cqw/1.4 system-ui, sans-serif; }
.hl-demo-native-button { position: absolute; display: inline-flex; align-items: center; gap: .5cqw; padding: 0; border: 0; font: 500 .94cqw/1.2 system-ui, sans-serif; color: #aaaeb8; background: #1e2129; text-align: left; }
.hl-demo-native-button:hover { color: #f4af38; }
.hl-demo-original { left: 52.38%; top: 21.37%; width: 8.45%; height: 2.2%; }
.hl-demo-edited { left: 61.22%; top: 21.37%; width: 8.45%; height: 2.2%; }
.hl-demo-native-source { position: absolute; left: 51.2%; top: 24.6%; width: 25%; height: 2%; background: #1e2129; color: #aaaeb8; font: .9cqw/1.4 system-ui, sans-serif; }
.hl-demo-source { position: absolute; left: 50.79365%; top: 26.95852%; width: 46.8254%; height: 33.87097%; }
.hl-demo-source canvas { display: block; width: 100%; height: 100%; background: #111318; }
.hl-demo-trim-shade { position: absolute; top: 0; bottom: 0; background: #06080bbb; pointer-events: none; }
.hl-demo-trim-shade-start { left: 0; width: var(--demo-start); }
.hl-demo-trim-shade-end { left: var(--demo-end); right: 0; }
.hl-demo-trim { position: absolute; top: 0; bottom: 0; width: 20px; padding: 0; transform: translateX(-50%); border: 0; background: transparent; touch-action: none; cursor: ew-resize !important; }
.hl-demo-trim::before { content: ''; position: absolute; left: calc(50% - 1px); top: 0; bottom: 0; width: 2px; background: var(--demo-gold); }
.hl-demo-trim::after { content: ''; position: absolute; top: 0; left: calc(50% - 4px); width: 8px; height: 15px; border-radius: 1px; background: var(--demo-gold); }
.hl-demo-trim-start { left: var(--demo-start); }
.hl-demo-trim-end { left: var(--demo-end); }
.hl-demo-native-duration { position: absolute; left: 50.8%; top: 60.86%; width: 44%; height: 1.6%; background: #1e2129; color: #aaaeb8; font: .87cqw/1.5 system-ui, sans-serif; }
.hl-demo-edited-wave { position: absolute; left: 50.79365%; top: 62.67281%; width: 46.8254%; height: 13.01843%; background: #111318; border-radius: .3cqw; }
.hl-demo-native-trim-start, .hl-demo-native-trim-end { position: absolute; top: 86.27%; width: 5%; height: 2%; background: #1e2129; color: #e5e6e7; text-align: center; font: .85cqw/1.5 system-ui, sans-serif; }
.hl-demo-native-trim-start { left: 51.76%; }
.hl-demo-native-trim-end { left: 58.35%; }
.hl-demo-native-reverse { left: 51.15%; top: 89.07%; width: 6.45%; height: 2.7%; color: #e5e6e7; }
.hl-demo-checkbox { width: 1.1cqw; height: 1.1cqw; border: 1px solid #6f7580; border-radius: .2cqw; display: inline-grid; place-items: center; }
.hl-demo-native-reverse[aria-pressed='true'] .hl-demo-checkbox { background: #f4af38; border-color: #f4af38; }
.hl-demo-native-reverse[aria-pressed='true'] .hl-demo-checkbox::after { content: '✓'; color: #171a21; }
.hl-demo-native-reset { left: 90.67%; top: 88.75%; width: 6.95%; height: 2.7%; justify-content: center; border: 1px solid #4d5564; border-radius: .3cqw; background: #333a46; color: #e5e6e7; font-size: .8cqw; }
.hl-demo-native-stop { left: 71.98%; top: 94.17%; width: 6.95%; height: 3.4%; justify-content: center; border-radius: .3cqw; background: #333a46; color: #e5e6e7; font-size: .8cqw; }
.hl-demo-native-volume { position: absolute; left: 7.55%; top: 94.35%; width: 10.15%; height: 3%; margin: 0; background: #111318; accent-color: #f4af38; cursor: pointer; }
.hl-demo-native-volume-value { position: absolute; left: 18.7%; top: 94.25%; width: 4.8%; height: 3%; display: grid; place-items: center; background: #111318; color: #e5e6e7; border: 1px solid #80878c; font: 1.08cqw/1 system-ui, sans-serif; }
.hl-demo-playhead { position: absolute; top: 0; bottom: 0; width: 1px; background: #ffffffc9; pointer-events: none; }
.hl-demo-control { display: inline-flex; justify-content: center; align-items: center; gap: 8px; min-height: 44px; padding: 9px 14px; border: 1px solid #626557; border-radius: 5px; color: var(--hl-cream, #eee); background: #ffffff06; font-size: 15px; }
.hl-demo-control:hover { border-color: #a9b48d; background: #ffffff0b; }
.hl-demo-control[aria-pressed='true'] { border-color: #f4af38; color: #f7bd62; background: #f4af3815; }
.hl-demo-play-control { min-width: 88px; border-color: #9aa67c; color: #e3ebc5; }
.hl-demo .hl-demo-keyboard { color: var(--hl-muted); font-size: 14px; line-height: 1.8; margin: 10px 0 0; }
.hl-demo-keyboard kbd { color: #cdd1bf; font: 14px/1.6 var(--hl-mono, monospace); padding: 2px 5px; border: 1px solid #ffffff1f; border-radius: 3px; margin: 0 3px; white-space: nowrap; }
.hl-demo-fallback { color: var(--hl-muted); font-size: 16px; line-height: 1.6; }
.hl-demo-mobile { display: none; }
.hl-demo-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .hl-demo-pad { transition: none; } }
@media (max-width: 760px) {
    .hl-demo-play-control { flex-basis: 100%; }
    .hl-demo-groove-meta { display: flex; align-items: center; gap: 12px; max-width: none; }
    .hl-demo-groove-meta p { font-size: 14px; }
    .hl-demo-groove-beats { flex-shrink: 0; }
    .hl-demo-native { pointer-events: none; }
    .hl-demo-native button, .hl-demo-native input { visibility: hidden; }
    .hl-demo-native .hl-demo-pad-custom .hl-demo-pad-face { visibility: visible; pointer-events: none; }
    .hl-demo-mobile { display: block; margin-top: 16px; }
    .hl-demo-mobile-pads { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
    .hl-demo-mobile-pad { color: #eeeeea; border: 1px solid color-mix(in srgb, var(--pad-color), transparent 48%); border-radius: 7px; background: linear-gradient(145deg, color-mix(in srgb, var(--pad-color), #111318 72%), #20232b); min-width: 0; min-height: 76px; text-align: left; padding: 9px 8px; }
    .hl-demo-mobile-pad > span { display: flex; justify-content: space-between; color: var(--pad-color); font-size: 14px; }
    .hl-demo-mobile-pad kbd { font: inherit; opacity: .7; }
    .hl-demo-mobile-pad strong { display: block; margin-top: 10px; font-size: 14px; line-height: 1.3; font-weight: 500; }
    .hl-demo-mobile-pad.is-selected { border-color: #f4af38; box-shadow: inset 0 0 0 1px #f4af38; }
    .hl-demo-mobile-pad.is-playing { background: #665238; }
    .hl-demo-control { flex-grow: 1; padding-inline: 11px; }
    .hl-demo .hl-demo-keyboard { display: none; }
}

.hl-demo-native-kit { position: absolute; left: 4.8%; top: 9.15%; width: 12.3%; height: 2.5%; background: #1c2129; display: flex; align-items: center; color: #dce0e4; font: 600 1.03cqw/1.3 system-ui,sans-serif; }
.hl-demo-credits { color: var(--hl-muted); font-size: 13px; line-height: 1.6; margin-top: 10px; }
.hl-demo-credits summary { width: fit-content; cursor: pointer; }
.hl-demo-credits p { margin: 8px 0; max-width: 850px; }
.hl-demo-credits a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

.hl-demo-transport { display: flex; gap: 20px; align-items: center; margin: 0 0 20px; }
.hl-demo-transport .hl-demo-play-control { min-width: 130px; background: #d4dc98; border-color: #d4dc98; color: #20251a; font-weight: 600; }
.hl-demo-transport .hl-demo-play-control:hover { background: #e4ebb4; }
.hl-demo-transport .hl-demo-play-control[aria-pressed='true'] { background: #e8b365; border-color: #e8b365; color: #262219; }
.hl-demo-transport-note { color: #9faa91; font: 13px/1.5 var(--hl-mono,monospace); margin-left: auto; }
@media(max-width:760px) {
 .hl-demo-transport { flex-wrap: wrap; gap: 12px; }
 .hl-demo-transport .hl-demo-play-control { flex-basis: auto; flex-grow: 1; }
 .hl-demo-transport-note { display: none; }
}

/* Content-only Hitloom 3.0.1-16 capture: 2520 × 1736 pixels. */
.hl-demo-stage { aspect-ratio: 2520 / 1736; }
.hl-demo-stage > img { position: static; display: block; max-width: 100%; width: 100%; height: auto; }
.hl-demo-native-title { left: 53.25%; top: 14.75%; height: 3.7%; width: 28%; background: #1e232b; }
.hl-demo-native-format { left: 83%; top: 15.1%; width: 12%; height: 2.3%; font-size: .75cqw; background: #1e232b; text-align: right; }
.hl-demo-native-button { background: #1e232b; }
.hl-demo-original { top: 18.31797%; left: 50.79365%; width: 6.03175%; height: 2.76498%; }
.hl-demo-edited { top: 18.31797%; left: 57.14286%; width: 5.39683%; height: 2.76498%; }
.hl-demo-native-source { display: none !important; }
.hl-demo-source { top: 24.42%; height: 34.79%; }
.hl-demo-native-duration { top: 59.7%; height: 2.5%; background: #1e232b; }
.hl-demo-edited-wave { top: 63.71%; height: 13.6%; }
.hl-demo-native-trim-start,.hl-demo-native-trim-end { top: 86.3%; height: 2.4%; background: #1e232b; }
.hl-demo-native-reverse { top: 88.95%; height: 2.8%; }
.hl-demo-native-reset { left: 92.9%; top: 88.71%; width: 4.7%; height: 2.765%; font-size: .65cqw; }
.hl-demo-native-stop { left: 70.2%; top: 94.4%; width: 7%; height: 3.5%; }
.hl-demo-native-volume { left: 7.4%; top: 94.05%; width: 10.85%; height: 3.7%; }
.hl-demo-native-volume-value { left: 18.45%; top: 94.5%; width: 4.65%; height: 2.8%; }