:root {
    --paper: #e8e6df;
    --paper-alt: #d9d6ce;

    --ink: #181818;
    --faded: #555555;

    --line: #9b9992;
    --line-strong: #181818;

    --accent: #181818;
    --accent-soft: #555555;

    --success: #181818;
    --danger: #555555;

    --panel:
        rgba(255, 255, 255, 0.08);

    --glow:
        transparent;

    --background-texture:
        repeating-linear-gradient(
            0deg,
            rgba(0, 0, 0, 0.015),
            rgba(0, 0, 0, 0.015) 1px,
            transparent 1px,
            transparent 3px
        );
}

html.punk {
    --paper: #090516;
    --paper-alt: #120821;

    --ink: #f5dff0;
    --faded: #c695b7;

    --line: #5d1d52;
    --line-strong: #ff42bd;

    --accent: #ff39b7;
    --accent-soft: #50f4ff;

    --success: #50f4ff;
    --danger: #ff3b72;

    --panel:
        rgba(18, 8, 33, 0.72);

    --glow:
        0 0 4px rgba(255, 57, 183, 0.7),
        0 0 12px rgba(255, 57, 183, 0.35);

    --background-texture:
        radial-gradient(
            circle at 78% 10%,
            rgba(255, 33, 180, 0.18),
            transparent 28%
        ),
        radial-gradient(
            circle at 20% 35%,
            rgba(113, 27, 152, 0.15),
            transparent 32%
        ),
        repeating-linear-gradient(
            0deg,
            rgba(255, 255, 255, 0.018),
            rgba(255, 255, 255, 0.018) 1px,
            transparent 1px,
            transparent 4px
        );
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    min-height: 100vh;

    color: var(--ink);

    background-color:
        var(--paper);

    background-image:
        var(--background-texture);

    font-family:
        "Courier New",
        Courier,
        monospace;

    line-height: 1.6;

    transition:
        background-color 250ms ease,
        color 250ms ease;
}

html.punk body {
    text-shadow:
        0 0 8px
        rgba(255, 57, 183, 0.08);
}

a {
    color: inherit;
}

button {
    font: inherit;
}

.site-header {
    max-width: 1100px;

    margin: 0 auto;

    padding:
        60px
        30px
        30px;

    border-bottom:
        2px solid
        var(--line-strong);
}

.brand {
    display: flex;
    align-items: center;

    gap: 28px;
}

.brand-text {
    min-width: 0;
}

.brand h1 {
    margin: 0;

    color: var(--ink);

    font-size:
        clamp(
            2rem,
            5vw,
            4.5rem
        );

    line-height: 0.9;

    letter-spacing:
        0.05em;

    transition:
        color 250ms ease,
        text-shadow 250ms ease;
}

html.punk .brand h1 {
    color: var(--accent);

    text-shadow:
        var(--glow);
}

.tagline {
    margin:
        16px
        0
        0;

    color: var(--faded);

    font-size:
        0.85rem;

    letter-spacing:
        0.35em;

    transition:
        color 250ms ease,
        text-shadow 250ms ease;
}

html.punk .tagline {
    color:
        var(--accent-soft);

    text-shadow:
        0 0 8px
        rgba(80, 244, 255, 0.28);
}

.mascot {
    position: relative;

    width: 95px;
    height: 95px;

    flex-shrink: 0;

    background:
        var(--ink);

    border-radius:
        48px
        48px
        12px
        12px;

    transition:
        background 250ms ease,
        box-shadow 250ms ease;
}

html.punk .mascot {
    background:
        var(--accent);

    box-shadow:
        var(--glow);
}

.mascot::after {
    content: "";

    position: absolute;

    left: 12px;
    right: 12px;
    bottom: -1px;

    height: 22px;

    background:
        linear-gradient(
            90deg,
            transparent 0 15%,
            var(--paper) 15% 30%,
            transparent 30% 45%,
            var(--paper) 45% 60%,
            transparent 60% 75%,
            var(--paper) 75% 90%,
            transparent 90%
        );
}

.eye {
    position: absolute;

    top: 38px;

    width: 16px;
    height: 16px;

    background:
        var(--paper);
}

.eye-left {
    left: 25px;
}

.eye-right {
    right: 25px;
}

.circuit {
    position: absolute;

    width: 28px;
    height: 3px;

    right: -20px;

    background:
        var(--ink);

    transform-origin:
        left center;

    transition:
        background 250ms ease,
        box-shadow 250ms ease;
}

html.punk .circuit {
    background:
        var(--accent-soft);

    box-shadow:
        0 0 6px
        rgba(80, 244, 255, 0.6);
}

.circuit::after {
    content: "";

    position: absolute;

    width: 8px;
    height: 8px;

    right: -6px;
    top: 50%;

    border:
        3px solid
        var(--ink);

    border-radius: 50%;

    background:
        var(--paper);

    transform:
        translateY(-50%);

    transition:
        border-color 250ms ease,
        background 250ms ease,
        box-shadow 250ms ease;
}

