@import url('https://fonts.cdnfonts.com/css/morganite');
@import url('https://api.fontshare.com/v2/css?f[]=sentient@400,500,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

html {
    --background: orange;
    --foreground: darkred;
    --accent: #0029FF;
    --borders: 4px;
    --form-width: min(96rem, 50vw);
    --overshoot: cubic-bezier(0.34, 1.56, 0.64, 1);
    --intro-roll: 7.5vw;
    font-size: 12px;
}
@media screen and (max-width: 2000px) {
    html {
        font-size: 10px;
    }
}
@media screen and (max-width: 1700px) {
    html {
        --borders: 3px;
    }
}
@media screen and (max-width: 1400px) {
    html {
        font-size: 8px;
    }
}
@media screen and (max-width: 1000px) {
    html {
        font-size: 6px;
        --borders: 2px;
    }
}

body {
    background-color: black;
}
body, .form_btn.form:not(.valid) {
    cursor: url("data:image/svg+xml,%3Csvg width='34' height='37' viewBox='0 0 34 37' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.8767 4.9193C8.29943 2.40654 3.44728 5.37103 4.05055 9.70079L6.70196 28.7301C7.20281 32.3247 11.246 34.205 14.3175 32.2717L27.2071 24.1588C30.2301 22.256 30.3406 17.8888 27.4177 15.8357L11.8767 4.9193Z' fill='%230029FF' stroke='white' stroke-width='2'/%3E%3Cpath d='M12.4515 4.101C8.15878 1.08569 2.33619 4.64308 3.06012 9.83878L5.71153 28.8681C6.31254 33.1816 11.1644 35.438 14.8502 33.118L27.7398 25.0051C31.3674 22.7218 31.5 17.4811 27.9925 15.0174L12.4515 4.101Z' stroke='white' stroke-opacity='0.1' stroke-width='4'/%3E%3C/svg%3E%0A") 6 4, default;
}
body.dragging * {
    cursor: url("data:image/svg+xml,%3Csvg width='47' height='47' viewBox='0 0 47 47' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.38955 24.0602C2.8823 40.25 20.7162 49.8352 34.4906 41.3136C48.265 32.7919 47.6491 12.5547 33.3819 4.88652C19.1148 -2.78165 1.8968 7.87039 2.38955 24.0602Z' stroke='white' stroke-opacity='0.1' stroke-width='4'/%3E%3Cpath d='M32.9085 5.76735C19.3194 -1.53637 2.91976 8.60942 3.38909 24.0298C3.85842 39.4501 20.8448 48.5798 33.9645 40.4631C47.0843 32.3465 46.4976 13.0711 32.9085 5.76735Z' fill='%230029FF' stroke='white' stroke-width='2'/%3E%3C/svg%3E%0A") 23 23, move !important;
}
body > .layout { transition: transform 300ms ease; }
body.show_form > .layout {
    transform: translateX(calc(var(--form-width) * -1));
}
body.show_form #contact_form { transform: translateX(0); }

.pointer:not(:disabled) {
    cursor: url("data:image/svg+xml,%3Csvg width='29' height='29' viewBox='0 0 29 29' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='14.5' cy='14.5' r='13.5' stroke='white' stroke-opacity='0.1' stroke-width='2'/%3E%3Cpath d='M3.00563 14.8835C3.27534 23.7452 13.037 28.9918 20.5766 24.3274C28.1162 19.6629 27.7791 8.58577 19.9698 4.38849C12.1604 0.191211 2.73592 6.02176 3.00563 14.8835Z' fill='%230029FF' stroke='white' stroke-width='2'/%3E%3C/svg%3E%0A") 14 14, pointer;
}

.foreground {
    fill: var(--foreground);
    color: var(--foreground);
}

.logo {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    z-index: 10;
    color: var(--foreground);
    opacity: 0;
    transition: opacity 400ms ease, transform 500ms ease-in;
    transition-delay: 2000ms;
    transform: rotate(calc(var(--rotate) / -0.5)) scale(5);
    transform-origin: 50% 50%;
    --rotate: 0deg;
    --scale: 1;
    --scale-origin: 50% 50%;
}
.logo > svg { width: 6.3vw; }
@keyframes squish {
    0%, 50% { transform: scaleX(1) scaleY(1); }
    25% { transform: scaleX(0.95) scaleY(1.05); }
    75% { transform: scaleX(1.05) scaleY(0.95); }
}
.logo.dragging { transition-delay: 0ms; }
.logo.dragging > svg {
    animation: squish 1s linear 0ms infinite normal forwards;
    animation-direction: normal, reverse;
}
body.enter .logo {
    opacity: 1;
    transform: rotate(var(--rotate)) scale(var(--scale));
}
body.exit .logo {
    opacity: 0;
    transition-delay: 0ms;
    transform: rotate(calc(var(--rotate) * 1.5)) scale(3);
}

.form_btn {
    position: fixed;
    z-index: 10;
    right: 5rem;
    bottom: 5rem;
    width: 15.6rem;
    box-sizing: border-box;
    height: 15.6rem;
    padding-top: 0.5rem;
    font-family: 'Sentient', 'Noto Sans JP', serif;
    font-size: 2.4rem;
    line-height: 1.1;
    color: white;
    background-color: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 999px;
    outline: none;
}
.form_btn.main {
    transform: translateX(24.5rem) rotate(calc(var(--rotate) + 180deg));
    --rotate: 0deg;
}
.form_btn.main:hover { transition: none !important; }
body.before_enter .form_btn.main {
    transition: transform 1000ms var(--overshoot) 2750ms;
}
body.enter .form_btn.main {
    transform: translateX(0) rotate(var(--rotate));
}
body.exit .form_btn.main {
    transform: translateX(24.5rem) rotate(calc(var(--rotate) + 180deg));
    transition-delay: 0ms;
}
.form_btn svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: white;
    stroke: white;
    fill: white;
    transition: fill 200ms ease;
}
.form_btn.main svg {
    transform: scale(var(--scale)) rotate(var(--rotate2));
    --scale: 1;
}

