: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);
}

.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);
}

.post {
    padding: 56px 0 0;
}

.post-header {
    margin-bottom: 32px;
}

.post-title {
    margin: 0;
    font-family: "Noto Serif SC", "Songti SC", Georgia, serif;
    font-size: 34px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0.01em;
}

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

.post-content {
    font-size: 17px;
    line-height: 1.9;
}

.post-content > * + * {
    margin-top: 1.1em;
}

.post-content h2,
.post-content h3,
.post-content h4 {
    margin-top: 2em;
    font-family: "Noto Serif SC", "Songti SC", Georgia, serif;
    line-height: 1.4;
}

.post-content h2 {
    font-size: 26px;
}

.post-content h3 {
    font-size: 21px;
}

.post-content a {
    border-bottom: 1px solid var(--line);
}

.post-content a:hover {
    text-decoration: none;
    border-color: var(--fg);
}

.post-content blockquote {
    margin: 1.6em 0;
    padding: 4px 0 4px 20px;
    border-left: 3px solid var(--line);
    color: var(--muted);
}

.post-content code {
    padding: 0.15em 0.4em;
    background: var(--code-bg);
    border-radius: 4px;
    font-size: 0.9em;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.post-content pre {
    padding: 18px 20px;
    background: var(--code-bg);
    border-radius: var(--radius);
    overflow-x: auto;
    line-height: 1.65;
}

.post-content pre code {
    padding: 0;
    background: none;
    font-size: 14px;
}

.post-content img {
    border-radius: var(--radius);
}

.post-content hr {
    border: 0;
    border-top: 1px solid var(--line);
    margin: 2.4em 0;
}

.post-content table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}

.post-content th,
.post-content td {
    padding: 8px 12px;
    border: 1px solid var(--line);
    text-align: left;
}

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

.post-toolbar {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 0;
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}

.post-actions {
    display: flex;
    flex: none;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
}

.post-like {
    margin: 0;
}

.like-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: transparent;
    color: var(--fg);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.like-button:hover {
    border-color: var(--fg);
    background: var(--surface);
}

.like-button:focus-visible {
    outline: 2px solid var(--fg);
    outline-offset: 3px;
}

.like-button:disabled {
    cursor: default;
}

.like-button.is-pending {
    opacity: .66;
}

.like-button.is-liked {
    border-color: var(--accent);
    background: var(--accent-soft, var(--surface));
    color: var(--accent);
    animation: dusk-like-pop .32s ease;
}

.like-button.is-liked svg {
    fill: currentColor;
}

.like-button.is-liked .like-count {
    color: inherit;
}

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

@media (prefers-reduced-motion: reduce) {
    .like-button.is-liked { animation: none; }
}

.like-button svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
}

.like-count {
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.post-toc {
    margin: 0 0 32px;
    padding: 12px 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    font-size: 14px;
}

.post-toc[hidden] {
    display: none;
}

.post-toc summary {
    min-height: 44px;
    align-content: center;
    cursor: pointer;
    font-weight: 600;
}

.post-toc ol {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

.post-toc a {
    display: block;
    padding: 10px 0;
    overflow-wrap: anywhere;
}

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

.post-toc a:focus-visible,
.post-toc summary:focus-visible,
.post-related a:focus-visible {
    outline: 2px solid var(--fg);
    outline-offset: 3px;
}

.post-content h2,
.post-content h3 {
    scroll-margin-top: var(--dusk-header-offset);
}

.post-related {
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
}

.post-related h2 {
    margin: 0 0 12px;
    font-size: 20px;
}

.post-related ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.post-related a {
    display: block;
    padding: 10px 0;
    overflow-wrap: anywhere;
}

.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);
}

.post-footer {
    margin-top: 48px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
}

.post-tags {
    margin-bottom: 20px;
    font-size: 13px;
    color: var(--muted);
}

.post-tags a {
    display: inline-block;
    margin: 0 8px 6px 0;
    padding: 2px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
}

.post-tags a:hover {
    text-decoration: none;
    border-color: var(--fg);
    color: var(--fg);
}

.post-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
    font-size: 14px;
    color: var(--muted);
}

.post-nav a {
    color: var(--fg);
}

.post-share {
    position: relative;
    display: flex;
    flex: 0 1 auto;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-size: 13px;
    color: var(--muted);
}

.post-share__trigger {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: transparent;
    color: var(--fg);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    transition: border-color .18s ease, background-color .18s ease;
}

.post-share__trigger:hover,
.post-share__trigger[aria-expanded="true"] {
    border-color: var(--fg);
    background: var(--surface);
}

.post-share__trigger:focus-visible {
    outline: 2px solid var(--fg);
    outline-offset: 3px;
}

.post-share__menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 40;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 168px;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--bg);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .14);
}

[data-theme="dark"] .post-share__menu {
    box-shadow: 0 16px 40px rgba(0, 0, 0, .5);
}

.post-share__menu[hidden] {
    display: none;
}

.post-share__item {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 38px;
    padding: 0 10px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--fg);
    font: inherit;
    font-size: 13px;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .16s ease;
}

.post-share__item svg {
    flex: none;
}

.post-share__item:hover {
    background: var(--surface);
    text-decoration: none;
}

.post-share__item:focus-visible {
    background: var(--surface);
    outline: 2px solid var(--muted);
    outline-offset: -2px;
}

.post-share__status {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    color: var(--muted);
}

