:root {
    --sf-bg: #050d19;
    --sf-bg-deep: #020713;
    --sf-surface: #091525;
    --sf-surface-strong: #0d1c30;
    --sf-surface-soft: rgba(11, 28, 48, .64);
    --sf-line: rgba(157, 185, 219, .18);
    --sf-line-bright: rgba(121, 205, 255, .42);
    --sf-text: #eff6ff;
    --sf-text-soft: #c3d0df;
    --sf-muted: #7890aa;
    --sf-cyan: #1cdbf5;
    --sf-blue: #55a8ff;
    --sf-violet: #ad82ff;
    --sf-amber: #ffbe4c;
    --sf-scroll-track: #020713;
    --sf-scroll-thumb: rgba(120, 144, 170, .62);
    --sf-scroll-thumb-hover: var(--sf-cyan);
    --sf-max: 1500px;
    --sf-radius: 14px;
    --sf-shadow: 0 22px 80px rgba(0, 5, 16, .38);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: var(--sf-scroll-thumb) var(--sf-scroll-track); }
html[data-theme="day"] { --sf-scroll-track: #eaf3fb; --sf-scroll-thumb: rgba(54, 83, 110, .5); --sf-scroll-thumb-hover: #078ab2; scrollbar-color: var(--sf-scroll-thumb) var(--sf-scroll-track); }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: var(--sf-scroll-track); }
*::-webkit-scrollbar-thumb { min-height: 42px; border: 2px solid var(--sf-scroll-track); border-radius: 999px; background: linear-gradient(180deg, var(--sf-scroll-thumb), var(--sf-violet)); }
*::-webkit-scrollbar-thumb:hover { background: var(--sf-scroll-thumb-hover); }
*::-webkit-scrollbar-corner { background: var(--sf-scroll-track); }
body {
    margin: 0;
    color: var(--sf-text);
    background: var(--sf-bg-deep);
    font-family: Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: 15px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: .52;
    background-image: linear-gradient(rgba(97, 178, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(97, 178, 255, .035) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: linear-gradient(to bottom, black 0%, transparent 74%);
}
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button { color: inherit; }
code, pre, .sf-kicker, .sf-label, .sf-meta, .sf-pagination, .sf-footer__signal { font-family: "DM Mono", Consolas, monospace; }

.sf-site-shell {
    width: min(var(--sf-max), calc(100% - 44px));
    min-height: 100vh;
    margin: 22px auto;
    position: relative;
    /* Clip decorative overflow without creating a scroll container; this keeps the Reading Map sticky to the viewport. */
    overflow: clip;
    border: 1px solid var(--sf-line);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(9, 21, 37, .96), rgba(3, 10, 21, .98));
    box-shadow: var(--sf-shadow);
}
.sf-site-shell::after {
    content: "";
    position: absolute;
    z-index: 0;
    width: 580px;
    height: 580px;
    right: -250px;
    top: 170px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(24, 186, 247, .08), transparent 65%);
    pointer-events: none;
}
.sf-topbar, .sf-layout, .sf-footer { position: relative; z-index: 1; }
.sf-topbar {
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 0 28px;
    border-bottom: 1px solid var(--sf-line);
}
.sf-topbar__identity, .sf-topbar__actions, .sf-brand, .sf-hero__actions, .sf-meta, .sf-post__meta, .sf-section-heading, .sf-product-panel__body, .sf-news-item, .sf-post__share, .sf-post__pager, .sf-comment__meta { display: flex; align-items: center; }
.sf-topbar__identity { gap: 18px; min-width: 0; }
.sf-brand { gap: 11px; font-weight: 800; letter-spacing: .16em; }
.sf-brand__mark { width: 29px; height: 29px; display: grid; place-items: center; color: var(--sf-cyan); }
.sf-brand__mark svg { width: 29px; height: 29px; fill: none; stroke: currentColor; stroke-width: 1.25; }
.sf-brand__name { font-size: 16px; }
.sf-brand__note { color: var(--sf-muted); font-size: 12px; letter-spacing: .08em; white-space: nowrap; }
.sf-topbar__actions { gap: 8px; }
.sf-icon-button, .sf-menu-button, .sf-tool-button { width: 34px; height: 34px; border: 1px solid transparent; background: transparent; cursor: pointer; color: var(--sf-muted); border-radius: 9px; transition: .2s ease; }
.sf-icon-button { display: inline-grid; place-items: center; padding: 0; line-height: 1; }
.sf-icon-button__glyph { display: block; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.sf-icon-button:hover, .sf-tool-button:hover, .sf-menu-button:hover { color: var(--sf-text); border-color: var(--sf-line); background: rgba(120, 180, 240, .08); }
.sf-menu-button { display: none; padding: 8px 6px; }
.sf-menu-button span { display: block; height: 1px; margin: 4px 0; background: currentColor; }

.sf-search-panel { position: absolute; top: 72px; right: 22px; z-index: 5; width: min(560px, calc(100% - 44px)); padding: 20px; border: 1px solid var(--sf-line-bright); border-radius: 0 0 14px 14px; background: rgba(6, 16, 29, .98); box-shadow: 0 20px 55px rgba(0, 0, 0, .36); }
.sf-search-panel[hidden] { display: none; }
.sf-search-form label { display: block; margin-bottom: 10px; color: var(--sf-muted); font: 11px "DM Mono", monospace; letter-spacing: .12em; text-transform: uppercase; }
.sf-search-form__row { display: flex; gap: 8px; }
.sf-search-form input { min-width: 0; flex: 1; padding: 11px 13px; border: 1px solid var(--sf-line); border-radius: 8px; outline: none; color: var(--sf-text); background: rgba(4, 12, 23, .7); }
.sf-search-form input:focus { border-color: var(--sf-cyan); box-shadow: 0 0 0 3px rgba(28, 219, 245, .1); }

.sf-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: calc(100vh - 160px); }
.sf-sidebar { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: 20px; padding: 28px 18px 22px; border-right: 1px solid var(--sf-line); background: linear-gradient(180deg, rgba(4, 14, 27, .72), rgba(3, 10, 21, .35)); }
.sf-sidebar__profile { display: flex; align-items: center; gap: 11px; padding: 2px 8px; }
.sf-avatar { width: 39px; height: 39px; display: grid; place-items: center; border: 1px solid rgba(28, 219, 245, .62); border-radius: 12px; color: var(--sf-cyan); background: linear-gradient(145deg, rgba(28, 219, 245, .18), rgba(173, 130, 255, .14)); font-weight: 700; }
.sf-sidebar__profile strong { display: block; font-size: 12px; letter-spacing: .06em; }
.sf-sidebar__profile span { display: block; margin-top: 3px; color: var(--sf-muted); font-size: 10px; }
.sf-sidebar__line { height: 1px; margin: 0 8px; background: var(--sf-line); }
.sf-nav { display: grid; gap: 6px; }
.sf-nav__item { display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 8px; min-height: 49px; padding: 0 11px; border: 1px solid transparent; border-radius: 10px; color: var(--sf-text-soft); transition: .2s ease; }
.sf-nav__item:hover, .sf-nav__item.is-active { border-color: var(--sf-line); background: rgba(101, 162, 216, .1); color: var(--sf-text); }
.sf-nav__item.is-active { box-shadow: inset -2px 0 var(--sf-cyan); }
.sf-nav__icon { display: grid; place-items: center; width: 24px; height: 24px; color: var(--sf-cyan); font-size: 21px; line-height: 1; }
.sf-nav__icon svg { display: block; width: 18px; height: 18px; overflow: visible; }
.sf-nav__item:hover .sf-nav__icon svg, .sf-nav__item.is-active .sf-nav__icon svg { filter: drop-shadow(0 0 5px currentColor); }
.sf-nav__item--violet .sf-nav__icon { color: var(--sf-violet); }
.sf-nav__item--purple .sf-nav__icon { color: #be78ff; }
.sf-nav__item--amber .sf-nav__icon { color: var(--sf-amber); }
.sf-nav__item small { color: var(--sf-muted); font: 10px "DM Mono", monospace; }
.sf-nav__item--page { grid-template-columns: 24px minmax(0, 1fr); }
.sf-nav__item--page .sf-nav__icon { color: var(--sf-blue); font-size: 18px; }
.sf-sidebar__bottom { display: grid; gap: 10px; margin-top: auto; padding: 12px 11px 0; border-top: 1px solid var(--sf-line); }
.sf-sidebar__bottom a { color: var(--sf-muted); font-size: 12px; transition: color .2s ease; }
.sf-sidebar__bottom a:hover { color: var(--sf-text); }
.sf-sidebar__bottom span { display: inline-block; width: 20px; color: var(--sf-cyan); }
.sf-sidebar__section { padding: 0 8px; }
.sf-sidebar__section-title { margin: 0 0 10px; color: var(--sf-muted); font: 10px "DM Mono", monospace; letter-spacing: .16em; text-transform: uppercase; }
.sf-sidebar__link-list, .sf-sidebar__stats-list { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.sf-sidebar__link { display: flex; align-items: flex-start; gap: 8px; min-width: 0; padding: 6px 8px; border: 1px solid transparent; border-radius: 8px; color: var(--sf-text-soft); transition: .2s ease; }
.sf-sidebar__link:hover { border-color: var(--sf-line); color: var(--sf-text); background: rgba(101, 162, 216, .1); }
.sf-sidebar__link-icon { flex: none; width: 18px; color: var(--sf-cyan); font-size: 15px; line-height: 1.35; }
.sf-sidebar__link-copy { display: block; min-width: 0; }
.sf-sidebar__link-copy strong, .sf-sidebar__link-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-sidebar__link-copy strong { font-size: 12px; font-weight: 500; }
.sf-sidebar__link-copy small { margin-top: 1px; color: var(--sf-muted); font-size: 10px; }
.sf-sidebar__empty { margin: 0; color: var(--sf-muted); font-size: 11px; line-height: 1.45; }
.sf-sidebar__stats-list { gap: 7px; }
.sf-sidebar__stats-list li { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 34px; padding: 6px 9px 6px 13px; overflow: hidden; border: 1px solid var(--sf-line); border-radius: 9px; color: var(--sf-muted); background: linear-gradient(135deg, rgba(12, 31, 51, .64), rgba(4, 14, 28, .48)); font: 10px "DM Mono", monospace; transition: border-color .2s ease, background .2s ease, transform .2s ease; }
.sf-sidebar__stats-list li::before { content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px; border-radius: 0 3px 3px 0; background: var(--sf-cyan); box-shadow: 0 0 10px rgba(28, 219, 245, .45); }
.sf-sidebar__stats-list li:hover { border-color: rgba(28, 219, 245, .4); background: linear-gradient(135deg, rgba(17, 43, 69, .8), rgba(5, 18, 33, .64)); transform: translateX(2px); }
.sf-sidebar__stats-list li:last-child::before { background: var(--sf-violet); box-shadow: 0 0 10px rgba(173, 130, 255, .45); }
.sf-sidebar__stats-list span { color: var(--sf-text-soft); }
.sf-sidebar__stats-list strong { color: var(--sf-cyan); font-weight: 600; text-align: right; white-space: nowrap; }
body[data-theme="day"] .sf-sidebar__stats-list li { background: linear-gradient(135deg, rgba(255, 255, 255, .92), rgba(238, 247, 253, .82)); }
body[data-theme="day"] .sf-sidebar__stats-list li:hover { background: linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(223, 244, 253, .9)); }

.sf-main { grid-column: 2; grid-row: 1; min-width: 0; padding: 42px 50px 64px; }

/* Landscape desktop layouts need more room for the primary navigation. Keep
   the portrait desktop balance and the mobile slide-out menu unchanged. */
@media (min-width: 901px) and (orientation: landscape) {
    .sf-layout { grid-template-columns: 320px minmax(0, 1fr); }
}

.sf-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 420px; align-items: center; gap: 36px; min-height: 365px; padding: 20px 16px 42px; }
.sf-hero::before { content: ""; position: absolute; left: 0; right: 40%; bottom: 0; height: 1px; background: linear-gradient(90deg, var(--sf-cyan), transparent); opacity: .6; }
.sf-kicker { margin: 0 0 14px; color: var(--sf-muted); font-size: 10px; letter-spacing: .15em; line-height: 1.3; }
.sf-kicker--cyan { color: var(--sf-cyan); }
.sf-kicker--violet { color: var(--sf-violet); }
.sf-kicker--blue { color: var(--sf-blue); }
.sf-kicker--amber { color: var(--sf-amber); }
.sf-kicker__dot { display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: var(--sf-cyan); box-shadow: 0 0 14px var(--sf-cyan); vertical-align: 1px; }
.sf-kicker__line { display: inline-block; width: 32px; height: 1px; margin: 0 7px 3px; background: currentColor; opacity: .55; }
.sf-hero h1 { max-width: 680px; margin: 0; font-size: clamp(34px, 4.2vw, 65px); line-height: 1.08; letter-spacing: -.055em; font-weight: 700; }
.sf-hero__intro { max-width: 480px; margin: 23px 0 0; color: var(--sf-text-soft); font-size: 16px; }
.sf-hero__actions { gap: 21px; margin-top: 31px; }
.sf-button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 40px; padding: 0 15px; border: 1px solid var(--sf-line); border-radius: 8px; font-size: 12px; cursor: pointer; transition: .2s ease; }
.sf-button span { font-size: 16px; line-height: 1; }
.sf-button--primary { border-color: var(--sf-cyan); color: #041018; background: var(--sf-cyan); box-shadow: 0 0 23px rgba(28, 219, 245, .18); }
.sf-button--primary:hover { background: #68e8fb; box-shadow: 0 0 28px rgba(28, 219, 245, .3); }
.sf-button--violet { border-color: var(--sf-violet); color: #fff; background: rgba(173, 130, 255, .13); }
.sf-button--violet:hover { background: rgba(173, 130, 255, .25); }
.sf-button--ghost { color: var(--sf-text-soft); background: rgba(255, 255, 255, .02); }
.sf-button--ghost:hover { border-color: var(--sf-cyan); color: var(--sf-cyan); }
.sf-text-link { color: var(--sf-text-soft); font-size: 12px; transition: color .2s ease; }
.sf-text-link span { display: inline-block; margin-left: 7px; color: var(--sf-cyan); transition: transform .2s ease; }
.sf-text-link:hover { color: var(--sf-text); }
.sf-text-link:hover span { transform: translateX(3px); }
.sf-hero__orb { position: relative; width: min(100%, 380px); aspect-ratio: 1; justify-self: center; }
.sf-hero__orb::before { content: ""; position: absolute; inset: 9%; border: 1px solid rgba(57, 177, 246, .28); transform: rotate(30deg) skewX(-8deg); border-radius: 25px; }
.sf-orb__halo { position: absolute; border: 1px solid rgba(87, 188, 255, .46); transform: rotate(32deg); }
.sf-orb__halo--one { inset: 21%; border-radius: 25%; }
.sf-orb__halo--two { inset: 14%; border-color: rgba(173, 130, 255, .36); border-radius: 23%; transform: rotate(-32deg); }
.sf-orb__core { position: absolute; inset: 36%; display: grid; place-items: center; border: 1px solid var(--sf-cyan); transform: rotate(45deg); border-radius: 8px; background: linear-gradient(145deg, rgba(28, 219, 245, .23), rgba(67, 109, 255, .15)); box-shadow: 0 0 34px rgba(28, 219, 245, .32), inset 0 0 20px rgba(28, 219, 245, .17); }
.sf-orb__core span { width: 43%; height: 43%; display: block; border: 1px solid rgba(255, 255, 255, .8); border-radius: 4px; background: linear-gradient(145deg, #59e7ff, #4979ff); box-shadow: 0 0 25px rgba(28, 219, 245, .85); }

/* The hero orb stays intentionally slow and subtle: the line frames drift while the
   centre breathes, preserving the stillness of the page and keeping the motion cheap. */
.sf-hero__orb { animation: sf-orb-float 9s ease-in-out infinite; }
.sf-hero__orb::before { animation: sf-orb-frame 20s linear infinite; transform-origin: center; }
.sf-orb__halo--one { animation: sf-orb-halo-one 10s linear infinite; transform-origin: center; }
.sf-orb__halo--two { animation: sf-orb-halo-two 5s linear infinite; transform-origin: center; }
.sf-orb__core { animation: sf-orb-core 7s ease-in-out infinite; transform-origin: center; }
.sf-orb__core span { animation: sf-orb-core-glow 3.8s ease-in-out infinite; transform-origin: center; }
@keyframes sf-orb-float { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -8px, 0); } }
@keyframes sf-orb-frame { 0% { transform: rotate(30deg) skewX(-8deg); } 50% { transform: rotate(210deg) skewX(-8deg); } 100% { transform: rotate(390deg) skewX(-8deg); } }
@keyframes sf-orb-halo-one { from { transform: rotate(32deg); } to { transform: rotate(-328deg); } }
@keyframes sf-orb-halo-two { from { transform: rotate(-32deg); } to { transform: rotate(328deg); } }
@keyframes sf-orb-core { 0%, 100% { transform: rotate(45deg) scale(1); } 50% { transform: rotate(45deg) scale(1.06); } }
@keyframes sf-orb-core-glow { 0%, 100% { opacity: .84; transform: scale(.92); box-shadow: 0 0 18px rgba(28, 219, 245, .62); } 50% { opacity: 1; transform: scale(1.08); box-shadow: 0 0 29px rgba(28, 219, 245, .95); } }
@media (prefers-reduced-motion: reduce) {
    .sf-hero__orb,
    .sf-hero__orb::before,
    .sf-orb__halo--one,
    .sf-orb__halo--two,
    .sf-orb__core,
    .sf-orb__core span { animation: none; }
    .ai-cursor { animation: none !important; }
}

.sf-section { position: relative; margin-top: 47px; }
.sf-section-heading { justify-content: space-between; gap: 18px; margin-bottom: 21px; }
.sf-section-heading--compact { margin-bottom: 18px; }
.sf-section-heading h2 { margin: 0; font-size: 22px; letter-spacing: -.04em; }
.sf-section-heading .sf-kicker { margin-bottom: 6px; }
.sf-feature-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(290px, .95fr); gap: 13px; }
.sf-feature-card, .sf-mini-card, .sf-panel, .sf-archive-toolbar, .sf-entry-row { border: 1px solid var(--sf-line); background: linear-gradient(145deg, rgba(12, 31, 51, .77), rgba(4, 14, 28, .72)); }
.sf-feature-card { display: grid; grid-template-columns: minmax(0, 1fr) 220px; min-height: 246px; overflow: hidden; border-radius: var(--sf-radius); }
.sf-feature-card__content { display: flex; flex-direction: column; padding: 26px 23px; }
.sf-label { margin: 0; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }
.sf-label--cyan { color: var(--sf-cyan); }
.sf-label--muted { color: var(--sf-muted); }
.sf-label span { color: var(--sf-muted); }
.sf-feature-card h3 { max-width: 400px; margin: 17px 0 11px; font-size: 24px; line-height: 1.2; letter-spacing: -.045em; }
.sf-feature-card h3 a:hover, .sf-mini-card h3 a:hover, .sf-entry-row h2 a:hover { color: var(--sf-cyan); }
.sf-feature-card__content > p:not(.sf-label) { max-width: 420px; margin: 0; color: var(--sf-text-soft); font-size: 13px; }
.sf-meta { gap: 13px; margin-top: auto; color: var(--sf-muted); font: 10px "DM Mono", monospace; }
.sf-meta__tag { color: var(--sf-cyan); }
.sf-feature-card__visual { position: relative; display: grid; place-items: center; overflow: hidden; border-left: 1px solid var(--sf-line); background: radial-gradient(circle at 50% 48%, rgba(28, 219, 245, .18), transparent 32%), linear-gradient(145deg, rgba(4, 17, 31, .6), rgba(7, 18, 42, .96)); }
.sf-feature-card__visual::before { content: ""; position: absolute; inset: -40%; background: linear-gradient(30deg, transparent 47%, rgba(28, 219, 245, .22) 48%, transparent 49%), linear-gradient(130deg, transparent 47%, rgba(173, 130, 255, .23) 48%, transparent 49%); transform: rotate(15deg); }
.sf-feature-card__arrow { position: absolute; right: 15px; top: 13px; color: var(--sf-cyan); font-size: 21px; }
.sf-network { position: relative; width: 130px; height: 130px; border: 1px solid rgba(28, 219, 245, .34); border-radius: 50%; transform: rotate(25deg); }
.sf-network::before, .sf-network::after { content: ""; position: absolute; inset: 23%; border: 1px solid rgba(28, 219, 245, .45); transform: rotate(45deg); }
.sf-network::after { inset: 39%; border-color: rgba(173, 130, 255, .7); }
.sf-network i { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--sf-cyan); box-shadow: 0 0 12px var(--sf-cyan); }
.sf-network i:nth-child(1) { left: 14%; top: 43%; }.sf-network i:nth-child(2) { left: 47%; top: 5%; }.sf-network i:nth-child(3) { right: 11%; top: 42%; }.sf-network i:nth-child(4) { left: 30%; bottom: 12%; }.sf-network i:nth-child(5) { right: 29%; bottom: 13%; }
.sf-mini-card { display: grid; grid-template-columns: 35px 1fr 24px; gap: 11px; align-items: start; padding: 17px 16px; border-radius: var(--sf-radius); }
.sf-mini-card + .sf-mini-card { border-top: 0; border-radius: 0; }
.sf-feature-grid > div { display: grid; gap: 0; }
.sf-feature-grid > div .sf-mini-card:first-child { border-radius: var(--sf-radius) var(--sf-radius) 0 0; }.sf-feature-grid > div .sf-mini-card:last-child { border-radius: 0 0 var(--sf-radius) var(--sf-radius); }
.sf-mini-card__index { color: var(--sf-violet); font: 11px "DM Mono", monospace; }
.sf-mini-card h3 { margin: 4px 0 5px; font-size: 15px; line-height: 1.35; }
.sf-mini-card p:not(.sf-label) { margin: 0; color: var(--sf-muted); font-size: 11px; line-height: 1.45; }
.sf-mini-card__go { color: var(--sf-cyan); font-size: 20px; transition: transform .2s ease; }.sf-mini-card:hover .sf-mini-card__go { transform: translateX(3px); }

.sf-section--split { display: grid; grid-template-columns: .9fr 1.1fr; gap: 13px; }
.sf-panel { min-height: 220px; padding: 23px; border-radius: var(--sf-radius); }
.sf-section-heading--compact .sf-text-link, .sf-status { color: var(--sf-muted); font: 10px "DM Mono", monospace; }
.sf-status i { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: var(--sf-violet); box-shadow: 0 0 10px var(--sf-violet); }
.sf-product-panel__body { align-items: flex-start; gap: 17px; min-height: 104px; }
.sf-product-mark { width: 53px; height: 53px; flex: none; display: grid; place-items: center; border: 1px solid var(--sf-violet); border-radius: 13px; color: var(--sf-violet); font-size: 27px; font-weight: 800; box-shadow: 0 0 28px rgba(173, 130, 255, .15); }
.sf-product-mark--cyan { border-color: var(--sf-cyan); color: var(--sf-cyan); box-shadow: 0 0 28px rgba(28, 219, 245, .15); }
.sf-product-panel h2 { margin: 0 0 6px; font-size: 19px; }.sf-product-panel p { margin: 0; color: var(--sf-text-soft); font-size: 12px; }
.sf-product-panel > .sf-button { margin-top: 18px; }
.sf-news-list { display: grid; }.sf-news-item { gap: 11px; min-height: 47px; border-bottom: 1px solid var(--sf-line); color: var(--sf-text-soft); transition: color .2s ease; }.sf-news-item:last-child { border-bottom: 0; }.sf-news-item:hover { color: var(--sf-cyan); }
.sf-news-item__mark { color: var(--sf-blue); font-size: 19px; }.sf-news-item strong { display: block; font-size: 12px; font-weight: 500; }.sf-news-item small { display: block; margin-top: 2px; color: var(--sf-muted); font: 10px "DM Mono", monospace; }.sf-news-item__arrow { margin-left: auto; color: var(--sf-muted); }.sf-news-list--placeholder p { margin: 10px 0 0; color: var(--sf-muted); font-size: 12px; }.sf-news-list--placeholder code { color: var(--sf-cyan); }

/* Homepage ordering: products lead, followed by a four-card latest-article grid. */
.sf-product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.sf-product-card { position: relative; display: flex; flex-direction: column; min-height: 245px; overflow: hidden; }
.sf-product-card::after { content: ""; position: absolute; right: -70px; bottom: -90px; width: 220px; height: 220px; border: 1px solid rgba(173, 130, 255, .18); border-radius: 50%; pointer-events: none; }
.sf-product-card--cyan::after { border-color: rgba(28, 219, 245, .18); }
.sf-product-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }
.sf-product-card__copy { position: relative; z-index: 1; flex: 1; margin-top: 17px; }
.sf-product-card h3 { margin: 0 0 8px; font-size: 22px; line-height: 1.2; letter-spacing: -.04em; }
.sf-product-card p { max-width: 520px; margin: 0; color: var(--sf-text-soft); font-size: 12px; line-height: 1.65; }
.sf-product-card > .sf-button { align-self: flex-start; position: relative; z-index: 1; margin-top: 20px; }
.sf-feature-grid--latest { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.sf-feature-grid--latest .sf-feature-card { display: flex; flex-direction: column; min-height: 285px; }
.sf-feature-grid--latest .sf-feature-card__visual { order: -1; min-height: 108px; border-top: 0; border-left: 0; border-bottom: 1px solid var(--sf-line); }
.sf-feature-grid--latest .sf-feature-card__content { flex: 1; padding: 18px 18px 16px; }
.sf-feature-grid--latest .sf-feature-card h3 { display: -webkit-box; overflow: hidden; margin: 10px 0 8px; font-size: 17px; line-height: 1.3; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.sf-feature-grid--latest .sf-feature-card__content > p:not(.sf-label) { display: -webkit-box; overflow: hidden; max-width: none; line-height: 1.55; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.sf-feature-grid--latest .sf-meta { flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 15px; }
.sf-feature-grid--latest .sf-network { width: 83px; height: 83px; }

.sf-section--photos { padding-bottom: 4px; }.sf-photo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }.sf-photo-tile { position: relative; display: block; height: 150px; overflow: hidden; border: 1px solid var(--sf-line); border-radius: 9px; background: linear-gradient(145deg, #17314b, #071020); }.sf-photo-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(2, 6, 14, .78)); }.sf-photo-tile img { width: 100%; height: 100%; object-fit: cover; opacity: .86; transition: transform .45s ease, opacity .3s ease; }.sf-photo-tile:hover img { opacity: 1; transform: scale(1.06); }.sf-photo-tile > span:not(.sf-photo-tile__caption) { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,.38); font: 10px "DM Mono", monospace; letter-spacing: .18em; }.sf-photo-tile--2 { background: linear-gradient(145deg, #24516b, #0e1e34); }.sf-photo-tile--3 { background: linear-gradient(145deg, #5b5b36, #161b21); }.sf-photo-tile--4 { background: linear-gradient(145deg, #273263, #160f28); }.sf-photo-tile__caption { position: absolute; z-index: 1; bottom: 10px; left: 11px; right: 11px; display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #fff; font: 10px "DM Mono", monospace; }.sf-photo-tile__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.sf-photo-tile__caption i { flex: none; color: var(--sf-amber); font-style: normal; font-size: 15px; }

.sf-empty-state { display: grid; place-items: center; min-height: 180px; border: 1px dashed var(--sf-line); border-radius: var(--sf-radius); color: var(--sf-muted); text-align: center; }.sf-empty-state span { color: var(--sf-cyan); font-size: 35px; }.sf-empty-state p { margin: 0; font-size: 13px; }

.sf-archive-head { display: flex; align-items: end; justify-content: space-between; gap: 25px; min-height: 180px; padding: 9px 16px 34px; border-bottom: 1px solid var(--sf-line); }.sf-archive-head h1 { margin: 0; font-size: clamp(33px, 4vw, 54px); letter-spacing: -.055em; }.sf-archive-head p:not(.sf-kicker) { margin: 15px 0 0; color: var(--sf-text-soft); }.sf-archive-head__count { display: flex; align-items: baseline; gap: 10px; color: var(--sf-muted); }.sf-archive-head__count strong { color: var(--sf-cyan); font: 34px "DM Mono", monospace; }.sf-archive-head__count span { font: 9px "DM Mono", monospace; letter-spacing: .1em; }
.sf-archive-toolbar { min-height: 0; }
.sf-archive-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 25px; padding: 8px 10px 8px 19px; border-radius: 10px; }.sf-filter-tabs { display: flex; align-items: center; gap: 3px; overflow-x: auto; }.sf-filter-tabs a { flex: none; padding: 8px 12px; border-radius: 6px; color: var(--sf-muted); font-size: 11px; }.sf-filter-tabs a:hover, .sf-filter-tabs a.is-active { color: var(--sf-cyan); background: rgba(28, 219, 245, .1); }.sf-toolbar-actions { display: flex; gap: 4px; }.sf-tool-button { width: 30px; height: 30px; }.sf-tool-button.is-active { color: var(--sf-cyan); border-color: rgba(28, 219, 245, .36); background: rgba(28, 219, 245, .1); }
.sf-filter-tabs--tags { gap: 7px; padding: 1px 0; scrollbar-width: thin; }.sf-filter-tabs--tags a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border: 1px solid var(--sf-line); border-radius: 999px; background: rgba(5, 20, 36, .48); }.sf-filter-tabs--tags a:hover { border-color: var(--sf-line-bright); background: rgba(28, 219, 245, .12); }.sf-filter-tabs--tags a small { color: var(--sf-muted); font: 10px "DM Mono", monospace; }.sf-filter-empty { padding: 8px 12px; color: var(--sf-muted); font-size: 11px; }
.sf-archive-list { display: grid; gap: 10px; margin-top: 17px; }.sf-entry-row { display: grid; grid-template-columns: 70px 13px minmax(0, 1fr) 135px 27px; align-items: center; gap: 14px; min-height: 141px; padding: 17px 21px; border-radius: 10px; }.sf-entry-row__date { display: grid; color: var(--sf-muted); text-align: right; font: 10px "DM Mono", monospace; }.sf-entry-row__date strong { margin-top: 2px; color: var(--sf-text); font-size: 17px; font-weight: 500; }.sf-entry-row__marker { height: 100%; position: relative; }.sf-entry-row__marker::before { content: ""; position: absolute; left: 50%; top: 10px; bottom: 10px; width: 1px; background: linear-gradient(var(--sf-cyan), transparent); }.sf-entry-row__marker i { position: absolute; z-index: 1; top: 12px; left: calc(50% - 4px); width: 8px; height: 8px; border: 1px solid var(--sf-cyan); border-radius: 50%; background: var(--sf-bg); box-shadow: 0 0 13px var(--sf-cyan); }.sf-entry-row__main { min-width: 0; }.sf-entry-row h2 { margin: 8px 0 6px; font-size: 19px; line-height: 1.25; letter-spacing: -.03em; }.sf-entry-row__main > p:not(.sf-label) { overflow: hidden; max-width: 680px; margin: 0; color: var(--sf-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }.sf-entry-row__tags { display: flex; gap: 6px; margin-top: 9px; overflow: hidden; }.sf-entry-row__tags a { padding: 2px 6px; border: 1px solid var(--sf-line); border-radius: 4px; color: var(--sf-muted); font: 9px "DM Mono", monospace; white-space: nowrap; }.sf-entry-row__cover { width: 135px; height: 86px; overflow: hidden; border: 1px solid var(--sf-line); border-radius: 7px; }.sf-entry-row__cover img { width: 100%; height: 100%; object-fit: cover; }.sf-entry-row__cover--abstract { display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, rgba(28, 219, 245, .22), transparent 32%), linear-gradient(145deg, #102947, #071020); }.sf-entry-row__cover--abstract span { color: rgba(255,255,255,.46); font: 25px "DM Mono", monospace; }.sf-entry-row__arrow { color: var(--sf-cyan); font-size: 21px; text-align: right; transition: transform .2s ease; }.sf-entry-row:hover .sf-entry-row__arrow { transform: translate(3px, -3px); }.sf-pagination-wrap { display: flex; justify-content: center; margin-top: 25px; }.sf-pagination { display: flex; gap: 4px; }.sf-pagination span { display: block; }.sf-pagination a { display: block; padding: 7px 11px; border: 1px solid var(--sf-line); border-radius: 6px; color: var(--sf-muted); font-size: 11px; }.sf-pagination .current a, .sf-pagination a:hover { border-color: var(--sf-cyan); color: var(--sf-cyan); background: rgba(28, 219, 245, .08); }

.sf-reading-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 250px); align-items: start; gap: clamp(24px, 3vw, 42px); }.sf-post { width: min(100%, 760px); min-width: 0; }.sf-post__header { padding: 0 0 27px; border-bottom: 1px solid var(--sf-line); }.sf-breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; color: var(--sf-muted); font: 10px "DM Mono", monospace; }.sf-breadcrumb a:hover { color: var(--sf-cyan); }.sf-post__header h1 { max-width: 720px; margin: 11px 0 16px; font-size: clamp(34px, 4vw, 54px); line-height: 1.09; letter-spacing: -.055em; }.sf-post__meta { flex-wrap: wrap; gap: 14px; color: var(--sf-muted); font: 10px "DM Mono", monospace; }.sf-post__meta a { color: var(--sf-cyan); }.sf-post__lead { margin-top: 22px; color: var(--sf-text-soft); font-size: 15px; }
.sf-prose { padding: 35px 0 16px; font-size: 16px; line-height: 1.9; }.sf-prose > *:first-child { margin-top: 0; }.sf-prose h2, .sf-prose h3, .sf-prose h4 { position: relative; scroll-margin-top: 25px; margin: 42px 0 14px; color: var(--sf-text); line-height: 1.3; letter-spacing: -.035em; }.sf-prose h2 { font-size: 27px; }.sf-prose h3 { font-size: 21px; }.sf-prose h4 { font-size: 17px; }.sf-prose p { margin: 0 0 20px; color: var(--sf-text-soft); }.sf-prose a { color: var(--sf-cyan); text-decoration: underline; text-decoration-color: rgba(28, 219, 245, .35); text-underline-offset: 3px; }.sf-prose blockquote { margin: 26px 0; padding: 14px 20px; border-left: 2px solid var(--sf-violet); color: var(--sf-text-soft); background: rgba(173, 130, 255, .08); }.sf-prose ul, .sf-prose ol { margin: 0 0 22px; padding-left: 26px; color: var(--sf-text-soft); }.sf-prose li + li { margin-top: 7px; }.sf-prose img { max-width: 100%; height: auto; border: 1px solid var(--sf-line); border-radius: 9px; }.sf-prose code:not(pre code) { padding: 2px 6px; border: 1px solid rgba(28, 219, 245, .15); border-radius: 4px; color: var(--sf-cyan); background: rgba(28, 219, 245, .08); font-size: .88em; }.sf-code-wrap { position: relative; margin: 23px 0; }.sf-prose pre { overflow: auto; margin: 0; padding: 21px 22px; border: 1px solid var(--sf-line); border-radius: 10px; color: #dce9f7; background: #050c17; font-size: 12px; line-height: 1.75; tab-size: 2; }.sf-code-copy { position: absolute; top: 9px; right: 9px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border: 1px solid rgba(28, 219, 245, .45); border-radius: 6px; color: var(--sf-cyan); background: rgba(5, 16, 29, .8); font: 10px "DM Mono", monospace; cursor: pointer; }.sf-code-copy:hover { background: rgba(28, 219, 245, .14); }.sf-mermaid { overflow: auto; margin: 23px 0; padding: 24px; border: 1px solid rgba(173, 130, 255, .35); border-radius: 10px; text-align: center; background: radial-gradient(circle at 50% 0, rgba(173, 130, 255, .12), transparent 60%), #070d1a; }.sf-mermaid svg { max-width: 100%; height: auto; }.sf-mermaid pre { display: none; }
.sf-table-wrap { overflow-x: auto; margin: 28px 0; border: 1px solid var(--sf-line-bright); border-radius: 10px; background: var(--sf-surface-soft); box-shadow: 0 14px 35px rgba(0, 0, 0, .14); -webkit-overflow-scrolling: touch; }
.sf-prose table { width: 100%; min-width: 620px; border-collapse: separate; border-spacing: 0; color: var(--sf-text-soft); font-size: .88em; line-height: 1.55; text-align: left; }
.sf-prose th, .sf-prose td { padding: 12px 15px; border-right: 1px solid var(--sf-line); border-bottom: 1px solid var(--sf-line); vertical-align: top; }
.sf-prose th:last-child, .sf-prose td:last-child { border-right: 0; }
.sf-prose tbody tr:last-child td { border-bottom: 0; }
.sf-prose thead th { color: var(--sf-text); background: linear-gradient(135deg, rgba(28, 219, 245, .14), rgba(173, 130, 255, .13)); font-weight: 700; white-space: nowrap; }
.sf-prose tbody tr:nth-child(even) { background: rgba(157, 185, 219, .045); }
.sf-prose tbody tr:hover { background: rgba(28, 219, 245, .075); }
.sf-prose td code { white-space: nowrap; }
.sf-reading-map { align-self: start; justify-self: end; position: sticky; top: 24px; width: 100%; max-height: calc(100vh - 48px); overflow-y: auto; padding: 17px; border: 1px solid var(--sf-line); border-radius: 10px; background: rgba(8, 20, 35, .72); scrollbar-width: thin; scrollbar-color: var(--sf-scroll-thumb) transparent; }.sf-reading-map::-webkit-scrollbar { width: 4px; }.sf-reading-map::-webkit-scrollbar-track { background: transparent; }.sf-reading-map::-webkit-scrollbar-thumb { border: 0; border-radius: 2px; background: var(--sf-line-bright); }.sf-reading-map::-webkit-scrollbar-thumb:hover { background: var(--sf-cyan); }.sf-reading-map__head { display: flex; align-items: center; gap: 9px; font-size: 12px; }.sf-reading-map__icon { color: var(--sf-cyan); font-size: 18px; }.sf-reading-map__line { height: 1px; margin: 16px 0 11px; background: var(--sf-line); }.sf-reading-map ol { position: relative; display: grid; gap: 9px; margin: 0; padding: 0 0 0 18px; list-style: none; }.sf-reading-map ol::before { content: ""; position: absolute; left: 4px; top: 5px; bottom: 5px; width: 1px; background: linear-gradient(var(--sf-cyan), var(--sf-violet), transparent); }.sf-reading-map li { position: relative; color: var(--sf-muted); font-size: 11px; line-height: 1.35; }.sf-reading-map li::before { content: ""; position: absolute; width: 7px; height: 7px; left: -17px; top: 4px; border: 1px solid var(--sf-muted); border-radius: 50%; background: var(--sf-surface); }.sf-reading-map li.is-active { color: var(--sf-cyan); }.sf-reading-map li.is-active::before { border-color: var(--sf-cyan); background: var(--sf-cyan); box-shadow: 0 0 10px var(--sf-cyan); }.sf-reading-map li.level-3 { padding-left: 9px; font-size: 10px; }.sf-reading-map li.is-placeholder { color: var(--sf-muted); }.sf-reading-map__foot { display: flex; gap: 8px; margin-top: 18px; padding-top: 13px; border-top: 1px solid var(--sf-line); color: var(--sf-muted); font: 9px "DM Mono", monospace; }
.sf-post__footer { margin-top: 25px; padding: 18px 0 0; border-top: 1px solid var(--sf-line); }.sf-post__share { justify-content: space-between; gap: 10px; color: var(--sf-muted); font: 10px "DM Mono", monospace; }.sf-post__pager { justify-content: space-between; gap: 20px; margin-top: 24px; }.sf-post__pager > div { max-width: 48%; color: var(--sf-muted); font-size: 11px; }.sf-post__pager a:hover { color: var(--sf-cyan); }
.sf-comments { margin-top: 48px; padding-top: 30px; border-top: 1px solid var(--sf-line); }
.sf-comments__header { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 19px; }
.sf-comments__header .sf-kicker { margin-bottom: 7px; }
.sf-comments__header h2 { margin: 0; color: var(--sf-text); font-size: 24px; letter-spacing: -.045em; }
.sf-comments__count { color: var(--sf-cyan); font: 10px "DM Mono", monospace; letter-spacing: .08em; }
.sf-comment-list { display: grid; gap: 11px; margin: 0 0 20px; padding: 0; list-style: none; }
.sf-comment { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; padding: 15px; border: 1px solid var(--sf-line); border-radius: 10px; background: linear-gradient(145deg, rgba(12, 31, 51, .72), rgba(4, 14, 28, .66)); }
.sf-comment:hover { border-color: rgba(28, 219, 245, .35); }
.sf-comment__avatar { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid rgba(28, 219, 245, .35); border-radius: 10px; color: var(--sf-cyan); background: radial-gradient(circle at 30% 20%, rgba(28, 219, 245, .2), rgba(28, 219, 245, .05)); font: 13px "DM Mono", monospace; }
.sf-comment__content { min-width: 0; }
.sf-comment__meta { justify-content: space-between; gap: 10px; font-size: 12px; }
.sf-comment__meta strong { color: var(--sf-text); font-weight: 600; }
.sf-comment__meta time { color: var(--sf-muted); font: 10px "DM Mono", monospace; }
.sf-comment__body { margin-top: 7px; color: var(--sf-text-soft); font-size: 13px; line-height: 1.7; }
.sf-comment__body p { margin: 0; }
.sf-comment-pagination { margin: 0 0 20px; color: var(--sf-muted); font: 10px "DM Mono", monospace; }
.sf-comment-pagination ol, .sf-comment-pagination ul { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sf-comment-pagination li { margin: 0; }
.sf-comment-pagination a { color: var(--sf-cyan); }
.sf-comment-pagination span, .sf-comment-pagination a { display: inline-block; margin-right: 10px; }
.sf-comments__empty, .sf-comments__closed { display: flex; align-items: center; gap: 10px; margin: 0 0 20px; padding: 16px 17px; border: 1px dashed var(--sf-line-bright); border-radius: 10px; color: var(--sf-muted); background: rgba(7, 18, 32, .45); font-size: 12px; }
.sf-comments__empty span { color: var(--sf-cyan); font: 20px "DM Mono", monospace; }
.sf-comments__empty p { margin: 0; }
.sf-comment-form-card { margin-top: 20px; padding: 19px; border: 1px solid rgba(173, 130, 255, .35); border-radius: 11px; background: linear-gradient(135deg, rgba(173, 130, 255, .11), rgba(28, 219, 245, .045)); }
.sf-comment-form-card__head { display: flex; align-items: center; gap: 10px; }
.sf-comment-form-card__mark { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--sf-violet); border-radius: 8px; color: var(--sf-violet); font-size: 16px; }
.sf-comment-form-card__head strong, .sf-comment-form-card__head small { display: block; }
.sf-comment-form-card__head strong { color: var(--sf-text); font-size: 13px; }
.sf-comment-form-card__head small { margin-top: 2px; color: var(--sf-muted); font-size: 10px; }
.sf-comment-form-wrap .cancel-comment-reply { margin-top: 12px; color: var(--sf-muted); font-size: 11px; }
.sf-comment-form-wrap .cancel-comment-reply:empty { display: none; }
.sf-comment-form-wrap .cancel-comment-reply a, .sf-comment-form__login a { color: var(--sf-cyan); }
.sf-comment-form__login { color: var(--sf-muted); font-size: 12px; }
.sf-comment-form-card #comment-form { display: grid; gap: 13px; margin-top: 18px; }
.sf-comment-form-card #comment-form p { margin: 0; }
.sf-comment-form-card #comment-form label { display: block; margin-bottom: 5px; color: var(--sf-muted); font: 10px "DM Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
.sf-comment-form-card #comment-form input, .sf-comment-form-card #comment-form textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--sf-line); border-radius: 7px; outline: none; color: var(--sf-text); background: rgba(4, 12, 23, .7); }
.sf-comment-form-card #comment-form input:focus, .sf-comment-form-card #comment-form textarea:focus { border-color: var(--sf-cyan); box-shadow: 0 0 0 3px rgba(28, 219, 245, .1); }
.sf-comment-form-card #comment-form textarea { min-height: 125px; resize: vertical; }
.sf-comment-form-card #comment-form .submit { justify-self: start; padding: 9px 15px; border: 1px solid var(--sf-cyan); border-radius: 7px; color: #041018; background: var(--sf-cyan); cursor: pointer; transition: .2s ease; }
.sf-comment-form-card #comment-form .submit:hover { background: #68e8fb; box-shadow: 0 0 22px rgba(28, 219, 245, .18); }
.sf-comments__closed { margin-top: 20px; }
.comments, #comment-form { margin-top: 20px; }.comment-list { list-style: none; padding: 0; }.form-control, #textarea, #author, #mail, #url { width: 100%; padding: 10px 12px; border: 1px solid var(--sf-line); border-radius: 7px; color: var(--sf-text); background: var(--sf-surface); }.submit { padding: 9px 14px; border: 1px solid var(--sf-cyan); border-radius: 7px; color: #041018; background: var(--sf-cyan); cursor: pointer; }
.sf-error-page { display: grid; place-items: start; min-height: 55vh; align-content: center; padding: 30px 16px; }.sf-error-page h1 { margin: 0 0 13px; font-size: clamp(32px, 5vw, 62px); line-height: 1.1; letter-spacing: -.06em; }.sf-error-page p:not(.sf-kicker) { margin: 0 0 25px; color: var(--sf-text-soft); }
.sf-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 59px; padding: 0 28px; border-top: 1px solid var(--sf-line); color: var(--sf-muted); font: 10px "DM Mono", monospace; }.sf-footer__icp { color: var(--sf-muted); text-decoration: none; transition: color .2s ease; }.sf-footer__icp:hover, .sf-footer__icp:focus-visible { color: var(--sf-cyan); }.sf-footer__signal { display: flex; align-items: end; gap: 3px; height: 16px; }.sf-footer__signal i { display: block; width: 3px; height: 6px; background: var(--sf-cyan); }.sf-footer__signal i:nth-child(2) { height: 11px; }.sf-footer__signal i:nth-child(3) { height: 15px; }.sf-footer__signal i:nth-child(4) { height: 9px; }.sf-footer__signal i:nth-child(5) { height: 13px; }
.sf-toast { position: fixed; z-index: 20; left: 50%; bottom: 25px; padding: 9px 14px; border: 1px solid var(--sf-cyan); border-radius: 7px; color: var(--sf-cyan); background: rgba(4, 16, 29, .95); box-shadow: 0 10px 28px rgba(0, 0, 0, .3); font: 11px "DM Mono", monospace; opacity: 0; pointer-events: none; transform: translate(-50%, 12px); transition: .25s ease; }.sf-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.sf-reveal { animation: sf-rise .55s ease both; }.sf-reveal:nth-child(2) { animation-delay: .06s; }.sf-reveal:nth-child(3) { animation-delay: .12s; }.sf-reveal:nth-child(4) { animation-delay: .18s; } @keyframes sf-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

body[data-theme="day"] { --sf-bg: #f3f8fd; --sf-bg-deep: #eaf3fb; --sf-surface: #fff; --sf-surface-strong: #f5faff; --sf-surface-soft: rgba(255,255,255,.72); --sf-line: rgba(25, 79, 125, .16); --sf-line-bright: rgba(0, 135, 198, .4); --sf-text: #0a2039; --sf-text-soft: #36536e; --sf-muted: #6d849b; --sf-scroll-track: #eaf3fb; --sf-scroll-thumb: rgba(54, 83, 110, .5); --sf-scroll-thumb-hover: #078ab2; --sf-shadow: 0 22px 80px rgba(42, 91, 132, .16); }
body[data-theme="day"] .sf-site-shell { background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(237,247,255,.98)); } body[data-theme="day"]::before { opacity: .22; } body[data-theme="day"] .sf-sidebar { background: rgba(239, 248, 255, .75); } body[data-theme="day"] .sf-search-panel { background: rgba(255,255,255,.98); } body[data-theme="day"] .sf-prose pre, body[data-theme="day"] .sf-mermaid { background: #eef6fd; } body[data-theme="day"] .sf-prose pre, body[data-theme="day"] .sf-prose pre code { color: #24425d; } body[data-theme="day"] .sf-code-copy { color: #007c9e; background: rgba(255,255,255,.9); } body[data-theme="day"] .sf-reading-map { background: rgba(255,255,255,.8); } body[data-theme="day"] .sf-button--primary { color: #fff; background: #078ab2; border-color: #078ab2; } body[data-theme="day"] .sf-button--violet { color: #503394; border-color: #916be2; background: rgba(173,130,255,.18); } body[data-theme="day"] .sf-feature-card, body[data-theme="day"] .sf-mini-card, body[data-theme="day"] .sf-panel, body[data-theme="day"] .sf-archive-toolbar, body[data-theme="day"] .sf-entry-row { background: rgba(255,255,255,.72); }
body[data-theme="day"] .sf-search-form input { color: var(--sf-text); background: #fff; }
body[data-theme="day"] .sf-comment { background: rgba(255, 255, 255, .72); }
body[data-theme="day"] .aisummary { border-color: rgba(116, 79, 190, .3); color: var(--sf-text-soft); background: linear-gradient(135deg, rgba(173, 130, 255, .15), rgba(28, 219, 245, .08)); box-shadow: 0 14px 35px rgba(42, 91, 132, .1); }
body[data-theme="day"] .ai-text-container { color: var(--sf-text); background: rgba(255, 255, 255, .82); }
body[data-theme="day"] .sf-comment-form-card { background: linear-gradient(135deg, rgba(173, 130, 255, .16), rgba(28, 219, 245, .08)); }
body[data-theme="day"] .sf-comment-form-card #comment-form input, body[data-theme="day"] .sf-comment-form-card #comment-form textarea { color: var(--sf-text); background: rgba(255, 255, 255, .86); }
body[data-theme="day"] .sf-comments__empty, body[data-theme="day"] .sf-comments__closed { background: rgba(255, 255, 255, .72); }
body[data-theme="day"] .sf-mermaid svg .node rect, body[data-theme="day"] .sf-mermaid svg .node polygon { fill: #e8f6ff !important; stroke: #0086ad !important; } body[data-theme="day"] .sf-mermaid svg .nodeLabel, body[data-theme="day"] .sf-mermaid svg .label { color: #10243b !important; fill: #10243b !important; } body[data-theme="day"] .sf-mermaid svg .edgePath .path { stroke: #7b60d4 !important; }

@media (max-width: 1120px) { .sf-main { padding: 36px 30px 56px; }.sf-hero { grid-template-columns: minmax(0, 1fr) 320px; }.sf-feature-card { grid-template-columns: minmax(0, 1fr) 165px; }.sf-feature-grid--latest { grid-template-columns: repeat(2, minmax(0, 1fr)); }.sf-reading-layout { grid-template-columns: minmax(0, 1fr) 205px; gap: 25px; } }
@media (max-width: 900px) { .sf-site-shell { width: calc(100% - 24px); margin: 12px auto; }.sf-layout { display: block; }.sf-sidebar { position: absolute; z-index: 4; top: 0; left: 0; right: auto; bottom: 0; width: min(270px, 82vw); transform: translateX(-102%); transition: transform .25s ease; box-shadow: 20px 0 45px rgba(0,0,0,.25); }.sf-sidebar.is-open { transform: translateX(0); }.sf-menu-button { display: block; }.sf-main { padding: 30px 24px 50px; }.sf-hero { grid-template-columns: 1fr 250px; }.sf-hero h1 { font-size: 43px; }.sf-reading-layout { grid-template-columns: 1fr; }.sf-reading-map { position: static; order: -1; }.sf-reading-map ol { grid-template-columns: repeat(3, 1fr); }.sf-reading-map ol::before { display: none; }.sf-reading-map li::before { display: none; }.sf-reading-map li.level-3 { padding-left: 0; } }
@media (max-width: 680px) { .sf-site-shell { width: 100%; margin: 0; border-radius: 0; border-left: 0; border-right: 0; }.sf-topbar { height: 64px; padding: 0 16px; }.sf-brand__note { display: none; }.sf-search-panel { top: 64px; right: 0; width: 100%; border-radius: 0 0 12px 12px; }.sf-main { padding: 25px 16px 42px; }.sf-hero { display: block; min-height: auto; padding: 6px 3px 33px; }.sf-hero h1 { font-size: 38px; }.sf-hero__intro { font-size: 14px; }.sf-hero__orb { width: 210px; margin: 30px auto 3px; }.sf-section { margin-top: 35px; }.sf-section-heading { align-items: end; }.sf-section-heading h2 { font-size: 19px; }.sf-feature-grid, .sf-section--split { display: block; }.sf-product-grid, .sf-feature-grid--latest { grid-template-columns: 1fr; }.sf-product-card { min-height: 220px; }.sf-product-grid .sf-panel + .sf-panel { margin-top: 0; }.sf-feature-card { display: flex; }.sf-feature-card__visual { min-height: 160px; border-top: 1px solid var(--sf-line); border-left: 0; }.sf-feature-grid--latest .sf-feature-card__visual { min-height: 126px; border-top: 0; }.sf-mini-card { border-radius: 0 !important; }.sf-feature-grid > div .sf-mini-card:last-child { border-radius: 0 0 var(--sf-radius) var(--sf-radius) !important; }.sf-panel + .sf-panel { margin-top: 12px; }.sf-photo-grid { grid-template-columns: repeat(2, 1fr); }.sf-photo-tile { height: 125px; }.sf-archive-head { display: block; padding-left: 3px; }.sf-archive-head__count { margin-top: 20px; }.sf-archive-toolbar { display: block; padding: 10px; }.sf-filter-tabs { padding-bottom: 4px; }.sf-toolbar-actions { margin-top: 9px; }.sf-entry-row { grid-template-columns: 39px 9px minmax(0, 1fr) 23px; gap: 9px; padding: 14px 11px; }.sf-entry-row__cover { display: none; }.sf-entry-row h2 { font-size: 16px; }.sf-entry-row__main > p:not(.sf-label) { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }.sf-reading-map ol { grid-template-columns: repeat(2, 1fr); }.sf-footer { flex-wrap: wrap; justify-content: center; min-height: 75px; padding: 14px 16px; text-align: center; }.sf-post__pager { align-items: start; }.sf-post__pager > div { max-width: 46%; } }

/* Optional AI summary card: compatible with Handsome's .aisummary markup while
   reusing SamoolFuture's dark/day palette. */
.aisummary { position: relative; overflow: hidden; margin: 29px 0 30px; padding: 17px; border: 1px solid rgba(173, 130, 255, .35); border-radius: 12px; color: var(--sf-text-soft); background: linear-gradient(135deg, rgba(173, 130, 255, .13), rgba(28, 219, 245, .055)); box-shadow: 0 14px 35px rgba(0, 5, 16, .16); }
.aisummary::after { content: ""; position: absolute; width: 180px; height: 180px; right: -70px; top: -105px; border: 1px solid rgba(28, 219, 245, .15); border-radius: 50%; pointer-events: none; }
.ai-header { position: relative; z-index: 1; display: flex !important; align-items: center !important; gap: 8px; margin: 0 0 11px !important; color: var(--sf-violet) !important; font-size: 17px !important; font-weight: 700 !important; line-height: 1.35; text-align: left !important; text-indent: 0 !important; }
.ai-header svg { flex: none; width: 22px; height: 22px; margin: 0; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ai-text-container { position: relative; z-index: 1; margin: 0 0 10px; padding: 12px 15px; border: 1px solid var(--sf-line); border-radius: 8px; color: var(--sf-text-soft); background: rgba(4, 12, 23, .58); font-size: 15px; line-height: 1.75; }
.ai-hidden-text { display: none; }
.ai-typewriter-text { display: inline; white-space: pre-wrap; overflow-wrap: anywhere; }
.ai-cursor { display: inline-block; width: 2px; height: 1em; margin-left: 3px; vertical-align: -.12em; background: var(--sf-cyan); animation: ai-blink .7s infinite; }
@keyframes ai-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.ai-footer { position: relative; z-index: 1; margin: 10px 5px 0 !important; padding: 0 !important; color: var(--sf-muted) !important; font-size: 11px !important; font-style: italic !important; line-height: 1.5; text-align: left !important; text-indent: 0 !important; }
.sf-ai-assist { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 29px; padding: 15px 17px; border: 1px solid rgba(173, 130, 255, .35); border-radius: 10px; background: linear-gradient(90deg, rgba(173, 130, 255, .11), rgba(28, 219, 245, .04)); }.sf-ai-assist > div { display: flex; align-items: center; gap: 10px; }.sf-ai-assist__mark { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--sf-violet); border-radius: 8px; color: var(--sf-violet); }.sf-ai-assist strong, .sf-ai-assist small { display: block; }.sf-ai-assist strong { font-size: 12px; }.sf-ai-assist small { margin-top: 2px; color: var(--sf-muted); font-size: 10px; }
.sf-archive-list.is-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.sf-archive-list.is-grid .sf-entry-row { display: block; min-height: 0; padding: 19px; }.sf-archive-list.is-grid .sf-entry-row__date, .sf-archive-list.is-grid .sf-entry-row__marker { display: none; }.sf-archive-list.is-grid .sf-entry-row__cover { display: block; width: 100%; height: 130px; margin-bottom: 15px; }.sf-archive-list.is-grid .sf-entry-row__main > p:not(.sf-label) { white-space: normal; }.sf-archive-list.is-grid .sf-entry-row__arrow { display: block; margin-top: 12px; text-align: left; }
@media (max-width: 680px) { .sf-ai-assist { align-items: flex-start; flex-direction: column; }.sf-archive-list.is-grid { grid-template-columns: 1fr; } }
@media (max-width: 680px) { .aisummary { margin: 23px 0 25px; padding: 13px; }.ai-header { font-size: 16px !important; }.ai-header svg { width: 20px; height: 20px; }.ai-text-container { padding: 10px 12px; font-size: 14px; line-height: 1.65; }.ai-footer { font-size: 10px !important; } }

/* Card view: keep the compact reading rhythm of the list view while giving
   each card a clear visual header, bounded excerpt and anchored action. */
.sf-archive-list.is-grid .sf-entry-row {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    padding: 16px 16px 48px;
    overflow: hidden;
}
.sf-archive-list.is-grid .sf-entry-row__date,
.sf-archive-list.is-grid .sf-entry-row__marker { display: none; }
.sf-archive-list.is-grid .sf-entry-row__cover {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 96px;
    max-height: 118px;
    aspect-ratio: 16 / 7;
    margin: 0 0 14px;
    flex: none;
}
.sf-archive-list.is-grid .sf-entry-row__cover--abstract {
    display: grid;
    place-items: end;
    background:
        linear-gradient(120deg, transparent 0 46%, rgba(28,219,245,.2) 46.5% 47%, transparent 47.5%),
        linear-gradient(32deg, transparent 0 63%, rgba(173,130,255,.2) 63.5% 64%, transparent 64.5%),
        radial-gradient(circle at 68% 35%, rgba(28,219,245,.3), transparent 26%),
        linear-gradient(145deg, #122f4f, #071322 74%);
}
.sf-archive-list.is-grid .sf-entry-row__cover--abstract::before {
    content: "FIELD NOTE";
    position: absolute;
    top: 11px;
    left: 13px;
    color: rgba(219,241,255,.68);
    font: 9px "DM Mono", monospace;
    letter-spacing: .16em;
}
.sf-archive-list.is-grid .sf-entry-row__cover--abstract::after {
    content: "";
    position: absolute;
    inset: 23% 24%;
    border: 1px solid rgba(28,219,245,.28);
    border-radius: 50%;
    transform: rotate(-18deg) skewX(-12deg);
    box-shadow: 0 0 25px rgba(28,219,245,.14);
}
.sf-archive-list.is-grid .sf-entry-row__cover--abstract span {
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 1;
    margin: 0;
    color: rgba(231,247,255,.72);
    font-size: 25px;
}
.sf-archive-list.is-grid .sf-entry-row__main { flex: 1; }
.sf-archive-list.is-grid .sf-entry-row h2 { margin: 8px 0 7px; }
.sf-archive-list.is-grid .sf-entry-row__main > p:not(.sf-label) {
    display: -webkit-box;
    overflow: hidden;
    max-width: none;
    line-height: 1.55;
    text-overflow: ellipsis;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}
.sf-archive-list.is-grid .sf-entry-row__tags { margin-top: 11px; }
.sf-archive-list.is-grid .sf-entry-row__arrow {
    display: grid;
    place-items: center;
    position: absolute;
    right: 16px;
    bottom: 15px;
    width: 28px;
    height: 28px;
    margin: 0;
    border: 1px solid var(--sf-line);
    border-radius: 7px;
    background: rgba(6,18,32,.48);
    text-align: center;
}
.sf-archive-list.is-grid .sf-entry-row:hover .sf-entry-row__arrow {
    border-color: rgba(28,219,245,.42);
    background: rgba(28,219,245,.1);
}
@media (max-width: 680px) {
    .sf-archive-list.is-grid .sf-entry-row { padding: 14px 14px 46px; }
    .sf-archive-list.is-grid .sf-entry-row__cover {
        min-height: 92px;
        max-height: 108px;
        margin-bottom: 12px;
    }
}

/* Markdown media enhancements: Mermaid keeps its source beside the rendered
   graph, while article images open in an accessible, keyboard-friendly viewer. */
.sf-mermaid {
    overflow: visible;
    text-align: left;
}
.sf-mermaid__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: -5px 0 15px;
    color: var(--sf-muted);
    font: 10px "DM Mono", monospace;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.sf-mermaid__title {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.sf-mermaid__title > span { color: var(--sf-violet); font-size: 15px; }
.sf-mermaid__actions, .sf-lightbox__tools { display: flex; align-items: center; gap: 5px; }
.sf-mermaid__action, .sf-lightbox__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 28px;
    padding: 4px 8px;
    border: 1px solid var(--sf-line);
    border-radius: 6px;
    color: var(--sf-text-soft);
    background: rgba(5, 16, 29, .46);
    font: 10px "DM Mono", monospace;
    cursor: pointer;
    transition: .2s ease;
}
.sf-mermaid__action:hover, .sf-lightbox__button:hover {
    border-color: var(--sf-violet);
    color: var(--sf-text);
    background: rgba(173, 130, 255, .14);
}
.sf-mermaid__canvas {
    display: grid;
    place-items: center;
    min-height: 110px;
    overflow: auto;
    padding: 10px 4px;
    color: var(--sf-text-soft);
    text-align: center;
}
.sf-mermaid__canvas svg { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.sf-mermaid__canvas.sf-mermaid--fallback {
    min-height: 72px;
    border: 1px dashed var(--sf-line);
    color: var(--sf-muted);
    font-size: 12px;
}
.sf-mermaid__source { margin-top: 14px; }
.sf-mermaid__source pre { display: block; }
.sf-mermaid:fullscreen, .sf-mermaid.is-fullscreen {
    position: fixed;
    z-index: 40;
    inset: 0;
    width: auto;
    height: auto;
    overflow: auto;
    margin: 0;
    padding: clamp(18px, 4vw, 52px);
    border: 0;
    border-radius: 0;
    background: var(--sf-bg-deep);
}
.sf-mermaid:fullscreen .sf-mermaid__canvas, .sf-mermaid.is-fullscreen .sf-mermaid__canvas {
    min-height: 52vh;
}

body.sf-lightbox-open { overflow: hidden; }
.sf-image-viewer-trigger { cursor: zoom-in; }
.sf-image-viewer-trigger:focus-visible { outline: 2px solid var(--sf-cyan); outline-offset: 4px; }
.sf-lightbox {
    position: fixed;
    z-index: 60;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
    color: var(--sf-text);
    background: rgba(1, 6, 14, .9);
}
.sf-lightbox[hidden] { display: none; }
.sf-lightbox__backdrop { position: absolute; inset: 0; cursor: zoom-out; }
.sf-lightbox__dialog {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) 46px;
    grid-template-rows: auto minmax(0, 1fr);
    width: min(1220px, 100%);
    max-height: min(94vh, 920px);
    overflow: hidden;
    border: 1px solid rgba(121, 205, 255, .38);
    border-radius: 13px;
    background: rgba(5, 14, 27, .98);
    box-shadow: 0 28px 100px rgba(0, 0, 0, .55);
}
.sf-lightbox__toolbar {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 52px;
    padding: 9px 12px 9px 17px;
    border-bottom: 1px solid var(--sf-line);
    color: var(--sf-muted);
    font: 10px "DM Mono", monospace;
}
.sf-lightbox__counter { white-space: nowrap; }
.sf-lightbox__button { min-width: 30px; min-height: 30px; padding: 3px 7px; color: var(--sf-text-soft); }
.sf-lightbox__zoom-reset { min-width: 48px; }
.sf-lightbox__stage {
    grid-column: 2;
    grid-row: 2;
    display: grid;
    place-items: center;
    min-height: min(65vh, 650px);
    overflow: auto;
    padding: 30px;
    background: radial-gradient(circle at 50% 45%, rgba(28, 219, 245, .08), transparent 54%);
}
.sf-lightbox__stage img {
    display: block;
    max-width: 100%;
    max-height: 64vh;
    object-fit: contain;
    transform-origin: center;
    transition: transform .18s ease;
    user-select: none;
}
.sf-lightbox__nav {
    z-index: 2;
    align-self: center;
    justify-self: center;
    display: grid;
    place-items: center;
    width: 34px;
    height: 52px;
    border: 1px solid var(--sf-line);
    border-radius: 8px;
    color: var(--sf-text-soft);
    background: rgba(5, 16, 29, .72);
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
}
.sf-lightbox__nav:hover { border-color: var(--sf-cyan); color: var(--sf-cyan); background: rgba(28, 219, 245, .12); }
.sf-lightbox__nav--prev { grid-column: 1; grid-row: 2; }
.sf-lightbox__nav--next { grid-column: 3; grid-row: 2; }
.sf-lightbox:fullscreen, .sf-lightbox.is-fullscreen { padding: 0; background: #01060e; }
.sf-lightbox:fullscreen .sf-lightbox__dialog, .sf-lightbox.is-fullscreen .sf-lightbox__dialog {
    width: 100%;
    max-height: 100vh;
    height: 100vh;
    border: 0;
    border-radius: 0;
}
body[data-theme="day"] .sf-mermaid__action,
body[data-theme="day"] .sf-lightbox__button,
body[data-theme="day"] .sf-lightbox__nav { background: rgba(255,255,255,.86); }
body[data-theme="day"] .sf-lightbox__dialog { background: rgba(247, 252, 255, .98); }
body[data-theme="day"] .sf-lightbox { background: rgba(225, 238, 248, .88); }
@media (max-width: 680px) {
    .sf-mermaid__toolbar { align-items: flex-start; flex-direction: column; gap: 8px; }
    .sf-mermaid__actions { width: 100%; justify-content: flex-end; }
    .sf-lightbox { padding: 0; }
    .sf-lightbox__dialog { width: 100%; max-height: 100vh; height: 100vh; border-radius: 0; }
    .sf-lightbox__toolbar { align-items: flex-start; flex-direction: column; gap: 8px; padding: 10px 12px; }
    .sf-lightbox__tools { width: 100%; justify-content: flex-end; flex-wrap: wrap; }
    .sf-lightbox__stage { min-height: 0; padding: 18px 8px; }
    .sf-lightbox__stage img { max-height: 74vh; }
    .sf-lightbox__nav { width: 30px; height: 44px; }
}

/* Mermaid view switcher: keep the graph, source and fullscreen actions as
   three compact, mutually exclusive tabs. */
.sf-mermaid__toolbar {
    justify-content: flex-end;
    margin: -5px 0 15px;
}
.sf-mermaid__tabs { display: flex; align-items: center; gap: 8px; }
.sf-mermaid__tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 72px;
    min-height: 38px;
    padding: 7px 15px;
    border: 1px solid var(--sf-line);
    border-radius: 11px;
    color: var(--sf-muted);
    background: rgba(5, 16, 29, .46);
    font: 600 14px/1.2 "Noto Sans SC", "Microsoft YaHei", sans-serif;
    letter-spacing: .02em;
    cursor: pointer;
    transition: border-color .2s ease, color .2s ease, background .2s ease, box-shadow .2s ease;
}
.sf-mermaid__tab:hover,
.sf-mermaid__tab:focus-visible {
    border-color: rgba(28, 219, 245, .58);
    color: var(--sf-text);
    background: rgba(28, 219, 245, .1);
}
.sf-mermaid__tab.is-active,
.sf-mermaid__tab[aria-selected="true"] {
    border-color: #7aa7ff;
    color: #8eb8ff;
    background: rgba(68, 112, 206, .12);
    box-shadow: 0 0 0 1px rgba(122, 167, 255, .08) inset;
}
.sf-mermaid__tab--fullscreen { min-width: 72px; }
.sf-mermaid[data-mermaid-mode="graph"] .sf-mermaid__source { display: none; }
.sf-mermaid[data-mermaid-mode="code"] .sf-mermaid__stage { display: none; }
.sf-mermaid[data-mermaid-mode="code"] .sf-mermaid__source { display: block; }
.sf-mermaid__stage {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
}
.sf-mermaid__zoom-tools {
    position: absolute;
    z-index: 3;
    top: 7px;
    left: 7px;
    display: none;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--sf-line);
    border-radius: 8px;
    background: rgba(5, 16, 29, .84);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
}
.sf-mermaid__zoom-button {
    display: inline-grid;
    place-items: center;
    min-width: 30px;
    height: 28px;
    padding: 0 7px;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--sf-text-soft);
    background: transparent;
    font: 12px "DM Mono", monospace;
    cursor: pointer;
    transition: .2s ease;
}
.sf-mermaid__zoom-reset { min-width: 52px; }
.sf-mermaid__zoom-button:hover,
.sf-mermaid__zoom-button:focus-visible {
    border-color: rgba(28, 219, 245, .48);
    color: var(--sf-cyan);
    background: rgba(28, 219, 245, .1);
    outline: none;
}
.sf-mermaid__canvas {
    overflow: hidden;
    padding: 14px 4px;
    touch-action: pan-y;
}
.sf-mermaid__canvas.is-zoomed { touch-action: none; }
.sf-mermaid__canvas.is-dragging { cursor: grabbing; user-select: none; }
.sf-mermaid__canvas svg {
    will-change: transform;
    transition: transform .16s ease;
}
.sf-mermaid__canvas.is-dragging svg { transition: none; }
.sf-mermaid__code-wrap { margin: 0; }
.sf-mermaid__code-copy { top: 9px; right: 9px; }
.sf-mermaid:fullscreen .sf-mermaid__source,
.sf-mermaid.is-fullscreen .sf-mermaid__source { display: none; }
.sf-mermaid:fullscreen .sf-mermaid__stage,
.sf-mermaid.is-fullscreen .sf-mermaid__stage { display: block; }
.sf-mermaid:fullscreen .sf-mermaid__canvas,
.sf-mermaid.is-fullscreen .sf-mermaid__canvas {
    display: grid;
    min-height: calc(100vh - 100px);
    padding: 50px 4px 14px;
}
.sf-mermaid:fullscreen .sf-mermaid__zoom-tools,
.sf-mermaid.is-fullscreen .sf-mermaid__zoom-tools { display: inline-flex; }
.sf-mermaid:fullscreen .sf-mermaid__tab:not(.sf-mermaid__tab--fullscreen),
.sf-mermaid.is-fullscreen .sf-mermaid__tab:not(.sf-mermaid__tab--fullscreen) { display: none; }
body[data-theme="day"] .sf-mermaid__tab {
    color: #5d6f86;
    background: rgba(255, 255, 255, .86);
}
body[data-theme="day"] .sf-mermaid__tab:hover,
body[data-theme="day"] .sf-mermaid__tab:focus-visible {
    border-color: #6f9ff5;
    color: #254a84;
    background: rgba(92, 142, 238, .1);
}
body[data-theme="day"] .sf-mermaid__tab.is-active,
body[data-theme="day"] .sf-mermaid__tab[aria-selected="true"] {
    border-color: #6f9ff5;
    color: #2862c4;
    background: rgba(92, 142, 238, .12);
}
body[data-theme="day"] .sf-mermaid__zoom-tools { background: rgba(255, 255, 255, .92); }
body[data-theme="day"] .sf-mermaid__zoom-button { color: #526a84; }
@media (max-width: 680px) {
    .sf-mermaid__toolbar { width: 100%; align-items: center; flex-direction: row; }
    .sf-mermaid__tabs { width: auto; max-width: 100%; }
    .sf-mermaid__tab { flex: 0 0 auto; min-width: 72px; }
    .sf-mermaid__zoom-tools { top: 5px; left: 5px; }
    .sf-mermaid__zoom-button { min-width: 28px; height: 27px; padding: 0 5px; }
    .sf-mermaid__zoom-reset { min-width: 48px; }
}

/* Shared page utility for home, post and page templates. */
.sf-back-to-top {
    position: fixed;
    right: 28px;
    bottom: 24px;
    z-index: 18;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 116px;
    min-height: 40px;
    padding: 8px 13px;
    border: 1px solid rgba(28, 219, 245, .42);
    border-radius: 9px;
    color: var(--sf-cyan);
    background: rgba(5, 16, 29, .9);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .28);
    font: 11px "DM Mono", "Noto Sans SC", "Microsoft YaHei", sans-serif;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity .22s ease, visibility .22s ease, transform .22s ease, background .2s ease, border-color .2s ease;
}
.sf-back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}
.sf-back-to-top:hover,
.sf-back-to-top:focus-visible {
    border-color: var(--sf-cyan);
    color: var(--sf-text);
    background: rgba(28, 219, 245, .14);
    outline: none;
}
.sf-back-to-top__icon { font-size: 17px; line-height: 1; }
body[data-theme="day"] .sf-back-to-top {
    color: #007c9e;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 10px 28px rgba(38, 82, 119, .18);
}
body[data-theme="day"] .sf-back-to-top:hover,
body[data-theme="day"] .sf-back-to-top:focus-visible {
    border-color: #078ab2;
    color: #174467;
    background: rgba(220, 246, 255, .98);
}
@media (max-width: 680px) {
    .sf-back-to-top {
        right: 16px;
        bottom: 18px;
        min-width: 108px;
        min-height: 38px;
    }
}

body[data-theme="day"] .sf-table-wrap { border-color: rgba(0, 135, 198, .32); background: rgba(255, 255, 255, .92); box-shadow: 0 12px 28px rgba(38, 82, 119, .12); }
body[data-theme="day"] .sf-prose thead th { color: #0a2039; background: linear-gradient(135deg, rgba(28, 177, 219, .14), rgba(145, 107, 226, .12)); }
body[data-theme="day"] .sf-prose tbody tr:nth-child(even) { background: rgba(0, 135, 198, .045); }
body[data-theme="day"] .sf-prose tbody tr:hover { background: rgba(0, 135, 198, .08); }
body[data-theme="day"] .sf-filter-tabs--tags a { background: rgba(255, 255, 255, .82); }
@media (max-width: 680px) {
    .sf-table-wrap { margin: 22px -4px 24px; border-radius: 8px; }
    .sf-prose table { min-width: 560px; font-size: 13px; }
    .sf-prose th, .sf-prose td { padding: 10px 12px; }
}