/* =========================================================
   ROOT // SYSTEMS
   Global Stylesheet
========================================================= */


/* =========================================================
   VARIABLES
========================================================= */

:root {

    --bg: #080a09;
    --bg-soft: #0d100e;
    --bg-panel: #101411;

    --text: #d7ddd8;
    --text-soft: #89938c;
    --text-dim: #5e6861;

    --green: #63ff8b;
    --green-soft: #2ecf63;

    --amber: #e5b567;
    --red: #ff6b6b;
    --blue: #73b7ff;

    --line: #242b26;
    --line-soft: #171c19;

    --max-width: 1240px;

    --mono:
        "SFMono-Regular",
        "Cascadia Code",
        "Roboto Mono",
        "Liberation Mono",
        Consolas,
        monospace;

    --sans:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

}



/* =========================================================
   RESET
========================================================= */

*,
*::before,
*::after {

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    margin: 0;

    background: var(--bg);

    color: var(--text);

    font-family: var(--sans);

    line-height: 1.7;

    min-height: 100vh;

}


img {

    max-width: 100%;

    height: auto;

}


a {

    color: inherit;

}


button,
input,
textarea,
select {

    font: inherit;

}



/* =========================================================
   TYPOGRAPHY
========================================================= */

h1,
h2,
h3,
h4 {

    margin-top: 0;

    color: var(--text);

    line-height: 1.15;

    font-weight: 600;

}


h1 {

    margin-bottom: 24px;

    font-size:
        clamp(2.5rem, 6vw, 5.5rem);

    letter-spacing:
        -.045em;

}


h2 {

    margin-bottom: 24px;

    font-size:
        clamp(2rem, 4vw, 3.4rem);

    letter-spacing:
        -.035em;

}


h3 {

    margin-bottom: 12px;

    font-size:
        clamp(1.15rem, 2vw, 1.5rem);

}


p {

    margin:
        0 0 18px;

}


strong {

    color: var(--text);

}


.green {

    color: var(--green);

}


.mono {

    font-family: var(--mono);

}


.eyebrow {

    margin-bottom: 18px;

    color: var(--text-soft);

    font-family: var(--mono);

    font-size: 11px;

    letter-spacing: .14em;

    text-transform: uppercase;

}



/* =========================================================
   CONTAINER
========================================================= */

.container {

    width: min(
        calc(100% - 48px),
        var(--max-width)
    );

    margin:
        0 auto;

}



/* =========================================================
   HEADER
========================================================= */

header {

    position: sticky;

    top: 0;

    z-index: 900;

    background:
        rgba(8,10,9,.94);

    border-bottom:
        1px solid var(--line);

    backdrop-filter:
        blur(10px);

}


.head {

    position: relative;

    width: min(
        calc(100% - 32px),
        1500px
    );

    min-height: 68px;

    margin: 0 auto;

    display: flex;

    align-items: center;

    gap: 20px;

}


.brand {

    flex:
        0 0 auto;

    color:
        var(--text);

    font-family:
        var(--mono);

    font-size:
        14px;

    font-weight:
        700;

    letter-spacing:
        .08em;

    text-decoration:
        none;

    white-space:
        nowrap;

}


.brand:hover {

    color:
        var(--green);

}



/* =========================================================
   SHARED NAVIGATION
========================================================= */

.site-nav {

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    flex:
        1;

    min-width:
        0;

}


.site-nav > a,
.nav-dropdown-toggle {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        6px;

    padding:
        9px 10px;

    border:
        1px solid transparent;

    background:
        transparent;

    color:
        var(--text-soft);

    font-family:
        var(--mono);

    font-size:
        10px;

    line-height:
        1.2;

    letter-spacing:
        .05em;

    text-decoration:
        none;

    white-space:
        nowrap;

    cursor:
        pointer;

    transition:
        color .15s ease,
        background .15s ease,
        border-color .15s ease;

}


