:root {
    --bg: #ffffff;
    --fg: #18181b;
    --muted: #71717a;
    --line: #e5e5e5;
    --surface: #fafafa;
    --code-bg: #f4f4f5;
    --accent: #18181b;
    --header-bg: rgba(255, 255, 255, 0.86);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    --radius: 12px;
    --ease: cubic-bezier(.22, .8, .22, 1);
    --wrap: 760px;
    --dusk-header-offset: 96px;
}

@media (max-width: 899px) {
    :root {
        --dusk-header-offset: 82px;
    }
}

[data-theme="dark"] {
    --bg: #101012;
    --fg: #e7e7ea;
    --muted: #9b9ba3;
    --line: #2a2a2e;
    --surface: #17171a;
    --code-bg: #1c1c20;
    --accent: #e7e7ea;
    --header-bg: rgba(16, 16, 18, 0.86);
    --shadow: none;
}

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--fg);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
        "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    font-size: 16px;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

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

.wrap {
    width: 100%;
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 20px;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--fg);
    color: var(--bg);
    padding: 8px 14px;
    z-index: 100;
}

.skip-link:focus {
    left: 12px;
    top: 12px;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--header-bg);
    border-bottom: 1px solid var(--line);
}

.header-inner {
    display: flex;
    align-items: center;
    gap: 20px;
    min-height: 60px;
}

.brand {
    font-family: "Noto Serif SC", "Songti SC", Georgia, serif;
    font-size: 19px;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 18px;
    overflow-x: auto;
    flex: 1;
    scrollbar-width: none;
    font-size: 14px;
    color: var(--muted);
}

.site-nav::-webkit-scrollbar {
    display: none;
}

.site-nav a {
    white-space: nowrap;
}

.site-nav a:hover {
    color: var(--fg);
    text-decoration: none;
}

.theme-toggle {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: transparent;
    color: var(--fg);
    cursor: pointer;
}

.theme-toggle:hover {
    background: var(--surface);
}

.theme-toggle svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.theme-toggle .icon-sun {
    display: none;
}

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

[data-theme="dark"] .theme-toggle .icon-moon {
    display: none;
}

.hero {
    padding: 72px 0 56px;
}

.hero.has-image {
    position: relative;
    margin-top: 24px;
    padding: 96px 32px;
    border-radius: var(--radius);
    overflow: hidden;
    background-image: var(--hero-image);
    background-size: cover;
    background-position: center;
    color: #ffffff;
    text-align: center;
}

.hero.has-image::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.48);
}

.hero-inner {
    position: relative;
}

.hero-title {
    margin: 0 0 10px;
    font-family: "Noto Serif SC", "Songti SC", Georgia, serif;
    font-size: 40px;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.hero-desc {
    margin: 0;
    color: var(--muted);
    font-size: 15px;
}

.hero.has-image .hero-desc {
    color: rgba(255, 255, 255, 0.82);
}

.post-list {
    border-top: 1px solid var(--line);
}

.post-card {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 28px 0;
    border-bottom: 1px solid var(--line);
}

.post-card:has(.card-cover) {
    grid-template-columns: 1fr 200px;
    align-items: start;
}

.card-cover {
    order: 2;
    display: block;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--surface);
    aspect-ratio: 4 / 3;
}

.card-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.card-cover:hover img {
    transform: scale(1.03);
}

.card-body {
    order: 1;
    min-width: 0;
}

.card-meta,
.post-meta {
    margin: 0 0 8px;
    color: var(--muted);
    font-size: 13px;
    letter-spacing: 0.01em;
}

.card-meta span,
.post-meta span {
    margin: 0 6px;
    color: var(--line);
}

.card-title {
    margin: 0 0 8px;
    font-family: "Noto Serif SC", "Songti SC", Georgia, serif;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.45;
}

.card-excerpt {
    margin: 0 0 12px;
    color: var(--muted);
    font-size: 15px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.empty {
    padding: 48px 0;
    color: var(--muted);
    text-align: center;
}

.archive-header {
    padding: 56px 0 8px;
}

.archive-header h1 {
    margin: 0;
    font-family: "Noto Serif SC", "Songti SC", Georgia, serif;
    font-size: 30px;
    font-weight: 600;
}

.post-cover {
    margin: 0 0 32px;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface);
}

.post-meta .post-views {
    margin: 0;
    color: var(--muted);
}

@keyframes dusk-like-pop {
    50% { transform: scale(1.06); }
}

