/* ============================================================
   LIN / FIELD NOTES — 个人博客
   游戏设计艺术家 · 插画家 · 摄影师 · 电贝斯手
   ------------------------------------------------------------
   结构:
   1.  主题变量 (春/夏/秋/冬/高级黑)
   2.  基础 & 字体
   3.  背景层 (3D 画布 + 可替换底图 + 颗粒)
   4.  顶栏
   5.  侧栏 (波浪弹出 + 磨砂虚化)
   6.  首页 Hero
   7.  个人信息页 (像素风)
   8.  作品栏
   9.  音乐栏 (磁带机 3D)
   10. 资料库 (环形档案 3D)
   11. 作品翻页视图
   12. 页脚
   13. 响应式
   ============================================================ */

/* ---------- 1. 主题变量 ---------- */
:root{
  --font-serif:"Fraunces",Georgia,"Noto Sans SC",serif;
  --font-sans:"DM Sans","Noto Sans SC",sans-serif;
  --font-mono:"DM Mono",ui-monospace,monospace;

  /* 春 · 默认 */
  --bg:#e3e4d5;
  --bg-soft:#ebecdc;
  --surface:#f4f2e6;
  --surface-2:#eceae0;
  --text:#1d221b;
  --muted:#6b6f64;
  --accent:#d2603f;
  --accent-2:#7c8c5c;
  --line:rgba(29,34,27,.16);
  --line-strong:rgba(29,34,27,.34);
  --scrim:rgba(18,20,16,.24);
  --hardware:#8f9183;   /* 磁带机机身 */
  --hardware-dark:#23251f;
  --kraft:#ad9c72;      /* 档案袋 */
  --bg-image:none;
  /* ------------------------------------------------------------
     字号标尺 (2026-10-24 typography pass)
     全站字号统一 ×2:原 8/9/10/11/12/13/14/15/16px → 16/18/20/22/24/26/28/30/32px
     标题级收敛为一段 clamp();行高与字距随放大同步收窄。
     ------------------------------------------------------------ */
  --t-micro:16px;      /* 原 8px */
  --t-tiny:18px;       /* 原 8.5 / 9px */
  --t-label:20px;      /* 原 9.5 / 10px  HUD / 编号 / 计数 */
  --t-small:22px;      /* 原 11 / 11.5px 图注 */
  --t-meta:24px;       /* 原 12 / 12.5px 卡带标题、元数据 */
  --t-lead:26px;       /* 原 13px 引导段 */
  --t-body:28px;       /* 原 14px 正文 */
  --t-body-lg:30px;    /* 原 15px 大正文 */
  --t-title:32px;      /* 原 16px 小标题 */
  --t-h5:38px;         /* 原 18 / 19 / 20px 卡片标题 */
  --t-h4:48px;         /* 原 24px 招牌字 */
  --t-quote:64px;      /* 原 32px 档案详情标题 */
  --t-h3b:clamp(48px,4.8vw,72px);    /* 原 26-38 档案卡标题 */
  --t-h6:clamp(40px,3.4vw,68px);     /* 原 22-34 画廊标题 */
  --t-hx:clamp(40px,3.2vw,64px);     /* 原 22-32 磁带详情标题 */
  --t-nav:clamp(44px,3.4vw,64px);    /* 原 24-32 侧栏导航 */
  --t-h3:clamp(52px,5.6vw,88px);     /* 原 28-44 作品标题 */
  --t-h2:clamp(56px,6.4vw,104px);    /* 原 30-52 段落大标题 */
  --t-display:clamp(96px,min(17vw,25.5vh),248px);   /* 原 64-172 首页主标题(受视口高约束) */
  --t-display-m:clamp(56px,17vw,104px);    /* 首页主标题(窄屏) */
  --lh-label:1.5;      /* 等宽标签行高 (原 1.8 → 收) */
  --lh-body:1.78;      /* 正文行高 (原 2 → 收) */
}
[data-theme="summer"]{
  --bg:#e9f1e3;
  --bg-soft:#f1f6ea;
  --surface:#f7faf0;
  --surface-2:#eef3e6;
  --text:#19231b;
  --muted:#5d7262;
  --accent:#1f8a70;
  --accent-2:#e07a5f;
  --line:rgba(25,35,27,.16);
  --line-strong:rgba(25,35,27,.34);
  --scrim:rgba(12,22,16,.24);
  --hardware:#8b9d86;
  --hardware-dark:#1d241e;
  --kraft:#a0ab74;
}
[data-theme="autumn"]{
  --bg:#eadcc3;
  --bg-soft:#f1e6cf;
  --surface:#f7eed9;
  --surface-2:#efe4cd;
  --text:#2a1f13;
  --muted:#7b6a51;
  --accent:#b4542a;
  --accent-2:#6e6b33;
  --line:rgba(42,31,19,.18);
  --line-strong:rgba(42,31,19,.38);
  --scrim:rgba(26,17,8,.26);
  --hardware:#a08e6e;
  --hardware-dark:#24201a;
  --kraft:#a88e5e;
}
[data-theme="winter"]{
  --bg:#dbe4e8;
  --bg-soft:#e7eef1;
  --surface:#f0f5f7;
  --surface-2:#e5ecef;
  --text:#16222b;
  --muted:#5e7480;
  --accent:#3e6c8e;
  --accent-2:#8fa3b0;
  --line:rgba(22,34,43,.16);
  --line-strong:rgba(22,34,43,.34);
  --scrim:rgba(8,16,22,.26);
  --hardware:#8ea1aa;
  --hardware-dark:#1a232a;
  --kraft:#8b9ea6;
}
[data-theme="black"]{
  --bg:#151714;
  --bg-soft:#1c1e1b;
  --surface:#21241f;
  --surface-2:#191b17;
  --text:#e8e6da;
  --muted:#9aa094;
  --accent:#c8a864;
  --accent-2:#6e7e6a;
  --line:rgba(232,230,218,.16);
  --line-strong:rgba(232,230,218,.36);
  --scrim:rgba(0,0,0,.5);
  --hardware:#3d4139;
  --hardware-dark:#0c0d0b;
  --kraft:#5c5540;
}

/* ---------- 2. 基础 & 字体 ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-sans);
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  transition:background .6s ease,color .6s ease;
}
h1,h2,h3,h4{font-family:var(--font-serif);font-weight:500;line-height:1.02;letter-spacing:-.015em;margin:0}
a{color:inherit;text-decoration:none}
button{font-family:inherit;color:inherit;background:none;border:none;cursor:pointer}
img{display:block;max-width:100%}
::selection{background:var(--accent);color:var(--bg)}
.eyebrow{
  font-family:var(--font-mono);font-size:var(--t-label);letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted);font-weight:500;
}

/* ---------- 3. 背景层 ---------- */
.site-bg{
  position:fixed;inset:0;z-index:-3;pointer-events:none;
  background:var(--bg-image);
  background-size:cover;background-position:center;
}
#bgCanvas{
  position:fixed;inset:0;z-index:-2;pointer-events:none;
  width:100vw;height:100vh;display:block;
}
/* 可替换底图:在 :root 或 html 上设 --bg-image:url('pic/xxx.jpg') 即可换底图 */
.grain{
  position:fixed;inset:-50%;z-index:60;pointer-events:none;opacity:.05;
  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='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 8s steps(6) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}
  40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-2%)}80%{transform:translate(3%,3%)}
}

main{position:relative;z-index:1}
.section-pad{padding:0 0 clamp(48px,6.6vh,74px)}
.wrap{padding:0 clamp(20px,6vw,110px)}
.section-heading{
  display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--font-mono);font-size:var(--t-label);letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);
  border-top:1px solid var(--line);padding-top:18px;margin-bottom:8px;
}
.section-number{color:var(--accent)}
.heading-note{opacity:.75}
.section-mark{color:var(--accent);font-size:var(--t-body)}

/* ---------- 4. 顶栏 ---------- */
/* 顶栏改成零高浮层：不再给页面留出 112px 顶带，内容可以直接顶到上边缘，
   只把 INDEX 按钮浮在右上角（pointer-events 交还给按钮，其余区域不挡点击） */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:40;height:0;
  padding:0 clamp(20px,5vw,90px);
  display:flex;justify-content:flex-end;align-items:flex-start;
  mix-blend-mode:multiply;
  pointer-events:none;
}
[data-theme="black"] .topbar{mix-blend-mode:normal}
.wordmark{
  font-family:var(--font-serif);font-weight:600;font-size:var(--t-h4);letter-spacing:.01em;
  display:flex;align-items:baseline;
}
.wordmark .dot{color:var(--accent)}
.top-location{font-family:var(--font-mono);font-size:var(--t-tiny);letter-spacing:.1em;color:var(--muted);display:flex;align-items:center;gap:9px}
.status-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 24%,transparent);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.menu-trigger{
  position:absolute;top:41px;right:clamp(18px,5vw,90px);pointer-events:auto;
  display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:var(--t-label);letter-spacing:.1em;text-transform:uppercase;
}
.menu-glyph{display:grid;gap:4px;width:20px}
.menu-glyph i{display:block;height:1.5px;background:var(--text);transition:.35s}
.menu-trigger:hover .menu-glyph i:first-child{transform:translateY(3px)}
.menu-trigger:hover .menu-glyph i:last-child{transform:translateY(-3px)}

