/*
 * lcd-worlds.css - the home page as one scrolling story (owner, 2026-09-19).
 *
 * Replaces the 2026-09-17 WebGL waterfall as the home page's look. The owner
 * supplies a seamless loop video per chapter, so the moving background is now a
 * video and the code's job is to keep words readable over it and to move the
 * pieces on top of it.
 *
 * FIVE ACTS, ONE PAGE: the opening, three worlds (merry-go-round, aquarium,
 * bedroom), how a piece is made (lcd-story, styled in lcd-studio.css), how to
 * order, and where to start. The separate How to order page is gone.
 *
 * THE STILL LAYOUT IS THE BASE. Every rule here assumes no JavaScript, no
 * autoplay and no WebGL: pieces are a plain grid, videos are their poster
 * images, and nothing is hidden. lcd-worlds.js adds .is-live to a world when it
 * can really drive it, and only then do the pieces leave the grid and start to
 * move. Phones are given fewer pieces, shorter chapters and smaller rings.
 *
 * Loaded after lcd-studio.css, which owns the dark studio, the nav, the pill,
 * the lightbox, the chat bubbles and the type.
 */

:root {
  /* One reader's screen. 100svh is the window, and Horizon scrolls
     .page-wrapper, so lcd-worlds.js measures the scroller and writes it here. */
  --lcd-view: 100svh;
  --lcd-accent: #8fd3ff;
  --lcd-accent-2: #5fd6f7;
}

/* ---- the looping video behind a chapter ---------------------------------- */
.lcd-loop {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #05070b;
  pointer-events: none;
}
.lcd-loop__poster,
.lcd-loop__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* The video is faded in over its own poster, so the swap is never a flash. */
.lcd-loop__video {
  opacity: 0;
  transition: opacity 900ms ease;
}
.lcd-loop__video.is-playing {
  opacity: 1;
}
/* Readability, in three layers: an even tint the editor sets, a bottom-up
   gradient under the words, and a fine grain that stops a flat tint looking
   like a dead overlay on a bright video. */
.lcd-loop__wash {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, rgb(4 6 10 / 0.78) 0%, rgb(4 6 10 / 0.34) 36%, rgb(4 6 10 / 0) 66%, rgb(4 6 10 / 0.28) 100%),
    linear-gradient(0deg, rgb(4 6 10 / var(--lcd-tint, 0.42)), rgb(4 6 10 / var(--lcd-tint, 0.42)));
}
.lcd-loop__wash::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgb(255 255 255 / 0.05) 0.5px, transparent 0.5px);
  background-size: 3px 3px;
  opacity: 0.6;
  mix-blend-mode: overlay;
}
/* A coloured bloom per world, so each chapter has its own light. */
.lcd-loop--world::after {
  content: "";
  position: absolute;
  inset: auto -10% -30% -10%;
  height: 70%;
  background: radial-gradient(60% 100% at 50% 100%,
    color-mix(in srgb, var(--lcd-accent) 20%, transparent), transparent 72%);
  pointer-events: none;
}

