:root {
    --bg: #1c2631;
    --panel: #292c3c;
    --panel-soft: #34384c;
    --text: #d1d5db;
    --muted: #b5bfe2;
    --secondary: #8caaee;
    --accent: #f2d5cf;
    --green: #a6d189;
    --red: #e78284;
    --yellow: #e5c890;
    --border: #626880;
    --active: #babbf1;
}

* {
    box-sizing: border-box;
}

html {
    background: var(--bg);
}

body {
    min-height: 100vh;
    margin: 0;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    color: var(--text);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.65;
}

a {
    color: var(--accent);
    text-decoration: none;
}

a:hover,
a:focus-visible {
    color: var(--green);
}

.terminal {
    width: 100%;
    max-width: 88ch;
}

.terminal.wide {
    max-width: 112ch;
}

.site-nav {
    width: 100%;
    max-width: 88ch;
    margin-bottom: 2rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1rem;
}

.container {
    width: 100%;
    max-width: 88ch;
}

body > .container {
    flex: 1;
}

nav {
    width: 100%;
    max-width: 88ch;
}

.site-nav a::before {
    color: var(--muted);
    content: "./";
}

.prompt,
.typeme {
    color: var(--text);
    margin: 1.25rem 0 0.5rem;
}

.typeme {
    width: min(var(--typing-width, 31ch), 100%);
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    border-right: 0.6rem solid var(--accent);
    animation: typing 0.75s steps(31), blink 0.6s step-end infinite alternate;
}

.user {
    color: var(--secondary);
}

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

.cursor {
    color: var(--accent);
}

.output {
    width: 100%;
    animation: fade 0.8s ease both;
}

.section-title {
    display: inline-block;
    margin: 1.8rem 0 0.45rem;
    padding: 0 0.45rem;
    background: #684eff;
    color: #fafafa;
    font-size: inherit;
    font-weight: 700;
}

.lead {
    max-width: 76ch;
}

.links,
.command-list {
    padding-left: 1.25rem;
}

.links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.2rem;
}

.links li {
    min-width: 10ch;
}

.links .telegram-item {
    min-width: 11.5ch;
}

.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 1.25rem 0;
}

.button {
    display: inline-flex;
    align-items: center;
    min-height: 2.35rem;
    padding: 0.25rem 0.75rem;
    border: 1px solid var(--border);
    background: var(--panel);
    color: var(--accent);
}

.custom-button {
    display: inline-flex !important;
    align-items: center;
    min-height: 2.35rem;
    min-width: 0;
    padding: 0.25rem 0.75rem !important;
    border: 1px solid var(--border) !important;
    border-radius: 4px !important;
    background: var(--panel) !important;
    color: var(--accent) !important;
    font-family: 'IBM Plex Mono', monospace !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
}

.button:hover,
.button:focus-visible,
.custom-button:hover,
.custom-button:focus-visible {
    border-color: var(--active);
    background: var(--panel-soft) !important;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
    gap: 1rem;
    margin: 1rem 0 2rem;
}

.repo-list {
    margin: 1rem 0 2rem;
    border-left: 1px solid var(--border);
}

.repo-line {
    position: relative;
    display: block;
    padding: 0.65rem 0 0.65rem 1.75rem;
    color: var(--text);
}

.repo-line::before {
    position: absolute;
    left: 0.6rem;
    content: "$";
    color: var(--green);
}

.repo-line:hover,
.repo-line:focus-visible {
    background: var(--panel);
    color: var(--text);
}

.repo-line:hover .repo-name,
.repo-line:focus-visible .repo-name {
    color: var(--green);
}

.repo-name {
    display: inline;
    color: var(--accent);
    font-weight: 700;
}

.repo-description {
    display: block;
    margin-top: 0.2rem;
    color: var(--text);
}

.repo-meta {
    display: inline;
    margin-left: 0.75rem;
    color: var(--muted);
    font-size: 0.88rem;
}

.post-list {
    margin: 1rem 0 2rem;
    border-left: 1px solid var(--border);
}

.post-line {
    position: relative;
    display: block;
    padding: 0.65rem 0 0.65rem 1.75rem;
    color: var(--text);
}

.post-line::before {
    position: absolute;
    left: 0.6rem;
    content: "$";
    color: var(--green);
}

.post-line:hover,
.post-line:focus-visible {
    background: var(--panel);
    color: var(--text);
}

.post-line:hover .post-title,
.post-line:focus-visible .post-title {
    color: var(--green);
}

.post-title {
    display: inline;
    color: var(--accent);
    font-weight: 700;
}

.post-meta {
    display: inline;
    margin-left: 0.75rem;
    color: var(--muted);
    font-size: 0.88rem;
}

.post-description {
    display: block;
    margin-top: 0.2rem;
    color: var(--text);
}

.address-list {
    margin: 1rem 0 2rem;
    border-left: 1px solid var(--border);
}

.address-line {
    position: relative;
    padding: 0.65rem 0 0.65rem 1.75rem;
}

