:root {
  --font-display: "KH Teka TRIAL", Inter, "SF Pro Display", "PingFang SC", "Noto Sans CJK SC", Arial, sans-serif;
  --font-body: Inter, "SF Pro Text", "PingFang SC", "Noto Sans CJK SC", Arial, sans-serif;

  --text-t1: #000000;
  --text-t2: #000000bf;
  --text-t3: #00000073;
  --text-placeholder: #00000033;

  --surface-white: #ffffff;
  --surface-white-a60: #ffffff99;
  --surface-white-a40: #ffffff66;
  --surface-gray: #f2f2f2;
  --surface-dark: #000000;
  --surface-dark-a60: #00000099;
  --surface-dark-a40: #00000066;
  --separator-dark: #0000001a;
  --separator-white: #ffffff33;

  --page-bg-a: var(--surface-white);
  --page-bg-b: var(--surface-white);
  --surface: var(--surface-white);
  --surface-muted: var(--surface-gray);
  --border: var(--separator-dark);
  --accent: var(--text-t1);
  --highlight: #ff99dd;
  --accent-soft: var(--surface-gray);
  --resume-card-radius: 16px;
  --resume-card-stroke-width: 0.5px;
  --resume-card-stroke-color: var(--border);
  --resume-avatar-object-position: 50% 0%;
  --resume-avatar-radius: 8px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-18: 72px;
  --space-24: 96px;
  --space-32: 128px;

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --shadow-focus: 0 0 0 3px rgba(0, 0, 0, 0.12);
}

* {
  box-sizing: border-box;
}

html {
  color: var(--text-t1);
  background: var(--surface-white);
  font-family: var(--font-body);
  text-rendering: geometricPrecision;
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--surface-white);
}

@media (pointer: fine) {
  html,
  body,
  button,
  a,
  [role="button"] {
    cursor: none;
  }
}

.resume-site {
  margin: 0;
  min-height: 100dvh;
  background: #0f1117;
  color: #ffffff;
  font-family: "KH Teka TRIAL", "PingFang SC", "Noto Sans CJK SC", sans-serif;
}

.resume-page {
  position: relative;
  min-height: max(800px, 100dvh);
  overflow: hidden;
}

.resume-bg {
  position: absolute;
  inset: 0;
}

.resume-bg img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
  transform: translateY(var(--resume-bg-shift, 0px));
  transform-origin: center center;
  transition: transform 120ms linear;
}

.resume-bg > span {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
}

.resume-ray {
  position: absolute;
  top: -631px;
  left: 50%;
  width: 2061px;
  height: 2061px;
  transform: translateX(-50%) scale(1.2);
  transform-origin: center center;
  pointer-events: none;
}

.custom-cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
  width: 60px;
  height: 12px;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-100px, -100px, 0);
  mix-blend-mode: difference;
  will-change: transform, opacity;
}

.custom-cursor img {
  display: block;
  width: 60px;
  height: 12px;
}

.custom-cursor.is-visible {
  opacity: 1;
}

@media (pointer: coarse) {
  .custom-cursor {
    display: none;
  }
}

.resume-grid {
  position: relative;
  z-index: 1;
  display: grid;
  min-height: max(800px, 100dvh);
  padding-inline: 16px;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 8px;
}

.resume-card-center {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 320px;
  height: 640px;
  overflow: hidden;
  border: var(--resume-card-stroke-width) solid var(--resume-card-stroke-color);
  border-radius: var(--resume-card-radius);
  background: #ffffff;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.resume-card-state {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(0) scale(1);
  will-change: transform, opacity;
}

.resume-card-state.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.resume-card-state--default {
  overflow: hidden;
  border-radius: var(--resume-card-radius);
  touch-action: none;
  cursor: pointer;
}

.resume-default-logo {
  position: absolute;
  left: calc(50% - 122.5px);
  top: calc(50% - 310px);
  margin: 0;
  color: #000000;
  font-family: "GT Super Ds Trial", "Times New Roman", serif;
  font-size: 40px;
  font-style: italic;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0;
  transform: translateX(-50%);
}

.resume-default-cta {
  position: absolute;
  top: 15.7px;
  left: 50%;
  min-width: 80px;
  transform: translateX(-50%);
}

.resume-card-state--detail {
  background: #ffffff;
  border: 0.3px solid #f2f2f2;
  border-radius: 16px;
}

.resume-card-scroll {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px;
  scrollbar-width: none;
}

.resume-card-scroll > * {
  flex: 0 0 auto;
}

.resume-card-scroll::-webkit-scrollbar {
  display: none;
}

.resume-avatar-frame {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: 100%;
  margin: 0;
  overflow: hidden;
  cursor: pointer;
}

.resume-avatar {
  position: absolute;
  top: 0;
  left: 50%;
  width: auto;
  min-width: 100%;
  height: 100%;
  transform: translateX(-50%);
  object-fit: cover;
  object-position: var(--resume-avatar-object-position);
  border-radius: var(--resume-avatar-radius);
}

.resume-avatar-overlay {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: var(--resume-avatar-radius);
  pointer-events: none;
  opacity: 1;
  transition: opacity 120ms ease;
}

.resume-avatar-frame--default {
  height: 100%;
}

.resume-avatar-frame--detail {
  width: 100%;
  height: 376.963px;
}

.resume-avatar-smart {
  position: absolute;
  z-index: 8;
  overflow: hidden;
  pointer-events: none;
  will-change: left, top, width, height, border-radius, opacity;
}

.resume-avatar-smart img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0%;
}

.resume-avatar-smart::after {
  content: none;
}

.resume-intro,
.resume-body,
.resume-section {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
}

.resume-block {
  margin: 0;
}

.resume-intro p,
.resume-body p {
  margin: 0;
  color: #000000;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
}

.resume-intro strong {
  font-family: "GT Super Txt Trial", "Times New Roman", serif;
  font-style: italic;
  font-weight: 700;
  line-height: 1.35;
}

.resume-section {
  gap: 20px;
  margin-top: 0;
}

.resume-section h3 {
  margin: 0;
  color: #000000;
  font-family: "GT Super Txt Trial", "Times New Roman", serif;
  font-size: 16px;
  font-style: italic;
  font-weight: 700;
  line-height: 1.35;
}

.resume-project {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
}

.resume-project-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.resume-project-title img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.resume-project-title .resume-project-logo--wide {
  width: 32px;
}

.resume-lemon8-logo {
  width: 32px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 32px;
  background: #000000;
}

.resume-lemon8-logo img {
  width: 24.686px;
  height: 10.286px;
  object-fit: contain;
}

.resume-project-title p {
  margin: 0;
  color: #000000;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
}

.resume-project-cover {
  width: 100%;
  height: 144px;
  object-fit: cover;
}

.resume-copy {
  margin: 0;
  color: rgba(0, 0, 0, 0.75);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.35;
}

.resume-pill {
  display: inline-flex;
  min-width: 52px;
  height: 24px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 24px;
  padding: 1px 8px;
  text-decoration: none;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0;
}

.resume-pill .pill-label {
  display: inline-flex;
  align-items: baseline;
}

.pill-arrow {
  margin-left: 3px;
  font-size: 12px;
  line-height: 1;
  transform: translateY(0.5px);
}

.resume-pill--highlight {
  background: #ff99dd;
  color: #000000;
}

.resume-pill--gray {
  background: #f2f2f2;
  color: #000000;
}

.resume-social,
.resume-contact {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.resume-social {
  width: 100px;
}

.resume-contact {
  width: 140px;
}

.resume-social h3,
.resume-contact h3 {
  margin: 0;
  color: #000000;
  font-family: "GT Super Txt Trial", "Times New Roman", serif;
  font-size: 16px;
  font-style: italic;
  font-weight: 700;
  line-height: 1.35;
}

.resume-social p,
.resume-contact p {
  margin: 0;
  color: #000000;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
}

.resume-copyright {
  margin-top: 0;
  color: rgba(0, 0, 0, 0.2);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.35;
}

.resume-copyright p {
  margin: 0;
}

.resume-side-text,
.resume-side-text-wrap {
  align-self: center;
}

.resume-side-text {
  margin: 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0;
  text-align: center;
  white-space: nowrap;
}

.resume-side-text--left {
  grid-column: 3 / span 2;
  justify-self: end;
}

.resume-side-text-wrap {
  grid-column: 9 / span 3;
  justify-self: start;
  display: inline-flex;
  width: 226px;
  height: 32px;
  align-items: center;
  gap: 10px;
}

.resume-audio-button {
  display: inline-flex;
  width: 48px;
  height: 24px;
  align-items: center;
  justify-content: center;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  border-radius: 24px;
  background: transparent;
  padding: 1px 8px;
  cursor: pointer;
}

.resume-audio-button.is-playing {
  border-color: #ffffff;
}

.resume-audio-bars {
  display: inline-flex;
  width: 25px;
  height: 12px;
  align-items: flex-end;
  justify-content: space-between;
}

.resume-audio-bars i {
  display: block;
  width: 2px;
  height: var(--bar-h);
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.85);
  transition: height 120ms linear;
}

.resume-audio-button.is-playing .resume-audio-bars i {
  background: #ffffff;
}

.resume-audio-player {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  left: -9999px;
  top: 0;
}

.resume-audio-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
}

.resume-audio-button:hover {
  border-color: #ffffff;
}

.resume-audio {
  display: inline-flex;
  width: 48px;
  height: 24px;
  align-items: center;
  justify-content: center;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  border-radius: 24px;
  padding: 1px 8px;
}

.resume-audio img {
  width: 25px;
  height: 12px;
}

.resume-bottom-logo {
  position: absolute;
  left: 16px;
  bottom: 16px;
  width: 32px;
  height: 32px;
  z-index: 4;
  border: 0;
  background: transparent;
  padding: 0;
  color: inherit;
  cursor: pointer;
}

.resume-bottom-logo img {
  position: absolute;
  display: block;
  max-width: none;
  pointer-events: none;
}

.resume-bottom-logo-v1 {
  left: 14.07px;
  bottom: 9.93px;
  width: 14.472px;
  height: 13.176px;
}

.resume-bottom-logo-v2 {
  left: 3px;
  bottom: 5.11px;
  width: 15.36px;
  height: 22.392px;
}

.resume-bottom-logo:focus-visible {
  outline: none;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.8));
}

.resume-menu {
  position: absolute;
  left: 16px;
  bottom: 64px;
  z-index: 5;
  width: 320px;
  height: 640px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  color: #000000;
  pointer-events: none;
  opacity: 1;
  gap: 0;
}

.resume-menu.fxui-menu {
  background: transparent;
  border: 0;
}

.resume-menu::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  background: rgba(242, 242, 242, 0.9);
  backdrop-filter: blur(50px);
  transform-origin: left bottom;
  transform: scale(0, 0);
  opacity: 0;
  transition:
    transform 250ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 250ms ease;
}

.resume-menu__logo,
.resume-menu__close,
.resume-menu__nav,
.resume-menu__copyright {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 320ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 1;
}

.resume-menu__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  position: relative;
}

.resume-menu__logo {
  display: none;
}

.resume-menu__logo img {
  position: absolute;
  display: block;
  max-width: none;
  pointer-events: none;
}

.resume-menu__logo-v1 {
  left: 28.15px;
  bottom: 19.86px;
  width: 28.944px;
  height: 26.352px;
}

.resume-menu__logo-v2 {
  left: 6px;
  bottom: 10.22px;
  width: 30.72px;
  height: 44.784px;
}

.resume-menu__close {
  position: absolute;
  right: 15px;
  top: 15px;
  min-width: 52px;
  height: 24px;
  background: rgba(0, 0, 0, 0.1);
  color: #000000;
  font-size: 12px;
  line-height: 1.35;
}

.resume-menu .resume-menu__nav {
  position: absolute;
  left: 15px;
  right: 15px;
  top: calc(15px + 24px + 16px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 32px;
  width: auto;
  margin: 0;
}

.resume-menu__group,
.resume-menu__title {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 200ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: 0ms;
}

.resume-menu__sub-tab {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 200ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: 0ms;
}

.resume-menu__group {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 0;
}

.resume-menu__title {
  display: block;
  width: 100%;
  color: #000000;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0;
  text-decoration: none;
}

.resume-menu__sub-tabs {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 12px;
}

.resume-menu__sub-tab {
  display: flex;
  min-height: 0;
  align-items: flex-start;
  padding-bottom: 12px;
  gap: 12px;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.1);
  color: #000000;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
  text-decoration: none;
}

.resume-menu__sub-tab:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.resume-menu__sub-tab span:first-child {
  flex: 1 0 0;
  min-width: 0;
}

.resume-menu__sub-tab span:last-child {
  flex: 0 0 auto;
  color: rgba(0, 0, 0, 0.45);
}

.resume-menu__sub-tab--jp span:first-child {
  font-family: "Hiragino Mincho Pro", "Yu Mincho", serif;
  font-weight: 600;
}

.resume-menu__copyright {
  position: absolute;
  left: 15px;
  right: 15px;
  bottom: 47px;
  margin: 0;
  color: rgba(0, 0, 0, 0.2);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.35;
  transform: translateY(100%);
}

.resume-menu__copyright p {
  margin: 0;
}

.resume-menu.is-open {
  pointer-events: auto;
}

.resume-menu.is-open::before {
  opacity: 1;
  transform: scale(1);
}

.resume-menu.is-open .resume-menu__logo,
.resume-menu.is-open .resume-menu__close,
.resume-menu.is-open .resume-menu__nav,
.resume-menu.is-open .resume-menu__copyright {
  opacity: 1;
  transform: translateY(0);
}

.resume-menu.is-open .resume-menu__copyright {
  transform: translateY(100%);
}

.resume-menu.is-open .resume-menu__logo,
.resume-menu.is-open .resume-menu__close,
.resume-menu.is-open .resume-menu__copyright {
  transition-delay: 120ms;
}

.resume-menu.is-open .resume-menu__group,
.resume-menu.is-open .resume-menu__title,
.resume-menu.is-open .resume-menu__sub-tab {
  opacity: 1;
  transform: translateY(0);
  transition-delay: var(--item-delay);
}

.resume-menu__title:hover,
.resume-menu__title:focus-visible,
.resume-menu__sub-tab:hover,
.resume-menu__sub-tab:focus-visible,
.resume-menu__close:hover,
.resume-menu__close:focus-visible {
  color: #000000;
  outline: none;
}

.home-site {
  margin: 0;
  min-height: 100dvh;
  background: #e5e5e5;
  color: #000000;
  font-family: "KH Teka TRIAL", "PingFang SC", "Noto Sans CJK SC", sans-serif;
  overscroll-behavior: none;
}

.home-page {
  position: relative;
  min-height: 100dvh;
  overflow: hidden;
  background: #e5e5e5;
}

.home-site ::selection {
  background: transparent;
  color: inherit;
}

.home-stage {
  position: relative;
  min-height: max(800px, 100dvh);
  overflow: hidden;
  isolation: isolate;
  user-select: none;
  -webkit-user-select: none;
}

.home-stage *,
.home-stage img,
.home-stage video {
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

.home-scene--desktop {
  position: absolute;
  left: 50%;
  top: 0;
  width: 1440px;
  height: 800px;
  overflow: hidden;
  transform: translateX(-50%) scale(var(--home-scene-scale, 1));
  transform-origin: center top;
}

.home-scene-mobile {
  display: none;
}

.home-skew {
  transform: rotate(-10deg) skewX(-10deg) scaleY(0.98);
  transform-origin: center center;
}

.home-copy--brand .home-skew,
.home-copy--experience .home-skew,
.home-mobile-copy--brand .home-skew,
.home-mobile-copy--experience .home-skew {
  opacity: 0;
  transition:
    opacity 200ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--item-delay, 0ms);
  will-change: opacity, transform;
}

.home-site.is-home-ready .home-copy--brand .home-skew,
.home-site.is-home-ready .home-copy--experience .home-skew,
.home-site.is-home-ready .home-mobile-copy--brand .home-skew,
.home-site.is-home-ready .home-mobile-copy--experience .home-skew {
  opacity: 1;
  transform: translateY(0) rotate(-10deg) skewX(-10deg) scaleY(0.98);
}

.home-site:not(.is-home-ready) .home-copy--brand .home-skew,
.home-site:not(.is-home-ready) .home-copy--experience .home-skew,
.home-site:not(.is-home-ready) .home-mobile-copy--brand .home-skew,
.home-site:not(.is-home-ready) .home-mobile-copy--experience .home-skew {
  transform: translateY(22px) rotate(-10deg) skewX(-10deg) scaleY(0.98);
}

.home-copy,
.home-mobile-copy {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000000;
}

.home-copy p,
.home-mobile-copy p {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
  text-align: center;
  white-space: nowrap;
}

.home-copy--brand {
  left: 200.13px;
  top: 307px;
  width: 112.268px;
  height: 43.796px;
  transform: translateX(-50%);
}

.home-copy--clock {
  left: 465px;
  top: 192.99px;
  width: 141.812px;
  height: 169.005px;
  transform: translateX(-50%);
}

.home-copy--experience {
  left: 781.47px;
  top: 196px;
  width: 262.944px;
  height: 90.364px;
  transform: translateX(-50%);
}

.home-copy--experience .home-skew,
.home-mobile-copy--experience .home-skew {
  display: grid;
  gap: 0;
  justify-items: center;
}

.home-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.home-brand__pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--home-logo-frame-width, 48px);
  height: var(--home-logo-frame-height, 24px);
  border-radius: var(--home-logo-frame-radius, 48px);
  background: var(--home-logo-frame-bg, #fff700);
}

.home-brand__pill img {
  display: block;
  position: absolute;
  left: var(--home-logo-left, 6.384px);
  top: var(--home-logo-top, 5.057px);
  width: var(--home-logo-width, 36.09px);
  height: var(--home-logo-height, 13.886px);
  max-width: none;
  max-height: none;
  transform: var(--home-logo-transform, none);
  object-fit: var(--home-logo-object-fit, fill);
}

.home-brand__pill.is-text::before {
  content: attr(data-mark);
  color: #000000;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
}

.home-brand p {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
  white-space: nowrap;
}

.home-clock {
  position: relative;
  width: 144px;
  height: 144px;
  --clock-center-x: 50%;
  --clock-center-y: 47.91%;
  --clock-hour-angle: 0deg;
  --clock-minute-angle: 0deg;
  --clock-second-angle: 0deg;
  border: 0.5px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  overflow: hidden;
  box-shadow: none;
}

.home-clock[data-clock-card-trigger] {
  cursor: pointer;
}

.home-clock[data-clock-card-trigger]:focus-visible {
  outline: none;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.72));
}

.home-clock::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    ellipse 145px 74px at 0 23%,
    rgba(255, 255, 255, 0.6) 0%,
    rgba(255, 255, 255, 0) 100%
  );
  mix-blend-mode: soft-light;
  pointer-events: none;
}

.home-clock__base {
  display: block;
  position: absolute;
  left: -1.46%;
  top: -2.05%;
  width: 103.51%;
  height: 103.51%;
  max-width: none;
  mix-blend-mode: multiply;
  object-fit: cover;
}

.home-clock__hand {
  position: absolute;
  top: var(--clock-center-y);
  pointer-events: none;
  will-change: transform;
}

.home-clock__hand--hour {
  left: var(--clock-center-x);
  z-index: 4;
  width: 24.26%;
  height: 2.1%;
  border-radius: 2px;
  background: #ef2218;
  transform: translateY(-50%) rotate(calc(var(--clock-hour-angle) - 90deg));
  transform-origin: 0 50%;
}

.home-clock__hand--minute {
  left: calc(var(--clock-center-x) - 2.1%);
  z-index: 3;
  width: 37.7%;
  height: 1.75%;
  border-radius: 2px;
  background: #1c1919;
  transform: translateY(-50%) rotate(calc(var(--clock-minute-angle) - 90deg));
  transform-origin: 5.57% 50%;
}

.home-clock__hand--second {
  left: calc(var(--clock-center-x) - 5.24%);
  z-index: 2;
  width: 40.49%;
  height: 0.45%;
  border-radius: 0;
  background: #111111;
  transform: translateY(-50%) rotate(calc(var(--clock-second-angle) - 90deg));
  transform-origin: 12.94% 50%;
}

.home-clock__pin {
  position: absolute;
  left: var(--clock-center-x);
  top: var(--clock-center-y);
  z-index: 5;
  width: 4.19%;
  height: 4.19%;
  border-radius: 50%;
  background: #111111;
  transform: translate(-50%, -50%);
  box-shadow: none;
  pointer-events: none;
}

.home-light {
  position: absolute;
  width: 320px;
  height: 429px;
}

.home-light--one {
  left: 60px;
  top: 0;
}

.home-light--two {
  left: 640px;
  top: -80px;
}

.home-light__glow {
  position: absolute;
  left: 50%;
  top: 229px;
  width: 320px;
  height: 200px;
  opacity: 0;
  mix-blend-mode: soft-light;
  overflow: visible;
  transform: translateX(-50%);
  animation: home-light-startup 500ms linear 1 both;
}

