:root {
        --color-bg: #141413;
        --color-right-bg: #111110;
        --color-bg-rgb: 20, 20, 19;
        --color-right-bg-rgb: 17, 17, 16;
        --color-right-text: rgba(250, 249, 245, 0.8);
        --color-right-muted: rgba(176, 174, 165, 0.7);
        --color-panel: #1a1918;
        --color-line: #232321;
        --color-code-bg: var(--color-bg);
        --color-code-line: var(--color-line);
        --color-text: #faf9f5;
        --color-muted: #b0aea5;
        --color-muted-70: rgba(176, 174, 165, 0.7);
        --color-muted-50: rgba(176, 174, 165, 0.5);
        --color-brand: #c96442;
        --selection-bg: rgba(201, 100, 66, 0.5);
        --selection-text: var(--color-text);
        --toggle-track: #3d3d3a;
        --toggle-thumb: #141413;
        --hero-filter: none;
        --icon-filter: none;
        --dots-filter: none;
        --font-sans: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Helvetica Neue",
          Arial, sans-serif;
        --page-width: 100vw;
        --page-height: 100vh;
        --page-padding: 50px;
        --layout-width: calc(100vw - (var(--page-padding) * 2));
        --left-col-width: 541px;
        --layout-gap: 22px;
        --hero-width: 395px;
        --hero-height: 525px;
        --desktop-min-width: calc(
          (var(--page-padding) * 2) + var(--left-col-width) + var(--layout-gap) + var(--hero-width)
        );
        --right-col-width: calc(var(--layout-width) - var(--left-col-width) - var(--layout-gap));
        --right-col-left: calc(var(--page-padding) + var(--left-col-width) + var(--layout-gap));
        --content-left: 0px;
        --content-width: var(--left-col-width);
        --column-top: 35px;
        --column-bottom: 40px;
        --top-stack-gap: 12px;
        --footer-bottom: 0px;
        --footer-height: 34px;
        --post-list-gap: 11px;
        --post-scrollbar-right: -8px;
        --post-scrollbar-width: 4px;
        --article-scrollbar-right: -8px;
        --article-scrollbar-width: 4px;
        --post-divider-offset: 6px;
        --post-fade-height: 79px;
        --left-section-gap: 15px;
        --radius-sm: 6px;
        --radius-md: 7px;
        --text-xs: 14px;
        --text-sm: 16px;
        --text-md: 18px;
        --text-lg: 20px;
        --copyright-xs: 12px;
        --copyright-sm: 14px;
        --transition-base: 300ms cubic-bezier(0.25, 1, 0.5, 1);
        --transition-spring: 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
      }

      body.theme-light {
        --color-bg: #faf9f5;
        --color-right-bg: #f5f4ed;
        --color-bg-rgb: 250, 249, 245;
        --color-right-bg-rgb: 245, 244, 237;
        --color-right-text: #30302e;
        --color-right-muted: #5e5d59;
        --color-panel: #fffffb;
        --color-line: #d1cfc5;
        --color-code-bg: #f2f2f2;
        --color-code-line: #d8d8d8;
        --color-text: #141413;
        --color-muted: #5e5d59;
        --color-muted-70: rgba(48, 48, 46, 0.7);
        --color-muted-50: rgba(94, 93, 89, 0.62);
        --color-brand: #d97757;
        --selection-bg: rgba(217, 119, 87, 0.5);
        --selection-text: var(--color-text);
        --toggle-track: #e8e6dc;
        --toggle-thumb: #141413;
        --hero-filter: invert(1);
        --icon-filter: invert(1);
        --dots-filter: invert(1);
      }

      * {
        box-sizing: border-box;
      }

      button,
      a,
      [role="button"] {
        -webkit-tap-highlight-color: transparent;
      }

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

      body {
        margin: 0;
        height: var(--page-height);
        overflow: hidden;
        background: var(--color-bg);
        color: var(--color-text);
        font-family: var(--font-sans);
        font-size: var(--text-xs);
        font-weight: 400;
        letter-spacing: 0;
        transition:
          background-color 180ms ease,
          color 180ms ease;
      }

      .page {
        position: relative;
        width: var(--page-width);
        height: var(--page-height);
        min-height: 640px;
        margin: 0 auto;
        overflow: hidden;
        background: var(--color-bg);
      }

      .intro-block {
        display: flex;
        flex-direction: column;
        gap: var(--top-stack-gap);
      }

      .intro-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
      }

      .theme-toggle {
        position: relative;
        width: 43px;
        height: 24px;
        padding: 0;
        border: 0;
        border-radius: 999px;
        background: var(--toggle-track);
        cursor: pointer;
        transition: background-color 180ms ease;
      }

      .theme-toggle--desktop {
        flex: none;
      }

      .theme-toggle--mobile {
        display: none;
        flex: none;
      }

      .theme-toggle::before {
        content: "";
        position: absolute;
        top: 4px;
        left: 5px;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: var(--toggle-thumb);
        transition:
          transform 180ms ease,
          background-color 180ms ease;
      }

      .theme-toggle[aria-pressed="true"]::before {
        transform: translateX(17px);
      }

      .theme-toggle:focus-visible {
        outline: 2px solid color-mix(in srgb, var(--color-brand) 65%, transparent);
        outline-offset: 3px;
      }

      .left-column,
      .right-column {
        position: absolute;
        top: var(--column-top);
        bottom: var(--column-bottom);
      }

      .left-column {
        left: var(--page-padding);
        width: var(--left-col-width);
        display: flex;
        flex-direction: column;
        min-height: 0;
      }

      .right-column {
        left: var(--right-col-left);
        right: var(--page-padding);
        background: transparent;
        isolation: isolate;
        container-type: inline-size;
      }

      .right-column::before {
        content: "";
        position: absolute;
        top: calc(var(--column-top) * -1);
        right: calc(var(--page-padding) * -1);
        bottom: calc(var(--column-bottom) * -1);
        left: 0;
        background: var(--color-right-bg);
        z-index: -1;
      }

      .right-toolbar {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 3;
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 24px;
      }

      .right-column.is-detail .right-toolbar {
        left: 0;
        padding-left: 40px;
      }

      .detail-back {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 0;
        border: 0;
        background: transparent;
        color: var(--color-text);
        cursor: pointer;
        font: inherit;
        line-height: 1;
      }

      .detail-back[hidden] {
        display: none;
      }

      .detail-back img {
        width: 11px;
        height: 11px;
        filter: var(--icon-filter);
        transform: rotate(180deg);
      }

      .profile {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex: 1;
        min-width: 0;
        width: 100%;
        padding: 0;
        border: 0;
        background: transparent;
        color: inherit;
        cursor: pointer;
        text-align: left;
      }

      .profile__left {
        display: inline-flex;
        gap: 13px;
        align-items: flex-start;
      }

      .profile__right {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        flex: none;
        margin-left: 12px;
      }

      .profile__chevron {
        width: 11px;
        height: 11px;
        transform: rotate(90deg);
        transform-origin: center;
        filter: var(--icon-filter);
        opacity: 0.62;
        transition:
          transform 180ms ease,
          opacity 180ms ease;
      }

      .profile[aria-expanded="true"] .profile__chevron {
        transform: rotate(-90deg);
        opacity: 1;
      }

      .profile:focus-visible {
        outline: 2px solid color-mix(in srgb, var(--color-brand) 65%, transparent);
        outline-offset: 4px;
      }

      .profile__avatar {
        width: 43px;
        height: 43px;
        border-radius: var(--radius-sm);
        object-fit: cover;
      }

      .profile__name {
        margin: 0 0 6px;
        font-size: var(--text-lg);
        font-weight: 500;
        line-height: 1.2;
      }

      .profile__role {
        margin: 0;
        color: var(--color-muted-70);
        line-height: 1.2;
      }

      .intro {
        margin: 0;
        color: var(--color-text);
        line-height: 1.45;
        transform-origin: top;
      }

      .intro[hidden] {
        display: none;
      }

      .category-tabs {
        display: flex;
        flex-direction: column;
        gap: 9px;
        margin-top: var(--top-stack-gap);
        --active-tab-left: 0px;
        --active-tab-width: 74px;
      }

      .categories {
        display: flex;
        align-items: center;
        height: 39px;
      }

      .category {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 75px;
        height: 39px;
        padding: 11px;
        border: 0;
        background: transparent;
        color: var(--color-muted-50);
        cursor: pointer;
        font: inherit;
        line-height: 1;
      }

      .category:first-child {
        min-width: auto;
        padding-left: 0;
      }

      .category.is-active {
        color: var(--color-text);
        font-weight: 700;
      }

      .tabs-line {
        position: relative;
        width: calc(var(--left-col-width) - 11px);
        height: 1px;
        background: var(--color-line);
      }

      .tabs-line::before {
        content: "";
        position: absolute;
        top: 0;
        left: var(--active-tab-left);
        width: var(--active-tab-width);
        height: 2px;
        background: var(--color-brand);
        transition:
          left 180ms ease,
          width 180ms ease;
      }

      .year {
        margin: 16px 0 16px 4px;
        font-size: var(--text-lg);
        font-weight: 600;
        line-height: 1.2;
      }

      .post-list-shell {
        position: relative;
        flex: 1;
        min-height: 0;
        margin-top: 0;
        overflow: visible;
      }

      .post-list-shell::after {
        content: "";
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        height: var(--post-fade-height);
        pointer-events: none;
        background: linear-gradient(
          180deg,
          rgba(var(--color-bg-rgb), 0) 0%,
          rgba(var(--color-bg-rgb), 0.72) 54%,
          var(--color-bg) 100%
        );
      }

      .post-list {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: var(--post-list-gap);
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0 7px var(--post-fade-height) 0;
        overflow-y: auto;
        overflow-x: hidden;
        list-style: none;
        scrollbar-width: none;
      }

      .post-list::-webkit-scrollbar {
        display: none;
      }

      .post-scrollbar,
      .article-scrollbar {
        position: absolute;
        top: 0;
        bottom: 0;
        opacity: 0;
        pointer-events: none;
        transition: opacity 160ms ease;
        z-index: 3;
      }

      .post-scrollbar {
        right: var(--post-scrollbar-right);
        width: var(--post-scrollbar-width);
      }

      .post-scrollbar.is-visible.is-active,
      .post-scrollbar.is-visible.is-dragging,
      .article-scrollbar.is-visible.is-active,
      .article-scrollbar.is-visible.is-dragging {
        opacity: 1;
        pointer-events: auto;
      }

      .post-scrollbar__thumb,
      .article-scrollbar__thumb {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        min-height: 28px;
        border-radius: 999px;
        background: rgba(176, 174, 165, 0.35);
        cursor: grab;
      }

      .post-scrollbar__thumb:active,
      .post-scrollbar.is-dragging .post-scrollbar__thumb,
      .article-scrollbar__thumb:active,
      .article-scrollbar.is-dragging .article-scrollbar__thumb {
        cursor: grabbing;
        background: rgba(176, 174, 165, 0.55);
      }

      .post {
        position: relative;
        display: flex;
        gap: 14px;
        width: 100%;
        min-height: 91px;
        padding: 14px 48px 14px 14px;
        border: 0;
        border-radius: var(--radius-md);
        background: transparent;
        color: var(--color-muted-50);
        cursor: pointer;
        font: inherit;
        text-align: left;
        opacity: 0;
        transform: translateY(15px);
        animation: postEnter 600ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
        transition:
          background-color 160ms ease,
          color 160ms ease,
          transform var(--transition-base);
      }

      .post:hover,
      .post:focus-visible,
      .post.is-current {
        background: transparent;
        color: var(--color-text);
      }

      .post:active {
        transform: translateY(1px) scale(0.995);
      }

      .post:focus-visible {
        outline: 1px solid rgba(250, 249, 245, 0.22);
        outline-offset: 2px;
      }

      .post::after {
        content: "";
        position: absolute;
        right: 0;
        bottom: calc(var(--post-divider-offset) * -1);
        left: 0;
        height: 1px;
        background: var(--color-line);
        pointer-events: none;
      }

      .post:hover::after,
      .post:focus-visible::after,
      .post.is-current::after,
      .post:has(+ .post:hover)::after,
      .post:has(+ .post:focus-visible)::after,
      .post:has(+ .post.is-current)::after {
        opacity: 0;
      }

      .post::before {
        content: "";
        position: absolute;
        top: calc((var(--post-list-gap) - var(--post-divider-offset)) * -1);
        right: 0;
        bottom: calc(var(--post-divider-offset) * -1);
        left: 0;
        border: 1px solid var(--color-line);
        border-radius: var(--radius-md);
        background: var(--color-panel);
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--transition-base);
      }

      .post:hover::before,
      .post:focus-visible::before,
      .post.is-current::before {
        opacity: 1;
      }

      .post__date {
        position: relative;
        flex: 0 0 auto;
        width: 44px;
        color: var(--color-muted);
        line-height: 1.2;
      }

      .post__body {
        position: relative;
        flex: 1;
        min-width: 0;
      }

      .post__title {
        display: flex;
        gap: 5px;
        margin: 0 0 8px;
        color: var(--color-text);
        font-size: var(--text-sm);
        font-weight: 400;
        line-height: 1.2;
        white-space: nowrap;
      }

      .post__excerpt {
        display: -webkit-box;
        height: 33px;
        margin: 0;
        overflow: hidden;
        color: var(--color-muted-50);
        font-size: var(--text-xs);
        line-height: 1.25;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }

      .post.is-current .post__excerpt {
        color: var(--color-text);
      }

      .post__arrow {
        position: absolute;
        top: 19px;
        right: 24px;
        width: 11px;
        height: 11px;
        filter: var(--icon-filter);
        opacity: 0;
        z-index: 1;
        transform: translateX(-8px);
        transition:
          opacity 300ms ease,
          transform var(--transition-spring);
      }

      .post:hover .post__arrow,
      .post:focus-visible .post__arrow {
        opacity: 0.45;
        transform: translateX(0);
      }

      .post.is-current .post__arrow {
        opacity: 1;
        transform: translateX(2px);
      }

      .hero-word {
        position: absolute;
        top: 125px;
        right: 0;
        width: var(--hero-width);
        height: var(--hero-height);
        display: flex;
        align-items: center;
        justify-content: flex-end;
        opacity: 0;
        transform: translateY(10px);
        pointer-events: none;
        transition:
          opacity 220ms ease,
          transform 260ms ease;
      }

      .hero-word.is-visible {
        opacity: 1;
        transform: translateY(0);
      }

      .hero-word__image {
        flex: none;
        width: 100%;
        height: 100%;
        display: block;
        filter: var(--hero-filter);
      }

      .article-detail {
        position: absolute;
        top: 36px;
        right: 0;
        bottom: var(--footer-height);
        left: 0;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 0 24px var(--post-fade-height) 40px;
        opacity: 0;
        transform: translateY(14px);
        pointer-events: none;
        contain: layout paint;
        backface-visibility: hidden;
        will-change: opacity, transform;
        scrollbar-width: none;
        transition:
          opacity 240ms ease,
          transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
      }

      .article-detail::-webkit-scrollbar {
        display: none;
      }

      .article-scrollbar {
        top: 36px;
        right: var(--article-scrollbar-right);
        bottom: var(--footer-height);
        width: var(--article-scrollbar-width);
      }

      .right-column:not(.is-detail) .article-scrollbar {
        opacity: 0;
        pointer-events: none;
      }

      .right-column.is-detail::after {
        content: "";
        position: absolute;
        right: 0;
        bottom: var(--footer-height);
        left: 0;
        height: var(--post-fade-height);
        pointer-events: none;
        z-index: 2;
        background: linear-gradient(
          180deg,
          rgba(var(--color-right-bg-rgb), 0) 0%,
          rgba(var(--color-right-bg-rgb), 0.72) 54%,
          var(--color-right-bg) 100%
        );
      }

      .article-detail.is-visible {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
      }

      .article-header {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-bottom: 14px;
      }

      .article-title {
        margin: 0;
        color: var(--color-text);
        font-size: var(--text-md);
        font-weight: 500;
        line-height: 1.25;
      }

      .article-time {
        color: var(--color-right-muted);
        font-size: var(--text-xs);
        line-height: 1.2;
      }

      .article-divider {
        width: 100%;
        height: 1px;
        margin-bottom: 16px;
        background: var(--color-line);
      }

      .markdown-body {
        color: var(--color-right-text);
        font-size: var(--text-xs);
        line-height: 1.65;
      }

      .markdown-body > * {
        margin: 0 0 18px;
      }

      .markdown-body > *:last-child {
        margin-bottom: 0;
      }

      .markdown-body strong {
        color: var(--color-text);
        font-weight: 600;
      }

      .markdown-body h1,
      .markdown-body h2,
      .markdown-body h3,
      .markdown-body h4,
      .markdown-body h5,
      .markdown-body h6 {
        margin: 28px 0 12px;
        color: var(--color-text);
        font-weight: 600;
        line-height: 1.35;
      }

      .markdown-body h1 {
        font-size: calc(var(--text-md) + 4px);
      }

      .markdown-body h2 {
        font-size: calc(var(--text-md) + 1px);
      }

      .markdown-body h3,
      .markdown-body h4,
      .markdown-body h5,
      .markdown-body h6 {
        font-size: var(--text-sm);
      }

      .markdown-body a {
        color: var(--color-text);
        text-decoration: underline;
        text-decoration-color: color-mix(in srgb, var(--color-text) 42%, transparent);
        text-underline-offset: 3px;
      }

      .markdown-body a:hover,
      .markdown-body a:focus-visible {
        text-decoration-color: currentColor;
      }

      .markdown-body ul,
      .markdown-body ol {
        padding-left: 1.45em;
      }

      .markdown-body li + li {
        margin-top: 6px;
      }

      .markdown-body li > ul,
      .markdown-body li > ol {
        margin-top: 6px;
        margin-bottom: 0;
      }

      .markdown-body blockquote {
        padding: 10px 14px;
        border-left: 3px solid var(--color-line);
        border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
        background: color-mix(in srgb, var(--color-panel) 60%, transparent);
        color: var(--color-right-muted);
      }

      .markdown-body blockquote > *:last-child {
        margin-bottom: 0;
      }

      .markdown-body table {
        display: block;
        width: 100%;
        overflow-x: auto;
        border-spacing: 0;
        border-collapse: collapse;
      }

      .markdown-body th,
      .markdown-body td {
        padding: 8px 10px;
        border: 1px solid var(--color-line);
        text-align: left;
        vertical-align: top;
      }

      .markdown-body th {
        color: var(--color-text);
        font-weight: 600;
        background: color-mix(in srgb, var(--color-panel) 72%, transparent);
      }

      .markdown-body hr {
        height: 1px;
        border: 0;
        background: var(--color-line);
      }

      .markdown-body input[type="checkbox"] {
        margin: 0 0.45em 0.12em 0;
        vertical-align: middle;
      }

      .markdown-body img {
        display: block;
        width: min(307px, 100%);
        height: auto;
        border-radius: var(--radius-sm);
      }

      .markdown-body code {
        font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
      }

      .code-block {
        width: fit-content;
        max-width: 100%;
        overflow: hidden;
        border-radius: 10px;
        background: var(--color-code-bg);
        border: 1px solid var(--color-code-line);
      }

      .code-block__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 29px;
        padding: 0;
        border-bottom: 1px solid var(--color-code-line);
        color: var(--color-muted);
        font-size: var(--text-xs);
        line-height: 1;
      }

      .code-block__language {
        display: inline-flex;
        align-items: center;
        height: 100%;
      }

      .code-block__icon-cell,
      .code-block__lang-cell {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        border-right: 1px solid var(--color-code-line);
      }

      .code-block__icon-cell {
        width: 38px;
      }

      .code-block__icon-cell img {
        width: 20px;
        height: 20px;
        filter: var(--icon-filter);
      }

      .code-block__lang-cell {
        min-width: 60px;
        padding: 0 13px;
        color: var(--color-text);
        font-weight: 500;
        text-transform: uppercase;
      }

      .code-block__copy {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        align-self: stretch;
        position: relative;
        width: 40px;
        height: 100%;
        padding: 0;
        border: 0;
        border-left: 1px solid var(--color-code-line);
        background: transparent;
        cursor: pointer;
      }

      .code-block__copy img {
        width: 20px;
        height: 20px;
        filter: var(--icon-filter);
      }

      .code-block__copy::after {
        content: attr(data-tip);
        position: absolute;
        top: -32px;
        right: 0;
        padding: 4px 8px;
        border-radius: 999px;
        background: var(--color-panel);
        border: 1px solid var(--color-code-line);
        color: var(--color-text);
        font-size: 12px;
        line-height: 1;
        white-space: nowrap;
        opacity: 0;
        transform: translateY(4px);
        pointer-events: none;
        transition:
          opacity 160ms ease,
          transform 160ms ease;
      }

      .code-block__copy[data-copy-state]::after {
        opacity: 1;
        transform: translateY(0);
      }

      .code-block__copy[data-copy-state="error"]::after {
        color: var(--color-brand);
      }

      .code-block pre {
        width: auto;
        min-width: 100%;
        min-height: 0;
        margin: 0;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 31px 20px 31px;
        background: transparent;
        color: var(--color-text);
        font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
        font-size: var(--text-xs);
        line-height: 1.6;
        scrollbar-width: thin;
        scrollbar-color: rgba(176, 174, 165, 0.35) transparent;
      }

      .code-block pre::-webkit-scrollbar {
        height: 4px;
      }

      .code-block pre::-webkit-scrollbar-track {
        background: transparent;
      }

      .code-block pre::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: rgba(176, 174, 165, 0.35);
      }

      .code-block pre::-webkit-scrollbar-thumb:hover,
      .code-block pre::-webkit-scrollbar-thumb:active {
        background: rgba(176, 174, 165, 0.55);
      }

      .code-block pre code.hljs {
        padding: 0;
        background: transparent;
      }

      .pager-footer {
        display: flex;
        flex-direction: column;
        gap: 15px;
        align-items: stretch;
        margin-top: 0;
      }

      .pager {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
      }

      .pager__button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        padding: 12px;
        border: 1px solid var(--color-line);
        border-radius: var(--radius-md);
        background: transparent;
      }

      .pager__button img {
        width: 11px;
        height: 11px;
        filter: var(--icon-filter);
      }

      .pager__button--prev img {
        transform: rotate(180deg);
      }

      .pager__dots {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        min-width: 51px;
        height: 7px;
      }

      .pager__dot {
        width: 7px;
        height: 7px;
        padding: 0;
        border: 0;
        border-radius: 999px;
        background: var(--color-muted-50);
        cursor: pointer;
      }

      .pager__dot.is-active {
        background: var(--color-brand);
      }

      .pager__button:disabled,
      .pager__dot:disabled {
        opacity: 0.45;
        cursor: default;
      }

      .copyright {
        width: 289px;
        font-size: var(--copyright-xs);
        text-align: right;
      }

      .copyright--left {
        display: none;
        align-self: flex-end;
      }

      .copyright--right {
        position: absolute;
        right: 0;
        bottom: 0;
      }

      .copyright__title {
        margin: 0 0 0;
        color: var(--color-muted);
        font-family: var(--font-sans);
        font-size: var(--copyright-sm);
        font-weight: 500;
        line-height: 1.2;
      }

      .copyright__links {
        display: flex;
        gap: 10px;
        justify-content: flex-end;
        margin: 0;
        color: var(--color-muted-50);
        white-space: nowrap;
      }

      .copyright__links a {
        color: inherit;
        text-decoration: underline;
        text-underline-position: from-font;
      }

      @keyframes postEnter {
        from {
          opacity: 0;
          transform: translateY(15px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      @media (max-width: 1058.321px) {
        .hero-word {
          display: none;
        }

        .copyright--left {
          display: block;
        }

        .copyright--right {
          display: none;
        }

        :root {
          --page-padding: 20px;
          --left-col-width: calc(100vw - (var(--page-padding) * 2));
          --layout-gap: 0px;
          --column-top: 26px;
          --column-bottom: 14px;
          --top-stack-gap: 12px;
          --footer-height: 94px;
          --left-section-gap: 15px;
        }

        .page {
          min-height: 560px;
        }

        .left-column {
          right: var(--page-padding);
          width: auto;
        }

        .right-column {
          top: var(--column-top);
          right: var(--page-padding);
          bottom: auto;
          left: auto;
          width: 0;
          height: 0;
        }

        .right-column::before {
          display: none;
        }

        .theme-toggle--desktop {
          display: none;
        }

        .theme-toggle--mobile {
          display: inline-block;
        }

        .hero-word {
          display: none;
        }

        .intro {
          max-width: 100%;
          font-size: var(--copyright-sm);
          line-height: 1.55;
        }

        .categories {
          width: 100%;
          overflow-x: auto;
          scrollbar-width: none;
          gap: 0;
          white-space: nowrap;
        }

        .categories::-webkit-scrollbar {
          display: none;
        }

        .category {
          flex: 0 0 auto;
          min-width: auto;
          height: 34px;
          padding: 9px 14px;
          font-size: var(--copyright-sm);
          white-space: nowrap;
        }

        .category:first-child {
          padding-left: 0;
        }

        .tabs-line {
          width: 100%;
        }

        .post {
          padding-right: 40px;
        }

        .copyright--left {
          width: 100%;
        }

        .copyright__links {
          flex-wrap: wrap;
          row-gap: 4px;
        }

        body.has-article-detail .left-column {
          right: var(--page-padding);
          z-index: 1;
          display: flex;
          width: auto;
          pointer-events: none;
        }

        body.has-article-detail .right-column {
          top: var(--column-top);
          right: var(--page-padding);
          bottom: var(--column-bottom);
          left: var(--page-padding);
          display: block;
          width: auto;
          height: auto;
          z-index: 2;
        }

        body.has-article-detail .right-column::before {
          top: calc(var(--column-top) * -1);
          right: calc(var(--page-padding) * -1);
          bottom: calc(var(--column-bottom) * -1);
          left: calc(var(--page-padding) * -1);
          display: block;
        }

        body.has-article-detail .right-column.is-detail .right-toolbar {
          left: 0;
          padding-left: 0;
        }

        body.has-article-detail .theme-toggle--desktop {
          display: inline-block;
        }

        body.has-article-detail .theme-toggle--mobile {
          display: none;
        }

        body.has-article-detail .article-detail {
          top: 44px;
          right: 0;
          left: 0;
          padding-right: 0;
          padding-left: 0;
        }

        body.has-article-detail .article-scrollbar {
          top: 44px;
          right: var(--article-scrollbar-right);
          bottom: var(--footer-height);
        }

        body.has-article-detail .copyright--left {
          display: none;
        }

        body.has-article-detail .copyright--right {
          right: 0;
          bottom: 0;
          display: block;
          width: 100%;
        }
      }