#space3d{position:absolute;inset:0;width:100%;height:100%;z-index:2;touch-action:none;cursor:grab}#space3d:active{cursor:grabbing}.spatial-labels{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}.spatial-labels[hidden]{display:none}.spatial-label{position:absolute;transform:translate(-50%,0);border:0;background:none;color:#dce8f1;font:500 12px/1.5 Inter,"PingFang SC",sans-serif;text-shadow:0 2px 8px #000;white-space:nowrap;pointer-events:auto;cursor:pointer;padding:5px}.spatial-label.galaxy{font-size:15px;letter-spacing:1px}.spatial-label.star{font-size:12px;color:#e7f0f7}.spatial-label.contribution{color:#ffdb9f;font-size:12px;min-height:44px;min-width:44px;padding:10px 12px;display:inline-flex;align-items:center;justify-content:center;z-index:5}.spatial-label[hidden]{display:none!important;pointer-events:none;visibility:hidden}.spatial-label:hover{color:white;text-decoration:underline;text-underline-offset:4px}.render-mode-toggle{pointer-events:auto;position:absolute;z-index:18;top:26px;right:36px;border:1px solid #ffffff60;background:#0b101acc;color:#f0f0fa;border-radius:24px;padding:10px 16px;font-size:12px;cursor:pointer;backdrop-filter:blur(8px)}.render-mode-toggle:disabled{opacity:.5;cursor:default}.shell[data-render-mode="3d"] #space{pointer-events:none}.shell[data-render-mode="3d"] .scene-pagination{display:none!important}.shell[data-render-mode="3d"] .atmosphere{opacity:.35}.personal-growth-markers{position:absolute;inset:0;pointer-events:none;z-index:4}.personal-growth-markers button{position:absolute;transform:translate(-50%,-50%);border:0;background:#0a101ccc;border-radius:50%;color:#ffdc9e;font-size:20px;width:30px;height:30px;pointer-events:auto;cursor:pointer}.personal-growth-markers[hidden]{display:none}@media(max-width:820px) and (orientation:portrait){.render-mode-toggle{right:14px;top:110px;padding:8px 12px;font-size:11px}.topbar__actions{margin-right:0}.spatial-label.galaxy{font-size:12px}.personal-growth-stage{font-size:10px;line-height:1.6}}@media(max-height:500px) and (orientation:landscape){.render-mode-toggle{right:16px;top:16px;padding:7px 12px;font-size:11px}.personal-growth-stage{font-size:9px;line-height:1.5}}

.shell[data-render-mode="3d"] .hero-copy{width:min(250px,26vw);top:18%}.shell[data-render-mode="3d"] .hero-copy h1{font-size:30px}.shell[data-render-mode="3d"] .hero-copy__description,.shell[data-render-mode="3d"] .hero-copy__english,.shell[data-render-mode="3d"] .reward-line,.shell[data-render-mode="3d"] .hero-copy>.primary-action,.shell[data-render-mode="3d"] .study-invitation{display:none!important}.shell[data-render-mode="3d"] .personal-growth-stage{font-size:10px;line-height:1.6}@media(max-width:820px) and (orientation:portrait){.shell[data-render-mode="3d"] .hero-copy{width:calc(100% - 32px);left:16px;top:116px}.shell[data-render-mode="3d"] .hero-copy h1{font-size:25px}.shell[data-render-mode="3d"] .hero-copy__chapter{margin:5px 0}.shell[data-render-mode="3d"] .personal-growth-stage{max-width:85%;font-size:9px}}

.shell[data-render-mode="folding"] #space{pointer-events:none}.spatial-labels[inert] .spatial-label{pointer-events:none}