.home-light__glow-image {
  position: absolute;
  left: -31.25%;
  top: -50%;
  display: block;
  width: 162.5%;
  height: 200%;
  max-width: none;
  object-fit: fill;
  pointer-events: none;
}

.home-light__line {
  position: absolute;
  left: calc(50% - 24px);
  top: 0;
  width: 0.5px;
  height: 108px;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1;
}

.home-light__lamp-wrap {
  position: absolute;
  left: 58.996px;
  top: 88px;
  width: 157.569px;
  height: 187.784px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: center center;
  z-index: 2;
}

.home-light__lamp-visual {
  position: relative;
  width: 160px;
  height: 160px;
  flex: 0 0 auto;
  overflow: hidden;
  transform: rotate(-10deg) skewX(-10deg) scaleY(0.98);
  transform-origin: center center;
}

.home-light__lamp,
.home-light__lamp-overlay {
  position: absolute;
  inset: 0;
  display: block;
}

.home-light__lamp {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.home-light__lamp-overlay {
  display: none;
  pointer-events: none;
}

.home-light__lamp-overlay--soft {
  background: #ffffff;
  mix-blend-mode: soft-light;
}

.home-light__lamp-overlay--shine {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5));
  mix-blend-mode: hard-light;
}

@keyframes home-light-startup {
  0%,
  19.999% {
    opacity: 0;
  }

  20%,
  39.999% {
    opacity: 1;
  }

  40%,
  59.999% {
    opacity: 0;
  }

  60%,
  79.999% {
    opacity: 1;
  }

  80%,
  99.999% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.home-showcase {
  position: absolute;
  cursor: pointer;
  touch-action: pan-y;
  user-select: none;
}

.home-showcase:focus-visible {
  outline: none;
}

.home-showcase:focus-visible .home-showcase__plane::before {
  border-color: rgba(255, 255, 255, 0.9);
}

.home-showcase--desktop {
  left: 144px;
  top: 320px;
  width: 1134.256px;
  height: 657.919px;
}

.home-showcase__leg {
  position: absolute;
  display: block;
  width: 1px;
  background: rgba(0, 0, 0, 0.92);
  pointer-events: none;
  z-index: 3;
}

.home-showcase--desktop .home-showcase__leg--left {
  left: 0;
  bottom: 179px;
  height: 340px;
}

.home-showcase--desktop .home-showcase__leg--center {
  left: 347px;
  bottom: 0;
  height: 340px;
}

.home-showcase--desktop .home-showcase__leg--right {
  left: 1133px;
  bottom: 138px;
  height: 340px;
}

.home-showcase__plane {
  position: absolute;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 2;
}

.home-showcase__plane::before {
  content: "";
  display: block;
  width: 800px;
  height: 400px;
  border: 1px solid rgba(0, 0, 0, 0.9);
  transform: rotate(-10deg) skewX(50deg) scaleY(0.64);
  transform-origin: center center;
}

.home-showcase--desktop .home-showcase__plane {
  height: 338.919px;
}

.home-showcase--desktop .home-showcase__plane--back {
  bottom: 298px;
}

.home-showcase--desktop .home-showcase__plane--front {
  bottom: 308px;
}

.home-showcase__surface-media {
  position: absolute;
  left: 0;
  overflow: hidden;
  background: transparent;
  z-index: 4;
  --home-surface-transform: translateX(0);
  transform: var(--home-surface-transform);
  transition:
    opacity 180ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.home-showcase__surface-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border: 1px solid rgba(0, 0, 0, 0.9);
  pointer-events: none;
}

.home-showcase__surface-media img,
.home-showcase__surface-media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: var(--home-media-fit, cover);
}

.home-showcase__surface-media .home-project-video,
.home-showcase__surface-media .home-project-image {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.home-showcase__surface-media .home-project-video {
  z-index: 0;
}

.home-showcase__surface-media .home-project-image {
  z-index: 1;
}

.home-project-media-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
  transition: transform 350ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
  backface-visibility: hidden;
  contain: paint;
}

.home-project-media-layer--outgoing {
  z-index: 1;
}

.home-project-media-layer--incoming {
  z-index: 2;
  transform: translate3d(0, var(--home-project-enter-y, 100%), 0);
}

.home-showcase__surface-media.is-project-push-active .home-project-media-layer--outgoing {
  transform: translate3d(0, var(--home-project-exit-y, -100%), 0);
}

.home-showcase__surface-media.is-project-push-active .home-project-media-layer--incoming {
  transform: translate3d(0, 0, 0);
}

.home-showcase__surface-media.is-project-changing,
.home-showcase__surface-media.is-project-entering {
  opacity: 1;
  transform: var(--home-surface-transform);
}

.home-poster__media.is-project-changing {
  opacity: 1;
}

.home-poster__media.is-project-entering {
  animation: home-project-poster-enter 250ms linear both;
}

.home-site.is-home-project-changing .home-copy--brand .home-skew,
.home-site.is-home-project-changing .home-copy--experience .home-skew,
.home-site.is-home-project-changing .home-mobile-copy--brand .home-skew,
.home-site.is-home-project-changing .home-mobile-copy--experience .home-skew {
  opacity: 0;
  transform: translateY(22px) rotate(-10deg) skewX(-10deg) scaleY(0.98);
  transition: none;
  transition-delay: 0ms;
}

.home-site.is-home-project-entering .home-copy--brand .home-skew,
.home-site.is-home-project-entering .home-copy--experience .home-skew,
.home-site.is-home-project-entering .home-mobile-copy--brand .home-skew,
.home-site.is-home-project-entering .home-mobile-copy--experience .home-skew {
  transition: none;
  transition-delay: 0ms;
  animation: home-project-text-enter 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--item-delay, 0ms);
}

@keyframes home-project-media-enter {
  from {
    opacity: 1;
    transform: var(--home-surface-transform) translateY(120%);
  }

  to {
    opacity: 1;
    transform: var(--home-surface-transform) translateY(0);
  }
}

@keyframes home-project-poster-enter {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes home-project-text-enter {
  from {
    opacity: 0;
    transform: translateY(22px) rotate(-10deg) skewX(-10deg) scaleY(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) rotate(-10deg) skewX(-10deg) scaleY(0.98);
  }
}

.home-showcase--desktop .home-showcase__surface-media {
  left: 167.128px;
  top: -30.541px;
  width: 800px;
  height: 400px;
  --home-surface-transform: rotate(-10deg) skewX(50deg) scaleY(0.64);
  transform-origin: center center;
}

.home-poster {
  position: absolute;
  left: 1197px;
  top: 0;
  width: 173px;
  height: 454px;
  perspective: 860px;
  perspective-origin: 50% 30%;
  touch-action: none;
  --poster-x: 0px;
  --poster-y: 0px;
  --poster-tilt-x: 0deg;
  --poster-tilt-y: 0deg;
  --poster-swing: 0deg;
  --poster-line-left-swing: 0deg;
  --poster-line-right-swing: 0deg;
  --poster-line-left-height: 80px;
  --poster-line-right-height: 160px;
  --poster-shine-x: 50%;
  --poster-shine-y: 50%;
  --poster-shine-opacity: 0;
  cursor: grab;
  z-index: 1;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

.home-poster *,
body.is-home-poster-dragging {
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

.home-poster::before {
  content: "";
  position: absolute;
  inset: -8px;
  z-index: 3;
  background: rgba(0, 0, 0, 0);
}

.home-poster__line {
  position: absolute;
  left: calc((173.205px - 80px) / 2);
  top: 0;
  width: 80px;
  height: 160px;
  pointer-events: none;
  z-index: 1;
}

.home-poster__line-segment {
  position: absolute;
  top: 0;
  width: 1px;
  background: rgba(0, 0, 0, 0.42);
  transform-origin: 50% 0;
  will-change: height, transform;
}

.home-poster__line-segment--left {
  left: 0;
  height: var(--poster-line-left-height);
  transform: rotateZ(var(--poster-line-left-swing));
}

.home-poster__line-segment--right {
  right: 0;
  height: var(--poster-line-right-height);
  transform: rotateZ(var(--poster-line-right-swing));
}

.home-poster__frame {
  position: absolute;
  left: 0;
  top: 80px;
  width: 173.205px;
  height: auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  transform:
    translate3d(var(--poster-x), var(--poster-y), 0)
    rotateZ(var(--poster-swing))
    rotateX(var(--poster-tilt-x))
    rotateY(var(--poster-tilt-y));
  transform-origin: 50% 0;
  transform-style: preserve-3d;
  will-change: transform;
  z-index: 1;
}

.home-poster__media {
  position: relative;
  flex: 0 0 200px;
  width: 200px;
  height: var(--home-poster-height, auto);
  aspect-ratio: var(--home-poster-aspect, 903 / 1280);
  overflow: hidden;
  border: 2px solid #ffffff;
  transform: rotate(30deg) skewX(30deg) scaleY(0.87);
  transform-origin: center top;
  transform-style: preserve-3d;
  background: #ffffff;
  box-shadow:
    0 18px 45px rgba(0, 0, 0, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  transition: height 250ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: height;
}

.home-poster__media img,
.home-poster__media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center top;
}

.home-poster__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: var(--poster-shine-opacity);
  background:
    radial-gradient(
      circle at var(--poster-shine-x) var(--poster-shine-y),
      rgba(255, 255, 255, 0.62) 0%,
      rgba(255, 255, 255, 0.22) 26%,
      rgba(255, 255, 255, 0) 62%
    ),
    linear-gradient(115deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0));
  mix-blend-mode: screen;
  transition: opacity 120ms ease;
}

.home-poster__media img,
.home-poster__media video {
  transform: translateZ(0);
}

.home-poster-media-layer {
  position: absolute;
  inset: 0;
  background: #ffffff;
  transition: opacity 250ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity;
}

.home-poster-media-layer img,
.home-poster-media-layer video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center top;
}

.home-poster-media-layer--outgoing {
  z-index: 1;
  opacity: 1;
}

.home-poster-media-layer--incoming {
  z-index: 2;
  opacity: 0;
}

.home-poster__media.is-poster-crossfade-active .home-poster-media-layer--outgoing {
  opacity: 0;
}

.home-poster__media.is-poster-crossfade-active .home-poster-media-layer--incoming {
  opacity: 1;
}

.home-poster.is-dragging {
  cursor: grabbing;
}

.home-poster:focus-visible {
  outline: none;
}

