.harlemMiniVinyl__sc{position:absolute;right:0;bottom:0;width:320px;height:166px;border:0;opacity:0;overflow:hidden;pointer-events:none}
.harlemMiniVinyl{
  position:fixed;left:auto;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));z-index:12050;width:148px;
  display:flex;flex-direction:column;align-items:center;gap:.4rem;
  pointer-events:auto;font-family:"YNG Harlem World",sans-serif;color:#f4f7fb;
  opacity:1;transition:opacity 300ms ease;
}
.harlemMiniVinyl[hidden],.harlemWorld[hidden] .harlemMiniVinyl{display:none!important}
.harlemMiniVinyl.is-idle{opacity:0;pointer-events:none}
.harlemMiniVinyl__disc{
  --mini-color:#d8c9b2;--spin:0deg;
  width:128px;height:128px;border-radius:50%;position:relative;
  background:
    radial-gradient(circle at 50% 50%, #1a120c 0 14%, transparent 15%),
    repeating-radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--mini-color) 80%, #000) 0 2px, color-mix(in srgb, var(--mini-color) 55%, #111) 3px 5px);
  box-shadow:0 10px 28px rgba(0,0,0,.45), inset 0 0 0 3px color-mix(in srgb, var(--mini-color) 70%, #000);
  touch-action:none;cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
}
.harlemMiniVinyl__disc *{pointer-events:none}
.harlemMiniVinyl__disc.is-playing .harlemMiniVinyl__grooves{
  animation:harlemMiniSpin 3.6s linear infinite;
}
.harlemMiniVinyl__grooves{
  position:absolute;inset:0;border-radius:50%;
  transform:rotate(var(--spin));
  background:repeating-radial-gradient(circle at 50% 50%, transparent 0 3px, rgba(0,0,0,.18) 3px 4px);
}
.harlemMiniVinyl__label{
  position:absolute;inset:34%;border-radius:50%;overflow:hidden;
  background:#111;display:grid;place-items:center;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--mini-color) 85%, #fff);
}
.harlemMiniVinyl__label img{width:72%;height:72%;object-fit:contain}
.harlemMiniVinyl__direction{position:absolute;top:50%;transform:translateY(-50%);font:12px/1 sans-serif;color:#eee;pointer-events:none;text-shadow:0 1px 3px #000}
.harlemMiniVinyl__direction--left{left:10%}
.harlemMiniVinyl__direction--right{right:10%}
.harlemMiniVinyl__volume{position:absolute;left:50%;top:17%;transform:translateX(-50%);font:10px/1 sans-serif;color:#fff;pointer-events:none;text-shadow:0 1px 3px #000}
.harlemMiniVinyl__disc:focus-visible{outline:2px solid #bdeaff;outline-offset:5px}
.harlemMiniVinyl__meta{order:-2;text-align:center;max-width:148px}
.harlemMiniVinyl__brand{display:block;letter-spacing:.28em;font-size:.58rem;color:#f0d7a4}
.harlemMiniVinyl__meta strong{display:block;font-size:.72rem;line-height:1.2;margin:.15rem 0}
.harlemMiniVinyl__meta small{display:block;font:11px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:0}
.harlemMiniVinyl__loop{display:block;font-style:normal;font-size:.58rem;letter-spacing:.08em;color:#c9d6e8;text-transform:uppercase}
.harlemMiniVinyl__color{order:-1;display:flex;gap:.35rem;align-items:center;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:#c9d6e8}
.harlemMiniVinyl__color input{width:28px;height:22px;border:0;background:none;padding:0}
.harlemMiniVinyl__prompt{
  position:absolute;left:50%;bottom:108%;transform:translateX(-50%);
  width:180px;padding:.7rem;border-radius:.5rem;background:#101821;border:1px solid rgba(240,215,164,.35);
  text-align:center;font-size:.78rem;
}
.harlemMiniVinyl__promptActions{display:flex;gap:.35rem;justify-content:center;margin-top:.45rem}
.harlemMiniVinyl__promptActions button{background:#1b2836;color:#f4f7fb;border:1px solid rgba(255,255,255,.15);border-radius:.3rem;padding:.3rem .45rem}
.harlemMiniVinyl.is-launching{animation:harlemMiniLaunch .7s ease-in forwards}
@keyframes harlemMiniSpin{to{transform:rotate(360deg)}}
@keyframes harlemMiniLaunch{
  to{transform:translateY(-70vh) scale(.2);opacity:0}
}
@media (max-width:760px){
  .harlemMiniVinyl{left:auto;right:max(10px,env(safe-area-inset-right));bottom:calc(96px + env(safe-area-inset-bottom));width:120px}
  .harlemMiniVinyl__disc{width:104px;height:104px}
}
@media (prefers-reduced-motion:reduce){
  .harlemMiniVinyl{transition:none}
  .harlemMiniVinyl__disc.is-playing .harlemMiniVinyl__grooves{animation:none}
}
