html, body{ height:auto; }
body{
  overflow-x:hidden;
  overflow-y:auto;
  padding:18px;
  background:transparent;
}
/* Make buttons match site UI inside player iframe */
.player button{
  cursor:pointer;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.03);
  color:rgba(255,255,255,.92);
  border-radius:12px;
  padding:10px 12px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:12px;
  transition: transform .08s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease, filter .15s ease;
  user-select:none;
}
.player button:hover{
  background:rgba(255,255,255,.06);
  border-color:rgba(164,139,255,.38);
  box-shadow: 0 0 0 3px rgba(164,139,255,.09);
  filter: contrast(1.06);
}
.player button:active{ transform:translateY(1px); }

.player .pill{ border-radius:999px; padding:9px 12px; }

.player .primary{
  background: linear-gradient(180deg, rgba(164,139,255,.52), rgba(164,139,255,.10));
  border-color:rgba(164,139,255,.70);
  box-shadow: 0 0 34px rgba(164,139,255,.16);
}
.player .primary:hover{ border-color:rgba(164,139,255,.95); }

.player .toggled{
  border-color: rgba(53,242,194,.60);
  background: rgba(53,242,194,.10);
  box-shadow: 0 0 30px rgba(53,242,194,.14);
}