.post-toc .toc-subheading {
    padding-left: 20px;
}

.archive-index ul {
    padding: 0;
    list-style: none;
}

.archive-index li a {
    display: block;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
    overflow-wrap: anywhere;
}

.archive-tags ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    list-style: none;
}

.archive-tags a {
    display: inline-block;
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 14px;
}

.archive-tags span {
    color: var(--muted);
}

.dusk-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    margin-bottom: 20px;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--muted);
}

.dusk-breadcrumbs a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 32px;
    color: var(--muted);
}

.dusk-breadcrumbs a:hover {
    color: var(--accent);
    text-decoration: none;
}

.dusk-breadcrumb-sep {
    color: var(--line);
}

.dusk-breadcrumb-current {
    color: var(--fg);
    font-weight: 500;
}

.page-navigator {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 40px 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
}

.page-navigator li a,
.page-navigator li span {
    display: inline-block;
    min-width: 36px;
    padding: 6px 10px;
    text-align: center;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
}

.page-navigator li a:hover,
.page-navigator li.current a {
    color: var(--bg);
    background: var(--fg);
    border-color: var(--fg);
    text-decoration: none;
}

.comments-title,
.respond-title {
    margin: 0 0 20px;
    font-family: "Noto Serif SC", "Songti SC", Georgia, serif;
    font-size: 20px;
    font-weight: 600;
}

.comment-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.comment-list .comment-list {
    margin-top: 16px;
    padding-left: 20px;
    border-left: 1px solid var(--line);
}

.comment-body {
    padding: 16px 0;
    border-bottom: 1px solid var(--line);
}

.comment-author {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

.comment-author img {
    border-radius: 50%;
    filter: grayscale(1);
}

.comment-author cite {
    font-style: normal;
    font-weight: 600;
}

.comment-meta {
    margin: 4px 0 8px;
    font-size: 12px;
    color: var(--muted);
}

.comment-reply {
    margin-top: 6px;
    font-size: 13px;
}

.form-row {
    margin: 0 0 14px;
}

.form-row label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    color: var(--muted);
}

.form-row input,
.form-row textarea {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg);
    color: var(--fg);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font: inherit;
    font-size: 15px;
}

.form-row input:focus,
.form-row textarea:focus {
    outline: none;
    border-color: var(--fg);
}

.error-page {
    padding: 120px 0;
    text-align: center;
}

.error-code {
    margin: 0;
    font-family: "Noto Serif SC", "Songti SC", Georgia, serif;
    font-size: 72px;
    line-height: 1;
    color: var(--line);
}

.error-page h1 {
    margin: 16px 0 8px;
    font-size: 24px;
}

.error-page p {
    color: var(--muted);
}

.site-footer {
    padding: 32px 0 48px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 13px;
    text-align: center;
}

.site-footer p {
    margin: 4px 0;
}

.site-footer a {
    color: var(--fg);
}

html {
    color-scheme: light;
}

[data-theme="dark"] {
    color-scheme: dark;
}

