/*
  Launchena — Monochrome, on the web.

  The same rule the application follows: the interface has no colour of its own. Every hue on this page
  comes out of a screenshot of a game. The only non-achromatic pixels in the chrome are two 6px dots, one
  green for something running and one red for something live.

  Nothing here is fetched from anywhere else. The two faces are served from this origin, the images are
  ours, and there is no analytics, no tag manager and no embedded anything. A page that argues for
  local-first and then phones a font CDN on every load is arguing badly.

  Motion: where the browser can drive an animation from the scroll position itself, it does — scroll-driven
  animations run off the main thread and track the scroll exactly, which is what separates a page that
  feels attached to your finger from one that plays a clip at you. The script is the fallback.
*/

@font-face {
  font-family: 'Archivo';
  src: url('/fonts/archivo-latin.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('/fonts/geistmono-latin.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --bg: #000;
  --t0: #fff;
  --t1: rgba(255, 255, 255, 0.62);
  --t2: rgba(255, 255, 255, 0.38);
  --t3: rgba(255, 255, 255, 0.19);
  --line: rgba(255, 255, 255, 0.09);
  --line-2: rgba(255, 255, 255, 0.17);
  --glass: rgba(255, 255, 255, 0.04);
  --run: #30d158;
  --live: #ff3b30;

  --sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'Cascadia Mono', 'SF Mono', Consolas, monospace;

  --gutter: clamp(20px, 5vw, 72px);
  --wide: 1280px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--t0);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  font-weight: 350;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Grain, drifting. It is what stops true black reading as an absence rather than a material, and the
   drift is what stops it reading as a texture somebody pasted on. Transform only, six steps a second. */
body::after {
  content: '';
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.28;
  mix-blend-mode: soft-light;
  will-change: transform;
  animation: grain 900ms steps(6) infinite;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes grain {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-1.5%, 1%); }
  40%  { transform: translate(1%, -1.5%); }
  60%  { transform: translate(-1%, -1%); }
  80%  { transform: translate(1.5%, 0.5%); }
  100% { transform: translate(0, 0); }
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

::selection { background: #fff; color: #000; }

:focus-visible {
  outline: 1px solid #fff;
  outline-offset: 3px;
  border-radius: 2px;
}

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

/* How far down you are. One pixel, and it is the only thing on the page that is purely decorative. */
.progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 1px;
  background: #fff;
  opacity: 0.45;
  transform: scaleX(0);
  transform-origin: left;
  z-index: 101;
  pointer-events: none;
}

/* A ring that lags behind the pointer and opens over anything you can press. Difference blend, so it is
   white on the page and black across a white button without ever being given a colour. The system
   cursor is never hidden: a custom cursor that replaces the real one is a liability the first time the
   page stalls. */
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 26px;
  height: 26px;
  border: 1px solid #fff;
  border-radius: 50%;
  z-index: 9998;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: difference;
  will-change: transform;
  transition: opacity 400ms var(--ease);
}
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

/* ── type ─────────────────────────────────────────────────────────────────────────────────────── */

.display {
  font-size: clamp(2.9rem, 8.6vw, 8.2rem);
  font-weight: 200;
  line-height: 0.9;
  letter-spacing: -0.048em;
  margin: 0;
}

h2 {
  font-size: clamp(1.9rem, 4.6vw, 3.9rem);
  font-weight: 250;
  line-height: 1.02;
  letter-spacing: -0.04em;
  margin: 0;
}

h3 {
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.45;
  margin: 0;
}

.lead {
  font-size: clamp(1.02rem, 1.25vw, 1.28rem);
  line-height: 1.62;
  color: var(--t1);
  font-weight: 350;
  max-width: 54ch;
  margin: 0;
}

p { margin: 0; color: var(--t1); max-width: 62ch; }

.lbl {
  font-family: var(--mono);
  font-size: 0.6875rem;
  line-height: 1;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--t2);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* The headline arrives a word at a time, from behind its own line. */
.display.split .w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}
.display.split .w > span {
  display: inline-block;
  transform: translateY(112%);
  opacity: 0;
  animation: wordRise 1000ms var(--ease) both;
}
@keyframes wordRise { to { transform: none; opacity: 1; } }

/* ── navigation ───────────────────────────────────────────────────────────────────────────────── */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: 68px;
  display: flex;
  align-items: center;
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  background: rgba(0, 0, 0, 0);
  border-bottom: 1px solid transparent;
  transition: background 320ms var(--ease), border-color 320ms var(--ease);
}
/* Dark enough to read against on its own. The blur on top of it is the finish, not the legibility: it is
   turned off by reduced-transparency settings and by more renderers than @supports admits to, and a header
   you can read the page through is not a header. Fully transparent until the page moves, so the hero is
   never covered by a bar. */
