*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden}
body{
  background:radial-gradient(1200px 900px at 50% 20%,#1d0c33 0%,#0d0718 55%,#07040f 100%);
}
#c{position:fixed;inset:0;width:100%;height:100%;display:block}

.ctl{
  position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));
  transform:translateX(-50%);
  display:flex;gap:12px;z-index:5;
  opacity:.55;transition:opacity .3s;
}
.ctl:hover{opacity:1}
.ctl button{
  width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  color:#ffb7d1;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:transform .2s,color .2s,border-color .2s,background .2s,box-shadow .2s;
}
.ctl button svg{width:22px;height:22px}
.ctl button:hover{transform:translateY(-2px) scale(1.07);background:rgba(255,255,255,.1)}
.ctl button:active{transform:scale(.94)}
.ctl button.on{color:#ff4d8d;border-color:rgba(255,77,141,.7);box-shadow:0 0 18px rgba(255,77,141,.35)}
#bB.on{color:#9fb8e8;border-color:rgba(159,184,232,.6);box-shadow:0 0 18px rgba(120,160,230,.3)}
#bR.pulse{animation:pr 1.8s ease-in-out infinite;color:#cfe0ff}
@keyframes pr{0%,100%{box-shadow:0 0 0 0 rgba(160,190,240,.45)}50%{box-shadow:0 0 0 10px rgba(160,190,240,0)}}