@media (max-width: 640px) {
    .header-inner {
        gap: 12px;
        min-height: 56px;
    }

    .brand {
        font-size: 17px;
    }

    .site-nav {
        gap: 14px;
        font-size: 13px;
    }

    .hero {
        padding: 44px 0 32px;
    }

    .hero.has-image {
        padding: 64px 20px;
    }

    .hero-title {
        font-size: 30px;
    }

    .post-card:has(.card-cover) {
        grid-template-columns: 1fr;
    }

    .card-cover {
        order: 0;
        aspect-ratio: 16 / 9;
    }

    .card-title {
        font-size: 19px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

:root {
    color-scheme: light;
    --bg: #f8fafb;
    --fg: #303c49;
    --muted: #647282;
    --surface: #fff;
    --dialog-bg: #fff;
    --line: #e9eef1;
    --accent: #287b9b;
    --accent-soft: #eff8fa;
    --code-bg: #f5f8fa;
    --header-bg: rgba(255, 255, 255, .97);
    --radius: 12px;
    --wrap: 1400px;
    --shadow: 0 3px 16px rgba(40, 65, 80, .035);
    --section-gap: 28px;
}

[data-theme="dark"] {
    color-scheme: dark;
    --bg: #101925;
    --fg: #e1eaf6;
    --muted: #a6b5ca;
    --surface: rgba(25, 38, 56, .94);
    --dialog-bg: #192638;
    --line: rgba(146, 170, 202, .2);
    --accent: #8bbaff;
    --accent-soft: rgba(118, 171, 255, .12);
    --code-bg: #121e2d;
    --header-bg: rgba(17, 28, 43, .96);
    --shadow: 0 8px 28px rgba(0, 6, 18, .2);
}

body { position: relative; isolation: isolate; background: var(--bg); color: var(--fg); }

body::before { content: none; }

::selection { background: var(--accent); color: var(--bg); }

:where(a, button, summary) { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

:where(a, button, input, textarea, select, summary):focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
}

:where(summary):focus:not(:focus-visible) { outline: none; }

button, input, textarea, select { font: inherit; }

button { cursor: pointer; }

.wrap, main.wrap { width: 100%; max-width: 1400px; padding-inline: 24px; }

main.wrap { padding-top: 26px; padding-bottom: 24px; }

.site-header { background: var(--header-bg); border-bottom: 1px solid var(--line); }

.header-inner { min-height: 72px; gap: 20px; }

.brand {
    display: inline-flex;
    align-items: center;
    flex: none;
    gap: 10px;
    font-family: inherit;
    font-size: 20px;
    font-weight: 650;
    line-height: 1.3;
    letter-spacing: 0;
}

.brand:hover { text-decoration: none; }

.brand-logo-wrap { display: block; min-width: 0; }

.brand .dusk-brand-logo { display: block; width: auto; height: 36px; max-width: min(190px, 40vw); object-fit: contain; }

.brand .dusk-logo-dark { display: none; }

[data-theme="dark"] .brand .dusk-logo-dark { display: block; }

[data-theme="dark"] .brand .dusk-logo-light.has-dark { display: none; }

.brand small { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; font-weight: 400; }

.site-nav { flex: 1; justify-content: center; flex-wrap: wrap; gap: 4px; overflow: visible; }

.site-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 12px; border-radius: 8px; }

.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--accent); background: var(--accent-soft); }

.theme-toggle, .menu-toggle { min-width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--fg); }

.theme-toggle { width: 44px; }

.menu-toggle { display: none; }

.header-search {
    display: flex;
    align-items: center;
    flex: 0 1 240px;
    min-width: 0;
    margin: 0;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
}

.search-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.header-search input { width: 100%; min-width: 0; height: 44px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; color: var(--fg); font-size: 16px; }

.header-search input::placeholder { color: var(--muted); opacity: 1; }

.header-search button { flex: none; min-width: 44px; min-height: 44px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: var(--accent); }

.header-search button:hover { background: var(--accent-soft); }

.site-nav .header-search { flex-basis: 220px; }

.blog-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr) 220px; align-items: start; gap: 22px; }

.blog-left, .blog-right { display: grid; align-content: start; gap: 18px; min-width: 0; }

.blog-center { min-width: 0; }

.blog-panel, .post-card, main > .post, #comments {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.blog-panel { padding: 18px; overflow-wrap: anywhere; }

.panel-heading { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 15px; font-weight: 650; }

.panel-heading::before { content: ""; width: 3px; height: 15px; flex: none; border-radius: 3px; background: var(--accent); }

.profile-cover { height: 92px; margin: -18px -18px 0; overflow: hidden; background: #263b55; }

.profile-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }

.profile-avatar {
    position: relative;
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin: -32px auto 10px;
    border: 4px solid var(--bg);
    border-radius: 50%;
    background: var(--accent);
    color: var(--bg);
    font-size: 25px;
    font-weight: 700;
}

.profile-name { margin: 0 0 6px; text-align: center; font-size: 18px; font-weight: 650; }

.profile-description { margin: 0; color: var(--muted); text-align: center; font-size: 13px; line-height: 1.8; }

.profile-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); text-align: center; font-size: 13px; }

.profile-stats > * + * { border-left: 1px solid var(--line); }

.profile-stats strong { display: block; color: var(--fg); font-size: 19px; font-variant-numeric: tabular-nums; }

.profile-stats small { display: block; color: var(--muted); font-size: 12px; }

.dusk-sidebar-rss { display: flex; align-items: center; justify-content: center; min-height: 40px; margin-top: 14px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg); color: var(--accent); font-size: 12px; font-weight: 600; }

.dusk-sidebar-rss:hover { border-color: var(--accent); background: var(--accent-soft); text-decoration: none; }

.sidebar-list, .recent-list { margin: 0; padding: 0; list-style: none; }

