.post-list {
    padding: 0;
    margin: 0;
    list-style-type: none;
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .post-list a {
    color: var(--text-primary);
    display: block;
    text-decoration: none;
    transition: opacity 0.15s ease-out;
  }

  @media (hover: hover) and (pointer: fine) {
    .post-list:hover a {
      opacity: 0.4;
    }

    .post-list:hover a:hover {
      opacity: 1;
    }

    .post-list:hover a:hover .divider {
      background-color: var(--text-tertiary);
      opacity: 0.75;
    }
    .post-list:hover a:hover .dotted-divider {
      color: var(--text-secondary);
    }
    .post-list:hover a:hover .date {
      color: var(--text-secondary);
      opacity: 1;
    }
  }

  .post-item {
    height: 2.75rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
  }

  .post-item.date-left {
    justify-content: flex-start;
  }

  .post-item.date-left .title {
    flex: 1 1 auto;
    min-width: 0;
  }

  .post-item.date-left .date {
    margin-right: 0.75rem;
  }

  .post-list .post-title {
    margin: 0;
    flex-shrink: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .post-list .date {
    margin: 0;
    color: var(--text-secondary);
    opacity: 0.75;
    letter-spacing: var(--spacing-s);
    flex-shrink: 0;
    white-space: nowrap;
  }

  .post-list .divider {
    flex: 1 1 auto;
    min-width: 3rem;
    margin: 0 0.25rem;
    height: 0.5px;
    background-color: var(--border);
  }

  .post-list .dotted-divider {
    flex: 1 1 3rem;
    min-width: 3rem;
    max-width: 100%;
    text-align: end;
    letter-spacing: 5px;
    height: 1.675rem;
    overflow: hidden;
    color: var(--text-tertiary);
    opacity: 0.75;
  }

  .post-list .dotted-divider::after {
    content: '·····························································································································································';
    pointer-events: none;
  }

  .post-list .placeholder {
    height: 3rem;
  }


  footer {
    font-size: var(--font-size-s);
    font-weight: var(--font-weight-light);
    line-height: 1.75;
    color: var(--text-secondary);
    opacity: 0.75;
    margin-top: 4rem;
  }

  .footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
  }

  .copyright,
  .powered-by {
    white-space: nowrap;
  }

  .copyright .date {
    opacity: 1;
  }

  footer a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.2s ease-out;
  }

  footer a:hover {
    color: var(--text-primary);
  }


  .gradient-mask {
    --gradient-mask-image: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.92) 0%,
      rgba(0, 0, 0, 0.738) 19%,
      rgba(0, 0, 0, 0.541) 34%,
      rgba(0, 0, 0, 0.382) 47%,
      rgba(0, 0, 0, 0.278) 56.5%,
      rgba(0, 0, 0, 0.194) 65%,
      rgba(0, 0, 0, 0.126) 73%,
      rgba(0, 0, 0, 0.075) 80.2%,
      rgba(0, 0, 0, 0.042) 86.1%,
      rgba(0, 0, 0, 0.021) 91%,
      rgba(0, 0, 0, 0.008) 95.2%,
      rgba(0, 0, 0, 0.002) 98.2%,
      transparent 100%
    );
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 2rem;
    z-index: 99;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease-out;
  }

  .gradient-mask__blur,
  .gradient-mask__background {
    position: absolute;
    inset: 0;
    mask-image: var(--gradient-mask-image);
    -webkit-mask-image: var(--gradient-mask-image);
  }

  .gradient-mask__blur {
    backdrop-filter: blur(1.5px);
    -webkit-backdrop-filter: blur(1.5px);
  }

  .gradient-mask__background {
    background-color: var(--bg);
    transition: background-color 0.2s ease-out;
  }

  @media (min-width: 768px) {
    .gradient-mask {
      height: 4rem;
    }
  }


  .back-button {
    width: 8rem;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-family: var(--serif);
    font-size: var(--font-size-m);
    font-style: italic;
    letter-spacing: 0;
    line-height: 1.75;
    color: var(--text-secondary);
    cursor: pointer;
    border: none;
    background-color: transparent;
    position: relative;
    margin-bottom: 2.5em;
    padding: 0;
    left: -0.175em;
    transition: color 0.2s ease-out;
    text-decoration: none;
  }

  .back-button:hover {
    color: var(--text-primary);
  }

  @media (hover: none) and (pointer: coarse) {
    .back-button:hover {
      color: var(--text-secondary);
    }
  }

  .back-button svg {
    width: 0.8rem;
    height: 0.8rem;
    flex-shrink: 0;
  }

  .back-button.fixed-position {
    position: fixed;
    top: 6rem;
    margin-bottom: 0;
    padding-left: 0.75rem;
    z-index: 10;
  }


  .toc-container {
    width: 12rem;
    position: relative;
    left: -0.175em;
    opacity: 0;
    transition: opacity 0.2s ease-out;
    display: none;
  }

  .toc-container.fixed-position {
    opacity: 1;
    position: fixed;
    top: 12rem;
    margin-top: 0;
    padding-left: 1rem;
    z-index: 10;
    left: auto;
  }

  .toc-nav {
    font-family: var(--sans);
  }

  .toc-list,
  .toc-list li,
  .toc-item {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .prose .toc-container .toc-list {
    margin-left: 0 !important;
    padding-left: 0 !important;
  }

  .prose .toc-container .toc-list li {
    margin: 0 !important;
    padding: 0 !important;
  }

  .toc-item::before,
  .toc-item::marker {
    display: none;
  }

  .toc-link {
    display: block;
    color: transparent;
    text-decoration: none;
    position: relative;
    padding-left: 0;
    height: 1.125rem;
    width: 100%;
    min-height: 1rem;
    font-size: 0;
    line-height: 1.125rem;
    text-indent: 2rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition:
      color 0.2s ease-out,
      font-size 0.2s ease-out,
      text-indent 0.2s ease-out;
    cursor: pointer;
  }

  .toc-link::after {
    content: attr(data-text);
    position: absolute;
    left: -0.5rem;
    top: 0;
    font-family: var(--sans);
    font-size: var(--font-size-s);
    letter-spacing: var(--spacing-m);
    line-height: 1.125rem;
    color: var(--text-primary);
    opacity: 0;
    transition:
      opacity 0.2s ease-out,
      left 0.2s ease-out;
    pointer-events: none;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  .toc-link:hover::after {
    opacity: 1;
    left: -0.75rem;
  }

  .toc-level-0 .toc-link:hover::after {
    opacity: 0;
  }

  .toc-level-1 .toc-link:hover::before,
  .toc-level-2 .toc-link:hover::before,
  .toc-level-3 .toc-link:hover::before {
    width: 0.75rem;
    transition: width 0.1s ease-out;
  }

  .toc-link.active {
    color: var(--text-primary);
  }

  /* Horizontal line indicators */
  .toc-level-0 .toc-link::before,
  .toc-level-1 .toc-link::before,
  .toc-level-2 .toc-link::before,
  .toc-level-3 .toc-link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 1.75rem;
    height: 1px;
    background-color: var(--text-tertiary);
    transform: translateY(-50%);
    opacity: 0.4;
    transition: all 0.1s ease-out;
  }

  .toc-link:hover::before,
  .toc-link.active::before {
    opacity: 0.8;
    background-color: var(--text-primary);
  }

  /* Hide on mobile */
  @media (max-width: 768px) {
    .toc-container {
      display: none !important;
    }
  }


  .prose .link-card {
    display: flex;
    flex-direction: column;
    border: 0.5px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    background: var(--astro-code-background);
    min-height: 22.75px;
    margin: 1.25rem 0 1.75rem 0;
    transition: background 0.2s ease-out;
  }

  .prose .link-card:hover {
    background: color-mix(in srgb, var(--selection) 75%, transparent);
    text-decoration: none;
  }

  .prose .link-card-content {
    padding: 0.75rem 1.25rem 0.75rem 1.25rem;
    order: 2;
    display: flex;
    flex-direction: column;
  }

  .prose .link-card-image-outer {
    padding: 0.5rem 0.5rem 0 0.5rem;
    order: 1;
  }

  .prose .link-card-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    /* Fallback for browsers that don't support aspect-ratio */
    height: 0;
    padding-bottom: 56.25%; /* 16:9 aspect ratio (9/16 = 0.5625) */
    overflow: hidden;
    background: var(--astro-code-background);
    position: relative;
    margin: 0;
    padding: 0;
    border-radius: 6px;
  }

  /* Modern browsers with aspect-ratio support */
  @supports (aspect-ratio: 16 / 9) {
    .prose .link-card-image {
      height: auto;
      padding-bottom: 0;
    }
  }

  .prose .link-card-image img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    margin: 0;
    padding: 0;
  }

  .prose .link-card-title {
    font-size: var(--font-size-m);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    margin: 0.25rem 0 0 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    padding-right: 1rem;
    order: 1;
  }

  .prose .link-card .link-card-description {
    font-size: var(--font-size-m);
    color: var(--text-primary);
    opacity: 0.6;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-wrap: break-word;
    max-height: calc(1.4em * 2);
    order: 2;
  }

  /* Modern browsers with line-clamp support */
  @supports (-webkit-line-clamp: 2) {
    .prose .link-card .link-card-description {
      max-height: none;
    }
  }

  .prose .link-card-url {
    color: var(--text-tertiary);
    letter-spacing: 0.015em;
    margin: 0.25rem 0;
    display: flex;
    align-items: center;
    gap: 0.325rem;
    order: 3;
  }

  .prose .link-card-url svg {
    width: 0.875em;
    height: 0.875em;
    flex-shrink: 0;
    vertical-align: middle;
  }

  .prose .link-card-url span {
    font-size: var(--font-size-s);
    vertical-align: baseline;
  }

  .prose .link-card.no-image {
    padding: 0.5rem 1.25rem 0.5rem 1.25rem;
  }

  .prose .link-card.has-image .link-card-content {
    padding: 0.5rem 1.25rem 0.5rem 1.25rem;
  }

  .prose .link-card.no-image .link-card-content {
    padding: 0;
  }


  .prose .gc-container {
    display: block;
    border: 0.5px solid var(--border);
    border-radius: 8px;
    padding: 1rem 1.25rem 0.75rem 1.25rem;
    margin: 1.25rem 0 1.75rem 0;
    text-decoration: none;
    color: inherit;
    transition: background 0.2s ease-out;
    background: var(--astro-code-background);
  }

  .prose .gc-container:hover {
    background: color-mix(in srgb, var(--selection) 75%, transparent);
    text-decoration: none;
  }

  .prose .gc-title-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
  }

  .prose .gc-owner-avatar {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background-color: var(--border);
    flex-shrink: 0;
  }

  .prose .gc-repo-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-regular);
    color: var(--text-primary);
    flex-grow: 1;
  }

  .prose .gc-repo-title strong {
    font-weight: var(--font-weight-bold);
  }

  .prose .gc-slash {
    color: var(--text-secondary);
    margin: 0 0.375rem;
  }

  .prose .gc-github-icon {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--text-primary);
    flex-shrink: 0;
  }

  .prose .gc-repo-description {
    font-size: var(--font-size-m);
    color: var(--text-primary);
    opacity: 0.6;
    margin: 0 0 0.75rem 0;
    line-height: 1.4;
  }

  .prose .gc-info-bar {
    display: flex;
    align-items: center;
    color: var(--text-primary);
    opacity: 0.6;
    gap: 0.35rem;
  }

  .prose .gc-info-bar .gc-stars-count,
  .prose .gc-info-bar .gc-forks-count,
  .prose .gc-info-bar .gc-license-info {
    margin-right: 0.675rem;
    font-size: var(--font-size-s);
  }

  .prose .gc-info-icon {
    color: var(--text-primary);
    width: 0.875rem;
    height: 0.875rem;
  }


  .prose .neodb-card {
    width: 100%;
    height: 100%;
    background: var(--astro-code-background);
    color: var(--text-primary);
    border-radius: 8px;
    display: flex;
    position: relative;
    text-decoration: none !important;
    transition: background 0.2s ease-out;
    margin: 1.25rem 0 1.75rem 0;
    overflow: hidden;
  }

  .prose .neodb-card.compact {
    min-height: 6rem;
  }

  .prose .neodb-card.standard {
    min-height: 9rem;
  }

  .prose .neodb-card:hover {
    background: color-mix(in srgb, var(--selection) 75%, transparent);
  }

  .prose .neodb-card.error:hover {
    background: var(--astro-code-background) !important;
    cursor: default;
  }

  .prose .neodb-cover {
    width: 96px !important;
    border-radius: 6px;
    margin: 1rem;
  }

  .prose .neodb-cover.music {
    height: 96px !important; /* 1:1 for music */
  }

  .prose .neodb-cover.other {
    height: 144px !important; /* 9:16 for other types */
  }

  .prose .neodb-info {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    margin: 1rem 1rem 1rem 0;
  }

  .prose .neodb-field {
    font-size: var(--font-size-s);
    color: var(--text-primary);
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .prose .neodb-artist {
    font-size: var(--font-size-s);
    color: var(--text-primary);
  }

  .prose .no-rating {
    font-size: var(--font-size-s);
    color: var(--text-primary);
    line-height: 1;
    margin: 0 0 0.25rem 0;
  }

  .prose .neodb-title {
    color: var(--text-primary);
    font-weight: var(--font-weight-bold);
    line-height: 1.35;
    margin-bottom: 0.125rem;
  }

  .prose .neodb-title a {
    text-decoration: none !important;
  }

  .prose .neodb-desc {
    font-size: var(--font-size-s);
    color: var(--text-primary);
    margin-top: 0.25rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
    word-wrap: break-word;
    max-width: 100%;
  }

  .prose .rating {
    margin: 0 0 0.25rem 0;
    font-size: var(--font-size-s);
    line-height: 1;
    display: flex;
    align-items: center;
  }

  .prose .rating .allstarbg {
    position: relative;
    color: #f99b01;
    height: 1rem;
    width: 5rem;
    background-size: auto 100%;
    margin-right: 0.25rem;
    background-repeat: repeat;
    background-image: url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMzIiIGhlaWdodD0iMzIiPjxwYXRoIGQ9Ik05MDguMSAzNTMuMWwtMjUzLjktMzYuOUw1NDAuNyA4Ni4xYy0zLjEtNi4zLTguMi0xMS40LTE0LjUtMTQuNS0xNS44LTcuOC0zNS0xLjMtNDIuOSAxNC41TDM2OS44IDMxNi4ybC0yNTMuOSAzNi45Yy03IDEtMTMuNCA0LjMtMTguMyA5LjMtMTIuMyAxMi43LTEyLjEgMzIuOS42IDQ1LjNsMTgzLjcgMTc5LjEtNDMuNCAyNTIuOWMtMS4yIDYuOS0uMSAxNC4xIDMuMiAyMC4zIDguMiAxNS42IDI3LjYgMjEuNyA0My4yIDEzLjRMNTEyIDc1NGwyMjcuMSAxMTkuNGM2LjIgMy4zIDEzLjQgNC40IDIwLjMgMy4yIDE3LjQtMyAyOS4xLTE5LjUgMjYuMS0zNi45bC00My40LTI1Mi45IDE4My43LTE3OS4xYzUtNC45IDguMy0xMS4zIDkuMy0xOC4zIDIuNy0xNy41LTkuNS0zMy43LTI3LTM2LjN6TTY2NC44IDU2MS42bDM2LjEgMjEwLjNMNTEyIDY3Mi43IDMyMy4xIDc3MmwzNi4xLTIxMC4zLTE1Mi44LTE0OUw0MTcuNiAzODIgNTEyIDE5MC43IDYwNi40IDM4MmwyMTEuMiAzMC43LTE1Mi44IDE0OC45eiIgZmlsbD0iI2Y5OWIwMSIvPjwvc3ZnPg==);
  }

  .prose .rating .allstarfg {
    position: absolute;
    left: 0;
    color: #f99b01;
    height: 1rem;
    overflow: hidden;
    background-size: auto 100%;
    background-repeat: repeat;
    background-image: url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMzIiIGhlaWdodD0iMzIiPjxwYXRoIGQ9Ik05MDguMSAzNTMuMWwtMjUzLjktMzYuOUw1NDAuNyA4Ni4xYy0zLjEtNi4zLTguMi0xMS40LTE0LjUtMTQuNS0xNS44LTcuOC0zNS0xLjMtNDIuOSAxNC41TDM2OS44IDMxNi4ybC0yNTMuOSAzNi45Yy03IDEtMTMuNCA0LjMtMTguMyA5LjMtMTIuMyAxMi43LTEyLjEgMzIuOS42IDQ1LjNsMTgzLjcgMTc5LjEtNDMuNCAyNTIuOWMtMS4yIDYuOS0uMSAxNC4xIDMuMiAyMC4zIDguMiAxNS42IDI3LjYgMjEuNyA0My4yIDEzLjRMNTEyIDc1NGwyMjcuMSAxMTkuNGM2LjIgMy4zIDEzLjQgNC40IDIwLjMgMy4yIDE3LjQtMyAyOS4xLTE5LjUgMjYuMS0zNi45bC00My40LTI1Mi45IDE4My43LTE3OS4xYzUtNC45IDguMy0xMS4zIDkuMy0xOC4zIDIuNy0xNy41LTkuNS0zMy43LTI3LTM2LjN6IiBmaWxsPSIjZjk5YjAxIi8+PC9zdmc+);
  }

  .prose .rating_nums {
    font-size: var(--font-size-s);
    color: var(--text-primary);
  }

  .prose .rating .allstargray {
    position: relative;
    height: 1rem;
    width: 5rem;
    margin-right: 8px;
    background-color: var(--text-primary);
    opacity: 0.15;
    -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMzIiIGhlaWdodD0iMzIiPjxwYXRoIGQ9Ik05MDguMSAzNTMuMWwtMjUzLjktMzYuOUw1NDAuNyA4Ni4xYy0zLjEtNi4zLTguMi0xMS40LTE0LjUtMTQuNS0xNS44LTcuOC0zNS0xLjMtNDIuOSAxNC41TDM2OS44IDMxNi4ybC0yNTMuOSAzNi45Yy03IDEtMTMuNCA0LjMtMTguMyA5LjMtMTIuMyAxMi43LTEyLjEgMzIuOS42IDQ1LjNsMTgzLjcgMTc5LjEtNDMuNCAyNTIuOWMtMS4yIDYuOS0uMSAxNC4xIDMuMiAyMC4zIDguMiAxNS42IDI3LjYgMjEuNyA0My4yIDEzLjRMNTEyIDc1NGwyMjcuMSAxMTkuNGM2LjIgMy4zIDEzLjQgNC40IDIwLjMgMy4yIDE3LjQtMyAyOS4xLTE5LjUgMjYuMS0zNi45bC00My40LTI1Mi45IDE4My43LTE3OS4xYzUtNC45IDguMy0xMS4zIDkuMy0xOC4zIDIuNy0xNy41LTkuNS0zMy43LTI3LTM2LjN6IiBmaWxsPSIjZmZmZmZmIi8+PC9zdmc+);
    mask-image: url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMzIiIGhlaWdodD0iMzIiPjxwYXRoIGQ9Ik05MDguMSAzNTMuMWwtMjUzLjktMzYuOUw1NDAuNyA4Ni4xYy0zLjEtNi4zLTguMi0xMS40LTE0LjUtMTQuNS0xNS44LTcuOC0zNS0xLjMtNDIuOSAxNC41TDM2OS44IDMxNi4ybC0yNTMuOSAzNi45Yy03IDEtMTMuNCA0LjMtMTguMyA5LjMtMTIuMyAxMi43LTEyLjEgMzIuOS42IDQ1LjNsMTgzLjcgMTc5LjEtNDMuNCAyNTIuOWMtMS4yIDYuOS0uMSAxNC4xIDMuMiAyMC4zIDguMiAxNS42IDI3LjYgMjEuNyA0My4yIDEzLjRMNTEyIDc1NGwyMjcuMSAxMTkuNGM2LjIgMy4zIDEzLjQgNC40IDIwLjMgMy4yIDE3LjQtMyAyOS4xLTE5LjUgMjYuMS0zNi45bC00My40LTI1Mi45IDE4My43LTE3OS4xYzUtNC45IDguMy0xMS4zIDkuMy0xOC4zIDIuNy0xNy41LTkuNS0zMy43LTI3LTM2LjN6IiBmaWxsPSIjZmZmZmZmIi8+PC9zdmc+);
    -webkit-mask-size: auto 100%;
    mask-size: auto 100%;
    -webkit-mask-repeat: repeat;
    mask-repeat: repeat;
  }

  /* Skeleton/Loading card styles */
  .prose .neodb-loading.music {
    min-height: 8rem !important;
    background: var(--astro-code-background);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .prose .neodb-loading.other {
    min-height: 11rem !important;
    background: var(--astro-code-background);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .prose .neodb-error {
    font-size: var(--font-size-m);
    margin: 1.5rem;
  }


  /* Ensure the positioned ancestor is correct */
  .copy-code-wrapper {
    position: relative !important;
  }

  /* Keep for backward compatibility */
  .copy-code-block {
    position: relative !important;
  }

  .copy-button {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 2rem;
    height: 2rem;
    z-index: 10;
    background: var(--bg);
    border-radius: 0.375rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease-out;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    backdrop-filter: blur(48px);
    opacity: 0;
    pointer-events: none;
  }

  .copy-code-wrapper:hover .copy-button,
  .copy-button:focus-visible,
  .copy-button[data-copy-state='copied'] {
    opacity: 1;
    pointer-events: auto;
  }

  body[data-copy-code='disabled'] .copy-button {
    display: none !important;
  }

  .copy-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--code-bg);
    border-radius: 0.325rem;
    opacity: 0;
    transition: opacity 0.15s ease-out;
    pointer-events: none;
  }

  .copy-button:hover::before {
    opacity: 1;
  }

  .copy-button:hover {
    color: var(--text-primary);
  }

  .copy-button svg {
    flex-shrink: 0;
    position: relative;
    z-index: 1;
  }


  .image-viewer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity 0.15s ease-out,
      visibility 0s linear 0.15s;
    background: color-mix(in srgb, var(--bg) 60%, transparent);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
  }

  .image-viewer.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition:
      opacity 0.15s ease-out,
      visibility 0s ease-out;
  }

  :global(.prose img[data-preview='true']) {
    cursor: pointer;
  }

  .image-viewer img {
    min-width: 45rem;
    max-width: 60vw;
    max-height: 80vh;
    object-fit: contain;
  }

  @media (max-width: 768px) {
    .image-viewer img {
      min-width: 100vw;
    }
  }

  body.image-viewer-open {
    overflow: hidden;
  }

