:root {
    --max-file-width: 110ch;
    --max-blog-width: 76ch;
    --left-padding: 14px;
    --right-padding: 14px;
    --top-bar-height: 58px;

    --zt-bg: #efe9dd;
    --zt-surface: rgba(17, 17, 17, 0.035);
    --zt-surface-strong: rgba(17, 17, 17, 0.065);
    --zt-text: #141414;
    --zt-muted: #615c55;
    --zt-line: rgba(20, 20, 20, 0.1);
    --zt-line-strong: rgba(20, 20, 20, 0.16);
    --zt-accent: #b38d49;
    --zt-code-bg: #f5f1e8;
    --zt-code-text: #242424;
    --zt-code-font: "IBM Plex Mono", "JetBrains Mono", monospace;
    --zt-code-border: rgba(20, 20, 20, 0.12);
    --zt-code-accent: #b38d49;
    --zt-code-accent-soft: rgba(179, 141, 73, 0.1);
    --zt-code-accent-strong: rgba(179, 141, 73, 0.2);
    --zt-code-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
    
    --zt-token-keyword: #a62626;
    --zt-token-string: #2b6f39;
    --zt-token-comment: #7a756b;
    --zt-token-number: #b85c00;
    --zt-token-function: #1b5e8c;
    --zt-token-type: #8c671b;
    --zt-token-variable: #242424;
    --zt-token-operator: #4a4740;

    --zt-chip-bg: rgba(239, 233, 221, 0.92);
    --zt-chip-border: rgba(20, 20, 20, 0.14);
    --zt-grid-opacity: 0.18;
}

html[data-theme="dark"] {
    --zt-bg: #0b0b0b;
    --zt-surface: rgba(255, 255, 255, 0.028);
    --zt-surface-strong: rgba(255, 255, 255, 0.06);
    --zt-text: #f4efe6;
    --zt-muted: #a69f94;

    --zt-line: rgba(255, 255, 255, 0.1);

    --zt-line-strong: rgba(255, 255, 255, 0.16);
    --zt-accent: #d2ad68;
    --zt-code-bg: rgb(15, 15, 15);
    --zt-code-text: #f4efe6;
    --zt-code-border: rgba(255, 255, 255, 0.08);
    --zt-code-accent: #d2ad68;
    --zt-code-accent-soft: rgba(210, 173, 104, 0.18);
    --zt-code-accent-strong: rgba(210, 173, 104, 0.32);
    --zt-code-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    
    --zt-token-keyword: #ffb86c;
    --zt-token-string: #b8e994;
    --zt-token-comment: #8b857c;
    --zt-token-number: #f78c6c;
    --zt-token-function: #82aaff;
    --zt-token-type: #ffd580;
    --zt-token-variable: #f4efe6;
    --zt-token-operator: #89ddff;

    --zt-chip-bg: rgba(0, 0, 0, 0.78);
    --zt-chip-border: rgba(255, 255, 255, 0.18);
    --zt-grid-opacity: 0.12;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    background: var(--zt-bg);
    color: var(--zt-text);
    scroll-behavior: smooth;
}

body {
    color: var(--zt-text);
    font-family: "JetBrains Mono", monospace;
    font-size: 1rem;
    line-height: 1.7;
    margin: 0 auto;
    max-width: var(--max-file-width);
    min-height: 100vh;
    padding-left: var(--left-padding);
    padding-right: var(--right-padding);
    position: relative;
    width: 100%;
}

body::before {
/*    background:*/
/*        linear-gradient(var(--zt-line) 1px, transparent 1px),*/
/*        linear-gradient(90deg, var(--zt-line) 1px, transparent 1px);*/
    background-size: 32px 32px;
    content: "";
    inset: 0;
    opacity: var(--zt-grid-opacity);
    pointer-events: none;
    position: fixed;
    z-index: -1;
}

main {
    padding-bottom: 4.5rem;
}

a {
    color: var(--zt-text);
    text-decoration-color: var(--zt-accent);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    transition: color 140ms ease, border-color 140ms ease, background-color 140ms ease;
}

a:hover {
    color: var(--zt-accent);
}

img {
    display: block;
    height: auto;
    max-width: 100%;
}

pre,
code,
kbd,
samp {
    font-family: var(--zt-code-font);
}

pre {
    overflow-x: auto;
}

button,
input {
    appearance: none;
}

hr {
    border: 0;
    border-top: 1px solid var(--zt-line-strong);
    margin: 1.6rem 0;
}

table {
    border-collapse: collapse;
    width: 100%;
}

th,
td {
    border: 1px solid var(--zt-line-strong);
    padding: 0.7rem 0.85rem;
    text-align: left;
}

blockquote {
    border-left: 2px solid var(--zt-accent);
    color: var(--zt-muted);
    margin: 1.5rem 0;
    padding: 0.1rem 0 0.1rem 1rem;
}

.fullwidth,
.top-bar,
.file {
    max-width: var(--max-file-width);
    width: 100%;
}

.content-shell {
    max-width: var(--max-blog-width);
    overflow-wrap: anywhere;
    word-break: normal;
    width: 100%;
}

.blogwidth {
    max-width: var(--max-blog-width);
    width: 100%;
}

.scroll-target {
    scroll-margin-top: calc(var(--top-bar-height) + 1rem);
}

.inline-code {
    color: var(--zt-accent);
}

.hash.inline-code {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: 1.12;
}

h1 a:link,
h2 a:link,
h3 a:link,
h4 a:link,
h5 a:link,
h6 a:link,
h1 a:visited,
h2 a:visited,
h3 a:visited,
h4 a:visited,
h5 a:visited,
h6 a:visited,
h1 a:hover,
h2 a:hover,
h3 a:hover,
h4 a:hover,
h5 a:hover,
h6 a:hover {
    color: var(--zt-text);
    text-decoration: none;
}

h1>a .hash,
h2>a .hash,
h3>a .hash,
h4>a .hash,
h5>a .hash,
h6>a .hash {
    margin-right: 0.8rem;
}

.top-bar {
    backdrop-filter: blur(14px);
    background: color-mix(in srgb, var(--zt-bg) 90%, transparent);
    border-bottom: 1px solid var(--zt-line-strong);
    margin-bottom: 1rem;
    position: sticky;
    top: 0;
    z-index: 20;
}

.top-bar-row {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    min-height: var(--top-bar-height);
}

.top-bar-left,
.top-bar-right,
.desktop-nav {
    align-items: center;
    display: flex;
    gap: 1rem;
}

