sayfa

@import "tailwindcss";
@import "./vendor/catppuccin-mocha.css";
@plugin "@tailwindcss/typography";
@source "../../layouts";
@source "../../../../lib/sayfa/blocks";

/* Self-hosted fonts — Inter (latin-ext + latin) */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-ext-400.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-ext-500.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-ext-600.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-ext-700.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Self-hosted fonts — Noto Sans Arabic */
@font-face {
  font-family: "Noto Sans Arabic";
  font-style: normal;
  font-weight: 400;
  font-display: fallback;
  src: url("/assets/fonts/noto-sans-arabic-400.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: "Noto Sans Arabic";
  font-style: normal;
  font-weight: 500;
  font-display: fallback;
  src: url("/assets/fonts/noto-sans-arabic-500.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: "Noto Sans Arabic";
  font-style: normal;
  font-weight: 600;
  font-display: fallback;
  src: url("/assets/fonts/noto-sans-arabic-600.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: "Noto Sans Arabic";
  font-style: normal;
  font-weight: 700;
  font-display: fallback;
  src: url("/assets/fonts/noto-sans-arabic-700.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

/* Self-hosted fonts — JetBrains Mono (latin-ext + latin) */
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/jetbrains-mono-latin-ext-400.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/jetbrains-mono-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/jetbrains-mono-latin-ext-500.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/jetbrains-mono-latin-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@theme {
  --font-sans: "Inter", "Noto Sans Arabic", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

:root {
  --site-bg:            var(--color-ctp-base);
  --site-surface:       var(--color-ctp-mantle);
  --site-surface-2:     var(--color-ctp-crust);
  --site-text:          var(--color-ctp-text);
  --site-subtext:       var(--color-ctp-subtext1);
  --site-muted:         var(--color-ctp-subtext0);
  --site-border:        var(--color-ctp-surface1);
  --site-border-strong: var(--color-ctp-surface2);
  --site-accent:        var(--color-ctp-blue);
  --site-code-bg:       var(--color-ctp-mantle);
  --site-code-text:     var(--color-ctp-text);
}

/* 404 page */
.error-page {
  @apply flex flex-col items-center justify-center text-center;
  min-height: 50vh;
}

.error-visual {
  @apply relative flex items-center justify-center mb-8;
  width: 10rem;
  height: 10rem;
}

.error-code {
  @apply text-9xl font-bold absolute inset-0 flex items-center justify-center;
  color: var(--site-border);
  opacity: 0.45;
  user-select: none;
}

.error-title {
  @apply text-2xl sm:text-3xl font-bold mb-6;
  color: var(--site-text);
}

.error-home-link {
  @apply inline-flex items-center gap-2 px-5 py-2.5 rounded-lg font-medium transition-colors;
  background-color: var(--site-surface);
  border: 1px solid color-mix(in srgb, var(--site-border) 70%, transparent);
  color: var(--site-text);
}

.error-home-link:hover {
  border-color: var(--site-accent);
  color: var(--site-accent);
}

/* Component classes */
@layer components {
  .site-root {
    @apply scroll-smooth;
    scroll-padding-top: 5rem;
  }

  .site-body {
    @apply font-sans antialiased;
    line-height: 1.5;
    background-color: var(--site-bg);
    color: var(--site-text);
    --card-surface:      var(--site-surface);
    --card-border:       color-mix(in srgb, var(--site-border) 82%, transparent);
    --card-hover-border: color-mix(in srgb, var(--color-ctp-blue) 30%, var(--site-border));
    --card-shadow:       0 1px 0 color-mix(in srgb, var(--site-border) 45%, transparent),
      0 8px 16px -20px color-mix(in srgb, var(--color-ctp-crust) 70%, transparent);
    --card-shadow-hover: 0 1px 0 color-mix(in srgb, var(--site-border) 55%, transparent),
      0 18px 28px -26px color-mix(in srgb, var(--color-ctp-crust) 78%, transparent);
    --card-lift: -1px;
  }

  .btn-disabled {
    @apply opacity-50 cursor-not-allowed pointer-events-none;
  }

  .section-title {
    @apply text-lg sm:text-xl font-semibold;
    text-wrap: balance;
    color: var(--color-ctp-text);
  }

  .home-connect-title {
    @apply text-lg sm:text-xl font-semibold mb-5;
    color: var(--color-ctp-text);
  }

  .page-list-title {
    @apply text-2xl sm:text-3xl font-bold mb-10;
    text-wrap: balance;
    color: var(--color-ctp-text);
  }

  .section-link {
    @apply inline-flex items-center gap-1 text-sm font-medium transition-colors;
    color: var(--color-ctp-blue);
  }

  .section-link:hover {
    color: var(--color-ctp-lavender);
  }

  .page-title-xl {
    @apply text-3xl sm:text-4xl font-bold;
    text-wrap: balance;
    color: var(--color-ctp-text);
  }

  .page-title-lg {
    @apply text-2xl sm:text-3xl font-bold;
    text-wrap: balance;
    color: var(--color-ctp-text);
  }

  .content-layout {
    @apply lg:grid lg:grid-cols-[minmax(0,42rem)_200px] xl:grid-cols-[minmax(0,48rem)_280px] lg:gap-16 xl:gap-20 lg:justify-center;
  }

  .content-main {
    @apply min-w-0;
  }

  .content-header {
    @apply mb-10;
  }

  .content-header-sm {
    @apply mb-8;
  }

  .content-type-row {
    @apply flex items-center gap-2 mb-3;
  }

  .content-type-badge {
    @apply inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-medium;
    background-color: color-mix(in srgb, var(--color-ctp-blue) 10%, transparent);
    color: var(--color-ctp-blue);
  }

  .content-status-badge {
    @apply inline-flex items-center h-5 px-1.5 rounded text-xs font-medium;
    background-color: color-mix(in srgb, var(--color-ctp-blue) 15%, transparent);
    color: var(--color-ctp-blue);
  }

  .content-meta-row {
    @apply mt-5 flex flex-wrap items-center gap-4 text-sm;
    color: var(--color-ctp-subtext0);
  }

  .content-meta-row-tight {
    @apply mt-3 flex flex-wrap items-center gap-4 text-sm;
    color: var(--color-ctp-subtext0);
  }

  .content-meta-item {
    @apply inline-flex items-center gap-1.5;
  }

  .content-meta-separator {
    color: var(--color-ctp-overlay0);
  }

  .content-actions-row {
    @apply mt-5 flex flex-wrap gap-3;
  }

  .content-chip-row {
    @apply mt-4 flex flex-wrap gap-1.5;
  }

  .content-chip-row-tight {
    @apply mt-3 flex flex-wrap gap-1.5;
  }

  .chip-category-link {
    @apply inline-flex items-center gap-1 h-6 px-2 rounded-md text-xs font-medium transition-colors;
    background-color: color-mix(in srgb, var(--color-ctp-peach) 12%, transparent);
    color: var(--color-ctp-peach);
  }

  .chip-category-link:hover {
    background-color: color-mix(in srgb, var(--color-ctp-peach) 22%, transparent);
  }

  .chip-tag-link {
    @apply inline-flex items-center gap-1 h-6 px-2 rounded-md text-xs font-medium transition-colors;
    background-color: var(--color-ctp-surface0);
    color: var(--color-ctp-subtext0);
  }

  .chip-tag-link:hover {
    background-color: color-mix(in srgb, var(--color-ctp-blue) 12%, transparent);
    color: var(--color-ctp-blue);
  }

  .chip-category {
    @apply inline-flex items-center gap-0.5 h-5 px-1.5 rounded text-xs font-medium;
    background-color: color-mix(in srgb, var(--color-ctp-peach) 10%, transparent);
    color: var(--color-ctp-peach);
  }

  .chip-tag {
    @apply inline-flex items-center gap-0.5 h-5 px-1.5 rounded text-xs font-medium;
    background-color: var(--color-ctp-surface0);
    color: var(--color-ctp-subtext0);
  }

  .chip-status {
    @apply inline-flex items-center h-5 px-1.5 rounded text-xs font-medium;
    background-color: color-mix(in srgb, var(--color-ctp-blue) 15%, transparent);
    color: var(--color-ctp-blue);
  }

  .content-figure {
    @apply mb-10 -mx-5 sm:-mx-6 lg:mx-0;
  }

  .content-image {
    @apply w-full rounded-none sm:rounded-lg lg:rounded-xl object-cover aspect-2/1 sm:aspect-21/9 lg:aspect-21/9 max-h-112;
  }

  .toc-mobile {
    @apply lg:hidden mb-8;
  }

  .toc-sidebar {
    @apply hidden lg:block;
  }

  .prose-article {
    @apply prose max-w-none
           prose-headings:font-bold
           prose-img:rounded-lg prose-img:shadow-sm prose-img:mx-auto
           prose-code:before:content-none prose-code:after:content-none
           prose-code:font-mono prose-code:text-sm
           prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded
           prose-headings:scroll-mt-20;
    --tw-prose-body:          var(--color-ctp-text);
    --tw-prose-headings:      var(--color-ctp-text);
    --tw-prose-lead:          var(--color-ctp-subtext0);
    --tw-prose-links:         var(--color-ctp-blue);
    --tw-prose-bold:          var(--color-ctp-text);
    --tw-prose-counters:      var(--color-ctp-subtext0);
    --tw-prose-bullets:       var(--color-ctp-overlay0);
    --tw-prose-hr:            var(--color-ctp-surface1);
    --tw-prose-quotes:        var(--color-ctp-text);
    --tw-prose-quote-borders: var(--color-ctp-blue);
    --tw-prose-captions:      var(--color-ctp-subtext0);
    --tw-prose-code:          var(--color-ctp-text);
    --tw-prose-pre-code:      var(--color-ctp-text);
    --tw-prose-pre-bg:        var(--color-ctp-mantle);
    --tw-prose-th-borders:    var(--color-ctp-surface1);
    --tw-prose-td-borders:    var(--color-ctp-surface0);
  }

  .prose-page {
    @apply prose max-w-none
           prose-headings:font-bold
           prose-headings:scroll-mt-20
           prose-img:rounded-lg prose-img:shadow-sm prose-img:mx-auto
           prose-code:before:content-none prose-code:after:content-none
           prose-code:font-mono prose-code:text-sm
           prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded;
    --tw-prose-body:          var(--color-ctp-text);
    --tw-prose-headings:      var(--color-ctp-text);
    --tw-prose-lead:          var(--color-ctp-subtext0);
    --tw-prose-links:         var(--color-ctp-blue);
    --tw-prose-bold:          var(--color-ctp-text);
    --tw-prose-counters:      var(--color-ctp-subtext0);
    --tw-prose-bullets:       var(--color-ctp-overlay0);
    --tw-prose-hr:            var(--color-ctp-surface1);
    --tw-prose-quotes:        var(--color-ctp-text);
    --tw-prose-quote-borders: var(--color-ctp-blue);
    --tw-prose-captions:      var(--color-ctp-subtext0);
    --tw-prose-code:          var(--color-ctp-text);
    --tw-prose-pre-code:      var(--color-ctp-text);
    --tw-prose-pre-bg:        var(--color-ctp-mantle);
    --tw-prose-th-borders:    var(--color-ctp-surface1);
    --tw-prose-td-borders:    var(--color-ctp-surface0);
  }

  .note-container {
    @apply border-t-2 pt-8;
    border-color: var(--color-ctp-blue);
  }

  .feed-links-row {
    @apply mb-6 flex items-center gap-1.5 text-xs;
    color: var(--color-ctp-subtext0);
  }

  .feed-links-inline {
    @apply flex items-center gap-1.5 text-xs;
    color: var(--color-ctp-subtext0);
  }

  .feed-icon {
    @apply w-3.5 h-3.5 shrink-0;
  }

  .feed-tooltip-wrap {
    @apply relative;
  }

  .feed-link {
    @apply transition-colors;
  }

  .feed-link:hover {
    color: var(--color-ctp-blue);
  }

  .feed-tooltip {
    @apply pointer-events-none absolute bottom-full left-1/2 -translate-x-1/2 mb-1.5 rounded px-2 py-0.5 text-xs whitespace-nowrap opacity-0 transition-opacity z-10;
    background-color: var(--color-ctp-text);
    color: var(--color-ctp-base);
  }

  .feed-tooltip-wrap:hover .feed-tooltip {
    @apply opacity-100;
  }

  .feed-separator {
    @apply opacity-50;
  }

  .empty-state-text {
    @apply text-sm py-8;
    color: var(--color-ctp-subtext0);
  }

  .notes-grid {
    @apply grid grid-cols-1 sm:grid-cols-2 gap-4;
  }

  .cards-stack {
    @apply space-y-4;
  }

  .list-stack {
    @apply space-y-0;
  }

  .content-card {
    @apply block rounded-lg border p-5 transition-[border-color,box-shadow,transform] duration-200;
  }

  .content-card-note,
  .content-card-project {
    @apply h-full flex flex-col;
  }

  .content-card-note {
    min-height: 8.75rem;
  }

  .content-card-project {
    min-height: 10.5rem;
  }

  .content-card-title {
    @apply text-base font-medium leading-snug;
    color: var(--color-ctp-text);
  }

  .content-card-title-clamp {
    @apply text-base font-medium line-clamp-2 leading-snug;
    color: var(--color-ctp-text);
  }

  .content-card:hover .content-card-title,
  .content-card:hover .content-card-title-clamp {
    color: var(--color-ctp-blue);
  }

  .content-card-date-wrap {
    @apply mt-2.5;
  }

  .content-card-note .content-card-date-wrap {
    @apply mt-auto pt-3;
  }

  .content-card-date {
    @apply text-xs;
    color: var(--color-ctp-subtext0);
  }

  .content-card-header {
    @apply flex items-start justify-between gap-3;
  }

  .content-card-excerpt {
    @apply mt-2 text-sm leading-relaxed;
    color: var(--color-ctp-subtext0);
  }

  .content-card-excerpt-clamp {
    @apply mt-2 text-sm leading-relaxed line-clamp-2;
    color: var(--color-ctp-subtext0);
  }

  .content-card-meta {
    @apply mt-2.5 flex flex-wrap items-center gap-2;
  }

  .content-card-project .content-card-meta {
    @apply mt-auto pt-3;
  }

  .list-entry {
    @apply block py-5 border-b first:border-t;
    border-color: color-mix(in srgb, var(--color-ctp-surface1) 70%, transparent);
  }

  .list-entry-title {
    @apply text-base font-medium;
    color: var(--color-ctp-text);
  }

  .list-entry:hover .list-entry-title {
    color: var(--color-ctp-blue);
  }

  .list-entry-excerpt {
    @apply mt-1.5 text-sm leading-relaxed;
    color: var(--color-ctp-subtext0);
  }

  .list-entry-meta {
    @apply mt-2.5 flex flex-wrap items-center gap-3;
  }

  .list-chip-group {
    @apply flex flex-wrap gap-1.5;
  }

  .pagination-nav {
    @apply mt-10 flex items-center justify-between;
  }

  .pagination-label {
    @apply text-sm;
    color: var(--color-ctp-subtext0);
  }

  .btn-primary-sm {
    @apply inline-flex items-center gap-1.5 px-4 py-2.5 rounded-lg transition-colors text-sm;
    border: 1px solid var(--color-ctp-blue);
    background-color: color-mix(in srgb, var(--color-ctp-blue) 8%, transparent);
    color: var(--color-ctp-blue);
  }

  .btn-primary-sm:hover {
    background-color: color-mix(in srgb, var(--color-ctp-blue) 15%, transparent);
  }

  .recent-section-header {
    @apply flex items-center justify-between mb-6;
  }

  .featured-label {
    @apply inline-flex items-center gap-1.5 text-xs font-medium uppercase tracking-wide mb-2;
    color: var(--color-ctp-blue);
  }

  .featured-title {
    @apply text-xl sm:text-2xl font-bold;
    color: var(--color-ctp-text);
  }

  .featured-link:hover .featured-title {
    color: var(--color-ctp-blue);
  }

  .featured-description {
    @apply mt-2 leading-relaxed line-clamp-2;
    color: var(--color-ctp-subtext0);
  }

  .featured-meta {
    @apply mt-3 flex flex-wrap items-center gap-3 text-sm;
    color: var(--color-ctp-subtext0);
  }

  .featured-meta-item {
    @apply inline-flex items-center gap-1;
  }

  .featured-link {
    @apply block pl-5 py-4;
  }

  .talk-action-link {
    @apply inline-flex items-center gap-1.5 h-8 px-3 rounded-md border text-xs font-medium transition-colors;
    border-color: color-mix(in srgb, var(--color-ctp-surface1) 70%, transparent);
    background-color: var(--color-ctp-surface0);
    color: var(--color-ctp-subtext1);
  }

  .talk-action-link:hover {
    border-color: color-mix(in srgb, var(--color-ctp-blue) 30%, transparent);
    background-color: color-mix(in srgb, var(--color-ctp-blue) 10%, transparent);
    color: var(--color-ctp-blue);
  }

  .toc-summary-icon {
    @apply w-4 h-4;
    color: var(--color-ctp-overlay1);
  }

  .entry-link-row {
    @apply flex items-baseline gap-4 py-2.5 transition-colors;
  }

  .entry-link-date {
    @apply text-sm tabular-nums;
    color: var(--color-ctp-subtext0);
  }

  .entry-link-title {
    @apply text-sm font-medium;
    color: var(--color-ctp-text);
  }

  .entry-link-row:hover .entry-link-title {
    color: var(--color-ctp-blue);
  }

  .recent-article-list {
    @apply space-y-0 divide-y;
  }

  .recent-article-list > * + * {
    border-color: color-mix(in srgb, var(--color-ctp-surface1) 70%, transparent);
  }

  .related-section {
    @apply mt-12 pt-8 border-t;
    border-color: color-mix(in srgb, var(--color-ctp-surface1) 70%, transparent);
  }

  .related-title {
    @apply text-lg font-semibold mb-6;
    color: var(--color-ctp-text);
  }

  .related-grid {
    @apply grid grid-cols-1 sm:grid-cols-3 gap-4;
  }

  .back-link {
    @apply text-sm mb-6 inline-flex items-center gap-1.5 transition-colors;
    color: var(--color-ctp-subtext0);
  }

  .back-link:hover {
    color: var(--color-ctp-blue);
  }

  .back-link-icon {
    @apply transition-transform duration-200;
    flex-shrink: 0;
  }

  .back-link:hover .back-link-icon {
    transform: translateX(-3px);
  }

  [dir="rtl"] .back-link-icon {
    transform: scaleX(-1);
  }

  [dir="rtl"] .back-link:hover .back-link-icon {
    transform: scaleX(-1) translateX(-3px);
  }

  .toc-nav {
    @apply sticky top-20;
  }

  .toc-heading {
    @apply text-xs font-semibold uppercase tracking-wider mb-4;
    color: var(--color-ctp-subtext0);
  }

  .toc-list {
    @apply space-y-2.5 text-sm border-l;
    border-color: var(--color-ctp-surface1);
  }

  .toc-mobile-box {
    @apply rounded-lg border;
  }

  .toc-mobile-summary {
    @apply flex items-center gap-2 cursor-pointer p-4 text-sm font-medium select-none;
    color: var(--color-ctp-subtext1);
  }

  .toc-mobile-list {
    @apply px-4 pb-4 space-y-2 text-sm;
  }

  .toc-link-l2 {
    @apply block pl-4 -ml-px border-l border-transparent transition-colors;
    color: var(--color-ctp-subtext0);
  }

  .toc-link-l2:hover {
    border-color: var(--color-ctp-blue);
    color: var(--color-ctp-blue);
  }

  .toc-link-l3 {
    @apply block pl-8 -ml-px border-l border-transparent transition-colors;
    color: var(--color-ctp-subtext0);
  }

  .toc-link-l3:hover {
    border-color: var(--color-ctp-blue);
    color: var(--color-ctp-blue);
  }

  .toc-mobile-item-l3 {
    @apply ml-4;
  }

  .toc-mobile-link-l2 {
    @apply transition-colors;
    color: var(--color-ctp-subtext0);
  }

  .toc-mobile-link-l2:hover {
    color: var(--color-ctp-blue);
  }

  .toc-mobile-link-l3 {
    @apply transition-colors;
    color: var(--color-ctp-subtext0);
  }

  .toc-mobile-link-l3:hover {
    color: var(--color-ctp-blue);
  }

  .copy-link-btn {
    @apply inline-flex items-center gap-1.5 cursor-pointer transition-colors;
    color: var(--color-ctp-subtext0);
  }

  .copy-link-btn:hover {
    color: var(--color-ctp-blue);
  }

  .code-block-wrap {
    @apply my-6 max-w-full rounded-lg overflow-hidden border;
  }

  .code-block-header {
    @apply flex items-center justify-between px-4 py-2;
  }

  .code-block-lang {
    @apply text-xs font-mono;
  }

  .code-copy-btn {
    @apply inline-flex items-center gap-1.5 text-xs;
  }

  .code-copy-icon {
    @apply w-3.5 h-3.5;
  }

  .code-copy-icon-check {
    color: var(--color-ctp-green);
  }

  .code-block-pre {
    @apply p-4 overflow-x-auto m-0 border-0 rounded-none shadow-none;
  }

  .social-links-wrap {
    @apply flex flex-wrap gap-3;
  }

  .social-link-btn {
    @apply inline-flex items-center px-4 py-2.5 rounded-lg border transition-colors gap-2 text-sm;
    color: var(--color-ctp-subtext1);
  }

  .social-link-btn:hover {
    border-color: color-mix(in srgb, var(--color-ctp-blue) 30%, transparent);
    color: var(--color-ctp-blue);
  }

  .tag-cloud-wrap,
  .category-cloud-wrap {
    @apply flex flex-wrap gap-2;
  }

  .cloud-count {
    @apply ml-0.5 text-xs opacity-60;
  }

  .cloud-category-lg {
    @apply text-sm font-medium transition-colors;
    background-color: color-mix(in srgb, var(--color-ctp-peach) 18%, transparent);
    color: var(--color-ctp-peach);
  }

  .cloud-category-lg:hover {
    background-color: color-mix(in srgb, var(--color-ctp-peach) 30%, transparent);
  }

  .cloud-category-sm {
    @apply text-xs font-medium transition-colors;
    background-color: color-mix(in srgb, var(--color-ctp-peach) 12%, transparent);
    color: var(--color-ctp-peach);
  }

  .cloud-category-sm:hover {
    background-color: color-mix(in srgb, var(--color-ctp-peach) 22%, transparent);
  }

  .cloud-tag-lg {
    @apply text-sm font-medium transition-colors;
    background-color: color-mix(in srgb, var(--color-ctp-blue) 10%, transparent);
    color: var(--color-ctp-blue);
  }

  .cloud-tag-lg:hover {
    background-color: color-mix(in srgb, var(--color-ctp-blue) 18%, transparent);
  }

  .cloud-tag-sm {
    @apply text-xs font-medium transition-colors;
    background-color: var(--color-ctp-surface0);
    color: var(--color-ctp-subtext1);
  }

  .cloud-tag-sm:hover {
    background-color: color-mix(in srgb, var(--color-ctp-blue) 10%, transparent);
    color: var(--color-ctp-blue);
  }

  .header-shell {
    @apply sticky top-0 z-50 border-b backdrop-blur-lg;
  }

  .header-container {
    @apply max-w-3xl mx-auto px-5 sm:px-6;
  }

  .header-row {
    @apply flex items-center justify-between h-14;
  }

  .header-brand-logo {
    @apply flex items-center hover:opacity-80 transition-opacity;
  }

  .header-brand-text {
    @apply text-lg font-bold transition-colors;
    color: var(--color-ctp-text);
  }

  .header-brand-text:hover {
    color: var(--color-ctp-blue);
  }

  .header-logo {
    @apply max-h-8 w-auto;
  }

  .header-logo-light {
    @apply max-h-8 w-auto dark:hidden;
  }

  .header-logo-dark {
    @apply max-h-8 w-auto hidden dark:block;
  }

  .header-nav-only {
    @apply flex items-center;
  }

  .header-nav-wrap {
    @apply flex items-center gap-2;
  }

  .header-desktop-nav {
    @apply hidden md:flex items-center gap-7;
  }

  .header-mobile-switcher {
    @apply md:hidden;
  }

  .header-menu-toggle {
    @apply md:hidden p-2 -mr-2 transition-colors;
    color: var(--color-ctp-subtext0);
  }

  .header-menu-toggle:hover {
    color: var(--color-ctp-text);
  }

  .header-mobile-menu {
    @apply pb-4 md:hidden;
  }

  .header-mobile-list {
    @apply flex flex-col gap-1 pt-2 border-t;
    border-color: color-mix(in srgb, var(--color-ctp-surface1) 80%, transparent);
  }

  .header-nav-link-active {
    @apply text-sm font-medium;
    color: var(--color-ctp-text);
  }

  .header-nav-link {
    @apply text-sm font-medium transition-colors;
    color: var(--color-ctp-subtext0);
  }

  .header-nav-link:hover {
    color: var(--color-ctp-text);
  }

  .header-mobile-link-active {
    @apply flex items-center gap-3 py-2.5 text-sm font-medium;
    color: var(--color-ctp-blue);
  }

  .header-mobile-link {
    @apply flex items-center gap-3 py-2.5 text-sm font-medium transition-colors;
    color: var(--color-ctp-subtext1);
  }

  .header-mobile-link:hover {
    color: var(--color-ctp-blue);
  }

  .lang-switcher {
    @apply relative;
  }

  .lang-toggle {
    @apply flex items-center gap-1.5 p-2 text-sm transition-colors;
    color: var(--color-ctp-subtext0);
  }

  .lang-toggle:hover {
    color: var(--color-ctp-text);
  }

  .lang-current-code {
    @apply text-xs font-medium;
  }

  .lang-menu {
    @apply absolute right-0 mt-1 min-w-32 py-1 rounded-lg border backdrop-blur-lg shadow-lg;
  }

  .lang-item-current {
    @apply block px-3 py-2 text-sm font-medium;
    color: var(--color-ctp-text);
  }

  .lang-item-link {
    @apply block px-3 py-2 text-sm transition-colors;
    color: var(--color-ctp-subtext1);
  }

  .lang-item-link:hover {
    color: var(--color-ctp-blue);
    background-color: var(--color-ctp-surface0);
  }

  .footer-shell {
    @apply border-t;
    border-color: color-mix(in srgb, var(--color-ctp-surface1) 70%, transparent);
  }

  .footer-container {
    @apply max-w-3xl mx-auto px-5 sm:px-6 py-8;
  }

  .footer-content {
    @apply flex flex-col sm:flex-row items-center justify-between gap-4;
  }

  .footer-main {
    @apply flex items-center gap-3;
  }

  .footer-copy {
    @apply text-sm;
    color: var(--color-ctp-subtext0);
  }

  .footer-social {
    @apply flex items-center gap-4;
  }

  .footer-social-link {
    @apply transition-colors;
    color: var(--color-ctp-subtext0);
  }

  .footer-social-link:hover {
    color: var(--color-ctp-blue);
  }

  .icon-2_5 {
    @apply w-2.5 h-2.5;
  }

  .icon-3 {
    @apply w-3 h-3;
  }

  .icon-3_5 {
    @apply w-3.5 h-3.5;
  }

  .icon-4 {
    @apply w-4 h-4;
  }

  .icon-5 {
    @apply w-5 h-5;
  }

  .icon-chevron {
    @apply w-3 h-3 transition-transform;
  }

  .icon-menu {
    @apply w-5 h-5;
  }

  /* Content width containers */
  .container-content {
    @apply max-w-2xl xl:max-w-3xl mx-auto px-5 sm:px-6 xl:px-8;
  }

  .container-content-wide {
    @apply max-w-5xl xl:max-w-6xl mx-auto px-5 sm:px-6 xl:px-8;
  }

  /* Vertical spacing utilities */
  .section-spacing {
    @apply pb-16;
  }

  .section-spacing-lg {
    @apply pb-20;
  }

  /* Page wrapper with vertical padding */
  .page-wrapper {
    @apply py-12 sm:py-16;
  }

  /* Prose content styling for markdown */
  .prose-content {
    @apply prose max-w-none
           prose-headings:font-bold
           prose-img:rounded-lg prose-img:shadow-sm prose-img:mx-auto;
    --tw-prose-body:          var(--color-ctp-text);
    --tw-prose-headings:      var(--color-ctp-text);
    --tw-prose-lead:          var(--color-ctp-subtext0);
    --tw-prose-links:         var(--color-ctp-blue);
    --tw-prose-bold:          var(--color-ctp-text);
    --tw-prose-counters:      var(--color-ctp-subtext0);
    --tw-prose-bullets:       var(--color-ctp-overlay0);
    --tw-prose-hr:            var(--color-ctp-surface1);
    --tw-prose-quotes:        var(--color-ctp-text);
    --tw-prose-quote-borders: var(--color-ctp-blue);
    --tw-prose-captions:      var(--color-ctp-subtext0);
    --tw-prose-code:          var(--color-ctp-text);
    --tw-prose-pre-code:      var(--color-ctp-text);
    --tw-prose-pre-bg:        var(--color-ctp-mantle);
    --tw-prose-th-borders:    var(--color-ctp-surface1);
    --tw-prose-td-borders:    var(--color-ctp-surface0);
  }

  /* Prevent code blocks from overflowing viewport on mobile */
  .prose-content pre {
    @apply max-w-full overflow-x-auto;
  }

  .content-card,
  .social-link-btn {
    background-color: var(--card-surface);
    border-color: var(--card-border);
  }

  .content-card {
    box-shadow: var(--card-shadow);
  }

  .content-card:hover {
    border-color: var(--card-hover-border);
    box-shadow: var(--card-shadow-hover);
    transform: translateY(var(--card-lift));
  }

  .toc-mobile-box {
    background-color: var(--site-surface-2);
    border-color: color-mix(in srgb, var(--site-border) 82%, transparent);
  }

  .header-shell {
    background-color: color-mix(in srgb, var(--site-bg) 92%, transparent);
    border-color: color-mix(in srgb, var(--site-border) 88%, transparent);
  }

  .lang-menu {
    background-color: color-mix(in srgb, var(--site-bg) 96%, transparent);
    border-color: color-mix(in srgb, var(--site-border) 88%, transparent);
  }

  .code-block-wrap {
    border-color: color-mix(in srgb, var(--site-border) 85%, transparent);
  }

  .code-block-header {
    background-color: color-mix(in srgb, var(--site-surface-2) 92%, var(--site-bg));
    color: var(--site-muted);
  }

  .code-copy-btn {
    color: var(--site-muted);
  }

  .code-copy-btn:hover {
    color: var(--site-text);
  }

  .code-block-pre {
    background-color: var(--site-code-bg);
    color: var(--site-code-text);
  }

  .prose-article :not(pre) > code,
  .prose-page :not(pre) > code,
  .prose-content :not(pre) > code {
    background-color: var(--site-code-bg);
    color: var(--site-code-text);
  }
}

/* Heading typography */
h1, h2, h3, h4, h5, h6 { text-wrap: pretty; }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-ctp-overlay0); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-ctp-overlay1); }
html { scrollbar-width: thin; scrollbar-color: var(--color-ctp-overlay0) transparent; }

/* Smooth transitions for interactive elements */
a, button { transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease; }
button { cursor: pointer; }

/* Featured article accent animation */
.featured-accent {
  @apply relative;
}
.featured-accent::before {
  content: '';
  @apply absolute left-0 top-0 bottom-0 w-[3px] rounded-xs transition-[width] duration-200;
  background-color: var(--color-ctp-blue);
}
.featured-accent:hover::before {
  @apply w-1;
}

/* List item hover accent */
.list-entry {
  @apply relative pl-0 transition-[padding-left] duration-200;
}
.list-entry::before {
  content: '';
  @apply absolute left-0 top-0 bottom-0 w-0 rounded-xs transition-[width] duration-200;
  background-color: var(--color-ctp-blue);
}
.list-entry:hover {
  @apply pl-4;
}
.list-entry:hover::before {
  @apply w-[3px];
}

/* Copy button states */
.copy-btn .icon-check { @apply hidden; }
.copy-btn.copied .icon-copy { @apply hidden; }
.copy-btn.copied .icon-check { @apply block; }

/* Reading progress bar */
#reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-ctp-blue), var(--color-ctp-lavender));
  z-index: 60;
  width: 0%;
  transition: width 0.1s linear;
}

/* Focus indicators */
:focus-visible {
  outline: 2px solid var(--color-ctp-blue);
  outline-offset: 2px;
}

/* Skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  z-index: 50;
}
.skip-link:focus {
  position: absolute;
  left: 0.5rem;
  top: 0.5rem;
  padding: 0.5rem 1rem;
  background-color: var(--color-ctp-blue);
  color: var(--color-ctp-base);
  border-radius: 0.375rem;
  text-decoration: none;
  font-weight: 500;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  #reading-progress { display: none !important; }
  html { scroll-behavior: auto !important; }
}

/* ToC active state */
.toc-active {
  border-left-color: var(--color-ctp-blue);
  color: var(--color-ctp-blue);
  font-weight: 500;
}

/* Language switcher dropdown chevron */
[id^="lang-toggle"][aria-expanded="true"] svg:last-child {
  transform: rotate(180deg);
}

/* Print styles */
@media print {
  header, footer, nav, aside, #reading-progress,
  .toc-sidebar, [data-noprint] { display: none !important; }

  body { background: white !important; color: black !important; font-size: 12pt; }
  a { color: black !important; text-decoration: underline; }
  a[href^="http"]:after { content: " (" attr(href) ")"; font-size: 0.75em; color: var(--color-ctp-overlay1); }
  a[href^="#"]:after { content: ""; }

  pre, blockquote { page-break-inside: avoid; border: 1px solid var(--color-ctp-surface1); }
  h1, h2, h3 { page-break-after: avoid; }
  img { max-width: 100% !important; }

  .container-content, .container-content-wide { max-width: 100% !important; padding: 0 !important; }
}