/* =========================================================================
   流形 MANIFOLD — 交互体验实验室
   手写样式层：设计令牌 / 版式 / 组件 / 动效
   无外链资源：字体、脚本、图形全部随站打包
   ========================================================================= */

/* ---------- 本地字体 ---------- */
@font-face{
  font-family:"Instrument Serif";
  src:url("../fonts/instrument-serif-400-latin.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Instrument Serif";
  src:url("../fonts/instrument-serif-italic-latin.woff2") format("woff2");
  font-weight:400;font-style:italic;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"JetBrains Mono";
  src:url("../fonts/jetbrains-mono-400-latin.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"JetBrains Mono";
  src:url("../fonts/jetbrains-mono-500-latin.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ---------- 令牌 ---------- */
:root{
  --font-display:"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei UI","Microsoft YaHei","Hiragino Sans GB","Noto Sans SC",sans-serif;
  --font-body:var(--font-display);
  --font-serif:"Instrument Serif",Georgia,"Songti SC",serif;
  --font-mono:"JetBrains Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;

  --gutter:clamp(20px,5vw,84px);
  --maxw:1560px;
  --r:3px;
  --t-fast:120ms;
  --t:220ms;
  --t-slow:480ms;
  --ease:cubic-bezier(.2,0,0,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --sk:0;          /* 滚动倾斜驱动 */
  --sp:0;          /* 页面滚动进度 0..1 */
  --mx:50%;        /* 指针位置，供 CSS 演示块使用 */
  --my:50%;
}

html[data-theme="ink"]{
  --bg:#0B0B0D;
  --bg-veil:rgba(11,11,13,.78);
  --panel:rgba(18,18,22,.72);
  --panel-solid:#141418;
  --line:rgba(237,234,227,.14);
  --line-soft:rgba(237,234,227,.08);
  --fg:#EDEAE3;
  --fg-dim:#B6B2A8;
  --muted:#8C8980;
  --accent:#C8FF3D;
  --accent-ink:#0B0B0D;
  --alert:#FF5A34;
  --grain-op:.055;
  --grain-blend:overlay;
  --shadow:0 30px 80px rgba(0,0,0,.55);
}

html[data-theme="paper"]{
  --bg:#F1EEE6;
  --bg-veil:rgba(241,238,230,.82);
  --panel:rgba(255,253,249,.78);
  --panel-solid:#FFFDF8;
  --line:rgba(17,17,14,.16);
  --line-soft:rgba(17,17,14,.08);
  --fg:#151510;
  --fg-dim:#3E3D36;
  --muted:#6C6A61;
  --accent:#3F6600;
  --accent-ink:#FFFDF8;
  --alert:#C2370F;
  --grain-op:.04;
  --grain-blend:multiply;
  --shadow:0 24px 60px rgba(40,36,24,.16);
}

/* ---------- 基础 ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font-body);
  font-size:clamp(15px,1.02vw,17px);
  line-height:1.6;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,p,ul,ol,figure,pre{margin:0}
ul,ol{list-style:none;padding:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img,svg{display:block;max-width:100%}
kbd{
  font-family:var(--font-mono);font-size:.72em;font-weight:500;
  border:1px solid var(--line);border-radius:var(--r);
  padding:.12em .38em;color:var(--fg-dim);
}
::selection{background:var(--accent);color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

html.has-cursor,
html.has-cursor a,
html.has-cursor button,
html.has-cursor input,
html.has-cursor label{cursor:none}

.skip-link{
  position:fixed;top:8px;left:8px;z-index:120;
  padding:10px 16px;background:var(--accent);color:var(--accent-ink);
  transform:translateY(-160%);transition:transform var(--t) var(--ease);
}
.skip-link:focus{transform:none}

/* ---------- 背景层 ---------- */
.gl{
  position:fixed;inset:0;width:100%;height:100%;
  z-index:0;display:block;pointer-events:none;
}
.veil{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 0%,transparent 0%,var(--bg) 78%),
    linear-gradient(180deg,transparent 0%,var(--bg-veil) 100%);
}
.grain{
  position:fixed;inset:0;width:100%;height:100%;z-index:60;
  pointer-events:none;opacity:var(--grain-op);
  mix-blend-mode:var(--grain-blend);
}
.theme-wipe{position:fixed;inset:0;z-index:88;pointer-events:none}

/* ---------- 预加载 ---------- */
.loader{
  position:fixed;inset:0;z-index:90;
  display:grid;place-items:center;
  background:var(--bg);
  animation:loaderFallback .5s var(--ease) 6s forwards;
}
.loader.is-done{animation:none;opacity:0;visibility:hidden;transition:opacity .55s var(--ease),visibility 0s .55s}
@keyframes loaderFallback{to{opacity:0;visibility:hidden}}
.loader-inner{width:min(520px,84vw)}
.loader-label{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);margin-bottom:18px;
}
.loader-count{
  font-family:var(--font-mono);font-weight:500;
  font-size:clamp(56px,11vw,132px);line-height:.92;
  font-variant-numeric:tabular-nums;letter-spacing:-.03em;
}
.loader-pct{font-size:.34em;margin-left:.16em;color:var(--muted)}
.loader-bar{height:1px;background:var(--line);margin:26px 0 18px;overflow:hidden}
.loader-bar i{display:block;height:100%;width:0;background:var(--accent);transform-origin:left}
.loader-log{
  display:grid;gap:6px;
  font-family:var(--font-mono);font-size:.72rem;color:var(--muted);
}
.loader-log li{opacity:.24;transition:opacity var(--t) var(--ease),color var(--t) var(--ease)}
.loader-log li.is-on{opacity:1;color:var(--fg-dim)}

/* ---------- 自定义光标 ---------- */
.cursor{position:fixed;inset:0;z-index:95;pointer-events:none}
html:not(.has-cursor) .cursor{display:none}
.cursor-dot,.cursor-ring{
  position:absolute;top:0;left:0;
  border-radius:50%;
  transform:translate3d(-100px,-100px,0);
}
.cursor-dot{
  width:6px;height:6px;background:var(--accent);
  margin:-3px 0 0 -3px;
}
.cursor-ring{
  width:38px;height:38px;margin:-19px 0 0 -19px;
  border:1px solid var(--fg);
  opacity:.5;
  transition:width .28s var(--ease),height .28s var(--ease),margin .28s var(--ease),
             opacity .28s var(--ease),background-color .28s var(--ease),border-color .28s var(--ease);
  display:grid;place-items:center;
}
.cursor-ring em{
  font-family:var(--font-mono);font-size:.62rem;font-style:normal;
  letter-spacing:.08em;color:var(--accent-ink);opacity:0;
  transition:opacity var(--t) var(--ease);
}
html.cursor-link .cursor-ring{width:54px;height:54px;margin:-27px 0 0 -27px;opacity:.75}
html.cursor-link .cursor-dot{opacity:0}
html.cursor-view .cursor-ring{
  width:88px;height:88px;margin:-44px 0 0 -44px;
  background:var(--accent);border-color:var(--accent);opacity:1;
}
html.cursor-view .cursor-ring em{opacity:1}
html.cursor-view .cursor-dot{opacity:0}
html.cursor-down .cursor-ring{width:26px;height:26px;margin:-13px 0 0 -13px}

/* ---------- 顶部条 ---------- */
.progress{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:80;
  background:transparent;
}
.progress i{display:block;height:100%;width:0;background:var(--accent)}

.topbar{
  position:fixed;top:0;left:0;right:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:16px var(--gutter);
  mix-blend-mode:normal;
}
.topbar::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,var(--bg-veil) 0%,transparent 100%);
  backdrop-filter:blur(2px);
  opacity:0;transition:opacity var(--t-slow) var(--ease);
}
html.is-scrolled .topbar::before{opacity:1}

.brand{display:flex;align-items:center;gap:12px}
.brand-mark{color:var(--accent);display:grid;place-items:center}
.brand-text{display:flex;align-items:baseline;gap:9px}
.brand-text b{font-family:var(--font-display);font-weight:800;font-size:1.05rem;letter-spacing:.02em}
.brand-text i{
  font-family:var(--font-serif);font-style:normal;
  font-size:1.02rem;letter-spacing:.06em;color:var(--fg-dim);
}

.status{
  display:flex;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);
}
.status-dot{
  width:6px;height:6px;border-radius:50%;background:var(--accent);
  animation:blip 2.4s var(--ease) infinite;
}
@keyframes blip{0%,100%{opacity:1}50%{opacity:.28}}
.status-sep{opacity:.4}