.sidebar-list a { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 6px 8px; border-radius: 8px; font-size: 13px; }

.sidebar-list a span { min-width: 0; }

.sidebar-list a small { flex: none; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }

.sidebar-list a:hover { background: var(--accent-soft); color: var(--accent); text-decoration: none; }

.tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; }

.tag-cloud a { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 10px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); font-size: 12px; overflow-wrap: anywhere; }

.tag-cloud a:hover { text-decoration: underline; }

.tag-cloud--dynamic a {
    background: color-mix(in srgb, hsl(var(--tag-hue, 196) 72% 52%) 13%, var(--surface));
    color: hsl(var(--tag-hue, 196) 52% 34%);
    animation: dusk-tag-float 5.4s ease-in-out infinite;
    animation-delay: calc(var(--tag-step, 0) * -.7s);
}

.tag-cloud--dynamic a:nth-child(6n+1) { --tag-hue: 188; }

.tag-cloud--dynamic a:nth-child(6n+2) { --tag-hue: 28; }

.tag-cloud--dynamic a:nth-child(6n+3) { --tag-hue: 152; }

.tag-cloud--dynamic a:nth-child(6n+4) { --tag-hue: 262; }

.tag-cloud--dynamic a:nth-child(6n+5) { --tag-hue: 342; }

.tag-cloud--dynamic a:nth-child(6n+6) { --tag-hue: 214; }

[data-theme="dark"] .tag-cloud--dynamic a { color: hsl(var(--tag-hue, 196) 70% 76%); background: color-mix(in srgb, hsl(var(--tag-hue, 196) 68% 58%) 18%, var(--surface)); }

@keyframes dusk-tag-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

.tag-cloud--dynamic.is-3d {
    position: relative;
    display: block;
    height: 238px;
    overflow: hidden;
    perspective: 760px;
    touch-action: pan-y;
    contain: layout paint;
}

.tag-cloud--dynamic.is-3d a {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: 0;
    max-width: 78%;
    white-space: nowrap;
    animation: none;
    will-change: transform, opacity;
    transform-origin: 50% 50%;
    backface-visibility: visible;
    transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.tag-cloud--dynamic.is-3d a:hover,
.tag-cloud--dynamic.is-3d a:focus-visible {
    background: hsl(var(--tag-hue, 196) 72% 52%);
    color: #fff;
    text-decoration: none;
    box-shadow: 0 8px 22px hsl(var(--tag-hue, 196) 60% 40% / 28%);
}

.tag-cloud--dynamic.is-3d.is-dragging a { cursor: grabbing; }

@media (prefers-reduced-motion: reduce) {
    .tag-cloud--dynamic.is-3d a { will-change: auto; }
}

.friends-sidebar { display: grid; gap: 4px; }

.friends-sidebar a { display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 5px 7px; border-radius: 8px; color: var(--fg); font-size: 13px; }

.friends-sidebar a:hover { background: var(--accent-soft); color: var(--accent); text-decoration: none; }

.friends-sidebar img { flex: none; width: 28px; height: 28px; border-radius: 8px; object-fit: cover; background: var(--code-bg); }

.friends-avatar { position: relative; display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 8px; overflow: hidden; }

.friends-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; }

.friends-initial { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); font-size: 13px; font-weight: 650; }

.friends-more { display: flex; align-items: center; justify-content: space-between; min-height: 44px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); color: var(--accent); font-size: 12px; }

.friends-more:hover { text-decoration: none; }

.friends-empty { margin: 0; padding: 26px 20px; border: 1px dashed var(--line); border-radius: 14px; background: var(--bg); color: var(--muted); font-size: 14px; line-height: 1.8; text-align: center; }

.friends-empty code { padding: 1px 5px; border-radius: 4px; background: var(--code-bg); }

.recent-list li + li { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }

.recent-list li a { display: flex; align-items: center; min-height: 44px; font-size: 13px; line-height: 1.65; }

.recent-list time { display: block; color: var(--muted); font-size: 12px; }

.notice-text { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.9; }

.notice-text a { color: var(--accent); }

@keyframes dusk-wave-move { 0% { transform: translate3d(-90px, 0, 0); } 100% { transform: translate3d(85px, 0, 0); } }

.post-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; border: 0; }

.post-card, .post-card:has(.card-cover) { display: flex; flex-direction: column; gap: 0; align-items: stretch; padding: 0; overflow: hidden; transition: box-shadow .2s ease, border-color .2s ease; }