.address-line::before {
    position: absolute;
    left: 0.6rem;
    content: "$";
    color: var(--green);
}

.address-line h2 {
    display: inline;
    margin: 0;
    color: var(--accent);
    font-size: 1rem;
}

.address-line h2 span {
    margin-left: 0.5rem;
    color: var(--muted);
    font-size: 0.88rem;
    font-weight: 500;
}

.address-line code {
    display: block;
    margin-top: 0.2rem;
    overflow-wrap: anywhere;
    color: var(--text);
    user-select: all;
}

.address-line:hover {
    background: var(--panel);
}

.card {
    min-width: 0;
    padding: 1rem;
    border: 1px solid var(--border);
    background: var(--panel);
    border-radius: 4px;
}

.card:hover {
    border-color: var(--active);
}

.card h2,
.card h3 {
    margin: 0 0 0.5rem;
    font-size: 1rem;
    color: var(--secondary);
}

.card p {
    margin: 0.45rem 0;
}

.meta,
.muted {
    color: var(--muted);
}

.meta {
    font-size: 0.88rem;
}

.address {
    display: block;
    max-width: 100%;
    margin-top: 0.35rem;
    padding: 0.65rem;
    overflow-wrap: anywhere;
    border: 1px solid var(--border);
    background: #232634;
    color: var(--text);
    user-select: all;
}

.article {
    max-width: 104ch;
}

.post-article {
    margin-top: 1.25rem;
    border-left: 1px solid var(--border);
    padding-left: 1rem;
}

.post-header {
    margin-bottom: 2rem;
}

.back-link {
    display: inline-flex;
    align-items: center;
    min-height: 2.1rem;
    padding: 0.15rem 0.6rem;
    border: 1px solid var(--border);
    background: var(--panel);
    color: var(--accent);
}

.back-link::before {
    content: "< ";
    color: var(--green);
}

.back-link:hover,
.back-link:focus-visible {
    border-color: var(--active);
    background: var(--panel-soft);
}

.post-article h1 {
    margin: 1rem 0 0.35rem;
    color: var(--text);
    font-size: 1.45rem;
    line-height: 1.25;
}

.post-date {
    margin: 0;
    color: var(--muted);
    font-size: 0.9rem;
}

.post-article h2,
.post-article h3,
.post-article h4 {
    display: inline-block;
    margin: 2rem 0 0.45rem;
    padding: 0 0.45rem;
    background: #684eff;
    color: #fafafa;
    font-size: 1rem;
}

.post-article p {
    max-width: 88ch;
    margin: 1rem 0;
}

.post-article ul,
.post-article ol {
    max-width: 88ch;
    padding-left: 1.5rem;
}

.post-article li {
    margin: 0.35rem 0;
}

.post-article p code,
.post-article li code {
    color: var(--accent);
    background: var(--panel);
    padding: 0 0.25rem;
}

.post-bottom-nav {
    margin-top: 2rem;
}

pre,
code {
    font-family: 'IBM Plex Mono', monospace;
}

pre {
    max-width: 100%;
    overflow-x: auto;
    margin: 1rem 0;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--border);
    background: #232634;
    font-size: 0.9rem;
    line-height: 1.45;
}

pre code {
    color: var(--text);
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-title,
.hljs-section,
.hljs-type,
.hljs-built_in {
    color: var(--secondary);
}

.hljs-string,
.hljs-bullet,
.hljs-addition,
.hljs-regexp {
    color: var(--green);
}

.hljs-comment,
.hljs-quote {
    color: var(--muted);
    font-style: italic;
}

.hljs-number,
.hljs-symbol,
.hljs-deletion {
    color: var(--yellow);
}

.hljs-meta,
.hljs-function,
.hljs-params,
.hljs-attr {
    color: var(--accent);
}

footer {
    width: 100%;
    max-width: 88ch;
    margin-top: auto;
    padding-top: 2rem;
    color: var(--muted);
    font-size: 0.9rem;
}

.youtube:hover {
    color: #ff6b6b;
}

.github:hover {
    color: var(--green);
}

.twitter:hover {
    color: #99d1db;
}

.telegram:hover {
    color: #74c7ec;
}

@keyframes fade {
    0% { opacity: 0; }
    20% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes typing {
    0% { width: 0; }
    100% { width: min(var(--typing-width, 31ch), 100%); }
}

@keyframes blink {
    50% { border-color: transparent; }
}

@media (min-width: 700px) {
    body {
        padding: 1.5rem;
        font-size: 1.04rem;
    }
}

@media (max-width: 520px) {
    .site-nav {
        flex-direction: column;
    }

    .links {
        display: block;
    }

    .repo-line {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 0.6rem 0 0.6rem 1.75rem;
    }

    .repo-line::before {
        content: "$";
        left: 0.6rem;
    }

    .repo-name,
    .repo-meta,
    .repo-description {
        display: block;
    }

    .repo-meta {
        margin-left: 0;
        margin-top: 0.1rem;
    }

    .repo-description {
        margin-top: 0.1rem;
    }
}