*,:before,:after{box-sizing:border-box}html,body{color:#fff;-webkit-font-smoothing:antialiased;background:#000;height:100%;min-height:100%;margin:0;font-family:Inter,system-ui,-apple-system,sans-serif}body{flex-direction:column;min-height:100%;display:flex}button{font:inherit;color:inherit;cursor:pointer;background:0 0;border:0;padding:0}a{color:inherit;text-decoration:none}#app{flex:1;min-height:100dvh}.main{flex-direction:column;flex:1;justify-content:space-between;align-items:center;min-height:100dvh;display:flex;position:relative;overflow:hidden}.hero-bg{z-index:0;background-color:#000;background-image:url(/bg.jpg);background-position:50%;background-repeat:no-repeat;background-size:cover;position:fixed;inset:0}.hero-bg__shade{pointer-events:none;background:linear-gradient(#0000001a 0%,#0000 50%,#0006 100%);position:absolute;inset:0}.clock{z-index:20;font-variant-numeric:tabular-nums;color:#fff;filter:drop-shadow(0 1px 6px #00000080);font-size:.875rem;font-weight:500;position:fixed;top:1.25rem;left:1.25rem}.clock__blink{animation:1s step-end infinite blink}.clock__ampm{color:#ffffffb3;margin-left:.375rem}.online{z-index:20;color:#fff;filter:drop-shadow(0 1px 6px #00000080);border-radius:999px;align-items:center;gap:.5rem;padding:.375rem 1rem .375rem .75rem;font-size:.875rem;font-weight:500;display:inline-flex;position:fixed;top:1.25rem;left:50%;transform:translate(-50%)}.online__dot-wrap{width:.625rem;height:.625rem;display:flex;position:relative}.online__ping{opacity:.75;background:#4ade80;border-radius:999px;animation:1.2s cubic-bezier(0,0,.2,1) infinite ping;position:absolute;inset:0}.online__dot{background:#4ade80;border-radius:999px;width:.625rem;height:.625rem;display:inline-flex;position:relative;box-shadow:0 0 8px #4ade80e6}.online__count{font-variant-numeric:tabular-nums}.online__label{color:#ffffffb3}.top-links{z-index:20;align-items:center;gap:.5rem;display:flex;position:fixed;top:1.25rem;right:1.25rem}.top-links a{color:#fff;filter:drop-shadow(0 1px 6px #00000080);border-radius:999px;align-items:center;gap:.5rem;padding:.625rem;font-size:.875rem;font-weight:500;transition:opacity .15s,transform .15s;display:flex}.top-links a:hover{opacity:.8}.top-links a:active{transform:scale(.95)}.top-links span,.top-links .arrow{display:none}.brand-wrap{z-index:10;flex-direction:column;align-items:center;margin-top:14vh;padding:0 1.5rem;display:flex;position:relative}.logo{letter-spacing:.02em;color:#fff;text-align:center;filter:drop-shadow(0 4px 24px #00000080);margin:0;font-family:Noto Serif Devanagari,Georgia,serif;font-size:clamp(3.5rem,14vw,6.5rem);font-weight:700;line-height:1}.player-wrap{z-index:10;justify-content:center;width:100%;margin-bottom:8vh;padding:0 1.5rem;display:flex;position:relative}.player{width:100%;max-width:36rem}.player-slot{opacity:0;pointer-events:none;width:1px;height:1px;position:absolute;overflow:hidden}.player-bar{-webkit-backdrop-filter:blur(40px)saturate(150%);background:#ffffff1a;border:1px solid #fff3;border-radius:999px;align-items:center;gap:1rem;padding:.75rem 1.25rem .75rem .75rem;display:flex;position:relative;box-shadow:0 8px 40px #00000073,inset 0 1px #ffffff40}.vinyl{flex-shrink:0;width:5rem;height:5rem;position:relative}.vinyl__disc{border-radius:999px;outline:1px solid #fff3;width:100%;height:100%;animation:8s linear infinite paused spin;overflow:hidden;box-shadow:0 10px 24px #00000059}.vinyl__disc.is-spinning{animation-play-state:running}.vinyl__disc img{object-fit:cover;border-radius:999px;width:100%;height:100%;display:block}.vinyl__hub{pointer-events:none;background:#000000b3;border-radius:999px;outline:2px solid #fff6;width:.75rem;height:.75rem;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.meta{flex:1;min-width:0}.meta__title{text-overflow:ellipsis;white-space:nowrap;color:#fff;text-shadow:0 1px 2px #00000040;margin:0;font-size:15px;font-weight:600;overflow:hidden}.meta__artist{text-overflow:ellipsis;white-space:nowrap;color:#ffffffb3;margin:0;font-size:13px;overflow:hidden}.seek{margin-top:.5rem}.seek__bar{cursor:pointer;width:100%;height:.5rem;position:relative}.seek__track{inset-inline:0;background:#fff3;border-radius:999px;height:.25rem;position:absolute;top:50%;overflow:hidden;transform:translateY(-50%)}.seek__fill{background:#ffffffe6;border-radius:999px;width:0%;height:100%}.seek__thumb{opacity:0;background:#fff;border-radius:999px;width:.75rem;height:.75rem;transition:opacity .15s;position:absolute;top:50%;left:0%;transform:translate(-50%,-50%);box-shadow:0 1px 4px #00000059}.seek__bar:hover .seek__thumb{opacity:1}.seek__time{text-align:left;font-variant-numeric:tabular-nums;color:#fff9;margin-top:.375rem;font-size:11px}.controls{align-items:center;gap:.25rem;display:flex}.ctrl{color:#fffc;border-radius:999px;place-items:center;width:2.25rem;height:2.25rem;transition:background .15s,color .15s,transform .15s;display:grid}.ctrl:hover{color:#fff;background:#ffffff26}.ctrl:active{transform:scale(.95)}.ctrl--play{color:#000;background:#fff;width:2.75rem;height:2.75rem;box-shadow:0 8px 20px #00000040}.ctrl--play:hover{color:#000;background:#fff;transform:scale(1.05)}.ctrl--play:active{transform:scale(.95)}.ctrl--play:disabled{opacity:.5}@keyframes blink{50%{opacity:0}}@keyframes ping{75%,to{opacity:0;transform:scale(2)}}@keyframes spin{to{transform:rotate(360deg)}}@media (width>=640px){.top-links a{padding:.5rem .875rem .5rem .75rem}.top-links span{display:inline}.top-links .arrow{opacity:.5;transition:opacity .15s;display:inline-flex;transform:rotate(-45deg)}.top-links a:hover .arrow{opacity:.9}}@media (width<=520px){.player-bar{gap:.75rem;padding-right:.85rem}.vinyl{width:3.75rem;height:3.75rem}.meta__title{font-size:14px}}@media (prefers-reduced-motion:reduce){.clock__blink,.online__ping,.vinyl__disc{animation:none!important}}