/* Original Joyful Songs. Reproduced from the approved design, design-homepage-v18. */
/* Self hosted fonts, SIL Open Font License 1.1, license files beside the font files. */
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:200 900;font-display:swap;src:url(/assets/fonts/sourceserif4-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Source Serif 4";font-style:italic;font-weight:400;font-display:swap;src:url(/assets/fonts/sourceserif4-italic-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/inter-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  --night:#0f1730;
  --night-deep:#0a1024;
  --surface:#182242;
  --surface-2:#1f2b52;
  --ink:#f2f0ea;
  --ink-soft:#a8b0c8;
  /* Light enough for 4.5 to 1 on a panel in any song's colour, so the quiet figures stay readable everywhere */
  --ink-faint:#9aa2bd;
  --dawn:#e6b86a;
  --line:rgba(242,240,234,0.09);
  /* The hairline on every control disc, the same on every surface whatever the song's colour */
  --disc-line:rgba(242,240,234,.16);
  --serif:"Source Serif 4", Georgia, serif;
  --sans:"Inter", system-ui, sans-serif;
  --pad:clamp(16px, 5vw, 22px);
  /* Ambient colour: the site's blue until a song's artwork colour takes over, as r g b */
  --tint:34 52 102;
  --tint-page:34 52 102;
  --tint-now:34 52 102;
  --tint-bar:34 52 102;
  /* The height of the player dock. The script writes the measured height here whenever the dock opens or the window
     changes size; this value is the fallback. The page reserve, the copied link message and the open view read it. */
  --dock:calc(73px + env(safe-area-inset-bottom));
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--night-deep);-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);color:var(--ink);
  background:radial-gradient(120% 60% at 50% -10%, rgb(var(--tint-page)) 0%, transparent 60%),var(--night);
  min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
