@font-face {
  font-family: "Pixelify Sans";
  src: url("./assets/fonts/PixelifySans-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Inter Local";
  src: url("./assets/fonts/Inter-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Inter Local";
  src: url("./assets/fonts/Inter-SemiBold.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "MiSans Local";
  src: url("./assets/fonts/MiSans-Normal.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "MiSans Local";
  src: url("./assets/fonts/MiSans-ExtraLight.ttf") format("truetype");
  font-style: normal;
  font-weight: 200;
  font-display: swap;
}

@font-face {
  font-family: "Unbounded Local";
  src: url("./assets/fonts/Unbounded-Variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
}

@font-face {
  font-family: "Portfolio Display";
  src: url("./assets/fonts/AlimamaShuHeiTi-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Alimama FangYuan Local";
  src: url("./assets/fonts/AlimamaFangYuanTiVF.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
}

@font-face {
  font-family: "BiaoXiaoZhi Wujiehei";
  src: url("./assets/fonts/BiaoXiaoZhi-WuJieHei.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Lemi XiangSu Local";
  src: url("./assets/fonts/LemiXiangSuTi-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "MiSans Local";
  src: url("./assets/fonts/MiSans-Semibold.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

:root {
  --paper: #fafafa;
  --ink: #000;
  --cyan: #2fb9ec;
  --handle: #4fbbe0;
  --handle-border: #4b4d4f;
  --stage-width: min(100vw, 1920px);
}

.site-loader {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #000;
  background:
    linear-gradient(rgba(0, 0, 0, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.045) 1px, transparent 1px),
    #fafafa;
  background-size: 64px 64px;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.65s;
}

.site-loader::after {
  content: "";
  position: absolute;
  inset: auto -10% -42% -10%;
  height: 62%;
  background: radial-gradient(ellipse at center, rgba(47, 185, 236, 0.3), rgba(47, 185, 236, 0) 68%);
  pointer-events: none;
}

.site-loader__inner {
  position: relative;
  z-index: 1;
  width: min(560px, calc(100vw - 96px));
}

.site-loader__eyebrow,
.site-loader__status {
  margin: 0;
  font: 600 13px/1.2 "Inter Local", Arial, sans-serif;
  letter-spacing: 0.18em;
}

.site-loader__title {
  margin: 15px 0 24px;
  font: 400 clamp(64px, 7vw, 116px)/0.82 "Pixelify Sans", monospace;
  letter-spacing: -0.055em;
}

.site-loader__track {
  width: 100%;
  height: 5px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.12);
}

.site-loader__bar {
  display: block;
  width: 100%;
  height: 100%;
  background: #2fb9ec;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.site-loader__status {
  margin-top: 12px;
  text-align: right;
}

body.site-loading {
  overflow: hidden;
}

body.site-loading > :not(.site-loader) {
  visibility: hidden;
}

body.site-ready .portfolio-pages {
  animation: site-content-enter 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

body.site-ready .site-loader {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@keyframes site-content-enter {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-loader,
  .site-loader__bar {
    transition-duration: 0.01ms;
  }

  body.site-ready .portfolio-pages {
    animation: none;
  }
}

* {
  box-sizing: border-box;
}

html {
  background: #000;
  scroll-behavior: smooth;
  scroll-snap-type: none;
}

body {
  min-width: 0;
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background: #000;
  font-family: "MiSans Local", "PingFang SC", "Microsoft YaHei", sans-serif;
}

.color-bends {
  position: fixed;
  z-index: 0;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: #000;
}

img {
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

.hero {
  position: relative;
  width: var(--stage-width);
  aspect-ratio: 1920 / 1144;
  margin: 0 auto;
  overflow: hidden;
  background: var(--paper);
  isolation: isolate;
  scroll-snap-align: start;
  scroll-snap-stop: normal;
}

.portfolio-pages {
  position: relative;
  z-index: 1;
  width: 100%;
}

.portfolio-pages::after {
  content: "";
  display: block;
  width: var(--stage-width);
  height: max(0px, calc(100vh - min(59.583333vw, 1144px)));
  margin: 0 auto;
  background: var(--paper);
}

.background-art,
.hero-content {
  position: absolute;
  inset: 0;
}

.hero-content {
  z-index: 2;
}

.interactive-layer {
  --shift-x: 0px;
  --shift-y: 0px;
  --hover-scale: 1;
  transform: translate3d(var(--shift-x), var(--shift-y), 0) scale(var(--hover-scale));
  transition: transform 280ms cubic-bezier(0.2, 0.75, 0.2, 1), filter 220ms ease, box-shadow 220ms ease;
  will-change: transform;
}

.background-art {
  z-index: -1;
  overflow: hidden;
}

.sticker-rain {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  will-change: opacity, filter;
}

.sticker-rain.is-offscreen .falling-sticker {
  animation-play-state: paused;
}

.falling-sticker {
  position: absolute;
  top: -20%;
  left: var(--left);
  width: var(--size);
  opacity: 0;
  animation: sticker-fall var(--duration) linear var(--delay) infinite;
  will-change: top, transform, opacity;
}

.falling-sticker img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 min(0.260417vw, 5px) min(0.364583vw, 7px) rgb(0 0 0 / 13%));
  transform-origin: center;
  transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1), filter 220ms ease;
}

.falling-sticker.is-hovered {
  z-index: 3;
  animation-play-state: paused;
}

.falling-sticker.is-hovered img {
  filter: drop-shadow(0 min(0.520833vw, 10px) min(0.729167vw, 14px) rgb(0 0 0 / 24%));
  transform: scale(1.16) rotate(-4deg);
}

body.sticker-hovering {
  cursor: pointer;
}

.falling-sticker.is-pressed img {
  transform: scale(1.08) rotate(3deg);
}

@keyframes sticker-fall {
  0% {
    top: -20%;
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(var(--rotate-start));
  }
  4% { opacity: 0.96; }
  48% {
    transform: translate3d(var(--drift-mid), 0, 0) rotate(var(--rotate-mid));
  }
  94% { opacity: 0.96; }
  100% {
    top: 115%;
    opacity: 0;
    transform: translate3d(var(--drift-end), 0, 0) rotate(var(--rotate-end));
  }
}

.background-grid {
  position: absolute;
  top: -29.108%;
  left: -3.438%;
  width: 104.609%;
  height: 170.455%;
}

.hello-stripe {
  position: absolute;
  width: 101.563%;
  height: 34.135%;
  opacity: 0.9;
  transform: rotate(90deg);
}

.hello-stripe-a {
  top: 18.6%;
  left: 39.6%;
}

.hello-stripe-b {
  top: 18.6%;
  left: 66.5%;
}

.hello-script {
  position: absolute;
  top: 21.7%;
  left: -1.8%;
  width: 103.2%;
  height: 56.3%;
  transform: rotate(-13.03deg);
  opacity: 0.96;
}

.signature {
  position: absolute;
  top: 28.06%;
  left: 45.409%;
  width: 9.152%;
  height: 5.615%;
}

.signature:hover {
  --hover-scale: 1.035;
  filter: drop-shadow(0 min(0.3125vw, 6px) min(0.520833vw, 10px) rgb(0 0 0 / 12%));
}

.portrait-badge {
  position: absolute;
  top: 26.224%;
  left: 57.24%;
  width: 3.75%;
  aspect-ratio: 1;
  margin: 0;
}

.portrait-badge__shape {
  position: absolute;
  inset: 0;
  border-radius: 50% 50% 50% 0;
  background: var(--cyan);
}

.portrait-badge img {
  position: absolute;
  top: 7.014%;
  left: 7.014%;
  width: 85.965%;
  height: 85.965%;
  border: clamp(1px, 0.15625vw, 3px) solid var(--cyan);
  border-radius: 50%;
  object-fit: cover;
  object-position: center 82%;
}

.portrait-badge:hover {
  --hover-scale: 1.08;
}

.title-selection {
  position: absolute;
  top: 36.451%;
  left: 26.927%;
  width: 46.094%;
  height: 15.734%;
  border: clamp(1px, 0.15625vw, 3px) solid var(--cyan);
  background: linear-gradient(125deg, rgb(255 255 255 / 42%) 0%, rgb(255 255 255 / 12%) 38%, rgb(47 185 236 / 5%) 72%, rgb(255 255 255 / 28%) 100%);
  box-shadow: inset 0 min(0.104167vw, 2px) 0 rgb(255 255 255 / 72%), inset 0 min(-0.052083vw, -1px) 0 rgb(47 185 236 / 18%), 0 min(0.625vw, 12px) min(1.5625vw, 30px) rgb(24 87 110 / 5%);
  backdrop-filter: blur(min(0.15625vw, 3px)) saturate(1.16);
  -webkit-backdrop-filter: blur(min(0.15625vw, 3px)) saturate(1.16);
}

.title-selection::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background: linear-gradient(108deg, transparent 12%, rgb(255 255 255 / 34%) 31%, transparent 48%);
  background-size: 220% 100%;
  background-position: 100% 0;
  pointer-events: none;
  transition: background-position 520ms ease;
}

.title-selection:hover {
  --hover-scale: 1.008;
  box-shadow: 0 0 0 min(0.15625vw, 3px) rgb(47 185 236 / 12%), 0 min(0.416667vw, 8px) min(1.25vw, 24px) rgb(47 185 236 / 8%);
}

.title-selection:hover::after {
  background-position: 0 0;
}

.title-selection:hover .selection-handle {
  background: #80d8f5;
}

.title-selection h1 {
  position: absolute;
  top: -1.2%;
  left: 6.1%;
  margin: 0;
  font-family: "Pixelify Sans", monospace;
  font-size: min(9.101vw, 174.74px);
  font-weight: 400;
  line-height: 1.03;
  letter-spacing: min(-0.091vw, -1.7474px);
  white-space: nowrap;
  z-index: 1;
  color: #000;
}

.closing-screen .title-selection h1 {
  left: 50%;
  transform: translateX(-50%);
}

.selection-handle {
  position: absolute;
  z-index: 2;
  width: 2.034%;
  aspect-ratio: 1;
  border: clamp(1px, 0.104167vw, 2px) solid var(--handle-border);
  background: var(--handle);
}

.handle-tl { top: -6.7%; left: -1.15%; }
.handle-tr { top: -6.7%; right: -1.15%; }
.handle-bl { bottom: -6.7%; left: -1.15%; }
.handle-br { right: -1.15%; bottom: -6.7%; }

.report-line {
  position: absolute;
  top: 55.245%;
  left: 37.5%;
  display: flex;
  align-items: center;
  gap: min(0.729167vw, 14px);
  margin: 0;
  font-family: "Inter Local", sans-serif;
  font-size: min(1.077vw, 20.677px);
  font-weight: 600;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: min(0.1615vw, 3.1015px);
  white-space: nowrap;
}

.report-line img {
  width: min(1.041667vw, 20px);
  height: min(1.041667vw, 20px);
}

.floating-label {
  position: absolute;
  display: block;
  color: #000;
  filter: drop-shadow(0 min(0.260417vw, 5px) min(0.416667vw, 8px) rgb(0 0 0 / 11%));
}

.floating-label::after {
  content: none;
}

.floating-label__pill,
.floating-label__arrow {
  position: absolute;
  width: 100%;
  height: 100%;
}

.floating-label span {
  position: absolute;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "MiSans Local", sans-serif;
  font-size: min(1.199vw, 23.018px);
  line-height: 1.25;
  white-space: nowrap;
}

.review-label {
  top: 69.406%;
  left: 17.865%;
  width: 13.512%;
  height: 7.211%;
}

.review-label .floating-label__pill {
  top: 14.8%;
  left: 0.6%;
  width: 82.23%;
  height: 70.4%;
  transform: rotate(6.68deg);
}

.review-label span {
  top: 19.4%;
  left: 5.4%;
  width: 72.87%;
  height: 59.52%;
  transform: rotate(6.22deg);
}

.review-label .floating-label__arrow {
  top: 8.3%;
  right: 0;
  width: 12.58%;
  height: 36.45%;
  transform: rotate(-1.24deg);
}

.portfolio-label {
  top: 58.916%;
  left: 73.438%;
  width: 9.384%;
  height: 7.034%;
}

.portfolio-label .floating-label__pill {
  top: 16.5%;
  right: 0;
  width: 79.94%;
  height: 74.65%;
  transform: rotate(173.32deg) scaleY(-1);
}

.portfolio-label span {
  top: 29.3%;
  right: 15.2%;
  width: 51.47%;
  height: 48.68%;
  color: var(--paper);
  transform: rotate(-6.62deg);
}

.portfolio-label .floating-label__arrow {
  top: 0;
  left: 0;
  width: 18.15%;
  height: 37.38%;
  transform: rotate(-178.76deg) scaleY(-1);
}

.floating-label:hover,
.floating-label:focus-visible {
  --hover-scale: 1.055;
  filter: drop-shadow(0 min(0.364583vw, 7px) min(0.520833vw, 10px) rgb(0 0 0 / 18%));
  outline: none;
}

.floating-label:hover .floating-label__arrow,
.floating-label:focus-visible .floating-label__arrow {
  animation: arrow-nudge 620ms ease-in-out infinite alternate;
}

@keyframes arrow-nudge {
  to { translate: min(0.208333vw, 4px) min(-0.104167vw, -2px); }
}

.site-header {
  position: fixed;
  z-index: 10;
  top: min(1.145833vw, 22px);
  left: 50%;
  width: var(--stage-width);
  height: min(3.958333vw, 76px);
  transform: translateX(-50%);
  overflow: visible;
  font-family: "MiSans Local", "PingFang HK", "PingFang SC", sans-serif;
}

.intro-screen {
  position: relative;
  width: var(--stage-width);
  aspect-ratio: 1920 / 1144;
  margin: 0 auto;
  overflow: visible;
  background: var(--paper);
  isolation: isolate;
  scroll-snap-align: start;
  scroll-snap-stop: normal;
}

.intro-background {
  z-index: -1;
}

.intro-badge-art {
  position: absolute;
  z-index: 3;
  top: -13.986%;
  left: 1.302%;
  width: 34.844%;
  height: 99.825%;
  margin: 0;
  overflow: visible;
  filter: drop-shadow(0 min(0.625vw, 12px) min(1.302083vw, 25px) rgb(0 0 0 / 8%));
  opacity: var(--badge-opacity, 0);
  transform: translate3d(0, var(--badge-y, min(3.125vw, 60px)), 0);
  transition: filter 220ms ease;
  will-change: opacity, transform;
  perspective: min(62.5vw, 1200px);
  cursor: grab;
  touch-action: none;
}

.intro-badge-art img {
  position: absolute;
  top: 0;
  left: -12.08%;
  width: 124.17%;
  height: 109.11%;
  max-width: none;
  transform-origin: 52% 1%;
  transform: translate3d(var(--lanyard-x, 0px), var(--lanyard-y, 0px), 0) rotate(var(--lanyard-angle, 0deg)) rotateY(var(--lanyard-tilt, 0deg));
  user-select: none;
  -webkit-user-drag: none;
  will-change: transform;
}

.intro-badge-art.is-dragging {
  cursor: grabbing;
}

.intro-badge-art:hover {
  filter: drop-shadow(0 min(0.885417vw, 17px) min(1.822917vw, 35px) rgb(0 0 0 / 14%));
}

.intro-copy {
  position: absolute;
  z-index: 2;
  top: 26.486%;
  left: 37.813%;
  width: 58.333%;
}

.intro-copy h2 {
  margin: 0;
  font-family: "Alimama FangYuan Local", "Portfolio Display", "MiSans Local", sans-serif;
  font-size: min(4.91vw, 94.271px);
  font-weight: 700;
  font-variation-settings: "wght" 700, "BEVL" 1;
  line-height: 1.15;
  letter-spacing: min(0.098198vw, 1.8854px);
  white-space: nowrap;
  opacity: var(--title-opacity, 0);
  filter: blur(var(--title-blur, min(0.416667vw, 8px)));
  transform: translate3d(0, var(--title-y, min(2.083333vw, 40px)), 0);
  will-change: opacity, filter, transform;
}

.intro-copy h2 span {
  display: block;
}

.intro-body {
  width: 100%;
  margin-top: min(1.051vw, 20.18px);
  color: #000;
  font-family: "MiSans Local", "PingFang SC", sans-serif;
  font-size: min(1.71875vw, 33px);
  font-weight: 200;
  line-height: min(3.229167vw, 62px);
  opacity: var(--body-opacity, 0);
  filter: blur(var(--body-blur, min(0.3125vw, 6px)));
  transform: translate3d(0, var(--body-y, min(1.5625vw, 30px)), 0);
  will-change: opacity, filter, transform;
}

.intro-body p {
  margin: 0;
}

.work-showcase {
  position: relative;
  width: var(--stage-width);
  aspect-ratio: 1920 / 3869;
  margin: 0 auto;
  overflow: hidden;
  background: var(--paper);
  isolation: isolate;
}

.showcase-grid,
.showcase-panel {
  position: absolute;
  inset: 0;
}

.showcase-grid {
  z-index: -1;
  overflow: hidden;
  background: var(--paper);
  pointer-events: none;
}

.showcase-grid img {
  position: absolute;
  left: -3.438%;
  width: 104.61%;
  max-width: none;
}

.showcase-grid__top {
  top: -12.277%;
  height: 40.114%;
}

.showcase-grid__repeat {
  height: 26.622%;
}

.showcase-grid__repeat--one { top: 27.837%; }
.showcase-grid__repeat--two { top: 54.458%; }
.showcase-grid__repeat--three { top: 81.081%; }

.showcase-panel {
  pointer-events: none;
}

.showcase-panel > * {
  pointer-events: auto;
}

.showcase-title {
  position: absolute;
  z-index: 2;
  width: 40.885%;
  margin: 0;
  font-family: "Alimama FangYuan Local", "Portfolio Display", "MiSans Local", sans-serif;
  font-size: min(5.325vw, 102.239px);
  font-weight: 700;
  font-variation-settings: "wght" 700, "BEVL" 1;
  line-height: 1.15;
  letter-spacing: min(0.1065vw, 2.0448px);
  white-space: nowrap;
}

.showcase-title span {
  display: block;
}

.showcase-title strong,
.showcase-title em {
  color: #00b5f3;
  font-style: normal;
  font-weight: inherit;
}

.showcase-panel--core .showcase-title {
  top: 3.05%;
  left: 4.0625%;
}

.showcase-panel--core .showcase-title strong {
  font-family: "Inter Local", "MiSans Local", sans-serif;
  font-weight: 600;
}

.showcase-panel--brand .showcase-title {
  top: 39.571%;
  left: 55.0521%;
}

.showcase-panel--assets .showcase-title {
  top: 71.699%;
  left: 4.0625%;
}

.showcase-signature {
  position: absolute;
  z-index: 3;
  width: 14.382%;
  height: auto;
  transform: rotate(-15.31deg);
  transform-origin: center;
  transition: transform 260ms cubic-bezier(.2, .8, .2, 1);
}

.showcase-signature--core {
  top: 4.11%;
  left: 52.7%;
}

.showcase-signature--brand {
  top: 41.484%;
  left: 36.65%;
}

.showcase-tag {
  position: absolute;
  z-index: 3;
  font-family: "MiSans Local", "PingFang SC", sans-serif;
  transition: transform 240ms ease, filter 240ms ease;
}

.showcase-tag__pill,
.showcase-tag__pill img,
.showcase-tag__arrow {
  position: absolute;
}

.showcase-tag__pill {
  display: block;
}

.showcase-tag__pill img {
  inset: 0;
  width: 100%;
  height: 100%;
}

.showcase-tag__text {
  position: absolute;
  display: grid;
  place-items: center;
  color: var(--paper);
  font-weight: 400;
  white-space: nowrap;
}

.showcase-tag--portfolio {
  top: 4.885%;
  left: 70.938%;
  width: 16.938%;
  height: 3.828%;
}

.showcase-tag--portfolio .showcase-tag__arrow {
  top: 0;
  left: 0;
  width: 18.14%;
  height: 37.82%;
  transform: rotate(-178.76deg) scaleY(-1);
}

.showcase-tag--portfolio .showcase-tag__pill {
  top: 6.68%;
  right: 0;
  width: 82%;
  height: 93.32%;
}

.showcase-tag--portfolio .showcase-tag__pill img {
  top: 10.86%;
  left: 1.96%;
  width: 96.08%;
  height: 78.29%;
  transform: rotate(173.32deg) scaleY(-1);
}

.showcase-tag--portfolio .showcase-tag__text {
  top: 29.66%;
  left: 33.31%;
  width: 51.33%;
  height: 49.01%;
  font-size: min(2.164vw, 41.55px);
  transform: rotate(-6.62deg);
}

.showcase-tag--review {
  top: 42.182%;
  left: 6.1458%;
  width: 22.848%;
  height: 3.725%;
}

.showcase-tag--review .showcase-tag__pill {
  top: 0;
  left: 0;
  width: 84.43%;
  height: 100%;
}

.showcase-tag--review .showcase-tag__pill img {
  top: 14.8%;
  left: 1.21%;
  width: 97.57%;
  height: 70.4%;
  transform: rotate(6.68deg);
}

.showcase-tag--review .showcase-tag__text {
  top: 19.4%;
  left: 5.41%;
  width: 72.82%;
  height: 59.4%;
  font-size: min(2.03vw, 38.97px);
  transform: rotate(6.22deg);
}

.showcase-tag--review .showcase-tag__arrow {
  top: 8.5%;
  right: 0;
  width: 12.61%;
  height: 36.45%;
  transform: rotate(-1.24deg);
}

.showcase-float:hover {
  filter: drop-shadow(0 min(0.417vw, 8px) min(0.833vw, 16px) rgb(0 0 0 / 14%));
}

.showcase-signature:hover {
  transform: rotate(-12deg) translateY(min(-0.313vw, -6px)) scale(1.035);
}

.showcase-tag:hover {
  transform: none;
}

.component-slot {
  position: absolute;
  z-index: 1;
  left: 3.594%;
  width: 92.813%;
  background: #d9d9d9;
  overflow: hidden;
}

.component-slot--core {
  top: 12.561%;
  height: 20.91%;
}

.component-slot--brand {
  top: 48.721%;
  height: 20.91%;
}

.component-slot--assets {
  top: 81.158%;
  height: 17.111%;
}

.flow-menu {
  width: 100%;
  height: 100%;
  overflow: hidden;
  color: #000;
  background: #fafafa;
  font-family: "MiSans Local", "Inter Local", sans-serif;
}

.flow-menu__nav {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.flow-menu__item {
  position: relative;
  flex: 1 1 25%;
  min-height: 0;
  overflow: hidden;
  text-align: center;
  border-top: min(0.052083vw, 1px) solid #fff;
}

.flow-menu__item:first-child {
  border-top: 0;
}

.flow-menu__link {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #000;
  font-size: min(2.5vw, 48px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: min(-0.052083vw, -1px);
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}

.flow-menu__link:focus-visible {
  outline: min(0.104167vw, 2px) solid #4fbbe0;
  outline-offset: min(-0.208333vw, -4px);
}

.flow-menu__marquee {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  color: #fff;
  background: #000;
  pointer-events: none;
  transform: translate3d(0, 101%, 0);
  transition: transform 600ms cubic-bezier(.16, 1, .3, 1);
  will-change: transform;
}

.flow-menu__marquee-clip {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.flow-menu__marquee-inner {
  display: flex;
  align-items: center;
  width: max-content;
  min-width: 100%;
  height: 100%;
  translate: 0 -101%;
  transition: translate 600ms cubic-bezier(.16, 1, .3, 1);
  will-change: transform, translate;
}

.flow-menu__item.is-active .flow-menu__marquee {
  transform: translate3d(0, 0, 0);
}

.flow-menu__item.is-active .flow-menu__marquee-inner {
  translate: 0 0;
}

.flow-menu__item.from-top .flow-menu__marquee,
.flow-menu__item.is-leaving-top .flow-menu__marquee {
  transform: translate3d(0, -101%, 0);
}

.flow-menu__item.from-top .flow-menu__marquee-inner,
.flow-menu__item.is-leaving-top .flow-menu__marquee-inner {
  translate: 0 101%;
}

.flow-menu__item.from-bottom .flow-menu__marquee,
.flow-menu__item.is-leaving-bottom .flow-menu__marquee {
  transform: translate3d(0, 101%, 0);
}

.flow-menu__item.from-bottom .flow-menu__marquee-inner,
.flow-menu__item.is-leaving-bottom .flow-menu__marquee-inner {
  translate: 0 -101%;
}

.flow-menu__item.is-active .flow-menu__marquee-inner {
  animation: flow-menu-scroll var(--flow-speed, 15s) linear infinite;
}

.flow-menu__part {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  height: 100%;
}

.flow-menu__part > span:first-child {
  padding: 0 min(1.042vw, 20px);
  color: #fff;
  font-size: min(2.5vw, 48px);
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.flow-menu__image {
  display: block;
  width: min(10.417vw, 200px);
  height: min(4.167vw, 80px);
  margin: 0 min(2.083vw, 40px);
  overflow: hidden;
  border-radius: min(2.604vw, 50px);
  background: #222;
}

.flow-menu__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@keyframes flow-menu-scroll {
  to { transform: translate3d(calc(-1 * var(--marquee-step, 0px)), 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .flow-menu__marquee,
  .flow-menu__marquee-inner {
    transition-duration: 1ms;
  }

  .flow-menu__item.is-active .flow-menu__marquee-inner {
    animation-play-state: paused;
  }
}

.showcase-avatar {
  position: absolute;
  z-index: 3;
  top: 72.37%;
  left: 41.198%;
  width: min(4.583vw, 88px);
  aspect-ratio: 1;
  border-radius: 0 50% 50% 50%;
  background: #2fb9ec;
  overflow: hidden;
}

.showcase-avatar img {
  position: absolute;
  inset: 7.02%;
  width: 85.96%;
  height: 85.96%;
  border: min(0.191vw, 3.667px) solid #2fb9ec;
  border-radius: 50%;
  object-fit: cover;
  object-position: bottom;
}

.showcase-mascot {
  position: absolute;
  z-index: 3;
  top: 68.363%;
  left: 68.229%;
  width: 23.349%;
  height: 13.608%;
  margin: 0;
  display: grid;
  place-items: center;
  filter: drop-shadow(min(-0.677vw, -13px) min(0.417vw, 8px) min(0.208vw, 4px) rgb(0 0 0 / 5%));
  transition: translate 280ms cubic-bezier(.2, .8, .2, 1);
  overflow: visible;
}

.showcase-mascot img {
  width: 84.8%;
  height: 90%;
  max-width: none;
  object-fit: contain;
  transform: rotate(165.18deg) scaleY(-1);
  transition: transform 280ms cubic-bezier(.2, .8, .2, 1);
}

.showcase-mascot:hover {
  translate: 0 0;
}

.motion-ready .scroll-reveal {
  opacity: 0;
  clip-path: inset(0 0 10% 0);
  transition: opacity 880ms cubic-bezier(.2, .75, .2, 1),
    clip-path 1100ms cubic-bezier(.16, 1, .3, 1),
    filter 1050ms cubic-bezier(.16, 1, .3, 1);
  transition-delay: 0ms;
  will-change: opacity, clip-path;
}

.motion-ready .scroll-reveal[data-reveal-kind="text"] {
  filter: blur(min(0.313vw, 6px));
}

.motion-ready .scroll-reveal.is-visible {
  opacity: 1;
  clip-path: inset(-12% -12% -12% -12%);
  filter: none;
  transition-delay: var(--reveal-delay, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  .motion-ready .scroll-reveal {
    opacity: 1;
    clip-path: none;
    filter: none;
    transition: none;
  }
}

.highlights-screen {
  position: relative;
  width: var(--stage-width);
  aspect-ratio: 1920 / 1144;
  margin: 0 auto;
  overflow: hidden;
  background: var(--paper);
  isolation: isolate;
  scroll-snap-align: start;
}

.highlights-background {
  position: absolute;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  background: var(--paper);
  pointer-events: none;
}

.highlights-background__grid {
  position: absolute;
  top: -29.108%;
  left: -3.438%;
  width: 104.609%;
  height: 170.455%;
  max-width: none;
}

.highlights-background__stripe {
  position: absolute;
  width: 101.563%;
  height: 34.135%;
  max-width: none;
  transform: rotate(90deg);
  transform-origin: center;
}

.highlights-background__stripe--one {
  top: 39.1%;
  left: 9.675%;
}

.highlights-background__stripe--two {
  top: 39.1%;
  left: 36.576%;
}

.reflection-card {
  --reflection-color: #2fb9ec;
  position: absolute;
  z-index: 1;
  top: 22.028%;
  width: 40.573%;
  height: 64.161%;
  border: min(0.15625vw, 3px) solid var(--reflection-color);
  background: rgb(250 250 250 / 18%);
  transition: background-color 260ms ease, box-shadow 260ms ease;
  animation: reflection-card-float 7.2s ease-in-out infinite;
}

.reflection-card--strength {
  left: 6.302%;
}

.reflection-card--improve {
  --reflection-color: #e21952;
  left: 53.177%;
  animation-delay: -3.6s;
}

.reflection-card:hover {
  background: rgb(255 255 255 / 34%);
  box-shadow: 0 min(0.625vw, 12px) min(1.563vw, 30px) rgb(0 0 0 / 5%);
}

.reflection-handle {
  position: absolute;
  z-index: 4;
  width: min(0.938vw, 18px);
  aspect-ratio: 1;
  border: min(0.104167vw, 2px) solid var(--handle-border);
  background: var(--reflection-color);
}

.reflection-handle--tl { top: min(-0.625vw, -12px); left: min(-0.625vw, -12px); }
.reflection-handle--tr { top: min(-0.625vw, -12px); right: min(-0.625vw, -12px); }
.reflection-handle--bl { bottom: min(-0.625vw, -12px); left: min(-0.625vw, -12px); }
.reflection-handle--br { right: min(-0.625vw, -12px); bottom: min(-0.625vw, -12px); }

.reflection-card h2 {
  position: absolute;
  top: 5.858%;
  left: 50%;
  margin: 0;
  color: #000;
  font-family: "Lemi XiangSu Local", "BiaoXiaoZhi Wujiehei", "Portfolio Display", "MiSans Local", sans-serif;
  font-size: min(7.659vw, 147.043px);
  font-weight: 400;
  line-height: 1.03;
  letter-spacing: min(-0.383vw, -7.3522px);
  white-space: nowrap;
  transform: translateX(-50%);
}

.reflection-underline {
  position: absolute;
  top: 30.205%;
  left: 22.145%;
  width: 59.307%;
  height: auto;
}

.reflection-card ul {
  position: absolute;
  inset: 39.373% auto auto 12.837%;
  display: flex;
  flex-direction: column;
  gap: min(5.23vw, 100.4px);
  width: 83%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.reflection-card li {
  display: flex;
  align-items: flex-start;
  gap: min(0.797vw, 15.294px);
  font-family: "MiSans Local", "PingFang SC", sans-serif;
  font-size: min(2.717vw, 52.164px);
  font-weight: 500;
  line-height: normal;
  letter-spacing: min(0.19vw, 3.6515px);
  white-space: nowrap;
  transition: translate 220ms cubic-bezier(.2, .8, .2, 1);
}

.reflection-card li img {
  flex: 0 0 auto;
  width: min(2.628vw, 50.456px);
  aspect-ratio: 1;
  margin-top: min(0.394vw, 7.57px);
  transition: transform 220ms cubic-bezier(.2, .8, .2, 1);
}

.reflection-card li:hover {
  translate: min(0.417vw, 8px) 0;
}

.reflection-card li:hover img {
  transform: rotate(8deg) scale(1.08);
}

.reflection-tag {
  position: absolute;
  z-index: 5;
  top: min(-3.803vw, -73px);
  left: 6.15%;
  width: min(10.9vw, 209.224px);
  height: min(6.1vw, 117.116px);
  transition: transform 220ms cubic-bezier(.2, .8, .2, 1);
}

.reflection-tag:hover {
  transform: translateY(min(-0.313vw, -6px)) rotate(-1deg);
}

.reflection-tag__pill,
.reflection-tag__arrow,
.reflection-tag span {
  position: absolute;
}

.reflection-tag__pill {
  top: 29.22%;
  left: 4.28%;
  width: 73.24%;
  height: 51.3%;
  transform: rotate(-6deg);
  transform-origin: center;
}

.reflection-tag span {
  top: 35.04%;
  left: 19.56%;
  display: grid;
  place-items: center;
  width: 45.25%;
  height: 33.44%;
  font-family: "MiSans Local", sans-serif;
  font-size: min(1.199vw, 23.018px);
  font-weight: 400;
  line-height: min(1.499vw, 28.773px);
  white-space: nowrap;
  transform: rotate(-6.46deg);
}

.reflection-tag__arrow {
  top: 0;
  left: 76.91%;
  width: 18.25%;
  height: 30.93%;
  transform: rotate(-13.92deg);
}

.reflection-tag--improve {
  top: min(-2.969vw, -57px);
  left: 6.47%;
  width: min(9.947vw, 190.987px);
  height: min(5.663vw, 108.733px);
}

.reflection-tag--improve .reflection-tag__pill {
  top: 28.25%;
  left: 4.75%;
  width: 75.34%;
  height: 55.25%;
  transform: rotate(-3.03deg);
}

.reflection-tag--improve span {
  top: 35.87%;
  left: 21.47%;
  width: 45.74%;
  height: 33.92%;
  color: var(--paper);
  transform: rotate(-5.41deg);
}

.reflection-tag--improve .reflection-tag__arrow {
  top: 0;
  left: 76.18%;
  width: 19.4%;
  height: 32.12%;
  transform: rotate(-10.95deg);
}

@keyframes reflection-card-float {
  0%, 100% { translate: 0 0; }
  35% { translate: min(0.156vw, 3px) min(-0.469vw, -9px); }
  68% { translate: min(-0.104vw, -2px) min(0.26vw, 5px); }
}

@media (prefers-reduced-motion: reduce) {
  .reflection-card,
  .reflection-card li,
  .reflection-card li img,
  .reflection-tag {
    transition: none;
  }

  .reflection-card {
    animation: none;
  }
}

.h2-plan-screen {
  position: relative;
  width: var(--stage-width);
  aspect-ratio: 1920 / 956;
  margin: 0 auto;
  overflow: hidden;
  background: var(--paper);
  isolation: isolate;
  scroll-snap-align: start;
}

.h2-plan-background {
  position: absolute;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  background: var(--paper);
  pointer-events: none;
}

.h2-plan-background__grid {
  position: absolute;
  top: -34.833%;
  left: -3.438%;
  width: 104.609%;
  height: 203.975%;
  max-width: none;
}

.h2-plan-background__stripe {
  position: absolute;
  top: 46.73%;
  width: 101.563%;
  height: 40.847%;
  max-width: none;
  transform: rotate(90deg);
  transform-origin: center;
}

.h2-plan-background__stripe--one { left: 9.675%; }
.h2-plan-background__stripe--two { left: 36.576%; }

.magic-plan-grid {
  position: absolute;
  inset: 0;
  overflow: hidden;
  perspective: min(83.333vw, 1600px);
}

.magic-plan-card {
  --glow-x: 50%;
  --glow-y: 50%;
  --glow-intensity: 0;
  --glow-radius: min(38.021vw, 730px);
  --magnet-x: 0px;
  --magnet-y: 0px;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --glass-refraction: .97;
  --glass-depth: .49;
  --glass-light: .8;
  position: absolute;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: visible;
  border: min(0.052083vw, 1px) solid #2fb9ec;
  border-radius: 0;
  color: #1e1e1e;
  /* Figma GLASS: radius 6, depth 49, light 315deg/0.8, dispersion 1. */
  background: rgb(0 0 0 / .4%);
  box-shadow:
    inset min(0.052083vw, 1px) min(0.052083vw, 1px) 0 rgb(255 255 255 / calc(var(--glass-light) * .5)),
    inset min(-0.052083vw, -1px) min(-0.052083vw, -1px) 0 rgb(47 185 236 / calc(var(--glass-depth) * .18)),
    inset 0 0 min(0.521vw, 10px) rgb(255 255 255 / calc(var(--glass-refraction) * .055));
  backdrop-filter:
    blur(min(0.313vw, 6px))
    saturate(calc(1 + var(--glass-refraction) * .08))
    contrast(calc(1 + var(--glass-refraction) * .025))
    brightness(calc(1 + var(--glass-light) * .018));
  -webkit-backdrop-filter:
    blur(min(0.313vw, 6px))
    saturate(calc(1 + var(--glass-refraction) * .08))
    contrast(calc(1 + var(--glass-refraction) * .025))
    brightness(calc(1 + var(--glass-light) * .018));
  transform: perspective(min(62.5vw, 1200px)) translate3d(var(--magnet-x), var(--magnet-y), 0) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transform-style: preserve-3d;
  transition: transform 180ms ease, box-shadow 260ms ease, background-color 260ms ease;
  will-change: transform;
  cursor: pointer;
}

.magic-plan-card::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background:
    linear-gradient(
      135deg,
      rgb(255 255 255 / calc(var(--glass-light) * .14)) 0%,
      rgb(255 255 255 / calc(var(--glass-refraction) * .035)) 18%,
      transparent 43%,
      rgb(79 187 224 / calc(var(--glass-refraction) * .035)) 100%
    ),
    radial-gradient(
      var(--glow-radius) circle at var(--glow-x) var(--glow-y),
      rgb(47 185 236 / calc(var(--glow-intensity) * 0.11)) 0%,
      rgb(47 185 236 / calc(var(--glow-intensity) * 0.055)) 34%,
      transparent 68%
    );
  mix-blend-mode: screen;
  pointer-events: none;
}

.magic-plan-card::after {
  content: "";
  position: absolute;
  z-index: 4;
  inset: 0;
  padding: min(0.313vw, 6px);
  border-radius: inherit;
  background: radial-gradient(
    var(--glow-radius) circle at var(--glow-x) var(--glow-y),
    rgb(47 185 236 / calc(var(--glow-intensity) * 0.8)) 0%,
    rgb(47 185 236 / calc(var(--glow-intensity) * 0.42)) 30%,
    transparent 60%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

.magic-plan-card:hover,
.magic-plan-card:focus-visible {
  background: rgb(255 255 255 / 1.2%);
  box-shadow:
    0 min(0.417vw, 8px) min(1.302vw, 25px) rgb(0 0 0 / 12%),
    0 0 min(1.563vw, 30px) rgb(47 185 236 / 20%),
    inset min(0.052083vw, 1px) min(0.052083vw, 1px) 0 rgb(255 255 255 / 72%),
    inset min(-0.052083vw, -1px) min(-0.052083vw, -1px) 0 rgb(47 185 236 / 20%);
}

.magic-plan-card:focus-visible {
  outline: min(0.104167vw, 2px) solid rgb(47 185 236 / 70%);
  outline-offset: min(-0.208333vw, -4px);
}

.magic-plan-card h2,
.magic-plan-card p {
  position: absolute;
  z-index: 2;
  margin: 0;
  font-family: "MiSans Local", "PingFang SC", sans-serif;
  font-weight: 400;
  line-height: min(3.169vw, 60.847px);
  white-space: nowrap;
  transform: translateZ(min(1.042vw, 20px));
  transition: opacity 220ms ease, transform 220ms ease;
}

.magic-plan-card h2 {
  font-size: min(2.2995vw, 44.151px);
  font-weight: 600;
}

.magic-plan-card p {
  font-size: min(2.2995vw, 44.151px);
  font-weight: 200;
}

.magic-plan-card:hover h2,
.magic-plan-card:hover p,
.magic-plan-card:focus-visible h2,
.magic-plan-card:focus-visible p {
  transform: translateZ(min(1.563vw, 30px));
}

.magic-plan-card--channels {
  --glass-refraction: .35;
  top: 13.389%;
  left: 6.667%;
  width: 29.665%;
  height: 38.855%;
}

.magic-plan-card--channels h2 {
  top: 17.325%;
  left: 10.282%;
}

.magic-plan-card--channels p {
  top: 74.122%;
  bottom: auto;
  left: 10.282%;
}

.magic-plan-card--brand {
  top: 13.389%;
  left: 39.233%;
  width: 31.435%;
  height: 38.855%;
}

.magic-plan-card--brand h2 {
  top: 17.325%;
  left: 10.798%;
}

.magic-plan-card--brand p {
  top: 74.122%;
  bottom: auto;
  left: 8.92%;
}

.magic-plan-card--library {
  top: 56.504%;
  left: 6.667%;
  width: 63.981%;
  height: 28.119%;
}

.magic-plan-card--library h2 {
  top: 14.848%;
  left: 4.766%;
  font-size: min(2.2995vw, 44.151px);
  line-height: min(2.874vw, 55.188px);
}

.magic-plan-card--library p {
  top: 68.185%;
  bottom: auto;
  left: 4.766%;
}

.magic-plan-card--products {
  top: 29.812%;
  left: 73.621%;
  width: 20.858%;
  height: 54.812%;
}

.magic-plan-card--products h2 {
  top: 6.699%;
  left: 10.377%;
}

.magic-plan-card--products h2 span {
  display: block;
}

.magic-plan-card--products p {
  right: 6.604%;
  bottom: 4.657%;
  left: auto;
}

.magic-plan-handle {
  position: absolute;
  z-index: 8;
  width: min(0.938vw, 18px);
  aspect-ratio: 1;
  border: min(0.104167vw, 2px) solid var(--handle-border);
  background: var(--handle);
  pointer-events: none;
}

.magic-plan-handle--tl { top: min(-0.521vw, -10px); left: min(-0.521vw, -10px); }
.magic-plan-handle--tr { top: min(-0.521vw, -10px); right: min(-0.521vw, -10px); }
.magic-plan-handle--bl { bottom: min(-0.521vw, -10px); left: min(-0.521vw, -10px); }
.magic-plan-handle--br { right: min(-0.521vw, -10px); bottom: min(-0.521vw, -10px); }

.h2-plan-label {
  position: absolute;
  z-index: 7;
  top: 13.389%;
  left: 73.073%;
  width: 21.406%;
  height: 13.389%;
  pointer-events: none;
}

.h2-plan-label span {
  position: absolute;
  top: 0;
  left: 2.676%;
  display: grid;
  place-items: center;
  width: 97.324%;
  height: 89.844%;
  border: min(0.052083vw, 1px) solid #fff;
  color: var(--paper);
  background: #1e1e1e;
  font-family: "Pixelify Sans", "Inter Local", sans-serif;
  font-size: min(4.952vw, 95.076px);
  font-weight: 400;
  line-height: 1.03;
  letter-spacing: min(-0.0495vw, -0.951px);
  white-space: nowrap;
}

.h2-plan-label img {
  position: absolute;
  bottom: 0;
  left: 0;
  width: min(1.354vw, 26px);
  height: min(1.406vw, 27px);
}

.plan-sticker {
  position: absolute;
  z-index: 1;
  margin: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  animation: plan-sticker-float 6s ease-in-out infinite;
}

.plan-sticker img {
  max-width: none;
}

.plan-sticker--channel {
  top: 22.28%;
  left: 1.563%;
  width: 8.657%;
  height: 21.234%;
  animation-delay: -1.8s;
}

.plan-sticker--channel span {
  position: relative;
  display: block;
  width: 111.49%;
  height: 70.05%;
  overflow: hidden;
  transform: rotate(-82.14deg);
}

.plan-sticker--channel img {
  position: absolute;
  top: -41.97%;
  left: -8.96%;
  width: 117.92%;
  height: 153.65%;
}

.plan-sticker--brand {
  top: 9.31%;
  left: 51.584%;
  width: 15.244%;
  height: 16.765%;
  animation-delay: -3.1s;
}

.plan-sticker__brand-bg {
  position: absolute;
  width: 95.01%;
  height: 75.76%;
  transform: rotate(-8.3deg);
}

.plan-sticker__brand-mark {
  position: absolute;
  top: 15.34%;
  left: 53.45%;
  width: 35.41%;
  height: 74.12%;
  object-fit: contain;
  transform: rotate(-8.3deg);
}

.plan-sticker--product-a {
  top: 57.218%;
  left: 70.104%;
  width: 9.856%;
  aspect-ratio: 1;
  animation-delay: -4.2s;
}

.plan-sticker--product-a img {
  width: 73.456%;
  aspect-ratio: 1;
  transform: rotate(-29.29deg);
}

.plan-sticker--product-b {
  top: 38.075%;
  left: 85.417%;
  width: 12.588%;
  aspect-ratio: 1;
  animation-delay: -0.9s;
}

.plan-sticker--product-b img {
  width: 79.56%;
  aspect-ratio: 1;
  transform: rotate(72.28deg);
}

@keyframes plan-sticker-float {
  0%, 100% { translate: 0 0; }
  50% { translate: min(0.156vw, 3px) min(-0.365vw, -7px); }
}

.magic-plan-spotlight {
  position: absolute;
  z-index: 5;
  top: var(--spotlight-y, 50%);
  left: var(--spotlight-x, 50%);
  width: min(41.667vw, 800px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(47 185 236 / 15%) 0%, rgb(47 185 236 / 8%) 15%, rgb(47 185 236 / 4%) 25%, rgb(47 185 236 / 2%) 40%, rgb(47 185 236 / 1%) 65%, transparent 70%);
  mix-blend-mode: screen;
  opacity: var(--spotlight-opacity, 0);
  transform: translate(-50%, -50%);
  transition: opacity 260ms ease;
  pointer-events: none;
  will-change: left, top, opacity;
}

.magic-plan-particle {
  position: absolute;
  z-index: 3;
  left: var(--particle-x);
  top: var(--particle-y);
  width: min(0.208333vw, 4px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgb(132 0 255);
  box-shadow: 0 0 min(0.313vw, 6px) rgb(132 0 255 / 60%);
  opacity: 0;
  pointer-events: none;
  animation: magic-plan-particle-in 360ms var(--particle-delay) cubic-bezier(.2, .8, .2, 1) forwards,
             magic-plan-particle-drift var(--particle-duration) var(--particle-delay) ease-in-out infinite alternate;
}

.magic-plan-ripple {
  position: absolute;
  z-index: 6;
  width: var(--ripple-size);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(132 0 255 / 34%) 0%, rgb(132 0 255 / 16%) 30%, transparent 70%);
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
  animation: magic-plan-ripple 800ms ease-out forwards;
}

@keyframes magic-plan-particle-in {
  to { opacity: .9; }
}

@keyframes magic-plan-particle-drift {
  to { transform: translate3d(var(--particle-dx), var(--particle-dy), 0) rotate(var(--particle-rotation)); opacity: .3; }
}

@keyframes magic-plan-ripple {
  55% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .magic-plan-card {
    transform: none;
    transition: box-shadow 1ms linear, background-color 1ms linear;
  }

  .magic-plan-particle,
  .magic-plan-ripple,
  .magic-plan-spotlight {
    display: none;
  }

  .plan-sticker {
    animation: none;
  }
}

.site-header::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: max(-1.145833vw, -22px);
  left: 0;
  width: 100%;
  height: min(3.854167vw, 74px);
  border-bottom: min(0.052083vw, 1px) solid rgb(255 255 255 / 72%);
  background: rgb(250 250 250 / 76%);
  box-shadow: 0 min(0.208333vw, 4px) min(0.833333vw, 16px) rgb(28 74 91 / 5%), inset 0 min(-0.052083vw, -1px) 0 rgb(47 185 236 / 8%);
  backdrop-filter: blur(min(0.729167vw, 14px)) saturate(1.22);
  -webkit-backdrop-filter: blur(min(0.729167vw, 14px)) saturate(1.22);
}

/* Product case-study bottom drawer */
.case-study-drawer {
  position: fixed;
  z-index: 60;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear 680ms;
}

.case-study-drawer.is-open {
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.case-study-drawer__backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: rgb(0 0 0 / 58%);
  opacity: 0;
  cursor: pointer;
  backdrop-filter: blur(min(0.417vw, 8px));
  -webkit-backdrop-filter: blur(min(0.417vw, 8px));
  transition: opacity 420ms ease;
}

.case-study-drawer.is-open .case-study-drawer__backdrop {
  opacity: 1;
}

.case-study-panel {
  position: relative;
  z-index: 1;
  width: min(calc(100vw - 40px), 1714px);
  height: 94vh;
  max-height: 1080px;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 18%);
  border-bottom: 0;
  border-radius: min(1.25vw, 24px) min(1.25vw, 24px) 0 0;
  background: #1e1e1e;
  box-shadow: 0 min(-1.25vw, -24px) min(4.167vw, 80px) rgb(0 0 0 / 38%);
  outline: none;
  transform: translateY(104%);
  transition: transform 760ms cubic-bezier(.16, 1, .3, 1);
}

.case-study-drawer.is-open .case-study-panel {
  transform: translateY(0);
}

.case-study-scroll {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-color: #7bddff rgb(255 255 255 / 10%);
  scrollbar-width: thin;
}

.case-study-scroll::-webkit-scrollbar {
  width: 10px;
}

.case-study-scroll::-webkit-scrollbar-track {
  background: rgb(255 255 255 / 8%);
}

.case-study-scroll::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: #7bddff;
  background-clip: padding-box;
}

.case-study-progress {
  position: absolute;
  z-index: 7;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  overflow: hidden;
  background: rgb(255 255 255 / 10%);
  pointer-events: none;
}

.case-study-progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: #7bddff;
  transform: scaleX(var(--case-progress, 0));
  transform-origin: left center;
  transition: transform 90ms linear;
}

.case-study-close {
  position: absolute;
  z-index: 8;
  top: min(1.25vw, 24px);
  right: min(1.25vw, 24px);
  display: inline-flex;
  align-items: center;
  gap: min(0.417vw, 8px);
  min-width: min(6.771vw, 130px);
  min-height: min(3.125vw, 60px);
  padding: min(0.625vw, 12px) min(1.042vw, 20px);
  border: 1px solid rgb(255 255 255 / 32%);
  border-radius: 999px;
  color: #fff;
  background: rgb(18 18 18 / 74%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 22%), 0 10px 30px rgb(0 0 0 / 18%);
  font: 500 min(1.042vw, 20px) / 1 "MiSans Local", sans-serif;
  cursor: pointer;
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

.case-study-close span:first-child {
  font-size: 1.35em;
  line-height: .8;
}

.case-study-close:hover,
.case-study-close:focus-visible {
  border-color: #7bddff;
  color: #111;
  background: #7bddff;
  transform: translateY(-2px);
  outline: none;
}

.case-study-canvas {
  position: relative;
  width: 100%;
  height: calc(251.867cqw + var(--masonry-shift, 0px) + var(--sticker-masonry-shift, 0px));
  min-height: 100%;
  overflow: hidden;
  container-type: inline-size;
  color: #fff;
  background: #1e1e1e;
}

.case-study-number {
  position: absolute;
  z-index: 2;
  top: 1.634cqw;
  left: 3.267cqw;
  margin: 0;
  color: #7bddff;
  font-family: "Inter Local", sans-serif;
  font-size: 8.695cqw;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0.019cqw;
}

.case-study-copy {
  position: absolute;
  z-index: 2;
  left: 3.676cqw;
  width: 91.949cqw;
  color: #fff;
}

.case-study-copy--one { top: 12.719cqw; }
.case-study-copy--two { top: 75.671cqw; }
.case-study-copy--three { top: calc(138.624cqw + var(--masonry-shift, 0px)); }

.case-study-copy h3,
.case-study-copy p {
  margin: 0;
  font-family: "MiSans Local", "PingFang SC", sans-serif;
  line-height: 3.909cqw;
}

.case-study-copy h3 {
  font-size: 2.334cqw;
  font-weight: 600;
}

.case-study-copy h3 strong {
  font-weight: 600;
}

.case-study-copy p {
  margin-top: 0.642cqw;
  font-size: 2.042cqw;
  font-weight: 200;
}

.case-study-media {
  position: absolute;
  z-index: 1;
  left: 4.026cqw;
  width: 91.599cqw;
  margin: 0;
  background: #d9d9d9;
}

.case-study-media--one {
  top: 31.272cqw;
  height: 42.124cqw;
}

.case-study-media--two {
  top: 94.224cqw;
  height: auto;
}

.case-study-media--masonry {
  overflow: hidden;
  isolation: isolate;
  padding: min(0.938vw, 18px);
  background:
    radial-gradient(circle at 18% 12%, rgb(47 185 236 / 13%), transparent 32%),
    linear-gradient(145deg, #101216, #08090b 72%);
}

.masonry-wall {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--masonry-columns, 5), minmax(0, 1fr));
  align-items: start;
  gap: min(0.729vw, 14px);
  width: 100%;
  height: auto;
}

.masonry-wall::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
  border: 1px solid rgb(255 255 255 / 8%);
  border-radius: min(0.625vw, 12px);
  box-shadow: inset 0 0 min(2.604vw, 50px) rgb(0 0 0 / 30%);
  pointer-events: none;
}

.masonry-wall__column {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: min(0.729vw, 14px);
}

.masonry-wall__tile {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--masonry-ratio);
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: min(0.625vw, 12px);
  background: #f0f0f0;
  box-shadow: 0 min(0.625vw, 12px) min(1.458vw, 28px) rgb(0 0 0 / 26%);
  opacity: 0;
  filter: blur(16px);
  transform: translate3d(0, min(-2.604vw, -50px), 0) scale(.96);
  transform-origin: center;
  transition:
    opacity 600ms cubic-bezier(.22, 1, .36, 1),
    transform 600ms cubic-bezier(.22, 1, .36, 1),
    filter 600ms cubic-bezier(.22, 1, .36, 1),
    box-shadow 300ms ease;
}

.masonry-wall__tile.is-visible {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0) scale(1);
}

.masonry-wall__tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 600ms cubic-bezier(.22, 1, .36, 1), filter 300ms ease;
}

.masonry-wall__tile.is-visible:hover {
  z-index: 4;
  box-shadow: 0 min(1.042vw, 20px) min(2.083vw, 40px) rgb(0 0 0 / 42%);
  transform: scale(.95);
}

@keyframes masonry-reveal {
  from {
    opacity: 0;
    filter: blur(16px);
    transform: translate3d(0, min(-2.604vw, -50px), 0) scale(.96);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) scale(1);
  }
}

.case-study-media--three {
  top: calc(161.902cqw + var(--masonry-shift, 0px));
  height: 77.188cqw;
}

.case-study-media--three.case-study-media--masonry {
  height: auto;
}

.case-study-canvas--store {
  height: calc(308.807cqw + var(--store-masonry-shift, 0px) + var(--store-facade-shift, 0px) + var(--store-layout-shift, 0px) + var(--operation-center-shift, 0px));
  aspect-ratio: auto;
}

.case-study-canvas--channels {
  height: calc(251.867cqw + var(--channels-masonry-shift, 0px));
  aspect-ratio: auto;
  min-height: 0;
  overflow: hidden;
  background: #1e1e1e;
}

.case-study-canvas--app-experience {
  height: calc(380cqw + var(--app-home-shift, 0px) + var(--app-operations-shift, 0px));
  min-height: 0;
  overflow: hidden;
  background: #1e1e1e;
}

.app-experience-intro > p {
  position: absolute;
  z-index: 2;
  top: 4.4cqw;
  left: 17.27cqw;
  width: 76.3cqw;
  margin: 0;
  color: rgb(255 255 255 / 78%);
  font: 200 1.7cqw / 2.8cqw "MiSans Local", "PingFang SC", sans-serif;
}

.case-study-copy--app-home {
  top: 15cqw;
}

.case-study-media--app-home {
  top: 120cqw;
  height: auto;
}

.case-study-featured--app-home {
  top: 42cqw;
  height: auto;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: min(0.833vw, 16px);
  background: #08090b;
  box-shadow: 0 min(1.25vw, 24px) min(3.125vw, 60px) rgb(0 0 0 / 32%);
}

.case-study-featured--app-home img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 700ms cubic-bezier(.22, 1, .36, 1), filter 350ms ease;
}

.case-study-featured--app-home:hover img {
  filter: saturate(1.06) contrast(1.02);
  transform: scale(.985);
}

.case-study-featured-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: min(0.729vw, 14px);
  height: auto;
  padding: min(0.938vw, 18px);
  border-radius: min(0.833vw, 16px);
  background: linear-gradient(145deg, #101216, #08090b 72%);
}

.case-study-featured-grid--operations {
  top: calc(182cqw + var(--app-home-shift, 0px));
}

.case-study-featured-grid--operations img {
  aspect-ratio: .4615;
  object-fit: contain;
}

.case-study-featured-grid img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: min(0.625vw, 12px);
  box-shadow: 0 min(0.625vw, 12px) min(1.458vw, 28px) rgb(0 0 0 / 26%);
  transition: transform 600ms cubic-bezier(.22, 1, .36, 1), filter 300ms ease;
}

.case-study-featured-grid img:hover {
  filter: saturate(1.06) contrast(1.02);
  transform: scale(.97);
}

.case-study-copy--app-operations {
  top: calc(155cqw + var(--app-home-shift, 0px));
}

.case-study-media--app-operations {
  top: calc(255cqw + var(--app-home-shift, 0px));
  height: auto;
}

.case-study-canvas--training {
  display: flex;
  min-height: 100%;
  height: auto;
  flex-direction: column;
  gap: 7.2cqw;
  overflow: visible;
  padding: 3.7cqw 4.03cqw 8cqw;
  background: #1e1e1e;
}

.training-intro {
  display: grid;
  grid-template-columns: 12.3cqw minmax(0, 1fr);
  align-items: start;
  gap: 1.1cqw;
}

.training-intro .case-study-number {
  position: static;
  font-size: 8.7cqw;
  line-height: 1;
}

.training-intro > p,
.training-chapter__copy p {
  margin: 0;
  color: rgb(255 255 255 / 78%);
  font: 200 1.7cqw / 2.8cqw "MiSans Local", "PingFang SC", sans-serif;
}

.training-intro > p {
  padding-top: .45cqw;
}

.training-chapter {
  display: flex;
  flex-direction: column;
  gap: 2.4cqw;
}

.training-chapter__copy {
  opacity: 0;
  filter: blur(12px);
  transform: translate3d(0, 2.2cqw, 0);
  transition:
    opacity 680ms cubic-bezier(.22, 1, .36, 1),
    filter 680ms cubic-bezier(.22, 1, .36, 1),
    transform 680ms cubic-bezier(.22, 1, .36, 1);
}

.training-chapter__copy.is-visible {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0);
}

.training-chapter__copy h3 {
  margin: 0 0 1.25cqw;
  color: #fff;
  font: 650 2.38cqw / 1.35 "MiSans Local", "PingFang SC", sans-serif;
}

.training-chapter__media {
  position: static;
  width: 100%;
  height: auto;
  margin: 0;
  background: transparent;
}

.training-featured {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: min(.833vw, 16px);
  background: #08090b;
  box-shadow: 0 min(1.042vw, 20px) min(2.604vw, 50px) rgb(0 0 0 / 32%);
}

.training-featured img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 650ms cubic-bezier(.22, 1, .36, 1), filter 350ms ease;
}

.training-featured:hover img {
  filter: saturate(1.06) contrast(1.02);
  transform: scale(.985);
}

.case-study-canvas--training .masonry-wall {
  gap: min(.938vw, 18px);
  padding: min(.938vw, 18px);
  border-radius: min(.833vw, 16px);
  background: linear-gradient(145deg, #111317, #08090b 72%);
}

.case-study-canvas--training .masonry-wall__column {
  gap: min(.938vw, 18px);
}

.case-study-canvas--training .masonry-wall__tile {
  background: #08090b;
}

.training-chapter__media--single {
  width: min(72cqw, 100%);
  align-self: center;
}

@media (prefers-reduced-motion: reduce) {
  .training-chapter__copy {
    opacity: 1;
    filter: none;
    transform: none;
  }
}

.channels-background {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.channels-intro {
  position: absolute;
  z-index: 2;
  inset: 0;
  opacity: 0;
  filter: blur(10px);
  transform: translateY(min(-1.563vw, -30px));
  pointer-events: none;
  transition:
    opacity 700ms cubic-bezier(.22, 1, .36, 1) 140ms,
    filter 700ms cubic-bezier(.22, 1, .36, 1) 140ms,
    transform 700ms cubic-bezier(.22, 1, .36, 1) 140ms;
}

.case-study-drawer.is-open .channels-intro {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

.channels-traits {
  position: absolute;
  top: 5.601cqw;
  left: 17.27cqw;
  display: flex;
  align-items: center;
  gap: 1.459cqw;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: auto;
}

.channels-traits li {
  display: grid;
  width: 15.869cqw;
  height: 3.909cqw;
  place-items: center;
  border-radius: 2.334cqw;
  color: #1e1e1e;
  background: #fff;
  font: 200 1.883cqw / 1 "MiSans Local", "PingFang SC", sans-serif;
  white-space: nowrap;
}

.channels-traits li:last-child {
  width: 13.302cqw;
}

.channels-platforms,
.channels-description {
  position: absolute;
  margin: 0;
  color: #fff;
  font-family: "MiSans Local", "PingFang SC", sans-serif;
  font-weight: 200;
  pointer-events: auto;
}

.channels-platforms {
  top: 12.719cqw;
  left: 13.011cqw;
  font-size: 2.31cqw;
  line-height: 2.887cqw;
  white-space: nowrap;
}

.channels-description {
  top: 17.503cqw;
  left: 3.676cqw;
  width: 91.949cqw;
  font-size: 2.042cqw;
  line-height: 3.909cqw;
}

.case-study-media--channels {
  top: 31.272cqw;
  height: auto;
}

.case-study-copy--store-one { top: 12.777cqw; }
.case-study-copy--store-two { top: calc(75.671cqw + var(--store-masonry-shift, 0px)); }
.case-study-copy--store-three { top: calc(138.624cqw + var(--store-masonry-shift, 0px) + var(--store-facade-shift, 0px)); }
.case-study-copy--store-four { top: calc(196.659cqw + var(--store-masonry-shift, 0px) + var(--store-facade-shift, 0px) + var(--store-layout-shift, 0px)); }

.case-study-copy--store-one {
  display: flex;
  flex-direction: column;
}

.case-study-copy--store-one p {
  order: 1;
  margin-top: 0;
}

.case-study-copy--store-one h3 {
  order: 2;
  margin-top: 2.509cqw;
}

.case-study-copy--store-four h3 {
  width: 49.008cqw;
}

.case-study-media--store-one {
  top: 31.272cqw;
  height: 42.124cqw;
}

.case-study-media--store-one.case-study-media--masonry {
  height: auto;
}

.case-study-media--store-two {
  top: calc(81.039cqw + var(--store-masonry-shift, 0px));
  height: 56.709cqw;
}

.case-study-media--store-two.case-study-media--masonry {
  height: auto;
}

.case-study-media--store-three {
  top: calc(145.2cqw + var(--store-masonry-shift, 0px) + var(--store-facade-shift, 0px));
  height: 46.091cqw;
}

.case-study-media--store-three.case-study-media--masonry {
  height: auto;
}

.case-study-media--store-four {
  top: calc(203.235cqw + var(--store-masonry-shift, 0px) + var(--store-facade-shift, 0px) + var(--store-layout-shift, 0px));
  height: 88.973cqw;
}

.case-study-media--store-four.natural-case-media {
  height: auto;
  overflow: hidden;
  border-radius: min(0.625vw, 12px);
  background: #08090b;
}

.natural-case-media img {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0;
  filter: blur(16px);
  transform: translate3d(0, min(-2.604vw, -50px), 0) scale(.985);
  transform-origin: top center;
  transition:
    opacity 700ms cubic-bezier(.22, 1, .36, 1),
    filter 700ms cubic-bezier(.22, 1, .36, 1),
    transform 700ms cubic-bezier(.22, 1, .36, 1);
}

.natural-case-media img.is-visible {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0) scale(1);
}

.case-study-media--drift {
  overflow: hidden;
  isolation: isolate;
  background: #090a0c;
}

.drift-wall {
  --drift-x: 0px;
  --drift-y: 0px;
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #090a0c;
  perspective: 1200px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 9%, #000 91%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 9%, #000 91%, transparent 100%);
}

.drift-wall::after {
  content: "";
  position: absolute;
  z-index: 4;
  inset: 0;
  background: linear-gradient(180deg, rgb(0 0 0 / 36%), transparent 22%, transparent 74%, rgb(0 0 0 / 48%));
  box-shadow: inset 0 0 min(5.208vw, 100px) rgb(0 0 0 / 38%);
  pointer-events: none;
}

.drift-wall__scene {
  position: absolute;
  z-index: 1;
  inset: -37% -14%;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: min(0.938vw, 18px);
  transform: perspective(1200px) translate3d(var(--drift-x), var(--drift-y), 0) rotateX(16deg) rotateZ(-14deg) scale(1.08);
  transform-origin: center;
  transform-style: preserve-3d;
  transition: transform 420ms cubic-bezier(.2, .75, .2, 1);
  will-change: transform;
}

.drift-wall__column {
  min-width: 0;
  transform: translateZ(var(--column-depth, 0px));
  transform-style: preserve-3d;
}

.drift-wall__track {
  display: flex;
  flex-direction: column;
  gap: min(0.938vw, 18px);
  animation: drift-wall-up var(--drift-duration, 42s) linear infinite;
  animation-delay: var(--drift-delay, 0s);
  will-change: transform;
}

.drift-wall__set {
  display: flex;
  flex-direction: column;
  gap: min(0.938vw, 18px);
}

.drift-wall__tile {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 156 / 132;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: min(0.729vw, 14px);
  background: #181a1f;
  box-shadow: 0 min(0.938vw, 18px) min(1.563vw, 30px) rgb(0 0 0 / 28%);
  transform: translateZ(0);
  transition: transform 320ms cubic-bezier(.16, 1, .3, 1), filter 260ms ease, box-shadow 260ms ease;
}

.drift-wall__tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 22%);
  transition: opacity 240ms ease;
}

.drift-wall__tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(.72) saturate(.92);
  transition: filter 260ms ease, transform 420ms cubic-bezier(.16, 1, .3, 1);
}

.drift-wall__tile:hover {
  z-index: 3;
  box-shadow: 0 min(1.563vw, 30px) min(3.125vw, 60px) rgb(0 0 0 / 42%);
  transform: translateY(min(-3.333vw, -64px)) translateZ(64px) scale(1.045);
}

.drift-wall__tile:hover::after {
  opacity: 0;
}

.drift-wall__tile:hover img {
  filter: brightness(1) saturate(1.04);
  transform: scale(1.035);
}

.drift-wall:hover .drift-wall__track {
  animation-play-state: paused;
}

@keyframes drift-wall-up {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, calc(-50% - min(0.469vw, 9px)), 0); }
}

@media (prefers-reduced-motion: reduce) {
  .case-study-drawer,
  .case-study-drawer__backdrop,
  .case-study-panel,
  .case-study-progress span {
    transition: none;
  }

  .drift-wall__track {
    animation-play-state: paused;
  }

  .masonry-wall__tile,
  .masonry-wall__tile.is-visible,
  .natural-case-media img,
  .natural-case-media img.is-visible,
  .channels-intro {
    opacity: 1;
    filter: none;
    transform: none;
    animation: none;
    transition: none;
  }
}

.brand-logo {
  position: absolute;
  top: min(0.104167vw, 2px);
  left: 1.459854%;
  width: 6.979167%;
  height: min(1.958333vw, 37.6px);
}

.brand-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(0);
}

.partner-marks {
  position: absolute;
  inset: 0;
}

.xhbm-mark {
  position: absolute;
  top: min(0.15625vw, 3px);
  left: 9.947917%;
  width: 4.511%;
  height: min(1.744792vw, 33.5px);
  transform: skewX(-17deg) scaleY(0.96);
}

.xhbm-mark .xhbm-badge {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.xhbm-mark img:last-child {
  position: absolute;
  top: 21%;
  left: 11.5%;
  width: 69.2%;
  height: 62.6%;
}

.xiaoha-mark {
  position: absolute;
  top: min(0.104167vw, 2px);
  left: 15.572917%;
  width: 1.890625%;
  height: min(1.833333vw, 35.2px);
  border: min(0.063229vw, 1.214px) solid #000;
  border-radius: min(0.442552vw, 8.497px);
  background: #000;
}

.xiaoha-mark img {
  position: absolute;
  top: 29.3%;
  left: 9.2%;
  width: 81.65%;
  height: 41%;
}

.copyright {
  position: absolute;
  top: min(0.052083vw, 1px);
  left: 43.653125%;
  width: 7.857344%;
  height: min(1.681198vw, 32.279px);
  margin: 0;
  transform: skewX(-12deg) scaleY(0.98);
  font-family: "Inter Local", sans-serif;
  font-size: min(0.458333vw, 8.8px);
  font-weight: 400;
  line-height: min(0.572917vw, 11px);
  white-space: nowrap;
}

.copyright span {
  display: block;
}

.copyright span:nth-child(2) { padding-left: 50.5%; }
.copyright span:nth-child(3) { padding-left: 26.6%; }

.site-nav {
  position: absolute;
  top: min(0.46875vw, 9px);
  left: 69.0625%;
  display: flex;
  align-items: flex-start;
  gap: min(1.927083vw, 37px);
  white-space: nowrap;
}

.site-nav a {
  font-size: min(1.20224vw, 23.083px);
  font-weight: 600;
  line-height: 1.04;
  transition: color 180ms ease, transform 180ms ease, text-shadow 180ms ease;
}

.site-nav a:hover,
.site-nav a:focus-visible {
  color: var(--cyan);
  text-shadow: 0 0 min(0.625vw, 12px) rgb(47 185 236 / 18%);
  transform: translateY(min(-0.15625vw, -3px));
  outline: none;
}

.site-nav a:nth-child(2) { margin-left: min(0.15625vw, 3px); }
.site-nav a:nth-child(3) { margin-left: min(-0.260417vw, -5px); }
.site-nav a:nth-child(4) { margin-left: min(-0.15625vw, -3px); }

.ruler {
  position: absolute;
  top: min(2.708333vw, 52px);
  left: 0;
  width: 100%;
  height: min(1.302083vw, 25px);
}

.ruler-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: min(0.052083vw, 1px);
}

.ruler-ticks {
  position: absolute;
  top: 0;
  left: 0.911458%;
  display: flex;
  justify-content: space-between;
  gap: 0;
  width: 97.109375%;
  height: min(0.729167vw, 14px);
  overflow: visible;
}

.ruler-ticks img {
  flex: 0 0 min(3.424479vw, 65.75px);
  width: min(3.424479vw, 65.75px);
  height: 100%;
}

.ruler-labels {
  position: absolute;
  top: min(0.885417vw, 17px);
  left: 0.911458%;
  width: 97.109375%;
  height: min(0.364583vw, 7px);
}

.ruler-labels span {
  position: absolute;
  left: calc(var(--i) / 29 * 100%);
  transform: translateX(-50%);
  color: #828282;
  font-size: min(0.34349vw, 6.595px);
  font-weight: 600;
  line-height: 1.04;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .interactive-layer { transition: none; }
  .falling-sticker { animation-play-state: paused; }
  .floating-label:hover .floating-label__arrow,
  .floating-label:focus-visible .floating-label__arrow { animation: none; }
}

@media (max-width: 1920px) {
  .color-bends { display: none; }
}