.site-nav > a:hover,
.nav-dropdown-toggle:hover {

    color:
        var(--green);

    background:
        rgba(255,255,255,.025);

}


.site-nav > a.active,
.nav-dropdown-toggle.active {

    color:
        var(--green);

}



/* =========================================================
   NAV DROPDOWNS
========================================================= */

.nav-dropdown {

    position:
        relative;

}


.nav-dropdown-toggle {

    appearance:
        none;

}


.nav-arrow {

    color:
        var(--text-dim);

    font-size:
        10px;

    line-height:
        1;

    transition:
        transform .15s ease;

}


.nav-dropdown.open
.nav-arrow {

    transform:
        rotate(180deg);

    color:
        var(--green);

}


.nav-dropdown-menu {

    position:
        absolute;

    top:
        calc(100% + 8px);

    left:
        0;

    min-width:
        205px;

    padding:
        6px;

    background:
        var(--bg-panel);

    border:
        1px solid var(--line);

    box-shadow:
        0 18px 45px rgba(0,0,0,.45);

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

    transform:
        translateY(-5px);

    transition:
        opacity .15s ease,
        transform .15s ease,
        visibility .15s ease;

}


.nav-dropdown.open
.nav-dropdown-menu {

    opacity:
        1;

    visibility:
        visible;

    pointer-events:
        auto;

    transform:
        translateY(0);

}


.nav-dropdown-menu a {

    display:
        block;

    padding:
        10px 12px;

    color:
        var(--text-soft);

    font-family:
        var(--mono);

    font-size:
        11px;

    line-height:
        1.3;

    text-decoration:
        none;

    letter-spacing:
        .04em;

}


.nav-dropdown-menu a:hover {

    color:
        var(--green);

    background:
        rgba(255,255,255,.035);

}


.nav-dropdown-menu a.active {

    color:
        var(--green);

}



/* =========================================================
   SEARCH BUTTON
========================================================= */

.btn {

    flex:
        0 0 auto;

    padding:
        9px 12px;

    border:
        1px solid var(--line);

    background:
        transparent;

    color:
        var(--text-soft);

    font-family:
        var(--mono);

    font-size:
        10px;

    letter-spacing:
        .05em;

    cursor:
        pointer;

    transition:
        color .15s ease,
        border-color .15s ease,
        background .15s ease;

}


.btn:hover {

    color:
        var(--green);

    border-color:
        var(--green);

    background:
        rgba(99,255,139,.03);

}



/* =========================================================
   MOBILE NAVIGATION
========================================================= */

.mobile-toggle {

    display:
        none;

    margin-left:
        auto;

    padding:
        9px 12px;

    border:
        1px solid var(--line);

    background:
        transparent;

    color:
        var(--text-soft);

    font-family:
        var(--mono);

    font-size:
        11px;

    letter-spacing:
        .05em;

    cursor:
        pointer;

}


.mobile-toggle:hover {

    color:
        var(--green);

    border-color:
        var(--green);

}


.mobile-nav {

    display:
        none;

}



/* =========================================================
   HERO
========================================================= */

.hero {

    position:
        relative;

    padding:
        110px 0 90px;

    overflow:
        hidden;

}


.hero::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    opacity:
        .32;

    background-image:
        linear-gradient(
            rgba(255,255,255,.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.025) 1px,
            transparent 1px
        );

    background-size:
        42px 42px;

}


.hero .container {

    position:
        relative;

    z-index:
        1;

}


.hero p {

    max-width:
        760px;

    color:
        var(--text-soft);

    font-size:
        clamp(1rem, 2vw, 1.25rem);

}



/* =========================================================
   SECTIONS
========================================================= */

.section {

    padding:
        90px 0;

    border-top:
        1px solid var(--line-soft);

}


.section:first-child {

    border-top:
        0;

}



/* =========================================================
   PAGE HEADER
========================================================= */

.pagehead {

    padding:
        90px 0 70px;

}


.pagehead p {

    max-width:
        800px;

    color:
        var(--text-soft);

    font-size:
        1.08rem;

}



