:root{
  --note-ink:#4a3626;
  --note-ink-light:#8a7358;
  --note-accent:#b6572f;
}

.note-wrap{
  position:fixed;
  left:0;
  right:0;
  z-index:15;
  display:flex;
  justify-content:center;
  opacity:0;
  pointer-events:none;
  transition:opacity 1s ease 0.3s;
}
.note-wrap.visible{
  opacity:1;
  pointer-events:auto;
}
@media (max-width:640px){
  .note-wrap{ justify-content:flex-end; padding-right:14px; bottom:18px; }
}
@media (min-width:641px){
  .note-wrap{ bottom:clamp(26px, 6vh, 58px); }
}

.note-wind{
  animation:note-wind 9s ease-in-out infinite alternate;
}

.note{
  position:relative;
  width:clamp(158px, 19vw, 202px);
  padding:13px 16px 11px;
  background:radial-gradient(130% 130% at 28% 16%, #faf1da 0%, #ecdcb8 68%, #e2cea2 100%);
  border-radius:3px 12px 5px 13px / 9px 4px 12px 5px;
  box-shadow:1px 3px 9px rgba(40,22,10,0.20), 0 1px 0 rgba(255,255,255,0.25) inset;
  transform:rotate(-1.6deg);
  transition:transform 0.6s cubic-bezier(.33,.1,.2,1), box-shadow 0.6s ease;
  cursor:pointer;
}
.note::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:140px 140px;
  opacity:0.05;
  mix-blend-mode:multiply;
  pointer-events:none;
}
.note[data-expanded="true"]{
  transform:rotate(-0.4deg) translateY(-2px);
  box-shadow:2px 7px 16px rgba(40,22,10,0.28), 0 1px 0 rgba(255,255,255,0.3) inset;
}
@media (hover: hover) and (pointer: fine){
  .note-wrap:hover .note{
    transform:rotate(-0.4deg) translateY(-2px);
    box-shadow:2px 7px 16px rgba(40,22,10,0.28), 0 1px 0 rgba(255,255,255,0.3) inset;
  }
}

.note-toggle{
  all:unset;
  display:block;
  width:100%;
  cursor:pointer;
}
.note-eyebrow{
  display:block;
  font-family:'Poppins', sans-serif;
  font-size:9.5px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--note-ink-light);
  opacity:0.6;
  margin-bottom:3px;
}
.note-title-wrap, .note-artist-wrap{ display:block; position:relative; }
.note-title{
  display:block;
  font-family:'Kalam', cursive;
  font-size:21px;
  font-weight:700;
  line-height:1.15;
  color:var(--note-ink);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.note-artist{
  display:block;
  font-family:'Poppins', sans-serif;
  font-size:11px;
  color:var(--note-ink-light);
  opacity:0.75;
  margin-top:2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* full title/artist popover for whichever ones get truncated */
.note-title-wrap.is-truncated::after,
.note-artist-wrap.is-truncated::after{
  content:attr(data-full);
  position:absolute;
  left:50%;
  bottom:calc(100% + 9px);
  transform:translate(-50%, 4px) scale(0.96);
  background:radial-gradient(130% 130% at 30% 20%, #faf1da 0%, #ecdcb8 70%, #e2cea2 100%);
  color:var(--note-ink);
  font-family:'Poppins', sans-serif;
  font-size:11.5px;
  font-weight:500;
  line-height:1.35;
  white-space:normal;
  width:max-content;
  max-width:220px;
  padding:7px 11px;
  border-radius:8px;
  box-shadow:0 6px 16px rgba(40,22,10,0.28), 0 1px 0 rgba(255,255,255,0.3) inset;
  opacity:0;
  pointer-events:none;
  transition:opacity 0.25s ease, transform 0.25s ease;
  z-index:30;
  text-align:center;
}
.note-title-wrap.is-truncated::before,
.note-artist-wrap.is-truncated::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:calc(100% + 4px);
  transform:translateX(-50%);
  border:5px solid transparent;
  border-top-color:#e2cea2;
  opacity:0;
  transition:opacity 0.25s ease;
  pointer-events:none;
  z-index:30;
}
@media (hover: hover) and (pointer: fine){
  .note-title-wrap.is-truncated:hover::after,
  .note-artist-wrap.is-truncated:hover::after{
    opacity:1;
    transform:translate(-50%, 0) scale(1);
  }
  .note-title-wrap.is-truncated:hover::before,
  .note-artist-wrap.is-truncated:hover::before{
    opacity:1;
  }
}
@media (prefers-reduced-motion: reduce){
  .note-title-wrap.is-truncated::after,
  .note-artist-wrap.is-truncated::after{
    transition:opacity 0.15s ease;
    transform:translate(-50%, 0) scale(1);
  }
}

.note-details{
  display:grid;
  grid-template-rows:0fr;
  opacity:0;
  transition:grid-template-rows 0.55s cubic-bezier(.33,.1,.2,1), opacity 0.4s ease;
}
.note[data-expanded="true"] .note-details{
  grid-template-rows:1fr;
  opacity:1;
}
@media (hover: hover) and (pointer: fine){
  .note-wrap:hover .note-details{
    grid-template-rows:1fr;
    opacity:1;
  }
}
.note-details-inner{ overflow:hidden; min-height:0; }

.note-progress{ margin-top:11px; }
.note-progress svg{ display:block; width:100%; height:14px; overflow:visible; cursor:pointer; touch-action:none; outline:none; }
.note-progress path{ stroke:var(--note-ink-light); stroke-width:1.3; opacity:0.5; fill:none; pointer-events:none; }
.note-progress circle{ fill:var(--note-accent); pointer-events:none; transition:r 0.15s ease; }
.note-progress:hover circle,
.note-progress-hit:active ~ circle{ r:4; }
.note-progress svg:focus-visible{ outline:2px solid var(--note-accent); outline-offset:3px; border-radius:4px; }

.note-time{
  font-family:'IBM Plex Mono', monospace;
  font-size:10px;
  letter-spacing:0.02em;
  font-variant-numeric:tabular-nums;
  color:var(--note-ink-light);
  opacity:0.65;
  margin-top:5px;
}

.note-controls{
  display:flex;
  align-items:center;
  gap:16px;
  margin-top:9px;
}
.note-btn{
  all:unset;
  cursor:pointer;
  font-family:'Kalam', cursive;
  color:var(--note-ink);
  opacity:0.55;
  line-height:1;
  transition:opacity 0.25s ease;
}
.note-btn:hover{ opacity:1; }
.note-btn:focus-visible{ outline:2px solid var(--note-accent); outline-offset:3px; border-radius:3px; opacity:1; }
.note-prev, .note-next{ font-size:19px; }
.note-play{ font-size:13px; letter-spacing:1px; }

.note-stamp{
  display:block;
  font-family:'Poppins', sans-serif;
  font-style:italic;
  font-size:10px;
  color:var(--note-ink-light);
  opacity:0.45;
  margin-top:8px;
}

@keyframes note-wind{
  0%{ transform:translate(0,0); }
  25%{ transform:translate(1px,-1px); }
  50%{ transform:translate(-1px,0); }
  75%{ transform:translate(0.5px,-1.5px); }
  100%{ transform:translate(0,0); }
}

@media (prefers-reduced-motion: reduce){
  .note-wind{ animation:none; }
  .note{ transition:box-shadow 0.3s ease; }
  .note-wrap:hover .note,
  .note[data-expanded="true"]{ transform:rotate(-1.6deg); }
}