/*
 * X-Alted website. Dark only: stone, candlelight and gold.
 * Fonts: Cinzel (inscriptions: wordmark, small labels), Cormorant Garamond
 * (headings), EB Garamond (reading text). The mock-ups of X's page and of
 * the control bar use the system font, like the real things.
 */

:root {
  --bg: #0a0908;
  --bg-2: #100e0b;
  --stone: #17140f;
  --ink: #eee6d4;
  --ink-2: #b8ae9a;
  --ink-3: #7f7666;
  --gold: #e2c06b;
  --gold-2: #f5dea0;
  --gold-3: #b3832e;
  --line: rgba(226, 192, 107, 0.15);
  --line-2: rgba(226, 192, 107, 0.32);
  --glow: rgba(255, 196, 92, 0.42);
  --serif-display: 'Cormorant Garamond', 'Cormorant', Garamond, 'Times New Roman', serif;
  --serif: 'EB Garamond', Garamond, Georgia, 'Times New Roman', serif;
  --caps: 'Cinzel', 'Trajan Pro', 'Times New Roman', serif;
  --ui: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --gutter: 32px;
  color-scheme: dark;
}

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

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

body {
  margin: 0;
  background:
    radial-gradient(1200px 760px at 50% -8%, rgba(255, 190, 90, 0.09), transparent 62%),
    var(--bg);
  color: var(--ink);
  font: 400 19px/1.65 var(--serif);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

/* Grain, like old stone. Behind everything. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .9 0 0 0 0 .7 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img,
svg {
  display: block;
}

a {
  color: var(--gold-2);
}

::selection {
  background: rgba(226, 192, 107, 0.35);
  color: #fff;
}

:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: 3px;
}

h1,
h2,
h3,
h4,
p {
  margin: 0;
}

/* Icons from the sprite: lines in the current color. */
svg use {
  pointer-events: none;
}

.eyebrow {
  font: 500 12.5px/1.4 var(--caps);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
}

/* Keeps "X-Alted" from breaking at its hyphen. */
.nb {
  white-space: nowrap;
}

/* The hyphen in "X-Alted": a flat gold lozenge. */
.lozenge {
  display: inline-block;
  width: 0.42em;
  height: 0.15em;
  margin: 0 0.1em 0 0.12em;
  vertical-align: 0.3em;
  background: linear-gradient(180deg, var(--gold-2), var(--gold-3));
  clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
}

/* ---- Buttons ------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 28px;
  border: 1px solid transparent;
  border-radius: 3px;
  font: 600 13px/1 var(--caps);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition:
    box-shadow 0.3s,
    border-color 0.3s,
    background-color 0.3s,
    color 0.3s,
    transform 0.3s;
}

.btn-gold {
  background: linear-gradient(180deg, #f6df98, #cf9f45 60%, #b8862f);
  color: #1b1307;
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 210, 0.7),
    0 0 0 1px rgba(255, 220, 140, 0.25),
    0 0 34px -4px var(--glow);
}

.btn-gold:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 210, 0.8),
    0 0 0 1px rgba(255, 220, 140, 0.45),
    0 0 54px 2px var(--glow);
  transform: translateY(-1px);
}

.btn-ghost {
  border-color: var(--line-2);
  background: rgba(226, 192, 107, 0.04);
  color: var(--gold-2);
}

.btn-ghost:hover {
  border-color: var(--gold);
  background: rgba(226, 192, 107, 0.09);
  box-shadow: 0 0 30px -6px var(--glow);
}

.btn-sm {
  padding: 11px 18px;
  font-size: 11.5px;
}

/* ---- Top bar ------------------------------------------------------------ */

.topbar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 64px;
  padding: 0 var(--gutter);
  border-bottom: 1px solid transparent;
  transition:
    background-color 0.4s,
    border-color 0.4s,
    backdrop-filter 0.4s;
}

.topbar.scrolled {
  background: rgba(10, 9, 8, 0.74);
  border-bottom-color: var(--line);
  backdrop-filter: blur(12px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.brand img {
  filter: drop-shadow(0 0 8px rgba(255, 190, 90, 0.35));
}

.brand-word {
  white-space: nowrap;
  font: 600 15px/1 var(--caps);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-2);
}

.brand-word .lozenge {
  vertical-align: 0.28em;
}

.toplinks {
  display: flex;
  gap: 34px;
}

.toplinks a {
  font: 500 12px/1 var(--caps);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-2);
  transition:
    color 0.3s,
    text-shadow 0.3s;
}

.toplinks a:hover {
  color: var(--gold-2);
  text-shadow: 0 0 14px var(--glow);
}

/* ---- Hero --------------------------------------------------------------- */

/*
 * One picture, played once on load (main.js, "The ceremony"). Its final
 * state is this stylesheet alone; the ceremony only moves and fades the
 * parts on the way there. The picture is placed in units of --u (the logo's
 * width / 100): the block from the wordmark's top down to the forearms is
 * 292 × 225 units and fits below the bar, a little above the middle.
 */
.hero {
  --head: 64px;
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 440px;
  overflow: hidden;
  container-type: size;
  isolation: isolate;
}

