@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500&family=Manrope:wght@500;600;700&family=Noto+Sans+SC:wght@400;500;700&display=swap');
/* ============================================================
   THEME — 换整页配色只改这一块
   ------------------------------------------------------------
   night (当前)：近黑面板 + 发光粒子。想换回浅色：
   --bg/#efefec --panel/#f7f7f4 --stage-bg1/#f3f3f0 --stage-bg2/#e9e9e5
   --ink/#161614 --soft/#68685f --faint/#95958c --line/rgba(22,22,20,.13)
   --card-bg/rgba(253,253,251,.94) --item-bg/#e2e2dd --shade-rgb/238,238,234
   --btn-ink/#fff
   ============================================================ */
:root{
  --bg:#0f0d0b;                       /* 页面底色 */
  --panel:#16110e;                    /* 左栏底色（JS 按分区微调） */
  --stage-bg1:#1c1915;                /* 右舞台径向渐变中心 */
  --stage-bg2:#0d0b09;                /* 右舞台径向渐变边缘 */
  --ink:#f4f1ea;                      /* 主文字 */
  --soft:rgba(244,241,234,.68);       /* 次文字 */
  --faint:rgba(244,241,234,.4);       /* 弱文字 */
  --line:rgba(244,241,234,.14);       /* 描边 */
  --card-bg:rgba(18,15,12,.28);      /* 左栏卡片底：透明玻璃，让底下火箭星尘透出来 (浅色回退: rgba(253,253,251,.72)) */
  --card-shadow:0 4px 24px rgba(0,0,0,.22);
  --item-bg:#151310;                  /* 转轮卡占位底 */
  --item-line:rgba(244,241,234,.15);  /* 转轮卡描边 */
  --item-shadow:0 34px 90px rgba(0,0,0,.6);
  --shade-rgb:6,5,4;                  /* 转轮景深遮罩色(远卡变暗) */
  --btn-ink:#141210;                  /* 反白按钮上的字色 */
  --btn-ink-soft:rgba(20,18,16,.55);  /* 反白态里的次文字 (浅色回退: rgba(255,255,255,.6)) */
  --hover-wash:rgba(244,241,234,.07); /* tab hover 底色 (浅色回退: rgba(22,22,20,.05)) */
  --fog-rgb:13,11,9;                  /* 舞台上下雾化色 (浅色回退: 239,239,236) */
  --hint-bg:rgba(15,13,11,.7);        /* 舞台提示胶囊底 (浅色回退: rgba(255,255,255,.72)) */
  --contain-bg:#141412;               /* contain 模式黑边底 (浅色回退: #101010) */
  --accent:#ff5f45;
  --accent-ink:#fff;                  /* accent 底上的字色 */
  --ok:#1fa457;                       /* 有声开启态 */
  --mono:"Geist Mono",ui-monospace,monospace;--sans:"Manrope","Noto Sans SC",sans-serif;--cjk:"Noto Sans SC","PingFang SC",sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:14px;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}
img,video{display:block;width:100%}
.lab-app{position:relative;height:100svh;display:grid;grid-template-columns:minmax(300px,400px) minmax(0,1fr);background:var(--panel);transition:background .8s var(--ease)}

/* ---- left: a dark night panel — glowing dither print with text set right on it ---- */
.lab-sidebar{
  position:relative;z-index:20;display:flex;flex-direction:column;gap:9px;min-height:0;padding:10px;
  border-right:1px solid rgba(0,0,0,.35);background:transparent;color:var(--ink)}
