:root {
          color-scheme: light;
          --paper: #fdfdfb;
          --panel: #f7f7f3;
          --panel-strong: #eeeeea;
          --ink: #121212;
          --muted: #62625d;
          --faint: #969690;
          --line: #deded7;
          --line-strong: #161616;
          --image-soft: rgba(18, 18, 18, 0.08);
          --accent: #121212;
          --switch-bg: #f2f2ef;
          --switch-active: #ffffff;
          --switch-active-ink: #121212;
          --switch-shadow: rgba(18, 18, 18, 0.1);
          --radius: 18px;
          --ease: cubic-bezier(0.16, 1, 0.3, 1);
          font-family: "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
        }
        :root[data-theme="dark"] {
          color-scheme: dark;
          --paper: #11110f;
          --panel: #191916;
          --panel-strong: #24241f;
          --ink: #f2f2ee;
          --muted: #b6b6ad;
          --faint: #7f7f77;
          --line: #34342e;
          --line-strong: #f2f2ee;
          --image-soft: rgba(242, 242, 238, 0.12);
          --accent: #f2f2ee;
          --switch-bg: #24241f;
          --switch-active: #f2f2ee;
          --switch-active-ink: #11110f;
          --switch-shadow: rgba(0, 0, 0, 0.28);
        }
        * { box-sizing: border-box; }
        html {
          scroll-behavior: smooth;
          background: var(--paper);
        }
        body {
          margin: 0;
          background: var(--paper);
          color: var(--ink);
          font-size: 16px;
          line-height: 1.7;
          text-rendering: optimizeLegibility;
          -webkit-font-smoothing: antialiased;
        }
        a { color: inherit; text-decoration: none; }
        button { font: inherit; }
        [hidden] { display: none !important; }
        a:focus-visible {
          outline: 1px solid var(--ink);
          outline-offset: 4px;
        }
        button:focus-visible {
          outline: 1px solid var(--ink);
          outline-offset: 4px;
        }
        @media (prefers-reduced-motion: no-preference) {
          .theme-transition,
          .theme-transition body,
          .theme-transition .site-header,
          .theme-transition .site-footer,
          .theme-transition .shell,
          .theme-transition .theme-toggle,
          .theme-transition .theme-option,
          .theme-transition .feature-card,
          .theme-transition .work-card,
          .theme-transition .archive-item,
          .theme-transition .about-dashboard,
          .theme-transition .field-card,
          .theme-transition .contact-block,
          .theme-transition .article-layout,
          .theme-transition .article-visual,
          .theme-transition .article-content,
          .theme-transition .body,
          .theme-transition .toc-panel,
          .theme-transition a,
          .theme-transition button {
            transition:
              background-color 420ms var(--ease),
              color 420ms var(--ease),
              border-color 420ms var(--ease),
              box-shadow 420ms var(--ease),
              opacity 420ms var(--ease);
          }
        }
        @keyframes editorial-rise {
          from {
            opacity: 0;
            transform: translateY(12px);
          }
          to {
            opacity: 1;
            transform: translateY(0);
          }
        }
        .shell > *,
        .feature-card,
        .work-card,
        .archive-item,
        .field-card,
        .contact-block,
        .article-visual,
        .article-content {
          animation: editorial-rise 640ms var(--ease) both;
        }
        .shell > *:nth-child(2) { animation-delay: 70ms; }
        .shell > *:nth-child(3) { animation-delay: 120ms; }
        .feature-card:nth-child(2),
        .work-card:nth-child(2),
        .archive-item:nth-child(2),
        .field-card:nth-child(2),
        .contact-block:nth-child(2) { animation-delay: 80ms; }
        .feature-card:nth-child(3),
        .work-card:nth-child(3),
        .archive-item:nth-child(3),
        .field-card:nth-child(3),
        .contact-block:nth-child(3) { animation-delay: 130ms; }
        .feature-card:nth-child(n+4),
        .work-card:nth-child(n+4),
        .archive-item:nth-child(n+4),
        .field-card:nth-child(n+4),
        .contact-block:nth-child(n+4) { animation-delay: 170ms; }
        .site-header {
          position: sticky;
          top: 0;
          z-index: 10;
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 24px;
          width: min(1180px, calc(100% - 48px));
          min-height: 68px;
          margin: 0 auto;
          padding: 0;
          border-bottom: 1px solid var(--line);
          background: color-mix(in srgb, var(--paper) 92%, transparent);
          backdrop-filter: blur(18px);
          -webkit-backdrop-filter: blur(18px);
        }
        .brand {
          flex: 0 0 auto;
          color: var(--ink);
          font-size: 15px;
          font-weight: 500;
          line-height: 1;
          white-space: nowrap;
        }
        .main-nav {
          display: flex;
          align-items: center;
          justify-content: flex-end;
          gap: 20px;
          min-width: 0;
        }
        .nav-link,
        .theme-toggle,
        .view-button,
        .type-filter {
          border: 0;
          border-bottom: 1px solid transparent;
          padding: 4px 0;
          background: transparent;
          color: var(--muted);
          cursor: pointer;
          font-size: 14px;
          line-height: 1.3;
          white-space: nowrap;
          transition: color 180ms var(--ease), border-color 180ms var(--ease);
        }
        .nav-link:hover,
        .nav-link.is-active,
        .theme-toggle:hover,
        .view-button:hover,
        .view-button.is-active,
        .type-filter:hover,
        .type-filter.is-active {
          border-color: currentColor;
          color: var(--ink);
        }
        .theme-toggle {
          display: inline-flex;
          align-items: center;
          justify-content: space-between;
          gap: 0;
          width: 72px;
          height: 36px;
          border: 0;
          border-radius: 999px;
          padding: 3px;
          background: var(--switch-bg);
          color: var(--faint);
          box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 5%, transparent);
          transition: transform 180ms var(--ease), box-shadow 180ms var(--ease);
        }
        .theme-toggle:hover {
          transform: translateY(-1px);
          box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 10%, transparent);
        }
        .theme-option {
          position: relative;
          display: grid;
          width: 30px;
          height: 30px;
          place-items: center;
          border-radius: 999px;
          background: transparent;
          color: currentColor;
          transition: background-color 180ms var(--ease), color 180ms var(--ease), box-shadow 180ms var(--ease);
        }
        .theme-toggle[data-theme="light"] .theme-option-sun,
        .theme-toggle[data-theme="dark"] .theme-option-moon {
          background: var(--switch-active);
          color: var(--switch-active-ink);
          box-shadow: 0 2px 10px var(--switch-shadow);
        }
        .theme-icon {
          display: block;
          font-size: 19px;
          font-weight: 400;
          line-height: 1;
        }
        .visually-hidden {
          position: absolute;
          width: 1px;
          height: 1px;
          padding: 0;
          margin: -1px;
          overflow: hidden;
          clip: rect(0, 0, 0, 0);
          white-space: nowrap;
          border: 0;
        }
        .shell {
          width: min(1180px, calc(100% - 48px));
          margin: 0 auto;
          padding: 56px 0 108px;
        }
        .site-footer {
          width: min(1180px, calc(100% - 48px));
          margin: -72px auto 40px;
          padding-top: 18px;
          border-top: 1px solid var(--line);
          color: var(--muted);
          font-size: 13px;
          line-height: 1.6;
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 24px;
        }
        .site-footer a {
          color: inherit;
          text-decoration: none;
        }
        .site-footer a:hover {
          color: var(--ink);
        }
        .page-title,
        .about-hero {
          position: relative;
          padding: 64px 0 44px;
          border-bottom: 1px solid var(--line);
        }
        .page-title h1,
        .about-hero h1,
        .article-header h1 {
          max-width: 920px;
          margin: 0.24em 0 0.48em;
          color: var(--ink);
          font-size: 42px;
          font-weight: 300;
          line-height: 1.12;
          letter-spacing: 0;
        }
        .page-title > p,
        .about-copy > p,
        .article-header > p {
          margin: 0 0 12px;
          color: var(--muted);
          font-size: 13px;
          font-weight: 500;
          line-height: 1.35;
          text-transform: none;
        }
        .intro-copy {
          max-width: 680px;
          margin: 0;
          color: var(--muted);
          font-size: 16px;
          font-weight: 400;
          line-height: 1.75;
        }
        .about-hero {
          display: grid;
          grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
          gap: 54px;
          align-items: start;
        }
        .about-portrait {
          display: grid;
          justify-items: end;
        }
        .hero-photo {
          width: min(330px, 100%);
        }
        .hero-photo,
        .feature-image,
        .archive-image,
        .grid-image,
        .article-hero-image {
          position: relative;
          margin: 0;
          overflow: hidden;
          background: var(--panel);
          border-radius: var(--radius);
          isolation: isolate;
        }
        .image-main {
          display: block;
          width: 100%;
          height: auto;
          transform-origin: center;
          transition: transform 420ms var(--ease);
        }
        a:hover .image-main,
        .feature-image:hover .image-main,
        .archive-image:hover .image-main,
        .grid-image:hover .image-main,
        .article-hero-image:hover .image-main {
          transform: scale(1.035);
        }
        .hero-bio {
          margin: 0;
          padding: 0;
          list-style: none;
          color: var(--ink);
          font-size: 16px;
          font-weight: 300;
          line-height: 1.9;
          letter-spacing: 0.01em;
        }
        .hero-bio li {
          max-width: 760px;
          margin: 0 0 0.55em;
        }
        .about-dashboard {
          display: grid;
          grid-template-columns: repeat(3, minmax(0, 1fr));
          gap: 24px;
          padding: 24px 0;
          border-top: 1px solid var(--line);
          border-bottom: 1px solid var(--line);
        }
        .page-about .about-dashboard {
          border-top: 0;
        }
        .about-dashboard div {
          padding: 0 0 18px;
          border-bottom: 1px solid var(--line);
        }
        .page-about .about-dashboard div {
          padding-bottom: 0;
          border-bottom: 0;
        }
        .about-dashboard strong {
          display: block;
          color: var(--ink);
          font-size: 36px;
          font-weight: 300;
          line-height: 1;
        }
        .about-dashboard span {
          display: block;
          margin-top: 8px;
          color: var(--muted);
          font-size: 13px;
          line-height: 1.4;
        }
        .about-section {
          padding: 58px 0;
          border-bottom: 1px solid var(--line);
        }
        .page-about .about-section:last-child {
          border-bottom: 0;
        }
        .about-section h2 {
          margin: 0 0 24px;
          color: var(--ink);
          font-size: 28px;
          font-weight: 300;
          line-height: 1.2;
        }
        .media-list {
          display: flex;
          flex-wrap: wrap;
          gap: 10px;
        }
        .media-list span {
          border: 1px solid var(--line);
          border-radius: 999px;
          padding: 7px 12px;
          color: var(--muted);
          font-size: 13px;
          font-weight: 300;
          line-height: 1.4;
        }
        .field-grid {
          display: grid;
          grid-template-columns: repeat(3, minmax(0, 1fr));
          gap: 14px;
        }
        .field-card {
          min-height: 150px;
          border: 1px solid var(--line);
          border-radius: var(--radius);
          padding: 20px;
          background: var(--panel);
          transition: border-color 180ms var(--ease), transform 180ms var(--ease), background 180ms var(--ease);
        }
        .field-card:hover {
          border-color: var(--ink);
          transform: translateY(-2px);
        }
        .field-card .field-cn {
          display: block;
          color: var(--ink);
          font-size: 19px;
          font-weight: 300;
          line-height: 1.35;
        }
        .field-card .field-en {
          display: block;
          margin-top: 8px;
          color: var(--muted);
          font-size: 12px;
          font-weight: 400;
          line-height: 1.35;
        }
        .field-card p {
          margin: 30px 0 0;
          color: var(--muted);
          font-size: 13px;
        }
        .source-link {
          margin: 0.3em 0 1em;
          color: var(--muted);
          font-size: 13px;
          font-weight: 400;
          line-height: 1.5;
        }
        .source-link a {
          border-bottom: 1px solid currentColor;
        }
        .source-link a:hover {
          color: var(--ink);
        }
        .selected-layout {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
          gap: 38px 26px;
          padding-top: 42px;
        }
        .feature-card {
          display: grid;
          grid-template-rows: auto 1fr;
          gap: 18px;
          align-content: start;
        }
        .feature-copy,
        .work-card-copy,
        .archive-main {
          display: grid;
          grid-template-rows: auto minmax(3.4em, auto) auto auto;
          align-content: start;
        }
        .card-type {
          margin: 0 0 8px;
          color: var(--muted);
          font-size: 13px;
          font-weight: 400;
          line-height: 1.4;
        }
        .feature-card h2 {
          max-width: 760px;
          margin: 0;
          color: var(--ink);
          font-size: 21px;
          font-weight: 300;
          line-height: 1.3;
          letter-spacing: 0;
        }
        .card-meta-line {
          margin: 10px 0 0;
          color: var(--muted);
          font-size: 13px;
          font-weight: 400;
          line-height: 1.45;
        }
        .summary {
          color: var(--ink);
          max-width: 760px;
          font-size: 16px;
          font-weight: 400;
          line-height: 1.9;
          margin: 1em 0;
        }
        .selected-layout .summary {
          color: var(--muted);
          font-size: 14px;
          line-height: 1.75;
        }
        .archive-controls {
          display: grid;
          grid-template-columns: minmax(0, 1fr) auto;
          gap: 28px;
          align-items: start;
          padding: 28px 0;
          border-bottom: 1px solid var(--line);
        }
        .type-filter-group {
          display: flex;
          flex-wrap: wrap;
          gap: 16px 22px;
        }
        .view-toggle {
          display: flex;
          gap: 12px;
          align-items: center;
        }
        .view-button {
          display: inline-grid;
          width: 32px;
          height: 32px;
          place-items: center;
          border: 1px solid transparent;
          border-radius: 999px;
          padding: 0;
        }
        .view-button:hover,
        .view-button.is-active {
          border-color: var(--line);
          background: var(--panel);
        }
        .view-icon {
          display: block;
          width: 17px;
          height: 17px;
          color: currentColor;
        }
        .view-icon-grid {
          background:
            radial-gradient(currentColor 1.6px, transparent 1.8px) 0 0 / 33.333% 33.333%;
        }
        .view-icon-list {
          position: relative;
        }
        .view-icon-list::before {
          content: "";
          position: absolute;
          left: 0;
          right: 0;
          top: 3px;
          height: 1px;
          background: currentColor;
          box-shadow: 0 5px 0 currentColor, 0 10px 0 currentColor;
        }
        .archive-view { display: none; }
        .archive-view.is-active { display: block; }
        .archive-grid-view.is-active {
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
          gap: 34px 22px;
          padding-top: 36px;
        }
        .work-card {
          display: grid;
          grid-template-rows: auto 1fr;
          gap: 14px;
          align-content: start;
        }
        .work-card-copy h2 {
          margin: 0;
          color: var(--ink);
          font-size: 17px;
          font-weight: 300;
          line-height: 1.35;
        }
        .work-meta,
        .meta {
          display: flex;
          flex-wrap: wrap;
          gap: 8px 12px;
          margin-top: 12px;
          color: var(--muted);
          font-size: 13px;
          font-weight: 400;
          line-height: 1.45;
        }
        .archive-list {
          display: grid;
          border-top: 1px solid var(--line);
        }
        .archive-item {
          display: grid;
          grid-template-columns: 132px minmax(0, 1fr);
          gap: 30px;
          padding: 24px 0;
          border-bottom: 1px solid var(--line);
          align-items: start;
          transition: border-color 160ms var(--ease), background 160ms var(--ease);
        }
        .archive-image {
          width: 100%;
          aspect-ratio: 3 / 4;
          display: grid;
          place-items: center;
        }
        .grid-image,
        .feature-image {
          aspect-ratio: 3 / 4;
          display: grid;
          place-items: center;
        }
        .grid-image .image-main,
        .feature-image .image-main,
        .archive-image .image-main {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
        .grid-image,
        .feature-image,
        .archive-image,
        .article-hero-image { box-shadow: 0 18px 54px var(--image-soft); }
        .archive-image-placeholder {
          display: grid;
          place-items: center;
          color: var(--faint);
          background: var(--panel);
        }
        .image-placeholder {
          display: grid;
          place-items: center;
          border-radius: var(--radius);
          background: var(--panel-strong);
          color: var(--faint);
          font-size: 13px;
        }
        .archive-main h3 {
          max-width: 880px;
          margin: 0;
          color: var(--ink);
          font-size: 18px;
          font-weight: 300;
          line-height: 1.35;
          letter-spacing: 0;
        }
        .back-link {
          display: inline-block;
          margin-bottom: 32px;
          color: var(--muted);
          font-size: 13px;
          border-bottom: 1px solid currentColor;
        }
        .article-read {
          display: grid;
          grid-template-columns: minmax(280px, 400px) minmax(0, 720px);
          gap: 64px;
          align-items: start;
        }
        .article-visual {
          position: sticky;
          top: 92px;
          display: grid;
          gap: 20px;
          max-height: calc(100dvh - 120px);
          overflow: auto;
          padding-bottom: 4px;
        }
        .article-hero-image {
          position: relative;
          overflow: hidden;
          border-radius: var(--radius);
          background: var(--panel);
        }
        .article-toc {
          padding-top: 18px;
          border-top: 1px solid var(--line);
        }
        .article-toc > span {
          display: block;
          margin-bottom: 12px;
          color: var(--muted);
          font-size: 13px;
        }
        .toc-list {
          display: grid;
          gap: 8px;
          overflow: hidden;
        }
        .toc-link,
        .toc-empty {
          color: var(--muted);
          font-size: 13px;
          line-height: 1.45;
          transform-origin: left center;
          transition: color 260ms var(--ease), transform 320ms var(--ease);
        }
        .toc-link:hover {
          color: var(--ink);
          transform: scale(1.045) translateX(3px);
        }
        .toc-list:has(.toc-link:hover) .toc-link:not(:hover) {
          transform: translateY(1px);
        }
        .toc-level-3,
        .toc-level-4 {
          padding-left: 14px;
        }
        .article-content {
          max-width: 720px;
          padding-left: 24px;
        }
        .article-header {
          padding-bottom: 0;
        }
        .article-header h1 {
          font-size: 42px;
          line-height: 1.14;
          margin-bottom: 0.22em;
        }
        .article-source-link {
          margin: 18px 0 0;
          color: var(--muted);
          font-size: 16px;
          font-weight: 400;
          line-height: 1.9;
        }
        .article-keyline {
          margin: 28px 0 0;
          color: var(--ink);
          font-size: 16px;
          font-weight: 400;
          line-height: 1.9;
        }
        .article-divider {
          margin: 28px 0 0;
          border-top: 1px solid var(--line);
        }
        .article-source-link a {
          border-bottom: 1px solid currentColor;
        }
        .article-source-link a:hover {
          color: var(--ink);
        }
        .article-source-link + .body {
          margin-top: 24px;
        }
        .body { margin-top: 44px; }
        .body h2,
        .body h3,
        .body h4 {
          scroll-margin-top: 92px;
          margin: 2.2em 0 0.72em;
          color: var(--ink);
          font-weight: 300;
          line-height: 1.28;
          letter-spacing: 0;
        }
        .body h2 { font-size: 24px; padding-top: 0.25em; }
        .body h3 { font-size: 20px; }
        .body h4 { font-size: 18px; }
        .body p {
          margin: 1.12em 0;
          color: var(--ink);
          font-size: 16px;
          font-weight: 400;
          line-height: 1.9;
          text-indent: 0;
        }
        .contact-grid {
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 18px;
          padding-top: 42px;
        }
        .contact-block {
          min-height: 150px;
          padding: 22px;
          border: 1px solid var(--line);
          border-radius: var(--radius);
          background: var(--panel);
        }
        .contact-block span {
          color: var(--muted);
          font-size: 13px;
        }
        .contact-block p {
          margin: 18px 0 0;
          color: var(--ink);
          font-size: 20px;
          font-weight: 300;
        }
        .contact-block p > a {
          border-bottom: 1px solid currentColor;
        }
        .social-list {
          display: grid;
          gap: 12px;
          margin-top: 20px;
        }
        .social-item {
          display: grid;
          grid-template-columns: 34px minmax(0, 1fr);
          gap: 12px;
          align-items: center;
          width: 100%;
          border: 1px solid var(--line);
          border-radius: 12px;
          padding: 10px 12px;
          background: transparent;
          color: var(--ink);
          cursor: pointer;
          text-align: left;
          transition: border-color 180ms var(--ease), background 180ms var(--ease), transform 180ms var(--ease);
        }
        .social-item:hover {
          border-color: var(--ink);
          background: var(--paper);
          transform: translateY(-1px);
        }
        .social-item img {
          width: 34px;
          height: 34px;
          border-radius: 9px;
          object-fit: cover;
        }
        .social-item span {
          color: var(--ink);
          font-size: 14px;
          line-height: 1.45;
        }
        .copy-social[data-copied="true"] span::after {
          content: " 已复制";
          color: var(--muted);
        }
        .download-link {
          display: inline-block;
          border-bottom: 1px solid currentColor;
        }
        .download-link.is-disabled {
          color: var(--muted);
          border-bottom: 0;
        }
        .empty { color: var(--muted); margin: 0.5em 0; }
        @media (max-width: 900px) {
          .about-hero,
          .feature-primary,
          .article-read,
          .archive-controls {
            grid-template-columns: 1fr;
          }
          .about-portrait { justify-items: start; }
          .selected-layout,
          .archive-grid-view.is-active,
          .field-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
          }
          .article-visual {
            position: relative;
            top: auto;
            max-height: none;
            overflow: visible;
          }
          .article-content {
            max-width: none;
            padding-left: 0;
          }
        }
        @media (max-width: 640px) {
          .site-header {
            position: relative;
            align-items: flex-start;
            flex-direction: column;
            gap: 12px;
            width: min(100% - 30px, 1120px);
            padding: 18px 0 16px;
          }
          .main-nav {
            width: 100%;
            justify-content: flex-start;
            gap: 14px;
            overflow-x: auto;
            padding-bottom: 2px;
          }
          .shell { width: min(100% - 30px, 1120px); padding-top: 28px; padding-bottom: 72px; }
          .site-footer {
            width: min(100% - 30px, 1120px);
            flex-direction: column;
            align-items: flex-start;
            gap: 6px;
          }
          .about-hero, .page-title { padding: 42px 0 32px; }
          .about-hero h1, .page-title h1, .article-header h1 { font-size: 34px; line-height: 1.16; }
          .hero-bio { font-size: 16px; line-height: 1.78; }
          .about-dashboard,
          .selected-layout,
          .archive-grid-view.is-active,
          .field-grid,
          .contact-grid {
            grid-template-columns: 1fr;
          }
          .about-dashboard div,
          .about-dashboard div:last-child {
            border-right: 0;
            border-bottom: 1px solid var(--line);
            padding: 20px 0;
          }
          .about-dashboard div:last-child { border-bottom: 0; }
          .page-about .about-dashboard div { border-bottom: 0; }
          .feature-card h2 { font-size: 24px; }
          .feature-primary h2 { font-size: 30px; }
          .archive-item { grid-template-columns: 92px minmax(0, 1fr); gap: 14px; padding: 22px 0; }
          .archive-image { grid-row: 1; }
          .archive-main h3 { font-size: 19px; }
          .view-toggle { justify-content: flex-start; }
          .body h2 { font-size: 22px; }
          .body h3 { font-size: 19px; }
          .body p { font-size: 16px; line-height: 1.85; }
        }
        @media (prefers-reduced-motion: reduce) {
          html { scroll-behavior: auto; }
          *,
          *::before,
          *::after {
            transition-duration: 1ms !important;
            animation-duration: 1ms !important;
          }
        }