.nav.stuck { background: rgba(0, 0, 0, 0.93); border-bottom-color: var(--line); }

.nav .wrap { display: flex; align-items: center; gap: 14px; width: 100%; }

.mark { display: flex; align-items: center; gap: 11px; }
.mark svg { width: 19px; height: 19px; overflow: visible; }
.wordmark { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.26em; font-weight: 500; }

.nav nav { margin-left: auto; display: flex; align-items: center; gap: 30px; }

/* The underline grows from the left rather than fading in: a rule being drawn, not a colour changing. */
.nav nav a {
  position: relative;
  font-size: 0.875rem;
  color: var(--t2);
  padding-bottom: 3px;
  transition: color 200ms var(--ease);
}
.nav nav a::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 340ms var(--ease);
}
.nav nav a:hover { color: var(--t0); }
.nav nav a:hover::after { transform: scaleX(1); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 42px;
  padding: 0 22px;
  border-radius: 21px;
  font-size: 0.875rem;
  font-weight: 450;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  transition: transform 420ms var(--ease), background 260ms var(--ease), border-color 260ms var(--ease);
}
.btn-solid { background: #fff; color: #000; }
.btn-ghost {
  background: var(--glass);
  border: 1px solid var(--line-2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.btn-ghost:hover { border-color: rgba(255, 255, 255, 0.36); background: rgba(255, 255, 255, 0.07); }

/* Light crossing the face of a button, once, on hover. */
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, 0.5) 50%, transparent 68%);
  transform: translateX(-120%);
  transition: transform 720ms var(--ease);
  pointer-events: none;
}
.btn-solid::before { background: linear-gradient(105deg, transparent 32%, rgba(0, 0, 0, 0.16) 50%, transparent 68%); }
.btn:hover::before { transform: translateX(120%); }
.btn-lg { height: 54px; padding: 0 30px; border-radius: 27px; font-size: 0.9375rem; }

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

/* ── hero ─────────────────────────────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 140px 0 0;
  overflow: hidden;
}

/* Light, not colour: an off-centre wash that gives the black somewhere to come from. */
.hero::before {
  content: '';
  position: absolute;
  top: -22%;
  right: -12%;
  width: min(980px, 105vw);
  aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
  pointer-events: none;
}

/* The living field. Three rings deformed by a handful of sine harmonics, which is why it never repeats
   to the eye and costs almost nothing. The static arcs behind it are what you get without script. */
.field {
  position: absolute;
  top: 50%;
  right: clamp(-280px, -8vw, -60px);
  translate: 0 -54%;
  width: min(820px, 92vw);
  aspect-ratio: 1;
  pointer-events: none;
  z-index: 0;
}
.hero-arc {
  position: absolute;
  top: 50%;
  right: clamp(-260px, -8vw, -60px);
  translate: 0 -54%;
  width: min(760px, 88vw);
  aspect-ratio: 1;
  pointer-events: none;
  opacity: 0.11;
}
.hero-arc circle { fill: none; stroke: #fff; stroke-width: 0.7; }
.js .hero-arc { display: none; }

.hero-inner { position: relative; z-index: 2; }

.eyebrow { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 30px; }
.eyebrow i { display: block; width: 18px; height: 1px; background: var(--t3); font-style: normal; flex: none; }

.hero .display { margin-bottom: 34px; }
.hero .lead { margin-bottom: 44px; }

.hero-cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.hero-note { font-size: 0.8125rem; color: var(--t2); }

/* The status rail from the application, on the page. Every value monospaced and width-reserved, so a
   readout that ticks cannot shift anything beside it. */
.rail {
  position: relative;
  z-index: 2;
  margin-top: auto;
  border-top: 1px solid var(--line);
  padding: 18px 0 26px;
}
.rail .wrap { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.rail .cell { display: flex; align-items: center; gap: 10px; }
.rail .dot { display: block; width: 6px; height: 6px; border-radius: 50%; flex: none; align-self: center; }
.rail .dot.run { background: var(--run); box-shadow: 0 0 9px rgba(48, 209, 88, 0.7); animation: pulse 2.6s var(--ease) infinite; }
.rail .dot.live { background: var(--live); animation: pulse 1.7s var(--ease) infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.rail .v { color: var(--t0); display: inline-block; min-width: 3.6ch; text-align: right; }
.rail .sep { width: 1px; height: 13px; background: var(--line); }
.rail .spacer { flex: 1 1 40px; }
@media (max-width: 760px) { .rail .sep, .rail .spacer { display: none; } }

/* ── sections ─────────────────────────────────────────────────────────────────────────────────── */

section { position: relative; padding: clamp(84px, 11vw, 168px) 0; }
section + section { border-top: 1px solid var(--line); }

.shead { display: flex; align-items: baseline; gap: 22px; margin-bottom: clamp(34px, 4vw, 58px); }
.shead .num { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.14em; color: var(--t3); flex: none; }
.shead .t { flex: 1; }
.shead h2 { margin-bottom: 20px; }

.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 72px); }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); }
@media (max-width: 900px) { .grid2, .grid3 { grid-template-columns: 1fr; } }

