@import url("https://fonts.googleapis.com/css2?family=Gaegu:wght@700&display=swap");
    * { box-sizing: border-box; }

    html, body {
      margin: 0;
      width: 100%;
      height: 100%;
      background: #071037;
      overflow: hidden;
      font-family: "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
    }

    .app {
      width: 100vw;
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #071037;
    }

    .stage {
      position: relative;
      width: min(100vw, calc(100vh * 16 / 9));
      height: min(100vh, calc(100vw * 9 / 16));
      aspect-ratio: 16 / 9;
      overflow: hidden;
      background: #071037;
    }

    .scene {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: scale(1.01);
      transition: opacity 260ms ease, transform 260ms ease, visibility 0s linear 260ms;
      overflow: hidden;
    }

    .scene.is-active {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: scale(1);
      transition: opacity 260ms ease, transform 260ms ease, visibility 0s;
    }

    .scene-1-home {
      z-index: 1;
    }

    .layer {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
    }