:root {
  color-scheme: light;
  --bg: #f5f5f7;
  --panel: rgba(255,255,255,.94);
  --surface: #fff;
  --surface-2: #ececf1;
  --text: #17171b;
  --muted: #777780;
  --line: rgba(23,23,27,.09);
  --accent: #7857f6;
  --accent-2: #bca8ff;
  --accent-soft: color-mix(in srgb, var(--accent) 12%, transparent);
  --accent-gradient: linear-gradient(145deg, color-mix(in srgb, var(--accent) 72%, white), var(--accent) 62%, color-mix(in srgb, var(--accent) 50%, #ee6f98));
  --danger: #d74747;
  --shadow: 0 24px 70px rgba(27,20,48,.11);
  --radius-lg: 34px;
  --radius-md: 22px;
  --radius-sm: 14px;
  --sidebar: 252px;
  --player-height: 96px;
}
html[data-theme="ocean"] { --accent:#1677ff; --accent-2:#8fc4ff; }
html[data-theme="forest"] { --accent:#168a67; --accent-2:#88d7bc; }
html[data-theme="sunset"] { --accent:#ed6a3a; --accent-2:#ffb289; }
html[data-theme="rose"] { --accent:#d94d86; --accent-2:#f0a7c7; }
html[data-theme="graphite"] { --accent:#3d424d; --accent-2:#a8adb7; }

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; min-width:320px; min-height:100vh; color:var(--text);
  background:radial-gradient(circle at 80% -15%, color-mix(in srgb,var(--accent) 16%,transparent), transparent 36%), radial-gradient(circle at 5% 10%, rgba(255,214,226,.34), transparent 25%), var(--bg);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased; padding-bottom:calc(var(--player-height) + 26px);
}
button,input,textarea,select { font:inherit; }
button { color:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
[hidden] { display:none!important; }

.app-shell { min-height:100vh; }
.sidebar {
  position:fixed; inset:0 auto 0 0; width:var(--sidebar); padding:28px 22px calc(var(--player-height) + 24px);
  border-right:1px solid var(--line); background:rgba(248,248,250,.94); z-index:20; display:flex; flex-direction:column;
}
.brand,.mobile-brand { display:flex; align-items:center; gap:11px; }
.brand-mark {
  width:40px; height:40px; border-radius:13px; display:inline-grid; place-items:center; overflow:hidden;
  color:#fff; font-weight:800; font-size:17px; background:var(--accent-gradient); box-shadow:0 9px 24px color-mix(in srgb,var(--accent) 28%,transparent); flex:0 0 auto;
}
.brand-mark img { width:100%; height:100%; object-fit:contain; padding:5px; }
.brand-copy { display:flex; flex-direction:column; line-height:1.15; min-width:0; }
.brand-copy strong { font-size:15px; letter-spacing:-.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.brand-copy small { color:var(--muted); font-size:9px; letter-spacing:.12em; margin-top:4px; }
.nav-list { margin-top:38px; display:grid; gap:7px; }
.nav-item {
  width:100%; border:0; background:transparent; cursor:pointer; display:flex; align-items:center; gap:13px;
  min-height:48px; padding:0 15px; border-radius:15px; color:#696971; font-weight:650; text-align:left; transition:.18s ease;
}
.nav-item:hover { background:#fff; color:var(--text); }
.nav-item.is-active { color:var(--accent); background:var(--accent-soft); }
.nav-icon { width:22px; font-size:20px; text-align:center; }
.sidebar-bottom-public { margin-top:auto; display:grid; gap:10px; }
.sidebar-note,.donation-entry {
  padding:15px; border:1px solid var(--line); border-radius:18px; background:rgba(255,255,255,.72); color:var(--muted); font-size:12px;
}
.sidebar-note { display:flex; align-items:center; gap:9px; }
.sidebar-note p { margin:0; }
.soft-dot { width:8px; height:8px; border-radius:50%; background:#55bf85; box-shadow:0 0 0 5px rgba(85,191,133,.13); }
.donation-entry { border:0; cursor:pointer; display:flex; align-items:center; gap:10px; text-align:left; color:var(--text); }
.donation-entry>span { width:36px; height:36px; border-radius:12px; display:grid; place-items:center; color:var(--accent); background:var(--accent-soft); font-size:20px; }
.donation-entry div { display:flex; flex-direction:column; gap:2px; }
.donation-entry small { color:var(--muted); font-size:10px; }

.main-content { margin-left:var(--sidebar); padding:0 clamp(24px,5vw,82px) 60px; min-height:100vh; }
.topbar {
  height:88px; display:flex; align-items:center; justify-content:center; gap:16px; position:sticky; top:0; z-index:15;
  background:rgba(245,245,247,.97); border-bottom:1px solid rgba(23,23,27,.045);
}
.mobile-brand { display:none; }
.top-search-wrap,.large-search {
  display:flex; align-items:center; gap:10px; border:1px solid var(--line); background:#fff; box-shadow:0 9px 30px rgba(20,20,30,.045);
}
.top-search-wrap { width:min(560px,58vw); height:46px; padding:0 14px; border-radius:16px; }
.top-search-wrap span,.large-search span { color:var(--muted); font-size:20px; }
.top-search-wrap input,.large-search input { width:100%; border:0; outline:0; background:transparent; color:var(--text); }
.top-search-wrap input::placeholder,.large-search input::placeholder { color:#9a9aa2; }
kbd { border:1px solid var(--line); background:#f4f4f6; color:#96969d; border-radius:7px; padding:3px 7px; font-size:10px; }
.icon-button { border:0; background:transparent; min-width:40px; min-height:40px; border-radius:50%; cursor:pointer; display:inline-grid; place-items:center; color:#55555f; transition:.18s ease; }
.icon-button:hover { background:rgba(0,0,0,.055); color:var(--text); }
.mobile-route-strip { display:none; }

.view { display:none; animation:viewIn .3s ease both; }
.view.is-active { display:block; }
@keyframes viewIn { from{opacity:0;transform:translateY(7px)} to{opacity:1;transform:none} }

.banner-shell { position:relative; margin-top:18px; }
.banner-track { display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; border-radius:var(--radius-lg); }
.banner-track::-webkit-scrollbar { display:none; }
.banner-slide { min-width:100%; scroll-snap-align:start; }
.hero-card {
  min-height:430px; border-radius:var(--radius-lg); overflow:hidden; display:grid; grid-template-columns:1.2fr .8fr;
  background:linear-gradient(135deg,#1b1a20,#33294a); color:#fff; box-shadow:var(--shadow); position:relative;
}
.hero-copy { padding:clamp(42px,4.6vw,66px); align-self:center; position:relative; z-index:2; }
.eyebrow { margin:0 0 10px; font-size:10px; letter-spacing:.18em; font-weight:780; color:var(--accent); }
.hero-card .eyebrow { color:color-mix(in srgb,var(--accent-2) 88%,white); }
h1,h2,h3,p { text-wrap:pretty; }
.hero-card h1 { font-size:clamp(42px,4.5vw,64px); line-height:1.03; letter-spacing:-.055em; margin:0; max-width:680px; text-wrap:balance; }
.hero-card .hero-copy>p:not(.eyebrow) { color:rgba(255,255,255,.67); line-height:1.75; max-width:560px; font-size:16px; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:28px; }
.primary-button,.secondary-button,.outline-button {
  border:0; min-height:45px; padding:0 20px; border-radius:999px; cursor:pointer; font-weight:720; transition:.18s ease;
}
.primary-button { color:#fff; background:var(--accent); box-shadow:0 12px 26px color-mix(in srgb,var(--accent) 28%,transparent); }
.primary-button:hover { transform:translateY(-1px); }
.secondary-button { color:inherit; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.15); }
.dark-secondary { background:rgba(0,0,0,.055); border-color:var(--line); }
.outline-button { color:var(--accent); background:transparent; border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line)); }
.wide-button { width:100%; }
.hero-art { position:relative; min-height:360px; }
.orb { position:absolute; border-radius:50%; filter:blur(2px); }
.orb-one { width:330px; height:330px; right:-40px; top:-35px; background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--accent-2) 82%,white),var(--accent) 45%,transparent 70%); opacity:.86; }
.orb-two { width:260px; height:260px; left:0; bottom:-80px; background:radial-gradient(circle at 40% 30%,#ffb0c8,#b84f79 45%,transparent 70%); opacity:.62; }
.vinyl-disc { position:absolute; width:min(330px,72%); aspect-ratio:1; border-radius:50%; left:48%; top:52%; transform:translate(-50%,-50%) rotate(-15deg); background:repeating-radial-gradient(circle,#141418 0 12px,#222129 13px 15px,#101014 16px 27px); box-shadow:0 38px 70px rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.18); animation:slowSpin 22s linear infinite; }
.vinyl-disc::before { content:""; position:absolute; inset:31%; border-radius:50%; background:var(--accent-gradient); }
.vinyl-disc span { position:absolute; inset:47%; background:#fff; border-radius:50%; z-index:2; }
@keyframes slowSpin { to{transform:translate(-50%,-50%) rotate(345deg)} }
.editorial-banner {
  min-height:430px; border-radius:var(--radius-lg); overflow:hidden; position:relative; color:#fff; background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 55%,#17171d),#17171d); box-shadow:var(--shadow);
}
.editorial-banner.has-image { background-image:var(--banner-image); background-size:cover; background-position:center; }
.banner-overlay { position:absolute; inset:0; background:linear-gradient(90deg,rgba(12,12,17,.88) 0%,rgba(12,12,17,.58) 50%,rgba(12,12,17,.14)); }
.editorial-copy { position:relative; z-index:1; max-width:700px; padding:clamp(48px,7vw,86px); }
.editorial-copy h2 { margin:0; font-size:clamp(42px,6vw,76px); line-height:1.02; letter-spacing:-.05em; }
.editorial-copy>p:not(.eyebrow) { color:rgba(255,255,255,.75); line-height:1.7; font-size:16px; }
.banner-arrow { position:absolute; top:50%; z-index:3; transform:translateY(-50%); width:42px; height:42px; border-radius:50%; border:1px solid rgba(255,255,255,.24); background:rgba(19,19,24,.5); color:#fff; cursor:pointer; font-size:26px; }
.banner-prev { left:16px; } .banner-next { right:16px; }
.banner-dots { display:flex; justify-content:center; gap:7px; margin-top:14px; }
.banner-dots button { width:7px; height:7px; padding:0; border:0; border-radius:99px; background:#c9c9cf; cursor:pointer; transition:.2s; }
.banner-dots button.is-active { width:24px; background:var(--accent); }

.section-heading,.page-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; }
.section-heading { margin:54px 0 20px; }
.compact-heading { margin-top:44px; }
.section-heading h2,.page-heading h1 { margin:0; letter-spacing:-.04em; }
.section-heading h2 { font-size:28px; }
.page-heading { margin:30px 0; }
.page-heading h1 { font-size:clamp(40px,5vw,64px); }
.page-heading p:not(.eyebrow) { color:var(--muted); margin:8px 0 0; }
.text-button { border:0; background:transparent; cursor:pointer; color:var(--accent); font-weight:720; padding:8px 0; }
.danger-text { color:var(--danger); }

.album-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(16px,2vw,26px); }
.large-grid { grid-template-columns:repeat(5,minmax(0,1fr)); }
.album-card { min-width:0; cursor:pointer; }
.album-art-wrap { position:relative; aspect-ratio:1; overflow:hidden; border-radius:21px; background:#e5e5e8; box-shadow:0 14px 30px rgba(23,23,35,.09); }
.album-art-wrap img { width:100%; height:100%; object-fit:cover; transition:transform .4s cubic-bezier(.2,.8,.2,1); }
.album-card:hover .album-art-wrap img { transform:scale(1.035); }
.album-play-overlay { position:absolute; right:13px; bottom:13px; width:48px; height:48px; border-radius:50%; border:0; cursor:pointer; background:rgba(255,255,255,.94); color:var(--text); box-shadow:0 12px 27px rgba(0,0,0,.2); opacity:0; transform:translateY(7px); transition:.2s; }
.album-card:hover .album-play-overlay,.album-card:focus-within .album-play-overlay { opacity:1; transform:none; }
.album-card h3 { margin:13px 0 5px; font-size:16px; letter-spacing:-.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.album-card p { margin:0; color:var(--muted); font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.empty-card { grid-column:1/-1; border:1px dashed var(--line); border-radius:var(--radius-md); padding:44px; text-align:center; color:var(--muted); background:rgba(255,255,255,.62); }

.artist-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:26px 20px; }
.artist-card { text-align:center; cursor:pointer; min-width:0; }
.artist-avatar { width:100%; aspect-ratio:1; border-radius:50%; overflow:hidden; position:relative; background:var(--accent-gradient); box-shadow:0 14px 30px rgba(23,23,35,.08); }
.artist-avatar img { width:100%; height:100%; object-fit:cover; }
.artist-avatar span { position:absolute; inset:0; display:none; place-items:center; color:#fff; font-size:40px; font-weight:800; }
.artist-avatar img[src=""],.artist-avatar img:not([src]) { display:none; }
.artist-card h3 { margin:13px 0 4px; font-size:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.artist-card p { margin:0; color:var(--muted); font-size:12px; }
.compact-artists { grid-template-columns:repeat(6,minmax(0,1fr)); }
.alphabet-strip { display:flex; gap:6px; overflow-x:auto; padding-bottom:14px; margin-bottom:18px; scrollbar-width:none; }
.alphabet-strip::-webkit-scrollbar { display:none; }
.alphabet-strip button { flex:0 0 auto; min-width:34px; height:34px; padding:0 10px; border:0; border-radius:11px; background:#fff; color:var(--muted); cursor:pointer; }
.alphabet-strip button.is-active { background:var(--accent); color:#fff; }
.artist-detail-hero { display:grid; grid-template-columns:210px minmax(0,1fr); align-items:center; gap:42px; margin:20px 0 46px; }
.artist-initial { width:210px; height:210px; border-radius:50%; display:grid; place-items:center; color:#fff; font-size:82px; font-weight:850; background:var(--accent-gradient); box-shadow:var(--shadow); }
.artist-detail-hero h1 { margin:0 0 10px; font-size:clamp(48px,7vw,88px); letter-spacing:-.055em; }
.artist-detail-hero p:not(.eyebrow) { color:var(--muted); }

.surface-card { border:1px solid var(--line); background:rgba(255,255,255,.88); border-radius:var(--radius-md); overflow:hidden; }
.track-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:16px; min-height:70px; padding:9px 16px; border-bottom:1px solid var(--line); transition:.16s; }
.track-row:last-child { border-bottom:0; }
.track-row:hover { background:var(--accent-soft); }
.track-row.is-current { background:var(--accent-soft); }
.track-main { display:flex; align-items:center; min-width:0; gap:13px; }
.track-index,.track-play-button { width:34px; flex:0 0 34px; height:34px; border:0; background:transparent; border-radius:50%; color:var(--muted); cursor:pointer; display:grid; place-items:center; }
.track-row:hover .track-play-button { background:var(--accent); color:#fff; }
.track-cover { width:46px; height:46px; border-radius:11px; object-fit:cover; flex:0 0 46px; }
.track-copy { min-width:0; display:flex; flex-direction:column; gap:4px; }
.track-copy strong,.track-copy span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.track-copy strong { font-size:14px; }
.track-copy span { color:var(--muted); font-size:12px; }
.track-time { color:var(--muted); font-size:12px; font-variant-numeric:tabular-nums; }

.select-field { display:grid; gap:6px; color:var(--muted); font-size:11px; }
select {
  appearance:none; -webkit-appearance:none; min-width:150px; height:42px; border:1px solid var(--line); border-radius:13px; padding:0 42px 0 13px; outline:0; color:var(--text); background-color:#fff;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%); background-position:calc(100% - 18px) 18px,calc(100% - 13px) 18px; background-size:5px 5px,5px 5px; background-repeat:no-repeat;
}
select:focus { border-color:color-mix(in srgb,var(--accent) 45%,var(--line)); box-shadow:0 0 0 4px var(--accent-soft); }
.large-search { height:66px; border-radius:20px; padding:0 20px; max-width:860px; margin-bottom:28px; }
.large-search input { font-size:19px; }
.empty-state { min-height:300px; border:1px dashed var(--line); border-radius:var(--radius-lg); background:rgba(255,255,255,.55); display:grid; place-content:center; text-align:center; color:var(--muted); }
.empty-state h3 { margin:14px 0 0; color:var(--text); }
.empty-state p { margin:8px 0 0; }
.empty-icon { font-size:45px; opacity:.45; }

.back-button { border:0; background:transparent; color:var(--muted); cursor:pointer; padding:4px 0; margin:14px 0 22px; }
.album-detail-hero { display:grid; grid-template-columns:minmax(230px,360px) minmax(0,1fr); gap:clamp(28px,5vw,74px); align-items:end; margin-bottom:40px; }
.album-detail-hero>img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:28px; box-shadow:var(--shadow); }
.album-detail-copy h1 { font-size:clamp(42px,6vw,76px); line-height:1; letter-spacing:-.055em; margin:0; }
.artist-link { border:0; background:transparent; padding:0; margin:15px 0 0; color:var(--accent); cursor:pointer; font-size:20px; font-weight:680; }
.muted-copy { color:var(--muted); margin:8px 0 0; }
.album-description { color:#5f5f67; line-height:1.75; max-width:720px; }

.contribution-layout { display:grid; grid-template-columns:.9fr 1.1fr; gap:24px; align-items:start; }
.info-card { background:rgba(255,255,255,.9); border:1px solid var(--line); border-radius:26px; padding:28px; box-shadow:0 14px 40px rgba(20,20,30,.05); }
.info-card h2 { margin-top:0; font-size:28px; letter-spacing:-.04em; }
.contribution-guide pre { overflow-x:auto; padding:18px; border-radius:17px; background:#17171d; color:#dddce5; line-height:1.65; }
.contribution-guide ul { margin:20px 0 0; padding-left:20px; color:var(--muted); line-height:1.8; }
.public-form,.comment-form { display:grid; gap:14px; }
.public-form label,.comment-form label { display:grid; gap:7px; color:var(--muted); font-size:11px; }
.public-form input,.public-form textarea,.comment-form input,.comment-form textarea { width:100%; border:1px solid var(--line); background:#fff; border-radius:13px; padding:12px 13px; outline:0; resize:vertical; color:var(--text); }
.public-form input:focus,.public-form textarea:focus,.comment-form input:focus,.comment-form textarea:focus { border-color:color-mix(in srgb,var(--accent) 45%,var(--line)); box-shadow:0 0 0 4px var(--accent-soft); }
.folder-picker { min-height:175px; border:1.5px dashed color-mix(in srgb,var(--accent) 36%,transparent); border-radius:20px; display:grid!important; place-content:center; text-align:center; cursor:pointer; padding:20px; color:var(--accent)!important; background:var(--accent-soft); }
.folder-picker input { display:none; }
.folder-picker span { color:var(--muted); max-width:520px; line-height:1.6; margin-top:8px; }
.upload-progress { height:12px; background:#e5e5ea; border-radius:99px; position:relative; overflow:hidden; }
.upload-progress span { display:block; width:0; height:100%; background:var(--accent); transition:width .15s; }
.upload-progress b { position:absolute; right:8px; top:-23px; font-size:11px; color:var(--muted); }

.about-layout { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(280px,.6fr); gap:60px; align-items:start; padding:42px 0; }
.about-layout h1 { margin:0; font-size:clamp(48px,7vw,88px); letter-spacing:-.055em; line-height:1; }
.about-content { margin-top:30px; font-size:18px; line-height:1.9; color:#505058; max-width:820px; }
.about-signature { margin-top:34px; font-weight:720; color:var(--accent); }
.donation-card { position:sticky; top:120px; border-radius:28px; padding:28px; background:#1d1c23; color:#fff; box-shadow:var(--shadow); }
.donation-card p:not(.eyebrow) { color:rgba(255,255,255,.68); line-height:1.7; }

.site-footer { margin-top:70px; padding-top:24px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:20px; color:var(--muted); font-size:12px; }

.player-bar {
  position:fixed; left:calc(var(--sidebar) + 18px); right:18px; bottom:14px; height:var(--player-height); z-index:60;
  display:grid; grid-template-columns:minmax(210px,.85fr) minmax(360px,1.2fr) 220px; align-items:center; gap:16px; padding:12px 18px;
  border:1px solid rgba(255,255,255,.88); border-radius:28px; background:rgba(251,251,253,.96); box-shadow:0 22px 62px rgba(24,20,40,.16); transition:opacity .22s ease, transform .22s ease;
}
.player-bar.is-empty { opacity:0; transform:translateY(calc(100% + 28px)); pointer-events:none; }
.now-playing-summary { border:0; background:transparent; display:flex; align-items:center; min-width:0; gap:12px; cursor:pointer; text-align:left; }
.now-playing-summary img { width:62px; height:62px; border-radius:15px; object-fit:cover; flex:0 0 auto; }
.mini-copy { min-width:0; display:flex; flex-direction:column; gap:4px; }
.mini-copy strong,.mini-copy small { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mini-copy small { color:var(--muted); }
.desktop-controls { display:grid; gap:7px; }
.transport-row { display:flex; justify-content:center; align-items:center; gap:12px; }
.control-button { border:0; background:transparent; cursor:pointer; min-width:38px; height:38px; border-radius:50%; display:grid; place-items:center; color:#575761; }
.control-button:hover,.control-button.is-active { background:var(--accent-soft); color:var(--accent); }
.play-button { width:48px; height:48px; border:0; border-radius:50%; cursor:pointer; display:grid; place-items:center; background:#17171b; color:#fff; box-shadow:0 8px 20px rgba(0,0,0,.18); }
.small-control { font-size:13px; }
.progress-row { display:grid; grid-template-columns:38px minmax(0,1fr) 38px; align-items:center; gap:9px; color:var(--muted); font-size:10px; }
input[type="range"] { appearance:none; height:4px; border-radius:99px; background:linear-gradient(to right,var(--accent) var(--range-progress,0%),#d9d9de var(--range-progress,0%)); outline:0; }
input[type="range"]::-webkit-slider-thumb { appearance:none; width:14px; height:14px; border-radius:50%; background:#fff; border:2px solid var(--accent); box-shadow:0 2px 7px rgba(0,0,0,.18); cursor:pointer; }
input[type="range"]::-moz-range-thumb { width:14px; height:14px; border-radius:50%; background:#fff; border:2px solid var(--accent); cursor:pointer; }
.player-actions { display:flex; justify-content:flex-end; align-items:center; gap:7px; }
.volume-wrap { display:flex; align-items:center; width:135px; }
.volume-wrap input { width:90px; }
.mobile-player-controls,.mobile-progress { display:none; }

.now-playing-panel,.queue-drawer,.comments-drawer { position:fixed; inset:0; z-index:80; visibility:hidden; pointer-events:none; }
.now-playing-panel.is-open,.queue-drawer.is-open,.comments-drawer.is-open { visibility:visible; pointer-events:auto; }
.panel-backdrop { position:absolute; inset:0; background:rgba(17,16,22,.48); opacity:0; transition:.25s; }
.is-open>.panel-backdrop { opacity:1; }
.now-playing-sheet { position:absolute; inset:24px; border-radius:34px; overflow:hidden; background:var(--bg); box-shadow:0 30px 100px rgba(0,0,0,.3); transform:translateY(30px) scale(.985); opacity:0; transition:.32s cubic-bezier(.2,.8,.2,1); }
.is-open .now-playing-sheet { transform:none; opacity:1; }
.sheet-header { height:68px; padding:0 22px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); background:rgba(250,250,252,.98); }
.sheet-header>div { display:flex; flex-direction:column; align-items:center; gap:2px; }
.sheet-header small { color:var(--muted); }
.now-playing-scroll { height:calc(100% - 68px); overflow-y:auto; }
.now-playing-layout { min-height:calc(100vh - 116px); display:grid; grid-template-columns:minmax(380px,.86fr) minmax(400px,1.14fr); }
.now-playing-left { padding:clamp(28px,4vw,54px); display:flex; flex-direction:column; align-items:center; justify-content:center; }
.cover-stage { width:min(46vh,460px); aspect-ratio:1; padding:0; border:0; border-radius:30px; overflow:hidden; position:relative; cursor:pointer; box-shadow:0 28px 65px rgba(31,26,48,.2); background:#ddd; }
.cover-stage img { width:100%; height:100%; object-fit:cover; }
.cover-stage span { position:absolute; left:50%; bottom:18px; transform:translateX(-50%) translateY(8px); opacity:0; white-space:nowrap; padding:8px 12px; border-radius:999px; color:#fff; background:rgba(15,15,20,.62); font-size:11px; transition:.2s; }
.cover-stage:hover span { opacity:1; transform:translateX(-50%); }
.song-title-block { width:min(46vh,460px); margin-top:24px; }
.song-title-block h2 { margin:0; font-size:32px; letter-spacing:-.04em; }
.song-title-block p { margin:7px 0 0; color:var(--muted); font-size:17px; }
.sheet-progress-row { width:min(46vh,460px); margin-top:24px; }
.sheet-progress-row input { width:100%; }
.sheet-progress-row>div { display:flex; justify-content:space-between; color:var(--muted); font-size:10px; margin-top:8px; }
.sheet-transport { margin-top:18px; display:grid; grid-template-columns:46px 58px 76px 58px 46px; align-items:center; gap:8px; }
.large-control { font-size:18px; }
.large-play { width:68px; height:68px; font-size:20px; }
.sheet-volume { width:min(46vh,460px); display:grid; grid-template-columns:38px 1fr; gap:10px; align-items:center; margin-top:19px; color:var(--muted); font-size:11px; }
.comment-toggle { margin-top:22px; min-height:43px; padding:0 18px; border:1px solid var(--line); border-radius:999px; background:#fff; cursor:pointer; font-weight:700; }
.comment-toggle span { color:var(--accent); }
.lyrics-column { border-left:1px solid var(--line); padding:44px clamp(28px,4vw,60px); min-width:0; display:flex; flex-direction:column; }
.lyrics-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; }
.lyrics-heading h3 { margin:0; font-size:28px; }
.lyrics-heading>div:last-child { display:flex; align-items:center; gap:10px; color:var(--muted); font-size:11px; }
.lyrics-back { display:none; border:0; background:var(--accent-soft); color:var(--accent); border-radius:999px; padding:7px 10px; cursor:pointer; }
.lyrics-scroller { flex:1; min-height:420px; overflow-y:auto; padding:30vh 0; scrollbar-width:none; }
.lyrics-scroller::-webkit-scrollbar { display:none; }
.lyric-line { margin:0 0 22px; color:rgba(23,23,27,.24); font-size:clamp(24px,2.35vw,38px); line-height:1.28; font-weight:720; cursor:pointer; transition:.22s; transform-origin:left; }
.lyric-line:hover { color:rgba(23,23,27,.6); }
.lyric-line.is-active { color:var(--text); transform:scale(1.025); }
.lyric-line.is-past { color:rgba(23,23,27,.16); }
.lyrics-placeholder { color:var(--muted); font-size:18px; line-height:1.7; }
.lyrics-column>.outline-button { align-self:flex-start; }
.inline-comments { border-top:1px solid var(--line); padding:50px clamp(28px,6vw,90px) 90px; background:rgba(255,255,255,.62); }
.inline-section-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; }
.inline-section-heading h2 { margin:0; font-size:34px; letter-spacing:-.04em; }
.inline-section-heading>span { color:var(--muted); font-size:12px; }
.inline-comment-form { max-width:900px; margin-top:24px; padding:22px; border:1px solid var(--line); border-radius:22px; background:#fff; }
.form-two { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.comment-form-footer { display:flex; align-items:center; justify-content:space-between; color:var(--muted); font-size:11px; }
.honeypot { position:absolute!important; left:-10000px!important; width:1px!important; height:1px!important; }
.inline-comments-list { max-width:900px; margin-top:16px; overflow:visible; }
.comment-card { padding:18px 0; border-bottom:1px solid var(--line); }
.comment-meta { display:flex; justify-content:space-between; gap:12px; font-size:11px; color:var(--muted); }
.comment-meta strong { color:var(--text); font-size:12px; }
.comment-meta em { color:var(--muted); font-style:normal; font-weight:500; }
.comment-card p { margin:9px 0 0; line-height:1.65; font-size:14px; white-space:pre-wrap; }

.drawer-sheet { position:absolute; top:0; right:0; bottom:0; width:min(480px,94vw); background:rgba(250,250,252,.99); box-shadow:-25px 0 75px rgba(0,0,0,.18); transform:translateX(100%); transition:.32s cubic-bezier(.2,.8,.2,1); padding:28px; display:flex; flex-direction:column; }
.is-open .drawer-sheet { transform:none; }
.drawer-header { display:flex; align-items:center; justify-content:space-between; padding-bottom:18px; border-bottom:1px solid var(--line); }
.drawer-header h2 { margin:0; letter-spacing:-.04em; }
.drawer-intro { color:var(--muted); line-height:1.7; font-size:13px; }
.queue-tools { display:flex; justify-content:space-between; align-items:center; padding:16px 0 4px; color:var(--muted); font-size:12px; }
.queue-tip { color:var(--muted); font-size:11px; margin:5px 0 10px; }
.queue-list { overflow-y:auto; flex:1; }
.queue-item { display:grid; grid-template-columns:28px 45px minmax(0,1fr) 52px 34px; gap:9px; align-items:center; padding:9px 0; border-bottom:1px solid var(--line); }
.queue-item.is-dragging { opacity:.45; }
.queue-handle { border:0; background:transparent; color:#a0a0a8; cursor:grab; letter-spacing:-3px; }
.queue-item img { width:45px; height:45px; border-radius:10px; object-fit:cover; }
.queue-item-copy { min-width:0; display:flex; flex-direction:column; gap:3px; cursor:pointer; }
.queue-item-copy strong,.queue-item-copy small { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.queue-item-copy strong { font-size:13px; }
.queue-item-copy small { color:var(--muted); }
.queue-item.is-current strong { color:var(--accent); }
.queue-order-buttons { display:flex; gap:2px; }
.queue-order-buttons button,.queue-remove { border:0; background:transparent; color:var(--muted); cursor:pointer; min-width:25px; min-height:32px; border-radius:9px; }
.queue-order-buttons button:hover,.queue-remove:hover { background:var(--accent-soft); color:var(--accent); }
.comments-sheet { width:min(620px,94vw); overflow-y:auto; }
.comments-sheet .comment-form { margin-top:16px; }

.public-dialog { width:min(430px,calc(100vw - 30px)); border:0; border-radius:28px; padding:0; box-shadow:0 30px 100px rgba(0,0,0,.28); }
.public-dialog::backdrop { background:rgba(15,14,20,.5); backdrop-filter:blur(6px); }
.public-dialog form { position:relative; padding:30px; text-align:center; }
.public-dialog h2 { margin:0; font-size:28px; }
.public-dialog p:not(.eyebrow) { color:var(--muted); line-height:1.6; }
.public-dialog img { width:min(280px,80vw); aspect-ratio:1; object-fit:contain; margin:20px auto; border-radius:20px; background:#fff; border:1px solid var(--line); }
.public-dialog small { color:var(--muted); line-height:1.5; }
.dialog-x { position:absolute; top:16px; right:16px; width:36px; height:36px; border:0; border-radius:50%; background:#f0f0f3; cursor:pointer; }

.toast { position:fixed; left:50%; bottom:calc(var(--player-height) + 35px); transform:translate(-50%,14px); z-index:120; background:rgba(28,28,32,.94); color:#fff; border-radius:999px; padding:11px 18px; box-shadow:0 12px 32px rgba(0,0,0,.22); font-size:13px; opacity:0; pointer-events:none; transition:.22s; }
.toast.is-visible { opacity:1; transform:translate(-50%,0); }

@media (max-width:1280px) {
  .large-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .album-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .artist-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .compact-artists { grid-template-columns:repeat(5,minmax(0,1fr)); }
  .player-bar { grid-template-columns:minmax(180px,.85fr) minmax(320px,1.2fr) 170px; }
  .volume-wrap input { width:70px; }
}

@media (max-width:980px) {
  :root { --sidebar:82px; }
  .sidebar { padding-inline:14px; align-items:center; }
  .brand-copy,.nav-item span:last-child,.sidebar-note,.donation-entry div { display:none; }
  .nav-item { width:50px; padding:0; justify-content:center; }
  .donation-entry { padding:7px; }
  .main-content { padding-inline:4vw; }
  .hero-card { grid-template-columns:1fr; min-height:570px; }
  .hero-copy { padding-bottom:18px; }
  .hero-art { min-height:240px; }
  .vinyl-disc { width:240px; }
  .artist-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .now-playing-layout { grid-template-columns:minmax(330px,.85fr) 1.15fr; }
  .cover-stage,.song-title-block,.sheet-progress-row,.sheet-volume { width:min(40vh,340px); }
  .player-bar { grid-template-columns:minmax(160px,.9fr) minmax(300px,1.2fr) 110px; }
  .player-actions .volume-wrap input { display:none; }
  .contribution-layout { grid-template-columns:1fr; }
}

@media (max-width:860px) {
  :root { --sidebar:0px; }
  .sidebar { display:none; }
  .main-content { margin-left:0; padding:0 20px 48px; }
  .topbar { height:72px; justify-content:space-between; gap:10px; }
  .mobile-brand { display:flex; flex:0 0 auto; }
  .mobile-brand strong { display:none; }
  .mobile-brand .brand-mark { width:36px; height:36px; border-radius:12px; }
  .top-search-wrap { width:100%; height:42px; }
  .top-search-wrap kbd { display:none; }
  #openQueueTop { display:none; }
  .mobile-route-strip { display:flex; position:sticky; top:72px; z-index:14; gap:6px; overflow-x:auto; margin:0 -20px 18px; padding:9px 20px; background:rgba(245,245,247,.97); border-bottom:1px solid var(--line); scrollbar-width:none; }
  .mobile-route-strip::-webkit-scrollbar { display:none; }
  .mobile-route-strip button { flex:0 0 auto; border:0; background:#fff; color:var(--muted); border-radius:999px; padding:9px 14px; cursor:pointer; font-size:12px; font-weight:650; }
  .mobile-route-strip button.is-active { background:var(--accent); color:#fff; }
  .player-bar { left:10px; }
  .about-layout { grid-template-columns:1fr; gap:28px; }
  .donation-card { position:static; }
}

@media (max-width:720px) {
  :root { --player-height:72px; }
  body { padding-bottom:calc(var(--player-height) + 18px); }
  .main-content { padding-inline:14px; }
  .mobile-route-strip { margin-inline:-14px; padding-inline:14px; }
  .banner-shell { margin-top:8px; }
  .hero-card,.editorial-banner { min-height:570px; border-radius:27px; }
  .hero-copy { padding:34px 26px 0; }
  .hero-card h1 { font-size:46px; }
  .hero-card .hero-copy>p:not(.eyebrow) { font-size:14px; }
  .hero-art { min-height:255px; }
  .orb-one { width:250px; height:250px; }
  .vinyl-disc { width:230px; }
  .editorial-copy { padding:42px 28px; }
  .editorial-copy h2 { font-size:46px; }
  .banner-arrow { display:none; }
  .section-heading { margin-top:40px; }
  .section-heading h2 { font-size:24px; }
  .album-grid,.large-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:19px 13px; }
  .artist-grid,.compact-artists { grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 14px; }
  .album-art-wrap { border-radius:17px; }
  .album-play-overlay { opacity:1; transform:none; width:42px; height:42px; }
  .track-row { min-height:64px; padding-inline:11px; }
  .track-cover { width:43px; height:43px; flex-basis:43px; }
  .track-time { display:none; }
  .page-heading { align-items:flex-start; flex-direction:column; }
  .page-heading h1 { font-size:44px; }
  .select-field,.select-field select { width:100%; }
  .album-detail-hero { grid-template-columns:1fr; gap:28px; align-items:start; }
  .album-detail-hero>img { max-width:82vw; margin:auto; }
  .album-detail-copy h1 { font-size:49px; }
  .artist-detail-hero { grid-template-columns:1fr; gap:24px; }
  .artist-initial { width:160px; height:160px; font-size:62px; }
  .artist-detail-hero h1 { font-size:52px; }
  .site-footer { flex-direction:column; }
  .form-two { grid-template-columns:1fr; }

  .player-bar { left:10px; right:10px; bottom:9px; height:var(--player-height); padding:8px 11px; border-radius:20px; grid-template-columns:minmax(0,1fr) auto; gap:8px; }
  .now-playing-summary img { width:52px; height:52px; border-radius:12px; }
  .mini-copy strong { font-size:13px; }
  .mini-copy small { font-size:11px; }
  .desktop-controls,.player-actions { display:none; }
  .mobile-player-controls { display:flex; align-items:center; }
  .compact-play { width:39px; height:39px; }
  .mobile-progress { display:block; position:absolute; left:20px; right:20px; bottom:0; height:2px; background:rgba(0,0,0,.08); overflow:hidden; border-radius:99px; }
  .mobile-progress::after { content:""; display:block; height:100%; width:var(--mobile-progress,0%); background:var(--accent); }

  .now-playing-sheet { inset:0; border-radius:0; }
  .sheet-header { height:64px; padding:0 13px; }
  .now-playing-scroll { height:calc(100% - 64px); }
  .now-playing-layout { min-height:calc(100vh - 64px); display:block; }
  .now-playing-left { min-height:calc(100vh - 64px); padding:24px 26px 30px; justify-content:flex-start; }
  .cover-stage { width:min(82vw,390px); margin-top:3vh; border-radius:25px; flex:none; }
  .song-title-block,.sheet-progress-row,.sheet-volume { width:100%; }
  .song-title-block { margin-top:28px; }
  .song-title-block h2 { font-size:29px; }
  .sheet-progress-row { margin-top:25px; }
  .sheet-transport { margin-top:19px; grid-template-columns:43px 52px 68px 52px 43px; }
  .large-play { width:61px; height:61px; }
  .lyrics-column { display:none; min-height:calc(100vh - 64px); border:0; padding:30px 25px; }
  .now-playing-sheet.is-lyrics-focus .now-playing-left { display:none; }
  .now-playing-sheet.is-lyrics-focus .lyrics-column { display:flex; }
  .lyrics-back { display:inline-block; }
  .lyrics-scroller { min-height:70vh; padding:27vh 0; }
  .lyric-line { font-size:28px; margin-bottom:22px; }
  .inline-comments { padding:42px 22px 80px; }
  .inline-section-heading { align-items:flex-start; flex-direction:column; }
  .inline-section-heading h2 { font-size:29px; }
  .toast { bottom:calc(var(--player-height) + 25px); max-width:86vw; text-align:center; }
  .queue-item { grid-template-columns:24px 42px minmax(0,1fr) 50px 30px; }
}

@media (max-width:420px) {
  .hero-card h1,.editorial-copy h2 { font-size:40px; }
  .hero-copy { padding-inline:22px; }
  .album-grid,.large-grid { gap-inline:11px; }
  .album-card p { font-size:12px; }
  .track-index,.track-play-button { width:28px; flex-basis:28px; }
  .cover-stage { width:84vw; }
  .queue-order-buttons { display:none; }
  .queue-item { grid-template-columns:22px 42px minmax(0,1fr) 30px; }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; transition-duration:.01ms!important; }
}

/* v1.2.0 editorial refinement */
body {
  font-family:Inter,"SF Pro Text","Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  letter-spacing:-.006em;
  background:
    linear-gradient(rgba(255,255,255,.32),rgba(255,255,255,.32)),
    radial-gradient(circle at 78% -10%,color-mix(in srgb,var(--accent) 18%,transparent),transparent 35%),
    radial-gradient(circle at 4% 20%,rgba(188,140,171,.22),transparent 24%),
    repeating-linear-gradient(90deg,rgba(25,23,35,.018) 0 1px,transparent 1px 88px),
    var(--bg);
}
body::before {
  content:""; position:fixed; inset:0; pointer-events:none; z-index:-1; opacity:.22;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E");
}
button,.primary-button,.secondary-button,.outline-button,.text-button,.back-button {
  display:inline-flex; align-items:center; justify-content:center; text-align:center; line-height:1.15;
}
.primary-button,.secondary-button,.outline-button { padding-top:1px; }
.surface-card,.info-card,.donation-card,.article-paper { background:rgba(255,255,255,.78); backdrop-filter:blur(18px); }
.nav-icon { width:22px; height:22px; display:grid; place-items:center; }
.nav-icon svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.nav-item:hover .nav-icon { transform:translateY(-1px); }
.nav-icon,.nav-item { transition:transform .2s ease,background .2s ease,color .2s ease; }

.topbar { justify-content:space-between; padding-inline:0; }
.top-search-wrap { flex:1; max-width:620px; margin-inline:auto; }
#openQueueTop { flex:0 0 46px; }
.banner-shell,.section-heading,.album-grid,.track-list,.page-heading,.artist-grid,.alphabet-strip,.site-footer,.about-layout,.contribution-layout,.article-view>.back-button,.article-paper { max-width:1240px; margin-left:auto; margin-right:auto; }

.intro-slide {
  background-image:linear-gradient(90deg,rgba(17,15,24,.94) 0%,rgba(20,17,29,.83) 52%,rgba(20,17,29,.2) 100%),var(--banner-image);
  background-size:cover; background-position:center; grid-template-columns:minmax(0,1fr) minmax(250px,.65fr);
}
.hero-copy { max-width:800px; }
.hero-card h1 { font-weight:760; }
.hero-signal { position:relative; min-height:100%; overflow:hidden; }
.hero-signal::before { content:""; position:absolute; width:min(31vw,390px); aspect-ratio:1; border-radius:50%; right:7%; top:50%; transform:translateY(-50%); border:1px solid rgba(255,255,255,.14); box-shadow:inset 0 0 0 35px rgba(10,9,15,.5),inset 0 0 0 70px rgba(10,9,15,.35),0 30px 80px rgba(0,0,0,.35); background:radial-gradient(circle,var(--accent) 0 15%,#111017 16% 100%); }
.hero-signal span { position:absolute; bottom:22%; width:3px; border-radius:99px; background:rgba(255,255,255,.48); animation:signal 1.8s ease-in-out infinite; }
.hero-signal span:nth-child(1){left:12%;height:45px}.hero-signal span:nth-child(2){left:17%;height:82px;animation-delay:.15s}.hero-signal span:nth-child(3){left:22%;height:58px;animation-delay:.3s}.hero-signal span:nth-child(4){left:27%;height:105px;animation-delay:.45s}.hero-signal span:nth-child(5){left:32%;height:68px;animation-delay:.6s}
@keyframes signal { 0%,100%{transform:scaleY(.55);opacity:.35}50%{transform:scaleY(1);opacity:.9} }
.editorial-banner { background-color:#1b1825; }
.editorial-copy { max-width:760px; }
.editorial-copy h2 { font-weight:760; }
.banner-arrow { display:grid; place-items:center; line-height:1; padding-bottom:3px; backdrop-filter:blur(12px); transition:.2s ease; }
.banner-arrow:hover { transform:translateY(-50%) scale(1.06); background:rgba(19,19,24,.72); }

.article-view { padding-top:18px; }
.article-paper { max-width:900px; padding:clamp(34px,6vw,78px); border:1px solid var(--line); border-radius:32px; box-shadow:var(--shadow); position:relative; overflow:hidden; }
.article-paper::before { content:""; position:absolute; inset:0 0 auto; height:6px; background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 40%,#d8679f)); }
.article-kicker { display:flex; align-items:center; justify-content:space-between; gap:20px; color:var(--muted); }
.article-paper h1 { margin:18px 0 18px; font-size:clamp(42px,6vw,76px); line-height:1.06; letter-spacing:-.055em; }
.article-lead { margin:0 0 42px; color:#66636f; font-size:clamp(18px,2vw,23px); line-height:1.75; border-left:3px solid var(--accent); padding-left:20px; }
.article-body { font-family:"Noto Serif SC","Songti SC",STSong,serif; font-size:18px; line-height:2; color:#34323b; }
.article-body p { margin:0 0 1.55em; }

.track-contributors { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:14px; }
.track-contributors>span { color:var(--muted); font-size:11px; letter-spacing:.08em; }
.track-contributors b { display:inline-flex; align-items:center; gap:7px; padding:7px 10px; border-radius:999px; background:var(--accent-soft); color:var(--accent); font-size:12px; font-weight:700; }
.track-contributors small { color:var(--muted); font-weight:550; }
.inline-section-heading>div>p:not(.eyebrow) { color:var(--muted); margin:8px 0 0; line-height:1.65; max-width:640px; }
.compact-action { min-height:42px; white-space:nowrap; }
.compact-composer { max-width:540px; }

.cover-stage { perspective:1000px; transform-style:preserve-3d; }
.cover-stage img { transition:transform .48s cubic-bezier(.2,.75,.2,1),filter .35s ease,opacity .3s ease; backface-visibility:hidden; }
.now-playing-sheet.is-cover-transition .cover-stage img { transform:rotateY(72deg) scale(.94); filter:blur(4px); opacity:.4; }
.now-playing-sheet.is-lyrics-focus .lyrics-column { animation:lyricsReveal .48s cubic-bezier(.2,.75,.2,1) both; }
@keyframes lyricsReveal { from{opacity:0;transform:translateX(26px) scale(.985)}to{opacity:1;transform:none} }

/* Fully custom dropdowns */
.aurora-select { position:relative; min-width:180px; }
.aurora-native-select { position:absolute!important; width:1px!important; height:1px!important; opacity:0!important; pointer-events:none!important; }
.aurora-select-trigger { width:100%; min-height:46px; padding:0 14px 0 16px; border:1px solid var(--line); border-radius:15px; background:rgba(255,255,255,.9); color:var(--text); cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:12px; box-shadow:0 8px 24px rgba(24,20,39,.045); }
.aurora-select-trigger svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; transition:transform .22s ease; }
.aurora-select.is-open .aurora-select-trigger { border-color:color-mix(in srgb,var(--accent) 55%,var(--line)); box-shadow:0 0 0 4px var(--accent-soft),0 14px 34px rgba(24,20,39,.08); }
.aurora-select.is-open .aurora-select-trigger>svg { transform:rotate(180deg); }
.aurora-select-menu { position:absolute; z-index:90; left:0; right:0; top:calc(100% + 8px); padding:7px; border:1px solid var(--line); border-radius:17px; background:rgba(255,255,255,.97); box-shadow:0 24px 70px rgba(26,22,39,.17); backdrop-filter:blur(22px); opacity:0; visibility:hidden; transform:translateY(-8px) scale(.98); transform-origin:top; transition:.18s ease; max-height:280px; overflow:auto; }
.aurora-select.is-open .aurora-select-menu { opacity:1; visibility:visible; transform:none; }
.aurora-select-menu button { width:100%; min-height:40px; padding:0 11px; border:0; border-radius:11px; background:transparent; display:flex; align-items:center; justify-content:space-between; text-align:left; cursor:pointer; }
.aurora-select-menu button:hover { background:var(--accent-soft); color:var(--accent); }
.aurora-select-menu button.is-selected { color:var(--accent); font-weight:720; }
.aurora-select-menu svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; opacity:0; }
.aurora-select-menu button.is-selected svg { opacity:1; }
.select-field .aurora-select { min-width:220px; margin-top:7px; }

@media (max-width:980px) {
  .intro-slide { grid-template-columns:1fr; }
  .hero-signal { min-height:220px; }
  .hero-signal::before { width:260px; right:12%; }
}
@media (max-width:720px) {
  .intro-slide { background-position:62% center; }
  .hero-signal { min-height:290px; }
  .hero-signal::before { width:250px; right:50%; transform:translate(50%,-46%); }
  .hero-signal span { bottom:7%; }
  .article-paper { padding:34px 24px; border-radius:25px; }
  .article-paper h1 { font-size:43px; }
  .article-body { font-size:17px; line-height:1.9; }
  .inline-section-heading { gap:22px; }
  .compact-action { width:100%; }
  .aurora-select,.select-field .aurora-select { width:100%; min-width:0; }
}

/* v1.2.0 final interaction audit */
.editorial-banner[data-open-article] { cursor:pointer; }
.editorial-banner[data-open-article]:focus-visible { outline:3px solid color-mix(in srgb,var(--accent) 72%,white); outline-offset:-7px; }
.editorial-banner[data-open-article] .editorial-copy { transition:transform .28s cubic-bezier(.2,.75,.2,1); }
.editorial-banner[data-open-article]:hover .editorial-copy { transform:translateY(-3px); }
.aurora-select.opens-up .aurora-select-menu { top:auto; bottom:calc(100% + 8px); transform-origin:bottom; transform:translateY(8px) scale(.98); }
.aurora-select.opens-up.is-open .aurora-select-menu { transform:none; }
.aurora-select.is-disabled { opacity:.56; pointer-events:none; }
.aurora-select-menu button:focus-visible { outline:0; background:var(--accent-soft); color:var(--accent); box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--accent) 35%,transparent); }
.topbar { max-width:1240px; width:100%; margin-inline:auto; }
@media (prefers-reduced-motion:reduce) {
  .hero-signal span,.now-playing-sheet.is-lyrics-focus .lyrics-column { animation:none!important; }
  .cover-stage img,.editorial-copy,.aurora-select-menu,.aurora-select-trigger svg { transition:none!important; }
}

/* v1.2.0 final interaction audit */
.editorial-banner[data-open-article] { cursor:pointer; }
.editorial-banner[data-open-article]:focus-visible { outline:3px solid color-mix(in srgb,var(--accent) 72%,white); outline-offset:-7px; }
.editorial-banner[data-open-article] .editorial-copy { transition:transform .28s cubic-bezier(.2,.75,.2,1); }
.editorial-banner[data-open-article]:hover .editorial-copy { transform:translateY(-3px); }
.aurora-select.opens-up .aurora-select-menu { top:auto; bottom:calc(100% + 8px); transform-origin:bottom; transform:translateY(8px) scale(.98); }
.aurora-select.opens-up.is-open .aurora-select-menu { transform:none; }
.aurora-select.is-disabled { opacity:.56; pointer-events:none; }
.aurora-select-menu button:focus-visible { outline:0; background:var(--accent-soft); color:var(--accent); box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--accent) 35%,transparent); }
.topbar { max-width:1240px; width:100%; margin-inline:auto; }
@media (prefers-reduced-motion:reduce) {
  .hero-signal span,.now-playing-sheet.is-lyrics-focus .lyrics-column { animation:none!important; }
  .cover-stage img,.editorial-copy,.aurora-select-menu,.aurora-select-trigger svg { transition:none!important; }
}

/* v1.3.0 layout, dark mode and collaboration audit */
html[data-theme="indigo"] { --accent:#4f46e5; --accent-2:#a5b4fc; }
html[data-theme="cyan"] { --accent:#0f8fa6; --accent-2:#8edbe5; }
html[data-theme="amber"] { --accent:#b7791f; --accent-2:#f1c97a; }
html[data-theme="burgundy"] { --accent:#a52d46; --accent-2:#e79aaa; }
html[data-theme="moss"] { --accent:#5f7f52; --accent-2:#b4c9a7; }
html[data-theme="sand"] { --accent:#9a6845; --accent-2:#d9b79d; }

html[data-color-mode="dark"] {
  color-scheme:dark;
  --bg:#111216;
  --panel:rgba(24,25,31,.95);
  --surface:#1b1d23;
  --surface-2:#252831;
  --text:#f4f4f7;
  --muted:#a4a6b0;
  --line:rgba(255,255,255,.1);
  --shadow:0 26px 80px rgba(0,0,0,.34);
}
html[data-color-mode="dark"] body {
  background:radial-gradient(circle at 82% -12%,color-mix(in srgb,var(--accent) 20%,transparent),transparent 38%),radial-gradient(circle at 8% 12%,rgba(104,70,92,.25),transparent 27%),#111216;
}
html[data-color-mode="dark"] .sidebar { background:rgba(18,19,24,.95); }
html[data-color-mode="dark"] .topbar,
html[data-color-mode="dark"] .sheet-header { background:rgba(17,18,22,.94); }
html[data-color-mode="dark"] .top-search-wrap,
html[data-color-mode="dark"] .large-search,
html[data-color-mode="dark"] .surface-card,
html[data-color-mode="dark"] .info-card,
html[data-color-mode="dark"] .article-paper,
html[data-color-mode="dark"] .sidebar-note,
html[data-color-mode="dark"] .donation-entry,
html[data-color-mode="dark"] .alphabet-strip button,
html[data-color-mode="dark"] .aurora-select-trigger,
html[data-color-mode="dark"] .aurora-select-menu,
html[data-color-mode="dark"] .public-form input,
html[data-color-mode="dark"] .public-form textarea,
html[data-color-mode="dark"] .comment-form input,
html[data-color-mode="dark"] .comment-form textarea { background:rgba(28,30,37,.94); color:var(--text); }
html[data-color-mode="dark"] .player-bar { background:rgba(24,26,32,.96); border-color:rgba(255,255,255,.08); }
html[data-color-mode="dark"] .now-playing-sheet,
html[data-color-mode="dark"] .drawer-sheet { background:#15161b; }
html[data-color-mode="dark"] .nav-item:hover,
html[data-color-mode="dark"] .mobile-route-strip button { background:#1c1e25; }
html[data-color-mode="dark"] .article-body,
html[data-color-mode="dark"] .about-content,
html[data-color-mode="dark"] .album-description { color:#c8c9d0; }
html[data-color-mode="dark"] input[type="range"] { background:linear-gradient(to right,var(--accent) var(--range-progress,0%),#3b3d46 var(--range-progress,0%)); }

.primary-button,.secondary-button,.outline-button,.text-button,.back-button,.nav-item,.icon-button,.control-button,.play-button { align-items:center; justify-content:center; text-align:center; line-height:1.15; }
.primary-button,.secondary-button,.outline-button { display:inline-flex; white-space:nowrap; }
.nav-item { display:grid; grid-template-columns:24px minmax(0,1fr); align-items:center; column-gap:13px; }
.nav-item>span:last-child { align-self:center; line-height:1; }
.nav-icon { width:24px; height:24px; }
.nav-icon svg,.topbar-actions svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }

.topbar { max-width:none!important; width:auto!important; margin-inline:calc(-1 * clamp(24px,5vw,82px))!important; padding-inline:clamp(24px,5vw,82px)!important; }
.topbar-actions { display:flex; align-items:center; gap:6px; flex:0 0 auto; }
.theme-mode-button.is-active { color:var(--accent); background:var(--accent-soft); }
.top-search-wrap { margin-inline:auto; }

.about-layout { grid-template-columns:minmax(0,900px); justify-content:start; }
.acknowledgements-section { margin-top:64px; padding-top:34px; border-top:1px solid var(--line); }
.acknowledgements-section h2 { margin:0 0 20px; font-size:30px; letter-spacing:-.035em; }
.acknowledgements-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.acknowledgements-list article { padding:18px 20px; border:1px solid var(--line); border-radius:18px; background:color-mix(in srgb,var(--surface) 78%,transparent); }
.acknowledgements-list strong { display:block; }
.acknowledgements-list p { margin:7px 0 0; color:var(--muted); line-height:1.6; font-size:13px; }

.player-bar { grid-template-columns:minmax(250px,.9fr) minmax(420px,1.5fr) minmax(210px,.75fr); }
.now-playing-summary { justify-self:start; width:100%; }
.desktop-controls { width:100%; min-width:0; }
.player-actions { min-width:0; }

.public-lyric-studio { display:grid; gap:12px; padding:16px; margin-bottom:18px; border:1px solid var(--line); border-radius:20px; background:var(--accent-soft); }
.public-lyric-studio audio { width:100%; height:42px; }
.public-lyric-clock { display:flex; align-items:center; justify-content:space-between; gap:15px; }
.public-lyric-clock span,.public-lyric-studio>small { color:var(--muted); font-size:12px; }
.public-lyric-clock strong { font-size:24px; font-variant-numeric:tabular-nums; letter-spacing:-.03em; }
.public-lyric-insert { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; }
.public-lyric-insert input { width:100%; min-width:0; border:1px solid var(--line); border-radius:13px; padding:12px 13px; outline:0; background:var(--surface); color:var(--text); }
.public-lyric-insert input:focus { border-color:color-mix(in srgb,var(--accent) 50%,var(--line)); box-shadow:0 0 0 4px var(--accent-soft); }
.lyric-contribution-sheet { width:min(700px,100%); }

@media (max-width:1180px) {
  .player-bar { grid-template-columns:minmax(190px,.8fr) minmax(330px,1.25fr) minmax(160px,.65fr); }
}
@media (max-width:720px) {
  .topbar { margin-inline:-20px!important; padding-inline:20px!important; }
  .topbar-actions { gap:0; }
  .top-search-wrap { width:auto; min-width:0; }
  .acknowledgements-list { grid-template-columns:1fr; }
  .public-lyric-insert { grid-template-columns:1fr; }
  .public-lyric-insert .outline-button { width:100%; }
}
@media (max-width:520px) {
  .topbar { margin-inline:-14px!important; padding-inline:14px!important; }
  .theme-mode-button { min-width:38px; }
}

/* v1.3.0 final responsive correction */
body,button,input,textarea,select {
  font-family:"SF Pro Text","Segoe UI Variable Text","Segoe UI","PingFang SC","Noto Sans CJK SC","Microsoft YaHei",system-ui,sans-serif;
}
h1,h2,h3,.hero-card h1,.editorial-copy h2,.page-heading h1,.album-detail-copy h1 {
  font-family:"SF Pro Display","Segoe UI Variable Display","Segoe UI","PingFang SC","Noto Sans CJK SC","Microsoft YaHei",system-ui,sans-serif;
}
html[data-color-mode="dark"] .mobile-route-strip { background:rgba(17,18,22,.96); }
html[data-color-mode="dark"] .dialog-x { background:#272a32; color:var(--text); }
.control-button svg,.play-button svg,.icon-button svg { pointer-events:none; }
@media (max-width:860px) {
  .topbar { margin-inline:-20px!important; padding-inline:20px!important; }
}
@media (max-width:720px) {
  .banner-arrow { display:none!important; }
}
@media (max-width:520px) {
  .topbar { margin-inline:-14px!important; padding-inline:14px!important; }
}
@media (min-width:861px) and (max-width:980px) {
  .topbar { margin-inline:-4vw!important; padding-inline:4vw!important; }
}
@media (max-width:720px) {
  .topbar { margin-inline:-14px!important; padding-inline:14px!important; }
}

/* v1.4.0 listening-room, mobile and dark-mode refinement */
.now-playing-scroll { height:calc(100% - 68px); overflow:hidden; }
.now-playing-layout { height:100%; min-height:0; grid-template-columns:minmax(340px,.88fr) minmax(0,1.12fr); }
.now-playing-left { min-width:0; min-height:0; display:block; padding:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:color-mix(in srgb,var(--accent) 30%,transparent) transparent; }
.now-playing-left-inner { min-height:100%; padding:clamp(28px,3.2vw,48px); display:flex; flex-direction:column; align-items:center; justify-content:flex-start; }
.cover-stage { width:min(38vh,390px); flex:0 0 auto; margin:0 auto; }
.song-title-block,.sheet-progress-row,.sheet-volume { width:min(38vh,390px); }
.song-title-block { margin-top:21px; }
.song-title-block h2 { font-size:clamp(27px,2.4vw,34px); }
.sheet-progress-row { margin-top:20px; }
.sheet-transport { margin-top:15px; }
.sheet-volume { margin-top:15px; }

.lyrics-column { height:100%; min-height:0; padding:0; overflow:hidden; background:color-mix(in srgb,var(--surface) 46%,transparent); }
.lyrics-heading { position:sticky; top:0; z-index:4; flex:0 0 auto; min-height:92px; padding:22px clamp(24px,3.5vw,52px) 15px; align-items:center; background:linear-gradient(to bottom,color-mix(in srgb,var(--bg) 96%,transparent) 72%,transparent); backdrop-filter:blur(18px); }
.lyrics-heading>div { min-width:0; }
.lyrics-heading h3 { font-size:25px; }
.lyrics-heading>span { margin-left:auto; color:var(--muted); font-size:11px; }
.lyrics-back { display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; min-height:36px; padding:0 13px; border:1px solid var(--line); background:color-mix(in srgb,var(--surface) 84%,transparent); color:var(--text); box-shadow:0 8px 20px rgba(20,20,30,.05); }
.lyrics-scroller { flex:1; min-height:0; height:calc(100% - 154px); padding:38vh clamp(24px,3.5vw,52px); scroll-padding-block:38vh; overscroll-behavior:contain; }
.lyric-contribute-button { flex:0 0 auto; align-self:flex-start; margin:0 clamp(24px,3.5vw,52px) 20px; background:color-mix(in srgb,var(--surface) 82%,transparent); backdrop-filter:blur(14px); }
.lyric-line { will-change:transform,opacity; transition:color .3s ease,opacity .3s ease,transform .38s cubic-bezier(.2,.75,.2,1),filter .3s ease; }
.lyric-line.is-active { transform:translateX(6px) scale(1.025); filter:none; }
.lyric-line.is-entering { animation:lyricFocus .62s cubic-bezier(.2,.78,.2,1); }
@keyframes lyricFocus { 0%{opacity:.45;transform:translateY(12px) scale(.985);filter:blur(2px)} 55%{opacity:1;transform:translateY(-2px) scale(1.035);filter:blur(0)} 100%{transform:translateX(6px) scale(1.025)} }

.inline-comments { width:100%; padding:32px clamp(24px,3vw,42px) 48px; border-top:1px solid var(--line); background:color-mix(in srgb,var(--surface) 70%,transparent); }
.inline-section-heading { align-items:center; }
.inline-section-heading h2 { font-size:27px; }
.inline-section-heading>div>p:not(.eyebrow) { font-size:13px; }
.comment-summary-row { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:22px; color:var(--muted); font-size:12px; }
.comment-summary-row b { color:var(--accent); }
.inline-comments-list { max-width:none; margin-top:8px; }
.comment-card { padding:17px 0 15px; }
.comment-card footer { display:flex; justify-content:flex-end; margin-top:11px; }
.comment-like { min-width:54px; min-height:34px; padding:0 11px; border:1px solid var(--line); border-radius:999px; display:inline-flex; align-items:center; justify-content:center; gap:6px; background:color-mix(in srgb,var(--surface) 82%,transparent); color:var(--muted); cursor:pointer; transition:.2s ease; }
.comment-like:hover { transform:translateY(-1px); color:var(--accent); border-color:color-mix(in srgb,var(--accent) 35%,var(--line)); }
.comment-like.is-liked { color:#d74f72; background:rgba(215,79,114,.1); border-color:rgba(215,79,114,.2); }
.comment-like b { font-size:11px; font-variant-numeric:tabular-nums; }
.field-help { color:var(--muted); font-size:11px; line-height:1.55; font-weight:500; }

.about-layout { max-width:1100px; }
.about-main { display:grid; gap:24px; }
.about-hero-card,.acknowledgements-section { padding:clamp(28px,4.5vw,58px); border:1px solid var(--line); border-radius:30px; background:color-mix(in srgb,var(--surface) 78%,transparent); box-shadow:0 18px 55px rgba(25,22,38,.055); backdrop-filter:blur(18px); }
.about-hero-card h1 { margin:0 0 30px; font-size:clamp(46px,6vw,78px); line-height:1; letter-spacing:-.055em; }
.about-content { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.about-copy-card { min-height:150px; padding:20px; border:1px solid var(--line); border-radius:20px; background:color-mix(in srgb,var(--bg) 45%,var(--surface)); }
.about-copy-card>span { color:var(--accent); font-size:10px; font-weight:850; letter-spacing:.16em; }
.about-copy-card p { margin:16px 0 0; color:var(--muted); line-height:1.8; }
.about-signature { margin:28px 0 0; color:var(--accent); font-weight:780; }
.acknowledgements-section { margin-top:0; padding-top:clamp(28px,4.5vw,58px); border-top:1px solid var(--line); }
.about-section-title { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:18px; }
.acknowledgements-section h2 { margin:0; }
.acknowledgements-list { grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:10px; }
.acknowledgements-list article { min-height:96px; padding:15px 16px; border-radius:16px; }
.acknowledgements-list p { font-size:12px; line-height:1.5; }

.article-body figure { margin:34px 0; }
.article-body figure img { width:100%; max-height:720px; object-fit:cover; border-radius:22px; box-shadow:0 18px 50px rgba(22,20,34,.12); }
.article-body figcaption { margin-top:10px; color:var(--muted); font-size:12px; text-align:center; }
.article-body h2 { margin:2.2em 0 .7em; font-size:31px; line-height:1.25; }
.article-body h3 { margin:1.9em 0 .6em; font-size:23px; }
.article-body blockquote { margin:2em 0; padding:18px 22px; border-left:3px solid var(--accent); border-radius:0 15px 15px 0; background:var(--accent-soft); color:color-mix(in srgb,var(--text) 82%,var(--muted)); }
.article-body ul { padding-left:1.3em; }
.article-body li { margin:.65em 0; }

/* Dark mode must retain readable hierarchy instead of merely inverting surfaces. */
html[data-color-mode="dark"] .lyrics-column { background:#14151a; }
html[data-color-mode="dark"] .lyrics-heading { background:linear-gradient(to bottom,rgba(20,21,26,.98) 74%,rgba(20,21,26,0)); }
html[data-color-mode="dark"] .lyric-line { color:rgba(244,244,247,.24); }
html[data-color-mode="dark"] .lyric-line:hover { color:rgba(244,244,247,.58); }
html[data-color-mode="dark"] .lyric-line.is-past { color:rgba(244,244,247,.13); }
html[data-color-mode="dark"] .lyric-line.is-active { color:#fff; text-shadow:0 0 28px color-mix(in srgb,var(--accent) 28%,transparent); }
html[data-color-mode="dark"] .inline-comments { background:#17181e; }
html[data-color-mode="dark"] .comment-card { border-color:rgba(255,255,255,.09); }
html[data-color-mode="dark"] .comment-like,
html[data-color-mode="dark"] .lyrics-back,
html[data-color-mode="dark"] .lyric-contribute-button,
html[data-color-mode="dark"] .comment-toggle,
html[data-color-mode="dark"] .secondary-button.dark-secondary { background:#23252d; color:#e6e6eb; border-color:rgba(255,255,255,.1); box-shadow:none; }
html[data-color-mode="dark"] .primary-button { box-shadow:0 12px 30px color-mix(in srgb,var(--accent) 20%,transparent); }
html[data-color-mode="dark"] .outline-button { color:color-mix(in srgb,var(--accent) 80%,white); }
html[data-color-mode="dark"] .about-hero-card,
html[data-color-mode="dark"] .acknowledgements-section,
html[data-color-mode="dark"] .about-copy-card { background:rgba(26,28,34,.88); }
html[data-color-mode="dark"] .article-body { color:#d5d5dc; }
html[data-color-mode="dark"] .article-body blockquote { color:#e4e4e9; }

/* A quieter archive-oriented default hero. */
.intro-slide { background-image:linear-gradient(90deg,rgba(12,12,18,.94) 0%,rgba(17,15,25,.8) 52%,rgba(17,15,25,.26) 100%),var(--banner-image); }
.hero-signal::before { opacity:.88; box-shadow:inset 0 0 0 28px rgba(9,9,14,.56),inset 0 0 0 58px rgba(9,9,14,.4),0 28px 70px rgba(0,0,0,.36); }

/* Player bar remains complete through intermediate widths. */
.player-bar { grid-template-columns:minmax(190px,.9fr) minmax(330px,1.45fr) minmax(170px,.65fr); gap:16px; }
.desktop-controls,.transport-row,.progress-row { min-width:0; }
.player-actions { white-space:nowrap; }
@media (max-width:1180px) {
  .player-bar { grid-template-columns:minmax(170px,.8fr) minmax(300px,1.35fr) minmax(126px,.5fr); }
  .volume-wrap { width:auto; }
  .volume-wrap input { display:none; }
}
@media (max-width:980px) and (min-width:861px) {
  .player-bar { left:calc(var(--sidebar) + 12px); right:12px; grid-template-columns:minmax(150px,.72fr) minmax(280px,1.35fr) 92px; padding-inline:16px; gap:10px; }
  .player-actions { gap:2px; }
}

@media (max-width:900px) {
  .now-playing-sheet { inset:12px; border-radius:27px; }
  .now-playing-layout { grid-template-columns:minmax(310px,.92fr) minmax(0,1.08fr); }
  .now-playing-left-inner { padding:26px 22px; }
  .cover-stage,.song-title-block,.sheet-progress-row,.sheet-volume { width:min(35vh,315px); }
  .lyrics-heading,.lyrics-scroller { padding-left:24px; padding-right:24px; }
}

@media (max-width:720px) {
  .now-playing-scroll { overflow:hidden; }
  .now-playing-layout { height:100%; display:block; }
  .now-playing-left { height:100%; overflow-y:auto; }
  .now-playing-left-inner { min-height:auto; padding:22px 22px 28px; }
  .cover-stage { width:min(78vw,350px); margin-top:0; }
  .song-title-block,.sheet-progress-row,.sheet-volume { width:100%; }
  .sheet-transport { width:100%; grid-template-columns:repeat(5,minmax(42px,1fr)); gap:4px; }
  .large-play { justify-self:center; }
  .inline-comments { padding:32px 20px 92px; }
  .inline-section-heading { align-items:stretch; }
  .compact-action { width:100%; }
  .lyrics-column { height:100%; min-height:0; }
  .now-playing-sheet.is-lyrics-focus .lyrics-column { display:flex; height:100%; }
  .lyrics-heading { min-height:78px; padding:14px 17px 10px; align-items:center; }
  .lyrics-heading>div { order:2; }
  .lyrics-heading>span { order:3; }
  .lyrics-back { order:1; display:inline-flex; padding-inline:11px; font-size:12px; }
  .lyrics-scroller { height:auto; min-height:0; padding:32vh 20px; scroll-padding-block:32vh; }
  .lyric-contribute-button { margin:0 20px 18px; width:calc(100% - 40px); }
  .lyric-line { font-size:clamp(25px,7.2vw,31px); line-height:1.35; }
  .about-hero-card,.acknowledgements-section { padding:28px 20px; border-radius:24px; }
  .about-content { grid-template-columns:1fr; }
  .about-copy-card { min-height:0; }
  .acknowledgements-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .article-body figure { margin-inline:-8px; }
  .article-body figure img { border-radius:17px; }
}

@media (max-width:430px) {
  .sheet-header { padding-inline:9px; }
  .sheet-header>div { max-width:58vw; }
  .sheet-header strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
  .now-playing-left-inner { padding-inline:17px; }
  .cover-stage { width:min(84vw,330px); }
  .sheet-transport { grid-template-columns:40px 48px 64px 48px 40px; justify-content:center; }
  .inline-comments { padding-inline:17px; }
  .comment-meta { align-items:flex-start; flex-direction:column; gap:5px; }
  .acknowledgements-list { grid-template-columns:1fr 1fr; gap:8px; }
  .acknowledgements-list article { min-height:86px; padding:13px; }
}
@media (max-width:860px) {
  :root { --player-height:76px; }
  .player-bar { left:10px; right:10px; bottom:9px; height:var(--player-height); padding:9px 12px; border-radius:21px; grid-template-columns:minmax(0,1fr) auto; gap:9px; }
  .desktop-controls,.player-actions { display:none; }
  .mobile-player-controls { display:flex; align-items:center; gap:3px; }
  .mobile-progress { display:block; position:absolute; left:20px; right:20px; bottom:0; height:2px; background:rgba(0,0,0,.08); overflow:hidden; border-radius:99px; }
  .mobile-progress::after { content:""; display:block; height:100%; width:var(--mobile-progress,0%); background:var(--accent); }
}

/* v1.4 final stability and mobile-first refinement */
.now-playing-sheet { display:flex; flex-direction:column; }
.sheet-header { flex:0 0 auto; }
.now-playing-scroll { flex:1 1 auto; min-height:0; height:auto; }
.now-playing-layout { height:100%; min-height:0; }
.now-playing-left-inner { min-height:auto; padding-bottom:30px; }
.cover-stage { flex:0 0 auto; margin-top:0; }
.lyrics-column { position:relative; }
.lyrics-heading { border-bottom:1px solid color-mix(in srgb,var(--line) 80%,transparent); }
.lyrics-back { flex:0 0 auto; }
.lyrics-scroller { scrollbar-width:thin; scrollbar-color:color-mix(in srgb,var(--accent) 32%,transparent) transparent; }
.lyrics-scroller::-webkit-scrollbar { display:block; width:5px; }
.lyrics-scroller::-webkit-scrollbar-thumb { background:color-mix(in srgb,var(--accent) 28%,transparent); border-radius:999px; }
.lyric-line { transform-origin:left center; transition:color .36s ease,opacity .36s ease,transform .5s cubic-bezier(.2,.78,.2,1),filter .36s ease; }
.lyric-line.is-active { transform:translateX(7px) scale(1.018); }

/* Article typography: literary, readable and still system-font safe. */
.article-paper { max-width:900px; }
.article-body { font-family:"Noto Serif SC","Source Han Serif SC","Songti SC","STSong",serif; font-size:18px; line-height:2; letter-spacing:.015em; }
.article-body h2,.article-body h3 { font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; letter-spacing:-.035em; }
.article-body strong { color:var(--text); font-weight:800; }
.article-body hr { width:72px; height:1px; border:0; margin:50px auto; background:color-mix(in srgb,var(--accent) 55%,var(--line)); }

/* Full dark-mode treatment for the immersive player. */
html[data-color-mode="dark"] .now-playing-left,
html[data-color-mode="dark"] .sheet-header { background:#111217; }
html[data-color-mode="dark"] .song-title-block h2,
html[data-color-mode="dark"] .lyrics-heading h3,
html[data-color-mode="dark"] .inline-section-heading h2 { color:#f3f3f6; }
html[data-color-mode="dark"] .control-button,
html[data-color-mode="dark"] .icon-button { color:#b9bbc5; }
html[data-color-mode="dark"] .control-button:hover,
html[data-color-mode="dark"] .icon-button:hover { color:#fff; background:rgba(255,255,255,.07); }
html[data-color-mode="dark"] .sheet-transport .control-button { background:#1d1f26; color:#c7c9d2; border:1px solid rgba(255,255,255,.055); }
html[data-color-mode="dark"] .sheet-transport .control-button:hover { background:#272a33; color:#fff; }
html[data-color-mode="dark"] .sheet-transport .play-button,
html[data-color-mode="dark"] .large-play { background:color-mix(in srgb,var(--accent) 62%,#202129); color:#fff; box-shadow:0 12px 34px color-mix(in srgb,var(--accent) 19%,transparent); }
html[data-color-mode="dark"] .comment-summary-row,
html[data-color-mode="dark"] .inline-section-heading>div>p:not(.eyebrow),
html[data-color-mode="dark"] .song-title-block p,
html[data-color-mode="dark"] .sheet-volume { color:#989ba6; }
html[data-color-mode="dark"] input[type="range"] { accent-color:var(--accent); }
html[data-color-mode="dark"] .comment-card p { color:#d8d8de; }
html[data-color-mode="dark"] .empty-card { background:#1c1e25; color:#aeb0b9; border-color:rgba(255,255,255,.065); }
html[data-color-mode="dark"] .field-help { color:#9a9da8; }
html[data-color-mode="dark"] .article-body strong { color:#fff; }

/* Keep the persistent player coherent at every intermediate width. */
.now-playing-summary { overflow:hidden; }
.mini-copy { min-width:0; }
.mini-copy strong,.mini-copy small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.player-actions { min-width:0; justify-content:flex-end; }
.mobile-player-controls button { flex:0 0 auto; }
@media (max-width:1080px) and (min-width:861px) {
  .player-bar { grid-template-columns:minmax(145px,.72fr) minmax(270px,1.3fr) minmax(82px,.4fr); }
  .player-actions .volume-wrap { display:none; }
  .player-actions { gap:0; }
}

@media (max-width:900px) and (min-width:721px) {
  .now-playing-sheet { inset:10px; }
  .now-playing-layout { grid-template-columns:minmax(285px,.82fr) minmax(0,1.18fr); }
  .now-playing-left-inner { padding:22px 18px 26px; }
  .cover-stage,.song-title-block,.sheet-progress-row,.sheet-volume { width:min(31vh,285px); max-width:100%; }
  .sheet-transport { grid-template-columns:40px 46px 62px 46px 40px; gap:3px; }
  .inline-comments { padding:26px 18px 42px; }
  .lyrics-heading { padding-inline:18px; }
  .lyrics-scroller { padding-left:18px; padding-right:18px; }
}

@media (max-width:720px) {
  .now-playing-sheet { inset:0; border-radius:0; }
  .sheet-header { min-height:68px; padding-top:max(8px,env(safe-area-inset-top)); }
  .now-playing-left-inner { align-items:stretch; }
  .cover-stage { align-self:center; }
  .song-title-block { text-align:left; }
  .inline-comments { background:var(--bg); }
  .lyrics-heading { top:0; backdrop-filter:blur(22px); }
  .lyrics-heading .eyebrow { display:none; }
  .lyrics-heading h3 { font-size:17px; }
  .lyrics-heading>span { max-width:30vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .lyrics-scroller { padding-top:29vh; padding-bottom:34vh; scroll-padding-block:29vh; }
  .lyric-line { margin-bottom:22px; }
  .article-body { font-size:17px; line-height:1.95; }
  .article-paper { padding-inline:20px; }
  .about-hero-card h1 { font-size:clamp(39px,12vw,55px); }
  .about-content { gap:9px; }
  .about-copy-card { padding:17px; border-radius:17px; }
}

@media (max-width:430px) {
  .sheet-header { grid-template-columns:42px minmax(0,1fr) 42px; }
  .sheet-header .icon-button { min-width:38px; min-height:38px; }
  .now-playing-left-inner { padding:18px 15px 24px; }
  .cover-stage { width:min(86vw,320px); }
  .song-title-block h2 { font-size:32px; }
  .sheet-transport { grid-template-columns:36px 44px 60px 44px 36px; }
  .sheet-volume { grid-template-columns:34px minmax(0,1fr); }
  .inline-comments { padding:27px 15px calc(90px + env(safe-area-inset-bottom)); }
  .inline-section-heading h2 { font-size:24px; }
  .comments-sheet { width:100%; max-width:none; }
  .acknowledgements-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .acknowledgements-list article { min-height:80px; }
}

/* v1.5 touch-first interaction, artist profiles and editorial embeds */
html, body { scrollbar-width:none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { width:0; height:0; }
.sidebar, .main-content, .now-playing-left, .lyrics-scroller, .drawer-sheet, .article-view { scrollbar-width:none; }
.sidebar::-webkit-scrollbar, .main-content::-webkit-scrollbar, .now-playing-left::-webkit-scrollbar, .lyrics-scroller::-webkit-scrollbar, .drawer-sheet::-webkit-scrollbar, .article-view::-webkit-scrollbar { width:0!important; height:0!important; display:none!important; }

.nav-list { justify-items:stretch; }
.nav-item { justify-content:start; text-align:left; padding-inline:18px; }
.nav-item .nav-icon { flex:0 0 22px; }
.nav-item>span:last-child { text-align:left; justify-self:start; }

.intro-slide {
  display:flex;
  align-items:center;
  background-image:linear-gradient(90deg,rgba(12,12,18,.9) 0%,rgba(12,12,18,.7) 48%,rgba(12,12,18,.16) 100%),var(--banner-image);
  background-size:cover;
  background-position:center;
}
.intro-slide .hero-copy { width:min(760px,76%); }

.artist-avatar { display:grid; place-items:center; }
.artist-avatar span { display:none; position:static; inset:auto; width:100%; height:100%; font-size:clamp(38px,7vw,76px); background:var(--accent-gradient); }
.artist-avatar span.is-visible { display:grid; place-items:center; }
.artist-avatar img { position:absolute; inset:0; }
.artist-detail-avatar { width:clamp(150px,20vw,250px); aspect-ratio:1; border-radius:50%; overflow:hidden; display:grid; place-items:center; background:var(--accent-gradient); box-shadow:0 24px 60px color-mix(in srgb,var(--accent) 18%,transparent); }
.artist-detail-avatar img { width:100%; height:100%; object-fit:cover; }
.artist-detail-avatar span { color:#fff; font-size:clamp(54px,8vw,94px); font-weight:800; }

.track-row { cursor:pointer; touch-action:manipulation; }
.track-row:active { transform:scale(.997); }
.track-row:focus-visible { outline:2px solid color-mix(in srgb,var(--accent) 70%,white); outline-offset:-2px; }

.simple-comment-form { gap:12px; }
.simple-comment-form>input,.simple-comment-form>textarea { width:100%; border:1px solid var(--line); border-radius:17px; background:var(--surface-soft); color:var(--text); padding:14px 16px; font:inherit; outline:0; resize:vertical; }
.simple-comment-form>input:focus,.simple-comment-form>textarea:focus { border-color:color-mix(in srgb,var(--accent) 60%,var(--line)); box-shadow:0 0 0 4px var(--accent-soft); }

.article-song-card { width:100%; margin:28px 0; padding:14px; display:grid; grid-template-columns:72px minmax(0,1fr) 44px; align-items:center; gap:15px; border:1px solid var(--line); border-radius:22px; background:color-mix(in srgb,var(--surface) 92%,transparent); color:var(--text); text-align:left; cursor:pointer; box-shadow:0 14px 35px rgba(22,20,34,.07); transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease; }
.article-song-card:hover { transform:translateY(-2px); border-color:color-mix(in srgb,var(--accent) 34%,var(--line)); box-shadow:0 18px 42px rgba(22,20,34,.11); }
.article-song-card img { width:72px; height:72px; border-radius:16px; object-fit:cover; }
.article-song-card span { min-width:0; display:grid; gap:3px; }
.article-song-card small { color:var(--accent); font:700 10px/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",sans-serif; letter-spacing:.15em; }
.article-song-card strong,.article-song-card em { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.article-song-card strong { font:750 18px/1.35 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",sans-serif; }
.article-song-card em { color:var(--muted); font:400 13px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",sans-serif; }
.article-song-card>b { width:42px; height:42px; display:grid; place-items:center; border-radius:50%; color:#fff; background:var(--accent); }

.lyric-line { will-change:transform,opacity; backface-visibility:hidden; filter:none!important; }
.lyric-line.is-entering { animation:lyricFocus .38s cubic-bezier(.2,.75,.2,1) both; }
@keyframes lyricFocus { from{opacity:.62;transform:translate3d(0,8px,0) scale(.99)} to{opacity:1;transform:translate3d(7px,0,0) scale(1.018)} }

.sheet-transport .control-button,.sheet-transport .play-button { flex:0 0 auto; justify-self:center; padding:0; aspect-ratio:1; }
.sheet-transport .control-button { width:46px; min-width:46px; height:46px; }
.sheet-transport .large-control { width:54px; min-width:54px; height:54px; }
.sheet-transport .large-play { width:68px; min-width:68px; height:68px; }

html[data-color-mode="dark"] .simple-comment-form>input,
html[data-color-mode="dark"] .simple-comment-form>textarea,
html[data-color-mode="dark"] .article-song-card { background:#1b1d24; border-color:rgba(255,255,255,.075); color:#f4f4f7; }

@media (max-width:980px) and (min-width:861px) {
  .nav-item { padding:0; justify-content:center; }
}

@media (max-width:720px) {
  .banner-shell { margin-top:10px; }
  .hero-card,.editorial-banner { min-height:0; aspect-ratio:5/6; }
  .intro-slide,.editorial-banner.has-image { background-position:center; }
  .intro-slide .hero-copy,.editorial-copy { width:100%; max-width:none; padding:34px 28px; align-self:flex-start; }
  .hero-card h1,.editorial-copy h2 { font-size:clamp(38px,10vw,52px); }
  .hero-card .hero-copy>p:not(.eyebrow),.editorial-copy>p:not(.eyebrow) { max-width:92%; }
  .banner-overlay { background:linear-gradient(180deg,rgba(10,10,15,.88) 0%,rgba(10,10,15,.48) 56%,rgba(10,10,15,.15)); }
  .sheet-transport { display:flex; grid-template-columns:none; justify-content:space-between; align-items:center; gap:6px; }
  .sheet-transport .control-button { width:44px; min-width:44px; height:44px; }
  .sheet-transport .large-control { width:50px; min-width:50px; height:50px; }
  .sheet-transport .large-play { width:64px; min-width:64px; height:64px; }
  .article-song-card { grid-template-columns:58px minmax(0,1fr) 40px; padding:11px; border-radius:18px; }
  .article-song-card img { width:58px; height:58px; border-radius:13px; }
  .article-song-card strong { font-size:16px; }
  .artist-detail-hero { align-items:center; }
  .artist-detail-avatar { width:128px; }
  .track-row { min-height:68px; }
}

@media (max-width:430px) {
  .hero-card,.editorial-banner { aspect-ratio:4/5; }
  .intro-slide .hero-copy,.editorial-copy { padding:28px 22px; }
  .sheet-transport .control-button { width:40px; min-width:40px; height:40px; }
  .sheet-transport .large-control { width:46px; min-width:46px; height:46px; }
  .sheet-transport .large-play { width:60px; min-width:60px; height:60px; }
  .compact-composer .drawer-header { padding-bottom:10px; }
  .simple-comment-form .comment-form-footer { align-items:center; }
  .simple-comment-form .comment-form-footer .primary-button { min-width:96px; }
}

/* v1.5 final alignment and motion pass */
@media (min-width:981px) {
  .nav-item {
    display:grid;
    grid-template-columns:24px minmax(0,1fr);
    justify-content:stretch;
    justify-items:start;
    column-gap:15px;
    padding-inline:17px;
  }
  .nav-item .nav-icon { justify-self:center; }
  .nav-item>span:last-child { justify-self:start; text-align:left; }
}
.lyrics-scroller { scroll-behavior:auto; }
.lyric-line { contain:layout paint; }

/* v1.6 — resilient responsive player, compact community surfaces and calmer motion */
:root { --ui-font:"HarmonyOS Sans SC","MiSans","PingFang SC","Microsoft YaHei UI","Noto Sans CJK SC",system-ui,-apple-system,sans-serif; }
html,body,button,input,textarea,select { font-family:var(--ui-font); }
body { text-rendering:optimizeLegibility; }
.brand-mark b { color:#fff; background:var(--accent-gradient); }
.brand-mark svg { width:72%; height:72%; overflow:visible; }
.nav-secondary-start { margin-top:clamp(18px,4vh,42px); }
.sidebar-bottom-public { align-items:stretch; }
.donation-entry,.sidebar-note { text-align:left; justify-content:flex-start; }
.donation-entry>span,.sidebar-note>.soft-dot { flex:0 0 auto; }

/* The page may scroll, but the browser scrollbar is intentionally visually quiet. */
html,body,.main-content { scrollbar-width:none; }
html::-webkit-scrollbar,body::-webkit-scrollbar,.main-content::-webkit-scrollbar { display:none; width:0; }

/* Artist grouping: the non-latin bucket is named instead of showing a stray hash. */
.alphabet-strip[hidden] { display:none!important; }
.alphabet-strip button { min-width:max-content; }

/* Compact acknowledgements scale to hundreds of names. */
.acknowledgements-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); gap:8px; }
.acknowledgement-chip { min-width:0; min-height:62px; padding:11px 13px; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:3px; border:1px solid var(--line); border-radius:14px; color:var(--text); background:color-mix(in srgb,var(--surface) 84%,transparent); text-align:left; cursor:pointer; transition:transform .18s ease,border-color .18s ease,background .18s ease; }
.acknowledgement-chip:hover { transform:translateY(-2px); border-color:color-mix(in srgb,var(--accent) 38%,var(--line)); background:color-mix(in srgb,var(--accent-soft) 34%,var(--surface)); }
.acknowledgement-chip strong,.acknowledgement-chip span { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.acknowledgement-chip strong { font-size:14px; }
.acknowledgement-chip span { color:var(--muted); font-size:11px; }
.acknowledgement-dialog { width:min(620px,calc(100vw - 28px)); }
.acknowledgement-dialog form { padding:clamp(24px,5vw,42px); }
.acknowledgement-detail { margin:20px 0; padding:18px; border-radius:16px; color:var(--text); background:var(--surface-soft); line-height:1.85; }
.about-message-button { margin-top:18px; opacity:.82; }

/* Search empty state remains a subtle panel in dark mode, not a giant light rectangle. */
.search-page-heading + .large-search + .empty-state { min-height:260px; background:color-mix(in srgb,var(--surface) 82%,transparent); }
html[data-color-mode="dark"] .search-page-heading + .large-search + .empty-state { background:#191b21; color:#aeb1bc; border-color:rgba(255,255,255,.075); }

/* No repaint flash when likes are updated. */
.comments-list { contain:layout style; }
.comment-card { transition:background .18s ease,border-color .18s ease,opacity .2s ease,transform .2s ease; }
.comment-card.is-new { opacity:0; transform:translateY(5px); }
.comment-like b { min-width:1.4ch; font-variant-numeric:tabular-nums; }

/* Queue drag feedback. */
.queue-item { transition:background .18s ease,border-color .18s ease,box-shadow .18s ease,opacity .18s ease; }
.queue-item.is-dragging { opacity:.58; box-shadow:0 15px 36px rgba(0,0,0,.18); }
.queue-item.is-drag-over { border-color:var(--accent); background:var(--accent-soft); }

/* Full player keeps cover at the top and both panes independently scrollable. */
.now-playing-left-inner { justify-content:flex-start; align-items:center; }
.cover-stage { margin-top:0; }
.lyrics-heading { position:sticky; top:0; z-index:4; }
.lyrics-scroller { overscroll-behavior:contain; }
.lyric-line { will-change:auto; contain:content; }
.lyric-line.is-active { animation:none; }
.lyric-line.is-entering { animation:lyricFocusV16 .32s cubic-bezier(.22,1,.36,1) both; }
@keyframes lyricFocusV16 { from{opacity:.7;transform:translate3d(0,9px,0) scale(.992)} to{opacity:1;transform:translate3d(6px,0,0) scale(1.012)} }

/* Persistent player: desktop and every narrow intermediate width retain all essential controls. */
.mobile-player-timeline,.mobile-player-controls { display:none; }
.mobile-player-timeline { align-items:center; gap:8px; color:var(--muted); font-size:10px; font-variant-numeric:tabular-nums; }
.mobile-player-timeline input { min-width:0; width:100%; }
.mobile-player-controls { justify-content:center; align-items:center; gap:6px; }
.mobile-player-controls button { flex:0 0 38px; width:38px; height:38px; min-width:38px; padding:0; border-radius:50%; }
.mobile-player-controls .compact-play { flex-basis:46px; width:46px; height:46px; min-width:46px; }

@media (max-width:980px) {
  :root { --player-height:132px; }
  .player-bar { left:12px; right:12px; bottom:max(10px,env(safe-area-inset-bottom)); height:var(--player-height); padding:10px 14px; display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:48px 20px 44px; grid-template-areas:"summary" "timeline" "controls"; gap:2px; border-radius:24px; }
  .now-playing-summary { grid-area:summary; justify-self:stretch; width:100%; display:grid; grid-template-columns:46px minmax(0,1fr); gap:11px; text-align:left; }
  .now-playing-summary img { width:46px; height:46px; }
  .mini-copy { align-items:start; text-align:left; }
  .desktop-controls,.player-actions,.mobile-progress { display:none!important; }
  .mobile-player-timeline { grid-area:timeline; display:grid; grid-template-columns:34px minmax(0,1fr) 34px; width:100%; }
  .mobile-player-controls { grid-area:controls; display:flex; width:100%; }
  .main-content { padding-bottom:calc(var(--player-height) + 35px + env(safe-area-inset-bottom)); }
}
@media (max-width:620px) {
  :root { --player-height:128px; }
  .player-bar { left:8px; right:8px; padding:8px 11px; border-radius:21px; grid-template-rows:46px 19px 43px; }
  .mobile-player-controls { justify-content:space-between; gap:2px; }
  .mobile-player-controls button { flex-basis:36px; width:36px; height:36px; min-width:36px; font-size:13px; }
  .mobile-player-controls .compact-play { flex-basis:44px; width:44px; height:44px; min-width:44px; }
  .mobile-player-timeline { grid-template-columns:32px minmax(0,1fr) 32px; gap:5px; }
}
@media (max-width:360px) {
  .mobile-player-controls button { flex-basis:33px; width:33px; height:33px; min-width:33px; }
  .mobile-player-controls .compact-play { flex-basis:42px; width:42px; height:42px; min-width:42px; }
}

/* Mobile first: touch targets, restrained cards and useful whitespace. */
@media (max-width:720px) {
  .view { padding-inline:20px; }
  .page-heading { padding-top:28px; }
  .album-grid { row-gap:24px; }
  .album-card h3 { margin-top:11px; }
  .banner-track { scroll-snap-type:x mandatory; touch-action:pan-x pan-y; }
  .banner-slide { scroll-snap-align:start; }
  .acknowledgements-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .about-hero-card,.acknowledgements-section { padding:24px 18px; }
  .about-message-button { width:auto; min-height:42px; }
}

/* Dark mode components remain layered rather than collapsing into black voids. */
html[data-color-mode="dark"] .about-hero-card,
html[data-color-mode="dark"] .acknowledgements-section,
html[data-color-mode="dark"] .about-copy-card,
html[data-color-mode="dark"] .acknowledgement-chip,
html[data-color-mode="dark"] .article-paper { background:linear-gradient(145deg,#1a1c23,#15171d); border-color:rgba(255,255,255,.075); }
html[data-color-mode="dark"] .acknowledgement-detail { background:#20232b; }
html[data-color-mode="dark"] .mobile-player-controls .control-button { color:#c9ccd5; background:#22242c; border:1px solid rgba(255,255,255,.06); }
html[data-color-mode="dark"] .mobile-player-controls .play-button { color:#fff; background:color-mix(in srgb,var(--accent) 72%,#23252d); }

@media (prefers-reduced-motion:reduce) {
  .lyric-line,.queue-item,.comment-card,.acknowledgement-chip { animation:none!important; transition:none!important; }
}
.quiet-message-button { margin-top:18px; min-height:42px; padding:0 16px; border:1px solid var(--line); border-radius:999px; background:transparent; color:var(--muted); font-weight:650; cursor:pointer; opacity:.78; transition:.18s ease; }
.quiet-message-button:hover { opacity:1; color:var(--accent); border-color:color-mix(in srgb,var(--accent) 40%,var(--line)); background:var(--accent-soft); }


/* v1.7 — focused usability refinements requested after v1.6 */
.emoji-text,
input,
textarea,
.comment-card,
.author-message-detail {
  font-family:var(--ui-font),"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
}

/* Keep the secondary navigation visibly separated without turning it into another panel. */
.nav-secondary-start {
  position:relative;
  margin-top:52px;
}
.nav-secondary-start::before {
  content:"";
  position:absolute;
  left:15px;
  right:15px;
  top:-27px;
  height:1px;
  background:var(--line);
  pointer-events:none;
}

/* Both quiet status cards share one visual system and sit level with the player. */
@media (min-width:981px) {
  .sidebar { padding-bottom:14px; }
}
.donation-entry,
.sidebar-note {
  border:1px solid var(--line);
  background:color-mix(in srgb,var(--surface) 76%,transparent);
}
.sidebar-bottom-public { padding-bottom:0; }

/* The full-player transport remains compact and visually centred. */
.sheet-transport {
  justify-content:center;
  justify-self:center;
  align-self:center;
}
@media (max-width:720px) {
  .sheet-transport {
    width:auto;
    max-width:100%;
    justify-content:center;
    gap:8px;
  }
}
@media (max-width:430px) {
  .sheet-transport { gap:6px; }
}

/* Pulling the cover downward dismisses the mobile full-player. */
@media (max-width:720px) {
  .cover-stage { touch-action:pan-y; }
  .is-open .now-playing-sheet.is-swipe-dragging {
    transition:none!important;
    transform:translate3d(0,var(--sheet-drag-y,0),0) scale(var(--sheet-drag-scale,1));
    border-radius:24px 24px 0 0;
  }
}

/* Editorial articles use the same calm sans-serif reading system as the rest of the site. */
.article-body {
  font-family:var(--ui-font),"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
  font-size:16px;
  line-height:1.88;
  letter-spacing:0;
}
.article-body h2 { font-size:27px; }
.article-body h3 { font-size:20px; }
@media (max-width:720px) {
  .article-body { font-size:15px; line-height:1.82; }
  .article-body h2 { font-size:23px; }
  .article-body h3 { font-size:18px; }
}

/* An empty queue should be a quiet hint, not a giant grey block. */
.queue-list>.empty-state {
  min-height:150px;
  margin-top:12px;
  padding:24px;
  border:1px dashed var(--line);
  background:color-mix(in srgb,var(--surface) 42%,transparent);
}
html[data-color-mode="dark"] .queue-list>.empty-state {
  background:rgba(255,255,255,.025);
  border-color:rgba(255,255,255,.08);
  color:#9296a1;
}

/* On phones the album browser prioritises scanning more covers at once. */
@media (max-width:720px) {
  .album-grid,
  .large-grid {
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:22px 9px;
  }
  .album-art-wrap { border-radius:15px; }
  .album-card h3 { margin-top:9px; font-size:13px; }
  .album-card p { font-size:10px; }
  .album-play-overlay {
    right:7px;
    bottom:7px;
    width:36px;
    height:36px;
  }
}

/* Mobile banners stay editorial but no longer stretch into a mostly empty poster. */
@media (max-width:720px) {
  .hero-card,
  .editorial-banner {
    aspect-ratio:auto!important;
    height:clamp(480px,125vw,620px);
    min-height:0;
  }
}

/* A discreet mobile-only support link lives at the end of the page, never at the top. */
.footer-actions { display:flex; align-items:center; gap:16px; }
.mobile-donation-entry {
  display:none;
  border:0;
  padding:7px 0;
  background:transparent;
  color:var(--muted);
  font-weight:650;
  cursor:pointer;
}
@media (max-width:860px) {
  .site-footer { align-items:center; }
  .footer-actions { gap:12px; }
  .mobile-donation-entry:not([hidden]) { display:inline-flex; }
}

/* The author-note entry is intentionally present but quieter. */
.quiet-message-button {
  min-height:36px;
  padding:0 13px;
  font-size:12px;
  opacity:.72;
}

/* v1.8 — iPhone-first listening layout, refined palette and review polish */
html[data-theme="violet"] { --accent:#6D4AFF; --accent-2:#B7A8FF; }
html[data-theme="ocean"] { --accent:#174A7E; --accent-2:#8DB2D7; }
html[data-theme="forest"] { --accent:#237A57; --accent-2:#91C8AE; }
html[data-theme="sunset"] { --accent:#C94C35; --accent-2:#E9A18E; }
html[data-theme="rose"] { --accent:#A33A5B; --accent-2:#D89AAF; }
html[data-theme="graphite"] { --accent:#4B5061; --accent-2:#AEB3C0; }
html[data-theme="indigo"] { --accent:#3949AB; --accent-2:#9EA8E8; }
html[data-theme="cyan"] { --accent:#0B7285; --accent-2:#8BC6CE; }
html[data-theme="amber"] { --accent:#A77B2B; --accent-2:#DEC487; }
html[data-theme="burgundy"] { --accent:#7F263D; --accent-2:#C88799; }
html[data-theme="moss"] { --accent:#557153; --accent-2:#A9BEA5; }
html[data-theme="sand"] { --accent:#8A6245; --accent-2:#C8AA91; }

/* The default mark is a three-line sound braid rather than an ambiguous Wi-Fi glyph. */
.brand-mark svg { width:74%; height:74%; }
.brand-mark svg path { fill:none; stroke:currentColor; stroke-width:3.5; stroke-linecap:round; stroke-linejoin:round; }
.brand-mark b { width:100%; height:100%; display:grid; place-items:center; }

/* Comment access is compact, count-aware and usable without pushing the main controls apart. */
.song-title-block { position:relative; padding-right:58px; }
.sheet-utility-row { width:min(46vh,460px); display:flex; justify-content:flex-end; margin-top:13px; }
.sheet-comment-button {
  position:relative; width:44px; height:44px; padding:0; display:grid; place-items:center;
  border:1px solid var(--line); border-radius:50%; color:var(--muted);
  background:color-mix(in srgb,var(--surface) 82%,transparent); cursor:pointer;
  transition:transform .18s ease,color .18s ease,border-color .18s ease,background .18s ease;
}
.sheet-comment-button:hover { transform:translateY(-1px); color:var(--accent); border-color:color-mix(in srgb,var(--accent) 42%,var(--line)); background:var(--accent-soft); }
.sheet-comment-button svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.comment-count-badge {
  position:absolute; top:-7px; right:-8px; min-width:22px; height:22px; padding:0 6px;
  display:grid; place-items:center; border:2px solid var(--bg); border-radius:999px;
  color:#fff; background:var(--accent); font-size:9px; font-weight:800; font-variant-numeric:tabular-nums;
  box-shadow:0 5px 14px color-mix(in srgb,var(--accent) 30%,transparent);
}
.comment-count-badge.is-empty { background:var(--surface-2); color:var(--muted); box-shadow:none; }
.track-comments-sheet { display:flex; flex-direction:column; overflow:hidden; }
.track-comments-sheet .drawer-header h2 { display:flex; align-items:baseline; gap:8px; }
.track-comments-sheet .drawer-header h2 small { color:var(--accent); font-size:12px; }
.drawer-comments-list { flex:1; min-height:150px; overflow-y:auto; padding:2px 0 18px; scrollbar-width:none; }
.drawer-comments-list::-webkit-scrollbar { display:none; }
.drawer-comment-form { flex:0 0 auto; padding-top:16px; border-top:1px solid var(--line); background:inherit; }

/* Active lyrics use a single GPU-friendly glow. Scrolling is handled by native smooth scrolling. */
.lyric-line { transition:color .28s ease,opacity .28s ease,transform .32s cubic-bezier(.22,1,.36,1),text-shadow .32s ease; }
.lyric-line.is-entering { animation:none!important; }
.lyric-line.is-active {
  transform:translate3d(5px,0,0) scale(1.012);
  text-shadow:0 0 22px color-mix(in srgb,var(--accent) 30%,transparent),0 0 48px color-mix(in srgb,var(--accent) 13%,transparent);
}

/* A cleaner six-dot grip and stronger destination feedback during queue sorting. */
.queue-handle { width:30px; height:42px; display:grid; place-items:center; padding:0; letter-spacing:0; border-radius:10px; touch-action:none; }
.queue-handle svg { width:18px; height:22px; fill:currentColor; opacity:.68; }
.queue-handle:hover { color:var(--accent); background:var(--accent-soft); }
.queue-item.is-dragging { transform:scale(.985); }
.queue-item.is-drag-over { transform:translateY(3px); box-shadow:inset 0 2px 0 var(--accent); }

/* Dark album covers keep clean rounded corners without light halos. */
.album-art-wrap { overflow:hidden; background:transparent; }
.album-art-wrap img { width:100%; height:100%; border-radius:inherit; transform:scale(1.001); }
html[data-color-mode="dark"] .album-art-wrap,
html[data-color-mode="dark"] .album-art-wrap img { background:#15161b; box-shadow:none; outline:0; }

/* Artist hero copy stays on the same optical axis as the portrait. */
.artist-detail-hero>div:last-child { align-self:center; padding-top:0; }
.artist-detail-hero .eyebrow { margin-bottom:12px; }

/* The footer support action is visible but not donation-first. */
.mobile-donation-entry:not([hidden]) {
  color:#fff; background:var(--accent); border:1px solid var(--accent); border-radius:999px;
  padding:7px 13px; font-size:11px; box-shadow:0 8px 18px color-mix(in srgb,var(--accent) 20%,transparent);
}
.mobile-donation-entry:hover { transform:translateY(-1px); }

@media (max-width:720px) {
  /* iPhone-class banners: editorial, but short enough to reveal the next section. */
  .hero-card,.editorial-banner { height:clamp(365px,98vw,430px)!important; aspect-ratio:auto!important; }
  .intro-slide .hero-copy,.editorial-copy { padding:27px 23px; }
  .hero-card h1,.editorial-copy h2 { font-size:clamp(34px,9.2vw,44px); line-height:1.04; }
  .hero-card .hero-copy>p:not(.eyebrow),.editorial-copy>p:not(.eyebrow) { font-size:13px; line-height:1.62; }
  .hero-actions { margin-top:20px; gap:9px; }
  .hero-actions .primary-button,.hero-actions .secondary-button { min-height:42px; padding-inline:16px; }

  /* Cover, breathing space, metadata and controls deliberately fill one phone viewport. */
  .now-playing-left-inner {
    min-height:calc(100dvh - 68px); width:100%; padding:24px 20px 28px;
    display:grid; grid-template-rows:auto minmax(26px,1fr) auto auto auto auto;
    align-content:stretch; align-items:center;
  }
  .cover-stage { grid-row:1; width:min(78vw,338px); max-height:44dvh; }
  .song-title-block { grid-row:3; width:100%; margin:0; padding-right:58px; align-self:end; }
  .song-title-block h2 { font-size:clamp(28px,8vw,38px); }
  .song-title-block p { font-size:16px; }
  .sheet-progress-row { grid-row:4; width:100%; margin-top:18px; }
  .sheet-transport { grid-row:5; margin-top:16px; }
  .sheet-volume { grid-row:6; width:100%; margin-top:14px; }
  .now-playing-left-inner { position:relative; }
  .sheet-utility-row { grid-row:3; justify-self:end; align-self:center; width:auto; margin:0; z-index:2; }
  .sheet-comment-button { width:46px; height:46px; }
  .inline-comments { display:none; }
  .track-comments-sheet { width:100%; max-width:none; border-radius:25px 25px 0 0; }
  .drawer-comments-list { padding-bottom:12px; }
  .drawer-comment-form { padding-bottom:max(10px,env(safe-area-inset-bottom)); }

  /* Smaller lyric typography gives each line more air and reduces paint work. */
  .lyric-line { margin-bottom:19px; font-size:clamp(20px,5.7vw,25px)!important; line-height:1.42; font-weight:700; }
  .lyrics-scroller { padding-top:31vh; padding-bottom:31vh; scroll-padding-block:31vh; }

  /* The persistent player gains vertical breathing room between its three zones. */
  :root { --player-height:148px; }
  .player-bar {
    height:var(--player-height); grid-template-rows:50px 28px 48px; gap:5px;
    padding:10px 13px 11px; border-radius:24px;
  }
  .mobile-player-timeline { height:28px; align-self:center; }
  .mobile-player-controls { height:48px; align-self:end; }
  .now-playing-summary { align-self:start; }
}

@media (max-width:430px) {
  .now-playing-left-inner { padding-inline:18px; }
  .cover-stage { width:min(80vw,326px); }
  .sheet-utility-row { justify-self:end; }
  .hero-card,.editorial-banner { height:clamp(350px,96vw,405px)!important; }
}


/* v1.9 — visual clarity, softer controls and compact Apple-like listening surfaces */
html[data-theme="tiffany"] { --accent:#0ABAB5; --accent-2:#A7E7E3; }
html[data-theme="hermes"] { --accent:#F37021; --accent-2:#FFC08D; }

/* More transparent hierarchy without the grey veil. */
:root {
  --bg:#f8f8fa;
  --panel:rgba(255,255,255,.97);
  --surface-2:#f0f1f5;
  --muted:#6f727c;
  --line:rgba(20,22,30,.085);
}
body {
  background:
    radial-gradient(circle at 82% -8%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 34%),
    radial-gradient(circle at 8% 15%,rgba(255,224,234,.20),transparent 24%),
    var(--bg);
}
html[data-color-mode="dark"] {
  --bg:#0d0e13;
  --panel:rgba(20,21,27,.97);
  --surface:#171920;
  --surface-2:#20232c;
  --text:#f7f7fa;
  --muted:#a9acb7;
  --line:rgba(255,255,255,.085);
}
html[data-color-mode="dark"] body {
  background:
    radial-gradient(circle at 82% -12%,color-mix(in srgb,var(--accent) 15%,transparent),transparent 34%),
    radial-gradient(circle at 8% 10%,rgba(84,56,76,.15),transparent 24%),
    #0d0e13;
}

/* Softer typography and slightly smaller display titles. */
.primary-button,.secondary-button,.outline-button,.text-button,.nav-item,.control-button,.icon-button {
  font-weight:600;
}
.hero-card h1 { font-size:clamp(38px,4.05vw,58px); }
.editorial-copy h2 { font-size:clamp(38px,5.35vw,66px); }
.page-heading h1 { font-size:clamp(36px,4.5vw,56px); }
.artist-detail-hero h1 { font-size:clamp(44px,6vw,72px); }
.album-detail-copy h1 { font-size:clamp(38px,5.2vw,66px); }
.section-heading h2 { font-size:26px; }

/* Rounded SVG controls replace sharp text glyphs. */
.control-button svg,.play-button svg,.icon-button svg,.track-play-button svg {
  width:22px;height:22px;display:block;overflow:visible;
}
.control-button svg path,.icon-button svg path,.track-play-button svg path {
  fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;
}
.play-button svg path,.play-button svg rect,.track-play-button svg rect {
  fill:currentColor;stroke:currentColor;stroke-width:.6;stroke-linejoin:round;
}
.track-play-button svg { width:19px;height:19px; }
.sheet-header>[data-close-panel="now-playing"] {
  width:42px;height:42px;min-width:42px;border:1px solid var(--line);
  background:color-mix(in srgb,var(--surface) 82%,transparent);
}
.sheet-header>[data-close-panel="now-playing"] svg { width:21px;height:21px; }

/* Apple-like ambience uses the current cover as a restrained blurred layer. */
.now-playing-sheet {
  isolation:isolate;
  background:color-mix(in srgb,var(--bg) 92%,transparent);
}
.now-playing-sheet::before {
  content:"";position:absolute;inset:-12%;z-index:-2;pointer-events:none;
  background-image:linear-gradient(115deg,color-mix(in srgb,var(--bg) 80%,transparent),color-mix(in srgb,var(--accent) 9%,transparent)),var(--current-cover-image);
  background-size:cover;background-position:center;
  filter:blur(72px) saturate(.85);opacity:.14;transform:scale(1.08);
}
.now-playing-sheet::after {
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(135deg,color-mix(in srgb,var(--surface) 70%,transparent),color-mix(in srgb,var(--bg) 88%,transparent));
}
html[data-color-mode="dark"] .now-playing-sheet::before { opacity:.20;filter:blur(78px) saturate(.9); }
html[data-color-mode="dark"] .now-playing-sheet::after { background:linear-gradient(135deg,rgba(15,16,21,.82),rgba(13,14,19,.94)); }

/* Comment drawer: breathing room after the divider. */
.track-comments-sheet .drawer-comments-list { padding-top:18px; }
.track-comments-sheet .drawer-comments-list>.empty-card { margin-top:0; padding:30px 20px; }

/* Queue should preserve more of the page. */
.queue-drawer .drawer-sheet { width:min(405px,88vw); padding:24px 22px; }
.queue-drawer .drawer-header h2 { font-size:25px; }
.queue-drawer .queue-item { grid-template-columns:30px 42px minmax(0,1fr) 46px 30px; gap:8px; }
.queue-drawer .queue-item img { width:42px;height:42px; }
.queue-drawer .queue-tip { line-height:1.55; }

/* Artist cards and artist hero use less vertical territory. */
.artist-detail-hero { grid-template-columns:180px minmax(0,1fr); gap:34px; margin:14px 0 34px; }
.artist-detail-avatar,.artist-initial { width:180px;height:180px; }
.artist-detail-avatar span,.artist-initial { font-size:64px; }

/* Banner and pages feel clearer, less smoky. */
.surface-card,.info-card,.article-paper,.about-hero-card,.acknowledgements-section {
  background:color-mix(in srgb,var(--surface) 91%,transparent);
  backdrop-filter:blur(12px);
}
html[data-color-mode="dark"] .surface-card,
html[data-color-mode="dark"] .info-card,
html[data-color-mode="dark"] .article-paper {
  background:rgba(23,25,32,.92);
}

/* Playback controls keep a gentler geometry. */
.control-button,.icon-button,.play-button { border-radius:999px; }
.sheet-transport .control-button { background:color-mix(in srgb,var(--surface) 75%,transparent); border:1px solid var(--line); }
.sheet-transport .play-button { border-radius:50%; }

/* Donation assets remain aligned and legible in all card widths. */
#donationDialog img { background:#fff; }

/* Mobile-first refinements for iPhone-class widths. */
@media (max-width:720px) {
  .hero-card h1,.editorial-copy h2 { font-size:clamp(31px,8.2vw,39px); }
  .page-heading h1 { font-size:clamp(34px,9.8vw,43px); }
  .artist-detail-hero h1 { font-size:clamp(38px,11vw,50px); }

  /* Fix the abnormal giant void between cover and metadata. */
  .now-playing-left-inner {
    min-height:calc(100dvh - 68px);
    display:flex!important;
    flex-direction:column;
    justify-content:flex-start;
    align-items:stretch;
    gap:0;
    padding:22px 20px 28px;
  }
  .cover-stage {
    width:min(76vw,322px);
    max-height:none;
    align-self:center;
    flex:0 0 auto;
  }
  .song-title-block {
    width:100%;
    margin-top:clamp(42px,7dvh,68px);
    padding-right:58px;
  }
  .sheet-progress-row { width:100%;margin-top:22px; }
  .sheet-transport { width:100%;margin-top:18px; }
  .sheet-volume { width:100%;margin-top:18px; }
  .sheet-utility-row {
    position:absolute;
    right:20px;
    top:auto;
    bottom:178px;
    width:auto;
    margin:0;
  }

  /* Persistent player gains safe-area space below controls. */
  :root { --player-height:164px; }
  .player-bar {
    height:var(--player-height);
    grid-template-rows:52px 30px 50px;
    gap:8px;
    padding:12px 14px calc(15px + env(safe-area-inset-bottom));
    bottom:8px;
  }
  .mobile-player-controls { align-self:center; }
  .mobile-player-timeline { align-self:center; }

  /* Smaller artist portraits on phone. */
  .artist-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .artist-card { display:grid;justify-items:center; }
  .artist-avatar { width:min(29vw,116px); }
  .artist-avatar span { font-size:36px; }
  .artist-card h3 { margin-top:10px; }
  .artist-detail-hero {
    grid-template-columns:1fr;
    gap:18px;
    margin:10px 0 28px;
  }
  .artist-detail-avatar,.artist-initial { width:126px;height:126px; }
  .artist-detail-avatar span,.artist-initial { font-size:46px; }

  .queue-drawer .drawer-sheet { width:min(88vw,390px); padding:22px 18px; }
}
@media (max-width:430px) {
  .now-playing-left-inner { padding-inline:18px; }
  .cover-stage { width:min(78vw,312px); }
  .song-title-block { margin-top:clamp(34px,6dvh,54px); }
  .sheet-utility-row { right:18px; bottom:174px; }
}

/* Article text remains sans-serif and slightly smaller. */
.article-body {
  font-family:"SF Pro Text","Segoe UI Variable Text","Segoe UI","PingFang SC","Noto Sans CJK SC","Microsoft YaHei",system-ui,sans-serif;
  font-size:15.5px;
  line-height:1.82;
}
.article-body h2 { font-size:25px; }
.article-body h3 { font-size:19px; }

.album-play-overlay svg,.article-song-card b svg {
  width:20px;height:20px;display:block;
}
.album-play-overlay svg path,.article-song-card b svg path,.track-play-button svg path {
  fill:currentColor;stroke:currentColor;stroke-width:.6;stroke-linejoin:round;
}
.article-song-card b { display:grid;place-items:center; }


/* v1.10 — album-grid consistency, compact mobile banners and continuous carousel polish */
html[data-color-mode="dark"] .album-play-overlay {
  background:rgba(23,24,31,.90);
  color:#fff;
  border:1px solid rgba(255,255,255,.13);
  box-shadow:0 10px 25px rgba(0,0,0,.36);
  backdrop-filter:blur(14px);
}
html[data-color-mode="dark"] .album-play-overlay:hover {
  background:color-mix(in srgb,var(--accent) 72%,#17181f);
  border-color:color-mix(in srgb,var(--accent) 55%,rgba(255,255,255,.13));
}
.comment-like.is-liked,
.comment-like.is-liked span {
  color:var(--accent);
}
.comment-like.is-liked {
  background:color-mix(in srgb,var(--accent) 11%,transparent);
  border-color:color-mix(in srgb,var(--accent) 30%,var(--line));
}

/* Every album browser uses a predictable four-column rhythm. */
.album-grid,
.large-grid {
  grid-template-columns:repeat(4,minmax(0,1fr));
}

/* The admin song list no longer shows a stray surname tile before the artist. */
.artist-track-group>header>div { gap:0; }

@media (max-width:720px) {
  /* Banner aligns with all other phone content and remains a landscape card. */
  .banner-shell {
    width:100%;
    max-width:none;
    margin:10px 0 0;
  }
  .banner-track { border-radius:22px; }
  .hero-card,
  .editorial-banner {
    width:100%;
    height:auto!important;
    min-height:0!important;
    aspect-ratio:16/9!important;
    border-radius:22px;
  }
  .intro-slide .hero-copy,
  .editorial-copy {
    width:min(76%,330px);
    max-width:none;
    padding:20px 20px;
    align-self:center;
  }
  .hero-card h1,
  .editorial-copy h2 {
    font-size:clamp(25px,7.6vw,34px);
    line-height:1.04;
  }
  .hero-card .hero-copy>p:not(.eyebrow),
  .editorial-copy>p:not(.eyebrow) {
    max-width:100%;
    margin-block:8px 0;
    font-size:11px;
    line-height:1.45;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden;
  }
  .hero-actions { margin-top:12px; gap:7px; }
  .hero-actions .primary-button,
  .hero-actions .secondary-button,
  .editorial-copy .secondary-button {
    min-height:34px;
    padding-inline:12px;
    font-size:11px;
  }
  .banner-overlay {
    background:linear-gradient(90deg,rgba(10,10,15,.86) 0%,rgba(10,10,15,.55) 57%,rgba(10,10,15,.12));
  }

  /* Four compact album covers on every phone album surface. */
  .album-grid,
  .large-grid {
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:18px 7px;
  }
  .album-art-wrap { border-radius:12px; }
  .album-card h3 { margin-top:7px; font-size:10.5px; }
  .album-card p { font-size:8.5px; }
  .album-play-overlay {
    right:5px;
    bottom:5px;
    width:27px;
    height:27px;
  }
  .album-play-overlay svg { width:14px;height:14px; }
}

@media (max-width:430px) {
  .hero-card,
  .editorial-banner { aspect-ratio:16/9!important; }
  .intro-slide .hero-copy,
  .editorial-copy { padding:17px 17px; }
  .hero-card h1,
  .editorial-copy h2 { font-size:clamp(23px,7vw,30px); }
}

/* v1.11 — centred transport, immersive fullscreen and mobile-first refinement */
.play-button,
.compact-play,
.large-play {
  background:var(--accent)!important;
  color:#fff!important;
  box-shadow:0 10px 26px color-mix(in srgb,var(--accent) 31%,transparent)!important;
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}
.play-button:hover { transform:scale(1.035); filter:saturate(1.04); }
.play-button:active { transform:scale(.96); }
.control-button.is-active,
.icon-button.is-active {
  color:var(--accent)!important;
  background:color-mix(in srgb,var(--accent) 13%,var(--surface))!important;
  border-color:color-mix(in srgb,var(--accent) 30%,var(--line))!important;
  box-shadow:0 7px 18px color-mix(in srgb,var(--accent) 12%,transparent);
}
#sheetShuffle.is-active { transform:scale(1.03); }
.queue-control svg path,
.queue-control svg circle { stroke:currentColor; }
html[data-color-mode="dark"] .queue-control {
  color:#d7d9e1;
  background:rgba(255,255,255,.055);
  border-color:rgba(255,255,255,.08);
}
html[data-color-mode="dark"] .queue-control:hover,
html[data-color-mode="dark"] .queue-control.is-active {
  color:var(--accent);
  background:color-mix(in srgb,var(--accent) 16%,#1a1c23);
}

/* Five transport actions are visually symmetric around the play button. */
.transport-row,
.sheet-transport,
.mobile-player-controls {
  justify-content:center!important;
}
.transport-row { gap:clamp(9px,1.15vw,16px); }
.transport-row>.control-button { width:42px; min-width:42px; height:42px; }
.sheet-transport {
  width:min(46vh,460px);
  grid-template-columns:48px 58px 76px 58px 48px!important;
  gap:10px;
}
.sheet-transport>.control-button { justify-self:center; }
.player-actions { gap:8px; }
.fullscreen-button svg { width:20px;height:20px; }
.sheet-header-actions { display:flex; align-items:center; justify-content:flex-end; gap:7px; min-width:92px; }
.sheet-header>button:first-child { flex:0 0 auto; }
.sheet-header>div:nth-child(2) { min-width:0; }
.sheet-header>div:nth-child(2) strong { max-width:min(42vw,440px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* True fullscreen and CSS fallback share the same immersive surface. */
.now-playing-panel:fullscreen,
.now-playing-panel:-webkit-full-screen,
.now-playing-panel.is-immersive { background:var(--bg); }
.now-playing-panel:fullscreen .panel-backdrop,
.now-playing-panel:-webkit-full-screen .panel-backdrop,
.now-playing-panel.is-immersive .panel-backdrop { display:none; }
.now-playing-panel:fullscreen .now-playing-sheet,
.now-playing-panel:-webkit-full-screen .now-playing-sheet,
.now-playing-panel.is-immersive .now-playing-sheet {
  inset:0;
  border-radius:0;
  box-shadow:none;
}
.now-playing-panel.is-immersive .sheet-header {
  padding-top:env(safe-area-inset-top);
  height:calc(68px + env(safe-area-inset-top));
}
.now-playing-panel.is-immersive .now-playing-scroll { height:calc(100% - 68px - env(safe-area-inset-top)); }

/* Switching from artwork to lyrics transitions the whole listening surface, never spins the cover. */
.cover-stage,
.cover-stage img { perspective:none!important; transform-style:flat!important; }
.now-playing-sheet.is-cover-transition .cover-stage img { transform:none!important; filter:none!important; opacity:1!important; }
.now-playing-layout { transition:opacity .26s ease,transform .32s cubic-bezier(.22,1,.36,1),filter .26s ease; }
.now-playing-sheet.is-view-transition .now-playing-layout {
  opacity:.42;
  transform:scale(.992);
  filter:blur(4px);
}

/* Active lyric glow is soft, theme-coloured and intentionally unbounded. */
.lyrics-scroller { overflow-x:visible; padding-inline:18px; margin-inline:-18px; }
.lyric-line {
  position:relative;
  z-index:0;
  contain:layout!important;
  overflow:visible;
  text-shadow:none;
}
.lyric-line.is-active {
  text-shadow:0 0 24px color-mix(in srgb,var(--accent) 24%,transparent)!important;
}
.lyric-line.is-active::after {
  content:"";
  position:absolute;
  left:2%;
  right:18%;
  bottom:-10px;
  height:24px;
  z-index:-1;
  pointer-events:none;
  border-radius:999px;
  background:radial-gradient(ellipse at center,color-mix(in srgb,var(--accent) 38%,transparent),transparent 72%);
  filter:blur(12px);
  opacity:.54;
}
html[data-color-mode="dark"] .lyric-line.is-active::after { opacity:.68; }

/* Queue: one calm drag handle, no arrow controls or instructional clutter. */
.queue-drawer .queue-item,
.queue-item {
  grid-template-columns:30px 42px minmax(0,1fr) 30px!important;
}
.queue-order-buttons,.queue-tip { display:none!important; }
.queue-handle {
  cursor:grab;
  touch-action:none;
  color:var(--muted);
  background:transparent;
  border:0;
}
.queue-handle:active { cursor:grabbing; }
.queue-handle svg { width:18px;height:24px;fill:none!important; }
.queue-handle svg path { fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round; }
.queue-item.is-pointer-dragging { opacity:.22; }
.queue-drag-ghost {
  border:1px solid color-mix(in srgb,var(--accent) 38%,var(--line));
  border-radius:16px;
  background:color-mix(in srgb,var(--surface) 92%,transparent);
  box-shadow:0 22px 50px rgba(0,0,0,.24);
  transform:scale(1.018);
  opacity:.96;
}
body.is-sorting-queue { user-select:none; -webkit-user-select:none; overflow:hidden; }

/* Collapsed desktop navigation keeps the selected icon exactly centred. */
@media (max-width:980px) and (min-width:861px) {
  .sidebar .nav-list { width:100%; justify-items:center; }
  .sidebar .nav-item {
    display:grid!important;
    grid-template-columns:1fr!important;
    place-items:center!important;
    width:50px!important;
    min-width:50px;
    padding:0!important;
    gap:0!important;
  }
  .sidebar .nav-item .nav-icon { width:22px; justify-self:center!important; margin:0!important; }
}

/* Compact album detail keeps the song list visible on the first phone screen. */
@media (max-width:720px) {
  .album-detail-hero {
    grid-template-columns:118px minmax(0,1fr)!important;
    gap:16px!important;
    align-items:center!important;
    margin-bottom:22px;
  }
  .album-detail-hero>img {
    width:118px!important;
    max-width:118px!important;
    margin:0!important;
    border-radius:18px;
  }
  .album-detail-copy { min-width:0; }
  .album-detail-copy h1 { font-size:clamp(25px,7.4vw,34px)!important; line-height:1.06; }
  .album-detail-copy .artist-link { margin-top:8px;font-size:15px; }
  .album-detail-copy .muted-copy { font-size:11px; }
  .album-detail-copy .album-description {
    margin:8px 0 0;
    font-size:11px;
    line-height:1.5;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden;
  }
  .album-detail-copy .hero-actions { margin-top:12px; gap:7px; }
  .album-detail-copy .hero-actions button { min-height:36px; padding:0 11px; font-size:10px; }

  /* Cover breathes lower while metadata and transport settle against the bottom. */
  .now-playing-left-inner {
    min-height:calc(100dvh - 64px)!important;
    padding:18px 20px max(24px,env(safe-area-inset-bottom))!important;
  }
  .cover-stage {
    width:min(74vw,312px)!important;
    margin-top:clamp(20px,4.5dvh,46px)!important;
  }
  .song-title-block {
    margin-top:auto!important;
    padding-top:clamp(28px,5dvh,54px);
  }
  .sheet-progress-row { margin-top:18px!important; }
  .sheet-transport {
    width:100%!important;
    display:grid!important;
    grid-template-columns:42px 50px 64px 50px 42px!important;
    gap:7px!important;
    margin-top:15px!important;
  }
  .sheet-volume { margin-top:14px!important; }
  .sheet-utility-row { bottom:164px!important; }
  .mobile-player-controls { gap:clamp(8px,5vw,26px)!important; }
  .mobile-player-controls button { flex:0 0 38px!important; }
  .mobile-player-controls .compact-play { flex-basis:46px!important; }
  .sheet-header-actions { min-width:84px; gap:4px; }
  .sheet-header-actions .icon-button { width:38px;height:38px; }
  .lyrics-scroller { padding-inline:28px!important; margin-inline:-12px!important; }
}

@media (max-width:390px) {
  .album-detail-hero { grid-template-columns:104px minmax(0,1fr)!important; gap:13px!important; }
  .album-detail-hero>img { width:104px!important;max-width:104px!important; }
  .album-detail-copy h1 { font-size:24px!important; }
  .sheet-transport { grid-template-columns:38px 46px 60px 46px 38px!important; gap:5px!important; }
  .mobile-player-controls { gap:clamp(5px,4vw,18px)!important; }
}
.current-lyric-preview {
  margin:12px 0 0!important;
  max-width:100%;
  color:color-mix(in srgb,var(--accent) 72%,var(--text))!important;
  font-size:13px!important;
  line-height:1.55;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  opacity:.78;
}
@media (max-width:720px) {
  .current-lyric-preview { margin-top:10px!important;font-size:12px!important; }
}

/* v1.12 — focused immersive playback and calmer lyric navigation */
.control-button svg text,
.icon-button svg text {
  fill:currentColor;
  stroke:none;
  font-family:"SF Pro Text","Segoe UI",system-ui,sans-serif;
  font-size:7px;
  font-weight:750;
}

/* The listening-room header has one clear action per side. */
.sheet-header {
  display:grid;
  grid-template-columns:48px minmax(0,1fr) 48px;
  align-items:center;
}
.sheet-header>div:nth-child(2) { justify-self:center; min-width:0; }
.sheet-header-actions {
  width:44px;
  min-width:44px!important;
  justify-self:end;
  justify-content:center!important;
  flex-direction:row!important;
  gap:0!important;
}
.sheet-header-actions .fullscreen-button {
  width:42px;
  height:42px;
  border:1px solid var(--line);
  background:color-mix(in srgb,var(--surface) 84%,transparent);
}
.sheet-header-actions .fullscreen-button:hover {
  color:var(--accent);
  border-color:color-mix(in srgb,var(--accent) 34%,var(--line));
  background:var(--accent-soft);
}

/* Comment access belongs to the metadata block, not beside the seek bar. */
.song-title-block { position:relative; padding-right:64px; }
.sheet-utility-row {
  position:absolute!important;
  top:2px!important;
  right:0!important;
  bottom:auto!important;
  width:auto!important;
  margin:0!important;
  z-index:3;
}

/* Lyrics receive a readable inset and fade naturally at both edges. */
.lyrics-column { min-width:0; }
.lyrics-heading { padding-inline:clamp(36px,4.6vw,76px)!important; }
.lyrics-scroller {
  width:100%;
  height:auto!important;
  min-height:0!important;
  flex:1 1 auto;
  box-sizing:border-box;
  margin-inline:0!important;
  padding-left:clamp(48px,6vw,104px)!important;
  padding-right:clamp(44px,5.5vw,92px)!important;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 10%,#000 89%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 10%,#000 89%,transparent 100%);
}
.lyric-line {
  width:fit-content;
  max-width:min(100%,780px);
  transform-origin:left center;
}
.lyric-line.is-active {
  text-shadow:
    0 0 10px color-mix(in srgb,var(--accent) 34%,transparent),
    0 0 25px color-mix(in srgb,var(--accent) 20%,transparent),
    0 0 48px color-mix(in srgb,var(--accent) 9%,transparent)!important;
  filter:none!important;
}
.lyric-line.is-active::after { display:none!important; content:none!important; }
.lyric-contribute-button {
  position:relative;
  z-index:6;
  flex:0 0 auto;
  margin-top:10px!important;
  margin-bottom:18px!important;
}

/* View switching is one continuous cross-fade, with no staged pause or cover spin. */
.now-playing-layout {
  transition:opacity .22s ease,transform .28s cubic-bezier(.22,1,.36,1)!important;
}
.now-playing-sheet.is-view-transition .now-playing-layout {
  opacity:.82!important;
  transform:translate3d(0,2px,0) scale(.998)!important;
  filter:none!important;
}

/* Fullscreen is a dedicated listening surface: artwork, metadata, transport and lyrics only. */
.now-playing-panel.is-immersive .inline-comments,
.now-playing-panel.is-immersive .sheet-utility-row,
.now-playing-panel.is-immersive .lyric-contribute-button {
  display:none!important;
}
.now-playing-panel.is-immersive .sheet-header>[data-close-panel="now-playing"] {
  visibility:hidden;
  pointer-events:none;
}
.now-playing-panel.is-immersive .sheet-header {
  grid-template-columns:48px minmax(0,1fr) 48px;
  padding-inline:clamp(18px,2.4vw,38px);
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(26px);
}
.now-playing-panel.is-immersive .sheet-header-actions {
  position:relative;
  inset:auto;
}
.now-playing-panel.is-immersive .now-playing-scroll { overflow:hidden; }
.now-playing-panel.is-immersive .now-playing-layout {
  width:min(1480px,100%);
  height:100%;
  margin:0 auto;
  padding:clamp(28px,4vw,68px) clamp(30px,5vw,82px);
  display:grid!important;
  grid-template-columns:minmax(360px,.88fr) minmax(440px,1.12fr)!important;
  gap:clamp(44px,6vw,104px);
  align-items:center;
  background:transparent;
}
.now-playing-panel.is-immersive .now-playing-left {
  display:block!important;
  min-height:0!important;
  height:100%;
  overflow:hidden;
  border:0;
}
.now-playing-panel.is-immersive .now-playing-left-inner {
  width:min(100%,520px);
  height:100%;
  min-height:0!important;
  margin:0 auto;
  padding:0!important;
  display:flex!important;
  flex-direction:column;
  justify-content:center;
  align-items:stretch;
}
.now-playing-panel.is-immersive .cover-stage {
  width:min(34vw,48vh,500px)!important;
  max-width:100%;
  margin:0 auto!important;
  flex:0 0 auto;
}
.now-playing-panel.is-immersive .song-title-block,
.now-playing-panel.is-immersive .sheet-progress-row,
.now-playing-panel.is-immersive .sheet-transport,
.now-playing-panel.is-immersive .sheet-volume {
  width:min(100%,500px)!important;
  margin-left:auto;
  margin-right:auto;
}
.now-playing-panel.is-immersive .song-title-block {
  margin-top:clamp(20px,2.6vh,32px)!important;
  padding-right:0!important;
}
.now-playing-panel.is-immersive .sheet-progress-row { margin-top:18px!important; }
.now-playing-panel.is-immersive .sheet-transport { margin-top:16px!important; }
.now-playing-panel.is-immersive .sheet-volume { margin-top:16px!important; }
.now-playing-panel.is-immersive .lyrics-column {
  display:flex!important;
  visibility:visible!important;
  opacity:1!important;
  transform:none!important;
  pointer-events:auto!important;
  height:min(78vh,820px);
  min-height:420px;
  border-left:1px solid color-mix(in srgb,var(--line) 62%,transparent);
  border-radius:0;
  background:transparent!important;
}
.now-playing-panel.is-immersive .lyrics-heading {
  min-height:70px;
  padding:10px clamp(42px,4vw,72px) 12px!important;
  border-bottom:0;
  background:transparent!important;
  backdrop-filter:none!important;
}
.now-playing-panel.is-immersive .lyrics-back { display:none!important; }
.now-playing-panel.is-immersive .lyrics-scroller {
  padding-top:30vh!important;
  padding-bottom:30vh!important;
  scroll-padding-block:30vh;
  padding-left:clamp(52px,5vw,92px)!important;
  padding-right:clamp(38px,4vw,74px)!important;
}

html[data-color-mode="dark"] .sheet-header-actions .fullscreen-button {
  color:#e5e7ed;
  background:rgba(255,255,255,.055);
  border-color:rgba(255,255,255,.09);
}

@media (max-width:720px) {
  .sheet-header { grid-template-columns:42px minmax(0,1fr) 42px!important; }
  .sheet-header-actions { width:40px;min-width:40px!important; }
  .sheet-header-actions .fullscreen-button { width:38px;height:38px; }
  .song-title-block { padding-right:58px!important; }
  .sheet-utility-row { top:1px!important;right:0!important;bottom:auto!important; }
  .lyrics-heading { padding-inline:20px!important; }
  .lyrics-scroller {
    padding-left:28px!important;
    padding-right:24px!important;
    margin-inline:0!important;
    padding-top:30vh!important;
    padding-bottom:30vh!important;
    scroll-padding-block:30vh!important;
  }
  .lyric-line { max-width:100%; }
  .lyric-contribute-button {
    width:calc(100% - 40px)!important;
    margin:10px 20px max(16px,env(safe-area-inset-bottom))!important;
  }

  /* Both panes remain mounted while fading, so tapping the cover never feels delayed. */
  .now-playing-panel:not(.is-immersive) .now-playing-layout {
    display:grid!important;
    grid-template:1fr/1fr!important;
  }
  .now-playing-panel:not(.is-immersive) .now-playing-left,
  .now-playing-panel:not(.is-immersive) .lyrics-column {
    grid-area:1/1;
    display:block!important;
    transition:opacity .25s ease,transform .3s cubic-bezier(.22,1,.36,1),visibility 0s linear .3s;
  }
  .now-playing-panel:not(.is-immersive) .lyrics-column {
    display:flex!important;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translate3d(14px,0,0);
  }
  .now-playing-panel:not(.is-immersive) .now-playing-sheet.is-lyrics-focus .now-playing-left {
    display:block!important;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translate3d(-14px,0,0);
  }
  .now-playing-panel:not(.is-immersive) .now-playing-sheet.is-lyrics-focus .lyrics-column {
    display:flex!important;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:none;
    transition-delay:0s;
  }

  /* Phone fullscreen keeps compact artwork and controls above a faded lyric viewport. */
  .now-playing-panel.is-immersive .now-playing-scroll { overflow-y:auto; }
  .now-playing-panel.is-immersive .now-playing-layout {
    width:100%;
    height:auto;
    min-height:calc(100dvh - 68px - env(safe-area-inset-top));
    padding:12px 18px calc(22px + env(safe-area-inset-bottom));
    grid-template-columns:1fr!important;
    grid-template-rows:auto minmax(52dvh,1fr);
    gap:14px;
    align-items:stretch;
  }
  .now-playing-panel.is-immersive .now-playing-left {
    display:block!important;
    height:auto;
    overflow:visible;
  }
  .now-playing-panel.is-immersive .now-playing-left-inner {
    width:100%;
    height:auto;
    display:grid!important;
    grid-template-columns:112px minmax(0,1fr);
    grid-template-rows:auto auto auto auto;
    column-gap:15px;
    row-gap:9px;
    padding:6px 0 12px!important;
  }
  .now-playing-panel.is-immersive .cover-stage {
    grid-column:1;
    grid-row:1 / 5;
    width:112px!important;
    margin:0!important;
    align-self:center;
  }
  .now-playing-panel.is-immersive .song-title-block {
    grid-column:2;
    grid-row:1;
    width:100%!important;
    margin:0!important;
  }
  .now-playing-panel.is-immersive .song-title-block h2 { font-size:23px; }
  .now-playing-panel.is-immersive .current-lyric-preview { display:none; }
  .now-playing-panel.is-immersive .sheet-progress-row {
    grid-column:2;
    grid-row:2;
    width:100%!important;
    margin:0!important;
  }
  .now-playing-panel.is-immersive .sheet-transport {
    grid-column:2;
    grid-row:3;
    width:100%!important;
    margin:0!important;
    grid-template-columns:32px 38px 48px 38px 32px!important;
    gap:4px!important;
  }
  .now-playing-panel.is-immersive .sheet-transport .control-button { width:32px;height:32px; }
  .now-playing-panel.is-immersive .sheet-transport .large-play { width:46px;height:46px; }
  .now-playing-panel.is-immersive .sheet-volume {
    grid-column:2;
    grid-row:4;
    width:100%!important;
    margin:0!important;
  }
  .now-playing-panel.is-immersive .lyrics-column {
    grid-column:1;
    grid-row:2;
    display:flex!important;
    height:58dvh;
    min-height:430px;
    border-left:0;
    border-top:1px solid color-mix(in srgb,var(--line) 65%,transparent);
  }
  .now-playing-panel.is-immersive .lyrics-heading { padding-inline:20px!important; }
  .now-playing-panel.is-immersive .lyrics-scroller {
    padding-left:28px!important;
    padding-right:22px!important;
    padding-top:25vh!important;
    padding-bottom:25vh!important;
    scroll-padding-block:25vh!important;
  }
}

/* v1.13 — safe-area polish, calmer contribution guide and refined immersive atmosphere */
html[data-theme="klein"] { --accent:#002FA7; --accent-2:#7DA2FF; }
html[data-theme="racing"] { --accent:#004225; --accent-2:#77A58B; }
html[data-theme="ferrari"] { --accent:#D40000; --accent-2:#FF8B84; }
html[data-theme="cartier"] { --accent:#A6192E; --accent-2:#DEA0A8; }
html[data-theme="bottega"] { --accent:#006B54; --accent-2:#83C6B5; }
html[data-theme="dior"] { --accent:#73777A; --accent-2:#C0C3C5; }
html[data-theme="porsche"] { --accent:#8F887F; --accent-2:#D5D0C8; }
html[data-theme="bulgari"] { --accent:#9A7442; --accent-2:#D8BE91; }

/* Real SVG magnifiers remain optically centred in every search field. */
.search-icon {
  width:22px;
  height:100%;
  flex:0 0 22px;
  display:grid!important;
  place-items:center;
  align-self:stretch;
  line-height:1;
  color:var(--muted);
}
.search-icon svg { width:18px; height:18px; display:block; }
.search-icon svg circle,.search-icon svg path {
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* The contribution instructions are compact, visual and easier to scan. */
.contribution-guide { padding:24px!important; }
.guide-heading { display:flex; align-items:center; gap:13px; }
.guide-heading .eyebrow { margin-bottom:5px; }
.guide-heading h2 { margin:0; }
.guide-icon {
  width:44px; height:44px; flex:0 0 44px; display:grid; place-items:center;
  border-radius:14px; color:var(--accent); background:var(--accent-soft);
  border:1px solid color-mix(in srgb,var(--accent) 18%,var(--line));
}
.guide-icon svg { width:23px; height:23px; }
.guide-icon path { fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.folder-tree {
  margin:18px 0 14px; padding:15px 16px; border-radius:18px;
  background:color-mix(in srgb,var(--surface-2) 82%,transparent);
  border:1px solid var(--line); display:grid; gap:8px;
  font:500 13px/1.35 "SFMono-Regular",Consolas,"Liberation Mono",monospace;
}
.tree-row { min-width:0; display:flex; align-items:center; gap:8px; color:var(--muted); }
.tree-row strong { color:var(--text); font-weight:700; }
.tree-row.level-1 { padding-left:15px; }
.tree-row.level-2 { padding-left:34px; }
.tree-row.level-3 { padding-left:53px; }
.tree-branch { color:color-mix(in srgb,var(--muted) 68%,transparent); }
.tree-kind { width:11px; height:9px; flex:0 0 auto; position:relative; border-radius:2px; background:currentColor; color:var(--accent); }
.tree-kind.folder::before { content:""; position:absolute; left:1px; top:-3px; width:6px; height:4px; border-radius:2px 2px 0 0; background:currentColor; }
.tree-kind.image { color:#9B6CC8; }
.tree-kind.audio { color:#4E91C8; border-radius:50%; width:10px; height:10px; }
.tree-kind.lyric { color:#A67B39; width:9px; height:11px; border-radius:2px; }
.contribution-guide ul {
  margin:12px 0 0!important; padding-left:19px!important; display:grid; gap:5px;
  font-size:13px; line-height:1.55!important;
}
.contribution-guide li::marker { color:var(--accent); }
html[data-color-mode="dark"] .folder-tree { background:rgba(255,255,255,.035); }

/* Fullscreen gets a seamless theme-coloured frosted atmosphere rather than a stretched cover image. */
.now-playing-panel.is-immersive .now-playing-sheet::before {
  inset:-18%!important;
  background:
    radial-gradient(circle at 25% 34%,color-mix(in srgb,var(--accent) 23%,transparent),transparent 31%),
    radial-gradient(circle at 76% 58%,color-mix(in srgb,var(--accent-2) 18%,transparent),transparent 34%),
    radial-gradient(circle at 54% 12%,color-mix(in srgb,var(--accent) 10%,white),transparent 28%),
    linear-gradient(135deg,color-mix(in srgb,var(--bg) 90%,var(--accent) 10%),var(--bg));
  background-size:100% 100%!important;
  background-position:center!important;
  filter:blur(72px) saturate(1.04)!important;
  opacity:.68!important;
  transform:scale(1.08)!important;
}
.now-playing-panel.is-immersive .now-playing-sheet::after {
  background:linear-gradient(135deg,color-mix(in srgb,var(--surface) 58%,transparent),color-mix(in srgb,var(--bg) 80%,transparent))!important;
  backdrop-filter:blur(18px) saturate(1.05);
}
html[data-color-mode="dark"] .now-playing-panel.is-immersive .now-playing-sheet::before { opacity:.50!important; }
html[data-color-mode="dark"] .now-playing-panel.is-immersive .now-playing-sheet::after {
  background:linear-gradient(135deg,rgba(13,14,19,.78),rgba(13,14,19,.91))!important;
}
.now-playing-panel.is-immersive .cover-stage,
.now-playing-panel.is-immersive .cover-stage img {
  box-shadow:none!important;
  filter:none!important;
}
html:not([data-color-mode="dark"]) .now-playing-panel.is-immersive .cover-stage {
  background:transparent!important;
  box-shadow:0 18px 48px rgba(34,36,48,.075)!important;
}

/* Desktop listening room floats inside a genuine click-away margin; phone remains edge-to-edge. */
@media (min-width:861px) {
  .now-playing-panel:not(.is-immersive) .now-playing-sheet {
    inset:clamp(30px,3.2vw,50px)!important;
    border-radius:32px!important;
  }
}

/* Donation dialog is luminous glass, never a black slab. */
#donationDialog {
  background:transparent!important;
  color:var(--text);
  overflow:visible;
}
#donationDialog::backdrop {
  background:rgba(12,14,20,.34)!important;
  backdrop-filter:blur(14px) saturate(.85)!important;
}
#donationDialog form {
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--accent) 16%,var(--line));
  border-radius:28px;
  background:
    radial-gradient(circle at 82% 4%,color-mix(in srgb,var(--accent) 15%,transparent),transparent 34%),
    color-mix(in srgb,var(--surface) 90%,transparent);
  backdrop-filter:blur(30px) saturate(1.08);
  box-shadow:0 28px 90px rgba(10,12,20,.20);
}
#donationDialog img {
  padding:8px;
  background:#fff!important;
  border-color:rgba(25,28,38,.08)!important;
  box-shadow:0 14px 38px rgba(20,22,30,.10);
}
#donationDialog small { display:block; max-width:280px; margin:0 auto; font-size:12px; }
html[data-color-mode="dark"] #donationDialog form {
  background:
    radial-gradient(circle at 80% 0,color-mix(in srgb,var(--accent) 18%,transparent),transparent 38%),
    rgba(30,32,40,.94);
  border-color:rgba(255,255,255,.10);
  box-shadow:0 28px 90px rgba(0,0,0,.38);
}
html[data-color-mode="dark"] #donationDialog .dialog-x { background:rgba(255,255,255,.075); }

@media (max-width:720px) {
  /* Move the entire lower control cluster above iPhone home-indicator and rounded-corner danger zones. */
  .now-playing-left-inner {
    padding-left:max(20px,env(safe-area-inset-left))!important;
    padding-right:max(20px,env(safe-area-inset-right))!important;
    padding-bottom:max(58px,calc(env(safe-area-inset-bottom) + 42px))!important;
  }
  .song-title-block { padding-top:clamp(18px,3.2dvh,34px)!important; }
  .sheet-volume { margin-bottom:4px!important; }
  .now-playing-panel.is-immersive .now-playing-layout {
    padding-left:max(18px,env(safe-area-inset-left))!important;
    padding-right:max(18px,env(safe-area-inset-right))!important;
    padding-bottom:max(36px,calc(env(safe-area-inset-bottom) + 28px))!important;
  }

  /* Resource contribution should reveal the upload form without an oversized instruction wall. */
  #submitView .page-heading { padding-top:30px; padding-bottom:14px; }
  #submitView .page-heading h1 { font-size:clamp(31px,9vw,39px)!important; }
  #submitView .page-heading p:not(.eyebrow) { font-size:13px; line-height:1.55; }
  .contribution-layout { gap:16px; }
  .contribution-guide { padding:19px!important; border-radius:24px; }
  .guide-heading h2 { font-size:25px; }
  .guide-icon { width:40px; height:40px; flex-basis:40px; }
  .folder-tree { margin:14px 0 10px; padding:12px 13px; gap:6px; font-size:11.5px; }
  .tree-row.level-1 { padding-left:11px; }
  .tree-row.level-2 { padding-left:26px; }
  .tree-row.level-3 { padding-left:41px; }
  .contribution-guide ul { font-size:11.5px; gap:3px; line-height:1.48!important; }

  #donationDialog { width:min(390px,calc(100vw - 30px)); }
  #donationDialog form { padding:26px 22px 24px; border-radius:25px; }
  #donationDialog h2 { font-size:25px; }
  #donationDialog img { width:min(250px,72vw); margin:16px auto 13px; }
}
@media (max-width:720px) {
  .player-bar { bottom:max(10px,env(safe-area-inset-bottom)); }
}
html:not([data-color-mode="dark"]) .now-playing-panel.is-immersive .cover-stage {
  box-shadow:0 18px 54px color-mix(in srgb,var(--accent) 8%,transparent)!important;
}

/* v1.14 — seamless fullscreen, safer mobile player geometry and editable default editorial */
.intro-slide .hero-copy h1 {
  line-height:1.1!important;
}

/* Fullscreen is one continuous atmospheric canvas, never a dark card inside the viewport. */
.now-playing-panel.is-immersive {
  background:
    radial-gradient(circle at 23% 35%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 34%),
    radial-gradient(circle at 78% 55%,color-mix(in srgb,var(--accent-2) 12%,transparent),transparent 38%),
    linear-gradient(135deg,color-mix(in srgb,var(--bg) 94%,var(--accent) 6%),var(--bg))!important;
}
.now-playing-panel.is-immersive .now-playing-sheet {
  inset:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.now-playing-panel.is-immersive .now-playing-sheet::before {
  inset:-8%!important;
  background:
    radial-gradient(circle at 24% 34%,color-mix(in srgb,var(--accent) 21%,transparent),transparent 34%),
    radial-gradient(circle at 76% 60%,color-mix(in srgb,var(--accent-2) 15%,transparent),transparent 37%),
    radial-gradient(circle at 51% 14%,color-mix(in srgb,var(--accent) 7%,white),transparent 31%)!important;
  filter:blur(86px) saturate(1.03)!important;
  opacity:.56!important;
  transform:scale(1.02)!important;
}
.now-playing-panel.is-immersive .now-playing-sheet::after {
  display:none!important;
  content:none!important;
}
.now-playing-panel.is-immersive .sheet-header,
.now-playing-panel.is-immersive .now-playing-left,
.now-playing-panel.is-immersive .lyrics-column,
.now-playing-panel.is-immersive .now-playing-layout {
  background:transparent!important;
}
html[data-color-mode="dark"] .now-playing-panel.is-immersive .sheet-header,
html[data-color-mode="dark"] .now-playing-panel.is-immersive .now-playing-left {
  background:transparent!important;
}
html[data-color-mode="dark"] .now-playing-panel.is-immersive .now-playing-sheet::before {
  opacity:.43!important;
}

/* The public contribution tree starts at the artist level. */
.folder-tree .tree-row.level-0 {
  color:var(--accent);
  padding:3px 5px 8px;
  border-bottom:1px solid color-mix(in srgb,var(--accent) 18%,var(--line));
}
.folder-tree .tree-row.level-0 strong { color:var(--text); }
.folder-tree .tree-row.level-1 { padding-left:22px; }
.folder-tree .tree-row.level-2 { padding-left:48px; }

/* The lyric collaboration action stays reachable even in short desktop windows. */
.now-playing-panel:not(.is-immersive) .lyrics-column {
  padding-bottom:82px!important;
  overflow:hidden;
}
.now-playing-panel:not(.is-immersive) .lyric-contribute-button {
  position:absolute!important;
  left:clamp(36px,4.6vw,76px);
  bottom:18px;
  margin:0!important;
  z-index:10;
  box-shadow:0 10px 26px color-mix(in srgb,var(--bg) 38%,transparent);
}

/* Mobile persistent transport clears the iPhone gesture area and preserves perfect circles. */
@media (max-width:980px) {
  .player-bar {
    bottom:max(22px,calc(env(safe-area-inset-bottom) + 16px))!important;
    height:auto!important;
    min-height:148px;
    padding-bottom:13px!important;
  }
  .mobile-player-controls {
    min-height:50px!important;
    align-items:center!important;
  }
  .mobile-player-controls .control-button,
  .mobile-player-controls .play-button {
    flex:0 0 42px!important;
    width:42px!important;
    min-width:42px!important;
    max-width:42px!important;
    height:42px!important;
    min-height:42px!important;
    max-height:42px!important;
    aspect-ratio:1/1!important;
    border-radius:50%!important;
    padding:0!important;
  }
  .mobile-player-controls .compact-play {
    flex-basis:52px!important;
    width:52px!important;
    min-width:52px!important;
    max-width:52px!important;
    height:52px!important;
    min-height:52px!important;
    max-height:52px!important;
  }
  .main-content {
    padding-bottom:calc(var(--player-height) + 58px + env(safe-area-inset-bottom))!important;
  }
}
@media (max-width:620px) {
  .player-bar { min-height:145px; }
  .mobile-player-controls { justify-content:space-around!important; gap:5px!important; }
}
@media (max-width:720px) {
  .folder-tree .tree-row.level-1 { padding-left:18px; }
  .folder-tree .tree-row.level-2 { padding-left:39px; }
  .now-playing-panel:not(.is-immersive) .lyrics-column { padding-bottom:78px!important; }
  .now-playing-panel:not(.is-immersive) .lyric-contribute-button {
    left:20px;
    bottom:max(14px,env(safe-area-inset-bottom));
    width:calc(100% - 40px)!important;
  }
}
@media (max-height:700px) and (min-width:721px) {
  .now-playing-panel:not(.is-immersive) .lyrics-heading { min-height:58px; }
  .now-playing-panel:not(.is-immersive) .lyrics-scroller {
    padding-top:24vh!important;
    padding-bottom:24vh!important;
  }
  .now-playing-panel:not(.is-immersive) .lyric-contribute-button { bottom:12px; }
}


.editorial-copy > .secondary-button {
  margin-top: 30px !important;
}


.editorial-copy h2 {
    font-size: clamp(28px, 2.5vw, 36px) !important;
    line-height: 1.12 !important;
}


.hero-card h1 {
    font-size: clamp(30px, 2.8vw, 40px) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.03em;
}

/* 推荐 Banner：标题与摘要距离 */
.editorial-copy h2 {
  margin-bottom: clamp(4px, 0.6vw, 10px) !important;
}

.editorial-copy h2 + p {
  margin-top: 0 !important;
  margin-bottom: clamp(14px, 1.4vw, 24px) !important;
}


/* =================================
   全屏播放器固定背景最终覆盖
   ================================= */

.now-playing-panel.is-immersive {
  background:
    url("/images/player-bg.webp")
    center center / cover
    no-repeat !important;
}

/* 清除旧的主题渐变和模糊封面层 */
.now-playing-panel.is-immersive .now-playing-sheet::before {
  display: none !important;
  content: none !important;
}

/* 清除旧的玻璃渐变覆盖层 */
.now-playing-panel.is-immersive .now-playing-sheet::after {
  display: none !important;
  content: none !important;
}

/* 保持整个全屏播放器透明，让外层背景透出来 */
.now-playing-panel.is-immersive .now-playing-sheet,
.now-playing-panel.is-immersive .sheet-header,
.now-playing-panel.is-immersive .now-playing-layout,
.now-playing-panel.is-immersive .now-playing-left,
.now-playing-panel.is-immersive .lyrics-column {
  background: transparent !important;
}

@media (max-width:720px) {
  .now-playing-left .cover-stage {
      width:min(88vw,420px);
      transform:translateY(0px);
  }
}


@media (max-width:720px) {
  .album-detail-copy .album-description {
      -webkit-line-clamp:4;
  }
}



@media (max-width:720px) {
  .editorial-copy {
      transform:translateY(20px);
  }
}

.editorial-copy>p:not(.eyebrow) {
    transform: translate(4px, 8px);
}





@media (max-width:720px) {

  .now-playing-left .song-title-block,
  .now-playing-left .sheet-progress-row,
  .now-playing-left .sheet-volume,
  .now-playing-left .player-controls {
      width:calc(100% - 32px);
      margin-left:auto;
      margin-right:auto;
  }

}




@media (max-width:720px){

  .banner-shell,
  .section-heading,
  .album-grid,
  .track-list,
  .page-heading,
  .artist-grid {
    margin-left:-14px;
    margin-right:-14px;
    width:calc(100% + 28px);
    max-width:none;
  }

}



@media (max-width:720px){

  .lyrics-column .lyrics-submit,
  .lyrics-column .submit-lyrics,
  .lyrics-column .empty-action,
  .lyrics-column button {
    transform:translateY(-20px);
  }

}






/* ================================
   歌词顶部返回按钮对齐修复
   ================================ */

.lyrics-heading {
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    width:100%;
}

.lyrics-heading .lyrics-back {
    position:static !important;
    transform:none !important;
    margin:0 !important;
}

.lyrics-heading > div {
    flex:1;
    text-align:center;
}

.lyrics-heading > span {
    flex:0 0 auto;
}


/* 手机端保持自适应 */
@media (max-width:720px){

    .lyrics-heading {
        padding-left:20px !important;
        padding-right:20px !important;
    }

}

@media (max-width:720px){

  .editorial-copy .secondary-button {
    position:relative;
    top:-25px;
  }

}


/* =================================
   手机端沉浸式全屏播放器修正
   ================================= */

@media (max-width:720px){

  /* 全屏模式恢复封面显示 */
  .now-playing-panel.is-immersive .cover-stage {
      display:block !important;
      width:min(72vw,320px);
      margin:40px auto 28px;
      transform:none !important;
  }


  .now-playing-panel.is-immersive .cover-stage img {
      width:100%;
      height:auto;
      border-radius:24px;
  }


  /* 全屏时改为纵向布局 */
  .now-playing-panel.is-immersive .now-playing-layout {
      display:flex;
      flex-direction:column;
      align-items:center;
  }


  /* 左侧区域取消普通播放布局 */
  .now-playing-panel.is-immersive .now-playing-left {
      width:100%;
      display:flex;
      justify-content:center;
  }


  /* 歌曲信息居中 */
  .now-playing-panel.is-immersive .track-meta {
      text-align:center;
  }

}







/* =================================
   手机端沉浸式播放按钮尺寸修正
   ================================= */

@media (max-width:720px){

  .now-playing-panel.is-immersive .player-controls {
      display:flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      flex-wrap:nowrap;
  }


  .now-playing-panel.is-immersive .player-controls button {
      flex:0 0 auto;
      aspect-ratio:1 / 1;
      border-radius:50%;
  }


  /* 主播放按钮恢复 */
  .now-playing-panel.is-immersive .play-button {
      width:64px;
      height:64px;
      min-width:64px;
      min-height:64px;
  }

}



/* 修复手机全屏控制按钮圆形 */
@media (max-width:720px){

  .now-playing-panel.is-immersive .player-controls button {
      width:56px !important;
      height:56px !important;
      min-width:56px !important;
      min-height:56px !important;
      padding:0 !important;
      border-radius:50% !important;
      flex:none !important;
  }


  .now-playing-panel.is-immersive .player-controls .play-button {
      width:64px !important;
      height:64px !important;
      min-width:64px !important;
      min-height:64px !important;
  }

}



@media (max-width:720px){

  .editorial-copy {
      transform: translateY(-5px);
  }

}




/* 手机端文章正文优化 */
@media (max-width:720px){

  .article-content,
  .article-body,
  .article-detail,
  .article-text {
      font-size:14px;
      line-height:2;
      text-align:justify;
      text-justify:inter-ideograph;
      letter-spacing:-0.01em;
      word-break:normal;
  }


  .article-content p,
  .article-body p,
  .article-detail p,
  .article-text p {
      margin-bottom:24px;
      letter-spacing:-0.01em;
  }

}






/* 手机端 Banner 文字单独微调 */
@media (max-width:720px){

  /* Banner 主标题 */
  .editorial-copy h2 {
      font-size:33px;
      line-height:1.28;
      letter-spacing:-0.02em;
  }


  /* Banner 描述文字 */
  .editorial-copy h2 + p {
      font-size:16px;
      line-height:1.8;
      padding-right:0;
      max-width:100%;
  }

}


@media (max-width:720px){

  .now-playing-panel.is-immersive .sheet-utility-row {
      transform:translateY(25px) !important;
  }

}


/* 手机端全屏封面最终位置 */
@media (max-width:720px){

  .now-playing-panel.is-immersive .cover-stage,
  .now-playing-left .cover-stage {
      margin-top:15px !important;
      transform:translateY(0) !important;
  }

}







/* 手机端全屏评论按钮独立调整，避开自适应布局 */
@media (max-width:720px){

  .now-playing-panel.is-immersive .sheet-utility-row {
      position:relative !important;
      top:25px !important;
  }

}





/* =================================
   全屏播放器文字颜色最终覆盖
   无论网站处于亮色还是深色模式
   ================================= */

.now-playing-panel.is-immersive {
  --text: #ffffff;
  --muted: rgba(255, 255, 255, 0.58);
  --line: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

/* 顶部标题、歌曲名称、歌词标题 */
.now-playing-panel.is-immersive .sheet-header,
.now-playing-panel.is-immersive .song-title-block h2,
.now-playing-panel.is-immersive .lyrics-heading h3 {
  color: #ffffff !important;
}

/* 歌手、播放状态、时间、音量等次要文字 */
.now-playing-panel.is-immersive .sheet-header small,
.now-playing-panel.is-immersive .song-title-block p,
.now-playing-panel.is-immersive .current-lyric-preview,
.now-playing-panel.is-immersive .sheet-progress-row > div,
.now-playing-panel.is-immersive .sheet-volume,
.now-playing-panel.is-immersive .lyrics-heading > div:last-child,
.now-playing-panel.is-immersive .lyrics-placeholder {
  color: rgba(255, 255, 255, 0.58) !important;
}

/* 未播放到的歌词 */
.now-playing-panel.is-immersive .lyric-line {
  color: rgba(255, 255, 255, 0.24) !important;
}

/* 鼠标经过的歌词 */
.now-playing-panel.is-immersive .lyric-line:hover {
  color: rgba(255, 255, 255, 0.58) !important;
}

/* 已经播放过的歌词 */
.now-playing-panel.is-immersive .lyric-line.is-past {
  color: rgba(255, 255, 255, 0.14) !important;
}

/* 当前播放歌词 */
.now-playing-panel.is-immersive .lyric-line.is-active {
  color: #ffffff !important;
  text-shadow:
    0 0 16px color-mix(in srgb, var(--accent) 40%, transparent),
    0 0 32px color-mix(in srgb, var(--accent) 18%, transparent);
}



/* =================================
   全屏播放器控制按钮恢复克制样式
   文字保持白色，但按钮不再刺眼
   ================================= */

/* 右上角退出全屏按钮 */
.now-playing-panel.is-immersive
.sheet-header-actions
.fullscreen-button {
  color: rgba(255, 255, 255, 0.62) !important;
  background: rgba(12, 14, 18, 0.38) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: none !important;
}

.now-playing-panel.is-immersive
.sheet-header-actions
.fullscreen-button:hover {
  color: rgba(255, 255, 255, 0.9) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.13) !important;
}

/* 底部上一首、下一首、循环、列表按钮 */
.now-playing-panel.is-immersive
.sheet-transport
.control-button {
  color: rgba(255, 255, 255, 0.62) !important;
  background: rgba(14, 16, 21, 0.56) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  box-shadow: none !important;
}

.now-playing-panel.is-immersive
.sheet-transport
.control-button:hover {
  color: rgba(255, 255, 255, 0.92) !important;
  background: rgba(255, 255, 255, 0.09) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

/* 已启用的循环模式：只保留轻微主题色提示 */
.now-playing-panel.is-immersive
.sheet-transport
.control-button.is-active {
  color: color-mix(
    in srgb,
    var(--accent-2) 70%,
    white
  ) !important;

  background: color-mix(
    in srgb,
    var(--accent) 14%,
    rgba(14, 16, 21, 0.7)
  ) !important;

  border-color: color-mix(
    in srgb,
    var(--accent) 22%,
    rgba(255, 255, 255, 0.07)
  ) !important;
}

/* 中间播放按钮继续使用主题色 */
.now-playing-panel.is-immersive
.sheet-transport
.play-button,
.now-playing-panel.is-immersive
.sheet-transport
.large-play {
  color: #ffffff !important;
  background: var(--accent) !important;
  border-color: transparent !important;
}




/* Banner 箭头视觉居中修正 */
.banner-arrow {
  padding: 0 0 6px;
}


/* 左箭头向左，右箭头向右 */
.banner-prev {
  text-indent: -2px;
}

.banner-next {
  text-indent: 2px;
}



/* 手机端隐藏播放页面右上角全屏按钮 */
@media (max-width: 720px) {
  #sheetFullscreenButton {
    visibility: hidden !important;
    pointer-events: none !important;
  }
}


/* 手机端播放页面：评论图标向下微调 */
@media (max-width: 720px) {
  .now-playing-panel:not(.is-immersive) .sheet-utility-row {
    transform: translateY(22px) !important;
  }
}


/* 微信内置浏览器评论输入框防缩放补丁 */
@media (max-width: 720px) {
  html,
  body {
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
  }

  #commentComposerDrawer input,
  #commentComposerDrawer textarea,
  #commentNickname,
  #commentContent {
    font-size: 17px !important;
    line-height: 1.5 !important;
    -webkit-text-size-adjust: 100%;
  }
}