html {
  color-scheme: dark;
  scroll-behavior: smooth;
}

body:has(.public-home) {
  background: #080808;
}

.home-skip {
  position: fixed;
  z-index: 100;
  top: 12px;
  left: 12px;
  padding: 10px 14px;
  background: #f5f3f0;
  color: #171617;
  font-size: 13px;
  font-weight: 700;
  transform: translateY(-160%);
}

.home-skip:focus-visible {
  outline: 3px solid #9b82ff;
  outline-offset: 2px;
  transform: none;
}

.public-home {
  --home-bg: #080808;
  --home-ink: #f5f3f0;
  --home-muted: #a8a3aa;
  --home-line: #29272a;
  --home-stone: #d8d2c8;
  --home-paper: #f1efe9;
  --home-dark-ink: #171617;
  --home-dark-muted: #625e5c;
  --home-violet: #9b82ff;
  --home-max: 1280px;
  --home-gutter: clamp(20px, 4vw, 56px);
  --home-ease: cubic-bezier(0.16, 1, 0.3, 1);
  width: 100%;
  overflow: clip;
  background: var(--home-bg);
  color: var(--home-ink);
}

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

.public-home h1,
.public-home h2,
.public-home h3,
.public-home p,
.public-home figure,
.public-home dl,
.public-home dd,
.public-home ol,
.public-home ul {
  margin: 0;
}

.public-home img {
  display: block;
  max-width: 100%;
}

.public-home a,
.public-home button {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(155, 130, 255, 0.16);
}

.public-home a:focus-visible,
.public-home button:focus-visible,
.public-home input:focus-visible {
  outline: 2px solid var(--home-violet);
  outline-offset: 3px;
}

.home-wrap {
  width: min(100%, calc(var(--home-max) + (var(--home-gutter) * 2)));
  margin-inline: auto;
  padding-inline: var(--home-gutter);
}

.home-launch-panel--inline,
.home-store-section,
.home-memory-chapter,
.home-build-chapter,
.home-loop-chapter,
.home-contribute-chapter,
.home-ownership-chapter {
  scroll-margin-top: 80px;
}

.home-nav {
  position: sticky;
  top: 0;
  z-index: 30;
  min-height: 72px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 28px;
}

.home-nav::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  border-bottom: 1px solid transparent;
  background: #080808;
  transform: translateX(-50%);
  transition: border-color 180ms ease;
}

.home-nav.is-scrolled::before {
  border-bottom-color: #242225;
}

.home-brand {
  width: max-content;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--home-ink);
  font-size: 16px;
  font-weight: 720;
  letter-spacing: -0.02em;
}

.home-brand:hover {
  color: var(--home-ink);
  text-decoration: none;
}

.home-brand img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.home-nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.home-nav-links a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 13px;
  color: #aaa5ad;
  font-size: 13px;
  font-weight: 560;
  transition: color 160ms ease;
}

.home-nav-links a:hover {
  color: #ffffff;
  text-decoration: none;
}

/* The hero is copy on the left, product on the right. It used to be copy
   opposite a full sign-in card with its own H2 and five-item list, so two
   things competed for the first read and nothing showed the product. */
.home-hero {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  align-items: center;
  gap: clamp(30px, 5vw, 70px);
  padding-top: clamp(44px, 6vw, 88px);
  padding-bottom: clamp(56px, 7vw, 96px);
}

.home-hero-copy {
  position: relative;
  z-index: 1;
  max-width: 680px;
}

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

.home-hero-fine {
  margin-top: 14px !important;
  max-width: 56ch;
  color: #8f8a99;
  font-size: 12.5px;
  line-height: 1.5;
}

/* Product screenshots keep their native aspect ratios. The product is the
   evidence on this page, so none of it should be clipped to fit a frame. */
.home-hero-art {
  position: relative;
  z-index: 1;
  padding-bottom: 26px;
}

.home-hero h1 {
  max-width: 12ch;
  margin-top: 0;
  font-size: clamp(3.25rem, 5.6vw, 4.5rem);
  font-weight: 710;
  letter-spacing: -0.035em;
  line-height: 0.97;
  text-wrap: balance;
}

.home-hero h1 span {
  color: #b9a7ff;
  font-weight: 650;
}

.home-hero-lead {
  max-width: 610px;
  margin-top: 24px !important;
  color: #b8b2bc;
  font-size: clamp(17px, 1.7vw, 20px);
  line-height: 1.56;
  text-wrap: pretty;
}

.home-text-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #d8d4da;
  font-size: 14px;
  font-weight: 600;
}

.home-text-link span {
  color: var(--home-violet);
  transition: transform 170ms var(--home-ease);
}

.home-text-link:hover {
  color: #ffffff;
  text-decoration: none;
}

.home-text-link:hover span {
  transform: translateY(3px);
}

.home-store-section {
  padding-block: clamp(72px, 7vw, 100px);
  border-top: 1px solid #232124;
  background: #111012;
}

.home-store-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.48fr);
  gap: clamp(42px, 7vw, 92px);
  align-items: center;
}

.home-store-visual {
  margin: 0;
  overflow: hidden;
  border: 1px solid #2c292d;
  background: #090909;
}

.home-store-visual img {
  width: 100%;
  height: auto;
}

.home-store-visual figcaption {
  min-height: 54px;
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-top: 1px solid #2c292d;
  color: #a19ba3;
  font-size: 12px;
}

.home-chapter {
  padding-block: clamp(76px, 8vw, 108px);
}

.home-build-chapter {
  border-top: 1px solid #242125;
  background: #0b0a0c;
  color: var(--home-ink);
}

/* Every chapter opens the same way: eyebrow, headline, and at most one
   line beneath it, one size, one width, left-aligned. */
.home-chapter-heading {
  max-width: 820px;
  margin-bottom: clamp(34px, 4.5vw, 56px);
}

.home-chapter-heading h2 {
  max-width: 14ch;
  margin: 0;
  color: #f3eff5;
  font-size: clamp(2.35rem, 4.2vw, 3.6rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.98;
  text-wrap: balance;
}

.home-chapter-heading h2 span {
  color: #b9a7ff;
  font-weight: 650;
}

.home-chapter-heading > p:not(.home-eyebrow) {
  max-width: 56ch;
  margin: 16px 0 0 !important;
  color: #aaa4ac;
  font-size: clamp(16px, 1.45vw, 18px);
  line-height: 1.6;
}

.home-loop-chapter {
  padding-block: clamp(76px, 8vw, 108px);
  border-top: 1px solid #242125;
  background: #121013;
  color: var(--home-ink);
}

.home-contribute-chapter {
  padding-block: clamp(76px, 8vw, 108px);
  border-top: 1px solid #242125;
  background: #0b0b0b;
  color: var(--home-ink);
}

.home-loop-stage {
  margin-top: clamp(42px, 5vw, 60px);
  padding-block: clamp(30px, 4vw, 42px);
  border-top: 1px solid #302d31;
  border-bottom: 1px solid #302d31;
}

.home-memory-chapter {
  padding-block: clamp(76px, 8vw, 108px);
  background: #080808;
  color: var(--home-ink);
}

.home-memory-layout {
  display: grid;
  grid-template-columns: minmax(220px, 0.55fr) minmax(0, 1.45fr);
  gap: clamp(48px, 7vw, 88px);
  align-items: center;
  max-width: 940px;
  margin-top: clamp(46px, 6vw, 72px);
}

.home-memory-details {
  border-top: 1px solid var(--home-line);
}

.home-memory-details div {
  padding: 18px 0 20px;
  border-bottom: 1px solid var(--home-line);
}

.home-memory-details dt {
  color: #e5e1e7;
  font-size: 13px;
  font-weight: 680;
}

.home-memory-details dd {
  margin-top: 8px !important;
  color: #98929a;
  font-size: 13px;
  line-height: 1.62;
}

.home-ownership-chapter {
  padding-block: clamp(76px, 8vw, 108px);
  border-top: 1px solid #242125;
  background: #15111b;
}

.home-ownership-layout {
  display: block;
}

.home-ownership-copy {
  max-width: 900px;
}

.home-ownership-copy h2 {
  max-width: 14ch;
  font-size: clamp(2.35rem, 4.2vw, 3.6rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.99;
  text-wrap: balance;
}

.home-ownership-copy > h2 + p {
  max-width: 680px;
  margin-top: 22px !important;
  color: #aaa4ac;
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.62;
}

.home-architecture {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 34px;
  padding: 17px 0;
  border-top: 1px solid #373238;
  border-bottom: 1px solid #373238;
  color: #8e8790;
  font-size: 12px;
}

.home-architecture i {
  color: #5f5961;
  font-style: normal;
}

.home-architecture strong {
  color: #f2eef3;
  font-weight: 680;
}

.home-provider-note {
  margin-top: 20px !important;
  color: #918a93;
  font-size: 11.5px;
  line-height: 1.62;
}

.home-provider-note a,
.home-ownership-copy > p a {
  color: #b5a4fc;
  text-decoration: underline;
  text-decoration-color: rgba(181, 164, 252, 0.4);
  text-underline-offset: 3px;
}

.home-provider-note a:hover,
.home-ownership-copy > p a:hover {
  color: #d1c5ff;
}

.home-launch-panel {
  padding: clamp(28px, 3vw, 38px);
  border: 1px solid #3b3446;
  background: #17131f;
  color: var(--home-ink);
}

.home-launch-panel h2,
.home-launch-panel h3 {
  margin-top: 16px !important;
  font-size: clamp(2rem, 2.8vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
}

.home-launch-panel > p:nth-of-type(2) {
  margin-top: 18px !important;
  color: #b1aab5;
  font-size: 14px;
  line-height: 1.58;
}

.home-launch-panel .provider-list {
  display: grid;
  gap: 10px;
  margin-top: 22px;
}

.home-launch-panel .provider-list form,
.home-launch-panel > form {
  margin: 0;
}

/* One sign-in button for the whole page: the dark one from the closing
   chapter (the owner's pick), in the hero and in the bar as well. */
.public-home button.provider-button {
  min-height: 48px;
  width: 100%;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 9px;
  background: #141419;
  color: #f4f2f7;
  font-family: inherit;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -.005em;
  cursor: pointer;
  transition:
    background 160ms ease,
    border-color 160ms ease,
    transform 160ms var(--home-ease);
}

.public-home button.provider-button:hover {
  border-color: rgba(255, 255, 255, .28);
  background: #1b1b22;
  transform: translateY(-1px);
}

.public-home button.provider-button:focus-visible {
  outline: 3px solid #b09eff;
  outline-offset: 2px;
}

.home-launch-panel .provider-button-copy {
  grid-column: 2;
  text-align: center;
}

.home-launch-panel .provider-button-balance {
  width: 20px;
  height: 20px;
}

.home-launch-panel > form {
  display: grid;
  gap: 12px;
  margin-top: 20px;
}

.home-launch-panel label {
  display: grid;
  gap: 7px;
  color: #c4bdc8;
  font-size: 11px;
  font-weight: 650;
}

.home-launch-panel input {
  min-height: 46px;
  width: 100%;
  border: 1px solid #51495c;
  border-radius: 2px;
  background: #0e0c11;
  color: #f5f3f0;
  font: inherit;
  font-size: 14px;
}

.home-launch-panel input::placeholder {
  color: #8f8794;
}

.home-launch-panel button.primary {
  min-height: 48px;
  width: 100%;
  border: 1px solid var(--home-violet);
  border-radius: 2px;
  background: var(--home-violet);
  color: #100d16;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition:
    background 160ms ease,
    border-color 160ms ease,
    transform 160ms var(--home-ease);
}

.home-launch-panel button.primary:hover {
  border-color: #b09eff;
  background: #b09eff;
  transform: translateY(-1px);
}

.home-launch-panel button.primary:disabled {
  border-color: #a29c94;
  background: #a29c94;
  color: #dedad3;
  cursor: not-allowed;
  transform: none;
}

.home-launch-panel .hint {
  margin-top: 11px !important;
  color: #918a93;
  font-size: 10px;
  line-height: 1.5;
}

/* In the hero the sign-in block is part of the page, not a card sitting
   opposite the headline. This strips the panel's card chrome and lays the
   controls out in a row, while keeping every provider-button, input, and
   focus style defined above — those are load-bearing and unchanged. */
/* A link to #access (sign in) lands on the top of the page, hero and all,
   not with the sign-in block pinned under the bar. */
#access { scroll-margin-top: 100vh; }

.home-launch-panel--inline {
  margin-top: 30px;
  max-width: 470px;
  padding: 0;
  border: 0;
  background: none;
}

.home-launch-panel--inline .provider-list {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 14px;
}

.home-launch-panel--inline .provider-list form {
  flex: 1 1 190px;
}

.home-launch-panel--inline > form {
  display: flex;
  align-items: flex-end;
  gap: 9px;
  margin-top: 12px;
}

.home-launch-panel--inline > form label {
  flex: 1 1 auto;
  min-width: 0;
}

/* The panel button is width:100% for the stacked card layout. In this row it
   must size to its label, or it consumes the line and collapses the field. */
.home-launch-panel--inline > form button.primary {
  flex: none;
  width: auto;
  min-height: 52px;
  margin-top: 0;
  padding-inline: 26px;
}

.home-launch-panel--inline > form input {
  min-height: 52px;
}

.home-footer {
  min-height: 164px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 24px 42px;
  padding-block: 40px;
  border-top: 1px solid #242125;
}

.home-footer > p {
  color: #8f8991;
  font-size: 13px;
}

.home-footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 18px;
}

.home-footer-links a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: #98929a;
  font-size: 12px;
}

.home-footer-links a:hover {
  color: #ffffff;
  text-decoration: none;
}

.home-footer-meta {
  grid-column: 1 / -1;
  padding-top: 20px;
  border-top: 1px solid #242125;
  color: #8b8590;
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

@media (prefers-reduced-motion: no-preference) {
  .home-js [data-home-scene="editor"] .home-editor-media img {
    transform: scale(1.018) translateY(10px);
  }

  .home-js [data-home-scene="editor"].is-active .home-editor-media img {
    transform: none;
    transition: transform 1100ms var(--home-ease);
  }

}

@media (max-width: 1040px) {
  .home-hero {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.9fr);
    gap: 40px;
  }

  .home-hero h1 {
    font-size: clamp(3.25rem, 6vw, 4.2rem);
  }

  

  .home-memory-layout {
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.6fr);
    gap: 46px;
  }

  .home-ownership-layout {
    grid-template-columns: 1fr minmax(330px, 0.74fr);
    gap: 56px;
  }
}