.form_btn.form {
    overflow: hidden;
    transition: background-color 200ms ease, border-color 200ms ease,
        visibility 0ms linear 400ms;
}
.form_btn.form svg {
    position: absolute;
    top: 0;
    left: 0;
}
.form_btn.form.valid:hover svg {
    transition: transform 300ms ease;
}
.form_btn.form svg:last-child {
    transform: translateX(-100%);
}
.form_btn.form.valid:hover svg:first-child {
    transform: translateX(100%);
}
.form_btn.form.valid:hover svg:last-child {
    transform: translateX(0%);
}
.form_btn.form:not(.valid) {
    border-color: var(--background);
    background-color: transparent;
    opacity: 0.3;
}
.form_btn.form:not(.valid) svg { fill: var(--background); }
.form_btn.form:not(.valid) svg {
    color: var(--background);
    stroke: var(--background);
}

.layout {
    display: flex;
    overflow: hidden;
}
.layout > * {
    flex: 0 0 auto;
    transition: transform 500ms var(--overshoot), opacity 300ms ease;
    transition-delay: 400ms;
    opacity: 0;
}
.layout .layout > * {
    transition-delay: 800ms;
}
.layout .layout .layout > * {
    transition-delay: 1200ms;
}
.layout .layout .layout .layout > * {
    transition-delay: 1600ms;
}
.layout.horizontal > :first-child {
    transform: translate(calc(var(--intro-roll) * -1), 0vw);
}
.layout.horizontal > :last-child {
    transform: translate(var(--intro-roll), 0vw);
}
.layout.vertical { flex-direction: column; }
.layout.vertical > :first-child {
    transform: translate(0vw, calc(var(--intro-roll) * -1));
}
.layout.vertical > :last-child {
    transform: translate(0vw, var(--intro-roll));
}
.layout[data-layout="main"] {
    width: 100vw;
    height: 100vh;
    background-color: var(--background);
    opacity: 0;
    transition: opacity 400ms ease, transform 300ms ease,
        background-color 500ms ease;
}
body.enter .layout[data-layout="main"] { opacity: 1; }
body.enter .layout > * {
    opacity: 1 !important;
    transform: translate(0vw, 0vw) !important;
}

body.exit .layout > * {
    opacity: 0 !important;
    transition-delay: 700ms;
}
body.exit .layout .layout > * {
    transition-delay: 500ms;
}
body.exit .layout .layout .layout > * {
    transition-delay: 300ms;
}
body.exit .layout .layout .layout .layout > * {
    transition-delay: 0ms;
}
body.exit .layout.horizontal > :first-child {
    transform: translate(0vw, calc(var(--intro-roll) * -2)) !important;
}
body.exit .layout.horizontal > :last-child {
    transform: translate(0vw, calc(var(--intro-roll) * 2)) !important;
}
body.exit .layout.vertical > :first-child {
    transform: translate(calc(var(--intro-roll) * -2), 0vw) !important;
}
body.exit .layout.vertical > :last-child {
    transform: translate(calc(var(--intro-roll) * 2), 0vw) !important;
}