/* A screenshot is the product. It gets a hairline, a specular top edge, and light that follows the
   pointer — depth out of light, which is the only thing this system has instead of colour. */
.shot {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  background: #060606;
  box-shadow: inset 0 0 0 1px var(--line-2), 0 40px 90px -30px rgba(0, 0, 0, 1);
  isolation: isolate;
}
.shot::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0) 62%);
  opacity: 0;
  transition: opacity 420ms var(--ease);
}
.shot:hover::before { opacity: 1; }
.shot::after {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  z-index: 3;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.42), transparent);
}
.shot img { width: 100%; will-change: transform; }

/* A 1560px window squeezed into a phone draws the application's own text at about five pixels: it stops
   being a screenshot and becomes a picture of a dense screen. On a narrow display the frame scrolls
   sideways instead and the picture stays at a size where the words in it are words. The page itself never
   scrolls sideways — only this frame does. The parallax drift is dropped here so it cannot fight a finger. */
@media (max-width: 760px) {
  .shot {
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
  }
  .shot img {
    width: auto;
    min-width: 900px;
    animation: none;
    will-change: auto;
  }
}

.cap { display: flex; gap: 12px; margin-top: 16px; }
.cap .lbl { flex: none; }
.cap span:last-child { font-size: 0.8125rem; color: var(--t2); }

/* ── facts ────────────────────────────────────────────────────────────────────────────────────── */

