@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

:root{
  --bg:#1d1633; --bg2:#120d20; --panel:#31214f; --panel2:#46306d; --panel3:#24183d;
  --text:#f6f1ff; --muted:#d4c8f2; --accent:#8de0ff; --accent2:#ffd86e; --accent3:#9cff9c;
  --danger:#ff8ea1; --border:#09060f; --shadow:#000;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:'Press Start 2P',monospace;background:var(--bg);color:var(--text);
  image-rendering:pixelated;line-height:1.8;position:relative;
}
body::before{
  content:"";position:fixed;inset:0;
  background:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
             linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px),
             linear-gradient(180deg,rgba(16,10,28,.35),rgba(0,0,0,.2));
  background-size:4px 4px,4px 4px,auto;pointer-events:none;z-index:-2;
}
body::after{
  content:"";position:fixed;inset:0;
  background:radial-gradient(circle at 20% 10%, rgba(141,224,255,.10), transparent 18%),
             radial-gradient(circle at 80% 20%, rgba(255,216,110,.08), transparent 20%),
             radial-gradient(circle at 50% 100%, rgba(156,255,156,.06), transparent 25%);
  pointer-events:none;z-index:-1;
}
a{color:inherit;text-decoration:none}
.container{width:min(1100px,92%);margin:0 auto}
.site-header{
  position:sticky;top:0;z-index:100;background:var(--bg2);
  border-bottom:4px solid var(--border);box-shadow:0 4px 0 var(--shadow);
}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 0}
.logo{display:inline-flex;align-items:center;gap:10px;font-size:14px;color:var(--accent2);text-shadow:2px 2px 0 var(--border)}
.logo-badge{width:18px;height:18px;background:var(--accent);border:3px solid var(--border);box-shadow:3px 3px 0 var(--shadow)}
.nav-links{display:flex;flex-wrap:wrap;gap:10px}
.nav-links a{
  display:inline-block;font-size:10px;padding:12px 14px;background:var(--panel);
  border:4px solid var(--border);box-shadow:4px 4px 0 var(--shadow);text-transform:uppercase;transition:transform .08s linear;
}
.nav-links a:hover,.nav-links a.active{background:var(--accent);color:#120d20;transform:translate(-1px,-1px)}
main{padding:34px 0 50px}
.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:20px;margin-bottom:26px}
.card{
  background:var(--panel);border:4px solid var(--border);box-shadow:6px 6px 0 var(--shadow);position:relative;
}
.card::before{
  content:"";display:block;height:10px;
  background:repeating-linear-gradient(90deg,var(--accent) 0 10px,var(--accent2) 10px 20px,var(--accent3) 20px 30px,var(--danger) 30px 40px);
  border-bottom:4px solid var(--border);
}
.hero-copy,.hero-panel,.feature-card,.project-card,.about-card,.form-card,.chat-card,.thought-card{padding:18px}
.kicker{
  display:inline-block;margin-bottom:16px;background:var(--bg2);border:4px solid var(--border);
  box-shadow:4px 4px 0 var(--shadow);padding:10px 12px;color:var(--accent2);font-size:10px;text-transform:uppercase;
}
h1,h2,h3{margin:0 0 16px;text-transform:uppercase;line-height:1.55}
h1{font-size:24px} h2{font-size:18px} h3{font-size:12px}
p{margin:0 0 14px;color:var(--muted);font-size:10px}
.small{font-size:8px;color:var(--muted)}
.button-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.btn{
  display:inline-block;padding:12px 14px;border:4px solid var(--border);background:var(--panel2);
  box-shadow:4px 4px 0 var(--shadow);font-size:10px;text-transform:uppercase;
}
.btn:hover{transform:translate(-1px,-1px)}
.btn-primary{background:var(--accent);color:#120d20}
.panel-stack,.list-area{display:grid;gap:12px}
.mini-panel,.post{
  background:var(--panel3);border:4px solid var(--border);box-shadow:4px 4px 0 var(--shadow);padding:14px;
}
.mini-panel strong{display:block;margin-bottom:10px;font-size:10px;color:var(--accent2);text-transform:uppercase}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.tag{
  display:inline-block;margin-bottom:14px;padding:8px 10px;font-size:8px;background:var(--bg2);
  color:var(--accent);border:4px solid var(--border);box-shadow:4px 4px 0 var(--shadow);text-transform:uppercase;
}
ul.clean{list-style:none;padding:0;margin:0}
ul.clean li{padding:12px 0;border-bottom:4px dashed rgba(255,255,255,.08);font-size:10px;color:var(--muted)}
ul.clean li:last-child{border-bottom:none}
.notice{
  background:#2b1b35;color:#ffdfe4;border:4px solid var(--border);box-shadow:6px 6px 0 var(--shadow);
  padding:16px;font-size:9px;margin-bottom:18px;
}
label{display:block;margin-bottom:8px;font-size:10px;color:var(--accent2);text-transform:uppercase}
input,textarea{
  width:100%;margin:0 0 14px;padding:14px;border:4px solid var(--border);box-shadow:4px 4px 0 var(--shadow);
  background:#170f28;color:var(--text);font:inherit;font-size:10px;line-height:1.8;outline:none;
}
textarea{min-height:150px;resize:vertical}
.post .meta{margin-bottom:10px;font-size:8px;color:var(--accent3);text-transform:uppercase}
.site-footer{
  margin-top:18px;padding:28px 0 40px;border-top:4px solid var(--border);background:var(--bg2);
  font-size:8px;color:var(--muted);text-align:center;
}
.pixel-banner{
  margin-bottom:18px;padding:16px;background:var(--panel2);border:4px solid var(--border);box-shadow:6px 6px 0 var(--shadow);
}
.pixel-banner .row{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.badge{
  display:inline-block;padding:8px 10px;border:4px solid var(--border);box-shadow:4px 4px 0 var(--shadow);
  background:var(--bg2);font-size:8px;text-transform:uppercase;
}
.badge.c1{color:var(--accent)} .badge.c2{color:var(--accent2)} .badge.c3{color:var(--accent3)}
@media (max-width:920px){.hero,.grid-3,.grid-2{grid-template-columns:1fr}.nav-wrap{flex-direction:column;align-items:flex-start}}
@media (max-width:560px){h1{font-size:18px}h2{font-size:14px}.nav-links a,.btn,p,ul.clean li,input,textarea,label{font-size:8px}.logo{font-size:12px}}