:root{--fade:2s;--ui-fade:.5s;--enter-fade:.75s;--logo-w:clamp(200px, 40vw, 660px);--logo-y:53%;--enter-gap:clamp(24px, 3vh, 40px);--edge:clamp(20px, 2.4vmin, 32px);--ink:#f4f0f8;--room:#0a0710}*,:before,:after{box-sizing:border-box}html,body{background:var(--room);height:100%;color:var(--ink);-webkit-font-smoothing:antialiased;margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Inter,Helvetica,Arial,sans-serif;overflow:hidden}#batcave{position:fixed;inset:0}#yt-stage{z-index:0;width:200px;height:200px;position:absolute;bottom:0;right:0;overflow:hidden}#yt-stage iframe{border:0;width:200px;height:200px;display:block}.bg{z-index:1;background:var(--room);position:absolute;inset:0}.bg-img{object-fit:cover;opacity:0;width:100%;height:100%;transition:opacity 0s var(--fade);position:absolute;inset:0}#batcave[data-mood=purple] [data-mood-img=purple],#batcave[data-mood=crimson] [data-mood-img=crimson],#batcave[data-mood=amber] [data-mood-img=amber]{opacity:1;z-index:1;transition:opacity var(--fade) ease-in-out}.hero{left:50%;top:var(--logo-y);z-index:10;position:absolute;transform:translate(-50%,-50%)}.hero-logo{width:var(--logo-w);filter:drop-shadow(0 2px 28px #00000080);-webkit-user-select:none;user-select:none;-webkit-user-drag:none;height:auto;transition:opacity 1.6s ease-in-out;display:block}#batcave[data-logo=faded] .hero-logo{opacity:.42}.hero-enter{top:calc(100% + var(--enter-gap));appearance:none;color:var(--ink);font:inherit;letter-spacing:.42em;text-indent:.42em;text-transform:uppercase;white-space:nowrap;opacity:.55;cursor:pointer;transition:opacity var(--enter-fade) ease;background:0 0;border:0;padding:.5em .75em;font-size:.68rem;animation:4.5s ease-in-out infinite breathe;position:absolute;left:50%;transform:translate(-50%)}.hero-enter:hover,.hero-enter:focus-visible{opacity:1;animation:none}@keyframes breathe{50%{opacity:.78}}.clock,.presence{top:var(--edge);z-index:20;letter-spacing:.26em;text-transform:uppercase;font-variant-numeric:tabular-nums;opacity:.48;text-shadow:0 1px 14px #000000b3;transition:opacity var(--ui-fade) ease;pointer-events:none;-webkit-user-select:none;user-select:none;margin:0;font-size:.62rem;position:absolute}.clock{left:var(--edge)}.presence{white-space:nowrap;align-items:center;gap:.65em;display:flex;left:50%;transform:translate(-50%)}.presence[hidden]{display:none}.presence-dot{background:currentColor;border-radius:50%;width:5px;height:5px;animation:3.4s ease-in-out infinite pulse}@keyframes pulse{50%{opacity:.35}}.mood-set{top:var(--edge);right:var(--edge);z-index:20;opacity:.48;transition:opacity var(--ui-fade) ease;align-items:center;gap:.1rem;display:flex;position:absolute}.mood{appearance:none;cursor:pointer;background:0 0;border:0;place-items:center;width:1.5rem;height:1.5rem;padding:0;display:grid}.mood:before{content:"";background:var(--lamp);opacity:.45;border-radius:50%;width:7px;height:7px;transition:opacity .2s,box-shadow .2s}.mood[data-mood-set=purple]{--lamp:#9b7cc4}.mood[data-mood-set=crimson]{--lamp:#c4667c}.mood[data-mood-set=amber]{--lamp:#d39a55}.mood:hover:before,.mood:focus-visible:before{opacity:.85}.mood[aria-pressed=true]:before{opacity:1;box-shadow:0 0 0 1px #f4f0f88c}.player{left:50%;bottom:max(2.4rem, calc(env(safe-area-inset-bottom) + 1.2rem));z-index:30;text-align:center;width:min(360px,100vw - 3rem);transition:opacity var(--ui-fade) ease;flex-direction:column;align-items:center;gap:.7rem;display:flex;position:absolute;transform:translate(-50%)}.player:before{content:"";z-index:-1;pointer-events:none;background:radial-gradient(#05030966,#05030900 74%);position:absolute;inset:-1.6rem -2.5rem -1.2rem}.track{text-shadow:0 1px 12px #000000b3;flex-direction:column;gap:.3em;max-width:100%;margin:0;line-height:1.3;display:flex}.track-artist,.track-title{text-overflow:ellipsis;white-space:nowrap;display:block;overflow:hidden}.track-artist{letter-spacing:.28em;text-transform:uppercase;opacity:.6;font-size:.6rem}.track-title{letter-spacing:.02em;opacity:.95;font-size:.86rem}#batcave[data-muted=true] .track{opacity:.45}.scrub{letter-spacing:.1em;font-variant-numeric:tabular-nums;opacity:.5;text-shadow:0 1px 12px #000000b3;align-items:center;gap:.7rem;width:100%;font-size:.58rem;display:flex}.time{min-width:2.4em}.elapsed{text-align:right}.duration{text-align:left}.rail{cursor:pointer;background:#f4f0f829 padding-box content-box;border-block:8px solid #0000;border-radius:2px;flex:1;height:2px;position:relative}.rail-fill{border-radius:inherit;background:var(--ink);transform-origin:0;position:absolute;inset:0;transform:scaleX(0)}#batcave[data-live=true] .rail{visibility:hidden}#batcave[data-live=true] .duration{letter-spacing:.22em;opacity:.8}.transport{align-items:center;gap:.15rem;display:flex}.transport button{appearance:none;color:var(--ink);opacity:.55;cursor:pointer;background:0 0;border:0;place-items:center;width:2.1rem;height:2.1rem;padding:0;transition:opacity .2s;display:grid}.transport button:hover,.transport button:focus-visible{opacity:1}.transport svg{fill:currentColor;filter:drop-shadow(0 1px 10px #000000b3);pointer-events:none;width:13px;height:13px;display:block}.transport [data-act=toggle]{opacity:.8}.transport [data-act=toggle] svg{width:15px;height:15px}.transport .minor{opacity:.32;margin-left:.35rem}.transport .minor svg{width:12px;height:12px}.i-pause,.i-muted,#batcave[data-playing=true] .i-play{display:none}#batcave[data-playing=true] .i-pause{display:block}#batcave[data-muted=true] .i-sound{display:none}#batcave[data-muted=true] .i-muted{display:block}.notice{letter-spacing:.28em;text-transform:uppercase;opacity:.75;text-shadow:0 1px 12px #000000b3;min-height:1em;margin:0;font-size:.58rem}#batcave[data-state=closed] .player,#batcave[data-state=entering] .player,#batcave[data-state=entering] .hero-enter,#batcave[data-state=open] .hero-enter,#batcave:not([data-state=open]) .clock,#batcave:not([data-state=open]) .presence,#batcave:not([data-state=open]) .mood-set,#batcave[data-idle=true] .player{opacity:0;pointer-events:none}#batcave[data-idle=true] .clock,#batcave[data-idle=true] .presence,#batcave[data-idle=true] .mood-set{opacity:.26}#batcave[data-notice=true] .player{opacity:1;pointer-events:auto}:focus-visible{outline:1px solid var(--ink);outline-offset:5px;border-radius:2px}@media (prefers-reduced-motion:reduce){:root{--fade:.2s;--ui-fade:.12s;--enter-fade:.15s}.hero-logo{transition-duration:.2s}.hero-enter,.presence-dot{animation:none}}@media (width<=640px){:root{--logo-w:clamp(180px, 66vw, 420px);--logo-y:50%}.player{gap:.85rem;width:calc(100vw - 2rem)}.transport button{opacity:.75;width:2.75rem;height:2.75rem}.transport .minor{opacity:.45}.transport svg{width:15px;height:15px}.transport [data-act=toggle] svg{width:18px;height:18px}.presence,.clock{font-size:.58rem}.mood{width:2.4rem;height:2.4rem}.mood-set{top:calc(var(--edge) + 1.9rem);opacity:.7}}@media (height<=800px){.player{bottom:max(1.6rem, calc(env(safe-area-inset-bottom) + 1rem));gap:.55rem}}@media (hover:none){#batcave[data-idle=true] .player{opacity:1;pointer-events:auto}#batcave[data-idle=true] .clock,#batcave[data-idle=true] .presence,#batcave[data-idle=true] .mood-set{opacity:.48}}
