@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/IBMPlexMono-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
:root {
  font-family:
    "IBM Plex Mono",
    -apple-system,
    BlinkMacSystemFont,
    "PingFang SC",
    "Microsoft YaHei",
    sans-serif;
  font-weight: 400;
  color: #000;
  background: #fff;
  font-synthesis: none;
  --paper: #fff;
  --ink: #000;
  --u: 1;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
button,
a,
input {
  -webkit-tap-highlight-color: transparent;
}
button,
input {
  font: inherit;
}
button {
  color: inherit;
  border: 0;
  border-radius: 0;
  cursor: pointer;
}
a {
  color: inherit;
  text-decoration: none;
}
button:focus-visible,
a:focus-visible,
input:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 5px;
}
button:disabled {
  cursor: default;
}
img,
video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
button img {
  object-fit: contain;
}
p,
h1,
h2,
h3,
figure {
  margin: 0;
  font-weight: 400;
}
body.dark {
  --ink: #fff;
  background: var(--paper);
  color: var(--ink);
}
.skip-link {
  position: fixed;
  top: -100px;
  left: 12px;
  z-index: 100;
  background: var(--paper);
  padding: 12px;
}
.skip-link:focus {
  top: 8px;
}
#header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 30;
  height: 80px;
  pointer-events: none;
}
.header-inner {
  max-width: 1440px;
  margin: auto;
  position: relative;
  height: 100%;
}
.header-logo {
  position: absolute;
  left: 8px;
  top: 28px;

  display: flex;
  align-items: center;

  pointer-events: auto;
}

.dark .header-logo .word {
  filter: invert(1);
}

.home .header-logo {
  display: none;
}
.menu-trigger {
  position: absolute;
  right: 26px;
  top: 24px;
  width: 50px;
  height: 40px;
  background: rgba(244, 244, 244, 0.94);
  padding: 8px 13px;
  pointer-events: auto;
}
.dark .menu-trigger {
  background: rgba(32, 32, 32, 0.9);
}
.dark .menu-trigger img {
  filter: invert(1);
}
#main {
  min-height: 100vh;
  outline: none;
}
.page-shell {
  max-width: 1440px;
  margin: 0 auto;
  position: relative;
  container-type: inline-size;
}
.design-section {
  position: relative;
  width: 100%;
  height: calc(var(--height) * var(--u) * 1px);
}
.design-node {
  position: absolute;
  left: calc(var(--x) * var(--u) * 1px);
  top: calc(var(--y) * var(--u) * 1px);
  width: calc(var(--w) * var(--u) * 1px);
  height: calc(var(--h) * var(--u) * 1px);
}
.design-text {
  height: auto;
  min-height: calc(var(--h) * var(--u) * 1px);
  font-size: calc(var(--size) * var(--u) * 1px);
  line-height: calc(var(--line) * var(--u) * 1px);
  letter-spacing: calc(var(--spacing) * var(--u) * 1px);
  overflow-wrap: break-word;
}
.design-text p + p {
  margin-top: calc(var(--paragraph) * var(--u) * 1px);
}
.design-asset {
  isolation: isolate;
}
.design-asset img {
  object-fit: fill;
}
.design-asset[data-link] {
  cursor: pointer;
}
.media-shell {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: transparent;
}
.media-shell img,
.media-shell video {
  position: absolute;
  inset: 0;
}
.media-shell video {
  object-fit: cover;
}
.media-shell .media-error {
  position: absolute;
  bottom: 10px;
  left: 10px;
  right: 10px;
  padding: 8px;
  background: #000b;
  color: #fff;
  font-size: 12px;
}
.film-start {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  padding: 14px;
  z-index: 2;
}
.film-start img {
  position: static;
  width: 20px;
  height: 28px;
  object-fit: contain;
}
.film-controlbar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;

  align-items: center;

  color: #fff;

  z-index: 3;

  opacity: 0;
  transition: opacity 0.18s;
}
.media-shell:hover .film-controlbar,
.media-shell:focus-within .film-controlbar,
.media-shell.paused .film-controlbar {
  opacity: 1;
}
.film-controlbar button {
  background: transparent;

  flex-shrink: 0;
}
.film-controlbar img {
  position: static;
  object-fit: contain;
}
.film-controlbar input {
  min-width: 0;
  flex: 1;
  accent-color: #fff;
  cursor: pointer;
}

