/* Homepage. The first screen is a game title screen: the brand mark and a
   menu rail at the left, the name plate, Offset's mascot lit from the upper
   right, and four selectable slots that open the real tools. The shared base
   (tokens, type, buttons, nav, footer, viewer) is in site.css, loaded first. */

/* Homepage sections sit in the shared column. */
main > section {
  width: min(100% - 2 * var(--gutter), var(--page));
  margin-inline: auto;
}

/* Section titles carry a warm rule out to the column edge, like a menu screen. */
main h2 { display: flex; align-items: center; gap: 1.25rem; }
main h2::after { content: ""; flex: 1 1 2rem; height: 1px; background: var(--line); }

/* Title screen ------------------------------------------------------------ */

.hero {
  --menu-size: clamp(1rem, 0.55rem + 0.85vw, 1.4rem);
  position: relative;
  isolation: isolate;
  height: clamp(42rem, 100svh, 70rem);
  overflow: clip;
  background: var(--backdrop);
}
.hero::after {
  content: "";
  position: absolute;
  left: 2.3%;
  right: 2.3%;
  bottom: 3.6%;
  height: 1px;
  background: var(--line);
  z-index: 3;
}

.hero__light {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 100% 0;
  pointer-events: none;
  user-select: none;
}

.hero__platforms {
  position: absolute;
  top: 2.6%;
  right: 2.3%;
  z-index: 4;
  color: var(--text);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 0.35rem 0.75rem;
  background: rgb(11 10 9 / 0.82);
  box-shadow: inset 0 0 0 1px var(--line);
}

/* On the title screen the primary nav becomes the menu rail. */
.home .bar {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 6;
  width: auto;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  margin: 0;
  padding: clamp(1.5rem, 3.6vh, 2.4rem) 0 0 2.3vw;
}
.home .wordmark { margin: 0 0 clamp(2.5rem, 7.5vh, 4.5rem); }
.home .wordmark svg { width: 3.4rem; }
.home .wordmark__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.home .bar__links {
  position: relative;
  flex-direction: column;
  gap: clamp(0.9rem, 3.4vh, 2rem);
  padding: 0.4rem 0 clamp(1.4rem, 4vh, 2.2rem) 0.15rem;
}
.home .bar__links::before {
  content: "";
  position: absolute;
  left: 0.56rem;
  top: -0.9rem;
  bottom: -5.2rem;
  width: 1px;
  background: var(--line-strong);
}
.home .bar__links a {
  gap: 1.35rem;
  color: var(--text);
  font-size: var(--menu-size);
  font-weight: 500;
  transition: color 140ms ease, translate 260ms var(--ease);
}
.home .bar__links a::before {
  width: 0.62rem;
  height: 0.62rem;
  background: var(--backdrop);
  box-shadow: inset 0 0 0 1.5px var(--text);
  opacity: 1;
}
.home .bar__links a:hover { translate: 0.35rem 0; }
.home .bar__links a:hover::before { background: var(--vermilion); box-shadow: inset 0 0 0 1.5px var(--vermilion); }

/* The separator under the menu, then the selected Buy item. */
.home .bar__links::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 13.5vw;
  height: 1px;
  background: var(--line-strong);
}
.home .bar__buy {
  margin-top: clamp(1.4rem, 3.6vh, 2.1rem);
  margin-left: -0.15rem;
  min-height: clamp(2.75rem, 5.5vh, 3.4rem);
  padding-inline: calc(1.6rem + 1.7rem) 2.2rem;
  isolation: isolate;
  /* The selected item's filled diamond sits on the rail. */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 0 10 5 5 10 0 5z' fill='%23e5482d'/%3E%3C/svg%3E") 0.27rem 50% / 1rem 1rem no-repeat;
  gap: 0;
  font-size: var(--menu-size);
  font-weight: 650;
  clip-path: none;
}
.home .bar__buy:hover { background-color: transparent; }
/* The plate is slanted at both ends and sits behind the label. */
.home .bar__buy::before {
  content: "";
  position: absolute;
  inset: 0 0 0 1.6rem;
  z-index: -1;
  background: var(--vermilion-fill);
  clip-path: polygon(0.9rem 0, 100% 0, calc(100% - 0.9rem) 100%, 0 100%);
  transition: background-color 140ms ease;
}
.home .bar__buy:hover::before { background: var(--vermilion-hover); }
.home .bar__buy::after { content: "\00a0\00b7\00a0US$69"; }

