:root {
  --klyp-logo: url('./klyp-logo.svg');
  --klyp-bg: #f4f0e7;
  --klyp-ink: #090907;
  --klyp-muted: rgba(9, 9, 7, .56);
  --klyp-soft: rgba(9, 9, 7, .08);
  --klyp-ring: rgba(9, 9, 7, .22);
  --klyp-ease: cubic-bezier(.18, .86, .22, 1);
  --klyp-beat-ms: 461.538ms;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  background: var(--klyp-bg);
  color: var(--klyp-ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.klyp-launch {
  --klyp-bg: #f4f0e7;
  --klyp-ink: #090907;
  --klyp-muted: rgba(9, 9, 7, .56);
  --klyp-soft: rgba(9, 9, 7, .08);
  --klyp-ring: rgba(9, 9, 7, .22);
  --klyp-beat-ms: 461.538ms;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(24px, 5vw, 72px);
  overflow: hidden;
  position: relative;
  isolation: isolate;
  background: var(--klyp-bg);
  color: var(--klyp-ink);
}

.klyp-launch::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .32;
  background:
    radial-gradient(circle at 50% 44%, rgba(9, 9, 7, .055), transparent 33%),
    linear-gradient(rgba(9, 9, 7, .026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(9, 9, 7, .020) 1px, transparent 1px);
  background-size: auto, 28px 28px, 28px 28px;
  mask-image: radial-gradient(circle at center, black 0 40%, transparent 78%);
}

.klyp-stage {
  width: min(78vw, 920px);
  max-width: 100%;
  min-height: clamp(250px, 42vw, 430px);
  aspect-ratio: 1153 / 534;
  display: grid;
  place-items: center;
  position: relative;
  isolation: isolate;
}

.klyp-mark,
.klyp-ready-panel {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transition:
    opacity 520ms ease,
    transform 620ms var(--klyp-ease),
    filter 620ms ease;
}

.klyp-mark {
  opacity: 0;
  transform: translate3d(0, 8px, 0) scale(.992);
  filter: blur(3px);
}

.klyp-mark.is-active {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
}

.klyp-mark.is-gone {
  opacity: 0;
  transform: translate3d(0, -5px, 0) scale(.994);
  filter: blur(7px);
}

.klyp-logo-base,
.klyp-grid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.klyp-logo-base {
  background: var(--klyp-ink);
  -webkit-mask: var(--klyp-logo) center / contain no-repeat;
  mask: var(--klyp-logo) center / contain no-repeat;
  filter: drop-shadow(0 18px 34px rgba(9, 9, 7, .10));
}

.klyp-cover {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.klyp-cover-cell {
  position: absolute;
  background: var(--klyp-bg);
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  transition-property: opacity, transform, filter, border-radius;
  transition-duration: 720ms;
  transition-timing-function: var(--klyp-ease);
  will-change: opacity, transform;
}

.klyp-mark[data-current-effect="03"] .klyp-cover-cell {
  transition-duration: 760ms;
}

.klyp-mark[data-current-effect="05"] .klyp-cover-cell {
  transition-duration: 560ms;
  border-radius: 1.5px;
}

.klyp-grid {
  opacity: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(9, 9, 7, .16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(9, 9, 7, .13) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask: var(--klyp-logo) center / contain no-repeat;
  mask: var(--klyp-logo) center / contain no-repeat;
}

.klyp-grid.is-on {
  animation: klypGridBlink 1400ms ease both;
}


.klyp-ready-panel {
  opacity: 0;
  transform: translate3d(0, 8px, 0) scale(.985);
  filter: blur(5px);
  pointer-events: none;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.klyp-ready-panel.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
  pointer-events: auto;
}

.klyp-ready-box {
  display: grid;
  gap: clamp(10px, 1.85vw, 22px);
  justify-items: center;
  width: min(100%, 920px);
}

.klyp-available-label {
  color: var(--klyp-muted);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: clamp(10px, 1.15vw, 13px);
  line-height: 1.2;
}

.klyp-main-toggle,
.klyp-bpm-text {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  padding: 0;
  margin: 0;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.klyp-main-toggle {
  display: grid;
  justify-items: center;
  gap: clamp(8px, 1.2vw, 14px);
  max-width: 100%;
  transition: opacity 180ms ease, transform 180ms var(--klyp-ease), filter 180ms ease;
}

.klyp-main-toggle:hover,
.klyp-bpm-text:hover {
  opacity: .76;
}

.klyp-main-toggle:active {
  transform: scale(.992);
}

.klyp-bpm-text:active {
  transform: translateY(1px);
}

.klyp-main-toggle:focus-visible,
.klyp-bpm-text:focus-visible {
  outline: 1px solid var(--klyp-ring);
  outline-offset: 7px;
}

.klyp-beat-display {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(8px, 1.1vw, 14px);
  max-width: 100%;
}


.klyp-beat-number {
  display: inline-block;
  min-width: 7ch;
  font-size: clamp(38px, 8.4vw, 116px);
  line-height: .88;
  font-weight: 710;
  letter-spacing: -.072em;
}

.klyp-beat-unit {
  color: var(--klyp-muted);
  font-size: clamp(16px, 2vw, 28px);
  font-weight: 560;
  letter-spacing: -.02em;
  white-space: nowrap;
}

.klyp-bpm-line {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: .42em;
  margin-top: clamp(8px, 1.85vw, 28px);
  color: var(--klyp-muted);
  font-size: clamp(14px, 1.35vw, 19px);
  line-height: 1;
  letter-spacing: -.02em;
}

.klyp-bpm-text {
  display: inline-flex;
  align-items: baseline;
  gap: .18em;
  color: var(--klyp-muted);
  font-size: clamp(16px, 1.85vw, 25px);
  font-weight: 600;
  letter-spacing: -.02em;
  transition: opacity 160ms ease, transform 160ms var(--klyp-ease), color 160ms ease;
}

.klyp-ready-panel[data-mode="beats"] .klyp-bpm-text {
  animation: klypBpmTempoPulse var(--klyp-beat-ms) linear infinite;
  will-change: opacity;
}

.klyp-bpm-text [data-bpm-value] {
  color: var(--klyp-ink);
  font-size: clamp(22px, 3vw, 43px);
  font-weight: 730;
  letter-spacing: -.055em;
}

.klyp-bpm-unit {
  font-size: .82em;
  letter-spacing: -.015em;
}

.klyp-bpm-text.is-tapped,
.klyp-ready-panel[data-mode="beats"] .klyp-bpm-text.is-tapped {
  animation: klypTapText 220ms ease-out both;
}

.klyp-time-display {
  display: grid;
  justify-items: center;
  width: min(100%, 920px);
}

.klyp-time-grid {
  display: grid;
  grid-template-columns:
    minmax(3.7ch, auto) auto minmax(2.5ch, auto) auto minmax(2.5ch, auto) auto minmax(2.5ch, auto);
  align-items: start;
  justify-content: center;
  column-gap: clamp(7px, 1.15vw, 18px);
}

.klyp-time-part {
  display: grid;
  justify-items: center;
  align-items: start;
  gap: clamp(7px, .95vw, 13px);
  min-width: 0;
}

.klyp-time-part strong {
  display: block;
  font-size: clamp(32px, 6.8vw, 92px);
  line-height: .82;
  font-weight: 710;
  letter-spacing: -.06em;
  font-variant-numeric: tabular-nums;
}

.klyp-time-label {
  color: var(--klyp-muted);
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: clamp(8px, .86vw, 11px);
  line-height: 1;
  text-align: center;
  transform: translateX(.08em);
}

.klyp-time-separator {
  color: rgba(9, 9, 7, .33);
  font-size: clamp(32px, 6.8vw, 92px);
  line-height: .82;
  font-weight: 460;
  transform: translateY(-.04em);
}

.klyp-ready-panel[data-mode="beats"] .klyp-time-display {
  display: none;
}

.klyp-ready-panel[data-mode="time"] .klyp-beat-display,
.klyp-ready-panel[data-mode="time"] .klyp-bpm-line {
  display: none;
}


@keyframes klypGridBlink {

  0%,
  100% {
    opacity: 0;
  }

  22%,
  78% {
    opacity: .23;
  }
}

@keyframes klypBpmTempoPulse {
  0% {
    opacity: .48;
  }

  5% {
    opacity: 1;
  }

  11% {
    opacity: .70;
  }

  18% {
    opacity: .92;
  }

  100% {
    opacity: .62;
  }
}


@keyframes klypTapText {
  0% {
    opacity: .56;
    transform: translateY(0) scale(1);
  }

  42% {
    opacity: 1;
    transform: translateY(-1px) scale(1.035);
  }

  100% {
    opacity: .56;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 760px) {
  .klyp-stage {
    width: min(93vw, 920px);
    min-height: clamp(310px, 74vw, 520px);
  }

  .klyp-ready-box {
    gap: 14px;
  }

  .klyp-beat-display {
    gap: 8px;
  }

  .klyp-time-grid {
    column-gap: clamp(5px, 1.4vw, 8px);
  }

  .klyp-time-part {
    gap: 7px;
  }

  .klyp-time-part strong,
  .klyp-time-separator {
    font-size: clamp(28px, 7.4vw, 46px);
  }

  .klyp-time-label {
    font-size: 8px;
    letter-spacing: .09em;
  }

  .klyp-available-label {
    letter-spacing: .13em;
  }
}

@media (prefers-reduced-motion: reduce) {

  .klyp-mark,
  .klyp-ready-panel,
  .klyp-cover-cell,
  .klyp-grid,
  .klyp-ready-panel[data-mode="beats"] .klyp-bpm-text,
  .klyp-bpm-text.is-tapped {
    animation: none !important;
    transition: none !important;
  }
}