/* Forge UI landing v3 (SITE-01): A forge hero + C material lab, in the B "reel" language.
   Typefaces: SIL OFL (src/fonts/licenses). Cyrillic + Latin subsets only. */

@font-face {
  font-family: 'Unbounded';
  src: url(/src/fonts/unbounded-cyrillic-v1.woff2) format('woff2');
  font-weight: 200 900;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Unbounded';
  src: url(/src/fonts/unbounded-latin-v1.woff2) format('woff2');
  font-weight: 200 900;
  font-display: swap;
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Tight';
  src: url(/src/fonts/inter-tight-cyrillic-v1.woff2) format('woff2');
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter Tight';
  src: url(/src/fonts/inter-tight-latin-v1.woff2) format('woff2');
  font-weight: 100 900;
  font-display: swap;
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant';
  src: url(/src/fonts/cormorant-italic-cyrillic-v1.woff2) format('woff2');
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Cormorant';
  src: url(/src/fonts/cormorant-italic-latin-v1.woff2) format('woff2');
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url(/src/fonts/jetbrains-mono-cyrillic-v1.woff2) format('woff2');
  font-weight: 100 800;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url(/src/fonts/jetbrains-mono-latin-v1.woff2) format('woff2');
  font-weight: 100 800;
  font-display: swap;
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --emerald-800: #075e30;
  --emerald-600: #0e9a4b;
  --emerald-500: #19c062;
  --emerald-400: #3ee082;
  --emerald-200: #b6f5cf;
  --ember-500: #ff8a3d;
  --ember-300: #ffc46b;
  --hot: #fff3dc;
  --graphite: #050706;
  --paper: #f1ece2;
  --ink: #111311;
  --hl-line: rgba(17, 19, 17, 0.12);
  --hl-muted: #5d615d;
  --you: #0e9a4b;
  --agent: #3b4dff;
  --font-display: 'Unbounded', 'Inter Tight', system-ui, sans-serif;
  --font-sans: 'Inter Tight', system-ui, -apple-system, sans-serif;
  --font-serif: 'Cormorant', Georgia, serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  color-scheme: dark;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Rubber-band overscroll shows paper: the page opens and ends on light frames. */
  background: var(--paper);
}
body {
  margin: 0;
  background: var(--graphite);
  color: #eef3f0;
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img,
svg,
canvas {
  display: block;
}
button {
  font: inherit;
  color: inherit;
}
a {
  color: inherit;
}
h1,
h2,
p {
  margin: 0;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.mono {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
:focus-visible {
  outline: 2px solid var(--emerald-400);
  outline-offset: 3px;
}
.skip {
  position: absolute;
  z-index: 100;
  left: 16px;
  top: -60px;
  padding: 10px 16px;
  border-radius: 10px;
  background: #fff;
  color: #000;
  text-decoration: none;
}
.skip:focus {
  top: 16px;
}
.grain {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ---------- Glass beam CTA (owner's choice) */
.cta {
  --h: 64px;
  --tx: 0px;
  --ty: 0px;
  --s: 1;
  --mx: 50%;
  --my: 50%;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 18px;
  height: var(--h);
  padding: 0 9px 0 30px;
  border-radius: 999px;
  isolation: isolate;
  text-decoration: none;
  white-space: nowrap;
  font: 600 17px/1 var(--font-sans);
  letter-spacing: -0.012em;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  transform: translate3d(var(--tx), var(--ty), 0) scale(var(--s));
  transition:
    transform 0.22s var(--ease-out),
    box-shadow 0.5s var(--ease-out),
    background 0.3s;
}
.cta.is-pressed {
  --s: 0.965;
}
.cta__label {
  position: relative;
  display: inline-flex;
  height: 1.3em;
  line-height: 1.3em;
  overflow: hidden;
  transform: translate3d(calc(var(--tx) * 0.35), calc(var(--ty) * 0.35), 0);
  transition: opacity 0.25s;
}
.cta__ch {
  position: relative;
  display: inline-block;
  white-space: pre;
  transition: transform 0.6s var(--ease-out);
  transition-delay: calc(var(--i) * 13ms);
}
.cta__ch::after {
  content: attr(data-c);
  position: absolute;
  left: 0;
  top: 100%;
}
.cta:hover .cta__ch,
.cta:focus-visible .cta__ch {
  transform: translateY(-100%);
}
.cta__icon {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: calc(var(--h) - 18px);
  height: calc(var(--h) - 18px);
  border-radius: 50%;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.16);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  transition: opacity 0.25s;
}
.cta__icon svg {
  position: absolute;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.55s var(--ease-out);
}
.cta__icon svg + svg {
  transform: translateX(-170%);
}
.cta:hover .cta__icon svg:first-child {
  transform: translateX(170%);
}
.cta:hover .cta__icon svg + svg {
  transform: none;
}
.cta__status {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
}
.cta.is-loading .cta__label,
.cta.is-loading .cta__icon {
  opacity: 0;
}
.cta.is-loading .cta__status {
  opacity: 1;
}
.cta__light {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    130px circle at var(--mx) var(--my),
    rgba(255, 255, 255, 0.28),
    transparent 65%
  );
  transition: opacity 0.4s;
}
.cta:hover .cta__light {
  opacity: 1;
}
.cta--glass {
  color: #fff;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.06));
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  backdrop-filter: blur(18px) saturate(170%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08),
    0 18px 44px -16px rgba(0, 0, 0, 0.7);
}
.cta--glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.85),
    rgba(255, 255, 255, 0.1) 32%,
    rgba(62, 224, 130, 0.7) 72%,
    rgba(255, 255, 255, 0.45)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.cta--glass::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: 14%;
  right: 14%;
  bottom: -16px;
  height: 30px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(62, 224, 130, 0.8), transparent);
  filter: blur(12px);
  opacity: 0.45;
  pointer-events: none;
  transition:
    opacity 0.45s,
    transform 0.6s var(--ease-out);
}
.cta--glass:hover::after {
  opacity: 1;
  transform: scaleX(1.2);
}
.cta__beam {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
}
.cta__beam::before {
  content: '';
  position: absolute;
  top: -40%;
  bottom: -40%;
  left: -70%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  transform: skewX(-18deg);
  transition: left 1s var(--ease-out);
}
.cta:hover .cta__beam::before,
.cta:focus-visible .cta__beam::before {
  left: 130%;
}
.cta--glass:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.9);
  outline-offset: 6px;
}
.on-light .cta--glass:focus-visible,
.on-light :focus-visible {
  outline-color: var(--you);
}
.cta--glass.is-pressed {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.1));
}
.cta--sm {
  --h: 44px;
  gap: 12px;
  padding: 0 6px 0 20px;
  font-size: 14.5px;
}
.cta--sm .cta__icon svg {
  width: 15px;
  height: 15px;
}
.on-light .cta--glass {
  color: #0f1412;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.46));
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 -1px 0 rgba(0, 0, 0, 0.05),
    0 16px 36px -16px rgba(20, 40, 30, 0.42);
}
.on-light .cta--glass::before {
  background: linear-gradient(
    135deg,
    #fff,
    rgba(255, 255, 255, 0.25) 32%,
    rgba(25, 192, 98, 0.7) 72%,
    rgba(255, 255, 255, 0.85)
  );
}
.on-light .cta__beam::before {
  background: linear-gradient(100deg, transparent, rgba(25, 192, 98, 0.3), transparent);
}
.on-light .cta__icon {
  background: rgba(15, 20, 18, 0.07);
  box-shadow: inset 0 0 0 1px rgba(15, 20, 18, 0.08);
}
.on-light .cta__light {
  background: radial-gradient(
    130px circle at var(--mx) var(--my),
    rgba(25, 192, 98, 0.2),
    transparent 65%
  );
}
/* «Попробовать» (owner's request 05.10): the same pill as clear glass — a capsule with emerald
   dust and smoke inside (landing-capsule.js) that follow the cursor. */
.cta--capsule {
  color: #0f1412;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.5),
    rgba(255, 255, 255, 0.1) 55%,
    rgba(255, 255, 255, 0.28)
  );
  -webkit-backdrop-filter: blur(6px) saturate(140%);
  backdrop-filter: blur(6px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -12px 20px -12px rgba(14, 154, 75, 0.28),
    0 14px 30px -16px rgba(20, 60, 36, 0.4);
  transition:
    transform 0.22s var(--ease-out),
    box-shadow 0.5s var(--ease-out),
    opacity 0.35s,
    filter 0.35s;
}
.cta--capsule::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    160deg,
    #fff,
    rgba(255, 255, 255, 0.2) 35%,
    rgba(62, 224, 130, 0.55) 75%,
    rgba(255, 255, 255, 0.85)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
/* The glass tube's long highlight along the top. */
.cta--capsule::after {
  content: '';
  position: absolute;
  z-index: 1;
  left: 24px;
  right: 24px;
  top: 5px;
  height: 36%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));
  opacity: 0.75;
  pointer-events: none;
}
.cta__dust {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  pointer-events: none;
}
.cta--capsule .cta__label,
.cta--capsule .cta__icon {
  z-index: 2;
}
.cta--capsule .cta__icon {
  background: rgba(255, 255, 255, 0.5);
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 0 0 1px rgba(14, 154, 75, 0.2);
}
.cta--capsule:focus-visible {
  outline: 2px solid var(--you);
  outline-offset: 6px;
}
/* Only the smoke moves (owner's request 05.10): no magnet, no letter roll, no arrow slide. */
.cta--capsule {
  transform: scale(var(--s));
}
.cta--capsule .cta__label,
.cta--capsule:hover .cta__ch,
.cta--capsule:focus-visible .cta__ch {
  transform: none;
}
.cta--capsule .cta__icon svg + svg {
  display: none;
}
.cta--capsule:hover .cta__icon svg:first-child {
  transform: none;
}
.cta--capsule.is-dispersing {
  opacity: 0;
  filter: blur(6px);
  --s: 1.08;
}
.hero-or {
  font: 500 15px/1 var(--font-sans);
  color: var(--hl-muted);
}
/* Boot screen (owner's request 05.10): the wordmark assembles from its pixels, then the sheet
   parts. Static from the first paint; if the script never runs it lifts itself after 5 s. */
.boot {
  position: fixed;
  inset: 0;
  z-index: 1001;
  animation: boot-safety 0.5s 5s forwards;
}
.boot.is-live {
  animation: none;
}
@keyframes boot-safety {
  to {
    opacity: 0;
    visibility: hidden;
  }
}
.boot-sheet {
  position: absolute;
  left: 0;
  right: 0;
  height: 50.5%;
  background: #f6f2ea;
  transition: transform 0.85s var(--ease-in-out);
}
.boot-sheet--top {
  top: 0;
}
.boot-sheet--bottom {
  bottom: 0;
}
.boot.is-open .boot-sheet--top {
  transform: translateY(-101%);
}
.boot.is-open .boot-sheet--bottom {
  transform: translateY(101%);
}
.boot.is-open {
  pointer-events: none;
}
.boot-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.3s;
}
.boot-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(62vw, 660px);
  height: auto;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition:
    opacity 0.3s,
    transform 0.85s var(--ease-in-out);
}
.boot.is-snapped .boot-logo {
  opacity: 1;
}
.boot.is-snapped .boot-canvas,
.boot.is-open .boot-canvas {
  opacity: 0;
}
.boot.is-open .boot-logo {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.9);
}
.boot-count {
  position: absolute;
  left: 28px;
  bottom: 30px;
  font-size: 52px;
  letter-spacing: -0.04em;
  color: var(--ink);
  transition: opacity 0.3s;
}
.boot-line {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 20px;
  height: 2px;
  background: rgba(17, 19, 17, 0.1);
  transition: opacity 0.3s;
}
.boot-line b {
  display: block;
  height: 100%;
  background: var(--emerald-600);
  transform-origin: 0 50%;
  transform: scaleX(0);
}
.boot.is-open .boot-count,
.boot.is-open .boot-line {
  opacity: 0;
}
/* The dust that leaves the capsule, and the studio's dark green opening from the click. */
.capsule-dust {
  position: fixed;
  inset: 0;
  z-index: 999;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
}
.studio-reveal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  background:
    radial-gradient(1200px 520px at 50% -10%, rgba(62, 224, 130, 0.14), transparent 70%),
    #101813;
  clip-path: circle(0 at 50% 50%);
}
.studio-reveal__mark {
  display: grid;
  justify-items: center;
  gap: 18px;
  color: rgba(233, 239, 235, 0.72);
  font: 500 12px/1 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.studio-reveal__mark img {
  width: min(260px, 50vw);
  height: auto;
}

.cta-ghost {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 64px;
  padding: 0 26px;
  border-radius: 999px;
  color: rgba(233, 239, 235, 0.86);
  text-decoration: none;
  font: 500 16px/1 var(--font-sans);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.03);
  transition:
    background 0.3s,
    border-color 0.3s,
    color 0.3s;
}
.cta-ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
}
.cta-ghost svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.on-light .cta-ghost {
  color: rgba(15, 20, 18, 0.82);
  border-color: rgba(15, 20, 18, 0.18);
  background: rgba(255, 255, 255, 0.35);
}

/* ---------- Header · pills over every section (owner's request 05.10, after lusion.co): the
   brand on the left; sound with a running wave, pause/replay, «Связаться» and «Меню» on the
   right. The menu is a card of big rolling links with the language switch and the sign-in. */
.top {
  position: fixed;
  z-index: 60;
  inset: 12px 14px auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  pointer-events: none;
  color: var(--ink);
}
.top > * {
  pointer-events: auto;
}
.brand,
.pill {
  background: rgba(251, 249, 244, 0.78);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  box-shadow:
    0 0 0 1px rgba(17, 19, 17, 0.07),
    0 10px 28px -18px rgba(17, 19, 17, 0.45);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 18px 0 12px;
  border-radius: 999px;
  text-decoration: none;
}
/* The whole lacquer wordmark (owner's request 05.10), not a cropped «F» and a typed name. */
.brand .brand-mark {
  width: auto;
  height: 30px;
  margin: 0 2px 0 0;
  filter: drop-shadow(0 1px 1px rgba(7, 60, 30, 0.18));
}
.brand-tag {
  font-size: 10.5px;
  color: var(--hl-muted);
  white-space: nowrap;
}
/* The caption's turning word (landing-brand.js): the slot eases to the shown word's width; the
   leaving letters drift up into a soft blur one after another, the new ones settle from below. */
.brand-swap {
  position: relative;
  display: inline-block;
  height: 1.25em;
  vertical-align: top;
  transition: width 0.95s cubic-bezier(0.65, 0, 0.35, 1);
}
.brand-word {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
}
.brand-word > span {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.55em);
  filter: blur(2.5px);
  transition:
    opacity 0.55s ease,
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.6s ease;
  transition-delay: calc(var(--i) * 32ms);
}
.brand-word.is-on > span {
  opacity: 1;
  transform: none;
  filter: none;
  transition-delay: calc(140ms + var(--i) * 32ms);
}
.brand-word.is-off > span {
  opacity: 0;
  transform: translateY(-0.55em);
  filter: blur(2.5px);
}
.tools {
  display: flex;
  align-items: center;
  gap: 6px;
}
.pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  color: var(--ink);
  font: 500 11.5px/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background 0.25s,
    color 0.25s;
}
.pill:hover {
  background: rgba(255, 255, 255, 0.95);
}
.pill i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  transition: transform 0.4s var(--ease-out);
}
.pill:hover i {
  transform: scale(1.7);
}
.pill--round {
  width: 44px;
  padding: 0;
}
.pill--round svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}
#motion-toggle .i-play,
#motion-toggle[aria-pressed='true'] .i-pause {
  display: none;
}
#motion-toggle[aria-pressed='true'] .i-play {
  display: block;
}
.pill--sound {
  width: 62px;
  padding: 0;
}
.pill--sound svg {
  width: 30px;
  height: 14px;
  overflow: visible;
}
.pill--sound path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pill--sound[aria-pressed='true'] {
  background: var(--ink);
  color: #f6f3ea;
}
.pill--menu i + i {
  margin-left: -6px;
}
.pill--menu[aria-expanded='true'] {
  background: var(--ink);
  color: #f6f3ea;
}
/* The menu: a card under the pills, big links that roll letter by letter. */
.menu {
  position: absolute;
  top: 54px;
  right: 0;
  width: min(400px, calc(100vw - 28px));
  padding: 18px 24px 18px;
  border-radius: 26px;
  background: #fbf9f4;
  box-shadow:
    0 0 0 1px rgba(17, 19, 17, 0.07),
    0 40px 80px -30px rgba(17, 19, 17, 0.45);
  clip-path: inset(0 0 100% 0 round 26px);
  opacity: 0;
  transition:
    clip-path 0.55s var(--ease-out),
    opacity 0.3s;
}
.menu.is-open {
  clip-path: inset(0 0 0 0 round 26px);
  opacity: 1;
}
.menu-links {
  margin: 0;
  padding: 0;
  list-style: none;
}
.menu-links li {
  border-bottom: 1px solid var(--hl-line);
  opacity: 0;
  transform: translateY(16px);
  transition:
    transform 0.6s var(--ease-out),
    opacity 0.4s;
}
.menu.is-open .menu-links li {
  opacity: 1;
  transform: none;
}
.menu.is-open .menu-links li:nth-child(2) {
  transition-delay: 0.05s;
}
.menu.is-open .menu-links li:nth-child(3) {
  transition-delay: 0.1s;
}
.menu.is-open .menu-links li:nth-child(4) {
  transition-delay: 0.15s;
}
.menu.is-open .menu-links li:nth-child(5) {
  transition-delay: 0.2s;
}
.menu-links a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0 11px;
  color: var(--ink);
  text-decoration: none;
  font: 700 28px/1.05 var(--font-display);
  letter-spacing: -0.05em;
}
.menu-links a > .mono {
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--hl-muted);
}
.roll {
  display: inline-flex;
  flex-wrap: wrap;
}
.roll-ch {
  display: inline-block;
  height: 1.1em;
  overflow: hidden;
}
.roll-ch span {
  display: block;
  transition: transform 0.5s var(--ease-out) calc(var(--i) * 14ms);
}
.menu-links a:hover .roll-ch span,
.menu-links a:focus-visible .roll-ch span {
  transform: translateY(-100%);
}
.menu-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
}
.lang {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  border: 1px solid var(--hl-line);
}
.lang button {
  padding: 7px 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font: 500 11px/1 var(--font-mono);
  color: var(--hl-muted);
  cursor: pointer;
}
.lang button[aria-pressed='true'] {
  background: var(--ink);
  color: var(--paper);
}
.signin {
  font: 500 11px/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hl-muted);
  text-decoration: none;
}
.signin:hover {
  color: var(--ink);
}