/* Name plate and tagline. */
.hero__copy {
  position: absolute;
  left: 18.6%;
  top: 16%;
  z-index: 4;
  width: min(34%, 36rem);
}
.hero__title { display: grid; justify-items: start; gap: clamp(0.4rem, 1.2vh, 0.9rem); }
.plate {
  position: relative;
  display: block;
  padding: 0.12em 0.42em 0.16em 0.3em;
  margin-left: -0.32em;
  font-family: "Saira", "Archivo", sans-serif;
  font-size: clamp(4rem, 7.8vw, 8.75rem);
  font-style: italic;
  font-weight: 900;
  font-stretch: 108%;
  line-height: 0.9;
  letter-spacing: -0.01em;
  color: var(--text);
}
.plate__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.plate__frame path {
  fill: rgb(11 10 9 / 0.55);
  stroke: var(--vermilion);
  stroke-width: 3px;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: miter;
}
.plate__name { position: relative; }
.hero__tagline {
  display: block;
  max-width: 13em;
  font-size: clamp(1.5rem, 0.6rem + 1.9vw, 2.6rem);
  font-style: italic;
  font-weight: 700;
  font-stretch: 100%;
  line-height: 1.08;
}
.hero__sub {
  margin-top: clamp(0.9rem, 2.2vh, 1.4rem);
  color: rgb(243 234 217 / 0.86);
  font-size: clamp(1rem, 0.55rem + 0.75vw, 1.3rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1.35;
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.7);
}
.hero__sub span { display: block; white-space: nowrap; }
.hero__tagline::after {
  content: "";
  display: block;
  width: 3.6rem;
  height: 0.3rem;
  margin-top: clamp(0.8rem, 2vh, 1.2rem);
  background: var(--vermilion);
  transform: skewX(-24deg);
  transform-origin: left;
}
/* The menu rail carries Buy and Try it on wide screens. */
.hero__actions { display: none; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }

/* The mascot stands lit from the upper right, cropped by the slots. */
.hero__stand {
  position: absolute;
  left: max(35%, calc(18.6% + 16rem));
  top: 0.5%;
  z-index: 1;
  height: 108%;
  aspect-ratio: 4 / 5;
}
.hero .host:not(.is-corner) .host__art {
  filter: drop-shadow(5px -3px 10px rgb(240 150 64 / 0.32)) drop-shadow(-12px 16px 30px rgb(0 0 0 / 0.55));
}

/* Slots: four tools, the first selected until another is pointed at. */
.slots {
  position: absolute;
  left: 2.3%;
  right: 2.3%;
  top: 63.2%;
  bottom: 6.4%;
  z-index: 3;
}
.slots ul {
  display: grid;
  grid-template-columns: 384fr 323fr 349fr 346fr;
  align-items: end;
  gap: 1.1vw;
  height: 100%;
}
.slots li { height: 100%; }