/* =========================================================
   SPLIT LAYOUT
========================================================= */

.split {

    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    gap:
        70px;

    align-items:
        start;

}



/* =========================================================
   GRID
========================================================= */

.grid {

    display:
        grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap:
        18px;

}


.wrap {

    width:
        100%;

    overflow-x:
        auto;

}



/* =========================================================
   CARDS
========================================================= */

.card {

    display:
        flex;

    flex-direction:
        column;

    min-height:
        210px;

    padding:
        26px;

    background:
        var(--bg-soft);

    border:
        1px solid var(--line);

    color:
        inherit;

    text-decoration:
        none;

    transition:
        border-color .2s ease,
        background .2s ease,
        transform .2s ease;

}


.card:hover {

    border-color:
        var(--green-soft);

    background:
        var(--bg-panel);

    transform:
        translateY(-2px);

}


.card p {

    color:
        var(--text-soft);

    font-size:
        .94rem;

}


.card .mono:last-child {

    margin-top:
        auto;

    padding-top:
        20px;

    color:
        var(--text-dim);

}


.card:hover .mono:last-child {

    color:
        var(--green);

}



/* =========================================================
   TERMINAL
========================================================= */

.terminal {

    margin-top:
        45px;

    overflow:
        hidden;

    background:
        #050705;

    border:
        1px solid var(--line);

    box-shadow:
        0 20px 70px rgba(0,0,0,.3);

}


.termbar {

    padding:
        9px 14px;

    background:
        #0d110e;

    border-bottom:
        1px solid var(--line);

    color:
        var(--text-dim);

    font-family:
        var(--mono);

    font-size:
        11px;

}


.termbody {

    min-height:
        310px;

    padding:
        22px;

    overflow:
        auto;

    font-family:
        var(--mono);

    font-size:
        13px;

    line-height:
        1.65;

}


.line.system {

    color:
        var(--text-soft);

}


.prompt {

    display:
        flex;

    gap:
        10px;

    padding:
        14px 22px;

    border-top:
        1px solid var(--line-soft);

    font-family:
        var(--mono);

    font-size:
        13px;

}


.prompt > span {

    color:
        var(--green);

    white-space:
        nowrap;

}


.prompt input {

    width:
        100%;

    min-width:
        0;

    border:
        0;

    outline:
        0;

    background:
        transparent;

    color:
        var(--text);

    font-family:
        var(--mono);

}



/* =========================================================
   TIMELINE
========================================================= */

.timeline {

    display:
        flex;

    min-width:
        900px;

    padding:
        30px 0 10px;

}


.time {

    position:
        relative;

    flex:
        1;

    padding:
        25px 14px 0;

    border-top:
        1px solid var(--line);

    color:
        var(--text-soft);

    font-family:
        var(--mono);

    font-size:
        11px;

}


.time:first-child {

    border-top-color:
        var(--green-soft);

}


.dot {

    position:
        absolute;

    top:
        -5px;

    left:
        14px;

    width:
        9px;

    height:
        9px;

    border:
        1px solid var(--green);

    background:
        var(--bg);

}


.year {

    margin-bottom:
        5px;

    color:
        var(--green);

}



/* =========================================================
   PANELS
========================================================= */

.panel {

    margin:
        24px 0;

    padding:
        24px;

    background:
        var(--bg-soft);

    border:
        1px solid var(--line);

}


.panel.warning {

    border-left:
        3px solid var(--amber);

}


.panel.error {

    border-left:
        3px solid var(--red);

}


.panel.field-note {

    border-left:
        3px solid var(--green-soft);

}


.panel.command {

    border-left:
        3px solid var(--blue);

}


.panel p:last-child {

    margin-bottom:
        0;

}



/* =========================================================
   CODE BLOCKS
========================================================= */

pre {

    margin:
        0;

    padding:
        20px;

    overflow-x:
        auto;

    background:
        #050705;

    border:
        1px solid var(--line);

    color:
        var(--text-soft);

    font-family:
        var(--mono);

    font-size:
        12px;

    line-height:
        1.65;

    white-space:
        pre;

}


