:root {
  --bg: #fbfbfd;
  --bg-alt: #f5f5f7;
  --surface: #ffffff;
  --text: #1d1d1f;
  --text-soft: #6e6e73;
  --text-faint: #86868b;
  --accent: #0071e3;
  --accent-hover: #0077ed;
  --border: rgba(0, 0, 0, 0.08);
  --kbd-bg: #ffffff;
  --kbd-border: #d2d2d7;
  --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-float: 0 30px 60px -20px rgba(0, 0, 0, 0.28), 0 12px 24px -12px rgba(0, 0, 0, 0.14);
  --radius: 18px;
  --maxw: 1120px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
    "Inter", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
}

* {
  box-sizing: border-box;
  outline: none;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 59px;
}

body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}

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

a { color: var(--accent); text-decoration: none; }
a:is(:hover, :active) { text-decoration: underline; }

h1, h2 { letter-spacing: -0.022em; line-height: 1.06; margin: 0; }

/* ── Buttons ───────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: 1rem;
  border-radius: 999px;
  padding: 0.7em 1.4em;
  transition: background-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
  white-space: nowrap;
  gap: 8px;
}
.btn:is(:hover, :active) { text-decoration: none; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:is(:hover, :active) { background: var(--accent-hover); }
.btn-sm { font-size: 0.9rem; padding: 0.5em 1.1em; }
.btn-lg { font-size: 1.12rem; padding: 0.85em 1.9em; }

/* ── Nav ───────────────────────────────────────────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(251, 251, 253, 0.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.nav.scrolled { border-bottom-color: var(--border); }
.nav-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0.7rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--text);
  margin-right: auto;
}
.brand:is(:hover, :active) { text-decoration: none; }
.nav-links {
  display: flex;
  gap: 1.6rem;
  margin-left: auto;
}
.nav-links a {
  color: var(--text-soft);
  font-size: 0.94rem;
  font-weight: 450;
}
.nav-links a:is(:hover, :active) { color: var(--text); text-decoration: none; }

/* ── Hero ──────────────────────────────────────────────── */
.hero {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(3rem, 8vw, 6rem) 1.5rem 2rem;
  text-align: center;
}
.hero-icon {
  margin: 0 auto 1.6rem;
  /* --shadow-soft: */
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.04));
}
.hero h1 {
  font-size: clamp(2.6rem, 7vw, 4.6rem);
  font-weight: 650;
  margin: auto;
  max-width: 17ch;
}
.hero h1 br {
  display: none;
}

/* Flame intensity of the current sprite frame, from 0 (weakest) to 1 (strongest).
   0.5 is the default value (this is what the word looks like before the
   sprite animation loads). */
@property --fire-n { syntax: "<number>"; inherits: false; initial-value: 0.5; }

.hero h1 .fire-effect {
  /* Configurable flicker intensity: 1 is default. */
  --fire-flicker: 1;
  --fire-t: calc((var(--fire-n) - 0.5) * var(--fire-flicker));
  background-image: linear-gradient(
    -3deg,
    /* from: */
    hsl(
      calc(20.91deg + var(--fire-t) * 3deg)
      calc(52.38% + var(--fire-t) * 8%)
      calc(49.41% + var(--fire-t) * 7%)
    )
    calc(30% + var(--fire-t) * 9%),
    /* to: */
    var(--text)
  );
  background-clip: text;
  color: transparent;
  position: relative;
}

