:root {
        --cream: #f9f6f1;
        --cream-dark: #f0ebe3;
        --walnut: #5d4037;
        --walnut-light: #8d6e63;
        --olive: #6b7c4c;
        --olive-dark: #566340;
        --slate: #3e3e3e;
        --slate-light: #6b6b6b;
        --night: #1a1a1a;
        --night-light: #2a2a2a;

        --bg: var(--cream);
        --text: var(--slate);
        --text-muted: var(--slate-light);
        --border: rgba(93, 64, 55, 0.2);
        --tag-bg: var(--cream-dark);
      }

      html.dark {
        --bg: var(--night);
        --text: var(--cream-dark);
        --text-muted: rgba(240, 235, 227, 0.6);
        --border: rgba(240, 235, 227, 0.1);
        --tag-bg: var(--night-light);
      }

      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        background-color: var(--bg);
        color: var(--text);
        font-family: MonumentGrotesk, SourceHanSansCN, -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Noto Sans CJK SC, WenQuanYi Micro Hei, Arial, sans-serif;
        font-size: 17px;
        line-height: 1.6;
        transition: background-color 0.2s, color 0.2s;
      }

      a {
        color: inherit;
        text-decoration: underline;
        transition: color 0.2s;
      }

      a:hover {
        color: var(--olive);
      }

      .container {
        max-width: 56rem;
        margin: 0 auto;
        padding: 3rem 1.5rem 4rem;
      }

      header {
        margin-bottom: 2.5rem;
        padding-bottom: 1.5rem;
        border-bottom: 1px solid var(--border);
      }

      .ascii-art {
        font-size: 0.5rem;
        line-height: 1.2;
        color: var(--text-muted);
        text-align: center;
        margin-bottom: 1rem;
        overflow-x: auto;
        white-space: pre;
      }

      .header-top {
        display: flex ;
        justify-content: center;
      }

      .site-title {
        font-size: 1.5rem;
        font-weight: 900;
        color: var(--olive);
        text-decoration: none;
        font-style: oblique;
        letter-spacing: -0.025em;
      }

      .site-title:hover {
        color: var(--olive-dark);
      }

      .active {
        color: var(--olive);
      }

      .active:hover {
        color: var(--olive-dark);
      }

      .right-align {
        text-align: right;
      }

      .quote {
        font-size: small;
        text-align: right;
      }

      #theme-toggle {
        background: none;
        border: none;
        color: var(--text-muted);
        cursor: pointer;
        padding: 0.25rem;
        transition: color 0.2s;
      }

      #theme-toggle:hover {
        color: var(--olive);
      }

      #theme-toggle svg {
        width: 1.5rem;
        height: 1.5rem;
        display: block;
      }

      nav {
        margin-top: 1rem;
        font-size: 0.875rem;
        text-align: center;
      }

      nav a {
        color: var(--text-muted);
        margin-right: 1.25rem;
      }

      section {
        margin-bottom: 2.5rem;
      }

      h1 {
        font-size: 1.25rem;
        font-weight: 600;
        margin-top: 2rem;
        margin-bottom: 0.75rem;
        color: var(--text);
      }

      h2 {
        font-size: 1.125rem;
        font-weight: 600;
        margin-top: 1.5rem;
        margin-bottom: 0.5rem;
        color: var(--text);
      }

      h3 {
        font-size: 1rem;
        font-weight: 600;
        margin-top: 1.5rem;
        margin-bottom: 0.5rem;
        color: var(--text);
      }

      h4 {
        font-size: 0.875rem;
        font-weight: 600;
        margin-top: 1.25rem;
        margin-bottom: 0.25rem;
        color: var(--text-muted);
        text-transform: none;
      }

      p {
        margin-bottom: 0.5rem;
      }

      ul {
        list-style: inside;
        padding: 0;
        margin-bottom: 0.5rem;
      }

      .updated {
        font-size: 0.875rem;
        color: var(--text-muted);
        font-style: italic;
        margin-top: 0.25rem;
      }

      hr {
        border: none;
        border-top: 1px solid var(--border);
        margin: 2rem 0;
      }

      .tags {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-top: 0.5rem;
      }

      .tag {
        font-size: 0.75rem;
        color: var(--text-muted);
        background-color: var(--tag-bg);
        padding: 0.25rem 0.5rem;
        border-radius: 0.25rem;
      }

      footer {
        margin-top: 3rem;
        padding-top: 1.5rem;
        border-top: 1px solid var(--border);
        font-size: 0.875rem;
        color: var(--text-muted);
      }

      footer p {
        color: var(--slate-light);
      }

      img {
        object-fit: cover;
      }

      .image-scroll {
        display: flex;
        gap: 1rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
      }

      .image-scroll::-webkit-scrollbar {
        display: none;
      }

      .image-item {
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
      }

      .image-item img {
        flex-shrink: 0;
      }

      .image-caption {
        font-size: 0.75rem;
        color: var(--text-muted);
        font-style: italic;
        max-width: 250px;
      }

      @media (min-width: 768px) {
        .container {
          padding-top: 4rem;
        }
      }