.card-cover { display: block; order: 0; flex: none; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 0; background: var(--code-bg); overflow: hidden; }

.card-cover img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }

.card-body { display: flex; flex-direction: column; order: 1; flex: 1; min-width: 0; padding: 16px; }

.card-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin: 0 0 8px; color: var(--muted); font-size: 12px; }

.card-title { margin: 0 0 8px; font-family: inherit; font-size: 16px; line-height: 1.65; letter-spacing: 0; overflow-wrap: anywhere; }

.card-title a { display: flex; align-items: center; min-height: 44px; }

.card-title a:hover { color: var(--accent); text-decoration: none; }

.card-excerpt { margin: 0 0 12px; color: var(--muted); font-size: 13px; line-height: 1.85; -webkit-line-clamp: 2; }

.blog-center > .archive-header h1 { margin-bottom: 0; }

#comments .comment-list .comment-list { padding-left: 20px; }

.archive-header { padding: 8px 0 24px; }

.archive-header h1 { font-family: inherit; font-size: 26px; }

.page-navigator { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-block: 28px; }

.page-navigator :is(a, span) { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border-radius: 8px; }

.page-navigator .current a { background: var(--accent); color: var(--bg); }

.site-footer { margin-top: 32px; padding-block: 28px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }

.site-footer .wrap { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 24px; }

.site-footer a { display: inline-flex; align-items: center; min-height: 44px; }

.site-footer .footer-rss, .footer-sep { display: none; }

@media (min-width: 900px) {
    .site-footer .footer-rss { display: inline-flex; margin-right: 6px; color: var(--accent); }
    .footer-sep { display: inline; }
}

@media (hover: hover) and (pointer: fine) {
    .post-card:hover { border-color: var(--accent); box-shadow: 0 6px 22px rgba(35, 76, 95, .08); }
    .post-card:hover .card-cover img { transform: scale(1.025); }
}

@media (min-width: 1280px) {
    .blog-left, .blog-right {
        position: sticky;
        top: 76px;
        max-height: calc(100vh - 96px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

@media (min-width: 900px) and (max-width: 1279px) {
    .blog-layout { grid-template-columns: 216px minmax(0, 1fr); }
    .blog-right { display: none; }
    .header-inner { gap: 12px; }
    .site-nav a { padding-inline: 8px; }
    .header-search { flex-basis: 190px; }
}

@media (max-width: 899px) {
    .blog-layout { grid-template-columns: minmax(0, 1fr); }
    .blog-left, .blog-right { display: none; }
    .header-inner { flex-wrap: wrap; gap: 10px; padding-block: 12px; }
    .brand { flex: 1; min-width: 0; white-space: normal; }
    .menu-toggle { display: inline-flex; align-items: center; justify-content: center; padding-inline: 12px; font-size: 13px; }
    .site-nav { display: none; order: 4; flex: 0 0 100%; justify-content: flex-start; padding-top: 10px; border-top: 1px solid var(--line); }
    .site-nav.is-open { display: flex; }
    .header-inner > .header-search { order: 3; flex: 0 0 100%; }
    .site-nav .header-search { flex: 0 0 100%; }
    main.wrap { padding-top: 20px; }
}

@media (max-width: 599px) {
    .wrap, main.wrap { padding-inline: 16px; }
    .header-inner { gap: 8px; }
    .brand { font-size: 17px; gap: 8px; }
    .brand small { font-size: 10px; }
    .menu-toggle { padding-inline: 10px; }
    .post-list { grid-template-columns: minmax(0, 1fr); }
    .card-body { padding: 16px 18px; }
    .site-footer .wrap { display: block; text-align: center; }
    .site-footer p { margin-block: 6px; }
}

@view-transition { navigation: auto; }

::view-transition-old(root) { animation: dusk-page-out .18s ease both; }

::view-transition-new(root) { animation: dusk-page-in .3s cubic-bezier(.2, .75, .25, 1) both; }

::view-transition-group(post-title) { animation-duration: .34s; }

@keyframes dusk-page-out { to { opacity: 0; } }

@keyframes dusk-page-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@keyframes dusk-reading-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: no-preference) {
    #main.dusk-page-in { animation: dusk-reading-in .3s cubic-bezier(.2, .75, .25, 1) both; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
    ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

.header-inner { flex-wrap: nowrap; }

.brand { min-width: 0; }

.brand > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.site-nav { flex-wrap: nowrap; justify-content: flex-end; overflow-x: auto; }

.site-nav a { flex: none; }

.header-inner > button { flex: none; }

.search-toggle { margin-left: auto; }

.dialog-open { overflow: hidden; }

dialog { color: var(--fg); background: var(--dialog-bg); border: 1px solid var(--line); box-shadow: var(--shadow); padding: 24px; }

dialog:not([open]) { display: none; }

dialog::backdrop { background: rgba(15, 26, 38, .4); }

dialog[open] { animation: dusk-dialog-in .24s cubic-bezier(.2, .75, .25, 1) both; }

dialog[open]::backdrop { animation: dusk-backdrop-in .24s ease both; }

.search-dialog[open] { animation-name: dusk-search-in; }

.mobile-drawer[open] { animation-name: dusk-drawer-in; }

dialog[open].is-closing { animation: dusk-dialog-out .18s ease both; }

.mobile-drawer[open].is-closing { animation-name: dusk-drawer-out; }

.search-dialog[open].is-closing { animation-name: dusk-search-out; }

dialog[open].is-closing::backdrop { animation: dusk-backdrop-out .18s ease both; }

@keyframes dusk-dialog-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }

@keyframes dusk-search-in { from { opacity: 0; transform: translateY(-22px) scale(.965); } to { opacity: 1; transform: none; } }

@keyframes dusk-search-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-14px) scale(.975); } }

