:root {
  --page-bg: #e9e5dc;
  --surface: #faf8f2;
  --surface-soft: #f3f0e8;
  --text: #27241f;
  --muted: #716a60;
  --accent: #c96445;
  --accent-soft: #f2d9ce;
  --on-accent: #17130f;
  --accent-text: #8f402b;
  --olive: #72734f;
  --border: #cfc7ba;
  --shadow: 0 18px 48px rgba(67, 55, 43, 0.12);
  --font-serif: Georgia, 'Times New Roman', 'Noto Serif SC', serif;
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei', sans-serif;
  --font-mono: 'Cascadia Code', 'SFMono-Regular', Consolas, monospace;
}

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

body {
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(circle at 88% 4%, rgba(201, 100, 69, 0.12), transparent 26%),
    linear-gradient(rgba(113, 106, 96, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(113, 106, 96, 0.055) 1px, transparent 1px),
    var(--page-bg);
  background-size: auto, 28px 28px, 28px 28px, auto;
  font-family: var(--font-sans);
  overflow-x: hidden;
}

h1, h2 { font-family: var(--font-serif); font-weight: 400; }
code, .eyebrow, .title-kicker, .card-tag { font-family: var(--font-mono); }
a { color: inherit; }
a:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }

    body.home-page .page-shell{
      position: relative;
      z-index: 1;
      min-height: 100vh;
      padding: 42px 28px 36px;
    }

    body.home-page /* ===== 入场动画 ===== */
    [data-reveal]{
      opacity: 0;
      transform: translateY(26px);
      transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
      transition-delay: var(--reveal-delay, 0s);
    }

    body.home-page [data-reveal].revealed{
      opacity: 1;
      transform: none;
    }

    body.home-page /* ===== 卡片聚光 ===== */
    .glow-card{
      position: relative;
    }

    body.home-page .glow-card::after{
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%),
                  rgba(201, 100, 69, 0.08), transparent 62%);
      opacity: 0;
      transition: opacity 0.3s ease;
      pointer-events: none;
    }

    body.home-page .glow-card:hover::after{
      opacity: 1;
    }

    body.home-page ::selection{
      background: var(--accent-soft);
      color: var(--text);
    }

    body.home-page ::-webkit-scrollbar{ width: 10px; }
    body.home-page ::-webkit-scrollbar-track{ background: var(--surface-soft); }
    body.home-page ::-webkit-scrollbar-thumb{
      background: var(--accent);
      border-radius: 8px;
      border: 2px solid var(--surface-soft);
    }

    @media (prefers-reduced-motion: reduce) {
      body.home-page .protocol-flow .flow-pulse{ animation: none; }
      body.home-page [data-reveal]{
        opacity: 1;
        transform: none;
        transition: none;
      }
    }

    body.home-page .grid{
      display: grid;
      grid-template-columns: minmax(320px, 760px) minmax(300px, 430px);
      gap: 28px;
      align-items: start;
      max-width: 1380px;
      margin: 0 auto;
    }

    body.home-page .panel{
      background: var(--surface);
      border: 1px solid var(--border);
      box-shadow: var(--shadow);
      backdrop-filter: none;
      border-radius: 26px;
    }

    body.home-page .hero-card{
      padding: 34px;
      position: relative;
      overflow: hidden;
    }

    body.home-page .hero-card::before{
      content: '';
      position: absolute;
      inset: auto -10% -55% auto;
      width: 280px;
      height: 280px;
      background: radial-gradient(circle, rgba(201, 100, 69, 0.12), transparent 60%);
      pointer-events: none;
    }

    body.home-page .hero-top{
      display: flex;
      align-items: center;
      gap: 20px;
      margin-bottom: 20px;
      flex-wrap: wrap;
    }

    body.home-page .avatar{
      width: 96px;
      height: 96px;
      border-radius: 50%;
      object-fit: cover;
      border: 3px solid var(--border);
      background: var(--surface-soft);
      box-shadow: var(--shadow);
    }

    body.home-page .title-block h1{
      font-size: clamp(2rem, 4.6vw, 3.3rem);
      line-height: 1.08;
      margin-bottom: 10px;
      color: var(--text);
      background: none;
      -webkit-text-fill-color: currentColor;
    }

    body.home-page .title-kicker{
      font-family: var(--font-mono);
      font-size: 0.82rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--olive);
      margin-bottom: 12px;
    }

    body.home-page .subtitle{
      color: var(--muted);
      font-size: 1.02rem;
      line-height: 1.8;
      max-width: 680px;
    }

    body.home-page .hero-description{
      color: var(--muted);
      font-size: 1rem;
      line-height: 1.9;
      max-width: 700px;
      margin-top: 10px;
    }

    body.home-page .hero-actions{
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin: 24px 0 10px;
    }

    body.home-page .cta-note{
      color: var(--muted);
      font-size: 0.9rem;
      line-height: 1.7;
      margin-top: 10px;
    }

    body.home-page .hero-summary{
      display: grid;
      grid-template-columns: minmax(0, 1.3fr) minmax(240px, 0.95fr);
      gap: 20px;
      align-items: start;
      margin-top: 20px;
    }

    body.home-page .summary-column,
    body.home-page .sidebar-column{
      min-width: 0;
    }

    body.home-page .sidebar-column{
      display: grid;
      gap: 18px;
    }

    body.home-page .compact-panel{
      padding: 18px;
      border-radius: 18px;
      background: var(--surface-soft);
      border: 1px solid var(--border);
    }

    body.home-page .cta-button{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 48px;
      padding: 0 18px;
      border-radius: 14px;
      text-decoration: none;
      font-weight: 700;
      position: relative;
      overflow: hidden;
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
    }

    body.home-page .cta-button.primary,
    body.project-page .btn.primary {
      color: var(--on-accent);
      background: var(--accent);
      box-shadow: var(--shadow);
    }

    body.home-page .cta-button.secondary{
      color: var(--text);
      background: var(--surface-soft);
      border: 1px solid var(--border);
    }

    body.home-page .cta-button.ghost{
      color: var(--text);
      background: var(--surface-soft);
      border: 1px solid var(--border);
    }

    body.home-page .cta-button:hover{
      transform: translateY(-2px);
    }

    body.home-page .cta-button.primary:hover{
      box-shadow: 0 14px 32px rgba(67, 55, 43, 0.16);
    }

    body.home-page .cta-button.secondary:hover,
    body.home-page .cta-button.ghost:hover{
      border-color: var(--accent);
      background: var(--accent-soft);
    }

    body.home-page .section-lead{
      color: var(--muted);
      font-size: 0.94rem;
      margin-bottom: 12px;
      line-height: 1.7;
    }

    body.home-page .tags{
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin: 22px 0 28px;
    }

    body.home-page .tag{
      padding: 8px 14px;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: var(--surface-soft);
      font-size: 0.92rem;
      color: var(--text);
    }

    body.home-page .featured-project{
      margin-top: 20px;
      padding: 22px;
      border-radius: 22px;
      background: var(--surface);
      border: 1px solid var(--border);
      box-shadow: var(--shadow);
    }

    body.home-page .featured-project .eyebrow{
      font-family: var(--font-mono);
      font-size: 0.76rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--olive);
      margin-bottom: 10px;
    }

    body.home-page .featured-project h2{
      font-size: clamp(1.3rem, 2vw, 1.7rem);
      margin-bottom: 10px;
      color: var(--text);
    }

    body.home-page .featured-project p{
      color: var(--muted);
      line-height: 1.8;
    }

    body.home-page .project-highlights{
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      margin: 18px 0;
    }

    body.home-page .project-highlight{
      padding: 14px;
      border-radius: 16px;
      background: var(--surface-soft);
      border: 1px solid var(--border);
    }

    body.home-page .project-highlight strong{
      display: block;
      color: var(--text);
      font-size: 0.95rem;
      margin-bottom: 6px;
    }

    body.home-page .project-highlight span{
      color: var(--muted);
      font-size: 0.86rem;
      line-height: 1.65;
    }

    body.home-page .project-links{
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 8px;
    }

    body.home-page .protocol-flow{
      margin: 18px 0;
      padding: 12px;
      border-radius: 16px;
      background: var(--surface-soft);
      border: 1px solid var(--border);
    }

    body.home-page .protocol-flow svg{ display: block; width: 100%; height: auto; }
    body.home-page .protocol-flow .flow-pulse{ animation: flowPulse 3.2s ease-in-out infinite; }
    @keyframes flowPulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

    body.home-page .stack-groups{ display: grid; gap: 14px; }
    body.home-page .stack-group h4{ margin-bottom: 8px; color: var(--muted); font-size: .82rem; }
    body.home-page .now-building{ border-color: var(--accent); background: var(--accent-soft); }

    body.home-page .project-showcase{
      margin-top: 28px;
      padding: 24px;
      border-radius: 24px;
      background: var(--surface);
      border: 1px solid var(--border);
      box-shadow: var(--shadow);
    }

    body.home-page .project-showcase-header{
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 18px;
      flex-wrap: wrap;
    }

    body.home-page .project-showcase-header h3{
      font-size: 1.28rem;
      color: var(--text);
      margin-bottom: 6px;
    }

    body.home-page .project-showcase-header p{
      color: var(--muted);
      line-height: 1.75;
      max-width: 720px;
    }

    body.home-page .project-grid{
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 16px;
    }

    body.home-page .project-card{
      padding: 18px;
      border-radius: 18px;
      background: var(--surface-soft);
      border: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      gap: 12px;
      min-height: 100%;
    }

    body.home-page .project-card .card-tag{
      display: inline-flex;
      align-items: center;
      width: fit-content;
      padding: 6px 10px;
      border-radius: 999px;
      background: var(--accent-soft);
      border: 1px solid var(--border);
      color: var(--accent-text);
      font-family: var(--font-mono);
      font-size: 0.72rem;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    body.home-page .project-card h4{
      font-size: 1.08rem;
      color: var(--text);
      line-height: 1.45;
    }

    body.home-page .project-card p{
      color: var(--muted);
      line-height: 1.78;
      font-size: 0.94rem;
    }

    body.home-page .project-meta{
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    body.home-page .project-meta span{
      padding: 6px 10px;
      border-radius: 999px;
      background: var(--surface-soft);
      border: 1px solid var(--border);
      color: var(--text);
      font-size: 0.8rem;
    }

    body.home-page .project-card a{
      margin-top: auto;
      color: var(--accent-text);
      text-decoration: none;
      font-weight: 700;
    }

    body.home-page .project-card a:hover{
      color: var(--accent-text);
    }

    body.home-page .stat-row,
    body.home-page .link-list,
    body.home-page .stack-list,
    body.home-page .about-box{
      margin-top: 18px;
    }

    body.home-page .section-title{
      color: var(--accent-text);
      font-size: 1rem;
      margin-bottom: 14px;
      letter-spacing: 0.02em;
    }

    body.home-page .section-title::before{
      content: '▸';
      margin-right: 8px;
      color: var(--accent-text);
    }

    body.home-page .stat-grid{
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 14px;
    }

    body.home-page .stat-item{
      padding: 16px 12px;
      text-align: center;
      border-radius: 18px;
      background: var(--surface-soft);
      border: 1px solid var(--border);
    }

    body.home-page .stat-value{
      display: block;
      font-size: 1.45rem;
      font-weight: 700;
      margin-bottom: 6px;
    }

    body.home-page .stat-label{
      color: var(--muted);
      font-size: 0.88rem;
    }

    body.home-page .stack-items{
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    body.home-page .stack-pill{
      padding: 10px 14px;
      border-radius: 14px;
      background: var(--surface-soft);
      border: 1px solid var(--border);
      color: var(--text);
      font-size: 0.95rem;
    }

    body.home-page .quick-links{
      display: grid;
      gap: 12px;
    }

    body.home-page .quick-links a{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      text-decoration: none;
      color: var(--text);
      padding: 16px 18px;
      border-radius: 16px;
      background: var(--surface-soft);
      border: 1px solid var(--border);
      transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
      font-weight: 600;
    }

    body.home-page .quick-link-meta{
      color: var(--muted);
      font-size: 0.88rem;
      font-weight: 400;
      margin-top: 4px;
    }

    body.home-page .quick-link-arrow{
      color: var(--accent-text);
      font-size: 1rem;
      flex-shrink: 0;
    }

    body.home-page .quick-links a:hover{
      transform: translateY(-2px);
      border-color: var(--accent);
      background: var(--accent-soft);
      box-shadow: var(--shadow);
    }

    body.home-page .about-box{
      padding: 18px;
      border-radius: 18px;
      background: var(--surface-soft);
      border: 1px solid var(--border);
      color: var(--muted);
      line-height: 1.85;
      font-size: 0.95rem;
    }

    body.home-page .about-box p + p{
      margin-top: 10px;
    }

    body.home-page .receipt-side{
      position: sticky;
      top: 18px;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 14px;
      min-height: 560px;
    }

    body.home-page .receipt-showcase{
      display: flex;
      flex-direction: column;
      gap: 16px;
      width: min(332px, 100%);
      padding: 16px;
      border-radius: 28px;
      background: var(--surface-soft);
      border: 1px solid var(--border);
      box-shadow: var(--shadow);
      backdrop-filter: none;
    }

    body.home-page .receipt-caption{
      text-align: left;
      color: var(--text);
      max-width: 320px;
      padding: 4px 4px 0;
    }

    body.home-page .receipt-caption .eyebrow{
      font-family: var(--font-mono);
      font-size: 0.78rem;
      letter-spacing: 0.12em;
      color: var(--accent-text);
      text-transform: uppercase;
      margin-bottom: 8px;
    }

    body.home-page .receipt-caption h2{
      font-size: 1.28rem;
      margin-bottom: 10px;
      color: var(--text);
    }

    body.home-page .receipt-caption p{
      font-size: 0.98rem;
      line-height: 1.78;
      color: var(--muted);
    }

    body.home-page #receipt-wrap{
      width: 100%;
      height: 400px;
      flex: none;
      position: relative;
      border-radius: 22px;
      overflow: hidden;
      background: radial-gradient(ellipse at 45% 30%, var(--surface), var(--surface-soft));
      border: 1px solid var(--border);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
    }

    body.home-page #receipt-wrap canvas{
      display: block;
      width: 100%;
      height: 100%;
      cursor: grab;
      user-select: none;
    }

    body.home-page #receipt-wrap.is-dragging canvas{ cursor: grabbing; }

    body.home-page .receipt-fallback{
      display: grid;
      place-content: center;
      height: 100%;
      padding: 28px;
      text-align: center;
      color: var(--text);
      font: 500 0.84rem/1.9 var(--font-mono);
      letter-spacing: 0.06em;
    }
    body.home-page .receipt-fallback strong{ font-size: 1.4rem; }
    body.home-page .receipt-fallback small{ font-size: 0.72rem; }

    body.home-page .receipt-tip{
      font-family: var(--font-mono);
      font-size: 0.74rem;
      color: var(--muted);
      letter-spacing: 0.01em;
      line-height: 1.65;
      text-align: left;
      padding: 0 2px;
    }

    body.home-page .footer-note{
      max-width: 1380px;
      margin: 28px auto 0;
      padding: 0 8px;
      color: var(--muted);
      font-family: var(--font-mono);
      font-size: 0.78rem;
      letter-spacing: 0.04em;
      text-align: left;
    }

    @media (max-width: 1180px) {
      body.home-page .hero-summary{
        grid-template-columns: 1fr;
      }
      body.home-page .project-highlights{
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 1080px) {
      body.home-page .grid{
        grid-template-columns: 1fr;
      }
      body.home-page .receipt-side{
        position: relative;
        top: auto;
        min-height: auto;
        align-items: center;
        order: 2;
        margin-top: 8px;
      }
      body.home-page .receipt-showcase{
        width: min(360px, 92vw);
      }
      body.home-page .receipt-caption, body.home-page .receipt-tip{
        text-align: left;
        padding-right: 0;
      }
      body.home-page #receipt-wrap{
        width: 100%;
      }
    }

    @media (max-width: 720px) {

    body.home-page .page-shell{ padding: 18px 14px 24px; }
      body.home-page .hero-card{ padding: 22px; }
      body.home-page .hero-top{
        align-items: flex-start;
        gap: 16px;
      }
      body.home-page .hero-actions{
        flex-direction: column;
      }
      body.home-page .hero-actions .cta-button {
        width: 100%;
        min-height: 48px;
        padding: 0 18px;
        justify-content: center;
        border: 1px solid var(--border);
        background: var(--surface-soft);
      }
      body.home-page .hero-actions .cta-button.primary{ background: var(--accent); }
      body.home-page .cta-note{
        display: none;
      }
    body.home-page .project-showcase{
        padding: 18px;
      }
      body.home-page .project-card{
        padding: 16px;
      }
      body.home-page .project-meta span:nth-child(n+3){
        display: none;
      }
      body.home-page .stack-items .stack-pill:nth-child(n+7){
        display: none;
      }
      body.home-page .stat-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
      body.home-page .title-block h1{ font-size: 2rem; }
      body.home-page .section-title{ margin-bottom: 10px; }
      body.home-page .quick-links a{
        padding: 14px 16px;
      }
      body.home-page #receipt-wrap{ height: 360px; }
      body.home-page .receipt-caption{
        max-width: 100%;
      }
      body.home-page .footer-note{
        font-size: 0.72rem;
        color: var(--muted);
      }
    }


    body.project-page a{ color: inherit; }

    body.project-page .page{
      max-width: 1240px;
      margin: 0 auto;
      padding: 36px 24px 56px;
    }

    body.project-page .topbar{
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 26px;
    }

    body.project-page .crumb{
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: var(--muted);
      text-decoration: none;
      font-size: 0.95rem;
    }

    body.project-page .crumb:hover{ color: var(--text); }

    body.project-page .panel{
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 28px;
      box-shadow: var(--shadow);
      backdrop-filter: none;
    }

    body.project-page .hero{
      display: grid;
      grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
      gap: 24px;
      padding: 30px;
      margin-bottom: 26px;
    }

    body.project-page .eyebrow{
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 7px 12px;
      border-radius: 999px;
      font-family: var(--font-mono);
      font-size: 0.76rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--accent-text);
      background: var(--surface-soft);
      border: 1px solid var(--border);
      margin-bottom: 14px;
    }

    body.project-page h1{
      font-size: clamp(2.2rem, 5vw, 4rem);
      line-height: 1.06;
      margin-bottom: 14px;
      color: var(--text);
      background: none;
      -webkit-text-fill-color: currentColor;
    }

    body.project-page .hero-subtitle{
      color: var(--muted);
      font-size: 1.08rem;
      line-height: 1.85;
      max-width: 760px;
      margin-bottom: 18px;
    }

    body.project-page .hero-summary{
      color: var(--muted);
      font-size: 0.98rem;
      line-height: 1.85;
      max-width: 760px;
    }

    body.project-page .actions{
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 22px;
    }

    body.project-page .btn{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 48px;
      padding: 0 18px;
      border-radius: 14px;
      text-decoration: none;
      font-weight: 700;
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
    }

    body.project-page .btn:hover{ transform: translateY(-2px); }

    body.project-page .btn.secondary{
      color: var(--text);
      background: var(--surface-soft);
      border: 1px solid var(--border);
    }

    body.project-page .hero-side{
      display: grid;
      gap: 16px;
      align-content: start;
    }

    body.project-page .metric-card,
    body.project-page .mini-panel{
      background: var(--surface-soft);
      border: 1px solid var(--border);
      border-radius: 22px;
      padding: 20px;
    }

    body.project-page .metric-grid{
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }

    body.project-page .metric{
      padding: 14px;
      border-radius: 18px;
      background: var(--surface-soft);
      border: 1px solid var(--border);
    }

    body.project-page .metric strong{
      display: block;
      color: var(--accent-text);
      font-size: 1.05rem;
      margin-bottom: 6px;
    }

    body.project-page .metric span{
      color: var(--muted);
      font-size: 0.86rem;
      line-height: 1.6;
    }

    body.project-page .section{
      padding: 28px;
      margin-bottom: 22px;
    }

    body.project-page .section h2{
      font-size: 1.4rem;
      margin-bottom: 10px;
      color: var(--text);
    }

    body.project-page .section-intro{
      color: var(--muted);
      line-height: 1.8;
      margin-bottom: 18px;
      max-width: 820px;
    }

    body.project-page .feature-grid,
    body.project-page .roadmap-grid,
    body.project-page .scenario-grid{
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
    }

    body.project-page .feature-card,
    body.project-page .roadmap-card,
    body.project-page .scenario-card{
      padding: 18px;
      border-radius: 20px;
      background: var(--surface-soft);
      border: 1px solid var(--border);
    }

    body.project-page .feature-card h3,
    body.project-page .roadmap-card h3,
    body.project-page .scenario-card h3{
      font-size: 1.04rem;
      margin-bottom: 10px;
      color: var(--text);
    }

    body.project-page .feature-card p,
    body.project-page .roadmap-card p,
    body.project-page .scenario-card p{
      color: var(--muted);
      line-height: 1.78;
      font-size: 0.94rem;
    }

    body.project-page .highlight-line{
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 16px;
    }

    body.project-page .highlight-line span{
      padding: 8px 12px;
      border-radius: 999px;
      background: var(--surface-soft);
      border: 1px solid var(--border);
      color: var(--text);
      font-size: 0.88rem;
    }

    body.project-page .split{
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(320px, 0.9fr);
      gap: 20px;
    }

    body.project-page .timeline{
      display: grid;
      gap: 14px;
    }

    body.project-page .timeline-item{
      padding: 16px 18px;
      border-radius: 18px;
      background: var(--surface-soft);
      border: 1px solid var(--border);
    }

    body.project-page .timeline-item strong{
      display: block;
      margin-bottom: 6px;
      color: var(--accent-text);
    }

    body.project-page .timeline-item p{
      color: var(--muted);
      line-height: 1.76;
      font-size: 0.94rem;
    }

    body.project-page .status-grid{
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 14px;
      margin-bottom: 18px;
    }

    body.project-page .status-card{
      padding: 16px;
      border-radius: 18px;
      background: var(--surface-soft);
      border: 1px solid var(--border);
    }

    body.project-page .status-card strong{
      display: block;
      color: var(--accent-text);
      font-size: 1rem;
      margin-bottom: 8px;
    }

    body.project-page .status-card p{
      color: var(--muted);
      line-height: 1.72;
      font-size: 0.9rem;
    }

    body.project-page .diagram-shell{
      margin-top: 18px;
      border-radius: 24px;
      background: var(--surface);
      border: 1px solid var(--border);
      box-shadow: var(--shadow);
      overflow: hidden;
    }

    body.project-page .diagram-shell svg{
      display: block;
      width: 100%;
      height: auto;
    }

    body.project-page .diagram-caption{
      padding: 14px 18px 18px;
      color: var(--muted);
      line-height: 1.75;
      font-size: 0.92rem;
    }

    body.project-page .footer-actions{
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 18px;
    }

    body.project-page .footer-note{
      margin-top: 28px;
      color: var(--muted);
      font-family: var(--font-mono);
      font-size: 0.78rem;
      letter-spacing: 0.04em;
      text-align: left;
    }

    @media (prefers-reduced-motion: reduce) {
      body.project-page .btn{ transition: none; }
      body.project-page .btn:hover{ transform: none; }
    }

    @media (max-width: 980px) {
      body.project-page .hero,
      body.project-page .split{
        grid-template-columns: 1fr;
      }
      body.project-page .feature-grid,
      body.project-page .roadmap-grid,
      body.project-page .scenario-grid,
      body.project-page .status-grid{
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 720px) {
      body.project-page .page{ padding: 18px 14px 34px; }
      body.project-page .hero,
      body.project-page .section{ padding: 20px; }
      body.project-page .actions,
      body.project-page .footer-actions{ flex-direction: column; }
      body.project-page .btn{ width: 100%; }
      body.project-page .metric-grid{ grid-template-columns: 1fr; }
      body.project-page h1{ font-size: 2.2rem; }
    }