.frame{width:100%;max-width:480px;margin:0 auto;padding:0 0 calc(var(--dock) + 32px);min-height:100vh}
/* Keyboard users can jump past the header; the link shows only while focused */
.skip{position:absolute;left:16px;top:-80px;z-index:20;background:var(--dawn);color:#1a1405;padding:10px 14px;border-radius:10px;font-weight:600;font-size:14px;text-decoration:none;transition:top .15s}
.skip:focus{top:calc(12px + env(safe-area-inset-top));outline:none}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button:focus-visible,a:focus-visible{outline:2px solid var(--dawn);outline-offset:3px;border-radius:6px}
/* After a page arrives through the shell, focus moves to the content; the move itself draws no ring */
main:focus,main h1:focus{outline:none}
html.is-turning{cursor:progress}

/* The header is a bar at every width, the twin of the dock: one row in the song's colour with a hairline under it,
   painted across the whole window while its contents stay on the page column. It scrolls with the page. Phones get
   60px plus the safe area above; large screens 64px. */
html{scroll-padding-top:calc(60px + env(safe-area-inset-top))}
.site-header{
  position:sticky;top:0;z-index:2;isolation:isolate;min-height:calc(60px + env(safe-area-inset-top));
  padding:calc(8px + env(safe-area-inset-top)) var(--pad) 8px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.site-header::before{content:"";position:absolute;top:0;bottom:0;left:calc(50% - 50vw);right:calc(50% - 50vw);z-index:-1;background:linear-gradient(180deg,rgb(var(--tint-page) / .55),rgb(var(--tint-page) / .3)),var(--night-deep);border-bottom:1px solid rgba(242,240,234,.1)}
.wordmark{display:inline-flex;align-items:center;gap:10px;font-family:var(--serif);font-weight:500;font-size:clamp(18px,5vw,20px);letter-spacing:-0.01em;white-space:nowrap;text-decoration:none}
/* The mark is the site icon drawn as a vector, so it stays crisp beside the wordmark at any size */
.wordmark-mark{width:26px;height:26px;flex:none;border-radius:6px;box-shadow:0 4px 12px -4px rgba(0,0,0,.6)}
.wordmark-name span{color:var(--dawn)}
/* While the drawer is open it carries the brand, so the page's own wordmarks fade out and stay out of reach */
.wordmark{transition:opacity .3s,visibility 0s}
.menu-open .wordmark{opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s}
/* The site's links sit in the header on large screens, where a hidden menu would only cost people the links */
.site-nav{display:none}
/* Header items read as navigation: text with a small mark, no pill, so only the things that act wear the glass */
.nav-send{display:inline-flex;align-items:center;gap:8px;height:40px;font:inherit;font-size:14px;font-weight:500;color:var(--ink-soft);background:none;border:0;border-radius:999px;padding:0 14px;cursor:pointer}
@media (hover:hover){.nav-send:hover{color:var(--ink)}}

/* Menu: the button turns from three lines into a cross, the drawer slides in from the right */
.menu-toggle{position:relative;width:44px;height:44px;margin-right:-10px;border-radius:12px;display:grid;place-items:center}
.menu-bars{position:relative;display:block;width:22px;height:16px}
.menu-bars i{position:absolute;left:0;width:22px;height:2px;border-radius:2px;background:var(--ink);transition:transform .25s cubic-bezier(.2,.8,.2,1),opacity .2s,top .25s cubic-bezier(.2,.8,.2,1)}
.menu-bars i:nth-child(1){top:0}
.menu-bars i:nth-child(2){top:7px}
.menu-bars i:nth-child(3){top:14px}
.menu-toggle[aria-expanded="true"] .menu-bars i:nth-child(1){top:7px;transform:rotate(45deg)}
.menu-toggle[aria-expanded="true"] .menu-bars i:nth-child(2){opacity:0;transform:scaleX(0)}
.menu-toggle[aria-expanded="true"] .menu-bars i:nth-child(3){top:7px;transform:rotate(-45deg)}
.menu-scrim{z-index:10}
.menu{
  position:fixed;top:0;right:0;bottom:0;z-index:11;width:min(320px,86%);overflow:auto;overscroll-behavior:contain;
  background:linear-gradient(180deg,rgb(var(--tint-page) / .5),transparent 62%),var(--surface);border-left:1px solid rgba(242,240,234,.12);
  padding:0 12px 0;display:flex;flex-direction:column;
  transform:translateX(100%);visibility:hidden;transition:transform .3s cubic-bezier(.2,.8,.2,1),visibility 0s .3s;
}
.menu.is-open{transform:none;visibility:visible;transition-delay:0s}
.menu:focus{outline:none}
/* The drawer reads as head, groups and foot: the brand row is set off by a hairline, the groups by hairlines between them,
   the legal links sit smaller and softer, and the foot carries the site's wave, still, in the song's colour */
/* The drawer's head is the same bar as the page header: the same height, surface and hairline, with the mark,
   the name and the close control centred on one line */
.menu-brand{position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:10px;flex:none;min-height:calc(60px + env(safe-area-inset-top));margin:0 -12px 12px;padding:calc(8px + env(safe-area-inset-top)) 10px 8px var(--pad);background:linear-gradient(180deg,rgb(var(--tint-page) / .55),rgb(var(--tint-page) / .3)),var(--night-deep);box-shadow:inset 0 -1px 0 rgba(242,240,234,.1);font-family:var(--serif);font-weight:500;font-size:clamp(18px,5vw,20px);letter-spacing:-0.01em;color:var(--ink)}
.menu nav{flex:0 0 auto}
.menu-list + .menu-list{margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
.menu-legal .menu-item{min-height:44px;padding:10px 14px;font-size:14px;color:var(--ink-soft)}
.menu-legal .menu-item svg{width:18px;height:18px}
.menu-waves{flex:0 1 clamp(240px,44vh,380px);min-height:120px;width:100%;margin:auto 0 env(safe-area-inset-bottom);display:block;fill:none;stroke:rgb(var(--tint) / .5);stroke-width:1.1;stroke-linecap:round;-webkit-mask-image:linear-gradient(180deg,transparent,#000 55%),linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(180deg,transparent,#000 55%),linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);mask-composite:intersect}
.menu-waves path:nth-child(1){opacity:.3}
.menu-waves path:nth-child(2){opacity:.38}
.menu-waves path:nth-child(3){opacity:.46}
.menu-waves path:nth-child(4){opacity:.54}
.menu-waves path:nth-child(5){opacity:.62}
.menu-waves path:nth-child(6){opacity:.7}
.menu-waves path:nth-child(7){opacity:.78}
.menu-waves path:nth-child(8){opacity:.86}
.menu-brand-name{flex:1;min-width:0;white-space:nowrap}
/* The serif's visible letters sit a little high in their line box; a one pixel nudge centres them on the mark */
.wordmark-name,.menu-brand-name{position:relative;top:1px}
.menu-brand-name span{color:var(--dawn)}
.menu-close{position:relative;flex:none;width:36px;height:36px;margin:4px 4px 4px 0;border-radius:50%;display:grid;place-items:center;color:var(--ink);background:rgba(255,255,255,.08);border:1px solid rgba(242,240,234,.14)}
.menu-close::before{content:"";position:absolute;inset:-5px}
.menu-close svg{width:16px;height:16px;fill:currentColor}
@media (hover:hover){.menu-close:hover{background:rgba(255,255,255,.14)}}
.menu-list{list-style:none}
.menu-item{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:12px 14px;border-radius:12px;font-size:16px;font-weight:500;text-decoration:none;text-align:left;color:var(--ink)}
.menu-item svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;color:var(--ink-soft)}
.menu-item[aria-current="page"] svg{color:var(--dawn)}
.menu-item[aria-current="page"]{color:var(--dawn);background:rgba(230,184,106,.1)}
@media (hover:hover){.menu-item:hover{background:rgba(255,255,255,.05)}}
.menu-heading{font-size:12px;color:var(--ink-faint);font-weight:500;text-transform:uppercase;letter-spacing:.06em;margin:18px 14px 6px}
.menu-note{font-size:13px;color:var(--ink-soft);line-height:1.5;padding:0 14px 10px 46px}

/* Admin preview of an unpublished song */
.preview-bar{background:var(--dawn);color:#1a1405;font-size:13px;font-weight:600;padding:calc(10px + env(safe-area-inset-top)) var(--pad) 10px;text-align:center;line-height:1.5}
.preview-bar a{color:inherit}

/* Featured release */
/* The featured song is one card; the catalog controls sit on the catalog heading below it */
.hero{position:relative;isolation:isolate;overflow:hidden;margin:14px var(--pad) 0;padding:14px 14px 20px;background:radial-gradient(90% 70% at 25% 0%, rgb(var(--tint) / .34), transparent 62%),var(--surface);border:1px solid rgba(242,240,234,.08);border-radius:24px;box-shadow:0 24px 60px -36px rgba(0,0,0,.8)}
/* The shown song's artwork, blurred and darkened, fills the card behind everything, as it does in the open view */
.hero-backdrop{position:absolute;inset:0;z-index:-1;overflow:hidden;border-radius:inherit}
.hero-backdrop img{width:100%;height:100%;display:block;object-fit:cover;transform:scale(1.25);filter:blur(42px) saturate(1.25) brightness(.62);opacity:.85;transition:opacity .4s ease}
.hero.is-swapping .hero-backdrop img{opacity:0}
.hero-backdrop::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,16,36,.28) 0%,rgba(10,16,36,.62) 45%,rgba(10,16,36,.9) 100%)}
.hero-art-box{position:relative}
.hero-art{width:100%;aspect-ratio:1/1;border-radius:18px;overflow:hidden;position:relative;box-shadow:0 30px 60px -18px rgb(var(--tint) / .6),0 12px 30px -12px rgba(0,0,0,.7);background:#0b1226}
.hero-art > img{width:100%;height:100%;display:block;object-fit:cover;transition:opacity .3s ease}
.hero.is-swapping .hero-art > img{opacity:0}
.hero-play{
  position:absolute;left:16px;bottom:16px;
  width:68px;height:68px;border-radius:50%;
  background:rgb(var(--tint) / .18);border:1px solid var(--disc-line);color:var(--ink);display:grid;place-items:center;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:0 12px 30px -6px rgba(0,0,0,.6);transition:transform .12s ease;
}
.hero-play:active{transform:scale(.95)}
.hero-play svg{width:30px;height:30px;fill:currentColor;margin-left:3px}
.hero-play.is-playing svg{margin-left:0}
.hero-title{font-family:var(--serif);font-weight:400;font-size:clamp(22px, 6.5vw, 28px);line-height:1.1;letter-spacing:-0.01em;margin:20px 0 8px;overflow-wrap:anywhere}
.hero-note{font-family:var(--serif);font-style:italic;font-weight:400;font-size:16px;line-height:1.5;color:var(--ink-soft);margin-top:12px;max-width:34em}
/* Labels on artwork: Featured while a song leads the homepage, New for its first days after release.
   Frosted glass chips that sit on the image: a blurred dark base where the browser can blur, a darker solid base otherwise */
.marks{position:absolute;top:5px;left:5px;z-index:1;display:flex;gap:4px}
.marks[hidden]{display:none}
.mark{background:rgba(10,16,36,.72);color:var(--ink);font-size:10px;font-weight:300;line-height:1;padding:2px 6px;border-radius:6px;border:1px solid rgba(242,240,234,.16);box-shadow:0 2px 8px rgba(0,0,0,.25)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .mark{background:rgba(10,16,36,.42);-webkit-backdrop-filter:blur(12px) saturate(1.3);backdrop-filter:blur(12px) saturate(1.3)}
}
.marks-large{top:14px;left:14px;gap:8px}
.marks-large .mark{padding:3px 8px;border-radius:999px}
.plain-audio{display:block;width:100%;margin-top:16px}
.plain-note{margin-top:16px;font-size:14px;color:var(--ink-soft)}
.hero-ref{font-size:15px;font-weight:400;color:var(--ink-soft)}
.hero-stats{display:flex;align-items:center;justify-content:space-between;margin-top:14px}
.stat{display:inline-flex;align-items:center;gap:5px;font-size:13px;color:var(--ink-soft)}
.stat svg{width:14px;height:14px;fill:currentColor}
.like{display:inline-flex;align-items:center;gap:6px;color:var(--ink-soft);border-radius:12px;font-size:13px;font-variant-numeric:tabular-nums;transition:color .15s}
.like svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1;stroke-linejoin:round;transition:transform .15s}
.like.is-liked{color:rgba(242,240,234,.72)}
.like.is-liked svg{fill:none;stroke:currentColor}
.like:active svg{transform:scale(1.2)}
/* The count sits on the heart's top right corner, half on the icon and half above it; zero shows nothing */
.like{position:relative}
.like svg{overflow:visible}
/* The number's centre sits just inside the heart's top right corner, so half of it lies on the icon */
.like-count{position:absolute;transform:translate(50%,-50%);color:rgba(242,240,234,.75);font-size:11px;font-weight:400;line-height:1;letter-spacing:0;text-shadow:0 0 3px var(--surface),0 0 2px var(--surface),0 1px 2px rgba(0,0,0,.7)}
/* The heart is a soft glass shape so the number has a surface to sit on; liked, it fills gold */
/* The heart is a quiet mark: a thin white outline, translucent, never filled. A like shows in the count beside it. */
.like svg{color:rgba(242,240,234,.72);fill:none;stroke-width:1}
.like.is-liked svg{color:rgba(242,240,234,.72);fill:none}
/* In the list only the current row's heart and count take the song's colour, the artwork colour lightened by the
   script towards the site's white; every other row keeps the quiet white above, so the colour belongs to the song
   that is loaded and to nothing else */
.row.is-current .like svg,.row.is-current .like.is-liked svg{color:var(--heart,rgba(242,240,234,.72))}
.row.is-current .like .like-count{color:var(--heart,rgba(242,240,234,.75))}
.like-count[hidden]{display:none}
/* The card's heart is the same round disc as the open view's heart, in the card's own light: the song's colour at low strength */
.like-inline{width:44px;height:44px;justify-content:center;background:rgb(var(--tint) / .18);border:1px solid var(--disc-line);border-radius:50%}
.like-inline .like-count{top:calc(50% - 10px + 1.5px);right:calc(50% - 10px + 1.5px)}
.like-inline.is-liked{background:rgb(var(--tint) / .18)}
.btn{
  flex:1;min-width:0;height:50px;border-radius:14px;font-weight:600;font-size:15px;
  display:flex;align-items:center;justify-content:center;gap:9px;
  transition:transform .12s ease,background .15s ease;
}
.btn:active{transform:scale(.98)}
.btn svg{flex:none}
.btn-primary{background:var(--dawn);color:#1a1405}
.btn-primary:hover{background:#efc57a}
.btn-ghost{background:var(--surface);color:var(--ink)}
.btn-ghost:hover{background:var(--surface-2)}
.btn-ghost[aria-pressed="true"]{background:var(--surface-2);box-shadow:inset 0 0 0 1.5px var(--dawn);color:var(--dawn)}
.empty{padding:40px var(--pad);text-align:center;color:var(--ink-soft);font-size:15px;line-height:1.6}

/* List */
/* The catalog is a panel like the featured card: a header row with the controls, then the rows */
/* The panels beside the card, the songs and a page's text, take the song's colour: a tenth of it over the whole surface,
   a glow near the card's strength across the head of the panel where only the heading and the pills sit, and a hairline
   in the colour, so the card and the panel read as one surface family */
.catalog,.page-panel{margin:22px var(--pad) 0;padding:8px;background:radial-gradient(90% 240px at 25% 0%, rgb(var(--tint) / .26), transparent 62%),linear-gradient(rgb(var(--tint) / .1),rgb(var(--tint) / .1)),var(--surface);border:1px solid rgb(var(--tint) / .3);border-radius:24px;box-shadow:0 24px 60px -36px rgba(0,0,0,.8)}
/* A page's text sits in the same panel as the songs, with room for reading rather than for tiles */
.page-panel{padding:24px 22px 28px}
/* Header and rows share one inset: 8px of panel padding plus 10px inside each */
.list-head{padding:10px 10px 43px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.list-title{min-width:0;font-family:var(--serif);font-weight:500;font-size:19px;line-height:1.15;white-space:nowrap}
.list-title .count{font-family:var(--sans);font-size:13px;font-weight:600;color:var(--ink-faint);margin-left:6px;vertical-align:middle}
.list-actions{display:flex;gap:6px;flex:none;margin-left:auto}
.list-actions .btn{flex:none;height:36px;padding:0 12px 0 10px;border-radius:999px;font-size:13px;gap:6px}
.list-actions .btn svg{width:14px;height:14px}
/* Play all wears the faint song coloured glass of the other controls; Shuffle is an outline only. Both are medium weight,
   and Shuffle pressed is a gold state, like the pressed Lyrics pill */
.list-actions .btn-primary,.list-actions .btn-ghost{background:none;border:1px solid var(--disc-line);color:var(--ink);font-weight:500}
.list-actions .btn-primary{background:rgb(var(--tint) / .06)}
.list-actions .btn-primary:hover,.list-actions .btn-ghost:hover{background:rgb(var(--tint) / .12)}
.list-actions .btn-ghost[aria-pressed="true"]{background:none;box-shadow:none;color:var(--dawn);border-color:rgba(230,184,106,.55)}
ol{list-style:none}
/* Each song is a tile; the playing one carries the gold wash across its whole width */
#list{display:flex;flex-direction:column;gap:6px}
.row{
  position:relative;isolation:isolate;display:flex;align-items:stretch;border-radius:16px;
  background:rgba(255,255,255,.035);border:1px solid rgba(242,240,234,.05);
  transition:background .15s ease,border-color .15s ease,transform .15s ease,box-shadow .15s ease;
}
@media (hover:hover){.row:hover{background:rgba(255,255,255,.06);transform:translateY(-1px);box-shadow:0 10px 24px -14px rgba(0,0,0,.7)}}
.row:active{background:rgba(255,255,255,.07)}
.row.is-current{background:rgba(230,184,106,.09);border-color:rgba(230,184,106,.22)}
.song{
  flex:1;min-width:0;display:grid;grid-template-columns:60px minmax(0,1fr);gap:14px;align-items:center;
  padding:9px 8px 9px 9px;border-radius:16px;text-align:left;text-decoration:none;
}
.row .like{flex:none;justify-content:center;width:46px;margin-right:2px;border-radius:14px}
.row .like svg{width:17px;height:17px}
.row .like-count{top:calc(50% - 8.5px + 1.5px);right:calc(50% - 8.5px + 1.5px)}
.song > *{min-width:0;display:block}
.song-art{position:relative;width:60px;height:60px;border-radius:12px;background:#0b1226;box-shadow:0 8px 16px -8px rgba(0,0,0,.7)}
/* The artwork keeps its own corners so the New chip can straddle the top edge */
.song-art img,.song-play,.song-state{border-radius:12px}
.song-art .marks{top:-8px;left:50%;transform:translateX(-50%);z-index:2}
/* A play glyph appears over the artwork on hover or press; the playing song shows its moving bars */
.song-play,.song-state{position:absolute;inset:0;display:grid;place-items:center;background:rgba(10,16,36,.45)}
.song-play{opacity:0;transition:opacity .15s ease}
.song-play svg{width:24px;height:24px;fill:#fff;margin-left:2px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}
@media (hover:hover){.song:hover .song-play{opacity:1}}
.song:active .song-play{opacity:1}
.song.is-current .song-play{display:none}
.song-state{display:none}
.song.is-current .song-state{display:grid}
.row.is-current .song-art{box-shadow:0 0 0 2px var(--dawn),0 8px 16px -8px rgba(0,0,0,.7)}
.song-state .eq{height:18px;margin:0;gap:3px}
.song-state .eq i{width:4px;border-radius:2px}
.song-art img{width:100%;height:100%;display:block;object-fit:cover}
.song-title{display:block;font-family:var(--serif);font-weight:500;font-size:16px;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.song.is-current .song-title{color:var(--dawn)}
.song-meta{display:block;font-size:13px;color:var(--ink-soft);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.song-stats{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--ink-faint);margin-top:4px;font-variant-numeric:tabular-nums;white-space:nowrap}
.song-stats svg{width:11px;height:11px;fill:currentColor}
.song-stats .dot{width:3px;height:3px;border-radius:50%;background:var(--ink-faint);margin:0 3px}
.song-dur{display:inline-flex;align-items:center}
.song.is-current .song-dur{color:var(--dawn)}

.toast{
  position:fixed;left:50%;bottom:calc(var(--dock) + 24px);transform:translate(-50%,8px);
  background:var(--ink);color:#1a1405;font-size:13px;font-weight:600;padding:10px 16px;border-radius:12px;
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:8;white-space:nowrap;max-width:90vw;overflow:hidden;text-overflow:ellipsis;
}
.toast.is-shown{opacity:1;transform:translate(-50%,0)}
.eq{display:inline-flex;gap:2px;align-items:flex-end;height:12px;margin-right:6px;vertical-align:-1px}
.eq i{width:3px;background:var(--dawn);border-radius:1px;animation:eq 1s ease-in-out infinite}
.eq i:nth-child(2){animation-delay:.2s}.eq i:nth-child(3){animation-delay:.4s}
@keyframes eq{0%,100%{height:4px}50%{height:12px}}
.paused .eq i{animation-play-state:paused;height:5px}

/* Lyrics on the song page. The lyrics and platform rules are shared with the open view below. */
/* Song page: a short lyrics preview inside the song card; the full lyrics open in the now playing view */
.hero-lyrics{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.hero-lyrics-title{font-family:var(--serif);font-weight:500;font-size:17px;line-height:1.15;margin-bottom:10px}
.lyrics-fold{position:relative}
/* The preview is a small window onto the synchronised lyrics: it scrolls inside itself, never the page, with no scrollbar drawn */
.hero-lyrics.is-folded .lyrics-fold{max-height:150px;overflow:auto;overscroll-behavior:contain;scrollbar-width:none;-ms-overflow-style:none;-webkit-mask-image:linear-gradient(180deg,transparent,#000 12%,#000 76%,transparent);mask-image:linear-gradient(180deg,transparent,#000 12%,#000 76%,transparent)}
.hero-lyrics.is-folded .lyrics-fold::-webkit-scrollbar{display:none;width:0;height:0}
.lyrics-toggle{display:inline-flex;align-items:center;height:40px;margin-top:10px;padding:0 16px;border-radius:999px;font-size:14px;font-weight:600;color:var(--dawn);background:rgba(230,184,106,.12);border:1px solid rgba(230,184,106,.28)}
.lyrics-toggle[hidden]{display:none}
.lyrics-foot{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.lyrics-foot .platforms p{font-size:13px;color:var(--ink-faint);margin-bottom:10px}
.lyrics-foot .platforms div{display:flex;flex-wrap:wrap;gap:8px}
.lyrics-foot .platforms a{font-size:13px;text-decoration:none;background:var(--surface-2);padding:11px 14px;border-radius:10px;color:var(--ink)}
.lyrics .label:first-child{margin-top:0}
.lyrics .line{transition:color .15s ease,opacity .25s ease}
.lyrics.is-live .line[data-t]{opacity:.5}
.lyrics.is-live .line.is-now{opacity:1;color:var(--dawn)}
.lyrics.is-live .line.is-now .w{color:var(--ink)}
.lyrics.is-live .line.is-now .w.is-sung{color:var(--dawn)}
.lyrics-empty{color:var(--ink-soft);font-size:15px;line-height:1.6}

.site-footer{margin-top:28px;padding:32px var(--pad) 0;border-top:1px solid var(--line);font-size:13px;color:var(--ink-faint);line-height:1.6}
.site-footer a{color:var(--ink-soft);text-decoration:none}
.footer-top{margin-bottom:12px}
.footer-top .wordmark{font-size:18px}
.footer-about{max-width:56ch}
.footer-about a{border-bottom:1px solid var(--line)}
.footer-cols{display:grid;grid-template-columns:1fr;gap:22px 32px;margin-top:22px}
.footer-col h3{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 8px}
.footer-col ul{list-style:none}
.footer-col a,.footer-col button{display:block;font:inherit;font-size:14px;color:var(--ink-soft);text-decoration:none;border:0;background:none;padding:6px 0;text-align:left;cursor:pointer}
@media (hover:hover){.footer-col a:hover,.footer-col button:hover{color:var(--ink)}}
.footer-legal{margin-top:26px;padding-top:16px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:6px 24px;justify-content:space-between;font-size:12px}
.footer-legal p{margin:0}

/* Standing pages */
.page{padding:8px var(--pad) 0}
.page .page-body h1{margin-top:14px}
/* On a standing page the card is an aside for large screens only; below that the dock carries the music */
@media (max-width:1023px){.hero.hero-aside{display:none}}
.page-body{max-width:640px}
.page-body h1{font-family:var(--serif);font-weight:400;font-size:clamp(28px,7vw,40px);line-height:1.1;letter-spacing:-0.01em;margin:0 0 16px}
.page-body h2{font-family:var(--serif);font-weight:500;font-size:20px;margin:28px 0 8px}
.page-body p{font-size:16px;line-height:1.65;color:var(--ink-soft);margin-bottom:12px}
.page-body .page-lead{font-size:18px;color:var(--ink)}
.page-body a{color:var(--dawn);text-decoration:none;border-bottom:1px solid rgba(230,184,106,.4)}
/* A page's one call to action is the gold action pill, sized to its words */
.page-body .page-cta{display:inline-flex;width:auto;flex:none;padding:0 24px;border:0;color:#1a1405;margin-top:8px}
/* The contact form: plain fields on the page, and one field people never see that scripts fill */
.form{margin-top:20px}
.form .field{display:block;margin-bottom:16px}
.form .field span{display:block;font-size:13px;color:var(--ink-soft);margin-bottom:6px;line-height:1.4}
.form input,.form textarea{width:100%;font:inherit;color:var(--ink);background:rgba(255,255,255,.04);border:1px solid rgba(242,240,234,.16);border-radius:12px;padding:12px 14px}
.form textarea{min-height:170px;resize:vertical;font-family:var(--serif);font-size:17px;line-height:1.5}
.form input:focus,.form textarea:focus{outline:2px solid var(--dawn);outline-offset:1px;border-color:transparent}
.form .btn{height:46px;padding:0 20px;font-size:14px}
.form-extra{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
/* Spoken to assistive technology only: state changes the screen already shows on the control */
.spoken{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.form-errors{background:rgba(220,90,90,.14);border-radius:12px;padding:12px 14px;margin:0 0 6px;font-size:14px;line-height:1.5;color:var(--ink)}
.form-errors p{margin:0;color:var(--ink)}
.form-errors ul{margin:6px 0 0;padding-left:18px;color:var(--ink-soft)}

/* Player */
/* The bar sits above page content and below every sheet and scrim. While the open view is up on a large screen it is
   raised above that view and its scrim, because the view sits on the dock and the dock's hairline and progress line run
   across the seam; the share sheet's scrim comes later in the markup, so at the same level it still covers the dock. */
/* The player is a dock: one bar flush with the bottom of the window on every screen, darker than the cards,
   its contents on the page column so the artwork lines up with the cards' left edge and the controls with their right.
   The cards above read as content and the bar as the site's controls. Like the card, it carries the song's colour
   in its base and a blurred copy of the artwork behind its contents, darkened so the text keeps its contrast. */
.player{position:fixed;left:0;right:0;bottom:0;z-index:2;pointer-events:none}
/* The dock is the script's; without one the page's own audio control stands in */
@media (scripting:none){.player{display:none}}
@media (min-width:700px){.player.is-raised{z-index:5}}
/* While the open view is up the dock's row is inert and its controls dim; the bar itself closes the view on a tap */
.player.is-raised .player-row{pointer-events:none}
.player.is-raised .player-card{cursor:pointer}
.player.is-raised .controls{opacity:.35}
.controls{transition:opacity .25s}
.player-card{
  width:100%;padding-bottom:env(safe-area-inset-bottom);
  background:rgb(var(--tint-bar));
  border-top:1px solid rgba(242,240,234,.1);
  box-shadow:0 -14px 36px -18px rgba(0,0,0,.85),0 0 40px -8px rgb(var(--tint) / .28);
  pointer-events:auto;transform:translateY(130%);transition:transform .35s cubic-bezier(.2,.8,.2,1);position:relative;isolation:isolate;
}
.player-backdrop{position:absolute;inset:0;z-index:-1;overflow:hidden}
.player-backdrop img{width:100%;height:100%;display:block;object-fit:cover;transform:scale(1.25);filter:blur(42px) saturate(1.25) brightness(.62);opacity:.85;transition:opacity .4s ease}
.player-backdrop::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,16,36,.6),rgba(10,16,36,.78))}
.player-card.is-swapping .player-backdrop img{opacity:0}
.player-card.is-open{transform:none}
.player-row{max-width:480px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;align-items:center;padding:12px var(--pad)}
.player-row > *{min-width:0}
.player-art{width:48px;height:48px;border-radius:9px;overflow:hidden}
.player-art svg{width:100%;height:100%;display:block}
.marquee{overflow:hidden;white-space:nowrap;font-family:var(--serif);font-weight:500;font-size:15px;line-height:1.3}
.marquee.is-scrolling{-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.marquee-inner{display:inline-block;white-space:nowrap;transform:translate3d(0,0,0);backface-visibility:hidden}
.marquee-inner span{display:inline-block;padding-right:48px}
.marquee.is-scrolling .marquee-inner{animation:marquee var(--dur,20s) linear infinite}
.paused .marquee.is-scrolling .marquee-inner{animation-play-state:paused}
@keyframes marquee{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(var(--shift),0,0)}}
.player-ref{font-size:12px;color:var(--ink-soft);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.controls{display:flex;align-items:center}
.ctl{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--ink);flex:none}
.ctl:hover{background:rgba(255,255,255,.06)}
.ctl.play{background:rgba(255,255,255,.06);border:1px solid var(--disc-line);color:var(--ink);width:46px;height:46px;margin:0 2px}
.player-card .ctl.play{box-shadow:0 8px 22px -6px rgba(230,184,106,.5),0 10px 28px -8px rgb(var(--tint) / .55)}
.ctl svg{width:20px;height:20px;fill:currentColor}
/* Previous sits on the bar only where there is room; phones keep play and next */
.ctl-repeat{position:relative;color:var(--dawn)}
.ctl-repeat[data-mode="off"]{color:var(--ink)}
.ctl-badge{position:absolute;right:6px;bottom:6px;min-width:14px;height:14px;padding:0 3px;border-radius:7px;background:var(--dawn);color:#1a1405;font-size:9px;font-weight:700;line-height:14px;text-align:center;display:none}
.ctl-repeat[data-mode="one"] .ctl-badge{display:block}
/* Mini bar controls: a smaller play disc and clear space between the controls, touch targets kept at 44px */
.player-card .controls{gap:6px}
.player-card .ctl.play{width:40px;height:40px;margin:0}
.player-card .ctl.play svg{width:18px;height:18px}
.player-card .ctl:not(.play) svg{width:19px;height:19px}
@media (max-width:360px){.player-card .controls{gap:4px}.player-card .ctl{width:40px;height:44px}.player-card .ctl.play{width:38px;height:38px}}
.lyrics-btn{flex:none;height:40px;padding:0 14px;border-radius:12px;background:rgba(230,184,106,.12);color:var(--dawn);font-weight:600;font-size:13px}
.lyrics-btn:hover{background:rgba(230,184,106,.2)}
/* The heart sits at the right end of the sheet's action bar as a glass circle, its count on its corner */
/* The open view's heart sits in a circle of the song's own colour, at the same low strength the glass circle had */
.like-player{flex:none;width:44px;height:44px;margin-left:auto;justify-content:center;border-radius:50%;background:rgb(var(--tint) / .08);border:1px solid var(--disc-line)}
.like-player .like-count{top:calc(50% - 10px + 1.5px);right:calc(50% - 10px + 1.5px)}
.like-player.is-liked{background:rgb(var(--tint) / .08);border-color:var(--disc-line)}

.progress{flex:1;min-width:0;display:flex;align-items:center;gap:8px;font-size:11px;color:var(--ink-faint);font-variant-numeric:tabular-nums}
.track{flex:1;height:40px;display:flex;align-items:center;cursor:pointer;touch-action:none;border-radius:8px}
.track:focus-visible{outline:2px solid var(--dawn);outline-offset:0}
.now:focus,.send-sheet:focus{outline:none}
.rail{width:100%;height:4px;background:rgb(var(--tint) / .16);border-radius:2px;overflow:hidden}
.fill{--fade:28px;height:100%;background:linear-gradient(90deg,rgb(var(--tint)),var(--dawn));border-radius:2px;width:0%;-webkit-mask-image:linear-gradient(90deg,#000 max(50%,calc(100% - var(--fade))),transparent);mask-image:linear-gradient(90deg,#000 max(50%,calc(100% - var(--fade))),transparent)}

/* Lyric sheet */
.sheet-scrim{position:fixed;inset:0;background:rgba(5,8,18,.6);opacity:0;pointer-events:none;transition:opacity .25s}
.sheet-scrim.is-open{opacity:1;pointer-events:auto}
.grab{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:center;width:100%;height:36px;margin:0 0 6px;background:var(--surface);touch-action:none;cursor:grab}
.grab::after{content:"";position:absolute;left:0;right:0;bottom:-14px;height:14px;background:linear-gradient(var(--surface),transparent);pointer-events:none}
.send-sheet.is-dragging{transition:none}
.sheet-scrim.is-dragging{transition:none}
.grab span{width:44px;height:5px;border-radius:3px;background:rgba(255,255,255,.28);transition:background .15s,transform .15s}
.grab:active span{background:rgba(255,255,255,.5);transform:scaleX(1.15)}
#shMore{display:none}
.send-sheet.has-native #shMore{display:flex}
.send-sheet.has-native .send-row.actions{grid-template-columns:repeat(5,1fr)}
@media (max-width:699px){
  #shCancel{display:none}
  .send-row.actions{grid-template-columns:repeat(3,1fr)}
  .send-sheet.has-native .send-row.actions{grid-template-columns:repeat(4,1fr)}
}
.empty{padding:40px var(--pad);text-align:center;color:var(--ink-soft);font-size:15px;line-height:1.6}
.lyrics{font-family:var(--serif);font-weight:400;font-size:17px;line-height:1.55;color:var(--ink);white-space:pre-line}
.lyrics .label{display:block;font-family:var(--sans);font-size:12px;color:var(--ink-faint);margin:18px 0 4px;font-weight:500}

/* Mini player */
/* Progress runs along the dock's top edge from both ends at once, meeting at the centre when the song ends.
   A faint track shows the whole edge. Around artwork the same frame runs the full outline. */
.ring{position:absolute;pointer-events:none;overflow:visible}
.mini-ring{inset:-1px;width:calc(100% + 2px);height:calc(100% + 2px)}
.art-ring{inset:-5px;width:calc(100% + 10px);height:calc(100% + 10px)}
.ring-track{fill:none;stroke:rgba(242,240,234,.14);stroke-width:3}
/* The lines add up where they overlap, inside their own group, so the join of two soft tips is one solid line */
.ring-lines{isolation:isolate}
.ring-fill{fill:none;stroke-width:3.5;stroke-dasharray:1;stroke-dashoffset:1;mix-blend-mode:plus-lighter}
.mini-open{display:grid;grid-template-columns:48px minmax(0,1fr);gap:10px;align-items:center;min-width:0;text-align:left;padding:0;border-radius:12px}
.mini-open > *{min-width:0}
.mini-text{min-width:0}

/* Now playing */
.now-scrim{z-index:3}
.now{
  position:fixed;left:0;right:0;top:0;bottom:0;z-index:4;overflow:hidden;display:flex;flex-direction:column;
  background:radial-gradient(120% 60% at 50% -10%, rgb(var(--tint-now)) 0%, transparent 60%),var(--night);
  transform:translateY(100%);visibility:hidden;transition:transform .35s cubic-bezier(.2,.8,.2,1),visibility 0s .35s;
}
/* The song's own artwork, blurred and darkened, fills the view behind everything; its colour glows through */
.now-backdrop{position:absolute;inset:0;overflow:hidden;background:rgb(var(--tint-now))}
.now-backdrop img{width:100%;height:100%;display:block;object-fit:cover;transform:scale(1.25);filter:blur(42px) saturate(1.25) brightness(.62);opacity:.85}
.now-backdrop::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,16,36,.28) 0%,rgba(10,16,36,.62) 45%,rgba(10,16,36,.9) 100%)}
.now-body{
  position:relative;flex:1 1 auto;min-height:0;overflow:auto;
  padding:0 var(--pad) 12px;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;
}
/* The close control: a glass circle in the top right corner from tablet width up; phones use the handle */
.now-close{display:none;position:absolute;top:14px;right:14px;z-index:3;width:36px;height:36px;border-radius:50%;place-items:center;background:rgb(var(--tint) / .08);border:1px solid var(--disc-line);color:var(--ink)}
.now-close svg{width:16px;height:16px;fill:currentColor}
@media (hover:hover){.now-close:hover{background:rgb(var(--tint) / .14)}}
.now-body::-webkit-scrollbar{display:none;width:0;height:0}
.now.is-open{transform:none;visibility:visible;transition-delay:0s}
.now.is-dragging{transition:none}
.now .grab{background:transparent;padding-top:env(safe-area-inset-top);height:calc(36px + env(safe-area-inset-top))}
.now .grab::after{display:none}
.now-stage{position:relative;width:min(100%,380px,max(120px,calc(100vh - 446px)));margin:4px auto 0;aspect-ratio:1/1}
.now-art{width:100%;height:100%;border-radius:20px;overflow:hidden;box-shadow:0 30px 60px -18px rgb(var(--tint) / .6),0 12px 30px -12px rgba(0,0,0,.7);background:#0b1226}
.now-art img{width:100%;height:100%;display:block;object-fit:cover}
/* The lyrics pane is the largest piece of the view's glass: the song's colour over the darkened backdrop, with a hairline of the same colour */
.now-lyrics{position:absolute;inset:0;overflow:auto;border-radius:20px;background:rgb(var(--tint) / .14);box-shadow:inset 0 0 0 1px rgb(var(--tint) / .2);padding:18px var(--pad);overscroll-behavior:contain;scrollbar-width:none;-ms-overflow-style:none;-webkit-mask-image:linear-gradient(180deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(180deg,transparent,#000 9%,#000 91%,transparent)}
.now-lyrics::-webkit-scrollbar{display:none;width:0;height:0}
.now[data-view="lyrics"] .now-art,.now[data-view="lyrics"] .now-stage .art-ring{visibility:hidden}
/* On a large screen the lyrics take the square, so a small copy of the artwork sits above the title */
.now-art-small-box{display:none;position:relative}
.now-art-small{width:100%;aspect-ratio:1/1;border-radius:20px;overflow:hidden;background:#0b1226;box-shadow:0 30px 60px -18px rgb(var(--tint) / .6),0 12px 30px -12px rgba(0,0,0,.7)}
.now-art-small img{width:100%;height:100%;display:block;object-fit:cover}
.now-lyrics .lyrics{font-size:18px;line-height:1.5}
.now-lyrics .lyrics-empty{color:var(--ink-soft);font-size:15px;line-height:1.6}
.now-head{margin-top:18px;text-align:center}
.now-text{min-width:0}
.now-title{font-family:var(--serif);font-weight:400;font-size:clamp(22px,6.5vw,28px);line-height:1.1;letter-spacing:-0.01em;overflow-wrap:anywhere}
.now-ref{font-size:14px;color:var(--ink-soft);margin-top:6px}
.now-meta{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:12px}
/* The wave carries the song's colour and advances with playback; the seekable track sits under it */
.now-wave{display:block;width:100%;height:40px;margin-top:12px}
.now-progress{margin-top:2px}
.now-transport{display:flex;align-items:center;justify-content:space-between;margin:16px 0 34px}
/* Secondary controls sit in faint glass circles; the play button carries a soft gold glow */
/* Every glass surface in the open view takes the song's own colour at the strength the glass had */
.now-transport .ctl{width:46px;height:46px;background:rgb(var(--tint) / .06);border:1px solid var(--disc-line)}
@media (hover:hover){.now-transport .ctl:hover{background:rgb(var(--tint) / .12)}}
/* The play button is the same glass as the controls beside it, larger, with a halo that blends gold with the song's colour */
.now-transport .ctl.play{width:68px;height:68px;box-shadow:0 10px 28px -8px rgba(230,184,106,.55),0 12px 40px -10px rgb(var(--tint) / .6)}
.now-play svg{width:28px;height:28px}
.ctl-mode{color:var(--ink)}
.ctl-mode[aria-pressed="true"]{color:var(--dawn)}
/* Lyrics and Share: a glass bar at the bottom of the sheet, under the scrolling body, at every width */
.now-actions{position:relative;z-index:2;flex:none;display:flex;align-items:center;gap:10px;padding:14px var(--pad) calc(16px + env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(10,16,36,0) 30%,rgba(10,16,36,.7) 65%,rgba(10,16,36,.85))}
.now-actions .lyrics-btn{background:rgb(var(--tint) / .08);border:1px solid rgb(var(--tint) / .14);color:var(--ink)}
@media (hover:hover){.now-actions .lyrics-btn:hover{background:rgb(var(--tint) / .14)}}
/* Pressed, the Lyrics button shows the way the repeat button does: gold text and a gold hairline on the same glass */
.now-actions .lyrics-btn[aria-pressed="true"]{color:var(--dawn);border-color:rgba(230,184,106,.55)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .now-actions .lyrics-btn{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
}
.now-platforms{width:100%;margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.now-platforms p{font-size:13px;color:var(--ink-faint);margin-bottom:10px}
.now-platforms div{display:flex;flex-wrap:wrap;gap:8px}
.now-platforms a{font-size:13px;text-decoration:none;background:rgb(var(--tint) / .12);border:1px solid rgb(var(--tint) / .16);padding:10px 13px;border-radius:10px;color:var(--ink)}

/* Sheets scroll like a native panel: by finger, wheel or keys, with no scrollbar drawn and no scroll leaking to the page behind */
.send-sheet{overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}
.send-sheet::-webkit-scrollbar{display:none;width:0;height:0}

/* Fallback share sheet */
/* The share sheet carries the colour of what is shared: a song's own colour, or the page's colour for the site.
   The script sets --tint on the sheet; its surface, tiles and buttons read it at the strengths the open view uses. */
.send-sheet{
  position:fixed;left:0;right:0;bottom:0;width:100%;max-width:480px;margin:0 auto;z-index:6;
  background:linear-gradient(180deg,rgb(var(--tint) / .22),rgb(var(--tint) / .1)),var(--night-deep);border-radius:24px 24px 0 0;border-top:1px solid rgb(var(--tint) / .3);
  padding:0 var(--pad) calc(24px + env(safe-area-inset-bottom));
  transform:translateY(100%);visibility:hidden;transition:transform .35s cubic-bezier(.2,.8,.2,1),visibility 0s .35s;
}
.send-sheet.is-open{transform:none;visibility:visible;transition-delay:0s}
.send-scrim{z-index:5}
/* The handle strip wears the sheet's own top colour, so it does not read as a bar laid on the sheet */
.send-sheet .grab{background:linear-gradient(rgb(var(--tint) / .22),rgb(var(--tint) / .22)),var(--night-deep)}
.send-sheet .grab::after{display:none}
.send-card{display:grid;grid-template-columns:56px minmax(0,1fr);gap:14px;align-items:center;padding:4px 0 18px;border-bottom:1px solid rgb(var(--tint) / .2)}
.send-card > *{min-width:0}
.send-art{width:56px;height:56px;border-radius:12px;overflow:hidden}
.send-art svg{width:100%;height:100%;display:block}
.send-title{font-family:var(--serif);font-weight:500;font-size:16px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.send-url{font-size:13px;color:var(--ink-soft);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.send-row{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:18px 0 6px}
.send-row + .send-row{border-top:1px solid rgb(var(--tint) / .2)}
.send-opt{display:flex;flex-direction:column;align-items:center;gap:9px;padding:6px 2px;border-radius:12px;font-size:12px;color:var(--ink-soft);text-decoration:none;text-align:center}
.send-opt:hover{color:var(--ink)}
.send-opt i{width:54px;height:54px;border-radius:50%;background:rgb(var(--tint) / .14);border:1px solid rgb(var(--tint) / .2);display:grid;place-items:center;color:var(--ink)}
@media (hover:hover){.send-opt:hover i{background:rgb(var(--tint) / .22)}}
.send-opt i svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.send-opt.gold i{background:rgba(230,184,106,.16);color:var(--dawn)}
.send-qr{display:none;flex-direction:column;align-items:center;gap:14px;padding:20px 0 6px}
.send-qr.is-shown{display:flex}
.send-qr .qr{background:#fff;padding:12px;border-radius:14px}
.send-qr .qr svg{width:180px;height:180px;display:block}
.send-qr p{font-size:13px;color:var(--ink-soft);text-align:center}
.send-back{font-size:14px;color:var(--dawn);font-weight:600;height:40px;padding:0 16px;border-radius:12px;background:rgba(230,184,106,.12)}
.player-art img,.send-art img{width:100%;height:100%;display:block;object-fit:cover}

/* Tablet portrait and small laptops: one wider column */
@media (min-width:700px){
  .fill{--fade:36px}
  .frame{max-width:720px}
  .wordmark-mark{width:28px;height:28px}
  .footer-cols{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hero{display:grid;grid-template-columns:300px minmax(0,1fr);column-gap:28px;align-items:end;padding:20px}

  .hero > .empty{grid-column:1/-1}
  .hero-lyrics{grid-column:1/-1}
  .hero-body{min-width:0}
  .hero-title{margin-top:0;font-size:clamp(24px,3.4vw,32px)}
  .hero-play{width:60px;height:60px}
  .song-title{font-size:18px}
  .player-row{max-width:720px}
  .send-sheet{
    bottom:auto;top:50%;left:50%;right:auto;width:min(540px,calc(100% - 40px));max-height:80vh;
    border-radius:24px;border:1px solid rgb(var(--tint) / .3);padding-top:22px;
    transform:translate(-50%,-46%);opacity:0;pointer-events:none;transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .25s,visibility 0s .3s;
  }
  .send-sheet.is-open{transform:translate(-50%,-50%);opacity:1;pointer-events:auto;visibility:visible;transition-delay:0s}
  .grab{display:none}
  .send-sheet{padding-top:22px}
  /* The open view sits on the dock: its bottom edge on the dock's top edge, centred, square at the bottom with no
     bottom border, so the dock's hairline is the seam and the two read as one surface. It rises out of the dock when
     it opens, and it grows upward and outward from that anchor, so switching to lyrics never moves its bottom or centre. */
  .now{
    top:auto;left:50%;right:auto;bottom:var(--dock);width:min(560px,calc(100% - 40px));
    border-radius:24px 24px 0 0;border:1px solid rgba(242,240,234,.12);border-bottom:0;
    transform:translate(-50%,24px);opacity:0;pointer-events:none;transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .25s,visibility 0s .3s;
  }
  .now{max-height:calc(100vh - var(--dock) - 24px)}
  .now-body{padding:20px var(--pad) 8px}
  .now-close{display:grid}
  .now-stage{width:min(100%,276px,max(160px,calc(100vh - var(--dock) - 494px)))}
  .now-transport{margin:14px 0 36px}
  .now-actions{padding:10px var(--pad) 18px}
  .now.is-open{transform:translate(-50%,0);opacity:1;pointer-events:auto;visibility:visible;transition-delay:0s}
  .now-title{font-size:26px}
  /* Lyrics mode: the lyrics leave the artwork's square and take a tall box */
  .now[data-view="lyrics"] .now-stage{width:100%;aspect-ratio:auto;height:clamp(240px,calc(100vh - var(--dock) - 464px),560px)}
}
/* Desktop and tablet landscape: featured song pinned on the left, list on the right */
@media (min-width:1024px){
  /* Lyrics mode on a large screen: controls on the left, a tall lyrics column on the right */
  .now[data-view="lyrics"]{width:min(960px,calc(100% - 40px))}
  .now[data-view="lyrics"] .now-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:repeat(7,auto) 1fr;column-gap:36px}
  /* The artwork matches the featured artwork where the screen is tall enough and gives way on shorter screens so the view still fits */
  /* The artwork, title and meta share the centre line of the controls under them, as they do in artwork mode. The
     artwork sits 5px down, the reach of its frame, so the frame's outer edge is level with the top of the lyrics card. */
  .now[data-view="lyrics"] .now-art-small-box{display:block;width:min(100%,clamp(160px,calc(100vh - var(--dock) - 479px),378px));margin:5px auto 16px}
  .now[data-view="lyrics"] .now-body > *{grid-column:1}
  .now[data-view="lyrics"] .now-stage{grid-column:2;grid-row:1 / -1;height:auto;min-height:min(70vh,640px);margin:0}
  .now[data-view="lyrics"] .now-head{margin-top:0}
  body{background:radial-gradient(70% 60% at 20% 0%, rgb(var(--tint-page)) 0%, transparent 60%),var(--night)}
  .frame{max-width:1180px;padding:0 40px calc(var(--dock) + 32px)}
  /* The page column is the grid, and the main element lays its children straight into it. On the homepage the
     featured card is pinned on the left for the whole page and the footer belongs to the scrolling right column.
     A page without a pinned card, a song page or a standing page, keeps the footer across the whole column. */
  .frame{display:grid;grid-template-columns:420px minmax(0,1fr);column-gap:24px;grid-template-areas:"head head" "hero list" "hero foot";align-content:start}
  .frame-page{grid-template-areas:"head head" "hero list" "foot foot"}
  .app{display:contents}
  .site-header{grid-area:head}
  .site-footer{grid-area:foot}
  /* The header is a bar, the twin of the dock: one 64px row in the song's colour with a hairline under it, painted
     across the whole window while its contents stay on the page column. It scrolls with the page. */
  html{scroll-padding-top:calc(64px + env(safe-area-inset-top))}
  /* The drawer is wider on a large screen and, like everywhere, fills the screen's height and scrolls inside it with its head pinned */
  .menu{width:500px}
  .site-header{min-height:calc(64px + env(safe-area-inset-top));padding:calc(10px + env(safe-area-inset-top)) 0 10px}
  .menu-brand{min-height:calc(64px + env(safe-area-inset-top));padding-top:calc(10px + env(safe-area-inset-top));padding-bottom:10px}
  .site-nav{display:flex;align-items:center;gap:6px;margin-left:auto}
  .site-nav a{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border-radius:999px;font-size:14px;font-weight:500;color:var(--ink-soft);text-decoration:none;letter-spacing:.01em}
  .site-nav a[aria-current="page"]{color:var(--dawn)}
  .site-nav svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
  @media (hover:hover){.site-nav a:hover{color:var(--ink)}}
  .site-nav .nav-send{margin-left:2px;margin-right:6px}
  .page{grid-column:1/-1;padding:24px 0 0}
  .hero{grid-area:hero;display:block;position:sticky;top:calc(88px + env(safe-area-inset-top));align-self:start;margin:24px 0 0;padding:20px}
  .hero-art-box{max-width:420px}
  .hero-art{border-radius:18px}
  .hero-play{width:72px;height:72px;left:20px;bottom:20px}
  .hero-title{margin-top:24px;font-size:32px}
  /* The list card starts level with the featured card: the same 24px below the header, none of the stacked spacing */
  .list-wrap{grid-area:list;padding-top:24px}
  .catalog,.page-panel{margin:0}
  .page-panel{padding:32px 36px 36px}
  /* A card with lyrics is not pinned, but it stays positioned so its backdrop is drawn inside it and not over the page */
  .hero.has-lyrics{position:relative;top:auto}
  .site-footer{padding-left:0;padding-right:0;margin-top:48px}
  .footer-cols{grid-template-columns:repeat(3,minmax(0,1fr))}
  .player-row{max-width:1180px;padding:12px 40px;column-gap:14px}
  .marquee{font-size:16px}
}

/* A phone held sideways, or any short and wide window: the open view lays the artwork beside the controls so nothing
   scrolls. Under the tablet width it keeps the phone's full screen sheet; the narrower centred panel starts at 700px. */
@media (min-width:600px) and (max-height:640px){
  .now .grab{display:none}
  .now-close{display:grid;top:10px;right:10px}
  .now-body{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto auto auto 1fr;column-gap:28px;align-content:start;padding:16px var(--pad) 4px}
  .now-stage{grid-column:1;grid-row:1 / -1;align-self:center;width:min(calc(100vh - 150px),320px,calc(100vw - 460px));margin:0;aspect-ratio:1/1;height:auto}
  .now-art-small-box{display:none}
  .now-head{grid-column:2;margin-top:0}
  .now-title{font-size:22px}
  .now-meta{grid-column:2;margin-top:8px}
  .now-wave{grid-column:2;margin-top:6px;height:32px}
  .now-progress{grid-column:2}
  .now-transport{grid-column:2;margin:6px 0 30px}
  .now-actions{padding:6px var(--pad) 10px}
  .now[data-view="lyrics"] .now-body{grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto auto auto 1fr}
  .now[data-view="lyrics"] .now-body > *{grid-column:2}
  .now[data-view="lyrics"] .now-stage{grid-column:1;grid-row:1 / -1;align-self:stretch;width:min(38vw,420px);height:auto;min-height:0;aspect-ratio:auto}
  .now[data-view="lyrics"] .now-art-small-box{display:none}
  .now[data-view="lyrics"] .now-head{margin-top:0}
}
/* From the tablet width the sideways view sits on the dock, so its room is what is left above the dock */
@media (min-width:700px) and (max-height:640px){
  .now{width:min(820px,calc(100% - 32px));max-height:calc(100vh - var(--dock) - 16px)}
  .now-stage{width:min(calc(100vh - var(--dock) - 150px),320px,calc(100vw - 460px))}
}
/* On the shortest sideways screens the wave gives way so the controls keep their room */
@media (min-width:600px) and (max-height:450px){
  .now-wave{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  .marquee.is-scrolling{text-overflow:ellipsis}
}