:root {
  color-scheme: dark;
  --ice: #a8eaff;
  --line: color-mix(in srgb, var(--ice) 22%, transparent);
  --muted: #93a5b5;
  --night: #05080d;
  font-family: "Space Grotesk", Inter, system-ui, sans-serif;
  background: var(--night);
  color: #f3f8fc;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }

html, body { width: 100%; height: 100%; min-width: 320px; min-height: 0; margin: 0; overflow: hidden; background: var(--night); }
button { font: inherit; }

.web-field { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; perspective: 1200px; }
.web { position: absolute; width: min(42vw, 620px); height: auto; opacity: .27; filter: saturate(.86) brightness(1.08) contrast(1.24); user-select: none; transform-style: preserve-3d; -webkit-mask-image: radial-gradient(ellipse 50% 49% at 50% 50%, #000 12%, rgba(0,0,0,.96) 42%, rgba(0,0,0,.7) 66%, rgba(0,0,0,.28) 84%, transparent 100%); mask-image: radial-gradient(ellipse 50% 49% at 50% 50%, #000 12%, rgba(0,0,0,.96) 42%, rgba(0,0,0,.7) 66%, rgba(0,0,0,.28) 84%, transparent 100%); }
.web-one { left: -9vw; top: -12vh; animation: web-float-one 22s ease-in-out infinite alternate; }
.web-two { right: -13vw; top: -7vh; width: min(46vw, 700px); opacity: .23; animation: web-float-two 27s ease-in-out infinite alternate; }
.web-three { right: -14vw; bottom: -26vh; width: min(51vw, 770px); opacity: .21; animation: web-float-three 24s ease-in-out infinite alternate; }
.web-four { left: -15vw; bottom: -23vh; width: min(48vw, 720px); opacity: .22; animation: web-float-four 29s ease-in-out infinite alternate; }
.web-five { left: 34vw; top: 36vh; width: min(29vw, 430px); opacity: .11; animation: web-float-five 31s ease-in-out infinite alternate; }

@keyframes web-float-one { to { transform: perspective(900px) rotateX(13deg) rotateY(-12deg) rotateZ(-12deg) translate3d(12px, 7px, 24px); } }
@keyframes web-float-two { to { transform: perspective(900px) rotateX(-12deg) rotateY(14deg) rotateZ(18deg) translate3d(-14px, 11px, 22px); } }
@keyframes web-float-three { to { transform: perspective(900px) rotateX(15deg) rotateY(11deg) rotateZ(-10deg) translate3d(-10px, -12px, 20px); } }
@keyframes web-float-four { to { transform: perspective(900px) rotateX(-14deg) rotateY(-12deg) rotateZ(14deg) translate3d(12px, -10px, 18px); } }
@keyframes web-float-five { to { transform: perspective(900px) rotateX(18deg) rotateY(-16deg) rotateZ(8deg) translate3d(0, 10px, 30px); } }

.page-shell { position: relative; z-index: 1; width: min(100% - 40px, 1050px); height: 100svh; margin: 0 auto; padding: 8px 0 10px; display: grid; grid-template-rows: minmax(190px, 36svh) auto minmax(190px, 1fr) minmax(76px, auto); gap: 10px; overflow: hidden; }
.brand-stage { position: relative; min-height: 0; height: 100%; display: grid; place-items: center; isolation: isolate; }
.globe-glow { position: absolute; z-index: -1; width: min(55vw, 560px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--ice) 16%, transparent), color-mix(in srgb, var(--ice) 7%, transparent) 42%, transparent 70%); filter: blur(13px); }
.globe { width: min(100%, 630px); height: 100%; position: relative; }
.globe canvas { width: 100%; height: 100%; display: block; }
.globe-fallback { position: absolute; inset: 50% auto auto 50%; width: min(55vw, 270px); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle at 32% 28%, var(--ice), color-mix(in srgb, var(--ice) 48%, #12364f) 37%, #12364f 69%, var(--night) 100%); box-shadow: 0 0 70px color-mix(in srgb, var(--ice) 19%, transparent); }
.location-label { position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 3px; padding: 2px 4px; border: 1px solid color-mix(in srgb, var(--ice) 52%, transparent); border-radius: 999px; color: var(--ice); background: rgba(5,8,13,.76); box-shadow: 0 0 8px color-mix(in srgb, var(--ice) 20%, transparent); font-size: 8px; line-height: 1; font-weight: 700; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.location-label svg { display: block; width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.location-label span { color: var(--ice); }

.control-dock { min-height: 56px; display: flex; justify-content: center; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(110deg, rgba(15, 27, 38, .92), rgba(7, 13, 20, .94)); box-shadow: 0 12px 34px rgba(0,0,0,.3), inset 0 1px rgba(255,255,255,.035); backdrop-filter: blur(16px); }
.dock-button, .volume-dock { min-width: 0; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 12px; border: 1px solid transparent; border-radius: 9px; color: #d8e4ec; background: transparent; font-size: 10px; font-weight: 700; letter-spacing: .1em; white-space: nowrap; }
.dock-button { cursor: default; }
.dock-button:hover { border-color: var(--line); color: var(--ice); background: color-mix(in srgb, var(--ice) 6%, transparent); }
.dock-button b { color: var(--ice); font-size: 11px; }
.dock-icon { position: relative; display: inline-block; flex: 0 0 auto; width: 17px; height: 17px; color: var(--ice); }
.account-icon { border: 1.4px solid currentColor; border-radius: 50%; width: 16px; height: 16px; margin-right: 1px; }
.account-icon::before { content: ""; position: absolute; width: 4px; height: 4px; left: 4.6px; top: 2px; border: 1.2px solid currentColor; border-radius: 50%; }
.account-icon i { position: absolute; width: 9px; height: 4px; left: 2px; bottom: 1.5px; border: 1.2px solid currentColor; border-bottom: 0; border-radius: 8px 8px 0 0; }
.listener-icon i { position: absolute; top: 5px; width: 6px; height: 8px; border: 1.3px solid currentColor; border-radius: 5px; }
.listener-icon i:nth-child(1) { left: 0; height: 7px; top: 6px; }
.listener-icon i:nth-child(2) { left: 5px; top: 2px; height: 10px; }
.listener-icon i:nth-child(3) { right: 0; height: 7px; top: 6px; }
.history-icon { font-family: Arial, sans-serif; font-size: 21px; line-height: 15px; }
.chat-icon { border: 1.3px solid currentColor; border-radius: 4px; width: 17px; height: 13px; margin-top: -3px; }
.chat-icon::after { content: ""; position: absolute; bottom: -4px; left: 3px; width: 5px; height: 5px; border-left: 1.3px solid currentColor; transform: skewY(-35deg); background: #0b151f; }
.chat-icon i { position: absolute; top: 5px; left: 3px; width: 8px; height: 1px; background: currentColor; opacity: .8; }
.sound-icon { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.volume-dock { gap: 10px; padding-right: 12px; }
.volume-track { position: relative; width: 76px; height: 4px; border-radius: 4px; background: color-mix(in srgb, var(--ice) 18%, transparent); }
.volume-track span { position: relative; display: block; width: 68%; height: 100%; border-radius: inherit; background: var(--ice); box-shadow: 0 0 8px color-mix(in srgb, var(--ice) 50%, transparent); }
.volume-track span::after { content: ""; position: absolute; top: 50%; right: -4px; width: 9px; height: 9px; border: 1px solid var(--ice); border-radius: 50%; background: var(--night); transform: translateY(-50%); }

.broadcast { min-height: 0; }
.broadcast-frame { width: 100%; height: 100%; min-height: 0; padding: 8px; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 13px; background: linear-gradient(135deg, rgba(16,30,42,.92), rgba(5,9,14,.96)); box-shadow: 0 18px 48px rgba(0,0,0,.36), inset 0 1px rgba(255,255,255,.055); }
.frame-topline { height: 24px; flex: 0 0 24px; display: flex; align-items: center; gap: 8px; padding: 0 4px 5px; color: var(--ice); font-size: 9px; font-weight: 700; letter-spacing: .2em; }
.signal-dot, .player-status span { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--ice); box-shadow: 0 0 10px color-mix(in srgb, var(--ice) 65%, transparent); }
.frame-topline-right { margin-left: auto; color: var(--ice); opacity: .66; }
.video-stage { position: relative; min-height: 0; flex: 1; overflow: hidden; display: flex; align-items: center; border: 1px solid rgba(255,255,255,.05); border-radius: 7px; background: radial-gradient(ellipse at 72% 45%, color-mix(in srgb, var(--ice) 12%, transparent), transparent 35%), linear-gradient(115deg, #08111a, #0a1721 50%, #05090e); }
.video-grid { position: absolute; inset: 0; opacity: .18; background-image: linear-gradient(color-mix(in srgb, var(--ice) 8%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--ice) 8%, transparent) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(90deg, transparent, #000 34%, #000 80%, transparent); }
.video-mark { position: absolute; width: min(45%, 310px); aspect-ratio: 1; right: 8%; top: 50%; transform: translateY(-50%); display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--ice) 17%, transparent); border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--ice) 10%, transparent), transparent 68%); box-shadow: 0 0 70px color-mix(in srgb, var(--ice) 12%, transparent), inset 0 0 45px color-mix(in srgb, var(--ice) 7%, transparent); }
.video-mark img { width: 61%; filter: drop-shadow(0 0 16px color-mix(in srgb, var(--ice) 40%, transparent)); }
.video-copy { position: relative; z-index: 1; padding-left: clamp(22px, 7vw, 75px); }
.eyebrow { display: block; color: var(--ice); font-size: 9px; font-weight: 700; letter-spacing: .24em; }
.video-copy h1 { margin: 12px 0 9px; font-size: clamp(34px, 6.6vw, 72px); line-height: .88; letter-spacing: -.075em; font-weight: 700; }
.video-copy h1 span { color: transparent; -webkit-text-stroke: 1px var(--ice); }
.video-copy p { margin: 0; color: var(--ice); opacity: .66; font-size: 9px; font-weight: 600; letter-spacing: .2em; }
.player-status { position: absolute; right: 16px; top: 15px; display: flex; align-items: center; gap: 7px; color: var(--ice); opacity: .75; font-size: 8px; font-weight: 700; letter-spacing: .13em; }
.player-status span { width: 5px; height: 5px; }
.video-controls { position: absolute; inset: auto 0 0; height: 34px; display: flex; align-items: center; gap: 13px; padding: 0 15px; color: var(--ice); background: linear-gradient(transparent, rgba(0,0,0,.72)); }
.play-mark { width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid var(--ice); }
.timeline { flex: 1; height: 2px; background: color-mix(in srgb, var(--ice) 20%, transparent); }
.timeline i { display: block; width: 13%; height: 100%; background: var(--ice); }
.control-time { font-size: 8px; letter-spacing: .13em; }
.control-volume { font-size: 11px; }

.track-card { min-width: 0; min-height: 76px; padding: 10px 16px; display: flex; align-items: center; gap: 13px; overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: linear-gradient(105deg, rgba(12,23,33,.95), rgba(7,13,19,.9)); box-shadow: 0 12px 32px rgba(0,0,0,.24); }
.track-art { width: 50px; height: 50px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--ice) 26%, transparent); border-radius: 8px; background: radial-gradient(circle, color-mix(in srgb, var(--ice) 12%, transparent), color-mix(in srgb, var(--ice) 3%, transparent)); }
.track-art img { width: 41px; height: 41px; object-fit: contain; }
.track-main, .track-next { min-width: 0; }
.track-main { flex: 1; }
.track-main h2, .track-next h2 { margin: 4px 0 2px; overflow: hidden; font-size: 13px; letter-spacing: .035em; text-overflow: ellipsis; white-space: nowrap; }
.track-main p { margin: 0; color: var(--ice); opacity: .72; font-size: 10px; letter-spacing: .08em; }
.track-next { min-width: 220px; max-width: 34%; margin-left: auto; padding-left: 20px; border-left: 1px solid var(--line); }
.track-next h2 { color: var(--ice); }

@media (max-width: 760px) {
  .page-shell { width: min(100% - 24px, 600px); grid-template-rows: minmax(180px, 35svh) auto minmax(180px, 1fr) minmax(72px, auto); gap: 8px; padding: 6px 0 8px; }
  .globe { width: min(100%, 550px); }
  .web { width: 64vw; opacity: .23; }
  .web-one { left: -23vw; top: -4vh; }
  .web-two { right: -27vw; top: 2vh; width: 73vw; }
  .web-three { right: -28vw; bottom: -12vh; width: 80vw; }
  .web-four { left: -30vw; bottom: -13vh; width: 76vw; }
  .web-five { display: none; }
  .control-dock { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 5px; }
  .dock-button, .volume-dock { min-height: 36px; padding: 0 4px; gap: 5px; font-size: 8px; letter-spacing: .07em; }
  .dock-icon { width: 16px; height: 16px; }
  .volume-track { width: clamp(34px, 10vw, 58px); }
  .broadcast-frame { padding: 6px; }
  .video-copy { padding-left: 18px; }
  .video-copy h1 { font-size: clamp(34px, 10vw, 58px); }
  .video-copy p { font-size: 7px; letter-spacing: .15em; }
  .video-mark { width: 43%; right: 0; opacity: .78; }
  .player-status { right: 10px; top: 10px; font-size: 7px; }
  .track-card { min-height: 72px; padding: 8px 10px; gap: 9px; }
  .track-art { width: 42px; height: 42px; }
  .track-art img { width: 35px; height: 35px; }
  .track-main h2, .track-next h2 { font-size: 10px; }
  .track-main p { font-size: 9px; }
  .track-next { min-width: 0; max-width: 38%; padding-left: 10px; }
  .eyebrow { font-size: 7px; letter-spacing: .16em; }
  .location-label { font-size: 7px; padding: 2px 4px; }
}

@media (max-width: 380px) {
  .dock-button, .volume-dock { font-size: 7px; gap: 4px; }
  .volume-track { width: 28px; }
  .track-card { gap: 6px; padding-inline: 7px; }
  .track-art { width: 36px; height: 36px; }
  .track-art img { width: 30px; height: 30px; }
  .track-main h2, .track-next h2 { font-size: 9px; }
  .track-next { padding-left: 7px; }
}

@media (max-height: 650px) {
  .page-shell { grid-template-rows: minmax(155px, 32svh) auto minmax(170px, 1fr) minmax(68px, auto); gap: 7px; padding-block: 5px; }
  .control-dock { min-height: 50px; }
  .track-card { min-height: 68px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}