/* Brand tokens. OKLCH is used because its lightness is perceptually uniform, which makes deriving future tints/shades predictable. --brand is oklch for #D6FA00. */ :root { --brand: oklch(92.64% 0.2193 119.71); --bg: var(--brand); /* the light theme background IS the brand color */ --fg: black; } /* Inverted mode: tapping the page toggles this class on . Everything colored with var(--bg)/var(--fg) updates automatically. (The WebGL reels swap their own palette in js/main.js.) */ body.inverted { --bg: black; --fg: var(--brand); } * { margin: 0; box-sizing: border-box; } body { /* 100dvh = dynamic viewport height. Unlike 100vh, it accounts for mobile browser toolbars, so nothing overflows and causes scrolling. */ height: 100dvh; overflow: hidden; display: flex; flex-direction: column; background: var(--bg); color: var(--fg); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; /* The whole page is tappable: suppress the mobile tap flash and accidental text selection so toggling feels intentional. */ -webkit-tap-highlight-color: transparent; user-select: none; cursor: pointer; transition: background-color 150ms ease, color 150ms ease; } /* Grid + place-items is the shortest way to truly center one element. */ main { flex: 1; display: grid; place-items: center; } /* The reels canvas. Its aspect ratio mirrors the WebGL world window (700x440, see js/reels.js) so nothing gets letterboxed or stretched. The top/bottom fade lives in the WebGL shader (smoothstep falloff, animated open during spin / closed at rest), not in CSS. */ #reels { width: min(72vw, 560px); aspect-ratio: 700 / 440; } footer { text-align: center; font-size: 0.75rem; /* safe-area-inset keeps the text above the iPhone home indicator */ padding-bottom: max(1rem, env(safe-area-inset-bottom)); }