* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    user-select: none;
    -webkit-user-drag: none;
}

html, body, #app {
    height: 100vh;
    width: 100vw;
    margin: 0;
    padding: 0;
    background-color: rgb(244, 244, 244);
    -webkit-user-select: none;
    user-select: none;
    overscroll-behavior: none;
    touch-action: none;
    /*scrollbar-width: none;*/
}

button, a, input[type="button"], input[type="submit"] {
    -webkit-tap-highlight-color: transparent;
    outline: none;
    box-shadow: none;
    background: none;
}
button:focus, button:active, a:focus, a:active,
input[type="button"]:focus, input[type="button"]:active,
input[type="submit"]:focus, input[type="submit"]:active {
    outline: none;
    box-shadow: none;
}

img {
    pointer-events: none;
}

input[type="date"],
input[type="time"] {
  width: auto;
  min-width: 0;
  box-sizing: content-box;
}

.input-list-nav {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 55px;
    pointer-events: none;
    z-index: 1;
    display: flex;
    /*align-items: center;*/
    justify-content: center;

  background:
    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="55" fill="none"><path fill="%23FECF40" d="M0 0v52c0-11 9-20 20-20V0H0Z"/></svg>') no-repeat left top,
    url('data:image/svg+xml,<svg width="12" height="32" viewBox="0 0 12 32" fill="none" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.5 0H0.5V32H11.5V0Z" fill="%23FECF40"/></svg>') no-repeat center top,
    url('data:image/svg+xml,<svg width="20" height="55" viewBox="0 0 20 55" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20 52V0H0V32C11.0457 32 20 40.9543 20 52Z" fill="%23FECF40"/></svg>') no-repeat right top;

  background-size:
    20px 55px,
    200% 32px,
    20px 55px;
}
.input-list-nav .nav-icon {
    margin-top: 8px;
    width: 220px;
    display: inline-block;
    height: 24px;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="197" height="12" fill="none"><path fill="%23000" d="M32.4.7c.6 0 1 0 1.5.2s.9.4 1.2.7A3.9 3.9 0 0 1 36.5 4h-1c0-.3-.2-.7-.4-1a3 3 0 0 0-1.6-1.3l-1-.1c-.7 0-1.3.1-1.8.5-.6.3-1 .8-1.3 1.4-.3.7-.5 1.5-.5 2.4 0 1 .2 1.7.5 2.4.3.6.7 1.1 1.3 1.5a3.3 3.3 0 0 0 3.8-.2 3 3 0 0 0 1-1.8h1a4 4 0 0 1-1.4 2.4c-.3.3-.7.5-1.2.7-.4.2-1 .2-1.5.2a4.1 4.1 0 0 1-3.8-2.4c-.4-.8-.6-1.7-.6-2.8 0-1 .2-2 .6-2.8.4-.7.9-1.3 1.5-1.8a4 4 0 0 1 2.3-.6Zm59.7 0a4.3 4.3 0 0 1 2.7 1A4 4 0 0 1 96.1 4h-1c0-.3-.1-.7-.3-1A3 3 0 0 0 92 1.7c-.7 0-1.3.1-1.8.5-.5.3-1 .8-1.3 1.5-.3.6-.4 1.4-.4 2.3 0 1 .1 1.7.4 2.4.3.6.8 1.1 1.3 1.4.5.4 1.1.6 1.8.6.6 0 1.2-.2 1.7-.5.5-.2.8-.6 1.1-1.1.3-.5.4-1.1.4-1.8h-3v-.8h4v.8c0 .9-.3 1.6-.6 2.3-.4.6-.9 1-1.5 1.4-.6.4-1.3.5-2 .5-1 0-1.7-.2-2.4-.6-.7-.4-1.2-1-1.6-1.8-.3-.8-.5-1.7-.5-2.8 0-.8 0-1.5.3-2.2.2-.6.5-1.1.9-1.6A4 4 0 0 1 92.1.7Zm87.4 0a4 4 0 0 1 3.8 2.4c.4.8.6 1.7.6 2.8 0 1-.2 2-.6 2.8-.4.8-.9 1.4-1.5 1.8a4 4 0 0 1-2.3.6 4.1 4.1 0 0 1-3.9-2.4c-.3-.8-.5-1.7-.5-2.8 0-1 .2-2 .5-2.8.4-.7 1-1.3 1.6-1.8a4 4 0 0 1 2.3-.6ZM1.3 11h-1V.8h1V11ZM10.7.8c1 0 1.8.2 2.4.6a4 4 0 0 1 1.6 1.8c.4.7.6 1.6.6 2.7 0 1-.2 2-.6 2.7a4 4 0 0 1-1.6 1.8c-.7.4-1.6.6-2.6.6h-3V.8h3.2ZM49.6 11h-1l-1-3h-4.4l-1 3h-1L44.9.8h1L49.6 11ZM58 .8c.7 0 1.3.1 1.8.4.5.3.9.6 1.1 1 .3.5.4 1 .4 1.7 0 .6-.1 1-.4 1.5a2.6 2.6 0 0 1-1.5 1.3l2.3 4.3h-1l-2.3-4.1H55.8V11h-1V.8h3.3Zm12.2 0c1 0 1.8.2 2.5.6a4 4 0 0 1 1.6 1.8c.4.7.5 1.6.5 2.7 0 1-.1 2-.5 2.7a4 4 0 0 1-1.7 1.8c-.7.4-1.5.6-2.6.6h-3V.8h3.2Zm37.6.9h-5v3.8h4.7v.8H103v3.9h5.1v.8h-6V.8h6v.9Zm12.9 7.7V.8h1V11h-1l-6-8.5V11h-1V.8h1l6 8.6Zm13-7.7H129v3.8h4.7v.8h-4.7v3.9h5v.8h-6V.8h6v.9Zm9.3-.9c.7 0 1.3.1 1.8.4.5.3.8.6 1 1 .3.5.4 1 .4 1.7 0 .6 0 1-.3 1.5a2.6 2.6 0 0 1-1.6 1.3l2.4 4.3h-1.1l-2.2-4.1h-2.8V11h-1V.8h3.4ZM159.6 11h-1l-1.1-3h-4.3l-1 3h-1L154.8.8h1l3.7 10.2Zm10.8-9.3H167V11h-.9V1.7H163V.8h7.4v.9Zm22.5-.9c.7 0 1.4.1 1.8.4.5.3.9.6 1.1 1 .3.5.4 1 .4 1.7 0 .6-.1 1-.4 1.5a2.6 2.6 0 0 1-1.5 1.3l2.3 4.3h-1l-2.3-4.1H190.6V11h-1V.8h3.3Zm-13.4.8c-.7 0-1.3.1-1.8.5-.5.3-1 .8-1.3 1.5-.3.6-.4 1.4-.4 2.3 0 1 .1 1.7.4 2.4.3.6.8 1.1 1.3 1.4.5.4 1.1.6 1.8.6s1.3-.2 1.8-.6c.5-.3 1-.8 1.2-1.4.3-.7.5-1.5.5-2.4 0-.9-.2-1.7-.5-2.3-.3-.7-.7-1.2-1.2-1.5-.5-.4-1.1-.5-1.8-.5Zm-171 8.6h2c.8 0 1.5-.2 2.1-.6.6-.3 1-.8 1.3-1.4.3-.7.5-1.4.5-2.3 0-.9-.2-1.6-.5-2.3-.2-.6-.7-1.1-1.2-1.4a4 4 0 0 0-2.1-.5H8.4v8.5Zm59.6 0h2c.9 0 1.6-.2 2.2-.6.6-.3 1-.8 1.3-1.4.3-.7.4-1.4.4-2.3 0-.9-.1-1.6-.4-2.3-.3-.6-.7-1.1-1.3-1.4a4 4 0 0 0-2-.5H68v8.5ZM43.5 7h3.7l-1.8-5-1.9 5Zm110 0h3.7l-1.8-5-1.9 5Zm-97.7-1H58c.5 0 1-.2 1.3-.3.4-.2.6-.5.8-.8a2.5 2.5 0 0 0 0-2.3c-.2-.3-.4-.6-.8-.8-.3-.2-.8-.2-1.3-.2h-2.3V6Zm85 0h2.3c.5 0 1-.2 1.3-.3l.8-.8.2-1.1c0-.5 0-.9-.2-1.2l-.8-.8c-.4-.2-.8-.2-1.4-.2h-2.3V6Zm49.8 0h2.3c.5 0 1-.2 1.3-.3.4-.2.7-.5.8-.8a2.4 2.4 0 0 0 0-2.3c-.1-.3-.4-.6-.8-.8-.3-.2-.8-.2-1.3-.2h-2.3V6Z"/></svg>');
    background-repeat: no-repeat;
    background-size: contain;
}
.input-list {
    width: 100vw;
    height: 100vh;
    display: flex;
    position: relative;
    margin-bottom: 24px;
    padding: 60px 24px 400px 24px;
    flex-direction: column;
    gap: 24px;
    align-items: center;
    pointer-events: auto;
    overflow-y: scroll;
    /*scrollbar-width: none;*/
    -webkit-overflow-scrolling: touch;
}
.input-list::-webkit-scrollbar {
    display: none;
}
.input-horizon {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: row;
    max-width: 440px;
    gap: 24px;
    align-items: center;
}
.input-horizon p {
    margin-left: -12px;
}
.input-horizon-term {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: row;
    max-width: 440px;
    gap: 12px;
    align-items: center;
}
.input-horizon-term p {
    display: inline;
    white-space: nowrap;
}
.input-box {
    width: 100%;
    max-width: 440px;
    font-size: 17px;
    min-height: 56px;
    background: rgba(255, 255, 255);
    border-radius: 16px;
    color: rgb(0, 0, 0, 1);
    outline: none;
    padding: 0 16px;
    border: 0;
    -webkit-appearance: none;
}
.input-box-line {
    max-width: 440px;
    width: 100%;
    margin: 4px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.input-box-upload {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 56px;
    width: 56%;
    font-size: 17px;
    min-height: 56px;
    background: rgba(255, 255, 255);
    border-radius: 16px;
    color: rgb(0, 0, 0, 0.4);
    outline: none;
    border: 0;
    -webkit-appearance: none;
    cursor: pointer;
}
.input-box-upload:active {
    background: rgb(247, 247, 247);
}
.input-box-upload p {
    margin-left: 1px;
}
.input-box-upload-success {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
    font-size: 17px;
    min-height: 56px;
    background: rgba(255, 255, 255);
    border-radius: 16px;
    color: rgb(0, 0, 0, 0.4);
    outline: none;
    border: 0;
    -webkit-appearance: none;
    cursor: pointer;
}
.input-box-upload-success p {
    color: #000000;
    margin-left: 1px;
}
.input-box-upload-input {
    display: none;
}
.input-box-upload-vertical {
     width: 100%;
    display: flex;
     align-items: center;
    flex-direction: column;
    gap: 24px;
}
.input-box-make:enabled {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 56px;
    width: 40%;
    font-size: 17px;
    min-height: 56px;
    color: #000000;
    background: rgb(255, 255, 255);
    border-radius: 16px;
    border: #ffffff;
    transition: transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.input-box-make:active {
    background: rgb(247, 247, 247);
}
.input-box-make:disabled {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 56px;
    width: 40%;
    font-size: 17px;
    min-height: 56px;
    color: #000000;
    background: rgb(255, 255, 255);
    border-radius: 16px;
    border: #ffffff;
    opacity: 0.4;
    cursor: not-allowed;
}
.input-box.name {
    width: 60%;
}
.input-box.nation {
  width: 40%;
}
.input-box.period {
    position: relative;
    width: 50%;
}
.input-box-button {
    margin-top: 8px;
    color: #cccccc;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.input-box:focus {
    box-shadow: 0 0 0 1px rgb(0, 0, 0);
}
.input-box::placeholder {
    color: rgba(23, 23, 23, 0.4);
}
.button:enabled {
    color: rgba(0, 0, 0, 1);
    position: relative;
    font-size: 1.6em;
    font-weight: bold;
    bottom: 0;
    cursor: pointer;
    padding: 16px 40px;
    border-radius: 16px;
    pointer-events: auto;
    background: rgb(255, 211, 0);
    border: 0 solid rgba(255, 255, 255, 0.2);
}
.button:disabled {
    position: relative;
    font-size: 1.6em;
    font-weight: bold;
    bottom: 0;
    padding: 16px 40px;
    border-radius: 16px;
    pointer-events: auto;
    border: 0 solid rgba(255, 255, 255, 0.2);
    background: rgba(198, 164, 0);
    cursor: not-allowed;
}
.button p {
    color: rgba(0, 0, 0, 1);
    fill-opacity: 1;
    pointer-events: auto;
}
.button:not(:disabled):hover {
    background: rgb(243, 201, 0);
}
.button-generated {
    margin-top: 24px;
    color: rgba(0, 0, 0, 1);
    position: relative;
    font-size: 1.6em;
    font-weight: bold;
    bottom: 0;
    cursor: pointer;
    padding: 16px 40px;
    border-radius: 16px;
    pointer-events: auto;
    background: rgb(255, 211, 0);
    border: 0 solid rgba(255, 255, 255, 0.2);
}
.button-loading p {
    color: rgba(198, 164, 0);;
}
.button-loading p:before {
    content: "";
    position: absolute;
    margin: 0 0 0 10px;
    width: 32px;
    height: 32px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='31' height='31' fill='none'><g clip-path='url(%23a)' data-figma-skip-parse='true'><foreignObject width='1864.2' height='1864.2' x='-932.1' y='-932.1' transform='rotate(-10.4 90.8 -76) scale(.0244)'><div xmlns='http://www.w3.org/1999/xhtml' style='background:conic-gradient(from 90deg,transparent 0deg,%23000 299.447deg,transparent 360deg);height:100%;width:100%;opacity:1'/></foreignObject></g><path d='M0 15.5C0 6.9 7 0 15.5 0a2 2 0 1 1 0 4A11.5 11.5 0 1 0 27 15.5a2 2 0 1 1 4 0 15.5 15.5 0 0 1-31 0Z' /><defs><clipPath id='a'><path d='M0 15.5C0 6.9 7 0 15.5 0a2 2 0 1 1 0 4A11.5 11.5 0 1 0 27 15.5a2 2 0 1 1 4 0 15.5 15.5 0 0 1-31 0Z'/></clipPath></defs></svg>");
    background-repeat: no-repeat;
    background-size: contain;
    animation: spin 1s linear infinite;
}
@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}
.button-footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 20vh;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 2;
}

