*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
    --bg:#070710;--surface:#0d0d1a;
    --b1:rgba(160,100,255,.12);--b2:rgba(160,100,255,.28);
    --text:#eeeaf8;--muted:#6a6480;
    --purple:#a064ff;--pdim:#6b3fbf;--pink:#ff4dc4;--cyan:#00e8d5;
}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:'Space Mono',monospace;font-size:12px;line-height:1.6;overflow-x:hidden}
body::after{content:'';position:fixed;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.03) 2px,rgba(0,0,0,.03) 4px);pointer-events:none;z-index:9998}
/* -- NAV -- */
nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:20px 50px;display:flex;justify-content:space-between;align-items:center;background:linear-gradient(180deg,rgba(7,7,16,.95),transparent);backdrop-filter:blur(12px)}
.logo-main{font-family:'Syne',sans-serif;font-weight:800;font-size:15px;letter-spacing:.2em;text-transform:uppercase;color:var(--purple);text-shadow:0 0 20px rgba(160,100,255,.6)}
.logo-sub{font-size:9px;letter-spacing:.15em;color:var(--muted);text-transform:uppercase}
nav ul{display:flex;gap:28px;list-style:none}
nav a{color:var(--muted);text-decoration:none;font-size:10px;letter-spacing:.2em;text-transform:uppercase;transition:color .2s}
nav a:hover{color:var(--purple)}
/* -- HERO -- */
.hero{position:relative;min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:120px 50px 80px;overflow:hidden}
.hero-bg{position:absolute;inset:0;background:radial-gradient(ellipse 60% 70% at 85% 40%,rgba(160,100,255,.13),transparent 65%),radial-gradient(ellipse 40% 40% at 15% 70%,rgba(255,77,196,.07),transparent 60%),linear-gradient(160deg,#070710,#0b0b1c)}
.scanlines{position:absolute;inset:0;overflow:hidden}
.scanlines span{position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--purple),transparent);opacity:0;animation:scan 8s linear infinite}
.scanlines span:nth-child(2){top:45%;animation-delay:3s}
.scanlines span:nth-child(3){top:75%;animation-delay:6s}
@keyframes scan{0%{opacity:0;transform:translateX(-100%)}10%{opacity:.35}90%{opacity:.35}100%{opacity:0;transform:translateX(100%)}}
.hero-tag{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--cyan);margin-bottom:22px;display:flex;align-items:center;gap:12px;animation:up .8s ease both}
.hero-tag::before{content:'';width:28px;height:1px;background:var(--cyan)}
.hero-jp{font-family:'Shippori Mincho',serif;font-size:clamp(15px,2.5vw,24px);color:rgba(160,100,255,.45);letter-spacing:.4em;margin-bottom:8px;animation:up .8s .1s ease both}
.hero-h1{font-family:'Syne',sans-serif;font-weight:800;font-size:clamp(60px,13vw,160px);line-height:.85;text-transform:uppercase;animation:up .8s .2s ease both}
.line1{display:block;color:var(--text)}
.line2{display:block;background:linear-gradient(90deg,var(--purple),var(--pink) 60%,var(--cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 0 28px rgba(160,100,255,.4))}
.hero-sub{font-size:11px;letter-spacing:.22em;color:var(--muted);text-transform:uppercase;margin-top:18px;animation:up .8s .3s ease both}
.hero-cta{margin-top:36px;display:flex;gap:14px;animation:up .8s .4s ease both}
@keyframes up{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
.btn-p{padding:12px 26px;background:var(--purple);border:none;color:#fff;font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;text-decoration:none;display:inline-block;transition:all .2s;clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));box-shadow:0 0 28px rgba(160,100,255,.3)}
.btn-p:hover{background:var(--pink);transform:translateY(-2px)}
.btn-s{padding:12px 26px;background:transparent;border:1px solid var(--b2);color:var(--muted);font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;text-decoration:none;display:inline-block;transition:all .2s;clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px))}
.btn-s:hover{border-color:var(--purple);color:var(--purple)}
/* -- CATALOG -- */
.catalog{padding:60px 50px 100px;max-width:1300px;margin:0 auto}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:38px}
.sec-title{font-family:'Syne',sans-serif;font-weight:800;font-size:34px;letter-spacing:.06em;text-transform:uppercase}
.sec-title span{color:var(--purple);text-shadow:0 0 18px rgba(160,100,255,.5)}
.sec-meta{font-size:10px;color:var(--muted);letter-spacing:.14em}
/* -- FILTERS -- */
.filters{display:flex;gap:6px;margin-bottom:38px;flex-wrap:wrap}
.fb{padding:5px 13px;border:1px solid var(--b1);background:transparent;color:var(--muted);font-family:'Space Mono',monospace;font-size:9px;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;transition:all .2s;clip-path:polygon(0 0,calc(100% - 5px) 0,100% 5px,100% 100%,5px 100%,0 calc(100% - 5px))}
.fb:hover,.fb.active{border-color:var(--purple);color:var(--purple);background:rgba(160,100,255,.06)}
/* -- PROJECT BLOCK -- */
.project-block{margin-bottom:60px}
.proj-head{display:flex;align-items:center;gap:14px;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--b1);flex-wrap:nowrap}
.proj-year{font-size:9px;color:var(--cyan);letter-spacing:.25em;text-transform:uppercase;min-width:34px}
.proj-name{font-family:'Syne',sans-serif;font-weight:700;font-size:17px;color:var(--text)}
.proj-tag{font-size:8px;letter-spacing:.14em;text-transform:uppercase;padding:3px 8px;border:1px solid var(--b1);color:var(--muted)}
.proj-tag.album{border-color:rgba(160,100,255,.3);color:var(--pdim)}
.proj-tag.ep{border-color:rgba(0,232,213,.3);color:var(--cyan);opacity:.7}
.proj-tag.single{border-color:rgba(255,77,196,.3);color:var(--pink);opacity:.7}
/* -- TRACK ROW -- */
.track-list{display:flex;flex-direction:column;gap:2px}
.track{display:grid;grid-template-columns:34px 1fr auto auto auto;align-items:center;gap:14px;padding:11px 13px;border:1px solid transparent;position:relative;cursor:pointer;transition:all .14s;overflow:hidden}
.track::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--purple);transform:scaleY(0);transition:transform .2s;box-shadow:0 0 8px var(--purple)}
.track:hover{border-color:var(--b1);background:rgba(160,100,255,.04)}.track:hover::before,.track.playing::before{transform:scaleY(1)}
.track.playing{border-color:rgba(160,100,255,.2);background:rgba(160,100,255,.07)}
.tnum{font-size:10px;color:var(--muted);text-align:center;font-variant-numeric:tabular-nums}
.pico{display:none;color:var(--purple);font-size:11px;text-align:center}
.track:hover .tnum,.track.playing .tnum{display:none}
.track:hover .pico,.track.playing .pico{display:block}
.tinfo{min-width:0}
.tname{font-family:'Syne',sans-serif;font-weight:600;font-size:13px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.track.playing .tname{color:var(--purple);text-shadow:0 0 14px rgba(160,100,255,.5)}
.tfeat{font-size:10px;color:var(--muted);font-style:italic}
.tdur{font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums;min-width:32px;text-align:right}
.tplays{font-size:9px;color:var(--muted);min-width:48px;text-align:right;display:none}
@media(min-width:700px){.tplays{display:block}}
.gbtn{padding:4px 11px;background:transparent;border:1px solid var(--b1);color:var(--muted);font-family:'Space Mono',monospace;font-size:9px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:all .2s;white-space:nowrap;clip-path:polygon(0 0,calc(100% - 4px) 0,100% 4px,100% 100%,4px 100%,0 calc(100% - 4px))}
.gbtn:hover{border-color:var(--purple);color:var(--purple);background:rgba(160,100,255,.1)}
/* -- MODAL -- */
.overlay{display:none;position:fixed;inset:0;background:rgba(4,4,12,.86);z-index:200;backdrop-filter:blur(12px);align-items:center;justify-content:center}
.overlay.open{display:flex}
.modal{background:var(--surface);border:1px solid var(--b2);padding:38px;width:90%;max-width:450px;position:relative;animation:min .2s ease;clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));box-shadow:0 0 50px rgba(160,100,255,.14)}
@keyframes min{from{transform:translateY(14px) scale(.98);opacity:0}to{transform:none;opacity:1}}
.mcls{position:absolute;top:13px;right:16px;background:none;border:none;color:var(--muted);font-size:15px;cursor:pointer;transition:color .2s}
.mcls:hover{color:var(--pink)}
.mey{font-size:9px;letter-spacing:.28em;text-transform:uppercase;color:var(--cyan);margin-bottom:7px}
.mname{font-family:'Syne',sans-serif;font-weight:800;font-size:26px;text-transform:uppercase;margin-bottom:3px;background:linear-gradient(90deg,var(--text),var(--purple));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.mproj{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:28px}
.mlbl{font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin-bottom:11px}
.amts{display:flex;gap:7px;margin-bottom:12px;flex-wrap:wrap}
.ab{padding:9px 16px;border:1px solid var(--b1);background:transparent;color:var(--muted);font-family:'Space Mono',monospace;font-size:13px;cursor:pointer;transition:all .2s;clip-path:polygon(0 0,calc(100% - 5px) 0,100% 5px,100% 100%,5px 100%,0 calc(100% - 5px))}
.ab:hover,.ab.sel{border-color:var(--purple);color:var(--purple);background:rgba(160,100,255,.1)}
.acustom{display:flex;align-items:center;gap:9px;margin-bottom:20px}
.adol{font-family:'Syne',sans-serif;font-weight:700;font-size:19px;color:var(--purple)}
.ainp{flex:1;background:rgba(160,100,255,.05);border:1px solid var(--b1);color:var(--text);font-family:'Space Mono',monospace;font-size:17px;padding:9px 13px;outline:none;transition:border-color .2s;clip-path:polygon(0 0,calc(100% - 5px) 0,100% 5px,100% 100%,5px 100%,0 calc(100% - 5px))}
.ainp:focus{border-color:var(--purple)}.ainp::placeholder{color:var(--muted)}
.mnote{font-size:10px;color:var(--muted);margin-bottom:20px;font-style:italic}
.paybtn{width:100%;padding:14px;background:linear-gradient(90deg,var(--purple),var(--pink));border:none;color:#fff;font-family:'Syne',sans-serif;font-weight:800;font-size:13px;letter-spacing:.15em;cursor:pointer;text-transform:uppercase;transition:all .2s;clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));box-shadow:0 4px 22px rgba(160,100,255,.28)}
.paybtn:hover{filter:brightness(1.14);transform:translateY(-2px)}
.freelink{display:block;text-align:center;margin-top:11px;font-size:10px;color:var(--muted);letter-spacing:.13em;cursor:pointer;text-decoration:underline;text-underline-offset:3px;transition:color .2s;text-transform:uppercase}
.freelink:hover{color:var(--cyan)}
/* -- PLAYER BAR -- */
.pbar{position:fixed;bottom:0;left:0;right:0;height:60px;background:rgba(7,7,16,.96);border-top:1px solid var(--b2);backdrop-filter:blur(22px);display:flex;align-items:center;padding:0 28px;gap:18px;z-index:150;transform:translateY(100%);transition:transform .34s cubic-bezier(.16,1,.3,1);box-shadow:0 -6px 36px rgba(160,100,255,.09)}
.pbar.on{transform:none}
.pdot{width:6px;height:6px;border-radius:50%;background:var(--purple);box-shadow:0 0 9px var(--purple);animation:pulse 1.5s ease-in-out infinite;flex-shrink:0}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.65)}}
.pinfo{flex:1;min-width:0}
.pname{font-family:'Syne',sans-serif;font-weight:700;font-size:12px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pproj{font-size:9px;color:var(--muted);letter-spacing:.13em;text-transform:uppercase}
.pctrl{display:flex;align-items:center;gap:13px}
.cb{background:none;border:none;color:var(--muted);cursor:pointer;font-size:13px;transition:color .2s;display:flex;align-items:center}
.cb:hover{color:var(--purple)}
.cb.pp{width:33px;height:33px;border:1px solid var(--b2);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px}
.cb.pp:hover{border-color:var(--purple);color:var(--purple)}
.pbuy{padding:5px 14px;border:1px solid var(--purple);background:transparent;color:var(--purple);font-family:'Space Mono',monospace;font-size:9px;letter-spacing:.13em;text-transform:uppercase;cursor:pointer;transition:all .2s;clip-path:polygon(0 0,calc(100% - 5px) 0,100% 5px,100% 100%,5px 100%,0 calc(100% - 5px))}
.pbuy:hover{background:var(--purple);color:#fff}
/* -- ABOUT -- */
.about{padding:76px 50px;max-width:1300px;margin:0 auto;border-top:1px solid var(--b1);display:grid;grid-template-columns:1.2fr 1fr;gap:76px;align-items:start}
.aey{font-size:9px;letter-spacing:.28em;text-transform:uppercase;color:var(--cyan);margin-bottom:14px}
.atitle{font-family:'Syne',sans-serif;font-weight:800;font-size:42px;text-transform:uppercase;line-height:1;margin-bottom:22px}
.atitle span{display:block;background:linear-gradient(90deg,var(--purple),var(--pink));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.atext{font-size:13px;color:var(--muted);line-height:1.8}
.atext p+p{margin-top:13px}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.stat{border:1px solid var(--b1);padding:19px;position:relative;clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px))}
.stat::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(160,100,255,.06),transparent 60%)}
.snum{font-family:'Syne',sans-serif;font-weight:800;font-size:38px;line-height:1;margin-bottom:5px;background:linear-gradient(90deg,var(--purple),var(--pink));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.slbl{font-size:9px;color:var(--muted);letter-spacing:.18em;text-transform:uppercase}
footer{padding:28px 50px;border-top:1px solid var(--b1);display:flex;justify-content:space-between;align-items:center}
.flogo{font-family:'Syne',sans-serif;font-weight:800;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--purple);opacity:.55}
.fcopy{font-size:9px;color:var(--muted);letter-spacing:.13em}
.toast{position:fixed;bottom:76px;left:50%;transform:translateX(-50%) translateY(18px);background:linear-gradient(90deg,var(--purple),var(--pink));color:#fff;padding:11px 22px;font-size:10px;letter-spacing:.13em;text-transform:uppercase;opacity:0;transition:all .3s;z-index:300;pointer-events:none;clip-path:polygon(0 0,calc(100% - 6px) 0,100% 6px,100% 100%,6px 100%,0 calc(100% - 6px))}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
/* -- PROJECT ARTWORK & STREAMING LINKS -- */
.proj-art-wrap{width:52px;height:52px;flex-shrink:0;overflow:hidden;border:1px solid var(--b1);background:var(--surface)}
.proj-art{width:100%;height:100%;object-fit:cover;display:block}
.proj-meta{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}
.proj-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.proj-links{display:flex;gap:6px;flex-wrap:wrap}
.plink{font-size:8px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);text-decoration:none;border:1px solid var(--b1);padding:3px 8px;transition:all .2s;white-space:nowrap;clip-path:polygon(0 0,calc(100% - 3px) 0,100% 3px,100% 100%,3px 100%,0 calc(100% - 3px))}
.plink:hover{color:var(--purple);border-color:var(--purple);background:rgba(160,100,255,.07)}
.plink.sc:hover{color:#ff5500;border-color:#ff5500}
.plink.sp:hover{color:#1db954;border-color:#1db954}
.plink.bc:hover{color:#1da0c3;border-color:#1da0c3}
/* -- PLAYER BAR SC BUTTON -- */
.psc-btn{font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:#ff5500;text-decoration:none;border:1px solid #ff5500;padding:4px 10px;transition:all .2s;white-space:nowrap;clip-path:polygon(0 0,calc(100% - 4px) 0,100% 4px,100% 100%,4px 100%,0 calc(100% - 4px))}
.psc-btn:hover{background:rgba(255,85,0,.12)}
/* -- MODAL SC LINK -- */
.msc-link{display:block;text-align:center;margin-top:8px;font-size:10px;color:#ff5500;letter-spacing:.13em;cursor:pointer;text-decoration:none;transition:opacity .2s;text-transform:uppercase}
.msc-link:hover{opacity:.7}
/* -- ABOUT SOCIAL LINKS -- */
.about-socials{display:flex;gap:8px;margin-top:22px;flex-wrap:wrap}
.soc-link{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);text-decoration:none;border:1px solid var(--b1);padding:6px 14px;transition:all .2s;clip-path:polygon(0 0,calc(100% - 5px) 0,100% 5px,100% 100%,5px 100%,0 calc(100% - 5px))}
.soc-link:hover{color:var(--purple);border-color:var(--purple);background:rgba(160,100,255,.07)}
.soc-link.sc:hover{color:#ff5500;border-color:#ff5500}
.soc-link.sp:hover{color:#1db954;border-color:#1db954}
.soc-link.bc:hover{color:#1da0c3;border-color:#1da0c3}
.soc-link.ig:hover{color:var(--pink);border-color:var(--pink)}
/* -- CONTACT SECTION -- */
.contact{padding:60px 50px 80px;border-top:1px solid var(--b1);max-width:1300px;margin:0 auto}
.contact-inner{max-width:560px}
.ctitle{font-family:'Syne',sans-serif;font-weight:800;font-size:34px;text-transform:uppercase;line-height:1;margin-bottom:16px}
.ctitle span{background:linear-gradient(90deg,var(--purple),var(--pink));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.ctext{font-size:12px;color:var(--muted);letter-spacing:.08em;margin-bottom:28px}
.c-links{display:flex;flex-direction:column;gap:10px}
.c-link{display:flex;align-items:center;gap:14px;font-size:12px;color:var(--muted);text-decoration:none;border:1px solid var(--b1);padding:14px 18px;transition:all .2s;clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px))}
.c-link:hover{color:var(--text);border-color:var(--purple);background:rgba(160,100,255,.05)}
.c-ico{font-size:15px;color:var(--purple);flex-shrink:0}
/* -- MOBILE -- */
@media(max-width:768px){
    nav{padding:15px 18px}
    nav ul{display:none}
    .hero{padding:96px 18px 56px}
    .hero-h1{font-size:clamp(48px,18vw,120px)}
    .catalog{padding:38px 18px 78px}
    .about{padding:56px 18px;grid-template-columns:1fr;gap:36px}
    .contact{padding:40px 18px 60px}
    footer{padding:22px 18px;flex-direction:column;gap:9px;text-align:center}
    .track{grid-template-columns:24px 1fr auto}
    .tdur{display:none}
    .pbar{padding:0 14px;gap:10px}
    .psc-btn{display:none!important}
    .proj-art-wrap{width:44px;height:44px}
    .proj-links{display:none}
    .about-socials{gap:6px}
    .c-link{font-size:11px;padding:12px 14px}
}