:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color-scheme:dark;color:#eaf3ff;background:#050a12}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 50% 20%,#102c49,#050a12 60%)}.hidden{display:none!important}.center-panel{min-height:100vh;width:min(90%,670px);margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:50px 0}.screen-logo{width:76px;height:76px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#81caff,#4c84ef);color:#06203e;font-size:48px;font-weight:900;border-radius:21px;margin-bottom:28px;box-shadow:0 14px 50px #0a76c13d}.screen-logo span{font-size:10px;align-self:flex-start;margin-top:16px;color:white}.eyebrow{font-size:12px;letter-spacing:3px;color:#75bdfc;font-weight:800}.center-panel h1{font-size:clamp(30px,5vw,50px);letter-spacing:-2px;margin:18px 0 10px}.center-panel p{color:#aac0d5;line-height:1.7;font-size:clamp(14px,1.5vw,19px)}form{display:flex;gap:10px;width:100%;margin-top:23px}form input{flex:1;min-width:0}button,input{border-radius:10px;padding:15px;font-size:15px;font-family:inherit}input{border:1px solid #405d76;color:#fff;background:#102238}button{background:#77bafe;color:#081829;border:1px solid #a5d7ff;font-weight:800;cursor:pointer}button:hover{background:#a0d2ff}.secondary{background:transparent;border:1px solid #47617c;color:#91b6d4;margin-top:26px}.pair-code{font-size:clamp(38px,9vw,82px);font-family:ui-monospace,Consolas,monospace;font-weight:900;letter-spacing:8px;color:#c6e5ff;background:#172b41;padding:20px 35px;border:1px solid #547697;border-radius:18px;margin-top:27px}.device-label{font-weight:750!important;color:#fff!important}.muted{color:#7f9bb5!important}.error{color:#ff9dad!important}.loading-track{width:min(410px,85vw);height:8px;border-radius:99px;overflow:hidden;background:#1d354e;margin-top:22px}.loading-track div{height:100%;background:linear-gradient(90deg,#70b1ef,#7defcd);width:5%;transition:width .3s}#stage,#media-holder{position:fixed;inset:0;width:100vw;height:100vh;background:#000}#media-holder{display:flex;align-items:center;justify-content:center}#media-holder img,#media-holder video{width:100%;height:100%;object-fit:contain;background:#000}.sound-button{position:fixed;bottom:15px;right:15px;z-index:15;font-size:12px;opacity:.0;transform:translateY(8px);transition:opacity .2s,transform .2s;cursor:pointer;padding:10px 13px}.stage-warning{position:fixed;top:20px;left:20px;background:#38202c;color:#ffc6d0;border:1px solid #995e6c;padding:13px;border-radius:7px;max-width:60%;z-index:5}#stage:hover .sound-button,#stage .sound-button:focus-visible{opacity:.9;transform:none}#debug-status{position:fixed;bottom:10px;left:10px;color:transparent;font-size:11px;pointer-events:none}#debug-status:hover{color:#8a9cb0}@media(max-width:500px){form{flex-direction:column}.pair-code{letter-spacing:2px;padding:12px 18px}}

/* v0.2.0: crossfade between local cached items; never fade to black. */
#media-holder { display:block; overflow:hidden; }
#media-holder .media-layer {
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  background:#000; opacity:0; transition:opacity .9s ease-in-out;
  will-change:opacity;
}
#media-holder .media-layer.is-visible { opacity:1; }
@media(prefers-reduced-motion:reduce) {
  #media-holder .media-layer { transition-duration:.01ms; }
}
/* Only the tiny speaker icon remains visible; label expands on direct hover. */
.sound-button {
  position:fixed; right:12px; bottom:12px; z-index:15;
  width:auto; max-width:38px; min-width:38px; height:35px;
  display:inline-flex; align-items:center; justify-content:flex-start; gap:8px;
  padding:7px 9px; background:rgba(9,16,27,.58); color:#e9f0fa;
  border:1px solid rgba(255,255,255,.10); border-radius:10px;
  opacity:.28; transform:none; overflow:hidden; white-space:nowrap;
  transition:opacity .24s, max-width .24s, background .24s;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.sound-button svg { flex:0 0 18px; }
.sound-button span { font-size:12px; opacity:0; transition:opacity .15s; }
.sound-button:hover,.sound-button:focus-visible {
  max-width:180px;opacity:.95;background:rgba(9,16,27,.87);transform:none;
}
.sound-button:hover span,.sound-button:focus-visible span { opacity:1; }
.sound-button .volume-wave {display:none;}
.sound-button .volume-muted {display:block;}
.sound-button.sound-on .volume-wave {display:block;}
.sound-button.sound-on .volume-muted {display:none;}
#stage:hover .sound-button:not(:hover):not(:focus-visible) {opacity:.28;transform:none;}