/* Light falling from a high window. */
.light {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.rays {
  position: absolute;
  inset: -8% -20% 0;
  background: conic-gradient(
    from 158deg at 50% -12%,
    transparent 0deg,
    rgba(255, 214, 150, 0.1) 4deg,
    transparent 7deg,
    transparent 10deg,
    rgba(255, 214, 150, 0.06) 12deg,
    transparent 14.5deg,
    rgba(255, 220, 160, 0.14) 18deg,
    rgba(255, 220, 160, 0.16) 21deg,
    transparent 25deg,
    rgba(255, 214, 150, 0.07) 28deg,
    transparent 31deg,
    transparent 35deg,
    rgba(255, 214, 150, 0.09) 38deg,
    transparent 42deg,
    transparent 360deg
  );
  filter: blur(7px);
  mask-image: linear-gradient(to bottom, #000 10%, transparent 88%);
  transform-origin: 50% 0;
  animation: sway 16s ease-in-out infinite alternate;
  /* Decoration only: once a section has appeared, the rays sit above its
     buttons and would swallow their clicks. */
  pointer-events: none;
}

@keyframes sway {
  from {
    transform: rotate(-1.6deg);
    opacity: 0.75;
  }
  to {
    transform: rotate(1.6deg);
    opacity: 1;
  }
}

/* Gold motes, rising. */
.motes {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.motes span {
  position: absolute;
  left: var(--x);
  bottom: -12px;
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: #ffe6a8;
  box-shadow: 0 0 8px 1px rgba(255, 200, 110, 0.8);
  opacity: 0;
  animation: rise var(--d) linear var(--delay) infinite;
}

@keyframes rise {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  12% {
    opacity: var(--o);
  }
  80% {
    opacity: calc(var(--o) * 0.6);
  }
  100% {
    transform: translate(var(--dx), -92vh);
    opacity: 0;
  }
}

.stage {
  --gap: clamp(14px, 4cqh, 44px);
  --u: min(
    calc((100cqw - 2 * var(--gutter)) / 254),
    calc((100cqh - var(--head) - var(--gap) - 16px) / 190),
    3.4px
  );
  --top: calc(var(--head) + var(--gap) + (100cqh - var(--head) - var(--gap) - 16px - 190 * var(--u)) * 0.38);
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* The logo's square; the rest is placed around it. */
.rig {
  position: absolute;
  left: calc(50% - 50 * var(--u));
  top: calc(var(--top) + 55 * var(--u));
  width: calc(100 * var(--u));
  height: calc(100 * var(--u));
}

/* What the hands lift: the wordmark, the logo, and the sun's glory. */
.lifted {
  position: absolute;
  inset: 0;
}

.wordmark {
  position: absolute;
  left: calc(-75 * var(--u));
  top: calc(-55 * var(--u));
  width: calc(250 * var(--u));
  margin: 0;
  filter: drop-shadow(0 0 calc(8 * var(--u)) rgba(255, 190, 90, 0.2));
}

.wordmark img {
  width: 100%;
  height: auto;
}

.hero-logo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* The sun's glory: a bloom of light and fine rays, like a monstrance's. */
.glory {
  position: absolute;
  left: 50%;
  top: 30.9%;
  width: calc(300 * var(--u));
  aspect-ratio: 1;
  translate: -50% -50%;
  mix-blend-mode: screen;
  pointer-events: none;
}

.bloom {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 238, 190, 0.62) 0%,
    rgba(255, 210, 120, 0.3) 3.2%,
    rgba(255, 180, 80, 0.13) 9%,
    rgba(255, 166, 66, 0.05) 21%,
    rgba(255, 160, 60, 0.015) 34%,
    transparent 50%
  );
  animation: breathe 6s ease-in-out infinite alternate;
}

@keyframes breathe {
  from {
    opacity: 0.82;
    transform: scale(0.97);
  }
  to {
    opacity: 1;
    transform: scale(1.03);
  }
}

.radiance {
  position: absolute;
  inset: 22%;
  width: 56%;
  height: 56%;
  fill: none;
  stroke: #f2d690;
  stroke-width: 0.32;
  stroke-linecap: round;
  opacity: 0.42;
  mask-image: radial-gradient(circle, transparent 13%, #000 24%, #000 38%, transparent 70%);
  animation: turn 300s linear infinite;
}

@keyframes turn {
  to {
    rotate: 360deg;
  }
}

/* The two hands, either side of the logo, a little wrist showing (it fades
   out inside the drawing). Their box comes with the drawing:
   scripts/draw-hands.mjs writes --hx, --hy, --hw, --hh on the svg. */
.hands {
  position: absolute;
  left: calc(var(--hx) * var(--u));
  top: calc(var(--hy) * var(--u));
  width: calc(var(--hw) * var(--u));
  height: calc(var(--hh) * var(--u));
  overflow: visible;
  filter: drop-shadow(0 0 calc(2.5 * var(--u)) rgba(255, 190, 90, 0.2));
}

/* Under the logo, between the hands, as on any self-respecting emblem. */
.est {
  position: absolute;
  left: 50%;
  top: calc(106 * var(--u));
  translate: -50% -50%;
  font: 500 clamp(11px, calc(3.9 * var(--u)), 14px) / 1 var(--caps);
  letter-spacing: 0.42em;
  margin-right: -0.42em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink-3);
}

.descend {
  position: absolute;
  bottom: 24px;
  left: 50%;
  width: 1px;
  height: 60px;
  transform: translateX(-50%);
  background: linear-gradient(transparent, var(--line-2));
}

.descend span {
  position: absolute;
  left: -2px;
  top: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold-2);
  box-shadow: 0 0 10px 2px var(--glow);
  animation: descend 2.6s ease-in-out infinite;
}

@keyframes descend {
  0% {
    top: 0;
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  100% {
    top: 56px;
    opacity: 0;
  }
}


/* ---- The ceremony's starting state -------------------------------------- */

/* Set in <head> before the first paint, so nothing flashes. If main.js never
   runs, the failsafe below shows everything after a few seconds. */
html.ceremony .topbar {
  visibility: hidden;
}

html.ceremony .wordmark img,
html.ceremony .glory,
html.ceremony .light,
html.ceremony .hands,
html.ceremony .est,
html.ceremony .descend {
  opacity: 0;
}

html.ceremony .hero-logo {
  --wipe: 0;
  /* Appears from the bottom up: the edge climbs from the mountain's foot
     (20% from the image's bottom) past the sun (94%). */
  mask-image: linear-gradient(
    to top,
    #000 calc(20% + var(--wipe) * 98% - 18%),
    transparent calc(20% + var(--wipe) * 98%)
  );
}

html.ceremony .light {
  --fall: 0;
  /* Comes in from the top down. */
  mask-image: linear-gradient(to bottom, #000 calc(var(--fall) * 150% - 50%), transparent calc(var(--fall) * 150%));
}

html.ceremony:not(.running) .topbar {
  animation: failsafe-shown 0s 4s forwards;
}

html.ceremony:not(.running) .wordmark img,
html.ceremony:not(.running) .glory,
html.ceremony:not(.running) .hands,
html.ceremony:not(.running) .est,
html.ceremony:not(.running) .descend {
  animation: failsafe 0.8s 4s forwards;
}

html.ceremony:not(.running) .hero-logo,
html.ceremony:not(.running) .light {
  animation:
    failsafe 0.8s 4s forwards,
    failsafe-unmask 0s 4s forwards;
}

@keyframes failsafe {
  to {
    opacity: 1;
  }
}

@keyframes failsafe-shown {
  to {
    visibility: visible;
  }
}

@keyframes failsafe-unmask {
  to {
    mask-image: none;
  }
}

/* The kindling: a canvas over the wordmark while its flames rise. */
.kindle {
  position: absolute;
  pointer-events: none;
}

/* Sparks thrown up as the wordmark kindles. */
.ember {
  position: absolute;
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: #fff1c8;
  box-shadow:
    0 0 6px 1px rgba(255, 190, 90, 0.9),
    0 0 14px 2px rgba(255, 140, 40, 0.35);
  opacity: 0;
  pointer-events: none;
  animation: ember var(--d) cubic-bezier(0.2, 0.6, 0.4, 1) var(--delay) forwards;
}

@keyframes ember {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(1);
  }
  10% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(var(--dx), var(--dy)) scale(0.4);
  }
}

/* The bar is revealed from the middle outward, as if curtains parted: a
   mask whose soft-edged opening widens past both ends. */
html.ceremony .topbar.unveil {
  visibility: visible;
  -webkit-mask: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent) center / 0% 100% no-repeat;
  mask: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent) center / 0% 100% no-repeat;
  animation: unveil 1.5s cubic-bezier(0.62, 0, 0.3, 1) both;
}

@keyframes unveil {
  to {
    -webkit-mask-size: 145% 100%;
    mask-size: 145% 100%;
  }
}

/* Skipped: everything settles in quickly instead. */
.hero.settle :is(.stage, .light, .est, .descend) {
  animation: settle 0.6s ease-out both;
}

.topbar.appear {
  animation: settle 0.6s ease-out both;
}

@keyframes settle {
  from {
    opacity: 0;
  }
}

/* ---- After the hero: what it is, and the buttons ------------------------ */

.intro {
  max-width: 820px;
  margin: 0 auto;
  padding: 64px var(--gutter) 0;
  text-align: center;
}

.intro .eyebrow {
  margin-bottom: 20px;
}