@keyframes dusk-search-panel-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

@keyframes dusk-drawer-in { from { opacity: .4; transform: translateX(100%); } to { opacity: 1; transform: none; } }

@keyframes dusk-dialog-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(8px) scale(.98); } }

@keyframes dusk-drawer-out { from { opacity: 1; transform: none; } to { opacity: .2; transform: translateX(100%); } }

@keyframes dusk-backdrop-in { from { opacity: 0; } to { opacity: 1; } }

@keyframes dusk-backdrop-out { from { opacity: 1; } to { opacity: 0; } }

.dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }

.dialog-heading h2 { margin: 0; font-size: 18px; }

.dialog-heading button { min-height: 44px; padding: 4px 12px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); background: transparent; }

.search-dialog { width: min(620px, calc(100% - 24px)); margin: max(10vh, 72px) auto auto; padding: 0; border-radius: 20px; overflow: hidden; transform-origin: top center; }

.search-dialog[open] .search-panel { animation: dusk-search-panel-in .28s .03s cubic-bezier(.2, .75, .25, 1) both; }

.search-dialog .search-panel { display: block; width: 100%; margin: 0; padding: 16px 20px 18px; border: 0; background: transparent; }

.search-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }

.search-title { color: var(--muted); font-size: 13px; font-weight: 600; }

.search-close { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 8px; color: var(--muted); background: transparent; cursor: pointer; }

.search-close:hover { color: var(--fg); background: var(--accent-soft); }

.mobile-drawer { position: fixed; inset: 0 0 0 auto; width: min(340px, 88vw); height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 18px 0 0 18px; border-width: 0 0 0 1px; padding: max(20px, env(safe-area-inset-top)) 22px max(22px, env(safe-area-inset-bottom)); overflow-y: auto; background: radial-gradient(120% 70% at 100% 0, var(--accent-soft), transparent 46%), var(--dialog-bg); }

.mobile-drawer[open] { display: flex; flex-direction: column; }

.drawer-profile { display: grid; grid-template-columns: 52px minmax(0, 1fr) 40px; align-items: center; gap: 12px; margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }

.drawer-avatar { display: grid; place-items: center; width: 52px; height: 52px; overflow: hidden; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 20px; font-weight: 700; box-shadow: 0 0 0 4px var(--accent-soft); }

.drawer-avatar img { width: 100%; height: 100%; object-fit: cover; }

.drawer-profile-copy { min-width: 0; }

.drawer-profile-copy h2 { margin: 0; overflow: hidden; font-size: 16px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }

.drawer-profile-copy p { display: -webkit-box; margin: 4px 0 0; overflow: hidden; color: var(--muted); font-size: 12px; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

.drawer-close { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); background: var(--surface); cursor: pointer; }

.drawer-close:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }

.drawer-close svg { transition: transform .18s ease; }

.drawer-close:hover svg { transform: rotate(90deg); }

