:root{--bg:#07040f;--panel:#0f0a1f;--line:#2a1b52;--violet:#a855f7;--purple:#7c3aed;--blue:#60a5fa;--text:#e9e3ff;--mute:#9a8fc4;
--glow:0 0 12px rgba(168,85,247,.55),0 0 36px rgba(124,58,237,.35);--px:'Press Start 2P',monospace;--body:'VT323',monospace}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{background:var(--bg);color:var(--text);font-family:var(--body);font-size:1.45rem;line-height:1.35;overflow-x:hidden;
background-image:radial-gradient(ellipse at 80% 0,rgba(124,58,237,.18),transparent 55%),radial-gradient(ellipse at 0 90%,rgba(96,165,250,.08),transparent 50%)}
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.06;
background:repeating-linear-gradient(0deg,#fff 0 1px,transparent 1px 4px)}
a{color:inherit}
.px{font-family:var(--px);font-weight:400;line-height:1.5}
.skip{position:absolute;left:-999px;top:8px;background:var(--violet);color:#000;padding:8px 12px;z-index:100}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
#particles{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
main,.nav,.foot{position:relative;z-index:1}

/* loader */
#loader{position:fixed;inset:0;z-index:999;background:var(--bg);display:grid;place-content:center;gap:22px;text-align:center;transition:opacity .6s,visibility .6s}
#loader.done{opacity:0;visibility:hidden}
#loader p{font-size:.8rem;color:var(--violet);text-shadow:var(--glow)}
.bar{width:min(300px,70vw);height:22px;border:3px solid var(--violet);padding:3px;box-shadow:var(--glow)}
.bar i{display:block;height:100%;width:0;background:repeating-linear-gradient(90deg,var(--violet) 0 10px,var(--bg) 10px 13px);transition:width .25s steps(8)}

/* cursor */
#cursor{position:fixed;width:18px;height:18px;z-index:998;pointer-events:none;border:2px solid var(--violet);background:rgba(168,85,247,.25);
box-shadow:var(--glow);transform:translate(-50%,-50%);transition:width .15s,height .15s,background .15s;display:none}
@media (hover:hover) and (pointer:fine){#cursor{display:block}}
#cursor.big{width:34px;height:34px;background:rgba(96,165,250,.2);border-color:var(--blue)}

/* nav */
.nav{position:sticky;top:0;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px clamp(16px,5vw,56px);
background:rgba(7,4,15,.8);backdrop-filter:blur(10px);border-bottom:2px solid var(--line)}
.logo{text-decoration:none;font-size:.9rem;color:var(--text)}.logo span{color:var(--violet);text-shadow:var(--glow)}
.nav nav{display:flex;gap:clamp(10px,2.4vw,28px)}
.nav nav a{text-decoration:none;color:var(--mute);transition:color .2s,text-shadow .2s}
.nav nav a:hover{color:var(--text);text-shadow:var(--glow)}
@media(max-width:560px){.nav nav a{font-size:1.15rem}.nav nav a:first-child{display:none}}

/* hero */
.hero{min-height:calc(100svh - 62px);display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:32px;padding:40px clamp(16px,5vw,72px)}
.tag{color:var(--blue);font-size:1.5rem;margin-bottom:14px}.tag b{color:var(--text);font-weight:400}
h1{font-size:clamp(1.25rem,4.6vw,3rem);color:var(--text);text-shadow:0 0 18px rgba(168,85,247,.8),3px 3px 0 var(--purple);word-break:break-word;margin-bottom:20px}
.glitch{position:relative}
.glitch::after{content:attr(data-text);position:absolute;left:0;top:0;color:var(--blue);opacity:0;clip-path:inset(0 0 60% 0);animation:glitch 5s infinite steps(1)}
@keyframes glitch{0%,92%,100%{opacity:0}93%{opacity:.7;transform:translate(3px,-1px)}95%{opacity:.7;transform:translate(-3px,1px);clip-path:inset(55% 0 0 0)}97%{opacity:0}}
.sub{font-size:clamp(1.3rem,2.6vw,1.8rem);color:var(--mute);max-width:30ch;margin-bottom:30px}
.cta{display:flex;flex-wrap:wrap;gap:16px}
.btn{font-family:var(--px);font-size:.75rem;text-decoration:none;color:#fff;background:var(--purple);border:3px solid var(--violet);padding:16px 22px;cursor:pointer;
box-shadow:var(--glow),inset -4px -4px 0 rgba(0,0,0,.35),inset 4px 4px 0 rgba(255,255,255,.18);transition:transform .15s,box-shadow .2s;display:inline-flex;gap:10px;justify-content:center;align-items:center}
.btn:hover{transform:translateY(-3px);box-shadow:0 0 22px var(--violet),0 0 56px rgba(124,58,237,.6),inset -4px -4px 0 rgba(0,0,0,.35),inset 4px 4px 0 rgba(255,255,255,.18)}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;color:var(--violet)}
.btn.full{width:100%}.btn:disabled{opacity:.7;cursor:progress}

/* nether-portal frame around the skin */
.portal{justify-self:center;width:min(100%,380px);aspect-ratio:3/4;padding:18px;background:#14092b;position:relative;
border:6px solid #1a1030;outline:3px solid var(--violet);box-shadow:var(--glow),inset 0 0 0 4px #0b0618}
.portal-inner{position:relative;width:100%;height:100%;display:grid;place-items:center;overflow:hidden;
background:conic-gradient(from 0deg,#3b0f7a,#a855f7,#2563eb,#6d28d9,#3b0f7a);animation:swirl 9s linear infinite}
.portal-inner::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(7,4,15,.5) 0 6px,transparent 6px 12px),radial-gradient(circle,transparent 20%,rgba(7,4,15,.75))}
@keyframes swirl{to{filter:hue-rotate(40deg) brightness(1.2)}}
#skin,#skinFlat,#skinSvg{position:relative;max-width:100%;max-height:100%;image-rendering:pixelated;filter:drop-shadow(0 10px 18px rgba(0,0,0,.7))}
#skinSvg{height:90%}
[hidden]{display:none!important}
@media(max-width:820px){.hero{grid-template-columns:1fr;text-align:center;padding-top:28px}.sub{margin-inline:auto}.cta{justify-content:center}.portal{order:-1;width:min(78%,300px)}}

/* sections */
.sec{max-width:1080px;margin:0 auto;padding:72px clamp(16px,5vw,32px) 24px}
.sec h2{font-size:clamp(1rem,2.6vw,1.45rem);margin-bottom:30px;color:var(--text);text-shadow:var(--glow);display:flex;align-items:center;gap:16px}
.sec h2::after{content:"";flex:1;height:4px;background:repeating-linear-gradient(90deg,var(--violet) 0 12px,transparent 12px 18px);opacity:.5}
.panel{background:var(--panel);border:3px solid var(--line);padding:26px;position:relative;transition:border-color .25s,box-shadow .25s}
.panel:hover{border-color:var(--violet);box-shadow:var(--glow)}
.about{display:grid;grid-template-columns:1.2fr 1fr;gap:22px}
.bio{font-size:1.75rem;line-height:1.3;border-left:8px solid var(--violet)}
.info{list-style:none;display:grid;gap:14px;font-size:1.6rem}
.info li::before{content:"▪ ";color:var(--violet)}
@media(max-width:760px){.about{grid-template-columns:1fr}}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px}
.grid.two{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.card{display:block;text-decoration:none;background:var(--panel);border:3px solid var(--line);padding:22px;transition:transform .2s,border-color .2s,box-shadow .2s;position:relative;overflow:hidden}
.card::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 40%,rgba(168,85,247,.22),transparent 60%);transform:translateX(-100%);transition:transform .6s}
.card:hover{transform:translateY(-5px);border-color:var(--violet);box-shadow:var(--glow)}
.card:hover::before{transform:translateX(100%)}
.card .ic{font-size:1.9rem}.card .k{color:var(--mute);margin-top:10px}.card .v{font-family:var(--px);font-size:.8rem;line-height:1.6;margin-top:6px;color:var(--text);word-break:break-word}
.card .x{color:var(--blue);margin-top:8px;word-break:break-all}