.code-block {

    position:
        relative;

    margin:
        24px 0;

}


.code-block pre {

    padding-top:
        48px;

}


.copy-code {

    position:
        absolute;

    top:
        9px;

    right:
        9px;

    padding:
        6px 9px;

    border:
        1px solid var(--line);

    background:
        var(--bg-panel);

    color:
        var(--text-dim);

    font-family:
        var(--mono);

    font-size:
        10px;

    cursor:
        pointer;

}


.copy-code:hover {

    color:
        var(--green);

    border-color:
        var(--green);

}



/* =========================================================
   INLINE CODE
========================================================= */

code {

    padding:
        2px 5px;

    background:
        rgba(255,255,255,.04);

    color:
        var(--green);

    font-family:
        var(--mono);

    font-size:
        .9em;

}



/* =========================================================
   LISTS
========================================================= */

ul,
ol {

    padding-left:
        24px;

}


li {

    margin-bottom:
        8px;

    color:
        var(--text-soft);

}


li strong {

    color:
        var(--text);

}



/* =========================================================
   TABLES
========================================================= */

.table-wrap {

    width:
        100%;

    margin:
        25px 0;

    overflow-x:
        auto;

}


table {

    width:
        100%;

    border-collapse:
        collapse;

    font-size:
        .9rem;

}


th,
td {

    padding:
        13px 15px;

    border:
        1px solid var(--line);

    text-align:
        left;

    vertical-align:
        top;

}


th {

    color:
        var(--green);

    background:
        var(--bg-soft);

    font-family:
        var(--mono);

    font-size:
        11px;

    font-weight:
        500;

    letter-spacing:
        .04em;

    text-transform:
        uppercase;

}


td {

    color:
        var(--text-soft);

}



/* =========================================================
   SEARCH MODAL
========================================================= */

.modal {

    position:
        fixed;

    inset:
        0;

    display:
        none;

    align-items:
        flex-start;

    justify-content:
        center;

    padding:
        100px 20px 40px;

    background:
        rgba(0,0,0,.72);

    z-index:
        2000;

}


.modal.open {

    display:
        flex;

}


.modalbox {

    width:
        min(760px, 100%);

    max-height:
        calc(100vh - 140px);

    overflow:
        auto;

    background:
        var(--bg-panel);

    border:
        1px solid var(--line);

    box-shadow:
        0 30px 80px rgba(0,0,0,.55);

}


.modalbox > input {

    width:
        100%;

    padding:
        18px;

    border:
        0;

    border-bottom:
        1px solid var(--line);

    outline:
        0;

    background:
        #050705;

    color:
        var(--text);

    font-family:
        var(--mono);

    font-size:
        14px;

}


.results {

    padding:
        10px;

}


.result {

    display:
        block;

    padding:
        14px;

    border:
        1px solid transparent;

    color:
        inherit;

    text-decoration:
        none;

}


.result:hover {

    background:
        rgba(255,255,255,.03);

    border-color:
        var(--line);

}


.result-title {

    color:
        var(--green);

    font-family:
        var(--mono);

    font-size:
        12px;

}


.result-description {

    margin-top:
        4px;

    color:
        var(--text-dim);

    font-size:
        13px;

}



/* =========================================================
   FOOTER
========================================================= */

footer {

    margin-top:
        40px;

    border-top:
        1px solid var(--line);

}


.footer {

    width:
        min(
            calc(100% - 48px),
            var(--max-width)
        );

    margin:
        0 auto;

    padding:
        50px 0;

    color:
        var(--text-dim);

}


.footer p {

    margin-bottom:
        8px;

    font-size:
        13px;

}



/* =========================================================
   FOCUS / ACCESSIBILITY
========================================================= */

a:focus-visible,
button:focus-visible,
input:focus-visible {

    outline:
        1px solid var(--green);

    outline-offset:
        3px;

}



