/* ============================================================
   Color Killer — color-killer.com
   Palette and type lifted from the game's own Theme.swift.
   ============================================================ */

:root {
  --ink:      #0A0A1A;
  --ink-2:    #171238;
  --dusk:     #21174D;
  --plum:     #61265C;
  --magenta:  #9E3873;
  --gold:     #FFD133;
  --cyan:     #29D9E0;
  --pink:     #FF47AD;
  --ember:    #F26B47;

  --red:    #F23040;
  --blue:   #2982F5;
  --green:  #33D15C;
  --yellow: #FCCF1C;
  --purple: #AD4AED;
  --orange: #FF851A;
  --cyn:    #29D9E0;

  --text:      #FFFFFF;
  --text-dim:  rgba(255,255,255,.62);
  --text-faint:rgba(255,255,255,.40);
  --line:      rgba(255,255,255,.10);
  --panel:     rgba(10,10,26,.56);

  --display: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont,
             "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Roboto Mono", monospace;

  --wrap: 1080px;
  --cannon-h: 72px;
  --radius: 20px;
}

/* the bar gets out of the way on smaller screens */
@media (max-width: 720px) { :root { --cannon-h: 54px; } }
@media (max-width: 480px) { :root { --cannon-h: 44px; } }

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

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* A flex column so that on a page shorter than the window the rainbow bar and
   the footer are pushed to the bottom of the screen instead of floating in the
   middle of it. On a long page they simply follow the content. */
body {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--display);
  color: var(--text);
  background: var(--ink);
  line-height: 1.55;
  overflow-x: hidden;
}
main { flex: 1 0 auto; }

/* The landing page has one short block and nothing else, so it is centred in
   whatever room is left between the header and the rainbow bar rather than
   sitting in the top-left corner. Only this page opts in. */
main.center-hero { display: grid; place-items: center; }
.cannon, .site-footer { flex: 0 0 auto; }

/* The page's own sky: the same five stops as BackdropNode. */
.sky {
  position: fixed; inset: 0; z-index: -2;
  background:
    radial-gradient(120% 80% at 80% 0%, rgba(41,217,224,.07), transparent 60%),
    linear-gradient(180deg, #0A0A1A 0%, #171238 32%, #21174D 58%,
                            #61265C 84%, #9E3873 100%);
  background-attachment: fixed;
}
#playfield { position: fixed; inset: 0; z-index: -1; pointer-events: none; }

/* ------------------------------------------------------------ type */
h1, h2, h3, h4 { font-weight: 800; line-height: 1.08; margin: 0 0 .5em; letter-spacing: -.02em; }
h2 { font-size: clamp(1.9rem, 4.4vw, 3rem); }
h3 { font-size: clamp(1.15rem, 2.2vw, 1.4rem); letter-spacing: -.01em; }
p  { margin: 0 0 1em; }
a  { color: var(--cyan); text-decoration-color: rgba(41,217,224,.4); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }

.eyebrow {
  font: 700 .72rem/1 var(--mono);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--cyan); margin: 0 0 1rem;
}
.lede { font-size: clamp(1.05rem, 1.9vw, 1.25rem); color: var(--text-dim); max-width: 62ch; }
.hero.center .lede { max-width: 34ch; }
.small { font-size: .875rem; color: var(--text-dim); }
.muted { color: var(--text-faint); }

/* ------------------------------------------------------------ layout */
.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
section { padding-block: clamp(2.5rem, 6vw, 5rem); position: relative; }
.section-head { max-width: 64ch; margin-bottom: clamp(2rem, 4vw, 3rem); }

