/* A small paper sleeve for the song we keep with us. */
.music-bounds{position:fixed;inset:calc(14px + env(safe-area-inset-top,0px)) calc(24px + env(safe-area-inset-right,0px)) calc(30px + env(safe-area-inset-bottom,0px)) calc(24px + env(safe-area-inset-left,0px));visibility:hidden;pointer-events:none}
.music-player{position:fixed;left:0;top:0;z-index:84;width:72px;height:86px;opacity:0;visibility:hidden;transition:opacity .45s;user-select:none;-webkit-user-select:none}
body.revealed .music-player{opacity:1;visibility:visible}
body.locked .music-player,body.photo-viewing .music-player{opacity:0;visibility:hidden;pointer-events:none}
.music-button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:100%;height:100%;background:var(--print);border:1px solid var(--paper-edge);border-radius:3px;box-shadow:var(--shadow-print);transform:rotate(-4deg);touch-action:none;cursor:grab;transition:box-shadow .25s,background .25s}
.music-button::before{content:"";position:absolute;top:-6px;left:18px;width:35px;height:13px;background:color-mix(in oklab,var(--lamp) 65%,transparent);border:1px solid rgba(130,96,56,.1);transform:rotate(7deg);pointer-events:none}
.music-button:hover,.music-button:focus-visible{box-shadow:0 12px 30px -10px rgba(62,38,22,.4)}
.music-player.dragging .music-button{cursor:grabbing;box-shadow:0 16px 35px -10px rgba(62,38,22,.4)}
.music-disc{position:relative;display:grid;place-items:center;width:46px;height:46px;flex:none;border-radius:50%;background:repeating-radial-gradient(circle at center,#49362c 0 1px,#2b211c 1px 3px);box-shadow:inset 0 0 0 1px rgba(246,221,191,.2),0 2px 5px rgba(53,30,17,.2)}
.music-disc::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 15deg,transparent 15%,rgba(255,230,195,.23) 23%,transparent 31%,transparent 65%,rgba(255,230,195,.18) 73%,transparent 81%);animation:music-turn 16s linear infinite;animation-play-state:paused}
.music-player.playing .music-disc::before{animation-play-state:running}
.music-disc::after{content:"";position:absolute;inset:14px;border-radius:50%;background:var(--rose);border:1px solid rgba(255,240,217,.4)}
.music-control{position:relative;z-index:1;width:14px;height:14px;color:var(--print)}
.music-control svg{width:100%;height:100%;display:block;fill:currentColor}
.music-pause{display:none!important}
.music-player.playing .music-play{display:none}
.music-player.playing .music-pause{display:block!important}
.music-caption{font-family:var(--hand);font-size:12px;line-height:1.2;color:var(--ink-soft)}
.music-note{position:absolute;right:calc(100% + 14px);bottom:0;width:238px;max-width:calc(100vw - 108px);padding:14px 17px;background:var(--paper);border:1px solid var(--paper-edge);border-radius:3px;box-shadow:var(--shadow-print);color:var(--ink-soft);pointer-events:none;opacity:0;transform:translateX(5px);transition:opacity .2s,transform .2s;text-align:left}
.music-note-right .music-note{right:auto;left:calc(100% + 14px)}
.music-note-below .music-note{bottom:auto;top:0}
.music-note>p:first-child{font-family:var(--hand);font-size:1.08rem;color:var(--rose);margin-bottom:6px}
.music-title{font-family:var(--latin);font-size:1rem;line-height:1.3}
.music-artist{font-family:var(--sans);font-size:.63rem;color:var(--ink-faint);margin:4px 0 9px}
.music-state{display:block;font-family:var(--sans);font-size:.68rem;line-height:1.6;color:var(--ink-faint)}
.music-player:focus-within .music-note,.music-player.hint-on .music-note{opacity:1;transform:translateX(0)}
.music-player.dragging .music-note{opacity:0}
.music-player[data-busy] .music-disc{opacity:.65}
.music-player[data-error] .music-caption{color:var(--rose)}
@media(hover:hover){.music-player:hover .music-note{opacity:1;transform:translateX(0)}}
@keyframes music-turn{to{transform:rotate(360deg)}}
.motion-off .music-disc::before{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.music-disc::before{animation:none}}
@media(max-width:768px){
  .music-bounds{inset:calc(12px + env(safe-area-inset-top,0px)) calc(14px + env(safe-area-inset-right,0px)) calc(22px + env(safe-area-inset-bottom,0px)) calc(14px + env(safe-area-inset-left,0px))}
  .music-player{width:58px;height:72px}
  .music-button{gap:4px}
  .music-button::before{left:13px;width:30px;height:12px}
  .music-disc{width:39px;height:39px}
  .music-disc::after{inset:11px}
  .music-caption{font-size:11px}
  .music-note{padding:12px 14px;width:220px;max-width:calc(100vw - 98px)}
  .music-player:focus-within:not(.hint-on) .music-note{opacity:0}
}