/* ---- act one: the opening ------------------------------------------------ */
.lcd-open {
  position: relative;
  box-sizing: border-box;
  min-height: var(--lcd-view);
  /* Up under the fixed header, so the video is the whole first screen. */
  margin-top: calc(-1 * var(--lcd-nav-h));
  display: grid;
  isolation: isolate;
  color: #f4f7fb;
  background: #000;
}
html.lcd-no-scene,
html.lcd-no-scene body {
  background: #000;
}
.lcd-open__stage {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.lcd-crystal {
  width: min(46vw, 560px);
  height: min(72vh, 680px);
  background: transparent;
  --poster-color: transparent;
  pointer-events: auto;
  filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.45));
}
.lcd-open__inner {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  width: 100%;
  max-width: var(--page-width, 1200px);
  margin-inline: auto;
  padding: calc(var(--lcd-nav-h) + 40px) clamp(16px, 3vw, 40px) 40px;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 24px;
}
.lcd-open__pitch {
  align-self: end;
  display: grid;
  justify-items: start;
  gap: 18px;
  max-width: 44rem;
}
.lcd-open__title {
  margin: 0;
  font-size: clamp(2.5rem, 7vw, 5.2rem);
  line-height: 1;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.lcd-open__text {
  margin: 0;
  max-width: 34rem;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  color: var(--lcd-ink-soft);
}
.lcd-open__facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.lcd-open__facts li {
  padding: 7px 14px;
  border: 1px solid var(--lcd-line);
  border-radius: 999px;
  background: rgb(6 9 14 / 0.45);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-size: 0.85rem;
  color: var(--lcd-ink-soft);
}
.lcd-open__scroll {
  justify-self: center;
  margin: 0;
  color: var(--lcd-ink-faint);
}
.lcd-open__scroll span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.lcd-open__scroll span::after {
  content: "";
  width: 1px;
  height: 34px;
  background: linear-gradient(180deg, var(--lcd-ink-faint), transparent);
  animation: lcd-scroll-cue 2.2s ease-in-out infinite;
}
@keyframes lcd-scroll-cue {
  0%, 100% { transform: scaleY(0.4); transform-origin: top; opacity: 0.4; }
  50% { transform: scaleY(1); transform-origin: top; opacity: 1; }
}

/* ---- the two chat buttons ----------------------------------------------- */
.lcd-chat {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.lcd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--lcd-mono-stack);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 200ms var(--lcd-ease-out), box-shadow 200ms, filter 200ms;
}
.lcd-btn svg {
  width: 18px;
  height: 18px;
  flex: none;
}
.lcd-btn--tg {
  background: linear-gradient(180deg, #a6e9fc, #5fd6f7);
  color: #06121a;
  box-shadow: 0 10px 30px rgb(95 214 247 / 0.28);
}
.lcd-btn--wa {
  border-color: rgb(37 211 102 / 0.5);
  background: rgb(6 9 14 / 0.55);
  color: #d8ffe8;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.lcd-btn--wa svg { color: #25d366; }
.lcd-btn:hover { transform: translateY(-2px); }
.lcd-btn--wa:hover { border-color: #25d366; box-shadow: 0 10px 30px rgb(37 211 102 / 0.22); }
.lcd-btn:focus-visible { outline: 2px solid var(--lcd-ice); outline-offset: 3px; }
.lcd-chat--compact .lcd-btn { min-height: 42px; padding: 0 16px; font-size: 0.72rem; }
.lcd-chat__hint {
  color: var(--lcd-ink-faint);
  text-transform: none;
  letter-spacing: 0;
}

/* ---- what you can pay with ---------------------------------------------- */
.lcd-pay {
  display: grid;
  gap: 10px;
  justify-items: start;
}
.lcd-pay__label { color: var(--lcd-ink-faint); }
.lcd-pay__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.lcd-pay__item {
  display: grid;
  place-items: center;
  height: 34px;
  padding-inline: 10px;
  border: 1px solid var(--lcd-line);
  border-radius: 8px;
  background: rgb(232 237 245 / 0.06);
}
.lcd-pay__item img { height: 20px; width: auto; display: block; }
.lcd-pay__item--brand { padding: 0; border-color: transparent; background: none; }
.lcd-pay__brand { height: 34px; width: auto; display: block; }
/* FPS and PayMe have no Shopify mark, so until the shop uploads their logos
   they are set as type - honest, and it never looks like a bad forgery. */
.lcd-pay__mark {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--lcd-mono-stack);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  color: var(--lcd-ink);
}
.lcd-pay__mark b { font-weight: 500; }
.lcd-pay__mark--fps b { font-size: 0.7rem; color: var(--lcd-ink-faint); }
.lcd-pay__note {
  margin: 0;
  font-size: 0.82rem;
  color: var(--lcd-ink-faint);
}
.lcd-pay--compact .lcd-pay__item { height: 28px; }
.lcd-pay--compact .lcd-pay__brand { height: 28px; }
.lcd-pay--compact .lcd-pay__item img { height: 16px; }

/* ---- the chapter rail ---------------------------------------------------- */
.lcd-rail {
  position: fixed;
  z-index: 30;
  inset-inline-end: 18px;
  inset-block-start: 50%;
  translate: 0 -50%;
  display: grid;
  gap: 14px;
  justify-items: end;
}
.lcd-rail a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  font-family: var(--lcd-mono-stack);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--lcd-ink-faint);
  transition: color 220ms;
}
.lcd-rail a span { opacity: 0; transition: opacity 220ms; }
.lcd-rail a::after {
  content: "";
  width: 22px;
  height: 1px;
  background: currentColor;
  transition: width 220ms var(--lcd-ease-out);
}
.lcd-rail a:hover,
.lcd-rail a[aria-current="true"] { color: #ffffff; }
.lcd-rail a:hover span,
.lcd-rail a[aria-current="true"] span { opacity: 1; }
.lcd-rail a[aria-current="true"]::after {
  width: 40px;
  background: var(--lcd-accent-2);
  box-shadow: 0 0 12px var(--lcd-accent-2);
}
.lcd-rail a:focus-visible { outline: 2px solid var(--lcd-ice); outline-offset: 3px; }

/* ---- acts two to four: a world of pieces --------------------------------- */
.lcd-world {
  position: relative;
  color: var(--lcd-ink);
}
.lcd-world--animal { --lcd-accent: #ffc866; --lcd-accent-2: #ff9d5c; }
.lcd-world--aquarium { --lcd-accent: #58e0d6; --lcd-accent-2: #7cc0ff; }
.lcd-world--bedroom { --lcd-accent: #ffb27a; --lcd-accent-2: #d7a7ff; }

/* Still layout: the video screen, then the pieces, then the words. */
.lcd-world__track { position: relative; }
.lcd-world__stage {
  position: relative;
  box-sizing: border-box;
  min-height: var(--lcd-view);
  padding: clamp(28px, 5vh, 64px) clamp(16px, 3vw, 40px);
  display: grid;
  align-content: end;
  gap: 28px;
  overflow: hidden;
  isolation: isolate;
}
.lcd-world__ride,
.lcd-world__copy,
.lcd-world__note { position: relative; z-index: 1; }
.lcd-world__copy {
  display: grid;
  justify-items: start;
  gap: 14px;
  max-width: 34rem;
  width: 100%;
  margin-inline: auto;
}
.lcd-world__num { color: var(--lcd-ink-faint); }
.lcd-world__num:empty { display: none; }
.lcd-world__copy .lcd-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--lcd-accent);
}
.lcd-world__title {
  margin: 0;
  font-size: clamp(2rem, 5.2vw, 3.6rem);
  line-height: 1.03;
  letter-spacing: -0.02em;
}
.lcd-world__text {
  margin: 0;
  font-size: clamp(0.98rem, 1.4vw, 1.12rem);
  color: var(--lcd-ink-soft);
}
.lcd-world__turn { color: var(--lcd-ink-faint); }

/* the pieces, as a plain grid until a script says otherwise */
.lcd-world__riders {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
}
.lcd-rider { margin: 0; }
.lcd-rider__frame {
  position: relative;
  display: grid;
  gap: 8px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: center;
}
button.lcd-rider__frame { cursor: pointer; }
.lcd-rider__art {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgb(232 237 245 / 0.14);
  background:
    radial-gradient(closest-side at 50% 60%, color-mix(in srgb, var(--lcd-accent) 22%, transparent), transparent 78%),
    rgb(6 9 14 / 0.42);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: transform 300ms var(--lcd-ease-out), box-shadow 300ms, border-color 300ms;
}
.lcd-rider__art img,
.lcd-rider__placeholder {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 12px 18px rgb(0 0 0 / 0.45));
}
.lcd-rider__placeholder { fill: rgb(232 237 245 / 0.25); }
.lcd-rider__tag {
  display: grid;
  gap: 2px;
  font-size: 0.86rem;
}
.lcd-rider__tag b { font-weight: 500; }
.lcd-rider__tag i { font-style: normal; font-size: 0.68rem; color: var(--lcd-ink-faint); }
.lcd-rider__pole { display: none; }
button.lcd-rider__frame:hover .lcd-rider__art,
button.lcd-rider__frame:focus-visible .lcd-rider__art {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--lcd-accent) 60%, transparent);
  box-shadow: 0 18px 40px rgb(0 0 0 / 0.5), 0 0 30px color-mix(in srgb, var(--lcd-accent) 30%, transparent);
}
button.lcd-rider__frame:focus-visible { outline: 2px solid var(--lcd-ice); outline-offset: 6px; border-radius: 20px; }

