:root{--bg:#0b0618;--bg2:#160a2e;--pink:#ff2e97;--mag:#c21fd6;--cyan:#29e6ff;--gold:#ffc857;--text:#f4ecff;--muted:#b9a8d8;--card:#1d1040}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:70px}
body{margin:0;background:var(--bg);color:var(--text);font:400 1.05rem/1.65 Outfit,system-ui,sans-serif;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}a{color:var(--cyan)}
h1,h2{font-family:Monoton,sans-serif;font-weight:400;letter-spacing:.04em;line-height:1.15;margin:.2em 0 .5em}
h1{font-size:clamp(2.3rem,6.5vw,5rem);color:#fff;text-shadow:0 0 18px var(--pink),0 0 40px var(--mag)}
h2{font-size:clamp(1.6rem,4vw,2.6rem);color:#fff}
h3{margin:0;font-size:1.6rem}
.script{font:1.9rem Yellowtail,cursive;color:var(--gold);margin:0}
.muted{color:var(--muted)}.wrap{max-width:1180px;margin:auto;padding:0 20px}.narrow{max-width:760px}
.skip{position:absolute;left:-999px}.skip:focus{left:10px;top:10px;background:#fff;color:#000;padding:8px;z-index:99}
.nav{position:sticky;top:0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:10px 22px;background:rgba(11,6,24,.88);backdrop-filter:blur(8px);border-bottom:1px solid #ffffff14}
.brand{font:1.3rem Monoton,sans-serif;color:#fff;text-decoration:none}.brand span{color:var(--pink)}
nav a{color:var(--text);text-decoration:none;margin-left:22px;font-weight:600;font-size:.95rem;letter-spacing:.04em;text-transform:uppercase}
nav a:hover,nav a:focus-visible{color:var(--gold)}
.burger{display:none;background:none;border:0;padding:8px;cursor:pointer}.burger i{display:block;width:26px;height:3px;margin:5px 0;background:#fff;border-radius:2px}
.hero{position:relative;background:#120626}
.hero img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:68% center}
.hero-copy{padding:26px 20px 34px}
.lead{font-size:1.2rem;max-width:30ch}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.btn{display:inline-block;border:0;cursor:pointer;font:700 1rem Outfit,sans-serif;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;color:#fff;background:linear-gradient(90deg,var(--pink),var(--mag));padding:14px 26px;border-radius:50px;box-shadow:0 0 18px #ff2e9766;transition:transform .2s,box-shadow .2s}
.btn:hover,.btn:focus-visible{transform:translateY(-2px) scale(1.03);box-shadow:0 0 30px #ff2e97aa}
.btn.ghost{background:transparent;border:2px solid var(--cyan);color:var(--cyan);box-shadow:none}
.btn:disabled{opacity:.6;cursor:wait}
@media(min-width:760px){
 .hero{min-height:min(52vw,720px);display:flex;align-items:center}
 .hero img{position:absolute;inset:0;height:100%;aspect-ratio:auto;object-position:right center}
 .hero-copy{position:relative;padding:40px 5vw;width:min(46%,560px)}
}
.ticker{overflow:hidden;background:linear-gradient(90deg,var(--pink),var(--mag),#3a39e6);padding:9px 0;white-space:nowrap}
.ticker div{display:inline-block;animation:tick 40s linear infinite}
.ticker span{font:.95rem Monoton,sans-serif;letter-spacing:.12em;margin:0 26px;color:#fff}
.ticker span::after{content:"\2726";margin-left:52px;color:var(--gold)}
@keyframes tick{to{transform:translateX(-50%)}}
.sec{padding:78px 0;position:relative}
.story{background:radial-gradient(ellipse at top,#2c1260,var(--bg) 70%)}
.band{background:var(--bg2)}.music{background:linear-gradient(#0b0618,#25104f)}.videos{background:var(--bg2)}
.diaries{background:radial-gradient(ellipse at bottom,#3a0f55,var(--bg) 75%)}.family{background:var(--bg2)}.contact{background:linear-gradient(#0b0618,#25104f)}
.tag{font:1.6rem Yellowtail,cursive;color:var(--pink)}
.ball{position:absolute;top:0;right:7%;width:84px;height:84px;margin-top:40px;border:0;cursor:pointer;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#cdb5ff 35%,#4b2a96 75%),repeating-conic-gradient(#0003 0 8deg,#0000 0 16deg);background-blend-mode:multiply;box-shadow:0 0 30px #c9a8ff88;animation:spin 8s linear infinite}
.ball::before{content:"";position:absolute;left:50%;bottom:100%;width:2px;height:60px;background:#ffffff55}
@keyframes spin{50%{filter:hue-rotate(60deg) brightness(1.2)}}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px;margin-top:34px}
.card{background:var(--card);border-radius:18px;overflow:hidden;border:1px solid #ffffff14;transition:transform .3s,box-shadow .3s}
.card:hover{transform:translateY(-8px) rotate(-.6deg);box-shadow:0 16px 40px #ff2e9744}
.card>div{padding:18px 20px 24px}.role{color:var(--gold);font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:.8rem;margin:2px 0 10px}.card p{margin:0}.card .role{margin-bottom:10px}
.card img{aspect-ratio:2/3;object-fit:cover;width:100%}
.player,.album{background:#1d104099;border:1px solid #ffffff1f;border-radius:20px;padding:22px;margin-top:28px}
.empty{background:#1d104099;border:2px dashed #ffffff33;border-radius:20px;padding:34px;text-align:center;margin-top:28px}
.empty b{font:1.5rem Yellowtail,cursive;color:var(--gold);font-weight:400;display:block}
.album{display:flex;gap:20px;flex-wrap:wrap}.album img{width:170px;border-radius:12px}.album h3{font-size:1.5rem}
.pl-top{display:flex;gap:16px;align-items:center}.pl-top img{width:96px;height:96px;object-fit:cover;border-radius:12px;background:#000}
.pl-title{font-weight:700;font-size:1.25rem;margin:0}.pl-info p{margin:2px 0}
.status{color:var(--cyan);min-height:1.4em;margin:6px 0 0}.status.err{color:#ff7b9c}
.pl-bar,.pl-ctl{display:flex;align-items:center;gap:12px;margin-top:16px}
.pl-bar span{font-variant-numeric:tabular-nums;font-size:.85rem;min-width:40px}
input[type=range]{flex:1;accent-color:var(--pink);height:28px}
.pl-ctl button{background:#ffffff14;border:1px solid #ffffff26;color:#fff;width:46px;height:46px;border-radius:50%;font-size:1.1rem;cursor:pointer}
.pl-ctl .big{width:58px;height:58px;background:linear-gradient(135deg,var(--pink),var(--mag));border:0}
.pl-ctl #pl-vol{max-width:140px}
.pl-list{list-style:none;margin:18px 0 0;padding:0}.pl-list button{width:100%;text-align:left;background:none;border:0;border-top:1px solid #ffffff14;color:var(--text);font:inherit;padding:11px 6px;cursor:pointer}
.pl-list .on button{color:var(--gold);font-weight:700}
.vgrid,.dgrid,.fgrid{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-top:28px}
.yt{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#000}.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.dgrid figure{margin:0;background:var(--card);border-radius:16px;overflow:hidden}.dgrid img{aspect-ratio:16/10;object-fit:cover;width:100%}
.dgrid figcaption{padding:16px 18px}.dgrid h3{font-size:1.2rem;color:var(--gold);margin-bottom:4px}.dgrid p{margin:0}
.dgrid figure:nth-child(odd){transform:rotate(-1deg)}.dgrid figure:nth-child(even){transform:rotate(1deg)}
.fgrid a,.fgrid div{display:block;padding:22px;border-radius:16px;background:var(--card);border:1px solid #ffffff14;color:var(--text);text-decoration:none;transition:transform .2s,border-color .2s}
.fgrid a:hover{transform:translateY(-4px);border-color:var(--pink)}.fgrid h3{font-size:1.25rem;color:var(--pink)}.fgrid p{margin:6px 0 0}
form label{display:block;font-weight:600;margin-top:18px}
input,select,textarea{width:100%;margin-top:6px;padding:13px 14px;border-radius:12px;border:1px solid #ffffff33;background:#12082b;color:#fff;font:inherit}
input:focus,select:focus,textarea:focus,button:focus-visible,a:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}
input::placeholder,textarea::placeholder{color:#8f7db3}
.hp{position:absolute;left:-9999px}form .btn{margin-top:22px}
footer{text-align:center;padding:44px 20px;background:#07030f}footer .script{font-size:2.2rem;color:var(--pink)}
#toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,120px);background:var(--gold);color:#1a0b33;padding:12px 20px;border-radius:30px;font-weight:700;transition:transform .35s;z-index:99;max-width:90vw;text-align:center}
#toast.show{transform:translate(-50%,0)}
body.party{animation:party 4s ease}@keyframes party{50%{filter:hue-rotate(140deg) saturate(1.4)}}
@media(max-width:759px){
 .burger{display:block}
 nav{position:absolute;top:100%;left:0;right:0;background:#0b0618f2;display:none;flex-direction:column;padding:10px 22px 20px}
 nav.open{display:flex}nav a{margin:0;padding:12px 0;border-bottom:1px solid #ffffff14}
 .ball{width:56px;height:56px;right:5%}.pl-ctl{flex-wrap:wrap}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ---- revision 2 ---- */
h1{font-size:clamp(2.1rem,6vw,4.6rem)}
.btn.ghost{background:var(--cyan);color:#0b0618;border:2px solid var(--cyan);box-shadow:0 0 18px #29e6ff66}
.btn.ghost:hover,.btn.ghost:focus-visible{box-shadow:0 0 30px #29e6ffaa}
.center{text-align:center}
.cards{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:18px;background:linear-gradient(145deg,#2a0f5c,#12082b);border-radius:26px;border:1px solid #ff2e9755;box-shadow:0 0 40px #c21fd633}
.card{flex:0 0 min(72vw,250px);scroll-snap-align:start}
.card:hover{transform:translateY(-6px);box-shadow:0 12px 30px #ff2e9744}
.card>div{padding:14px 14px 18px}.card h3{font-size:1.3rem}.card p{font-size:.92rem;line-height:1.5}
@media(min-width:1000px){.cards{display:grid;grid-template-columns:repeat(5,1fr);overflow:visible}.card{flex:none}}
.merch{background:radial-gradient(ellipse at center,#4a1066,var(--bg) 72%)}
.soon{display:inline-block;font:1.3rem Monoton,sans-serif;letter-spacing:.14em;color:#fff;padding:10px 26px;border-radius:50px;background:linear-gradient(90deg,var(--pink),var(--mag),#3a39e6);box-shadow:0 0 28px #ff2e9788;margin:6px 0 16px}
.player{background:linear-gradient(145deg,#2a0f5c,#12082b 60%,#3a0f55);border:0;border-radius:28px;padding:26px;box-shadow:0 0 0 2px #ff2e9766,0 0 44px #c21fd666,inset 0 0 60px #29e6ff14}
.pl-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:14px}
.eq{display:flex;gap:4px;align-items:flex-end;height:34px}.eq i{width:5px;height:6px;border-radius:3px;background:linear-gradient(var(--cyan),var(--pink))}
.player.playing .eq i{animation:eq .8s ease-in-out infinite alternate}
.eq i:nth-child(2){animation-delay:-.2s!important}.eq i:nth-child(3){animation-delay:-.45s!important}.eq i:nth-child(4){animation-delay:-.1s!important}.eq i:nth-child(5){animation-delay:-.6s!important}.eq i:nth-child(6){animation-delay:-.3s!important}.eq i:nth-child(7){animation-delay:-.5s!important}
@keyframes eq{to{height:34px}}
.pl-top{align-items:center}.pl-top .pl-art{position:relative;flex:none;width:120px;height:120px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 4px #0b0618,0 0 0 6px var(--gold),0 0 30px #ff2e9788}
.pl-art img{width:100%;height:100%;object-fit:cover;border-radius:0}.pl-top .pl-art img{width:100%;height:100%}
.pl-art .mb{position:absolute;inset:0;background:radial-gradient(circle at 35% 30%,#fff,#cdb5ff 35%,#4b2a96 75%),repeating-conic-gradient(#0003 0 8deg,#0000 0 16deg);background-blend-mode:multiply}
.player.playing .pl-art{animation:spinr 7s linear infinite}@keyframes spinr{to{transform:rotate(360deg)}}
#pl-seek,#pl-vol{-webkit-appearance:none;appearance:none;height:8px;padding:0;margin:0;border:0;border-radius:8px;background:#ffffff22}
#pl-seek{background:linear-gradient(90deg,var(--pink),var(--cyan)) 0 0/var(--p,0%) 100% no-repeat,#ffffff22}
#pl-seek::-webkit-slider-thumb,#pl-vol::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;border:0;background:radial-gradient(circle at 35% 30%,#fff,var(--gold));box-shadow:0 0 12px var(--gold)}
#pl-seek::-moz-range-thumb,#pl-vol::-moz-range-thumb{width:20px;height:20px;border-radius:50%;border:0;background:radial-gradient(circle at 35% 30%,#fff,var(--gold));box-shadow:0 0 12px var(--gold)}
.pl-ctl .big{box-shadow:0 0 24px #ff2e97aa}
.player button:disabled,.player input:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}
