/* LyricsHub 2, Aurora Solid theme: Aurora Glass (aurora.css) with solid insides. The same soft
   colour light around the page box, the same layout, header, hero and cards, but everything inside
   the box (.frame) is solid: panels, cards, the hero, the version tabs and the sticky header are
   plain colour, and nothing in the box blurs what is behind it. Popups and dialogs keep their
   frosted look (they sit outside the box). Light and dark. Made from aurora.css: keep the two in
   step, and change only the last section here. Loaded only when Aurora Solid is the theme (lib/themes.ts). */

html[data-theme=aurora-solid]:not([data-dark]){
  --bg:#f2f1fb;--card:#ffffff;--fg:#17152f;--mut:#5c5978;--line:rgba(23,21,47,.1);--soft:rgba(255,255,255,.55);--hdbg:transparent;
  --glass:rgba(255,255,255,.56);--glass-hi:rgba(255,255,255,.78);--glass-b:rgba(255,255,255,.85);
  --glass-sh:0 1px 0 rgba(255,255,255,.9) inset,0 12px 32px -14px rgba(52,36,140,.22);
  --solid:#fbfaff;--a1:.42;--a2:.34;--a3:.30;--a4:.22;
  --frame:rgba(255,255,255,.3);--frame-b:rgba(255,255,255,.78);
  --frame-sh:0 1px 0 rgba(255,255,255,.85) inset,0 40px 90px -40px var(--frame-shc);--frame-shc:rgba(52,36,140,.38);
  --edge:rgba(76,60,170,.2);--btn-dim:transparent;--btn-edge:rgba(76,60,170,.36);--in-edge:rgba(76,60,170,.24);
}
html[data-theme=aurora-solid][data-dark]{
  --bg:#0a0918;--card:#16152a;--fg:#eeedf8;--mut:#a3a1bd;--line:rgba(255,255,255,.1);--soft:rgba(255,255,255,.06);--hdbg:transparent;
  --glass:rgba(24,22,48,.52);--glass-hi:rgba(34,31,64,.7);--glass-b:rgba(255,255,255,.1);
  --glass-sh:0 1px 0 rgba(255,255,255,.07) inset,0 18px 40px -16px rgba(0,0,0,.7);
  --solid:#15142a;--a1:.38;--a2:.26;--a3:.24;--a4:.14;
  --frame:rgba(20,18,44,.46);--frame-b:rgba(255,255,255,.08);
  --frame-sh:0 1px 0 rgba(255,255,255,.05) inset,0 40px 90px -40px var(--frame-shc);--frame-shc:rgba(0,0,0,.85);
  --edge:rgba(255,255,255,.16);--btn-dim:rgba(10,8,30,.3);--btn-edge:rgba(255,255,255,.22);--in-edge:rgba(255,255,255,.22);
}
html[data-theme=aurora-solid]{
  --hw:700;--ls:-.03em;--grad:linear-gradient(120deg,var(--acc),color-mix(in srgb,var(--acc) 45%,#ec4899) 60%,#f59e0b);
  --gap:24px;
  --aurora:
    radial-gradient(38% 46% at 14% 12%,color-mix(in srgb,var(--acc) calc(var(--a1)*100%),transparent),transparent 70%),
    radial-gradient(34% 42% at 86% 10%,rgba(56,189,248,var(--a2)),transparent 70%),
    radial-gradient(40% 48% at 74% 82%,rgba(236,72,153,var(--a3)),transparent 70%),
    radial-gradient(34% 40% at 18% 86%,rgba(251,191,36,var(--a4)),transparent 70%)
}
html[data-theme=aurora-solid] body{background:var(--bg)}

/* the colour light: a fixed layer that drifts slowly (stopped for people who ask for less motion) */
html[data-theme=aurora-solid] body::before{
  content:"";position:fixed;inset:-12%;z-index:-1;pointer-events:none;
  background:var(--aurora);animation:lh-aurora 26s ease-in-out infinite alternate
}
@keyframes lh-aurora{
  50%{transform:translate3d(2%,3%,0) rotate(4deg) scale(1.05)}
  to{transform:translate3d(-2%,-2%,0) rotate(-3deg) scale(1.1)}
}

/* ------------------------------------------------------------------ the page box
   The box is the content width plus 48px. "Normal" page width is a little tighter here than in
   the other themes (1000px, not 1120px) so the box reads as a box on wide screens. */
html[data-theme=aurora-solid][data-width=normal]{--w:1000px}
html[data-theme=aurora-solid] .frame{
  width:calc(100% - 48px);max-width:calc(var(--w) + 48px);margin:var(--gap) auto 32px;border-radius:8px;
  background:var(--frame);border:1px solid var(--frame-b);box-shadow:var(--frame-sh)
}

/* The gap above the box stays while the page scrolls: the sticky header stops --gap below the top,
   and .frame-cap (app/(site)/layout.tsx) covers that strip with the same drifting light, laid out
   exactly like body::before (same box, centre and animation), so songs scrolling up pass under
   it instead of showing in the gap. The admin bar stays above it.
   The strip is as wide as the box's own containing block, so CSS alone knows where the box's
   sides are: --fe is the distance from the strip's sides to the box (in left/right, where 50% is
   half the strip), --tl the same for an 8px mask tile (in mask-position, where 50% is half of
   the strip less the tile). No script measures them, so they are right from the first paint. */
html[data-theme=aurora-solid] .frame-cap{
  position:fixed;top:0;left:0;right:0;height:calc(var(--gap) + 8px);overflow:hidden;z-index:45;pointer-events:none;background:var(--bg);
  --fe:max(24px,50% - (var(--w) + 48px)/2);--tl:max(24px,50% + 4px - (var(--w) + 48px)/2);
  -webkit-mask:linear-gradient(#000,#000) 0 0/100% var(--gap) no-repeat;mask:linear-gradient(#000,#000) 0 0/100% var(--gap) no-repeat
}
/* Once the page moves, the strip also reaches 8px further down at the box's two top corners and
   cuts them round (the box's own 8px), so the top of the box stays rounded under the gap. Once
   the box's top has gone under the gap (site.js sets data-stuck), it also draws the box's shadow
   above that edge: the bottom shadow mirrored, plus a tighter one so it reads in the small gap. */
html[data-theme=aurora-solid][data-scrolled] .frame-cap{
  -webkit-mask:
    linear-gradient(#000,#000) 0 0/100% var(--gap) no-repeat,
    radial-gradient(circle at 100% 100%,transparent 7.5px,#000 8.5px) var(--tl) var(--gap)/8px 8px no-repeat,
    radial-gradient(circle at 0 100%,transparent 7.5px,#000 8.5px) calc(100% - var(--tl)) var(--gap)/8px 8px no-repeat;
  mask:
    linear-gradient(#000,#000) 0 0/100% var(--gap) no-repeat,
    radial-gradient(circle at 100% 100%,transparent 7.5px,#000 8.5px) var(--tl) var(--gap)/8px 8px no-repeat,
    radial-gradient(circle at 0 100%,transparent 7.5px,#000 8.5px) calc(100% - var(--tl)) var(--gap)/8px 8px no-repeat
}
html[data-theme=aurora-solid] .frame-cap::after{
  content:"";position:absolute;top:var(--gap);left:var(--fe);right:var(--fe);height:400px;
  box-shadow:0 -40px 90px -40px var(--frame-shc),0 -4px 16px -6px var(--frame-shc);opacity:0
}
html[data-theme=aurora-solid][data-stuck] .frame-cap::after{opacity:1}
html[data-theme=aurora-solid] .frame-cap::before{
  content:"";position:absolute;left:-12%;width:124%;top:-12vh;height:124vh;
  background:var(--aurora);animation:lh-aurora 26s ease-in-out infinite alternate
}
/* a header that scrolls away (Appearance: "Header stays on top" off) leaves nothing to keep the gap for:
   the box simply scrolls up with the page */
html[data-theme=aurora-solid]:not([data-sticky]) .frame-cap{display:none}
html[data-theme=aurora-solid] .abar{position:relative;z-index:46}
html[data-theme=aurora-solid][data-sticky] .frame .hd{top:var(--gap)}
html[data-theme=aurora-solid][data-sticky][data-scrolled] .frame .hd{border-radius:7px 7px 0 0;box-shadow:inset 0 1px 0 var(--frame-b)}
html[data-theme=aurora-solid][data-sticky] .frame .az{top:calc(var(--gap) + 77px)}
/* the artists A to Z bar sticks under the header: a frosted bar across the panel, like the header's */
html[data-theme=aurora-solid] .mbox .az{margin-left:-30px;margin-right:-30px;padding:10px 30px;border-bottom:1px solid var(--line);
  background:color-mix(in srgb,var(--solid) 80%,transparent);backdrop-filter:blur(18px) saturate(1.6);-webkit-backdrop-filter:blur(18px) saturate(1.6)}
@media (prefers-reduced-motion:reduce){
  html[data-theme=aurora-solid] body::before,html[data-theme=aurora-solid] .frame-cap::before{animation:none}
}
/* Whatever is frosted above the light (the sticky header once the page moves, popups, dialogs)
   has to blur again on every frame while the light drifts, so it holds still then, and always
   on touch screens. It carries on from the same spot when the page is back at the top. */
html[data-theme=aurora-solid][data-scrolled] body::before,html[data-theme=aurora-solid][data-scrolled] .frame-cap::before,
html[data-theme=aurora-solid].lh-tool-open body::before,html[data-theme=aurora-solid].lh-tool-open .frame-cap::before{animation-play-state:paused}
html[data-theme=aurora-solid]:has(#lh-search.open,#lh-drawer.open,.lh-dlg) body::before,
html[data-theme=aurora-solid]:has(#lh-search.open,#lh-drawer.open,.lh-dlg) .frame-cap::before{animation-play-state:paused}
@media (hover:none){
  html[data-theme=aurora-solid] body::before,html[data-theme=aurora-solid] .frame-cap::before{animation:none}
}
/* the sticky sidebar ad stops under the floating header, not behind it */
html[data-theme=aurora-solid][data-sticky] .side .sticky{top:calc(var(--gap) + 89px)}
@media print{
  html[data-theme=aurora-solid] .frame-cap{display:none}
}

/* ------------------------------------------------------------------ header
   No bar of its own: the logo, menu and search sit straight on the page box, lined up with the
   content, over a hairline that matches the one above the footer. A sticky header gets a frosted
   bar only once the page scrolls under it (site.js sets data-scrolled), so the menu stays readable
   over the songs. */
html[data-theme=aurora-solid] .hd,html[data-theme=aurora-solid][data-sticky] .hd{
  border:0;border-bottom:1px solid var(--line);background:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding:0;
  transition:background-color .2s,border-color .2s
}
html[data-theme=aurora-solid][data-sticky][data-scrolled] .hd{
  background:color-mix(in srgb,var(--solid) 80%,transparent);
  backdrop-filter:blur(18px) saturate(1.6);-webkit-backdrop-filter:blur(18px) saturate(1.6)
}
html[data-theme=aurora-solid] .hd .wrap{height:76px}
html[data-theme=aurora-solid] .hd.stack .wrap{height:auto;padding-top:20px;padding-bottom:14px}
html[data-theme=aurora-solid] .logo i{border-radius:calc(var(--r)*0.625);background:var(--grad);color:#fff}
html[data-theme=aurora-solid] .nav{gap:4px;font-weight:600}
html[data-theme=aurora-solid] .nav a{padding:7px 13px;border-radius:999px;font-size:13.5px;font-weight:500}
html[data-theme=aurora-solid] .nav a[aria-current]{font-weight:500}
html[data-theme=aurora-solid] .nav a:hover{background:var(--glass-hi);color:var(--fg)}
html[data-theme=aurora-solid] .nav a[aria-current]{background:var(--fg);color:var(--bg)}
html[data-theme=aurora-solid] .srch{background:var(--glass-hi);border-color:var(--glass-b)}
html[data-theme=aurora-solid] .srch kbd{background:transparent}
html[data-theme=aurora-solid] .ib:hover{background:var(--glass-hi)}
html[data-theme=aurora-solid] .railwrap .rail,html[data-theme=aurora-solid] .topbar{background:var(--glass);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}

/* ------------------------------------------------------------------ search hero */
/* the hero sits as far under the header as the boxes of every other page (.mbox margin-top) */
html[data-theme=aurora-solid] .hero-s{
  margin-top:calc(28px*var(--sp));padding:calc(72px*var(--sp)) 24px calc(46px*var(--sp));border-radius:calc(var(--r)*2.125);
  background:var(--glass);border:1px solid var(--glass-b);box-shadow:var(--glass-sh)
}
html[data-theme=aurora-solid] .hero-s h1{font-size:50px;line-height:1.04;letter-spacing:-.045em;max-width:820px;margin:0 auto;padding-bottom:.06em;
  background:linear-gradient(110deg,var(--fg) 25%,var(--acc) 58%,#ec4899 80%,#f59e0b);-webkit-background-clip:text;background-clip:text;color:transparent}
html[data-theme=aurora-solid] .hero-s p{font-size:18px;margin-top:14px}
html[data-theme=aurora-solid] .hero-s .big{
  max-width:640px;padding:18px 24px;margin-top:32px;font-size:15.5px;background:var(--glass-hi);border:1px solid var(--glass-b);
  box-shadow:var(--glass-sh),0 0 0 6px color-mix(in srgb,var(--acc) 7%,transparent);
  backdrop-filter:blur(18px) saturate(1.6);-webkit-backdrop-filter:blur(18px) saturate(1.6);transition:box-shadow .25s,transform .25s
}
html[data-theme=aurora-solid] .hero-s .big:hover{border-color:var(--glass-b);transform:translateY(-1px);box-shadow:var(--glass-sh),0 0 0 6px color-mix(in srgb,var(--acc) 14%,transparent),0 20px 50px -18px color-mix(in srgb,var(--acc) 50%,transparent)}
html[data-theme=aurora-solid] .hero-s .big .ico{color:var(--acc)}
html[data-theme=aurora-solid] .hero-s .hint{margin-top:18px}
html[data-theme=aurora-solid] .hero-s .hint a{display:inline-block;margin:4px 3px;padding:6px 14px;border-radius:999px;background:var(--glass-hi);border:1px solid var(--edge);font-weight:500}
html[data-theme=aurora-solid] .hero-s .hint a:hover{color:var(--acc);border-color:color-mix(in srgb,var(--acc) 50%,var(--edge));background:var(--glass-hi)}
html[data-theme=aurora-solid] .hero-f .main,html[data-theme=aurora-solid] .hero-f .sm{border-radius:calc(var(--r)*1.625);box-shadow:var(--glass-sh)}
html[data-theme=aurora-solid] .hero-f .noimg{background:var(--grad)}

/* ------------------------------------------------------------------ glass panels */
html[data-theme=aurora-solid] .l-cards .it,html[data-theme=aurora-solid] .side .blk,html[data-theme=aurora-solid] .boxed .st,html[data-theme=aurora-solid] .boxed .lyrcard,
html[data-theme=aurora-solid] .boxed .boxin,html[data-theme=aurora-solid] .pn a,html[data-theme=aurora-solid] .agrid a,
html[data-theme=aurora-solid] .l-grid .it,html[data-theme=aurora-solid] .below>.blk,html[data-theme=aurora-solid] .below>div{
  background:var(--glass);border:1px solid var(--glass-b);box-shadow:var(--glass-sh)
}
html[data-theme=aurora-solid] .boxed .st,html[data-theme=aurora-solid] .boxed .lyrcard,html[data-theme=aurora-solid] .boxed .boxin{border-radius:calc(var(--r)*1.75);padding:28px 32px}

/* boxed layout: whatever list style the admin picks, each page's main content sits in one glass
   panel (.mbox) and each sidebar group in its own (.sgrp); cards and tiles inside a panel turn
   into lighter tiles */
html[data-theme=aurora-solid] .mbox,html[data-theme=aurora-solid] .side .sgrp{background:var(--glass);border:1px solid var(--glass-b);box-shadow:var(--glass-sh)}
html[data-theme=aurora-solid] .mbox{--mpad:30px;border-radius:calc(var(--r)*1.75);padding:26px var(--mpad) 30px;margin-top:calc(28px*var(--sp))}
/* the song page: every box down the column (title card, lyrics, video, credits, questions, tags,
   previous/next, more songs) and any ad between them sits 22px from the next, the sidebar's gap */
html[data-theme=aurora-solid] .boxed>*+*{margin-top:22px}
html[data-theme=aurora-solid] .boxed>.ad{margin-bottom:22px}
html[data-theme=aurora-solid] .mbox>.sec:first-child{margin-top:0}
html[data-theme=aurora-solid] .mbox>.ah:first-child{padding-top:0}
/* pages (contact, privacy, terms...): a full-width line under the title, like the lists' top line */
html[data-theme=aurora-solid] .mbox>.ah:has(+.prose){position:relative;padding-bottom:22px;margin-bottom:24px}
html[data-theme=aurora-solid] .mbox>.ah:has(+.prose)::after{content:"";position:absolute;bottom:0;left:calc(var(--mpad)*-1);right:calc(var(--mpad)*-1);border-top:1px solid var(--line);pointer-events:none}
html[data-theme=aurora-solid] .mbox>.ah+.prose>:first-child{margin-top:0}
html[data-theme=aurora-solid] .mbox .pager{margin:28px 0 0}
/* a list opens with a line under the page heading that runs the full width of the panel, edge to edge
   (--mpad is the panel's side padding); it closes with a full-width line too when the page numbers
   follow (the row keeps a see-through border so nothing moves), and without one when it ends the box */
html[data-theme=aurora-solid] .mbox :is(.l-rows,.l-list) .it:first-child{position:relative;border-top:0}
html[data-theme=aurora-solid] .mbox :is(.l-rows,.l-list) .it:first-child::after{content:"";position:absolute;top:0;left:calc(var(--mpad)*-1);right:calc(var(--mpad)*-1);
  border-top:1px solid var(--line);pointer-events:none}
html[data-theme=aurora-solid] .mbox :is(.l-rows,.l-list):not(:has(+.pager),:has(+.pager)>*) .it:last-child{border-bottom:0;padding-bottom:0}
html[data-theme=aurora-solid] .mbox :is(.l-rows,.l-list):is(:has(+.pager),:has(+.pager)>*) .it:last-child{position:relative;border-bottom-color:transparent}
html[data-theme=aurora-solid] .mbox :is(.l-rows,.l-list):is(:has(+.pager),:has(+.pager)>*) .it:last-child::before{content:"";position:absolute;bottom:-1px;
  left:calc(var(--mpad)*-1);right:calc(var(--mpad)*-1);border-top:1px solid var(--line);pointer-events:none}
html[data-theme=aurora-solid] .mbox .l-cards .it,html[data-theme=aurora-solid] .mbox .l-grid .it,html[data-theme=aurora-solid] .mbox .agrid a{background:var(--soft);box-shadow:none}
html[data-theme=aurora-solid] .side .sgrp{border-radius:calc(var(--r)*1.5);padding:6px 18px 18px}
html[data-theme=aurora-solid] .side .sgrp .blk{padding:0}
html[data-theme=aurora-solid] .err .mbox{max-width:640px;margin:0 auto;padding:44px 30px}

/* sections and song cards */
html[data-theme=aurora-solid] .sec h2{font-size:22px}
html[data-theme=aurora-solid] .sec a{font-weight:600;color:var(--acc)}
html[data-theme=aurora-solid] .l-cards{gap:12px}
html[data-theme=aurora-solid] .l-cards .it{border-radius:calc(var(--r)*1.375);padding:12px;gap:14px;transition:transform .25s ease,box-shadow .25s ease,background .25s}
html[data-theme=aurora-solid] .l-cards .it:hover{transform:translateY(-2px);background:var(--glass-hi);border-color:var(--glass-b);box-shadow:var(--glass-sh),0 18px 40px -18px color-mix(in srgb,var(--acc) 55%,transparent)}
html[data-theme=aurora-solid] .l-cards img,html[data-theme=aurora-solid] .l-cards .ph{width:68px;height:68px;border-radius:calc(var(--r)*1)}
html[data-theme=aurora-solid] .l-cards .t{font-weight:700;font-size:15.5px}
html[data-theme=aurora-solid] .l-cards .a{margin-top:2px}
html[data-theme=aurora-solid] .l-grid .it{border-radius:calc(var(--r)*1.375);padding:10px 10px 14px}
html[data-theme=aurora-solid] .l-grid img,html[data-theme=aurora-solid] .l-grid .ph,html[data-theme=aurora-solid] .l-grid .cv{border-radius:calc(var(--r)*0.938)}
html[data-theme=aurora-solid] .l-grid .t,html[data-theme=aurora-solid] .l-grid .a{padding:0 4px}
html[data-theme=aurora-solid] .l-list .it,html[data-theme=aurora-solid] .l-rows .it{border-color:var(--line)}
html[data-theme=aurora-solid] .l-rows .it{padding:calc(23px*var(--sp)) 0;gap:18px}
html[data-theme=aurora-solid] .l-list .it{padding:calc(20px*var(--sp)) 0}
html[data-theme=aurora-solid] .it .y{display:inline-block;padding:3px 11px;border-radius:999px;background:var(--glass-hi);border:1px solid var(--edge);font-size:12px;font-weight:600;line-height:1.5}
html[data-theme=aurora-solid] .it .y:empty{display:none}

/* sidebar */
html[data-theme=aurora-solid] .side{gap:22px}
/* ads in the sidebar take the same 22px gap as the boxes (no extra margin of their own), and the first one lines up with the top of the main box */
html[data-theme=aurora-solid] .side .ad{margin:0}
html[data-theme=aurora-solid] .trend,html[data-theme=aurora-solid] .boxw .trend{--rk-fill:var(--solid)}
html[data-theme=aurora-solid] .side .blk{border-radius:calc(var(--r)*1.5);padding:6px 18px 10px}
html[data-theme=aurora-solid] .side .blk:has(>h3:only-child){background:none;border:0;box-shadow:none;padding:0 4px}
html[data-theme=aurora-solid] .blk h3{font-size:15px}
html[data-theme=aurora-solid] .blk a{border-color:var(--line)}
html[data-theme=aurora-solid] .chips a,html[data-theme=aurora-solid] .tagl a,html[data-theme=aurora-solid] .az a,html[data-theme=aurora-solid] .err .cap{background:var(--glass);border-color:var(--edge)}
html[data-theme=aurora-solid] .chips a:hover,html[data-theme=aurora-solid] .tagl a:hover,html[data-theme=aurora-solid] .az a:hover,html[data-theme=aurora-solid] .err .cap:hover{background:var(--glass-hi);border-color:color-mix(in srgb,var(--acc) 50%,var(--edge));color:var(--acc)}
html[data-theme=aurora-solid] .az{background:none}
html[data-theme=aurora-solid] .az a[aria-current=page],html[data-theme=aurora-solid] .az a[aria-current=page]:hover{background:var(--grad) border-box;border-color:transparent;color:#fff}

/* ------------------------------------------------------------------ song page */
html[data-theme=aurora-solid] .boxed .st{position:relative;overflow:hidden;isolation:isolate}
/* the song's picture, blurred and dimmed, fills the head box; a dark veil keeps the white text
   readable on any picture, light or dark */
html[data-theme=aurora-solid] .sh.has-bg .st::before{
  content:"";position:absolute;inset:-30%;z-index:-1;
  background:linear-gradient(rgba(16,12,38,.34),rgba(16,12,38,.46)),var(--art) center/cover no-repeat;
  filter:blur(56px) saturate(1.7) brightness(.82)
}
html[data-theme=aurora-solid][data-dark] .sh.has-bg .st::before{filter:blur(56px) saturate(1.6) brightness(.7)}
html[data-theme=aurora-solid] .sh.has-bg .st{border-color:rgba(255,255,255,.28)}
html[data-theme=aurora-solid] .sh.has-bg .st h1{color:#fff;text-shadow:0 1px 18px rgba(10,6,30,.28)}
html[data-theme=aurora-solid] .sh.has-bg .st .meta{color:rgba(255,255,255,.74)}
html[data-theme=aurora-solid] .sh.has-bg .st .meta a{color:#fff}
html[data-theme=aurora-solid] .sh.has-bg .st .meta a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
html[data-theme=aurora-solid] .sh.has-bg .st .meta .dot{opacity:.8}
/* buttons on the picture: frosted white with a clear white edge */
html[data-theme=aurora-solid] .sh.has-bg .acts :is(a,button):not(.p){background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.5);color:#fff}
html[data-theme=aurora-solid] .sh.has-bg .acts :is(a,button):not(.p):hover{background:rgba(255,255,255,.26);border-color:rgba(255,255,255,.85);color:#fff}
html[data-theme=aurora-solid] .has-art .st{align-items:center}
html[data-theme=aurora-solid] .has-art .st>.cv{width:176px;border-radius:calc(var(--r)*1.5);box-shadow:0 22px 50px -18px color-mix(in srgb,var(--acc) 60%,rgba(0,0,0,.5)),0 0 0 1px var(--glass-b)}
html[data-theme=aurora-solid] .st h1{font-size:36px;letter-spacing:-.04em;margin-top:0}
html[data-theme=aurora-solid] .crumb{font-weight:500}
html[data-theme=aurora-solid] .st .meta{font-size:14.5px;margin-top:14px}
/* the song head box: more room around and between the title, the two meta lines and the buttons */
html[data-theme=aurora-solid] .boxed .st{padding:40px 40px 38px}
html[data-theme=aurora-solid] .st .meta .ml+.ml{margin-top:9px}
html[data-theme=aurora-solid] .st .acts{margin-top:26px;gap:7px}
html[data-theme=aurora-solid] .st .acts :is(a,button){padding:6px 13px;font-size:12.5px;gap:6px}
html[data-theme=aurora-solid] .st .acts .ico{width:14px;height:14px}
html[data-theme=aurora-solid] .acts a,html[data-theme=aurora-solid] .acts button,html[data-theme=aurora-solid] .btn{background:var(--glass-hi);border-color:var(--btn-edge);font-weight:600}
html[data-theme=aurora-solid] .acts a:hover,html[data-theme=aurora-solid] .acts button:hover,html[data-theme=aurora-solid] .btn:hover{border-color:color-mix(in srgb,var(--acc) 60%,var(--btn-edge));color:var(--acc)}
/* gradient buttons: the gradient is laid from the outer edge (border-box), else it starts inside
   the transparent border and repeats into it, showing a sliver of the far colour at each end;
   in dark mode it is dimmed a little so the white label reads */
html[data-theme=aurora-solid] .acts .p,html[data-theme=aurora-solid] .btn.p,html[data-theme=aurora-solid] .sform button,html[data-theme=aurora-solid] .pager .cur{
  background:linear-gradient(var(--btn-dim),var(--btn-dim)) border-box,var(--grad) border-box;color:#fff;border-color:transparent;
  box-shadow:0 8px 22px -10px color-mix(in srgb,var(--acc) 65%,transparent)
}
html[data-theme=aurora-solid] .acts .p:hover,html[data-theme=aurora-solid] .btn.p:hover{color:#fff;border-color:transparent;filter:brightness(1.06) saturate(1.1)}
html[data-theme=aurora-solid] .vid{border-radius:calc(var(--r)*1.625);box-shadow:var(--glass-sh)}

/* version tabs as a segmented glass bar */
html[data-theme=aurora-solid] .boxed .lyrcard .tabs{margin:0 0 24px}
html[data-theme=aurora-solid] .tabs{gap:4px;padding:5px;border-radius:999px;background:var(--soft);border:1px solid var(--edge);align-items:center}
html[data-theme=aurora-solid] .tabs [role=tab]{border:0;margin:0;padding:8px 16px;border-radius:999px;font-weight:600}
html[data-theme=aurora-solid] .tabs [role=tab][aria-selected=true]{background:var(--card);color:var(--fg);box-shadow:0 1px 3px rgba(23,21,47,.1),0 0 0 1px var(--edge)}
html[data-theme=aurora-solid] .tools{padding:0 4px 0 0}
html[data-theme=aurora-solid] .tools button{border-radius:999px}
html[data-theme=aurora-solid] .lyr .lyrics-section-title{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800}
html[data-theme=aurora-solid] .rpanel,html[data-theme=aurora-solid] .menu,html[data-theme=aurora-solid] .sdlg .box,html[data-theme=aurora-solid] .drawer .panel,html[data-theme=aurora-solid] .lh-dlg .box{
  background:color-mix(in srgb,var(--solid) 86%,transparent);border-color:var(--glass-b);backdrop-filter:blur(26px) saturate(1.6);-webkit-backdrop-filter:blur(26px) saturate(1.6)
}
html[data-theme=aurora-solid] .sdlg .box{border-radius:calc(var(--r)*1.625)}
html[data-theme=aurora-solid] .sdlg .res a[aria-selected=true],html[data-theme=aurora-solid] .sdlg .res a:hover,html[data-theme=aurora-solid] .menu a:hover,html[data-theme=aurora-solid] .menu button:hover{background:color-mix(in srgb,var(--acc) 10%,transparent)}
/* reader panel (Text): buttons with a visible edge, the chosen size / spacing filled with the gradient */
html[data-theme=aurora-solid] .rpanel .row button{background:var(--glass-hi);border-color:var(--edge);color:var(--fg);border-radius:999px;padding:7px 0;cursor:pointer;transition:border-color .15s}
html[data-theme=aurora-solid] .rpanel .row button:hover{border-color:color-mix(in srgb,var(--acc) 50%,var(--edge))}
html[data-theme=aurora-solid] .rpanel .row button[aria-pressed=true]{background:var(--grad) border-box;border-color:transparent;color:#fff}
html[data-theme=aurora-solid] .cred th,html[data-theme=aurora-solid] .cred td,html[data-theme=aurora-solid] .faq details{border-color:var(--line)}
html[data-theme=aurora-solid] :is(.credbox,.faq){--cb-tint:color-mix(in srgb,var(--acc) 6%,transparent)}
html[data-theme=aurora-solid] .pn a{border-radius:calc(var(--r)*1.375)}
html[data-theme=aurora-solid] .pn a:hover{background:var(--glass-hi);border-color:var(--glass-b)}
html[data-theme=aurora-solid] .pn a:hover b{color:var(--acc)}

/* ------------------------------------------------------------------ archives, artists, pages */
html[data-theme=aurora-solid] .ah h1{font-size:30px;letter-spacing:-.035em}
html[data-theme=aurora-solid] .ah .bio img{box-shadow:0 0 0 4px var(--glass-b),0 18px 40px -16px color-mix(in srgb,var(--acc) 55%,transparent)}
html[data-theme=aurora-solid] .agrid a{border-radius:calc(var(--r)*1.125)}
html[data-theme=aurora-solid] .agrid a,html[data-theme=aurora-solid] .mbox .agrid a{border-color:var(--in-edge)}
html[data-theme=aurora-solid] .agrid a:hover,html[data-theme=aurora-solid] .mbox .agrid a:hover{background:var(--glass-hi);border-color:color-mix(in srgb,var(--acc) 50%,var(--in-edge));color:var(--acc)}
html[data-theme=aurora-solid] .agrid .av{background:color-mix(in srgb,var(--acc) 12%,transparent);color:var(--acc)}
html[data-theme=aurora-solid] .pager a,html[data-theme=aurora-solid] .pager span{border-radius:999px;background:var(--glass);border-color:var(--glass-b)}
html[data-theme=aurora-solid] .pager .gap{background:none}
/* form boxes: the clear button edge, so each box shows on the light glass */
html[data-theme=aurora-solid] .form input,html[data-theme=aurora-solid] .form textarea,html[data-theme=aurora-solid] .form select,html[data-theme=aurora-solid] .sform input{background:var(--glass-hi);border-color:var(--in-edge)}
html[data-theme=aurora-solid] :is(.form,.sform) :is(input,textarea,select):hover{border-color:color-mix(in srgb,var(--acc) 45%,var(--in-edge))}
html[data-theme=aurora-solid] :is(.form,.sform) :is(input,textarea,select):focus{border-color:var(--acc)}
html[data-theme=aurora-solid] .err .code{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:120px}

/* ------------------------------------------------------------------ footer */
/* no box of its own: the footer sits straight on the page box, under a hairline */
html[data-theme=aurora-solid] .ft{margin:70px 0 0;padding:44px 0 6px;background:none;border:0;border-top:1px solid var(--line);border-radius:0;box-shadow:none}
html[data-theme=aurora-solid] .ft .disc,html[data-theme=aurora-solid] .ft .bot{border-color:var(--line)}
html[data-theme=aurora-solid] .soc a{background:var(--glass-hi);border-color:var(--glass-b);border-radius:50%}
html[data-theme=aurora-solid] .soc a:hover{color:var(--acc);border-color:var(--glass-b)}
html[data-theme=aurora-solid] .totop{background:var(--glass-hi);border-color:var(--glass-b);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}

/* ------------------------------------------------------------------ smaller screens */
@media (max-width:900px){
  html[data-theme=aurora-solid] .hd .wrap{height:62px}
  html[data-theme=aurora-solid] .hero-s{padding:40px 24px 28px;border-radius:calc(var(--r)*1.625)}
  html[data-theme=aurora-solid] .hero-s h1{font-size:34px}
  html[data-theme=aurora-solid] .hero-s p{font-size:16px}
  html[data-theme=aurora-solid] .boxed .st,html[data-theme=aurora-solid] .boxed .lyrcard,html[data-theme=aurora-solid] .boxed .boxin,html[data-theme=aurora-solid] .mbox{border-radius:calc(var(--r)*1.375);padding:18px 18px}
  html[data-theme=aurora-solid] .mbox{--mpad:18px}
  html[data-theme=aurora-solid] .has-art .st{align-items:flex-start}
  html[data-theme=aurora-solid] .has-art .st>.cv{width:132px;border-radius:calc(var(--r)*1.25)}
  html[data-theme=aurora-solid] .st h1{font-size:28px}
  html[data-theme=aurora-solid] .boxed .st{padding:26px 22px 24px}
  html[data-theme=aurora-solid] .st .acts{margin-top:20px}
  html[data-theme=aurora-solid] .st .acts :is(a,button){padding:6px 11px}
  html[data-theme=aurora-solid] .ft{margin:56px 0 0;padding-top:34px}
  html[data-theme=aurora-solid]{--gap:12px}
  html[data-theme=aurora-solid] .frame{width:auto;margin:var(--gap) 10px 20px}
  html[data-theme=aurora-solid] .frame-cap{--fe:10px;--tl:10px}
  html[data-theme=aurora-solid][data-sticky] .frame .az{top:calc(var(--gap) + 63px)}
  html[data-theme=aurora-solid] .mbox .az{margin-left:-18px;margin-right:-18px;padding:8px 18px}
  html[data-theme=aurora-solid] .tabs{border-radius:calc(var(--r)*1.375)}
  html[data-theme=aurora-solid] .l-rows .y{display:none} /* the row has no year column on small screens */
  html[data-theme=aurora-solid] .l-rows .it{padding:calc(17px*var(--sp)) 0;gap:14px}
}
/* phones: the box fills the screen (no gap, edge or corners), so the strip over the gap goes too */
@media (max-width:520px){
  html[data-theme=aurora-solid]{--gap:0px}
  html[data-theme=aurora-solid] .frame{margin:0;border:0;border-radius:0;box-shadow:none}
  html[data-theme=aurora-solid] .frame-cap{display:none}
  html[data-theme=aurora-solid][data-sticky][data-scrolled] .frame .hd{border-radius:0;box-shadow:none}
  html[data-theme=aurora-solid] .frame .wrap{padding:0 16px}
  html[data-theme=aurora-solid] .hero-s .big{padding:15px 18px;margin-top:26px;font-size:14.5px}
  html[data-theme=aurora-solid] .hero-s h1{font-size:30px}
  html[data-theme=aurora-solid] .ah h1{font-size:26px}
  /* lyrics tabs: one row; many versions scroll sideways, Text and Print stay at the right end */
  html[data-theme=aurora-solid] .tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;border-radius:999px;gap:2px;padding:4px}
  html[data-theme=aurora-solid] .tabs::-webkit-scrollbar{display:none}
  html[data-theme=aurora-solid] .tabs [role=tab]{flex:none;padding:8px 12px;font-size:13.5px;white-space:nowrap}
  html[data-theme=aurora-solid] .tabs .tools{position:sticky;right:0;flex:none;gap:0;padding:0;background:var(--soft);border-radius:999px}
  html[data-theme=aurora-solid] .tabs .tools button{width:34px;height:34px;padding:0;justify-content:center}
  html[data-theme=aurora-solid] .l-cards img,html[data-theme=aurora-solid] .l-cards .ph{width:60px;height:60px;border-radius:calc(var(--r)*0.875)}
}

/* ------------------------------------------------------------------ solid insides
   The glass colours turn solid inside the box, so every panel, card and pill drawn with them is
   plain colour; the box itself is solid too, and nothing inside blurs. */
html[data-theme=aurora-solid]:not([data-dark]){--frame:#f5f4fc}
html[data-theme=aurora-solid][data-dark]{--frame:#0f0e22}
html[data-theme=aurora-solid]:not([data-dark]) .frame{
  --glass:#ffffff;--glass-hi:#ffffff;--glass-b:rgba(76,60,170,.12);--soft:#efeefa;
  --glass-sh:0 1px 2px rgba(23,21,47,.05),0 12px 30px -18px rgba(52,36,140,.2)
}
html[data-theme=aurora-solid][data-dark] .frame{
  --glass:#17162c;--glass-hi:#1e1d37;--glass-b:rgba(255,255,255,.08);--soft:#1b1a33;
  --glass-sh:0 14px 32px -18px rgba(0,0,0,.7)
}
html[data-theme=aurora-solid] .frame *{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
html[data-theme=aurora-solid][data-sticky][data-scrolled] .hd{background:var(--frame)}
html[data-theme=aurora-solid] .mbox .az{background:var(--glass)}
html[data-theme=aurora-solid] .tabs .tools{background:var(--soft)}
/* the content fills the box, so its own 20px is the only space at the sides */
html[data-theme=aurora-solid] .frame .wrap{max-width:none}