:root{--bg:#0b2b26;--bg-deep:#061a17;--gold:#d4af37;--gold-soft:#f1dc9b;--ink:#f7f1e1;--medallion-green:#1f6b4f}*{box-sizing:border-box;margin:0}body{min-height:100dvh;color:var(--ink);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23d4af37' stroke-opacity='.13' stroke-width='1'%3E%3Crect x='20' y='20' width='40' height='40'/%3E%3Crect x='20' y='20' width='40' height='40' transform='rotate(45 40 40)'/%3E%3Ccircle cx='40' cy='40' r='9'/%3E%3Cpath d='M0 0L20 20M80 0L60 20M0 80L20 60M80 80L60 60'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(ellipse at center, var(--bg) 0%, var(--bg-deep) 100%);justify-content:center;align-items:center;padding:16px;font-family:Amiri,serif;display:flex}#root{width:100%}.arch{text-align:center;border:2px solid var(--gold);width:100%;max-width:600px;box-shadow:0 0 0 4px var(--bg-deep), 0 0 0 5px #d4af3780, 0 20px 60px #0009;background:#061a17d1;border-radius:50% 50% 12px 12px/120px 120px 12px 12px;margin:0 auto;padding:64px 16px 32px}.medallion{background:var(--medallion-green);width:128px;margin:0 auto 16px;display:block;-webkit-mask-image:radial-gradient(50% 50%,#000 78%,#0000 100%);mask-image:radial-gradient(50% 50%,#000 78%,#0000 100%)}.medallion img{mix-blend-mode:lighten;width:100%;display:block}.basmala{color:var(--gold-soft);opacity:.85;font-size:1rem}h1{color:var(--gold);text-shadow:0 2px 24px #d4af3759;margin:12px 0 8px;font-size:2.25rem;font-weight:700;line-height:1.5}.date{opacity:.85;font-size:1.1rem}.divider{color:var(--gold);margin:16px 0;font-size:1.75rem}.countdown{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;display:grid}.unit{background:#d4af370f;border:1px solid #d4af3773;border-radius:10px;flex-direction:column;gap:4px;padding:12px 2px;display:flex}.value{color:var(--gold-soft);font-variant-numeric:tabular-nums;font-family:Reem Kufi,sans-serif;font-size:1.75rem}.label{opacity:.8;font-size:1rem}.toggle{font:inherit;color:var(--gold-soft);cursor:pointer;background:0 0;border:1px solid #d4af3773;border-radius:999px;margin-top:16px;padding:8px 20px;font-size:1rem}.toggle:hover,.toggle:focus-visible{background:#d4af371f}.welcome{color:var(--gold-soft);margin-top:24px;font-size:1.35rem}.done{color:var(--gold);font-size:2rem}@media (width>=600px){body{padding:24px}.arch{box-shadow:0 0 0 6px var(--bg-deep), 0 0 0 7px #d4af3780, 0 30px 80px #0009;border-radius:50% 50% 16px 16px/170px 170px 16px 16px;padding:80px 40px 48px}.medallion{width:176px;margin-bottom:20px}.basmala{font-size:1.25rem}h1{font-size:3.5rem}.date{font-size:1.25rem}.divider{margin:24px 0;font-size:2rem}.countdown{gap:12px}.unit{border-radius:12px;padding:16px 4px}.value{font-size:3rem}.label{font-size:1.1rem}.done{font-size:2.5rem}.welcome{margin-top:32px;font-size:1.75rem}}