@font-face{
font-family:'Press Start 2P';
font-style:normal;
font-weight:400;
font-display:swap;
src:url('fonts/press-start-2p-latin.woff2') format('woff2');
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
font-family:'Press Start 2P';
font-style:normal;
font-weight:400;
font-display:swap;
src:url('fonts/press-start-2p-latin-ext.woff2') format('woff2');
unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
font-family:'VT323';
font-style:normal;
font-weight:400;
font-display:swap;
src:url('fonts/vt323-latin.woff2') format('woff2');
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
font-family:'VT323';
font-style:normal;
font-weight:400;
font-display:swap;
src:url('fonts/vt323-latin-ext.woff2') format('woff2');
unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root{
--bg-void:#0a0e27;
--bg-deep:#150a2e;
--neon-cyan:#00fff2;
--neon-magenta:#ff2ea6;
--neon-yellow:#ffe135;
--chrome:#c8d2e0;
--text:#e8ecf7;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
margin:0;
color:var(--text);
font-family:'VT323', monospace;
font-size:20px;
overflow-x:hidden;
background:
radial-gradient(ellipse 80% 50% at 50% 0%, rgba(0,255,242,0.07), transparent 70%),
linear-gradient(to bottom, #05061a 0%, var(--bg-void) 45%, var(--bg-deep) 100%);
background-attachment:fixed;
min-height:100vh;
}
body::before{
content:"";
position:fixed;
inset:0;
pointer-events:none;
z-index:9999;
background:repeating-linear-gradient(
to bottom,
rgba(0,0,0,0) 0px,
rgba(0,0,0,0) 2px,
rgba(0,0,0,0.07) 3px,
rgba(0,0,0,0) 4px
);
mix-blend-mode:overlay;
}
@media (prefers-reduced-motion: reduce){
*{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}
h1,h2, .pixel{
font-family:'Press Start 2P', monospace;
line-height:1.6;
}
a{color:var(--neon-cyan);}
a:hover, a:focus-visible{color:var(--neon-yellow);}
.skip-link{
position:absolute; left:-9999px; top:0; z-index:10000;
background:var(--neon-magenta); color:#000; padding:.6em 1em;
}
.skip-link:focus{left:1rem; top:1rem;}
:focus-visible{
outline:3px solid var(--neon-cyan);
outline-offset:3px;
}
header{
position:sticky; top:0; z-index:500;
display:flex; justify-content:space-between; align-items:center; gap:1rem;
padding:1rem 1.5rem;
background:linear-gradient(to bottom, rgba(10,14,39,0.95), rgba(10,14,39,0.7));
backdrop-filter:blur(6px);
border-bottom:1px solid rgba(0,255,242,0.25);
}
.brand{
font-family:'Press Start 2P', monospace;
font-size:.7rem;
line-height:1.7;
color:var(--neon-cyan);
text-shadow:0 0 8px rgba(0,255,242,0.7);
letter-spacing:1px;
text-decoration:none;
}
.brand span{color:var(--neon-magenta); text-shadow:0 0 8px rgba(255,46,166,0.7);}
nav a{
margin-left:1.5rem;
text-decoration:none;
font-size:1.15rem;
color:var(--chrome);
border-bottom:1px solid transparent;
white-space:nowrap;
}
nav a:hover, nav a:focus-visible{
color:var(--neon-yellow);
border-bottom:1px solid var(--neon-yellow);
}
@media (max-width:640px){
header{padding:.8rem 1rem;}
.brand{font-size:.55rem;}
nav a{margin-left:.8rem; font-size:1rem;}
}
main{
max-width:760px;
margin:0 auto;
padding:3.5rem 1.25rem 4rem;
}
.page-head{margin-bottom:3rem;}
.eyebrow{
font-family:'Press Start 2P', monospace;
font-size:.65rem;
color:var(--neon-magenta);
text-shadow:0 0 6px rgba(255,46,166,0.7);
margin:0 0 1rem;
letter-spacing:2px;
}
h1{
font-size:clamp(1.1rem, 4vw, 1.8rem);
margin:0;
color:#fff;
text-shadow:0 0 10px rgba(0,255,242,0.8), 0 0 24px rgba(255,46,166,0.45);
letter-spacing:1px;
}
.block{
background:#0c1030;
border:1px solid rgba(0,255,242,0.3);
border-radius:10px;
padding:1.6rem 1.6rem 1.8rem;
margin-bottom:1.5rem;
box-shadow:0 0 24px rgba(0,255,242,0.06);
}
.block h2{
font-size:.9rem;
margin:0 0 1.2rem;
color:var(--neon-yellow);
text-shadow:0 0 6px rgba(255,225,53,0.5);
}
.block h2 .prompt{color:var(--neon-magenta);}
p, li{
font-size:1.2rem;
line-height:1.55;
margin:0 0 1rem;
}
p:last-child, li:last-child{margin-bottom:0;}
ul{padding-left:1.4rem; margin:0 0 1rem;}
li{margin-bottom:.5rem;}
li::marker{color:var(--neon-cyan);}
address{
font-style:normal;
line-height:1.5;
color:var(--chrome);
}
dl{margin:0;}
dt{
color:var(--neon-cyan);
margin-top:1.1rem;
font-size:1.15rem;
}
dt:first-child{margin-top:0;}
dd{margin:.15rem 0 0; color:var(--chrome); font-size:1.2rem; line-height:1.5;}
.updated{
color:var(--chrome);
opacity:.75;
font-size:1.05rem;
margin-top:2rem;
}
footer{
text-align:center;
padding:2.5rem 1rem 3rem;
color:var(--chrome);
opacity:.75;
font-size:1.05rem;
border-top:1px solid rgba(0,255,242,0.15);
}
footer nav{margin-top:.7rem;}
footer nav a{margin:0 .6rem;}
footer .pixel{font-size:.6rem; display:block; margin-top:.9rem; color:var(--neon-yellow); opacity:.9;}