/* Fixed programme-space styling. No controls or preview-shell styling belongs here. */
#programme{position:absolute;left:50%;top:50%;width:1920px;height:1080px;background:#000;overflow:hidden;isolation:isolate;transform:translate(-50%,-50%) scale(var(--preview-scale,0));transform-origin:center;pointer-events:none}
#stage{position:absolute;inset:0}
#scene{display:block;width:100%;height:100%;pointer-events:none}
.programme-brand{position:absolute;left:64px;top:54px;display:flex;align-items:center;gap:18px;padding:19px 23px;color:#eff4f6;text-shadow:0 2px 14px #0009;z-index:2}
.programme-brand img{width:64px;height:64px}
.programme-brand{max-width:calc(100% - 128px)}
.programme-brand span{display:flex;flex-direction:column;gap:6px;min-width:0}
.programme-brand strong{font-size:32px;font-weight:600}
.programme-brand small{font-size:19px;color:#a8bbc7}
.on-air-title{position:absolute;left:64px;bottom:64px;width:max-content;max-width:calc(100% - 128px);pointer-events:none;text-shadow:0 3px 20px #000b;z-index:2}
.on-air-title span{display:block;font-size:23px;color:#b8cbd5;margin-bottom:16px}
.on-air-title strong{display:block;max-width:1200px;font-size:72px;line-height:1.08;font-weight:500;overflow-wrap:anywhere;color:#eef7fa}
/* Feather the backdrop itself, without painting a card boundary around the text. */
.programme-brand,.on-air-title{isolation:isolate;transform:translateZ(0);backface-visibility:hidden}
.programme-brand>*,.on-air-title>*{position:relative;z-index:1;transform:translateZ(0)}
.programme-ink{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}
#programme.has-programme-ink .programme-brand>*,#programme.has-programme-ink .on-air-title>*{visibility:hidden;transform:none}
/* Keep masked backdrop repainting below independent, stable text layers. */
.programme-brand::before,.on-air-title::before{content:'';position:absolute;inset:-28px -52px;z-index:0;pointer-events:none;background:rgba(4,9,14,.25);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);mask-image:radial-gradient(ellipse at 45% 50%,#000 8%,#000c 42%,transparent 78%);-webkit-mask-image:radial-gradient(ellipse at 45% 50%,#000 8%,#000c 42%,transparent 78%)}
.on-air-title::before{inset:-42px -90px;background:rgba(4,9,14,.3);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.scene-loading{position:absolute;inset:0;z-index:1;background:#000;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .32s ease,visibility 0s linear .32s}
.scene-loading.is-active{opacity:1;visibility:visible;transition:opacity .2s ease,visibility 0s}
#scene-loading-canvas{position:absolute;inset:0;width:100%;height:100%}
#scene-loading-label{position:absolute;top:calc(50% + 206px);left:64px;right:64px;text-align:center;color:#a8bbc7;font:400 21px Studio,Arial,sans-serif;line-height:1.5}
.scene-loading-fallback{position:absolute;width:360px;height:360px;left:calc(50% - 180px);top:calc(50% - 230px);border:12px dotted #78d7e7;border-radius:50%;animation:loading-orbit 3s linear infinite}
.has-canvas .scene-loading-fallback,.is-error .scene-loading-fallback,.is-error #scene-loading-canvas{display:none}
.scene-loading.is-error #scene-loading-label{top:50%;transform:translateY(-50%);color:#c3d7df}
@keyframes loading-orbit{from{transform:rotateX(25deg) rotate(0)}to{transform:rotateX(25deg) rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.scene-loading{transition:none}.scene-loading-fallback{animation:none}}