:root{
  --bg:#0a0a0b;
  --fg:#ededeb;
  --mute:#76767a;
  --line:rgba(237,237,235,.12);
  --accent:#ff6b3d;
  --px:clamp(20px,4.2vw,64px);
  --ease:cubic-bezier(.16,1,.3,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{
  background:var(--bg);color:var(--fg);
  font-family:"Inter Tight","Inter",-apple-system,"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei",sans-serif;
  font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{display:block}
::selection{background:var(--accent);color:#000}
.mono{font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;font-size:12px;letter-spacing:.02em;text-transform:uppercase}

#gl{position:fixed;inset:0;width:100%;height:100lvh;z-index:0;pointer-events:none}
main{position:relative;z-index:1}

/* line mask reveal */
.ln{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.ln>span{display:inline-block;will-change:transform}

/* ---------- top ---------- */
.top{position:fixed;top:0;left:0;right:0;z-index:10;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:22px var(--px);mix-blend-mode:difference;color:#fff}
.top__name{font-weight:600;font-size:15px;letter-spacing:-.01em}
.top__nav{display:flex;gap:32px;font-size:14px}
.top__nav a{opacity:.6;transition:opacity .3s}
.top__nav a:hover,.top__nav a.on{opacity:1}
.top__clock{justify-self:end;opacity:.6}

/* ---------- hero ---------- */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:space-between;padding:110px var(--px) 32px}
.hero__meta{display:flex;justify-content:space-between;color:var(--mute);max-width:560px}
.hero__title{font-size:clamp(46px,8.4vw,148px);font-weight:500;line-height:.98;letter-spacing:-.045em}
.hero__title em{font-style:normal;color:var(--accent);font-weight:300}
.hero__foot{display:flex;justify-content:space-between;align-items:flex-end;gap:20px}
.who{display:flex;align-items:center;gap:14px}
.who img{width:44px;height:44px;border-radius:10px;object-fit:cover}
.who b{display:block;font-weight:500;font-size:15px}
.who span{display:block;color:var(--mute);font-size:13px;margin-top:2px}
.scroll{display:flex;align-items:center;gap:12px;color:var(--mute)}
.scroll i{width:48px;height:1px;background:var(--line);position:relative;overflow:hidden}
.scroll i::after{content:"";position:absolute;inset:0;background:var(--fg);animation:sc 2.2s var(--ease) infinite}
@keyframes sc{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}

/* ---------- common ---------- */
section{padding-left:var(--px);padding-right:var(--px)}
.label{display:flex;gap:14px;color:var(--mute);padding-top:18px;border-top:1px solid var(--line);margin-bottom:clamp(40px,7vw,100px)}
.label span{color:var(--accent)}

/* ---------- contact ---------- */
.contact{min-height:100svh;display:flex;flex-direction:column;padding-top:clamp(80px,14vh,160px);padding-bottom:28px}
.contact__lead{color:var(--mute);font-size:clamp(16px,1.4vw,20px)}
.contact__big{display:flex;align-items:flex-start;gap:.15em;margin-top:18px;font-size:clamp(46px,11vw,200px);font-weight:500;letter-spacing:-.055em;line-height:1}
.contact__big i{font-style:normal;font-size:.35em;color:var(--accent);margin-top:.2em;transition:transform .6s var(--ease)}
.contact__big:hover i{transform:translate(8px,-8px)}
.social{margin-top:auto;padding-top:80px;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.social a{padding:22px 0;display:flex;flex-direction:column;gap:6px;border-right:1px solid var(--line);padding-left:20px}
.social a:first-child{padding-left:0}
.social a:last-child{border-right:0}
.social span{color:var(--mute)}
.social b{font-weight:500;font-size:clamp(16px,1.6vw,22px);letter-spacing:-.02em;transition:color .3s}
.social a:hover b{color:var(--accent)}
.foot{display:flex;justify-content:space-between;color:var(--mute);padding-top:22px;border-top:1px solid var(--line)}
.foot a:hover{color:var(--fg)}

/* ---------- mobile ---------- */
@media (max-width:760px){
  .top{grid-template-columns:1fr auto;padding:18px var(--px)}
  .top__clock{display:none}
  .top__nav{gap:20px;font-size:13px}
  .hero{padding-top:96px}
  .hero__meta{flex-direction:column;gap:6px}
  .hero__title{font-size:clamp(40px,12.4vw,72px)}
  .scroll{display:none}
  .about__text{font-size:clamp(22px,6.2vw,30px)}
  .row{grid-template-columns:28px 1fr auto;grid-template-areas:"i name go" ". desc desc" ". meta meta";row-gap:6px;column-gap:12px}
  .row__i{grid-area:i;align-self:start;padding-top:.7em}
  .row__name{grid-area:name;font-size:28px}
  .row__go{grid-area:go}
  .row__desc{grid-area:desc;font-size:14px}
  .row__tag{grid-area:meta}
  .row__star{grid-area:meta;justify-self:start;margin-left:80px}
  .social{grid-template-columns:1fr}
  .social a{border-right:0;border-bottom:1px solid var(--line);padding-left:0;flex-direction:row;justify-content:space-between;align-items:center}
  .social a:last-child{border-bottom:0}
}
@media (prefers-reduced-motion:reduce){.stack__track,.scroll i::after{animation:none}}


/* ---------- loader ---------- */
.loader{position:fixed;inset:0;z-index:50;background:var(--bg);display:grid;place-items:center;color:var(--mute);transition:opacity .8s var(--ease)}
.loader.done{opacity:0;pointer-events:none}

/* ---------- HUD ---------- */
.hud{position:fixed;right:var(--px);bottom:28px;z-index:10;display:flex;align-items:center;gap:12px;color:var(--mute);font-size:11px}
.hud i{width:80px;height:1px;background:var(--line);position:relative;overflow:hidden}
.hud b{position:absolute;inset:0;background:var(--accent);transform-origin:left;transform:scaleX(0)}
.hud #hudIdx{color:var(--fg)}

/* ---------- chapters ---------- */
.chap{position:relative;height:calc(var(--steps) * var(--step,100vh));padding:0}
.chap__sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.panel{transition:opacity .7s var(--ease),transform .9s var(--ease),filter .7s var(--ease)}
.kicker{color:var(--mute);display:flex;gap:12px}
.kicker span{color:var(--accent)}
.cap{color:var(--mute);font-size:clamp(15px,1.25vw,18px);line-height:1.75;max-width:26em}
em{font-style:normal;color:var(--fg)}

/* story：居中舞台，文字在四角 */
.chap--center .panel{position:absolute;inset:0;padding:100px var(--px) 70px;display:grid;
  grid-template-columns:1fr auto;grid-template-rows:auto 1fr auto;opacity:0;transform:translateY(40px);filter:blur(8px);pointer-events:none}
.chap--center .panel.on{opacity:1;transform:none;filter:none}
.chap--center .kicker{grid-column:1/3}
.chap--center .big{grid-row:3;align-self:end;font-size:clamp(64px,13vw,230px);font-weight:500;letter-spacing:-.06em;line-height:.85}
.chap--center .mono-big{font-family:"JetBrains Mono",monospace;font-weight:700;letter-spacing:-.04em;color:#3ddc84}
.big .dot{color:var(--accent)}
.chap--center .cap{grid-row:3;grid-column:2;align-self:end;max-width:300px;text-align:right;padding-bottom:1em}

/* split：左文右粒子 */
.chap--split .chap__sticky{display:flex;align-items:center}
.side{width:min(560px,44vw);margin-left:var(--px)}
.side .label{margin-bottom:34px}
.about__lead{font-size:clamp(22px,2.3vw,36px);line-height:1.35;letter-spacing:-.02em;color:#b9b9b6}
.about__lead em{color:var(--fg);border-bottom:1px solid var(--accent)}
.about__steps{position:relative;height:150px;margin-top:44px}
.about__steps .panel{position:absolute;inset:0;opacity:0;transform:translateY(24px);filter:blur(6px)}
.about__steps .panel.on{opacity:1;transform:none;filter:none}
.about__steps .kicker{font-size:13px;margin-bottom:12px}
.about__steps .kicker{color:var(--fg)}

/* 项目列表 */
.plist{list-style:none;border-top:1px solid var(--line)}
.plist li{border-bottom:1px solid var(--line);opacity:.35}
.plist li.on{opacity:1}
.plist a{display:grid;grid-template-columns:44px 1fr;align-items:baseline;padding:20px 0;column-gap:8px}
.plist__i{color:var(--mute)}
.plist li.on .plist__i{color:var(--accent)}
.plist__name{font-size:clamp(26px,2.8vw,44px);font-weight:500;letter-spacing:-.035em;transition:transform .7s var(--ease)}
.plist li.on .plist__name{transform:translateX(8px)}
.plist__more{grid-column:2;display:grid;grid-template-rows:0fr;transition:grid-template-rows .7s var(--ease)}
.plist__more>*{overflow:hidden}
.plist li.on .plist__more{grid-template-rows:1fr}
.plist__desc{display:block;color:var(--mute);font-size:15px;padding:10px 0 0 8px}
.plist__meta{display:block;color:var(--mute);padding:8px 0 0 8px}
.plist li:hover{opacity:1}
.all{display:inline-block;margin-top:24px;color:var(--mute);transition:color .3s}
.all:hover{color:var(--fg)}
.label{display:flex;gap:14px;color:var(--mute);padding-top:18px;border-top:1px solid var(--line);margin-bottom:clamp(40px,7vw,100px)}
.label span{color:var(--accent)}

/* contact 让出右侧给方块 */
.contact__big{position:relative;z-index:1}

@media (max-width:760px){
  .hud{bottom:18px}
  .chap--center .panel{padding:90px var(--px) 60px;grid-template-columns:1fr}
  .chap--center .big{font-size:clamp(56px,20vw,110px)}
  .chap--center .cap{grid-column:1;grid-row:4;text-align:left;padding:14px 0 0}
  .chap--split .chap__sticky{align-items:flex-end}
  .side{width:auto;margin:0 var(--px) 60px;padding-top:24px;
    background:linear-gradient(transparent,rgba(10,10,11,.85) 18%)}
  .side .label{margin-bottom:18px}
  .about__lead{font-size:18px}
  .about__steps{height:130px;margin-top:22px}
  .plist a{padding:13px 0}
  .plist__name{font-size:24px}
  .plist__desc{font-size:13px}
  .hero__title{position:relative;z-index:1}
}

/* ---------- v4：Break / Rebuild ---------- */
.inter{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;pointer-events:none}
.marker{display:none}
.inter__word{display:flex;align-items:center;gap:.3em;font-size:clamp(48px,11vw,190px);font-weight:500;letter-spacing:-.05em;line-height:1;position:relative;z-index:1}
.inter__word span{display:inline-block;opacity:0}
.inter__word em{font-style:normal;font-size:.25em;color:var(--accent)}
.inter__sub{color:var(--mute);opacity:0}
.hero__title{font-size:clamp(64px,12vw,210px)}
.hero__title em{color:var(--accent);font-weight:500}
/* about chips */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:40px}
.chips span{padding:8px 14px;border:1px solid var(--line);border-radius:99px;color:var(--mute);transition:all .5s var(--ease)}
.chips span.on{color:var(--bg);background:var(--fg);border-color:var(--fg)}
/* work mini */
.work{min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:0}
.mini{list-style:none;border-top:1px solid var(--line)}
.mini li{border-bottom:1px solid var(--line)}
.mini a{display:flex;justify-content:space-between;align-items:baseline;padding:16px 0;transition:padding .5s var(--ease)}
.mini b{font-weight:500;font-size:clamp(20px,1.8vw,26px);letter-spacing:-.02em}
.mini span{color:var(--mute)}
.mini a:hover{padding-left:10px}
.mini a:hover b{color:var(--accent)}
@media (max-width:760px){
  .inter__word{flex-direction:column;gap:.1em}
  .work{align-items:flex-end}
  .work .side{margin-bottom:70px}
}

.inter{justify-content:flex-start;padding-top:13vh}
@media (max-width:760px){.inter{justify-content:flex-end;padding:0 0 12vh}.inter__word{font-size:clamp(44px,14vw,72px)}}

/* ---------- LAB ---------- */
.lab{display:flex;align-items:flex-end;padding:0 var(--px) 80px}
.lab__label{position:absolute;top:90px;left:var(--px);right:var(--px)}
.lab__panels{position:relative;height:120px;width:min(520px,90vw)}
.lab__panels .panel{position:absolute;left:0;bottom:0;opacity:0;transform:translateY(30px);filter:blur(8px)}
.lab__panels .panel.on{opacity:1;transform:none;filter:none}
.lab h3{font-size:clamp(40px,6vw,96px);font-weight:500;letter-spacing:-.045em;line-height:1}
.lab p{color:var(--accent);margin-top:12px;text-transform:none}
.lab__hint{position:absolute;right:var(--px);bottom:84px;color:var(--mute)}

/* ---------- FLOW ---------- */
.flow{display:flex;align-items:center;justify-content:center}
.flow__label{position:absolute;top:90px;left:var(--px);right:var(--px);margin:0}
.flow__label b{color:var(--fg);font-weight:500}
.stage{position:relative;width:min(760px,92vw);height:min(460px,62vh)}
.win,.pr{position:absolute;inset:0;margin:auto;border-radius:12px;overflow:hidden;will-change:transform,opacity}
.win{background:#1e1e1e;border:1px solid #333;box-shadow:0 40px 120px rgba(0,0,0,.6);display:flex;flex-direction:column}
.win__bar{height:34px;display:flex;align-items:center;gap:8px;padding:0 14px;background:#2b2b2b;border-bottom:1px solid #1a1a1a}
.win__bar i{width:11px;height:11px;border-radius:50%;background:#ff5f57}
.win__bar i:nth-child(2){background:#febc2e}.win__bar i:nth-child(3){background:#28c840}
.win__bar span{margin-left:auto;margin-right:auto;color:#8a8a8a;font-size:11px;text-transform:none}
.win__body{flex:1;display:flex;min-height:0}
.win__side{width:48px;background:#252526;display:flex;flex-direction:column;gap:18px;padding:16px 12px}
.win__side b{height:22px;border-radius:4px;background:#3c3c3c}.win__side b:first-child{background:#6e6e6e}
.win__main{flex:1;display:flex;flex-direction:column;min-width:0}
.win__tabs{display:flex;background:#252526;font-size:12px;text-transform:none}
.win__tabs span{padding:9px 16px;color:#8a8a8a;border-right:1px solid #1a1a1a}
.win__tabs .on{background:#1e1e1e;color:#fff;border-top:1px solid #ff6b3d}
.win__code{flex:1;padding:16px 18px;font-size:clamp(10px,1.15vw,13.5px);line-height:1.75;color:#d4d4d4;white-space:pre-wrap;word-break:break-all;overflow:hidden;text-transform:none}
.win__code i{font-style:normal}
.tc{color:#6a9955}.tk{color:#569cd6}.tu{color:#9cdcfe}.tf{color:#dcdcaa}.tn{color:#b5cea8}
.caret{display:inline-block;width:2px;height:1.1em;background:#fff;vertical-align:text-bottom;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.win__status{height:24px;display:flex;justify-content:space-between;align-items:center;padding:0 12px;background:#ff6b3d;color:#111;font-size:11px;text-transform:none}

.pr{width:min(560px,92vw);height:max-content;padding:26px;background:#0d1117;border:1px solid #30363d;box-shadow:0 40px 120px rgba(0,0,0,.6);opacity:0;color:#e6edf3;
  font-family:-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;transition:border-color .5s,box-shadow .5s}
.pr__head{display:flex;flex-direction:column;gap:12px}
.pr__badge{align-self:flex-start;display:flex;align-items:center;gap:6px;padding:5px 12px;border-radius:99px;background:#238636;color:#fff;font-size:13px;font-weight:600;transition:background .4s}
.pr__badge svg{width:14px;height:14px}
.pr h4{font-size:clamp(20px,2.3vw,26px);font-weight:600;letter-spacing:-.01em}
.pr h4 em{color:#7d8590;font-weight:300}
.pr__branch{margin-top:10px;color:#7d8590;font-size:12px;text-transform:none}
.pr__branch b{color:#58a6ff;background:rgba(56,139,253,.15);padding:1px 6px;border-radius:6px;font-weight:400}
.pr__checks{margin-top:18px;border:1px solid #30363d;border-radius:8px}
.pr__checks div{padding:12px 14px;font-size:14px;display:flex;align-items:center;gap:10px}
.pr__checks div+div{border-top:1px solid #30363d}
.pr__checks i{font-style:normal;color:#3fb950}
.pr__checks span{margin-left:auto;color:#7d8590}
.pr__diff{margin-top:14px;display:flex;gap:14px;font-size:12px;color:#7d8590;text-transform:none}
.pr__diff .add{color:#3fb950}.pr__diff .del{color:#f85149}
.pr__btn{margin-top:18px;width:100%;padding:12px;border:0;border-radius:8px;background:#238636;color:#fff;font-size:15px;font-weight:600;cursor:pointer;transition:background .4s,transform .2s}
.pr__btn:hover{background:#2ea043}
.pr.merged{border-color:#8957e5;box-shadow:0 0 0 1px #8957e5,0 30px 120px rgba(137,87,229,.35)}
.pr.merged .pr__badge,.pr.merged .pr__btn{background:#8957e5}
.cursor{position:absolute;left:0;top:0;width:28px;height:28px;opacity:0;pointer-events:none;z-index:3;filter:drop-shadow(0 4px 8px rgba(0,0,0,.5))}
.flow{pointer-events:auto}
@media (max-width:760px){
  .lab{padding-bottom:60px}
  .lab h3{font-size:40px}
  .lab__hint{display:none}
  .stage{height:56vh}
  .win__side{display:none}
  .pr{padding:18px}
}

/* ---------- v6 flow（粒子） ---------- */
.flow{display:block}
.flow__label{position:absolute;top:90px;left:var(--px);right:var(--px);margin:0}
.flow__caps{position:absolute;left:0;right:0;bottom:70px;height:20px;text-align:center}
.flow__caps .panel{position:absolute;left:0;right:0;opacity:0;transform:translateY(10px);color:var(--mute);letter-spacing:.2em}
.flow__caps .panel.on{opacity:1;transform:none;color:var(--fg)}
.hint-touch{display:none}
@media (pointer:coarse){.hint-touch{display:inline}.hint-desk{display:none}}
.scroll{gap:8px}
.scroll i{margin-left:6px}
/* 平板竖屏：沿用手机布局 */
@media (min-width:761px) and (max-aspect-ratio:9/10){
  .top__clock{display:none}
  .hero__title{font-size:clamp(80px,15vw,150px)}
  .chap--split .chap__sticky{align-items:flex-end}
  .side{width:auto;margin:0 var(--px) 90px;padding-top:30px;background:linear-gradient(transparent,rgba(10,10,11,.85) 18%)}
  .work{align-items:flex-end}
  .work .side{margin-bottom:110px}
  .inter{justify-content:flex-end;padding:0 0 14vh}
  .contact__big{font-size:12vw}
}
@media (max-width:760px){ .scroll{display:flex;font-size:10px} .flow__caps{bottom:56px} }

/* ---------- v7 ---------- */
.aboutme{min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:0}
.aboutme .about__lead{margin-top:14px}
.about__lead.dim{color:var(--mute);font-size:clamp(16px,1.5vw,22px)}
.flow__cap{position:absolute;left:0;right:0;bottom:70px;text-align:center;color:var(--fg);letter-spacing:.25em}
#hudName{display:none}
@media (max-width:760px),(max-aspect-ratio:9/10){
  .aboutme{align-items:flex-end}
  .aboutme .side{margin-bottom:80px}
  .flow__cap{bottom:56px}
}

.inter{padding:0}