/* ---------- Hero · «Монтажная»: the page's own headline is edited live (owner's choice) */
.hero {
  position: relative;
  isolation: isolate;
  min-height: max(100vh, 760px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 1fr auto auto;
  padding: 64px 32px 0;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
  color-scheme: light;
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.35;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .3  0 0 0 0 .27  0 0 0 0 .2  0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.hero-stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  align-items: center;
  gap: 40px;
  min-width: 0;
  padding: 44px 0 12px;
}
.hero-title {
  --fit: 104px;
  position: relative;
  min-width: 0;
  font: 800 var(--fit) / 0.96 var(--font-sans);
  letter-spacing: -0.055em;
}
.hero-rows {
  display: block;
}
.hero-row {
  display: block;
  width: max-content;
  white-space: nowrap;
}
.hero-word {
  display: inline-block;
}
.hero-word--weight {
  font-weight: 320;
}
/* The headline's word that reassembles into others (landing-morph.js): an invisible copy of the
   widest word holds the line, the letters ride on top of it in em. */
.hero-morph {
  position: relative;
}
.hero-morph__ghost {
  visibility: hidden;
}
.hero-morph__letters {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero-morph__letters > span,
.hero-morph__probe {
  position: absolute;
  left: 0;
  top: 0;
  white-space: pre;
}
.hero-morph__probe {
  visibility: hidden;
}
.hero-accent {
  position: relative;
  display: inline-block;
  margin-top: 0.06em;
  padding-right: 0.06em;
  font: italic 300 0.92em/1 var(--font-sans);
  letter-spacing: -0.04em;
  color: #8a8e8a;
  transition: color 0.4s;
}
.hero-accent.is-serif {
  font: italic 600 1.12em/1 var(--font-serif);
  letter-spacing: -0.01em;
  color: var(--you);
}
.hero-underline {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.08em;
  width: 100%;
  height: 0.22em;
  overflow: visible;
}
.hero-underline path {
  fill: none;
  stroke: var(--you);
  stroke-width: 6;
  stroke-linecap: round;
  /* The gap is longer than the path, so a hidden stroke leaves no round-cap dot. */
  stroke-dasharray: 1 2;
  stroke-dashoffset: var(--draw, 1);
}

/* Finale at «Готово» (owner's request 05.10): the lacquer wordmark stamped onto the page and
   the rings that run across it from under the logo; the access note «Ты» lifts with a shadow. */
.hero-dots {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.hero-stamp {
  position: absolute;
  pointer-events: none;
  transform-origin: 50% 100%;
  will-change: transform, opacity;
}
.hero-stamp img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
}
.hero-note {
  transition:
    color 0.6s,
    text-shadow 0.6s;
}
.hero-note.is-lifted {
  color: var(--ink);
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9),
    0 3px 12px rgba(40, 30, 10, 0.28);
}
/* The first loop's pointer at the sound switch: above the site header, label left of the arrow. */
.hero-cursor.sound-guide {
  position: fixed;
  z-index: 61;
  flex-direction: row-reverse;
  pointer-events: none;
}
.hero-cursor.sound-guide span {
  margin-top: 18px;
  border-radius: 999px 4px 999px 999px;
}
#sound-toggle.is-hint {
  border-color: var(--agent);
  animation: sound-hint 1.3s ease-out infinite;
}
@keyframes sound-hint {
  from {
    box-shadow: 0 0 0 0 rgba(59, 77, 255, 0.45);
  }
  to {
    box-shadow: 0 0 0 14px rgba(59, 77, 255, 0);
  }
}

/* Editor overlay: selection frame and two cursors */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}
.hero-select {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  border: 1.5px solid var(--sel, var(--you));
  opacity: 0;
  transition: opacity 0.25s;
}
.hero-select.is-on {
  opacity: 1;
}
.hero-select i {
  position: absolute;
  width: 9px;
  height: 9px;
  background: #fff;
  border: 1.5px solid var(--sel, var(--you));
}
.hero-select i:nth-child(1) {
  left: -5px;
  top: -5px;
}
.hero-select i:nth-child(2) {
  right: -5px;
  top: -5px;
}
.hero-select i:nth-child(3) {
  left: -5px;
  bottom: -5px;
}
.hero-select i:nth-child(4) {
  right: -5px;
  bottom: -5px;
}
.hero-select i:nth-child(5) {
  right: -5px;
  top: calc(50% - 4.5px);
}
.hero-select i:nth-child(6) {
  left: -5px;
  top: calc(50% - 4.5px);
}
.hero-select em {
  position: absolute;
  left: -1.5px;
  bottom: calc(100% + 6px);
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--sel, var(--you));
  color: #fff;
  font: 500 10px/1.4 var(--font-mono);
  font-style: normal;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.hero-select b {
  position: absolute;
  left: 50%;
  top: calc(100% + 8px);
  transform: translateX(-50%);
  padding: 3px 7px;
  border-radius: 4px;
  background: var(--sel, var(--you));
  color: #fff;
  font: 500 10.5px/1.3 var(--font-mono);
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.hero-cursor {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: flex-start;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.3s;
  will-change: transform;
}
.hero-cursor.is-on {
  opacity: 1;
}
.hero-cursor svg {
  width: 22px;
  height: 22px;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25));
  transition: transform 0.12s;
}
.hero-cursor path {
  stroke: #fff;
  stroke-width: 1.4;
}
.hero-cursor span {
  margin-top: 16px;
  padding: 4px 8px;
  border-radius: 999px 999px 999px 4px;
  color: #fff;
  font: 600 12px/1 var(--font-sans);
  white-space: nowrap;
}
.hero-cursor--you path {
  fill: var(--you);
}
.hero-cursor--you span {
  background: var(--you);
}
.hero-cursor--agent path {
  fill: var(--agent);
}
.hero-cursor--agent span {
  background: var(--agent);
}
.hero-cursor.is-click svg {
  transform: scale(0.85);
}

/* Inspector: the properties of the selected layer, then its code — in the Studio's liquid glass
   (owner's request 05.10): clear and glossy, the light leaning toward the cursor, a prismatic rim,
   and in Chromium a lens at the edge that bends what lies behind (landing-liquid.js). */
.hero-inspector {
  position: relative;
  align-self: start;
  margin-top: 8px;
  overflow: hidden;
  isolation: isolate;
  border-radius: 22px;
  background: linear-gradient(
    165deg,
    rgba(255, 255, 255, 0.4) 0%,
    rgba(255, 255, 255, 0.08) 30%,
    rgba(255, 255, 255, 0.03) 62%,
    rgba(255, 255, 255, 0.22) 100%
  );
  -webkit-backdrop-filter: blur(1.5px) saturate(1.5) brightness(1.04);
  backdrop-filter: blur(1.5px) saturate(1.5) brightness(1.04);
  box-shadow:
    inset 0 2px 1px -1px rgba(255, 255, 255, 1),
    inset 2px 0 1px -1px rgba(255, 255, 255, 0.85),
    inset 0 -1px 0 rgba(255, 255, 255, 0.55),
    inset -1px 0 0 rgba(255, 255, 255, 0.4),
    inset 0 0 26px -4px rgba(255, 255, 255, 0.95),
    inset 0 -30px 36px -32px rgba(25, 192, 98, 0.6),
    0 2px 6px -2px rgba(20, 40, 28, 0.12),
    0 34px 60px -30px rgba(20, 40, 28, 0.5);
  font-size: 13px;
}
.hero-inspector.has-lens {
  -webkit-backdrop-filter: var(--lens) blur(1px) saturate(1.5) brightness(1.04);
  backdrop-filter: var(--lens) blur(1px) saturate(1.5) brightness(1.04);
}
/* The gloss: a soft highlight where the light falls, and a streak across the drop. */
.hero-inspector::before,
.hero-inspector::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}
.hero-inspector::before {
  z-index: 3;
  background:
    radial-gradient(
      70% 48% at var(--lx, 22%) var(--ly, 0%),
      rgba(255, 255, 255, 0.75),
      rgba(255, 255, 255, 0) 70%
    ),
    linear-gradient(
      118deg,
      rgba(255, 255, 255, 0) 50%,
      rgba(255, 255, 255, 0.32) 57%,
      rgba(255, 255, 255, 0) 65%
    );
  mix-blend-mode: soft-light;
}
/* A thin prismatic rim, as light splits at the edge of real glass. */
.hero-inspector::after {
  z-index: 4;
  padding: 1.2px;
  background: conic-gradient(
    from 200deg,
    rgba(255, 255, 255, 0.95),
    rgba(178, 255, 214, 0.8),
    rgba(160, 200, 255, 0.72),
    rgba(255, 206, 240, 0.72),
    rgba(255, 236, 190, 0.72),
    rgba(255, 255, 255, 0.95)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
/* The code tab (owner's request 05.10): the glass turns into matte retro plastic, opaque, like
   an old terminal's case; the tabs become keycaps. */
.hi-shell {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  opacity: 0;
  background:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='17'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='0.09' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #e4dece 0%, #d6cfbd 55%, #cbc3ae 100%);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.85),
    inset 0 -2px 0 rgba(120, 110, 86, 0.35),
    inset 0 0 0 1px rgba(110, 100, 78, 0.25);
  transition: opacity 0.45s;
  pointer-events: none;
}
.hero-inspector.is-code .hi-shell {
  opacity: 1;
}
.hero-inspector::before,
.hero-inspector::after {
  transition: opacity 0.45s;
}
.hero-inspector.is-code::before,
.hero-inspector.is-code::after {
  opacity: 0;
}
.hero-inspector.is-code {
  box-shadow:
    0 2px 0 rgba(255, 255, 255, 0.4),
    0 3px 8px -2px rgba(40, 32, 18, 0.25),
    0 30px 50px -28px rgba(40, 32, 18, 0.55);
}
.hero-inspector {
  min-height: 0;
  transition:
    box-shadow 0.45s,
    min-height 0.45s var(--ease-out);
}
.hero-inspector.is-code {
  min-height: 264px;
}
/* The maker's plate and the power light at the foot of the case. */
.hi-brand {
  position: absolute;
  left: 16px;
  bottom: 9px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: rgba(70, 62, 44, 0.55);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}
.hi-led {
  position: absolute;
  right: 18px;
  bottom: 12px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #39e07a;
  box-shadow:
    0 0 6px #39e07a,
    inset 0 -1px 1px rgba(0, 0, 0, 0.25);
}
.hi-vents {
  position: absolute;
  right: 32px;
  bottom: 11px;
  width: 44px;
  height: 7px;
  background: repeating-linear-gradient(90deg, rgba(80, 70, 50, 0.35) 0 2px, transparent 2px 6px);
  border-radius: 2px;
}
.hero-inspector.is-code .hi-tabs {
  border-bottom-color: transparent;
}
.hero-inspector.is-code .hi-tabs span {
  margin: 2px 2px 0;
  border-radius: 7px;
  background: linear-gradient(180deg, #f1ecdf, #e2dbca);
  color: #4a4535;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 3px 0 #b6ad96,
    0 4px 6px -2px rgba(60, 50, 30, 0.35);
  transform: translateY(-2px);
  transition:
    transform 0.12s,
    box-shadow 0.12s,
    background 0.2s,
    color 0.2s;
}
/* The pressed key, with its own small light. */
.hero-inspector.is-code .hi-tabs .is-on {
  background: linear-gradient(180deg, #d9d2c0, #cfc7b3);
  color: #23211a;
  box-shadow:
    inset 0 1px 2px rgba(60, 50, 30, 0.25),
    0 1px 0 #b6ad96;
  transform: translateY(0);
}
.hero-inspector.is-code .hi-tabs .is-on::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 7px;
  border-radius: 50%;
  background: #39e07a;
  box-shadow: 0 0 5px #39e07a;
  vertical-align: 1px;
}
/* Once the scene rests, the tabs are the visitor's to press. */
.hero-inspector.is-interactive .hi-tabs span {
  cursor: pointer;
}
.hero-inspector.is-interactive .hi-tabs span:not(.is-on):hover {
  color: var(--ink);
}
/* ...and the word «дизайн» can be dragged by hand. */
.hero.is-hands .hero-word--weight {
  cursor: ew-resize;
  touch-action: pan-y;
}
.hero.is-hands .hero-rows.is-dragging {
  cursor: ew-resize;
}
.hi-tabs {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 2px;
  padding: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.55);
  font-size: 10.5px;
  letter-spacing: 0.06em;
}
.hi-tabs span {
  flex: 1;
  padding: 7px 0;
  border-radius: 10px;
  text-align: center;
  color: rgba(17, 19, 17, 0.62);
  transition:
    background 0.3s,
    color 0.3s;
}
.hi-tabs .is-on {
  background: rgba(17, 19, 17, 0.84);
  color: #f6f3ea;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 6px 14px -8px rgba(0, 0, 0, 0.6);
}
.hi-props {
  padding: 14px 16px 16px;
  transition: opacity 0.3s;
}
/* The code covers the properties: they fade so they do not show through the smoked glass. */
.hero-inspector:has(.hi-code.is-on) .hi-props {
  opacity: 0;
}
.hi-layer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-weight: 600;
}
.hi-layer::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--sel, var(--hl-muted));
}
.hi-prop {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--hl-line);
  color: var(--hl-muted);
}
.hi-prop:last-child {
  border-bottom: 0;
}
.hi-prop b {
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.hi-prop.is-hot b {
  color: var(--sel, var(--you));
}
.hi-code {
  position: absolute;
  inset: 46px 12px 30px;
  z-index: 1;
  margin: 0;
  padding: 12px 14px 14px;
  overflow: hidden;
  border-radius: 14px;
  /* A phosphor CRT set into the plastic: a dark bezel, a curved dim glass, green light. */
  background: radial-gradient(130% 110% at 50% 42%, #11301d 0%, #08180d 60%, #030904 100%);
  box-shadow:
    0 0 0 3px #1b1c17,
    0 0 0 4.5px rgba(255, 255, 255, 0.35),
    inset 0 0 24px rgba(0, 0, 0, 0.9),
    inset 0 0 70px rgba(40, 255, 130, 0.07);
  color: #93ffb6;
  font: 500 11.5px/1.62 var(--font-mono);
  text-shadow: 0 0 6px rgba(70, 255, 140, 0.55);
  white-space: pre-wrap;
  opacity: 0;
  transform: scaleY(0.02);
  filter: brightness(2.4);
  transition:
    opacity 0.18s,
    transform 0.42s cubic-bezier(0.2, 0.9, 0.25, 1),
    filter 0.7s;
}
.hi-code.is-on {
  opacity: 1;
  transform: none;
  filter: none;
  animation: crt-flicker 5s steps(1) infinite;
}
/* Scanlines and the curve of the tube. */
.hi-code::before,
.hi-code::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}
.hi-code::before {
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.32) 0 1px, transparent 1px 3px);
}
.hi-code::after {
  background:
    radial-gradient(120% 95% at 50% 50%, transparent 58%, rgba(0, 0, 0, 0.6) 100%),
    linear-gradient(165deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0) 38%);
}
@keyframes crt-flicker {
  0%,
  100% {
    opacity: 1;
  }
  41% {
    opacity: 0.97;
  }
  42% {
    opacity: 1;
  }
  77% {
    opacity: 0.985;
  }
}
.hi-code .hi-prompt {
  color: #5fcf86;
  opacity: 0.85;
}
.hi-code .t {
  color: #c9ffdc;
}
.hi-code .a {
  color: #7ae69e;
}
.hi-code .s {
  color: #ffc46b;
  text-shadow: 0 0 6px rgba(255, 180, 60, 0.5);
}
.hi-code .caret {
  display: inline-block;
  width: 7px;
  height: 13px;
  margin-left: 1px;
  vertical-align: -2px;
  background: #93ffb6;
  box-shadow: 0 0 8px rgba(70, 255, 140, 0.9);
  animation: caret 1s steps(1) infinite;
}
@keyframes caret {
  50% {
    opacity: 0;
  }
}

/* Lead, access status and actions */
.hero-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 40px;
  padding: 18px 0 26px;
}
.hero-copy {
  max-width: 46ch;
}
.hero-lead {
  font-size: 19px;
  line-height: 1.5;
  color: var(--hl-muted);
}
.hero-note {
  margin-top: 14px;
  font-size: 10.5px;
  line-height: 1.6;
  color: var(--hl-muted);
  text-wrap: balance;
}
.hero-note span {
  display: block;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

/* Timeline strip: timecode, four tracks and the playhead */
.hero-timeline {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr) auto;
  align-items: center;
  margin: 0 -32px;
  padding: 0 32px;
  border-top: 1px solid var(--hl-line);
  user-select: none;
}
.ht-tc {
  display: grid;
  gap: 6px;
  padding: 12px 16px 12px 0;
  border-right: 1px solid var(--hl-line);
  font-size: 10.5px;
}
.ht-tc b {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.ht-tc span {
  color: var(--you);
}
.ht-tracks {
  position: relative;
  display: grid;
  grid-template-rows: repeat(4, 22px);
  align-content: center;
  padding: 10px 16px;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--hl-muted);
}
.ht-track {
  position: relative;
  display: flex;
  align-items: center;
  border-bottom: 1px dashed var(--hl-line);
}
.ht-track:last-of-type {
  border-bottom: 0;
}
.ht-track > span {
  flex: none;
  width: 110px;
}
.ht-lane {
  position: relative;
  display: block;
  flex: 1;
  height: 100%;
}
.ht-span {
  position: absolute;
  top: 50%;
  height: 3px;
  margin-top: -1.5px;
  border-radius: 3px;
  background: rgba(14, 154, 75, 0.22);
}
.ht-key {
  position: absolute;
  top: 50%;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border: 1.5px solid var(--hl-muted);
  background: var(--paper);
  transform: rotate(45deg);
  transition:
    background 0.2s,
    border-color 0.2s;
}
.ht-key.is-hit {
  border-color: var(--you);
  background: var(--you);
}
.ht-head {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1.5px;
  background: var(--ink);
  pointer-events: none;
  will-change: transform;
}
.ht-head::before {
  content: '';
  position: absolute;
  top: 2px;
  left: -5px;
  border: 6px solid transparent;
  border-top-color: var(--ink);
}
.hero-pause {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: 16px;
  padding: 8px 13px;
  border: 1px solid var(--hl-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.6);
  color: var(--ink);
  font-size: 10.5px;
  cursor: pointer;
}
.hero-pause:hover {
  background: #fff;
}
.hero-pause svg {
  width: 11px;
  height: 11px;
  fill: currentColor;
}
.hero-pause .i-play,
.hero-pause[aria-pressed='true'] .i-pause {
  display: none;
}
.hero-pause[aria-pressed='true'] .i-play {
  display: block;
}

