:root { --bg: #000005; --text: #ffffff; --dim: rgba(255,255,255,0.55); --line: rgba(255,255,255,0.15); --accent: #66b0ff; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans", sans-serif; -webkit-tap-highlight-color: transparent; } /* Demo pages opt into full-screen scroll lock via */ body.demo { overflow: hidden; touch-action: none; overscroll-behavior: none; } body.demo canvas { touch-action: none; } canvas { display: block; } a { color: inherit; text-decoration: none; } /* Shared demo top bar */ .demo-bar { position: fixed; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; padding-top: max(14px, env(safe-area-inset-top, 0)); z-index: 100; pointer-events: none; background: linear-gradient(to bottom, rgba(0,0,5,0.6), transparent); } .demo-bar a, .demo-bar .title { pointer-events: auto; } .demo-bar .back { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; letter-spacing: 0.1em; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: rgba(0,0,0,0.3); backdrop-filter: blur(10px); transition: all 0.2s; } .demo-bar .back:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.4); } .demo-bar .title { font-size: 12px; letter-spacing: 0.3em; opacity: 0.7; text-transform: uppercase; } .demo-bar .source { font-size: 11px; letter-spacing: 0.15em; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: rgba(0,0,0,0.3); backdrop-filter: blur(10px); opacity: 0.7; transition: all 0.2s; } .demo-bar .source:hover { opacity: 1; } @media (max-width: 640px) { .demo-bar { padding: 10px 12px; padding-top: max(10px, env(safe-area-inset-top, 0)); } .demo-bar .back { padding: 6px 12px; font-size: 11px; } .demo-bar .title { font-size: 10px; letter-spacing: 0.2em; } .demo-bar .source { padding: 6px 10px; font-size: 10px; } }