#chunk-panel { --panel:#303030; --line:#45475a; --text:#cdd6f4; --muted:#bac2de; --accent:#cba6f7; --player:#ff3900; --played:#999999; --mono:ui-monospace,SFMono-Regular,Consolas,monospace; width:100%; min-width:0; color:var(--text); text-align:left; }
#horizontalViewport { overflow:hidden; padding-top:52px; margin-top:12px; }
#horizontalTimeline { position:relative; height:190px; margin:0; }
#horizontalTrack { position:absolute; inset:0; overflow:hidden; }
#horizontalWindow { position:absolute; top:14px; height:104px; border:1px dashed var(--muted); border-radius:8px; background:color-mix(in srgb,var(--accent) 12%,var(--panel)); pointer-events:none; }
#horizontalWindow>span { position:absolute; top:calc(100% + 10px); left:8px; font:9px var(--mono); color:var(--accent); white-space:nowrap; }
.horizontal-chunk { position:absolute; top:24px; height:82px; background:var(--color); color:#11111b; border:0; border-radius:6px; padding:10px 4px; overflow:hidden; text-align:left; cursor:pointer; }
.horizontal-chunk b { display:block; font:12px var(--mono); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.horizontal-chunk small { display:block; font:10px var(--mono); margin-top:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.horizontal-chunk[data-playback="played"],.horizontal-chunk[data-playback="expired"] { background:var(--played); }
.horizontal-chunk[data-playback="playing"]::after { content:"▶"; position:absolute; bottom:8px; right:4px; }
.horizontal-chunk[aria-pressed="true"] { box-shadow:inset 0 0 0 999px #ffffff20; }
.horizontal-chunk:hover { filter:brightness(1.12); }
.horizontal-chunk:active { filter:brightness(.85); }
.horizontal-chunk:focus-visible { outline:2px solid #11111b; outline-offset:-3px; }
#horizontalProducer { position:absolute; top:24px; height:82px; border-radius:6px; background:repeating-linear-gradient(135deg,var(--line) 0 8px,var(--panel) 8px 16px); overflow:hidden; color:var(--muted); pointer-events:none; }
#horizontalProducer .factory { position:absolute; inset:0 auto 0 0; width:var(--producer-width); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; }
#horizontalProducer b { font:11px var(--mono); }
#horizontalProducer svg { width:32px; max-width:90%; height:32px; }
.spinner-track,.spinner-arc { fill:none; stroke:currentColor; stroke-width:4; }
.spinner-track { opacity:.25; }
.spinner-arc { stroke-dasharray:65 30; stroke-linecap:round; }
.horizontal-head { position:absolute; top:0; height:128px; width:2px; background:var(--player); pointer-events:none; }
.horizontal-head>span { position:absolute; top:-28px; left:50%; transform:translateX(-50%); white-space:nowrap; text-align:center; font:10px var(--mono); color:var(--text); background:var(--panel); }
.horizontal-head time { display:block; font-size:11px; }
#horizontalLive>span { top:-50px; left:auto; right:0; transform:none; text-align:right; }
#horizontalPlayer[data-edge="start"]>span { left:0; transform:none; text-align:left; }
#horizontalPlayer[data-edge="end"]>span { left:auto; right:0; transform:none; text-align:right; }
#horizontalBuffer { position:absolute; top:110px; height:4px; background:var(--player); pointer-events:none; border-radius:2px; }
#delay-value { position:absolute; top:148px; transform:translateX(-50%); color:var(--player); font:600 19px/1.2 var(--mono); font-variant-numeric:tabular-nums; white-space:nowrap; }
@media(max-width:600px) { .horizontal-chunk { padding-inline:1px; } .horizontal-chunk b,.horizontal-chunk small { font-size:0; } .horizontal-chunk b::after,.horizontal-chunk small::after { content:attr(data-compact); font:8px var(--mono); } #horizontalWindow>span { font-size:8px; } }