/* Prompuff's landing page. Everything here, fonts included, is served from this site. */

@font-face {
  font-family: "Manrope";
  src: url("fonts/Manrope-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Manrope";
  src: url("fonts/Manrope-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Manrope";
  src: url("fonts/Manrope-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/IBMPlexMono-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* The showroom's theme colors are registered, so picking a theme glides from one palette to the next. */

@property --t-bg { syntax: "<color>"; inherits: true; initial-value: #0F1218; }
@property --t-border { syntax: "<color>"; inherits: true; initial-value: #2A3240; }
@property --t-text { syntax: "<color>"; inherits: true; initial-value: #E8ECF1; }
@property --t-text-2 { syntax: "<color>"; inherits: true; initial-value: #98A2B3; }
@property --t-accent { syntax: "<color>"; inherits: true; initial-value: #2DD4BF; }
@property --t-accent-text { syntax: "<color>"; inherits: true; initial-value: #7FF0E0; }
@property --t-on-accent { syntax: "<color>"; inherits: true; initial-value: #0F1218; }
@property --t-lavender { syntax: "<color>"; inherits: true; initial-value: #B48EFF; }
@property --t-lavender-text { syntax: "<color>"; inherits: true; initial-value: #CDB4FF; }
@property --t-sky { syntax: "<color>"; inherits: true; initial-value: #38BDF8; }
@property --t-pink { syntax: "<color>"; inherits: true; initial-value: #E879A9; }
@property --t-peach { syntax: "<color>"; inherits: true; initial-value: #E08E4A; }
@property --t-mint { syntax: "<color>"; inherits: true; initial-value: #3DD68C; }
@property --t-tint { syntax: "<percentage>"; inherits: true; initial-value: 14%; }

/* Tokens: Prompuff Dark first, Prompuff Light when the system asks for it. */

:root {
  color-scheme: dark;
  interpolate-size: allow-keywords;

  --bg: #0A0C10;
  --bg-raised: #0D1015;
  --surface: #151920;
  --surface-2: #1B2029;
  --inset: #07090C;
  --tile: #11141A;
  --line: #1E242E;
  --line-2: #2A3240;
  --line-3: #3A4453;
  --hairline: rgb(255 255 255 / 0.08);
  --tile-line: rgb(255 255 255 / 0.06);
  --tile-shadow: 0 0 0 transparent;

  --text-strong: #F5F7FA;
  --text: #E8ECF1;
  --text-2: #98A2B3;
  --text-3: #7D8898;

  --accent: #2DD4BF;
  --accent-hover: #5EEAD4;
  --accent-glow: rgb(45 212 191 / 0.45);
  --on-accent: #0A0C10;
  --link: #5EEAD4;
  --focus: #5EEAD4;

  --puff: #B48EFF;
  --heart: #E879A9;
  --lavender-ink: #B48EFF;
  --var: #CDB4FF;
  --var-bg: rgb(180 142 255 / 0.14);
  --val: #7FF0E0;
  --val-bg: rgb(45 212 191 / 0.13);
  --bubble-bg: #1D1A2C;
  --bubble-line: #7A62AE;

  --glass: rgb(10 12 16 / 0.72);
  --quiet-bg: rgb(255 255 255 / 0.06);
  --quiet-bg-hover: rgb(255 255 255 / 0.11);
  --row-hover: rgb(255 255 255 / 0.04);
  --headline: linear-gradient(180deg, #FFFFFF 15%, #AEB7C4 100%);
  --number: linear-gradient(180deg, #CDB4FF 10%, #8B6CD6 100%);
  --glow-lavender: rgb(180 142 255 / 0.2);
  --glow-teal: rgb(45 212 191 / 0.1);
  --glow-pink: rgb(232 121 169 / 0.07);
  --shot-ring: rgb(255 255 255 / 0.09);
  --shot-shadow: 0 40px 80px -30px rgb(0 0 0 / 0.75);
  --stage-shadow: 0 60px 120px -40px rgb(0 0 0 / 0.8);
  --dot-ring: rgb(255 255 255 / 0.16);
  --term-bg: #07090C;
  --term-bar: #0F1218;

  --key-bg: linear-gradient(180deg, #262C36, #1A1F27);
  --key-shadow: inset 0 1px 0 rgb(255 255 255 / 0.09), 0 0 0 1px rgb(0 0 0 / 0.55), 0 5px 0 #05070A, 0 16px 28px -8px rgb(0 0 0 / 0.7);
  --key-shadow-down: inset 0 1px 0 rgb(255 255 255 / 0.06), 0 0 0 1px rgb(0 0 0 / 0.55), 0 1px 0 #05070A, 0 4px 8px -2px rgb(0 0 0 / 0.5);

  --font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;

  --step--1: 0.875rem;
  --step-0: clamp(1.0625rem, 1rem + 0.2vw, 1.125rem);
  --step-1: clamp(1.1875rem, 1.08rem + 0.45vw, 1.4375rem);
  --step-2: clamp(1.5rem, 1.3rem + 0.8vw, 2rem);
  --step-3: clamp(2.25rem, 1.3rem + 3.6vw, 4.5rem);
  --step-4: clamp(2.75rem, 0.9rem + 5.6vw, 6rem);
  --step-statement: clamp(2rem, 1rem + 3.8vw, 4.375rem);

  --gutter: clamp(16px, 4vw, 40px);
  --section-space: clamp(96px, 12vw, 168px);
  --wrap: 1240px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;

    --bg: #FAFAFB;
    --bg-raised: #F3F4F6;
    --surface: #FFFFFF;
    --surface-2: #F1F3F6;
    --inset: #F6F7F9;
    --tile: #FFFFFF;
    --line: #E6E8EC;
    --line-2: #D7DBE2;
    --line-3: #BCC3CE;
    --hairline: rgb(23 27 34 / 0.09);
    --tile-line: rgb(23 27 34 / 0.07);
    --tile-shadow: 0 1px 2px rgb(23 27 34 / 0.04), 0 16px 40px -24px rgb(23 27 34 / 0.18);

    --text-strong: #0E1116;
    --text: #171B22;
    --text-2: #525C6B;
    --text-3: #66707F;

    --accent: #0F766E;
    --accent-hover: #115E59;
    --accent-glow: rgb(15 118 110 / 0.35);
    --on-accent: #FFFFFF;
    --link: #0F766E;
    --focus: #0F766E;

    --heart: #C9407F;
    --lavender-ink: #7C5CD6;
    --var: #5E3FB8;
    --var-bg: rgb(124 92 214 / 0.12);
    --val: #115E59;
    --val-bg: rgb(15 118 110 / 0.1);
    --bubble-bg: #F3EEFD;
    --bubble-line: #B48EFF;

    --glass: rgb(250 250 251 / 0.74);
    --quiet-bg: rgb(23 27 34 / 0.05);
    --quiet-bg-hover: rgb(23 27 34 / 0.09);
    --row-hover: rgb(23 27 34 / 0.035);
    --headline: linear-gradient(180deg, #0E1116 30%, #48515F 100%);
    --number: linear-gradient(180deg, #8B6CE0 10%, #5E3FB8 100%);
    --glow-lavender: rgb(180 142 255 / 0.28);
    --glow-teal: rgb(45 212 191 / 0.12);
    --glow-pink: rgb(232 121 169 / 0.1);
    --shot-ring: rgb(23 27 34 / 0.1);
    --shot-shadow: 0 40px 80px -36px rgb(23 27 34 / 0.4);
    --stage-shadow: 0 60px 120px -50px rgb(23 27 34 / 0.45);
    --dot-ring: rgb(23 27 34 / 0.14);
    --term-bg: #FFFFFF;
    --term-bar: #F3F4F6;

    --key-bg: linear-gradient(180deg, #FFFFFF, #F0F2F5);
    --key-shadow: inset 0 -1px 0 rgb(23 27 34 / 0.04), 0 0 0 1px #D7DBE2, 0 5px 0 #D7DBE2, 0 16px 28px -10px rgb(23 27 34 / 0.3);
    --key-shadow-down: inset 0 -1px 0 rgb(23 27 34 / 0.04), 0 0 0 1px #D7DBE2, 0 1px 0 #D7DBE2, 0 4px 8px -2px rgb(23 27 34 / 0.2);
  }
}

/* Base */

[hidden] {
  display: none !important;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 72px;
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.6;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 700;
  line-height: 1.2;
  text-wrap: balance;
}

p,
ul,
dl,
dd,
figure,
blockquote,
pre {
  margin: 0;
}

p,
li,
dd {
  text-wrap: pretty;
}

a {
  color: var(--link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection {
  background: rgb(180 142 255 / 0.35);
}

code,
kbd,
pre {
  font-family: var(--font-mono);
}

code {
  font-size: 0.88em;
}

kbd {
  display: inline-block;
  padding: 0 0.4em;
  border: 1px solid var(--line-2);
  border-bottom-width: 2px;
  border-radius: 6px;
  background: var(--surface);
  font-size: 0.8em;
  line-height: 1.6;
  white-space: nowrap;
}

b {
  font-weight: 600;
}

.var {
  padding: 0.05em 0.25em;
  border-radius: 4px;
  background: var(--var-bg);
  color: var(--var);
}

.val {
  padding: 0.05em 0.2em;
  border-radius: 4px;
  background: var(--val-bg);
  color: var(--val);
}

.nowrap {
  white-space: nowrap;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  transform: translateY(-150%);
}

.skip-link:focus-visible {
  transform: none;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.icon {
  flex: none;
  width: 1.2em;
  height: 1.2em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-play {
  width: 0.95em;
  height: 0.95em;
  fill: currentColor;
  stroke: none;
}

.icon-arrow {
  transition: transform 300ms var(--ease-out);
}

/* Headline type: big, tight, and lit from above. */

.section-head h2,
.extras-title,
.finale h2,
.hero-pitch {
  background: var(--headline);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Header: a pane of frosted glass that stays put. */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  background: var(--glass);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  transition: border-color 300ms ease;
}

.site-header.is-scrolled {
  border-bottom-color: var(--hairline);
}

.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
}

.home {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px;
  margin-left: -6px;
  border-radius: 10px;
  color: var(--text-strong);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.home img {
  transition: transform 400ms var(--ease-spring);
}

@media (hover: hover) {
  .home:hover img {
    transform: rotate(-8deg) scale(1.08);
  }
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(4px, 1vw, 12px);
}

.nav-list {
  display: flex;
  align-items: center;
  gap: 2px clamp(0px, 0.8vw, 8px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-list a {
  display: inline-block;
  padding: 8px;
  border-radius: 8px;
  color: var(--text-2);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: color 200ms ease;
}

.nav-list a:hover,
.nav-list a.is-current {
  color: var(--text-strong);
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 200ms ease, transform 250ms var(--ease-out);
}

.nav-cta:hover {
  background: var(--accent-hover);
  color: var(--on-accent);
}

.nav-cta:active {
  transform: scale(0.96);
}

.menu-toggle {
  display: none;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--text-strong);
  cursor: pointer;
}

.menu-toggle-bars {
  position: relative;
  width: 18px;
  height: 14px;
}

.menu-toggle-bars span {
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  transition: top 300ms var(--ease-out), transform 300ms var(--ease-out);
}

.menu-toggle-bars span:first-child {
  top: 3px;
}

.menu-toggle-bars span:last-child {
  top: 9px;
}

.menu-toggle[aria-expanded="true"] .menu-toggle-bars span:first-child {
  top: 6px;
  transform: rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle-bars span:last-child {
  top: 6px;
  transform: rotate(-45deg);
}

/* Without JavaScript, small screens keep GitHub and Download in the bar. */

@media (max-width: 820px) {
  .nav-extra {
    display: none;
  }
}

/* On small screens the section links fold into a menu that opens over the page. */

@media (max-width: 820px) {
  .js .menu-toggle {
    display: grid;
  }

  .js .nav-cta {
    min-height: 36px;
  }

  .js .nav-list {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    height: calc(100vh - 56px);
    height: calc(100dvh - 56px);
    padding: 12px var(--gutter) 48px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--bg);
    opacity: 0;
    visibility: hidden;
    transition: opacity 250ms ease, visibility 0s linear 250ms;
  }

  .menu-open .nav-list {
    opacity: 1;
    visibility: visible;
    transition: opacity 250ms ease, visibility 0s;
  }

  .js .nav-list .nav-extra {
    display: block;
  }

  .js .nav-list li {
    border-bottom: 1px solid var(--line);
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 350ms var(--ease-out), transform 450ms var(--ease-out);
  }

  .menu-open .nav-list li {
    opacity: 1;
    transform: none;
  }

  .menu-open .nav-list li:nth-child(2) { transition-delay: 40ms; }
  .menu-open .nav-list li:nth-child(3) { transition-delay: 80ms; }
  .menu-open .nav-list li:nth-child(4) { transition-delay: 120ms; }
  .menu-open .nav-list li:nth-child(5) { transition-delay: 160ms; }

  .js .nav-list a {
    display: block;
    padding: 16px 2px;
    border-radius: 6px;
    color: var(--text-strong);
    font-size: 1.625rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.25;
  }

  .js .nav-list a:focus-visible {
    outline-offset: -2px;
  }

  .menu-open {
    overflow: hidden;
  }

  .menu-open .site-header {
    border-bottom-color: var(--hairline);
    background: var(--bg);
  }
}

/* Buttons */

.cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 36px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 26px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: inherit;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform 250ms var(--ease-out), background-color 200ms ease, border-color 200ms ease, box-shadow 400ms var(--ease-out);
}

.button:active {
  transform: scale(0.97);
}

.button-primary {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.28), 0 1px 2px rgb(0 0 0 / 0.2);
}

.button-primary:hover {
  background: var(--accent-hover);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.28), 0 12px 32px -10px var(--accent-glow);
}

.button-quiet {
  border-color: var(--hairline);
  background: var(--quiet-bg);
  color: var(--text-strong);
}

.button-quiet:hover {
  background: var(--quiet-bg-hover);
}

.button:hover .icon-arrow,
.file:hover .icon-arrow {
  transform: translateY(2px);
}

/* Hero */

.hero {
  position: relative;
  overflow: clip;
  padding-block: clamp(40px, 6vw, 88px) clamp(48px, 6vw, 80px);
  text-align: center;
}

.hero-glow {
  position: absolute;
  inset: -30% -20% 0;
  pointer-events: none;
  background:
    radial-gradient(34% 32% at 50% 30%, var(--glow-lavender), transparent 70%),
    radial-gradient(28% 30% at 74% 52%, var(--glow-teal), transparent 70%),
    radial-gradient(28% 30% at 26% 56%, var(--glow-pink), transparent 70%);
}

.hero-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.puff-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.bubble {
  position: relative;
  max-width: min(30rem, 100%);
  padding: 10px 20px 9px;
  border: 1px solid var(--bubble-line);
  border-radius: 20px;
  background: var(--bubble-bg);
  box-shadow: 0 14px 34px -14px rgb(122 98 174 / 0.55);
  transform-origin: 50% 130%;
}

.bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  border-right: 1px solid var(--bubble-line);
  border-bottom: 1px solid var(--bubble-line);
  border-bottom-right-radius: 3px;
  background: var(--bubble-bg);
  transform: rotate(45deg);
}

.bubble blockquote p {
  font-size: clamp(1rem, 0.94rem + 0.3vw, 1.1875rem);
  font-weight: 600;
  line-height: 1.35;
  text-wrap: balance;
}

.bubble figcaption {
  margin-top: 1px;
  color: var(--text-2);
  font-size: 0.75rem;
}

.puff {
  width: clamp(96px, 9vw, 128px);
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 18px 28px rgb(180 142 255 / 0.32));
}

.puff-body {
  fill: #B48EFF;
}

.puff-eyes {
  fill: #0A0C10;
  transform-box: fill-box;
  transform-origin: center;
}

.puff-smile {
  fill: none;
  stroke: #0A0C10;
  stroke-width: 0.9;
  stroke-linecap: round;
}

/* Puff squishes from where it sits, like a jelly settling. */
.puff-squish {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}

.hero-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(6px, 1vw, 14px);
  margin-top: clamp(22px, 3vw, 34px);
}

.hero-name {
  color: var(--text-strong);
  font-size: clamp(1.25rem, 1rem + 0.9vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.hero-pitch {
  max-width: 13em;
  padding-bottom: 0.08em;
  font-size: var(--step-4);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.045em;
}

.hero-text {
  max-width: 35em;
  margin-top: 22px;
  color: var(--text-2);
  font-size: var(--step-1);
  line-height: 1.5;
}

.cta-note {
  margin-top: 16px;
  color: var(--text-3);
  font-size: var(--step--1);
}

/* The launch film: it grows to full size as it scrolls in. */

.launch {
  position: relative;
  padding-bottom: clamp(16px, 3vw, 32px);
}

.video {
  position: relative;
}

.video-glow {
  position: absolute;
  inset: 6% 2% -2%;
  pointer-events: none;
  background:
    radial-gradient(50% 55% at 35% 50%, rgb(180 142 255 / 0.4), transparent 70%),
    radial-gradient(45% 55% at 68% 55%, rgb(45 212 191 / 0.28), transparent 70%);
  filter: blur(64px);
  opacity: calc(0.25 + var(--video-glow, 1) * 0.6);
}

.video-stage {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: clamp(14px, 2vw, 28px);
  background: #07090C;
  box-shadow: 0 0 0 1px var(--shot-ring), var(--stage-shadow);
  transform: scale(var(--video-scale, 1));
  will-change: transform;
}

.video-stage video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
}

.video-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 14px;
  padding: 0 16px clamp(16px, 4vw, 44px);
  border: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, transparent 52%, rgb(5 6 8 / 0.62));
  color: #F5F7FA;
  font: inherit;
  cursor: pointer;
}

.video-play[hidden] {
  display: none;
}

.video-play:focus-visible {
  outline-offset: -4px;
}

.video-play-disc {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.16);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.24);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  transition: transform 400ms var(--ease-spring), background-color 200ms ease;
}

.video-play-disc .icon {
  width: 20px;
  height: 20px;
  margin-left: 3px;
  fill: currentColor;
  stroke: none;
}

.video-play-label {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 54px;
  text-shadow: 0 1px 14px rgb(0 0 0 / 0.55);
}

.video-play-time {
  margin-left: 4px;
  color: rgb(245 247 250 / 0.72);
  font-weight: 400;
}

@media (max-width: 600px) {
  .video-play {
    padding-bottom: 10px;
  }

  .video-play-disc {
    width: 42px;
    height: 42px;
  }

  .video-play-disc .icon {
    width: 16px;
    height: 16px;
  }

  .video-play-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

@media (hover: hover) {
  .video-play:hover .video-play-disc {
    background: rgb(255 255 255 / 0.26);
    transform: scale(1.08);
  }
}

.video-missing {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 24px;
  text-align: center;
}

.video-missing[hidden] {
  display: none;
}

.video-missing p {
  max-width: 26em;
  color: #E8ECF1;
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1.4;
}

.video-missing img {
  width: clamp(48px, 8vw, 76px);
  height: auto;
}

.video.is-missing .video-stage {
  background: #07090C url("video/prompuff-launch-placeholder.jpg") center / cover no-repeat;
}

.video.is-missing video,
.video.is-missing figcaption {
  display: none;
}

.video figcaption {
  position: relative;
  margin-top: 16px;
  color: var(--text-3);
  font-size: var(--step--1);
  text-align: center;
}

/* Sections */

.section {
  overflow-x: clip;
  padding-block: var(--section-space);
}

.section-head {
  max-width: 880px;
  margin: 0 auto clamp(48px, 7vw, 96px);
  text-align: center;
}

.section-head h2 {
  padding-bottom: 0.06em;
  font-size: var(--step-3);
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.section-head p {
  max-width: 36em;
  margin: 20px auto 0;
  color: var(--text-2);
  font-size: var(--step-1);
  line-height: 1.5;
}

/* Screenshots: the real app, framed and lit. */

.shot {
  position: relative;
  border-radius: 14px;
  background: #0A0C10;
  box-shadow: 0 0 0 1px var(--shot-ring), var(--shot-shadow);
}

.shot img {
  width: 100%;
  height: auto;
  border-radius: inherit;
}

/* The tour: on wide screens the words scroll past while the app stays in view and changes beside them. */

.tour {
  display: grid;
  gap: clamp(64px, 10vw, 104px);
}

.step {
  display: grid;
  gap: 28px;
}

.step[data-glow="lavender"] { --glow: rgb(180 142 255 / 0.5); }
.step[data-glow="teal"] { --glow: rgb(45 212 191 / 0.42); }
.step[data-glow="sky"] { --glow: rgb(56 189 248 / 0.42); }
.step[data-glow="pink"] { --glow: rgb(232 121 169 / 0.42); }
.step[data-glow="peach"] { --glow: rgb(224 142 74 / 0.4); }

.step-text {
  max-width: 34em;
}

.step-text h3 {
  color: var(--text-strong);
  font-size: var(--step-2);
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.step-text h3 code {
  font-size: 0.82em;
  letter-spacing: 0;
}

.step-text p {
  margin-top: 14px;
  color: var(--text-2);
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  line-height: 1.55;
}

.step-shot {
  isolation: isolate;
}

.step-shot::before {
  content: "";
  position: absolute;
  inset: -14% -8%;
  z-index: -1;
  background: radial-gradient(closest-side, var(--glow, transparent), transparent);
  filter: blur(48px);
  opacity: 0.8;
  pointer-events: none;
}

@media (min-width: 901px) {
  .js .tour {
    --tour-gap: clamp(40px, 5vw, 80px);
    --shot-half: calc((min(100vw, var(--wrap)) - 2 * var(--gutter) - var(--tour-gap)) * 7 / 12 * 0.3125);
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--tour-gap);
    row-gap: 0;
  }

  .js .step {
    display: contents;
  }

  .js .step-text {
    grid-column: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 72vh;
    padding-block: 6vh;
    opacity: 0.22;
    transition: opacity 500ms var(--ease-out);
  }

  .js .step.is-active .step-text {
    opacity: 1;
  }

  .js .step-shot {
    position: sticky;
    top: max(76px, calc(50vh - var(--shot-half)));
    grid-column: 2;
    grid-row: 1 / span 5;
    align-self: start;
    margin-top: max(0px, calc(36vh - var(--shot-half)));
    opacity: 0;
    transform: translateY(24px) scale(0.965);
    transition: opacity 600ms var(--ease-out), transform 900ms var(--ease-out);
  }

  .js .step.is-active .step-shot {
    opacity: 1;
    transform: none;
  }
}

/* The small things: a bento of tiles, each showing its trick once it scrolls in. */

.extras {
  margin-top: clamp(112px, 14vw, 184px);
}

.extras-title {
  padding-bottom: 0.06em;
  margin-bottom: clamp(36px, 5vw, 56px);
  font-size: clamp(1.875rem, 1.3rem + 2.3vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
  text-align: center;
}

.bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 20px);
}

.tile {
  position: relative;
  grid-column: span 6;
  display: flex;
  flex-direction: column;
  gap: 32px;
  min-height: 380px;
  padding: clamp(24px, 3vw, 40px);
  overflow: hidden;
  border-radius: 28px;
  background: var(--tile);
  box-shadow: inset 0 0 0 1px var(--tile-line), var(--tile-shadow);
}

.tile-search,
.tile-undo {
  grid-column: span 7;
}

.tile-keys,
.tile-zip {
  grid-column: span 5;
}

.tile-visual {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.tile-text h4 {
  color: var(--text-strong);
  font-size: var(--step-1);
  letter-spacing: -0.015em;
}

.tile-text p {
  max-width: 32em;
  margin-top: 8px;
  color: var(--text-2);
  font-size: 1rem;
  line-height: 1.55;
}

@media (max-width: 1000px) {
  .tile,
  .tile-search,
  .tile-undo,
  .tile-keys,
  .tile-zip {
    grid-column: span 6;
  }
}

@media (max-width: 680px) {
  .tile,
  .tile-search,
  .tile-undo,
  .tile-keys,
  .tile-zip {
    grid-column: span 12;
    min-height: 0;
  }
}

/* Search tile */

.search-field {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 54px;
  padding: 0 18px;
  border-radius: 16px;
  background: var(--inset);
  box-shadow: inset 0 0 0 1px var(--line-2);
  color: var(--text-strong);
  font-size: 1.125rem;
}

.search-field .icon {
  color: var(--text-3);
}

.search-caret {
  width: 2px;
  height: 1.25em;
  margin-left: -8px;
  border-radius: 1px;
  background: var(--accent);
}

.search-results {
  margin-top: 10px;
  padding: 6px;
  list-style: none;
  border-radius: 16px;
  background: var(--inset);
  box-shadow: inset 0 0 0 1px var(--line);
}

.search-results li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--text);
  font-size: 0.9375rem;
  transition: opacity 500ms var(--ease-out), transform 600ms var(--ease-out);
}

.search-results li:first-child {
  background: var(--surface-2);
}

.search-results li:nth-child(2) {
  transition-delay: 90ms;
}

.result-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--puff);
}

.search-results li:nth-child(2) .result-dot {
  background: #E08E4A;
}

.result-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.result-title mark {
  padding: 0 0.12em;
  border-radius: 4px;
  background: var(--val-bg);
  color: var(--val);
}

.result-tag {
  color: var(--var);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
}

.motion .search-demo:not(.is-found) .search-results li {
  opacity: 0;
  transform: translateY(8px);
}

/* Keyboard tile */

.keys-demo {
  align-items: center;
  gap: 28px;
}

.keys {
  display: flex;
  gap: 14px;
}

.key {
  display: grid;
  place-items: center;
  min-width: 78px;
  height: 78px;
  padding: 0 18px;
  border-radius: 16px;
  background: var(--key-bg);
  box-shadow: var(--key-shadow);
  color: var(--text-strong);
  font-size: 1.375rem;
  font-weight: 600;
}

.key-ctrl {
  min-width: 108px;
  font-size: 1.0625rem;
}

.palette {
  width: min(100%, 290px);
  padding: 6px;
  list-style: none;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line-2), 0 24px 48px -20px rgb(0 0 0 / 0.55);
  font-size: 0.9375rem;
  transition: opacity 500ms var(--ease-out) 650ms, transform 700ms var(--ease-spring) 650ms;
}

.palette li {
  padding: 8px 12px;
  border-radius: 10px;
  color: var(--text-2);
}

.palette li.is-on {
  background: var(--val-bg);
  color: var(--text-strong);
}

.motion .keys-demo:not(.is-played) .palette {
  opacity: 0;
  transform: translateY(12px) scale(0.96);
}

/* Markdown tile */

.tree {
  padding: 0;
  list-style: none;
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: clamp(0.8125rem, 0.75rem + 0.25vw, 0.9375rem);
  line-height: 2.05;
}

.tree li {
  white-space: pre;
  transition: opacity 500ms var(--ease-out), transform 600ms var(--ease-out);
}

.tree-root {
  color: var(--text-strong);
}

.tree li:nth-child(2) { transition-delay: 100ms; }
.tree li:nth-child(3) { transition-delay: 180ms; }
.tree li:nth-child(4) { transition-delay: 260ms; }
.tree li:nth-child(5) { transition-delay: 340ms; }

.motion .zip-demo:not(.is-played) .tree li {
  opacity: 0;
  transform: translateX(-12px);
}

/* Undo tile */

.undo-demo {
  flex-flow: row wrap;
  align-content: center;
  align-items: baseline;
  justify-content: flex-start;
  gap: 0 14px;
}

.undo-number {
  padding-right: 0.04em;
  background: var(--number);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: clamp(5.5rem, 3rem + 8vw, 10rem);
  font-weight: 700;
  letter-spacing: -0.06em;
  line-height: 0.9;
}

.undo-unit {
  color: var(--text-2);
  font-size: var(--step-2);
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* Themes: one prompt, and a row of swatches that re-dress it. */

.showroom {
  max-width: 1040px;
  margin: 0 auto;
}

.theme-stage {
  overflow: hidden;
  border-radius: 22px;
  background: var(--t-bg);
  box-shadow: 0 0 0 1px var(--t-border), var(--stage-shadow);
  color: var(--t-text);
  text-align: left;
  transition:
    --t-bg 700ms var(--ease-in-out), --t-border 700ms var(--ease-in-out), --t-text 700ms var(--ease-in-out),
    --t-text-2 700ms var(--ease-in-out), --t-accent 700ms var(--ease-in-out), --t-accent-text 700ms var(--ease-in-out),
    --t-on-accent 700ms var(--ease-in-out), --t-lavender 700ms var(--ease-in-out), --t-lavender-text 700ms var(--ease-in-out),
    --t-sky 700ms var(--ease-in-out), --t-pink 700ms var(--ease-in-out), --t-peach 700ms var(--ease-in-out),
    --t-mint 700ms var(--ease-in-out), --t-tint 700ms var(--ease-in-out);
}

.ts-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 54px;
  padding: 0 18px;
  border-bottom: 1px solid var(--t-border);
}

.ts-mark {
  width: 24px;
  height: auto;
  transform-origin: 50% 100%;
}

.ts-app {
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.ts-search {
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: center;
  gap: 8px;
  max-width: 420px;
  height: 32px;
  margin-inline: auto;
  padding: 0 6px 0 12px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--t-text) 5%, var(--t-bg));
  box-shadow: inset 0 0 0 1px var(--t-border);
  color: var(--t-text-2);
  font-size: 0.8125rem;
}

.ts-search .icon {
  width: 14px;
  height: 14px;
}

.ts-search-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ts-kbd {
  padding: 1px 6px;
  border-radius: 5px;
  box-shadow: inset 0 0 0 1px var(--t-border);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
}

.ts-tones {
  display: flex;
  gap: 5px;
}

.ts-tones span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.ts-tones span:nth-child(1) { background: var(--t-lavender); }
.ts-tones span:nth-child(2) { background: var(--t-sky); }
.ts-tones span:nth-child(3) { background: var(--t-pink); }
.ts-tones span:nth-child(4) { background: var(--t-peach); }
.ts-tones span:nth-child(5) { background: var(--t-mint); }

.ts-body {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  min-height: 360px;
}

.ts-side {
  margin: 0;
  padding: 14px 10px;
  list-style: none;
  border-right: 1px solid var(--t-border);
  background: color-mix(in srgb, var(--t-text) 2.5%, var(--t-bg));
  color: var(--t-text-2);
  font-size: 0.8125rem;
}

.ts-side li {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 10px;
  border-radius: 7px;
}

.ts-side li.is-on {
  background: color-mix(in srgb, var(--t-accent) var(--t-tint), transparent);
  color: var(--t-text);
  font-weight: 600;
}

.ts-side .ts-side-head {
  margin-top: 14px;
  font-size: 0.75rem;
  font-weight: 600;
}

.ts-swatch {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 2px;
}

.ts-swatch-a { background: var(--t-sky); }
.ts-swatch-b { background: var(--t-peach); }

.ts-card {
  align-self: start;
  margin: clamp(16px, 3vw, 32px);
  padding: 20px 22px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--t-text) 4%, var(--t-bg));
  box-shadow: inset 0 0 0 1px var(--t-border);
}

.ts-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ts-title {
  flex: 1;
  font-size: 1.0625rem;
  font-weight: 700;
}

.ts-heart {
  width: 18px;
  height: 18px;
  fill: var(--t-pink);
}

.ts-desc {
  margin-top: 6px;
  color: var(--t-text-2);
  font-size: 0.875rem;
  line-height: 1.5;
}

.ts-prompt {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 10px;
  background: var(--t-bg);
  box-shadow: inset 0 0 0 1px var(--t-border);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  line-height: 1.75;
}

.ts-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}

.ts-tag {
  padding: 2px 8px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--t-lavender) var(--t-tint), transparent);
  color: var(--t-lavender-text);
  font-family: var(--font-mono);
  font-size: 0.75rem;
}

.ts-rating {
  display: flex;
  gap: 3px;
  margin-left: 8px;
}

.ts-rating span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--t-lavender);
}

.ts-rating-name {
  color: var(--t-text-2);
  font-size: 0.75rem;
}

.ts-copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  margin-left: auto;
  padding: 0 12px;
  border-radius: 8px;
  background: var(--t-accent);
  color: var(--t-on-accent);
  font-size: 0.8125rem;
  font-weight: 600;
}

.ts-copy .icon {
  width: 14px;
  height: 14px;
}

.s-val {
  padding: 0.05em 0.2em;
  border-radius: 3px;
  background: color-mix(in srgb, var(--t-accent) var(--t-tint), transparent);
  color: var(--t-accent-text);
}

.s-var {
  padding: 0.05em 0.2em;
  border-radius: 3px;
  background: color-mix(in srgb, var(--t-lavender) var(--t-tint), transparent);
  color: var(--t-lavender-text);
}

@media (max-width: 720px) {
  .ts-body {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  .ts-side,
  .ts-tones,
  .ts-kbd {
    display: none;
  }

  .ts-card {
    margin: 14px;
    padding: 16px;
  }
}

.theme-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  margin-top: 36px;
  text-align: center;
}

.theme-name {
  min-height: 1.3em;
  color: var(--text-strong);
  font-size: var(--step-2);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.3;
  transition: opacity 180ms ease, transform 360ms var(--ease-out);
}

.theme-name.is-swapping {
  opacity: 0;
  transform: translateY(6px);
}

.picker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 28px;
}

.picker[hidden],
.theme-names[hidden],
.picker-pause[hidden] {
  display: none;
}

.picker-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.picker-label {
  color: var(--text-3);
  font-size: 0.8125rem;
  font-weight: 600;
}

.picker-dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.dot {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--t-bg) 0 50%, var(--t-accent) 50% 100%);
  box-shadow: inset 0 0 0 1px var(--dot-ring), 0 0 0 0 var(--bg), 0 0 0 0 var(--text-2);
  cursor: pointer;
  transition: transform 300ms var(--ease-spring), box-shadow 300ms var(--ease-out);
}

@media (hover: hover) {
  .dot:hover {
    transform: scale(1.12);
  }
}

/* Swatches and the pause button look small but take a 40px tap. */
.dot,
.picker-pause {
  position: relative;
}

.dot::after,
.picker-pause::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
}

.dot[aria-pressed="true"] {
  box-shadow: inset 0 0 0 1px var(--dot-ring), 0 0 0 3px var(--bg), 0 0 0 5px var(--text-2);
}

.dot:focus-visible {
  border-radius: 50%;
  outline-offset: 6px;
}

.picker-pause {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  background: var(--quiet-bg);
  color: var(--text-2);
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease;
}

.picker-pause:hover {
  background: var(--quiet-bg-hover);
  color: var(--text-strong);
}

.picker-pause:focus-visible {
  border-radius: 50%;
}

.picker-pause .icon {
  width: 12px;
  height: 12px;
  fill: currentColor;
  stroke: none;
}

.picker-pause .icon-resume,
.picker-pause.is-paused .icon-pause {
  display: none;
}

.picker-pause.is-paused .icon-resume {
  display: block;
}

@media (max-width: 560px) {
  .picker-group {
    flex-direction: column;
    gap: 10px;
  }

  .picker-dots {
    gap: 8px;
  }
}

.theme-names {
  max-width: 40em;
  color: var(--text-2);
  font-size: 0.9375rem;
}

/* Palettes from src/Prompuff.App/Themes/ThemePalette.cs: each palette's main background, Border2, Text1,
   Text2, the accent and the text on it, and the tones. */

.t-prompuff-dark {
  --t-bg: #0F1218; --t-border: #2A3240; --t-text: #E8ECF1; --t-text-2: #98A2B3; --t-on-accent: #0F1218;
  --t-accent: #2DD4BF; --t-accent-text: #7FF0E0; --t-lavender: #B48EFF; --t-lavender-text: #CDB4FF;
  --t-sky: #38BDF8; --t-pink: #E879A9; --t-peach: #E08E4A; --t-mint: #3DD68C; --t-tint: 14%;
}

.t-darcula {
  --t-bg: #2B2B2B; --t-border: #4B4F51; --t-text: #D4D4D4; --t-text-2: #A9B7C6; --t-on-accent: #2B2B2B;
  --t-accent: #589DF6; --t-accent-text: #8FBEFA; --t-lavender: #9876AA; --t-lavender-text: #B9A0C9;
  --t-sky: #6897BB; --t-pink: #C77DBB; --t-peach: #CC7832; --t-mint: #6A8759; --t-tint: 14%;
}

.t-gruvbox-dark {
  --t-bg: #282828; --t-border: #504945; --t-text: #EBDBB2; --t-text-2: #BDAE93; --t-on-accent: #282828;
  --t-accent: #8EC07C; --t-accent-text: #A9D19B; --t-lavender: #D3869B; --t-lavender-text: #E5B0BE;
  --t-sky: #83A598; --t-pink: #B16286; --t-peach: #FE8019; --t-mint: #B8BB26; --t-tint: 14%;
}

.t-dracula {
  --t-bg: #21222C; --t-border: #44475A; --t-text: #F8F8F2; --t-text-2: #C5C8D6; --t-on-accent: #21222C;
  --t-accent: #BD93F9; --t-accent-text: #CFB2FB; --t-lavender: #BD93F9; --t-lavender-text: #D4B8FB;
  --t-sky: #8BE9FD; --t-pink: #FF79C6; --t-peach: #FFB86C; --t-mint: #50FA7B; --t-tint: 14%;
}

.t-nord {
  --t-bg: #2E3440; --t-border: #4C566A; --t-text: #ECEFF4; --t-text-2: #D8DEE9; --t-on-accent: #2E3440;
  --t-accent: #88C0D0; --t-accent-text: #A3D2DE; --t-lavender: #B48EAD; --t-lavender-text: #CBAEC6;
  --t-sky: #88C0D0; --t-pink: #C48BB5; --t-peach: #D08770; --t-mint: #A3BE8C; --t-tint: 14%;
}

.t-one-dark {
  --t-bg: #21252B; --t-border: #3E4451; --t-text: #D7DAE0; --t-text-2: #ABB2BF; --t-on-accent: #21252B;
  --t-accent: #61AFEF; --t-accent-text: #8CC5F4; --t-lavender: #C678DD; --t-lavender-text: #D9A2E8;
  --t-sky: #56B6C2; --t-pink: #D55FDE; --t-peach: #D19A66; --t-mint: #98C379; --t-tint: 14%;
}

.t-tokyo-night {
  --t-bg: #1A1B26; --t-border: #3B4261; --t-text: #C0CAF5; --t-text-2: #A9B1D6; --t-on-accent: #1A1B26;
  --t-accent: #7AA2F7; --t-accent-text: #9FBCFA; --t-lavender: #BB9AF7; --t-lavender-text: #D0B8FA;
  --t-sky: #7DCFFF; --t-pink: #F7768E; --t-peach: #FF9E64; --t-mint: #9ECE6A; --t-tint: 14%;
}

.t-solarized-dark {
  --t-bg: #002B36; --t-border: #284F59; --t-text: #EEE8D5; --t-text-2: #9EACAC; --t-on-accent: #002B36;
  --t-accent: #2AA198; --t-accent-text: #4CC2B7; --t-lavender: #6C71C4; --t-lavender-text: #9A9EE0;
  --t-sky: #2AA198; --t-pink: #D33682; --t-peach: #CB4B16; --t-mint: #859900; --t-tint: 14%;
}

.t-catppuccin-mocha {
  --t-bg: #181825; --t-border: #45475A; --t-text: #CDD6F4; --t-text-2: #BAC2DE; --t-on-accent: #181825;
  --t-accent: #CBA6F7; --t-accent-text: #DCC2FA; --t-lavender: #B4BEFE; --t-lavender-text: #CDD4FE;
  --t-sky: #89DCEB; --t-pink: #F5C2E7; --t-peach: #FAB387; --t-mint: #A6E3A1; --t-tint: 14%;
}

/* Light palettes get a fainter tint behind values, so the text on it keeps 4.5:1. */

.t-prompuff-light {
  --t-bg: #FFFFFF; --t-border: #D7DBE2; --t-text: #171B22; --t-text-2: #525C6B; --t-on-accent: #FFFFFF;
  --t-accent: #0F766E; --t-accent-text: #0B7A70; --t-lavender: #7C5CD6; --t-lavender-text: #5E3FB8;
  --t-sky: #0A8FCB; --t-pink: #C9407F; --t-peach: #C4681F; --t-mint: #1E9E5E; --t-tint: 8%;
}

.t-gruvbox-light {
  --t-bg: #FBF1C7; --t-border: #D5C4A1; --t-text: #3C3836; --t-text-2: #504945; --t-on-accent: #FFFFFF;
  --t-accent: #427B58; --t-accent-text: #356447; --t-lavender: #B16286; --t-lavender-text: #8F3F71;
  --t-sky: #458588; --t-pink: #CC6D8F; --t-peach: #D65D0E; --t-mint: #98971A; --t-tint: 8%;
}

.t-solarized-light {
  --t-bg: #FDF6E3; --t-border: #D6CFBA; --t-text: #073642; --t-text-2: #4C5F66; --t-on-accent: #FFFFFF;
  --t-accent: #2075B5; --t-accent-text: #1A6399; --t-lavender: #6C71C4; --t-lavender-text: #4F54A8;
  --t-sky: #2AA198; --t-pink: #D33682; --t-peach: #CB4B16; --t-mint: #859900; --t-tint: 8%;
}

.t-catppuccin-latte {
  --t-bg: #EFF1F5; --t-border: #CCD0DA; --t-text: #4C4F69; --t-text-2: #5C5F77; --t-on-accent: #FFFFFF;
  --t-accent: #8839EF; --t-accent-text: #7A2EE0; --t-lavender: #7287FD; --t-lavender-text: #3D50C8;
  --t-sky: #04A5E5; --t-pink: #EA76CB; --t-peach: #FE640B; --t-mint: #40A02B; --t-tint: 8%;
}

.shot-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 3vw, 32px);
  margin-top: clamp(64px, 8vw, 104px);
}

