:root{color-scheme:dark;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#f0f5f5;background:#06090d}*{box-sizing:border-box}body{margin:0;overflow:hidden}#globe{position:fixed;inset:0;touch-action:none}canvas{display:block}#globe:focus-visible{outline:2px solid #9fe5ce;outline-offset:-5px}header{position:absolute;top:36px;left:5%;right:5%;display:flex;justify-content:space-between;align-items:center;pointer-events:none}.brand{font-size:25px;font-weight:600;letter-spacing:-1px;color:inherit;text-decoration:none;pointer-events:auto}.brand span{color:#9fe5ce}.edition,.eyebrow{font-size:10px;letter-spacing:2.5px;color:#9aabae}main{position:absolute;left:8%;top:31%;pointer-events:none}h1{font-size:clamp(38px,4.5vw,72px);font-weight:500;letter-spacing:-3px;line-height:1.08;margin:24px 0}.description{color:#8d9ba2;font-size:16px;line-height:1.8}nav{position:fixed;right:max(32px,env(safe-area-inset-right));bottom:max(30px,env(safe-area-inset-bottom));display:flex;gap:8px}button{width:43px;height:43px;border:1px solid #ffffff25;border-radius:50%;background:#101b24cc;color:#e2efef;font-size:25px;cursor:pointer}button:hover,button[aria-pressed=true]{background:#28473e;border-color:#9fe5ce}button:focus-visible,a:focus-visible{outline:2px solid #9fe5ce;outline-offset:4px}footer{position:absolute;bottom:30px;left:5%;right:5%;display:flex;align-items:end;gap:25px;font-size:12px;color:#d2dcde;pointer-events:none}small{display:block;font-size:10px;color:#7e9099;margin-top:7px}.hint{margin-left:auto;text-align:right}footer a{color:#85999f;font-size:11px;pointer-events:auto}#status{position:absolute;left:50%;top:48%;transform:translateX(-50%);padding:14px 20px;border-radius:12px;background:#12202bea;font-size:13px;max-width:85vw;text-align:center}#status[hidden]{display:none}@media(max-width:600px){header{top:24px}.brand{font-size:22px}.edition{display:none}main{top:14%;left:7%}h1{font-size:39px;letter-spacing:-1.8px;margin:15px 0}.eyebrow{font-size:8px}.description{font-size:13px}nav{right:max(16px,env(safe-area-inset-right));bottom:max(22px,env(safe-area-inset-bottom))}button{width:36px;height:36px}footer{bottom:22px}.hint{display:none}footer a{margin-left:auto}}

nav button{display:flex;align-items:center;justify-content:center;padding:0;line-height:1}nav button svg{display:block;flex-shrink:0}

#country-labels{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.country-pill{
  position:absolute;top:0;left:0;width:auto;height:24px;
  display:flex;align-items:center;justify-content:center;padding:0 9px;
  border:1px solid #ffffff38;border-top-color:#ffffff70;border-radius:999px;
  background:linear-gradient(155deg,#ffffff20,transparent 60%),#414952d9;
  color:#fff;font-family:inherit;font-size:10px;font-weight:600;line-height:1;
  white-space:nowrap;text-decoration:none;text-shadow:0 1px 2px #00000050;
  box-shadow:inset 0 1px 0 #ffffff24,0 2px 6px #00000026;
  pointer-events:auto;will-change:transform;
}
.country-pill[hidden]{display:none}
.country-pill:focus-visible{outline:2px solid #d4ed48;outline-offset:2px}
span.country-pill{cursor:default}
a.country-pill{
  cursor:pointer;color:#052814;text-shadow:none;
  background:linear-gradient(155deg,#ffffff14,transparent 60%),#16b950;
  border-color:#baffd266;border-top-color:#e0ffedb3;
}
a.country-pill:hover{background:linear-gradient(155deg,#ffffff20,transparent 60%),#25cb60}
a.country-pill:active{background:#119b42;box-shadow:inset 0 1px 3px #073c242b}
@supports ((backdrop-filter:blur(8px)) or (-webkit-backdrop-filter:blur(8px))){
  .country-pill{
    -webkit-backdrop-filter:blur(8px) saturate(125%);
    backdrop-filter:blur(8px) saturate(125%);
    background:linear-gradient(155deg,#ffffff20,transparent 60%),#414952b8;
  }
  a.country-pill{background:linear-gradient(155deg,#ffffff14,transparent 60%),#16b950f2}
  a.country-pill:hover{background:linear-gradient(155deg,#ffffff20,transparent 60%),#25cb60f2}
  a.country-pill:active{background:#119b42f2}
}

/* Glass controls share the country badges' surface and accent. */
nav button{
  background:linear-gradient(155deg,#ffffff20,transparent 60%),#414952d9;
  color:#fff;
  border:1px solid #ffffff38;border-top-color:#ffffff70;
  box-shadow:inset 0 1px 0 #ffffff24,0 2px 6px #00000026;
}
nav button:hover{
  background:linear-gradient(155deg,#ffffff2b,transparent 60%),#535e69e6;
  border-color:#ffffff70;
}
nav button[aria-pressed=true]{
  background:linear-gradient(155deg,#ffffff14,transparent 60%),#16b950f2;
  color:#052814;border-color:#baffd266;border-top-color:#e0ffedb3;
}
nav button[aria-pressed=true]:hover{background:linear-gradient(155deg,#ffffff20,transparent 60%),#25cb60f2}
nav button:active{box-shadow:inset 0 2px 4px #00000035}
nav button:focus-visible{outline:2px solid #d4ed48;outline-offset:3px}
@supports ((backdrop-filter:blur(8px)) or (-webkit-backdrop-filter:blur(8px))){
  nav button{
    -webkit-backdrop-filter:blur(8px) saturate(125%);
    backdrop-filter:blur(8px) saturate(125%);
    background:linear-gradient(155deg,#ffffff20,transparent 60%),#414952b8;
  }
  nav button:hover{background:linear-gradient(155deg,#ffffff2b,transparent 60%),#535e69cf}
  nav button[aria-pressed=true]{background:linear-gradient(155deg,#ffffff14,transparent 60%),#16b950f2}
  nav button[aria-pressed=true]:hover{background:linear-gradient(155deg,#ffffff20,transparent 60%),#25cb60f2}
}

#player-panel{
  position:fixed;z-index:2;left:5%;top:max(96px,calc(50dvh - 140px));bottom:calc(max(30px,env(safe-area-inset-bottom)) + 43px);transform:none;
  width:clamp(280px,34vw,440px);min-height:0;padding:32px 20px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;border:1px solid #ffffff20;border-top-color:#ffffff38;
  border-radius:24px;background:linear-gradient(145deg,#ffffff09,transparent 65%),#182128e8;
  box-shadow:inset 0 1px 0 #ffffff0d,0 12px 36px #00000026;
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
}
.player-placeholder-icon{
  width:56px;height:56px;display:grid;place-items:center;margin-bottom:20px;
  border-radius:18px;background:#ffffff08;border:1px solid #ffffff12;color:#a2b7ad;
}
#player-title{font-size:18px;font-weight:500;letter-spacing:-.3px;margin:0 0 10px}
#player-panel p{font-size:12px;line-height:1.7;color:#a0acb5;margin:0}
@media(max-width:600px){
  #player-panel{left:5%;right:5%;top:calc(100dvh - 222px);bottom:calc(max(22px,env(safe-area-inset-bottom)) + 36px);transform:none;width:auto;min-height:0;padding:18px;border-radius:20px}
  .player-placeholder-icon{display:none}
  #player-title{font-size:16px;margin-bottom:6px}
}

#player-panel.has-player{
  transform:none;padding:20px 12px 12px;min-height:0;overflow:auto;
  justify-content:flex-start;
}
.has-player #player-title,.has-player #player-description{flex-shrink:0}
.has-player #player-content{display:flex;flex-direction:column;flex:1;min-height:0}
.has-player #player-content iframe{flex:1;min-height:180px;height:auto}
.has-player #player-content a{flex-shrink:0}
.has-player .player-placeholder-icon{display:none}
.has-player #player-title{padding:0 28px;font-size:18px}
#player-content{width:100%}
#player-content:empty{display:none}
#player-content iframe{display:block;width:100%;height:352px;border:0;border-radius:12px;margin-top:16px}
#player-content a{display:inline-block;font-size:12px;color:#a7bcb0;margin-top:12px;text-decoration:none}
#player-content a:hover{color:#fff}
.player-close{position:absolute;top:10px;right:10px;width:28px;height:28px;font-size:20px;line-height:1}
.player-close[hidden]{display:none}
@media(max-width:600px){
  #player-panel.has-player{width:auto;height:auto;max-height:none}
}

/* Keep the empty card structured like the embedded playlist. */
#player-panel{padding:20px 12px 12px;justify-content:flex-start;overflow:auto}
#player-panel #player-title{padding:0 28px;font-size:18px;flex-shrink:0}
#player-panel #player-description{flex-shrink:0}
.player-empty{
  width:100%;flex:1;min-height:220px;margin-top:16px;border-radius:12px;
  overflow:hidden;display:flex;flex-direction:column;background:#121212;text-align:left;
}
#player-panel .player-empty p{
  margin:auto;padding:24px;max-width:290px;text-align:center;
  color:#929d96;font-size:12px;line-height:1.7;
}
.has-player .player-empty{display:none}

#player-panel .spotify-login{
  order:3;flex-shrink:0;display:none;
  margin:14px 0 0;padding:0 12px;color:#a0acb5;
  font-size:12px;line-height:1.6;text-align:center;
}
#player-panel.has-player .spotify-login{display:block}

.spotify-login a{color:#c0d9ca;text-decoration:underline;text-underline-offset:3px}
.spotify-login a:hover{color:#fff}

.brand{display:flex;flex-direction:column;align-items:flex-start;gap:5px}
.brand .brand-name{color:#f0f5f5;line-height:1.1}