:root {
    --black: #000000;
    --background: #1b1519;
    --foreground: #d2ccd2;
    --muted: #96708e;
    --cursor: #e3a16f;
    --red: #cc5555;
    --purple: #6843ae;
    --magenta: #b773d6;
    --link: #f4b39e;
    --white: #e8e8e8;
}

@font-face {
    font-family: "MesloLGS NF";
    src: url("../fonts/MesloLGS-NF-Regular.ttf") format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "MesloLGS NF";
    src: url("../fonts/MesloLGS-NF-Bold.ttf") format("truetype");
    font-style: normal;
    font-weight: 700 900;
    font-display: swap;
}

.topbar {
    display: grid;
    grid-template-columns: minmax(220px, auto) minmax(0, 1fr);
    align-items: center;
    gap: 24px;
    margin: 12px 12px 0;
    padding: 10px 12px;
    color: var(--foreground);
    background: rgba(27, 21, 25, .78);
    border: 1px solid var(--purple);
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(104, 67, 174, .24);
    font-family: "MesloLGS NF", "Meslo LG S", "MesloLGS", "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 1ch;
    color: var(--white);
    font-weight: 800;
    letter-spacing: 0;
    white-space: nowrap;
}

.brand,
.brand-command {
    text-decoration: none;
}

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

.nav-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    justify-content: end;
}

.nav-links a {
    display: grid;
    grid-template-columns: 11ch auto;
    gap: 10px;
    min-height: 24px;
    align-items: center;
    border: 0;
    padding: 2px 4px;
    color: var(--link);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.nav-links span {
    color: var(--muted);
    pointer-events: none;
}

.nav-links a:hover {
    color: var(--white);
}

.starship-prompt {
    display: inline-flex;
    align-items: center;
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
}

.cmd-line {
    display: flex;
    align-items: center;
    gap: 1ch;
    line-height: 1.25;
    margin: 0;
}

.cmd-text {
    min-width: 0;
    color: var(--foreground);
    white-space: nowrap;
}

.sp-os,
.sp-dir,
.sp-python {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 0 6px;
    color: #fbf1c7;
    line-height: 1.15;
}

.sp-os::before,
.sp-python::after {
    content: "";
    position: absolute;
    top: 0;
    width: .68em;
    height: 100%;
    pointer-events: none;
}

.sp-os::before {
    left: -.66em;
    background: #9a348e;
    clip-path: ellipse(70% 50% at 100% 50%);
}

.sp-python::after {
    right: -.66em;
    clip-path: ellipse(70% 50% at 0 50%);
}

.sp-os {
    background: #9a348e;
}

.sp-dir {
    background: #d79921;
}

.sp-python {
    background: #458588;
}

.sp-python::after {
    background: #458588;
}

@media (max-width: 850px) {
    .topbar {
        grid-template-columns: 1fr;
        gap: 10px;
        margin: 8px 8px 0;
    }

    .nav-links {
        justify-content: start;
    }
}