.countdown-demo-layout{display:grid;grid-template-columns:minmax(320px,.78fr) minmax(520px,1.45fr);gap:18px;align-items:start}.demo-controls-panel,.demo-preview-panel{min-width:0}.demo-safe-badge{display:inline-flex;align-items:center;border:1px solid rgba(30,160,100,.3);background:rgba(30,160,100,.1);color:#18784f;border-radius:999px;padding:5px 10px;font-size:11px;font-weight:900;letter-spacing:.08em}.demo-current-settings{margin:18px 0;padding:14px;border:1px solid var(--border,#dfe8e4);border-radius:16px;background:rgba(7,26,22,.025)}.demo-current-settings h4,.demo-sound-list h4{margin:0 0 12px}.demo-setting-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.demo-setting-grid span{display:flex;justify-content:space-between;gap:10px;padding:8px 10px;border-radius:10px;background:#fff;font-size:12px}.demo-setting-grid strong{color:#0a4c3d}.demo-action-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.demo-action-grid button{min-height:42px}.demo-action-grid .demo-full-run,.demo-action-grid .demo-stop{grid-column:span 2}.demo-sound-list{margin-top:20px;border-top:1px solid var(--border,#dfe8e4);padding-top:16px}.demo-sound-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid rgba(14,72,58,.08)}.demo-sound-row>div{display:flex;flex-direction:column;gap:2px}.demo-sound-row small{color:#6c7e78}.countdown-demo-stage{position:relative;isolation:isolate;overflow:hidden;min-height:560px;aspect-ratio:16/9;border-radius:22px;color:#fff;background:radial-gradient(circle at 50% 30%,rgba(217,180,91,.2),transparent 28%),linear-gradient(145deg,#061b18,#0a4c3d 54%,#082821);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 22px 55px rgba(3,29,23,.18);display:flex;flex-direction:column;justify-content:space-between}.countdown-demo-stage[data-mode="azan"]{background:radial-gradient(circle at 50% 26%,rgba(94,206,255,.22),transparent 31%),linear-gradient(145deg,#071b32,#0a5575 56%,#071f33)}.countdown-demo-stage[data-mode="prayer"]{background:radial-gradient(circle at 50% 25%,rgba(255,216,109,.34),transparent 34%),linear-gradient(145deg,#2d1c05,#8b5e13 55%,#2d1d08)}.countdown-demo-stage[data-mode="iqamah"]{background:radial-gradient(circle at 50% 26%,rgba(166,132,255,.25),transparent 34%),linear-gradient(145deg,#17102d,#513c7f 55%,#1b1432)}.countdown-demo-stage[data-mode="now"]{background:radial-gradient(circle at 50% 20%,rgba(255,255,255,.28),transparent 32%),linear-gradient(145deg,#3c170b,#a43e1a 55%,#42160b);animation:demo-now-pulse 1.4s ease-in-out infinite}.countdown-demo-bg{position:absolute;inset:0;z-index:-1;overflow:hidden}.countdown-demo-bg:before,.countdown-demo-bg:after{content:"";position:absolute;width:58%;aspect-ratio:1;border:1px solid rgba(255,255,255,.09);border-radius:38%;transform:rotate(28deg);animation:demo-orbit 22s linear infinite}.countdown-demo-bg:before{left:-22%;top:-34%}.countdown-demo-bg:after{right:-24%;bottom:-42%;animation-direction:reverse;animation-duration:30s}.countdown-demo-bg span{position:absolute;width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.5);filter:blur(.2px);animation:demo-float 5s ease-in-out infinite}.countdown-demo-bg span:nth-child(1){left:14%;top:22%}.countdown-demo-bg span:nth-child(2){right:19%;top:28%;animation-delay:-1.7s}.countdown-demo-bg span:nth-child(3){left:72%;bottom:18%;animation-delay:-3.1s}.countdown-demo-brand{display:flex;align-items:center;justify-content:space-between;padding:22px 26px;font-size:13px;letter-spacing:.08em}.countdown-demo-brand span{border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:6px 11px;font-weight:900}.countdown-demo-brand strong{font-size:15px}.countdown-demo-content{text-align:center;padding:8px 28px 22px;display:flex;flex-direction:column;align-items:center}.countdown-demo-content p{margin:0 0 8px;font-weight:900;letter-spacing:.22em;font-size:clamp(12px,1.25vw,20px);color:rgba(255,255,255,.76)}.countdown-demo-content h2{margin:0;font-size:clamp(32px,5.3vw,82px);line-height:1;font-weight:950;text-transform:uppercase}.countdown-demo-number{font-variant-numeric:tabular-nums;margin:22px 0 16px;font-size:clamp(64px,11vw,170px);line-height:.86;font-weight:950;letter-spacing:-.06em;text-shadow:0 12px 36px rgba(0,0,0,.22)}.countdown-demo-content small{font-size:clamp(14px,1.5vw,23px);color:rgba(255,255,255,.8)}.countdown-demo-footer{padding:20px 26px 24px;display:grid;gap:10px;font-size:12px;color:rgba(255,255,255,.7)}.countdown-demo-progress{height:4px;border-radius:999px;background:rgba(255,255,255,.16);overflow:hidden}.countdown-demo-progress i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#e8c56d,#fff2b4);transition:width .7s linear}.demo-note{margin-top:14px}.countdown-demo-stage:fullscreen{width:100vw;height:100vh;aspect-ratio:auto;border-radius:0;min-height:0}.countdown-demo-stage:fullscreen .countdown-demo-number{font-size:min(16vw,260px)}@keyframes demo-orbit{to{transform:rotate(388deg)}}@keyframes demo-float{50%{transform:translateY(-18px) scale(1.25);opacity:.85}}@keyframes demo-now-pulse{50%{filter:brightness(1.18)}}@media(max-width:1050px){.countdown-demo-layout{grid-template-columns:1fr}.countdown-demo-stage{min-height:440px}}@media(max-width:620px){.demo-setting-grid,.demo-action-grid{grid-template-columns:1fr}.demo-action-grid .demo-full-run,.demo-action-grid .demo-stop{grid-column:auto}.countdown-demo-stage{min-height:360px;border-radius:16px}.countdown-demo-brand{padding:16px}.countdown-demo-content{padding-inline:14px}.countdown-demo-footer{padding:15px 16px}.countdown-demo-number{font-size:clamp(58px,20vw,96px)}}

/* v0.5.4.2 — Flip-clock dua fasa yang selari pada sempadan saat. */
.countdown-demo-flip-wrap{width:100%;margin:clamp(16px,2.3vw,30px) 0 clamp(12px,1.5vw,20px);display:flex;flex-direction:column;align-items:center;justify-content:center;perspective:1800px}
.demo-flip-clock{--flip-half-time:.32s;display:flex;align-items:center;justify-content:center;gap:clamp(5px,.55vw,12px);font-variant-numeric:tabular-nums;perspective:1800px;transform:translateZ(0)}
.demo-flip-digit{position:relative;width:clamp(52px,6.1vw,116px);height:clamp(78px,8.8vw,166px);overflow:hidden;border-radius:clamp(9px,.75vw,16px);background:#151817;color:#f5f3ed;box-shadow:0 16px 28px rgba(0,0,0,.4),inset 0 1px rgba(255,255,255,.14),inset 0 -1px rgba(0,0,0,.9);transform:translateZ(0);contain:layout paint}
.demo-flip-digit:before{content:"";position:absolute;z-index:20;left:0;right:0;top:calc(50% - 1px);height:2px;background:#020303;box-shadow:0 -1px rgba(255,255,255,.08),0 1px rgba(0,0,0,.9)}
.demo-flip-digit:after{content:"";position:absolute;z-index:21;left:5%;right:5%;top:calc(50% - 5px);height:10px;background:linear-gradient(90deg,transparent,rgba(0,0,0,.44) 16%,rgba(0,0,0,.44) 84%,transparent);pointer-events:none}
.demo-flip-half,.demo-flip-leaf{position:absolute;left:0;width:100%;height:50%;overflow:hidden;display:flex;justify-content:center;background:linear-gradient(180deg,#3a403d,#1c201e)}
.demo-flip-half b,.demo-flip-leaf b{position:absolute;left:0;width:100%;height:200%;display:flex;align-items:center;justify-content:center;font-size:clamp(65px,8vw,148px);line-height:1;font-weight:900;letter-spacing:-.065em;color:#f4f1e8;text-shadow:0 3px 0 #000,0 0 10px rgba(255,255,255,.05);transform:translateX(-.025em)}
.demo-flip-top{top:0}.demo-flip-top b{top:0}
.demo-flip-bottom{bottom:0;background:linear-gradient(180deg,#111412,#2b302e)}.demo-flip-bottom b{bottom:0}
.demo-flip-leaf{z-index:12;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform-style:preserve-3d;will-change:transform}
.demo-flip-leaf-old{top:0;transform-origin:50% 100%;background:linear-gradient(180deg,#444a47,#202422)}.demo-flip-leaf-old b{top:0}
.demo-flip-leaf-new{bottom:0;transform-origin:50% 0;transform:rotateX(90deg);background:linear-gradient(180deg,#101311,#303633)}.demo-flip-leaf-new b{bottom:0}
.demo-flip-leaf-old:after,.demo-flip-leaf-new:after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0}
.demo-flip-leaf-old:after{background:linear-gradient(180deg,transparent,rgba(0,0,0,.58))}
.demo-flip-leaf-new:after{background:linear-gradient(180deg,rgba(0,0,0,.62),transparent)}
.demo-flip-digit.is-flipping .demo-flip-leaf-old{animation:demoFlipTop var(--flip-half-time) cubic-bezier(.55,.055,.675,.19) both}
.demo-flip-digit.is-flipping .demo-flip-leaf-old:after{animation:demoFlipShadeIn var(--flip-half-time) linear both}
.demo-flip-digit.is-flipping .demo-flip-leaf-new{animation:demoFlipBottom var(--flip-half-time) cubic-bezier(.215,.61,.355,1) var(--flip-half-time) both}
.demo-flip-digit.is-flipping .demo-flip-leaf-new:after{animation:demoFlipShadeOut var(--flip-half-time) linear var(--flip-half-time) both}
.demo-flip-separator{display:flex;flex-direction:column;justify-content:center;gap:clamp(12px,1.3vw,24px);width:clamp(14px,1.5vw,27px);height:clamp(78px,8.8vw,166px)}
.demo-flip-separator i{display:block;width:clamp(8px,.8vw,14px);height:clamp(8px,.8vw,14px);margin:auto;border-radius:50%;background:#e7c66f;box-shadow:0 0 18px rgba(231,198,111,.55)}
.demo-flip-units{width:min(100%,calc(clamp(52px,6.1vw,116px) * 4 + clamp(14px,1.5vw,27px) + clamp(5px,.55vw,12px) * 4));display:grid;grid-template-columns:1fr 1fr;margin-top:10px;color:rgba(255,255,255,.62);font-size:clamp(9px,.72vw,13px);font-weight:900;letter-spacing:.2em}.demo-flip-units span{text-align:center}
.demo-flip-clock.text-mode{display:block}.demo-flip-text{display:block;font-size:clamp(54px,8vw,150px);line-height:1.05;font-family:serif;font-weight:900;color:#f3d47d;text-shadow:0 0 34px rgba(243,212,125,.25)}
.countdown-demo-stage:fullscreen .demo-flip-digit{width:min(8.5vw,175px);height:min(12.4vw,255px)}
.countdown-demo-stage:fullscreen .demo-flip-half b,.countdown-demo-stage:fullscreen .demo-flip-leaf b{font-size:min(11vw,225px)}
.countdown-demo-stage:fullscreen .demo-flip-separator{height:min(12.4vw,255px);width:min(2vw,42px);gap:min(2vw,38px)}
@keyframes demoFlipTop{0%{transform:rotateX(0)}100%{transform:rotateX(-90deg)}}
@keyframes demoFlipBottom{0%{transform:rotateX(90deg)}100%{transform:rotateX(0)}}
@keyframes demoFlipShadeIn{0%{opacity:0}100%{opacity:1}}
@keyframes demoFlipShadeOut{0%{opacity:1}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.demo-flip-digit.is-flipping .demo-flip-leaf-old,.demo-flip-digit.is-flipping .demo-flip-leaf-new,.demo-flip-digit.is-flipping .demo-flip-leaf-old:after,.demo-flip-digit.is-flipping .demo-flip-leaf-new:after{animation-duration:.01ms;animation-delay:0s}}
@media(max-width:620px){.demo-flip-digit{width:clamp(46px,16vw,72px);height:clamp(70px,23vw,108px)}.demo-flip-half b,.demo-flip-leaf b{font-size:clamp(58px,21vw,92px)}.demo-flip-separator{height:clamp(70px,23vw,108px);width:12px;gap:12px}.demo-flip-separator i{width:7px;height:7px}.demo-flip-clock{gap:4px}.demo-flip-units{font-size:8px}}