/* LyricsHub 2, Aurora Glass theme: soft colour light drifting behind frosted glass. A floating
   glass header, a gradient search hero, glass cards and panels, and the song cover tinting the
   song head. Boxed: the whole page (header, content, footer) sits in one tinted box (.frame,
   app/(site)/layout.tsx) with the colour light around it, and inside it every page's main content
   and every sidebar group has a glass panel of its own. Light and dark.
   The box has no backdrop-filter on purpose: blurring the whole page over the moving light would
   repaint on every frame, and a filter would also break the fixed buttons inside it. Loaded on top of the site stylesheet only when Aurora Glass is the
   theme (lib/themes.ts).
   Only the header, the search box and popups blur what is behind them (backdrop-filter): the
   colour light is already soft, so see-through cards look frosted without it and scroll smoothly. */

html[data-theme=aurora]: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][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]{
  --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] 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] 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][data-width=normal]{--w:1000px}
html[data-theme=aurora] .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] .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][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] .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][data-stuck] .frame-cap::after{opacity:1}
html[data-theme=aurora] .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]:not([data-sticky]) .frame-cap{display:none}
html[data-theme=aurora] .abar{position:relative;z-index:46}
html[data-theme=aurora][data-sticky] .frame .hd{top:var(--gap)}
html[data-theme=aurora][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][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] .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] body::before,html[data-theme=aurora] .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][data-scrolled] body::before,html[data-theme=aurora][data-scrolled] .frame-cap::before,
html[data-theme=aurora].lh-tool-open body::before,html[data-theme=aurora].lh-tool-open .frame-cap::before{animation-play-state:paused}
html[data-theme=aurora]:has(#lh-search.open,#lh-drawer.open,.lh-dlg) body::before,
html[data-theme=aurora]:has(#lh-search.open,#lh-drawer.open,.lh-dlg) .frame-cap::before{animation-play-state:paused}
@media (hover:none){
  html[data-theme=aurora] body::before,html[data-theme=aurora] .frame-cap::before{animation:none}
}
/* the sticky sidebar ad stops under the floating header, not behind it */
html[data-theme=aurora][data-sticky] .side .sticky{top:calc(var(--gap) + 89px)}
@media print{
  html[data-theme=aurora] .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] .hd,html[data-theme=aurora][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][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] .hd .wrap{height:76px}
html[data-theme=aurora] .hd.stack .wrap{height:auto;padding-top:20px;padding-bottom:14px}
html[data-theme=aurora] .logo i{border-radius:calc(var(--r)*0.625);background:var(--grad);color:#fff}
html[data-theme=aurora] .nav{gap:4px;font-weight:600}
html[data-theme=aurora] .nav a{padding:8px 14px;border-radius:999px}
html[data-theme=aurora] .nav a:hover{background:var(--glass-hi);color:var(--fg)}
html[data-theme=aurora] .nav a[aria-current]{background:var(--fg);color:var(--bg)}
html[data-theme=aurora] .srch{background:var(--glass-hi);border-color:var(--glass-b)}
html[data-theme=aurora] .srch kbd{background:transparent}
html[data-theme=aurora] .ib:hover{background:var(--glass-hi)}
html[data-theme=aurora] .railwrap .rail,html[data-theme=aurora] .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] .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] .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] .hero-s p{font-size:18px;margin-top:14px}
html[data-theme=aurora] .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] .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] .hero-s .big .ico{color:var(--acc)}
html[data-theme=aurora] .hero-s .hint{margin-top:18px}
html[data-theme=aurora] .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] .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] .hero-f .main,html[data-theme=aurora] .hero-f .sm{border-radius:calc(var(--r)*1.625);box-shadow:var(--glass-sh)}
html[data-theme=aurora] .hero-f .noimg{background:var(--grad)}