.hero h1 .fire-effect::before {
  content: '';
  right: 0;
  left: -3%;
  bottom: -13%;
  position: absolute;
  width: 105.5%;
  height: 53%;
  pointer-events: none;
  background-image: url(assets/fire-effect/fire-first-frame.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.hero h1 .fire-effect.animation-loaded {
  /* Same duration and start time as the sprite below. `step-end` holds each
     keyframe's value for a single frame, so the gradient changes on the same
     frames the flames do. */
  animation: fire-effect-glow infinite;
  animation-timing-function: step-end;
  animation-duration: calc((1s / 29.97) * 32);
}

.hero h1 .fire-effect.animation-loaded::before {
  background-size: 100% 3200%;
  background-image: var(--spritesheet-blob-url);
  animation: fire-effect-sequence steps(32, jump-none) infinite;
  animation-duration: calc((1s / 29.97) * 32);
}

@keyframes fire-effect-sequence {
  from {
    background-position: 0% 0%;
  }
  to {
    background-position: 0% 100%;
  }
}

/* One stop per sprite frame, representing each frame's flame intensity (coverage),
   to make the word's gradient brighten and dim on the same frames the flames do.
   Generated from the fire spritesheet image (see fire-effect/generate-glow-keyframes.mjs). */
@keyframes fire-effect-glow {
  0% { --fire-n: 0.492; }
  3.125% { --fire-n: 0.157; }
  6.25% { --fire-n: 0.433; }
  9.375% { --fire-n: 0.730; }
  12.5% { --fire-n: 0.757; }
  15.625% { --fire-n: 0.565; }
  18.75% { --fire-n: 0.622; }
  21.875% { --fire-n: 0.504; }
  25% { --fire-n: 0.369; }
  28.125% { --fire-n: 0.312; }
  31.25% { --fire-n: 0.000; }
  34.375% { --fire-n: 0.208; }
  37.5% { --fire-n: 0.464; }
  40.625% { --fire-n: 0.411; }
  43.75% { --fire-n: 0.370; }
  46.875% { --fire-n: 0.423; }
  50% { --fire-n: 0.529; }
  53.125% { --fire-n: 0.894; }
  56.25% { --fire-n: 0.895; }
  59.375% { --fire-n: 0.709; }
  62.5% { --fire-n: 0.310; }
  65.625% { --fire-n: 0.460; }
  68.75% { --fire-n: 0.522; }
  71.875% { --fire-n: 0.783; }
  75% { --fire-n: 1.000; }
  78.125% { --fire-n: 0.603; }
  81.25% { --fire-n: 0.356; }
  84.375% { --fire-n: 0.576; }
  87.5% { --fire-n: 0.414; }
  90.625% { --fire-n: 0.311; }
  93.75% { --fire-n: 0.608; }
  96.875% { --fire-n: 0.551; }
}

.hero h1 .fire-effect::after {
  content: '';
  right: -21.75%;
  bottom: -11%;
  position: absolute;
  width: 30%;
  height: 64.5%;
  pointer-events: none;
  background-image: url(assets/fire-effect/explosion.png);
  background-size: 100%;
  background-repeat: no-repeat;
  z-index: -1;
}

.hero .lede {
  max-width: 36ch;
  max-width: 43ch;
  margin: 1.4rem auto 0;
  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
  color: var(--text-soft);
  font-weight: 400;
}
.hero-actions {
  margin-top: 2.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.3rem;
  flex-wrap: wrap;
}
.hero .featured-badge {
  margin-top: 1.4rem;
}
.hero-shot {
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
}
.hero-shot img {
  margin: 0 auto;
  max-height: 500px;
  filter: drop-shadow(0 40px 70px rgba(0, 0, 0, 0.3));
  border-radius: 12px;
}

/* ── Features ──────────────────────────────────────────── */
#features {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 4rem) 1.5rem;
}
.feature {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  align-items: center;
  gap: clamp(2rem, 6vw, 5rem);
  padding: clamp(3rem, 7vw, 5.5rem) 0;
}
.feature-reverse .feature-text { order: 2; }
.feature-reverse .feature-shot { order: 1; }
.feature-text h2 {
  font-size: clamp(1.7rem, 3.5vw, 2.6rem);
  font-weight: 600;
}
.feature-text p {
  margin: 1rem 0 0;
  font-size: clamp(1.02rem, 1.6vw, 1.2rem);
  color: var(--text-soft);
  max-width: 38ch;
}
.feature-text em { color: var(--text); font-style: normal; font-weight: 500; }
.feature-shot { margin: 0; }
.feature-shot img {
  border-radius: 12px;
  filter: drop-shadow(0 26px 50px rgba(0, 0, 0, 0.22));
}

/* ── Shortcuts ─────────────────────────────────────────── */
.shortcuts {
  background: var(--bg-alt);
  padding: clamp(3.5rem, 8vw, 6rem) 1.5rem;
}
.section-head { text-align: center; margin: 0 auto; }
.section-head h2 {
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  font-weight: 600;
}
.section-head p { color: var(--text-soft); margin: 0.8rem 0 0; font-size: 1.1rem; }

/* Gated on .platform-detected so the thumb doesn't slide in from the left on load
   when the visitor's platform is detected as Windows. */
.sc-wrapper.platform-detected {
  --toggle-transition: 0.34s cubic-bezier(0.32, 0.72, 0, 1);
}

.sc-platform-toggle {
  position: relative;
  /* Equal 1fr columns so both halves match the wider label, which keeps the
     thumb exactly half the track. Flex can't do this at max-content width:
     it splits the track evenly and lets the longer label eat its padding. */
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: max-content;
  margin: 2rem auto 0;
  padding: var(--padding);
  background: rgba(0, 0, 0, 0.05);
  border-radius: 999px;
  --padding: 0.2rem;
}

.sc-thumb {
  position: absolute;
  inset: var(--padding);
  right: 50%;
  background: var(--surface);
  border-radius: 999px;
  box-shadow: var(--shadow-soft);
  transition: transform var(--toggle-transition);
}
.sc-wrapper.keys-win .sc-thumb {
  transform: translateX(100%);
}

.sc-platform-toggle .button {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0.95rem;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-soft);
  transition: color var(--toggle-transition);
}
.sc-platform-toggle .button.selected {
  color: var(--text);
}

