:root{--bg:#0d1220;--ink:#0e0e10;--paper:#fffef8;--ink-soft:#1a1a1a;--accent:#4da3ff;--accent-2:#ff2f92;--accent-3:#2332ff;--warn:#ffd400}
*{margin:0;box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font:16px/1.45 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;letter-spacing:.2px}
.grid{position:fixed;inset:0;pointer-events:none;background:
repeating-linear-gradient(#ffffff10 0 2px,transparent 2px 40px),
repeating-linear-gradient(90deg,#ffffff10 0 2px,transparent 2px 40px)}
.wrap{position:relative;max-width:980px;margin:56px auto;background:var(--paper);border:8px solid #000;box-shadow:0 0 0 6px #0a244d inset,0 30px 80px rgba(0,0,0,.35);padding:28px;border-radius:18px}
header h1{font-size:56px;line-height:.95;letter-spacing:-1px;border-bottom:8px solid #000;padding:12px 0;margin-bottom:14px;font-family:ui-monospace,Menlo,Consolas,monospace}
nav{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:10px}
nav a{display:inline-block;padding:9px 14px;border:3px solid #000;border-radius:14px;text-decoration:none;color:#000;background:linear-gradient(#fff, #f7f7f0)}
.banner{overflow:hidden;white-space:nowrap;border:3px dashed #000;background:var(--warn);padding:8px 10px;margin:14px 0;border-radius:10px;position:relative}
.banner-content{display:flex;animation:marquee 15s linear infinite}
.banner-text{padding-right:2em;flex-shrink:0}
@keyframes marquee{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}
main{display:grid;grid-template-columns:1fr;gap:18px}
.card{border:4px dashed #b7ccff;background:#f7fbff;padding:18px;border-radius:16px;box-shadow:0 0 0 4px #103775 inset}
.btn{display:inline-block;margin-top:10px;padding:10px 14px;border:4px solid #000;background:var(--warn);font-weight:700;border-radius:14px;text-decoration:none;color:#000}
.zine{background:linear-gradient(135deg,var(--accent-2) 0 50%,var(--accent-3) 50% 100%);padding:20px;border-radius:18px;transform:rotate(-.6deg)}
.zine .block{background:#fff;padding:18px;border-radius:14px;box-shadow:8px 8px 0 #000}
.zine h2{font-size:42px;line-height:.95;margin-bottom:6px}
.tag{display:inline-block;background:var(--accent-2);color:#fff;padding:4px 10px;margin:4px 6px 10px 0;border-radius:999px;transform:rotate(-2deg);font-weight:700}
.tags .tag:nth-child(2){background:#ff7abf;transform:rotate(1.6deg)}
.tags .tag:nth-child(3){background:#8aa8ff;transform:rotate(-1.8deg)}
.notes{display:flex;flex-wrap:wrap;gap:14px}
.note{position:relative;background:#fff;padding:16px 18px;box-shadow:8px 10px 0 #d0c6b8,0 0 0 2px #1a1a1a;border-radius:10px;transform:rotate(-1.5deg);min-width:220px}
.note:nth-child(2){background:#ffe8a6;transform:rotate(2deg)}
.note:nth-child(3){background:#c8f7ff;transform:rotate(-3deg)}
.pin{position:absolute;top:-10px;left:12px;width:14px;height:14px;border-radius:50%;background:#ff4d4d;border:2px solid #1a1a1a}
section h2{font-size:28px;margin-bottom:8px;font-family:ui-monospace,Menlo,Consolas,monospace}
.links a{color:#0a0a0a;text-decoration:none;border-bottom:2px solid #0a0a0a}
footer{margin-top:18px;padding-top:14px;border-top:4px solid #000;font-size:14px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
footer .small{opacity:.7}
@media (max-width:640px){header h1{font-size:40px}.zine h2{font-size:32px}.wrap{margin:24px 12px;padding:18px}}