@media (max-width: 820px) {
  .home-nav {
    grid-template-columns: 1fr auto;
  }

  .home-nav-links {
    display: none;
  }

  .home-hero {
    padding-top: 52px;
  }

  .home-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
  }

  /* Below the two-column breakpoint the art bleeds gently to the right edge. */
  .home-hero-art {
    margin-right: calc(var(--home-gutter) * -1);
    padding-right: var(--home-gutter);
    padding-bottom: 38px;
  }

  

  .home-hero h1 {
    font-size: clamp(3.1rem, 7vw, 4rem);
  }

  

  

  

  

  .home-store-layout {
    grid-template-columns: 1fr;
  }

  .home-store-copy {
    max-width: 640px;
  }

  

  

  

  

  

  .home-memory-layout {
    grid-template-columns: 1fr;
  }

  

  .home-memory-details {
    display: block;
  }

  .home-memory-details div {
    padding-inline: 0;
  }

  .home-ownership-layout {
    grid-template-columns: 1fr;
  }

  .home-ownership-copy {
    max-width: 720px;
  }

  .home-launch-panel {
    position: static;
    max-width: 560px;
  }

  .home-footer {
    grid-template-columns: auto 1fr;
  }

  .home-footer-links {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: flex-start;
  }

  .home-footer-meta {
    grid-row: 3;
  }
}

@media (max-width: 560px) {
  .public-home {
    --home-gutter: 20px;
  }

  .home-nav {
    min-height: 66px;
  }

  .home-brand img {
    width: 31px;
    height: 31px;
  }

  .home-hero {
    padding-top: 42px;
    padding-bottom: 72px;
  }

  .home-hero {
    gap: 26px;
  }

  .home-launch-panel--inline {
    max-width: none;
  }

  .home-launch-panel--inline > form {
    display: grid;
    gap: 10px;
  }

  .home-launch-panel--inline > form button.primary {
    width: 100%;
  }

  .home-hero h1 {
    max-width: 12ch;
    font-size: clamp(2.7rem, 10.8vw, 3.05rem);
    line-height: 0.98;
  }

  .home-hero-lead {
    font-size: 16px;
  }

  .home-launch-panel {
    padding: 24px 20px;
  }

  .home-launch-panel h2 {
    font-size: 2.15rem;
  }

  

  .home-text-link {
    padding-inline: 2px;
  }

  

  

  .home-store-section {
    padding-block: 72px;
  }

  .home-store-visual {
    width: calc(100% + 24px);
    margin-left: -12px;
  }

  .home-chapter,
.home-loop-chapter,
.home-memory-chapter,
.home-ownership-chapter {
    padding-block: 72px;
  }

  .home-chapter-heading h2,
  .home-ownership-copy h2 {
    font-size: clamp(2.3rem, 10vw, 2.8rem);
  }

  .home-loop-stage {
    width: 100%;
    margin-left: 0;
    padding-block: 18px;
  }

  

  

  

  

  

  

  .home-memory-details {
    grid-template-columns: 1fr;
  }

  .home-memory-details div {
    padding-inline: 0;
    border-right: 0;
  }

  .home-memory-details {
    border-left: 0;
  }

  .home-architecture {
    align-items: flex-start;
  }

  .home-architecture i {
    display: none;
  }

  .home-architecture span,
  .home-architecture strong {
    width: 100%;
  }

  .home-architecture span + strong,
  .home-architecture strong + span {
    padding-top: 10px;
  }

  

  .home-launch-panel {
    width: calc(100% + 16px);
    margin-left: -8px;
    padding: 30px 24px;
  }

  .home-footer {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .home-footer > p,
  .home-footer-links,
  .home-footer-meta {
    grid-column: 1;
  }

  .home-footer > p {
    grid-row: 2;
  }

  .home-footer-links {
    grid-row: 3;
    gap: 12px 18px;
  }

  .home-footer-meta {
    grid-row: 4;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .public-home *,
  .public-home *::before,
  .public-home *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Möbius product demos -----------------------------------------------------
   These scenes are built from the current Shell and App Store structures.
   They deliberately inherit Möbius's real dark surfaces, quiet hairlines,
   pane strips, drawer rows, composer, and catalog tiles. */

#home-hero-product-root,
#home-build-product-root,
#home-app-store-root {
  --mo-bg: #0d0d0d;
  --mo-surface: #171717;
  --mo-surface-2: #212121;
  --mo-border: #2a2a2a;
  --mo-border-light: #1f1f1f;
  --mo-text: #ececec;
  --mo-muted: #a8a8a8;
  --mo-accent: #8b6cf7;
  --mo-accent-hover: #7c5ce6;
  --mo-accent-fg: #fff;
  color: var(--mo-text);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}

#home-build-product-root {
  margin-top: clamp(44px, 6vw, 72px);
}

.mo-shell__brand.is-builder {
  color: var(--mo-accent);
  text-shadow: 0 0 16px color-mix(in srgb, var(--mo-accent) 45%, transparent);
}

.mo-drawer button.is-active {
  background: color-mix(in srgb, var(--mo-accent) 14%, var(--mo-bg));
}

.mo-drawer button.is-active {
  color: var(--mo-accent);
}

.mo-tabstrip > button.is-active {
  border-color: color-mix(in srgb, var(--mo-accent) 38%, var(--mo-border-light));
  background: color-mix(in srgb, var(--mo-accent) 8%, var(--mo-bg));
  color: var(--mo-text);
}

.mo-tabstrip.is-focused > button.is-active {
  border-color: color-mix(in srgb, var(--mo-accent) 45%, var(--mo-border-light));
  box-shadow: inset 0 -2px 0 var(--mo-accent);
}

/* App Store: copied from the current st-* component vocabulary. */
.home-store-visual {
  height: 720px;
  min-height: 720px;
  overflow: hidden;
  border: 1px solid #302d31;
  border-radius: 14px;
  background: var(--mo-bg);
  box-shadow: 0 30px 64px -38px rgba(0, 0, 0, 0.95);
}

.mo-store.st-root {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--mo-bg);
  color: var(--mo-text);
}

.mo-store .st-header {
  flex: none;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--mo-border);
  background: var(--mo-bg);
}

.mo-store .st-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mo-store .st-title-row > .mo-app-icon {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 8px;
}

.mo-store .st-seg {
  height: 44px;
  display: inline-flex;
  gap: 4px;
  border-radius: 10px;
  background: var(--mo-surface-2);
  box-shadow: inset 0 0 0 1px var(--mo-border);
}

.mo-store .st-seg-btn {
  min-width: 0;
  min-height: 44px;
  flex: 1;
  padding: 6px 14px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--mo-muted);
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
}

.mo-store .st-seg-btn.is-active {
  background: var(--mo-accent-hover);
  color: var(--mo-accent-fg);
}

.mo-store .st-scroll {
  min-height: 0;
  flex: 1;
  overflow: auto;
  padding: 16px;
  scrollbar-width: none;
}

.mo-store .st-scroll::-webkit-scrollbar { display: none; }

.mo-store .st-category-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mo-store .st-chip.is-active {
  border-color: var(--mo-accent);
  background: color-mix(in srgb, var(--mo-accent) 14%, var(--mo-surface));
  color: var(--mo-text);
}

.mo-store .st-catalog-sections {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.mo-store .st-catalog-section-head {
  margin-bottom: 12px;
}

.mo-store .st-catalog-section-head h2 {
  margin: 0;
  color: var(--mo-text);
  font-size: 17px;
  font-weight: 720;
  letter-spacing: -0.01em;
}

.mo-store .st-catalog-section-head p {
  margin: 4px 0 0 !important;
  color: var(--mo-muted);
  font-size: 13px;
  line-height: 1.45;
}

.mo-store .st-catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 16px;
}

.mo-store .st-card {
  position: relative;
  min-height: 286px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 12px;
  border: 1px solid var(--mo-border);
  border-radius: 12px;
  background: var(--mo-surface);
  text-align: center;
}

.mo-store .st-card.is-installed {
  border-color: color-mix(in srgb, var(--mo-text) 22%, var(--mo-border));
  background: color-mix(in srgb, var(--mo-text) 5%, var(--mo-surface));
}

.mo-store .st-icon-slot {
  position: relative;
  display: inline-block;
  margin-bottom: 12px;
}

.mo-store .st-icon-wrap {
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 22px;
}

