@font-face{font-family:DejaVu;src:url('../DejaVuSans.ttf') format('truetype');font-display:swap}
:root{color-scheme:dark;font-family:DejaVu,system-ui,sans-serif;background:#0b1120;color:#e9f1f8}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 74% 6%,#182a43 0,#0b1120 48%);min-height:100vh}
a{color:#9ed5fa}button,select,input{font:inherit}button,select{border:1px solid #47617f;background:#18263d;color:#ecf5fc;border-radius:8px;padding:.65rem .9rem;cursor:pointer}button:hover,a:hover{filter:brightness(1.2)}button:focus-visible,select:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid #7dcaff;outline-offset:3px}.wrap{width:min(1280px,calc(100% - 2.5rem));margin:auto}
header{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.4rem 0}.brand{display:flex;align-items:center;gap:.7rem;font-weight:bold;font-size:1.1rem;text-decoration:none;color:#fff}nav{display:flex;gap:1.3rem;flex-wrap:wrap}nav a{font-size:.9rem;text-decoration:none;color:#bbd1e3}
.heading{max-width:780px;margin:4rem 0 2rem}.eyebrow{letter-spacing:.18em;text-transform:uppercase;color:#87c5ed;font-size:.76rem;font-weight:bold}h1{font-size:clamp(4rem,10vw,8rem);line-height:.95;letter-spacing:-.07em;margin:.4rem 0 1rem}h2{font-size:2rem;letter-spacing:-.04em}.heading>p:last-child{color:#bfd0e0;line-height:1.7;font-size:1.08rem}
.game{border:1px solid #3d5873;border-radius:18px;background:#111b2c;box-shadow:0 25px 90px #0007;overflow:hidden}.screen{position:relative;aspect-ratio:16/9;max-height:75vh;background:#f7f7f7}.screen canvas{position:absolute;width:100%;height:100%;inset:0;image-rendering:pixelated}.screen #stars{z-index:0}.screen #game{z-index:1}
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 1.25rem;flex-wrap:wrap}.toolbar>div{display:flex;gap:.6rem;flex-wrap:wrap}#status{color:#a9c1d5;font-size:.87rem}kbd{font:inherit;font-size:.78em;color:#bad5e8;margin-left:.3rem}
.controls{display:flex;flex-wrap:wrap;gap:1.25rem;align-items:end;padding:1.5rem 0 2rem}.controls>div{display:grid;gap:.5rem;min-width:150px}.controls label{color:#bad0e1;font-size:.85rem}.controls input{width:220px;accent-color:#8fc9ef}.controls>div:last-child{display:flex;gap:.5rem}
.guide{display:grid;grid-template-columns:1fr 1fr;gap:3rem;padding:3rem 0 6rem;border-top:1px solid #30425a}.guide p{line-height:1.7;color:#b9cbdb}.guide code,.guide pre{font-family:ui-monospace,SFMono-Regular,monospace}.guide pre{overflow:auto;background:#101a2a;padding:1.4rem;border-radius:0 0 12px 12px;border:1px solid #354963;margin:0;color:#c6e7f9}.code-head{display:flex;justify-content:space-between;align-items:center;background:#1b2a40;border:1px solid #354963;border-bottom:0;padding:.65rem 1rem;border-radius:12px 12px 0 0}.source{font-size:.84rem}
@media(max-width:760px){header{align-items:flex-start;flex-direction:column}.heading{margin:2.5rem 0}.guide{grid-template-columns:1fr;gap:1.5rem}.toolbar{align-items:flex-start}.toolbar>div{width:100%}.toolbar button{flex:1}.toolbar kbd{display:block;margin:.2rem 0 0}.controls>div{flex:1}}