:root {

    --bg: #070b0a;
    --panel: #0b100e;
    --text: #d8e8df;
    --muted: #6f8178;

    --accent: #62e6a5;
    --accent-soft: #1b4d36;

    --border: #1a2821;

    --danger: #ff6b6b;
    --warning: #e8c76a;
    --success: #62e6a5;

}


* {
    box-sizing: border-box;
}


/* =========================
   Global
========================= */

html,
body {

    margin: 0;

    min-height: 100%;

    background: var(--bg);

    color: var(--text);

    font-family:
        "JetBrains Mono",
        "SFMono-Regular",
        Consolas,
        monospace;

}


body {
    min-height: 100vh;
}


/* Terminal must always be LTR */

.terminal-page,
.terminal-page * {

    direction: ltr;

}


.terminal-page {

    text-align: left;

    background:

        radial-gradient(
            circle at 50% 0%,
            rgba(98,230,165,.055),
            transparent 38rem
        ),

        var(--bg);

}


/* =========================
   Terminal Shell
========================= */

.terminal-shell {

    min-height: 100vh;

    display: grid;

    place-items: center;

    padding: 28px;

}


.terminal-window {

    width: min(1100px, 100%);

    min-height:
        min(
            720px,
            calc(100vh - 56px)
        );

    display: flex;

    flex-direction: column;

    overflow: hidden;

    background:
        rgba(11,16,14,.94);

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

    border-radius: 12px;

    box-shadow:
        0 25px 80px rgba(0,0,0,.42);

}


/* =========================
   Terminal Header
========================= */

.terminal-bar {

    height: 46px;

    flex: 0 0 46px;

    display: flex;

    align-items: center;

    position: relative;

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

    background: #0d1310;

}


.terminal-dots {

    display: flex;

    gap: 8px;

    padding-left: 16px;

}


.dot {

    width: 11px;
    height: 11px;

    border-radius: 50%;

    display: block;

}


.dot-red {
    background: var(--danger);
}


.dot-yellow {
    background: var(--warning);
}


.dot-green {
    background: var(--success);
}


.terminal-title {

    position: absolute;

    left: 50%;

    transform:
        translateX(-50%);

    color: var(--muted);

    font-size: 12px;

}


.help-button {

    margin-left: auto;
    margin-right: 14px;

    width: 22px;
    height: 22px;

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

    border-radius: 50%;

    background: transparent;

    color: var(--muted);

    cursor: pointer;

    font: inherit;

}


.help-button:hover {

    color: var(--accent);

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

}


/* =========================
   Terminal Body
========================= */

.terminal-body {

    flex: 1;

    min-height: 0;

    display: flex;

    flex-direction: column;

}


/* =========================
   Output
========================= */

.terminal-output {

    flex: 1;

    min-height: 0;

    overflow-y: auto;

    padding:
        30px
        34px
        8px;

    font-size: 14px;

    line-height: 1.75;

}


.output-block {

    margin-bottom: 12px;

}


.output-command {

    color: var(--text);

}


.output-prompt {

    color: var(--accent);

}


.output-text {

    color: var(--text);

    white-space: pre-wrap;

}


.output-muted {

    color: var(--muted);

}


.output-accent {

    color: var(--accent);

}


.output-error {

    color: #ff8b8b;

}


/* =========================
   ls
========================= */

.ls-output {

    display: flex;

    flex-wrap: wrap;

    gap: 0 32px;

    line-height: 1.8;

}


.ls-output .command-link {

    display: inline-block;

    white-space: nowrap;

}


.command-link {

    color: var(--accent);

    text-decoration: none;

    cursor: pointer;

}


.command-link:hover {

    text-decoration: underline;

}


/* =========================
   Current Prompt
========================= */

.terminal-input-row {

    flex: 0 0 auto;

    display: flex;

    align-items: center;

    padding:
        8px
        34px
        12px;

    gap: 10px;

    border-top:
        1px solid rgba(26,40,33,.45);

}


.prompt {

    flex:
        0 0 auto;

    color: var(--accent);

    font-size: 14px;

}


#terminal-input {

    min-width: 0;

    flex: 1;

    border: 0;

    outline: 0;

    padding: 0;

    background: transparent;

    color: var(--text);

    caret-color: var(--accent);

    font: inherit;

    font-size: 14px;

}


/* =========================
   Hint
========================= */

.terminal-hint {

    flex: 0 0 auto;

    padding:
        0
        34px
        22px;

    color: var(--muted);

    font-size: 11px;

}


kbd {

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

    border-bottom-color:
        #26382f;

    border-radius: 4px;

    padding:
        1px 5px;

    color: #a9bcb2;

}


/* =========================
   Normal WordPress Pages
========================= */

.site-page {

    width:
        min(
            900px,
            calc(100% - 40px)
        );

    margin:
        60px auto;

}


.site-page h1 {

    color: var(--accent);

    font-size:
        clamp(
            24px,
            4vw,
            40px
        );

}


.site-page .content {

    line-height: 1.8;

    color: var(--text);

}


.back-terminal {

    color: var(--accent);

    text-decoration: none;

    font-size: 13px;

}


.back-terminal:hover {

    text-decoration: underline;

}


/* =========================
   Mobile
========================= */

@media (max-width: 700px) {

    .terminal-shell {

        padding: 0;

    }


    .terminal-window {

        min-height: 100vh;

        border-radius: 0;

        border-left: 0;
        border-right: 0;

    }


    .terminal-output {

        padding:
            24px
            18px
            8px;

        font-size: 13px;

    }


    .terminal-input-row {

        padding-left: 18px;
        padding-right: 18px;

        gap: 7px;

    }


    .terminal-hint {

        padding-left: 18px;
        padding-right: 18px;

    }


    .prompt {

        font-size: 12px;

    }


    .terminal-title {

        display: none;

    }

}