@font-face {
            font-family: "Inter";
            src: url("/static/fonts/inter-latin-wght-normal.woff2?v=5.3.0") format("woff2");
            font-style: normal;
            font-weight: 100 900;
            font-display: swap;
        }
        @font-face {
            font-family: "JetBrains Mono";
            src: url("/static/fonts/jetbrains-mono-latin-wght-normal.woff2?v=5.3.0") format("woff2");
            font-style: normal;
            font-weight: 100 800;
            font-display: swap;
        }
        :root {
            --bg: #0a0d12;
            --bg-card: rgba(17,23,31,0.88);
            --bg-card-solid: #11171f;
            --bg-card-hover: rgba(22,29,39,0.94);
            --article-bg: rgba(13,18,25,0.96);
            --text-primary: #edf2f5;
            --text-secondary: #aab5bd;
            --text-muted: #7f8e98;
            --accent: #32b8d8;
            --accent-hover: #69cbe2;
            --accent-glow: rgba(50,184,216,0.12);
            --accent-bar: #32b8d8;
            --accent-rgb: 50,184,216;
            --on-accent: #071014;
            --border: rgba(183,203,211,0.14);
            --border-card: rgba(183,203,211,0.11);
            --tag-bg: rgba(50,184,216,0.08);
            --tag-text: #76d2e6;
            --nav-bg: rgba(8,12,17,0.88);
            --code-bg: #080c11;
            --code-text: #d5dde2;
            --code-border: rgba(183,203,211,0.13);
            /* Layered shadows: two planes read as a real surface, one blur reads as a sticker. */
            --shadow: 0 1px 2px rgba(0,0,0,0.18), 0 6px 16px rgba(0,0,0,0.16);
            --shadow-hover: 0 2px 4px rgba(0,0,0,0.2), 0 14px 34px rgba(0,0,0,0.22);
            --shadow-panel: 0 2px 6px rgba(0,0,0,0.22), 0 18px 48px rgba(0,0,0,0.26);
            /* Radius by element role — one radius everywhere is the clearest tell of generated UI. */
            --radius-input: 6px;
            --radius-btn: 8px;
            --radius-card: 12px;
            --radius-panel: 16px;
            --radius-pill: 999px;
            /* Back-compat aliases (older rules still reference these). */
            --radius: var(--radius-card);
            --radius-sm: var(--radius-btn);
            /* Type ladder — 8 steps, each distinguishable. Never introduce a size off this scale. */
            --text-2xs: 0.6875rem;  /* 11px — counts, badges, micro labels */
            --text-xs: 0.75rem;     /* 12px — meta, tags, footer */
            --text-sm: 0.8125rem;   /* 13px — small UI, sidebar, buttons */
            --text-md: 0.875rem;    /* 14px — secondary body, card descriptions */
            --text-base: 1rem;      /* 16px — body / prose */
            --text-lg: 1.125rem;    /* 18px — card titles, h3 */
            --text-xl: 1.375rem;    /* 22px — section heads, article h2 */
            --text-2xl: 1.75rem;    /* 28px — page titles */
            --text-3xl: 2.5rem;     /* 40px — hero display */
            --text-display: 5rem;   /* 80px — 404 numeral only; 2x the step below it */
            /* Tracking is size-specific: large type tightens, small type opens up. */
            --track-display: -0.022em;
            --track-heading: -0.012em;
            --track-label: 0.01em;
            /* Leading runs inversely to size. */
            --leading-display: 1.14;
            --leading-heading: 1.3;
            --leading-ui: 1.5;
            --leading-body: 1.7;
            --leading-prose: 1.9;
            /* Motion scale — five durations and three curves cover the whole site. */
            --motion-fast: 120ms;
            --motion-base: 200ms;
            --motion-medium: 280ms;
            --motion-slow: 400ms;
            --ease-out: cubic-bezier(0.22,1,0.36,1);
            --ease-in-out: cubic-bezier(0.65,0,0.35,1);
            --ease-emphasized: cubic-bezier(0.2,0,0,1);
            --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB', 'Segoe UI', sans-serif;
            --font-mono: 'JetBrains Mono', 'SF Mono', 'Cascadia Code', Consolas, Menlo, monospace;
}

        /* Light theme overrides — applied via data-theme="light" on <html> */
        [data-theme="light"] {
            --bg: #edf1f2;
            --bg-card: rgba(255,255,255,0.92);
            --bg-card-solid: #fbfcfc;
            --bg-card-hover: #fbfcfc;
            --article-bg: rgba(255,255,255,0.97);
            --text-primary: #12191e;
            --text-secondary: #45545d;
            --text-muted: #687781;
            --accent: #087f99;
            --accent-hover: #05677d;
            --accent-glow: rgba(8,127,153,0.09);
            --accent-bar: #087f99;
            --accent-rgb: 8,127,153;
            --on-accent: #f8fbfc;
            --border: rgba(18,25,30,0.16);
            --border-card: rgba(18,25,30,0.11);
            --tag-bg: rgba(8,127,153,0.07);
            --tag-text: #08758d;
            --nav-bg: rgba(247,249,249,0.9);
            --code-bg: #f0f3f4;
            --code-text: #25323a;
            --code-border: rgba(18,25,30,0.14);
            --shadow: 0 1px 2px rgba(36,48,54,0.06), 0 6px 16px rgba(36,48,54,0.07);
            --shadow-hover: 0 2px 4px rgba(36,48,54,0.07), 0 14px 34px rgba(36,48,54,0.1);
            --shadow-panel: 0 2px 6px rgba(36,48,54,0.08), 0 18px 48px rgba(36,48,54,0.12);
        }
        [data-theme="light"] body { background: var(--bg); }
        * { box-sizing: border-box; margin: 0; padding: 0; }
        .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; }
        html { font-family: var(--font-sans); line-height: 1.6; scrollbar-width: thin; scrollbar-color: rgba(var(--accent-rgb),0.3) transparent; }
        ::-webkit-scrollbar { width: 9px; height: 9px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: rgba(var(--accent-rgb),0.22); border-radius: 5px; border: 2px solid transparent; background-clip: padding-box; }
        ::-webkit-scrollbar-thumb:hover { background: rgba(var(--accent-rgb),0.4); border: 2px solid transparent; background-clip: padding-box; }
        body { background: var(--bg); color: var(--text-primary); min-height: 100vh; min-height: 100dvh; overflow-x: hidden; }
        a { color: var(--accent); text-decoration: none; transition: color var(--motion-base) var(--ease-out); }
        a:hover { color: var(--accent-hover); }
        :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
        .skip-link { position: fixed; top: 0.5rem; left: 0.5rem; z-index: 300; padding: 0.55rem 0.8rem; border-radius: var(--radius-sm); color: var(--on-accent); background: var(--accent); transform: translateY(-150%); transition: transform var(--motion-fast) var(--ease-out); }
        .skip-link:focus { color: var(--on-accent); transform: translateY(0); }
        /* WebGL canvas */
        #bg-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; opacity: 0.42; filter: saturate(0.72); }
        body:has(.post-article) #bg-canvas { opacity: 0.24; }
        [data-theme="light"] #bg-canvas { opacity: 0.18; filter: saturate(0.58); }
        [data-theme="light"] body:has(.post-article) #bg-canvas { opacity: 0.1; }
        /* Nav */
        /* Nav is a translucent layer content scrolls under, not an opaque strip.
           The plane separator is a soft scroll edge that only appears once there is
           something underneath it — a permanent hairline draws a line across an
           unscrolled page for no reason. `.is-scrolled` is set from site.js. */
        .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: var(--nav-bg); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); border-bottom: 1px solid transparent; transition: border-color var(--motion-medium) var(--ease-out), box-shadow var(--motion-medium) var(--ease-out); }
        .nav.is-scrolled { border-bottom-color: var(--border); box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.14); }
        [data-theme="light"] .nav.is-scrolled { box-shadow: 0 1px 0 rgba(36,48,54,0.05), 0 8px 24px rgba(36,48,54,0.07); }
        /* Vibrancy: text over a translucent, moving background needs a touch more
           weight and contrast than the same text over a solid surface. */
        .nav-links a, .nav-logo { -webkit-font-smoothing: antialiased; }
        .nav-inner { max-width: 1280px; height: 64px; margin: 0 auto; padding: 0 2rem; display: grid; grid-template-columns: minmax(11rem,1fr) auto minmax(11rem,1fr); align-items: center; gap: 1.5rem; position: relative; }
        /* Reading progress: thin line flush on the nav's bottom edge, fills L→R. Only active on article pages. */
        #reading-progress { position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg, var(--accent), var(--accent-hover)); box-shadow: 0 0 8px var(--accent-glow); transition: transform var(--motion-fast) linear; will-change: transform; pointer-events: none; }
        @keyframes reading-progress { to { transform: scaleX(1); } }
        @supports (animation-timeline: scroll()) {
            body:has(.article-content) #reading-progress { animation: reading-progress linear both; animation-timeline: scroll(root block); }
        }
        .nav-logo { font-size: var(--text-lg); font-weight: 700; color: var(--accent); display: flex; align-items: center; gap: 0.4rem; }
        .ui-icon { display: inline-block; width: 16px; height: 16px; flex: 0 0 auto; vertical-align: -0.18em; }
        .nav-logo .ui-icon { width: 18px; height: 18px; }
        .nav-links { display: flex; gap: 0.15rem; list-style: none; }
        .nav-links a { color: var(--text-secondary); padding: 0.45rem 0.65rem; border-radius: var(--radius-sm); font-size: var(--text-md); font-weight: 500; white-space: nowrap; transition: color var(--motion-base) var(--ease-out); }
        .nav-links a:hover { color: var(--accent); }
        .nav-links a.active { color: var(--text-primary); font-weight: 700; }
        .nav-links a.active::after { content: ""; position: absolute; left: 0.65rem; right: 0.65rem; bottom: -0.76rem; height: 2px; border-radius: 2px; background: var(--accent); }
        .nav-links a { position: relative; }
        .nav-actions { display: flex; grid-column: 3; align-items: center; justify-content: flex-end; gap: 0.45rem; min-width: 0; }
        .theme-btn, .bg-btn { background: none; border: 1px solid var(--border); cursor: pointer; padding: 0.35rem; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; color: var(--text-muted); transition: color var(--motion-base) var(--ease-out), border-color var(--motion-base) var(--ease-out); width: 32px; height: 32px; }
        .theme-btn:hover, .bg-btn:hover { border-color: var(--accent); color: var(--accent); }
        .theme-btn svg, .bg-btn svg { width: 16px; height: 16px; }
        [data-bg="ink"] .bg-btn [data-bg="nebula"], [data-bg="nebula"] .bg-btn [data-bg="ink"] { display: none; }
        /* Layout */
        .page { position: relative; z-index: 1; padding-top: 64px; }
        .layout { max-width: 1280px; margin: 0 auto; padding: 1.75rem 2rem; display: grid; grid-template-columns: 200px minmax(0,1fr) 200px; gap: 1.75rem; }
        .home-layout { grid-template-columns: 184px minmax(0,1fr); gap: 2rem; }
        .post-layout { max-width: 1180px; grid-template-columns: minmax(0,920px) 220px; justify-content: center; gap: 1.5rem; }
        /* Grid 列默认 min-width:auto，会被 <pre> 等宽内容撑破视口；归零让其可收缩到屏宽内。 */
        .layout > * { min-width: 0; }
        .main-content { min-width: 0; }
        /* Glass card base. In dark mode a drop shadow is invisible against a near-black
           canvas, so depth comes from a 1px top highlight — the edge catching the light. */
        .glass { background: var(--bg-card); border: 1px solid var(--border-card); border-radius: var(--radius-card); box-shadow: inset 0 1px 0 rgba(255,255,255,0.045); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: background-color var(--motion-medium) var(--ease-out), border-color var(--motion-medium) var(--ease-out), box-shadow var(--motion-medium) var(--ease-out), transform var(--motion-medium) var(--ease-out); }
        [data-theme="light"] .glass { box-shadow: var(--shadow); }
        .glass:hover { background: var(--bg-card-hover); border-color: rgba(var(--accent-rgb),0.15); }
        /* Sidebar */
        .side-left { position: sticky; top: 5.5rem; align-self: start; }
        /* Sidebar cards are flattened into transparent sections divided by hairlines,
           so they must also drop the .glass shadow — an inset highlight or drop shadow
           on a transparent element reads as a panel that is not there. */
        .side-left .side-card { padding: 1rem 0; margin: 0; border: 0; border-top: 1px solid var(--border); border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
        .side-left .side-card:first-child { padding-top: 0.25rem; border-top: 0; }
        .side-left .side-card:hover { background: transparent; border-color: var(--border); }
        .side-card { padding: 1.15rem; margin-bottom: 0.85rem; }
        .side-card h4 { font-size: var(--text-xs); font-weight: 700; color: var(--text-muted); letter-spacing: var(--track-label); margin-bottom: 0.65rem; }
        .profile-avatar { width: 58px; height: 58px; border-radius: 50%; overflow: hidden; margin: 0 0 0.7rem; border: 2px solid rgba(var(--accent-rgb),0.3); }
        .profile-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
        .profile-name { font-size: var(--text-base); font-weight: 700; color: var(--text-primary); margin-bottom: 0.15rem; }
        .profile-desc { font-size: var(--text-xs); color: var(--text-muted); margin-bottom: 0.6rem; }
        .profile-links { display: flex; justify-content: flex-start; gap: 0.75rem; }
        .profile-links a { color: var(--text-muted); transition: color var(--motion-base) var(--ease-out); }
        .profile-links a:hover { color: var(--accent); }
        .profile-links svg { width: 16px; height: 16px; }
        .stat-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0; }
        .stat-item svg { width: 14px; height: 14px; color: var(--accent); flex-shrink: 0; }
        .stat-item .stat-label { font-size: var(--text-sm); color: var(--text-muted); flex: 1; }
        .stat-item .stat-value { flex-shrink: 0; color: var(--text-primary); font-size: var(--text-sm); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
        .cat-item { display: flex; align-items: center; justify-content: space-between; padding: 0.3rem 0; font-size: var(--text-sm); }
        .cat-item a { color: var(--text-secondary); }
        .cat-item a:hover { color: var(--accent); }
        .cat-count { font-size: var(--text-2xs); color: var(--text-muted); background: var(--tag-bg); padding: 0.08rem 0.4rem; border-radius: var(--radius-pill); font-variant-numeric: tabular-nums; }
        .side-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; }
        .side-tag { font-size: var(--text-2xs); color: var(--tag-text); background: var(--tag-bg); padding: 0.15rem 0.45rem; border-radius: var(--radius-input); transition: background-color var(--motion-base) var(--ease-out), color var(--motion-base) var(--ease-out); }
        .side-tag:hover { background: var(--accent); color: var(--on-accent); }
        .side-tag.active { background: var(--accent); color: var(--on-accent); }
        .side-tag:hover .cat-count, .side-tag.active .cat-count { color: var(--on-accent); background: rgba(255,255,255,0.2); }
        .info-card.active { border-color: var(--accent); background: var(--bg-card-hover); }
        .category-grid { gap: 0.75rem; }
        .category-link { display: flex; align-items: center; justify-content: space-between; gap: 0.65rem; padding: 0.85rem 1rem; }
        .category-link-main { display: flex; align-items: center; gap: 0.65rem; min-width: 0; }
        .category-link h3 { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .category-icon { width: 30px; height: 30px; border-radius: var(--radius-btn); }
        .tag-cloud-panel { padding: 1.2rem 1.25rem; }
        .tag-cloud-panel .section-title { margin-bottom: 1rem; }
        .tag-cloud-panel .side-tags { gap: 0.45rem; }
        .tag-cloud-panel .side-tag { padding: 0.3rem 0.6rem; font-size: var(--text-md); }
        .tag-cloud-panel .side-tag .cat-count { margin-left: 0.3rem; }
        /* Empty state: a fork, not a wall. Says what happened and offers a way on. */
        .empty-state { padding: 1.6rem 1.5rem; text-align: center; }
        .empty-state-icon { display: grid; place-items: center; width: 38px; height: 38px; margin: 0 auto 0.7rem; border-radius: var(--radius-pill); color: var(--accent); background: var(--accent-glow); }
        .empty-state-icon .ui-icon { width: 19px; height: 19px; }
        .empty-state strong { display: block; color: var(--text-primary); font-size: var(--text-base); font-weight: 700; }
        .empty-state p { margin-top: 0.3rem; color: var(--text-secondary); font-size: var(--text-md); line-height: var(--leading-body); }
        .empty-state-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-top: 1rem; }
        .empty-state-actions .ui-icon { width: 14px; height: 14px; margin-left: 0.18rem; vertical-align: -0.2em; }
        .filter-result-head { margin: 1.2rem 0 0.6rem; font-size: var(--text-base); }
        .filter-result-count { color: var(--text-muted); font-size: var(--text-sm); font-weight: 400; }
        /* Home feed */
        .feed-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; padding: 1.1rem 0.2rem 1.4rem; }
        .feed-header h1 { font-size: var(--text-3xl); line-height: var(--leading-display); letter-spacing: var(--track-display); text-wrap: balance; }
        .feed-header p { max-width: 34rem; margin-top: 0.5rem; color: var(--text-secondary); font-size: var(--text-md); }
        .feed-actions { display: flex; align-items: center; gap: 0.85rem; flex: 0 0 auto; padding-bottom: 0.25rem; }
        .feed-actions a { color: var(--text-secondary); font-size: var(--text-sm); }
        .feed-actions a:hover { color: var(--accent); }
        .feed-actions .ui-icon, .featured-read .ui-icon, .series-enter .ui-icon { width: 14px; height: 14px; margin-left: 0.18rem; vertical-align: -0.2em; }
        .feed-actions .feed-action-primary { padding: 0.5rem 0.75rem; color: var(--on-accent); background: var(--accent); border-radius: var(--radius-sm); font-weight: 700; }
        .feed-actions .feed-action-primary:hover { color: var(--on-accent); background: var(--accent-hover); }
        .featured-post { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(16rem, 0.85fr); align-items: stretch; overflow: hidden; margin-bottom: 1.25rem; border-radius: var(--radius-panel); }
        .featured-post.reveal-item { transition-timing-function: var(--ease-emphasized); }
        .featured-post-cover-link { min-height: 15rem; overflow: hidden; }
        .featured-post-cover { display: block; width: 100%; height: 100%; min-height: 15rem; object-fit: cover; transition: transform var(--motion-slow) var(--ease-in-out); }
        .featured-post:hover .featured-post-cover { transform: scale(1.035); }
        .featured-post-body { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 1.6rem 1.7rem; }
        .featured-label { color: var(--accent); font-size: var(--text-2xs); font-weight: 700; letter-spacing: 0.04em; }
        .featured-post h2 { margin-top: 0.55rem; font-size: var(--text-2xl); line-height: var(--leading-heading); letter-spacing: var(--track-heading); text-wrap: balance; }
        .featured-post h2 a { color: var(--text-primary); }
        .featured-post h2 a:hover { color: var(--accent); }
        .featured-post-body p { margin-top: 0.65rem; color: var(--text-secondary); font-size: var(--text-md); line-height: var(--leading-body); }
        .featured-read { margin-top: 1.05rem; color: var(--accent); font-size: var(--text-sm); font-weight: 700; }
        .feed-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 0.25rem 0 0.45rem; padding: 0 0.2rem; }
        .feed-section-head h2 { font-size: var(--text-base); }
        .feed-section-head span { color: var(--text-muted); font-size: var(--text-xs); }
        .post-feed { overflow: hidden; }
        /* Post cards */
        .post-card { padding: 1.1rem 1.2rem 1.1rem 1.4rem; margin-bottom: 0.65rem; position: relative; border-left: 3px solid var(--accent-bar); }
        .post-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
        .post-card h2,.post-card h3 { font-size: var(--text-lg); font-weight: 650; margin-bottom: 0.4rem; }
        .post-card h2 a,.post-card h3 a { color: var(--text-primary); }
        .post-card h2 a:hover,.post-card h3 a:hover { color: var(--accent); }
        .post-meta { font-size: var(--text-xs); color: var(--text-muted); display: flex; flex-wrap: wrap; gap: 0.55rem; margin-bottom: 0.3rem; }
        .post-meta svg { width: 12px; height: 12px; vertical-align: -2px; margin-right: 1px; }
        .post-meta .ui-icon { width: 12px; height: 12px; margin-right: 0.1rem; }
        .post-desc { font-size: var(--text-md); color: var(--text-secondary); line-height: var(--leading-body); margin-bottom: 0.45rem; }
        .tags { display: flex; flex-wrap: wrap; gap: 0.3rem; }
        .tag { background: var(--tag-bg); color: var(--tag-text); padding: 0.12rem 0.45rem; border-radius: var(--radius-input); font-size: var(--text-2xs); font-weight: 500; transition: background-color var(--motion-base) var(--ease-out), color var(--motion-base) var(--ease-out); }
        .tag:hover { background: var(--accent); color: var(--on-accent); }
        .post-feed { display: grid; gap: 0.65rem; overflow: visible; }
        .post-feed .post-card { margin: 0; padding: 1.25rem 1.3rem; border: 1px solid var(--border-card); border-radius: var(--radius); background: var(--bg-card); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: background-color var(--motion-base) var(--ease-out), border-color var(--motion-base) var(--ease-out), box-shadow var(--motion-base) var(--ease-out), transform var(--motion-base) var(--ease-out); }
        .post-feed .post-card:hover { z-index: 1; border-color: rgba(var(--accent-rgb),0.28); background: var(--bg-card-hover); box-shadow: var(--shadow); transform: translateY(-1px); }
        .post-feed .post-card:focus-within { z-index: 1; border-color: rgba(var(--accent-rgb),0.42); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.08); }
        .post-card-has-cover { display: grid; grid-template-columns: minmax(0,1fr) 180px; grid-template-areas: "body cover"; align-items: center; gap: 1.35rem; }
        .post-card-body { grid-area: body; min-width: 0; }
        .post-card-cover-link { grid-area: cover; display: block; overflow: hidden; aspect-ratio: 16 / 9; border: 1px solid var(--border-card); border-radius: var(--radius-sm); box-shadow: 0 5px 18px rgba(0,0,0,0.12); }
        .post-card-cover-link:hover { border-color: rgba(var(--accent-rgb),0.34); }
        .post-card-cover-link .post-card-cover { height: 100%; transition: transform var(--motion-slow) var(--ease-in-out), filter var(--motion-slow) var(--ease-in-out); }
        .post-card-cover-link:hover .post-card-cover { transform: scale(1.045); filter: saturate(1.08); }
        .post-feed .post-card:nth-child(3n + 2) { grid-template-columns: 180px minmax(0,1fr); grid-template-areas: "cover body"; }
        .post-feed .post-card:nth-child(3n + 2) .post-card-cover-link { order: -1; }
        .post-feed .post-card h2 { font-size: var(--text-lg); }
        .post-feed .post-desc { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
        .post-feed .tag:nth-child(n+4) { display: none; }
        /* Pagination */
        .pagination { display: flex; justify-content: center; align-items: center; gap: 0.35rem; margin: 1.25rem 0 0.5rem; }
        .page-btn { display: inline-flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; min-width: 32px; height: 32px; padding: 0 0.45rem; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: 500; color: var(--text-secondary); background: var(--bg-card); backdrop-filter: blur(8px); transition: border-color var(--motion-base) var(--ease-out), color var(--motion-base) var(--ease-out), background-color var(--motion-base) var(--ease-out); cursor: pointer; text-decoration: none; }
        .page-btn:hover { border-color: var(--accent); color: var(--accent); }
        .page-btn.active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); font-weight: 600; }
        .page-btn.disabled { opacity: 0.3; pointer-events: none; }
        .page-btn svg { width: 14px; height: 14px; }
        /* Grid cards */
        .grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 0.65rem; }
        .grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0.65rem; }
        .info-card { padding: 1rem 1.15rem; }
        .info-card:hover { transform: translateY(-2px); }
        .info-card h3 { font-size: var(--text-md); font-weight: 600; color: var(--text-primary); margin-bottom: 0.35rem; display: flex; align-items: center; gap: 0.45rem; }
        .info-card p { font-size: var(--text-sm); color: var(--text-secondary); margin-bottom: 0.5rem; }
        .info-card .link { font-size: var(--text-sm); font-weight: 600; color: var(--accent); }
        .toolbox-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.4rem; padding: 0.9rem 0.15rem 1.1rem; border-bottom: 1px solid var(--border); }
        .toolbox-header h1 { font-size: var(--text-3xl); line-height: var(--leading-display); letter-spacing: var(--track-display); text-wrap: balance; }
        .toolbox-header p { margin-top: 0.4rem; color: var(--text-secondary); font-size: var(--text-md); }
        .toolbox-header > span { color: var(--text-muted); font: var(--text-xs) var(--font-mono); }
        .toolbox-section + .toolbox-section { margin-top: 1.9rem; }
        .toolbox-section-title { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; color: var(--text-secondary); font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.04em; }
        .toolbox-section-title svg { width: 16px; height: 16px; color: var(--accent); }
        .toolbox-section-title .ui-icon, .tool-icon .ui-icon { width: 16px; height: 16px; color: currentColor; }
        .toolbox-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0.65rem; }
        .toolbox-grid-maps .tool-card:first-child { grid-column: 1 / -1; }
        .tool-card { display: block; min-height: 8.6rem; color: var(--text-primary); }
        .tool-card:hover, .tool-card:focus-visible { color: var(--text-primary); border-color: rgba(var(--accent-rgb),0.32); box-shadow: var(--shadow-hover); transform: translateY(-2px); }
        .tool-card-head { display: flex; align-items: center; gap: 0.65rem; margin-bottom: 0.45rem; }
        .tool-card-head h3 { margin: 0; }
        .tool-card .link .ui-icon { width: 14px; height: 14px; margin-left: 0.18rem; vertical-align: -0.2em; transition: transform var(--motion-base) var(--ease-out); }
        .tool-card:hover .link .ui-icon { transform: translateX(3px); }
        .toolbox-section .info-card h3 a { color: var(--text-primary); }
        .tool-meta { color: var(--text-muted); font-size: var(--text-xs); }
        .tool-embed-shell { overflow: hidden; padding: 1.15rem; }
        .tool-embed { display: block; width: 100%; min-height: 520px; border: 0; background: transparent; }
        .tool-icon { width: 32px; height: 32px; border-radius: var(--radius-btn); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
        .tool-icon svg { width: 16px; height: 16px; }
        .tool-icon.cyan { background: rgba(var(--accent-rgb),0.12); color: var(--accent); }
        .tool-icon.green { background: rgba(52,211,153,0.12); color: #34d399; }
        .tool-icon.red { background: rgba(251,113,133,0.12); color: #fb7185; }
        .tool-icon.purple { background: rgba(167,139,250,0.12); color: #a78bfa; }
        .tool-icon.orange { background: rgba(251,146,60,0.12); color: #fb923c; }
        .tool-icon.teal { background: rgba(45,212,191,0.12); color: #2dd4bf; }
        /* Footer */
        .footer { border-top: 1px solid var(--border); padding: 1.15rem 0; margin-top: 0.75rem; position: relative; z-index: 1; }
        .footer-inner { max-width: 1320px; margin: 0 auto; padding: 0 1.5rem; text-align: center; }
        .footer p { font-size: var(--text-xs); color: var(--text-muted); line-height: var(--leading-body); }
        .footer a { color: var(--text-muted); }
        .footer a:hover { color: var(--accent); }
        /* Page scroll shortcuts */
        .scroll-actions { position: fixed; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 90; display: grid; gap: 0.45rem; }
        .scroll-actions[hidden] { display: none; }
        .scroll-action { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--nav-bg); color: var(--text-secondary); box-shadow: var(--shadow); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); cursor: pointer; font: 700 var(--text-base)/1 var(--font-sans); text-decoration: none; transition: color var(--motion-base) var(--ease-out), border-color var(--motion-base) var(--ease-out), background-color var(--motion-base) var(--ease-out), opacity var(--motion-base) var(--ease-out), transform var(--motion-base) var(--ease-out); }
        .scroll-action:hover { color: var(--accent); border-color: rgba(var(--accent-rgb),0.45); background: var(--bg-card-hover); transform: translateY(-1px); }
        .scroll-action:active { transform: translateY(1px); }
        .scroll-action.is-unavailable { opacity: 0; visibility: hidden; pointer-events: none; }
        /* Section title */
        .section-title { font-size: var(--text-base); font-weight: 700; color: var(--text-primary); margin-bottom: 0.85rem; display: flex; align-items: center; gap: 0.4rem; }
        .section-title svg { width: 17px; height: 17px; color: var(--accent); }
        /* Article content */
        .post-article, .post-article:hover { background: var(--article-bg); border-color: var(--border-card); }
        .post-article { padding: 1.75rem 1.9rem; overflow: hidden; border-radius: var(--radius-panel); box-shadow: var(--shadow-panel); }
        .article-content { max-width: 72ch; margin-inline: auto; line-height: var(--leading-prose); font-size: var(--text-base); color: var(--text-primary); overflow-wrap: break-word; word-wrap: break-word; }
        .article-content h2 { position: relative; font-size: var(--text-xl); font-weight: 700; line-height: var(--leading-heading); letter-spacing: var(--track-heading); margin: 1.9rem 0 0.7rem; padding: 0 0 0.4rem 0.8rem; border-bottom: 1px solid var(--border); }
        .article-content h2::before { content: ""; position: absolute; top: 0.18em; bottom: 0.48em; left: 0; width: 3px; border-radius: 3px; background: var(--accent); }
        .article-content h3 { font-size: var(--text-lg); font-weight: 600; line-height: var(--leading-heading); letter-spacing: var(--track-heading); margin: 1.25rem 0 0.45rem; }
        .article-content h2, .article-content h3 { scroll-margin-top: 72px; }
        .heading-anchor { margin-left: 0.4rem; padding: 0.1rem 0.25rem; border: 0; border-radius: var(--radius-input); color: var(--text-muted); background: transparent; cursor: pointer; font: 500 0.72em/1 var(--font-sans); opacity: 0; transition: color var(--motion-fast) var(--ease-out), opacity var(--motion-fast) var(--ease-out); vertical-align: 0.08em; }
        .article-content h2:hover .heading-anchor, .article-content h3:hover .heading-anchor, .heading-anchor:focus-visible, .heading-anchor.copied { opacity: 1; }
        .heading-anchor:hover, .heading-anchor.copied { color: var(--accent); }
        .article-content p { margin-bottom: 0.85rem; }
        .article-content ul, .article-content ol { margin-bottom: 0.85rem; padding-left: 1.4rem; }
        .article-content li { margin-bottom: 0.35rem; }
        .article-content strong { color: inherit; font-weight: 700; }
        .article-content blockquote { border-left: 3px solid var(--accent-bar); padding: 0.65rem 0.9rem; margin: 1.25rem 0; background: rgba(var(--accent-rgb),0.05); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--text-secondary); }
        .article-content code { background: rgba(var(--accent-rgb),0.08); padding: 0.1rem 0.3rem; border-radius: var(--radius-input); font-size: 0.85em; font-family: var(--font-mono); color: var(--accent); }
        .article-content pre { background: var(--code-bg); color: var(--code-text); padding: 0.9rem 1.1rem; border-radius: var(--radius-sm); overflow-x: auto; margin: 1.25rem 0; font-size: var(--text-md); line-height: 1.7; font-family: var(--font-mono); border: 1px solid var(--code-border); backdrop-filter: blur(8px); }
        .article-content pre code { background: none; padding: 0; color: inherit; }
        .article-content pre code span[style*="#6272a4"] { color: #9ca8d2 !important; }
        .article-content p a, .article-content li a, .article-content td a, .article-content blockquote a { text-decoration: underline; text-decoration-thickness: 0.08em; text-underline-offset: 0.16em; }
        .article-content table { width: 100%; border-collapse: collapse; margin: 1.25rem 0; display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
        .article-content th, .article-content td { border: 1px solid var(--border); padding: 0.5rem 0.65rem; text-align: left; }
        .article-content th { background: rgba(var(--accent-rgb),0.06); font-weight: 600; font-size: var(--text-md); }
        .article-content td { font-size: var(--text-md); }
        .article-content img { display: block; max-width: 100%; height: auto; margin: 1.35rem auto 1.5rem; border: 1px solid var(--border-card); border-radius: var(--radius-sm); box-shadow: var(--shadow); }
        .article-content hr { border: none; border-top: 1px solid var(--border); margin: 1.5rem 0; }
        .back-link { display: inline-flex; align-items: center; gap: 0.2rem; font-size: var(--text-sm); font-weight: 500; color: var(--text-muted); margin-bottom: 1rem; }
        .back-link:hover { color: var(--accent); }
        .back-link svg { width: 14px; height: 14px; }
        .post-header { position: relative; max-width: 72ch; margin: 0 auto 1.35rem; padding: 0.35rem 0 1.25rem 1rem; border-bottom: 1px solid var(--border); }
        .post-header::before { content: ""; position: absolute; top: 0.35rem; bottom: 1.25rem; left: 0; width: 3px; border-radius: 3px; background: linear-gradient(var(--accent), transparent); }
        .post-header h1 { font-size: var(--text-3xl); font-weight: 800; color: var(--text-primary); margin-bottom: 0.5rem; line-height: var(--leading-display); letter-spacing: var(--track-display); text-wrap: balance; }
        .post-header .post-meta span { display: inline-flex; align-items: center; }
        .post-header .tags { margin-top: 0.65rem; }
        .post-header .post-updated, .post-header .post-series { display: inline-flex; align-items: center; padding: 0.2rem 0.45rem; border-radius: var(--radius-input); background: rgba(var(--accent-rgb),0.05); }
        /* Horizontal padding ~2x vertical, so a button reads as an action, not a tile. */
        .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; min-height: 40px; padding: 0.55rem 1.1rem; border-radius: var(--radius-btn); font-size: var(--text-sm); font-weight: 600; transition: background-color var(--motion-base) var(--ease-out), color var(--motion-base) var(--ease-out), border-color var(--motion-base) var(--ease-out); cursor: pointer; border: none; }
        .btn-primary { background: var(--accent); color: var(--on-accent); }
        .btn-primary:hover { background: var(--accent-hover); color: var(--on-accent); }
        .not-found { text-align: center; padding: 3rem 0; }
        .not-found h1 { font-size: var(--text-display); font-weight: 900; color: var(--accent); line-height: var(--leading-display); letter-spacing: var(--track-display); font-variant-numeric: tabular-nums; }
        .not-found h2 { font-size: var(--text-lg); font-weight: 600; color: var(--text-primary); margin: 0.4rem 0 0.85rem; }
        .about-hero { padding: 0.9rem 0.2rem 1.25rem; }
        .about-hero p { color: var(--accent); font-size: var(--text-2xs); font-weight: 700; letter-spacing: 0.1em; }
        .about-hero h1 { margin-top: 0.35rem; font-size: var(--text-3xl); line-height: var(--leading-display); letter-spacing: var(--track-display); text-wrap: balance; }
        .about-hero span { display: block; margin-top: 0.45rem; color: var(--text-secondary); font-size: var(--text-md); }
        .about-card { padding: 1.6rem; }
        .about-intro p { max-width: 68ch; }
        .competency-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0.65rem; max-width: 72ch; margin: 1.4rem auto 0; padding-top: 1.15rem; border-top: 1px solid var(--border); }
        .competency-grid section { padding: 0.9rem; border: 1px solid var(--border-card); border-radius: var(--radius-sm); background: rgba(var(--accent-rgb),0.035); }
        .competency-grid span { color: var(--accent); font-size: var(--text-2xs); font-weight: 700; letter-spacing: 0.06em; }
        .competency-grid h2 { margin: 0.2rem 0 0.35rem; font-size: var(--text-md); }
        .competency-grid p { color: var(--text-secondary); font-size: var(--text-xs); line-height: var(--leading-body); }
        .about-section { max-width: 72ch; margin: 1.7rem auto 0; padding-top: 1.35rem; border-top: 1px solid var(--border); }
        .about-section > h2, .about-contact h2 { margin-bottom: 0.65rem; font-size: var(--text-base); }
        .about-section > p, .about-contact p { color: var(--text-secondary); font-size: var(--text-md); line-height: var(--leading-body); }
        .about-topic-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0.35rem 1.5rem; }
        .about-topic-list div { padding: 0.7rem 0; }
        .about-topic-list h3 { margin-bottom: 0.2rem; font-size: var(--text-md); }
        .about-topic-list p { color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-body); }
        .about-facts { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 0.5rem; margin-top: 1rem; }
        .about-facts div { padding: 0.7rem 0.8rem; border-radius: var(--radius-sm); background: rgba(var(--accent-rgb),0.05); }
        .about-facts dt { color: var(--text-muted); font-size: var(--text-2xs); }
        .about-facts dd { margin-top: 0.15rem; color: var(--text-primary); font-size: var(--text-sm); font-weight: 700; }
        .about-contact { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
        .about-actions { display: flex; flex: 0 0 auto; gap: 0.5rem; }
        .about-secondary { color: var(--text-secondary); border: 1px solid var(--border); background: var(--bg-card); }
        .about-secondary:hover { color: var(--accent); border-color: var(--accent); }
        /* Nav search */
        .nav-search { display: flex; align-items: center; gap: 0.35rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-input); padding: 0.25rem 0.55rem; transition: border-color var(--motion-base) var(--ease-out), box-shadow var(--motion-base) var(--ease-out); }
        .nav-search:focus-within { border-color: var(--accent); }
        .nav-search svg { width: 14px; height: 14px; color: var(--text-muted); flex-shrink: 0; }
        .nav-search input { background: none; border: none; color: var(--text-primary); font-size: var(--text-sm); font-family: inherit; width: 100%; min-width: 0; }
        /* The wrapper carries the focus ring, so the bare input keeps no outline of its own. */
        .nav-search input:focus-visible { outline: none; }
        .nav-search:focus-within { box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.16); }
        .nav-search input::placeholder { color: var(--text-muted); }
        /* Reading meta (word count / read time) */
        .post-meta .read-time { display: inline-flex; align-items: center; gap: 0.2rem; }
        /* Table of contents */
        .toc-sidebar { position: sticky; top: 72px; align-self: start; }
        .toc-card { max-height: calc(100vh - 90px); max-height: calc(100dvh - 90px); padding: 1.15rem 0.85rem 1.15rem 1rem; margin-bottom: 0.85rem; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(var(--accent-rgb),0.35) transparent; }
        .toc-card::-webkit-scrollbar { width: 6px; }
        .toc-card::-webkit-scrollbar-track { background: transparent; }
        .toc-card::-webkit-scrollbar-thumb { background: rgba(var(--accent-rgb),0.25); border-radius: 3px; }
        .toc-card::-webkit-scrollbar-thumb:hover { background: rgba(var(--accent-rgb),0.45); }
        .toc-card h4 { display: flex; align-items: center; gap: 0.45rem; font-size: var(--text-xs); font-weight: 700; color: var(--text-secondary); letter-spacing: var(--track-label); margin-bottom: 0.75rem; }
        .toc-card h4::before { content: ""; width: 3px; height: 0.85rem; border-radius: 2px; background: var(--accent); }
        .toc-list { list-style: none; }
        .toc-list li { margin: 0.15rem 0; }
        .toc-list a { display: block; font-size: var(--text-sm); color: var(--text-secondary); padding: 0.28rem 0.45rem; border-left: 2px solid transparent; border-radius: 0 var(--radius-input) var(--radius-input) 0; transition: color var(--motion-fast) var(--ease-out), background-color var(--motion-fast) var(--ease-out), border-left-color var(--motion-fast) var(--ease-out); line-height: var(--leading-ui); }
        .toc-list a:hover { color: var(--accent); background: var(--accent-glow); }
        .toc-list a.active { color: var(--accent); border-left-color: var(--accent); background: var(--accent-glow); }
        .toc-list .toc-h3 a { padding-left: 1.1rem; font-size: var(--text-xs); color: var(--text-muted); }
        .mobile-toc { display: none; margin: 1rem 0 1.2rem; padding: 0; overflow: hidden; }
        .mobile-toc summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 44px; padding: 0.75rem 0.9rem; color: var(--text-primary); cursor: pointer; font-size: var(--text-md); font-weight: 700; }
        .mobile-toc summary span { color: var(--text-muted); font-size: var(--text-2xs); font-weight: 500; }
        .mobile-toc nav { max-height: 28rem; max-height: min(55dvh,28rem); padding: 0 0.65rem 0.75rem; overflow-y: auto; overscroll-behavior: contain; border-top: 1px solid var(--border); scrollbar-width: thin; scrollbar-color: rgba(var(--accent-rgb),0.35) transparent; }
        .mobile-toc nav::-webkit-scrollbar { width: 6px; }
        .mobile-toc nav::-webkit-scrollbar-track { background: transparent; }
        .mobile-toc nav::-webkit-scrollbar-thumb { background: rgba(var(--accent-rgb),0.25); border-radius: 3px; }
        .mobile-toc .toc-list { padding-top: 0.55rem; }
        .tool-toc-loading { padding: 0.2rem 0.4rem; color: var(--text-muted); font-size: var(--text-xs); list-style: none; }
        /* Code block copy button */
        .article-content pre { position: relative; }
        .article-content pre[data-language] { padding-top: 2.4rem; }
        .article-content pre[data-language]::before { content: attr(data-language); position: absolute; top: 0.65rem; left: 1.1rem; color: var(--text-muted); font: 600 var(--text-2xs) var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; }
        .code-copy { position: absolute; top: 0.5rem; right: 0.5rem; padding: 0.3rem 0.55rem; font-size: var(--text-2xs); font-family: var(--font-sans); font-weight: 600; color: var(--text-secondary); background: rgba(var(--accent-rgb),0.12); border: 1px solid var(--border); border-radius: var(--radius-input); cursor: pointer; opacity: 0; transition: color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), background-color var(--motion-fast) var(--ease-out), opacity var(--motion-fast) var(--ease-out); }
        .article-content pre:hover .code-copy { opacity: 1; }
        .code-copy:focus-visible { opacity: 1; }
        .code-copy:hover { color: var(--accent); border-color: var(--accent); }
        .code-copy.copied { color: #34d399; border-color: #34d399; opacity: 1; }
        .table-scroll { position: relative; margin: 1.25rem 0; overflow-x: auto; border-radius: var(--radius-sm); -webkit-overflow-scrolling: touch; }
        .table-scroll .article-table { display: table; width: max-content; min-width: 100%; margin: 0; overflow: visible; }
        .table-scroll-hint { position: sticky; left: 0.65rem; display: none; width: max-content; margin: 0 0 0.35rem auto; padding: 0.12rem 0.4rem; color: var(--text-muted); background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-input); font-size: var(--text-2xs); }
        .table-scroll.is-wide .table-scroll-hint { display: block; }
        /* Post navigation (prev/next) */
        .post-nav { display: flex; gap: 0.65rem; margin-top: 1rem; }
        .post-nav a { flex: 1; padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: 0.28rem; min-width: 0; border-color: var(--border-card); }
        .post-nav .pn-label { display: inline-flex; align-items: center; gap: 0.25rem; font-size: var(--text-2xs); color: var(--accent); font-weight: 700; letter-spacing: 0.04em; }
        .post-nav .pn-label .ui-icon { width: 13px; height: 13px; }
        .post-nav .pn-title { font-size: var(--text-md); font-weight: 650; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .post-nav a:hover .pn-title { color: var(--accent); }
        .post-nav .pn-next { text-align: right; }
        /* Related posts */
        .related { margin-top: 1rem; padding: 1.25rem 1.4rem; }
        .related h3 { font-size: var(--text-base); font-weight: 700; color: var(--text-primary); margin-bottom: 0.8rem; display: flex; align-items: center; gap: 0.4rem; }
        .related h3 .ui-icon { width: 16px; height: 16px; color: var(--accent); }
        .related ul { list-style: none; }
        .related li { border-bottom: 1px solid var(--border); font-size: var(--text-md); }
        .related li:last-child { border-bottom: none; }
        .related-item { display: grid; grid-template-columns: 58px minmax(0,1fr) auto; align-items: center; gap: 0.7rem; padding: 0.55rem 0; color: var(--text-secondary); }
        .related-item img { width: 58px; height: 38px; object-fit: cover; border-radius: var(--radius-input); border: 1px solid var(--border-card); }
        .related-item span { min-width: 0; }
        .related-item strong { display: block; overflow: hidden; color: var(--text-primary); font-size: var(--text-md); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
        .related-item small { display: block; overflow: hidden; margin-top: 0.12rem; color: var(--text-muted); font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
        .related-item > .ui-icon { width: 16px; height: 16px; color: var(--text-muted); transition: color var(--motion-base) var(--ease-out), transform var(--motion-base) var(--ease-out); }
        .related-item:hover strong, .related-item:hover > .ui-icon { color: var(--accent); }
        .related-item:hover > .ui-icon { transform: translate(2px, -2px); }
        /* Archives and series */
        .archive-hero { display: flex; align-items: center; gap: 1rem; padding: 1.5rem 1.6rem; margin-bottom: 1rem; }
        .archive-hero-icon { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 42px; border-radius: 50%; color: var(--accent); background: var(--accent-glow); }
        .archive-hero-icon .ui-icon { width: 21px; height: 21px; }
        .archive-hero h1 { font-size: var(--text-2xl); line-height: var(--leading-heading); letter-spacing: var(--track-heading); }
        .archive-hero p { margin-top: 0.25rem; color: var(--text-secondary); font-size: var(--text-sm); }
        .archive-year { padding: 1.35rem 1.5rem 1.2rem; margin-bottom: 0.8rem; }
        .archive-year-head { display: flex; align-items: center; gap: 0.55rem; padding-bottom: 0.8rem; border-bottom: 1px solid var(--border); }
        .archive-year-head h2 { font-size: var(--text-xl); line-height: 1; }
        .archive-year-head span { padding: 0.12rem 0.48rem; border-radius: var(--radius-pill); color: var(--tag-text); background: var(--tag-bg); font-size: var(--text-2xs); }
        .archive-timeline { position: relative; margin-top: 0.9rem; padding-left: 1rem; }
        .archive-timeline::before { content: ""; position: absolute; top: 0.35rem; bottom: 0.6rem; left: 0.18rem; width: 1px; background: linear-gradient(var(--accent), var(--border)); opacity: 0.55; }
        .archive-month + .archive-month { margin-top: 0.75rem; }
        .archive-month h3 { position: relative; margin-bottom: 0.25rem; color: var(--accent); font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.04em; }
        .archive-month h3::before { content: ""; position: absolute; left: -1.04rem; top: 0.48rem; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-glow); }
        .archive-list { list-style: none; }
        .archive-list li { display: grid; grid-template-columns: 4.7rem minmax(0,1fr); gap: 0.7rem; align-items: baseline; padding: 0.5rem 0.45rem; border-radius: var(--radius-input); transition: background-color var(--motion-base) var(--ease-out); }
        .archive-list li:hover { background: rgba(var(--accent-rgb),0.05); }
        .archive-list time { color: var(--text-muted); font: var(--text-2xs) var(--font-mono); white-space: nowrap; font-variant-numeric: tabular-nums; }
        .archive-list a { min-width: 0; overflow: hidden; color: var(--text-secondary); font-size: var(--text-md); line-height: var(--leading-ui); text-overflow: ellipsis; white-space: nowrap; transition: color var(--motion-base) var(--ease-out), transform var(--motion-base) var(--ease-out); }
        .archive-list a:hover { color: var(--accent); }
        .archive-dot { display: none; }
        .series-hero { display: flex; align-items: center; gap: 1rem; padding: 1.5rem 1.6rem; margin-bottom: 1rem; }
        .series-hero-icon { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 42px; border-radius: var(--radius); color: var(--accent); background: var(--accent-glow); font-size: var(--text-xl); font-weight: 800; }
        .series-hero-icon .ui-icon { width: 21px; height: 21px; }
        .series-hero h1 { font-size: var(--text-2xl); line-height: var(--leading-heading); letter-spacing: var(--track-heading); }
        .series-hero p { margin-top: 0.25rem; color: var(--text-secondary); font-size: var(--text-sm); }
        .series-back { display: inline-block; margin-bottom: 0.12rem; color: var(--accent); font-size: var(--text-2xs); }
        .series-detail { padding: 1.25rem 1.5rem; margin-bottom: 1rem; }
        .series-detail ol { padding-left: 1.8rem; }
        .series-detail li { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; padding: 0.7rem 0.35rem; border-bottom: 1px solid var(--border); }
        .series-detail time { color: var(--text-secondary); font-size: var(--text-sm); white-space: nowrap; }
        .series-detail a { color: var(--text-primary); }
        .series-list { display: flex; flex-direction: column; gap: 0.7rem; }
        .series-card { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.35rem; color: var(--text-primary); border-left: 3px solid transparent; }
        .series-card:hover { border-left-color: var(--accent); transform: translateY(-1px); box-shadow: var(--shadow); }
        .series-card-main { min-width: 0; }
        .series-card-title { display: flex; align-items: center; gap: 0.55rem; }
        .series-card h2 { color: var(--text-primary); font-size: var(--text-base); }
        .series-card-title span { padding: 0.1rem 0.42rem; border-radius: var(--radius-pill); color: var(--tag-text); background: var(--tag-bg); font-size: var(--text-2xs); white-space: nowrap; }
        .series-card ul { display: flex; flex-wrap: wrap; gap: 0.25rem 1.2rem; margin-top: 0.45rem; padding-left: 1rem; color: var(--text-muted); }
        .series-card li { max-width: 20rem; overflow: hidden; font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
        .series-enter { flex: 0 0 auto; color: var(--text-muted); font-size: var(--text-xs); }
        .series-enter .ui-icon { margin-left: 0.2rem; color: var(--accent); }
        .series-card p,.post-updated,.post-series { color: var(--text-secondary); font-size: var(--text-sm); }
        .post-updated,.post-series { margin-top: 0.55rem; }
        .post-series a { color: var(--accent); }
        .post-cover,.post-card-cover { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
        .post-cover { width: calc(100% + 3.8rem); max-width: none; margin: -1.75rem -1.9rem 1.4rem; border-radius: var(--radius) var(--radius) 0 0; }
        /* Search results */
        .search-box { padding: 1.45rem 1.5rem; margin-bottom: 1.15rem; }
        .search-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
        .search-kicker { margin-bottom: 0.25rem; color: var(--accent); font-size: var(--text-2xs); font-weight: 700; letter-spacing: var(--track-label); }
        .search-heading h1 { font-size: var(--text-xl); line-height: var(--leading-heading); letter-spacing: var(--track-heading); }
        .search-shortcut { color: var(--text-muted); font-size: var(--text-xs); }
        .search-box form { display: flex; gap: 0.5rem; }
        .search-box input { flex: 1; min-height: 44px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-input); padding: 0.55rem 0.85rem; color: var(--text-primary); font-size: var(--text-base); font-family: inherit; }
        .search-box input:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.16); }
        .search-results-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 1.1rem 0 0.55rem; padding: 0 0.15rem; }
        .search-results-head h2 { font-size: var(--text-base); }
        .search-results-head span { color: var(--text-muted); font-size: var(--text-xs); }
        .search-result { margin-bottom: 0.55rem !important; }
        .search-empty { padding: 1.8rem 0.3rem; color: var(--text-muted); }
        .search-empty strong { display: block; color: var(--text-primary); font-size: var(--text-base); }
        .search-empty p { margin-top: 0.25rem; font-size: var(--text-md); }
        .search-empty a { display: inline-block; margin-top: 0.75rem; font-size: var(--text-sm); font-weight: 700; }
        .search-empty a .ui-icon { width: 14px; height: 14px; margin-left: 0.15rem; }
        .search-snippet { font-size: var(--text-sm); color: var(--text-muted); line-height: var(--leading-body); margin-top: 0.25rem; }
        .search-snippet mark { background: var(--accent-glow); color: var(--accent-hover); padding: 0 2px; border-radius: 3px; }
        /* Hamburger + mobile drawer */
        .nav-toggle { display: none; background: none; border: 1px solid var(--border); cursor: pointer; padding: 0.35rem; border-radius: var(--radius-sm); color: var(--text-secondary); width: 32px; height: 32px; align-items: center; justify-content: center; }
        .nav-toggle:hover { border-color: var(--accent); color: var(--accent); }
        .nav-toggle[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); background: var(--accent-glow); }
        .nav-toggle svg { width: 18px; height: 18px; }
        .drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); z-index: 200; opacity: 0; visibility: hidden; transition: opacity var(--motion-base) var(--ease-out); }
        .drawer-overlay.open { opacity: 1; visibility: visible; transition-duration: var(--motion-medium); }
        .mobile-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(88vw, 360px); background: var(--nav-bg); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-left: 1px solid var(--border); z-index: 201; transform: translateX(100%); transition: transform var(--motion-base) var(--ease-out); overflow-y: auto; padding: max(1.15rem, env(safe-area-inset-top)) max(1.15rem, env(safe-area-inset-right)) max(1.15rem, env(safe-area-inset-bottom)) max(1.15rem, env(safe-area-inset-left)); }
        .mobile-drawer.open { transform: translateX(0); transition-duration: var(--motion-medium); }
        .drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
        .drawer-head span { font-size: var(--text-base); font-weight: 700; color: var(--accent); }
        .drawer-close { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 0.25rem; display: flex; }
        .drawer-close:hover { color: var(--accent); }
        .drawer-close svg { width: 20px; height: 20px; }
        .drawer-search { display: flex; align-items: center; gap: 0.4rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-input); padding: 0.45rem 0.65rem; margin-bottom: 1.15rem; }
        .drawer-search:focus-within { border-color: var(--accent); }
        .drawer-search svg { width: 15px; height: 15px; color: var(--text-muted); flex-shrink: 0; }
        .drawer-search input { flex: 1; background: none; border: none; color: var(--text-primary); font-size: var(--text-md); font-family: inherit; }
        .drawer-search input:focus-visible { outline: none; }
        .drawer-search:focus-within { box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.16); }
        .drawer-search input::placeholder { color: var(--text-muted); }
        .drawer-eyebrow { margin-bottom: 0.35rem; color: var(--text-muted); font-size: var(--text-2xs); font-weight: 700; letter-spacing: var(--track-label); }
        .drawer-nav { list-style: none; margin: 0 -0.35rem 1.35rem; padding-bottom: 0.7rem; border-bottom: 1px solid var(--border); }
        .drawer-nav a { display: flex; align-items: center; min-height: 44px; padding: 0.6rem 0.7rem; border-radius: var(--radius-sm); color: var(--text-secondary); font-size: var(--text-base); font-weight: 500; }
        .drawer-nav a:hover { background: var(--accent-glow); color: var(--accent); }
        .drawer-nav a.active { background: var(--accent-glow); color: var(--accent); font-weight: 700; }
        .drawer-sec { margin-bottom: 1.35rem; }
        .drawer-sec h4 { font-size: var(--text-xs); font-weight: 700; color: var(--text-muted); letter-spacing: var(--track-label); margin-bottom: 0.55rem; }
        .drawer-cats a { display: flex; align-items: center; justify-content: space-between; padding: 0.35rem 0.5rem; border-radius: var(--radius-sm); font-size: var(--text-md); color: var(--text-secondary); }
        .drawer-cats a:hover { background: var(--accent-glow); color: var(--accent); }
        .drawer-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; }
		.breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; margin: 0 0 0.8rem; color: var(--text-muted); font-size: var(--text-sm); }
		.breadcrumbs a { color: var(--text-secondary); }
		.breadcrumbs a:hover { color: var(--accent); }
		.breadcrumbs [aria-current="page"] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: min(34rem, 68vw); }
        /* Calendar / clock card */
        .cal-card { padding: 1.15rem; margin-bottom: 0.85rem; text-align: center; }
        .cal-clock { font-family: var(--font-mono); font-size: var(--text-xl); font-weight: 600; color: var(--accent); letter-spacing: var(--track-heading); font-variant-numeric: tabular-nums; }
        .cal-solar { font-size: var(--text-sm); color: var(--text-secondary); margin-top: 0.1rem; }
        .cal-lunar { font-size: var(--text-md); color: var(--text-primary); font-weight: 600; margin-top: 0.5rem; }
        .cal-gz { font-size: var(--text-xs); color: var(--text-muted); margin-top: 0.15rem; }
        .cal-term { display: inline-block; margin-top: 0.5rem; font-size: var(--text-2xs); color: var(--tag-text); background: var(--tag-bg); padding: 0.12rem 0.5rem; border-radius: var(--radius-pill); }
        .cal-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 2px; margin-top: 0.8rem; }
        .cal-grid .cal-cell { font-size: var(--text-2xs); padding: 0.26rem 0; border-radius: var(--radius-input); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
        .cal-grid .cal-wd { color: var(--text-muted); font-weight: 600; font-size: var(--text-2xs); }
        .cal-grid .cal-today { background: var(--accent); color: var(--on-accent); font-weight: 700; }
        .cal-grid .cal-empty { visibility: hidden; }
        @media (max-width: 1140px) { .nav-search { display: none; } }
        @media (max-width: 1180px) { .layout { grid-template-columns: 1fr; } .side-left, .side-right { display: none; } .toc-card { display: none; } .mobile-toc { display: block; } .feed-header h1 { font-size: var(--text-2xl); } .featured-post h2 { font-size: var(--text-xl); } .toolbox-header h1, .about-hero h1 { font-size: var(--text-2xl); } .post-header h1 { font-size: var(--text-2xl); } .archive-hero h1, .series-hero h1 { font-size: var(--text-2xl); } }
        @media (max-width: 1024px) { .nav-inner { grid-template-columns: minmax(0,1fr) auto; gap: 1rem; } .nav-links { display: none; } .nav-actions { grid-column: 2; } .nav-toggle { display: flex; } }
        @media (max-width: 768px) {
            .feed-header { align-items: flex-start; flex-direction: column; padding-top: 0.65rem; }
            .feed-header h1 { font-size: var(--text-2xl); }
            .featured-post h2 { font-size: var(--text-xl); }
            .feed-actions { width: 100%; padding-bottom: 0; }
            .featured-post { display: block; }
            .featured-post-cover-link, .featured-post-cover { min-height: 12rem; max-height: 15rem; }
            .featured-post-body { padding: 1.2rem 1.15rem 1.35rem; }
            .article-content { font-size: var(--text-base); }
            .post-header h1 { font-size: var(--text-2xl); }
            .about-hero h1 { font-size: var(--text-2xl); }
            .archive-hero h1, .series-hero h1 { font-size: var(--text-xl); }
        }
        @media (max-width: 768px) { .nav-links { display: none; } .nav-search { display: none; } .nav-toggle { display: flex; } .theme-btn, .bg-btn { margin: 0; } .toolbox-header h1 { font-size: var(--text-xl); } .toolbox-header > span { display: none; } .toolbox-grid { grid-template-columns: 1fr; } .toolbox-grid-maps .tool-card:first-child { grid-column: auto; } .tool-embed-shell { padding: 0.75rem; } .post-nav { flex-direction: column; } .layout { padding: 1rem 0.9rem; } .post-article { padding: 1.25rem 1rem; } .post-cover { width: calc(100% + 2rem); margin: -1.25rem -1rem 1.15rem; } .article-content { font-size: var(--text-base); } .competency-grid,.about-topic-list { grid-template-columns: 1fr; } .about-facts { grid-template-columns: repeat(2,minmax(0,1fr)); } .about-contact { align-items: flex-start; flex-direction: column; } .about-actions { width: 100%; } .about-actions .btn { justify-content: center; flex: 1; } .archive-hero,.archive-year,.series-hero { padding-left: 1rem; padding-right: 1rem; } .archive-list li { grid-template-columns: 4.25rem minmax(0,1fr); gap: 0.45rem; } .archive-list a { white-space: normal; } .series-card { align-items: flex-start; padding: 1rem; } .series-card ul { display: block; } .series-card li + li { margin-top: 0.2rem; } .series-enter { font-size: 0; } .scroll-actions { right: max(0.75rem, env(safe-area-inset-right)); bottom: max(0.75rem, env(safe-area-inset-bottom)); } .scroll-action { width: 36px; height: 36px; } .post-feed .post-card:nth-child(3n + 2) { grid-template-columns: minmax(0,1fr) 112px; grid-template-areas: "body cover"; } .post-feed .post-card:nth-child(3n + 2) .post-card-cover-link { order: initial; } }
        @media (max-width: 768px) { .search-box { padding: 1.15rem 1rem; } .search-heading { align-items: flex-start; flex-direction: column; gap: 0.25rem; } .search-shortcut { font-size: var(--text-xs); } .search-box form { align-items: stretch; flex-direction: column; } .search-box .btn { justify-content: center; min-height: 42px; } .search-results-head { align-items: flex-start; flex-direction: column; gap: 0.15rem; } }
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
            /* Focus must stay perceptible: keyboard users need to see the state land. */
            :focus-visible { transition-duration: var(--motion-fast) !important; }
            a:active, button:active { transform: none; }
        }
        .reveal-item { opacity: 0; transform: translateY(12px); transition: opacity var(--motion-slow) var(--ease-out) var(--reveal-delay), transform var(--motion-slow) var(--ease-out) var(--reveal-delay); }
        .reveal-item.is-visible { opacity: 1; transform: none; }
        @media (prefers-reduced-motion: reduce) { .reveal-item { opacity: 1; transform: none; transition: none; } }
        @media (prefers-reduced-transparency: reduce) {
            .glass, .nav, .mobile-drawer, .scroll-action, .page-btn { background: var(--bg-card-solid); backdrop-filter: none; -webkit-backdrop-filter: none; }
            .nav { border-bottom-color: var(--border); }
            .nav.is-scrolled { box-shadow: none; }
        }
        @media (prefers-contrast: more) {
            :root { --border: rgba(148,163,184,0.48); --border-card: rgba(148,163,184,0.62); }
            .post-meta, .text-muted { color: var(--text-secondary); }
        }
        a:active, button:active { transform: scale(0.985); transition: transform var(--motion-fast) var(--ease-out); }
        /* Touch: a mouse hits a 32px target reliably, a thumb does not. Grow the hit
           area with a pseudo-element so the visual size stays as designed. */
        @media (pointer: coarse) {
            .theme-btn, .bg-btn, .nav-toggle, .drawer-close, .code-copy { position: relative; }
            .theme-btn::after, .bg-btn::after, .nav-toggle::after, .drawer-close::after, .code-copy::after {
                content: ""; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%,-50%);
            }
            .btn { min-height: 44px; }
        }
        @media (hover: none) {
            .code-copy, .heading-anchor { opacity: 1; }
            .post-feed .post-card:hover { transform: none; }
        }
        @media (forced-colors: active) {
            :focus-visible { outline-color: Highlight; }
            .glass, .scroll-action, .theme-btn, .bg-btn, .nav-toggle { border: 1px solid CanvasText; }
            .toc-list a.active { color: LinkText; }
        }