*{box-sizing:border-box}html,body{margin:0;padding:0;width:100%;background:transparent!important;overflow:hidden}body{font-family:Arial,Helvetica,sans-serif}#csxDemo{width:100%;}

.csx-demo {
  --navy:#1F2A44;
  --gold:#D99A00;
  --teal:#167064;
  --mint:#C8DDD5;
  width:100%;
  display:grid;
  place-items:center;
  padding:12px 0;
}
.csx-demo * { box-sizing:border-box; }
.csx-phone {
  position:relative;
  width:min(390px,94vw);
  aspect-ratio:390/720;
  padding:13px;
  border-radius:58px;
  background:linear-gradient(145deg,#394451 0%,#070A0F 43%,#212A37 100%);
  box-shadow:inset 0 0 0 3px #68717E,inset 0 0 0 8px #080B10;
  transform:translateZ(0);
}
.csx-phone.csx-kick { animation:csxKick .15s ease-in-out; }
@keyframes csxKick {
  0%{transform:translateX(0)}
  25%{transform:translateX(-3px) rotate(-.25deg)}
  55%{transform:translateX(3px) rotate(.25deg)}
  100%{transform:translateX(0)}
}
.csx-side {position:absolute;right:-4px;width:5px;border-radius:3px;background:#1D2530}
.csx-side-one {top:150px;height:72px}
.csx-side-two {top:240px;height:102px}
.csx-screen {
  position:relative;width:100%;height:100%;overflow:hidden;border-radius:46px;
  background:radial-gradient(circle at 50% 24%,rgba(255,255,255,.99),rgba(239,247,243,.97) 59%,rgba(224,238,232,.97));
  border:1px solid rgba(255,255,255,.34);
}
.csx-notch {
  position:absolute;z-index:6;left:50%;top:0;transform:translateX(-50%);
  width:148px;height:31px;border-radius:0 0 19px 19px;background:#080B10;
}
.csx-app {
  position:relative;height:100%;padding:58px 30px 19px;display:flex;flex-direction:column;color:#102044;
}
.csx-header {
  display:grid;grid-template-columns:24px 1fr 24px;align-items:center;gap:8px;text-align:center;color:#165A51;
}
.csx-brand {font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.csx-recipe {margin-top:4px;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.72}
.csx-nav {font-size:18px}
.csx-stage {
  flex:1;display:flex;flex-direction:column;padding-top:20px;
  transition:opacity .7s ease,filter .7s ease,transform .7s ease;
}
.csx-stage.csx-fading {opacity:.08;filter:blur(3px);transform:scale(.985)}
.csx-phase {
  min-height:16px;text-align:center;color:#167064;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
}
.csx-title {
  margin-top:12px;min-height:24px;text-align:center;font:600 18px/1.15 Georgia,serif;color:#132044;white-space:nowrap;
  transition:opacity .24s ease,transform .24s ease;
}
.csx-prompt {
  min-height:78px;margin:9px auto 2px;max-width:310px;display:grid;place-items:center;text-align:center;
  font:400 18.5px/1.42 Georgia,serif;color:#172140;
  transition:opacity .24s ease,transform .24s ease;
}
.csx-title.csx-change,.csx-prompt.csx-change {opacity:0;transform:translateY(7px)}
.csx-timer {
  position:relative;width:194px;height:194px;margin:0 auto;opacity:.38;
  transition:opacity .28s ease,transform .28s ease;
}
.csx-timer.csx-active {opacity:1;transform:scale(1.015)}
.csx-timer svg {position:absolute;inset:0;transform:rotate(-90deg)}
.csx-ring-bg,.csx-ring {fill:none;stroke-width:11;stroke-linecap:round}
.csx-ring-bg {stroke:#C8DDD5}
.csx-ring {
  stroke:url(#csxGold);stroke-dasharray:590.62;stroke-dashoffset:0;
  filter:url(#csxGlow);
}
.csx-timer-centre {position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.csx-logo {
  display:none;width:104px;height:104px;object-fit:contain;margin:auto;
  opacity:0;filter:drop-shadow(0 8px 12px rgba(31,42,68,.14));
  transition:opacity .48s ease,transform .58s ease;
}
.csx-logo.csx-show {display:block;opacity:1;transform:scale(1)}
.csx-time {font:500 59px/1 Georgia,serif;color:#112044}
.csx-time-label {
  width:110px;margin:9px auto 0;font-size:10px;line-height:1.38;letter-spacing:.14em;text-transform:uppercase;color:#17202C;
}
.csx-timer.csx-logo-mode .csx-time,.csx-timer.csx-logo-mode .csx-time-label {display:none}
.csx-wave {
  height:56px;margin:-1px auto 0;display:flex;align-items:center;justify-content:center;gap:2px;width:100%;
  overflow:hidden;opacity:.22;
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  transition:opacity .5s ease;
}
.csx-screen.csx-playing .csx-wave {opacity:.88}
.csx-wave span {
  width:2px;height:var(--h);min-height:5px;border-radius:2px;background:#70A69A;opacity:.66;transform-origin:center;
}
.csx-wave span:nth-child(n+37):nth-child(-n+59) {background:#D99A00}
.csx-screen.csx-playing .csx-wave span {
  animation:csxWave .7s ease-in-out infinite alternate;
  animation-delay:calc((var(--h) * 7ms) - 280ms);
}
@keyframes csxWave {from{transform:scaleY(.45);opacity:.38}to{transform:scaleY(1.12);opacity:.95}}
.csx-progress-row {margin-top:2px;display:flex;align-items:end;justify-content:space-between;font-size:13px}
.csx-progress-row strong {display:block;font-size:22px;font-weight:650}
.csx-progress-row small {display:block;margin-top:2px;font-size:9px;letter-spacing:.13em;text-transform:uppercase}
.csx-status {font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#167064}
.csx-progress-track {height:5px;margin-top:10px;border-radius:5px;background:#C8DDD5;overflow:hidden}
.csx-progress-fill {height:100%;width:0;background:linear-gradient(90deg,#D99A00,#F0CB62);transition:width .35s ease}
.csx-play {
  position:relative;z-index:9;flex:0 0 auto;width:62px;height:62px;margin:6px auto 2px;
  border:0;border-radius:50%;background:#1F2A44;color:#fff;font-size:22px;cursor:pointer;
  box-shadow:0 10px 23px rgba(31,42,68,.26);
}
.csx-play::after {
  content:"";position:absolute;inset:-7px;border:2px solid rgba(31,42,68,.31);border-radius:50%;animation:csxPulse 2.5s ease-out infinite;
}
@keyframes csxPulse {0%{transform:scale(.88);opacity:.75}72%,100%{transform:scale(1.48);opacity:0}}
.csx-complete {
  position:absolute;z-index:8;inset:116px 28px 28px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;opacity:0;pointer-events:none;transform:translateY(13px);transition:opacity .65s ease,transform .65s ease;
}
.csx-complete.csx-show {opacity:1;pointer-events:auto;transform:none}
.csx-check {
  width:68px;height:68px;border-radius:50%;display:grid;place-items:center;background:#1F2A44;color:#fff;font-size:32px;
  box-shadow:0 12px 28px rgba(31,42,68,.22);
}
.csx-complete h3 {margin:18px 0 8px;font:700 28px/1.1 Georgia,serif;color:#132044}
.csx-complete p {max-width:274px;margin:0 0 19px;font-size:14px;line-height:1.52}
.csx-primary {
  display:inline-flex;align-items:center;justify-content:center;min-width:175px;padding:13px 20px;border-radius:999px;
  background:#1F2A44;color:white!important;text-decoration:none!important;font-weight:800;font-size:14px;
  box-shadow:0 9px 22px rgba(31,42,68,.21);
}
.csx-secondary {
  margin-top:12px;border:0;background:transparent;color:#16675E;font-weight:800;font-size:13px;cursor:pointer;text-decoration:underline;
  text-underline-offset:4px;
}
@media(max-width:600px) {
  .csx-demo{padding:3px 0}
  .csx-phone{width:min(360px,96vw);border-radius:52px}
  .csx-screen{border-radius:41px}
  .csx-app{padding-left:27px;padding-right:27px}
}
@media(prefers-reduced-motion:reduce) {
  .csx-demo *{animation:none!important;transition:none!important}
}

.csx-next-hint{margin:6px 0 14px;font-size:13px;line-height:1.35;color:#167064;font-weight:700}
.csx-play:focus-visible,.csx-secondary:focus-visible{outline:3px solid #D99A00;outline-offset:5px}
@media(max-width:410px){.csx-demo{padding:8px 0}.csx-phone{width:min(390px,96vw)}}