.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.facts > div { background: var(--bg); padding: 26px clamp(18px, 2vw, 30px) 28px; transition: background 320ms var(--ease); }
.facts > div:hover { background: #070707; }
.facts .n { font-family: var(--mono); font-size: clamp(1.6rem, 3vw, 2.5rem); font-weight: 200; letter-spacing: -0.045em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.facts .n small { font-size: 0.75rem; color: var(--t2); font-weight: 400; letter-spacing: 0; margin-left: 3px; }
.facts .lbl { margin-top: 12px; display: block; }
@media (max-width: 900px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .facts { grid-template-columns: 1fr; } }

/* ── the core map ─────────────────────────────────────────────────────────────────────────────── */

.cores { display: flex; gap: 5px; margin: 34px 0 0; }
.cores .c { flex: 1; }
.cores .bar {
  height: clamp(44px, 6vw, 74px);
  background: #fff;
  transform: scaleY(0.06);
  transform-origin: bottom;
  opacity: 0.16;
  will-change: transform, opacity;
  transition: transform 700ms var(--ease), opacity 420ms linear;
}
.cores .c[data-game] .bar { opacity: var(--load, 0.85); }
.cores .lbl { display: block; text-align: center; margin-top: 9px; font-size: 0.625rem; letter-spacing: 0.1em; }
.core-key { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 18px; }
.core-key span { display: inline-flex; align-items: center; gap: 9px; }
.core-key i { width: 10px; height: 10px; display: block; flex: none; }
.corehead { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 4px; }
@media (max-width: 680px) { .cores .lbl { display: none; } }

/* ── the refusal ──────────────────────────────────────────────────────────────────────────────── */

.refuse {
  position: relative;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  padding: clamp(30px, 4.5vw, 62px);
  background: var(--glass);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
.refuse::before {
  content: '';
  position: absolute;
  inset: -40% -10% auto;
  height: 160%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
  pointer-events: none;
}
.refuse .big { position: relative; font-size: clamp(1.5rem, 3.4vw, 3rem); font-weight: 250; line-height: 1.14; letter-spacing: -0.038em; max-width: 24ch; margin: 24px 0 30px; }
.refuse-cols { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(22px, 3vw, 52px); }
@media (max-width: 900px) { .refuse-cols { grid-template-columns: 1fr; } }

/* ── tables ───────────────────────────────────────────────────────────────────────────────────── */

table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
th {
  text-align: left;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--t2);
  font-weight: 400;
  padding: 0 0 15px;
  border-bottom: 1px solid var(--line-2);
}
td { padding: 15px 0; border-bottom: 1px solid var(--line); color: var(--t1); vertical-align: top; transition: color 240ms var(--ease); }
tr:hover td { color: var(--t0); }
td:first-child { color: var(--t0); padding-right: 24px; }
td.no { font-family: var(--mono); color: var(--t0); text-align: right; width: 4.5rem; white-space: nowrap; }
td.yes { font-family: var(--mono); color: var(--t2); text-align: right; width: 4.5rem; white-space: nowrap; }
th:last-child { text-align: right; }

/* The right-hand column is a fixed 4.5rem that never wraps, which is right for "no" and wrong for "only
   while a party is running". On a wide screen it never comes up; on a phone those cells set a minimum the
   table cannot meet, and the whole page — the fixed header with it — is dragged sideways by the
   difference. On a narrow screen they are ordinary cells that wrap like any other prose. */
@media (max-width: 760px) {
  table { font-size: 0.875rem; }
  td:first-child { padding-right: 14px; }
  td.no, td.yes { width: auto; white-space: normal; }
}

/* ── list of gaps ─────────────────────────────────────────────────────────────────────────────── */

.gaps { list-style: none; padding: 0; margin: 0; }
.gaps li { padding: 20px 0; border-bottom: 1px solid var(--line); display: flex; gap: clamp(16px, 2vw, 32px); transition: opacity 300ms var(--ease); }
.gaps li:first-child { border-top: 1px solid var(--line); }
.gaps .lbl { flex: none; width: 5.5rem; padding-top: 4px; }
.gaps p { color: var(--t1); }
.gaps strong { color: var(--t0); font-weight: 450; }

/* ── download ─────────────────────────────────────────────────────────────────────────────────── */

.dl { text-align: center; }
.dl .display { margin-bottom: 30px; }
.dl .lead { margin: 0 auto 42px; text-align: center; }
.dl .hero-cta { justify-content: center; }
/* A checksum is printed to be compared against a file, character by character. It was set in the faintest
   grey on the page, which is fine for a separator and useless for something anyone has to actually read. */
.hash {
  margin-top: 40px;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--t1);
  letter-spacing: 0.03em;
  word-break: break-all;
  max-width: 60ch;
  margin-inline: auto;
  line-height: 1.9;
}

/* ── footer ───────────────────────────────────────────────────────────────────────────────────── */

footer { border-top: 1px solid var(--line); padding: 46px 0; }
footer .wrap { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
footer .spacer { flex: 1; }
footer a { font-size: 0.8125rem; color: var(--t2); transition: color 200ms var(--ease); }
footer a:hover { color: var(--t0); }

/* ── reveal: the script's fallback ────────────────────────────────────────────────────────────── */

.js .rv { opacity: 0; transform: translateY(15px); }
.js .rv.in { opacity: 1; transform: none; transition: opacity 620ms var(--ease), transform 620ms var(--ease); }

/* The mark draws itself once, on load. One orchestrated entrance, not an animation on every element. */
.draw { stroke-dasharray: var(--len, 300); stroke-dashoffset: var(--len, 300); animation: draw 1500ms var(--ease) 180ms forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ── scroll-driven: the real thing, where the browser will do it ──────────────────────────────── */

@supports (animation-timeline: view()) {
  .progress {
    animation: grow linear both;
    animation-timeline: scroll(root block);
  }
  @keyframes grow { to { transform: scaleX(1); } }

  /* Tied to scroll position rather than fired by it, so it tracks the page exactly and reverses when
     you go back up. The transition on .rv.in is dropped here so the two cannot fight. */
  .js .rv {
    opacity: 1;
    transform: none;
    transition: none;
    animation: rise linear both;
    animation-timeline: view();
    animation-range: entry 4% cover 24%;
  }
  @keyframes rise {
    from { opacity: 0; transform: translateY(26px); }
    to { opacity: 1; transform: none; }
  }

  /* A stagger you can scrub: each column simply starts a little later up the page. */
  .grid3 > .rv:nth-child(2), .facts > div:nth-child(2) { animation-range: entry 7% cover 27%; }
  .grid3 > .rv:nth-child(3), .facts > div:nth-child(3) { animation-range: entry 10% cover 30%; }
  .facts > div:nth-child(4) { animation-range: entry 13% cover 33%; }

  /* Parallax inside the frame: the picture drifts against its own edges as the section passes. */
  .shot img {
    animation: drift linear both;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
  }
  @keyframes drift {
    from { transform: scale(1.07) translateY(-2.4%); }
    to { transform: scale(1.07) translateY(2.4%); }
  }

  /* The rule between two sections is drawn rather than simply present. */
  section + section::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: var(--t3);
    transform-origin: left;
    animation: sweep linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 85%;
  }
  @keyframes sweep { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    animation-timeline: auto !important;
  }
  .js .rv { opacity: 1; transform: none; }
  .draw { stroke-dashoffset: 0; }
  .cores .bar { transform: scaleY(1); }
  .display.split .w > span { transform: none; opacity: 1; }
  body::after { animation: none; }
  .cursor { display: none; }
  .progress { display: none; }
}