@font-face {
  font-family: Tfdsans;
  src: url('../fonts/TFDSans-Regular.woff2') format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Messinasansweb;
  src: url('../fonts/MessinaSansWeb-SemiBold.woff2') format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Messinasansweb;
  src: url('../fonts/MessinaSansWeb-Regular.woff2') format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --brand-color--white: white;
  --brand-color--gray-50: #e4e4e4;
  --brand-color--black: black;
  --brand-color--gray-500: #3c3c3c;
  --brand-color--gray-100: #b9b9b9;
  --brand-color--gray-300: #545454;
  --80b: #000c;
  --brand-color--gray-600: #262626;
  --brand-color--gray-200: #aaa;
  --t: transparent;
}

.w-layout-vflex {
  flex-direction: column;
  align-items: flex-start;
  display: flex;
}

.w-layout-hflex {
  flex-direction: row;
  align-items: flex-start;
  display: flex;
}

.w-backgroundvideo-backgroundvideoplaypausebutton:focus-visible {
  outline-offset: 2px;
  border-radius: 50%;
  outline: 2px solid #3b79c3;
}

body {
  color: var(--brand-color--white);
  letter-spacing: -.02em;
  font-family: Messinasansweb, Arial, sans-serif;
  font-size: .9375rem;
  font-weight: 400;
  line-height: 1.6;
}

.loading {
  z-index: 9999;
  background-color: var(--brand-color--gray-50);
  color: var(--brand-color--black);
  text-align: center;
  letter-spacing: -.03rem;
  width: 100%;
  height: 100%;
  font-size: 1.5rem;
  line-height: 1.35;
  display: none;
  position: fixed;
  inset: 0% 0% auto;
}

.loading.dev {
  display: block;
}

.div-block {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
}

.loading-logo {
  aspect-ratio: 1;
  filter: invert();
  transform-origin: 50% 0;
  mix-blend-mode: multiply;
  will-change: transform;
  justify-content: center;
  align-items: center;
  width: 7.875rem;
  display: flex;
  position: relative;
  overflow: hidden;
}

.background-video {
  z-index: 0;
  width: 190%;
  max-width: none;
  height: 190%;
}

.background-video.is-ab {
  position: absolute;
}

.loading-welcome-text {
  transform-origin: 50% 0;
  will-change: transform;
  margin-top: 1.75rem;
  margin-bottom: 1.5rem;
}

.btn-start {
  border-top-style: solid;
  border-top-width: 1px;
  border-top-color: var(--brand-color--gray-500);
  border-right-style: solid;
  border-right-width: 1px;
  border-right-color: var(--brand-color--gray-500);
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: var(--brand-color--gray-500);
  border-left-style: solid;
  border-left-width: 1px;
  border-left-color: var(--brand-color--gray-500);
  letter-spacing: -.0125rem;
  will-change: padding, transform;
  border-radius: .75rem;
  order: 1;
  padding: .5rem 1rem;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  position: relative;
}

.btn-backdrop {
  background-color: var(--brand-color--gray-100);
  opacity: 0;
  border-radius: .625rem;
  position: absolute;
  inset: .19rem;
}

.btn-text {
  position: relative;
}

.intro {
  background-color: var(--brand-color--gray-50);
  transform-origin: 50% 0;
  width: 100%;
  height: 100%;
  font-size: 1vw;
  position: relative;
  overflow: hidden;
}

.intro.dev {
  background-color: var(--brand-color--black);
}

.div-block-2 {
  color: var(--brand-color--black);
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  font-family: Tfdsans, Impact, sans-serif;
  display: flex;
  position: relative;
}

.intro-title {
  justify-content: center;
  align-items: center;
  font-size: 6em;
  line-height: 1;
  position: absolute;
}

.intro-title.dev {
  color: var(--brand-color--white);
  font-size: 13em;
}

.intro-bg {
  background-color: var(--brand-color--black);
  width: 100%;
  height: 100%;
  position: absolute;
}

.navbar {
  z-index: 2000;
  justify-content: space-between;
  align-items: flex-start;
  padding-top: 35px;
  padding-left: 40px;
  padding-right: 40px;
  position: fixed;
  inset: 0% 0% auto;
}

.svg-fig {
  width: 100%;
  height: 100%;
}

.svg-fig.is-t {
  aspect-ratio: 1;
}

.tfd-logo {
  aspect-ratio: 1;
  width: 3.75rem;
}

.logo {
  grid-column-gap: 1.25rem;
  grid-row-gap: 1.25rem;
  text-transform: capitalize;
  justify-content: flex-start;
  align-items: center;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  display: flex;
}

