:root {
    --site-acid: #00ff75;
    --site-ink: #020503;
    --site-text: #ecfff1;
    --site-muted: #94ad9b;
    --site-line: rgba(0, 255, 117, .25);
    --site-content-width: 1180px;
    --site-gutter: 60px;
    --site-desktop-available-width: calc(100vw - var(--site-navigation-safe-left));
    --site-page-top: clamp(76px, 11vh, 132px);
    --site-page-bottom: 112px;
}

html {
    min-height: 100%;
    overflow-y: auto;
    overflow-x: clip;
    scrollbar-gutter: auto;
    scrollbar-width: none;
    background: var(--site-ink);
}

html::-webkit-scrollbar { display: none; width: 0; height: 0; }

[hidden] { display: none !important; }

body:has(dialog[open]) { overflow: hidden !important; }

body.site-page { user-select: none; }

body.site-page *,
body.site-page *::before,
body.site-page *::after { box-sizing: border-box; }

body.site-page :where(main, section, article, aside, header, footer, nav, form, fieldset, dialog) {
    min-width: 0;
    max-width: 100%;
}

body.site-page :where(img, svg, video, canvas, iframe) {
    max-width: 100%;
}

body.site-page :where(input, textarea, [contenteditable="true"]) { user-select: text; }

body.site-page * {
    scrollbar-width: none;
}

body.site-page *::-webkit-scrollbar { display: none; width: 0; height: 0; }

body.site-page :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) {
    min-width: 0;
    border: 1px solid var(--site-line);
    border-radius: 0;
    outline: 0;
    background-color: #031008;
    color: var(--site-text);
    caret-color: var(--site-acid);
    box-shadow: none;
}

body.site-page select {
    appearance: none;
    padding-right: 38px !important;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--site-acid) 50%),
        linear-gradient(135deg, var(--site-acid) 50%, transparent 50%);
    background-position:
        calc(100% - 16px) calc(50% - 2px),
        calc(100% - 11px) calc(50% - 2px);
    background-repeat: no-repeat;
    background-size: 5px 5px, 5px 5px;
}

body.site-page option {
    background: #031008;
    color: var(--site-text);
}

body.site-page :where(input, select, textarea):focus-visible {
    border-color: var(--site-acid);
    box-shadow: 0 0 0 1px rgba(0, 255, 117, .2), 0 0 24px rgba(0, 255, 117, .1);
}

body.site-page :where(input[type="checkbox"], input[type="radio"], input[type="range"]) {
    accent-color: var(--site-acid);
}

body.site-page:not([data-screen-preset]) {
    min-height: 100svh;
    overflow-x: clip;
    background-color: var(--site-ink);
    background-image:
        radial-gradient(circle at 86% 7%, rgba(0, 255, 117, .17), transparent 34%),
        radial-gradient(circle at 9% 93%, rgba(0, 112, 50, .11), transparent 38%);
    background-attachment: fixed;
    background-repeat: no-repeat;
}

body.site-page--home,
body.site-page--simulations,
body.site-page--profile { --site-content-width: 1120px; }
body.site-page--mid { --site-content-width: 900px; }
body.site-page--dead-reels { --site-content-width: 1040px; }
body.site-page--rocket { --site-content-width: 1380px; }

.site-page:not(.site-page--map):not(.site-page--admin) > main {
    width: min(var(--site-content-width), calc(var(--site-desktop-available-width) - (var(--site-gutter) * 2)));
    max-width: var(--site-content-width);
    margin-right: 0;
    margin-left: max(
        calc(var(--site-navigation-safe-left) + var(--site-gutter)),
        calc((100vw + var(--site-navigation-safe-left) - var(--site-content-width)) / 2)
    );
}

body.site-page--profile { padding-right: 0; padding-left: 0; }

.site-page > :where(.page, .stage) {
    padding-top: var(--site-page-top);
    padding-bottom: var(--site-page-bottom);
}

.site-page > :is(.page, .stage, .box) > :is(.title, h1:first-child) {
    margin-top: 0;
    margin-bottom: clamp(52px, 7vw, 82px);
    font-size: clamp(58px, 11vw, 156px);
    line-height: .76;
    letter-spacing: -.1em;
    overflow-wrap: normal;
    word-break: normal;
}

.site-page--profile,
.site-page--mid {
    display: block;
    padding: 0;
}

.pass,
.passport {
    margin-top: var(--site-page-top);
    margin-bottom: var(--site-page-bottom);
}

.site-link-icon {
    display: block;
    flex: 0 0 auto;
    object-fit: contain;
}

.site-link-icon--acid {
    filter: brightness(0) saturate(100%) invert(77%) sepia(92%) saturate(1866%) hue-rotate(84deg) brightness(113%) contrast(112%) drop-shadow(0 0 10px rgba(0, 255, 117, .42));
}

.site-link-icon--mono { filter: grayscale(1) contrast(1.2); }
.site-link-icon--mask {
    background: var(--site-icon-color, var(--site-acid));
    -webkit-mask: var(--site-icon-image) center / 68% 68% no-repeat;
    mask: var(--site-icon-image) center / 68% 68% no-repeat;
}
.site-link-icon--empty { background: rgba(0, 255, 117, .05); }
.link .site-link-icon { width: 39px; height: 39px; border: 0; }

.other-links { margin-top: 34px; border-top: 1px solid var(--site-line); }
.other-links summary {
    width: fit-content;
    padding: 18px 0;
    color: var(--site-acid);
    font: 700 12px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
    cursor: pointer;
    list-style: none;
}
.other-links summary::-webkit-details-marker { display: none; }
.other-links summary::after { margin-left: 10px; content: '+'; }
.other-links[open] summary::after { content: '−'; }

@media (max-width: 700px) {
    :root {
        --site-gutter: 19px;
        --site-page-top: 72px;
        --site-page-bottom: 88px;
    }

    .site-page:not(.site-page--map):not(.site-page--admin) > main {
        width: min(var(--site-content-width), calc(100vw - (var(--site-gutter) * 2)));
        margin-right: auto;
        margin-left: auto;
    }

    body.site-page.site-page--profile:not(.site-page--map):not(.site-page--admin) > main.profile-social,
    body.site-page.site-page--profile:not(.site-page--map):not(.site-page--admin) > main.profile-section-page {
        width: 100%;
        max-width: none;
        margin-inline: 0;
    }

    .site-page > :is(.page, .stage, .box) > :is(.title, h1:first-child) {
        margin-bottom: 50px;
        font-size: clamp(38px, 13.3vw, 94px);
        line-height: .8;
    }

    .pass,
    .passport {
        margin-top: var(--site-page-top);
        margin-bottom: var(--site-page-bottom);
    }
}

@media (prefers-reduced-motion: reduce) {
    body.site-page:not([data-screen-preset]) {
        background-attachment: scroll;
    }
}