:root{--bg:#dde3ee;--fg:#0a1230;--card:rgba(255,255,255,.82);--accent:#1f5cff}
:root[data-theme="dark"]{--bg:#050a1a;--fg:#e6eeff;--card:rgba(6,12,30,.82);--accent:#5b8cff}
*{margin:0;box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth}
body{background:transparent;color:var(--fg);font:15px/1.6 'Space Mono',monospace;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
#c{position:fixed;inset:0;width:100%;height:100%;z-index:-1}
a{color:inherit;text-decoration:none}
a:hover{color:var(--accent)}
header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;padding:18px 24px}
.brand{font:700 .8rem 'Press Start 2P',monospace}
nav{display:flex;align-items:center;flex-wrap:wrap;gap:8px 18px;font-size:.9rem} 
button{background:var(--card);color:var(--fg);border:3px solid var(--fg);padding:4px 10px;font:inherit;cursor:pointer;box-shadow:3px 3px 0 var(--accent)}
button:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--accent)}
main{flex:1;width:100%;max-width:1100px;margin:0 auto;padding:24px;display:grid;gap:30px}
.card{padding:26px;background:var(--card);border:4px solid var(--fg);box-shadow:8px 8px 0 var(--accent);backdrop-filter:blur(3px)}
.kicker{font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
h1{font:clamp(1.1rem,4vw,1.8rem)/1.5 'Press Start 2P',monospace;margin-bottom:14px}
.hero p{max-width:640px;line-height:1.7;margin-bottom:8px}
.note{font-size:.85rem;opacity:.8}
h2{font:1rem/1.5 'Press Start 2P',monospace}
h3{font:.75rem/1.6 'Press Start 2P',monospace;margin:22px 0 4px;color:var(--accent)}
.count{display:block;font-size:.8rem;opacity:.75;margin-top:4px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin:16px 0 4px}
.link{display:block;padding:12px 14px;background:var(--card);border:3px solid var(--fg);box-shadow:3px 3px 0 var(--accent);transition:transform .12s,box-shadow .12s}
.link:hover{color:var(--fg);transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--accent)}
.link b{display:flex;align-items:center;gap:8px;font-size:.95rem}
.link img{width:16px;height:16px;flex-shrink:0}
.link span{display:block;font-size:.8rem;opacity:.75;margin-top:4px;line-height:1.5}
footer{text-align:center;padding:22px 18px;font-size:.8rem;line-height:1.8}
footer a{border-bottom:1px dotted currentColor}
#err{position:fixed;inset:0;display:grid;place-items:center;font:16px monospace}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

header nav {
  display: flex;
  align-items: center; /* Forces the meter and button onto the exact same center line */
  gap: 8px;
}

#fps-meter {
  font-family: 'Space Mono', monospace;
  font-size: 13px;
  letter-spacing: 0.5px;
  color: inherit;
  user-select: none;
  cursor: pointer;
  min-width: 104px;
}
.fps-header{display:flex;justify-content:space-between;gap:10px;font-size:11px}
.fps-track{height:8px;margin-top:3px;border:2px solid var(--fg);background:var(--card)}
#fps-fill{height:100%;width:0;background:var(--accent);transition:width .25s}
blockquote{border-left:4px solid var(--accent);padding:6px 12px;margin:10px 0;font-size:.85rem}