.shot-with-caption figcaption {
  margin-top: 14px;
  color: var(--text-3);
  font-size: var(--step--1);
}

@media (max-width: 760px) {
  .shot-pair {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Terminal section */

.feature {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
}

.feature + .feature {
  margin-top: clamp(80px, 10vw, 128px);
}

.feature-text {
  padding-top: clamp(0px, 1.5vw, 16px);
}

.feature-text h3 {
  color: var(--text-strong);
  font-size: var(--step-2);
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.feature-text h3 code {
  font-size: 0.82em;
  letter-spacing: 0;
}

.feature-text p {
  margin-top: 14px;
  color: var(--text-2);
}

.feature-visual {
  display: grid;
  gap: 20px;
  min-width: 0;
}

@media (max-width: 900px) {
  .feature {
    grid-template-columns: minmax(0, 1fr);
  }

  .feature-text {
    max-width: 36em;
    padding-top: 0;
  }
}

.term {
  overflow: hidden;
  border-radius: 16px;
  background: var(--term-bg);
  box-shadow: 0 0 0 1px var(--line-2), var(--shot-shadow);
}

.term-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
  background: var(--term-bar);
}

.term-light {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--line-3);
}

.term-title {
  position: absolute;
  left: 50%;
  color: var(--text-3);
  font-size: 0.8125rem;
  font-weight: 600;
  transform: translateX(-50%);
}

.terminal,
.snippet {
  color: var(--text);
  font-size: 0.875rem;
  line-height: 1.7;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.terminal {
  padding: clamp(16px, 2.5vw, 26px);
}

.snippet {
  padding: 14px 18px;
  border-radius: 14px;
  background: var(--inset);
  box-shadow: inset 0 0 0 1px var(--line-2);
  font-size: 0.8125rem;
}

.terminal code,
.snippet code {
  font-size: inherit;
}

.t-prompt {
  color: var(--accent);
  user-select: none;
}

.t-out {
  color: var(--text-2);
}

.t-dim {
  color: var(--text-3);
}

.t-caret {
  display: inline-block;
  width: 0.55em;
  height: 1.15em;
  vertical-align: text-bottom;
  background: var(--accent);
  opacity: 0.85;
}

.t-ch.is-at {
  position: relative;
}

.t-ch.is-at::after {
  content: "";
  position: absolute;
  top: 0.15em;
  bottom: 0.1em;
  left: 100%;
  width: 0.55em;
  background: var(--accent);
  opacity: 0.85;
}

.motion .terminal.is-armed .t-hidden,
.motion .terminal.is-armed .t-ch:not(.is-on) {
  visibility: hidden;
}

/* Download */

.download {
  border-block: 1px solid var(--line);
  background: var(--bg-raised);
}

.handheld-note {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  max-width: 560px;
  margin: 0 auto clamp(32px, 5vw, 48px);
  padding: 28px 24px;
  border-radius: 24px;
  background: var(--tile);
  box-shadow: inset 0 0 0 1.5px var(--accent), var(--tile-shadow);
  text-align: center;
}

.handheld-note p {
  color: var(--text);
  font-size: var(--step-1);
  line-height: 1.45;
}

.platforms {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 20px);
  align-items: start;
}

.platform {
  padding: clamp(24px, 2.5vw, 32px);
  border-radius: 28px;
  background: var(--tile);
  box-shadow: inset 0 0 0 1px var(--tile-line), var(--tile-shadow);
}

.platform.is-current {
  box-shadow: inset 0 0 0 1.5px var(--accent), 0 40px 80px -48px var(--accent-glow);
}

.platform-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.platform-head h3 {
  color: var(--text-strong);
  font-size: var(--step-2);
  letter-spacing: -0.025em;
}

.badge {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--val-bg);
  color: var(--val);
  font-size: 0.8125rem;
  font-weight: 600;
}

