@font-face {
  font-family: "Geist";
  src: url("fonts/geist.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("fonts/geist-mono.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --bg: #000;
  --bg-raise: #0b0b0d;
  --fg: #f5f5f7;
  --fg-2: #a1a1a6;
  --fg-3: #86868b;
  --line: rgb(255 255 255 / 0.1);
  --line-strong: rgb(255 255 255 / 0.18);
  --iri-violet: #8b7bff;
  --iri-blue: #4fb3ff;
  --iri-pink: #ff7ac6;
  --btn: #f5f5f7;
  --btn-hi: #ffffff;
  --btn-ink: #000;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --wrap: min(1120px, 100% - 2 * var(--gutter));
  --gutter: clamp(20px, 5vw, 48px);
  --sans: "Geist", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

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

html {
  background: var(--bg);
  scroll-behavior: smooth;
  scrollbar-color: #3a3a3c var(--bg);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.47;
  letter-spacing: -0.012em;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01";
}

::selection { background: var(--iri-violet); color: #fff; }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #2c2c2e; border-radius: 10px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #48484a; }

a { color: inherit; text-decoration: none; }
:focus-visible {
  outline: 2px solid var(--iri-blue);
  outline-offset: 3px;
  border-radius: 6px;
}

svg { flex: none; }

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

.skip {
  position: fixed; left: 16px; top: -60px; z-index: 100;
  padding: 10px 16px; border-radius: 999px;
  background: var(--fg); color: #000; font-weight: 600;
  transition: top 0.2s var(--ease-out);
}
.skip:focus { top: 12px; }

.wrap { width: var(--wrap); margin-inline: auto; }

/* Global bar */

.bar {
  position: sticky; top: 0; z-index: 50;
  background: rgb(0 0 0 / 0.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line);
}
.bar-inner {
  width: var(--wrap); margin-inline: auto;
  height: 52px;
  display: flex; align-items: center; gap: 32px;
}
.wordmark {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 650; font-size: 17px; letter-spacing: -0.02em;
}
.mark { width: 24px; height: 24px; overflow: visible; }
.bar-links {
  display: flex; gap: 28px; margin: 0 0 0 auto; padding: 0; list-style: none;
  font-size: 13px; color: var(--fg-2);
}
.bar-links a { transition: color 0.2s; }
.bar-links a:hover { color: var(--fg); }

/* Buttons */

.pill {
  display: inline-flex; align-items: center; gap: 8px;
  height: 46px; padding: 0 24px 0 20px;
  border-radius: 999px;
  background: var(--btn); color: var(--btn-ink);
  font-weight: 600; font-size: 17px; letter-spacing: -0.015em;
  box-shadow: 0 10px 24px -12px rgb(0 0 0 / 0.9);
  transition: background 0.25s var(--ease-out), transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
.pill svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.pill:hover { background: var(--btn-hi); }
.pill:active { transform: scale(0.97); }
.pill-sm { height: 30px; padding: 0 14px; font-size: 13px; box-shadow: none; }
.pill-lg { height: 56px; padding: 0 30px 0 26px; font-size: 19px; }

.textlink {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--fg); font-size: 17px; font-weight: 500;
}
.textlink svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.25s var(--ease-out); }
.textlink:hover { text-decoration: underline; text-underline-offset: 4px; }
.textlink:hover svg { transform: translateX(3px); }

/* Hero */

.hero {
  position: relative;
  min-height: calc(100svh - 52px);
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
}
.hero-copy {
  position: relative; z-index: 2;
  width: var(--wrap); margin: 0 auto;
  padding-top: clamp(56px, 10vh, 112px);
  text-align: center;
}
.hero-title {
  margin: 0;
  font-size: clamp(44px, 7.4vw, 104px);
  line-height: 1.02;
  letter-spacing: -0.04em;
  font-weight: 700;
  text-wrap: balance;
}
.hero-title span { color: var(--fg-3); }
.hero-sub {
  max-width: 34em;
  margin: 24px auto 0;
  font-size: clamp(19px, 1.7vw, 23px);
  line-height: 1.38;
  color: var(--fg-2);
  letter-spacing: -0.016em;
  text-wrap: pretty;
}
.hero-actions {
  display: flex; gap: 28px; align-items: center; justify-content: center;
  margin-top: 34px; flex-wrap: wrap;
}
.hero-die {
  position: relative;
  min-height: 46vh;
  margin-top: -2vh;
}
.hero-die canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}
.hero-die::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, var(--bg) 0%, transparent 22%, transparent 70%, var(--bg) 100%);
}

/* Dissect: the die, block by block */

.dissect { position: relative; }
.dissect-stage { position: relative; }
.tour { display: none; }

