:root{
  --ink:#e7f2ff; --ink-dim:#b9d6f2; --link:#66ccff; --bg:#001a2b; --panel:#00243a; --accent:#66ccff;
}
*{box-sizing:border-box}
body{
  margin:0; color:var(--ink); background:var(--bg) url('/assets/retropattern.png') repeat;
  font:15px/1.5 Verdana, Geneva, Tahoma, sans-serif;
}
.page{
  max-width:760px; margin:28px auto; padding:16px 18px;
  background:var(--panel); border:3px double var(--accent);
  box-shadow:0 0 0 3px #00334f, 0 6px 24px rgba(0,0,0,.45);
}
h1{margin:0 0 8px 0; letter-spacing:.5px}
.badge{
  display:inline-block; padding:4px 8px; border:2px outset var(--accent);
  background:#00314b; text-shadow:1px 1px 0 #000;
}
nav a{color:var(--link); text-decoration:underline}
nav a:hover{color:#ffff66}
hr{border:0; height:2px; background:linear-gradient(90deg,transparent, var(--accent), transparent)}
img{max-width:100%; height:auto; border:2px solid var(--accent)}
.gallery{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px;
}
.thumb{display:block; text-align:center; color:var(--ink-dim); text-decoration:none}
.thumb span{display:block; margin-top:6px; font-size:13px}
@media (prefers-color-scheme: light){
  :root{ --ink:#0a1c2b; --ink-dim:#184563; --link:#005ea6; --bg:#f3f8fc; --panel:#ffffff; --accent:#66ccff; }
  body{ background:var(--bg) }
}