/* ---- live: the chapter holds still while its words scroll past ----------- */
/* The track is two screens tall and the stage sticks to the top of the first,
   which is what makes the video sit still while the reader moves. */
.lcd-world.is-live .lcd-world__track { height: calc(var(--lcd-view) * 2.1); }
.lcd-world.is-live .lcd-world__stage {
  position: sticky;
  top: 0;
  height: var(--lcd-view);
  min-height: 0;
  align-content: end;
}
/* A band of dark under the words. Pieces move, and a video is somebody else's
   footage, so the words cannot depend on either being dark where they land. On
   a wide screen the band covers the left half only, which leaves the ride in
   clean light; on a phone the words have the whole foot of the screen. */
.lcd-world.is-live .lcd-world__stage::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  z-index: 0;
  height: 72%;
  /* Pinned to the bottom left corner and fading in every direction, so there
     is no edge anywhere for the eye to catch. */
  background: radial-gradient(125% 100% at 0% 100%,
    rgb(4 6 10 / 0.94) 0%, rgb(4 6 10 / 0.82) 28%, rgb(4 6 10 / 0.45) 52%, rgb(4 6 10 / 0) 78%);
  pointer-events: none;
}
.lcd-world.is-live .lcd-world__copy { z-index: 2; }

/* The words drift up and fade as the chapter is left behind. --lcd-p is how far
   through the chapter the reader is, written once a frame by lcd-worlds.js. */
.lcd-world.is-live .lcd-world__copy {
  transform: translate3d(0, calc(var(--lcd-p, 0) * -6vh), 0);
  opacity: calc(1 - max(0, var(--lcd-p, 0) - 0.72) * 3.4);
}
.lcd-world.is-live .lcd-world__ride {
  position: absolute;
  /* Never under the fixed header: a piece half-hidden behind the menu reads as
     a broken page, not as depth. */
  inset: calc(var(--lcd-nav-h) + 8px) 0 0 0;
  z-index: 0;
}
.lcd-world.is-live .lcd-world__riders {
  position: absolute;
  inset: 0;
  display: block;
}
.lcd-world.is-live .lcd-rider {
  position: absolute;
  width: var(--lcd-card, 210px);
}
.lcd-world.is-live .lcd-rider__tag {
  position: absolute;
  inset-block-start: calc(100% + 6px);
  inset-inline: 50%;
  width: max-content;
  max-width: 130%;
  translate: -50% 0;
  padding: 4px 10px;
  border-radius: 10px;
  background: rgb(4 6 10 / 0.58);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* ---- the merry-go-round -------------------------------------------------- */
/* A tilted ring: each animal is turned out to its own place on the ring and
   then turned back to face the reader, so it rides round without spinning. */
.lcd-world--animal.is-live .lcd-world__ride {
  perspective: 1200px;
  perspective-origin: 50% 36%;
}
.lcd-world--animal.is-live .lcd-world__riders {
  /* Clear of the fixed header above and the words below: the poles have to
     hang from somewhere, and that somewhere must be on the screen. */
  top: 11%;
  bottom: auto;
  height: 40%;
  transform-style: preserve-3d;
  transform: rotateX(var(--lcd-tilt, 12deg));
}
.lcd-world--animal.is-live .lcd-rider {
  --lcd-a: calc(var(--lcd-angle, 0deg) + var(--i) * (360deg / var(--lcd-n)));
  inset-block-start: 50%;
  inset-inline-start: 50%;
  margin-inline-start: calc(var(--lcd-card, 210px) / -2);
  margin-block-start: calc(var(--lcd-card, 210px) / -2);
  transform-style: preserve-3d;
  transform: rotateY(var(--lcd-a)) translateZ(var(--lcd-radius, 300px));
}
.lcd-world--animal.is-live .lcd-rider__frame {
  transform: rotateY(calc(-1 * var(--lcd-a))) rotateX(calc(-1 * var(--lcd-tilt, 12deg)));
  animation: lcd-ride 3.4s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.55s);
}
/* The pole each animal hangs from: what makes it part of the ride and not a
   picture floating in the air. */
.lcd-world--animal.is-live .lcd-rider__pole {
  display: block;
  position: absolute;
  inset-block-end: calc(100% - 6px);
  inset-inline-start: 50%;
  width: 3px;
  height: calc(var(--lcd-card, 210px) * 0.62);
  max-height: 15vh;
  translate: -50% 0;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--lcd-accent) 70%, #fff) 30%, var(--lcd-accent));
  opacity: 0.75;
}
.lcd-world--animal.is-live .lcd-rider.is-back .lcd-rider__tag { opacity: 0; }
.lcd-world--animal.is-live .lcd-rider.is-back .lcd-rider__art { opacity: 0.5; }
.lcd-world--animal.is-live .lcd-rider__tag,
.lcd-world--animal.is-live .lcd-rider__art { transition: opacity 400ms ease; }
@keyframes lcd-ride {
  0%, 100% { translate: 0 -7%; }
  50% { translate: 0 7%; }
}

/* ---- the aquarium -------------------------------------------------------- */
/* Nothing is pinned to a ring here: each piece drifts along its own lane, at
   its own depth and its own speed, the way things move in water. */
