@font-face { font-family: "Outfit"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("assets/fonts/outfit-latin.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("assets/fonts/plus-jakarta-sans-latin.woff2") format("woff2"); }



:root {
  --bg: #020202;
  --band: #070B11;
  --panel: #070707;
  --blue: #288ED7;
  --blue-deep: #1F77B8;
  --blue-press: #1A679F;
  --text: rgba(255, 255, 255, 0.92);
  --muted: rgba(255, 255, 255, 0.62);
  --hair: rgba(255, 255, 255, 0.1);
  --hair-strong: rgba(255, 255, 255, 0.2);

  --font-display: "Outfit", "Avenir Next", system-ui, sans-serif;
  --font-body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;


  --h1: clamp(2.625rem, 1.9rem + 2.98vw, 4.5rem);
  --h2: clamp(1.875rem, 1.43rem + 1.9vw, 3.5rem);
  --h2-sm: clamp(1.75rem, 1.35rem + 1.7vw, 3.125rem);
  --name: clamp(1.375rem, 1.211rem + 0.674vw, 1.75rem);
  --lead: clamp(1.0625rem, 0.98rem + 0.337vw, 1.25rem);
  --small: clamp(0.875rem, 0.848rem + 0.112vw, 0.9375rem);
  --eyebrow: clamp(0.75rem, 0.723rem + 0.112vw, 0.8125rem);
  --section: clamp(3.5rem, 2.4rem + 4.6vw, 7rem);
  --robot: clamp(8rem, 5.48rem + 10.34vw, 13.75rem);

  --pad: 16px;
  --header: 72px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (min-width: 640px) { :root { --pad: 24px; } }
@media (min-width: 1024px) { :root { --pad: 32px; } }

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 88px;
  background: var(--bg);
}
@media (max-width: 767.98px) { html { scroll-padding-bottom: 84px; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, p, ol, ul, figure, fieldset { margin: 0; padding: 0; }
ol, ul { list-style: none; }
fieldset { border: 0; min-width: 0; }
img, picture, video, svg { display: block; }
img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

::selection { background: rgba(40, 142, 215, 0.35); color: #fff; }

:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }

.container {
  width: min(100% - 2 * var(--pad), 1120px);
  margin-inline: auto;
}

.vh {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip {
  position: fixed; top: 12px; left: 12px; z-index: 300;
  padding: 12px 16px; border-radius: 10px;
  background: #fff; color: #020202; font-weight: 600;
  opacity: 0; pointer-events: none;
  transform: translateY(-200%);
}
.skip:focus { opacity: 1; pointer-events: auto; transform: none; }

.ico { width: 1.125em; height: 1.125em; flex: none; }



h1, .h2 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
  text-wrap: balance;
}

h1 { font-size: var(--h1); line-height: 1; }
@media (max-width: 349.98px) { h1 { font-size: 2.25rem; } }
.h2 { font-size: var(--h2); line-height: 1.05; }
.h2--sm { font-size: var(--h2-sm); }
.ln { display: block; }
.h1__accent { color: var(--blue); }
.h1__dot { color: var(--blue); }
.nw { white-space: nowrap; }

@media (min-width: 1024px) {
  h1 { line-height: 0.98; }
  .h2 { line-height: 1; }
}

.eyebrow {
  font-size: var(--eyebrow);
  line-height: 20px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
}

.build-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--name);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #fff;
}

.lead, .caption { font-size: var(--lead); line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.shown { font-size: var(--small); line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.fine { font-size: var(--small); line-height: 1.5; color: var(--muted); }

.provenance { font-size: var(--lead); line-height: 1.5; color: rgba(255, 255, 255, 0.8); text-wrap: pretty; }



.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 24px;
  border-radius: 12px;
  background: var(--blue-deep); color: #fff;
  font-weight: 600; font-size: 1rem; line-height: 1;
  white-space: nowrap;
  transition: background-color 160ms ease;
}
.btn:hover { background: var(--blue-press); }
.btn:focus-visible { outline-offset: 2px; border-radius: 12px; }
.btn--sm { min-height: 44px; padding: 0 16px; font-size: 0.9375rem; gap: 8px; border-radius: 10px; }

.link {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px;
  color: var(--blue); font-weight: 600; font-size: 1rem; line-height: 1.3;
}
.link .ico { transition: transform 160ms var(--ease); }
.link:hover { color: #fff; }
.link--quiet { color: var(--muted); font-weight: 500; }
.link--quiet:hover { color: #fff; }

.inline-link {
  padding-block: 13px;
  color: #fff;
  text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.35);
  text-decoration-thickness: 1px; text-underline-offset: 0.2em;
}
.inline-link:hover { color: var(--blue); text-decoration-color: currentColor; }

.links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 28px; }

.pill {
  display: inline-flex; align-items: center; gap: 8px;
  height: 30px; padding: 0 12px 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 999px;
  font-size: 0.8125rem; font-weight: 600; line-height: 1; color: var(--text);
  white-space: nowrap;
}
.pill__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); flex: none; }



.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--header);
  background: var(--bg); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
}
.site-header__in { height: 100%; display: flex; align-items: center; gap: 16px; }

.logo { display: inline-flex; align-items: center; min-height: 44px; flex: none; margin-left: -1px; }
.logo img { width: 123px; height: 32px; }

.site-nav { display: none; margin-inline: auto; gap: 8px; }
.site-nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
  font-size: 0.9375rem; font-weight: 500; color: var(--muted);
  transition: color 160ms ease;
}
.site-nav a:hover { color: #fff; }

.site-header .logo { justify-self: start; }


.site-header__cta {
  display: none; margin-left: auto;
  background: transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
  transition: background-color 160ms ease, box-shadow 160ms ease;
}
.site-header__cta:hover { background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4); }
.site-header__cta.is-on { background: var(--blue-deep); box-shadow: none; }
.site-header__cta.is-on:hover { background: var(--blue-press); }

.menu-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 4px 0 12px; margin-left: auto;
  font-size: 0.9375rem; font-weight: 600; color: #fff;
}

@media (min-width: 768px) {
  .site-header__cta { display: inline-flex; }
  .site-header__cta + .menu-toggle { margin-left: 4px; }
}
@media (min-width: 1024px) {
  .site-header__in { display: grid; grid-template-columns: 1fr auto 1fr; }
  .site-nav { display: flex; margin-inline: 0; }
  .site-header__cta { margin-left: 0; justify-self: end; }
  .site-header .menu-toggle { display: none; }
}