/* ------------------------------------------------------------ header */
.site-header {
  position: sticky; top: 0; z-index: 50; flex: 0 0 auto;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  background: linear-gradient(180deg, rgba(10,10,26,.92), rgba(10,10,26,.66));
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  display: flex; align-items: center; gap: 1.25rem;
  min-height: 60px; padding-block: .5rem;
}
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: inherit; flex: none; }
.brand img { width: 30px; height: 30px; border-radius: 8px; display: block; }
.brand b { font-size: .98rem; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; }
.nav { display: flex; gap: 1.15rem; margin-left: auto; align-items: center; }
.nav a {
  color: var(--text-dim); text-decoration: none; font-size: .9rem; font-weight: 600;
  white-space: nowrap;
}
.nav a:hover, .nav a[aria-current="page"] { color: #fff; }

/* Download button in the top bar. Same disabled state as the big one in the
   hero, and keyed on the same attribute, so both light up with one edit. */
.nav-cta {
  display: inline-flex; align-items: center; gap: .4rem;
  margin-left: .35rem; padding: .42rem .85rem; border-radius: 999px;
  background: #fff; color: #000; text-decoration: none;
  font-size: .85rem; font-weight: 700; letter-spacing: -.01em;
  white-space: nowrap; flex: none;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.nav-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,.4); }
.nav-cta svg { width: 15px; height: 15px; fill: currentColor; flex: none; }
.nav-cta[aria-disabled="true"] {
  background: rgba(255,255,255,.09); color: var(--text-dim);
  border: 1px solid var(--line); cursor: default;
}
.nav-cta[aria-disabled="true"]:hover {
  transform: none; box-shadow: none; color: #fff;
  border-color: rgba(255,255,255,.28);
}

/* The bar has to hold the wordmark, four links and the button. Below 820px
   the two links you can reach another way step aside — Home is the logo, and
   Press is linked from the footer. */
@media (max-width: 820px) { .nav a.hide-sm { display: none; } }
@media (max-width: 430px) {
  .nav { gap: .85rem; }
  .brand b { display: none; }
  .nav-cta { padding: .42rem .7rem; }
}

/* ------------------------------------------------------------ hero */
.hero { padding-block: clamp(1.75rem, 5vw, 3.5rem) clamp(1.5rem, 3.5vw, 2.5rem); }
.hero.center { text-align: center; }
.hero.center .lede { margin-inline: auto; }
.hero.center .cta-row { justify-content: center; }
.wordmark {
  font-size: clamp(2.9rem, 11vw, 6.4rem);
  font-weight: 900; line-height: .9; letter-spacing: -.045em;
  margin: 0; text-shadow: 0 6px 26px rgba(0,0,0,.55);
}
.wordmark .line { display: block; }
.wordmark .l    { display: inline-block; }
.wordmark .l { will-change: transform; }

.tagline {
  position: relative; display: inline-block;
  font-size: clamp(1.25rem, 3.2vw, 1.9rem); font-weight: 800; font-style: italic;
  transform: rotate(-3deg); margin: .45rem 0 1.15rem; padding: 0 .1em;
}
.tagline::before, .tagline::after {
  content: attr(data-text); position: absolute; inset: 0; padding: inherit;
}
.tagline::before { color: var(--cyan); transform: translate(-3px, -1.4px); }
.tagline::after  { color: var(--pink); transform: translate(3px, 1.4px); }
.tagline span { position: relative; z-index: 1; color: #fff; }

.badges { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }
.badge {
  display: inline-flex; align-items: center; gap: .45rem;
  font: 700 .72rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  padding: .5rem .8rem; border-radius: 999px;
  border: 1px solid var(--line); background: rgba(255,255,255,.05); color: var(--text-dim);
}
.badge.ios { border-color: rgba(41,217,224,.45); color: var(--cyan); background: rgba(41,217,224,.08); }
.badge svg { width: 13px; height: 13px; fill: currentColor; }

.cta-row { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; margin-top: .4rem; }

/* App Store button — real geometry, disabled until the link exists */
.appstore {
  display: inline-flex; align-items: center; gap: .7rem;
  padding: .72rem 1.3rem .72rem 1.05rem; border-radius: 14px;
  background: #fff; color: #000; text-decoration: none;
  border: 1px solid rgba(255,255,255,.9);
  font-weight: 700; transition: transform .15s ease, box-shadow .15s ease;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.appstore:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(0,0,0,.45); }
.appstore svg { width: 26px; height: 26px; fill: currentColor; flex: none; }
.appstore .lines { display: grid; text-align: left; line-height: 1.12; }
.appstore .lines i { font-style: normal; font-size: .64rem; letter-spacing: .08em;
  text-transform: uppercase; opacity: .72; font-weight: 600; }
.appstore .lines b { font-size: 1.12rem; letter-spacing: -.02em; }
.appstore[aria-disabled="true"] {
  background: rgba(255,255,255,.08); color: #fff; border-color: var(--line);
  cursor: default; box-shadow: none;
}
.appstore[aria-disabled="true"]:hover { transform: none; }

.btn-ghost {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .72rem 1.15rem; border-radius: 14px;
  border: 1px solid var(--line); background: rgba(255,255,255,.06);
  color: #fff; text-decoration: none; font-weight: 650; font-size: .95rem;
  transition: background .15s ease, border-color .15s ease;
}
.btn-ghost:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.25); }