.media-shell:fullscreen {
  background: #000;
}
.media-shell:fullscreen video {
  object-fit: contain;
}
.film-unavailable {
  position: absolute;
  bottom: 16px;
  left: 16px;
  background: #000b;
  color: #fff;
  font-size: 12px;
  padding: 8px 12px;
}
.home-title {
  position: absolute;
  left: calc(129px * var(--u));
  top: calc(64px * var(--u));
  width: calc(216px * var(--u));
  height: calc(40px * var(--u));
}
.project-hit {
  position: absolute;
  z-index: 4;
  background: transparent;
  display: block;
}
.project-hit .jump {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 24px;
  object-fit: contain;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.18s;
}
.project-hit:hover .jump,
.project-hit:focus-visible .jump {
  opacity: 1;
}
.tool-hit::after {
  content: "https://synthub.art";
  position: absolute;
  left: 32px;
  bottom: 24px;
  font-size: 16px;
  color: #fff;
  opacity: 0;
}
.tool-hit:hover::after,
.tool-hit:focus-visible::after {
  opacity: 1;
}
.detail-back {
  position: absolute;
  left: 8px;
  top: 96px;
  width: 48px;
  height: 24px;
  padding: 0;
  background: transparent;
  z-index: 5;
}
.detail-back img {
  object-fit: contain;
}
.dark .detail-back img {
  filter: invert(1);
}
.tool-card {
  display: block;
  overflow: hidden;
  color: #fff;
  z-index: 3;
}
.tool-card-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tool-brand {
  position: absolute;
  left: 2.71%;
  top: 6.04%;
  display: flex;
  align-items: center;
  gap: 5.3%;
  width: 30%;
  height: 12.08%;
}
.tool-card .tool-icon {
  width: 18.08%;
  height: 100%;
  object-fit: contain;
  flex: none;
}
.tool-card .tool-wordmark {
  width: 32.04%;
  height: 80%;
  object-fit: contain;
  flex: none;
}
.tool-card .tool-name {
  position: absolute;
  left: 2.71%;
  top: 47.36%;
  width: 6.15%;
  height: 5.28%;
  object-fit: contain;
}
.tool-description {
  position: absolute;
  left: calc(32px * var(--u));
  bottom: calc(32px * var(--u));
  width: calc(543px * var(--u));
  font-family: "PingFang SC", -apple-system, BlinkMacSystemFont, "Microsoft YaHei", sans-serif;
  font-size: calc(16px * var(--u));
  line-height: calc(24px * var(--u));
  letter-spacing: 0.01em;
  transition: opacity 0.18s;
}
.tool-hover-arrow,
.tool-url {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 0.18s;
  white-space: nowrap;
}
.tool-hover-arrow {
  left: 48%;
  font-family: "IBM Plex Mono", monospace;
  font-size: calc(40px * var(--u));
  line-height: 1;
}
.tool-url {
  right: 2.71%;
  font-size: calc(16px * var(--u));
  letter-spacing: 0.01em;
}
.tool-card:hover .tool-description,
.tool-card:focus-visible .tool-description {
  opacity: 0;
}
.tool-card:hover .tool-hover-arrow,
.tool-card:hover .tool-url,
.tool-card:focus-visible .tool-hover-arrow,
.tool-card:hover .tool-url,
.tool-card:focus-visible .tool-url {
  opacity: 1;
}
.site-footer {
  position: relative;
  height: calc(264px * var(--u));
  max-width: 1440px;
  margin: auto;
  padding: 0 8px;
  font-size: 12px;
  letter-spacing: -0.02em;
}
.footer-mark {
  position: absolute;
  left: 8px;
  top: 80px;
  width: 48px;
  height: 24px;
  filter: invert(1);
}
.footer-word {
  position: absolute;
  left: 68.26%;
  top: 80px;
  width: 210px;
  height: 40px;
}
.dark .footer-mark {
  filter: none;
}

.footer-top {
  position: absolute;
  left: calc(50% - 24px);
  top: 124px;
  padding: 12px;
  background: transparent;
  width: 48px;
  height: 64px;
}
.footer-top img {
  object-fit: contain;
}
.dark .footer-top img {
  filter: invert(1);
}
.footer-meta {
  position: absolute;
  bottom: 14px;
  left: 8px;
  right: 8px;
  display: grid;
  grid-template-columns: 34.06% 34.13% 8.5% 1fr;
}
#menu {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  border: 0;
  padding: 0;
  background: transparent;

  overflow: hidden;
  margin: 0;
}
#menu::backdrop {
  background: transparent;
}
.menu-preview {
  position: absolute;
  left: 0;
  top: 0;

  height: 100%;
  padding: 0;
}
.menu-preview img {
  object-fit: cover;
}
.menu-panel {
  position: absolute;
  right: 0;
  top: 0;

  height: 100%;

  border-left: 1px solid #eee;
  overflow-y: auto;
}

.menu-close {
  position: absolute;
}

