@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Marcellus&display=swap');
:root{--bg:#05080f;--panel:#09111b;--panel2:#0b1420;--line:rgba(184,211,242,.17);--text:#f5f6fa;--muted:#a2adbc;--red:#f33149;--blue:#00a7ff;--serif:'Marcellus',Georgia,serif;--sans:'Manrope',Arial,sans-serif;--max:1240px}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:82px}body{margin:0;background-color:#030712;background-image:linear-gradient(180deg,rgba(2,5,13,.035) 0%,rgba(2,5,13,.085) 42%,rgba(2,4,11,.16) 100%),url('assets/cosmic-background.jpg');background-position:center center;background-size:cover;background-repeat:no-repeat;background-attachment:fixed;color:var(--text);font-family:var(--sans);font-size:14px;line-height:1.6;overflow-x:hidden}body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-2;background:radial-gradient(ellipse at 13% 13%,rgba(0,91,173,.15),transparent 35%),radial-gradient(ellipse at 90% 38%,rgba(180,14,53,.13),transparent 38%)}.starfield{position:fixed;inset:0;z-index:-1;opacity:.17;pointer-events:none;background-image:radial-gradient(#e8f5ff .8px,transparent .8px),radial-gradient(#66cfff .7px,transparent .7px);background-size:83px 83px,137px 137px;background-position:0 0,30px 45px}.site-header{height:76px;padding:0 max(28px,calc((100vw - var(--max))/2));display:flex;align-items:center;gap:34px;border-bottom:1px solid var(--line);background:rgba(4,7,13,.79);backdrop-filter:blur(18px);position:sticky;top:0;z-index:30}.brand{font-family:var(--serif);font-size:25px;white-space:nowrap;letter-spacing:-.06em;text-decoration:none;color:#fff;text-shadow:0 0 22px #ec355c66}.brand span{color:#d9e8ff}.main-nav{display:flex;align-items:center;justify-content:center;gap:clamp(12px,2vw,29px);flex:1}.nav-link{height:76px;display:flex;align-items:center;position:relative;text-transform:uppercase;font-size:10px;letter-spacing:.11em;font-weight:800;color:#c1c8d3;text-decoration:none;white-space:nowrap;transition:color .2s}.nav-link:hover,.nav-link.active{color:#fff}.nav-link.active:after{content:"";height:2px;position:absolute;bottom:0;left:0;right:0;background:var(--red);box-shadow:0 0 12px #f33149}.header-actions{display:flex;gap:10px;align-items:center}.icon-btn{background:transparent;color:#f4f8ff;border:0;cursor:pointer;width:30px;height:38px;position:relative;display:grid;place-items:center}.icon-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6}.cart-count{position:absolute;top:0;right:-2px;background:var(--red);color:white;border-radius:50%;font-size:9px;min-width:15px;height:15px;display:grid;place-items:center;font-weight:800}.mobile-menu{display:none}
.hero{min-height:650px;position:relative;isolation:isolate;display:flex;align-items:center;overflow:hidden;border-bottom:1px solid var(--line);background:#050a16}.hero-backdrop{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(3,6,13,.68) 0%,rgba(5,9,20,.34) 32%,rgba(4,9,20,.10) 64%,rgba(4,9,20,0) 100%),linear-gradient(0deg,#05080f 0%,rgba(5,8,15,.18) 17%,transparent 43%,rgba(3,6,13,.02) 100%),url('assets/cosmic-banner.jpg') center/cover no-repeat;transform:scale(1.02)}.hero-grid{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,transparent 49.9%,rgba(92,171,249,.07) 50%,transparent 50.1%),linear-gradient(rgba(92,171,249,.035) 1px,transparent 1px);background-size:100% 100%,100% 76px;mask-image:linear-gradient(90deg,transparent,black 90%)}.hero-content{max-width:var(--max);width:100%;margin:0 auto;padding:82px 28px 84px;position:relative}.eyebrow,.kicker{font-size:10px;text-transform:uppercase;letter-spacing:.19em;font-weight:800;color:#90bddf}.eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:19px}.live-dot{width:7px;height:7px;background:#ff3a55;border-radius:50%;box-shadow:0 0 14px #ff3a55}.hero h1{font:clamp(64px,9vw,126px)/.96 var(--serif);margin:0;letter-spacing:-.065em;text-shadow:0 5px 0 #07101c,0 0 45px #0876be4c}.hero h1 span{color:#e8f2ff}.hero h1.hero-logo-heading{display:block;width:clamp(300px,42vw,570px);max-width:100%;margin:0 0 2px;line-height:0;letter-spacing:normal;font-size:0;text-shadow:none}.hero-logo{display:block;width:100%;height:auto;max-height:320px;object-fit:contain;object-position:left center;filter:drop-shadow(0 12px 24px rgba(0,0,0,.42)) drop-shadow(0 0 16px rgba(50,145,255,.18))}.hero-tagline{font-size:clamp(14px,2vw,22px);letter-spacing:.36em;margin:22px 0 7px;color:#e7ecf5}.hero-subtitle{margin:0;color:#a6b7ca;letter-spacing:.06em;font-size:13px}.hero-buttons{display:flex;gap:13px;flex-wrap:wrap;margin-top:31px}.btn{font:800 11px var(--sans);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:11px;min-height:48px;padding:0 21px;border-radius:6px;cursor:pointer;transition:transform .2s,box-shadow .2s,border-color .2s;color:#fff}.btn:hover{transform:translateY(-2px)}.btn-red{border:1px solid #ff5a6a;background:linear-gradient(130deg,#ff3a52,#c80e2e);box-shadow:0 8px 26px #ff1d3b2e}.btn-red:hover{box-shadow:0 8px 28px #ff1d3b5e}.btn-ghost,.btn-outline{border:1px solid rgba(212,233,255,.48);background:rgba(5,10,18,.45)}.btn-ghost:hover,.btn-outline:hover{border-color:#e6f4ff;box-shadow:0 0 20px #4ba5ff24}.play-triangle{font-size:13px}.social-row{display:flex;gap:11px;margin-top:29px}.social{display:grid;place-items:center;width:34px;height:34px;border-radius:8px;text-decoration:none;font-weight:900;color:#fff;font-size:15px;box-shadow:0 6px 18px #0004;transition:transform .2s}.social:hover{transform:translateY(-3px)}.youtube{background:#ff1835}.vk{background:#1689e9}.spotify{background:#17bf72;font-size:21px}.telegram{background:#1e9ddd}.hero-scroll{display:flex;align-items:center;gap:9px;color:#75879a;font-size:9px;text-transform:uppercase;letter-spacing:.15em;margin-top:48px}.hero-scroll span{height:24px;width:14px;border:1px solid #8298ad;border-radius:10px;position:relative}.hero-scroll span:after{content:"";position:absolute;top:5px;left:5px;width:2px;height:4px;background:#d3edff;border-radius:4px}.hero-orbit{position:absolute;border:1px solid #7fcbff25;border-radius:50%;pointer-events:none}.orbit-one{width:510px;height:510px;right:-50px;top:-100px}.orbit-two{width:360px;height:360px;right:25px;top:-25px}.hero-side-note{position:absolute;right:26px;bottom:29px;color:#7f94aa;font-size:9px;letter-spacing:.2em;writing-mode:vertical-rl}.hero-side-note b{color:#ff4159;margin:14px 0}
.section{max-width:var(--max);padding:78px 28px;margin:0 auto}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:25px;margin-bottom:28px}.kicker{margin:0 0 8px}.section h2,.contact-section h2{font:clamp(32px,4vw,48px)/1.08 var(--serif);letter-spacing:-.025em;margin:0}.text-link{color:#d8e8f8;text-decoration:none;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.09em;white-space:nowrap;border-bottom:1px solid #e84b60;padding-bottom:8px}.text-link span{color:#ff3b54;margin-left:6px}.section-aside{color:var(--muted);font-size:12px;max-width:300px;margin:0 0 5px}.release-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:19px}.release-card{min-width:0}.cover-wrap{aspect-ratio:1/1.13;position:relative;overflow:hidden;background:#101c2a;border:1px solid var(--line);border-radius:8px}.cover-wrap img,.store-card>img,.world-card img,.video-image img,.artist-art img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}.release-card:hover .cover-wrap img,.store-card:hover>img{transform:scale(1.055)}.cover-wrap:after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(transparent,#05080f7a);pointer-events:none}.cover-play{position:absolute;z-index:2;left:13px;bottom:13px;width:38px;height:38px;border:1px solid #ffffffbb;border-radius:50%;color:white;background:#040913a8;cursor:pointer}.cover-play:hover{background:var(--red);border-color:var(--red)}.cover-index{position:absolute;right:12px;top:12px;z-index:2;font-size:9px;letter-spacing:.1em;color:#dcecff;background:#07101d99;border:1px solid #b9d6ff44;border-radius:20px;padding:4px 7px}.release-info{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:13px 2px}.release-info h3,.store-card h3{font-size:14px;line-height:1.35;margin:0 0 5px;font-weight:700}.release-info p{font-size:10px;color:#8f9eb0;margin:0}.mini-add{width:32px;height:32px;flex-shrink:0;border:1px solid #ed3a51;border-radius:5px;color:#fff;background:#e91c3c;cursor:pointer;font-size:23px;line-height:1}.mini-add:hover{box-shadow:0 0 16px #fb344b66}.centered{text-align:center;margin-top:24px}.btn-outline{min-height:42px;padding:0 18px;font-size:10px}.worlds-section{padding-top:27px}.world-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.world-card{position:relative;overflow:hidden;aspect-ratio:.92;border:1px solid var(--line);border-radius:8px;background:#09111b;color:#fff;text-align:left;padding:0;cursor:pointer}.world-card img{position:absolute;inset:0}.world-card:hover img{transform:scale(1.06)}.world-shade{position:absolute;inset:0;background:linear-gradient(0deg,#03070ff2 0%,#03070f4a 53%,#03070f0a)}.world-content{position:absolute;left:18px;bottom:20px;display:flex;flex-direction:column}.world-content small{font-size:9px;letter-spacing:.15em;color:#9fb6ca}.world-content strong{font:25px var(--serif);text-transform:uppercase;margin-top:4px}.world-content em{font-size:10px;color:#d6deeb;font-style:normal;margin-top:3px}.world-arrow{position:absolute;right:14px;top:14px;width:30px;height:30px;display:grid;place-items:center;border:1px solid #ffffff65;border-radius:50%;font-size:15px;transition:background .2s}.world-card:hover .world-arrow{background:var(--red);border-color:var(--red)}
.catalog-section{padding-top:60px}.catalog-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px}.filter-chips{display:flex;gap:8px;flex-wrap:wrap}.chip{padding:9px 13px;border:1px solid #304254;background:#09111b;border-radius:5px;color:#c3d0de;font:700 10px var(--sans);cursor:pointer;transition:.2s}.chip:hover,.chip.active{background:#f12c47;color:white;border-color:#f12c47}.catalog-search{display:flex;gap:8px;align-items:center;border-bottom:1px solid #526174;color:#8da2b8;padding:6px 0;min-width:170px}.catalog-search input{width:140px;background:none;border:0;color:#fff;outline:none;font:12px var(--sans)}.catalog-search input::placeholder{color:#7c899a}.store-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.store-card{display:grid;grid-template-columns:42% minmax(0,1fr);min-height:190px;overflow:hidden;border:1px solid var(--line);border-radius:8px;background:linear-gradient(125deg,#0a1521,#080e17);transition:border-color .2s,transform .2s}.store-card:hover{border-color:#3c7899;transform:translateY(-3px)}.store-card>img{min-height:100%;aspect-ratio:.76;object-fit:cover}.store-card-info{display:flex;flex-direction:column;justify-content:center;padding:15px 14px;min-width:0}.store-type{color:#87a3ba;font-size:8px;letter-spacing:.12em;font-weight:800;margin:0 0 7px}.store-card h3{font-size:13px;min-height:34px}.store-buy{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:7px;border-top:1px solid var(--line);padding-top:12px}.store-buy strong{font-size:11px;white-space:nowrap}.store-buy button{font:800 9px var(--sans);text-transform:uppercase;color:white;background:transparent;border:1px solid #d74359;border-radius:4px;padding:8px 9px;cursor:pointer;white-space:nowrap}.store-buy button span{color:#ff5267;font-size:13px;margin-left:3px}.store-buy button:hover{background:#ef2342}.store-buy button:hover span{color:#fff}.prototype-note{font-size:10px;color:#788a9c;margin:22px 0 0;display:flex;gap:8px;align-items:center}.prototype-note span{color:#f8b450;font-size:16px}.empty-state{color:var(--muted);padding:40px;text-align:center;border:1px dashed var(--line)}.hidden{display:none!important}
.artist-section{max-width:var(--max);margin:25px auto 0;padding:0 28px;display:grid;grid-template-columns:1.08fr .92fr;gap:45px;align-items:center}.artist-art{position:relative;min-height:420px;overflow:hidden;border:1px solid var(--line);border-radius:8px;background:#09111b}.artist-art img{position:absolute;inset:0}.artist-art:after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(transparent,#03060ee8)}.artist-art-caption{position:absolute;z-index:1;left:20px;bottom:17px;color:#b7d3ec;font-size:9px;letter-spacing:.2em}.artist-art-caption span{color:#fa3450;margin-left:7px}.artist-copy h2{font-size:clamp(35px,4vw,53px);margin-bottom:21px}.artist-copy h2 span,.contact-section h2 span{color:#e9d9e6;text-shadow:0 0 24px #f3314938}.artist-copy>p:not(.kicker){color:#abb9c9;font-size:13px;max-width:470px;line-height:1.9}.artist-copy .btn{margin-top:17px}.artist-stats{display:flex;gap:34px;border-top:1px solid var(--line);margin-top:26px;padding-top:18px}.artist-stats div{display:flex;flex-direction:column}.artist-stats strong{font-size:12px}.artist-stats span{font-size:10px;color:#8192a4}
.video-section{padding-top:92px}.video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.video-card{padding:0;text-align:left;background:none;color:white;border:0;cursor:pointer;min-width:0}.video-image{display:block;position:relative;aspect-ratio:1.68;overflow:hidden;border:1px solid var(--line);border-radius:7px;background:#111d2a}.video-image:after{content:"";position:absolute;inset:0;background:#02061025;transition:background .2s}.video-image i{font-style:normal;position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);width:48px;height:48px;border-radius:50%;display:grid;place-items:center;border:1px solid #ffffffaa;background:#0206109c;color:#fff;font-size:17px}.video-card:hover .video-image i{background:var(--red);border-color:var(--red)}.video-card:hover .video-image img{transform:scale(1.05)}.video-title{display:block;margin:13px 0 3px;font-weight:800;font-size:13px}.video-card small{display:block;color:#8495a8;font-size:10px;line-height:1.5}
.contact-section{max-width:var(--max);margin:30px auto 0;padding:70px 28px 80px;display:grid;grid-template-columns:1fr .72fr;gap:65px;position:relative;isolation:isolate;border-top:1px solid var(--line)}.contact-orb{position:absolute;z-index:-1;right:0;top:0;bottom:0;width:55%;opacity:.36;background:radial-gradient(circle at 80% 20%,#005a9c 0%,transparent 50%),radial-gradient(circle at 82% 80%,#ac1435 0%,transparent 45%)}.contact-section h2{font-size:clamp(36px,4vw,53px);margin:13px 0 15px}.contact-copy>p:not(.kicker){color:#a4b3c4;max-width:440px;font-size:13px}.contact-links{display:flex;flex-direction:column;gap:14px;margin-top:29px}.contact-links a{display:flex;gap:13px;align-items:center;color:#fff;text-decoration:none}.contact-links>a>span:first-child{width:38px;height:38px;border:1px solid #42617c;border-radius:6px;display:grid;place-items:center;font-size:18px}.contact-links small,.contact-links strong{display:block}.contact-links small{color:#8fa4b8;font-size:10px}.contact-links strong{font-size:12px;margin-top:2px}.contact-form{padding:23px;border:1px solid var(--line);border-radius:8px;background:#09111bd9;box-shadow:0 16px 50px #0003}.contact-form h3{margin:0 0 18px;font-size:18px;font-family:var(--serif)}.contact-form label{display:block;color:#a3b3c4;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.09em;margin-bottom:14px}.contact-form input,.contact-form textarea{display:block;width:100%;margin-top:7px;background:#050a12;border:1px solid #28394b;border-radius:5px;padding:12px;color:#fff;outline:none;font:12px var(--sans);resize:vertical}.contact-form input:focus,.contact-form textarea:focus{border-color:#3d9bd6}.contact-form .btn{width:100%;margin-top:2px}.form-note{font-size:9px;color:#72849a;line-height:1.5;margin-bottom:0}.site-footer{border-top:1px solid var(--line);padding:34px 25px 28px;display:flex;flex-direction:column;align-items:center;text-align:center;background:rgba(3,6,12,.76)}.footer-brand{font-size:29px}.site-footer>p{margin:2px 0 18px;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:#8fa4b8}.footer-links{display:flex;gap:25px;flex-wrap:wrap;justify-content:center;margin-bottom:24px}.footer-links a{color:#a8b7c6;text-decoration:none;font-size:10px}.footer-links a:hover{color:#fff}.site-footer>small{padding-top:17px;border-top:1px solid #1e2a37;width:min(600px,100%);color:#66798b;font-size:9px}
.toast{position:fixed;z-index:100;left:50%;bottom:25px;transform:translate(-50%,20px);padding:12px 18px;border:1px solid #45637d;border-radius:8px;background:#0c1826;color:#eef7ff;box-shadow:0 13px 40px #0008;max-width:calc(100vw - 36px);font-size:12px;opacity:0;pointer-events:none;transition:.25s}.toast.show{opacity:1;transform:translate(-50%,0)}.overlay{position:fixed;inset:0;z-index:80;display:none;place-items:center;background:#02050bcd;backdrop-filter:blur(8px);padding:20px}.overlay.open{display:grid}.search-dialog,.cart-dialog{width:min(560px,100%);max-height:min(80vh,760px);overflow:auto;background:#09121e;border:1px solid #314b63;border-radius:12px;padding:27px;box-shadow:0 25px 80px #000a;position:relative}.search-dialog h2,.cart-dialog h2{font:32px var(--serif);margin:0 0 20px}.search-dialog input{width:100%;padding:15px;border:1px solid #38516a;border-radius:6px;background:#050a12;color:white;font:13px var(--sans);outline:none}.close-dialog{border:1px solid #526b82;border-radius:50%;width:35px;height:35px;background:#0a1623;color:#fff;font-size:23px;line-height:1;cursor:pointer}.search-dialog>.close-dialog{position:absolute;right:23px;top:23px}.dialog-hint{font-size:10px;color:#7e92a7;line-height:1.6;margin:14px 0 0}.dialog-heading{display:flex;align-items:start;justify-content:space-between}.cart-items{display:flex;flex-direction:column;gap:11px}.cart-empty{color:#8294a6;font-size:12px;padding:15px 0}.cart-line{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}.cart-line strong{font-size:12px}.cart-line small{display:block;color:#8697a8;font-size:10px}.cart-line b{font-size:11px;white-space:nowrap}.remove-item{background:none;border:0;color:#ff6376;font-size:20px;cursor:pointer}.cart-total{display:flex;justify-content:space-between;margin:20px 0;font-size:13px}.cart-total strong{font-size:18px}.full-width{width:100%}
@media(max-width:1100px){.site-header{gap:20px;padding-inline:22px}.brand{font-size:22px}.main-nav{gap:14px}.nav-link{font-size:9px}.store-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.store-card{min-height:210px}.hero{min-height:600px}}
@media(max-width:800px){.site-header{height:66px;padding-inline:18px;gap:14px}.mobile-menu{display:flex;width:35px;height:35px;padding:8px 5px;flex-direction:column;justify-content:space-around;border:0;background:none;cursor:pointer;order:0}.mobile-menu span{width:23px;height:2px;background:#eaf5ff;display:block}.brand{order:1;font-size:23px}.header-actions{margin-left:auto;order:2}.main-nav{display:none;position:absolute;top:65px;left:0;right:0;padding:8px 18px 18px;background:#050a12f7;border-bottom:1px solid var(--line);align-items:stretch;flex-direction:column;gap:0}.main-nav.open{display:flex}.nav-link{height:42px;font-size:10px;border-bottom:1px solid #172534}.nav-link.active:after{left:auto;width:3px;top:10px;bottom:10px;height:auto}.hero{min-height:600px}.hero-content{padding:85px 22px 58px}.hero h1{font-size:clamp(54px,12vw,91px)}.hero h1.hero-logo-heading{width:min(100%,500px)}.hero-logo{max-height:280px}.hero-side-note{display:none}.orbit-one{right:-280px}.orbit-two{right:-220px}.section{padding:62px 20px}.release-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.release-info h3{font-size:12px}.release-info p{font-size:9px}.cover-play{width:34px;height:34px}.world-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.world-card{aspect-ratio:.88}.world-content{left:13px;bottom:15px}.world-content strong{font-size:22px}.catalog-toolbar{align-items:stretch}.filter-chips{gap:6px}.chip{padding:8px 10px}.catalog-search{width:100%}.catalog-search input{flex:1;width:100%}.store-grid{grid-template-columns:1fr;gap:13px}.store-card{grid-template-columns:37% 1fr;min-height:175px}.store-card-info{padding:13px}.store-card h3{font-size:13px;min-height:0;margin-bottom:13px}.store-type{margin-bottom:7px}.artist-section{padding:0 20px;grid-template-columns:1fr;gap:27px;margin-top:10px}.artist-art{min-height:330px}.artist-copy{padding-bottom:10px}.video-section{padding-top:65px}.video-grid{grid-template-columns:1fr;gap:25px}.video-image{aspect-ratio:1.75}.contact-section{padding:60px 20px;grid-template-columns:1fr;gap:28px}.contact-orb{width:100%;opacity:.25}.contact-form{padding:18px}.footer-links{gap:13px 20px}}
@media(max-width:430px){.hero{min-height:620px}.hero-backdrop{background-position:58% center}.hero-content{padding-inline:18px}.hero h1.hero-logo-heading{width:min(100%,390px);margin-bottom:6px}.hero-logo{max-height:225px}.hero-tagline{letter-spacing:.23em;font-size:13px}.hero-subtitle{font-size:11px}.hero-buttons .btn{width:100%}.social-row{margin-top:23px}.section-heading{align-items:start;flex-direction:column;gap:13px}.section-aside{font-size:11px}.release-grid{gap:10px}.release-info{align-items:start}.release-info h3{font-size:11px}.mini-add{width:28px;height:28px;font-size:20px}.store-card{grid-template-columns:34% 1fr;min-height:160px}.store-buy button{font-size:8px;padding:8px 7px}.store-buy strong{font-size:10px}.world-content strong{font-size:20px}.artist-art{min-height:260px}.artist-stats{gap:20px}.site-footer{padding-inline:16px}.footer-links{gap:10px 14px}.social{width:32px;height:32px}}

/* V4 cosmic page background: persistent full-universe canvas, readability overlays */
.section h2,.contact-section h2,.hero h1{ text-shadow:0 2px 24px rgba(0,0,0,.48) }

/* V5: bright cosmic dawn backdrop + premium logo lockup */
.section-heading h2,.hero-tagline,.hero-subtitle,.hero-scroll,.kicker { text-shadow: 0 2px 14px rgba(0,0,0,.38); }
.release-card,.store-card,.contact-form,.contact-section form { backdrop-filter: blur(5px); }


/* V6 — practical music catalogue controls */
.header-actions{gap:7px}
.header-actions .icon-btn svg{width:19px;height:19px}
.language-picker{display:flex;align-items:center;gap:3px;color:#8eb5d1;border:1px solid #2b4054;border-radius:5px;padding:0 5px;height:29px;background:#06101a}
.language-picker span{font-size:12px;line-height:1}
.language-picker select{width:38px;background:transparent;border:0;color:#f4f8ff;font:800 10px var(--sans);outline:none;cursor:pointer;padding:4px 0}
.language-picker option{background:#07101b;color:#fff}
.store-grid{align-items:stretch;gap:16px}
.store-card{grid-template-columns:36% minmax(0,1fr);min-height:260px;background:linear-gradient(145deg,rgba(7,20,34,.91),rgba(4,10,19,.88));box-shadow:0 12px 32px #0002}
.store-card>img{width:100%;height:100%;min-height:260px;aspect-ratio:auto;object-fit:cover;object-position:center}
.store-card-info{justify-content:flex-start;gap:0;padding:14px 13px}
.store-card h3{min-height:36px;font-size:13px;margin-bottom:9px}
.store-price-row{display:flex;align-items:baseline;gap:6px;border-bottom:1px solid rgba(143,183,216,.18);padding-bottom:9px;margin-bottom:9px}
.store-price-row strong{font-size:18px;color:#fff;white-space:nowrap}
.store-price-row small{font-size:10px;color:#97abc0}
.track-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:auto}
.track-actions button{border-radius:5px;padding:8px 7px;font:800 9px var(--sans);cursor:pointer;transition:background .18s,border-color .18s,transform .18s;min-width:0}
.track-actions button:hover{transform:translateY(-1px)}
.action-preview{grid-column:1/-1;background:#102438;border:1px solid #3b7196;color:#eaf6ff;text-align:left}
.action-preview:hover{background:#153653;border-color:#64b7f0}
.action-buy{background:linear-gradient(135deg,#ff3a55,#c80f30);color:white;border:1px solid #ff5b70}
.action-buy:hover{box-shadow:0 0 18px #f52f4b55}
.action-free{background:rgba(4,15,25,.65);color:#b6d3e8;border:1px solid #37516a}
.action-free:hover{background:#102c40;border-color:#63a9d8;color:white}
.prototype-note{align-items:flex-start;line-height:1.65}
.playlist-dialog,.checkout-dialog{width:min(700px,100%);max-height:min(84vh,820px);overflow:auto;background:#09121e;border:1px solid #314b63;border-radius:12px;padding:26px;box-shadow:0 25px 80px #000a;position:relative}
.playlist-dialog h2,.checkout-dialog h2{font:32px var(--serif);margin:0 0 8px}
.playlist-list{display:flex;flex-direction:column;gap:9px;margin-top:17px}
.playlist-row{display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:12px;padding:8px;border:1px solid rgba(125,169,205,.19);border-radius:7px;background:rgba(4,12,21,.72)}
.playlist-row img{width:48px;height:48px;object-fit:cover;border-radius:4px}
.playlist-meta{min-width:0}
.playlist-meta strong,.playlist-meta small{display:block;overflow-wrap:anywhere}
.playlist-meta strong{font-size:12px}
.playlist-meta small{font-size:9px;color:#8fa7bb;margin-top:3px}
.playlist-actions{display:flex;gap:5px;align-items:center}
.playlist-actions button{border-radius:4px;border:1px solid #34516b;padding:7px 8px;font:800 9px var(--sans);cursor:pointer;background:#0e2030;color:#fff;white-space:nowrap}
.playlist-actions .playlist-demo{width:31px;height:31px;padding:0;border-radius:50%}
.playlist-actions .playlist-buy{background:#d71938;border-color:#ee3b54}
.playlist-actions .playlist-free{font-size:14px}
.checkout-summary{background:rgba(18,44,64,.6);border:1px solid #2a536f;border-radius:7px;padding:12px;font-size:12px;overflow-wrap:anywhere}
.checkout-form>label{display:block;color:#a7bfd2;font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;margin:14px 0}
.checkout-form input:not([type=radio]){display:block;width:100%;margin-top:6px;background:#050a12;border:1px solid #30465a;border-radius:5px;padding:12px;color:white;outline:none;font:12px var(--sans)}
.checkout-form input:focus{border-color:#4aa4dc}
.checkout-form fieldset{border:1px solid #294256;border-radius:7px;padding:12px;margin:17px 0}
.checkout-form legend{color:#a7bfd2;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:0 5px}
.payment-option{display:flex;align-items:center;gap:9px;padding:9px;border-radius:5px;background:#07101a;color:#e2edf7;font-size:12px;margin:6px 0}
.payment-option input{accent-color:#f12c47}
.audio-dock{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:70;width:min(840px,calc(100vw - 24px));display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:11px;border:1px solid #3b617b;background:linear-gradient(110deg,rgba(5,16,28,.97),rgba(10,23,37,.97));box-shadow:0 18px 58px #000a;backdrop-filter:blur(18px)}
.audio-dock-play{flex:0 0 38px;width:38px;height:38px;border:1px solid #ff6476;border-radius:50%;background:#ed2141;color:white;cursor:pointer;font-size:13px}
.audio-dock-play:focus-visible,.audio-dock-close:focus-visible,.audio-seek:focus-visible{outline:2px solid #8bd5ff;outline-offset:3px}
.audio-dock-main{display:flex;flex:1;flex-direction:column;gap:6px;min-width:0}
.audio-dock-info{display:flex;flex-direction:column;min-width:0;max-width:none;gap:2px}
.audio-dock-info strong{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.audio-dock-info small{font-size:10px;color:#a7c1d8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.audio-seek{--seek-progress:0%;display:block;appearance:none;-webkit-appearance:none;width:100%;min-width:70px;height:14px;margin:0;padding:0;border:0;outline:none;cursor:pointer;background:transparent;touch-action:pan-y}
.audio-seek::-webkit-slider-runnable-track{height:7px;border:1px solid rgba(103,151,185,.5);border-radius:999px;background:linear-gradient(90deg,#f12c47 0%,#72c9ff var(--seek-progress),rgba(80,117,145,.36) var(--seek-progress),rgba(80,117,145,.36) 100%);box-shadow:inset 0 1px 2px rgba(0,0,0,.55)}
.audio-seek::-moz-range-track{height:7px;border:1px solid rgba(103,151,185,.5);border-radius:999px;background:rgba(80,117,145,.36);box-shadow:inset 0 1px 2px rgba(0,0,0,.55)}
.audio-seek::-moz-range-progress{height:7px;border-radius:999px;background:linear-gradient(90deg,#f12c47,#72c9ff)}
.audio-seek::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:13px;height:13px;margin-top:-4px;border-radius:50%;border:2px solid #f7fbff;background:#f12c47;box-shadow:0 0 0 3px rgba(114,201,255,.16),0 0 12px rgba(114,201,255,.65)}
.audio-seek::-moz-range-thumb{width:10px;height:10px;border-radius:50%;border:2px solid #f7fbff;background:#f12c47;box-shadow:0 0 0 3px rgba(114,201,255,.16),0 0 12px rgba(114,201,255,.65)}
.audio-time{font-size:10px;color:#c6d8e9;white-space:nowrap;font-variant-numeric:tabular-nums;min-width:76px;text-align:center}
.audio-dock-close{background:none;border:0;color:#aabed0;font-size:23px;cursor:pointer;padding:0 3px;flex:0 0 auto}
@media(max-width:1100px){.store-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.store-card{min-height:250px}}
@media(max-width:800px){.header-actions{gap:2px}.language-picker{height:27px;padding:0 3px}.language-picker select{width:34px}.store-grid{grid-template-columns:1fr}.store-card{grid-template-columns:35% minmax(0,1fr);min-height:225px}.store-card>img{min-height:225px}.store-card-info{padding:12px}.track-actions button{font-size:9px;padding:9px 6px}.audio-dock{gap:8px;padding:8px}.audio-dock-main{gap:5px}.audio-dock-info{min-width:0}.audio-dock-info small{font-size:9px}.audio-time{font-size:9px;min-width:68px}.playlist-dialog,.checkout-dialog{padding:18px}}
@media(max-width:430px){.site-header{gap:7px;padding-inline:10px}.brand{font-size:20px}.header-actions .icon-btn{width:26px}.header-actions .icon-btn svg{width:17px;height:17px}.language-picker span{display:none}.language-picker select{font-size:9px}.store-card{grid-template-columns:32% minmax(0,1fr);min-height:230px}.store-card>img{min-height:230px}.store-card h3{font-size:12px}.store-price-row strong{font-size:16px}.track-actions{grid-template-columns:1fr}.action-preview{grid-column:auto}.audio-dock-info small{max-width:none}.audio-dock-play{flex-basis:32px;width:32px;height:32px}.audio-time{min-width:61px;font-size:8px}.audio-dock-close{font-size:21px}.playlist-row{grid-template-columns:38px minmax(0,1fr);gap:8px}.playlist-row img{width:38px;height:38px}.playlist-actions{grid-column:1/-1;justify-content:flex-end}.playlist-actions button{flex:1}.playlist-actions .playlist-demo{flex:0 0 32px}}


/* V7 — Romantic genre, accessible contrast and a transparent donation placeholder */
.world-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.world-card{aspect-ratio:.82;box-shadow:0 12px 35px rgba(0,0,0,.28)}
.world-card .world-shade{background:linear-gradient(0deg,rgba(2,7,15,.96) 0%,rgba(2,7,15,.66) 35%,rgba(2,7,15,.08) 76%,rgba(2,7,15,.02) 100%)}
.world-content{right:12px;text-shadow:0 2px 12px rgba(0,0,0,.95)}
.world-content strong{font-size:clamp(19px,1.9vw,25px);text-shadow:0 2px 12px #000,0 0 18px #000b}
.world-content small,.world-content em{color:#fff;text-shadow:0 2px 9px #000,0 0 12px #000}
.world-card.romantic-world-card{border-color:rgba(255,143,205,.55);box-shadow:0 12px 34px rgba(70,14,70,.25)}
.world-card.romantic-world-card:hover{border-color:#ff9ccc;box-shadow:0 0 24px rgba(237,81,167,.26)}
.section-heading{padding:13px 16px;border:1px solid rgba(167,208,244,.20);border-radius:9px;background:linear-gradient(100deg,rgba(3,9,18,.87),rgba(4,11,20,.72));backdrop-filter:blur(10px);box-shadow:0 10px 28px rgba(0,0,0,.16)}
.section-heading h2{color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.88),0 0 22px rgba(0,0,0,.68)}
.section-heading .kicker,.kicker{color:#b9e2ff;text-shadow:0 2px 7px rgba(0,0,0,.95)}
.section-aside{color:#f1f6ff;text-shadow:0 2px 8px rgba(0,0,0,.95)}
.release-info{background:linear-gradient(100deg,rgba(3,9,17,.92),rgba(4,12,22,.80));border:1px solid rgba(148,197,235,.12);border-top:0;border-radius:0 0 7px 7px;padding:11px 12px}
.release-info p{color:#cfdfef;text-shadow:0 1px 5px #000}
.artist-copy{position:relative;isolation:isolate;padding:30px;border:1px solid rgba(167,209,247,.26);border-radius:12px;background:linear-gradient(135deg,rgba(3,9,18,.94),rgba(4,13,24,.88));box-shadow:0 18px 48px rgba(0,0,0,.28);backdrop-filter:blur(12px)}
.artist-copy h2,.artist-copy h2 span{color:#fff;text-shadow:0 2px 12px #000,0 0 24px rgba(5,12,22,.85)}
.artist-copy>p:not(.kicker){color:#e7f0fa;font-size:13px;line-height:1.85;text-shadow:0 1px 5px rgba(0,0,0,.55)}
.artist-stats{border-color:rgba(190,220,246,.27)}
.artist-stats strong{color:#fff}.artist-stats span{color:#d4e4f4}
.contact-copy{padding:27px;border:1px solid rgba(167,209,247,.23);border-radius:12px;background:linear-gradient(135deg,rgba(3,9,18,.89),rgba(4,13,24,.82));box-shadow:0 18px 48px rgba(0,0,0,.20);backdrop-filter:blur(12px)}
.contact-copy>p:not(.kicker){color:#edf5ff;text-shadow:0 1px 5px rgba(0,0,0,.8)}
.contact-links small{color:#c2d5e8}.contact-links strong{color:#fff;text-shadow:0 1px 4px #000}
.prototype-note{margin-top:17px;padding:12px 14px;border:1px solid rgba(153,197,232,.22);border-radius:7px;background:rgba(2,9,17,.78);color:#deebf8;backdrop-filter:blur(8px)}
.site-footer{background:rgba(2,5,10,.96);border-top:1px solid rgba(156,199,235,.22);box-shadow:0 -20px 60px rgba(0,0,0,.24)}
.support-section{max-width:var(--max);margin:0 auto;padding:30px 28px 76px;scroll-margin-top:90px}
.support-card{display:grid;grid-template-columns:1.1fr .9fr;gap:35px;align-items:center;padding:32px;border:1px solid rgba(123,190,239,.34);border-radius:13px;background:linear-gradient(115deg,rgba(3,11,22,.96),rgba(6,20,36,.92) 58%,rgba(38,8,26,.92));box-shadow:0 18px 55px rgba(0,0,0,.28);position:relative;overflow:hidden}
.support-card:after{content:"";position:absolute;inset:auto -10% -70% 45%;height:210px;background:radial-gradient(ellipse,rgba(9,133,226,.21),transparent 65%);pointer-events:none}
.support-copy,.support-action-panel{position:relative;z-index:1}
.support-copy h2{margin:3px 0 12px;font:clamp(30px,3.8vw,44px)/1.12 var(--serif);color:#fff;text-shadow:0 2px 12px #000}
.support-copy>p:not(.kicker){color:#e6f0fa;line-height:1.85;max-width:590px}
.support-copy .support-note{color:#ffdbe3!important;font-size:12px;background:rgba(10,5,13,.53);border-left:3px solid var(--red);padding:10px 13px;border-radius:0 6px 6px 0}
.support-action-panel{padding:22px;border:1px solid rgba(164,209,246,.2);border-radius:9px;background:rgba(2,8,16,.6)}
.support-amount-label{display:block;color:#d9eafa;font-size:11px;font-weight:800;margin-bottom:12px}
.donation-amounts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.donation-amount{min-height:43px;background:rgba(8,22,36,.94);border:1px solid #38536d;border-radius:6px;color:#edf6ff;font:800 13px var(--sans);cursor:pointer;transition:.2s}
.donation-amount:hover,.donation-amount.active{background:linear-gradient(135deg,#e92f4b,#a90c2a);border-color:#ff6178;box-shadow:0 0 18px rgba(239,42,70,.2)}
.support-button{width:100%;justify-content:center;min-height:48px}
.support-button strong{font-size:13px}
.support-secure-note{display:block;color:#bed3e5;font-size:10px;line-height:1.65;margin-top:12px}
.nav-support-link{color:#ffc2d0}
.nav-support-link:hover,.nav-support-link.active{color:#fff}
@media(max-width:1100px){.world-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.support-card{gap:20px;padding:25px}}
@media(max-width:800px){.world-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.support-section{padding:22px 20px 55px}.support-card{grid-template-columns:1fr;padding:22px;gap:14px}.support-action-panel{padding:17px}.artist-copy,.contact-copy{padding:21px}}
@media(max-width:430px){.world-grid{gap:10px}.world-card{aspect-ratio:.82}.world-content strong{font-size:18px}.world-content em{font-size:9px}.section-heading{padding:13px}.support-card{padding:17px}.support-copy h2{font-size:32px}.donation-amount{font-size:12px}}


/* V8 — daylight cosmos, clearer genre captions, and larger supporting text */
body{
  font-size:15px;
  background-image:linear-gradient(180deg,rgba(2,5,13,.008) 0%,rgba(2,5,13,.025) 42%,rgba(2,4,11,.055) 100%),url('assets/cosmic-background.jpg');
  background-color:#13243a;
}
.hero-backdrop{background:linear-gradient(90deg,rgba(3,6,13,.50) 0%,rgba(5,9,20,.22) 32%,rgba(4,9,20,.065) 64%,rgba(4,9,20,0) 100%),linear-gradient(0deg,#05080f 0%,rgba(5,8,15,.10) 17%,transparent 43%,rgba(3,6,13,.01) 100%),url('assets/cosmic-banner.jpg') center/cover no-repeat;}
.nav-link{font-size:11px}
.eyebrow,.kicker{font-size:11px;letter-spacing:.16em}
.hero-subtitle{font-size:14px;color:#d8e7f7;text-shadow:0 1px 8px rgba(0,0,0,.85)}
.hero-scroll{font-size:10px;color:#c7d9ed;text-shadow:0 1px 5px #000}
.section-aside{font-size:13px;line-height:1.55;color:#f4f8ff;text-shadow:0 2px 8px rgba(0,0,0,.9)}
.text-link{font-size:12px}
.release-info h3,.store-card h3{font-size:15px}
.release-info p{font-size:12px;line-height:1.5;color:#e3eefb;text-shadow:0 1px 5px #000}
.cover-index{font-size:10px;padding:5px 8px}
.world-card{border-color:rgba(224,240,255,.38);box-shadow:0 13px 32px rgba(0,0,0,.28),0 0 0 1px rgba(255,255,255,.045) inset}
.world-card:hover{border-color:rgba(173,221,255,.85);box-shadow:0 16px 38px rgba(0,0,0,.34),0 0 22px rgba(73,173,255,.18)}
.world-card .world-shade{background:linear-gradient(0deg,rgba(2,7,15,.90) 0%,rgba(2,7,15,.52) 34%,rgba(2,7,15,.08) 76%,rgba(2,7,15,.015) 100%)}
.world-content{left:10px;right:10px;bottom:10px;padding:10px 11px;border:1px solid rgba(224,239,255,.19);border-radius:7px;background:linear-gradient(110deg,rgba(2,8,18,.78),rgba(3,9,19,.58));backdrop-filter:blur(5px);text-shadow:0 2px 9px #000}
.world-content small{font-size:11px;line-height:1.4;letter-spacing:.12em;color:#d8eaff}
.world-content strong{font-size:clamp(21px,2vw,27px);line-height:1.2;margin-top:5px}
.world-content em{font-size:13px;line-height:1.45;font-weight:600;color:#fff;margin-top:5px;text-shadow:0 2px 8px #000}
.store-type{font-size:11px;letter-spacing:.09em;color:#bfd5e9}
.store-price-row small{font-size:12px;color:#d5e3f1}
.track-actions button{font-size:10px;padding:9px 8px}
.playlist-meta strong{font-size:14px}
.playlist-meta small{font-size:11px;color:#c1d3e4}
.playlist-actions button{font-size:10px}
.checkout-summary{font-size:13px}
.checkout-form>label,.checkout-form legend{font-size:11px}
.payment-option{font-size:13px}
.audio-dock-info strong{font-size:13px}
.audio-dock-info small{font-size:11px;color:#c6d8e9}
.audio-time{font-size:10px}
.artist-copy>p:not(.kicker){font-size:15px;line-height:1.8;color:#f0f6ff}
.contact-copy>p:not(.kicker){font-size:15px;line-height:1.75;color:#f7fbff}
.contact-links small{font-size:12px;color:#d5e5f4}
.prototype-note{font-size:12px;line-height:1.75}
.video-card small,.video-card .video-title{font-size:12px}
.form-note{font-size:12px;line-height:1.65}
.support-copy>p:not(.kicker){font-size:15px}
.support-copy .support-note{font-size:13px}
.support-amount-label{font-size:12px}
.support-secure-note{font-size:11px}

@media(max-width:800px){
  .world-content{left:8px;right:8px;bottom:8px;padding:8px}
  .world-content strong{font-size:21px}
  .world-content em{font-size:12px}
  .artist-copy>p:not(.kicker),.contact-copy>p:not(.kicker){font-size:14px}
  .track-actions button{font-size:10px}
}
@media(max-width:430px){
  .world-content{padding:7px}
  .world-content small{font-size:10px}
  .world-content strong{font-size:18px}
  .world-content em{font-size:11.5px}
  .release-info h3,.store-card h3{font-size:14px}
  .release-info p{font-size:11px}
  .section-aside{font-size:12px}
  .support-copy>p:not(.kicker){font-size:14px}
}


/* V9 — full hero figure, brighter cosmic day, signature slogan and legible genre controls */
.hero-backdrop{
  background-image:
    linear-gradient(90deg,rgba(3,6,13,.30) 0%,rgba(5,9,20,.12) 31%,rgba(4,9,20,.035) 66%,rgba(4,9,20,0) 100%),
    linear-gradient(0deg,rgba(5,8,15,.08) 0%,rgba(5,8,15,.015) 20%,transparent 48%,rgba(3,6,13,0) 100%),
    url('assets/cosmic-banner.jpg');
  background-size:auto,auto,cover;
  background-position:center,center,center center;
  filter:brightness(1.045) saturate(1.045);
  transform:none;
}
.hero-tagline{
  display:inline-block;
  position:relative;
  max-width:100%;
  padding:10px 16px 11px 18px;
  margin:22px 0 8px;
  border-left:3px solid #ff3653;
  border-bottom:1px solid rgba(107,203,255,.56);
  border-radius:0 7px 7px 0;
  background:linear-gradient(90deg,rgba(3,11,24,.78),rgba(7,24,43,.44) 75%,rgba(7,24,43,.08));
  box-shadow:0 8px 24px rgba(0,0,0,.19),0 0 24px rgba(25,139,237,.12);
  color:#fff;
  font-size:clamp(15px,2vw,23px);
  font-weight:800;
  letter-spacing:clamp(.14em,.32vw,.32em);
  text-shadow:0 2px 10px #000,0 0 16px rgba(81,178,255,.28);
  backdrop-filter:blur(4px);
}
.hero-tagline:after{
  content:"";position:absolute;left:18px;bottom:-2px;width:min(150px,42%);height:2px;
  background:linear-gradient(90deg,#ff3854,#69caff,transparent);box-shadow:0 0 10px rgba(84,194,255,.45)
}
.hero-subtitle{
  display:block;width:max-content;max-width:100%;padding:6px 11px;
  color:#f3f9ff;font-size:14px;font-weight:650;letter-spacing:.045em;
  background:linear-gradient(90deg,rgba(2,10,20,.62),rgba(2,10,20,.22));
  border-left:1px solid rgba(104,201,255,.6);border-radius:0 4px 4px 0;
  text-shadow:0 2px 8px #000,0 0 12px rgba(0,0,0,.85)
}
/* Category/filter pills are intentionally bigger and easier to tap/read. */
.chip{font-size:12.5px;padding:11px 16px;min-height:41px;letter-spacing:.015em;font-weight:800;border-color:rgba(148,202,242,.42);color:#f0f7ff;background:rgba(4,15,27,.9);box-shadow:0 3px 12px rgba(0,0,0,.16)}
.chip:hover,.chip.active{box-shadow:0 4px 18px rgba(243,49,73,.3)}
.catalog-search input{font-size:13px}
.artist-mini-logo{display:block;width:clamp(135px,16vw,190px);max-width:60%;height:auto;max-height:106px;object-fit:contain;object-position:left center;margin:0 0 12px;filter:drop-shadow(0 5px 13px rgba(0,0,0,.5)) drop-shadow(0 0 13px rgba(55,155,255,.12))}
.artist-copy h2{margin-top:2px}
/* Preserve a recognizable part of the hero art on narrower viewports. */
@media(max-width:800px){
  .hero-backdrop{background-position:center,center,78% center}
  .hero-tagline{letter-spacing:.18em;padding:9px 12px 10px 14px}
  .chip{font-size:12px;padding:10px 13px;min-height:40px}
  .artist-mini-logo{width:165px;max-width:55%;max-height:92px}
}
@media(max-width:430px){
  .hero-backdrop{background-position:center,center,86% center}
  .hero-tagline{font-size:14px;letter-spacing:.12em;line-height:1.5;margin-top:17px}
  .hero-subtitle{font-size:12px}
  .chip{font-size:11.5px;padding:9px 11px;min-height:38px}
  .artist-mini-logo{width:145px;max-height:82px;margin-bottom:8px}
}


/* V10 — roll back the overly bright hero only. Keep the full-page/daylight cosmos light. */
.hero{background:#050914;}
.hero-backdrop{
  background-image:
    linear-gradient(90deg,rgba(2,5,13,.20) 0%,rgba(2,5,13,.16) 34%,rgba(2,5,13,.09) 67%,rgba(2,5,13,.08) 100%),
    linear-gradient(0deg,rgba(2,4,11,.22) 0%,rgba(2,4,11,.04) 34%,rgba(2,4,11,.08) 100%),
    url('assets/cosmic-banner-v11.jpg');
  background-size:auto,auto,cover;
  background-position:center,center,center center;
  background-repeat:no-repeat;
  filter:none;
  transform:none;
}
/* On medium and narrow screens, keep the entire hood and figure inside the visible crop. */
@media(max-width:1100px){
  .hero-backdrop{background-position:center,center,78% center;}
}
@media(max-width:800px){
  .hero-backdrop{background-position:center,center,82% center;}
  .hero{min-height:620px;}
}
@media(max-width:430px){
  .hero-backdrop{background-position:center,center,84% center;}
  .hero{min-height:600px;}
}


/* V11: preserve the dark reference hero; new banner has the full hood and cloak safely inside frame. */
.hero{background-color:#040813;}
.hero-backdrop{background-size:auto,auto,cover;background-repeat:no-repeat;background-position:center,center,center center;}
@media(max-width:1100px){.hero-backdrop{background-position:center,center,78% center;}}
@media(max-width:800px){.hero-backdrop{background-position:center,center,82% center;}}
@media(max-width:430px){.hero-backdrop{background-position:center,center,84% center;}}


/* V14 — genre-reactive cosmic backgrounds. The hero's dark banner remains independent. */
body{
  isolation:isolate;
  position:relative;
  background-color:#030712 !important;
  background-image:none !important;
}
.world-background{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:linear-gradient(180deg,rgba(2,5,13,.23) 0%,rgba(2,5,13,.31) 44%,rgba(2,4,11,.43) 100%),url('assets/cosmic-background.jpg');
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  background-attachment:fixed;
  opacity:1;
  filter:saturate(.94);
  transition:opacity .38s ease;
  will-change:opacity,background-image;
}
.world-background.is-changing{opacity:.12}
.starfield{z-index:1}
main,.site-footer{position:relative;z-index:2}
.site-header{z-index:30}
.world-card{transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease}
.world-card.is-selected{
  border-color:#8fd2ff;
  box-shadow:0 0 0 2px rgba(84,177,255,.40),0 0 28px rgba(65,169,255,.26),0 12px 35px rgba(0,0,0,.35);
  transform:translateY(-2px);
}
.world-card.is-selected .world-arrow{background:var(--red);border-color:var(--red)}
/* Keep overlays legible regardless of the selected background. */
.section-heading,.artist-copy,.contact-copy,.contact-form,.support-card,.support-action-panel,.prototype-note{
  backdrop-filter:blur(13px);
}
@media(max-width:800px){
  .world-background{background-attachment:scroll;background-position:center center;filter:saturate(.88)}
}
html[data-motion-preference="reduced"] .world-background,html[data-motion-preference="reduced"] .world-card{transition:none!important}


/* V19 — multi-genre collection cart, free ZIP download prototype, and less intrusive Rock background. */
.collection-cta{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:0 0 22px;padding:17px 19px;border:1px solid rgba(151,201,241,.28);border-radius:9px;background:linear-gradient(100deg,rgba(4,12,23,.92),rgba(5,14,26,.78));backdrop-filter:blur(11px);box-shadow:0 12px 32px rgba(0,0,0,.18)}
.collection-cta-copy{display:flex;flex-direction:column;gap:3px;min-width:0}
.collection-cta-copy strong{font-size:14px;color:#fff;letter-spacing:.02em}
.collection-cta-copy span{font-size:12px;color:#d7e5f4;line-height:1.55}
.collection-cta-button{min-width:190px;flex-shrink:0}
.collection-count{display:inline-grid;place-items:center;min-width:23px;height:23px;padding:0 6px;border-radius:14px;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.38);font-size:11px}
.cart-dialog{width:min(660px,100%)}
.cart-intro{font-size:12px;color:#d2e0ef;margin:2px 0 16px}
.cart-line{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid var(--line)}
.cart-line-main{min-width:0}
.cart-line-main strong{font-size:13px;color:#fff;line-height:1.4;overflow-wrap:anywhere}
.cart-line-main small{display:block;color:#a8bdd0;font-size:10px;margin-top:3px}
.cart-line-side{display:flex;align-items:center;gap:12px}
.cart-line-side b{font-size:12px;white-space:nowrap;color:#fff}
.cart-total small{display:inline-block;color:#95aabd;font-size:10px;margin-left:8px}
.cart-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cart-actions .btn{min-height:45px;padding:10px 13px;font-size:10px}
.cart-clear-btn{grid-column:1/-1;background:transparent;border:0;color:#a8bdd0;text-decoration:underline;text-underline-offset:3px;font:600 11px var(--sans);padding:6px;cursor:pointer}
.cart-clear-btn:hover{color:#fff}
.cart-support-link{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:17px;padding:14px 16px;color:#fff;font-size:15px;line-height:1.35;font-weight:800;letter-spacing:.015em;text-align:center;text-decoration:none;border:1px solid rgba(255,75,111,.88);border-radius:9px;background:linear-gradient(105deg,rgba(243,49,73,.27),rgba(8,16,28,.96) 72%);box-shadow:0 0 0 1px rgba(243,49,73,.12),0 8px 24px rgba(243,49,73,.16);transition:transform .2s,box-shadow .2s,border-color .2s}
.cart-support-link:before{content:"♥";font-size:20px;line-height:1;color:#ff536e;text-shadow:0 0 14px rgba(255,60,96,.58)}
.cart-support-link:hover{color:#fff;border-color:#ffb3c0;box-shadow:0 0 0 1px rgba(255,89,123,.22),0 10px 30px rgba(243,49,73,.25);transform:translateY(-1px)}
.download-count{display:block;margin:5px 0 0;color:#c9d8e7;font-size:11px;line-height:1.4;font-weight:700;letter-spacing:.01em}
.release-info .download-count{font-size:10.5px;color:#b9cadb}
.store-card-info .download-count{margin-top:2px;margin-bottom:8px;font-size:10.5px}
.playlist-meta .download-count{margin-top:4px;font-size:10.5px}
.cart-download-count{font-size:10.5px;color:#bdcfe0}
.cart-actions button:disabled,.cart-clear-btn:disabled{opacity:.42;cursor:not-allowed;transform:none}
@media(max-width:800px){.collection-cta{align-items:stretch;flex-direction:column}.collection-cta-button{width:100%}}
@media(max-width:500px){.cart-actions{grid-template-columns:1fr}.cart-actions .cart-clear-btn{grid-column:auto}.cart-line{gap:8px}.cart-line-side{gap:8px}.cart-dialog{padding:18px}}


/* V22 — dual public metrics, clear optional support CTA, and small Rock framing nudge. */
.track-stats{display:flex;flex-wrap:wrap;align-items:center;gap:4px 9px;margin:5px 0 8px;color:#d4e5f5;font-size:10.5px;line-height:1.4;font-weight:700}
.track-stats .stat-item{display:inline-flex;align-items:center;gap:4px;min-width:0;color:#c6d8e9}
.track-stats .stat-icon{display:inline-grid;place-items:center;width:14px;height:14px;color:#ff7188;font-size:12px;font-weight:900}
.track-stats [data-play-stat],.track-stats [data-download-stat]{display:inline-block;overflow-wrap:anywhere}
.release-card .track-stats{font-size:9.5px;gap:3px 7px;margin-top:4px}
.store-card-info .track-stats{font-size:9.5px;gap:3px 7px;margin:5px 0 8px}
.playlist-track-stats{margin-top:5px;font-size:10.5px}
.cart-track-stats{margin-top:5px;margin-bottom:0;font-size:10.5px}
.nav-support-link{padding:8px 11px!important;border:1px solid rgba(255,91,119,.68);border-radius:6px;background:linear-gradient(115deg,rgba(229,35,69,.22),rgba(8,15,27,.88));color:#fff!important;box-shadow:0 0 15px rgba(238,43,74,.12);text-shadow:0 0 8px rgba(255,85,116,.22)}
.nav-support-link:hover,.nav-support-link.active{border-color:#ff8da2;background:linear-gradient(115deg,rgba(238,43,74,.54),rgba(20,12,23,.94));box-shadow:0 0 18px rgba(238,43,74,.26)}
.support-copy h2{font-size:clamp(34px,4.2vw,48px);text-shadow:0 0 20px rgba(239,47,76,.18),0 2px 12px rgba(0,0,0,.9)}
@media(max-width:800px){.track-stats{font-size:10px;gap:4px 7px}.nav-support-link{display:inline-flex;margin-top:5px}}


/* V23 — clear voluntary-choice copy in the hero and stronger Rock framing. */
.hero-choice-line{
  display:flex;align-items:flex-start;gap:10px;width:fit-content;max-width:min(600px,100%);
  margin:0 0 16px;padding:9px 13px 10px;border-left:2px solid #ff405b;border-radius:4px;
  background:rgba(4,10,20,.64);backdrop-filter:blur(9px);box-shadow:0 7px 24px rgba(0,0,0,.22);
  color:#f0f6ff;font-size:clamp(11px,1.05vw,13px);font-weight:750;letter-spacing:.025em;
  line-height:1.48;text-transform:none;text-shadow:0 1px 6px rgba(0,0,0,.65)
}
.hero-choice-line .live-dot{flex:0 0 7px;margin-top:.48em}
.hero-voluntary{margin:7px 0 0;color:#ffcbd6;font-size:12px;font-weight:650;letter-spacing:.035em;line-height:1.5;text-shadow:0 1px 7px rgba(0,0,0,.9)}
@media(max-width:800px){
  .hero-choice-line{font-size:12px;max-width:100%;padding:8px 10px;margin-bottom:13px}
  .hero-voluntary{font-size:11px}
}
@media(max-width:430px){
  .hero-choice-line{font-size:11px;line-height:1.45;letter-spacing:0;gap:8px}
  .hero-voluntary{font-size:11px;max-width:320px}
}


/* V26 — align all hero slogan lines to one vertical text edge. */
.hero-tagline {
  /* 3px border + 9px padding = 12px visible-text inset */
  padding-left: 9px;
}
.hero-tagline:after {
  left: 12px;
}
.hero-subtitle {
  /* 1px border + existing 11px padding = 12px visible-text inset */
  padding-left: 11px;
}
.hero-voluntary {
  /* Match the text start of the tagline and subtitle */
  padding-left: 12px;
}


/* V28 — visible but restrained motion, explicit visitor toggle, no dependence on OS motion preference. */
.hero-backdrop{
  transform-origin:center center;
  animation:xaocHeroDriftV28 27s ease-in-out infinite alternate;
  will-change:transform;
}
.hero-grid{animation:xaocGridDriftV28 34s ease-in-out infinite alternate}
.hero-logo-heading{
  position:relative;isolation:isolate;
  animation:xaocLogoEntrance 1.35s cubic-bezier(.2,.8,.2,1) both;
}
.hero-logo{
  transform-origin:center center;
  animation:xaocLogoAuraV28 5.8s ease-in-out 1s infinite;
  will-change:filter,transform;
}
.hero-logo-heading::after{
  content:"";position:absolute;inset:5% 1% 5% 1%;pointer-events:none;opacity:0;
  background:linear-gradient(112deg,transparent 31%,rgba(255,255,255,.13) 42%,rgba(255,255,255,.98) 49%,rgba(94,204,255,.45) 54%,transparent 65%);
  mix-blend-mode:screen;-webkit-mask-image:url('assets/xaocmusic-logo.png');mask-image:url('assets/xaocmusic-logo.png');
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;
  animation:xaocLogoSheenV28 7.2s ease-in-out 1.2s infinite;
}
.brand{animation:xaocBrandGlowV28 7s ease-in-out infinite}
.hero-orbit.orbit-one{animation:xaocOrbitOne 27s ease-in-out infinite alternate}
.hero-orbit.orbit-two{animation:xaocOrbitTwo 21s ease-in-out infinite alternate}
.world-background{
  transform-origin:center center;
  animation:xaocWorldDriftV28 31s ease-in-out infinite alternate;
  transition:opacity .38s ease,filter .7s ease;
  will-change:transform;
}
.world-background::before,.world-background::after{content:"";position:absolute;inset:-4%;pointer-events:none}
.world-background::before{
  opacity:.76;mix-blend-mode:screen;
  background:radial-gradient(ellipse at 17% 25%,rgba(55,158,255,.22),transparent 31%),radial-gradient(ellipse at 79% 65%,rgba(241,48,93,.18),transparent 35%);
  animation:xaocNebulaFlowV28 18s ease-in-out infinite alternate;
}
.world-background::after{
  opacity:.31;background:linear-gradient(112deg,transparent 17%,rgba(193,230,255,.16) 47%,transparent 62%);
  transform:translate3d(-22%,0,0);animation:xaocLightCurrentV28 14s ease-in-out infinite alternate;
}
.world-background.world-arriving{filter:saturate(1.12) brightness(1.06)}
body[data-music-world="slavic-folk"] .world-background::before{
  background:radial-gradient(ellipse at 20% 46%,rgba(255,180,74,.25),transparent 34%),radial-gradient(ellipse at 82% 68%,rgba(50,153,98,.20),transparent 34%);
}
body[data-music-world="trance"] .world-background::before{
  background:radial-gradient(ellipse at 55% 32%,rgba(91,115,255,.29),transparent 35%),radial-gradient(ellipse at 75% 66%,rgba(0,212,255,.23),transparent 32%);
}
body[data-music-world="rock"] .world-background::before{
  background:radial-gradient(ellipse at 82% 58%,rgba(255,40,65,.29),transparent 36%),radial-gradient(ellipse at 25% 24%,rgba(31,126,255,.21),transparent 33%);
}
body[data-music-world="ambient"] .world-background::before{
  background:radial-gradient(ellipse at 30% 30%,rgba(112,204,255,.25),transparent 38%),radial-gradient(ellipse at 72% 72%,rgba(173,222,255,.18),transparent 35%);
}
body[data-music-world="romantic"] .world-background::before{
  background:radial-gradient(ellipse at 22% 27%,rgba(255,116,190,.25),transparent 34%),radial-gradient(ellipse at 78% 64%,rgba(255,203,159,.23),transparent 37%);
}
.starfield{background-size:78px 78px,121px 121px;opacity:.3;animation:xaocStarfieldPanV28 52s linear infinite}
.cosmic-particle-field{position:fixed;inset:0;z-index:1;overflow:hidden;pointer-events:none;contain:strict;opacity:.96}
.cosmic-star{
  position:absolute;display:block;width:var(--star-size,1.8px);height:var(--star-size,1.8px);border-radius:50%;
  background:rgba(228,245,255,.95);box-shadow:0 0 6px 1px rgba(88,178,255,.58);opacity:.38;
  animation:xaocStarTwinkleV28 var(--twinkle-time,4s) ease-in-out var(--star-delay,0s) infinite,
             xaocStarDriftV28 var(--drift-time,20s) ease-in-out var(--star-delay,0s) infinite alternate;
  will-change:opacity,transform;
}
.cosmic-star--bright{opacity:.58;background:#fff;box-shadow:0 0 10px 2px rgba(107,197,255,.8)}
.cosmic-star--warm{background:#ffd8bd;box-shadow:0 0 8px 1px rgba(255,110,116,.62)}
.cosmic-particle-field::after{
  content:"";position:absolute;top:-16%;left:-18%;width:210px;height:2px;border-radius:50%;opacity:0;
  background:linear-gradient(90deg,transparent,rgba(219,246,255,.98));box-shadow:0 0 11px 2px rgba(76,183,255,.82);
  transform:rotate(-31deg);animation:xaocMeteorV28 13s linear infinite;
}
.world-card img{animation:xaocWorldCardLightV28 8.5s ease-in-out infinite alternate}
.world-card:nth-child(2) img{animation-delay:-3s}.world-card:nth-child(3) img{animation-delay:-6s}
.world-card:nth-child(4) img{animation-delay:-2s}.world-card:nth-child(5) img{animation-delay:-4.5s}
.world-card.is-selected{animation:xaocSelectedWorldGlowV28 4.5s ease-in-out infinite}
.motion-toggle{color:#9ddaff;min-width:30px;transition:color .2s,text-shadow .2s,transform .2s}
.motion-toggle span{display:block;font-size:20px;line-height:1;text-shadow:0 0 10px rgba(74,174,255,.7)}
.motion-toggle.is-on{color:#fff;text-shadow:0 0 14px rgba(75,173,255,.7)}
.motion-toggle.is-on span{animation:xaocToggleSpark 3s ease-in-out infinite}
.motion-toggle:not(.is-on){color:#7d8997;opacity:.72}
@keyframes xaocHeroDriftV28{0%{transform:scale(1.025) translate3d(0,0,0)}100%{transform:scale(1.075) translate3d(-.75%,.45%,0)}}
@keyframes xaocWorldDriftV28{0%{transform:scale(1.02) translate3d(0,0,0)}100%{transform:scale(1.075) translate3d(-.7%,.45%,0)}}
@keyframes xaocGridDriftV28{0%{background-position:center center,0 0}100%{background-position:center center,0 42px}}
@keyframes xaocLogoAuraV28{0%,100%{filter:drop-shadow(0 12px 24px rgba(0,0,0,.42)) drop-shadow(0 0 13px rgba(50,145,255,.20));transform:scale(1)}50%{filter:drop-shadow(0 12px 24px rgba(0,0,0,.42)) drop-shadow(0 0 27px rgba(50,145,255,.48)) drop-shadow(0 0 11px rgba(243,49,73,.28));transform:scale(1.012)}}
@keyframes xaocLogoSheenV28{0%,12%{opacity:0;transform:translateX(-14%)}20%{opacity:.98}35%{opacity:0;transform:translateX(14%)}100%{opacity:0;transform:translateX(14%)}}
@keyframes xaocBrandGlowV28{0%,84%,100%{text-shadow:0 0 14px rgba(236,53,92,.3)}91%{text-shadow:0 0 23px rgba(83,177,255,.58),0 0 10px rgba(236,53,92,.45)}}
@keyframes xaocNebulaFlowV28{0%{transform:translate3d(-1.8%,.6%,0) scale(1);opacity:.45}100%{transform:translate3d(1.8%,-.8%,0) scale(1.055);opacity:.83}}
@keyframes xaocLightCurrentV28{0%{transform:translate3d(-32%,0,0);opacity:.1}100%{transform:translate3d(32%,0,0);opacity:.38}}
@keyframes xaocStarfieldPanV28{0%{background-position:0 0,30px 45px}100%{background-position:145px 190px,-110px 160px}}
@keyframes xaocStarTwinkleV28{0%,100%{opacity:.2}45%{opacity:.86}68%{opacity:.37}}
@keyframes xaocStarDriftV28{0%{transform:translate3d(0,0,0) scale(.82)}100%{transform:translate3d(11px,-19px,0) scale(1.18)}}
@keyframes xaocMeteorV28{0%,57%{opacity:0;transform:translate3d(112vw,-12vh,0) rotate(-31deg)}59%{opacity:.98}68%{opacity:0;transform:translate3d(-20vw,108vh,0) rotate(-31deg)}100%{opacity:0;transform:translate3d(-20vw,108vh,0) rotate(-31deg)}}
@keyframes xaocWorldCardLightV28{0%{filter:brightness(.97) saturate(.98)}100%{filter:brightness(1.065) saturate(1.055)}}
@keyframes xaocSelectedWorldGlowV28{0%,100%{box-shadow:0 13px 32px rgba(0,0,0,.28),0 0 0 1px rgba(143,210,255,.12) inset}50%{box-shadow:0 13px 34px rgba(0,0,0,.3),0 0 24px rgba(75,173,255,.2),0 0 0 1px rgba(143,210,255,.38) inset}}
@keyframes xaocToggleSpark{0%,100%{transform:rotate(0) scale(1);opacity:.9}50%{transform:rotate(18deg) scale(1.12);opacity:1}}
@media(max-width:800px){
 .hero-backdrop{animation-duration:32s}.world-background{animation-duration:38s}.cosmic-particle-field::after{width:150px;animation-duration:16s}.world-background::before{opacity:.64}
 .motion-toggle{width:28px;min-width:28px;padding:0}
}
html[data-motion-preference="reduced"] .hero-backdrop,
html[data-motion-preference="reduced"] .hero-grid,
html[data-motion-preference="reduced"] .hero-logo-heading,
html[data-motion-preference="reduced"] .hero-logo,
html[data-motion-preference="reduced"] .hero-logo-heading::after,
html[data-motion-preference="reduced"] .brand,
html[data-motion-preference="reduced"] .hero-orbit,
html[data-motion-preference="reduced"] .world-background,
html[data-motion-preference="reduced"] .world-background::before,
html[data-motion-preference="reduced"] .world-background::after,
html[data-motion-preference="reduced"] .starfield,
html[data-motion-preference="reduced"] .cosmic-star,
html[data-motion-preference="reduced"] .cosmic-particle-field::after,
html[data-motion-preference="reduced"] .world-card img,
html[data-motion-preference="reduced"] .world-card.is-selected,
html[data-motion-preference="reduced"] .motion-toggle span{animation:none!important;transition:none!important;scroll-behavior:auto!important}
html[data-motion-preference="reduced"] .hero-logo-heading{opacity:1;filter:none;transform:none}


/* V29 — clean hero scroll hint: remove both oval spans, keep elegant readable text */
.hero-scroll {
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: 42px;
  color: #dcecff;
  font-family: "Segoe Script", "Bradley Hand", "Brush Script MT", "URW Chancery L", cursive;
  font-size: clamp(16px, 1.15vw, 19px);
  font-style: italic;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: .015em;
  text-transform: none;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .9), 0 0 18px rgba(81, 174, 255, .24);
}
.hero-scroll > span:first-child {
  display: none !important;
}
.hero-scroll > span:last-child {
  display: inline-block;
  width: auto;
  height: auto;
  min-width: 0;
  border: 0;
  border-radius: 0;
  position: static;
  padding: 0;
  margin: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: none;
  overflow: visible;
}
.hero-scroll > span:last-child::before {
  content: "↓";
  display: inline-block;
  margin-right: .55em;
  color: #9edaff;
  font-family: Georgia, serif;
  font-size: 1.25em;
  font-style: normal;
  line-height: .9;
  vertical-align: -.04em;
  animation: xaocScrollNudgeV29 2.6s ease-in-out infinite;
}
.hero-scroll > span:last-child::after {
  content: none !important;
  display: none !important;
}
@keyframes xaocScrollNudgeV29 {
  0%, 100% { transform: translateY(0); opacity: .78; }
  50% { transform: translateY(3px); opacity: 1; }
}
@media (max-width: 800px) {
  .hero-scroll { font-size: 16px; margin-top: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scroll > span:last-child::before { animation: none !important; }
}
html[data-motion-preference="reduced"] .hero-scroll > span:last-child::before {
  animation: none !important;
}


/* V30 — Living Cosmos Phase 1. Clear, visible motion layered over the existing art. */
.hero{isolation:isolate}
.hero-content{position:relative;z-index:3}
.hero-orbit{z-index:2}
.hero-side-note{z-index:3}
.xaoc-hero-live-layer{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;isolation:isolate;}
.xaoc-hero-phase{position:absolute;inset:-3%;pointer-events:none;will-change:opacity;}
.xaoc-hero-phase--dawn{opacity:.18;background:radial-gradient(ellipse at 48% 75%,rgba(255,175,112,.32),transparent 42%),linear-gradient(0deg,rgba(87,117,195,.16),transparent 60%);mix-blend-mode:screen;animation:xaocHeroDawnV30 230s linear infinite;}
.xaoc-hero-phase--day{opacity:.08;background:radial-gradient(ellipse at 53% 59%,rgba(255,221,160,.34),transparent 42%),linear-gradient(115deg,rgba(255,220,164,.08),rgba(70,153,255,.09),transparent 76%);mix-blend-mode:screen;animation:xaocHeroDayV30 230s linear infinite;}
.xaoc-hero-phase--sunset{opacity:.04;background:radial-gradient(ellipse at 56% 66%,rgba(255,135,71,.48),transparent 43%),linear-gradient(0deg,rgba(234,58,77,.19),transparent 68%);mix-blend-mode:screen;animation:xaocHeroSunsetV30 230s linear infinite;}
.xaoc-hero-phase--night{opacity:.18;background:radial-gradient(ellipse at 76% 27%,rgba(26,61,175,.20),transparent 39%),linear-gradient(0deg,rgba(1,5,21,.28),rgba(3,7,29,.10));mix-blend-mode:multiply;animation:xaocHeroNightV30 230s linear infinite;}
.xaoc-hero-sun-glow{position:absolute;left:47%;top:44%;width:clamp(180px,24vw,410px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,244,193,.52) 0%,rgba(255,202,126,.31) 18%,rgba(255,123,94,.12) 39%,transparent 69%);filter:blur(3px);opacity:.30;transform:translate3d(5%,14%,0) scale(.68);mix-blend-mode:screen;will-change:transform,opacity;animation:xaocSunArcV30 230s ease-in-out infinite;}
.xaoc-hero-moon-glow{position:absolute;right:12%;top:13%;width:clamp(110px,15vw,255px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(135,196,255,.16),rgba(70,135,255,.07) 36%,transparent 70%);filter:blur(5px);opacity:.22;mix-blend-mode:screen;animation:xaocMoonBreathV30 31s ease-in-out infinite alternate;}
.xaoc-hero-light-current{position:absolute;inset:-18%;background:linear-gradient(112deg,transparent 30%,rgba(219,242,255,.10) 46%,rgba(255,203,153,.08) 51%,transparent 68%);transform:translateX(-48%);mix-blend-mode:screen;opacity:.65;animation:xaocHeroCurrentV30 17s ease-in-out infinite alternate;}
.xaoc-hero-star{position:absolute;width:var(--star-size,2px);height:var(--star-size,2px);border-radius:50%;background:#eaf8ff;opacity:.35;box-shadow:0 0 5px 1px rgba(108,194,255,.65);animation:xaocHeroStarTwinkleV30 var(--star-duration,5s) ease-in-out var(--star-delay,0s) infinite,xaocHeroStarDriftV30 calc(var(--star-duration,5s)*3.1) ease-in-out var(--star-delay,0s) infinite alternate;}
.xaoc-hero-star.is-bright{background:#fff;box-shadow:0 0 9px 2px rgba(143,217,255,.85);}
.xaoc-hero-star.is-warm{background:#ffd5aa;box-shadow:0 0 9px 1px rgba(255,120,100,.7);}
.xaoc-hero-meteor,.xaoc-world-meteor{position:absolute;display:block;width:clamp(86px,10vw,165px);height:2px;border-radius:99px;background:linear-gradient(90deg,transparent,rgba(222,246,255,.97));box-shadow:0 0 10px 2px rgba(86,183,255,.65);opacity:0;transform:rotate(-28deg);}
.xaoc-hero-meteor--a{top:17%;left:-18%;animation:xaocMeteorPassV30 29s linear 3s infinite;}
.xaoc-hero-meteor--b{top:35%;left:-18%;width:100px;animation:xaocMeteorPassV30 37s linear 17s infinite;}
.hero-logo{position:relative;z-index:1;}
.hero-logo-heading::after{z-index:2;}

.xaoc-world-live-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;isolation:isolate;z-index:1;}
.xaoc-world-phase{position:absolute;inset:-3%;will-change:opacity;pointer-events:none;}
.xaoc-world-phase--dawn{background:radial-gradient(ellipse at 47% 72%,rgba(255,174,107,.22),transparent 45%),linear-gradient(0deg,rgba(93,133,197,.12),transparent 65%);mix-blend-mode:screen;animation:xaocWorldDawnV30 270s linear infinite;opacity:.15;}
.xaoc-world-phase--day{background:radial-gradient(ellipse at 62% 40%,rgba(148,211,255,.18),transparent 43%),linear-gradient(120deg,rgba(255,230,178,.05),rgba(81,156,255,.08),transparent 80%);mix-blend-mode:screen;animation:xaocWorldDayV30 270s linear infinite;opacity:.08;}
.xaoc-world-phase--sunset{background:radial-gradient(ellipse at 50% 75%,rgba(255,134,82,.24),transparent 45%),linear-gradient(0deg,rgba(240,63,86,.10),transparent 70%);mix-blend-mode:screen;animation:xaocWorldSunsetV30 270s linear infinite;opacity:.04;}
.xaoc-world-phase--night{background:radial-gradient(ellipse at 78% 24%,rgba(33,67,170,.16),transparent 43%),linear-gradient(0deg,rgba(1,5,23,.25),rgba(3,7,28,.08));mix-blend-mode:multiply;animation:xaocWorldNightV30 270s linear infinite;opacity:.13;}
.xaoc-world-orb-glow{position:absolute;inset:-10%;opacity:.18;background:radial-gradient(ellipse at 21% 38%,rgba(103,190,255,.25),transparent 27%),radial-gradient(ellipse at 79% 64%,rgba(255,83,108,.18),transparent 32%);mix-blend-mode:screen;animation:xaocWorldNebulaV30 16s ease-in-out infinite alternate;}
.xaoc-world-light-current{position:absolute;inset:-15%;background:linear-gradient(116deg,transparent 25%,rgba(221,240,255,.11) 47%,rgba(255,193,132,.05) 53%,transparent 69%);mix-blend-mode:screen;opacity:.45;transform:translateX(-35%);animation:xaocWorldCurrentV30 21s ease-in-out infinite alternate;}
.xaoc-world-star{position:absolute;width:2px;height:2px;border-radius:50%;background:#f4fbff;box-shadow:0 0 6px rgba(130,202,255,.82);opacity:.15;animation:xaocHeroStarTwinkleV30 var(--star-duration,6s) ease-in-out var(--star-delay,0s) infinite,xaocWorldStarFloatV30 23s ease-in-out var(--star-delay,0s) infinite alternate;}
.xaoc-world-star.is-warm{background:#ffd5ae;box-shadow:0 0 7px rgba(255,147,112,.66);}
.xaoc-world-meteor{top:20%;left:-18%;animation:xaocMeteorPassV30 41s linear 6s infinite;}

/* Genre-specific atmospheric tint lets each selected world feel distinct. */
body[data-music-world="slavic-folk"] .xaoc-world-orb-glow{background:radial-gradient(ellipse at 20% 42%,rgba(255,181,74,.28),transparent 32%),radial-gradient(ellipse at 76% 70%,rgba(69,155,90,.15),transparent 34%);}
body[data-music-world="trance"] .xaoc-world-orb-glow{background:radial-gradient(ellipse at 55% 32%,rgba(120,91,255,.29),transparent 36%),radial-gradient(ellipse at 76% 65%,rgba(0,205,255,.22),transparent 34%);}
body[data-music-world="rock"] .xaoc-world-orb-glow{background:radial-gradient(ellipse at 80% 58%,rgba(255,45,68,.29),transparent 36%),radial-gradient(ellipse at 22% 24%,rgba(31,126,255,.23),transparent 33%);}
body[data-music-world="ambient"] .xaoc-world-orb-glow{background:radial-gradient(ellipse at 32% 30%,rgba(112,204,255,.25),transparent 38%),radial-gradient(ellipse at 72% 72%,rgba(173,222,255,.20),transparent 35%);}
body[data-music-world="romantic"] .xaoc-world-orb-glow{background:radial-gradient(ellipse at 22% 27%,rgba(255,116,190,.26),transparent 34%),radial-gradient(ellipse at 78% 64%,rgba(255,203,159,.25),transparent 37%);}
body[data-music-world="all"] .xaoc-world-orb-glow{background:radial-gradient(ellipse at 28% 27%,rgba(50,138,255,.23),transparent 33%),radial-gradient(ellipse at 74% 47%,rgba(255,68,118,.19),transparent 36%);}

@keyframes xaocHeroDawnV30{0%,100%{opacity:.20}7%{opacity:.42}18%{opacity:.10}42%{opacity:.02}63%{opacity:.04}82%{opacity:.16}92%{opacity:.30}}
@keyframes xaocHeroDayV30{0%,100%{opacity:.05}8%{opacity:.12}20%{opacity:.32}31%{opacity:.25}40%{opacity:.07}55%{opacity:.02}83%{opacity:.01}94%{opacity:.04}}
@keyframes xaocHeroSunsetV30{0%,100%{opacity:.03}34%{opacity:.04}43%{opacity:.19}53%{opacity:.46}62%{opacity:.27}73%{opacity:.04}}
@keyframes xaocHeroNightV30{0%,100%{opacity:.15}16%{opacity:.04}33%{opacity:.02}51%{opacity:.08}67%{opacity:.28}81%{opacity:.42}91%{opacity:.27}}
@keyframes xaocSunArcV30{0%{opacity:.14;transform:translate3d(7%,22%,0) scale(.55)}12%{opacity:.62;transform:translate3d(2%,7%,0) scale(.85)}25%{opacity:.88;transform:translate3d(-2%,-3%,0) scale(1.03)}38%{opacity:.72;transform:translate3d(-5%,2%,0) scale(.96)}49%{opacity:.52;transform:translate3d(-9%,16%,0) scale(.78)}59%{opacity:.12;transform:translate3d(-12%,25%,0) scale(.48)}69%,88%{opacity:.02;transform:translate3d(-12%,25%,0) scale(.42)}100%{opacity:.14;transform:translate3d(7%,22%,0) scale(.55)}}
@keyframes xaocMoonBreathV30{0%{opacity:.10;transform:translate3d(0,5px,0) scale(.96)}100%{opacity:.38;transform:translate3d(-8px,-8px,0) scale(1.05)}}
@keyframes xaocHeroCurrentV30{0%{transform:translate3d(-35%,0,0);opacity:.18}100%{transform:translate3d(35%,0,0);opacity:.72}}
@keyframes xaocHeroStarTwinkleV30{0%,100%{opacity:.12}45%{opacity:.86}68%{opacity:.3}}
@keyframes xaocHeroStarDriftV30{0%{transform:translate3d(0,0,0) scale(.72)}100%{transform:translate3d(var(--star-drift,16px),-24px,0) scale(1.22)}}
@keyframes xaocMeteorPassV30{0%,62%{opacity:0;transform:translate3d(0,0,0) rotate(-28deg)}64%{opacity:.98}72%{opacity:0;transform:translate3d(125vw,48vh,0) rotate(-28deg)}100%{opacity:0;transform:translate3d(125vw,48vh,0) rotate(-28deg)}}
@keyframes xaocWorldDawnV30{0%,100%{opacity:.15}7%{opacity:.27}18%{opacity:.08}42%{opacity:.02}82%{opacity:.11}92%{opacity:.22}}
@keyframes xaocWorldDayV30{0%,100%{opacity:.05}10%{opacity:.10}22%{opacity:.23}34%{opacity:.18}45%{opacity:.05}85%{opacity:.01}}
@keyframes xaocWorldSunsetV30{0%,100%{opacity:.03}38%{opacity:.04}49%{opacity:.16}57%{opacity:.30}67%{opacity:.14}78%{opacity:.03}}
@keyframes xaocWorldNightV30{0%,100%{opacity:.13}16%{opacity:.04}33%{opacity:.02}57%{opacity:.07}72%{opacity:.25}84%{opacity:.33}93%{opacity:.19}}
@keyframes xaocWorldNebulaV30{0%{opacity:.12;transform:translate3d(-1.4%,.7%,0) scale(1)}100%{opacity:.34;transform:translate3d(1.8%,-.8%,0) scale(1.04)}}
@keyframes xaocWorldCurrentV30{0%{transform:translateX(-38%);opacity:.18}100%{transform:translateX(38%);opacity:.62}}
@keyframes xaocWorldStarFloatV30{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(9px,-15px,0)}}

@media(max-width:800px){
 .xaoc-hero-sun-glow{left:42%;top:48%;width:clamp(140px,36vw,250px);}
 .xaoc-hero-meteor--b{display:none;}
 .xaoc-hero-phase--day{opacity:.04;}
 .xaoc-world-star{opacity:.11;}
}
html[data-motion-preference="reduced"] .xaoc-hero-live-layer *,
html[data-motion-preference="reduced"] .xaoc-world-live-layer *{animation:none!important;transition:none!important;}
body[data-living-motion="off"] .xaoc-hero-live-layer *,body[data-living-motion="off"] .xaoc-world-live-layer *{animation:none!important;transition:none!important;}


/* V31 — visible, coherent day-to-night cycle. Replaces subtle, hard-to-notice V30 overlays. */
/* Hide the random drifting dust layer; V31 uses pinpoint stars and true streak-shaped meteors. */
.cosmic-particle-field { display:none !important; }
.xaoc-hero-live-layer,.xaoc-world-live-layer{isolation:isolate;}
.xaoc-hero-phase,.xaoc-world-phase{display:none !important;}

.xaoc-hero-time-grade{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background-color:rgba(17,31,78,.22);
  animation:xaocHeroTimeTintV31 118s linear infinite;
  will-change:background-color;
}
.xaoc-world-time-grade{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-color:var(--xaoc-time-night,rgba(3,8,28,.42));
  animation:xaocWorldTimeTintV31 132s linear infinite;
  will-change:background-color;
}

/* A recognizable sun disk follows an arc across the lower horizon, then disappears at dusk. */
.xaoc-hero-sun-disc,.xaoc-world-sun-disc{
  position:absolute;display:block;z-index:3;pointer-events:none;
  width:clamp(43px,5.2vw,82px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 34% 29%,#fffef0 0 4%,#fff4ce 10%,#ffd783 31%,#ffab69 54%,#f76862 68%,rgba(246,83,95,.12) 77%,transparent 80%);
  box-shadow:0 0 18px 4px rgba(255,194,116,.42),0 0 54px 15px rgba(255,115,85,.26),0 0 105px 30px rgba(239,82,93,.12);
  mix-blend-mode:screen;opacity:0;will-change:left,top,opacity,transform;
}
.xaoc-hero-sun-disc{animation:xaocHeroSunJourneyV31 118s linear infinite;}
.xaoc-world-sun-disc{animation:xaocWorldSunJourneyV31 132s linear infinite;}
.xaoc-hero-sun-glow{
  z-index:2;left:0;top:0;width:clamp(170px,22vw,340px);opacity:0;
  transform:translate(-50%,-50%);animation:xaocHeroSunGlowJourneyV31 118s linear infinite;
  will-change:left,top,opacity,transform;
}
.xaoc-world-sun-glow{
  position:absolute;left:0;top:0;z-index:2;width:clamp(150px,20vw,320px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(255,236,184,.32) 0%,rgba(255,174,112,.21) 24%,rgba(245,105,92,.09) 48%,transparent 72%);
  filter:blur(8px);mix-blend-mode:screen;opacity:0;transform:translate(-50%,-50%);
  animation:xaocWorldSunGlowJourneyV31 132s linear infinite;will-change:left,top,opacity,transform;
}
.xaoc-hero-moon-disc,.xaoc-world-moon-disc{
  position:absolute;z-index:2;pointer-events:none;border-radius:50%;width:clamp(34px,3.6vw,60px);aspect-ratio:1;
  background:radial-gradient(circle at 32% 29%,rgba(255,255,245,.98) 0 4%,rgba(205,229,255,.95) 22%,rgba(120,171,226,.82) 56%,rgba(55,100,180,.22) 72%,transparent 78%);
  box-shadow:0 0 22px 8px rgba(111,170,255,.18),0 0 60px 18px rgba(64,115,245,.13);
  mix-blend-mode:screen;opacity:0;animation:xaocMoonRiseV31 118s linear infinite;
}
.xaoc-hero-moon-disc{left:57%;top:18%;}
.xaoc-world-moon-disc{right:19%;top:16%;animation-duration:132s;}

/* Pinpoint stars remain in place and twinkle; they no longer float like seed fluff. */
.xaoc-hero-star,.xaoc-world-star{
  z-index:4;transform:none!important;will-change:opacity;
  animation:xaocPinpointTwinkleV31 var(--star-duration,5s) ease-in-out var(--star-delay,0s) infinite !important;
}
.xaoc-hero-star{width:var(--star-size,1.8px);height:var(--star-size,1.8px);opacity:.3;box-shadow:0 0 5px 1px rgba(108,194,255,.48);}
.xaoc-hero-star.is-bright{box-shadow:0 0 8px 2px rgba(143,217,255,.8);}
.xaoc-world-star{opacity:.25;}

/* Comets have a narrow directional tail and a bright head, with rare but noticeable passes. */
.xaoc-hero-meteor,.xaoc-world-meteor{
  z-index:5;height:2px;width:clamp(105px,13vw,200px);border-radius:99px;
  background:linear-gradient(90deg,transparent 0%,rgba(91,177,255,.10) 24%,rgba(153,218,255,.62) 66%,rgba(239,250,255,.96) 94%,#fff 100%);
  box-shadow:0 0 7px 1px rgba(97,183,255,.45);opacity:0;transform:translate3d(-12vw,-4vh,0) rotate(-27deg);
  animation:xaocMeteorStreakV31 26s linear var(--meteor-delay,3s) infinite;
}
.xaoc-hero-meteor::after,.xaoc-world-meteor::after{
  content:"";position:absolute;right:-1px;top:50%;width:4px;height:4px;border-radius:50%;
  transform:translateY(-50%);background:#fff;box-shadow:0 0 8px 3px rgba(180,230,255,.88),0 0 17px 6px rgba(85,174,255,.4);
}
.xaoc-hero-meteor--a{left:4%;top:15%;animation-duration:25s;}
.xaoc-hero-meteor--b{left:11%;top:36%;width:clamp(80px,9vw,145px);animation-duration:33s;}
.xaoc-world-meteor--a{left:4%;top:21%;animation-duration:29s;}
.xaoc-world-meteor--b{left:18%;top:37%;width:clamp(80px,10vw,155px);animation-duration:37s;}

/* Genre-specific colour recipes: the same gentle clock, different moods. */
body[data-music-world="all"]{--xaoc-time-dawn:rgba(116,135,224,.18);--xaoc-time-day:rgba(255,218,163,.12);--xaoc-time-sunset:rgba(255,95,91,.26);--xaoc-time-dusk:rgba(68,35,115,.32);--xaoc-time-night:rgba(2,7,28,.48);}
body[data-music-world="slavic-folk"]{--xaoc-time-dawn:rgba(215,154,78,.16);--xaoc-time-day:rgba(255,225,149,.12);--xaoc-time-sunset:rgba(185,80,37,.25);--xaoc-time-dusk:rgba(49,40,42,.32);--xaoc-time-night:rgba(3,11,17,.48);}
body[data-music-world="trance"]{--xaoc-time-dawn:rgba(125,111,230,.18);--xaoc-time-day:rgba(90,184,255,.11);--xaoc-time-sunset:rgba(213,67,177,.23);--xaoc-time-dusk:rgba(53,30,125,.36);--xaoc-time-night:rgba(2,4,28,.51);}
body[data-music-world="rock"]{--xaoc-time-dawn:rgba(255,135,85,.15);--xaoc-time-day:rgba(255,197,127,.09);--xaoc-time-sunset:rgba(247,54,42,.28);--xaoc-time-dusk:rgba(70,19,48,.40);--xaoc-time-night:rgba(2,5,18,.54);}
body[data-music-world="ambient"]{--xaoc-time-dawn:rgba(121,177,225,.14);--xaoc-time-day:rgba(185,225,255,.10);--xaoc-time-sunset:rgba(123,104,183,.15);--xaoc-time-dusk:rgba(22,39,90,.34);--xaoc-time-night:rgba(1,8,28,.50);}
body[data-music-world="romantic"]{--xaoc-time-dawn:rgba(255,164,197,.15);--xaoc-time-day:rgba(255,221,213,.12);--xaoc-time-sunset:rgba(255,106,160,.23);--xaoc-time-dusk:rgba(75,40,103,.34);--xaoc-time-night:rgba(10,10,38,.46);}

@keyframes xaocHeroTimeTintV31{
  0%,100%{background-color:rgba(18,31,79,.24)}
  8%{background-color:rgba(107,104,185,.15)}
  17%{background-color:rgba(248,191,130,.13)}
  28%{background-color:rgba(255,229,181,.08)}
  38%{background-color:rgba(255,225,175,.06)}
  49%{background-color:rgba(255,130,92,.24)}
  60%{background-color:rgba(202,63,91,.28)}
  72%{background-color:rgba(54,28,94,.36)}
  83%{background-color:rgba(2,6,27,.50)}
  92%{background-color:rgba(2,8,28,.46)}
  97%{background-color:rgba(31,44,108,.30)}
}
@keyframes xaocWorldTimeTintV31{
  0%,100%{background-color:var(--xaoc-time-night,rgba(2,7,28,.48))}
  7%{background-color:var(--xaoc-time-dusk,rgba(68,35,115,.32))}
  15%{background-color:var(--xaoc-time-dawn,rgba(116,135,224,.18))}
  25%{background-color:var(--xaoc-time-day,rgba(255,218,163,.12))}
  39%{background-color:var(--xaoc-time-day,rgba(255,218,163,.12))}
  50%{background-color:var(--xaoc-time-sunset,rgba(255,95,91,.26))}
  61%{background-color:var(--xaoc-time-dusk,rgba(68,35,115,.32))}
  73%{background-color:var(--xaoc-time-night,rgba(2,7,28,.48))}
  88%{background-color:var(--xaoc-time-night,rgba(2,7,28,.48))}
}
@keyframes xaocHeroSunJourneyV31{
  0%,100%{left:42%;top:64%;opacity:0;transform:translate(-50%,-50%) scale(.62)}
  5%{left:43%;top:59%;opacity:.6;transform:translate(-50%,-50%) scale(.78)}
  15%{left:46%;top:53%;opacity:.96;transform:translate(-50%,-50%) scale(1)}
  26%{left:50%;top:51%;opacity:.94;transform:translate(-50%,-50%) scale(1.03)}
  36%{left:54%;top:55%;opacity:.82;transform:translate(-50%,-50%) scale(.98)}
  45%{left:58%;top:63%;opacity:.50;transform:translate(-50%,-50%) scale(.82)}
  53%{left:62%;top:72%;opacity:0;transform:translate(-50%,-50%) scale(.56)}
}
@keyframes xaocHeroSunGlowJourneyV31{
  0%,100%{left:42%;top:64%;opacity:0;transform:translate(-50%,-50%) scale(.5)}
  5%{left:43%;top:59%;opacity:.24;transform:translate(-50%,-50%) scale(.68)}
  15%{left:46%;top:53%;opacity:.76;transform:translate(-50%,-50%) scale(1)}
  26%{left:50%;top:51%;opacity:.78;transform:translate(-50%,-50%) scale(1.06)}
  36%{left:54%;top:55%;opacity:.58;transform:translate(-50%,-50%) scale(.95)}
  45%{left:58%;top:63%;opacity:.23;transform:translate(-50%,-50%) scale(.7)}
  53%{left:62%;top:72%;opacity:0;transform:translate(-50%,-50%) scale(.4)}
}
@keyframes xaocWorldSunJourneyV31{
  0%,100%{left:var(--xaoc-sun-start,24%);top:var(--xaoc-sun-low,66%);opacity:0;transform:translate(-50%,-50%) scale(.6)}
  5%{left:var(--xaoc-sun-rise,27%);top:var(--xaoc-sun-rise-top,59%);opacity:.64;transform:translate(-50%,-50%) scale(.8)}
  16%{left:var(--xaoc-sun-mid,35%);top:var(--xaoc-sun-mid-top,48%);opacity:.94;transform:translate(-50%,-50%) scale(1)}
  28%{left:var(--xaoc-sun-high,44%);top:var(--xaoc-sun-high-top,46%);opacity:.90;transform:translate(-50%,-50%) scale(1.02)}
  39%{left:var(--xaoc-sun-afternoon,51%);top:var(--xaoc-sun-afternoon-top,53%);opacity:.72;transform:translate(-50%,-50%) scale(.94)}
  47%{left:var(--xaoc-sun-set,57%);top:var(--xaoc-sun-set-top,64%);opacity:.38;transform:translate(-50%,-50%) scale(.76)}
  53%{left:var(--xaoc-sun-end,63%);top:var(--xaoc-sun-end-top,73%);opacity:0;transform:translate(-50%,-50%) scale(.55)}
}
@keyframes xaocWorldSunGlowJourneyV31{
  0%,100%{left:var(--xaoc-sun-start,24%);top:var(--xaoc-sun-low,66%);opacity:0;transform:translate(-50%,-50%) scale(.5)}
  5%{left:var(--xaoc-sun-rise,27%);top:var(--xaoc-sun-rise-top,59%);opacity:.25;transform:translate(-50%,-50%) scale(.7)}
  16%{left:var(--xaoc-sun-mid,35%);top:var(--xaoc-sun-mid-top,48%);opacity:.72;transform:translate(-50%,-50%) scale(1)}
  28%{left:var(--xaoc-sun-high,44%);top:var(--xaoc-sun-high-top,46%);opacity:.70;transform:translate(-50%,-50%) scale(1.05)}
  39%{left:var(--xaoc-sun-afternoon,51%);top:var(--xaoc-sun-afternoon-top,53%);opacity:.48;transform:translate(-50%,-50%) scale(.93)}
  47%{left:var(--xaoc-sun-set,57%);top:var(--xaoc-sun-set-top,64%);opacity:.20;transform:translate(-50%,-50%) scale(.7)}
  53%{left:var(--xaoc-sun-end,63%);top:var(--xaoc-sun-end-top,73%);opacity:0;transform:translate(-50%,-50%) scale(.4)}
}
@keyframes xaocMoonRiseV31{
  0%,100%{opacity:.22;transform:translateY(4px) scale(.96)}
  58%{opacity:.10;transform:translateY(2px) scale(.98)}
  68%{opacity:.35;transform:translateY(-2px) scale(1)}
  80%{opacity:.72;transform:translateY(-4px) scale(1.03)}
  92%{opacity:.78;transform:translateY(-3px) scale(1.02)}
}
@keyframes xaocPinpointTwinkleV31{0%,100%{opacity:.18}42%{opacity:.68}68%{opacity:.3}78%{opacity:.82}}
@keyframes xaocMeteorStreakV31{
  0%,65%{opacity:0;transform:translate3d(-12vw,-4vh,0) rotate(-27deg)}
  67%{opacity:.95}
  74%{opacity:.82;transform:translate3d(82vw,38vh,0) rotate(-27deg)}
  76%,100%{opacity:0;transform:translate3d(105vw,48vh,0) rotate(-27deg)}
}

/* Hero gets a clear solar arc. Genre worlds have their own horizon point, so Rock's sun stays left of the guitarist. */
body[data-music-world="all"]{--xaoc-sun-start:28%;--xaoc-sun-rise:30%;--xaoc-sun-mid:38%;--xaoc-sun-high:46%;--xaoc-sun-afternoon:52%;--xaoc-sun-set:58%;--xaoc-sun-end:64%;}
body[data-music-world="slavic-folk"]{--xaoc-sun-start:23%;--xaoc-sun-rise:26%;--xaoc-sun-mid:34%;--xaoc-sun-high:42%;--xaoc-sun-afternoon:48%;--xaoc-sun-set:54%;--xaoc-sun-end:60%;--xaoc-sun-mid-top:46%;--xaoc-sun-high-top:43%;}
body[data-music-world="trance"]{--xaoc-sun-start:30%;--xaoc-sun-rise:34%;--xaoc-sun-mid:43%;--xaoc-sun-high:53%;--xaoc-sun-afternoon:60%;--xaoc-sun-set:66%;--xaoc-sun-end:71%;--xaoc-sun-mid-top:45%;--xaoc-sun-high-top:43%;}
body[data-music-world="rock"]{--xaoc-sun-start:12%;--xaoc-sun-rise:15%;--xaoc-sun-mid:22%;--xaoc-sun-high:28%;--xaoc-sun-afternoon:33%;--xaoc-sun-set:39%;--xaoc-sun-end:44%;--xaoc-sun-rise-top:62%;--xaoc-sun-mid-top:54%;--xaoc-sun-high-top:52%;--xaoc-sun-afternoon-top:58%;--xaoc-sun-set-top:68%;--xaoc-sun-end-top:75%;}
body[data-music-world="ambient"]{--xaoc-sun-start:25%;--xaoc-sun-rise:29%;--xaoc-sun-mid:38%;--xaoc-sun-high:46%;--xaoc-sun-afternoon:53%;--xaoc-sun-set:59%;--xaoc-sun-end:65%;}
body[data-music-world="romantic"]{--xaoc-sun-start:28%;--xaoc-sun-rise:31%;--xaoc-sun-mid:39%;--xaoc-sun-high:47%;--xaoc-sun-afternoon:54%;--xaoc-sun-set:60%;--xaoc-sun-end:66%;--xaoc-sun-mid-top:49%;--xaoc-sun-high-top:47%;}
body[data-music-world="ambient"] .xaoc-world-sun-disc,body[data-music-world="ambient"] .xaoc-world-sun-glow{display:none;}
body[data-music-world="ambient"] .xaoc-world-moon-disc{animation-name:xaocAmbientMoonV31;}
@keyframes xaocAmbientMoonV31{0%,43%{opacity:.08;transform:translateY(5px)}58%{opacity:.18;transform:translateY(1px)}72%,92%{opacity:.72;transform:translateY(-3px)}100%{opacity:.08;transform:translateY(5px)}}

@media(max-width:800px){
  .xaoc-hero-time-grade{animation-duration:118s;}
  .xaoc-hero-sun-disc{width:clamp(34px,8vw,56px);}
  .xaoc-hero-sun-glow{width:clamp(120px,35vw,210px);}
  .xaoc-hero-meteor--b{display:none;}
  .xaoc-world-sun-disc{width:42px;}
  .xaoc-world-sun-glow{width:clamp(110px,30vw,190px);}
  .xaoc-world-meteor--b{display:none;}
  .xaoc-hero-time-grade{animation-duration:118s;}
}

html[data-motion-preference="reduced"] .xaoc-hero-time-grade,
html[data-motion-preference="reduced"] .xaoc-world-time-grade,
html[data-motion-preference="reduced"] .xaoc-hero-sun-disc,
html[data-motion-preference="reduced"] .xaoc-world-sun-disc,
html[data-motion-preference="reduced"] .xaoc-hero-moon-disc,
html[data-motion-preference="reduced"] .xaoc-world-moon-disc,
html[data-motion-preference="reduced"] .xaoc-world-sun-glow{animation:none!important;}
body[data-living-motion="off"] .xaoc-hero-time-grade,
body[data-living-motion="off"] .xaoc-world-time-grade,
body[data-living-motion="off"] .xaoc-hero-sun-disc,
body[data-living-motion="off"] .xaoc-world-sun-disc,
body[data-living-motion="off"] .xaoc-hero-moon-disc,
body[data-living-motion="off"] .xaoc-world-moon-disc,
body[data-living-motion="off"] .xaoc-world-sun-glow{animation:none!important;}


/* V32 — quality correction: retain original artwork, remove artificial sun/moon discs,
   reduce scene-wide tinting, and animate luminance rather than dark opaque overlays. */
.xaoc-hero-sun-disc,
.xaoc-world-sun-disc,
.xaoc-hero-sun-glow,
.xaoc-world-sun-glow,
.xaoc-hero-moon-disc,
.xaoc-world-moon-disc { display:none !important; }

/* Restore the visible V30 atmospheric layers, but with restrained alpha values. */
.xaoc-hero-phase,
.xaoc-world-phase { display:block !important; pointer-events:none; }
.xaoc-hero-phase--dawn {
  background:radial-gradient(ellipse at 51% 70%,rgba(255,177,112,.23),transparent 48%),linear-gradient(0deg,rgba(104,133,211,.05),transparent 65%);
  mix-blend-mode:screen; animation:xaocHeroDawnV32 118s ease-in-out infinite; opacity:.12;
}
.xaoc-hero-phase--day {
  background:radial-gradient(ellipse at 54% 63%,rgba(255,229,180,.22),transparent 50%),linear-gradient(112deg,rgba(255,221,166,.03),rgba(85,172,255,.05),transparent 78%);
  mix-blend-mode:screen; animation:xaocHeroDayV32 118s ease-in-out infinite; opacity:.05;
}
.xaoc-hero-phase--sunset {
  background:radial-gradient(ellipse at 52% 73%,rgba(255,133,88,.25),transparent 52%),linear-gradient(0deg,rgba(220,55,70,.07),transparent 72%);
  mix-blend-mode:screen; animation:xaocHeroSunsetV32 118s ease-in-out infinite; opacity:.03;
}
.xaoc-hero-phase--night {
  background:radial-gradient(ellipse at 76% 23%,rgba(31,67,163,.08),transparent 43%),linear-gradient(0deg,rgba(2,8,24,.12),rgba(2,8,24,.025));
  mix-blend-mode:multiply; animation:xaocHeroNightV32 118s ease-in-out infinite; opacity:.05;
}

.xaoc-world-phase--dawn {
  background:radial-gradient(ellipse at 36% 73%,rgba(255,190,125,.16),transparent 48%),linear-gradient(0deg,rgba(91,139,209,.035),transparent 68%);
  mix-blend-mode:screen; animation:xaocWorldDawnV32 132s ease-in-out infinite; opacity:.08;
}
.xaoc-world-phase--day {
  background:radial-gradient(ellipse at 56% 46%,rgba(155,218,255,.14),transparent 48%),linear-gradient(115deg,rgba(255,232,188,.03),rgba(83,165,255,.035),transparent 82%);
  mix-blend-mode:screen; animation:xaocWorldDayV32 132s ease-in-out infinite; opacity:.035;
}
.xaoc-world-phase--sunset {
  background:radial-gradient(ellipse at 52% 75%,rgba(255,128,82,.18),transparent 50%),linear-gradient(0deg,rgba(236,67,89,.045),transparent 72%);
  mix-blend-mode:screen; animation:xaocWorldSunsetV32 132s ease-in-out infinite; opacity:.025;
}
.xaoc-world-phase--night {
  background:radial-gradient(ellipse at 75% 25%,rgba(40,83,170,.07),transparent 46%),linear-gradient(0deg,rgba(2,7,23,.12),rgba(3,7,26,.025));
  mix-blend-mode:multiply; animation:xaocWorldNightV32 132s ease-in-out infinite; opacity:.04;
}

/* Light shifts are applied to the images only. Text, cards, and buttons do not dim. */
.hero-backdrop {
  animation:xaocHeroDriftV28 27s ease-in-out infinite alternate,
            xaocHeroLuminanceV32 118s ease-in-out infinite;
  will-change:transform,filter;
}
.world-background {
  animation:xaocWorldDriftV28 31s ease-in-out infinite alternate,
            xaocWorldLuminanceV32 132s ease-in-out infinite;
  will-change:transform,filter;
}

/* Low-opacity time-grade tints only; no full-screen navy veil. */
.xaoc-hero-time-grade {
  z-index:1; background-color:rgba(35,50,91,.018);
  animation:xaocHeroTintV32 118s linear infinite;
}
.xaoc-world-time-grade {
  z-index:0; background-color:var(--xaoc-night-tint-v32,rgba(4,9,27,.045));
  animation:xaocWorldTintV32 132s linear infinite;
}
body[data-music-world="all"] { --xaoc-dawn-tint-v32:rgba(125,153,226,.035); --xaoc-day-tint-v32:rgba(255,226,174,.018); --xaoc-sunset-tint-v32:rgba(255,111,91,.06); --xaoc-dusk-tint-v32:rgba(102,64,152,.045); --xaoc-night-tint-v32:rgba(4,9,27,.045); }
body[data-music-world="slavic-folk"] { --xaoc-dawn-tint-v32:rgba(226,164,84,.035); --xaoc-day-tint-v32:rgba(255,225,153,.02); --xaoc-sunset-tint-v32:rgba(195,91,47,.05); --xaoc-dusk-tint-v32:rgba(75,53,52,.04); --xaoc-night-tint-v32:rgba(6,14,17,.045); }
body[data-music-world="trance"] { --xaoc-dawn-tint-v32:rgba(144,119,236,.04); --xaoc-day-tint-v32:rgba(94,188,255,.025); --xaoc-sunset-tint-v32:rgba(219,70,181,.055); --xaoc-dusk-tint-v32:rgba(65,42,145,.05); --xaoc-night-tint-v32:rgba(4,5,28,.05); }
body[data-music-world="rock"] { --xaoc-dawn-tint-v32:rgba(255,145,93,.035); --xaoc-day-tint-v32:rgba(255,201,133,.02); --xaoc-sunset-tint-v32:rgba(247,66,47,.06); --xaoc-dusk-tint-v32:rgba(78,26,49,.045); --xaoc-night-tint-v32:rgba(4,6,20,.05); }
body[data-music-world="ambient"] { --xaoc-dawn-tint-v32:rgba(127,182,227,.035); --xaoc-day-tint-v32:rgba(186,228,255,.02); --xaoc-sunset-tint-v32:rgba(123,111,185,.04); --xaoc-dusk-tint-v32:rgba(35,52,106,.045); --xaoc-night-tint-v32:rgba(3,10,28,.045); }
body[data-music-world="romantic"] { --xaoc-dawn-tint-v32:rgba(255,172,204,.035); --xaoc-day-tint-v32:rgba(255,225,216,.02); --xaoc-sunset-tint-v32:rgba(255,113,164,.05); --xaoc-dusk-tint-v32:rgba(93,52,122,.045); --xaoc-night-tint-v32:rgba(12,11,39,.045); }

@keyframes xaocHeroLuminanceV32 {
  0%,100% {filter:brightness(1.015) saturate(1.04) contrast(1.01)}
  14% {filter:brightness(1.04) saturate(1.05) contrast(1.01)}
  28%,38% {filter:brightness(1.105) saturate(1.055) contrast(1.015)}
  49% {filter:brightness(1.075) saturate(1.10) contrast(1.02)}
  59% {filter:brightness(1.035) saturate(1.10) contrast(1.02)}
  72% {filter:brightness(1.005) saturate(1.075) contrast(1.01)}
  85% {filter:brightness(.99) saturate(1.05) contrast(1.01)}
  94% {filter:brightness(1.0) saturate(1.05) contrast(1.01)}
}
@keyframes xaocWorldLuminanceV32 {
  0%,100% {filter:brightness(1.0) saturate(1.02)}
  14% {filter:brightness(1.035) saturate(1.035)}
  27%,38% {filter:brightness(1.09) saturate(1.04)}
  49% {filter:brightness(1.065) saturate(1.075)}
  59% {filter:brightness(1.035) saturate(1.07)}
  72% {filter:brightness(1.005) saturate(1.04)}
  85% {filter:brightness(.99) saturate(1.025)}
  94% {filter:brightness(.995) saturate(1.025)}
}
@keyframes xaocHeroTintV32 {
  0%,100% {background-color:rgba(27,39,82,.025)}
  15% {background-color:rgba(125,126,193,.025)}
  28%,38% {background-color:rgba(255,225,176,.014)}
  50%,59% {background-color:rgba(255,117,91,.055)}
  73% {background-color:rgba(70,42,128,.04)}
  85%,94% {background-color:rgba(3,8,26,.065)}
}
@keyframes xaocWorldTintV32 {
  0%,100% {background-color:var(--xaoc-night-tint-v32,rgba(4,9,27,.045))}
  8% {background-color:var(--xaoc-dusk-tint-v32,rgba(102,64,152,.045))}
  17% {background-color:var(--xaoc-dawn-tint-v32,rgba(125,153,226,.035))}
  29%,39% {background-color:var(--xaoc-day-tint-v32,rgba(255,226,174,.018))}
  51%,60% {background-color:var(--xaoc-sunset-tint-v32,rgba(255,111,91,.06))}
  73% {background-color:var(--xaoc-dusk-tint-v32,rgba(102,64,152,.045))}
  85%,94% {background-color:var(--xaoc-night-tint-v32,rgba(4,9,27,.045))}
}
@keyframes xaocHeroDawnV32 {0%,100%{opacity:.04}10%{opacity:.16}22%{opacity:.12}38%{opacity:.025}57%{opacity:.02}74%{opacity:.045}88%{opacity:.08}}
@keyframes xaocHeroDayV32 {0%,100%{opacity:.025}18%{opacity:.08}30%{opacity:.16}41%{opacity:.11}54%,74%,88%{opacity:.015}}
@keyframes xaocHeroSunsetV32 {0%,100%{opacity:.015}39%{opacity:.02}49%{opacity:.12}57%{opacity:.20}66%{opacity:.08}76%{opacity:.015}}
@keyframes xaocHeroNightV32 {0%,100%{opacity:.04}17%{opacity:.025}38%{opacity:.015}58%{opacity:.04}76%{opacity:.10}86%{opacity:.12}94%{opacity:.08}}
@keyframes xaocWorldDawnV32 {0%,100%{opacity:.03}12%{opacity:.10}23%{opacity:.08}39%{opacity:.02}57%{opacity:.012}77%{opacity:.025}90%{opacity:.05}}
@keyframes xaocWorldDayV32 {0%,100%{opacity:.02}19%{opacity:.06}31%{opacity:.12}42%{opacity:.08}56%,76%,90%{opacity:.012}}
@keyframes xaocWorldSunsetV32 {0%,100%{opacity:.012}40%{opacity:.02}50%{opacity:.10}58%{opacity:.15}67%{opacity:.06}78%{opacity:.012}}
@keyframes xaocWorldNightV32 {0%,100%{opacity:.03}18%{opacity:.02}39%{opacity:.012}59%{opacity:.03}77%{opacity:.075}88%{opacity:.09}95%{opacity:.055}}

/* Turning off motion pauses V32's luminance cycle as well as the decorative layers. */
html[data-motion-preference="reduced"] .hero-backdrop,
html[data-motion-preference="reduced"] .world-background,
body[data-living-motion="off"] .hero-backdrop,
body[data-living-motion="off"] .world-background { animation:none !important; }
@media(max-width:800px){
  .xaoc-hero-meteor--b,.xaoc-world-meteor--b{display:none;}
  .hero-backdrop{animation:xaocHeroLuminanceV32 118s ease-in-out infinite;}
  .world-background{animation:xaocWorldLuminanceV32 132s ease-in-out infinite;}
}


/* V33 — subtle clarity lift and slightly more fluid world motion. Keep the original art and UI legible. */
.world-background::before {
  opacity: .81;
  animation: xaocNebulaFlowV33 17s ease-in-out infinite alternate;
}
.world-background::after {
  opacity: .36;
  animation: xaocLightCurrentV33 13s ease-in-out infinite alternate;
}
.world-background {
  animation: xaocWorldDriftV33 27s ease-in-out infinite alternate,
             xaocWorldLuminanceV33 132s ease-in-out infinite;
  will-change: transform, filter;
}
.hero-backdrop {
  animation: xaocHeroDriftV28 27s ease-in-out infinite alternate,
             xaocHeroLuminanceV33 118s ease-in-out infinite;
  will-change: transform, filter;
}
@keyframes xaocWorldDriftV33 {
  0% { transform: scale(1.03) translate3d(0,0,0); }
  100% { transform: scale(1.085) translate3d(-.92%,.56%,0); }
}
@keyframes xaocHeroLuminanceV33 {
  0%,100% { filter: brightness(1.025) saturate(1.05) contrast(1.025); }
  14% { filter: brightness(1.045) saturate(1.06) contrast(1.03); }
  28%,38% { filter: brightness(1.105) saturate(1.075) contrast(1.035); }
  49% { filter: brightness(1.08) saturate(1.09) contrast(1.04); }
  59% { filter: brightness(1.045) saturate(1.085) contrast(1.035); }
  72% { filter: brightness(1.02) saturate(1.065) contrast(1.03); }
  85% { filter: brightness(1.015) saturate(1.05) contrast(1.025); }
  94% { filter: brightness(1.02) saturate(1.055) contrast(1.025); }
}
@keyframes xaocWorldLuminanceV33 {
  0%,100% { filter: brightness(1.035) saturate(1.055) contrast(1.04); }
  14% { filter: brightness(1.045) saturate(1.06) contrast(1.045); }
  27%,38% { filter: brightness(1.085) saturate(1.07) contrast(1.05); }
  49% { filter: brightness(1.075) saturate(1.085) contrast(1.055); }
  59% { filter: brightness(1.05) saturate(1.08) contrast(1.05); }
  72% { filter: brightness(1.03) saturate(1.065) contrast(1.045); }
  85% { filter: brightness(1.025) saturate(1.05) contrast(1.04); }
  94% { filter: brightness(1.03) saturate(1.05) contrast(1.04); }
}
@keyframes xaocNebulaFlowV33 {
  0% { transform: translate3d(-1.9%,.65%,0) scale(1); opacity: .48; }
  100% { transform: translate3d(1.9%,-.85%,0) scale(1.06); opacity: .86; }
}
@keyframes xaocLightCurrentV33 {
  0% { transform: translate3d(-34%,0,0); opacity: .12; }
  100% { transform: translate3d(34%,0,0); opacity: .40; }
}
/* Keep the movement slightly enhanced, but respect the visitor's motion-off control. */
@media(max-width:800px) {
  .world-background { animation: xaocWorldDriftV33 31s ease-in-out infinite alternate, xaocWorldLuminanceV33 132s ease-in-out infinite; }
  .hero-backdrop { animation: xaocHeroDriftV28 31s ease-in-out infinite alternate, xaocHeroLuminanceV33 118s ease-in-out infinite; }
}
html[data-motion-preference="reduced"] .world-background,
html[data-motion-preference="reduced"] .hero-backdrop,
body[data-living-motion="off"] .world-background,
body[data-living-motion="off"] .hero-backdrop { animation:none!important; }


/* V34 — scroll repaint stability. Keep large artwork layers stationary; animate only lightweight atmosphere overlays.
   This prevents rapid up/down scrolling from invalidating fixed/filtered backdrop layers in Chromium. */
html, body { -webkit-overflow-scrolling: touch; }
#worldBackground.world-background {
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  background-attachment: scroll !important;
  transform: none !important;
  filter: saturate(1.035) contrast(1.02) !important;
  animation: none !important;
  transition: opacity .16s ease !important;
  will-change: opacity !important;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  isolation: isolate;
}
#worldBackground.world-background.is-changing { opacity: .82 !important; }
#worldBackground.world-background.world-arriving { filter: saturate(1.035) contrast(1.02) !important; }
#worldBackground.world-background::before {
  animation: xaocNebulaFlowV35 16s ease-in-out infinite alternate !important;
  will-change: transform, opacity;
  transform: translate3d(0,0,0);
  backface-visibility: hidden;
}
#worldBackground.world-background::after {
  animation: xaocLightCurrentV35 13.5s ease-in-out infinite alternate !important;
  will-change: transform, opacity;
  backface-visibility: hidden;
}
@keyframes xaocNebulaFlowV35 {
  0% { transform: translate3d(-1.1%,.4%,0) scale(1.015); opacity: .60; }
  100% { transform: translate3d(1.1%,-.5%,0) scale(1.03); opacity: .78; }
}
@keyframes xaocLightCurrentV35 {
  0% { transform: translate3d(-20%,0,0); opacity: .18; }
  100% { transform: translate3d(20%,0,0); opacity: .31; }
}
/* Hero artwork is also kept on a stable paint layer. Motion remains in the logo, stars, and subtle phase overlays. */
.hero-backdrop {
  transform: none !important;
  animation: none !important;
  filter: brightness(1.025) saturate(1.045) contrast(1.02) !important;
  will-change: auto !important;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
/* A moving fixed starfield can also flash on fast scroll; retain its star pattern without panning the full viewport. */
.starfield {
  animation: none !important;
  transform: none !important;
  will-change: auto !important;
  backface-visibility: hidden;
}
/* Respect explicit motion-off and system reduced-motion settings. */
html[data-motion-preference="reduced"] #worldBackground.world-background::before,
html[data-motion-preference="reduced"] #worldBackground.world-background::after,
body[data-living-motion="off"] #worldBackground.world-background::before,
body[data-living-motion="off"] #worldBackground.world-background::after {
  animation: none !important;
}


/* V35 — quicker atmospheric drift, keeping large artwork fixed for scroll stability. */


/* V36 — visible meteor passes on the hero and every genre background.
   Large artwork stays fixed for scroll stability; only these lightweight streaks travel. */
.xaoc-hero-meteor,
.xaoc-world-meteor {
  display: block !important;
  z-index: 6 !important;
  height: 2px !important;
  width: clamp(105px, 12vw, 190px) !important;
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(91,177,255,.08) 18%,
    rgba(142,213,255,.56) 57%,
    rgba(230,248,255,.94) 88%,
    #fff 100%) !important;
  box-shadow: 0 0 8px 1px rgba(97,183,255,.52), 0 0 18px 3px rgba(85,174,255,.18) !important;
  transform-origin: center center;
  animation: xaocMeteorStreakV36 var(--meteor-cycle, 17s) linear var(--meteor-delay, 1s) infinite !important;
  will-change: transform, opacity;
}
.xaoc-hero-meteor::after,
.xaoc-world-meteor::after {
  content: "";
  position: absolute;
  right: -1px;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: #fff;
  box-shadow: 0 0 8px 3px rgba(205,239,255,.92), 0 0 19px 5px rgba(85,174,255,.52);
}
.xaoc-hero-meteor--a { left: 5% !important; top: 17% !important; --meteor-cycle: 15s; }
.xaoc-hero-meteor--b { left: 13% !important; top: 37% !important; width: clamp(86px, 9vw, 145px) !important; --meteor-cycle: 21s; }
.xaoc-world-meteor--a { left: 4% !important; top: 22% !important; --meteor-cycle: 17s; }
.xaoc-world-meteor--b { left: 17% !important; top: 39% !important; width: clamp(86px, 10vw, 155px) !important; --meteor-cycle: 23s; }
@keyframes xaocMeteorStreakV36 {
  0%, 4% { opacity: 0; transform: translate3d(-25vw, -8vh, 0) rotate(22deg) scale(.82); }
  8% { opacity: .92; transform: translate3d(-8vw, -3vh, 0) rotate(22deg) scale(.94); }
  19% { opacity: 1; transform: translate3d(48vw, 19vh, 0) rotate(22deg) scale(1); }
  29% { opacity: 0; transform: translate3d(112vw, 46vh, 0) rotate(22deg) scale(.78); }
  100% { opacity: 0; transform: translate3d(112vw, 46vh, 0) rotate(22deg) scale(.78); }
}
/* Keep the atmosphere a little more alive, while leaving the large background image stable. */
#worldBackground.world-background::before {
  animation: xaocNebulaFlowV36 12.5s ease-in-out infinite alternate !important;
}
#worldBackground.world-background::after {
  animation: xaocLightCurrentV36 10.5s ease-in-out infinite alternate !important;
}
.xaoc-hero-light-current {
  opacity: .72 !important;
  animation: xaocHeroCurrentV36 10.5s ease-in-out infinite alternate !important;
}
.xaoc-world-orb-glow {
  animation-duration: 12.5s !important;
}
@keyframes xaocNebulaFlowV36 {
  0% { transform: translate3d(-1.45%, .55%, 0) scale(1.015); opacity: .56; }
  100% { transform: translate3d(1.45%, -.7%, 0) scale(1.035); opacity: .82; }
}
@keyframes xaocLightCurrentV36 {
  0% { transform: translate3d(-25%, 0, 0); opacity: .16; }
  100% { transform: translate3d(25%, 0, 0); opacity: .35; }
}
@keyframes xaocHeroCurrentV36 {
  0% { transform: translate3d(-31%, 0, 0); opacity: .22; }
  100% { transform: translate3d(31%, 0, 0); opacity: .48; }
}
@media (max-width: 800px) {
  /* One streak per visible scene keeps mobile rendering light and avoids clutter. */
  .xaoc-hero-meteor--b,
  .xaoc-world-meteor--b { display: none !important; }
  .xaoc-hero-meteor--a { width: clamp(90px, 28vw, 135px) !important; }
  .xaoc-world-meteor--a { width: clamp(90px, 27vw, 140px) !important; }
  #worldBackground.world-background::before { animation-duration: 15s !important; }
  #worldBackground.world-background::after,
  .xaoc-hero-light-current { animation-duration: 12.5s !important; }
  .xaoc-world-orb-glow { animation-duration: 15s !important; }
}
html[data-motion-preference="reduced"] .xaoc-hero-meteor,
html[data-motion-preference="reduced"] .xaoc-world-meteor,
body[data-living-motion="off"] .xaoc-hero-meteor,
body[data-living-motion="off"] .xaoc-world-meteor {
  animation: none !important;
  opacity: 0 !important;
}


/* V37 — country-level worlds follow all five existing genre worlds and reuse their live-cosmos treatment. */
@media(min-width:1101px){
  .world-grid .country-world-card:nth-of-type(6){grid-column:2;grid-row:2;}
  .world-grid .country-world-card:nth-of-type(7){grid-column:3;grid-row:2;}
}
@media(min-width:801px) and (max-width:1100px){
  .world-grid .country-world-card:nth-of-type(6){grid-column:1;grid-row:3;}
  .world-grid .country-world-card:nth-of-type(7){grid-column:2;grid-row:3;}
}
@media(max-width:800px){
  .world-grid .country-world-card:nth-of-type(6){grid-column:1;grid-row:4;}
  .world-grid .country-world-card:nth-of-type(7){grid-column:2;grid-row:4;}
}
.world-card.country-world-card .world-content em{font-size:clamp(10px,.82vw,12px);line-height:1.36;}
.world-card.russian-music-world-card{border-color:rgba(255,153,93,.48);}
.world-card.russian-music-world-card:hover,.world-card.russian-music-world-card.is-selected{border-color:rgba(255,178,104,.95);box-shadow:0 0 0 2px rgba(255,126,56,.24),0 14px 36px rgba(80,32,12,.28);}
.world-card.foreign-music-world-card{border-color:rgba(109,192,255,.48);}
.world-card.foreign-music-world-card:hover,.world-card.foreign-music-world-card.is-selected{border-color:rgba(124,203,255,.95);box-shadow:0 0 0 2px rgba(76,170,255,.26),0 14px 36px rgba(12,40,86,.28);}
body[data-music-world="russian-music"] .world-background::before{background:radial-gradient(ellipse at 20% 44%,rgba(255,151,57,.28),transparent 34%),radial-gradient(ellipse at 76% 62%,rgba(255,204,92,.18),transparent 35%);}
body[data-music-world="foreign-music"] .world-background::before{background:radial-gradient(ellipse at 68% 33%,rgba(93,118,255,.27),transparent 36%),radial-gradient(ellipse at 80% 67%,rgba(0,206,255,.22),transparent 34%);}
body[data-music-world="russian-music"] .xaoc-world-orb-glow{background:radial-gradient(ellipse at 20% 42%,rgba(255,168,74,.30),transparent 34%),radial-gradient(ellipse at 75% 65%,rgba(224,88,57,.17),transparent 34%);}
body[data-music-world="foreign-music"] .xaoc-world-orb-glow{background:radial-gradient(ellipse at 58% 29%,rgba(113,110,255,.30),transparent 36%),radial-gradient(ellipse at 77% 65%,rgba(0,204,255,.24),transparent 35%);}
body[data-music-world="russian-music"]{--xaoc-time-dawn:rgba(255,165,84,.17);--xaoc-time-day:rgba(255,220,148,.13);--xaoc-time-sunset:rgba(234,86,46,.25);--xaoc-time-dusk:rgba(87,40,33,.30);--xaoc-time-night:rgba(9,12,24,.48);}
body[data-music-world="foreign-music"]{--xaoc-time-dawn:rgba(118,145,248,.17);--xaoc-time-day:rgba(133,209,255,.12);--xaoc-time-sunset:rgba(164,76,221,.23);--xaoc-time-dusk:rgba(56,36,126,.34);--xaoc-time-night:rgba(3,7,30,.50);}
@media(max-width:800px){.world-card.country-world-card .world-content em{font-size:10px;line-height:1.32;}}
@media(max-width:430px){.world-card.country-world-card .world-content strong{font-size:clamp(15px,4.2vw,18px);}.world-card.country-world-card .world-content em{font-size:9px;}}

/* V42 — member access and account dialog. Kept independent of the visual world/background layers. */
.auth-trigger{appearance:none;border:1px solid rgba(116,169,213,.42);border-radius:6px;background:linear-gradient(125deg,rgba(8,24,42,.92),rgba(7,12,22,.92));color:#eff7ff;padding:8px 10px;min-height:32px;font:800 9px var(--sans);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;cursor:pointer;transition:border-color .2s,background .2s,box-shadow .2s}
.auth-trigger:hover{border-color:#69b9ec;background:#10253b;box-shadow:0 0 16px rgba(50,161,230,.17)}
.auth-dialog{width:min(480px,100%);max-height:min(86vh,760px);overflow:auto;background:linear-gradient(145deg,#091624f7,#060b14fa);border:1px solid #385772;border-radius:13px;padding:27px;box-shadow:0 25px 80px #000c;position:relative;color:#f2f7ff}
.auth-dialog h2{font:32px var(--serif);margin:0 0 13px}
.auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:18px 0 17px}
.auth-tabs button{border:1px solid #294158;background:#07111d;border-radius:6px;color:#9eb5c9;min-height:39px;padding:8px;font:700 11px var(--sans);cursor:pointer}
.auth-tabs button.active{border-color:#ff526b;background:linear-gradient(125deg,#ff3b55,#ba0b2a);color:#fff;box-shadow:0 6px 18px #f3314924}
.auth-form label{display:block;margin:0 0 13px;font-size:11px;color:#bed0e2;font-weight:750}
.auth-form input{display:block;width:100%;margin-top:6px;border:1px solid #334f69;border-radius:6px;background:#030911;color:#f5f9ff;padding:12px 13px;font:13px var(--sans);outline:none}
.auth-form input:focus{border-color:#49a8e4;box-shadow:0 0 0 2px #2196d92b}
.auth-form .dialog-hint{display:block;margin:7px 0 0}
.auth-notice{display:none;padding:10px 12px;border:1px solid #385975;border-radius:6px;background:#0a1a2b;color:#d9eeff;font-size:12px;margin:12px 0}
.auth-notice.visible{display:block}
.auth-notice.error{background:#35121c;border-color:#943147;color:#ffd6df}
.auth-logged-panel{border:1px solid #28445e;border-radius:8px;background:#07111d;padding:16px;margin:16px 0}
.auth-logged-panel p{color:#d7e8f8;font-size:13px;overflow-wrap:anywhere;margin:0 0 13px}
.auth-logged-panel[hidden]{display:none}
#authNameField[hidden]{display:none}
@media(max-width:800px){.auth-trigger{padding:7px 8px;min-height:29px;font-size:8px;letter-spacing:.03em}.auth-dialog{padding:20px}.auth-dialog h2{font-size:27px}}
@media(max-width:430px){.header-actions{gap:1px}.auth-trigger{max-width:62px;overflow:hidden;text-overflow:ellipsis;padding-inline:5px;font-size:7px}.auth-dialog{padding:17px}.auth-tabs button{font-size:10px}}


/* V45: Top Songs chart */
.top-songs-section{padding-top:46px;padding-bottom:70px}.top-songs-hint{color:var(--muted);font-size:12px;margin:-10px 0 20px}.top-song-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.top-song-row{min-width:0;display:grid;grid-template-columns:34px 68px minmax(0,1fr) auto;gap:13px;align-items:center;padding:12px;background:linear-gradient(135deg,rgba(5,12,23,.94),rgba(8,17,31,.88));border:1px solid var(--line);border-radius:9px;box-shadow:0 9px 26px rgba(0,0,0,.14);transition:border-color .25s,transform .25s,background .25s}.top-song-row:hover{border-color:#7ea6d466;transform:translateY(-2px);background:linear-gradient(135deg,rgba(7,17,32,.97),rgba(12,24,42,.92))}.top-song-rank{font:22px/1 var(--serif);color:#f34a62;text-align:center;text-shadow:0 0 14px #ef345344}.top-song-cover{width:68px;height:68px;object-fit:cover;display:block;border-radius:5px;border:1px solid #9bb9d633}.top-song-main{min-width:0}.top-song-main h3{font-size:14px;line-height:1.3;margin:0 0 4px;overflow-wrap:anywhere}.top-song-main p{font-size:10px;color:#a9b9cc;margin:0 0 7px}.top-song-metrics{display:flex;flex-wrap:wrap;gap:5px 13px;color:#b7c7d9;font-size:10px}.top-song-metrics span{white-space:nowrap}.top-song-actions{display:flex;flex-direction:column;gap:7px;align-items:stretch}.top-song-listen{display:flex;align-items:center;justify-content:center;gap:6px;border:1px solid #3a7196;border-radius:5px;background:#0c2235;color:#edf8ff;padding:8px 9px;font-size:10px;font-weight:800;white-space:nowrap;cursor:pointer}.top-song-listen:hover{background:#123753;border-color:#65b8ef}.top-song-add{width:34px;height:29px;align-self:flex-end;border:1px solid #ed3a51;border-radius:5px;color:#fff;background:#e91c3c;cursor:pointer;font-size:21px;line-height:1}.top-song-add:hover{box-shadow:0 0 16px #fb344b66}.youtube-dialog{width:min(940px,calc(100vw - 32px));max-height:calc(100vh - 36px);overflow:auto;background:rgba(5,10,19,.97);border:1px solid var(--line);border-radius:12px;padding:22px;box-shadow:0 30px 90px #000a}.youtube-frame-wrap{aspect-ratio:16/9;width:100%;background:#000;border:1px solid #304055;border-radius:7px;overflow:hidden}.youtube-frame-wrap iframe{display:block;width:100%;height:100%;border:0}.youtube-external-link{margin:14px 0 0;text-align:right}.youtube-external-link a{color:#dceeff;font-size:12px;font-weight:700;text-decoration:none;border-bottom:1px solid #e73550;padding-bottom:3px}.youtube-external-link a:hover{color:#fff}.video-image.v-youtube img{object-fit:cover}
@media(max-width:900px){.top-song-grid{grid-template-columns:1fr}.top-song-row{grid-template-columns:31px 64px minmax(0,1fr) auto}.top-song-cover{width:64px;height:64px}}
@media(max-width:520px){.top-songs-section{padding-top:36px}.top-song-row{grid-template-columns:27px 58px minmax(0,1fr);gap:9px;padding:10px}.top-song-cover{width:58px;height:58px}.top-song-rank{font-size:19px}.top-song-main h3{font-size:12px}.top-song-metrics{font-size:9px;gap:4px 8px}.top-song-actions{grid-column:2/4;flex-direction:row;justify-content:flex-end}.top-song-listen{flex:1}.top-song-add{align-self:auto}.youtube-dialog{padding:15px}.youtube-external-link{text-align:left}}

/* V46: external media cards behave like native video cards. */
.video-card-external{display:block;text-decoration:none;font:inherit}
.video-card-external .video-image img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .35s}


/* V47 — move Top Songs into the left-side information card so the store has more breathing room. */
.top-songs-sidebar{min-width:0;width:100%;box-sizing:border-box;align-self:stretch;padding:22px;overflow:hidden;border:1px solid rgba(167,209,247,.27);border-radius:12px;background:linear-gradient(135deg,rgba(3,9,18,.94),rgba(4,13,24,.90)),url("assets/artist-world.jpg") center/cover no-repeat;box-shadow:0 18px 48px rgba(0,0,0,.28);backdrop-filter:blur(12px)}
.top-songs-sidebar-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding-bottom:13px;margin-bottom:10px;border-bottom:1px solid rgba(167,209,247,.22)}
.top-songs-sidebar-heading h2{color:#fff;font:clamp(29px,2.55vw,39px)/1.08 var(--serif);letter-spacing:-.025em;margin:0;text-shadow:0 2px 12px rgba(0,0,0,.85)}
.top-songs-sidebar-heading .kicker{margin-bottom:7px}
.top-songs-sidebar-aside{max-width:170px;margin:13px 0 0;color:#d4e4f5;font-size:10px;line-height:1.55;text-shadow:0 1px 5px rgba(0,0,0,.9)}
.top-songs-sidebar .top-songs-hint{color:#bfd0e2;font-size:10px;line-height:1.5;margin:0 0 12px}
.top-song-grid-sidebar{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;align-content:start}
.top-songs-sidebar .top-song-row{min-width:0;grid-template-columns:22px 46px minmax(0,1fr);grid-template-rows:auto auto;gap:6px;padding:8px;border-radius:7px;box-shadow:0 7px 19px rgba(0,0,0,.15)}
.top-songs-sidebar .top-song-rank{grid-column:1;grid-row:1;font-size:17px}
.top-songs-sidebar .top-song-cover{grid-column:2;grid-row:1;width:46px;height:46px}
.top-songs-sidebar .top-song-main{grid-column:3;grid-row:1;min-width:0}
.top-songs-sidebar .top-song-main h3{font-size:11px;line-height:1.25;margin-bottom:3px}
.top-songs-sidebar .top-song-main p{font-size:9px;margin-bottom:4px}
.top-songs-sidebar .top-song-metrics{font-size:8px;gap:3px 7px}
.top-songs-sidebar .top-song-metrics span{white-space:normal}
.top-songs-sidebar .top-song-actions{grid-column:2/4;grid-row:2;display:flex;flex-direction:row;gap:5px;align-items:center;min-width:0}
.top-songs-sidebar .top-song-listen{flex:1;min-width:0;padding:6px 5px;font-size:9px;overflow:hidden}
.top-songs-sidebar .top-song-listen span{overflow:hidden;text-overflow:ellipsis}
.top-songs-sidebar .top-song-add{width:29px;height:27px;flex:0 0 29px;align-self:auto;font-size:19px}
.top-songs-sidebar .top-song-row:hover{transform:translateY(-1px)}
/* The Top Songs anchor is now inside the About row; keep jumps clear of the sticky header. */
#top-songs{scroll-margin-top:88px}
@media(max-width:1100px){.top-song-grid-sidebar{grid-template-columns:1fr}.top-songs-sidebar{padding:18px}.top-songs-sidebar-heading{gap:10px}.top-songs-sidebar-aside{max-width:145px;font-size:9px}}
@media(max-width:800px){.top-song-grid-sidebar{grid-template-columns:repeat(2,minmax(0,1fr))}.top-songs-sidebar{padding:18px}.top-songs-sidebar-heading h2{font-size:32px}}
@media(max-width:560px){.top-song-grid-sidebar{grid-template-columns:1fr}.top-songs-sidebar-heading{display:block}.top-songs-sidebar-aside{max-width:none;margin:8px 0 0;font-size:10px}.top-songs-sidebar .top-song-row{grid-template-columns:24px 52px minmax(0,1fr);padding:9px}.top-songs-sidebar .top-song-cover{width:52px;height:52px}.top-songs-sidebar .top-song-actions{grid-column:2/4}.top-songs-sidebar .top-song-main h3{font-size:12px}.top-songs-sidebar .top-song-metrics{font-size:9px}}


/* V48 — Top 10 always reserves ten ranked positions without inventing tracks or stats. */
.top-songs-sidebar .top-song-placeholder{border-style:dashed;border-color:rgba(116,160,198,.25);background:linear-gradient(135deg,rgba(4,11,21,.52),rgba(7,15,26,.45));opacity:.76;box-shadow:none}
.top-songs-sidebar .top-song-placeholder:hover{transform:none;border-color:rgba(116,160,198,.4);background:linear-gradient(135deg,rgba(4,11,21,.6),rgba(7,15,26,.5))}
.top-songs-sidebar .top-song-cover-placeholder{display:flex;align-items:center;justify-content:center;box-sizing:border-box;background:radial-gradient(circle at 50% 50%,rgba(58,121,164,.24),rgba(3,10,18,.8));color:#80bfe9;font-size:20px}
.top-songs-sidebar .top-song-placeholder .top-song-main p{color:#8ca4bb}
.top-songs-sidebar .top-song-placeholder .top-song-metrics{font-size:8px;line-height:1.4;color:#7e93a8}

/* V51: platform cards use a branded fallback instead of an unrelated music-cover image. */
.video-image.v-vk img,.video-image.v-telegram img{filter:brightness(.62) saturate(.9);}
.video-image.v-vk:before,.video-image.v-telegram:before{content:"XAOC MUSIC";position:absolute;z-index:1;left:16px;bottom:13px;font-size:10px;font-weight:800;letter-spacing:.18em;color:#eaf5ff;text-shadow:0 2px 7px #000;pointer-events:none;}
.video-image.v-vk i,.video-image.v-telegram i{font-size:20px;}
.video-card-external:focus-visible,.video-card:focus-visible{outline:2px solid #69c8ff;outline-offset:4px;border-radius:7px;}
@media(max-width:800px){.video-card{display:block;width:100%;}.video-title{font-size:14px;}.video-card small{font-size:11px;}.video-grid{gap:22px;}}
@media(max-width:430px){.video-section .section-heading{align-items:flex-start;flex-direction:column;gap:14px;}.video-section .text-link{white-space:normal;line-height:1.5;}.contact-links strong{overflow-wrap:anywhere;}}


/* V52 — T-Bank support QR integrated into the hero; responsive and link-first. */
.hero-support-panel{display:flex;align-items:center;gap:14px;width:min(100%,390px);margin-top:21px;padding:11px 13px;border:1px solid rgba(132,190,232,.34);border-radius:10px;background:linear-gradient(115deg,rgba(3,10,20,.91),rgba(9,19,32,.78));box-shadow:0 10px 28px rgba(0,0,0,.25);backdrop-filter:blur(7px);position:relative;z-index:4}
.hero-support-qr-link{display:block;flex:0 0 108px;width:108px;height:108px;padding:5px;border-radius:7px;background:#fff;line-height:0}
.hero-support-qr{display:block;width:100%;height:100%;object-fit:contain}
.hero-support-copy{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:7px}
.hero-support-copy strong{font-size:13px;line-height:1.35;color:#fff}
.hero-support-copy p{margin:0;color:#d5e4f2;font-size:11px;line-height:1.5}
.hero-support-link{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:0 12px;border:1px solid rgba(255,91,119,.8);border-radius:6px;background:linear-gradient(120deg,rgba(238,44,73,.95),rgba(145,12,39,.92));color:#fff;text-decoration:none;font-size:10px;font-weight:800;letter-spacing:.025em;transition:filter .2s,transform .2s}
.hero-support-link:hover{filter:brightness(1.12);transform:translateY(-1px)}
.support-transfer-panel{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.support-transfer-mark{display:grid;place-items:center;width:43px;height:43px;border:1px solid rgba(255,87,119,.48);border-radius:50%;color:#ff637c;font-size:28px;line-height:1}
.support-transfer-heading{color:#f2f8ff;font-size:15px;line-height:1.4}
.support-transfer-copy{margin:0;color:#bed3e5;font-size:12px;line-height:1.6}
.support-transfer-panel .support-button{width:100%;gap:10px;text-align:center}
@media(max-width:800px){.hero-support-panel{width:min(100%,390px);margin-top:18px}.hero-support-qr-link{flex-basis:96px;width:96px;height:96px}.hero-support-copy strong{font-size:12px}.hero-support-copy p{font-size:11px}}
@media(max-width:430px){.hero-support-panel{padding:9px;gap:10px;border-radius:8px;margin-top:16px}.hero-support-qr-link{flex-basis:84px;width:84px;height:84px;padding:4px}.hero-support-copy{gap:5px}.hero-support-copy strong{font-size:11px}.hero-support-copy p{font-size:10px;line-height:1.4}.hero-support-link{min-height:32px;padding:0 9px;font-size:9px}.hero-scroll{margin-top:28px}}


/* V52 — Dance genre and voluntary support suggestions. */
@media(min-width:1101px){.world-grid{grid-template-columns:repeat(6,minmax(0,1fr));}}
.world-card.dance-world-card{border-color:rgba(191,94,255,.58);box-shadow:0 12px 34px rgba(44,20,86,.30)}
.world-card.dance-world-card:hover{border-color:#e4a2ff;box-shadow:0 0 25px rgba(183,83,255,.30)}
body[data-music-world="dance"] .world-background::before{background:radial-gradient(ellipse at 28% 36%,rgba(80,190,255,.28),transparent 35%),radial-gradient(ellipse at 76% 62%,rgba(236,70,214,.29),transparent 36%)}
body[data-music-world="dance"] .xaoc-world-orb-glow{background:radial-gradient(ellipse at 27% 37%,rgba(91,187,255,.30),transparent 35%),radial-gradient(ellipse at 77% 64%,rgba(237,74,220,.27),transparent 36%)}
body[data-music-world="dance"]{--xaoc-time-dawn:rgba(106,166,255,.19);--xaoc-time-day:rgba(111,206,255,.12);--xaoc-time-sunset:rgba(233,62,208,.27);--xaoc-time-dusk:rgba(73,31,130,.38);--xaoc-time-night:rgba(3,5,32,.52)}
.support-suggestions{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 0}
.support-suggestion-chip{display:inline-flex;align-items:center;justify-content:center;min-width:66px;min-height:34px;padding:0 13px;border:1px solid rgba(133,183,225,.42);border-radius:999px;background:linear-gradient(125deg,rgba(12,28,47,.95),rgba(34,18,55,.88));color:#f4f7ff;font-size:12px;font-weight:800;letter-spacing:.02em}
.support-custom-note{margin:0;color:#9fb7cb;font-size:11px;line-height:1.55}
@media(max-width:800px){.support-suggestions{gap:7px}.support-suggestion-chip{min-width:60px;min-height:32px;font-size:12px}}


/* V53 — Dance panorama and upper brand-aligned support QR. */
.hero-brand-support-row{position:relative;display:grid;grid-template-columns:minmax(0,570px) minmax(130px,165px);align-items:center;gap:clamp(20px,3vw,42px);width:100%;}
.hero-brand-copy{min-width:0;}
.hero-brand-copy .hero-logo-heading{max-width:100%;}
.hero-brand-support-row .hero-support-panel{width:100%;margin:0;min-width:0;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:10px 9px;}
.hero-brand-support-row .hero-support-qr-link{flex:0 0 94px;width:94px;height:94px;padding:5px;}
.hero-brand-support-row .hero-support-copy{align-items:center;text-align:center;gap:6px;}
.hero-brand-support-row .hero-support-copy strong{font-size:11px;line-height:1.3;}
.hero-brand-support-row .hero-support-copy p{display:none;}
.hero-brand-support-row .hero-support-link{min-height:30px;max-width:100%;padding:0 8px;font-size:9px;}
@media(min-width:1600px){
  .hero-brand-support-row{display:block;width:100%;}
  .hero-brand-support-row .hero-support-panel{position:absolute;left:-126px;top:clamp(175px,18vh,230px);width:120px;margin:0;}
}
@media(max-width:1599px) and (min-width:801px){
  .hero-brand-support-row{grid-template-columns:minmax(0,570px) minmax(125px,165px);gap:clamp(16px,2.4vw,34px);}
}
@media(max-width:800px){
  .hero-brand-support-row{display:flex;flex-direction:column;align-items:flex-start;gap:10px;}
  .hero-brand-support-row .hero-support-panel{position:relative;left:auto;top:auto;width:min(100%,390px);margin-top:8px;flex-direction:row;align-items:center;justify-content:flex-start;gap:12px;padding:10px;}
  .hero-brand-support-row .hero-support-qr-link{flex:0 0 92px;width:92px;height:92px;}
  .hero-brand-support-row .hero-support-copy{align-items:flex-start;text-align:left;gap:5px;}
  .hero-brand-support-row .hero-support-copy p{display:block;font-size:10px;line-height:1.4;}
  .hero-brand-support-row .hero-support-copy strong{font-size:11px;}
  .hero-brand-support-row .hero-support-link{min-height:30px;font-size:9px;}
}
@media(max-width:430px){
  .hero-brand-support-row .hero-support-panel{gap:9px;padding:8px;}
  .hero-brand-support-row .hero-support-qr-link{flex-basis:78px;width:78px;height:78px;}
  .hero-brand-support-row .hero-support-copy p{font-size:9px;}
}

/* The Dance panorama keeps the artwork stable for scroll performance; soft nebula/light currents and meteor streaks animate above it. */
body[data-music-world="dance"] #worldBackground.world-background::before{
  background:radial-gradient(ellipse at 21% 35%,rgba(48,171,255,.31),transparent 32%),radial-gradient(ellipse at 80% 60%,rgba(255,58,203,.30),transparent 34%),radial-gradient(ellipse at 51% 78%,rgba(90,65,255,.16),transparent 38%);
}
body[data-music-world="dance"] #worldBackground.world-background::after{
  background:linear-gradient(112deg,transparent 9%,rgba(71,212,255,.14) 28%,rgba(204,84,255,.15) 48%,rgba(255,105,203,.10) 57%,transparent 76%);
}
/* V34 scroll-stability rule intentionally keeps the full-size image still; the atmosphere, light currents, stars and comet streaks move above it. */


/* V54 — world-card legibility, paired country cards, and QR vertical alignment. */
/* The country cards are explicitly paired after Dance at every responsive breakpoint. */
@media (min-width:1101px){
  .world-grid button.russian-music-world-card:nth-of-type(7){grid-column:1!important;grid-row:2!important;}
  .world-grid button.foreign-music-world-card:nth-of-type(8){grid-column:2!important;grid-row:2!important;}
}
@media (min-width:801px) and (max-width:1100px){
  .world-grid button.russian-music-world-card:nth-of-type(7){grid-column:1!important;grid-row:3!important;}
  .world-grid button.foreign-music-world-card:nth-of-type(8){grid-column:2!important;grid-row:3!important;}
}
@media (max-width:800px){
  .world-grid button.russian-music-world-card:nth-of-type(7){grid-column:1!important;grid-row:4!important;}
  .world-grid button.foreign-music-world-card:nth-of-type(8){grid-column:2!important;grid-row:4!important;}
}
.world-card.country-world-card .world-content{left:10px;right:10px;bottom:12px;}
.world-card.country-world-card .world-content strong{
  font-size:clamp(12px,.9vw,15px);
  line-height:1.12;
  letter-spacing:-.018em;
  margin-top:5px;
  max-width:100%;
  overflow-wrap:normal;
  word-break:normal;
  hyphens:none;
}
.world-card.country-world-card .world-content em{font-size:9px;line-height:1.25;margin-top:5px;}
@media (max-width:1100px){
  .world-card.country-world-card .world-content strong{font-size:clamp(13px,1.6vw,16px);}
  .world-card.country-world-card .world-content em{font-size:9px;line-height:1.28;}
}
@media (max-width:800px){
  .world-card.country-world-card .world-content{left:10px;right:9px;bottom:12px;}
  .world-card.country-world-card .world-content strong{font-size:clamp(13px,2.4vw,16px);line-height:1.1;}
  .world-card.country-world-card .world-content em{font-size:9px;line-height:1.25;}
}
@media (max-width:430px){
  .world-card.country-world-card .world-content strong{font-size:clamp(12px,3.6vw,14px);}
  .world-card.country-world-card .world-content em{font-size:8.5px;line-height:1.22;}
}
/* Lower the QR block to align with the tagline/buttons zone marked by the user. */
@media (min-width:801px){
  .hero-brand-support-row .hero-support-panel{
    position:absolute!important;
    left:-126px!important;
    top:clamp(265px,calc(18vh + 90px),322px)!important;
    width:120px!important;
    margin:0!important;
    z-index:6;
  }
}
@media (min-width:801px) and (max-width:1100px){
  .hero-brand-support-row .hero-support-panel{left:-112px!important;top:clamp(260px,calc(18vh + 85px),305px)!important;width:108px!important;}
  .hero-brand-support-row .hero-support-qr-link{flex-basis:86px;width:86px;height:86px;}
}
@media (max-width:800px){
  .hero-brand-support-row .hero-support-panel{position:relative!important;left:auto!important;top:auto!important;width:min(100%,390px)!important;margin-top:8px!important;}
}


/* V55 — final hero spacing, readable country-world copy, and simplified social row. */
.hero-buttons{margin-top:18px;}
.social-row{gap:11px;}
.social.spotify{display:none!important;}
.world-card.country-world-card .world-content em{font-size:clamp(10px,.62vw,11px);line-height:1.32;font-weight:650;margin-top:6px;}
@media(max-width:1100px){
  .hero-buttons{margin-top:17px;}
  .world-card.country-world-card .world-content em{font-size:10px;line-height:1.3;}
}
@media(max-width:800px){
  .world-card.country-world-card .world-content em{font-size:9.5px;line-height:1.28;}
}
@media(max-width:430px){
  .hero-buttons{margin-top:16px;}
  .world-card.country-world-card .world-content em{font-size:9px;line-height:1.24;}
}

/* V56 — larger country-world descriptions without resizing any cards. */
/* Keep card geometry, grid positions and artwork dimensions unchanged; only increase the descriptive text. */
.world-card.country-world-card .world-content em{
  font-size:clamp(12px,.74vw,13px)!important;
  line-height:1.28!important;
  font-weight:650;
  letter-spacing:0;
  max-width:100%;
  overflow-wrap:normal;
  word-break:normal;
  hyphens:none;
}
@media(max-width:1100px){
  .world-card.country-world-card .world-content em{font-size:11.5px!important;line-height:1.28!important;}
}
@media(max-width:800px){
  .world-card.country-world-card .world-content em{font-size:11px!important;line-height:1.26!important;}
}
@media(max-width:430px){
  .world-card.country-world-card .world-content em{font-size:10px!important;line-height:1.24!important;}
}


/* V57 — accessible support amount choices and custom amount input. */
.support-suggestion-chip{appearance:none;cursor:pointer;transition:border-color .18s,background .18s,box-shadow .18s,transform .18s}
.support-suggestion-chip:hover{border-color:rgba(255,100,132,.85);transform:translateY(-1px)}
.support-suggestion-chip.is-selected{border-color:#ff5b77;background:linear-gradient(125deg,rgba(238,44,73,.72),rgba(48,18,38,.96));box-shadow:0 0 0 1px rgba(255,91,119,.18),0 0 16px rgba(238,44,73,.16)}
.support-custom-amount-label{display:block;margin-top:2px;color:#d9e8f6;font-size:12px;font-weight:750}
.support-custom-amount-input{width:min(100%,260px);min-height:42px;padding:9px 12px;border:1px solid rgba(133,183,225,.45);border-radius:8px;background:rgba(3,10,20,.88);color:#f4f7ff;font:600 14px/1.3 system-ui, sans-serif;outline:none}
.support-custom-amount-input:focus{border-color:#6dcaff;box-shadow:0 0 0 3px rgba(87,183,255,.14)}
.support-custom-amount-input[aria-invalid="true"]{border-color:#ff5b77}
.support-amount-status{margin:0;color:#e9f5ff;font-size:12px;line-height:1.5;font-weight:700}
@media(max-width:800px){.support-custom-amount-input{width:100%;min-height:44px}.support-custom-amount-label{font-size:13px}.support-amount-status{font-size:12px}}

/* V58 — buyer reviews and moderation-friendly feedback panel. */
.track-review-open{display:inline-flex;align-items:center;justify-content:center;margin-top:9px;min-height:32px;padding:6px 11px;border-radius:8px;border:1px solid rgba(111,177,220,.38);background:rgba(6,16,29,.72);color:#bedff7;font:600 11px/1.2 system-ui,Segoe UI,Arial,sans-serif;cursor:pointer;transition:background .2s ease,border-color .2s ease,color .2s ease}
.track-review-open:hover{background:rgba(20,47,72,.9);border-color:#77c9ff;color:#fff}
.reviews-dialog{width:min(760px,calc(100vw - 28px));max-height:min(86vh,850px);overflow:auto;margin:auto;padding:clamp(18px,3vw,28px);border:1px solid rgba(99,168,224,.35);border-radius:18px;background:linear-gradient(145deg,rgba(5,13,24,.98),rgba(9,21,39,.98));color:#eaf4ff;box-shadow:0 30px 90px rgba(0,0,0,.55)}
.review-permission-message{margin:10px 0 16px;padding:12px 14px;border-radius:10px;background:rgba(23,48,71,.6);border:1px solid rgba(100,163,211,.2);font-size:13px;line-height:1.55;color:#cde5fa}
.review-permission-message.error{background:rgba(95,25,39,.55);border-color:rgba(231,78,105,.45);color:#ffe1e6}
.track-review-list{display:grid;gap:12px;margin:12px 0 18px}
.track-review{padding:14px;border:1px solid rgba(100,140,180,.22);border-radius:12px;background:rgba(3,10,19,.64);overflow-wrap:anywhere}
.track-review-head{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#eff7ff;font-size:13px}
.track-review-head time{font-size:11px;color:#8ba8c2;white-space:nowrap}
.track-review>p,.artist-review-reply p{white-space:pre-wrap;margin:9px 0 0;font-size:13px;line-height:1.6;color:#d9e7f5}
.artist-review-reply{margin-top:12px;padding:10px 12px;border-left:3px solid #fa355b;background:rgba(250,53,91,.07);border-radius:0 8px 8px 0}
.artist-review-reply strong{font-size:11px;letter-spacing:.04em;color:#ffa3b5}
.review-empty{margin:0;color:#95acc1;font-size:13px;line-height:1.55}
.review-form{display:grid;gap:10px;padding-top:14px;border-top:1px solid rgba(100,140,180,.2)}
.review-form label{font-size:13px;font-weight:700;color:#dbeafa}
.review-form textarea{display:block;width:100%;min-height:105px;resize:vertical;border:1px solid #30465d;border-radius:10px;background:#050b14;color:#fff;padding:12px 13px;font:inherit;line-height:1.5}
.review-form textarea:focus{outline:2px solid rgba(92,199,255,.45);outline-offset:1px}
.review-form [hidden],#reviewLoginButton[hidden],#reviewForm[hidden]{display:none!important}
.hint-inline{font-weight:400;color:#94abc1;font-size:11px}
@media(max-width:600px){.reviews-dialog{width:calc(100vw - 18px);max-height:90vh;padding:16px;border-radius:14px}.track-review-open{min-height:36px;font-size:12px}.track-review-head{align-items:flex-start;flex-direction:column;gap:3px}}

/* V58 — verified purchase/support badges in track reviews. */
.track-review-author{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}.track-review-proof{display:inline-flex;align-items:center;border:1px solid rgba(92,199,255,.34);background:rgba(92,199,255,.08);color:#a8e3ff;border-radius:999px;padding:2px 7px;font-size:10px;line-height:1.4;font-weight:700;letter-spacing:.02em}.track-review-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.track-review-head time{flex:0 0 auto}@media(max-width:520px){.track-review-head{flex-direction:column;gap:5px}.track-review-proof{font-size:9px}}


/* V60 — discoverability, curated tabs and personal music library. */
.top-songs-tabs{display:flex;align-items:center;gap:6px;flex-wrap:wrap;max-width:100%;margin:0 0 12px;min-width:0}
.top-songs-tab{appearance:none;flex:0 1 auto;max-width:100%;min-width:0;border:1px solid rgba(111,156,192,.3);border-radius:999px;padding:7px 10px;background:rgba(5,15,27,.82);color:#b9d0e4;font:700 10px/1.25 var(--sans);cursor:pointer;transition:background .18s,border-color .18s,color .18s;white-space:normal;text-align:center}
.top-songs-tab:hover,.top-songs-tab.active{background:linear-gradient(120deg,rgba(236,39,72,.93),rgba(121,22,53,.9));border-color:#f24b68;color:#fff}
.top-songs-tab:focus-visible,.track-icon-action:focus-visible{outline:2px solid #78d3ff;outline-offset:2px}
.top-songs-curated-empty{padding:18px 14px;border:1px dashed rgba(125,169,202,.28);border-radius:9px;color:#9db5cb;font-size:12px;line-height:1.55;background:rgba(4,12,22,.5)}
.catalog-mood-filter{display:flex;align-items:center;gap:8px;color:#a7bbcf;font-size:10px;font-weight:700;min-width:155px}
.catalog-mood-filter select{min-width:155px;max-width:230px;min-height:38px;padding:7px 9px;border:1px solid #304254;border-radius:5px;background:#09111b;color:#dbeaf8;font:11px var(--sans)}
.catalog-mood-filter select:focus{outline:2px solid rgba(92,199,255,.42);outline-offset:1px}
.track-card-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:7px;min-width:0}
.track-card-title-row h3{flex:1;min-width:0;overflow-wrap:anywhere}
.track-detail-link{color:inherit;text-decoration:none}
.track-detail-link:hover{color:#8dd9ff;text-decoration:underline;text-decoration-color:rgba(141,217,255,.55);text-underline-offset:3px}
.track-card-icon-actions,.release-card-tools{display:flex;align-items:center;gap:5px;flex:0 0 auto}
.track-icon-action{display:inline-flex;align-items:center;justify-content:center;width:29px;height:29px;min-width:29px;border:1px solid rgba(115,160,196,.35);border-radius:7px;background:rgba(4,12,22,.62);color:#b8d4e9;text-decoration:none;font:700 15px/1 var(--sans);cursor:pointer;transition:color .15s,border-color .15s,background .15s;flex-shrink:0}
.track-icon-action:hover,.track-icon-action.is-favorite{border-color:rgba(255,86,117,.75);background:rgba(191,30,65,.2);color:#ff7893}
.release-card-tools{margin:7px 0 2px}
.track-mood-tags{display:flex;flex-wrap:wrap;gap:4px;margin:7px 0 2px;min-width:0}
.track-mood-tags span{display:inline-flex;max-width:100%;padding:3px 6px;border:1px solid rgba(92,167,211,.22);border-radius:999px;background:rgba(14,37,58,.54);color:#a7d5f3;font-size:9px;line-height:1.25;overflow-wrap:anywhere}
.track-route-highlight{outline:2px solid rgba(84,198,255,.9);box-shadow:0 0 0 5px rgba(84,198,255,.12),0 0 24px rgba(84,198,255,.22)!important;transition:outline-color .2s,box-shadow .2s}
.collection-cta-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex-shrink:0}
.library-quick-trigger{min-width:0;display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.library-dialog{width:min(760px,calc(100vw - 28px));max-height:min(88vh,900px);overflow:auto;margin:auto;padding:clamp(18px,3vw,28px);border:1px solid rgba(99,168,224,.35);border-radius:18px;background:linear-gradient(145deg,rgba(5,13,24,.98),rgba(9,21,39,.98));color:#eaf4ff;box-shadow:0 30px 90px rgba(0,0,0,.55)}
.library-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0 12px;padding-bottom:12px;border-bottom:1px solid rgba(100,140,180,.2)}
.library-tabs button{appearance:none;border:1px solid #2d465c;border-radius:999px;padding:8px 13px;background:#091522;color:#b9d2e7;font:700 11px/1.3 var(--sans);cursor:pointer}
.library-tabs button.active{background:linear-gradient(120deg,rgba(236,39,72,.9),rgba(121,22,53,.9));border-color:#f24b68;color:#fff}
.library-status{font-size:12px;line-height:1.55;color:#9fb8ce;margin:8px 0}
.library-track-list{display:grid;gap:9px}
.library-track-row{display:grid;grid-template-columns:64px minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px;border:1px solid rgba(100,140,180,.22);border-radius:10px;background:rgba(3,10,19,.64);min-width:0}
.library-track-row>img{width:64px;height:64px;object-fit:cover;border-radius:7px;border:1px solid rgba(127,190,230,.22)}
.library-track-main{display:flex;flex-direction:column;gap:3px;min-width:0}
.library-track-title{color:#eaf5ff;text-decoration:none;font-weight:750;overflow-wrap:anywhere}
.library-track-title:hover{color:#8dd9ff}
.library-track-main small{color:#91a9bf;font-size:10px}
.library-verified{align-self:flex-start;font-size:10px;color:#a8e3ff;border:1px solid rgba(92,199,255,.3);background:rgba(92,199,255,.08);border-radius:999px;padding:3px 7px;margin-top:2px}
.library-track-actions{display:flex;align-items:center;gap:5px}
.library-track-actions button,.library-track-actions a{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:1px solid rgba(115,160,196,.35);border-radius:7px;background:rgba(4,12,22,.62);color:#b8d4e9;text-decoration:none;cursor:pointer;font:700 13px/1 var(--sans)}
.library-track-actions button:hover,.library-track-actions a:hover{color:#fff;border-color:#6fcaff}
.library-empty{padding:22px 12px;text-align:center;color:#91a9bf;border:1px dashed rgba(125,169,202,.25);border-radius:9px;font-size:12px;line-height:1.55}
@media(max-width:800px){.top-songs-tabs{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;padding:0 0 7px;scrollbar-width:thin;scroll-snap-type:x proximity}.top-songs-tab{flex:0 0 auto;max-width:210px;white-space:nowrap;scroll-snap-align:start}.catalog-mood-filter{width:100%;justify-content:space-between}.catalog-mood-filter select{flex:1;max-width:none}.collection-cta-actions{width:100%;display:grid;grid-template-columns:1fr}.collection-cta-actions .btn{width:100%;min-width:0}.library-dialog{width:calc(100vw - 18px);max-height:90vh;padding:16px;border-radius:14px}}
@media(max-width:520px){.library-track-row{grid-template-columns:52px minmax(0,1fr);gap:9px}.library-track-row>img{width:52px;height:52px}.library-track-actions{grid-column:2;justify-content:flex-start}.track-card-title-row{gap:5px}.track-card-icon-actions{gap:3px}.track-icon-action{width:26px;height:26px;min-width:26px;font-size:13px}.track-mood-tags span{font-size:8px;padding:3px 5px}.top-songs-tab{font-size:10px;padding:7px 9px}}

/* V64 — center the complete hero unit beneath the XAOC MUSIC logo.
   QR/support card sits to the left; slogan, CTAs and the ordered social row sit together to the right. */
.hero-centered-content{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.hero-centered-content>.hero-choice-line{
  align-self:center;
  margin-left:auto;
  margin-right:auto;
}
.hero-centered-content .hero-logo-stage{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  margin:0 auto 8px;
}
.hero-centered-content h1.hero-logo-heading{
  width:clamp(300px,42vw,570px);
  max-width:100%;
  margin:0 auto;
}
.hero-centered-content .hero-logo{
  object-position:center center;
  max-height:300px;
}
.hero-centered-content .hero-brand-support-row.hero-centered-main-row{
  position:relative;
  display:grid;
  grid-template-columns:112px minmax(0,1fr);
  align-items:center;
  gap:clamp(14px,2vw,22px);
  width:min(100%,680px);
  margin:0 auto;
  transform:none;
}
.hero-centered-content .hero-centered-main-row>.hero-support-panel{
  position:relative!important;
  left:auto!important;
  top:auto!important;
  grid-column:1;
  grid-row:1;
  width:112px!important;
  max-width:112px;
  margin:0!important;
  padding:9px 8px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.hero-centered-content .hero-centered-main-row>.hero-support-panel .hero-support-qr-link{
  flex:0 0 94px;
  width:94px;
  height:94px;
}
.hero-centered-content .hero-centered-main-row>.hero-brand-copy{
  grid-column:2;
  grid-row:1;
  min-width:0;
  width:100%;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.hero-centered-content .hero-brand-copy .hero-tagline{
  align-self:stretch;
  margin:0 0 8px;
  padding:10px 12px 11px;
  text-align:center;
  border-left:3px solid #ff3653;
  border-radius:0 7px 7px 0;
}
.hero-centered-content .hero-brand-copy .hero-tagline:after{
  left:50%;
  transform:translateX(-50%);
}
.hero-centered-content .hero-brand-copy .hero-subtitle,
.hero-centered-content .hero-brand-copy .hero-voluntary{
  width:100%;
  padding-left:0;
  text-align:center;
  border-left:0;
  background:rgba(2,10,20,.24);
}
.hero-centered-content .hero-action-stack{
  width:max-content;
  max-width:100%;
  margin:15px auto 0;
}
.hero-centered-content .hero-buttons{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
  margin-top:0;
  width:100%;
}
.hero-centered-content .hero-buttons .btn{
  flex:0 1 auto;
  white-space:nowrap;
}
.hero-centered-content .social-row{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:11px;
  margin:18px 0 0;
}
.hero-centered-content .hero-scroll{
  align-self:center;
  display:flex;
  width:max-content;
  max-width:100%;
  justify-content:center;
  margin:32px auto 0;
  text-align:center;
  flex:0 0 auto;
  /* Align scroll prompt with the center social icon (VK), not the full QR+copy row. */
  transform:translateX(calc(56px + clamp(7px, 1vw, 11px)));
}
.hero-centered-content .hero-brand-copy>.hero-action-stack .social-row{
  display:flex;
  width:100%;
  justify-content:center;
  align-items:center;
  gap:11px;
}
.hero-centered-content .hero-brand-copy>.hero-action-stack .social-row .social{
  flex:0 0 34px;
}
@media(max-width:800px){
  .hero-centered-content .hero-logo-stage{margin-bottom:8px}
  .hero-centered-content h1.hero-logo-heading{width:min(100%,500px)}
  .hero-centered-content .hero-brand-support-row.hero-centered-main-row{
    grid-template-columns:minmax(0,1fr);
    gap:14px;
    width:min(100%,520px);
  }
  .hero-centered-content .hero-centered-main-row>.hero-brand-copy{
    grid-column:1;
    grid-row:1;
    align-items:center;
  }
  .hero-centered-content .hero-centered-main-row>.hero-support-panel{
    grid-column:1;
    grid-row:2;
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:center;
    width:min(100%,390px)!important;
    max-width:390px;
    margin:0 auto!important;
    padding:10px;
    gap:12px;
  }
  .hero-centered-content .hero-centered-main-row>.hero-support-panel .hero-support-qr-link{
    flex:0 0 84px;
    width:84px;
    height:84px;
  }
  .hero-centered-content .hero-centered-main-row>.hero-support-panel .hero-support-copy{
    align-items:flex-start;
    text-align:left;
  }
  .hero-centered-content .hero-centered-main-row>.hero-support-panel .hero-support-copy p{display:block}
  .hero-centered-content .hero-buttons .btn{white-space:normal}
  .hero-centered-content .hero-scroll{transform:none;margin-top:26px}
}
@media(max-width:430px){
  .hero-centered-content .hero-logo-stage{width:100%}
  .hero-centered-content h1.hero-logo-heading{width:min(100%,390px)}
  .hero-centered-content .hero-logo{max-height:215px}
  .hero-centered-content .hero-brand-copy .hero-tagline{font-size:14px;letter-spacing:.12em;line-height:1.5;padding:9px 10px}
  .hero-centered-content .hero-brand-copy .hero-subtitle{font-size:12px}
  .hero-centered-content .hero-brand-copy .hero-voluntary{font-size:11px}
  .hero-centered-content .hero-action-stack{width:100%;margin-top:13px}
  .hero-centered-content .hero-buttons{flex-direction:column;align-items:stretch;gap:9px}
  .hero-centered-content .hero-buttons .btn{width:100%;min-height:45px}
  .hero-centered-content .social-row{margin-top:15px;gap:12px}
  .hero-centered-content .hero-centered-main-row>.hero-support-panel{width:100%!important;max-width:100%;justify-content:flex-start}
  .hero-centered-content .hero-scroll{transform:none;margin-top:22px}
}


/* V66 — final hero layout measured from the user's approved screenshot.
   Do not resize/reposition the logo. Align the QR panel and copy row directly beneath it. */
.hero-centered-content{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.hero-centered-content > .hero-choice-line{
  align-self:center;
  margin-left:auto;
  margin-right:auto;
}
/* Keep the existing logo dimensions/asset. Only retain its normal centered stage. */
.hero-centered-content .hero-logo-stage{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-left:auto;
  margin-right:auto;
}
/*
  Reference geometry: the QR card protrudes slightly to the left of the logo's left edge,
  while the right edge of the copy/tagline finishes flush with the logo's right edge.
*/
.hero-centered-content .hero-brand-support-row.hero-centered-main-row{
  position:relative;
  display:grid !important;
  grid-template-columns:132px minmax(0,1fr) !important;
  align-items:start !important;
  gap:8px !important;
  width:min(100%,calc(clamp(300px,42vw,570px) + 36px)) !important;
  margin:0 auto !important;
  transform:translateX(-18px) !important;
}
.hero-centered-content .hero-centered-main-row > .hero-support-panel{
  position:relative !important;
  left:auto !important;
  top:auto !important;
  grid-column:1 !important;
  grid-row:1 !important;
  align-self:start !important;
  width:132px !important;
  min-width:132px !important;
  max-width:132px !important;
  margin:0 !important;
  padding:9px 8px;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
}
.hero-centered-content .hero-centered-main-row > .hero-support-panel .hero-support-qr-link{
  flex:0 0 96px !important;
  width:96px !important;
  height:96px !important;
  box-sizing:border-box;
  padding:4px;
}
.hero-centered-content .hero-centered-main-row > .hero-support-panel .hero-support-copy{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  width:100%;
  min-width:0;
  text-align:center;
}
.hero-centered-content .hero-centered-main-row > .hero-support-panel .hero-support-copy strong{
  font-size:10px;
  line-height:1.25;
}
.hero-centered-content .hero-centered-main-row > .hero-support-panel .hero-support-copy p{display:none !important;}
.hero-centered-content .hero-centered-main-row > .hero-support-panel .hero-support-link{
  width:100%;
  min-height:31px;
  padding:0 4px;
  box-sizing:border-box;
  font-size:9px;
  line-height:1.2;
  text-align:center;
}
.hero-centered-content .hero-centered-main-row > .hero-brand-copy{
  grid-column:2 !important;
  grid-row:1 !important;
  width:100%;
  min-width:0;
  align-self:start;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  text-align:center;
}
.hero-centered-content .hero-centered-main-row > .hero-brand-copy .hero-tagline{
  width:100%;
  box-sizing:border-box;
  align-self:stretch;
  margin:0 0 8px;
  padding:10px 9px 11px;
  text-align:center;
  font-size:clamp(14px,1.42vw,20px);
  line-height:1.38;
  letter-spacing:.22em;
  white-space:normal;
  overflow-wrap:normal;
  border-left:3px solid #ff3653;
  border-radius:0 7px 7px 0;
}
.hero-centered-content .hero-centered-main-row > .hero-brand-copy .hero-tagline:after{
  left:50%;
  transform:translateX(-50%);
}
.hero-centered-content .hero-centered-main-row > .hero-brand-copy .hero-subtitle,
.hero-centered-content .hero-centered-main-row > .hero-brand-copy .hero-voluntary{
  width:100%;
  box-sizing:border-box;
  padding-left:0;
  border-left:0;
  text-align:center;
  line-height:1.45;
}
.hero-centered-content .hero-centered-main-row > .hero-brand-copy .hero-subtitle{
  font-size:clamp(12px,.95vw,14px);
}
.hero-centered-content .hero-centered-main-row > .hero-brand-copy .hero-voluntary{
  margin-top:5px;
  font-size:clamp(11px,.85vw,13px);
}
/* Both main buttons fill the right-hand column evenly; social icons remain below them. */
.hero-centered-content .hero-brand-copy > .hero-action-stack{
  display:block;
  width:100% !important;
  max-width:100%;
  margin:15px 0 0 !important;
}
.hero-centered-content .hero-brand-copy > .hero-action-stack .hero-buttons{
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  align-items:stretch;
  justify-content:center;
  gap:10px;
  width:100%;
  margin:0;
}
.hero-centered-content .hero-brand-copy > .hero-action-stack .hero-buttons .btn{
  flex:1 1 0;
  min-width:0;
  min-height:48px;
  padding:0 8px;
  gap:7px;
  font-size:clamp(9px,.68vw,11px);
  letter-spacing:.025em;
  white-space:nowrap;
}
.hero-centered-content .hero-brand-copy > .hero-action-stack .social-row{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  gap:11px;
  margin:16px 0 0;
}
.hero-centered-content .hero-brand-copy > .hero-action-stack .social-row .social{
  flex:0 0 36px;
  width:36px;
  height:36px;
}
/* The prompt sits under the social row; their common center is the VK icon's center. */
.hero-centered-content .hero-brand-copy > .hero-scroll{
  display:flex;
  align-self:stretch;
  justify-content:center;
  align-items:center;
  width:100%;
  max-width:100%;
  margin:22px 0 0 !important;
  text-align:center;
  transform:none !important;
  position:relative;
  left:auto;
  box-sizing:border-box;
}
.hero-centered-content .hero-brand-copy > .hero-scroll > span:first-child{
  flex:0 0 auto;
}
.hero-centered-content .hero-brand-copy > .hero-scroll > span:last-child{
  text-align:center;
}

/* Tablet and mobile: preserve order, avoid crushing buttons or copy into narrow columns. */
@media (max-width:1100px){
  .hero-centered-content .hero-brand-support-row.hero-centered-main-row{
    display:flex !important;
    flex-direction:column;
    align-items:center;
    gap:13px !important;
    width:min(100%,560px) !important;
    margin:0 auto !important;
    transform:none !important;
  }
  .hero-centered-content .hero-centered-main-row > .hero-brand-copy{
    order:1;
    width:100%;
    align-items:stretch;
  }
  .hero-centered-content .hero-centered-main-row > .hero-support-panel{
    order:2;
    width:min(100%,390px) !important;
    min-width:0 !important;
    max-width:390px !important;
    margin:0 auto !important;
    padding:9px 10px;
    flex-direction:row;
    align-items:center;
    justify-content:center;
    gap:12px;
  }
  .hero-centered-content .hero-centered-main-row > .hero-support-panel .hero-support-qr-link{
    flex:0 0 84px !important;
    width:84px !important;
    height:84px !important;
  }
  .hero-centered-content .hero-centered-main-row > .hero-support-panel .hero-support-copy{
    align-items:flex-start;
    text-align:left;
  }
  .hero-centered-content .hero-centered-main-row > .hero-support-panel .hero-support-copy p{
    display:block !important;
    font-size:10px;
    line-height:1.35;
  }
  .hero-centered-content .hero-centered-main-row > .hero-support-panel .hero-support-link{
    width:auto;
    min-width:120px;
  }
  .hero-centered-content .hero-brand-copy > .hero-action-stack .hero-buttons .btn{
    font-size:clamp(10px,1.05vw,11px);
    padding:0 10px;
    white-space:normal;
  }
  .hero-centered-content .hero-brand-copy > .hero-scroll{margin-top:22px !important;}
}
@media (max-width:600px){
  .hero-centered-content .hero-logo-stage{width:100%;margin-bottom:7px;}
  .hero-centered-content .hero-centered-main-row > .hero-brand-copy .hero-tagline{
    font-size:14px;
    letter-spacing:.12em;
    line-height:1.5;
    padding:9px 10px;
  }
  .hero-centered-content .hero-centered-main-row > .hero-brand-copy .hero-subtitle{font-size:12px;}
  .hero-centered-content .hero-centered-main-row > .hero-brand-copy .hero-voluntary{font-size:11px;}
  .hero-centered-content .hero-brand-copy > .hero-action-stack{margin-top:13px !important;}
  .hero-centered-content .hero-brand-copy > .hero-action-stack .hero-buttons{
    flex-direction:column;
    align-items:stretch;
    gap:9px;
  }
  .hero-centered-content .hero-brand-copy > .hero-action-stack .hero-buttons .btn{
    width:100%;
    min-height:45px;
    font-size:11px;
  }
  .hero-centered-content .hero-brand-copy > .hero-action-stack .social-row{margin-top:15px;gap:12px;}
  .hero-centered-content .hero-centered-main-row > .hero-support-panel{
    width:min(100%,390px) !important;
    max-width:100% !important;
    justify-content:flex-start;
    gap:10px;
    padding:8px;
  }
  .hero-centered-content .hero-centered-main-row > .hero-support-panel .hero-support-qr-link{
    flex-basis:78px !important;
    width:78px !important;
    height:78px !important;
  }
  .hero-centered-content .hero-centered-main-row > .hero-support-panel .hero-support-copy p{font-size:9px;}
  .hero-centered-content .hero-brand-copy > .hero-scroll{
    margin-top:20px !important;
    white-space:normal;
  }
}

/* V67 — pre-migration navigation hardening for the longer agreed labels. */
/* At laptop widths, use the same non-overlapping menu as mobile; desktop nav remains unchanged above 1450px. */
@media (max-width: 1450px) and (min-width: 801px) {
  .site-header { gap: 18px; padding-inline: 22px; }
  .mobile-menu {
    display: flex; width: 35px; height: 35px; padding: 8px 5px;
    flex-direction: column; justify-content: space-around; border: 0;
    background: none; cursor: pointer; order: 0; flex: 0 0 auto;
  }
  .mobile-menu span { width: 23px; height: 2px; background: #eaf5ff; display: block; }
  .brand { order: 1; font-size: 23px; }
  .header-actions { margin-left: auto; order: 2; flex-shrink: 0; }
  .main-nav {
    display: none; position: absolute; top: 75px; left: 0; right: 0;
    padding: 8px 22px 18px; background: #050a12f7;
    border-bottom: 1px solid var(--line); align-items: stretch;
    flex-direction: column; gap: 0; max-height: calc(100vh - 82px);
    overflow-y: auto; z-index: 31;
  }
  .main-nav.open { display: flex; }
  .nav-link { height: 42px; font-size: 10px; border-bottom: 1px solid #172534; }
  .nav-link.active:after { left: auto; width: 3px; top: 10px; bottom: 10px; height: auto; }
}

/* V68 — modestly enlarge navigation typography while preserving spacing and responsive behavior. */
@media (min-width: 1451px) {
  .site-header { gap: 22px; }
  .main-nav { gap: clamp(9px, .85vw, 17px); min-width: 0; }
  .main-nav .nav-link { font-size: 12px; letter-spacing: .055em; }
}
@media (min-width: 801px) and (max-width: 1450px) {
  .main-nav .nav-link { font-size: 12px; letter-spacing: .04em; min-height: 44px; }
  .main-nav { padding-top: 10px; }
}
@media (max-width: 800px) {
  .main-nav .nav-link { font-size: 12px; letter-spacing: .04em; height: 44px; }
}

/* V69 — give the top-left XaocMusic wordmark a safe visual gap from navigation.
   Desktop only. The hero support QR card and hero layout are intentionally untouched. */
@media (min-width: 1451px) {
  .site-header > .brand {
    transform: translateX(-48px);
  }
}

/* V70 — reserve a clean gap between the support CTA and header quick actions.
   Desktop only: tighten navigation spacing slightly and move the support CTA left
   without changing the font size, logo, hero QR card, or mobile menu layout. */
@media (min-width: 1451px) {
  .main-nav {
    gap: clamp(8px, .55vw, 10px);
  }
  .main-nav .nav-link {
    letter-spacing: .04em;
  }
  .main-nav .nav-support-link {
    margin-right: 20px;
    padding-left: 8px !important;
    padding-right: 8px !important;
    letter-spacing: .025em;
  }
}

/* V71 — clean hero tagline approved by the user.
   Remove the vertical red edge and boxed background; keep only the centered red-blue glow underline. */
.hero-centered-content .hero-centered-main-row > .hero-brand-copy .hero-tagline {
  border: 0 !important;
  border-left: 0 !important;
  border-bottom: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 10px 0 16px !important;
}
.hero-centered-content .hero-centered-main-row > .hero-brand-copy .hero-tagline::after {
  content: "";
  position: absolute;
  left: 50% !important;
  right: auto;
  bottom: 1px;
  transform: translateX(-50%) !important;
  width: min(440px, 84%) !important;
  height: 2px !important;
  border: 0;
  border-radius: 4px;
  background: linear-gradient(90deg, transparent 0%, #ff3854 17%, #ff426b 30%, #6acaff 61%, #b04cff 78%, transparent 100%) !important;
  box-shadow: 0 0 10px rgba(84,194,255,.42), 0 0 12px rgba(255,56,84,.24) !important;
}
@media (max-width: 600px) {
  .hero-centered-content .hero-centered-main-row > .hero-brand-copy .hero-tagline {
    padding: 9px 0 14px !important;
  }
  .hero-centered-content .hero-centered-main-row > .hero-brand-copy .hero-tagline::after {
    width: min(340px, 82%) !important;
  }
}

/* V73: visually hidden contact-form honeypot, kept out of keyboard navigation. */
.contact-honeypot{position:absolute!important;left:-10000px!important;top:auto!important;width:1px!important;height:1px!important;overflow:hidden!important;opacity:0!important;pointer-events:none!important}

/* V74: VK Video uses the same responsive, click-to-load modal as YouTube. */
#vkVideoOverlay .youtube-dialog{width:min(940px,calc(100vw - 32px))}
#vkVideoFrame{background:#000}


/* PATCH 81 — secure OAuth entry buttons; provider buttons only appear when configured server-side. */
.auth-social-login{margin:17px 0 12px;padding-top:15px;border-top:1px solid rgba(89,132,168,.28)}
.auth-social-title{margin:0 0 10px;color:#bed0e2;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.auth-social-buttons{display:grid;grid-template-columns:1fr;gap:8px}
.auth-social-button{display:flex;align-items:center;justify-content:center;min-height:42px;padding:10px 12px;border:1px solid #385772;border-radius:7px;background:linear-gradient(125deg,#0a1b2b,#09121f);color:#eff7ff;text-align:center;text-decoration:none;font:800 11px var(--sans);transition:border-color .2s,background .2s,transform .2s}
.auth-social-button:hover{border-color:#6ab9e8;background:#10263b;transform:translateY(-1px)}
.auth-social-google{border-color:#486a8a}.auth-social-mailru{border-color:#476b9b}.auth-social-yandex{border-color:#933a47}
.auth-social-login .dialog-hint{margin:9px 0 0;line-height:1.5}
@media(min-width:430px){.auth-social-buttons{grid-template-columns:1fr}}