:root{--bg:#000;--bg2:#050505;--fg:#EAEAEA;--mid:#777;--lvl:0;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-behavior:smooth;scroll-padding-top:calc(76px + env(safe-area-inset-top,0px));background:var(--bg)}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;background:var(--bg);color:var(--fg);font:400 13px/1.6 'Space Mono',ui-monospace,Menlo,monospace;overflow-x:hidden;cursor:none}
@media(hover:none){body{cursor:auto}#cur{display:none}}
a{color:inherit;text-decoration:none;cursor:none}
.d{font-family:Anton,Impact,'Arial Narrow',sans-serif;text-transform:uppercase;line-height:.88;letter-spacing:-.01em;margin:0;font-weight:400}
#bg{position:fixed;inset:0;width:100%;height:100%;z-index:0;filter:contrast(1.25) brightness(.8)}
#fx{position:fixed;inset:0;width:100%;height:100%;z-index:50;pointer-events:none;mix-blend-mode:screen;opacity:.16}
.scan{position:fixed;inset:0;z-index:51;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0 1px,transparent 1px 3px);mix-blend-mode:multiply}
.vig{position:fixed;inset:0;z-index:49;pointer-events:none;background:radial-gradient(ellipse at center,transparent 40%,#000 115%)}
.flash{position:fixed;inset:0;z-index:52;pointer-events:none;background:#EAEAEA;opacity:calc(var(--lvl)*.05)}
#cur{position:fixed;left:0;top:0;width:22px;height:22px;border:1px solid #fff;z-index:100;pointer-events:none;mix-blend-mode:difference;background:#fff;transition:width .15s,height .15s,border-radius .15s;margin:-11px 0 0 -11px}
#cur.h{width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%}
/* nav */
#scroll-progress{position:fixed;inset:0 0 auto;height:2px;z-index:91;pointer-events:none;background:#ffffff18}
#scroll-progress span{display:block;width:100%;height:100%;background:linear-gradient(90deg,#f0003c,#eaeaea 55%,#00e5ff);transform:scaleX(0);transform-origin:left center}
nav{position:fixed;left:0;right:0;top:0;z-index:90;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:calc(14px + env(safe-area-inset-top,0px)) 22px 14px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;mix-blend-mode:difference}
nav .c{display:flex;gap:18px;align-items:center}
nav i{font-style:normal;color:var(--mid)}
nav button,nav a{background:none;border:0;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;padding:4px 0;cursor:none}
nav a:hover,nav button:hover{animation:jit .25s steps(2) infinite}
.nav-tools{display:flex;align-items:center;gap:20px}
.profile-menu{position:relative}
.profile-trigger{display:flex;align-items:center;gap:8px;white-space:nowrap}
.profile-trigger sup{font-size:.65em}
.profile-glyph{display:flex;align-items:center;gap:2px;height:15px;transform:skewX(-18deg)}
.profile-glyph i{display:block;width:3px;height:8px;background:currentColor;animation:glyph-signal 1.8s steps(2,end) infinite}
.profile-glyph i:nth-child(2){height:14px;animation-delay:.2s}
.profile-glyph i:nth-child(3){height:5px;animation-delay:.4s}
.profile-pulse,.profile-status>span{width:6px;height:6px;flex:none;border-radius:50%;background:#c9ff4a;box-shadow:0 0 8px #c9ff4a;animation:status-pulse 2s ease-in-out infinite}
@keyframes glyph-signal{50%{transform:translateY(3px);opacity:.45}}
@keyframes status-pulse{50%{opacity:.45;box-shadow:0 0 2px #c9ff4a}}
nav.profile-open{mix-blend-mode:normal}
nav.profile-open .c,nav.profile-open #snd{mix-blend-mode:difference}
.profile-panel{position:absolute;top:calc(100% + 13px);right:0;z-index:2;width:380px;max-width:calc(100vw - 24px);min-height:0;padding:20px;background:rgba(0,0,0,.96);border:1px solid #474747;color:var(--fg);mix-blend-mode:normal;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 18px 55px #000b;text-transform:none;letter-spacing:normal;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-9px) scale(.985);transform-origin:top right;transition:opacity .2s ease,transform .24s cubic-bezier(.2,.8,.2,1),visibility 0s linear .24s}
.profile-menu.is-open .profile-panel{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0) scale(1);transition-delay:0s}
.profile-panel::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.14;background-image:repeating-radial-gradient(circle at 17% 23%,#fff 0 .45px,transparent .7px 4px),repeating-linear-gradient(0deg,transparent 0 3px,#aaa 4px,transparent 5px 8px);background-size:7px 9px,100% 8px}
.profile-panel::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;background:linear-gradient(transparent 27%,#00e5ff55 28% 30%,transparent 31% 68%,#f0003c55 69% 71%,transparent 72%)}
.profile-menu.is-open .profile-panel::after{animation:profile-boot .42s steps(2,end) both}
@keyframes profile-boot{0%{opacity:.7;transform:translateX(-5px)}45%{opacity:.5;transform:translateX(4px)}100%{opacity:0;transform:translateX(0)}}
.profile-panel>*{position:relative;z-index:1}
.profile-head,.profile-foot{display:flex;justify-content:space-between;gap:12px;color:#777;font:9px/1.5 'Space Mono',monospace;letter-spacing:.12em}
.profile-coordinate{color:#555}
.profile-name{margin:23px 0 9px;font-size:clamp(42px,11vw,62px);line-height:.9;letter-spacing:-.03em}
.profile-manifesto{margin:0;color:#ddd;font:11px/1.55 'Space Mono',monospace;letter-spacing:.14em}
.profile-roles{margin:14px 0 18px;color:#888;font:10px/1.8 'Space Mono',monospace}
.profile-status{display:flex;align-items:center;gap:9px;padding:11px 0;border-top:1px solid #292929;border-bottom:1px solid #292929;color:#c9ff4a;font:9px/1.4 'Space Mono',monospace;letter-spacing:.14em}
.profile-socials{display:grid;gap:7px;padding:13px 0}
.profile-social{display:flex;align-items:center;gap:12px;min-width:0;padding:10px 9px;border:1px solid #292929;background:#050505;color:#ddd;transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease}
.profile-panel a:hover{animation:none}
.profile-social:hover,.profile-social:focus-visible{transform:translateX(4px);border-color:#777;background:#0d0d0d;box-shadow:-3px 0 #f0003c,3px 0 #00e5ff,0 0 18px #fff1}
.profile-social-icon{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:filter .15s,transform .15s}
.discord-icon{fill:currentColor;stroke:none}
.icon-dot{fill:currentColor;stroke:none}
.profile-social:hover .profile-social-icon,.profile-social:focus-visible .profile-social-icon{animation:social-icon-glitch .28s steps(2,end) infinite}
@keyframes social-icon-glitch{50%{transform:translateX(2px) skewX(-8deg);filter:drop-shadow(-2px 0 #f0003c) drop-shadow(2px 0 #00e5ff)}}
.profile-social-copy{display:grid;gap:5px;min-width:0}
.profile-social-copy strong{font:11px/1 'Space Mono',monospace;letter-spacing:.15em}
.profile-social-copy small{overflow-wrap:anywhere;color:#777;font:9px/1.3 'Space Mono',monospace;letter-spacing:.06em}
.profile-social:hover .profile-social-copy strong{animation:text-flicker .35s steps(2,end) infinite}
@keyframes text-flicker{50%{opacity:.45;text-shadow:2px 0 #00e5ff,-2px 0 #f0003c}}
.profile-arrow{margin-left:auto;color:#777;font-size:16px}
.profile-foot{padding-top:10px;border-top:1px solid #292929;font-size:8px}
#back-to-top{position:fixed;left:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:92;display:flex;align-items:center;gap:8px;padding:9px 11px;border:1px solid #555;background:rgba(0,0,0,.78);color:var(--fg);font:10px 'Space Mono',monospace;letter-spacing:.16em;cursor:none;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s,transform .2s,visibility .2s}
#back-to-top span{font-size:15px;line-height:.7}
#back-to-top.is-visible{opacity:1;visibility:visible;transform:translateY(0)}
#back-to-top:hover{border-color:var(--fg);animation:jit .25s steps(2) infinite}
@keyframes jit{0%{transform:translate(2px,0);text-shadow:-2px 0 #f00,2px 0 #0ff}50%{transform:translate(-2px,1px);text-shadow:2px 0 #f00,-2px 0 #0ff}100%{transform:none}}
@media(max-width:720px){html{scroll-padding-top:calc(116px + env(safe-area-inset-top,0px))}nav{display:flex;flex-wrap:wrap;gap:0 12px;padding:calc(6px + env(safe-area-inset-top,0px)) 12px 8px;background:rgba(0,0,0,.65);mix-blend-mode:normal;font-size:9px;letter-spacing:.1em}nav .c{order:2;flex-basis:100%;justify-content:space-between;gap:8px}.nav-tools{order:1;flex-basis:100%;gap:12px}.nav-tools #snd{margin-left:auto}nav .c a,nav button{display:flex;align-items:center;min-height:44px}nav button{padding:8px}nav .co,nav i{display:none}.profile-panel{top:calc(100% + 7px);padding:17px}.profile-name{margin-top:19px}#back-to-top{left:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px))}}
/* sections */
main{position:relative;z-index:10}
section{position:relative;min-height:100vh;padding:120px 22px 80px}
#hero{display:flex;flex-direction:column;justify-content:flex-end;min-height:100svh}
.big{font-size:clamp(76px,24vw,420px);line-height:.8}
.g{position:relative;display:inline-block}
.g::before,.g::after{content:attr(data-t);position:absolute;left:0;top:0;width:100%;overflow:hidden;pointer-events:none}
.g::before{color:#f0003c;mix-blend-mode:screen;transform:translate(calc(var(--lvl)*-10px - 3px),0);clip-path:inset(0 0 55% 0);animation:gl 3.1s steps(1) infinite}
.g::after{color:#00e5ff;mix-blend-mode:screen;transform:translate(calc(var(--lvl)*10px + 3px),0);clip-path:inset(50% 0 0 0);animation:gl 2.3s steps(1) infinite reverse}
@keyframes gl{0%{clip-path:inset(0 0 80% 0)}10%{clip-path:inset(40% 0 30% 0)}20%{clip-path:inset(70% 0 5% 0)}30%{clip-path:inset(10% 0 60% 0)}40%{clip-path:inset(0 0 0 0);opacity:.2}50%{clip-path:inset(55% 0 20% 0);opacity:1}70%{clip-path:inset(20% 0 50% 0)}85%{clip-path:inset(80% 0 0 0)}100%{clip-path:inset(30% 0 40% 0)}}
.g:hover::before{transform:translate(-14px,2px)}.g:hover::after{transform:translate(14px,-2px)}
.rev{animation:rev 1.6s steps(1) 1 both}
@keyframes rev{0%,8%{opacity:0}10%{opacity:1;transform:skewX(30deg) translateX(-40px)}14%{opacity:0}18%{opacity:1;transform:skewX(-20deg) translateX(30px)}24%{opacity:.2}30%{opacity:1;transform:none}40%{opacity:.4}46%,100%{opacity:1;transform:none}}
.stack{font-size:clamp(20px,3.6vw,52px);line-height:1;margin:28px 0 18px;max-width:18ch}
.lede{max-width:52ch;color:var(--fg)}
.tiny{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--mid)}
.row{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:34px;align-items:flex-end}
.tag{font-size:clamp(15px,2.2vw,30px)}
#gate{position:fixed;inset:0;z-index:95;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px;text-align:center;backdrop-filter:blur(3px)}
#gate button{font:inherit;background:transparent;color:var(--fg);border:1px solid var(--fg);padding:20px 38px;font-size:clamp(28px,6vw,64px);font-family:Anton,Impact,sans-serif;letter-spacing:.04em;text-transform:uppercase;cursor:none;position:relative}
#gate button:hover{background:var(--fg);color:#000;animation:jit .3s steps(2) infinite}
.gate-slogan{color:#f0003c;font:700 clamp(10px,2vw,14px)/1.4 'Space Mono',monospace;letter-spacing:.16em;text-shadow:2px 0 #00e5ff55;max-width:90vw}
#gate.off{display:none}
/* vision */
#vision{background:linear-gradient(#0000,#050505 18%,#050505 82%,#0000)}
.mani{max-width:62ch;margin:0 0 0 auto;font-size:15px}
.mani p{margin:0 0 1.4em}
.w{display:inline-block;transition:transform .2s}
.w.x{animation:wj .35s steps(3) 1}
@keyframes wj{0%{transform:translate(-5px,2px) skewX(12deg);text-shadow:4px 0 #f0003c,-4px 0 #00e5ff}50%{transform:translate(6px,-3px);opacity:.3}100%{transform:none}}
.huge{font-size:clamp(54px,15vw,250px);margin:60px 0}
.huge span{display:block;transform:translateX(var(--sx,0));transition:transform .1s linear}
.huge span:nth-child(2){color:transparent;-webkit-text-stroke:1px var(--fg)}
.huge span:nth-child(3){color:var(--mid)}
/* strip */
.strip{display:flex;justify-content:center;gap:18px;overflow-x:auto;padding:30px 0 20px;scroll-snap-type:x mandatory}
.strip div{flex:0 0 min(30vw,420px);aspect-ratio:4/5;scroll-snap-align:center;position:relative;overflow:hidden;border:1px solid #222;background:#0a0a0a}
.strip canvas{width:100%;height:100%;display:block;filter:grayscale(1) contrast(1.6);transition:filter .2s,transform .4s}
.strip div:hover canvas{filter:grayscale(1) contrast(2.4) hue-rotate(40deg) blur(.5px);transform:scale(1.06) skewX(-2deg)}
.strip span{position:absolute;left:10px;bottom:8px;mix-blend-mode:difference}
/* contact */
#contact{display:flex;flex-direction:column;justify-content:center}
.soc{display:block;font-size:clamp(60px,17vw,300px);margin:6px 0}
.soc:hover{animation:jit .22s steps(2) infinite;color:#fff}
.soc small{font:10px 'Space Mono',monospace;letter-spacing:.2em;vertical-align:top;color:var(--mid);margin-left:8px}
.soc-mark{display:inline-block;width:.19em;height:.19em;margin:0 .12em .025em 0;vertical-align:baseline;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;overflow:visible;animation:mark-glitch 5s steps(1,end) infinite}
.discord-mark{animation-delay:-2.5s}
.mark-dot{fill:currentColor;stroke:none}
.discord-face{stroke-width:3.5}
@keyframes mark-glitch{
 0%,87%,100%{clip-path:inset(0);transform:translate(0);filter:none}
 88%{clip-path:inset(8% 0 65%);transform:translate(-3px);filter:drop-shadow(3px 0 #00e5ff)}
 89%{clip-path:inset(52% 0 18%);transform:translate(3px);filter:drop-shadow(-3px 0 #f0003c)}
 90%{clip-path:inset(0);transform:translate(0);filter:none}
}
#contact .contact-title{font-size:clamp(50px,13vw,220px)}
footer{position:relative;z-index:10;padding:60px 22px calc(40px + env(safe-area-inset-bottom,0px));border-top:1px solid #222;background:#000}
/* sound dock */
#dock{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:92;display:flex;gap:10px;align-items:center;padding:8px 12px;border:1px solid #333;background:rgba(0,0,0,.7);font-size:10px;letter-spacing:.18em;text-transform:uppercase}
#viz{width:110px;height:34px}
#vol{width:70px;accent-color:#EAEAEA;cursor:none}
@media(max-width:720px){#viz{width:60px}#vol{width:50px}}
:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}
#vid{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;filter:grayscale(1) contrast(1.3) brightness(.55)}
body.has-video #bg{opacity:.25;mix-blend-mode:screen}
.strip img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.6);transition:filter .2s,transform .4s;animation:image-glitch 6s steps(1,end) infinite}
.strip div:hover img{filter:grayscale(1) contrast(2.4) hue-rotate(40deg);transform:scale(1.06) skewX(-2deg)}
.strip div:nth-child(2) img{animation-delay:-2s}
.strip div:nth-child(3) img{animation-delay:-4s}
@keyframes image-glitch{
 0%,87%,100%{clip-path:inset(0);translate:0}
 88%{clip-path:inset(12% 0 72%);translate:-5px 0}
 89%{clip-path:inset(54% 0 24%);translate:5px 0}
 90%{clip-path:inset(0);translate:0}
}
@media(max-width:720px){
 section{padding:104px 16px 72px}
 #hero{padding-bottom:104px}
 .big{font-size:clamp(64px,21vw,180px)}
 .huge{font-size:clamp(42px,12vw,86px);overflow-wrap:anywhere}
 .mani{font-size:14px}
 .strip{justify-content:flex-start;gap:12px;overscroll-behavior-x:contain}
 .strip div{flex-basis:min(82vw,360px)}
 #contact .contact-title{font-size:clamp(38px,11vw,80px)}
 #contact .soc{font-size:clamp(48px,15vw,86px)}
 #dock{right:12px;bottom:calc(10px + env(safe-area-inset-bottom,0px));gap:8px;padding:6px 10px}
 #viz{width:64px;height:30px}
 #vol{width:76px;height:44px}
 footer{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
}