.menu-groups {
  padding-top: 0;
}
.menu-group {
  display: grid;
}
.menu-group h2 {
  font-weight: 400;
}
.menu-group ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu-group li + li {
  margin-top: 8px;
}
.menu-group a {
  position: relative;
  display: inline-block;
}
.menu-group a:hover:before,
.menu-group a:focus-visible:before,
.menu-group a[aria-current="page"]:before {
  position: absolute;
  left: -16px;
  top: 8px;
  width: 8px;
  height: 8px;
  background: currentColor;
}
.menu-work {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.menu-email {
  display: flex;
  gap: 22px;
  font-size: 16px;
  white-space: nowrap;
}
.menu-email button {
  background: transparent;
  padding: 0;
}
.notice {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  padding: 12px 18px;
  z-index: 100;
  background: #111;
  color: white;
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  max-width: 90vw;
}
.notice.visible {
  opacity: 1;
}
.scroll-art {
  will-change: opacity;
}
.scroll-art.is-hidden {
  opacity: 0;
  pointer-events: none;
}
.not-found {
  padding: 160px 9%;
  min-height: 65vh;
}
.not-found h1 {
  font-size: 32px;
  margin-bottom: 32px;
}
.media-shell .media-fallback {
  display: block;
}
.scroll-art {
  opacity: 0;
  transition: opacity 0.16s linear;
}
.scroll-art.is-visible {
  opacity: 1;
}
.ambient-shape {
  overflow: hidden;
}
.ambient-shape video,
.mobile-composition [data-node="1927:14213"] video {
  position: absolute;
  left: 53.1%;
  top: 56.1%;
  display: block;
  width: 164.5%;
  height: 164.5%;
  max-width: none;
  object-fit: cover;
  transform: translate(-50%, -50%);
}
/* The Work background is already exported at its exact layout ratio.
   Keep the homepage PBRMAX animation's special crop out of this slot. */
.ambient-shape[data-node="360:23355"] .media-shell > video,
.ambient-shape[data-node="360:23355"] .media-shell > .media-fallback {
  inset: 0;
  width: 100%;
  height: 100%;
  transform: none;
  object-fit: cover;
}
.story-art-layer {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.story-art-layer[hidden] {
  display: none;
}
.story-art {
  position: fixed;
  opacity: 0;
  transition: opacity 0.16s linear;
}
.story-art.active {
  opacity: 1;
}
.story-art img {
  object-fit: fill;
}
@media (min-width: 1800px) {
  .menu-panel {
    width: 576px;
  }
  .menu-preview {
    width: calc(100% - 576px);
  }
}
@media (max-width: 1279px) {
  #header {
    height: 72px;
    background: var(--paper);
  }
  .home .header-logo {
    display: flex;
  }
  .header-logo {
    left: 20px;
    top: 25px;
  }
  .menu-trigger {
    right: 16px;
    top: 16px;
  }
  .page-shell {
    padding-top: 80px;
  }
  .design-section {
    height: auto !important;
    padding: 32px 20px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 16px;
  }
  .design-node {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    min-height: 0;
    grid-column: 1/-1;
  }
  .design-text {
    font-size: 16px !important;
    line-height: 1.75 !important;
    letter-spacing: 0 !important;
  }
  .design-text p + p {
    margin-top: 12px;
  }
  .design-text[data-heading="true"] {
    font-size: 22px !important;
    line-height: 1.4 !important;
    margin: 24px 0 8px;
  }
  .design-asset {
    aspect-ratio: var(--w) / var(--h);
  }
  .design-shape,
  .mobile-hide {
    display: none !important;
  }
  .design-asset.small-art {
    grid-column: auto;
  }
  .home-title {
    display: none;
  }
  .home-section-hero {
    padding: 0;
    height: 180px !important;
    display: block;
  }
  .home-section-hero .hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
  }
  .home-section-hero .hero-mark {
    position: absolute;
    width: 130px;
    height: 65px;
    left: calc(50% - 65px);
    top: 58px;
  }
  .home-section-hero .design-node:not(.hero-bg):not(.hero-mark) {
    display: none;
  }
  .home-section .project-hit {
    display: none;
  }
  .mobile-project {
    display: flex;
    flex-direction: column;
    gap: 16px;
    grid-column: 1/-1;
    min-width: 0;
  }
  .mobile-project .design-node {
    width: 100%;
  }
  .mobile-project .design-asset {
    position: relative;
  }
  .mobile-project .project-title {
    font-size: 16px;
    line-height: 1.5;
  }
  .home-grid .mobile-project {
    grid-column: auto;
  }
  .home-grid .project-title {
    font-size: 13px;
  }
  .home-brand .mobile-project {
    margin-bottom: 32px;
  }
  .detail-back {
    position: relative;
    top: auto;
    left: 20px;
    margin: 20px 0 0;
  }
  .detail-intro {
    padding-top: 28px;
  }
  .detail-intro .design-text {
    grid-column: 1/-1;
  }
  .detail-intro .role {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }
  .detail-intro .english-copy {
    font-size: 14px !important;
    line-height: 1.7 !important;
    color: #666;
  }
  .dark .detail-intro .english-copy {
    color: #aaa;
  }

  .footer-mark {
    left: 20px;
    top: 60px;
  }
  .footer-word {
    left: auto;
    right: 20px;
    top: 55px;
    width: 160px;
    height: 32px;
  }
  .footer-top {
    top: 104px;
  }
  .footer-meta {
    left: 20px;
    right: 20px;
    font-size: 10px;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .footer-meta span:nth-child(2) {
    text-align: right;
  }
  .footer-meta span:last-child {
    text-align: right;
  }
  .menu-panel {
    min-width: 0;
  }
  .menu-preview {
    display: none;
  }
  .menu-groups {
    max-width: 500px;
  }

  .menu-email {
    flex-wrap: wrap;
    gap: 16px;
  }
  .film-controlbar {
    opacity: 1;
  }

  .film-start {
    width: 48px;
    height: 48px;
  }
  .scroll-art.is-hidden {
    opacity: 1;
  }
  .scroll-art.alternate {
    display: none !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}
.mobile-home {
  display: none;
}
.mobile-detail {
  display: none;
}
@media (max-width: 1279px) {
  .page-shell.detail {
    display: none;
  }
  .mobile-detail {
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding: 100px 20px 48px;
  }
  .mobile-back {
    display: block;
    width: 48px;
    height: 24px;
    margin-bottom: 8px;
  }
  .mobile-back img {
    object-fit: contain;
  }
  .mobile-image-block + .mobile-image-block {
    margin-top: -24px;
  }
  .dark .mobile-back img {
    filter: invert(1);
  }
  .mobile-copy .design-text {
    position: static;
    width: 100%;
    height: auto;
    min-height: 0;
    white-space: normal;
  }
  .mobile-copy .design-text p {
    white-space: pre-wrap;
  }
  .mobile-detail-composition {
    position: relative;
    overflow: hidden;
    width: 100%;
    flex-shrink: 0;
  }
  .mobile-detail-composition .design-node {
    position: absolute;
    left: calc(var(--x) * var(--u) * 1px);
    top: calc(var(--y) * var(--u) * 1px);
    width: calc(var(--w) * var(--u) * 1px);
    height: calc(var(--h) * var(--u) * 1px);
    margin: 0;
  }
  .mobile-detail-composition .design-shape {
    display: block !important;
  }
  .mobile-detail-composition .design-text {
    font-size: calc(var(--size) * var(--u) * 1px) !important;
    line-height: calc(var(--line) * var(--u) * 1px) !important;
    letter-spacing: calc(var(--spacing) * var(--u) * 1px) !important;
  }
  .mobile-detail-composition .design-text p + p {
    margin-top: calc(var(--paragraph) * var(--u) * 1px);
  }
  .mobile-detail-composition .design-text.text-auto p {
    white-space: pre;
  }
}
/* Figma: 12 stretch columns, 8px margins and 32px gutters at the 1440px reference. */
:root {
  --grid-columns: 12;
  --grid-margin: 8px;
  --grid-gutter: 32px;
}
body {
  background: var(--paper);
  color: var(--ink);
}
body.dark {
  --paper: #0c0c0c;
}
.header-logo {
  width: 174.022px;
  height: 24px;
  gap: 0;
}
.header-logo .word {
  width: 100%;
  height: 100%;
}
.header-logo .mark {
  position: absolute;
  left: 0;
  top: 0;
  width: 37.997px;
  height: 18.999px;
  filter: none;
}
.dark .header-logo .mark {
  filter: invert(1);
}
@media (min-width: 1280px) {
  .header-logo .mark {
    width: calc(37.997px * var(--u));
    height: calc(18.999px * var(--u));
  }
}
.menu-open {
  overflow: hidden;
}
.menu-close img {
  width: calc(24px * var(--u));
  height: calc(24px * var(--u));
  transform: rotate(0deg);
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
  margin: auto;
}
.menu-close.is-rotated img {
  transform: rotate(45deg);
}
.menu-trigger img {
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
.menu-trigger.is-unwinding img {
  transform: rotate(45deg);
}
@media (max-width: 1279px) {
  .menu-close img {
    width: 24px;
    height: 24px;
  }
}
#menu {
  color: #000;
}
.menu-panel {
  width: calc(461px * var(--u));
  min-width: 0;
  padding: calc(40px * var(--u)) calc(20px * var(--u)) calc(40px * var(--u))
    calc(41px * var(--u));
  background: #fff;
  border-color: #f5f5f7;
}

.menu-preview {
  width: calc(100% - 461px * var(--u));
  background: transparent;
  pointer-events: none;
}
.menu-preview {
  z-index: 1;
}
.menu-veil {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(100% - 461px * var(--u));
  height: 100%;
  background: rgba(255, 255, 255, 0.4);
  pointer-events: none;
}
.menu-veil {
  z-index: 0;
}
.menu-panel {
  z-index: 2;
}
.dark .menu-veil {
  background: rgba(0, 0, 0, 0.4);
}
.menu-open .hero-slide {
  animation-play-state: paused;
}
.menu-preview img {
  object-position: bottom;
}
.menu-groups {
  max-width: none;
  font-size: calc(16px * var(--u));
}
.menu-group {
  grid-template-columns: calc(64px * var(--u)) minmax(0, 1fr);
  gap: calc(16px * var(--u));
  font-size: inherit;
  line-height: calc(24px * var(--u));
  margin-bottom: calc(40px * var(--u));
}
.menu-group h2 {
  font-size: inherit;
  line-height: inherit;
}
.menu-ai-prefix {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1.05em;
  font-style: italic;
  font-weight: 600;
  letter-spacing: 0;
}
.menu-ai h2 {
  white-space: nowrap;
}
.tool-card .tool-hover-arrow {
  left: 50%;
  width: 40px;
  height: 24px;
  object-fit: contain;
  transform: translate(-50%, -50%);
}
.tool-card:focus-visible .tool-hover-arrow {
  opacity: 1;
}
.project-hit,
.tool-card,
.project-site {
  cursor: pointer;
}
.project-site .project-site-arrow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 24px;
  object-fit: contain;
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}
.project-site:hover .project-site-arrow,
.project-site:focus-visible .project-site-arrow {
  opacity: 1;
}
.pbrmax-intro {
  background: #101014;
  overflow: hidden;
  color: #fff;
}
.pbrmax-intro-background {
  position: absolute;
  left: 0;
  top: calc(159px * var(--u));
  width: 100%;
  height: calc(481px * var(--u));
  overflow: hidden;
}
.pbrmax-intro .pbrmax-intro-background img {
  position: absolute;
  left: 0;
  top: 12.35%;
  width: 100%;
  height: 296.3%;
  max-width: none;
  object-fit: fill;
}
.pbrmax-intro-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(16, 16, 20, 0), #101014);
}
.pbrmax-intro-badge {
  position: absolute;
  left: calc(632px * var(--u));
  top: calc(175px * var(--u));
  width: calc(160px * var(--u));
  height: calc(160px * var(--u));
  border-radius: calc(24px * var(--u));
  background: #101014;
}
.pbrmax-intro-symbol,
.pbrmax-intro-wordmark {
  position: absolute;
  transform: scale(var(--u));
  transform-origin: top left;
}
.pbrmax-intro-symbol {
  left: calc(664px * var(--u));
  top: calc(206.515625px * var(--u));
  width: 96.9697px;
  height: 96.9697px;
}
.pbrmax-intro-wordmark {
  left: calc(553px * var(--u));
  top: calc(395px * var(--u));
  width: 318px;
  height: 30.9999px;
}
.pbrmax-intro-symbol img,
.pbrmax-intro-wordmark img {
  width: auto;
  height: auto;
}
.pbrmax-intro-copy {
  position: absolute;
  left: calc(436px * var(--u));
  top: calc(466px * var(--u));
  width: calc(553px * var(--u));
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: calc(20px * var(--u));
  line-height: calc(32px * var(--u));
  letter-spacing: calc(0.8px * var(--u));
  text-align: center;
}
.pbrmax-intro-copy > span {
  display: block;
}
.pbrmax-intro .project-site-arrow {
  top: calc(131px * var(--u));
}
.mobile-detail-composition .project-site-arrow {
  width: calc(40px * var(--u));
  height: calc(24px * var(--u));
}
@media (hover: none) {
  .project-site .project-site-arrow {
    opacity: 1;
  }
}
.menu-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(8px * var(--u));
}
.menu-list a {
  white-space: nowrap;
}
.menu-group a:hover,
.menu-group a:focus-visible,
.menu-group a[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.menu-group a:hover:before,
.menu-group a:focus-visible:before,
.menu-group a[aria-current="page"]:before {
  content: none;
}
.menu-work-columns {
  display: grid;
  grid-template-columns: calc(121px * var(--u)) minmax(0, 1fr);
}
.menu-about {
  margin-bottom: calc(40px * var(--u));
}
.menu-close {
  right: calc(26px * var(--u));
  top: calc(24px * var(--u));
  width: calc(50px * var(--u));
  height: calc(40px * var(--u));
  padding: calc(3px * var(--u)) calc(8px * var(--u));
  background: #f5f5f5;
}

.menu-email-link {
  background: transparent;
  padding: 0;
  text-align: left;
  font-size: inherit;
  white-space: nowrap;
  line-height: inherit;
}
@media (min-width: 1280px) {
  .design-text.text-auto p {
    white-space: pre;
  }
  .design-text.text-auto {
    overflow-wrap: normal;
  }
  .header-logo {
    left: calc(8px * var(--u));
    top: calc(28px * var(--u));
    width: calc(174.022px * var(--u));
    height: calc(24px * var(--u));
  }
  .menu-trigger {
    width: calc(50px * var(--u));
    height: calc(40px * var(--u));
    padding: calc(8px * var(--u)) calc(13px * var(--u));
  }
  .detail-back {
    left: calc(8px * var(--u));
    top: calc(96px * var(--u));
    width: calc(48px * var(--u));
    height: calc(24px * var(--u));
  }
}
@media (max-width: 1279px) {
  .menu-panel {
    width: 100%;
    padding: 88px 24px 40px;
  }
  .menu-veil {
    display: none;
  }
  .menu-groups {
    font-size: 16px;
  }
  .menu-group {
    grid-template-columns: 60px minmax(0, 1fr);
    gap: 16px;
    line-height: 24px;
    margin-bottom: 32px;
  }
  .menu-list {
    gap: 8px;
  }
  .menu-work-columns {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
  }
  .menu-work-columns .menu-list a {
    font-size: 14px;
  }
  .menu-close {
    right: 16px;
    top: 16px;
    width: 50px;
    height: 40px;
    padding: 3px 8px;
  }
}
@media (max-width: 1279px) {
  .page-shell.home {
    display: none;
  }
  .mobile-home {
    display: block;
    padding: 96px 20px 40px;
  }
  .mobile-home h2 {
    font-size: 22px;
    line-height: 28px;
    margin: 48px 0 32px;
  }
  .mobile-composition {
    position: relative;
    width: 100%;
    overflow: hidden;
  }
  .mobile-composition > span {
    position: absolute;
    display: block;
  }
  .mobile-composition img,
  .mobile-composition video {
    width: 100%;
    height: 100%;
    object-fit: fill;
  }
  .mobile-feature {
    margin: 0 0 48px;
  }
  .mobile-feature p {
    font-size: 16px;
    line-height: 28px;
    margin-bottom: 16px;
    white-space: pre-wrap;
  }
  .mobile-feature p + p {
    margin-bottom: 24px;
  }
  .mobile-design-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 16px;
  }
  .mobile-design-card p {
    font-size: 13px;
    line-height: 20px;
    margin-top: 12px;
  }
  .mobile-tool {
    display: block;
  }
  .mobile-home > .mobile-composition {
    margin-bottom: 48px;
  }
}

