:root{
  --bg1:#0a1633; --bg2:#102a5c; --bg3:#1b3a78;
  --ice:#e8f4ff; --ice-dim:#b9d4ef;
  --accent:#8fd3ff; --accent2:#b8a6ff;
  --glass:rgba(255,255,255,.08);
  --glass-brd:rgba(255,255,255,.18);
  --shadow:0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--ice);
  font-family:'Inter',system-ui,Segoe UI,Roboto,sans-serif;
  background:
    radial-gradient(1200px 600px at 20% -10%, #2a4d9b 0%, transparent 60%),
    radial-gradient(900px 500px at 110% 10%, #3b2a7a 0%, transparent 60%),
    linear-gradient(180deg,var(--bg1),var(--bg2) 60%,var(--bg3));
  background-attachment:fixed;
  min-height:100vh; overflow-x:hidden;
}
#snow{position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:1}
.hero{position:relative; z-index:2; max-width:980px; margin:0 auto; padding:64px 20px 48px; text-align:center}
.title{
  font-family:'Mountains of Christmas',cursive;
  font-size:clamp(42px,8vw,96px);
  margin:0 0 6px; letter-spacing:1px;
  color:#fff;
  text-shadow:0 0 18px rgba(143,211,255,.55),0 0 40px rgba(184,166,255,.35);
  animation:glow 4s ease-in-out infinite alternate;
}
@keyframes glow{from{text-shadow:0 0 14px rgba(143,211,255,.4),0 0 28px rgba(184,166,255,.25)}to{text-shadow:0 0 22px rgba(143,211,255,.7),0 0 48px rgba(184,166,255,.5)}}
.subtitle{margin:0 0 32px; color:var(--ice-dim); font-weight:300; letter-spacing:.5px}

.countdown{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin:0 auto 42px; max-width:640px}
.cell{
  background:var(--glass); border:1px solid var(--glass-brd);
  border-radius:18px; padding:18px 8px; backdrop-filter:blur(10px);
  box-shadow:var(--shadow);
}
.cell span{display:block; font-size:clamp(26px,5vw,44px); font-weight:600; font-variant-numeric:tabular-nums; color:#fff}
.cell small{display:block; margin-top:6px; color:var(--ice-dim); font-size:12px; letter-spacing:2px; text-transform:uppercase}

.player{
  background:var(--glass); border:1px solid var(--glass-brd); border-radius:22px;
  padding:22px; max-width:640px; margin:0 auto 46px; text-align:left;
  backdrop-filter:blur(12px); box-shadow:var(--shadow);
}
.player-head{display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:14px}
.player-title{font-weight:600; letter-spacing:.4px}
.track-name{color:var(--ice-dim); font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:60%}
.player-controls{display:flex; justify-content:center; gap:16px; margin:6px 0 14px}
.btn{
  width:52px; height:52px; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.1); color:#fff; border:1px solid var(--glass-brd);
  font-size:20px; display:grid; place-items:center; transition:.2s transform,.2s background;
}
.btn:hover{background:rgba(255,255,255,.18); transform:translateY(-2px)}
.btn.play{width:64px; height:64px; font-size:24px; background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#08122b; border:0}
.progress-wrap{margin:6px 0 12px}
#seek{width:100%; accent-color:var(--accent); cursor:pointer}
.times{display:flex; justify-content:space-between; font-size:12px; color:var(--ice-dim); margin-top:4px; font-variant-numeric:tabular-nums}
.playlist{display:flex; flex-direction:column; gap:6px; max-height:180px; overflow:auto; padding-right:4px}
.track{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:10px 12px; border-radius:12px; cursor:pointer; font-size:14px;
  background:rgba(255,255,255,.04); border:1px solid transparent; transition:.15s background,.15s border-color;
}
.track:hover{background:rgba(255,255,255,.1)}
.track.active{background:rgba(143,211,255,.16); border-color:rgba(143,211,255,.45)}
.track .idx{color:var(--ice-dim); font-variant-numeric:tabular-nums; min-width:22px}
.track .name{flex:1; text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.hint{margin:12px 0 0; font-size:12px; color:var(--ice-dim); text-align:center}
.hint code{background:rgba(255,255,255,.08); padding:1px 6px; border-radius:6px; font-size:11px}

.features{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:0 auto}
.card{background:var(--glass); border:1px solid var(--glass-brd); border-radius:18px; padding:20px; backdrop-filter:blur(10px); box-shadow:var(--shadow); text-align:left}
.card h3{margin:0 0 8px; font-size:16px; letter-spacing:.3px}
.card p{margin:0; color:var(--ice-dim); font-size:14px; line-height:1.5}

.foot{margin-top:40px; color:var(--ice-dim); font-size:13px}

@media (max-width:720px){
  .countdown{grid-template-columns:repeat(2,minmax(0,1fr))}
  .features{grid-template-columns:1fr}
  .hero{padding-top:44px}
  .player{padding:18px}
}

.tz-info{
  margin:-18px 0 28px; color:var(--ice-dim); font-size:13px; letter-spacing:.3px;
  opacity:.9;
}
.tz-info b{color:#fff; font-weight:600}
.tz-info .utc{color:var(--accent)}
.tz-info .sync{font-size:11px; opacity:.7; margin-left:6px}