.tagline {
  font: italic 500 clamp(30px, 4vw, 44px)/1.15 var(--serif-display);
  color: var(--gold-2);
  text-shadow: 0 0 22px rgba(255, 196, 92, 0.25);
}

.lede {
  max-width: 36em;
  margin: 18px auto 0;
  color: var(--ink-2);
}

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

/* ---- Genesis: the verse, beside the codex, abridged -------------------- */

.genesis {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 72px;
  align-items: center;
  max-width: 1180px;
  margin: 0 auto;
  padding: 104px var(--gutter) 0;
}

.verse-text {
  font: 500 clamp(23px, 2.5vw, 29px)/1.45 var(--serif-display);
  color: var(--ink);
}

.initial {
  float: left;
  margin: 0.06em 0.12em 0 0;
  font: 500 3.3em/0.82 var(--caps);
  background: linear-gradient(180deg, #fff2c8, #cf9f45 70%, #94672a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 14px rgba(255, 196, 92, 0.35));
}

.verse-ref {
  margin-top: 22px;
  font: 500 12.5px/1 var(--caps);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  text-align: right;
  color: var(--gold);
}

.verse-ref::before {
  content: '';
  display: inline-block;
  width: 40px;
  height: 1px;
  margin-right: 14px;
  vertical-align: 0.3em;
  background: var(--line-2);
}

.verse-after {
  margin-top: 30px;
  color: var(--ink-2);
}

/* The codex, abridged: one line per feature, each a link to its part. */
.order ol {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.order a {
  display: grid;
  grid-template-columns: 22px 170px minmax(0, 1fr);
  gap: 14px;
  align-items: baseline;
  padding: 11px 6px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  font-size: 16px;
  line-height: 1.4;
  color: var(--ink-2);
  transition: background-color 0.3s;
}

.order a > span {
  display: contents;
}

.order b {
  font: 600 20px/1.2 var(--serif-display);
  color: var(--ink);
  transition:
    color 0.3s,
    text-shadow 0.3s;
}

.order .ti {
  align-self: center;
  width: 20px;
  height: 20px;
}

.order a:hover {
  background: rgba(226, 192, 107, 0.05);
}

.order a:hover b {
  color: var(--gold-2);
  text-shadow: 0 0 14px var(--glow);
}

/* ---- Ornament atop each book -------------------------------------------- */

.ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  max-width: 420px;
  margin: 0 auto 30px;
  color: var(--gold);
}

.ornament span {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-2));
}

.ornament span:last-child {
  background: linear-gradient(90deg, var(--line-2), transparent);
}

.ornament svg {
  width: 18px;
  height: 18px;
  filter: drop-shadow(0 0 8px var(--glow));
}

/* ---- Books (feature groups) --------------------------------------------- */

.book {
  max-width: 1180px;
  margin: 0 auto;
  padding: 90px var(--gutter) 0;
}

.book-head {
  margin-bottom: 64px;
  text-align: center;
}

.book-head :is(h1, h2) {
  margin-top: 8px;
  font: 500 clamp(42px, 5.4vw, 64px)/1 var(--serif-display);
  letter-spacing: 0.01em;
}

.book-sub {
  margin-top: 10px;
  font: italic 400 clamp(19px, 2vw, 23px)/1.3 var(--serif-display);
  color: var(--ink-2);
}

/* A feature: text beside a framed demo or screenshot. */
.feature {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 64px;
  align-items: center;
  margin-bottom: 96px;
}

.feature-flip {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}

.feature-flip .feature-text {
  order: 2;
}

.feature-even {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.kicker {
  margin-bottom: 6px;
  font: italic 500 20px/1.3 var(--serif-display);
  color: var(--gold);
}

.feature h3,
.card h3 {
  margin-bottom: 16px;
  font: 600 clamp(30px, 3.2vw, 40px)/1.05 var(--serif-display);
  color: var(--ink);
}

.feature-text p + p,
.card p + p {
  margin-top: 12px;
}

.feature-text p:not(.kicker),
.card > p:not(.kicker, .eyebrow) {
  color: var(--ink-2);
}

/* A short list with gold lozenges for bullets. */
.checks {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  color: var(--ink-2);
}

.checks li {
  position: relative;
  padding: 3px 0 3px 22px;
  line-height: 1.5;
}

.checks li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.78em;
  width: 8px;
  height: 8px;
  background: linear-gradient(180deg, var(--gold-2), var(--gold-3));
  clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
}

/* The frame around a demo or screenshot: a double hairline in gold, like a reliquary. */
.plate {
  position: relative;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  background: linear-gradient(180deg, #16130f, #0d0b09);
  box-shadow:
    0 40px 90px -40px rgba(0, 0, 0, 0.9),
    0 0 70px -24px rgba(226, 192, 107, 0.28);
}

.plate::before {
  content: '';
  position: absolute;
  inset: 5px;
  border: 1px solid var(--line);
  border-radius: 2px;
  pointer-events: none;
}

/* "Demo (click the buttons)", above the control bar demo's frame. */
.demo-label {
  margin: 0 0 14px;
  font: 500 15px/1.4 var(--caps);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  text-align: center;
  color: var(--gold);
}

.demo-label i {
  font: italic 400 17px/1 var(--serif-display);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-2);
}

.plate figcaption {
  margin: 12px 0 0;
  font: italic 400 16px/1.4 var(--serif-display);
  text-align: center;
  color: var(--ink-3);
}

.shot > img {
  width: 100%;
  height: auto;
  border-radius: 3px;
}

/* The 14 preset photos, small: the dark look's seven, then the light's. */
/* The background screenshots: a slideshow (main.js). The first slide (the
   screenshot, the 14 photos, their note) sets the height; the other two fit
   inside it, so nothing below moves when they change. */
.slides {
  position: relative;
  overflow: hidden;
  border-radius: 3px;
}

.slide > img {
  width: 100%;
  height: auto;
  border-radius: 3px;
}

img.slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.slide.off,
html:not(.js) .slide:not(:first-child) {
  visibility: hidden;
}

.slide-note {
  margin: 12px 0 0;
  font: italic 400 16px/1.4 var(--serif-display);
  text-align: center;
  color: var(--ink-3);
}

/* Its dots: a solid gold diamond over an outlined square of the same size
   (an eight-pointed star), the one showing lit. */
.slider-dots {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-top: 8px;
}

