:root {
  --warm-white: #FAF8F6;
  --anthracite: #111111;
  --transition-ms: 850ms;
}
* { box-sizing: border-box; }
html, body {
  width: 100%; height: 100%; margin: 0; overflow: hidden;
  background: var(--warm-white);
}
body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  cursor: none; user-select: none;
}
#player {
  position: fixed; inset: 0; width: 100vw; height: 100vh;
  overflow: hidden; background: var(--warm-white); isolation: isolate;
}
.media-layer {
  position: absolute; inset: 0; z-index: 1; opacity: 0;
  transition: opacity var(--transition-ms) ease-in-out;
  background: var(--warm-white); pointer-events: none;
}
.media-layer.visible { z-index: 2; opacity: 1; }
.media-layer img, .media-layer video {
  display: block; width: 100%; height: 100%; background: var(--warm-white);
  object-position: center center;
}
.fit-cover { object-fit: cover; }
.fit-contain { object-fit: contain; }
.status {
  position: absolute; inset: 0; z-index: 30; display: grid; place-items: center;
  padding: 8vw; background: var(--warm-white); color: var(--anthracite);
  text-align: center; font-size: clamp(22px, 3vw, 52px); line-height: 1.2;
}
.status[hidden] { display: none !important; }
.debug {
  position: absolute; left: 18px; bottom: 18px; z-index: 40;
  max-width: calc(100% - 36px); padding: 10px 12px; border-radius: 8px;
  color: #fff; background: rgba(0,0,0,.72);
  font: 14px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: pre-wrap; pointer-events: none;
}
.debug[hidden] { display: none !important; }