:root { --brand-light: #5856d6; --brand-dark: #989fff; --brand: var(--brand-light); --surface: #ffffff; --surface-soft: #f6f7fb; --text: #111827; --muted: #5f6675; --line: rgba(17, 24, 39, 0.1); --ipad-section-bg: #f7f8ff; --ipad-frame-border: rgba(88, 86, 214, 0.16); --ipad-frame-bg: radial-gradient(circle at top, rgba(88, 86, 214, 0.16), transparent 20rem), rgba(255, 255, 255, 0.78); --ipad-frame-shadow: 0 28px 70px rgba(88, 86, 214, 0.18); --ipad-point-border: rgba(88, 86, 214, 0.14); --ipad-point-bg: rgba(255, 255, 255, 0.72); color-scheme: light; } @media (prefers-color-scheme: dark) { :root { --brand: var(--brand-dark); --surface: #090a10; --surface-soft: #11131d; --text: #f7f8ff; --muted: #b5bbca; --line: rgba(255, 255, 255, 0.12); --ipad-section-bg: #090a10; --ipad-frame-border: rgba(255, 255, 255, 0.14); --ipad-frame-bg: radial-gradient(circle at top, rgba(152, 159, 255, 0.22), transparent 20rem), rgba(255, 255, 255, 0.06); --ipad-frame-shadow: 0 28px 70px rgba(0, 0, 0, 0.28); --ipad-point-border: rgba(255, 255, 255, 0.12); --ipad-point-bg: rgba(255, 255, 255, 0.07); color-scheme: dark; } }