/* ---------- 5. 侧栏 (波浪弹出 + 磨砂虚化) ---------- */
.edge-trigger{position:fixed;top:0;right:0;bottom:0;width:56px;z-index:41}
.side-panel{
  position:fixed;top:0;right:0;bottom:0;z-index:50;width:clamp(420px,40vw,660px);
  background:var(--surface);color:var(--text);
  padding:40px 44px 32px;display:flex;flex-direction:column;
  transform:translateX(112%) scaleX(.7);transform-origin:right center;
  transition:transform .85s cubic-bezier(.16,1,.3,1);
  box-shadow:-30px 0 80px -20px color-mix(in srgb,var(--text) 26%,transparent);
  overflow:hidden;
}
.side-panel.open{transform:translateX(0) scaleX(1)}
.side-wave{
  position:absolute;top:0;left:-2px;width:60px;height:100%;pointer-events:none;
  opacity:.5;color:var(--accent);
}
.side-wave svg{width:100%;height:100%}
.side-wave .wave-a{animation:sway 5.5s ease-in-out infinite;transform-origin:0 50%}
.side-wave .wave-b{animation:sway 5.5s ease-in-out infinite;animation-delay:-2.7s;transform-origin:0 50%}
@keyframes sway{0%,100%{transform:translateX(0)}50%{transform:translateX(9px)}}
.side-head{display:flex;justify-content:space-between;align-items:center;font-family:var(--font-mono);font-size:var(--t-label);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.side-head .close{font-size:var(--t-h4);line-height:1;color:var(--text);padding:0 4px}
.side-nav{margin:auto 0;display:grid;padding:20px 0}
.side-nav a{
  position:relative;display:flex;align-items:baseline;gap:16px;
  padding:18px 0;border-bottom:1px solid var(--line);
  font-family:var(--font-serif);font-size:var(--t-nav);font-weight:500;
  transition:transform .4s cubic-bezier(.16,1,.3,1),color .4s;
}
.side-nav a:hover{transform:translateX(-8px);color:var(--accent)}
.side-nav a span{font-family:var(--font-mono);font-size:var(--t-label);letter-spacing:.06em;color:var(--accent)}
.side-nav a small{font-family:var(--font-mono);font-size:var(--t-tiny);letter-spacing:.09em;color:var(--muted);margin-left:auto;text-transform:uppercase}
.theme-box{padding:20px 0;border-top:1px solid var(--line)}
.theme-box .eyebrow{display:block;margin-bottom:14px}
.swatches{display:flex;gap:14px}
.swatch{width:38px;height:38px;border-radius:50%;padding:0;position:relative}
.swatch i{display:block;width:100%;height:100%;border-radius:50%;transition:transform .3s,box-shadow .3s;box-shadow:inset 0 0 0 1px var(--line-strong)}
.swatch:hover i{transform:scale(1.18)}
.swatch.active i{box-shadow:inset 0 0 0 2px var(--text),0 0 0 4px var(--surface),0 0 0 5px var(--text)}
.swatch[data-theme="spring"] i{background:#e3e4d5}
.swatch[data-theme="summer"] i{background:#e9f1e3}
.swatch[data-theme="autumn"] i{background:#eadcc3}
.swatch[data-theme="winter"] i{background:#dbe4e8}
.swatch[data-theme="black"] i{background:#151714}
.theme-label{margin-top:12px;font-family:var(--font-mono);font-size:var(--t-label);letter-spacing:.11em;text-transform:uppercase;color:var(--accent)}
.side-foot{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:.07em;color:var(--muted);text-transform:uppercase}
.page-scrim{
  position:fixed;inset:0;z-index:44;opacity:0;pointer-events:none;
  background:var(--scrim);
  backdrop-filter:blur(0) saturate(1);
  transition:opacity .55s ease,backdrop-filter .55s ease;
}
.page-scrim.active{opacity:1;pointer-events:auto;backdrop-filter:blur(14px) saturate(.72) brightness(.9)}
body.menu-open main{filter:blur(7px) saturate(.85);transition:filter .55s ease}
body.menu-open .topbar{filter:blur(4px)}

/* ---------- 6. 首页 Hero ---------- */
.hero{
  min-height:100vh;display:flex;flex-direction:column;justify-content:space-between;
  position:relative;padding:0 clamp(20px,6vw,110px) 40px;
}
.hero-meta{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:var(--t-label);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.hero-title-wrap{position:relative;margin:2.4vh 0 1.4vh}
.hero h1{
  font-size:var(--t-display);line-height:.92;letter-spacing:-.04em;font-weight:560;
  font-variation-settings:"opsz" 144;
}
.hero h1 .stroke{color:transparent;-webkit-text-stroke:2.4px var(--text)}
.hero h1 .accent{color:var(--accent)}
.hero h1 .period{color:var(--accent)}
.hero-aside{position:relative;display:block;margin:clamp(30px,4vh,54px) 0 0 auto;max-width:min(620px,54vw);font-family:var(--font-sans);font-size:var(--t-lead);line-height:1.6;color:var(--muted);text-align:right}
.hero-bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;flex-wrap:wrap}
.hero-bottom p{max-width:640px;font-size:var(--t-body);line-height:1.9;color:var(--muted);margin:0}
.hero-bottom p strong{color:var(--text);font-weight:600}
.scroll-cue{display:inline-flex;flex-direction:column;align-items:center;gap:6px;font-family:var(--font-mono);font-size:var(--t-tiny);letter-spacing:.11em;text-transform:uppercase;color:var(--text)}
.scroll-cue i{font-size:var(--t-h5);animation:floaty 2s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
.hero-index{font-family:var(--font-mono);font-size:var(--t-label);letter-spacing:.1em;color:var(--muted)}

/* ---------- 7. 个人信息页 (像素风) ---------- */
.about-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.86fr);gap:clamp(36px,4.6vw,76px);padding-top:56px;align-items:start}
.about-intro h2{font-size:var(--t-h2);line-height:1.14;font-weight:500;margin:20px 0 24px}
.about-intro h2 strong{color:var(--accent);font-weight:500}
.body-copy{max-width:680px;font-size:var(--t-body-lg);line-height:1.78;color:var(--muted);margin:0 0 30px}
.about-side{display:flex;flex-direction:column;gap:26px}
.pixel-scene{
  position:relative;height:clamp(300px,28vw,430px);border-radius:6px;overflow:hidden;
  background:
    linear-gradient(180deg,var(--accent-2) 0%,color-mix(in srgb,var(--accent-2) 70%,#fff) 34%,transparent 34.2%),
    linear-gradient(180deg,transparent 34%,color-mix(in srgb,var(--bg) 20%,#0000) 34.2%);
  background-color:color-mix(in srgb,var(--accent-2) 26%,var(--bg));
  image-rendering:pixelated;
  box-shadow:0 20px 60px -30px color-mix(in srgb,var(--text) 40%,transparent);
}
.pixel-sun{position:absolute;top:12%;right:14%;width:34px;height:34px;background:var(--accent);image-rendering:pixelated;box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 30%,transparent)}
.pixel-mountain{position:absolute;bottom:32%;left:0;width:0;height:0;border-style:solid;image-rendering:pixelated}
.mtn-one{border-width:0 46vw 120px 0;border-color:transparent color-mix(in srgb,var(--accent-2) 60%,var(--bg)) transparent transparent}
.mtn-two{border-width:0 0 92px 52vw;border-color:transparent transparent color-mix(in srgb,var(--text) 30%,var(--accent-2)) transparent;bottom:32%}
.pixel-water{position:absolute;bottom:0;left:0;right:0;height:30%;background:repeating-linear-gradient(180deg,color-mix(in srgb,var(--accent) 55%,var(--bg)) 0 3px,transparent 3px 7px);opacity:.7}
.pixel-x{position:absolute;top:8%;left:6%;color:var(--accent);font-size:var(--t-title)}
.pixel-coordinate{position:absolute;bottom:8%;right:6%;font-family:var(--font-mono);font-size:var(--t-tiny);letter-spacing:.06em;color:var(--text);text-align:right;opacity:.7}
.pixel-game{
  display:flex;align-items:center;gap:22px;margin-top:10px;padding:20px 22px;
  background:var(--hardware-dark);color:var(--bg);border-radius:8px;
  transition:transform .35s cubic-bezier(.16,1,.3,1);
}
.pixel-game:hover{transform:translateY(-4px)}
.game-screen{
  display:block;flex:0 0 auto;width:222px;height:88px;border-radius:4px;overflow:hidden;
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent-2) 80%,#fff) 0 40%,color-mix(in srgb,var(--accent-2) 70%,var(--text)) 40%);
  position:relative;image-rendering:pixelated;
}
.game-player{position:absolute;left:26px;bottom:10px;color:var(--text);font-size:var(--t-body-lg);transition:transform .18s}
.game-score{position:absolute;right:10px;top:7px;font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:.05em;color:var(--text)}
.game-label{font-family:var(--font-mono);font-size:var(--t-label);letter-spacing:.09em;text-transform:uppercase;text-align:left;line-height:1.5}
.game-label span{color:var(--accent)}
.about-facts{display:flex;flex-wrap:wrap;gap:8px 18px;font-family:var(--font-mono);font-size:var(--t-tiny);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.about-facts span{position:relative;padding-left:14px}
.about-facts span::before{content:"";position:absolute;left:0;top:50%;width:6px;height:6px;background:var(--accent);border-radius:50%;transform:translateY(-50%)}

/* ---------- 8. 作品栏 ---------- */
.work-feature{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(36px,4.6vw,76px);padding-top:56px;align-items:center}
.work-photo{
  position:relative;height:clamp(430px,46vw,700px);border-radius:6px;overflow:hidden;
  background:linear-gradient(135deg,var(--accent-2),color-mix(in srgb,var(--accent) 55%,var(--bg)) 55%,var(--accent));
  box-shadow:0 30px 80px -40px color-mix(in srgb,var(--text) 55%,transparent);
}
.work-photo img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s}
.work-photo img.loaded{opacity:1}
.work-photo-placeholder{position:absolute;inset:0;display:grid;place-content:center;gap:10px;color:var(--surface);font-family:var(--font-mono);text-align:center;transition:opacity .4s ease}
.work-photo.img-ready .work-photo-placeholder{opacity:0;visibility:hidden}
.work-photo-placeholder span:first-child{font-size:var(--t-small);letter-spacing:.15em}
.work-photo-placeholder span:last-child{font-size:var(--t-tiny);letter-spacing:.09em;opacity:.8}
.work-photo-caption{position:absolute;left:18px;bottom:16px;font-family:var(--font-mono);font-size:var(--t-tiny);letter-spacing:.1em;color:var(--surface);text-shadow:0 1px 8px rgba(0,0,0,.5)}
.work-expand{
  position:absolute;right:16px;bottom:16px;width:48px;height:48px;border-radius:50%;
  background:var(--surface);color:var(--text);font-size:var(--t-h5);
  display:grid;place-items:center;transition:transform .4s cubic-bezier(.16,1,.3,1),background .3s;
}
.work-expand:hover{transform:scale(1.1) rotate(45deg)}
.work-feature-info .eyebrow{display:block}
.work-feature-info h3{font-size:var(--t-h3);margin:16px 0 18px;font-weight:500}
.work-feature-info p{color:var(--muted);font-size:var(--t-body);line-height:1.72;margin:0}
.text-link{
  display:inline-flex;align-items:center;gap:10px;margin-top:34px;padding:12px 0;
  font-family:var(--font-mono);font-size:var(--t-label);letter-spacing:.1em;text-transform:uppercase;
  border-bottom:1px solid var(--text);transition:color .3s,letter-spacing .4s;
}
.text-link:hover{color:var(--accent);border-color:var(--accent);letter-spacing:.13em}
.work-count{display:block;margin-top:24px;font-family:var(--font-mono);font-size:var(--t-label);letter-spacing:.1em;color:var(--muted)}

/* ---------- 9. 音乐栏 (磁带机 3D) ---------- */
.music{position:relative}
.music-head{display:grid;grid-template-columns:1fr .6fr;gap:40px;padding-top:30px;align-items:end}
.music-head h2{font-size:var(--t-h2);margin-top:18px}
.music-head h2 strong{color:var(--accent);font-weight:500}
.music-intro{font-size:var(--t-lead);line-height:1.66;color:var(--muted);text-align:right}
.player-stage{
  position:relative;height:clamp(640px,86vh,1020px);margin-top:46px;
  display:grid;place-items:center;
}
#deck3d{position:absolute;inset:0;cursor:grab;touch-action:none}
#deck3d:active{cursor:grabbing}
#deck3d canvas{display:block;width:100%;height:100%}
.player-note{position:absolute;z-index:5;max-width:min(330px,27vw);font-family:var(--font-mono);font-size:var(--t-tiny);letter-spacing:.1em;line-height:1.7;color:var(--muted);text-transform:uppercase}
/* 舞台改居中后，舞台顶角落到标题/引言上，两条说明改挂舞台下沿（图注在左下、
   拖拽提示在右下 CTA 上方），页面四角各占一块，机身周围留空 */
.note-left{left:2.6%;right:auto;top:auto;bottom:2%}
.note-right{right:calc(2.6% + 30px);left:auto;top:auto;bottom:19%;text-align:right}

/* 磁带库:左侧浮空 · 竖直仿 3D 滚轮(无框、无阴影) */
.tape-rail{
  position:absolute;z-index:6;left:1.2%;top:17.5%;bottom:6%;width:min(360px,29vw);
  display:flex;flex-direction:column;
  opacity:0;pointer-events:none;transform:translateX(-46px);
  transition:opacity .65s ease,transform .8s cubic-bezier(.16,1,.3,1);
}
.tape-rail.open{opacity:1;pointer-events:auto;transform:translateX(0)}
.tape-rail.dim{opacity:.22;pointer-events:none}
.tape-rail-head,.tape-rail-foot{
  display:flex;justify-content:space-between;align-items:center;
  font-family:var(--font-mono);font-size:var(--t-tiny);letter-spacing:.11em;text-transform:uppercase;color:var(--muted);
}
.tape-rail-foot{margin-top:auto}
.tape-roller{position:relative;flex:1;margin:14px 0;perspective:1000px;perspective-origin:50% 50%}
.tw-item{
  position:absolute;left:0;right:0;top:50%;height:168px;margin-top:-84px;
  will-change:transform,opacity;transform-style:preserve-3d;
}
.tw-enter{height:100%;opacity:0;transform:translateX(-165%);transition:transform .95s cubic-bezier(.16,1,.3,1),opacity .85s ease}
.tw-enter.in{opacity:1;transform:translateX(0)}
.tw-float{height:100%;animation:twFloat 7s ease-in-out infinite}
@keyframes twFloat{0%,100%{transform:translateY(-2px)}50%{transform:translateY(3px)}}
.tape-card{
  position:relative;height:168px;display:grid;grid-template-columns:37% 1fr;grid-template-rows:1fr auto;
  overflow:hidden;border-radius:7px;background:var(--kraft);
  border:0;box-shadow:none;cursor:pointer;
  transition:transform .4s cubic-bezier(.16,1,.3,1),background .3s;
}
.tw-item:hover .tape-card{transform:translateX(10px)}
.tape-card .tc-label{grid-row:1 / 3;grid-column:1;overflow:hidden;background:var(--surface)}
.tape-card .tc-label img{width:100%;height:100%;object-fit:cover;display:block}
.tape-card .tc-reels{grid-row:1;grid-column:2;display:flex;align-items:center;gap:16px;padding-left:16px}
.tape-card .tc-reels i{width:22px;height:22px;border-radius:50%;background:var(--text);opacity:.42;position:relative}
.tape-card .tc-reels i::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--kraft)}
.tape-card .tc-meta{grid-row:2;grid-column:2;min-width:0;padding:0 14px 16px 16px;display:flex;flex-direction:column;gap:5px}
.tape-card .tc-meta b{font-family:var(--font-mono);font-size:var(--t-tiny);letter-spacing:.1em;color:var(--text);opacity:.7}
.tape-card .tc-meta em{font-style:normal;font-size:var(--t-meta);line-height:1.3;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 抽出的磁带 + 详情 */
.tape-detail{
  position:absolute;z-index:9;inset:0;display:grid;place-items:center;
  opacity:0;pointer-events:none;transition:opacity .5s ease;
  background:radial-gradient(ellipse at 52% 50%,color-mix(in srgb,var(--bg) 80%,transparent) 0%,color-mix(in srgb,var(--bg) 44%,transparent) 46%,transparent 74%);
}
.tape-detail.open{opacity:1;pointer-events:auto}
.td-inner{display:flex;align-items:center;gap:clamp(24px,3.4vw,56px);padding:clamp(18px,3vw,34px);max-width:min(1120px,94vw)}
.td-cassette{
  position:relative;flex:0 0 auto;width:clamp(220px,19vw,340px);aspect-ratio:1.56;
  border-radius:8px;background:var(--kraft);border:0;box-shadow:none;overflow:hidden;
  transform-origin:50% 50%;will-change:transform;
}
.td-cassette .td-label{position:absolute;left:5.5%;top:7%;right:5.5%;height:50%;overflow:hidden;background:var(--surface)}
.td-cassette .td-label img{width:100%;height:100%;object-fit:cover;display:block}
.td-cassette .td-window{position:absolute;left:16%;right:16%;bottom:13%;height:21%;display:flex;justify-content:space-between;align-items:center}
.td-cassette .td-window i{width:17%;aspect-ratio:1;border-radius:50%;background:color-mix(in srgb,var(--text) 74%,transparent)}
.td-cassette .td-no{position:absolute;left:6%;bottom:4%;font-family:var(--font-mono);font-size:var(--t-label);letter-spacing:.1em;color:var(--text);opacity:.65}
.td-info{max-width:min(430px,40vw)}
.td-info .eyebrow{display:block;font-size:var(--t-tiny)}
.td-info b{display:block;font-family:var(--font-serif);font-weight:500;font-size:var(--t-hx);line-height:1.14;margin:8px 0 6px}
.td-artist{font-family:var(--font-mono);font-size:var(--t-small);letter-spacing:.03em;color:var(--muted)}
.td-meta{display:grid;grid-template-columns:1fr 1fr;gap:14px 24px;margin:20px 0 22px}
.td-meta div{display:flex;flex-direction:column;gap:3px}
.td-meta dt{font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:.12em;color:var(--muted)}
.td-meta dd{margin:0;font-size:var(--t-lead);color:var(--text)}
.td-close{
  font-family:var(--font-mono);font-size:var(--t-tiny);letter-spacing:.1em;text-transform:uppercase;
  color:var(--text);border-bottom:1px solid var(--line);padding:0 0 5px;background:none;cursor:pointer;
}
@media (max-width:860px){
  .tape-rail{width:min(240px,54vw);left:0;top:4%;bottom:4%}
  .td-inner{flex-direction:column;gap:22px}
  .td-info{max-width:none;text-align:center}
  .td-meta{justify-items:center}
}

/* ---------- 10. 资料库 (环形档案 3D) ---------- */
.archive-head{display:flex;justify-content:space-between;align-items:end;gap:40px;padding-top:30px}
.archive-head h2{font-size:var(--t-h2);margin-top:18px}
.archive-head h2 strong{color:var(--accent);font-weight:500}
.archive-head p{max-width:540px;font-size:var(--t-lead);line-height:1.66;color:var(--muted);margin:0;text-align:right}
.archive-workspace{position:relative;height:clamp(600px,78vh,790px);margin-top:20px}
/* 底部纸色渐隐已于 2026-10-25 移除（分类索引搬进左栏，画布不需要遮罩压字） */
#archive3d{position:absolute;inset:0}
.archive-label{position:absolute;font-family:var(--font-mono);font-size:var(--t-tiny);letter-spacing:.1em;line-height:1.7;color:var(--muted);text-transform:uppercase;pointer-events:none}
.label-top{top:3.4%;left:2.8%;max-width:44%}
/* 画布顶到 y=0 后，提示行若仍贴 3.4% 会落到 INDEX 按钮（y 41–70）上，
   这里下移，首帧/无 3D 的回退态都不再和按钮叠字 */
.label-bottom{top:clamp(96px,11vh,116px);right:2.8%;left:auto;bottom:auto;transform:none;text-align:right;max-width:44%}
.archive-card-view{
  position:absolute;inset:0;z-index:7;display:grid;place-items:center;
  background:color-mix(in srgb,var(--bg) 72%,transparent);
  backdrop-filter:blur(6px);
  opacity:0;pointer-events:none;transition:opacity .45s;
}
.archive-card-view.open{opacity:1;pointer-events:auto}
.archive-back{
  position:absolute;top:18px;left:18px;padding:10px 14px;
  font-family:var(--font-mono);font-size:var(--t-tiny);letter-spacing:.09em;text-transform:uppercase;
  border:1px solid var(--line-strong);border-radius:40px;
  transition:background .3s,color .3s;
}
.archive-back:hover{background:var(--text);color:var(--bg)}
.opened-folder{
  width:min(560px,90vw);min-height:420px;padding:48px 40px;border-radius:4px;
  background:var(--kraft);color:var(--text);
  box-shadow:0 40px 90px -40px color-mix(in srgb,var(--text) 60%,transparent);
  transform:translateY(14px) rotate(-1deg);transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.archive-card-view.open .opened-folder{transform:translateY(0) rotate(0)}
.folder-stamp{display:inline-block;font-family:var(--font-mono);font-size:var(--t-tiny);letter-spacing:.09em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line-strong);padding:4px 8px;border-radius:2px;margin-bottom:24px}
.opened-folder h3{font-size:var(--t-h3b);font-weight:500;margin:10px 0 16px}
.opened-folder p{font-size:var(--t-body);line-height:2;color:color-mix(in srgb,var(--text) 80%,transparent);margin:0 0 26px}
.opened-folder .folder-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.opened-folder .folder-tags span{font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:.07em;text-transform:uppercase;padding:4px 9px;border:1px solid var(--line-strong);border-radius:20px;color:var(--muted)}
.opened-folder a.link{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:var(--t-label);letter-spacing:.07em;color:var(--accent);border-bottom:1px solid var(--accent);padding-bottom:4px}
.folder-meta{display:flex;justify-content:space-between;margin-top:28px;padding-top:16px;border-top:1px solid var(--line-strong);font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}

/* ---------- 11. 作品翻页视图 ---------- */
.gallery-view{
  --gallery-cap-h:clamp(184px,23vh,268px);   /* 底部流水条高度(字号×2 后加高) */
  position:fixed;inset:0;width:100vw;max-width:100vw;overflow:hidden;
  z-index:70;background:var(--bg);
  display:flex;flex-direction:column;opacity:0;pointer-events:none;transition:opacity .4s;
}
.gallery-view.open{opacity:1;pointer-events:auto}
.gallery-header{display:flex;justify-content:space-between;align-items:center;padding:22px clamp(20px,6vw,90px);font-family:var(--font-mono);font-size:var(--t-label);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.gallery-header button{display:flex;align-items:center;gap:10px;color:var(--text);font-family:var(--font-mono);font-size:var(--t-label);letter-spacing:.09em;text-transform:uppercase}
.gallery-header button:hover{color:var(--accent)}
.sr-only{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.gallery-stage{
  position:relative;flex:1 1 auto;margin:0;overflow:hidden;
  cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;
}
.gallery-stage.dragging{cursor:grabbing}
.gallery-track{position:absolute;inset:0}
.gallery-slide{
  background:transparent;
  position:absolute;top:50%;left:50%;
  width:100vw;height:100%;margin:0;
  transform:translate(-50%,-50%);
  will-change:transform;
  z-index:1;
  pointer-events:none;
}
.gallery-track.settling .gallery-slide{transition:transform .56s cubic-bezier(.22,.82,.24,1)}
.gallery-slide img{
  width:100%;height:100%;object-fit:contain;display:block;
  filter:saturate(0);
  opacity:1;transition:opacity .45s ease,filter .56s cubic-bezier(.22,.82,.24,1);
  -webkit-user-drag:none;user-select:none;-webkit-user-select:none;
  pointer-events:none;
}
.gallery-slide img.loaded{opacity:1}
.gallery-grab{
  position:absolute;right:18px;bottom:12px;
  font-family:var(--font-mono);font-size:var(--t-tiny);letter-spacing:.17em;
  color:var(--muted);opacity:.55;pointer-events:none;
}
.gallery-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:70px;height:70px;border-radius:50%;font-size:var(--t-h4);
  background:var(--surface);color:var(--text);display:grid;place-items:center;
  box-shadow:0 10px 30px -10px color-mix(in srgb,var(--text) 35%,transparent);
  transition:transform .3s,background .3s,color .3s;
}
.gallery-arrow:hover{background:var(--text);color:var(--bg);transform:translateY(-50%) scale(1.08)}
.gallery-prev{left:clamp(16px,3vw,48px)}
.gallery-next{right:clamp(16px,3vw,48px)}
.gallery-caption{
  position:relative;flex:0 0 auto;
  height:var(--gallery-cap-h,76px);              /* ← 高度就改这个变量 */
  display:flex;align-items:center;overflow:hidden;
  border-top:1px solid var(--line);background:var(--bg);
  transition:opacity .26s ease;
}
.gallery-caption.out{opacity:0}
.gc-mask{
  width:100%;height:100%;display:flex;align-items:center;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 26px,#000 calc(100% - 26px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 26px,#000 calc(100% - 26px),transparent 100%);
}
.gc-track{
  display:flex;align-items:center;gap:clamp(18px,2.2vw,38px);
  padding-left:clamp(16px,4vw,64px);padding-right:clamp(16px,4vw,64px);
  white-space:nowrap;will-change:transform;
  animation:gcFlow var(--gc-dur,40s) linear infinite;
}
.gallery-caption:hover .gc-track,
.gallery-caption:focus-within .gc-track{animation-play-state:paused}
@keyframes gcFlow{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(calc(-1 * var(--gc-shift,0px)),0,0)}
}
.gc-sep{font-size:var(--t-tiny);color:var(--accent);opacity:.9;flex:0 0 auto}
.gc-eyebrow{font-family:var(--font-mono);font-size:var(--t-label);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);flex:0 0 auto}
.gc-title{
  font-family:var(--font-serif);font-size:var(--t-h6);
  line-height:1;letter-spacing:-.01em;color:var(--text);flex:0 0 auto;margin:0;
}
.gc-line{font-size:var(--t-lead);line-height:1.2;color:color-mix(in srgb,var(--text) 72%,transparent);flex:0 0 auto}
.gc-hint{font-family:var(--font-mono);font-size:var(--t-tiny);letter-spacing:.09em;text-transform:uppercase;color:var(--muted);flex:0 0 auto}
@media (prefers-reduced-motion:reduce){
  .gc-track{animation:none!important;transform:none!important}
}

/* ---------- 12. 页脚 ---------- */
.footer{background:var(--hardware-dark);color:var(--bg);padding:54px clamp(20px,6vw,110px)}
.footer-top{display:flex;justify-content:space-between;align-items:center;gap:16px 32px;flex-wrap:wrap;font-family:var(--font-mono);font-size:var(--t-label);letter-spacing:.1em;text-transform:uppercase}
.footer-top a{border-bottom:1px solid;padding-bottom:3px;transition:color .3s}
.footer-top a:hover{color:var(--accent)}
.footer-bottom{display:flex;justify-content:space-between;gap:20px;padding-top:28px;font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:.07em;text-transform:uppercase;opacity:.65;flex-wrap:wrap}

/* ---------- 13. 响应式 ---------- */
@media(max-width:820px){
  .hero{padding:0 clamp(20px,6vw,48px) 32px}
  .menu-trigger{top:24px}
  .hero-meta{flex-direction:column;align-items:flex-start;gap:6px}
  .hero-aside{max-width:none;text-align:left;margin-left:0}
  .hero h1{font-size:var(--t-display-m)}
  .hero-aside{position:static;text-align:left;margin-top:18px;max-width:none}
  .about-grid,.work-feature,.music-head{grid-template-columns:1fr;gap:36px}
  .work-feature-info{order:-1}
  .music-intro{text-align:left}
  .archive-head{flex-direction:column;align-items:flex-start;gap:8px}
  .archive-head p{text-align:left}
  .note-left,.note-right{display:none}
  .scan-cta{left:50%;right:auto;top:auto;bottom:6px;transform:translateX(-50%);max-width:calc(100% - 24px)}
  .tape-rail{bottom:22%}
  .gallery-slide{width:100vw}
  .gallery-caption{flex-direction:column;align-items:flex-start;gap:14px;max-height:34vh;overflow:auto;pointer-events:auto;padding:14px 20px 18px}
  .gallery-hint{text-align:left}
  .section-pad{padding:0 0 80px}
  .top-location{display:none}
}

/* ---------- 14. 开屏 (仿等高线地形 + 线球 logo) ---------- */
/* 基础遮罩:保证瞬时覆盖;完整视觉样式由 loader.js 注入 #loader-style */
#loader{
  position:fixed;inset:0;z-index:100;overflow:hidden;
  background:var(--bg);color:var(--text);font-family:var(--font-sans);
  opacity:1;transition:opacity .9s ease;
}
#loader.ld-leave{opacity:0;pointer-events:none}

/* ---------- 15. 像素小游戏 · 全屏覆盖层 ---------- */
.px-fullscreen{
  background:var(--scrim);
  color:var(--text);
  font-family:var(--font-mono);
  overflow:hidden;
}
.px-fullscreen::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,color-mix(in srgb,var(--bg-soft) 60%,transparent),color-mix(in srgb,var(--bg) 30%,transparent));
  pointer-events:none;
}
.px-stage{z-index:1}
.px-canvas{box-shadow:0 0 0 1px var(--line-strong),0 30px 90px -30px rgba(0,0,0,.6)}
.px-hud{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  padding:clamp(14px,3vw,28px);
  display:flex;justify-content:space-between;align-items:flex-start;
}
.px-score{font-size:clamp(28px,4.8vw,44px);letter-spacing:.09em}
.px-best{font-size:clamp(24px,4vw,32px);color:var(--muted);letter-spacing:.09em}
.px-hint{
  position:absolute;left:50%;bottom:clamp(14px,3vw,28px);transform:translateX(-50%);
  font-size:clamp(20px,3.2vw,26px);letter-spacing:.11em;color:var(--muted);
}
.px-over{
  position:absolute;inset:0;z-index:3;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:color-mix(in srgb,var(--bg) 72%,var(--scrim));
  opacity:0;visibility:hidden;transition:opacity .3s;
}
.px-over.show{opacity:1;visibility:visible}
.px-over-title{font-size:clamp(52px,10vw,104px);letter-spacing:.12em;color:var(--accent);text-shadow:0 3px 0 color-mix(in srgb,var(--text) 30%,transparent)}
.px-over-score{font-size:clamp(28px,4.8vw,40px);letter-spacing:.1em;color:var(--text)}
.px-restart{
  margin-top:8px;padding:12px 26px;border:1px solid var(--text);background:var(--surface);color:var(--text);
  font-family:var(--font-mono);font-size:clamp(24px,3.6vw,28px);letter-spacing:.11em;cursor:pointer;
  transition:background .3s,color .3s,transform .3s;
}
.px-restart:hover{background:var(--accent);color:var(--bg);transform:translateY(-2px)}
.px-close{
  position:absolute;top:clamp(12px,2.6vw,22px);right:clamp(12px,2.6vw,22px);z-index:4;
  width:40px;height:40px;border:1px solid var(--text);background:var(--surface);color:var(--text);
  font-size:var(--t-title);cursor:pointer;transition:background .3s,color .3s;
}
.px-close:hover{background:var(--accent);color:var(--bg)}

/* ============================================================
   16. 扫描件查看器（真实机器 GLB）
   ============================================================ */
.scan-cta{
  position:absolute; left:auto; right:2.4%; bottom:4.5%;
  display:grid; grid-template-columns:auto auto; gap:4px 14px; align-items:baseline;
  padding:14px 18px 15px; border:1px solid var(--line-strong);
  background:color-mix(in srgb, var(--surface) 72%, transparent);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  color:var(--text); text-align:left; cursor:pointer;
  transition:border-color .3s var(--ease, ease), transform .3s var(--ease, ease), background .3s;
  z-index:4;
}
.scan-cta:hover{ border-color:var(--accent); transform:translateY(-2px); background:color-mix(in srgb, var(--surface) 88%, transparent); }
.scan-cta-k{ grid-column:1; font:500 var(--t-tiny)/1 var(--mono, monospace); letter-spacing:.09em; color:var(--muted); }
.scan-cta-t{ grid-column:1; font:500 var(--t-lead)/1.35 var(--sans, sans-serif); letter-spacing:.01em; }
.scan-cta-a{ grid-column:2; grid-row:1 / span 2; align-self:center; font:400 var(--t-lead)/1 var(--mono, monospace); color:var(--accent); }

.scan-viewer{
  position:fixed; inset:0; z-index:120;
  display:flex; align-items:center; justify-content:center;
  background:var(--scrim, rgba(0,0,0,.86));
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  opacity:0; pointer-events:none;
  transition:opacity .42s var(--ease, ease);
}
.scan-viewer.open{ opacity:1; pointer-events:auto; }
/* 关闭态只剩 opacity:0，.sv-close 的 pointer-events:auto 仍会挡住右上角 INDEX 按钮的点击 */
.scan-viewer:not(.open) .sv-close{pointer-events:none}
.sv-stage{ position:absolute; inset:0; }
.sv-stage canvas{ display:block; width:100% !important; height:100% !important; }
.sv-ui{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-between;
  padding:22px 26px; pointer-events:none;
}
.sv-head, .sv-foot{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.sv-head .eyebrow, .sv-foot span{ font:500 var(--t-label)/1 var(--mono, monospace); letter-spacing:.08em; color:var(--muted); }
.sv-foot span:last-child{ text-align:right; }
.sv-close{
  pointer-events:auto; padding:8px 14px; border:1px solid var(--line-strong);
  background:transparent; color:var(--text); cursor:pointer;
  font:500 var(--t-label)/1 var(--mono, monospace); letter-spacing:.08em;
  transition:border-color .3s, color .3s;
}
.sv-close:hover{ border-color:var(--accent); color:var(--accent); }
@media (max-width:860px){
  .scan-cta{ left:50%; transform:translateX(-50%); bottom:14px; }
  .scan-cta:hover{ transform:translateX(-50%) translateY(-2px); }
  .sv-ui{ padding:16px; }
  .sv-foot span:last-child{ display:none; }
}

@media (max-width:640px){
  .archive-workspace .archive-label,.archive-workspace .label-bottom{display:none}
}

.archive-workspace:has(.ar-room) .archive-label{display:none}

/* ============ 17. 档案详情（Rhine Lab 风格） ============ */
.ar-detail{
  position:absolute;right:2.2%;top:6%;bottom:6%;width:min(560px,42%);
  background:rgba(247,247,242,.985);border:1px solid rgba(24,26,22,.16);
  box-shadow:0 18px 48px -28px rgba(24,26,22,.45);isolation:isolate;
  padding:26px 26px 20px;overflow-y:auto;overscroll-behavior:contain;
  opacity:0;transform:translateX(18px);pointer-events:none;
  transition:opacity .34s cubic-bezier(.22,1,.36,1),transform .34s cubic-bezier(.22,1,.36,1);
  z-index:6;scrollbar-width:thin;scrollbar-color:#bbb4a6 transparent;
}
.ar-detail.on{opacity:1;transform:translateX(0);pointer-events:auto}
.ar-dt-close{position:absolute;right:14px;top:12px;font:400 var(--t-meta)/1 var(--mono,monospace);color:#77756d;letter-spacing:.05em}
.ar-dt-kicker{display:flex;align-items:center;justify-content:space-between;font:500 var(--t-label)/1 var(--mono,monospace);letter-spacing:.07em;color:#3a3d36}
.ar-dt-kicker span:last-child{font-size:var(--t-tiny);color:#77756b}
.ar-detail h2{margin:22px 0 10px;font:600 var(--t-quote)/1.14 var(--serif,"Fraunces",serif);letter-spacing:-.02em;color:#191c16}
.ar-dt-cn{display:flex;align-items:center;gap:16px;font:400 var(--t-body-lg)/1.3 var(--sans,sans-serif);color:#2a2d26}
.ar-dt-cn span{font:500 var(--t-tiny)/1 var(--mono,monospace);letter-spacing:.06em;color:#77756a;text-transform:uppercase}
.ar-dt-rule{height:2px;background:#20221d;margin-top:20px}
.ar-dt-meta{display:grid;grid-template-columns:1fr 1fr;gap:18px 26px;margin:20px 0 22px}
.ar-dt-meta dt{font:500 var(--t-tiny)/1 var(--mono,monospace);letter-spacing:.05em;color:#807b70}
.ar-dt-meta dd{margin:7px 0 0;font:400 var(--t-meta)/1.5 var(--sans,sans-serif);color:#232620}
.ar-dt-meta dd i{display:inline-block;width:5px;height:5px;background:#8b8f75;margin-right:7px;vertical-align:middle}
.ar-dt-tabs{display:flex;gap:24px;border-bottom:1px solid #bdb8ad}
.ar-dt-tabs button{font:500 var(--t-label)/1 var(--mono,monospace);letter-spacing:.04em;color:#989184;padding:0 0 12px;position:relative}
.ar-dt-tabs button span{font-size:var(--t-small);margin-left:6px;font-family:var(--sans,sans-serif);letter-spacing:0}
.ar-dt-tabs button.on{color:#191c16}
.ar-dt-tabs button.on:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:#25281e}
.ar-dt-panel{padding-top:16px}
.ar-dt-label{font:500 var(--t-tiny)/1 var(--mono,monospace);letter-spacing:.05em;color:#888074}
.ar-dt-panel p{margin:10px 0 0;font:400 var(--t-meta)/1.9 var(--sans,sans-serif);color:#5a584e;white-space:pre-wrap;text-align:justify}
.ar-dt-actions{display:flex;align-items:center;gap:20px;margin-top:18px}
.ar-dt-solid{flex:1;min-height:64px;background:#252820;color:#f0eee5;display:flex;align-items:center;justify-content:space-between;padding:0 14px;font:500 var(--t-label)/1 var(--mono,monospace);letter-spacing:.05em;transition:background .2s}
.ar-dt-solid:hover{background:#4b4a3b}
.ar-dt-solid span{font:400 var(--t-label)/1 var(--sans,sans-serif);color:#bcbfb1;letter-spacing:0}
.ar-dt-export{min-height:64px;width:126px;display:flex;align-items:center;justify-content:space-between;font:500 var(--t-label)/1 var(--mono,monospace);letter-spacing:.05em;color:#232620}
.ar-dt-export span{font-size:var(--t-h5);line-height:1}
.ar-dt-foot{display:flex;justify-content:space-between;margin-top:16px;font:500 var(--t-micro)/1 var(--mono,monospace);letter-spacing:.03em;color:#9a9487}
.ar-dt-foot a{color:#9a9487;text-decoration:none}
@media (max-width:860px){
  .ar-detail{right:0;left:0;top:auto;bottom:0;width:auto;max-height:56%;transform:translateY(16px);padding:20px 18px 16px}
  .ar-detail.on{transform:translateY(0)}
  .ar-detail h2{font-size:var(--t-h4)}
}

/* ============ 18. 机房：返回按钮 + 浮空选中列表 ============ */
.ar-back{
  position:absolute;left:2%;top:2.6%;z-index:8;display:flex;align-items:center;gap:10px;
  padding:9px 14px 9px 11px;border:1px solid rgba(24,26,22,.22);
  background:rgba(247,247,242,.86);color:#1c1f1a;
  font:500 var(--t-label)/1 var(--mono,monospace);letter-spacing:.06em;
  opacity:0;transform:translateX(-14px);pointer-events:none;
  transition:opacity .32s cubic-bezier(.22,1,.36,1),transform .32s cubic-bezier(.22,1,.36,1),background .2s,border-color .2s;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.ar-back.on{opacity:1;transform:translateX(0);pointer-events:auto}
.ar-back:before{
  content:"";position:absolute;inset:-1px;border:1px solid rgba(24,26,22,.30);
  animation:arBackPulse 2.6s cubic-bezier(.22,1,.36,1) infinite;pointer-events:none;
}
@keyframes arBackPulse{0%{opacity:.55;transform:scale(1)}55%{opacity:0;transform:scale(1.06)}100%{opacity:0;transform:scale(1.06)}}
.ar-back:hover{background:#1c1f1a;color:#f4f3ec;border-color:#1c1f1a}
.ar-back-ico{display:flex;align-items:center;transition:transform .26s cubic-bezier(.22,1,.36,1)}
.ar-back:hover .ar-back-ico{transform:translateX(-3px)}
.ar-back-tx{display:flex;align-items:center;gap:7px}
.ar-back-tx b{font-weight:700;letter-spacing:.08em}
.ar-back-k{font-size:var(--t-tiny);letter-spacing:.05em;color:#8a8579;border:1px solid rgba(24,26,22,.18);padding:3px 5px}
.ar-back:hover .ar-back-k{color:#c9c6b8;border-color:rgba(244,243,236,.28)}

.ar-room-panel{padding:0;overflow:hidden}
.ar-room-phead{display:flex;align-items:baseline;justify-content:space-between;padding:9px 12px 7px;border-bottom:1px solid rgba(24,26,22,.12)}
.ar-room-phead h4{margin:0;font:600 var(--t-label)/1 var(--mono,monospace);letter-spacing:.1em;color:var(--ar-ink,#1c1f1a)}
.ar-room-pcount{font:500 var(--t-tiny)/1 var(--mono,monospace);letter-spacing:.05em;color:var(--ar-ink2,#8a8579)}
.ar-room-list{position:relative;padding:6px;gap:0}
.ar-row-hl{
  position:absolute;left:6px;right:6px;top:0;height:44px;border-radius:2px;
  background:linear-gradient(90deg,rgba(24,26,22,.085),rgba(24,26,22,.035));
  border-left:2px solid #1c1f1a;opacity:0;
  transition:transform .28s cubic-bezier(.22,1,.36,1),height .28s cubic-bezier(.22,1,.36,1),opacity .18s;
  pointer-events:none;will-change:transform;
}
.ar-room-row{
  position:relative;z-index:1;display:flex;align-items:center;gap:9px;width:100%;
  padding:9px 8px;background:none;border:0;text-align:left;color:var(--ar-ink,#1c1f1a);
  opacity:0;transform:translateY(6px);
  animation:arRowIn .46s cubic-bezier(.22,1,.36,1) var(--d,0ms) forwards;
  transition:transform .26s cubic-bezier(.22,1,.36,1);
}
@keyframes arRowIn{to{opacity:1;transform:translateY(0)}}
.ar-room-row:hover,.ar-room-row:focus-visible{transform:translateX(3px)}
.ar-row-no{font:500 var(--t-tiny)/1 var(--mono,monospace);letter-spacing:.04em;color:#8a8579;width:18px;flex:0 0 auto;font-style:normal}
.ar-row-tx{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.ar-row-tx b{font:500 var(--t-meta)/1.35 var(--sans,sans-serif);letter-spacing:.005em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ar-row-tx i{font:500 var(--t-tiny)/1 var(--mono,monospace);letter-spacing:.05em;color:#8a8579;font-style:normal;text-transform:uppercase}
.ar-row-go{font-size:var(--t-meta);color:#8a8579;opacity:0;transform:translate(-3px,3px);transition:opacity .22s,transform .22s}
.ar-room-row:hover .ar-row-go,.ar-room-row.cur .ar-row-go{opacity:1;transform:translate(0,0)}
.ar-room-row.cur .ar-row-tx b{font-weight:700}
@media (max-width:860px){
  .ar-back{top:2%;left:3%;padding:7px 11px}
  .ar-back-k{display:none}
}

/* 进入机柜后，其它分类的浮标淡出，避免压在档案夹上（只淡出，不位移，保持引线对位） */
.ar-room[data-state]:not([data-state="AISLE"]) .ar-room-brow{opacity:0}
.ar-room .ar-room-brow{transition:opacity .3s}
.ar-room[data-state]:not([data-state="AISLE"]) .ar-room-brow.cur{opacity:1}

/* ================= 小游戏:模式切换(2D 仿 3D 垂直翻转) ================= */
.game-modes{display:flex;align-items:center;gap:18px;margin-top:18px;flex-wrap:wrap}
.gm-flip{
  position:relative;width:252px;height:132px;perspective:900px;
  font-family:var(--font-mono);
}
.gm-face{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:4px;
  padding:16px 20px;border:1px solid var(--line);
  background:var(--surface);backface-visibility:hidden;-webkit-backface-visibility:hidden;
  transform-style:preserve-3d;
}
.gm-front{transform:rotateX(0deg)}
.gm-back{transform:rotateX(180deg)}
.gm-flip .gm-inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .62s cubic-bezier(.2,.82,.2,1)}
.gm-flip.flipping .gm-face{transition:transform .62s cubic-bezier(.2,.82,.2,1)}
.gm-flip.flipping .gm-front{transform:rotateX(-180deg)}
.gm-flip.flipping .gm-back{transform:rotateX(0deg)}
.gm-idx{font-size:var(--t-tiny);letter-spacing:.14em;color:var(--accent)}
.gm-name{font-family:var(--font-sans);font-size:var(--t-h5);letter-spacing:.03em;color:var(--text);line-height:1.1}
.gm-desc{font-size:var(--t-tiny);letter-spacing:.06em;color:var(--muted)}
.gm-list{display:flex;gap:8px;flex-wrap:wrap}
.gm-btn{
  font-family:var(--font-mono);font-size:var(--t-label);letter-spacing:.07em;text-transform:uppercase;
  padding:14px 20px;border:1px solid var(--line);color:var(--muted);
  transition:color .3s,border-color .3s,background .3s,transform .3s;
}
.gm-btn b{font-weight:400;color:inherit;opacity:.55;margin-right:6px}
.gm-btn:hover{color:var(--text);border-color:var(--line-strong);transform:translateY(-1px)}
.gm-btn.is-on{color:var(--bg);background:var(--text);border-color:var(--text)}
.gm-btn.is-on b{opacity:.6}
@media (prefers-reduced-motion: reduce){
  .gm-flip.flipping .gm-face{transition-duration:.01ms}
}

/* 保险:确保打开态可交互(ID 选择器优先级高于 .gallery-view) */
#galleryView.open{opacity:1;pointer-events:auto;visibility:visible}
#galleryView{visibility:visible}

/* ---------- 18. 作品索引（列表式预览，10px 缝，填充式铺满） ---------- */
.gallery-grid{
  position:fixed;inset:0;width:100vw;max-width:100vw;z-index:72;
  background:var(--bg);opacity:0;pointer-events:none;visibility:hidden;
  overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
  transition:opacity .34s ease;
}
.gallery-grid.open{opacity:1;pointer-events:auto;visibility:visible}
#galleryGrid.open{opacity:1;pointer-events:auto;visibility:visible}
.gg-header{
  position:sticky;top:0;z-index:2;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:20px 18px 16px;
  font-family:var(--font-mono);font-size:var(--t-label);letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);background:var(--bg);
}
.gg-header button{
  display:flex;align-items:center;gap:10px;color:var(--text);
  font-family:var(--font-mono);font-size:var(--t-label);letter-spacing:.09em;text-transform:uppercase;
}
.gg-header button:hover{color:var(--accent)}
.gg-roll{
  display:flex;align-items:flex-start;gap:20px;padding:0 0 20px;
}
.gg-col{display:flex;flex-direction:column;gap:20px;flex:0 0 auto;min-width:0}
.gg-item{
  display:block;flex:0 0 auto;margin:0;padding:0;border:0;cursor:zoom-in;overflow:hidden;
  background-color:color-mix(in srgb,var(--text) 8%,var(--bg));
  background-size:cover;background-position:center;background-repeat:no-repeat;
  filter:saturate(.96);
  transition:filter .4s ease,transform .4s cubic-bezier(.22,.82,.24,1);
}
.gg-item:hover,.gg-item:focus-visible{filter:saturate(1.06);transform:scale(1.012)}
.gg-item:focus-visible{outline:1px solid var(--accent);outline-offset:2px}

@media (max-width:860px){ .gg-header{padding:16px 14px 12px} }

@media (prefers-reduced-motion:reduce){
  .gg-item{transition:none}
  .gg-item:hover,.gg-item:focus-visible{transform:none}
}

/* ============================================================
   19. 字号 ×2 之后的排版收口
   ------------------------------------------------------------
   · CJK 大字距统一收窄、长英文串允许断行,避免放大后溢出;
   · 开屏 DOM 文案(loader.js 注入 10px)在这里提优先级覆盖,
     画布内 ELEV / SCAN / LAT-LON 的 ctx 绘制逻辑不动;
   · 1440 以下双列网格容不下放大后的字宽 → 结构改为堆叠。
   ============================================================ */
body{line-height:1.62;overflow-wrap:break-word;text-wrap:pretty}
.hero-meta,.section-heading,.footer-top,.gallery-header,.gg-header,.tape-rail-head,.tape-rail-foot{letter-spacing:.075em}

body #loader .ld-title{font-size:var(--t-label);letter-spacing:.16em}
body #loader .ld-title b{font-size:clamp(36px,4.4vw,52px);letter-spacing:-.01em;margin-top:12px}
body #loader .ld-hint{font-size:var(--t-tiny);letter-spacing:.11em;max-width:min(92vw,720px)}

@media(max-width:1180px){
  .about-grid,.work-feature,.music-head{grid-template-columns:1fr;gap:clamp(28px,4vw,48px)}
  .work-feature-info{order:-1}
  .music-intro{text-align:left}
  .archive-head{flex-direction:column;align-items:flex-start;gap:14px}
  .archive-head p{text-align:left}
  .hero-aside{max-width:none;text-align:left;margin-left:0}
  .player-note{max-width:min(310px,40vw)}
  .tape-rail{width:min(330px,44vw);top:18%}
  .ar-detail{width:min(480px,52%)}
  .opened-folder{width:min(520px,92vw)}
  .archive-categories{font-size:var(--t-micro);gap:4px 14px}
}

@media(max-width:820px){
  .topbar{height:0}
  .section-heading{flex-wrap:wrap;gap:8px 20px}
  .heading-note{max-width:100%;text-align:right}
  .hero-bottom p{max-width:none}
  .gallery-header,.gg-header{flex-wrap:wrap;gap:8px 18px}
  .archive-workspace{height:clamp(470px,62vh,600px)}
  .archive-workspace .archive-label{display:none}
  body #loader .ld-hint{white-space:normal;text-align:center;letter-spacing:.08em;line-height:1.6}
  .ar-detail{max-height:70%}
}

@media(max-width:640px){
  .topbar{padding:0 18px}
  .wordmark{font-size:var(--t-h5)}
  .player-note{max-width:47vw;font-size:var(--t-tiny)}
  .tape-rail{width:min(300px,80vw);top:17%;left:0}
  .scan-cta{white-space:normal}
  .opened-folder{padding:34px 22px}
  .footer-top{font-size:var(--t-small)}
  .section-heading{font-size:var(--t-tiny)}
  .pixel-game{gap:16px;padding:16px;flex-wrap:wrap}
  .game-screen{width:100%;height:96px}
  .game-player{left:20px;bottom:8px;font-size:var(--t-body-lg)}
  .game-score{top:6px;right:8px;font-size:var(--t-micro)}
  .player-stage{height:clamp(520px,74vh,680px)}
  .tape-rail{top:15%;bottom:26%;width:min(300px,78vw)}
  .scan-cta{max-width:92%}
  .gm-flip{width:100%;max-width:280px}
  .section-heading{flex-direction:column;align-items:flex-start;gap:2px}
  .heading-note{text-align:left;max-width:100%}
  .about-intro h2,.music-head h2,.archive-head h2{font-size:clamp(34px,10.6vw,48px);line-height:1.24;letter-spacing:.01em}
  .work-feature-info h3{font-size:clamp(34px,10.6vw,48px);line-height:1.26}
  .hero-bottom p{font-size:var(--t-body)}
  .about-facts{font-size:var(--t-micro)}
  .archive-head p{font-size:var(--t-small);max-width:100%}
}

/* ============================================================
   14. 按页弹性翻页 (js/pager.js)
   ------------------------------------------------------------
   每页正好一个视口高；内容由 .pg-fit 包裹，超出可用高度时
   等比缩放到 96%（--pg-s / --pg-ty 由 JS 精确写入）。
   翻页由 JS 控制 window.scrollTo；原生 scroll-snap 仅作无 JS 兜底。
   ============================================================ */
:root{ --page-h:100dvh; }

html{
  scroll-behavior:auto;             /* 覆盖第 2 节的原生平滑滚动 */
  scrollbar-width:none;
  -ms-overflow-style:none;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar{ width:0; height:0; display:none; }
body{ overflow-x:hidden; }

main > .page{
  position:relative;
  height:100vh;
  height:var(--page-h);
  min-height:0;
  max-height:var(--page-h);
  overflow:hidden;
}
main > .page > .pg-fit{
  display:flex;
  flex-direction:column;
  justify-content:center;
  width:100%;
  min-height:100%;
  transform-origin:top center;
  transform:translateY(calc(var(--pg-ty,0px) + var(--pg-b,0px))) scale(var(--pg-s,1));
}
main > .page.hero{ display:block; }
main > .page.hero > .pg-fit{ justify-content:space-between; }
main > .page.footer > .pg-fit{ justify-content:space-between; }

/* 无 JS 兜底 */
@supports (scroll-snap-type:y mandatory){
  html:not(.pg-ready){ scroll-snap-type:y mandatory; }
  main > .page{ scroll-snap-align:start; scroll-snap-stop:always; }
}

/* ---------- 页内留白收紧，让每页刚好落进一屏 ---------- */
main > .page.section-pad{
  padding:0 0 clamp(48px,6.6vh,74px);
}
main > .page .section-heading{ margin-bottom:clamp(6px,1vh,12px); }
main > .page .about-grid{ padding-top:clamp(26px,4.2vh,56px); }
main > .page .work-feature{ padding-top:clamp(22px,4.2vh,56px); }
main > .page .work-photo{ height:clamp(220px,min(46vw,52vh),580px); }
main > .page .music-head{ padding-top:clamp(18px,3vh,40px); }
main > .page .player-stage{
  height:clamp(240px,44vh,560px);
  margin-top:clamp(16px,3vh,40px);
}
main > .page .archive-workspace{
  height:clamp(240px,38vh,540px);
  margin-top:clamp(10px,1.6vh,20px);
}
main > .page .archive-head{ padding-top:clamp(14px,2.4vh,32px); }
main > .page.footer{
  padding:clamp(76px,10vh,112px) clamp(20px,6vw,110px);
}
main > .page.footer .footer-top{ flex-wrap:wrap; gap:10px 24px; }
main > .page.footer .footer-bottom{ flex-wrap:wrap; gap:6px 24px; }

/* ---------- 右侧页码 / INDEX 导航 ---------- */
.page-nav{
  position:fixed;
  right:clamp(10px,1.5vw,24px);
  top:50%;
  transform:translateY(-50%);
  z-index:46;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  color:var(--text);
  mix-blend-mode:multiply;
}
.page-nav .pg-nav-label{
  writing-mode:vertical-rl;
  font:500 9px/1 var(--font-mono);
  letter-spacing:.22em;
  color:var(--muted);
  opacity:.7;
  padding-bottom:2px;
}
.pg-nav-list{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:1px;
}
.pg-nav-btn{
  position:relative;
  display:block;
  padding:3px 2px;
  font:500 12px/1.1 var(--font-mono);
  letter-spacing:.08em;
  color:var(--muted);
  opacity:.6;
  transition:color .25s ease,opacity .25s ease;
}
.pg-nav-btn:hover{ opacity:1; }
.pg-nav-btn.active{ color:var(--accent); opacity:1; }
.pg-nav-btn.active::before{
  content:"";
  position:absolute;
  right:100%;
  top:50%;
  width:14px;
  height:1px;
  margin-right:7px;
  background:var(--accent);
}
.pg-nav-btn:focus-visible{ outline:1px solid var(--accent); outline-offset:2px; }

/* 深色页脚页：页码反白 */
html[data-page="5"] .page-nav{ mix-blend-mode:normal; }
html[data-page="5"] .pg-nav-btn{ color:rgba(227,228,213,.6); }
html[data-page="5"] .pg-nav-btn.active{ color:#e8a087; }
html[data-page="5"] .pg-nav-btn.active::before{ background:#e8a087; }
html[data-page="5"] .page-nav .pg-nav-label{ color:rgba(227,228,213,.48); }

/* 窄屏：页码移到底部居中，避免压到正文 */
@media (max-width:640px){
  .page-nav{
    top:auto;
    bottom:calc(env(safe-area-inset-bottom, 0px) + 7px);
    right:auto;
    left:50%;
    transform:translateX(-50%);
    flex-direction:row;
    align-items:center;
    gap:7px;
  }
  .page-nav .pg-nav-label{
    writing-mode:horizontal-tb;
    font-size:8px;
    letter-spacing:.16em;
    padding:0 2px 0 0;
  }
  .pg-nav-list{ flex-direction:row; align-items:center; gap:2px; }
  .pg-nav-btn{ font-size:9px; padding:5px 3px; }
  .pg-nav-btn.active::before{ display:none; }
  .pg-nav-btn.active::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:1px;
    width:9px;
    height:1px;
    transform:translateX(-50%);
    background:var(--accent);
  }
  html[data-page="5"] .pg-nav-btn.active::after{ background:#e8a087; }
}

/* ---------- 14b. 关于页：右侧栏容纳像素场景 + 可玩入口，避免整页过度缩放 ---------- */
main > .page .about-side{ gap:clamp(12px,1.8vh,24px); }
main > .page .about-side .pixel-scene{ height:clamp(180px,min(26vw,29vh),320px); }
main > .page .about-side .pixel-game{
  margin-top:0;
  padding:clamp(10px,1.5vh,18px) clamp(12px,1.3vw,20px);
  gap:clamp(12px,1.4vw,20px);
}
main > .page .about-side .game-screen{ width:clamp(130px,13.5vw,196px); height:clamp(52px,7.6vh,78px); }
main > .page .about-side .game-score{ font-size:var(--t-micro); }
main > .page .about-side .game-label{ font-size:var(--t-tiny); line-height:1.4; }
main > .page .about-side .game-modes{ margin-top:0; gap:clamp(8px,1vw,16px); flex-wrap:nowrap; align-items:stretch; }
main > .page .about-side .gm-flip{ width:clamp(168px,15vw,214px); height:clamp(96px,12.6vh,124px); flex:0 0 auto; }
main > .page .about-side .gm-face{ padding:clamp(10px,1.4vh,16px) clamp(12px,1.2vw,18px); gap:2px; }
main > .page .about-side .gm-list{ flex-direction:column; justify-content:center; gap:clamp(3px,.6vh,7px); flex:1 1 auto; min-width:0; }
main > .page .about-side .gm-btn{ padding:clamp(4px,.9vh,9px) clamp(8px,.9vw,13px); font-size:var(--t-tiny); text-align:left; flex:0 0 auto; }

@media(max-width:820px){
  main > .page .about-side .pixel-scene{ height:clamp(170px,34vw,260px); }
  main > .page .about-side .game-modes{ flex-wrap:wrap; }
  main > .page .about-side .gm-flip{ width:min(240px,100%); }
}

/* 档案室：3D 房间高度已由 §18 两列版式接管（画布 = 视口高 − 顶栏 − 下边距） */

/* ---------- 14c. 手机端关于页紧凑排版（避免整页被缩到 0.43） ---------- */
@media(max-width:640px){
  main > .page .about-grid{ padding-top:8px; gap:12px; }
  main > .page .about-intro h2{ font-size:clamp(30px,8.8vw,38px); line-height:1.14; margin:8px 0 10px; }
  main > .page .about-intro .body-copy{ font-size:var(--t-small); line-height:1.55; margin-bottom:10px; }
  main > .page .about-side{ gap:8px; }
  main > .page .about-side .pixel-scene{ height:clamp(120px,30vw,168px); }
  main > .page .about-side .about-facts{ font-size:var(--t-micro); gap:4px 10px; }
  main > .page .about-side .pixel-game{ padding:8px 10px; gap:10px; flex-wrap:nowrap; }
  main > .page .about-side .game-screen{ width:min(46%,158px); height:72px; }
  main > .page .about-side .game-score{ font-size:var(--t-micro); }
  main > .page .about-side .game-label{ font-size:var(--t-micro); line-height:1.35; }
  main > .page .about-side .game-modes{ flex-wrap:nowrap; gap:6px; }
  main > .page .about-side .gm-flip{ width:44%; height:96px; }
  main > .page .about-side .gm-face{ padding:8px 10px; }
  main > .page .about-side .gm-name{ font-size:var(--t-small); }
  main > .page .about-side .gm-desc{ font-size:var(--t-micro); }
  main > .page .about-side .gm-btn{ font-size:var(--t-micro); padding:4px 6px; }
}

/* 档案室：给 3D 房间多一点高度并收小柜眉标签，减少投影标签互相压盖 */
main > .page .archive-workspace{ height:clamp(260px,42vh,560px); }
main > .page .ar-room-brow{ font-size:16px; padding:4px 8px; }

/* 手机端：真实机器扫描入口铺满底部，避免窄条换行盖住磁带机 */
@media(max-width:640px){
  main > .page .scan-cta{
    left:10px; right:10px; bottom:8px; transform:none; max-width:none;
    padding:10px 12px; gap:2px 10px;
  }
  main > .page .scan-cta:hover{ transform:none; }
  main > .page .scan-cta-t{ font-size:var(--t-small); }
  main > .page .scan-cta-a{ font-size:var(--t-small); }
}

/* ============================================================
   17. 2026-10-25 版式修正 (03 MUSIC / 04 ARCHIVE)
   ------------------------------------------------------------
   · 顶栏品牌字标 L.N 已从 index.html 移除（loader 内 LIN 保留）
   · 段落大标题降为「页眉级」30–44px，贴页面左上，不再压中上
   · music 舞台 / archive 档案库吃满页头以下的全部高度
   · .pg-fit 固定为视口内容高，flex 分配空间 → 不再被等比压到 0.8x
   ============================================================ */
main > #archive.page{
  padding:clamp(86px,9.8vh,104px) 0 clamp(14px,2.2vh,24px);
}
/* 音乐页：文字上提到页头、舞台改成「整页居中」的绝对层 —— 上下留白对称，
   .pg-fit 的中线正好落在视口中线，3D 机身才会在屏幕正中（见下方 .player-stage） */
main > #music.page{
  padding:clamp(46px,5.2vh,58px) 0 clamp(46px,5.2vh,58px);
}
main > #music > .pg-fit,
main > #archive > .pg-fit{
  justify-content:flex-start;
  height:100%;
}
main > #music .wrap,
main > #archive .wrap{
  height:100%;
  min-height:0;
  display:flex;
  flex-direction:column;
}
main > #music .section-heading,
main > #archive .section-heading{
  flex:0 0 auto;
  padding-top:12px;
  margin-bottom:4px;
}
.music-head,
.archive-head{
  flex:0 0 auto;
  padding-top:clamp(10px,1.4vh,16px);
}
.music-head{
  grid-template-columns:minmax(0,1fr) minmax(200px,300px);
  gap:12px 32px;
  align-items:start;
}
.music-head h2,
.archive-head h2{
  font-size:clamp(30px,3.4vw,44px);
  line-height:1.2;
  letter-spacing:-.005em;
  margin-top:8px;
}
.music-head .eyebrow{
  font-size:var(--t-tiny);
  letter-spacing:.14em;
}
.music-intro{
  align-self:end;
  font-size:var(--t-small);
  line-height:1.58;
}
.archive-head{
  align-items:flex-start;
  gap:14px 40px;
}
.archive-head p{
  max-width:420px;
  padding-top:2px;
  font-size:var(--t-small);
  line-height:1.6;
}

/* 音乐舞台：脱离页头流，整块垂直居中于页面 —— 机身永远落在屏幕正中，
   页头文字（03/MUSIC、标题、FIG.01）仍在最上面，不再把舞台往下顶 */
main > #music .player-stage{
  position:absolute;
  left:0;
  right:0;
  top:calc(50% - 4vh);
  transform:translateY(-50%);
  height:min(64vh,600px);
  min-height:0;
  margin-top:0;
  flex:0 0 auto;
}
main > #music .player-note{
  font-size:var(--t-micro);
  line-height:1.58;
}
main > #music .scan-cta{
  right:2%;
  bottom:1.2%;
  padding:10px 14px 11px;
}

/* 窄屏/堆叠：舞台回到文档流（跟在标题下面），否则整页居中的机身会压住标题 */
@media(max-width:820px){
  main > #music .player-stage{
    position:relative;left:auto;right:auto;top:auto;transform:none;
    height:clamp(430px,56vh,640px);min-height:240px;
    margin-top:18px;padding-bottom:64px;
  }
}

/* 档案库：两列版式在 §18 统一接管（左栏文字 / 右栏满高画布） */
main > #archive .archive-label{font-size:var(--t-micro)}
main > #archive .archive-categories{font-size:var(--t-micro)}

@media(max-width:1180px){
  .music-head{grid-template-columns:1fr;gap:10px 0}
  .music-intro{align-self:start;text-align:left}
}
@media(max-width:860px){
  /* 窄屏：分类索引已进左栏，不需要再给画布上的图例垫纸色 */
  main > #archive .archive-categories{color:var(--text)}
}
@media(max-width:820px){
  /* 3D 画布让出底部 64px 给 REAL OBJECT，不再压在机身上 */
  main > #music #deck3d{bottom:64px}
  main > #music .scan-cta{
    left:auto;right:12px;bottom:6px;
    transform:none;
    max-width:calc(100% - 24px);
    padding:8px 10px 9px;
  }
}
@media(max-width:640px){
  main > #music .section-heading,
  main > #archive .section-heading{font-size:var(--t-tiny);padding-top:10px}
  main > #music .music-head h2,
  main > #archive .archive-head h2{font-size:clamp(26px,7.2vw,32px);line-height:1.22}
  main > #music .music-intro{font-size:var(--t-micro);line-height:1.5}
  main > #archive .archive-head p{font-size:var(--t-tiny);line-height:1.5;max-width:100%}
  main > #music .player-stage{min-height:240px}
  /* REAL OBJECT 收成右下角的小卡，不再横铺压住机身 */
  main > #music .scan-cta{
    left:auto;right:12px;bottom:10px;
    max-width:min(300px,calc(100% - 24px));
    padding:8px 10px 9px;
  }
  main > #music .scan-cta-t{font-size:var(--t-tiny)}
}

/* ============================================================
   04 ARCHIVE · 柜眉标签「近 / 远」分流（2026-10-25）
   ------------------------------------------------------------
   近组：仍在柜顶上方，竖线 .brow-lead（archive-room.js 直接定位）
   远组：排到画布右侧内边距处成一列，折线 svg.brow-leads > polyline
         两段：标签左中 → 水平折点（left-18px）→ 柜顶锚点
   ============================================================ */
.brow-leads{
  position:absolute;left:0;top:0;width:100%;height:100%;
  z-index:1;pointer-events:none;overflow:visible;
  color:var(--ar-ink,#1b1e1d);
}
.brow-leads polyline{
  fill:none;stroke:currentColor;stroke-opacity:.35;stroke-width:1;
  stroke-linecap:round;stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
  transition:opacity .25s;
}
/* ≤860px：柜眉整体隐藏的既有规则，折线层一起收掉 */
@media (max-width:860px){
  .brow-leads{display:none}
}

/* ============================================================
   18. 04 ARCHIVE · 两列版式（2026-10-25）
   ------------------------------------------------------------
   · 左栏 clamp(300px,26vw,400px)：04 / ARCHIVE + 标题 + 两行说明
     + 底部 01–07 分类（竖排，贴画布底边）
   · 右栏画布吃满可用高度：
       height = 视口高(--page-h) − var(--ar-top) − var(--ar-bot)
       --ar-top 已含顶栏 112px + 呼吸，1440×900 → 900-120.6-14.4 = 765px
   · 底部纸色渐隐遮罩（.archive-workspace::after）与 ar-room 提示行
     （.ar-room-hint，DOM 由 archive-room.js 生成）已删除
   · ≤860px：左栏移到画布上方（竖排），画布 58vh，柜眉继续隐藏
   ============================================================ */
main > #archive.page{
  --ar-top:0px;                         /* 顶栏已改成零高浮层：画布直接顶到上边缘 */
  --ar-bot:clamp(12px,1.6vh,18px);      /* 画布底边距 */
  padding:var(--ar-top) 0 var(--ar-bot);
}
main > #archive > .pg-fit{ height:100%; }
main > #archive .wrap{
  height:100%;min-height:0;
  display:flex;flex-direction:column;
  padding:0;                            /* 左右留白交给两列自己，画布贴右边缘 */
}
main > #archive .archive-layout{
  flex:1 1 auto;min-height:0;min-width:0;
  display:flex;align-items:stretch;
  width:100%;
}
main > #archive .archive-rail{
  flex:0 0 auto;min-width:0;
  width:clamp(300px,26vw,400px);
  display:flex;flex-direction:column;align-items:flex-start;
  padding:0 clamp(12px,1.6vw,26px) 0 clamp(20px,6vw,110px);
}
main > #archive .section-heading{
  flex:0 0 auto;width:100%;
  display:flex;flex-direction:column;align-items:flex-start;gap:3px;
  margin:0;padding-top:10px;
  border-top:1px solid var(--line);
  font-size:var(--t-micro);letter-spacing:.1em;
}
main > #archive .heading-note{
  font-size:clamp(11px,1.05vw,13px);letter-spacing:.08em;white-space:nowrap;  /* 左栏 222~265px，收回一行 */
}
main > #archive .archive-head{ flex:0 0 auto;display:block;padding:0; }
main > #archive .archive-head h2{
  margin:clamp(12px,2vh,22px) 0 0;
  font-size:clamp(28px,2.4vw,38px);line-height:1.2;letter-spacing:-.01em;
}
main > #archive .archive-head p{
  margin:clamp(10px,1.6vh,16px) 0 0;max-width:none;
  text-align:left;                       /* 覆盖 .archive-head p 的右对齐 */
  font-size:var(--t-micro);line-height:1.75;letter-spacing:0;
  color:color-mix(in srgb,var(--text) 74%,var(--bg));
}
main > #archive .archive-categories{
  position:static;z-index:auto;
  display:flex;flex-direction:column;align-items:flex-start;
  gap:clamp(3px,.6vh,7px);
  margin:0 0 1px;margin-top:auto;padding:0;
  font-family:var(--font-mono);font-size:var(--t-micro);
  letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;
  color:color-mix(in srgb,var(--text) 62%,var(--bg));
}
main > #archive .archive-categories span{ display:block;white-space:nowrap; }
main > #archive .archive-workspace{
  position:relative;flex:1 1 auto;min-width:0;
  height:calc(var(--page-h,100dvh) - var(--ar-top) - var(--ar-bot));
  max-height:100%;margin:0;
}

/* 堆叠态：≤860px，或窗口够宽但接近方形（右栏画布会窄于 1.2 宽高比，
   7 个柜眉塞不进去 → 让文字回到画布上方，与手机同一套版式） */
@media (max-width:860px), (min-width:861px) and (max-aspect-ratio:3/2){
  main > #archive.page{
    --ar-top:clamp(96px,11.6vh,108px);
    --ar-bot:clamp(10px,1.4vh,14px);
  }
  main > #archive .archive-layout{ flex-direction:column;gap:10px; }
  main > #archive .archive-rail{
    order:1;width:100%;height:auto;
    padding:0 clamp(18px,5vw,40px);
  }
  main > #archive .archive-head h2{ margin-top:8px;font-size:clamp(26px,7vw,32px); }
  main > #archive .archive-head p{ margin-top:6px;max-width:100%;font-size:var(--t-micro);line-height:1.5; }
  main > #archive .archive-categories{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
    gap:3px clamp(10px,3vw,20px);width:100%;
    font-size:15px;letter-spacing:.08em;   /* 16px/.12em 会撑出 184px > 列宽 168px */
    margin-top:10px;padding-top:10px;border-top:1px solid var(--line);
  }
  main > #archive .archive-workspace{
    order:2;width:100%;height:58vh;min-height:180px;max-height:none;
    flex:0 1 auto;                         /* 放不下时允许让位，绝不撑出视口 */
  }
}

/* ==========================================================================
   §19 MOTION  —  obys / FORMAT 手法移植（2026-10-25）
   --------------------------------------------------------------------------
   「只加动画」层：
   · 19.1 split-flap 文本翻牌（js/motion.js 拆字，结束后 DOM 还原成原文）
   · 19.2 工业风几何装饰（仅线条/细矩形/十字，页边安全带，pointer-events:none）
   · 19.3 内容块机械插入（translateY + 长缓动，结束后类被移除 → 回到原样式）
   所有规则都挂在 html.mx-on 下：JS 未启用（含 prefers-reduced-motion）
   时零影响，页面保持原设计的静止态。
   ========================================================================== */

/* ---------- 19.1 split-flap ---------- */
.mx-flap{ display:inline; }
.mx-ch{
  display:inline-block;
  position:relative;
  vertical-align:baseline;
  line-height:inherit;
  letter-spacing:inherit;
  font:inherit;
  color:inherit;
  white-space:pre;
}
/* 翻牌期间：DOM 里的真字符原样保留（可复制 / 可被读屏），
   只把它涂成透明，用 ::before 在同一个格子里画乱码 —— 纯视觉替换。 */
.mx-flapping .mx-ch[data-j]{ color:transparent; overflow:hidden; }   /* 乱码不许溢出本格 → 不压邻字 */
.mx-flapping .mx-ch[data-j]::before{ max-width:100%; }
.mx-flapping .mx-ch[data-j]::before{
  content:attr(data-j);
  position:absolute;
  left:0; right:0; top:0; bottom:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--mx-jc, inherit);
  font:inherit;
  letter-spacing:0;
  opacity:.92;
  pointer-events:none;
}

/* ---------- 19.2 工业风几何装饰 ---------- */
.mx-geo{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
  color:var(--text);
  contain:layout style;
  opacity:0;                      /* 未播放前完全不可见，避免首帧闪现 */
}
.mx-geo.is-in{ opacity:1; }
/* 运行时安全区判定：与内容相交且无处可移 → 该标记不出现（绝不压字/压图） */
.mx-geo .mx-hidden{ display:none !important; }
.mx-geo .mx-g{
  position:absolute;
  display:block;
  opacity:0;
  pointer-events:none;
  transform-origin:50% 0;
  will-change:transform,opacity,clip-path;
}
.mx-geo.is-in .mx-g{ will-change:auto; }

/* 左：竖向刻度尺（主轴 + 12px 一格的刻度） */
.mx-geo .mx-g--ruler{
  left:7px; top:50%; width:1px; height:184px; margin-top:-92px;
  background:linear-gradient(180deg,transparent,currentColor 9%,currentColor 91%,transparent);
  transform-origin:50% 0;
}
.mx-geo .mx-g--ticks{
  left:7px; top:50%; width:9px; height:184px; margin-top:-92px;
  background:repeating-linear-gradient(180deg,currentColor 0 1px,transparent 1px 12px);
  transform-origin:50% 0;
}
/* 右：短横线组 */
.mx-geo .mx-g--dash{
  right:8px; top:50%; width:11px; height:96px; margin-top:-48px;
  background:repeating-linear-gradient(180deg,currentColor 0 1px,transparent 1px 8px);
  transform-origin:50% 100%;
}
/* 角标：十字标记（细线交叉） */
.mx-geo .mx-g--cross{ width:11px; height:11px; transform-origin:50% 50%; }
.mx-geo .mx-g--cross::before,
.mx-geo .mx-g--cross::after{
  content:""; position:absolute; background:currentColor;
}
.mx-geo .mx-g--cross::before{ left:50%; top:0; width:1px; height:100%; margin-left:-.5px; }
.mx-geo .mx-g--cross::after{ top:50%; left:0; height:1px; width:100%; margin-top:-.5px; }
.mx-geo .mx-g--tl{ left:6px; top:122px; }
.mx-geo .mx-g--br{ right:8px; bottom:12px; }

/* 插入：scaleY / clip-path 从 0 长出来 + 两次 ±1px 机械抖动，1.2s 内沉淀到 .18 */
.mx-geo.is-in .mx-g--ruler{ animation:mx-ins-v .92s cubic-bezier(.22,1,.36,1) .05s both; }
.mx-geo.is-in .mx-g--ticks{ animation:mx-ins-v .92s cubic-bezier(.22,1,.36,1) .13s both; }
.mx-geo.is-in .mx-g--dash{ animation:mx-ins-v .88s cubic-bezier(.22,1,.36,1) .19s both; }
.mx-geo.is-in .mx-g--tl{ animation:mx-ins-c .86s cubic-bezier(.22,1,.36,1) .27s both; }
.mx-geo.is-in .mx-g--br{ animation:mx-ins-c .86s cubic-bezier(.22,1,.36,1) .33s both; }

@keyframes mx-ins-v{
  0%   { opacity:.85; transform:scaleY(.015); clip-path:inset(0 0 100% 0); }
  36%  { opacity:.80; transform:scaleY(1.02); clip-path:inset(0 0 0 0); }
  48%  { transform:translate3d(0,1px,0) scaleY(1); }
  62%  { transform:translate3d(0,-1px,0) scaleY(1); }
  76%  { opacity:.42; transform:none; }
  100% { opacity:.18; transform:none; clip-path:inset(0 0 0 0); }
}
@keyframes mx-ins-c{
  0%   { opacity:0; transform:scale(.2); }
  38%  { opacity:.92; transform:scale(1.08); }
  54%  { opacity:.82; transform:translate3d(1px,0,0) scale(1); }
  68%  { opacity:.70; transform:translate3d(-1px,0,0) scale(1); }
  100% { opacity:.18; transform:none; }
}
/* 1.35s 后由 JS 加 .is-settled → 卸掉动画，保持 .18 静止 */
.mx-geo.is-settled .mx-g{
  animation:none !important;
  opacity:.18;
  transform:none;
  clip-path:none;
  will-change:auto;
}

/* ---------- 19.3 内容块机械插入 ---------- */
html.mx-on .mx-up{
  opacity:0;
  transform:translate3d(0,14px,0);
  will-change:opacity,transform;
}
html.mx-on .mx-up.is-in{
  opacity:1;
  transform:none;
  transition:
    opacity .78s cubic-bezier(.22,1,.36,1) var(--mx-d,0ms),
    transform 1.02s cubic-bezier(.22,1,.36,1) var(--mx-d,0ms);
}

/* ---------- 19.4 窄屏：只保留一路装饰，避免挤到内容 ---------- */
@media (max-width:760px){
  .mx-geo .mx-g--ruler,
  .mx-geo .mx-g--ticks,
  .mx-geo .mx-g--br{ display:none; }
  .mx-geo .mx-g--dash{ right:5px; width:8px; height:64px; margin-top:-32px; }
  .mx-geo .mx-g--tl{ left:5px; top:104px; }
}

/* ---------- 19.5 兜底：减弱动效 → 直接静止态 ---------- */
@media (prefers-reduced-motion:reduce){
  .mx-geo{ display:none !important; }
  html.mx-on .mx-up,
  html.mx-on .mx-up.is-in{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
    will-change:auto !important;
  }
  .mx-flapping .mx-ch{ will-change:auto !important; }
}