/* Homepage hero: five independent backgrounds, with the mark kept in its own layer. */
.hero-logo-blur-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}
.hero-logo-blur-source {
  opacity: 0;
}
.hero-bg {
  z-index: 0;
  overflow: hidden;
  background: #0f0f0f;
}
.home .design-asset[data-node="1927:14487"] {
  z-index: 1;
  pointer-events: none;
}
.hero-slides,
.hero-slide {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
}
.hero-slide {
  opacity: 0;
  animation: hero-dissolve 18.5s linear infinite;
}
.hero-slide:nth-child(1) {
  animation-delay: -0.7s;
}
.hero-slide:nth-child(2) {
  animation-delay: 3s;
}
.hero-slide:nth-child(3) {
  animation-delay: 6.7s;
}
.hero-slide:nth-child(4) {
  animation-delay: 10.4s;
}
.hero-slide:nth-child(5) {
  animation-delay: 14.1s;
}
.hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-image-2 img {
  position: absolute;
  left: -5.69%;
  top: -150.55%;
  width: 111.39%;
  height: 401.1%;
  object-fit: fill;
}
.hero-image-3 img {
  object-position: 50% 45.5%;
}
.symbiotic .design-text[data-node="1513:2898"] {
  font-family:
    "PingFang SC",
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;
}
@keyframes hero-dissolve {
  0% {
    opacity: 0;
  }
  3.7838%,
  20% {
    opacity: 1;
  }
  23.7838%,
  100% {
    opacity: 0;
  }
}
@media (max-width: 1279px) {
  .mobile-hero {
    position: relative;
    aspect-ratio: 3.6;
    overflow: hidden;
    margin-bottom: 48px;
    background: #0f0f0f;
  }
  .mobile-hero-mark {
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 50%;
    width: 23%;
    height: 41.25%;
    object-fit: contain;
    transform: translate(-50%, -50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-slide {
    animation: none;
    opacity: 0;
  }
  .hero-slide:first-child {
    opacity: 1;
  }
}

/* Shared desktop measurements use the same numeric scale as the 1440px Figma frame. */
@media (min-width: 1280px) {
  .site-footer {
    letter-spacing: -0.02em;
  }
  .footer-mark {
    left: calc(8px * var(--u));
    top: calc(80px * var(--u));
    width: calc(48px * var(--u));
    height: calc(24px * var(--u));
  }
  .footer-word {
    top: calc(80px * var(--u));
    width: calc(210px * var(--u));
    height: calc(40px * var(--u));
  }
  .footer-meta {
    bottom: calc(14px * var(--u));
    left: calc(8px * var(--u));
    right: calc(8px * var(--u));
  }
  .footer-top {
    top: calc(136px * var(--u));
    height: calc(48px * var(--u));
    padding: 0;
    transform: rotate(90deg);
  }
  .menu-trigger {
    right: calc(26px * var(--u));
    top: calc(24px * var(--u));
  }
  .design-text {
    white-space: normal;
  }
  .design-text p {
    white-space: pre-wrap;
  }
  .home-corner {
    position: absolute;
    left: calc(8px * var(--u));
    top: calc(28px * var(--u));
    width: calc(15.832px * var(--u));
    height: calc(15.832px * var(--u));
  }
}
@media (max-width: 1279px) {
  .home-corner {
    display: none;
  }
  .scroll-art {
    opacity: 1;
  }
  .design-text {
    color: inherit;
  }
}

/* The 1440px Figma frame is a proportional reference, not a page width limit. */
.header-inner,
.page-shell,
.site-footer {
  max-width: none;
  width: 100%;
}

/* Keep photography proportional; brand marks stay separate from their flat backgrounds. */
.design-asset img,
.story-art img,
.mobile-composition img {
  object-fit: cover;
}
.logo-card {
  overflow: hidden;
}
.logo-card .card-logo,
.mobile-composition .card-logo {
  position: absolute;
  inset: auto;
  left: 50%;
  top: var(--logo-top, 50%);
  width: var(--logo-w);
  height: var(--logo-h);
  transform: translate(-50%, var(--logo-shift-y, -50%));
  object-fit: contain;
}

/* PBRMAX color system: typography and the color scale are live content, not a flattened export. */
.pbrmax-color-section {
  background: #fff;
  overflow: hidden;
}
.pbrmax-color-copy {
  position: absolute;
  left: calc(728px * var(--u));
  top: 0;
  width: calc(575px * var(--u));
  font-family:
    "PingFang SC",
    -apple-system,
    BlinkMacSystemFont,
    "Microsoft YaHei",
    sans-serif;
  font-size: calc(20px * var(--u));
  line-height: calc(32px * var(--u));
  letter-spacing: calc(1px * var(--u));
  font-weight: 400;
  color: #000;
}
.pbrmax-color-copy p + p {
  margin-top: calc(12px * var(--u));
}
.pbrmax-color-panel {
  position: absolute;
  left: 0;
  top: calc(252px * var(--u));
  width: 100%;
  height: calc(400px * var(--u));
  background: #000;
  color: #fff;
  font-family: Arial, "PingFang SC", sans-serif;
}
.pbrmax-color-panel .color-label,
.pbrmax-color-panel .color-percent {
  position: absolute;
  white-space: nowrap;
}
.pbrmax-color-panel .color-label {
  top: calc(78px * var(--u));
  font-size: calc(16px * var(--u));
  line-height: 1;
  font-weight: 600;
}
.pbrmax-color-panel .color-label-blue {
  left: calc(119px * var(--u));
}
.pbrmax-color-panel .color-label-green {
  right: calc(120px * var(--u));
  top: calc(82px * var(--u));
}
.pbrmax-color-gradient {
  position: absolute;
  left: calc(119px * var(--u));
  top: calc(130px * var(--u));
  width: calc(1185px * var(--u));
  height: calc(140px * var(--u));
  background: linear-gradient(90deg, #2fb1ff 0%, #33cd96 100%);
}
.pbrmax-color-panel .color-percent {
  top: calc(300px * var(--u));
  font-size: calc(12px * var(--u));
  line-height: 1;
}
.pbrmax-color-panel .color-percent-zero {
  left: calc(119px * var(--u));
}
.pbrmax-color-panel .color-percent-half {
  left: 50%;
  top: calc(336px * var(--u));
  transform: translateX(-50%);
}
.pbrmax-color-panel .color-percent-full {
  right: calc(120px * var(--u));
}
.pbrmax-color-panel .color-diamond {
  position: absolute;
  left: 50%;
  top: calc(297px * var(--u));
  width: calc(13px * var(--u));
  height: calc(13px * var(--u));
  border: calc(1px * var(--u)) solid #fff;
  transform: translateX(-50%) rotate(45deg);
}
.pbrmax-color-art {
  position: absolute;
  left: calc(var(--px) * var(--u) * 1px);
  top: calc(var(--py) * var(--u) * 1px);
  width: calc(var(--pw) * var(--u) * 1px);
  height: calc(var(--ph) * var(--u) * 1px);
  overflow: hidden;
  background: #fff;
}
.pbrmax-color-art .media-fallback {
  position: absolute;
  left: calc(var(--px) * var(--u) * -1px);
  top: calc((var(--py) + 40) * var(--u) * -1px);
  width: calc(1424px * var(--u));
  height: calc(1900px * var(--u));
  max-width: none;
  object-fit: fill;
}

/* Figma player glyphs stay separate from the film; only the video image is cropped to its frame. */
.film-start {
  background: transparent;
}
.film-controlbar [data-action="mute"],
.film-controlbar [data-action="fullscreen"] {
  display: grid;
  place-items: center;
}
.film-controlbar [data-action="mute"] img,
.film-controlbar [data-action="fullscreen"] img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}
.film-controlbar [data-action="mute"] img {
  width: calc(24px * var(--u));
  height: calc(24px * var(--u));
}
.media-shell.paused .film-start .pause-glyph {
  display: none;
}
.media-shell:not(.paused) .film-start .start-play-glyph {
  display: none;
}
.media-shell:not(.paused) .film-start {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}
.media-shell:not(.paused):hover .film-start,
.media-shell:not(.paused):focus-within .film-start {
  opacity: 1;
  pointer-events: auto;
}
.film-controlbar .fullscreen-glyph {
  position: relative;
  display: block;
  width: calc(24px * var(--control-u));
  height: calc(24px * var(--control-u));
  transform: none;
}
.film-controlbar .fullscreen-glyph .full-open,
.film-controlbar .fullscreen-glyph .full-exit {
  position: absolute;
  inset: 0;
}
.film-controlbar .fullscreen-glyph .full-exit,
.film-controlbar [data-action="fullscreen"].is-fullscreen .full-open {
  display: none;
}
.film-controlbar [data-action="fullscreen"].is-fullscreen .full-exit {
  display: block;
}
.film-controlbar [data-action="fullscreen"] .full-top,
.film-controlbar [data-action="fullscreen"] .full-bottom {
  position: absolute;
  left: 0;
  width: calc(24px * var(--control-u));
  height: calc(6px * var(--control-u));
  object-fit: fill;
}
.film-controlbar [data-action="fullscreen"] .full-top {
  top: 0;
}
.film-controlbar [data-action="fullscreen"] .full-bottom {
  top: auto;
  bottom: 0;
}
.film-controlbar button:hover {
  opacity: 0.75;
}
.film-controlbar [data-action="mute"].is-muted .sound-glyph {
  width: calc(16.5px * var(--u));
  height: calc(24px * var(--u));
  transform: none;
}
.film:has(.film-expanded) {
  z-index: 10001;
  isolation: auto;
}
.media-shell.film-expanded {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 10002;
  background: #000;
}
.film-fullscreen-fallback {
  overflow: hidden;
}
.film-fullscreen-fallback #header {
  visibility: hidden;
}
.mobile-composition video {
  object-fit: cover;
}

/* Figma 1672:6066, 1440px frame: 20px icons, 45px timestamp/track gaps. */
.film-controlbar {
  display: block;
  height: calc(72px * var(--u));
  padding: 0;
  gap: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.45));
  font-family: "IBM Plex Mono", monospace;
  font-size: calc(16px * var(--u));
  line-height: calc(24px * var(--u));
  font-weight: 400;
}
.film-controlbar button {
  position: absolute;
  bottom: calc(20px * var(--u));
  width: calc(36px * var(--u));
  height: calc(36px * var(--u));
  padding: calc(8px * var(--u));
}
.film-controlbar [data-action="mute"] {
  left: calc(31px * var(--u));
}
.film-controlbar [data-action="fullscreen"] {
  right: calc(35px * var(--u));
}
.film-controlbar time {
  position: absolute;
  bottom: calc(24px * var(--u));
  display: block;
  min-width: calc(45px * var(--u));
  width: calc(45px * var(--u));
  height: calc(24px * var(--u));
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.film-controlbar .elapsed {
  left: calc(129px * var(--u));
}
.film-controlbar .duration {
  right: calc(129px * var(--u));
}
.film-progress {
  position: absolute;
  left: calc(219px * var(--u));
  right: calc(219px * var(--u));
  bottom: calc(24px * var(--u));
  width: auto;
  height: calc(24px * var(--u));
}
.film-progress-track {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: calc(8px * var(--u));
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.3);
  pointer-events: none;
}
.film-progress-fill {
  display: block;
  width: var(--progress, 0%);
  height: 100%;
  background: #fff;
}
.film-progress input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  min-width: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
  accent-color: auto;
}
.film-progress input::-webkit-slider-runnable-track {
  height: 100%;
  background: transparent;
}
.film-progress input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1px;
  height: 100%;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.film-progress input::-moz-range-track {
  height: 100%;
  background: transparent;
  border: 0;
}
.film-progress input::-moz-range-thumb {
  width: 1px;
  height: 100%;
  border: 0;
  background: transparent;
}
@media (max-width: 1279px) {
  .film-controlbar {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 48px;
    padding: 0 8px;
    font-size: 12px;
    line-height: 18px;
  }
  .film-controlbar button,
  .film-controlbar time,
  .film-progress {
    position: static;
    left: auto;
    right: auto;
    bottom: auto;
  }
  .film-controlbar button {
    width: 30px;
    height: 30px;
    padding: 3px;
  }
  .film-controlbar [data-action="mute"] img {
    width: 24px;
    height: 24px;
  }
  .film-controlbar [data-action="mute"].is-muted .sound-glyph {
    width: 16.5px;
    height: 24px;
  }
  .film-controlbar time {
    height: auto;
    width: auto;
    min-width: 42px;
  }
  .film-progress {
    position: relative;
    flex: 1;
    width: auto;
    height: 24px;
    min-width: 30px;
  }
  .film-progress-track {
    height: 4px;
  }
}