.badge[hidden] {
  display: none;
}

.platform-meta {
  margin-top: 4px;
  color: var(--text-3);
  font-size: var(--step--1);
}

.files-title {
  margin-top: 24px;
  color: var(--text-2);
  font-size: 0.875rem;
  font-weight: 600;
}

.files {
  margin-top: 20px;
  padding: 0;
  overflow: hidden;
  list-style: none;
  border-radius: 16px;
  background: var(--inset);
  box-shadow: inset 0 0 0 1px var(--line);
}

.files-title + .files {
  margin-top: 10px;
}

.files li + li {
  border-top: 1px solid var(--line);
}

.file {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 12px;
  align-items: center;
  padding: 14px 16px;
  color: var(--text);
  text-decoration: none;
  transition: background-color 200ms ease;
}

.file:hover {
  background: var(--row-hover);
}

.file:focus-visible {
  border-radius: 16px;
  outline-offset: -3px;
}

.file .icon {
  grid-column: 2;
  grid-row: 1 / span 2;
  color: var(--accent);
}

.file-name {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  overflow-wrap: anywhere;
}

.file-desc {
  grid-column: 1;
  grid-row: 2;
  color: var(--text-3);
  font-size: 0.8125rem;
  line-height: 1.45;
}

.file.is-primary {
  background: var(--accent);
  color: var(--on-accent);
}