.slider-dots button {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.slider-dots button::before,
.slider-dots button::after {
  content: '';
  grid-area: 1 / 1;
  box-sizing: border-box;
  width: 12px;
  height: 12px;
  transition:
    background 0.3s,
    border-color 0.3s,
    transform 0.3s;
}

/* The square, behind: just its outline, a little brighter than the diamond. */
.slider-dots button::before {
  border: 1px solid rgba(226, 192, 107, 0.55);
}

/* The diamond, on top: solid (the gold at 32 % on the frame's dark, so the
   square's lines don't show through). Its gradient runs at 135deg to come
   out top to bottom once turned. */
.slider-dots button::after {
  background: #52462a;
  transform: rotate(45deg);
}

.slider-dots button:hover::before {
  border-color: var(--gold-3);
}

.slider-dots button:hover::after {
  background: var(--gold-3);
}

.slider-dots button[aria-current]::before {
  border-color: var(--gold);
  transform: scale(1.2);
}

.slider-dots button[aria-current]::after {
  background: linear-gradient(135deg, var(--gold-2), var(--gold-3));
  transform: rotate(45deg) scale(1.2);
}

.presets {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  margin-top: 8px;
}

.presets img {
  width: 100%;
  height: auto;
  border-radius: 3px;
}

/* The accent color, under the background's text. */
.accent {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.accent h4 {
  margin-bottom: 4px;
  font: 600 23px/1.2 var(--serif-display);
  color: var(--ink);
}

.feature-text .accent p {
  margin: 0;
}

.swatches {
  display: flex;
  gap: 9px;
  margin-top: 14px;
}

.swatches i {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.swatches .any {
  margin-left: 6px;
  background: conic-gradient(#ff5f5f, #ffd25f, #8cff5f, #5fffd2, #5f8cff, #d25fff, #ff5f5f);
  box-shadow:
    0 0 0 2px var(--bg),
    0 0 0 3px var(--gold),
    0 0 14px var(--glow);
}

/* ---- Control bar demo --------------------------------------------------- */

/* The player's place on the page. In cinema mode the player leaves it for
   the middle of the window (.cine, sized by main.js); this keeps its room. */
.vid-home {
  position: relative;
  aspect-ratio: 16 / 9;
}

/* Not overflow: hidden: a rounded clip around the bar breaks its glass
   (the blur showed as a rectangle past its outline). The picture and the
   player's shade are rounded instead. */
.vid {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background: #000;
  font-family: var(--ui);
  color: #fff;
  transition: box-shadow 0.6s;
}

.vid.cine {
  position: fixed;
  right: auto;
  bottom: auto;
}

/* The size buttons and a new window size: the player follows smoothly. */
.vid.cine.settled {
  transition:
    box-shadow 0.6s,
    left 0.25s ease,
    top 0.25s ease,
    width 0.25s ease,
    height 0.25s ease;
}

.vid-media {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  background: #000;
}

/* The corner label ("1.5×", "Saved"), as the extension draws it
   (entrypoints/content/style.css, .ex-speed-flash): top right, 10 px in. */
.flash {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 4;
  padding: 3px 8px;
  border-radius: 7px;
  background: rgba(15, 20, 25, 0.25);
  backdrop-filter: blur(6px);
  font: 500 15px/1.2 var(--ui);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
  opacity: 0;
  transition: opacity 0.25s;
  pointer-events: none;
}

.flash.show {
  opacity: 1;
  transition-duration: 0s;
}

/* The frame part of the time after a frame step: "0:42" + ":12". */
.flash .dim {
  font-size: 0.75em;
  opacity: 0.7;
}

/* ---- The control bar, as the extension draws it ----------------------------
   A copy of entrypoints/content/video-bar.css: keep the two in step. Left
   out: the extension's html[data-ex-enabled] gate and the popover rules
   (here the bar sits in the demo video; main.js places it the way
   video-bar.ts does). Cinema mode is data-ex-cinema on the bar. The glass's
   outlines come from main.js (a copy of utils/glass.ts). */

.ex-bar {
  /* The bar's size (1 = 100 %), its padding, a button's size, the space
     between buttons, corners. */
  --ex-s: 1;
  --ex-fly-pad: calc(2px * var(--ex-s));
  --ex-fly-size: calc(24px * var(--ex-s));
  --ex-fly-gap: calc(1px * var(--ex-s));
  --ex-fly-radius: calc(8px * var(--ex-s));
  position: absolute;
  top: 34%;
  left: 6px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ex-fly-gap);
  padding: var(--ex-fly-pad);
  border-radius: var(--ex-fly-radius);
  color: #fff;
  font: 600 calc(11px * var(--ex-s)) / 1 var(--ui);
  user-select: none;
  transition: opacity 0.25s;
}

.ex-bar[data-ex-cinema] {
  --ex-fly-pad: calc(4px * var(--ex-s));
  --ex-fly-size: calc(28px * var(--ex-s));
  --ex-fly-gap: calc(2px * var(--ex-s));
  --ex-fly-radius: calc(10px * var(--ex-s));
}

/* Moving to another side (the demo's own): out, placed, back in. */
.ex-bar.moving {
  opacity: 0;
  transition-duration: 0.12s;
}

/* The glass: one tinted, blurred layer behind the bar and its open flyout,
   cut to their outline, so no seam where they meet. */
.ex-bar::before {
  content: '';
  position: absolute;
  inset: var(--ex-glass-inset, 0);
  z-index: -1;
  background: rgba(15, 20, 25, var(--ex-bar-tint, 0.25));
  backdrop-filter: blur(6px);
  clip-path: var(--ex-glass-closed, inset(0 round var(--ex-fly-radius)));
  transition: clip-path 0.18s ease-out;
  pointer-events: none;
}

.ex-bar[data-ex-glass-set]::before {
  transition: none;
}

.ex-bar:is([data-ex-side='top'], [data-ex-side='bottom']) {
  flex-direction: row;
}

.ex-bar [hidden] {
  display: none !important;
}

.ex-bar .ex-btn {
  all: unset;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  width: var(--ex-fly-size);
  height: var(--ex-fly-size);
  border-radius: calc(6px * var(--ex-s));
  color: inherit;
  cursor: pointer;
}

.ex-bar[data-ex-cinema] .ex-btn {
  border-radius: calc(7px * var(--ex-s));
}

.ex-bar .ex-btn:hover {
  background: rgba(255, 255, 255, 0.18);
}

.ex-bar .ex-btn:focus-visible {
  outline: 2px solid #1d9bf0;
  outline-offset: 1px;
}

/* Cinema on, boost on, speed not 1×: the pointed-at highlight, kept on. */
.ex-bar .ex-btn[aria-pressed='true'],
.ex-bar .ex-btn[data-ex-active] {
  background: rgba(255, 255, 255, 0.18);
}

.ex-bar .ex-btn:disabled {
  opacity: 0.35;
  cursor: default;
  background: none;
}

.ex-bar .ex-btn svg {
  width: calc(16px * var(--ex-s));
  height: calc(16px * var(--ex-s));
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ex-bar .ex-btn[data-ex-action='cinema'] svg {
  stroke-width: 1.25;
}

.ex-bar[data-ex-cinema] .ex-btn svg {
  width: calc(18px * var(--ex-s));
  height: calc(18px * var(--ex-s));
}

/* Flyouts: a main button (.ex-fly) and a group (− value +, or one button)
   that slides out of the bar beside it while the pointer is on it, at right
   angles to the bar and toward the middle of the video. .ex-flyout reaches
   across the bar's padding; .ex-fly-panel is the visible part. */

.ex-bar .ex-fly {
  position: relative;
  display: grid;
}

.ex-bar .ex-flyout {
  position: absolute;
  z-index: 1;
  visibility: hidden;
  transition: visibility 0s linear 0.25s;
}

.ex-bar .ex-fly:is(:hover, :focus-within) > .ex-flyout {
  visibility: visible;
  transition-delay: 0s;
}

.ex-bar .ex-fly-panel {
  box-sizing: border-box;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: var(--ex-fly-gap);
  height: var(--ex-fly-size);
  transition: clip-path 0.18s ease-out;
}

.ex-bar .ex-fly:is(:hover, :focus-within) .ex-fly-panel {
  clip-path: inset(0 round var(--ex-fly-tip));
}

.ex-bar:has(> [data-ex-fly='cinema']:is(:hover, :focus-within) > .ex-flyout:not([hidden]))::before {
  clip-path: var(--ex-glass-cinema, var(--ex-glass-closed, inset(0 round var(--ex-fly-radius))));
}

.ex-bar:has(> [data-ex-fly='speed']:is(:hover, :focus-within) > .ex-flyout:not([hidden]))::before {
  clip-path: var(--ex-glass-speed, var(--ex-glass-closed, inset(0 round var(--ex-fly-radius))));
}

.ex-bar:has(> [data-ex-fly='boost']:is(:hover, :focus-within) > .ex-flyout:not([hidden]))::before {
  clip-path: var(--ex-glass-boost, var(--ex-glass-closed, inset(0 round var(--ex-fly-radius))));
}

.ex-bar:has(> [data-ex-fly='skip']:is(:hover, :focus-within) > .ex-flyout:not([hidden]))::before {
  clip-path: var(--ex-glass-skip, var(--ex-glass-closed, inset(0 round var(--ex-fly-radius))));
}

.ex-bar:has(> [data-ex-fly='frame']:is(:hover, :focus-within) > .ex-flyout:not([hidden]))::before {
  clip-path: var(--ex-glass-frame, var(--ex-glass-closed, inset(0 round var(--ex-fly-radius))));
}

/* Skip and frame step on a top / bottom bar: both buttons in the bar. */
.ex-bar:is([data-ex-side='top'], [data-ex-side='bottom']) .ex-fly {
  grid-auto-flow: column;
  gap: var(--ex-fly-gap);
}

.ex-bar[data-ex-side='left'] .ex-flyout {
  top: 0;
  left: 100%;
  padding-left: var(--ex-fly-pad);
}

.ex-bar[data-ex-side='left'] .ex-fly-panel {
  --ex-fly-tip: 0 var(--ex-fly-radius) var(--ex-fly-radius) 0;
  clip-path: inset(0 100% 0 0 round var(--ex-fly-tip));
}

.ex-bar[data-ex-side='right'] .ex-flyout {
  top: 0;
  right: 100%;
  padding-right: var(--ex-fly-pad);
}

.ex-bar[data-ex-side='right'] .ex-fly-panel {
  --ex-fly-tip: var(--ex-fly-radius) 0 0 var(--ex-fly-radius);
  clip-path: inset(0 0 0 100% round var(--ex-fly-tip));
}

.ex-bar[data-ex-side='top'] .ex-flyout {
  top: 100%;
  left: 0;
  padding-top: var(--ex-fly-pad);
}

.ex-bar[data-ex-side='bottom'] .ex-flyout {
  bottom: 100%;
  left: 0;
  padding-bottom: var(--ex-fly-pad);
}

.ex-bar:is([data-ex-side='top'], [data-ex-side='bottom']) .ex-fly-panel {
  flex-direction: column;
  width: var(--ex-fly-size);
  height: auto;
}

.ex-bar[data-ex-side='top'] .ex-fly-panel {
  --ex-fly-tip: 0 0 var(--ex-fly-radius) var(--ex-fly-radius);
  clip-path: inset(0 0 100% 0 round var(--ex-fly-tip));
}

.ex-bar[data-ex-side='bottom'] .ex-fly-panel {
  --ex-fly-tip: var(--ex-fly-radius) var(--ex-fly-radius) 0 0;
  clip-path: inset(100% 0 0 0 round var(--ex-fly-tip));
}

/* Browsers without CSS shape(): each open flyout gets its own glass. */
.ex-bar.no-shape .ex-fly-panel {
  background: rgba(15, 20, 25, var(--ex-bar-tint, 0.25));
  backdrop-filter: blur(6px);
}

/* The number in a flyout: 1.5×, Off, 80%. */
.ex-bar .ex-value {
  all: unset;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  min-width: calc(26px * var(--ex-s));
  height: calc(20px * var(--ex-s));
  padding: 0 calc(2px * var(--ex-s));
  border-radius: calc(5px * var(--ex-s));
  font-size: calc(10px * var(--ex-s));
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.ex-bar:is([data-ex-side='top'], [data-ex-side='bottom']) .ex-value {
  width: 100%;
  min-width: 0;
  padding: 0;
  font-size: calc(9px * var(--ex-s));
}

.ex-bar[data-ex-cinema]:is([data-ex-side='top'], [data-ex-side='bottom']) .ex-value {
  font-size: calc(10px * var(--ex-s));
}

.ex-bar [data-ex-fly='cinema'] .ex-value {
  min-width: 0;
  padding: 0;
}

/* − value +: 1 px from the flyout's edges all round; + and − are squares. */
.ex-bar :is([data-ex-fly='speed'], [data-ex-fly='boost'], [data-ex-fly='cinema']) .ex-fly-panel {
  --ex-fly-inset: calc(1px * var(--ex-s));
  --ex-fly-item: calc(var(--ex-fly-size) - 2 * var(--ex-fly-inset));
  --ex-fly-item-radius: calc(var(--ex-fly-radius) - var(--ex-fly-inset));
  padding: var(--ex-fly-inset);
}

.ex-bar :is([data-ex-fly='speed'], [data-ex-fly='boost']) .ex-fly-panel {
  gap: 0;
}

.ex-bar :is([data-ex-fly='speed'], [data-ex-fly='boost'], [data-ex-fly='cinema']) .ex-fly-panel .ex-btn {
  width: var(--ex-fly-item);
  height: var(--ex-fly-item);
  border-radius: var(--ex-fly-item-radius);
}

.ex-bar :is([data-ex-fly='speed'], [data-ex-fly='boost'], [data-ex-fly='cinema']) .ex-fly-panel .ex-value {
  height: var(--ex-fly-item);
  border-radius: var(--ex-fly-item-radius);
}

.ex-bar button.ex-value {
  cursor: pointer;
}

.ex-bar button.ex-value:hover {
  background: rgba(255, 255, 255, 0.18);
}

.ex-bar button.ex-value:focus-visible {
  outline: 2px solid #1d9bf0;
  outline-offset: 1px;
}

/* A button's label, once the pointer has rested on it for 1.3 s. */
.ex-bar .ex-tip {
  position: absolute;
  z-index: 2;
  box-sizing: border-box;
  width: max-content;
  max-width: 260px;
  padding: 4px 7px;
  border-radius: 6px;
  background: rgba(15, 20, 25, 0.92);
  color: #fff;
  font: 400 12px/1.35 var(--ui);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .ex-bar::before,
  .ex-bar .ex-fly-panel {
    transition: none;
  }
}

/* ---- Where else the bar can go ---------------------------------------------
   The demo's own: a dashed outline on each other side while the pointer is
   on the video (always on touch screens); a click moves the bar there.
   main.js places them where the bar would sit. */

.bar-spots {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.spot {
  all: unset;
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  padding: 9px;
  cursor: pointer;
  pointer-events: auto;
  opacity: 0;
  transition: opacity 0.25s;
}

.spot[hidden] {
  display: none;
}

.vid:hover .spot,
.spot:focus-visible {
  opacity: 1;
}

@media (hover: none) {
  .spot {
    opacity: 0.85;
  }
}

.spot i {
  display: block;
  width: 92px;
  height: 18px;
  border: 1px dashed rgba(255, 255, 255, 0.7);
  border-radius: 9px;
  background: rgba(15, 20, 25, 0.3);
  backdrop-filter: blur(6px);
  transition:
    border-color 0.2s,
    background-color 0.2s,
    box-shadow 0.2s;
}

.spot:is([data-side='left'], [data-side='right']) i {
  width: 18px;
  height: 92px;
}

.spot:hover i,
.spot:focus-visible i {
  border: 1px solid var(--gold);
  background: rgba(226, 192, 107, 0.3);
  box-shadow: 0 0 16px var(--glow);
}

.spot span {
  position: absolute;
  padding: 4px 7px;
  border-radius: 6px;
  background: rgba(15, 20, 25, 0.92);
  color: #fff;
  font: 400 12px/1.35 var(--ui);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}

.spot:hover span,
.spot:focus-visible span {
  opacity: 1;
}

.spot[data-side='top'] span {
  top: 100%;
}

.spot[data-side='bottom'] span {
  bottom: 100%;
}

.spot[data-side='left'] span {
  left: 100%;
}

.spot[data-side='right'] span {
  right: 100%;
}

/* X's player controls, roughly: the progress line, then a row of buttons;
   about 62 px in all (utils/video.ts, X_CONTROLS_HEIGHT). A bottom bar sits
   just above the line. */
.player {
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  height: 62px;
  border-radius: 0 0 10px 10px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
  font: 500 12px/1 var(--ui);
  font-variant-numeric: tabular-nums;
}

.pl-track {
  position: absolute;
  top: 20px;
  left: 12px;
  right: 12px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.3);
  cursor: pointer;
}

/* A taller strip to click or drag on than the line itself. */
.pl-track::before {
  content: '';
  position: absolute;
  inset: -8px 0;
}

.pl-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: inherit;
  background: #fff;
  pointer-events: none;
}

.pl-row {
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.pl-play {
  all: unset;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin: -6px;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
}

.pl-play:hover {
  background: rgba(255, 255, 255, 0.12);
}

.pl-play:focus-visible {
  outline: 2px solid var(--gold);
}

.pl-play svg {
  width: 16px;
  height: 16px;
}

/* Cinema mode, for real: the whole website dims around the demo. */
.page-dim {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}

body.cinema .page-dim {
  opacity: 0.88;
  pointer-events: auto;
}

.vid.raised,
.vid.landing {
  z-index: 61;
}

body.cinema .vid.raised {
  box-shadow: 0 0 120px -10px rgba(255, 190, 100, 0.25);
}

/* The cinema screenshot: a click shows it large, in the middle of the window
   over the dim (main.js sets its size and glides it there and back). */
#cinema .shot > img {
  cursor: zoom-in;
}

.shot-big {
  position: fixed;
  inset: 0;
  z-index: 61;
  margin: auto;
  border-radius: 4px;
  box-shadow:
    0 0 0 1px var(--line-2),
    0 0 120px -10px rgba(255, 190, 100, 0.25);
  cursor: zoom-out;
}

.shot-big[hidden] {
  display: none;
}

/* ---- Bits of X's page in the mock-ups ----------------------------------- */

.av {
  flex: none;
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3a3f45, #23262a);
}

.spiel-head b {
  display: block;
  height: 6px;
  margin: 3px 0 7px;
  border-radius: 3px;
  background: #2a2d31;
}

.w40 { width: 40%; }

/* ---- Icons in gold ------------------------------------------------------- */

.ti {
  flex: none;
  width: 26px;
  height: 26px;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--gold);
  filter: drop-shadow(0 0 7px rgba(255, 196, 92, 0.45));
  transition: filter 0.4s;
}

/* ---- The lesser features: a row of three, or a stack -------------------- */

.minor {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: -32px 0 96px;
  padding: 0;
  list-style: none;
  border: 1px solid var(--line);
  background: var(--line);
}

.minor li {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 24px 26px 26px;
  background: var(--bg-2);
  transition: background-color 0.4s;
}

.minor li:hover {
  background: #15120e;
}

.minor li:hover .ti {
  filter: drop-shadow(0 0 12px rgba(255, 196, 92, 0.8));
}

.minor .ti {
  margin-top: 4px;
}

.minor h4 {
  margin-bottom: 4px;
  font: 600 22px/1.2 var(--serif-display);
  color: var(--ink);
}

.minor p {
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--ink-2);
}

/* A centered heading over a row of three (image controls). */
.sub-head {
  margin-bottom: 24px;
  text-align: center;
}

.sub-head h3 {
  font: 600 clamp(32px, 3.6vw, 44px)/1.05 var(--serif-display);
}

.images .minor {
  margin-top: 0;
}

/* ---- Two features side by side ------------------------------------------ */

.pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: start;
  margin-bottom: 96px;
}

.card .plate {
  margin-top: 26px;
}

/* ---- The Ten Commands -------------------------------------------------- */

.commandments {
  margin-bottom: 104px;
}

.cmd-head {
  max-width: 640px;
  margin: 0 auto 40px;
  text-align: center;
}

.cmd-head h3 {
  margin: 8px 0 14px;
  font: 500 clamp(36px, 4.2vw, 50px)/1.05 var(--serif-display);
}

.cmd-head p:last-child {
  color: var(--ink-2);
}

.tablets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
  max-width: 1000px;
  margin: 0 auto;
}

