:root{
  --cream:#F6EBD9;
  --dim:rgba(246,235,217,.74);
  --faint:rgba(246,235,217,.54);
  --ink:#080A10;
  --stroke:rgba(246,235,217,.18);
  --pad:clamp(18px,2.6vw,34px);
  --display:'Baloo Tammudu 2','Anek Telugu','Noto Sans Telugu','Nirmala UI',Gautami,system-ui,sans-serif;
  --ui:ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --e:cubic-bezier(.2,.75,.2,1);
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html{background:var(--ink)}
html,body{height:100%}
body{margin:0;background:var(--ink);color:var(--cream);font-family:var(--ui);overflow:hidden;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
:focus-visible{outline:2px solid rgba(246,235,217,.8);outline-offset:3px;border-radius:12px}

/* ---------- art ---------- */
.stage{position:fixed;inset:0;z-index:0;overflow:hidden;background:var(--ink)}
.plate{position:absolute;inset:0;background-repeat:no-repeat;background-size:cover;
  background-position:50% 52%;opacity:0;transition:opacity .85s var(--e)}
.plate.on{opacity:1}
#pNight{background-image:url('art/night.jpg')}
#pDay{background-image:url('art/day.jpg')}
.scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,
  rgba(5,7,12,.58) 0%,rgba(5,7,12,.14) 15%,rgba(5,7,12,0) 33%,
  rgba(5,7,12,0) 52%,rgba(5,7,12,.42) 80%,rgba(5,7,12,.72) 100%)}
body.day .scrim{background:
  linear-gradient(180deg,rgba(255,249,238,.80) 0%,rgba(255,249,238,.42) 9%,rgba(255,249,238,0) 23%),
  linear-gradient(180deg,rgba(5,7,12,0) 52%,rgba(5,7,12,.36) 80%,rgba(5,7,12,.64) 100%)}

/* ---------- title ---------- */
.title{position:fixed;z-index:1;left:50%;top:max(170px,24.5%);transform:translate(-50%,-50%);margin:0;
  font-family:var(--display);font-weight:800;line-height:.94;white-space:nowrap;
  font-size:clamp(50px,10.6vw,158px);letter-spacing:-.004em;color:var(--cream);
  text-shadow:0 4px 64px rgba(0,0,0,.52),0 2px 7px rgba(0,0,0,.3);
  opacity:0;animation:rise 1.15s var(--e) .2s forwards}
body.day .title{color:#6E1E18;text-shadow:0 2px 40px rgba(255,248,236,.62)}
@keyframes rise{from{opacity:0;transform:translate(-50%,-44%)}to{opacity:1;transform:translate(-50%,-50%)}}

/* ---------- hud ---------- */
.hud{position:fixed;inset:0;z-index:2;pointer-events:none}
.hud a,.hud button{pointer-events:auto}
.zone{position:absolute;display:flex;align-items:center;gap:10px;
  font-size:15px;letter-spacing:.045em;color:rgba(246,235,217,.95);
  text-shadow:0 1px 18px rgba(0,0,0,.62),0 0 3px rgba(0,0,0,.35)}
body.day .zone{color:#26150F;text-shadow:0 1px 2px rgba(255,250,240,.95),0 0 14px rgba(255,250,240,.85)}
.tl{top:var(--pad);left:var(--pad)}
.tc{top:var(--pad);left:50%;transform:translateX(-50%)}
.tr{top:var(--pad);right:var(--pad);gap:22px}
.clock{font-variant-numeric:tabular-nums}
.dot{width:7px;height:7px;border-radius:50%;background:#7CD48F;display:inline-block;
  margin-right:9px;box-shadow:0 0 11px rgba(124,212,143,.9);animation:pulse 2.8s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.42}}
.tr a{color:inherit;text-decoration:none;opacity:.88;transition:opacity .2s;white-space:nowrap}
.tr a:hover{opacity:1}
body.day .tr a{opacity:.92}
body.day .tr a:hover{opacity:1}
.tr .arw{opacity:.6;margin-left:4px;font-size:12px}
.only-sm{display:none}

.ib{position:relative;width:36px;height:36px;padding:0;border:0;border-radius:50%;
  background:none;color:inherit;display:grid;place-items:center;cursor:pointer;
  opacity:.88;transition:opacity .2s,background .2s}
.ib::after{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:46px;height:46px;border-radius:50%}
.ib:hover{opacity:1;background:rgba(246,235,217,.13)}
body.day .ib:hover{background:rgba(38,21,15,.10)}
.ib svg{width:20px;height:20px;display:block;filter:drop-shadow(0 1px 6px rgba(0,0,0,.5))}
body.day .ib svg{filter:drop-shadow(0 1px 6px rgba(255,250,240,.6))}
/* icon state is driven by body classes, never by the hidden attribute */
#iMoon,#iVolOff{display:none}
body.day #iSun{display:none}
body.day #iMoon{display:block}
body.muted #iVolOn{display:none}
body.muted #iVolOff{display:block}

/* ---------- credit ---------- */
.credit{position:absolute;left:var(--pad);bottom:var(--pad);z-index:2;pointer-events:auto;
  font-size:14px;letter-spacing:.04em;color:var(--faint);text-decoration:none;
  transition:color .2s;text-shadow:0 1px 14px rgba(0,0,0,.6)}
.credit:hover{color:var(--cream)}
.credit u{text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:1px;opacity:.85}

/* ---------- player ---------- */
.player{position:fixed;z-index:3;left:50%;bottom:clamp(20px,3.4vw,42px);
  transform:translateX(-50%) translateY(18px);
  width:min(730px,calc(100vw - 30px));display:flex;align-items:center;gap:18px;
  padding:14px 18px;border-radius:48px;
  background:rgba(10,12,18,.42);border:1px solid var(--stroke);
  box-shadow:0 26px 72px rgba(0,0,0,.52),inset 0 1px 0 rgba(255,255,255,.08);
  opacity:0;animation:rise2 .95s var(--e) .45s forwards}
@supports ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .player{backdrop-filter:blur(26px) saturate(1.35);-webkit-backdrop-filter:blur(26px) saturate(1.35)}}
@keyframes rise2{to{opacity:1;transform:translateX(-50%) translateY(0)}}