.file.is-primary:hover {
  background: var(--accent-hover);
}

.file.is-primary .icon,
.file.is-primary .file-desc {
  color: inherit;
}

.note {
  margin-top: 16px;
  color: var(--text-2);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.platform .snippet {
  margin-top: 10px;
  font-size: 0.75rem;
}

.download-more {
  display: grid;
  gap: 16px;
  max-width: 46em;
  margin: clamp(48px, 6vw, 64px) auto 0;
  color: var(--text-2);
  font-size: 1rem;
  text-align: center;
}

.checksums summary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px 2px;
  color: var(--link);
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

.checksums summary::-webkit-details-marker {
  display: none;
}

.checksums summary::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 350ms var(--ease-out);
}

.checksums[open] summary::after {
  transform: translateY(2px) rotate(225deg);
}

.checksums::details-content {
  height: 0;
  overflow: clip;
  transition: height 450ms var(--ease-out), content-visibility 450ms allow-discrete;
}

.checksums[open]::details-content {
  height: auto;
}

.checksums-body {
  margin-top: 14px;
  padding: 20px 22px;
  border-radius: 18px;
  background: var(--tile);
  box-shadow: inset 0 0 0 1px var(--tile-line);
  text-align: left;
}

.check-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.check-list div {
  display: grid;
  grid-template-columns: 6.5em minmax(0, 1fr);
  gap: 12px;
}

