@font-face { font-family: "Unbounded"; font-weight: 900; font-display: swap; src: url(assets/fonts/unbounded-latin-900-normal.woff2) format("woff2"); }
@font-face { font-family: "Unbounded"; font-weight: 500; font-display: swap; src: url(assets/fonts/unbounded-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "JBMono"; font-weight: 400; font-display: swap; src: url(assets/fonts/jetbrains-mono-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "JBMono"; font-weight: 700; font-display: swap; src: url(assets/fonts/jetbrains-mono-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "GuoCN"; font-weight: 900; font-display: swap; src: url(assets/fonts/guo-cn-900.woff2) format("woff2"); }

:root {
  --bg: #06070b;
  --bg-2: #0d0f16;
  --line: #1c2030;
  --fg: #eef1f7;
  --dim: #7d8499;
  --blue: #3d7bff;
  --cyan: #38e1ff;
  --orange: #ff6b1a;
  --yellow: #ffd23f;
  --red: #ff3b5c;
  --green: #3dff8a;
  --arch: #1793d1;
  --riscv: #fdb515;
  --display: "Unbounded", "GuoCN", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --cnh: "GuoCN", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --cn: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --mono: "JBMono", ui-monospace, "SF Mono", Menlo, "GuoCN", monospace;
  --gutter: clamp(16px, 4vw, 56px);
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); overflow-x: clip; }
body.pre .hero, body.pre .nav, body.pre .hud-site { visibility: hidden; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--cn);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
body.is-intro { overflow: hidden; height: 100vh; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
code { font-family: var(--mono); font-size: .92em; color: var(--cyan); }
::selection { background: var(--blue); color: #fff; }

/* ─────────── 全局质感 ─────────── */
.fx-grain, .fx-scan { position: fixed; inset: 0; pointer-events: none; z-index: 300; }
.fx-grain {
  opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain .5s steps(4) infinite;
}
@keyframes grain { 0%{transform:translate(0,0)} 25%{transform:translate(-3%,2%)} 50%{transform:translate(2%,-3%)} 75%{transform:translate(-2%,-1%)} 100%{transform:translate(0,0)} }
.fx-scan { opacity: .06; background: repeating-linear-gradient(0deg, #fff 0 1px, transparent 1px 3px); }

.cursor { position: fixed; left: 0; top: 0; width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 1px solid rgba(238,241,247,.5); border-radius: 50%; pointer-events: none; z-index: 400; mix-blend-mode: difference; transition: width .25s, height .25s, margin .25s, background .25s; }
.cursor i { position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px; background: #fff; border-radius: 50%; }
.cursor.is-hover { width: 64px; height: 64px; margin: -32px 0 0 -32px; background: rgba(255,255,255,.9); }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

/* ─────────── INTRO ─────────── */
#intro { position: fixed; inset: 0; z-index: 200; background: #000; overflow: hidden; }
#intro.done { display: none; }
.shot { position: absolute; inset: 0; display: grid; place-items: center; visibility: hidden; overflow: hidden; }
.shot.on { visibility: visible; }
.letterbox { position: absolute; left: 0; right: 0; height: 11vh; background: #000; z-index: 20; }
.letterbox.top { top: 0; } .letterbox.bottom { bottom: 0; }
.flash { position: absolute; inset: 0; background: #fff; opacity: 0; z-index: 25; pointer-events: none; }

.hud { position: absolute; inset: 0; z-index: 30; font: 500 11px/1 var(--mono); letter-spacing: .14em; color: rgba(238,241,247,.72); pointer-events: none; }
.hud > span { position: absolute; display: flex; align-items: center; gap: 10px; }
.hud-tl { top: 3.6vh; left: var(--gutter); }
.hud-tr { top: 3.6vh; right: var(--gutter); font-variant-numeric: tabular-nums; }
.hud-bl { bottom: 3.6vh; left: var(--gutter); }
.hud-bl b { color: var(--yellow); }
.hud-br { bottom: 3.2vh; right: var(--gutter); pointer-events: auto; }
.rec { width: 8px; height: 8px; border-radius: 50%; background: var(--red); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.hud-btn { font: 500 11px/1 var(--mono); letter-spacing: .12em; padding: 8px 10px; border: 1px solid rgba(238,241,247,.25); color: rgba(238,241,247,.85); transition: background .2s, color .2s, border-color .2s; }
.hud-btn:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.hud-btn b { color: var(--yellow); font-weight: 700; }
.hud-btn kbd { font: inherit; opacity: .5; margin-left: 4px; }

/* terminal */
.term { width: min(880px, 92vw); background: #0b0d14; border: 1px solid #22283a; border-radius: 10px; box-shadow: 0 30px 120px rgba(61,123,255,.18), 0 0 0 1px rgba(255,255,255,.02) inset; overflow: hidden; }
.term-bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; background: #121521; border-bottom: 1px solid #1f2436; font: 12px var(--mono); color: var(--dim); }
.term-bar i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.term-bar i:nth-child(2) { background: #febc2e; } .term-bar i:nth-child(3) { background: #28c840; }
.term-bar span { margin-left: 10px; }
.term-body { font: 400 clamp(11px, 1.35vw, 14.5px)/1.6 var(--mono); padding: 18px 20px 22px; min-height: 46vh; max-height: 62vh; overflow: hidden; white-space: pre-wrap; word-break: break-all; color: #cdd3e3; }
.term-body .ok { color: var(--green); } .term-body .warn { color: var(--yellow); } .term-body .t { color: var(--dim); }
.term-body .p { color: var(--cyan); } .term-body .hl { color: #fff; font-weight: 700; }
.term-body .bar { color: var(--blue); }
.caret-b { display: inline-block; width: .6em; height: 1.1em; vertical-align: -.2em; background: var(--fg); animation: blink .9s steps(2) infinite; }

/* shots */
.trait.corner { position: absolute; right: var(--gutter); bottom: 13vh; font: 900 clamp(28px, 4.6vw, 72px)/1 var(--display); color: rgba(255,255,255,.14); letter-spacing: -.01em; }
.trait.corner.dark { color: rgba(0,0,0,.18); }
.cap { position: absolute; left: var(--gutter); bottom: 14vh; font: 500 clamp(13px, 1.4vw, 17px)/1.4 var(--mono); letter-spacing: .04em; color: rgba(255,255,255,.8); max-width: 70vw; }
.cap.dark { color: rgba(0,0,0,.72); }
.mask { overflow: hidden; line-height: 1; padding-bottom: .06em; }
.mask span { display: inline-block; }

/* 登录：CRT 开机 + 巨大的 >_，字直接敲在大字里 */
.shot-login { background: #000; }
.crt { position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: #fff; box-shadow: 0 0 40px 8px rgba(120,170,255,.8); transform: scaleX(0); z-index: 3; }
.giant-prompt { position: relative; display: flex; align-items: baseline; font: 700 30vw/1 var(--mono); color: var(--fg); white-space: pre; text-shadow: .02em 0 rgba(255,0,90,.6), -.02em 0 rgba(0,220,255,.6); }
.gp-gt { color: var(--blue); margin-right: .25em; text-shadow: 0 0 .25em rgba(61,123,255,.6); }
.gp-text b { color: var(--yellow); font-weight: 700; }
.gp-text .ok { color: var(--green); }
.gp-us { display: inline-block; width: .6em; height: .1em; margin-left: .04em; background: var(--fg); animation: blink 1s steps(2) infinite; }

/* LV.1 菜鸟 */
.shot-lv { background: #0a0b12; background-image: linear-gradient(rgba(61,123,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(61,123,255,.07) 1px, transparent 1px); background-size: 48px 48px; }
.lv { font-family: var(--mono); width: min(900px, 86vw); }
.lv-top { display: flex; gap: 16px; align-items: baseline; font-size: clamp(12px, 1.2vw, 15px); letter-spacing: .3em; color: var(--dim); }
.lv-top b { color: var(--fg); letter-spacing: .2em; }
.lv-big { font: 900 clamp(110px, 22vw, 360px)/.9 var(--display); letter-spacing: -.04em; color: var(--fg); margin: 10px 0 6px; }
.lv-big span { color: var(--yellow); }
.lv-class { font: 900 clamp(18px, 2.4vw, 34px)/1.3 var(--cnh); color: var(--fg); }
.lv-bar { margin-top: 26px; height: 14px; border: 2px solid var(--fg); padding: 2px; }
.lv-bar i { display: block; height: 100%; width: 0; background: var(--green); }
.lv-exp { margin-top: 10px; font-size: clamp(12px, 1.2vw, 15px); color: var(--dim); letter-spacing: .08em; }
.lv-exp b { color: var(--green); }
.lv-stamp { position: absolute; right: 5vw; top: 15vh; z-index: 3; font: 900 clamp(22px, 3vw, 44px)/1 var(--display); color: var(--fg); transform: rotate(8deg); text-align: center; }
.lv-stamp b { display: block; margin-top: 8px; font-size: 1.8em; color: #0a0b12; background: var(--red); padding: .08em .3em; }

/* Arch */
.shot-arch { background: var(--arch); }
.stack-words { font: 900 clamp(64px, 15vw, 250px)/.9 var(--display); letter-spacing: -.03em; color: #fff; text-align: left; }
.stack-words .small { font-size: .32em; color: #04263d; margin-top: .3em; }

.shot-ctf { background: #0a0204; }
.hexrain { position: absolute; inset: -10% 0 0; font: 12px/1.35 var(--mono); color: rgba(255,59,92,.28); white-space: pre; overflow: hidden; }
.stamp { position: relative; z-index: 2; font: 900 clamp(48px, 11vw, 190px)/1 var(--display); color: var(--red); letter-spacing: -.02em; text-shadow: 4px 0 var(--cyan), -4px 0 #ff00c8; }
.segv { position: absolute; top: 20vh; left: 50%; transform: translateX(-50%); z-index: 2; font: 700 clamp(12px, 1.6vw, 20px) var(--mono); letter-spacing: .3em; color: #fff; background: var(--red); padding: .45em .9em; white-space: nowrap; }
.segv em { font-style: normal; opacity: .7; letter-spacing: .1em; }

.shot-vibe { background: radial-gradient(120% 90% at 30% 20%, #4b8bff 0%, #1c3cc9 45%, #0a1250 100%); }
.vibe { display: flex; flex-direction: column; font: 900 clamp(70px, 16vw, 270px)/.86 var(--display); letter-spacing: -.04em; color: #fff; }
.vibe span:nth-child(2) { color: transparent; -webkit-text-stroke: 2px #fff; padding-left: .5em; }
.counter { position: absolute; top: 18vh; right: var(--gutter); font: 500 clamp(12px, 1.3vw, 16px) var(--mono); letter-spacing: .2em; color: rgba(255,255,255,.75); text-align: right; }
.counter b { display: block; font: 900 clamp(34px, 5vw, 76px)/1 var(--display); color: var(--yellow); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.counter em { display: block; margin-top: 10px; font-style: normal; letter-spacing: .06em; color: rgba(255,255,255,.6); }

/* 开坑 */
.shot-pit { background: var(--riscv); }
.circuit { position: absolute; inset: 0; width: 100%; height: 100%; }
.circuit path { fill: none; stroke: rgba(0,0,0,.3); stroke-width: 2.2; }
.circuit circle { fill: #1b2a6b; }
.pit { position: relative; z-index: 2; color: #16215c; }
.pit-row { display: flex; align-items: baseline; gap: .3em; font: 900 clamp(60px, 12vw, 200px)/.95 var(--display); letter-spacing: -.03em; }
.pit-k { font: 900 .42em/1 var(--cnh); letter-spacing: 0; width: 2.3em; }
.pit-row b { font-variant-numeric: tabular-nums; }
.pit-done { color: rgba(22,33,92,.45); }
.pit-stamp { position: absolute; left: calc(100% + .25em); top: 22%; white-space: nowrap; font: 900 clamp(34px, 6vw, 96px)/1 var(--cnh); color: var(--red); border: .08em solid var(--red); padding: .06em .3em; transform: rotate(-14deg); background: rgba(253,181,21,.6); }

/* 摸鱼 */
.shot-fish { background: #020604; }
.build-log { position: absolute; inset: 0; padding: 12vh var(--gutter); font: 11.5px/1.45 var(--mono); color: rgba(61,255,138,.3); white-space: pre; overflow: hidden; }
.sea { position: absolute; inset: 0; overflow: hidden; }
.sea span { position: absolute; left: 0; font: 700 18px var(--mono); color: rgba(56,225,255,.75); white-space: pre; text-shadow: 0 0 12px rgba(56,225,255,.6); }
.fish-text { position: relative; z-index: 2; font: 700 clamp(34px, 6.4vw, 100px)/1.25 var(--mono); color: var(--fg); }
.fish-text { text-shadow: 0 0 30px rgba(0,0,0,.9); }
.fish-text .k { color: var(--green); }
.fish-text b { color: #06070b; background: var(--yellow); padding: 0 .15em; }

/* 运气 */
.shot-luck { background: #080808; transition: none; }
.shot-luck.good { background: var(--yellow); }
.shot-luck.good .luck-a, .shot-luck.good .flip.good { color: #06070b; }
.shot-luck.good .luck-b, .shot-luck.good .cap { color: rgba(6,7,11,.7); }
.shot-luck.good .trait { color: rgba(0,0,0,.18); }
.luck { text-align: center; }
.luck-a { font: 900 clamp(70px, 15vw, 250px)/1 var(--display); letter-spacing: -.03em; color: var(--fg); }
.flip { display: inline-block; min-width: 3.3ch; text-align: right; }
.flip.good { color: var(--yellow); }
.luck-b { margin-top: 18px; font: 500 clamp(14px, 2vw, 28px) var(--mono); letter-spacing: .12em; color: var(--dim); }

/* 朋友 */
.shot-friends { background: var(--blue); }
.friends { font: 900 clamp(48px, 10vw, 170px)/1.1 var(--cnh); color: var(--fg); }
.friends .me { color: #06070b; background: var(--yellow); padding: 0 .12em; }

/* 座右铭 */
.shot-motto { background: #000; }
.motto { font: 900 clamp(30px, 5.4vw, 88px)/1.2 var(--cnh); color: var(--fg); text-align: center; padding: 0 var(--gutter); }

.shot-montage { background: #000; }
.montage-word { font: 900 clamp(70px, 19vw, 320px)/1 var(--display); letter-spacing: -.04em; white-space: nowrap; }

.shot-title { background: var(--bg); }
.title-bg { position: absolute; font: 900 clamp(90px, 24vw, 420px)/1 var(--display); color: transparent; -webkit-text-stroke: 1px rgba(61,123,255,.35); letter-spacing: -.03em; white-space: nowrap; }
.title-cn { position: relative; font: 900 clamp(76px, 17vw, 280px)/1 var(--display); letter-spacing: .02em; display: flex; }
.title-cn .ch { display: inline-block; }
.title-cn .ch:nth-child(n+3) { color: var(--blue); }
.title-tag { position: absolute; top: calc(50% + clamp(60px, 11vw, 180px)); font: 500 clamp(12px, 1.4vw, 17px) var(--mono); letter-spacing: .18em; color: var(--dim); text-transform: uppercase; }

/* ─────────── 章节转场 ─────────── */
#shutter { position: fixed; inset: 0; z-index: 250; pointer-events: none; visibility: hidden; }
#shutter .bars { position: absolute; inset: 0; display: flex; }
#shutter .bars i { flex: 1; height: 100%; background: var(--fg); transform: scaleY(0); transform-origin: 50% 100%; }
#shutter .bars i:nth-child(3n+2) { background: var(--blue); }
#shutter .bars i:nth-child(3n) { background: #10131d; }
#shutter .card { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: var(--bg); mix-blend-mode: difference; }
#shutter .card-no { font: 500 13px var(--mono); letter-spacing: .5em; color: #fff; }
#shutter .card-name { font: 900 clamp(56px, 12vw, 200px)/1 var(--display); color: #fff; letter-spacing: -.03em; text-transform: uppercase; }

/* ─────────── NAV ─────────── */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; gap: 24px; padding: 18px var(--gutter); mix-blend-mode: difference; }
.logo { display: flex; align-items: flex-end; justify-content: center; gap: 1px; width: 44px; height: 40px; border: 1.5px solid #fff; padding-bottom: 7px; font: 700 18px/1 var(--mono); color: #fff; }
.logo .lg-us { animation: blink 1s steps(2) infinite; }
.logo:hover { background: #fff; color: #000; }
.nav nav { display: flex; gap: 22px; margin: 0 auto; }
.nav nav a { position: relative; font: 500 12px var(--mono); letter-spacing: .08em; color: #fff; opacity: .7; transition: opacity .2s; }
.nav nav a i { font-style: normal; font-size: 9px; margin-right: 6px; opacity: .6; }
.nav nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: #fff; transform: scaleX(0); transform-origin: right; transition: transform .35s cubic-bezier(.7,0,.2,1); }
.nav nav a:hover, .nav nav a.active { opacity: 1; }
.nav nav a:hover::after, .nav nav a.active::after { transform: scaleX(1); transform-origin: left; }
.nav-tools { display: flex; gap: 8px; }
.nav .hud-btn { color: #fff; border-color: rgba(255,255,255,.35); }
.nav .hud-btn b { color: #fff; }

.hud-site { position: fixed; left: var(--gutter); right: var(--gutter); bottom: 18px; z-index: 90; display: flex; justify-content: space-between; font: 500 10.5px var(--mono); letter-spacing: .16em; color: rgba(238,241,247,.45); pointer-events: none; font-variant-numeric: tabular-nums; mix-blend-mode: difference; }
.hud-site b { color: var(--fg); }

/* ─────────── HERO ─────────── */
.hero { position: relative; min-height: 100vh; display: flex; align-items: center; padding: 110px var(--gutter) 90px; overflow: hidden; }
.hero-band { position: absolute; left: -5vw; right: -5vw; top: 50%; transform: translateY(-50%) rotate(-6deg); background: var(--blue); padding: 14px 0; overflow: hidden; z-index: 0; opacity: .95; }
.band-track { display: inline-block; white-space: nowrap; font: 900 clamp(28px, 4.4vw, 64px)/1 var(--display); color: var(--bg); letter-spacing: -.01em; }
.hero-inner { position: relative; z-index: 1; width: 100%; display: grid; grid-template-columns: 1.25fr 1fr; align-items: center; gap: 4vw; }
.eyebrow { display: flex; align-items: center; gap: 10px; font: 500 13px var(--mono); color: var(--cyan); margin-bottom: 18px; }
.eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px var(--green); }
.hero-name { font: 900 clamp(84px, 13.5vw, 230px)/.9 var(--display); letter-spacing: .01em; }
.hero-name .line { display: block; overflow: hidden; padding-bottom: .04em; }
.hero-name .line > span { display: inline-block; background: var(--bg); padding-right: .1em; }
.hero-name .accent { color: var(--blue); }
.hero-sub { margin-top: 26px; font-size: clamp(16px, 1.6vw, 21px); line-height: 1.7; color: #c9cfdd; max-width: 34em; background: var(--bg); display: inline-block; padding: 4px 8px 4px 0; }
.hero-sub b { color: var(--fg); }
.hero-quote { margin-top: 14px; font: 500 13px var(--mono); color: var(--dim); background: var(--bg); display: table; padding-right: 8px; }
.hero-avatar { position: relative; justify-self: center; width: min(420px, 36vw); aspect-ratio: 1; }
.hero-avatar img { position: relative; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 30px 60px rgba(61,123,255,.35)); }
.hero-avatar .ring { position: absolute; inset: 4%; border-radius: 50%; border: 1px dashed rgba(238,241,247,.3); animation: spin 30s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.tagchip { position: absolute; font: 700 12px var(--mono); padding: 7px 12px; background: var(--fg); color: var(--bg); border-radius: 999px; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.tagchip.t1 { top: 8%; left: -6%; background: var(--arch); color: #fff; }
.tagchip.t2 { top: 58%; right: -8%; background: var(--riscv); color: #16215c; }
.tagchip.t3 { bottom: 4%; left: 8%; background: var(--orange); color: #fff; }
.scroll-cue { position: absolute; left: 50%; bottom: 46px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; font: 500 10px var(--mono); letter-spacing: .4em; color: var(--dim); z-index: 1; }
.scroll-cue i { width: 1px; height: 46px; background: linear-gradient(var(--fg), transparent); animation: cue 1.6s cubic-bezier(.7,0,.2,1) infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ─────────── SECTIONS ─────────── */
.sec { position: relative; padding: 16vh var(--gutter) 10vh; }
.sec-head { display: flex; align-items: baseline; gap: 18px; margin-bottom: 7vh; }
.sec-no { font: 500 13px var(--mono); color: var(--blue); }
.sec-title { font: 900 clamp(38px, 6.4vw, 104px)/1 var(--display); letter-spacing: -.02em; white-space: nowrap; }
.sec-rule { flex: 1; height: 1px; background: var(--line); transform-origin: left; align-self: center; }
.sec-meta { font: 500 11px var(--mono); color: var(--dim); letter-spacing: .12em; }
.sec-lead { font: 500 14px/1.7 var(--mono); color: var(--dim); margin: -3vh 0 5vh; }
.sec-lead a { color: var(--cyan); border-bottom: 1px solid currentColor; }

/* whoami */
.who-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 5vw; align-items: center; }
.term.small { width: 100%; }
.fetch { min-height: 0; max-height: none; font-size: clamp(11px, 1.05vw, 13.5px); }
.fetch .k { color: var(--blue); font-weight: 700; } .fetch .art { color: var(--yellow); }
.big-line { font: 900 clamp(40px, 5.2vw, 88px)/1.08 var(--cnh); overflow: hidden; }
.big-line span { display: inline-block; }
.big-line em { font-style: normal; color: var(--bg); background: var(--yellow); padding: 0 .12em; }
.who-note { margin-top: 30px; font-size: clamp(15px, 1.25vw, 18px); line-height: 1.9; color: #b9c0d0; }

/* stack horizontal */
.stack { padding-bottom: 0; }
.stack-pin { height: 100vh; margin: 0 calc(var(--gutter) * -1); display: flex; align-items: center; overflow: hidden; }
.stack-track { display: flex; gap: 3vw; padding: 0 var(--gutter); will-change: transform; }
.panel { position: relative; flex: 0 0 min(74vw, 900px); height: min(68vh, 620px); padding: clamp(24px, 3.5vw, 54px); border-radius: 18px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.panel h3 { font: 900 clamp(46px, 7.4vw, 124px)/.9 var(--display); letter-spacing: -.03em; margin-bottom: 16px; }
.skill { font: 500 13px var(--mono); letter-spacing: .08em; margin-bottom: 22px; opacity: .85; }
.skill b { letter-spacing: .1em; }
.panel p { font-size: clamp(15px, 1.35vw, 19px); line-height: 1.75; max-width: 30em; opacity: .9; }
.panel ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.panel li { font: 700 12px var(--mono); padding: 7px 12px; border-radius: 999px; border: 1px solid currentColor; }
.panel-no { position: absolute; top: 18px; right: 30px; font: 900 clamp(120px, 18vw, 300px)/1 var(--display); opacity: .14; }
.p-infra { background: #0f1b3d; color: #dfe8ff; }
.p-riscv { background: var(--riscv); color: #16215c; }
.p-build { background: var(--blue); color: #fff; }
.p-sec { background: #1a0509; color: #ffd9df; border: 1px solid #3a0e17; }

/* git log */
.gitlog { position: relative; max-width: 1100px; margin: 0 auto; }
.graph-line { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.graph-line line { stroke: var(--blue); stroke-width: 2; vector-effect: non-scaling-stroke; }
#commits-list { list-style: none; position: relative; }
.commit { position: relative; display: grid; grid-template-columns: 1fr 60px 1fr; align-items: center; padding: 30px 0; }
.commit .node { grid-column: 2; justify-self: center; width: 16px; height: 16px; border-radius: 50%; background: var(--bg); border: 3px solid var(--blue); z-index: 1; }
.commit.head .node { background: var(--yellow); border-color: var(--yellow); box-shadow: 0 0 0 6px rgba(255,210,63,.18); }
.commit .body { grid-column: 3; }
.commit:nth-child(even) .body { grid-column: 1; grid-row: 1; text-align: right; }
.commit .hash { font: 500 12px var(--mono); color: var(--orange); }
.commit .hash .ref { color: var(--green); margin-left: 6px; }
.commit .msg { font: 900 clamp(20px, 2.3vw, 34px)/1.3 var(--cnh); margin: 6px 0 4px; }
.commit .date { font: 500 12px var(--mono); color: var(--dim); }

/* gear */
.gear-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.gear { position: relative; padding: 22px 22px 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-2); overflow: hidden; transition: border-color .3s, transform .3s; }
.gear::before { content: ""; position: absolute; inset: 0; background: var(--c, var(--blue)); transform: translateY(101%); transition: transform .45s cubic-bezier(.7,0,.2,1); }
.gear:hover { border-color: var(--c, var(--blue)); transform: translateY(-4px); }
.gear:hover::before { transform: translateY(0); }
.gear > * { position: relative; }
.gear .kind { font: 500 11px var(--mono); letter-spacing: .14em; color: var(--dim); transition: color .3s; }
.gear .name { font: 900 clamp(18px, 1.6vw, 22px)/1.25 var(--display); margin-top: 10px; }
.gear .note { font: 500 12.5px var(--mono); margin-top: 12px; color: var(--dim); transition: color .3s; min-height: 1.4em; }
.gear:hover .kind, .gear:hover .note { color: rgba(255,255,255,.85); }
.gear.light:hover { color: #16215c; } .gear.light:hover .kind, .gear.light:hover .note { color: rgba(22,33,92,.8); }

/* posts */
.posts { list-style: none; border-top: 1px solid var(--line); }
.posts a { position: relative; display: grid; grid-template-columns: 90px 1fr auto; gap: 24px; align-items: baseline; padding: 24px 6px; border-bottom: 1px solid var(--line); overflow: hidden; }
.posts a::before { content: ""; position: absolute; inset: 0; background: var(--fg); transform: scaleY(0); transform-origin: bottom; transition: transform .45s cubic-bezier(.7,0,.2,1); }
.posts a > * { position: relative; transition: color .3s, transform .45s cubic-bezier(.7,0,.2,1); }
.posts a:hover::before { transform: scaleY(1); }
.posts a:hover > * { color: var(--bg); }
.posts a:hover .ptitle { transform: translateX(14px); }
.posts .pdate { font: 500 13px var(--mono); color: var(--dim); }
.posts .ptitle { font: 700 clamp(18px, 2.2vw, 30px)/1.35 var(--cn); }
.feed-state { color: var(--dim); opacity: .7; margin-left: 8px; }
.posts .ptag { font: 500 12px var(--mono); color: var(--cyan); }

.plan { margin-top: 12vh; font: 400 clamp(14px, 1.3vw, 17px)/2 var(--mono); }
.plan .p { color: var(--cyan); }
.plan ul { list-style: none; }
.plan li .box { color: var(--dim); }
.plan li.checked .box { color: var(--green); }

/* contact */
.contact { min-height: 100vh; display: flex; flex-direction: column; padding-bottom: 60px; }
.sayhi { font: 900 clamp(100px, 22vw, 380px)/.82 var(--display); letter-spacing: -.05em; display: flex; flex-wrap: wrap; gap: 0 .2em; }
.sayhi span { display: inline-block; }
.sayhi span:last-child { color: var(--blue); }
.caret { font-style: normal; animation: blink 1s steps(2) infinite; color: var(--yellow); }
.links { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8vh; }
.link { display: inline-flex; align-items: center; gap: 18px; padding: 18px 26px; border: 1px solid var(--line); border-radius: 999px; font: 900 clamp(18px, 2vw, 28px) var(--display); transition: background .3s, color .3s, border-color .3s; }
.link i { font-style: normal; transition: transform .35s cubic-bezier(.7,0,.2,1); }
.link:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.link:hover i { transform: translate(4px, -4px) rotate(8deg); }
.link del { opacity: .5; font-weight: 500; }
.foot { margin-top: auto; padding-top: 10vh; display: flex; align-items: center; gap: 10px; font: 500 12px var(--mono); color: var(--dim); }
.foot img { width: 22px; height: 22px; border-radius: 50%; }

/* ─────────── 响应式 ─────────── */
@media (max-width: 900px) {
  .nav nav { display: none; }
  .nav-tools { margin-left: auto; }
  .nav-tools [data-sound] { display: none; }
  .hero-band { top: auto; bottom: 16vh; transform: rotate(-6deg); }
  .hero { align-items: flex-start; padding-top: 90px; padding-bottom: 28vh; }
  .hud-br { flex-direction: column; align-items: flex-end; }
  .hero-inner { grid-template-columns: 1fr; }
  .hero-avatar { width: min(300px, 70vw); order: -1; margin-top: 10px; }
  .who-grid { grid-template-columns: 1fr; }
  .stack-pin { height: auto; margin: 0; }
  .stack-track { flex-direction: column; padding: 0; transform: none !important; }
  .panel { flex: none; width: 100%; height: auto; min-height: 60vh; }
  .commit { grid-template-columns: 30px 1fr; }
  .commit .node { grid-column: 1; }
  .commit .body, .commit:nth-child(even) .body { grid-column: 2; grid-row: 1; text-align: left; padding-left: 14px; }
  .graph-line line { transform: translateX(calc(15px - 50%)); }
  .posts a { grid-template-columns: 1fr; gap: 6px; }
  .sec-meta { display: none; }
  .hud-tl { top: 2.4vh; } .hud-tr { top: 2.4vh; }
}
@media (prefers-reduced-motion: reduce) {
  .fx-grain, .rec, .hero-avatar .ring, .scroll-cue i, .caret { animation: none; }
}