:root{--green:#42bf46;--ink:#050707;--paper:#f5f7f4}
*{box-sizing:border-box}
html,body{min-height:100%;margin:0}
body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--ink);color:#fff}
.page{min-height:100vh;display:grid;place-items:center;padding:28px}
.shell{width:min(900px,100%);text-align:center}
.eyebrow{font-weight:900;letter-spacing:.18em;text-transform:uppercase;font-size:.72rem;color:var(--green);margin:0 0 8px}
h1{font-size:clamp(2.5rem,7vw,5.5rem);line-height:.9;letter-spacing:-.06em;margin:0 0 14px}
.intro{max-width:620px;margin:0 auto 28px;color:rgba(255,255,255,.68)}
.screen{background:#020303;border:1px solid rgba(255,255,255,.12);border-radius:18px;overflow:hidden;box-shadow:0 28px 90px rgba(0,0,0,.42)}
.byteman-canvas{display:block;width:100%;height:auto;aspect-ratio:19/9;outline:none;touch-action:manipulation}
.controls{font-size:.78rem;letter-spacing:.04em;color:rgba(255,255,255,.46);margin:14px 0 0}
.escape{display:inline-block;margin-top:34px;color:rgba(255,255,255,.24);text-decoration:none;font-size:.75rem;transition:color .2s ease}
.escape:hover,.escape:focus{color:var(--green)}
@media (max-width:600px){.page{padding:18px}.intro{font-size:.92rem}.controls{font-size:.7rem}.screen{border-radius:12px}}