:root{
	--accent: #7ee8fa; /* cyan-ish */
	--accent-2: #9a7eff; /* violet */
	--bg-1: #02040a;
	--bg-2: #050417;
	--glass: rgba(255,255,255,0.04);
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial}
body{
	background: radial-gradient(ellipse at bottom, var(--bg-2) 0%, #000 60%);
	color:#e6eef8;
	overflow-x:hidden;
}

/* canvas starfield sits behind content */
#starfield{
	position:fixed;inset:0;z-index:0;display:block;width:100%;height:100%;
}

.site-header{position:fixed;top:0;left:0;right:0;z-index:3;padding:18px 28px;background:linear-gradient(180deg, rgba(0,0,0,0.15), transparent)}
.nav{max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between}
.logo{color:var(--accent);text-decoration:none;font-weight:700;font-size:1.05rem}
.nav-links a{color:rgba(230,238,248,0.8);text-decoration:none;margin-left:18px}

.content{position:relative;z-index:2;max-width:1100px;margin:120px auto 60px;padding:0 20px}
.hero{min-height:70vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px}
.name{font-size:4rem;margin:0 0 10px;letter-spacing:1px;text-shadow:0 8px 40px rgba(0,0,0,0.85);color:transparent;background:linear-gradient(90deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text}
.tag{margin:0 0 18px;color:rgba(230,238,248,0.88);font-size:1.3rem}

.very{display:inline-block;transform-origin:center;animation:pop 1.3s infinite ease-in-out}
.very:nth-of-type(2){animation-delay:0.35s}
.tm{font-size:0.7rem;opacity:0.9;margin-left:6px}

.note{margin-top:18px;color:rgba(230,238,248,0.7);max-width:680px}

.progress{width:260px;height:10px;background:rgba(255,255,255,0.04);border-radius:999px;margin:18px auto 0;overflow:hidden;box-shadow:inset 0 1px 6px rgba(0,0,0,0.6)}
.progress .bar{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width 1s cubic-bezier(.2,.9,.2,1)}

@keyframes pop{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}

.panel{background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);padding:28px;border-radius:10px;margin:28px 0;box-shadow:0 8px 30px rgba(0,0,0,0.6)}
.panel.dimmed{opacity:0.06;pointer-events:none}

.site-footer{z-index:2;position:relative;text-align:center;padding:24px 8px;color:rgba(230,238,248,0.6)}

/* reduced motion support */
@media (prefers-reduced-motion:reduce){
	#starfield{opacity:0.9}
	.name{transition:none}
}

/* responsive tweaks */
@media (max-width:600px){
	.name{font-size:2.2rem}
	.nav{padding:0}
	.nav-links a{margin-left:12px}
}

/* small decorative accent for focused links */
a:focus{outline:2px dashed rgba(158,200,255,0.18);outline-offset:3px}