/* =========================================================
   SCROLLBAR
========================================================= */

::-webkit-scrollbar {

    width:
        9px;

    height:
        9px;

}


::-webkit-scrollbar-track {

    background:
        var(--bg);

}


::-webkit-scrollbar-thumb {

    background:
        var(--line);

}


::-webkit-scrollbar-thumb:hover {

    background:
        var(--text-dim);

}



/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1200px) {

    .site-nav > a,
    .nav-dropdown-toggle {

        padding:
            8px 7px;

        font-size:
            9px;

    }

}


@media (max-width: 1000px) {

    .site-nav {

        display:
            none;

    }


    .head {

        min-height:
            64px;

    }


    .mobile-toggle {

        display:
            block;

    }


    .mobile-nav {

        position:
            absolute;

        top:
            100%;

        left:
            0;

        right:
            0;

        padding:
            12px;

        background:
            var(--bg-panel);

        border-top:
            1px solid var(--line);

        border-bottom:
            1px solid var(--line);

        box-shadow:
            0 20px 40px rgba(0,0,0,.35);

        z-index:
            1000;

    }


    .mobile-nav.open {

        display:
            block;

    }


    .mobile-nav > a,
    .mobile-nav .nav-dropdown-toggle {

        width:
            100%;

        display:
            flex;

        align-items:
            center;

        justify-content:
            space-between;

        padding:
            12px;

        border:
            0;

        color:
            var(--text-soft);

        font-family:
            var(--mono);

        font-size:
            11px;

        text-align:
            left;

        text-decoration:
            none;

    }


    .mobile-nav > a:hover,
    .mobile-nav .nav-dropdown-toggle:hover {

        color:
            var(--green);

        background:
            rgba(255,255,255,.025);

    }


    .mobile-nav
    .nav-dropdown {

        display:
            block;

    }


    .mobile-nav
    .nav-dropdown-menu {

        position:
            static;

        display:
            none;

        min-width:
            0;

        padding:
            0 0 5px 15px;

        border:
            0;

        box-shadow:
            none;

        opacity:
            1;

        visibility:
            visible;

        pointer-events:
            auto;

        transform:
            none;

    }


    .mobile-nav
    .nav-dropdown.open
    .nav-dropdown-menu {

        display:
            block;

    }


    .mobile-nav
    .nav-dropdown-menu a {

        padding:
            10px 12px;

        color:
            var(--text-dim);

    }


    .mobile-nav
    .nav-dropdown-menu a:hover {

        color:
            var(--green);

    }


    .btn {

        display:
            none;

    }


    .split {

        grid-template-columns:
            1fr;

        gap:
            35px;

    }


    .grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

    }

}


@media (max-width: 700px) {

    .container {

        width:
            min(
                calc(100% - 32px),
                var(--max-width)
            );

    }


    .hero {

        padding:
            75px 0 65px;

    }


    .section {

        padding:
            65px 0;

    }


    .pagehead {

        padding:
            65px 0 50px;

    }


    .grid {

        grid-template-columns:
            1fr;

    }


    .card {

        min-height:
            180px;

        padding:
            22px;

    }


    .terminal {

        margin-top:
            30px;

    }


    .termbody {

        min-height:
            260px;

        padding:
            16px;

        font-size:
            11px;

    }


    .prompt {

        padding:
            12px 16px;

        font-size:
            11px;

    }


    .prompt > span {

        display:
            none;

    }


    .panel {

        padding:
            18px;

    }


    pre {

        padding:
            15px;

        font-size:
            11px;

    }


    th,
    td {

        min-width:
            140px;

    }


    .footer {

        width:
            min(
                calc(100% - 32px),
                var(--max-width)
            );

    }

}


@media (prefers-reduced-motion: reduce) {

    html {

        scroll-behavior:
            auto;

    }


    *,
    *::before,
    *::after {

        transition:
            none !important;

        animation:
            none !important;

    }

}