.top-bar-left {
    min-width: 0;
}

.top-bar-right {
    justify-content: flex-end;
}

.desktop-nav {
    gap: 1.1rem;
}

.desktop-nav a,
.mobile-nav a,
.theme-toggle {
    font-family: "Pixelify Sans", "JetBrains Mono", monospace;
    font-size: 0.95rem;
    letter-spacing: 0.03em;
    text-transform: lowercase;
}

.file-link {
    align-items: center;
    display: inline-flex;
    gap: 0.22rem;
    min-width: 0;
    text-decoration: none;
}

.file-link span {
    overflow-wrap: anywhere;
}

.file-link img {
    flex: 0 0 auto;
    padding-right: 0.55rem;
}

.theme-toggle,
.menu-toggle,
.share-button,
.code-copy
{
    background: var(--zt-surface);
    border: 1px solid var(--zt-line-strong);
    color: var(--zt-text);
    cursor: pointer;
    font: inherit;
}

.code-copy-copy{
/*    background: var(--zt-surface);*/
    background: transparent;
    color: var(--zt-text);
    cursor: pointer;
    font: inherit;
}

.share-button,
.code-copy {
    border-radius: 999px;
}

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 50%;
    transition: background 140ms ease, border-color 140ms ease, transform 100ms ease;
}

.theme-toggle:active {
    transform: scale(0.92);
}

.theme-toggle svg {
    display: none;
}

html[data-theme="dark"] .theme-toggle .icon-sun {
    display: block;
}

html[data-theme="light"] .theme-toggle .icon-moon {
    display: block;
}

.menu-toggle {
    align-items: center;
    border-radius: 10px;
    display: none;
    flex-direction: column;
    gap: 4px;
    justify-content: center;
    min-height: 40px;
    min-width: 42px;
    padding: 0.45rem;
}

.menu-toggle span {
    background: currentColor;
    display: block;
    height: 1px;
    transition: transform 160ms ease, opacity 160ms ease;
    width: 18px;
}

.menu-toggle.is-open span:nth-child(1) {
    transform: translateY(5px) rotate(45deg);
}

.menu-toggle.is-open span:nth-child(2) {
    opacity: 0;
}

.menu-toggle.is-open span:nth-child(3) {
    transform: translateY(-5px) rotate(-45deg);
}

.mobile-nav {
    background: color-mix(in srgb, var(--zt-bg) 96%, transparent);
    border-top: 1px solid var(--zt-line);
    display: none;
    gap: 0.5rem;
    padding: 0.65rem 0 0.85rem;
}

.mobile-nav.is-open {
    display: flex;
    flex-direction: column;
}

.mobile-nav a {
    border-bottom: 1px solid var(--zt-line);
    padding: 0.2rem 0 0.65rem;
    text-decoration: none;
}

.file {
    align-items: center;
    border-bottom: 1px solid var(--zt-line);
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 0;
    padding: 0.9rem 0;
}

.file:first-of-type {
    border-top: 1px solid var(--zt-line);
}

.file-meta {
    color: var(--zt-muted);
    display: flex;
    flex-shrink: 0;
    gap: 1rem;
    justify-content: flex-end;
    max-width: 40ch;
    text-align: right;
}

.file-meta span {
    overflow-wrap: anywhere;
}

.side-bar {
    align-items: start;
    display: grid;
    gap: 2rem;
    grid-template-columns: minmax(0, 1fr) 20ch;
    margin-top: 1.6rem;
}

.intro-shell,
.feature-shell,
.post-shell,
.search-shell {
    padding: 0.15rem 0 0;
}

.feature-shell,
.search-shell,
.post-shell {
    border-top: 1px solid var(--zt-line);
    padding-top: 1.35rem;
}

.brand-heading,
.feature-title a,
.post-title-main a,
#posts h4,
.toc-panel-title,
.section-kicker,
.share-label {
    font-family: "Pixelify Sans", "JetBrains Mono", monospace;
}

.brand-heading,
.feature-title a,
.post-title-main a {
    display: inline-block;
    font-size: clamp(2rem, 4vw, 3.05rem);
    letter-spacing: 0.02em;
}

.intro-copy,
.page-meta,
.post-summary,
#posts,
.search-status,
.inline-links,
.post-hero-caption {
    color: var(--zt-muted);
}

.inline-links {
    margin-top: 1rem;
}

.inline-links a {
    text-decoration: none;
}

.section-kicker {
    padding-top: 3%;
    color: var(--zt-muted);
    font-size: 0.95rem;
    letter-spacing: 0.04em;
    margin-bottom: 0.45rem;
    text-transform: lowercase;
}

#posts {
    border-left: 1px solid var(--zt-line);
    padding-left: 1.25rem;
    padding-top: 0.2rem;
}

#posts h4 {
    color: var(--zt-text);
    font-size: 1.55rem;
    margin: 0 0 1rem;
    text-transform: lowercase;
}

#posts p {
    margin: 0 0 1rem;
}

.entry-preview {
    margin-top: 2.5rem;
}

.page-grid {
    align-items: start;
    display: grid;
    gap: 2rem;
    grid-template-columns: minmax(0, 1fr);
    margin-top: 0.6rem;
}

.page-grid:not(.has-toc) {
    justify-items: center;
}

.page-grid.has-toc {
    grid-template-columns: minmax(0, 1fr) minmax(14rem, 17rem);
}

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

.post-summary,
.page-meta {
    margin: 0.75rem 0 0;
}

.post-hero {
    margin: 1.5rem 0 0.75rem;
    position: relative;
}

.post-hero img {
    aspect-ratio: 16 / 9;
    border: 1px solid var(--zt-line-strong);
    object-fit: cover;
    width: 100%;
}

.post-hero::after {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0.06) 44%, rgba(0, 0, 0, 0) 70%);
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
}

.post-hero-caption {
    margin: 0 0 1.5rem;
}

.post-hero-tags,
.post-tag-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.post-hero-tags {
    left: 1rem;
    position: absolute;
    top: 1rem;
    z-index: 2;
}

.post-tag-row {
    margin-bottom: 1.25rem;
}

.post-tag {
    background: var(--zt-chip-bg);
    border: 1px solid var(--zt-chip-border);
    border-radius: 999px;
    color: var(--zt-text);
    font-size: 0.88rem;
    padding: 0.28rem 0.75rem;
    text-decoration: none;
}

.post-tag:hover {
    border-color: var(--zt-accent);
    color: var(--zt-accent);
}

.rendered-content> :first-child {
    margin-top: 0;
}

.rendered-content h1,
.rendered-content h2,
.rendered-content h3,
.rendered-content h4,
.rendered-content h5,
.rendered-content h6 {
    margin-bottom: 0.75rem;
    margin-top: 2rem;
}

.rendered-content p,
.rendered-content ul,
.rendered-content ol,
.rendered-content table,
.rendered-content blockquote {
    margin-bottom: 1rem;
}

.rendered-content ul,
.rendered-content ol {
    padding-left: 1.25rem;
}

.rendered-content li+li {
    margin-top: 0.3rem;
}

.rendered-content img,
.rendered-content video,
.rendered-content iframe {
    border: 1px solid var(--zt-line);
    border-radius: 8px;
    margin: 1.25rem 0;
    max-width: 100%;
}

.rendered-content table {
    display: block;
    overflow-x: auto;
}

.rendered-content code:not(pre code) {
    background: color-mix(in srgb, var(--zt-accent) 12%, var(--zt-bg));
    border: 1px solid color-mix(in srgb, var(--zt-accent) 20%, var(--zt-line));
    border-radius: 8px;
    font-size: 0.94em;
    font-weight: 500;
    padding: 0.16rem 0.42rem;
    word-break: break-word;
    overflow-wrap: break-word;
}

.highlight,
.rendered-content pre:not(.chroma) {
    background: var(--zt-code-bg);
    border: 1px solid var(--zt-code-border);
    border-radius: 8px;
    box-shadow: var(--zt-code-shadow);
    color: var(--zt-code-text);
    margin: 1.35rem 0;
    font-size: 0.94rem;
    line-height: 1.72;
    overflow: auto;
    overscroll-behavior-x: contain;
    position: relative;
    scrollbar-color: var(--zt-code-accent) transparent;
    scrollbar-width: thin;
}

.file-icon-emoji {
    font-size: 1.25rem;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: 0.55rem;
}

html:not([data-theme="dark"]) .highlight,
html:not([data-theme="dark"]) .rendered-content pre {
    --zt-token-keyword: #a62626 !important;
    --zt-token-string: #2b6f39 !important;
    --zt-token-comment: #7a756b !important;
    --zt-token-number: #b85c00 !important;
    --zt-token-function: #1b5e8c !important;
    --zt-token-type: #8c671b !important;
    --zt-token-variable: #242424 !important;
    --zt-token-operator: #4a4740 !important;
    --zt-code-accent: #b38d49 !important;
}

.highlight::before,
.rendered-content pre:not(.chroma)::before {
    border-radius: 999px;
    color: var(--zt-code-text);
    content: attr(data-code-meta);
    font-family: "Pixelify Sans", "JetBrains Mono", monospace;
    font-size: 0.78rem;
    left: 1rem;
    letter-spacing: 0.04em;
    line-height: 1;
    padding: 0.32rem 0.58rem;
    pointer-events: none;
    position: absolute;
    text-transform: lowercase;
    top: 0.75rem;
    z-index: 3;
}

.highlight pre.chroma,
.rendered-content pre:not(.chroma) {
    margin: 0;
    min-width: 100%;
    padding: 2.7rem 1.1rem 1rem;
}

.highlight .chroma {
    background: transparent !important;
    color: var(--zt-code-text);
}

.highlight .chroma code,
.rendered-content pre code {
    display: block;
    font-family: var(--zt-code-font);
    font-size: inherit;
    font-variant-ligatures: none;
    font-weight: 400;
    line-height: inherit;
}

.highlight .chroma .k,
.highlight .chroma .kc,
.highlight .chroma .kd,
.highlight .chroma .kn,
.highlight .chroma .kp,
.highlight .chroma .kr,
.highlight .chroma .kt {
    color: var(--zt-token-keyword) !important;
}

.highlight .chroma .s,
.highlight .chroma .sa,
.highlight .chroma .sb,
.highlight .chroma .sc,
.highlight .chroma .dl,
.highlight .chroma .sd,
.highlight .chroma .s2,
.highlight .chroma .se,
.highlight .chroma .sh,
.highlight .chroma .si,
.highlight .chroma .sx,
.highlight .chroma .sr,
.highlight .chroma .s1,
.highlight .chroma .ss {
    color: var(--zt-token-string) !important;
}

.highlight .chroma .c,
.highlight .chroma .ch,
.highlight .chroma .cm,
.highlight .chroma .c1,
.highlight .chroma .cs {
    color: var(--zt-token-comment) !important;
    font-style: italic;
}

.highlight .chroma .m,
.highlight .chroma .mb,
.highlight .chroma .mf,
.highlight .chroma .mh,
.highlight .chroma .mi,
.highlight .chroma .il,
.highlight .chroma .mo {
    color: var(--zt-token-number) !important;
}

.highlight .chroma .nf,
.highlight .chroma .fm {
    color: var(--zt-token-function) !important;
}

.highlight .chroma .na,
.highlight .chroma .nc,
.highlight .chroma .nd,
.highlight .chroma .ne,
.highlight .chroma .nn,
.highlight .chroma .nt,
.highlight .chroma .nx,
.highlight .chroma .nv,
.highlight .chroma .vc,
.highlight .chroma .vg,
.highlight .chroma .vi {
    color: var(--zt-token-type) !important;
}

.highlight .chroma .o,
.highlight .chroma .ow,
.highlight .chroma .p {
    color: var(--zt-token-operator) !important;
}

.highlight .chroma .nb,
.highlight .chroma .bp,
.highlight .chroma .no {
    color: var(--zt-token-variable) !important;
}

.highlight .chroma .err {
    background: rgba(255, 90, 90, 0.12);
    color: #ff9c9c !important;
}

.highlight[data-code-variant="bash"],
.rendered-content pre[data-code-variant="bash"]:not(.chroma) {
    --zt-code-accent: #78d28b;
    --zt-code-accent-soft: rgba(120, 210, 139, 0.18);
    --zt-code-accent-strong: rgba(120, 210, 139, 0.32);
    --zt-code-panel: linear-gradient(180deg, rgba(15, 39, 22, 0.78), rgba(8, 8, 8, 0.96));
    --zt-token-keyword: #78d28b;
    --zt-token-string: #d6f5bc;
    --zt-token-comment: #7c9d84;
    --zt-token-number: #8de0d4;
    --zt-token-function: #9cf3ae;
    --zt-token-type: #b8f0c5;
    --zt-token-variable: #f2f7ef;
    --zt-token-operator: #9cf3ae;
}

.highlight[data-code-language="python"],
.rendered-content pre[data-code-language="python"]:not(.chroma) {
    --zt-code-accent: #7fb0ff;
    --zt-code-accent-soft: rgba(127, 176, 255, 0.18);
    --zt-code-accent-strong: rgba(127, 176, 255, 0.3);
    --zt-code-panel: linear-gradient(180deg, rgba(14, 24, 48, 0.82), rgba(8, 8, 8, 0.98));
    --zt-token-keyword: #ffd166;
    --zt-token-string: #8ce99a;
    --zt-token-comment: #8aa0bf;
    --zt-token-number: #f7a072;
    --zt-token-function: #7fb0ff;
    --zt-token-type: #a5d8ff;
    --zt-token-variable: #f4efe6;
    --zt-token-operator: #8ce3ff;
}

.highlight[data-code-language="javascript"],
.rendered-content pre[data-code-language="javascript"]:not(.chroma) {
    --zt-code-accent: #f7df6d;
    --zt-code-accent-soft: rgba(247, 223, 109, 0.18);
    --zt-code-accent-strong: rgba(247, 223, 109, 0.32);
    --zt-code-panel: linear-gradient(180deg, rgba(51, 43, 14, 0.8), rgba(10, 10, 10, 0.97));
    --zt-token-keyword: #ffd166;
    --zt-token-string: #95e1a3;
    --zt-token-comment: #a8945f;
    --zt-token-number: #ff9f68;
    --zt-token-function: #7ee7ff;
    --zt-token-type: #ffe58a;
    --zt-token-variable: #f5f2d0;
    --zt-token-operator: #8ee7f5;
}

.highlight[data-code-language="typescript"],
.rendered-content pre[data-code-language="typescript"]:not(.chroma) {
    --zt-code-accent: #6ea8ff;
    --zt-code-accent-soft: rgba(110, 168, 255, 0.18);
    --zt-code-accent-strong: rgba(110, 168, 255, 0.32);
    --zt-code-panel: linear-gradient(180deg, rgba(14, 24, 48, 0.82), rgba(8, 8, 8, 0.97));
    --zt-token-keyword: #8cc8ff;
    --zt-token-string: #9be7a7;
    --zt-token-comment: #8ea4c6;
    --zt-token-number: #ff9b71;
    --zt-token-function: #5dd8ff;
    --zt-token-type: #c2d8ff;
    --zt-token-variable: #eef4ff;
    --zt-token-operator: #86dfff;
}

.highlight[data-code-language="go"],
.rendered-content pre[data-code-language="go"]:not(.chroma) {
    --zt-code-accent: #78d7ff;
    --zt-code-accent-soft: rgba(120, 215, 255, 0.18);
    --zt-code-accent-strong: rgba(120, 215, 255, 0.32);
    --zt-code-panel: linear-gradient(180deg, rgba(13, 35, 44, 0.82), rgba(8, 8, 8, 0.97));
    --zt-token-keyword: #79d2ff;
    --zt-token-string: #a5e7b0;
    --zt-token-comment: #84aab6;
    --zt-token-number: #ffab73;
    --zt-token-function: #6df4ff;
    --zt-token-type: #c3f1ff;
    --zt-token-variable: #eefcff;
    --zt-token-operator: #8fe8ff;
}

.highlight[data-code-language="c"],
.rendered-content pre[data-code-language="c"]:not(.chroma) {
    --zt-code-accent: #ff7a90;
    --zt-code-accent-soft: rgba(255, 122, 144, 0.18);
    --zt-code-accent-strong: rgba(255, 122, 144, 0.32);
    --zt-code-panel: linear-gradient(180deg, rgba(50, 15, 22, 0.82), rgba(8, 8, 8, 0.97));
    --zt-token-keyword: #ff9db1;
    --zt-token-string: #b2efb3;
    --zt-token-comment: #b48892;
    --zt-token-number: #ffc178;
    --zt-token-function: #ffb1c1;
    --zt-token-type: #ffd0d9;
    --zt-token-variable: #fff1f5;
    --zt-token-operator: #ffc0cc;
}

.highlight[data-code-variant="systems"],
.rendered-content pre[data-code-variant="systems"]:not(.chroma) {
    --zt-code-accent: #f08f6e;
    --zt-code-accent-soft: rgba(240, 143, 110, 0.18);
    --zt-code-accent-strong: rgba(240, 143, 110, 0.32);
    --zt-code-panel: linear-gradient(180deg, rgba(48, 21, 16, 0.82), rgba(8, 8, 8, 0.97));
    --zt-token-keyword: #ffad8a;
    --zt-token-string: #b6e880;
    --zt-token-comment: #b18d81;
    --zt-token-number: #ffbe7a;
    --zt-token-function: #f8b195;
    --zt-token-type: #ffd0a8;
    --zt-token-variable: #f7ece5;
    --zt-token-operator: #ffbb8a;
}

.highlight[data-code-variant="markup"],
.rendered-content pre[data-code-variant="markup"]:not(.chroma) {
    --zt-code-accent: #ff8fab;
    --zt-code-accent-soft: rgba(255, 143, 171, 0.18);
    --zt-code-accent-strong: rgba(255, 143, 171, 0.32);
    --zt-code-panel: linear-gradient(180deg, rgba(51, 17, 31, 0.82), rgba(8, 8, 8, 0.97));
    --zt-token-keyword: #ff8fab;
    --zt-token-string: #9bf6d1;
    --zt-token-comment: #b18995;
    --zt-token-number: #ffc09f;
    --zt-token-function: #8ce4ff;
    --zt-token-type: #ffcad4;
    --zt-token-variable: #fff1f4;
    --zt-token-operator: #ffb3c7;
}

.highlight[data-code-variant="styles"],
.rendered-content pre[data-code-variant="styles"]:not(.chroma) {
    --zt-code-accent: #64dfdf;
    --zt-code-accent-soft: rgba(100, 223, 223, 0.18);
    --zt-code-accent-strong: rgba(100, 223, 223, 0.32);
    --zt-code-panel: linear-gradient(180deg, rgba(8, 40, 40, 0.82), rgba(8, 8, 8, 0.97));
    --zt-token-keyword: #64dfdf;
    --zt-token-string: #b8f2e6;
    --zt-token-comment: #7ba5a5;
    --zt-token-number: #f3c969;
    --zt-token-function: #80ffdb;
    --zt-token-type: #baf7ff;
    --zt-token-variable: #efffff;
    --zt-token-operator: #9ff3ff;
}

.highlight[data-code-variant="data"],
.rendered-content pre[data-code-variant="data"]:not(.chroma) {
    --zt-code-accent: #c77dff;
    --zt-code-accent-soft: rgba(199, 125, 255, 0.18);
    --zt-code-accent-strong: rgba(199, 125, 255, 0.32);
    --zt-code-panel: linear-gradient(180deg, rgba(36, 16, 48, 0.82), rgba(8, 8, 8, 0.97));
    --zt-token-keyword: #d0b3ff;
    --zt-token-string: #9ef0c9;
    --zt-token-comment: #a289b0;
    --zt-token-number: #ffb870;
    --zt-token-function: #cabdff;
    --zt-token-type: #edd6ff;
    --zt-token-variable: #f8f0ff;
    --zt-token-operator: #d9b8ff;
}

.highlight[data-code-variant="query"],
.rendered-content pre[data-code-variant="query"]:not(.chroma) {
    --zt-code-accent: #f28482;
    --zt-code-accent-soft: rgba(242, 132, 130, 0.18);
    --zt-code-accent-strong: rgba(242, 132, 130, 0.32);
    --zt-code-panel: linear-gradient(180deg, rgba(48, 16, 16, 0.84), rgba(8, 8, 8, 0.97));
    --zt-token-keyword: #ff9d9d;
    --zt-token-string: #9fe3af;
    --zt-token-comment: #a78989;
    --zt-token-number: #f7c06a;
    --zt-token-function: #ffb4a2;
    --zt-token-type: #ffd6cd;
    --zt-token-variable: #fff0eb;
    --zt-token-operator: #ffd0c3;
}

.highlight[data-code-variant="prose"],
.rendered-content pre[data-code-variant="prose"]:not(.chroma) {
    --zt-code-accent: #9ec5ab;
    --zt-code-accent-soft: rgba(158, 197, 171, 0.18);
    --zt-code-accent-strong: rgba(158, 197, 171, 0.32);
    --zt-code-panel: linear-gradient(180deg, rgba(22, 36, 26, 0.82), rgba(8, 8, 8, 0.97));
    --zt-token-keyword: #d6efda;
    --zt-token-string: #bcefd3;
    --zt-token-comment: #92a593;
    --zt-token-number: #f6c56b;
    --zt-token-function: #c8f3d6;
    --zt-token-type: #dff7e7;
    --zt-token-variable: #f3fff6;
    --zt-token-operator: #d7efdc;
}

.highlight[data-code-language="bash"],
.rendered-content pre[data-code-language="bash"]:not(.chroma) {
    --zt-code-accent: #78d28b;
    --zt-code-accent-soft: rgba(120, 210, 139, 0.18);
    --zt-code-accent-strong: rgba(120, 210, 139, 0.32);
    --zt-code-panel: linear-gradient(180deg, rgba(15, 39, 22, 0.78), rgba(8, 8, 8, 0.96));
    --zt-token-keyword: #78d28b;
    --zt-token-string: #d6f5bc;
    --zt-token-comment: #7c9d84;
    --zt-token-number: #8de0d4;
    --zt-token-function: #9cf3ae;
    --zt-token-type: #b8f0c5;
    --zt-token-variable: #f2f7ef;
    --zt-token-operator: #9cf3ae;
}

.highlight[data-code-language="asm"],
.rendered-content pre[data-code-language="asm"]:not(.chroma) {
    --zt-code-accent: #ffb703;
    --zt-code-accent-soft: rgba(255, 183, 3, 0.18);
    --zt-code-accent-strong: rgba(255, 183, 3, 0.32);
    --zt-code-panel: linear-gradient(180deg, rgba(46, 33, 0, 0.8), rgba(8, 8, 8, 0.97));
    --zt-token-keyword: #ffb703;
    --zt-token-string: #ffd166;
    --zt-token-comment: #b58d3d;
    --zt-token-number: #ff9f1c;
    --zt-token-function: #ffe57f;
    --zt-token-type: #ffe082;
    --zt-token-variable: #fff8e1;
    --zt-token-operator: #ffd54f;
}

.highlight[data-code-language="arm"],
.rendered-content pre[data-code-language="arm"]:not(.chroma) {
    --zt-code-accent: #fb8500;
    --zt-code-accent-soft: rgba(251, 133, 0, 0.18);
    --zt-code-accent-strong: rgba(251, 133, 0, 0.32);
    --zt-code-panel: linear-gradient(180deg, rgba(46, 25, 0, 0.82), rgba(8, 8, 8, 0.97));
    --zt-token-keyword: #fb8500;
    --zt-token-string: #ffb703;
    --zt-token-comment: #a76d33;
    --zt-token-number: #ff7b00;
    --zt-token-function: #ffcc80;
    --zt-token-type: #ffe0b2;
    --zt-token-variable: #fff3e0;
    --zt-token-operator: #ffa726;
}

.highlight[data-code-language="cpp"],
.rendered-content pre[data-code-language="cpp"]:not(.chroma) {
    --zt-code-accent: #00b4d8;
    --zt-code-accent-soft: rgba(0, 180, 216, 0.18);
    --zt-code-accent-strong: rgba(0, 180, 216, 0.32);
    --zt-code-panel: linear-gradient(180deg, rgba(0, 36, 44, 0.82), rgba(8, 8, 8, 0.97));
    --zt-token-keyword: #90e0ef;
    --zt-token-string: #b5e2fa;
    --zt-token-comment: #48cae4;
    --zt-token-number: #03045e;
    --zt-token-function: #00b4d8;
    --zt-token-type: #caf0f8;
    --zt-token-variable: #f0f8ff;
    --zt-token-operator: #0077b6;
}

.highlight[data-code-language="csharp"],
.rendered-content pre[data-code-language="csharp"]:not(.chroma) {
    --zt-code-accent: #9d4edd;
    --zt-code-accent-soft: rgba(157, 78, 221, 0.18);
    --zt-code-accent-strong: rgba(157, 78, 221, 0.32);
    --zt-code-panel: linear-gradient(180deg, rgba(26, 12, 38, 0.82), rgba(8, 8, 8, 0.97));
    --zt-token-keyword: #c77dff;
    --zt-token-string: #e0aaff;
    --zt-token-comment: #7b2cbf;
    --zt-token-number: #e8c5ff;
    --zt-token-function: #9d4edd;
    --zt-token-type: #edd6ff;
    --zt-token-variable: #f8f0ff;
    --zt-token-operator: #d9b8ff;
}

.highlight[data-code-language="lua"],
.rendered-content pre[data-code-language="lua"]:not(.chroma) {
    --zt-code-accent: #023e8a;
    --zt-code-accent-soft: rgba(2, 62, 138, 0.18);
    --zt-code-accent-strong: rgba(2, 62, 138, 0.32);
    --zt-code-panel: linear-gradient(180deg, rgba(0, 12, 28, 0.85), rgba(8, 8, 8, 0.97));
    --zt-token-keyword: #0096c7;
    --zt-token-string: #90e0ef;
    --zt-token-comment: #0077b6;
    --zt-token-number: #03045e;
    --zt-token-function: #00b4d8;
    --zt-token-type: #caf0f8;
    --zt-token-variable: #edf2f4;
    --zt-token-operator: #0077b6;
}

.highlight[data-code-language="java"],
.rendered-content pre[data-code-language="java"]:not(.chroma) {
    --zt-code-accent: #f35b04;
    --zt-code-accent-soft: rgba(243, 91, 4, 0.18);
    --zt-code-accent-strong: rgba(243, 91, 4, 0.32);
    --zt-code-panel: linear-gradient(180deg, rgba(38, 14, 0, 0.82), rgba(8, 8, 8, 0.97));
    --zt-token-keyword: #ffb703;
    --zt-token-string: #fb8500;
    --zt-token-comment: #a54b1b;
    --zt-token-number: #ff7b00;
    --zt-token-function: #f35b04;
    --zt-token-type: #ffe0b2;
    --zt-token-variable: #fff3e0;
    --zt-token-operator: #ffa726;
}

.highlight[data-code-language="rust"],
.rendered-content pre[data-code-language="rust"]:not(.chroma) {
    --zt-code-accent: #dea584;
    --zt-code-accent-soft: rgba(222, 165, 132, 0.18);
    --zt-code-accent-strong: rgba(222, 165, 132, 0.32);
    --zt-code-panel: linear-gradient(180deg, rgba(38, 26, 20, 0.82), rgba(8, 8, 8, 0.97));
    --zt-token-keyword: #e59866;
    --zt-token-string: #f5cbf7;
    --zt-token-comment: #8e807a;
    --zt-token-number: #f8c471;
    --zt-token-function: #dea584;
    --zt-token-type: #fbeee6;
    --zt-token-variable: #fdfefe;
    --zt-token-operator: #f5b041;
}

.highlight[data-code-language="perl"],
.rendered-content pre[data-code-language="perl"]:not(.chroma) {
    --zt-code-accent: #e0115f;
    --zt-code-accent-soft: rgba(224, 17, 95, 0.18);
    --zt-code-accent-strong: rgba(224, 17, 95, 0.32);
    --zt-code-panel: linear-gradient(180deg, rgba(38, 0, 16, 0.82), rgba(8, 8, 8, 0.97));
    --zt-token-keyword: #f06292;
    --zt-token-string: #ff80ab;
    --zt-token-comment: #880e4f;
    --zt-token-number: #ff4081;
    --zt-token-function: #e0115f;
    --zt-token-type: #fce4ec;
    --zt-token-variable: #fff0f5;
    --zt-token-operator: #f50057;
}

.highlight[data-code-language="sql"],
.rendered-content pre[data-code-language="sql"]:not(.chroma) {
    --zt-code-accent: #e0aaff;
    --zt-code-accent-soft: rgba(224, 170, 255, 0.18);
    --zt-code-accent-strong: rgba(224, 170, 255, 0.32);
    --zt-code-panel: linear-gradient(180deg, rgba(28, 12, 38, 0.82), rgba(8, 8, 8, 0.97));
    --zt-token-keyword: #c77dff;
    --zt-token-string: #9d4edd;
    --zt-token-comment: #7b2cbf;
    --zt-token-number: #e8c5ff;
    --zt-token-function: #e0aaff;
    --zt-token-type: #edd6ff;
    --zt-token-variable: #f8f0ff;
    --zt-token-operator: #d9b8ff;
}

.highlight[data-code-language="powershell"],
.rendered-content pre[data-code-language="powershell"]:not(.chroma) {
    --zt-code-accent: #2a6f97;
    --zt-code-accent-soft: rgba(42, 111, 151, 0.18);
    --zt-code-accent-strong: rgba(42, 111, 151, 0.32);
    --zt-code-panel: linear-gradient(180deg, rgba(8, 28, 38, 0.82), rgba(8, 8, 8, 0.97));
    --zt-token-keyword: #61a5c2;
    --zt-token-string: #89c2d9;
    --zt-token-comment: #014f86;
    --zt-token-number: #a9d6e5;
    --zt-token-function: #2a6f97;
    --zt-token-type: #e1f5fe;
    --zt-token-variable: #edf8ff;
    --zt-token-operator: #468faf;
}

.highlight[data-code-language="html"],
.rendered-content pre[data-code-language="html"]:not(.chroma) {
    --zt-code-accent: #f72585;
    --zt-code-accent-soft: rgba(247, 37, 133, 0.18);
    --zt-code-accent-strong: rgba(247, 37, 133, 0.32);
    --zt-code-panel: linear-gradient(180deg, rgba(38, 5, 20, 0.82), rgba(8, 8, 8, 0.97));
    --zt-token-keyword: #f72585;
    --zt-token-string: #7209b7;
    --zt-token-comment: #3f0713;
    --zt-token-number: #b5179e;
    --zt-token-function: #480ca8;
    --zt-token-type: #fce4ec;
    --zt-token-variable: #fff0f5;
    --zt-token-operator: #560bad;
}

.highlight[data-code-language="css"],
.rendered-content pre[data-code-language="css"]:not(.chroma) {
    --zt-code-accent: #7209b7;
    --zt-code-accent-soft: rgba(114, 9, 183, 0.18);
    --zt-code-accent-strong: rgba(114, 9, 183, 0.32);
    --zt-code-panel: linear-gradient(180deg, rgba(18, 0, 38, 0.82), rgba(8, 8, 8, 0.97));
    --zt-token-keyword: #b5179e;
    --zt-token-string: #f72585;
    --zt-token-comment: #480ca8;
    --zt-token-number: #560bad;
    --zt-token-function: #3f0712;
    --zt-token-type: #edd6ff;
    --zt-token-variable: #f8f0ff;
    --zt-token-operator: #3a0ca3;
}

.code-copy {
    background: rgba(0, 0, 0, 0.35);
    color: var(--zt-code-text);
    font-family: var(--zt-code-font);
    font-size: 0.78rem;
    font-weight: 500;
    padding: 0.34rem 0.72rem;
    position: absolute;
    right: 0.95rem;
    top: 0.64rem;
    z-index: 3;
}

.code-copy-copy {
    border: 1px solid transparent;
    color: var(--zt-code-text);
    font-family: var(--zt-code-font);
    font-size: 0.78rem;
    font-weight: 500;
    padding: 0.34rem 0.72rem;
    position: absolute;
    right: 0.95rem;
    top: 0.64rem;
    z-index: 3;
    border-radius: 15px;
}

.toc-panel {
    padding-top: 0.35rem;
}

.toc-details {
    display: block;
    position: sticky;
    top: calc(var(--top-bar-height) + 2rem);
    max-height: calc(100vh - var(--top-bar-height) - 4rem);
    overflow-y: auto;
    scrollbar-width: none;
}

.toc-details::-webkit-scrollbar {
    display: none;
}

.toc-title {
    color: var(--zt-text);
    font-family: "Pixelify Sans", "JetBrains Mono", monospace;
    font-size: 1.45rem;
    margin: 0 0 1rem;
    text-transform: lowercase;
    list-style: none;
    cursor: default;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
}

.toc-title::-webkit-details-marker {
    display: none;
}

.toc-arrow {
    display: none;
}

.toc-content {
    text-align: left;
    color: var(--zt-muted);
}

.toc-content nav ul {
    list-style: none;
    margin: 0;
    padding-left: 0;
}

.toc-content nav ul ul {
    margin-top: 0.45rem;
    padding-left: 1rem;
    padding-right: 0;
}

.toc-content li {
    margin: 0.45rem 0;
}

.toc-content a {
    color: var(--zt-muted);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.toc-content a::before {
    content: "·";
    font-weight: bold;
    color: var(--zt-line-strong);
    transition: color 140ms ease, transform 140ms ease;
}

.toc-content a:hover {
    color: var(--zt-accent);
}

.toc-content a:hover::before {
    color: var(--zt-accent);
    transform: translateX(1px);
}

.share-row {
    align-items: center;
    border-top: 1px solid var(--zt-line);
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-top: 2rem;
    padding-top: 1.4rem;
}

.share-label {
    color: var(--zt-muted);
    font-size: 1.15rem;
    margin-right: 0.25rem;
    text-transform: lowercase;
}

.share-button {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.95rem;
    border: 1px solid var(--zt-line-strong);
    background: var(--zt-surface);
    color: var(--zt-text);
    text-decoration: none;
    text-transform: lowercase;
    border-radius: 999px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 140ms ease;
}

.share-button svg {
    flex-shrink: 0;
    transition: transform 140ms ease;
}

.share-button:hover svg {
    transform: scale(1.1);
}

.share-button.share-x:hover {
    background: #0f1419;
    border-color: #0f1419;
    color: #ffffff;
}

html[data-theme="dark"] .share-button.share-x:hover {
    background: #ffffff;
    border-color: #ffffff;
    color: #0f1419;
}

.share-button.share-linkedin:hover {
    background: #0077b5;
    border-color: #0077b5;
    color: #ffffff;
}

.share-button.share-reddit:hover {
    background: #ff4500;
    border-color: #ff4500;
    color: #ffffff;
}

.share-button.share-telegram:hover {
    background: #24a1de;
    border-color: #24a1de;
    color: #ffffff;
}

.share-button.share-whatsapp:hover {
    background: #25d366;
    border-color: #25d366;
    color: #ffffff;
}

.share-button.share-copy:hover {
    background: var(--zt-accent);
    border-color: var(--zt-accent);
    color: var(--zt-bg);
}

.menu-toggle:hover,
.code-copy:hover,
.code-copy-copy:hover {
    border-color: var(--zt-accent);
    color: var(--zt-accent);
}

.search-shell {
    margin-top: 1rem;
}

.search-input {
    background: transparent;
    border: 1px solid var(--zt-line-strong);
    color: var(--zt-text);
    font: inherit;
    margin-bottom: 1rem;
    outline: none;
    padding: 0.8rem 0.9rem;
    width: min(100%, 38rem);
}

.search-input::placeholder {
    color: var(--zt-muted);
}

.search-input:focus {
    border-color: var(--zt-accent);
}

.search-results {
    margin-top: 1rem;
}

.search-results .file-meta {
    max-width: 34ch;
}

.search-results .file-meta span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-empty {
    color: var(--zt-muted);
}

.read-more-link {
    margin-top: 1.6rem;
}

.read-more-link a {
    align-items: center;
    background: var(--zt-surface);
    border: 1px solid var(--zt-line-strong);
    border-radius: 999px;
    color: var(--zt-text);
    display: inline-flex;
    font-family: "Pixelify Sans", "JetBrains Mono", monospace;
    font-size: 0.9rem;
    gap: 0.4rem;
    letter-spacing: 0.02em;
    padding: 0.45rem 1.1rem;
    text-decoration: none;
    text-transform: lowercase;
    transition: background 140ms ease, border-color 140ms ease, transform 140ms ease, color 140ms ease;
}

.read-more-link a:hover {
    background: var(--zt-surface-strong);
    border-color: var(--zt-accent);
    color: var(--zt-accent);
    transform: translateX(4px);
}

@media screen and (max-width: 1024px) {

    .page-grid.has-toc {
        display: flex;
        flex-direction: column;
    }

    .toc-panel {
        order: -1;
        width: 100%;
        margin-bottom: 1.5rem;
    }

    .toc-details {
        position: static;
        max-height: none;
        overflow-y: visible;
        background: var(--zt-surface);
        border: 1px solid var(--zt-line-strong);
        border-radius: 8px;
        padding: 0.75rem 1rem;
    }

    .toc-title {
        cursor: pointer;
        pointer-events: auto;
        justify-content: space-between;
        font-size: 1.15rem;
        margin: 0;
    }

    .toc-arrow {
        display: inline-flex;
        transition: transform 140ms ease;
    }

    .toc-details[open] .toc-arrow {
        transform: rotate(180deg);
    }

    .toc-content {
        text-align: left;
        margin-top: 0.75rem;
        padding-top: 0.75rem;
        border-top: 1px solid var(--zt-line);
    }

    .toc-content nav ul ul {
        padding-left: 1rem;
        padding-right: 0;
    }
}

@media screen and (max-width: 900px) {
    :root {
        --top-bar-height: 54px;
    }

    .desktop-nav {
        display: none;
    }

    .menu-toggle {
        display: inline-flex;
    }

    .side-bar {
        gap: 1.4rem;
        grid-template-columns: 1fr;
    }

    #posts {
        display: none;
    }
}

@media screen and (max-width: 640px) {
    body {
        font-size: 0.96rem;
    }

    .content-shell {
        width: 100%;
    }

    .top-bar-row {
        min-height: auto;
        padding: 0.55rem 0;
    }

    .top-bar-left,
    .top-bar-right {
        gap: 0.55rem;
    }

    .top-bar-left .file-link img,
    .top-bar-right .file-link img {
        padding-right: 0.35rem;
    }

    .file {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.45rem;
    }

    .file-meta {
        font-size: 0.92rem;
        gap: 0.6rem;
        justify-content: flex-start;
        max-width: none;
        text-align: left;
    }

    .brand-heading,
    .feature-title a,
    .post-title-main a {
        font-size: clamp(1.8rem, 9vw, 2.6rem);
    }

    .rendered-content {
        font-size: 0.98rem;
        line-height: 1.76;
    }

    .rendered-content img,
    .rendered-content video,
    .rendered-content iframe {
        border-radius: 8px;
    }

    .theme-toggle {
        padding-left: 0.65rem;
        padding-right: 0.65rem;
    }

    .post-hero img {
        aspect-ratio: 4 / 3;
    }

    .post-hero-tags {
        left: 0.75rem;
        top: 0.75rem;
    }

    .highlight pre,
    .rendered-content pre:not(.chroma) {
        padding: 2.7rem 0.9rem 0.9rem;
    }

    .highlight,
    .rendered-content pre:not(.chroma) {
        border-left: 0;
        border-radius: 8px;
        font-size: 0.84rem;
        margin-left: calc(-1 * var(--left-padding));
        margin-right: calc(-1 * var(--right-padding));
        width: calc(100% + var(--left-padding) + var(--right-padding));
    }

    .highlight::before,
    .rendered-content pre:not(.chroma)::before {
        left: 0.85rem;
        max-width: calc(100% - 6.35rem);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .highlight::after,
    .rendered-content pre:not(.chroma)::after {
        left: 0.85rem;
        right: 5rem;
        top: 2.05rem;
    }

    .code-copy {
        padding-left: 0.62rem;
        padding-right: 0.62rem;
        right: 0.8rem;
        top: 0.6rem;
    }

    .code-copy-copy {
        padding-left: 0.62rem;
        padding-right: 0.62rem;
        right: 0.8rem;
        top: 0.6rem;
    }

    .share-row {
        align-items: stretch;
    }

    .share-button {
        justify-content: center;
    }
}

/* Repo Explorer styling */
.repo-explorer {
    background: var(--zt-surface);
    border: 1px solid var(--zt-line-strong);
    border-radius: 8px;
    margin-bottom: 2rem;
    overflow: hidden;
    width: 100%;
}

.repo-header {
    background: var(--zt-surface-strong);
    border-bottom: 1px solid var(--zt-line-strong);
    padding: 0.75rem 1rem;
}

.repo-breadcrumb {
    font-family: "JetBrains Mono", monospace;
    font-size: 0.9rem;
    color: var(--zt-muted);
}

.repo-breadcrumb a {
    color: var(--zt-text);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.repo-breadcrumb a:hover {
    border-color: var(--zt-accent);
    color: var(--zt-accent);
}

.repo-current {
    color: var(--zt-accent);
    font-weight: 600;
}

.repo-files {
    display: flex;
    flex-direction: column;
}

.file-row {
    align-items: center;
    border-bottom: 1px solid var(--zt-line);
    display: grid;
    grid-template-columns: minmax(0, 2fr) 12ch 18ch;
    padding: 0.65rem 1rem;
    transition: background 120ms ease;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.file-row:last-child {
    border-bottom: none;
}

.file-row:hover {
    background: var(--zt-surface-strong);
}

.file-row.active {
    background: color-mix(in srgb, var(--zt-accent) 8%, var(--zt-bg));
    border-left: 3px solid var(--zt-accent);
    padding-left: calc(1rem - 3px);
}

.file-link {
    align-items: center;
    display: flex;
    gap: 0.5rem;
    text-decoration: none;
    color: var(--zt-text);
}

.file-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
}

.file-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: "JetBrains Mono", monospace;
    font-size: 0.9rem;
}

.file-size,
.file-date {
    color: var(--zt-muted);
    font-family: "JetBrains Mono", monospace;
    font-size: 0.85rem;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Repo File Viewer styling */
.repo-file-viewer {
    background: rgb(15, 15, 15);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    margin-bottom: 2rem;
    overflow: hidden;
    width: 100%;
}

.viewer-header {
    background: rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 1rem;
}

#viewer-filename {
    font-family: "JetBrains Mono", monospace;
    font-size: 0.88rem;
    color: #f4efe6;
}

.viewer-close {
    background: transparent;
    border: none;
    color: var(--zt-muted);
    cursor: pointer;
    font-size: 1.5rem;
    line-height: 1;
    padding: 0;
    transition: color 120ms ease;
}

.viewer-close:hover {
    color: var(--zt-accent);
}

.viewer-body {
    padding: 1rem;
    overflow: auto;
    max-height: 75vh;
}

.viewer-body .highlight {
    margin: 0;
    border: none;
    box-shadow: none;
    background: transparent;
}

#github-code-viewer .repo-files .highlight {
    margin: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.viewer-body pre {
    padding: 0;
}

.viewer-body pre code {
    font-size: 0.88rem;
}

.image-preview-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
}

.image-preview-wrapper img {
    max-height: 60vh;
    object-fit: contain;
    border: none !important;
    margin: 0 !important;
}

/* Responsive file explorer */
@media screen and (max-width: 640px) {
    .file-row {
        grid-template-columns: minmax(0, 1fr) 10ch;
    }

    .file-date {
        display: none;
    }

    .repo-explorer {
        margin-bottom: 1.5rem;
    }

    .repo-file-viewer {
        margin-bottom: 1.5rem;
    }

    .viewer-body {
        padding: 0.65rem;
        max-height: 60vh;
    }
}