/* Login page: special-day themes (UAE National Day, Flag Day, World Pharmacists Day).
   The body gets "cxl-occ cxl-occ-<key>" from LoginController / LoginOccasion; normal days are not touched. */

body.cxl.cxl-occ { --occ-a: #1565f0; --occ-b: #22b8e6; --occ-ink: #0b4fc2; --occ-soft: #eaf2ff; --occ-glow1: rgba(34, 184, 230, .22); --occ-glow2: rgba(21, 101, 240, .35); }
body.cxl.cxl-occ-nationalday, body.cxl.cxl-occ-flagday { --occ-a: #00843d; --occ-b: #ef3340; --occ-ink: #0a6b36; --occ-soft: #e8f6ee; --occ-glow1: rgba(0, 132, 61, .32); --occ-glow2: rgba(239, 51, 64, .26); }
body.cxl.cxl-occ-pharmacistday { --occ-a: #0d9488; --occ-b: #22c55e; --occ-ink: #0f766e; --occ-soft: #e6f7f5; --occ-glow1: rgba(45, 212, 191, .28); --occ-glow2: rgba(34, 197, 94, .22); }

/* card: coloured top stripe + a small greeting chip above the product name */
body.cxl.cxl-occ .cxl-auth::before { background: linear-gradient(90deg, var(--occ-a), var(--occ-b)); height: 4px; }
body.cxl.cxl-occ-nationalday .cxl-auth::before, body.cxl.cxl-occ-flagday .cxl-auth::before {
    background: linear-gradient(90deg, #ef3340 0 22%, #00843d 22% 48%, #f4f4f4 48% 74%, #111 74% 100%); }
.cxl-occ-chip { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 5px 12px 5px 6px; border-radius: 999px;
    background: var(--occ-soft); color: var(--occ-ink); font-size: 12px; font-weight: 700; letter-spacing: .01em; }
.cxl-occ-chip i { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(15, 28, 58, .12); }
.cxl-occ-chip svg { width: 14px; height: 14px; }

/* scene: extra glow in the occasion colours */
body.cxl.cxl-occ .cxl-world.cxs::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: radial-gradient(700px 480px at 30% 18%, var(--occ-glow1), transparent 62%), radial-gradient(800px 560px at 62% 92%, var(--occ-glow2), transparent 64%); }

/* scene heading: artwork + greeting (replaces the one-line description on these days) */
body.cxl.cxl-occ .cxs-head > p { display: none; }
.cxl-occ-head { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 24px); }
.cxl-occ-art { flex: 0 0 auto; width: clamp(120px, 11vw, 170px); height: auto; filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .35)); }
.cxl-occ-txt { min-width: 0; }
.cxl-occ-badge { display: inline-block; padding: 4px 11px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
    color: #fff; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22); }
.cxl-occ-txt h2 { margin: 8px 0 0; font-size: clamp(24px, 2.4vw, 42px); line-height: 1.08; font-weight: 700; letter-spacing: -.02em;
    background: linear-gradient(90deg, #fff, #fff 30%, var(--occ-b)); -webkit-background-clip: text; background-clip: text; color: transparent; }
body.cxl.cxl-occ-nationalday .cxl-occ-txt h2, body.cxl.cxl-occ-flagday .cxl-occ-txt h2 { background-image: linear-gradient(90deg, #ffffff, #c9f2d9 45%, #ff9aa2); }
body.cxl.cxl-occ-pharmacistday .cxl-occ-txt h2 { background-image: linear-gradient(90deg, #ffffff, #99f6e4 50%, #86efac); }
.cxl-occ-txt p { margin: 8px 0 0; max-width: 42ch; font-size: clamp(13px, .95vw, 16px); line-height: 1.55; color: rgba(226, 236, 255, .82); }

/* artwork motion (kept gentle) */
.cxl-occ-art .wave { transform-origin: 22% 50%; animation: cxlOccWave 3.2s ease-in-out infinite; }
@keyframes cxlOccWave { 0%, 100% { transform: skewY(0deg) scaleX(1); } 50% { transform: skewY(-2.2deg) scaleX(.985); } }
.cxl-occ-art .swing { transform-box: fill-box; transform-origin: 50% 0; animation: cxlOccSwing 3.6s ease-in-out infinite; }
.cxl-occ-art .swing.s2 { animation-delay: -1.2s; animation-duration: 4.2s; }
@keyframes cxlOccSwing { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
.cxl-occ-art .glow { animation: cxlOccGlow 2.4s ease-in-out infinite alternate; }
@keyframes cxlOccGlow { from { opacity: .55; } to { opacity: 1; } }
.cxl-occ-art .spark { transform-box: fill-box; transform-origin: center; animation: cxlOccSpark 2.2s ease-in-out infinite; }
.cxl-occ-art .spark.d2 { animation-delay: -.7s; } .cxl-occ-art .spark.d3 { animation-delay: -1.4s; }
@keyframes cxlOccSpark { 0%, 100% { transform: scale(.6); opacity: .4; } 50% { transform: scale(1.1); opacity: 1; } }
.cxl-occ-art .beat { transform-box: fill-box; transform-origin: center; animation: cxlOccBeat 1.6s ease-in-out infinite; }
@keyframes cxlOccBeat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.16); } 30% { transform: scale(1); } }

@media (max-height: 760px) and (min-width: 1021px) {
    .cxl-occ-art { width: 104px; }
    .cxl-occ-txt p { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .cxl-occ-art .wave, .cxl-occ-art .swing, .cxl-occ-art .glow, .cxl-occ-art .spark, .cxl-occ-art .beat { animation: none !important; }
}

/* =====================================================================================================
   Full-page designs (style=full): body gets "cxl-occ-full" and the scene is a <section class="cxo cxo-<key>">.
   ===================================================================================================== */
body.cxl .cxl-world.cxo { padding: 0; display: block; position: relative; overflow: hidden; gap: 0; }
.cxo-stage {
    position: absolute; z-index: 3; top: 0; bottom: 0; left: 0;
    right: calc(450px + clamp(24px, 5vw, 88px) + 40px);
    padding: clamp(28px, 5vh, 60px) clamp(28px, 4.4vw, 72px) clamp(24px, 4vh, 44px);
    display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
}
.cxo-copy { max-width: 620px; }
.cxo-ar { margin: 0; font-family: "Reem Kufi", "Segoe UI", Tahoma, sans-serif; font-weight: 600; font-size: clamp(26px, 2.6vw, 42px); line-height: 1.25; text-align: left; }
.cxo-title { margin: 6px 0 0; font-family: "Reem Kufi", var(--cxl-font); font-weight: 700; font-size: clamp(40px, 4.4vw, 74px); line-height: 1.02; letter-spacing: -.01em; text-wrap: balance; }
.cxo-text { margin: 16px 0 0; max-width: 40ch; font-size: clamp(15px, 1.1vw, 18px); line-height: 1.55; }
.cxo-brand strong { display: block; font-size: clamp(30px, 3vw, 46px); line-height: 1; font-weight: 700; letter-spacing: -.035em; }
.cxo-brand strong sup { font-size: 13px; font-weight: 500; vertical-align: top; position: relative; top: 6px; margin-left: 3px; opacity: .7; }
.cxo-brand em { display: block; margin-top: 8px; font-style: normal; font-size: 13px; opacity: .7; }
.cxo-flag .wave { transform-origin: 2% 50%; animation: cxlOccWave 3.2s ease-in-out infinite; }

/* card on full-design days: occasion colour on the button, field focus and links */
body.cxl-occ-full .cxl-form button[type="submit"] { background: linear-gradient(135deg, var(--occ-a), var(--occ-btn, var(--occ-a))); box-shadow: 0 16px 30px -14px var(--occ-glow1), inset 0 1px 0 rgba(255, 255, 255, .28); }
body.cxl-occ-full .cxl-row a { color: var(--occ-ink); }
body.cxl-occ-full .cxl-form input:focus { border-color: var(--occ-a); box-shadow: 0 0 0 4px var(--occ-soft); }
body.cxl.cxl-occ-full.cxl-occ-nationalday { --occ-btn: #006b31; --occ-glow1: rgba(0, 132, 61, .7); }
body.cxl.cxl-occ-full.cxl-occ-flagday { --occ-a: #00843d; --occ-btn: #006b31; --occ-glow1: rgba(0, 132, 61, .55); }
body.cxl.cxl-occ-full.cxl-occ-pharmacistday { --occ-a: #0d9488; --occ-btn: #0b766c; --occ-glow1: rgba(13, 148, 136, .6); }
body.cxl.cxl-occ-full.cxl-occ-flagday .cxl-auth, body.cxl.cxl-occ-full.cxl-occ-pharmacistday .cxl-auth {
    border-color: rgba(255, 255, 255, .9); box-shadow: 0 40px 80px -34px rgba(12, 40, 60, .45), 0 0 0 8px rgba(255, 255, 255, .45); }

/* ---------- National Day: night sky, fireworks over the city ---------- */
.cxo-nationalday { color: #fff; background:
    radial-gradient(900px 520px at 30% 100%, rgba(0, 132, 61, .35), transparent 65%),
    radial-gradient(700px 420px at 85% 0%, rgba(239, 51, 64, .18), transparent 60%),
    linear-gradient(180deg, #03070f 0%, #071422 55%, #0a2219 100%); }
.cxo-sky { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.cxo-fw { position: absolute; transform: translate(-50%, -50%) scale(.2); opacity: 0; animation: cxoBurst 3.6s ease-out infinite; filter: drop-shadow(0 0 6px rgba(255, 255, 255, .35)); }
@keyframes cxoBurst {
    0% { transform: translate(-50%, -50%) scale(.15); opacity: 0; }
    12% { opacity: 1; }
    45% { transform: translate(-50%, -50%) scale(1); opacity: .95; }
    70% { transform: translate(-50%, -46%) scale(1.08); opacity: 0; }
    100% { transform: translate(-50%, -46%) scale(1.08); opacity: 0; }
}
.cxo-skyline { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 34vh; display: block; }
.cxo-nationalday .cxo-copy { padding-top: 2vh; }
.cxo-nationalday .cxo-flag { width: clamp(150px, 13vw, 210px); height: auto; display: block; margin: 0 0 18px -4px; filter: drop-shadow(0 16px 26px rgba(0, 0, 0, .5)); }
.cxo-nationalday .cxo-ar { color: #8ee6b0; }
.cxo-nationalday .cxo-title { color: #fff; }
.cxo-nationalday .cxo-text { color: rgba(236, 244, 240, .78); }
.cxo-nationalday .cxo-brand { position: relative; z-index: 2; }
.cxo-nationalday .cxo-brand em { color: #d7f5e3; }

/* ---------- Flag Day: daylight, the flag rises up the pole on load ---------- */
.cxo-flagday { color: #0c2233; background: linear-gradient(180deg, #a9d4fb 0%, #d7ebff 46%, #f4f9ff 78%, #ffffff 100%); }
.cxo-day { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.cxo-day .sun { position: absolute; width: 520px; height: 520px; right: 22%; top: -200px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 244, 205, .95) 0 18%, rgba(255, 236, 170, .45) 32%, transparent 66%); }
.cxo-day .cloud { position: absolute; height: 46px; border-radius: 999px; background: #fff; opacity: .85; filter: blur(.4px); box-shadow: 40px -18px 0 6px #fff, 90px -6px 0 0 #fff; }
.cxo-day .c1 { width: 150px; left: 44%; top: 15%; }
.cxo-day .c2 { width: 110px; left: 12%; top: 64%; opacity: .6; transform: scale(.7); }
.cxo-day .c3 { width: 130px; left: 68%; top: 72%; opacity: .55; transform: scale(.8); }
.cxo-day .ground { position: absolute; left: 0; right: 0; bottom: 0; height: 9vh; background: linear-gradient(180deg, rgba(0, 132, 61, .0), rgba(0, 132, 61, .12)); }
.cxo-raise { flex: 1; min-height: 0; display: flex; align-items: stretch; gap: clamp(28px, 3.4vw, 56px); }
.cxo-pole { position: relative; flex: 0 0 auto; width: clamp(150px, 14vw, 220px); }
.cxo-pole::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 6px; width: 8px; border-radius: 4px; background: linear-gradient(90deg, #8a97a8, #f5f7fa 45%, #aab6c4); box-shadow: 2px 0 6px rgba(12, 34, 51, .18); }
.cxo-pole-top { position: absolute; left: -5px; top: 0; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff3c4, #d9a521 70%); }
.cxo-pole-base { position: absolute; left: -16px; bottom: 0; width: 40px; height: 10px; border-radius: 4px 4px 0 0; background: #8a97a8; }
.cxo-rise { position: absolute; left: 8px; top: 18px; width: 100%; animation: cxoRise 2.8s cubic-bezier(.22, .7, .2, 1) .3s both; }
.cxo-rise .cxo-flag { width: 100%; height: auto; display: block; filter: drop-shadow(0 12px 18px rgba(12, 34, 51, .22)); }
@keyframes cxoRise { from { top: calc(100% - 150px); } }
.cxo-flagday .cxo-copy { align-self: center; padding-bottom: 4vh; }
.cxo-flagday .cxo-ar { color: #00843d; }
.cxo-flagday .cxo-title { color: #0c2233; }
.cxo-flagday .cxo-text { color: #3b5266; }
.cxo-note { display: inline-flex; align-items: center; gap: 10px; margin: 22px 0 0; padding: 9px 16px 9px 12px; border-radius: 999px; background: rgba(255, 255, 255, .75); border: 1px solid rgba(12, 34, 51, .08); font-size: 14px; font-weight: 600; color: #0c2233; }
.cxo-note::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #ef3340; box-shadow: 0 0 0 4px rgba(239, 51, 64, .18); }
.cxo-flagday .cxo-brand { color: #0c2233; }

/* ---------- World Pharmacists Day: mint, pills and a thank-you ---------- */
.cxo-pharmacistday { color: #0b3f3a; background: linear-gradient(160deg, #e4f7f1 0%, #cdeee4 60%, #bfe7db 100%); }
.cxo-pattern { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; display: block; opacity: .9; }
.cxo-capsule { width: clamp(150px, 13vw, 210px); height: auto; display: block; margin: 0 0 14px -10px; filter: drop-shadow(0 18px 22px rgba(11, 63, 58, .22)); }
.cxo-capsule .beat { transform-box: fill-box; transform-origin: center; animation: cxlOccBeat 1.8s ease-in-out infinite; }
.cxo-pharmacistday .cxo-ar { color: #0d9488; font-size: clamp(22px, 2.1vw, 34px); }
.cxo-pharmacistday .cxo-title { font-family: "Bricolage Grotesque", var(--cxl-font); font-weight: 800; font-size: clamp(44px, 5vw, 86px); line-height: .98; letter-spacing: -.035em; color: #0b3f3a; }
.cxo-pharmacistday .cxo-text { color: #2d5f58; font-size: clamp(16px, 1.2vw, 20px); }
.cxo-pharmacistday .cxo-brand { color: #0b3f3a; }

@media (max-width: 1280px) and (min-width: 1021px) {
    .cxo-stage { right: calc(410px + clamp(24px, 5vw, 88px) + 28px); }
}
@media (max-height: 760px) and (min-width: 1021px) {
    .cxo-text { display: none; }
    .cxo-note { display: none; }
    .cxo-nationalday .cxo-flag, .cxo-capsule { width: 120px; margin-bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) {
    .cxo-fw { animation: none; opacity: .8; transform: translate(-50%, -50%) scale(1); }
    .cxo-rise { animation: none; }
    .cxo-flag .wave, .cxo-capsule .beat { animation: none; }
}
.cxo-nationalday .cxo-copy { margin: auto 0; padding-top: 0; padding-bottom: 8vh; }

/* =====================================================================================================
   More special days (generic full-page design: artwork + Arabic + greeting over a themed pattern).
   ===================================================================================================== */
.cxl-occ-head .cxo-art { flex: 0 0 auto; width: clamp(120px, 11vw, 170px); height: auto; filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .3)); }
.cxo-gen { color: var(--cxo-ink); background: linear-gradient(160deg, var(--cxo-bg1) 0%, var(--cxo-bg2) 100%); }
.cxo-pat { position: absolute; inset: -25%; z-index: 1; background-size: 170px 170px; transform: rotate(-14deg); opacity: .75; pointer-events: none; }
.cxo-gen::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(900px 640px at 22% 44%, var(--cxo-bg1) 0%, color-mix(in srgb, var(--cxo-bg1) 70%, transparent) 45%, transparent 75%); }
.cxo-gen .cxo-copy { margin: auto 0; padding-bottom: 6vh; }
.cxo-gen .cxo-art { width: clamp(170px, 15vw, 240px); height: auto; display: block; margin: 0 0 18px -6px; filter: drop-shadow(0 18px 24px rgba(15, 23, 42, .18)); overflow: visible; }
.cxo-gen .cxo-ar { color: var(--cxo-ar); font-size: clamp(22px, 2.1vw, 34px); }
.cxo-gen .cxo-title { font-family: "Bricolage Grotesque", var(--cxl-font); font-weight: 800; font-size: clamp(42px, 4.6vw, 80px); line-height: 1; letter-spacing: -.03em; color: var(--cxo-ink); }
.cxo-gen .cxo-text { color: var(--cxo-text); }
.cxo-gen .cxo-brand { color: var(--cxo-ink); position: relative; z-index: 3; }
.cxo-art .swing { transform-box: fill-box; transform-origin: 50% 100%; animation: cxlOccSwing 4s ease-in-out infinite; }
.cxo-art .spark { transform-box: fill-box; transform-origin: center; animation: cxlOccSpark 2.2s ease-in-out infinite; }
.cxo-art .spark.d2 { animation-delay: -.7s; } .cxo-art .spark.d3 { animation-delay: -1.4s; }
.cxo-art .beat { transform-box: fill-box; transform-origin: center; animation: cxlOccBeat 1.6s ease-in-out infinite; }
.cxo-art .glow { animation: cxlOccGlow 2.6s ease-in-out infinite alternate; }
/* dark days */
.cxo-gen.cxo-newyear .cxo-art, .cxo-gen.cxo-christmas .cxo-art, .cxo-gen.cxo-commemorationday .cxo-art { filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .45)); }
.cxo-gen.cxo-commemorationday::before { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(700px 520px at 26% 30%, rgba(246, 196, 83, .10), transparent 65%); }
.cxo-gen.cxo-commemorationday .cxo-title { font-family: "Reem Kufi", var(--cxl-font); font-weight: 600; letter-spacing: 0; }
body.cxl.cxl-occ-newyear { --occ-a: #c99a2e; --occ-b: #f6c453; --occ-ink: #9f7414; --occ-soft: #fdf3d7; --occ-glow1: #c99a2e55; --occ-glow2: #c99a2e40; --occ-btn: #9f7414; }
.cxo-newyear { --cxo-bg1: #0a1230; --cxo-bg2: #1d2a5c; --cxo-ink: #ffffff; --cxo-ar: #f6c453; --cxo-text: rgba(230,236,255,.8); }
.cxo-newyear .cxo-pat { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22160%22 height=%22160%22 viewBox=%220 0 160 160%22%3E%3Cpath d=%22M30 21 L32.5 27.5 L39 30 L32.5 32.5 L30 39 L27.5 32.5 L21 30 L27.5 27.5Z%22 fill=%22%23f6c453%22/%3E%3Crect x=%22100%22 y=%2240%22 width=%2210%22 height=%224%22 rx=%221%22 transform=%22rotate(30 100 40)%22 fill=%22%23ffffff%22/%3E%3Cpath d=%22M130 104 L131.7 108.3 L136 110 L131.7 111.7 L130 116 L128.3 111.7 L124 110 L128.3 108.3Z%22 fill=%22%23ffffff%22/%3E%3Crect x=%2240%22 y=%22120%22 width=%2210%22 height=%224%22 rx=%221%22 transform=%22rotate(-25 40 120)%22 fill=%22%23f6c453%22/%3E%3Ccircle cx=%2290%22 cy=%2290%22 r=%222.5%22 fill=%22%23f6c453%22/%3E%3C/svg%3E"); }
body.cxl.cxl-occ-cancerday { --occ-a: #7c3aed; --occ-b: #7c3aed; --occ-ink: #5b21b6; --occ-soft: #ede9fe; --occ-glow1: #7c3aed55; --occ-glow2: #7c3aed40; --occ-btn: #5b21b6; }
.cxo-cancerday { --cxo-bg1: #f4effe; --cxo-bg2: #e2d6fb; --cxo-ink: #2e1065; --cxo-ar: #7c3aed; --cxo-text: #4c3a75; }
.cxo-cancerday .cxo-pat { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22160%22 height=%22160%22 viewBox=%220 0 160 160%22%3E%3Cpath transform=%22translate(35 40) scale(1.400)%22 d=%22M-7 12 L3 -1 C7 -7 5 -12 0 -12 C-5 -12 -7 -7 -3 -1 L7 12%22 fill=%22none%22 stroke=%22%237c3aed%22 stroke-width=%223.2%22 stroke-linejoin=%22round%22/%3E%3Cpath transform=%22translate(120 110) scale(1.100)%22 d=%22M-7 12 L3 -1 C7 -7 5 -12 0 -12 C-5 -12 -7 -7 -3 -1 L7 12%22 fill=%22none%22 stroke=%22%23a78bfa%22 stroke-width=%223.2%22 stroke-linejoin=%22round%22/%3E%3Ccircle cx=%22110%22 cy=%2240%22 r=%224%22 fill=%22%23c4b5fd%22/%3E%3Ccircle cx=%2240%22 cy=%22125%22 r=%223%22 fill=%22%237c3aed%22/%3E%3C/svg%3E"); }
body.cxl.cxl-occ-full.cxl-occ-cancerday .cxl-auth { border-color: rgba(255, 255, 255, .9); box-shadow: 0 40px 80px -34px rgba(12, 40, 60, .4), 0 0 0 8px rgba(255, 255, 255, .45); }
body.cxl.cxl-occ-childrensday { --occ-a: #0284c7; --occ-b: #0284c7; --occ-ink: #0369a1; --occ-soft: #e0f2fe; --occ-glow1: #0284c755; --occ-glow2: #0284c740; --occ-btn: #0369a1; }
.cxo-childrensday { --cxo-bg1: #dff3ff; --cxo-bg2: #fff4cc; --cxo-ink: #0c3a5c; --cxo-ar: #0284c7; --cxo-text: #3b5d76; }
.cxo-childrensday .cxo-pat { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22160%22 height=%22160%22 viewBox=%220 0 160 160%22%3E%3Cellipse cx=%2230%22 cy=%2235%22 rx=%228%22 ry=%2210%22 fill=%22%23f43f5e%22/%3E%3Cpath d=%22M30 45 q-3 6 1 12%22 fill=%22none%22 stroke=%22%23f43f5e%22 stroke-width=%221.2%22/%3E%3Cellipse cx=%22115%22 cy=%2230%22 rx=%228%22 ry=%2210%22 fill=%22%23facc15%22/%3E%3Cpath d=%22M115 40 q-3 6 1 12%22 fill=%22none%22 stroke=%22%23facc15%22 stroke-width=%221.2%22/%3E%3Cellipse cx=%2280%22 cy=%22105%22 rx=%228%22 ry=%2210%22 fill=%22%2338bdf8%22/%3E%3Cpath d=%22M80 115 q-3 6 1 12%22 fill=%22none%22 stroke=%22%2338bdf8%22 stroke-width=%221.2%22/%3E%3Cpath d=%22M140 103 L142.0 108.0 L147 110 L142.0 112.0 L140 117 L138.0 112.0 L133 110 L138.0 108.0Z%22 fill=%22%23facc15%22/%3E%3Cpath d=%22M35 120 L36.4 123.6 L40 125 L36.4 126.4 L35 130 L33.6 126.4 L30 125 L33.6 123.6Z%22 fill=%22%23a78bfa%22/%3E%3C/svg%3E"); }
body.cxl.cxl-occ-full.cxl-occ-childrensday .cxl-auth { border-color: rgba(255, 255, 255, .9); box-shadow: 0 40px 80px -34px rgba(12, 40, 60, .4), 0 0 0 8px rgba(255, 255, 255, .45); }
body.cxl.cxl-occ-healthday { --occ-a: #0093d5; --occ-b: #0093d5; --occ-ink: #00709f; --occ-soft: #e0f2fe; --occ-glow1: #0093d555; --occ-glow2: #0093d540; --occ-btn: #00709f; }
.cxo-healthday { --cxo-bg1: #e6f4fc; --cxo-bg2: #cce7f7; --cxo-ink: #063a5c; --cxo-ar: #0093d5; --cxo-text: #2d5873; }
.cxo-healthday .cxo-pat { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22160%22 height=%22160%22 viewBox=%220 0 160 160%22%3E%3Cpath d=%22M31.5 25 h7.0 v6.5 h6.5 v7.0 h-6.5 v6.5 h-7.0 v-6.5 h-6.5 v-7.0 h6.5z%22 fill=%22%230093d5%22/%3E%3Ccircle cx=%22115%22 cy=%2245%22 r=%229%22 fill=%22none%22 stroke=%22%237dd3fc%22 stroke-width=%223%22/%3E%3Cpath d=%22M107.6 113 h4.8 v4.6 h4.6 v4.8 h-4.6 v4.6 h-4.8 v-4.6 h-4.6 v-4.8 h4.6z%22 fill=%22%237dd3fc%22/%3E%3Ccircle cx=%2240%22 cy=%22115%22 r=%224%22 fill=%22%230093d5%22/%3E%3C/svg%3E"); }
body.cxl.cxl-occ-full.cxl-occ-healthday .cxl-auth { border-color: rgba(255, 255, 255, .9); box-shadow: 0 40px 80px -34px rgba(12, 40, 60, .4), 0 0 0 8px rgba(255, 255, 255, .45); }
body.cxl.cxl-occ-handhygieneday { --occ-a: #0891b2; --occ-b: #0891b2; --occ-ink: #0e7490; --occ-soft: #cffafe; --occ-glow1: #0891b255; --occ-glow2: #0891b240; --occ-btn: #0e7490; }
.cxo-handhygieneday { --cxo-bg1: #e4f9fc; --cxo-bg2: #c6eef5; --cxo-ink: #083d48; --cxo-ar: #0891b2; --cxo-text: #2f6470; }
.cxo-handhygieneday .cxo-pat { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22160%22 height=%22160%22 viewBox=%220 0 160 160%22%3E%3Ccircle cx=%2230%22 cy=%2235%22 r=%2210%22 fill=%22none%22 stroke=%22%2367e8f9%22 stroke-width=%222.5%22/%3E%3Ccircle cx=%2252%22 cy=%2258%22 r=%225%22 fill=%22none%22 stroke=%22%2367e8f9%22 stroke-width=%222%22/%3E%3Cpath transform=%22translate(120 40) scale(1.200)%22 d=%22M0 -12 C5 -5 9 0 9 5 A9 9 0 0 1 -9 5 C-9 0 -5 -5 0 -12Z%22 fill=%22%230891b2%22/%3E%3Ccircle cx=%22110%22 cy=%22115%22 r=%2213%22 fill=%22none%22 stroke=%22%23a5f3fc%22 stroke-width=%222.5%22/%3E%3Ccircle cx=%2240%22 cy=%22120%22 r=%223%22 fill=%22%230891b2%22/%3E%3C/svg%3E"); }
body.cxl.cxl-occ-full.cxl-occ-handhygieneday .cxl-auth { border-color: rgba(255, 255, 255, .9); box-shadow: 0 40px 80px -34px rgba(12, 40, 60, .4), 0 0 0 8px rgba(255, 255, 255, .45); }
body.cxl.cxl-occ-nursesday { --occ-a: #2563eb; --occ-b: #2563eb; --occ-ink: #1d4ed8; --occ-soft: #dbeafe; --occ-glow1: #2563eb55; --occ-glow2: #2563eb40; --occ-btn: #1d4ed8; }
.cxo-nursesday { --cxo-bg1: #eff5ff; --cxo-bg2: #dbe7fb; --cxo-ink: #12285a; --cxo-ar: #2563eb; --cxo-text: #3d4f78; }
.cxo-nursesday .cxo-pat { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22160%22 height=%22160%22 viewBox=%220 0 160 160%22%3E%3Cpath d=%22M28.9 27 h6.2 v5.9 h5.9 v6.2 h-5.9 v5.9 h-6.2 v-5.9 h-5.9 v-6.2 h5.9z%22 fill=%22%232563eb%22/%3E%3Cg transform=%22translate(115 40) scale(0.900)%22%3E%3Cpath d=%22M0 9 C-7 4 -11 0 -11 -4.5 A5.5 5.5 0 0 1 0 -6.5 A5.5 5.5 0 0 1 11 -4.5 C11 0 7 4 0 9Z%22 fill=%22%2393c5fd%22/%3E%3C/g%3E%3Cpath d=%22M107.9 112 h4.2 v3.9 h3.9 v4.2 h-3.9 v3.9 h-4.2 v-3.9 h-3.9 v-4.2 h3.9z%22 fill=%22%2393c5fd%22/%3E%3Cg transform=%22translate(40 118) scale(0.700)%22%3E%3Cpath d=%22M0 9 C-7 4 -11 0 -11 -4.5 A5.5 5.5 0 0 1 0 -6.5 A5.5 5.5 0 0 1 11 -4.5 C11 0 7 4 0 9Z%22 fill=%22%232563eb%22/%3E%3C/g%3E%3C/svg%3E"); }
body.cxl.cxl-occ-full.cxl-occ-nursesday .cxl-auth { border-color: rgba(255, 255, 255, .9); box-shadow: 0 40px 80px -34px rgba(12, 40, 60, .4), 0 0 0 8px rgba(255, 255, 255, .45); }
body.cxl.cxl-occ-blooddonorday { --occ-a: #dc2626; --occ-b: #dc2626; --occ-ink: #b91c1c; --occ-soft: #fee2e2; --occ-glow1: #dc262655; --occ-glow2: #dc262640; --occ-btn: #b91c1c; }
.cxo-blooddonorday { --cxo-bg1: #fff2f2; --cxo-bg2: #ffdcdc; --cxo-ink: #5c0b0b; --cxo-ar: #dc2626; --cxo-text: #7a3a3a; }
.cxo-blooddonorday .cxo-pat { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22160%22 height=%22160%22 viewBox=%220 0 160 160%22%3E%3Cpath transform=%22translate(32 40) scale(1.300)%22 d=%22M0 -12 C5 -5 9 0 9 5 A9 9 0 0 1 -9 5 C-9 0 -5 -5 0 -12Z%22 fill=%22%23dc2626%22/%3E%3Cg transform=%22translate(118 40) scale(0.800)%22%3E%3Cpath d=%22M0 9 C-7 4 -11 0 -11 -4.5 A5.5 5.5 0 0 1 0 -6.5 A5.5 5.5 0 0 1 11 -4.5 C11 0 7 4 0 9Z%22 fill=%22%23fca5a5%22/%3E%3C/g%3E%3Cpath transform=%22translate(110 118) scale(0.900)%22 d=%22M0 -12 C5 -5 9 0 9 5 A9 9 0 0 1 -9 5 C-9 0 -5 -5 0 -12Z%22 fill=%22%23f87171%22/%3E%3Ccircle cx=%2240%22 cy=%22120%22 r=%224%22 fill=%22%23fca5a5%22/%3E%3C/svg%3E"); }
body.cxl.cxl-occ-full.cxl-occ-blooddonorday .cxl-auth { border-color: rgba(255, 255, 255, .9); box-shadow: 0 40px 80px -34px rgba(12, 40, 60, .4), 0 0 0 8px rgba(255, 255, 255, .45); }
body.cxl.cxl-occ-womensday { --occ-a: #86198f; --occ-b: #86198f; --occ-ink: #701a75; --occ-soft: #fae8ff; --occ-glow1: #86198f55; --occ-glow2: #86198f40; --occ-btn: #701a75; }
.cxo-womensday { --cxo-bg1: #f8f0f9; --cxo-bg2: #ebdbf1; --cxo-ink: #3b0d4a; --cxo-ar: #86198f; --cxo-text: #5e3a6a; }
.cxo-womensday .cxo-pat { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22160%22 height=%22160%22 viewBox=%220 0 160 160%22%3E%3Cellipse cx=%2235%22 cy=%2229%22 rx=%225.0%22 ry=%229.0%22 transform=%22rotate(0 35 38)%22 fill=%22%23d8b4fe%22/%3E%3Cellipse cx=%2235%22 cy=%2229%22 rx=%225.0%22 ry=%229.0%22 transform=%22rotate(72 35 38)%22 fill=%22%23d8b4fe%22/%3E%3Cellipse cx=%2235%22 cy=%2229%22 rx=%225.0%22 ry=%229.0%22 transform=%22rotate(144 35 38)%22 fill=%22%23d8b4fe%22/%3E%3Cellipse cx=%2235%22 cy=%2229%22 rx=%225.0%22 ry=%229.0%22 transform=%22rotate(216 35 38)%22 fill=%22%23d8b4fe%22/%3E%3Cellipse cx=%2235%22 cy=%2229%22 rx=%225.0%22 ry=%229.0%22 transform=%22rotate(288 35 38)%22 fill=%22%23d8b4fe%22/%3E%3Ccircle cx=%2235%22 cy=%2238%22 r=%224.0%22 fill=%22%23f6c453%22/%3E%3Cellipse cx=%22115%22 cy=%22105%22 rx=%223.9%22 ry=%227.0%22 transform=%22rotate(0 115 112)%22 fill=%22%2386198f%22/%3E%3Cellipse cx=%22115%22 cy=%22105%22 rx=%223.9%22 ry=%227.0%22 transform=%22rotate(72 115 112)%22 fill=%22%2386198f%22/%3E%3Cellipse cx=%22115%22 cy=%22105%22 rx=%223.9%22 ry=%227.0%22 transform=%22rotate(144 115 112)%22 fill=%22%2386198f%22/%3E%3Cellipse cx=%22115%22 cy=%22105%22 rx=%223.9%22 ry=%227.0%22 transform=%22rotate(216 115 112)%22 fill=%22%2386198f%22/%3E%3Cellipse cx=%22115%22 cy=%22105%22 rx=%223.9%22 ry=%227.0%22 transform=%22rotate(288 115 112)%22 fill=%22%2386198f%22/%3E%3Ccircle cx=%22115%22 cy=%22112%22 r=%223.1%22 fill=%22%23f6c453%22/%3E%3Ccircle cx=%22118%22 cy=%2236%22 r=%224%22 fill=%22%23f6c453%22/%3E%3Ccircle cx=%2238%22 cy=%22118%22 r=%223%22 fill=%22%23c084fc%22/%3E%3C/svg%3E"); }
body.cxl.cxl-occ-full.cxl-occ-womensday .cxl-auth { border-color: rgba(255, 255, 255, .9); box-shadow: 0 40px 80px -34px rgba(12, 40, 60, .4), 0 0 0 8px rgba(255, 255, 255, .45); }
body.cxl.cxl-occ-patientsafetyday { --occ-a: #ea580c; --occ-b: #ea580c; --occ-ink: #c2410c; --occ-soft: #ffedd5; --occ-glow1: #ea580c55; --occ-glow2: #ea580c40; --occ-btn: #c2410c; }
.cxo-patientsafetyday { --cxo-bg1: #fff5ec; --cxo-bg2: #ffe4cc; --cxo-ink: #5a2a06; --cxo-ar: #ea580c; --cxo-text: #7a4a2a; }
.cxo-patientsafetyday .cxo-pat { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22160%22 height=%22160%22 viewBox=%220 0 160 160%22%3E%3Cpath d=%22M21 38 l7.7 7.7 l14.3 -15.4%22 fill=%22none%22 stroke=%22%23ea580c%22 stroke-width=%223.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Ccircle cx=%22115%22 cy=%2240%22 r=%229%22 fill=%22none%22 stroke=%22%23fdba74%22 stroke-width=%223%22/%3E%3Cpath d=%22M102 118 l5.6 5.6 l10.4 -11.2%22 fill=%22none%22 stroke=%22%23fb923c%22 stroke-width=%223.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Ccircle cx=%2238%22 cy=%22120%22 r=%224%22 fill=%22%23fdba74%22/%3E%3C/svg%3E"); }
body.cxl.cxl-occ-full.cxl-occ-patientsafetyday .cxl-auth { border-color: rgba(255, 255, 255, .9); box-shadow: 0 40px 80px -34px rgba(12, 40, 60, .4), 0 0 0 8px rgba(255, 255, 255, .45); }
body.cxl.cxl-occ-heartday { --occ-a: #e11d48; --occ-b: #e11d48; --occ-ink: #be123c; --occ-soft: #ffe4e6; --occ-glow1: #e11d4855; --occ-glow2: #e11d4840; --occ-btn: #be123c; }
.cxo-heartday { --cxo-bg1: #fff2f3; --cxo-bg2: #ffdde2; --cxo-ink: #5f0a1e; --cxo-ar: #e11d48; --cxo-text: #7a3a48; }
.cxo-heartday .cxo-pat { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22160%22 height=%22160%22 viewBox=%220 0 160 160%22%3E%3Cg transform=%22translate(35 38) scale(1.200)%22%3E%3Cpath d=%22M0 9 C-7 4 -11 0 -11 -4.5 A5.5 5.5 0 0 1 0 -6.5 A5.5 5.5 0 0 1 11 -4.5 C11 0 7 4 0 9Z%22 fill=%22%23e11d48%22/%3E%3C/g%3E%3Cg transform=%22translate(118 46) scale(0.800)%22%3E%3Cpath d=%22M0 9 C-7 4 -11 0 -11 -4.5 A5.5 5.5 0 0 1 0 -6.5 A5.5 5.5 0 0 1 11 -4.5 C11 0 7 4 0 9Z%22 fill=%22%23fda4af%22/%3E%3C/g%3E%3Cg transform=%22translate(100 120) scale(1.000)%22%3E%3Cpath d=%22M0 9 C-7 4 -11 0 -11 -4.5 A5.5 5.5 0 0 1 0 -6.5 A5.5 5.5 0 0 1 11 -4.5 C11 0 7 4 0 9Z%22 fill=%22%23fb7185%22/%3E%3C/g%3E%3Ccircle cx=%2236%22 cy=%22118%22 r=%223%22 fill=%22%23fda4af%22/%3E%3C/svg%3E"); }
body.cxl.cxl-occ-full.cxl-occ-heartday .cxl-auth { border-color: rgba(255, 255, 255, .9); box-shadow: 0 40px 80px -34px rgba(12, 40, 60, .4), 0 0 0 8px rgba(255, 255, 255, .45); }
body.cxl.cxl-occ-breastcancermonth { --occ-a: #db2777; --occ-b: #db2777; --occ-ink: #be185d; --occ-soft: #fce7f3; --occ-glow1: #db277755; --occ-glow2: #db277740; --occ-btn: #be185d; }
.cxo-breastcancermonth { --cxo-bg1: #fff1f7; --cxo-bg2: #fbd9e9; --cxo-ink: #5c0a35; --cxo-ar: #db2777; --cxo-text: #7a3a5a; }
.cxo-breastcancermonth .cxo-pat { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22160%22 height=%22160%22 viewBox=%220 0 160 160%22%3E%3Cpath transform=%22translate(35 40) scale(1.400)%22 d=%22M-7 12 L3 -1 C7 -7 5 -12 0 -12 C-5 -12 -7 -7 -3 -1 L7 12%22 fill=%22none%22 stroke=%22%23db2777%22 stroke-width=%223.2%22 stroke-linejoin=%22round%22/%3E%3Cg transform=%22translate(118 40) scale(0.800)%22%3E%3Cpath d=%22M0 9 C-7 4 -11 0 -11 -4.5 A5.5 5.5 0 0 1 0 -6.5 A5.5 5.5 0 0 1 11 -4.5 C11 0 7 4 0 9Z%22 fill=%22%23f9a8d4%22/%3E%3C/g%3E%3Cpath transform=%22translate(110 118) scale(1.000)%22 d=%22M-7 12 L3 -1 C7 -7 5 -12 0 -12 C-5 -12 -7 -7 -3 -1 L7 12%22 fill=%22none%22 stroke=%22%23f472b6%22 stroke-width=%223.2%22 stroke-linejoin=%22round%22/%3E%3Ccircle cx=%2240%22 cy=%22120%22 r=%223.5%22 fill=%22%23f9a8d4%22/%3E%3C/svg%3E"); }
body.cxl.cxl-occ-full.cxl-occ-breastcancermonth .cxl-auth { border-color: rgba(255, 255, 255, .9); box-shadow: 0 40px 80px -34px rgba(12, 40, 60, .4), 0 0 0 8px rgba(255, 255, 255, .45); }
body.cxl.cxl-occ-diabetesday { --occ-a: #1f6fd6; --occ-b: #1f6fd6; --occ-ink: #1857ad; --occ-soft: #dbeafe; --occ-glow1: #1f6fd655; --occ-glow2: #1f6fd640; --occ-btn: #1857ad; }
.cxo-diabetesday { --cxo-bg1: #ecf3ff; --cxo-bg2: #d4e4ff; --cxo-ink: #0b2a5c; --cxo-ar: #1f6fd6; --cxo-text: #34507a; }
.cxo-diabetesday .cxo-pat { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22160%22 height=%22160%22 viewBox=%220 0 160 160%22%3E%3Ccircle cx=%2235%22 cy=%2238%22 r=%2211%22 fill=%22none%22 stroke=%22%231f6fd6%22 stroke-width=%224%22/%3E%3Cpath transform=%22translate(118 40) scale(1.000)%22 d=%22M0 -12 C5 -5 9 0 9 5 A9 9 0 0 1 -9 5 C-9 0 -5 -5 0 -12Z%22 fill=%22%2393c5fd%22/%3E%3Ccircle cx=%22110%22 cy=%22118%22 r=%228%22 fill=%22none%22 stroke=%22%2393c5fd%22 stroke-width=%223.5%22/%3E%3Ccircle cx=%2240%22 cy=%22120%22 r=%223%22 fill=%22%231f6fd6%22/%3E%3C/svg%3E"); }
body.cxl.cxl-occ-full.cxl-occ-diabetesday .cxl-auth { border-color: rgba(255, 255, 255, .9); box-shadow: 0 40px 80px -34px rgba(12, 40, 60, .4), 0 0 0 8px rgba(255, 255, 255, .45); }
body.cxl.cxl-occ-amrweek { --occ-a: #4f46e5; --occ-b: #4f46e5; --occ-ink: #4338ca; --occ-soft: #e0e7ff; --occ-glow1: #4f46e555; --occ-glow2: #4f46e540; --occ-btn: #4338ca; }
.cxo-amrweek { --cxo-bg1: #eff1ff; --cxo-bg2: #dde1fb; --cxo-ink: #1e1b4b; --cxo-ar: #4f46e5; --cxo-text: #44447a; }
.cxo-amrweek .cxo-pat { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22160%22 height=%22160%22 viewBox=%220 0 160 160%22%3E%3Cg transform=%22translate(38 38) rotate(30)%22%3E%3Crect x=%22-16%22 y=%22-6.5%22 width=%2232%22 height=%2213%22 rx=%226.5%22 fill=%22%23ffffff%22/%3E%3Cpath d=%22M0 -6.5 h9.5 a6.5 6.5 0 0 1 0 13 h-9.5z%22 fill=%22%234f46e5%22/%3E%3C/g%3E%3Cg transform=%22translate(115 115) rotate(-35)%22%3E%3Crect x=%22-16%22 y=%22-6.5%22 width=%2232%22 height=%2213%22 rx=%226.5%22 fill=%22%23ffffff%22/%3E%3Cpath d=%22M0 -6.5 h9.5 a6.5 6.5 0 0 1 0 13 h-9.5z%22 fill=%22%23a5b4fc%22/%3E%3C/g%3E%3Ccircle cx=%22118%22 cy=%2238%22 r=%224%22 fill=%22%23a5b4fc%22/%3E%3Ccircle cx=%2240%22 cy=%22118%22 r=%223%22 fill=%22%234f46e5%22/%3E%3C/svg%3E"); }
body.cxl.cxl-occ-full.cxl-occ-amrweek .cxl-auth { border-color: rgba(255, 255, 255, .9); box-shadow: 0 40px 80px -34px rgba(12, 40, 60, .4), 0 0 0 8px rgba(255, 255, 255, .45); }
body.cxl.cxl-occ-christmas { --occ-a: #c81e3a; --occ-b: #fca5a5; --occ-ink: #9f1239; --occ-soft: #ffe4e6; --occ-glow1: #c81e3a55; --occ-glow2: #c81e3a40; --occ-btn: #9f1239; }
.cxo-christmas { --cxo-bg1: #0b2a1f; --cxo-bg2: #15402e; --cxo-ink: #ffffff; --cxo-ar: #fca5a5; --cxo-text: rgba(226,244,234,.8); }
.cxo-christmas .cxo-pat { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22160%22 height=%22160%22 viewBox=%220 0 160 160%22%3E%3Cpath d=%22M30 22 L32.2 27.8 L38 30 L32.2 32.2 L30 38 L27.8 32.2 L22 30 L27.8 27.8Z%22 fill=%22%23ffffff%22/%3E%3Ccircle cx=%22110%22 cy=%2240%22 r=%224%22 fill=%22none%22 stroke=%22%23ffffff%22 stroke-width=%221.5%22/%3E%3Cpath d=%22M118 106 L119.7 110.3 L124 112 L119.7 113.7 L118 118 L116.3 113.7 L112 112 L116.3 110.3Z%22 fill=%22%23f6c453%22/%3E%3Ccircle cx=%2260%22 cy=%2295%22 r=%222.5%22 fill=%22%23ffffff%22/%3E%3Ccircle cx=%2240%22 cy=%22128%22 r=%223%22 fill=%22%23ffffff%22/%3E%3Cpath d=%22M140 66 L141.1 68.9 L144 70 L141.1 71.1 L140 74 L138.9 71.1 L136 70 L138.9 68.9Z%22 fill=%22%23ffffff%22/%3E%3C/svg%3E"); }
body.cxl.cxl-occ-commemorationday { --occ-a: #334155; --occ-b: #cbd5e1; --occ-ink: #0f172a; --occ-soft: #e2e8f0; --occ-glow1: #33415555; --occ-glow2: #33415540; --occ-btn: #0f172a; }
.cxo-commemorationday { --cxo-bg1: #0d1522; --cxo-bg2: #1d2a3c; --cxo-ink: #f1f5f9; --cxo-ar: #cbd5e1; --cxo-text: rgba(226,232,240,.76); }
.cxo-commemorationday .cxo-pat { display: none; }
body.cxl.cxl-occ-full.cxl-occ-commemorationday .cxl-form button[type="submit"] { background: linear-gradient(135deg, #334155, #0f172a); }
@media (max-height: 760px) and (min-width: 1021px) { .cxo-gen .cxo-art { width: 130px; margin-bottom: 8px; } }
@media (prefers-reduced-motion: reduce) { .cxo-art .swing, .cxo-art .spark, .cxo-art .beat, .cxo-art .glow { animation: none; } }

/* ---------- moving layer for every day (particles) ---------- */
.cxo-fx { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
.cxo-fx i { position: absolute; left: var(--x); top: 0; width: var(--s); height: var(--s); background: no-repeat center / contain; opacity: 0; will-change: transform; animation: var(--fx-anim, cxoFall) var(--t) linear var(--d) infinite; }
@keyframes cxoFall { 0% { transform: translate3d(0, -8vh, 0) rotate(0deg); opacity: 0; } 8% { opacity: var(--fx-o, .8); } 50% { transform: translate3d(26px, 50vh, 0) rotate(180deg); } 92% { opacity: var(--fx-o, .8); } 100% { transform: translate3d(-10px, 108vh, 0) rotate(360deg); opacity: 0; } }
@keyframes cxoRise { 0% { transform: translate3d(0, 108vh, 0) rotate(-6deg); opacity: 0; } 10% { opacity: var(--fx-o, .8); } 50% { transform: translate3d(-22px, 50vh, 0) rotate(6deg); } 90% { opacity: var(--fx-o, .8); } 100% { transform: translate3d(14px, -10vh, 0) rotate(-4deg); opacity: 0; } }
@keyframes cxoFloat { 0% { transform: translate3d(-60px, 0, 0) rotate(0deg); opacity: 0; } 15% { opacity: var(--fx-o, .8); } 50% { transform: translate3d(90px, -46px, 0) rotate(160deg); } 85% { opacity: var(--fx-o, .8); } 100% { transform: translate3d(240px, 6px, 0) rotate(320deg); opacity: 0; } }
@keyframes cxoPop { 0%, 100% { transform: translate3d(0, 0, 0) scale(.3); opacity: 0; } 20% { transform: translate3d(0, 0, 0) scale(1.1); opacity: var(--fx-o, .8); } 30% { transform: translate3d(0, 0, 0) scale(1); } 60% { transform: translate3d(0, -14px, 0) scale(1); opacity: var(--fx-o, .8); } 75% { transform: translate3d(0, -20px, 0) scale(.6); opacity: 0; } }
.cxo-newyear .cxo-fx { --fx-anim: cxoFall; --fx-o: 0.9; }
.cxo-newyear .cxo-fx i { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22-20 -20 40 40%22%3E%3Crect x=%22-7.0%22 y=%22-3.0%22 width=%2214%22 height=%226%22 rx=%221.5%22 fill=%22%23f6c453%22/%3E%3C/svg%3E"); }
.cxo-newyear .cxo-fx i:nth-child(2n) { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22-20 -20 40 40%22%3E%3Cpath d=%22M0 -13 L3.6 -3.6 L13 0 L3.6 3.6 L0 13 L-3.6 3.6 L-13 0 L-3.6 -3.6Z%22 fill=%22%23ffffff%22/%3E%3C/svg%3E"); }
.cxo-cancerday .cxo-fx { --fx-anim: cxoRise; --fx-o: 0.7; }
.cxo-cancerday .cxo-fx i { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22-20 -20 40 40%22%3E%3Cpath transform=%22translate(0 0) scale(1.400)%22 d=%22M-7 12 L3 -1 C7 -7 5 -12 0 -12 C-5 -12 -7 -7 -3 -1 L7 12%22 fill=%22none%22 stroke=%22%238b5cf6%22 stroke-width=%223.4%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E"); }
.cxo-cancerday .cxo-fx i:nth-child(2n) { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22-20 -20 40 40%22%3E%3Cg transform=%22translate(0 0) scale(1.100)%22%3E%3Cpath d=%22M0 9 C-7 4 -11 0 -11 -4.5 A5.5 5.5 0 0 1 0 -6.5 A5.5 5.5 0 0 1 11 -4.5 C11 0 7 4 0 9Z%22 fill=%22%23c4b5fd%22/%3E%3C/g%3E%3C/svg%3E"); }
.cxo-childrensday .cxo-fx { --fx-anim: cxoRise; --fx-o: 0.85; }
.cxo-childrensday .cxo-fx i { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22-20 -20 40 40%22%3E%3Cellipse cx=%220%22 cy=%22-5%22 rx=%2211%22 ry=%2213.5%22 fill=%22%23f43f5e%22/%3E%3Cpath d=%22M-2 8 h4 l-2 3z%22 fill=%22%23f43f5e%22/%3E%3Cpath d=%22M0 11 q-3 4 1 9%22 fill=%22none%22 stroke=%22%23f43f5e%22 stroke-width=%221%22/%3E%3Cellipse cx=%22-4%22 cy=%22-10%22 rx=%223%22 ry=%224.5%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3C/svg%3E"); }
.cxo-childrensday .cxo-fx i:nth-child(2n) { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22-20 -20 40 40%22%3E%3Cellipse cx=%220%22 cy=%22-5%22 rx=%2211%22 ry=%2213.5%22 fill=%22%2338bdf8%22/%3E%3Cpath d=%22M-2 8 h4 l-2 3z%22 fill=%22%2338bdf8%22/%3E%3Cpath d=%22M0 11 q-3 4 1 9%22 fill=%22none%22 stroke=%22%2338bdf8%22 stroke-width=%221%22/%3E%3Cellipse cx=%22-4%22 cy=%22-10%22 rx=%223%22 ry=%224.5%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3C/svg%3E"); }
.cxo-healthday .cxo-fx { --fx-anim: cxoFloat; --fx-o: 0.6; }
.cxo-healthday .cxo-fx i { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22-20 -20 40 40%22%3E%3Cpath d=%22M-4.2 -12 h8.4 v7.8 h7.8 v8.4 h-7.8 v7.8 h-8.4 v-7.8 h-7.8 v-8.4 h7.8z%22 fill=%22%230093d5%22/%3E%3C/svg%3E"); }
.cxo-healthday .cxo-fx i:nth-child(2n) { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22-20 -20 40 40%22%3E%3Ccircle cx=%220%22 cy=%220%22 r=%2210%22 fill=%22none%22 stroke=%22%237dd3fc%22 stroke-width=%223%22/%3E%3C/svg%3E"); }
.cxo-healthday .cxo-fx i { top: var(--y); }
.cxo-handhygieneday .cxo-fx { --fx-anim: cxoRise; --fx-o: 0.8; }
.cxo-handhygieneday .cxo-fx i { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22-20 -20 40 40%22%3E%3Ccircle r=%2215%22 fill=%22%230891b2%22 fill-opacity=%22.18%22 stroke=%22%230891b2%22 stroke-width=%222%22/%3E%3Cellipse cx=%22-5%22 cy=%22-6%22 rx=%224%22 ry=%222.5%22 fill=%22%23fff%22 opacity=%22.8%22/%3E%3C/svg%3E"); }
.cxo-handhygieneday .cxo-fx i:nth-child(2n) { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22-20 -20 40 40%22%3E%3Ccircle r=%2215%22 fill=%22%2322d3ee%22 fill-opacity=%22.18%22 stroke=%22%2322d3ee%22 stroke-width=%222%22/%3E%3Cellipse cx=%22-5%22 cy=%22-6%22 rx=%224%22 ry=%222.5%22 fill=%22%23fff%22 opacity=%22.8%22/%3E%3C/svg%3E"); }
.cxo-nursesday .cxo-fx { --fx-anim: cxoRise; --fx-o: 0.6; }
.cxo-nursesday .cxo-fx i { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22-20 -20 40 40%22%3E%3Cg transform=%22translate(0 0) scale(1.300)%22%3E%3Cpath d=%22M0 9 C-7 4 -11 0 -11 -4.5 A5.5 5.5 0 0 1 0 -6.5 A5.5 5.5 0 0 1 11 -4.5 C11 0 7 4 0 9Z%22 fill=%22%233b82f6%22/%3E%3C/g%3E%3C/svg%3E"); }
.cxo-nursesday .cxo-fx i:nth-child(2n) { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22-20 -20 40 40%22%3E%3Cpath d=%22M-3.8 -11 h7.6 v7.2 h7.2 v7.6 h-7.2 v7.2 h-7.6 v-7.2 h-7.2 v-7.6 h7.2z%22 fill=%22%2393c5fd%22/%3E%3C/svg%3E"); }
.cxo-blooddonorday .cxo-fx { --fx-anim: cxoFall; --fx-o: 0.6; }
.cxo-blooddonorday .cxo-fx i { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22-20 -20 40 40%22%3E%3Cpath transform=%22translate(0 2) scale(1.400)%22 d=%22M0 -12 C5 -5 9 0 9 5 A9 9 0 0 1 -9 5 C-9 0 -5 -5 0 -12Z%22 fill=%22%23dc2626%22/%3E%3C/svg%3E"); }
.cxo-blooddonorday .cxo-fx i:nth-child(2n) { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22-20 -20 40 40%22%3E%3Cg transform=%22translate(0 0) scale(1.100)%22%3E%3Cpath d=%22M0 9 C-7 4 -11 0 -11 -4.5 A5.5 5.5 0 0 1 0 -6.5 A5.5 5.5 0 0 1 11 -4.5 C11 0 7 4 0 9Z%22 fill=%22%23f87171%22/%3E%3C/g%3E%3C/svg%3E"); }
.cxo-womensday .cxo-fx { --fx-anim: cxoFall; --fx-o: 0.75; }
.cxo-womensday .cxo-fx i { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22-20 -20 40 40%22%3E%3Cpath d=%22M0 -14 C9 -6 9 6 0 14 C-9 6 -9 -6 0 -14Z%22 fill=%22%23c026d3%22/%3E%3C/svg%3E"); }
.cxo-womensday .cxo-fx i:nth-child(2n) { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22-20 -20 40 40%22%3E%3Cpath d=%22M0 -14 C9 -6 9 6 0 14 C-9 6 -9 -6 0 -14Z%22 fill=%22%23f0abfc%22/%3E%3C/svg%3E"); }
.cxo-patientsafetyday .cxo-fx { --fx-anim: cxoPop; --fx-o: 0.7; }
.cxo-patientsafetyday .cxo-fx i { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22-20 -20 40 40%22%3E%3Cpath d=%22M-12 2 l7.0 7.0 l13.0 -14.0%22 fill=%22none%22 stroke=%22%23ea580c%22 stroke-width=%223.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E"); }
.cxo-patientsafetyday .cxo-fx i:nth-child(2n) { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22-20 -20 40 40%22%3E%3Ccircle cx=%220%22 cy=%220%22 r=%2211%22 fill=%22none%22 stroke=%22%23fb923c%22 stroke-width=%223%22/%3E%3C/svg%3E"); }
.cxo-patientsafetyday .cxo-fx i { top: var(--y); }
.cxo-heartday .cxo-fx { --fx-anim: cxoRise; --fx-o: 0.7; }
.cxo-heartday .cxo-fx i { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22-20 -20 40 40%22%3E%3Cg transform=%22translate(0 0) scale(1.500)%22%3E%3Cpath d=%22M0 9 C-7 4 -11 0 -11 -4.5 A5.5 5.5 0 0 1 0 -6.5 A5.5 5.5 0 0 1 11 -4.5 C11 0 7 4 0 9Z%22 fill=%22%23e11d48%22/%3E%3C/g%3E%3C/svg%3E"); }
.cxo-heartday .cxo-fx i:nth-child(2n) { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22-20 -20 40 40%22%3E%3Cg transform=%22translate(0 0) scale(1.200)%22%3E%3Cpath d=%22M0 9 C-7 4 -11 0 -11 -4.5 A5.5 5.5 0 0 1 0 -6.5 A5.5 5.5 0 0 1 11 -4.5 C11 0 7 4 0 9Z%22 fill=%22%23fb7185%22/%3E%3C/g%3E%3C/svg%3E"); }
.cxo-breastcancermonth .cxo-fx { --fx-anim: cxoRise; --fx-o: 0.7; }
.cxo-breastcancermonth .cxo-fx i { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22-20 -20 40 40%22%3E%3Cpath transform=%22translate(0 0) scale(1.400)%22 d=%22M-7 12 L3 -1 C7 -7 5 -12 0 -12 C-5 -12 -7 -7 -3 -1 L7 12%22 fill=%22none%22 stroke=%22%23db2777%22 stroke-width=%223.4%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E"); }
.cxo-breastcancermonth .cxo-fx i:nth-child(2n) { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22-20 -20 40 40%22%3E%3Cg transform=%22translate(0 0) scale(1.100)%22%3E%3Cpath d=%22M0 9 C-7 4 -11 0 -11 -4.5 A5.5 5.5 0 0 1 0 -6.5 A5.5 5.5 0 0 1 11 -4.5 C11 0 7 4 0 9Z%22 fill=%22%23f9a8d4%22/%3E%3C/g%3E%3C/svg%3E"); }
.cxo-diabetesday .cxo-fx { --fx-anim: cxoRise; --fx-o: 0.6; }
.cxo-diabetesday .cxo-fx i { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22-20 -20 40 40%22%3E%3Ccircle cx=%220%22 cy=%220%22 r=%2212%22 fill=%22none%22 stroke=%22%231f6fd6%22 stroke-width=%224.5%22/%3E%3C/svg%3E"); }
.cxo-diabetesday .cxo-fx i:nth-child(2n) { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22-20 -20 40 40%22%3E%3Cpath transform=%22translate(0 2) scale(1.100)%22 d=%22M0 -12 C5 -5 9 0 9 5 A9 9 0 0 1 -9 5 C-9 0 -5 -5 0 -12Z%22 fill=%22%2360a5fa%22/%3E%3C/svg%3E"); }
.cxo-amrweek .cxo-fx { --fx-anim: cxoFloat; --fx-o: 0.85; }
.cxo-amrweek .cxo-fx i { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22-20 -20 40 40%22%3E%3Cg transform=%22translate(0 0) rotate(30)%22%3E%3Crect x=%22-16%22 y=%22-6.5%22 width=%2232%22 height=%2213%22 rx=%226.5%22 fill=%22%23ffffff%22/%3E%3Cpath d=%22M0 -6.5 h9.5 a6.5 6.5 0 0 1 0 13 h-9.5z%22 fill=%22%234f46e5%22/%3E%3C/g%3E%3C/svg%3E"); }
.cxo-amrweek .cxo-fx i:nth-child(2n) { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22-20 -20 40 40%22%3E%3Cg transform=%22translate(0 0) rotate(-30)%22%3E%3Crect x=%22-16%22 y=%22-6.5%22 width=%2232%22 height=%2213%22 rx=%226.5%22 fill=%22%23ffffff%22/%3E%3Cpath d=%22M0 -6.5 h9.5 a6.5 6.5 0 0 1 0 13 h-9.5z%22 fill=%22%23a5b4fc%22/%3E%3C/g%3E%3C/svg%3E"); }
.cxo-amrweek .cxo-fx i { top: var(--y); }
.cxo-commemorationday .cxo-fx { --fx-anim: cxoRise; --fx-o: 0.45; }
.cxo-commemorationday .cxo-fx i { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22-20 -20 40 40%22%3E%3Ccircle r=%226%22 fill=%22%23f6c453%22/%3E%3Ccircle r=%2214%22 fill=%22%23f6c453%22 opacity=%22.25%22/%3E%3C/svg%3E"); }
.cxo-commemorationday .cxo-fx i:nth-child(2n) { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22-20 -20 40 40%22%3E%3Ccircle r=%226%22 fill=%22%23fde68a%22/%3E%3Ccircle r=%2214%22 fill=%22%23fde68a%22 opacity=%22.25%22/%3E%3C/svg%3E"); }
.cxo-christmas .cxo-fx { --fx-anim: cxoFall; --fx-o: 0.85; }
.cxo-christmas .cxo-fx i { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22-20 -20 40 40%22%3E%3Cline x1=%220%22 y1=%220%22 x2=%220%22 y2=%22-15%22 transform=%22rotate(0)%22 stroke=%22%23fff%22 stroke-width=%222.4%22 stroke-linecap=%22round%22/%3E%3Cline x1=%220%22 y1=%220%22 x2=%220%22 y2=%22-15%22 transform=%22rotate(60)%22 stroke=%22%23fff%22 stroke-width=%222.4%22 stroke-linecap=%22round%22/%3E%3Cline x1=%220%22 y1=%220%22 x2=%220%22 y2=%22-15%22 transform=%22rotate(120)%22 stroke=%22%23fff%22 stroke-width=%222.4%22 stroke-linecap=%22round%22/%3E%3Cline x1=%220%22 y1=%220%22 x2=%220%22 y2=%22-15%22 transform=%22rotate(180)%22 stroke=%22%23fff%22 stroke-width=%222.4%22 stroke-linecap=%22round%22/%3E%3Cline x1=%220%22 y1=%220%22 x2=%220%22 y2=%22-15%22 transform=%22rotate(240)%22 stroke=%22%23fff%22 stroke-width=%222.4%22 stroke-linecap=%22round%22/%3E%3Cline x1=%220%22 y1=%220%22 x2=%220%22 y2=%22-15%22 transform=%22rotate(300)%22 stroke=%22%23fff%22 stroke-width=%222.4%22 stroke-linecap=%22round%22/%3E%3Ccircle r=%223%22 fill=%22%23fff%22/%3E%3C/svg%3E"); }
.cxo-christmas .cxo-fx i:nth-child(2n) { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22-20 -20 40 40%22%3E%3Ccircle r=%2212%22 fill=%22%23fff%22/%3E%3C/svg%3E"); }
.cxo-pharmacistday .cxo-fx { --fx-anim: cxoFloat; --fx-o: 0.9; }
.cxo-pharmacistday .cxo-fx i { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22-20 -20 40 40%22%3E%3Cg transform=%22translate(0 0) rotate(30)%22%3E%3Crect x=%22-16%22 y=%22-6.5%22 width=%2232%22 height=%2213%22 rx=%226.5%22 fill=%22%23ffffff%22/%3E%3Cpath d=%22M0 -6.5 h9.5 a6.5 6.5 0 0 1 0 13 h-9.5z%22 fill=%22%230d9488%22/%3E%3C/g%3E%3C/svg%3E"); }
.cxo-pharmacistday .cxo-fx i:nth-child(2n) { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22-20 -20 40 40%22%3E%3Cg transform=%22translate(0 0) rotate(-30)%22%3E%3Crect x=%22-16%22 y=%22-6.5%22 width=%2232%22 height=%2213%22 rx=%226.5%22 fill=%22%23ffffff%22/%3E%3Cpath d=%22M0 -6.5 h9.5 a6.5 6.5 0 0 1 0 13 h-9.5z%22 fill=%22%23fb7185%22/%3E%3C/g%3E%3C/svg%3E"); }
.cxo-pharmacistday .cxo-fx i { top: var(--y); }
.cxo-nationalday .cxo-fx { --fx-anim: cxoFall; --fx-o: 0.7; }
.cxo-nationalday .cxo-fx i { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22-20 -20 40 40%22%3E%3Crect x=%22-7.0%22 y=%22-3.0%22 width=%2214%22 height=%226%22 rx=%221.5%22 fill=%22%2300843d%22/%3E%3C/svg%3E"); }
.cxo-nationalday .cxo-fx i:nth-child(2n) { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22-20 -20 40 40%22%3E%3Crect x=%22-7.0%22 y=%22-3.0%22 width=%2214%22 height=%226%22 rx=%221.5%22 fill=%22%23ef3340%22/%3E%3C/svg%3E"); }
/* Flag Day: clouds drift, sun glows */
.cxo-day .cloud { animation: cxoCloud 38s linear infinite; } .cxo-day .c2 { animation-duration: 52s; animation-delay: -20s; } .cxo-day .c3 { animation-duration: 46s; animation-delay: -34s; }
@keyframes cxoCloud { from { translate: -40vw 0; } to { translate: 60vw 0; } }
.cxo-day .sun { animation: cxoSun 5s ease-in-out infinite alternate; } @keyframes cxoSun { to { opacity: .75; scale: 1.06; } }
/* gentle float of the main artwork */
.cxo-gen .cxo-art, .cxo-capsule { animation: cxoBob 5s ease-in-out infinite; } @keyframes cxoBob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
/* greeting entrance (once, on load) */
.cxo .cxo-copy > * { animation: cxoIn .9s cubic-bezier(.2, .7, .2, 1) both; } .cxo .cxo-copy > :nth-child(2) { animation-delay: .12s; } .cxo .cxo-copy > :nth-child(3) { animation-delay: .24s; } .cxo .cxo-copy > :nth-child(4) { animation-delay: .36s; }
.cxo .cxo-copy > .cxo-art, .cxo .cxo-copy > .cxo-capsule { animation: cxoIn .9s cubic-bezier(.2, .7, .2, 1) both, cxoBob 5s ease-in-out 1s infinite; }
@keyframes cxoIn { from { opacity: 0; translate: 0 18px; } }
@media (prefers-reduced-motion: reduce) { .cxo-fx { display: none; } .cxo-day .cloud, .cxo-day .sun, .cxo-gen .cxo-art, .cxo-capsule, .cxo .cxo-copy > * { animation: none !important; } }
.cxo-gen .cxo-fx { z-index: 3; }
body.cxl .cxl-world.cxo { z-index: 0; isolation: isolate; }

/* ---------- New Year: rockets + bursts, big golden year, shimmering title, midnight clock ---------- */
.cxo-newyear { background: radial-gradient(1000px 600px at 30% 110%, rgba(124, 58, 237, .35), transparent 65%), radial-gradient(800px 500px at 70% -10%, rgba(246, 196, 83, .16), transparent 60%), linear-gradient(180deg, #050a24 0%, #0c1640 55%, #1a1450 100%); }
.cxo-nyshow { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.cxo-rk { position: absolute; left: var(--l); top: var(--t); width: 0; height: 0; }
.cxo-rk i { position: absolute; left: -1.5px; top: 0; width: 3px; height: 90px; border-radius: 2px; background: linear-gradient(180deg, #fff6d6, rgba(246, 196, 83, .6) 30%, transparent); opacity: 0; animation: cxoRocket var(--dur) cubic-bezier(.3, .6, .4, 1) var(--d) infinite; }
.cxo-rk b { position: absolute; left: calc(var(--s) / -2); top: calc(var(--s) / -2); width: var(--s); height: var(--s); opacity: 0; animation: cxoPop2 var(--dur) ease-out var(--d) infinite; filter: drop-shadow(0 0 8px rgba(255, 230, 160, .55)); }
.cxo-rk b svg { width: 100%; height: 100%; display: block; }
@keyframes cxoRocket { 0% { transform: translateY(85vh); opacity: 0; } 4% { opacity: 1; } 30% { transform: translateY(0); opacity: 1; } 34%, 100% { transform: translateY(0); opacity: 0; } }
@keyframes cxoPop2 { 0%, 30% { transform: scale(.1) rotate(0deg); opacity: 0; } 34% { opacity: 1; } 62% { transform: scale(1) rotate(12deg); opacity: .95; } 86% { transform: scale(1.12) translateY(14px) rotate(18deg); opacity: 0; } 100% { opacity: 0; } }
.cxo-bigyear { position: absolute; left: clamp(28px, 4.4vw, 72px); bottom: -4vh; font-family: "Bricolage Grotesque", var(--cxl-font); font-weight: 800; font-size: clamp(160px, 20vw, 330px); line-height: 1; letter-spacing: -.04em;
    color: transparent; -webkit-text-stroke: 2px rgba(246, 196, 83, .45);
    background: linear-gradient(100deg, rgba(246, 196, 83, .05) 30%, rgba(255, 236, 170, .55) 50%, rgba(246, 196, 83, .05) 70%); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text;
    animation: cxoShine 6s linear infinite; }
.cxo-newyear .cxo-title { background: linear-gradient(100deg, #fff 0 38%, #f6c453 48%, #fff7d6 52%, #fff 62% 100%); background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: cxoIn .9s cubic-bezier(.2, .7, .2, 1) .24s both, cxoShine 4.5s linear 1.2s infinite; }
@keyframes cxoShine { from { background-position: 130% 0; } to { background-position: -130% 0; } }
.cxo-art .ny-min { transform-origin: 100px 82px; animation: cxoMin 2.2s cubic-bezier(.5, 0, .2, 1) .3s both; }
.cxo-art .ny-hour { transform-origin: 100px 82px; animation: cxoHour 2.2s cubic-bezier(.5, 0, .2, 1) .3s both; }
@keyframes cxoMin { from { transform: rotate(-90deg); } }
@keyframes cxoHour { from { transform: rotate(-12deg); } }
.cxo-art .ny-ray { opacity: 0; animation: cxoRay 3.2s ease-out infinite; transform-origin: 100px 82px; }
@keyframes cxoRay { 0% { opacity: 0; transform: scale(.7); } 12% { opacity: 1; } 40% { opacity: 0; transform: scale(1.15); } 100% { opacity: 0; } }
.cxo-art .ny-glow { transform-origin: 100px 82px; animation: cxoGlowP 2.4s ease-in-out infinite alternate; }
@keyframes cxoGlowP { from { opacity: .08; transform: scale(.95); } to { opacity: .28; transform: scale(1.06); } }

@media (prefers-reduced-motion: reduce) { .cxo-rk, .cxo-sleigh-run, .cxo-art .santa-wave, .cxo-art .ny-ray, .cxo-art .ny-glow, .cxo-bigyear, .cxo-newyear .cxo-title { animation: none !important; } .cxo-rk b { opacity: .8; transform: none; } }

/* ---------- Christmas v2: animated Santa, flying sleigh, string lights, village ---------- */
.cxo-christmas { background: radial-gradient(900px 600px at 50% 0%, rgba(96, 165, 250, .16), transparent 60%), linear-gradient(180deg, #06162a 0%, #0a2a22 62%, #0f3a28 100%); }
.cxo-xmas { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.cxo-moon { position: absolute; left: 44%; top: 9%; width: 110px; height: 110px; border-radius: 50%; background: radial-gradient(circle at 38% 38%, #fffef4, #fdf3c4 60%, #f2dd91); box-shadow: 0 0 60px 18px rgba(253, 243, 196, .26), 0 0 160px 40px rgba(253, 243, 196, .1); }
.cxo-lights { position: absolute; left: 0; top: 0; width: 100%; height: 60px; display: block; }
.cxo-lights .lt-b { animation: cxoBulb 2s ease-in-out infinite; }
@keyframes cxoBulb { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.cxo-sleigh-run { position: absolute; left: 0; top: 5%; width: clamp(520px, 42vw, 700px); animation: cxoSleigh2 14s linear .6s infinite; }
@keyframes cxoSleigh2 { 0% { transform: translate(-110%, 70px) rotate(-5deg); } 45% { transform: translate(36vw, -6px) rotate(-3deg); } 100% { transform: translate(105vw, 30px) rotate(-7deg); } }
.cxo-sleigh { width: 100%; height: auto; display: block; overflow: visible; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .35)); animation: cxoBobS 1.2s ease-in-out infinite; }
.cxo-sleigh .rd-leg { transform-box: fill-box; transform-origin: 50% 0%; animation: cxoGallop .5s ease-in-out infinite alternate; }
.cxo-sleigh .rd-f { animation-name: cxoGallopF; }
@keyframes cxoGallop { from { transform: rotate(-22deg); } to { transform: rotate(18deg); } }
@keyframes cxoGallopF { from { transform: rotate(20deg); } to { transform: rotate(-24deg); } }
.cxo-sleigh .rd-nose { animation: cxoNose 1s ease-in-out infinite alternate; }
@keyframes cxoNose { from { filter: drop-shadow(0 0 2px #ef4444); } to { filter: drop-shadow(0 0 9px #f87171); } }
.cxo-sleigh .sl-arm { transform-box: fill-box; transform-origin: 0% 100%; animation: cxoWave2 .8s ease-in-out infinite alternate; }
.cxo-sleigh .sl-tr { animation: cxoTrail .9s linear infinite; }
@keyframes cxoTrail { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(-26px); } }
.cxo-village { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 28vh; display: block; }
.cxo-village .hw { animation: cxoWin 3s ease-in-out infinite alternate; } .cxo-village .hw.d2 { animation-delay: -1.4s; }
@keyframes cxoWin { from { opacity: .7; } to { opacity: 1; } }
.cxo-village .smk { transform-box: fill-box; transform-origin: center; opacity: 0; animation: cxoSmoke 3.3s ease-out infinite; }
@keyframes cxoSmoke { 0% { opacity: 0; transform: translate(0, 0) scale(.4); } 20% { opacity: .7; } 100% { opacity: 0; transform: translate(14px, -46px) scale(1.6); } }
.cxo-christmas .cxo-brand { color: #0f3a28; position: relative; z-index: 4; }
.cxo-christmas .cxo-brand em { color: #335e4c; }
.cxo-gen.cxo-christmas .cxo-copy { padding-bottom: 12vh; }
.cxo-gen.cxo-christmas .cxo-art.sx { width: clamp(300px, 27vw, 420px); margin: 0 0 6px -14px; overflow: visible; animation: cxoIn .9s cubic-bezier(.2, .7, .2, 1) both; }
/* Santa: bounces, waves, blinks, nods, pom swings, says Ho Ho Ho */
.sx .sx-body { animation: cxoSantaBob 1.1s ease-in-out infinite; }
@keyframes cxoSantaBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.sx .sx-shadow { transform-box: fill-box; transform-origin: center; animation: cxoShadow 1.1s ease-in-out infinite; }
@keyframes cxoShadow { 50% { transform: scaleX(.85); opacity: .14; } }
.sx .sx-arm { transform-box: fill-box; transform-origin: 0% 100%; animation: cxoWave2 .7s ease-in-out infinite alternate; }
@keyframes cxoWave2 { from { transform: rotate(-14deg); } to { transform: rotate(16deg); } }
.sx .sx-head { transform-box: fill-box; transform-origin: 50% 90%; animation: cxoNod 2.2s ease-in-out infinite; }
@keyframes cxoNod { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(5deg); } }
.sx .sx-eyes { transform-box: fill-box; transform-origin: center; animation: cxoBlink 4s infinite; }
@keyframes cxoBlink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
.sx .sx-pom { transform-box: fill-box; transform-origin: 0% 0%; animation: cxoPom 1.1s ease-in-out infinite; }
@keyframes cxoPom { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(14deg); } }
.sx .sx-gifts { transform-box: fill-box; transform-origin: 50% 100%; animation: cxoGift 1.1s ease-in-out infinite; }
@keyframes cxoGift { 50% { transform: translateY(-3px) rotate(-3deg); } }
.sx .sx-ho { transform-box: fill-box; transform-origin: 0% 100%; animation: cxoHo 4s ease-in-out 1s infinite; opacity: 0; }
@keyframes cxoHo { 0% { opacity: 0; transform: scale(.4); } 8% { opacity: 1; transform: scale(1.08); } 12% { transform: scale(1); } 55% { opacity: 1; transform: scale(1); } 65%, 100% { opacity: 0; transform: scale(.6); } }
@media (prefers-reduced-motion: reduce) { .cxo-sleigh-run, .cxo-sleigh, .cxo-sleigh *, .sx *, .cxo-lights *, .cxo-village * { animation: none !important; } .sx .sx-ho { opacity: 1; } }
@media (max-height: 760px) and (min-width: 1021px) { .cxo-gen.cxo-christmas .cxo-art.sx { width: 240px; } .cxo-sleigh-run { width: 440px; } }