.chapters {
  width: var(--wrap); margin: 0 auto;
  padding: 120px 0;
  display: grid; gap: 88px;
}
.chapter h3 {
  margin: 0;
  font-size: clamp(28px, 2.8vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 700;
  text-wrap: balance;
}
.chapter p {
  margin: 14px 0 0;
  max-width: 30em;
  font-size: 17px;
  line-height: 1.45;
  color: var(--fg-2);
  text-wrap: pretty;
}
.chapter p strong { color: var(--fg); font-weight: 600; }
.die-progress { display: none; }

/* With JS and motion allowed, the stage pins and the camera flies across the die. */
.js .dissect { height: 500vh; }
.js .dissect-stage {
  position: sticky; top: 52px;
  height: calc(100svh - 52px);
  overflow: hidden;
}
.js .tour {
  display: block;
  position: absolute;
  right: max(var(--gutter), (100% - 1180px) / 2);
  top: 50%; transform: translateY(-50%);
  width: min(56%, 780px);
}
.js .chapters {
  position: absolute; inset: 0;
  width: auto; padding: 0;
  display: block;
  pointer-events: none;
}

.js .chapter {
  position: absolute;
  left: max(var(--gutter), (100% - 1120px) / 2);
  top: 50%;
  width: min(26rem, 36%);
  opacity: 0;
  transform: translateY(calc(-50% + 28px));
  filter: blur(6px);
  transition: opacity 0.7s var(--ease-out), transform 0.9s var(--ease-out), filter 0.7s var(--ease-out);
}
.js .chapter.is-on {
  opacity: 1;
  transform: translateY(-50%);
  filter: blur(0);
}
.js .chapter-outro {
  left: 50%; width: min(40rem, 90%);
  top: auto; bottom: 9vh;
  text-align: center;
  transform: translate(-50%, 28px);
}
.js .chapter-outro.is-on { transform: translate(-50%, 0); }
.js .chapter-outro p { margin-inline: auto; }
.js .die-progress {
  display: flex; flex-direction: column; gap: 10px;
  position: absolute; right: max(var(--gutter), (100% - 1120px) / 2); top: 50%;
  transform: translateY(-50%);
}
.js .die-progress span {
  width: 6px; height: 6px; border-radius: 50%;
  background: #3a3a3c;
  transition: background 0.4s, transform 0.4s var(--ease-out);
}
.js .die-progress span.is-on { background: var(--fg); transform: scale(1.35); }

/* Games */

.games { padding: clamp(80px, 12vh, 140px) 0 clamp(72px, 10vh, 120px); }
.section-title {
  margin: 0;
  font-size: clamp(30px, 3.2vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 700;
  text-wrap: balance;
}
.section-lede {
  margin: 10px 0 0;
  max-width: 40em;
  font-size: 17px;
  color: var(--fg-2);
  line-height: 1.45;
  text-wrap: pretty;
}
.marquee-list {
  margin: 36px 0 0; padding: 0; list-style: none;
  border-top: 1px solid var(--line);
}
.marquee-list li {
  position: relative;
  padding: 14px 0 15px;
  border-bottom: 1px solid var(--line);
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--fg);
  transition: color 0.35s var(--ease-out), transform 0.5s var(--ease-out);
}
.marquee-list li::after {
  content: "Verified";
  position: absolute; right: 0; top: 50%;
  transform: translateY(-50%);
  font: 500 12px/1 var(--mono);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fg-3);
}
@media (hover: hover) {
  .marquee-list:hover li { color: #48484a; }
  .marquee-list li:hover { color: var(--fg); transform: translateX(12px); }
}
.also-title {
  margin: 36px 0 12px;
  font-size: 14px; color: var(--fg-3); font-weight: 500;
}
.also-list {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; gap: 6px 0;
  font-size: 17px;
  letter-spacing: -0.015em;
  color: var(--fg-2);
  max-width: 62rem;
}
.also-list li:not(:last-child)::after { content: "·"; margin: 0 0.55em; color: #48484a; }
.fineprint { margin: 40px 0 0; font-size: 13px; color: var(--fg-3); }

/* Install */

.install {
  padding: clamp(96px, 14vh, 160px) 0;
  border-top: 1px solid var(--line);
  background: radial-gradient(60% 50% at 78% 40%, rgb(139 123 255 / 0.08), transparent 70%), var(--bg);
}
.install-grid {
  display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.steps {
  margin: 40px 0 40px; padding: 0; list-style: none;
  counter-reset: step;
  display: grid; gap: 22px;
}
.steps li {
  counter-increment: step;
  position: relative; padding-left: 36px;
  font-size: 17px; line-height: 1.45; color: var(--fg-2);
  max-width: 30em;
}
.steps li::before {
  content: counter(step);
  position: absolute; left: 0; top: 0;
  font: 600 15px/1.9 var(--mono);
  color: var(--fg-3);
}
.steps strong { color: var(--fg); font-weight: 600; }

.assistant {
  margin: 0;
  border-radius: 9px;
  background: linear-gradient(180deg, #1c1c1e, #121214);
  border: 1px solid var(--line-strong);
  box-shadow: 0 40px 80px -30px rgb(0 0 0 / 0.9);
  overflow: hidden;
}
.assistant-bar {
  display: flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 16px;
  border-bottom: 1px solid var(--line);
  font-size: 13px; font-weight: 600; color: var(--fg-2);
}
.assistant-bar i { width: 12px; height: 12px; border-radius: 50%; background: #3a3a3c; }
.assistant-bar i:nth-child(1) { background: #ff5f57; }
.assistant-bar i:nth-child(2) { background: #febc2e; }
.assistant-bar i:nth-child(3) { background: #28c840; }
.assistant-bar span { margin-left: auto; margin-right: auto; transform: translateX(-28px); }
.assistant-rows { margin: 0; padding: 10px 0; list-style: none; }
.assistant-rows li {
  display: grid; grid-template-columns: 28px 7.5em 1fr; align-items: center;
  padding: 13px 20px;
  font-size: 15px;
}
.assistant-rows li + li { border-top: 1px solid rgb(255 255 255 / 0.05); }
.assistant-rows li::before {
  content: "";
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--fg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5.5 10.5 3 3 6-7' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat;
}
.row-name { font-weight: 600; }
.row-value { color: var(--fg-2); text-align: right; }
.assistant figcaption {
  padding: 14px 20px 18px;
  border-top: 1px solid var(--line);
  font-size: 13px; color: var(--fg-3);
}
/* The assistant prints its own state as it scrolls into view. */
.js .assistant-rows li { transition: opacity 0.5s var(--ease-out), transform 0.6s var(--ease-out); }
.js .assistant:not(.is-on) .assistant-rows li { opacity: 0.25; transform: translateX(-6px); }
.js .assistant:not(.is-on) .assistant-rows li::before { background-color: #3a3a3c; background-image: none; }
.js .assistant.is-on .assistant-rows li::before { transition: background-color 0.3s; }
.js .assistant.is-on .assistant-rows li:nth-child(1) { transition-delay: 0.1s; }
.js .assistant.is-on .assistant-rows li:nth-child(2) { transition-delay: 0.45s; }
.js .assistant.is-on .assistant-rows li:nth-child(3) { transition-delay: 0.8s; }
.js .assistant.is-on .assistant-rows li:nth-child(4) { transition-delay: 1.15s; }
.js .assistant.is-on .assistant-rows li:nth-child(5) { transition-delay: 1.5s; }

/* Specs */

.specs { padding: clamp(96px, 14vh, 160px) 0; border-top: 1px solid var(--line); }
.spec-table { margin: 48px 0 0; }
.spec-table div {
  display: grid; grid-template-columns: minmax(140px, 0.32fr) 1fr; gap: 24px;
  padding: 22px 0;
  border-top: 1px solid var(--line);
}
.spec-table div:last-child { border-bottom: 1px solid var(--line); }
.spec-table dt { font-weight: 600; font-size: 17px; }
.spec-table dd { margin: 0; font-size: 17px; color: var(--fg-2); max-width: 40em; }

/* Credits + final */

.credits { padding: 0 0 clamp(96px, 14vh, 160px); }
.credits .section-title { font-size: clamp(26px, 2.6vw, 34px); }

.final {
  padding: clamp(110px, 18vh, 200px) 0;
  border-top: 1px solid var(--line);
  background:
    radial-gradient(40% 55% at 35% 100%, rgb(139 123 255 / 0.13), transparent 70%),
    radial-gradient(40% 55% at 65% 100%, rgb(79 179 255 / 0.1), transparent 70%),
    var(--bg);
}
.final-inner { text-align: center; display: grid; justify-items: center; gap: 36px; }
.final-title {
  margin: 0;
  font-size: clamp(36px, 4.2vw, 60px);
  line-height: 1.05; letter-spacing: -0.035em; font-weight: 700;
  text-wrap: balance;
}
.final-note { margin: -12px 0 0; color: var(--fg-3); font-size: 15px; }

.foot { border-top: 1px solid var(--line); padding: 28px 0 40px; }
.foot-inner { display: flex; gap: 40px; justify-content: space-between; align-items: flex-start; }
.foot p { margin: 0; font-size: 12px; line-height: 1.6; color: var(--fg-3); max-width: 64em; }
.foot-mark { font-family: var(--mono); white-space: nowrap; }

/* Bento: what Bridgeplay does, at a glance. Sized to fit one desktop viewport. */

.bento-sec { padding: clamp(72px, 10vh, 112px) 0; }
.bento {
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: minmax(300px, auto) minmax(236px, auto);
  gap: 14px;
}
.tile {
  position: relative;
  display: flex; flex-direction: column; gap: 16px;
  padding: 22px 24px;
  border-radius: 12px;
  background: #0d0d0f;
  border: 1px solid rgb(255 255 255 / 0.06);
  overflow: hidden;
  min-width: 0;
}
.tile h3 { margin: 0; font-size: 21px; line-height: 1.15; letter-spacing: -0.022em; font-weight: 650; }
.tile-copy p { margin: 6px 0 0; color: var(--fg-2); font-size: 14px; line-height: 1.45; max-width: 28em; text-wrap: pretty; }
.tile-note { position: absolute; right: 18px; top: 22px; margin: 0; font-size: 11px; color: var(--fg-3); }
.t-steam { grid-column: span 2; }
.t-fg, .t-dlss, .t-dx, .t-pads, .t-retina, .t-install { grid-column: span 1; }
.t-retina { justify-content: space-between; }
.demo { margin-top: auto; }

/* Steam library */
.demo-steam {
  display: grid; gap: 4px;
  padding: 8px; border-radius: 8px;
  background: linear-gradient(180deg, #1b2838 0%, #131b26 100%);
  border: 1px solid rgb(255 255 255 / 0.06);
}
.lib-row {
  display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 10px;
  padding: 5px 6px; border-radius: 8px;
  transition: background 0.4s var(--ease-out);
}
.lib-row.is-live { background: rgb(255 255 255 / 0.06); }
.lib-art { width: 30px; height: 30px; border-radius: 3px; object-fit: cover; display: block; }
.lib-art.a1 { background: linear-gradient(135deg, #3b2a2a, #1a1212); }
.lib-art.a2 { background: linear-gradient(135deg, #2c2f4a, #12131f); }
.lib-art.a3 { background: linear-gradient(135deg, #3a3326, #16130d); }
.lib-art.a4 { background: linear-gradient(135deg, #283a36, #0f1816); }
.lib-name { font-size: 13px; font-weight: 600; color: #e6ecf2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-play {
  min-width: 70px; padding: 6px 12px; border-radius: 2px; text-align: center;
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: #fff; background: #59bf40;
  transition: background 0.3s;
}
.lib-row.is-live .lib-play { background: #1a9fff; }

/* Frame generation */
.demo-fg { display: grid; gap: 12px; }
.fg-fps { display: flex; align-items: baseline; gap: 6px; }
.fg-num { font-size: 56px; line-height: 0.9; font-weight: 700; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
.fg-unit { font-size: 15px; color: var(--fg-2); font-weight: 600; }
.fg-modes { display: inline-flex; justify-self: start; padding: 3px; gap: 2px; border-radius: 999px; background: #1c1c1e; }
.fg-modes span { padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--fg-2); transition: background 0.35s var(--ease-out), color 0.35s; }
.fg-modes span.is-on { background: #3a3a3c; color: var(--fg); }
.fg-strip { height: 34px; overflow: hidden; border-radius: 8px; background: #141416; position: relative; }
.fg-strip::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to right, #0d0d0f, transparent 14%, transparent 86%, #0d0d0f);
}
.fg-track { display: flex; gap: 4px; height: 100%; padding: 6px 0; width: max-content; animation: fg-run 6s linear infinite; }
.fg-track i { width: 6px; border-radius: 2px; flex: none; }
.fg-track i.r, .fg-real { background: #f5f5f7; }
.fg-track i.g, .fg-gen { background: linear-gradient(180deg, var(--iri-violet), var(--iri-blue) 55%, var(--iri-pink)); }
@keyframes fg-run { to { transform: translateX(-50%); } }
.fg-legend { display: flex; gap: 14px; font-size: 11px; color: var(--fg-2); }
.fg-legend span { display: inline-flex; align-items: center; gap: 6px; }
.fg-legend i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }

/* MetalFX upscale */
.demo-upscale { display: grid; gap: 8px; }
.up-frame {
  position: relative; aspect-ratio: 3024 / 1964; max-height: 120px; border-radius: 10px; overflow: hidden;
  background:
    linear-gradient(rgb(255 255 255 / 0.05) 1px, transparent 1px) 0 0 / 100% 12.5%,
    linear-gradient(90deg, rgb(255 255 255 / 0.05) 1px, transparent 1px) 0 0 / 8.333% 100%,
    #121214;
  border: 1px solid rgb(255 255 255 / 0.08);
}
.up-in {
  position: absolute; left: 50%; top: 50%; width: 50%; height: 50%;
  transform: translate(-50%, -50%);
  border-radius: 6px;
  background:
    radial-gradient(60% 80% at 30% 30%, rgb(139 123 255 / 0.55), transparent 70%),
    radial-gradient(60% 80% at 75% 70%, rgb(79 179 255 / 0.5), transparent 70%),
    radial-gradient(50% 60% at 60% 20%, rgb(255 122 198 / 0.45), transparent 70%),
    #1c1c22;
  animation: up-grow 5s var(--ease-out) infinite;
}
@keyframes up-grow {
  0%, 22% { width: 50%; height: 50%; filter: blur(1.5px) contrast(0.9); }
  48%, 86% { width: 100%; height: 100%; border-radius: 0; filter: none; }
  100% { width: 50%; height: 50%; filter: blur(1.5px) contrast(0.9); }
}
.up-labels { position: relative; height: 16px; font-size: 11px; font-family: var(--mono); color: var(--fg-2); }
.up-labels span { position: absolute; left: 0; top: 0; animation: up-a 5s infinite; white-space: nowrap; }
.up-labels .up-b { animation-name: up-b; color: var(--fg); }
@keyframes up-a { 0%, 26% { opacity: 1; } 30%, 94% { opacity: 0; } 98%, 100% { opacity: 1; } }
@keyframes up-b { 0%, 31% { opacity: 0; } 35%, 89% { opacity: 1; } 93%, 100% { opacity: 0; } }

/* Metal HUD readout */
.hud {
  display: grid; grid-template-columns: auto 1fr; gap: 4px 12px;
  padding: 12px 14px; border-radius: 10px;
  background: rgb(28 28 30 / 0.92); border: 1px solid rgb(255 255 255 / 0.08);
  font: 500 11.5px/1.4 var(--mono); color: var(--fg);
}
.hud-k { color: var(--fg-3); }

/* Controllers */
.demo-pads { display: grid; gap: 6px; }
.pad-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 12px; border-radius: 9px; background: #161618;
  font-size: 13px; font-weight: 600; color: var(--fg-2);
  transition: color 0.4s;
}
.pad-dot { width: 7px; height: 7px; border-radius: 50%; background: #3a3a3c; transition: background 0.4s; }
.tile.is-on .pad-row { color: var(--fg); }
.tile.is-on .pad-dot { background: #30d158; }
.tile.is-on .pad-row:nth-child(1), .tile.is-on .pad-row:nth-child(1) .pad-dot { transition-delay: 0.2s; }
.tile.is-on .pad-row:nth-child(2), .tile.is-on .pad-row:nth-child(2) .pad-dot { transition-delay: 0.7s; }
.tile.is-on .pad-row:nth-child(3), .tile.is-on .pad-row:nth-child(3) .pad-dot { transition-delay: 1.2s; }

/* Retina */
.big-stat { margin: 0; font-size: clamp(28px, 2.6vw, 38px); line-height: 1; font-weight: 700; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.big-stat span { color: var(--fg-3); font-weight: 500; margin: 0 0.04em; }

/* Install steps */
.demo-steps { display: flex; flex-wrap: wrap; gap: 6px; }
.demo-steps span {
  padding: 6px 11px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: #1c1c1e; color: var(--fg-3);
  transition: background 0.4s, color 0.4s;
}
.tile.is-on .demo-steps span { background: #2c2c2e; color: var(--fg); }
.tile.is-on .demo-steps span:last-child { background: var(--fg); color: #000; }
.tile.is-on .demo-steps span:nth-child(2) { transition-delay: 0.3s; }
.tile.is-on .demo-steps span:nth-child(3) { transition-delay: 0.6s; }
.tile.is-on .demo-steps span:nth-child(4) { transition-delay: 0.9s; }
.tile.is-on .demo-steps span:nth-child(5) { transition-delay: 1.2s; }

/* Bottom-row motion */
.hud-fps { color: #7dff8a; font-variant-numeric: tabular-nums; }
.hud-graph {
  display: flex; align-items: flex-end; gap: 2px; height: 26px; margin-top: 8px; padding: 0 2px;
}
.hud-graph i { flex: 1; border-radius: 1px; background: rgb(125 255 138 / 0.7); transition: height 0.25s linear; }
.pad-row { position: relative; overflow: hidden; }
.pad-row .pad-btn {
  margin-left: auto; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center;
  font: 700 10px/1 var(--sans); color: #000; background: #3a3a3c;
  transform: scale(0.8); opacity: 0;
  transition: transform 0.25s var(--ease-out), opacity 0.25s, background 0.25s;
}
.pad-row.is-press .pad-btn { opacity: 1; transform: scale(1); background: var(--fg); }
.pad-row.is-press { background: #1e1e21; }
.pad-row.is-press .pad-dot { box-shadow: 0 0 0 4px rgb(48 209 88 / 0.25); }
.retina-demo {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  height: 64px; padding: 0 16px; border-radius: 8px; background: #161618; overflow: hidden;
}
.rd-glyph { font-size: 34px; font-weight: 700; letter-spacing: -0.03em; filter: blur(1.6px); transition: filter 0.6s var(--ease-out); }
.rd-tag { font: 600 11px/1 var(--mono); color: var(--fg-3); text-transform: uppercase; letter-spacing: 0.06em; transition: color 0.4s; }
.t-retina.is-sharp .rd-glyph { filter: none; }
.t-retina.is-sharp .rd-tag { color: var(--fg); }
.t-retina .big-stat b { font-weight: 700; }
.t-install .demo-steps span { transition: background 0.35s, color 0.35s; transition-delay: 0s !important; }
.t-install.is-on .demo-steps span { background: #1c1c1e; color: var(--fg-3); }
.t-install .demo-steps span.done { background: #2c2c2e; color: var(--fg); }
.t-install .demo-steps span.done:last-child { background: var(--fg); color: #000; }
.t-install .demo-steps span.now { background: #3a3a3c; color: var(--fg); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.25); }

@media (max-width: 1020px) {
  .bento { grid-template-columns: repeat(2, 1fr); grid-template-rows: none; grid-auto-rows: minmax(236px, auto); }
  .t-steam { grid-column: span 2; }
}
@media (max-width: 640px) {
  .bento { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .bento > .tile { grid-column: auto; }
  .tile { min-height: 220px; }
}
@media (prefers-reduced-motion: reduce) {
  .fg-track, .up-in, .up-labels span { animation: none; }
  .up-labels .up-b { opacity: 0; }
}

/* Product tour: one Mac window, its screen changes per chapter and zooms to the detail. */

.mac {
  border-radius: 8px; overflow: hidden;
  background: #1c1c1e;
  border: 1px solid rgb(255 255 255 / 0.14);
  box-shadow: 0 50px 100px -40px rgb(0 0 0 / 0.95), 0 0 0 1px rgb(0 0 0 / 0.6);
}
.mac-bar {
  position: relative; display: flex; align-items: center; gap: 7px;
  height: 30px; padding: 0 12px;
  background: #242426; border-bottom: 1px solid rgb(0 0 0 / 0.5);
}
.mac-bar i { width: 11px; height: 11px; border-radius: 50%; }
.mac-bar i:nth-child(1) { background: #ff5f57; }
.mac-bar i:nth-child(2) { background: #febc2e; }
.mac-bar i:nth-child(3) { background: #28c840; }
.mac-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 12px; font-weight: 600; color: var(--fg-2); white-space: nowrap; }
.screens { position: relative; aspect-ratio: 16 / 9.6; overflow: hidden; background: #000; }
.screen {
  position: absolute; inset: 0;
  opacity: 0;
  transform: scale(1.035);
  filter: blur(8px);
  transition: opacity 0.7s var(--ease-out), transform 0.9s var(--ease-out), filter 0.7s var(--ease-out);
  font-size: 11px; color: #c7d5e0;
}
.screen.is-on { opacity: 1; transform: none; filter: none; }
.spot {
  position: absolute; z-index: 5; pointer-events: none;
  border-radius: 10px;
  box-shadow: 0 0 0 1.5px rgb(255 255 255 / 0.9), 0 0 0 9999px rgb(0 0 0 / 0.58);
  opacity: 0;
  transition: opacity 0.6s var(--ease-out), left 0.8s var(--ease-out), top 0.8s var(--ease-out), width 0.8s var(--ease-out), height 0.8s var(--ease-out);
}
.spot.is-on { opacity: 1; }
.tour-note { margin: 10px 2px 0; font-size: 11px; color: var(--fg-3); text-align: right; }

/* Steam library */
.s-steam { display: grid; grid-template-columns: 31% 1fr; background: #1b2838; }
.st-side { background: #171d25; padding: 10px 8px; overflow: hidden; }
.st-search { padding: 5px 8px; border-radius: 3px; background: #2a3f5a; color: #8ba2bd; font-size: 10px; margin-bottom: 10px; }
.st-group { margin: 8px 6px 4px; font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #6b8aaa; }
.st-side ul { margin: 0; padding: 0; list-style: none; }
.st-side li { display: flex; align-items: center; gap: 7px; padding: 4px 6px; border-radius: 2px; font-size: 10.5px; color: #b8c6d4; white-space: nowrap; overflow: hidden; }
.st-side li.is-sel { background: #3d6c8d; color: #fff; }
.st-side li i, .st-side li img { width: 14px; height: 14px; border-radius: 2px; flex: none; background: #2f3b48; object-fit: cover; }
.st-side li i.g1 { background: #5a2b2b; } .st-side li i.g2 { background: #2d3260; } .st-side li i.g3 { background: #4a4030; }
.st-side li i.g4 { background: #234a40; } .st-side li i.g5 { background: #5a3a1c; } .st-side li i.g6 { background: #3a2d55; } .st-side li i.g7 { background: #5e2a1f; }
.st-main { display: grid; grid-template-rows: 1fr auto; min-width: 0; }
.st-hero {
  position: relative; display: flex; align-items: flex-end; padding: 16px 18px;
  background: linear-gradient(180deg, transparent 45%, rgb(27 40 56 / 0.95)), url("assets/games/3764200-hero.jpg") center 30% / cover;
}
.st-play svg { width: 11px; height: 11px; }
.st-hero span { font-size: 22px; font-weight: 800; color: #fff; letter-spacing: -0.01em; text-shadow: 0 2px 12px rgb(0 0 0 / 0.6); }
.st-actions { display: flex; align-items: center; gap: 18px; padding: 12px 18px; background: #1f2b39; }
.st-play {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 24px; border-radius: 2px;
  background: #59bf40; color: #fff;
  font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
}
.st-meta { display: grid; gap: 1px; font-size: 9.5px; }
.st-meta b { color: #6b8aaa; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; font-size: 8.5px; }
.st-meta span { color: #dfe7ee; font-weight: 600; }

/* Game scenes (synthetic) */
.game-scene {
  position: absolute; inset: 0;
  background:
    radial-gradient(40% 30% at 72% 34%, rgb(255 214 170 / 0.55), transparent 70%),
    radial-gradient(90% 60% at 50% 105%, #0b0d14 40%, transparent 41%),
    radial-gradient(70% 45% at 15% 100%, #10131c 50%, transparent 51%),
    radial-gradient(60% 40% at 90% 100%, #0e1018 50%, transparent 51%),
    linear-gradient(180deg, #2a2f4a 0%, #6b5a78 45%, #d79a7a 70%, #2a2230 100%);
}
.game-scene.dim { filter: brightness(0.45) saturate(0.8); }
.game-scene.warm { filter: hue-rotate(-18deg) saturate(1.1); }
.mhud {
  position: absolute; right: 3%; top: 4%;
  width: 34%; padding: 8px 10px; border-radius: 6px;
  background: rgb(10 10 12 / 0.72);
  font: 500 9px/1.45 var(--mono); color: #e8e8ea;
}
.mhud-row { display: flex; justify-content: space-between; margin: 0; }
.mhud-row span:first-child { color: #9a9aa0; }
.mhud-fps { margin: 6px 0 4px; font-size: 9px; color: #9a9aa0; }
.mhud-fps b { font-size: 20px; color: #7dff8a; font-weight: 700; margin-right: 4px; }
.mhud-graph {
  height: 22px; border-radius: 3px;
  background:
    repeating-linear-gradient(90deg, rgb(125 255 138 / 0.75) 0 2px, transparent 2px 4px) bottom / 100% 62% no-repeat,
    rgb(255 255 255 / 0.05);
}

.s-game .game-scene { background: url("assets/games/3768760-hero.jpg") center 30% / cover; }
.s-menu .game-scene { background: url("assets/games/3764200-hero.jpg") center / cover; }
.s-pads .game-scene { background: url("assets/games/1778820-hero.jpg") center 30% / cover; filter: brightness(0.62); }

/* In-game graphics menu */
.gmenu {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 62%; padding: 14px 16px 12px; border-radius: 6px;
  background: rgb(8 8 10 / 0.86); border: 1px solid rgb(255 255 255 / 0.1);
  color: #e9e9ec;
}
.gmenu-title { margin: 0 0 8px; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; }
.gm-row { display: flex; justify-content: space-between; padding: 6px 8px; border-radius: 3px; font-size: 11px; }
.gm-row.is-hot { background: rgb(255 255 255 / 0.1); }
.gm-row.is-hot .gm-val { color: #fff; font-weight: 700; }
.gm-val { color: #b5b5bb; }
.gm-foot { margin: 8px 8px 0; font-size: 9px; color: #8a8a90; }

/* Steam properties, Compatibility */
.s-props { display: grid; grid-template-columns: 30% 1fr; background: #1d2128; }
.pp-side { background: #171a20; padding: 14px 8px; }
.pp-game { margin: 0 8px 12px; font-size: 11px; font-weight: 700; color: #fff; }
.pp-side ul { margin: 0; padding: 0; list-style: none; }
.pp-side li { padding: 6px 8px; font-size: 11px; color: #9aa4b1; border-radius: 3px; }
.pp-side li.is-sel { background: #2f3540; color: #fff; }
.pp-main { padding: 14px 18px; overflow: hidden; }
.pp-h { margin: 0 0 10px; font-size: 15px; font-weight: 700; color: #fff; }
.pp-h2 { margin: 12px 0 6px; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #8b95a3; }
.pp-check { display: flex; align-items: center; gap: 8px; margin: 5px 0; font-size: 11px; color: #d6dde5; }
.pp-check i { width: 13px; height: 13px; border-radius: 2px; background: #3a414c; flex: none; }
.pp-check i.on { background: #1a9fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5 10.5 3.2 3 6.8-7.5' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat; }
.pp-select {
  position: relative; margin: 5px 0; padding: 6px 26px 6px 9px; border-radius: 3px;
  background: #2b313b; font-size: 11px; color: #fff; max-width: 260px;
}
.pp-select::after { content: ""; position: absolute; right: 9px; top: 50%; width: 6px; height: 6px; border-right: 1.5px solid #aab; border-bottom: 1.5px solid #aab; transform: translateY(-70%) rotate(45deg); }
.pp-select.is-hot { box-shadow: 0 0 0 2px #1a9fff; }

/* Controller toasts */
.toast {
  position: absolute; right: 4%; bottom: 7%;
  display: flex; align-items: center; gap: 10px;
  width: 46%; padding: 9px 12px; border-radius: 10px;
  background: rgb(24 24 28 / 0.92); border: 1px solid rgb(255 255 255 / 0.1);
  font-size: 10.5px; color: #e9e9ec;
  box-shadow: 0 10px 30px -10px rgb(0 0 0 / 0.8);
}
.toast.t2 { bottom: calc(7% + 54px); }
.toast b { display: block; font-size: 11px; color: #fff; }
.toast div span { color: #9a9aa0; }
.toast-icon { width: 28px; height: 28px; flex: none; color: #30d158; }
.toast-icon svg { width: 100%; height: 100%; }

@media (max-width: 860px) {
  .js .tour { top: 16px; left: var(--gutter); right: var(--gutter); width: auto; transform: none; }
  .tour-note { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .js .tour { position: relative; top: 0; right: auto; transform: none; width: var(--wrap); margin: 40px auto 0; }
  .screen { transition: none; }
}

/* Narrow screens */

@media (max-width: 860px) {
  .bar-links { display: none; }
  .bar-inner .pill-sm { margin-left: auto; }
  .install-grid { grid-template-columns: 1fr; }
  .js .chapter {
    left: var(--gutter); right: var(--gutter); width: auto;
    top: auto; bottom: 7svh;
    transform: translateY(28px);
  }
  .js .chapter.is-on { transform: translateY(0); }
  .js .chapter h3 { font-size: clamp(26px, 7vw, 34px); }
  .js .chapter p { font-size: 17px; margin-top: 12px; }
  .js .chapters::before {
    content: ""; position: absolute; inset: 42% 0 0;
    background: linear-gradient(to bottom, transparent, rgb(0 0 0 / 0.86) 38%);
  }
  .js .die-progress { top: 18px; right: var(--gutter); transform: none; flex-direction: row; }
  .marquee-list li::after { display: none; }
  .foot-inner { flex-direction: column; gap: 14px; }
  .assistant-rows li { grid-template-columns: 28px 1fr; }
  .row-value { grid-column: 2; text-align: left; font-size: 14px; }
}

/* Reduced motion: no flight, the die is shown once, fully powered, and the chapters read in order. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .dissect { height: auto; }
  .js .dissect-stage { position: relative; top: 0; height: auto; overflow: visible; }
  .js .chapters { position: relative; width: var(--wrap); margin: 0 auto; padding: 80px 0 40px; display: grid; gap: 72px; pointer-events: auto; }
  .js .chapters::before { display: none; }
  .js .chapter, .js .chapter-outro { position: static; width: auto; opacity: 1; transform: none; filter: none; text-align: left; }
  .js .die-progress { display: none; }
  .js .assistant:not(.is-on) .assistant-rows li { opacity: 1; transform: none; }
  .pill, .textlink svg, .marquee-list li { transition: none; }
}

/* Tour v2: Apple-style chapter list, bigger window with backlight, screens that act. */

.js .dissect .chapters {
  position: absolute; inset: 0 auto 0 max(var(--gutter), (100% - 1180px) / 2);
  width: min(30%, 360px);
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
  padding: 0;
  pointer-events: none;
}
.js .dissect .chapter {
  position: relative; left: auto; top: auto; width: auto;
  padding: 14px 0 14px 20px;
  opacity: 1; transform: none; filter: none;
  transition: none;
}
.js .dissect .chapter::before {
  content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 2px; border-radius: 2px;
  background: #2c2c2e;
}
.js .dissect .chapter::after {
  content: ""; position: absolute; left: 0; top: 14px; width: 2px; border-radius: 2px;
  height: calc((100% - 28px) * var(--p, 0));
  background: linear-gradient(180deg, var(--iri-violet), var(--iri-blue), var(--iri-pink));
  opacity: 0;
}
.js .dissect .chapter.is-on::after { opacity: 1; }
.js .dissect .chapter h3 {
  font-size: 19px; line-height: 1.2; letter-spacing: -0.02em; font-weight: 650;
  color: #545458;
  transition: color 0.5s var(--ease-out), font-size 0.5s var(--ease-out);
}
.js .dissect .chapter.is-on h3 { color: var(--fg); font-size: clamp(24px, 2.2vw, 30px); }
.js .dissect .chapter p {
  margin: 0; max-height: 0; opacity: 0; overflow: hidden;
  font-size: 15px; line-height: 1.5;
  transition: max-height 0.6s var(--ease-out), opacity 0.5s var(--ease-out), margin 0.6s var(--ease-out);
}
.js .dissect .chapter.is-on p { max-height: 12em; opacity: 1; margin-top: 10px; }
.js .dissect .die-progress { display: none; }
.js .dissect .tour { width: min(60%, 860px); right: max(var(--gutter), (100% - 1180px) / 2); }

.tour-glow {
  position: absolute; inset: -14% -10%; z-index: -1;
  background: var(--glow, none) center / cover;
  filter: blur(70px) saturate(1.4);
  opacity: 0.38;
  transition: opacity 0.8s var(--ease-out);
}
.mac { position: relative; }

/* Steam: the cursor travels to Play and clicks it. */
.cursor {
  position: absolute; z-index: 6; width: 22px; height: 22px; left: 62%; top: 40%;
  opacity: 0; pointer-events: none;
  filter: drop-shadow(0 2px 4px rgb(0 0 0 / 0.6));
}
.screens:has(.s-steam.is-on) .cursor { animation: cursor-go 4.2s var(--ease-out) infinite; }
@keyframes cursor-go {
  0% { left: 70%; top: 34%; opacity: 0; transform: scale(1); }
  10% { opacity: 1; }
  42% { left: 41%; top: 89%; transform: scale(1); }
  48% { left: 41%; top: 89%; transform: scale(0.82); }
  54%, 88% { left: 41%; top: 89%; transform: scale(1); opacity: 1; }
  100% { left: 41%; top: 89%; opacity: 0; }
}
.st-play em { font-style: normal; }
.st-play .lbl-run { display: none; }
.s-steam.is-on .st-play { animation: play-press 4.2s infinite; }
.s-steam.is-on .st-play .lbl-play { animation: lbl-a 4.2s infinite; }
.s-steam.is-on .st-play .lbl-run { display: inline; animation: lbl-b 4.2s infinite; }
@keyframes play-press {
  0%, 47% { background: #59bf40; transform: none; }
  49% { transform: scale(0.96); }
  52%, 92% { background: #1a9fff; transform: none; }
  100% { background: #59bf40; }
}
@keyframes lbl-a { 0%, 49% { display: inline; } 50%, 92% { display: none; } 93%, 100% { display: inline; } }
@keyframes lbl-b { 0%, 49% { display: none; } 50%, 92% { display: inline; } 93%, 100% { display: none; } }

/* Properties: the frame generation menu opens on 2x. */
.pp-select { overflow: visible; }
.pp-menu {
  position: absolute; left: 0; top: calc(100% + 4px); z-index: 2;
  min-width: 100%; margin: 0; padding: 4px; list-style: none;
  border-radius: 4px; background: #3a414c; box-shadow: 0 8px 20px rgb(0 0 0 / 0.5);
  opacity: 0; transform: translateY(-4px);
}
.pp-menu li { padding: 4px 8px; border-radius: 3px; font-size: 10.5px; color: #d6dde5; }
.pp-menu li.is-sel { background: #1a9fff; color: #fff; }
.pp-menu { transition: opacity 0.4s var(--ease-out), transform 0.5s var(--ease-out); }
.s-props.is-on .pp-menu { opacity: 1; transform: none; transition-delay: 0.45s; }
@keyframes menu-open {
  0%, 20% { opacity: 0; transform: translateY(-4px); }
  30%, 75% { opacity: 1; transform: none; }
  85%, 100% { opacity: 0; transform: translateY(-4px); }
}

/* Controllers: toasts slide in one after another. */
.s-pads .toast { opacity: 0; transform: translateX(24px); transition: opacity 0.5s var(--ease-out), transform 0.6s var(--ease-out); }
.s-pads.is-on .toast { opacity: 1; transform: none; transition-delay: 0.5s; }
.s-pads.is-on .toast.t2 { transition-delay: 1.1s; }

@media (max-width: 860px) {
  .js .dissect .chapters { inset: auto var(--gutter) 6svh var(--gutter); width: auto; justify-content: flex-end; }
  .js .dissect .chapter:not(.is-on) { display: none; }
  .js .dissect .tour { width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .cursor, .st-play, .st-play em, .pp-menu { animation: none !important; }
  .js .dissect .chapters { position: relative; inset: auto; width: var(--wrap); margin: 0 auto; }
  .js .dissect .chapter p { max-height: none; opacity: 1; margin-top: 10px; }
}

/* GitHub: who built it, and its stars */
.gh {
  display: inline-flex; align-items: center; gap: 8px;
  height: 30px; padding: 0 4px 0 11px; border-radius: 999px;
  border: 1px solid var(--line-strong);
  font-size: 13px; font-weight: 600; color: var(--fg);
  transition: border-color 0.25s, background 0.25s;
}
.gh:hover { border-color: rgb(255 255 255 / 0.4); background: rgb(255 255 255 / 0.05); }
.gh > svg { width: 15px; height: 15px; }
.gh-stars {
  display: inline-flex; align-items: center; gap: 5px;
  height: 22px; padding: 0 9px; border-radius: 999px;
  background: #1c1c1e; color: var(--fg-2); font-variant-numeric: tabular-nums;
}
.gh-stars svg { width: 12px; height: 12px; color: #f5c451; }
.gh-stars b { font-weight: 600; }
.foot-mark a:hover { color: var(--fg); }
@media (max-width: 860px) { .gh-name { display: none; } .gh { padding-left: 9px; } }

/* Developer byline */
.bento-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.dev {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 5px 14px 5px 5px; border-radius: 999px;
  border: 1px solid var(--line); background: #0d0d0f;
  transition: border-color 0.25s, background 0.25s;
}
.dev:hover { border-color: var(--line-strong); background: #141416; }
.dev img { width: 36px; height: 36px; border-radius: 50%; display: block; }
.dev span { display: grid; line-height: 1.25; }
.dev b { font-size: 13px; font-weight: 600; }
.dev small { font-size: 12px; color: var(--fg-3); }

/* Games: real art, real launch settings */
.gcards { margin-top: 32px; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 210px; gap: 14px; }
.gcard {
  position: relative; display: flex; align-items: flex-end; overflow: hidden;
  border-radius: 11px; border: 0;
  background: #111 var(--art) center 25% / cover;
  isolation: isolate;
}
.gcard::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgb(0 0 0 / 0) 30%, rgb(0 0 0 / 0.86) 100%);
}
.gcard-lead { grid-column: span 2; grid-row: span 2; }
.gcard:nth-child(2) { grid-column: span 2; }
.gcard-body { padding: 18px 20px; }
.gcard h3 { margin: 0 0 10px; font-size: 20px; letter-spacing: -0.02em; font-weight: 650; }
.gcard-lead h3 { font-size: 30px; letter-spacing: -0.03em; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.chips li {
  padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: rgb(255 255 255 / 0.14); color: #fff;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.gcard { transition: transform 0.6s var(--ease-out); }
@media (hover: hover) { .gcard:hover { transform: translateY(-3px); } }
.gthumbs { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.gthumbs li {
  position: relative; display: flex; align-items: flex-end; aspect-ratio: 16 / 7; overflow: hidden;
  border-radius: 8px; padding: 10px 12px;
  background: #111 var(--art) center 25% / cover;
  font-size: 13px; font-weight: 600; color: #fff;
  isolation: isolate;
}
.gthumbs li::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 35%, rgb(0 0 0 / 0.85)); }
.games .also-title { margin-top: 36px; }
@media (max-width: 860px) {
  .gcards { grid-template-columns: 1fr 1fr; grid-auto-rows: 180px; }
  .gcard-lead, .gcard:nth-child(2) { grid-column: span 2; grid-row: auto; }
  .gthumbs { grid-template-columns: 1fr 1fr; }
}
.chips li.fps { background: #f5f5f7; color: #000; }

/* Highlight variants (preview toggle) */
.spot i { display: none; }
.tour[data-hl="c"] .spot { box-shadow: none; border-radius: 10px; }
.tour[data-hl="c"] .spot i {
  display: block; position: absolute; inset: -2px; border-radius: 8px; padding: 2px;
  background: conic-gradient(from var(--a, 0deg), var(--iri-violet), var(--iri-blue), var(--iri-pink), var(--iri-violet));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: hl-spin 2.4s linear infinite;
  filter: drop-shadow(0 0 10px rgb(79 179 255 / 0.55));
}
@property --a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes hl-spin { to { --a: 360deg; } }
.tour[data-hl="b"] .spot { box-shadow: 0 0 0 1.5px rgb(255 255 255 / 0.85); }
.callout {
  position: absolute; z-index: 8; pointer-events: none;
  opacity: 0; transform: translateY(10px) scale(0.96);
  transition: opacity 0.5s var(--ease-out), transform 0.7s var(--ease-out), left 0.7s var(--ease-out), top 0.7s var(--ease-out);
}
.tour[data-hl="b"] .callout.is-on { opacity: 1; transform: none; }
.callout-inner {
  padding: 14px; border-radius: 9px;
  background: rgb(22 22 24 / 0.92); border: 1px solid rgb(255 255 255 / 0.16);
  box-shadow: 0 30px 60px -20px rgb(0 0 0 / 0.9);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  overflow: hidden;
}
.callout-inner > * { margin: 0 !important; position: static !important; transform: none !important; }
.hl-toggle {
  position: fixed; right: 16px; bottom: 16px; z-index: 90;
  display: flex; align-items: center; gap: 4px; padding: 4px 4px 4px 12px;
  border-radius: 999px; background: rgb(28 28 30 / 0.9); border: 1px solid var(--line-strong);
  font-size: 12px; color: var(--fg-2);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.hl-toggle span { margin-right: 6px; }
.hl-toggle button {
  width: 30px; height: 26px; border: 0; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--fg-2); font: 600 12px/1 var(--sans);
}
.hl-toggle button[aria-pressed="true"] { background: var(--fg); color: #000; }

/* Install, end to end: a pinned desktop that plays download → Install.command → Setup Assistant → Play. */
.install { padding: 0; border-top: 1px solid var(--line); background: var(--bg); }
.ins-stage { padding: clamp(80px, 12vh, 140px) 0; }
.js .install { height: 380vh; }
.js .ins-stage { position: sticky; top: 52px; height: calc(100svh - 52px); padding: 0; display: grid; align-items: center; }
.ins-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.ins-steps { margin: 28px 0 32px; padding: 0; list-style: none; display: grid; gap: 4px; counter-reset: s; }
.ins-steps li {
  counter-increment: s; position: relative; padding: 10px 0 10px 40px;
  color: #545458; transition: color 0.5s var(--ease-out);
}
.ins-steps li::before {
  content: counter(s); position: absolute; left: 0; top: 9px;
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font: 600 13px/1 var(--mono); background: #1c1c1e; color: #636366;
  transition: background 0.5s, color 0.5s;
}
.ins-steps b { display: block; font-size: 18px; font-weight: 650; letter-spacing: -0.015em; }
.ins-steps span { display: block; margin-top: 2px; font-size: 15px; max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.5s var(--ease-out), opacity 0.4s; }
.ins-steps li.is-on { color: var(--fg); }
.ins-steps li.is-on span { max-height: 4em; opacity: 1; color: var(--fg-2); }
.ins-steps li.is-on::before, .ins-steps li.is-done::before { background: var(--fg); color: #000; }
.ins-steps li.is-done { color: #8e8e93; }

.desk {
  position: relative; aspect-ratio: 16 / 10.4; border-radius: 10px; overflow: hidden;
  border: 1px solid rgb(255 255 255 / 0.12);
  box-shadow: 0 60px 120px -50px rgb(0 0 0 / 0.95);
  font-size: 12px;
}
.desk-wall {
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 70% at 20% 10%, rgb(139 123 255 / 0.35), transparent 70%),
    radial-gradient(60% 70% at 85% 30%, rgb(79 179 255 / 0.28), transparent 70%),
    radial-gradient(70% 60% at 60% 100%, rgb(255 122 198 / 0.22), transparent 70%),
    #0b0b12;
}
.win {
  position: absolute; border-radius: 8px; overflow: hidden;
  background: #1e1e20; border: 1px solid rgb(255 255 255 / 0.12);
  box-shadow: 0 30px 60px -20px rgb(0 0 0 / 0.85);
  opacity: 0; transform: translateY(14px) scale(0.97);
  transition: opacity 0.6s var(--ease-out), transform 0.7s var(--ease-out), filter 0.6s;
}
.win-bar { position: relative; display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; background: #2a2a2c; }
.win-bar i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.win-bar i:nth-child(2) { background: #febc2e; } .win-bar i:nth-child(3) { background: #28c840; }
.win-bar span { position: absolute; left: 50%; transform: translateX(-50%); font-size: 11.5px; font-weight: 600; color: var(--fg-2); white-space: nowrap; }

.finder { left: 7%; top: 9%; width: 52%; }
.finder-body { display: flex; gap: 22px; padding: 22px 20px 26px; }
.file { display: grid; justify-items: center; gap: 7px; width: 82px; padding: 8px 4px; border-radius: 8px; transition: background 0.3s; }
.file em { font-style: normal; font-size: 11px; color: #e5e5ea; text-align: center; line-height: 1.25; padding: 1px 4px; border-radius: 4px; }
.ficon { width: 48px; height: 48px; border-radius: 10px; display: grid; place-items: center; }
.ficon-cmd { background: #111; border: 1px solid #3a3a3c; font: 700 15px/1 var(--mono); color: #e5e5ea; }
.ficon-app { background: #000; border: 1px solid #2c2c2e; } .ficon-app svg { width: 30px; height: 30px; }
.ficon-doc { width: 38px; background: #f2f2f7; border-radius: 4px; }
.desk.cmd-sel .f-cmd { background: rgb(10 132 255 / 0.25); } .desk.cmd-sel .f-cmd em { background: #0a84ff; color: #fff; }

.assist { left: 20%; top: 8%; width: 62%; }
.assist-rows { margin: 0; padding: 6px 0; list-style: none; }
.assist-rows li { display: grid; grid-template-columns: 24px 6.5em 1fr; align-items: center; gap: 4px; padding: 9px 16px; font-size: 12px; }
.assist-rows li + li { border-top: 1px solid rgb(255 255 255 / 0.05); }
.assist-rows b { font-weight: 600; color: #8e8e93; transition: color 0.3s; }
.assist-rows em { font-style: normal; color: #636366; text-align: right; display: flex; justify-content: flex-end; align-items: center; }
.tick { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid #48484a; transition: background 0.3s, border-color 0.3s; }
.tick.on, .assist-rows li.ok .tick {
  border-color: transparent;
  background: #f5f5f7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5.5 10.5 3 3 6-7' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
}
.assist-rows li.ok b { color: var(--fg); } .assist-rows li.ok em { color: var(--fg-2); }
.rbar { width: 120px; height: 5px; border-radius: 3px; background: #3a3a3c; overflow: hidden; }
.rbar span { display: block; height: 100%; width: calc(var(--rb, 0) * 100%); background: #0a84ff; }
.done-txt { display: none; }
.assist-rows li.ok .rbar, .assist-rows li.ok .wait-txt { display: none; }
.assist-rows li.ok .done-txt { display: inline; }

.steamwin { left: 10%; top: 7%; width: 80%; background: #1b2838; }
.sw-hero { height: 150px; display: flex; align-items: flex-end; padding: 14px 18px; background: linear-gradient(180deg, transparent 40%, #1b2838), url("assets/games/3764200-hero.jpg") center 30% / cover; }
.sw-hero span { font-size: 22px; font-weight: 800; color: #fff; }
.sw-actions { display: flex; align-items: center; gap: 18px; padding: 12px 18px 16px; }
.sw-play { display: inline-flex; align-items: center; gap: 6px; padding: 9px 24px; border-radius: 2px; background: #59bf40; color: #fff; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; transition: background 0.3s; }
.sw-play svg { width: 11px; height: 11px; }
.desk.playing .sw-play { background: #1a9fff; }
.sw-actions div { display: grid; font-size: 10px; } .sw-actions b { color: #6b8aaa; text-transform: uppercase; font-size: 9px; letter-spacing: 0.05em; } .sw-actions div span { color: #fff; font-weight: 600; }

.toast-ready {
  position: absolute; right: 3%; top: 4%; display: flex; gap: 10px; align-items: center;
  padding: 10px 14px; border-radius: 8px; background: rgb(30 30 32 / 0.92); border: 1px solid rgb(255 255 255 / 0.12);
  opacity: 0; transform: translateX(20px); transition: opacity 0.5s var(--ease-out), transform 0.6s var(--ease-out);
}
.toast-ready b { display: block; font-size: 12px; } .toast-ready span:not(.tick) { font-size: 11px; color: var(--fg-2); }

.dock {
  position: absolute; left: 50%; bottom: 3%; transform: translateX(-50%);
  display: flex; gap: 10px; padding: 7px 10px; border-radius: 10px;
  background: rgb(40 40 46 / 0.55); border: 1px solid rgb(255 255 255 / 0.12);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.dk { position: relative; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; }
.dk-finder { background: linear-gradient(90deg, #4aa3ff 50%, #e9f2ff 50%); }
.dk-steam { background: #1b2838 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='15' cy='9' r='3.6' fill='none' stroke='white' stroke-width='1.8'/%3E%3Ccircle cx='8.5' cy='16' r='2.4' fill='none' stroke='white' stroke-width='1.8'/%3E%3Cpath d='M10.6 14.6 12.6 11' stroke='white' stroke-width='1.8'/%3E%3C/svg%3E") center/24px no-repeat; }
.dk-dl { background: #2c2c2e; }
.dk-dl svg { position: absolute; inset: 2px; width: 36px; height: 36px; transform: rotate(-90deg); }
.dk-dl .ring-bg { fill: none; stroke: rgb(255 255 255 / 0.15); stroke-width: 3; }
.dk-dl .ring { fill: none; stroke: #0a84ff; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 94.25; stroke-dashoffset: calc(94.25 * (1 - var(--dl, 0))); }
.dk-dl .dl-arrow { position: static; width: 18px; height: 18px; transform: none; }
.dl-label {
  position: absolute; left: 50%; bottom: calc(3% + 66px); transform: translateX(-10%);
  display: grid; gap: 2px; padding: 8px 12px; border-radius: 10px; background: rgb(30 30 32 / 0.92); border: 1px solid rgb(255 255 255 / 0.12);
  font-size: 11px; transition: opacity 0.4s;
}
.dl-label b { font-size: 12px; } .dl-mb { color: var(--fg-2); font-variant-numeric: tabular-nums; }
.ins-cursor { position: absolute; z-index: 9; width: 20px; height: 20px; left: var(--cx, 70%); top: var(--cy, 60%); filter: drop-shadow(0 2px 4px rgb(0 0 0 / 0.6)); transition: left 0.8s var(--ease-out), top 0.8s var(--ease-out), transform 0.15s; opacity: 0; }
.desk.clicking .ins-cursor { transform: scale(0.82); }

/* Phases */
.desk[data-phase="0"] .dl-label { opacity: 1; } .desk:not([data-phase="0"]) .dl-label { opacity: 0; }
.desk[data-phase="1"] .finder, .desk[data-phase="2"] .finder { opacity: 1; transform: none; }
.desk[data-phase="2"] .finder { filter: brightness(0.5); }
.desk[data-phase="2"] .assist { opacity: 1; transform: none; }
.desk[data-phase="3"] .steamwin, .desk[data-phase="3"] .toast-ready { opacity: 1; transform: none; }
.desk[data-phase="1"] .ins-cursor, .desk[data-phase="3"] .ins-cursor { opacity: 1; }

/* Without JS or with reduced motion: the finished state. */
html:not(.js) .desk .steamwin, html:not(.js) .desk .toast-ready { opacity: 1; transform: none; }
@media (max-width: 860px) {
  .ins-grid { grid-template-columns: 1fr; }
  .js .ins-stage { align-items: start; padding-top: 24px; }
  .ins-copy .section-title, .ins-copy .pill { display: none; }
  .ins-steps { margin: 0 0 16px; }
  .ins-steps li:not(.is-on) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .js .install { height: auto; }
  .js .ins-stage { position: relative; top: 0; height: auto; padding: 80px 0; }
  .ins-steps span { max-height: none; opacity: 1; }
}

/* Brand options (preview toggle): black and white mark + logotype face */
@font-face { font-family: "Unbounded"; src: url("fonts/unbounded.woff2") format("woff2"); font-weight: 200 900; font-display: swap; }
@font-face { font-family: "Sora"; src: url("fonts/sora.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url("fonts/bricolage.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Schibsted Grotesk"; src: url("fonts/schibsted.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }
.mark .m { display: none; }
html[data-br="a"] .mark .m-a, html:not([data-br]) .mark .m-a,
html[data-br="b"] .mark .m-b, html[data-br="c"] .mark .m-c,
html[data-br="d"] .mark .m-d, html[data-br="e"] .mark .m-e { display: inline; }
html[data-br="a"] .wordmark, html:not([data-br]) .wordmark { font-family: "Geist", sans-serif; font-weight: 700; letter-spacing: -0.03em; }
html[data-br="b"] .wordmark { font-family: "Unbounded", sans-serif; font-weight: 600; font-size: 16px; letter-spacing: -0.01em; }
html[data-br="c"] .wordmark { font-family: "Sora", sans-serif; font-weight: 600; letter-spacing: -0.03em; }
html[data-br="d"] .wordmark { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 19px; letter-spacing: -0.035em; font-variation-settings: "wdth" 85; }
html[data-br="e"] .wordmark { font-family: "Schibsted Grotesk", sans-serif; font-weight: 800; letter-spacing: -0.04em; }
.br-toggle {
  position: fixed; left: 16px; bottom: 16px; z-index: 90;
  display: flex; align-items: center; gap: 4px; padding: 4px 4px 4px 12px;
  border-radius: 999px; background: rgb(28 28 30 / 0.9); border: 1px solid var(--line-strong);
  font-size: 12px; color: var(--fg-2);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.br-toggle span { margin-right: 6px; }
.br-toggle button { width: 30px; height: 26px; border: 0; border-radius: 999px; cursor: pointer; background: transparent; color: var(--fg-2); font: 600 12px/1 var(--sans); }
.br-toggle button[aria-pressed="true"] { background: var(--fg); color: #000; }

/* Controllers screen: one drawing, three pads, the same input read right */
.pad-stage { position: absolute; left: 6%; top: 50%; transform: translateY(-50%); width: 58%; display: grid; justify-items: center; gap: 14px; }
.pad-art { width: 100%; height: auto; overflow: visible; transition: opacity 0.35s; }
.pad-art .fb { fill: rgb(255 255 255 / 0.06); stroke: #f5f5f7; stroke-width: 1.5; transition: fill 0.15s; }
.pad-art .fl { fill: #f5f5f7; transition: fill 0.15s; }
.pad-art .fb.hit { fill: #f5f5f7; }
.pad-art .fb.hit + * { }
.pad-art .pad-touch { transition: opacity 0.35s; }
.s-pads[data-pad="1"] .pad-touch, .s-pads[data-pad="2"] .pad-touch { opacity: 0; }
.pad-art.swap { opacity: 0; }
.pad-name { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; background: rgb(20 20 22 / 0.85); border: 1px solid rgb(255 255 255 / 0.12); font-size: 11px; white-space: nowrap; }
.pad-name b { color: #fff; font-weight: 600; } .pad-name em { font-style: normal; color: #30d158; font-weight: 600; }
.pad-dot2 { width: 7px; height: 7px; border-radius: 50%; background: #30d158; box-shadow: 0 0 0 3px rgb(48 209 88 / 0.25); }
.inputs {
  position: absolute; right: 5%; top: 12%; bottom: 12%; width: 25%;
  margin: 0; padding: 10px; list-style: none; display: flex; flex-direction: column-reverse; gap: 5px; overflow: hidden;
  border-radius: 10px; background: rgb(10 10 12 / 0.7); border: 1px solid rgb(255 255 255 / 0.1);
  -webkit-mask: linear-gradient(to top, #000 70%, transparent); mask: linear-gradient(to top, #000 70%, transparent);
}
.inputs li { display: flex; align-items: center; gap: 6px; font: 600 10.5px/1 var(--mono); color: #e5e5ea; animation: in-pop 0.35s var(--ease-out); }
.inputs li i { font-style: normal; color: #8e8e93; font-weight: 500; }
.inputs li b { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: #f5f5f7; color: #000; font-weight: 700; }
@keyframes in-pop { from { opacity: 0; transform: translateY(6px); } }

/* All brand options now share B's logotype */
html[data-br] .wordmark, html:not([data-br]) .wordmark { font-family: "Unbounded", sans-serif; font-weight: 600; font-size: 16px; letter-spacing: -0.01em; font-variation-settings: normal; }

/* Hero options (preview toggle) */
.hero-die { min-height: 58vh; }
.hv { position: absolute; inset: 0; display: none; }
html:not([data-hv]) .hv-1, html[data-hv="1"] .hv-1, html[data-hv="2"] .hv-2, html[data-hv="3"] .hv-3 { display: block; }
.hv-toggle {
  position: fixed; left: 16px; bottom: 58px; z-index: 90;
  display: flex; align-items: center; gap: 4px; padding: 4px 4px 4px 12px;
  border-radius: 999px; background: rgb(28 28 30 / 0.9); border: 1px solid var(--line-strong);
  font-size: 12px; color: var(--fg-2); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.hv-toggle span { margin-right: 6px; }
.hv-toggle button { width: 30px; height: 26px; border: 0; border-radius: 999px; cursor: pointer; background: transparent; color: var(--fg-2); font: 600 12px/1 var(--sans); }
.hv-toggle button[aria-pressed="true"] { background: var(--fg); color: #000; }

/* 1: MacBook with the library, covers floating off the screen */
.laptop { position: absolute; left: 50%; top: 6%; width: min(760px, 78%); transform: translateX(-50%) translateY(calc(var(--hp, 0) * -40px)); z-index: 2; }
.lt-screen {
  aspect-ratio: 16 / 10; border-radius: 11px 11px 0 0; background: #000;
  border: 10px solid #1a1a1c; border-bottom: 0; overflow: hidden;
  box-shadow: 0 0 0 1px #3a3a3c, 0 60px 120px -40px rgb(0 0 0 / 0.95);
}
.lt-steam { height: 100%; background: #1b2838; padding: 12px 14px; }
.lt-bar { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; font-size: 11px; color: #8ba2bd; }
.lt-bar b { color: #fff; letter-spacing: 0.08em; font-size: 12px; }
.lt-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.lt-grid i { aspect-ratio: 2 / 3; border-radius: 4px; background: #111 center / cover; box-shadow: 0 4px 10px rgb(0 0 0 / 0.4); }
.lt-base { position: relative; height: 16px; margin: 0 -9%; border-radius: 2px 2px 8px 8px; background: linear-gradient(180deg, #4a4a4e, #2a2a2d 60%, #1a1a1c); box-shadow: 0 30px 60px -20px rgb(0 0 0 / 0.9); }
.lt-base::before { content: ""; position: absolute; left: 50%; top: 0; width: 16%; height: 6px; transform: translateX(-50%); border-radius: 0 0 8px 8px; background: #1a1a1c; }
.floaters img {
  position: absolute; width: clamp(80px, 8vw, 120px); aspect-ratio: 2 / 3; object-fit: cover; border-radius: 10px;
  box-shadow: 0 24px 50px -16px rgb(0 0 0 / 0.95), 0 0 0 1px rgb(255 255 255 / 0.08);
  left: var(--x); top: var(--y);
  transform: translate(calc(var(--dx) * var(--hp, 0) * 1px), calc(var(--dy) * var(--hp, 0) * 1px)) rotate(var(--r));
  animation: float 6s ease-in-out infinite; animation-delay: var(--d);
  opacity: calc(0.55 + var(--hp, 0) * 0.45);
}
@keyframes float { 50% { translate: 0 -12px; } }
.fl0 { --x: 6%; --y: 8%; --r: -14deg; --dx: -60; --dy: -30; --d: 0s; }
.fl1 { --x: 14%; --y: 48%; --r: 8deg; --dx: -80; --dy: 20; --d: -1s; }
.fl2 { --x: 2%; --y: 70%; --r: -6deg; --dx: -50; --dy: 40; --d: -2s; }
.fl3 { --x: 22%; --y: 14%; --r: 10deg; --dx: -30; --dy: -50; --d: -3s; }
.fl4 { --x: 84%; --y: 6%; --r: 12deg; --dx: 60; --dy: -30; --d: -1.5s; }
.fl5 { --x: 76%; --y: 46%; --r: -9deg; --dx: 80; --dy: 20; --d: -2.5s; }
.fl6 { --x: 90%; --y: 66%; --r: 7deg; --dx: 50; --dy: 40; --d: -0.5s; }
.fl7 { --x: 70%; --y: 12%; --r: -12deg; --dx: 30; --dy: -50; --d: -3.5s; }

/* 2: a wall of covers sliding past, one picked with Play */
.wall { position: absolute; inset: -10% -20%; perspective: 1600px; overflow: hidden; -webkit-mask: radial-gradient(70% 70% at 50% 45%, #000 40%, transparent 80%); mask: radial-gradient(70% 70% at 50% 45%, #000 40%, transparent 80%); }
.wall-inner { display: grid; gap: 16px; transform: rotateX(30deg) rotateZ(-9deg) translateY(-4%); transform-origin: 50% 0; padding-top: 4%; }
.wrow { overflow: visible; }
.wtrack { display: flex; gap: 16px; width: max-content; animation: wall-run 70s linear infinite; }
.wrow:nth-child(2) .wtrack { animation-direction: reverse; animation-duration: 80s; }
.wrow:nth-child(3) .wtrack { animation-duration: 60s; }
.wtrack i { width: clamp(110px, 10vw, 160px); aspect-ratio: 2 / 3; border-radius: 8px; background: #111 center / cover; opacity: 0.55; box-shadow: 0 20px 40px -16px rgb(0 0 0 / 0.9); }
@keyframes wall-run { to { transform: translateX(-50%); } }
.wall-pick {
  position: absolute; left: 50%; top: 18%; transform: translateX(-50%) translateY(calc(var(--hp, 0) * -30px)); z-index: 2;
  width: min(520px, 76%); border-radius: 10px; overflow: hidden; background: #1b2838;
  box-shadow: 0 50px 100px -30px rgb(0 0 0 / 0.95), 0 0 0 1px rgb(255 255 255 / 0.14);
}
.wall-pick img { display: block; width: 100%; aspect-ratio: 16 / 7.5; object-fit: cover; object-position: center 30%; }
.wall-pick div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; }
.wall-pick b { font-size: 17px; }
.wp-play { display: inline-flex; align-items: center; gap: 7px; padding: 9px 22px; border-radius: 2px; background: #59bf40; color: #fff; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; animation: wp-pulse 2.8s ease-in-out infinite; }
.wp-play svg { width: 11px; height: 11px; }
@keyframes wp-pulse { 50% { box-shadow: 0 0 0 8px rgb(89 191 64 / 0); } 0%, 100% { box-shadow: 0 0 0 0 rgb(89 191 64 / 0.5); } }

/* 3: a Windows window becomes a Mac window as you scroll */
.mw {
  --m: 0;
  position: absolute; left: 50%; top: 4%; width: min(860px, 84%); transform: translateX(-50%);
  border-radius: calc(6px + var(--m) * 8px); overflow: hidden;
  border: 1px solid rgb(255 255 255 / calc(0.1 + var(--m) * 0.06));
  box-shadow: 0 60px 120px -40px rgb(0 0 0 / 0.95);
  background: #202020;
}
.mw-bar { position: relative; display: flex; align-items: center; height: 36px; padding: 0 12px; background: color-mix(in srgb, #2a2a2c calc(var(--m) * 100%), #1f1f1f); }
.mw-mac { display: flex; gap: 7px; opacity: var(--m); transform: translateX(calc((1 - var(--m)) * -10px)); }
.mw-mac i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; }
.mw-mac i:nth-child(2) { background: #febc2e; } .mw-mac i:nth-child(3) { background: #28c840; }
.mw-win { margin-left: auto; width: 74px; color: #d0d0d0; opacity: calc(1 - var(--m)); transform: translateX(calc(var(--m) * 10px)); }
.mw-win svg { width: 100%; height: 12px; display: block; }
.mw-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 12.5px; font-weight: 600; color: var(--fg-2); white-space: nowrap; }
.mw-title em, .mw-tag em { font-style: normal; }
.t-mac { display: none; }
.mw.is-mac .t-win { display: none; } .mw.is-mac .t-mac { display: inline; }
.mw-body { position: relative; aspect-ratio: 16 / 8; overflow: hidden; }
.mw-body img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; filter: blur(calc((1 - var(--m)) * 16px)) grayscale(calc(1 - var(--m))) brightness(calc(0.55 + var(--m) * 0.45)); transform: scale(calc(1.08 - var(--m) * 0.08)); }
.mw-tag { position: absolute; left: 18px; bottom: 16px; padding: 7px 14px; border-radius: 999px; background: rgb(0 0 0 / 0.6); border: 1px solid rgb(255 255 255 / 0.18); font-size: 13px; font-weight: 600; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.mw.is-mac .mw-tag { background: #f5f5f7; color: #000; }
@media (prefers-reduced-motion: reduce) { .floaters img, .wtrack, .wp-play { animation: none; } }

/* Hero, final: MacBook opening over the wall of covers (MacBook Scroll pattern) */
.js .hero { display: block; height: 230vh; min-height: 0; overflow: visible; }
.hero-pin { position: relative; display: grid; grid-template-rows: auto 1fr; min-height: calc(100svh - 52px); overflow: hidden; }
.js .hero-pin { position: sticky; top: 52px; height: calc(100svh - 52px); }
.hero-copy { transition: none; opacity: calc(1 - var(--hp, 0) * 0.35); transform: translateY(calc(var(--hp, 0) * -24px)); }
.hero-die { min-height: 0; }
.hero-die .wall { opacity: calc(0.55 + var(--open, 0) * 0.45); }

.mbk {
  --open: 0;
  position: absolute; left: 50%; top: 2%; width: min(720px, 70%);
  transform: translateX(-50%) scale(calc(0.86 + var(--open) * 0.14));
  transform-origin: 50% 60%;
  perspective: 2000px; perspective-origin: 50% -40%;
  z-index: 2;
}
.mbk-lid {
  position: relative; aspect-ratio: 16 / 10.4;
  transform-origin: 50% 100%;
  transform: rotateX(calc((1 - var(--open)) * 82deg));
  transform-style: preserve-3d;
}
.lid-front, .lid-back { position: absolute; inset: 0; border-radius: 11px 11px 4px 4px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.lid-front { background: #0c0c0d; border: 1px solid #3a3a3c; padding: 2.2% 2.2% 3%; box-shadow: 0 50px 100px -40px rgb(0 0 0 / 0.95); }
.lid-screen { height: 100%; border-radius: 8px; overflow: hidden; }
.lid-screen .lt-steam { height: 100%; filter: brightness(calc(0.2 + var(--open) * 0.8)); }
.lid-back {
  transform: rotateX(180deg);
  display: grid; place-items: center;
  background: linear-gradient(160deg, #5a5a5f, #2c2c2f 55%, #1c1c1e);
  border: 1px solid #6a6a70;
}
.lid-back svg { width: 16%; height: auto; opacity: 0.9; filter: drop-shadow(0 1px 0 rgb(0 0 0 / 0.4)); }
.mbk-base {
  position: relative; height: 0; margin: 0 -6%;
  transform-style: preserve-3d;
}
.mbk-base::before {
  content: ""; display: block; height: 14px; border-radius: 0 0 8px 8px;
  background: linear-gradient(180deg, #4a4a4e, #2a2a2d 60%, #18181a);
  box-shadow: 0 40px 70px -24px rgb(0 0 0 / 0.95);
}
.mbk-base .kb, .mbk-base .tp { display: none; }
.lid-front { transform: translateZ(0.1px); }

@media (max-width: 860px) { .mbk { width: 88%; } .js .hero { height: 190vh; } }
@media (prefers-reduced-motion: reduce) {
  .js .hero { height: auto; } .js .hero-pin { position: relative; top: 0; height: auto; min-height: calc(100svh - 52px); }
  .mbk { --open: 1 !important; }
}

/* Controllers screen v3: a fighting-game ready screen, each pad with its own prompts */
.s-pads::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(0 0 0 / 0.35), transparent 30%, transparent 55%, rgb(0 0 0 / 0.8)); pointer-events: none; }
.vs-top { position: absolute; z-index: 2; left: 50%; top: 7%; transform: translateX(-50%); font: 800 italic 13px/1 var(--sans); letter-spacing: 0.4em; color: rgb(255 255 255 / 0.75); }
.pl {
  position: absolute; z-index: 2; bottom: 20%; display: flex; align-items: center; gap: 10px;
  padding: 9px 14px 9px 9px; border-radius: 8px; background: rgb(12 12 14 / 0.78);
  border: 1px solid rgb(255 255 255 / 0.14); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  opacity: 0; transition: opacity 0.5s var(--ease-out), transform 0.6s var(--ease-out);
}
.pl-1 { left: 4%; transform: translateX(-16px); } .pl-2 { right: 4%; transform: translateX(16px); }
.s-pads.is-on .pl { opacity: 1; transform: none; }
.s-pads.is-on .pl-1 { transition-delay: 0.35s; } .s-pads.is-on .pl-2 { transition-delay: 0.85s; }
.pl-tag { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; font: 800 italic 13px/1 var(--sans); color: #000; }
.pl-1 .pl-tag { background: #ff4d4d; } .pl-2 .pl-tag { background: #4da3ff; }
.pl b { display: block; font-size: 11px; color: #fff; }
.pl em { display: flex; align-items: center; gap: 5px; font-style: normal; font-size: 10px; color: #30d158; font-weight: 600; }
.pl em i { width: 6px; height: 6px; border-radius: 50%; background: #30d158; }
.prompts {
  position: absolute; z-index: 2; left: 50%; bottom: 5%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 14px; padding: 7px 14px; border-radius: 999px;
  background: rgb(12 12 14 / 0.7); font-size: 10.5px; font-weight: 600; color: #e5e5ea; white-space: nowrap;
}
.pr { display: inline-flex; align-items: center; gap: 6px; }
.pr i { display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; font-style: normal; font-size: 10px; font-weight: 800; }
.ps { background: #111; border: 1px solid rgb(255 255 255 / 0.3); }
.ps-x { color: #7aa8ff; } .ps-o { color: #ff6b6b; }
.xb { color: #fff; } .xb-a { background: #2fa84f; } .xb-b { background: #d53b3b; }
.pr-sep { width: 1px; height: 14px; background: rgb(255 255 255 / 0.2); }

/* Brand: logo E with the Unbounded logotype */
.mark .m { display: inline; }
.wordmark { font-family: "Unbounded", sans-serif; font-weight: 600; font-size: 16px; letter-spacing: -0.01em; }

/* Hero, v4: headline over a straight-on MacBook, three rows of covers behind */
.js .hero { height: auto; min-height: calc(100svh - 52px); display: grid; grid-template-rows: auto 1fr; overflow: hidden; position: relative; }
.hero-copy { opacity: 1; transform: none; position: relative; z-index: 3; }
.hero-die { position: relative; z-index: 2; min-height: 52vh; }
.hero-die::after { display: none; }
.cwall {
  position: absolute; inset: 0; z-index: 0; display: grid; align-content: center; gap: 16px;
  opacity: 0.4; pointer-events: none;
  -webkit-mask: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent), linear-gradient(180deg, transparent 0%, #000 30%, #000 75%, transparent);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.cwall::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 50% at 50% 38%, rgb(0 0 0 / 0.85), transparent 75%); }
.ctrack { display: flex; gap: 16px; width: max-content; animation: wall-run 90s linear infinite; }
.crow:nth-child(2) .ctrack { animation-direction: reverse; animation-duration: 110s; }
.crow:nth-child(3) .ctrack { animation-duration: 75s; }
.ctrack i { width: clamp(110px, 9vw, 150px); aspect-ratio: 2 / 3; border-radius: 8px; background: #111 center / cover; flex: none; }
.hero-die .laptop { top: 2%; transform: translateX(-50%); width: min(820px, 80%); }
.hero-die .lt-screen { border-width: 12px; }
@media (prefers-reduced-motion: reduce) { .ctrack { animation: none; } }

/* Smaller chips on the game cards */
.chips { gap: 4px; }
.chips li { padding: 3px 8px; font-size: 11px; font-weight: 600; line-height: 1.35; }
.gcard-lead .chips li { padding: 4px 10px; font-size: 12px; }

/* Install, v2: the original layout, alive */
.js .install.install-v2 { height: auto; }
.install-v2 { padding: clamp(96px, 14vh, 160px) 0; background: radial-gradient(60% 50% at 78% 40%, rgb(139 123 255 / 0.08), transparent 70%), var(--bg); }
.live-steps li { color: #636366; transition: color 0.4s var(--ease-out); }
.live-steps li strong { color: #8e8e93; transition: color 0.4s var(--ease-out); }
.live-steps li::before { transition: color 0.4s, background 0.4s; }
.live-steps li.is-on { color: var(--fg-2); } .live-steps li.is-on strong { color: var(--fg); }
.live-steps li.is-on::before { color: var(--fg); }
.as-progress { height: 2px; background: rgb(255 255 255 / 0.06); }
.as-progress span { display: block; height: 100%; width: calc(var(--ap, 0) * 100%); background: linear-gradient(90deg, var(--iri-violet), var(--iri-blue), var(--iri-pink)); transition: width 0.6s var(--ease-out); }
.assistant.live .assistant-rows li { opacity: 1; transform: none; transition: background 0.4s; }
.assistant.live .assistant-rows li::before { background: transparent; border: 1.5px solid #48484a; background-image: none; transition: background-color 0.3s, border-color 0.3s; box-sizing: border-box; }
.assistant.live .assistant-rows li.now::before { border-color: #8e8e93; border-top-color: transparent; animation: spin 0.8s linear infinite; }
.assistant.live .assistant-rows li.ok::before {
  border-color: transparent; animation: none;
  background: var(--fg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5.5 10.5 3 3 6-7' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat;
}
@keyframes spin { to { transform: rotate(360deg); } }
.assistant.live .row-name { color: #8e8e93; transition: color 0.3s; }
.assistant.live li.ok .row-name, .assistant.live li.now .row-name { color: var(--fg); }
.assistant.live .row-value { color: #636366; display: flex; justify-content: flex-end; align-items: center; }
.assistant.live li.ok .row-value { color: var(--fg-2); }
.assistant.live li.now { background: rgb(255 255 255 / 0.03); }
.assistant.live .v-done { display: none; }
.assistant.live li.ok .v-done { display: inline; } .assistant.live li.ok .v-wait, .assistant.live li.ok .rbar { display: none; }
.assistant.live .rbar { width: 140px; }
.assistant.live li.row-final.ok { background: rgb(255 255 255 / 0.05); }
.assistant.live li.row-final.ok .row-value { color: var(--fg); font-weight: 600; }

/* Chapter titles are clickable */
.js .dissect .chapter { pointer-events: auto; cursor: pointer; }
.js .dissect .chapter:not(.is-on):hover h3 { color: #a1a1a6; }
.js .dissect .chapter:focus-visible { outline: 2px solid var(--iri-blue); outline-offset: 2px; border-radius: 8px; }

/* Hero v5: a MacBook that opens as you scroll, over a tilted wall of covers */
.js .hero { display: block; height: 240vh; min-height: 0; overflow: visible; }
.hero-pin { position: relative; min-height: calc(100svh - 52px); overflow: hidden; }
.js .hero-pin { position: sticky; top: 52px; height: calc(100svh - 52px); }
.hero-copy { position: relative; z-index: 3; opacity: calc(1 - var(--open, 0) * 1.3); transform: translateY(calc(var(--open, 0) * -60px)); }
.cwall { inset: -10% -25%; opacity: calc(0.38 + var(--open, 0) * 0.22); perspective: 1600px; display: block; -webkit-mask: radial-gradient(75% 70% at 50% 50%, #000 35%, transparent 80%); mask: radial-gradient(75% 70% at 50% 50%, #000 35%, transparent 80%); -webkit-mask-composite: source-over; mask-composite: add; }
.cwall::after { display: none; }
.cwall-inner { display: grid; gap: 16px; transform: rotateX(32deg) rotateZ(-10deg) translateY(4%); transform-origin: 50% 0; padding-top: 6%; }

.mbs-wrap {
  --w: min(640px, 66vw);
  position: absolute; z-index: 2; left: 50%; top: 100%;
  width: var(--w);
  transform: translate(-50%, calc(-100% - 4vh + var(--open, 0) * -1 * (var(--w) * 0.38)))
             scale(calc(0.92 + var(--open, 0) * 0.12));
  transform-origin: 50% 100%;
  perspective: 1400px; perspective-origin: 50% 0%;
}
.mbs { position: relative; transform-style: preserve-3d; }
.mbs-lid {
  position: absolute; left: 0; right: 0; bottom: 100%; aspect-ratio: 16 / 10.2;
  transform-origin: 50% 100%;
  transform: rotateX(calc((1 - var(--open, 0)) * 180deg));
  transform-style: preserve-3d;
  z-index: 2;
}
.mbs-screen, .mbs-back { position: absolute; inset: 0; border-radius: 10px 10px 6px 6px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.mbs-screen { background: #050505; padding: 2.2% 2.2% 3.2%; box-shadow: inset 0 0 0 1px #2c2c2e, 0 40px 80px -30px rgb(0 0 0 / 0.9); }
.mbs-glass { height: 100%; border-radius: 8px; overflow: hidden; }
.mbs-glass .lt-steam { height: 100%; filter: brightness(calc(0.15 + var(--open, 0) * 0.85)); }
.mbs-back {
  transform: rotateX(180deg);
  display: grid; place-items: center;
  background: radial-gradient(120% 90% at 30% 10%, #3a3a3e, #1d1d20 60%, #141416);
  box-shadow: inset 0 0 0 1px #3a3a3e;
}
.mbs-back svg { width: 14%; opacity: 0.85; }
.mbs-deck {
  position: relative; aspect-ratio: 16 / 10.2; border-radius: 6px 6px 12px 12px;
  background: linear-gradient(180deg, #2a2a2d, #232326);
  box-shadow: inset 0 0 0 1px #3a3a3e, 0 50px 90px -30px rgb(0 0 0 / 0.95);
  display: grid; grid-template-rows: auto 1fr auto; padding: 0 0 5%;
  overflow: hidden;
}
.mbs-hinge { height: 5%; margin: 0 9%; border-radius: 0 0 8px 8px; background: #08080a; }
.mbs-kbrow { display: grid; grid-template-columns: 9% 1fr 9%; gap: 2%; padding: 4% 3% 3%; }
.mbs-spk { background: radial-gradient(circle, #0c0c0e 0.9px, transparent 1.3px) 0 0 / 6px 6px; border-radius: 4px; }
.mbs-kb { display: grid; gap: 3px; padding: 4px; border-radius: 8px; background: #0c0c0e; }
.mbs-kb > div { display: flex; gap: 3px; }
.mbs-kb i { flex: 1; height: clamp(10px, 1.7vw, 20px); border-radius: 3px; background: #18181a; box-shadow: inset 0 -1px 0 #000, 0 0 0 0.5px #2a2a2c; }
.mbs-kb > div:first-child i { height: clamp(6px, 0.9vw, 10px); }
.mbs-kb i.w15 { flex: 1.5; } .mbs-kb i.w2 { flex: 2; } .mbs-kb i.w6 { flex: 6; }
.mbs-pad { justify-self: center; width: 42%; aspect-ratio: 16 / 9.5; border-radius: 10px; box-shadow: inset 0 0 0 1px #3a3a3e; background: #262629; }

@media (max-width: 860px) { .mbs-wrap { --w: 88vw; } .js .hero { height: 200vh; } }
@media (prefers-reduced-motion: reduce) {
  .js .hero { height: auto; } .js .hero-pin { position: relative; top: 0; height: auto; min-height: 110svh; }
  .hero, .hero-pin { --open: 1 !important; }
}

/* Hero v6: devices.css MacBook Pro (MIT), rising and lighting up on scroll */
.js .hero { height: 190vh; }
.dev-wrap {
  position: absolute; z-index: 2; left: 50%; bottom: 0;
  width: 740px; height: 434px;
  transform: translateX(-50%) translateY(calc(18% - var(--open, 0) * 22%)) scale(calc(var(--ds, 1) * (0.9 + var(--open, 0) * 0.12)));
  transform-origin: 50% 100%;
  perspective: 1600px;
}
.dev-wrap .device { transform: rotateX(calc((1 - var(--open, 0)) * 24deg)); transform-origin: 50% 100%; transition: none; }
.dev-wrap .device-screen { overflow: hidden; background: #000; }
.dev-wrap .device-screen .lt-steam { height: 100%; filter: brightness(calc(0.25 + var(--open, 0) * 0.75)); }
.dev-wrap .lt-grid { grid-template-columns: repeat(6, 1fr); gap: 7px; }
.dev-wrap::after { content: ""; position: absolute; left: 6%; right: 6%; bottom: -30px; height: 50px; background: radial-gradient(50% 50% at 50% 50%, rgb(0 0 0 / 0.9), transparent 70%); z-index: -1; }
@media (max-width: 1100px) { .dev-wrap { --ds: 0.85; } }
@media (max-width: 860px) { .dev-wrap { --ds: 0.5; } }
@media (max-width: 480px) { .dev-wrap { --ds: 0.44; } }

/* In-game screens use real gameplay screenshots (Steam store) */
.s-game .game-scene { background: url("assets/shots/3768760.jpg") center / cover; }
.s-menu .game-scene { background: url("assets/shots/3764200.jpg") center / cover; }
.s-pads .game-scene { background: url("assets/shots/1778820.jpg") center / cover; filter: brightness(0.7); }
.s-menu .game-scene { background: url("assets/shots/1422450.jpg") center / cover; }
.s-pads .game-scene { filter: brightness(0.85); }
.s-pads::after { background: linear-gradient(180deg, transparent 55%, rgb(0 0 0 / 0.8)); }

/* The headline stays through the whole hero */
.hero-copy { opacity: 1 !important; transform: none !important; }

/* Final CTA: the same wall of covers behind */
.final { position: relative; overflow: hidden; }
.final .final-inner { position: relative; z-index: 2; }
.cwall-final { position: absolute; inset: -20% -25%; z-index: 0; opacity: 0.5; }
.cwall-final .cwall-inner { transform: rotateX(32deg) rotateZ(-10deg) translateY(-6%); }
.final::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(45% 55% at 50% 50%, rgb(0 0 0 / 0.88), rgb(0 0 0 / 0.35) 70%, transparent); }

/* Hero contrast: dark field behind the copy, dimmer wall, laptop stays below the buttons */
.hero-pin .cwall { opacity: 0.32 !important; }
.hero-pin::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(60% 46% at 50% 26%, rgb(0 0 0 / 0.94) 0%, rgb(0 0 0 / 0.82) 45%, rgb(0 0 0 / 0.2) 80%, transparent 100%),
    linear-gradient(180deg, rgb(0 0 0 / 0.7), transparent 45%);
}
.hero-title span { color: #c7c7cc; }
.hero-title { text-shadow: 0 2px 30px rgb(0 0 0 / 0.6); }
.hero-sub { color: #d1d1d6; text-shadow: 0 1px 16px rgb(0 0 0 / 0.85); }
.hero-actions .textlink { text-shadow: 0 1px 12px rgb(0 0 0 / 0.9); }
.dev-wrap { transform: translateX(-50%) translateY(calc(26% - var(--open, 0) * 14%)) scale(calc(var(--ds, 1) * (0.88 + var(--open, 0) * 0.08))); }

/* Requirements v2: a compatibility checker */
.checker { margin-top: 36px; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 20px; align-items: stretch; }
.ck-pick, .ck-result { border-radius: 13px; background: #0d0d0f; border: 1px solid rgb(255 255 255 / 0.06); padding: 26px 28px; }
.seg { border: 0; margin: 0 0 22px; padding: 0; }
.seg legend { padding: 0; margin-bottom: 10px; font-size: 13px; font-weight: 600; color: var(--fg-3); text-transform: uppercase; letter-spacing: 0.06em; }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span {
  display: inline-grid; place-items: center; min-width: 58px; height: 40px; padding: 0 16px; border-radius: 8px;
  background: #1c1c1e; color: var(--fg-2); font-weight: 600; font-size: 15px;
  transition: background 0.25s var(--ease-out), color 0.25s, transform 0.2s;
}
.seg label:hover span { background: #2c2c2e; color: var(--fg); }
.seg input:checked + span { background: var(--fg); color: #000; }
.seg input:focus-visible + span { outline: 2px solid var(--iri-blue); outline-offset: 2px; }
.seg label:active span { transform: scale(0.96); }
.ck-hint { margin: 4px 0 0; font-size: 13px; color: var(--fg-3); }
.ck-result { display: grid; gap: 18px; position: relative; overflow: hidden; }
.ck-result::before { content: ""; position: absolute; inset: -40% -20% auto auto; width: 70%; height: 90%; background: radial-gradient(closest-side, rgb(48 209 88 / 0.18), transparent); transition: background 0.5s; pointer-events: none; }
.checker.is-bad .ck-result::before { background: radial-gradient(closest-side, rgb(255 69 58 / 0.18), transparent); }
.ck-verdict { display: flex; align-items: center; gap: 16px; position: relative; }
.ck-badge { flex: none; width: 52px; height: 52px; border-radius: 50%; background: #30d158 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5.5 10.5 3 3 6-7' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/28px no-repeat; transition: background-color 0.3s; }
.checker.is-bad .ck-badge { background: #ff453a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m6 6 8 8M14 6l-8 8' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/26px no-repeat; }
.ck-title { margin: 0; font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -0.03em; font-weight: 700; }
.ck-why { margin: 4px 0 0; color: var(--fg-2); font-size: 15px; }
.ck-verdict.pop { animation: ck-pop 0.45s var(--ease-out); }
@keyframes ck-pop { from { opacity: 0.3; transform: translateY(6px) scale(0.98); } }
.ck-list { margin: 0; padding: 0; list-style: none; display: grid; position: relative; }
.ck-list li { display: grid; grid-template-columns: 26px 6.5em 1fr; align-items: center; gap: 6px; padding: 11px 0; border-top: 1px solid var(--line); font-size: 14px; }
.ck-list b { font-weight: 600; } .ck-list em { font-style: normal; color: var(--fg-2); }
.ck-tick { width: 18px; height: 18px; border-radius: 50%; background: #3a3a3c; transition: background-color 0.3s; }
.ck-list li.ok .ck-tick { background: #30d158 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5.5 10.5 3 3 6-7' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat; }
.ck-list li.bad .ck-tick { background: #ff453a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m6.5 6.5 7 7M13.5 6.5l-7 7' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center/11px no-repeat; }
.ck-list li.bad em { color: #ff6961; }
@media (max-width: 860px) { .checker { grid-template-columns: 1fr; } .ck-list li { grid-template-columns: 26px 1fr; } .ck-list em { grid-column: 2; } }

/* Requirements v3: one-click Mac check */
.checker { display: block; margin-top: 32px; }
.ck-card {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center;
  padding: 34px 36px; border-radius: 15px; background: #0d0d0f; border: 1px solid rgb(255 255 255 / 0.07);
}
.ck-card::before { content: ""; position: absolute; inset: -60% auto auto -10%; width: 60%; height: 160%; background: radial-gradient(closest-side, rgb(139 123 255 / 0.12), transparent); transition: background 0.6s; pointer-events: none; }
.checker[data-state="ok"] .ck-card::before { background: radial-gradient(closest-side, rgb(48 209 88 / 0.16), transparent); }
.checker[data-state="bad"] .ck-card::before, .checker[data-state="maybe"] .ck-card::before { background: radial-gradient(closest-side, rgb(255 159 10 / 0.14), transparent); }
.checker[data-state="no"] .ck-card::before { background: radial-gradient(closest-side, rgb(255 69 58 / 0.16), transparent); }
.ck-scan { position: relative; width: 96px; height: 96px; display: grid; place-items: center; }
.ck-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid #2c2c2e; }
.checker[data-state="scan"] .ck-ring { border-color: transparent; background: conic-gradient(from var(--a, 0deg), var(--iri-violet), var(--iri-blue), var(--iri-pink), transparent 70%) border-box; -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); animation: hl-spin 1s linear infinite; }
.ck-badge { width: 64px; height: 64px; border-radius: 50%; background: #1c1c1e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4' y='5' width='16' height='11' rx='2' fill='none' stroke='%23a1a1a6' stroke-width='1.6'/%3E%3Cpath d='M2.5 19h19' stroke='%23a1a1a6' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center/30px no-repeat; transition: background-color 0.35s, transform 0.4s var(--ease-out); }
.checker[data-state="ok"] .ck-badge { background: #30d158 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5.5 10.5 3 3 6-7' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/34px no-repeat; transform: scale(1.06); }
.checker[data-state="no"] .ck-badge { background: #ff453a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m6 6 8 8M14 6l-8 8' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/30px no-repeat; }
.checker[data-state="bad"] .ck-badge, .checker[data-state="maybe"] .ck-badge { background: #ff9f0a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 5.5v6M10 14.5v.1' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/30px no-repeat; }
.ck-main .ck-title { margin: 0; font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -0.03em; font-weight: 700; }
.ck-main .ck-why { margin: 6px 0 0; color: var(--fg-2); font-size: 15px; max-width: 42em; }
.ck-facts { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.ck-facts div { display: grid; gap: 2px; padding: 10px 16px; border-radius: 8px; background: #161618; min-width: 150px; }
.ck-facts span { font-size: 12px; color: var(--fg-3); }
.ck-facts b { font-size: 17px; font-weight: 650; }
.ck-actions { display: flex; align-items: center; gap: 22px; margin-top: 20px; flex-wrap: wrap; }
.ck-go { border: 0; cursor: pointer; font: inherit; font-weight: 600; font-size: 16px; }
.ck-go svg { width: 18px; height: 18px; }
.checker[data-state="scan"] .ck-go { opacity: 0.6; pointer-events: none; }
.ck-manual-toggle { background: none; border: 0; cursor: pointer; font: inherit; color: var(--fg-2); font-size: 15px; padding: 0; }
.ck-manual-toggle:hover { color: var(--fg); }
.ck-manual { margin-top: 18px; display: grid; gap: 4px; }
.ck-manual .seg { margin: 0 0 10px; }
.ck-manual .seg span { min-width: 52px; height: 36px; font-size: 14px; }
.ck-req { margin: 16px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.ck-req li { padding: 14px 16px; border-radius: 9px; background: #0d0d0f; border: 1px solid rgb(255 255 255 / 0.05); display: grid; gap: 3px; }
.ck-req b { font-size: 12px; color: var(--fg-3); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.ck-req span { font-size: 14px; color: var(--fg); }
@media (max-width: 860px) { .ck-card { grid-template-columns: 1fr; padding: 26px; } .ck-req { grid-template-columns: 1fr 1fr; } }

/* Hero, final: the MacBook is open and whole from the first frame; no pinning */
.js .hero { height: auto; }
.js .hero-pin, .hero-pin { position: relative; top: 0; height: auto; min-height: calc(100svh - 52px); display: flex; flex-direction: column; align-items: center; padding-bottom: 6vh; }
.hero, .hero-pin { --open: 1; }
.dev-wrap {
  position: relative; left: auto; bottom: auto; z-index: 2;
  width: calc(740px * var(--ds, 1)); height: calc(434px * var(--ds, 1));
  margin-top: clamp(28px, 5vh, 56px);
  transform: none !important;
}
.dev-wrap .device { transform: scale(var(--ds, 1)) !important; transform-origin: 0 0; }
.dev-wrap .device-screen .lt-steam { filter: none; }
@media (max-height: 900px) and (min-width: 861px) { .dev-wrap { --ds: 0.82; } }

/* Scrolling past the hero closes the lid */
.dev-wrap .device { perspective: 1500px; perspective-origin: 50% 100%; }
.dev-wrap .device-frame { transform-origin: 50% 100%; transform: rotateX(calc(var(--close, 0) * -86deg)); will-change: transform; }
.dev-wrap .device-screen { filter: brightness(calc(1 - var(--close, 0) * 0.7)); }

/* MacBook: dark grey (Space Black) */
.dev-wrap .device-frame { box-shadow: inset 0 0 0 2px #3c3c40 !important; background: #0a0a0b !important; }
.dev-wrap .device-power { background: radial-gradient(circle at center, #3a3a3e 85%, #2c2c30 100%) !important; border-color: #1c1c1f !important; }
.dev-wrap .device-power::after { background: #48484c !important; box-shadow: inset 0 0 4px 2px #232326 !important; }
.dev-wrap .device-power::before { box-shadow: -300px 0 #1a1a1c, 300px 0 #1a1a1c !important; }
/* Lid closes toward the viewer as the page scrolls */
.dev-wrap .device-frame { transform: rotateX(calc(var(--close, 0) * 80deg)) !important; }

/* Game playing on the MacBook, with a Metal HUD */
.dv-game { position: relative; width: 100%; height: 100%; background: #000; overflow: hidden; }
.dv-game video { width: 100%; height: 100%; object-fit: cover; display: block; }
.dv-label, .g-label {
  position: absolute; left: 10px; top: 10px; z-index: 2;
  padding: 4px 9px; border-radius: 6px; background: rgb(0 0 0 / 0.55);
  font: 600 11px/1.2 var(--sans); color: #fff; letter-spacing: -0.01em;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.g-label { left: 3%; top: 4%; font-size: 11px; }
.dv-hud { position: absolute; right: 10px; top: 10px; z-index: 2; padding: 7px 9px; border-radius: 6px; background: rgb(10 10 12 / 0.7); font: 500 8.5px/1.45 var(--mono); color: #e8e8ea; min-width: 150px; }
.dv-hud p { margin: 0; display: flex; justify-content: space-between; gap: 10px; }
.dv-hud p span:first-child { color: #9a9aa0; }
.dv-hud .dv-fps { margin-top: 4px; justify-content: flex-start; align-items: baseline; gap: 5px; color: #9a9aa0; }
.dv-hud .dv-fps b { font-size: 17px; color: #7dff8a; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Requirements v4: one clean card, one button */
.ck-card { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 18px; padding: 48px 32px 44px; }
.ck-card::before { inset: -50% 20% auto; width: auto; height: 120%; }
.ck-scan { width: 84px; height: 84px; }
.ck-badge { width: 56px; height: 56px; }
.ck-main { display: grid; justify-items: center; }
.ck-main .ck-why { max-width: 34em; }
.ck-facts { justify-content: center; margin-top: 18px; }
.ck-facts div { min-width: 0; padding: 8px 16px; flex-direction: row; display: flex; gap: 8px; align-items: baseline; border-radius: 999px; background: #1c1c1e; }
.ck-facts span { font-size: 13px; } .ck-facts b { font-size: 15px; }
.ck-actions { justify-content: center; margin-top: 22px; }
.ck-req { grid-template-columns: repeat(5, 1fr); gap: 0; margin-top: 14px; border-radius: 10px; overflow: hidden; border: 1px solid rgb(255 255 255 / 0.06); }
.ck-req li { border: 0; border-radius: 0; background: #0d0d0f; text-align: center; padding: 16px 12px; }
.ck-req li + li { border-left: 1px solid rgb(255 255 255 / 0.06); }
@media (max-width: 860px) { .ck-req { grid-template-columns: 1fr 1fr; } .ck-req li + li { border-left: 0; } }

/* Credits v2: the stack, top to bottom, with a light running through it */
.credits-v2 { padding: clamp(96px, 14vh, 160px) 0; border-top: 1px solid var(--line); }
.credits-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(36px, 6vw, 88px); align-items: center; }
.credits-v2 .section-title { font-size: clamp(30px, 3.2vw, 44px); }
.credits-v2 .textlink { margin-top: 22px; }
/* Credits v3: a hub. Bridgeplay in the middle, every piece wired into it */
.hub { position: relative; aspect-ratio: 1 / 0.92; width: 100%; max-width: 620px; justify-self: center; }
.hub-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hub-lines line { fill: none; stroke-linecap: round; }
.hub-base line { stroke: #2c2c2e; stroke-width: 0.35; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 0.9s var(--ease-out), stroke 0.3s; transition-delay: calc(var(--i) * 90ms + 0.2s); }
.hub.is-on .hub-base line { stroke-dashoffset: 0; }
.hub-flow line { stroke: url(#none); stroke: var(--iri-blue); stroke-width: 0.7; stroke-dasharray: 10 90; stroke-dashoffset: 10; opacity: 0; filter: drop-shadow(0 0 1.2px rgb(79 179 255 / 0.9)); }
.hub.is-on .hub-flow line { animation: hub-flow 2.8s cubic-bezier(0.45, 0, 0.55, 1) infinite; animation-delay: calc(var(--i) * 0.4s + 1.2s); }
.hub-flow line:nth-child(odd) { stroke: var(--iri-violet); }
.hub-flow line:nth-child(3n) { stroke: var(--iri-pink); }
@keyframes hub-flow { 0% { stroke-dashoffset: 10; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { stroke-dashoffset: -90; opacity: 0; } }
.hub-nodes { margin: 0; padding: 0; list-style: none; }
.hn {
  position: absolute; left: var(--x); top: var(--y); width: max-content; max-width: 168px;
  display: grid; justify-items: center; gap: 2px; text-align: center;
  padding: 11px 15px; border-radius: 8px; background: #0d0d0f; border: 1px solid rgb(255 255 255 / 0.08);
  transform: translate(-50%, -50%) scale(0.9); opacity: 0;
  transition: opacity 0.5s var(--ease-out), transform 0.6s var(--ease-out), border-color 0.3s;
  transition-delay: calc(var(--i) * 90ms);
}
.hub.is-on .hn { opacity: 1; transform: translate(-50%, -50%); }
.hn:hover { border-color: rgb(255 255 255 / 0.22); }
.hn b { font-size: 14px; font-weight: 650; letter-spacing: -0.015em; }
.hn span { font-size: 12px; color: var(--fg-3); }
.hn em { margin-top: 5px; font-style: normal; font-size: 11px; font-weight: 600; color: var(--fg-2); padding: 3px 9px; border-radius: 999px; background: #1c1c1e; white-space: nowrap; }
.hub-core {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: grid; justify-items: center; gap: 4px; padding: 20px 26px; border-radius: 12px; text-align: center;
  background: linear-gradient(#111113, #111113) padding-box, linear-gradient(120deg, var(--iri-violet), var(--iri-blue), var(--iri-pink)) border-box;
  border: 1px solid transparent; box-shadow: 0 0 60px rgb(139 123 255 / 0.18);
}
.hub-core .hub-mark { width: 34px; height: 34px; margin-bottom: 4px; }
.hub-core b { font-family: "Unbounded", var(--font); font-size: 18px; font-weight: 600; letter-spacing: -0.02em; }
.hub-core span:not(.hub-ring) { font-size: 12px; color: var(--fg-3); }
.hub-ring { position: absolute; inset: -1px; border-radius: 12px; border: 1px solid var(--iri-blue); opacity: 0; pointer-events: none; }
.hub.is-on .hub-ring { animation: hub-ring 2.8s var(--ease-out) 1.6s infinite; }
.hub.is-on .hub-ring.r2 { animation-delay: 3s; }
@keyframes hub-ring { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(1.35, 1.6); opacity: 0; } }
@media (max-width: 860px) { .credits-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
  .hub { aspect-ratio: auto; display: grid; gap: 8px; }
  .hub-lines { display: none; }
  .hub-core { position: relative; left: auto; top: auto; transform: none; order: -1; }
  .hub-nodes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .hn { position: relative; left: auto; top: auto; max-width: none; width: auto; transform: none; }
  .hub.is-on .hn { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .hn { opacity: 1; transform: translate(-50%, -50%); } .hub-base line { stroke-dashoffset: 0; } .hub-flow, .hub-ring { display: none; } }

/* Setup Assistant v3: the old reveal rule (.js .assistant:not(.is-on) li, opacity .25) outranked the live rows and dimmed them all. */
.js .assistant.live:not(.is-on) .assistant-rows li, .js .assistant.live .assistant-rows li { opacity: 1; transform: none; }
.assistant.live .assistant-rows li .row-name { color: #6e6e73; }
.assistant.live .assistant-rows li .row-value { color: #48484a; }
.assistant.live .assistant-rows li.now .row-name { color: var(--fg); }
.assistant.live .assistant-rows li.now .row-value { color: var(--fg-2); }
.assistant.live .assistant-rows li.ok .row-name, .assistant.live .assistant-rows li.ok .row-value { color: #fff; }
.assistant.live .assistant-rows li.ok::before { background-color: #fff; border-color: #fff; }
.assistant.live .assistant-rows li.now::before { border-color: #fff; border-top-color: transparent; }

/* Requirements v5: left, the one-click check; right, the actual minimum requirements */
.checker { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-top: 32px; align-items: stretch; }
.ck-facts[hidden] { display: none !important; }
.ck-card { grid-template-columns: 1fr; justify-items: start; text-align: left; align-content: center; gap: 22px; padding: 40px; }
.ck-card::before { inset: -40% auto auto -30%; width: 90%; height: 120%; }
.ck-scan { width: 72px; height: 72px; }
.ck-badge { width: 48px; height: 48px; background-size: 24px; }
.ck-main { justify-items: start; }
.ck-main .ck-title { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.08; }
.ck-main .ck-why { margin-top: 10px; max-width: 26em; }
.ck-facts, .ck-actions { justify-content: flex-start; }
.ck-reqcard { padding: 32px 36px; border-radius: 15px; background: #0d0d0f; border: 1px solid rgb(255 255 255 / 0.07); display: grid; align-content: center; }
.ck-reqtitle { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--fg-3); text-transform: uppercase; letter-spacing: 0.06em; }
.ck-req { margin: 0; display: grid; grid-template-columns: 1fr; gap: 0; border: 0; border-radius: 0; overflow: visible; }
.ck-req li { display: grid; grid-template-columns: 6.5em 1fr 20px; align-items: center; gap: 12px; padding: 15px 0; text-align: left; background: none; border: 0; border-radius: 0; }
.ck-req li + li { border-left: 0; border-top: 1px solid rgb(255 255 255 / 0.07); }
.ck-req b { font-size: 15px; font-weight: 600; color: var(--fg-2); text-transform: none; letter-spacing: -0.01em; }
.ck-req span { font-size: 15px; color: var(--fg); }
.ck-mark { width: 20px; height: 20px; border-radius: 50%; }
.ck-req li[data-ok="yes"] .ck-mark { background: #30d158 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5.5 10.5 3 3 6-7' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat; animation: ck-pop 0.45s var(--ease-out); }
.ck-req li[data-ok="no"] .ck-mark { background: #ff453a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m6 6 8 8M14 6l-8 8' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center/12px no-repeat; animation: ck-pop 0.45s var(--ease-out); }
.ck-req li[data-ok="unknown"] .ck-mark { background: #ff9f0a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 5.5v5.5M10 14.5v.1' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center/14px no-repeat; }
@media (max-width: 860px) { .checker { grid-template-columns: 1fr; } .ck-card, .ck-reqcard { padding: 26px; } .ck-req { grid-template-columns: 1fr; } .ck-req li + li { border-top: 1px solid rgb(255 255 255 / 0.07); } }

/* Tour title, visible above the chapters and the Steam window */
.how-title { position: relative; z-index: 3; text-align: center; padding: clamp(28px, 6vh, 64px) var(--gutter) 0; }
.js .how-title { position: absolute; left: 0; right: 0; top: 0; }
.js .tour { top: calc(50% + 34px); }
@media (max-width: 860px) { .js .how-title { position: relative; } .js .tour { top: auto; } }
@media (min-width: 861px) { .js .chapters { top: 68px; } }
.how-em { background: linear-gradient(100deg, var(--iri-violet), var(--iri-blue) 50%, var(--iri-pink)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.how-title { font-size: clamp(40px, 5vw, 72px); letter-spacing: -0.035em; padding-top: clamp(56px, 12vh, 132px); }
.dv-hud { min-width: 186px; }
/* Lid stays open: no close on scroll */
.dev-wrap .device-frame { transform: none !important; }
.dev-wrap .device-screen { filter: none !important; }

/* Hero game switcher, in place of the label */
.dv-games { position: absolute; left: 10px; top: 10px; z-index: 3; display: flex; gap: 4px; padding: 3px; border-radius: 8px; background: rgb(0 0 0 / 0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.dv-games button { appearance: none; border: 0; cursor: pointer; padding: 4px 8px; border-radius: 5px; background: transparent; font: 600 10px/1.2 var(--sans); color: rgb(255 255 255 / 0.6); letter-spacing: -0.01em; transition: background 0.2s, color 0.2s; }
.dv-games button:hover { color: #fff; }
.dv-games button.is-on { background: rgb(255 255 255 / 0.16); color: #fff; }
.dv-games button:focus-visible { outline: 2px solid var(--iri-blue); outline-offset: 1px; }
.dv-hud .h-lock { margin-left: 4px; font-size: 8px; color: #9a9aa0; }
.dev-wrap, .dev-wrap .device, .dev-wrap .device-screen { pointer-events: auto; }
/* Tour title, a step smaller */
.how-title { font-size: clamp(34px, 4vw, 54px); }

/* Install v3: left, a three-step timeline with icons; right, the assistant gets an app header and a live percentage */
.steps-v3 { margin: 36px 0 40px; gap: 0; position: relative; counter-reset: none; }
.steps-v3::before { content: ""; position: absolute; left: 21px; top: 44px; bottom: 44px; width: 1px; background: linear-gradient(var(--line), rgb(255 255 255 / 0.18), var(--line)); }
.steps-v3 li { display: grid; grid-template-columns: 44px 1fr; gap: 18px; align-items: center; padding: 12px 0; padding-left: 0; max-width: 32em; }
.steps-v3 li::before { content: none; }
.st-ic { position: relative; z-index: 1; width: 44px; height: 44px; border-radius: 8px; display: grid; place-items: center; background: #161618; border: 1px solid rgb(255 255 255 / 0.1); color: var(--fg); box-shadow: 0 0 0 6px var(--bg); }
.st-ic svg { width: 22px; height: 22px; }
.steps-v3 li:last-child .st-ic { color: #000; border-color: transparent; background: linear-gradient(135deg, var(--iri-violet), var(--iri-blue) 55%, var(--iri-pink)); }
.steps-v3 strong { display: block; font-size: 18px; letter-spacing: -0.015em; margin-bottom: 2px; }
.steps-v3 span { font-size: 15px; line-height: 1.45; color: var(--fg-2); }
.as-head { display: flex; align-items: center; gap: 14px; padding: 20px 22px 16px; }
.as-icon { flex: none; width: 44px; height: 44px; border-radius: 11px; background: #0a0a0b url("favicon.svg") center/26px no-repeat; border: 1px solid rgb(255 255 255 / 0.12); box-shadow: 0 6px 18px rgb(0 0 0 / 0.5); }
.as-head b { display: block; font-size: 16px; font-weight: 650; letter-spacing: -0.015em; }
.as-head .as-pct { font: 500 13px/1.3 var(--mono); color: var(--fg-3); font-variant-numeric: tabular-nums; }
.assistant.live.is-done .as-pct { color: #30d158; font-family: var(--sans); font-weight: 600; }
.assistant.live { box-shadow: 0 40px 100px rgb(0 0 0 / 0.6), 0 0 0 1px rgb(255 255 255 / 0.04); }
@media (min-width: 861px) { .install-v2 .assistant { transform: scale(1.04); transform-origin: right center; } }

/* Requirements v6: the check runs on a MacBook screen; narrower left column */
.checker { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: 28px; align-items: center; }
.ck-card { display: block; padding: 0; background: none; border: 0; overflow: visible; }
.ck-card::before { display: none; }
.ck-mac { position: relative; width: 100%; aspect-ratio: 740 / 434; }
.ck-mac .device { position: absolute; left: 0; top: 0; transform: scale(var(--ds, 0.6)); transform-origin: 0 0; }
.ck-mac .device-frame { box-shadow: inset 0 0 0 2px #3c3c40 !important; background: #0a0a0b !important; }
.ck-mac .device-power { background: radial-gradient(circle at center, #3a3a3e 85%, #2c2c30 100%) !important; border-color: #1c1c1f !important; }
.ck-mac .device-power::after { background: #48484c !important; box-shadow: inset 0 0 4px 2px #232326 !important; }
.ck-mac .device-power::before { box-shadow: -300px 0 #1a1a1c, 300px 0 #1a1a1c !important; }
.ck-screen {
  position: relative; width: 100%; height: 100%; display: grid; place-items: center; text-align: center; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 0%, #2a2350 0%, #0e0e14 55%, #050507 100%);
  transition: background 0.6s;
}
.checker[data-state="ok"] .ck-screen { background: radial-gradient(120% 90% at 50% 0%, #0f4a25 0%, #0b1a10 55%, #050507 100%); }
.checker[data-state="no"] .ck-screen { background: radial-gradient(120% 90% at 50% 0%, #5a1612 0%, #1a0b0a 55%, #050507 100%); }
.checker[data-state="bad"] .ck-screen, .checker[data-state="maybe"] .ck-screen { background: radial-gradient(120% 90% at 50% 0%, #5a3a08 0%, #1a130a 55%, #050507 100%); }
.checker[data-state="scan"] .ck-screen::after { content: ""; position: absolute; left: 0; right: 0; height: 40%; top: -40%; background: linear-gradient(transparent, rgb(79 179 255 / 0.18), transparent); animation: ck-sweep 1.1s linear infinite; }
@keyframes ck-sweep { to { top: 100%; } }
.ck-screen .ck-main { position: relative; z-index: 1; display: grid; justify-items: center; padding: 0 48px; }
.ck-screen .ck-title { font-size: 40px; line-height: 1.05; letter-spacing: -0.035em; max-width: 12em; }
.ck-screen .ck-why { margin-top: 14px; font-size: 18px; max-width: 26em; color: rgb(255 255 255 / 0.7); }
.ck-screen .ck-facts { justify-content: center; margin-top: 22px; }
.ck-screen .ck-facts div { padding: 10px 18px; background: rgb(255 255 255 / 0.1); }
.ck-screen .ck-facts span { font-size: 16px; } .ck-screen .ck-facts b { font-size: 19px; }
.ck-screen .ck-actions { justify-content: center; margin-top: 26px; }
.ck-screen .ck-go { font-size: 20px; padding: 14px 30px; }
.ck-reqcard { align-self: center; }
@media (max-width: 860px) { .checker { grid-template-columns: 1fr; } }
.dv-games { flex-direction: column; align-items: stretch; gap: 2px; }
.dv-games button { text-align: left; }

/* Requirements v7: Apple-style spec tiles, big values */
.ck-reqcard { padding: 28px; }
.ck-reqtitle { margin: 0 0 14px 4px; }
.ck-req { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ck-req li { position: relative; display: grid; grid-template-columns: 1fr; gap: 4px; align-content: start; padding: 18px 20px; border-radius: 10px; background: #161618; border: 1px solid rgb(255 255 255 / 0.05) !important; transition: border-color 0.3s, background 0.3s; }
.ck-req li + li { border-top: 1px solid rgb(255 255 255 / 0.05); }
.ck-req li.rq-wide { grid-column: 1 / -1; padding: 22px 24px; background: radial-gradient(90% 140% at 100% 0%, rgb(139 123 255 / 0.16), transparent 60%), #161618; }
.rq-k { font-size: 12px; font-weight: 600; color: var(--fg-3); text-transform: uppercase; letter-spacing: 0.06em; }
.ck-req .rq-v { font-size: 30px; line-height: 1.05; font-weight: 700; letter-spacing: -0.035em; color: var(--fg); }
.ck-req .rq-v small { font-size: 0.55em; font-weight: 600; color: var(--fg-2); letter-spacing: -0.01em; }
.ck-req li.rq-wide .rq-v { font-size: 38px; background: linear-gradient(100deg, #fff 30%, #c9c3ff 70%, #9fd6ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ck-req .rq-s { font-size: 13px; line-height: 1.4; color: var(--fg-2); }
.rq-chips { display: flex; gap: 6px; margin-top: 12px; }
.rq-chips i { font: 600 12px/1 var(--mono); font-style: normal; padding: 6px 9px; border-radius: 7px; background: #0a0a0b; border: 1px solid rgb(255 255 255 / 0.1); color: var(--fg); }
.ck-req .ck-mark { position: absolute; right: 14px; top: 14px; }
.ck-req li[data-ok="yes"] { border-color: rgb(48 209 88 / 0.45) !important; }
.ck-req li[data-ok="no"] { border-color: rgb(255 69 58 / 0.45) !important; }
.ck-req li[data-ok="unknown"] { border-color: rgb(255 159 10 / 0.4) !important; }
@media (max-width: 860px) { .ck-req { grid-template-columns: 1fr 1fr; } .ck-req li + li { border-top: 1px solid rgb(255 255 255 / 0.05); } }

/* Credits v4: orbits, a glow, real icons and a living core */
.hub-orbit { position: absolute; inset: 0; pointer-events: none; }
.hub-orbit span { position: absolute; left: 50%; top: 50%; border-radius: 50%; border: 1px dashed rgb(255 255 255 / 0.09); transform: translate(-50%, -50%); }
.hub-orbit span:nth-child(1) { width: 44%; aspect-ratio: 1; border-style: solid; border-color: rgb(139 123 255 / 0.18); }
.hub-orbit span:nth-child(2) { width: 72%; aspect-ratio: 1; animation: hub-orbit 60s linear infinite; }
.hub-orbit span:nth-child(3) { width: 100%; aspect-ratio: 1; border-color: rgb(255 255 255 / 0.05); animation: hub-orbit 90s linear infinite reverse; }
.hub-orbit span:nth-child(2)::after, .hub-orbit span:nth-child(3)::after { content: ""; position: absolute; left: 50%; top: -3px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--iri-blue); box-shadow: 0 0 10px var(--iri-blue); }
.hub-orbit span:nth-child(3)::after { background: var(--iri-pink); box-shadow: 0 0 10px var(--iri-pink); }
@keyframes hub-orbit { to { transform: translate(-50%, -50%) rotate(360deg); } }
.hub-glow { position: absolute; left: 50%; top: 50%; width: 60%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgb(139 123 255 / 0.28), rgb(79 179 255 / 0.1) 50%, transparent); filter: blur(10px); pointer-events: none; }
.hub.is-on .hub-glow { animation: hub-breathe 4s ease-in-out infinite; }
@keyframes hub-breathe { 50% { opacity: 0.6; transform: translate(-50%, -50%) scale(0.92); } }

.hn { background: rgb(18 18 20 / 0.92); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); gap: 3px; padding: 12px 16px 12px; }
.hn-ic { width: 38px; height: 38px; margin-bottom: 6px; border-radius: 10px; display: grid; place-items: center; overflow: hidden; font: 700 11px/1 var(--mono); letter-spacing: -0.02em; color: var(--fg); background: #1c1c1e; border: 1px solid rgb(255 255 255 / 0.1); }
.hn-img { background: #0a0a0b; } .hn-img img { width: 30px; height: 30px; }
.hn-cover { position: relative; width: 34px; height: 46px; border-radius: 6px; }
.hn-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; animation: hn-cover 7.5s infinite; }
.hn-cover img:nth-child(2) { animation-delay: 2.5s; } .hn-cover img:nth-child(3) { animation-delay: 5s; }
@keyframes hn-cover { 0%, 30% { opacity: 1; } 36%, 100% { opacity: 0; } }
.hn-cover img:first-child { opacity: 1; }
.hn-wine { background: linear-gradient(145deg, #5a1a2c, #2a0c15); border-color: rgb(255 120 150 / 0.25); }
.hn-metal { background: linear-gradient(145deg, #d8dbe2, #8a8f99 45%, #3c4049); color: #0a0a0b; border-color: transparent; }
.hn-ros { width: auto; padding: 0 8px; font-size: 10px; gap: 3px; display: flex; background: linear-gradient(145deg, #3a2a10, #1a1408); border-color: rgb(255 190 90 / 0.25); color: #ffd28a; }
.hn-ros i { font-style: normal; color: var(--fg-3); }
.hn-chip { position: relative; background: linear-gradient(145deg, #2a2a2e, #111113); border-color: rgb(255 255 255 / 0.18); font-size: 12px; box-shadow: inset 0 0 0 4px #161618, inset 0 0 0 5px rgb(255 255 255 / 0.08); }

.hub-core { padding: 22px 30px; overflow: visible; isolation: isolate; }
.hub-core::before { content: ""; position: absolute; inset: -2px; z-index: -1; border-radius: 13px; background: conic-gradient(from var(--hub-a, 0deg), var(--iri-violet), var(--iri-blue), var(--iri-pink), var(--iri-violet)); filter: blur(14px); opacity: 0.55; }
.hub.is-on .hub-core::before { animation: hub-spin 6s linear infinite; }
@property --hub-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes hub-spin { to { --hub-a: 360deg; } }
.hub-core .hub-mark { width: 40px; height: 40px; }
.hub-core b { font-size: 21px; }
@media (max-width: 600px) { .hub-orbit, .hub-glow { display: none; } }
@media (prefers-reduced-motion: reduce) { .hub-orbit span, .hub-glow, .hub-core::before, .hn-cover img { animation: none !important; } }

/* Games list: layout preview A/B/C */
.gvar { display: inline-flex; gap: 4px; padding: 4px; margin: 0 0 18px; border-radius: 999px; background: #161618; border: 1px solid rgb(255 255 255 / 0.08); }
.gvar button { appearance: none; border: 0; cursor: pointer; padding: 6px 14px; border-radius: 999px; background: none; color: var(--fg-2); font: 600 13px/1.2 var(--sans); }
.gvar button.is-on { background: var(--fg); color: #000; }
.gmarq { display: none; }

/* A: mosaic, mixed tile sizes */
.gthumbs[data-v="a"] { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 118px; grid-auto-flow: dense; gap: 10px; }
.gthumbs[data-v="a"] li { grid-column: span 2; }
.gthumbs[data-v="a"] li:nth-child(1) { grid-column: span 3; grid-row: span 2; }
.gthumbs[data-v="a"] li:nth-child(2) { grid-column: span 3; grid-row: span 2; }
.gthumbs[data-v="a"] li:nth-child(6), .gthumbs[data-v="a"] li:nth-child(11) { grid-row: span 2; }
.gthumbs[data-v="a"] li:nth-child(16) { grid-column: span 4; }
.gthumbs[data-v="a"] li:nth-child(1) span, .gthumbs[data-v="a"] li:nth-child(2) span { font-size: 20px; }

/* B: marquee of portrait capsules, two rows in opposite directions */
.gthumbs[data-v="b"] { display: none; }
.gthumbs[data-v="b"] + .gmarq { display: grid; gap: 14px; margin: 0 calc(-1 * var(--gutter)); -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.gm-row { overflow: hidden; }
.gm-track { display: flex; gap: 14px; width: max-content; animation: gm-run 50s linear infinite; }
.gm-row:nth-child(2) .gm-track { animation-direction: reverse; animation-duration: 58s; }
.gmarq:hover .gm-track { animation-play-state: paused; }
@keyframes gm-run { to { transform: translateX(calc(-50% - 7px)); } }
.gm-track span { position: relative; width: 168px; aspect-ratio: 2 / 3; border-radius: 8px; overflow: hidden; background: #111 var(--cov) center/cover; box-shadow: 0 14px 30px rgb(0 0 0 / 0.5); transition: transform 0.3s var(--ease-out); }
.gm-track span:hover { transform: translateY(-6px) scale(1.03); }
.gm-track em { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 12px 10px; font: 600 13px/1.2 var(--sans); font-style: normal; color: #fff; background: linear-gradient(transparent, rgb(0 0 0 / 0.85)); opacity: 0; transition: opacity 0.25s; }
.gm-track span:hover em { opacity: 1; }

/* C: Steam library shelf, portrait capsules */
.gthumbs[data-v="c"] { grid-template-columns: repeat(8, 1fr); gap: 14px; grid-auto-rows: auto; }
.gthumbs[data-v="c"] li { aspect-ratio: 2 / 3; height: auto; background-image: var(--cov) !important; border-radius: 10px; transition: transform 0.3s var(--ease-out), box-shadow 0.3s; }
.gthumbs[data-v="c"] li::before, .gthumbs[data-v="c"] li::after { background: var(--cov) center/cover !important; }
.gthumbs[data-v="c"] li span { opacity: 0; transform: translateY(6px); transition: opacity 0.25s, transform 0.25s; font-size: 12px; }
.gthumbs[data-v="c"] li:hover { transform: translateY(-8px) scale(1.04); box-shadow: 0 18px 40px rgb(0 0 0 / 0.6), 0 0 0 2px rgb(255 255 255 / 0.5); z-index: 2; }
.gthumbs[data-v="c"] li:hover span { opacity: 1; transform: none; }
@media (max-width: 860px) {
  .gthumbs[data-v="a"] { grid-template-columns: repeat(2, 1fr); }
  .gthumbs[data-v="a"] li, .gthumbs[data-v="a"] li:nth-child(n) { grid-column: span 1; grid-row: span 1; }
  .gthumbs[data-v="c"] { grid-template-columns: repeat(4, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .gm-track { animation: none; } }
/* Nothing may widen the page: clip (not hidden) keeps position: sticky working */
html, body { overflow-x: clip; }
.hub { overflow: visible; contain: layout; }
/* Games: marquee only; the list stays for screen readers */
.gthumbs[data-v="b"] { display: grid !important; position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* Credits v5: restraint. Type-led nodes, one quiet ring, a dark glass core with a hairline iridescent edge */
.hub-glow, .hn-ic { display: none !important; }
.hub-orbit span:nth-child(1), .hub-orbit span:nth-child(2) { display: none; }
.hub-orbit span:nth-child(3) { width: 68%; height: 82%; aspect-ratio: auto; border: 1px solid rgb(255 255 255 / 0.06); animation: none; }
.hub-orbit span:nth-child(3)::after { display: none; }
.hub-base line { stroke: #2a2a2d; stroke-width: 0.25; }
.hub-flow line { stroke-width: 0.45; }
.hn { background: #000; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 8px 12px; gap: 2px; }
.hn:hover { border-color: transparent; }
.hn:hover b { color: #fff; }
.hn b { font-size: 15px; font-weight: 600; color: var(--fg); }
.hn span { font-size: 12.5px; color: var(--fg-3); }
.hn em { margin-top: 4px; padding: 0; background: none; border-radius: 0; font: 500 10.5px/1 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: #6e6e73; }
.hub-core { background: #0b0b0d padding-box, linear-gradient(120deg, var(--iri-violet), var(--iri-blue), var(--iri-pink)) border-box; border: 1px solid transparent; padding: 22px 34px; box-shadow: 0 0 0 6px #000, 0 0 60px rgb(139 123 255 / 0.22), 0 0 120px rgb(79 179 255 / 0.1); isolation: auto; }
.hub-core::before { content: none; display: none; }
.hub-core b { font-size: 20px; color: #fff; }
.hub-core span:not(.hub-ring) { color: var(--fg-3); }
.hub-core .hub-mark { width: 34px; height: 34px; }
.hub-ring { border-radius: inherit; }

/* Credits v6: a bus diagram. Two inputs, Bridgeplay, five foundations; aligned to one grid */
.credits-v2 .credits-grid { grid-template-columns: 1fr; gap: 44px; }
.credits-v2 .credits-grid > div:first-child { max-width: 40em; }
.bus { --gap: 12px; display: grid; gap: 0; width: 100%; }
.bus-row { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap); position: relative; }
.bus-top { grid-template-columns: repeat(2, 1fr); width: calc(40% + var(--gap) * 0.4); justify-self: center; padding-bottom: 28px; }
.bus-bottom { grid-template-columns: repeat(5, 1fr); padding-top: 28px; }
/* rails: one hairline across the row, ticks from each node, one stem into the core */
.bus-top::after, .bus-bottom::before { content: ""; position: absolute; left: calc(100% / var(--n) / 2); right: calc(100% / var(--n) / 2); height: 1px; background: #2c2c2e; }
.bus-top { --n: 2; } .bus-bottom { --n: 5; }
.bus-top::after { bottom: 14px; } .bus-bottom::before { top: 14px; }
.bn { position: relative; padding: 14px 16px; border-radius: 10px; background: #0c0c0e; border: 1px solid rgb(255 255 255 / 0.07); display: grid; gap: 2px; align-content: start; opacity: 0; transform: translateY(8px); transition: opacity 0.5s var(--ease-out), transform 0.6s var(--ease-out), border-color 0.25s; }
.bus.is-on .bn { opacity: 1; transform: none; }
.bus-top .bn:nth-child(2), .bus-bottom .bn:nth-child(2) { transition-delay: 60ms; }
.bus-bottom .bn:nth-child(3) { transition-delay: 120ms; } .bus-bottom .bn:nth-child(4) { transition-delay: 180ms; } .bus-bottom .bn:nth-child(5) { transition-delay: 240ms; }
.bn:hover { border-color: rgb(255 255 255 / 0.18); }
.bus-top .bn::after, .bus-bottom .bn::before { content: ""; position: absolute; left: 50%; width: 1px; height: 14px; background: #2c2c2e; }
.bus-top .bn::after { top: 100%; } .bus-bottom .bn::before { bottom: 100%; }
.bn b { font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; }
.bn span { font-size: 12.5px; color: var(--fg-3); }
.bn em { margin-top: 8px; font: 500 10.5px/1 var(--mono); font-style: normal; letter-spacing: 0.04em; text-transform: uppercase; color: #6e6e73; }
.bus-core {
  position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px;
  padding: 18px 22px; border-radius: 12px; border: 1px solid transparent;
  background: linear-gradient(#0e0e11, #0e0e11) padding-box, linear-gradient(100deg, var(--iri-violet), var(--iri-blue) 50%, var(--iri-pink)) border-box;
  box-shadow: 0 20px 60px rgb(0 0 0 / 0.6), 0 0 40px rgb(139 123 255 / 0.12);
}
.bus-core::before, .bus-core::after { content: ""; position: absolute; left: 50%; width: 1px; height: 14px; background: #2c2c2e; }
.bus-core::before { bottom: 100%; } .bus-core::after { top: 100%; }
.bus-core .hub-mark { width: 30px; height: 30px; }
.bus-core b { display: block; font-family: "Unbounded", var(--font); font-size: 18px; font-weight: 600; letter-spacing: -0.02em; }
.bus-core div span { font-size: 13px; color: var(--fg-3); }
.bus-core em { font: 500 10.5px/1 var(--mono); font-style: normal; letter-spacing: 0.04em; color: var(--fg-2); padding: 6px 9px; border-radius: 6px; border: 1px solid rgb(255 255 255 / 0.1); }
.bus-pulse { position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; overflow: hidden; }
.bus-pulse::after { content: ""; position: absolute; top: 0; bottom: 0; width: 30%; left: -30%; background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.06), transparent); }
.bus.is-on .bus-pulse::after { animation: bus-sheen 4.5s ease-in-out 1s infinite; }
@keyframes bus-sheen { 0% { left: -30%; } 60%, 100% { left: 110%; } }
@media (max-width: 860px) {
  .bus-top { width: 100%; }
  .bus-bottom { grid-template-columns: repeat(2, 1fr); }
  .bus-bottom .bn:last-child { grid-column: 1 / -1; }
  .bus-bottom::before, .bus-bottom .bn::before { display: none; }
  .bus-core { grid-template-columns: auto 1fr; } .bus-core em { display: none; }
}
@media (prefers-reduced-motion: reduce) { .bn { opacity: 1; transform: none; } .bus-pulse { display: none; } }

/* Responsive pass: nav, bento note, tour on phones */
.bar-links a, .gh, .pill-sm { white-space: nowrap; }
@media (max-width: 1100px) { .bar-inner { gap: 22px; } .bar-links { gap: 20px; } .gh-name { display: none; } .gh { padding-left: 9px; } }
@media (max-width: 960px) { .bar-links { display: none; } .gh { margin-left: auto; } .bar-inner .pill-sm { margin-left: 0; } }
@media (max-width: 600px) {
  .bar-inner { gap: 10px; }
  .wordmark { font-size: 16px; }
  .tile-note { display: none; }
  .s-steam .st-side { display: none; }
  .s-steam { grid-template-columns: 1fr !important; }
}
@media (max-width: 860px) { .checker { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 420px) { .foot-mark { font-size: clamp(40px, 15vw, 64px); overflow-wrap: anywhere; } }
@media (max-width: 420px) {
  .foot-mark { white-space: normal; font-size: inherit; }
  .ck-req { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ck-reqcard { padding: 18px; min-width: 0; }
  .ck-req li { padding: 14px; } .ck-req .rq-v { font-size: 24px; } .ck-req li.rq-wide .rq-v { font-size: 30px; }
}
@media (max-width: 360px) { .gh { display: none; } .bar-inner .pill-sm { margin-left: auto; } .ck-req { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 860px) { .bus-top::after, .bus-top .bn::after { display: none; } }
/* Tour: chapter text ends 48px before the Steam window at every desktop width */
@media (min-width: 861px) {
  .js .chapter:not(.chapter-outro) {
    width: min(26rem, calc(100% - max(var(--gutter), (100% - 1180px) / 2) - min(56%, 780px) - max(var(--gutter), (100% - 1120px) / 2) - 48px));
  }
  .js .chapter h3 { font-size: clamp(24px, 2.6vw, 36px); text-wrap: balance; }
  .js .chapter p { text-wrap: pretty; }
}
/* Tour: size the window by width AND height, so short screens never push it into the title or the chapters */
@media (min-width: 861px) {
  .js .dissect-stage { --tw: min(56%, 780px, calc((100svh - 52px - clamp(56px, 12vh, 132px) - 150px) * 1.5)); }
  .js .tour { width: var(--tw); }
  .js .chapter:not(.chapter-outro) { width: min(26rem, calc(100% - max(var(--gutter), (100% - 1180px) / 2) - var(--tw) - max(var(--gutter), (100% - 1120px) / 2) - 48px)); }
}
@media (min-width: 861px) and (max-height: 760px) {
  .how-title { padding-top: 28px; font-size: clamp(30px, 3.4vw, 46px); }
  .js .dissect-stage { --tw: min(56%, 780px, calc((100svh - 52px - 120px) * 1.5)); }
  .js .chapters { top: 48px; }
}

/* Credits: text only, centered */
.credits-v2 .credits-grid { justify-items: center; text-align: center; }
.credits-v2 .credits-grid > div:first-child { max-width: 36em; margin-inline: auto; }
.credits-v2 .section-lede { margin-inline: auto; }
.credits-v2 .textlink { justify-content: center; }

/* Tour, final placement: the window sits under the title and is sized by the height left, never centered into it */
@media (min-width: 861px) {
  .js .dissect-stage { --tt: calc(clamp(28px, 8vh, 96px) + clamp(34px, 4vw, 54px) * 1.1 + 36px); --tw: min(56%, 780px, calc((100svh - 52px - var(--tt) - 56px) * 1.52)); }
  .how-title { padding-top: clamp(28px, 8vh, 96px) !important; font-size: clamp(34px, 4vw, 54px) !important; }
  .js .tour { top: var(--tt) !important; transform: none !important; width: var(--tw) !important; }
  .js .chapters { top: var(--tt) !important; bottom: 0; height: auto; }
  .js .chapter:not(.chapter-outro) { top: calc(var(--tw) / 1.52 / 2) !important; }
}
/* Tour fix: the chapter list keeps its own flow; it gets at least 300px and the window yields */
@media (min-width: 861px) {
  .js .dissect-stage { --side: max(var(--gutter), (100% - 1180px) / 2); --tw: min(56%, 780px, calc((100svh - 52px - var(--tt) - 56px) * 1.52), calc(100% - var(--side) * 2 - 300px - 48px)); }
  .js .dissect .chapter, .js .dissect .chapter:not(.chapter-outro) { width: auto !important; top: auto !important; }
  .js .dissect .chapters { top: var(--tt) !important; bottom: 0 !important; left: var(--side) !important; width: min(360px, calc(100% - var(--side) * 2 - var(--tw) - 48px)) !important; }
  .js .dissect .tour { width: var(--tw) !important; }
}
@media (min-width: 861px) { .js .dissect .chapters { bottom: calc(100% - var(--tt) - var(--tw) / 1.52) !important; } }
/* Tour: the chapter list starts under the title and only grows downward */
@media (min-width: 861px) {
  .js .dissect .chapters { bottom: 0 !important; justify-content: flex-start !important; padding-top: 8px; }
  .how-title { z-index: 4; }
}
@media (min-width: 861px) and (max-height: 760px) {
  .js .dissect .chapter { padding-block: 9px; }
  .js .dissect .chapter.is-on p { font-size: 15px; line-height: 1.45; }
}
/* Tour on tablets and phones: one column inside the pinned stage. Title, then the window, then the active chapter */
@media (max-width: 860px) {
  .js .dissect-stage { display: flex; flex-direction: column; align-items: center; padding: 18px var(--gutter) 0; box-sizing: border-box; }
  .js .how-title, .how-title { position: static !important; padding: 0 !important; font-size: clamp(28px, 7vw, 40px) !important; text-align: center; }
  .js .dissect .tour, .js .tour { position: relative !important; inset: auto !important; top: auto !important; transform: none !important; margin: 16px auto 0 !important; width: min(100%, calc((100svh - 52px - 18px - 56px - 16px - 230px) * 1.52)) !important; flex: none; }
  .js .dissect .chapters { position: relative !important; inset: auto !important; width: 100% !important; max-width: 40rem; margin: 18px auto 0 !important; padding: 0 !important; justify-content: flex-start !important; }
  .js .dissect .chapter.is-on { padding: 0 0 0 16px; }
  .js .dissect .chapter.is-on h3 { font-size: clamp(22px, 5.6vw, 28px); }
  .js .dissect .chapter.is-on p { font-size: 15.5px; line-height: 1.5; margin-top: 8px; }
  .tour-note { display: none; }
}
/* More air under the tour title */
@media (min-width: 861px) { .js .dissect-stage { --tt: calc(clamp(28px, 8vh, 96px) + clamp(34px, 4vw, 54px) * 1.1 + 60px); } }
@media (min-width: 861px) and (max-height: 760px) { .js .dissect-stage { --tt: calc(24px + clamp(30px, 3.4vw, 46px) * 1.1 + 44px); } .how-title { padding-top: 24px !important; font-size: clamp(30px, 3.4vw, 46px) !important; } }
@media (max-width: 860px) { .js .dissect .tour, .js .tour { margin-top: 28px !important; width: min(100%, calc((100svh - 52px - 18px - 56px - 28px - 230px) * 1.52)) !important; } }
@media (max-width: 860px) {
  .js .dissect .tour, .js .tour { height: auto !important; aspect-ratio: auto !important; display: block; }
  .js .tour .mac { position: relative !important; inset: auto !important; }
  .js .dissect .chapters { margin-top: 22px !important; }
  .mhud { transform: scale(0.72); transform-origin: top right; }
}
@media (max-width: 860px) { .js .dissect .chapter { top: auto !important; bottom: auto !important; transform: none !important; } }
@media (min-width: 861px) and (max-height: 620px) { .js .dissect .chapter { padding-block: 6px; } .js .dissect .chapter h3 { font-size: 19px; } .js .dissect .chapter.is-on h3 { font-size: 23px; } }

/* Tour on tablets and phones: content centered in the pinned screen, a step indicator fills the bottom */
.tour-steps { display: none; }
@media (max-width: 860px) {
  .js .dissect-stage { justify-content: center; padding-bottom: 28px; }
  .js .dissect .chapters { flex: none; min-height: 9.5em; }
  .tour-steps { display: flex; align-items: center; gap: 6px; width: 100%; max-width: 40rem; margin: 22px auto 0; }
  .tour-steps i { flex: 1; height: 3px; border-radius: 2px; background: rgb(255 255 255 / 0.12); transition: background 0.4s; }
  .tour-steps i.is-done { background: rgb(255 255 255 / 0.45); }
  .tour-steps i.is-on { background: linear-gradient(90deg, var(--iri-violet), var(--iri-blue), var(--iri-pink)); }
  .tour-steps span { margin-left: 8px; font: 500 11px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-3); transition: opacity 0.3s; }
  .tour-steps.is-end span { opacity: 0; }
}
@media (max-width: 600px) {
  .pl { gap: 7px; padding: 6px 9px 6px 6px; max-width: 44%; }
  .pl-1 { left: 3%; } .pl-2 { right: 3%; }
  .pl b { display: block; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pl em { font-size: 9.5px; }
  .pl-tag { transform: scale(0.75); transform-origin: left center; margin-right: -8px; }
  .prompts { transform: scale(0.8); transform-origin: center bottom; }
}
@media (min-width: 601px) and (max-width: 860px) { .mhud { transform: none; } }
@media (max-width: 600px) { .prompts { transform: scale(0.66); } .prompts .pr-sep { margin-inline: 4px; } }