.sl-stage { background: #000; cursor: zoom-in; }
.sl-stage.is-full { cursor: default; }
.sl-clock { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: #fff; opacity: 0; font: 300 40px/1 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-variant-numeric: tabular-nums; letter-spacing: .02em; white-space: nowrap; pointer-events: none; transition: opacity 3s, left 4s ease-in-out, top 4s ease-in-out; }
.sl-empty { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; color: rgba(255, 255, 255, .28); font-size: .95rem; pointer-events: none; }
.sl-empty[hidden] { display: none; }
/* in full screen the exit button and hints stay very dim, so a tap in the dark does not light up the room */
.sl-stage.is-full .fs-btn { background: rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .38); }
.sl-stage .st-hint.sl-dimhint { background: rgba(255, 255, 255, .05); color: rgba(255, 255, 255, .35); }
.sl-status { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 10px; margin-top: 14px; }
.sl-stat { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; display: grid; align-content: start; min-width: 0; }
.sl-stat span { font-size: .8rem; color: var(--muted); font-weight: 600; }
.sl-stat strong { font-size: 1.05rem; line-height: 1.3; }
.sl-actions { margin-top: 12px; }
.sl-h24 { margin-top: 10px; }
.ctl[hidden] { display: none; }
.ctl label.switch { justify-content: flex-start; }
@media (max-width: 560px) { .sl-status { grid-template-columns: 1fr 1fr; } .sl-wide { grid-column: 1 / -1; } }
@media (prefers-reduced-motion: reduce) { .sl-clock { transition: opacity 3s; } }