.ascii-bg{position:absolute;inset:0;z-index:0;width:100%;height:100%;pointer-events:none}
.lab-sidebar,.stage{position:relative;z-index:1}
.lab-sidebar>*:not(.ascii-bg){position:relative;z-index:1}
.card,.section-tabs{border:1px solid var(--line);border-radius:16px;background:var(--card-bg);box-shadow:var(--card-shadow);backdrop-filter:blur(14px) saturate(1.1);-webkit-backdrop-filter:blur(14px) saturate(1.1)}
.side-gap{flex:1 1 0;min-height:12px}
.side-top{height:48px;flex:0 0 48px;padding:0 16px;display:flex;align-items:center;justify-content:space-between;font:500 10px/1 var(--mono)}
.back-link{transition:transform .25s}.back-link:hover{transform:translateX(-3px)}
.live-dot{color:var(--faint);letter-spacing:.14em}
.story{flex:0 1 auto;min-height:0;padding:clamp(18px,3vh,30px) 12px 6px;display:flex;flex-direction:column;overflow:visible;--legible:0 0 2px rgba(8,6,4,.95),0 0 5px rgba(8,6,4,.9),0 1px 10px rgba(8,6,4,.85),0 0 22px rgba(8,6,4,.7)}
.story-count{display:flex;align-items:baseline;gap:8px;font:500 11px/1 var(--mono);color:var(--soft);text-shadow:var(--legible)}
.story-count b{font:500 clamp(44px,6vh,72px)/0.9 var(--mono);letter-spacing:-.06em;color:var(--ink);font-variant-numeric:tabular-nums;text-shadow:var(--legible)}
.story-group{margin-top:clamp(12px,2vh,20px);display:flex;align-items:center;gap:9px;font:600 11px/1 var(--cjk);letter-spacing:.04em;color:var(--ink);text-shadow:var(--legible)}
.story-group i{width:10px;height:10px;border-radius:3px;background:var(--accent);transform:rotate(45deg);transition:background .5s;box-shadow:0 0 8px rgba(8,6,4,.8)}
.story h1{margin-top:10px;font:700 clamp(24px,3.4vh,36px)/1.06 var(--cjk);letter-spacing:-.05em;overflow-wrap:anywhere;color:var(--ink);text-shadow:var(--legible)}
.story-meta{margin-top:8px;font:500 10px/1.6 var(--mono);letter-spacing:.04em;color:var(--accent);transition:color .5s;text-shadow:var(--legible)}
.story-text{max-width:300px;margin-top:clamp(10px,1.6vh,16px);color:var(--ink);font-size:13px;line-height:1.8;text-shadow:var(--legible)}
.story-photos{margin-top:clamp(10px,1.8vh,18px)}
.story-photos-row{display:flex;gap:8px}
.story-photos-row img{width:100%;max-width:320px;height:auto;object-fit:contain;border-radius:10px;border:1px solid var(--line)}
.story-photos figcaption{margin-top:7px;font:500 9px/1.6 var(--mono);letter-spacing:.06em;color:var(--soft);text-shadow:var(--legible)}
.story-open{align-self:flex-start;margin-top:clamp(12px,2vh,20px);padding:10px 15px;border-radius:999px;background:var(--ink);color:var(--btn-ink);font:500 10px/1 var(--mono);transition:transform .25s var(--ease),background .25s,color .25s}
.story-open:hover{transform:translateY(-2px);background:var(--accent);color:var(--accent-ink)}
.story.is-switching .story-count b,.story.is-switching h1,.story.is-switching .story-text,.story.is-switching .story-meta,.story.is-switching .story-photos,.story.is-switching .story-group span{animation:storyIn .5s var(--ease)}
@keyframes storyIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.section-tabs{flex:0 0 auto;display:grid;grid-template-columns:1fr 1fr;overflow:hidden}
.section-tab{height:52px;padding:0 16px;display:flex;align-items:center;justify-content:space-between;gap:8px;border:0;background:transparent;text-align:left;cursor:pointer;transition:background .25s;color:var(--ink)}
.section-tab:nth-child(odd){border-right:1px solid var(--line)}
.section-tab:nth-child(-n+2){border-bottom:1px solid var(--line)}
.section-tab:hover{background:var(--hover-wash)}
.section-tab b{font-size:12.5px;font-weight:600}
.section-tab em{color:var(--faint);font:500 10px/1 var(--mono);font-style:normal}
.section-tab.is-active{background:rgba(244,241,234,.14);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.section-tab.is-active em{color:var(--soft)}
.side-foot{flex:0 0 auto;padding:4px 8px 0;display:flex;justify-content:space-between;color:var(--faint);font:500 9px/1 var(--mono)}
.side-foot a{color:var(--ink)}

/* ---- right: the endless drum ---- */
.stage{overflow:hidden;background:transparent}
.stage::before,.stage::after{content:"";position:absolute;left:0;right:0;z-index:5;height:7%;pointer-events:none}
.stage::before{top:0;background:linear-gradient(rgba(var(--fog-rgb),.95),transparent)}
.stage::after{bottom:0;background:linear-gradient(transparent,rgba(var(--fog-rgb),.95))}
.wheel{position:absolute;inset:0;perspective:1600px;perspective-origin:50% 50%}
.wheel-item{position:absolute;left:50%;top:50%;width:min(66%,840px);aspect-ratio:16/9;margin:0;border-radius:16px;overflow:hidden;background:var(--item-bg);border:1px solid var(--item-line);box-shadow:var(--item-shadow);will-change:transform;cursor:pointer;backface-visibility:hidden}
.wheel-item img,.wheel-item video{width:100%;height:100%;object-fit:cover}
.wheel-item[data-fit="contain"] img,.wheel-item[data-fit="contain"] video{object-fit:contain;background:var(--contain-bg)}
.wheel-item::after{content:"";position:absolute;inset:0;background:rgba(var(--shade-rgb),var(--shade,0));pointer-events:none;transition:background .15s linear}
.stage-hint{position:absolute;z-index:10;right:18px;top:14px;padding:8px 11px;border-radius:999px;border:1px solid var(--line);background:var(--hint-bg);backdrop-filter:blur(8px);color:var(--soft);font:500 8px/1 var(--mono);letter-spacing:.12em;animation:hintPulse 2.4s ease-in-out infinite}
.sound-toggle{position:absolute;z-index:10;left:50%;bottom:22px;transform:translateX(-50%);padding:11px 16px;border:0;border-radius:999px;background:var(--ink);color:var(--btn-ink);font:500 11px/1 var(--sans);cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.45);transition:transform .25s var(--ease),background .2s}
.sound-toggle:hover{transform:translateX(-50%) translateY(-2px)}
.sound-toggle.is-on{background:var(--ok);color:var(--accent-ink)}
@keyframes hintPulse{0%,100%{opacity:.5}50%{opacity:1}}