/* ------------------------------------------------------------------ glass panels */
html[data-theme=aurora] .l-cards .it,html[data-theme=aurora] .side .blk,html[data-theme=aurora] .boxed .st,html[data-theme=aurora] .boxed .lyrcard,
html[data-theme=aurora] .boxed .boxin,html[data-theme=aurora] .pn a,html[data-theme=aurora] .agrid a,
html[data-theme=aurora] .l-grid .it,html[data-theme=aurora] .below>.blk,html[data-theme=aurora] .below>div{
  background:var(--glass);border:1px solid var(--glass-b);box-shadow:var(--glass-sh)
}
html[data-theme=aurora] .boxed .st,html[data-theme=aurora] .boxed .lyrcard,html[data-theme=aurora] .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] .mbox,html[data-theme=aurora] .side .sgrp{background:var(--glass);border:1px solid var(--glass-b);box-shadow:var(--glass-sh)}
html[data-theme=aurora] .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] .boxed>*+*{margin-top:22px}
html[data-theme=aurora] .boxed>.ad{margin-bottom:22px}
html[data-theme=aurora] .mbox>.sec:first-child{margin-top:0}
html[data-theme=aurora] .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] .mbox>.ah:has(+.prose){position:relative;padding-bottom:22px;margin-bottom:24px}
html[data-theme=aurora] .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] .mbox>.ah+.prose>:first-child{margin-top:0}
html[data-theme=aurora] .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] .mbox :is(.l-rows,.l-list) .it:first-child{position:relative;border-top:0}
html[data-theme=aurora] .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] .mbox :is(.l-rows,.l-list):not(:has(+.pager),:has(+.pager)>*) .it:last-child{border-bottom:0;padding-bottom:0}
html[data-theme=aurora] .mbox :is(.l-rows,.l-list):is(:has(+.pager),:has(+.pager)>*) .it:last-child{position:relative;border-bottom-color:transparent}
html[data-theme=aurora] .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] .mbox .l-cards .it,html[data-theme=aurora] .mbox .l-grid .it,html[data-theme=aurora] .mbox .agrid a{background:var(--soft);box-shadow:none}
html[data-theme=aurora] .side .sgrp{border-radius:calc(var(--r)*1.5);padding:6px 18px 18px}
html[data-theme=aurora] .side .sgrp .blk{padding:0}
html[data-theme=aurora] .err .mbox{max-width:640px;margin:0 auto;padding:44px 30px}

/* sections and song cards */
html[data-theme=aurora] .sec h2{font-size:22px}
html[data-theme=aurora] .sec a{font-weight:600;color:var(--acc)}
html[data-theme=aurora] .l-cards{gap:12px}
html[data-theme=aurora] .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] .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] .l-cards img,html[data-theme=aurora] .l-cards .ph{width:68px;height:68px;border-radius:calc(var(--r)*1)}
html[data-theme=aurora] .l-cards .t{font-weight:700;font-size:15.5px}
html[data-theme=aurora] .l-cards .a{margin-top:2px}
html[data-theme=aurora] .l-grid .it{border-radius:calc(var(--r)*1.375);padding:10px 10px 14px}
html[data-theme=aurora] .l-grid img,html[data-theme=aurora] .l-grid .ph,html[data-theme=aurora] .l-grid .cv{border-radius:calc(var(--r)*0.938)}
html[data-theme=aurora] .l-grid .t,html[data-theme=aurora] .l-grid .a{padding:0 4px}
html[data-theme=aurora] .l-list .it,html[data-theme=aurora] .l-rows .it{border-color:var(--line)}
html[data-theme=aurora] .l-rows .it{padding:calc(23px*var(--sp)) 0;gap:18px}
html[data-theme=aurora] .l-list .it{padding:calc(20px*var(--sp)) 0}
html[data-theme=aurora] .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] .it .y:empty{display:none}

