:root {
    --accent: #c8ff00;
    --text:   #f0f0f0;
    --muted:  #888;
  }
  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
  html,body{width:100%;overflow-x:hidden;background:#0e0e0e;font-family:"MiSans","MiSans VF","PingFang SC","Noto Sans SC","Microsoft YaHei",sans-serif;color:var(--text);scrollbar-width:thin;scrollbar-color:rgba(76,76,76,.78) transparent}
  html::-webkit-scrollbar,body::-webkit-scrollbar{width:10px;background:transparent}
  html::-webkit-scrollbar-track,body::-webkit-scrollbar-track{background:transparent}
  html::-webkit-scrollbar-thumb,body::-webkit-scrollbar-thumb{background:linear-gradient(to bottom,rgba(92,92,92,.92),rgba(58,58,58,.92));border:2px solid transparent;border-radius:999px;background-clip:padding-box}
  body{min-height:400vh}
  body.is-booting{overflow:hidden}
  html.modal-open,body.modal-open{overflow:hidden!important}

  /* ── 粒子背景 canvas ── */
  #particles{position:fixed;inset:0;z-index:1;display:block;pointer-events:none}

  /* ── �?canvas ── */
  #c{position:fixed;inset:0;z-index:5;display:block;pointer-events:auto}

  /* ── 导航 ── */
  nav{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:22px 44px;pointer-events:none}
  .brand-signature{display:flex;align-items:center;gap:14px}
  .brand-copy{display:flex;flex-direction:column;justify-content:center;gap:2px;min-height:38px}
  .brand-mark{width:38px;height:38px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
  .brand-mark svg{width:100%;height:100%;overflow:visible}
  .brand-mark__plate{fill:rgba(16,18,15,.92);stroke:rgba(255,255,255,.1);stroke-width:1}
  .brand-mark__halo{fill:none;stroke:rgba(200,255,0,.18);stroke-width:1.2;stroke-linecap:round}
  .brand-mark__face{stroke:rgba(255,255,255,.08);stroke-width:.9;stroke-linejoin:round}
  .brand-mark__face--top{fill:rgba(255,255,255,.055)}
  .brand-mark__face--left{fill:rgba(255,255,255,.028)}
  .brand-mark__face--right{fill:rgba(200,255,0,.12)}
  .brand-mark__edge{fill:none;stroke:rgba(244,247,239,.8);stroke-width:1.08;stroke-linecap:round;stroke-linejoin:round}
  .brand-mark__edge--soft{stroke:rgba(244,247,239,.28)}
  .brand-mark__accent{fill:rgba(200,255,0,.56)}
  .brand-mark__spark{fill:none;stroke:rgba(200,255,0,.72);stroke-width:1.1;stroke-linecap:round}
  .logo{font-size:12px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;line-height:1}
  .hint{font-size:11px;letter-spacing:.18em;color:var(--muted);text-transform:uppercase}

  /* ── 首屏标题（canvas 下面，z 低） ── */
  #hero-text{position:fixed;bottom:13vh;left:0;right:0;text-align:center;z-index:6;pointer-events:none;transition:opacity .4s}
  #hero-text h1{font-size:clamp(43px,8.8vw,123px);font-weight:200;letter-spacing:.05em;line-height:1.04;text-transform:uppercase}
  #hero-text h1 strong{font-size:1em;font-weight:800;color:var(--accent)}
  #hero-text p{margin-top:10px;font-size:12px;letter-spacing:.22em;color:var(--muted);text-transform:uppercase}

  /* ── 滚动提示 ── */
  #scroll-hint{position:fixed;bottom:34px;left:50%;transform:translateX(-50%);z-index:20;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;transition:opacity .4s}
  #scroll-hint span{font-size:10px;letter-spacing:.26em;color:rgba(240,240,240,.72);text-transform:uppercase}
  #scroll-hint .mouse-icon{position:relative;width:18px;height:30px;border:1px solid rgba(240,240,240,.42);border-radius:999px;background:linear-gradient(to bottom,rgba(255,255,255,.06),rgba(255,255,255,.02));box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
  #scroll-hint .mouse-icon i{position:absolute;top:5px;left:50%;width:2px;height:7px;border-radius:999px;background:var(--accent);transform:translateX(-50%);animation:mouseWheel 1.8s cubic-bezier(.22,.61,.36,1) infinite}
  #scroll-hint .arr{width:1px;height:24px;background:linear-gradient(to bottom,rgba(200,255,0,.65),transparent);animation:ab 2s ease-in-out infinite}
  @keyframes mouseWheel{0%{opacity:0;transform:translate(-50%,0)}18%{opacity:1}64%{opacity:.1;transform:translate(-50%,10px)}100%{opacity:0;transform:translate(-50%,10px)}}
  @keyframes ab{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

  #back-to-top{position:fixed;right:28px;bottom:32px;z-index:30;width:58px;height:58px;border:1px solid rgba(255,255,255,.16);border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.08),rgba(255,255,255,.015) 52%,rgba(0,0,0,.18) 100%),rgba(13,13,13,.82);color:var(--text);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:9px;letter-spacing:.18em;text-transform:uppercase;backdrop-filter:blur(18px);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 10px 30px rgba(0,0,0,.28);opacity:0;transform:translateY(14px) scale(.92);pointer-events:none;transition:opacity .3s,transform .3s,border-color .3s,color .3s,background .3s,box-shadow .3s}
  #back-to-top svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
  #back-to-top span{line-height:1}
  #back-to-top.visible{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
  #back-to-top:hover{border-color:rgba(200,255,0,.45);color:var(--accent);background:radial-gradient(circle at 30% 30%,rgba(200,255,0,.12),rgba(255,255,255,.025) 52%,rgba(0,0,0,.22) 100%),rgba(20,20,20,.92);box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 14px 36px rgba(0,0,0,.34)}

  #cursor-ring,#cursor-dot{position:fixed;left:0;top:0;pointer-events:none;z-index:220;opacity:0;transform:translate(-50%,-50%);will-change:left,top,width,height,opacity}
  #cursor-ring{width:34px;height:34px;border:1px solid rgba(200,255,0,.42);border-radius:50%;background:rgba(200,255,0,.06);transition:width .22s,height .22s,opacity .2s,background .22s,border-color .22s,transform .18s}
  #cursor-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 14px rgba(200,255,0,.5);transition:opacity .2s,background .22s}
  body.cursor-ready #cursor-ring,body.cursor-ready #cursor-dot{opacity:1}
  body.cursor-hover #cursor-ring{width:54px;height:54px;background:rgba(200,255,0,.1);border-color:rgba(200,255,0,.82)}
  body.cursor-pressed #cursor-ring{width:28px;height:28px}
  body.cursor-pressed #cursor-dot{transform:translate(-50%,-50%) scale(.7)}

  @media (pointer:fine){
    html,body,button,.click-area,#c{cursor:none}
  }

  /* ── 作品点击区域（整个图片可点击�?── */
  #click-areas{position:fixed;inset:0;z-index:6;pointer-events:none}
  .click-area{position:absolute;cursor:pointer;pointer-events:auto;opacity:0}
  
  /* ── 作品标题叠层（展开后显示） ── */
  #labels{position:fixed;inset:0;z-index:8;pointer-events:none;opacity:0;transition:opacity .6s;display:block}
  .lbl{position:absolute;overflow:hidden;opacity:0;transform:translate3d(0,6px,0);transition:opacity .22s ease;pointer-events:none;will-change:left,top,width,height,clip-path,opacity,transform}
  .lbl-card{position:absolute;left:-3px;right:-3px;bottom:-8px;min-height:calc(38% + 18px);display:grid;align-content:end;justify-items:stretch;padding:16px 22px 18px;background:linear-gradient(to top,rgba(0,0,0,.96),rgba(0,0,0,.78) 30%,rgba(0,0,0,.3) 68%,transparent);transform:translateZ(0);backface-visibility:hidden}
  .lbl h3{font-size:14px;font-weight:700;letter-spacing:.035em;text-transform:uppercase;color:var(--text);margin:0}
  .lbl span{font-size:10px;letter-spacing:.12em}
  .lbl .click-hint{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border:1px solid rgba(255,255,255,.08);border-radius:50%;color:rgba(240,240,240,.62);background:rgba(255,255,255,.02);opacity:.9;transition:transform .24s ease,border-color .24s ease,color .24s ease,background .24s ease,box-shadow .24s ease}
  .lbl .click-hint svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

  /* ── 作品详情弹窗 ── */
  #modal-overlay{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,0);pointer-events:none;transition:background .5s cubic-bezier(.4,0,.2,1)}
  #modal-overlay.active{background:rgba(0,0,0,.5);pointer-events:auto}
  
  #modal{position:fixed;z-index:101;background:#080808;border-radius:16px 16px 0 0;overflow:hidden;opacity:0;pointer-events:none;transition:all .5s cubic-bezier(.4,0,.2,1);box-shadow:0 25px 80px rgba(0,0,0,.6);width:100vw;max-width:none}
  #modal.active{opacity:1;pointer-events:auto}
  
  #modal-close{position:absolute;top:8px;right:24px;width:44px;height:44px;background:rgba(255,255,255,.1);border:none;border-radius:50%;cursor:pointer;z-index:10;display:flex;align-items:center;justify-content:center;transition:all .3s}
  #modal-close:hover{background:rgba(255,255,255,.2);transform:rotate(90deg)}
  #modal-close svg{width:20px;height:20px;stroke:var(--text);stroke-width:2}
  
  #modal-content{width:100%;height:100%;overflow-y:auto;overflow-x:hidden;max-width:none;margin:0 auto}
  #modal-content{scrollbar-width:thin;scrollbar-color:rgba(76,76,76,.82) transparent}
  #modal-content::-webkit-scrollbar{width:10px}
  #modal-content::-webkit-scrollbar-track{background:transparent;border-left:none}
  #modal-content::-webkit-scrollbar-thumb{background:linear-gradient(to bottom,rgba(92,92,92,.94),rgba(56,56,56,.94));border:2px solid rgba(14,14,14,.92);border-radius:999px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.03)}
  #modal-content::-webkit-scrollbar-thumb:hover{background:linear-gradient(to bottom,rgba(108,108,108,.96),rgba(66,66,66,.96))}
  
  .modal-body{--modal-top-padding:68px;width:min(100%,var(--modal-max-width,1920px));max-width:var(--modal-max-width,1920px);padding:var(--modal-top-padding) 32px 52px;position:relative;margin:0 auto}
  .modal-category{font-size:11px;letter-spacing:.2em;color:var(--accent);text-transform:uppercase;margin-bottom:12px}
  .modal-title{font-size:clamp(28px,4vw,42px);font-weight:700;letter-spacing:.02em;margin-bottom:8px}
  .modal-year{font-size:14px;color:var(--muted);margin-bottom:24px}
  .modal-meta{display:flex;gap:32px;margin-bottom:28px;padding-bottom:28px;border-bottom:1px solid rgba(255,255,255,.1)}
  .modal-meta-item{display:flex;flex-direction:column;gap:4px}
.modal-meta-label{font-size:10px;letter-spacing:.15em;color:var(--muted);text-transform:uppercase}
.modal-meta-value{font-size:14px;color:var(--text)}
.modal-meta-value-year{color:var(--text)}
.modal-description{font-size:16px;line-height:1.8;color:rgba(255,255,255,.8);margin-bottom:40px;max-width:700px}
  
  .modal-gallery{display:grid;gap:24px}
  .modal-gallery-item{border-radius:0;overflow:hidden;position:relative;width:min(100%,var(--modal-max-width,1920px));max-width:var(--modal-max-width,1920px);margin:0 auto;box-shadow:none;background:transparent}
  .modal-gallery-item img,.modal-gallery-item video{width:min(100%,var(--modal-max-width,1920px));max-width:var(--modal-max-width,1920px);display:block;margin:0 auto;border-radius:0;box-shadow:none}
  .modal-gallery-caption{position:absolute;bottom:0;left:0;right:0;padding:16px 20px;background:linear-gradient(to top,rgba(0,0,0,.8),transparent);font-size:13px;color:var(--text)}
  .modal-gallery-item video{background:#000}
  
  /* 弹窗展开动画的起始状态（从点击的图片位置展开�?*/
  #modal.from-card{border-radius:4px}