body{
  background-image:
    radial-gradient(60rem 30rem at 85% -10%, rgba(212,175,95,.10), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath d='M40 6 74 40 40 74 6 40Z M40 22 58 40 40 58 22 40Z' fill='none' stroke='%23d4af5f' stroke-opacity='.07'/%3E%3C/svg%3E");
}
.mihrab{width:min(340px,86vw);padding:10px;border-radius:999px 999px 24px 24px;border:1px solid rgba(212,175,95,.55);
  background:linear-gradient(180deg,rgba(212,175,95,.18),transparent 55%)}
.mihrab-inner{border-radius:999px 999px 16px 16px;background:linear-gradient(180deg,#144640,#0e2f2b);
  padding:5.5rem 1.5rem 2.5rem;text-align:center;box-shadow:inset 0 0 60px rgba(0,0,0,.35)}
.pcard{border:1px solid #1b4d46;background:#123a35;border-radius:18px;padding:1.25rem 1rem;transition:transform .2s,border-color .2s}
.pcard:hover{border-color:rgba(212,175,95,.5)}
.pcard.passed{opacity:.55}
.pcard.next{background:#d4af5f;color:#0b2623;border-color:#d4af5f;transform:translateY(-4px)}
.pcard.next .sub{color:#4a3d14}
.chip{border:1px solid #1b4d46;border-radius:999px;padding:.4rem .9rem;font-size:.85rem;color:#9fb8b2;transition:.15s}
.chip:hover,.chip.on{border-color:#d4af5f;color:#d4af5f}
#cityList li button{width:100%;text-align:left;padding:.7rem 1.25rem;display:flex;justify-content:space-between}
#cityList li button:hover,#cityList li button:focus{background:#1b4d46;outline:none}
#monthBody tr{border-top:1px solid #1b4d46}
#monthBody td{padding:.65rem .25rem}
#monthBody tr.today{background:rgba(212,175,95,.15);color:#d4af5f;font-weight:600}
:focus-visible{outline:2px solid #d4af5f;outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}