.check-list dt {
  color: var(--text);
  font-weight: 600;
}

.check-list code {
  overflow-wrap: anywhere;
}

@media (max-width: 960px) {
  .platforms {
    grid-template-columns: minmax(0, 1fr);
    max-width: 560px;
    margin-inline: auto;
  }
}

@media (max-width: 480px) {
  .check-list div {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
}

/* Privacy: a statement that lights up word by word, then the promises behind it. */

.privacy {
  padding-top: clamp(128px, 16vw, 224px);
}

.statement {
  max-width: 16em;
  margin: 0 auto;
  color: var(--text-strong);
  font-size: var(--step-statement);
  line-height: 1.1;
  letter-spacing: -0.04em;
  text-align: center;
}

.statement .word {
  opacity: clamp(0.16, calc(var(--lit, 999) - var(--i, 0)), 1);
  transition: opacity 160ms linear;
}

.promise-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(48px, 7vw, 104px);
  max-width: 1080px;
  margin: clamp(88px, 11vw, 144px) auto 0;
}

.promise-icon {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: var(--lavender-ink);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.promise h3 {
  margin-top: 18px;
  color: var(--text-strong);
  font-size: var(--step-2);
  letter-spacing: -0.025em;
}

.promise-lead {
  margin-top: 12px;
  color: var(--text);
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1.4;
}

.promise-list {
  display: grid;
  gap: 12px;
  margin-top: 20px;
  padding-left: 1.2em;
  color: var(--text-2);
}

.promise-list li::marker {
  color: var(--lavender-ink);
}

.site-promise {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: var(--text-3);
  font-size: 0.9375rem;
}

@media (max-width: 860px) {
  .promise-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Finale */

.finale {
  position: relative;
  overflow: clip;
  padding-block: clamp(96px, 12vw, 168px);
  text-align: center;
}

.finale::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(36% 46% at 50% 40%, var(--glow-lavender), transparent 70%);
}

.finale-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.finale-puff {
  width: clamp(72px, 7vw, 96px);
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 16px 26px rgb(180 142 255 / 0.32));
  transform-origin: 50% 100%;
}

