/* "Remix this site" switcher, shared by all five looks */

/* switching looks spills the new page out of the corner button */
@view-transition{navigation:auto}
::view-transition-old(root){animation:none}
::view-transition-new(root){animation:rmx-spill .75s cubic-bezier(.65,0,.25,1) both}
@keyframes rmx-spill{
  from{clip-path:circle(0 at 90px calc(100% - 44px))}
  to{clip-path:circle(160vmax at 90px calc(100% - 44px))}
}

.rmx{position:fixed;left:20px;bottom:20px;z-index:2147483000;font:600 15px/1.35 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:#16161d;text-align:left;text-transform:none;letter-spacing:0}
.rmx *{box-sizing:border-box}

.rmx-btn{display:flex;align-items:center;gap:10px;margin-right:auto;padding:12px 20px 12px 14px;border:0;border-radius:999px;background:#16161d;color:#fff;font:800 15px/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;cursor:pointer;box-shadow:0 0 0 3px #fff,0 12px 26px -8px rgba(0,0,0,.5);transition:transform .2s cubic-bezier(.3,1.6,.5,1)}
.rmx-btn:hover{transform:translateY(-3px) rotate(-2deg)}
.rmx-dots{display:flex}
.rmx-dots i{display:block;width:14px;height:14px;border-radius:50%;margin-left:-4px;box-shadow:0 0 0 2px #16161d;transition:transform .3s cubic-bezier(.3,1.8,.5,1)}
.rmx-dots i:first-child{margin-left:0}
.rmx-btn:hover .rmx-dots i,.rmx.is-open .rmx-dots i{transform:translateY(-5px)}
.rmx-dots i:nth-child(2){transition-delay:.04s}.rmx-dots i:nth-child(3){transition-delay:.08s}.rmx-dots i:nth-child(4){transition-delay:.12s}.rmx-dots i:nth-child(5){transition-delay:.16s}

.rmx-btn:focus-visible,.rmx-opt:focus-visible,.rmx-panel button:focus-visible,.rmx-bubble:focus-visible{outline:3px solid #2747ff;outline-offset:3px}

.rmx-panel{position:absolute;left:0;bottom:calc(100% + 14px);width:min(440px,calc(100vw - 24px));max-height:calc(100vh - 110px);overflow:auto;background:#fff;border-radius:22px;padding:20px;box-shadow:0 0 0 1px rgba(0,0,0,.06),0 30px 60px -20px rgba(0,0,0,.55);transform-origin:0 100%;animation:rmx-pop .3s cubic-bezier(.3,1.4,.5,1)}
.rmx-panel[hidden],.rmx-bubble[hidden]{display:none}
@keyframes rmx-pop{from{transform:scale(.7);opacity:0}}
.rmx-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.rmx .rmx-head h2{margin:0;font:800 22px/1.1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;letter-spacing:-.01em;text-transform:none;color:#16161d;text-shadow:none;-webkit-text-stroke:0}
.rmx-x{width:36px;height:36px;flex:none;border-radius:50%;border:0;background:#f0f0f4;color:#16161d;font:400 22px/1 system-ui,sans-serif;cursor:pointer}
.rmx-sub{margin:6px 0 14px;font-size:14px;font-weight:500;color:#44445a}
.rmx-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.rmx-opt{display:grid;grid-template-columns:112px 1fr;gap:14px;align-items:center;padding:8px;border-radius:14px;text-decoration:none;color:#16161d;transition:background .15s}
.rmx-opt:hover{background:#f2f2f7}
.rmx-opt img{display:block;width:112px;height:70px;object-fit:cover;object-position:top;border-radius:10px;box-shadow:0 0 0 1px rgba(0,0,0,.1);transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.rmx-opt:hover img{transform:rotate(-3deg) scale(1.05)}
.rmx-opt.is-here{box-shadow:inset 0 0 0 2px #16161d}
.rmx-txt b{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:16px;font-weight:800}
.rmx-txt i{font-style:normal;font-size:11px;font-weight:800;padding:2px 8px;border-radius:999px;background:#ffe14a;color:#16161d}
.rmx-txt i.here{background:#16161d;color:#fff}
.rmx-txt>span{display:block;margin-top:2px;font-size:13.5px;font-weight:500;color:#44445a}
.rmx-foot{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.rmx-foot button{padding:10px 16px;border-radius:999px;border:2px solid #16161d;background:#fff;color:#16161d;font:800 14px/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;cursor:pointer}
.rmx .rmx-sur{background:#16161d;color:#fff}

.rmx-bubble{position:absolute;left:0;bottom:calc(100% + 12px);width:max-content;max-width:250px;padding:10px 14px;border:0;border-radius:16px 16px 16px 4px;background:#ffe14a;color:#16161d;font:700 14px/1.3 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;text-align:left;cursor:pointer;box-shadow:0 12px 24px -10px rgba(0,0,0,.45);transform-origin:0 100%;animation:rmx-pop .3s cubic-bezier(.3,1.4,.5,1),rmx-wiggle 1s ease-in-out .4s 2}
@keyframes rmx-wiggle{25%{transform:rotate(-3deg)}75%{transform:rotate(3deg)}}

@media (max-width:560px){
  .rmx{left:12px;bottom:12px}
  .rmx-btn{padding:11px 16px 11px 12px;font-size:14px}
  .rmx-panel{position:fixed;left:8px;right:8px;bottom:70px;width:auto;padding:16px}
  .rmx-opt{grid-template-columns:88px 1fr;gap:12px}
  .rmx-opt img{width:88px;height:56px}
}
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
  .rmx *{animation:none!important;transition:none!important}
}

/* "recently pinned": every cover on the home shelf is a link to buy or listen (filled in by build.py) */
.pinbuy{position:relative;display:block;text-decoration:none;color:inherit}
.pinbuy .pb{position:absolute;left:50%;bottom:12px;translate:-50% 0;z-index:3;white-space:nowrap;padding:7px 12px;border-radius:999px;background:#16161d;color:#fff;font:800 12.5px/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;box-shadow:0 0 0 2px #fff;opacity:0;transition:opacity .15s,translate .15s;pointer-events:none}
.pinbuy:hover .pb,.pinbuy:focus-visible .pb{opacity:1;translate:-50% -4px}
@media (hover:none){.pinbuy .pb{opacity:1}}