.home-poster:focus-visible .home-poster__media {
  box-shadow:
    0 18px 45px rgba(0, 0, 0, 0.12),
    0 0 0 2px rgba(255, 255, 255, 0.7),
    inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.home-site .resume-bottom-logo,
.home-site .resume-bottom-right {
  z-index: 4;
  color: #ffffff;
  mix-blend-mode: difference;
  isolation: auto;
}

.home-site .resume-bottom-logo {
  --fill-0: #ffffff;
  background: transparent;
}

.home-site .resume-bottom-logo img {
  mix-blend-mode: normal;
}

.home-site .resume-bottom-right {
  position: fixed;
  color: #ffffff;
  right: 20px;
  bottom: 20px;
}

.home-site .resume-bottom-right strong {
  color: #ffffff;
}

.home-site .resume-bottom-logo {
  position: fixed;
  left: 16px;
  bottom: 16px;
}

.home-page-indicator {
  position: fixed;
  left: calc(50% - 9px);
  bottom: 20px;
  z-index: 4;
  display: flex;
  min-width: 52px;
  height: 24px;
  align-items: center;
  gap: 5px;
  padding: 0 8px;
  border-radius: 24px;
  border: 0;
  background: rgba(0, 0, 0, 0.1);
  transform: translateX(-50%);
  pointer-events: auto;
}

.home-page-indicator__dot {
  display: block;
  flex: 0 0 auto;
  width: 4px;
  height: 4px;
  border: 0;
  border-radius: 3px;
  padding: 0;
  background: #ffffff;
  opacity: 1;
  cursor: pointer;
  transition:
    width 150ms cubic-bezier(0.34, 1.56, 0.64, 1),
    transform 150ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.home-page-indicator__dot.is-active {
  width: 11px;
}

.home-page-indicator__dot:focus-visible {
  outline: none;
  transform: scaleY(1.5);
}

.clock-card-layer {
  position: fixed;
  inset: 0;
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  padding: 16px 0;
  pointer-events: none;
  visibility: hidden;
  transition: visibility 0s linear 250ms;
}

.clock-card-layer::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  background: var(--text-placeholder, #00000033);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.clock-card-layer.is-open {
  pointer-events: auto;
  visibility: visible;
  transition-delay: 0s;
}

.clock-card-layer.is-open::before {
  opacity: 1;
}

.clock-card-layer.is-expanded {
  align-items: center;
}

.clock-card {
  --clock-card-clock-size: 288px;
  --clock-card-content-shift: 0px;
  position: relative;
  z-index: 1;
  width: 320px;
  height: 640px;
  max-width: calc(100vw - 32px);
  max-height: none;
  overflow: hidden;
  overscroll-behavior: contain;
  touch-action: none;
  border: 0.3px solid var(--surface-gray, #f2f2f2);
  border-radius: 16px;
  background: var(--surface-white, #ffffff);
  color: var(--text-t1, #000000);
  box-shadow: none;
  scrollbar-width: none;
  transform: scale(0.72);
  transform-origin: center center;
  transition:
    height 320ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 250ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.clock-card-layer.is-open .clock-card {
  transform: scale(1);
}

.clock-card-layer.is-expanded .clock-card {
  --clock-card-clock-size: 200px;
  --clock-card-content-shift: -88px;
  height: 640px;
  overflow-y: auto;
  touch-action: pan-y;
}

.clock-card::-webkit-scrollbar {
  display: none;
}

.clock-card__content {
  position: relative;
  min-height: 1555px;
  z-index: 1;
}

.clock-card-layer.is-expanded .clock-card__content {
  min-height: 1466px;
}

.clock-card__close {
  position: sticky;
  left: 50%;
  top: 19.7px;
  z-index: 2;
  min-width: 77px;
  height: 24px;
  padding: 1px 8px;
  border: 0;
  border-radius: 24px;
  background: var(--surface-gray, #f2f2f2);
  color: var(--text-t1, #000000);
  font-family: "KH Teka TRIAL", "PingFang SC", "Noto Sans CJK SC", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.35;
  text-align: center;
  cursor: pointer;
  opacity: 0;
  transform: translate(-50%, 22px);
  transition:
    opacity 200ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: 0ms;
}

.clock-card-layer.is-expanded .clock-card__close {
  min-width: 52px;
  background: var(--separator-dark, rgba(0, 0, 0, 0.1));
}

.clock-card__close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.18);
}

.clock-card__clock {
  position: absolute;
  left: 50%;
  top: 91.7px;
  width: var(--clock-card-clock-size);
  height: var(--clock-card-clock-size);
  border: 0;
  opacity: 0;
  transform: translate3d(-50%, 22px, 0);
  transition:
    opacity 200ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: 0ms;
  backface-visibility: hidden;
  contain: layout paint;
  will-change: width, height, transform, opacity;
}

.clock-card__clock .home-clock__base {
  backface-visibility: hidden;
  transform: translateZ(0);
}

.clock-card__clock.home-clock::after {
  background: none;
}

.clock-card__time {
  position: absolute;
  left: 50%;
  top: calc(427.7px + var(--clock-card-content-shift));
  width: 288px;
  color: var(--text-t3, rgba(0, 0, 0, 0.45));
  font-family: "KH Teka TRIAL", "PingFang SC", "Noto Sans CJK SC", sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.35;
  text-align: center;
  opacity: 0;
  transform: translate(-50%, 22px);
  transition:
    opacity 200ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: 0ms;
  will-change: top, transform, opacity;
}

.clock-card__time p {
  margin: 0;
}

.clock-card__title {
  position: absolute;
  left: 50%;
  top: calc(571.7px + var(--clock-card-content-shift));
  width: 288px;
  margin: 0;
  color: var(--text-t1, #000000);
  font-family: "KH Teka TRIAL", "PingFang SC", "Noto Sans CJK SC", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
  opacity: 0;
  transform: translate(-50%, 22px);
  transition:
    opacity 200ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: 0ms;
  will-change: top, transform, opacity;
}

.clock-card__details {
  position: absolute;
  left: 15.7px;
  top: calc(635.7px + var(--clock-card-content-shift));
  display: flex;
  width: 288px;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 200ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: 0ms;
  will-change: top, transform, opacity;
}

.clock-card-layer.is-open .clock-card__close,
.clock-card-layer.is-open .clock-card__clock,
.clock-card-layer.is-open .clock-card__time,
.clock-card-layer.is-open .clock-card__title,
.clock-card-layer.is-open .clock-card__details {
  opacity: 1;
  transform: translateY(0);
}

.clock-card-layer.is-open .clock-card__close {
  transform: translate(-50%, 0);
  transition-delay: 120ms;
}

.clock-card-layer.is-open .clock-card__clock {
  transform: translate3d(-50%, 0, 0);
  transition-delay: 150ms;
}

.clock-card-layer.is-open .clock-card__time {
  transform: translate(-50%, 0);
  transition-delay: 185ms;
}

.clock-card-layer.is-open .clock-card__title {
  transform: translate(-50%, 0);
  transition-delay: 220ms;
}

.clock-card-layer.is-open .clock-card__details {
  transition-delay: 255ms;
}

.clock-card__detail-group {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 12px;
}

.clock-card__detail-group h2 {
  width: 100%;
  margin: 0;
  color: var(--text-t1, #000000);
  font-family: "KH Giga TRIAL", "Times New Roman", serif;
  font-size: 16px;
  font-style: italic;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
}

.clock-card__body {
  width: 100%;
  color: var(--text-t1, #000000);
  font-family: "KH Teka TRIAL", "PingFang SC", "Noto Sans CJK SC", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
}

.clock-card__body p {
  margin: 0;
}

.clock-card__body a {
  color: inherit;
  text-decoration: underline;
  text-decoration-skip-ink: none;
}

.clock-card__designer-image {
  display: block;
  width: 100%;
  aspect-ratio: 2000 / 1500;
  object-fit: cover;
}

@media (max-width: 439px) {
  .home-page {
    background: #e5e5e5;
  }

  .home-stage {
    min-height: 100dvh;
  }

  .home-scene--desktop {
    display: none;
  }

  .home-scene-mobile {
    position: absolute;
    inset: 0;
    display: block;
  }

  .home-light--mobile {
    left: 50%;
    top: 0;
    width: 320px;
    height: 276px;
    transform: translateX(-50%);
  }

  .home-mobile-copy {
    left: 50%;
    transform: translateX(-50%);
  }

  .home-mobile-copy--brand {
    top: 300px;
    width: 112.268px;
    height: 43.796px;
  }

  .home-mobile-copy--clock {
    top: 356px;
    width: 118.177px;
    height: 140.838px;
  }

  .home-mobile-copy--clock .home-clock {
    width: 120px;
    height: 120px;
  }

  .home-mobile-copy--experience {
    top: 480px;
    width: 262.944px;
    height: 90.364px;
  }

  .home-showcase--mobile {
    --home-mobile-surface-width: 70.53%;
    left: 50%;
    right: auto;
    bottom: 80px;
    width: min(calc(100vw - 16px), 377px);
    max-width: 377px;
    aspect-ratio: 377 / 218.677;
    margin-inline: auto;
    transform: translateX(-50%);
  }

  .home-showcase--mobile .home-showcase__leg--left {
    left: 0;
    bottom: 27.21%;
    height: 51.68%;
  }

  .home-showcase--mobile .home-showcase__leg--center {
    left: 30.59%;
    bottom: 0;
    height: 48.64%;
  }

  .home-showcase--mobile .home-showcase__leg--right {
    left: 99.89%;
    bottom: 20.98%;
    height: 48.64%;
  }

  .home-showcase--mobile .home-showcase__plane {
    height: 51.51%;
  }

  .home-showcase--mobile .home-showcase__plane::before {
    width: var(--home-mobile-surface-width);
    height: auto;
    aspect-ratio: 2 / 1;
    border-width: 0.332px;
  }

  .home-showcase--mobile .home-showcase__plane--back {
    bottom: 45.3%;
  }

  .home-showcase--mobile .home-showcase__plane--front {
    bottom: 46.81%;
  }

  .home-showcase--mobile .home-showcase__surface-media {
    left: calc((100% - var(--home-mobile-surface-width)) / 2);
    top: -4.65%;
    bottom: auto;
    width: var(--home-mobile-surface-width);
    height: auto;
    aspect-ratio: 2 / 1;
    --home-surface-transform: rotate(-10deg) skewX(50deg) scaleY(0.64);
    transform-origin: center center;
  }

  .home-poster {
    display: none;
  }

  .resume-page {
    min-height: 100dvh;
  }

  .resume-bg {
    background-image: url("./assets/resume/background/main.webp");
    background-repeat: no-repeat;
    background-size: 852px 852px;
    background-position: -230px 0;
  }

  .resume-bg img {
    display: none;
  }

  .resume-bg > span {
    background: rgba(0, 0, 0, 0.2);
  }

  .resume-ray,
  .resume-side-text,
  .resume-side-text-wrap {
    display: none;
  }

  .resume-grid {
    display: block;
    min-height: 100dvh;
    padding-inline: 0;
  }

  .resume-card-center {
    top: 50%;
    left: 50%;
    width: 320px;
    height: 640px;
    border: 0.3px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    transform: translate(-50%, -50%);
  }

  .resume-bottom-cta {
    bottom: 20px;
    z-index: 4;
  }

  .resume-bottom-right {
    right: 16px;
    bottom: 16px;
    color: #ffffff;
    z-index: 4;
  }

  .home-site .resume-bottom-right {
    right: 20px;
    bottom: 20px;
  }

  .home-page-indicator {
    left: 50%;
    bottom: 20px;
  }

  .resume-bottom-right strong {
    color: #ffffff;
  }

  .resume-bottom-logo {
    z-index: 4;
  }

  .contact-frame {
    --contact-content-width: min(360px, calc(100% - 32px));
  }

  .contact-bg-image {
    inset: 0;
    width: 100%;
    max-width: none;
    min-width: 0;
    height: 100dvh;
    object-fit: cover;
    object-position: center center;
    transform: scaleX(-1);
  }

  .contact-side-shape,
  .contact-hero-logo {
    display: none;
  }

  .contact-text-fields {
    top: 50%;
    bottom: auto;
    left: 50%;
    width: var(--contact-content-width);
    transform: translate(-50%, -50%);
    gap: 40px;
  }

  .contact-text-fields .contact-hello-wrap,
  .contact-text-fields .contact-description,
  .contact-block,
  .contact-list,
  .contact-copyright {
    width: 100%;
  }

  .resume-menu {
    position: fixed;
    left: 0;
    right: auto;
    bottom: 0;
  }

  .resume-menu.fxui-menu {
    width: 100vw;
    height: 100dvh;
    border-radius: 0;
  }

  .resume-menu::before {
    border-radius: 0;
    background: #ffffff;
    border-color: rgba(255, 255, 255, 0.2);
    transform-origin: center bottom;
  }

  .resume-menu__header {
    position: static;
  }

  .resume-menu__logo {
    position: absolute;
    left: 50%;
    top: 23px;
    display: block;
    width: 64px;
    height: 64px;
    transform: translateX(-50%);
    z-index: 1;
  }

  .resume-menu__logo img {
    filter: brightness(0);
    opacity: 0.16;
  }

  .resume-menu__close {
    left: 50%;
    right: auto;
    top: auto;
    bottom: 31px;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.1);
  }

  .resume-menu .resume-menu__nav {
    left: 15px;
    right: 15px;
    top: 111px;
    gap: 32px;
  }

  .resume-menu__group {
    gap: 16px;
  }

  .resume-menu__sub-tabs {
    gap: 12px;
  }

  .resume-menu__sub-tab {
    padding-bottom: 12px;
  }

  .resume-menu__copyright {
    left: 15px;
    right: 15px;
    bottom: 119px;
    font-size: 12px;
    line-height: 1.35;
    transform: translateY(100%);
  }

  .resume-menu.is-open .resume-menu__logo {
    transform: translateX(-50%);
  }
}

.resume-bottom-right {
  position: absolute;
  right: 16px;
  bottom: 16px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  cursor: pointer;
}

.resume-bottom-right strong {
  color: #ffffff;
  font-weight: 400;
}

.resume-bottom-cta {
  position: absolute;
  left: 50%;
  bottom: 16px;
  display: inline-flex;
  gap: 10px;
  transform: translateX(-50%);
}

.fxui-page {
  margin: 0;
  background: #e6e6e6;
  color: #000000;
  font-family: "KH Teka TRIAL", "PingFang SC", "Noto Sans CJK SC", sans-serif;
}

.fxui-canvas-wrap {
  min-width: 2000px;
  padding: 48px;
}

.fxui-canvas {
  position: relative;
  width: 1782px;
  height: 2895px;
  border: 1px dashed rgba(0, 0, 0, 0.12);
  background: transparent;
}

.fxui-canvas > * {
  position: absolute;
  left: var(--x);
  top: var(--y);
}

.fxui-pill {
  display: inline-flex;
  height: 24px;
  min-width: 52px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 24px;
  padding: 1px 8px;
  font-family: "KH Teka TRIAL", "PingFang SC", "Noto Sans CJK SC", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0;
  text-align: center;
}

.fxui-pill--highlight {
  background: #ff99dd;
  color: #000000;
}

.fxui-pill--gray {
  background: #f2f2f2;
  color: #000000;
}

.fxui-pill--separator {
  background: rgba(0, 0, 0, 0.1);
  color: #000000;
}

.fxui-switch {
  display: flex;
  gap: 4px;
  align-items: center;
  overflow: clip;
  border-radius: 28px;
  padding: 4px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(20px);
}

.fxui-switch button {
  display: inline-flex;
  height: 24px;
  min-width: 52px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 24px;
  padding: 1px 8px;
  font-family: "KH Teka TRIAL", "PingFang SC", "Noto Sans CJK SC", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0;
  text-align: center;
  background: transparent;
  color: #000000;
  cursor: pointer;
}

.fxui-switch--dark {
  background: rgba(0, 0, 0, 0.1);
}

.fxui-switch--dark .is-active {
  background: #ffffff;
}

.fxui-switch--white {
  background: rgba(255, 255, 255, 0.4);
}

.fxui-switch--white button {
  color: #ffffff;
}

.fxui-switch--white .is-active {
  background: #ffffff;
  color: #000000;
}

.fxui-menu {
  width: 320px;
  height: 640px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  background: rgba(242, 242, 242, 0.9);
  backdrop-filter: blur(50px);
}

.resume-menu.fxui-menu {
  border: 0;
  background: transparent;
  backdrop-filter: none;
}

.fxui-logo {
  position: absolute;
  left: 36.5px;
  top: 19px;
  margin: 0;
  font-family: "GT Super Ds Trial", "Times New Roman", serif;
  font-size: 40px;
  font-style: italic;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  transform: translateX(-50%);
}

.fxui-logo--center {
  left: calc(50% - 122.5px);
  top: calc(50% - 310px);
}

.fxui-menu-close {
  position: absolute;
  right: 5.79px;
  top: 19px;
}

.fxui-menu-nav {
  position: absolute;
  left: 19px;
  top: 95px;
  display: flex;
  width: 280px;
  flex-direction: column;
  gap: 32px;
}

.fxui-h2 {
  margin: 0;
  font-family: "KH Teka TRIAL", "PingFang SC", "Noto Sans CJK SC", sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0;
}

.fxui-menu-group {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.fxui-subtabs {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fxui-subtabs a {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.1);
  padding-bottom: 12px;
  color: #000000;
  text-decoration: none;
}

.fxui-subtabs a span {
  flex: 1 0 0;
  min-width: 1px;
  font-family: "KH Teka TRIAL", "PingFang SC", "Noto Sans CJK SC", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
}

.fxui-subtabs a span.jp {
  font-family: "Hiragino Mincho Pro", "PingFang SC", serif;
}

.fxui-subtabs a em {
  color: rgba(0, 0, 0, 0.45);
  font-family: "KH Teka TRIAL", "PingFang SC", "Noto Sans CJK SC", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.4;
}

.fxui-copyright {
  color: rgba(0, 0, 0, 0.2);
  font-family: "KH Teka TRIAL", "PingFang SC", "Noto Sans CJK SC", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.35;
}

.fxui-menu > .fxui-copyright:not(.resume-menu__copyright) {
  position: absolute;
  left: 19px;
  right: 19px;
  bottom: 51px;
}

.fxui-copyright p {
  margin: 0;
}

.fxui-resume-card {
  width: 320px;
  height: 640px;
  overflow: clip;
  border: var(--resume-card-stroke-width) solid var(--resume-card-stroke-color);
  border-radius: var(--resume-card-radius);
}

.fxui-resume-card-bg {
  position: absolute;
  top: -0.3px;
  left: 50%;
  width: 489px;
  height: 640px;
  border-radius: 8px;
  transform: translateX(-50%);
  object-fit: cover;
}

.fxui-resume-card-overlay {
  position: absolute;
  inset: 0;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.5);
  mix-blend-mode: soft-light;
}

.fxui-resume-card-more {
  position: absolute;
  top: 15.7px;
  left: 50%;
  width: 80px;
  transform: translateX(-50%);
}

.fxui-resume-detail {
  width: 320px;
  height: 2412px;
  overflow: clip;
  border: 0.3px solid #f2f2f2;
  border-radius: 16px;
  background: #ffffff;
}

.fxui-resume-detail-content {
  position: absolute;
  top: 19.7px;
  left: 19.7px;
  display: flex;
  width: 280px;
  flex-direction: column;
  gap: 40px;
}

.fxui-avatar {
  width: 280px;
  aspect-ratio: 382 / 500;
  object-fit: cover;
}

.fxui-intro p,
.fxui-body p {
  margin: 0;
  font-family: "KH Teka TRIAL", "PingFang SC", "Noto Sans CJK SC", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  color: #000000;
}

.fxui-intro strong {
  font-family: "GT Super Txt Trial", "Times New Roman", serif;
  font-style: italic;
  font-weight: 700;
  line-height: 1.35;
}

.fxui-section-block {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.fxui-section-block h3 {
  margin: 0;
  font-family: "GT Super Txt Trial", "Times New Roman", serif;
  font-size: 16px;
  font-style: italic;
  font-weight: 700;
  line-height: 1.35;
}

.fxui-project {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fxui-project-title {
  display: flex;
  gap: 8px;
  align-items: center;
}

.fxui-project-title img {
  width: auto;
  max-width: 32px;
  height: 16px;
  object-fit: contain;
}

.fxui-project-title p {
  margin: 0;
  font-family: "KH Teka TRIAL", "PingFang SC", "Noto Sans CJK SC", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
}

.fxui-project-cover {
  width: 280px;
  aspect-ratio: 2 / 1;
  object-fit: cover;
}

.fxui-project-copy {
  margin: 0;
  color: rgba(0, 0, 0, 0.75);
  font-family: "KH Teka TRIAL", "PingFang SC", "Noto Sans CJK SC", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.35;
}

.fxui-inline-columns {
  display: grid;
  grid-template-columns: 100px 140px;
  gap: 40px;
}

.fxui-inline-columns h3 {
  margin-bottom: 8px;
}

.fxui-inline-columns p {
  margin: 0;
  font-family: "KH Teka TRIAL", "PingFang SC", "Noto Sans CJK SC", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  color: #000000;
}

.ys-page {
  overflow: auto;
  background: #d7d5ce;
}

.ys-stage {
  min-width: 1782px;
  padding: 80px;
}

.ys-kit {
  position: relative;
  width: 1782px;
  height: 2895px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #efeee8;
}

.ys-kit > * {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
}

.ys-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
}

.ys-cta--primary {
  background: #000000;
  color: #ffffff;
}

.ys-cta--secondary {
  background: transparent;
  color: #000000;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ys-switch {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  padding: 2px;
  border-radius: 999px;
}

.ys-switch button {
  min-width: 0;
  border-radius: 999px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
}

.ys-switch--dark {
  background: #000000;
}

.ys-switch--dark button {
  background: transparent;
  color: rgba(255, 255, 255, 0.64);
}

.ys-switch--dark .is-active {
  background: #ffffff;
  color: #000000;
}

.ys-switch--white {
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: #ffffff;
}

.ys-switch--white button {
  background: transparent;
  color: rgba(0, 0, 0, 0.48);
}

.ys-switch--white .is-active {
  background: #000000;
  color: #ffffff;
}

.ys-phone {
  overflow: hidden;
  border-radius: 32px;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.12);
}

.ys-menu-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px;
  background: #000000;
  color: #ffffff;
}

.ys-menu-card__top,
.ys-menu-card__bottom {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.ys-menu-card__top p,
.ys-menu-card__bottom p {
  margin: 0;
}

.ys-menu-card__top p {
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
}

.ys-menu-close {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #ffffff;
  color: #000000;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}

.ys-menu-card__nav {
  display: grid;
  gap: 18px;
}

.ys-menu-card__nav a {
  color: #ffffff;
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 400;
  line-height: 0.96;
  letter-spacing: 0;
  text-decoration: none;
}

.ys-menu-card__bottom {
  display: grid;
  gap: 16px;
}

.ys-menu-card__bottom p,
.ys-menu-card__bottom a {
  max-width: 220px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 13px;
  line-height: 1.45;
  text-decoration: none;
}

.ys-resume-card,
.ys-resume-detail {
  background: #ffffff;
  color: #000000;
}

.ys-resume-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 28px;
}

.ys-resume-card__header,
.ys-detail-section,
.ys-resume-detail__hero {
  display: grid;
  gap: 16px;
}

.ys-eyebrow,
.ys-section-label {
  margin: 0;
  color: rgba(0, 0, 0, 0.42);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ys-resume-card h1,
.ys-resume-detail h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 400;
  line-height: 0.96;
  letter-spacing: 0;
}

.ys-resume-card p,
.ys-resume-detail p {
  margin: 0;
  color: rgba(0, 0, 0, 0.58);
  font-size: 13px;
  line-height: 1.5;
}

.ys-resume-card__section {
  display: grid;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.ys-resume-card h2,
.ys-timeline h2 {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
}

.ys-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ys-pill-row span {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 999px;
  padding: 0 10px;
  color: rgba(0, 0, 0, 0.68);
  font-size: 12px;
  line-height: 1;
}

.ys-card-link,
.ys-resume-detail__footer a {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #000000;
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
}

.ys-resume-detail {
  overflow: hidden auto;
  border-radius: 32px;
  padding: 32px 28px;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.12);
}

.ys-resume-detail__hero {
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.ys-detail-section {
  padding: 32px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.ys-timeline {
  display: grid;
  gap: 24px;
}

.ys-timeline article {
  display: grid;
  gap: 8px;
}

.ys-timeline span,
.ys-work-list em {
  color: rgba(0, 0, 0, 0.42);
  font-size: 12px;
  font-style: normal;
  line-height: 1.3;
}

.ys-work-list {
  display: grid;
}

.ys-work-list a {
  display: grid;
  gap: 6px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  color: #000000;
  text-decoration: none;
}

.ys-work-list span {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
}

.ys-resume-detail__footer {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding-top: 32px;
}

.ys-resume-detail__footer a:nth-child(2) {
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: transparent;
  color: #000000;
}

button,
a {
  font: inherit;
}

button {
  border: 0;
}

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

.ui-shell {
  width: min(100%, 1440px);
  margin: 0 auto;
  padding: var(--space-16) var(--space-12) var(--space-24);
}

.ui-hero {
  display: grid;
  gap: var(--space-8);
  padding: 0 0 var(--space-16);
  border-bottom: 1px solid var(--border);
}

.ui-hero__content {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(280px, 4fr);
  gap: var(--space-12);
  align-items: end;
}

.ui-hero h1 {
  margin: 0;
  max-width: 760px;
  font-family: var(--font-display);
  font-size: 64px;
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: 0;
}

.ui-hero p {
  margin: 0;
  max-width: 520px;
  color: var(--text-t2);
  font-size: 18px;
  line-height: 1.6;
}

.ui-section {
  display: grid;
  gap: var(--space-8);
  padding: var(--space-16) 0;
  border-bottom: 1px solid var(--border);
}

.ui-section__header {
  display: grid;
  gap: var(--space-2);
}

.ui-section h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0;
}

.ui-kicker,
.ui-label,
.ui-caption {
  margin: 0;
}

.ui-kicker {
  color: var(--text-t3);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  text-transform: uppercase;
}

.ui-label {
  font-size: 16px;
  line-height: 1.5;
}

.ui-caption {
  margin-top: var(--space-1);
  color: var(--text-t2);
  font-size: 13px;
  line-height: 1.45;
}

.ui-demo-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.ui-demo-row--between {
  justify-content: space-between;
}

.fx-button,
.fx-icon-button,
.fx-switch,
.fx-menu__item {
  -webkit-tap-highlight-color: transparent;
}

.fx-button {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0 var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  text-decoration: none;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    opacity 160ms ease;
}

.fx-button:focus-visible,
.fx-icon-button:focus-visible,
.fx-switch:focus-visible,
.fx-menu__item:focus-visible,
.fx-card__media:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.fx-button--primary {
  background: var(--accent);
  color: var(--surface);
}

.fx-button--sm {
  min-height: 32px;
  padding: 0 var(--space-3);
  font-size: 13px;
}

.fx-button--lg {
  min-height: 48px;
  padding: 0 var(--space-5);
  font-size: 15px;
}

.fx-button--primary:hover {
  opacity: 0.82;
}

.fx-button--secondary {
  background: transparent;
  border-color: var(--border);
  color: var(--text-t1);
}

.fx-button--secondary:hover {
  background: var(--accent-soft);
}

.fx-button--ghost {
  background: transparent;
  color: var(--text-t1);
}

.fx-button--ghost:hover {
  background: var(--accent-soft);
}

.fx-button__icon {
  font-size: 14px;
  line-height: 1;
}

.fx-icon-button {
  display: inline-grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-t1);
  cursor: pointer;
  transition:
    background-color 160ms ease,
    border-color 160ms ease;
}

.fx-icon-button:hover {
  background: var(--accent-soft);
}

.fx-button:disabled,
.fx-icon-button:disabled,
.fx-menu__item:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.fx-button:disabled:hover,
.fx-icon-button:disabled:hover,
.fx-menu__item:disabled:hover {
  background: inherit;
}

.fx-switch {
  position: relative;
  display: inline-flex;
  width: 48px;
  height: 28px;
  align-items: center;
  padding: 2px;
  border-radius: 999px;
  background: var(--text-t1);
  cursor: pointer;
  transition: background-color 160ms ease;
}

.fx-switch[aria-checked="false"] {
  background: var(--border);
}

.fx-switch__thumb {
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--surface);
  transform: translateX(20px);
  transition: transform 160ms ease;
}

.fx-switch[aria-checked="false"] .fx-switch__thumb {
  transform: translateX(0);
}

.fx-menu {
  position: relative;
  width: max-content;
}

.fx-menu__panel {
  position: absolute;
  z-index: 10;
  top: calc(100% + var(--space-2));
  left: 0;
  display: none;
  width: 220px;
  padding: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.fx-menu[data-open="true"] .fx-menu__panel {
  display: grid;
  gap: var(--space-1);
}

.fx-menu__item {
  min-height: 36px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-t1);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  text-align: left;
}

.fx-menu__item:hover {
  background: var(--accent-soft);
}

.fx-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.fx-card {
  min-width: 0;
}

.fx-card__media {
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-muted);
  color: inherit;
}

.fx-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 220ms ease, opacity 160ms ease;
}

.fx-card__media:hover img {
  opacity: 0.92;
  transform: scale(1.015);
}

.fx-card__body {
  display: grid;
  gap: var(--space-2);
  padding-top: var(--space-3);
}

.fx-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  color: var(--text-t3);
  font-size: 12px;
  line-height: 1.3;
}

.fx-card h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0;
}

.fx-card p {
  margin: 0;
  max-width: 520px;
  color: var(--text-t2);
  font-size: 14px;
  line-height: 1.55;
}

.fx-card--compact .fx-card__media {
  aspect-ratio: 4 / 3;
}

.fx-case-page {
  width: min(100%, 1440px);
  margin: 0 auto;
  padding: var(--space-10) var(--space-12) var(--space-24);
}

.fx-case-back {
  display: inline-flex;
  width: max-content;
  min-height: 32px;
  align-items: center;
  margin-bottom: var(--space-12);
  color: var(--text-t2);
  font-size: 13px;
  line-height: 1;
  text-decoration: none;
}

.fx-case-back:hover {
  color: var(--text-t1);
}

.fx-case-back:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.fx-case-hero {
  padding-bottom: var(--space-16);
  border-bottom: 1px solid var(--border);
}

.fx-case-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(280px, 3fr);
  gap: var(--space-12);
  align-items: end;
}

.fx-case-hero__intro {
  display: grid;
  gap: var(--space-6);
}

.fx-case-hero h1 {
  margin: 0;
  max-width: 820px;
  font-family: var(--font-display);
  font-size: 64px;
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: 0;
}

.fx-case-hero p {
  margin: 0;
  max-width: 600px;
  color: var(--text-t2);
  font-size: 18px;
  line-height: 1.6;
}

.fx-case-meta {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
}

.fx-case-meta div {
  display: grid;
  gap: var(--space-1);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
}

.fx-case-meta dt {
  color: var(--text-t3);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  text-transform: uppercase;
}

.fx-case-meta dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
}

.fx-case-block {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: var(--space-8);
  padding: var(--space-18) 0;
  border-bottom: 1px solid var(--border);
}

.fx-case-block__label {
  padding-top: var(--space-2);
}

.fx-case-block--image,
.fx-case-block--gallery {
  row-gap: var(--space-8);
}

.fx-case-block--image .fx-figure,
.fx-case-block--image .fx-case-prose,
.fx-case-block--gallery .fx-media-grid {
  grid-column: 2;
}

.fx-case-prose {
  display: grid;
  max-width: 760px;
  gap: var(--space-4);
}

.fx-case-prose--compact {
  max-width: 640px;
}

.fx-case-prose h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0;
}

