.hl-slices { background: #161c18; border: 1px solid #4d5744; border-radius: 12px; overflow: hidden; color: #e8e9dd; font: 15px/1.5 Space,system-ui,sans-serif; box-shadow: 0 25px 75px #0003; }
.hl-slices:focus-visible { outline: 2px solid #f0a83a; outline-offset: 4px; }
.hl-slices-stage { position: relative; isolation: isolate; container-type: inline-size; background: #10141b; }
.hl-slices-capture { display: block; width: 100%; height: auto; }
/* Native Play/Stop controls: x78 y314, two 72 × 62 buttons separated by 16 pixels. */
.hl-slices-native-transport { position: absolute; left: 3.095238%; top: 18.087558%; width: 6.349206%; height: 3.571429%; display: grid; grid-template-columns: 1fr 1fr; gap: 10%; }
.hl-slices-native-transport button { padding: 0; border: 1px solid transparent; border-radius: .35cqw; background: transparent; cursor: pointer; }
.hl-slices-native-transport button:hover:not(:disabled),.hl-slices-native-transport button:focus-visible,.hl-slices-native-transport button[aria-pressed=true] { border-color: #f0a83a; background: #f0a83a22; outline: 0; box-shadow: 0 0 0 1px #f0a83a; }
/* Native waveform panel: x76 y388 w2368 h654 in the 2520 × 1736 Sampler capture. */
.hl-slices-wave { position: absolute; left: 3.015873%; top: 22.35023%; width: 93.968254%; height: 37.672811%; background: #171c24; border-radius: .65cqw; container-type: size; }
.hl-slices-wave > img { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; pointer-events: none; }
.hl-slices-regions { position: absolute; inset: 0 0 6.8%; z-index: 1; pointer-events: none; }
.hl-slices-regions i { position: absolute; top: 24px; bottom: 0; width: 25%; background: #e3ad7314; }
.hl-slices-regions i:nth-child(2) { background: #bc93ce14; }
.hl-slices-regions i:nth-child(3) { background: #70b4b914; }
.hl-slices-regions i:nth-child(4) { background: #a4bd8314; }
.hl-slice-start,.hl-slice-end { --cue-color: #f3f1ea; position: absolute; width: 44px; height: 44px; min-height: 44px; padding: 0; margin-left: -22px; border: 0; background: none; color: var(--cue-color); cursor: ew-resize; touch-action: none; }
.hl-slice-start { top: 0; z-index: 3; }
.hl-slice-start::after,.hl-slice-end::before { content: ''; position: absolute; left: 21px; width: 2px; height: calc(93.2cqh - 24px); background: currentColor; pointer-events: none; }
.hl-slice-start::after { top: 24px; opacity: .55; }
.hl-slice-start > span { position: absolute; top: 0; left: 22px; width: 24px; height: 24px; border-radius: 3px; background: var(--cue-color); color: #181c23; box-shadow: 0 1px 5px #0005; font: 600 13px/24px var(--hl-mono); text-align: center; }
.hl-slice-start.is-near-end > span { left: auto; right: 22px; }
.hl-slice-end { bottom: 6.8%; z-index: 4; }
.hl-slice-end::before { bottom: 0; opacity: .7; }
/* The native end flag is a right triangle, with its vertical edge at the cue end. */
.hl-slice-end > span { position: absolute; right: 22px; bottom: 0; width: 17px; height: 17px; background: currentColor; clip-path: polygon(0 100%,100% 0,100% 100%); pointer-events: none; }
.hl-slice-start:hover,.hl-slice-end:hover { z-index: 5; }
.hl-slice-start.is-selected,.hl-slice-end.is-selected { --cue-color: #f0a83a; z-index: 6; }
.hl-slice-start:focus-visible,.hl-slice-end:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; border-radius: 3px; }
.hl-slices-playhead { position: absolute; top: 24px; bottom: 6.8%; left: 0; width: 2px; background: white; box-shadow: 0 0 12px white; z-index: 2; pointer-events: none; }
.hl-slices-native-pads { position: absolute; left: 3.015873%; top: 60.599078%; width: 46.746032%; height: 14.976959%; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .4cqw; }
.hl-slices-native-pads button { position: relative; padding: 0; border: 2px solid transparent; border-radius: .65cqw; background: transparent; color: #c4c8d0; cursor: pointer; }
.hl-slices-native-pads button:hover { background: #fff1; border-color: #f2d59880; }
.hl-slices-native-pads button:focus-visible,.hl-slices-native-pads button.is-playing { border-color: #f1c46d; outline: 0; box-shadow: inset 0 0 0 1px #f1c46d,0 0 18px #efbd6333; background: #f1c46d14; }
.hl-slices-native-pads span { position: absolute; bottom: 3%; left: 4%; width: 60%; padding: .08cqw .12cqw; background: #33414c; color: #c6c8cf; font: 500 .76cqw/1.3 system-ui,sans-serif; text-align: left; }
.hl-slices-native-pads button:nth-child(2) span { background: #353c4f; }
.hl-slices-native-pads button:nth-child(3) span { background: #3a394c; }
.hl-slices-native-pads button:nth-child(4) span { background: #334245; }
.hl-slices-accessible { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.hl-slices button:disabled { opacity: .45; cursor: default; }
.hl-slices [hidden] { display: none; }