/* form */
.form{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:760px;margin:0 auto}
.field{display:grid;gap:6px}.field.full,.form .btn,.status{grid-column:1/-1}
label{color:var(--mute)}
input,textarea{font:inherit;font-size:1.5rem;color:var(--text);background:#080414;border:3px solid var(--line);padding:10px 12px;width:100%;transition:border-color .2s,box-shadow .2s;resize:vertical}
input:focus,textarea:focus{outline:none;border-color:var(--violet);box-shadow:var(--glow)}
.field.bad input,.field.bad textarea{border-color:#f87171}
.err{color:#f87171;min-height:1em}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.spin{width:16px;height:16px;border:3px solid #fff;border-top-color:transparent;animation:rot .7s steps(8) infinite}
@keyframes rot{to{transform:rotate(360deg)}}
.status{display:grid;gap:6px}.status p{padding:10px 14px;border:3px solid;animation:pop .3s}
.status .ok{border-color:#4ade80;color:#4ade80}.status .bad{border-color:#f87171;color:#f87171}.status .warn{border-color:#fbbf24;color:#fbbf24}
@keyframes pop{from{transform:scale(.96);opacity:0}}
@media(max-width:620px){.form{grid-template-columns:1fr}}

/* footer */
.foot{margin-top:70px;padding:40px 16px;text-align:center;border-top:3px solid var(--line);background:rgba(7,4,15,.85);display:grid;gap:10px}
.foot .px{font-size:.9rem;color:var(--violet);text-shadow:var(--glow)}
.foot .links{display:flex;gap:20px;justify-content:center}.foot .links a{color:var(--blue)}
.copy{color:var(--mute);font-size:1.15rem}

/* reveal */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s,transform .7s}.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.reveal{opacity:1;transform:none}}