html.punk .circuit::after {
    border-color:
        var(--accent-soft);

    background:
        var(--paper);

    box-shadow:
        0 0 8px
        rgba(80, 244, 255, 0.65);
}

.circuit-one {
    top: 26px;

    transform:
        rotate(-32deg);
}

.circuit-two {
    top: 46px;

    width: 35px;
}

.circuit-three {
    top: 65px;

    transform:
        rotate(30deg);
}

nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: 28px;

    margin-top: 40px;
}

nav a {
    text-decoration: none;

    font-size:
        0.85rem;

    font-weight: bold;

    letter-spacing:
        0.15em;

    transition:
        color 180ms ease,
        text-shadow 180ms ease;
}

nav a:hover {
    text-decoration:
        underline;
}

html.punk nav a:hover {
    color:
        var(--accent);

    text-shadow:
        var(--glow);
}

.theme-toggle {
    padding:
        10px
        15px;

    color:
        var(--ink);

    background:
        transparent;

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

    cursor:
        pointer;

    font-size:
        0.8rem;

    font-weight:
        bold;

    letter-spacing:
        0.15em;

    transition:
        color 180ms ease,
        background 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease;
}

.theme-toggle:hover {
    color:
        var(--paper);

    background:
        var(--ink);
}

html.punk .theme-toggle {
    color:
        var(--accent);

    border-color:
        var(--accent);

    box-shadow:
        inset 0 0 8px
        rgba(255, 57, 183, 0.08),
        0 0 8px
        rgba(255, 57, 183, 0.18);
}

html.punk .theme-toggle:hover {
    color:
        var(--paper);

    background:
        var(--accent);

    box-shadow:
        var(--glow);
}

main {
    max-width: 1100px;

    margin:
        0 auto;

    padding:
        0 30px;
}

.intro {
    max-width: 800px;

    padding:
        100px
        0;
}

.label {
    margin-bottom:
        20px;

    color:
        var(--faded);

    font-size:
        0.8rem;

    letter-spacing:
        0.2em;
}

html.punk .label {
    color:
        var(--accent);

    text-shadow:
        0 0 8px
        rgba(255, 57, 183, 0.3);
}

.intro h2 {
    margin:
        0
        0
        30px;

    color:
        var(--ink);

    font-size:
        clamp(
            2.4rem,
            7vw,
            6rem
        );

    line-height:
        0.95;
}

html.punk .intro h2 {
    color:
        var(--accent);

    text-shadow:
        0 0 10px
        rgba(255, 57, 183, 0.2);
}

.intro-copy {
    max-width: 650px;

    font-size:
        1.1rem;
}

.status-section {
    padding:
        0
        0
        80px;
}