.menu {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: var(--bg); color: var(--text);
  overflow-y: auto;
}
.menu::backdrop { background: transparent; }
.menu[open] { animation: fade-in 160ms ease both; }
.menu__bar { height: var(--header); display: flex; align-items: center; justify-content: space-between; }
.menu__links { display: flex; flex-direction: column; padding-block: 16px 40px; }
.menu__links a:not(.btn) {
  display: flex; align-items: center; min-height: 60px;
  border-top: 1px solid var(--hair);
  font-family: var(--font-display); font-weight: 700; font-size: 1.75rem; letter-spacing: -0.01em; color: #fff;
}
.menu__links a:not(.btn):nth-last-child(2) { border-bottom: 1px solid var(--hair); }
.menu__cta { margin-top: 28px; }

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }



.mascot { flex: none; aspect-ratio: 1; pointer-events: none; user-select: none; }
.mascot img, .mascot video { width: 100%; height: 100%; object-fit: cover; }


.mascot--still { width: var(--robot); }
.mascot--still img {
  -webkit-mask-image: radial-gradient(circle closest-side at 50% 50%, #000 84%, transparent 100%);
  mask-image: radial-gradient(circle closest-side at 50% 50%, #000 84%, transparent 100%);
}


.mascot--hero { width: var(--stage); }
.mascot__media {
  position: relative; width: 100%; height: 100%;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 6%, #000 91%, transparent 99%);
  mask-image:
    linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 6%, #000 91%, transparent 99%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.mascot__media video { position: absolute; inset: 0; }

.avatar {
  width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none;
  background: var(--bg); box-shadow: 0 0 0 1px var(--hair);
}
.avatar--mark {
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; letter-spacing: -0.04em; line-height: 1; color: #fff;
}
.avatar--mark span { color: var(--blue); }



.hero { padding-top: var(--header); }

.hero__in {
  display: grid;
  justify-items: center;
  text-align: center;
  padding-block: 28px 40px;
}
.hero__text { display: grid; justify-items: center; max-width: 36rem; }

.hero h1 { font-size: clamp(2.875rem, 1.95rem + 4.1vw, 6rem); }
@media (max-width: 349.98px) { .hero h1 { font-size: 2.5rem; } }

.hero__sub {
  margin-top: 16px;
  font-size: var(--lead); line-height: 1.5; color: rgba(255, 255, 255, 0.72);
  text-wrap: pretty;
}
.hero__btn { margin-top: 28px; }





@media (max-width: 767.98px) and (max-height: 699px) {
  .hero__in { padding-block: 16px 32px; }
  .hero h1 { font-size: 2.5rem; }
}


@media (min-width: 768px) {
  .hero__in {
    justify-items: start; text-align: left;
    padding-block: 48px;
  }
  .hero__text { justify-items: start; max-width: 42rem; }
  .hero__sub { margin-top: 20px; }
  .hero__btn { margin-top: 32px; }
}



.frame {
  display: block; position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: #0b0b0c;
}

.frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border: 1px solid var(--hair); border-radius: inherit;
  transition: border-color 160ms ease;
}
.frame:hover::after, .frame:focus-visible::after { border-color: var(--hair-strong); }
.frame:focus-visible { outline-offset: 2px; border-radius: 14px; }

.frame__bar {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  height: 26px; padding-inline: 52px;
  background: #101011;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.frame__dots { display: inline-flex; gap: 5px; flex: none; }
.frame__dots i { width: 8px; height: 8px; border-radius: 50%; background: #3a3a3c; }
.frame__bar .frame__dots { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); }
.frame__pill {
  min-width: 0; max-width: 100%;
  height: 18px; padding: 0 12px; border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  font-size: 0.75rem; line-height: 18px; font-weight: 500; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.frame__shot { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #0b0b0c; }
.frame__shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; }


@media (max-width: 639.98px) {
  .frame--exhibit .frame__shot { aspect-ratio: 4 / 5; }
  .exhibit:not(.exhibit--lead) .frame--exhibit .frame__shot { aspect-ratio: 8 / 11; }
  .frame--exhibit .frame__bar { padding-inline: 12px; }
  .frame--exhibit .frame__dots { display: none; }
}

@media (max-width: 339.98px) {
  .frame__bar { padding-inline: 12px; }
  .frame__bar .frame__dots { display: none; }
}
@media (min-width: 640px) {
  .frame--exhibit .frame__bar { height: 34px; padding-inline: 72px; }
  .frame--exhibit .frame__bar .frame__dots { left: 14px; gap: 6px; }
  .frame--exhibit .frame__bar .frame__dots i { width: 10px; height: 10px; }
  .frame--exhibit .frame__pill { height: 22px; line-height: 22px; padding: 0 16px; min-width: 260px; text-align: center; }

  .exhibit--lead .frame__shot { aspect-ratio: 16 / 9; }
}


@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .frame--enter {
      transform-origin: 50% 0;
      animation: frame-enter linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 60%;
    }
  }
}
@keyframes frame-enter {
  from { transform: scale(0.9); border-radius: 28px; }
  to { transform: none; border-radius: 14px; }
}



.exhibit, .ask, .more, .facts { padding-block: var(--section); }

.exhibit--lead { padding-top: 0; }
@media (min-width: 768px) { .exhibit--lead { padding-top: 24px; } }

.exhibit__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "eyebrow eyebrow"
    "prov prov"
    "frame frame"
    "title robot"
    "meta meta";
  align-items: end;
}
.exhibit__grid > .eyebrow { grid-area: eyebrow; }
.exhibit__grid > .provenance { grid-area: prov; margin-top: 12px; }
.exhibit__grid > .frame { grid-area: frame; margin-top: 16px; }
.exhibit__grid > .h2 { grid-area: title; margin-top: 28px; padding-bottom: 12px; }
.exhibit__grid > .exhibit__meta { grid-area: meta; }
.exhibit__robot {
  grid-area: robot; --robot: 120px;
  margin: 12px -12px calc(var(--robot) * -0.1) 0;
}

@media (max-width: 349.98px) {
  .exhibit__robot { --robot: 96px; }
  .exhibit__grid > .h2 { white-space: nowrap; }
}

.exhibit__meta .caption, .meta-row .caption, .tile .caption { margin-top: 6px; }
.exhibit__meta .shown, .meta-row .shown, .tile .shown { margin-top: 6px; }
.exhibit__meta .links, .meta-row .links { margin-top: 10px; }
.exhibit__meta .caption, .meta-row__text .caption { max-width: 36rem; }
.meta-row__text .shown { max-width: 36rem; }

@media (min-width: 1024px) {
  .exhibit__grid {
    grid-template-columns: fit-content(36rem) minmax(0, 1fr);
    grid-template-areas:
      "eyebrow eyebrow"
      "prov prov"
      "frame frame"
      "title robot"
      "meta robot";
  }
  .exhibit__grid > .h2 { margin-top: 40px; padding-bottom: 0; }
  .exhibit__grid > .exhibit__meta { margin-top: 28px; }

  .exhibit__robot {
    --robot: 220px;
    align-self: start; justify-self: start;
    margin: 28px 0 0 40px;
  }
  .exhibit__meta .caption, .meta-row .caption { margin-top: 8px; }
  .exhibit__meta .shown, .meta-row .shown { margin-top: 8px; }
  .exhibit__meta .links, .meta-row .links { margin-top: 16px; }
}


.head { display: grid; }
.head > .h2 { margin-top: 12px; }
.head--sub > .h2 { margin-top: 0; }
.head__sub { margin-top: 12px; }

.head--robot {
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "robot eyebrow" "title title" "sub sub";
  align-items: center; column-gap: 8px;
}
.head--robot > .eyebrow { grid-area: eyebrow; }
.head--robot > .h2 { grid-area: title; margin-top: 4px; }
.head--robot > .head__sub { grid-area: sub; }
.head__robot { grid-area: robot; margin-left: calc(var(--robot) * -0.16); }

@media (min-width: 1024px) {
  .head > .h2 { margin-top: 16px; }
  .head__sub { margin-top: 16px; }

  .head--robot {
    grid-template-areas: "robot eyebrow" "robot title" "robot sub";
    grid-template-rows: 1fr auto auto;
    align-items: end; column-gap: 32px;
  }
  .head--robot > .h2 { margin-top: 12px; margin-bottom: calc(var(--robot) * 0.14 - 0.13em); }
  .head__robot { margin-left: calc(var(--robot) * -0.2); }


  .head--robot.head--stack { display: flex; flex-direction: column; align-items: flex-start; }
  .head--robot.head--stack > .h2 { margin: 12px 0 0; }
  .head--robot.head--stack > .head__robot { order: -1; margin-bottom: 0; }
}

.exhibit .head + .frame { margin-top: 24px; }
@media (min-width: 1024px) {
  .exhibit .head + .frame { margin-top: 48px; }
}

.meta-row { margin-top: 20px; }
@media (min-width: 1024px) {
  .meta-row { margin-top: 32px; }
}


.exhibit--band {
  background: linear-gradient(180deg, var(--bg) 0, var(--band) 96px, var(--band) calc(100% - 96px), var(--bg) 100%);
}
.exhibit--band .frame::after { border-color: var(--hair-strong); }
.exhibit--band .frame:hover::after, .exhibit--band .frame:focus-visible::after { border-color: rgba(255, 255, 255, 0.32); }



.ask__grid { display: grid; gap: 28px; }
.ask__head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 12px; }
.ask__robot { width: 104px; aspect-ratio: 1; margin-left: -8px; }
.ask__robot img { width: 100%; height: 100%; }
.ask__titles .h2 { margin-top: 6px; }
@media (min-width: 1024px) {
  .ask__head { column-gap: 20px; }
  .ask__robot { width: 124px; margin-left: -10px; }
  .ask__titles .h2 { margin-top: 10px; }
}
.ask__grid > * { min-width: 0; }
.ask__intro .lead { margin-top: 16px; }
.ask__intro .ask__note { margin-top: 12px; }

