:root{--bg:#0b0c10;--ink:#e6e6e6;--panel:#13151b;--accent:#b34d4d}
*{box-sizing:border-box}html,body{height:100%;margin:0}
body{font-family:ui-monospace,Menlo,Consolas,monospace;color:var(--ink);line-height:1.6;-webkit-text-size-adjust:100%;text-size-adjust:100%;background: var(--bg) url('/img/o1bgames.png') center/cover no-repeat fixed}
.hero{min-height:100vh;position:relative}
.panel{max-width:900px;margin:6rem auto 8rem;padding:1rem 1.25rem;background:var(--panel);border:2px solid #000;box-shadow:6px 6px 0 #000}
.card{margin:1rem 0;padding:1rem;background:#0f1118;border:2px solid #000;box-shadow:4px 4px 0 #000}
.bottom-nav{position:fixed;left:50%;transform:translateX(-50%);bottom:0;display:flex;gap:.5rem;padding:.5rem .6rem;margin:0 0 calc(.5rem + env(safe-area-inset-bottom));background:rgba(0,0,0,.35);backdrop-filter:blur(4px);border:2px solid #000;box-shadow:4px 4px 0 #000;max-width:calc(100% - 1rem);overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;z-index:1000}
.bottom-nav a{color:var(--ink);text-decoration:none;padding:.4rem .6rem;border:2px solid #000;background:#1a1f2a}
.bottom-nav a:hover{background:#22293a}
a:focus-visible{outline:2px dashed var(--accent);outline-offset:2px}
img,video{max-width:100%;height:auto}
/* Typography: ensure headings and paragraphs are distinct */
html{font-size:16px}
h1,h2,h3,h4,h5,h6{font-weight:800;line-height:1.2;margin:1.25rem 0 .75rem}
h1{font-size:clamp(1.875rem,3.2vw+1rem,2.6rem)}
h2{font-size:clamp(1.5rem,2.2vw+0.75rem,2rem)}
h3{font-size:clamp(1.25rem,1.6vw+0.5rem,1.5rem)}
h4{font-size:1.125rem}
h5{font-size:1rem}
h6{font-size:.95rem}
p{font-size:1rem;margin:1rem 0;font-weight:400}
small{font-size:.875rem;opacity:.9}
ul,ol{padding-left:1.25rem}
code,pre{font-family:ui-monospace,Menlo,Consolas,monospace}
@media (max-width:768px){.panel{margin:1rem;padding:1rem}.card{margin:.75rem 0;padding:.9rem}.bottom-nav a{padding:.55rem .8rem;font-size:.95rem}.hero{min-height:100svh}.content,.hero{padding-bottom:5rem}body{background-attachment:scroll;background-position:center top}}
@media (min-width:769px){.content,.hero{padding-bottom:4rem}}
@supports (height:100svh){.hero{min-height:100svh}}