.topbar-actions{display:flex;align-items:center;gap:10px}
.ghost-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 12px;border:1px solid var(--line);border-radius:var(--r);
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--fg-dim);
  transition:border-color var(--t) var(--ease),color var(--t) var(--ease),background-color var(--t) var(--ease);
}
.ghost-btn:hover{border-color:var(--fg);color:var(--fg)}
.ghost-key{color:var(--muted)}
.menu-btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:9px 14px;border:1px solid var(--fg);border-radius:var(--r);
  font-size:.86rem;font-weight:600;
  position:relative;overflow:hidden;
  transition:color var(--t) var(--ease),border-color var(--t) var(--ease);
}
.menu-btn::after{
  content:"";position:absolute;inset:0;background:var(--accent);
  transform:translateY(101%);transition:transform var(--t) var(--ease);
}
.menu-btn>*{position:relative;z-index:1}
.menu-btn:hover{color:var(--accent-ink);border-color:var(--accent)}
.menu-btn:hover::after{transform:none}
html.menu-open .menu-btn{color:var(--accent-ink);border-color:var(--accent)}
html.menu-open .menu-btn::after{transform:none}
.menu-btn-icon{display:grid;gap:4px;width:18px}
.menu-btn-icon i{display:block;height:1.5px;background:currentColor;transition:transform var(--t) var(--ease)}
html.menu-open .menu-btn-icon i:first-child{transform:translateY(2.75px) rotate(45deg)}
html.menu-open .menu-btn-icon i:last-child{transform:translateY(-2.75px) rotate(-45deg)}