.lead__pick { display: none; }
.choices { display: none; }
.choice {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  min-height: 48px; padding: 0 4px;
  border-top: 1px solid var(--hair);
  font-size: 1rem; font-weight: 600; color: var(--muted);
  cursor: pointer;
  transition: color 160ms ease;
}
.choice input {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: pointer;
}
.choice__mark {
  width: 10px; height: 10px; border-radius: 50%; flex: none;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.45);
  transition: background-color 160ms ease, box-shadow 160ms ease;
}
.choice:hover { color: #fff; }
.choice input:checked ~ .choice__mark { background: var(--blue); box-shadow: none; }
.choice input:checked ~ .choice__text { color: #fff; }
.choice:focus-within { outline: 2px solid var(--blue); outline-offset: 2px; }

.chat__note { font-size: var(--small); line-height: 1.5; color: var(--muted); margin-top: 12px; text-wrap: pretty; }
.chat__panel {
  border: 1px solid var(--hair); border-radius: 20px;
  background: var(--panel);
  overflow: hidden;
}
.chat__head {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--hair);
}
.chat__id { display: grid; line-height: 1.25; }
.chat__name { font-weight: 600; font-size: 0.9375rem; color: #fff; }
.chat__role { font-size: 0.8125rem; color: var(--muted); }
.chat__tag {
  margin-left: auto; padding-left: 8px;
  font-size: 0.75rem; line-height: 1.3; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.78);
  text-align: right;
}
.chat__body { padding: 16px 14px 18px; }


.conv + .conv { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--hair); }
.conv__title {
  margin-bottom: 14px;
  font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: #fff;
}