.sc-keys kbd.meta {
  position: relative;
  width: calc(var(--meta-key-width) + 0.9em);
  transition: width var(--toggle-transition);
}

.sc-keys kbd.meta span {
  position: absolute;
  transition: opacity var(--toggle-transition);
}

.sc-wrapper.keys-win kbd.meta span.mac,
.sc-wrapper:not(.keys-win) kbd.meta span.win {
  opacity: 0;
  user-select: none;
  -webkit-user-select: none;
}

.sc-list {
  display: grid;
  /* One key track shared by every block, so all labels land on the same edge. */
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  column-gap: 2.5rem;
  row-gap: 1rem;
  margin: 1.5rem auto 0;
  max-width: 860px;
}

.sc-col {
  display: grid;
  grid-template-columns: subgrid;
  /* contains 2 columns: */
  grid-column: span 2;
  row-gap: inherit;
}

.sc-block {
  background: var(--surface);
  border-radius: 14px;
  box-shadow: var(--shadow-soft);
  padding: 0.2rem 1.15rem 0.6rem;
  display: grid;
  grid-template-columns: subgrid;
  /* contains 2 columns: */
  grid-column: span 2;
}

.sc-title {
  /* span entire width of column */
  grid-column: 1 / -1;
  margin: 0;
  padding: 1.05rem 0 0.65rem;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--text);
}

.sc-line {
  display: grid;
  grid-template-columns: subgrid;
  /* contains 2 columns: */
  grid-column: span 2;
  column-gap: 1.1rem;
  padding: 0.55rem 0;
}

.sc-line:not(:first-of-type) {
  border-top: 1px solid var(--border);
}

.sc-keys {
  display: inline-flex;
  align-items: center;
  justify-content: end;
  gap: 0.25rem;
  white-space: nowrap;
}

.sc-keys > * {
  flex-shrink: 0;
}

.sc-label {
  color: var(--text-soft);
  font-size: 0.95rem;
}

.sc-or {
  color: var(--text-faint);
  font-size: 0.78em;
  padding: 0 0.1em;
}

/* ── kbd ───────────────────────────────────────────────── */
kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.7em;
  height: 1.7em;
  padding: 0 0.45em;
  font-family: var(--font);
  font-size: 0.82em;
  font-weight: 500;
  color: var(--text);
  background: var(--kbd-bg);
  border: 1px solid var(--kbd-border);
  border-bottom-width: 2px;
  border-radius: 6px;
  line-height: 1;
}
.plus { color: var(--text-faint); font-size: 0.82em; margin: 0 0.05em; }
.kbd-sep { color: var(--text-faint); font-size: 0.82em; }

/* ── Privacy ───────────────────────────────────────────── */
.privacy { padding: clamp(3.5rem, 8vw, 6rem) 1.5rem; }
.privacy-card {
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
}
.privacy-card h2 {
  font-size: clamp(1.7rem, 3.5vw, 2.4rem);
  font-weight: 600;
}
.privacy-card p {
  margin: 1.1rem 0 0;
  color: var(--text-soft);
  font-size: 1.12rem;
}

/* ── CTA ───────────────────────────────────────────────── */
.cta {
  background: var(--bg-alt);
  text-align: center;
  padding: clamp(4rem, 9vw, 7rem) 1.5rem;
}
.cta h2 {
  font-size: clamp(1.9rem, 4.5vw, 3rem);
  font-weight: 650;
  margin-bottom: 1.8rem;
}

/* ── Footer ────────────────────────────────────────────── */
.footer {
  border-top: 1px solid var(--border);
  padding: 2.2rem 1.5rem;
}
.footer-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
  color: var(--text);
}
.footer-credit {
  color: var(--text-faint);
  font-size: 0.92rem;
  display: flex;
  gap: 1rem;
}
.footer-credit .attribution {
  color: var(--text-soft);
}

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 800px) {
  .hero h1 br { display: block; }
  .nav-links { display: none; }
  .nav-inner > .btn { margin-left: auto; }
  .feature {
    grid-template-columns: 1fr;
    gap: 1.8rem;
    text-align: center;
    padding: clamp(2.5rem, 9vw, 4rem) 0;
  }
  .feature-reverse .feature-text { order: 1; }
  .feature-reverse .feature-shot { order: 2; }
  .feature-text p { margin-left: auto; margin-right: auto; }
  .sc-list { grid-template-columns: max-content minmax(0, 1fr); }
  .sc-label { font-size: 0.92rem; padding-left: 0.9rem; }
}