/* STUFF */

:root {
    --gum: #9fc6a6;
    --chi: #6fd3d0;
    --pah: #850200;
    --mox: #edebb0;
    --jib: #facdda;
    --ace: #b07fc8;

    --white: #ffffff;
    --gray: #8b8b8b;
    --black: #000000;
}

::selection {
    background: #FFFFFF; 
    color: #000000;
}

::-moz-selection {
    background: #FFFFFF; 
    color: #000000;
}

/* FONT */

@font-face {
    font-family: OpenDyslexic;
    src: url("fonts/OpenDyslexic-Regular.woff2") format("woff2");
    font-display: swap;
}

/* CORE */

*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    color: var(--white);
    font-family: OpenDyslexic;
    margin: 0px;
}

html {
    height: 100%;
    background-color: var(--black);
}

body {
    min-height: 100%;

    background-color: var(--black);
    background-image: url("assets/klPr56.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

a {
    text-decoration: none;
}

img {
    display: block;
}

button {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
}

:focus-visible {
    outline: 4px solid var(--chi);
    outline-offset: calc(4 * var(--u, 1px));
}

.darkness {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(ellipse at center, transparent 35%, rgba(0, 0, 0, 0.85) 100%);
}

.darkness-fixed {
    position: fixed;
}

/* boxthing */

.boxthing {
    position: fixed;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4vh 6vw;
    background: rgba(0, 0, 0, 0.45);
}

.boxthing.hide {
    display: none;
}

body.boxthing-open {
    overflow: hidden;
}

.boxthing_middle {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    max-height: 100%;
}

.boxthing_media {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2), 0 8px 32px rgba(0, 0, 0, 0.35);
}

.boxthing_media.hide {
    display: none;
}

#boxthing_image {
    cursor: pointer;
}

.boxthing_close,
.boxthing_prev,
.boxthing_next {
    position: fixed;
    z-index: 30;
    color: var(--white);
    font-size: 42px;
    line-height: 1;
    cursor: pointer;
    padding: 8px 16px;
    opacity: 0.75;
}

.boxthing_close:hover,
.boxthing_prev:hover,
.boxthing_next:hover,
.boxthing_close:focus-visible,
.boxthing_prev:focus-visible,
.boxthing_next:focus-visible {
    opacity: 1;
}

.boxthing_close {
    top: 12px;
    right: 16px;
    font-size: 48px;
}

.boxthing_prev {
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 56px;
}

.boxthing_next {
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 56px;
}

@media (max-width: 900px) and (orientation: portrait) {
    .boxthing {
        padding: 0;
    }

    .boxthing_middle {
        position: absolute;
        z-index: 1;
        top: 50%;
        left: 50%;
        width: 100vh;
        height: 100vw;
        max-width: none;
        max-height: none;
        transform: translate(-50%, -50%) rotate(90deg);
    }

    .boxthing_media {
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
    }

    .boxthing_close,
    .boxthing_prev,
    .boxthing_next {
        position: fixed;
        z-index: 30;
    }

    .boxthing_prev {
        top: max(8px, env(safe-area-inset-top));
        left: 50%;
        right: auto;
        bottom: auto;
        transform: translateX(-50%) rotate(90deg);
    }

    .boxthing_next {
        top: auto;
        bottom: max(8px, env(safe-area-inset-bottom));
        left: 50%;
        right: auto;
        transform: translateX(-50%) rotate(90deg);
    }

    .boxthing_close {
        top: auto;
        right: max(12px, env(safe-area-inset-right));
        bottom: max(12px, env(safe-area-inset-bottom));
        left: auto;
        transform: rotate(90deg);
    }
}

@media (max-width: 900px) and (orientation: landscape) {
    .boxthing {
        padding: 2vh 8vw;
    }

    .boxthing_middle {
        z-index: 1;
    }

    .boxthing_media {
        max-width: 92vw;
        max-height: 92vh;
    }

    .boxthing_close,
    .boxthing_prev,
    .boxthing_next {
        position: fixed;
        z-index: 30;
    }
}

.column {
    --u: min(1px, calc(100vw / 1600), calc(100vh / 1060));

    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-height: 100vh;
    min-height: 100svh;
    padding: calc(24 * var(--u)) 0;
}

/* HEADER */

.header_text {
    width: calc(976 * var(--u));
    height: auto;
    margin-bottom: calc(16 * var(--u));
}

