:root {
      color-scheme: dark;
      --void: #000000;
      --surface: rgba(255, 255, 255, 0.035);
      --line: rgba(255, 255, 255, 0.08);
      --line-strong: rgba(255, 255, 255, 0.16);
      --text: #f4f5f7;
      --text-soft: rgba(244, 245, 247, 0.72);
      --text-muted: rgba(244, 245, 247, 0.52);
      --orange: #f0873e; --accent-ink: #f0873e;
      --orange-hot: #ffb06a;
      --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
      --display: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
      --body: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
      --label: "Archivo", "Noto Sans SC", "PingFang SC", sans-serif;
      --header-h: 72px;
      --max: 1240px;
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }

    /* ---------- 滚动条：细、低调，悬停回到轨道橙 ---------- */
    :root {
      --sb-thumb: rgba(255, 255, 255, .14);
      --sb-thumb-hover: rgba(240, 135, 62, .62);
    }
    html.light {
      --sb-thumb: rgba(17, 17, 17, .2);
      --sb-thumb-hover: rgba(17, 17, 17, .5);
    }
    /* Firefox 走标准属性；Chrome/Safari 走 ::-webkit-scrollbar，两者互斥才不会互相顶掉 */
    @supports not selector(::-webkit-scrollbar) {
      html { scrollbar-width: thin; scrollbar-color: var(--sb-thumb) transparent; }
    }
    html::-webkit-scrollbar { width: 12px; height: 12px; }
    html::-webkit-scrollbar-track { background: transparent; }
    html::-webkit-scrollbar-thumb {
      background: var(--sb-thumb);
      border: 3px solid transparent;
      border-radius: 999px;
      background-clip: content-box;
    }
    html::-webkit-scrollbar-thumb:hover { background: var(--sb-thumb-hover); background-clip: content-box; }
    html::-webkit-scrollbar-corner { background: transparent; }

    /* ---------- 整屏吸附：每屏一个吸附点，允许停在两屏之间 ---------- */
    html { scroll-snap-type: y proximity; overscroll-behavior-y: none; }
    body {
      margin: 0;
      min-width: 320px;
      background: var(--void);
      color: var(--text);
      font-family: var(--body);
      overflow-x: hidden;
    }
    body::selection { background: var(--orange); color: #000; }
    a { color: inherit; }
    button, a { -webkit-tap-highlight-color: transparent; }
    button:focus-visible, a:focus-visible {
      outline: 2px solid var(--orange-hot);
      outline-offset: 4px;
    }
    /* 翻页粒子（只在过渡时出现，静止时画布是空的） */
    #fx { position: fixed; inset: 0; z-index: 38; pointer-events: none; }

    .space-field {
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background:
        radial-gradient(ellipse 70% 50% at 72% 42%, rgba(80, 96, 180, 0.14), transparent 55%),
 radial-gradient(ellipse 40% 35% at 20% 80%, rgba(240, 135, 62, 0.06), transparent 50%),
        radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.04), transparent 40%),
 var(--void);
    }
    .space-noise {
      position: fixed;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      opacity: 0.04;
      mix-blend-mode: soft-light;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    }
    .site-header {
      position: fixed;
      inset: 0 0 auto;
      z-index: 40;
      padding: 18px clamp(18px, 4vw, 40px);
      background: linear-gradient(to bottom, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 55%, transparent 100%);
    }
    .header-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      max-width: var(--max);
      margin: 0 auto;
    }
    .logo {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      text-decoration: none;
      font-family: var(--display);
      font-size: 0.98rem;
      font-weight: 600;
      letter-spacing: -0.02em;
    }
    
    
    .logo-word { color: var(--text); } .logo-mark{display:inline-flex;width:28px;height:28px;flex:none} .logo-mark svg{width:100%;height:100%;display:block;filter:drop-shadow(0 0 8px rgba(240,135,62,.35))} .logo-mark--light{display:none} body.light .logo-mark--dark{display:none} body.light .logo-mark--light{display:inline-flex} body.light .logo-mark--light svg{filter:drop-shadow(0 0 8px rgba(107,124,255,.4))}
    .nav-right { display: flex; align-items: center; gap: clamp(16px, 3vw, 36px); }
    .nav-status, .nav-status, .nav-links a {
      font-family: var(--label);
      font-size: 0.72rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }
    .nav-links a{position:relative;line-height:1;padding:6px 2px;color:var(--text-soft);text-decoration:none;transition:color .25s ease;}
    .nav-status {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--text-muted);
    }
    .live-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--orange-hot);
      box-shadow: 0 0 0 4px rgba(240, 135, 62, 0.18);
      animation: pulse 2.4s ease-in-out infinite;
    }
    @keyframes pulse {
      0%, 100% { opacity: 1; box-shadow: 0 0 0 4px rgba(240, 135, 62, 0.18); }
      50% { opacity: 0.7; box-shadow: 0 0 0 7px rgba(240, 135, 62, 0.08); }
    }
    .nav-links { display: flex; align-items: center; gap: 22px; }
    .nav-links a{position:relative;line-height:1;padding:6px 2px;color:var(--text-soft);text-decoration:none;transition:color .25s ease;} 
    .nav-links a:hover, .nav-links a.active { color: var(--text); } .nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:var(--accent-ink);transform:scaleX(0);transform-origin:left;transition:transform .28s cubic-bezier(.16,1,.3,1);} .nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1);}
    .nav-links a span { color: var(--orange); }
    .page { position: relative; z-index: 2; }
    .hero {
      position: relative;
      display: grid;
      min-height: 100svh;
      align-items: center;
      padding: calc(var(--header-h) + 24px) clamp(20px, 5vw, 48px) 48px;
      overflow: hidden;
    }
    .hero-grid {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1.12fr) minmax(260px, 0.88fr);
      gap: clamp(28px, 5vw, 64px);
      align-items: center;
      width: min(var(--max), 100%);
      margin: 0 auto;
    }
    .hero-copy { position: relative; z-index: 2; min-width: 0; max-width: 620px; }
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin: 0 0 22px;
      padding: 7px 12px 7px 10px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: rgba(255,255,255,0.03);
      color: var(--text-soft);
      font-family: var(--label);
      font-size: 0.73rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      backdrop-filter: blur(8px);
      max-width: 100%;
      overflow-wrap: anywhere;
      white-space: normal;
    }
    .hero h1 {
      margin: 0;
      font-family: var(--display);
      font-size: clamp(2.4rem, 5vw, 4.6rem);
      font-weight: 600;
      letter-spacing: -0.03em;
      line-height: 1.02;
      text-wrap: balance;
    }
    .hero h1 .line { display: block; white-space: nowrap; }
    .hero h1 em {
      font-style: normal;
      background: linear-gradient(120deg, #fff 0%, #c5ceff 42%, var(--orange) 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
    .hero-lede {
      max-width: 40ch;
      margin: 24px 0 0;
      color: var(--text-soft);
      font-size: clamp(0.98rem, 1.2vw, 1.1rem);
      line-height: 1.75;
      text-wrap: pretty;
    }
    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 16px;
      margin-top: 46px;
    }
    .hero-cta {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      min-height: 50px;
      padding: 0 22px;
      border-radius: 999px;
      background: #fff;
      color: #050505;
      font-family: var(--label);
      font-size: 0.74rem;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      text-decoration: none;
      overflow: hidden;
      transition: transform 0.3s var(--ease-out), box-shadow 0.3s ease;
      box-shadow: 0 0 0 1px rgba(255,255,255,0.2), 0 10px 40px rgba(255,255,255,0.08);
    }
    .hero-cta::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(120deg, transparent, rgba(240,135,62,0.35), transparent);
      transform: translateX(-120%);
      transition: transform 0.55s var(--ease-out);
    }
    .hero-cta:hover {
      transform: translateY(-2px);
      box-shadow: 0 0 0 1px rgba(255,255,255,0.35), 0 14px 50px rgba(240,135,62,0.18);
    }
    .hero-cta:hover::before { transform: translateX(120%); }
    .hero-cta span { position: relative; }
    .hero-note {
      max-width: 100%;
      color: var(--text-muted);
      font-family: var(--label);
      font-size: 0.73rem;
      letter-spacing: 0.08em;
      line-height: 1.6;
      text-transform: uppercase;
      overflow-wrap: anywhere;
    }
    .hero-stage {
      position: relative;
      z-index: 1;
      aspect-ratio: 1;
      width: min(100%, 560px);
      justify-self: end;
      margin-inline: auto;
      cursor: pointer;
      transform-origin: 50% 50%;   /* 投喂长大时围绕自身中心放大 */
      -webkit-tap-highlight-color: transparent;
    }
    .hero-stage:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 10px; border-radius: 50%; }
    .hero-stage::before {
      content: "";
      position: absolute;
      inset: 8%;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(142,160,255,0.18) 0%, rgba(240,135,62,0.08) 35%, transparent 68%);
      filter: blur(28px);
      animation: breathe 6s ease-in-out infinite;
    }
    @keyframes breathe {
      0%, 100% { opacity: 0.7; transform: scale(0.96); }
      50% { opacity: 1; transform: scale(1.04); }
    }
    html.hero-idle .hero-stage::before { animation-play-state: paused; }   /* 首屏离屏时别再空转 */
    .hero-canvas {
      position: relative;
      display: block;
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
    .hero-stage-caption {
      position: absolute;
      left: 50%;
      bottom: -8px;
      transform: translateX(-50%);
      display: flex;
      align-items: center;
      gap: 10px;
      white-space: nowrap;
      color: var(--text-muted);
      font-family: var(--label);
      font-size: 0.72rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }
    .hero-stage-caption::before,
 .hero-stage-caption::after {
      content: "";
      width: 28px;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--line-strong));
    }
    .hero-stage-caption::after {
      background: linear-gradient(90deg, var(--line-strong), transparent);
    }
    .section {
      width: min(var(--max), 100%);
      margin: 0 auto;
      padding: 96px clamp(20px, 5vw, 48px) 120px;
    }
    .section-intro {
      display: flex;
      justify-content: space-between;
      gap: 32px;
      align-items: end;
      margin-bottom: 40px;
    }
    .section-kicker {
      margin: 0 0 14px;
      color: var(--orange);
      font-family: var(--label);
      font-size: 0.73rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }
    .section-heading {
      margin: 0;
      max-width: 12ch;
      font-family: var(--display);
      font-size: clamp(2.2rem, 4.5vw, 3.6rem);
      font-weight: 600;
      letter-spacing: -0.03em;
      line-height: 1.05;
      text-wrap: balance;
    }
    .section-heading em {
      font-style: normal;
      color: transparent;
      background: linear-gradient(120deg, #fff, var(--orange));
      -webkit-background-clip: text;
      background-clip: text;
    }
    .section-summary {
      max-width: 28ch;
      margin: 0;
      color: var(--text-soft);
      font-size: 0.95rem;
      line-height: 1.75;
    }
    .project-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
    }
    .project-card {
      position: relative;
      display: flex;
      min-height: 280px;
      flex-direction: column;
      padding: 26px 26px 24px;
      border: 1px solid var(--line);
      border-radius: 22px;
      background:
        linear-gradient(160deg, rgba(255,255,255,0.05), transparent 40%),
 rgba(255,255,255,0.025);
      overflow: hidden;
      isolation: isolate;
      transition: border-color 0.3s ease, transform 0.35s var(--ease-out), background 0.3s ease, box-shadow 0.35s ease;
    }
    .project-card::before {
      content: "";
      position: absolute;
      inset: -40% auto auto -20%;
      width: 220px;
      height: 220px;
      border-radius: 50%;
      background: radial-gradient(circle, var(--card-glow, rgba(240,135,62,0.18)), transparent 68%);
      opacity: 0.75;
      transition: opacity 0.35s ease, transform 0.5s var(--ease-out);
      pointer-events: none;
    }
    .project-card:nth-child(1) { --card-glow: rgba(240,135,62,0.22); --accent: var(--orange); }
    .project-card:nth-child(2) { --card-glow: rgba(142,160,255,0.22); --accent: #9eafff; }
    .project-card:nth-child(3) { --card-glow: rgba(120,220,255,0.18); --accent: #7ad7ff; }
    .project-card:nth-child(4) { --card-glow: rgba(255,176,106,0.2); --accent: var(--orange-hot); }
    .project-card:nth-child(5) { --card-glow: rgba(168,180,255,0.25); --accent: #a8b4ff; }
    .project-card:nth-child(6) { --card-glow: rgba(126,217,159,0.2); --accent: #7ed99f; }
    .project-card:hover {
      transform: translateY(-4px);
      border-color: rgba(255,255,255,0.18);
      background:
        linear-gradient(160deg, rgba(255,255,255,0.07), transparent 42%),
 rgba(255,255,255,0.04);
      box-shadow: 0 24px 60px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.04);
    }
    .project-card:hover::before {
      opacity: 1;
      transform: scale(1.15) translate(10px, 10px);
    }
    .card-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 28px;
      color: var(--text-muted);
      font-family: var(--label);
      font-size: 0.64rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }
.card-date { color: var(--text-muted); font-size: .78rem; letter-spacing: .06em; }
    .card-icon {
      display: grid;
      place-items: center;
      width: 48px;
      height: 48px;
      margin-bottom: 22px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: rgba(0,0,0,0.35);
      color: var(--accent, var(--orange));
      font-size: 1.25rem;
      box-shadow: inset 0 0 20px rgba(255,255,255,0.03);
    }
    .card-name {
      margin: 0;
      max-width: 14ch;
      font-family: var(--display);
      font-size: clamp(1.35rem, 2vw, 1.75rem);
      font-weight: 600;
      letter-spacing: -0.03em;
      line-height: 1.15;
      text-wrap: balance;
    }
    .card-desc {
      max-width: 42ch;
      margin: 12px 0 22px;
      color: var(--text-soft);
      font-size: 0.9rem;
      line-height: 1.7;
    }
    .card-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 22px;
    }
    .card-tag {
      padding: 5px 10px;
      border: 1px solid var(--line);
      border-radius: 999px;
      color: var(--text-muted);
      font-family: var(--label);
      font-size: 0.62rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }
    .card-tag.web {
      border-color: rgba(240, 135, 62, 0.35);
      color: var(--orange);
      background: rgba(240, 135, 62, 0.08);
    }
    .card-actions { margin-top: auto; }
    .card-btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      min-height: 42px;
      padding: 0 14px;
      border: 1px solid var(--line-strong);
      border-radius: 999px;
      color: var(--text);
      font-family: var(--label);
      font-size: 0.7rem;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      text-decoration: none;
      transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.25s var(--ease-out), box-shadow 0.25s ease;
    }
    .card-btn:hover {
      background: #fff;
      border-color: #fff;
      color: #050505;
      transform: translateX(3px);
      box-shadow: 0 8px 28px rgba(255,255,255,0.12);
    }
    .site-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      width: min(var(--max), 100%);
      margin: 0 auto;
      padding: 28px clamp(20px, 5vw, 48px) max(36px, env(safe-area-inset-bottom));
      border-top: 1px solid var(--line);
      color: var(--text-muted);
      font-size: 0.78rem;
    }
    .site-footer p { margin: 0; }
    .site-footer a {
      color: var(--text-soft);
      text-decoration: none;
      transition: color 0.2s ease;
    }
    .site-footer a:hover { color: var(--orange); }
    .footer-links { display: flex; gap: 14px; align-items: center; }
    .footer-meta {
      font-family: var(--label);
      font-size: 0.72rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }
    @media (max-width: 900px) {
      .nav-status { display: none; }
      .hero-grid { grid-template-columns: 1fr; gap: 18px; }
      .hero-stage {
        order: -1;
        width: min(72vw, 360px);
        margin: 0 auto 8px;
      }
      .hero-copy { text-align: center; max-width: none; }
      .hero-lede { margin-inline: auto; }
      .hero-actions { justify-content: center; }
      .section-intro { flex-direction: column; align-items: flex-start; }
      .project-grid { grid-template-columns: 1fr; }
    }
    @media (max-width: 560px) {
      .hero { padding-top: calc(var(--header-h) + 8px); }
      .hero h1 { font-size: clamp(2.4rem, 11vw, 3.1rem); }
      .hero-stage-caption { display: none; }
      .hero-actions { flex-direction: column; align-items: stretch; }
      .hero-cta { width: 100%; }
      .hero-note { text-align: center; }
      .site-footer { flex-direction: column; align-items: flex-start; }
      .project-card { min-height: 0; padding: 22px; }
      .eyebrow { justify-content: center; text-align: center; }
    }
    @media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
      .hero {
        min-height: 100svh;
        padding: calc(var(--header-h) + 6px) 28px 18px;
      }
      .hero-grid {
        grid-template-columns: minmax(0, 1.12fr) minmax(240px, 0.88fr);
        gap: 22px;
      }
      .hero-copy {
        text-align: left;
      }
      .hero-stage {
        order: initial;
        width: min(34vw, 270px);
        justify-self: end;
        margin: 0;
      }
      .hero-stage-caption {
        display: none;
      }
      .eyebrow {
        margin-bottom: 10px;
      }
      .hero h1 {
        font-size: clamp(2rem, 5.4vw, 2.75rem);
      }
      .hero-lede {
        margin-top: 12px;
        font-size: 0.82rem;
        line-height: 1.55;
      }
      .hero-actions {
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        margin-top: 14px;
      }
      .hero-cta {
        width: auto;
        min-height: 44px;
      }
      .hero-note {
        text-align: left;
      }
    }
    @media (hover: none) {
      .project-card:hover { transform: none; }
      .card-btn:active { background: #fff; color: #050505; }
    }
    /* 触控目标：小屏上可点元素至少 44 像素（2026-09-29 体检后补） */
    @media (max-width: 900px) {
      .logo,
      .nav-links a,
      .site-footer a,
      .footer-links a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
      }
      .theme-btn { width: 44px; height: 44px; }
    }
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; scroll-snap-type: none; }
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }
      .live-dot { animation: none; }
      .hero-stage::before { animation: none; }
    }
    .cat-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:26px 0 6px}
    .cat-scroll{display:contents}   /* 桌面端不需要横向滚动，内层容器对布局透明 */
    .cat-pill{padding:8px 22px;border-radius:20px;border:1px solid var(--line-strong);background:transparent;color:var(--text-soft);font-size:.85rem;cursor:pointer;font-family:var(--body);transition:all .2s}
    .cat-pill:hover{border-color:var(--orange);color:var(--orange)}
    .cat-pill.on{background:var(--orange);border-color:var(--orange);color:#000;font-weight:700}
    .cat-count{font-size:.8rem;color:var(--text-muted)}
    .project-card[hidden]{display:none}
    .sort-wrap{position:relative;margin-left:auto;z-index:30}
    .sort-btn{display:inline-flex;align-items:center;gap:9px;padding:8px 16px;border-radius:20px;border:1px solid var(--line-strong);background:rgba(255,255,255,.035);color:var(--text-soft);font-size:.85rem;font-family:var(--body);cursor:pointer;transition:border-color .2s ease,color .2s ease,background .2s ease}
    .sort-btn:hover,.sort-wrap.open .sort-btn{border-color:var(--accent-ink);color:var(--text)}
    .sort-caret{width:11px;height:11px;flex:none;transition:transform .25s var(--ease-out)}
    .sort-label-short{display:none}   /* 手机端才用短标签，桌面端显示完整名称 */
    .sort-wrap.open .sort-caret{transform:rotate(180deg)}
    .sort-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:100%;margin:0;padding:6px;list-style:none;border-radius:14px;border:1px solid rgba(255,255,255,.15);background:#0d0e12;box-shadow:0 20px 46px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.45);z-index:31}
    .sort-menu[hidden]{display:none}
    .sort-opt{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:9px 12px;border-radius:10px;color:var(--text-soft);font-size:.85rem;white-space:nowrap;cursor:pointer;transition:background .16s ease,color .16s ease}
    .sort-opt:hover,.sort-opt:focus-visible{background:rgba(255,255,255,.09);color:var(--text);outline:none}
    .sort-opt[aria-selected="true"]{background:rgba(240,135,62,.14);color:var(--orange-hot)}
    .sort-tick{font-size:.72rem;line-height:1;opacity:0}
    .sort-opt[aria-selected="true"] .sort-tick{opacity:1}
    .theme-btn{display:grid;place-items:center;width:30px;height:30px;padding:0;border-radius:50%;background:transparent;border:1px solid var(--line-strong);cursor:pointer;transition:transform .3s ease,border-color .25s ease;font-size:.85rem;font-family:var(--body);transition:all .2s}
    .theme-btn:hover{transform:rotate(24deg);border-color:var(--accent-ink)} .theme-btn svg,.theme-btn img{display:block;width:18px;height:18px} .hole-i{display:inline-flex} body.light .hole-i--dark{display:none} .hole-i--light{display:none} body.light .hole-i--light{display:inline-flex}
    /* Light theme: the original dark composition, rebuilt as a monochrome white-hole surface. */
    body.light {
      color-scheme: light;
      --void: #f7f7f4;
      --surface: rgba(255,255,255,.78);
      --line: rgba(15,15,15,.105);
      --line-strong: rgba(15,15,15,.22);
      --text: #111111;
      --text-soft: rgba(17,17,17,.68);
      --text-muted: rgba(17,17,17,.62);
      --orange: #111111;
      --orange-hot: #111111;
      --accent-ink: #111111;
    }
    body.light .space-field {
      background:
        radial-gradient(ellipse 44% 32% at 74% 38%, rgba(0,0,0,.075), transparent 68%),
        radial-gradient(ellipse 34% 24% at 14% 88%, rgba(0,0,0,.035), transparent 72%),
        linear-gradient(180deg, #fbfbf9 0%, #f2f2ef 100%);
    }
    body.light .space-noise { opacity: .028; mix-blend-mode: multiply; }
    body.light .site-header {
      background: linear-gradient(to bottom, rgba(247,247,244,.94) 0%, rgba(247,247,244,.72) 56%, transparent 100%);
    }
    body.light .logo-mark--light img { display:block; width:100%; height:100%; }
    body.light .live-dot {
      background: #111;
      box-shadow: 0 0 0 4px rgba(17,17,17,.08);
      animation: none;
    }
    body.light .nav-links a { color: rgba(17,17,17,.58); }
    body.light .nav-links a:hover,
    body.light .nav-links a.active { color: #111; }
    body.light .nav-links a::after { background: #111; }
    body.light .theme-btn {
      background: rgba(255,255,255,.74);
      border-color: rgba(17,17,17,.2);
      box-shadow: 0 6px 18px rgba(0,0,0,.04);
    }
    body.light .theme-btn:hover { border-color: #111; }
    body.light .hero h1 { color: #111; }
    body.light .hero h1 em,
    body.light .section-heading em {
      color: #111;
      background: none;
      -webkit-text-fill-color: currentColor;
    }
    body.light .hero-lede,
    body.light .section-summary { color: rgba(17,17,17,.65); }
    body.light .hero-cta {
      background: #111;
      color: #fff;
      box-shadow: 0 0 0 1px rgba(17,17,17,.12), 0 14px 34px rgba(0,0,0,.12);
    }
    body.light .hero-cta::before {
      background: linear-gradient(120deg, transparent, rgba(255,255,255,.34), transparent);
    }
    body.light .hero-cta:hover {
      box-shadow: 0 0 0 1px rgba(17,17,17,.22), 0 18px 42px rgba(0,0,0,.16);
    }
    body.light .hero-stage::before {
      background: radial-gradient(circle, rgba(0,0,0,.10) 0%, rgba(0,0,0,.035) 35%, transparent 69%);
    }
    body.light .hero-canvas { filter: grayscale(1) invert(1) contrast(.94); }
    body.light .hero-stage-caption::before { background: linear-gradient(90deg, transparent, rgba(17,17,17,.18)); }
    body.light .hero-stage-caption::after { background: linear-gradient(90deg, rgba(17,17,17,.18), transparent); }
    body.light .section-kicker { color: #111; }
    body.light .project-card {
      --accent: #111;
      --card-glow: rgba(0,0,0,.075);
      background: linear-gradient(160deg, rgba(255,255,255,.94), rgba(255,255,255,.60) 70%), rgba(255,255,255,.78);
      box-shadow: 0 14px 42px rgba(0,0,0,.055);
    }
    body.light .project-card::before { opacity: .52; }
    body.light .project-card:hover {
      border-color: rgba(17,17,17,.22);
      background: linear-gradient(160deg, rgba(255,255,255,1), rgba(255,255,255,.72) 70%), rgba(255,255,255,.88);
      box-shadow: 0 24px 60px rgba(0,0,0,.11), 0 0 0 1px rgba(17,17,17,.04);
    }
    body.light .card-icon {
      background: rgba(255,255,255,.82);
      color: #111;
      box-shadow: inset 0 0 20px rgba(0,0,0,.025);
    }
    body.light .card-tag.web {
      border-color: rgba(17,17,17,.24);
      color: #111;
      background: rgba(17,17,17,.055);
    }
    body.light .card-btn {
      border-color: rgba(17,17,17,.22);
      color: #111;
      background: rgba(255,255,255,.54);
    }
    body.light .card-btn:hover {
      background: #111;
      border-color: #111;
      color: #fff;
      box-shadow: 0 8px 28px rgba(0,0,0,.12);
    }
    body.light .cat-pill:hover { border-color: #111; color: #111; }
    body.light .cat-pill.on { background: #111; border-color: #111; color: #fff; }
    body.light .sort-btn {
      background: rgba(255,255,255,.74);
      color: #111;
      border-color: rgba(17,17,17,.2);
      box-shadow: 0 6px 18px rgba(0,0,0,.04);
    }
    body.light .sort-btn:hover,
    body.light .sort-wrap.open .sort-btn { border-color: #111; color: #111; }
    body.light .sort-menu {
      background: #ffffff;
      border-color: rgba(17,17,17,.14);
      box-shadow: 0 20px 44px rgba(0,0,0,.14), 0 0 0 1px rgba(17,17,17,.04);
    }
    body.light .sort-opt { color: rgba(17,17,17,.72); }
    body.light .sort-opt:hover,
    body.light .sort-opt:focus-visible { background: rgba(17,17,17,.06); color: #111; }
    body.light .sort-opt[aria-selected="true"] { background: rgba(17,17,17,.07); color: #111; font-weight: 600; }
    body.light .site-footer { border-top-color: rgba(17,17,17,.1); }
    body.light .site-footer a:hover { color: #111; }
    @media (max-width: 900px) {
      body.light .hero-canvas { filter: grayscale(1) invert(1) contrast(.94); }
    }

    /* ---------- 分页 deck（A 变体：下一屏先在背后，放大顶上来） ---------- */
    .deck { position: relative; }
    .panel {
      position: sticky;
      top: 0;
      height: 100vh;      /* 回退：不支持 svh 的内嵌浏览器（微信/旧 WebView）也拿到满屏高度 */
      height: 100svh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: calc(var(--header-h) + 6px) clamp(18px, 4vw, 40px) 24px;
      scroll-snap-align: start;
      scroll-snap-stop: always;   /* 快速滑动一次只前进一步 */
    }
    .panel.hero { overflow: visible; padding-top: 16px; padding-bottom: 104px; }   /* 视觉居中：重心略高于几何中心 */
    .panel-stage {
      display: flex;
      flex-direction: column;
      justify-content: center;
      width: 100%;
      height: 100%;
      max-width: var(--max);
      margin: 0 auto;
      transform-origin: 50% 60%;
      will-change: transform, opacity, filter;
      backface-visibility: hidden;
    }
    .panel--projects { justify-content: flex-start; }
    .panel--projects .panel-stage { justify-content: center; padding-top: 42px; padding-bottom: 22px; }   /* 给浮动筛选条留位后，内容整体居中（略偏上） */
    .panel-stage > .site-footer { margin-top: auto; width: 100%; padding: 16px 0 6px; }
    /* 最后一屏多了底部导航（页脚）时：页脚仍贴底，上面的内容块在剩余区域里居中，不再被顶到最上面 */
    .panel-stage.stage--docked > .projects-head { margin-top: auto; }
    .projects-head { margin-bottom: clamp(12px, 2.2vh, 22px); }
    .panel--projects:not(.panel--first) .section-heading { display: none; }
    .panel--projects:not(.panel--first) .panel-stage { justify-content: center; }
    .projects-head .section-kicker { margin-bottom: 8px; }
    .projects-head .section-heading { max-width: none; font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
    .projects-search { margin-top: 12px; }
    .projects-search input {
      width: min(240px, 100%);
      min-height: 38px;
      padding: 0 16px;
      border: 1px solid var(--line-strong);
      border-radius: 999px;
      background: transparent;
      color: var(--text);
      font: inherit;
      font-size: 0.88rem;
      -webkit-appearance: none;
      appearance: none;
    }
    .projects-search input::placeholder { color: var(--text-muted); }
    .projects-search input:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
    .project-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      grid-template-rows: repeat(3, minmax(0, 1fr));
      gap: 14px;
      height: 360px;   /* 实际高度由 JS 按可用空间算 */
      flex: none;
    }
    .project-card { min-height: 0; padding: 12px 16px; border-radius: 18px; }
    /* 卡片的字保持自然高度：装不下时让网格自己报溢出（JS 减一行），而不是把简介挤成一条缝 */
    .card-head, .card-desc, .card-tags { flex: none; }
    .project-card::before { width: 150px; height: 150px; }
    .card-meta { margin-bottom: 5px; font-size: .72rem; }
    .card-date { font-size: .7rem; }
    .card-head { display: flex; align-items: center; gap: 9px; margin-bottom: 5px; }
    .card-icon { width: 28px; height: 28px; margin: 0; flex: none; border-radius: 9px; font-size: .88rem; }
    .card-name { max-width: none; font-size: clamp(.96rem, 1.05vw, 1.06rem); }
    .card-desc {
      margin: 0 0 5px;
      font-size: .78rem;
      line-height: 1.45;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .card-tags { margin: 0; padding-right: 108px; gap: 6px; }
    .card-tag { padding: 3px 9px; font-size: .71rem; }
    .card-actions { position: absolute; right: 14px; bottom: 12px; z-index: 1; }
    .card-btn { min-height: 30px; padding: 0 12px; font-size: .72rem; }
    .orbit-dots { display: inline-flex; align-items: center; }
    .orbit-dots svg { width: 34px; height: 34px; overflow: visible; }
    .orbit-dots .ring { fill: none; stroke: var(--line-strong); stroke-width: 1; }
    .orbit-dots .ring.on { stroke: var(--accent-ink); }
    .orbit-dots .dot { fill: var(--accent-ink); }
    .orbit-text { margin-left: 8px; }
    .page-indicator {
      margin: 12px 0 0;
      text-align: right;
      color: var(--text-muted);
      font-family: var(--label);
      font-size: .72rem;
      letter-spacing: .18em;
      text-transform: uppercase;
    }
    .page-indicator { display: flex; align-items: center; justify-content: flex-end; gap: 2px; }
    @media (max-width: 1100px) { .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    /* 窄屏小手机（≤380px）：保持竖版 3 行，简介收成 1 行、留白收紧，保证不挤 */
    @media (max-width: 380px) {
      .project-card { padding: 12px 14px; }
      .card-head { margin-bottom: 6px; }
      .card-desc { -webkit-line-clamp: 1; margin-bottom: 6px; }
      .card-tags { padding-right: 96px; }
      .panel--projects .panel-stage { padding-top: 46px; }
      .panel-stage > .site-footer { padding: 10px 0 2px; }
    }
    @media (max-width: 700px) {
      .hero-stage { width: min(66vw, 300px); }
      .panel.hero { padding-top: 12px; }
      .project-grid { grid-template-columns: 1fr; }
      /* 工具条压成一行：面板里的计数省掉（页码已有「共 N 个作品」），药丸可横向滑动。
         注意：横向滚动必须套在内层 .cat-scroll 上——如果直接给 .cat-bar 设 overflow，
         排序菜单（绝对定位）会被当成溢出内容裁掉/顶到页头上去。 */
      .cat-bar { flex-wrap: nowrap; gap: 0.5em; padding-bottom: 2px; font-size: var(--cat-fs, 12.5px); }   /* 间距跟着字号缩放 */
      .cat-scroll { display: flex; flex-wrap: nowrap; align-items: center; gap: 0.58em; font-size: var(--cat-fs, 12.5px); flex: 1 1 auto; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
      .cat-scroll::-webkit-scrollbar { display: none; }
      .cat-bar .cat-pill { flex: none; min-height: max(44px, calc(var(--cat-fs, 12.5px) * 3.1)); padding: 0.62em 0.78em; font-size: var(--cat-fs, 12.5px);
        /* 只过渡颜色/边框：字号若参与过渡，自适应量到的会是动画中间值，导致来回震荡 */
        transition: border-color .2s ease, color .2s ease, background .2s ease; }
      .cat-bar .cat-count { display: none; }
      .cat-bar .sort-wrap { align-self: center; height: auto; flex: none; margin-left: 0; padding-left: 0.4em; background: linear-gradient(90deg, transparent, var(--void) 26%); }
      /* 手机上排序按钮用短标签（完整叫法太长，会把分类挤掉），下拉菜单里仍是完整文案 */
      .cat-bar .sort-btn { min-height: 44px; padding: 0.62em 0.86em; gap: 0.5em; font-size: calc(var(--cat-fs, 12.5px) * 0.98); }
      .cat-bar .sort-btn .sort-label-full { display: none; }
      .cat-bar .sort-btn .sort-label-short { display: inline; }
      .panel--projects .panel-stage { padding-top: 52px; }
      .projects-head { margin-bottom: 10px; }
      .projects-search { margin-top: 10px; }
      .projects-search input { width: 100%; min-height: 44px; }
      .projects-head .section-heading { font-size: clamp(1.35rem, 6.4vw, 1.7rem); }
      .card-meta { display: none; }   /* 手机端：日期/类型让位，保证简介两行完整可读 */
      .card-tag:nth-child(n+3) { display: none; }   /* 标签最多两个，避免换行挤压 */
      .panel-stage > .site-footer { padding: 12px 0 4px; gap: 8px; }
      .panel-stage > .site-footer .footer-meta { display: none; }
    }

    /* ---------- 浮动筛选条：只在项目分页里出现 ---------- */
    .cat-bar {
      position: fixed;
      top: calc(var(--header-h) + 2px);
      left: 50%;
      width: min(var(--max), 100%);
      margin: 0;
      padding: 0 clamp(18px, 4vw, 40px);
      z-index: 35;
      opacity: 0;
      pointer-events: none;
      transform: translate(-50%, -10px);
      transition: opacity .35s var(--ease-out), transform .5s var(--ease-out);
    }
    .cat-bar.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
    .cat-bar .sort-wrap { margin-left: auto; }
    @media (prefers-reduced-motion: reduce) { .cat-bar { transition: none; } }

    /* 矮视口（横屏手机 / 小窗口）：把空间还给卡片 */
    @media (max-height: 560px) and (max-width: 620px) {
      .project-grid { grid-template-columns: 1fr !important; }
    }

    @media (max-height: 560px) {
      :root { --header-h: 48px; }
      .site-header { padding: 6px clamp(18px, 4vw, 40px); }
      .panel { padding: calc(var(--header-h) + 4px) clamp(18px, 4vw, 40px) 8px; }
      .panel--projects .panel-stage { padding-top: 46px; }
      .cat-bar .sort-wrap { margin-left: auto; }
      .projects-head { margin-bottom: 8px; }
      .card-desc { display: none; }
      .card-meta { display: none; }   /* 横屏矮窗：日期/类型让位给标题与按钮 */
      .card-head { margin-bottom: 6px; }
      .card-tag { padding: 2px 7px; }
      .card-tag:nth-child(n+3) { display: none; }   /* 极矮视口：标签最多两个，避免挤出卡片 */
      .panel-stage > .site-footer { padding: 8px 0 2px; gap: 6px; }
      .panel-stage > .site-footer .footer-meta { display: none; }
    }
    /* 横屏矮窗：3 列 1 行，一屏 3 张。注意必须限定“宽”，否则竖屏小机（320×480）也会被排成 3 列 */
    @media (max-height: 560px) and (min-width: 621px) {
      .project-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    }

    /* 触控目标：小屏上可点元素至少 44 像素（2026-09-29 体检后补，放文件末尾保证覆盖基础规则） */
    @media (max-width: 900px) {
      .logo,
      .nav-links a,
      .site-footer a,
      .footer-links a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
      }
      .theme-btn { width: 44px; height: 44px; }
    }
/* iOS：整屏噪点层不参与混合，滚动才跟得上手指；颗粒改用低不透明度保留 */
@supports (-webkit-touch-callout: none) {
  .space-noise,
  body.light .space-noise { mix-blend-mode: normal; }
}