/* popup page */
.input-popup-overlay {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: rgba(244, 244, 244, 0.8);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 4;
}
.input-popup {
    display: flex;
    align-items: center;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 16px;
    padding: 24px 12px 24px 12px;
    width: calc(100vw - 48px);
    max-width: 480px;
    color: white;
    text-align: center;
}
.input-popup-title {
    font-weight: bold;
    color: rgba(0, 0, 0, 0.8);
    font-size: 20px;
    margin-bottom: 24px;
}
.input-popup-title-generate {
    display: flex;
    flex-direction: row;
    width: 94%;
    align-items: center;
    margin-bottom: 4px;
}
.input-popup-title-generate p {
    padding-right: 8px;
    font-size: 16px;
    color: black;
    width: auto;
    text-align: left;
}
.input-popup-title-generate-svg {
    margin: 4px;
    padding: 32px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='36' height='36' fill='none'><path fill='%23EB6464' d='M24 0a12 12 0 0 1 12 12v12a12 12 0 0 1-12 12H12A12 12 0 0 1 0 24V12A12 12 0 0 1 12 0h12Zm-8 23v4h4v-4h-4ZM15 9l1 11h4l1-11h-6Z'/></svg>");
    background-position: center;
    background-repeat: no-repeat;
}
.input-popup-image {
    width: 56%;
    height: auto;
    margin-bottom: 4px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath fill='%23000' fill-opacity='0.1' d='M16 16H8V8h8v8ZM8 8H0V0h8v8Z'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 18px 18px;
    background-position: center;
    object-fit: contain;
}
.input-popup-image-generate {
    width: 94%;
    height: auto;
    margin-bottom: 12px;
    object-fit: contain;
    background-position: center;
}
.input-popup-text {
    max-width: 56%;
    margin-bottom: 24px;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.8);
}
.input-popup-text-generate {
    font-size: 16px;
    margin-bottom: 4px;
    color: rgba(0, 0, 0, 0.8);
    text-decoration: underline #000000;
    text-underline-offset: 3px;
    cursor: pointer;
}
.input-popup-text-hidden {
    margin-bottom: 32px;
}