.switcher {
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

.switcher-text {
  opacity: 0;
  pointer-events: none;
  text-align: right;
  font-size: .75rem;
  line-height: 1;
  transition: opacity .2s;
  position: absolute;
  left: -.81rem;
  transform: translate(-100%);
}

.switcher-dot {
  aspect-ratio: 1;
  background-color: var(--brand-color--white);
  border-radius: 50%;
  width: 1.1875rem;
  transition: left .2s, background-color .2s, transform .2s;
  position: absolute;
  top: 4px;
  left: 4px;
}

.switcher-body {
  border: 1px solid var(--brand-color--white);
  background-color: var(--brand-color--black);
  border-radius: 1.25rem;
  width: 2.75rem;
  height: 1.6875rem;
  transition: background-color .2s;
}

.home-body {
  background-color: var(--brand-color--gray-50);
  height: 100%;
  overflow: hidden;
}

.flex-block {
  justify-content: center;
  align-items: center;
}

.div-block-3 {
  width: .15em;
}

.logo-flip {
  aspect-ratio: 1;
  justify-content: center;
  align-items: center;
  width: 20.1em;
  margin-top: -2.38em;
  font-size: 1em;
  line-height: 1;
  position: absolute;
}

.logo-circle {
  border: 1.18em solid var(--brand-color--white);
  opacity: 0;
  border-radius: 50%;
  position: absolute;
  inset: 0%;
}

.logo-circle.dev {
  opacity: 100;
}

.logo-flip-wrapper {
  color: var(--brand-color--white);
  justify-content: center;
  align-items: center;
  margin-top: .18em;
  font-size: 13em;
}

.menu-open-btn {
  z-index: 3010;
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  justify-content: center;
  align-items: center;
  width: 2.5625rem;
  height: 1.3125rem;
  margin-left: auto;
  margin-right: auto;
  transition-property: opacity;
  transition-duration: .2s;
  transition-timing-function: ease;
  display: flex;
  position: fixed;
  bottom: 1.75rem;
  left: 0;
  right: 0;
}

.menu-open-btn:active {
  opacity: .6;
}

.menu-dot {
  border: 1px solid var(--brand-color--gray-300);
  background-color: var(--brand-color--white);
  border-radius: 50%;
  width: 6px;
  height: 6px;
  transition: transform .2s;
}

.menu-tooltip {
  border-top-style: solid;
  border-top-width: 1px;
  border-top-color: var(--brand-color--gray-500);
  border-right-style: solid;
  border-right-width: 1px;
  border-right-color: var(--brand-color--gray-500);
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: var(--brand-color--gray-500);
  border-left-style: solid;
  border-left-width: 1px;
  border-left-color: var(--brand-color--gray-500);
  background-color: var(--80b);
  opacity: 0;
  pointer-events: none;
  color: var(--brand-color--gray-100);
  text-transform: capitalize;
  border-radius: 2em;
  padding: .25rem .38rem;
  font-size: .75rem;
  font-weight: 400;
  line-height: 100%;
  transition-property: opacity;
  transition-duration: .2s;
  transition-timing-function: ease;
  position: absolute;
  left: 2.87rem;
}

.menu-tooltip.is-close {
  left: 29px;
}

.menu {
  z-index: 3000;
  opacity: 0;
  pointer-events: none;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0% 0% auto;
  overflow: hidden;
}

.menu.dev {
  opacity: 100;
}

.menu-title-wrapper {
  letter-spacing: -.125rem;
  font-size: 3.875rem;
  font-weight: 600;
  line-height: 120%;
  position: absolute;
  top: 2.5rem;
  left: 2.5rem;
  overflow: hidden;
}

.swiper.menu-swiper {
  width: 100%;
  height: 120%;
  top: -10%;
}

.swiper-slide.is-menu-item {
  width: 67vh;
}

.link-block-2 {
  aspect-ratio: 5 / 4;
  border: 1px solid var(--brand-color--gray-100);
  background-color: var(--brand-color--white);
  border-radius: 1.5625rem;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.text-block-2 {
  z-index: 1;
  letter-spacing: -.045rem;
  transform-style: preserve-3d;
  background-image: linear-gradient(#000, #0000);
  width: 100%;
  padding: 40px;
  font-size: 2.25rem;
  line-height: 100%;
  position: absolute;
  inset: 0% 0% auto;
  transform: translate3d(0, 0, 0);
}

.menu-video {
  z-index: 0;
  pointer-events: none;
  width: 100%;
  height: 100%;
}

.menu-video.m {
  display: none;
}

.flex-block-2 {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.menu-link {
  color: var(--brand-color--gray-100);
  letter-spacing: -.0175rem;
  font-size: .875rem;
  line-height: 100%;
  text-decoration: none;
  transition-property: opacity;
  transition-duration: .2s;
  transition-timing-function: ease;
}

.menu-link:hover {
  opacity: .7;
}

.menu-links {
  z-index: 2;
  justify-content: space-between;
  align-items: flex-end;
  padding: 2.5rem;
  display: flex;
  position: absolute;
  inset: auto 0% 0%;
}

.flex-block-3 {
  grid-column-gap: .75rem;
  grid-row-gap: .75rem;
  align-items: stretch;
}

.div-block-5 {
  background-color: #b9b9b9;
  width: 1px;
}

.menu-close-btn {
  z-index: 3010;
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  margin-left: auto;
  margin-right: auto;
  transition: opacity .2s;
  display: flex;
  position: fixed;
  bottom: 27px;
  left: 0;
  right: 0;
}

.menu-close-btn:active {
  opacity: .6;
}

.menu-bar {
  background-color: var(--brand-color--white);
  width: 17px;
  height: 1px;
  transition: width .2s;
  position: absolute;
}

.menu-bar.r {
  transform: rotate(45deg);
}

.menu-bar.l {
  transform: rotate(-45deg);
}

.logo-wrapper {
  z-index: 2000;
  mix-blend-mode: difference;
  padding-top: 35px;
  padding-left: 40px;
  position: fixed;
  inset: 0% auto auto 0%;
}

.switcher-wrapper {
  z-index: 2000;
  padding-top: 35px;
  padding-right: 40px;
  position: fixed;
  inset: 0% 0% auto auto;
}

.image {
  aspect-ratio: 266 / 669;
  height: 1em;
}

.code-embed {
  aspect-ratio: 386 / 970;
  height: 1em;
}

.letter-t {
  aspect-ratio: 386 / 970;
  align-self: flex-start;
  height: .69em;
  margin-right: .02em;
  position: relative;
}

.alt-text {
  font-feature-settings: "aalt" 1;
}

.page-body {
  background-color: var(--brand-color--black);
}

.page-section {
  background-color: var(--brand-color--black);
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

.page-section.t-bg {
  will-change: transform;
  background-color: #0000;
}

.banner-video {
  z-index: 0;
  width: 100%;
  height: 100%;
  position: relative;
}

.banner-video.m {
  display: none;
}

.page-heading {
  background-image: linear-gradient(#0000, #000);
  margin-top: 0;
  margin-bottom: 0;
  padding-bottom: 40px;
  padding-left: 40px;
  padding-right: 40px;
  font-size: 120px;
  font-weight: 600;
  line-height: 1.6;
  position: absolute;
  inset: auto 0% 0%;
}

.section-content {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0%;
}

.section-content.symbol {
  opacity: 0;
  transform: scale(.76);
}

.section-content.mockups {
  opacity: 0;
  pointer-events: none;
}

.section-content.f-1 {
  will-change: filter;
}

.section-content.f-1.overflow-hidden {
  overflow: hidden;
}

.section-content.f-4 {
  background-color: var(--brand-color--black);
}

.logo-word {
  font-family: Tfdsans, Impact, sans-serif;
  font-size: 17vw;
  line-height: 1.2;
}

.logo-word.s {
  font-size: 15.97vw;
}

.logo-word.s.d {
  opacity: 0;
  position: absolute;
  left: 60vw;
  transform: translate(20%);
}

.logo-word.s.d.dev {
  opacity: 100;
  transform: translate(0%);
}

.logo-word.dev {
  font-size: 15.97vw;
  transform: translate(-16vw);
}

.logo-letter {
  font-size: 1em;
}

.image-2 {
  width: 32.6vw;
}

.letter-wrapper {
  z-index: 2;
  position: relative;
}

.logo-tooltip {
  opacity: 0;
  pointer-events: none;
  background-color: #ffffff29;
  border: 1px solid #fff3;
  border-radius: 16px;
  width: 470px;
  padding: 16px 24px;
  font-family: Messinasansweb, Arial, sans-serif;
  line-height: 1.4;
  position: relative;
  transform: translate(0, 60px);
}

.logo-tooltip.dev {
  opacity: 100;
  transform: none;
}

.logo-tooltip.step2 {
  opacity: 100;
  transform: translate(.96em, -.34em);
}

.image-3 {
  position: absolute;
  top: -12px;
  left: -12px;
}

.text-block-4 {
  font-size: 1.25rem;
}

.div-block-7 {
  -webkit-text-fill-color: inherit;
  background-image: linear-gradient(90deg, #888, #8880);
  background-clip: border-box;
  border-style: solid;
  border-width: 1px;
  position: absolute;
  inset: 0%;
}

.tooltip-position {
  position: absolute;
  top: .93em;
  left: .35em;
}

.tooltip-position._2 {
  top: .6em;
  left: .3em;
}

.page-banner {
  background-color: var(--brand-color--black);
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0%;
}

.flip-card {
  perspective: 100vw;
  position: absolute;
  transform: none;
}

.flip-card.a {
  aspect-ratio: 438 / 340;
  width: auto;
  height: 33vh;
  transform: translate(-100%, -10%);
}

.flip-card.b {
  aspect-ratio: 552 / 420;
  width: auto;
  height: 40vh;
  transform: translate(0)translate(40%, -50%);
}

.flip-card.c {
  aspect-ratio: 553 / 320;
  width: auto;
  height: 31vh;
  transform: translate(80%, 70%);
}

.card-img {
  backface-visibility: hidden;
  object-fit: cover;
  border-radius: 12px;
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  inset: 0%;
}

.card-backside {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  background-color: var(--brand-color--black);
  backface-visibility: hidden;
  transform-style: preserve-3d;
  border-radius: 12px;
  justify-content: space-between;
  align-items: stretch;
  width: 100%;
  height: 100%;
  padding: 40px;
  position: absolute;
  inset: 0%;
  overflow: hidden;
  transform: rotateX(0)rotateY(180deg)rotateZ(0);
}

.flex-block-4 {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex-flow: wrap;
  justify-content: space-between;
  align-items: flex-start;
  font-size: 1rem;
  line-height: 1.4;
}

.image-4 {
  object-fit: contain;
  width: 100%;
  max-height: 100%;
}

.flip-card-inner {
  transform-style: preserve-3d;
  border: 1px solid #545454;
  border-radius: 12px;
  width: 100%;
  height: 100%;
  transition-property: transform;
  transition-duration: .8s;
  transition-timing-function: ease;
  position: relative;
}

.progress-bar {
  background-color: #adadad;
  width: 0%;
  height: 4px;
  position: absolute;
  inset: 0% 0% auto;
}

.scroll-detect {
  width: 100%;
  height: 100%;
  position: relative;
}

.section-nav {
  background-color: var(--brand-color--gray-600);
  opacity: 0;
  border-radius: 10px;
  min-width: 12.5rem;
  padding: 16px;
  position: absolute;
  top: 107px;
  left: 40px;
  transform: translate(0, 40px);
}

.section-nav-item {
  color: var(--brand-color--gray-300);
  white-space: nowrap;
  justify-content: flex-start;
  align-items: center;
  text-decoration: none;
  transition: color .2s;
  display: flex;
}

.section-nav-item:hover {
  color: var(--brand-color--gray-200);
}

.section-nav-item.active {
  color: var(--brand-color--white);
}

.div-block-8 {
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  display: flex;
}

.nav-dot {
  aspect-ratio: 1;
  background-color: currentColor;
  border-radius: 50%;
  width: 4px;
  transition-property: width;
  transition-duration: .2s;
  transition-timing-function: ease;
}

.text-block-5 {
  opacity: 0;
  font-family: Tfdsans, Impact, sans-serif;
  font-size: 27.7vw;
  line-height: 1;
  position: absolute;
}

.text-block-5.outline {
  opacity: 0;
  color: var(--brand-color--black);
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: var(--brand-color--white);
}

.mask {
  -webkit-clip-path: circle(30px);
  clip-path: circle(30px);
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  inset: 0%;
}

.mask-circle {
  pointer-events: none;
  border: 1px solid #fff;
  border-radius: 50%;
  width: 0;
  height: 0;
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
}

.flex-block-5 {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  padding: 40px;
  position: absolute;
}

.div-block-9 {
  width: 50%;
  font-family: Tfdsans, Impact, sans-serif;
  font-size: 38.1944vw;
  line-height: 1;
}

.div-block-9.all-chars {
  flex-flow: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  padding-right: 40px;
  font-size: 8.33333vw;
  line-height: 1.2;
  display: flex;
}

.char {
  text-decoration: none;
  transition: color .2s, transform .2s;
}

.char:hover {
  transform: scale(.75);
}

.char.active {
  color: var(--brand-color--gray-300);
}

.div-block-10 {
  width: 100%;
}

.single-char {
  position: absolute;
}

.single-char-wrapper {
  aspect-ratio: 1;
  justify-content: center;
  align-items: center;
  width: 100%;
  display: flex;
  position: relative;
}

.hello {
  margin-bottom: -.1em;
  font-family: Tfdsans, Impact, sans-serif;
  font-size: 35.4vw;
  line-height: 1;
  position: absolute;
}

.div-block-11 {
  position: absolute;
  inset: 0%;
}

.fiu-wrapper {
  grid-column-gap: 5vw;
  grid-row-gap: 5vw;
  justify-content: flex-start;
  align-items: center;
  height: 100%;
  padding: 40px;
}

.fiu-card-image {
  aspect-ratio: 5 / 4;
  border-radius: 12px;
  flex: none;
  width: calc(33.3333vw - 42.6667px);
  overflow: hidden;
}

.fiu-card-image.v {
  aspect-ratio: 3 / 4;
}

.fiu-card-image.fill-height {
  flex: 0 auto;
  max-height: 100%;
}

.image-5 {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.flex-block-7 {
  grid-column-gap: 5vw;
  grid-row-gap: 5vw;
  flex: none;
  justify-content: center;
  align-items: center;
  max-height: 90%;
}

.tester {
  background-color: var(--brand-color--black);
  text-align: center;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 40px;
  font-family: Tfdsans, Impact, sans-serif;
  font-size: 10rem;
  line-height: 1;
  position: absolute;
  inset: 0%;
  overflow: hidden;
}

.text-preview {
  background-color: var(--t);
  color: var(--brand-color--white);
  text-align: center;
  outline: none;
  width: 100%;
  padding: 0;
}

.flex-block-9 {
  z-index: 10;
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  width: calc(100% - 80px);
  position: absolute;
  bottom: 40px;
  left: 40px;
}

.btn {
  border-top-style: solid;
  border-top-width: 1px;
  border-top-color: var(--brand-color--gray-500);
  border-right-style: solid;
  border-right-width: 1px;
  border-right-color: var(--brand-color--gray-500);
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: var(--brand-color--gray-500);
  border-left-style: solid;
  border-left-width: 1px;
  border-left-color: var(--brand-color--gray-500);
  background-color: var(--80b);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  pointer-events: auto;
  color: var(--brand-color--white);
  border-radius: 12px;
  padding: 2px;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
}

.btn-inner {
  border-radius: 10px;
  padding: 15px 16px 14px;
  transition-property: background-color;
  transition-duration: .2s;
  transition-timing-function: ease;
}

.btn-inner.is-pannel {
  padding-left: 44px;
  position: relative;
}

.image-6 {
  width: 16px;
  position: absolute;
  top: 8px;
  left: 16px;
}

.controls {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  border-top-style: solid;
  border-top-width: 1px;
  border-top-color: var(--brand-color--gray-500);
  border-right-style: solid;
  border-right-width: 1px;
  border-right-color: var(--brand-color--gray-500);
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: var(--brand-color--gray-500);
  border-left-style: solid;
  border-left-width: 1px;
  border-left-color: var(--brand-color--gray-500);
  background-color: var(--brand-color--black);
  border-radius: 12px;
  align-items: stretch;
  width: 280px;
  padding: 16px;
}

.style-panel.w--open {
  background-color: var(--t);
  bottom: 64px;
  left: 0;
}

.flex-block-10 {
  justify-content: space-between;
  align-items: center;
  padding-right: 8px;
  font-size: 1rem;
  line-height: 1.2;
}

.style-reset {
  font-size: .75rem;
}

.control {
  border: 1px solid var(--brand-color--gray-500);
  border-radius: 12px;
  justify-content: space-between;
  align-items: center;
  height: 52px;
  padding-left: 16px;
  padding-right: 4px;
  font-size: 1rem;
  line-height: 1.2;
  position: relative;
  overflow: hidden;
}

.slider-value {
  pointer-events: none;
  position: relative;
}

.slider-bar {
  background-color: var(--brand-color--gray-600);
  width: 0;
  height: 100%;
}

.slider-container {
  cursor: ew-resize;
  position: absolute;
  inset: 0%;
}

.slider-label {
  pointer-events: none;
  position: relative;
}

.image-7 {
  aspect-ratio: 955 / 293;
  height: 293px;
  position: absolute;
}

.section-nav-btn, .fig-f1-m {
  display: none;
}

.detail-section {
  z-index: 1000;
  will-change: transform;
  width: 372px;
  height: 100vh;
  transition-property: transform;
  transition-duration: .8s;
  transition-timing-function: ease;
  position: fixed;
  inset: 0% 0% auto auto;
  overflow: hidden;
  transform: translate(100%);
}

.detail-section.active {
  transform: translate(0%);
}

.detail-body {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  background-color: #222;
  border-radius: 24px;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  height: calc(100vh - 40px);
  margin-bottom: 8px;
  padding: 40px;
}

.text-block-8 {
  letter-spacing: .02em;
  line-height: 1.86667;
}

.text-block-9 {
  letter-spacing: 0;
  font-size: 1.25rem;
  line-height: 1.25;
}

.d-detail-wrapper {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  height: 100%;
  overflow: auto;
}

.m-detail-wrapper {
  display: none;
}

.detail-block {
  width: 100%;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-right: 20px;
  position: relative;
}

.main-section {
  transform-origin: 0%;
  will-change: transform;
  width: 100%;
  height: 100%;
  transition-property: transform;
  transition-duration: .5s;
  transition-timing-function: ease;
}

.detail-touch-bar {
  display: none;
}

.transition {
  pointer-events: none;
  width: 100%;
  height: 100%;
  position: fixed;
  inset: 0% 0% auto;
}

.color-blocks {
  width: 100%;
  height: 100%;
}

.color-blocks.step2 {
  width: 100%;
  max-width: none;
  height: 100%;
}

.color-blocks.step3 {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  width: 100%;
  max-width: none;
  height: 100%;
}

.color-blocks.step4 {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  width: 100%;
  height: 100%;
}

.color-block {
  border-radius: 16px;
  width: 100%;
  height: 10%;
  position: absolute;
  overflow: hidden;
}

.color-block.w {
  width: 44%;
  top: 40%;
  left: 28%;
}

.color-block.b {
  border-top-style: solid;
  border-top-width: 1px;
  border-top-color: var(--brand-color--gray-300);
  border-right-style: solid;
  border-right-width: 1px;
  border-right-color: var(--brand-color--gray-300);
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: var(--brand-color--gray-300);
  border-left-style: solid;
  border-left-width: 1px;
  border-left-color: var(--brand-color--gray-300);
  width: calc(31% - 20px);
  top: calc(50% + 20px);
  left: 28%;
}

.color-block.g {
  width: 13%;
  top: calc(50% + 20px);
  right: 28%;
}

.color-bottom-blocks {
  width: 100%;
}

.color-block-info {
  opacity: 0;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  pointer-events: none;
  color: var(--brand-color--gray-100);
  letter-spacing: 0;
  background-color: #2e2e2ecc;
  border-radius: 16px;
  padding: 16px 24px;
  font-size: 1.125rem;
  line-height: 1.4;
  transition-property: opacity;
  transition-duration: .2s;
  transition-timing-function: ease;
  position: absolute;
  inset: 0% auto auto 0%;
}

.color-block-info.show {
  opacity: 100;
}

.brand-color {
  align-items: stretch;
  width: 100%;
  height: 100%;
  position: relative;
}

.flex-block-14 {
  flex: 1;
  transition: height .2s;
}

.bc-gray {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 42%;
  transition: height .8s;
  display: flex;
  position: relative;
  overflow: hidden;
}

.bc-gray:hover {
  height: 58%;
}

.bc-white {
  justify-content: center;
  align-items: center;
  width: 50%;
  height: 100%;
  transition: width .8s;
  display: flex;
  position: relative;
  overflow: hidden;
}

.bc-white:hover {
  width: 72%;
}

.bc-black {
  justify-content: center;
  align-items: center;
  width: 50%;
  height: 100%;
  transition: width .8s;
  display: flex;
  position: relative;
  overflow: hidden;
}

.bc-black:hover {
  width: 72%;
}

.color-item {
  width: 100%;
  height: 100%;
  transition: border-radius .2s;
  overflow: hidden;
}

.color-item.is-white {
  background-color: var(--brand-color--white);
}

.color-item.is-black {
  background-color: var(--brand-color--black);
}

.color-item.is-gray {
  background-color: var(--brand-color--gray-300);
}

.text-block-10 {
  position: absolute;
}

.flex-block-15 {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  justify-content: center;
  align-items: center;
  position: absolute;
}

.flex-block-15.in-white {
  color: var(--brand-color--black);
}

.bc-title {
  opacity: 0;
  white-space: nowrap;
  will-change: transform;
  font-family: Tfdsans, Impact, sans-serif;
  font-size: 8vw;
  line-height: 1;
  transition-property: transform, opacity;
  transition-duration: .2s, .2s;
  transition-timing-function: ease, ease;
  transform: scale(.8);
}

.bc-color-info {
  opacity: 0;
  letter-spacing: 0;
  font-size: 1rem;
  line-height: 1.24;
  transition: opacity .8s;
  display: none;
}

.bc-bg {
  z-index: 0;
  opacity: 0;
  object-fit: cover;
  will-change: transform;
  width: 100%;
  height: 100%;
  transition-property: opacity, transform;
  transition-duration: .2s, .5s;
  transition-timing-function: ease, ease;
  position: absolute;
  inset: 0%;
  transform: scale(1.1);
}

.bc-bg.m {
  display: none;
}

.section-resource-2 {
  background-color: var(--brand-color--black);
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  height: 100svh;
  padding: 3vw;
  transition: background-color .2s;
  display: flex;
  position: relative;
  overflow: hidden;
}

.resource-name__svg {
  width: 100%;
  transform: translateY(-2%);
}

.canvas-matter {
  pointer-events: none;
  will-change: filter;
  width: 100%;
  height: 100%;
  margin-bottom: 0;
  transition-property: filter;
  transition-duration: .2s;
  transition-timing-function: ease;
  position: absolute;
  bottom: 0%;
  left: 0%;
  overflow: hidden;
}

.canvas-matter__before {
  padding-top: 100%;
}

.canvas-matter__target {
  transform: scale3d(1none, 1none, 1none);
  transform-style: preserve-3d;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

.flex-block-16 {
  grid-column-gap: 3px;
  grid-row-gap: 3px;
  border-top-style: solid;
  border-top-width: 1px;
  border-top-color: var(--brand-color--gray-500);
  border-right-style: solid;
  border-right-width: 1px;
  border-right-color: var(--brand-color--gray-500);
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: var(--brand-color--gray-500);
  border-left-style: solid;
  border-left-width: 1px;
  border-left-color: var(--brand-color--gray-500);
  background-color: var(--80b);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-radius: 12px;
  justify-content: flex-start;
  align-items: center;
  padding: 3px 3px 3px 16px;
  position: absolute;
  bottom: 40px;
  left: 40px;
}

.link-block-3 {
  aspect-ratio: 1;
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  width: 46px;
  transition: background-color .2s;
  display: flex;
}

.link-block-3:hover, .link-block-3.active {
  background-color: var(--brand-color--gray-500);
}

.div-block-12 {
  aspect-ratio: 1;
  border-top-style: solid;
  border-top-width: 1px;
  border-top-color: var(--brand-color--white);
  border-right-style: solid;
  border-right-width: 1px;
  border-right-color: var(--brand-color--white);
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: var(--brand-color--white);
  border-left-style: solid;
  border-left-width: 1px;
  border-left-color: var(--brand-color--white);
  border-radius: 50%;
  width: 20px;
  padding: 2px;
  position: absolute;
}

.div-block-13 {
  aspect-ratio: 1;
  border-radius: 50%;
  width: 100%;
}

.div-block-13.is-black {
  background-color: var(--brand-color--black);
}

.div-block-13.is-gray {
  background-color: var(--brand-color--gray-300);
}

.div-block-13.is-white {
  background-color: var(--brand-color--white);
}

.text-block-11 {
  margin-right: 13px;
}

.flex-block-17 {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  color: var(--brand-color--white);
  letter-spacing: 0;
  justify-content: space-between;
  align-items: flex-end;
  width: calc(100% - 80px);
  font-size: 1rem;
  line-height: 1.2;
  position: absolute;
  inset: auto auto 40px 40px;
}

.flat-toggle {
  border-top-style: solid;
  border-top-width: 1px;
  border-top-color: var(--brand-color--gray-500);
  border-right-style: solid;
  border-right-width: 1px;
  border-right-color: var(--brand-color--gray-500);
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: var(--brand-color--gray-500);
  border-left-style: solid;
  border-left-width: 1px;
  border-left-color: var(--brand-color--gray-500);
  background-color: var(--brand-color--black);
  border-radius: 12px;
  width: 111px;
  height: 52px;
  padding: 2px;
  text-decoration: none;
  overflow: hidden;
}

.flat-toggle-wrapper {
  border-radius: 10px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 100%;
  transition: background-color .2s;
  display: flex;
  overflow: hidden;
}

.flex-block-18 {
  border-top-style: solid;
  border-top-width: 1px;
  border-top-color: var(--brand-color--gray-500);
  border-right-style: solid;
  border-right-width: 1px;
  border-right-color: var(--brand-color--gray-500);
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: var(--brand-color--gray-500);
  border-left-style: solid;
  border-left-width: 1px;
  border-left-color: var(--brand-color--gray-500);
  background-color: var(--brand-color--black);
  border-radius: 12px;
  align-items: stretch;
  height: 52px;
  padding: 2px;
}

.dropdown-toggle {
  color: var(--brand-color--white);
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 0 16px;
  transition: background-color .2s;
  display: flex;
}

.dropdown-toggle:hover {
  background-color: var(--brand-color--gray-500);
}

.dropdown-toggle.is-color {
  width: 48px;
  padding: 0;
}

.div-block-15 {
  background-color: var(--brand-color--gray-500);
  align-self: center;
  width: 1px;
  height: 20px;
}

.flex-block-19 {
  border-top-style: solid;
  border-top-width: 1px;
  border-top-color: var(--brand-color--gray-500);
  border-right-style: solid;
  border-right-width: 1px;
  border-right-color: var(--brand-color--gray-500);
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: var(--brand-color--gray-500);
  border-left-style: solid;
  border-left-width: 1px;
  border-left-color: var(--brand-color--gray-500);
  border-radius: 12px;
  align-items: stretch;
  padding: 8px 2px;
}

.dropdown-list {
  position: absolute;
  bottom: 55px;
}

.dropdown-list.w--open {
  background-color: var(--brand-color--black);
  border-radius: 12px;
  left: -2px;
}

.dropdown-list.is-color.w--open {
  border: 1px solid var(--brand-color--gray-500);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  background-color: #000c;
  border-radius: 12px;
  left: -101px;
}

.ratio-btn {
  white-space: nowrap;
  border-radius: 10px;
  padding: 2px 16px;
  line-height: 1.4;
  text-decoration: none;
  transition-property: color, background-color;
  transition-duration: .2s, .2s;
  transition-timing-function: ease, ease;
}

.ratio-btn:hover {
  background-color: var(--brand-color--gray-500);
}

.ratio-btn.active {
  color: var(--brand-color--gray-200);
}

.div-block-16 {
  aspect-ratio: 1;
  border-top-style: solid;
  border-top-width: 1px;
  border-top-color: var(--brand-color--white);
  border-right-style: solid;
  border-right-width: 1px;
  border-right-color: var(--brand-color--white);
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: var(--brand-color--white);
  border-left-style: solid;
  border-left-width: 1px;
  border-left-color: var(--brand-color--white);
  border-radius: 50%;
  width: 20px;
  padding: 2px;
  position: relative;
  overflow: hidden;
}

.div-block-17 {
  border-radius: 50%;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.div-block-18 {
  aspect-ratio: 1;
  opacity: 0;
  border-radius: 50%;
  width: 14px;
  transition: opacity .2s;
  position: absolute;
  inset: 0%;
  overflow: hidden;
}

.div-block-18._01 {
  background-image: url('../images/Frame-236.webp');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
}

.div-block-18._02 {
  background-image: url('../images/Frame-236-1.webp');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
}

.div-block-18._03 {
  background-image: url('../images/Frame-236-2.webp');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
}

.div-block-18._04 {
  background-image: url('../images/Frame-236-3.webp');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
}

.div-block-18._05 {
  background-image: url('../images/Frame-236-4.webp');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
}

.div-block-18._06 {
  background-image: url('../images/Frame-236-5.webp');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
}

.div-block-18._07 {
  background-image: url('../images/Frame-236-6.webp');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
}

.div-block-18._08 {
  background-image: url('../images/Frame-236-7.webp');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
}

.div-block-18.show {
  opacity: 100;
}

.flex-block-20 {
  grid-column-gap: 8px;
  grid-row-gap: 10px;
  flex-flow: wrap;
  align-items: stretch;
  width: 273px;
  max-height: 320px;
  padding: 14px;
  line-height: 1.4;
  overflow: auto;
}

.flex-block-21 {
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.link-block-6 {
  font-size: .75rem;
}

.image-8 {
  aspect-ratio: 115 / 80;
  border: 1px solid var(--brand-color--gray-500);
  object-fit: cover;
  border-radius: 8px;
  width: 100%;
}

.text-block-12 {
  margin-top: 4px;
  padding-left: 6px;
  padding-right: 6px;
  font-size: .75rem;
  line-height: 1.6;
}

.color-btn-options {
  border-radius: 10px;
  width: calc(50% - 4px);
  padding: 2px 2px 4px;
  text-decoration: none;
  transition-property: background-color;
  transition-duration: .2s;
  transition-timing-function: ease;
}

.color-btn-options:hover, .color-btn-options.active {
  background-color: var(--brand-color--gray-500);
}

.scroll-detect-area {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
}

.motion-frame {
  width: 100%;
  height: 100%;
  transition: all .2s;
  position: relative;
  overflow: hidden;
}

.motion-frame.a {
  aspect-ratio: 16 / 9;
  border: 1px solid var(--brand-color--gray-500);
  border-radius: 24px;
  width: auto;
  height: 100%;
}

.motion-frame.b {
  aspect-ratio: 1;
  border: 1px solid var(--brand-color--gray-500);
  border-radius: 24px;
  width: auto;
}

.motion-frame.c {
  aspect-ratio: 3 / 4;
  border: 1px solid var(--brand-color--gray-500);
  border-radius: 24px;
  width: auto;
}

.motion-bg {
  position: absolute;
  inset: 0%;
}

.image-9 {
  opacity: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: opacity .2s;
  position: absolute;
  inset: 0%;
}

.image-9.show {
  opacity: 100;
}

.motion-video {
  opacity: 0;
  width: 100%;
  height: 100%;
  transition: opacity .2s;
  position: absolute;
  inset: 0%;
}

.motion-video.show {
  opacity: 100;
}

.hide-btn-text {
  display: none;
}

.flat-status {
  will-change: transform;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  transition-property: transform;
  transition-duration: .5s;
  transition-timing-function: ease;
  display: flex;
}

.text-block-13 {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  font-family: Tfdsans, Impact, sans-serif;
  font-size: 1em;
  display: flex;
}

.video-demo {
  opacity: 0;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
}

.video-demo.is-black {
  color: var(--brand-color--black);
  transition: opacity .2s;
}

.video-demo.show {
  opacity: 100;
}

.link-block-7 {
  aspect-ratio: 1;
  border: 1px solid var(--brand-color--gray-500);
  background-color: var(--80b);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  width: 60px;
  transition: width .2s;
  display: flex;
  position: relative;
}

.link-block-7:hover {
  width: 68px;
}

.image-10 {
  width: 30%;
  position: absolute;
  transform: translate(10%);
}

.video-hint {
  border-top-style: solid;
  border-top-width: 1px;
  border-top-color: var(--brand-color--gray-500);
  border-right-style: solid;
  border-right-width: 1px;
  border-right-color: var(--brand-color--gray-500);
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: var(--brand-color--gray-500);
  border-left-style: solid;
  border-left-width: 1px;
  border-left-color: var(--brand-color--gray-500);
  background-color: var(--80b);
  opacity: 0;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  pointer-events: none;
  white-space: nowrap;
  border-radius: 12px;
  padding: 8px 16px;
  font-size: 1rem;
  transition-property: opacity;
  transition-duration: .2s;
  transition-timing-function: ease;
  position: absolute;
  inset: 0% auto auto 0%;
}

.vimeo-lightbox__before {
  padding-top: 62.5%;
}

.vimeo-lightbox__interface {
  pointer-events: none;
  flex-flow: column;
  justify-content: flex-end;
  align-items: stretch;
  width: 100%;
  height: 100%;
  padding: min(2em, 4vw);
  transition-property: opacity;
  transition-duration: .3s;
  transition-timing-function: linear;
  display: flex;
  position: absolute;
}

.vimeo-lightbox__volume-mute-svg {
  width: 100%;
  position: absolute;
}

.vimeo-lightbox__interface-bottom {
  grid-column-gap: 1em;
  grid-row-gap: 1em;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.vimeo-lightbox__loading {
  pointer-events: none;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  transition: opacity .3s linear;
  display: flex;
  position: absolute;
}

.vimeo-lightbox__volume-up-svg {
  width: 100%;
  position: absolute;
}

.vimeo-lightbox__calc-wrap {
  width: 100%;
  position: relative;
}

.vimeo-lightbox__btn-pause-svg {
  width: 50%;
}

.vimeo-lightbox__duration {
  flex-shrink: 0;
  width: 2.25em;
}

.vimeo-lightbox {
  z-index: 3020;
  pointer-events: none;
  justify-content: center;
  align-items: center;
  padding: 5vw;
  display: flex;
  position: fixed;
  inset: 0;
  overflow: hidden;
}

.vimeo-lightbox__close {
  z-index: 600;
  pointer-events: auto;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 3em;
  height: 3em;
  display: flex;
  position: absolute;
  top: 2.5vw;
  right: 2.5vw;
}

.vimeo-lightbox__mute {
  cursor: pointer;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 1.5em;
  height: 1.5em;
  display: flex;
  position: relative;
}

.vimeo-lightbox__placeholder {
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: opacity .3s linear;
  display: block;
  position: absolute;
}

.vimeo-lightbox__pause {
  cursor: pointer;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
}

.vimeo-lightbox__btn-play-svg {
  width: 40%;
}

.vimeo-lightbox__bg {
  background-color: var(--80b);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  pointer-events: auto;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
}

.vimeo-lightbox__btn {
  -webkit-backdrop-filter: blur(1em);
  backdrop-filter: blur(1em);
  background-color: #64646433;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 6em;
  height: 6em;
  transition: opacity .3s linear;
  display: flex;
  position: relative;
}

.vimeo-lightbox__fullscreen-shrink-svg {
  width: 100%;
  position: absolute;
}

.vimeo-lightbox__close-bar {
  background-color: currentColor;
  width: 1em;
  height: .125em;
  position: absolute;
  transform: rotate(-45deg);
}

.vimeo-lightbox__close-bar.is--duplicate {
  transform: rotate(45deg);
}

.vimeo-lightbox__play {
  cursor: pointer;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
}

.vimeo-lightbox__timeline {
  flex-grow: 1;
  justify-content: center;
  align-items: center;
  height: 1.5em;
  display: flex;
  position: relative;
}

.vimeo-lightbox__loading-svg {
  color: #ff4c24;
  width: 6em;
}

.vimeo-lightbox__fullscreen {
  cursor: pointer;
  justify-content: center;
  align-items: center;
  width: 1.5em;
  height: 1.5em;
  display: flex;
  position: relative;
}

.vimeo-lightbox__fullscreen-scale-svg {
  width: 100%;
  position: absolute;
}

.vimeo-lightbox__calc {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
}

.vimeo-lightbox__iframe {
  pointer-events: none;
  width: 100%;
  height: 100%;
  position: absolute;
}

.vimeo-lightbox__timeline-input {
  pointer-events: auto;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background-color: #0000;
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
}

.vimeo-lightbox__player {
  pointer-events: auto;
  color: #efeeec;
  isolation: isolate;
  background-color: #131313;
  border-radius: 1em;
  justify-content: center;
  align-items: center;
  width: 100%;
  display: flex;
  position: relative;
  overflow: hidden;
}

.vimeo-lightbox__duration-span {
  text-align: center;
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
  width: 100%;
  display: block;
}

.vimeo-lightbox__dark {
  opacity: .5;
  pointer-events: none;
  background-color: #131313;
  width: 100%;
  height: 100%;
  transition: opacity .3s linear;
  position: absolute;
}

.vimeo-lightbox__timeline-progress {
  vertical-align: top;
  -webkit-appearance: none;
  appearance: none;
  height: var(--progress-height);
  border-radius: var(--timeline-rounded-corners);
  color: var(--progress-fill-bg);
  background-color: #0000;
  border: none;
  width: 100%;
  margin: 0;
  padding: 0;
  position: absolute;
  left: 0;
  overflow: hidden;
}

.video-close-btn {
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  opacity: 0;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  margin-left: auto;
  margin-right: auto;
  transition: opacity .2s;
  display: flex;
  position: absolute;
  bottom: 27px;
  left: 0;
  right: 0;
}

.video-close-btn:active {
  opacity: .6;
}

.image-11 {
  opacity: 0;
  object-fit: contain;
  width: 100%;
  height: 100%;
  transition: opacity .2s;
  position: absolute;
}

.image-11.show {
  opacity: 100;
}

.color-percentage {
  display: none;
}

.flex-block-22 {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
}

.play-toggle {
  aspect-ratio: 1;
  border-top-style: solid;
  border-top-width: 1px;
  border-top-color: var(--brand-color--gray-500);
  border-right-style: solid;
  border-right-width: 1px;
  border-right-color: var(--brand-color--gray-500);
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: var(--brand-color--gray-500);
  border-left-style: solid;
  border-left-width: 1px;
  border-left-color: var(--brand-color--gray-500);
  background-color: var(--brand-color--black);
  border-radius: 12px;
  width: 52px;
  padding: 2px;
  text-decoration: none;
  overflow: hidden;
}

.play-toggle-wrapper {
  aspect-ratio: 1;
  border-radius: 10px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  transition: background-color .2s;
  display: flex;
  overflow: hidden;
}

.play-status {
  will-change: transform;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  transition-property: transform;
  transition-duration: .5s;
  transition-timing-function: ease;
  display: flex;
}

.flex-block-23 {
  pointer-events: none;
  flex: 1;
  justify-content: flex-end;
  align-items: center;
}

.code-embed-2 {
  pointer-events: none;
  justify-content: flex-end;
  align-items: flex-end;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  inset: 0%;
  overflow: hidden;
}

.canvas {
  pointer-events: none;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0%;
}

.bc-title-m {
  opacity: 0;
  white-space: nowrap;
  will-change: transform;
  font-family: Tfdsans, Impact, sans-serif;
  font-size: 8vw;
  line-height: 1;
  transition-property: transform, opacity;
  transition-duration: .2s, .2s;
  transition-timing-function: ease, ease;
  transform: scale(.8);
}

.flex-block-24 {
  display: none;
}

.background-video-2 {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0%;
}

.play-pause-button {
  mix-blend-mode: difference;
}

._w-bg {
  background-color: var(--brand-color--white);
  pointer-events: none;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0% 0% auto;
}

.background-video-3 {
  width: 100%;
  height: 100%;
  display: none;
  position: absolute;
  inset: 0%;
}

@media screen and (max-width: 991px) {
  .page-heading {
    font-size: 72px;
  }

  .section-content.mockups {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    flex-flow: column;
    padding: 40px;
  }

  .section-content.f-1 {
    overflow: hidden;
  }

  .flip-card {
    flex: 1;
  }

  .flip-card.a, .flip-card.b, .flip-card.c {
    aspect-ratio: auto;
    width: 100%;
    position: relative;
    transform: none;
  }

  .mask {
    -webkit-clip-path: circle(21.5vh);
    clip-path: circle(21.5vh);
  }

  .mask-circle {
    aspect-ratio: 1;
    width: auto;
    height: 43vh;
    top: auto;
    left: auto;
    transform: none;
  }

  .flex-block-5 {
    flex-flow: column;
    padding: 0;
  }

  .div-block-9 {
    width: 1em;
    font-size: 50vw;
  }

  .div-block-9.all-chars {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    flex-flow: row;
    width: 100%;
    padding-right: 0;
    overflow: auto;
  }

  .char {
    font-size: 2.5rem;
  }

  .char.first {
    margin-left: calc(50% - .2em);
  }

  .char.last {
    margin-right: calc(50% - .15em);
  }

  .div-block-10 {
    display: none;
  }

  .tester {
    font-size: 10vw;
  }

  .image-7 {
    display: none;
  }

  .fig-f1-m {
    aspect-ratio: 1199 / 312;
    width: auto;
    max-width: none;
    height: 40vh;
    margin-top: -10vh;
    display: block;
    position: absolute;
    left: 0;
  }

  .color-block {
    border-radius: 8px;
  }

  .color-block.w {
    z-index: 2;
    width: 80%;
    left: 10%;
  }

  .color-block.b {
    width: calc(54% - 8px);
    top: calc(50% + 8px);
    left: 10%;
  }

  .color-block.g {
    width: 26%;
    top: calc(50% + 8px);
    right: 10%;
  }

  .color-block-info {
    display: none;
  }

  .flex-block-14 {
    flex: 0 auto;
    width: 100%;
    height: 100%;
  }

  .bc-gray {
    z-index: 2;
    height: 100%;
    transition: none;
    position: absolute;
    inset: 0% 0% auto;
  }

  .bc-gray:hover {
    height: 100%;
  }

  .bc-white {
    width: 100%;
    transition: none;
    position: absolute;
    inset: 0% 0% auto;
  }

  .bc-white:hover {
    width: 100%;
  }

  .bc-black {
    z-index: 2;
    width: 100%;
    transition: none;
    position: absolute;
    inset: 0% 0% auto;
  }

  .bc-black:hover {
    width: 100%;
  }

  .color-item {
    justify-content: flex-end;
    align-items: center;
    padding-right: 20px;
    display: flex;
  }

  .color-item.is-white {
    color: var(--brand-color--black);
  }

  .bc-title {
    opacity: 100;
    white-space: normal;
    width: 10ch;
    font-size: 20vw;
    line-height: 1;
    transition: none;
    display: none;
    transform: none;
  }

  .bc-bg {
    transition: none;
    transform: none;
  }

  .text-block-11 {
    font-size: 1rem;
  }

  .dropdown-toggle:hover {
    background-color: var(--t);
  }

  .video-hint {
    display: none;
  }

  .color-percentage {
    font-size: 1.25rem;
    line-height: 1.2;
    display: block;
  }

  .bc-title-m {
    opacity: 100;
    white-space: normal;
    font-size: 27vw;
    line-height: 1;
    transition: none;
    transform: none;
  }

  .bc-title-m.bottom {
    margin-top: -.2em;
  }

  .flex-block-24 {
    display: flex;
  }
}

@media screen and (max-width: 767px) {
  .loading-logo {
    width: 6.25rem;
  }

  .loading-welcome-text {
    margin-top: 1.25rem;
    margin-bottom: 1.75rem;
    font-size: 1.125rem;
    line-height: 1.28;
  }

  .intro-title {
    font-size: 11em;
  }

  .tfd-logo {
    width: 2.5rem;
  }

  .logo {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
  }

  .menu-open-btn {
    height: 25px;
    margin-left: 0;
    bottom: 16px;
    left: 20px;
  }

  .menu-tooltip {
    display: none;
  }

  .menu-title-wrapper {
    width: calc(100% - 92px);
    font-size: 1.75rem;
    top: 1.25rem;
    left: 1.25rem;
  }

  .swiper-slide.is-menu-item {
    width: 60%;
  }

  .link-block-2 {
    aspect-ratio: 231 / 412;
    border-color: var(--brand-color--white);
    border-radius: 8px;
    max-height: 64vh;
  }

  .text-block-2 {
    padding: 16px;
    font-size: 1.25rem;
  }

  .menu-link {
    font-size: .75rem;
  }

  .menu-links {
    padding: 1.25rem;
  }

  .flex-block-3 {
    grid-column-gap: .5rem;
    grid-row-gap: .5rem;
  }

  .menu-close-btn {
    background-color: var(--brand-color--white);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    inset: 20px 20px auto auto;
  }

  .menu-bar {
    background-color: var(--brand-color--black);
    height: 2px;
  }

  .logo-wrapper {
    padding-top: 20px;
    padding-left: 20px;
  }

  .switcher-wrapper {
    padding-top: 0;
    padding-bottom: 16px;
    padding-right: 20px;
    inset: auto 0% 0% auto;
  }

  .page-heading {
    padding-bottom: 85px;
    padding-left: 20px;
    padding-right: 20px;
    line-height: 1.2;
  }

  .section-content.mockups {
    flex-flow: row;
  }

  .section-nav {
    top: 47px;
    left: 20px;
  }

  .tester {
    padding: 20px;
  }

  .flex-block-9 {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    width: calc(100% - 40px);
    bottom: 69px;
    left: 20px;
  }

  .btn-inner.is-pannel {
    padding: 8px 14px;
  }

  .image-6 {
    position: static;
  }

  .section-name-wrapper {
    white-space: nowrap;
  }

  .text-block-7 {
    display: none;
  }

  .detail-section {
    border-top-style: solid;
    border-top-width: 1px;
    border-top-color: var(--brand-color--white);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    background-color: #000c;
    width: 100%;
    height: 177px;
    padding: 24px 16px 57px;
    transition-property: height, transform;
    transition-duration: .5s, .8s;
    transition-timing-function: ease, ease;
    inset: auto 0% 0%;
    transform: translate(0%, 100%);
  }

  .detail-section.active.open {
    height: 66.66vh;
  }

  .detail-body {
    border-top-style: solid;
    border-top-width: 1px;
    border-top-color: var(--brand-color--gray-300);
    border-right-style: solid;
    border-right-width: 1px;
    border-right-color: var(--brand-color--gray-300);
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: var(--brand-color--gray-300);
    border-left-style: solid;
    border-left-width: 1px;
    border-left-color: var(--brand-color--gray-300);
    background-color: var(--t);
    border-radius: 16px;
    flex: none;
    height: 100%;
    margin-bottom: 0;
    padding: 16px;
  }

  .d-detail-wrapper {
    display: none;
  }

  .m-detail-wrapper {
    grid-column-gap: 1em;
    grid-row-gap: 1em;
    color: var(--brand-color--gray-100);
    width: 100%;
    height: 3.84em;
    font-size: 1rem;
    line-height: 1.28;
    display: flex;
    overflow: hidden;
  }

  .detail-bar {
    background-color: var(--brand-color--white);
    border-radius: 2px;
    width: 36px;
    height: 1px;
    margin-left: auto;
    margin-right: auto;
    position: absolute;
    top: 12px;
    left: 0;
    right: 0;
  }

  .detail-block {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    height: 100%;
    padding-top: 0;
    padding-bottom: 0;
    padding-right: 0;
    display: flex;
  }

  .detail-touch-bar {
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 24px;
    display: flex;
    position: absolute;
    inset: 0% 0% auto;
  }

  .video-close-btn {
    background-color: var(--brand-color--white);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    inset: 20px 20px auto auto;
  }
}

@media screen and (max-width: 479px) {
  .menu-video {
    display: none;
  }

  .menu-video.m {
    display: block;
  }

  .banner-video {
    display: none;
  }

  .banner-video.m {
    display: block;
  }

  .section-content.wordmark {
    flex-flow: column;
    justify-content: center;
    align-items: flex-start;
    padding-left: 10vw;
  }

  .section-content.mockups {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    flex-flow: column;
    padding: 20px;
  }

  .logo-word.s.d {
    font-size: 27vw;
    line-height: .8;
    position: static;
    transform: translate(100vw);
  }

  .logo-word.t {
    font-size: 27vw;
    line-height: .8;
    position: relative;
  }

  .image-2 {
    width: 68vw;
  }

  .letter-wrapper {
    position: static;
  }

  .logo-tooltip {
    border-radius: 12px;
    width: 100%;
    padding: 12px;
  }

  .image-3 {
    top: -20px;
    left: 29%;
  }

  .image-3._2 {
    left: 60%;
  }

  .text-block-4 {
    font-size: 1rem;
    line-height: 1.24;
  }

  .tooltip-position {
    width: calc(100vw - 80px);
    left: 0;
  }

  .tooltip-position._2 {
    top: .93em;
    left: 0;
  }

  .flip-card {
    flex: 0 auto;
    width: 100%;
    height: 26%;
    position: relative;
  }

  .flip-card.a {
    width: 100%;
    height: 26%;
    margin-top: 0;
    left: 0;
  }

  .flip-card.b, .flip-card.c {
    width: 100%;
    height: 26%;
    margin-top: 0;
    right: auto;
    transform: none;
  }

  .card-backside {
    grid-column-gap: 15px;
    grid-row-gap: 15px;
    padding: 15px 20px;
  }

  .flex-block-4 {
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    flex: none;
  }

  .image-4 {
    object-fit: cover;
    height: calc(100% - 40px);
  }

  .section-nav {
    display: none;
    top: 65px;
    left: auto;
    right: 20px;
    transform: none;
  }

  .mask {
    -webkit-clip-path: circle(27.5vw);
    clip-path: circle(27.5vw);
  }

  .mask-circle {
    height: 55vw;
  }

  .div-block-9 {
    font-size: 100vw;
  }

  .hello {
    font-size: 53vw;
  }

  .fiu-wrapper {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    flex-flow: column;
    align-items: stretch;
    width: 100%;
    height: auto;
    padding: 20px;
  }

  .fiu-card-image {
    width: 100%;
  }

  .fiu-card-image.fill-height {
    flex: none;
  }

  .flex-block-7 {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }

  .section-nav-btn {
    z-index: 1000;
    background-color: var(--brand-color--black);
    border: 1px solid #494949;
    border-radius: 8px;
    padding-left: 12px;
    padding-right: 8px;
    text-decoration: none;
    display: flex;
    position: fixed;
    top: 25px;
    right: 20px;
    transform: translate(0, -4rem);
  }

  .text-block-6 {
    line-height: 1.9;
  }

  .section-name-group {
    height: 1.9em;
    font-size: 1rem;
    overflow: hidden;
  }

  .fig-f1-m {
    height: 70vw;
    margin-top: -17vw;
  }

  .bc-bg {
    display: none;
  }

  .bc-bg.m {
    display: block;
  }

  .flex-block-16 {
    margin-left: 20px;
    margin-right: 20px;
    bottom: 69px;
    left: 0;
    right: 0;
  }

  .link-block-3 {
    flex: none;
  }

  .text-block-11 {
    flex: 1;
  }

  .flex-block-17 {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    width: calc(100% - 40px);
    bottom: 69px;
    left: 20px;
    right: 20px;
  }

  .flat-toggle {
    flex: 1;
  }

  .image-11 {
    aspect-ratio: 9 / 10;
    object-fit: cover;
    height: auto;
  }

  .flex-block-22 {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    flex: 1;
  }

  .play-pause-button {
    bottom: 69px;
  }
}


@font-face {
  font-family: 'Tfdsans';
  src: url('../fonts/TFDSans-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Messinasansweb';
  src: url('../fonts/MessinaSansWeb-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Messinasansweb';
  src: url('../fonts/MessinaSansWeb-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}