/* ---------- 全屏菜单 ---------- */
.menu{
  position:fixed;inset:0;z-index:70;
  background:var(--bg);
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(80px,14vh,140px) var(--gutter) clamp(40px,8vh,80px);
  clip-path:inset(0 0 100% 0);
  transition:clip-path .62s var(--ease-out);
}
.menu[hidden]{display:none}
html.menu-open .menu{clip-path:inset(0 0 0 0)}
.menu-nav ul{display:grid;gap:clamp(2px,.6vh,10px);max-width:var(--maxw)}
.menu-nav a{
  display:grid;grid-template-columns:64px 1fr auto;align-items:baseline;gap:clamp(12px,2vw,28px);
  padding:clamp(4px,.9vh,12px) 0;
  border-bottom:1px solid var(--line-soft);
  opacity:0;transform:translateY(28px);
  transition:opacity .5s var(--ease),transform .5s var(--ease-out),padding-left .3s var(--ease);
}
html.menu-open .menu-nav a{opacity:1;transform:none}
html.menu-open .menu-nav li:nth-child(1) a{transition-delay:.12s}
html.menu-open .menu-nav li:nth-child(2) a{transition-delay:.17s}
html.menu-open .menu-nav li:nth-child(3) a{transition-delay:.22s}
html.menu-open .menu-nav li:nth-child(4) a{transition-delay:.27s}
html.menu-open .menu-nav li:nth-child(5) a{transition-delay:.32s}
html.menu-open .menu-nav li:nth-child(6) a{transition-delay:.37s}
html.menu-open .menu-nav li:nth-child(7) a{transition-delay:.42s}
.menu-nav a:hover{padding-left:clamp(8px,1.4vw,20px)}
.menu-idx{font-family:var(--font-mono);font-size:.72rem;color:var(--muted)}
.menu-word{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(30px,6.4vw,76px);line-height:1.02;letter-spacing:-.01em;
}
.menu-en{
  font-family:var(--font-serif);font-size:clamp(14px,1.5vw,22px);
  color:var(--muted);letter-spacing:.04em;
}
.menu-nav a:hover .menu-en{color:var(--accent)}
.menu-foot{
  margin-top:clamp(24px,5vh,56px);
  font-family:var(--font-mono);font-size:.7rem;color:var(--muted);
}
.menu-foot kbd{color:var(--fg-dim)}

/* ---------- 右侧导航轨 ---------- */
.rail{
  position:fixed;right:clamp(10px,1.6vw,26px);top:50%;transform:translateY(-50%);
  z-index:40;
}
.rail ol{display:grid;gap:12px}
.rail a{
  display:flex;align-items:center;gap:10px;justify-content:flex-end;
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.1em;color:var(--muted);
}
.rail i{font-style:normal;transition:color var(--t) var(--ease)}
.rail span{
  opacity:0;transform:translateX(6px);
  transition:opacity var(--t) var(--ease),transform var(--t) var(--ease);
  white-space:nowrap;
}
.rail a::after{
  content:"";width:16px;height:1px;background:currentColor;
  transition:width var(--t) var(--ease),background-color var(--t) var(--ease);
}
.rail a:hover span,.rail li.is-on span{opacity:1;transform:none}
.rail a:hover::after{width:26px}
.rail li.is-on i{color:var(--accent)}
.rail li.is-on::after{background:var(--accent)}
.rail li.is-on a::after{width:30px;background:var(--accent)}