@media(max-width:760px){
  .lab-app{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}
  .lab-sidebar{max-height:46vh;padding:8px;gap:7px;border-right:0;border-bottom:1px solid rgba(0,0,0,.4)}
  .ascii-bg{display:none}
  .side-gap{display:none}
  .story{padding:14px 16px}
  .story-count b{font-size:38px}
  .story-group{margin-top:10px}
  .story h1{font-size:22px}
  .story-meta{margin-top:8px;font-size:9px}
  .story-photos{display:none}
  .story-text{margin-top:8px;font-size:12px;line-height:1.7;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .story-open{margin-top:10px;padding:9px 13px}
  .section-tabs{grid-template-columns:repeat(4,1fr)}
  .section-tab{height:44px;padding:0 10px}
  .section-tab b{font-size:11px}
  .section-tab em{display:none}
  .section-tab:nth-child(-n+2){border-bottom:0}
  .section-tab:not(:last-child){border-right:1px solid var(--line)}
  .side-foot{display:none}
  .wheel-item{width:var(--wm,88%);max-height:60%}
  .stage-hint{top:10px;right:10px}
}
@media(prefers-reduced-motion:reduce){.stage-hint{animation:none}.story.is-switching *{animation:none!important}}

/* ============================================================
   HALL — 单项目展厅增量（Re-Life）
   在 lab.css 之上：图表类素材必须完整可读，故默认 contain
   ============================================================ */
:root{
  --paper:#efefef;              /* 图表底：PDF 原稿是浅灰纸，用同色消除黑边 */
}
/* 卡片跟着图片本身的比例走（JS 按 naturalWidth/Height 写入 --ar），
   这样图不会被上下留白撑小，也不会被裁。高度封顶避免竖图顶破舞台。 */
/* 关键：absolute 定位下 width:auto 会收缩成内容宽，aspect-ratio 撑不开。
   故显式给宽度，由 JS 按图片比例写入 --w（宽扁图更宽、竖图更窄）。 */
.wheel-item{aspect-ratio:var(--ar,3/2);width:var(--w,62%);height:auto;max-height:74%}
.wheel-item img,.wheel-item video{object-fit:contain;background:var(--paper)}
.wheel-item[data-fit="cover"] img{object-fit:cover;background:none}

/* 顶部：所在展馆 + 跳到下一个展馆 */
.hall-top{height:auto;flex:0 0 auto;padding:11px 14px;flex-direction:column;align-items:stretch;gap:9px}
.hall-top__row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.hall-name{font:600 12px/1.3 var(--cjk);letter-spacing:-.01em;color:var(--ink)}
.hall-name em{display:block;margin-top:3px;font:500 8.5px/1 var(--mono);font-style:normal;letter-spacing:.1em;color:var(--faint)}
.hall-jump{display:flex;align-items:center;gap:7px;padding:8px 11px;border:1px solid var(--line);border-radius:999px;
  background:rgba(244,241,234,.05);cursor:pointer;transition:background .25s,transform .25s var(--ease),border-color .25s;white-space:nowrap}
.hall-jump:hover{background:var(--accent);border-color:transparent;color:var(--accent-ink);transform:translateX(2px)}
.hall-jump b{font:600 10.5px/1 var(--cjk)}
.hall-jump span{font:500 8.5px/1 var(--mono);letter-spacing:.08em;opacity:.62}

/* 展馆切换器：5 个项目的小圆点导航 */
.hall-halls{display:flex;gap:5px;align-items:center}
.hall-hall{flex:1;height:3px;border-radius:2px;background:var(--line);border:0;padding:0;cursor:pointer;transition:background .3s}
.hall-hall.is-here{background:var(--accent)}
.hall-hall:hover{background:var(--soft)}
.hall-hall[disabled]{cursor:not-allowed;opacity:.45}

/* 章节 tab：6 个分区，3 列 2 行 */
.section-tabs.is-hall{grid-template-columns:repeat(3,1fr)}
.section-tabs.is-hall .section-tab{height:46px;padding:0 11px;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px}
.section-tabs.is-hall .section-tab:nth-child(odd){border-right:1px solid var(--line)}
.section-tabs.is-hall .section-tab:nth-child(3n){border-right:0}
.section-tabs.is-hall .section-tab:nth-child(-n+3){border-bottom:1px solid var(--line)}
.section-tabs.is-hall .section-tab b{font-size:11.5px}
.section-tabs.is-hall .section-tab em{font-size:8.5px;letter-spacing:.08em}

/* 关键数据条 */
.hall-facts{display:flex;flex-wrap:wrap;gap:6px;margin-top:clamp(10px,1.6vh,15px)}
.hall-fact{padding:5px 9px;border:1px solid var(--line);border-radius:8px;background:rgba(244,241,234,.05);
  font:500 9px/1.5 var(--mono);letter-spacing:.04em;color:var(--soft);text-shadow:var(--legible)}
.hall-fact b{color:var(--ink);font-weight:600}

/* 图注：转轮下方常驻，说明当前这张图在讲什么 */
.stage-cap{position:absolute;z-index:10;left:50%;bottom:16px;transform:translateX(-50%);
  width:auto;max-width:74%;height:auto;
  padding:9px 15px;border-radius:12px;border:1px solid var(--line);background:var(--hint-bg);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);text-align:center;
  font:500 11px/1.6 var(--cjk);color:var(--soft);transition:opacity .3s}
.stage-cap b{color:var(--ink);font-weight:600}

@media(max-width:760px){
  .hall-top{padding:9px 11px;gap:7px}
  .hall-name em{display:none}
  .section-tabs.is-hall{grid-template-columns:repeat(3,1fr)}
  .section-tabs.is-hall .section-tab{height:40px}
  .section-tabs.is-hall .section-tab:nth-child(-n+3){border-bottom:1px solid var(--line)}
  .hall-facts{display:none}
  .stage-cap{bottom:8px;max-width:92%;padding:7px 11px;font-size:10px;line-height:1.5}
}

/* 暗底原稿（details / product-hero）用深色垫底，避免 contain 两侧出现浅色竖条 */
.wheel-item[data-tone="dark"] img{background:#0c0b0a}