/* Autoplay presentations expose only their sound switch, with no transport bar. */
.ambient-sound {
  position: absolute;
  z-index: 3;
  left: 8px;
  bottom: 8px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  mix-blend-mode: normal;
  cursor: pointer;
  opacity: 1;
}
.ambient-sound .sound-glyph {
  position: relative;
  display: block;
  width: 20px;
  height: 20px;
}
.ambient-sound .sound-glyph img {
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  object-fit: contain;
}
.ambient-sound .sound-off-overlay {
  width: 13.75px !important;
}
.ambient-sound .sound-off,
.ambient-sound.is-muted .sound-on { display: none; }
.ambient-sound.is-muted .sound-off { display: block; }
.ambient-sound:hover { opacity: 1; }
.ambient-sound:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* The navigation stays available, but its brand signature belongs to the top of the page. */
/* Reveal after the final credit line leaves; keep the return glyph unboxed. */
.header-back {
  position: absolute;
  left: var(--back-left, 8px);
  top: var(--back-top, 24px);
  width: var(--back-width, 48px);
  height: var(--back-height, 44px);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background: transparent;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;
}
.header-back img {
  width: var(--back-iconWidth, 48px);
  height: var(--back-iconHeight, 24px);
  object-fit: contain;
}
.header-back.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
.header-back.is-white img {
  filter: invert(1);
}
.has-floating-back #header .header-logo {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.menu-open .header-back {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .header-back {
    transition: none;
    transform: none;
  }
}
body.scrolled .header-logo {
  opacity: 0;
  pointer-events: none;
}
.header-logo {
  transition: opacity 0.16s ease;
}
@media (max-width: 1279px) {
  #header .header-logo {
    top: 50%;
    transform: translateY(-50%);
  }
  body.scrolled .header-logo {
    opacity: 1;
    pointer-events: auto;
  }
}