.layout > .handle {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.layout > .handle::before {
    content: '';
    background-color: var(--foreground);
}
.layout.horizontal > .handle {
    width: 1.6rem;
    height: 100%;
    margin: 0 -0.8rem;
    cursor: url("data:image/svg+xml,%3Csvg width='49' height='29' viewBox='0 0 49 29' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.8051 3.21953L5.34078 9.83845C1.69858 11.9413 1.69858 17.1983 5.34078 19.3012L16.8051 25.9201C19.7208 27.6035 23.2201 26.2547 24.5 23.492C25.7799 26.2547 29.2792 27.6035 32.1949 25.9201L43.6592 19.3012C47.3014 17.1983 47.3014 11.9413 43.6592 9.83845L32.1949 3.21953C29.2792 1.53613 25.7799 2.88491 24.5 5.64762C23.2201 2.88491 19.7208 1.53613 16.8051 3.21953Z' stroke='white' stroke-opacity='0.1' stroke-width='4'/%3E%3Cpath d='M17.3051 4.08556L5.84078 10.7045C2.86525 12.4224 2.86525 16.7172 5.84078 18.4351L17.3051 25.054C20.2806 26.772 24 24.6246 24 21.1887V7.95089C24 4.51504 20.2806 2.36763 17.3051 4.08556ZM43.1592 10.7045L31.6949 4.08556C28.7194 2.36763 25 4.51504 25 7.95089V21.1887C25 24.6246 28.7194 26.772 31.6949 25.054L43.1592 18.4351C46.1348 16.7172 46.1348 12.4224 43.1592 10.7045Z' fill='%230029FF' stroke='white' stroke-width='2'/%3E%3C/svg%3E%0A") 24 14, col-resize;
}
.layout.horizontal > .handle::before {
    border-left: var(--borders) solid var(--foreground);
    height: 100%;
}
.layout.vertical > .handle {
    width: 100%;
    height: 1.6rem;
    margin: -0.8rem 0;
    cursor: url("data:image/svg+xml,%3Csvg width='29' height='49' viewBox='0 0 29 49' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M25.8412 16.8048L19.2223 5.34054C17.1195 1.69834 11.8624 1.69834 9.75959 5.34054L3.14067 16.8048C1.45722 19.7207 2.80614 23.2201 5.56902 24.4999C2.80614 25.7797 1.45722 29.2791 3.14067 32.1949L9.75959 43.6592C11.8624 47.3014 17.1195 47.3014 19.2223 43.6592L25.8412 32.1949C27.5247 29.2791 26.1757 25.7797 23.4129 24.4999C26.1757 23.2201 27.5247 19.7207 25.8412 16.8048Z' stroke='white' stroke-opacity='0.1' stroke-width='4'/%3E%3Cpath d='M24.9752 17.3048L18.3563 5.84054C16.6383 2.865 12.3435 2.865 10.6256 5.84054L4.0067 17.3048C2.28878 20.2804 4.43618 23.9998 7.87203 23.9998H21.1099C24.5457 23.9998 26.6931 20.2804 24.9752 17.3048ZM18.3563 43.1592L24.9752 31.6949C26.6931 28.7194 24.5457 25 21.1099 25H7.87203C4.43618 25 2.28878 28.7194 4.0067 31.6949L10.6256 43.1592C12.3435 46.1348 16.6383 46.1348 18.3563 43.1592Z' fill='%230029FF' stroke='white' stroke-width='2'/%3E%3C/svg%3E%0A") 14 24, row-resize;
}
.layout.vertical > .handle::before {
    width: 100%;
    border-top: var(--borders) solid var(--foreground);
}

.layout > .fill { flex: 1 1 0; }

.sick_pane {
    display: flex;
    padding: 1.6rem 0;
    height: var(--size);
    font-size: calc(var(--size) * 1.42);
    line-height: 0.7;
    text-align: center;
    font-family: 'Morganite', 'Arial Narrow', sans-serif;
    font-weight: 900;
    white-space: nowrap;
    --translate: 0px;
    --skew: 0deg;
    transform: translateX(calc(var(--offset) * -1)) translateY(2.5%);
}
.layout.horizontal > [data-item="sick_pane"] .sick_pane {
    padding: 0 1.6rem;
    width: var(--size);
    height: auto;
    writing-mode: vertical-rl;
    transform: rotate(180deg) translateX(-2.5%);
}
.sick_pane span {
    display: inline-block;
    padding: 0 1vw;
    transform: translateX(var(--translate)) skewX(var(--skew));
}
.layout.horizontal > [data-item="sick_pane"] .sick_pane span {
    padding: 1vw 0;
    transform: translateY(var(--translate)) skewY(var(--skew));
}

[data-item="splash"] { position: relative; }
.splash {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% - 3.2rem);
    height: calc(100% - 3.2rem);
    margin: 1.6rem;
}