.lcd-world--aquarium.is-live .lcd-rider {
  inset-block-start: calc(6% + var(--depth) * 13%);
  inset-inline-start: calc(2% + var(--lane) * 24%);
  width: calc(var(--lcd-card, 210px) * (0.72 + var(--depth) * 0.07));
  opacity: calc(0.7 + var(--depth) * 0.07);
  animation: lcd-drift calc(26s + var(--i) * 4s) ease-in-out infinite alternate;
  animation-delay: calc(var(--i) * -3.7s);
}
.lcd-world--aquarium.is-live .lcd-rider__frame {
  animation: lcd-sway calc(7s + var(--i) * 1.3s) ease-in-out infinite;
  animation-delay: calc(var(--i) * -1.1s);
}
.lcd-world--aquarium.is-live .lcd-rider__art {
  border-radius: 50% 50% 46% 46% / 46% 46% 50% 50%;
}
@keyframes lcd-drift {
  from { translate: -3% 4%; }
  to { translate: 9% -6%; }
}
@keyframes lcd-sway {
  0%, 100% { rotate: -3deg; }
  50% { rotate: 3deg; }
}
.lcd-bubbles {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.lcd-bubbles span {
  position: absolute;
  bottom: -40px;
  inset-inline-start: calc(4% + var(--i) * 11%);
  width: calc(4px + var(--i) * 1.6px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgb(255 255 255 / 0.35);
  background: rgb(255 255 255 / 0.08);
  animation: lcd-bubble calc(11s + var(--i) * 2.4s) linear infinite;
  animation-delay: calc(var(--i) * -1.9s);
}
@keyframes lcd-bubble {
  from { transform: translateY(0) translateX(0); opacity: 0; }
  12% { opacity: 0.9; }
  to { transform: translateY(calc(-1 * var(--lcd-view))) translateX(18px); opacity: 0; }
}

/* ---- the bedroom --------------------------------------------------------- */
/* The quiet one: the pieces stand still on a shelf and the lamp breathes over
   them. Only the lamp and a little parallax move. */
.lcd-world--bedroom.is-live .lcd-world__riders {
  position: absolute;
  inset: auto 0 34%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(12px, 2.4vw, 34px);
}
.lcd-world--bedroom.is-live .lcd-rider {
  position: relative;
  width: calc(var(--lcd-card, 210px) * (0.78 + var(--depth) * 0.06));
  transform: translate3d(0, calc(var(--lcd-p, 0) * -3vh * (1 + var(--depth) * 0.3)), 0);
}
.lcd-world--bedroom.is-live .lcd-rider__tag { position: static; margin-top: 8px; }
.lcd-world--bedroom.is-live .lcd-rider__art {
  aspect-ratio: 4 / 5;
  border: 0;
  border-radius: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* The shadow each one casts on the shelf: what puts it in the room rather than
   on a card. */
.lcd-world--bedroom.is-live .lcd-rider__art::after {
  content: "";
  position: absolute;
  inset-block-end: -4px;
  inset-inline: 12%;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(0 0 0 / 0.55), transparent 75%);
}
.lcd-world--bedroom.is-live .lcd-rider__art img {
  filter: drop-shadow(0 10px 16px rgb(0 0 0 / 0.55))
          drop-shadow(0 0 26px color-mix(in srgb, var(--lcd-accent) 45%, transparent));
}
.lcd-world--bedroom.is-live button.lcd-rider__frame:hover .lcd-rider__art {
  box-shadow: none;
}
.lcd-lamp {
  position: absolute;
  z-index: 0;
  inset-block-start: -18%;
  inset-inline-end: 6%;
  width: min(70vw, 620px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--lcd-accent) 40%, transparent),
    color-mix(in srgb, var(--lcd-accent) 12%, transparent) 52%, transparent 74%);
  animation: lcd-lamp 7.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes lcd-lamp {
  0%, 100% { opacity: 0.68; scale: 1; }
  50% { opacity: 1; scale: 1.05; }
}

/* ---- the lightbox a piece opens in -------------------------------------- */
.lcd-lightbox__loading {
  position: absolute;
  inset-block-end: 14px;
  inset-inline: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  font-size: 0.85rem;
  color: var(--lcd-ink-faint);
}
.lcd-lightbox.is-ready .lcd-lightbox__loading,
.lcd-lightbox.is-failed .lcd-lightbox__loading { display: none; }

/* ---- act five: ordering ------------------------------------------------- */
.lcd-order,
.lcd-start {
  position: relative;
  color: var(--lcd-ink);
}
.lcd-order__inner,
.lcd-start__inner {
  box-sizing: border-box;
  width: min(calc(100% - 24px), var(--page-width, 1200px));
  margin: 24px auto;
  padding: clamp(28px, 5vw, 64px) clamp(18px, 3vw, 48px);
  border: 1px solid var(--lcd-line);
  border-radius: 28px;
  background: rgb(6 9 14 / 0.72);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  backdrop-filter: blur(16px) saturate(1.15);
}
.lcd-order__inner { display: grid; gap: clamp(32px, 5vw, 56px); }
.lcd-order__head { display: grid; gap: 10px; max-width: 46rem; }
.lcd-order__title {
  margin: 0;
  font-size: clamp(1.9rem, 4.2vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.lcd-order__intro,
.lcd-order__limits,
.lcd-order__how { margin: 0; color: var(--lcd-ink-soft); }
.lcd-order__sub {
  margin: 0 0 18px;
  font-size: clamp(1.1rem, 2vw, 1.45rem);
}
.lcd-order__limits {
  margin-top: 18px;
  font-size: 0.85rem;
  color: var(--lcd-ink-faint);
}

.lcd-order__ways {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  counter-reset: none;
}
.lcd-way {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 22px;
  border: 1px solid var(--lcd-line);
  border-radius: 20px;
  background: linear-gradient(180deg, rgb(232 237 245 / 0.05), rgb(232 237 245 / 0.02));
  transition: border-color 260ms, transform 260ms var(--lcd-ease-out);
}
.lcd-way:hover { border-color: rgb(143 211 255 / 0.4); transform: translateY(-3px); }
.lcd-way__num { margin: 0; color: var(--lcd-ice); }
.lcd-way__title { margin: 0; font-size: 1.05rem; }
.lcd-way__text { margin: 0; font-size: 0.92rem; color: var(--lcd-ink-soft); }

/* the message you send, drawn as the chat bubble it will become */
.lcd-bubble {
  position: relative;
  margin: 6px 0 0;
  padding: 12px 14px;
  border-radius: 16px 16px 16px 4px;
  background: color-mix(in srgb, var(--lcd-you) 55%, #0b0e14);
  font-size: 0.92rem;
  line-height: 1.45;
}
.lcd-bubble q { quotes: none; }
.lcd-bubble q::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-inline-start: 3px;
  vertical-align: -0.15em;
  background: currentColor;
  opacity: 0;
}
.lcd-bubble.is-typing q::after { opacity: 1; animation: lcd-caret 900ms steps(1) infinite; }
@keyframes lcd-caret { 50% { opacity: 0; } }
.lcd-chip {
  display: inline-block;
  margin-inline-end: 8px;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgb(255 255 255 / 0.14);
  font-size: 0.66rem;
}

.lcd-order__prompts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}
.lcd-prompt {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 20px;
  border: 1px solid var(--lcd-line);
  border-radius: 18px;
  background: rgb(232 237 245 / 0.03);
  scroll-margin-top: var(--lcd-top);
}
.lcd-prompt__title { margin: 0; font-size: 1rem; }
.lcd-prompt__send,
.lcd-prompt__tip { margin: 0; font-size: 0.86rem; color: var(--lcd-ink-soft); }
.lcd-prompt__send .lcd-mono { color: var(--lcd-ink-faint); margin-inline-end: 6px; }
.lcd-prompt__tip { color: var(--lcd-ink-faint); }

.lcd-beats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.lcd-beat {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--lcd-line);
}
.lcd-beat:last-child { border-bottom: 1px solid var(--lcd-line); }
.lcd-beat p { margin: 0; color: var(--lcd-ink-soft); }
.lcd-beat__num {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgb(143 211 255 / 0.4);
  color: var(--lcd-ice);
  font-size: 0.7rem;
}
.lcd-order__foot { display: grid; justify-items: start; gap: 12px; }

/* ---- act six: where to start -------------------------------------------- */
.lcd-start__inner {
  display: grid;
  gap: clamp(28px, 4vw, 48px);
}
.lcd-start__pitch { display: grid; justify-items: start; gap: 14px; max-width: 40rem; }
.lcd-start__title {
  margin: 0;
  font-size: clamp(1.9rem, 4.6vw, 3.2rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
}
.lcd-start__text { margin: 0; color: var(--lcd-ink-soft); }
.lcd-start__hours {
  margin: 0;
  font-size: 0.82rem;
  color: var(--lcd-ink-faint);
}
.lcd-start__sub { margin: 0 0 10px; font-size: 1.2rem; }
.lcd-start__intro,
.lcd-start__how { margin: 0; color: var(--lcd-ink-soft); font-size: 0.92rem; }
.lcd-start__costs {
  list-style: none;
  margin: 14px 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.lcd-start__costs li {
  padding: 6px 12px;
  border: 1px solid var(--lcd-line);
  border-radius: 999px;
  font-size: 0.82rem;
  color: var(--lcd-ink-soft);
}
.lcd-start__packs {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
}
.lcd-pack {
  display: grid;
  gap: 2px;
  padding: 12px 8px;
  border: 1px solid var(--lcd-line);
  border-radius: 14px;
  background: rgb(232 237 245 / 0.03);
  text-align: center;
}
.lcd-pack b { font-size: 0.95rem; font-weight: 600; }
.lcd-pack i { font-style: normal; color: var(--lcd-ink-faint); }
.lcd-start__pay { display: grid; gap: 16px; }
.lcd-start__notes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--lcd-ink-faint);
}
.lcd-start__notes li { padding-inline-start: 14px; position: relative; }
.lcd-start__notes li::before {
  content: "";
  position: absolute;
  inset-block-start: 0.55em;
  inset-inline-start: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--lcd-ice);
  opacity: 0.6;
}

