html, body { margin: 0; height: 100%; background: #000; overflow: hidden; cursor: none; }
#stage { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: #FBF9F5; }
#stage > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 1.2s ease; }
#stage > .cover { object-fit: cover; }
#stage > .on { opacity: 1; }
.mark { position: fixed; left: 0; right: 0; bottom: 3vh; text-align: center; font-family: 'Josefin Sans', sans-serif; font-weight: 700;
  font-size: 2.2vh; letter-spacing: .4em; color: #24124F; text-shadow: 0 0 12px rgba(255, 255, 255, .8); pointer-events: none; }
.hint { position: fixed; top: 2vh; right: 2vw; font: 600 14px sans-serif; color: #24124F; background: rgba(255, 255, 255, .85); padding: 8px 12px; cursor: pointer; }
.empty { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; font-family: 'Josefin Sans', sans-serif; font-size: 4vh; letter-spacing: .3em; color: #24124F; }