.generate-list-wrapper {
  width: fit-content;
  height: fit-content;
  overflow: auto;
  background: #f0f0f0;
}
.generate-list {
    display: block;
    width: 3600px;
    height: 2400px;
    transform: scale(1);
    transform-origin: top left;
    position: relative;
    border: 1px solid #ccc;
}
.generate-text-name {
    position: absolute;
    top: 440px;
    left:889px;
    background-color: rgba(255, 255, 255, 0);
}
.generate-text-name p {
    font-size: 138px;
    letter-spacing: 80px;
    font-family: "font_name", sans-serif;
    white-space: nowrap;
    text-shadow:
            1px 0 1px rgba(4, 0, 20, 0.3),
            -1px 0 1px rgba(4, 0, 20, 0.3),
            0 -2px 3px rgba(1, 0, 32, 0.4),
            0 -1px 4px rgba(6, 45, 0, 0.4),
            0 0 20px rgba(27, 30, 0, 0.8);
    filter: blur(1px);
    font-weight: normal;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.generate-text-gender {
    display: flex;
    gap: 516px;
    position: absolute;
    top: 714px;
    left:880px;
    background-color: rgba(255, 255, 255, 0);
}
.generate-text-gender p {
    font-size: 110px;
    font-family: "font_name", sans-serif;
    white-space: nowrap;
    text-shadow:
            -1px 0 1px rgba(4, 0, 20, 0.4),
            1px 0 1px rgba(4, 0, 20, 0.4),
            0 -2px 3px rgba(1, 0, 32, 0.4),
            0 -1px 4px rgba(6, 45, 0, 0.4),
            0 0 20px rgba(27, 30, 0, 0.8);
    filter: blur(1px);
    font-weight: normal;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.generate-text-born {
    display: flex;
    position: absolute;
    gap: 240px;
    top: 972px;
    left:880px;
    background-color: rgba(255, 255, 255, 0);
}
.generate-text-born p {
    font-size: 101px;
    letter-spacing: 2px;
    font-family: "font_born", sans-serif;
    white-space: nowrap;
    text-shadow:
            2px 2px 2px rgba(0, 0, 2, 0.4),
            2px 1px 2px rgba(2, 0, 25, 0.4),
            0 -2px 3px rgba(1, 0, 32, 0.5),
            0 -1px 4px rgba(6, 45, 0, 0.4),
            0 0 20px rgba(27, 30, 0, 1);
    filter: blur(1px);
    font-weight: 200;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.generate-text-born-month {
    display: flex;
    justify-content: center;
    align-content: center;
    width: 60px;
    height: 100px;
}
.generate-text-address {
    width: 1290px;
    height: 650px;
    display: flex;
    position: absolute;
    top: 1190px;
    left:877px;
    background-color: rgba(255, 21, 21, 0);
}
.generate-text-address span {
    line-height: 1.45;
    max-width: 100%;
    white-space: normal;
    font-size: 113px;
    letter-spacing: 0;
    font-family: "font_name", sans-serif;
    text-shadow:
            0 0 1px rgba(0, 3, 14, 0.4),
            0 -1px 2px rgba(2, 0, 25, 0.4),
            0 -1px 3px rgba(1, 0, 32, 0.5),
            0 -1px 4px rgba(6, 45, 0, 0.4),
            0 0 16px rgba(19, 21, 0, 0.8);
    filter: blur(1px);
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.generate-text-address .latin {
    font-family: "font_born", sans-serif;
    font-size: 108px;
    vertical-align: -10px;
}
.generate-text-address .latin.hyphen {
     letter-spacing: 22px;
     vertical-align: 0;
     position: relative;
     left: -12px;
    padding-left: 4px;
    padding-right: 8px;
}
.generate-text-number {
    display: flex;
    position: absolute;
    top: 1837px;
    left:1366px;
}
.generate-text-number p {
    font-size: 128px;
    letter-spacing: 18px;
    font-family: "font_number", sans-serif;
    text-shadow:
            0 0 2px rgba(0, 1, 12, 0.2),
            0 0 2px rgba(2, 0, 25, 0.2),
            0 0 3px rgba(1, 0, 32, 0.5),
            0 0 4px rgba(6, 45, 0, 0.4),
            0 0 24px rgba(19, 21, 0, 0.8);
    filter: blur(1px);
    font-weight: 200;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.generate-text-office {
    position: absolute;
    top: 1600px;
    left:1546px;
    background-color: rgba(255, 255, 255, 0);
}
.generate-text-office p {
    font-size: 110px;
    letter-spacing: 1px;
    font-family: "font_name", sans-serif;
    white-space: nowrap;
    text-shadow:
            0 0 0 rgba(33, 33, 37, 0.3),
            0 0 1px rgba(4, 0, 20, 0.3),
            0 -1px 3px rgba(1, 0, 32, 0.4),
            0 -1px 4px rgba(0, 6, 45, 0.4),
            0 0 15px rgba(27, 30, 0, 0.8)
;
    filter: blur(1px);
    font-weight: normal;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.generate-text-period {
    display: flex;
    position: absolute;
    gap: 12px;
    top: 1876px;
    left:1544px;
    background-color: rgba(255, 255, 255, 0);
}
.generate-text-period-p {
    font-size: 108px;
    letter-spacing: -2px;
    font-family: "font_born", sans-serif;
    white-space: nowrap;
    text-shadow:
            0 1px 1px rgba(1, 0, 18, 0.2),
            0 1px 2px rgba(2, 0, 25, 0.4),
            0 -1px 3px rgba(1, 0, 32, 0.5),
            0 -1px 4px rgba(0, 9, 45, 0.3),
            0 0 15px rgba(27, 30, 0, 1);
    filter: blur(1px);
    font-weight: 200;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.generate-text-period-p-long {
    position: relative;
    top: -24px;
    font-family: "font_name", sans-serif;
    font-size: 108px;
    letter-spacing: 8px;
    white-space: nowrap;
    text-shadow:
            0 1px 1px rgba(1, 0, 18, 0.2),
            0 1px 2px rgba(2, 0, 25, 0.4),
            0 -1px 3px rgba(1, 0, 32, 0.5),
            0 -1px 4px rgba(0, 9, 45, 0.3),
            0 0 15px rgba(27, 30, 0, 1);
    filter: blur(1px);
    font-weight: 200;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.generate-text-period-hyphen {
    vertical-align: 0;
    position: relative;
    left: -4px;
    padding-left: 4px;
    padding-right: 18px;
    font-size: 108px;
    letter-spacing: -2px;
    font-family: "font_born", sans-serif;
    white-space: nowrap;
    text-shadow:
            0 1px 1px rgba(1, 0, 18, 0.2),
            0 1px 2px rgba(2, 0, 25, 0.4),
            0 -1px 3px rgba(1, 0, 32, 0.5),
            0 -1px 4px rgba(0, 9, 45, 0.3),
            0 0 15px rgba(27, 30, 0, 1);
    filter: blur(1px);
    font-weight: 200;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.generate-bg-img {
    width: 3600px;
    height: 2400px;
    background-repeat: no-repeat;
    background-position: left top;
    background-size: contain;
}
.generate-bg-img-back {
    width: 3600px;
    height: 2400px;
    background-repeat: no-repeat;
    background-position: left top;
    background-size: contain;
}
.generate-head-img-wrapper {
    position: absolute;
    top: 456px;
    left: 2224px;
    width: 960px;
    height: 1200px;
    opacity: 0.7;
    overflow: visible;
}
.generate-head-img {
    object-fit: contain;
    width: 960px;
    height: auto;
    bottom: 0;
    background-repeat: no-repeat;
    background-size: cover;
    mask-image:
            linear-gradient(to right, transparent 0px, black 10px, black calc(100% - 8px), transparent 100%),
            linear-gradient(to bottom, black 0px, black calc(100% - 12px), transparent 100%);
    mask-composite: intersect;
    filter: blur(1px) contrast(1);
    -webkit-filter: blur(1px) contrast(1);
}
.generate-head-img::before {
    content: "";
    position: absolute;
    inset: 0;
    mask-size: cover;
    -webkit-mask-composite: destination-in;
    -webkit-mask-size: cover;
    -webkit-mask-repeat: no-repeat;
}
.generate-head-img-canvas {
  width: 100%;
  height: 100%;
}