/* ---------- 通用区块 ---------- */
main{position:relative;z-index:2}
.section{
  position:relative;
  padding:clamp(76px,13vh,168px) var(--gutter);
  max-width:var(--maxw);margin-inline:auto;
}
.section::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--panel);
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
  backdrop-filter:blur(10px);
}
.sec-head{margin-bottom:clamp(28px,5vh,64px);max-width:900px}
.sec-index{
  display:flex;align-items:center;gap:12px;
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);margin-bottom:14px;
}
.sec-index i{font-style:normal;color:var(--accent)}
.sec-title{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(34px,6.2vw,84px);line-height:1.03;letter-spacing:-.02em;
  transform:skewY(calc(var(--sk) * 1deg));
}
.sec-sub{
  margin-top:16px;max-width:62ch;color:var(--fg-dim);font-size:clamp(15px,1.05vw,18px);
}
.eyebrow{
  display:flex;align-items:center;gap:12px;
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);
}
.rich-line{width:34px;height:1px;background:var(--accent)}

/* ---------- Hero ---------- */
.hero{
  position:relative;z-index:2;
  min-height:100svh;
  display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  align-items:center;gap:clamp(24px,4vw,72px);
  padding:clamp(104px,15vh,168px) var(--gutter) clamp(72px,11vh,128px);
  max-width:var(--maxw);margin-inline:auto;
}
.hero-title{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(46px,10.5vw,152px);line-height:.94;letter-spacing:-.035em;
  margin:clamp(14px,2.4vh,26px) 0 clamp(18px,3vh,30px);
}
.hero-title .line{display:block;overflow:hidden;padding-bottom:.04em}
.hero-title .ch{display:inline-block;transform:translateY(112%);will-change:transform}
html.hero-in .hero-title .ch{
  transform:none;
  transition:transform .95s var(--ease-out);
  transition-delay:calc(var(--i) * 46ms);
}
.hero-lede{max-width:46ch;color:var(--fg-dim);font-size:clamp(15px,1.15vw,19px)}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(24px,4vh,40px)}
.hero-hint{
  display:flex;align-items:center;gap:10px;margin-top:clamp(22px,4vh,38px);
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;color:var(--muted);
}
.pulse{
  width:8px;height:8px;border-radius:50%;background:var(--accent);
  animation:blip 2s var(--ease) infinite;
}

.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 22px;border-radius:var(--r);
  font-weight:650;font-size:.94rem;letter-spacing:.01em;
  border:1px solid transparent;position:relative;
  transition:transform var(--t) var(--ease),background-color var(--t) var(--ease),
             color var(--t) var(--ease),border-color var(--t) var(--ease);
}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{transform:translateY(-2px)}
.btn-ghost{border-color:var(--line);color:var(--fg)}
.btn-ghost:hover{border-color:var(--fg)}
.btn-sm{padding:9px 14px;font-size:.8rem}
.btn-xl{padding:20px 30px;font-size:clamp(16px,1.7vw,24px)}
.btn kbd{color:inherit;opacity:.6}

.hero-stage{position:relative;display:grid;place-items:center;min-height:38vh}
.orb{position:relative;width:min(38vw,430px);aspect-ratio:1;display:grid;place-items:center}
.orb-ring{
  position:absolute;inset:0;border-radius:50%;
  border:1px solid var(--line);
}
.orb-ring-a{animation:spin 26s linear infinite;border-top-color:var(--accent);border-right-color:var(--accent)}
.orb-ring-b{inset:14%;animation:spin 18s linear infinite reverse;border-bottom-color:var(--accent);border-style:dashed}
@keyframes spin{to{transform:rotate(360deg)}}
.orb-core{
  width:38%;aspect-ratio:1;border-radius:50%;
  background:
    radial-gradient(circle at 34% 30%,var(--accent) 0%,transparent 62%),
    radial-gradient(circle at 70% 74%,var(--fg-dim) 0%,transparent 58%);
  filter:blur(1px);opacity:.9;
  animation:breathe 7s var(--ease) infinite;
}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.09)}}
.orb-tick{
  position:absolute;inset:-6%;border-radius:50%;
  border:1px dashed var(--line-soft);
}
.orb-caption{
  margin-top:clamp(18px,3vh,32px);
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);text-align:center;
}

