/* Layout: the page is a Firefox window in the MyFox themes. Sections are tabs in a
   sticky tab strip, the content is the page card inset from the window frame.
   Colors come from themes/myfox-{light,dark}/manifest.json, the accent from
   --myfox-accent, and the one radius is 5px, like in the tweaks. */
:root {
  --frame: #d9d6d1;
  --toolbar: #eceae6;
  --page: #f4f3f0;
  --field: #fcfbfa;
  --raise: #e0ddd8;
  --line: #cfccc7;
  --text: #212121;
  --muted: #5f6368;
  --accent: #0a84ff;
  --on-accent: #ffffff;
  --shadow: rgba(40, 30, 20, .14);
  --ff-pill: #e3e1dc;

  --r: 5px;
  --f-display: "Golos Text", system-ui, sans-serif;
  --f-body: "Golos Text", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "DejaVu Sans Mono", monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --frame: #2b2c2f;
    --toolbar: #323639;
    --page: #2a2d30;
    --field: #282c2f;
    --raise: #424649;
    --line: #474b4e;
    --text: #d6d7d7;
    --muted: #a5a9ae;
    --accent: #4dabff;
    --on-accent: #0b1a2a;
    --shadow: rgba(0, 0, 0, .45);
    --ff-pill: #3b3f42;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --frame: #2b2c2f;
  --toolbar: #323639;
  --page: #2a2d30;
  --field: #282c2f;
  --raise: #424649;
  --line: #474b4e;
  --text: #d6d7d7;
  --muted: #a5a9ae;
  --accent: #4dabff;
  --on-accent: #0b1a2a;
  --shadow: rgba(0, 0, 0, .45);
  --ff-pill: #3b3f42;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--frame);
  color: var(--text);
  font: 16px/1.6 var(--f-body);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--accent); text-underline-offset: 3px; }
:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; border-radius: var(--r); }
code, kbd, pre { font-family: var(--f-mono); font-size: .88em; }

/* One language at a time; the other one stays in the markup. */
html[data-lang="ru"] body [lang="en"],
html[data-lang="en"] body [lang="ru"] { display: none !important; }

/* ---------- window chrome ---------- */
.chrome {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 20;
  background: var(--frame);
}
body::before {
  content: ""; position: fixed; inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--frame);
}
.tabs {
  display: flex;
  align-items: flex-end;
  gap: 0;
  padding: 6px max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px));
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  position: relative;
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  height: 30px;
  min-width: 92px;
  padding: 0 14px;
  font: 500 11px/1 var(--f-body);
  color: var(--muted);
  text-decoration: none;
  border-radius: var(--r) var(--r) 0 0;
  transition: background .15s, color .15s;
}
.tab + .tab::before {
  content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 1px;
  background: var(--line);
}
.tab:hover { color: var(--text); background: color-mix(in srgb, var(--toolbar) 55%, transparent); }
.tab.is-active {
  color: var(--text);
  background: var(--toolbar);
  z-index: 1;
}
.tab.is-active::before, .tab.is-active + .tab::before { display: none; }
/* The "ears": concave corners that join the active tab to the toolbar. */
.tab.is-active::after {
  content: "";
  position: absolute; bottom: 0; left: -5px; right: -5px; height: 5px;
  background:
    radial-gradient(circle at 0 0, transparent 5px, var(--toolbar) 5.5px) left bottom / 5px 5px no-repeat,
    radial-gradient(circle at 100% 0, transparent 5px, var(--toolbar) 5.5px) right bottom / 5px 5px no-repeat;
  pointer-events: none;
}
.tab .cat-ico { width: 14px; height: 14px; }

.toolbar {
  display: flex; align-items: center; gap: 4px;
  height: 36px;
  padding-block: 0;
  padding-left: max(12px, env(safe-area-inset-left, 0px));
  padding-right: max(12px, env(safe-area-inset-right, 0px));
  background: var(--toolbar);
}
.urlbar {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 8px;
  height: 26px; padding: 0 10px;
  background: var(--field);
  border-radius: var(--r);
  font: 12px/1 var(--f-body);
  color: var(--muted);
  white-space: nowrap; overflow: hidden;
}
.urlbar b { color: var(--text); font-weight: 500; }
.urlbar svg { flex: 0 0 auto; }
.tbtn {
  flex: 0 0 auto;
  height: 24px; min-width: 24px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--r);
  background: transparent; color: var(--text);
  font: 600 11px/1 var(--f-body); letter-spacing: .04em;
  cursor: pointer;
}
.tbtn:hover { background: var(--raise); }
.tbtn svg { width: 16px; height: 16px; }
.langs { flex: 0 0 auto; display: inline-flex; gap: 2px; }
.langs .tbtn { color: var(--muted); font-weight: 500; }
.langs .tbtn[aria-pressed="true"] { background: var(--raise); color: var(--text); font-weight: 700; cursor: default; }