/* ---------- Band */
.band {
  position: relative;
  padding: 44px 0 40px;
  border-block: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
/* «Type in 3D · Canvas» (owner's request 05.10): words on a turning ring, Forge's emerald. */
.type-ring {
  --ring-ink: #052814;
  --ring-dot: #0b6f37;
  position: relative;
  height: clamp(210px, 27vw, 330px);
  margin: 0 32px;
  border-radius: 28px;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  color: var(--ring-ink);
  font-family: var(--font-sans);
  background:
    radial-gradient(120% 90% at 50% 120%, #dcffe9, transparent 62%),
    var(--emerald-400);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 24px 50px -34px #1fbf63;
}
.type-ring.is-dragging {
  cursor: grabbing;
}
.type-ring canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.ring-tag,
.ring-hint {
  position: absolute;
  font-size: 10px;
  letter-spacing: 0.16em;
  opacity: 0.72;
  pointer-events: none;
}
.ring-tag {
  right: 22px;
  top: 18px;
}
.ring-hint {
  left: 22px;
  bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.ring-hint::before {
  content: '';
  width: 26px;
  height: 1px;
  background: currentColor;
}

/* ---------- Reel · scroll is time (B language) */
.reel {
  position: relative;
  height: 680vh;
  background: var(--paper);
}
.reel-pin {
  background: #0b0d0c;
}
.reel-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  overflow: hidden;
}
.reel-side {
  display: grid;
  align-content: center;
  gap: 18px;
  padding: 0 32px 0 40px;
  border-right: 1px solid rgba(255, 255, 255, 0.07);
}
.reel-eyebrow {
  font-size: 11px;
  color: var(--emerald-400);
}
.reel-title {
  font: 600 30px/1.08 var(--font-display);
  letter-spacing: -0.04em;
}
.reel-list {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  font-size: 11px;
}
.reel-list li {
  display: flex;
  gap: 14px;
  padding: 9px 0;
  color: rgba(238, 243, 240, 0.36);
  transition: color 0.3s;
}
.reel-list li.is-on {
  color: #fff;
}
.reel-list li.is-on::after {
  content: '';
  flex: 1;
  height: 1px;
  align-self: center;
  background: linear-gradient(90deg, #3ee082, transparent);
}
.reel-skip {
  justify-self: start;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 10.5px;
  color: rgba(238, 243, 240, 0.7);
  text-decoration: none;
}
.reel-skip:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
}
.reel-screen {
  position: relative;
  display: grid;
  place-items: center;
}
.reel-hud {
  position: absolute;
  left: 28px;
  right: 28px;
  top: 24px;
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: rgba(238, 243, 240, 0.55);
}
.reel-hud b {
  color: #fff;
  font-weight: 500;
}
.reel-dir {
  color: var(--emerald-400);
}
/* The chapter captions as chat messages (owner's request 05.10). */
/* The conversation as a real chat (owner's request 05.10): centred under the window, as wide as
   it, the agent's answers on the left and the visitor's requests on the right. */
.reel-chat {
  position: absolute;
  left: 50%;
  bottom: 52px;
  z-index: 4;
  display: grid;
  gap: 8px;
  width: min(760px, calc(100% - 56px));
  transform: translateX(-50%);
  pointer-events: none;
}
.reel-chat__who {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  color: rgba(238, 243, 240, 0.55);
}
.reel-chat__who i {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #8ff5c2, #19c062 55%, #0b6f37);
  box-shadow: 0 0 0 3px rgba(62, 224, 130, 0.14);
}
.reel-chat ol {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  transition: transform 0.38s var(--ease-out);
}
.reel-bubble {
  max-width: 100%;
  padding: 10px 14px 11px;
  border-radius: 18px 18px 18px 6px;
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 10px 26px -14px rgba(0, 0, 0, 0.6);
  font: 500 14.5px/1.38 var(--font-sans);
  color: rgba(238, 243, 240, 0.94);
  transform-origin: 0 100%;
  animation: bubble-in 0.38s var(--ease-out) both;
  transition: opacity 0.35s;
}
/* The agent on the left in glass; you on the right in the emerald of the «Ты» cursor. */
.reel-bubble--agent {
  align-self: flex-start;
  max-width: 88%;
}
.reel-bubble--you {
  align-self: flex-end;
  max-width: 82%;
  border-radius: 18px 18px 6px 18px;
  background: linear-gradient(180deg, #1fc36a, #0e9a4b);
  color: #f4fff8;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 10px 26px -14px rgba(14, 154, 75, 0.7);
  transform-origin: 100% 100%;
}
.reel-bubble.is-old {
  opacity: 0.7;
}
.reel-bubble.is-older {
  opacity: 0.38;
}
.reel-bubble.is-typing {
  display: inline-flex;
  gap: 4px;
  padding: 14px 15px;
}
.reel-bubble.is-typing i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(238, 243, 240, 0.72);
  animation: typing-dot 1s ease-in-out infinite;
}
.reel-bubble.is-typing i:nth-child(2) {
  animation-delay: 0.15s;
}
.reel-bubble.is-typing i:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes bubble-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.96);
  }
}
@keyframes typing-dot {
  0%,
  80%,
  100% {
    opacity: 0.3;
    transform: none;
  }
  40% {
    opacity: 1;
    transform: translateY(-3px);
  }
}
.reel-progress {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 26px;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.reel-progress i {
  height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
.reel-progress i::after {
  content: '';
  display: block;
  height: 100%;
  width: calc(var(--f, 0) * 100%);
  background: #3ee082;
}
.reel-window {
  --w: 760px;
  position: relative;
  width: min(var(--w), 86%);
  border-radius: 18px;
  background: #171a18;
  box-shadow:
    0 50px 100px -40px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(255, 255, 255, 0.08);
  overflow: hidden;
  container-type: inline-size;
  transition: border-radius 0.4s;
}
.reel-window.is-phone {
  border-radius: 34px;
}
.reel-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font: 500 10.5px/1 var(--font-mono);
  color: rgba(238, 243, 240, 0.45);
}
.reel-bar i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
}
.reel-bar span {
  margin-left: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.reel-canvas {
  position: relative;
  min-height: 360px;
  display: grid;
  place-items: center;
  padding: 28px;
}
.reel-backdrop {
  position: absolute;
  inset: 0;
  opacity: 0;
  background:
    radial-gradient(500px 360px at 30% 40%, rgba(25, 192, 98, 0.5), transparent 70%),
    radial-gradient(440px 360px at 72% 65%, rgba(59, 77, 255, 0.5), transparent 70%),
    radial-gradient(360px 300px at 62% 18%, rgba(255, 79, 176, 0.35), transparent 70%);
  transition: opacity 0.6s;
}
.reel-ui {
  position: relative;
  z-index: 1;
  width: min(420px, 100%);
  display: grid;
  gap: 14px;
  padding: 20px;
  border-radius: 22px;
  transition:
    background 0.5s,
    box-shadow 0.5s,
    border-radius 0.5s;
}
.reel-trail {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.reel-trail i {
  position: absolute;
  border-radius: 12px;
  border: 1.5px solid rgba(62, 224, 130, 0.5);
}
.reel-part {
  position: relative;
  border-radius: 12px;
  outline: 1.5px dashed transparent;
  transition: outline-color 0.3s;
}
/* A part appears as a dashed frame once the cursor has drawn it, and fills when a component is dropped. */
.reel-part.is-framed {
  outline-color: rgba(62, 224, 130, 0.55);
}
.reel-part.is-filled {
  outline-color: transparent;
}
.reel-part > * {
  opacity: 0;
  transform: scale(0.94);
  transition:
    opacity 0.35s,
    transform 0.45s var(--ease-spring);
}
.reel-part.is-filled > * {
  opacity: 1;
  transform: none;
}
.reel-head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 4px;
}
.reel-head .av {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(180deg, #3ee082, #0e9a4b);
}
.reel-head p span {
  display: block;
  font-weight: 600;
}
.reel-head small {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  color: rgba(238, 243, 240, 0.55);
}
.reel-stat {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  min-height: 70px;
}
.reel-stat div {
  padding: 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
}
.reel-stat span {
  font-size: 11.5px;
  color: rgba(238, 243, 240, 0.55);
}
.reel-stat b {
  display: block;
  margin-top: 4px;
  font: 700 24px/1 var(--font-sans);
  letter-spacing: -0.03em;
}
.reel-btn {
  min-height: 46px;
  display: grid;
}
.reel-btn span {
  display: grid;
  place-items: center;
  height: 46px;
  border-radius: 12px;
  background: linear-gradient(180deg, #3ee082, #0e9a4b);
  color: #04210f;
  font-weight: 700;
}
@container (max-width: 470px) {
  .reel-stat {
    grid-template-columns: 1fr;
  }
  .reel-canvas {
    padding: 18px;
  }
}
.reel-ui.is-glass {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05));
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  backdrop-filter: blur(20px) saturate(170%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}
.reel-ui.is-pixel {
  border-radius: 0;
  background: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  padding: 36px;
  border-image: url(/library/malachite-panel-normal.png) 12 fill / 36px stretch;
  image-rendering: pixelated;
  font-family: var(--font-mono);
}
.reel-ui.is-pixel .reel-btn span {
  border-radius: 0;
  background: none;
  color: #e4d2ae;
  border-image: url(/library/malachite-button-normal.png) 12 fill / 24px stretch;
  image-rendering: pixelated;
  text-transform: uppercase;
  font-size: 13px;
}
.reel-ui.is-pixel .reel-stat div {
  border-radius: 0;
  background: #13322b;
  box-shadow:
    0 0 0 3px #0b181a,
    0 0 0 6px #998052;
}
.reel-ui.is-pixel .av {
  border-radius: 0;
  background: #487d59;
  box-shadow: 0 0 0 3px #c2a164;
}
.reel-ui.is-pixel b {
  font-family: var(--font-mono);
  color: #e4d2ae;
}
/* Editor chrome in the reel window: tools, a component palette, options and a resize handle */
.reel-bar .reel-tools {
  display: flex;
  gap: 4px;
  margin-left: auto;
}
.reel-tools i {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: none;
  color: rgba(238, 243, 240, 0.4);
  transition:
    background 0.2s,
    color 0.2s;
}
.reel-tools svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.reel-tools .fill {
  fill: currentColor;
  stroke: none;
}
.reel-tools i.is-on {
  background: rgba(62, 224, 130, 0.16);
  color: #3ee082;
}
.reel-palette {
  position: absolute;
  left: 14px;
  top: 50%;
  z-index: 2;
  display: grid;
  gap: 6px;
  width: 136px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(23, 26, 24, 0.94);
  opacity: 0;
  transform: translate(-170px, -50%);
  transition:
    transform 0.45s var(--ease-out),
    opacity 0.3s;
}
.reel-palette.is-on {
  opacity: 1;
  transform: translate(0, -50%);
}
.reel-palette p {
  margin-bottom: 2px;
  font-size: 9.5px;
  color: rgba(238, 243, 240, 0.45);
}
.reel-palette span,
.reel-ghost {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  color: #e7ece9;
  font: 500 11.5px/1 var(--font-sans);
}
.reel-palette em,
.reel-ghost em {
  font-style: normal;
}
.reel-palette span.is-picked {
  outline: 1px solid rgba(62, 224, 130, 0.6);
  background: rgba(62, 224, 130, 0.12);
}
.pi {
  flex: none;
  width: 18px;
  height: 13px;
  border-radius: 3px;
  background: linear-gradient(
      90deg,
      #3ee082 0 34%,
      transparent 34% 44%,
      rgba(238, 243, 240, 0.5) 44% 100%
    )
    0 50% / 100% 4px no-repeat;
  box-shadow: inset 0 0 0 1px rgba(238, 243, 240, 0.25);
}
.pi-stat {
  background:
    linear-gradient(rgba(238, 243, 240, 0.55), rgba(238, 243, 240, 0.55)) 3px 3px / 6px 3px
      no-repeat,
    linear-gradient(#3ee082, #3ee082) 3px 8px / 10px 3px no-repeat;
}
.pi-btn {
  border-radius: 4px;
  background: #3ee082;
  box-shadow: none;
}
.reel-pop {
  position: absolute;
  right: 10px;
  top: 42px;
  z-index: 3;
  display: flex;
  gap: 4px;
  padding: 5px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  background: rgba(15, 18, 16, 0.96);
  box-shadow: 0 16px 30px -12px #000;
  font-size: 10px;
  opacity: 0;
  transform: translateY(-6px);
  transition:
    opacity 0.2s,
    transform 0.25s var(--ease-out);
}
.reel-pop.is-on {
  opacity: 1;
  transform: none;
}
.reel-pop span {
  padding: 6px 9px;
  border-radius: 7px;
  color: rgba(238, 243, 240, 0.72);
}
.reel-pop span.is-on {
  background: #3ee082;
  color: #04210f;
}
.reel-handle {
  position: absolute;
  right: 5px;
  top: 50%;
  z-index: 3;
  width: 6px;
  height: 46px;
  margin-top: -23px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.22);
  opacity: 0;
  transition:
    opacity 0.3s,
    background 0.2s;
}
.reel-handle.is-on {
  opacity: 1;
}
.reel-handle.is-held {
  background: #3ee082;
}

/* The cursor layer: the visitor's double builds the screen as the reel is scrolled */
.reel-overlay {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}
.reel-cursor {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: flex-start;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.3s;
  will-change: transform;
}
.reel-cursor.is-on {
  opacity: 1;
}
.reel-cursor svg {
  width: 22px;
  height: 22px;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45));
  transition: transform 0.12s;
}
.reel-cursor path {
  fill: var(--you);
  stroke: #fff;
  stroke-width: 1.4;
}
.reel-cursor span {
  margin-top: 16px;
  padding: 4px 8px;
  border-radius: 999px 999px 999px 4px;
  background: var(--you);
  color: #fff;
  font: 600 12px/1 var(--font-sans);
}
.reel-cursor.is-click svg {
  transform: scale(0.84);
}
.reel-draft {
  position: absolute;
  left: 0;
  top: 0;
  border: 1.5px solid #3ee082;
  border-radius: 12px;
  background: rgba(62, 224, 130, 0.07);
  opacity: 0;
}
.reel-size {
  position: absolute;
  left: 0;
  top: 0;
  padding: 3px 7px;
  border-radius: 4px;
  background: #3ee082;
  color: #04210f;
  font-size: 10px;
  letter-spacing: 0.03em;
  white-space: nowrap;
  opacity: 0;
}
.reel-ghost {
  position: absolute;
  left: 0;
  top: 0;
  border: 1px solid rgba(62, 224, 130, 0.6);
  background: rgba(23, 26, 24, 0.95);
  box-shadow: 0 14px 28px -10px #000;
  opacity: 0;
}
.reel-draft.is-on,
.reel-size.is-on,
.reel-ghost.is-on {
  opacity: 1;
}

.reel-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.reel-stage .reel-window {
  flex: none;
}
/* Chapter 07: the editor slides in beside the window — never over it — and fits its code. */
.reel-code {
  flex: none;
  width: 0;
  margin-left: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    width 0.7s var(--ease-out),
    margin-left 0.7s var(--ease-out),
    opacity 0.45s;
}
.reel-code.is-on {
  width: min(460px, 46%);
  margin-left: 36px;
  opacity: 1;
}
.rc-inner {
  width: min(460px, calc((100vw - 340px) * 0.46));
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  background: #0a0c0b;
  box-shadow: 0 50px 100px -40px rgba(0, 0, 0, 0.9);
}
.rc-tabs {
  display: flex;
  gap: 2px;
  padding: 8px 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: none;
}
.rc-tabs span {
  padding: 8px 12px 9px;
  border-radius: 8px 8px 0 0;
  color: rgba(238, 243, 240, 0.45);
  transition:
    color 0.25s,
    background 0.25s;
}
.rc-tabs span.is-on {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  box-shadow: inset 0 -2px 0 #3ee082;
}
.rc-body {
  min-height: 272px;
  margin: 0;
  padding: 16px 18px;
  overflow: hidden;
  font: 500 12.5px/1.7 var(--font-mono);
  color: #d9e2dc;
  white-space: pre;
}
.rc-body .ln {
  display: inline-block;
  width: 2ch;
  margin-right: 14px;
  color: rgba(238, 243, 240, 0.22);
  text-align: right;
}
.rc-body .t {
  color: #3ee082;
}
.rc-body .a {
  color: #9aa7ff;
}
.rc-body .s {
  color: #ffc46b;
}
.rc-body .caret {
  display: inline-block;
  width: 7px;
  height: 15px;
  margin-left: 1px;
  vertical-align: -3px;
  background: #3ee082;
  animation: caret 1s steps(1) infinite;
}
.rc-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 10.5px;
  color: rgba(238, 243, 240, 0.55);
  opacity: 0;
  transition: opacity 0.4s;
}
.rc-foot.is-on {
  opacity: 1;
}
.rc-foot i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3ee082;
  box-shadow: 0 0 10px rgba(62, 224, 130, 0.8);
}
.rc-foot b {
  margin-left: auto;
  font-weight: 500;
  color: #fff;
}

/* ---------- Material lab · seven worlds */
.mat {
  --ink: #ffffff;
  --muted: rgba(255, 255, 255, 0.74);
  --line: rgba(255, 255, 255, 0.2);
  --chip: rgba(255, 255, 255, 0.1);
  --viz: rgba(255, 255, 255, 0.9);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--ink);
  view-transition-name: forge-materials;
  transition: color 0.6s var(--ease-out);
}
.mat[data-material='relief'] {
  --ink: #273041;
  --muted: rgba(39, 48, 65, 0.66);
  --line: rgba(39, 48, 65, 0.12);
  --chip: rgba(255, 255, 255, 0.5);
  --viz: #19a85a;
}
.mat[data-material='clay'] {
  --ink: #4a2a20;
  --muted: rgba(74, 42, 32, 0.68);
  --line: rgba(74, 42, 32, 0.15);
  --chip: rgba(255, 255, 255, 0.42);
  --viz: #fff4ec;
}
.mat[data-material='neon'] {
  --ink: #fdf2ff;
  --muted: rgba(253, 242, 255, 0.72);
  --line: rgba(255, 61, 242, 0.35);
  --chip: rgba(18, 6, 38, 0.55);
  --viz: #38e8ff;
}
.mat[data-material='metal'] {
  --line: rgba(255, 255, 255, 0.22);
  --chip: rgba(10, 13, 12, 0.45);
  --viz: #0b7a3d;
}
.mat[data-material='paper'] {
  --ink: #26221c;
  --muted: rgba(38, 34, 28, 0.66);
  --line: rgba(38, 34, 28, 0.16);
  --chip: rgba(255, 255, 255, 0.55);
  --viz: #26221c;
}
.mat[data-material='pixel'] {
  --ink: #e8e6db;
  --muted: #a0b89e;
  --line: rgba(194, 161, 100, 0.4);
  --chip: rgba(11, 24, 26, 0.7);
  --viz: #c2a164;
}
/* Only the lab takes part in its reveal: the rest of the page stays live (and clickable)
   while the visitor scrolls past an automatic switch. */
:root {
  view-transition-name: none;
}
::view-transition {
  pointer-events: none;
}
::view-transition-old(forge-materials) {
  animation: none;
}
/* Its own name: the motion samples further down have an «m-reveal» of their own, and a later
   @keyframes of the same name silently replaced this circle with a fade (seen 06.10). */
::view-transition-new(forge-materials) {
  animation: m-world-reveal 0.95s var(--ease-in-out);
}
/* The header keeps its place above the lab while a world opens (its own group, shown as is).
   Its group keeps the browser's own (motionless) move: Chrome leaves a still group unpainted
   this far down the page, and the header vanished for the whole reveal (seen 06.10). */
