html, body { width: 100%; height: 100%; background: #000; overflow: hidden; }
body.idle { cursor: none; }
#viewport { position: fixed; inset: 0; display: grid; place-items: center; }
#stage { position: relative; width: 1920px; height: 1080px; transform-origin: 0 0; position: absolute; left: 0; top: 0; }
#stage .sl { visibility: hidden; opacity: 0; transition: opacity .35s ease, visibility 0s linear .35s; }
#stage .sl.active { visibility: visible; opacity: 1; transition: opacity .35s ease; }
#black { position: fixed; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity .3s ease; z-index: 10; }
#black.on { opacity: 1; }
#status { position: fixed; right: 14px; top: 12px; z-index: 20; display: flex; align-items: center; gap: 8px; font: 500 12px 'Golos Text', sans-serif; color: hsl(0 0% 64%); background: hsl(0 0% 6% / .9); border: 1px solid hsl(0 0% 18%); border-radius: 999px; padding: 6px 12px; opacity: 0; transition: opacity .4s ease; pointer-events: none; }
#status.show { opacity: 1; }
#status .dot { width: 8px; height: 8px; border-radius: 50%; background: hsl(0 0% 40%); }
#status.ok .dot { background: hsl(142 71% 45%); }
#status.bad .dot { background: hsl(0 84% 60%); }