.slot {
  --frame: var(--line-strong);
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 0.2rem;
  height: 100%;
  padding: 6% 6% 0;
  background: rgb(11 10 9 / 0.84);
  box-shadow: inset 0 0 0 1px var(--frame);
  border-radius: 3px;
  text-decoration: none;
  transition: box-shadow 220ms var(--ease), background-color 200ms ease;
}
.slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 0 0;
  box-shadow: 0 0 0 1px rgb(232 196 140 / 0.1);
  transition: filter 200ms ease;
  filter: saturate(0.9) brightness(0.86);
}
.slot__label {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-height: clamp(2.75rem, 7.5vh, 4.25rem);
  font-size: clamp(1rem, 0.6rem + 0.85vw, 1.45rem);
  font-weight: 500;
}
.slot__label svg {
  flex: none;
  width: 1.3em;
  height: 1.3em;
  fill: none;
  stroke: var(--mark);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.slot__label .slot__go { width: 1em; margin-left: auto; stroke: var(--text); opacity: 0.8; transition: translate 260ms var(--ease); }

.slot:hover, .slot:focus-visible,
.slots ul:not(:has(.slot:hover, .slot:focus-visible)) li:first-child .slot {
  --frame: var(--vermilion);
  background: rgb(20 12 10 / 0.88);
}
.slot:hover, .slot:focus-visible,
.slots ul:not(:has(.slot:hover, .slot:focus-visible)) li:first-child .slot {
  box-shadow: inset 0 0 0 1.5px var(--frame), 0 0 0 1px rgb(229 72 45 / 0.35), 0 10px 34px -6px rgb(229 72 45 / 0.45);
}
.slot:hover img, .slot:focus-visible img,
.slots ul:not(:has(.slot:hover, .slot:focus-visible)) li:first-child .slot img { filter: none; }
.slot:hover, .slot:focus-visible,
.slots ul:not(:has(.slot:hover, .slot:focus-visible)) li:first-child .slot .slot__label > svg:first-child { stroke: var(--vermilion); }
.slot:hover .slot__go, .slot:focus-visible .slot__go { translate: 0.25rem 0; }
.slot:focus-visible { outline: none; }

/* The title screen settles in once: light, then menu, then slots. */
@keyframes light-in { from { opacity: 0.35; scale: 1.04; } }
@keyframes menu-in { from { translate: -0.9rem 0; opacity: 0.4; } }
@keyframes slot-in { from { translate: 0 1.25rem; opacity: 0.4; } }

/* Workbench: the real app, flat and full width under its title. */

.screens { padding-top: clamp(4rem, 7vw, 6rem); }
.screens h2 { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.hero__screen { position: relative; }

.screen-switch { display: flex; margin-top: 1rem; }
.screen-switch + figcaption { margin-top: 0.75rem; }

.segmented {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--control);
  background: var(--field);
}
.segmented button {
  min-height: 2rem;
  padding: 0 0.95rem;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
}
.segmented button:hover { color: var(--text); }
.segmented button[aria-pressed="true"] { background: var(--vermilion-fill); color: #fff; }

.hero__frames { display: grid; }
.hero__frames > .shot { grid-area: 1 / 1; transition: opacity 220ms ease; }
.hero__frames > .shot[data-screen-shot="discover"] { opacity: 0; visibility: hidden; }
.hero__frames.is-discover > .shot[data-screen-shot="scanner"] { opacity: 0; visibility: hidden; }
.hero__frames.is-discover > .shot[data-screen-shot="discover"] { opacity: 1; visibility: visible; }

/* Workflow recording, with its steps on a menu rail. */

.workflow {
  display: grid;
  grid-template-columns: minmax(0, 2.1fr) minmax(16rem, 1fr);
  grid-template-areas: "title title" "video steps";
  column-gap: clamp(2rem, 4vw, 3.5rem);
  row-gap: 2rem;
  padding-top: var(--section);
}
.workflow h2 { grid-area: title; }
.workflow__video { grid-area: video; }

video {
  width: 100%;
  aspect-ratio: 3 / 2;
  background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--line);
}

.workflow__steps { position: relative; grid-area: steps; counter-reset: step; align-self: start; }
.workflow__steps::before {
  content: "";
  position: absolute;
  left: 0.95rem;
  top: 0.9rem;
  bottom: 1.6rem;
  width: 1px;
  background: var(--line-strong);
}
.workflow__steps li {
  position: relative;
  counter-increment: step;
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  row-gap: 0.15rem;
  padding: 0.9rem 0;
}
.workflow__steps li:first-child { padding-top: 0.25rem; }
.workflow__steps li::before {
  content: counter(step);
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  background: var(--backdrop);
  box-shadow: inset 0 0 0 1px var(--mark);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  color: var(--mark);
  font-size: 0.8125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.workflow__steps li::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0.9rem;
  width: 1.9rem;
  height: 1.9rem;
  border: 1px solid var(--mark);
  rotate: 45deg;
  scale: 0.7;
  pointer-events: none;
}
.workflow__steps li:first-child::after { top: 0.25rem; }
.workflow__steps strong { font-weight: 650; font-size: 1.0625rem; }
.workflow__steps span { color: var(--muted); font-size: 0.9375rem; }

/* Try it: the browser toy, framed like an in-game HUD. */

.try {
  display: grid;
  grid-template-columns: minmax(15rem, 0.8fr) minmax(0, 2fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
  padding-top: var(--section);
}
.try__copy h2 { margin-bottom: 0.25rem; }
.try__copy p { margin-top: 1rem; color: var(--muted); }
.try__copy p.fine { font-size: 0.9375rem; }

.toy {
  display: grid;
  grid-template-columns: minmax(12rem, 0.75fr) minmax(0, 1.6fr);
  gap: 8px;
  padding: 8px;
  background: #080706;
  box-shadow: inset 0 0 0 1px var(--line-strong);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
}

.toy__game, .toy__scan { padding: 1.25rem; }

.toy__label { color: var(--muted); font-size: 0.875rem; }

.toy__hp {
  margin-top: 0.5rem;
  font-size: 3.25rem;
  font-weight: 750;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.toy__hp small { margin-left: 0.3rem; font-size: 1rem; font-weight: 500; color: var(--muted); }
.toy__hp.is-hacked span { color: var(--green); }

.toy__bar {
  height: 8px;
  margin-top: 1rem;
  background: var(--field);
  overflow: hidden;
  transform: skewX(-24deg);
}
.toy__bar span {
  display: block;
  height: 100%;
  background: var(--vermilion);
  transform-origin: left;
  transition: transform 260ms var(--ease);
}
.toy__bar.is-over span { background: var(--green); }

.toy__moves { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.25rem; }

.toy__game.is-hit { animation: hit 260ms ease; }
@keyframes hit {
  30% { transform: translateX(-3px); }
  60% { transform: translateX(3px); }
}

.toy__fields {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  align-items: center;
  gap: 0.5rem 0.75rem;
}
.toy__fields label { color: var(--muted); font-size: 0.875rem; }
.toy input, .toy select {
  width: 100%;
  min-height: 2.25rem;
  padding: 0 0.7rem;
  border: 1px solid transparent;
  border-radius: 3px;
  background: var(--field);
  color: var(--text);
  font: inherit;
  font-size: 0.9375rem;
}
.toy input { font-family: var(--mono); }
.toy input:focus, .toy select:focus { outline: none; border-color: var(--mark); }
.toy input:disabled, .toy select:disabled { opacity: 0.45; }

.toy__go { display: flex; gap: 0.5rem; margin-top: 1rem; }

.toy__count { margin-top: 1rem; font-size: 0.9375rem; color: var(--muted); }
.toy__count strong { color: var(--text); font-weight: 650; font-variant-numeric: tabular-nums; }
.toy__count.is-error strong { color: var(--vermilion-hover); }

.toy__note { min-height: 1.5em; font-size: 0.875rem; color: var(--mark); }

.toy__results { margin-top: 0.75rem; overflow-x: auto; }
.toy table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.toy th {
  padding: 0.45rem 0.6rem;
  background: var(--raised);
  color: var(--muted);
  font-weight: 500;
  text-align: left;
}
.toy td { padding: 0.4rem 0.6rem; white-space: nowrap; border-bottom: 1px solid rgb(232 196 140 / 0.07); }
.toy td:first-child, .toy td:nth-child(2) { font-family: var(--mono); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.toy td:nth-child(3) { color: var(--muted); }
.toy td.more { color: var(--muted); font-family: inherit; white-space: normal; }
.toy tr.is-origin td:nth-child(3) { color: var(--green); }
.toy tr.is-flash td { animation: flash 900ms ease; }
@keyframes flash { from { background: rgb(229 72 45 / 0.22); } }
.toy [data-investigate] { margin-top: 0.75rem; }

/* Copycats: Discover beside its explanation. */

.copycats {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(16rem, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
  padding-top: var(--section);
}
/* Cropped to the candidate list and side panel; the link opens the whole window. */
.copycats__shot .shot { aspect-ratio: 5 / 4; }
.copycats__shot .shot img { height: 100%; object-fit: cover; object-position: 100% 12%; }
.copycats__text p { margin-top: 1rem; color: var(--muted); }
.copycats__text p.fine { font-size: 0.9375rem; }

/* Tour: the recording carries the section; the text sits above it. */

.tour { padding-top: var(--section); }
.tour__text p { margin-top: 1rem; max-width: 40rem; color: var(--muted); }
.tour__video { margin-top: 2rem; }

/* Capabilities, grouped like a game's ability lists. */

.tools { padding-top: var(--section); }

.tools__groups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
  margin-top: 2.5rem;
}
.tools__group h3 { display: flex; align-items: center; gap: 0.7rem; font-size: 1rem; font-weight: 700; }
.tools__group h3::before { content: ""; width: 0.55rem; height: 0.55rem; rotate: 45deg; background: var(--mark); }
.tools__group h3:not(:first-child) { margin-top: 2.5rem; }
.tools dl { margin-top: 1.1rem; display: grid; gap: 1.35rem; padding-left: 1.25rem; border-left: 1px solid var(--line); }
.tools dt { font-weight: 650; }
.tools dd { margin-top: 0.25rem; color: var(--muted); font-size: 0.9375rem; }

/* Trainers */

.trainers {
  display: grid;
  grid-template-columns: minmax(16rem, 1fr) minmax(0, 1.35fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
  padding-top: var(--section);
}
.trainers__text p { margin-top: 1rem; color: var(--muted); }
.trainers__text p.fine { margin-top: 1.25rem; }

.skins__picker { margin: 0 0 1rem; padding: 0; border: 0; min-width: 0; }
.skins__choices { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.skins__choices label { position: relative; }
.skins__choices input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.skins__choices span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.1rem;
  padding: 0 0.75rem;
  background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--muted);
  font-size: 0.8438rem;
  font-weight: 500;
  transition: box-shadow 160ms ease, color 160ms ease;
}
.skins__choices input:hover + span { color: var(--text); box-shadow: inset 0 0 0 1px var(--line-strong); }
.skins__choices input:checked + span { color: var(--text); box-shadow: inset 0 0 0 2px var(--vermilion); }
.skins__choices input:focus-visible + span { outline: 2px solid var(--mark); outline-offset: 2px; }

.swatch {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--s1) 0 50%, var(--s2) 50% 75%, var(--s3) 75%);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.14);
}

/* The trainer screenshot keeps its title bar out of view, as on the earlier page. */
.shot--trainer { aspect-ratio: 1440 / 1080; }
.shot--trainer img { height: 100%; object-fit: cover; object-position: 50% 100%; }

/* Library: the game pages as save slots. */

.library { padding-top: var(--section); }
.library__head p { margin-top: 0.75rem; color: var(--muted); max-width: 38rem; }

.library__games {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin: 2rem 0 1.75rem;
}
.library__games a {
  display: grid;
  height: 100%;
  padding: 0.6rem 0.6rem 0.9rem;
  background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--line);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  text-decoration: none;
  transition: box-shadow 200ms var(--ease);
}
.library__games img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: 50% var(--y, 50%);
  background: var(--raised);
}
.library__name { display: block; margin-top: 0.85rem; padding-inline: 0.25rem; font-weight: 650; }
.library__pack { display: block; padding-inline: 0.25rem; color: var(--muted); font-size: 0.875rem; }
.library__games a:hover, .library__games a:focus-visible { box-shadow: inset 0 0 0 2px var(--vermilion); outline: none; }