.msgs { display: flex; flex-direction: column; gap: 8px; }
.msg { display: flex; flex-direction: column; gap: 4px; max-width: 80%; }
.msg--him { align-self: flex-start; align-items: flex-start; }
.msg--you { align-self: flex-end; align-items: flex-end; }
@media (max-width: 639.98px) { .msg { max-width: 88%; } }
@media (max-width: 359.98px) { .msg--chip { max-width: 100%; } }
.msg__who { font-size: 0.75rem; line-height: 1.3; color: var(--muted); padding-inline: 2px; }
.bubble {
  padding: 10px 14px; border-radius: 16px;
  font-size: 0.9375rem; line-height: 1.4; color: #fff;
  text-wrap: pretty;
}
.msg--him .bubble { background: #0e4a73; border-top-left-radius: 4px; }
.msg--you .bubble { background: #1f2c34; border-top-right-radius: 4px; }
.msg--sys {
  align-self: center; max-width: none; margin-block: 8px;
  font-size: 0.8125rem; line-height: 1.5; color: var(--muted);
}


.chip { display: grid; gap: 1px; margin-top: 8px; }
.chip__label { font-size: 0.75rem; line-height: 1.4; font-weight: 500; color: rgba(255, 255, 255, 0.78); }
.chip__addr { font-size: 0.8125rem; line-height: 1.4; font-weight: 600; color: #fff; overflow-wrap: anywhere; }

.ask__cta { margin-top: 24px; display: grid; justify-items: stretch; }
.ask__cta .fine { margin-top: 12px; }
.ask__cta .link { margin-top: 8px; justify-self: start; }

@supports selector(:has(*)) {
  .lead__pick { display: inline; }
  .choices { display: flex; flex-direction: column; margin-top: 20px; border-bottom: 1px solid var(--hair); }
  .choice:focus-within { outline: none; }
  .choice:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }

  .conv__title { display: none; }
  .convs { display: grid; align-items: start; }
  .conv, .conv + .conv {
    grid-area: 1 / 1; margin: 0; padding: 0; border: 0;
    visibility: hidden; opacity: 0;
    transition: opacity 160ms ease, visibility 0s linear 160ms;
  }
  .ask:has(#ex-app:checked) .conv[data-ex="app"],
  .ask:has(#ex-store:checked) .conv[data-ex="store"],
  .ask:has(#ex-software:checked) .conv[data-ex="software"] {
    visibility: visible; opacity: 1;
    transition: opacity 160ms ease, visibility 0s linear 0s;
  }
}

@media (min-width: 640px) {
  .bubble { font-size: 1rem; }
  .chat__head { padding: 14px 20px; }
  .chat__body { padding: 20px; }
  .ask__cta { justify-items: start; }
}

@media (min-width: 1024px) {
  .ask__grid {
    grid-template-columns: minmax(0, 448fr) minmax(0, 544fr);
    column-gap: clamp(48px, 10vw, 128px);
    align-items: start;
  }
  .ask__intro .lead { margin-top: 20px; max-width: 26rem; }
  .choices { margin-top: 32px; }
  .choice { min-height: 52px; font-size: 1.125rem; }

  .ask__cta {
    grid-template-columns: auto 1fr; column-gap: 28px; align-items: center;
    grid-template-areas: "btn link" "fine fine";
  }
  .ask__cta .btn { grid-area: btn; }
  .ask__cta .link { grid-area: link; margin-top: 0; }
  .ask__cta .fine { grid-area: fine; }
}



.tiles { margin-top: 32px; display: grid; gap: 48px; }
.tile { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.tile .frame { order: -1; align-self: stretch; margin-bottom: 18px; }
.tile .link { margin-top: 6px; }

.more__foot { margin-top: 40px; display: grid; gap: 8px; }
.more__builds { font-size: 1.0625rem; line-height: 1.5; color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: 0 14px; }
.more__builds > span { display: inline-flex; align-items: center; }
.more__builds .inline-link { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
.more__foot .link { justify-self: start; }

@media (max-width: 767.98px) {
  .more__builds { gap: 0 12px; }
  .more__label { flex-basis: 100%; }
}

@media (min-width: 768px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 32px; }
}
@media (min-width: 1024px) {
  .tiles { margin-top: 56px; }
  .tile .frame { margin-bottom: 20px; }
  .tile .caption { margin-top: 8px; }
  .tile .shown { margin-top: 8px; }
  .tile .link { margin-top: 8px; }
  .more__foot { margin-top: 48px; grid-template-columns: 1fr auto; align-items: center; gap: 16px 32px; }
  .more__foot .link { justify-self: end; }
}



.facts__list { margin-top: 32px; display: grid; }
.fact { padding-block: 20px 22px; border-top: 1px solid var(--hair-strong); }
.fact__title {
  font-family: var(--font-display); font-weight: 700; font-size: 1.375rem; line-height: 1.2;
  letter-spacing: -0.01em; color: #fff; text-wrap: balance;
}
.fact__title--avatar { display: flex; align-items: center; gap: 12px; }
.fact__title--avatar .avatar { width: 28px; height: 28px; margin-block: -4px; }
.fact p { margin-top: 8px; font-size: 1.0625rem; line-height: 1.5; color: var(--muted); text-wrap: pretty; max-width: 30rem; }
.facts__links { margin-top: 16px; }
.head .facts__links { margin-top: 14px; }

@media (min-width: 640px) {
  .facts__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
}
@media (min-width: 1024px) {
  .facts__list { margin-top: 56px; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 28px; }
  .fact { padding-block: 24px 0; }
  .fact p { margin-top: 12px; }
  .facts__links { margin-top: 40px; }
  .head .facts__links { margin-top: 20px; }
}

@media (min-width: 1024px) and (max-width: 1099.98px) { .fact__title { min-height: 2.4em; } }



.close { padding-block: clamp(5rem, 2.81rem + 8.99vw, 10rem); }
.close__in {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  max-width: 720px;
}
.close__robot { order: -1; --robot: clamp(200px, 9.75rem + 11.24vw, 300px); margin-block: calc(var(--robot) * -0.1) calc(var(--robot) * -0.02); }
.close .lead { margin-top: 16px; }
.msgform { margin-top: 32px; width: 100%; max-width: 640px; display: grid; gap: 12px; text-align: left; }
.msgform__label { font-size: var(--small); line-height: 1.5; font-weight: 600; color: rgba(255, 255, 255, 0.8); }
.msgform__field {
  display: block; width: 100%; min-height: 128px; margin: 0; resize: vertical;
  padding: 14px 16px; border-radius: 12px;
  border: 1.5px solid rgba(255, 255, 255, 0.34); background: #111214;
  font: inherit; font-size: 1.0625rem; line-height: 1.5; color: #fff; caret-color: var(--blue);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.msgform__field:hover { border-color: rgba(255, 255, 255, 0.5); }
.msgform__field:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(40, 142, 215, 0.35), inset 0 1px 2px rgba(0, 0, 0, 0.6); }
.msgform__btn { width: 100%; }
@media (min-width: 768px) {
  .msgform { gap: 14px; }
  .msgform__field { min-height: 120px; padding: 16px 18px; font-size: 1.125rem; }
  .msgform__btn { width: auto; justify-self: center; margin-top: 6px; }
}
.close .fine { margin-top: 14px; }
.close .link { margin-top: 4px; font-size: var(--small); }
.close .link--quiet {
  text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.35);
  text-decoration-thickness: 1px; text-underline-offset: 0.2em;
}
.only-wide { display: none; }

@media (min-width: 1024px) {
  .close .lead { margin-top: 20px; }
  .msgform { margin-top: 40px; }
  .only-narrow { display: none; }
  .only-wide { display: inline-flex; }
}



.work { padding-block: 0 var(--section); overflow: hidden; }

.wall {
  --th: 132px;
  --gap: 10px;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.wall__row { overflow: hidden; padding-block: calc(var(--gap) / 2); }
.wall__row--4 { display: none; }
.wall__track {
  display: flex; width: max-content;
  animation: wall-left var(--dur, 90s) linear var(--delay, 0s) infinite;
  will-change: transform;
}
.wall__row--rev .wall__track { animation-name: wall-right; }
.wall__set { display: flex; align-items: center; gap: var(--gap); padding-right: var(--gap); }
@keyframes wall-left { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@keyframes wall-right { from { transform: translate3d(-50%, 0, 0); } to { transform: translate3d(0, 0, 0); } }
.wall.is-off .wall__track, .wall.is-paused .wall__track, .wall.is-held .wall__track { animation-play-state: paused; }


.tl {
  position: relative; display: block; flex: none; height: var(--th); padding: 0; border: 0; overflow: hidden;
  background: #111; cursor: pointer; -webkit-tap-highlight-color: transparent;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
  transition: transform 220ms var(--ease);
}
.tl img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; pointer-events: none; }
.tl::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); pointer-events: none; }

.tl--d { width: calc(var(--th) * 1.6 + 0px); border-radius: calc(var(--th) * 0.075); background: #1a1d22; }
.tl--d img { height: 100%; }

.tl--p { width: calc(var(--th) * 0.557); border-radius: calc(var(--th) * 0.075); padding: 3px; background: #1a1d22; }
.tl--p img { border-radius: calc(var(--th) * 0.075 - 3px); }
@media (hover: hover) { .tl:hover { transform: translateY(-3px); } }
.tl:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }


.wall__brand {
  flex: none; position: relative; overflow: hidden;
  width: calc(var(--th) * 1.6); height: var(--th);
  display: grid; place-items: center; border-radius: calc(var(--th) * 0.075);
  background: radial-gradient(120% 95% at 50% 0%, #171b21 0%, #0a0b0d 72%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09), 0 10px 30px rgba(0, 0, 0, 0.55);
}
.wall__logo { font-family: var(--font-display); font-weight: 700; font-size: calc(var(--th) * 0.22); letter-spacing: -0.04em; line-height: 1; color: #fff; }
.wall__logo span { color: var(--blue); }
.wall__brand::after {
  content: ""; position: absolute; left: 22%; right: 22%; bottom: 15%; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(40, 142, 215, 0), rgba(40, 142, 215, 1) 50%, rgba(40, 142, 215, 0));
  box-shadow: 0 0 18px 3px rgba(40, 142, 215, 0.4);
}

@media (min-width: 640px) { .wall { --th: 150px; --gap: 12px; } }
@media (min-width: 1024px) {
  .wall { --th: 176px; --gap: 14px; }
  .wall__row--4 { display: block; }
}
.wall__foot { margin-top: 20px; }
@media (min-width: 1024px) { .wall__foot { margin-top: 28px; } }




@media (min-width: 900px) {
  .tiles--three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
}



.motif { width: 96px; height: 72px; margin: 0 0 14px -6px; overflow: visible; }
.m-line { fill: none; stroke: rgba(255, 255, 255, 0.78); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.m-dot { fill: var(--blue); }
.m-soft { fill: rgba(255, 255, 255, 0.4); }
.motif rect, .motif circle, .motif path { transform-box: fill-box; }
@media (min-width: 1024px) { .motif { width: 112px; height: 84px; margin-bottom: 18px; } }

@media (prefers-reduced-motion: no-preference) {
  .is-live .motif--app .m-1, .is-live .motif--app .m-2, .is-live .motif--app .m-3, .is-live .motif--app .m-4 {
    transform-origin: center; animation: m-pop 4.8s var(--ease) infinite both;
  }
  .is-live .motif--app .m-2 { animation-delay: 0.15s; }
  .is-live .motif--app .m-3 { animation-delay: 0.3s; }
  .is-live .motif--app .m-4 { animation-delay: 0.45s; }
  .is-live .motif--store .m-drop { animation: m-drop 4.8s ease-in infinite both; animation-delay: 0.3s; }
  .is-live .motif--store .m-badge { transform-origin: center; animation: m-badge 4.8s var(--ease) infinite both; animation-delay: 0.3s; }
  .is-live .motif--web .m-1, .is-live .motif--web .m-2, .is-live .motif--web .m-3 {
    transform-origin: left center; animation: m-draw 4.8s var(--ease) infinite both; animation-delay: 0.6s;
  }
  .is-live .motif--web .m-2 { animation-delay: 0.8s; }
  .is-live .motif--web .m-3 { animation-delay: 0.95s; }
  .is-live .motif--soft .m-1, .is-live .motif--soft .m-2, .is-live .motif--soft .m-3 {
    transform-origin: center bottom; animation: m-grow 4.8s var(--ease) infinite both; animation-delay: 0.9s;
  }
  .is-live .motif--soft .m-2 { animation-delay: 1.05s; }
  .is-live .motif--soft .m-3 { animation-delay: 1.2s; }
}
@keyframes m-pop { 0%, 6% { opacity: 0; transform: scale(0.4); } 18%, 82% { opacity: 1; transform: scale(1); } 94%, 100% { opacity: 0; transform: scale(1); } }
@keyframes m-drop {
  0% { opacity: 0; transform: translateY(-4px); }
  8% { opacity: 1; transform: translateY(0); }
  26% { opacity: 1; transform: translateY(20px); }
  32%, 100% { opacity: 0; transform: translateY(30px); }
}
@keyframes m-badge { 0%, 28% { opacity: 0; transform: scale(0.2); } 38%, 84% { opacity: 1; transform: scale(1); } 94%, 100% { opacity: 0; transform: scale(1); } }
@keyframes m-draw { 0%, 4% { opacity: 1; transform: scaleX(0); } 22%, 84% { opacity: 1; transform: scaleX(1); } 94%, 100% { opacity: 0; transform: scaleX(1); } }
@keyframes m-grow { 0%, 4% { transform: scaleY(0.08); } 22%, 84% { transform: scaleY(1); } 96%, 100% { transform: scaleY(0.08); } }



.worklist { margin-top: 48px; border-block: 1px solid var(--hair-strong); }
.worklist__summary {
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 60px; cursor: pointer; font-weight: 600; font-size: 1.0625rem; color: #fff;
}
.worklist__summary::-webkit-details-marker { display: none; }
.worklist__summary .ico { transition: transform 200ms var(--ease); color: var(--blue); }
.worklist[open] .worklist__summary .ico { transform: rotate(180deg); }
.worklist__summary:hover { color: var(--blue); }
.worklist__list { display: grid; padding-bottom: 12px; }
.worklist__item { display: grid; gap: 4px; padding-block: 14px; border-top: 1px solid var(--hair); }
.worklist__item p { font-size: 0.9375rem; line-height: 1.55; color: var(--muted); text-wrap: pretty; }
.worklist__item strong { color: #fff; font-weight: 600; }
.worklist__kind { order: -1; font-size: var(--eyebrow); line-height: 18px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue); }
@media (min-width: 768px) {
  .worklist__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
}



.faq { padding-block: var(--section); }
.faq__grid { display: grid; gap: 28px; }
.faq__grid > * { min-width: 0; }
.faq__intro .h2 { margin-top: 12px; }
.faq__entity { margin-top: 16px; font-size: 1rem; line-height: 1.65; color: var(--muted); text-wrap: pretty; max-width: 34rem; }
.faq__list { border-bottom: 1px solid var(--hair-strong); }
.qa { border-top: 1px solid var(--hair-strong); }
.qa__h { font: inherit; }
.qa__q {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%;
  min-height: 60px; padding: 14px 0; border: 0; background: none; color: #fff; text-align: left; cursor: pointer;
  font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; line-height: 1.3; letter-spacing: -0.005em;
}
.qa__q:hover { color: var(--blue); }
.qa__q:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 6px; }
.qa__mark { position: relative; flex: none; width: 14px; height: 14px; }
.qa__mark::before, .qa__mark::after {
  content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 2px; border-radius: 1px; background: var(--blue);
  transition: transform 200ms var(--ease);
}
.qa__mark::after { transform: rotate(90deg); }
.qa__q[aria-expanded="true"] .qa__mark::after { transform: rotate(0deg); }
.qa__a > p { padding-bottom: 20px; }
.qa__a { font-size: 1rem; line-height: 1.65; color: var(--muted); max-width: 40rem; text-wrap: pretty; }
@media (min-width: 1024px) {
  .faq__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
  .faq__intro .h2 { margin-top: 16px; }
  .faq__entity { margin-top: 20px; }
  .qa__q { font-size: 1.25rem; }
  .qa__a { font-size: 1.0625rem; }
}



.site-footer { border-top: 1px solid var(--hair); padding-block: 56px 88px; }
.site-footer__grid { display: grid; gap: 40px; }
.site-footer__brand p { margin-top: 12px; max-width: 24rem; font-size: 0.9375rem; line-height: 1.6; color: var(--muted); }
.site-footer__col { display: flex; flex-direction: column; align-items: flex-start; }
.site-footer__title {
  margin-bottom: 4px;
  font-family: var(--font-body); font-size: 0.8125rem; line-height: 20px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}
.site-footer__col a {
  display: inline-flex; align-items: center; min-height: 44px; min-width: 44px;
  font-size: 0.9375rem; color: var(--text);
  transition: color 160ms ease;
}
.site-footer__col a:hover, .site-footer__legal a:hover { color: var(--blue); }
.site-footer__base {
  margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--hair);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px;
  font-size: 0.8125rem; color: var(--muted);
}
.site-footer__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; }
.site-footer__legal a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
.badge {
  display: inline-flex; align-items: center; gap: 8px;
  height: 28px; padding: 0 12px 0 10px;
  border: 1px solid var(--hair); border-radius: 999px;
  font-size: 0.75rem; white-space: nowrap;
}

.site-footer__word {
  margin-top: 48px;
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.04em; line-height: 0.82;
  font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4.75rem); color: #fff; white-space: nowrap;
  user-select: none;
}
.site-footer__word span { color: var(--blue); }
.site-footer__word + .site-footer__base { margin-top: 28px; }

@media (min-width: 768px) {
  .site-footer { padding-block: 72px 48px; }
  .site-footer__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 3fr) minmax(0, 3fr); gap: 32px; }
  .site-footer__base { margin-top: 56px; }
  .site-footer__word { margin-top: 64px; }
  .site-footer__word + .site-footer__base { margin-top: 32px; }
}



