@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&family=Syne:wght@700;800&display=swap");

:root { --paper: #f0ecdf; --ink: #243031; --cream: #fffdf4; --accent: #ff6420; --secondary: #efcb8c; --shadow: #b85c31; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: "Space Grotesk", Arial, sans-serif; }
button, a { font: inherit; }

.broadcast-snap { min-height: 100svh; background: radial-gradient(circle at 91% 84%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 28%), var(--paper); transition: background .56s ease; }
.broadcast-nav { position: fixed; inset: 0 0 auto; z-index: 20; width: calc(100% - 92px); min-height: 92px; display: grid; grid-template-columns: 1fr auto 1fr; gap: 1.5rem; align-items: center; margin: auto; border-bottom: 1px solid rgb(36 48 49 / .17); font: 500 .68rem/1 "DM Mono", monospace; letter-spacing: .07em; text-transform: uppercase; }
.broadcast-brand { display: inline-flex; align-items: center; gap: .65rem; color: var(--ink); font: 800 1.08rem/1 "Space Grotesk", sans-serif; letter-spacing: -.05em; text-decoration: none; text-transform: lowercase; }.broadcast-brand img { width: 36px; height: 36px; display: block; flex: 0 0 36px; border-radius: 50%; }.broadcast-brand b { font-weight: 800; }
.broadcast-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; }.broadcast-links a { padding: .45rem .58rem; border: 1px solid transparent; border-radius: 0; color: var(--ink); opacity: .68; text-decoration: none; transition: border-color 180ms ease, color 180ms ease, opacity 180ms ease; }.broadcast-links a:hover, .broadcast-links a:focus-visible { border-color: #ff6420; color: var(--ink); opacity: 1; outline: 0; }.broadcast-live { justify-self: end; color: rgb(36 48 49 / .64); }.broadcast-menu-toggle { display: none; }

.broadcast-stage { height: 100svh; display: grid; place-items: center; padding: 112px 46px clamp(1rem, 3.1vw, 3rem); touch-action: none; }
.broadcast-frame { position: relative; width: min(1480px, 100%); height: min(780px, calc(100svh - 136px)); min-height: 520px; display: grid; grid-template-columns: minmax(310px, .86fr) minmax(380px, 1.14fr); grid-template-rows: 1fr auto; gap: clamp(1.2rem, 2.5vw, 2.8rem); overflow: hidden; isolation: isolate; padding: clamp(1.45rem, 3vw, 3.4rem); border: 1px solid color-mix(in srgb, var(--accent) 61%, #d8d5c5); border-radius: clamp(18px, 2.1vw, 34px); background: linear-gradient(135deg, #fffdf4, color-mix(in srgb, var(--accent) 7%, #fffdf4) 66%, #f7f3e8); box-shadow: 14px 14px 0 color-mix(in srgb, var(--shadow) 30%, transparent); transition: border-color .45s ease, background .45s ease, box-shadow .45s ease; }
.frame-grid { position: absolute; z-index: -4; inset: 0; opacity: .38; background-image: linear-gradient(color-mix(in srgb, var(--accent) 17%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--accent) 17%, transparent) 1px, transparent 1px), radial-gradient(color-mix(in srgb, var(--accent) 28%, transparent) .7px, transparent .8px); background-size: 9% 12%, 9% 12%, 5px 5px; transition: background-size .58s ease, opacity .45s ease; }.broadcast-snap[data-active="1"] .frame-grid { background-size: 6% 8%, 6% 8%, 5px 5px; opacity: .46; }.broadcast-snap[data-active="2"] .frame-grid { background-size: 13% 9%, 13% 9%, 5px 5px; opacity: .3; }.broadcast-snap[data-active="3"] .frame-grid { background-size: 8% 8%, 8% 8%, 4px 4px; opacity: .45; }
.frame-squares i { position: absolute; z-index: 3; width: 20px; aspect-ratio: 1; background: var(--accent); transition: transform .56s cubic-bezier(.22,1,.36,1), background .45s ease; }.frame-squares i:first-child { top: 23px; right: 23px; }.frame-squares i:last-child { top: 47px; right: 47px; background: color-mix(in srgb, var(--secondary) 55%, transparent); }.broadcast-snap[data-active="1"] .frame-squares i:first-child { transform: translate(-460%, 500%) rotate(45deg); }.broadcast-snap[data-active="2"] .frame-squares i:first-child { border-radius: 50%; transform: translate(-920%, 950%); }.broadcast-snap[data-active="3"] .frame-squares i:first-child { transform: translate(-1650%, 60%) rotate(45deg); }

/* The moving square is decorative. Keep it inside a very short viewport so
   it cannot temporarily expand the animation's paint bounds on rotation. */
@media (orientation: landscape) and (max-height: 560px) {
  .broadcast-frame { overflow: clip; }
  .broadcast-snap[data-active="1"] .frame-squares i:first-child { transform: translate(-360%, 250%) rotate(45deg); }
  .broadcast-snap[data-active="2"] .frame-squares i:first-child { transform: translate(-480%, 390%); }
  .broadcast-snap[data-active="3"] .frame-squares i:first-child { transform: translate(-720%, 60%) rotate(45deg); }
}

.broadcast-art, .broadcast-art > div { position: absolute; inset: 0; pointer-events: none; }.broadcast-art > div { z-index: 0; opacity: 0; transform: translate3d(0, 18px, 0) scale(.98); transition: opacity .34s ease, transform .58s cubic-bezier(.22,1,.36,1); }.broadcast-snap[data-scene="A"] .art-hospital, .broadcast-snap[data-scene="B"] .art-radio, .broadcast-snap[data-scene="C"] .art-blue, .broadcast-snap[data-scene="D"] .art-night { opacity: 1; transform: none; }
.hospital-orbit { position: absolute; width: min(36vw, 440px); aspect-ratio: 1; right: 20%; bottom: 16%; border: 2px solid var(--accent); border-radius: 50%; box-shadow: 0 0 0 25px color-mix(in srgb, var(--accent) 9%, transparent), 0 0 0 50px color-mix(in srgb, var(--accent) 4%, transparent); animation: hospital-orbit 6s ease-in-out infinite alternate; }.hospital-bars { position: absolute; right: 7%; bottom: 15%; width: 52%; height: 48%; display: flex; align-items: end; gap: 1%; }.hospital-bars i { flex: 1; background: var(--accent); transform-origin: bottom; animation: steady-bars 2.2s ease-in-out infinite alternate; }.hospital-bars i:nth-child(1) { height: 24%; }.hospital-bars i:nth-child(2) { height: 48%; animation-delay: -.8s; }.hospital-bars i:nth-child(3) { height: 34%; animation-delay: -1.1s; }.hospital-bars i:nth-child(4) { height: 72%; animation-delay: -.5s; }.hospital-bars i:nth-child(5) { height: 55%; animation-delay: -1.5s; }.hospital-bars i:nth-child(6) { height: 91%; animation-delay: -.9s; }.hospital-bars i:nth-child(7) { height: 44%; animation-delay: -.3s; }.hospital-lines { position: absolute; width: 44%; height: 18%; right: 27%; top: 38%; border-top: 2px solid var(--secondary); border-radius: 50%; transform: rotate(-34deg); box-shadow: 0 30px 0 -1px color-mix(in srgb, var(--accent) 40%, transparent); }
.radio-disc { position: absolute; width: min(39vw, 480px); aspect-ratio: 1; right: 18%; top: 16%; border: 2px solid var(--secondary); border-radius: 50%; box-shadow: 0 0 0 25px color-mix(in srgb, var(--accent) 9%, transparent); animation: radio-disc 15s linear infinite; }.radio-disc i { position: absolute; inset: 17%; border: 2px solid color-mix(in srgb, var(--accent) 58%, transparent); border-radius: inherit; }.radio-disc i:nth-child(2) { inset: 34%; }.radio-disc i:nth-child(3) { inset: 48%; border: 0; background: var(--accent); }.radio-bars { position: absolute; right: 12%; bottom: 17%; width: 57%; height: 40%; display: flex; align-items: end; gap: 2%; }.radio-bars i { flex: 1; background: var(--accent); transform-origin: bottom; animation: radio-bars 2s ease-in-out infinite alternate; }.radio-bars i:nth-child(1) { height: 26%; }.radio-bars i:nth-child(2) { height: 66%; animation-delay: -.7s; }.radio-bars i:nth-child(3) { height: 38%; animation-delay: -1.4s; }.radio-bars i:nth-child(4) { height: 88%; animation-delay: -.4s; }.radio-bars i:nth-child(5) { height: 52%; animation-delay: -1.2s; }.radio-bars i:nth-child(6) { height: 73%; animation-delay: -.9s; }.radio-bars i:nth-child(7) { height: 31%; animation-delay: -.2s; }.radio-path { position: absolute; width: 58%; height: 22%; right: 5%; bottom: 26%; border-top: 2px solid color-mix(in srgb, var(--secondary) 77%, transparent); border-radius: 50%; transform: rotate(-18deg); }
.blue-rings { position: absolute; width: min(43vw, 510px); aspect-ratio: 1; right: 17%; top: 19%; border: 2px solid var(--accent); border-radius: 50%; animation: blue-rings 7s ease-in-out infinite alternate; }.blue-rings i { position: absolute; inset: 18%; border: 2px solid color-mix(in srgb, var(--secondary) 85%, transparent); border-radius: inherit; }.blue-rings i:nth-child(2) { inset: 35%; border-color: var(--accent); }.blue-rings i:nth-child(3) { inset: 49%; border: 0; background: color-mix(in srgb, var(--accent) 70%, transparent); }.blue-waves i { position: absolute; width: 56%; height: 20%; right: 5%; bottom: 22%; border-top: 3px solid var(--accent); border-radius: 50%; transform: rotate(-11deg); animation: blue-wave 3.7s ease-in-out infinite alternate; }.blue-waves i:nth-child(2) { right: 16%; bottom: 35%; border-color: var(--secondary); animation-delay: -1.3s; }.blue-waves i:nth-child(3) { right: -4%; bottom: 10%; border-color: color-mix(in srgb, var(--accent) 46%, transparent); animation-delay: -2.1s; }.blue-points i { position: absolute; width: 13px; aspect-ratio: 1; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 12%, transparent); animation: blue-point 2s ease-in-out infinite alternate; }.blue-points i:nth-child(1) { right: 35%; top: 33%; }.blue-points i:nth-child(2) { right: 15%; top: 48%; background: var(--secondary); animation-delay: -.7s; }.blue-points i:nth-child(3) { right: 46%; top: 64%; animation-delay: -1.2s; }.blue-points i:nth-child(4) { right: 24%; top: 73%; background: var(--secondary); animation-delay: -1.6s; }
.night-diamond { position: absolute; width: min(33vw, 410px); aspect-ratio: 1; right: 25%; top: 26%; border: 2px solid var(--secondary); box-shadow: inset 0 0 0 28px color-mix(in srgb, var(--accent) 8%, transparent), 0 0 0 18px color-mix(in srgb, var(--accent) 6%, transparent); transform: rotate(45deg); animation: night-diamond 7s linear infinite; }.night-beams { position: absolute; top: 19%; left: 27%; width: 75%; height: 63%; overflow: hidden; transform: rotate(-25deg); }.night-beams i { position: absolute; width: 110%; height: 2px; background: var(--accent); box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 34%, transparent); animation: night-beams 2.8s ease-in-out infinite alternate; }.night-beams i:nth-child(1) { top: 9%; }.night-beams i:nth-child(2) { top: 35%; background: var(--secondary); animation-delay: -.7s; }.night-beams i:nth-child(3) { top: 61%; animation-delay: -1.4s; }.night-beams i:nth-child(4) { top: 87%; opacity: .55; animation-delay: -2.1s; }.night-steps { position: absolute; right: 12%; bottom: 15%; width: 45%; height: 36%; display: flex; align-items: end; gap: 3%; }.night-steps i { flex: 1; background: var(--accent); transform-origin: bottom; animation: night-steps 2.1s ease-in-out infinite alternate; }.night-steps i:nth-child(1) { height: 28%; }.night-steps i:nth-child(2) { height: 45%; animation-delay: -.8s; }.night-steps i:nth-child(3) { height: 73%; animation-delay: -1.2s; }.night-steps i:nth-child(4) { height: 93%; animation-delay: -.4s; }.night-steps i:nth-child(5) { height: 57%; animation-delay: -1.6s; }
@keyframes hospital-orbit { to { transform: translate(5%, -5%) scale(.94); } } @keyframes steady-bars { to { transform: scaleY(.63); opacity: .58; } } @keyframes radio-disc { to { transform: rotate(360deg); } } @keyframes radio-bars { to { transform: scaleY(.48); opacity: .48; } } @keyframes blue-rings { to { transform: scale(1.09); opacity: .58; } } @keyframes blue-wave { to { transform: rotate(-4deg) translate(-8%, 16%); } } @keyframes blue-point { to { transform: scale(1.45); opacity: .54; } } @keyframes night-diamond { to { transform: rotate(405deg) scale(.84); } } @keyframes night-beams { to { transform: translate(9%, -11%); opacity: .46; } } @keyframes night-steps { to { transform: scaleY(.43); opacity: .48; } } @keyframes copy-equalizer { to { transform: scaleY(.56); opacity: .5; } }