/* ------------------------------------------------------------ panels */
.panel {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: clamp(1.25rem, 2.6vw, 1.9rem);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.grid { display: grid; gap: 1rem; }
.g2 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.feature h3 { margin-bottom: .35rem; }
.feature p { margin: 0; color: var(--text-dim); font-size: .95rem; }
.feature .ico {
  width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  margin-bottom: .85rem; background: rgba(255,255,255,.07); border: 1px solid var(--line);
}
.feature .ico svg { width: 19px; height: 19px; fill: none; stroke: var(--cyan);
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* steps */
.steps { counter-reset: step; }
.step { position: relative; padding-left: 3.4rem; }
.step::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: -.15rem;
  width: 2.35rem; height: 2.35rem; border-radius: 50%;
  display: grid; place-items: center;
  font: 800 1rem/1 var(--display); color: var(--ink);
  background: linear-gradient(135deg, var(--gold), var(--ember));
}

/* ------------------------------------------------------------ shots
   The screenshots are 1320 x 2868 — the iPhone 6.9" size. aspect-ratio plus
   object-fit means nothing can ever stretch them, whatever the column width. */
.shots {
  display: grid; gap: clamp(1rem, 2.5vw, 1.8rem);
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.shot { margin: 0; }
.shot img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 1320 / 2868; object-fit: contain;
  border-radius: 18px; border: 1px solid var(--line);
  background: var(--ink);
  box-shadow: 0 16px 40px rgba(0,0,0,.45);
}
.shot figcaption {
  margin-top: .7rem; font: 600 .78rem/1.4 var(--mono); color: var(--text-faint);
  letter-spacing: .06em; text-transform: uppercase;
}
.shot a { text-decoration: none; color: inherit; display: block; }
.shot a:hover img { border-color: rgba(255,255,255,.28); }

/* ------------------------------------------------------------ bestiary */
.bestiary { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); }
.beast {
  background: rgba(255,255,255,.035); border: 1px solid var(--line);
  border-radius: 18px; padding: 1rem .9rem 1.1rem; text-align: center;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.beast:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.06); }
.beast img { width: 86px; height: 86px; display: block; margin: 0 auto .4rem; }
.beast b { display: block; font: 800 .82rem/1.2 var(--mono); letter-spacing: .09em; }
.beast span { display: block; font-size: .8rem; color: var(--text-faint); margin-top: .35rem;
  line-height: 1.45; }
.beast em { display: block; font: 600 .66rem/1 var(--mono); color: var(--cyan);
  letter-spacing: .1em; margin-top: .55rem; font-style: normal; }
@media (prefers-reduced-motion: reduce) { .beast:hover { transform: none; } }

/* ------------------------------------------------------------ palette
   A grid, not a wrapping row of pills: every chip is the same size, the hex
   sits under it in mono, and the groups are labelled. */