.finale h2 {
  margin-top: 26px;
  padding-bottom: 0.06em;
  font-size: var(--step-3);
  line-height: 1.05;
  letter-spacing: -0.04em;
}

/* Footer */

.site-footer {
  padding-block: 48px 56px;
  border-top: 1px solid var(--line);
  background: var(--bg-raised);
  color: var(--text-2);
  font-size: 0.875rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px 48px;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  padding: 0;
  list-style: none;
}

.footer-links a {
  color: var(--text-2);
  text-decoration: none;
  transition: color 200ms ease;
}

.footer-links a:hover {
  color: var(--text-strong);
  text-decoration: underline;
}

.footer-brand a,
.credits a {
  color: inherit;
}

.footer-brand a:hover,
.credits a:hover {
  color: var(--text-strong);
}

.credits {
  grid-column: 1 / -1;
  max-width: 64em;
  color: var(--text-3);
  font-size: 0.8125rem;
}

/* The sign-off leads back to the repository. */

.made-with {
  grid-column: 1 / -1;
  margin: 0;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  text-align: center;
}

.made-with a {
  color: var(--text-2);
  text-decoration: none;
  transition: color 200ms ease;
}

.made-with a:hover {
  color: var(--text-strong);
}

.made-with a:hover .made-with-name {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.heart {
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  margin-inline: 0.1em;
  vertical-align: -0.17em;
  fill: var(--heart);
}

@media (max-width: 760px) {
  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Screenshots on small screens: the whole picture is a button that opens it at full size. */

.shot-zoom {
  display: none;
}

@media (max-width: 900px) {
  .shot-zoom {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 10px;
    border: 0;
    border-radius: inherit;
    background: transparent;
    color: #F5F7FA;
    cursor: zoom-in;
  }

  .shot-zoom:focus-visible {
    outline-offset: -3px;
  }
}

.shot-zoom-badge {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgb(10 12 16 / 0.62);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.22);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.shot-zoom-badge .icon {
  width: 16px;
  height: 16px;
}

.viewer {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--bg);
  color: var(--text);
}

.viewer[open] {
  display: flex;
  flex-direction: column;
}

.viewer::backdrop {
  background: var(--bg);
}

html:has(.viewer[open]) {
  overflow: hidden;
}

.viewer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  padding: 10px var(--gutter);
  border-bottom: 1px solid var(--line);
}