.statement {
    position: relative;
    overflow: hidden;
}
.statement > div {
    position: absolute;
    inset: 1.6rem 2.4rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-family: 'Bebas Neue', 'Morganite', 'Arial Narrow', sans-serif;
    font-weight: 400;
    font-size: clamp(8rem, 10.6vw, 21rem);
    line-height: 0.86;
    text-align: center;
    text-transform: uppercase;
}
.statement span {
    display: block;
    white-space: nowrap;
}

.feature_pane {
    padding: 0.8rem 0;
    font-family: 'Bebas Neue', 'Morganite', 'Arial Narrow', sans-serif;
    font-style: normal;
    font-weight: 400;
    height: var(--size);
    font-size: calc(var(--size) * 1.18);
    line-height: 0.82;
    white-space: nowrap;
    text-align: center;
    text-transform: uppercase;
    --translate: 0px;
    transform: translateY(8.5%) translateY(-1.6rem);
    user-select: none;
}
.layout.horizontal > [data-item="feature_pane"] .feature_pane {
    padding: 0 0.8rem;
    width: var(--size);
    height: auto;
    line-height: 0.65;
    writing-mode: vertical-rl;
    transform: rotate(180deg) translateX(-8.5%) translateX(1.6rem);
}
.feature_pane > div {
    display: inline-block;
    position: relative;
    left: 50%;
    transform: translateX(-75%) translateX(var(--translate));
}
.layout.horizontal > [data-item="feature_pane"] .feature_pane > div {
    position: relative;
    left: unset;
    transform: translateY(25%) translateY(var(--translate));
}
.feature_pane .plus {
    position: relative;
    display: inline-block;
    margin: 0.8vw -1.8vw 0 -1.5vw;
    margin: 0.8vw calc(var(--size) * -0.2) 0 calc(var(--size) * -0.2);
}
.feature_pane .plus::before { content: '+'; }
.layout.horizontal > [data-item="feature_pane"] .feature_pane .plus {
    margin: calc(var(--size) * -0.2) 0.8vw calc(var(--size) * -0.2) 0;
}

.gears {
    position: relative;
    overflow: hidden;
    --rotate: 0deg;
    --gear-size: 100%;
    --global-rotate: 0deg;
}
.gears > div {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    justify-content: center;
    box-sizing: border-box;
    width: min(calc(var(--gear-size) - 3.2rem), 92%);
    background-color: var(--background);
    transform: translate(-50%, -50%) rotate(var(--global-rotate));
    transition: transform 200ms ease;
}
.gear {
    position: relative;
    display: block;
    flex: 1 1 0;
    padding-top: 50%;
    min-width: 10rem;
}
.gear .foreground {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transition: fill 200ms ease;
}
.gear:hover .foreground { fill: var(--accent); }
.gear:first-child { transform: translateX(3%); }
.gear:last-child { transform: translateX(-3%); }
.gear:first-child .foreground {
    transform: rotate(var(--rotate));
}
.gear:last-child .foreground {
    transform: rotate(calc(var(--rotate) / -1)) rotate(22.5deg);
}
.gear .icon {
    position: absolute;
    left: 50%;
    top: 50%;
    width: clamp(3.2rem, 3.6vw, 7.2rem);
    color: white;
    fill: white;
    transform: translate(-50%, -50%) rotate(calc(var(--global-rotate) * -1));
    transition: fill 200ms ease, transform 200ms ease;
}
.gear:hover .icon {
    color: white;
    fill: white;
    transform: translate(-50%, -50%) rotate(calc(var(--global-rotate) * -1))
        scale(1.2);
}

.description {
    position: relative;
    overflow: hidden;
    letter-spacing: 0;
    font-size: 2.4rem;
    line-height: 1.33;
    font-family: 'Sentient', 'Noto Sans JP', serif;
    font-weight: 500;
}
.description > div {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow-y: auto;
    padding: 4.8rem 3.6rem 12rem 3.6rem;
    --scrollbar: var(--foreground);
}
.layout.horizontal > .description {
    padding-bottom: 4.8rem;
}