.palette { display: grid; gap: 1.6rem; margin-top: 1.2rem; }
.palette-group h4 {
  font: 700 .68rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-faint); margin: 0 0 .1rem;
}
.palette-group > p {
  font-size: .85rem; color: var(--text-faint); margin: 0 0 .9rem; max-width: 56ch;
}
.swatches {
  display: grid; gap: .7rem;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
}
.swatch {
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  background: rgba(255,255,255,.03);
}
.swatch i { display: block; height: 58px; }
.swatch span {
  display: block; padding: .5rem .6rem .55rem;
  font: 700 .68rem/1.5 var(--mono); letter-spacing: .06em;
  color: var(--text-dim);
}
.swatch span b { display: block; color: #fff; font-size: .74rem; letter-spacing: .04em; }

/* the wordmark's five stops, as one continuous ramp */
.ramp {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
}
.ramp i { height: 52px; position: relative; }
.ramp i::after {
  content: attr(data-hex); position: absolute; inset: auto 0 .35rem 0;
  text-align: center; font: 700 .6rem/1 var(--mono); color: rgba(0,0,0,.55);
  letter-spacing: .04em;
}

/* ------------------------------------------------------------ stats */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; }
.stat { background: rgba(10,10,26,.6); padding: 1.3rem 1rem; text-align: center; }
.stat b { display: block; font-size: 1.9rem; font-weight: 900; letter-spacing: -.03em;
  background: linear-gradient(120deg, var(--gold), var(--ember));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat span { font: 700 .68rem/1.3 var(--mono); letter-spacing: .13em; text-transform: uppercase;
  color: var(--text-faint); }

/* ------------------------------------------------------------ prose */
.prose { max-width: 74ch; }
.prose h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin-top: 2.6rem; }
.prose h3 { margin-top: 1.9rem; font-size: 1.1rem; }
.prose p, .prose li { color: rgba(255,255,255,.78); font-size: 1rem; }
.prose ul, .prose ol { padding-left: 1.2rem; margin: 0 0 1.2rem; }
.prose li { margin-bottom: .5rem; }
.prose table { width: 100%; border-collapse: collapse; margin: 1rem 0 1.6rem; font-size: .93rem; }
.prose th, .prose td { text-align: left; padding: .65rem .8rem; border-bottom: 1px solid var(--line);
  vertical-align: top; }
.prose th { font: 700 .7rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-faint); }
.prose .updated { font: 600 .8rem/1 var(--mono); color: var(--text-faint); letter-spacing: .06em; }
.table-scroll { overflow-x: auto; }

.callout {
  border-left: 3px solid var(--cyan); background: rgba(41,217,224,.07);
  padding: 1rem 1.2rem; border-radius: 0 14px 14px 0; margin: 1.5rem 0;
}
.callout p:last-child { margin-bottom: 0; }

.toc { font-size: .92rem; }
.toc ol { padding-left: 1.2rem; }
.toc a { color: var(--text-dim); text-decoration: none; }
.toc a:hover { color: #fff; text-decoration: underline; }

details.faq {
  border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.035);
  padding: 0 1.1rem; margin-bottom: .7rem;
}
details.faq summary {
  cursor: pointer; padding: .95rem 0; font-weight: 700; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: "+"; color: var(--cyan); font-size: 1.3rem; line-height: 1; }