.dock {
  position: fixed; z-index: 90;
  left: calc(var(--pad) + 8px); right: calc(var(--pad) + 8px); bottom: max(16px, env(safe-area-inset-bottom));
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
  visibility: hidden; opacity: 0;
  transition: opacity 160ms ease, visibility 0s linear 160ms, background-color 160ms ease;
}
.dock.is-on, .dock:focus-visible {
  visibility: visible; opacity: 1;
  transition: opacity 160ms ease, visibility 0s linear 0s, background-color 160ms ease;
}
@media (min-width: 768px) { .dock { display: none; } }

.fab {
  position: fixed; z-index: 80;
  right: max(16px, calc(env(safe-area-inset-right) + 12px));
  bottom: calc(16px + env(safe-area-inset-bottom));
  width: 60px; height: 60px; border-radius: 50%; overflow: hidden;
  background: #020202;
  box-shadow: 0 0 0 1px rgba(110, 180, 245, 0.4), 0 0 18px rgba(40, 142, 215, 0.5), 0 10px 24px rgba(0, 0, 0, 0.6);
  -webkit-tap-highlight-color: transparent;
  transition: bottom 200ms var(--ease), scale 200ms var(--ease);
}
.fab img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fab:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (max-width: 767.98px) { body:has(.dock.is-on) .fab { bottom: calc(max(16px, env(safe-area-inset-bottom)) + 64px); } }
@media (min-width: 768px) { .fab { width: 64px; height: 64px; right: 24px; bottom: 24px; } }
@media (hover: hover) { .fab:hover { scale: 1.06; } }
@media (prefers-reduced-motion: no-preference) { .fab { animation: fab-bob 4s ease-in-out infinite; } }
@keyframes fab-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
@media print { .fab { display: none; } }
@media (max-width: 767.98px) { body:has(.dock) .site-footer { padding-bottom: 168px; } }
@media (min-width: 768px) { .site-footer { padding-bottom: 112px; } }