.top {
  view-transition-name: forge-header;
}
::view-transition-old(forge-header) {
  display: none;
}
::view-transition-new(forge-header) {
  animation: none;
}
@keyframes m-world-reveal {
  from {
    clip-path: circle(0 at var(--vx, 50%) var(--vy, 90%));
  }
  to {
    clip-path: circle(150% at var(--vx, 50%) var(--vy, 90%));
  }
}
.m-worlds {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.m-world {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.9s var(--ease-out),
    visibility 0s linear 0.9s;
}
.m-world.is-on {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.9s var(--ease-out);
}
.is-switching .m-world {
  transition: none !important;
}
.m-shader {
  position: absolute;
  inset: 0;
}
.m-world[data-world='glass'] {
  background: radial-gradient(1200px 800px at 70% 40%, #2a2f8a, #0e1030 70%);
}
.m-world[data-world='relief'] {
  background: radial-gradient(1200px 760px at 68% 32%, #f4f6f9, #e3e7ec 60%, #d7dce3);
}
.m-world[data-world='clay'] {
  background: linear-gradient(160deg, #fbe7d9 0%, #f7d2c3 50%, #efb9a7 100%);
}
.m-blob {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff7f0, #f6c9b4 42%, #e5a088);
  box-shadow:
    inset -12px -16px 26px rgba(160, 80, 60, 0.26),
    inset 12px 12px 22px rgba(255, 255, 255, 0.6),
    0 40px 60px -26px rgba(160, 80, 60, 0.45);
  animation: bob 8s var(--ease-in-out) infinite alternate;
}
.m-blob:nth-child(1) {
  width: 260px;
  height: 260px;
  left: 52%;
  top: 6%;
}
.m-blob:nth-child(2) {
  width: 150px;
  height: 150px;
  right: 4%;
  bottom: 16%;
  background: radial-gradient(circle at 34% 30%, #f3fff7, #a8ecc4 42%, #5fcf92);
  animation-delay: -3s;
}
.m-blob:nth-child(3) {
  width: 90px;
  height: 90px;
  left: 6%;
  bottom: 12%;
  background: radial-gradient(circle at 34% 30%, #fffbe8, #ffe199 42%, #f2bd4f);
  animation-delay: -5s;
}
@keyframes bob {
  to {
    transform: translate(0, -22px) scale(1.04);
  }
}
.m-world[data-world='neon'] {
  background:
    radial-gradient(900px 380px at 70% 64%, rgba(255, 61, 242, 0.3), transparent 70%),
    linear-gradient(180deg, #05030c 0%, #150728 60%, #05030c 100%);
}
.m-sun {
  position: absolute;
  left: 72%;
  top: 18%;
  width: 380px;
  height: 380px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: linear-gradient(180deg, #ffe066 0%, #ff7ac8 55%, #b52cff 100%);
  -webkit-mask:
    linear-gradient(#000 0 0) top / 100% 52% no-repeat,
    repeating-linear-gradient(to bottom, #000 0 16px, transparent 16px 24px) bottom / 100% 48%
      no-repeat;
  mask:
    linear-gradient(#000 0 0) top / 100% 52% no-repeat,
    repeating-linear-gradient(to bottom, #000 0 16px, transparent 16px 24px) bottom / 100% 48%
      no-repeat;
  filter: drop-shadow(0 0 40px rgba(255, 110, 199, 0.7));
}
.m-floor {
  position: absolute;
  left: -50%;
  right: -50%;
  bottom: -12%;
  height: 52%;
  background-image:
    linear-gradient(rgba(255, 61, 242, 0.75) 2px, transparent 2px),
    linear-gradient(90deg, rgba(56, 232, 255, 0.55) 2px, transparent 2px);
  background-size: 84px 84px;
  transform: perspective(520px) rotateX(64deg);
  transform-origin: 50% 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%);
  mask-image: linear-gradient(to bottom, transparent, #000 30%);
  animation: floor 2.4s linear infinite;
}
@keyframes floor {
  to {
    background-position: 0 84px;
  }
}
.m-world[data-world='metal'] {
  background: radial-gradient(900px 720px at 74% 46%, #1b221f, #070908 72%);
}
.m-world[data-world='metal'] .m-shader {
  inset: auto;
  right: 1vw;
  top: 4%;
  width: min(54vw, 820px);
  aspect-ratio: 1;
}
.m-world[data-world='paper'] {
  background:
    radial-gradient(1400px 900px at 60% 30%, transparent 40%, rgba(80, 60, 30, 0.12)),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .2  0 0 0 0 .16  0 0 0 0 .1  0 0 0 .09 0'/></filter><rect width='100%' height='100%' filter='url(%23f)'/></svg>"),
    #f3eee3;
}
.m-world[data-world='pixel'] {
  background: #0b181a;
}
.m-pixelsky {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}
.m-inner {
  min-height: max(100vh, 780px);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  grid-template-rows: 1fr auto;
  align-items: center;
  gap: 24px 40px;
  padding: 96px 56px 48px;
}
.m-copy {
  max-width: 680px;
}
.m-eyebrow {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--chip);
  border: 1px solid var(--line);
  font-size: 11px;
  color: var(--muted);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.m-eyebrow b {
  font-weight: 500;
  color: var(--ink);
}
.m-title {
  margin-top: 24px;
  font: 600 clamp(38px, 4.6vw, 70px) / 1.04 var(--font-display);
  letter-spacing: -0.045em;
}
.m-accent {
  position: relative;
  display: inline-block;
  padding: 0 0.06em 0.06em 0;
}
.m-accent canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  display: none;
}
.mat[data-material='glass'] .m-accent span {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.55));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.mat[data-material='relief'] .m-accent span {
  color: #ccd3db;
  text-shadow:
    -3px -3px 5px #ffffff,
    4px 4px 9px #a3acb8;
}
.mat[data-material='clay'] .m-accent span {
  color: #f3a688;
  text-shadow:
    0 2px 0 #e38d6f,
    0 4px 0 #d47c5e,
    0 16px 24px rgba(170, 80, 60, 0.35);
}
.mat[data-material='neon'] .m-accent span {
  color: #fff;
  text-shadow:
    0 0 4px #fff,
    0 0 12px #ff3df2,
    0 0 30px #ff3df2,
    0 0 70px #ff3df2;
}
.mat[data-material='metal'] .m-accent span {
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #d2d9d5 44%,
    #4f5955 52%,
    #eef2f0 70%,
    #8f9994 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.mat[data-material='paper'] .m-accent span {
  font: italic 600 1.18em/1 var(--font-serif);
  letter-spacing: -0.01em;
  color: #26221c;
}
.mat[data-material='pixel'] .m-accent span {
  color: transparent;
}
.mat[data-material='pixel'] .m-accent canvas {
  display: block;
}
.m-lead {
  margin-top: 24px;
  max-width: 38ch;
  font-size: 18.5px;
  line-height: 1.55;
  color: var(--muted);
}
.m-hint {
  margin-top: 22px;
  font-size: 10.5px;
  color: var(--muted);
}
.m-stage {
  display: grid;
  place-items: center;
}
.m-card {
  position: relative;
  width: min(380px, 100%);
  padding: 18px;
  border-radius: 30px;
  transition:
    background 0.6s,
    box-shadow 0.6s,
    border-radius 0.6s,
    transform 0.6s var(--ease-out),
    color 0.6s;
}
.m-cover {
  position: relative;
  aspect-ratio: 1.4;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(135deg, #19c062, #4f6bff 55%, #ff5fae);
  transition:
    background 0.6s,
    box-shadow 0.6s,
    border-radius 0.6s;
}
.m-viz {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 64%;
}
.m-cover__label {
  position: absolute;
  left: 14px;
  top: 12px;
  font-size: 10px;
  color: var(--viz);
}
.m-meta {
  margin-top: 16px;
}
.m-track {
  font: 700 21px/1.2 var(--font-sans);
  letter-spacing: -0.02em;
}
.m-artist {
  margin-top: 4px;
  font-size: 13.5px;
  color: var(--muted);
}
.m-progress {
  margin-top: 16px;
}
.m-bar {
  position: relative;
  display: block;
  height: 6px;
  border-radius: 6px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.24);
}
.m-bar b {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--p, 34%);
  border-radius: inherit;
  background: currentColor;
}
.m-time {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 10.5px;
  color: var(--muted);
}
.m-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin-top: 12px;
}
.m-ctl,
.m-play {
  display: grid;
  place-items: center;
  border: 0;
  cursor: pointer;
  color: inherit;
  background: transparent;
  transition:
    transform 0.25s var(--ease-out),
    background 0.6s,
    box-shadow 0.6s,
    color 0.6s;
}
.m-ctl {
  width: 44px;
  height: 44px;
  border-radius: 50%;
}
.m-play {
  width: 68px;
  height: 68px;
  border-radius: 50%;
}
.m-ctl:active,
.m-play:active {
  transform: scale(0.94);
}
.m-ctl svg,
.m-play svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}
.m-play svg {
  width: 26px;
  height: 26px;
}
.m-play .i-pause,
.m-play.is-playing .i-play {
  display: none;
}
/* The hint to press play: two rings leave the button, a small label sits above it. */
.m-controls {
  position: relative;
}
.m-play {
  position: relative;
}
.m-play.is-hinting::before,
.m-play.is-hinting::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 0 1px rgba(17, 19, 17, 0.06);
  animation: m-ring 2.6s cubic-bezier(0.2, 0.7, 0.3, 1) infinite;
  pointer-events: none;
}
.m-play.is-hinting::after {
  animation-delay: 1.3s;
}
@keyframes m-ring {
  from {
    opacity: 0.85;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(1.75);
  }
}
.m-play-hint {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 12px);
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(12, 16, 14, 0.78);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #f4f8f5;
  font: 500 12px/1 var(--font-sans);
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 6px);
  transition:
    opacity 0.35s,
    transform 0.45s var(--ease-out);
  pointer-events: none;
}
.m-play-hint::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  border: 5px solid transparent;
  border-top-color: rgba(12, 16, 14, 0.78);
  transform: translateX(-50%);
}
.m-play-hint.is-on {
  opacity: 1;
  transform: translate(-50%, 0);
}
@media (prefers-reduced-motion: reduce) {
  .m-play.is-hinting::before,
  .m-play.is-hinting::after {
    animation: none;
    opacity: 0.6;
  }
}
.m-play.is-playing .i-pause {
  display: block;
}
.m-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--muted);
}
.m-switch {
  position: relative;
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: var(--emerald-500);
}
.m-switch::after {
  content: '';
  position: absolute;
  top: 3px;
  right: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}
.mat[data-material='glass'] .m-card {
  color: #fff;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.06));
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  backdrop-filter: blur(26px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    inset 0 0 0 1px rgba(255, 255, 255, 0.22),
    0 40px 80px -30px rgba(10, 8, 40, 0.65);
}
.mat[data-material='glass'] .m-play {
  background: rgba(255, 255, 255, 0.92);
  color: #12153a;
  box-shadow: 0 12px 30px -8px rgba(255, 255, 255, 0.55);
}
.mat[data-material='relief'] .m-card {
  color: #273041;
  background: #e4e8ed;
  border-radius: 34px;
  box-shadow:
    22px 22px 48px #c2c8d0,
    -22px -22px 48px #ffffff;
}
.mat[data-material='relief'] .m-cover {
  background: #e4e8ed;
  box-shadow:
    inset 8px 8px 16px #c2c8d0,
    inset -8px -8px 16px #ffffff;
}
.mat[data-material='relief'] .m-play {
  background: #e4e8ed;
  color: #16a056;
  box-shadow:
    8px 8px 18px #c2c8d0,
    -8px -8px 18px #ffffff;
}
.mat[data-material='relief'] .m-ctl {
  color: #586274;
  box-shadow:
    5px 5px 12px #c8ced6,
    -5px -5px 12px #ffffff;
}
.mat[data-material='relief'] .m-bar {
  background: #e4e8ed;
  box-shadow:
    inset 3px 3px 6px #c2c8d0,
    inset -3px -3px 6px #ffffff;
}
.mat[data-material='relief'] .m-bar b {
  background: linear-gradient(90deg, #3ee082, #19c062);
}
.mat[data-material='clay'] .m-card {
  color: #4a2a20;
  background: #f7d4c5;
  border-radius: 46px;
  box-shadow:
    inset 10px 10px 22px rgba(255, 255, 255, 0.66),
    inset -14px -16px 26px rgba(176, 92, 70, 0.28),
    0 36px 60px -26px rgba(176, 92, 70, 0.55);
}
.mat[data-material='clay'] .m-cover {
  border-radius: 32px;
  background: radial-gradient(circle at 30% 28%, #ffe9cc, #ffb48b 50%, #ee8766);
  box-shadow:
    inset 6px 6px 14px rgba(255, 255, 255, 0.6),
    inset -8px -10px 18px rgba(160, 70, 50, 0.3);
}
.mat[data-material='clay'] .m-play {
  color: #fff;
  background: radial-gradient(circle at 35% 30%, #93f2bb, #2fc777 55%, #1c9a5a);
  box-shadow:
    inset 5px 5px 10px rgba(255, 255, 255, 0.55),
    inset -6px -8px 12px rgba(0, 80, 40, 0.35),
    0 14px 22px -10px rgba(20, 120, 70, 0.6);
}
.mat[data-material='clay'] .m-bar {
  height: 10px;
  background: rgba(176, 92, 70, 0.18);
  box-shadow: inset 2px 2px 4px rgba(176, 92, 70, 0.25);
}
.mat[data-material='clay'] .m-bar b {
  background: #2fc777;
}
.mat[data-material='neon'] .m-card {
  color: #fdf2ff;
  background: rgba(12, 4, 24, 0.74);
  border-radius: 22px;
  box-shadow:
    0 0 0 2px #ff3df2,
    0 0 18px rgba(255, 61, 242, 0.9),
    0 0 64px rgba(255, 61, 242, 0.45),
    inset 0 0 24px rgba(255, 61, 242, 0.35);
}
.mat[data-material='neon'] .m-cover {
  border-radius: 14px;
  background: #090312;
  box-shadow:
    inset 0 0 0 1.5px #38e8ff,
    0 0 14px rgba(56, 232, 255, 0.7);
}
.mat[data-material='neon'] .m-track {
  text-shadow: 0 0 10px #ff3df2;
}
.mat[data-material='neon'] .m-play {
  color: #38e8ff;
  box-shadow:
    0 0 0 2px #38e8ff,
    0 0 18px #38e8ff,
    inset 0 0 14px rgba(56, 232, 255, 0.6);
}
.mat[data-material='neon'] .m-bar {
  background: rgba(255, 61, 242, 0.2);
}
.mat[data-material='neon'] .m-bar b {
  background: #ff3df2;
  box-shadow: 0 0 10px #ff3df2;
}
.mat[data-material='neon'] .m-switch {
  background: transparent;
  box-shadow:
    0 0 0 2px #38e8ff,
    0 0 12px #38e8ff;
}
.mat[data-material='metal'] .m-card {
  color: #0d1110;
  background: linear-gradient(
    145deg,
    #f5f8f7 0%,
    #a7b0ac 18%,
    #eef2f0 34%,
    #6e7773 52%,
    #dfe5e2 70%,
    #8e9894 86%,
    #f2f5f4 100%
  );
  border-radius: 26px;
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 -2px 5px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(0, 0, 0, 0.45),
    0 40px 70px -30px rgba(0, 0, 0, 0.85);
}
.mat[data-material='metal'] .m-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: repeating-linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.09) 0 1px,
    rgba(0, 0, 0, 0.05) 1px 3px
  );
  mix-blend-mode: overlay;
  pointer-events: none;
}
.mat[data-material='metal'] .m-artist,
.mat[data-material='metal'] .m-time,
.mat[data-material='metal'] .m-toggle {
  color: rgba(13, 17, 16, 0.66);
  border-color: rgba(13, 17, 16, 0.18);
}
.mat[data-material='metal'] .m-cover {
  background: radial-gradient(circle at 40% 32%, #ffffff, #9aa49f 38%, #2c3330 76%);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.55);
}
.mat[data-material='metal'] .m-play {
  color: #0b7a3d;
  background: linear-gradient(180deg, #ffffff, #c6cdc9 48%, #87918d 52%, #e7ece9);
  box-shadow:
    inset 0 1px 0 #fff,
    0 6px 14px rgba(0, 0, 0, 0.5);
}
.mat[data-material='metal'] .m-bar {
  background: rgba(13, 17, 16, 0.2);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
}
.mat[data-material='metal'] .m-bar b {
  background: linear-gradient(90deg, #0b7a3d, #19c062);
}
.mat[data-material='paper'] .m-card {
  color: #26221c;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .3  0 0 0 0 .24  0 0 0 0 .16  0 0 0 .08 0'/></filter><rect width='100%' height='100%' filter='url(%23f)'/></svg>"),
    #fcf9f2;
  border-radius: 4px;
  transform: rotate(-1.6deg);
  box-shadow:
    0 1px 1px rgba(60, 40, 20, 0.12),
    0 14px 30px -14px rgba(60, 40, 20, 0.45),
    0 44px 60px -40px rgba(60, 40, 20, 0.45);
}
.mat[data-material='paper'] .m-track {
  font: italic 600 27px/1.05 var(--font-serif);
}
.mat[data-material='paper'] .m-cover {
  border-radius: 2px;
  background:
    radial-gradient(#26221c 1.1px, transparent 1.5px) 0 0 / 7px 7px,
    #ece4d3;
}
.mat[data-material='paper'] .m-play {
  color: #fcf9f2;
  background: #26221c;
}
.mat[data-material='paper'] .m-bar {
  height: 2px;
  background: rgba(38, 34, 28, 0.2);
}
.mat[data-material='paper'] .m-bar b {
  background: #26221c;
}
.mat[data-material='paper'] .m-switch {
  background: #26221c;
}
/* Pixel: the same DOM in real Forge sprites (malachite & brass), 9-slice at ×3. */
.mat[data-material='pixel'] .m-card {
  color: #e8e6db;
  padding: 34px 34px 30px;
  border-radius: 0;
  background: none;
  box-shadow: none;
  border-image: url(/library/malachite-panel-normal.png) 12 fill / 36px stretch;
  image-rendering: pixelated;
  font-family: var(--font-mono);
}
.mat[data-material='pixel'] .m-cover {
  border-radius: 0;
  background: #13322b;
  box-shadow:
    0 0 0 3px #0b181a,
    0 0 0 6px #998052,
    0 0 0 9px #0b181a;
}
.mat[data-material='pixel'] .m-track {
  font: 600 17px/1.2 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #e4d2ae;
  text-shadow: 2px 2px 0 #0b181a;
}
.mat[data-material='pixel'] .m-artist,
.mat[data-material='pixel'] .m-time,
.mat[data-material='pixel'] .m-toggle {
  color: #a0b89e;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
}
.mat[data-material='pixel'] .m-bar {
  height: 30px;
  border-radius: 0;
  background: none;
  overflow: visible;
  border-image: url(/library/malachite-health-track.png) 9 fill / 15px stretch;
  image-rendering: pixelated;
}
.mat[data-material='pixel'] .m-bar b {
  inset: 12px auto 12px 12px;
  width: calc((100% - 24px) * var(--pf, 0.34));
  border-radius: 0;
  background: url(/library/malachite-health-fill.png) 0 0 / 100% 100%;
  image-rendering: pixelated;
}
.mat[data-material='pixel'] .m-play {
  width: 150px;
  height: 60px;
  border-radius: 0;
  color: #e4d2ae;
  background: none;
  box-shadow: none;
  border-image: url(/library/malachite-button-normal.png) 12 fill / 24px stretch;
  image-rendering: pixelated;
}
.mat[data-material='pixel'] .m-play:hover {
  border-image-source: url(/library/malachite-button-hover.png);
}
.mat[data-material='pixel'] .m-play:active {
  border-image-source: url(/library/malachite-button-pressed.png);
  transform: none;
}
.mat[data-material='pixel'] .m-ctl {
  border-radius: 0;
  color: #c2a164;
}
.mat[data-material='pixel'] .m-toggle {
  border-top: 3px solid #25483e;
}
.mat[data-material='pixel'] .m-switch {
  width: 30px;
  height: 30px;
  border-radius: 0;
  background: url(/library/malachite-checkbox-selected.png) center / 100% 100%;
  image-rendering: pixelated;
}
.mat[data-material='pixel'] .m-switch::after {
  display: none;
}
.m-rail {
  grid-column: 1 / -1;
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  padding: 6px;
  border-radius: 999px;
  background: var(--chip);
  border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  overflow-x: auto;
  scrollbar-width: none;
}
.m-chip {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 40px;
  padding: 0 16px 0 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
  overflow: hidden;
  transition:
    color 0.3s,
    background 0.3s;
}
.m-chip:hover,
.m-chip[aria-checked='true'] {
  color: var(--ink);
}
.m-chip[aria-checked='true'] {
  background: var(--chip);
  box-shadow: inset 0 0 0 1px var(--line);
}
.m-chip::after {
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 5px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transform-origin: left;
  transform: scaleX(0);
  opacity: 0.6;
}
.m-chip[aria-checked='true']::after {
  transform: scaleX(var(--p, 0));
}
.m-swatch {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  flex: none;
}
.m-swatch--glass {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(120, 140, 255, 0.5));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}
.m-swatch--relief {
  background: #e4e8ed;
  box-shadow:
    2px 2px 4px #b9c0c9,
    -2px -2px 4px #fff;
}
.m-swatch--clay {
  background: radial-gradient(circle at 35% 30%, #fff1e8, #f2b49c);
}
.m-swatch--neon {
  background: #10031c;
  box-shadow:
    inset 0 0 0 2px #ff3df2,
    0 0 8px #ff3df2;
}
.m-swatch--metal {
  background: linear-gradient(135deg, #fff, #8e9894 50%, #e9eeeb);
}
.m-swatch--paper {
  background: #fcf9f2;
  box-shadow: inset 0 0 0 1px rgba(38, 34, 28, 0.25);
}
.m-swatch--pixel {
  border-radius: 0;
  background: #25483e;
  box-shadow:
    inset 0 0 0 3px #998052,
    inset 0 0 0 6px #13322b;
}
.m-pause {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.m-pause svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}
.m-pause .i-play,
.m-pause[aria-pressed='true'] .i-pause {
  display: none;
}
.m-pause[aria-pressed='true'] .i-play {
  display: block;
}

/* ---------- Style forge · one card re-forged in each of the Studio's 13 materials.
   Card surfaces come inline from the Studio renderer (landing-studio-materials.js). */
.sforge {
  padding: 120px 32px 110px;
  border-top: 1px solid var(--hl-line);
  background: var(--paper);
  color: var(--ink);
  color-scheme: light;
}
.sf-head {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: end;
  gap: 18px 56px;
  max-width: 1180px;
  margin: 0 auto;
}
.sf-eyebrow {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  color: var(--you);
}
.sf-eyebrow i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--emerald-400);
  box-shadow: 0 0 0 4px rgba(62, 224, 130, 0.2);
}
.sf-eyebrow b {
  font-weight: 500;
  color: var(--ink);
}
.sf-title {
  font: 800 clamp(40px, 5.4vw, 84px) / 0.98 var(--font-sans);
  letter-spacing: -0.05em;
}
.sf-title span {
  display: block;
}
.sf-title em {
  display: block;
  margin-top: 0.04em;
  font: italic 600 1.1em/1 var(--font-serif);
  letter-spacing: -0.01em;
  color: var(--you);
}
.sf-lead {
  max-width: 40ch;
  padding-bottom: 8px;
  font-size: 18px;
  line-height: 1.5;
  color: var(--hl-muted);
}
.sf-window {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  max-width: 1180px;
  height: clamp(580px, 66vh, 690px);
  margin: 44px auto 0;
  overflow: hidden;
  border-radius: 28px;
  /* A design canvas: the visitor seems to be building something already (owner's request). */
  background:
    linear-gradient(rgba(17, 19, 17, 0.1) 1px, transparent 1px) 0 0 / 120px 120px,
    linear-gradient(90deg, rgba(17, 19, 17, 0.1) 1px, transparent 1px) 0 0 / 120px 120px,
    linear-gradient(rgba(17, 19, 17, 0.05) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(17, 19, 17, 0.05) 1px, transparent 1px) 0 0 / 24px 24px,
    radial-gradient(900px 420px at 50% 118%, rgba(62, 224, 130, 0.14), transparent 70%),
    #f7f4ed;
  box-shadow:
    0 50px 90px -56px rgba(20, 40, 28, 0.35),
    inset 0 0 0 1px rgba(17, 19, 17, 0.08);
  color-scheme: light;
}
.sf-plate {
  position: absolute;
  left: 50%;
  top: 46%;
  width: min(580px, 88%);
  height: min(470px, 78%);
  transform: translate(-50%, -50%);
  border-radius: 26px;
  overflow: hidden;
  transition:
    background-color 0.6s,
    box-shadow 0.6s;
}
/* A liquid mesh gradient behind the glass materials (the Paper shader of the material lab): liquid
   glass shows it sharp, frosted glass blurs it. */
.sf-mesh {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s;
}
.sforge[data-material='liquid'] .sf-mesh,
.sforge[data-material='glass'] .sf-mesh {
  opacity: 1;
}
.sforge.is-dark .sf-plate {
  background-color: #0d100e;
  box-shadow:
    0 40px 70px -34px rgba(10, 20, 14, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.sforge[data-material='outline'] .sf-plate {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 24px 24px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.sforge[data-material='gradient'] .sf-plate {
  background-image: radial-gradient(closest-side, rgba(59, 77, 255, 0.28), transparent);
}
.sforge[data-material='neon'] .sf-plate {
  background-image: radial-gradient(closest-side, rgba(255, 61, 242, 0.22), transparent);
}
.sforge[data-material='metal'] .sf-plate {
  background-image: radial-gradient(closest-side, rgba(255, 255, 255, 0.1), transparent);
}
.sforge[data-material='pixel'] .sf-plate {
  border-radius: 0;
  background:
    radial-gradient(#e4d2ae 1px, transparent 1.5px) 0 0 / 28px 28px,
    #0b181a;
  box-shadow: inset 0 0 0 3px #13322b;
}
.sforge[data-material='relief'] {
  --sf-plate: #e7e9e7;
}
.sforge[data-material='clay'] {
  --sf-plate: #f7e8df;
}
.sforge[data-material='minimal'] {
  --sf-plate: #f4f4f2;
}
.sforge[data-material='holographic'] {
  --sf-plate: #ece7f4;
}
.sforge[data-material='paper'] {
  --sf-plate: #e9dfca;
}
.sforge[data-material='brutal'] {
  --sf-plate: #f6f1e3;
}
.sforge:not(.is-dark) .sf-plate {
  background-color: var(--sf-plate);
  box-shadow:
    0 40px 70px -30px rgba(0, 0, 0, 0.75),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.sforge[data-material='brutal'] .sf-plate {
  background-image: radial-gradient(rgba(17, 17, 17, 0.16) 1.2px, transparent 1.5px);
  background-size: 18px 18px;
}
.sf-furnace {
  position: absolute;
  z-index: -1;
  left: 22%;
  right: 22%;
  bottom: -120px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    rgba(62, 224, 130, 0.42),
    rgba(25, 192, 98, 0.16) 45%,
    rgba(14, 154, 75, 0.05) 70%,
    transparent
  );
  filter: blur(18px);
  animation: flicker 2.6s steps(1) infinite;
}
@keyframes flicker {
  0% {
    opacity: 0.92;
  }
  18% {
    opacity: 0.78;
  }
  31% {
    opacity: 1;
  }
  47% {
    opacity: 0.86;
  }
  66% {
    opacity: 0.97;
  }
  83% {
    opacity: 0.8;
  }
}
.sf-canvas {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* The card: its surface is the Studio's; these are only its inner details. */
.sf-card {
  position: relative;
  z-index: 3;
  width: min(380px, calc(100% - 40px));
  padding: 22px;
  transform: translateY(-14px);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--fu-ink, #f4fbf8);
  font-family: var(--sf-font, var(--font-sans));
  transition:
    opacity 0.18s,
    filter 0.18s;
}
.sf-window.is-armed:not(.is-forged) .sf-card {
  opacity: 0;
  filter: blur(10px) brightness(1.6);
}
.sf-window.is-forged .sf-card {
  transition:
    opacity 0.7s var(--ease-out),
    filter 0.9s var(--ease-out);
}
.sf-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.sf-avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: calc(var(--fu-radius, 20px) * 0.55);
  background: var(--fu-accent, #9ae6bc);
  color: var(--sf-on-accent, #0b120e);
  font: 700 17px/1 var(--sf-font, var(--font-sans));
}
.sf-t {
  font: 600 16px/1.2 var(--sf-font, var(--font-sans));
  letter-spacing: -0.01em;
}
.sf-m {
  margin-top: 4px;
  font-size: 12.5px;
  opacity: 0.66;
}
.sf-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}
.sf-box {
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--fu-ink, #fff) 14%, transparent);
  border-radius: calc(var(--fu-radius, 20px) * 0.6);
  background: color-mix(in srgb, var(--fu-ink, #fff) 6%, transparent);
}
.sf-k {
  font-size: 12px;
  opacity: 0.66;
}
.sf-v {
  margin-top: 6px;
  font: 700 26px/1 var(--sf-font, var(--font-sans));
  letter-spacing: -0.035em;
}
.sf-v--up {
  color: var(--sf-up, var(--fu-accent, #9ae6bc));
}
.sf-chart {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 72px;
  margin-top: 18px;
}
.sf-chart i {
  flex: 1;
  height: var(--h);
  border-radius: calc(var(--fu-radius, 20px) * 0.2);
  background: color-mix(in srgb, var(--fu-accent, #9ae6bc) 62%, transparent);
}
.sf-chart i:last-child {
  background: var(--fu-accent, #9ae6bc);
}
.sf-btn {
  display: grid;
  place-items: center;
  height: 46px;
  margin-top: 18px;
  border-radius: calc(var(--fu-radius, 20px) * 0.7);
  background: var(--fu-accent, #9ae6bc);
  color: var(--sf-on-accent, #0b120e);
  font: 600 15px/1 var(--sf-font, var(--font-sans));
}

/* Material character inside the card. */
.sforge[data-material='liquid'] .sf-box,
.sforge[data-material='glass'] .sf-box {
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.08);
}
.sforge[data-material='liquid'] .sf-btn,
.sforge[data-material='glass'] .sf-btn {
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}
.sforge[data-material='relief'] .sf-box,
.sforge[data-material='relief'] .sf-btn {
  border: 0;
  background: var(--fu-surface);
  box-shadow:
    5px 5px 12px rgba(21, 38, 28, 0.16),
    -5px -5px 12px rgba(255, 255, 255, 0.85);
}
.sforge[data-material='relief'] .sf-btn {
  color: var(--fu-accent);
}
.sforge[data-material='relief'] .sf-avatar {
  box-shadow:
    3px 3px 8px rgba(21, 38, 28, 0.2),
    -3px -3px 8px rgba(255, 255, 255, 0.9);
}
.sforge[data-material='clay'] {
  --sf-on-accent: #fff;
  --sf-up: #c8462a;
}
.sforge[data-material='clay'] .sf-box {
  border: 0;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.4);
  box-shadow:
    inset 3px 3px 6px rgba(255, 255, 255, 0.75),
    inset -3px -3px 8px rgba(74, 42, 32, 0.1);
}
.sforge[data-material='clay'] .sf-btn,
.sforge[data-material='clay'] .sf-avatar {
  border-radius: 999px;
  box-shadow:
    inset 3px 3px 6px rgba(255, 255, 255, 0.5),
    inset -3px -4px 8px rgba(120, 30, 10, 0.25),
    0 8px 18px -8px rgba(200, 70, 42, 0.6);
}
.sforge[data-material='clay'] .sf-chart i {
  border-radius: 999px;
}
.sforge[data-material='minimal'] {
  --sf-on-accent: #fff;
}
.sforge[data-material='minimal'] .sf-box {
  border-color: #e6e6e3;
  background: transparent;
}
.sforge[data-material='minimal'] .sf-btn,
.sforge[data-material='minimal'] .sf-avatar {
  background: #111311;
}
.sforge[data-material='outline'] .sf-box {
  border-color: rgba(233, 239, 235, 0.32);
  background: transparent;
}
.sforge[data-material='outline'] .sf-chart i {
  border: 1px solid var(--fu-accent);
  background: transparent;
}
.sforge[data-material='outline'] .sf-chart i:last-child {
  background: color-mix(in srgb, var(--fu-accent) 30%, transparent);
}
.sforge[data-material='outline'] .sf-btn,
.sforge[data-material='outline'] .sf-avatar {
  border: 1px solid var(--fu-accent);
  background: transparent;
  color: var(--fu-accent);
}
.sforge[data-material='gradient'] {
  --sf-on-accent: #fff;
  --sf-up: #ffd1ec;
}
.sforge[data-material='gradient'] .sf-box {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.1);
}
.sforge[data-material='gradient'] .sf-chart i {
  background: linear-gradient(180deg, #ffd1ec, rgba(255, 79, 176, 0.55));
}
.sforge[data-material='gradient'] .sf-btn,
.sforge[data-material='gradient'] .sf-avatar {
  background: linear-gradient(135deg, #ff8ac7, #ff4fb0 55%, #ffb347);
}
.sforge[data-material='neon'] {
  --sf-on-accent: #fff;
}
.sforge[data-material='neon'] .sf-box {
  border-color: rgba(255, 61, 242, 0.4);
  background: rgba(255, 61, 242, 0.05);
}
.sforge[data-material='neon'] .sf-v {
  text-shadow: 0 0 14px rgba(255, 61, 242, 0.7);
}
.sforge[data-material='neon'] .sf-chart i {
  box-shadow: 0 0 12px rgba(255, 61, 242, 0.6);
}
.sforge[data-material='neon'] .sf-btn,
.sforge[data-material='neon'] .sf-avatar {
  border: 1px solid var(--fu-accent);
  background: rgba(255, 61, 242, 0.12);
  box-shadow:
    0 0 18px rgba(255, 61, 242, 0.55),
    inset 0 0 12px rgba(255, 61, 242, 0.35);
  text-shadow: 0 0 10px rgba(255, 61, 242, 0.9);
}
.sforge[data-material='holographic'] {
  --sf-on-accent: #2b2540;
  --sf-up: #5a3fd9;
}
.sforge[data-material='holographic'] .sf-card {
  animation: sf-holo 7s linear infinite;
}
@keyframes sf-holo {
  to {
    background-position: 200% 50%;
  }
}
.sforge[data-material='holographic'] .sf-box {
  border-color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.35);
}
.sforge[data-material='holographic'] .sf-chart i,
.sforge[data-material='holographic'] .sf-btn,
.sforge[data-material='holographic'] .sf-avatar {
  background: linear-gradient(110deg, #b39be9, #91e9d2 35%, #e9b9ee 65%, #b39be9);
  background-size: 200% 100%;
}
.sforge[data-material='metal'] {
  --sf-on-accent: #10201a;
}
.sforge[data-material='metal'] .sf-box {
  border-color: rgba(255, 255, 255, 0.18);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
}
.sforge[data-material='metal'] .sf-btn,
.sforge[data-material='metal'] .sf-avatar {
  background: linear-gradient(115deg, #e4ece9, #95a7a4 38%, #f3f7f5 52%, #7f9592);
  box-shadow: inset 0 1px 0 #fff;
}
.sforge[data-material='paper'] {
  --sf-on-accent: #efe6d2;
  --sf-up: #c2412d;
}
.sforge[data-material='paper'] .sf-t {
  font: italic 600 19px/1.1 var(--font-serif);
}
.sforge[data-material='paper'] .sf-box {
  border: 1px dashed rgba(38, 34, 28, 0.4);
  background: transparent;
}
.sforge[data-material='paper'] .sf-chart i {
  background: repeating-linear-gradient(45deg, #26221c 0 1.5px, transparent 1.5px 5px);
}
.sforge[data-material='paper'] .sf-chart i:last-child {
  background: var(--fu-accent);
}
.sforge[data-material='paper'] .sf-btn,
.sforge[data-material='paper'] .sf-avatar {
  background: #26221c;
}
.sforge[data-material='brutal'] {
  --sf-on-accent: #111;
  --sf-up: #111;
}
.sforge[data-material='brutal'] .sf-box,
.sforge[data-material='brutal'] .sf-btn,
.sforge[data-material='brutal'] .sf-avatar {
  border: 2px solid #111;
  border-radius: 4px;
  box-shadow: 4px 4px 0 #111;
}
.sforge[data-material='brutal'] .sf-box {
  background: #fff;
}
.sforge[data-material='brutal'] .sf-chart i {
  border: 2px solid #111;
  border-radius: 0;
  background: #fff;
}
.sforge[data-material='brutal'] .sf-chart i:last-child {
  background: var(--fu-accent);
}
.sforge[data-material='pixel'] {
  --sf-font: var(--font-mono);
  --sf-on-accent: #0b181a;
}
.sforge[data-material='pixel'] .sf-k,
.sforge[data-material='pixel'] .sf-m,
.sforge[data-material='pixel'] .sf-btn {
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.sforge[data-material='pixel'] .sf-v {
  letter-spacing: 0;
}
.sforge[data-material='pixel'] .sf-box,
.sforge[data-material='pixel'] .sf-btn,
.sforge[data-material='pixel'] .sf-avatar {
  border: 2px solid var(--fu-ink);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.55);
}
.sforge[data-material='pixel'] .sf-box {
  background: transparent;
}

/* Caption, pause and the rail of thirteen */
.sf-caption {
  position: absolute;
  left: 28px;
  bottom: 24px;
  z-index: 6;
  max-width: 46%;
  color: var(--ink);
}
.sf-name {
  font: 600 18px/1.2 var(--font-sans);
  letter-spacing: -0.01em;
}
.sf-desc {
  margin-top: 4px;
  font-size: 13px;
  color: var(--hl-muted);
}
.sf-pause {
  position: absolute;
  right: 24px;
  bottom: 22px;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  border: 1px solid rgba(17, 19, 17, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  color: var(--ink);
  font-size: 10.5px;
  cursor: pointer;
}
.sf-pause:hover {
  background: #fff;
}
.sf-pause svg {
  width: 11px;
  height: 11px;
  fill: currentColor;
}
.sf-pause .i-play,
.sf-pause[aria-pressed='true'] .i-pause {
  display: none;
}
.sf-pause[aria-pressed='true'] .i-play {
  display: block;
}
.sf-rail {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 1180px;
  margin: 22px auto 0;
}
.sf-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 13px 6px 7px;
  border: 1px solid var(--hl-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  color: var(--ink);
  font: 500 13px/1 var(--font-sans);
  cursor: pointer;
  transition:
    background 0.2s,
    color 0.2s,
    border-color 0.2s;
}
.sf-chip:hover {
  background: #fff;
}
.sf-chip[aria-checked='true'] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}
.sf-swatch {
  position: relative;
  flex: none;
  width: 20px;
  height: 20px;
  overflow: hidden;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, #12c27a 0 22%, transparent 24%),
    radial-gradient(circle at 72% 64%, #ff4fb0 0 20%, transparent 22%), #0b0d0c;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}
.sf-swatch[data-plate='light'] {
  background: #e9e4da;
}
.sf-swatch b {
  position: absolute;
  inset: 3px;
  border-width: 1px !important;
  border-radius: 50%;
}

/* Lab → forge link */
.m-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  color: var(--ink);
  text-decoration: none;
}
.m-more svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Numbers and questions: a light editorial pause */
.nums,
.faq {
  background: var(--paper);
  color: var(--ink);
  color-scheme: light;
}
.nums {
  padding: 120px max(32px, calc((100% - 1180px) / 2)) 96px;
}
.nums-eyebrow,
.faq-eyebrow {
  font-size: 11px;
  color: var(--emerald-600);
}
.nums-title,
.faq-title {
  margin-top: 18px;
  max-width: 18ch;
  font: 600 clamp(36px, 4.6vw, 68px) / 1.04 var(--font-display);
  letter-spacing: -0.045em;
}
/* Four facts with live proof (bento). */
.facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 56px;
}
.fact {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  gap: 6px;
  min-height: 400px;
  padding: 26px 26px 0;
  overflow: hidden;
  border: 1px solid var(--hl-line);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.55);
}
.fact--pixel,
.fact--export {
  grid-column: span 2;
}
.fact-num {
  font: 600 64px/1 var(--font-display);
  letter-spacing: -0.05em;
  white-space: nowrap;
}
.fact-label {
  font-size: 11px;
  color: var(--hl-muted);
}
.fact-text {
  max-width: 38ch;
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--hl-muted);
}
.fact-media {
  align-self: end;
  min-width: 0;
  padding: 18px 0 26px;
}

/* 65+: a little board of live components */
@property --fb-p {
  syntax: '<number>';
  inherits: false;
  initial-value: 32;
}
.fb-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.fb-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 74px;
  border: 1px solid var(--hl-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 20px -16px rgba(40, 30, 10, 0.45);
}
.fb-cell em {
  font: 500 12px/1 var(--font-sans);
  font-style: normal;
}
.fb-switch {
  position: relative;
  width: 40px;
  height: 24px;
  border-radius: 999px;
  background: #d9d5cc;
  transition: background 0.3s;
}
.fb-switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 0.35s var(--ease-spring);
}
.fb-slider {
  position: relative;
  width: 96px;
  height: 4px;
  border-radius: 4px;
  background: #e2ded6;
}
.fb-slider b {
  position: absolute;
  inset: 0 auto 0 0;
  width: 30%;
  border-radius: inherit;
  background: var(--you);
  transition: width 0.5s var(--ease-out);
}
.fb-slider b::after {
  content: '';
  position: absolute;
  right: -8px;
  top: -6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
.fb-seg {
  position: relative;
  display: flex;
  padding: 3px;
  border-radius: 9px;
  background: #efebe3;
}
.fb-seg em {
  position: relative;
  z-index: 1;
  width: 26px;
  font: 600 11px/22px var(--font-mono);
  text-align: center;
}
.fb-seg b {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: 26px;
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  transition: transform 0.35s var(--ease-spring);
}
.fb-check {
  position: relative;
  width: 18px;
  height: 18px;
  border: 1.5px solid #bdb8ad;
  border-radius: 5px;
  transition:
    background 0.25s,
    border-color 0.25s;
}
.fb-check::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1px;
  width: 4px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform 0.25s var(--ease-spring);
}
.fb-ring {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: conic-gradient(var(--you) calc(var(--fb-p) * 1%), #e2ded6 0);
  -webkit-mask: radial-gradient(farthest-side, transparent 62%, #000 64%);
  mask: radial-gradient(farthest-side, transparent 62%, #000 64%);
  transition: --fb-p 0.7s var(--ease-out);
}
.fb-btn {
  padding: 8px 14px;
  border-radius: 10px;
  background: var(--ink);
  color: #fff;
  font: 600 12px/1 var(--font-sans);
  font-style: normal;
  transition:
    transform 0.15s,
    background 0.3s;
}
.fb-cell.is-on .fb-switch,
.fb-cell:hover .fb-switch {
  background: var(--you);
}
.fb-cell.is-on .fb-switch::after,
.fb-cell:hover .fb-switch::after {
  transform: translateX(16px);
}
.fb-cell.is-on .fb-slider b,
.fb-cell:hover .fb-slider b {
  width: 78%;
}
.fb-cell.is-on .fb-seg b,
.fb-cell:hover .fb-seg b {
  transform: translateX(52px);
}
.fb-cell.is-on .fb-check,
.fb-cell:hover .fb-check {
  border-color: var(--you);
  background: var(--you);
}
.fb-cell.is-on .fb-check::after,
.fb-cell:hover .fb-check::after {
  transform: rotate(45deg) scale(1);
}
.fb-cell.is-on .fb-ring,
.fb-cell:hover .fb-ring {
  --fb-p: 86;
}
.fb-cell.is-on .fb-btn,
.fb-cell:hover .fb-btn {
  transform: scale(0.94);
  background: var(--you);
}
.fb-ticker {
  margin-top: 14px;
  overflow: hidden;
  white-space: nowrap;
  font-size: 10.5px;
  color: var(--hl-muted);
  -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.fb-ticker span {
  display: inline-block;
  animation: fb-tick 32s linear infinite;
}
@keyframes fb-tick {
  to {
    transform: translateX(-50%);
  }
}

/* 60: a deck of real theme previews, shown 1:1 so the pixels stay crisp */
.fd-deck {
  position: relative;
  height: 320px;
}
.fd-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 460px;
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  image-rendering: pixelated;
  box-shadow: 0 26px 44px -22px rgba(20, 14, 6, 0.6);
  opacity: 0;
  transform: translate(calc(-50% - 90px), -50%) rotate(-8deg) scale(0.94);
  transition:
    transform 0.75s var(--ease-out),
    opacity 0.5s;
}
.fd-card[data-k='0'] {
  z-index: 3;
  opacity: 1;
  transform: translate(-50%, -50%);
}
.fd-card[data-k='1'] {
  z-index: 2;
  opacity: 0.7;
  transform: translate(calc(-50% + 30px), calc(-50% - 16px)) rotate(3deg) scale(0.95);
}
.fd-card[data-k='2'] {
  z-index: 1;
  opacity: 0.4;
  transform: translate(calc(-50% + 58px), calc(-50% - 30px)) rotate(6deg) scale(0.9);
}
.fd-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.fd-name {
  flex: 1;
  font: 600 15px/1.3 var(--font-sans);
}
.fd-step {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--hl-line);
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
}
.fd-step:hover {
  border-color: rgba(17, 19, 17, 0.3);
}
.fd-step svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 3: the same screen as React, HTML or a ZIP */
.fx-tabs {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 10px;
  background: #e9e4da;
}
.fx-tabs button {
  padding: 7px 14px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--hl-muted);
  font: 500 11px/1 var(--font-mono);
  letter-spacing: 0.06em;
  cursor: pointer;
}
.fx-tabs button[aria-selected='true'] {
  background: var(--ink);
  color: var(--paper);
}
.fx-code {
  min-height: 168px;
  margin: 12px 0 0;
  padding: 18px 20px;
  overflow-x: auto;
  border-radius: 14px;
  background: #0f1211;
  color: #d9e2dc;
  font: 500 13px/1.7 var(--font-mono);
  white-space: pre;
}
.fx-code .t {
  color: #3ee082;
}
.fx-code .a {
  color: #9aa7ff;
}
.fx-code .s {
  color: #ffc46b;
}

/* 13: the Studio's own surfaces; a swatch opens the forge on that material */
.fm-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.fm-swatch {
  position: relative;
  aspect-ratio: 1;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 12px;
  background:
    radial-gradient(circle at 30% 30%, #12c27a 0 18%, transparent 20%),
    radial-gradient(circle at 72% 66%, #ff4fb0 0 16%, transparent 18%), #0b0d0c;
  cursor: pointer;
  transition: transform 0.25s var(--ease-out);
}
.fm-swatch[data-plate='light'] {
  background: #e9e4da;
}
.fm-swatch b {
  position: absolute;
  inset: 7px;
  border-width: 1px !important;
  border-radius: 8px;
}
.fm-swatch:hover,
.fm-swatch:focus-visible {
  transform: translateY(-3px);
}
.fm-name {
  min-height: 1.5em;
  margin-top: 12px;
  font-size: 11px;
  color: var(--hl-muted);
}

/* ---------- Questions · a deck of playing cards (owner's request 05.10, after lusion.co):
   six cards wait face down beside the title, are dealt onto the table, lean toward the cursor
   and turn over on a click: the answer is on the back. Without the script every card simply
   shows its question and answer. */
.faq {
  position: relative;
  padding: 96px max(32px, calc((100% - 1180px) / 2)) 150px;
  overflow: clip;
}
.faq-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 32px;
}
.faq-side {
  position: relative;
  display: grid;
  align-content: end;
  justify-items: end;
  min-height: 250px;
}
/* Where the deck lies before the deal (the cards measure their way here). */
.faq-pile {
  position: absolute;
  top: 0;
  right: 26px;
  width: 152px;
  aspect-ratio: 4 / 5;
}
.faq-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
}
.faq-meta__glyph svg {
  width: 22px;
  height: 22px;
}
.faq-meta b {
  font: 500 26px/1 var(--font-mono);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.faq-meta__hint {
  max-width: 21ch;
  margin-left: 6px;
  font-size: 10.5px;
  line-height: 1.45;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hl-muted);
}
.px-ink {
  fill: currentColor;
}
.px-shadow {
  fill: rgba(7, 94, 48, 0.24);
}
.faq-meta__glyph,
.faq-card__face--q .faq-card__corner svg {
  color: var(--emerald-600);
}

.faq-table {
  position: relative;
  margin-top: 44px;
}
/* Crosshair marks at the corners of the table, as on a cutting mat. */
.faq-cross {
  position: absolute;
  width: 11px;
  height: 11px;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1px 100% no-repeat;
  color: rgba(17, 19, 17, 0.32);
}
.faq-cross--tl,
.faq-cross--tr {
  top: -26px;
}
.faq-cross--bl,
.faq-cross--br {
  bottom: -26px;
}
.faq-cross--tl,
.faq-cross--bl {
  left: -26px;
}
.faq-cross--tr,
.faq-cross--br {
  right: -26px;
}
.faq-deck {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.faq-card {
  position: relative;
  min-width: 0;
  aspect-ratio: 4 / 5;
}
.faq-card__body {
  position: relative;
  height: 100%;
  border-radius: 18px;
}
.faq-card__face {
  position: relative;
  display: grid;
  border-radius: 18px;
  padding: 24px 26px;
}
.faq-card__face--q {
  grid-template-rows: auto auto 1fr auto;
  background:
    radial-gradient(120% 70% at 0% 0%, #fffdf9 0%, rgba(255, 253, 249, 0) 62%),
    #f8f5ee;
  color: var(--ink);
  border: 1px solid rgba(17, 19, 17, 0.08);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.8) inset,
    0 calc(10px + var(--lift, 0) * 24px) calc(30px + var(--lift, 0) * 38px) -16px
      rgba(18, 40, 26, calc(0.24 + var(--lift, 0) * 0.08));
}
/* The thin inner frame of a playing card, and a glare that follows the cursor. */
.faq-card__face--q::before,
.faq-card__face--q::after {
  content: '';
  position: absolute;
  pointer-events: none;
  border-radius: 11px;
}
.faq-card__face--q::before {
  inset: 9px;
  border: 1px solid rgba(17, 19, 17, 0.07);
}
.faq-card__face--q::after {
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    circle at var(--sx, 50%) var(--sy, 0%),
    rgba(255, 255, 255, 0.85),
    rgba(255, 255, 255, 0) 46%
  );
  mix-blend-mode: soft-light;
  opacity: var(--sheen, 0);
}
.faq-card__face--a {
  grid-template-rows: auto 1fr auto;
  margin-top: 12px;
  overflow: hidden;
  background: radial-gradient(130% 95% at 50% 38%, #0f6a3b 0%, #0a4d2b 58%, #073a20 100%);
  color: #f3eee2;
  border: 1px solid rgba(182, 245, 207, 0.16);
  box-shadow: 0 calc(10px + var(--lift, 0) * 24px) calc(30px + var(--lift, 0) * 38px) -16px
    rgba(8, 40, 22, calc(0.34 + var(--lift, 0) * 0.1));
}
.faq-card__corner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 14px;
  font: 500 12px/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* Dotted rule under the corner, like the lines of a playing card. */
  background: radial-gradient(circle, currentColor 0.7px, transparent 1.1px) 0 100% / 6px 3px
    repeat-x;
}
.faq-card__corner b {
  font-weight: 500;
  opacity: 0.6;
}
.faq-card__corner svg {
  width: 18px;
  height: 18px;
}
.faq-card__corner--bottom {
  align-self: end;
  transform: rotate(180deg);
}
.faq-card__face--q .faq-card__corner {
  color: rgba(17, 19, 17, 0.62);
}
.faq-card__face--a .faq-card__corner {
  color: rgba(214, 240, 224, 0.82);
}
.faq-card__q {
  margin: 22px 0 0;
  font: 500 23px/1.22 var(--font-display);
  letter-spacing: -0.025em;
}
.faq-card__toggle {
  all: unset;
  display: block;
  cursor: pointer;
  text-wrap: balance;
}
/* The question's button covers the whole face: the card itself is the control. */
.faq-card__toggle::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 18px;
}
.faq-card__pip {
  align-self: center;
  justify-self: center;
  width: 80px;
  height: 80px;
  color: var(--emerald-500);
}
.faq-card__pip svg {
  width: 100%;
  height: 100%;
}
.faq-card__a {
  position: relative;
  align-self: center;
  padding: 18px 2px;
  font-size: 16.5px;
  line-height: 1.55;
  text-wrap: pretty;
}
.faq-card__art {
  display: none;
}
.faq-card:has(.faq-card__toggle:focus-visible) .faq-card__body {
  outline: 2px solid var(--emerald-600);
  outline-offset: 6px;
}

/* ---- Live: real two-sided cards. */
.faq-deck.is-live .faq-card__body {
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
}
.faq-deck.is-live .faq-card__face {
  position: absolute;
  inset: 0;
  margin: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.faq-deck.is-live .faq-card__face--a {
  transform: rotateY(180deg);
}
.faq-deck.is-live .faq-card__art {
  display: block;
  position: absolute;
  inset: 0;
  color: #cdebd9;
  transition: opacity 0.45s var(--ease-out);
}
.faq-card__art svg {
  width: 100%;
  height: 100%;
}
.faq-card__art .a-line,
.faq-card__art .a-thin,
.faq-card__art .a-ray {
  fill: none;
  stroke: currentColor;
  vector-effect: non-scaling-stroke;
}
.faq-card__art .a-line {
  stroke-width: 1.1;
  opacity: 0.6;
}
.faq-card__art .a-thin {
  stroke-width: 0.8;
  opacity: 0.32;
}
.faq-card__art .a-ray {
  stroke-width: 0.7;
  opacity: 0.16;
}
.faq-card__art .a-dot {
  fill: currentColor;
  opacity: 0.55;
}
.faq-card__art .a-medal {
  fill: #06361d;
  stroke: currentColor;
  stroke-width: 1;
  stroke-opacity: 0.4;
  vector-effect: non-scaling-stroke;
}
.faq-card__art .a-glyph {
  fill: #e9f7ee;
}
/* Face down (in the deck) the back is all ornament; turned over it quiets down for the text. */
.faq-deck.is-live .faq-card__face--a > :not(.faq-card__art) {
  opacity: 0;
  transition: opacity 0.3s var(--ease-out);
}
.faq-deck.is-live .faq-card.is-open .faq-card__face--a > :not(.faq-card__art) {
  opacity: 1;
  transition-delay: 0.12s;
}
.faq-deck.is-live .faq-card.is-open .faq-card__art {
  opacity: 0.14;
}
/* Only the face that looks at the visitor takes the pointer. */
.faq-deck.is-live .faq-card.is-back .faq-card__face--q,
.faq-deck.is-live .faq-card:not(.is-back) .faq-card__face--a {
  pointer-events: none;
}
.faq-deck.is-live .faq-card.is-open .faq-card__face--a {
  cursor: pointer;
}
@media (hover: hover) {
  .faq-deck.is-live .faq-card__face--q {
    cursor: pointer;
  }
}
/* Reduced motion: the faces simply cross-fade in place. */
.faq.is-flat .faq-deck.is-live .faq-card__face {
  backface-visibility: visible;
  -webkit-backface-visibility: visible;
  transform: none;
  transition: opacity 0.35s var(--ease-out);
}
.faq.is-flat .faq-deck.is-live .faq-card:not(.is-open) .faq-card__face--a,
.faq.is-flat .faq-deck.is-live .faq-card.is-open .faq-card__face--q {
  opacity: 0;
}

/* ---------- Final · the last frame of the edit, light like the hero */
.final {
  display: grid;
  justify-items: center;
  gap: 26px;
  padding: 150px 32px 160px;
  border-top: 1px solid var(--hl-line);
  background: var(--paper);
  color: var(--ink);
  color-scheme: light;
  text-align: center;
}
.final-slate {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  color: var(--you);
}
.final-slate i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--you);
  box-shadow: 0 0 0 4px rgba(14, 154, 75, 0.16);
}
.final-slate b {
  font-weight: 500;
  color: var(--ink);
}
.final-title {
  font: 800 clamp(52px, 8.4vw, 136px) / 0.95 var(--font-sans);
  letter-spacing: -0.055em;
}
.final-title > span {
  display: block;
}
.final-accent {
  position: relative;
  display: inline-block;
  margin-top: 0.04em;
  padding-right: 0.06em;
  font: italic 600 1.12em/1 var(--font-serif);
  letter-spacing: -0.01em;
  color: var(--you);
}
/* The underline is drawn each time the words it underlines come into view (landing.js). */
.final .hero-underline path {
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1s var(--ease-out) 0.25s;
}
.final[data-underline='on'] .hero-underline path {
  stroke-dashoffset: 0;
}
.final-lead {
  max-width: 40ch;
  font-size: 19px;
  line-height: 1.5;
  color: var(--hl-muted);
}
.final-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 12px;
}

/* ---------- Footer */
.foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 28px;
  padding: 26px 32px 36px;
  border-top: 1px solid var(--hl-line);
  background: var(--paper);
  color: var(--hl-muted);
  font-size: 13.5px;
}
.foot-brand {
  display: inline-flex;
  align-items: center;
}
/* The whole wordmark, as in the header (owner's request 06.10), not a cropped «F». */
.foot-mark {
  width: auto;
  height: 30px;
  filter: drop-shadow(0 1px 1px rgba(7, 60, 30, 0.16));
}
.foot a {
  color: var(--ink);
}
.foot-fonts {
  margin-left: auto;
  font-size: 10px;
  color: var(--hl-muted);
}

/* ---------- Motion: off-screen loops pause; reduced motion freezes travel */
html.qa-still *,
html.qa-still *::before,
html.qa-still *::after {
  transition: none !important;
}
[data-inview='false'] *,
[data-inview='false'] *::before,
[data-inview='false'] *::after {
  animation-play-state: paused !important;
}
html[data-motion='reduce'] *,
html[data-motion='reduce'] *::before,
html[data-motion='reduce'] *::after {
  animation-duration: 1ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 1ms !important;
  scroll-behavior: auto !important;
}
html[data-motion='reduce'] .cta__ch,
html[data-motion='reduce'] .cta__icon svg {
  transform: none !important;
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
  .cta__ch,
  .cta__icon svg {
    transform: none !important;
  }
}

/* ---------- The journey (owner's request 05.10, after lusion.co): the pieces in front of
   «ИДЕЯ», the flight through the words and the dive into the «О», the tunnel of materials, the
   particle cloud with its button, the cable of connections. Each scene is a sticky screen. */
.journey,
.cloud,
.cable {
  position: relative;
  background: var(--paper);
  color: var(--ink);
  color-scheme: light;
}
.jy-stage {
  height: 1320vh;
}
.jy-sticky,
.cb-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
.jy-sticky {
  background: radial-gradient(60% 60% at 50% 50%, #fbf9f4, var(--paper) 70%, #e6dfd0);
}
/* The page's paper over the tunnel, with a hole where the «О» of «КОД» is: the tunnel shows
   through it, and the hole grows with the dive until the paper is gone. */
.jy-sticky {
  background: #020403;
}
.jy-paper {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(60% 60% at 50% 50%, #fbf9f4, var(--paper) 70%, #e6dfd0);
  -webkit-mask-image: radial-gradient(
    ellipse var(--hx, 0px) var(--hy, 0px) at var(--cx, 50%) var(--cy, 50%),
    transparent 98%,
    #000 100%
  );
  mask-image: radial-gradient(
    ellipse var(--hx, 0px) var(--hy, 0px) at var(--cx, 50%) var(--cy, 50%),
    transparent 98%,
    #000 100%
  );
}
.jy-sticky.in-tunnel .jy-paper,
.jy-sticky.in-tunnel .jy-scene,
.jy-sticky.in-tunnel .jy-voxels,
.jy-sticky.in-tunnel .jy-hint,
.jy-sticky.in-tunnel .jy-count {
  visibility: hidden;
}
.jy-sticky .tn-caption,
.jy-sticky .tn-hint {
  z-index: 4;
  opacity: 0;
  transition:
    opacity 0.5s,
    color 0.6s;
}
.jy-sticky.in-tunnel .tn-caption,
.jy-sticky.in-tunnel .tn-hint {
  opacity: 1;
}
.tn-caption b {
  font-weight: 500;
  color: var(--emerald-400);
}
.jy-scene {
  position: absolute;
  inset: 0;
  z-index: 1;
  perspective: 900px;
  perspective-origin: 50% 50%;
  pointer-events: none;
}
.jy-word {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transform-style: preserve-3d;
  white-space: nowrap;
  /* 21vw everywhere it fits; the floor is low enough that «ИДЕЯ» stays inside a phone. */
  font: 900 clamp(64px, 21vw, 380px) / 0.8 var(--font-display);
  letter-spacing: -0.05em;
  color: var(--ink);
}
.jy-word span {
  display: inline-block;
  will-change: transform, opacity;
}
.jy-word.is-outline {
  color: transparent;
  -webkit-text-stroke: 2px var(--ink);
}
.jy-word.is-last {
  color: var(--emerald-600);
}
.jy-word.is-first {
  cursor: pointer;
  pointer-events: auto;
}
.jy-voxels {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.jy-hint,
.jy-count {
  position: absolute;
  z-index: 3;
  bottom: 6vh;
  font-size: 11px;
  color: var(--hl-muted);
  transition: opacity 0.4s;
}
.jy-hint {
  right: 32px;
}
.jy-count {
  left: 32px;
}
.jy-sticky.is-flying .jy-hint {
  opacity: 0;
}
.tn-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.jy-sticky.is-out .tn-caption,
.jy-sticky.is-out .tn-hint {
  color: var(--ink);
}
.tn-caption {
  position: absolute;
  left: 32px;
  bottom: 9vh;
  color: #eef6f0;
  transition: color 0.6s;
}
.tn-caption p:first-child {
  font-size: 11px;
  opacity: 0.7;
}
.tn-caption h3 {
  margin-top: 10px;
  font: 700 clamp(40px, 6vw, 92px) / 0.95 var(--font-display);
  letter-spacing: -0.05em;
}
.tn-caption p:last-child {
  margin-top: 12px;
  font: italic 500 26px/1 var(--font-serif);
  opacity: 0.85;
}
.tn-caption.is-in h3,
.tn-caption.is-in p:last-child {
  animation: tn-in 0.7s var(--ease-out) both;
}
@keyframes tn-in {
  from {
    opacity: 0;
    transform: translateY(18px);
    filter: blur(6px);
  }
}
.tn-hint {
  position: absolute;
  right: 32px;
  bottom: 9vh;
  font-size: 11px;
  color: #eef6f0;
  opacity: 0.7;
  transition: color 0.6s;
}
/* The galaxy after the tunnel: glowing dust over the night sky, then a flash of paper into the
   cable of connections. */
.cl-canvas {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
}
.jy-sticky.in-sky .cl-canvas {
  opacity: 1;
}
/* The paper opens from the middle as a crisp circle: a half-faded paper over the night would be
   a muddy grey. */
.jy-flash {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: var(--paper);
  clip-path: circle(calc(var(--flash, 0) * 75vmax) at 50% 50%);
  pointer-events: none;
}
.jy-sticky.past-tunnel .tn-canvas {
  visibility: hidden;
}
.jy-sticky.in-space .tn-caption,
.jy-sticky.in-space .tn-hint {
  opacity: 0;
}
/* The real button over the particle one: invisible, but it takes the click and the keyboard. */
.cl-hit {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 50%;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: transparent;
  cursor: pointer;
  transform: translate(-50%, -50%);
}
.cl-hit span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.cl-hit:focus-visible {
  outline: 2px solid var(--emerald-600);
  outline-offset: 6px;
}
.jy-sticky.is-flat .cl-hit {
  padding: 18px 28px;
  background: var(--ink);
  color: var(--paper);
  font: 600 18px/1 var(--font-sans);
}
.jy-sticky.is-flat .cl-hit span {
  position: static;
  width: auto;
  height: auto;
  clip: auto;
}
.cl-hint {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: calc(50% + 15vh);
  transform: translateX(-50%);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--emerald-400);
}
/* The wheel ran into the button: the hint shakes once and lights up. */
.cl-hint.is-knock {
  animation: cl-knock 0.45s var(--ease-out);
}
@keyframes cl-knock {
  0%,
  100% {
    transform: translateX(-50%);
  }
  20% {
    transform: translateX(calc(-50% - 6px));
    color: #d9ffe9;
  }
  45% {
    transform: translateX(calc(-50% + 5px));
  }
  70% {
    transform: translateX(calc(-50% - 2px));
  }
}
.cb-stage {
  height: 260vh;
}
.cb-sticky {
  background:
    radial-gradient(circle at 1px 1px, rgba(17, 19, 17, 0.09) 1px, transparent 1.4px) 0 0 / 28px 28px,
    var(--paper);
}
.cb-board {
  position: absolute;
  left: 50%;
  top: 52%;
  width: min(100vw, 158vh);
  aspect-ratio: 1440 / 900;
  transform: translate(-50%, -50%);
}
.cb-board > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.cb-board > svg path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cb-shadow {
  stroke: rgba(10, 40, 22, 0.24);
  filter: url(#cb-blur);
  transform: translate(12px, 20px);
}
.cb-body {
  stroke: #053a1e;
}
.cb-mid {
  stroke: #0b7a3c;
  transform: translate(-1.5px, -2.5px);
}
.cb-lit {
  stroke: #45dc86;
  opacity: 0.75;
  transform: translate(-4px, -6.5px);
}
.cb-spec {
  stroke: #f2fff6;
  opacity: 0.85;
  transform: translate(-5px, -8.5px);
}
.cb-plug rect {
  fill: #08321a;
}
.cb-plug .cb-plug-ring {
  fill: #19c062;
}
.cb-plug .cb-prong {
  fill: #c9d3cd;
}
/* The cable's stops (owner's request 05.10): cards in the Studio's own materials, sized to the
   board (--u: px per unit of the drawing), each labelled with its material like a frame in a
   design tool. They arrive with a collar on the cable and a leader line (see landing-cable.js). */
.cb-board {
  --u: 1;
  font-size: max(10.5px, calc(16px * var(--u)));
}
.cb-board.is-tall {
  top: 50%;
  width: min(100vw, 56vh);
  aspect-ratio: 900 / 1500;
  font-size: max(11.5px, calc(16px * var(--u)));
}
.cb-board .cb-pulse {
  stroke: #f4fff8;
  opacity: 0.95;
  filter: drop-shadow(0 0 5px #45dc86);
  transform: translate(-4px, -6.5px);
}
.cb-collar {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  transition: opacity 0.2s;
}
.cb-collar.is-on {
  opacity: 1;
  transition: none;
}
.cb-collar-band {
  fill: #062a16;
  stroke: #0c5f32;
  stroke-width: 1.2;
}
.cb-collar-shine {
  fill: rgba(255, 255, 255, 0.3);
}
.cb-collar-led {
  fill: #20352a;
  transition:
    fill 0.3s 0.25s,
    filter 0.3s 0.25s;
}
.cb-collar.is-on .cb-collar-led {
  fill: var(--led);
  filter: drop-shadow(0 0 4px var(--led));
}
.cb-board .cb-leader {
  stroke: rgba(17, 19, 17, 0.5);
  stroke-width: 1.4;
  stroke-linecap: butt;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.25s ease-in;
}
.cb-board .cb-leader.is-on {
  stroke-dashoffset: 0;
  transition: none;
}
.cb-leader-dot {
  fill: var(--ink);
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
  transition: transform 0.2s;
}
.cb-leader-dot.is-on {
  transform: none;
  transition: none;
}

.cb-node,
.cb-socket {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}
.cb-node {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.25s,
    visibility 0s 0.25s;
}
.cb-node.is-on {
  opacity: 1;
  visibility: visible;
  transition: none;
}
.cb-node.is-over {
  transform: translate(-50%, -50%);
}
.cb-node.hang-top {
  transform: translate(-50%, 0.6em);
}
.cb-node.hang-left {
  transform: translate(0.6em, -50%);
}
.cb-node.hang-right {
  transform: translate(calc(-100% - 0.6em), -50%);
}
.cb-socket {
  z-index: 3;
}
.cb-socket.hang-left {
  transform: translate(0, -50%);
}
.cb-socket.hang-top {
  transform: translate(-50%, 0);
}
/* The material's name above the frame's corner, as a design tool labels its frames. */
.cb-tag {
  position: absolute;
  left: 0.15em;
  bottom: calc(100% + 0.6em);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.62em;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(17, 19, 17, 0.56);
}
.cb-node.is-over .cb-tag {
  left: auto;
  right: 0.15em;
}
.cb-tag i {
  width: 0.85em;
  height: 0.85em;
  border-radius: 3px;
  background: var(--swatch);
  box-shadow: 0 0 0 1px rgba(17, 19, 17, 0.2);
}
.cb-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.85em;
  padding: 0.9em 1.2em 0.9em 0.9em;
}
.cb-icon {
  display: grid;
  place-items: center;
  width: 2.6em;
  height: 2.6em;
}
.cb-icon svg {
  width: 1.3em;
  height: 1.3em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cb-text {
  display: grid;
  gap: 0.32em;
  min-width: 0;
}
.cb-title {
  display: flex;
  align-items: center;
  gap: 0.2em;
}
.cb-name {
  font: 600 1.08em/1.15 var(--font-sans);
  letter-spacing: -0.015em;
  white-space: nowrap;
}
.cb-note {
  font-size: 0.78em;
  line-height: 1.3;
  opacity: 0.72;
}

/* Frosted glass, laid right over the cable: it shows through, softened. */
.cb-node--glass {
  --swatch: linear-gradient(135deg, #ffffff, #cfe9db);
}
.cb-node--glass .cb-card {
  width: 17em;
  overflow: hidden;
  border-radius: 1.3em;
  color: var(--ink);
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.62),
    rgba(255, 255, 255, 0.2) 58%,
    rgba(255, 255, 255, 0.36)
  );
  -webkit-backdrop-filter: blur(14px) saturate(1.7);
  backdrop-filter: blur(14px) saturate(1.7);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 0 0 1px rgba(255, 255, 255, 0.6),
    inset 0 -1.4em 2em -1.8em rgba(14, 154, 75, 0.45),
    0 1.6em 3em -1.4em rgba(9, 46, 25, 0.45);
}
.cb-node--glass .cb-icon {
  border-radius: 50%;
  color: var(--emerald-800);
  background: rgba(255, 255, 255, 0.6);
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 0.35em 0.8em -0.35em rgba(9, 46, 25, 0.4);
}
.cb-sweep {
  position: absolute;
  top: -30%;
  bottom: -30%;
  left: 0;
  width: 30%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
  transform: translateX(-120%) skewX(-18deg);
  pointer-events: none;
}

/* Pixel: a stepped frame on the integer grid, a hard shadow, mono letters typed in. */
.cb-node--pixel {
  --swatch: #0b181a;
}
.cb-node--pixel .cb-card {
  width: 17em;
  filter: drop-shadow(0.25em 0.25em 0 rgba(17, 19, 17, 0.5));
  padding: 0.75em 1em 0.75em 0.75em;
  border: 6px solid transparent;
  border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' shape-rendering='crispEdges'%3E%3Cpath fill='%230b181a' d='M2 1h8v1H2zM1 2h10v8H1zM2 10h8v1H2z'/%3E%3Cpath fill='%23e8e6db' d='M2 0h8v1H2zM1 1h1v1H1zM10 1h1v1h-1zM0 2h1v8H0zM11 2h1v8h-1zM1 10h1v1H1zM10 10h1v1h-1zM2 11h8v1H2z'/%3E%3C/svg%3E") 3 fill / 6px / 0 stretch;
  color: #e8e6db;
}
.cb-node--pixel .cb-icon {
  width: 2.4em;
  height: 2.4em;
  color: #c2a164;
  background: rgba(194, 161, 100, 0.13);
}
.cb-node--pixel .cb-icon svg {
  width: 1.45em;
  height: 1.45em;
  fill: currentColor;
  stroke: none;
}
.cb-node--pixel .cb-name {
  font: 700 0.98em/1.15 var(--font-mono);
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.cb-node--pixel .cb-note {
  font: 500 0.72em/1.35 var(--font-mono);
  color: #c2a164;
  opacity: 1;
}
.cb-caret {
  width: 0.5em;
  height: 1.05em;
  background: #c2a164;
  opacity: 0;
}

/* Neon: a dark sign with a pink tube that has to catch. */
.cb-node--neon {
  --swatch: #ff3df2;
}
.cb-node--neon .cb-card {
  width: 17em;
  border-radius: 1.25em;
  color: #fff3fe;
  background: radial-gradient(130% 120% at 30% 0%, #2a0d55 0%, #12062a 62%);
  border: 1px solid #ff3df2;
  box-shadow:
    0 0 0.3em rgba(255, 61, 242, 0.8),
    0 0 1.5em rgba(255, 61, 242, 0.5),
    inset 0 0 0.9em rgba(255, 61, 242, 0.24),
    0 1.6em 3em -1.4em rgba(18, 6, 42, 0.7);
}
.cb-node--neon .cb-card::before {
  content: '';
  position: absolute;
  inset: 0.32em;
  border-radius: 0.95em;
  border: 1px solid rgba(255, 140, 250, 0.3);
  pointer-events: none;
}
.cb-node--neon .cb-name {
  text-shadow:
    0 0 0.3em #ff3df2,
    0 0 0.9em rgba(255, 61, 242, 0.7);
}
.cb-node--neon .cb-note {
  color: #ffb8f8;
  opacity: 0.85;
}
.cb-node--neon .cb-icon {
  color: #ff8af7;
  filter: drop-shadow(0 0 0.22em #ff3df2) drop-shadow(0 0 0.6em rgba(255, 61, 242, 0.6));
}

/* Neo-brutalism: yellow, a thick black line and a hard shadow, set down at a slant. */
.cb-node--brutal {
  --swatch: #ffde59;
}
.cb-node--brutal .cb-card {
  width: 16.5em;
  color: #111111;
  background: #ffde59;
  border: 0.19em solid #111111;
  border-radius: 0.19em;
  box-shadow: 0.375em 0.375em 0 #111111;
  transform: rotate(-2deg);
}
.cb-node--brutal .cb-name {
  font: 800 1.12em/1 var(--font-display);
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.cb-node--brutal .cb-note {
  font-weight: 600;
  opacity: 0.82;
}
.cb-node--brutal .cb-icon {
  color: #111111;
  background: #ff5d5d;
  border: 0.16em solid #111111;
  border-radius: 0.19em;
  box-shadow: 0.16em 0.16em 0 #111111;
}
.cb-node--brutal .cb-icon svg {
  stroke-width: 2.4;
}

/* Metal & enamel: the agent's socket, a brushed plate with an enamel screen. */
.cb-socket {
  --swatch: linear-gradient(115deg, #1d2a2a, #a9b8bc 45%, #1d2a2a);
}
.cb-plate {
  position: relative;
  width: 13.5em;
  padding: 0.8em 0.85em 0.8em 1.55em;
  overflow: hidden;
  border-radius: 1.25em;
  color: #eef4f2;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 3px),
    linear-gradient(115deg, #1d2a2a 0%, #a9b8bc 25%, #1d2a2a 49%, #849c9a 72%, #1d2a2a 100%);
  border: 1px solid rgba(238, 244, 242, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(0, 0, 0, 0.45),
    0 1.4em 2.8em -1.2em rgba(10, 30, 20, 0.6);
}
.cb-socket.hang-top .cb-plate {
  padding: 1.55em 0.85em 0.85em;
}
.cb-port {
  position: absolute;
  left: 0.4em;
  top: 50%;
  width: 0.75em;
  height: 2.1em;
  border-radius: 0.3em;
  background: #050807;
  box-shadow:
    inset 0 0.15em 0.3em rgba(0, 0, 0, 0.9),
    0 1px 0 rgba(255, 255, 255, 0.28);
  transform: translateY(-50%);
}
.cb-socket.hang-top .cb-port {
  left: 50%;
  top: 0.4em;
  width: 2.1em;
  height: 0.75em;
  transform: translateX(-50%);
}
.cb-screw {
  position: absolute;
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background:
    linear-gradient(45deg, transparent 42%, rgba(20, 28, 27, 0.75) 42% 58%, transparent 58%),
    radial-gradient(circle at 35% 30%, #eef3f1, #8b9b98 55%, #2c3837);
}
.cb-screw:nth-of-type(2) {
  left: 0.45em;
  top: 0.45em;
}
.cb-screw:nth-of-type(3) {
  right: 0.45em;
  top: 0.45em;
}
.cb-screw:nth-of-type(4) {
  left: 0.45em;
  bottom: 0.45em;
}
.cb-screw:nth-of-type(5) {
  right: 0.45em;
  bottom: 0.45em;
}
.cb-screen {
  display: grid;
  gap: 0.5em;
  padding: 0.75em 0.85em;
  border-radius: 0.8em;
  background: radial-gradient(120% 140% at 30% 0%, #16302a, #08110f 70%);
  box-shadow:
    inset 0 0.2em 0.5em rgba(0, 0, 0, 0.75),
    inset 0 0 0 1px rgba(154, 230, 188, 0.12),
    0 1px 0 rgba(255, 255, 255, 0.35);
  transition: box-shadow 0.5s;
}
.cb-socket.is-on .cb-screen {
  box-shadow:
    inset 0 0.2em 0.5em rgba(0, 0, 0, 0.75),
    inset 0 0 0 1px rgba(154, 230, 188, 0.35),
    inset 0 0 1.6em rgba(62, 224, 130, 0.22),
    0 1px 0 rgba(255, 255, 255, 0.35);
}
.cb-leds {
  display: flex;
  gap: 0.32em;
}
.cb-leds i {
  width: 0.55em;
  height: 0.55em;
  border-radius: 2px;
  background: #24332f;
  transition:
    background 0.2s,
    box-shadow 0.2s;
}
.cb-socket.is-on .cb-leds i {
  background: #3ee082;
  box-shadow: 0 0 0.5em #3ee082;
}
.cb-socket.is-on .cb-leds i:nth-child(2) {
  transition-delay: 0.08s;
}
.cb-socket.is-on .cb-leds i:nth-child(3) {
  transition-delay: 0.16s;
}
.cb-socket.is-on .cb-leds i:nth-child(4) {
  transition-delay: 0.24s;
}
.cb-socket.is-on .cb-leds i:nth-child(5) {
  transition-delay: 0.32s;
}
.cb-agent {
  font: 700 1.02em/1 var(--font-mono);
  letter-spacing: 0.12em;
}
.cb-state {
  font-size: 0.64em;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(238, 244, 242, 0.5);
  transition: color 0.3s 0.3s;
}
.cb-socket.is-on .cb-state {
  color: #9ae6bc;
}
.cb-glint {
  position: absolute;
  top: -30%;
  bottom: -30%;
  left: 0;
  width: 26%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transform: translateX(-140%) skewX(-20deg);
  pointer-events: none;
}
.cb-status {
  position: absolute;
  left: 32px;
  top: max(84px, 10vh);
  font-size: 11px;
  color: var(--hl-muted);
}

.lg-more {
  position: relative;
  margin-top: 70px;
  font: 800 clamp(54px, 9vw, 150px) / 0.95 var(--font-display);
  letter-spacing: -0.055em;
  text-transform: uppercase;
}
.lg-more-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.06em;
}
.lg-more-word span {
  display: inline-block;
  transform: translateY(105%);
  transition: transform 0.9s var(--ease-out) calc(var(--k) * 0.12s);
}
.lg-more-word:last-child span {
  color: var(--emerald-600);
}
.lg-more.is-in .lg-more-word span {
  transform: none;
}

/* ---------- Manifesto (owner's request 05.10): what the hero used to say under its headline,
   second to last, word by word out of a blur as the page scrolls. */
.manifest {
  position: relative;
  background: var(--paper);
  color: var(--ink);
  color-scheme: light;
}
.mf-stage {
  height: 240vh;
}
.mf-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  align-content: center;
  gap: 30px;
  padding: 0 max(32px, calc((100% - 1180px) / 2));
}
.mf-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hl-muted);
}
.mf-eyebrow::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--emerald-500);
}
.mf-text {
  margin: 0;
  max-width: 1180px;
  font: 600 clamp(30px, 4vw, 62px) / 1.14 var(--font-sans);
  letter-spacing: -0.035em;
}
.mf-text span {
  display: inline-block;
}
.mf-text .is-accent {
  font: italic 500 1.12em/1 var(--font-serif);
  letter-spacing: -0.01em;
  color: var(--emerald-600);
}

/* ---------- The reel's cover (owner's request 05.10): «Собрать свой дизайн» over the reel's own
   first frame. The card grows to the reel's dark screen and the window settles into its place. */
.reel-cover {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  background: var(--paper);
}
.rcv-card {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 55% at 50% 45%, rgba(62, 224, 130, 0.16), transparent 70%),
    #0b0d0c;
}
.rcv-window {
  position: absolute;
  transform-origin: 50% 50%;
  will-change: transform;
}
.rcv-window .reel-window {
  width: 100%;
  height: 100%;
  box-shadow:
    0 40px 120px -30px rgba(62, 224, 130, 0.35),
    0 30px 80px -30px rgba(0, 0, 0, 0.8);
}
.rcv-words {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4vw;
  pointer-events: none;
}
.rcv-words span {
  font: 800 clamp(34px, 4.4vw, 84px) / 1 var(--font-display);
  letter-spacing: -0.05em;
  color: #f6f3ea;
  text-transform: uppercase;
  text-shadow: 0 10px 40px rgba(0, 0, 0, 0.55);
  white-space: nowrap;
}
.reel-cover.is-done {
  visibility: hidden;
}

/* ---------- «Что внутри»: the ledger over drifting outline words, a live card at the cursor. */
.ledger {
  position: relative;
  overflow: hidden;
  padding: 110px max(32px, calc((100% - 1180px) / 2)) 130px;
  background: var(--paper);
  color: var(--ink);
  color-scheme: light;
}
.lg {
  position: relative;
}
.lg-back {
  position: absolute;
  inset: -40px -200px 0;
  display: grid;
  align-content: space-around;
  pointer-events: none;
}
.lg-track {
  white-space: nowrap;
  font: 800 clamp(90px, 13vw, 220px) / 0.95 var(--font-display);
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 1.4px rgba(17, 19, 17, 0.09);
}
.lg-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  padding-bottom: 22px;
}
.lg-head h2 {
  font: 700 clamp(40px, 5vw, 76px) / 1 var(--font-display);
  letter-spacing: -0.05em;
}
.lg-star {
  margin-left: auto;
  font-size: 30px;
  color: var(--emerald-600);
}
.lg-head b {
  font-size: 30px;
  font-weight: 400;
}
.lg-rows {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--hl-line);
}
.lg-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px minmax(0, 1.7fr);
  gap: 24px;
  padding: 22px 0;
  border-bottom: 1px solid var(--hl-line);
  transition: background 0.3s;
}
.lg-row.is-hot {
  background: linear-gradient(90deg, rgba(14, 154, 75, 0.08), rgba(14, 154, 75, 0));
}
.lg-name {
  margin: 0;
  font: 600 24px/1.2 var(--font-sans);
  letter-spacing: -0.02em;
}
.lg-count {
  font-size: 22px;
  color: var(--emerald-600);
  letter-spacing: 0;
}
.lg-items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 15px;
}
.lg-items li {
  display: flex;
  gap: 12px;
  padding: 3px 0;
  cursor: default;
  transition: color 0.2s, transform 0.3s var(--ease-out);
}
.lg-items li.is-on {
  color: var(--emerald-800);
  transform: translateX(4px);
}
.lg-items .mono {
  font-size: 11px;
  line-height: 1.9;
  color: var(--hl-muted);
}
.lg-float {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 9;
  width: 300px;
  height: 196px;
  pointer-events: none;
  transform: scale(0);
}
.lgp {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 12px;
  padding: 18px;
  border-radius: 20px;
  background: #fbf9f4;
  color: var(--ink);
  font: 500 13px/1.3 var(--font-sans);
  box-shadow:
    0 0 0 1px rgba(17, 19, 17, 0.06),
    0 30px 60px -24px rgba(17, 19, 17, 0.45);
  overflow: hidden;
}
.lgp.is-dark,
.lgp.is-code {
  background: #101813;
  color: #d6e8dd;
}
.lgp.is-pixel {
  background: #0f2a1d;
  grid-auto-flow: column;
  image-rendering: pixelated;
}
.lgp.is-pixel img {
  image-rendering: pixelated;
  max-width: 100%;
}
.lgp--sprites img {
  width: 34px;
}
.lgp--states {
  grid-auto-flow: row;
}
.lgp--states img {
  width: 112px;
}
.lgp--hud img {
  width: 270px;
}
.lgp-tile {
  display: grid;
  gap: 6px;
  width: 230px;
  padding: 18px 20px;
  text-align: left;
}
.lgp-tile b {
  font: 700 17px/1.1 var(--font-sans);
}
.lgp-tile span {
  font-size: 12px;
  opacity: 0.8;
}
.lgp--material {
  background:
    radial-gradient(90% 80% at 30% 20%, #2a8b51, transparent 60%),
    radial-gradient(90% 80% at 80% 90%, #c9e7d4, transparent 60%),
    #e9e4d8;
}
.lgp--material.is-dark {
  background:
    radial-gradient(90% 80% at 30% 20%, #1d6b42, transparent 60%),
    radial-gradient(90% 80% at 80% 90%, #2a2f8a, transparent 60%),
    #0b1210;
}
.lgp-capsule {
  display: inline-flex;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  background:
    radial-gradient(120% 140% at 30% 0%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 55%),
    linear-gradient(180deg, rgba(182, 245, 207, 0.65), rgba(14, 154, 75, 0.32));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.8),
    0 14px 30px -14px rgba(7, 94, 48, 0.6);
  font: 600 16px/1 var(--font-sans);
}
.lgp-ghost {
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid rgba(17, 19, 17, 0.2);
  font-size: 12px;
}
.lgp-field {
  display: grid;
  gap: 4px;
  width: 230px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1.5px solid var(--emerald-600);
  box-shadow: 0 0 0 4px rgba(14, 154, 75, 0.15);
}
.lgp-field small {
  font-size: 10.5px;
  color: var(--hl-muted);
}
.lgp-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}
.lgp-check i {
  width: 16px;
  height: 16px;
  border-radius: 5px;
  background: var(--emerald-600);
  box-shadow: inset 0 0 0 4px var(--emerald-600), inset 0 0 0 6px #fff;
}
.lgp-table {
  display: grid;
  width: 230px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--hl-line);
}
.lgp-table i {
  display: flex;
  justify-content: space-between;
  padding: 8px 12px;
  font-style: normal;
  border-bottom: 1px solid var(--hl-line);
}
.lgp-table i:nth-child(2) {
  background: rgba(14, 154, 75, 0.08);
}
.lgp-table em {
  font: 500 12px/1 var(--font-mono);
  font-style: normal;
  color: var(--emerald-600);
}
.lgp-bars {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 110px;
}
.lgp-bars i {
  width: 18px;
  height: var(--h);
  border-radius: 5px 5px 2px 2px;
  background: linear-gradient(180deg, var(--emerald-400), var(--emerald-600));
  animation: lgp-grow 0.9s var(--ease-out) both;
}
@keyframes lgp-grow {
  from {
    height: 4%;
  }
}
.lgp-menu,
.lgp-dialog {
  display: grid;
  width: 210px;
  padding: 8px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--hl-line), 0 16px 30px -18px rgba(17, 19, 17, 0.5);
}
.lgp-menu i {
  padding: 8px 10px;
  border-radius: 8px;
  font-style: normal;
}
.lgp-menu .is-on {
  background: rgba(14, 154, 75, 0.12);
  color: var(--emerald-800);
}
.lgp-menu .is-danger {
  color: #b23a3a;
}
.lgp-dialog {
  gap: 6px;
  padding: 16px;
}
.lgp-dialog em {
  font-style: normal;
  font-size: 12px;
  color: var(--hl-muted);
}
.lgp-dialog span {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 6px;
}
.lgp-dialog i {
  padding: 7px 12px;
  border-radius: 999px;
  font-style: normal;
  font-size: 12px;
  border: 1px solid var(--hl-line);
}
.lgp-dialog .is-main {
  background: var(--ink);
  color: #fff;
}
.lgp-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(17, 19, 17, 0.06);
}
.lgp-tabs i {
  padding: 8px 14px;
  border-radius: 999px;
  font-style: normal;
  font-size: 12px;
}
.lgp-tabs .is-on {
  background: var(--ink);
  color: #fff;
}
.lgp-toast {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
  width: 230px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--ink);
  color: #eef3f0;
  animation: lgp-in 0.6s var(--ease-out) both;
}
.lgp-toast i {
  grid-row: span 2;
  width: 10px;
  height: 10px;
  margin-top: 4px;
  border-radius: 50%;
  background: var(--emerald-400);
}
.lgp-toast em {
  font-style: normal;
  font-size: 12px;
  opacity: 0.7;
}
@keyframes lgp-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}
.lgp-dash,
.lgp-split {
  display: grid;
  width: 250px;
  height: 140px;
  gap: 8px;
}
.lgp-dash {
  grid-template-columns: 50px 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}
.lgp-dash i,
.lgp-split i,
.lgp-three i {
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(14, 154, 75, 0.22), rgba(14, 154, 75, 0.06));
}
.lgp-dash .is-side {
  grid-row: span 2;
  background: var(--ink);
}
.lgp-dash .is-big {
  grid-column: span 2;
  background: linear-gradient(160deg, var(--emerald-600), var(--emerald-800));
}
.lgp-split {
  grid-template-columns: 1fr 2fr;
  grid-template-rows: 1fr 1fr;
}
.lgp-split i:first-child {
  grid-row: span 2;
}
.lgp-three {
  display: flex;
  gap: 10px;
}
.lgp-three i {
  width: 70px;
  height: 120px;
  border: 1px solid var(--hl-line);
  background: #fff;
  box-shadow: 0 10px 20px -14px rgba(17, 19, 17, 0.5);
}
.lgp-three i:nth-child(2) {
  transform: translateY(-8px);
  background: linear-gradient(160deg, #fff, rgba(14, 154, 75, 0.18));
}
.lgp-nine {
  position: relative;
}
.lgp-nine img {
  width: 180px;
  image-rendering: pixelated;
}
.lgp-nine i {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 18%, rgba(62, 224, 130, 0.9) 18%, rgba(62, 224, 130, 0.9) calc(18% + 1px), transparent calc(18% + 1px), transparent 82%, rgba(62, 224, 130, 0.9) 82%, rgba(62, 224, 130, 0.9) calc(82% + 1px), transparent calc(82% + 1px)),
    linear-gradient(180deg, transparent 22%, rgba(62, 224, 130, 0.9) 22%, rgba(62, 224, 130, 0.9) calc(22% + 1px), transparent calc(22% + 1px), transparent 78%, rgba(62, 224, 130, 0.9) 78%, rgba(62, 224, 130, 0.9) calc(78% + 1px), transparent calc(78% + 1px));
}
.lgp-grid {
  position: relative;
}
.lgp-grid img {
  width: 128px;
  image-rendering: pixelated;
}
.lgp-grid::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.18) 1px, transparent 1px) 0 0 / 4px 4px,
    linear-gradient(180deg, rgba(255, 255, 255, 0.18) 1px, transparent 1px) 0 0 / 4px 4px;
}
.lgp pre {
  margin: 0;
  font: 12.5px/1.6 var(--font-mono);
  white-space: pre;
}
.lgp pre b {
  font-weight: 500;
  color: #3ee082;
}
.lgp pre em {
  font-style: normal;
  color: #f2d48a;
}
.lgp-auth {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 14px;
  width: 230px;
  padding: 14px 16px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--hl-line);
}
.lgp-auth b {
  font-size: 16px;
}
.lgp-auth em {
  grid-column: 1;
  font-style: normal;
  font-size: 12px;
  color: var(--hl-muted);
}
.lgp-auth i {
  grid-row: span 2;
  grid-column: 2;
  align-self: center;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--emerald-600);
  color: #fff;
  font-style: normal;
}
.lgp-chips {
  display: flex;
  gap: 6px;
}
.lgp-chips i {
  padding: 9px 14px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-style: normal;
}
.lgp-small {
  font-style: normal;
  font-size: 12px;
  color: var(--hl-muted);
}
/* Twelve motion kits, each a tiny loop on three little cards. */
.lgp--motion {
  grid-auto-flow: column;
  gap: 10px;
}
.lgp-actor {
  width: 52px;
  height: 68px;
  border-radius: 10px;
  background: linear-gradient(160deg, #fff, rgba(14, 154, 75, 0.25));
  box-shadow: 0 0 0 1px var(--hl-line), 0 10px 20px -12px rgba(17, 19, 17, 0.5);
  animation: 1.8s var(--ease-out) infinite both;
}
.lgp-actor.is-2 {
  animation-delay: 0.12s;
}
.lgp-actor.is-3 {
  animation-delay: 0.24s;
}
.m-rise { animation-name: m-rise; }
.m-reveal { animation-name: m-reveal; }
.m-dialog { animation-name: m-dialog; }
.m-side { animation-name: m-side; }
.m-spring { animation-name: m-spring; animation-timing-function: var(--ease-spring); }
.m-hover { animation-name: m-hover; }
.m-focus { animation-name: m-focus; }
.m-press { animation-name: m-press; }
.m-shake { animation-name: m-shake; }
.m-pop { animation-name: m-pop; animation-timing-function: var(--ease-spring); }
.m-stagger { animation-name: m-rise; }
.m-stagger.is-2 { animation-delay: 0.25s; }
.m-stagger.is-3 { animation-delay: 0.5s; }
.m-float { animation-name: m-float; animation-timing-function: ease-in-out; animation-duration: 2.6s; }
@keyframes m-rise { 0% { opacity: 0; transform: translateY(16px); } 40%, 100% { opacity: 1; transform: none; } }
@keyframes m-reveal { 0% { opacity: 0; filter: blur(8px); } 45%, 100% { opacity: 1; filter: none; } }
@keyframes m-dialog { 0% { opacity: 0; transform: scale(0.86); } 40%, 100% { opacity: 1; transform: none; } }
@keyframes m-side { 0% { transform: translateX(-30px); opacity: 0; } 40%, 100% { transform: none; opacity: 1; } }
@keyframes m-spring { 0% { transform: translateY(26px) scale(0.9); } 45%, 100% { transform: none; } }
@keyframes m-hover { 0%, 100% { transform: none; } 40%, 60% { transform: translateY(-8px); box-shadow: 0 0 0 1px var(--hl-line), 0 20px 26px -12px rgba(17, 19, 17, 0.5); } }
@keyframes m-focus { 0%, 100% { box-shadow: 0 0 0 1px var(--hl-line); } 40%, 70% { box-shadow: 0 0 0 2px var(--emerald-600), 0 0 0 6px rgba(14, 154, 75, 0.2); } }
@keyframes m-press { 0%, 100% { transform: none; } 30% { transform: scale(0.9); } 45% { transform: scale(1.03); } }
@keyframes m-shake { 0%, 60%, 100% { transform: none; } 10%, 30%, 50% { transform: translateX(-6px); } 20%, 40% { transform: translateX(6px); } }
@keyframes m-pop { 0%, 100% { transform: none; } 30% { transform: scale(1.18); } }
@keyframes m-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* ---------- The finale's stickers: die-cut pieces of our UI in the margins around the text. */
.final {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.stickers {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.final > :not(.stickers) {
  position: relative;
  z-index: 1;
}
.sticker {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 16px;
  background: #fff;
  color: var(--ink);
  box-shadow:
    0 0 0 5px #fff,
    0 1px 0 5px rgba(17, 19, 17, 0.05),
    0 14px 26px -12px rgba(17, 19, 17, 0.45);
  font: 700 19px/1 var(--font-sans);
  letter-spacing: -0.02em;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  opacity: 0;
  transition:
    opacity 0.2s,
    box-shadow 0.25s,
    scale 0.25s var(--ease-out);
}
.sticker.is-out {
  opacity: 1;
}
.sticker.is-held {
  cursor: grabbing;
  scale: 1.08;
  box-shadow:
    0 0 0 5px #fff,
    0 30px 46px -16px rgba(17, 19, 17, 0.5);
}
.sticker::after {
  content: '';
  position: absolute;
  right: -5px;
  bottom: -5px;
  width: 0;
  height: 0;
  border-radius: 0 0 14px 0;
  background: linear-gradient(135deg, rgba(17, 19, 17, 0) 50%, #e9e4d8 50%, #fff 78%);
  box-shadow: -3px -3px 8px -2px rgba(17, 19, 17, 0.25);
  transition:
    width 0.3s var(--ease-out),
    height 0.3s var(--ease-out);
}
.sticker:hover::after {
  width: 26px;
  height: 26px;
}
.sticker svg {
  width: 52px;
  height: 52px;
}
.sticker--glyph {
  padding: 10px;
  border-radius: 14px;
}
.sticker--logo {
  padding: 10px 14px;
}
.sticker--logo img {
  width: 150px;
  pointer-events: none;
}
.tone-mint {
  background: #c9f3da;
  color: var(--emerald-800);
}
.tone-ink {
  background: var(--ink);
  color: #fbf9f4;
}
.tone-paper {
  background: #f3ecdc;
  color: #26221c;
}
.tone-emerald {
  background: var(--emerald-600);
  color: #fff;
  font-family: var(--font-mono);
}
.tone-pixel {
  border-radius: 0;
  background: #0b181a;
  color: #e8e6db;
  font-family: var(--font-mono);
  box-shadow:
    0 0 0 5px #fff,
    6px 6px 0 5px rgba(17, 19, 17, 0.25);
}
.tone-glass {
  background: linear-gradient(160deg, #e9f8f0, #bfe9d1);
  color: var(--emerald-800);
}
.st-toggle {
  width: 46px;
  height: 26px;
  padding: 3px;
  border-radius: 999px;
  background: var(--emerald-600);
}
.st-toggle i {
  display: block;
  width: 20px;
  height: 20px;
  margin-left: auto;
  border-radius: 50%;
  background: #fff;
}

/* ---------- The very end: keep scrolling and the Studio opens. */
.next {
  position: relative;
  background: var(--paper);
  color: var(--ink);
  color-scheme: light;
}
.nx-stage {
  height: 230vh;
}
.nx-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  align-content: center;
  gap: 24px;
  padding: 0 max(32px, calc((100% - 1180px) / 2));
  overflow: hidden;
}
.nx-top {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--hl-muted);
}
.nx-title {
  /* «Тарифы» is the widest of its words (ф, ы): the floor lets it fit a phone with its lean. */
  font: 800 clamp(48px, 15vw, 260px) / 0.85 var(--font-display);
  letter-spacing: -0.06em;
  transform: translateX(calc(var(--lean, 0) * 4vw));
}
.nx-title i {
  display: inline-block;
  font-style: normal;
  color: var(--emerald-600);
  transform: translateX(calc(var(--lean, 0) * 6vw));
}
.nx-line {
  height: 4px;
  overflow: hidden;
  border-radius: 4px;
  background: rgba(17, 19, 17, 0.1);
}
.nx-line i {
  display: block;
  height: 100%;
  background: var(--emerald-600);
  transform-origin: 0 50%;
  transform: scaleX(0);
}
.nx-note {
  max-width: 60ch;
  font-size: 15px;
  line-height: 1.5;
  color: var(--hl-muted);
}
.nx-open {
  justify-self: start;
  font: 500 12px/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--emerald-800);
}

/* ---------- Narrow screens */
@media (max-width: 1180px) {
  .hero-stage {
    grid-template-columns: minmax(0, 1fr) 264px;
    gap: 28px;
  }
}
@media (max-width: 980px) {
  .top {
    inset: 10px 10px auto;
  }
  .hero {
    padding: 64px 20px 0;
  }
  .hero-stage {
    grid-template-columns: minmax(0, 1fr);
    padding-top: 36px;
  }
  .hero-inspector,
  .hero-cursor {
    display: none;
  }
  .hero-timeline {
    grid-template-columns: minmax(0, 1fr) auto;
    margin: 0 -20px;
    padding: 0 20px;
  }
  .ht-tracks {
    display: none;
  }
  .ht-tc {
    border-right: 0;
  }
  .reel {
    height: 420vh;
  }
  .reel-pin {
    grid-template-columns: minmax(0, 1fr);
  }
  .reel-side {
    display: none;
  }
  .reel-chat {
    bottom: 48px;
    width: calc(100% - 32px);
  }
  .reel-bubble {
    font-size: 14.5px;
  }
  .reel-stage {
    position: static;
  }
  .reel-code,
  .reel-code.is-on {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 96px;
    width: auto;
    margin: 0;
  }
  .reel-code {
    transform: translateY(24px);
    transition:
      transform 0.5s var(--ease-out),
      opacity 0.4s;
  }
  .reel-code.is-on {
    transform: none;
  }
  .rc-inner {
    width: auto;
  }
  .rc-body {
    min-height: 0;
    max-height: 34vh;
  }
  .m-inner {
    grid-template-columns: minmax(0, 1fr);
    padding: 88px 20px 40px;
  }
  .m-rail {
    justify-self: stretch;
  }
  .nums,
  .faq {
    padding-inline: 20px;
  }
  .faq-deck {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
  }
  .faq-cross {
    display: none;
  }
  .sforge {
    padding: 96px 20px 80px;
  }
  .sf-head {
    grid-template-columns: minmax(0, 1fr);
  }
  .sf-window {
    height: 600px;
    border-radius: 22px;
  }
  .sf-caption {
    max-width: calc(100% - 140px);
  }
  .sf-rail {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 6px;
    scrollbar-width: none;
  }
  .sf-chip {
    flex: none;
  }
  .facts {
    grid-template-columns: minmax(0, 1fr);
  }
  .fact--pixel,
  .fact--export {
    grid-column: auto;
  }
  .fd-deck {
    height: 250px;
  }
  .final {
    padding: 120px 20px 140px;
  }
  .foot {
    padding: 24px 20px 32px;
  }
  .foot-fonts {
    margin-left: 0;
  }
}
@media (max-width: 640px) {
  /* A phone: the logo alone in its pill, the room goes to the controls. */
  .brand-tag {
    display: none;
  }
  .reel-tools,
  .reel-palette,
  .reel-pop,
  .reel-handle,
  .reel-overlay {
    display: none !important;
  }
}
@media (max-width: 520px) {
  .tools {
    gap: 8px;
  }
  .sf-window {
    height: 620px;
  }
  .sf-plate {
    top: 42%;
    height: 70%;
  }
  .sf-card {
    padding: 18px;
    transform: translateY(-46px);
  }
  .sf-pause span {
    display: none;
  }
  .cta--sm .cta__label {
    display: none;
  }
  /* Icon only: a round button, not a squeezed pill. */
  .cta--sm {
    width: var(--h);
    padding: 0;
    justify-content: center;
  }
}
/* Questions on a phone: the deck becomes a row of cards to swipe through. */
@media (max-width: 700px) {
  .faq {
    padding-top: 72px;
    padding-bottom: 96px;
  }
  .faq-head {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
  .faq-side {
    min-height: 0;
    justify-items: start;
  }
  .faq-pile {
    display: none;
  }
  .faq-meta__hint {
    max-width: none;
  }
  .faq-table {
    margin: 24px -20px 0;
  }
  .faq-deck {
    display: flex;
    gap: 14px;
    padding: 18px 20px 30px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 20px;
    scrollbar-width: none;
  }
  .faq-deck::-webkit-scrollbar {
    display: none;
  }
  .faq-card {
    flex: 0 0 min(78vw, 320px);
    scroll-snap-align: start;
  }
  .faq-card__q {
    font-size: 19px;
  }
}

/* ---------- Phones: the header pills, the ledger and the stickers (owner's request 05.10). */
.sticker[hidden] {
  display: none;
}
@media (max-width: 760px) {
  .lg-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px 16px;
  }
  .lg-items {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr);
  }
  .ledger {
    padding: 80px 20px 96px;
  }
  .lg-float {
    display: none;
  }
  .sticker {
    padding: 9px 12px;
    font-size: 15px;
  }
  .sticker svg {
    width: 34px;
    height: 34px;
  }
  .sticker--logo img {
    width: 100px;
  }
  .rcv-words {
    flex-direction: column;
    gap: 0;
  }
}
@media (max-width: 560px) {
  .top {
    inset: 8px 8px auto;
  }
  .brand {
    height: 40px;
    padding: 0 14px 0 10px;
  }
  .pill {
    height: 40px;
    padding: 0 14px;
  }
  .pill--round {
    width: 40px;
  }
  .pill--sound {
    width: 52px;
  }
  .jy-hint {
    left: 20px;
    right: auto;
    bottom: 10vh;
  }
  .jy-count,
  .tn-caption,
  .cb-status {
    left: 20px;
  }
  .tn-hint {
    display: none;
  }
}