.mo-store .st-card-open {
  position: static;
  min-height: 38px;
  display: -webkit-box;
  margin: 0 0 4px;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
  color: var(--mo-text);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  cursor: pointer;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.mo-store .st-card-open::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.mo-store .st-card-state-row {
  width: 100%;
  min-height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 8px;
  color: var(--mo-muted);
  font-size: 12px;
  font-weight: 600;
}

.mo-store .st-card-state-row b {
  padding: 1px 5px;
  border: 1px solid var(--mo-accent);
  border-radius: 999px;
  color: var(--mo-text);
  font-size: 10px;
}

.mo-store .st-card > p {
  min-height: 42px;
  display: -webkit-box;
  margin: 0 0 12px !important;
  overflow: hidden;
  color: var(--mo-muted);
  font-size: 12px;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.mo-store .st-card > .st-btn {
  width: 100%;
  margin-top: auto;
}

.mo-store.is-compact {
  min-height: 0;
  height: 100%;
}

.mo-store.is-compact .st-header { padding: 8px 9px; }
.mo-store.is-compact .st-title-row { gap: 7px; }
.mo-store.is-compact .st-title-row > .mo-app-icon { width: 24px; height: 24px; }
.mo-store.is-compact .st-seg { height: 34px; }
.mo-store.is-compact .st-seg-btn { min-height: 34px; padding: 4px 8px; font-size: 8px; }
.mo-store.is-compact .st-scroll { padding: 9px; }
.mo-store.is-compact .st-catalog-sections { gap: 10px; }
.mo-store.is-compact .st-catalog-section-head { margin-bottom: 7px; }
.mo-store.is-compact .st-catalog-section-head h2 { font-size: 11px; }
.mo-store.is-compact .st-catalog-section-head p { font-size: 7px; }
.mo-store.is-compact .st-catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.mo-store.is-compact .st-card { min-height: 126px; padding: 8px 6px; border-radius: 8px; }
.mo-store.is-compact .st-icon-slot { margin-bottom: 5px; }
.mo-store.is-compact .st-icon-wrap { width: 45px; height: 45px; border-radius: 11px; }
.mo-store.is-compact .st-card-open { min-height: 20px; margin: 0; font-size: 8px; }
.mo-store.is-compact .st-card-state-row { min-height: 14px; margin: 0 0 4px; font-size: 6px; }
.mo-store.is-compact .st-card-state-row b { display: none; }
.mo-store.is-compact .st-btn { min-height: 24px; padding: 3px 4px; border-radius: 5px; font-size: 6px; }
.mo-store.is-compact .st-installed-dot { width: 15px; height: 15px; }
.mo-store.is-compact .st-installed-dot-inner { width: 11px; height: 11px; }
.mo-store.is-compact .st-installed-dot .mo-icon { width: 7px; height: 7px; }

.mo-composer > button.is-active {
  border-color: var(--mo-accent);
  background: var(--mo-accent);
  color: white;
}

.mo-build-web.is-ready .mo-build-web__workspace {
  grid-template-columns: minmax(0, 0.95fr) 7px minmax(0, 1.05fr);
}

.mo-build-web.is-ready .mo-build-web__workspace > .mo-pane:last-child,
.mo-build-web.is-ready .mo-build-web__workspace > .mo-divider {
  opacity: 1;
  transform: none;
}

@media (hover: hover) {
  .mo-store .st-card:has(.st-card-open:hover) {
    border-color: var(--mo-accent);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px color-mix(in srgb, var(--mo-accent) 14%, transparent);
  }

  
}

@media (max-width: 1120px) {
  
  
  
  
  .mo-store.is-compact .st-catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mo-store.is-compact .st-card:nth-child(n + 5) { display: none; }
  
  
}

@media (max-width: 760px) {
  .home-store-visual { height: 690px; min-height: 690px; }
  .mo-store .st-category-strip { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
  .mo-store .st-catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .mo-store .st-card { min-height: 278px; padding-inline: 9px; }
  .mo-store .st-icon-wrap { width: 82px; height: 82px; }
  
  
  
}

@media (max-width: 620px) {
  

  

  
  
  
  
  
  
  
  
  
  
  
  .mo-store .st-title-row > .mo-app-icon { width: 30px; height: 30px; }
  .mo-store .st-seg-btn { padding-inline: 8px; font-size: 12px; }
  .mo-store .st-scroll { padding: 13px 12px 20px; }
  
  .mo-store .st-card { min-height: 255px; }
  .mo-store .st-icon-wrap { width: 68px; height: 68px; border-radius: 16px; }
  .mo-store .st-card > p { min-height: 49px; font-size: 11px; }
  .mo-store .st-card-state-row { font-size: 10px; }
  .mo-store .st-card-open { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .mo-store .st-card {
    transition: none !important;
  }
}

/* Exact production apps, paired across web and mobile -------------------- */
.home-halloween-chapter {
  padding: clamp(92px, 12vw, 160px) 0;
  background: #0b0b0b;
}

#home-halloween-product-root,
#home-workbench-product-root,
#home-more-apps-product-root,
#home-contribute-product-root {
  width: 100%;
}

.mx-web-mobile-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  align-items: center;
  gap: clamp(22px, 3.5vw, 48px);
}

.mx-build-showcase.mx-web-mobile-pair {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  align-items: center;
  gap: clamp(22px, 3.5vw, 48px);
}

.mx-actual-surface {
  min-width: 0;
}

.mx-actual-surface > header,
.mx-actual-surface__header {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  color: #a39ca6;
  font-size: 11px;
}

.mx-actual-surface > header span,
.mx-actual-surface__header span {
  padding: 5px 8px;
  border: 1px solid #3b363e;
  border-radius: 999px;
  color: #b4a8df;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.mx-actual-surface > header strong,
.mx-actual-surface__header strong {
  color: #d8d2db;
  font-weight: 620;
}

.mx-actual-surface--web .mx-runtime-frame,
.mx-build-showcase .mx-runtime-story .mx-runtime-frame {
  aspect-ratio: 1440 / 1000;
}

/* --- Voice: give your agent a voice ------------------------------------- */
.mx-voice-showcase {
  display: flex;
  justify-content: center;
}

.mx-voice-phone {
  max-width: 340px;
}

.mx-voice-app {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
  padding: 26px 18px 22px;
}

.mx-voice-head {
  display: flex;
  align-items: center;
  gap: 11px;
}

.mx-voice-head .mx-app-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
}

.mx-voice-title {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.mx-voice-title b { font-size: 15px; }
.mx-voice-title small { color: #8b858e; font-size: 11px; }

.mx-voice-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-left: auto;
  min-width: 78px;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid #34313a;
  background: #17161a;
  color: #9a949d;
  font-size: 10px;
  font-weight: 600;
}

.mx-voice-badge.is-ready {
  border-color: rgba(122, 200, 150, .4);
  background: rgba(58, 120, 82, .18);
  color: #7fd0a0;
}

.mx-voice-badge .mx-icon { width: 12px; height: 12px; }

.mx-voice-model,
.mx-voice-reader {
  padding: 14px;
  border-radius: 13px;
  border: 1px solid #232128;
  background: #131215;
}

.mx-voice-model-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.mx-voice-model-name { color: #e6e1ea; font-size: 13px; font-weight: 600; }
.mx-voice-model-size { color: #8b858e; font-size: 11px; }

.mx-voice-progress {
  height: 6px;
  margin-top: 11px;
  border-radius: 999px;
  background: #26242b;
  overflow: hidden;
}

.mx-voice-progress i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7c6cf0, #a78bfa);
}

.mx-voice-progress.is-loading i {
  animation: mx-voice-dl 3.2s cubic-bezier(.4, 0, .2, 1) forwards;
}

.mx-voice-progress.is-done i { width: 100%; }

.mx-voice-model-note {
  margin-top: 10px;
  color: #8b858e;
  font-size: 11px;
  line-height: 1.5;
}

.mx-voice-reader {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  opacity: .55;
  transition: opacity .4s ease;
}

.mx-voice-reader.is-reading { opacity: 1; }

.mx-voice-reader-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.mx-voice-reader-title { color: #cfc9d4; font-size: 12px; font-weight: 600; }

.mx-voice-wave {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 30px;
}

.mx-voice-wave i {
  width: 3px;
  height: 6px;
  border-radius: 2px;
  background: #4a4553;
}

.mx-voice-wave.is-active i {
  background: linear-gradient(#a78bfa, #7c6cf0);
  animation: mx-voice-bar 1s ease-in-out infinite;
  animation-delay: calc(var(--i) * .06s);
}

.mx-voice-read-text {
  color: #8b858e;
  font-size: 13px;
  line-height: 1.65;
}

.mx-voice-read-text .is-spoken { color: #5f5a64; }

.mx-voice-read-text .is-speaking {
  color: #efeaf5;
  border-radius: 5px;
  background: rgba(139, 108, 247, .22);
  box-shadow: 0 0 0 3px rgba(139, 108, 247, .22);
}

@keyframes mx-voice-dl {
  0% { width: 4%; }
  62% { width: 66%; }
  100% { width: 92%; }
}

@keyframes mx-voice-bar {
  0%, 100% { height: 6px; }
  50% { height: var(--h, 20px); }
}

@media (prefers-reduced-motion: reduce) {
  .mx-voice-progress.is-loading i { animation: none; width: 92%; }
  .mx-voice-wave.is-active i { animation: none; height: var(--h, 16px); }
}

.mx-sim-phone { background: #0b0a0c; }

@keyframes mx-beat-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.35); }
}

@keyframes mx-sim-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@keyframes mx-skel {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* --- Contribute: the phone screen ------------------------------------- */
/* Laid out like the app it stands in for: header at the top, sections
   flowing down, the rest of the screen left empty. */
.mx-sim-contrib {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 20px;
  padding: 22px 16px 28px;
}
.mx-sim-contrib > section { display: grid; gap: 8px; }

.mx-sim-contrib-head { display: flex; align-items: center; gap: 12px; }
.mx-sim-contrib-head .mx-app-icon { width: 36px; height: 36px; border-radius: 10px; }
.mx-sim-contrib-head b { display: block; font-size: 15px; }
.mx-sim-contrib-head small { color: #8b858e; font-size: 11.5px; }

.mx-sim-contrib-label {
  color: #8f8992;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.mx-sim-contrib-card {
  padding: 13px 14px;
  border-radius: 12px;
  border: 1px solid #232128;
  background: #131215;
}
.mx-sim-contrib-card.is-focus {
  border-color: #4b4368;
  background: linear-gradient(160deg, rgba(139, 108, 247, .14), #131215);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .3);
}

.mx-sim-contrib-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.mx-sim-contrib-card-top b { font-size: 13.5px; color: #ece7f2; }
/* Two lines reserved: the copy changes, the card does not. */
.mx-sim-contrib-card > p { margin-top: 6px; min-height: 2.9em; color: #96909a; font-size: 11.5px; line-height: 1.45; }

.mx-sim-contrib-state {
  flex: none;
  min-width: 76px;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid #4b4368;
  color: #b9a9f6;
  font-size: 10px;
  font-weight: 600;
  text-align: center;
}
.mx-sim-contrib-state.is-ready { border-color: rgba(122, 200, 150, .4); background: rgba(58, 120, 82, .18); color: #7fd0a0; }

/* The two agents: fixed two-line chips (name, status) with one width each. */
.mx-sim-contrib-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.mx-sim-contrib-checks span {
  display: grid;
  grid-template-columns: 14px 1fr;
  grid-template-rows: auto auto;
  column-gap: 7px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 9px;
  border: 1px solid #2c2930;
  background: #17161a;
  color: #8f8992;
  font-size: 10.5px;
}
.mx-sim-contrib-checks .mx-icon { grid-row: 1 / span 2; width: 13px; height: 13px; }
.mx-sim-contrib-checks b { font-weight: 650; color: #d8d2db; }
.mx-sim-contrib-checks small { font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx-sim-contrib-checks span.is-running { border-color: #4b4368; color: #b9a9f6; }
.mx-sim-contrib-checks span.is-done { border-color: rgba(122, 200, 150, .4); color: #7fd0a0; }

/* --- Memory: the real deployed Memory graph renderer ------------------ */
/* The memory graph is watch-only for now: the story selects and links
   notes on its own, on web and on the phone alike. */
.mx-memory2 { pointer-events: none; }

.mx-memory2 { width: 100%; }

.mx-memory2-app {
  display: flex;
  flex-direction: column;
  height: clamp(440px, 52vw, 560px);
  border-radius: 16px;
  border: 1px solid #232128;
  background: #0e0d10;
  overflow: hidden;
}

.mx-memory2-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding-inline: 16px;
  border-bottom: 1px solid #201e24;
}

.mx-memory2-head .mx-app-icon { width: 26px; height: 26px; border-radius: 7px; }
.mx-memory2-count { color: #918b94; font-size: 12px; }
.mx-memory2-count b { color: #d8d0f6; font-weight: 700; }

.mx-memory2-toggle {
  margin-left: auto;
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 9px;
  border: 1px solid #2c2930;
  background: #141317;
}

.mx-memory2-toggle span { padding: 4px 12px; border-radius: 6px; color: #8f8992; font-size: 11px; font-weight: 600; }
.mx-memory2-toggle span.is-active { background: #26232c; color: #e8e2f0; }

.mx-memory2-canvas {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: radial-gradient(circle at 50% 46%, rgba(139, 108, 247, .06), transparent 46%), #0c0b0e;
}

.mx-memory2-canvas svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.mx-memory2-legend {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 4;
  display: grid;
  gap: 5px;
  padding: 12px 14px;
  border-radius: 11px;
  border: 1px solid #232128;
  background: rgba(15, 14, 17, .9);
  pointer-events: none;
}

.mx-memory2-legend b { margin-bottom: 3px; font-size: 11px; color: #cfc9d4; }
.mx-memory2-legend span { display: inline-flex; align-items: center; gap: 8px; color: #98929c; font-size: 11px; }
.mx-memory2-legend i { width: 10px; height: 10px; border-radius: 50%; }

.mx-memory2-inspector {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 4;
  width: min(300px, 52%);
  padding: 13px 14px;
  border-radius: 12px;
  border: 1px solid #34313e;
  background: rgba(24, 21, 28, .95);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .4);
}

.mx-memory2-inspector-head { display: flex; align-items: center; gap: 8px; }
.mx-memory2-inspector-head i { flex: none; width: 11px; height: 11px; border-radius: 50%; }
.mx-memory2-inspector-head b { font-size: 13px; color: #ece7f2; }
.mx-memory2-inspector p { margin-top: 7px; color: #b3adba; font-size: 12px; line-height: 1.5; }

@media (max-width: 620px) {
  .mx-memory2-legend { display: none; }
  .mx-memory2-inspector { width: min(300px, 74%); }
}

/* Atlas is a screen only: let page scroll pass through instead of zooming. */
.mx-runtime-frame--static iframe,
.mx-actual-phone--static iframe { pointer-events: none !important; }

/* CubeRun in-game capture, framed inside the Möbius shell. */
.mx-cuberun-shell {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #0e0d10;
}

.mx-cuberun-screen {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.mx-cuberun-screen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Beat Machine spans the row so its 32-step sequencer fits. */
.mx-more-apps-row > .mx-actual-surface--web { grid-column: 1 / -1; }

.mx-actual-surface--mobile {
  width: 100%;
  max-width: 340px;
  justify-self: center;
}

/* One phone everywhere. The bezel is part of the phone's own box and sized
   as a proportion of its width (container units), so the hero's small phone
   and a full-size phone have the same corners and the same rim, and nothing
   is drawn outside the box for a parent to clip. The screen is a separate
   390×844 element inside; its iframe is fitted to the screen, not the
   bezel. The outer ratio is the screen ratio plus the rim. */
.mx-actual-phone,
.mx-hero-runtime-phone,
.mx-voice-phone,
.mx-runtime-story--halloween .mx-runtime-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 390 / 821;
  container-type: inline-size;
  border: 1px solid #4a444d;
  border-radius: 10.6% / 5.04%;
  background: #0b0a0c;
  box-shadow: 0 36px 70px -30px rgba(0, 0, 0, .98);
}

.mx-phone-screen {
  position: absolute;
  left: 2.4cqw;
  top: 2.4cqw;
  width: 95.2cqw;
  aspect-ratio: 390 / 844;
  overflow: hidden;
  border-radius: 8.2cqw;
  background: #0d0d0d;
  box-shadow: 0 0 0 1px #1c1a1e;
}

.mx-phone-screen > iframe {
  position: absolute;
  inset: 0 auto auto 0;
  display: block;
  border: 0;
  background: #0d0d0d;
}

.mx-contribute-mobile-column {
  min-width: 0;
  display: grid;
  gap: 12px;
}

.mx-contribute-agent-strip {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  padding: 9px;
  border: 1px solid #302c33;
  border-radius: 10px;
  background: #141314;
}

.mx-contribute-agent-strip span {
  min-height: 36px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border: 1px solid #37323a;
  border-radius: 8px;
  color: #b2abb5;
  font-size: 10px;
}

.mx-contribute-agent-strip .mx-icon {
  width: 16px;
  height: 16px;
}

.mx-contribute-agent-strip span.is-running {
  border-color: #625481;
  color: #cabef7;
}

.mx-contribute-agent-strip span.is-running .mx-icon {
  animation: mx-pulse .7s ease-in-out infinite alternate;
}

.mx-contribute-agent-strip span.is-done {
  border-color: #315342;
  color: #70d9b5;
}

.mx-agent-collaborator-diagram {
  position: relative;
  min-height: 250px;
  overflow: hidden;
  border: 1px solid #302c33;
  border-radius: 14px;
  background: radial-gradient(circle at 18% 50%, rgba(139, 108, 247, .1), transparent 34%), #111;
}

.mx-agent-hub,
.mx-agent-node {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
}

.mx-agent-hub {
  top: 50%;
  left: 16px;
  width: 78px;
  flex-direction: column;
  gap: 7px;
  color: #ddd6e0;
  font-size: 9px;
  font-weight: 700;
  transform: translateY(-50%);
}

.mx-agent-hub .mx-app-icon {
  width: 50px;
  height: 50px;
}

.mx-agent-node {
  right: 14px;
  width: 184px;
  min-height: 58px;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid #302d32;
  border-radius: 11px;
  background: #171617;
  color: #817b84;
  opacity: .58;
  transition: border-color .45s ease, color .45s ease, opacity .45s ease, transform .45s ease;
}

.mx-agent-node--review { top: 16px; }
.mx-agent-node--security { top: 96px; }
.mx-agent-node--release { top: 176px; }

.mx-agent-node.is-active {
  border-color: #66568a;
  color: #d8cef7;
  opacity: 1;
  transform: translateX(-3px);
}

.mx-agent-node--release.is-active {
  border-color: #315342;
  color: #84ddbd;
}

.mx-agent-node > .mx-icon {
  width: 18px;
  height: 18px;
  flex: none;
}

.mx-agent-node span {
  display: grid;
  gap: 2px;
}

.mx-agent-node b { font-size: 10px; }
.mx-agent-node small { color: #89828c; font-size: 8px; }

.mx-agent-route {
  position: absolute;
  z-index: 1;
  left: 82px;
  width: calc(100% - 272px);
  height: 1px;
  background: #373239;
  transform-origin: left center;
  transition: background .45s ease, box-shadow .45s ease;
}

.mx-agent-route::after {
  content: '';
  position: absolute;
  right: -1px;
  top: -3px;
  border-width: 3px 0 3px 5px;
  border-style: solid;
  border-color: transparent transparent transparent currentColor;
  color: #373239;
}

.mx-agent-route--review { top: 47px; transform: rotate(-18deg); }
.mx-agent-route--security { top: 124px; }
.mx-agent-route--release { top: 201px; transform: rotate(18deg); }

.mx-agent-route.is-active {
  background: #8068b5;
  color: #8068b5;
  box-shadow: 0 0 10px rgba(139, 108, 247, .4);
}

/* The Halloween proof is intentionally one production mobile viewport. Keep
   the later generic runtime-story rule from widening it back to desktop. */
.home-halloween-chapter .mx-runtime-story--halloween {
  width: min(100%, 390px);
  margin-inline: auto;
  overflow: visible;
}

.home-halloween-chapter .mx-runtime-story--halloween .mx-runtime-frame {
  max-width: 390px;
}

.mx-halloween-demo {
  width: min(100%, 430px);
  margin-inline: auto;
}

.mx-halloween-demo__controls {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
  padding: 6px 6px 6px 14px;
  border: 1px solid #302c33;
  border-radius: 12px;
  background: #121112;
  color: #ada6b0;
  font-size: 12px;
}

.mx-halloween-demo__controls > span {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.mx-halloween-demo__controls > span > i {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: #f08a3c;
  box-shadow: 0 0 0 4px rgba(240, 138, 60, .1);
}

.mx-halloween-demo__controls button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: none;
  padding: 0 12px;
  border: 1px solid #4a3c49;
  border-radius: 9px;
  background: #1a171a;
  color: #e5dfe7;
  font: inherit;
  font-weight: 650;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.mx-halloween-demo__controls button:hover {
  border-color: #7a5043;
  background: #21191d;
  color: #fff4ec;
}

.mx-halloween-demo__controls button:focus-visible {
  outline: 2px solid #9b82ff;
  outline-offset: 3px;
}

.mx-halloween-demo__controls svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Interactive product thesis ------------------------------------------------
   The first proof is one isolated Möbius demo rendered at its production
   desktop and phone viewports. The iframe owns its native layout and controls;
   the page only fits each viewport as one proportional object. */
.mx-hero-runtime {
  min-width: 0;
}

.mx-hero-runtime > header {
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  color: #9f99a2;
  font-size: 11px;
  line-height: 1.35;
}

.mx-hero-runtime > header span {
  flex: none;
  padding: 5px 8px;
  border: 1px solid #3b363e;
  border-radius: 999px;
  color: #b9abe9;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.mx-hero-runtime > header strong {
  color: #d8d2db;
  font-weight: 620;
}

.mx-hero-runtime--web .mx-runtime-frame {
  aspect-ratio: 1440 / 1000;
}

.mx-runtime-frame--apps {
  aspect-ratio: 1280 / 777;
}

.mx-runtime-frame--apps.mx-runtime-frame--apps-mobile {
  aspect-ratio: 390 / 701;
}

.mx-runtime-story--halloween {
  width: min(100%, 390px);
  margin-inline: auto;
  overflow: visible;
}

@media (max-width: 560px) {
  .mx-runtime-frame--apps {
    width: calc(100% + 20px);
    margin-left: -10px;
    aspect-ratio: 390 / 720;
  }

  .mx-runtime-frame--apps.mx-runtime-frame--apps-mobile {
    aspect-ratio: 390 / 701;
  }

  .mx-halloween-demo__controls {
    min-height: 48px;
    padding-left: 12px;
  }

  .mx-halloween-demo__controls button {
    min-height: 44px;
    padding-inline: 10px;
  }
}

@media (max-width: 760px) {
  .mx-web-mobile-pair,
  .mx-build-showcase.mx-web-mobile-pair {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .mx-actual-surface--mobile,
  .mx-mobile-demo--compact,
  .mx-contribute-mobile-column {
    width: min(100%, 390px);
    max-width: 390px;
    justify-self: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mx-contribute-agent-strip span.is-running .mx-icon { animation: none; }
}

/* Source-faithful product media ------------------------------------------
   Product chrome is captured from a current isolated Möbius instance. The
   website adds only captions, playback, and example-agent controls around it. */

#home-hero-product-root,
#home-app-store-root,
#home-build-product-root,
#home-fleet-product-root,
#home-contribute-product-root {
  color: #f3eff5;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}

#home-app-store-root,
#home-fleet-product-root,
#home-contribute-product-root {
  width: 100%;
}

.mx-runtime-frame {
  position: relative;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  aspect-ratio: 1440 / 1000;
  overflow: hidden;
  border: 1px solid #2a2a2a;
  border-radius: 14px;
  background: #0d0d0d;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.9);
}

.mx-runtime-frame iframe {
  position: absolute;
  inset: 0 auto auto 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #0d0d0d;
  pointer-events: none;
}

#home-build-product-root {
  margin-top: clamp(44px, 6vw, 72px);
}

#home-contribute-product-root.home-loop-stage {
  margin-top: clamp(42px, 5vw, 60px);
  padding: 0;
  border: 0;
}

#home-fleet-product-root.home-loop-stage {
  margin-top: clamp(42px, 5vw, 60px);
  padding: 0;
  border: 0;
}

.home-store-visual {
  height: auto;
  min-height: 0;
  overflow: visible;
  border: 0;
  background: transparent;
}

.home-store-layout {
  grid-template-columns: 1fr;
  align-items: start;
  gap: clamp(42px, 6vw, 72px);
}

.home-store-copy {
  max-width: 720px;
}

.product-install__phone img.is-current {
  z-index: 1;
  opacity: 1;
}

.product-install__steps button.is-current {
  border-left-color: #9b82ff;
  color: #f1edf4;
}

.product-install__steps button.is-current span {
  border-color: #8b6cf7;
  background: #2a2142;
  color: #d9ceff;
}

.product-builder__states.is-panes .product-builder__panes,
.product-builder__states.is-focused .product-builder__focused {
  opacity: 1;
}

.product-build-requests.is-building .product-build-request > b i,
.product-agent-action.is-running button i {
  background: #a78cff;
  animation: product-agent-pulse 800ms ease-in-out infinite alternate;
}

.product-build-requests.is-open .product-build-request > b,
.product-agent-action.is-passed p {
  color: #55d6aa;
}

.product-build-requests.is-open .product-build-request > b i,
.product-agent-action.is-passed button i {
  background: #31c995;
}

@keyframes product-agent-pulse {
  to { transform: scale(1.55); opacity: 0.55; }
}

@media (min-width: 1041px) {
  .home-hero {
    grid-template-columns: 1fr;
    gap: clamp(40px, 5vw, 64px);
    align-items: start;
  }

  .home-hero-copy {
    max-width: 860px;
  }
}

@media (max-width: 1040px) {
  .home-hero {
    grid-template-columns: 1fr;
    gap: clamp(34px, 5vw, 50px);
    align-items: start;
  }

  .home-hero-copy {
    max-width: 820px;
  }

  

  

  
}

@media (max-width: 620px) {
  .home-hero-art {
    margin-right: 0;
    padding-right: 0;
  }

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  
}

/* Rendered Möbius stories -------------------------------------------------
   These are manipulable DOM scenes, not screenshots. Their dimensions and
   colors are derived from the current Möbius Shell, Drawer, Apps Directory,
   composer, and standalone-app surfaces. One container-relative scale keeps
   every desktop scene optically consistent. */

#home-hero-product-root,
#home-app-store-root,
#home-build-product-root,
#home-contribute-product-root {
  --mx-bg: #0d0d0d;
  --mx-surface: #171717;
  --mx-surface-2: #212121;
  --mx-border: #2a2a2a;
  --mx-border-light: #1f1f1f;
  --mx-text: #ececec;
  --mx-muted: #a8a8a8;
  --mx-accent: #8b6cf7;
  --mx-accent-hover: #7c5ce6;
  --mx-accent-dim: rgba(139, 108, 247, 0.14);
  --mx-green: #55d6aa;
  color: var(--mx-text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
}

#home-build-product-root {
  margin-top: clamp(44px, 6vw, 72px);
}

#home-contribute-product-root.home-loop-stage {
  margin-top: clamp(36px, 5vw, 54px);
  padding: 0;
  border: 0;
}

#home-app-store-root,
#home-contribute-product-root {
  width: 100%;
}

.home-store-layout {
  grid-template-columns: 1fr;
  gap: clamp(36px, 5vw, 60px);
}

.home-store-copy {
  max-width: 750px;
}

.home-store-visual {
  height: auto;
  min-height: 0;
  overflow: visible;
  border: 0;
  background: transparent;
}

.home-memory-layout {
  display: block;
}

.home-memory-details {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}

.home-memory-details div {
  min-height: 180px;
  padding: 26px 28px;
  border-top: 1px solid #2b282d;
  border-bottom: 1px solid #2b282d;
}

.home-memory-details div + div {
  border-left: 1px solid #2b282d;
}

.mx-icon {
  width: 1em;
  height: 1em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.75;
}

.mx-app-icon {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
}

.mx-frame,
.mx-phone,
.mx-hero-phone {
  color: var(--mx-text);
  background: var(--mx-bg);
  accent-color: var(--mx-accent);
}

.mx-frame button,
.mx-phone button,
.mx-contribute button {
  font: inherit;
}

.mx-frame button:focus-visible,
.mx-phone button:focus-visible,
.mx-contribute button:focus-visible,
.mx-mobile-chapters button:focus-visible,
.mx-replay-button:focus-visible {
  outline: 2px solid var(--mx-accent);
  outline-offset: 2px;
}

.mx-frame ::selection,
.mx-phone ::selection,
.mx-contribute ::selection {
  color: #fff;
  background: var(--mx-accent-hover);
}

.mx-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  container: mobius-frame / inline-size;
  overflow: hidden;
  border: 1px solid var(--mx-border);
  border-radius: 14px;
  background: var(--mx-bg);
  box-shadow: 0 28px 70px -38px rgba(0, 0, 0, 0.96);
}

.mx-shell-bar {
  position: relative;
  z-index: 8;
  height: 4.25cqw;
  min-height: 34px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 1.35cqw;
  border-bottom: 1px solid var(--mx-border-light);
  background: var(--mx-bg);
}

.mx-shell-brand {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.7cqw;
}

.mx-shell-brand img {
  width: 2.2cqw;
  height: 2.2cqw;
  min-width: 20px;
  min-height: 20px;
  object-fit: contain;
}

.mx-shell-brand b {
  font-size: 1.12cqw;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.mx-builder-badge {
  min-height: 2.25cqw;
  display: inline-flex;
  align-items: center;
  gap: 0.45cqw;
  padding: 0 0.78cqw;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--mx-muted);
  font-size: 0.82cqw;
  font-weight: 650;
  opacity: 0.42;
  transition: color 260ms ease-out, border-color 260ms ease-out, background 260ms ease-out, opacity 260ms ease-out;
}

.mx-builder-badge.is-active {
  border-color: color-mix(in srgb, var(--mx-accent) 48%, var(--mx-border));
  background: var(--mx-accent-dim);
  color: #d9d0ff;
  opacity: 1;
}

.mx-shell-actions {
  display: flex;
  justify-self: end;
  align-items: center;
  gap: 1.2cqw;
  color: var(--mx-muted);
  font-size: 1.15cqw;
}

.mx-shell-layout {
  height: calc(100% - max(34px, 4.25cqw));
  display: grid;
  grid-template-columns: 18.8cqw minmax(0, 1fr);
}

.mx-drawer {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 1.05cqw 0.62cqw 0.8cqw;
  border-right: 1px solid var(--mx-border-light);
  background: var(--mx-bg);
}

.mx-drawer-primary,
.mx-drawer-row {
  min-height: 2.85cqw;
  display: flex;
  align-items: center;
  gap: 0.7cqw;
  padding: 0 0.8cqw;
  border-radius: 0.65cqw;
  color: var(--mx-text);
  font-size: 0.9cqw;
  line-height: 1;
}

.mx-drawer-primary .mx-icon {
  color: var(--mx-muted);
  font-size: 1.12cqw;
}

.mx-drawer h3 {
  margin: 1.25cqw 0 0.4cqw;
  padding: 0 0.8cqw;
  color: var(--mx-text);
  font-size: 0.84cqw;
  font-weight: 650;
}

.mx-drawer-list {
  display: grid;
  gap: 0.18cqw;
}

.mx-drawer-row .mx-app-icon {
  width: 1.55cqw;
  height: 1.55cqw;
}

.mx-drawer-row.is-active {
  background: color-mix(in srgb, var(--mx-accent) 18%, var(--mx-surface));
  color: #c8baff;
}

.mx-drawer-settings {
  margin-top: auto;
  padding: 0.75cqw 0.8cqw;
  border-top: 1px solid var(--mx-border-light);
  color: var(--mx-muted);
  font-size: 0.8cqw;
}

.mx-shell-workspace {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.mx-tabs {
  min-height: 3.1cqw;
  display: flex;
  align-items: end;
  gap: 0.35cqw;
  padding: 0 0.75cqw;
  border-bottom: 1px solid var(--mx-border-light);
  background: var(--mx-bg);
}

.mx-tabs > span {
  min-width: 8cqw;
  height: 2.45cqw;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55cqw;
  padding: 0 0.9cqw;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 0.55cqw 0.55cqw 0 0;
  color: var(--mx-muted);
  font-size: 0.78cqw;
  white-space: nowrap;
}

.mx-tabs > span.is-active {
  border-color: var(--mx-border-light);
  background: var(--mx-surface);
  color: var(--mx-text);
}

.mx-tabs > span i {
  width: 0.36cqw;
  height: 0.36cqw;
  border-radius: 50%;
  background: var(--mx-accent);
  opacity: 0;
}

.mx-tabs > span.is-active i {
  opacity: 1;
}

.mx-shell-canvas {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: var(--mx-bg);
}

.mx-hero-stage {
  position: relative;
  min-height: clamp(390px, 58vw, 710px);
  padding: 0 0 clamp(22px, 4vw, 42px);
}

.mx-hero-desktop {
  width: calc(100% - clamp(72px, 8vw, 118px));
}

.mx-hero-phone {
  position: absolute;
  right: 0;
  bottom: 0;
  width: clamp(176px, 20vw, 250px);
  aspect-ratio: 390 / 844;
  container: hero-phone / inline-size;
  overflow: hidden;
  border: 1px solid #454047;
  border-radius: 23px;
  box-shadow: 0 32px 64px -28px rgba(0, 0, 0, 0.98);
}

.mx-hero-panes,
.mx-builder-panes {
  height: 100%;
  min-width: 0;
  display: grid;
}

.mx-hero-panes {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
}

.mx-hero-app-pane,
.mx-builder-app-pane {
  min-width: 0;
  overflow: hidden;
  border-left: 1px solid var(--mx-border-light);
}

.mx-chat-panel {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.mx-chat-scroll {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 4.2cqw 3.1cqw 1.2cqw;
}

.mx-user-message {
  width: fit-content;
  max-width: 76%;
  margin: 0 0 2.5cqw auto !important;
  padding: 0.9cqw 1.05cqw;
  border-radius: 1.15cqw 1.15cqw 0.28cqw 1.15cqw;
  background: var(--mx-surface-2);
  color: var(--mx-text);
  font-size: 0.9cqw;
  line-height: 1.45;
}

.mx-agent-message {
  display: grid;
  grid-template-columns: 2cqw minmax(0, 1fr);
  gap: 0.75cqw;
}

.mx-agent-mark {
  width: 2cqw;
  height: 2cqw;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--mx-accent-dim);
  color: #c8baff;
  font-size: 1cqw;
}

.mx-agent-message p {
  margin: 0 !important;
  color: var(--mx-text);
  font-size: 0.88cqw;
  line-height: 1.45;
}

.mx-agent-message ul {
  display: grid;
  gap: 0.55cqw;
  margin: 1cqw 0 0;
  padding: 0;
  list-style: none;
}

.mx-agent-message li {
  display: flex;
  align-items: center;
  gap: 0.55cqw;
  color: var(--mx-muted);
  font-size: 0.76cqw;
}

.mx-agent-message li .mx-icon {
  color: #706a73;
}

.mx-agent-message li.is-done .mx-icon {
  color: var(--mx-green);
}

.mx-agent-message li.is-running .mx-icon {
  color: #b7a6ff;
  animation: mx-pulse 740ms ease-in-out infinite alternate;
}

.mx-composer {
  min-height: 4.65cqw;
  display: grid;
  grid-template-columns: 2.45cqw minmax(0, 1fr) 2.45cqw;
  align-items: center;
  gap: 0.65cqw;
  margin: 0 1.35cqw 1.2cqw;
  padding: 0.55cqw;
  border: 1px solid color-mix(in srgb, var(--mx-accent) 70%, var(--mx-border));
  border-radius: 1.2cqw;
  background: var(--mx-surface);
}

.mx-composer-action {
  width: 2.45cqw;
  height: 2.45cqw;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--mx-muted);
  font-size: 1.1cqw;
}

.mx-composer-action:first-of-type {
  cursor: pointer;
}

.mx-composer.has-options .mx-composer-action:first-of-type {
  border: 1px solid var(--mx-accent);
  background: color-mix(in srgb, var(--mx-accent) 74%, transparent);
  color: #fff;
}

.mx-composer-action:last-child {
  background: var(--mx-accent);
  color: #fff;
}

.mx-composer-field {
  min-width: 0;
  overflow: hidden;
  color: var(--mx-muted);
  font-size: 0.82cqw;
  white-space: nowrap;
}

.mx-composer-popover {
  position: absolute;
  left: 0;
  bottom: calc(100% + 2.4cqw);
  width: 76cqw;
  display: grid;
  gap: 0.7cqw;
  padding: 1.5cqw;
  border: 1px solid var(--mx-border);
  border-radius: 3.6cqw;
  background: var(--mx-surface);
  box-shadow: 0 3.5cqw 8cqw rgba(0, 0, 0, 0.34);
  color: var(--mx-text);
  z-index: 4;
}

.mx-composer-popover > div {
  min-height: 11cqw;
  display: grid;
  grid-template-columns: 8.5cqw minmax(0, 1fr) auto;
  align-items: center;
  gap: 2.4cqw;
  padding: 1.1cqw 1.4cqw;
  border-radius: 2.3cqw;
}

.mx-composer-popover > div + div {
  border-top: 1px solid color-mix(in srgb, var(--mx-border) 72%, transparent);
  border-radius: 0;
}

.mx-composer-popover > div > span {
  width: 8.5cqw;
  height: 8.5cqw;
  display: grid;
  place-items: center;
  border: 1px solid #303033;
  border-radius: 2.2cqw;
  background: var(--mx-surface-2);
  color: var(--mx-text);
}

.mx-composer-popover > div > span .mx-icon {
  width: 4.2cqw;
  height: 4.2cqw;
}

.mx-composer-popover p {
  min-width: 0;
  display: grid;
  gap: 0.5cqw;
  margin: 0;
}

.mx-composer-popover b,
.mx-composer-popover small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mx-composer-popover b {
  font-size: 3.15cqw;
  font-weight: 560;
}

.mx-composer-popover small {
  color: var(--mx-muted);
  font-size: 2.45cqw;
}

.mx-composer-popover > div > i {
  width: 8cqw;
  height: 4.6cqw;
  position: relative;
  border: 1px solid #4a4a4e;
  border-radius: 999px;
  background: var(--mx-surface-2);
}

.mx-composer-popover > div > i::after {
  content: '';
  width: 3.4cqw;
  height: 3.4cqw;
  position: absolute;
  top: 0.45cqw;
  left: 0.5cqw;
  border-radius: 50%;
  background: #8b8b90;
}

.mx-typewriter {
  width: 0;
  display: inline-block;
  overflow: hidden;
  border-right: 1px solid var(--mx-text);
  color: var(--mx-text);
  white-space: nowrap;
  animation: mx-type 1.75s steps(28, end) 180ms forwards, mx-caret 620ms step-end infinite;
}

.mx-habit-app {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #111312;
  color: #f0f4ef;
}

.mx-habit-app > header {
  min-height: 4.7cqw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.55cqw;
  border-bottom: 1px solid #252a26;
  background: #111312;
}

.mx-habit-app > header > div {
  display: flex;
  align-items: center;
  gap: 0.75cqw;
}

.mx-habit-app > header .mx-app-icon {
  width: 2.35cqw;
  height: 2.35cqw;
}

.mx-habit-app > header span {
  display: grid;
  gap: 0.05cqw;
}

.mx-habit-app > header b {
  font-size: 0.92cqw;
  letter-spacing: -0.02em;
}

.mx-habit-app > header small {
  color: #9aa59b;
  font-size: 0.66cqw;
}

.mx-habit-add {
  width: 2.45cqw;
  height: 2.45cqw;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid #303831;
  border-radius: 50%;
  background: #1a1f1b;
  color: #dce5dc;
  font-size: 1.05cqw;
}

.mx-habit-main {
  flex: 1;
  min-height: 0;
  padding: 2.35cqw 2.1cqw;
}

.mx-habit-summary {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 0.65cqw;
  padding-bottom: 1.6cqw;
  border-bottom: 1px solid #282f29;
}

.mx-habit-summary strong {
  color: #b8f2b6;
  font-size: 3.4cqw;
  font-weight: 720;
  letter-spacing: -0.04em;
}

.mx-habit-summary span {
  color: #a6b0a7;
  font-size: 0.82cqw;
}

.mx-habit-summary i {
  padding: 0.35cqw 0.62cqw;
  border-radius: 999px;
  background: #203022;
  color: #b8f2b6;
  font-size: 0.72cqw;
  font-style: normal;
}

.mx-habit-app h3 {
  margin: 1.7cqw 0 1cqw;
  color: #eef3ee;
  font-size: 1.2cqw;
  font-weight: 650;
  letter-spacing: -0.025em;
}

.mx-habit-list {
  display: grid;
  gap: 0.62cqw;
}

.mx-habit-list > div {
  min-height: 3.9cqw;
  display: grid;
  grid-template-columns: 2cqw minmax(0, 1fr);
  align-items: center;
  gap: 0.75cqw;
  padding: 0.65cqw 0.85cqw;
  border: 1px solid #292f2a;
  border-radius: 0.85cqw;
  background: #161a17;
}

.mx-habit-list > div > span {
  width: 1.55cqw;
  height: 1.55cqw;
  display: grid;
  place-items: center;
  border: 1px solid #465048;
  border-radius: 50%;
  color: transparent;
  font-size: 0.85cqw;
}

.mx-habit-list > div.is-done > span {
  border-color: #7ebd7c;
  background: #284129;
  color: #b8f2b6;
}

.mx-habit-list p {
  display: grid;
  gap: 0.12cqw;
  margin: 0 !important;
}

.mx-habit-list b {
  color: #e8eee8;
  font-size: 0.78cqw;
  font-weight: 590;
}

.mx-habit-list small {
  color: #8f9990;
  font-size: 0.64cqw;
}

.mx-app-directory {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.mx-app-directory > header {
  min-height: 6.2cqw;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24cqw;
  align-items: center;
  gap: 1.2cqw;
  padding: 0 2.4cqw;
  border-bottom: 1px solid var(--mx-border-light);
}

.mx-app-directory > header > div {
  display: flex;
  align-items: baseline;
  gap: 0.9cqw;
}

.mx-app-directory h3 {
  margin: 0;
  color: var(--mx-text);
  font-size: 1.8cqw;
  font-weight: 650;
  letter-spacing: -0.03em;
}

.mx-app-directory header span {
  color: var(--mx-muted);
  font-size: 0.82cqw;
}

.mx-app-directory label {
  min-height: 3.3cqw;
  display: flex;
  align-items: center;
  gap: 0.65cqw;
  padding: 0 0.95cqw;
  border: 1px solid var(--mx-border-light);
  border-radius: 0.9cqw;
  background: var(--mx-surface);
  color: var(--mx-muted);
  font-size: 1cqw;
}

.mx-app-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-content: center;
  gap: 2.1cqw 1.1cqw;
  padding: 2.2cqw 3.1cqw 2.8cqw;
}

.mx-app-grid > button,
.mx-app-grid > div {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 0.65cqw;
  padding: 0.72cqw 0.45cqw;
  border: 0;
  border-radius: 1cqw;
  background: transparent;
  color: var(--mx-text);
  font-size: 0.82cqw;
  cursor: default;
}

.mx-app-grid > button {
  cursor: pointer;
  transition: background 150ms ease-out, transform 150ms ease-out;
}

.mx-app-grid > button:hover,
.mx-app-grid > button.is-selected,
.mx-app-grid > div.is-selected {
  background: color-mix(in srgb, var(--mx-surface) 78%, transparent);
}

.mx-app-grid > button:active {
  transform: scale(0.96);
}

.mx-app-grid .mx-app-icon {
  width: 5cqw;
  height: 5cqw;
}

.mx-app-grid > button > span,
.mx-app-grid > div > span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mx-build-showcase {
  display: grid;
  gap: clamp(64px, 9vw, 118px);
}

.mx-phone-status {
  height: 9cqw;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.4cqw;
  padding: 0 5cqw;
  color: currentColor;
  font-size: 2.7cqw;
}

.mx-phone-status span {
  margin-right: auto;
  font-weight: 650;
}

.mx-phone-status i {
  width: 1.4cqw;
  height: 1.4cqw;
  border-radius: 50%;
  background: currentColor;
}

.mx-cursor-stage {
  position: absolute;
  z-index: 20;
  left: var(--mx-cursor-x);
  top: var(--mx-cursor-y);
  width: 0;
  height: 0;
  pointer-events: none;
}

.mx-cursor-arrow {
  position: absolute;
  left: -0.77cqw;
  top: -0.77cqw;
  width: 6.67cqw;
  height: 7.69cqw;
  overflow: visible;
  transform-origin: 0.77cqw 0.77cqw;
  filter: drop-shadow(0 0.55cqw 1.4cqw rgba(0, 0, 0, 0.44));
}

.mx-cursor-stage.is-clicking .mx-cursor-arrow {
  animation: mx-cursor-press 420ms ease-out 720ms both;
}

.mx-cursor-ripple {
  position: absolute;
  left: 0;
  top: 0;
  width: 3.6cqw;
  height: 3.6cqw;
  border: 1px solid rgba(170, 148, 255, 0.9);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.42);
}

.mx-cursor-stage.is-clicking .mx-cursor-ripple {
  animation: mx-cursor-ripple 540ms ease-out 750ms both;
}

@keyframes mx-cursor-arrive {
  from {
    opacity: 0;
    transform: translate(16cqw, 13cqw);
  }
  to {
    opacity: 1;
    transform: translate(0, 0);
  }
}

@keyframes mx-cursor-press {
  0%, 100% { transform: scale(1); }
  45% { transform: scale(0.88); }
}

@keyframes mx-cursor-ripple {
  0% {
    opacity: 0.66;
    transform: translate(-50%, -50%) scale(0.42);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(3.6);
  }
}

@keyframes mx-type {
  from { width: 0; }
  to { width: 28ch; }
}

@keyframes mx-caret {
  50% { border-color: transparent; }
}

@keyframes mx-pulse {
  to { opacity: 0.5; transform: scale(1.12); }
}

@keyframes mx-pointer-arrive {
  from { opacity: 0; transform: translate(2.6cqw, 3cqw); }
  to { opacity: 1; transform: translate(0, 0); }
}

@keyframes mx-tap {
  0% { opacity: 0; transform: scale(0.5); }
  28% { opacity: 0.9; }
  100% { opacity: 0; transform: scale(1.45); }
}

@media (max-width: 920px) {
  .mx-hero-stage {
    min-height: 0;
    padding-bottom: 0;
  }

  .mx-hero-desktop {
    width: 100%;
  }

  .mx-hero-phone {
    display: none;
  }
}

@media (max-width: 760px) {
  .home-memory-details {
    grid-template-columns: 1fr;
  }

  .home-memory-details div {
    min-height: 0;
  }

  .home-memory-details div + div {
    border-top: 0;
    border-left: 0;
  }
}

@media (max-width: 620px) {
  .home-hero-art {
    margin-right: 0;
    padding-right: 0;
  }

  .mx-frame {
    aspect-ratio: 1 / 1;
    border-radius: 11px;
  }

  .mx-drawer {
    display: none;
  }

  .mx-shell-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .mx-shell-brand b {
    font-size: 10px;
  }

  .mx-builder-badge,
  .mx-tabs > span {
    font-size: 8px;
  }

  .mx-shell-actions {
    font-size: 11px;
  }

  .mx-tabs {
    min-height: 29px;
  }

  .mx-tabs > span {
    min-width: 76px;
    height: 24px;
  }

  .mx-app-directory > header {
    min-height: 48px;
    grid-template-columns: 1fr;
    padding: 0 14px;
  }

  .mx-app-directory h3 {
    font-size: 16px;
  }

  .mx-app-directory header span {
    font-size: 8px;
  }

  .mx-app-directory label {
    display: none;
  }

  .mx-app-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 9px 4px;
    padding: 12px 10px 15px;
  }

  .mx-app-grid > button,
  .mx-app-grid > div {
    gap: 3px;
    padding: 3px 2px;
    font-size: 8px;
  }

  .mx-app-grid .mx-app-icon {
    width: 29px;
    height: 29px;
  }

  .mx-chat-scroll {
    padding: 24px 12px 8px;
  }

  .mx-user-message {
    padding: 7px 8px;
    border-radius: 9px 9px 3px 9px;
    font-size: 8px;
  }

  .mx-agent-message {
    grid-template-columns: 16px minmax(0, 1fr);
    gap: 6px;
  }

  .mx-agent-mark {
    width: 16px;
    height: 16px;
    font-size: 8px;
  }

  .mx-agent-message p {
    font-size: 8px;
  }

  .mx-agent-message ul {
    gap: 4px;
    margin-top: 8px;
  }

  .mx-agent-message li {
    gap: 4px;
    font-size: 7px;
  }

  .mx-composer {
    min-height: 36px;
    grid-template-columns: 20px minmax(0, 1fr) 20px;
    gap: 5px;
    margin: 0 8px 8px;
    padding: 4px;
    border-radius: 9px;
  }

  .mx-composer-action {
    width: 20px;
    height: 20px;
    font-size: 9px;
  }

  .mx-composer-field {
    font-size: 8px;
  }

  .mx-habit-app > header {
    min-height: 42px;
    padding: 0 11px;
  }

  .mx-habit-app > header .mx-app-icon {
    width: 21px;
    height: 21px;
  }

  .mx-habit-app > header b {
    font-size: 9px;
  }

  .mx-habit-app > header small {
    font-size: 7px;
  }

  .mx-habit-add {
    width: 22px;
    height: 22px;
    font-size: 10px;
  }

  .mx-habit-main {
    padding: 13px 12px;
  }

  .mx-habit-summary {
    gap: 5px;
    padding-bottom: 10px;
  }

  .mx-habit-summary strong {
    font-size: 25px;
  }

  .mx-habit-summary span,
  .mx-habit-summary i {
    font-size: 7px;
  }

  .mx-habit-app h3 {
    margin: 11px 0 7px;
    font-size: 10px;
  }

  .mx-habit-list {
    gap: 5px;
  }

  .mx-habit-list > div {
    min-height: 31px;
    grid-template-columns: 16px minmax(0, 1fr);
    gap: 6px;
    padding: 5px 6px;
    border-radius: 7px;
  }

  .mx-habit-list > div > span {
    width: 14px;
    height: 14px;
    font-size: 8px;
  }

  .mx-habit-list b {
    font-size: 8px;
  }

  .mx-habit-list small {
    font-size: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mx-builder-badge,
  .mx-builder-panes,
  .mx-builder-app-pane,
  .mx-phone-layer,
  .mx-shared-habit-icon,
  .mx-app-grid > button {
    transition: none !important;
  }

  .mx-typewriter {
    width: 28ch;
    border-right: 0;
  }

  .mx-typewriter,
  .mx-agent-message li.is-running .mx-icon,
  .mx-phone-build-list span.is-running .mx-icon,
  .mx-contribute-result[class*='-running'] > span,
  .mx-demo-pointer,
  .mx-demo-pointer i {
    animation: none !important;
  }
}

/* Production-runtime stories. Möbius lays itself out at its real 1440 px or
   390 px viewport, then the locked iframe is fitted into its marketing frame
   with one uniform scale. Absolute positioning keeps that native layout box
   from widening its responsive parent. */
.mx-builder-demo--runtime .mx-runtime-frame {
  aspect-ratio: 1440 / 1000;
}

.mx-runtime-frame--apps {
  aspect-ratio: 1280 / 777;
}

.mx-runtime-frame--apps.mx-runtime-frame--apps-mobile {
  aspect-ratio: 390 / 701;
}

.mx-contribute-runtime__toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid #302c32;
  border-radius: 13px;
  background: #111012;
}

@media (max-width: 760px) {
  .mx-contribute-runtime__toolbar {
    grid-template-columns: 1fr;
  }
}

/* Runtime stories authored inside the live shell at its native viewport. The
   outer page only locks and uniformly fits the completed runtime surface. */
#home-improvement-product-root,
#home-workbench-product-root,
#home-more-apps-product-root,
#home-fleet-product-root {
  --mx-bg: #0d0d0d;
  --mx-surface: #171717;
  --mx-border: #2a2a2a;
  --mx-text: #ececec;
  --mx-muted: #a8a8a8;
  --mx-accent: #8b6cf7;
  --mx-green: #55d6aa;
  color: var(--mx-text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
}

.home-improvement-visual {
  margin-top: clamp(36px, 5vw, 64px);
}

.home-workbench-chapter {
  padding: clamp(92px, 12vw, 160px) 0;
  background: #0b0b0b;
}

.home-more-apps-chapter {
  padding: clamp(92px, 12vw, 160px) 0;
  border-top: 1px solid #1d1d1d;
  background: #0b0b0b;
}

.mx-more-apps {
  display: grid;
  gap: clamp(88px, 12vw, 150px);
}

.mx-more-apps-row {
  min-height: 790px;
}

.mx-more-apps-notes {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  gap: clamp(22px, 3.5vw, 48px);
  margin-bottom: 22px;
}

.mx-more-apps-notes--atlas > div {
  grid-column: 1 / -1;
}

.mx-more-apps-notes > div {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.mx-more-apps-notes .mx-app-icon {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
}

.mx-more-apps-notes span {
  display: grid;
  gap: 4px;
}

.mx-more-apps-notes b {
  color: #ece8ef;
  font-size: 15px;
}

.mx-more-apps-notes small {
  max-width: 52ch;
  color: #918b94;
  font-size: 12px;
  line-height: 1.55;
}

/* Before the apps have ever mounted, the stand-in is the height the
   slideshow takes (a phone slide plus its tabs); once they have, the row
   keeps its measured height while they are away (useKeptHeight). */
.mx-more-apps-placeholder {
  min-height: 745px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid #242225;
  border-radius: 18px;
  background: #101010;
}

.mx-more-apps-placeholder span {
  width: 42px;
  height: 42px;
  border: 1px solid #373238;
  border-top-color: #8064e8;
  border-radius: 999px;
  animation: mx-placeholder-spin 1.2s linear infinite;
}

@keyframes mx-placeholder-spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 760px) {
  .mx-more-apps-placeholder {
    min-height: 686px;
  }

  .mx-more-apps-notes {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .mx-more-apps-notes--atlas > div {
    grid-column: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mx-more-apps-placeholder span { animation: none; }
}

.mx-runtime-story:not(.mx-runtime-story--halloween) .mx-runtime-frame {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 1440 / 900;
}

.mx-runtime-story {
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

.mx-contribute-app__header {
  min-height: 92px;
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 17px 20px;
  border-bottom: 1px solid #29272b;
}

.mx-contribute-app__header > .mx-app-icon {
  width: 50px;
  height: 50px;
}

.mx-contribute-app__header h3,
.mx-contribute-app__header p,
.mx-pull-requests h3,
.mx-pull-requests h4,
.mx-pull-requests p {
  margin: 0;
}

.mx-contribute-app__header h3 {
  font-size: 16px;
  line-height: 1.2;
}

.mx-contribute-app__header p {
  margin-top: 4px;
  color: #918b94;
  font-size: 11px;
}

@media (max-width: 620px) {
  .mx-contribute-app__header {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .mx-contribute-app__header > .mx-app-icon {
    width: 42px;
    height: 42px;
  }
}

/* Frames and the pointer. A demo drives itself, so its frame takes no
   pointer at all: a wheel over it would scroll its chat instead of the page
   (the chat contains its overscroll) and a touch on it would own the
   gesture. Only the frames made to be used (hero, Reflection, Beat Machine,
   Tandem, Subagents) take a mouse; on a phone even those stay out of the
   way, so scrolling, selecting and the keyboard remain the visitor's. */
.public-home iframe { pointer-events: none !important; }
@media (pointer: fine) {
  .public-home iframe.mx-frame--interactive { pointer-events: auto !important; }
}
/* A frame that welcomes touch: taps reach the app, while the browser keeps
   vertical panning and pinch for itself, so a thumb-scroll over the phone
   still moves the page (the demo runtime lifts the apps' own
   overscroll-behavior: contain on coarse pointers for the same reason). */
@media (pointer: coarse) {
  .public-home iframe.mx-frame--touch {
    pointer-events: auto !important;
    touch-action: pan-y pinch-zoom;
  }
}
@media (pointer: coarse) {
  .mx-actual-surface, .mx-runtime-frame, .mx-hero-runtime-pair, .mx-app-carousel, .mx-contribute-phone-wrap {
    -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  }
}

/* --- Small-features chapter: the load-bearing details ------------------- */
.home-details-chapter {
  padding: 96px 0 110px;
}

/* --- Agents inside apps: Tandem's generation story ---------------------- */

.mx-memory2-fresh {
  display: inline-block; font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: #a78bfa; margin-bottom: 6px;
}
.mx-memory2-inspector small { display: block; margin-top: 8px; color: #78717b; font-size: 11.5px; }
.mx-memory2-inspector.is-fresh { box-shadow: 0 0 0 1px rgba(167,139,250,.45), 0 12px 30px rgba(0,0,0,.35); }

.mx-memory-pair { align-items: start; }
.mx-memory-pair .mx-memory2 { min-width: 0; }

/* --- Restart control shared by scripted surfaces ------------------------ */
.mx-surface-restart {
  margin-left: auto; flex: 0 0 28px; width: 28px; height: 28px; min-width: 28px; aspect-ratio: 1; border-radius: 50%;
  border: 1px solid #3b363e; background: transparent; color: #a39ca6; cursor: pointer; box-sizing: border-box;
  display: inline-grid; place-items: center; padding: 0; transition: color .2s ease, border-color .2s ease, transform .3s ease;
}
.mx-surface-restart svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mx-surface-restart:hover { color: #e5e1e7; border-color: #6b6470; transform: rotate(-40deg); }
.mx-surface-restart:focus-visible { outline: 2px solid #a78bfa; outline-offset: 2px; }
.mx-halloween-demo > header { max-width: 420px; margin-left: auto; margin-right: auto; }

.home-workbench-chapter .mx-actual-surface { margin-top: 34px; }

/* The bar's right side: GitHub as a quiet link, and the one primary action
   the whole page keeps pointing at. */
.home-nav-aside { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.home-nav-github {
  display: inline-flex; align-items: center; gap: 7px; min-height: 36px;
  padding: 6px 10px; border-radius: 999px; color: #aaa5ad; font-size: 13px; font-weight: 560;
  transition: color 160ms ease;
}
.home-nav-github:hover { color: #fff; text-decoration: none; }
.home-nav-github svg { flex: 0 0 auto; }
.home-nav-start {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px; background: #141419;
  color: #f4f2f7; font-size: 13px; font-weight: 650; white-space: nowrap;
  transition: background 160ms ease, border-color 160ms ease;
}
.home-nav-start:hover { background: #1b1b22; border-color: rgba(255, 255, 255, .3); color: #fff; text-decoration: none; }
@media (max-width: 720px) { .home-nav-github span { display: none; } .home-nav-github { padding: 6px 8px; } }

/* --- Frame cursor for choreographed demos ------------------------------- */
.mx-runtime-frame--cursor { position: relative; }
.mx-frame-cursor {
  position: absolute; z-index: 6; width: 0; height: 0; pointer-events: none;
  transition: left .24s linear, top .24s linear, opacity .35s ease;
}
.mx-frame-cursor svg {
  position: absolute; left: -3px; top: -3px; width: 22px; height: 26px; overflow: visible;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.5)); transform-origin: 3px 3px; transition: transform .18s ease;
}
.mx-frame-cursor.is-click svg, .mx-frame-cursor.is-hold svg, .mx-frame-cursor.is-drag svg { transform: scale(.86); }
.mx-frame-cursor__ring {
  position: absolute; left: 0; top: 0; width: 34px; height: 34px; border-radius: 50%;
  transform: translate(-50%, -50%) scale(.4); opacity: 0; border: 2px solid rgba(167,139,250,.95);
}
.mx-frame-cursor.is-click .mx-frame-cursor__ring { animation: mx-frame-ring .5s ease-out; }
.mx-frame-cursor.is-hold .mx-frame-cursor__ring { opacity: 1; transform: translate(-50%, -50%) scale(1); animation: mx-frame-hold .64s linear forwards; border-color: rgba(167,139,250,.4); }
.mx-frame-cursor.is-drag .mx-frame-cursor__ring { opacity: .8; transform: translate(-50%, -50%) scale(.7); border-style: dashed; }
@keyframes mx-frame-ring { 0% { opacity: .9; transform: translate(-50%, -50%) scale(.4); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.3); } }
@keyframes mx-frame-hold { from { box-shadow: inset 0 0 0 0 rgba(167,139,250,.0); border-color: rgba(167,139,250,.35); } to { box-shadow: inset 0 0 0 17px rgba(167,139,250,.35); border-color: #a78bfa; } }
@media (prefers-reduced-motion: reduce) { .mx-frame-cursor, .mx-frame-cursor svg { transition: none; } }

/* Voice: what to read, once the model is in */
.mx-voice-suggest { opacity: 0; transform: translateY(6px); transition: opacity .4s ease, transform .4s ease; }
.mx-voice-suggest.is-shown { opacity: 1; transform: none; }
.mx-voice-suggest-label { display: block; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: #8f8a93; margin-bottom: 8px; }
.mx-voice-link {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px;
  background: #171519; border: 1px solid #24212a; transition: border-color .3s ease, box-shadow .3s ease;
}
.mx-voice-link .mx-app-icon { width: 28px; height: 28px; border-radius: 7px; flex: 0 0 auto; }
.mx-voice-link > span { min-width: 0; }
.mx-voice-link b { display: block; font-size: 12.5px; color: #ececec; }
.mx-voice-link small { display: block; font-size: 11px; color: #8f8a93; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx-voice-link em { margin-left: auto; min-width: 66px; text-align: right; font-style: normal; font-size: 11.5px; font-weight: 650; color: #a78bfa; white-space: nowrap; }
.mx-voice-suggest.is-active .mx-voice-link { border-color: #a78bfa; box-shadow: 0 0 0 3px rgba(167,139,250,.16); }
.mx-voice-reader { opacity: 0; transition: opacity .4s ease; }
.mx-voice-reader.is-reading { opacity: 1; }

/* Contribute as one view */
.mx-contrib-project { display: flex; align-items: center; gap: 12px; }
.mx-contrib-project .mx-app-icon { width: 30px; height: 30px; border-radius: 8px; flex: 0 0 auto; }
.mx-contrib-project > span { min-width: 0; }
.mx-contrib-project b { display: block; font-size: 13px; }
.mx-contrib-project small { display: block; font-size: 11.5px; color: #8f8a93; }
.mx-contrib-project em { margin-left: auto; min-width: 76px; text-align: center; font-style: normal; font-size: 11px; padding: 4px 8px; border-radius: 999px; border: 1px solid #2e2a33; color: #b4aeb9; white-space: nowrap; }
.mx-contrib-project.is-attention em { color: #f0c674; border-color: rgba(240,198,116,.4); }
.mx-contrib-actions { display: flex; gap: 8px; margin-top: 12px; opacity: .35; transition: opacity .4s ease; }
.mx-sim-contrib-card.is-ready .mx-contrib-actions { opacity: 1; }
.mx-contrib-actions span { padding: 7px 12px; border-radius: 9px; border: 1px solid #2e2a33; font-size: 12px; color: #d9d4de; }
.mx-contrib-actions span.is-primary { background: #a78bfa; border-color: #a78bfa; color: #14111a; font-weight: 650; }

.mx-surface-restart { display: none !important; }

/* --- Featured apps slideshow ------------------------------------------- */
.mx-app-carousel { min-width: 0; }
/* The screen below is centred, so the tabs are centred over it. */
.mx-app-carousel-head { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 14px; }
.mx-app-carousel-tabs { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
.mx-app-carousel-tabs button {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 8px; border-radius: 999px;
  border: 1px solid #2e2a33; background: transparent; color: #a39ca6; font: 600 13px/1 inherit; cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.mx-app-carousel-tabs button .mx-app-icon { width: 22px; height: 22px; border-radius: 6px; }
.mx-app-carousel-tabs button:hover { color: #e5e1e7; border-color: #4a444f; }
.mx-app-carousel-tabs button.is-active { color: #f1edf4; background: #201c25; border-color: #5b4f7a; }
.mx-app-carousel-arrows { display: flex; gap: 6px; }
.mx-app-carousel-arrows button {
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid #2e2a33; background: transparent; color: #a39ca6; cursor: pointer;
  display: inline-grid; place-items: center; padding: 0; transition: color .2s ease, border-color .2s ease;
}
.mx-app-carousel-arrows button:hover { color: #fff; border-color: #6b6470; }
.mx-app-carousel-arrows svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Scoped under the carousel so it outranks the page's p { margin: 0 } reset:
   the copy sits centred under the screen with a little air above it. */
.mx-app-carousel > .mx-app-carousel-blurb { margin: 18px auto 0; color: #98929a; font-size: 14px; max-width: 560px; text-align: center; animation: mx-blurb-in .4s ease both; }
@keyframes mx-blurb-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.mx-app-carousel-viewport { overflow: hidden; border-radius: 18px; }
.mx-app-carousel-track { display: flex; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.mx-app-slide { flex: 0 0 100%; min-width: 0; padding: 2px; transition: opacity .5s ease; opacity: .35; }
.mx-app-slide.is-active { opacity: 1; }
.mx-app-slide:not(.is-active) { pointer-events: none; }
.mx-app-slide-phone { display: flex; justify-content: center; }
.mx-app-slide-phone .mx-actual-surface--mobile { width: min(100%, 360px); }
.mx-more-apps-row { min-height: 0; }
@media (prefers-reduced-motion: reduce) { .mx-app-carousel-track { transition: none; } }

/* Tandem narration + touch pointer */
.mx-actual-phone.mx-runtime-frame--cursor { position: relative; }
.mx-frame-cursor--touch .mx-frame-cursor__touch {
  position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; transform: translate(-50%, -50%);
  background: rgba(255,255,255,.55); border: 1.5px solid rgba(255,255,255,.9); box-shadow: 0 2px 10px rgba(0,0,0,.45); transition: transform .18s ease, background .18s ease;
}
.mx-frame-cursor--touch.is-click .mx-frame-cursor__touch { transform: translate(-50%, -50%) scale(.8); background: rgba(196,181,253,.75); }
.mx-frame-cursor--touch .mx-frame-cursor__ring { width: 44px; height: 44px; }
@media (min-width: 901px) {
  .mx-memory-pair .mx-memory2-inspector { right: auto; bottom: auto; left: 14px; top: 52px; width: min(300px, 40%); }
}

/* Small things, on phones */
.mx-small-phones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 3vw, 40px); margin-top: 44px; }
.mx-small-phones .mx-small-phone { max-width: 340px; width: 100%; justify-self: center; }
@media (max-width: 900px) { .mx-small-phones { grid-template-columns: 1fr; } }

/* The hero keeps its web + phone picture-in-picture at every width: on a
   phone it is the same layout, smaller. */
.mx-hero-runtime-pair {
  display: block;
  position: relative;
}
.mx-hero-runtime--mobile {
  position: absolute;
  right: 2.4%;
  bottom: 2.6%;
  width: clamp(96px, 23%, 270px);
  min-width: 0;
  z-index: 3;
  filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .75));
}
.mx-hero-runtime--mobile > header { display: none; }
/* On a phone the pair composes like a still: the phone larger, overlapping
   the web workspace's lower right and reaching below it, with room kept
   under the pair for the overhang. */
@media (max-width: 620px) {
  .mx-hero-runtime-pair { padding-bottom: 38%; }
  /* Bottom-left: over the drawer, so the chat's prompt stays in view. */
  .mx-hero-runtime--mobile {
    left: 0;
    right: auto;
    bottom: 0;
    width: 40%;
    filter: drop-shadow(0 18px 32px rgba(0, 0, 0, .7));
  }
}
@media (min-width: 760px) {
  .mx-web-mobile-pair,
  .mx-build-showcase.mx-web-mobile-pair {
    display: block;
    position: relative;
  }
  .mx-web-mobile-pair > .mx-actual-surface--mobile {
    position: absolute;
    right: 2.4%;
    bottom: 2.6%;
    width: clamp(140px, 19%, 250px);
    min-width: 0;
    z-index: 3;
    filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .75));
  }
  .mx-web-mobile-pair > .mx-actual-surface--mobile > header {
    display: none;
  }
  /* Tandem is a phone beside its narration, not a pair. */
  /* Memory: the tucked Reflection phone needs the canvas corner free. */
  .mx-memory-pair .mx-memory2-inspector { right: auto; bottom: auto; left: 14px; top: 52px; width: min(300px, 40%); }
}

/* Fleet: Workflows beside the Subagents phone (side by side, not tucked) */
.mx-fleet-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 340px)); justify-content: center; gap: clamp(16px, 4vw, 56px); align-items: start; }
.mx-fleet-pair > .mx-actual-surface--mobile { width: 100%; max-width: 340px; }
@media (max-width: 600px) { .mx-fleet-pair { gap: 12px; } .mx-fleet-pair > .mx-actual-surface--mobile > header strong { font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } }

@media (max-width: 759px) {
  .mx-web-mobile-pair,
  .mx-build-showcase.mx-web-mobile-pair { display: grid; grid-template-columns: 1fr; gap: 26px; }
  .mx-web-mobile-pair > .mx-actual-surface--mobile { width: min(100%, 330px); justify-self: center; }
}

/* Web surfaces are 1.44:1 (1440×1000 / 1152×800); phones 0.462:1 (390×844).
   Cap their width from the viewport height so a whole frame is visible at
   100% zoom, and keep them centred when the cap bites. */
:root { --mx-fit-h: calc(100vh - 210px); }
@supports (height: 100svh) { :root { --mx-fit-h: calc(100svh - 210px); } }
.mx-web-mobile-pair,
.mx-build-showcase.mx-web-mobile-pair,
.mx-hero-runtime-pair,
.mx-fleet-pair,
.mx-contribute-single,
.mx-actual-surface--web:not(.mx-web-mobile-pair > *):not(.mx-fleet-pair > *):not(.mx-contribute-single > *),
.mx-runtime-frame--apps,
.mx-app-carousel,
.mx-memory-pair {
  max-width: max(560px, calc(var(--mx-fit-h) * 1.44));
  margin-inline: auto;
}
.mx-actual-phone,
.mx-hero-runtime-phone,
.mx-voice-phone,
.mx-runtime-story--halloween {
  max-width: calc(var(--mx-fit-h) * 0.462);
}
.mx-actual-surface--mobile:not(.mx-web-mobile-pair > *):not(.mx-hero-runtime--mobile) { max-width: calc(var(--mx-fit-h) * 0.462); margin-inline: auto; }
.mx-small-phones .mx-small-phone { max-width: min(340px, calc(var(--mx-fit-h) * 0.462)); }
/* The live game fills the screen area below the bar, in flow: the generic
   runtime-frame rule would absolutely position it over the whole frame. */
.mx-cuberun-screen iframe { position: static; display: block; width: 100%; height: 100%; border: 0; pointer-events: none; background: #0b0710; }

/* Capabilities as a horizontal slider (scroll-snap, no arrows) */
.home-details-grid.home-details-slider {
  display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 2px 18px;
  scrollbar-width: thin; scrollbar-color: #3b363e transparent; -webkit-overflow-scrolling: touch;
}

/* CubeRun still: slow drift + zoom */
.mx-cuberun-screen--drift { position: relative; overflow: hidden; }
.mx-cuberun-screen--drift img { transform-origin: 50% 62%; animation: mx-cuberun-drift 16s ease-in-out infinite alternate; will-change: transform; }
.mx-cuberun-screen--drift::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 70%, rgba(255, 96, 196, .18), transparent 55%); animation: mx-cuberun-glow 3.2s ease-in-out infinite alternate; }
@keyframes mx-cuberun-drift { from { transform: scale(1.04) translate3d(-1.2%, 0.6%, 0); } to { transform: scale(1.14) translate3d(1.4%, -1.2%, 0); } }
@keyframes mx-cuberun-glow { from { opacity: .55; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .mx-cuberun-screen--drift img, .mx-cuberun-screen--drift::after { animation: none; } }

/* --- CubeRun scene: galaxy, grid, HUD, ship (CSS only) ------------------- */

.mx-cuberun-sky::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(110,20,150,.35), rgba(170,30,140,.45) 70%, rgba(255,60,180,.55)); mix-blend-mode: multiply; }

/* --- Phone home screen (the app lands beside Möbius) --------------------- */
.mx-homescreen { position: absolute; inset: 0; z-index: 5; border-radius: inherit; overflow: hidden; container-type: inline-size;
  background: radial-gradient(120% 80% at 30% 0%, #2a2140 0%, #130f1c 45%, #0a0810 100%); animation: mx-home-in .22s ease both; }
.mx-homescreen-time { position: absolute; top: 4cqw; left: 0; right: 0; text-align: center; color: #fff; font: 600 5.2cqw/1 system-ui, sans-serif; letter-spacing: -.01em; }
.mx-homescreen-grid { position: absolute; top: 14cqw; left: 7cqw; right: 7cqw; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6cqw 4cqw; }
.mx-homescreen figure { margin: 0; display: grid; justify-items: center; gap: 2.2cqw; }
.mx-homescreen figcaption { color: #fff; font: 500 3.1cqw/1 system-ui, sans-serif; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.mx-homescreen-tile { display: grid; place-items: center; width: 15.5cqw; height: 15.5cqw; border-radius: 3.6cqw; background: #15121b;
  box-shadow: 0 3px 10px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.06); overflow: hidden; }
.mx-homescreen-tile img { width: 78%; height: 78%; object-fit: contain; display: block; }
.mx-homescreen-tile--habits img { width: 84%; height: 84%; }
.mx-homescreen figure.is-waiting { opacity: 0; }
.mx-homescreen figure.is-in { animation: mx-home-pop .6s cubic-bezier(.2,.8,.2,1.2) both; }
.mx-homescreen-dock { position: absolute; left: 5cqw; right: 5cqw; bottom: 3.5cqw; height: 22cqw; border-radius: 7cqw; background: rgba(255,255,255,.08); backdrop-filter: blur(6px);
  display: flex; justify-content: space-evenly; align-items: center; }
.mx-homescreen-dock i { width: 14cqw; height: 14cqw; border-radius: 3.4cqw; background: linear-gradient(145deg, #3a3446, #221d2b); opacity: .7; }
@keyframes mx-home-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes mx-home-pop { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: scale(1); } }
/* The installed app opens from its tile: the standalone document scales up
   out of the top-left of the grid. It is loaded, hidden, before the tap. */
.mx-homescreen-app { position: absolute; inset: 0; z-index: 2; overflow: hidden; background: #0d0d0d; visibility: hidden; transform-origin: 30% 14%; }
.mx-homescreen-app > iframe { position: absolute; inset: 0 auto auto 0; border: 0; background: #0d0d0d; }
.mx-homescreen.is-open .mx-homescreen-app { visibility: visible; animation: mx-app-open .55s cubic-bezier(.2,.7,.2,1) both; }
@keyframes mx-app-open { from { transform: scale(.18); opacity: 0; border-radius: 20cqw; } to { transform: none; opacity: 1; border-radius: 0; } }
@media (prefers-reduced-motion: reduce) { .mx-homescreen, .mx-homescreen figure.is-in, .mx-homescreen.is-open .mx-homescreen-app { animation: none; } }

/* --- Capabilities: a horizontal slider of screens ------------------------ */
.home-details-visual--slider { margin-top: 40px; }
.mx-cap-slider { display: flex; gap: clamp(16px, 2.5vw, 34px); overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 4px 22px;
  scrollbar-width: thin; scrollbar-color: #3b363e transparent; -webkit-overflow-scrolling: touch; }
.mx-cap-slider::-webkit-scrollbar { height: 6px; }
.mx-cap-slider::-webkit-scrollbar-thumb { background: #3b363e; border-radius: 999px; }
.mx-cap-slide { flex: 0 0 clamp(260px, 24vw, 320px); scroll-snap-align: start; display: grid; grid-template-rows: auto 1fr; gap: 14px; }
.mx-cap-slide--text { flex-basis: clamp(240px, 20vw, 280px); align-self: start; padding: 22px; border: 1px solid #2b282d; border-radius: 14px; background: #121014; }
.mx-cap-copy b { display: block; color: #e5e1e7; font-size: 14px; font-weight: 680; margin-bottom: 6px; }
.mx-cap-copy p { margin: 0; color: #98929a; font-size: 13px; line-height: 1.6; }
.mx-cap-screen .mx-small-phone, .mx-cap-screen .mx-voice-showcase { max-width: none !important; width: 100%; margin: 0; }
.mx-cap-screen .mx-voice-phone { max-width: none !important; width: 100%; }
.mx-cap-screen .mx-actual-surface--mobile > header { min-height: 30px; margin-bottom: 8px; }
.mx-cap-screen .mx-actual-surface--mobile > header strong { font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.mx-cap-slider { padding: 12px 12px 22px; }
.mx-cap-copy { min-height: 92px; }
/* Capability slides: a slide never grows past its basis for wide nowrap
   content, and every phone in it obeys the same fit-to-viewport cap. */
.mx-cap-slider { align-items: flex-start; }
.mx-cap-slide { min-width: 0; }
.mx-cap-screen .mx-voice-phone { max-width: calc(var(--mx-fit-h) * 0.462) !important; margin-inline: auto; }
.mx-cap-screen .mx-voice-app { min-width: 0; }

/* Capabilities as a slideshow: one phone-sized screen at a time. */
.mx-cap-stage { display: flex; justify-content: center; padding: 4px 0 12px; }
.mx-cap-stage > * { width: 100%; max-width: min(340px, calc(var(--mx-fit-h) * 0.462)); }
.mx-cap-stage .mx-small-phone, .mx-cap-stage .mx-voice-showcase { max-width: min(340px, calc(var(--mx-fit-h) * 0.462)) !important; width: 100%; margin: 0; }
.mx-cap-stage .mx-voice-phone { max-width: none !important; width: 100%; }
.mx-cap-stage .mx-actual-surface--mobile > header { min-height: 30px; margin-bottom: 8px; }
.mx-app-carousel--caps .mx-app-carousel-tabs button { padding-inline: 12px; }
.mx-app-carousel-blurb b { color: #e5e1e7; font-weight: 650; }
/* Voice: after the spoken answer, the report is one tap away in News. */
.mx-voice-report-link { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 10px 12px; border: 1px solid #3b3550; border-radius: 12px; background: #17131f; color: #e5e1e7; font-size: 13px; font-weight: 600; text-decoration: none; opacity: 0; transform: translateY(6px); transition: opacity .4s ease .2s, transform .4s ease .2s; }
.mx-voice-reader.is-reading .mx-voice-report-link { opacity: 1; transform: none; }
.mx-voice-report-link .mx-app-icon { width: 22px; height: 22px; border-radius: 6px; }
.mx-voice-report-link span { flex: 1; }
.mx-voice-report-link .mx-icon { width: 16px; height: 16px; fill: none; stroke: #b9a7ff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mx-apps-phone { width: 100%; max-width: min(340px, calc(var(--mx-fit-h) * 0.462)); margin: 12px auto 0; }

/* Build apps on the fly: a slideshow of two screens, the web build and the
   phone build, each at the size it deserves. */
.mx-app-carousel--build .mx-app-slide-phone { display: flex; justify-content: center; padding: 4px 0 12px; }
.mx-app-carousel--build .mx-app-slide-phone .mx-actual-surface--mobile { width: 100%; max-width: min(340px, calc(var(--mx-fit-h) * 0.462)); }
.mx-app-carousel--build .mx-actual-surface--web { max-width: max(560px, calc(var(--mx-fit-h) * 1.44)); margin-inline: auto; }
/* Memory: a Reflection phone you can actually read. */
@media (min-width: 760px) {
  .mx-memory-pair > .mx-actual-surface--mobile { width: clamp(220px, 28%, 300px); }
}

/* Contribute as a phone screen: one column, the same bezel and fit width as
   every other phone on the page. */
.mx-contribute-phone-wrap { display: flex; justify-content: center; }
.mx-contribute-phone-surface { width: 100%; max-width: min(340px, calc(var(--mx-fit-h) * 0.462)); }
.mx-contribute-phone-surface .mx-phone-screen { background: #0e0d10; }
.mx-contribute-phone-screen { scrollbar-width: none; }
.mx-contribute-phone-screen::-webkit-scrollbar { display: none; }

/* --- Round 13: title beside the screens, less text, status under screens --- */
.home-eyebrow { margin: 0 0 12px; color: #b9a7ff; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.home-hero-lead { font-size: clamp(1.05rem, 1.5vw, 1.25rem); max-width: 34ch; }
.home-hero-fine { max-width: 40ch; }
@media (min-width: 1041px) {
  .home-hero { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); gap: clamp(28px, 3.5vw, 56px); align-items: center; }
  .home-hero-copy { max-width: 520px; }
  .home-hero-art { padding-bottom: 0; }
  .home-hero h1 { max-width: 11ch; }
}
/* Status lines sit UNDER the screens so every screen top lines up; a line
   that only named the screen is gone. */
.mx-actual-surface { display: flex; flex-direction: column; }
.mx-actual-surface > header { order: 3; margin: 10px 0 0; min-height: 0; }
.mx-actual-surface > header:empty { display: none; }
.mx-hero-runtime > header { display: none; }
.mx-cap-stage .mx-actual-surface--mobile > header { margin: 8px 0 0; }
.home-eyebrow { white-space: nowrap; max-width: none; }

/* --- Overview: the map of the page, right after the hero ---------------- */
.home-overview-chapter { padding-block: clamp(40px, 5vw, 64px) clamp(56px, 6vw, 84px); border-top: 1px solid #1f1d22; }
.home-overview-chapter .home-chapter-heading h2 { max-width: 16ch; }
.home-overview-grid {
  list-style: none; margin: clamp(26px, 3vw, 38px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px;
}
.home-overview-grid > li > a {
  display: grid; gap: 10px; align-content: start; height: 100%;
  padding: 18px 18px 20px; border-radius: 16px; border: 1px solid #242127; background: #111013;
  color: inherit; text-decoration: none; transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.home-overview-grid > li > a:hover { border-color: #4b4368; background: #14121a; transform: translateY(-2px); text-decoration: none; }
.home-overview-grid b { font-size: 16px; font-weight: 680; letter-spacing: -.01em; color: #f1edf4; }
.home-overview-grid p { color: #a39da6; font-size: 14px; line-height: 1.55; }
.home-overview-icons { display: flex; align-items: center; gap: 6px; min-height: 28px; }
.home-overview-icons img { width: 28px; height: 28px; border-radius: 7px; object-fit: contain; background: #1b191f; }
@media (max-width: 880px) { .home-overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .home-overview-grid { grid-template-columns: 1fr; } }

/* --- Start: the closing call to action ---------------------------------- */
.home-start-chapter { border-top: 1px solid #242125; background: radial-gradient(80% 120% at 50% 0%, rgba(139, 108, 247, .14), transparent 60%), #0b0a0c; text-align: center; }
.home-start-inner { display: grid; justify-items: center; gap: 14px; max-width: 620px; }
.home-start-inner h2 { font-size: clamp(2.3rem, 4.4vw, 3.4rem); font-weight: 700; letter-spacing: -.04em; line-height: .98; text-wrap: balance; }
.home-start-inner > p { color: #aaa4ac; font-size: clamp(15px, 1.4vw, 17px); line-height: 1.6; max-width: 46ch; }
.home-start-inner .provider-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin-top: 10px; width: 100%; max-width: 470px; }
.home-start-inner .provider-list form { flex: 1 1 190px; }

/* Tandem, a slide of the small things. */
.mx-tandem { display: grid; justify-items: center; }
.mx-tandem > .mx-actual-surface--mobile { width: 100%; max-width: min(340px, calc(var(--mx-fit-h) * 0.462)); }

/* One rhythm for every chapter: the same room above and below, one hairline
   between chapters. */
.home-chapter, .home-build-chapter, .home-workbench-chapter, .home-more-apps-chapter, .home-store-section,
.home-halloween-chapter, .home-memory-chapter, .home-loop-chapter, .home-contribute-chapter,
.home-details-chapter, .home-ownership-chapter, .home-start-chapter {
  padding: clamp(72px, 8vw, 112px) 0;
  border-top: 1px solid #1f1d22;
}
.home-overview-chapter { padding: clamp(48px, 6vw, 80px) 0 clamp(64px, 7vw, 96px); }

/* Chapter openings rise in once (see home.js); without JS, or with reduced
   motion, they are simply there. */
.home-js .home-chapter-heading, .home-js .home-overview-grid > li, .home-js .home-start-inner {
  opacity: 0; transform: translateY(14px);
  transition: opacity .6s ease, transform .7s cubic-bezier(.2, .7, .2, 1);
}
.home-js .home-overview-grid > li:nth-child(2) { transition-delay: .06s; }
.home-js .home-overview-grid > li:nth-child(3) { transition-delay: .12s; }
.home-js .home-overview-grid > li:nth-child(5) { transition-delay: .06s; }
.home-js .home-overview-grid > li:nth-child(6) { transition-delay: .12s; }
.home-js .home-chapter-heading.is-in, .home-js .home-overview-grid > li.is-in, .home-js .home-start-inner.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .home-js .home-chapter-heading, .home-js .home-overview-grid > li, .home-js .home-start-inner { opacity: 1; transform: none; transition: none; }
}

/* On a phone the slideshow's tabs are one row that scrolls, fading at the
   edges, and the screen itself answers to a swipe (see Carousel). */
@media (max-width: 620px) {
  .mx-app-carousel-head { margin-inline: calc(-1 * var(--home-gutter, 20px)); }
  .mx-app-carousel-tabs {
    justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
    padding: 2px var(--home-gutter, 20px);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent);
  }
  .mx-app-carousel-tabs::-webkit-scrollbar { display: none; }
  .mx-app-carousel-tabs button { flex: 0 0 auto; scroll-snap-align: center; }
}

/* "Live, try it": the pill on a frame a visitor can use. It appears after
   the frame has settled and goes the moment the frame is used. Phones keep
   their frames hands-off, so it never shows there. */
.mx-try {
  position: absolute; top: 12px; right: 12px; z-index: 7; pointer-events: none;
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px 6px 9px;
  border-radius: 999px; border: 1px solid rgba(185, 167, 255, .38);
  background: rgba(18, 16, 24, .86); backdrop-filter: blur(6px);
  color: #ebe6f7; font: 600 11.5px/1 system-ui, sans-serif; letter-spacing: .01em;
  animation: mx-try-in .5s ease 1.4s both;
}
.mx-try i { width: 7px; height: 7px; border-radius: 50%; background: #b9a7ff; animation: mx-try-pulse 2.2s ease-out infinite; }
.mx-phone-screen > .mx-try { top: 14px; right: 14px; }
/* Where a frame keeps its own controls top-right (Atlas's counter), the pill sits low. */
.mx-try--bottom { top: auto; bottom: 14px; right: 14px; }
@keyframes mx-try-in { from { opacity: 0; transform: translateY(-4px); } }
@keyframes mx-try-pulse { 0% { box-shadow: 0 0 0 0 rgba(185, 167, 255, .55); } 70%, 100% { box-shadow: 0 0 0 9px rgba(185, 167, 255, 0); } }
@media (pointer: coarse) { .mx-try:not(.mx-try--touch) { display: none; } }
@media (prefers-reduced-motion: reduce) { .mx-try { animation: none; } .mx-try i { animation: none; } }

/* A slideshow has its tabs above the screen and a line below it, so its
   screen fits a shorter box than a bare frame does. */
:root { --mx-carousel-fit-h: calc(100vh - 260px); }
@supports (height: 100svh) { :root { --mx-carousel-fit-h: calc(100svh - 260px); } }
.mx-app-carousel .mx-cap-stage > *, .mx-app-carousel .mx-cap-stage .mx-small-phone, .mx-app-carousel .mx-cap-stage .mx-voice-showcase,
.mx-app-carousel .mx-cap-stage .mx-actual-surface--mobile, .mx-app-carousel .mx-apps-phone,
.mx-app-carousel--build .mx-app-slide-phone .mx-actual-surface--mobile {
  max-width: min(340px, calc(var(--mx-carousel-fit-h) * 0.462)) !important;
}
.mx-app-carousel--build .mx-actual-surface--web, .mx-app-carousel .mx-runtime-frame--apps, .mx-app-carousel .mx-actual-surface--web {
  max-width: max(560px, calc(var(--mx-carousel-fit-h) * 1.44));
}

/* Simulated screens: native phone size, scaled to fit (see SimScreen). */
.mx-sim-screen { position: absolute; inset: 0 auto auto 0; width: 390px; height: 844px; transform-origin: left top; overflow: hidden; }
.mx-sim-screen.mx-contribute-phone-screen { overflow: auto; }

/* Product-led homepage composition. */
.home-hero { grid-template-columns: minmax(0, .86fr) minmax(520px, 1.14fr); gap: clamp(44px, 6vw, 88px); }
.home-hero-copy { max-width: 510px; }
.home-hero-kicker { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 20px; color: var(--home-muted); font-size: 13px; font-weight: 600; }
.home-hero h1 { max-width: 9.7ch; }
.home-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 30px; }
.home-hero-primary, .home-hero-secondary { min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 0 19px; border-radius: 6px; font-size: 14px; font-weight: 700; text-decoration: none; transition: background .2s ease, border-color .2s ease; }
.home-hero-primary { color: var(--home-dark-ink); background: var(--home-violet); }
.home-hero-primary:hover { color: var(--home-dark-ink); background: #d0c1ff; text-decoration: none; }
.home-hero-secondary { padding-inline: 8px; color: var(--home-ink); }
.home-hero-secondary:hover { color: #fff; text-decoration: none; }
.home-overview-chapter .home-chapter-heading { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .54fr); gap: 32px; align-items: end; }
.home-overview-intro { max-width: 37ch; color: var(--home-muted); font-size: 16px; line-height: 1.58; }
.home-overview-grid { margin-top: 42px; }
.home-overview-grid > li > a { min-height: 210px; padding: 22px; }
.home-overview-icons { padding-bottom: 9px; border-bottom: 1px solid rgba(255,255,255,.07); }
.home-chapter-heading { max-width: 780px; }
.home-chapter-heading > p:not(.home-eyebrow) { color: var(--home-muted); font-size: 17px; line-height: 1.6; }
@media (max-width: 1040px) { .home-hero { grid-template-columns: 1fr; } .home-hero-copy { max-width: 620px; } .home-hero h1 { max-width: 11ch; } .home-hero-art { max-width: 960px; } }
@media (max-width: 620px) { .home-hero-kicker { margin-bottom: 16px; } .home-hero-actions { margin-top: 26px; width: 100%; } .home-hero-primary { flex: 1 1 180px; } .home-hero-secondary { flex: 1 1 130px; } .home-launch-panel--inline { margin-top: 18px; } .home-hero-fine { margin-top: 22px !important; } .home-overview-chapter .home-chapter-heading { display: block; } .home-overview-intro { margin-top: 18px !important; font-size: 15px; } .home-overview-grid { margin-top: 28px; } .home-overview-grid > li > a { min-height: 0; padding: 19px; } }

/* Signed-in visitors stay on the public page until they choose their workspace. */
.home-dashboard-entry {
  display: grid;
  gap: 14px;
  align-items: start;
  padding: 4px 0;
}
.home-dashboard-entry p {
  margin: 0;
  color: var(--home-muted);
  font-size: 0.95rem;
}
.home-dashboard-entry .home-hero-primary {
  justify-self: start;
}

/* Progress-aware navigation for the long homepage. */
.home-top-button {
  position: fixed;
  right: max(24px, env(safe-area-inset-right));
  bottom: calc(24px + env(safe-area-inset-bottom));
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 7px 14px 7px 8px;
  border: 1px solid #4e446e;
  border-radius: 999px;
  background: #13121b;
  color: var(--home-ink);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .3);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(.96);
  transition: opacity .22s var(--home-ease), transform .22s var(--home-ease), visibility .22s;
}
.home-top-button[hidden] { display: none; }
.home-top-button.is-visible { opacity: 1; visibility: visible; transform: none; }
.home-top-button:focus-visible { outline: 2px solid var(--home-violet); outline-offset: 3px; }
.home-top-ring {
  --progress: 0%;
  position: relative;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: conic-gradient(var(--home-violet) var(--progress), #302b3f 0);
  color: #e3dcff;
  font-size: 18px;
  line-height: 1;
  isolation: isolate;
}
.home-top-ring::before { content: ""; position: absolute; inset: 4px; z-index: -1; border-radius: 50%; background: #17151f; }
@media (max-width: 620px) {
  .home-top-button { right: max(16px, env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { .public-home .home-top-button { transition: none !important; } }

/* The eyebrow labels both columns; the heading and explanation share a row. */
.home-overview-chapter .home-chapter-heading > .home-eyebrow { grid-column: 1 / -1; }

/* The header sign-in entry meets the 44px target the design guide asks for. */
.home-nav-start { min-height: 44px; }

/* Sign-in dialog opened from the header (and by /?action=signin). A native <dialog>
   supplies focus containment, Escape, and an inert page; this only styles it. */
.home-signin {
  width: min(400px, calc(100% - 40px));
  max-height: calc(100dvh - 40px);
  margin: auto;
  padding: 0;
  overflow: auto;
  border: 1px solid #2a2a2a;
  border-radius: 14px;
  background: #171717;
  color: var(--home-ink);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
}
.home-signin::backdrop { background: rgba(0, 0, 0, .74); }
.home-signin-panel { position: relative; padding: 28px 24px 24px; }
.home-signin-mark { display: block; width: 36px; height: 36px; }
.home-signin h2 {
  margin: 16px 0 0;
  font-size: 1.65rem;
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.04;
}
.home-signin h2:focus { outline: none; }
.home-signin p {
  margin: 10px 0 0;
  color: var(--home-muted);
  font-size: 14px;
  line-height: 1.55;
}
.home-signin .provider-list {
  display: grid;
  gap: 10px;
  max-width: none;
  margin: 22px 0 0;
}
.home-signin .provider-list form { flex: none; }
.home-signin-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--home-muted);
  cursor: pointer;
}
.home-signin-close:hover { background: #212121; color: var(--home-ink); }
body:has(.home-signin[open]) { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .home-signin[open] { animation: home-signin-in 200ms var(--home-ease); }
  .home-signin[open]::backdrop { animation: home-signin-fade 160ms ease; }
}
@keyframes home-signin-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes home-signin-fade { from { opacity: 0; } }