.broadcast-video { position: relative; z-index: 3; grid-column: 2; grid-row: 1; align-self: end; margin: 0 0 3.35rem; overflow: hidden; aspect-ratio: 16 / 9; border: 1px solid color-mix(in srgb, var(--accent) 45%, rgb(36 48 49 / .28)); background: #151714; box-shadow: 9px 9px 0 color-mix(in srgb, var(--shadow) 26%, transparent); }.broadcast-video::before { position: absolute; z-index: 1; top: .7rem; left: .7rem; width: 7px; height: 7px; border-radius: 50%; content: ""; background: var(--accent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 18%, transparent); pointer-events: none; }.broadcast-video iframe { width: 100%; height: 100%; border: 0; }
.broadcast-art .hospital-bars, .broadcast-art .radio-bars, .broadcast-art .night-steps { display: none; }.broadcast-copy { position: relative; z-index: 5; grid-column: 1; grid-row: 1; align-self: start; max-width: min(100%, 35rem); padding-top: clamp(3.4rem, 8vh, 5.6rem); }.broadcast-copy h1 { max-width: 13ch; margin: 0; color: var(--ink); font: 800 clamp(3rem, 4.6vw, 5rem)/.79 "Syne", sans-serif; letter-spacing: -.105em; text-transform: uppercase; }.side-equalizer { display: flex; align-items: end; width: min(100%, 14rem); height: clamp(2rem, 3vw, 2.65rem); gap: clamp(.18rem, .42vw, .32rem); margin: .72rem 0 .42rem; padding: .18rem 0 .27rem; border-bottom: 1px solid color-mix(in srgb, var(--accent) 72%, transparent); }.side-equalizer i { flex: 1; max-width: 1rem; min-width: .38rem; background: var(--accent); opacity: .86; transform-origin: bottom; animation: copy-equalizer 1.85s ease-in-out infinite alternate; }.side-equalizer i:nth-child(1) { height: 28%; }.side-equalizer i:nth-child(2) { height: 67%; animation-delay: -.55s; }.side-equalizer i:nth-child(3) { height: 43%; animation-delay: -1.1s; }.side-equalizer i:nth-child(4) { height: 91%; animation-delay: -.28s; }.side-equalizer i:nth-child(5) { height: 58%; animation-delay: -1.35s; }.side-equalizer i:nth-child(6) { height: 75%; animation-delay: -.82s; }.side-equalizer i:nth-child(7) { height: 36%; animation-delay: -1.6s; }.stream-note { width: min(100%, 28rem); margin: .12rem 0 0; padding: .5rem .75rem 0 0; border-top: 1px solid color-mix(in srgb, var(--accent) 78%, transparent); color: color-mix(in srgb, var(--ink) 76%, transparent); background: linear-gradient(90deg, color-mix(in srgb, var(--cream) 88%, transparent), transparent 94%); font: 500 clamp(.7rem, .86vw, .84rem)/1.5 "DM Mono", monospace; letter-spacing: .015em; text-wrap: pretty; }
.broadcast-timeline { position: absolute; z-index: 6; right: clamp(1.4rem, 3vw, 3.4rem); bottom: 1.45rem; left: clamp(1.45rem, 3vw, 3.4rem); color: color-mix(in srgb, var(--ink) 57%, transparent); font: 500 .6rem/1 "DM Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }.broadcast-timeline > div { position: relative; display: flex; justify-content: space-between; height: 24px; border-top: 1px solid color-mix(in srgb, var(--ink) 25%, transparent); }.broadcast-timeline button { position: relative; top: 6px; min-width: 28px; padding: 0; border: 0; color: color-mix(in srgb, var(--ink) 47%, transparent); background: transparent; cursor: pointer; font: inherit; text-align: center; transition: color .25s ease; }.broadcast-timeline button::before { position: absolute; top: -12px; left: 50%; width: 1px; height: 5px; content: ""; background: color-mix(in srgb, var(--ink) 27%, transparent); }.broadcast-timeline button:hover, .broadcast-timeline button:focus-visible, .broadcast-timeline button[aria-current="step"] { color: var(--accent); outline: 0; }.broadcast-timeline b { position: absolute; top: -5px; left: calc(var(--step) * 33.333%); width: 10px; aspect-ratio: 1; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 17%, transparent); transform: translateX(-50%); transition: left .56s cubic-bezier(.22,1,.36,1), background .45s ease; }.broadcast-snap[data-active="0"] .broadcast-timeline b { transform: none; }.broadcast-snap[data-active="3"] .broadcast-timeline b { transform: translateX(-100%); }

@media (max-width: 1024px) { .broadcast-frame { height: min(760px, calc(100svh - 122px)); grid-template-columns: minmax(255px, .75fr) minmax(330px, 1.1fr); }.broadcast-copy { padding-top: 3.1rem; }.broadcast-copy h1 { font-size: clamp(2.15rem, 4.2vw, 3rem); }.side-equalizer { width: min(100%, 12rem); height: 2.4rem; margin-top: .62rem; }.stream-note { width: 100%; max-width: 31ch; margin-top: .1rem; }.broadcast-nav { min-height: 76px; }.broadcast-stage { padding-top: 94px; } }
@media (max-width: 680px) { .broadcast-nav { width: calc(100% - 32px); min-height: 72px; grid-template-columns: 1fr auto; }.broadcast-links { display: none; }.broadcast-links.is-open { position: absolute; top: 72px; right: 0; display: grid; width: min(230px, calc(100vw - 32px)); gap: 0; padding: .45rem; border: 1px solid rgb(36 48 49 / .26); background: var(--paper); box-shadow: 6px 6px 0 color-mix(in srgb, var(--shadow) 22%, transparent); }.broadcast-links.is-open a { display: flex; align-items: center; min-height: 44px; padding-inline: .75rem; border-bottom: 1px solid rgb(36 48 49 / .13); }.broadcast-links.is-open a[aria-current="page"], .broadcast-links.is-open a:hover, .broadcast-links.is-open a:focus-visible { border: 1px solid #ff6420; color: var(--ink); }.broadcast-links.is-open a:last-child { border-bottom: 0; }.broadcast-live { margin-right: 3.1rem; font-size: .58rem; }.broadcast-menu-toggle { position: absolute; top: 14px; right: 0; display: grid; width: 44px; height: 44px; place-content: center; gap: 5px; padding: 0; border: 1px solid rgb(36 48 49 / .32); color: var(--ink); background: transparent; }.broadcast-menu-toggle i { width: 18px; height: 1px; background: currentColor; }.broadcast-stage { display: block; --frame-content-offset: 110px; padding: 88px 16px 12px; }.broadcast-frame { width: 100%; height: calc(100svh - 100px); min-height: 0; display: block; padding: 1.35rem; border-radius: 18px; box-shadow: 8px 8px 0 color-mix(in srgb, var(--shadow) 28%, transparent); }.broadcast-video { position: absolute; z-index: 4; top: auto; right: 1.35rem; bottom: 4.1rem; left: 1.35rem; width: auto; margin: 0; transform: translateY(var(--frame-content-offset)); box-shadow: 5px 5px 0 color-mix(in srgb, var(--shadow) 25%, transparent); }.broadcast-copy { position: relative; z-index: 5; top: auto; right: auto; left: auto; padding: 0; transform: translateY(var(--frame-content-offset)); }.broadcast-copy h1 { max-width: 100%; margin: 0; font-size: clamp(2.05rem, 10.5vw, 3.5rem); }.side-equalizer { width: min(100%, 11rem); height: 2rem; margin: .62rem 0 .34rem; gap: .22rem; }.stream-note { width: min(100%, 31ch); max-width: none; margin-top: .08rem; padding: .42rem .55rem .15rem 0; border-top-width: 1px; background: linear-gradient(90deg, color-mix(in srgb, var(--cream) 88%, transparent), transparent 94%); font-size: .68rem; line-height: 1.45; }.broadcast-timeline { right: 1.35rem; bottom: 1.15rem; left: 1.35rem; transform: translateY(var(--frame-content-offset)); font-size: .5rem; }.broadcast-timeline > div { height: 28px; }.broadcast-timeline button { top: 7px; min-width: 34px; }.broadcast-timeline button::before { top: -13px; height: 6px; }.hospital-orbit { width: 72%; right: 5%; bottom: 18%; }.hospital-bars { right: 4%; bottom: 6.5rem; width: 77%; height: 34%; }.radio-disc { width: 74%; right: 5%; top: 43%; }.radio-bars { right: 8%; bottom: 6.5rem; width: 74%; height: 27%; }.blue-rings { width: 75%; right: 9%; top: 43%; }.blue-waves i { width: 97%; right: -10%; bottom: 27%; }.blue-points i:nth-child(1) { right: 31%; top: 51%; }.night-diamond { width: 62%; right: 17%; top: 44%; }.night-beams { top: 42%; left: 8%; width: 107%; height: 43%; }.night-steps { right: 8%; bottom: 6.5rem; width: 71%; height: 23%; } }
@media (max-width: 680px) { .broadcast-stage { --frame-content-offset: 0px; }.broadcast-copy { transform: translateY(50px); } }
/* A phone in landscape has desktop-like width but very little vertical room.
   Keep its broadcast card in a compact two-column composition rather than
   letting the normal 16:9 player fall below the initial viewport. */
@media (orientation: landscape) and (max-height: 560px) {
  .broadcast-nav { min-height: 64px; }
  .broadcast-stage { display: grid; height: 100svh; padding: 72px 46px .5rem; place-items: stretch center; }
  .broadcast-frame { width: 100%; height: calc(100svh - 80px); min-height: 0; grid-template-columns: minmax(142px, .72fr) minmax(0, 1.28fr); grid-template-rows: minmax(0, 1fr); gap: clamp(.55rem, 1.6vw, 1.15rem); padding: clamp(.72rem, 1.7vw, 1.15rem); border-radius: 18px; }
  .broadcast-copy { grid-column: 1; grid-row: 1; align-self: start; max-width: 100%; padding: clamp(.2rem, 1vh, .55rem) 0 0; transform: none; }
  .broadcast-copy h1 { max-width: 11ch; font-size: clamp(1.7rem, 4vw, 2.7rem); line-height: .82; }
  .side-equalizer { width: min(100%, 8rem); height: 1.15rem; gap: .16rem; margin: .35rem 0 .25rem; padding: .08rem 0 .14rem; }
  .stream-note { max-width: 25ch; padding-top: .32rem; font-size: .58rem; line-height: 1.35; }
  .broadcast-video { position: absolute; z-index: 4; top: auto; right: clamp(.72rem, 1.7vw, 1.15rem); bottom: calc(.65rem + 20px + .45rem); left: auto; width: min(48%, 426px); height: auto; max-width: calc(100% - 2.3rem); margin: 0; transform: none; box-shadow: 5px 5px 0 color-mix(in srgb, var(--shadow) 25%, transparent); }
  .broadcast-timeline { right: clamp(.75rem, 1.7vw, 1.15rem); bottom: .65rem; left: clamp(.75rem, 1.7vw, 1.15rem); transform: none; font-size: .46rem; }
  .broadcast-timeline > div { height: 20px; }
  .broadcast-timeline button { top: 5px; min-width: 24px; }
  .broadcast-timeline button::before { top: -10px; height: 4px; }
  .frame-squares i:first-child { top: 14px; right: 14px; width: 14px; }
  .frame-squares i:last-child { top: 31px; right: 31px; width: 14px; }
}
@media (orientation: landscape) and (max-height: 560px) and (max-width: 680px) {
  .broadcast-nav { min-height: 72px; }
  .broadcast-links.is-open { top: 72px; }
  .broadcast-menu-toggle { top: 14px; }
  .broadcast-stage { padding: 80px 16px .5rem; }
  .broadcast-frame { display: grid; height: calc(100svh - 88px); }
  .broadcast-copy { position: absolute; z-index: 5; top: .72rem !important; left: .72rem !important; width: 31%; max-width: none; padding: .2rem 0 0; transform: none !important; }
  .broadcast-copy h1 { font-size: clamp(1.5rem, 4.8vw, 2rem); }
  .side-equalizer { height: .9rem; margin: .25rem 0 .18rem; }
  .stream-note { font-size: .52rem; line-height: 1.25; }
  .broadcast-video { top: .72rem !important; right: .72rem !important; bottom: auto !important; left: auto !important; width: min(48%, 300px); margin-bottom: 0; transform: none !important; }
  .broadcast-timeline { bottom: .65rem; }
  .broadcast-live { top: 50%; right: 3.1rem; margin: 0; transform: translateY(-50%); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

@media (max-width: 680px) {
  .broadcast-live {
    position: absolute;
    top: 50%;
    right: 3.1rem;
    width: max-content;
    margin: 0;
    color: rgb(36 48 49 / .64);
    font: 500 .58rem/1 "DM Mono", monospace;
    letter-spacing: .07em;
    text-transform: uppercase;
    white-space: nowrap;
    transform: translateY(-50%);
  }
}