.drawer-section-label { margin: 0 0 8px; padding: 0 12px; color: var(--muted); font-size: 11px; font-weight: 650; letter-spacing: .12em; }

#drawer-navigation { display: grid; gap: 4px; }

#drawer-navigation a { position: relative; display: flex; align-items: center; min-height: 48px; padding: 8px 12px 8px 14px; border: 1px solid transparent; border-radius: 10px; font-size: 15px; }

#drawer-navigation a:hover { border-color: var(--line); color: var(--accent); background: var(--accent-soft); text-decoration: none; }

#drawer-navigation a[aria-current="page"] { border-color: var(--line); color: var(--accent); background: var(--accent-soft); font-weight: 600; }

#drawer-navigation a[aria-current="page"]::before { content: ""; position: absolute; top: 50%; left: 4px; width: 3px; height: 18px; border-radius: 999px; background: var(--accent); transform: translateY(-50%); }

.drawer-subscribe { display: inline-flex; align-items: center; align-self: flex-start; gap: 8px; margin-top: auto; padding: 10px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--accent); font-size: 13px; font-weight: 600; }

.drawer-subscribe:hover { border-color: var(--accent); background: var(--accent-soft); text-decoration: none; }

.post-list { grid-template-columns: minmax(0, 1fr); gap: 14px; }

.post-card, .post-card:has(.card-cover) { position: relative; isolation: isolate; flex-direction: row; align-items: stretch; min-height: 176px; border: 0; background: #253943; }

.post-card:nth-child(even) { flex-direction: row-reverse; }

.card-backdrop { position: absolute; inset: 0; z-index: -1; overflow: hidden; }

.card-backdrop img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.42) saturate(.85); }

.card-cover { width: 34%; max-width: none; min-height: 176px; aspect-ratio: auto; align-self: stretch; position: relative; clip-path: polygon(0 0, 100% 0, 94% 100%, 0 100%); }

.post-card:nth-child(even) .card-cover { clip-path: polygon(6% 0, 100% 0, 100% 100%, 0 100%); }

.card-cover img { position: absolute; inset: 0; }

