* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #07181f; }
.totem-body { color: #fff; font-family: Inter, "Segoe UI", Arial, sans-serif; cursor: none; user-select: none; }
.totem-player { position: fixed; isolation: isolate; inset: 0; display: grid; place-items: center; overflow: hidden; background: #07181f; }
.totem-slide { position: absolute; z-index: 2; inset: 0; display: grid; place-items: center; opacity: 0; transform: scale(1.008); transition: opacity .65s ease, transform 1.1s ease; }
.totem-slide.active { z-index: 3; opacity: 1; transform: scale(1); }
.totem-slide img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: contain; background: #07181f; }
.totem-empty { position: relative; z-index: 1; width: min(76vw, 540px); color: #fff; text-align: center; transition: opacity .35s ease; }
.totem-empty[hidden] { display: block !important; opacity: 0; pointer-events: none; }
.totem-empty::before { position: absolute; z-index: -1; content: ""; width: 120vw; height: 120vw; max-width: 1250px; max-height: 1250px; top: 50%; left: 50%; border: 1px solid rgb(94 202 218 / 12%); border-radius: 50%; box-shadow: 0 0 0 12vw rgb(94 202 218 / 3%), inset 0 0 120px rgb(64 188 206 / 4%); transform: translate(-50%, -50%); }
.totem-empty img { width: min(68%, 340px); filter: brightness(0) invert(1); }
.totem-empty p { margin: clamp(42px, 7vh, 90px) 0 20px; color: #59c7dc; font-size: clamp(15px, 2.1vh, 27px); font-weight: 900; letter-spacing: .2em; }
.totem-empty h1 { margin: 0; font-size: clamp(44px, 7vh, 96px); line-height: .98; letter-spacing: -.045em; }
.totem-empty h1 em { color: #5abe68; font-style: normal; }
.totem-empty > span { display: inline-block; margin-top: clamp(40px, 6vh, 78px); padding: 13px 20px; border: 1px solid rgb(255 255 255 / 14%); border-radius: 99px; color: #91aeb6; font-size: clamp(11px, 1.4vh, 17px); letter-spacing: .05em; }
.totem-progress { position: absolute; z-index: 8; inset: auto 0 0; height: 4px; overflow: hidden; background: rgb(255 255 255 / 7%); opacity: .72; }
.totem-progress i { display: block; width: 100%; height: 100%; background: #59c7dc; transform: scaleX(0); transform-origin: left; }
.totem-progress.playing i { animation: totem-progress var(--slide-duration, 10s) linear forwards; }
@keyframes totem-progress { to { transform: scaleX(1); } }
.totem-connection { position: absolute; z-index: 12; top: max(18px, env(safe-area-inset-top)); left: 50%; display: flex; align-items: center; gap: 9px; padding: 10px 15px; border: 1px solid rgb(255 255 255 / 10%); border-radius: 99px; color: #d1e1e4; background: rgb(8 28 35 / 78%); backdrop-filter: blur(10px); font-size: 11px; transform: translateX(-50%); }
.totem-connection[hidden] { display: none; }
.totem-connection i { width: 7px; height: 7px; border-radius: 50%; background: #f2a91d; box-shadow: 0 0 0 4px rgb(242 169 29 / 15%); }
.totem-fullscreen { position: absolute; z-index: 12; width: 54px; height: 54px; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); display: grid; place-items: center; border: 1px solid rgb(255 255 255 / 13%); border-radius: 50%; color: #fff; background: rgb(8 28 35 / 65%); backdrop-filter: blur(10px); font-size: 22px; opacity: 0; cursor: pointer; transition: opacity .2s ease, transform .2s ease; }
.totem-player.controls-visible .totem-fullscreen, .totem-fullscreen:focus-visible { opacity: 1; }
.totem-fullscreen:hover { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) { .totem-slide { transition: opacity .15s linear; transform: none; }.totem-progress i { animation-timing-function: steps(20); } }