.spatial-label{touch-action:none;user-select:none}
#shell[data-render-mode="3d"] .spatial-labels{z-index:11}
#shell[data-render-mode="3d"] .topbar,#shell[data-render-mode="3d"] .topbar__actions{z-index:12}
#shell[data-render-mode="3d"] .hero-copy{pointer-events:none;width:min(280px,42vw);max-width:calc(100% - 48px)}
#shell[data-render-mode="3d"] .hero-copy button,#shell[data-render-mode="3d"] .hero-copy a,#shell[data-render-mode="3d"] .hero-copy .study-panel{pointer-events:auto}
@media(max-width:820px) and (orientation:portrait){#shell[data-render-mode="3d"] .hero-copy{width:min(240px,72vw);left:16px;top:116px}}
@media(max-height:500px) and (orientation:landscape){#shell[data-render-mode="3d"] .hero-copy{width:min(220px,38vw)}}


/* Independent 3D controls; immersion preserves the current camera and data. */
.spatial-controls{position:absolute;z-index:22;bottom:20px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid #ffffff24;border-radius:28px;background:#070b12e8;color:#dce8f1;font:12px/1.4 Inter,"PingFang SC",sans-serif;white-space:nowrap}
.spatial-controls[hidden]{display:none}.spatial-controls button{color:inherit;background:transparent;border:1px solid #ffffff30;border-radius:18px;padding:9px 12px;cursor:pointer;min-height:40px}.spatial-controls output{min-width:84px;text-align:center}.spatial-sample{font-size:10px;color:#92a1af}
#shell.spatial-immersive #interface,#shell.spatial-immersive #dossier,#shell.spatial-immersive .journey-footer{visibility:hidden!important;pointer-events:none!important}
#shell.spatial-immersive .spatial-controls{z-index:50}
@media(max-width:600px){.spatial-controls{bottom:max(12px,env(safe-area-inset-bottom));gap:4px;padding:6px 8px;max-width:calc(100% - 16px);flex-wrap:wrap;justify-content:center}.spatial-sample{width:100%;text-align:center}.spatial-controls button{padding:7px 10px}.spatial-controls output{min-width:70px}}

/* The breadcrumb and searchable topic browser carry navigation in 3D. */
#shell[data-render-mode="3d"] .hero-copy,#shell[data-render-mode="3d"] .chapter-nav{display:none!important}
.spatial-controls{width:max-content;max-width:calc(100% - 24px)}
@media(max-width:600px){.spatial-controls{width:calc(100% - 24px);box-sizing:border-box}.spatial-controls .spatial-sample{flex-basis:100%}}
#shell:has(#dossier.is-open):not(.spatial-immersive) .spatial-controls{display:none}

/* Mobile 3D: the full-width spatial controls used to sit on top of the journey
   footer (z-index 22 over 15), so the "收回 2.5D" exit button could not be
   tapped. Stack the controls above the footer instead of overlapping it, and
   keep the footer's own stacking context above them so the exit stays hittable.
   Immersive mode hides the footer, so it keeps the controls at the bottom.

   Raising the controls to 74px then landed them on #catalog-toggle (bottom:67px
   on narrow portrait). Hiding that toggle is not an option: at universe level in
   3D on mobile, #study-change and #all-topics-toggle are both hidden, so the
   catalog is the only find-by-name entry there -- the breadcrumb alone only
   walks up. So stack all three bands instead, and repair the catalog panel:
   the .chapter-nav rule above suppresses it with !important, which left the
   toggle opening a 0x0 list. Re-enable it only when the catalog is open, and
   lift it over the controls (22) and footer (24) so the list is not buried. */
@media(max-width:820px){
  #shell[data-render-mode="3d"]:not(.spatial-immersive) .spatial-controls{bottom:calc(119px + env(safe-area-inset-bottom,0px))}
  #shell[data-render-mode="3d"]:not(.spatial-immersive) .journey-footer{z-index:24}
}
#shell[data-render-mode="3d"] .scene-catalog[open]{z-index:26}
#shell[data-render-mode="3d"] .scene-catalog[open] #nav{display:flex!important}

/* The shared Kanshan dock replaces the old footer/catalog. Keep the actual
   exit button in the camera toolbar; reserve the top band above the sky. */
#shell[data-kanshan-hub][data-render-mode="3d"]:not(.spatial-immersive) .spatial-controls{top:82px;bottom:auto}
#shell[data-kanshan-hub][data-render-mode="3d"] .spatial-controls #immersive-toggle{position:static;display:inline-flex;min-height:44px}
#shell.spatial-immersive .kanshan-hub{visibility:hidden;pointer-events:none}

/* 批注 §5：统一 3D 控制条。控件同高同居中，去掉胶囊内重复描边，缩放与视图/返回分组，
   示例数据提示单独一行，不再挤占操作。只改 chrome 样式，不动相机与转场源码。 */
.spatial-controls{gap:6px;padding:6px 10px}
/* 「收回 2.5D」此前 44px 高、比邻居偏上 2px；这里把全部控件统一到同一高度和圆角。 */
.spatial-controls button,
#shell[data-kanshan-hub][data-render-mode="3d"] .spatial-controls #immersive-toggle{
  display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;
  min-height:44px;height:44px;padding:0 12px;border:0;border-radius:14px;
  background:rgba(255,255,255,.07);line-height:1}
.spatial-controls button:hover{background:rgba(255,255,255,.13)}
.spatial-controls button:focus-visible{outline:2px solid #7fb4ff;outline-offset:2px}
/* 缩放（− 数值 +）与右侧的视图/返回之间留一道分隔线，两组动作不再糊成一排。 */
.spatial-controls>:nth-child(5){margin-left:10px;padding-left:14px;box-shadow:-1px 0 0 rgba(255,255,255,.14)}
/* 数值是次要信息：降级排版，语义仍由渲染模块提供的层级名称加倍率承担。 */
.spatial-controls output{align-self:center;min-width:76px;padding:0 2px;font-size:11px;color:#9fb0c2}
.spatial-controls .spatial-sample{order:-1;flex-basis:100%;width:100%;text-align:center;line-height:1.5}
@media(max-width:600px){
  /* 窄屏先保证一行放下全部操作，包括 3D 退出；倍率数值收起，−/+ 仍在。 */
  .spatial-controls{gap:4px;padding:6px 8px;flex-wrap:wrap}
  .spatial-controls output{display:none}
  .spatial-controls button{padding:0 10px}
  .spatial-controls>:nth-child(5){margin-left:6px;padding-left:10px}
}
/* 看山面板侧贴时，控制条在剩余的星图区域内居中并限宽，保证 3D 退出始终露出可点。
   放不下时换行，不允许溢出到面板底下——溢出正是「收回 2.5D」点不到的原因。 */
#shell[data-render-mode="3d"] .spatial-controls{
  left:calc(var(--kanshan-free-width, 100vw) / 2);
  max-width:calc(var(--kanshan-free-width, 100vw) - 24px);
  flex-wrap:wrap;justify-content:center;white-space:normal}

/* Camera tools form one light material, with plain controls rather than
   a capsule around every action. Touch targets stay 44px high. */
.spatial-controls{display:flex;flex-wrap:wrap;gap:2px;padding:3px 8px;width:max-content;border:0;border-radius:12px;background:rgba(12,19,28,.52);backdrop-filter:blur(18px);box-shadow:0 5px 20px #0002;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.spatial-controls button,#shell[data-kanshan-hub][data-render-mode="3d"] .spatial-controls #immersive-toggle{min-width:44px;min-height:44px;height:44px;padding:0 11px;border:0;border-radius:7px;background:transparent;box-shadow:none;font-size:12px;font-weight:500;color:#dce6ee;transition:background 100ms ease,color 100ms ease}
.spatial-controls button:hover{background:#ffffff0b;color:#fff}.spatial-controls button:active{background:#ffffff15}
.spatial-controls button:nth-child(2),.spatial-controls button:nth-child(4){padding:0;font-size:23px;font-weight:300;border-radius:0}
.spatial-controls>:nth-child(5){margin-left:6px;padding-left:11px;box-shadow:none}
.spatial-controls output{display:flex;align-items:center;justify-content:center;min-width:0;padding:0;font-size:11px;letter-spacing:0;color:#aab9c6}
.spatial-controls .spatial-sample{position:absolute;left:50%;top:-18px;transform:translateX(-50%);width:auto;max-width:100%;white-space:nowrap;font-size:10px;line-height:1.4;font-weight:400;color:#98a8b5}
#shell[data-kanshan-hub][data-render-mode="3d"] .spatial-controls #immersive-toggle{color:#bddbfa}
@media(max-width:600px){.spatial-controls{display:grid;width:min(342px,calc(100% - 24px));grid-template-columns:repeat(3,minmax(0,1fr));gap:0;padding:2px 8px}.spatial-controls .spatial-sample{width:auto}.spatial-controls output{display:flex}.spatial-controls button{padding:0 6px}.spatial-controls>:nth-child(5){margin-left:0;padding-left:6px}.spatial-controls button:nth-child(2),.spatial-controls button:nth-child(4){font-size:23px}.spatial-controls button:nth-child(n+5){border-top:1px solid #ffffff08;border-radius:0}}
@media(orientation:landscape) and (max-height:520px){#shell[data-kanshan-hub][data-render-mode="3d"]:not(.spatial-immersive) .spatial-controls{top:72px}.spatial-controls .spatial-sample{top:-16px;font-size:9px}}
@media(prefers-reduced-motion:reduce){.spatial-controls button{transition:none}}
@media(max-width:600px) and (orientation:portrait){
  /* The narrow toolbar has two rows ending at 174px. Keep the companion
     beneath it rather than letting its header intercept the return action. */
  #shell[data-render-mode="3d"]:not(.spatial-immersive):not(:has(#dossier.is-open)) .kanshan-hub__panel{max-height:min(620px,calc(var(--kanshan-visible-height) - var(--hub-panel-bottom) - 184px - env(safe-area-inset-top) - env(safe-area-inset-bottom)))}
}

.spatial-bearing{display:inline-flex;align-items:center;gap:5px;color:#aac8d8;font-size:11px;min-width:40px}.spatial-bearing::before{content:'↑';display:inline-block;font-size:15px;transform:rotate(var(--bearing,0deg));transform-origin:50% 50%}

.spatial-gesture-hint{position:absolute;inset:0;z-index:14;pointer-events:none;color:#d1e8ef}.spatial-gesture-hint[hidden]{display:none!important}.spatial-gesture-hint>span{position:absolute;font-size:38px;font-weight:300;opacity:.4;text-shadow:0 1px 12px #000}.gesture-up{left:50%;top:17%;transform:translateX(-50%)}.gesture-down{left:50%;bottom:23%;transform:translateX(-50%)}.gesture-left{left:7%;top:43%}.gesture-right{right:7%;top:43%}.spatial-gesture-hint p{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);width:max-content;max-width:calc(100% - 60px);margin:0;padding:10px 16px;border-radius:12px;background:#07131d55;text-align:center;font:13px/1.7 system-ui,sans-serif;text-shadow:0 1px 8px #000}.spatial-gesture-hint small{display:block;font-size:11px;color:#aabfca}@media(max-height:520px){.spatial-gesture-hint p{top:43%;font-size:12px}.gesture-up{top:12%}.gesture-down{bottom:20%}}

.spatial-label{touch-action:none}

.spatial-controls button[hidden]{display:none!important}
#shell .hero-copy h1{font-family:"Noto Serif SC","Source Han Serif SC","Songti SC","STSong","SimSun",serif;font-weight:600;letter-spacing:.085em;text-shadow:0 2px 20px #b1d7ec20}
#shell .brand b{font-family:"Noto Serif SC","Songti SC","STSong",serif;font-weight:600;letter-spacing:.16em}