#contact_form {
    position: fixed;
    z-index: 15;
    box-sizing: border-box;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--form-width);
    font-family: 'Sentient', 'Noto Sans JP', serif;
    font-size: 2.4rem;
    letter-spacing: 0;
    line-height: 1.44;
    color: var(--background);
    background-color: var(--foreground);
    transition: transform 300ms ease;
    transform: translateX(var(--form-width));
}
#contact_form > .content {
    overflow-y: auto;
    box-sizing: border-box;
    height: 100%;
    padding: 5rem 5rem 25rem;
    --scrollbar: var(--background);
    transition: visibility 0ms linear 400ms;
}
#contact_form .hp_field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
#contact_form > .content_submitted {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-columns: 1rem 8.4vw 1rem 1fr 1rem 8.4vw 1rem;
    grid-template-rows: 1rem 8.4vw 1rem 1fr 1rem 8.4vw 1rem;
    text-align: center;
    text-transform: uppercase;
    visibility: hidden;
    opacity: 0;
    background-color: var(--foreground);
    transition: opacity 300ms ease;
}
#contact_form > .content_submitted > div:last-child {
    grid-column: 4;
    grid-row: 4;
    max-width: 42rem;
    margin: auto;
}
#contact_form > .content_submitted > div:not(:last-child) {
    display: flex;
    justify-content: center;
    overflow: hidden;
    font-family: 'Morganite', 'Arial Narrow', sans-serif;
    font-weight: 900;
    font-size: 11.8vw;
    line-height: 0.76;
    white-space: nowrap;
}
#contact_form > .content_submitted > div:nth-child(1) {
    grid-row: 2;
    grid-column-start: 2;
    grid-column-end: 5;

}
#contact_form > .content_submitted > div:nth-child(1) > span {
    padding: 0 0.6vw;
    transform: translateX(var(--translate));
}
#contact_form > .content_submitted > div:nth-child(2) {
    grid-column: 6;
    grid-row-start: 2;
    grid-row-end: 5;
    writing-mode: vertical-lr;
    line-height: 0.67;
}
#contact_form > .content_submitted > div:nth-child(2) > span {
    padding: 0.6vw 0;
    transform: translateY(var(--translate));
}
#contact_form > .content_submitted > div:nth-child(3) {
    grid-row: 6;
    grid-column-start: 4;
    grid-column-end: 7;

}
#contact_form > .content_submitted > div:nth-child(3) > span {
    padding: 0 0.6vw;
    transform: translateX(calc(var(--translate) * -1));
}
#contact_form > .content_submitted > div:nth-child(4) {
    grid-column: 2;
    grid-row-start: 4;
    grid-row-end: 7;
    writing-mode: vertical-lr;
    line-height: 0.67;

}
#contact_form > .content_submitted > div:nth-child(4) > span {
    padding: 0.6vw 0;
    transform: translateY(calc(var(--translate) * -1));
}
#contact_form.submitted > .content { visibility: hidden; }
#contact_form.submitted > .form_btn.form { visibility: hidden; }
#contact_form.submitted > .content_submitted {
    opacity: 1;
    visibility: visible;
}
#contact_form .close {
    display: flex;
    position: absolute;
    z-index: 2;
    top: 5rem;
    right: 5rem;
    width: 6.4rem;
    height: 6.4rem;
    padding: 0;
    background-color: var(--foreground);
    border: 1px solid var(--background);
    border-radius: 999px;
    transition: background-color 150ms ease, border-color 150ms ease;
}
#contact_form .close:hover {
    background-color: var(--accent);
    border-color: var(--accent);
}
#contact_form .close svg {
    width: 100%;
    color: var(--background);
    stroke: var(--background);
    transition: stroke 150ms ease;
}
#contact_form .close:hover svg {
    color: white;
    stroke: white;
}
#contact_form .intro > span { text-transform: uppercase; }
#contact_form .intro > svg {
    display: inline-block;
    vertical-align: text-top;
    width: 4.4rem;
    margin: 1.4rem 0 -1.4rem;
    fill: currentColor;
}
#contact_form a {
    display: inline-block;
    padding: 0 0.8rem;
    margin: 0 -0.8rem;
    text-decoration: none;
    color: inherit;
}
#contact_form a:hover {
    color: white;
    background-color: var(--accent);
}
#contact_form .content > input {
    display: block;
    width: 100%;
    margin-top: 3.2rem;
    padding: 1.6rem 0;
    color: var(--background);
    background-color: transparent;
    border: none;
    border-bottom: 2px solid rgba(var(--background-rgb), 0.3);
    border-radius: 0;
    outline: none;
    transition: border-color 200ms ease;
}
#contact_form .content > input:hover, #contact_form .content > input:focus {
    border-color: var(--background);
}
#contact_form input::placeholder {
    color: inherit;
}
#contact_form .error_label {
    position: relative;
    top: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 0;
    font-size: 1.6rem;
    opacity: 0;
    transition: opacity 200ms ease;
}
#contact_form .error_label svg {
    fill: currentColor;
    width: 3.2rem;
    height: 3.2rem;
    margin-left: 0.8rem;
}
#contact_form input.error + .error_label { opacity: 1; }

