:root {
    color-scheme: dark;

    --background: #050805;
    --foreground: #80ff80;
    --foreground-bright: #b7ffb7;
    --foreground-muted: #4fae4f;
    --prompt-user: #6dff6d;
    --prompt-path: #8fc9ff;
    --error: #ff6b6b;
    --warning: #ffd166;
    --selection: rgba(128, 255, 128, 0.25);

    --font-family:
        "SFMono-Regular",
        "Cascadia Code",
        "Liberation Mono",
        "DejaVu Sans Mono",
        Consolas,
        monospace;
}

* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
}

body {
    min-height: 100vh;
    overflow: hidden;
    background:
        radial-gradient(
            circle at top left,
            rgba(0, 255, 70, 0.035),
            transparent 34rem
        ),
        var(--background);
    color: var(--foreground);
    font-family: var(--font-family);
    font-size: 16px;
    line-height: 1.55;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

::selection {
    color: var(--foreground-bright);
    background: var(--selection);
}

#terminal {
    width: 100%;
    height: 100vh;
    padding: 28px 32px;
    overflow-x: hidden;
    overflow-y: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    scrollbar-width: thin;
    scrollbar-color: var(--foreground-muted) transparent;
    text-shadow: 0 0 7px rgba(90, 255, 90, 0.18);
}

#terminal::-webkit-scrollbar {
    width: 8px;
}

#terminal::-webkit-scrollbar-track {
    background: transparent;
}

#terminal::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(79, 174, 79, 0.55);
}

#terminal > div {
    min-height: 1.55em;
}

.prompt {
    color: var(--prompt-user);
    font-weight: 600;
}

.prompt::selection {
    color: var(--foreground-bright);
}

.command-input {
    flex: 1 1 auto;
    width: auto;
    min-width: 1ch;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    color: var(--foreground-bright);
    caret-color: var(--foreground-bright);
    box-shadow: none;
    font: inherit;
    line-height: inherit;
    text-shadow: inherit;
}

.command-input:focus,
.command-input:focus-visible {
    border: 0;
    outline: none;
    box-shadow: none;
    background: transparent;
}

.command-input::selection {
    color: var(--foreground-bright);
    background: var(--selection);
}

.command-input:disabled {
    color: var(--foreground-bright);
    opacity: 1;
    -webkit-text-fill-color: var(--foreground-bright);
}

.terminal-line {
    display: block;
}

.output {
    color: var(--foreground);
}

.muted {
    color: var(--foreground-muted);
}

.error {
    color: var(--error);
}

.warning {
    color: var(--warning);
}

.link {
    color: var(--prompt-path);
    text-decoration: none;
}

.link:hover,
.link:focus-visible {
    text-decoration: underline;
}

.input-line {
    display: flex;
    align-items: baseline;
    min-height: 1.55em;
}

.input-line .prompt {
    flex: 0 0 auto;
    white-space: pre;
}

.command-input {
    flex: 1 1 auto;
    width: auto;
    min-width: 1ch;
}

.entered-command {
    color: var(--foreground-bright);
}

.input-line:focus-within .prompt {
    color: var(--foreground-bright);
}

@media (max-width: 700px) {
    body {
        font-size: 14px;
    }

    #terminal {
        padding: 18px 16px;
    }

    #command {
        width: calc(100% - 205px);
    }
}

@media (max-width: 460px) {
    body {
        font-size: 13px;
    }

    #terminal {
        padding: 14px 12px;
    }

    #command {
        width: 100%;
        min-width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}