@font-face {
  font-family: "Asta Sans Lab";
  src: url("../../assets/fonts/shore-scope/asta-sans-400.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Asta Sans Lab";
  src: url("../../assets/fonts/shore-scope/asta-sans-700.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Oswald Lab";
  src: url("../../assets/fonts/shore-type-lab/oswald.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
}

@font-face {
  font-family: "Space Grotesk Lab";
  src: url("../../assets/fonts/shore-type-lab/space-grotesk.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
}

@font-face {
  font-family: "Manrope Lab";
  src: url("../../assets/fonts/shore-type-lab/manrope.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}

@font-face {
  font-family: "Sora Lab";
  src: url("../../assets/fonts/shore-type-lab/sora.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
}

@font-face {
  font-family: "Inter Lab";
  src: url("../../assets/fonts/shore-type-lab/inter.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Bodoni Moda Lab";
  src: url("../../assets/fonts/shore-type-lab/bodoni-moda.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
}

@font-face {
  font-family: "Cormorant Garamond Lab";
  src: url("../../assets/fonts/shore-type-lab/cormorant-garamond.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
}

:root {
  --landing-light-surface: var(--site-light-surface, #f9fdfe);
  color-scheme: dark;
  --frame-inset: 184px;
  --frame-current-inset: 184px;
  --header-opacity: 1;
  --header-shift: 0px;
  --header-scene-x: 0px;
  --header-scene-y: 0px;
  --header-ink: rgb(255 255 255);
  --header-invert: 1;
  --logo-x: 198px;
  --logo-y: 80px;
  --name-x: 328px;
  --name-y: 80px;
  --brand-height: 80px;
  --menu-right: 201px;
  --menu-y: 124px;
  --menu-size: 24px;
  --menu-gap: 34px;
  --action-gap: 48px;
  --menu-weight: 700;
  --menu-tracking: -0.01em;
  --slogan-x: 4.3vw;
  --slogan-y: 32vh;
  --slogan-size: 242px;
  --slogan-leading: 1.03;
  --slogan-tracking: 0em;
  --slogan-weight: 500;
  --slogan-opacity: 0.89;
  --slogan-current-opacity: 0;
  --slogan-shift: 48px;
  --map-wipe-left: 100%;
  --map-background-color: hsl(0 0% 2%);
  --map-company-opacity: 0;
  --map-company-shift-x: 0px;
  --map-company-shift-y: 48px;
  --map-company-blur: 12px;
  --map-identity-x: 4.3vw;
  --map-identity-y: 40vh;
  --map-identity-width: 42vw;
  --map-identity-size: 142px;
  --map-identity-leading: 1.08;
  --map-identity-gap: 10px;
  --map-identity-tracking: 0em;
  --map-identity-weight: 500;
  --map-identity-opacity: 0.89;
  --map-seoul-x: 47vw;
  --map-seoul-y: 25vh;
  --map-seoul-opacity: 0;
  --map-seoul-shift: 14px;
  --map-hcm-x: 22vw;
  --map-hcm-y: 73vh;
  --map-hcm-opacity: 0;
  --map-hcm-shift: 14px;
  --map-grid-opacity: 0.14;
  --map-detail-opacity: 0;
  --map-story-y: 0vh;
  --map-exit-vignette-opacity: 0;
  --bridge-cover-opacity: 0;
  --bridge-copy-opacity: 0;
  --bridge-copy-shift: 54px;
  --bridge-copy-x: 50vw;
  --bridge-copy-y: 42.5vh;
  --bridge-copy-width: 68vw;
  --bridge-copy-size: 82px;
  --bridge-copy-leading: 1.22;
  --bridge-copy-tracking: -0.045em;
  --process-scene-y: 100vh;
  --process-rail-y: 0px;
  --process-media-right: 0vw;
  --process-media-y: 0vh;
  --process-media-width: 44vw;
  --process-media-height: 100vh;
  --process-row-space: 100vh;
  --process-title-x: 7.5vw;
  --process-title-y: 28vh;
  --process-title-width: 48vw;
  --process-number-size: 22px;
  --process-title-size: 260px;
  --process-title-leading: 0.9;
  --process-title-tracking: -0.04em;
  --process-lead-right: 7.5vw;
  --process-lead-y: 48vh;
  --process-lead-width: 34vw;
  --process-lead-size: 37px;
  --process-lead-leading: 1.48;
  --process-lead-tracking: -0.02em;
  --process-body-gap: 1.35vh;
  --process-body-width: 32vw;
  --process-body-size: 22px;
  --process-body-leading: 1.58;
  --process-body-tracking: -0.02em;
  --process-title-post-x: 0vw;
  --process-expansion-left: 50vw;
  --process-expansion-top: 50vh;
  --process-expansion-width: 0px;
  --process-expansion-height: 0px;
  --process-expansion-opacity: 0;
  --process-expansion-image-y: 0px;
  --process-expansion-image-zoom: 1.29;
  --process-expansion-image-opacity: 1;
  --process-expansion-video-opacity: 0;
  --process-expansion-media-reveal: -12%;
  --process-expansion-media-feather: 12%;
  --process-particle-opacity: 0;
  --process-transition-clip-left: 100%;
  --process-transition-copy-x: 5vw;
  --process-transition-copy-y: 42vh;
  --process-transition-copy-width: 26vw;
  --process-transition-copy-size: 60px;
  --process-transition-copy-leading: 1.54;
  --process-transition-copy-tracking: -0.035em;
  --process-transition-copy-opacity: 0;
  --process-transition-copy-shift: 126px;
  --process-transition-copy-first-y: 0px;
  --process-transition-copy-second-opacity: 0;
  --process-transition-copy-second-y: 170px;
  --transition-brand-clip-left: 100vw;
  --transition-brand-clip-right: 100vw;
  --transition-brand-opacity: 0;
}

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

html,
body {
  width: 100%;
  min-width: 320px;
  min-height: 100%;
  margin: 0;
  background: #050607;
}

html {
  overflow-x: hidden;
  scrollbar-color: rgb(255 255 255 / 22%) #050607;
}

body {
  overflow-x: clip;
}

.site-shell-render-host {
  display: none !important;
}

body,
button,
input {
  font-family: "Asta Sans Lab", sans-serif;
}

button,
input {
  color: inherit;
  font: inherit;
}

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

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  margin: -1px;
  white-space: nowrap;
}

.scroll-stage {
  position: relative;
  height: 1180svh;
  background: #050607;
}

.hero-lab {
  position: sticky;
  top: 0;
  width: 100vw;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
}

.hero-lab__frame {
  position: absolute;
  z-index: 1;
  inset: var(--frame-current-inset);
  overflow: hidden;
  background: #0b0d0f;
  will-change: inset;
}

.hero-lab__background {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  opacity: 1;
  transform: scale(1);
  transform-origin: 50% 50%;
  user-select: none;
}

.hero-intro-pending .hero-lab__background {
  transition:
    opacity 1400ms cubic-bezier(0.2, 0.72, 0.22, 1),
    transform 1700ms cubic-bezier(0.2, 0.72, 0.22, 1);
  will-change: opacity, transform;
}

.hero-intro-pending:not(.hero-intro-ready) .hero-lab__background {
  opacity: 0.76;
  transform: scale(1.028);
}

.hero-intro-pending .lab-header > .lab-brand > .lab-brand__symbol,
.hero-intro-pending .lab-header > .lab-brand > .lab-brand__name,
.hero-intro-pending .lab-navigation {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition:
    opacity 900ms cubic-bezier(0.2, 0.72, 0.22, 1),
    transform 1100ms cubic-bezier(0.2, 0.72, 0.22, 1);
}

.hero-intro-pending .lab-header > .lab-brand > .lab-brand__symbol {
  transition-delay: 120ms;
}

.hero-intro-pending .lab-header > .lab-brand > .lab-brand__name {
  transition-delay: 210ms;
}

.hero-intro-pending .lab-navigation {
  transition-delay: 300ms;
}

.hero-intro-pending:not(.hero-intro-ready)
  .lab-header
  > .lab-brand
  > .lab-brand__symbol,
.hero-intro-pending:not(.hero-intro-ready)
  .lab-header
  > .lab-brand
  > .lab-brand__name,
.hero-intro-pending:not(.hero-intro-ready) .lab-navigation {
  opacity: 0;
  transform: translate3d(0, 12px, 0);
}

.lab-header {
  position: fixed;
  z-index: 60;
  inset: 0;
  color: var(--header-ink);
  opacity: var(--header-opacity);
  pointer-events: none;
  transform: translate3d(
    var(--header-scene-x),
    calc(var(--header-shift) + var(--header-scene-y)),
    0
  );
  will-change: opacity, transform;
}

.lab-header.is-transition-hidden {
  visibility: hidden;
}

.lab-brand__symbol,
.lab-brand__name {
  position: absolute;
  display: block;
  height: var(--brand-height);
  width: auto;
  pointer-events: auto;
  image-rendering: auto;
}

.lab-brand__symbol,
.lab-brand__name {
  filter: brightness(0) invert(var(--header-invert));
}

.lab-brand__symbol {
  top: var(--logo-y);
  left: var(--logo-x);
  object-fit: contain;
}

.lab-brand__name {
  top: var(--name-y);
  left: var(--name-x);
}

.transition-brand-overlay {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  opacity: var(--transition-brand-opacity);
  clip-path: inset(
    0
    calc(100vw - var(--transition-brand-clip-right))
    0
    var(--transition-brand-clip-left)
  );
  pointer-events: none;
  will-change: clip-path, opacity;
}

.transition-brand-overlay .lab-brand__symbol,
.transition-brand-overlay .lab-brand__name {
  filter: brightness(0) invert(1) !important;
  pointer-events: none;
}

.lab-navigation {
  position: absolute;
  top: var(--menu-y);
  right: var(--menu-right);
  display: flex;
  align-items: center;
  gap: var(--menu-gap);
  color: var(--header-ink);
  font-size: var(--menu-size);
  font-weight: var(--menu-weight);
  letter-spacing: var(--menu-tracking);
  line-height: 1.32;
  pointer-events: auto;
  white-space: nowrap;
}

.lab-navigation a {
  position: relative;
  display: inline-flex;
  min-height: 1.72em;
  align-items: center;
  outline: none;
}

.lab-navigation a::after {
  position: absolute;
  right: 0;
  bottom: -0.18em;
  left: 0;
  height: 1px;
  background: currentColor;
  content: "";
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 220ms ease;
}

.lab-navigation a:hover::after,
.lab-navigation a:focus-visible::after {
  transform: scaleX(1);
}

.lab-navigation__divider {
  margin-right: calc(var(--action-gap) - var(--menu-gap));
  margin-left: calc(var(--action-gap) - var(--menu-gap));
  opacity: 0.56;
}

.hero-slogan {
  position: absolute;
  z-index: 4;
  top: var(--slogan-y);
  left: var(--slogan-x);
  display: grid;
  margin: 0;
  color: #fff;
  font-family: "Oswald Lab", sans-serif;
  font-size: var(--slogan-size);
  font-weight: var(--slogan-weight);
  letter-spacing: var(--slogan-tracking);
  line-height: var(--slogan-leading);
  opacity: 1;
  text-transform: uppercase;
  text-wrap: nowrap;
  transform: none;
}

.hero-slogan.is-transition-hidden {
  visibility: hidden;
}

.hero-slogan span {
  display: block;
  opacity: var(--slogan-line-opacity, 0);
  clip-path: var(--slogan-line-clip, inset(0));
  filter: blur(var(--slogan-line-blur, 0px));
  transform: translate3d(
      var(--slogan-line-x, 0px),
      var(--slogan-line-y, 0px),
      0
    )
    scale(var(--slogan-line-scale, 1));
  transform-origin: 0 50%;
  will-change: opacity, transform, clip-path, filter;
}

.scroll-guide {
  --scroll-guide-progress: 0;
  position: absolute;
  z-index: 45;
  bottom: clamp(30px, 4.6vh, 92px);
  left: 50%;
  display: grid;
  justify-items: center;
  gap: 8px;
  color: rgb(255 255 255 / 82%);
  opacity: 0;
  pointer-events: none;
  text-align: center;
  transform: translate3d(-50%, 14px, 0);
  transition:
    opacity 260ms ease,
    transform 260ms ease,
    color 260ms ease;
}

.scroll-guide[data-visible="true"] {
  opacity: 1;
  transform: translate3d(-50%, 0, 0);
}

.scroll-guide__label {
  font-family: "Oswald Lab", sans-serif;
  font-size: clamp(12px, 0.52vw, 18px);
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1.35;
  white-space: nowrap;
}

.scroll-guide__track {
  position: relative;
  display: block;
  width: 1px;
  height: clamp(34px, 4.6vh, 74px);
  overflow: hidden;
  background: rgb(255 255 255 / 25%);
  transform: translate3d(0, 18px, 0);
}

.scroll-guide__track i {
  position: absolute;
  inset: 0;
  display: block;
  background: currentColor;
  transform: translate3d(0, -110%, 0);
  animation: scroll-guide-pulse 1.75s cubic-bezier(0.45, 0, 0.25, 1) infinite;
}

.scroll-guide[data-visible="false"] .scroll-guide__track i {
  animation-play-state: paused;
}

.scroll-guide small {
  font-family: "Oswald Lab", sans-serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.22em;
  transform: translate3d(0, 18px, 0);
}

@keyframes scroll-guide-pulse {
  0% {
    transform: translate3d(0, -110%, 0);
  }

  58%,
  100% {
    transform: translate3d(0, 110%, 0);
  }
}

.map-scene {
  position: absolute;
  z-index: 20;
  inset: 0 0 auto;
  height: 128vh;
  overflow: hidden;
  background: var(--map-background-color);
  clip-path: inset(0 0 0 var(--map-wipe-left));
  color: #f2f4f5;
  pointer-events: none;
  transform: translate3d(0, var(--map-story-y), 0);
  will-change: clip-path, transform;
}

.map-scene::before {
  position: absolute;
  z-index: 6;
  top: 70vh;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(
    180deg,
    transparent 0%,
    color-mix(in srgb, var(--map-background-color) 46%, transparent) 34%,
    var(--map-background-color) 58%,
    var(--map-background-color) 100%
  );
  content: "";
  opacity: var(--map-exit-vignette-opacity);
  pointer-events: none;
  will-change: opacity;
}

.map-scene__fallback,
.map-scene__geography,
.map-scene__route {
  position: absolute;
  inset: 0 0 auto;
  display: block;
  width: 100%;
  height: 128vh;
}

.map-scene__fallback {
  z-index: 0;
  filter: grayscale(1);
  opacity: 0;
  object-fit: fill;
  pointer-events: none;
}

.map-scene[data-map-status="unavailable"] .map-scene__fallback {
  opacity: 1;
}

.map-scene[data-map-status="unavailable"] .map-scene__geography {
  visibility: hidden;
}

.map-scene__geography {
  z-index: 1;
}

.map-scene__route {
  z-index: 2;
}

.map-route-signals {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .map-route-signals {
    display: none;
  }
}

.map-location {
  --map-location-accent: 137 193 221;
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: flex-start;
  gap: 22px;
  font-family: "Oswald Lab", sans-serif;
  pointer-events: none;
}

.map-location--seoul {
  top: var(--map-seoul-y);
  left: var(--map-seoul-x);
  opacity: var(--map-seoul-opacity);
  transform: translate3d(0, var(--map-seoul-shift), 0);
}

.map-location--hcm {
  --map-location-accent: 220 145 88;
  top: var(--map-hcm-y);
  left: var(--map-hcm-x);
  opacity: var(--map-hcm-opacity);
  transform: translate3d(0, var(--map-hcm-shift), 0);
}

.map-location__point {
  position: relative;
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  border: 2px solid rgb(var(--map-location-accent) / 96%);
  border-radius: 50%;
  margin-top: 7px;
  background: rgb(var(--map-location-accent) / 22%);
  box-shadow:
    0 0 0 6px rgb(var(--map-location-accent) / 12%),
    0 0 30px rgb(var(--map-location-accent) / 25%);
}

.map-location__point::after {
  position: absolute;
  inset: 2px;
  border-radius: inherit;
  background: rgb(var(--map-location-accent));
  content: "";
}

.map-location p {
  display: grid;
  gap: 8px;
  margin: 0;
  text-transform: uppercase;
}

.map-location__label {
  display: flex;
  align-items: flex-start;
  gap: clamp(24px, 1.25vw, 48px);
}

.map-location__services {
  padding-top: 1px;
  color: rgb(245 247 248 / 92%);
  font-family: "Asta Sans Lab", sans-serif;
  font-size: clamp(18px, 0.66vw, 26px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.2;
  white-space: nowrap;
}

.map-location strong {
  color: rgb(245 247 248 / 92%);
  font-size: clamp(16px, 0.6vw, 24px);
  font-weight: 400;
  letter-spacing: 0.09em;
  line-height: 1;
}

.map-location .map-location__role {
  color: rgb(245 247 248 / 92%);
  font-size: clamp(19px, 0.76vw, 30px);
  font-weight: 600;
  letter-spacing: 0.15em;
  line-height: 1;
}

.map-identity {
  position: absolute;
  z-index: 5;
  top: var(--map-identity-y);
  right: var(--map-identity-x);
  display: grid;
  width: var(--map-identity-width);
  height: auto;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--map-identity-gap);
  color: rgb(255 255 255 / var(--map-identity-opacity));
  opacity: var(--map-company-opacity);
  font-family: "Oswald Lab", sans-serif;
  font-size: var(--map-identity-size);
  font-weight: var(--map-identity-weight);
  letter-spacing: var(--map-identity-tracking);
  line-height: var(--map-identity-leading);
  text-align: right;
  text-transform: uppercase;
  filter: blur(var(--map-company-blur));
  transform: translate3d(
    var(--map-company-shift-x),
    var(--map-company-shift-y),
    0
  );
  will-change: opacity, transform, filter;
}

.map-identity > * {
  display: block;
  width: max-content;
  min-width: 0;
  justify-self: end;
  margin: 0;
  padding: 0;
  border: 0;
  font-weight: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  white-space: nowrap;
}


.bridge-scene {
  position: absolute;
  z-index: 21;
  inset: 0;
  overflow: hidden;
  background: transparent;
  color: #f4f5f5;
  pointer-events: none;
}

.bridge-scene::before {
  position: absolute;
  z-index: 0;
  inset: -3px 0;
  background: var(--map-background-color);
  content: "";
  opacity: var(--bridge-cover-opacity);
  will-change: opacity;
}

.bridge-scene__copy {
  position: absolute;
  z-index: 1;
  top: var(--bridge-copy-y);
  left: var(--bridge-copy-x);
  display: grid;
  width: var(--bridge-copy-width);
  justify-items: center;
  gap: 0.16em;
  margin: 0;
  color: rgb(255 255 255 / 94%);
  font-size: var(--bridge-copy-size);
  font-weight: 400;
  letter-spacing: var(--bridge-copy-tracking);
  line-height: var(--bridge-copy-leading);
  opacity: var(--bridge-copy-opacity);
  text-align: center;
  transform: translate3d(-50%, var(--bridge-copy-shift), 0);
  will-change: opacity, transform;
}

.bridge-scene__copy span {
  display: block;
}

.process-scene {
  position: absolute;
  z-index: 30;
  inset: 0;
  overflow: hidden;
  background: var(--landing-light-surface);
  color: #111;
  pointer-events: none;
  transform: translate3d(0, var(--process-scene-y), 0);
  will-change: transform;
}

.process-rail {
  position: absolute;
  inset: 0;
  transform: translate3d(0, var(--process-rail-y), 0);
  will-change: transform;
}

.process-scene__index {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 2.2vw;
  display: grid;
  gap: 18px;
  margin: 0;
  padding: 0;
  color: rgb(17 17 17 / 25%);
  font-family: "Oswald Lab", sans-serif;
  font-size: clamp(12px, 0.4vw, 17px);
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1;
  list-style: none;
  opacity: var(--process-index-opacity, 1);
  transform: translateY(-50%);
  transition: opacity 180ms ease;
}

.process-scene__index li {
  display: flex;
  align-items: center;
  gap: 10px;
  transition:
    color 220ms ease,
    opacity 220ms ease;
}

.process-scene__index li::after {
  width: 0;
  height: 1px;
  background: currentColor;
  content: "";
  opacity: 0;
  transition:
    width 320ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 180ms ease;
}

.process-scene__index li.is-active {
  color: #111;
}

.process-scene__index li.is-active::after {
  width: 22px;
  opacity: 0.74;
}

.process-step {
  position: relative;
  z-index: var(--process-step-z, 0);
  width: 100%;
  height: var(--process-row-space);
  min-height: 100vh;
}

.process-step__media {
  position: absolute;
  z-index: 1;
  top: var(--process-media-y);
  right: var(--process-media-right);
  left: auto;
  width: var(--process-media-width);
  height: var(--process-media-height);
  margin: 0;
  overflow: hidden;
  background: #050607;
  clip-path: inset(
    var(--process-frame-clip-top, 100%)
    0
    var(--process-frame-clip-bottom, 0%)
    0
  );
  opacity: var(--process-frame-opacity, 0);
  transform: translate3d(0, var(--process-frame-y, 0px), 0);
  transform-origin: 50% 50%;
  will-change: clip-path, opacity, transform;
}

.process-step__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transform-origin: 50% 50%;
  user-select: none;
  will-change: transform;
}

.process-step__heading {
  position: absolute;
  z-index: 2;
  top: var(--process-title-y);
  left: var(--process-title-x);
  display: grid;
  width: var(--process-title-width);
  align-content: start;
  margin: 0;
  opacity: var(--process-title-opacity, 0);
  transform: translate3d(
    calc(var(--process-title-post-x) + var(--process-title-intro-x, 0px)),
    calc(var(--process-title-pin-y, 0px) + var(--process-title-stage-y, 0px)),
    0
  );
  will-change: opacity, transform, filter;
}

.process-step__number,
.process-step__english,
.process-step__detail > span {
  font-family: "Oswald Lab", sans-serif;
  text-transform: uppercase;
}

.process-step__number {
  margin-bottom: clamp(1.2rem, 2.2vh, 3rem);
  color: rgb(17 17 17 / 58%);
  font-size: var(--process-number-size);
  font-weight: 500;
  letter-spacing: 0.16em;
  line-height: 1;
}

.process-step__english {
  margin-bottom: 0.75em;
  color: rgb(17 17 17 / 54%);
  font-size: clamp(15px, 0.54vw, 22px);
  font-weight: 500;
  letter-spacing: 0.17em;
  line-height: 1;
}

.process-step__heading h3 {
  max-width: 100%;
  margin: 0;
  font-family: "Oswald Lab", sans-serif;
  font-size: var(--process-title-size);
  font-weight: 500;
  letter-spacing: var(--process-title-tracking);
  line-height: var(--process-title-leading);
  text-transform: uppercase;
  white-space: nowrap;
}

.process-step__detail {
  position: absolute;
  z-index: 2;
  top: var(--process-lead-y);
  right: auto;
  left: var(--process-lead-right);
  display: grid;
  width: var(--process-lead-width);
  align-content: start;
  opacity: var(--process-detail-opacity, 0);
  transform: translate3d(
    var(--process-detail-x, 0px),
    calc(var(--process-detail-pin-y, 0px) + var(--process-detail-stage-y, 0px)),
    0
  ) scale(var(--process-detail-scale, 1));
  will-change: opacity, transform, filter;
}

.process-step__lead,
.process-step__body {
  justify-self: start;
}

.process-step__lead {
  width: var(--process-lead-width);
  margin: 0;
  font-size: var(--process-lead-size);
  font-weight: 700;
  letter-spacing: var(--process-lead-tracking);
  line-height: var(--process-lead-leading);
  overflow-wrap: break-word;
  word-break: keep-all;
}

.process-step__lead strong {
  font-weight: 700;
}

.process-step__body {
  display: block;
  width: var(--process-body-width);
  margin-top: var(--process-body-gap);
  color: rgb(17 17 17 / 76%);
  font-size: var(--process-body-size);
  font-weight: 430;
  letter-spacing: var(--process-body-tracking);
  line-height: var(--process-body-leading);
  overflow-wrap: break-word;
  word-break: keep-all;
}

.process-step__body p {
  max-width: 100%;
  margin: 0;
  font-size: var(--process-body-size);
  font-weight: 430;
  letter-spacing: var(--process-body-tracking);
  line-height: var(--process-body-leading);
  overflow-wrap: break-word;
  word-break: keep-all;
}

.process-expansion {
  position: absolute;
  z-index: 4;
  top: var(--process-expansion-top);
  left: var(--process-expansion-left);
  width: var(--process-expansion-width);
  height: var(--process-expansion-height);
  margin: 0;
  overflow: hidden;
  background: #111;
  opacity: var(--process-expansion-opacity);
  pointer-events: none;
  will-change: top, left, width, height, opacity;
}

.process-expansion img,
.process-expansion video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  user-select: none;
}

.process-expansion img {
  opacity: var(--process-expansion-image-opacity);
  transform: translate3d(0, var(--process-expansion-image-y), 0)
    scale(var(--process-expansion-image-zoom));
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}

.process-expansion video {
  -webkit-mask-image: linear-gradient(
    90deg,
    #000 0%,
    #000 calc(var(--process-expansion-media-reveal) - var(--process-expansion-media-feather)),
    transparent calc(var(--process-expansion-media-reveal) + var(--process-expansion-media-feather)),
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    #000 0%,
    #000 calc(var(--process-expansion-media-reveal) - var(--process-expansion-media-feather)),
    transparent calc(var(--process-expansion-media-reveal) + var(--process-expansion-media-feather)),
    transparent 100%
  );
  opacity: var(--process-expansion-video-opacity);
  will-change: mask-image, opacity;
}

.process-particle-bridge {
  position: absolute;
  z-index: 2;
  inset: 0;
  overflow: hidden;
  background: #000;
  opacity: var(--process-particle-opacity);
  pointer-events: none;
  will-change: opacity;
}

.process-particle-bridge iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
  pointer-events: none;
}

body[data-particle-camera-editor="true"] .process-scene {
  pointer-events: auto;
}

body[data-particle-camera-editor="true"] .process-expansion {
  pointer-events: auto;
}

body[data-particle-camera-editor="true"] .control-panel,
body[data-particle-camera-editor="true"] .panel-launcher,
body[data-particle-camera-editor="true"] .scroll-guide {
  display: none !important;
}

body[data-particle-camera-editor="true"] .process-particle-bridge,
body[data-particle-camera-editor="true"] .process-particle-bridge iframe {
  opacity: 1 !important;
  pointer-events: auto;
}

.process-transition-ink {
  position: absolute;
  z-index: 5;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--process-expansion-left);
  overflow: hidden;
  background: #050607;
  clip-path: inset(0 0 0 var(--process-transition-clip-left));
  pointer-events: none;
  will-change: width, clip-path;
}

.process-transition-copy {
  position: absolute;
  top: var(--process-transition-copy-y);
  left: var(--process-transition-copy-x);
  width: var(--process-transition-copy-width);
  margin: 0;
  color: rgb(245 246 246 / 96%);
  font-size: var(--process-transition-copy-size);
  font-weight: 400;
  letter-spacing: var(--process-transition-copy-tracking);
  line-height: var(--process-transition-copy-leading);
  opacity: var(--process-transition-copy-opacity);
  word-break: keep-all;
  will-change: opacity, transform;
}

.process-transition-copy--first {
  transform: translate3d(
    var(--process-transition-copy-shift),
    var(--process-transition-copy-first-y),
    0
  );
}

.process-transition-copy--second {
  opacity: var(--process-transition-copy-second-opacity);
  transform: translate3d(0, var(--process-transition-copy-second-y), 0);
}

.process-transition-copy span,
.process-transition-copy strong {
  display: block;
  white-space: normal;
}

.process-transition-copy strong {
  font-weight: 700;
}

.control-panel,
.panel-launcher {
  position: fixed;
  z-index: 100;
  right: 24px;
  color: #f5f5f5;
}

.control-panel {
  bottom: 24px;
  display: grid;
  width: min(390px, calc(100vw - 48px));
  max-height: calc(100svh - 48px);
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: 14px;
  background: rgb(8 9 10 / 91%);
  box-shadow: 0 24px 80px rgb(0 0 0 / 34%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  backdrop-filter: blur(18px) saturate(120%);
}

.control-panel[data-collapsed="true"] {
  max-height: none;
  grid-template-rows: auto;
}

.control-panel[data-collapsed="true"] .control-panel__tabs,
.control-panel[data-collapsed="true"] .control-panel__scroll,
.control-panel[data-collapsed="true"] .control-panel__footer {
  display: none;
}

.control-panel[hidden] {
  display: none;
}

.control-panel__header {
  display: flex;
  min-height: 66px;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgb(255 255 255 / 10%);
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.control-panel[data-collapsed="true"] .control-panel__header {
  border-bottom: 0;
}

.control-panel.is-dragging .control-panel__header {
  cursor: grabbing;
}

.control-panel__identity {
  display: grid;
  gap: 2px;
}

.control-panel__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.control-panel__header small {
  color: rgb(255 255 255 / 52%);
  font-family: "Oswald Lab", sans-serif;
  font-size: 10px;
  letter-spacing: 0.16em;
}

.control-panel__header strong {
  font-family: "Oswald Lab", sans-serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.08em;
}

.control-panel__header button {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  font-family: sans-serif;
  font-size: 20px;
  line-height: 1;
  touch-action: manipulation;
}

.control-panel__tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-bottom: 1px solid rgb(255 255 255 / 10%);
}

.control-panel__tabs button {
  min-height: 46px;
  min-width: 0;
  padding: 0 8px;
  border: 0;
  border-right: 1px solid rgb(255 255 255 / 10%);
  background: transparent;
  color: rgb(255 255 255 / 48%);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
}

.control-panel__tabs button:last-child {
  border-right: 0;
}

.control-panel__tabs button[aria-selected="true"] {
  background: #f2f2ef;
  color: #0a0b0c;
}

.control-panel__scroll {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-color: rgb(255 255 255 / 26%) transparent;
}

.control-group {
  padding: 15px 16px 22px;
}

.control-group[hidden] {
  display: none;
}

.particle-camera-card {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 11px;
  background: rgb(255 255 255 / 5%);
}

.particle-camera-card strong {
  font-size: 15px;
  letter-spacing: -0.025em;
}

.particle-camera-card p,
.particle-camera-card ul {
  margin: 0;
  color: rgb(255 255 255 / 64%);
  font-size: 11px;
  line-height: 1.65;
  word-break: keep-all;
}

.particle-camera-card ul {
  display: grid;
  gap: 3px;
  padding-left: 18px;
}

.particle-camera-card__open {
  min-height: 44px;
  padding: 0 15px;
  border: 1px solid rgb(255 255 255 / 78%);
  border-radius: 8px;
  background: #f2f2ef;
  color: #0a0b0c;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
}

.particle-camera-card__open:disabled {
  cursor: wait;
  opacity: 0.48;
}

.particle-camera-card small {
  color: rgb(255 255 255 / 44%);
  font-size: 10px;
  line-height: 1.5;
}

.control-section-title {
  margin: 18px 0 12px;
  color: rgb(255 255 255 / 44%);
  font-family: "Oswald Lab", sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
}

.control-section-title:first-child {
  margin-top: 2px;
}

.control-section-title--sub {
  margin-top: 14px;
  color: rgb(255 255 255 / 30%);
  font-size: 9px;
}

.control-readout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 11px;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 8px;
  background: rgb(255 255 255 / 5%);
}

.control-readout span {
  color: rgb(255 255 255 / 52%);
  font-size: 10px;
}

.control-readout strong {
  font-size: 11px;
  font-weight: 700;
}

.control-readout--progress {
  margin-top: 13px;
}

.control-color-readout {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgb(255 255 255 / 10%);
}

.control-color-readout:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.control-color-readout__swatch {
  width: 34px;
  height: 34px;
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 50%;
  background: #050607;
  box-shadow: inset 0 0 0 3px rgb(0 0 0 / 18%);
}

.control-color-readout > span:last-child {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.control-color-readout b {
  font-size: 11px;
  font-weight: 700;
}

.control-color-readout output {
  overflow: hidden;
  color: rgb(255 255 255 / 54%);
  font-family: "Oswald Lab", sans-serif;
  font-size: 10px;
  letter-spacing: 0.03em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.control-row {
  display: grid;
  gap: 7px;
  margin-top: 13px;
}

.control-row > span {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.control-row b {
  font-size: 11px;
  font-weight: 400;
}

.control-row output {
  color: rgb(255 255 255 / 60%);
  font-family: "Oswald Lab", sans-serif;
  font-size: 11px;
  letter-spacing: 0.03em;
}

.control-row input[type="range"] {
  width: 100%;
  accent-color: #f4f4f1;
  cursor: ew-resize;
}

.control-row select {
  width: 100%;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 7px;
  background: #111315;
  color: #f4f4f1;
  font-size: 11px;
}

.control-row input[type="range"]:disabled {
  cursor: not-allowed;
  opacity: 0.38;
}

.control-panel__footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid rgb(255 255 255 / 10%);
}

.control-panel__footer button,
.panel-launcher {
  min-height: 44px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
}

.control-panel__footer button + button {
  border-left: 1px solid rgb(255 255 255 / 10%);
}

.control-panel__footer button:hover,
.control-panel__footer button:focus-visible,
.control-panel__header button:hover,
.control-panel__header button:focus-visible {
  background: rgb(255 255 255 / 10%);
}

.panel-launcher {
  bottom: 24px;
  padding: 0 17px;
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 999px;
  background: rgb(8 9 10 / 86%);
  box-shadow: 0 12px 40px rgb(0 0 0 / 25%);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.panel-launcher[hidden] {
  display: none;
}

@media (max-width: 900px) {
  :root {
    --frame-inset: 22px;
    --frame-current-inset: 22px;
    --logo-x: 22px;
    --logo-y: 24px;
    --name-x: 62px;
    --name-y: 24px;
    --brand-height: 28px;
    --menu-right: 22px;
    --menu-y: 76px;
    --menu-size: 12px;
    --menu-gap: 13px;
    --action-gap: 17px;
    --slogan-x: 7vw;
    --slogan-y: 36vh;
    --slogan-size: 24vw;
  }

  .hero-lab__frame {
    inset: 22px;
  }

  .lab-brand__symbol,
  .lab-brand__name {
    height: 28px;
  }

  .lab-brand__symbol {
    top: 24px;
    left: 22px;
  }

  .lab-brand__name {
    top: 24px;
    left: 62px;
  }

  .lab-navigation {
    top: 76px;
    right: 22px;
    max-width: calc(100vw - 44px);
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 13px;
    row-gap: 10px;
    font-size: 12px;
  }

  .lab-navigation__divider {
    margin-right: 4px;
    margin-left: 4px;
  }

  .hero-slogan {
    top: 36vh;
    left: 7vw;
    font-size: 24vw;
  }

  .map-location {
    gap: 12px;
  }

  .map-location__point {
    width: 9px;
    height: 9px;
    margin-top: 4px;
  }

  .map-location strong {
    font-size: 13px;
  }

  .map-location .map-location__role {
    font-size: 11px;
  }

  .map-identity {
    top: 20vh;
    right: 7vw;
    width: 86vw;
    gap: 18px;
    font-size: min(var(--map-identity-size), 8.2vw);
    text-align: left;
  }

  .map-identity > * {
    justify-self: start;
  }

  .scroll-guide {
    bottom: 28px;
  }

  .control-panel,
  .panel-launcher {
    right: 12px;
  }

  .control-panel {
    bottom: 12px;
    max-height: min(70svh, 680px);
  }

  .panel-launcher {
    bottom: 12px;
  }

}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .scroll-stage {
    height: 100svh;
  }

  .hero-lab__frame {
    inset: 0 !important;
  }

  .lab-header {
    display: none;
  }

  .hero-slogan {
    visibility: visible;
    opacity: var(--slogan-opacity) !important;
    transform: none !important;
  }

  .map-scene {
    clip-path: none !important;
  }

  .scroll-guide__track i {
    animation: none;
  }

}