:root {
  --accent: #62d7ff;
  --accent-2: #c35cff;
}
html.music-document {
  height:100%;
  overflow:hidden;
  overscroll-behavior-x:none;
}
body.music-page {
  height:100%;
  min-height:100%;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior-x:none;
  overscroll-behavior-y:auto;
  scroll-behavior:auto;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;
  background:#03050a;
}
.music-site { min-height:100vh; height:auto; overflow:visible; background:#03050a; }
.music-bg,.music-colorwash { position:fixed; inset:-4%; pointer-events:none; will-change:transform; backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.music-bg {
  background-image:url('../assets/music-card.png');
  background-size:cover;
  background-position:center;
  filter:saturate(.82) contrast(1.08) brightness(.52);
  transform:scale(1.08);
}
.music-colorwash {
  background:
    radial-gradient(circle at 74% 24%, rgba(96,191,255,.20), transparent 22%),
    radial-gradient(circle at 32% 64%, rgba(205,70,255,.16), transparent 28%),
    linear-gradient(180deg, rgba(1,3,8,.32), #03050a 55%, #03050a 100%);
  mix-blend-mode:screen;
}
.music-main { position:relative; z-index:4; width:min(1360px,92vw); margin:0 auto; padding:130px 0 50px; }
.music-topbar { position:fixed; z-index:40; opacity:1; transform:none; background:linear-gradient(180deg, rgba(2,4,10,.82), rgba(2,4,10,0)); backdrop-filter:blur(8px); }
.music-topbar .topbar-left { display:flex; align-items:center; gap:18px; min-width:max-content; }
.music-topbar .back-world { color:rgba(238,246,255,.48); font-size:9px; letter-spacing:.22em; text-decoration:none; padding:8px 0; position:relative; transition:color .25s ease, transform .25s ease; }
.music-topbar .back-world::after { content:""; position:absolute; left:0; right:100%; bottom:2px; height:1px; background:linear-gradient(90deg,var(--accent-2),var(--accent)); transition:right .25s ease; }
.music-topbar .back-world:hover { color:#fff; transform:translateX(-2px); }
.music-topbar .back-world:hover::after { right:0; }
.music-topbar .nav-links a { color:rgba(238,246,255,.72); font-size:10px; letter-spacing:.24em; text-decoration:none; padding:8px 0; position:relative; }
.music-topbar .nav-links a::after { content:""; position:absolute; left:0; right:100%; bottom:2px; height:1px; background:linear-gradient(90deg,var(--accent-2),var(--accent)); transition:right .25s ease; }
.music-topbar .nav-links a:hover, .music-topbar .nav-links a.active { color:#fff; }
.music-topbar .nav-links a:hover::after, .music-topbar .nav-links a.active::after { right:0; }

.music-hero { min-height:68vh; display:grid; grid-template-columns:1fr auto; align-items:end; gap:40px; padding-bottom:72px; position:relative; }
.hero-copy { max-width:820px; padding-top:80px; }
.music-kicker,.section-kicker,.module-label,.release-type,.release-kind,.release-year { font-size:9px; letter-spacing:.38em; text-transform:uppercase; color:rgba(238,246,255,.55); }
.music-kicker { color:var(--accent); margin:0 0 16px; }
.music-hero h1 { font-size:clamp(52px,8.4vw,132px); line-height:.84; letter-spacing:-.03em; margin:0; font-weight:760; }
.music-hero h1 em { color:#d36aff; font-style:normal; text-shadow:0 0 30px rgba(211,106,255,.20); }
.music-intro { max-width:540px; margin:26px 0 0; font-size:15px; line-height:1.75; color:rgba(238,246,255,.64); }
.hero-actions { display:flex; gap:22px; align-items:center; margin-top:32px; }
.ghost-button,.text-link { border:0; background:none; color:#fff; cursor:pointer; letter-spacing:.26em; font-size:10px; padding:0; text-decoration:none; }
.ghost-button { border:1px solid rgba(238,246,255,.25); padding:14px 18px; backdrop-filter:blur(8px); transition:.25s ease; }
.ghost-button:hover { border-color:rgba(211,106,255,.7); box-shadow:0 0 24px rgba(211,106,255,.12); transform:translateY(-2px); }
.ghost-button span { margin-left:18px; color:var(--accent); }
.text-link { color:rgba(238,246,255,.58); }
.text-link:hover { color:#fff; }
.signal-panel { width:110px; padding:14px 12px; border-left:1px solid rgba(238,246,255,.16); border-right:1px solid rgba(238,246,255,.08); align-self:center; text-align:center; background:rgba(5,8,14,.26); backdrop-filter:blur(8px); }
.signal-panel span { display:block; font-size:7px; letter-spacing:.25em; color:rgba(238,246,255,.42); margin-bottom:16px; }
.signal-panel i { display:inline-block; width:7px; height:36px; margin:0 2px; background:linear-gradient(180deg, rgba(98,215,255,.85), rgba(210,91,255,.18)); box-shadow:0 0 18px rgba(98,215,255,.22); animation:signal 1.7s ease-in-out infinite; transform-origin:center bottom; }
.signal-panel i:nth-child(2n){height:24px;animation-delay:.2s}.signal-panel i:nth-child(3n){height:48px;animation-delay:.45s}.signal-panel i:nth-child(4n){height:28px;animation-delay:.7s}
@keyframes signal {0%,100%{transform:scaleY(.65);opacity:.45}50%{transform:scaleY(1);opacity:1}}

.featured-section,.catalogue-section,.tracklist-section { padding:96px 0 0; scroll-margin-top:100px; }
.section-header { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:24px; }
.section-kicker { margin:0 0 7px; color:rgba(238,246,255,.45); }
.section-header h2 { margin:0; font-size:clamp(34px,5vw,70px); line-height:.92; letter-spacing:-.02em; }
.section-meta { font-size:9px; letter-spacing:.26em; color:rgba(238,246,255,.36); }
.featured-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:20px; }
.release-hero { min-height:560px; position:relative; overflow:hidden; border:1px solid rgba(238,246,255,.15); background:linear-gradient(135deg,rgba(255,174,53,.08),rgba(10,7,4,.76)); }
.release-hero::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 72% 34%, rgba(255,204,120,.32), transparent 28%), linear-gradient(145deg, rgba(255,190,84,.07), transparent 55%); }
.release-hero.amber-theme { --release-accent:#f2c76e; }
.release-scan { position:absolute; inset:0; background:repeating-linear-gradient(135deg, transparent 0 40px, rgba(255,210,130,.08) 41px 42px); mix-blend-mode:screen; }
.release-no { position:absolute; top:18px; left:20px; font-size:9px; letter-spacing:.28em; color:rgba(255,255,255,.32); }
.release-type { position:absolute; top:18px; right:20px; color:rgba(255,255,255,.44); }
.release-title { position:absolute; left:34px; bottom:74px; font-size:clamp(66px,9vw,145px); font-weight:800; letter-spacing:-.05em; line-height:.78; color:#f3e6c5; text-shadow:0 0 24px rgba(240,190,90,.12); }
.release-caption { position:absolute; left:36px; bottom:28px; font-size:8px; letter-spacing:.26em; color:rgba(255,255,255,.42); }
.release-orbit { position:absolute; right:-100px; bottom:-110px; width:470px; height:470px; border:1px solid rgba(246,193,102,.27); border-radius:50%; box-shadow:0 0 80px rgba(246,193,102,.08); }
.release-orbit::after { content:""; position:absolute; inset:58px; border:1px solid rgba(246,193,102,.10); border-radius:50%; }

.track-module { min-height:560px; padding:28px; border:1px solid rgba(238,246,255,.14); background:rgba(3,6,12,.52); backdrop-filter:blur(14px); display:flex; flex-direction:column; justify-content:space-between; }
.track-module-head { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; }
.track-module h3 { font-size:52px; margin:6px 0 0; letter-spacing:-.03em; }
.track-time { font-size:10px; letter-spacing:.2em; color:rgba(238,246,255,.35); }
.track-desc { font-size:14px; line-height:1.7; max-width:500px; color:rgba(238,246,255,.62); margin:26px 0; }
.fake-player { display:flex; gap:18px; align-items:center; border-top:1px solid rgba(238,246,255,.10); border-bottom:1px solid rgba(238,246,255,.10); padding:22px 0; }
.play-button { width:58px; height:58px; border-radius:50%; border:1px solid rgba(238,246,255,.30); background:rgba(255,255,255,.03); cursor:pointer; transition:.25s ease; }
.play-button:hover { border-color:rgba(98,215,255,.8); box-shadow:0 0 28px rgba(98,215,255,.14); transform:scale(1.04); }
.play-button span { font-size:13px; margin-left:2px; }
.player-body { flex:1; min-width:0; }
.player-top { display:flex; justify-content:space-between; gap:20px; font-size:8px; letter-spacing:.22em; color:rgba(238,246,255,.40); }
.progress { height:2px; background:rgba(238,246,255,.10); margin-top:16px; overflow:hidden; }
.progress span { display:block; width:0; height:100%; background:linear-gradient(90deg,#c45cff,#62d7ff); box-shadow:0 0 18px rgba(98,215,255,.28); }
.waveform { height:34px; display:flex; gap:4px; align-items:center; margin-top:12px; overflow:hidden; }
.waveform i { width:3px; height:13px; background:rgba(238,246,255,.24); display:block; transform-origin:center; }
.waveform i:nth-child(2n){height:22px}.waveform i:nth-child(3n){height:30px}.waveform i:nth-child(4n){height:17px}
.stream-links { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:24px; }
.stream-links a { display:flex; align-items:center; gap:10px; min-height:48px; padding:8px 12px; box-sizing:border-box; border:1px solid rgba(238,246,255,.12); background:linear-gradient(135deg,rgba(255,255,255,.03),rgba(255,255,255,.008)); color:rgba(238,246,255,.70); text-decoration:none; transition:.25s ease; }
.stream-links a:hover { color:#fff; border-color:rgba(98,215,255,.48); background:linear-gradient(135deg,rgba(98,215,255,.055),rgba(195,92,255,.035)); transform:translateY(-1px); }
.platform-icon { width:22px; height:22px; flex:0 0 22px; display:grid; place-items:center; border:1px solid rgba(238,246,255,.13); color:rgba(238,246,255,.72); }
.platform-icon svg { width:14px; height:14px; display:block; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.platform-youtube .fill-path { fill:currentColor; stroke:none; }
.platform-apple svg { fill:currentColor; stroke:none; }
.platform-copy { min-width:0; display:flex; align-items:baseline; justify-content:space-between; gap:8px; width:100%; }
.platform-copy strong { font-size:8px; letter-spacing:.20em; font-weight:600; white-space:nowrap; }
.platform-copy small { font-size:6px; letter-spacing:.14em; color:rgba(238,246,255,.28); white-space:nowrap; }

.release-rail { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:12px; }
.release-card { min-height:290px; border:1px solid rgba(238,246,255,.14); background:rgba(5,8,14,.48); color:#fff; text-align:left; cursor:pointer; position:relative; overflow:hidden; padding:0; display:grid; grid-template-rows:1fr auto; transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.release-card::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.30; background:radial-gradient(circle at 80% 18%, var(--release-color,rgba(98,215,255,.20)), transparent 48%), linear-gradient(135deg, rgba(255,255,255,.02), transparent 70%); }
.release-card::after { content:""; position:absolute; left:-20%; right:-20%; bottom:-50%; height:70%; pointer-events:none; border-radius:50%; border:1px solid color-mix(in srgb, var(--release-color, #62d7ff) 30%, transparent); opacity:.32; }
.release-card:hover,.release-card.active { border-color:rgba(255,255,255,.34); box-shadow:0 10px 34px rgba(0,0,0,.24), 0 0 20px color-mix(in srgb, var(--release-color, #62d7ff) 10%, transparent); }
.release-card-art { position:relative; inset:auto; z-index:0; min-height:225px; width:100%; background-image:var(--cover-image); background-size:cover; background-position:center; opacity:1; filter:saturate(.98) contrast(1.04); transition:transform .45s cubic-bezier(.2,.8,.2,1), filter .3s ease; }
.release-card-art::after { display:none; }
.release-card:hover .release-card-art,.release-card.active .release-card-art { transform:scale(1.035); filter:saturate(1.08) contrast(1.06); }
.release-card-info { position:relative; z-index:3; min-height:88px; display:grid; grid-template-columns:auto 1fr auto; grid-template-rows:18px 38px 14px; grid-template-areas:"year kind arrow" "title title arrow" "sub sub arrow"; align-items:center; gap:0 10px; padding:9px 14px 10px; background:rgba(4,6,10,.92); border-top:1px solid rgba(255,255,255,.08); box-sizing:border-box; }
.release-card-info .release-year { grid-area:year; position:static; align-self:center; font-size:8px; letter-spacing:.24em; color:rgba(255,255,255,.35); }
.release-card-info .release-kind { grid-area:kind; position:static; justify-self:start; align-self:center; font-size:8px; letter-spacing:.22em; color:rgba(255,255,255,.36); }
.release-card-info .card-title { grid-area:title; position:static; align-self:center; display:flex; align-items:center; min-height:38px; max-width:100%; font-size:clamp(17px,1.45vw,20px); line-height:1; font-weight:750; letter-spacing:-.02em; text-wrap:balance; }
.release-card-info .card-sub { grid-area:sub; position:static; align-self:center; font-size:6px; line-height:1; letter-spacing:.17em; color:rgba(255,255,255,.34); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.release-card-info .card-arrow { grid-area:arrow; position:static; align-self:center; justify-self:end; color:var(--release-color,#62d7ff); font-size:14px; }
.blue-theme { --release-color:#62d7ff; background:linear-gradient(135deg,rgba(72,174,255,.08),rgba(3,7,13,.72)); }
.night-theme { --release-color:#9e74ff; background:linear-gradient(135deg,rgba(100,70,170,.10),rgba(5,5,11,.76)); }
.electric-theme { --release-color:#51dbff; background:linear-gradient(135deg,rgba(50,181,207,.08),rgba(3,9,13,.76)); }
.purple-theme { --release-color:#d25cff; background:linear-gradient(135deg,rgba(201,75,255,.10),rgba(9,3,11,.78)); }
.amber-theme { --release-color:#f3c36d; background:linear-gradient(135deg,rgba(243,195,109,.10),rgba(11,8,3,.78)); }
.green-theme { --release-color:#70ecab; background:linear-gradient(135deg,rgba(62,194,132,.09),rgba(3,10,8,.78)); }

.tracklist { border-top:1px solid rgba(238,246,255,.12); }
.track-row { width:100%; display:grid; grid-template-columns:54px 1fr 80px 34px; align-items:center; gap:10px; padding:17px 0; border:0; border-bottom:1px solid rgba(238,246,255,.08); background:none; color:#fff; text-align:left; cursor:pointer; transition:.25s ease; }
.track-row span,.track-row em { font-size:8px; font-style:normal; letter-spacing:.2em; color:rgba(238,246,255,.34); }
.track-row strong { font-size:15px; font-weight:500; letter-spacing:.01em; }
.track-row small { color:rgba(238,246,255,.36); font-size:11px; }
.track-row i { justify-self:end; color:rgba(238,246,255,.28); font-style:normal; }
.track-row:hover,.track-row.active { background:linear-gradient(90deg, rgba(193,86,255,.09), transparent); }
.track-row:hover strong,.track-row.active strong { color:#fff; }
.track-row.active i { color:#62d7ff; }

.music-footer { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:70px 0 16px; font-size:8px; letter-spacing:.28em; color:rgba(238,246,255,.30); }
.music-footer a { color:rgba(238,246,255,.60); text-decoration:none; }
.music-footer a:hover { color:#fff; }

.release-modal { position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; }
.release-modal.open { pointer-events:auto; }
.release-modal-backdrop { position:absolute; inset:0; background:rgba(2,4,10,.88); backdrop-filter:blur(18px); }
.release-modal-inner { width:min(860px,84vw); padding:44px; position:relative; z-index:2; border:1px solid rgba(238,246,255,.14); background:linear-gradient(135deg, rgba(18,17,26,.88), rgba(4,6,12,.72)); box-shadow:0 30px 120px rgba(0,0,0,.45); transform:translateY(24px); }
.release-modal-close { position:absolute; top:22px; right:22px; border:0; background:none; color:rgba(238,246,255,.52); cursor:pointer; font-size:9px; letter-spacing:.25em; }
.release-modal-inner h2 { font-size:clamp(44px,8vw,90px); margin:8px 0 12px; letter-spacing:-.04em; }
.release-modal-inner p { color:rgba(238,246,255,.62); max-width:580px; line-height:1.7; }
.modal-rule { width:180px; height:1px; margin:28px 0; background:linear-gradient(90deg,#c45cff,transparent); }
.release-modal-inner span { font-size:8px; letter-spacing:.24em; color:rgba(238,246,255,.32); }

.music-transition { position:fixed; inset:0; z-index:120; background:#03050a; animation:musicReveal 1.1s cubic-bezier(.12,.8,.18,1) forwards; pointer-events:none; }
@keyframes musicReveal { from{opacity:1} to{opacity:0} }

/* REAL RELEASE ARTWORK — supplied P&T covers */
.release-hero-art { position:absolute; inset:0; z-index:0; background-image:var(--cover-image); background-size:cover; background-position:center; opacity:1; }
.release-hero::before,.release-hero::after { pointer-events:none; }
.release-hero::before { opacity:.14; }
.release-hero::after { display:none; }

.modal-cover-art { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; z-index:0; }
.release-modal-cover::before { z-index:1; background:linear-gradient(135deg, rgba(4,6,10,.06), rgba(5,8,14,.10)); }
.release-modal-cover::after { z-index:1; }

.mini-artwork { padding:0; overflow:hidden; }
.mini-artwork img { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; z-index:0; }
.mini-artwork::before { z-index:1; }
.mini-artwork::after { display:none; }

@media (max-width:1000px){
  .music-main{width:min(92vw,760px);padding-top:110px}
  .music-hero{grid-template-columns:1fr;min-height:auto;gap:25px}
  .signal-panel{display:none}
  .featured-grid{grid-template-columns:1fr}
  .release-rail{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:680px){
  .music-topbar{padding:14px 16px}
  .music-topbar .topbar-left{gap:12px}
  .music-topbar .back-world{font-size:7px;letter-spacing:.14em}
  .music-topbar .nav-links{gap:11px;flex-wrap:wrap;justify-content:flex-end}
  .music-topbar .nav-links a{font-size:7px;letter-spacing:.14em}
  .music-main{padding-top:110px}
  .music-hero h1{font-size:clamp(46px,16vw,82px)}
  .hero-actions{flex-direction:column;align-items:flex-start}
  .release-hero,.track-module{min-height:420px}
  .release-title{font-size:clamp(64px,18vw,110px)}
  .release-rail{grid-template-columns:1fr 1fr}
  .track-row{grid-template-columns:38px 1fr 44px 24px}
  .track-row strong{font-size:13px}
  .stream-links{grid-template-columns:1fr;gap:8px}
  .music-footer{flex-direction:column;align-items:flex-start}
}

#audioPlayer { display:none; }

/* V9/V12 — persistent player visibility controls */
.mini-player.is-hidden { display:none !important; }
.mini-close {
  position:relative;
  z-index:3;
  width:26px;
  height:26px;
  display:grid;
  place-items:center;
  border:1px solid rgba(238,246,255,.12);
  border-radius:50%;
  background:rgba(255,255,255,.025);
  color:rgba(238,246,255,.42);
  cursor:pointer;
  padding:0;
  font-size:14px;
  line-height:1;
  font-family:inherit;
  transition:color .2s ease,border-color .2s ease,background .2s ease,transform .2s ease;
  pointer-events:auto;
}
.mini-close:hover {
  color:#fff;
  border-color:rgba(98,215,255,.5);
  background:rgba(98,215,255,.06);
  transform:scale(1.06);
}
.mini-reopen {
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:96;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border:1px solid rgba(238,246,255,.16);
  border-radius:50%;
  background:rgba(5,8,14,.92);
  color:rgba(238,246,255,.68);
  box-shadow:0 12px 34px rgba(0,0,0,.45);
  backdrop-filter:blur(14px);
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  pointer-events:none;
  transition:opacity .22s ease,visibility .22s ease,transform .22s ease,border-color .22s ease,color .22s ease;
}
.mini-reopen.is-visible {
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  pointer-events:auto;
}
.mini-reopen:hover { color:#fff; border-color:rgba(195,92,255,.55); }

/* Make decorative player layers non-interactive so controls always receive clicks. */
.mini-player::before { pointer-events:none; }

/* V6 MUSIC HUB / persistent preview layer */
body.release-open { overflow:hidden; }
.music-main { padding-bottom:120px; }

.mini-player {
  position:fixed;
  left:16px;
  right:16px;
  bottom:14px;
  z-index:95;
  min-height:66px;
  display:grid;
  grid-template-columns:44px 46px minmax(0,1fr) auto auto;
  align-items:center;
  gap:12px;
  padding:10px 14px;
  border:1px solid rgba(238,246,255,.16);
  background:linear-gradient(90deg, rgba(5,8,14,.94), rgba(11,7,18,.92));
  box-shadow:0 20px 70px rgba(0,0,0,.45), 0 0 28px rgba(195,92,255,.08);
  backdrop-filter:blur(18px) saturate(1.1);
}
.mini-artwork {
  width:44px;
  height:44px;
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  display:grid;
  place-items:center;
  background:linear-gradient(135deg, rgba(243,195,109,.18), rgba(4,6,10,.9));
}
.mini-artwork::before { content:""; position:absolute; inset:-30%; border:1px solid var(--release-color,#f3c36d); border-radius:50%; transform:rotate(28deg); opacity:.58; box-shadow:0 0 30px color-mix(in srgb, var(--release-color,#f3c36d) 20%, transparent); }
.mini-artwork span { position:relative; z-index:1; font-size:8px; letter-spacing:.18em; color:rgba(255,255,255,.72); }
.mini-play { width:42px; height:42px; border-radius:50%; border:1px solid rgba(238,246,255,.24); background:rgba(255,255,255,.03); color:#fff; cursor:pointer; transition:.25s ease; }
.mini-play:hover { border-color:rgba(98,215,255,.8); box-shadow:0 0 22px rgba(98,215,255,.14); transform:scale(1.03); }
.mini-track { min-width:0; }
.mini-trackline { display:grid; grid-template-columns:26px auto 1fr; align-items:baseline; gap:8px; min-width:0; }
.mini-trackline strong { font-size:11px; letter-spacing:.17em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mini-trackline small { justify-self:end; font-size:7px; letter-spacing:.20em; color:rgba(238,246,255,.34); white-space:nowrap; }
.mini-index { font-size:8px; letter-spacing:.2em; color:rgba(238,246,255,.35); }
.mini-seek { appearance:none; border:0; background:none; padding:8px 0 2px; width:100%; cursor:pointer; }
.mini-seek > span { display:block; height:2px; background:rgba(238,246,255,.10); overflow:hidden; }
.mini-seek i { display:block; width:0; height:100%; background:linear-gradient(90deg,#c45cff,#62d7ff); box-shadow:0 0 16px rgba(98,215,255,.24); }
.mini-time { min-width:88px; text-align:right; font-size:8px; letter-spacing:.16em; color:rgba(238,246,255,.46); }
.mini-open { font-size:8px; letter-spacing:.22em; color:rgba(238,246,255,.48); text-decoration:none; border-left:1px solid rgba(238,246,255,.10); padding-left:14px; }
.mini-open:hover { color:#fff; }

.release-modal { overflow:auto; padding:50px 18px 100px; }
.release-modal-inner { width:min(1120px,96vw); max-height:min(820px,88vh); overflow:auto; padding:20px; }
.release-modal-grid { display:grid; grid-template-columns:minmax(280px,.78fr) minmax(0,1.22fr); gap:24px; }
.release-modal-cover { min-height:560px; position:relative; overflow:hidden; border:1px solid rgba(238,246,255,.14); background:linear-gradient(135deg, rgba(243,195,109,.12), rgba(5,8,14,.95)); }
.release-modal-cover::before { content:""; position:absolute; inset:-15%; background:repeating-linear-gradient(135deg, transparent 0 38px, color-mix(in srgb,var(--release-color,#f3c36d) 14%, transparent) 39px 40px); transform:rotate(-9deg); }
.release-modal-cover::after { content:""; position:absolute; right:-80px; bottom:-120px; width:440px; height:440px; border:1px solid color-mix(in srgb,var(--release-color,#f3c36d) 50%, transparent); border-radius:50%; box-shadow:0 0 100px color-mix(in srgb,var(--release-color,#f3c36d) 12%, transparent); }
.release-modal-cover > strong { position:absolute; z-index:2; left:28px; bottom:76px; font-size:clamp(54px,8vw,116px); line-height:.78; letter-spacing:-.05em; color:#f3e6c5; }
.modal-cover-index,.modal-cover-kind { position:absolute; z-index:2; top:20px; font-size:8px; letter-spacing:.26em; color:rgba(255,255,255,.42); }
.modal-cover-index { left:22px; }
.modal-cover-kind { right:22px; }
.modal-cover-index::before { content:"RELEASE / "; color:rgba(255,255,255,.23); }
.release-modal-cover i { position:absolute; z-index:2; left:28px; bottom:30px; width:120px; height:1px; background:linear-gradient(90deg,var(--release-color,#f3c36d),transparent); }
.release-modal-content { min-width:0; padding:20px 14px 14px 4px; }
.release-modal-content h2 { font-size:clamp(44px,7vw,88px); margin:6px 0 12px; }
.modal-status,.modal-meta { display:block; font-size:8px; letter-spacing:.20em; color:rgba(238,246,255,.34); }
.modal-meta { margin-top:8px; }
.modal-panel-heading { display:flex; justify-content:space-between; gap:18px; padding:28px 0 11px; margin-top:12px; border-bottom:1px solid rgba(238,246,255,.09); font-size:7px; letter-spacing:.23em; color:rgba(238,246,255,.34); }
.modal-tracks { max-height:260px; overflow:auto; }
.modal-track-row { width:100%; display:grid; grid-template-columns:34px 1fr 60px 26px; gap:8px; align-items:center; padding:12px 2px; border:0; border-bottom:1px solid rgba(238,246,255,.06); color:#fff; background:none; text-align:left; cursor:pointer; }
.modal-track-row:hover { background:linear-gradient(90deg,rgba(193,86,255,.10),transparent); }
.modal-track-row span,.modal-track-row em { font-size:8px; font-style:normal; letter-spacing:.18em; color:rgba(238,246,255,.32); }
.modal-track-row strong { font-size:12px; font-weight:500; }
.modal-track-row i { justify-self:end; color:#62d7ff; font-style:normal; }
.modal-empty { padding:20px 0 8px; }
.modal-empty span { display:block; font-size:7px; letter-spacing:.24em; color:rgba(238,246,255,.28); margin-bottom:8px; }
.modal-empty strong { display:block; font-size:14px; letter-spacing:.10em; font-weight:600; }
.modal-empty p { margin:10px 0 0; font-size:11px; line-height:1.7; color:rgba(238,246,255,.46); }
.modal-links { display:flex; flex-wrap:wrap; gap:10px; padding-top:14px; }
.modal-links a { display:flex; align-items:center; gap:9px; padding:10px 12px; border:1px solid rgba(238,246,255,.10); color:rgba(238,246,255,.55); text-decoration:none; font-size:8px; letter-spacing:.20em; }
.modal-links a:hover { color:#fff; border-color:rgba(98,215,255,.45); }
.modal-links small { font-size:6px; color:rgba(238,246,255,.25); letter-spacing:.16em; }

@media (max-width:900px){
  .mini-player { grid-template-columns:38px 42px minmax(0,1fr) auto; }
  .mini-open { display:none; }
  .release-modal-grid { grid-template-columns:1fr; }
  .release-modal-cover { min-height:300px; }
  .release-modal-cover > strong { font-size:clamp(56px,14vw,100px); }
  .release-modal-content { padding:0 10px 20px; }
}
@media (max-width:680px){
  .music-main { padding-bottom:105px; }
  .mini-player { left:8px; right:8px; bottom:8px; grid-template-columns:34px 40px minmax(0,1fr) auto auto; gap:8px; min-height:58px; padding:7px 9px; }
  .mini-artwork { width:34px; height:34px; }
  .mini-play { width:38px; height:38px; }
  .mini-trackline { grid-template-columns:20px 1fr; }
  .mini-trackline small { grid-column:2; justify-self:start; margin-top:3px; }
  .mini-time { min-width:58px; font-size:7px; }
  .mini-seek { padding-top:6px; }
  .release-modal { padding:20px 10px 95px; }
  .release-modal-inner { width:96vw; max-height:92vh; }
  .release-modal-cover { min-height:230px; }
  .modal-track-row { grid-template-columns:28px 1fr 50px 20px; }
}


/* V11 — SPECIAL MUSIC WORLD treatment */
.music-hero::before {
  content:"";
  position:absolute;
  inset:12% -8% 0 -8%;
  pointer-events:none;
  background:
    linear-gradient(90deg, transparent 0 12%, rgba(98,215,255,.06) 12.05%, transparent 12.1% 38%, rgba(195,92,255,.05) 38.05%, transparent 38.1% 100%),
    repeating-linear-gradient(90deg, transparent 0 116px, rgba(238,246,255,.025) 117px 118px);
  mask-image:linear-gradient(180deg, transparent, #000 22%, #000 76%, transparent);
}
.hero-stats { margin-top:34px; display:flex; gap:0; width:min(690px,100%); border-top:1px solid rgba(238,246,255,.10); border-bottom:1px solid rgba(238,246,255,.08); }
.hero-stats div { flex:1; min-width:0; padding:14px 18px 13px 0; position:relative; }
.hero-stats div:not(:last-child)::after { content:""; position:absolute; right:18px; top:14px; bottom:14px; width:1px; background:rgba(238,246,255,.08); }
.hero-stats strong { display:block; font-size:23px; letter-spacing:-.04em; font-weight:700; }
.hero-stats span { display:block; margin-top:4px; font-size:7px; letter-spacing:.23em; color:rgba(238,246,255,.34); }
.accent-action { border-color:rgba(195,92,255,.32); background:linear-gradient(90deg,rgba(195,92,255,.08),rgba(98,215,255,.04)); }
.accent-action:hover { border-color:rgba(195,92,255,.72); box-shadow:0 0 30px rgba(195,92,255,.14); }

.release-hero { box-shadow:inset 0 0 0 1px rgba(255,255,255,.015), 0 30px 90px rgba(0,0,0,.18); }
.release-hero::after { display:none !important; content:none !important; }
.release-micro { position:absolute; left:36px; bottom:46px; z-index:4; display:flex; gap:18px; flex-wrap:wrap; font-size:7px; letter-spacing:.22em; color:rgba(255,255,255,.35); }
.release-micro span:first-child { color:rgba(242,199,110,.86); }
.release-core { position:absolute; right:110px; top:86px; width:205px; height:205px; border-radius:50%; border:1px solid rgba(255,220,145,.20); display:grid; place-items:center; opacity:.74; transform:rotate(-12deg); }
.release-core::before { content:""; position:absolute; inset:20px; border:1px dashed rgba(255,220,145,.14); border-radius:50%; }
.release-core::after { content:""; position:absolute; inset:46px; border:1px solid rgba(255,220,145,.11); border-radius:50%; }
.release-core span { position:relative; z-index:3; font-size:32px; font-weight:700; letter-spacing:-.06em; color:rgba(243,230,197,.86); text-shadow:0 0 22px rgba(255,209,114,.16); }
.release-core i { position:absolute; width:7px; height:7px; border-radius:50%; background:#f4c86e; box-shadow:0 0 16px rgba(244,200,110,.72); }
.release-core i:first-child { top:20px; right:46px; }
.release-core i:last-child { bottom:27px; left:44px; background:#63d8ff; box-shadow:0 0 16px rgba(99,216,255,.68); }
.release-orbit { animation:orbitFloat 12s ease-in-out infinite; }
@keyframes orbitFloat { 0%,100%{transform:translate3d(0,0,0) rotate(0deg)} 50%{transform:translate3d(-10px,-8px,0) rotate(3deg)} }

.track-meta-line { display:flex; justify-content:space-between; gap:14px; margin-top:20px; padding-top:14px; border-top:1px solid rgba(238,246,255,.08); font-size:7px; letter-spacing:.22em; color:rgba(238,246,255,.30); text-transform:uppercase; }
.track-meta-line span:nth-child(2) { color:rgba(98,215,255,.72); }
.track-meta-line span:nth-child(2)::before { content:""; display:inline-block; width:5px; height:5px; margin-right:7px; border-radius:50%; background:#62d7ff; box-shadow:0 0 10px rgba(98,215,255,.7); vertical-align:middle; animation:blinkSignal 1.4s ease-in-out infinite; }
@keyframes blinkSignal { 0%,100%{opacity:.35} 50%{opacity:1} }

.track-row { position:relative; overflow:hidden; }
.track-row::before { content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:linear-gradient(180deg,var(--accent),var(--accent-2)); transform:scaleY(0); transform-origin:center; transition:transform .25s ease; }
.track-row::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(98,215,255,.045),transparent 32%,rgba(195,92,255,.02)); opacity:0; transition:opacity .25s ease; pointer-events:none; }
.track-row:hover::before,.track-row.active::before { transform:scaleY(1); }
.track-row:hover::after,.track-row.active::after { opacity:1; }
.track-row strong { position:relative; z-index:1; }
.track-row i { position:relative; z-index:1; transition:transform .25s ease, color .25s ease; }
.track-row:hover i { transform:translateX(3px); color:#62d7ff; }
.track-row.active i { color:#c45cff; }
.tracklist-meta span { color:#62d7ff; text-shadow:0 0 10px rgba(98,215,255,.48); }

.music-manifest { margin-top:96px; padding:30px 0 12px; position:relative; overflow:hidden; border-top:1px solid rgba(238,246,255,.09); border-bottom:1px solid rgba(238,246,255,.08); }
.manifest-line { display:grid; grid-template-columns:auto auto 1fr; align-items:center; gap:14px; font-size:7px; letter-spacing:.24em; color:rgba(238,246,255,.30); }
.manifest-line strong { color:rgba(98,215,255,.70); font-weight:600; }
.manifest-line i { height:1px; background:linear-gradient(90deg,rgba(98,215,255,.25),rgba(195,92,255,.0)); }
.manifest-copy { display:flex; justify-content:flex-end; gap:30px; padding-top:18px; }
.manifest-copy span { font-size:7px; letter-spacing:.22em; color:rgba(238,246,255,.25); }
.manifest-noise { position:absolute; inset:auto -12% -72px 55%; height:120px; border-radius:50%; background:radial-gradient(circle,rgba(195,92,255,.18),transparent 64%); filter:blur(8px); pointer-events:none; }

.mini-player { border-color:rgba(238,246,255,.20); box-shadow:0 20px 70px rgba(0,0,0,.50),0 0 34px rgba(98,215,255,.06),0 0 44px rgba(195,92,255,.05); }
.mini-player::before { content:""; position:absolute; left:0; top:0; width:34%; height:1px; background:linear-gradient(90deg,#62d7ff,#c45cff,transparent); box-shadow:0 0 14px rgba(98,215,255,.22); }
.mini-artwork { box-shadow:inset 0 0 28px rgba(0,0,0,.45); }
.mini-artwork::after { content:""; position:absolute; inset:6px; border:1px solid rgba(255,255,255,.07); transform:rotate(15deg); }

@media (max-width:900px){
  .release-core { right:54px; top:54px; width:150px; height:150px; }
  .release-micro { max-width:70%; }
  .manifest-copy { flex-direction:column; align-items:flex-start; }
}
@media (max-width:680px){
  .hero-stats { width:100%; }
  .hero-stats div { padding-right:10px; }
  .hero-stats div:not(:last-child)::after { right:8px; }
  .hero-stats strong { font-size:18px; }
  .hero-stats span { font-size:6px; letter-spacing:.16em; }
  .track-meta-line { flex-wrap:wrap; }
  .release-core { right:18px; top:58px; width:118px; height:118px; }
  .release-core span { font-size:24px; }
  .release-micro { left:22px; bottom:48px; gap:10px; max-width:78%; }
  .release-hero::after { display:none; }
}

@media (max-width:680px){
  .mini-close { width:24px; height:24px; font-size:13px; }
  .mini-reopen { right:12px; bottom:12px; }
}

/* Clean artwork mode: album covers are shown without UI text overlays. */
.release-no,.release-type,.release-title,.release-caption,.release-micro,.release-core,.modal-cover-index,.modal-cover-kind,#modalCoverTitle { display:none !important; }
.release-hero::after { display:none !important; content:none !important; }

/* Release thumbnail text alignment fix */
@media (max-width:900px){ .release-card-info{min-height:82px;grid-template-rows:17px 34px 13px;padding:8px 11px 9px}.release-card-info .card-title{font-size:18px;min-height:34px}.release-card-info .card-sub{font-size:5.5px} }


/* FINAL REAL ARTWORK LAYER — explicit images, reliable paths, clickable viewers */
.release-card-art {
  min-height:0 !important;
  height:100% !important;
  width:100% !important;
  position:relative !important;
  overflow:hidden;
  background:none !important;
}
.release-card-art > img {
  display:block !important;
  width:100% !important;
  height:100% !important;
  min-width:100%;
  min-height:100%;
  object-fit:cover !important;
  object-position:center !important;
  opacity:1 !important;
  filter:none;
  transform:translateZ(0);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.release-hero-art {
  display:block !important;
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center !important;
  background:none !important;
  opacity:1 !important;
}
.release-hero-cover-button {
  appearance:none;
  -webkit-appearance:none;
  border:0;
  margin:0;
  padding:0;
  width:100%;
  height:100%;
  display:block;
  position:absolute;
  inset:0;
  overflow:hidden;
  cursor:zoom-in;
  background:transparent;
  color:inherit;
  font:inherit;
  text-align:left;
}
.cover-view-hint {
  position:absolute;
  left:16px;
  bottom:16px;
  z-index:3;
  padding:8px 10px;
  background:rgba(3,5,10,.76);
  border:1px solid rgba(255,255,255,.16);
  color:rgba(255,255,255,.72);
  font-size:7px;
  letter-spacing:.2em;
  pointer-events:none;
}
.release-modal-cover {
  appearance:none;
  -webkit-appearance:none;
  width:100%;
  padding:0;
  color:inherit;
  font:inherit;
  text-align:left;
  cursor:zoom-in;
}
.release-modal-cover .modal-cover-art {
  display:block !important;
  pointer-events:none;
  transition:transform .4s ease, filter .3s ease;
}
.release-modal-cover:hover .modal-cover-art {
  transform:scale(1.012);
  filter:saturate(1.04) contrast(1.03);
}
.modal-cover-zoom {
  position:absolute;
  z-index:4;
  left:14px;
  bottom:14px;
  padding:8px 10px;
  background:rgba(3,5,10,.78);
  border:1px solid rgba(255,255,255,.16);
  color:rgba(255,255,255,.72);
  font-size:7px;
  letter-spacing:.2em;
  pointer-events:none;
}
.art-lightbox {
  position:fixed;
  inset:0;
  z-index:250;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px;
  background:rgba(1,2,6,.97);
  opacity:0;
  pointer-events:none;
  transition:opacity .22s ease;
}
.art-lightbox.open { opacity:1; pointer-events:auto; }
.art-lightbox-backdrop { position:absolute; inset:0; background:radial-gradient(circle at 50% 42%,rgba(123,84,255,.12),transparent 55%); }
.art-lightbox-inner {
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  max-width:94vw;
  max-height:94vh;
}
.art-lightbox-inner img {
  display:block;
  max-width:92vw;
  max-height:84vh;
  width:auto;
  height:auto;
  object-fit:contain;
  box-shadow:0 30px 100px rgba(0,0,0,.66);
}
.art-lightbox-close {
  position:absolute;
  right:0;
  top:-34px;
  border:0;
  background:none;
  color:rgba(255,255,255,.72);
  cursor:pointer;
  font-size:9px;
  letter-spacing:.22em;
}
.art-lightbox-close:hover { color:#fff; }
#artLightboxCaption { margin-top:12px; font-size:8px; letter-spacing:.28em; color:rgba(255,255,255,.48); }
body.art-lightbox-open { overflow:hidden; }


/* Scroll performance pass: keep album art on a stable compositing layer. */
.release-card-art,
.release-card-art > img,
.release-hero-art,
.mini-artwork,
.mini-artwork img {
  transform:translateZ(0);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.release-card-art > img,
.release-hero-art,
.mini-artwork img {
  will-change:auto;
}
@media (hover:none) {
  .release-card:hover,.release-card.active { box-shadow:none; }
  .release-card:hover .release-card-art > img,
  .release-card.active .release-card-art > img { transform:none; filter:none; }
}

/* V24.7.8 — MUSIC SCROLL ROOT / PERFORMANCE CLEANUP
   Return MUSIC to the browser's native document scroll root. The previous pass
   made <body> the scrolling element, which can behave inconsistently inside the
   persistent MUSIC iframe on desktop and mobile. */
html.music-document {
  height:auto;
  min-height:100%;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior-x:none;
}
body.music-page {
  height:auto;
  min-height:100vh;
  overflow:visible !important;
  overflow-x:hidden !important;
  overflow-y:visible !important;
  -webkit-overflow-scrolling:auto;
  touch-action:auto;
}
.music-site {
  min-height:100vh;
  height:auto;
  overflow:visible;
}

/* Keep fixed atmospheric layers from being promoted continuously while scrolling. */
.music-bg,
.music-colorwash {
  will-change:auto;
}


/* V24.7.9 — MUSIC SCROLL CONTAINER REPAIR
   The parent site shell is intentionally fixed while MUSIC is open. Give MUSIC
   one explicit internal scroll surface instead of asking the iframe document
   root to fight the parent overflow lock. This is used on desktop and mobile. */
html.music-document,
body.music-page {
  width:100%;
  height:100%;
  min-height:100%;
  overflow:hidden !important;
  overscroll-behavior-x:none;
}
body.music-page {
  margin:0;
  touch-action:pan-y;
  -webkit-overflow-scrolling:auto;
}
.music-site {
  position:relative;
  width:100%;
  height:100%;
  min-height:100%;
  max-height:none;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  overscroll-behavior-y:auto;
  overscroll-behavior-x:none;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;
  scrollbar-gutter:auto;
  box-sizing:border-box;
}
.music-main {
  min-height:100%;
  width:min(1360px,92%);
  margin-left:auto;
  margin-right:auto;
}
@media (max-width:680px){
  .music-main { width:92%; }
}

/* V24.7.11 — MOBILE MUSIC HEADER / HERO CENTERING
   Keep the mobile topbar inside the viewport and centre the opening half of MUSIC.
   The document remains on the single .music-site scroll surface from V24.7.9/10. */
@media (max-width:680px){
  .music-topbar{
    left:0;
    right:0;
    width:100%;
    min-width:0;
    padding:10px 12px;
    gap:8px;
    box-sizing:border-box;
    align-items:flex-start;
  }
  .music-topbar .topbar-left{
    flex:0 0 auto;
    min-width:0;
    gap:9px;
  }
  .music-topbar .back-world{font-size:6.5px;letter-spacing:.12em;padding:5px 0;white-space:nowrap;}
  .music-topbar .nav-links{
    flex:1 1 auto;
    min-width:0;
    gap:7px 9px;
    flex-wrap:wrap;
    justify-content:flex-end;
    align-content:flex-start;
    overflow:visible;
  }
  .music-topbar .nav-links a{
    font-size:6px;
    letter-spacing:.11em;
    padding:5px 0;
    white-space:nowrap;
  }
  .music-topbar .world-mark{display:none !important;}

  .music-main{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    margin:0 !important;
    padding:96px 16px 56px !important;
    box-sizing:border-box;
  }
  .music-hero{
    width:100%;
    min-width:0;
    display:block;
    text-align:center;
    padding-bottom:54px;
  }
  .hero-copy{
    width:100%;
    max-width:none;
    min-width:0;
    margin:0 auto;
    padding-top:20px;
    box-sizing:border-box;
  }
  .music-hero h1{
    width:100%;
    max-width:100%;
    margin:0 auto;
    font-size:clamp(41px,13vw,68px);
    line-height:.87;
    letter-spacing:-.045em;
    overflow-wrap:normal;
    word-break:normal;
    text-align:center;
  }
  .music-intro{
    max-width:34rem;
    margin:20px auto 0;
  }
  .hero-actions{
    align-items:center;
  }
  .hero-stats{
    width:100%;
    margin-left:auto;
    margin-right:auto;
  }
  .featured-section,
  .catalogue-section,
  .tracklist-section{
    width:100%;
    min-width:0;
  }
}

/* V24.7.11 — mobile home reading order: PORTALS, then TRANSMISSIONS. */
@media (max-width:820px){
  .home-content{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
  }
  .home-heading{order:1 !important;}
  .portal-grid{order:2 !important;}
  .transmission-node{order:3 !important; margin-top:10px !important; margin-bottom:0 !important;}
  .home-footer{order:4 !important;}
}


/* WHAT THE DARK LEFT — featured album artwork and catalogue node. */
.what-dark-theme {
  --release-color: #d36aff;
  --release-accent: #d36aff;
  background: linear-gradient(135deg, rgba(195,92,255,.14), rgba(3,5,12,.86));
}
.release-hero.what-dark-theme::before {
  background: radial-gradient(circle at 76% 24%, rgba(211,106,255,.16), transparent 38%), linear-gradient(150deg, rgba(83,30,110,.10), transparent 62%);
}
.what-dark-left-tracklist .section-kicker { color: rgba(211,106,255,.78); }
.what-dark-left-tracklist .track-row.active { background: linear-gradient(90deg, rgba(193,86,255,.15), transparent); }