.section {
    padding:
        80px
        0;

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

.section-heading {
    display: flex;
    align-items: center;

    gap: 20px;

    margin-bottom:
        45px;
}

.section-heading::after {
    content: "";

    flex: 1;

    height: 1px;

    background:
        var(--line);
}

html.punk .section-heading::after {
    background:
        var(--accent);

    box-shadow:
        0 0 6px
        rgba(255, 57, 183, 0.35);
}

.section-heading span {
    color:
        var(--faded);

    font-size:
        0.75rem;
}

html.punk .section-heading span {
    color:
        var(--accent);
}

.section-heading h2 {
    margin: 0;

    letter-spacing:
        0.1em;
}

html.punk .section-heading h2 {
    color:
        var(--accent);

    text-shadow:
        0 0 8px
        rgba(255, 57, 183, 0.25);
}

.server-status-panel {
    border:
        2px solid
        var(--line-strong);

    background:
        var(--panel);

    transition:
        border-color 250ms ease,
        box-shadow 250ms ease,
        background 250ms ease;
}

html.punk .server-status-panel {
    border-color:
        var(--accent);

    box-shadow:
        inset 0 0 30px
        rgba(255, 57, 183, 0.03),
        0 0 14px
        rgba(255, 57, 183, 0.12);
}

.status-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 30px;

    padding:
        24px;

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

.status-label,
.telemetry-label,
.status-version span,
.status-footer {
    color:
        var(--faded);

    font-size:
        0.7rem;

    letter-spacing:
        0.14em;
}

.status-value-row {
    display: flex;
    align-items: center;

    gap: 10px;

    margin-top:
        5px;
}

.status-indicator {
    width: 10px;
    height: 10px;

    display:
        inline-block;

    border-radius:
        50%;

    background:
        var(--danger);
}

.server-status-panel.online
.status-indicator {
    background:
        var(--success);
}

html.punk
.server-status-panel.online
.status-indicator {
    box-shadow:
        0 0 10px
        rgba(80, 244, 255, 0.9);
}

html.punk
.server-status-panel.offline
.status-indicator {
    box-shadow:
        0 0 10px
        rgba(255, 59, 114, 0.8);
}

.status-value {
    font-size:
        1.3rem;

    letter-spacing:
        0.08em;
}

.server-status-panel.online
.status-value {
    color:
        var(--success);
}

.server-status-panel.offline
.status-value {
    color:
        var(--danger);
}

.status-version {
    text-align:
        right;
}

.status-version strong {
    display:
        block;

    margin-top:
        4px;

    font-size:
        1.2rem;
}

html.punk
.status-version strong {
    color:
        var(--accent-soft);
}

.telemetry-grid {
    display: grid;

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

.telemetry-item {
    min-width: 0;

    padding:
        24px;

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

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

.telemetry-item:nth-child(4n) {
    border-right:
        none;
}

.telemetry-item:nth-last-child(-n + 4) {
    border-bottom:
        none;
}

.telemetry-value {
    display:
        block;

    margin-top:
        8px;

    overflow-wrap:
        anywhere;

    font-size:
        1.1rem;
}

.telemetry-value-small {
    font-size:
        0.82rem;
}

html.punk
.telemetry-value {
    color:
        var(--accent-soft);
}

.status-footer {
    display: flex;
    justify-content: space-between;

    gap: 20px;

    padding:
        12px
        24px;

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

html.punk
.status-footer {
    color:
        var(--accent);
}

.project-card {
    display: grid;

    grid-template-columns:
        120px
        1fr;

    gap: 30px;

    padding:
        30px
        0;

    border-top:
        2px solid
        var(--line-strong);

    border-bottom:
        2px solid
        var(--line-strong);
}

html.punk .project-card {
    padding:
        30px;

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

    background:
        rgba(18, 8, 33, 0.66);

    box-shadow:
        inset 0 0 20px
        rgba(255, 57, 183, 0.03),
        0 0 12px
        rgba(255, 57, 183, 0.08);
}

.project-number {
    font-weight:
        bold;

    letter-spacing:
        0.1em;
}

html.punk
.project-number {
    color:
        var(--accent);
}

.project-card h3 {
    margin-top:
        0;

    font-size:
        1.5rem;
}

html.punk
.project-card h3 {
    color:
        #ffffff;
}

html.punk
.project-card p {
    color:
        #e6d8e2;
}

.tags {
    display: flex;
    flex-wrap: wrap;

    gap: 10px;

    margin-top:
        25px;
}

.tags span {
    padding:
        5px
        9px;

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

    font-size:
        0.7rem;

    letter-spacing:
        0.08em;
}

html.punk
.tags span {
    color:
        var(--accent-soft);

    border-color:
        var(--accent);

    background:
        rgba(255, 57, 183, 0.025);
}

footer {
    display: flex;
    justify-content: space-between;

    max-width: 1100px;

    margin:
        50px
        auto
        0;

    padding:
        30px;

    border-top:
        2px solid
        var(--line-strong);

    font-size:
        0.7rem;

    letter-spacing:
        0.15em;
}

html.punk footer {
    color:
        var(--accent-soft);

    border-color:
        var(--accent);
}

@media (max-width: 850px) {
    .telemetry-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .telemetry-item:nth-child(4n) {
        border-right:
            1px solid
            var(--line);
    }

    .telemetry-item:nth-child(2n) {
        border-right:
            none;
    }

    .telemetry-item:nth-last-child(-n + 4) {
        border-bottom:
            1px solid
            var(--line);
    }

    .telemetry-item:nth-last-child(-n + 2) {
        border-bottom:
            none;
    }
}

@media (max-width: 650px) {
    .site-header {
        padding-top:
            35px;
    }

    .brand {
        align-items:
            flex-start;
    }

    .mascot {
        width:
            65px;

        height:
            65px;

        border-radius:
            34px
            34px
            8px
            8px;
    }

    .eye {
        top:
            26px;

        width:
            10px;

        height:
            10px;
    }

    .eye-left {
        left:
            18px;
    }

    .eye-right {
        right:
            18px;
    }

    .circuit {
        width:
            18px;

        right:
            -13px;
    }

    .circuit-two {
        width:
            23px;
    }

    .circuit-one {
        top:
            18px;
    }

    .circuit-two {
        top:
            32px;
    }

    .circuit-three {
        top:
            46px;
    }

    .tagline {
        letter-spacing:
            0.15em;
    }

    nav {
        gap:
            18px;
    }

    .intro {
        padding:
            70px
            0;
    }

    .status-header {
        align-items:
            flex-start;

        flex-direction:
            column;
    }

    .status-version {
        text-align:
            left;
    }

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

    .telemetry-item {
        border-right:
            none !important;

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

    .telemetry-item:last-child {
        border-bottom:
            none !important;
    }

    .status-footer {
        flex-direction:
            column;
    }

    .project-card {
        grid-template-columns:
            1fr;
    }

    html.punk .project-card {
        padding:
            24px;
    }

    footer {
        flex-direction:
            column;

        gap:
            10px;
    }
}