/* Bloom — shared design tokens, matched to the app's scene themes. */ :root { --bg-outer: #14101F; --bg-inner: #2B2140; --panel: #221A33; --panel-2: #1B1429; --ink: #F4F1FA; --ink-dim: rgba(244, 241, 250, 0.64); --ink-faint: rgba(244, 241, 250, 0.38); --cyan: #7DF9FF; --lavender: #C9B8FF; --coin: #FFD54F; --rose: #F06292; --radius: 20px; --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif; } * { margin: 0; padding: 0; box-sizing: border-box; } /* Dark canvas on too, or overscroll rubber-banding shows white. */ html { background: var(--bg-outer); color-scheme: dark; } body { font-family: var(--font); color: var(--ink); background: radial-gradient(120% 90% at 50% 0%, var(--bg-inner) 0%, var(--bg-outer) 70%); min-height: 100vh; -webkit-font-smoothing: antialiased; } a { color: var(--cyan); text-decoration: none; } .wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; } .chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); font-size: 14px; font-weight: 600; color: var(--ink-dim); } .btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; border-radius: 999px; background: var(--cyan); color: #0B0D16; font-weight: 700; font-size: 17px; transition: transform 0.2s ease, box-shadow 0.2s ease; box-shadow: 0 8px 40px rgba(125, 249, 255, 0.25); } .btn:hover { transform: translateY(-2px); box-shadow: 0 12px 48px rgba(125, 249, 255, 0.4); } .btn.ghost { background: rgba(255, 255, 255, 0.08); color: var(--ink); box-shadow: none; } .card { background: var(--panel); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: var(--radius); padding: 26px; } .glow { position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.35; pointer-events: none; } footer { padding: 48px 24px 64px; text-align: center; color: var(--ink-faint); font-size: 14px; } footer a { color: var(--ink-dim); margin: 0 10px; }