:root{--bg:#1c1e20;--deep:#103a1e;--mid:#1e642c;--green:#34963c;--lime:#85d656;--ink:#0a0a0a;--gray:#414549;--red:#963232;--text:#d8e8d0;--muted:#9aa79a}
*{box-sizing:border-box}
html{background:var(--bg);color:var(--text);font:16px/1.55 ui-monospace,"Cascadia Mono","DejaVu Sans Mono",Menlo,Consolas,monospace}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;
  background-image:linear-gradient(rgba(133,214,86,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(133,214,86,.035) 1px,transparent 1px);background-size:12px 12px}
a{color:var(--lime)}
a:focus-visible,.btn:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
.pix{image-rendering:pixelated;image-rendering:crisp-edges}
.wrap{width:min(1040px,100% - 32px);margin:0 auto}
header.top{border-bottom:4px solid var(--ink);background:var(--deep);box-shadow:0 4px 0 var(--mid)}
header.top .wrap{display:flex;align-items:center;gap:12px;padding:10px 0}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--lime);font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.brand img{width:40px;height:40px}
.brand small{color:var(--green);font-weight:700}
nav{margin-left:auto;display:flex;gap:16px;flex-wrap:wrap}
nav a{color:var(--text);text-decoration:none;font-weight:700;text-transform:uppercase;font-size:.85rem;letter-spacing:.06em}
nav a:hover,nav a[aria-current]{color:var(--lime)}
main{flex:1}
.hero{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:24px;padding:48px 0 24px}
.hero h1{font-size:clamp(2.2rem,6vw,4.2rem);line-height:1;margin:0 0 6px;color:var(--lime);text-transform:uppercase;letter-spacing:.04em;text-shadow:5px 5px 0 var(--ink),-1px -1px 0 var(--mid)}
.hero h1 span{display:block;font-size:.42em;color:var(--green);text-shadow:3px 3px 0 var(--ink)}
.hero p{max-width:34em;color:var(--text)}
.hero .mascot{justify-self:center;width:min(100%,400px);height:auto;filter:drop-shadow(8px 8px 0 var(--ink));animation:bob 2.4s steps(2) infinite}
@keyframes bob{50%{transform:translateY(-6px)}}
.hero .mascot.shot{animation:none;width:min(100%,560px);border:4px solid var(--ink)}
@media (prefers-reduced-motion:reduce){.hero .mascot{animation:none}}
h2.sec{font-size:1.1rem;text-transform:uppercase;letter-spacing:.12em;color:var(--lime);border-left:8px solid var(--green);padding-left:10px;margin:32px 0 16px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;padding-bottom:40px}
.card{background:#232629;border:4px solid var(--ink);box-shadow:6px 6px 0 var(--ink),inset 0 0 0 2px var(--gray);padding:20px;display:flex;flex-direction:column;gap:12px}
.card .tag{align-self:flex-start;background:var(--deep);color:var(--lime);border:2px solid var(--green);padding:2px 8px;font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.card h3{margin:0;font-size:1.8rem;color:var(--lime);text-transform:uppercase;letter-spacing:.06em;text-shadow:3px 3px 0 var(--ink)}
.card p{margin:0}
.card .shot{width:100%;height:auto;border:2px solid var(--ink);background:var(--ink)}
.card ul{margin:0;padding-left:1.2em;color:var(--muted)}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:auto}
.btn{display:inline-block;text-decoration:none;font-weight:800;text-transform:uppercase;letter-spacing:.08em;padding:10px 18px;border:4px solid var(--ink);background:var(--green);color:var(--ink);box-shadow:4px 4px 0 var(--ink);transition:transform .05s}
.btn:hover{background:var(--lime)}
.btn:active{transform:translate(4px,4px);box-shadow:none}
.btn.alt{background:var(--gray);color:var(--text)}
.btn.alt:hover{background:#565b60}
.panel{background:#232629;border:4px solid var(--ink);box-shadow:6px 6px 0 var(--ink);padding:20px;margin-bottom:24px}
table{border-collapse:collapse;width:100%}
th,td{text-align:left;padding:6px 10px;border-bottom:2px solid var(--gray);vertical-align:top}
th{color:var(--lime);font-size:.85rem;text-transform:uppercase;letter-spacing:.06em}
kbd{background:var(--ink);color:var(--lime);border:2px solid var(--gray);padding:0 6px;font:inherit;font-size:.85em}
.note{border-left:6px solid var(--red);padding:8px 12px;background:rgba(150,50,50,.12)}
footer{border-top:4px solid var(--ink);background:var(--deep);color:var(--muted);font-size:.85rem}
footer .wrap{display:flex;gap:12px;align-items:center;padding:14px 0;flex-wrap:wrap}
footer img{width:24px;height:24px}
.err{text-align:center;padding:60px 0}
.err img{width:min(70vw,280px);height:auto}
.err h1{color:var(--lime);font-size:3rem;margin:12px 0 0;text-shadow:4px 4px 0 var(--ink)}
@media (max-width:720px){.hero{grid-template-columns:1fr;padding-top:24px}.hero .mascot{width:min(70vw,300px);order:-1}nav{gap:10px}}