:root{color-scheme:dark;--ink:#e9e8dc;--mute:#9eafb5;--gold:#efbd72;--teal:#78c8bb}*{box-sizing:border-box}body{margin:0;background:#0b1820;color:var(--ink);font:15px/1.6 system-ui,sans-serif;background-image:radial-gradient(ellipse at top left,#24434a88,transparent 60%)}main{max-width:1240px;margin:auto;padding:28px 36px}header{display:flex;align-items:center;gap:20px;margin-bottom:30px}.brand{font:bold 22px Georgia;letter-spacing:2px;border:1px solid #577074;border-radius:50%;padding:20px 12px;text-decoration:none;color:var(--ink)}.brand span{color:var(--gold)}h1{font:46px/1 Georgia;margin:5px 0}h2{font:32px/1.18 Georgia;margin:10px 0 20px}.eyebrow{font:10px/1.4 system-ui;letter-spacing:2.5px;color:var(--gold);margin:0}header button{margin-left:auto}.layout{display:grid;grid-template-columns:minmax(0,750px) minmax(230px,1fr);gap:36px}.play{min-width:0}.topline{display:flex;justify-content:space-between;font-size:10px;letter-spacing:1.8px;padding:12px 0;color:var(--teal)}.screen{position:relative;border:1px solid #52676b;border-radius:12px;overflow:hidden;background:#101f29;box-shadow:0 20px 70px #0005}canvas{width:100%;display:block;aspect-ratio:512/448;outline:none}.overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:#101f29f5;padding:20px}.overlay[hidden]{display:none}.overlay h2{font-size:40px;margin:14px 0}.overlay p{margin:7px 0 20px;color:#b9c8cb}.overlay .eyebrow{color:var(--gold);margin:12px 0 0}.beacon-art{height:130px;width:130px;background-image:url('atlas.webp');background-size:200%;background-position:100% 100%;border-radius:50%}button{border:1px solid #466168;background:#20353c;color:var(--ink);padding:10px 15px;border-radius:7px;cursor:pointer;font:600 13px system-ui;touch-action:none}button:hover{background:#34535a}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--gold);outline-offset:3px}button:disabled{opacity:.45;cursor:default}.primary{background:var(--gold);color:#15272b;padding:15px 30px;font-size:15px;border:0}.primary:hover{background:#ffcf88}.toolbar{display:flex;align-items:center;gap:20px;padding:18px 0;font-size:9px;letter-spacing:1px;color:var(--mute)}.toolbar strong{display:block;font-size:21px;color:var(--ink);font-weight:500;line-height:1.2}.toolbar button:first-of-type{margin-left:auto}.touch{display:flex;justify-content:space-between;gap:20px}.dpad{display:grid;grid-template-columns:repeat(3,56px);gap:5px}.dpad button{font-size:24px;padding:4px}.dpad button:first-child{grid-column:2}.dpad button:nth-child(2){grid-column:1}.fire{width:110px;color:var(--gold);letter-spacing:2px;font-size:18px}.fire span{display:block;font-size:10px;color:var(--mute);letter-spacing:0}aside{padding-top:12px}aside h2{font-size:29px}.guide{display:flex;gap:15px;padding:20px 0;border-top:1px solid #ffffff15}.tile{display:block;width:60px;height:60px;flex-shrink:0;background-image:url('atlas.webp');background-size:200%;border-radius:9px}.player{background-position:0 0}.enemy{background-position:100% 0}.brick{background-position:0 100%}h3{font-size:14px;margin:0 0 6px}.guide p,details p{font-size:12px;color:var(--mute);margin:0}summary{cursor:pointer;font-size:13px;color:var(--gold)}details p{margin:12px 0}.signature{font:italic 19px Georgia;padding:30px 0 20px}.signature span{display:block;font:11px/1.6 system-ui;color:var(--mute);margin-top:10px}a{color:var(--teal);font-size:11px}footer{color:#64818a;letter-spacing:2px;font-size:9px;margin-top:32px}.subtle{font-size:11px!important} @media(max-width:900px){main{padding:20px}.layout{grid-template-columns:1fr}aside{display:grid;grid-template-columns:1fr 1fr;gap:10px 24px}aside>.eyebrow,aside>h2{grid-column:1/-1}.signature{padding:10px 0}.guide{padding:12px 0}h1{font-size:36px}}@media(max-width:480px){main{padding:12px}header{gap:12px;margin-bottom:14px}.brand{font-size:15px;padding:16px 8px}h1{font-size:30px}.eyebrow{font-size:8px;letter-spacing:1.5px}header button{font-size:11px;padding:8px}.overlay h2{font-size:27px}.overlay p{font-size:12px}.beacon-art{height:70px;width:70px}.overlay .primary{padding:12px 24px}.overlay p.subtle{margin:10px 0 0}.toolbar{gap:12px}.toolbar button{padding:8px;font-size:11px}.toolbar strong{font-size:18px}aside{display:block}.topline{font-size:8px;letter-spacing:1px}footer{font-size:8px}.screen{border-radius:8px}}