.toast {
  position: fixed; z-index: 250; left: 50%; bottom: 88px; transform: translateX(-50%);
  max-width: calc(100% - 32px);
  padding: 10px 16px; border-radius: 10px;
  background: #fff; color: #020202;
  font-size: 0.875rem; font-weight: 600; line-height: 1.4; text-align: center;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
}
.toast[hidden] { display: none; }
@media (min-width: 768px) { .toast { bottom: 32px; } }


.bot-spot { position: relative; flex: none; aspect-ratio: 0.82; }
.bot-spot > canvas.bot3d, .bot-spot > img.bot3d-still { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.bot-spot > img.bot3d-still { object-fit: contain; cursor: pointer; }

.bot-spot > canvas.bot3d { visibility: hidden; }
.bot-spot.bot-ready > canvas.bot3d { visibility: visible; }
.bot-spot.bot-ready > img.bot3d-still { visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
  .bot-spot.bot-ready > canvas.bot3d { visibility: hidden; }
  .bot-spot.bot-ready > img.bot3d-still { visibility: visible; }
}


.wall__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.bot-spot--wall { width: 128px; margin-right: -8px; }
.bot-spot--ask { width: 120px; margin-left: -14px; }
.bot-spot--faq { width: 150px; margin-top: 12px; }
.bot-spot--close { width: 170px; margin: 16px auto 0; }
@media (min-width: 1024px) {
  .bot-spot--wall { width: 180px; }
  .bot-spot--ask { width: 170px; margin-left: -20px; }
  .bot-spot--faq { width: 210px; margin-top: 20px; }
  .bot-spot--close { width: 220px; }
}
.close__in .bot-spot--close + .lead { margin-top: 12px; }


.pause {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  min-height: 44px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--hair-strong); background: rgba(255, 255, 255, 0.04); color: var(--text);
  font: 600 0.875rem/1 var(--font-body); cursor: pointer;
}
.pause:hover { border-color: rgba(255, 255, 255, 0.4); color: #fff; }
.pause:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.pause .ico { width: 16px; height: 16px; }
.pause .ico--play, .pause[aria-pressed="true"] .ico--pause { display: none; }
.pause[aria-pressed="true"] .ico--play { display: block; }
.pause[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .pause { display: none !important; } }


.sheet {
  position: fixed; inset: auto 0 0 0; margin: 0 auto; padding: 0; border: 0;
  width: min(100%, 640px); max-width: none; height: auto; max-height: calc(100% - 40px);
  background: transparent; color: var(--text); overflow: visible;
}
.sheet::backdrop { background: rgba(0, 0, 0, 0.62); }
.sheet[open] { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .sheet[open] { animation: sheet-in 320ms cubic-bezier(0.16, 1, 0.3, 1); }
  .sheet[open]::backdrop { animation: sheet-fade 220ms ease; }
  .sheet.is-leaving { animation: sheet-out 200ms ease-in forwards; }
}
@keyframes sheet-in { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes sheet-out { from { transform: translateY(0); } to { transform: translateY(110%); } }
@keyframes sheet-fade { from { opacity: 0; } to { opacity: 1; } }
.sheet__panel {
  position: relative; max-height: calc(100dvh - 40px); overflow: auto; overscroll-behavior: contain;
  padding: 10px 20px max(24px, env(safe-area-inset-bottom));
  border-radius: 20px 20px 0 0; background: #0d1014;
  box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.1), 0 -20px 60px rgba(0, 0, 0, 0.6);
  transition: transform 240ms var(--ease);
}
.sheet.is-dragging .sheet__panel { transition: none; }
.sheet__grab { display: grid; place-items: center; height: 24px; margin: -4px -20px 6px; touch-action: none; cursor: grab; }
.sheet__grab span { width: 40px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.28); }
.sheet__x {
  position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 44px; height: 44px;
  border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer;
}
.sheet__x svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.sheet__x:hover { color: #fff; }
.sheet__x:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.sheet__pics { position: relative; margin: 14px 0 0; padding-right: 0; touch-action: none; }
.sheet__d { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--hair); background: #111; }
.sheet__p {
  position: absolute; right: 10px; bottom: -14px; width: 24%; height: auto; aspect-ratio: 360 / 646; object-fit: cover; object-position: top;
  border-radius: 12px; border: 3px solid #1a1d22; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.55); background: #111;
}
.sheet__p[hidden] { display: none; }
.sheet__kind { margin-top: 26px; }
.sheet__title { margin-top: 6px; font-family: var(--font-display); font-weight: 700; font-size: 1.625rem; line-height: 1.15; letter-spacing: -0.01em; color: #fff; }
.sheet__line { margin-top: 10px; font-size: 1rem; line-height: 1.6; color: var(--muted); text-wrap: pretty; }
.sheet__go { margin-top: 20px; width: 100%; }
@media (min-width: 640px) {
  .sheet { bottom: 24px; }
  .sheet__panel { padding: 12px 28px 28px; border-radius: 20px; }
  .sheet__go { width: auto; }
}


@media (prefers-reduced-motion: no-preference) {
  .is-live .motif--agent .m-1, .is-live .motif--agent .m-2, .is-live .motif--agent .m-3 {
    transform-origin: center; animation: m-pop 4.8s var(--ease) infinite both;
  }
  .is-live .motif--agent .m-2 { animation-delay: 0.15s; }
  .is-live .motif--agent .m-3 { animation-delay: 0.3s; }
}


.worklist__item strong .inline-link { color: #fff; font-weight: 600; padding-block: 0; }
.worklist__item strong .inline-link:hover { color: var(--blue); }


.brands { padding-block: 8px 40px; }
.brands__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brands__title { font-size: var(--eyebrow); line-height: 20px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.brands__strip {
  margin-top: 14px; overflow: hidden; user-select: none; -webkit-user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.brands__track { display: flex; width: max-content; animation: wall-left var(--dur, 60s) linear infinite; will-change: transform; }
.brands__set { display: flex; align-items: center; gap: 48px; padding-right: 48px; }
.brands__set li { flex: none; display: grid; place-items: center; height: 44px; }
.brands__set img { display: block; height: var(--h, 26px); width: auto; max-width: 150px; object-fit: contain; filter: brightness(0) invert(1); opacity: 0.86; }
.brands.is-off .brands__track { animation-play-state: paused; }
.brands { padding-block: var(--section) 40px; }
@media (min-width: 1024px) { .brands { padding-block: var(--section) 56px; } }
.brands .pause { min-height: 36px; padding: 0 12px; font-size: 0.8125rem; }
@media (min-width: 1024px) {
  .brands { padding-block: 16px 56px; }
  .brands__set { gap: 64px; padding-right: 64px; }
  .brands__set li { height: 52px; }
  .brands__set img { height: calc(var(--h, 26px) * 1.15); max-width: 170px; }
}


.pg-header { position: sticky; top: 0; z-index: 50; background: var(--bg); border-bottom: 1px solid var(--hair); }
.pg-header__in { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; }
.pg { padding-block: 40px var(--section); }
.pg__crumbs { display: flex; flex-wrap: wrap; gap: 0 20px; }
.pg__title { margin-top: 18px; font-size: var(--h2); line-height: 1.05; }
.pg__title + .lead { margin-top: 16px; max-width: 44rem; }
.pg__pics { margin-top: 32px; display: grid; gap: 20px; align-items: start; }
.pg__d { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: 0 0 0 1px var(--hair), 0 20px 50px rgba(0, 0, 0, 0.5); }
.pg__p { display: block; width: min(60%, 260px); height: auto; border-radius: 22px; border: 4px solid #1a1d22; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); }
@media (min-width: 768px) {
  .pg { padding-top: 56px; }
  .pg__pics { grid-template-columns: minmax(0, 1fr) 220px; gap: 28px; }
  .pg__p { width: 100%; }
}
.pg__links { margin-top: 28px; }
.pg__next { margin-top: 64px; padding-top: 40px; border-top: 1px solid var(--hair); display: grid; gap: 16px; justify-items: start; }
.pg__next .h2 { font-size: var(--h2-sm); }
.cards { margin-top: 36px; display: grid; gap: 28px; }
@media (min-width: 640px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } }
.card { position: relative; display: grid; gap: 6px; align-content: start; }
.card img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: 10px; box-shadow: 0 0 0 1px var(--hair); margin-bottom: 10px; transition: transform 220ms var(--ease); }
.card .card__kind { font-size: var(--eyebrow); line-height: 18px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue); }
.card__name { font-family: var(--font-display); font-weight: 700; font-size: 1.375rem; line-height: 1.2; color: #fff; }
.card__name a::after { content: ""; position: absolute; inset: 0; }
.card__name a:focus-visible { outline: none; }
.card:has(a:focus-visible) img { outline: 2px solid #fff; outline-offset: 3px; }
.card p { font-size: 0.9375rem; line-height: 1.55; color: var(--muted); text-wrap: pretty; }
@media (hover: hover) { .card:hover img { transform: translateY(-3px); } .card:hover .card__name { color: var(--blue); } }


.work__kinds[hidden], .work__grid[hidden], .work__note[hidden], .wk[hidden], .wall[hidden] { display: none; }
.work__kinds { margin-top: 20px; }
.kinds { display: flex; flex-wrap: wrap; gap: 8px; }
.kind {
  min-height: 44px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--hair-strong); background: rgba(255, 255, 255, 0.04); color: var(--muted);
  font: 600 0.9375rem/1 var(--font-body); cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease;
}
.kind:hover { color: #fff; border-color: rgba(255, 255, 255, 0.4); }
.kind[aria-pressed="true"] { background: #fff; border-color: #fff; color: #020202; }
.kind:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
@media (min-width: 1024px) { .work__kinds { margin-top: 28px; } }

.work__grid { margin-top: 24px; }
.work__note { max-width: 40rem; margin-bottom: 20px; font-size: 1rem; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.wk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 10px; }
@media (min-width: 640px) { .wk-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 16px; } }
@media (min-width: 1024px) { .work__grid { margin-top: 32px; } .wk-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 16px; } }
.wk { min-width: 0; container-type: inline-size; }
.wk .tl { --th: calc(100cqw / 1.6); width: 100%; height: var(--th); aspect-ratio: 1.6; }
.wk__name { margin-top: 12px; font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; line-height: 1.25; color: #fff; }
.wk__kind { margin-top: 2px; font-size: 0.8125rem; line-height: 1.4; color: var(--muted); }
.wk__line { margin-top: 4px; font-size: 0.875rem; line-height: 1.45; color: var(--muted); text-wrap: pretty; }
@media (min-width: 640px) { .wk__name { font-size: 1.1875rem; } .wk__line { font-size: 0.9375rem; } }
.tl--agent { cursor: default; }
@media (hover: hover) { .tl--agent:hover { transform: none; } }
.tl__screen {
  display: grid; place-items: center; height: 100%;
  background: radial-gradient(120% 100% at 50% 0%, #161b22 0%, #090b0e 75%);
}
.wk__icon { width: 46%; height: auto; overflow: visible; }
.wk__icon rect, .wk__icon circle, .wk__icon path { transform-box: fill-box; }
.tl .wk__bot { width: 38%; height: auto; aspect-ratio: 1; border-radius: 50%; box-shadow: 0 0 0 1px var(--hair), 0 0 24px rgba(40, 142, 215, 0.35); }


.fact { position: relative; }
.fact__go { margin-top: 4px; }
.fact__go::after { content: ""; position: absolute; inset: 0; }
@media (hover: hover) { .fact:hover .fact__go { color: #fff; } .fact:hover .fact__go .ico { transform: translateX(3px); } }

@media (min-width: 640px) {
  .fact { display: flex; flex-direction: column; }
  .fact > p { margin-bottom: 4px; }
  .fact__go { margin-top: auto; align-self: flex-start; }
}

@media (max-width: 767.98px) {
  .facts--build .fact { text-align: center; }
  .facts--build .motif { display: block; margin-inline: auto; }
  .facts--build .fact p { margin-inline: auto; }
  .facts--build .fact__go { align-self: center; }
}


@media (max-width: 767.98px) {
  .ask__head { display: flex; flex-direction: column; align-items: flex-start; }
  .ask__head .bot-spot--ask { margin: 0 0 4px -14px; }
}


.avatar--bot { display: block; }


.tl--agent .tl__screen { grid-template-rows: minmax(0, 1fr); background: #000; }
.tl .wk__pic {
  width: auto; height: 96%; max-width: 100%; aspect-ratio: 1;
  object-fit: contain; object-position: center;
  -webkit-mask-image: linear-gradient(180deg, #000 90%, transparent);
  mask-image: linear-gradient(180deg, #000 90%, transparent);
}



@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; transition-delay: 0s !important; animation: none !important; }
}


.wall__track { animation-duration: calc(var(--dur, 90s) * 2) !important; }
.wall__row--rev .wall__track { animation-name: wall-left !important; }
.motif, .motif * { animation: none !important; }
.frame--enter { animation: none !important; }