:root{--sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif}html{scroll-padding-top:3rem}.layout-wrapper{display:flex;flex-direction:column;flex:1;min-height:0}.site-header{margin-bottom:2rem}.site-header>nav{display:flex;justify-content:space-between;align-items:center}.site-title{font-weight:500;color:var(--text-primary);text-decoration:none}.header-actions{display:flex;gap:1rem}.plain-button{color:var(--text-secondary);border:0;background:none;cursor:pointer;font:inherit;padding:.25rem}.site-header .site-menu{justify-content:flex-start;gap:1rem;flex-wrap:wrap;margin-top:1rem;font-size:var(--font-size-s)}.site-menu a{color:var(--text-secondary);text-decoration:none}.site-menu details{position:relative}.submenu{position:absolute;top:100%;left:0;background:var(--bg);border:1px solid var(--border);padding:.5rem;display:flex;flex-direction:column;min-width:8rem;z-index:20}.about{white-space:pre-line;margin:0 0 1.25rem}.about:empty{display:none}.post-list{padding:0;margin:0;list-style:none}.post-list .post-title{margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.post-list.date-left .date{order:-1;margin-right:.75rem}.post-list.date-left .divider{display:none}.post-list.date-left .post-title{flex:1}.page-heading{font-size:var(--font-size-m);font-weight:500;margin:2.5rem 0 1.5rem}.archive-heading{font-size:var(--font-size-s);color:var(--text-secondary);font-weight:400;margin:2rem 0 1rem}.pagination,.post-navigation{display:flex;gap:1rem;justify-content:space-between;margin:2rem 0;font-size:var(--font-size-s)}.pagination a,.post-navigation a,.taxonomy-list a{color:var(--text-secondary);text-decoration:none}.taxonomy-list{list-style:none;padding:0}.taxonomy-list li{display:flex;justify-content:space-between;padding:.65rem 0;border-bottom:1px solid var(--border)}.empty{color:var(--text-secondary)}.post-taxonomy{display:flex;flex-wrap:wrap;gap:1rem;font-size:var(--font-size-s)}.post-taxonomy a{color:var(--text-secondary)}.post-container .prose{margin-bottom:3rem}.comments{margin-top:3rem}.prose .content{min-width:0}.prose img{max-width:100%;height:auto}.prose video,.prose iframe{max-width:100%}.prose pre{position:relative;overflow:auto}.copy-code-button{position:absolute;top:.5rem;right:.5rem;border:1px solid var(--border);border-radius:4px;background:var(--bg);color:var(--text-secondary);font:inherit;font-size:.75rem;padding:.2rem .5rem;cursor:pointer}.prose pre code{padding-right:3rem}.prose .content h1,.prose .content h2,.prose .content h3,.prose .content h4{scroll-margin-top:3rem}.reading-time{margin-left:.5rem}.toc-container[hidden]{display:none!important}.toc-container{left:auto;top:12rem;position:fixed;display:block;opacity:1}.toc-link{height:1.3rem}.toc-link:focus-visible::after{opacity:1;left:0}.toc-level-1 .toc-link::before{width:1.25rem}.toc-level-2 .toc-link::before{width:.75rem}dialog.image-lightbox{border:none;background:transparent;padding:2.5rem;max-width:95vw;max-height:95vh;color:#fff}dialog.image-lightbox::backdrop{background:rgba(0,0,0,.85);backdrop-filter:blur(5px)}.image-lightbox img{display:block;max-width:85vw;max-height:80vh;object-fit:contain}.image-lightbox button{position:absolute;right:0;top:0;background:none;border:0;color:#fff;font-size:2rem;cursor:pointer}.image-lightbox figcaption{text-align:center}.skip-link:focus{position:fixed!important;top:1rem;left:1rem;width:auto;height:auto;clip:auto;clip-path:none;background:var(--bg);z-index:200;padding:.5rem}body[data-fade=true] main{animation:chiri-in .3s ease-out}@keyframes chiri-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}@media(max-width:600px){.post-list .divider{min-width:.5rem}.post-list .date{font-size:.75rem}.footer-content{flex-wrap:wrap;gap:.4rem}.post-navigation{flex-direction:column}.prose table{display:block;overflow:auto}.toc-container{display:none!important}}


  .prose .x-card {
    width: 100%;
    margin: 1em auto;
    text-align: center;
  }

  .prose .x-card > * {
    display: inline-block;
    max-width: 100%;
    margin: 0 auto;
  }

  .prose .x-card iframe {
    max-width: 100%;
    width: auto;
  }

:root{--font-size-xl:var(--font-size-m)}.prose .gc-owner-avatar{background-size:cover;background-position:center}.content iframe{border:0}.chiri-card-disabled{border:0!important;background:none!important}

.prose .shiki .copy-code-button{z-index:2}.prose pre:has(.copy-code-button){padding-top:2.75rem}.prose pre .copy-code-button{line-height:1.5;min-height:1.75rem}body[data-centered=false]{max-width:min(var(--content-width),calc(100vw - 9.5rem))!important}@media(max-width:768px){body[data-centered=false]{max-width:var(--content-width)!important}}

.prose .chiri-code-wrapper{position:relative;margin:2em 0;padding-top:2rem}.chiri-code-wrapper>.copy-code-button{z-index:3;top:0}.chiri-code-wrapper shiki-code{display:block}