.tablet {
  position: relative;
  margin: 0;
  padding: 74px 34px 22px;
  list-style: none;
  border: 1px solid var(--line-2);
  border-radius: 50% 50% 12px 12px / 100px 100px 12px 12px;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(255, 210, 140, 0.08), transparent 70%),
    linear-gradient(180deg, #1d1914, #120f0c);
  box-shadow:
    inset 0 0 50px rgba(0, 0, 0, 0.55),
    0 0 70px -24px rgba(226, 192, 107, 0.25);
}

.tablet::before {
  content: '';
  position: absolute;
  inset: 9px;
  border: 1px solid var(--line);
  border-radius: 50% 50% 7px 7px / 92px 92px 7px 7px;
  pointer-events: none;
}

/* The tablet's heading, in its arch: "I – V". */
.tablet::after {
  content: attr(data-cap);
  position: absolute;
  top: 38px;
  left: 0;
  right: 0;
  font: 500 13px/1 var(--caps);
  letter-spacing: 0.3em;
  text-align: center;
  color: var(--gold);
  opacity: 0.75;
}

.tablet li {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: baseline;
  padding: 11px 0;
  border-bottom: 1px solid rgba(226, 192, 107, 0.09);
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink);
}

.tablet li:last-child {
  border-bottom: 0;
}