/* ---------- page card ---------- */
.page {
  margin: 0 6px 6px;
  background: var(--page);
  border-radius: 0 0 var(--r) var(--r);
  box-shadow: 0 1px 2px var(--shadow);
}
.wrap {
  max-width: 1120px; margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
section { padding-block: 72px; border-top: 1px solid var(--line); }
section.hero { border-top: 0; padding-block: 56px 64px; }

h1, h2, h3 { text-wrap: balance; margin: 0; }
h2 {
  font: 600 clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem)/1.15 var(--f-display);
  letter-spacing: -.01em;
}
h3 { font: 600 1.05rem/1.3 var(--f-body); }
.lead { font-size: 1.15rem; color: var(--text); max-width: 62ch; }
.sub { color: var(--muted); max-width: 62ch; margin: 12px 0 0; }
p { margin: 0; }
.prose { display: grid; gap: 1em; max-width: 64ch; }

/* ---------- hero ---------- */
.hero-grid { display: grid; gap: 28px; }
.hero h1 {
  font: 700 clamp(2.6rem, 1.6rem + 4.5vw, 4.6rem)/1 var(--f-display);
  letter-spacing: -.035em;
}
.hero h1 .tw { color: var(--accent); }
.hero .lead { font-size: clamp(1.05rem, .95rem + .5vw, 1.3rem); line-height: 1.5; }
.req { font: 12px/1.4 var(--f-mono); color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px 14px; }

/* the install command, styled as an address field */
.cmd {
  display: flex; align-items: stretch;
  max-width: 640px;
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: 0 4px 18px var(--shadow);
}
.cmd pre {
  flex: 1; min-width: 0; margin: 0;
  padding: 14px 16px;
  overflow-x: auto;
  font: 500 clamp(.85rem, .78rem + .35vw, 1.05rem)/1.3 var(--f-mono);
  color: var(--text);
}
.cmd pre .p { color: var(--muted); user-select: none; }
.copy {
  flex: 0 0 auto;
  border: 0; border-left: 1px solid var(--line);
  border-radius: 0 var(--r) var(--r) 0;
  padding: 0 16px;
  background: var(--accent); color: var(--on-accent);
  font: 600 13px/1 var(--f-body);
  cursor: pointer; min-width: 112px;
}
.copy:hover { filter: brightness(1.08); }

/* ---------- before / after ---------- */
.compare-wrap { padding-block: 0 56px; }
.compare {
  position: relative;
  aspect-ratio: 1878 / 1146;
  max-width: 100%;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--frame);
  box-shadow: 0 10px 40px var(--shadow);
  user-select: none;
  touch-action: pan-y;
  --x: 50%;
}
.compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.compare .before { clip-path: inset(0 calc(100% - var(--x)) 0 0); }
.compare .handle {
  position: absolute; top: 0; bottom: 0; left: var(--x);
  width: 2px; margin-left: -1px;
  background: var(--accent);
  pointer-events: none;
}
.compare .handle::after {
  content: "‹ ›";
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: var(--on-accent);
  font: 700 15px/1 var(--f-body); letter-spacing: 2px;
  box-shadow: 0 2px 10px var(--shadow);
}
.compare input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: ew-resize;
}
.compare .tag {
  position: absolute; top: 10px;
  padding: 4px 8px; border-radius: var(--r);
  font: 600 11px/1.2 var(--f-body);
  background: color-mix(in srgb, var(--frame) 88%, transparent);
  color: var(--text);
  pointer-events: none;
}
.compare .tag.l { left: 10px; }
.compare .tag.r { right: 10px; background: var(--accent); color: var(--on-accent); }
.compare-note { margin-top: 12px; font-size: .9rem; color: var(--muted); }