/* ---------- 跑马灯 ---------- */
.band{
  position:relative;z-index:2;
  border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
  background:var(--panel);backdrop-filter:blur(8px);
  overflow:hidden;padding:clamp(14px,2.4vh,26px) 0;
}
.band-track{
  display:flex;align-items:center;gap:clamp(20px,3vw,46px);
  white-space:nowrap;width:max-content;
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(22px,3.4vw,52px);letter-spacing:-.01em;
  animation:slide 34s linear infinite;
  transform:skewY(calc(var(--sk) * .6deg));
}
.band-track[data-dir="-1"]{animation-direction:reverse}
@keyframes slide{to{transform:translateX(-50%)}}
.band-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none}
html.is-reduced .band-track{animation:none}

/* ---------- 主张 ---------- */
.statement{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(22px,3.1vw,46px);line-height:1.42;letter-spacing:-.012em;
  max-width:30ch;margin-bottom:clamp(40px,7vh,84px);
}
.statement .ch{opacity:var(--o,.14)}
.thesis-notes{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,2.2vw,30px);align-items:start;
}
.note{
  padding:clamp(20px,2.4vw,32px);
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--panel);backdrop-filter:blur(6px);
  transition:border-color var(--t) var(--ease),background-color var(--t) var(--ease);
}
.note-offset{--ty:clamp(18px,4vh,46px)}
[data-tilt]{
  transform:perspective(900px) translateY(var(--ty,0px))
            rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  will-change:transform;
}
.note:hover{border-color:var(--fg)}
.note-idx{font-family:var(--font-mono);font-size:.68rem;color:var(--accent);letter-spacing:.18em;margin-bottom:14px}
.note h3{font-family:var(--font-display);font-weight:750;font-size:clamp(18px,1.7vw,24px);margin-bottom:10px}
.note p{color:var(--fg-dim);font-size:.94rem}

/* ---------- 工坊（横向 pinned） ---------- */
.stage{position:relative;z-index:2}
.stage-track{position:relative;height:calc(100svh + var(--rail-extra,0px))}
.stage-inner{
  position:sticky;top:0;height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  overflow:hidden;
  background:var(--panel);backdrop-filter:blur(10px);
  border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
  padding:clamp(56px,10vh,96px) 0 clamp(40px,8vh,72px);
}
.stage-head{padding:0 var(--gutter);margin-bottom:clamp(18px,3.4vh,40px)}
.stage-head .sec-title{font-size:clamp(30px,4.6vw,64px)}
.stage-hint{
  margin-top:12px;font-family:var(--font-mono);font-size:.68rem;
  letter-spacing:.12em;color:var(--muted);text-transform:uppercase;
}
.stage-rail{
  display:flex;align-items:stretch;gap:clamp(14px,1.8vw,26px);
  width:max-content;
  padding:0 var(--gutter);
  will-change:transform;
}
.card{
  flex:0 0 auto;width:clamp(280px,32vw,440px);
  display:flex;flex-direction:column;
  padding:clamp(18px,1.8vw,28px);
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--panel-solid);
  transition:border-color var(--t) var(--ease),transform var(--t) var(--ease);
}
.card-wide{width:clamp(300px,44vw,600px)}
.card-mid{width:clamp(290px,38vw,510px)}
.card-narrow{width:clamp(240px,25vw,340px)}
.card:hover{border-color:var(--fg)}
.card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.card-idx{font-family:var(--font-mono);font-size:1.5rem;font-weight:500;color:var(--fg-dim)}
.card-tag{
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.16em;
  color:var(--muted);border:1px solid var(--line);border-radius:99px;padding:3px 9px;
}
.card-title{
  font-family:var(--font-display);font-weight:750;
  font-size:clamp(20px,2vw,30px);margin-bottom:10px;letter-spacing:-.01em;
}
.card-text{color:var(--fg-dim);font-size:.92rem;margin-bottom:auto}
.demo{
  position:relative;margin-top:clamp(16px,2.4vh,26px);
  border:1px solid var(--line-soft);border-radius:var(--r);
  overflow:hidden;background:var(--bg);
  min-height:150px;display:grid;place-items:center;
}
.demo-label{
  position:absolute;left:12px;bottom:10px;
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.1em;
  color:var(--muted);
}
.demo-field{
  min-height:190px;
  background:
    radial-gradient(40% 60% at var(--mx) var(--my),var(--accent) 0%,transparent 60%),
    radial-gradient(60% 80% at calc(100% - var(--mx)) calc(100% - var(--my)),var(--fg-dim) 0%,transparent 62%),
    conic-gradient(from 0deg at 50% 50%,rgba(255,255,255,.06),transparent 30%,rgba(255,255,255,.06) 60%,transparent 90%);
  filter:saturate(1.05);
}
.demo-canvas canvas{width:100%;height:170px;display:block}
.demo-liquid{min-height:150px}
.demo-liquid svg{width:100%;height:150px}
.demo-liquid-text{
  font-family:var(--font-display);font-weight:800;font-size:64px;fill:var(--fg);
}
.demo-dial{min-height:170px}
.dial{position:relative;width:120px;height:120px;border-radius:50%;border:1px solid var(--line)}
.dial-hub{
  position:absolute;top:50%;left:50%;width:10px;height:10px;margin:-5px 0 0 -5px;
  border-radius:50%;background:var(--accent);
}
.dial-needle{
  position:absolute;left:50%;top:50%;width:2px;height:52px;
  background:var(--fg);transform-origin:50% 100%;
  transform:translate(-50%,-100%) rotate(var(--ang,0deg));
}
.dial-read{
  position:absolute;right:12px;bottom:10px;
  font-family:var(--font-mono);font-size:.72rem;color:var(--muted);
}
.dial-read i{font-style:normal;opacity:.6;margin-left:2px}
.demo-magnet{min-height:190px}
.magnet-btn{
  padding:16px 30px;border:1px solid var(--fg);border-radius:var(--r);
  font-weight:650;
  transform:translate3d(var(--tx,0),var(--ty,0),0);
  transition:transform .5s var(--ease-out),background-color var(--t) var(--ease),color var(--t) var(--ease);
}
.magnet-btn:hover{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}