/* Exact vector artwork exported from the Figma footer component. */
.footer-mark,
.footer-word {
  object-fit: contain;
}
.footer-word {
  filter: invert(1);
}
.dark .footer-word {
  filter: none;
}

/* About uses the dark colorway throughout, including its open navigation. */
.dark #menu {
  color: #fff;
}
.dark .menu-panel {
  background: #0c0c0c;
  border-color: #242424;
}
.dark .menu-close {
  background: #1d1d1d;
}
.dark .menu-close img {
  filter: invert(1);
}

/* Desktop About: pin the media through the footer as well.
   Inline-size containment would otherwise anchor fixed media to the article. */
@media (min-width: 1280px) {
  .about-fixed-footer .page-shell.about {
    container-type: normal;
    --about-media-offset: calc(16px * min(var(--u), 1));
  }
  .about-fixed-footer .about .about-visual[data-node="362:23375"] {
    position: fixed;
    top: 0;
    /* Match the footer mark's capped scale: its center stays at 50%,
       and the media begins 16 design pixels to its right. */
    left: calc(50% + var(--about-media-offset));
    right: 0;
    width: auto;
    height: 100dvh;
    z-index: 0;
  }
  .about-fixed-footer .about .design-text {
    z-index: 1;
  }
  .about-fixed-footer .about .design-text[data-node="362:23390"],
  .about-fixed-footer .about .design-text[data-node="2084:17138"] {
    /* Chinese and English copy share a right edge, 32 design pixels
       before the media, using the same scale as the footer mark. */
    width: calc(50% - 251px * var(--u) - var(--about-media-offset));
  }
  .about-fixed-footer .site-footer {
    background: transparent;
    z-index: 3;
    pointer-events: none;
  }
  .about-fixed-footer .site-footer a,
  .about-fixed-footer .site-footer button {
    pointer-events: auto;
  }
  .about-fixed-footer .site-footer .footer-meta > :last-child {
    text-shadow: 0 1px 4px #000, 0 0 12px #000;
  }
}