details.faq[open] summary::after { content: "−"; }
details.faq .body { padding-bottom: 1rem; color: var(--text-dim); font-size: .95rem; }
details.faq .body p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------ footer */
.site-footer {
  border-top: 1px solid var(--line); background: rgba(10,10,26,.72);
  padding-block: 1.5rem;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.footer-grid { display: flex; flex-wrap: wrap; gap: 1.6rem 3rem; align-items: flex-start; }
.footer-grid nav { display: grid; gap: .45rem; }
.footer-grid h4 { font: 700 .68rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-faint); margin-bottom: .3rem; }
.footer-grid a { color: var(--text-dim); text-decoration: none; font-size: .9rem; }
.footer-grid a:hover { color: #fff; }
.colophon { margin-top: 2.2rem; padding-top: 1.4rem; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; justify-content: space-between;
  font-size: .82rem; color: var(--text-faint); }

/* ------------------------------------------------------------ cannon
   The rainbow bar sits in the page flow, between the content and the footer —
   it is the bottom of the playfield, not a floating toolbar. */
.cannon {
  display: flex; align-items: stretch;
  height: var(--cannon-h);
  border-top: 1px solid rgba(255,255,255,.12);
  background: var(--ink);
}
.cannon button {
  flex: 1 1 0; border: 0; margin: 0; padding: 0; cursor: pointer;
  position: relative; -webkit-tap-highlight-color: transparent;
  transition: filter .12s ease;
}
.cannon button::after {
  content: ""; position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(120% 100% at 50% 100%, rgba(255,255,255,.95), transparent 70%);
  transition: opacity .22s ease; pointer-events: none;
}
.cannon button.fired::after { opacity: .55; transition: opacity .04s ease; }
.cannon button:hover { filter: brightness(1.14); }
.cannon button:focus-visible { outline: 2px solid #fff; outline-offset: -4px; z-index: 1; }
.cannon button[hidden] { display: none !important; }

.cannon .cseg-red    { background: linear-gradient(180deg, #F23040, #7e1922); }
.cannon .cseg-blue   { background: linear-gradient(180deg, #2982F5, #15437f); }
.cannon .cseg-green  { background: linear-gradient(180deg, #33D15C, #1a6d30); }
.cannon .cseg-yellow { background: linear-gradient(180deg, #FCCF1C, #836b0e); }
.cannon .cseg-purple { background: linear-gradient(180deg, #AD4AED, #5a267b); }
.cannon .cseg-orange { background: linear-gradient(180deg, #FF851A, #85450d); }
.cannon .cseg-cyan   { background: linear-gradient(180deg, #29D9E0, #157174); }

/* the orbs on/off switch, a quiet word in the footer line */
.game-toggle {
  border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; font-size: .82rem; color: var(--text-faint);
  text-decoration: underline; text-decoration-color: rgba(255,255,255,.25);
  text-underline-offset: 3px;
}
.game-toggle:hover { color: #fff; }


/* ------------------------------------------------------------ helpers
   These exist because `_headers` ships a strict Content-Security-Policy with
   `style-src 'self'` — which blocks inline style attributes outright. Anything
   that used to be a style="..." lives here instead. */
.page-title    { font-size: clamp(2rem, 5vw, 3rem); }
.page-title-lg { font-size: clamp(2.2rem, 7vw, 4rem); }

.tc        { text-align: center; }
.center-x  { margin-inline: auto; }
.flush     { margin: 0; }
.mb-0      { margin-bottom: 0; }
.mb-s      { margin-bottom: .7rem; }
.mt-s      { margin-top: 1rem; }
.mt-m      { margin-top: 1.6rem; }
.mt-2      { margin-top: 2rem; }
.mt-l      { margin-top: 2.6rem; }
.mt-xl     { margin-top: 3rem; }
.mt-0      { margin-top: 0; }
.stack     { margin: 1.8rem 0 2.4rem; }
.narrow    { max-width: 30ch; }
.measure   { max-width: 74ch; }
.full      { max-width: none; }

.section-center {
  min-height: 52vh; display: grid; place-items: center; text-align: center;
}
.colophon.bare { border: 0; margin: 0; padding: 0; }
.mail-lg { font-size: 1.15rem; font-weight: 700; }
.cap-left { text-align: left; padding-bottom: .6rem; }

/* press: the icon and key-art cards */
.panel img.icon   { border-radius: 20px; }
.panel img.keyart { width: 100%; height: auto; border-radius: 10px; }
.panel.tc p       { margin: .8rem 0 .4rem; }
.panel.tc p.flush { margin: 0; }
.panel.tc p.note  { margin: 0 0 .4rem; }

/* the wordmark's five stops, one class each */
.wordmark .r0 { color: #ED2938; }
.wordmark .r1 { color: #FCCC1A; }
.wordmark .r2 { color: #33CC59; }
.wordmark .r3 { color: #2982F5; }
.wordmark .r4 { color: #A847E6; }

/* palette chips */
.c-0A0A1A { background: #0A0A1A; }
.c-21174D { background: #21174D; }
.c-2982F5 { background: #2982F5; }
.c-29D9E0 { background: #29D9E0; }
.c-33CC59 { background: #33CC59; }
.c-33D15C { background: #33D15C; }
.c-9E3873 { background: #9E3873; }
.c-A847E6 { background: #A847E6; }
.c-AD4AED { background: #AD4AED; }
.c-ED2938 { background: #ED2938; }
.c-F23040 { background: #F23040; }
.c-F26B47 { background: #F26B47; }
.c-FCCC1A { background: #FCCC1A; }
.c-FCCF1C { background: #FCCF1C; }
.c-FF47AD { background: #FF47AD; }
.c-FF851A { background: #FF851A; }
.c-FFD133 { background: #FFD133; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: #fff; color: #000; padding: .7rem 1rem; border-radius: 0 0 10px 0;
  font-weight: 700;
}
.skip-link:focus { left: 0; }

.reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}