.viewer-hint {
  color: var(--text-2);
  font-size: 0.9375rem;
  line-height: 1.4;
}

.viewer-close {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 18px 0 14px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--quiet-bg);
  color: var(--text-strong);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
}

.viewer-pane {
  display: flex;
  flex: 1;
  overflow: auto;
  overscroll-behavior: contain;
}

.viewer-pane:focus-visible {
  outline-offset: -3px;
}

.viewer-img {
  flex: none;
  width: 1280px;
  max-width: none;
  height: auto;
  margin: auto;
}

/* Phones: longer copy reads from the left edge, small print grows a little, and links get room to tap. */

@media (max-width: 600px) {
  :root {
    --step--1: 0.9375rem;
  }

  .section-head,
  .statement,
  .download-more {
    text-align: left;
  }

  .section-head p,
  .statement {
    margin-left: 0;
  }

  .handheld-note {
    align-items: flex-start;
    text-align: left;
  }

  .step-text p,
  .feature-text p,
  .tile-text p,
  .promise-list {
    font-size: 1.0625rem;
  }

  .file-desc,
  .credits {
    font-size: 0.875rem;
  }

  .footer-links {
    gap: 0 20px;
  }

  .footer-links a,
  .made-with a {
    display: inline-block;
    padding: 10px 0;
  }

  .note {
    font-size: 1rem;
  }
}