/* ---- wide screens ------------------------------------------------------- */
/* Four is four: two by two on a laptop and four across on a wide screen, never
   three with one left over on its own row. */
@media (min-width: 750px) {
  .lcd-order__ways,
  .lcd-order__prompts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .lcd-order__ways,
  .lcd-order__prompts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 990px) {
  .lcd-open__inner { padding-bottom: 64px; }
  .lcd-world.is-live .lcd-world__copy {
    margin-inline: 0;
    max-width: 30rem;
  }
  .lcd-world--animal.is-live .lcd-world__riders { height: 42%; top: 11%; }
  .lcd-world--aquarium.is-live .lcd-rider {
    inset-inline-start: calc(26% + var(--lane) * 19%);
    inset-block-start: calc(5% + var(--depth) * 10%);
  }
  .lcd-world--bedroom.is-live .lcd-world__riders {
    inset: auto 3% 15% 44%;
    justify-content: flex-end;
  }
  .lcd-start__inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: start;
  }
  .lcd-start__pitch { grid-row: span 2; align-self: center; }
  .lcd-order__next { max-width: 54rem; }
}

/* ---- phones ------------------------------------------------------------- */
/* The ring is smaller and sits in the top half, the words take the bottom, and
   a chapter is shorter so the whole story is reachable with a thumb. */
