/* Live counter: keep the odometer geometry and event hooks, adopt the shared brand. */
:root {
  --bg: #07090c;
  --accent: #087dfa;
  --accent-2: #5570ee;
  --brand: #087dfa;
  --ink-dim: #b4c6df;
  --flap: #101b2a;
  --flap-edge: #29496e;
  --card-edge: #8ac8ff40;
}
html:has(.live-page) {
  background: #07090c;
}
.live-page {
  --ink: #fff;
  background:
    radial-gradient(ellipse at 15% 10%, #087dfa35, transparent 45%),
    radial-gradient(ellipse at 90% 85%, #5570ee20, transparent 45%), #07090c;
  color: white;
  font-family:
    "Segoe UI Variable",
    "Segoe UI",
    -apple-system,
    BlinkMacSystemFont,
    Arial,
    sans-serif;
  font-size: 18px;
  overflow-x: hidden;
}
.live-page .site-header {
  --ink: #07090c;
}
.live-page .site-footer {
  --ink: #07090c;
  position: relative;
  z-index: 2;
}
.live-toolbar {
  width: min(1250px, calc(100% - 64px));
  margin: 25px auto 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  position: relative;
  z-index: 3;
}
.live-toolbar .status {
  font-size: 14px;
  letter-spacing: 0.06em;
  padding: 10px 16px;
  color: #c6dbf5;
  background: #ffffff0c;
  border-color: #8ac8ff40;
}
.live-toolbar .icon-btn {
  width: 44px;
  height: 44px;
  color: #d5e8ff;
  background: #ffffff0c;
  border-color: #8ac8ff40;
}
.live-page .stage {
  min-height: 750px;
  padding: 55px 24px 100px;
  gap: 0;
  max-width: 1350px;
  margin: auto;
}
.live-page .eyebrow {
  font-size: 17px;
  letter-spacing: 0.03em;
  color: #8ac8ff;
  margin-bottom: 26px;
}
.live-page .stage-title {
  font-family: inherit;
  font-size: clamp(38px, 4.5vw, 64px);
  line-height: 1.1;
  max-width: 950px;
  letter-spacing: -0.035em;
  font-weight: 600;
  margin: 0 0 42px;
}
.live-page .grad {
  background: linear-gradient(100deg, #8ac8ff, #55d8ff);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
.live-page .label {
  font-size: 17px;
  letter-spacing: 0.08em;
  color: #c6d9ef;
}
.live-page .counter {
  margin-top: 23px;
}
.live-page .digit {
  border-color: #9bcbff45;
  box-shadow:
    inset 0 1px #ffffff35,
    0 14px 35px #0004;
  background: linear-gradient(140deg, #087dfa22, #ffffff09);
  backdrop-filter: blur(20px);
}
.live-page .digit.sep {
  background: transparent;
  box-shadow: none;
}
.live-page .counter[aria-busy="true"] {
  opacity: 0.2;
}
.live-page #counter-message {
  font-size: 17px;
  color: #bfd7f5;
  max-width: 650px;
  text-align: center;
  margin: 10px 0;
}
.live-page .session-stats {
  margin-top: 35px;
  gap: 22px;
  color: #c4d5ec;
}
.live-page .stat-num {
  font-size: 29px;
  color: white;
}
.live-page .stat-lbl {
  font-size: 15px;
  color: #b5c9e4;
}
.live-page .share-band {
  max-width: 940px;
  padding: 25px 28px;
  margin-top: 45px;
  border-radius: 22px;
  border: 1px solid #b3d8ff40;
  border-top-color: #d6eaff7a;
  background: linear-gradient(145deg, #087dfa22, #ffffff0a);
  backdrop-filter: blur(22px);
  box-shadow:
    inset 0 1px #ffffff25,
    0 18px 45px #0003;
}
.live-page .share-band .msg {
  font-size: 18px;
  color: #c7d9f0;
}
.live-page .share-btn {
  font-size: 16px;
  min-height: 46px;
}
.live-page .sound-hint {
  font-size: 15px;
  color: #a8c1e1;
  margin-top: 27px;
}
.live-page .site-footer a {
  color: inherit;
}
.live-page .site-footer a:hover {
  color: #0870e9;
}
@media (max-width: 650px) {
  .live-toolbar {
    width: calc(100% - 40px);
    margin-top: 20px;
    gap: 9px;
    justify-content: center;
    flex-wrap: wrap;
  }
  .live-page .stage {
    min-height: 650px;
    padding: 40px 14px 65px;
  }
  .live-page .stage-title {
    font-size: 38px;
    margin-bottom: 30px;
  }
  .live-page .eyebrow {
    font-size: 15px;
    margin-bottom: 20px;
  }
  .live-page .label {
    font-size: 14px;
  }
  .live-page .session-stats {
    gap: 12px;
    flex-wrap: wrap;
  }
  .live-page .stat-num {
    font-size: 24px;
  }
  .live-page .stat-lbl {
    font-size: 13px;
  }
  .live-page .share-band {
    margin-top: 30px;
    padding: 24px 20px;
  }
  .live-page .share-band .msg {
    font-size: 17px;
  }
  .live-page .sound-hint {
    font-size: 14px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .live-page .bubble,
  .live-page .spark {
    display: none;
  }
  .live-page .reel {
    transition: none !important;
  }
  .live-page .status .dot {
    animation: none;
  }
}