.about-tile {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  isolation: isolate;
  background: #0c0c0c;
  background-image: url('/assets/about/office-poster.webp');
  background-size: cover;
  background-position: center;
  touch-action: pan-y;
}
.about-tile video,
.about-tile canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.about-tile video { z-index: 0; }
.about-tile canvas { z-index: 1; visibility: hidden; }
.about-tile.ready canvas { visibility: visible; }
/* Keep the decoder's native surface alive beneath the opaque effect canvas.
   Hiding it can make mobile video textures black even after loadeddata. */
.about-tile.ready video { visibility: visible; }
.about-tile-status {
  position: absolute;
  z-index: 2;
  bottom: 16px;
  left: 16px;
  max-width: calc(100% - 32px);
  padding: 8px 12px;
  color: #fff;
  background: #0c0c0ccc;
  border: 0;
  font-size: 12px;
}
.about-tile-status[hidden] { display: none; }
@media (max-width: 1279px) {
  .mobile-detail-composition:has(.about-visual) { aspect-ratio: 3 / 4 !important; }
  .mobile-detail-composition .about-visual {
    inset: 0;
    width: 100%;
    height: 100%;
  }
}

/* Keyboard focus is indicated by the button fill, without a border around the icon. */
.menu-trigger:focus-visible,
.menu-close:focus-visible {
  outline: 0;
  box-shadow: none;
  background: #e8e8e8;
}
.dark .menu-trigger:focus-visible,
.dark .menu-close:focus-visible {
  background: #303030;
}