/* sidebar */
html[data-theme=aurora] .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] .side .ad{margin:0}
html[data-theme=aurora] .trend,html[data-theme=aurora] .boxw .trend{--rk-fill:var(--solid)}
html[data-theme=aurora] .side .blk{border-radius:calc(var(--r)*1.5);padding:6px 18px 10px}
html[data-theme=aurora] .side .blk:has(>h3:only-child){background:none;border:0;box-shadow:none;padding:0 4px}
html[data-theme=aurora] .blk h3{font-size:15px}
html[data-theme=aurora] .blk a{border-color:var(--line)}
html[data-theme=aurora] .chips a,html[data-theme=aurora] .tagl a,html[data-theme=aurora] .az a,html[data-theme=aurora] .err .cap{background:var(--glass);border-color:var(--edge)}
html[data-theme=aurora] .chips a:hover,html[data-theme=aurora] .tagl a:hover,html[data-theme=aurora] .az a:hover,html[data-theme=aurora] .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] .az{background:none}
html[data-theme=aurora] .az a[aria-current=page],html[data-theme=aurora] .az a[aria-current=page]:hover{background:var(--grad) border-box;border-color:transparent;color:#fff}

/* ------------------------------------------------------------------ song page */
html[data-theme=aurora] .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] .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][data-dark] .sh.has-bg .st::before{filter:blur(56px) saturate(1.6) brightness(.7)}
html[data-theme=aurora] .sh.has-bg .st{border-color:rgba(255,255,255,.28)}
html[data-theme=aurora] .sh.has-bg .st h1{color:#fff;text-shadow:0 1px 18px rgba(10,6,30,.28)}
html[data-theme=aurora] .sh.has-bg .st .meta{color:rgba(255,255,255,.74)}
html[data-theme=aurora] .sh.has-bg .st .meta a{color:#fff}
html[data-theme=aurora] .sh.has-bg .st .meta a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
html[data-theme=aurora] .sh.has-bg .st .meta .dot{opacity:.8}
/* buttons on the picture: frosted white with a clear white edge */
html[data-theme=aurora] .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] .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] .has-art .st{align-items:center}
html[data-theme=aurora] .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] .st h1{font-size:36px;letter-spacing:-.04em;margin-top:0}
html[data-theme=aurora] .crumb{font-weight:500}
html[data-theme=aurora] .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] .boxed .st{padding:40px 40px 38px}
html[data-theme=aurora] .st .meta .ml+.ml{margin-top:9px}
html[data-theme=aurora] .st .acts{margin-top:26px;gap:7px}
html[data-theme=aurora] .st .acts :is(a,button){padding:6px 13px;font-size:12.5px;gap:6px}
html[data-theme=aurora] .st .acts .ico{width:14px;height:14px}
html[data-theme=aurora] .acts a,html[data-theme=aurora] .acts button,html[data-theme=aurora] .btn{background:var(--glass-hi);border-color:var(--btn-edge);font-weight:600}
html[data-theme=aurora] .acts a:hover,html[data-theme=aurora] .acts button:hover,html[data-theme=aurora] .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] .acts .p,html[data-theme=aurora] .btn.p,html[data-theme=aurora] .sform button,html[data-theme=aurora] .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] .acts .p:hover,html[data-theme=aurora] .btn.p:hover{color:#fff;border-color:transparent;filter:brightness(1.06) saturate(1.1)}
html[data-theme=aurora] .vid{border-radius:calc(var(--r)*1.625);box-shadow:var(--glass-sh)}

/* version tabs as a segmented glass bar */
html[data-theme=aurora] .boxed .lyrcard .tabs{margin:0 0 24px}
html[data-theme=aurora] .tabs{gap:4px;padding:5px;border-radius:999px;background:var(--soft);border:1px solid var(--edge);align-items:center}
html[data-theme=aurora] .tabs [role=tab]{border:0;margin:0;padding:8px 16px;border-radius:999px;font-weight:600}
html[data-theme=aurora] .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] .tools{padding:0 4px 0 0}
html[data-theme=aurora] .tools button{border-radius:999px}
html[data-theme=aurora] .lyr .lyrics-section-title{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800}
html[data-theme=aurora] .rpanel,html[data-theme=aurora] .menu,html[data-theme=aurora] .sdlg .box,html[data-theme=aurora] .drawer .panel,html[data-theme=aurora] .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] .sdlg .box{border-radius:calc(var(--r)*1.625)}
html[data-theme=aurora] .sdlg .res a[aria-selected=true],html[data-theme=aurora] .sdlg .res a:hover,html[data-theme=aurora] .menu a:hover,html[data-theme=aurora] .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] .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] .rpanel .row button:hover{border-color:color-mix(in srgb,var(--acc) 50%,var(--edge))}
html[data-theme=aurora] .rpanel .row button[aria-pressed=true]{background:var(--grad) border-box;border-color:transparent;color:#fff}
html[data-theme=aurora] .cred th,html[data-theme=aurora] .cred td,html[data-theme=aurora] .faq details{border-color:var(--line)}
html[data-theme=aurora] :is(.credbox,.faq){--cb-tint:color-mix(in srgb,var(--acc) 6%,transparent)}
html[data-theme=aurora] .pn a{border-radius:calc(var(--r)*1.375)}
html[data-theme=aurora] .pn a:hover{background:var(--glass-hi);border-color:var(--glass-b)}
html[data-theme=aurora] .pn a:hover b{color:var(--acc)}

/* ------------------------------------------------------------------ archives, artists, pages */
html[data-theme=aurora] .ah h1{font-size:40px;letter-spacing:-.045em}
html[data-theme=aurora] .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] .agrid a{border-radius:calc(var(--r)*1.125)}
html[data-theme=aurora] .agrid a,html[data-theme=aurora] .mbox .agrid a{border-color:var(--in-edge)}
html[data-theme=aurora] .agrid a:hover,html[data-theme=aurora] .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] .agrid .av{background:color-mix(in srgb,var(--acc) 12%,transparent);color:var(--acc)}
html[data-theme=aurora] .pager a,html[data-theme=aurora] .pager span{border-radius:999px;background:var(--glass);border-color:var(--glass-b)}
html[data-theme=aurora] .pager .gap{background:none}
/* form boxes: the clear button edge, so each box shows on the light glass */
html[data-theme=aurora] .form input,html[data-theme=aurora] .form textarea,html[data-theme=aurora] .form select,html[data-theme=aurora] .sform input{background:var(--glass-hi);border-color:var(--in-edge)}
html[data-theme=aurora] :is(.form,.sform) :is(input,textarea,select):hover{border-color:color-mix(in srgb,var(--acc) 45%,var(--in-edge))}
html[data-theme=aurora] :is(.form,.sform) :is(input,textarea,select):focus{border-color:var(--acc)}
html[data-theme=aurora] .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] .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] .ft .disc,html[data-theme=aurora] .ft .bot{border-color:var(--line)}
html[data-theme=aurora] .soc a{background:var(--glass-hi);border-color:var(--glass-b);border-radius:50%}
html[data-theme=aurora] .soc a:hover{color:var(--acc);border-color:var(--glass-b)}
html[data-theme=aurora] .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] .hd .wrap{height:62px}
  html[data-theme=aurora] .hero-s{padding:40px 16px 26px;border-radius:calc(var(--r)*1.625)}
  html[data-theme=aurora] .hero-s h1{font-size:34px}
  html[data-theme=aurora] .hero-s p{font-size:16px}
  html[data-theme=aurora] .boxed .st,html[data-theme=aurora] .boxed .lyrcard,html[data-theme=aurora] .boxed .boxin,html[data-theme=aurora] .mbox{border-radius:calc(var(--r)*1.375);padding:18px 18px}
  html[data-theme=aurora] .mbox{--mpad:18px}
  html[data-theme=aurora] .has-art .st{align-items:flex-start}
  html[data-theme=aurora] .has-art .st>.cv{width:132px;border-radius:calc(var(--r)*1.25)}
  html[data-theme=aurora] .st h1{font-size:28px}
  html[data-theme=aurora] .boxed .st{padding:26px 22px 24px}
  html[data-theme=aurora] .st .acts{margin-top:20px}
  html[data-theme=aurora] .st .acts :is(a,button){padding:6px 11px}
  html[data-theme=aurora] .ft{margin:56px 0 0;padding-top:34px}
  html[data-theme=aurora]{--gap:12px}
  html[data-theme=aurora] .frame{width:auto;margin:var(--gap) 10px 20px}
  html[data-theme=aurora] .frame-cap{--fe:10px;--tl:10px}
  html[data-theme=aurora][data-sticky] .frame .az{top:calc(var(--gap) + 63px)}
  html[data-theme=aurora] .mbox .az{margin-left:-18px;margin-right:-18px;padding:8px 18px}
  html[data-theme=aurora] .tabs{border-radius:calc(var(--r)*1.375)}
  html[data-theme=aurora] .l-rows .y{display:none} /* the row has no year column on small screens */
  html[data-theme=aurora] .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]{--gap:0px}
  html[data-theme=aurora] .frame{margin:0;border:0;border-radius:0;box-shadow:none}
  html[data-theme=aurora] .frame-cap{display:none}
  html[data-theme=aurora][data-sticky][data-scrolled] .frame .hd{border-radius:0;box-shadow:none}
  html[data-theme=aurora] .frame .wrap{padding:0 16px}
  html[data-theme=aurora] .hero-s .big{padding:15px 18px;margin-top:26px;font-size:14.5px}
  html[data-theme=aurora] .hero-s h1{font-size:30px}
  html[data-theme=aurora] .l-cards img,html[data-theme=aurora] .l-cards .ph{width:60px;height:60px;border-radius:calc(var(--r)*0.875)}
}