/* Demo-only page chrome (NOT part of the library). The library no longer styles / or .grain so it can't leak into a host app. */ html, body { margin: 0; height: 100%; } /* the mount element must carry height so the player (.atui is height:100%) fills the window; position/z-index keep it above the fixed .grain backdrop */ #root { position: relative; z-index: 1; height: 100%; } body { font-family: var(--font-body); color: var(--ink); background: radial-gradient(1200px 800px at 80% -10%, var(--scene-glow), transparent 60%), radial-gradient(900px 700px at -10% 110%, var(--paper-2), transparent 55%), var(--paper); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .grain { position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(var(--grain-ink) 1px, transparent 1.4px); background-size: 22px 22px; mask-image: radial-gradient(120% 120% at 50% 30%, #000 35%, transparent 85%); opacity: .55; }