.rn {
  font: 500 15px/1 var(--caps);
  letter-spacing: 0.06em;
  color: var(--gold);
  text-shadow: 0 0 12px var(--glow);
}

kbd {
  display: inline-block;
  min-width: 1.7em;
  margin: 0 1px;
  padding: 3px 7px 2px;
  border: 1px solid var(--line-2);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: #1f1a13;
  font: 600 14px/1.2 var(--ui);
  text-align: center;
  color: var(--gold-2);
  box-shadow: 0 0 12px -4px var(--glow);
}

/* ---- Ad video demo ------------------------------------------------------ */

.spiel-mock {
  padding: 22px;
  border-radius: 6px;
  background: #000;
  font-family: var(--ui);
}

.spiel-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.spiel-head b {
  margin: 0;
}

.spiel-tag {
  margin-left: auto;
  font: 500 12px/1 var(--ui);
  color: #71767b;
}

.spiel-video {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 1px solid #2f3336;
  border-radius: 12px;
  overflow: hidden;
}

/* The cartoon. Its parts move with CSS; main.js ("Ad video demo") adds
   .paused when the pretend pointer clicks it, and .away while it's off
   screen. */
.toon {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.toon * {
  transform-box: view-box;
}

.spiel-video.paused .toon *,
.spiel-video.away .toon * {
  animation-play-state: paused;
}

.t-rays {
  transform-origin: 224px 74px;
  animation: toon-rays 3s linear infinite;
}

.t-head {
  transform-origin: 108px 124px;
  animation: toon-bob 0.9s ease-in-out infinite alternate;
}

.t-mouth {
  transform-origin: 108px 84px;
  animation: toon-yap 1.1s linear infinite;
}

.t-brows {
  animation: toon-brows 0.45s ease-in-out infinite alternate;
}

.t-hold {
  transform-origin: 164px 140px;
  animation: toon-sway 1.8s ease-in-out infinite alternate;
}

.t-point {
  animation: toon-jab 0.6s ease-out infinite;
}

.t-spark,
.t-badge {
  transform-box: fill-box;
  transform-origin: center;
}

.t-spark {
  animation: toon-twinkle 1.2s ease-in-out infinite;
}

.toon g:nth-child(2) > .t-spark {
  animation-delay: -0.4s;
}

.toon g:nth-child(3) > .t-spark {
  animation-delay: -0.8s;
}

.t-badge {
  animation: toon-pulse 0.5s ease-in-out infinite alternate;
}

/* One ray and one gap are 20°: a turn of 20° looks like a whole one. */
@keyframes toon-rays {
  to {
    transform: rotate(20deg);
  }
}

@keyframes toon-bob {
  from {
    transform: rotate(-2deg);
  }
  to {
    transform: rotate(2.5deg);
  }
}

@keyframes toon-yap {
  0%,
  100% {
    transform: scaleY(1);
  }
  14% {
    transform: scaleY(0.45);
  }
  28% {
    transform: scaleY(0.9);
  }
  42% {
    transform: scaleY(0.5);
  }
  58% {
    transform: scaleY(1);
  }
  72% {
    transform: scaleY(0.4);
  }
  86% {
    transform: scaleY(0.8);
  }
}

@keyframes toon-brows {
  to {
    transform: translateY(-3px);
  }
}

@keyframes toon-sway {
  from {
    transform: rotate(-3deg);
  }
  to {
    transform: rotate(3deg);
  }
}

@keyframes toon-jab {
  0%,
  100% {
    transform: none;
  }
  30% {
    transform: translate(4px, -4px);
  }
}

@keyframes toon-twinkle {
  0%,
  100% {
    transform: scale(0.2);
    opacity: 0;
  }
  50% {
    transform: scale(1) rotate(45deg);
    opacity: 1;
  }
}

@keyframes toon-pulse {
  to {
    transform: scale(1.12);
  }
}

/* X's play button, shown while the ad is paused. */
.spiel-play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.8);
  transition:
    opacity 0.15s ease,
    transform 0.15s ease;
}