/* Dissolve decoded menu photos above the veil, never replacing them with an empty frame. */
.menu-preview {
  opacity: 0;
  transition: opacity var(--menu-preview-fade, 150ms) ease-out;
}
.menu-preview.is-visible {
  opacity: 1;
}
.menu-preview img {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--menu-preview-fade, 150ms) ease-out;
}
.menu-preview img.is-current {
  opacity: 1;
}

/* Scroll-linked alternatives from the two non-page Figma storyboards. */
.story-gallery-layer {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.story-gallery-layer[hidden] {
  display: none;
}
.story-gallery-stage {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.18s ease,
    visibility 0s linear 0.18s;
}
.story-gallery-stage.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.18s ease;
}
.story-gallery-stage img {
  position: absolute;
  display: block;
  object-fit: contain;
}

/* Figma's one-percent character spacing applies to live type throughout the site. */
:root,
button,
input {
  letter-spacing: 0.01em;
}
.design-text,
.pbrmax-color-copy {
  letter-spacing: 0.01em;
}

/* One compact Figma footer for every page, capped at its 1440px design size. */
.site-footer {
  z-index: 3;
  background: var(--paper);
  color: var(--ink);
  /* Figma 969:19802: both footer colorways use 12px / -2% tracking. */
  font-family: "IBM Plex Mono", monospace;
  font-weight: 400;
  letter-spacing: -0.02em;
}
.footer-home {
  position: absolute;
  display: block;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 24px;
}
.footer-home .footer-mark {
  position: static;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: invert(1);
}
.dark .footer-home .footer-mark {
  filter: none;
}
.site-footer .footer-meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  bottom: auto;
  white-space: nowrap;
}
.site-footer .footer-top {
  left: 50%;
  transform: translateX(-50%) rotate(90deg);
}
@media (min-width: 1440px) {
  .design-section {
    height: calc(var(--content-end) * var(--u) * 1px + var(--footer-gap) * 1px);
  }
}
@media (min-width: 1280px) {
  .site-footer {
    --footer-u: min(var(--u), 1);
    height: calc(256px * var(--footer-u));
    font-size: calc(12px * var(--footer-u));
  }
  .site-footer .footer-home {
    top: calc(40px * var(--footer-u));
    width: calc(48px * var(--footer-u));
    height: calc(24px * var(--footer-u));
  }
  .site-footer .footer-top {
    top: calc(160px * var(--footer-u));
    width: calc(48px * var(--footer-u));
    height: calc(48px * var(--footer-u));
    padding: 0;
  }
  .site-footer .footer-meta {
    left: calc(8px * var(--footer-u));
    right: calc(8px * var(--footer-u));
    top: calc(192px * var(--footer-u));
  }
}
@media (max-width: 1279px) {
  .site-footer {
    height: 228px;
    font-size: 10px;
    padding: 0 20px;
  }
  .site-footer .footer-home {
    top: 24px;
  }
  .site-footer .footer-top {
    top: 88px;
    width: 48px;
    height: 48px;
    padding: 0;
  }
  .site-footer .footer-meta {
    left: 20px;
    right: 20px;
    top: 150px;
    grid-template-columns: none;
    gap: 0;
  }
}
@media (max-width: 1279px) {
  .design-text,
  .mobile-detail-composition .design-text {
    letter-spacing: 0.01em !important;
  }
}

/* Images and icon artwork should never become draggable browser ghosts. */
.site-footer .footer-filing {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: inherit;
  font-size: inherit;
  line-height: 16px;
  white-space: nowrap;
}
.site-footer .footer-icp {
  color: inherit;
  text-decoration: none;
  pointer-events: auto;
}
.site-footer .footer-icp:hover,
.site-footer .footer-icp:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (min-width: 1280px) {
  .site-footer .footer-filing {
    bottom: calc(16px * var(--footer-u));
    line-height: calc(16px * var(--footer-u));
  }
}
@media (max-width: 1279px) {
  .site-footer .footer-filing {
    flex-direction: column;
    gap: 0;
  }
}

img,
svg,
video {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}
::selection {
  background: #000000;
  color: #fff;
}
::-moz-selection {
  background: #000000;
  color: #fff;
}
.dark ::selection {
  background: #fff;
  color: #000000;
}
.dark ::-moz-selection {
  background: #fff;
  color: #000000;
}