.card-body { padding: 22px; justify-content: center; gap: 8px; color: #fff; background: rgba(12, 23, 32, .55); }

.card-meta { margin: 0; color: #edf2f5; font-size: 12px; }

.card-meta a:hover { color: #fff; }

.card-title { font-size: 19px; line-height: 1.5; margin: 0; text-shadow: 0 1px 3px rgba(0, 0, 0, .2); }

.card-title a:is(:link, :visited, :hover, :active) { color: #fff; text-decoration: none; border-bottom: 0; box-shadow: none; background-image: none; }

.card-title a { min-height: 0; }

.search-dialog .search-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.search-input-row { display: flex; align-items: center; gap: 10px; padding: 4px 4px 4px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); transition: border-color .16s ease, box-shadow .16s ease; }

.search-input-row:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.search-icon { flex: none; color: var(--muted); }

.search-input-row input { flex: 1; min-width: 0; height: 48px; padding: 0; border: 0; outline: 0; background: transparent; color: var(--fg); font: inherit; font-size: 17px; }

.search-input-row input::-webkit-search-cancel-button { cursor: pointer; }

.search-submit { flex: none; min-height: 40px; margin: 4px; padding: 0 18px; border: 0; border-radius: 8px; background: var(--accent); color: var(--bg); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }

.search-submit:hover { filter: brightness(1.06); }

.search-submit:disabled { cursor: progress; opacity: .7; filter: none; }

.header-search.is-loading .search-input-row { opacity: .75; }

.search-hint { display: flex; align-items: center; gap: 4px; margin: 10px 2px 0; color: var(--muted); font-size: 12px; }

.search-hint kbd { padding: 1px 5px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--muted); font: inherit; font-size: 11px; }

#drawer-navigation .dusk-menu-group > div { border: 0; padding: 4px 0 4px 12px; background: transparent; }

#drawer-navigation summary { min-height: 48px; padding: 12px; }

.site-nav:has(.dusk-menu-group) { overflow: visible; }

.brand small { display: block; color: var(--muted); font-size: 11px; font-weight: 400; }

dialog button:focus-visible, dialog a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.card-excerpt { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 2; color: #edf2f5; line-height: 1.8; margin: 0; }

.pagination { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px; margin-block: 24px; }

.pagination .page-navigator { display: flex; width: auto; flex: 0 1 auto; justify-content: center; gap: 5px; margin: 0; }

.pagination .page-navigator[hidden] { display: none; }

.pagination .page-navigator li { flex: 0 0 auto; }

.pagination .page-navigator li :is(a, span) { width: auto; min-width: 36px; min-height: 40px; padding: 4px 9px; }

.load-more { min-height: 44px; width: auto; padding: 6px 24px; border: 1px solid var(--line); border-radius: 9px; color: var(--accent); background: var(--surface); font: inherit; font-size: 13px; }

.load-more:disabled { cursor: default; opacity: .65; }

.pagination[data-pagination] > a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 6px 24px; border: 1px solid var(--line); border-radius: 9px; color: var(--accent); background: var(--surface); font-size: 13px; }

.pagination[data-pagination] > a[hidden] { display: none; }

.pagination-status { flex-basis: 100%; text-align: center; color: var(--muted); font-size: 12px; }

.page-navigator { list-style: none; padding: 0; }

.page-navigator li { margin: 0; }

.page-navigator li :is(a, span) { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--muted); font-size: 13px; }

.page-navigator li.current a, .page-navigator li a:hover { color: var(--accent); background: var(--accent-soft); border-color: var(--accent); text-decoration: none; }

.page-navigator li.current a { font-weight: 650; }

.comment-content :is(pre, blockquote) { padding: 12px; border-radius: 8px; background: var(--code-bg); overflow-x: auto; }

@media (max-width: 899px) {
    .header-inner { min-height: 64px; padding-block: 8px; gap: 8px; }
    .brand { flex: 1; }
    .header-inner .site-nav { display: none; }
    .header-inner .menu-toggle { display: inline-flex; min-width: 44px; padding: 0; }
    .header-inner .search-toggle { margin-left: 0; }
    .header-inner > :is(.search-toggle, .theme-toggle, .menu-toggle),
    .dusk-has-hero .site-header.is-glass .theme-toggle,
    .dusk-has-hero .site-header.is-glass .menu-toggle {
        min-width: 40px;
        width: 40px;
        height: 40px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: transparent;
        box-shadow: none;
        transition: background-color .18s ease, color .18s ease;
    }
    .header-inner > :is(.search-toggle, .theme-toggle, .menu-toggle) svg { width: 20px; height: 20px; }
    .header-inner > :is(.search-toggle, .theme-toggle, .menu-toggle):is(:hover, :focus-visible) {
        background: var(--accent-soft);
        color: var(--accent);
    }
}

@media (max-width: 599px) {
    .search-dialog { margin-top: 10vh; }
    .search-dialog .search-panel { padding: 16px 16px 18px; }
    .search-hint { display: none; }
    .search-submit { padding: 0 14px; }
    .brand { font-size: 17px; }
    .post-card, .post-card:has(.card-cover) { min-height: 154px; }
    .card-cover { display: none; }
    .card-body { padding: 20px; gap: 8px; }
    .card-title { font-size: 17px; }
    .card-meta { font-size: 12px; }
    .card-excerpt { font-size: 13px; }
}

.dusk-recommend { margin-block: 20px 28px; }

.dusk-recommend-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}

.dusk-recommend-head h2 {
    margin: 0;
    font-size: clamp(20px, 2.4vw, 28px);
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.dusk-recommend-head span { color: var(--muted); font-size: 13px; }

.dusk-recommend-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.dusk-recommend-card {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: var(--radius);
    background: #253943;
    isolation: isolate;
}

.dusk-recommend-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.dusk-recommend-card:hover img { transform: scale(1.04); }

.dusk-recommend-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 34%, rgba(0, 0, 0, 0.74));
}

.dusk-recommend-body {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 16px;
    color: #fff;
}

.dusk-recommend-badge {
    align-self: flex-start;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 0.06em;
}

.dusk-recommend-title {
    display: -webkit-box;
    overflow: hidden;
    font-size: clamp(15px, 1.5vw, 20px);
    font-weight: 700;
    line-height: 1.4;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

@media (max-width: 599px) {
    .dusk-recommend { margin-block: 16px 22px; }
    .dusk-recommend-head { margin-bottom: 10px; }
    .dusk-recommend-head span { display: none; }
    .dusk-recommend-grid { gap: 10px; }
    .dusk-recommend-body { gap: 5px; padding: 10px; }
    .dusk-recommend-badge { padding: 1px 7px; font-size: 10px; }
    .dusk-recommend-title { font-size: 13px; line-height: 1.35; }
}