.fx-case-prose p,
.fx-case-prose li {
  margin: 0;
  color: var(--text-t2);
  font-size: 16px;
  line-height: 1.65;
}

.fx-case-prose ul {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding-left: var(--space-5);
}

.fx-figure {
  display: grid;
  gap: var(--space-3);
  margin: 0;
}

.fx-figure img {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-muted);
  object-fit: cover;
}

.fx-case-block--image .fx-figure img {
  aspect-ratio: 16 / 9;
}

.fx-figure figcaption {
  display: flex;
  gap: var(--space-2);
  color: var(--text-t3);
  font-size: 13px;
  line-height: 1.45;
}

.fx-figure figcaption span {
  color: var(--text-t1);
}

.fx-media-grid {
  display: grid;
  gap: var(--space-4);
}

.fx-media-grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fx-media-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.fx-figure--tile img {
  aspect-ratio: 1 / 1;
}

.fx-split-block {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(320px, 4fr);
  gap: var(--space-8);
  align-items: start;
}

.fx-split-block__media img {
  aspect-ratio: 4 / 3;
}

.fx-split-block__content {
  padding-top: var(--space-2);
}

.fx-detail-site {
  margin: 0;
  min-height: 100dvh;
  background: var(--surface-white);
  color: var(--text-t1);
  font-family: var(--font-display);
}

.project-one-site {
  --font-display: "KH Teka TRIAL", Inter, "SF Pro Display", "PingFang SC", "Noto Sans CJK SC", Arial, sans-serif;
  font-family: var(--font-display);
  font-stretch: normal;
}

.fx-detail-page {
  width: min(100%, 1440px);
  margin: 0 auto;
  padding: 16px 16px 96px;
}

.project-one-site .fx-detail-page {
  width: 100%;
  max-width: none;
  padding: 0 0 96px;
  margin-inline: auto;
  --project-page-inset: 16px;
  --project-content-width: calc(100% - var(--project-page-inset) - var(--project-page-inset));
}

.project-one-site .fx-project-header {
  width: 100%;
  aspect-ratio: 1 / 1;
}

.project-one-site .fx-detail-stack {
  padding-inline: 0;
}

.project-one-site .fx-detail-module {
  max-width: none;
}

.project-one-site .resume-bottom-logo,
.project-one-site .resume-bottom-right,
.project-one-site .resume-menu {
  position: fixed;
}

.project-one-site .resume-bottom-logo {
  left: 16px;
  bottom: 16px;
  z-index: 20;
  mix-blend-mode: difference;
  isolation: auto;
}

.project-one-site .resume-menu {
  left: 16px;
  bottom: 64px;
  z-index: 7;
}

.project-one-site .resume-bottom-right {
  right: 20px;
  bottom: 20px;
  z-index: 20;
  color: rgba(255, 255, 255, 0.4);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
  mix-blend-mode: difference;
  isolation: auto;
}

.project-one-site .resume-bottom-right strong {
  color: var(--surface-white);
  font-weight: 400;
}

@media (max-width: 439px) {
  .project-one-site .resume-bottom-logo {
    left: 16px;
    bottom: 16px;
  }

  .project-one-site .resume-menu {
    left: 0;
  }

  .project-one-site .resume-bottom-right {
    right: 16px;
    bottom: 16px;
  }
}

.fx-primary-button {
  display: inline-flex;
  width: max-content;
  min-width: 55px;
  height: 24px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 24px;
  padding: 0 8px;
  background: var(--highlight);
  color: var(--text-t1);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

.fx-primary-button:hover {
  background: #ff8fd8;
}

.fx-primary-button:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.fx-project-back {
  position: fixed;
  left: 50%;
  top: 20px;
  z-index: 20;
  transform: translateX(-50%);
}

.fx-project-header {
  position: relative;
  width: 100%;
  max-width: none;
  aspect-ratio: 1 / 1;
  margin: 0 auto 80px;
  overflow: hidden;
  background:
    url("./assets/project-1-lemon8/header/bg-video-loop.webp") center top / cover no-repeat,
    var(--surface-white);
  color: #000000;
  isolation: isolate;
}

.fx-project-header__media {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  background:
    url("./assets/project-1-lemon8/header/bg-video-loop.webp") center top / cover no-repeat,
    url("./assets/project-1-lemon8/header/video-poster.webp") center top / cover no-repeat;
  pointer-events: none;
  user-select: none;
}

.fx-project-header__media::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  background: rgba(255, 255, 255, 0.18);
  mix-blend-mode: soft-light;
  pointer-events: none;
}

.fx-project-header__media::before {
  position: absolute;
  inset: 0;
  z-index: 2;
  content: "";
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0) 66.666667%,
    var(--surface-white) 83.333333%,
    var(--surface-white) 100%
  );
  pointer-events: none;
}

.fx-project-header__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  opacity: 1;
  transform: scaleX(-1);
  transform-origin: center center;
}

.fx-project-header__content {
  position: absolute;
  left: var(--project-page-inset, 16px);
  right: var(--project-page-inset, 16px);
  top: min(7.5vw, 108px);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: min(2.777778vw, 40px);
}

.fx-project-header__masthead {
  position: absolute;
  left: 50%;
  top: 7.2727272%;
  z-index: 4;
  width: 100%;
  max-width: none;
  transform: translateX(-50%);
}

.fx-project-top-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: min(0.694444vw, 10px);
  text-align: center;
  color: #000000;
}

.fx-project-top-info__brand {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: min(1.388889vw, 20px);
}

.fx-project-top-info__brand-logo {
  display: block;
  width: min(15.555556vw, 224px);
  height: auto;
  aspect-ratio: 224 / 32;
  object-fit: contain;
}

.fx-project-top-info__meta {
  display: flex;
  min-width: 100%;
  margin: 0;
  flex-direction: column;
  color: #000000;
  font-family: var(--font-display);
  font-size: clamp(12px, 1.111111vw, 16px);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
}

.fx-project-top-info__title {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  margin: 0;
  color: #000000;
  font-family: var(--font-display);
  font-size: clamp(32px, 4.444444vw, 64px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
}

.fx-project-top-info__title span {
  display: block;
}

.fx-project-header__phone-composite {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5632 / 3840;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.fx-project-header__brand-block {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: min(1.388889vw, 20px);
}

.fx-project-header__brand-logo {
  display: block;
  width: min(15.555556vw, 224px);
  height: auto;
}

.fx-project-header__meta {
  display: flex;
  margin: 0;
  flex-direction: column;
  color: #000000;
  font-family: var(--font-display);
  font-size: min(1.111111vw, 16px);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
}

.fx-project-header__title {
  display: flex;
  width: 100%;
  margin: 0;
  flex-direction: column;
  align-items: center;
  color: #000000;
  font-family: var(--font-display);
  font-size: min(4.444444vw, 64px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
}

.fx-project-header__title-row {
  display: flex;
  min-height: min(5.251667vw, 75.624px);
  align-items: center;
  justify-content: center;
  gap: min(0.555556vw, 8px);
}

.fx-project-header__tiktok-mark {
  display: block;
  width: min(4.375vw, 63px);
  height: min(4.444444vw, 64px);
  opacity: 0.8;
  object-fit: contain;
}

.fx-project-header__tiktok-text {
  font-family: "TikTok Display", "TikTok_Display", var(--font-display);
  font-weight: 500;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .project-one-site .fx-project-header {
    aspect-ratio: auto;
    height: 100dvh;
    min-height: 100dvh;
  }

  .fx-project-header__content {
    left: var(--project-page-inset, 16px);
    right: var(--project-page-inset, 16px);
    top: 96px;
  }

  .fx-project-header__masthead {
    top: 48px;
  }

  .fx-project-top-info__brand {
    gap: 16px;
  }

  .fx-project-top-info__title {
    font-size: 40px;
  }
}

@media (max-width: 439px) {
  .fx-project-header__content {
    top: 96px;
    gap: 20px;
  }

  .fx-project-header__masthead {
    top: 40px;
  }

  .fx-project-top-info__brand-logo {
    width: 168px;
    height: 24px;
  }

  .fx-project-top-info__meta {
    font-size: 14px;
  }

  .fx-project-top-info__title {
    font-size: 32px;
  }
}

.fx-project-header__phone {
  position: absolute;
  left: 50%;
  top: 28.99214%;
  z-index: 3;
  display: block;
  width: 35.555556%;
  height: auto;
  transform: translateX(-50%);
}

.fx-project-header__floating-icon {
  position: absolute;
  z-index: 2;
  display: block;
  width: 10.205%;
  height: auto;
  pointer-events: none;
  user-select: none;
}

.fx-project-header__floating-icon--lemon8 {
  left: 20.902778%;
  top: 44.090909%;
}

.fx-project-header__floating-icon--tiktok {
  left: 69.027778%;
  top: 60%;
}

.fx-detail-stack {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 80px;
}

.fx-detail-module {
  width: 100%;
  max-width: 1408px;
  margin: 0 auto;
}

.fx-project-intro {
  display: flex;
  width: var(--project-content-width, calc(100% - 32px));
  margin: 0 auto 80px;
  gap: 16px;
  align-items: flex-start;
  color: var(--text-t1);
  font-family: var(--font-display);
  font-style: normal;
  letter-spacing: 0;
}

.fx-project-intro__title {
  flex: 1 0 0;
  min-width: 0;
  margin: 0;
  color: var(--text-t1);
  font-size: 64px;
  font-weight: 400;
  line-height: 1;
}

.fx-project-intro__details {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  flex-direction: column;
  gap: 40px;
  align-items: flex-start;
  justify-content: center;
}

.fx-project-intro__about {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  font-size: 24px;
}

.fx-project-intro__eyebrow,
.fx-project-intro__body p,
.fx-project-intro__meta,
.fx-project-intro__meta dt,
.fx-project-intro__meta dd {
  margin: 0;
}

.fx-project-intro__eyebrow,
.fx-project-intro__meta dt {
  color: rgba(0, 0, 0, 0.45);
}

.fx-project-intro__eyebrow,
.fx-project-intro__body p {
  width: 100%;
  line-height: 1.35;
}

.fx-project-intro__body {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 24px;
  color: var(--text-t1);
}

.fx-project-intro__meta {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 16px;
  font-size: 16px;
  line-height: 1.4;
}

.fx-project-intro__meta div {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 4px;
}

.fx-project-intro__meta a {
  color: inherit;
  text-decoration: none;
}

.fx-project-intro__meta a:hover,
.fx-project-intro__meta a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 960px) {
  .fx-project-intro {
    flex-direction: column;
    gap: 40px;
  }

  .fx-project-intro__title,
  .fx-project-intro__details {
    width: 100%;
    flex: none;
  }

}

@media (max-width: 760px) {
  .fx-project-intro {
    width: var(--project-content-width, calc(100% - 32px));
    margin-bottom: 64px;
    flex-direction: column;
    gap: 40px;
  }

  .fx-project-intro__title {
    font-size: 48px;
  }

  .fx-project-intro__about {
    font-size: 20px;
  }
}

@media (max-width: 439px) {
  .fx-project-intro {
    width: var(--project-content-width, calc(100% - 32px));
    gap: 32px;
  }

  .fx-project-intro__title {
    font-size: 40px;
  }
}

.fx-project-section-one {
  display: flex;
  width: var(--project-content-width, calc(100% - 32px));
  margin: 0 auto 80px;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  color: var(--text-t1);
}

.fx-project-section-one__logo-row {
  display: flex;
  width: 100%;
  aspect-ratio: 1408 / 400;
  gap: 16px;
  align-items: flex-start;
}

.fx-project-section-one__logo-spacer,
.fx-project-section-one__logo-panel {
  flex: 1 0 0;
  min-width: 0;
  height: 100%;
}

.fx-project-section-one__logo-panel,
.fx-project-section-one__image-block {
  margin: 0;
}

.fx-project-section-one__logo-panel img,
.fx-project-section-one__image-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}

.fx-project-section-one__image-block {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}

.fx-project-section-one__image-frame {
  width: 100%;
  aspect-ratio: 1408 / 800;
  overflow: hidden;
  border: 0.5px solid rgba(0, 0, 0, 0.2);
}

.fx-project-section-one figcaption {
  width: 100%;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
}

@media (max-width: 760px) {
  .fx-project-section-one {
    width: var(--project-content-width, calc(100% - 32px));
    margin-bottom: 64px;
  }

  .fx-project-section-one__logo-row {
    aspect-ratio: 696 / 400;
  }

  .fx-project-section-one__logo-spacer {
    display: none;
  }
}

@media (max-width: 439px) {
  .fx-project-section-one {
    width: var(--project-content-width, calc(100% - 32px));
  }
}

.fx-project-section-two {
  display: flex;
  width: var(--project-content-width, calc(100% - 32px));
  margin: 0 auto 80px;
  flex-direction: column;
  gap: 80px;
  color: var(--text-t1);
  font-family: var(--font-display);
}

.fx-project-section-two__intro {
  display: flex;
  width: 100%;
  gap: 16px;
  align-items: flex-start;
  color: #000000;
}

.fx-project-section-two__intro h2,
.fx-project-section-two__intro p {
  flex: 1 0 0;
  min-width: 0;
  margin: 0;
  font-weight: 400;
  letter-spacing: 0;
}

.fx-project-section-two__intro h2 {
  font-size: 32px;
  line-height: 1.15;
}

.fx-project-section-two__intro p {
  font-size: 24px;
  line-height: 1.35;
}

.fx-project-section-two__double {
  display: flex;
  width: 100%;
  gap: 16px;
  align-items: center;
}

.fx-project-section-two__panel {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  margin: 0;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  justify-content: center;
}

.fx-project-section-two__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.fx-project-section-two__stage-bg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}

.fx-project-section-two__keypages {
  display: flex;
  width: 100%;
  margin: 0;
  flex-direction: column;
  gap: 12px;
}

.fx-project-section-two__keypages-frame {
  width: 100%;
  aspect-ratio: 1408 / 800;
  overflow: hidden;
}

.fx-project-section-two__keypages-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}

.fx-project-section-two__bullet-track {
  position: absolute;
  left: 5.747126%;
  top: 50%;
  z-index: 1;
  display: flex;
  width: 581.609195%;
  height: 35.632184%;
  transform: translate3d(0, -50%, 0);
  animation: fx-section-two-bullet-scroll 16.8667s linear infinite;
  will-change: transform;
}

.fx-project-section-two__bullet-track img {
  display: block;
  flex: 0 0 50%;
  width: 50%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
  pointer-events: none;
  user-select: none;
}

.fx-project-section-two figcaption {
  width: 100%;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
}

