[hidden] { display: none !important; }
.brand-mark { clip-path: polygon(0 0, 100% 50%, 0 100%); }
.guide-scroll { max-height: min(76vh, 860px); overflow: auto; position: relative; }
.guide-grid { --slot-height: 120px; min-width: 980px; position: relative; }
.time-header, .channel-header, .time-label { position: absolute; }
.time-header { left: 0; top: 0; width: 120px; height: 64px; z-index: 8; }
.channel-header { top: 0; height: 64px; z-index: 6; }
.time-label { left: 0; width: 120px; z-index: 5; }
.time-header, .channel-header, .time-label { will-change: transform; }
.now-line { position: absolute; left: 0; right: 0; height: 2px; background: #009440; z-index: 2; box-shadow: 0 0 0 1px rgba(0, 148, 64, 0.25); pointer-events: none; }
.program-card { z-index: 1; }
.program-card > * { position: relative; z-index: 3; }
.program-card:focus-visible { outline: 2px solid #ffcb00; outline-offset: -3px; }
.program-card.playing { outline: 2px solid #009440; outline-offset: -3px; }
.card-play-overlay { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; background: rgba(0, 0, 0, 0.34); opacity: 0; transition: opacity 150ms ease; pointer-events: none; }
.program-card:hover .card-play-overlay, .program-card:focus-visible .card-play-overlay { opacity: 1; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.player-poster::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 6, 7, 0.15), rgba(5, 6, 7, 0.72)); }
.poster-play { position: relative; z-index: 1; display: grid; width: 76px; height: 76px; place-items: center; border-radius: 9999px; background: #f04f3c; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35); }
.poster-play::before { content: ""; width: 0; height: 0; margin-left: 5px; border-top: 14px solid transparent; border-bottom: 14px solid transparent; border-left: 22px solid #fff; }
.play-glyph, .icon-play-button span { display: block; width: 0; height: 0; margin-left: 2px; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 10px solid currentColor; }
.icon-play-button span { border-top-width: 6px; border-bottom-width: 6px; border-left-width: 9px; }
.restart-glyph { display: block; font-size: 18px; font-weight: 800; line-height: 1; transform: translateY(-1px); }
.youtube-glyph { position: relative; display: block; width: 20px; height: 14px; border-radius: 4px; background: #f04f3c; }
.youtube-glyph::after { content: ""; position: absolute; left: 8px; top: 3px; width: 0; height: 0; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 6px solid #fff; }
