:root{ --bg:#08060a; --card:#120b12; --text:#fff7ed; --muted:#c7b7c3; --border:rgba(255,255,255,.10); --red:#e11d48; --gold:#fbbf24; --glow: rgba(225,29,72,.35); } /* Light theme variables (applied when .light is on ) */ html.light{ --bg:#fff7ed; --card:#ffffff; --text:#111827; --muted:#6b7280; --border:rgba(17,24,39,.12); --red:#dc2626; --gold:#f59e0b; --glow: rgba(220,38,38,.18); } *{box-sizing:border-box;margin:0;padding:0} html,body{height:100%} body{ font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji"; color:var(--text); background: radial-gradient(circle at 15% 10%, rgba(245,158,11,.18), transparent 45%), radial-gradient(circle at 80% 25%, rgba(225,29,72,.22), transparent 55%), radial-gradient(circle at 50% 120%, rgba(225,29,72,.18), transparent 55%), linear-gradient(180deg, var(--bg), color-mix(in srgb, var(--bg) 70%, #000) 65%, color-mix(in srgb, var(--bg) 85%, #000)); display:flex; align-items:center; justify-content:center; padding:28px; } /* Canvas overlay for celebration */ #celebrationCanvas{ position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 50; } .wrap{ width:min(960px, 100%); display:grid; gap:18px; position: relative; z-index: 1; /* above background, below canvas */ } .hero{ text-align:center; padding:10px 0 4px; } .badge{ display:inline-flex; align-items:center; gap:10px; padding:8px 12px; border:1px solid var(--border); border-radius:999px; background:color-mix(in srgb, var(--card) 70%, transparent); color:var(--muted); font-weight:700; letter-spacing:.2px; margin-bottom:10px; } h1{ font-size: clamp(28px, 4vw, 44px); line-height:1.08; letter-spacing:-.5px; } .sub{ margin-top:10px; color:var(--muted); max-width: 70ch; margin-inline:auto; } .controls{ margin-top:14px; display:flex; justify-content:center; gap:10px; flex-wrap: wrap; } .card{ border:1px solid var(--border); background: radial-gradient(circle at 20% 0%, rgba(245,158,11,.12), transparent 40%), radial-gradient(circle at 100% 30%, rgba(225,29,72,.14), transparent 55%), color-mix(in srgb, var(--card) 82%, transparent); border-radius: 20px; padding: 18px; box-shadow: 0 14px 45px rgba(0,0,0,.25); } .toprow{ display:grid; grid-template-columns: 1.35fr .65fr; gap: 12px; } .target, .nextyear{ display:flex; flex-direction: column; gap: 4px; padding: 10px 12px; border:1px solid var(--border); border-radius:14px; background: color-mix(in srgb, var(--card) 70%, transparent); } .label{ color:var(--muted); font-size: 12px; text-transform:uppercase; letter-spacing:.12em; } .value{ color: var(--text); font-weight:900; } .zodiac{ color: color-mix(in srgb, var(--gold) 65%, var(--text)); font-weight: 900; letter-spacing: .02em; margin-top: 2px; } .grid{ margin-top: 14px; display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .box{ border:1px solid var(--border); border-radius: 18px; padding: 16px 14px; background: color-mix(in srgb, var(--card) 72%, transparent); position:relative; overflow:hidden; } .box::before{ content:""; position:absolute; inset:-2px; background: radial-gradient(circle at 30% 20%, rgba(245,158,11,.18), transparent 40%), radial-gradient(circle at 80% 10%, rgba(225,29,72,.22), transparent 45%); opacity:.55; pointer-events:none; } .num{ position:relative; font-size: clamp(26px, 3.6vw, 44px); font-weight: 950; letter-spacing:-.02em; text-shadow: 0 0 24px var(--glow); } .txt{ position:relative; margin-top: 6px; color: var(--muted); font-weight:800; letter-spacing:.08em; text-transform:uppercase; font-size: 12px; } .status{ margin-top: 12px; color: var(--muted); font-size: 14px; min-height: 20px; } .footer{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top: 12px; } .hint{ color: var(--muted); font-size: 13px; } .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding: 10px 14px; border-radius: 999px; border:1px solid var(--border); background: color-mix(in srgb, var(--card) 70%, transparent); color: var(--text); text-decoration:none; font-weight:900; cursor:pointer; } .btn:active{ transform: translateY(1px); } .btn-ghost{ border-color: color-mix(in srgb, var(--gold) 45%, var(--border)); } .credit{ text-align:center; color: var(--muted); font-size: 13px; padding-bottom: 6px; } @media (max-width: 860px){ .toprow{ grid-template-columns: 1fr; } } @media (max-width: 720px){ .grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }