/* Chirpy 7.2.4 token bridge. Article text, layout, links and post files are unchanged. */
html[data-tront-theme-surface="blog"] {
    --tront-accent: var(--te-accent);
    --tront-accent-secondary: var(--te-secondary);
    --tront-accent-glow: color-mix(in srgb, var(--te-accent) 24%, transparent);
    --text-color: var(--te-ink);
    --heading-color: var(--te-ink);
    --kbd-text-color: var(--te-ink);
    --code-color: var(--te-ink);
    --prompt-text-color: var(--te-ink);
    --topbar-text-color: var(--te-ink);
    --post-list-text-color: var(--te-ink);
    --btn-patinator-text-color: var(--te-ink);
    --filepath-text-color: var(--te-ink);
    --text-muted-color: var(--te-muted);
    --text-muted-highlight-color: var(--te-muted);
    --label-color: var(--te-muted);
    --blockquote-text-color: var(--te-muted);
    --site-subtitle-color: var(--te-muted);
    --sidebar-muted-color: var(--te-muted);
    --search-icon-color: var(--te-muted);
    --btn-share-color: var(--te-muted);
    --highlight-lineno-color: var(--te-muted);
    --code-header-text-color: var(--te-muted);
    --code-header-muted-color: var(--te-muted);
    --code-header-icon-color: var(--te-muted);
    --link-color: var(--te-accent);
    --sidebar-active-color: var(--te-accent);
    --sidebar-btn-color: var(--te-accent);
    --site-title-color: var(--te-accent);
    --toc-highlight: var(--te-accent);
    --btn-share-hover-color: var(--te-accent);
    --categories-icon-hover-color: var(--te-accent);
    --highlighter-rouge-color: var(--te-accent);
    --input-focus-border-color: var(--te-accent);
    --checkbox-checked-color: var(--te-accent);
    --main-bg: color-mix(in srgb, var(--te-bg) 94%, var(--te-accent));
    --sidebar-bg: var(--te-panel-fill);
    --topbar-bg: var(--te-panel-fill);
    --highlight-bg-color: var(--te-panel);
    --card-bg: var(--te-panel-fill);
    --mask-bg: var(--te-panel);
    --button-bg: var(--te-elem);
    --sidebar-btn-bg: var(--te-elem);
    --card-header-bg: var(--te-elem);
    --tag-hover: var(--te-elem);
    --search-tag-bg: var(--te-elem);
    --inline-code-bg: var(--te-elem);
    --kbd-bg-color: var(--te-elem);
    --tb-even-bg: var(--te-elem);
    --prompt-tip-bg: var(--te-elem);
    --prompt-info-bg: var(--te-elem);
    --prompt-warning-bg: var(--te-elem);
    --prompt-danger-bg: var(--te-elem);
    --sidebar-hover-bg: var(--te-hover);
    --card-hover-bg: var(--te-hover);
    --card-hovor-bg: var(--te-hover);
    --categories-hover-bg: var(--te-hover);
    --btn-paginator-hover-color: var(--te-hover);
    --footnote-target-bg: var(--te-hover);
    --tb-odd-bg: var(--te-hover);
    --main-border-color: var(--te-line);
    --blockquote-border-color: var(--te-line);
    --btn-border-color: var(--te-line);
    --btn-backtotop-border-color: var(--te-line);
    --sidebar-border-color: var(--te-line);
    --avatar-border-color: var(--te-line);
    --search-border-color: var(--te-line);
    --toc-popup-border-color: var(--te-line);
    --tb-border-color: var(--te-line);
    --tag-border: var(--te-line);
    --categories-border: var(--te-line);
    --language-border-color: var(--te-line);
    --kbd-wrap-color: var(--te-line);
    --timeline-color: var(--te-line);
    --timeline-year-dot-color: var(--te-line);
    --dash-color: var(--te-line);
    --checkbox-color: var(--te-line);
    --prompt-tip-icon-color: var(--te-green);
    --clipboard-checked-color: var(--te-green);
    --prompt-info-icon-color: var(--te-blue);
    --prompt-warning-icon-color: var(--te-orange);
    --prompt-danger-icon-color: var(--te-red);
    --timeline-node-bg: var(--te-secondary);
    --link-underline-color: var(--te-line);
    --img-bg: var(--te-elem);
    --tag-shadow: transparent;
}
html[data-tront-theme-surface="blog"] :is(.text-muted, .post-meta, #search-hints) { color: var(--te-muted) !important; }
html[data-tront-theme-surface="blog"] :is(input, button, select) { color: var(--te-ink); }
html[data-tront-theme-surface="blog"] :is(.btn, .page-link) { background-color: var(--te-elem); border-color: var(--te-line); }
html[data-tront-theme-surface="blog"] #archives li:nth-child(odd) { background-image: var(--te-button); }
html[data-tront-theme-surface="blog"] :is(.highlight, .highlight .w) { background-color: var(--te-panel); color: var(--te-ink); }
html[data-tront-theme-surface="blog"] .highlight :is(.c, .ch, .cd, .cm, .cpf, .c1, .cs, .gp, .lineno) { color: var(--te-muted); }
html[data-tront-theme-surface="blog"] .highlight :is(.cp, .nt, .nn, .nc, .no, .kc, .kt, .kd) { color: var(--te-orange); }
html[data-tront-theme-surface="blog"] .highlight :is(.k, .kn, .kp, .kr, .kv, .sa) { color: var(--te-secondary); }
html[data-tront-theme-surface="blog"] .highlight :is(.s, .sb, .sc, .dl, .sd, .s2, .sh, .sx, .s1, .sr, .m, .mb, .mf, .mh, .mi, .il, .mo, .mx, .ss, .gi) { color: var(--te-green); }
html[data-tront-theme-surface="blog"] .highlight :is(.o, .ow, .p, .pi) { color: var(--te-ink); }
html[data-tront-theme-surface="blog"] .highlight :is(.na, .gh) { color: var(--te-blue); background-color: transparent; }
html[data-tront-theme-surface="blog"] .highlight :is(.err, .gd, .si, .se) { color: var(--te-red); background-color: var(--te-elem); }
/* Complete Rouge token coverage, including classes only emitted in light mode. */
html[data-tront-theme-surface="blog"] .highlight :is(.nb, .bp, .ne, .nl, .py, .nv, .vc, .vg, .vi, .vm, .l, .ld) { color: var(--te-orange); }
html[data-tront-theme-surface="blog"] .highlight :is(.nd, .nf, .fm, .gu) { color: var(--te-secondary); }
html[data-tront-theme-surface="blog"] .highlight :is(.gl, .gt) { color: var(--te-muted); }
html[data-tront-theme-surface="blog"] .highlight :is(.ni, .ge, .gs, .gr) { color: var(--te-ink); }
html[data-tront-theme-surface="blog"] .highlight .gi { background-color: var(--te-elem); }
html[data-tront-theme-surface="blog"] input::placeholder { color: var(--te-muted); opacity: 1; }

/* Keep Chirpy's geometry; paint the editor's bounded four-stop wash on its canvas.
   Viewport sizing makes every stop visible instead of stretching one gradient over
   the entire multi-screen post list. It introduces no elements or layout shift. */
html[data-tront-theme-editor][data-tront-theme-surface="blog"] body {
    background-color: var(--te-bg);
    background-image: var(--te-wash);
    background-size: 100vw 100vh;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
html[data-tront-theme-surface="blog"] :is(#sidebar, #topbar-wrapper, #toc-bar) {
    backdrop-filter: blur(var(--te-blur));
    -webkit-backdrop-filter: blur(var(--te-blur));
}
html[data-tront-theme-surface="blog"] .pagination .page-item.disabled .page-link { color: var(--te-muted); }
html[data-tront-theme-surface="blog"] #main-wrapper :is(h1, h2) {
    background-image: var(--tront-heading-gradient, linear-gradient(135deg in srgb, var(--te-accent), var(--te-secondary)));
    background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
html[data-tront-theme-surface="blog"] #sidebar #avatar > img { border: 2px solid var(--te-line); box-shadow: 0 0 16px color-mix(in srgb, var(--te-accent) 24%, transparent); }
html[data-tront-theme-surface="blog"] .card { background: var(--te-panel-fill); backdrop-filter: blur(var(--te-blur)); -webkit-backdrop-filter: blur(var(--te-blur)); border: 1px solid var(--te-line); }
html[data-tront-theme-surface="blog"] .card:hover { border-color: var(--te-accent); box-shadow: 0 0 24px color-mix(in srgb, var(--te-accent) 24%, transparent); }
html[data-tront-theme-surface="blog"] #sidebar .nav-item.active .nav-link { text-shadow: 0 0 10px color-mix(in srgb, var(--te-accent) 24%, transparent); }
html[data-tront-theme-surface="blog"] :is(.btn, .page-link, .post-preview):is(:hover, :focus) { text-decoration: none; }
/* Change ink/grounds together; keep interaction motion without color tweening. */
html[data-tront-theme-surface="blog"] :is(a, button, input, .btn, .page-link),
html[data-tront-theme-surface="blog"] #sidebar :is(.site-title, .sidebar-bottom a) { transition-property: transform, box-shadow; }

/* Preserve caption/disabled-navigation roles without fixed gray ink. */
html[data-tront-theme-surface="blog"] .content :is(img, .popup, video) + em,
html[data-tront-theme-surface="blog"] .post-navigation .btn.disabled { color: var(--te-muted); }

/* Chirpy's prose-link hover uses fixed orange; keep its underline with safe ink. */
html[data-tront-theme-surface="blog"] :is(.content, .post-meta, .post-tags, footer, #access-lastmod, #page-tag, #page-category) a:hover { color: var(--te-accent) !important; border-bottom-color: var(--te-accent); }

/* The inherited blog 404 keeps its composition and readable action labels. */
html[data-tront-theme-surface="blog"] .error-actions a.primary { background: var(--te-button); color: var(--te-ink); }
html[data-tront-theme-surface="blog"] .error-glitch { color: var(--te-muted); opacity: 1; }

/* Sticky contents labels and post-navigation labels switch ink with their grounds. */
html[data-tront-theme-surface="blog"] #toc-bar { transition-property: top, transform; }
html[data-tront-theme-surface="blog"] .post-navigation :is(.btn, .btn:hover)::before { color: var(--te-muted); transition-property: transform, box-shadow; }

/* Search is one rounded surface, including its keyboard focus indicator. */
html[data-tront-theme-surface="blog"] #search-input {
    min-width: 0;
    background: transparent;
    color: var(--te-ink);
    caret-color: var(--te-accent);
    transition: none;
}
html[data-tront-theme-surface="blog"] #search:focus-within {
    border-color: var(--te-accent);
    outline: 2px solid var(--te-accent);
    outline-offset: 2px;
}
html[data-tront-theme-surface="blog"] #search-input:focus-visible { outline: none; }

/* Keep the final navbar geometry while the supported editor awaits DOMContentLoaded.
   Visibility keeps the reserved slot out of focus/accessibility navigation. Without
   JavaScript or native dialog support, no marker is added and [hidden] stays hidden. */
html[data-tront-theme-surface="blog"] #magic-navbar-container #tront-theme-btn[hidden][data-te-pending-slot] {
    display: flex !important;
    visibility: hidden;
    pointer-events: none;
}

/* Keep related posts, comments and copyright in the article's own column. */
html[data-tront-theme-surface="blog"] #main-wrapper main > #tail-wrapper {
    width: 100%;
    margin: 0 !important;
    padding: 0 0.25rem !important;
}
html[data-tront-theme-surface="blog"] #main-wrapper footer {
    height: auto;
    min-height: 0;
    margin-top: 2rem;
    padding: 1.25rem 0 !important;
    background: transparent;
    border-top: 1px solid var(--te-line);
    color: var(--te-muted);
    font-size: max(0.8rem, 14px);
    line-height: 1.6;
}
html[data-tront-theme-surface="blog"] #main-wrapper footer p {
    margin: 0;
    line-height: inherit;
}
html[data-tront-theme-surface="blog"] #main-wrapper footer a { white-space: nowrap; }

/* The pistol recording is 16:10; reserve its real shape before media loads. */
html[data-tront-theme-surface="blog"] .content video[width="960"][height="600"] {
    aspect-ratio: 8 / 5;
}

/* Keep cards and side panels proportional when a wide viewport opens at low zoom. */
html[data-tront-theme-surface="blog"] #main-wrapper > .container {
    max-width: 76rem;
}