@media (max-width: 749px) {
  .lcd-open__inner { padding-top: calc(var(--lcd-nav-h) + 20px); gap: 16px; }
  .lcd-open__title { font-size: clamp(2.1rem, 9.5vw, 3rem); }
  .lcd-open__pitch { gap: 14px; }
  .lcd-open__chat { width: 100%; }
  .lcd-open__chat .lcd-btn { flex: 1 1 46%; padding-inline: 12px; }
  .lcd-open__facts li { font-size: 0.76rem; padding: 6px 11px; }
  .lcd-open__scroll { display: none; }

  .lcd-world.is-live .lcd-world__track { height: calc(var(--lcd-view) * 1.9); }
  .lcd-world.is-live .lcd-world__stage::after {
    height: 66%;
    background: linear-gradient(0deg, rgb(4 6 10 / 0.94) 0%, rgb(4 6 10 / 0.72) 38%, rgb(4 6 10 / 0) 100%);
  }
  .lcd-world__stage { gap: 18px; padding-inline: 16px; }
  .lcd-world.is-live .lcd-world__copy { max-width: none; }
  .lcd-world__riders { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lcd-world--animal.is-live .lcd-world__riders { height: 38%; top: 10%; }
  .lcd-world--animal.is-live .lcd-rider:not(.is-front) .lcd-rider__tag { opacity: 0; }
  .lcd-world--animal.is-live .lcd-rider__pole { max-height: 9vh; }
  .lcd-world--aquarium.is-live .lcd-world__ride { inset-block-end: 44%; }
  .lcd-world--aquarium.is-live .lcd-rider {
    inset-inline-start: calc(1% + var(--lane) * 23%);
    inset-block-start: calc(2% + var(--depth) * 14%);
    width: calc(var(--lcd-card, 210px) * (0.62 + var(--depth) * 0.05));
  }
  .lcd-world--bedroom.is-live .lcd-world__riders {
    inset: auto 0 42%;
    flex-wrap: wrap;
    gap: 10px;
  }
  .lcd-world--bedroom.is-live .lcd-rider { width: 38%; }

  /* the rail becomes a row of dots at the foot of the screen */
  .lcd-rail {
    inset: auto 0 10px;
    translate: none;
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 8px 12px;
  }
  .lcd-rail a { padding: 6px; }
  .lcd-rail a span { display: none; }
  .lcd-rail a::after { width: 7px; height: 7px; border-radius: 50%; }
  .lcd-rail a[aria-current="true"]::after { width: 9px; height: 9px; }

  .lcd-order__inner,
  .lcd-start__inner { border-radius: 20px; }
  .lcd-way,
  .lcd-prompt { padding: 18px; }
  .lcd-order__chat,
  .lcd-start__chat { width: 100%; }
  .lcd-order__chat .lcd-btn,
  .lcd-start__chat .lcd-btn { flex: 1 1 100%; }
  .lcd-beat { grid-template-columns: 28px minmax(0, 1fr); gap: 10px; }
}

/* Short screens in landscape: a pinned chapter with nothing above the fold is
   worse than a scrolling one. */
@media (max-height: 520px) {
  .lcd-world.is-live .lcd-world__track { height: auto; }
  .lcd-world.is-live .lcd-world__stage { position: relative; height: auto; min-height: var(--lcd-view); }
  .lcd-world.is-live .lcd-world__riders,
  .lcd-world.is-live .lcd-world__ride { position: relative; inset: auto; }
}

/* ---- asked for less motion ---------------------------------------------- */
/* Everything stops. The worlds fall back to the still grid they start as, the
   videos are never started (lcd-worlds.js), and the posters carry the page. */
@media (prefers-reduced-motion: reduce) {
  .lcd-open__scroll span::after,
  .lcd-lamp,
  .lcd-bubbles span,
  .lcd-rider__frame,
  .lcd-bubble.is-typing q::after { animation: none !important; }
  .lcd-bubbles { display: none; }
  .lcd-world.is-live .lcd-world__track { height: auto; }
  .lcd-world.is-live .lcd-world__stage { position: relative; height: auto; min-height: var(--lcd-view); }
  .lcd-world.is-live .lcd-world__ride,
  .lcd-world.is-live .lcd-world__riders,
  .lcd-world.is-live .lcd-rider {
    position: relative;
    inset: auto;
    transform: none;
    width: auto;
    opacity: 1;
    margin: 0;
    animation: none;
  }
  .lcd-world.is-live .lcd-world__riders {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
  }
  .lcd-world.is-live .lcd-rider__tag { position: static; }
  .lcd-world.is-live .lcd-world__copy { transform: none; opacity: 1; }
  .lcd-loop__video { display: none; }
}

/* ===========================================================================
 * THE PLATFORM (owner, 2026-09-21)
 * The shop became a custom-made centre, so the page became one chapter per
 * product. Everything above still does the work - the ride, the water, the
 * shelf, the riders, the lightbox - and this part adds what a product chapter
 * needs that a world did not: scenes it can switch between, the list of hosts
 * a fitted part can be made for, its own steps, the workshop, and contact.
 * ======================================================================== */

/* ---- scenes inside one chapter ------------------------------------------ */
/* Every scene's video and words are in the page and the stylesheet shows the
   one whose number matches data-scene. With no JavaScript that is scene one,
   which is a whole product rather than a fragment of one. */
.lcd-scene-loop { position: absolute; inset: 0; z-index: 0; }
.lcd-scene-loop,
.lcd-scene-copy,
.lcd-product .lcd-rider[data-scene] { display: none; }
.lcd-product[data-scene="1"] .lcd-scene-loop[data-scene="1"],
.lcd-product[data-scene="2"] .lcd-scene-loop[data-scene="2"],
.lcd-product[data-scene="3"] .lcd-scene-loop[data-scene="3"] { display: block; }
.lcd-product[data-scene="1"] .lcd-scene-copy[data-scene="1"],
.lcd-product[data-scene="2"] .lcd-scene-copy[data-scene="2"],
.lcd-product[data-scene="3"] .lcd-scene-copy[data-scene="3"] {
  display: grid;
  gap: 12px;
  justify-items: start;
}
.lcd-product[data-scene="1"] .lcd-rider[data-scene="1"],
.lcd-product[data-scene="2"] .lcd-rider[data-scene="2"],
.lcd-product[data-scene="3"] .lcd-rider[data-scene="3"] { display: block; }

/* the switch itself - hidden with no script, because it would do nothing */
.lcd-scenes { display: flex; flex-wrap: wrap; gap: 8px; }
html:not(.lcd-js) .lcd-scenes { display: none; }
.lcd-scenes__tab {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--lcd-line);
  border-radius: 999px;
  background: rgb(6 9 14 / 0.5);
  color: var(--lcd-ink-soft);
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: color 200ms, border-color 200ms, background 200ms;
}
.lcd-scenes__tab:hover { color: #ffffff; }
.lcd-scenes__tab[aria-current="true"] {
  border-color: color-mix(in srgb, var(--lcd-accent) 70%, transparent);
  background: color-mix(in srgb, var(--lcd-accent) 18%, rgb(6 9 14 / 0.6));
  color: #ffffff;
}
.lcd-scenes__tab:focus-visible { outline: 2px solid var(--lcd-ice); outline-offset: 3px; }

/* the decoration belongs to the scene that asked for it */
.lcd-bubbles, .lcd-lamp { display: none; }
.lcd-world--aquarium .lcd-bubbles,
.lcd-world--bedroom .lcd-lamp { display: block; }

.lcd-world__price { margin: 0; color: var(--lcd-accent); }

/* ---- a fourth motion: plates turning in place --------------------------- */
/* A fan case is a disc. It does not hang from a ring or swim - it turns, the
   way the fan behind it does. */
.lcd-world--plate { --lcd-accent: #a9b8ff; --lcd-accent-2: #7cc0ff; }
.lcd-world--plate.is-live .lcd-world__riders {
  position: absolute;
  inset: auto 0 36%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(14px, 3vw, 40px);
}
.lcd-world--plate.is-live .lcd-rider { position: relative; width: var(--lcd-card, 210px); }
.lcd-world--plate.is-live .lcd-rider__tag { position: static; margin-top: 10px; background: none; padding: 0; }
.lcd-world--plate.is-live .lcd-rider__art {
  border-radius: 50%;
  border-color: color-mix(in srgb, var(--lcd-accent) 45%, transparent);
}
.lcd-world--plate.is-live .lcd-rider__art img {
  animation: lcd-spin calc(30s + var(--i) * 7s) linear infinite;
}

/* ---- the band under a chapter: steps, hosts, the request ---------------- */
.lcd-product__after {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  width: min(calc(100% - 24px), var(--page-width, 1200px));
  margin: 0 auto 24px;
  padding: clamp(24px, 4vw, 48px);
  border: 1px solid var(--lcd-line);
  border-radius: 28px;
  background: rgb(6 9 14 / 0.72);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  backdrop-filter: blur(16px) saturate(1.15);
  display: grid;
  gap: clamp(28px, 4vw, 44px);
}
.lcd-product__sub { margin: 0 0 16px; font-size: clamp(1.1rem, 2vw, 1.4rem); }

.lcd-steps__list,
.lcd-hosts__list,
.lcd-kinds__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.lcd-steps__list {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.lcd-step {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 20px;
  border: 1px solid var(--lcd-line);
  border-radius: 18px;
  background: rgb(232 237 245 / 0.03);
}
.lcd-step h4 { margin: 0; font-size: 1rem; }
.lcd-step p { margin: 0; font-size: 0.9rem; color: var(--lcd-ink-soft); }
.lcd-step__num { color: var(--lcd-accent); }
.lcd-step__art {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  background: rgb(232 237 245 / 0.05);
}
.lcd-step__art img { display: block; width: 100%; height: auto; }

/* the host list is a promise, so it reads like a list of facts */
.lcd-hosts__note,
.lcd-hosts__ask p { margin: 0 0 14px; color: var(--lcd-ink-soft); font-size: 0.92rem; }
.lcd-hosts__list { display: grid; gap: 2px; margin-bottom: 18px; }
.lcd-host {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  padding: 14px 0;
  border-top: 1px solid var(--lcd-line);
}
.lcd-host:last-child { border-bottom: 1px solid var(--lcd-line); }
.lcd-host b { font-weight: 500; }
.lcd-host i { font-style: normal; font-size: 0.75rem; color: var(--lcd-ink-faint); }
.lcd-host__state {
  margin-inline-start: auto;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--lcd-line);
  font-size: 0.64rem;
  color: var(--lcd-ink-faint);
}
.lcd-host--measured .lcd-host__state {
  border-color: color-mix(in srgb, var(--lcd-accent) 55%, transparent);
  color: var(--lcd-accent);
}
.lcd-hosts__ask {
  display: grid;
  justify-items: start;
  padding: 20px;
  border: 1px dashed var(--lcd-line);
  border-radius: 18px;
}

/* ---- what can be custom made ------------------------------------------- */
.lcd-kinds__list {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.lcd-kind {
  display: grid;
  gap: 6px;
  align-content: start;
  padding-inline-start: 16px;
  border-inline-start: 2px solid color-mix(in srgb, var(--lcd-ice) 45%, transparent);
}
.lcd-kind h4 { margin: 0; font-size: 1rem; }
.lcd-kind p { margin: 0; font-size: 0.88rem; color: var(--lcd-ink-soft); }
/* The one that is not automatic yet is marked as such, quietly. */
.lcd-kind--sized { border-inline-start-style: dashed; }
.lcd-kind--sized p { color: var(--lcd-ink-faint); }

/* ---- the workshop ------------------------------------------------------- */
.lcd-machines { position: relative; color: var(--lcd-ink); }
.lcd-machines__inner {
  box-sizing: border-box;
  width: min(calc(100% - 24px), var(--page-width, 1200px));
  margin: 24px auto;
  padding: clamp(28px, 5vw, 64px) clamp(18px, 3vw, 48px);
  border: 1px solid var(--lcd-line);
  border-radius: 28px;
  background: rgb(6 9 14 / 0.72);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  backdrop-filter: blur(16px) saturate(1.15);
  display: grid;
  gap: clamp(24px, 4vw, 40px);
}
.lcd-machines__head { display: grid; gap: 10px; max-width: 46rem; }
.lcd-machines__title {
  margin: 0;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
}
.lcd-machines__intro { margin: 0; color: var(--lcd-ink-soft); }
.lcd-machines__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.lcd-machine {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 24px;
  border: 1px solid var(--lcd-line);
  border-radius: 20px;
  background: linear-gradient(180deg, rgb(232 237 245 / 0.05), rgb(232 237 245 / 0.02));
}
.lcd-machine h3 { margin: 0; font-size: 1.1rem; }
.lcd-machine p { margin: 0; font-size: 0.92rem; color: var(--lcd-ink-soft); }
.lcd-machine__mark {
  justify-self: start;
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid rgb(143 211 255 / 0.4);
  color: var(--lcd-ice);
  font-size: 0.7rem;
}
.lcd-machine__swatches { display: flex; gap: 6px; }
.lcd-machine__swatches i {
  width: 16px;
  height: 16px;
  border-radius: 50%;
}
.lcd-machine__swatches i:nth-child(1) { background: #ff6f6f; }
.lcd-machine__swatches i:nth-child(2) { background: #ffc866; }
.lcd-machine__swatches i:nth-child(3) { background: #7be3a0; }
.lcd-machine__swatches i:nth-child(4) { background: #7cc0ff; }
.lcd-machine__swatches i:nth-child(5) { background: #c9a2ff; }
.lcd-machines__fit {
  margin: 0;
  padding-inline-start: 16px;
  border-inline-start: 2px solid color-mix(in srgb, var(--lcd-ice) 50%, transparent);
  color: var(--lcd-ink-soft);
  font-size: 0.92rem;
  max-width: 52rem;
}

/* ---- contact ------------------------------------------------------------ */
.lcd-contact { position: relative; color: var(--lcd-ink); }
.lcd-contact__inner {
  box-sizing: border-box;
  width: min(calc(100% - 24px), 900px);
  margin: calc(var(--lcd-nav-h) + 24px) auto 40px;
  padding: clamp(28px, 5vw, 64px) clamp(18px, 3vw, 48px);
  border: 1px solid var(--lcd-line);
  border-radius: 28px;
  background: rgb(6 9 14 / 0.72);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  backdrop-filter: blur(16px) saturate(1.15);
  display: grid;
  gap: clamp(24px, 4vw, 40px);
}
.lcd-contact__head { display: grid; gap: 12px; }
.lcd-contact__title {
  margin: 0;
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
}
.lcd-contact__text { margin: 0; color: var(--lcd-ink-soft); }
.lcd-contact__cards {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.lcd-contact__card {
  display: grid;
  gap: 12px;
  align-content: start;
  justify-items: start;
  padding: 24px;
  border: 1px solid var(--lcd-line);
  border-radius: 20px;
  background: rgb(232 237 245 / 0.03);
}
.lcd-contact__card h2 { margin: 0; font-size: 1.15rem; }
.lcd-contact__card p { margin: 0; font-size: 0.92rem; color: var(--lcd-ink-soft); }
.lcd-contact__card--person { border-color: rgb(37 211 102 / 0.35); }
.lcd-contact__foot {
  display: grid;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--lcd-ink-faint);
}
.lcd-contact__foot p { margin: 0; }
.lcd-contact__foot a { color: var(--lcd-ice); }

/* ---- wide screens ------------------------------------------------------- */
@media (min-width: 990px) {
  .lcd-world--plate.is-live .lcd-world__riders {
    inset: auto 3% 22% 44%;
    justify-content: flex-end;
  }
}

/* ---- phones ------------------------------------------------------------- */
@media (max-width: 749px) {
  .lcd-scenes__tab { min-height: 34px; padding: 0 11px; font-size: 0.66rem; }
  .lcd-product__after { border-radius: 20px; padding: 20px; }
  .lcd-world--plate.is-live .lcd-world__riders { inset: auto 0 44%; gap: 10px; }
  .lcd-world--plate.is-live .lcd-rider { width: 40%; }
  .lcd-host__state { margin-inline-start: 0; }
  .lcd-contact__inner,
  .lcd-machines__inner { border-radius: 20px; }
  .lcd-contact__chat { width: 100%; }
  .lcd-contact__chat .lcd-btn { flex: 1 1 100%; }
}

/* ---- examples: five finished pieces, still ---------------------------- */
.lcd-works {
  position: relative;
  color: var(--lcd-ink);
}
.lcd-works__inner {
  box-sizing: border-box;
  width: min(calc(100% - 24px), var(--page-width, 1200px));
  margin: 24px auto;
  padding: clamp(28px, 5vw, 64px) clamp(18px, 3vw, 48px);
  border: 1px solid var(--lcd-line);
  border-radius: 28px;
  background: rgb(6 9 14 / 0.72);
}
.lcd-works__head {
  display: grid;
  gap: 10px;
  max-width: 40rem;
  margin-bottom: clamp(24px, 4vw, 40px);
}
.lcd-works__title {
  margin: 0;
  font-size: clamp(1.9rem, 4.2vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.lcd-works__intro {
  margin: 0;
  color: var(--lcd-ink-soft);
  font-size: 1.05rem;
  line-height: 1.5;
}
.lcd-works__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 24px 16px;
  grid-template-columns: 1fr;
}
.lcd-works__figure {
  display: grid;
  gap: 12px;
  margin: 0;
}
.lcd-works__media {
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid var(--lcd-line);
  border-radius: 16px;
  background: var(--lcd-surface);
}
.lcd-works__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 200ms var(--lcd-ease-out, ease);
}
.lcd-works__card:hover img,
.lcd-works__card:focus-within img {
  transform: scale(1.03);
}
.lcd-works__caption {
  display: grid;
  gap: 4px;
  justify-items: start;
}
.lcd-works__code {
  margin: 0;
  color: var(--lcd-ice);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
}
.lcd-works__name {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.3;
}
.lcd-works__text {
  margin: 0;
  color: var(--lcd-ink-soft);
  font-size: 0.95rem;
  line-height: 1.5;
}
.lcd-works__view {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 4px;
  color: var(--lcd-ice);
  font-size: 0.95rem;
  text-decoration: none;
  cursor: pointer;
}
.lcd-works__view:hover { text-decoration: underline; }
.lcd-works__view:focus-visible {
  outline: 2px solid var(--lcd-ice);
  outline-offset: 3px;
  border-radius: 4px;
}
@media (min-width: 700px) {
  .lcd-works__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .lcd-works__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 749px) {
  .lcd-works__inner { border-radius: 20px; }
}

/* ---- asked for less motion --------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .lcd-works__media img { transition: none; }
  .lcd-works__card:hover img,
  .lcd-works__card:focus-within img { transform: none; }
  .lcd-world--plate.is-live .lcd-rider__art img,
  .lcd-lamp { animation: none !important; }
  .lcd-world--plate.is-live .lcd-world__riders {
    position: relative;
    inset: auto;
    flex-wrap: wrap;
  }
}