.stage-progress{
  display:flex;align-items:center;gap:18px;
  padding:clamp(20px,3.4vh,40px) var(--gutter) 0;
}
.stage-progress-num{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.stage-progress-bar{flex:1;height:1px;background:var(--line);position:relative;overflow:hidden}
.stage-progress-bar i{position:absolute;inset:0 auto 0 0;width:0;background:var(--accent)}

/* ---------- 粒子实验室 ---------- */
.lab-shell{
  display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,.85fr);
  gap:clamp(18px,2.6vw,44px);align-items:stretch;
}
.lab-canvas-wrap{
  position:relative;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;background:var(--bg);min-height:clamp(320px,48vh,540px);
}
.lab-canvas-wrap canvas{width:100%;height:100%;display:block}
.lab-read{
  position:absolute;left:14px;bottom:12px;
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.12em;color:var(--muted);
}
.lab-controls{
  display:flex;flex-direction:column;gap:16px;
  padding:clamp(18px,2vw,28px);
  border:1px solid var(--line);border-radius:var(--r);background:var(--panel);
}
.lab-label{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.16em;color:var(--muted);text-transform:uppercase}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  padding:9px 15px;border:1px solid var(--line);border-radius:99px;
  font-size:.86rem;font-weight:600;color:var(--fg-dim);
  transition:border-color var(--t) var(--ease),color var(--t) var(--ease),background-color var(--t) var(--ease);
}
.chip:hover{border-color:var(--fg);color:var(--fg)}
.chip.is-on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.lab-tip{margin-top:auto;color:var(--muted);font-size:.84rem}

/* ---------- 液态文字 ---------- */
.liquid-shell{
  display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,.9fr);
  gap:clamp(18px,2.6vw,44px);align-items:center;
}
.liquid-svg{
  width:100%;height:auto;border:1px solid var(--line);border-radius:var(--r);
  background:var(--panel);
}
.liquid-text{
  font-family:var(--font-display);font-weight:800;
  font-size:104px;letter-spacing:-.03em;fill:var(--fg);
}
.liquid-panel{
  display:grid;gap:16px;
  padding:clamp(18px,2vw,28px);
  border:1px solid var(--line);border-radius:var(--r);background:var(--panel);
}
.slider-row{
  display:grid;grid-template-columns:1fr auto;gap:8px 14px;align-items:center;
  font-size:.88rem;color:var(--fg-dim);
}
.slider-row>span{grid-column:1 / -1;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.slider-row output{
  font-family:var(--font-mono);font-size:.78rem;font-variant-numeric:tabular-nums;color:var(--fg);
  min-width:2.4em;text-align:right;
}
.liquid-tip{color:var(--muted);font-size:.84rem}

input[type="range"]{
  -webkit-appearance:none;appearance:none;
  width:100%;height:22px;background:transparent;
}
input[type="range"]::-webkit-slider-runnable-track{height:1px;background:var(--line)}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:14px;height:14px;margin-top:-6.5px;border-radius:50%;
  background:var(--accent);border:0;
  transition:transform var(--t-fast) var(--ease);
}
input[type="range"]:hover::-webkit-slider-thumb{transform:scale(1.25)}
input[type="range"]::-moz-range-track{height:1px;background:var(--line)}
input[type="range"]::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:50%;background:var(--accent)}