/* High-contrast modes draw text in system colors, so the gradient headlines fall back to plain text. */

@media (forced-colors: active) {
  .section-head h2,
  .extras-title,
  .finale h2,
  .hero-pitch,
  .undo-number {
    background: none;
    color: CanvasText;
  }

  .statement .word {
    opacity: 1;
  }

  .dot {
    forced-color-adjust: none;
  }
}

/* Scroll reveals. Without JavaScript nothing is hidden. */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 900ms var(--ease-out), transform 1200ms var(--ease-out), filter 900ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

.js [data-reveal="text"] {
  filter: blur(8px);
}

.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Motion is optional: the opening sequence, Puff's float, blinks, glances and reactions, and the blinking
   carets only play when the system allows it. Puff rests while it's off screen. */

@media (prefers-reduced-motion: no-preference) {
  .hero-glow { animation: fade-in 1800ms var(--ease-out) both; }
  .puff { animation: puff-in 1000ms var(--ease-spring) 120ms both; }
  .puff-float { animation: puff-float 6s ease-in-out 1.4s infinite; }
  .puff-eyes { animation: puff-look 11s ease-in-out 1.2s infinite; }
  .puff-float.is-resting,
  .is-resting .puff-eyes { animation-play-state: paused; }
  .puff-squish.is-squished { animation: puff-squish 650ms ease-out; }
  .ts-mark.is-cheering { animation: puff-cheer 620ms ease-out; }
  .finale-inner.is-in .finale-puff { animation: puff-hello 900ms ease-out 700ms; }
  .bubble { animation: bubble-in 700ms var(--ease-spring) 650ms both; }
  .hero-name { animation: rise 900ms var(--ease-out) 260ms both; }
  .hero-pitch { animation: rise-blur 1200ms var(--ease-out) 360ms both; }
  .hero-text { animation: rise 1000ms var(--ease-out) 560ms both; }
  .hero .cta { animation: rise 1000ms var(--ease-out) 680ms both; }
  .cta-note { animation: rise 1000ms var(--ease-out) 780ms both; }
  .video { animation: rise-far 1500ms var(--ease-out) 820ms both; }
  .search-caret,
  .t-caret { animation: caret-blink 1.1s steps(1) infinite; }
  .viewer[open] { animation: fade-in 250ms ease both; }
  .viewer[open] .viewer-img { animation: viewer-in 450ms var(--ease-out) both; }
}

@keyframes viewer-in {
  from { opacity: 0; transform: scale(0.96); }
}

@keyframes fade-in {
  from { opacity: 0; }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
}

@keyframes rise-blur {
  from { opacity: 0; transform: translateY(26px); filter: blur(14px); }
}

@keyframes rise-far {
  from { opacity: 0; transform: translateY(96px); }
}

@keyframes puff-in {
  from { opacity: 0; transform: translateY(28px) scale(0.6); }
}

@keyframes puff-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* A blink, a glance aside, then a double blink, so the rhythm doesn't tick like a clock. */
@keyframes puff-look {
  0%, 24%, 26.2%, 46%, 66%, 80%, 82.2%, 84.4%, 100% { transform: translateX(0) scaleY(1); }
  25.1%, 81.1%, 83.3% { transform: translateX(0) scaleY(0.1); }
  50%, 62% { transform: translateX(0.5px) scaleY(1); }
}

@keyframes puff-squish {
  0%, 100% { transform: none; }
  18% { transform: scale(1.14, 0.84); }
  42% { transform: scale(0.93, 1.09); }
  66% { transform: scale(1.04, 0.97); }
  84% { transform: scale(0.99, 1.01); }
}

@keyframes puff-cheer {
  0%, 100% { transform: none; }
  30% { transform: translateY(-5px) scale(0.92, 1.1); }
  58% { transform: translateY(0) scale(1.14, 0.86); }
  78% { transform: translateY(-1px) scale(0.97, 1.03); }
}

@keyframes puff-hello {
  0%, 100% { transform: none; }
  25% { transform: translateY(-10px) scale(0.94, 1.07); }
  50% { transform: translateY(0) scale(1.08, 0.92); }
  68% { transform: translateY(-3px) scale(0.98, 1.02); }
  84% { transform: translateY(0); }
}

@keyframes bubble-in {
  from { opacity: 0; transform: translateY(10px) scale(0.85); }
}

@keyframes caret-blink {
  50% { opacity: 0; }
}

@keyframes key-press {
  0%, 100% { transform: none; box-shadow: var(--key-shadow); }
  22%, 68% { transform: translateY(4px); box-shadow: var(--key-shadow-down); }
}

.motion .keys-demo.is-played .key-ctrl {
  animation: key-press 900ms var(--ease-out) 150ms;
}

.motion .keys-demo.is-played .key-k {
  animation: key-press 700ms var(--ease-out) 320ms;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }

  .js [data-reveal] {
    opacity: 1;
    transform: none;
    filter: none;
  }
}