/* Price: an unlock screen with one action. */

.price {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(16rem, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
  margin-top: var(--section);
  padding: clamp(2rem, 4vw, 3.5rem);
  background:
    radial-gradient(120% 140% at 100% 0, rgb(232 176 78 / 0.13), transparent 55%),
    var(--panel);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px));
}
.price h2::after { display: none; }
.price__lead { margin: 1rem 0 1.75rem; max-width: 30rem; color: var(--muted); font-size: 1.125rem; }
.price__amount { color: var(--mark); font-weight: 700; }
.price__facts { display: grid; gap: 0.75rem; align-content: start; color: var(--muted); font-size: 0.9375rem; }
.price__facts li { position: relative; padding-left: 1.4rem; }
.price__facts li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.55em;
  width: 0.45rem;
  height: 0.45rem;
  rotate: 45deg;
  box-shadow: inset 0 0 0 1.5px var(--mark);
}

/* Mascot. One figure: he stands in the hero, then moves to the bottom-right
   corner once the hero scrolls away. The cut torso edge always sits on a floor
   (the window top, then the viewport bottom). Layers own placement, ducking,
   pose and smoke separately so none of them can lift him off it. */

.host {
  --ember-x: 38.8%;
  --ember-y: 32.5%;
  --corner-w: clamp(6.5rem, 10vw, 9.5rem);
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.host.is-corner {
  position: fixed;
  left: auto;
  right: clamp(0.25rem, 1.5vw, 1.5rem);
  z-index: 40;
  width: var(--corner-w);
  height: calc(var(--corner-w) * 1.25);
}
.host.is-corner.is-arriving .host__body { animation: host-arrive 380ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }

.host__body {
  position: relative;
  width: 100%;
  height: 100%;
  transition: translate 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.host__rig { position: relative; height: 100%; transform-origin: 50% 100%; }
.host__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}
.host:not([data-pose]) [data-pose-img="idle"],
.host[data-pose="idle"] [data-pose-img="idle"],
.host[data-pose="out"] [data-pose-img="out"],
.host[data-pose="rub"] [data-pose-img="rub"],
.host[data-pose="stare"] [data-pose-img="stare"] { visibility: visible; }
.host[data-pose="out"] { --ember-x: 9.4%; --ember-y: 30.3%; }
.host[data-pose="rub"] { --ember-x: 36.6%; --ember-y: 30.1%; }
.host[data-pose="stare"] { --ember-x: 38%; --ember-y: 29.5%; }

/* In the corner he ducks below controls and peeks over text he would cover. */
.host.is-peeking .host__body { translate: 0 36%; }
.host.is-tucked .host__body { translate: 0 74%; }

.host__poke {
  position: absolute;
  inset: 0;
  padding: 0;
  border: 0;
  background: transparent;
  pointer-events: auto;
  cursor: pointer;
  touch-action: manipulation;
  clip-path: polygon(30% 1%, 68% 1%, 75% 30%, 98% 36%, 100% 67%, 85% 100%, 20% 100%, 26% 65%, 24% 43%, 34% 33%);
}
.host.is-tucked .host__poke { pointer-events: none; }
.host__poke:focus-visible { outline: none; }
.host__body:has(.host__poke:focus-visible) { outline: 2px solid var(--mark); outline-offset: 2px; border-radius: 12px 12px 0 0; }

.host__smoke, .host__exhale { position: absolute; pointer-events: none; overflow: visible; opacity: 0; }
.host__smoke { left: var(--ember-x); top: var(--ember-y); width: 21%; height: 29%; translate: -50% -100%; }
.host__smoke path, .host__exhale path {
  stroke: #a99f8f;
  stroke-width: 1.25px;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
}
.host__smoke path { opacity: 0; transform-origin: 50% 100%; }
.host__exhale { left: 47%; top: 29%; width: 39%; height: 18%; translate: -96% -92%; }
.host.is-awake .host__smoke { opacity: 1; }
.host.is-tucked .host__smoke { opacity: 0; }

/* Short lines in a quiet pill above his head; never over controls. */
.host__quip {
  position: absolute;
  right: 45%;
  bottom: 96%;
  width: max-content;
  max-width: min(15rem, 60vw);
  padding: 0.5rem 0.8rem;
  border-radius: 10px;
  background: var(--raised);
  box-shadow: inset 0 0 0 1px var(--line), 0 8px 24px rgb(0 0 0 / 0.45);
  color: var(--text);
  font-size: 0.875rem;
  line-height: 1.35;
  opacity: 0;
  translate: 0 6px;
  transition: opacity 160ms ease, translate 260ms ease;

}
.host__quip.is-on { opacity: 1; translate: 0 0; }
.host:not(.is-corner) .host__quip,
.host.is-tucked .host__quip,
.host.is-peeking .host__quip,
.host.is-hushed .host__quip { opacity: 0; }

@keyframes host-arrive { from { translate: 0 100%; } }
@keyframes host-breathe { 50% { scale: 1.005 1.008; } }
@keyframes host-talk { 30% { scale: 1.01 1.022; } }
@keyframes smoke-curl {
  0% { opacity: 0; transform: translate(0, 8px) scaleY(0.7); }
  25% { opacity: 0.7; }
  75% { opacity: 0.45; }
  100% { opacity: 0; transform: translate(-13px, -19px) scaleY(1.12); }
}
@keyframes smoke-exhale { 10% { opacity: 0.7; } to { opacity: 0; translate: -135% -130%; scale: 1.25; } }

@media (prefers-reduced-motion: no-preference) {
  .host.is-awake .host__rig { animation: host-breathe 5s ease-in-out infinite; }
  .host.is-awake.is-talking .host__rig { animation: host-talk 420ms ease; }
  .host.is-awake .host__smoke path { animation: smoke-curl 4.2s linear infinite; }
  .host.is-awake .host__smoke path:nth-child(2) { animation-delay: -1.4s; }
  .host.is-awake .host__smoke path:nth-child(3) { animation-delay: -2.8s; }
  .host.is-awake.is-exhaling .host__exhale { animation: smoke-exhale 2s ease-out both; }
  /* Title screen: light, then menu, then slots, once. */
  .hero__light { animation: light-in 1600ms var(--ease) both; }
  .home .bar__links li, .home .bar__buy { animation: menu-in 700ms var(--ease) both; }
  .home .bar__links li:nth-child(2) { animation-delay: 50ms; }
  .home .bar__links li:nth-child(3) { animation-delay: 100ms; }
  .home .bar__links li:nth-child(4) { animation-delay: 150ms; }
  .home .bar__links li:nth-child(5) { animation-delay: 200ms; }
  .home .bar__buy { animation-delay: 260ms; }
  .slots li { animation: slot-in 800ms var(--ease) both; animation-delay: calc(200ms + var(--i, 0) * 70ms); }
  .slots li:nth-child(2) { --i: 1; }
  .slots li:nth-child(3) { --i: 2; }
  .slots li:nth-child(4) { --i: 3; }
}

/* Narrow layouts */

/* Below desktop width the title screen stacks: the nav returns to a bar, then
   the name plate, the mascot, and the slots in a two-by-two grid over his
   waist. */
@media (max-width: 1000px) {
  .home .bar {
    position: relative;
    width: min(100% - 2 * var(--gutter), var(--page));
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
    margin-inline: auto;
    padding: 0;
  }
  .home .wordmark { margin: 0 auto 0 0; }
  .home .wordmark svg { width: 2.4rem; }
  .home .bar__buy {
    margin: 0;
    min-height: 2.25rem;
    padding-inline: 1.15rem;
    background: var(--vermilion-fill);
    font-size: 0.875rem;
    clip-path: polygon(0.55rem 0, 100% 0, calc(100% - 0.55rem) 100%, 0 100%);
  }
  .home .bar__buy:hover { background: var(--vermilion-hover); }
  .home .bar__buy::before, .home .bar__buy::after { display: none; }
  .home .bar__buy { background-image: none; }
  .hero__platforms { padding: 0; background: none; box-shadow: none; text-shadow: 0 1px 3px rgb(0 0 0 / 0.9); }

  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    height: auto;
    padding: clamp(1.5rem, 5vw, 2.5rem) var(--gutter) 0;
  }
  .hero::after { display: none; }
  .hero__light { object-position: 70% 0; }
  .hero__platforms { position: static; order: 2; margin-top: 1.25rem; font-size: 0.75rem; }
  .hero__copy { position: static; width: auto; max-width: 36rem; padding-left: 0.4rem; }
  .plate { margin-left: 0; font-size: clamp(3.5rem, 15vw, 6.5rem); }
  .hero__copy { padding-left: 0; }
  .hero__actions { display: flex; }
  .hero__stand {
    position: relative;
    left: auto;
    top: auto;
    order: 3;
    justify-self: end;
    width: min(88vw, 30rem);
    height: auto;
    margin: -3rem -6vw 0 0;
  }
  .slots {
    position: relative;
    order: 4;
    inset: auto;
    margin-top: calc(-1 * min(44vw, 15rem));
    padding-bottom: 1rem;
  }
  .slots ul { grid-template-columns: 1fr 1fr; gap: 0.6rem; height: auto; }
  .slots li, .slots li:not(:first-child) { height: auto; }
  .slot { padding: 0.5rem 0.5rem 0; }
  .slot img { aspect-ratio: 16 / 10; height: auto; }
  .slot__label { min-height: 2.75rem; font-size: 0.9375rem; gap: 0.6rem; }
}

@media (max-width: 960px) {
  .workflow { grid-template-columns: 1fr; grid-template-areas: "title" "video" "steps"; }
  .try, .copycats, .trainers, .price { grid-template-columns: 1fr; }
  .copycats__text { order: -1; }
  .toy { grid-template-columns: 1fr; }
  .tools__groups { grid-template-columns: 1fr 1fr; }
  .library__games { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
  .hero__actions { flex-direction: column; align-items: stretch; }
  .host { --corner-w: 5.75rem; }
  .host__quip { right: 0; max-width: min(11rem, 55vw); }
  .tools__groups { grid-template-columns: 1fr; }
  .library__games { gap: 0.75rem; }
  .library__name { font-size: 0.9375rem; }
}

@media (max-width: 360px) {
  .library__games { grid-template-columns: 1fr; }
  .toy__game, .toy__scan { padding: 1rem; }
}