@font-face {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/playfair-400.woff') format('woff');
  }
  @font-face {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/playfair-700.woff') format('woff');
  }
  @font-face {
    font-family: 'Playfair Display';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/playfair-400i.woff') format('woff');
  }
  @font-face {
    font-family: 'Noto Serif SC';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/noto-serif-400.woff') format('woff');
  }
  @font-face {
    font-family: 'Noto Serif SC';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/noto-serif-600.woff') format('woff');
  }
  @font-face {
    font-family: 'Noto Serif SC';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/noto-serif-700.woff') format('woff');
  }
  @font-face {
    font-family: 'Noto Sans SC';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../fonts/noto-sans-300.woff') format('woff');
  }
  @font-face {
    font-family: 'Noto Sans SC';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/noto-sans-400.woff') format('woff');
  }
  @font-face {
    font-family: 'Noto Sans SC';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/noto-sans-500.woff') format('woff');
  }

  :root {
    --bg: #f5f3ef;
    --bg-deep: #ede9e2;
    --ink: #1a1a1a;
    --ink-soft: rgb(93, 91, 91);
    --line: rgba(26, 26, 26, 0.14);
    --ok: #3d7a52;
    --err: #b0462f;
    --warn: #a67c1a;
    --cinnabar: #a64032;
    --cinnabar-soft: rgba(166, 64, 50, 0.22);
    --header-bg: rgba(245, 243, 239, 0.86);
    --modal-mask: rgba(26, 26, 26, 0.42);
    --alert-shadow: rgba(26, 26, 26, 0.12);
    --serif: 'Playfair Display', 'Noto Serif SC', 'Songti SC', 'SimSun', serif;
    --sans: 'Noto Sans SC', -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
  }

  [data-theme="dark"] {
    --bg: #181614;
    --bg-deep: #211e1a;
    --ink: #ece7de;
    --ink-soft: #a39d92;
    --line: rgba(236, 231, 222, 0.15);
    --ok: #6fae85;
    --err: #d4735c;
    --warn: #d3a94e;
    --cinnabar: #d06a5a;
    --cinnabar-soft: rgba(208, 106, 90, 0.24);
    --header-bg: rgba(24, 22, 20, 0.86);
    --modal-mask: rgba(0, 0, 0, 0.55);
    --alert-shadow: rgba(0, 0, 0, 0.4);
  }

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

  html, body { overflow-x: clip; }

  html.lenis, html.lenis body { height: auto; }
  .lenis.lenis-smooth { scroll-behavior: auto !important; }

  body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--sans);
    font-weight: 300;
    font-size: 1.05rem;
    line-height: 1.9;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    transition: background-color 0.5s ease, color 0.5s ease;
  }

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

  /* ————— 纸感噪点 ————— */
  body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 20000;
    pointer-events: none;
    opacity: 0.038;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  }
  [data-theme="dark"] body::after { opacity: 0.055; }

  /* ————— 主题圆形扩散过渡 ————— */
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
  ::view-transition-old(root) { z-index: 1; }
  ::view-transition-new(root) { z-index: 2147483646; }

  /* ————— 墨点光标（仅桌面端） ————— */
  .cursor-dot, .cursor-ring {
    position: fixed;
    top: 0; left: 0;
    pointer-events: none;
    z-index: 20001;
    border-radius: 50%;
    mix-blend-mode: difference;
    opacity: 0;
  }
  .cursor-dot { width: 6px; height: 6px; background: #fff; }
  .cursor-ring {
    width: 32px; height: 32px;
    border: 1px solid rgba(255, 255, 255, 0.9);
    transition: width 0.3s var(--ease), height 0.3s var(--ease);
  }
  .cursor-ring.hover { width: 54px; height: 54px; }
  @media (hover: none), (pointer: coarse) {
    .cursor-dot, .cursor-ring { display: none; }
  }

  a { color: inherit; text-decoration: none; }
  button { font-family: inherit; cursor: pointer; }
  .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

  /* ————— 顶栏 ————— */
  header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 100;
    padding: 2.2rem 4vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    transition: padding 0.45s var(--ease), background 0.45s var(--ease), border-color 0.45s var(--ease);
    border-bottom: 1px solid transparent;
  }
  header.scrolled {
    padding: 1rem 4vw;
    background: var(--header-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom-color: var(--line);
  }
  .brand {
    font-family: var(--serif);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.06em;
    white-space: nowrap;
  }
  .brand em { font-style: normal; color: var(--ink-soft); font-weight: 400; }
  .header-right { display: flex; align-items: center; gap: 2.4rem; }
  nav { display: flex; gap: 2.4rem; }
  nav a {
    font-size: 0.82rem;
    font-weight: 400;
    letter-spacing: 0.18em;
    color: var(--ink-soft);
    position: relative;
    padding-bottom: 3px;
    transition: color 0.3s;
  }
  nav a::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 100%;
    height: 1px;
    background: var(--ink);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.35s var(--ease);
  }
  nav a:hover { color: var(--ink); }
  nav a:hover::after { transform: scaleX(1); transform-origin: left; }
  nav a.active { color: var(--ink); }
  nav a.active::after {
    background: var(--cinnabar);
    transform: scaleX(1);
    transform-origin: left;
  }

  /* 切换按钮 */
  .toggles { display: flex; align-items: center; gap: 1.2rem; }
  .toggles button {
    background: none;
    border: none;
    color: var(--ink-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.3s, transform 0.4s var(--ease);
    padding: 2px;
  }
  .toggles button:hover { color: var(--ink); }
  #themeToggle svg { width: 17px; height: 17px; display: block; }
  #themeToggle:hover { transform: rotate(24deg); }
  #themeToggle .icon-moon { display: none; }
  [data-theme="dark"] #themeToggle .icon-sun { display: none; }
  [data-theme="dark"] #themeToggle .icon-moon { display: block; }
  #langToggle {
    font-family: var(--serif);
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    border-bottom: 1px solid transparent !important;
    padding-bottom: 2px !important;
  }
  #langToggle:hover { border-bottom-color: var(--ink) !important; }

  /* ————— 通用 ————— */
  .wrap { max-width: 1500px; margin: 0 auto; padding: 0 4vw; }

  .kicker {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 2.6rem;
  }
  .kicker::before {
    content: '';
    width: 60px;
    height: 1px;
    background: var(--ink);
    flex-shrink: 0;
  }
  .kicker .en { font-family: var(--serif); font-style: italic; letter-spacing: 0.12em; text-transform: none; font-size: 0.85rem; }

  [data-reveal] {
    opacity: 0;
    transform: translateY(36px);
    transition: opacity 1s var(--ease), transform 1s var(--ease);
  }
  [data-reveal].in { opacity: 1; transform: none; }

  /* ————— 首屏 ————— */
  .hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 8rem;
    position: relative;
  }
  .hero h1 {
    font-family: var(--serif);
    font-weight: 700;
    font-size: clamp(3.2rem, 9vw, 8.2rem);
    line-height: 1.08;
    letter-spacing: 0.01em;
    visibility: hidden;
  }
  .hero.loaded h1 { visibility: visible; }
  [data-lang="en"] .hero h1 { font-size: clamp(2.7rem, 7.6vw, 7rem); }
  .hero h1 .line { display: block; overflow: hidden; }
  .hero h1 .word { display: inline-block; white-space: nowrap; }
  .hero h1 .accent { color: var(--cinnabar); }
  .hero h1 .ch {
    display: inline-block;
    opacity: 0;
    transform: translateY(0.9em);
    transition: opacity 0.85s var(--ease), transform 1.05s var(--ease);
    will-change: opacity, transform;
  }
  .hero.loaded h1 .ch { opacity: 1; transform: none; }
  .hero h1 em {
    font-style: italic;
    font-weight: 400;
    color: var(--ink-soft);
  }

  .accent-key {
    color: var(--cinnabar);
    font-weight: 500;
    box-shadow: inset 0 -0.22em var(--cinnabar-soft);
  }
  .hero-sub {
    margin-top: 2.8rem;
    display: flex;
    gap: 3rem;
    align-items: flex-start;
    flex-wrap: wrap;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 1s var(--ease) 0.55s, transform 1s var(--ease) 0.55s;
  }
  .hero.loaded .hero-sub { opacity: 1; transform: none; }
  .hero-sub p { max-width: 34em; color: var(--ink-soft); font-size: 1rem; }
  .hero-sub .meta {
    font-size: 0.78rem;
    letter-spacing: 0.22em;
    color: var(--ink-soft);
    line-height: 2.2;
  }
  .hero-rule {
    margin-top: 4rem;
    height: 1px;
    background: var(--line);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1.4s var(--ease) 0.7s;
  }
  .hero.loaded .hero-rule { transform: none; }

  .scroll-hint {
    position: absolute;
    bottom: 2.4rem;
    left: 4vw;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    font-size: 0.72rem;
    letter-spacing: 0.3em;
    color: var(--ink-soft);
  }
  .scroll-hint i {
    display: block;
    width: 1px;
    height: 44px;
    background: var(--ink-soft);
    animation: drip 2.2s var(--ease) infinite;
    transform-origin: top;
  }
  @keyframes drip {
    0% { transform: scaleY(0); }
    45% { transform: scaleY(1); transform-origin: top; }
    46% { transform-origin: bottom; }
    100% { transform: scaleY(0); transform-origin: bottom; }
  }

  /* ————— 关于 ————— */
  section { padding: 9rem 0; }
  .about-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: clamp(1rem, 3vw, 2rem);
  }
  .about-grid .kicker { grid-column: 1 / 5; }
  .about-body { grid-column: 5 / 13; min-width: 0; }
  .about-body .lede {
    font-family: var(--serif);
    font-size: clamp(1.6rem, 2.6vw, 2.3rem);
    font-weight: 400;
    line-height: 1.65;
    margin-bottom: 2.4rem;
  }
  .about-body .cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.6rem;
    color: var(--ink-soft);
    font-size: 0.98rem;
  }
  .about-body .cols > p { min-width: 0; }
  .tags {
    margin-top: 3rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 2rem;
    font-size: 0.8rem;
    letter-spacing: 0.14em;
    color: var(--ink-soft);
  }
  .tags span::before {
    content: '';
    display: inline-block;
    width: 7px; height: 7px;
    background: var(--ink);
    margin-right: 0.7rem;
    vertical-align: 1px;
    transition: background-color 0.5s ease;
  }

  /* ————— 作品 ————— */
  .works { background: var(--bg-deep); transition: background-color 0.5s ease; }
  .works-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 1rem;
  }
  .featured {
    margin-top: 3.5rem;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: clamp(1rem, 3vw, 2rem);
    align-items: center;
  }
  .featured > * { min-width: 0; }
  .featured-info { grid-column: 1 / 10; }
  .featured-info .cat {
    font-size: 0.75rem;
    letter-spacing: 0.3em;
    color: var(--ink-soft);
    margin-bottom: 1.2rem;
    display: flex;
    align-items: baseline;
    gap: 1rem;
  }
  .featured-info .cat .num {
    font-family: var(--serif);
    font-style: italic;
    font-size: 0.95rem;
    letter-spacing: 0.05em;
  }
  .featured-info h3 {
    font-family: var(--serif);
    font-weight: 700;
    font-size: clamp(1.9rem, 3.4vw, 2.9rem);
    line-height: 1.25;
    margin-bottom: 1.4rem;
  }
  .featured-info p { color: var(--ink-soft); font-size: 0.98rem; margin-bottom: 2rem; max-width: 44em; }
  .visit-link {
    display: inline-block;
    font-family: var(--serif);
    font-size: 1.05rem;
    border-bottom: 1px solid var(--ink);
    padding-bottom: 0.3rem;
    transition: border-width 0.2s ease;
  }
  .visit-link:hover { border-bottom-width: 3px; }
  .visit-link i { font-style: normal; margin-left: 0.6rem; }

  .work-row {
    display: grid;
    grid-template-columns: 5rem 1fr auto auto;
    align-items: baseline;
    gap: clamp(1rem, 3vw, 2rem);
    padding: 2.4rem 0;
    border-top: 1px solid var(--line);
    margin-top: 4.5rem;
  }
  .work-row > * { min-width: 0; }
  .work-row .idx {
    font-family: var(--serif);
    font-style: italic;
    color: var(--ink-soft);
    font-size: 0.95rem;
    transition: color 0.3s;
  }
  .work-row .title {
    font-family: var(--serif);
    font-weight: 600;
    font-size: clamp(1.5rem, 2.8vw, 2.3rem);
    line-height: 1.3;
    transition: transform 0.5s var(--ease);
  }
  .work-row .cat2, .work-row .year {
    font-size: 0.8rem;
    letter-spacing: 0.18em;
    color: var(--ink-soft);
    white-space: nowrap;
  }
  .work-row:hover .title { transform: translateX(1.4rem); }
  .work-row:hover .idx { color: var(--ink); }
  .work-row .arrow {
    display: inline-block;
    margin-left: 1.2rem;
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity 0.4s, transform 0.5s var(--ease);
    font-family: var(--serif);
    font-size: 1.3rem;
  }
  .work-row:hover .arrow { opacity: 1; transform: none; }
  .work-row .desc {
    display: block;
    max-height: 0;
    overflow: hidden;
    color: var(--ink-soft);
    font-size: 0.95rem;
    max-width: 44em;
    font-family: var(--sans);
    font-weight: 300;
    transition: max-height 0.55s var(--ease), padding-top 0.55s var(--ease);
  }
  .work-row:hover .desc { max-height: 12em; padding-top: 1rem; }

  /* ————— 联系 ————— */
  .contact h2 {
    font-family: var(--serif);
    font-weight: 700;
    font-size: clamp(2.6rem, 7vw, 6rem);
    line-height: 1.15;
    margin-bottom: 3rem;
  }
  .contact h2 em {
    position: relative;
    font-style: italic;
    font-weight: 400;
    color: var(--ink-soft);
    transition: color 0.35s var(--ease);
  }
  .contact h2 em::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0.02em;
    width: 100%;
    height: 1px;
    background: var(--cinnabar);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s var(--ease);
  }
  .contact h2 em:hover { color: var(--cinnabar); }
  .contact h2 em:hover::after { transform: scaleX(1); }

  .contact-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: clamp(1rem, 3vw, 2rem);
    align-items: start;
  }
  .contact-grid > * { min-width: 0; }
  .contact-left { grid-column: 1 / 7; }
  .contact-right { grid-column: 8 / 13; }

  .email-block .lbl {
    font-size: 0.75rem;
    letter-spacing: 0.3em;
    color: var(--ink-soft);
    margin-bottom: 1rem;
  }
  .email-line {
    font-family: var(--serif);
    font-size: clamp(1.3rem, 2.6vw, 2rem);
  }
  .email-masked { color: var(--ink-soft); letter-spacing: 0.08em; }
  .email-real { color: var(--ink); cursor: pointer; border-bottom: 1px solid var(--ink); padding-bottom: 0.25rem; display: inline-block; }
  .reveal-email-btn {
    margin-top: 1.1rem;
    background: none;
    border: 1px solid var(--ink);
    color: var(--ink);
    font-size: 0.8rem;
    letter-spacing: 0.18em;
    padding: 0.7rem 1.6rem;
    transition: background 0.35s var(--ease), color 0.35s var(--ease), border-color 0.5s ease;
  }
  .reveal-email-btn:hover { background: var(--ink); color: var(--bg); }
  .reveal-email-btn.verified {
    border-color: var(--ok);
    color: var(--ok);
    cursor: default;
    background: none;
  }

  /* 联系表单 */
  .contact-form h3 {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 1.5rem;
    margin-bottom: 1.8rem;
  }
  .contact-form input,
  .contact-form textarea {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--line);
    font-family: var(--sans);
    font-weight: 300;
    font-size: 1rem;
    color: var(--ink);
    padding: 0.9rem 0;
    margin-bottom: 1.4rem;
    outline: none;
    resize: vertical;
    transition: border-color 0.3s;
  }
  .contact-form input:focus,
  .contact-form textarea:focus { border-bottom-color: var(--ink); }
  .contact-form input::placeholder,
  .contact-form textarea::placeholder { color: var(--ink-soft); opacity: 0.55; letter-spacing: 0.06em; }
  .contact-form button[type="submit"] {
    background: var(--ink);
    color: var(--bg);
    border: 1px solid var(--ink);
    font-size: 0.85rem;
    letter-spacing: 0.24em;
    padding: 1rem 2.8rem;
    transition: background 0.35s var(--ease), color 0.35s var(--ease), border-color 0.5s ease;
  }
  .contact-form button[type="submit"]:hover { background: transparent; color: var(--ink); }
  .contact-form button[type="submit"]:disabled { opacity: 0.5; cursor: wait; }

  /* ————— 页脚 ————— */
  footer {
    border-top: 1px solid var(--line);
    padding: 2.2rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.75rem;
    letter-spacing: 0.16em;
    color: var(--ink-soft);
  }
  footer a { border-bottom: 1px solid transparent; transition: border-color 0.3s; }
  footer a:hover { border-bottom-color: var(--ink-soft); }
  .powered-by {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    letter-spacing: 0.1em;
  }
  .powered-by img {
    width: 14px;
    height: 14px;
    opacity: 0.75;
    transition: opacity 0.3s, transform 0.35s var(--ease);
  }
  .powered-by:hover img { opacity: 1; transform: scale(1.12); }

  /* ————— 验证模态框 ————— */
  .verification-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: var(--modal-mask);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
  }
  .verification-modal.show { display: flex; }
  .modal-content {
    background: var(--bg);
    border: 1px solid var(--line);
    width: 100%;
    max-width: 420px;
    animation: modalUp 0.4s var(--ease);
  }
  @keyframes modalUp {
    from { opacity: 0; transform: translateY(26px); }
    to { opacity: 1; transform: none; }
  }
  .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.4rem 1.6rem;
    border-bottom: 1px solid var(--line);
  }
  .modal-header h3 {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 1.15rem;
  }
  .close-modal {
    cursor: pointer;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--ink-soft);
    transition: color 0.3s;
  }
  .close-modal:hover { color: var(--ink); }
  .modal-body { padding: 1.6rem; }
  .modal-body > p {
    font-size: 0.92rem;
    color: var(--ink-soft);
    margin-bottom: 1.2rem;
    line-height: 1.7;
  }
  .verification-input-group { display: flex; gap: 0.8rem; }
  .verification-input-group input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--line);
    font-family: var(--sans);
    font-size: 1.1rem;
    color: var(--ink);
    padding: 0.6rem 0;
    outline: none;
    transition: border-color 0.3s;
  }
  .verification-input-group input:focus { border-bottom-color: var(--ink); }
  .verify-btn {
    background: var(--ink);
    color: var(--bg);
    border: 1px solid var(--ink);
    font-size: 0.82rem;
    letter-spacing: 0.2em;
    padding: 0.6rem 1.4rem;
    transition: background 0.35s var(--ease), color 0.35s var(--ease);
  }
  .verify-btn:hover { background: transparent; color: var(--ink); }
  .verification-alternatives {
    margin-top: 1.6rem;
    padding-top: 1.3rem;
    border-top: 1px solid var(--line);
  }
  .alt-text { font-size: 0.8rem; color: var(--ink-soft); margin-bottom: 0.8rem; }
  .alt-buttons { display: flex; gap: 0.8rem; }
  .alt-btn {
    flex: 1;
    background: none;
    border: 1px solid var(--line);
    color: var(--ink-soft);
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    padding: 0.65rem 0.5rem;
    transition: border-color 0.3s, color 0.3s;
  }
  .alt-btn:hover { border-color: var(--ink); color: var(--ink); }

  /* 滑块验证 */
  .slide-container { margin: 1.2rem 0 0.4rem; }
  .slide-track {
    position: relative;
    width: 100%;
    height: 46px;
    background: var(--bg-deep);
    border: 1px solid var(--line);
    overflow: hidden;
    transition: background-color 0.5s ease;
  }
  .slide-thumb {
    position: absolute;
    top: 2px; left: 2px;
    width: 42px; height: 40px;
    background: var(--ink);
    color: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    user-select: none;
    font-size: 1rem;
    z-index: 2;
    touch-action: none;
  }
  .slide-thumb:active { cursor: grabbing; }
  .slide-thumb.success { background: var(--ok); }
  .slide-text {
    text-align: center;
    font-size: 0.82rem;
    color: var(--ink-soft);
    margin-top: 0.9rem;
    letter-spacing: 0.12em;
  }

  /* 点选验证 */
  .click-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.8rem;
    margin-top: 1rem;
  }
  .click-number {
    background: var(--bg-deep);
    border: 1px solid var(--line);
    font-family: var(--serif);
    font-size: 1.5rem;
    color: var(--ink);
    padding: 1.1rem 0;
    text-align: center;
    cursor: pointer;
    transition: background 0.25s, color 0.25s, transform 0.2s;
  }
  .click-number:hover { transform: translateY(-2px); }
  .click-number.correct { background: var(--ok); color: var(--bg); border-color: var(--ok); }
  .click-number.wrong { background: var(--err); color: var(--bg); border-color: var(--err); }

  /* ————— 提示条 ————— */
  .custom-alert {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 10001;
    font-size: 0.88rem;
    max-width: 320px;
    padding: 0.9rem 1.3rem;
    background: var(--bg);
    border: 1px solid var(--line);
    border-left: 3px solid var(--ink);
    color: var(--ink);
    box-shadow: 0 10px 34px var(--alert-shadow);
    animation: alertIn 0.4s var(--ease);
  }
  .custom-alert.alert-success { border-left-color: var(--ok); }
  .custom-alert.alert-error { border-left-color: var(--err); }
  .custom-alert.alert-warning { border-left-color: var(--warn); }
  .custom-alert.hide { animation: alertOut 0.35s var(--ease) forwards; }
  @keyframes alertIn {
    from { opacity: 0; transform: translateX(30px); }
    to { opacity: 1; transform: none; }
  }
  @keyframes alertOut {
    to { opacity: 0; transform: translateX(30px); }
  }

  /* ————— 字数统计 ————— */
  .char-count {
    text-align: right;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    color: var(--ink-soft);
    opacity: 0.6;
    margin-top: -1.2rem;
    margin-bottom: 1.6rem;
    transition: color 0.3s, opacity 0.3s;
  }
  .char-count.near-limit { color: var(--cinnabar); opacity: 1; }

  /* ————— 返回顶部：贴右缘可伸缩 ————— */
  .to-top {
    position: fixed;
    right: 0;
    bottom: calc(3rem + env(safe-area-inset-bottom, 0px));
    z-index: 900;
    height: 46px;
    padding: 0 14px 0 13px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-right: none;
    border-radius: 23px 0 0 23px;
    color: var(--cinnabar);
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    /* 收进右侧：只露出左端一小截（含墨点） */
    transform: translateX(calc(100% - 17px));
    opacity: 0;
    pointer-events: none;
    transition: transform 0.45s var(--ease), opacity 0.35s var(--ease),
                border-color 0.3s, box-shadow 0.3s;
  }
  .to-top .ink-dot {
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cinnabar);
  }
  .to-top.show { opacity: 1; pointer-events: auto; }
  /* 悬停 / 触屏点开展开 */
  .to-top.show:hover,
  .to-top.show:focus-visible,
  .to-top.show.open {
    transform: translateX(0);
    border-color: var(--cinnabar);
    box-shadow: -6px 0 18px var(--alert-shadow, rgba(0,0,0,0.06));
  }
  .to-top.show:hover svg,
  .to-top.show.open svg { transform: translateY(-1px); }
  .to-top svg { transition: transform 0.3s var(--ease); }

  /* ————— 键盘焦点可见性 ————— */
  a:focus-visible,
  button:focus-visible,
  .slide-thumb:focus-visible,
  .click-number:focus-visible {
    outline: 2px solid var(--cinnabar);
    outline-offset: 3px;
    border-radius: 2px;
  }
  .contact-form input:focus-visible,
  .contact-form textarea:focus-visible,
  .verification-input-group input:focus-visible {
    outline: none;
    border-bottom-color: var(--cinnabar);
  }

  /* 移动端底部安全区：页脚不贴 home 指示条 */
  footer { padding-bottom: calc(2.2rem + env(safe-area-inset-bottom, 0px)); }

  /* ————— 打印样式：干净的黑白排版 ————— */
  @media print {
    :root, [data-theme="dark"] {
      --bg: #ffffff;
      --bg-deep: #ffffff;
      --ink: #000000;
      --ink-soft: #444444;
      --line: #cccccc;
      --cinnabar: #8a3324;
    }
    body::after, .cursor-dot, .cursor-ring, .to-top,
    .toggles, .custom-alert, .verification-modal,
    .contact-form, header .brand em { display: none !important; }
    header { position: static; border-bottom: 1px solid #000; }
    section { padding: 1.6rem 0; }
    [data-reveal], .hero h1, .ch, .word { opacity: 1 !important; transform: none !important; visibility: visible !important; }
    .work-row .desc { max-height: none !important; }
    a { text-decoration: none; color: inherit; }
    footer { border-top: 1px solid #000; }
  }

  @media (max-width: 860px) {
    header { gap: 0.8rem; }
    .header-right { gap: 1.1rem; }
    nav { gap: 1.1rem; }
    nav a { letter-spacing: 0.08em; }
    .toggles { gap: 0.8rem; }
    .brand { font-size: 0.95rem; }
    .brand em { display: none; }
    .about-grid .kicker { grid-column: 1 / 13; margin-bottom: 1rem; }
    .about-body { grid-column: 1 / 13; }
    .about-body .cols { grid-template-columns: 1fr; }
    .featured-info { grid-column: 1 / 13; }
    .work-row { grid-template-columns: 3rem 1fr; margin-top: 3rem; }
    .work-row .cat2, .work-row .year { display: none; }
    .work-row .desc { max-height: none; padding-top: 0.9rem; }
    .work-row:hover .title { transform: none; }
    .work-row:hover .desc { padding-top: 0.9rem; }
    .contact-left { grid-column: 1 / 13; margin-bottom: 3rem; }
    .contact-right { grid-column: 1 / 13; }
    section { padding: 6rem 0; }
  }

  @media (max-width: 380px) {
    nav { gap: 0.7rem; }
    nav a { font-size: 0.76rem; }
    .header-right { gap: 0.7rem; }
    .toggles { gap: 0.55rem; }
  }