:root{--bg:#0a0908;--fg:#f6efe4;--muted:#a29686;--accent:#e3a94f}*{box-sizing:border-box}html,body{height:100%;margin:0}body{background:var(--bg);color:var(--fg);-webkit-font-smoothing:antialiased;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}.stage{min-height:100dvh;position:relative}.stage:before{content:"";z-index:-3;background-image:-webkit-image-set(url(/ganesha-bhavana-wide.webp) 1x type("image/webp"),url(/ganesha-bhavana-wide.jpg) 1x type("image/jpeg"));background-image:image-set("/ganesha-bhavana-wide.webp" 1x type("image/webp"),"/ganesha-bhavana-wide.jpg" 1x type("image/jpeg"));background-position:50%;background-repeat:no-repeat;background-size:cover;position:fixed;inset:0}@media (orientation:portrait){.stage:before{background-image:-webkit-image-set(url(/ganesha-bhavana-tall.webp) 1x type("image/webp"),url(/ganesha-bhavana-tall.jpg) 1x type("image/jpeg"));background-image:image-set("/ganesha-bhavana-tall.webp" 1x type("image/webp"),"/ganesha-bhavana-tall.jpg" 1x type("image/jpeg"))}}.stage:after{content:"";z-index:-2;background:radial-gradient(130% 100% at 50% 30%,#0a090800 0%,#0a09081f 55%,#0a090866 100%),linear-gradient(#0a090838 0%,#0a090800 30%,#0a09082e 62%,#0a09089e 100%);position:fixed;inset:0}@media (orientation:portrait){.stage:after{background:radial-gradient(130% 90% at 50% 26%,#0a090800 0%,#0a090824 55%,#0a090870 100%),linear-gradient(#0a090842 0%,#0a090800 28%,#0a090842 58%,#0a0908c2 100%)}}.presence{top:calc(1.1rem + env(safe-area-inset-top));left:calc(1.1rem + env(safe-area-inset-left));z-index:1;-webkit-backdrop-filter:blur(18px)saturate(150%);color:var(--fg);letter-spacing:.02em;background:#14110f8c;border:1px solid #f6efe41c;border-radius:999px;align-items:center;gap:.42rem;margin:0;padding:.38rem .72rem .38rem .55rem;font-size:.72rem;font-weight:500;display:flex;position:fixed}.presence__dot{background:#6fdd8b;border-radius:50%;width:7px;height:7px;animation:2.2s ease-out infinite presence-pulse;box-shadow:0 0 #6fdd8b8c}.presence__count{font-variant-numeric:tabular-nums}.presence__label{color:var(--muted)}@keyframes presence-pulse{70%{box-shadow:0 0 0 6px #6fdd8b00}}.spotify{top:calc(1.1rem + env(safe-area-inset-top));right:calc(1.1rem + env(safe-area-inset-right));z-index:2;color:#1db954;-webkit-backdrop-filter:blur(10px);background:#0a0908b8;border:1px solid #f6efe424;border-radius:50%;place-items:center;width:44px;height:44px;transition:transform .15s,background-color .15s;display:grid;position:fixed;box-shadow:0 8px 22px #00000073}.spotify svg{fill:currentColor;width:26px;height:26px;display:block}.spotify:hover{background:#0a0908e0;transform:scale(1.08)}.spotify:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:50%}.dock{left:50%;bottom:calc(2rem + env(safe-area-inset-bottom));width:min(33rem, calc(100% - 2rem - env(safe-area-inset-left) - env(safe-area-inset-right)));-webkit-backdrop-filter:blur(22px)saturate(150%);background:#14110fa8;border:1px solid #f6efe41c;border-radius:999px;align-items:center;gap:1.1rem;padding:.5rem .9rem .5rem .5rem;display:flex;position:fixed;transform:translate(-50%);box-shadow:0 18px 48px #00000080}.disc{background:#14110f;border-radius:50%;flex-shrink:0;width:80px;height:80px;animation:8s linear infinite paused spin;position:relative;overflow:hidden;box-shadow:0 0 0 1px #f6efe433,0 10px 15px -3px #0006,0 4px 6px -4px #00000059}.disc--spinning{animation-play-state:running}@keyframes spin{to{transform:rotate(360deg)}}.disc__art{object-fit:cover;width:100%;height:100%;position:absolute;inset:0}.disc__hole{background:#16120f;border-radius:50%;width:13px;height:13px;margin:-6.5px 0 0 -6.5px;position:absolute;top:50%;left:50%;box-shadow:0 0 0 1px #f6efe438,inset 0 1px 3px #000000b3}.dock__info{flex:1;min-width:0}.dock__title,.dock__artist,.dock__time{text-overflow:ellipsis;white-space:nowrap;margin:0;overflow:hidden}.dock__title{letter-spacing:.01em;font-size:.86rem;font-weight:600}.dock__title--idle{color:var(--muted);letter-spacing:.16em;text-transform:uppercase;font-size:.7rem;font-weight:500}.dock__artist{color:var(--muted);margin-top:.1rem;font-size:.72rem}.track{background:#f6efe424;border-radius:999px;height:3px;margin-top:.55rem;overflow:hidden}.track__fill{background:var(--accent);height:100%;transition:width .5s linear;display:block}.dock__time{letter-spacing:.08em;color:var(--muted);font-variant-numeric:tabular-nums;margin-top:.35rem;font-size:.62rem}.dock__controls{flex-shrink:0;align-items:center;gap:.3rem;display:flex}.ctrl{color:#f6efe4cc;cursor:pointer;background:0 0;border:0;border-radius:999px;place-items:center;width:36px;height:36px;padding:0;transition:color .15s,background-color .15s,transform .15s;display:grid}.ctrl svg{fill:currentColor;width:19px;height:19px;display:block}.ctrl:hover:not(:disabled){color:var(--fg);background:#f6efe41a}.ctrl:active:not(:disabled){transform:scale(.92)}.ctrl:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.ctrl:disabled{opacity:.4;cursor:default}.ctrl--play{background:var(--fg);color:#0a0908;width:44px;height:44px;margin:0 .15rem}.ctrl--play svg{width:22px;height:22px}.ctrl__play-icon{transform:translate(1px)}.ctrl--play:hover:not(:disabled){color:#0a0908;background:#fffaf2}.ctrl--play:disabled{background:#f6efe459}.host{opacity:0;pointer-events:none;z-index:-1;width:320px;height:180px;position:fixed;bottom:0;right:0}@media (max-width:30rem){.dock{bottom:calc(1rem + env(safe-area-inset-bottom));gap:.7rem;padding:.4rem .6rem .4rem .4rem}.disc{width:58px;height:58px}.disc__hole{width:12px;height:12px;margin:-6px 0 0 -6px}.ctrl{width:32px;height:32px}.ctrl svg{width:17px;height:17px}.ctrl--play{width:40px;height:40px;margin:0}}.steam{--steam-ar:1.5;--urn-x:48.7%;--urn-y:49.2%;--urn-w:5.6%;--board-x:39.6%;--board-y:60.9%;--board-w:3%;--wisp-peak:.62;width:max(100vw, 100dvh * var(--steam-ar));height:max(100dvh, 100vw / var(--steam-ar));margin-left:calc(-.5 * max(100vw, 100dvh * var(--steam-ar)));margin-top:calc(-.5 * max(100dvh, 100vw / var(--steam-ar)));z-index:-1;pointer-events:none;mix-blend-mode:screen;opacity:.72;transition:opacity 2.6s;position:fixed;top:50%;left:50%}.steam--live{opacity:1}@media (orientation:portrait){.steam{--steam-ar:.66667;--urn-x:45.8%;--urn-y:49.1%;--urn-w:9.8%;--board-x:30.6%;--board-y:59.3%;--board-w:5.4%}}.steam__vent{left:var(--vent-x);top:var(--vent-y);width:var(--vent-w);aspect-ratio:1/2.4;position:absolute;transform:translate(-50%,-100%)}.steam__vent--urn{--vent-x:var(--urn-x);--vent-y:var(--urn-y);--vent-w:var(--urn-w)}.steam__vent--board{--vent-x:var(--board-x);--vent-y:var(--board-y);--vent-w:var(--board-w);--wisp-peak:.15}.steam__wisp{aspect-ratio:1/1.7;transform-origin:50% 100%;opacity:0;--wisp-drift:0%;--wisp-twist:0deg;width:76%;animation:steam-rise var(--wisp-time) cubic-bezier(.22, .55, .55, 1) var(--wisp-delay) infinite;background:radial-gradient(56% 42% at 44% 76%,#fff7e7b8,#fff0d829 56%,#ffecd000 100%),radial-gradient(44% 36% at 61% 38%,#fff5e28f,#ffeed41f 56%,#ffeacc00 100%),radial-gradient(33% 27% at 46% 11%,#fff4e061,#ffecd000 100%);position:absolute;bottom:0;left:50%}.steam__wisp--a{--wisp-time:11s;--wisp-delay:-2.4s;--wisp-drift:24%;--wisp-twist:8deg;width:70%;left:44%}.steam__wisp--b{--wisp-time:14.5s;--wisp-delay:-8.7s;--wisp-drift:-19%;--wisp-twist:-7deg;--wisp-gain:.8;width:88%;left:57%}.steam__wisp--c{--wisp-time:19s;--wisp-delay:-13.1s;--wisp-drift:12%;--wisp-twist:4deg;--wisp-gain:.62;width:58%;left:50%}@keyframes steam-rise{0%{opacity:0;transform:translate(-50%,4%)scale(.42)rotate(0)}26%{opacity:calc(var(--wisp-peak) * var(--wisp-gain,1));transform:translate(calc(-50% + var(--wisp-drift) * -.3), -14%) scale(.76) rotate(calc(var(--wisp-twist) * -.7))}64%{opacity:calc(var(--wisp-peak) * var(--wisp-gain,1) * .6);transform:translate(calc(-50% + var(--wisp-drift) * .6), -62%) scale(1.14) rotate(calc(var(--wisp-twist) * .5))}to{opacity:0;transform:translate(calc(-50% + var(--wisp-drift)), -108%) scale(1.5) rotate(var(--wisp-twist))}}@media (prefers-reduced-motion:reduce){.ctrl,.track__fill,.spotify{transition:none}.presence__dot,.disc{animation:none}.steam{transition:none}.steam__wisp{opacity:calc(var(--wisp-peak) * var(--wisp-gain,1) * .75);transform:translate(calc(-50% + var(--wisp-drift) * .4), -40%) scale(1) rotate(calc(var(--wisp-twist) * .4));animation:none}}