@keyframes shake {
    10%, 90% { transform: translate3d(-0.1rem, 0, 0); }
    20%, 80% { transform: translate3d(0.2rem, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-0.4rem, 0, 0); }
    40%, 60% { transform: translate3d(0.4rem, 0, 0); }
}
#contact_form input.error.animate {
    animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
}
#contact_form .options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 5rem 1.5rem -0.5rem -0.5rem;
}
#contact_form .options > * { margin: 0.5rem; }
#contact_form .options > :first-child { margin-right: 3rem; }

#contact_form .gdpr {
    font-size: 1.2rem;
    margin-top: 8rem;
}

.btn_checkbox {
    position: relative;
}
.btn_checkbox input {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}
.btn_checkbox label {
    display: block;
    height: 5.4rem;
    padding: 0 2.4rem;
    line-height: 5.4rem;
    border: 1px solid var(--background);
    border-radius: 999px;
    transition: color 200ms ease, border-color 200ms ease,
        background-color 200ms ease;
}
.btn_checkbox:hover label {
    border-color: var(--accent);
    background-color: var(--accent);
    color: white;
}
.btn_checkbox input:checked + label {
    border-color: var(--background);
    background-color: var(--background);
    color: var(--foreground);
}

.scrollbar {
    scrollbar-color: var(--scrollbar) transparent;
    scrollbar-width: thin;
}
.scrollbar::-webkit-scrollbar {
    height: calc(var(--borders)*5);
    width: calc(var(--borders)*5);
}
.scrollbar::-webkit-scrollbar-track, .scrollbar::-webkit-scrollbar-corner,
    .scrollbar::-webkit-scrollbar-track-piece { background: transparent; }
.scrollbar::-webkit-scrollbar-track-piece { border-radius: 999px; }
.scrollbar::-webkit-scrollbar-thumb {
    background: var(--scrollbar);
    border-radius: 999px;
    border: calc(var(--borders) * 1.75) solid transparent;
    background-clip: content-box;
}

#dbg {
    position: fixed;
    z-index: 100;
    width: 200px;
    padding: 8px;
    border-radius: 4px;
    font-size: 12px;
    font-family: 'Sentient', 'Noto Sans JP', serif;
    background-color: white;
    visibility: hidden;
    box-shadow: 0 0 8px #00000020;
}
#dbg::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: -16px;
    right: -16px;
    bottom: -16px;
    left: -16px;
}
body.enter #dbg {
    visibility: visible;
    transition: transform 300ms ease;
}
#dbg-editors textarea {
    display: block;
    resize: none;
    width: 194px;
    margin-bottom: 8px;
    font-size: 10px;
    font-family: monospace;
}
#dbg-editors + div { display: flex; }
#dbg-error {
    flex: 1;
    padding: 0 8px;
    color: red;
    text-align: right;
    align-self: center;
    visibility: hidden;
}
#dbg-error.visible { visibility: visible; }
#dbg[data-corner="1"] {
    right: 16px;
    bottom: 16px;
    transform: translateX(100%) translateX(10px);
}
#dbg[data-corner="2"] {
    left: 16px;
    bottom: 16px;
    transform: translateX(-100%) translateX(-10px);
}
#dbg[data-corner="3"] {
    left: 16px;
    top: 16px;
    transform: translateX(-100%) translateX(-10px);
}
#dbg[data-corner="4"] {
    right: 16px;
    top: 16px;
    transform: translateX(100%) translateX(10px);
}
#dbg:hover, #dbg:focus-within {
    transform: none;
}