:root{--purple:#a865ff;--bright:#d7b6ff;--ink:#050508;--muted:#aaa4b2}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#030305;color:#f7f4fa;font-family:Inter,Segoe UI,Arial,sans-serif}
.screen{position:relative;width:100%;height:100%;min-height:480px;isolation:isolate;background:#030305;overflow:hidden}
.backdrop{position:absolute;left:-3%;top:-3%;width:106%;height:106%;z-index:0;display:block;object-fit:cover;object-position:center 39%;background:#17101f;animation:slowZoom 22s ease-in-out infinite alternate}
.screen:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(2,2,4,.96) 0%,rgba(3,3,7,.44) 35%,rgba(4,3,8,.15) 57%,rgba(2,2,4,.94) 100%),linear-gradient(0deg,rgba(12,5,19,.96) 0%,transparent 46%,rgba(0,0,0,.3) 100%)}
.screen:after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(circle at 50% 47%,transparent 10%,rgba(2,2,5,.22) 54%,rgba(1,1,3,.78) 100%),linear-gradient(115deg,transparent 45%,rgba(155,76,255,.08) 62%,transparent 77%)}
.topbar,.hero-copy,.progress-wrap,footer{z-index:3}
.topbar{position:absolute;top:clamp(25px,5vh,62px);left:clamp(30px,5.2vw,102px);right:clamp(30px,5.2vw,102px);display:flex;align-items:center;justify-content:space-between;font-size:clamp(10px,.75vw,14px);font-weight:800;letter-spacing:.34em}
.brand-mini{display:flex;align-items:center;gap:15px}.brand-logo{width:44px;height:44px;display:block;border-radius:50%;object-fit:cover;box-shadow:0 0 26px rgba(154,83,244,.35)}
.hero-copy{position:absolute;left:50%;top:48%;width:min(920px,78vw);transform:translate(-50%,-50%);text-align:center;text-shadow:0 9px 40px #000}.eyebrow{margin:0 0 16px;color:#c7c0cd;font-size:clamp(10px,.78vw,15px);font-weight:700;letter-spacing:.52em}
.hero-copy h1{margin:0;display:flex;flex-direction:column;align-items:center;font-size:clamp(46px,6.4vw,124px);font-weight:900;letter-spacing:.02em;line-height:.78}.hero-copy h1 .ash{color:#fff}.hero-copy h1 .extinction{margin-top:.2em;color:var(--purple);font-size:.48em;letter-spacing:.42em;text-indent:.42em;text-shadow:0 0 42px rgba(168,101,255,.42)}.subtitle{margin:34px 0 0;color:#d9d4dc;font-size:clamp(18px,2vw,40px);font-weight:300;letter-spacing:.36em}
.progress-wrap{position:absolute;left:50%;bottom:clamp(82px,11vh,124px);width:min(850px,56vw);transform:translateX(-50%)}.progress-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;color:#d9d4df;font-size:clamp(9px,.7vw,13px);font-weight:800;letter-spacing:.25em}.progress-meta b{color:#fff;font-size:14px}.progress{height:3px;background:rgba(255,255,255,.14);overflow:hidden}.progress div{height:100%;width:0;background:linear-gradient(90deg,#6e36ad,#cda3ff);box-shadow:0 0 18px var(--purple);transition:width .35s ease}.file{margin-top:15px;text-align:center;color:var(--purple);font-size:10px;font-weight:800;letter-spacing:.32em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
footer{position:absolute;left:clamp(30px,5.2vw,102px);right:clamp(30px,5.2vw,102px);bottom:clamp(22px,3.8vh,43px);display:flex;justify-content:flex-end;align-items:center;gap:12px}.discord{height:48px;padding:0 26px;display:flex;align-items:center;gap:12px;border:1px solid rgba(168,101,255,.72);border-radius:26px;color:#f8f4fb;background:rgba(12,9,17,.76);text-decoration:none;font-size:11px;font-weight:900;letter-spacing:.24em;transition:.2s}.discord:hover{background:#8d51d5;box-shadow:0 0 30px rgba(168,101,255,.36)}.music-toggle{height:40px;padding:0 16px;border:1px solid rgba(168,101,255,.4);border-radius:22px;color:rgba(255,255,255,.74);background:rgba(12,9,17,.72);font:800 10px/1 Inter,Segoe UI,Arial,sans-serif;letter-spacing:.18em;cursor:pointer;transition:.2s}.music-toggle:hover{color:#fff;border-color:rgba(168,101,255,.85);background:rgba(89,46,140,.65)}
@keyframes slowZoom{from{transform:scale(1)}to{transform:scale(1.045)}}
@media(max-width:900px){.subtitle{letter-spacing:.18em}.progress-wrap{width:72vw}.discord{padding:0 16px;letter-spacing:.1em}}
@media(max-height:650px){.hero-copy{top:44%}.progress-wrap{bottom:78px}.subtitle{margin-top:12px}.topbar{top:22px}footer{bottom:16px}.discord{height:42px}}