/* ---------- install ---------- */
.install { display: grid; gap: 40px; grid-template-columns: minmax(0, 1fr); }
.modes { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 10px; }
.mode {
  height: 26px; padding: 0 12px;
  border: 0; border-radius: var(--r);
  background: var(--raise); color: var(--text);
  font: 500 12px/1 var(--f-body); cursor: pointer;
}
.mode[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.mode-note { margin-top: 10px; color: var(--muted); font-size: .92rem; min-height: 1.6em; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.facts .card p { color: var(--text); }
.facts .card .k { font: 600 11px/1 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.term {
  overflow-x: auto;
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.term table { border-collapse: collapse; width: 100%; font-size: .92rem; }
.term td { padding: 9px 16px; vertical-align: top; }
.term tr + tr td { border-top: 1px solid var(--line); }
.term td:first-child { white-space: nowrap; font-family: var(--f-mono); font-size: .86rem; color: var(--accent); width: 1%; }
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.split > div { display: grid; gap: 12px; align-content: start; }
.split p { color: var(--muted); }
.split p code { color: var(--text); }

/* ---------- manual ---------- */
.manual { display: grid; gap: 14px; max-width: 64ch; }
.manual p { color: var(--muted); }
.manual p b { color: var(--text); }

/* ---------- footer ---------- */
footer { padding-block: 40px 48px; border-top: 1px solid var(--line); }
.foot { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.foot .cat { width: 44px; height: auto; opacity: .9; }
.foot .bic { font: 600 1rem/1.2 var(--f-display); }
.foot nav { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-left: auto; font-size: .92rem; }
.foot small { display: block; color: var(--muted); font-size: .8rem; margin-top: 2px; }
.cat-ico, .foot .cat { transition: filter .2s; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cat-ico, :root:not([data-theme="light"]) .foot .cat { filter: invert(1); } }
:root[data-theme="dark"] .cat-ico, :root[data-theme="dark"] .foot .cat { filter: invert(1); }

/* ---------- narrow ---------- */
@media (max-width: 860px) {
  .facts, .split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  section { padding-block: 52px; }
  .page { margin: 0 0 0; border-radius: 0; }
  .cmd { flex-direction: column; }
  .copy { border-left: 0; border-top: 1px solid var(--line); border-radius: 0 0 var(--r) var(--r); padding: 12px; }
  .urlbar .path { display: none; }
}

/* ---------- v2: hero on "before", intro, parts ---------- */
.hero h1 { font-size: clamp(2rem, 1.3rem + 3vw, 3.4rem); letter-spacing: -.03em; }
.hero-grid { gap: 14px; }
.hero .sub { margin: 0 0 14px; font-size: 1.05rem; }
.intro { padding-block: 56px; }
.intro-grid { display: grid; gap: 22px; }
.intro h2 { font-size: clamp(2.2rem, 1.6rem + 2.5vw, 3.4rem); letter-spacing: -.035em; }

.hero[data-side="before"] .s-after,
.hero[data-side="after"] .s-before { display: none; }
.compare .tag { transition: opacity .15s; }
.modes-lead { margin: 0 0 10px; color: var(--muted); }


.go {
  display: inline-flex; align-items: center; height: 36px; padding: 0 16px;
  border-radius: var(--r);
  background: var(--accent); color: var(--on-accent);
  font-weight: 600; text-decoration: none;
}
.go:hover { filter: brightness(1.08); }

/* ---------- deck: one screen per slide, the wheel turns slides ---------- */
:root { --chrome-h: 72px; }
.deck {
  margin: 0 6px 6px;
  background: var(--page);
  border-radius: 0 0 var(--r) var(--r);
  box-shadow: 0 1px 2px var(--shadow);
}
.sp { position: relative; overflow: hidden; border-top: 1px solid var(--line); }
.sp:first-child { border-top: 0; }
.sp-in {
  position: relative;
  max-width: 1120px; margin: 0 auto;
  padding-block: 48px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  display: grid; gap: 14px; align-content: start;
}
.eyebrow {
  font: 600 12px/1.3 var(--f-body); letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted);
}

/* first slide */
.intro-line { display: grid; gap: 10px; }
.intro-line h1 { font: 700 clamp(2.2rem, 1.6rem + 2.4vw, 3.4rem)/1 var(--f-display); letter-spacing: -.035em; }
.intro-line .lead { font-size: clamp(1rem, .9rem + .4vw, 1.25rem); max-width: none; }
.cap-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 14px; }
.sp-hero .hero-title { font: 600 1.05rem/1.4 var(--f-body); letter-spacing: 0; }
.sp-hero .sub { margin: 0; font-size: 1.05rem; }

.sp-tour h2 { font-size: clamp(1.4rem, 1rem + 1.6vw, 2.3rem); }
.sp-text .sp-in { align-content: center; gap: 24px; }
.sp-text p { font-size: clamp(1.05rem, .95rem + .45vw, 1.3rem); line-height: 1.55; max-width: 62ch; }
.sp-text .go { justify-self: start; }

/* install and manual */
.sp-install .install { gap: 24px; }
.sp-manual { display: grid; grid-template-rows: 1fr auto; }
.sp-manual .sp-in { align-content: center; }
.sp-manual footer { border-top: 1px solid var(--line); }

.pager { display: none; }

html.deck-on, html.deck-on body { height: 100%; overflow: hidden; }
html.deck-on .deck {
  position: fixed;
  top: calc(var(--chrome-h) + env(safe-area-inset-top, 0px));
  left: 6px; right: 6px; bottom: 6px;
  margin: 0; overflow: hidden;
}
html.deck-on .track { height: 100%; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
html.deck-on .sp { height: 100%; border-top: 0; padding: 0; }
html.deck-on .sp-in { height: 100%; padding-block: 28px; }
html.deck-on .sp-hero .sp-in { grid-template-rows: auto auto minmax(0, 1fr); gap: 10px; }
/* The slider fits the rest of the slide whole: by width or by height, whichever is smaller. */
html.deck-on .cmp-box { container-type: size; min-height: 0; }
html.deck-on .sp-hero .compare { width: min(100cqw, 100cqh * 1878 / 1146); height: auto; }
html.deck-on .sp-tour .sp-in { grid-template-rows: auto minmax(0, 1fr); }
html.deck-on .sp-install, html.deck-on .sp-manual { overflow-y: auto; }
html.deck-on .sp-install .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
html.deck-on .sp-install .card { padding: 16px; }
html.deck-on .sp-install .card p { font-size: .92rem; }
html.deck-on .pager {
  display: flex; flex-direction: column; gap: 8px;
  position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); top: 50%; transform: translateY(-50%);
  z-index: 25;
}
.pager button {
  width: 8px; height: 8px; padding: 0;
  border: 0; border-radius: 4px;
  background: var(--line); cursor: pointer;
  transition: height .2s, background .2s;
}
.pager button[aria-current="true"] { height: 24px; background: var(--accent); }
@media (prefers-reduced-motion: reduce) { html.deck-on .track { transition: none; } }
section.sp { padding-block: 0; }

/* The demo: one heading that stays, slides that turn sideways under it. */
.sp-group { position: relative; border-top: 1px solid var(--line); }
.tour-head {
  max-width: 1120px; margin: 0 auto; padding-top: 48px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  font-size: clamp(1.4rem, 1rem + 1.5vw, 2.2rem);
}
.sp-group .sp { border-top: 0; }
.sp-tour h2 { font: 500 clamp(1.05rem, .9rem + .6vw, 1.4rem)/1.3 var(--f-body); color: var(--text); }
.side { display: none; }

html.deck-on .sp-group { height: 100%; overflow: hidden; border-top: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); }
html.deck-on .tour-head { position: relative; z-index: 3; padding-top: 24px; width: 100%; }
html.deck-on .strip { display: flex; height: 100%; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
html.deck-on .strip > .sp { flex: 0 0 100%; height: 100%; }
html.deck-on .sp-group .sp-in { padding-top: 14px; }
/* the blurred backdrop covers the heading too */
html.deck-on .sp-group { isolation: isolate; }
html.deck-on .side {
  display: grid; place-items: center;
  position: absolute; top: 55%; z-index: 4;
  width: 40px; height: 40px; margin-top: -20px;
  border: 0; border-radius: 50%;
  background: color-mix(in srgb, var(--frame) 80%, transparent); color: var(--text);
  font: 400 26px/1 var(--f-body); cursor: pointer;
  box-shadow: 0 2px 10px var(--shadow);
}
html.deck-on .side:hover { background: var(--accent); color: var(--on-accent); }
html.deck-on .side.prev { left: 14px; }
html.deck-on .side.next { right: 44px; }
html.deck-on .side[disabled] { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { html.deck-on .strip { transition: none; } }
html.deck-on .sp-tour .sp-in { max-width: min(1500px, 100%); padding-left: 72px; padding-right: 72px; }

/* Install command: a compact field, and the note under it keeps its room. */
.cmd { box-shadow: none; }
.cmd pre { padding: 7px 12px; font: 500 14px/1.3 var(--f-mono); }
.copy { min-width: 0; padding: 0 14px; font-size: 12px; }
.mode-note { max-width: 640px; font-size: .9rem; line-height: 1.45; min-height: 0; margin-top: 8px; }
.mode-note[hidden] { display: block; visibility: hidden; }

/* Demo shots: separate cards with rounded corners and a shadow, labels as text. */
.shots { display: flex; gap: 28px; justify-content: center; align-items: flex-start; flex-wrap: wrap; }
.shots.col { flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
.shot { margin: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.shot figcaption {
  align-self: flex-start;
  padding: 3px 10px; border-radius: var(--r);
  background: var(--raise); color: var(--text);
  font: 600 12px/1.4 var(--f-body);
}
.shot:last-child figcaption { background: var(--accent); color: var(--on-accent); }
.shots.row .shot:last-child figcaption { background: var(--accent); }
.shot img {
  display: block; max-width: 100%; height: auto;
  border-radius: var(--r);
  box-shadow: 0 2px 6px var(--shadow), 0 14px 40px var(--shadow);
}
/* In the deck the cards fit the slide: by width or by height, whichever is smaller. */
html.deck-on .shots { height: 100%; container-type: size; flex-wrap: nowrap; align-items: center; }
html.deck-on .shot { flex: 0 0 auto; }
html.deck-on .shots.row .shot img {
  width: auto; height: auto;
  max-width: calc((100cqw - (var(--n) - 1) * 28px) / var(--n));
  max-height: calc(100cqh - 40px);
}
html.deck-on .shots.col { justify-content: center; }
html.deck-on .shots.col .shot img { width: auto; height: auto; max-width: 100cqw; max-height: calc(50cqh - 50px); }

.foot nav { margin-left: 0; }

/* Each demo slide sits on its own shot, blurred. */
.sp-tour .bg {
  position: absolute; inset: -40px;
  width: calc(100% + 80px); height: calc(100% + 80px); max-width: none;
  object-fit: cover;
  filter: blur(30px) saturate(1.2);
  opacity: .5;
}

/* Slider labels: solid chips in the bottom corners, clear of the tab strip in the shots. */
.compare .tag { top: auto; bottom: 12px; padding: 5px 10px; font-size: 12px; box-shadow: 0 2px 10px rgba(0, 0, 0, .3); }
.compare .tag.l { left: 12px; background: var(--text); color: var(--page); }
.compare .tag.r { right: 12px; }

/* Shot labels are plain text, not chips: nothing here is clickable. */
.shot figcaption,
.shot:last-child figcaption,
.shots.row .shot:last-child figcaption {
  padding: 0; border-radius: 0; background: none;
  color: var(--muted);
  font: 600 12px/1.3 var(--f-body); letter-spacing: .08em; text-transform: uppercase;
}
.shot:last-child figcaption, .shots.row .shot:last-child figcaption { color: var(--accent); }

/* The cat lives in the window behind the slides: content passes over it. */
.deck { position: relative; }
.track { position: relative; z-index: 1; }

/* Shot labels: solid chips over the bottom left corner, like on the first slide's slider. */
.shot { position: relative; gap: 0; }
.shot figcaption,
.shot:last-child figcaption,
.shots.row .shot:last-child figcaption {
  position: absolute; left: 12px; bottom: 12px; z-index: 1;
  padding: 5px 10px; border-radius: var(--r);
  background: var(--text); color: var(--page);
  font: 600 12px/1.2 var(--f-body); letter-spacing: 0; text-transform: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .3);
}
.shot:last-child figcaption, .shots.row .shot:last-child figcaption, .shot figcaption.hi {
  background: var(--accent); color: var(--on-accent);
}
html.deck-on .shots.row .shot img { max-height: 100cqh; }
html.deck-on .shots.col .shot img { max-height: calc(50cqh - 14px); }

/* A demo slide blurs whatever is behind it, the cat included, the same way it blurs its shot. */
html.deck-on .sp-tour { -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px); }

/* The same cat, huge and blurred, across the whole background. */
.cat-bg {
  position: absolute; z-index: 0;
  left: 50%; top: 50%;
  height: 130%; width: auto; max-width: none;
  transform: translate(-30%, -50%) rotate(-8deg);
  filter: blur(24px) brightness(0);
  opacity: .05;
  pointer-events: none;
}
.deck { overflow: hidden; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cat-bg { filter: blur(24px); } }
:root[data-theme="dark"] .cat-bg { filter: blur(24px); }
html:not(.deck-on) .cat-bg { position: fixed; height: 130vh; }
.cat-bg { opacity: .08; transform: translate(-65%, -50%) rotate(-8deg); }
.cat-bg { transform: translate(-95%, -50%) rotate(-8deg); }
.cat-bg { transform: translate(-80%, -50%) rotate(-8deg); }
.cat-bg { height: 115%; transform: translate(-88%, -50%) rotate(-8deg); }
html:not(.deck-on) .cat-bg { height: 115vh; }

/* Soft edges for the demo backdrop: the blurred shot and the blur of what is behind
   the slide fade out towards every edge, so neighbouring slides and the page meet smoothly. */
html.deck-on .sp-tour { -webkit-backdrop-filter: none; backdrop-filter: none; }
.sp-tour::before, .sp-tour .bg {
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 18%, #000 82%, transparent),
    linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent, #000 18%, #000 82%, transparent),
    linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
  mask-composite: intersect;
}
html.deck-on .sp-tour::before {
  content: ""; position: absolute; inset: 0;
  -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px);
  pointer-events: none;
}
.sp-tour .bg { inset: 0; width: 100%; height: 100%; }


/* Slogans: big lines at the bottom of a slide that run a little onto its screenshot. */
.slogan, .sp-tour h2 {
  font: 700 clamp(1.6rem, .9rem + 2.2vw, 3rem)/1.1 var(--f-display); letter-spacing: -.02em;
  color: var(--text); text-align: center;
  max-width: 34ch; justify-self: center;
  position: relative; z-index: 2;
  text-shadow: 0 0 4px var(--page), 0 0 14px var(--page), 0 0 32px var(--page);
}
html.deck-on .sp-tour .sp-in { grid-template-rows: minmax(0, 1fr) auto; gap: 0; }
html.deck-on .sp-tour .shots { grid-row: 1; }
html.deck-on .sp-tour h2 { grid-row: 2; margin-top: -.6em; }

/* The first section: two slides in one place, the second dissolves over the first. */
.sp-stack { position: relative; }
.sp-stack .intro-line {
  max-width: 1120px; margin: 0 auto; padding-top: 48px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.hero-shot img {
  display: block; max-width: 100%; height: auto; margin: 0 auto;
  border-radius: var(--r);
  box-shadow: 0 2px 6px var(--shadow), 0 14px 40px var(--shadow);
}
.hint { display: none; }

html.deck-on .sp-stack { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr); }
html.deck-on .sp-stack .intro-line { width: 100%; padding-top: 24px; }
html.deck-on .layers { position: relative; min-height: 0; }
html.deck-on .layers > .sp {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity .7s ease, visibility .7s;
}
html.deck-on .layers > .sp.is-on { opacity: 1; visibility: visible; }
html.deck-on .sp-hero .sp-in { grid-template-rows: minmax(0, 1fr) auto; gap: 0; padding-top: 14px; padding-bottom: 84px; }
html.deck-on .hero-shot { container-type: size; min-height: 0; display: grid; place-items: center; }
html.deck-on .hero-shot img { width: min(100cqw, 100cqh * 1878 / 1146); max-width: none; }
html.deck-on .sp-hero .slogan { margin-top: -.6em; }

/* What to do next: turn the wheel, or click here. */
html.deck-on .hint {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  position: absolute; left: 50%; bottom: 14px; z-index: 3; transform: translateX(-50%);
  padding: 6px 12px; border: 0; border-radius: var(--r);
  background: none; color: var(--muted); cursor: pointer;
  font: 600 12px/1.2 var(--f-body);
}
html.deck-on .hint:hover { color: var(--accent); }
.hint .wheel { animation: wheel 1.6s ease-in-out infinite; }
@keyframes wheel {
  0% { transform: translateY(0); opacity: 1; }
  70% { transform: translateY(9px); opacity: 0; }
  100% { transform: translateY(0); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html.deck-on .layers > .sp { transition: none; }
  .hint .wheel { animation: none; }
}

/* Slogans as solid frosted plates over the bottom of the screenshot, not glowing text. */
.slogan, .sp-tour h2 {
  font: 800 clamp(1.7rem, .9rem + 2.4vw, 3.3rem)/1.05 var(--f-display); letter-spacing: -.03em;
  text-shadow: none; text-wrap: balance;
  max-width: 24ch; padding: .32em .6em .38em; border-radius: 14px;
  background: color-mix(in srgb, var(--page) 74%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 12px 44px var(--shadow);
}
html.deck-on .sp-tour h2, html.deck-on .sp-hero .slogan { margin-top: -1em; }

/* First the stock interface, said quietly; then the answer, loud. */
.sp-hero:not(.yes) .slogan { font-weight: 700; color: var(--muted); }
.sp-hero.yes .slogan {
  font-size: clamp(2rem, 1rem + 3.2vw, 4.4rem);
  background: var(--accent); color: var(--on-accent);
  box-shadow: 0 16px 60px color-mix(in srgb, var(--accent) 45%, transparent);
}
html.deck-on .layers > .sp.yes .hero-shot img { transform: scale(1.04); transition: transform 1.1s cubic-bezier(.2, .7, .2, 1); }
html.deck-on .layers > .sp.yes.is-on .hero-shot img { transform: none; }
html.deck-on .layers > .sp.yes.is-on .slogan { animation: pop .7s .35s both cubic-bezier(.2, 1.5, .4, 1); }
@keyframes pop { from { transform: scale(.55); opacity: 0; } to { transform: none; opacity: 1; } }

/* The mouse hint sits on the slide, in the bottom right corner. */
html.deck-on .sp-hero .sp-in { padding-bottom: 28px; }
html.deck-on .hint {
  left: auto; right: 24px; bottom: 20px; transform: none;
  padding: 10px 12px 8px; border-radius: 12px;
  background: color-mix(in srgb, var(--page) 70%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 6px 24px var(--shadow);
  color: var(--text);
}
@media (prefers-reduced-motion: reduce) {
  html.deck-on .layers > .sp.yes .hero-shot img { transform: none; transition: none; }
  html.deck-on .layers > .sp.yes.is-on .slogan { animation: none; }
}
html.deck-on .sp-group, html.deck-on .sp-stack { grid-template-columns: minmax(0, 1fr); }

/* Slogans without plates: the bottom of the screenshot fades into the page and the line sits on that fade. */
.slogan, .sp-tour h2 {
  font: 800 clamp(1.5rem, .8rem + 1.9vw, 2.7rem)/1.1 var(--f-display); letter-spacing: -.025em;
  color: var(--text);
  max-width: 30ch; padding: 0; border-radius: 0;
  background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
}
html.deck-on .sp-tour h2, html.deck-on .sp-hero .slogan { margin-top: -1.3em; }
html.deck-on .hero-shot img,
html.deck-on .shots.row .shot img,
html.deck-on .shots.col .shot:last-child img {
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 98%);
  mask-image: linear-gradient(to bottom, #000 72%, transparent 98%);
}
html.deck-on .shots.row { align-items: flex-end; }
/* the Before / After chips go to the top, clear of the fade */
.shot figcaption, .shot:last-child figcaption, .shots.row .shot:last-child figcaption { top: 12px; bottom: auto; }

/* First the stock interface, said quietly; then the answer, in full voice. */
.sp-hero:not(.yes) .slogan { font-weight: 600; color: var(--muted); }
.sp-hero.yes .slogan {
  font-size: clamp(1.9rem, 1rem + 2.8vw, 3.8rem);
  background: none; color: var(--text); box-shadow: none;
}
@keyframes pop { from { transform: translateY(.4em); opacity: 0; } to { transform: none; opacity: 1; } }

/* Before / After chips sit just above their shot, so they cover nothing in it. */
.shot figcaption, .shot:last-child figcaption, .shots.row .shot:last-child figcaption {
  top: auto; bottom: calc(100% + 8px); left: 0;
  box-shadow: none;
}
html.deck-on .sp-tour .shots { padding-top: 30px; }
html.deck-on .shots.row .shot img { max-height: calc(100cqh - 30px); }
/* Low shots stacked in a column: they sit right over the slogan, and nothing fades. */
html.deck-on .shots.col { justify-content: flex-end; gap: 40px; }
html.deck-on .shots.col .shot img { max-height: calc((100cqh - 30px - 40px) / 2); }
html.deck-on .shots.col .shot:last-child img { -webkit-mask-image: none; mask-image: none; }
html.deck-on .sp-tour .sp-in:has(.shots.col) h2 { margin-top: 28px; }
html.deck-on .hero-shot img,
html.deck-on .shots.row .shot img {
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 94%);
  mask-image: linear-gradient(to bottom, #000 62%, transparent 94%);
}
html.deck-on .sp-tour h2, html.deck-on .sp-hero .slogan { margin-top: -1.1em; }

/* The first section opens with plain text: what MyFox is. */
html.deck-on .sp-stack { grid-template-rows: minmax(0, 1fr); }
.sp-intro .sp-in { align-content: center; gap: 20px; }
.sp-intro h1 { font: 800 clamp(3rem, 1.6rem + 6vw, 7rem)/1 var(--f-display); letter-spacing: -.04em; }
.sp-intro .lead { font-size: clamp(1.15rem, .9rem + .9vw, 1.7rem); line-height: 1.4; max-width: 34ch; }
.sp-intro .go { justify-self: start; margin-top: 8px; font: inherit; border: 0; cursor: pointer; }
html.deck-on .sp-hero .sp-in { padding-top: 28px; }
.sp-hero:not(.yes) .slogan { font-weight: 700; color: var(--text); }
.sp-hero.yes .slogan { color: var(--accent); font-weight: 900; }

/* Text-only slides between the shots. */
.sp-say .sp-in { align-content: center; justify-items: center; }
.say {
  font: 800 clamp(2rem, 1rem + 3.4vw, 4.6rem)/1.08 var(--f-display); letter-spacing: -.03em;
  text-align: center; max-width: 18ch; text-wrap: balance;
}
.sp-hero:not(.yes) .slogan { font-size: clamp(1.3rem, .8rem + 1.5vw, 2.2rem); max-width: 40ch; }

/* The opening slides blur as they dissolve into each other. */
html.deck-on .layers > .sp { filter: blur(14px); transition: opacity .8s ease, filter .8s ease, visibility .8s; }
html.deck-on .layers > .sp.is-on { filter: none; }
@media (prefers-reduced-motion: reduce) { html.deck-on .layers > .sp { filter: none; transition: none; } }

/* Idle: the arrows blink, so it is clear where to go on. */
html.deck-on.idle .side:not([disabled]) { animation: beckon 1.8s ease-in-out infinite; }
@keyframes beckon {
  0%, 100% { background: color-mix(in srgb, var(--frame) 80%, transparent); color: var(--text); box-shadow: 0 2px 10px var(--shadow); }
  50% { background: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 22%, transparent), 0 2px 10px var(--shadow); }
}
@media (prefers-reduced-motion: reduce) { html.deck-on.idle .side:not([disabled]) { animation: none; } }

/* Between the opening stack and the next section the page dissolves instead of sliding. */
html.deck-on .track { transition: transform .6s cubic-bezier(.2, .7, .2, 1), opacity .4s ease, filter .4s ease; }
html.deck-on .track.swap { opacity: 0; filter: blur(14px); }

/* Low shots in a column do not fill the slide: they and the slogan stand together in the middle. */
html.deck-on .sp-tour .sp-in:has(.shots.col) { grid-template-rows: auto auto; align-content: center; }
html.deck-on .sp-tour .shots.col { height: auto; container-type: inline-size; }
html.deck-on .sp-tour .shots.col .shot img { max-height: none; }

/* Every demo slide: the shots and the slogan stand together in the middle of the slide,
   the shots as large as the slide allows once room for the labels and the slogan is kept. */
html.deck-on .sp-tour .sp-in,
html.deck-on .sp-tour .sp-in:has(.shots.col) {
  --cap: 8rem;
  container-type: size;
  grid-template-rows: auto auto; align-content: center;
}
html.deck-on .sp-tour .shots, html.deck-on .sp-tour .shots.col { height: auto; container-type: normal; }
html.deck-on .sp-tour .shots.row .shot img {
  max-width: calc((100cqw - (var(--n) - 1) * 28px) / var(--n));
  max-height: calc(100cqh - 30px - var(--cap));
}
html.deck-on .sp-tour .shots.col .shot img {
  max-width: 100cqw;
  max-height: calc((100cqh - 30px - 40px - var(--cap)) / 2);
}
html.deck-on .shots.row { align-items: flex-start; }
.foot nav a { display: inline-flex; align-items: center; gap: 7px; }
.foot nav .gh { width: 1.1em; height: 1.1em; flex: none; }