.spiel-video.paused .spiel-play {
  opacity: 1;
  transform: translate(-50%, -50%);
}

.spiel-play svg {
  width: 22px;
  height: 22px;
  margin-left: 3px;
  color: #fff;
}

/* The pretend pointer: an ordinary arrow, drawn large. Its tip is at the
   box's top left, where the script moves it. */
.spiel-cursor {
  position: absolute;
  left: 66%;
  top: 84%;
  transition:
    left 1s ease-in-out,
    top 1s cubic-bezier(0.3, 0, 0.4, 1);
}

.spiel-cursor svg {
  width: 27px;
  height: 37px;
  margin: -2.5px 0 0 -2.5px;
  fill: #fff;
  stroke: #000;
  stroke-width: 1.2;
  stroke-linejoin: round;
  filter: drop-shadow(1px 2px 2px rgba(0, 0, 0, 0.45));
  transform-origin: 2.5px 2.5px;
}

/* The click: a ring from the tip. */
.spiel-cursor i {
  position: absolute;
  top: -17px;
  left: -17px;
  width: 34px;
  height: 34px;
  border: 2.5px solid #fff;
  border-radius: 50%;
  box-shadow:
    0 0 0 1.5px rgba(0, 0, 0, 0.5),
    inset 0 0 0 1.5px rgba(0, 0, 0, 0.5);
  opacity: 0;
}

/* The ad's own link, under the video, as X shows it. */
.spiel-from {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin-top: 10px;
}

.spiel-link {
  font: 400 13px/1.3 var(--ui);
  color: #71767b;
}

.spiel-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: italic 500 18px/1 var(--serif-display);
  color: var(--gold);
}

.spiel-note svg {
  width: 40px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- The litany --------------------------------------------------------- */

.litany {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.litany h3 {
  margin: 8px 0 20px;
  font: 500 clamp(34px, 4vw, 48px)/1.05 var(--serif-display);
}

.litany ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font: 400 clamp(20px, 2vw, 23px)/1.7 var(--serif-display);
  color: var(--ink-2);
}

.litany em {
  font-style: italic;
  color: var(--ink);
}

.response {
  margin-top: 12px;
  font: italic 500 clamp(32px, 3.6vw, 42px)/1.1 var(--serif-display);
  color: var(--gold-2);
  text-shadow: 0 0 26px var(--glow);
}

.litany .aside {
  margin-top: 20px;
  font-size: 16px;
  color: var(--ink-3);
}

/* ---- Private by design: three vows -------------------------------------- */

.vows {
  max-width: 820px;
  margin: 0 auto;
  padding: 90px var(--gutter) 0;
  text-align: center;
}

.vows h2 {
  margin-top: 10px;
  font: 500 clamp(36px, 4.4vw, 50px)/1.05 var(--serif-display);
}

.vow-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 24px 0 22px;
  padding: 0;
  list-style: none;
}

.vow-list li {
  font: 600 14px/1 var(--caps);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-2);
  text-shadow: 0 0 14px var(--glow);
}

/* A gold lozenge between the vows. */
.vow-list li + li::before {
  content: '';
  display: inline-block;
  width: 9px;
  height: 9px;
  margin: 0 22px;
  vertical-align: 0.1em;
  background: linear-gradient(180deg, var(--gold-2), var(--gold-3));
  clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
}

.vows > p:last-child {
  max-width: 34em;
  margin: 0 auto;
  color: var(--ink-2);
}

/* ---- Install, and the tithe --------------------------------------------- */

.ascend {
  position: relative;
  margin-top: 90px;
  padding: 110px var(--gutter) 90px;
  overflow: hidden;
  text-align: center;
  border-top: 1px solid var(--line);
  isolation: isolate;
}

.rays-soft {
  opacity: 0.7;
}

.ascend-inner {
  max-width: 720px;
  margin: 0 auto;
}

.ascend-logo {
  width: 96px;
  height: auto;
  margin: 0 auto 28px;
  filter: drop-shadow(0 0 24px rgba(255, 196, 92, 0.4));
}