/* ---------- 控制台 ---------- */
.console-shell{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(18px,2.6vw,44px);align-items:start;
}
.console-panel{
  display:grid;gap:20px;
  padding:clamp(20px,2.4vw,34px);
  border:1px solid var(--line);border-radius:var(--r);background:var(--panel);
}
.console-group{display:grid;gap:12px;padding-top:6px;border-top:1px solid var(--line-soft)}
.console-group-row{grid-template-columns:1fr;gap:16px}
.console-label{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.swatches{display:flex;flex-wrap:wrap;gap:8px}
.swatch{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border:1px solid var(--line);border-radius:99px;
  font-size:.84rem;color:var(--fg-dim);
  transition:border-color var(--t) var(--ease),color var(--t) var(--ease);
}
.swatch i{width:10px;height:10px;border-radius:50%;border:1px solid var(--line);display:block}
.swatch[data-palette-btn="acid"] i{background:#C8FF3D}
.swatch[data-palette-btn="abyss"] i{background:#4FD8F0}
.swatch[data-palette-btn="lava"] i{background:#FF7A33}
.swatch[data-palette-btn="ash"] i{background:#C9C6BC}
.swatch:hover{border-color:var(--fg);color:var(--fg)}
.swatch.is-on{border-color:var(--accent);color:var(--fg)}
.switch{display:flex;align-items:center;gap:12px;color:var(--fg-dim);font-size:.88rem}
.switch input{position:absolute;opacity:0;width:1px;height:1px}
.switch-track{
  width:44px;height:22px;border:1px solid var(--line);border-radius:99px;
  position:relative;flex:none;transition:background-color var(--t) var(--ease),border-color var(--t) var(--ease);
}
.switch-track i{
  position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;
  background:var(--fg-dim);transition:transform var(--t) var(--ease),background-color var(--t) var(--ease);
}
.switch input:checked+.switch-track{background:var(--accent);border-color:var(--accent)}
.switch input:checked+.switch-track i{transform:translateX(22px);background:var(--accent-ink)}
.switch input:focus-visible+.switch-track{outline:2px solid var(--accent);outline-offset:3px}
.console-readout{
  padding:clamp(20px,2.4vw,34px);
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--panel-solid);
}
.readout-title{
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin-bottom:16px;
}
.readout-code{
  font-family:var(--font-mono);font-size:clamp(12px,1.05vw,15px);line-height:1.9;
  color:var(--fg);white-space:pre-wrap;font-variant-numeric:tabular-nums;
}
.readout-note{margin-top:16px;color:var(--muted);font-size:.84rem}

/* ---------- 档案 ---------- */
.arch-list{border-top:1px solid var(--line)}
.arch-row{
  display:grid;grid-template-columns:92px minmax(0,1fr) 150px 80px;
  align-items:center;gap:clamp(12px,2vw,28px);
  padding:clamp(14px,2.1vh,26px) 0;
  border-bottom:1px solid var(--line);
  position:relative;
  transition:padding-left .3s var(--ease),color var(--t) var(--ease);
}
.arch-row:hover{padding-left:clamp(8px,1.4vw,22px)}
.arch-row::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease-out);
}
.arch-row:hover::after{transform:scaleX(1)}
.arch-no{font-family:var(--font-mono);font-size:.72rem;color:var(--muted);letter-spacing:.1em}
.arch-name{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(20px,2.5vw,38px);letter-spacing:-.015em;
  transform:skewY(calc(var(--sk) * .8deg));
}
.arch-kind,.arch-year{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;
  color:var(--muted);text-align:right;
}
.arch-preview{
  position:fixed;z-index:50;width:210px;height:150px;
  border:1px solid var(--line);border-radius:var(--r);
  pointer-events:none;opacity:0;
  transform:translate3d(0,0,0) scale(.92);
  transition:opacity var(--t) var(--ease),transform var(--t) var(--ease);
  background-color:var(--panel-solid);
  background-blend-mode:screen;
}
html.arch-on .arch-preview{opacity:1;transform:translate3d(0,0,0) scale(1)}
.arch-preview[data-pat="1"]{background-image:radial-gradient(circle,var(--accent) 1px,transparent 1.4px);background-size:11px 11px}
.arch-preview[data-pat="2"]{background-image:conic-gradient(from 0deg,var(--accent),transparent 55%,var(--fg-dim),transparent)}
.arch-preview[data-pat="3"]{background-image:repeating-linear-gradient(48deg,var(--accent) 0 2px,transparent 2px 13px)}
.arch-preview[data-pat="4"]{background-image:repeating-radial-gradient(circle at 50% 50%,var(--accent) 0 1.5px,transparent 1.5px 13px)}
.arch-preview[data-pat="5"]{background-image:linear-gradient(135deg,transparent 46%,var(--accent) 50%,transparent 54%),repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 9px)}
.arch-preview[data-pat="6"]{background-image:conic-gradient(var(--accent) 0 25%,transparent 0 50%,var(--fg-dim) 0 75%,transparent 0);background-size:26px 26px}

/* ---------- 联络 ---------- */
.contact-inner{max-width:900px}
.contact-title{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(32px,6vw,80px);line-height:1.05;letter-spacing:-.025em;
  margin:18px 0 clamp(24px,4vh,42px);
}
.contact-note{margin-top:24px;color:var(--fg-dim);max-width:52ch}

/* ---------- 页脚 ---------- */
.footer{
  position:relative;z-index:2;
  padding:clamp(48px,8vh,96px) var(--gutter) clamp(32px,5vh,56px);
  border-top:1px solid var(--line);
  background:var(--panel);backdrop-filter:blur(10px);
}
.footer-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(20px,3vw,44px);
  max-width:var(--maxw);margin-inline:auto;
}
.footer-title{
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin-bottom:12px;
}
.footer-text{color:var(--fg-dim);font-size:.9rem}
.kbd-list{display:grid;gap:8px;color:var(--fg-dim);font-size:.88rem}
.footer-clock{
  font-family:var(--font-mono);font-size:1.5rem;font-weight:500;
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;
}
.footer-clock i{display:block;font-style:normal;font-size:.68rem;color:var(--muted);letter-spacing:.12em;margin-top:6px}
.footer-fine{
  max-width:var(--maxw);margin:clamp(36px,6vh,64px) auto 0;
  padding-top:22px;border-top:1px solid var(--line-soft);
  color:var(--muted);font-size:.8rem;max-width:70ch;
}