@media (max-width: 640px) {
    .post-toolbar {
        gap: 8px;
        margin-top: 24px;
        padding-top: 16px;
    }

    .post-share {
        gap: 6px;
    }

    .post-share__trigger,
    .like-button {
        height: 32px;
    }

    .post-share__menu {
        min-width: 160px;
    }
}

.dusk-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.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 {
    margin: 24px 0 64px;
    padding-top: 32px;
    border-top: 1px solid var(--line);
}

.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-content {
    font-size: 15px;
}

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

.respond {
    margin-top: 40px;
}

.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);
}

.button {
    display: inline-block;
    padding: 9px 22px;
    background: var(--fg);
    color: var(--bg);
    border: 1px solid var(--fg);
    border-radius: 999px;
    font-size: 14px;
    cursor: pointer;
}

.button:hover {
    opacity: 0.82;
    text-decoration: none;
}

.logged-in,
.comments-closed {
    color: var(--muted);
    font-size: 14px;
}

.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 {
        padding-top: 32px;
    }

    .post-title {
        font-size: 26px;
    }

    .post-content {
        font-size: 16px;
    }

    .post-nav {
        flex-direction: column;
    }
}

@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-page { width: 100%; max-width: 1080px; margin: 0 auto; }

.friends-page-card { padding: clamp(24px, 4vw, 40px); border: 1px solid var(--line); border-radius: 22px; background: var(--surface); box-shadow: var(--shadow); }

.friends-intro { margin-bottom: 24px; }

.friends-intro > :first-child { margin-top: 0; }

.friends-intro > :last-child { margin-bottom: 0; }

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

.friend-card { position: relative; display: flex; align-items: flex-start; gap: 15px; min-height: 118px; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(145deg, var(--surface), var(--bg)); transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease, background .2s ease; }

.friend-card:hover, .friend-card:focus-visible { border-color: color-mix(in srgb, var(--accent) 58%, var(--line)); background: linear-gradient(145deg, color-mix(in srgb, var(--accent-soft) 55%, var(--surface)), var(--bg)); box-shadow: 0 14px 30px rgba(20, 52, 66, .1); text-decoration: none; transform: translateY(-3px); }

.friend-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.friend-avatar { position: relative; display: grid; place-items: center; flex: none; width: 58px; height: 58px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--line)); border-radius: 17px; background: var(--accent-soft); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45); }

.friend-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }

.friend-initial { color: var(--accent); font-size: 23px; font-weight: 650; }

.friend-card-body { display: flex; flex: 1; flex-direction: column; gap: 4px; min-width: 0; }

.friend-card-body strong { color: var(--fg); font-size: 15.5px; line-height: 1.45; letter-spacing: -.01em; overflow-wrap: anywhere; }

.friend-card-desc { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: var(--muted); font-size: 12.5px; line-height: 1.65; }

.friend-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 9px; }

.friend-card-host { display: inline-flex; align-items: center; gap: 5px; min-width: 0; overflow: hidden; color: var(--muted); font-size: 11px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }

.friend-card-dot { flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent); }

.friend-card-arrow { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease; }

.friend-card:hover .friend-card-arrow, .friend-card:focus-visible .friend-card-arrow { border-color: var(--accent); background: var(--accent); color: var(--surface); transform: translateX(2px); }

.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); }

@media (max-width: 599px) {
    .friends-page-card { padding: 22px 18px; }
    .friends-grid { grid-template-columns: minmax(0, 1fr); }
}

.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); } }

main > .post, #comments { width: 100%; max-width: 900px; margin: var(--section-gap) auto 24px; padding: 36px; }

.blog-center > .post { width: 100%; margin: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }

.blog-center > .dusk-reading.post { padding: clamp(20px, 3vw, 44px); }

.post-title { font-family: inherit; font-size: clamp(26px, 3vw, 36px); line-height: 1.5; letter-spacing: -.02em; overflow-wrap: anywhere; }

.post-content { color: var(--fg); overflow-wrap: anywhere; }

.post-content :is(h2, h3, h4) { font-family: inherit; scroll-margin-top: 120px; }

.post-content a { color: var(--accent); }

.post-content blockquote { padding: 12px 18px; border-left-color: var(--accent); border-radius: 0 8px 8px 0; background: var(--accent-soft); }

.post-content :is(pre, table) { max-width: 100%; overflow-x: auto; }

.post-content :is(img, video, iframe) { max-width: 100%; border-radius: 8px; }

.post-toc { background: var(--code-bg); }

#comments { scroll-margin-top: 120px; }

#comments :is(input, textarea) { max-width: 100%; background: var(--code-bg); color: var(--fg); border: 1px solid var(--line); border-radius: 8px; }

#comments :is(input, button, .submit) { min-height: 44px; }

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

.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 (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; }
    .post-content :is(h2, h3, h4), #comments { scroll-margin-top: var(--dusk-header-offset); }
}

@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; }
    main > .post, #comments { padding: 22px 18px; }
    .post-content { font-size: 16px; }
    .post-content h2 { font-size: 23px; }
    .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; }

.dusk-single .post-title { view-transition-name: post-title; }

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

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

@supports not (view-transition-name: none) {
    @media (prefers-reduced-motion: no-preference) {
        .dusk-single .post.dusk-reading { animation: dusk-reading-in .32s cubic-bezier(.2, .75, .25, 1) both; }
    }
}

@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; }

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

.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; }

.pagination:empty { display: none; }

.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; }

#comments textarea { font-size: 16px; resize: vertical; }

#comments :is(input, textarea):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

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

.comment-content :is(p, ul, ol) { margin-block: 10px; }

@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; }
}