/* The prism button: an Upgrade to Pro pill on a black page. Inside it a WebGL shader draws a glass prism, the white
   ray going into it and the spectrum coming out, and the words lit by it; the button itself is a transparent layer
   holding the same words for screen readers (and for the plain version without WebGL). */
:root {
  --page: #000000;          /* the page */
  --pill: #060609;          /* the inside of the pill, where the light travels */
  --rim: #2a2a33;           /* the pill's edge */
  --ink: #6f6f7c;           /* the words where no light falls on them */
  --text: #f2f2f5;          /* the focus ring, and the words of the plain version */
  --muted: #7d7d88;         /* the line under the button */
  --glass: #9fb4d6;         /* the tint of the prism's glass */
}

* {
  box-sizing: border-box;
}

/* a tap is a click at once: no wait for a double tap */
html {
  touch-action: manipulation;
}

html,
body {
  margin: 0;
  overflow-x: clip;
}

body {
  min-height: 100svh;
  background: var(--page);
  color: var(--text);
  font-family: 'Inter Tight Variable', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.stage {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 72px 16px;
}

.pro {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 22px;
  width: min(360px, 100%);
}

/* ---------------------------------------------------------------- the pill */
.pro__pill {
  position: relative;
  width: 100%;
  height: 84px;
  border-radius: 999px;
  overflow: hidden;
  isolation: isolate;
  background: var(--pill);
  box-shadow: inset 0 0 0 1px var(--rim), inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 18px 40px -18px rgba(0, 0, 0, 0.9);
  transition: transform 0.35s cubic-bezier(0.34, 1.5, 0.5, 1), box-shadow 0.4s ease;
  -webkit-tap-highlight-color: transparent;
}

.pro__pill.is-down {
  transform: scale(0.975);
  transition-duration: 0.12s;
}

.pro__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* the edge of the pill, drawn over the light so it stays crisp */
.pro__pill::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  pointer-events: none;
}

/* the real button: transparent, over the whole pill */
.pro__btn {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0 28px 0 112px;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: transparent;
  font: inherit;
  font-size: 19px;
  font-weight: 620;
  letter-spacing: -0.01em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

.pro__face {
  grid-area: 1 / 1;
  white-space: nowrap;
  opacity: 0;
}

.pro__btn:focus-visible {
  outline: none;
}

.pro__pill:has(.pro__btn:focus-visible) {
  box-shadow: inset 0 0 0 1px var(--rim), 0 0 0 2px var(--page), 0 0 0 4px var(--text);
}

html[data-using='pointer'] .pro__pill:has(.pro__btn:focus-visible) {
  box-shadow: inset 0 0 0 1px var(--rim), inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 18px 40px -18px rgba(0, 0, 0, 0.9);
}

.pro__btn[aria-disabled='true'] {
  cursor: progress;
}

/* the spectrum's glow under the pill, once you are Pro */
.pro__halo {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 30px;
  height: 46px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ff3b3b, #ffb13b, #f4ff3b, #3bff6a, #3bc8ff, #6a3bff, #e03bff);
  filter: blur(26px);
  opacity: 0;
  pointer-events: none;
}

.pro__note {
  margin: 0;
  color: var(--muted);
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.pro__note span {
  display: inline-block;
}

/* without WebGL: a plain dark pill with a rainbow edge, and the words in HTML */
.is-flat .pro__pill {
  background: linear-gradient(var(--pill), var(--pill)) padding-box, linear-gradient(90deg, #ff5a5a, #ffd25a, #5aff8c, #5ac8ff, #a05aff) border-box;
  border: 1.5px solid transparent;
}

.is-flat .pro__btn {
  padding: 0 28px;
  color: var(--text);
}

.is-flat .pro__face[data-face='rest'] {
  opacity: 1;
}