:root{
    --ink: #1b2027;
    --ink-2: #262d38;
    --paper: #ede7d9;
    --paper-dim: #d9d0ba;
    --rosewood: #8a4a3a;
    --rosewood-bright: #b56a4f;
    --bamboo: #7d9b74;
    --gold: #c8a24a;
    --code-green: #8fd6a0;
    --max-w: 1040px;
  }

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

  html { scroll-behavior:smooth; }

  body{
    background: var(--ink);
    color: var(--paper);
    font-family:'Noto Sans SC', sans-serif;
    font-weight:300;
    line-height:1.75;
    overflow-x:hidden;
  }

  ::selection{ background:var(--rosewood); color:var(--paper); }

  a { color:inherit; }

  .serif{ font-family:'Noto Serif SC', serif; }
  .mono{ font-family:'JetBrains Mono', monospace; }

  .grain{
    position:fixed; inset:0; pointer-events:none; z-index:1;
    opacity:.05;
    background-image:
      repeating-linear-gradient(0deg, transparent, transparent 2px, #fff 2px, #fff 3px);
  }

  nav{
    position:fixed; top:0; left:0; right:0; z-index:100;
    display:flex; justify-content:space-between; align-items:center;
    padding: 22px 6vw;
    backdrop-filter: blur(8px);
    background: linear-gradient(180deg, rgba(27,32,39,.85), rgba(27,32,39,0));
  }
  nav .logo{
    font-family:'Noto Serif SC', serif;
    font-weight:700;
    font-size:1.15rem;
    letter-spacing:.05em;
  }
  nav .logo span{ color:var(--rosewood-bright); }
  nav ul{
    list-style:none; display:flex; gap:2.2rem;
  }
  nav ul a{
    text-decoration:none;
    font-size:.85rem;
    letter-spacing:.08em;
    color:var(--paper-dim);
    transition:color .25s;
    position:relative;
  }
  nav ul a:hover, nav ul a:focus-visible{ color:var(--paper); }
  nav ul a::after{
    content:''; position:absolute; left:0; bottom:-6px;
    width:0; height:1px; background:var(--gold);
    transition:width .3s;
  }
  nav ul a:hover::after{ width:100%; }
  nav ul a.active{ color:var(--paper); }
  nav ul a.active::after{ width:100%; background:var(--rosewood-bright); }
  .logo-link{ text-decoration:none; }

  .nav-right{ display:flex; align-items:center; gap:2rem; }

  .lang-toggle{
    font-family:'JetBrains Mono', monospace;
    font-size:.7rem;
    letter-spacing:.05em;
    color:var(--gold);
    background:transparent;
    border:1px solid rgba(200,162,74,.45);
    border-radius:3px;
    padding:.35rem .7rem;
    cursor:pointer;
    transition: background .25s, color .25s;
  }
  .lang-toggle:hover{ background:rgba(200,162,74,.12); }

  @media (max-width:640px){
    nav ul{ gap:1.1rem; }
    nav ul a{ font-size:.72rem; }
    .nav-right{ gap:1.1rem; }
    .lang-toggle{ font-size:.65rem; padding:.3rem .55rem; }
  }

  header{
    position:relative;
    min-height:100svh;
    display:flex; flex-direction:column; justify-content:center;
    padding: 0 6vw;
    max-width: var(--max-w);
    margin: 0 auto;
  }

  .eyebrow{
    font-family:'JetBrains Mono', monospace;
    font-size:.8rem;
    color:var(--bamboo);
    letter-spacing:.12em;
    margin-bottom:1.4rem;
  }
  .eyebrow::before{ content:'// '; color:var(--rosewood-bright); }

  h1.title{
    font-family:'Noto Serif SC', serif;
    font-weight:900;
    font-size: clamp(2.6rem, 7vw, 5.2rem);
    line-height:1.15;
    letter-spacing:.02em;
  }
  h1.title .accent{ color:var(--rosewood-bright); }

  .subtitle{
    margin-top:1.6rem;
    max-width:560px;
    font-size:1.05rem;
    color:var(--paper-dim);
  }

  .strings-wrap{
    margin-top:3.5rem;
    width:100%;
    max-width:640px;
  }
  .strings-wrap svg{ width:100%; height:auto; display:block; }
  .string-path{
    fill:none;
    stroke-width:1.6;
    stroke-linecap:round;
  }
  .string-1{ stroke:var(--gold); opacity:.9; }
  .string-2{ stroke:var(--rosewood-bright); opacity:.75; }

  @keyframes bow-vibrate {
    0%,100%{ d: path('M0,40 Q 100,40 200,40 T 400,40 T 600,40'); }
  }

  .strings-caption{
    margin-top:.8rem;
    font-family:'JetBrains Mono', monospace;
    font-size:.72rem;
    color:var(--paper-dim);
    opacity:.6;
    letter-spacing:.05em;
  }

  .scroll-hint{
    position:absolute; bottom:2.4rem; left:6vw;
    font-family:'JetBrains Mono', monospace;
    font-size:.7rem;
    color:var(--paper-dim);
    opacity:.5;
    display:flex; align-items:center; gap:.5rem;
  }
  .scroll-hint .line{ width:28px; height:1px; background:var(--paper-dim); }

  .hero-cta{
    margin-top:3rem;
    display:inline-flex; align-items:center; gap:.6rem;
    font-family:'JetBrains Mono', monospace;
    font-size:.85rem;
    color:var(--paper);
    text-decoration:none;
    border-bottom:1px solid var(--rosewood-bright);
    padding-bottom:4px;
    width:fit-content;
    transition:opacity .25s;
  }
  .hero-cta:hover{ opacity:.65; }
  .hero-cta .arrow{ transition:transform .25s; }
  .hero-cta:hover .arrow{ transform:translateX(4px); }

  /* index 页面的站点地图卡片 */
  .site-map{
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 5rem 6vw 7rem;
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:1.4rem;
  }
  .map-card{
    display:block;
    text-decoration:none;
    padding:2rem;
    border:1px solid rgba(237,231,217,.12);
    border-radius:6px;
    transition: border-color .3s, transform .3s, background .3s;
  }
  .map-card:hover, .map-card:focus-visible{
    border-color: var(--rosewood-bright);
    background: rgba(138,74,58,.06);
    transform: translateY(-3px);
  }
  .map-card .num{
    font-family:'JetBrains Mono', monospace;
    font-size:.75rem;
    color:var(--rosewood-bright);
  }
  .map-card h3{
    font-family:'Noto Serif SC', serif;
    font-size:1.3rem;
    margin: .6rem 0 .5rem;
  }
  .map-card p{
    font-size:.85rem;
    color:var(--paper-dim);
  }

  @media (max-width:700px){ .site-map{ grid-template-columns:1fr; } }

  /* 页面间的上一页/下一页导航 */
  .page-nav{
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 6vw 5rem;
    display:flex; justify-content:space-between; gap:1rem;
    flex-wrap:wrap;
  }
  .page-nav a{
    text-decoration:none;
    font-family:'JetBrains Mono', monospace;
    font-size:.8rem;
    color:var(--paper-dim);
    display:flex; flex-direction:column; gap:.3rem;
    transition:color .25s;
  }
  .page-nav a:hover{ color:var(--paper); }
  .page-nav a .label{ opacity:.55; font-size:.7rem; }
  .page-nav a.next{ text-align:right; align-items:flex-end; }
  .page-nav a span.name{ font-family:'Noto Serif SC', serif; font-size:1rem; color:var(--paper); }

  section{
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 7rem 6vw;
    position:relative;
  }

  .section-head{
    display:flex; align-items:baseline; gap:1rem;
    margin-bottom:3rem;
  }
  .section-num{
    font-family:'JetBrains Mono', monospace;
    font-size:.8rem;
    color:var(--rosewood-bright);
  }
  .section-title{
    font-family:'Noto Serif SC', serif;
    font-weight:700;
    font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  }
  .section-title .sub{
    display:block;
    font-family:'JetBrains Mono', monospace;
    font-weight:400;
    font-size:.72rem;
    color:var(--paper-dim);
    opacity:.55;
    margin-top:.35rem;
    letter-spacing:.1em;
  }

  hr.divider{
    border:none; height:1px;
    background: linear-gradient(90deg, var(--rosewood), transparent);
    margin: 0 6vw;
  }

  #about .grid{
    display:grid; grid-template-columns: 1.1fr 1fr; gap:3.5rem;
    align-items:start;
  }
  #about p{ color:var(--paper-dim); margin-bottom:1.1rem; }
  #about p strong{ color:var(--paper); font-weight:500; }

  .fact-list{ list-style:none; display:flex; flex-direction:column; gap:1rem; }
  .fact-list li{
    display:flex; justify-content:space-between;
    border-bottom:1px solid rgba(237,231,217,.12);
    padding-bottom:.7rem;
    font-size:.9rem;
  }
  .fact-list li span:first-child{ color:var(--paper-dim); }
  .fact-list li span:last-child{ font-family:'JetBrains Mono', monospace; font-size:.82rem; }

  @media (max-width: 800px){ #about .grid{ grid-template-columns:1fr; } }

  #erhu .erhu-body{
    display:grid; grid-template-columns: 1fr 1fr; gap:3rem;
  }
  .repertoire{ list-style:none; }
  .repertoire li{
    padding: 1.1rem 0;
    border-bottom:1px dashed rgba(237,231,217,.15);
    display:flex; justify-content:space-between; align-items:center;
    gap:1rem;
  }
  .repertoire li .piece{ font-family:'Noto Serif SC', serif; font-size:1.05rem; }
  .repertoire li .tag{
    font-family:'JetBrains Mono', monospace; font-size:.7rem;
    color:var(--bamboo); white-space:nowrap;
    border:1px solid rgba(125,155,116,.4); padding:.2rem .55rem; border-radius:2px;
  }

  .quote-block{
    border-left: 2px solid var(--rosewood-bright);
    padding-left:1.4rem;
    font-family:'Noto Serif SC', serif;
    font-size:1.15rem;
    color:var(--paper);
    font-style:normal;
  }
  .quote-block cite{
    display:block; margin-top:.8rem;
    font-family:'JetBrains Mono', monospace;
    font-size:.72rem; color:var(--paper-dim); font-style:normal;
  }

  @media (max-width:800px){ #erhu .erhu-body{ grid-template-columns:1fr; } }

  #code .code-window{
    background: var(--ink-2);
    border-radius:8px;
    border:1px solid rgba(237,231,217,.1);
    overflow:hidden;
    box-shadow: 0 20px 60px -20px rgba(0,0,0,.6);
  }
  .code-titlebar{
    display:flex; align-items:center; gap:.5rem;
    padding: .8rem 1rem;
    background: rgba(0,0,0,.2);
    border-bottom:1px solid rgba(237,231,217,.08);
  }
  .dot{ width:9px; height:9px; border-radius:50%; }
  .dot.r{ background:#e0645a; } .dot.y{ background:#e0b95a; } .dot.g{ background:#5ac26e; }
  .code-titlebar span{
    margin-left:.6rem; font-family:'JetBrains Mono', monospace;
    font-size:.72rem; color:var(--paper-dim);
  }
  pre.code{
    padding: 1.6rem;
    font-family:'JetBrains Mono', monospace;
    font-size:.82rem;
    line-height:1.9;
    overflow-x:auto;
    color:var(--paper-dim);
  }
  pre.code .kw{ color:var(--rosewood-bright); }
  pre.code .str{ color:var(--code-green); }
  pre.code .com{ color:#6b7280; }
  pre.code .fn{ color:var(--gold); }

  .stack-tags{
    display:flex; flex-wrap:wrap; gap:.6rem;
    margin-top:2rem;
  }
  .stack-tags span{
    font-family:'JetBrains Mono', monospace;
    font-size:.75rem;
    padding:.4rem .85rem;
    border:1px solid rgba(200,162,74,.35);
    color:var(--gold);
    border-radius:3px;
  }

  #contact{ text-align:center; padding-bottom:9rem; }
  #contact .section-head{ justify-content:center; }
  #contact p{ color:var(--paper-dim); max-width:480px; margin:0 auto 2.2rem; }

  .contact-links{
    display:flex; justify-content:center; gap:2.4rem; flex-wrap:wrap;
  }
  .contact-links a{
    text-decoration:none;
    font-family:'JetBrains Mono', monospace;
    font-size:.85rem;
    color:var(--paper);
    border-bottom:1px solid var(--rosewood-bright);
    padding-bottom:3px;
    transition:opacity .25s;
  }
  .contact-links a:hover{ opacity:.6; }

  .contact-note{
    margin-top: 2.2rem !important;
    font-family:'JetBrains Mono', monospace;
    font-size:.72rem;
    color:var(--paper-dim);
    opacity:.55;
    max-width:420px;
  }

  footer{
    text-align:center;
    padding: 2rem 6vw 3rem;
    font-family:'JetBrains Mono', monospace;
    font-size:.7rem;
    color:var(--paper-dim);
    opacity:.4;
  }

  a:focus-visible, button:focus-visible{
    outline: 2px solid var(--gold);
    outline-offset: 3px;
  }

  @media (prefers-reduced-motion: reduce){
    * { animation:none !important; transition:none !important; }
  }

  .reveal{
    opacity:0; transform:translateY(18px);
    transition: opacity .7s ease, transform .7s ease;
  }
  .reveal.in{ opacity:1; transform:translateY(0); }