.animated-countdown-app {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 360px;
    overflow: hidden;
    background-color: #bcecff;
    background-position: center;
    background-size: cover;
    color: #172554;
    font-family: "Trebuchet MS", system-ui, sans-serif;
    isolation: isolate;
}

.animated-countdown-app * { box-sizing: border-box; }
.animated-countdown-app .sr-only { position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap; }
.animated-countdown-character-layer { position:absolute;inset:0;z-index:1;pointer-events:none; }
.animated-countdown-character {
    position: absolute;
    width: var(--character-size);
    aspect-ratio: 1;
    will-change: transform, opacity;
    transform-origin: center;
}
.animated-countdown-character-inner {
    position:absolute;inset:0;
    animation: animated-countdown-hover 3.6s ease-in-out infinite alternate;
    animation-delay: var(--hover-delay);
}
.animated-countdown-character img { position:absolute;inset:0;width:100%;height:100%;object-fit:contain;user-select:none; }
.animated-countdown-frame-secondary {
    opacity:0;
    animation:animated-countdown-flap var(--flap-speed) steps(1,end) infinite;
    animation-delay:var(--flap-delay);
}
.animated-countdown-frame-primary:not(:only-child) {
    animation:animated-countdown-open var(--flap-speed) steps(1,end) infinite;
    animation-delay:var(--flap-delay);
}
@keyframes animated-countdown-flap { 0%,49%{opacity:0} 50%,100%{opacity:1} }
@keyframes animated-countdown-open { 0%,49%{opacity:1} 50%,100%{opacity:0} }
@keyframes animated-countdown-hover { from{transform:translate3d(-2px,-3px,0) rotate(-2deg)} to{transform:translate3d(3px,4px,0) rotate(3deg)} }
.animated-countdown-three-frame .animated-countdown-frame-primary { animation:animated-countdown-frame-one var(--flap-speed) steps(1,end) infinite;animation-delay:var(--flap-delay); }
.animated-countdown-three-frame .animated-countdown-frame-secondary { animation:animated-countdown-frame-two var(--flap-speed) steps(1,end) infinite;animation-delay:var(--flap-delay); }
.animated-countdown-frame-tertiary { opacity:0; }
.animated-countdown-three-frame .animated-countdown-frame-tertiary { animation:animated-countdown-frame-three var(--flap-speed) steps(1,end) infinite;animation-delay:var(--flap-delay); }
@keyframes animated-countdown-frame-one { 0%,32%{opacity:1} 33%,100%{opacity:0} }
@keyframes animated-countdown-frame-two { 0%,32%{opacity:0} 33%,65%{opacity:1} 66%,100%{opacity:0} }
@keyframes animated-countdown-frame-three { 0%,65%{opacity:0} 66%,100%{opacity:1} }
.animated-countdown-departure-frame .animated-countdown-frame-primary { opacity:1;animation:none; }
.animated-countdown-departure-frame .animated-countdown-frame-secondary { opacity:0;animation:none; }
.animated-countdown-character.is-departing .animated-countdown-departure-frame .animated-countdown-frame-primary { opacity:0; }
.animated-countdown-character.is-departing .animated-countdown-departure-frame .animated-countdown-frame-secondary { opacity:1; }