/* MEDIA */

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

.media_wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.shot_nav {
    display: none;
}

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

    width: calc(1200 * var(--u));
    aspect-ratio: 1200 / 550;

    background-image: url("assets/video_border.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    margin: 0px calc(16 * var(--u));
    transform: skewY(2deg);
}

.media {
    position: relative;
    width: 74%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.media > video,
.media > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.media > .hide {
    display: none;
}

.screenshot_large {
    cursor: zoom-in;
}

.divider {
    height: calc(48 * var(--u));
}

.poster {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 0;
    padding: 0;
    background: none;
}

.poster_bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.poster_play {
    position: relative;
    width: calc(96 * var(--u));
    height: auto;
    image-rendering: pixelated;
    filter: drop-shadow(0 0 calc(8 * var(--u)) rgba(0, 0, 0, 0.85));
}

.poster.hide {
    display: none !important;
}

/* SCREENSHOTS */

.screeshot-container-wrapper {
    display: flex;
    justify-content: space-around;
    width: 100%;
}

/* sneaky website comment - watermeloncebula 8/8/2026 */
.screenshot-container {
    --tilt: 0deg;

    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;

    width: calc(198 * var(--u));
    height: calc(116 * var(--u));

    background-image: url("assets/new_screenshot_border.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    transform: rotate(var(--tilt));
    cursor: pointer;
}

.attach_rotation { --tilt: 7deg; }
.attach_rotation_two { --tilt: -13deg; }
.attach_rotation_three { --tilt: 22deg; }

.screenshot-container.focused {
    background-image: url("assets/focused_screenshot_border.png");
}

.screenshot {
    width: calc(130 * var(--u));
    height: calc(65 * var(--u));
    object-fit: cover;
}

.trailer_thumb {
    image-rendering: pixelated;
}

.trailer_play {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(36 * var(--u));
    height: auto;
    image-rendering: pixelated;
    pointer-events: none;
    filter: drop-shadow(0 0 calc(4 * var(--u)) rgba(0, 0, 0, 0.9));
}

/* CHARACTERS */

.left-character,
.right-character {
    width: calc(350 * var(--u));
    flex: none;
}

.left-character {
    margin-right: calc(-177 * var(--u));
}

.right-character {
    margin-left: calc(-150 * var(--u));
}

.left-character img,
.right-character img {
    width: 100%;
    height: auto;
}

/* CTA (CALL TO ACTION) */

.cta_wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: calc(40 * var(--u));
    padding-bottom: calc(5 * var(--u));
}

.cta {
    display: flex;
    justify-content: space-around;
    gap: calc(24 * var(--u));
}

.cta_button {
    display: flex;
    justify-content: center;
    align-items: center;

    box-sizing: content-box;
    width: calc(394 * var(--u));
    height: calc(80 * var(--u));
    padding: calc(16 * var(--u)) calc(20 * var(--u));
    margin: calc(-16 * var(--u)) calc(-20 * var(--u));

    background-image: url("assets/red_panel_gif.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-origin: content-box;
    background-clip: content-box;
    font-size: calc(30 * var(--u));
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: transform 0.12s steps(3, end);
}

.cta_button_white {
    background-image: url("assets/teal_panel_gif.png");
}

.cta_button_red {
    background-image: url("assets/purple_panel_gif.gif");
    z-index: 2;
}

.cta_button_contact {
    width: calc(300 * var(--u));
}

.cta_button_press {
    width: calc(300 * var(--u));
}

.cta_button:hover,
.cta_button:focus-visible,
.cta_button_wrapper:hover .cta_button,
.cta_button_wrapper:focus-within .cta_button,
.cta_button_wrapper_two:hover .cta_button,
.cta_button_wrapper_two:focus-within .cta_button,
.cta_button_wrapper_three:hover .cta_button,
.cta_button_wrapper_three:focus-within .cta_button {
    background-image: url("assets/wide_white_animated_panel.gif");
}

.steam_label {
    display: inline-block;
}

.steam_label.swapping {
    animation: label_swap 0.18s steps(2, end);
}

@keyframes label_swap {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}

.cta_button_wrapper,
.cta_button_wrapper_two,
.cta_button_wrapper_three {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.cta_button_wrapper .cta_button {
    transform: rotate(7deg);
}

.cta_button_wrapper:hover .cta_button,
.cta_button_wrapper:focus-within .cta_button {
    transform: rotate(-4deg);
}

.cta_button_wrapper_two {
    --steam-tilt: -4deg;
    --steam-hover: 7deg;
}

.cta_button_wrapper_two .cta_button {
    transform: rotate(var(--steam-tilt));
}

.cta_button_wrapper_two.flipped {
    --steam-tilt: 7deg;
    --steam-hover: -4deg;
}

.cta_button_wrapper_two:hover .cta_button,
.cta_button_wrapper_two:focus-within .cta_button {
    transform: rotate(var(--steam-hover));
}

.cta_button_wrapper_three .cta_button {
    transform: rotate(4deg);
}

.cta_button_wrapper_three:hover .cta_button,
.cta_button_wrapper_three:focus-within .cta_button {
    transform: rotate(-6deg);
}

/* NAVIGATION */

.navigation_wrapper {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}

.navigation {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-right: calc(64 * var(--u));
    z-index: 2;
}

.navigation_button {
    display: flex;
    justify-content: center;
    align-items: center;

    width: calc(160 * var(--u));
    height: calc(160 * var(--u));

    background-image: url("assets/square_button.gif");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    cursor: pointer;
    z-index: 2;
}

.navigation_button_icon {
    width: calc(40 * var(--u));
    height: auto;
    image-rendering: pixelated;
    z-index: 2;
}

.stuff {
    font-size: clamp(15px, 0.45vw + 11px, 18px);
    line-height: 1.75;
    color: var(--white);
}

.stuff p + p {
    margin-top: 1em;
}

.subtitle {
    font-size: clamp(22px, 1vw + 14px, 34px);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 0.8em;
}

.row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 18px;
    margin-bottom: 0.8em;
}

.row .subtitle {
    margin-bottom: 0;
}

.row .copy_button {
    min-width: 140px;
}

.row .copy_text {
    min-width: 118px;
}

.note {
    color: var(--gray);
    font-size: 0.85em;
}

.chi { color: var(--chi); }
.ace { color: var(--ace); }

/* PAGES (press + contact) */

.page {
    --u: 1px;

    position: relative;
    z-index: 1;
    max-width: 1000px;
    margin: 0 auto;
    padding: clamp(40px, 7vh, 90px) 24px clamp(80px, 12vh, 160px);
}

.page_top {
    margin-bottom: clamp(40px, 7vh, 80px);
}

.page_top .header_text {
    width: min(100%, 520px);
    height: auto;
    margin-bottom: 16px;
}

.page_top .note {
    margin-top: 10px;
    max-width: 36em;
}

.page_bottom {
    display: flex;
    justify-content: center;
    margin-top: clamp(48px, 8vh, 96px);
}

.title {
    font-size: clamp(26px, 3vw + 14px, 56px);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.page section + section {
    margin-top: clamp(48px, 8vh, 96px);
}

.page a {
    overflow-wrap: anywhere;
}

.screenshots {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
    gap: 16px;
    margin-top: 1.5em;
}

.screenshots a {
    --tilt: 0deg;

    display: block;
    border: 1px solid #1d1d1d;
    transform: rotate(var(--tilt));
}

.screenshots a.attach_rotation { --tilt: 4deg; }
.screenshots a.attach_rotation_two { --tilt: -6deg; }
.screenshots a.attach_rotation_three { --tilt: 9deg; }

.screenshots img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.contacts {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 1.2em;
}

.facts {
    margin: 1.2em 0 0;
    max-width: 820px;
}

.fact {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 8px 28px;
    padding: 12px 0 14px;
    position: relative;
}

.fact::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 8px;
    background-image: url("assets/divider_red.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    opacity: 0.75;
    pointer-events: none;
}

.facts dt {
    color: var(--chi);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-size: 13px;
    line-height: 1.6;
}

.facts dd {
    margin: 0;
    min-width: 0;
    font-size: 0.95em;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.text_link {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(255, 255, 255, 0.3);
}

.text_link:hover,
.text_link:focus-visible {
    text-decoration-color: var(--chi);
}

.pitch {
    max-width: 820px;
    margin-top: 1.6em;
}

.pitch_top {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 0.5em;
}

.pitch_label {
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-size: 13px;
}

.pitch_text p {
    margin: 0;
    line-height: 1.7;
}

.pitch_text p + p {
    margin-top: 0.9em;
}

.pitch .note {
    margin-top: 0.7em;
}

.copy_button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 116px;
    min-height: 52px;
    padding: 8px 10px;
    border: 0;
    background: none;
    color: var(--chi);
    font: inherit;
    font-size: 13px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
}

.copy_text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 92px;
    height: 36px;
    padding: 0 18px;
    background-image: url("assets/black_panel.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
    transform: rotate(-4deg);
    transition: transform 0.12s steps(3, end);
}

.copy_button:hover .copy_text,
.copy_button:focus-visible .copy_text {
    background-image: url("assets/red_panel_gif.gif");
    color: var(--white);
    transform: rotate(5deg) scale(1.06);
}

.pitch:nth-of-type(even) .copy_text {
    transform: rotate(3deg);
}

.pitch:nth-of-type(even) .copy_button:hover .copy_text,
.pitch:nth-of-type(even) .copy_button:focus-visible .copy_text {
    transform: rotate(-6deg) scale(1.06);
}

.features {
    display: flex;
    flex-direction: column;
    gap: 22px;
    margin-top: 1.2em;
    max-width: 780px;
}

.feature {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.feature:nth-child(even) {
    align-items: flex-end;
}

.feature:nth-child(even) .feature_text {
    text-align: right;
}

.feature .feature_name {
    width: min(100%, 420px);
}

.feature:nth-child(odd) .feature_name {
    transform: rotate(-3deg);
}

.feature:nth-child(even) .feature_name {
    transform: rotate(4deg);
}

.feature:nth-child(3n) .feature_name {
    transform: rotate(-6deg);
}

.feature_text {
    max-width: 520px;
    margin: 0;
    color: var(--white);
    font-size: 0.88em;
    line-height: 1.5;
    opacity: 0.88;
}

.feature_name {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    min-height: 68px;
    padding: 14px 44px;
    background-image: url("assets/black_panel.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    color: inherit;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 16px;
}

.panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 14px 40px;
    background-image: url("assets/black_panel.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    color: inherit;
}

.label {
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-size: 14px;
}

.detail {
    color: var(--white);
    font-size: 0.95em;
    line-height: 1.45;
    overflow-wrap: anywhere;
    opacity: 0.88;
}

.assets {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 20px 18px;
    margin-top: 1.2em;
}

.asset {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: inherit;
    cursor: pointer;
}

.asset img {
    max-width: 100%;
    max-height: 160px;
    width: auto;
    height: auto;
    object-fit: contain;
    image-rendering: pixelated;
    border: 1px solid #3a3a3a;
    transition: transform 0.12s steps(3, end);
}

.asset .asset_logo {
    image-rendering: auto;
}

.asset:hover img,
.asset:focus-visible img {
    transform: rotate(-3deg) scale(1.04);
}

.asset_label {
    color: var(--gray);
    font-size: 0.82em;
    line-height: 1.35;
    text-align: center;
}

.copy_list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 0.7em;
    max-width: 820px;
}

.copy_row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 6px;
}

.copy_row .note {
    overflow-wrap: anywhere;
    min-width: 0;
    font-size: 0.8em;
}

.copy_row .copy_button {
    flex: none;
    min-width: 88px;
    min-height: 36px;
    padding: 2px 4px;
}

.copy_row .copy_text {
    min-width: 72px;
    height: 28px;
    padding: 0 12px;
    font-size: 11px;
}

.contact {
    display: flex;
    align-items: center;
    gap: 0;
    color: inherit;
}

.contact_icon {
    position: relative;
    z-index: 1;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin-right: -22px;
    background-image: url("assets/square_button.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    transition: transform 0.12s steps(3, end);
}

.contact_icon img {
    width: 28px;
    height: auto;
    image-rendering: pixelated;
    transition: transform 0.12s steps(3, end);
}

.contact .panel {
    flex: 1;
    min-width: 0;
    padding: 14px 36px 14px 40px;
    background-image: url("assets/black_panel.png");
    transition: none;
}

.contact:hover .panel,
.contact:focus-visible .panel {
    background-image: url("assets/teal_panel_gif.gif");
}

.contact:hover .contact_icon,
.contact:focus-visible .contact_icon {
    transform: rotate(-45deg) scale(1.08);
}

.contact:hover .contact_icon img,
.contact:focus-visible .contact_icon img {
    transform: rotate(45deg) scale(1.25);
}

/* ANIMATION */

@keyframes fade_in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.column,
.page {
    animation: fade_in 0.22s ease-out;
}

.navigation_button,
.cta_button,
.screenshot-container,
.navigation_button_icon {
    transition: transform 0.12s steps(3, end);
}

.navigation_button:hover,
.navigation_button:focus-visible {
    transform: rotate(-45deg) scale(1.1);
}

.navigation_button:hover > .navigation_button_icon,
.navigation_button:focus-visible > .navigation_button_icon {
    transform: rotate(45deg) scale(1.3);
}

.screenshot-container:hover {
    transform: rotate(var(--tilt)) scale(1.08);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }

    .steam_label.swapping {
        animation: none !important;
    }
}

/* VIBEPOWERED MOBILE VIEW HAHAhaha (what is happening here?) */


@media (max-width: 900px) {
    body {
        background-attachment: scroll;
    }

    .darkness {
        display: none;
    }

    .column {
        --u: min(1.8px, calc(100vw / 500), calc(100svh / 800));

        padding: calc(26 * var(--u)) 0 calc(30 * var(--u));
        overflow: hidden;
    }

    .column .header_text {
        width: calc(470 * var(--u));
        margin-bottom: calc(30 * var(--u));
    }

    .core_wrapper {
        position: relative;
        width: 100%;
        justify-content: center;
        margin-top: auto;
        margin-bottom: calc(42 * var(--u));
    }

    .left-character,
    .right-character {
        position: absolute;
        z-index: 0;
        margin: 0;
        opacity: 0.5;
    }

    .left-character {
        top: calc(-46 * var(--u));
        left: calc(-24 * var(--u));
        width: auto;
        height: 46svh;
    }

    .left-character img {
        width: auto;
        height: 100%;
    }

    .right-character {
        display: none;
    }

    .media_wrapper {
        position: relative;
        z-index: 1;
        width: 100%;
    }

    .video_wrapper {
        width: calc(440 * var(--u));
        margin: 0;
        transform: skewY(1.5deg);
    }

    .divider,
    .screeshot-container-wrapper {
        display: none;
    }

    .shot_nav {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: calc(10 * var(--u));
        margin-top: calc(16 * var(--u));
    }

    .shot_arrow {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: none;
        width: calc(46 * var(--u));
        height: calc(46 * var(--u));
        color: var(--white);
        font-size: calc(46 * var(--u));
        line-height: 1;
        opacity: 0.75;
        cursor: pointer;
    }

    .shot_arrow:active {
        opacity: 1;
        transform: scale(1.2);
    }

    .shot_dots {
        display: flex;
        justify-content: center;
        gap: calc(6 * var(--u));
    }

    .shot_dot {
        display: flex;
        align-items: center;
        justify-content: center;
        width: calc(32 * var(--u));
        height: calc(38 * var(--u));
        cursor: pointer;
    }

    .shot_dot img {
        width: calc(16 * var(--u));
        height: auto;
        image-rendering: pixelated;
        opacity: 0.45;
    }

    .shot_dot.on img {
        opacity: 1;
        transform: scale(1.5);
    }

    .cta_wrapper {
        position: relative;
        z-index: 1;
        width: 100%;
        margin-top: auto;
    }

    .cta {
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: calc(22 * var(--u)) calc(20 * var(--u));
        width: 100%;
    }

    .cta .cta_button_wrapper_two {
        order: -1;
        flex-basis: 100%;
    }

    .cta_button {
        width: calc(220 * var(--u));
        height: calc(68 * var(--u));
        font-size: calc(23 * var(--u));
    }

    .cta .cta_button_wrapper_two .cta_button {
        width: calc(440 * var(--u));
        height: calc(96 * var(--u));
        font-size: calc(34 * var(--u));
    }

    .cta_button_wrapper .cta_button {
        transform: rotate(3deg);
    }

    .cta_button_wrapper_three .cta_button {
        transform: rotate(-3deg);
    }

    .cta_wrapper::after {
        content: "";
        position: absolute;
        z-index: -1;
        right: calc(-14 * var(--u));
        bottom: calc(-30 * var(--u));
        width: 16svh;
        height: 30svh;
        opacity: 0.5;
        background: url("assets/right.png") no-repeat center / contain;
    }

    .navigation_wrapper {
        position: static;
        transform: none;
        margin-top: calc(40 * var(--u));
    }

    .navigation {
        flex-direction: row;
        justify-content: center;
        gap: calc(14 * var(--u));
        margin-right: 0;
    }

    .navigation_button {
        width: calc(106 * var(--u));
        height: calc(106 * var(--u));
    }

    .navigation_button_icon {
        width: calc(31 * var(--u));
    }

    .page {
        --u: min(1px, calc((100vw - 32px) / 420));
        max-width: 100%;
        padding: 28px 16px 64px;
    }

    .page_top .header_text {
        width: min(100%, calc(420 * var(--u)));
        margin-bottom: 12px;
    }

    .title {
        font-size: clamp(22px, 6vw, 32px);
        line-height: 1.25;
    }

    .subtitle {
        font-size: clamp(18px, 5vw, 24px);
    }

    .page section + section {
        margin-top: 30px;
    }

    .page_bottom {
        margin-top: 40px;
    }

    .page_bottom .cta_button {
        width: calc(380 * var(--u));
        height: calc(85 * var(--u));
        font-size: calc(28 * var(--u));
    }

    .fact {
        grid-template-columns: 1fr;
    }

    .screenshots {
        grid-template-columns: 1fr 1fr;
        gap: 14px 12px;
    }

    .screenshots a.attach_rotation { --tilt: 2deg; }
    .screenshots a.attach_rotation_two { --tilt: -3deg; }
    .screenshots a.attach_rotation_three { --tilt: 3deg; }

    .fact {
        gap: 2px;
        padding: 12px 0;
    }

    .pitch_top {
        gap: 12px;
    }

    .feature,
    .feature:nth-child(even) {
        align-items: stretch;
    }

    .feature:nth-child(even) .feature_text {
        text-align: left;
    }

    .feature .feature_name,
    .feature:nth-child(odd) .feature_name,
    .feature:nth-child(even) .feature_name,
    .feature:nth-child(3n) .feature_name {
        width: 100%;
        transform: none;
    }

    .feature_name {
        min-height: 50px;
        padding: 10px 22px;
    }

    .panel {
        padding: 12px 18px;
    }

    .label {
        font-size: 13px;
    }

    .detail {
        font-size: 0.88em;
    }

    .assets {
        grid-template-columns: 1fr 1fr;
        gap: 16px 12px;
    }

    .asset img {
        max-height: 120px;
    }

    .fact {
        padding: 12px 0 16px;
    }

    .copy_button {
        min-width: 104px;
        min-height: 48px;
        font-size: 12px;
    }

    .copy_text {
        min-width: 80px;
        height: 32px;
    }

    .copy_list {
        margin-top: 0.55em;
        gap: 2px;
    }

    .copy_row:not(.copy_row_mail) {
        display: none;
    }

    .copy_row {
        gap: 2px 4px;
    }

    .copy_row .copy_button {
        min-width: 96px;
        min-height: 44px;
        padding: 4px;
    }

    .copy_row .copy_text {
        min-width: 72px;
        height: 36px;
        font-size: 12px;
    }

    .contact {
        gap: 0;
    }

    .contact_icon {
        width: 58px;
        height: 58px;
        margin-right: -18px;
    }

    .contact_icon img {
        width: 22px;
    }

    .contact .panel {
        padding-left: 30px;
    }
}

@media (max-width: 900px) and (min-height: 720px) {
    .column {
        --u: min(1.8px, calc(100vw / 500), calc(100svh / 940));
    }

    .video_wrapper {
        width: calc(470 * var(--u));
    }

    .cta {
        flex-direction: column;
        gap: calc(18 * var(--u));
    }

    .cta .cta_button_wrapper_two {
        flex-basis: auto;
    }

    .cta_button,
    .cta .cta_button_wrapper_two .cta_button {
        width: calc(440 * var(--u));
        height: calc(88 * var(--u));
        font-size: calc(30 * var(--u));
    }

    .cta_button_wrapper .cta_button {
        transform: rotate(7deg);
    }

    .cta_button_wrapper_three .cta_button {
        transform: rotate(4deg);
    }
}

@media (max-width: 520px) {
    .page {
        padding: 24px 14px 56px;
    }
}