.disc{position:relative;flex:0 0 68px;width:68px;height:68px;border-radius:50%;
  overflow:hidden;background:#140F0C;
  box-shadow:0 7px 20px rgba(0,0,0,.45),inset 0 0 0 1px rgba(246,235,217,.18)}
.disc img{width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .5s var(--e)}
.disc img.in{opacity:1}
.disc::after{content:'';position:absolute;left:50%;top:50%;width:13px;height:13px;
  margin:-6.5px 0 0 -6.5px;border-radius:50%;background:#0D0B0A;
  box-shadow:0 0 0 1px rgba(246,235,217,.28)}
body.playing .disc{animation:spin 11s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.meta{flex:1;min-width:0}
.tname{font-size:17px;font-weight:600;letter-spacing:.005em;color:var(--cream);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sub{margin-top:3px;font-size:14px;color:var(--dim);letter-spacing:.015em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar{position:relative;margin-top:11px;height:14px;display:flex;align-items:center;
  cursor:pointer;touch-action:none}
.bar::before{content:'';position:absolute;left:0;right:0;height:3px;border-radius:3px;
  background:rgba(246,235,217,.22)}
.bar i{position:relative;display:block;height:3px;width:0%;border-radius:3px;
  background:rgba(246,235,217,.92);transition:width .28s linear}
.bar .knob{position:absolute;top:50%;width:10px;height:10px;margin-left:-5px;border-radius:50%;
  background:var(--cream);transform:translateY(-50%) scale(0);transition:transform .2s var(--e);
  box-shadow:0 2px 7px rgba(0,0,0,.45)}
.bar:hover .knob,.bar:focus-visible .knob{transform:translateY(-50%) scale(1)}
.times{margin-top:7px;font-size:12px;color:var(--faint);font-variant-numeric:tabular-nums;letter-spacing:.03em}

.ctrls{flex:0 0 auto;display:flex;align-items:center;gap:2px}
.pb{position:relative;width:42px;height:42px;padding:0;border:0;border-radius:50%;background:none;
  color:var(--cream);display:grid;place-items:center;cursor:pointer;opacity:.84;
  transition:opacity .2s,background .2s,transform .12s}
.pb::after{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:48px;height:48px;border-radius:50%}
.pb:hover{opacity:1;background:rgba(246,235,217,.11)}
.pb:active{transform:scale(.94)}
.pb svg{width:21px;height:21px;display:block}
.pb.on{opacity:1;color:#9FE0AE}
.pb.play{width:58px;height:58px;background:var(--cream);color:#0B0D12;opacity:1;margin:0 5px;
  box-shadow:0 4px 16px rgba(0,0,0,.34)}
.pb.play:hover{background:#FFF6E6}
.pb.play svg{width:23px;height:23px;margin-left:2px}
.pb.play .pause-i{display:none;margin-left:0}
body.playing .pb.play .play-i{display:none}
body.playing .pb.play .pause-i{display:block}

#yt{position:fixed;width:1px;height:1px;left:-9999px;top:-9999px;opacity:0;pointer-events:none}

/* ---------- small screens ---------- */
@media (max-width:640px){
  .zone{font-size:13px;letter-spacing:.03em;gap:8px}
  .tr{gap:14px}
  .hide-sm{display:none}
  .only-sm{display:inline}
  .ib{width:32px;height:32px}
  .ib svg{width:19px;height:19px}
  .title{top:max(112px,20.5%);font-size:clamp(40px,11.8vw,64px)}
  .player{width:calc(100vw - 16px);bottom:13px;padding:11px 12px;gap:11px;border-radius:36px}
  .disc{flex-basis:48px;width:48px;height:48px}
  .disc::after{width:10px;height:10px;margin:-5px 0 0 -5px}
  .tname{font-size:15px}
  .sub{font-size:12.5px}
  .bar{margin-top:8px}
  .times{margin-top:4px;font-size:11px}
  .pb{width:34px;height:34px}
  .pb svg{width:18px;height:18px}
  .pb.play{width:46px;height:46px;margin:0 1px}
  .pb.play svg{width:19px;height:19px}
  .ctrls{gap:0}
  .ctrls .shuf{display:none}
  .credit{left:50%;transform:translateX(-50%);bottom:134px;font-size:12.5px;white-space:nowrap}
}

@media (prefers-reduced-motion:reduce){
  .title{animation:none;opacity:1;transform:translate(-50%,-50%)}
  .player{animation:none;opacity:1;transform:translateX(-50%)}
  .dot{animation:none}
  body.playing .disc{animation:none}
  .plate,.disc img,.bar i{transition:none}
}

/* portrait phones get their own plate */
@media (max-width:760px) and (orientation:portrait){
  #pNight{background-image:url('art/night-p.jpg')}
  #pDay{background-image:url('art/day-p.jpg')}
  .plate{background-position:50% 50%}
}