/* ═══ §1 · RESET · ROOT · BODY ════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* the ROOT canvas is painted, not just : with viewport-fit=cover the safe-area region and any overscroll exposed the white html canvas as a bar at the top. */ background: var(--bg-void); min-height: 100%; } body { font-family: var(--font-display); background: var(--bg-void); color: var(--text-primary); overflow-x: hidden; overscroll-behavior: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; user-select: none; padding-bottom: 0; } /* THE SHEET LOCK. app._sheetLock() sets this while any bottom sheet or overlay owns the screen; without it the surface behind keeps scrolling under the operator's thumb and the sheet appears to drift. One class, every sheet (ticker · scanner · replay · statik). */ body.sheet-open { overflow: hidden; touch-action: none; } /* animated gradient mesh background */ body::before { content: ''; position: fixed; inset: 0; background: radial-gradient(ellipse 600px 400px at 20% 30%, rgba(0, 229, 255, 0.06), transparent), radial-gradient(ellipse 500px 500px at 80% 70%, rgba(168, 85, 247, 0.04), transparent), radial-gradient(ellipse 400px 300px at 50% 50%, rgba(255, 215, 0, 0.03), transparent); animation: meshDrift 20s ease-in-out infinite alternate; z-index: 0; pointer-events: none; } @keyframes meshDrift { 0% { transform: translate(0, 0) scale(1); } 33% { transform: translate(20px, -10px) scale(1.02); } 66% { transform: translate(-15px, 15px) scale(0.98); } 100% { transform: translate(10px, -5px) scale(1.01); } }