/* ---------- 滚动入场 ---------- */
.rv{opacity:0;translate:0 22px}
.rv.is-in{
  opacity:1;translate:0 0;
  transition:opacity .7s var(--ease-out),translate .7s var(--ease-out);
  transition-delay:var(--d,0ms);
}

/* ---------- 响应式 ---------- */
@media (max-width:1180px){
  .status{display:none}
  .rail{display:none}
  .thesis-notes{grid-template-columns:1fr 1fr}
  .note-offset{--ty:0px}
}
@media (max-width:900px){
  .hero{grid-template-columns:1fr;min-height:auto;padding-top:clamp(96px,16vh,140px)}
  .hero-stage{min-height:auto;order:-1;margin-bottom:12px}
  .orb{width:min(62vw,300px)}
  .lab-shell,.liquid-shell,.console-shell{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .arch-row{grid-template-columns:74px minmax(0,1fr) auto;row-gap:6px}
  .arch-kind{grid-column:2;text-align:left}
  .arch-year{grid-column:3;grid-row:1}
  .arch-preview{display:none}
  .stage-track{height:auto}
  .stage-inner{position:static;height:auto;padding:clamp(56px,10vh,90px) 0}
  .stage-rail{
    overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    padding-bottom:14px;
    -webkit-overflow-scrolling:touch;
  }
  .card{scroll-snap-align:start;width:min(80vw,420px)}
  .card-wide,.card-mid,.card-narrow{width:min(84vw,460px)}
  .thesis-notes{grid-template-columns:1fr}
  .statement{max-width:none}
  .liquid-text{font-size:64px}
  .menu-nav a{grid-template-columns:44px 1fr}
  .menu-en{display:none}
}
@media (max-width:560px){
  .brand-text i{display:none}
  .ghost-btn span:not(.ghost-key){display:none}
  .footer-grid{grid-template-columns:1fr}
  .arch-row{grid-template-columns:64px minmax(0,1fr)}
  .arch-year{grid-column:2;text-align:left}
  .loader-log{display:none}
}

/* ---------- 减少动态效果 ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .hero-title .ch{transform:none}
  [data-tilt]{transform:none}
  .rv{opacity:1;translate:0 0}
  .band-track{animation:none}
  .orb-ring-a,.orb-ring-b,.orb-core{animation:none}
  .statement .ch{opacity:1}
  .menu{clip-path:inset(0 0 0 0)}
}

/* ---------- 打印 ---------- */
@media print{
  .gl,.veil,.grain,.cursor,.loader,.menu,.rail,.progress,.topbar{display:none}
  body{background:#fff;color:#000}
}