.ascend h2 {
  font: 500 clamp(52px, 8vw, 92px)/1 var(--serif-display);
  background: linear-gradient(180deg, #fff6d6 0%, #f3d98f 40%, #cf9f45 75%, #a8772c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 24px rgba(255, 196, 92, 0.3));
}

.ascend-inner > p {
  margin-top: 18px;
  color: var(--ink-2);
}

.tithe {
  max-width: 560px;
  margin: 80px auto 0;
  padding-top: 40px;
  border-top: 1px solid var(--line);
}

.tithe p:not(.eyebrow) {
  margin: 14px 0 24px;
  color: var(--ink-2);
}

/* "(card or stablecoins)": how to pay, in the text font, quieter than the caps. */
.tithe-btn {
  flex-wrap: wrap;
  row-gap: 6px;
}

.btn-note {
  font: italic 400 15px/1 var(--serif);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-2);
}

/* ---- Contact, X and changelog: their own band above the footer ---------- */

.reach {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 44px;
  padding: 48px var(--gutter);
  border-top: 1px solid var(--line);
  text-align: center;
}

.reach a {
  font: 500 15px/1.2 var(--caps);
  letter-spacing: 0.16em;
  color: var(--ink-2);
  text-decoration: none;
  transition: color 0.2s;
}

.reach a:hover,
.reach a:focus-visible {
  color: var(--gold);
}

@media (max-width: 520px) {
  .reach {
    flex-direction: column;
    align-items: center;
  }
}

/* ---- Footer ------------------------------------------------------------- */

.foot {
  display: grid;
  justify-items: center;
  gap: 18px;
  padding: 56px var(--gutter) 64px;
  border-top: 1px solid var(--line);
  text-align: center;
}

.foot .brand-word {
  font-size: 13px;
}

.confession {
  max-width: 40em;
  font-size: 16px;
  color: var(--ink-3);
}

.foot .fine {
  font: 500 11px/1 var(--caps);
  letter-spacing: 0.24em;
  color: var(--ink-3);
}

.foot .fine a {
  color: var(--ink-2);
  text-decoration: none;
  transition: color 0.2s;
}

.foot .fine a:hover,
.foot .fine a[aria-current] {
  color: var(--gold);
}

/* The contact address: after Changelog on one line; on its own line, without
   the dot before it, where the whole line wouldn't fit. */
.foot .fine .mail {
  white-space: nowrap;
}

@media (max-width: 520px) {
  .foot .fine .mail-sep {
    display: none;
  }

  .foot .fine .mail {
    display: block;
    margin-top: 14px;
  }
}

/* ---- The changelog page ----------------------------------------------------
   changelog/index.html, made from CHANGELOG.md by
   scripts/build-changelog-page.mjs. One article per version. */

.chron {
  max-width: 760px;
  padding-top: 140px;
  padding-bottom: 96px;
}

.chron-entry {
  padding: 40px 0 12px;
  border-top: 1px solid var(--line);
}

.chron-entry h2 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 18px;
  margin-bottom: 14px;
  font: 500 38px/1.1 var(--serif-display);
  /* Cormorant's old-style figures made "1.0.1" read as "I.O.I". */
  font-variant-numeric: lining-nums;
  color: var(--gold-2);
}

.chron-entry time {
  font: 500 12px/1.4 var(--caps);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.chron-entry h3 {
  margin: 28px 0 8px;
  font: italic 500 23px/1.3 var(--serif-display);
  color: var(--gold);
}

.chron-entry p,
.chron-entry ul {
  color: var(--ink-2);
}

.chron-entry ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.chron-entry li {
  position: relative;
  padding: 4px 0 4px 22px;
  line-height: 1.55;
}

/* Gold lozenges, as in the feature lists; smaller and hollow one level in. */
.chron-entry li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.85em;
  width: 8px;
  height: 8px;
  background: linear-gradient(180deg, var(--gold-2), var(--gold-3));
  clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
}

.chron-entry li ul {
  margin-top: 4px;
  font-size: 0.94em;
}

.chron-entry li li::before {
  width: 6px;
  height: 6px;
  top: 0.95em;
  background: var(--gold-3);
}

.chron-entry strong {
  font-weight: 500;
  color: var(--ink);
}

.chron-entry code {
  font: 0.86em var(--ui);
  color: var(--ink);
}

/* ---- Appearing on scroll ------------------------------------------------ */

.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 1s ease,
    transform 1s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.js .reveal.in {
  opacity: 1;
  transform: none;
}

/* ---- Narrower screens --------------------------------------------------- */

@media (max-width: 1000px) {
  .genesis {
    grid-template-columns: minmax(0, 1fr);
    gap: 56px;
    max-width: 680px;
  }

  .feature,
  .feature-flip,
  .feature-even {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
    max-width: 680px;
    margin-inline: auto;
  }

  .feature-flip .feature-text {
    order: 0;
  }

  .minor {
    grid-template-columns: minmax(0, 1fr);
    max-width: 680px;
    margin: -40px auto 96px;
  }

  .images .minor {
    margin-top: 0;
  }

  .pair {
    grid-template-columns: minmax(0, 1fr);
    gap: 96px;
    max-width: 680px;
    margin-inline: auto;
  }
}

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

  .tablets {
    grid-template-columns: minmax(0, 1fr);
    max-width: 560px;
  }
}

@media (max-width: 640px) {
  :root {
    --gutter: 16px;
  }

  body {
    font-size: 18px;
  }

  .topbar {
    height: 58px;
  }

  .hero {
    --head: 58px;
  }

  /* Too narrow between the wrists here: under the hands instead. */
  .est {
    top: calc(146 * var(--u));
    letter-spacing: 0.32em;
    margin-right: -0.32em;
  }

  .intro {
    padding-top: 56px;
  }

  .genesis {
    padding-top: 80px;
  }

  /* The codex, abridged: the description under each name. */
  .order a {
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 2px 14px;
    padding: 10px 2px;
  }

  .order a > span {
    display: block;
  }

  .order b {
    display: block;
  }

  .order .ti {
    align-self: start;
    margin-top: 3px;
  }

  .book {
    padding-top: 72px;
  }

  .book-head {
    margin-bottom: 48px;
  }

  .feature,
  .feature-flip,
  .feature-even {
    margin-bottom: 72px;
  }

  .minor {
    margin: -24px auto 72px;
  }

  .minor li {
    padding: 20px 18px 22px;
  }

  .pair {
    gap: 72px;
    margin-bottom: 72px;
  }

  .plate {
    padding: 8px;
  }

  .plate::before {
    inset: 3px;
  }

  .presets {
    gap: 4px;
  }

  .tablet {
    padding: 66px 18px 18px;
    border-radius: 50% 50% 12px 12px / 80px 80px 12px 12px;
  }

  .tablet::before {
    border-radius: 50% 50% 7px 7px / 72px 72px 7px 7px;
  }

  .tablet::after {
    top: 36px;
  }

  .tablet li {
    grid-template-columns: 44px minmax(0, 1fr);
    font-size: 17px;
  }

  .spiel-mock {
    padding: 14px;
  }

  .vows {
    padding-top: 72px;
  }

  /* One vow per line. */
  .vow-list {
    flex-direction: column;
    gap: 14px;
  }

  .vow-list li + li::before {
    display: none;
  }

  .ascend {
    margin-top: 72px;
    padding-top: 88px;
  }
}

/* ---- Less motion, if asked ---------------------------------------------- */

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

  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: 0.01s !important;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
  }
}