@keyframes fx-section-two-bullet-scroll {
  from {
    transform: translate3d(0, -50%, 0);
  }

  to {
    transform: translate3d(-50%, -50%, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fx-project-section-two__bullet-track {
    animation: none;
  }
}

@media (max-width: 960px) {
  .fx-project-section-two__intro {
    flex-direction: column;
  }

  .fx-project-section-two__intro h2,
  .fx-project-section-two__intro p {
    width: 100%;
    flex: none;
  }
}

@media (max-width: 760px) {
  .fx-project-section-two {
    width: var(--project-content-width, calc(100% - 32px));
    margin-bottom: 64px;
    gap: 64px;
  }

  .fx-project-section-two__intro,
  .fx-project-section-two__double {
    flex-direction: column;
  }

  .fx-project-section-two__intro h2 {
    font-size: 28px;
  }

  .fx-project-section-two__intro p {
    font-size: 20px;
  }

  .fx-project-section-two__panel {
    width: 100%;
    flex: none;
  }
}

@media (max-width: 439px) {
  .fx-project-section-two {
    width: var(--project-content-width, calc(100% - 32px));
    gap: 48px;
  }

  .fx-project-section-two__intro h2 {
    font-size: 24px;
  }

  .fx-project-section-two__intro p {
    font-size: 18px;
  }
}

.fx-project-section-three {
  display: flex;
  width: var(--project-content-width, calc(100% - 32px));
  margin: 0 auto 80px;
  flex-direction: column;
  gap: 40px;
  align-items: stretch;
  color: #000000;
  font-family: var(--font-display);
}

.fx-project-section-three__intro {
  display: flex;
  width: 100%;
  gap: 16px;
  align-items: flex-start;
}

.fx-project-section-three__intro h2,
.fx-project-section-three__intro p {
  flex: 1 0 0;
  min-width: 0;
  margin: 0;
  font-weight: 400;
  letter-spacing: 0;
}

.fx-project-section-three__intro h2 {
  font-size: 32px;
  line-height: 1.15;
}

.fx-project-section-three__intro p {
  font-size: 24px;
  line-height: 1.35;
}

.fx-project-section-three__image-block {
  width: 100%;
  margin: 0;
}

.fx-project-section-three__image-frame {
  width: 100%;
  aspect-ratio: 2880 / 1440;
  overflow: hidden;
  border: 0.5px solid rgba(0, 0, 0, 0.2);
}

.fx-project-section-three__image-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}

@media (max-width: 960px) {
  .fx-project-section-three__intro {
    flex-direction: column;
  }

  .fx-project-section-three__intro h2,
  .fx-project-section-three__intro p {
    width: 100%;
    flex: none;
  }
}

@media (max-width: 760px) {
  .fx-project-section-three {
    margin-bottom: 64px;
    gap: 32px;
  }

  .fx-project-section-three__intro h2 {
    font-size: 28px;
  }

  .fx-project-section-three__intro p {
    font-size: 20px;
  }
}

@media (max-width: 439px) {
  .fx-project-section-three {
    gap: 28px;
  }

  .fx-project-section-three__intro h2 {
    font-size: 24px;
  }

  .fx-project-section-three__intro p {
    font-size: 18px;
  }
}

.fx-project-section-four {
  display: flex;
  width: var(--project-content-width, calc(100% - 32px));
  margin: 0 auto 80px;
  flex-direction: column;
  gap: 16px;
  align-items: stretch;
  color: #000000;
  font-family: var(--font-display);
}

.fx-project-section-four__intro {
  display: flex;
  width: 100%;
  gap: 16px;
  align-items: flex-start;
}

.fx-project-section-four__intro h2,
.fx-project-section-four__intro p,
.fx-project-section-four__copy {
  flex: 1 0 0;
  min-width: 0;
  margin: 0;
  font-weight: 400;
  letter-spacing: 0;
}

.fx-project-section-four__intro h2 {
  font-size: 32px;
  line-height: 1.15;
}

.fx-project-section-four__intro p,
.fx-project-section-four__copy {
  font-size: 24px;
  line-height: 1.35;
}

.fx-project-section-four__copy {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.fx-project-section-four__copy p {
  flex: none;
  width: 100%;
}

.fx-project-section-four__copy p + p {
  margin-top: 0;
}

.fx-project-section-four__copy p:nth-child(3) {
  margin-top: 32.4px;
}

.fx-project-section-four__split,
.fx-project-section-four__image-pair {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

.fx-project-section-four__text-card,
.fx-project-section-four__square-image,
.fx-project-section-four__image-card {
  flex: 1 0 0;
  min-width: 0;
  margin: 0;
}

.fx-project-section-four__text-card {
  display: flex;
  aspect-ratio: 1 / 1;
  flex-direction: column;
  gap: 34px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 80px;
  background: #f2f2f2;
}

.fx-project-section-four__eyebrow,
.fx-project-section-four__card-copy,
.fx-project-section-four figcaption {
  width: 100%;
  margin: 0;
  font-weight: 400;
  letter-spacing: 0;
}

.fx-project-section-four__eyebrow {
  color: rgba(0, 0, 0, 0.45);
  font-size: 24px;
  line-height: 1.35;
}

.fx-project-section-four__card-copy {
  color: #000000;
  font-size: 32px;
  line-height: 1.15;
}

.fx-project-section-four__square-image,
.fx-project-section-four__square-frame {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.fx-project-section-four__square-image {
  background: #523e30;
}

.fx-project-section-four__wide-image,
.fx-project-section-four__image-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  margin: 0;
}

.fx-project-section-four__image-card {
  gap: 16px;
}

.fx-project-section-four__wide-frame {
  width: 100%;
  aspect-ratio: 1408 / 800;
  overflow: hidden;
}

.fx-project-section-four__wide-frame--border {
  border: 0.5px solid rgba(0, 0, 0, 0.2);
}

.fx-project-section-four__square-image img,
.fx-project-section-four__square-frame img,
.fx-project-section-four__wide-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}

.fx-project-section-four figcaption {
  color: #000000;
  font-size: 16px;
  line-height: 1.4;
}

@media (max-width: 960px) {
  .fx-project-section-four__intro {
    flex-direction: column;
  }

  .fx-project-section-four__split,
  .fx-project-section-four__image-pair {
    grid-template-columns: 1fr;
  }

  .fx-project-section-four__intro h2,
  .fx-project-section-four__intro p,
  .fx-project-section-four__copy,
  .fx-project-section-four__text-card,
  .fx-project-section-four__square-image,
  .fx-project-section-four__image-card {
    width: 100%;
    flex: none;
  }
}

@media (max-width: 760px) {
  .fx-project-section-four {
    margin-bottom: 64px;
  }

  .fx-project-section-four__intro h2,
  .fx-project-section-four__card-copy {
    font-size: 28px;
  }

  .fx-project-section-four__intro p,
  .fx-project-section-four__copy,
  .fx-project-section-four__eyebrow {
    font-size: 20px;
  }

  .fx-project-section-four__text-card {
    padding: 48px;
  }

  .fx-project-section-four__copy p:nth-child(3) {
    margin-top: 27px;
  }
}

@media (max-width: 439px) {
  .fx-project-section-four__intro h2,
  .fx-project-section-four__card-copy {
    font-size: 24px;
  }

  .fx-project-section-four__intro p,
  .fx-project-section-four__copy,
  .fx-project-section-four__eyebrow {
    font-size: 18px;
  }

  .fx-project-section-four__text-card {
    gap: 24px;
    padding: 32px;
  }

  .fx-project-section-four__copy p:nth-child(3) {
    margin-top: 24.3px;
  }
}

.fx-project-section-five {
  display: flex;
  width: var(--project-content-width, calc(100% - 32px));
  margin: 0 auto 80px;
  flex-direction: column;
  gap: 16px;
  align-items: stretch;
  color: var(--text-t1);
  font-family: var(--font-display);
}

.fx-project-section-five__split {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

.fx-project-section-five__text-card,
.fx-project-section-five__square-image {
  min-width: 0;
  margin: 0;
}

.fx-project-section-five__text-card {
  display: flex;
  aspect-ratio: 1 / 1;
  flex-direction: column;
  gap: 34px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 80px;
}

.fx-project-section-five__text-card--details {
  background: #d4d5ce;
}

.fx-project-section-five__text-card--process {
  background: #b2b09a;
}

.fx-project-section-five__text-card--stream {
  background: #bbb9bb;
}

.fx-project-section-five__eyebrow,
.fx-project-section-five__card-copy,
.fx-project-section-five figcaption {
  width: 100%;
  margin: 0;
  font-weight: 400;
  letter-spacing: 0;
}

.fx-project-section-five__eyebrow {
  color: var(--text-t3);
  font-size: 24px;
  line-height: 1.35;
}

.fx-project-section-five__card-copy {
  display: flex;
  flex-direction: column;
  gap: 0;
  color: var(--text-t1);
  font-size: 32px;
  line-height: 1.15;
}

.fx-project-section-five__card-copy p {
  margin: 0;
}

.fx-project-section-five__square-image {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.fx-project-section-five__wide-image {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  margin: 0;
}

.fx-project-section-five__wide-frame {
  width: 100%;
  aspect-ratio: 1408 / 800;
  overflow: hidden;
  border: 0.5px solid var(--text-placeholder);
}

.fx-project-section-five__square-image img,
.fx-project-section-five__wide-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}

.fx-project-section-five__square-image--process img {
  object-position: 18% 50%;
}

.fx-project-section-five figcaption {
  color: var(--text-t1);
  font-size: 16px;
  line-height: 1.4;
}

@media (max-width: 960px) {
  .fx-project-section-five__split {
    grid-template-columns: 1fr;
  }

  .fx-project-section-five__text-card,
  .fx-project-section-five__square-image {
    width: 100%;
  }
}

@media (max-width: 760px) {
  .fx-project-section-five {
    margin-bottom: 64px;
  }

  .fx-project-section-five__card-copy {
    font-size: 28px;
  }

  .fx-project-section-five__eyebrow {
    font-size: 20px;
  }

  .fx-project-section-five__text-card {
    padding: 48px;
  }
}

@media (max-width: 439px) {
  .fx-project-section-five__card-copy {
    font-size: 24px;
  }

  .fx-project-section-five__eyebrow {
    font-size: 18px;
  }

  .fx-project-section-five__text-card {
    gap: 24px;
    padding: 32px;
  }
}

.fx-project-section-six {
  display: flex;
  width: var(--project-content-width, calc(100% - 32px));
  margin: 0 auto 80px;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  color: var(--text-t1);
  font-family: var(--font-display);
}

.fx-project-section-six__body {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 40px;
  align-items: stretch;
}

.fx-project-section-six__intro {
  display: flex;
  width: 100%;
  gap: 16px;
  align-items: flex-start;
}

.fx-project-section-six__intro h2,
.fx-project-section-six__intro-copy {
  flex: 1 0 0;
  min-width: 0;
  margin: 0;
  font-weight: 400;
  letter-spacing: 0;
}

.fx-project-section-six__intro h2 {
  font-size: 32px;
  line-height: 1.15;
}

.fx-project-section-six__intro-copy {
  display: flex;
  flex-direction: column;
  gap: 0;
  font-size: 24px;
  line-height: 1.35;
}

.fx-project-section-six__intro-copy p {
  margin: 0;
}

.fx-project-section-six__method,
.fx-project-section-six__split,
.fx-project-section-six__image-pair,
.fx-project-section-six__changelog {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

.fx-project-section-six__method-card {
  position: relative;
  display: flex;
  aspect-ratio: 696 / 342;
  min-width: 0;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 80px 40px;
}

.fx-project-section-six__method-card > img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}

.fx-project-section-six__method-content {
  position: relative;
  z-index: 1;
  width: 100%;
}

.fx-project-section-six__method-title,
.fx-project-section-six__method-copy {
  width: 100%;
  margin: 0;
  font-weight: 400;
  letter-spacing: 0;
}

.fx-project-section-six__method-title {
  margin-bottom: 34px;
  color: var(--text-t3);
  font-size: 32px;
  line-height: 1.15;
}

.fx-project-section-six__method-copy {
  color: var(--text-t1);
  font-size: 32px;
  line-height: 1.15;
}

.fx-project-section-six__slide {
  width: 100%;
  overflow: hidden;
}

.fx-project-section-six__slide-viewport {
  width: 100%;
  aspect-ratio: 1408 / 480;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  touch-action: pan-x;
  user-select: none;
  -webkit-overflow-scrolling: touch;
}

.fx-project-section-six__slide-viewport::-webkit-scrollbar {
  display: none;
}

.fx-project-section-six__slide-viewport.is-dragging {
  scroll-behavior: auto;
}

.fx-project-section-six__slide-track {
  display: flex;
  width: max-content;
  height: 100%;
}

.fx-project-section-six__slide-image {
  display: block;
  width: auto;
  height: 100%;
  max-width: none;
  pointer-events: none;
  user-select: none;
}

.fx-project-section-six__ds {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 16px;
  align-items: stretch;
}

.fx-project-section-six__changelog-panel,
.fx-project-section-six__image-card,
.fx-project-section-six__mode {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  margin: 0;
}

.fx-project-section-six__changelog-frame,
.fx-project-section-six__logotype,
.fx-project-section-six__text-card,
.fx-project-section-six__square-image,
.fx-project-section-six__square-frame {
  aspect-ratio: 1 / 1;
  min-width: 0;
  overflow: hidden;
}

.fx-project-section-six__changelog-frame,
.fx-project-section-six__logotype {
  position: relative;
  width: 100%;
}

.fx-project-section-six__changelog-track,
.fx-project-section-six__logotype-track {
  display: flex;
  width: 200%;
  height: 100%;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.fx-project-section-six__changelog-track.is-animating,
.fx-project-section-six__logotype-track.is-animating {
  transition: transform 350ms cubic-bezier(0.4, 0, 0.2, 1);
}

.fx-project-section-six__changelog-track img,
.fx-project-section-six__logotype-slide {
  flex: 0 0 50%;
  min-width: 0;
  height: 100%;
}

.fx-project-section-six__logotype-slide {
  position: relative;
  overflow: hidden;
  background: var(--section-six-cover-color, #ffb2c9);
}

.fx-project-section-six__changelog-track img,
.fx-project-section-six__logotype-slide img,
.fx-project-section-six__logotype img,
.fx-project-section-six__square-image img,
.fx-project-section-six__square-frame img,
.fx-project-section-six__mode > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}

.fx-project-section-six__logotype {
  background: #ffb2c9;
}

.fx-project-section-six__logotype-slide span::before,
.fx-project-section-six__logotype-slide span::after {
  position: absolute;
  z-index: 1;
  content: "";
  background: rgba(255, 255, 255, 0.4);
  pointer-events: none;
}

.fx-project-section-six__logotype-slide span::before {
  left: 0;
  right: 0;
  top: 77.011%;
  height: 1px;
}

.fx-project-section-six__logotype-slide span::after {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
}

.fx-project-section-six__logotype-slide img {
  position: relative;
  z-index: 2;
}

.fx-project-section-six__text-card {
  display: flex;
  flex-direction: column;
  gap: 34px;
  align-items: center;
  justify-content: center;
  padding: 80px;
  background: var(--surface-gray);
}

.fx-project-section-six__eyebrow,
.fx-project-section-six__card-copy,
.fx-project-section-six figcaption {
  width: 100%;
  margin: 0;
  font-weight: 400;
  letter-spacing: 0;
}

.fx-project-section-six__eyebrow {
  color: var(--text-t3);
  font-size: 24px;
  line-height: 1.35;
}

.fx-project-section-six__card-copy {
  color: var(--text-t1);
  font-size: 32px;
  line-height: 1.15;
}

.fx-project-section-six__square-image--darkmode img {
  object-position: 50% 50%;
}

.fx-project-section-six__image-card {
  gap: 16px;
}

.fx-project-section-six__square-frame--plugin {
  mix-blend-mode: luminosity;
}

.fx-project-section-six__mode {
  position: relative;
  width: 100%;
  display: block;
  aspect-ratio: 1408 / 800;
  overflow: hidden;
}

.fx-project-section-six__switch {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  display: flex;
  gap: 4px;
  align-items: center;
  overflow: hidden;
  padding: 4px;
  border-radius: 28px;
  background: rgba(0, 0, 0, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(20px);
  align-self: center;
  width: max-content;
}

.fx-project-section-six__mode > img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1408 / 800;
  object-fit: cover;
  object-position: center;
}

.fx-project-section-six__switch button {
  min-width: 52px;
  height: 24px;
  border: 0;
  border-radius: 24px;
  padding: 1px 8px;
  background: transparent;
  color: var(--text-t2);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0;
}

.fx-project-section-six__switch button.is-active {
  background: var(--surface-white);
  color: var(--text-t1);
}

.fx-project-section-six figcaption {
  color: var(--text-t1);
  font-size: 16px;
  line-height: 1.4;
}

@media (max-width: 960px) {
  .fx-project-section-six__intro {
    flex-direction: column;
  }

  .fx-project-section-six__intro h2,
  .fx-project-section-six__intro-copy {
    width: 100%;
    flex: none;
  }

  .fx-project-section-six__method,
  .fx-project-section-six__split,
  .fx-project-section-six__image-pair,
  .fx-project-section-six__changelog {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .fx-project-section-six {
    margin-bottom: 64px;
    gap: 32px;
  }

  .fx-project-section-six__intro h2,
  .fx-project-section-six__method-title,
  .fx-project-section-six__method-copy,
  .fx-project-section-six__card-copy {
    font-size: 28px;
  }

  .fx-project-section-six__intro-copy,
  .fx-project-section-six__eyebrow {
    font-size: 20px;
  }

  .fx-project-section-six__method-card,
  .fx-project-section-six__text-card {
    padding: 48px;
  }
}

@media (max-width: 439px) {
  .fx-project-section-six {
    gap: 28px;
  }

  .fx-project-section-six__intro h2,
  .fx-project-section-six__method-title,
  .fx-project-section-six__method-copy,
  .fx-project-section-six__card-copy {
    font-size: 24px;
  }

  .fx-project-section-six__intro-copy,
  .fx-project-section-six__eyebrow {
    font-size: 18px;
  }

  .fx-project-section-six__method-card,
  .fx-project-section-six__text-card {
    gap: 24px;
    padding: 32px;
  }
}

.fx-project-section-seven {
  display: flex;
  flex-direction: column;
  width: var(--project-content-width, calc(100% - 32px));
  margin: 0 auto 80px;
  gap: 40px;
  align-items: flex-start;
  color: var(--text-t1);
  font-family: var(--font-display);
  font-style: normal;
  letter-spacing: 0;
}

.fx-project-section-seven__intro {
  display: flex;
  width: calc(100% + 8px);
  gap: 16px;
  align-items: flex-start;
}

.fx-project-section-seven__intro h2,
.fx-project-section-seven__intro p {
  flex: 1 0 0;
  min-width: 0;
  margin: 0;
  color: var(--text-t1);
  font-weight: 400;
  letter-spacing: 0;
}

.fx-project-section-seven__intro h2 {
  font-size: 32px;
  line-height: 1.15;
}

.fx-project-section-seven__intro p {
  font-size: 24px;
  line-height: 1.35;
}

.fx-project-section-seven__content {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 80px;
  align-items: center;
}

.fx-project-section-seven__ug {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}

.fx-project-section-seven__wide,
.fx-project-section-seven__collection,
.fx-project-section-seven__image-card,
.fx-project-section-seven__phone-visual {
  margin: 0;
}

.fx-project-section-seven__wide {
  display: flex;
  width: calc(100% - 8px);
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}

.fx-project-section-seven__wide-frame {
  width: 100%;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  border: 0.5px solid var(--text-placeholder);
}

.fx-project-section-seven__wide-frame img,
.fx-project-section-seven__square-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}

.fx-project-section-seven__split,
.fx-project-section-seven__image-pair {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

.fx-project-section-seven__text-card {
  display: flex;
  aspect-ratio: 1 / 1;
  flex-direction: column;
  gap: 34px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 80px;
  background: var(--surface-gray);
}

.fx-project-section-seven__eyebrow,
.fx-project-section-seven__card-copy,
.fx-project-section-seven figcaption {
  width: 100%;
  margin: 0;
  font-weight: 400;
  letter-spacing: 0;
}

.fx-project-section-seven__eyebrow {
  color: var(--text-t3);
  font-size: 24px;
  line-height: 1.35;
}

.fx-project-section-seven__card-copy {
  color: var(--text-t1);
  font-size: 32px;
  line-height: 1.15;
}

.fx-project-section-seven__phone-visual {
  position: relative;
  aspect-ratio: 1 / 1;
  min-width: 0;
  overflow: hidden;
  background: #4f4039;
}

.fx-project-section-seven__visual-bg,
.fx-project-section-seven__visual-tint,
.fx-project-section-seven__phone-video,
.fx-project-section-seven__phone-screen,
.fx-project-section-seven__phone-shell {
  position: absolute;
  pointer-events: none;
  user-select: none;
}

.fx-project-section-seven__visual-bg {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fx-project-section-seven__phone-visual--fyp .fx-project-section-seven__visual-bg {
  mix-blend-mode: luminosity;
}

.fx-project-section-seven__phone-visual--fyp .fx-project-section-seven__visual-tint {
  inset: 0;
  background: #4f4039;
  mix-blend-mode: hard-light;
}

.fx-project-section-seven__phone-visual--message .fx-project-section-seven__visual-tint {
  inset: 0;
  background:
    linear-gradient(rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0.32)),
    rgba(255, 246, 0, 0.4);
  mix-blend-mode: lighten;
}

.fx-project-section-seven__phone-video,
.fx-project-section-seven__phone-screen {
  left: calc(50% + 9px);
  top: calc(50% + 80.5px);
  width: 50.1437%;
  height: 108.5006%;
  border-radius: 32px;
  object-fit: cover;
  transform: translate(-50%, -50%);
}

.fx-project-section-seven__phone-screen {
  z-index: 2;
}

.fx-project-section-seven__phone-shell {
  z-index: 3;
  left: 23.2759%;
  top: 4.5977%;
  width: 56.0345%;
  height: 114.5115%;
  object-fit: fill;
}

.fx-project-section-seven__image-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}

.fx-project-section-seven__square-frame {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.fx-project-section-seven__collection {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}

.fx-project-section-seven__collection-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1408 / 800;
  overflow: hidden;
}

.fx-project-section-seven__collection-bg,
.fx-project-section-seven__collection-overlay,
.fx-project-section-seven__collection-dim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
}

.fx-project-section-seven__collection-bg,
.fx-project-section-seven__collection-overlay {
  object-fit: cover;
}

.fx-project-section-seven__collection-dim {
  background: rgba(0, 0, 0, 0.4);
}

.fx-project-section-seven__collection-track {
  position: absolute;
  left: 7.3864%;
  right: 7.3864%;
  top: 50%;
  display: flex;
  gap: 8.5227%;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
}

.fx-project-section-seven__collection-track img {
  display: block;
  width: 26.6667%;
  max-width: 320px;
  aspect-ratio: 320 / 692.267;
  object-fit: cover;
}

.fx-project-section-seven figcaption {
  color: var(--text-t1);
  font-size: 16px;
  line-height: 1.4;
}

.fx-project-section-seven .fx-project-actions {
  width: auto;
  margin: 0;
  padding-bottom: 0;
  align-self: center;
}

.fx-project-section-seven__next-card {
  display: flex;
  width: min(80.558%, 1134.256px);
  height: 338.919px;
  align-items: center;
  justify-content: center;
  color: inherit;
  text-decoration: none;
}

.fx-project-section-seven__next-plane {
  position: relative;
  width: min(800px, 72vw);
  aspect-ratio: 2 / 1;
  overflow: hidden;
  background: #333333;
  transform: rotate(-10deg) skewX(26deg) scaleY(0.72);
  transform-origin: center center;
}

.fx-project-section-seven__next-bg,
.fx-project-section-seven__next-darken,
.fx-project-section-seven__next-screen,
.fx-project-section-seven__next-shell {
  position: absolute;
  pointer-events: none;
  user-select: none;
}

.fx-project-section-seven__next-bg {
  left: 0;
  top: 50%;
  width: 102.2223%;
  height: 363.611%;
  object-fit: cover;
  transform: translateY(-53.5%);
}

.fx-project-section-seven__next-phone {
  position: absolute;
  left: 50%;
  top: 6.58%;
  width: 39.9666%;
  height: 163.4193%;
  transform: translateX(-50%);
}

.fx-project-section-seven__next-screen {
  left: 5.3%;
  top: 2.5%;
  width: 89.45%;
  height: 95.92%;
  border-radius: 42px;
  object-fit: cover;
}

.fx-project-section-seven__next-shell {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.fx-project-section-seven__next-darken {
  left: 2.8475%;
  top: 34.5825%;
  width: 35.1709%;
  height: 87.6668%;
  object-fit: cover;
  mix-blend-mode: darken;
}

.fx-project-actions {
  width: var(--project-content-width, calc(100% - 32px));
  margin: 0 auto;
  padding-bottom: 64px;
}

.fx-project-actions__group {
  display: flex;
  align-items: center;
  gap: 24px;
}

.fx-project-actions__pill {
  display: flex;
  min-width: 52px;
  height: 24px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 24px;
  padding: 1px 8px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0;
  color: var(--text-t1);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.fx-project-actions__pill--primary {
  background: var(--highlight);
}

.fx-project-actions__pill--secondary {
  background: var(--surface-gray);
}

.fx-project-actions__pill span {
  display: block;
}

.fx-project-actions__pill:focus-visible {
  outline: 1px solid var(--text-t1);
  outline-offset: 3px;
}

@media (max-width: 960px) {
  .fx-project-section-seven__intro {
    flex-direction: column;
  }

  .fx-project-section-seven__intro h2,
  .fx-project-section-seven__intro p {
    width: 100%;
    flex: none;
  }

  .fx-project-section-seven__split,
  .fx-project-section-seven__image-pair {
    grid-template-columns: 1fr;
  }

  .fx-project-section-seven__text-card,
  .fx-project-section-seven__phone-visual,
  .fx-project-section-seven__image-card {
    width: 100%;
  }
}

@media (max-width: 760px) {
  .fx-project-section-seven {
    gap: 32px;
    margin-bottom: 64px;
  }

  .fx-project-section-seven__intro h2 {
    font-size: 28px;
  }

  .fx-project-section-seven__intro p {
    font-size: 20px;
  }

  .fx-project-section-seven__content {
    gap: 56px;
  }

  .fx-project-section-seven__text-card {
    padding: 48px;
  }

  .fx-project-section-seven__card-copy {
    font-size: 28px;
  }

  .fx-project-section-seven__eyebrow {
    font-size: 20px;
  }

  .fx-project-section-seven__collection-track {
    left: 6%;
    right: 6%;
    gap: 6%;
  }

  .fx-project-section-seven__next-card {
    width: 100%;
    height: 220px;
  }

  .fx-project-section-seven__next-plane {
    width: 680px;
  }

  .fx-project-actions {
    margin-bottom: 0;
    padding-bottom: 56px;
  }
}

@media (max-width: 439px) {
  .fx-project-section-seven__intro h2 {
    font-size: 24px;
  }

  .fx-project-section-seven__intro p {
    font-size: 18px;
  }

  .fx-project-section-seven {
    gap: 28px;
  }

  .fx-project-section-seven__content {
    gap: 44px;
  }

  .fx-project-section-seven__wide,
  .fx-project-section-seven__intro {
    width: 100%;
  }

  .fx-project-section-seven__text-card {
    gap: 24px;
    padding: 32px;
  }

  .fx-project-section-seven__card-copy {
    font-size: 24px;
  }

  .fx-project-section-seven__eyebrow {
    font-size: 18px;
  }

  .fx-project-section-seven__collection-frame {
    aspect-ratio: 1 / 1.1;
  }

  .fx-project-section-seven__collection-track {
    left: 8%;
    right: auto;
    width: 184%;
    justify-content: flex-start;
  }

  .fx-project-section-seven__next-card {
    height: 160px;
    overflow: hidden;
  }

  .fx-project-section-seven__next-plane {
    width: 520px;
  }

  .fx-project-actions {
    padding-bottom: 80px;
  }
}

.fx-detail-title-text,
.fx-detail-two-text,
.fx-detail-two-column {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.fx-detail-title-text h1 {
  flex: 1 0 0;
  min-width: 0;
  margin: 0;
  font-family: var(--font-display);
  font-size: 64px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
}

.fx-detail-info {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  flex-direction: column;
  gap: 40px;
}

.fx-detail-info-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.fx-detail-info-section p,
.fx-detail-richtext p {
  margin: 0;
  font-size: 24px;
  line-height: 1.35;
}

.fx-detail-eyebrow {
  margin: 0;
  color: rgba(0, 0, 0, 0.45);
}

.fx-detail-richtext {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 8;
}

.fx-detail-richtext a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.fx-detail-more {
  width: max-content;
  border: 0;
  padding: 0;
  background: transparent;
  color: #000000;
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.4;
  cursor: pointer;
}

.fx-detail-meta-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: 16px;
  line-height: 1.4;
}

.fx-detail-meta-list p {
  margin: 0;
}

.fx-detail-meta-list div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fx-detail-two-text h2,
.fx-detail-two-text p {
  flex: 1 0 0;
  min-width: 0;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0;
}

.fx-detail-two-text h2 {
  font-size: 32px;
  line-height: 1.15;
}

.fx-detail-two-text p {
  font-size: 24px;
  line-height: 1.35;
}

.fx-detail-one-image {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fx-detail-image-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 2880 / 1440;
  overflow: hidden;
  border: 0.5px solid rgba(0, 0, 0, 0.2);
}

.fx-detail-image-frame img,
.fx-detail-image-frame video,
.fx-detail-gallery-bg,
.fx-detail-gallery-stage > img,
.fx-detail-panel img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.fx-detail-one-image figcaption,
.fx-detail-gallery figcaption {
  margin: 0;
  font-size: 16px;
  line-height: 1.4;
}

.fx-detail-two-column {
  align-items: center;
}

.fx-detail-panel {
  position: relative;
  flex: 1 0 0;
  min-width: 0;
  aspect-ratio: 1;
  overflow: hidden;
  background: #f2f2f2;
}

.fx-detail-panel--text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 34px;
  padding: 80px;
}

.fx-detail-panel--text p {
  margin: 0;
  font-size: 32px;
  line-height: 1.15;
}

.fx-detail-panel--text .fx-detail-eyebrow {
  font-size: 24px;
  line-height: 1.35;
}

.fx-detail-panel--phone {
  background: #f2f2f2;
}

.fx-detail-phone-screen {
  position: absolute;
  left: calc(50% + 9px);
  top: calc(50% + 80.5px);
  width: 50.1437%;
  height: 108.5006%;
  border-radius: 32px;
  transform: translate(-50%, -50%);
}

.fx-detail-phone-frame {
  position: absolute;
  left: 23.2759%;
  top: 4.5977%;
  width: 56.0345%;
  height: 114.5115%;
}

.fx-detail-panel--editor {
  background: transparent;
}

.fx-detail-editor-bg,
.fx-detail-editor-warmth {
  position: absolute;
  inset: 0;
}

.fx-detail-editor-warmth {
  background: rgba(255, 190, 51, 0.24);
  mix-blend-mode: overlay;
  pointer-events: none;
}

.fx-detail-editor-cover--album {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 90.2511%;
  height: 61.2931%;
  transform: translate(-50%, -50%);
}

.fx-detail-editor-cover--album > img:first-child {
  border: 0.472px solid #000000;
  border-radius: 9.444px;
  box-shadow: 0 7.556px 30.222px rgba(0, 0, 0, 0.12);
}

.fx-detail-editor-badge {
  position: absolute;
  left: 62.19%;
  top: 6.56%;
  width: 30.19%;
  height: 35.44%;
}

.fx-detail-editor-filter {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 77.1434%;
  height: 76.7172%;
  transform: translate(-50%, -50%);
}

.fx-detail-gallery {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fx-detail-gallery-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1408 / 800;
  overflow: hidden;
}

.fx-detail-gallery-bg,
.fx-detail-gallery-overlay {
  position: absolute;
  inset: 0;
}

.fx-detail-gallery-overlay--50 {
  background: rgba(0, 0, 0, 0.5);
}

.fx-detail-gallery-overlay--40 {
  background: rgba(0, 0, 0, 0.4);
}

.fx-detail-gallery-overlay--32 {
  background: rgba(0, 0, 0, 0.32);
}

.fx-detail-gallery-overlay--multiply {
  background: #000000;
  mix-blend-mode: overlay;
}

.fx-detail-gallery-row {
  position: absolute;
  left: 7.3864%;
  right: 7.3864%;
  top: 50%;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
}

.fx-detail-gallery-row img,
.fx-detail-gallery-phone {
  width: 22.7273%;
  height: auto;
  aspect-ratio: 320 / 692.267;
  border: 0.533px solid rgba(0, 0, 0, 0.15);
  object-fit: cover;
}

.fx-detail-gallery-phone {
  position: absolute;
  border: 0;
}

.fx-detail-gallery-phone--left-low {
  left: 7.3864%;
  bottom: -2.5338%;
}

.fx-detail-gallery-phone--center-high {
  left: 38.6364%;
  top: 6.75%;
}

.fx-detail-gallery-phone--right-low {
  left: 69.8864%;
  bottom: -2.5338%;
}

.fx-detail-gallery-phone--left-high {
  left: 7.3864%;
  top: -5%;
}

.fx-detail-gallery-phone--center-low {
  left: 50%;
  top: 60.5163%;
  transform: translate(-50%, -50%);
}

.fx-detail-gallery-phone--right-high {
  right: 7.3864%;
  top: 0;
}

.contact-site {
  margin: 0;
  min-height: 100dvh;
  background: #000000;
  color: #ffffff;
  font-family: "KH Teka TRIAL", "PingFang SC", "Noto Sans CJK SC", sans-serif;
}

.contact-page {
  position: relative;
  min-height: 100dvh;
  overflow: hidden;
}

.contact-frame {
  position: relative;
  width: 100%;
  height: 100dvh;
  margin: 0;
  --contact-page-inset: 16px;
  --contact-grid-gutter: 8px;
  --contact-grid-column: calc((100vw - (var(--contact-page-inset) * 2) - (var(--contact-grid-gutter) * 11)) / 12);
  --contact-content-width: calc((var(--contact-grid-column) * 3) + (var(--contact-grid-gutter) * 2));
  --contact-hero-logo-size: calc((var(--contact-grid-column) * 2) + var(--contact-grid-gutter));
  --contact-hero-logo-left: calc(var(--contact-page-inset) + (var(--contact-grid-column) * 3) + (var(--contact-grid-gutter) * 3));
}

.contact-text-fields {
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: auto;
  width: min(var(--contact-content-width), calc(100% - 32px));
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  color: #ffffff;
  z-index: 2;
}

.contact-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.contact-bg-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  min-height: 100%;
  object-fit: cover;
  object-position: center center;
  transform: scaleX(-1);
}

.contact-side-shape {
  position: absolute;
  top: 50%;
  width: 100px;
  height: 40px;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}

.contact-side-shape--left {
  left: 16px;
}

.contact-side-shape--right {
  right: 16px;
  transform: translateY(-50%) scaleX(-1);
}

.contact-side-shape img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: fill;
}

.contact-bg-overlay {
  position: absolute;
  inset: 0;
  background: rgba(39, 255, 90, 0.8);
  mix-blend-mode: difference;
}

.contact-hero-logo {
  position: absolute;
  left: var(--contact-hero-logo-left);
  top: 50%;
  width: var(--contact-hero-logo-size);
  height: var(--contact-hero-logo-size);
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 1;
}

.contact-hero-logo img {
  position: absolute;
  display: block;
  max-width: none;
  height: auto;
}

.contact-hero-logo-v1 {
  left: 43.96875%;
  bottom: 31.03125%;
  width: 45.225%;
  height: 41.175%;
}

.contact-hero-logo-v2 {
  left: 9.375%;
  bottom: 15.96875%;
  width: 48%;
  height: 69.975%;
}

.contact-text-fields .contact-hello-wrap {
  display: grid;
  justify-items: center;
  gap: 0;
  width: 100%;
}

.contact-text-fields .contact-heading,
.contact-text-fields .contact-name,
.contact-text-fields > p,
.contact-text-fields p {
  margin: 0;
  color: #ffffff;
  text-align: center;
  width: 100%;
}

.contact-text-fields .contact-heading {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  font-family: "GT Super Txt Trial", "Times New Roman", serif;
  font-size: 16px;
  font-style: italic;
  font-weight: 700;
  line-height: 1.35;
  white-space: nowrap;
}

.contact-text-fields .contact-emoji {
  font-family: "KH Giga TRIAL", "KH Teka TRIAL", "PingFang SC", sans-serif;
  font-style: normal;
  font-weight: 700;
  line-height: 1.35;
}

.contact-text-fields .contact-name {
  font-family: "KH Teka TRIAL", "PingFang SC", "Noto Sans CJK SC", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
}

.contact-text-fields > p {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
}

.contact-description {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.contact-description--compact {
  gap: 0;
}

.contact-description u {
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.contact-block {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.contact-block h3 {
  margin: 0;
  width: 100%;
  color: #ffffff;
  text-align: center;
  font-family: "GT Super Txt Trial", "Times New Roman", serif;
  font-size: 16px;
  font-style: italic;
  font-weight: 700;
  line-height: 1.35;
}

.contact-list {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.contact-list-row {
  display: inline-flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #ffffff;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
}

.contact-list-row > span {
  width: auto;
  flex: 0 0 auto;
}

.contact-list-icon {
  display: inline-flex;
  width: 32px;
  height: 16px;
  align-items: center;
  justify-content: center;
}

.contact-list-icon img {
  display: block;
  width: auto;
  max-width: 32px;
  height: 16px;
  object-fit: contain;
}

.contact-list-icon--logo img {
  width: 32px;
  height: 16px;
}

.contact-list-icon--square img {
  width: 16px;
  height: 16px;
}

.contact-email {
  margin: 0;
  width: 100%;
  color: #ffffff;
  text-align: center;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
}

.contact-copyright {
  width: 100%;
}

.contact-copyright p {
  margin: 0;
  width: 100%;
  color: #ffffff;
  text-align: center;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
}

.contact-copyright-prefix {
  color: rgba(255, 255, 255, 0.6);
}

.contact-side-logo {
  position: absolute;
  left: 16px;
  top: 50%;
  width: 32px;
  height: 22.392px;
  transform: translateY(-50%) scale(10);
  transform-origin: left top;
  pointer-events: none;
  z-index: 2;
}

.contact-brand-word {
  position: absolute;
  left: calc(50% - 237px);
  top: calc(50% - 162px);
  margin: 0;
  color: #f2f2f2;
  font-family: "GT Super Ds Trial", "Times New Roman", serif;
  font-size: clamp(72px, 12.5vw, 240px);
  font-style: italic;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0;
  white-space: nowrap;
  pointer-events: none;
  z-index: 1;
}

.contact-divider {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 2;
}

.contact-divider-line {
  flex: 0 0 200px;
  height: 1px;
  background: #ffffff;
}

.contact-divider-art,
.contact-divider-arrow {
  flex: 0 0 200px;
  height: 40px;
  width: 200px;
  object-fit: contain;
}

.contact-divider-arrow {
  flex-basis: 40px;
  width: 40px;
  margin-left: -1px;
  margin-right: -1px;
}

.contact-divider-arrow--right {
  transform: rotate(180deg);
}

.contact-logo {
  position: relative;
  width: 32px;
  height: 32px;
  margin: 0;
}

.contact-bottom-bar {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  z-index: 2;
}

.contact-logo-part1,
.contact-logo-part2 {
  position: absolute;
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

.contact-logo-part1 {
  left: 14.07px;
  bottom: 9.93px;
  width: 14.472px;
  height: 13.176px;
}

.contact-logo-part2 {
  left: 3px;
  bottom: 5.11px;
  width: 15.36px;
  height: 22.392px;
}

.contact-locale {
  margin: 0;
  color: rgba(255, 255, 255, 0.6);
  font-family: "KH Teka TRIAL", "PingFang SC", "Noto Sans CJK SC", sans-serif;
  font-size: 16px;
  line-height: 1.4;
}

@media (max-width: 760px) {
  .ui-shell {
    padding: var(--space-8) var(--space-5) var(--space-16);
  }

  .contact-frame {
    width: 100%;
    height: 100dvh;
    --contact-hero-logo-size: min(180px, 24vw);
    --contact-hero-logo-left: 16px;
  }

  .contact-side-shape {
    top: 50%;
  }

  .contact-brand-word {
    left: 16px;
    top: 18%;
    transform: translateX(0);
    font-size: clamp(56px, 24vw, 96px);
  }

  .contact-stack {
    left: 50%;
    width: min(342px, calc(100% - 40px));
    transform: translateX(-50%);
  }

  .contact-text-fields {
    left: 50%;
    bottom: 40px;
    width: min(342px, calc(100% - 32px));
    transform: translateX(-50%);
  }

  .contact-text-fields .contact-hello-wrap {
    justify-items: center;
  }

  .contact-text-fields .contact-heading,
  .contact-text-fields .contact-name,
  .contact-text-fields > p,
  .contact-text-fields p {
    text-align: center;
  }

  .contact-divider,
  .contact-logo,
  .contact-locale {
    opacity: 0.35;
  }

  .ui-hero,
  .ui-section {
    padding-bottom: var(--space-12);
  }

  .ui-section {
    padding-top: var(--space-12);
  }

  .ui-hero__content,
  .fx-card-grid {
    grid-template-columns: 1fr;
  }

  .ui-hero h1 {
    font-size: 40px;
  }

  .ui-hero p {
    font-size: 16px;
  }

  .ui-demo-row--between {
    align-items: flex-start;
  }

  .fx-case-page {
    padding: var(--space-8) var(--space-5) var(--space-16);
  }

  .fx-case-back {
    margin-bottom: var(--space-8);
  }

  .fx-case-hero {
    padding-bottom: var(--space-12);
  }

  .fx-case-hero__grid,
  .fx-case-block,
  .fx-split-block,
  .fx-media-grid--two,
  .fx-media-grid--three {
    grid-template-columns: 1fr;
  }

  .fx-case-hero h1 {
    font-size: 40px;
  }

  .fx-case-hero p {
    font-size: 16px;
  }

  .fx-case-block {
    gap: var(--space-5);
    padding: var(--space-12) 0;
  }

  .fx-case-block--image .fx-figure,
  .fx-case-block--image .fx-case-prose,
  .fx-case-block--gallery .fx-media-grid {
    grid-column: auto;
  }

  .fx-case-block__label,
  .fx-split-block__content {
    padding-top: 0;
  }

  .fx-detail-page {
    padding: 16px 16px 80px;
  }

  .fx-detail-back {
    margin-bottom: 48px;
  }

  .fx-detail-stack {
    gap: 64px;
  }

  .fx-detail-title-text,
  .fx-detail-two-text,
  .fx-detail-two-column {
    flex-direction: column;
  }

  .fx-detail-title-text h1 {
    font-size: 48px;
  }

  .fx-detail-info-section p,
  .fx-detail-richtext p,
  .fx-detail-two-text p {
    font-size: 20px;
  }

  .fx-detail-two-text h2,
  .fx-detail-panel--text p {
    font-size: 28px;
  }

  .fx-detail-panel {
    width: 100%;
    flex: none;
  }

  .fx-detail-panel--text {
    padding: 32px;
  }

  .fx-detail-gallery-stage {
    aspect-ratio: 1 / 1.05;
  }

  .fx-detail-gallery-row {
    left: 5%;
    right: 5%;
  }

  .fx-detail-gallery-row img,
  .fx-detail-gallery-phone {
    width: 28%;
  }

  .fx-detail-gallery-phone--left-low,
  .fx-detail-gallery-phone--left-high {
    left: 5%;
  }

  .fx-detail-gallery-phone--right-low,
  .fx-detail-gallery-phone--right-high {
    right: 5%;
    left: auto;
  }
}

@media (min-width: 440px) and (max-width: 480px) {
  .contact-frame {
    --contact-content-width: min(342px, calc(100% - 32px));
    --contact-hero-logo-size: 112px;
    --contact-hero-logo-left: 16px;
  }

  .contact-text-fields {
    width: var(--contact-content-width);
    top: 50%;
    bottom: auto;
    transform: translate(-50%, -50%);
    gap: 40px;
  }
}

.project-four-site {
  background: var(--surface-white);
  color: var(--text-t1);
}

.project-four-page {
  padding: 0 0 112px;
}

.project-four-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 4096 / 3755;
  overflow: hidden;
  background: #f4f4f4;
  color: var(--surface-dark, #000000);
}

.project-four-hero__image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.project-four-hero__content {
  position: absolute;
  left: 50%;
  top: 108px;
  z-index: 1;
  display: flex;
  width: var(--project-content-width, calc(100% - 32px));
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  transform: translateX(-50%);
}

.project-four-hero__brand {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.project-four-hero__logo {
  display: block;
  width: 224px;
  height: 32px;
  object-fit: contain;
}

.project-four-hero__meta,
.project-four-hero__title {
  margin: 0;
  color: var(--surface-dark, #000000);
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0;
}

.project-four-hero__meta {
  display: flex;
  flex-direction: column;
  font-size: 16px;
  line-height: 1.4;
}

.project-four-hero__title {
  display: flex;
  width: 100%;
  flex-direction: column;
  font-size: 64px;
  line-height: 1;
}

.project-four-info {
  display: grid;
  width: var(--project-content-width, calc(100% - 32px));
  margin: 40px auto 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
  color: var(--text-t1);
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0;
}

.project-four-info h2 {
  margin: 0;
  font-size: 64px;
  font-weight: 400;
  line-height: 1;
}

.project-four-info__details {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 40px;
}

.project-four-info__block,
.project-four-info__meta,
.project-four-info__meta div {
  display: flex;
  flex-direction: column;
}

.project-four-info__block {
  gap: 16px;
}

.project-four-info__eyebrow,
.project-four-info__body,
.project-four-info__body p,
.project-four-info__meta,
.project-four-info__meta dt,
.project-four-info__meta dd {
  margin: 0;
}

.project-four-info__eyebrow {
  color: var(--text-t3);
  font-size: 24px;
  line-height: 1.35;
}

.project-four-info__body {
  display: flex;
  flex-direction: column;
  gap: 32px;
  font-size: 24px;
  line-height: 1.35;
}

.project-four-info__meta {
  gap: 16px;
  font-size: 16px;
  line-height: 1.4;
}

.project-four-info__meta div {
  gap: 4px;
}

.project-four-info__meta dt {
  color: var(--text-t3);
}

.project-four-info__meta a {
  color: var(--text-t1);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.project-four-section-one {
  width: 100%;
  margin-top: 80px;
  color: var(--text-t1);
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0;
}

.project-four-camera-cover {
  position: relative;
  display: flex;
  height: 800px;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
  padding: 160px 80px 80px;
  color: var(--surface-white, #ffffff);
  text-align: center;
}

.project-four-camera-cover__image {
  position: absolute;
  left: 0;
  top: -79.13%;
  width: 100%;
  height: 225%;
  object-fit: cover;
}

.project-four-camera-cover__content {
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: 80px;
}

.project-four-camera-cover__icon {
  display: block;
  width: 200px;
  height: 200px;
  object-fit: cover;
}

.project-four-camera-cover__text {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.project-four-camera-cover__text p,
.project-four-camera-cover__text h2 {
  margin: 0;
  font-weight: 400;
}

.project-four-camera-cover__text p {
  font-size: 32px;
  line-height: 1.15;
}

.project-four-camera-cover__text h2 {
  max-width: 1280px;
  font-size: 64px;
  line-height: 1;
}

.project-four-camera-gallery {
  display: flex;
  margin: 16px 16px 0;
  flex-direction: column;
  gap: 40px;
}

.project-four-camera-gallery__pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

.project-four-camera-figure,
.project-four-camera-keypages {
  display: flex;
  min-width: 0;
  margin: 0;
  flex-direction: column;
  gap: 12px;
}

.project-four-camera-figure__frame,
.project-four-camera-keypages__frame {
  position: relative;
  overflow: hidden;
  background: #a9c7c7;
}

.project-four-camera-figure__frame {
  height: 696px;
}

.project-four-camera-keypages__frame {
  height: 1013px;
}

.project-four-camera-figure__frame img,
.project-four-camera-keypages__frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-four-camera-figure figcaption,
.project-four-camera-keypages figcaption {
  color: var(--text-t1);
  font-size: 16px;
  line-height: 1.4;
}

.project-four-camera-night {
  position: relative;
  min-height: 1120px;
  margin-top: 40px;
  overflow: hidden;
}

.project-four-camera-night::before {
  position: absolute;
  inset: 94px 0 146px;
  background: #100202;
  content: "";
}

.project-four-camera-night__inner {
  position: relative;
  z-index: 1;
  display: flex;
  width: min(100% - 160px, 1338px);
  margin: 0 auto;
  align-items: center;
  gap: 16px;
}

.project-four-camera-night__phone {
  display: block;
  width: min(48vw, 642px);
  height: 1200px;
  object-fit: contain;
}

.project-four-camera-night__copy {
  display: flex;
  width: 680px;
  flex-direction: column;
  gap: 20px;
  color: var(--surface-white, #ffffff);
  font-size: 32px;
  line-height: 1.15;
}

.project-four-camera-night__copy p,
.project-four-camera-night__copy h3 {
  margin: 0;
  font-weight: 400;
}

.project-four-camera-night__copy p {
  color: var(--surface-white-a60, rgba(255, 255, 255, 0.6));
}

.project-four-camera-features {
  position: relative;
  display: grid;
  min-height: 1028px;
  grid-template-columns: 680px 560px;
  align-items: center;
  justify-content: center;
  gap: 16px;
  overflow: hidden;
  background: rgba(128, 158, 221, 0.8);
}

.project-four-camera-features__copy {
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-size: 32px;
  line-height: 1.15;
}

.project-four-camera-features__copy p,
.project-four-camera-features__copy div {
  margin: 0;
}

.project-four-camera-features__copy > p {
  color: var(--text-t3);
}

.project-four-camera-features__copy div {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.project-four-camera-features__visual {
  position: relative;
  width: 560px;
  height: 1028px;
}

.project-four-camera-features__hdr {
  position: absolute;
  left: 53px;
  top: 29px;
  width: 453px;
  height: 940px;
  object-fit: cover;
  box-shadow: 0 14px 58px rgba(0, 0, 0, 0.03);
}

.project-four-camera-features__phone {
  position: absolute;
  left: -50px;
  top: -27px;
  width: 660px;
  height: 1173px;
  object-fit: cover;
}

.project-four-section-two {
  display: flex;
  width: 100%;
  margin-top: 40px;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  color: var(--text-t1);
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0;
}

.project-four-album-cover {
  position: relative;
  width: 100%;
  height: 800px;
  overflow: hidden;
  color: var(--surface-white, #ffffff);
  text-align: center;
}

.project-four-album-cover__image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: darken;
}

.project-four-album-cover__icon {
  position: absolute;
  left: 50%;
  top: 200px;
  width: 200px;
  height: 172px;
  object-fit: contain;
  transform: translateX(-50%);
}

.project-four-album-cover__text {
  position: absolute;
  left: 50%;
  top: 487px;
  display: flex;
  width: min(1200px, calc(100% - 160px));
  flex-direction: column;
  align-items: center;
  gap: 20px;
  transform: translateX(-50%);
}

.project-four-album-cover__text p,
.project-four-album-cover__text h2 {
  margin: 0;
  font-weight: 400;
}

.project-four-album-cover__text p {
  font-size: 32px;
  line-height: 1.15;
}

.project-four-album-cover__text h2 {
  font-size: 64px;
  line-height: 1;
}

.project-four-album-strip {
  display: flex;
  width: 100%;
  align-items: flex-end;
  justify-content: center;
  gap: 16px;
  overflow: hidden;
}

.project-four-album-strip__phone {
  display: block;
  height: auto;
  flex: 0 0 auto;
  object-fit: contain;
}

.project-four-album-strip__phone--one {
  width: 355.556px;
}

.project-four-album-strip__phone--two {
  width: 377.725px;
}

.project-four-album-strip__phone--three {
  width: 399.445px;
}

.project-four-album-strip__phone--four {
  width: 377.254px;
}

.project-four-album-strip__phone--five {
  width: 350.889px;
}

.project-four-album-strip__phone--six {
  width: 333.333px;
}

.project-four-album-tnt,
.project-four-album-move,
.project-four-album-column-image {
  margin: 0;
}

.project-four-album-tnt {
  width: min(1200px, calc(100% - 32px));
  aspect-ratio: 1200 / 888.889;
}

.project-four-album-tnt img,
.project-four-album-move img,
.project-four-album-column-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.project-four-section-text {
  display: grid;
  width: var(--project-content-width, calc(100% - 32px));
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

.project-four-section-text h3,
.project-four-section-text p {
  margin: 0;
  font-weight: 400;
}

.project-four-section-text h3 {
  font-size: 32px;
  line-height: 1.15;
}

.project-four-section-text div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0;
  font-size: 24px;
  line-height: 1.35;
}

.project-four-album-move {
  width: min(1100px, calc(100% - 32px));
  aspect-ratio: 1100 / 648;
}

.project-four-album-two-column {
  display: grid;
  width: var(--project-content-width, calc(100% - 32px));
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: center;
}

.project-four-album-column-image {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 16px;
}

.project-four-album-column-image div {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.project-four-album-column-image img {
  object-fit: cover;
}

.project-four-album-column-image figcaption {
  color: var(--text-t1);
  font-size: 16px;
  line-height: 1.4;
}

.project-four-section-three {
  display: flex;
  width: 100%;
  margin-top: 40px;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  color: var(--text-t1);
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0;
}

.project-four-video-cover {
  position: relative;
  width: 100%;
  height: 800px;
  overflow: hidden;
  color: var(--surface-white, #ffffff);
  text-align: center;
}

.project-four-video-cover__image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: darken;
}

.project-four-video-cover__text {
  position: absolute;
  left: 50%;
  top: 447px;
  z-index: 1;
  display: flex;
  width: min(1200px, calc(100% - 160px));
  flex-direction: column;
  align-items: center;
  gap: 20px;
  transform: translateX(-50%);
}

.project-four-video-cover__text p,
.project-four-video-cover__text h2 {
  margin: 0;
  font-weight: 400;
}

.project-four-video-cover__text p {
  font-size: 32px;
  line-height: 1.15;
}

.project-four-video-cover__text h2 {
  font-size: 64px;
  line-height: 1;
}

.project-four-video-stack {
  display: flex;
  width: var(--project-content-width, calc(100% - 32px));
  flex-direction: column;
  gap: 16px;
}

.project-four-video-frame {
  width: 100%;
  margin: 0;
  aspect-ratio: 5632 / 4320;
  overflow: hidden;
  background: var(--surface-gray, #f2f2f2);
}

.project-four-video-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-six-site {
  background: var(--surface-white);
  color: var(--text-t1);
}

.project-six-page {
  padding: 0 0 112px;
}

.project-six-hero {
  width: 100%;
  aspect-ratio: 2 / 1;
  margin: 0 0 0;
  overflow: hidden;
  background: var(--surface-white);
}

.project-six-hero__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.project-six-header-info {
  display: grid;
  width: var(--project-content-width, calc(100% - 32px));
  margin: 40px auto 96px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

.project-six-header-info h1 {
  margin: 0;
  color: var(--text-t1);
  font-family: "Hiragino Mincho Pro", "Yu Mincho", "Songti SC", serif;
  font-size: 80px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
}

.project-six-header-info__details {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 40px;
}

.project-six-header-info__block {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.project-six-header-info__meta > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.project-six-header-info__eyebrow,
.project-six-header-info__text,
.project-six-theory,
.project-six-header-info__meta-label,
.project-six-header-info__meta-value,
.project-six-header-info__download,
.project-six-more,
.project-six-content figcaption {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0;
}

.project-six-header-info__eyebrow {
  color: var(--text-t3);
  font-size: 24px;
  line-height: 1.35;
}

.project-six-header-info__text,
.project-six-theory {
  color: var(--text-t1);
  font-size: 24px;
  line-height: 1.35;
}

.project-six-theory {
  overflow: hidden;
}

.project-six-theory p {
  margin: 0;
}

.project-six-theory.is-collapsed {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 8;
}

.project-six-theory-images {
  display: flex;
  gap: 24px;
  align-items: center;
  overflow-x: auto;
  scrollbar-width: none;
}

.project-six-theory-images::-webkit-scrollbar {
  display: none;
}

.project-six-theory-images img {
  display: block;
  width: 200px;
  height: 200px;
  flex: 0 0 200px;
  border-radius: 50%;
  object-fit: cover;
}

.project-six-more {
  width: max-content;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--text-t1);
  font-size: 16px;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
}

.project-six-more:hover,
.project-six-header-info__download:hover {
  text-decoration: underline;
}

.project-six-header-info__meta {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.project-six-header-info__meta-label,
.project-six-header-info__meta-value,
.project-six-header-info__download {
  color: var(--text-t1);
  font-size: 16px;
  line-height: 1.4;
  text-decoration: none;
}

.project-six-content {
  display: flex;
  width: var(--project-content-width, calc(100% - 32px));
  margin: 0 auto;
  flex-direction: column;
  gap: 16px;
}

.project-six-content figure {
  margin: 0;
}

.project-six-content img {
  display: block;
  max-width: 100%;
  height: auto;
}

.project-six-object {
  display: flex;
  min-height: min(56vw, 760px);
  align-items: center;
  justify-content: center;
}

.project-six-object img {
  width: min(72vw, 1032px);
}

.project-six-book-pair,
.project-six-wallpapers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

.project-six-book-pair figure,
.project-six-wallpapers figure,
.project-six-book-spine,
.project-six-fullscreen {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 8px;
}

.project-six-book-pair img,
.project-six-wallpapers img,
.project-six-book-spine img,
.project-six-fullscreen img {
  width: 100%;
}

.project-six-content figcaption {
  color: var(--text-t3);
  font-size: 16px;
  line-height: 1.4;
}

.project-six-actions {
  margin-top: 64px;
  padding-bottom: 0;
}

.project-six-next-project {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1440 / 520;
  margin: 80px auto 0;
  overflow: hidden;
  background: var(--surface-white);
  color: inherit;
  text-decoration: none;
  isolation: isolate;
}

.project-six-next-project::before {
  position: absolute;
  left: -8%;
  top: 2%;
  z-index: 0;
  width: 116%;
  height: 62%;
  content: "";
  border: 1px solid rgba(0, 0, 0, 0.9);
  background:
    radial-gradient(circle at 17% 38%, rgba(255, 255, 255, 0.38) 0 1.5%, transparent 1.7%),
    radial-gradient(circle at 57% 20%, rgba(255, 255, 255, 0.28) 0 1.1%, transparent 1.3%),
    linear-gradient(135deg, #d9b15c 0%, #f1d891 44%, #c89441 100%);
  transform: rotate(-10deg) skewX(50deg) scaleY(0.64);
  transform-origin: center center;
}

.project-six-next-project__plane,
.project-six-next-project__leg {
  position: absolute;
  pointer-events: none;
}

.project-six-next-project__leg {
  z-index: 1;
  display: block;
  width: 1px;
  object-fit: fill;
  opacity: 0.9;
}

.project-six-next-project__leg--left {
  left: 0;
  top: 26%;
  height: 52%;
}

.project-six-next-project__leg--center {
  left: 32%;
  bottom: 0;
  height: 50%;
}

.project-six-next-project__leg--right {
  right: 0;
  top: 30%;
  height: 46%;
}

.project-six-next-project__plane {
  left: 0;
  z-index: 1;
  width: 100%;
  height: 56%;
}

.project-six-next-project__plane::before {
  display: block;
  width: 70.5%;
  height: auto;
  aspect-ratio: 2 / 1;
  margin: 0 auto;
  border: 1px solid rgba(0, 0, 0, 0.9);
  content: "";
  transform: rotate(-10deg) skewX(50deg) scaleY(0.64);
  transform-origin: center center;
}

.project-six-next-project__plane--back {
  top: 8%;
}

.project-six-next-project__plane--front {
  top: 10%;
}

.project-six-next-project__media {
  position: absolute;
  inset: -20% -8% -40%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.project-six-next-project__media img {
  display: block;
  width: 100%;
  height: auto;
}

.project-six-next-project:focus-visible {
  outline: none;
}

.project-six-next-project:focus-visible .project-six-next-project__plane::before {
  border-color: var(--highlight);
}

.project-five-site {
  background: var(--surface-white);
  color: var(--text-t1);
}

.project-five-page {
  padding: 0 0 112px;
}

.project-five-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 1440 / 1200;
  overflow: hidden;
  background: var(--surface-white);
}

.project-five-hero__device {
  position: absolute;
  left: 5.555556%;
  top: 6.666667%;
  display: block;
  width: 88.888889%;
  height: 90.78125%;
  object-fit: cover;
  object-position: center center;
}

.project-five-designer-screen {
  position: absolute;
  left: 50%;
  top: 8.083333%;
  width: 86.111111%;
  aspect-ratio: 1240 / 708;
  overflow: hidden;
  border-radius: 4px;
  background: #111111;
  transform: translateX(-50%);
  isolation: isolate;
}

.project-five-designer-screen__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  filter: grayscale(1);
  pointer-events: none;
}

.project-five-designer-screen__tone {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.2);
  mix-blend-mode: color;
  pointer-events: none;
}

.project-five-designer-screen__title {
  position: absolute;
  left: 50%;
  top: 32px;
  z-index: 2;
  margin: 0;
  color: var(--surface-white);
  font-family: "GT Super Ds Trial", "Times New Roman", serif;
  font-size: 40px;
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  transform: translateX(-50%);
}

.project-five-designer-screen__dot {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  transform: translateY(-50%);
}

.project-five-designer-screen__dot--left {
  left: 32px;
  background: var(--surface-white);
}

.project-five-designer-screen__dot--right {
  right: 32px;
  background: #ff3333;
}

.project-five-designer-screen__caption {
  position: absolute;
  left: 50%;
  bottom: 76px;
  z-index: 2;
  width: min(720px, calc(100% - 192px));
  margin: 0;
  color: var(--surface-white);
  font-family: "Hiragino Mincho Pro", "Yu Mincho", "Songti SC", serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  opacity: 0.64;
  transform: translateX(-50%);
}

.project-five-designer-screen__caption p {
  margin: 0;
}

.project-five-header-info {
  display: grid;
  width: var(--project-content-width, calc(100% - 32px));
  margin: 25px auto 272px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

.project-five-header-info h1 {
  margin: 0;
  color: var(--text-t1);
  font-family: var(--font-display);
  font-size: 64px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
}

.project-five-header-info__details {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 40px;
}

.project-five-header-info__block {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.project-five-header-info__eyebrow,
.project-five-header-info__text,
.project-five-theory,
.project-five-header-info__meta-label,
.project-five-header-info__meta-value,
.project-five-header-info__visit,
.project-five-more,
.project-five-content figcaption {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0;
}

.project-five-header-info__eyebrow {
  color: var(--text-t3);
  font-size: 24px;
  line-height: 1.35;
}

.project-five-header-info__text,
.project-five-theory {
  color: var(--text-t1);
  font-size: 24px;
  line-height: 1.35;
}

.project-five-theory {
  overflow: hidden;
  white-space: normal;
}

.project-five-theory p {
  margin: 0;
}

.project-five-theory a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.project-five-theory.is-collapsed {
  display: -webkit-box;
  max-height: calc(1.35em * 8);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 8;
}

.project-five-more {
  width: max-content;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--text-t1);
  font-size: 16px;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
}

.project-five-more:hover,
.project-five-header-info__visit:hover {
  text-decoration: underline;
}

.project-five-header-info__meta {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.project-five-header-info__meta > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.project-five-header-info__meta-label,
.project-five-header-info__meta-value,
.project-five-header-info__visit {
  color: var(--text-t1);
  font-size: 16px;
  line-height: 1.4;
}

.project-five-header-info__meta-label {
  color: var(--text-t3);
}

.project-five-content {
  display: flex;
  width: calc(100% - 32px);
  margin: 0 auto;
  flex-direction: column;
  gap: 24px;
}

.project-five-image-block {
  display: flex;
  margin: 0;
  flex-direction: column;
  gap: 12px;
}

.project-five-image-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  border: 0.5px solid var(--text-placeholder, rgba(0, 0, 0, 0.2));
}

.project-five-image-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-five-content figcaption {
  color: var(--text-t1);
  font-size: 16px;
  line-height: 1.4;
}

.project-five-actions {
  margin-top: 16px;
}

.project-two-site {
  background: var(--surface-white);
  color: var(--text-t1);
}

.project-two-page {
  padding: 0 0 96px;
}

.project-two-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 1440 / 1120;
  overflow: hidden;
  background: #333333;
  color: var(--surface-white);
  isolation: isolate;
}

.project-two-hero__image {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.project-two-hero__content {
  position: absolute;
  left: 50%;
  top: 109px;
  z-index: 1;
  display: flex;
  width: var(--project-content-width, calc(100% - 32px));
  flex-direction: column;
  align-items: center;
  gap: 20px;
  color: var(--surface-white);
  text-align: center;
  transform: translateX(-50%);
}

.project-two-hero__logo {
  display: block;
  width: 224px;
  height: 32px;
  object-fit: contain;
}

.project-two-hero__meta,
.project-two-hero__title {
  margin: 0;
  color: var(--surface-white);
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0;
}

.project-two-hero__meta {
  display: flex;
  flex-direction: column;
  font-size: 16px;
  line-height: 1.4;
}

.project-two-hero__title {
  display: flex;
  flex-direction: column;
  font-size: 64px;
  line-height: 1;
}

.project-two-content {
  display: flex;
  width: var(--project-content-width, calc(100% - 32px));
  margin: 40px auto 0;
  flex-direction: column;
  gap: 80px;
}

.project-two-intro {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

.project-two-intro h2 {
  margin: 0;
  color: var(--text-t1);
  font-family: var(--font-display);
  font-size: 64px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
}

.project-two-intro__details {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 40px;
}

.project-two-intro__block,
.project-two-section-one,
.project-two-section-one__details,
.project-two-section-two,
.project-two-section-two__details,
.project-two-section-three,
.project-two-section-three__details,
.project-two-section-four,
.project-two-section-four__details {
  display: flex;
  flex-direction: column;
}

.project-two-intro__block {
  gap: 16px;
}

.project-two-section-one {
  gap: 36px;
}

.project-two-section-two {
  gap: 40px;
}

.project-two-section-three {
  gap: 40px;
}

.project-two-section-four {
  gap: 40px;
}

.project-two-section-one__details {
  gap: 16px;
}

.project-two-section-two__details {
  gap: 27px;
}

.project-two-section-three__details {
  gap: 16px;
}

.project-two-section-four__details {
  gap: 16px;
}

.project-two-eyebrow,
.project-two-intro__body,
.project-two-meta,
.project-two-text-split,
.project-two-text-card {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0;
}

.project-two-eyebrow {
  color: var(--text-t3);
  font-size: 24px;
  line-height: 1.35;
}

.project-two-intro__body {
  display: flex;
  flex-direction: column;
  gap: 0;
  color: var(--text-t1);
  font-size: 24px;
  line-height: 1.35;
}

.project-two-intro__body p,
.project-two-text-split p,
.project-two-text-card p {
  margin: 0;
}

.project-two-meta {
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: var(--text-t1);
  font-size: 16px;
  line-height: 1.4;
}

.project-two-meta div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.project-two-meta dt,
.project-two-meta dd {
  margin: 0;
}

.project-two-meta dt {
  color: var(--text-t3);
}

.project-two-meta a {
  color: var(--text-t1);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.project-two-text-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  color: var(--text-t1);
}

.project-two-text-split h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0;
}

.project-two-text-split div {
  display: flex;
  flex-direction: column;
  gap: 24px;
  font-size: 24px;
  line-height: 1.35;
}

.project-two-two-column {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: center;
}

.project-two-square-image,
.project-two-large-image {
  margin: 0;
  overflow: hidden;
  background: var(--surface-gray);
}

.project-two-square-image {
  aspect-ratio: 1 / 1;
}

.project-two-large-image {
  aspect-ratio: 1408 / 800;
  background: var(--surface-dark);
}

.project-two-square-image img,
.project-two-large-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-two-text-card {
  display: flex;
  aspect-ratio: 1 / 1;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  gap: 34px;
  overflow: hidden;
  padding: 80px;
  background: var(--surface-gray);
  color: var(--text-t1);
  font-size: 24px;
  line-height: 1.35;
}

.project-two-text-card div {
  display: flex;
  flex-direction: column;
  gap: 24px;
  color: var(--text-t1);
  font-size: 32px;
  line-height: 1.15;
}

.project-two-text-card--blue {
  background: #c5eafc;
}

.project-two-text-card--sage {
  background: #d4d8c0;
}

.project-two-text-card--stone {
  background: #cbcbc9;
}

.project-two-text-card--ice {
  background: #d8e1e9;
}

.project-two-section-four__brand-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: center;
  width: 100%;
}

.project-two-section-four__brand-placeholder,
.project-two-wide-half-image {
  aspect-ratio: 696 / 400;
  min-width: 0;
}

.project-two-section-four__brand-placeholder {
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.project-two-wide-half-image {
  margin: 0;
  overflow: hidden;
}

.project-two-wide-half-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-two-caption-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

.project-two-caption-image,
.project-two-redesign-image {
  display: flex;
  min-width: 0;
  margin: 0;
  flex-direction: column;
  gap: 12px;
}

.project-two-caption-image__frame {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--surface-gray);
}

.project-two-caption-image__frame img,
.project-two-redesign-image__frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-two-caption-image figcaption,
.project-two-redesign-image figcaption {
  margin: 0;
  color: var(--text-t1);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
}

.project-two-redesign-image__frame {
  aspect-ratio: 1408 / 800;
  overflow: hidden;
  background: var(--surface-gray);
}

.project-two-mode {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.project-two-mode__image img {
  transition: opacity 160ms ease;
}

.project-two-switch {
  display: flex;
  width: max-content;
  align-items: center;
  gap: 4px;
  overflow: hidden;
  padding: 4px;
  border-radius: 28px;
  background: rgba(0, 0, 0, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(20px);
}

.project-two-switch button {
  min-width: 52px;
  height: 24px;
  border: 0;
  border-radius: 24px;
  padding: 1px 8px;
  background: transparent;
  color: var(--text-t2);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0;
  text-align: center;
}

.project-two-switch button.is-active {
  background: var(--surface-white);
  color: var(--text-t1);
}

.project-two-actions {
  display: flex;
  justify-content: center;
  padding-bottom: 0;
}

.project-two-next-project {
  display: block;
  width: min(80.558%, 1134px);
  align-self: center;
  color: inherit;
  text-decoration: none;
}

.project-two-next-project img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1134 / 339;
  object-fit: cover;
}

.project-two-next-project:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 8px;
}

.project-three-site {
  background: var(--surface-white);
  color: var(--text-t1);
}

.project-three-page {
  padding: 0 0 112px;
}

.project-three-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 1440 / 1320;
  overflow: hidden;
  background: #8f8f8f;
  color: var(--surface-dark, #000000);
}

.project-three-hero__image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.project-three-hero__content {
  position: absolute;
  left: 50%;
  top: 108px;
  z-index: 1;
  display: flex;
  width: var(--project-content-width, calc(100% - 32px));
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  transform: translateX(-50%);
}

.project-three-hero__brand {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.project-three-hero__logo {
  position: relative;
  display: block;
  width: 224px;
  height: 32px;
}

.project-three-hero__logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.project-three-hero__logo-wing,
.project-three-hero__logo-icon {
  position: absolute;
  top: 0;
  display: block;
  height: 32px;
  object-fit: contain;
}

.project-three-hero__logo-wing {
  width: 80px;
}

.project-three-hero__logo-wing--left {
  left: 0;
}

.project-three-hero__logo-wing--right {
  right: 0;
}

.project-three-hero__logo-icon {
  left: 96px;
  width: 32px;
}

.project-three-hero__meta,
.project-three-hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0;
}

.project-three-hero__meta {
  display: flex;
  flex-direction: column;
  color: #000000;
  font-size: 16px;
  line-height: 1.4;
}

.project-three-hero__title {
  display: flex;
  width: 100%;
  flex-direction: column;
  color: #000000;
  font-size: 64px;
  line-height: 1;
}

.project-three-content {
  display: flex;
  width: var(--project-content-width, calc(100% - 32px));
  margin: 40px auto 0;
  flex-direction: column;
  gap: 80px;
}

.project-three-stack,
.project-three-section,
.project-three-section--viewroom {
  display: flex;
  flex-direction: column;
}

.project-three-stack {
  gap: 40px;
}

.project-three-section {
  gap: 40px;
}

.project-three-section--tight {
  gap: 16px;
}

.project-three-section--viewroom {
  gap: 23px;
}

.project-three-intro {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

.project-three-intro h2 {
  margin: 0;
  color: var(--text-t1);
  font-family: var(--font-display);
  font-size: 64px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
}

.project-three-intro__details {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 40px;
}

.project-three-intro__block {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.project-three-eyebrow,
.project-three-intro__body,
.project-three-meta,
.project-three-image figcaption,
.project-three-control-image figcaption,
.project-three-text-split,
.project-three-text-card {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0;
}

.project-three-eyebrow {
  color: var(--text-t3);
  font-size: 24px;
  line-height: 1.35;
}

.project-three-intro__body,
.project-three-text-card {
  color: var(--text-t1);
  font-size: 24px;
  line-height: 1.35;
}

.project-three-intro__body--spaced {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.project-three-intro__body p,
.project-three-text-card p,
.project-three-text-split p {
  margin: 0;
}

.project-three-meta {
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: var(--text-t1);
  font-size: 16px;
  line-height: 1.4;
}

.project-three-meta div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.project-three-meta dt,
.project-three-meta dd {
  margin: 0;
}

.project-three-meta dt {
  color: var(--text-t3);
}

.project-three-meta a {
  color: var(--text-t1);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.project-three-image,
.project-three-control-image,
.project-three-square-image {
  margin: 0;
}

.project-three-image,
.project-three-control-image {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 12px;
}

.project-three-image--no-caption {
  gap: 0;
}

.project-three-image__frame,
.project-three-control-image__frame,
.project-three-square-image {
  position: relative;
  overflow: hidden;
}

.project-three-image__frame {
  width: 100%;
  aspect-ratio: 2 / 1;
}

.project-three-image__frame--rounded {
  aspect-ratio: 1408 / 880;
  border-radius: 12px;
}

.project-three-image__frame--wide {
  aspect-ratio: 4096 / 2065;
}

.project-three-image__frame--banner {
  aspect-ratio: 4096 / 1690;
}

.project-three-image__frame--photo {
  aspect-ratio: 4096 / 2793;
}

.project-three-image__frame--video {
  aspect-ratio: 4096 / 2304;
}

.project-three-image__frame img,
.project-three-control-image__frame img,
.project-three-square-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-three-image figcaption {
  color: var(--text-t1);
  font-size: 24px;
  line-height: 1.35;
}

.project-three-text-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  color: #000000;
}

.project-three-text-split h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 400;
  line-height: 1.15;
}

.project-three-text-split div {
  display: flex;
  flex-direction: column;
  gap: 24px;
  font-size: 24px;
  line-height: 1.35;
}

.project-three-two-column {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: center;
}

.project-three-two-column--top {
  align-items: start;
}

.project-three-text-card {
  display: flex;
  aspect-ratio: 1 / 1;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  gap: 34px;
  overflow: hidden;
  padding: 80px;
  background: transparent;
}

.project-three-text-card--gray {
  background: var(--surface-gray);
}

.project-three-text-card--warm {
  background: #dad9d7;
}

.project-three-text-card div {
  display: flex;
  flex-direction: column;
  gap: 0;
  color: var(--text-t1);
  font-size: 32px;
  line-height: 1.15;
}

.project-three-square-image {
  aspect-ratio: 1 / 1;
  min-width: 0;
}

.project-three-control-image__frame {
  aspect-ratio: 640 / 478;
  border: 0.5px solid rgba(255, 255, 255, 0.08);
}

.project-three-control-image figcaption {
  color: var(--text-t1);
  font-size: 16px;
  line-height: 1.4;
}

.project-three-actions {
  display: flex;
  justify-content: center;
  padding-bottom: 0;
}

.project-three-actions .fx-project-actions__group {
  justify-content: center;
}

@media (max-width: 960px) {
  .project-six-header-info {
    margin-bottom: 72px;
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .project-six-header-info h1 {
    font-size: 56px;
  }

  .project-six-header-info__text,
  .project-six-theory,
  .project-six-header-info__eyebrow {
    font-size: 20px;
  }

  .project-five-header-info {
    margin-bottom: 112px;
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .project-five-header-info h1 {
    font-size: 48px;
  }

  .project-five-header-info__text,
  .project-five-theory,
  .project-five-header-info__eyebrow {
    font-size: 20px;
  }

  .project-two-hero__content {
    top: 72px;
  }

  .project-two-hero__title {
    font-size: 48px;
  }

  .project-two-intro,
  .project-two-text-split,
  .project-two-two-column,
  .project-two-caption-grid,
  .project-two-section-four__brand-row {
    grid-template-columns: 1fr;
  }

  .project-two-section-four__brand-placeholder {
    display: none;
  }

  .project-two-intro {
    gap: 40px;
  }

  .project-two-intro h2 {
    font-size: 48px;
  }

  .project-two-eyebrow,
  .project-two-intro__body,
  .project-two-text-card,
  .project-two-text-split div {
    font-size: 20px;
  }

  .project-two-text-card {
    aspect-ratio: auto;
    min-height: 360px;
    padding: 48px;
  }

  .project-two-text-card div,
  .project-two-text-split h3 {
    font-size: 28px;
  }

  .project-three-hero__content {
    top: 72px;
  }

  .project-three-hero__title,
  .project-three-intro h2 {
    font-size: 48px;
  }

  .project-three-intro,
  .project-three-text-split,
  .project-three-two-column {
    grid-template-columns: 1fr;
  }

  .project-three-intro {
    gap: 40px;
  }

  .project-three-eyebrow,
  .project-three-intro__body,
  .project-three-text-card,
  .project-three-text-split div {
    font-size: 20px;
  }

  .project-three-text-card {
    aspect-ratio: auto;
    min-height: 360px;
    padding: 48px;
  }

  .project-three-text-card div,
  .project-three-text-split h3 {
    font-size: 28px;
  }

  .project-four-camera-cover {
    height: 640px;
    padding: 120px 32px 56px;
  }

  .project-four-camera-cover__content {
    gap: 56px;
  }

  .project-four-camera-cover__icon {
    width: 160px;
    height: 160px;
  }

  .project-four-camera-cover__text h2 {
    font-size: 48px;
  }

  .project-four-camera-gallery__pair {
    grid-template-columns: 1fr;
  }

  .project-four-camera-figure__frame,
  .project-four-camera-keypages__frame {
    height: auto;
  }

  .project-four-camera-figure__frame {
    aspect-ratio: 1 / 1;
  }

  .project-four-camera-keypages__frame {
    aspect-ratio: 5632 / 4052;
  }

  .project-four-camera-night {
    min-height: 0;
  }

  .project-four-camera-night::before {
    inset: 72px 0 72px;
  }

  .project-four-camera-night__inner {
    width: calc(100% - 32px);
    flex-direction: column;
    align-items: center;
    padding-bottom: 96px;
  }

  .project-four-camera-night__phone {
    width: min(72vw, 420px);
    height: auto;
  }

  .project-four-camera-night__copy {
    width: min(100%, 680px);
    font-size: 28px;
  }

  .project-four-camera-features {
    min-height: 0;
    grid-template-columns: 1fr;
    padding: 72px 16px;
  }

  .project-four-camera-features__copy {
    width: min(100%, 680px);
    justify-self: center;
    font-size: 28px;
  }

  .project-four-camera-features__visual {
    width: min(100%, 560px);
    height: auto;
    aspect-ratio: 560 / 1028;
    justify-self: center;
  }

  .project-four-camera-features__hdr {
    left: 9.46%;
    top: 2.82%;
    width: 80.9%;
    height: 91.44%;
  }

  .project-four-camera-features__phone {
    left: -8.93%;
    top: -2.63%;
    width: 117.86%;
    height: 114.1%;
  }

  .project-four-album-cover {
    height: 640px;
  }

  .project-four-album-cover__icon {
    top: 148px;
    width: 160px;
    height: 138px;
  }

  .project-four-album-cover__text {
    top: 392px;
    width: calc(100% - 64px);
  }

  .project-four-album-cover__text h2 {
    font-size: 48px;
  }

  .project-four-album-strip {
    justify-content: flex-start;
    overflow-x: auto;
    padding: 0 16px;
    scroll-snap-type: x proximity;
  }

  .project-four-album-strip__phone {
    width: auto;
    height: min(64vw, 520px);
    scroll-snap-align: center;
  }

  .project-four-section-text,
  .project-four-album-two-column {
    grid-template-columns: 1fr;
  }

  .project-four-section-text {
    gap: 24px;
  }

  .project-four-section-text div {
    font-size: 20px;
  }

  .project-four-video-cover {
    height: 640px;
  }

  .project-four-video-cover__text {
    top: 360px;
    width: calc(100% - 64px);
  }

  .project-four-video-cover__text h2 {
    font-size: 48px;
  }
}

@media (max-width: 560px) {
  .project-six-page {
    padding-bottom: 88px;
  }

  .project-six-hero {
    aspect-ratio: 1 / 1;
  }

  .project-six-header-info {
    margin-bottom: 56px;
  }

  .project-six-header-info h1 {
    font-size: 40px;
  }

  .project-six-header-info__details {
    gap: 32px;
  }

  .project-six-header-info__text,
  .project-six-theory,
  .project-six-header-info__eyebrow {
    font-size: 18px;
  }

  .project-six-theory-images {
    gap: 16px;
  }

  .project-six-theory-images img {
    width: 144px;
    height: 144px;
    flex-basis: 144px;
  }

  .project-six-header-info__meta,
  .project-six-book-pair,
  .project-six-wallpapers {
    grid-template-columns: 1fr;
  }

  .project-six-object {
    min-height: 88vw;
  }

  .project-six-object img {
    width: 100%;
  }

  .project-six-next-project {
    aspect-ratio: 1.35 / 1;
    margin-top: 80px;
  }

  .project-six-next-project::before {
    left: -48%;
    top: 10%;
    width: 196%;
    height: 48%;
  }

  .project-six-next-project__media {
    inset: -8% -85% -22% -22%;
  }

  .project-six-next-project__leg,
  .project-six-next-project__plane {
    display: none;
  }

  .project-four-page {
    padding-bottom: 88px;
  }

  .project-four-hero {
    aspect-ratio: 1 / 1.15;
  }

  .project-four-hero__content {
    top: 56px;
    gap: 16px;
  }

  .project-four-hero__brand {
    gap: 16px;
  }

  .project-four-hero__logo {
    width: 168px;
    height: 24px;
  }

  .project-four-hero__meta {
    font-size: 14px;
  }

  .project-four-hero__title {
    font-size: 40px;
  }

  .project-four-info {
    grid-template-columns: 1fr;
  }

  .project-four-info h2 {
    font-size: 40px;
  }

  .project-four-info__eyebrow,
  .project-four-info__body {
    font-size: 18px;
  }

  .project-four-section-one {
    margin-top: 56px;
  }

  .project-four-camera-cover {
    height: 520px;
    padding: 96px 16px 48px;
  }

  .project-four-camera-cover__content {
    gap: 40px;
  }

  .project-four-camera-cover__icon {
    width: 120px;
    height: 120px;
  }

  .project-four-camera-cover__text p {
    font-size: 24px;
  }

  .project-four-camera-cover__text h2 {
    font-size: 36px;
  }

  .project-four-camera-gallery {
    margin-inline: 8px;
    gap: 32px;
  }

  .project-four-camera-night__copy,
  .project-four-camera-features__copy {
    font-size: 22px;
  }

  .project-four-camera-night__inner {
    width: calc(100% - 16px);
  }

  .project-four-section-two {
    gap: 32px;
  }

  .project-four-album-cover {
    height: 520px;
  }

  .project-four-album-cover__icon {
    top: 120px;
    width: 120px;
    height: 103px;
  }

  .project-four-album-cover__text {
    top: 310px;
    width: calc(100% - 32px);
  }

  .project-four-album-cover__text p {
    font-size: 24px;
  }

  .project-four-album-cover__text h2 {
    font-size: 36px;
  }

  .project-four-album-strip {
    padding-inline: 8px;
  }

  .project-four-album-strip__phone {
    height: 72vw;
    max-height: 420px;
  }

  .project-four-section-text h3 {
    font-size: 28px;
  }

  .project-four-section-text div {
    font-size: 18px;
  }

  .project-four-section-three {
    gap: 32px;
  }

  .project-four-video-cover {
    height: 520px;
  }

  .project-four-video-cover__text {
    top: 300px;
    width: calc(100% - 32px);
  }

  .project-four-video-cover__text p {
    font-size: 24px;
  }

  .project-four-video-cover__text h2 {
    font-size: 36px;
  }

  .project-five-page {
    padding-bottom: 88px;
  }

  .project-five-hero {
    aspect-ratio: 1 / 1;
  }

  .project-five-hero__device {
    left: 4%;
    top: 16%;
    width: 92%;
    height: auto;
    object-fit: contain;
  }

  .project-five-designer-screen {
    top: 20%;
    width: 86%;
  }

  .project-five-designer-screen__title {
    top: 12px;
    font-size: 20px;
  }

  .project-five-designer-screen__dot {
    width: 20px;
    height: 20px;
  }

  .project-five-designer-screen__dot--left {
    left: 12px;
  }

  .project-five-designer-screen__dot--right {
    right: 12px;
  }

  .project-five-designer-screen__caption {
    bottom: 18px;
    width: calc(100% - 72px);
    font-size: 8px;
  }

  .project-five-header-info {
    margin-top: 40px;
    margin-bottom: 72px;
  }

  .project-five-header-info h1 {
    font-size: 40px;
  }

  .project-five-header-info__details {
    gap: 32px;
  }

  .project-five-header-info__text,
  .project-five-theory,
  .project-five-header-info__eyebrow {
    font-size: 18px;
  }

  .project-two-page {
    padding-bottom: 88px;
  }

  .project-two-hero {
    aspect-ratio: 1 / 1.15;
  }

  .project-two-hero__content {
    top: 56px;
    gap: 16px;
  }

  .project-two-hero__logo {
    width: 168px;
    height: 24px;
  }

  .project-two-hero__meta {
    font-size: 14px;
  }

  .project-two-hero__title {
    font-size: 40px;
  }

  .project-two-content {
    gap: 56px;
  }

  .project-two-section-one {
    gap: 32px;
  }

  .project-two-section-two {
    gap: 32px;
  }

  .project-two-section-three {
    gap: 32px;
  }

  .project-two-section-four {
    gap: 32px;
  }

  .project-two-eyebrow,
  .project-two-intro__body,
  .project-two-text-card,
  .project-two-text-split div {
    font-size: 18px;
  }

  .project-two-intro h2 {
    font-size: 40px;
  }

  .project-two-text-card {
    min-height: 320px;
    padding: 32px;
  }

  .project-two-text-card div,
  .project-two-text-split h3 {
    font-size: 24px;
  }

  .project-two-switch {
    align-self: center;
  }

  .project-two-next-project {
    width: 100%;
  }

  .project-three-page {
    padding-bottom: 88px;
  }

  .project-three-hero {
    aspect-ratio: 1 / 1.15;
  }

  .project-three-hero__content {
    top: 56px;
    gap: 16px;
  }

  .project-three-hero__brand {
    gap: 16px;
  }

  .project-three-hero__logo {
    width: 168px;
    height: 24px;
  }

  .project-three-hero__logo-wing,
  .project-three-hero__logo-icon {
    height: 24px;
  }

  .project-three-hero__logo-wing {
    width: 60px;
  }

  .project-three-hero__logo-icon {
    left: 72px;
    width: 24px;
  }

  .project-three-hero__meta {
    font-size: 14px;
  }

  .project-three-hero__title,
  .project-three-intro h2 {
    font-size: 40px;
  }

  .project-three-content {
    gap: 56px;
  }

  .project-three-stack,
  .project-three-section {
    gap: 32px;
  }

  .project-three-eyebrow,
  .project-three-intro__body,
  .project-three-text-card,
  .project-three-text-split div {
    font-size: 18px;
  }

  .project-three-image figcaption {
    font-size: 18px;
  }

  .project-three-text-card {
    min-height: 320px;
    padding: 32px;
  }

  .project-three-text-card div,
  .project-three-text-split h3 {
    font-size: 24px;
  }
}