.animated-countdown-clock {
    position:absolute;z-index:3;left:70%;top:43%;transform:translate(-50%,-50%);
    display:grid;place-items:center;width:clamp(150px,22vw,270px);aspect-ratio:1;border-radius:50%;
    background:rgba(255,255,255,.9);border:clamp(5px,.8vw,10px) solid rgba(255,255,255,.72);
    box-shadow:0 16px 42px rgba(30,64,175,.2),inset 0 0 0 3px rgba(147,197,253,.55);
    backdrop-filter:blur(4px);
}
.animated-countdown-time { max-width:90%;font-size:clamp(2.7rem,7vw,6rem);font-weight:950;line-height:1;letter-spacing:-.08em;font-variant-numeric:tabular-nums;color:#1e3a5f;text-align:center;text-shadow:0 2px 0 #fff;white-space:nowrap; }
.animated-countdown-message { position:absolute;z-index:10;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;min-width:max-content;border:0;border-radius:2rem;background:rgba(255,255,255,.92);padding:clamp(1.2rem,3vw,2rem) clamp(2rem,6vw,5rem);color:#9d174d;font:950 clamp(3rem,10vw,8rem)/1 "Trebuchet MS",sans-serif;letter-spacing:-.04em;text-shadow:0 3px 0 #fff;box-shadow:0 18px 50px rgba(76,29,149,.28); }
.animated-countdown-message[hidden] { display:none; }
.animated-countdown-demo-handoff { position:absolute;z-index:20;inset:0;display:grid;place-items:center;padding:1rem;background:rgba(15,23,42,.62);backdrop-filter:blur(5px); }
.animated-countdown-demo-handoff[hidden] { display:none; }
.animated-countdown-demo-handoff-card { position:relative;width:min(470px,100%);border:2px solid rgba(255,255,255,.8);border-radius:1.5rem;background:linear-gradient(145deg,#fff7ed,#fdf2f8 52%,#f5f3ff);padding:clamp(1.2rem,4vw,2rem);box-shadow:0 24px 70px rgba(15,23,42,.38);text-align:center; }
.animated-countdown-demo-handoff-card h2 { margin:0;color:#4c1d95;font-size:clamp(1.45rem,5vw,2rem);line-height:1.15; }
.animated-countdown-demo-handoff-card p { margin:.75rem 0;color:#5b526d;font-size:.92rem;font-weight:700;line-height:1.5; }
.animated-countdown-demo-handoff-close { position:absolute;right:.65rem;top:.65rem;display:grid;width:2.1rem;height:2.1rem;place-items:center;border:1px solid #fdba74;border-radius:50%;background:#fff;color:#c2410c;font:950 1.2rem/1 system-ui,sans-serif;cursor:pointer; }
.animated-countdown-demo-handoff-form { display:grid;gap:.65rem;margin-top:1rem; }
.animated-countdown-demo-handoff-form input { width:100%;min-height:2.8rem;border:1px solid #c4b5fd;border-radius:.85rem;background:#fff;padding:.65rem .85rem;color:#172554;font:700 .9rem/1.2 "Trebuchet MS",sans-serif; }
.animated-countdown-demo-handoff-form button { min-height:2.8rem;border:0;border-radius:.85rem;background:#f97316;padding:.65rem 1rem;color:#fff;font:900 .9rem/1.2 "Trebuchet MS",sans-serif;cursor:pointer; }
.animated-countdown-demo-handoff-form button:disabled { opacity:.6;cursor:wait; }
.animated-countdown-demo-handoff-status { min-height:1.25rem;margin:0!important;color:#9a3412!important;font-size:.8rem!important; }
.animated-countdown-demo-handoff-status.is-success { color:#047857!important; }
.animated-countdown-demo-handoff-privacy { margin:.6rem 0 0!important;color:#64748b!important;font-size:.7rem!important;font-weight:650!important; }
.animated-countdown-finish-close { position:absolute;right:.5rem;top:.5rem;display:grid;width:clamp(1.8rem,4vw,2.6rem);height:clamp(1.8rem,4vw,2.6rem);place-items:center;border:2px solid rgba(251,146,60,.55);border-radius:50%;background:#fff;color:#ea580c;font:950 clamp(1rem,2.5vw,1.5rem)/1 system-ui,sans-serif;box-shadow:0 4px 12px rgba(15,23,42,.18);cursor:pointer;text-shadow:none; }
.animated-countdown-finish-close:hover,.animated-countdown-finish-close:focus-visible { background:#ffedd5;outline:2px solid #fb923c;outline-offset:2px; }
.animated-countdown-app[data-state="finished"] .animated-countdown-clock,
.animated-countdown-app[data-state="finished"] .animated-countdown-controls { display:none; }
.animated-countdown-app[data-state="finished"] .animated-countdown-message { animation:animated-countdown-finish-pop .55s cubic-bezier(.2,.9,.25,1.2) both; }
.animated-countdown-app[data-theme="halloween"][data-state="finished"] .animated-countdown-message { background:rgba(255,247,237,.94);color:#6d28d9;box-shadow:0 18px 55px rgba(15,23,42,.5); }
@keyframes animated-countdown-finish-pop { from{opacity:0;transform:translate(-50%,-50%) scale(.7)} to{opacity:1;transform:translate(-50%,-50%) scale(1)} }

.animated-countdown-controls {
    position:absolute;z-index:5;left:50%;bottom:clamp(.55rem,2vh,1.2rem);transform:translateX(-50%);
    display:flex;align-items:center;justify-content:center;gap:.45rem;max-width:calc(100% - 1rem);padding:.5rem .65rem;
    border:1px solid rgba(255,255,255,.78);border-radius:1.2rem;background:rgba(255,255,255,.86);
    box-shadow:0 10px 30px rgba(30,64,175,.16);backdrop-filter:blur(8px);white-space:nowrap;
}
.animated-countdown-controls label { font-size:.78rem;font-weight:900;color:#334155; }
.animated-countdown-controls select,.animated-countdown-controls button { min-height:2.35rem;border:1px solid #c4b5fd;border-radius:.85rem;padding:.42rem .72rem;background:#f5f3ff;color:#5b21b6;font:800 .82rem/1 "Trebuchet MS",sans-serif;cursor:pointer;touch-action:manipulation; }
.animated-countdown-controls button:hover,.animated-countdown-controls button:focus-visible { background:#ede9fe;outline:2px solid #a78bfa;outline-offset:1px; }
.animated-countdown-controls .animated-countdown-primary { border-color:#fdba74;background:#ffedd5;color:#9a3412; }
.animated-countdown-controls button:disabled { opacity:.48;cursor:not-allowed; }
.animated-countdown-controls .animated-countdown-controls-toggle { display:grid;width:2.35rem;min-width:2.35rem;padding:0;place-items:center;border-color:#fdba74;background:#fff7ed;color:#c2410c;font:950 1.45rem/1 system-ui,sans-serif; }
.animated-countdown-app.controls-collapsed .animated-countdown-controls { width:auto;display:flex;padding:.3rem;border-radius:999px; }
.animated-countdown-app.controls-collapsed .animated-countdown-controls > :not([data-controls-toggle]) { display:none; }
.animated-countdown-app[data-state="paused"] .animated-countdown-character-inner,
.animated-countdown-app[data-state="paused"] .animated-countdown-frame-primary,
.animated-countdown-app[data-state="paused"] .animated-countdown-frame-secondary,
.animated-countdown-app[data-state="paused"] .animated-countdown-frame-tertiary { animation-play-state:paused; }

.animated-countdown-app[data-theme="halloween"] .animated-countdown-clock {
    background:rgba(255,248,235,.92);border-color:rgba(251,146,60,.7);
    box-shadow:0 16px 42px rgba(30,27,75,.38),inset 0 0 0 3px rgba(196,181,253,.65);
}
.animated-countdown-app[data-theme="halloween"] .animated-countdown-time { color:#4c1d95; }
.animated-countdown-app[data-theme="halloween"] .animated-countdown-controls { background:rgba(255,247,237,.9);border-color:rgba(251,146,60,.7); }
.animated-countdown-app[data-theme="buzzing_bees"] .animated-countdown-clock {
    background:rgba(255,253,235,.93);border-color:rgba(250,204,21,.72);
    box-shadow:0 16px 42px rgba(77,124,15,.2),inset 0 0 0 3px rgba(134,239,172,.6);
}
.animated-countdown-app[data-theme="buzzing_bees"] .animated-countdown-time { color:#365314; }
.animated-countdown-app[data-theme="buzzing_bees"] .animated-countdown-controls { background:rgba(255,253,235,.9);border-color:rgba(250,204,21,.72); }
.animated-countdown-app[data-theme="buzzing_bees"][data-state="finished"] .animated-countdown-message { background:rgba(255,253,235,.95);color:#4d7c0f;box-shadow:0 18px 55px rgba(77,124,15,.28); }
.animated-countdown-app[data-theme="under_the_sea"] .animated-countdown-clock {
    background:rgba(239,252,255,.93);border-color:rgba(103,232,249,.78);
    box-shadow:0 16px 42px rgba(3,105,161,.24),inset 0 0 0 3px rgba(186,230,253,.75);
}
.animated-countdown-app[data-theme="under_the_sea"] .animated-countdown-time { color:#075985; }
.animated-countdown-app[data-theme="under_the_sea"] .animated-countdown-controls { background:rgba(240,253,250,.9);border-color:rgba(103,232,249,.78); }
.animated-countdown-app[data-theme="under_the_sea"][data-state="finished"] .animated-countdown-message { background:rgba(240,253,250,.95);color:#0369a1;box-shadow:0 18px 55px rgba(3,105,161,.3); }
.animated-countdown-character-shark { z-index:2;filter:drop-shadow(0 6px 8px rgba(3,105,161,.28)); }
.animated-countdown-app[data-theme="shooting_stars"] .animated-countdown-clock {
    background:rgba(255,251,235,.93);border-color:rgba(253,224,71,.75);
    box-shadow:0 16px 48px rgba(30,27,75,.48),inset 0 0 0 3px rgba(196,181,253,.7);
}
.animated-countdown-app[data-theme="shooting_stars"] .animated-countdown-time { color:#312e81; }
.animated-countdown-app[data-theme="shooting_stars"] .animated-countdown-controls { background:rgba(245,243,255,.91);border-color:rgba(196,181,253,.78); }
.animated-countdown-app[data-theme="shooting_stars"][data-state="finished"] .animated-countdown-message { background:rgba(255,251,235,.95);color:#6d28d9;box-shadow:0 18px 60px rgba(30,27,75,.55); }
.animated-countdown-character-star:not(.is-departing) { animation:animated-countdown-star-twinkle 1.8s ease-in-out infinite alternate;animation-delay:var(--hover-delay);filter:drop-shadow(0 0 7px rgba(253,224,71,.72)); }
@keyframes animated-countdown-star-twinkle { from{filter:brightness(.9) drop-shadow(0 0 4px rgba(253,224,71,.5))} to{filter:brightness(1.18) drop-shadow(0 0 12px rgba(253,224,71,.9))} }
.animated-countdown-character-pumpkin { filter:drop-shadow(0 0 8px rgba(251,146,60,.7)); }
.animated-countdown-character-pumpkin .animated-countdown-single-frame { animation-name:animated-countdown-pumpkin-hover,animated-countdown-pumpkin-glow;animation-duration:3.6s,1.8s;animation-timing-function:ease-in-out,ease-in-out;animation-iteration-count:infinite,infinite;animation-direction:alternate,alternate; }
@keyframes animated-countdown-pumpkin-hover { from{transform:translate3d(-2px,-2px,0) rotate(-2deg)} to{transform:translate3d(3px,3px,0) rotate(2deg)} }
@keyframes animated-countdown-pumpkin-glow { from{filter:brightness(.92)} to{filter:brightness(1.14)} }

.animated-countdown-app[data-theme="christmas_wonderland"] .animated-countdown-clock { left:51%;top:38%;background:rgba(255,252,245,.94);border-color:rgba(253,224,71,.78);box-shadow:0 16px 48px rgba(127,29,29,.28),inset 0 0 0 3px rgba(254,202,202,.72); }
.animated-countdown-app[data-theme="christmas_wonderland"] .animated-countdown-time { color:#9f1239; }
.animated-countdown-app[data-theme="christmas_wonderland"] .animated-countdown-controls { background:rgba(255,250,245,.92);border-color:rgba(254,202,202,.82); }
.animated-countdown-app[data-theme="christmas_wonderland"][data-state="finished"] .animated-countdown-message { background:rgba(255,252,245,.96);color:#b91c1c;box-shadow:0 18px 60px rgba(127,29,29,.4); }
.animated-countdown-app[data-state="finished"] .animated-countdown-premium { display:none; }
.animated-countdown-christmas-santa { position:absolute;z-index:2;right:1.5%;bottom:8%;width:clamp(245px,34vw,510px);max-height:82%;object-fit:contain;object-position:right bottom;filter:drop-shadow(0 12px 13px rgba(73,32,18,.28));transform-origin:58% 94%;animation:animated-countdown-santa-jiggle 2.8s ease-in-out infinite;user-select:none; }
@keyframes animated-countdown-santa-jiggle { 0%,100%{transform:translate3d(0,0,0) rotate(0deg)} 25%{transform:translate3d(-1px,-2px,0) rotate(-.45deg)} 50%{transform:translate3d(1px,0,0) rotate(.35deg)} 75%{transform:translate3d(0,-1px,0) rotate(-.2deg)} }
.animated-countdown-christmas-elf { position:absolute;z-index:2;left:13%;bottom:3%;width:clamp(185px,25vw,365px);aspect-ratio:1;filter:drop-shadow(0 10px 11px rgba(31,70,39,.3)); }
.animated-countdown-christmas-elf img { position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:left bottom;transition:opacity .1s ease;user-select:none; }
.animated-countdown-christmas-elf .christmas-elf-throwing { opacity:0; }
.animated-countdown-christmas-elf.is-throwing .christmas-elf-crouching { opacity:0; }
.animated-countdown-christmas-elf.is-throwing .christmas-elf-throwing { opacity:1; }
.animated-countdown-christmas-gift { position:absolute;left:var(--gift-left);bottom:var(--gift-bottom);width:clamp(34px,4.6vw,68px);height:clamp(34px,4.6vw,68px);object-fit:contain;filter:drop-shadow(0 5px 5px rgba(73,32,18,.28));will-change:transform,opacity;user-select:none; }

.animated-countdown-app[data-theme="ghosts_and_ghouls"] .animated-countdown-character-layer { z-index:4; }
.animated-countdown-app[data-theme="ghosts_and_ghouls"] .animated-countdown-clock { left:17%;top:38%;background:rgba(245,243,255,.93);border-color:rgba(167,139,250,.76);box-shadow:0 16px 48px rgba(15,23,42,.58),inset 0 0 0 3px rgba(251,146,60,.48); }
.animated-countdown-app[data-theme="ghosts_and_ghouls"] .animated-countdown-time { color:#4c1d95; }
.animated-countdown-app[data-theme="ghosts_and_ghouls"] .animated-countdown-controls { background:rgba(30,27,45,.9);border-color:rgba(251,146,60,.68); }
.animated-countdown-app[data-theme="ghosts_and_ghouls"] .animated-countdown-controls label { color:#fef3c7; }
.animated-countdown-app[data-theme="ghosts_and_ghouls"][data-state="finished"] .animated-countdown-message { background:rgba(245,243,255,.96);color:#6d28d9;box-shadow:0 18px 60px rgba(15,23,42,.6); }
.animated-countdown-staircase-character { position:absolute;left:50%;top:4%;visibility:hidden;width:clamp(190px,23vw,330px);aspect-ratio:1;transform:translateX(-50%) scale(.18);transform-origin:center center;will-change:transform,opacity; }
.animated-countdown-staircase-inner { position:absolute;inset:0;filter:drop-shadow(0 8px 10px rgba(10,5,20,.4));animation:animated-countdown-stair-bob .55s ease-in-out infinite alternate; }
.animated-countdown-staircase-character img { position:absolute;inset:0;width:100%;height:100%;object-fit:contain;user-select:none; }
.staircase-frame-one { animation:animated-countdown-stair-frame-one var(--stair-step-speed) steps(1,end) infinite; }
.staircase-frame-two { opacity:0;animation:animated-countdown-stair-frame-two var(--stair-step-speed) steps(1,end) infinite; }
@keyframes animated-countdown-stair-frame-one { 0%,49%{opacity:1} 50%,100%{opacity:0} }
@keyframes animated-countdown-stair-frame-two { 0%,49%{opacity:0} 50%,100%{opacity:1} }
@keyframes animated-countdown-stair-bob { from{translate:0 -2px} to{translate:0 3px} }

@media (max-width:700px) {
    .animated-countdown-app { min-height:0; }
    .animated-countdown-clock { left:50%;top:30%;width:clamp(112px,34vw,160px); }
    .animated-countdown-time { font-size:clamp(2.15rem,12vw,3.4rem); }
    .animated-countdown-message { left:50%;top:44%;max-width:calc(100% - 1rem);min-width:0;width:max-content;padding:1.25rem 2.3rem;font-size:clamp(2.25rem,14vw,4rem);white-space:nowrap; }
    .animated-countdown-controls {
        bottom:max(.45rem,env(safe-area-inset-bottom));
        display:grid;width:calc(100% - 1rem);grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem;
        padding:.5rem;white-space:normal;
    }
    .animated-countdown-controls label { position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%); }
    .animated-countdown-controls select,.animated-countdown-controls button { width:100%;min-width:0;min-height:2.65rem;padding:.48rem .4rem;font-size:.78rem; }
    .animated-countdown-controls [data-theme-select] { grid-column:1/-1; }
    .animated-countdown-controls [data-duration] { grid-column:1/-1; }
    .animated-countdown-app[data-theme="christmas_wonderland"] .animated-countdown-clock { left:51%;top:27%;width:clamp(105px,30vw,145px); }
    .animated-countdown-christmas-santa { right:-2%;bottom:27%;width:43%; }
    .animated-countdown-christmas-elf { left:10%;bottom:26%;width:34%; }
    .animated-countdown-christmas-gift { bottom:calc(var(--gift-bottom) + 22%);width:6vw;height:6vw; }
    .animated-countdown-app[data-theme="ghosts_and_ghouls"] .animated-countdown-clock { left:24%;top:25%;width:clamp(132px,36vw,158px); }
    .animated-countdown-app[data-theme="ghosts_and_ghouls"] .animated-countdown-time { font-size:clamp(1.9rem,8vw,2.65rem);letter-spacing:-.09em; }
    .animated-countdown-staircase-character { top:5%;width:clamp(150px,43vw,225px); }
}

@media (max-width:420px) and (max-height:700px) {
    .animated-countdown-clock { top:25%;width:104px; }
    .animated-countdown-controls select,.animated-countdown-controls button { min-height:2.35rem;padding:.38rem .3rem;font-size:.72rem; }
    .animated-countdown-controls { gap:.3rem;padding:.4rem; }
    .animated-countdown-demo-handoff-card { padding:1rem; }
    .animated-countdown-demo-handoff-card p { margin:.5rem 0;font-size:.8rem; }
}

@media (prefers-reduced-motion:reduce) {
    .animated-countdown-character-inner { animation-duration:8s; }
    .animated-countdown-frame-primary,.animated-countdown-frame-secondary,.animated-countdown-frame-tertiary { animation-duration:1.15s; }
    .animated-countdown-christmas-santa { animation-duration:7s; }
}