@font-face{font-family:FuturaSite;src:url('../fonts/futura.otf?v=1') format('opentype');font-weight:100 900;font-style:normal;font-display:swap}

/* ==========================================================================
   翼轩控制台 —— 设计 token 与全局样式
   配色：白 / 灰阶 / 蓝 #446b98 / 金 #f4ebc5（蓝金仅点缀，灰度承担质感）
   ========================================================================== */

:root {
  --white: #ffffff;
  --gray-050: #fafafa;
  --gray-100: #f4f4f4;
  --gray-200: #e9e9e9;
  --gray-300: #d8d8d8;
  --gray-400: #bcbcbc;
  --gray-500: #9a9a9a;
  --gray-600: #7c7c7c;
  --gray-700: #5c5c5c;
  --gray-800: #3c3c3c;
  --gray-900: #1f1f1f;
  --blue: #446b98;
  --blue-soft: rgba(68, 107, 152, 0.22);
  --pulse: #5cf4f1;
  --gold: #f4ebc5;
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --radius: 14px;
  /* 六边形棱线的统一粗细（现在是原来的 130%）。中心那圈的走线、六块邻块的围栏、
     往外延伸的蜂窝轮廓、子页 HUB 的骨架，全吃这一个值 —— 只改这里，一起走，
     不会出现某一块比别的粗。放在 :root 而不是 .console 里，因为子页不在
     .console 之内，写在那里子页就取不到了（取不到 = 声明作废，线宽回落到 1px）。
     凡是加粗过的地方都有 vector-effect: non-scaling-stroke，所以这个值是屏幕 px，
     跟 viewBox → 元素尺寸的缩放无关 */
  --edge-w: 2.6px;
  --font: FuturaSite, 'PingFang SC', 'Microsoft YaHei', system-ui, -apple-system, sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  background: var(--white);
  color: var(--gray-800);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* 粒子背景 */
#particles {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* logo */
#logo {
  position: fixed;
  top: max(16px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  height: 44px;
  width: auto;
  pointer-events: none;
  opacity: 0.92;
  filter: drop-shadow(0.5px 0 0 var(--gray-800)) drop-shadow(-0.5px 0 0 var(--gray-800))
    drop-shadow(0 0.5px 0 var(--gray-800)) drop-shadow(0 -0.5px 0 var(--gray-800));
  transition: opacity 0.2s;
}

/* 控制台主页时 logo 可点击（回到最起始页） */
#logo.clickable {
  pointer-events: auto;
  cursor: pointer;
}

#logo.clickable:hover {
  opacity: 1;
}

/* 内容容器 */
#app {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}

.screen {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 24px;
  gap: 26px;
  cursor: pointer;
  animation: elastic-in 0.55s var(--spring) both;
}

/* 对话文字 */
.dialog {
  max-width: 30em;
  font-size: clamp(1.15rem, 2.2vw + 0.6rem, 1.7rem);
  line-height: 1.9;
  --tk: 0.05em;
  letter-spacing: var(--tk);
  color: var(--gray-800);
  margin: 0;
  font-weight: 400;
  text-shadow: 0 1px 2px rgba(31, 31, 31, 0.1), 0 4px 14px rgba(68, 107, 152, 0.1);
  animation: rise-in 0.6s var(--spring) both;
}

@keyframes elastic-in {
  from {
    opacity: 0;
    transform: scale(0.92) translateY(12px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* 声纹 */
.voiceprint {
  width: 100%;
  height: 64px;
  opacity: 0.9;
}

/* 跳过 / 底部提示 */
.skip,
.hint {
  position: absolute;
  bottom: calc(20px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  text-shadow: 0 1px 2px rgba(31, 31, 31, 0.08);
  animation: soft-blink 3.6s ease-in-out infinite;
}

/* 辅助小字：缓慢明暗呼吸（非硬闪烁） */
@keyframes soft-blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.32;
  }
}

.skip {
  background: none;
  border: none;
  color: var(--gray-500);
  font-size: 0.85rem;
  --tk: 0.14em;
  letter-spacing: var(--tk);
  cursor: pointer;
  font-family: inherit;
  transition: color 0.2s;
}

.skip:hover {
  color: var(--blue);
  animation: none;
  opacity: 1;
}

.hint {
  color: var(--gray-400);
  font-size: 0.72rem;
  --tk: 0.26em;
  letter-spacing: var(--tk);
  white-space: nowrap;
}

/* 1.4 询问界面 */
.ask {
  cursor: default;
}

.ask-options {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: min(320px, 86vw);
  animation: rise-in 0.5s var(--spring) 0.08s both;
}

.name-form {
  display: flex;
  gap: 10px;
  width: 100%;
}

.name-input {
  flex: 1;
  min-width: 0;
  padding: 12px 14px;
  font-size: 1rem;
  font-family: inherit;
  letter-spacing: 0.04em; /* 输入框里的字是左对齐的，不吃尾距补偿 */
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  background: var(--gray-050);
  color: var(--gray-800);
  outline: none;
  user-select: text;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.name-input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-soft);
}

.name-input::placeholder {
  color: var(--gray-400);
}

.ghost,
.opt {
  /* 药丸按钮：左右内边距要对称才能让框居中，所以尾距补偿改在右内边距上做
     （见文件末尾"字距的尾距补偿"），--pad-x 就是那一对对称内边距 */
  --pad-x: 20px;
  padding: 12px var(--pad-x);
  font-size: 1rem;
  font-family: inherit;
  --tk: 0.06em;
  letter-spacing: var(--tk);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.2s;
}

.ghost {
  background: var(--blue);
  color: #fff;
  border: 1px solid var(--blue);
  white-space: nowrap;
}

.ghost:hover {
  background: #3a5f87;
  border-color: #3a5f87;
}

.opt {
  width: 100%;
  background: var(--white);
  color: var(--gray-700);
  border: 1px solid var(--gray-300);
}

.opt:hover {
  border-color: var(--blue);
  color: var(--blue);
}

/* 控制台 */
.console {
  cursor: default;
  gap: 0;
  /* 七个正六边形的几何只在这里定义一次，别处一律引用：
     --hex-w 是那块的方框边长（viewBox 100 映射到它），
     --hex-r 是外接半径 R = --hex-w × 48/100（HEX_R / HEX_VB，见 screens.ts），
     --hex-d 是邻块中心距 √3·R —— 取这个距离，两块才共边，六个菜单方向
     也才正好落在六块邻块的正中。
     main.ts 的 build() 读的也是 .hex 的布局宽度，于是 SVG 里那套几何、
     菜单文字的位置、命中判定三者同源，不会各算各的 */
  --hex-w: min(32vh, 32vw, 233px);
  --hex-r: calc(var(--hex-w) * 48 / 100);
  --hex-d: calc(var(--hex-r) * 1.7320508075688772);
  /* 六个有功能的板块的底色。特别浅 —— 它只说明"这块是按得动的"，
     别抢棱线和围栏的戏；悬停时 .sector.hover 还会再叠一层更明显的蓝 */
  --block-fill: rgba(68, 107, 152, 0.045);
}

/* 发射线：电路纹理（SVG 生成，见 main.ts 的 circuitTrace） */
.circuit {
  filter: drop-shadow(0 1px 2px rgba(80, 80, 80, 0.22));
}

.circuit .trace,
.circuit .branch {
  fill: none;
  stroke: url(#traceFade);
  stroke-width: 2;
  stroke-linejoin: miter;
  stroke-linecap: square;
}

.circuit .via,
.circuit .pad,
.circuit .pad-sq {
  fill: url(#traceFade);
}

/* ==========================================================================
   悬停菜单文字时生长出来的电路纹理
   一个点 → 一枚小正六边形 → 六条径向辐条，三阶段依次接上：
     0.00s  种子点在板块正中弹出来
     0.10s  小六边形（边长 = 板块的一半）从那个点胀开
     0.34s  六条辐条从小六边形的六个顶点向外画到板块的六个顶点
     0.52s  粒子沿线发射，六个方向同时出去
   ========================================================================== */
.growth {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* 种子点和小六边形都以【板块正中】为缩放原点。SVG 子元素的 transform-box
   初始值就是 view-box，此时 transform-origin 的百分比是相对整个 viewBox
   （= 画面正中）算的，不是相对元素自己 —— 必须显式写成板块中心的用户坐标，
   由 main.ts 的 --gx/--gy 带进来 */
.grow-seed,
.grow-frame {
  transform-box: view-box;
  transform-origin: var(--gx) var(--gy);
}

/* 阶段一：板块正中的种子点。
   长写法而不是 animation 简写：简写里只要出现 var()，整条声明就变成
   "待替换"，未替换前所有长属性都读回初始值；--spring 万一失效还会把
   animation-name 一起吞掉（整段动画消失）。拆开写就只有缓动函数受影响 */
.grow-seed {
  fill: url(#traceFade);
  transform: scale(0);
  animation-name: grow-seed-in;
  animation-duration: 0.16s;
  animation-timing-function: var(--spring);
  animation-fill-mode: forwards;
}

@keyframes grow-seed-in {
  to {
    transform: scale(1);
  }
}

/* 阶段二：从种子点胀开的小正六边形。描边宽度跟着一起缩放，所以起点是一根
   看不见的细丝，胀到位才是标准的 2px —— 正好是"从点长出来"的样子 */
.grow-frame {
  fill: none;
  stroke: url(#traceFade);
  stroke-width: 2;
  stroke-linejoin: miter;
  stroke-linecap: butt;
  transform: scale(0);
  animation-name: grow-frame-in;
  animation-duration: 0.32s;
  animation-delay: 0.1s;
  animation-timing-function: var(--spring);
  animation-fill-mode: forwards;
}

@keyframes grow-frame-in {
  to {
    transform: scale(1);
  }
}

/* 阶段三：六条辐条，各自从自己的顶点向外画出去（--len 由 main.ts 给，= R/2） */
.grow-trace {
  fill: none;
  stroke: url(#traceFade);
  stroke-width: 2;
  stroke-linejoin: miter;
  stroke-linecap: butt;
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
  animation: grow-draw 0.26s cubic-bezier(0.22, 1, 0.36, 1) 0.34s forwards;
}

@keyframes grow-draw {
  to {
    stroke-dashoffset: 0;
  }
}

.grow-nodes {
  opacity: 0;
  animation: fade-in 0.2s ease-out 0.5s forwards;
}

/* 脉冲渐变：由发射端（不透明度 1）到最远端（0），每段一条，坐标在 main.ts 生成 */
.pf-a {
  stop-color: var(--pulse);
  stop-opacity: 1;
}

.pf-b {
  stop-color: var(--pulse);
  stop-opacity: 0;
}

.pu-a {
  stop-color: #2f8f8c;
  stop-opacity: 0.95;
}

.pu-b {
  stop-color: #2f8f8c;
  stop-opacity: 0;
}

/* 机枪式脉冲：一次三连发小方块，图案周期 86px。
   周期时长 0.8s → 86 / 0.8 ≈ 107.5px/s，约等于上一版 213px/s 的一半，循环仍然无缝。
   三个方块在周期内的位置：[0,4] [18,22] [36,40]，即 4+14+4+14+4+46 = 86。
   间距 18px 是按"光晕半径 4px + 拖影 6px + 可见白 8px"定出来的：
   间距一旦小于光晕扩散，三发就会被光晕焊成一条（上一版就是这样） */
.grow-pulse-under,
.grow-pulse-smear,
.grow-pulse,
.grow-frame-pulse-under,
.grow-frame-pulse-smear,
.grow-frame-pulse {
  fill: none;
  stroke-linecap: butt;
  stroke-linejoin: miter;
  stroke-dasharray: 4 14 4 14 4 46;
  opacity: 0;
  animation-name: pulse-appear, pulse-run;
  animation-duration: 0.12s, 0.8s;
  animation-delay: 0.52s, 0.52s;
  animation-timing-function: linear, linear;
  animation-iteration-count: 1, infinite;
  animation-fill-mode: forwards, none;
}

/* 尾迹相位不用 dashoffset 偏移，而是绕周期回卷进 dasharray 本身：
   每个方块向后拖 6px，四段拖影区间是 [-6,4] [12,22] [30,40] [80,86]，
   从 0 起步写出来就是 4 8 10 8 10 40 6 0，与方块共用同一个 0 → -86 关键帧，
   因此不需要 var()/calc()，也就没有关键帧被判无效的风险。
   末尾那个 0 不能省：dasharray 的值个数若为奇数，浏览器会把整份列表复制一遍，
   第二份里原本的空隙会被当成实线画出来（周期翻倍、停顿区被填成实线）。
   拖影尾端与前一颗粒子之间留 8px 白，大于光晕半径，三发不会黏成一条 */
.grow-pulse-under,
.grow-pulse-smear,
.grow-frame-pulse-under,
.grow-frame-pulse-smear {
  stroke-dasharray: 4 8 10 8 10 40 6 0;
}

/* 深色衬底：压实对比，并一起拖出尾迹 */
.grow-pulse-under,
.grow-frame-pulse-under {
  stroke-width: 5;
}

/* 运动模糊：青色拖影，头端与方块前缘对齐，柔化走 SVG 滤镜（见 index 的 #pulseBlur） */
.grow-pulse-smear,
.grow-frame-pulse-smear {
  stroke-width: 4.5;
  animation-name: pulse-appear-soft, pulse-run;
}

/* 亮青粒子本体（4×4 小方块）+ 辉光 */
.grow-pulse,
.grow-frame-pulse {
  stroke-width: 4;
  filter: drop-shadow(0 0 4px var(--pulse));
}

/* 六条辐条的描边色写在 stroke 属性上是渐变（url(#pf…)），小六边形那圈是闭合回路，
   不吃渐变 —— 渐变是"发射端 1 → 远端 0"的线性色，套在环上会让半圈淡到看不见，
   而这条边框要整圈都在发光。所以它走纯色，靠 CSS 覆盖掉属性 */
.grow-frame-pulse {
  stroke: var(--pulse);
}
.grow-frame-pulse-under {
  stroke: #2f8f8c;
}

@keyframes pulse-appear {
  to {
    opacity: 1;
  }
}

@keyframes pulse-appear-soft {
  to {
    opacity: 0.7;
  }
}

@keyframes pulse-run {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: -86;
  }
}

/* 一次性的那版（触屏点按 / 桌面点空白处）：脉冲只跑【一轮】，不像悬停那样无限循环。
   周期 0.8s、0.52s 起跑，所以 1.32s 一轮到位 —— 到位的瞬间图案相位正好回到起点
   （dasharray 刚好一个整周期），粒子会重新出现在发射端；不隐掉就成了"停在起点"，
   看着像卡住。所以一轮跑完补一次淡出，之后静静空着，等 3 秒那道收回。
   规则放在 .is-retiring 那段【之前】：两者可能同时挂在一个元素上，靠下面的覆盖它 */
.grow-seg.is-burst .grow-pulse,
.grow-seg.is-burst .grow-pulse-smear,
.grow-seg.is-burst .grow-pulse-under,
.grow-seg.is-burst .grow-frame-pulse,
.grow-seg.is-burst .grow-frame-pulse-smear,
.grow-seg.is-burst .grow-frame-pulse-under {
  animation-name: pulse-appear, pulse-run, fade-out;
  animation-duration: 0.12s, 0.8s, 0.3s;
  animation-delay: 0.52s, 0.52s, 1.32s;
  animation-timing-function: linear, linear, ease;
  animation-iteration-count: 1, 1, 1;
  animation-fill-mode: forwards, forwards, forwards;
}

/* 拖影那两条的入场是"柔"的（停在 0.7 而不是 1），跟着换掉名字 */
.grow-seg.is-burst .grow-pulse-smear,
.grow-seg.is-burst .grow-frame-pulse-smear {
  animation-name: pulse-appear-soft, pulse-run, fade-out;
}

/* 3 秒后收回：生长的逆过程 —— 粒子先熄，辐条缩回，小六边形最后收成那个点。
   总时长 0.66s，main.ts 里的移除计时器按它对齐 */
.grow-seg.is-retiring .grow-pulse,
.grow-seg.is-retiring .grow-pulse-smear,
.grow-seg.is-retiring .grow-pulse-under,
.grow-seg.is-retiring .grow-frame-pulse,
.grow-seg.is-retiring .grow-frame-pulse-smear,
.grow-seg.is-retiring .grow-frame-pulse-under {
  /* 用 fade-out 而不是 animation:none —— 直接摘掉动画会让不透明度从
     fill-mode 撑住的终值瞬间跳回基础值，连过渡都来不及走 */
  animation: fade-out 0.16s ease forwards;
}

.grow-seg.is-retiring .grow-trace {
  animation: grow-retract 0.28s cubic-bezier(0.4, 0, 1, 1) 0.1s forwards;
}

@keyframes grow-retract {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: var(--len);
  }
}

.grow-seg.is-retiring .grow-nodes {
  animation: fade-out 0.2s ease 0.1s forwards;
}

.grow-seg.is-retiring .grow-frame {
  animation: grow-frame-out 0.24s cubic-bezier(0.4, 0, 1, 1) 0.34s forwards;
}

.grow-seg.is-retiring .grow-seed {
  animation: grow-frame-out 0.14s cubic-bezier(0.4, 0, 1, 1) 0.52s forwards;
}

/* from 必须写死：入场动画是 fill-mode: forwards 撑着 scale(1)，一旦被
   is-retiring 这条规则换掉，基础值 scale(0) 就会重新露出来 —— 不显式指定
   起点的话，"收回"会从一个已经是 0 的地方开始，等于什么也没发生 */
@keyframes grow-frame-out {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(0);
  }
}

@keyframes fade-out {
  to {
    opacity: 0;
  }
}

/* 触碰某一段：中速闪烁 */
.trace-seg.is-blink,
.hex-seg.is-blink {
  animation: seg-blink 0.75s ease-in-out infinite;
}

@keyframes seg-blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.12;
  }
}

/* 扇形交互区 */
.sectors {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.sector {
  fill: transparent;
  stroke: none;
  pointer-events: all;
  cursor: pointer;
  transition: fill 0.18s ease;
}

.sector.hover {
  fill: rgba(68, 107, 152, 0.08);
}

/* ==========================================================================
   六个区块：电路围栏 + 液态玻璃面板 + 棱线高光
   围栏画在 #sectors 里（玻璃之下，能被玻璃取背景模糊），
   面板画在 #glass 里（clip-path 裁成扇形），
   棱线画在 #rims 里（玻璃之上：clip-path 会把 box-shadow / border 一并裁掉，
   所以棱线不能用 border 实现，只能另起一层描边）
   ========================================================================== */

/* 分层：围栏 1 → 玻璃 2 → 棱线 3 → 生长 4 → 六边形 5 → 机体 6 → 菜单 7
   生长层必须压过玻璃：悬停标题就会点亮它所在的区块，玻璃一凝出来
   就会把生长电路盖住，所以生长层不能跟围栏挤在同一个 svg 里 */
.console .sectors {
  z-index: 1;
}

.console .glass {
  z-index: 2;
}

.console .rims {
  z-index: 3;
}

.console .growth {
  z-index: 4;
}

.console .hex {
  z-index: 5;
}

.console .model {
  z-index: 6;
}

.console .menu {
  z-index: 7;
}

/* --- 六个有功能的板块的底色 ---
   画在 #sectors 的最前面（见 main.ts 的 blockFillsHTML），所以随后画的围栏、
   探针走线、发射线统统压在它上面 —— 底色就该在最底下，不能去盖棱线外沿的那一半。
   命中区 .sector 是另一回事：它在最后画，悬停时那层 rgba(.08) 会叠在这层之上，
   于是"点得动"的暗示有两档：静止一档、悬停再深一档。 */
.block-fills {
  pointer-events: none;
}

.block-fill {
  fill: var(--block-fill);
  stroke: none;
}

/* --- 蜂窝外围：第二环起的六边形轮廓 ---
   只有轮廓，别的一律没有：没有玻璃、没有过孔焊盘、没有围栏电路、不参与命中
   （整个 #sectors 就是 pointer-events: none），也不吃 .circuit 那层 drop-shadow。
   描边用的是和六条发射线【同一支】#traceFade —— 它的 stop-opacity 由 0.9 降到 0，
   于是越往外越淡，最外圈自己化掉，不需要另加遮罩，也不需要分层。
   线宽跟围栏共用 --edge-w：它们画的是同一种东西（六边形的边）。 */
.halo {
  fill: none;
  stroke: url(#traceFade);
  stroke-width: var(--edge-w);
  stroke-linejoin: miter;
  stroke-linecap: butt;
}

/* --- 区块围栏：一圈带凹口的六边形走线，凹口正对六条发射线 --- */
.block-rails {
  pointer-events: none;
}

.block-rail .rail {
  fill: none;
  stroke: url(#traceFade);
  stroke-width: var(--edge-w);
  stroke-linejoin: miter;
  stroke-linecap: butt;
  transition: stroke 0.22s ease;
}

.block-rail .rvia {
  fill: url(#traceFade);
  transition: fill 0.22s ease;
}

.block-rail.is-active .rail {
  stroke: var(--blue);
  stroke-opacity: 0.85;
}

.block-rail.is-active .rvia {
  fill: var(--blue);
  fill-opacity: 0.9;
}

/* --- 液态玻璃面板 --- */
.glass,
.rims {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* 静止态：完全没有玻璃 —— 六块只在被选中（悬停）时才凝出来 */
.glass-cell {
  position: absolute;
  inset: 0;
  /* 不确定是否支持 clip-path: path() 时先不显示：
     6 张全屏面板若裁不掉，会整片盖住页面 */
  display: none;
  opacity: 0;
  background-image: none;
  /* 静止时留一个零强度滤镜而不是 none：blur 与 saturate 都可插值，
     悬停时玻璃是"化开"的而不是"啪一下出现" */
  -webkit-backdrop-filter: blur(0px) saturate(100%);
  backdrop-filter: blur(0px) saturate(100%);
  /* scale 的原点默认在元素中心，而元素是整屏，中心即控制台圆心 →
     凝出时是"从圆心向外鼓起"，不是各自平移 */
  transform: scale(0.992);
  transition: opacity 0.26s ease, backdrop-filter 0.34s ease, transform 0.42s var(--spring);
}

@supports (clip-path: path('M0 0')) {
  .glass-cell {
    display: block;
  }
}

.glass-cell.is-active {
  /* 选中 = 这一块凝成一枚透镜：蓝调压深（沿用站内"悬停即加蓝"的既有语汇，
     见 .sector.hover），模糊把底下的电路糊成光斑，
     再让一束白光跟着光标在块内游走 —— 深底 + 亮斑才看得出"液"。
     六块共用一束"圆心最亮、越往外越沉"的径向光：颜色是位置的连续函数，
     所以同一时刻只有一块亮着，不存在色缝问题 */
  opacity: 1;
  background-image: radial-gradient(
      circle 22vh at var(--mx, 50%) var(--my, 50%),
      rgba(255, 255, 255, 0.95),
      rgba(255, 255, 255, 0) 64%
    ),
    radial-gradient(
      /* 每块玻璃自己的一束主光：光源偏在这块六边形的左上，所以左上亮、右下沉 */
      circle calc(var(--hr, 120px) * 1.25) at calc(var(--hx, 50%) - var(--hr, 120px) * 0.3)
        calc(var(--hy, 50%) - var(--hr, 120px) * 0.3),
      rgba(255, 255, 255, 0.92) 0%,
      rgba(240, 246, 252, 0.66) 38%,
      rgba(198, 221, 243, 0.52) 72%,
      rgba(150, 186, 220, 0.5) 100%
    );
  background-repeat: no-repeat;
  -webkit-backdrop-filter: blur(14px) saturate(190%);
  backdrop-filter: blur(14px) saturate(190%);
  transform: scale(1.006);
}

/* 按下那一下：玻璃先鼓一点、再压回去，最后落在 is-active 的 1.006 上 ——
   按键的"咔哒"感就来自这一下过冲。animation 压得住 transition（动画优先级更高），
   所以两者不会互相拉扯；故意不写 forwards，跑完自动交还给 is-active 的 1.006，
   数值一样，接得上、不会跳 */
@keyframes glass-press {
  0% {
    transform: scale(1.035);
  }
  55% {
    transform: scale(0.988);
  }
  100% {
    transform: scale(1.006);
  }
}

.glass-cell.is-press {
  animation: glass-press 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- 棱线高光：同一份扇形路径，描边 + 一层模糊辉光（玻璃的边，同样只在选中时才有） --- */
.glass-rim {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.glass-rim .rim-line {
  fill: none;
  stroke: url(#rimGrad);
  /* 棱线跟的是同一条六边形边，粗细从 --edge-w 折出来（原来就是 2 的 0.7 / 0.9） */
  stroke-width: calc(var(--edge-w) * 0.7);
  stroke-linejoin: round;
}

.glass-rim .rim-glow {
  fill: none;
  stroke: url(#rimGrad);
  stroke-width: 5;
  opacity: 0.55;
}

.glass-rim.is-active {
  opacity: 1;
}

.glass-rim.is-active .rim-line {
  stroke-width: calc(var(--edge-w) * 0.9);
}

.glass-rim.is-active .rim-glow {
  opacity: 1;
}

/* 棱线渐变：userSpaceOnUse 且纵跨整屏 → 六个区块共用一束"自上而下"的光 */
.rim-a {
  stop-color: #ffffff;
  stop-opacity: 1;
}

.rim-b {
  stop-color: #a8c4dd;
  stop-opacity: 0.9;
}

.rim-c {
  stop-color: #6f92b5;
  stop-opacity: 0.8;
}

/* 子页 HUB 骨架的一束光。不复用上面那三档：那三档是横跨整屏的高度，
   每块棱线只取其中一小段，所以看不出"渐变"；HUB 是一条短边通吃全程，
   一路暗到 #6f92b5 的话顶边会淡到看不见、底边压得过重，六条边轻重差太多。
   这里把两头都收进蓝灰区，六条边始终看得见，只是下面略沉。 */
.hub-g1 {
  stop-color: #c6d6e5;
  stop-opacity: 0.85;
}

.hub-g2 {
  stop-color: #7f9fbe;
  stop-opacity: 0.95;
}

/* 窄屏：常驻模糊关掉（手机上整屏 backdrop-filter 很贵），只在点亮时开 */
@media (max-width: 640px) {
  .glass-cell {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

.hex {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: var(--hex-w);
  height: var(--hex-w);
  pointer-events: none;
  animation: fade-in 0.5s ease 0.05s both;
}

.hex polygon {
  fill: var(--white);
}

/* 六边形电路框架：环形走线 + 顶点焊盘 + 边中点支线 */
.hex-circuit {
  filter: drop-shadow(0 1px 2px rgba(68, 107, 152, 0.28));
}

.hex-circuit .ring {
  fill: none;
  stroke: var(--blue);
  stroke-opacity: 0.5;
  stroke-width: var(--edge-w);
  vector-effect: non-scaling-stroke;
}

.hex-circuit .stub {
  fill: none;
  stroke: var(--gray-600);
  stroke-opacity: 0.6;
  stroke-width: var(--edge-w);
  vector-effect: non-scaling-stroke;
}

.hex-circuit .vpad {
  fill: var(--blue);
  fill-opacity: 0.5;
}

.hex-circuit .vhole,
.hex-circuit .spad {
  fill: var(--white);
}

.hex-circuit .spad {
  stroke: var(--gray-600);
  stroke-opacity: 0.6;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

/* 黑点是机体的占位符，钉在画面正中：和 .hex / .menu-item 一样以 50%/50% 为锚，
   translate(-50%,-50%) 按自身尺寸回退一半 —— 不写死 -8px 这种半个点径的魔数，
   点的大小以后改了也不会偏。--ox/--oy 是注视偏移（main.ts 里跟光标走），
   默认 0，正好落在正中 */
.model {
  position: absolute;
  left: 50%;
  top: 50%;
  --ox: 0px;
  --oy: 0px;
  transform: translate(calc(-50% + var(--ox)), calc(-50% + var(--oy)));
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 2;
  pointer-events: none;
}

.model-breathe {
  display: block;
  animation: breathe 3.4s ease-in-out infinite;
}

.model-dot {
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #141414;
  animation: blink 5s ease-in-out infinite;
}

@keyframes breathe {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.18);
  }
}

@keyframes blink {
  0%,
  90%,
  100% {
    transform: scaleY(1);
  }
  94% {
    transform: scaleY(0.08);
  }
}

.menu {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.menu-item {
  position: absolute;
  left: 50%;
  top: 50%;
  /* 摆在所悬停板块的正中（板心距 = √3·R，见 .console 里的 --hex-d），
     旋转 × 平移 × 反向旋转 = 沿 --ang 方向推到该处，文字本身保持水平 */
  --r: var(--hex-d);
  transform: translate(-50%, -50%) rotate(var(--ang)) translateY(calc(0px - var(--r)))
    rotate(calc(0deg - var(--ang)));
  pointer-events: auto;
  background: none;
  border: none;
  font-family: inherit;
  /* 0.95rem 的 120%。字号是 em/rem 制的，所以 --tk（0.14em）和由它算出的
     尾距补偿会跟着一起放大，不需要另配系数 —— 换成 px 就会脱钩。
     后面那个 min 是上限：悬停时长出的那枚小六边形只有板块的一半大，
     而它随 --hex-w 一起缩 —— 矮窗口下 32vh 会把 --hex-w 压到 130px 上下，
     这时候光给 rem 字号，"摄影馆"三个字就顶出小六边形了（实测过）。
     0.12·--hex-w − 2px 是那个约束解出来的：标题半宽 ≈ 1.71 × 字号（三字加字距），
     小六边形半宽 = √3/4 × R = 0.208 × --hex-w，要 1.71F ≤ 0.208H − 2。
     正常情况下算出来远大于 1.14rem，所以只有极矮的窗口才真的吃到它 ——
     正常情况下六个字就是你要的那个大小。 */
  font-size: min(1.14rem, calc(var(--hex-w) * 0.12 - 2px));
  --tk: 0.14em;
  letter-spacing: var(--tk);
  color: var(--gray-700);
  cursor: pointer;
  padding: 8px 10px;
  transition: color 0.2s;
  animation: fade-in 0.5s ease both;
}

/* 悬停时只变色、加粗、放大，【不位移】：标题要一直待在自己那块模块的正中，
   而悬停正好就是生长动画发生的那一刻 —— 原来那个 translateY(-4px) 会把字
   从小六边形里顶出去 */
.menu-item:hover .menu-label {
  color: var(--blue);
  font-weight: 700;
  transform: scale(1.05);
  text-shadow: 0 5px 12px rgba(68, 107, 152, 0.3), 0 1px 2px rgba(0, 0, 0, 0.08);
}

.menu-label {
  display: inline-block;
  /* 尾距补偿统一在文件末尾做（见"字距的尾距补偿"）：这里只负责让 --tk 生效 */
  text-shadow: 0 1px 2px rgba(31, 31, 31, 0.12), 0 4px 12px rgba(68, 107, 152, 0.12);
  transition: color 0.2s ease, transform 0.3s var(--spring), text-shadow 0.3s ease;
}

.menu-item:nth-child(1) { animation-delay: 0.04s; }
.menu-item:nth-child(2) { animation-delay: 0.08s; }
.menu-item:nth-child(3) { animation-delay: 0.12s; }
.menu-item:nth-child(4) { animation-delay: 0.16s; }
.menu-item:nth-child(5) { animation-delay: 0.2s; }
.menu-item:nth-child(6) { animation-delay: 0.24s; }

/* 占位子页：一枚正六边形 HUB（几何在 screens.ts 里生成，见那里的注释） */
.placeholder {
  cursor: default;
}

.hud-hub {
  position: relative;
  display: grid;
  place-items: center;
  /* 宽高比必须和 viewBox 的 866 : 1000 一致，画出来才是正六边形。
     clamp 的下限是给矮窗口留的：只按 46vh 算的话，窗口一矮 HUB 就缩到
     装不下内容，六边形顶角会把标题切掉。 */
  width: min(86vw, clamp(280px, 46vh, 420px));
  aspect-ratio: 866 / 1000;
  animation: elastic-in 0.5s var(--spring) both;
}

/* 底色与背景模糊。裁切形状由 screens.ts 内联给出（和骨架同一组点），
   所以这里不能再给 background 铺满矩形 —— 裁不掉就会整片盖住页面 */
.hud-hub-face {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle 78% at 50% 40%,
    rgba(255, 255, 255, 0.96),
    rgba(255, 255, 255, 0.72) 72%
  );
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

/* 骨架：轮廓 + 内圈栅线 + 六根辐条 + 六个角垫。
   这一层【不裁】—— 裁了的话轮廓线贴着六边形画，外面那一半就没了。
   vector-effect 让线宽是屏幕 px，跟 --edge-w 一个口径 */
.hud-hub-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.hub-edge,
.hub-bezel,
.hub-spoke {
  fill: none;
  stroke: url(#hubGrad);
  vector-effect: non-scaling-stroke;
  stroke-linejoin: miter;
  stroke-linecap: butt;
}

.hub-edge {
  stroke-width: var(--edge-w);
}

.hub-bezel {
  stroke-width: calc(var(--edge-w) * 0.6);
}

.hub-spoke {
  stroke-width: calc(var(--edge-w) * 0.6);
}

.hub-pad {
  fill: var(--white);
  stroke: url(#hubGrad);
  stroke-width: calc(var(--edge-w) * 0.6);
  vector-effect: non-scaling-stroke;
}

.hud-card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  /* 内容要待在六边形里：正六边形越往上/下越窄，所以宽度留够余量。
     中间那 62% 的宽度在 HUB 最窄的可行尺寸下也装得下最长的一行 */
  max-width: 62%;
}

.hud-title {
  font-size: 1.7rem;
  --tk: 0.32em;
  letter-spacing: var(--tk);
  color: var(--gray-800);
  font-weight: 500;
  text-shadow: 0 1px 2px rgba(31, 31, 31, 0.12), 0 4px 14px rgba(68, 107, 152, 0.12);
}

.hud-wip {
  font-size: 0.95rem;
  --tk: 0.16em;
  letter-spacing: var(--tk);
  color: var(--gray-500);
  text-shadow: 0 1px 2px rgba(31, 31, 31, 0.08);
}

.hud-back {
  margin-top: 8px;
  --pad-x: 28px;
  padding: 9px var(--pad-x);
  background: none;
  border: 1px solid var(--gray-300);
  border-radius: 999px;
  color: var(--gray-700);
  font-family: inherit;
  font-size: 0.85rem;
  --tk: 0.12em;
  letter-spacing: var(--tk);
  cursor: pointer;
  transition: all 0.2s;
}

.hud-back:hover {
  border-color: var(--blue);
  color: var(--blue);
}

/* ==========================================================================
   字距的尾距补偿
   letter-spacing 在最后一个字后面也会补一份间距，而这份尾距算进了元素宽度 ——
   凡是"居中"的文字，字形就整体左偏半份字距。这不是小数目：.hud-title 是 0.32em，
   在 27px 字号上偏了 4.5px，卡片本身居中、标题却明显歪向左边，一眼就看得出。
   每个带字距的元素声明自己的 --tk，补偿集中在这一处，两种情形分开处理：
     · 文字没有可见外框（段落、无边框按钮、菜单标题）—— 用负右边距让掉尾距。
       容器居中算的是"外边距盒"，盒宽因此少一份字距，盒子右移半份、字形正回中心。
     · 有可见外框的药丸按钮 —— 改右内边距让位。框的左右内边距必须保持对称，
       否则偏的就是框本身了；收掉一份右内边距，内容盒右移半份、字形回到框心。
   ========================================================================== */
.dialog,
.skip,
.hint,
.hud-title,
.hud-wip,
.menu-label {
  margin-right: calc(-1 * var(--tk));
}

.hud-back,
.ghost,
.opt {
  padding-right: calc(var(--pad-x) - var(--tk));
}

/* 移动端优化 */
@media (max-width: 640px) {
  #logo {
    height: 34px;
  }

  .dialog {
    line-height: 1.8;
  }

  /* 窄屏把整盘蜂窝收小。只改 --hex-w 这一处 —— --hex-r / --hex-d 由它推出，
     main.ts 也是读 .hex 的实测宽度换算 R，所以三边一起跟着走。
     以前这里直接改 .hex 的宽高、另外给 .menu-item 一个手挑的 --r，
     两者对不上（640px 宽时板块在 163px、标题却在 130px），标题就缩进板块里面去了。
     42vw 略大：整个蜂窝的横向半展是 1.247×--hex-w，390px 的屏上会顶出视口。 */
  .console {
    --hex-w: min(37vh, 40vw, 196px);
  }

  /* 同样按 120% 走：0.85 → 1.02。上限那一项和上面一样，是同一个约束，
     只是这里请求的字号更小；--hex-w 在这个区间是 196px，算出来 21.5px，
     远大于 1.02rem，所以窄屏拿到的就是 1.02rem 本身 */
  .menu-item {
    --tk: 0.1em;
    font-size: min(1.02rem, calc(var(--hex-w) * 0.12 - 2px));
    padding: 6px 8px;
  }

  /* 子页 HUB 的尺寸由 .hud-hub 的 clamp 自己收，不再需要在这里改内边距
     （.hud-card 已经不是那张带内边距的卡片了，它是六边形里的内容盒） */
}

/* 无障碍：系统开启"减少动态效果"时关闭闪动 */
@media (prefers-reduced-motion: reduce) {
  .skip,
  .hint,
  .trace-seg.is-blink,
  .hex-seg.is-blink,
  .grow-pulse,
  .grow-pulse-smear,
  .grow-pulse-under {
    animation: none;
  }

  /* 区块点亮只保留"变清晰"，不做鼓起与高光位移 */
  .glass-cell,
  .glass-cell.is-active {
    transform: none;
    transition: none;
  }
}
/* SIGNAL ATLAS — typography, precise circuitry and a quiet white instrument. */
@font-face{font-family:Space;src:url('../fonts/futura.otf?v=1') format('opentype');font-weight:100 900;font-display:swap}
@font-face{font-family:Tech;src:url('../fonts/futura.otf?v=1') format('opentype');font-weight:100 900;font-display:swap}
@font-face{font-family:ArchiveCN;src:url('../fonts/chinese.woff2?v=2') format('woff2');font-weight:300 700;font-display:swap}
:root{--ink:#203744;--muted:#697c86;--blue:#446b98;--pulse:#56bfc9;--edge-w:1px;--spring:cubic-bezier(.18,.84,.28,1.05);--font:FuturaSite,ArchiveCN,'Microsoft YaHei UI',sans-serif;--mono:FuturaSite,ArchiveCN,'Microsoft YaHei UI',sans-serif}
body{background:#fcfdfc;color:var(--ink);font-family:var(--font);font-weight:400;font-feature-settings:'ss01' 1,'ss02' 1}button,input,textarea,select{font-family:var(--font)}
body:before{content:'';position:fixed;inset:0;pointer-events:none;background-image:linear-gradient(#7392a008 1px,transparent 1px),linear-gradient(90deg,#7392a008 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(to right,#000,transparent 35%,transparent 65%,#000);z-index:0}
body:after{content:'';position:fixed;inset:18px;border:1px solid #8198a51b;pointer-events:none;z-index:29;clip-path:polygon(0 0,46px 0,46px 1px,1px 1px,1px 46px,0 46px,0 0,100% 0,100% 46px,calc(100% - 1px) 46px,calc(100% - 1px) 1px,calc(100% - 46px) 1px,calc(100% - 46px) 0,100% 0,100% 100%,calc(100% - 46px) 100%,calc(100% - 46px) calc(100% - 1px),calc(100% - 1px) calc(100% - 1px),calc(100% - 1px) calc(100% - 46px),100% calc(100% - 46px),100% 100%,0 100%,0 calc(100% - 46px),1px calc(100% - 46px),1px calc(100% - 1px),46px calc(100% - 1px),46px 100%,0 100%)}
#logo{top:30px;height:30px;filter:none;opacity:.85}
.site-header{position:fixed;inset:28px 4.5% auto;display:flex;justify-content:space-between;align-items:center;z-index:28;pointer-events:none;font-family:var(--mono);font-size:10px;letter-spacing:.13em;color:#6b7e89}
.brand-lockup{display:flex;align-items:center;gap:15px}.brand-lockup strong{font-family:Space,sans-serif;font-size:16px;font-weight:500;letter-spacing:.2em;color:var(--ink)}.brand-lockup span{padding-left:15px;border-left:1px solid #a0b0b6;line-height:1.6;font-size:8px}
.header-status{display:flex;align-items:center;gap:18px}.header-status b{font-weight:400;color:#466f7a}.status-dot,.eyebrow i{display:inline-block;width:5px;height:5px;background:#5d9294;margin-right:7px;box-shadow:0 0 0 3px #5d92940d}.site-footer{position:fixed;bottom:27px;left:4.5%;right:4.5%;z-index:28;display:flex;justify-content:space-between;font:9px var(--mono);letter-spacing:.12em;color:#7b8a90;pointer-events:none}.footer-mark{font-family:Space,sans-serif;font-size:11px;letter-spacing:.22em;color:#415a67}
#app{isolation:isolate}.screen{animation:screen-reveal .55s cubic-bezier(.2,.8,.2,1) both;padding:0;gap:0}.screen.is-leaving{animation:screen-depart .22s ease-in both;pointer-events:none}
@keyframes screen-reveal{from{opacity:0;clip-path:inset(0 0 8% 0)}to{opacity:1;clip-path:inset(0)}}
@keyframes screen-depart{to{opacity:0;filter:blur(2px);transform:translateY(-8px)}}
.eyebrow{font:10px var(--mono);letter-spacing:.17em;color:var(--blue);display:flex;align-items:center;gap:4px}
.editorial-guide{display:block;text-align:left;cursor:default}.guide-copy{position:absolute;left:10%;top:50%;transform:translateY(-52%);width:45%;z-index:3}.guide-english{font:11px var(--mono);letter-spacing:.23em;color:#71868f;margin:40px 0 16px}.guide-title{font-family:var(--font);font-size:clamp(44px,4.9vw,76px);font-weight:400;letter-spacing:.04em;line-height:1.33;margin:0;color:#203744}.guide-title br+span{font-size:.76em;overflow-wrap:anywhere}.guide-description{font-size:13px;line-height:2;letter-spacing:.1em;color:#6f8189;margin:27px 0 32px;max-width:380px}.personal-note{font-size:12px;letter-spacing:.1em;color:#446b98;margin-top:-19px;margin-bottom:25px}
.connect-button{border:1px solid #8199a6;background:#fcfdfcbd;color:var(--ink);width:188px;height:50px;display:flex;align-items:center;justify-content:space-between;padding:0 17px;font-family:var(--font);font-size:12px;letter-spacing:.18em;cursor:pointer;position:relative;overflow:hidden;transition:color .25s,border-color .25s}.connect-button:before{content:'';position:absolute;inset:0;background:var(--ink);transform:translateX(-101%);transition:transform .35s cubic-bezier(.2,.8,.2,1);z-index:-1}.connect-button:hover{color:white;border-color:var(--ink)}.connect-button:hover:before{transform:translateX(0)}.button-arrow{font:24px Space,sans-serif;transition:transform .25s}.connect-button:hover .button-arrow{transform:translate(2px,-2px)}
.skip{position:static;display:block;margin-top:19px;padding:3px 0;color:#70838d;font:11px var(--font);letter-spacing:.1em;text-decoration:none;background:none;border:0;cursor:pointer}.skip span{margin-left:22px}.skip:hover{color:var(--blue)}
.sculpture-caption{position:absolute;left:62%;top:75%;display:flex;flex-direction:column;gap:8px;font:8px var(--mono);letter-spacing:.16em;color:#82949d;pointer-events:none}.crosshair{font-size:22px;color:#446b98;margin-bottom:7px}.signal-strip{position:absolute;bottom:125px;width:100%;height:38px;pointer-events:none;opacity:.8}.signal-strip .voiceprint{position:absolute;inset:0;width:100%;height:38px;opacity:1}.signal-strip>span{position:absolute;left:4.5%;top:50px;font:8px var(--mono);letter-spacing:.18em;color:#96a5aa}.guide-progress{position:absolute;bottom:79px;left:10%;right:10%;display:flex;align-items:center;gap:24px;font:9px var(--mono);letter-spacing:.13em;color:#7c8e97;z-index:2}.guide-progress>span{margin-right:auto}.guide-progress>div{display:flex;gap:7px}.guide-progress i{width:28px;height:2px;background:#d9e1e3}.guide-progress i.complete{background:#446b98}.guide-progress b{font-weight:400;color:#446b98}
.ask-options{margin:20px 0 0;width:min(330px,90%);gap:16px;animation:none;align-items:stretch}.name-form{border:0;border-bottom:1px solid #8397a1;display:flex;gap:5px;background:transparent;padding:0;height:46px}.name-input{font-family:var(--font);border:0!important;width:100%;min-width:0;background:transparent;color:var(--ink);outline:0;letter-spacing:.14em;text-align:left;font-size:16px}.name-input::placeholder{color:#8d9ba2}.ghost{font:24px Space,sans-serif;background:none;border:0;color:var(--blue);width:46px;padding:0;cursor:pointer}.alternate-options{display:flex;justify-content:space-between;gap:15px}.opt{border:0;background:transparent;font:11px var(--font);padding:8px 0;color:#677c88;cursor:pointer;letter-spacing:.07em}.opt:hover{color:var(--blue)}.opt span{margin-left:8px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.console{--hex-w:min(29vh,23vw,228px);--block-fill:#799db307;cursor:default}.console-heading{position:absolute;left:5.5%;top:15%;z-index:8;text-align:left;pointer-events:none}.console-heading h1{font-size:27px;font-weight:400;line-height:1.7;letter-spacing:.08em;margin:18px 0 0}.console-heading h1 span{color:#80929b}.console-caption{position:absolute;right:5.5%;top:16%;display:flex;flex-direction:column;gap:12px;z-index:8;text-align:right;pointer-events:none}.console-caption span{font:9px var(--mono);letter-spacing:.17em;color:#708996}.console-caption b{font:11px var(--font);letter-spacing:.16em;color:#81959f}.console-footer{position:absolute;left:5.5%;right:5.5%;bottom:15%;display:flex;justify-content:space-between;font:11px var(--font);letter-spacing:.12em;color:#728891;z-index:8;pointer-events:none}.console-footer>span{font-size:10px}.touch-hint{display:none}
.circuit,.hex-circuit{filter:none}.circuit .trace,.circuit .branch{stroke-width:.8}.circuit .via{r:1.4;fill:#8199a8}.circuit .pad-sq{opacity:.45}.circuit .branch{opacity:.6}.halo{stroke-width:.55;opacity:.25}.block-rail .rail{stroke:#7994a1;stroke-opacity:.33;stroke-width:.8}.block-rail .rvia{r:1.15;fill:#7391a2;fill-opacity:.65}.block-rail.is-active .rail{stroke:#446b98;stroke-opacity:.8;stroke-width:1}.block-rail.is-active .rvia{fill:#446b98}.hex polygon{fill:#fbfdfcec}.hex-circuit .vpad{r:1.1}.hex-circuit .vhole{r:.45}.hex-circuit .spad{r:.65;stroke-width:.6}.hex-circuit .ring{stroke-opacity:.8}.hex-circuit .stub{stroke-opacity:.45;stroke-width:.7}
.sector.hover{fill:#446b9805}.glass-cell{transform-origin:var(--hx) var(--hy);transition:opacity .2s,backdrop-filter .3s,transform .38s var(--spring)}.glass-cell.is-active{backdrop-filter:blur(3px) saturate(110%);-webkit-backdrop-filter:blur(3px) saturate(110%);background-image:linear-gradient(130deg,#fffffff0,#dae7f345 45%,#93b3c557 95%);transform:scale(1.006)}.glass-rim .rim-glow{stroke-width:2;opacity:.4}.glass-rim.is-active .rim-glow{opacity:.45}.rim-a{stop-color:#f6feff}.rim-b{stop-color:#8db3c0}.rim-c{stop-color:#446b98}
.menu-item{display:flex;flex-direction:column;align-items:center;padding:8px 5px;font-size:min(20px,calc(var(--hex-w)*.098));letter-spacing:.13em;animation:fade-in .6s ease both;gap:7px;color:#2b4755}.menu-index{font:9px var(--mono);color:#849ba7;letter-spacing:.08em;display:flex;gap:30px;line-height:1}.menu-index i{font-style:normal;color:#829aaa;transition:transform .3s}.menu-label{font-weight:500;text-shadow:none;letter-spacing:.13em;line-height:1.25;margin:0!important}.menu-en{font:8px var(--mono);letter-spacing:.13em;color:#8196a0;transition:letter-spacing .3s,color .3s}.menu-item:hover .menu-label,.menu-item.is-active .menu-label{font-weight:600;text-shadow:none;transform:none;color:#244d68}.menu-item:hover .menu-en,.menu-item.is-active .menu-en{color:#446b98;letter-spacing:.19em}.menu-item:hover .menu-index i{transform:translate(2px,-2px)}
.core-instrument{width:calc(var(--hex-w)*.61);text-align:center}.core-instrument svg{width:100%;overflow:visible}.dial-ticks{stroke:#90a6af;stroke-width:.55}.dial-ring{fill:none;stroke:#b5c6cc;stroke-width:.45}.dial-orbit{fill:none;stroke:#446b98;stroke-width:.8;stroke-dasharray:35 20 4 19;transform-origin:50px 50px;animation:orbit-spin 35s linear infinite}.core-iris{fill:#6c9bad09;stroke:#446b98;stroke-width:.7;stroke-linejoin:round;transform-origin:50px 50px;animation:iris-breathe 6s ease-in-out infinite}.core-light{fill:#8ab4bb;filter:drop-shadow(0 0 3px #86beca);animation:core-pulse 4s ease-in-out infinite}.core-instrument>span{font:7px var(--mono);letter-spacing:.15em;color:#72909d;display:block;margin-top:-3px}.model{--ox:0px;--oy:0px;transform:translate(calc(-50% + var(--ox)*.25),calc(-50% + var(--oy)*.25))}.trace-seg.is-blink,.hex-seg.is-blink{animation:none;filter:drop-shadow(0 0 2px #4ba4b5);opacity:1}.trace-signal{stroke:#6ea9b4;fill:none;stroke-width:1.1;stroke-dasharray:13 600;animation:trace-transmit 8s linear infinite;opacity:.75}.grow-frame,.grow-trace{stroke:#688a9c;stroke-width:.8}.grow-nodes .via{fill:#446b98;r:1.2}.grow-pulse,.grow-frame-pulse{stroke-width:1.8;filter:drop-shadow(0 0 2px #70b7c1)}.grow-pulse-under,.grow-frame-pulse-under{stroke-width:2;opacity:.55}.grow-pulse-smear,.grow-frame-pulse-smear{stroke-width:2.5}.grow-seed{fill:#446b98}
.console .circuit{animation:fade-in 1s .2s both}.console .block-rails{animation:fade-in 1s .35s both}.console .glass{animation:fade-in 1s .5s both}.console .model{animation:fade-in 1.3s .3s both}
.hud-hub{width:min(80vw,340px)}.hud-title{font-family:var(--font);font-size:25px;letter-spacing:.18em;font-weight:400}.hud-wip{font-size:12px;letter-spacing:.12em;color:#728891}.hud-back{font-family:var(--font);font-size:12px;letter-spacing:.15em}.hud-hub-face{background:#fbfdfcec;backdrop-filter:blur(3px)}
:focus-visible{outline:2px solid #446b98;outline-offset:6px}button:active{filter:brightness(.94)}
@keyframes orbit-spin{to{transform:rotate(360deg)}}@keyframes iris-breathe{0%,100%{transform:rotate(0deg) scale(.96)}50%{transform:rotate(8deg) scale(1.04)}}@keyframes core-pulse{0%,100%{opacity:.55;r:2.5}50%{opacity:1;r:3.2}}@keyframes trace-transmit{to{stroke-dashoffset:-1226}}
@media(max-width:900px){.brand-lockup span{display:none}.console-heading h1{font-size:23px}.console-caption{display:none}.guide-copy{left:8%}.guide-title{font-size:56px}.guide-description{font-size:12px}.console-heading{top:14%}.console-footer{bottom:13%}.signal-strip{bottom:117px}}
@media(max-width:640px){body:after{inset:10px}.site-header{inset:25px 7% auto;font-size:8px}.brand-lockup strong{font-size:12px;letter-spacing:.16em}.header-status{gap:8px}.header-status>b{display:none}#logo{top:23px;height:24px}.site-footer{bottom:23px;left:7%;right:7%;font-size:7px}.footer-mark{font-size:8px;letter-spacing:.13em}.site-footer .footer-coordinate{display:none}.guide-copy{left:9%;top:36%;width:82%;transform:translateY(-50%)}.guide-english{font-size:8px;letter-spacing:.15em;margin:22px 0 12px}.guide-title{font-size:45px;line-height:1.3;letter-spacing:.025em}.eyebrow{font-size:8px}.guide-description{font-size:11px;line-height:1.95;margin:18px 0 24px;max-width:290px;letter-spacing:.07em}.connect-button{width:160px;height:43px;font-size:11px}.skip{font-size:10px;margin-top:14px}.sculpture-caption{left:auto;right:9%;top:76%;font-size:6px;gap:6px}.crosshair{font-size:16px;margin:0}.signal-strip{bottom:118px;height:25px;opacity:.55}.signal-strip .voiceprint{height:25px}.signal-strip>span{display:none}.guide-progress{left:9%;right:9%;bottom:77px;gap:12px;font-size:7px}.guide-progress>span{font-size:6px;letter-spacing:.08em}.guide-progress i{width:15px}.console{--hex-w:min(25vh,37vw,180px)}.console-heading{top:13%;left:8%;}.console-heading h1{font-size:22px;line-height:1.6;margin-top:12px}.console-heading .eyebrow{font-size:7px}.console-footer{left:8%;right:8%;bottom:16%;flex-direction:column;align-items:center;gap:15px;font-size:10px}.console-footer>span{font-size:9px}.desktop-hint{display:none}.touch-hint{display:inline}.menu-item{font-size:min(16px,calc(var(--hex-w)*.105));gap:5px;padding:5px 3px}.menu-index{font-size:7px;gap:22px}.menu-en{font-size:6px;letter-spacing:.08em}.core-instrument>span{font-size:5px;margin-top:-5px}.ask-options{width:280px;max-width:100%;margin-top:5px}.greet .guide-title{font-size:41px}.greet .guide-description{max-width:270px}.alternate-options .opt{font-size:10px}.greet .guide-copy{top:38%}.guide-progress b{font-size:8px}.console .halo{opacity:.22}}
@media(max-height:650px) and (min-width:641px){.guide-copy{top:47%}.guide-title{font-size:45px}.guide-english{margin-top:20px}.guide-description{margin:15px 0 19px;font-size:11px}.signal-strip{bottom:92px;height:20px}.signal-strip>span{display:none}.guide-progress{bottom:64px}.console-heading{top:20%}.console-heading h1{font-size:22px}.console-footer{bottom:13%;font-size:9px}}
@media(max-height:700px) and (max-width:640px){.guide-copy{top:39%}.guide-title{font-size:37px}.guide-english{margin-top:18px}.guide-description{margin:13px 0 18px}.sculpture-caption{display:none}.guide-progress{bottom:64px}.signal-strip{bottom:96px}.console-heading{top:14%}.console-heading h1{font-size:18px}.console-footer{bottom:14%;gap:10px}.greet .guide-title{font-size:34px}}
.editorial-guide .skip{transform:none;left:auto;bottom:auto;opacity:1;animation:none}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.trace-signal{display:none}}
.screen.identity-screen{overflow-y:auto;padding:120px 10vw 100px;display:flex;flex-direction:row;justify-content:flex-start;text-align:left;align-items:center;min-height:100%;box-sizing:border-box;cursor:default}
.identity-card{width:min(100%,460px);position:relative;z-index:5;background:rgba(246,250,255,.94);padding:30px;border:1px solid #d4e0ef;border-left:3px solid #739cca;box-shadow:0 20px 70px #4871980a}
.identity-eyebrow,.identity-coordinate{font:12px FuturaSite,ArchiveCN,sans-serif;letter-spacing:.13em;color:#557496;line-height:1.8}
.identity-card h1{font-size:34px;line-height:1.4;font-weight:450;margin:18px 0;color:#203f66}
.identity-name{font-size:21px;color:#426b9a;overflow-wrap:anywhere}.identity-intro{font-size:16px;line-height:1.8;color:#52667e}
.identity-card label{display:block;font-size:14px;color:#45607c;margin:18px 0 9px}
.identity-card input{box-sizing:border-box;width:100%;background:#fff;border:1px solid #b7cbe0;border-radius:0;color:#243e5a;padding:13px 14px;font:16px inherit;min-height:48px}
.identity-card input:focus{outline:2px solid #648fbc;outline-offset:3px}
.identity-primary,.identity-secondary{box-sizing:border-box;display:flex;justify-content:space-between;align-items:center;width:100%;min-height:48px;padding:13px 16px;margin:18px 0 0;font-size:16px;text-decoration:none;cursor:pointer}
.identity-primary{border:1px solid #365b83;background:#365b83;color:white}.identity-secondary{border:1px solid #b7cbe0;background:transparent;color:#365b83}
.identity-actions{display:flex;gap:20px;flex-wrap:wrap}.identity-actions button{background:none;border:0;border-bottom:1px solid #a7bdd5;color:#46668a;min-height:44px;font-size:14px;cursor:pointer}
.identity-error{font-size:14px;line-height:1.6;color:#a53d46;min-height:22px}.identity-helper{font-size:13px;line-height:1.8;color:#63758a;margin:20px 0 0}
.identity-card [aria-busy=true]{opacity:.65}.identity-card button:disabled{cursor:wait}.identity-coordinate{margin-left:auto;align-self:flex-end;text-align:right}
.visitor-profile{position:absolute;bottom:88px;left:5vw;z-index:30;display:flex;align-items:center;gap:16px;max-width:min(480px,90vw);padding:14px 18px;border-left:2px solid #779fc8;background:rgba(250,253,255,.96);box-shadow:0 8px 32px #36618b0a;pointer-events:auto}
.nickname-hint{display:block;margin-top:6px;padding:6px 0;border:0;background:none;color:#627b96;font-family:inherit;font-size:13px;text-decoration:underline;text-underline-offset:4px;cursor:pointer}.nickname-hint:hover{color:#294e74}.nickname-hint:focus-visible{outline:2px solid #648fbc;outline-offset:3px}
.visitor-caption{font-size:12px;color:#627b96;letter-spacing:.08em}.visitor-name{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-top:5px;overflow-wrap:anywhere}.visitor-name strong{font-size:18px;color:#294e74;font-weight:500}.identity-badge{font-size:12px;padding:3px 7px;border:1px solid #b5c9dd;color:#426585}.role-badge{background:#365b83;color:white;border-color:#365b83}.visitor-aliases{font-size:13px;color:#647b92;margin:8px 0 0;line-height:1.6;overflow-wrap:anywhere}.visitor-details{max-height:140px;overflow:auto}
.identity-global-error{position:fixed;bottom:65px;left:10%;right:10%;z-index:100;background:white;color:#a53d46;padding:16px;font-size:14px}
@media(max-width:700px){.screen.identity-screen{padding:100px 6vw 80px;align-items:flex-start}.identity-card{padding:22px}.identity-card h1{font-size:29px}.identity-coordinate{display:none}.visitor-profile{bottom:65px;left:6vw;right:6vw;padding:10px 12px;gap:12px;max-width:none}.visitor-details{max-height:110px}.visitor-name strong{font-size:16px}.console-footer{display:none!important}}
@media(max-height:650px) and (min-width:701px){.visitor-profile{bottom:55px;left:2vw;max-width:300px}.visitor-details{max-height:80px}.screen.identity-screen{align-items:flex-start}}
@media(min-width:701px){
  .screen.identity-screen{padding:76px 10vw 64px;flex-direction:column;align-items:flex-start;justify-content:flex-start;min-height:0}
  .identity-card{flex-shrink:0;width:min(100%,480px);margin:auto 0;padding:24px 30px}
  .identity-card h1{font-size:30px;line-height:1.25;margin:12px 0}
  .identity-card .identity-intro{margin:10px 0;line-height:1.6}
  .identity-card .identity-name{margin:8px 0}
  .identity-card label{margin:12px 0 7px}
  .identity-card .identity-helper{margin-top:12px;line-height:1.6}
  .identity-primary,.identity-secondary{margin-top:14px}
  .identity-error{margin:8px 0;min-height:0}
  .identity-error:empty{display:none}
  .identity-actions{margin-top:8px}
  .identity-coordinate{position:fixed;right:4vw;bottom:75px;pointer-events:none}
}
@media(min-width:701px) and (max-height:700px){.screen.identity-screen{padding-top:58px;padding-bottom:54px}.identity-coordinate{display:none}.identity-card{padding:18px 26px}.identity-card h1{font-size:27px}}
body[data-screen=gallery]{background:#fafaf8;color:#171717;overflow:hidden;--font:FuturaSite,ArchiveCN,'Microsoft YaHei',sans-serif}
body[data-screen=gallery]:before,body[data-screen=gallery]:after,body[data-screen=gallery]>.site-header,body[data-screen=gallery] #particles,body[data-screen=gallery] #logo,body[data-screen=gallery] .site-header,body[data-screen=gallery] .site-footer{display:none}
.screen.gallery-screen{height:100%;display:block;overflow-y:auto;overflow-x:hidden;padding:0 4vw;text-align:left;cursor:default;box-sizing:border-box;color:#171717;background:#fafaf8;animation:gallery-reveal .6s ease both;font-family:FuturaSite,ArchiveCN,'Microsoft YaHei',sans-serif;scroll-behavior:smooth}
@keyframes gallery-reveal{from{opacity:0}to{opacity:1}}
.gallery-screen *{box-sizing:border-box}.gallery-screen a{color:inherit;text-decoration:none}.gallery-screen button,.gallery-screen input,.gallery-screen select,.gallery-screen textarea{font:inherit;border-radius:0}.gallery-screen button{cursor:pointer}.gallery-screen a:focus-visible,.gallery-screen button:focus-visible,.gallery-screen summary:focus-visible{outline:2px solid #171717;outline-offset:5px}.gallery-screen button:disabled{opacity:.55;cursor:wait}.gallery-screen h1,.gallery-screen h2,.gallery-screen p{margin:0}.gallery-screen h1,.gallery-screen h2{font-weight:500;letter-spacing:-.055em}.gallery-screen p{font-size:16px;line-height:1.8}.gallery-screen small{font-size:13px;line-height:1.8}.gallery-screen #gallery-content{outline:none;min-height:55vh}
.g-header{display:flex;align-items:center;gap:45px;min-height:110px;border-bottom:1px solid #161616}.g-brand{display:flex;align-items:center;gap:18px;flex:1}.g-brand img{width:64px;height:57px;object-fit:contain;filter:brightness(0);opacity:1}.g-brand span{font:22px/1.15 Space,Arial,sans-serif;letter-spacing:.02em}.g-brand b{font-weight:400;font-size:11px;letter-spacing:.2em}.g-header nav{display:flex;gap:25px;font-size:14px}.g-header nav a{border-bottom:1px solid transparent;padding:10px 0}.g-header nav a:hover{border-color:#171717}.g-return{display:flex;align-items:center;gap:10px;background:none;border:0;font-size:14px;padding:10px 0 10px 20px}.g-return i{width:30px;height:30px;background:#171717;clip-path:polygon(0 0,100% 0,100% 50%,100% 100%,0 100%,0 50%);transition:clip-path .4s cubic-bezier(.2,.8,.2,1)}.g-return:hover i,.g-return:focus-visible i{clip-path:polygon(50% 0,93.301% 25%,93.301% 75%,50% 100%,6.699% 75%,6.699% 25%)}
.g-welcome{display:flex;align-items:baseline;justify-content:flex-end;gap:12px;flex-wrap:wrap;padding:20px 0 8px}.g-welcome p{font-size:16px}.g-welcome strong{font-weight:600}.g-welcome button{background:none;border:0;color:#626262;text-decoration:underline;text-underline-offset:4px;font-size:13px;padding:5px 0}.g-welcome small{color:#626262}.g-tag{font-size:12px;border:1px solid #bfbfba;padding:3px 6px;margin-right:5px}.g-loading,.g-empty{padding:65px 0;color:#6a6a65}
.g-title-row{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;padding:30px 0 40px}.g-title-row h1{font-size:clamp(64px,8.5vw,144px);line-height:1.1;letter-spacing:-.07em;white-space:nowrap}.g-title-row h1>span{font-weight:300;margin-left:.12em}.g-title-row sup{font:12px Space,sans-serif;letter-spacing:0;vertical-align:top;display:inline-block;padding-top:14px;margin-left:15px}.g-title-row p{font-size:15px;line-height:1.8;padding-bottom:7px}
.g-hero{display:grid;grid-template-columns:minmax(0,4.2fr) minmax(180px,1fr);gap:30px}.g-hero-picture{position:relative;background:#dadbd6;min-width:0;overflow:hidden}.g-slide-link{display:block;position:relative;height:100%;aspect-ratio:1.65}.g-slide-link img{width:100%;height:100%;object-fit:cover;transition:opacity .6s}.g-image-credit{position:absolute;left:17px;bottom:14px;background:#fafaf8e8;padding:5px 8px;font-size:12px;letter-spacing:.02em}.g-hero aside{border-top:1px solid #171717;padding-top:12px;display:flex;flex-direction:column;justify-content:space-between}.g-overline{font:12px/1.6 Space,Arial,sans-serif;letter-spacing:.12em}.g-hero-caption{margin-top:auto;padding:50px 0 30px}.g-hero-caption>span{font:13px Space,sans-serif;color:#74746e}.g-hero-caption h2{font-size:32px;line-height:1.45;margin:12px 0 20px;letter-spacing:-.025em}.g-hero-caption p{color:#6b6b65;font-size:13px;line-height:1.9}.g-slide-controls{display:flex;justify-content:space-between;border-top:1px solid #c9c9c3;border-bottom:1px solid #171717}.g-slide-controls button{border:0;background:none;min-width:44px;min-height:50px;font-size:18px}.g-slide-controls button[data-slide=pause]{font-size:12px}.g-slide-controls button:hover{background:#eeeee9}
.g-collections{display:grid;grid-template-columns:1fr 2.4fr;gap:8vw;margin:95px 0}.g-section-heading{border-top:1px solid #171717;padding-top:14px}.g-section-heading>span{font:12px Space,sans-serif;letter-spacing:.1em}.g-section-heading h2{font-size:36px;margin-top:22px}.g-collection-list{border-top:1px solid #171717}.g-collection-row{display:flex;align-items:center;gap:30px;padding:26px 0;border-bottom:1px solid #a8a8a1;font-size:clamp(25px,3.5vw,54px);line-height:1.25}.g-collection-row>span,.g-collection-row summary>span{font:12px Space,sans-serif;color:#74746e}.g-collection-row>a{flex:1;display:flex;align-items:center;flex-wrap:wrap;gap:15px}.g-collection-row>i,.g-collection-row summary>i{font-size:27px;font-style:normal;font-weight:300}.g-collection-row:hover{color:#65665d}.g-dropdown{display:block;padding:0}.g-dropdown summary{display:flex;align-items:center;gap:30px;padding:26px 0;list-style:none;cursor:pointer}.g-dropdown summary::-webkit-details-marker{display:none}.g-dropdown summary strong{flex:1;font-weight:400}.g-dropdown[open] summary i{transform:rotate(45deg)}.g-dropdown>div{display:flex;flex-wrap:wrap;gap:16px;padding:0 0 25px 45px}.g-dropdown>div a{display:flex;align-items:center;gap:10px;border:1px solid #b1b1a9;padding:10px 16px;font-size:19px}.g-dropdown>div a:hover{background:#171717;color:white}
.g-preview-note{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;padding:65px 0 80px;border-top:1px solid #171717}.g-preview-note h2{font-size:clamp(35px,4vw,64px);line-height:1.35;margin:20px 0}.g-preview-note p{color:#6b6b65;font-size:14px}.g-solid-link,.g-submit{display:inline-flex;justify-content:space-between;gap:40px;align-items:center;min-height:48px;padding:16px 22px;background:#171717;color:#fafaf8!important;border:1px solid #171717;font-size:15px;cursor:pointer}.g-solid-link:hover,.g-submit:hover{background:#41413b}.g-text-link{display:inline-block;border:0;border-bottom:1px solid #777;background:none;padding:8px 0;margin:15px 0;font-size:14px}.g-footer{display:flex;justify-content:space-between;align-items:center;gap:25px;border-top:1px solid #171717;padding:28px 0 35px;font-size:12px;color:#55564f}.g-footer>div{display:flex;gap:24px}.g-footer>span:last-child{font-family:Space,sans-serif;letter-spacing:.08em}.g-footer a:hover{text-decoration:underline}
.g-page-intro{padding:55px 0 45px}.g-page-intro h1{font-size:clamp(45px,6vw,86px);line-height:1.35;margin:15px 0}.g-page-intro p{color:#6b6b65}.g-album-index{display:flex;gap:12px;flex-wrap:wrap;border-top:1px solid #aaa99f;border-bottom:1px solid #aaa99f;padding:16px 0;margin-bottom:55px}.g-album-index a{padding:9px 14px;font-size:14px}.g-album-index a.current,.g-album-index a:hover{background:#171717;color:white}.g-photo-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px 7vw;align-items:start;margin-bottom:90px}.g-photo-card.g-offset{padding-top:70px}.g-photo-card a{display:block}.g-photo-frame{overflow:hidden;background:#deded8;aspect-ratio:1.35}.g-offset .g-photo-frame{aspect-ratio:.85}.g-photo-frame img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.8,.2,1)}.g-photo-card a:hover img,.g-photo-card a:focus-visible img{transform:scale(1.035)}.g-card-caption{display:flex;align-items:baseline;gap:15px;border-top:1px solid #181818;margin-top:18px;padding-top:13px}.g-card-caption>span{font:12px Space,sans-serif}.g-card-caption h2{font-size:23px;flex:1;letter-spacing:-.025em}.g-photo-card p{font-size:13px;color:#73736b;margin-top:10px}.g-personal{display:inline-block;background:#e8f18d;color:#262b0d;padding:5px 8px;font-size:12px;letter-spacing:0;line-height:1.4}.is-mine{background:linear-gradient(transparent 55%,#e8f18d 55%);width:fit-content}
.g-breadcrumb{display:flex;gap:15px;flex-wrap:wrap;font-size:13px;margin:30px 0 40px}.g-breadcrumb a:hover{text-decoration:underline}.g-photo-detail{display:grid;grid-template-columns:minmax(0,2fr) minmax(260px,1fr);gap:6vw;margin-bottom:80px}.g-original-stage{width:100%;background:#e4e4df;display:grid;place-items:center;min-height:260px;overflow:hidden}.g-full-photo img{display:block;width:100%;height:auto;max-height:85vh;object-fit:contain}.g-original-controls{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:14px}.g-original-controls p,.g-full-photo>p{font-size:12px;color:#707066;margin:0}.g-original-controls .g-solid-link{min-height:42px;padding:10px 15px;gap:8px;flex-shrink:0}.g-original-controls .g-solid-link:disabled{background:#74746e;border-color:#74746e;cursor:default}.g-photo-info{padding-top:12px;border-top:1px solid #171717}.g-photo-info h1{font-size:clamp(32px,3.6vw,56px);line-height:1.4;margin:20px 0 12px;letter-spacing:-.03em}.g-photo-info dl{margin:35px 0}.g-photo-info dl>div{display:grid;grid-template-columns:80px 1fr;gap:15px;padding:20px 0;border-top:1px solid #d4d4cc;font-size:14px;line-height:1.8}.g-photo-info dt{color:#72726a}.g-photo-info dd{margin:0;overflow-wrap:anywhere}.g-detail-collections{display:flex;align-items:flex-start;gap:8px;flex-direction:column}.g-detail-collections a{border-bottom:1px solid #aaa;display:flex;gap:8px;flex-wrap:wrap;align-items:center}.g-subject{border:0;border-bottom:1px solid #777;padding:5px 0;background-color:transparent;display:block;font-size:16px!important}.g-subject span{margin-left:12px}.g-help{font-size:13px!important;color:#76766d;line-height:1.8!important}.g-coming{padding:65px 0 100px;min-height:70vh;position:relative}.g-coming-rule{height:12px;background:#171717;width:80px;margin:35px 0}.g-coming h1{font-size:clamp(65px,9vw,145px);line-height:1.25;font-weight:400}.g-coming h1 span{color:#9b9b92}.g-coming>p{margin:30px 0;color:#6d6d63}.g-coming>div:last-child{display:flex;align-items:center;gap:30px;margin-top:30px;flex-wrap:wrap}
.g-dialog{color:#171717;background:#fafaf8;border:1px solid #171717;width:min(580px,92vw);max-height:90vh;padding:40px;box-sizing:border-box;overflow:auto}.g-dialog::backdrop{background:#1515158f;backdrop-filter:blur(5px)}.g-dialog>button[data-g-close]{float:right;border:0;background:none;font-size:30px;min-width:40px;min-height:40px;line-height:1;margin:-15px -15px 10px 10px}.g-dialog h2{font-size:32px;margin:20px 0 8px}.g-dialog p{font-size:14px;line-height:1.8}.g-dialog.g-lightbox{width:94vw;height:94vh;max-width:none;max-height:none;background:#151515;padding:35px;border:0}.g-lightbox img{width:100%;height:100%;object-fit:contain}.g-lightbox>button[data-g-close]{position:absolute;right:28px;top:25px;color:#fff;background:#151515d0;z-index:2;margin:0}
.gallery-screen form label{display:block;font-size:14px;line-height:1.6;margin:16px 0}.gallery-screen form input:not([type=checkbox]):not([type=radio]),.gallery-screen form textarea,.gallery-screen form select{display:block;width:100%;border:1px solid #aaa99f;background:#fff;color:#171717;padding:11px 12px;font-size:16px;margin-top:7px;min-height:44px}.gallery-screen form textarea{min-height:100px;resize:vertical}.gallery-screen form input:focus,.gallery-screen form textarea:focus,.gallery-screen form select:focus{outline:2px solid #292922;outline-offset:2px}.gallery-screen fieldset{border:1px solid #b7b7ad;margin:22px 0;padding:10px 14px}.gallery-screen legend{font-size:14px;padding:0 5px}.gallery-screen form .g-check{display:flex;gap:9px;align-items:center;margin:10px 0;font-size:14px}.g-check input{width:17px;height:17px;accent-color:#171717}.gallery-screen [data-form-status]{font-size:14px;line-height:1.8;margin-top:16px;color:#654c2b;white-space:pre-wrap}.g-dialog .g-submit{width:100%;justify-content:center}.g-request{border:1px solid #c7c7be;padding:24px;margin:25px 0}.g-request header{display:flex;justify-content:space-between;gap:15px;font-size:13px}.g-request header strong{font-weight:500}.g-request h2{font-size:24px;margin:20px 0 12px}.g-request-reason{white-space:pre-wrap;overflow-wrap:anywhere;font-size:15px!important}.g-request small{display:block;color:#76766e;margin-top:15px}.g-form-actions{display:flex;gap:12px}.g-form-actions button{border:1px solid #171717;padding:12px 15px;background:#171717;color:white;font-size:14px}.g-form-actions button:last-child{background:transparent;color:#171717}.g-admin-layout{display:grid;grid-template-columns:1.1fr 1fr;gap:7vw;margin-bottom:70px}.g-admin-layout section>h2{font-size:26px;margin:25px 0}.g-admin-edit{padding:25px;border:1px solid #c7c7be}.g-admin-edit form{padding-bottom:30px;border-bottom:1px solid #c7c7be}.g-edit-links{display:flex;flex-direction:column;gap:12px;font-size:14px}
.gallery-threshold{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;background:#fafaf8;animation:threshold-out 1.35s both}.threshold-shape{width:160px;height:160px;background:#171717;clip-path:polygon(50% 0,93.301% 25%,93.301% 75%,50% 100%,6.699% 75%,6.699% 25%);animation:threshold-morph 1.05s cubic-bezier(.65,0,.2,1) both}.gallery-threshold>span{position:absolute;bottom:17vh;font:13px ArchiveCN,sans-serif;letter-spacing:.15em;color:#171717}@keyframes threshold-morph{0%,12%{clip-path:polygon(50% 0,93.301% 25%,93.301% 75%,50% 100%,6.699% 75%,6.699% 25%);transform:scale(1)}60%,100%{clip-path:polygon(0 0,100% 0,100% 100%,50% 100%,0 100%,0 0);transform:scale(1.8,.95)}}@keyframes threshold-out{0%,75%{opacity:1}100%{opacity:0;pointer-events:none}}
.g-users-table{overflow-x:auto;border-top:1px solid #171717;margin-bottom:25px}.g-users-table table{border-collapse:collapse;width:100%;font-size:14px;text-align:left}.g-users-table th,.g-users-table td{padding:18px 14px;border-bottom:1px solid #c7c7be;line-height:1.6}.g-users-table th{font-weight:500;background:#eeeee8}.g-users-table td:first-child{overflow-wrap:anywhere;min-width:100px}.g-users-table time{white-space:nowrap}.g-users-pages{display:flex;align-items:center;flex-wrap:wrap;gap:24px;margin:25px 0 60px;font-size:14px}.g-users-pages button{background:none;border:1px solid #171717;padding:10px 15px}.g-users-pages a{text-decoration:underline;text-underline-offset:4px}
@media(min-width:1600px){.screen.gallery-screen{padding:0 max(4vw,calc((100vw - 1500px)/2))}}
@media(max-width:800px){.screen.gallery-screen{padding:0 6vw}.g-header{min-height:85px;gap:20px}.g-brand{gap:10px}.g-brand img{width:45px;height:40px}.g-brand span{font-size:17px}.g-brand b{font-size:9px}.g-header nav{display:none}.g-return{padding-left:0;font-size:12px}.g-return i{width:24px;height:24px}.g-welcome{justify-content:flex-start;padding-top:18px;gap:7px 10px}.g-welcome p{font-size:15px}.g-welcome small{width:100%}.g-title-row{padding:28px 0}.g-title-row h1{font-size:clamp(44px,11vw,85px);white-space:normal}.g-title-row sup{display:none}.g-title-row p{display:none}.g-hero{display:block}.g-slide-link{aspect-ratio:1.12}.g-hero aside{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;border:0;padding:18px 0}.g-hero aside>.g-overline{display:none}.g-hero-caption{padding:0;margin:0}.g-hero-caption h2{font-size:24px;margin:8px 0}.g-hero-caption p{font-size:12px;max-width:200px}.g-slide-controls{align-self:end;border-top:0;border-bottom:1px solid #171717}.g-slide-controls button{min-width:37px}.g-image-credit{left:10px;bottom:10px;font-size:11px}.g-collections{display:block;margin:55px 0}.g-section-heading{display:flex;justify-content:space-between;align-items:center;padding:12px 0 24px}.g-section-heading h2{font-size:27px;margin:0}.g-collection-row,.g-dropdown summary{font-size:30px;gap:20px;padding:24px 0}.g-dropdown{padding:0}.g-dropdown>div{padding-left:35px}.g-dropdown>div a{font-size:17px}.g-preview-note{padding:40px 0 50px;display:block}.g-preview-note h2{font-size:35px}.g-preview-note>.g-solid-link{margin-top:30px}.g-footer{flex-wrap:wrap;padding:25px 0;font-size:12px;gap:20px}.g-footer>span:last-child{width:100%;font-size:10px}.g-page-intro{padding:35px 0}.g-page-intro h1{font-size:43px}.g-photo-grid{gap:40px 25px}.g-photo-card.g-offset{padding-top:40px}.g-card-caption{gap:8px}.g-card-caption h2{font-size:19px}.g-card-caption>span:first-child{display:none}.g-album-index{gap:6px;margin-bottom:35px}.g-album-index a{font-size:13px;padding:8px 11px}.g-photo-detail{display:block}.g-photo-info{margin-top:35px}.g-photo-info h1{font-size:36px}.g-full-photo img{max-height:none}.g-admin-layout{display:block}.g-admin-edit{padding:18px;margin-top:35px}.g-coming{padding:40px 0 60px}.g-coming h1{font-size:65px}.g-dialog{padding:28px}.g-dialog.g-lightbox{padding:20px}.g-personal{font-size:11px}.g-collection-row .g-personal{font-size:11px}}
@media(max-width:480px){.g-photo-grid{grid-template-columns:1fr}.g-photo-card.g-offset{padding-top:0}.g-offset .g-photo-frame{aspect-ratio:1.05}.g-hero-caption p{max-width:165px}.g-hero aside{gap:5px}.g-slide-controls button{min-width:33px}.g-welcome>div:empty{display:none}}
@media(prefers-reduced-motion:reduce){.gallery-screen *, .gallery-threshold,.threshold-shape{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* A gallery frame preserves the entire photograph, including portrait slides. */
.g-hero{align-items:stretch;gap:clamp(20px,2.5vw,40px)}
.g-hero-picture{background:#eeeee9;min-height:0}
.g-slide-link{display:grid;grid-template-rows:minmax(0,1fr) auto;gap:8px;width:100%;height:100%;aspect-ratio:auto;padding:12px}
.g-slide-link img{display:block;min-height:0;max-height:100%;object-fit:contain;object-position:center}
.g-image-credit{position:static;justify-self:start;background:none;padding:0;font-size:12px;line-height:1.5;color:#62625c}
.g-image-credit:empty{display:none}
.g-hero-caption{padding:24px 0}
.g-hero-caption h2{font-size:clamp(24px,2.2vw,36px);overflow-wrap:anywhere}
.g-hero-caption p{font-size:14px}
@media(min-width:801px){
  .g-header{min-height:84px;gap:30px}
  .g-brand img{width:52px;height:46px}
  .g-welcome{padding:12px 0 4px}
  .g-title-row{padding:16px 0 24px}
  .g-title-row h1{font-size:clamp(48px,5vw,80px);line-height:1.15}
  .g-hero{grid-template-columns:minmax(0,1fr) minmax(200px,240px);height:clamp(300px,calc(100svh - 290px),840px)}
  .g-collections{margin-top:64px}
}
@media(max-width:800px){
  .g-hero-picture{height:clamp(260px,55svh,560px)}
  .g-hero-caption{padding:0}
  .g-slide-link{padding:8px}
}

/* Keep the opening viewport dedicated to the work, not a second title block. */
.g-upload-box{margin:22px 0;padding:16px;border:1px solid #b7b7ad;background:#f2f2ed}.g-upload-box label{margin-top:0!important}.g-upload-box input[type=file]{background:transparent!important;border:0!important;padding:8px 0!important;font-size:14px!important}.g-upload-box input::file-selector-button{background:#171717;color:white;border:0;padding:10px 16px;margin-right:12px;cursor:pointer}.g-upload-preview{display:block;width:100%;max-height:280px;object-fit:contain;margin-top:14px}.g-upload-preview[hidden]{display:none}.g-upload-box [data-upload-status]{font-size:14px;line-height:1.7;overflow-wrap:anywhere;margin-top:10px}
.g-edit-photo-row{display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid #d4d4cc;padding:12px 0}.g-edit-photo-row>a{min-width:0;overflow-wrap:anywhere}.g-delete-photo{flex-shrink:0;background:none;border:1px solid #98635a;color:#884238;min-height:40px;padding:8px 12px;font-size:14px}.g-delete-photo:hover{background:#f4e9e6}.g-form-actions .g-danger{background:#884238;border-color:#884238}.g-delete-notice{padding:16px 0;border-bottom:1px solid #aaa;color:#445643}
.g-collection-admin{border-top:1px solid #aaa99f;margin-bottom:32px}.g-collection-admin details{border-bottom:1px solid #aaa99f}.g-collection-admin summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:17px 0;font-size:18px;cursor:pointer;list-style:none}.g-collection-admin summary::-webkit-details-marker{display:none}.g-collection-admin summary span{font-size:13px;border:1px solid #9f9f96;padding:6px 10px}.g-collection-admin details[open] summary span{background:#171717;color:#fff}.g-collection-admin form{padding:0 0 20px;border-bottom:0}.g-collection-admin form label{margin-top:0}
.g-admin-collection-list{padding:0 0 18px}.g-admin-collection-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 0;border-top:1px solid #d4d4cc;font-size:14px}.g-admin-collection-row button{background:transparent;border:1px solid #98635a;color:#884238;padding:7px 11px}.g-admin-collection-row button:hover{background:#f4e9e6}
.g-masthead{display:flex;align-items:center;justify-content:space-between;gap:12px 28px;padding:12px 0;min-height:64px}
.g-compact-title{display:flex;align-items:baseline;gap:20px;flex-shrink:0}
.g-compact-title h1{font-size:30px;line-height:1.2;white-space:nowrap}
.g-compact-title h1 span{font-weight:300;margin-left:.12em}
.g-compact-title p{font-size:13px;line-height:1.6;color:#6b6b65}
.g-masthead [data-g-welcome]{min-width:0}
.g-masthead .g-welcome{padding:0;gap:5px 12px}
.g-masthead .g-welcome p{font-size:14px}
@media(min-width:801px){
  .g-header{min-height:64px}
  .g-brand img{width:44px;height:39px}
  .g-brand span{font-size:19px}
  .g-hero{height:var(--hero-room,calc(100svh - 148px));grid-template-columns:minmax(0,1fr) minmax(170px,190px);gap:24px}
  .g-slide-link{padding:6px;gap:6px}
  .g-hero-caption h2{font-size:26px}
}
@media(max-width:1100px){.g-compact-title{display:block}.g-compact-title p{margin-top:4px}}
@media(max-width:800px){
  .g-masthead{flex-wrap:wrap;gap:8px;padding:12px 0}
  .g-compact-title{display:flex;flex-wrap:wrap;gap:4px 12px}
  .g-compact-title h1{font-size:26px}
  .g-compact-title p{font-size:12px;margin:0}
  .g-masthead .g-welcome{justify-content:flex-start}
  .g-hero-picture{height:clamp(300px,65svh,680px)}
}
body[data-screen="directory"]{overflow:auto;background:#f6faff;color:#173551}
body[data-screen="directory"] #logo,body[data-screen="directory"] .site-header,body[data-screen="directory"] .site-footer{display:none}
.screen.directory-screen{position:relative;display:block;height:100%;overflow:auto;text-align:left;cursor:default;padding:36px clamp(18px,4vw,72px) 70px;max-width:1600px;margin:auto;font-size:16px;user-select:text}
.d-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid #b9cfe0;padding-bottom:22px}
.d-heading p{font:12px FuturaSite,ArchiveCN,sans-serif;letter-spacing:.16em;color:#426987;margin:0 0 10px}.d-heading h1{font-size:30px;font-weight:500;margin:0}
.directory-screen button,.directory-screen a{font:inherit;cursor:pointer;color:#244f71;background:transparent;border:1px solid #a7bfd1;padding:9px 14px;border-radius:3px;text-decoration:none}
.directory-screen button:hover{background:#deebf5}.directory-screen button:disabled{opacity:.5;cursor:wait}.directory-screen .d-primary{background:#285f85;color:white;border-color:#285f85}
.directory-screen input,.directory-screen textarea,.directory-screen select{display:block;width:100%;box-sizing:border-box;font:inherit;color:#173551;background:white;border:1px solid #9cb8ce;border-radius:3px;padding:10px;margin:6px 0;letter-spacing:normal}
.directory-screen label{display:block;font-size:14px}.directory-screen small,.d-help{color:#48677f;font-size:13px;line-height:1.65}.d-summary{display:flex;gap:32px;padding:24px 0}.d-summary strong{font-size:24px;font-weight:500;margin-right:8px}
.d-tabs{display:flex;gap:8px;border-bottom:1px solid #b9cfe0;padding-bottom:12px}.d-tabs [aria-pressed="true"]{background:#d8e9f6;border-color:#638dac}.d-status:empty{display:none}.d-status{color:#255d79}.d-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:20px}.d-toolbar label{max-width:400px;flex:1}.d-help{margin:10px 0 16px}
.d-table-wrap{overflow-x:auto;background:#fff;border:1px solid #c0d3e2}.d-table-wrap table{width:100%;border-collapse:collapse;text-align:left;font-size:14px}.d-table-wrap th{color:#4b6c85;font-size:13px;font-weight:500;white-space:nowrap;background:#edf4fa}.d-table-wrap td,.d-table-wrap th{padding:16px;border-bottom:1px solid #e0eaf1;vertical-align:top}.d-table-wrap td{min-width:100px;max-width:330px;overflow-wrap:anywhere}.d-table-wrap td:last-child{min-width:70px}.d-table-wrap small{display:block;margin-top:6px}.d-table-wrap strong{font-weight:500}
.d-row-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.directory-screen .d-danger{color:#9d342d;border-color:#d5aaa5}.directory-screen .d-danger:hover{color:#7d201a;background:#f8e5e3;border-color:#c47e77}.d-locked{font-size:12px;color:#627d90;white-space:nowrap}
.d-chip{display:inline-block;padding:3px 8px;background:#eef5fb;border:1px solid #d4e4f0;margin:0 5px 5px 0;border-radius:3px;line-height:1.5}.d-muted{color:#6b7e8e}.d-warning,.d-error{color:#a44424;line-height:1.6}.d-tag-add{display:flex;gap:12px;align-items:center;max-width:440px;margin:20px 0}.d-tag-add label{flex:1}.d-tags-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}.d-tag-card{padding:20px;background:white;border:1px solid #c0d3e2}.d-tag-card p{font-size:13px;color:#526f85}.d-tag-card button{font-size:13px;margin:0 6px 6px 0}
.d-dialog{width:min(720px,calc(100vw - 32px));max-height:88dvh;box-sizing:border-box;border:1px solid #9ebdd3;border-radius:6px;padding:28px;color:#173551;background:#f8fbfe}.d-dialog::backdrop{background:#152d4a80;backdrop-filter:blur(5px)}.d-dialog-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.d-dialog h2{font-size:22px;font-weight:500;margin:0}.d-fields{display:grid;grid-template-columns:1fr 1fr;gap:20px}.d-dialog label{margin-bottom:16px}.d-dialog textarea{resize:vertical}.d-tag-options{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:20px}.d-tag-options button{font-size:13px}.d-dialog .d-check{display:flex;align-items:flex-start;gap:10px;line-height:1.6}.d-check input{width:auto;margin-top:5px;flex:none}
@media(max-width:640px){.d-heading h1{font-size:24px}.d-summary{gap:16px;flex-wrap:wrap}.d-summary strong{font-size:20px}.d-fields{grid-template-columns:1fr;gap:0}.d-dialog{padding:20px}.d-tabs button{padding:8px;font-size:14px}.d-table-wrap td,.d-table-wrap th{padding:12px}.d-heading{gap:12px}}
body[data-screen="character"] #logo,body[data-screen="character"] .site-header,body[data-screen="character"] .site-footer,body[data-screen="character"] #particles{display:none}
.screen.character-screen{display:block;overflow:hidden;cursor:default;text-align:left;background:#07131e;color:#e8f4fc;--pointer-x:50%;--pointer-y:35%;--rim-x:0px;font-family:FuturaSite,ArchiveCN,'Microsoft YaHei',sans-serif}
.bridge-grid{position:absolute;inset:0;background:linear-gradient(90deg,transparent 49.8%,#688fa715 50%,transparent 50.2%),repeating-linear-gradient(0deg,transparent 0 79px,#7696b00b 80px);border:24px solid #0c1d2b;box-shadow:inset 0 0 100px #020911}
.bridge-grid:after{content:'';position:absolute;inset:18px;border:1px solid #88b9d32b;clip-path:polygon(0 0,30% 0,30% 1%,70% 1%,70% 0,100% 0,100% 100%,0 100%)}
.bridge-spotlight{position:absolute;inset:0;background:radial-gradient(ellipse at var(--pointer-x) var(--pointer-y),#84cad02b,transparent 48%),conic-gradient(from 160deg at 50% -10%,transparent,#7cd1e019 9deg,#b5e7ff26 20deg,#7cd1e019 31deg,transparent 40deg);pointer-events:none}
.character-heading{position:absolute;left:6%;top:8%;z-index:4}.character-heading>span,.character-spec>span,.character-coming>span{font:12px FuturaSite,ArchiveCN,sans-serif;letter-spacing:.2em;color:#8faebf}.character-heading h1{font-size:clamp(36px,5vw,76px);font-weight:400;letter-spacing:.18em;margin:10px 0}.character-heading p{font-size:12px;letter-spacing:.12em;color:#98b7c9}
.character-credit{position:absolute;right:6%;top:3%;display:flex;flex-direction:column;align-items:flex-end;gap:5px;font-size:14px;color:#d8edf6;z-index:7;text-shadow:0 0 10px #07131e}.character-credit img{width:52px;height:54px;object-fit:contain;pointer-events:none;filter:drop-shadow(0 0 7px #8feaff55)}
.character-stage{position:absolute;left:25%;right:24%;top:8%;bottom:12%;display:flex;align-items:center;justify-content:center;isolation:isolate}
.character-float{position:relative;height:100%;width:100%;animation:character-float 7s ease-in-out infinite;filter:drop-shadow(0 12px 24px #0008)}
.character-float img{position:absolute;width:100%;height:100%;object-fit:contain;pointer-events:none;-webkit-user-drag:none}.character-energy{animation:character-breathe 3.8s ease-in-out infinite;filter:blur(5px) drop-shadow(0 0 12px #28ffff);mix-blend-mode:screen}.character-rim{z-index:-1;filter:brightness(0) invert(1) drop-shadow(var(--rim-x) -2px 5px #adf9ff);opacity:.4;transform:translateX(var(--rim-x));mask-image:radial-gradient(ellipse at var(--pointer-x) var(--pointer-y),black,transparent 65%)}
.character-shield{position:absolute;inset:0;z-index:4;touch-action:pan-y;-webkit-touch-callout:none}.character-shield svg{width:100%;height:100%;fill:none;stroke:#7cfcff;stroke-width:.5;opacity:0;transition:opacity .4s;mask-image:radial-gradient(circle at var(--pointer-x) var(--pointer-y),#000,transparent 40%)}.character-shield:hover svg,.character-shield:active svg{opacity:.5}
.display-plinth{position:absolute;bottom:-3%;left:10%;right:10%;height:13%;border-radius:50%;border:1px solid #64d8e364;box-shadow:0 0 25px #4fd5ea17,inset 0 0 45px #70daec15;z-index:-2;transform:perspective(400px) rotateX(45deg)}
.character-spec{position:absolute;left:6%;bottom:13%;z-index:5}.character-spec dl{font-size:14px;line-height:2;margin:16px 0 2px}.character-spec dl div{display:flex;gap:24px}.character-spec dt{color:#88a4b7}.character-spec dd{margin:0}.character-palette{width:155px;height:142px;margin-left:-17px}
.character-throttle{position:absolute;right:6%;top:31%;width:155px;padding-left:38px;z-index:5}.throttle-title{font-size:12px;letter-spacing:.2em;color:#829eaf;display:block;margin:0 0 25px}.character-throttle button{display:flex;justify-content:space-between;align-items:center;width:100%;height:64px;background:none;border:0;border-bottom:1px solid #7999af25;color:#7e99ac;cursor:pointer;font:14px inherit;padding:0}.character-throttle button b{font-weight:400}.character-throttle button span{font-size:12px}.character-throttle button[aria-current="page"]{color:#83fbff;text-shadow:0 0 14px #40eeef66}.throttle-track{position:absolute;left:3px;top:49px;bottom:20px;width:5px;background:#020a10;box-shadow:1px 0 0 #65889b55}.throttle-track i{position:absolute;left:-12px;top:calc(17px + var(--detent)*64px);width:30px;height:27px;background:linear-gradient(#476379,#162939 45%,#6c8a9b 47%,#253f50 54%,#101e2b);border:1px solid #7ac7d5;box-shadow:0 0 14px #25dfff29;transition:top .45s}.throttle-idle{margin-top:6px}
.character-footer{position:absolute;left:6%;right:6%;bottom:4%;display:flex;align-items:center;justify-content:space-between;z-index:5;border-top:1px solid #6c9aaf36;padding-top:14px}.character-footer button{background:none;border:0;color:#c1d3df;font-size:14px;cursor:pointer}.character-footer span{font:12px FuturaSite,ArchiveCN,sans-serif;letter-spacing:.15em;color:#6f8b9e}.character-footer img{width:68px;height:40px;object-fit:contain;filter:brightness(0) invert(1);pointer-events:none}.character-coming{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}.character-coming h2{font-weight:300;font-size:42px;letter-spacing:.3em}
.character-transition{position:fixed;inset:0;z-index:9999;background:#102433ed;perspective:1000px;animation:transition-curtain 1.9s both;pointer-events:all}.flip-cell{position:absolute;transform:translate(-50%,-50%);perspective:900px}.flip-inner{width:100%;height:100%;position:relative;transform-style:preserve-3d;animation:hex-flip 1.5s cubic-bezier(.45,0,.25,1) var(--delay) both}.flip-face{position:absolute;inset:0;display:grid;place-items:center;background:#d8e6ed;color:#28485a;font-size:14px;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);backface-visibility:hidden;border:none}.flip-back{transform:rotateY(180deg)}.palette-face{background:var(--swatch);box-shadow:inset 0 0 50px #0003}
.engineering-leaders{fill:none;stroke:#688b9f;stroke-width:.7;pointer-events:none}.engineering-leaders text{fill:#527184;stroke:none;font-size:12px;letter-spacing:1px}
img{ -webkit-user-drag:none;-webkit-touch-callout:none }
.throttle-track{touch-action:none;cursor:ns-resize}.throttle-track:before{content:'';position:absolute;inset:-8px -15px}.throttle-track:focus-visible{outline:2px solid #88faff;outline-offset:12px}
.flip-cell:first-child .palette-face{background:repeating-linear-gradient(30deg,#071631 0 28px,#ffe637 28px 35px,#1cadd7 35px 52px)}
.g-slide-link,.g-photo-frame,[data-g-enlarge]{position:relative;isolation:isolate}.g-slide-link:after,.g-photo-frame:after,[data-g-enlarge]:after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(60deg,transparent 49.85%,#7cebf960 50%,transparent 50.15%),linear-gradient(120deg,transparent 49.85%,#7cebf950 50%,transparent 50.15%);opacity:0;transition:opacity .3s;-webkit-touch-callout:none}.g-slide-link:hover:after,.g-photo-frame:hover:after,[data-g-enlarge]:hover:after{opacity:.4}.gallery-screen img{pointer-events:none}.g-lightbox img{-webkit-touch-callout:none}
@keyframes character-float{50%{transform:translateY(-12px)}}@keyframes character-breathe{0%,100%{opacity:.2}50%{opacity:.8}}@keyframes hex-flip{0%{transform:rotateY(0)}45%,58%{transform:rotateY(180deg)}100%{transform:rotateY(360deg)}}@keyframes transition-curtain{0%{opacity:0}12%,78%{opacity:1}100%{opacity:0}}
@media(max-width:700px){.character-heading{left:7%;top:5%}.character-heading h1{font-size:38px}.character-heading p{display:none}.character-credit{right:7%;top:5%;gap:5px;font-size:12px}.character-credit img{width:30px;height:34px}.character-stage{left:5%;right:22%;top:18%;bottom:27%}.character-spec{left:7%;bottom:11%;display:flex;align-items:center;gap:16px}.character-spec>span{display:none}.character-spec dl{font-size:12px;line-height:1.7}.character-spec dl div{gap:12px}.character-palette{width:94px;height:95px;margin:0}.character-throttle{right:5%;top:30%;width:84px;padding-left:25px}.character-throttle button{height:58px;align-items:flex-start;justify-content:center;flex-direction:column;gap:5px}.throttle-track i{top:calc(14px + var(--detent)*58px);width:22px;left:-8px}.throttle-title{font-size:12px;letter-spacing:0}.character-footer{bottom:3%}.character-footer span{display:none}.character-footer img{width:45px;height:28px}.bridge-grid{border-width:10px}.engineering-leaders text{font-size:10px}}
@media(prefers-reduced-motion:reduce){.character-float,.character-energy,.flip-inner,.character-transition{animation:none}.character-transition{opacity:1}}
/* Torso anchor in the supplied alpha-cropped image: x=38%, excluding tail. */
.character-screen{--safe-edge:58px;--art-width:min(64vw,69vh)}
.character-stage{left:0;right:0;top:10%;bottom:16%;display:block}
.character-float{position:absolute;left:50%;top:50%;width:var(--art-width);height:auto;aspect-ratio:var(--art-aspect,2118/2430);transform:translate(var(--torso-shift,-38%),-50%);animation:torso-float 7s ease-in-out infinite}
.character-float .character-art{animation:character-digital-reveal 1.3s steps(1,end) both,character-digital-idle 5.2s steps(1,end) 1.3s infinite}.character-float .character-energy{animation:character-digital-reveal 1.3s steps(1,end) both,character-breathe 3.2s ease-in-out 1.3s infinite}.character-float img{clip-path:none}
.character-arriving .character-float .character-art{animation-delay:.82s,2.12s}.character-arriving .character-float .character-energy{animation-delay:.82s,2.12s}
@keyframes character-digital-idle{0%,18%,22%,41%,45%,64%,69%,86%,91%,100%{translate:0;filter:none;opacity:1;clip-path:inset(0)}18.4%{translate:2px 0;filter:drop-shadow(-2px 0 #5bf4f188) drop-shadow(2px 0 #506eff55);clip-path:polygon(0 0,100% 0,100% 27%,0 27%,0 31%,100% 31%,100% 100%,0 100%)}20%{translate:-1px 0;opacity:.92;clip-path:inset(0)}41.5%{translate:-2px 0;filter:drop-shadow(2px 0 #98c6ff77);clip-path:polygon(0 0,100% 0,100% 54%,0 54%,0 61%,100% 61%,100% 100%,0 100%)}43%{translate:1px 0;opacity:.95;clip-path:inset(0)}65%{translate:2px 0;filter:drop-shadow(-1px 0 #5bf4f177);clip-path:polygon(0 0,100% 0,100% 74%,0 74%,0 82%,100% 82%,100% 100%,0 100%)}67%{translate:0;clip-path:inset(0)}87%{translate:-1.5px 0;filter:drop-shadow(1px 0 #73eeff66);opacity:.94}89%{translate:0;filter:none;opacity:1}}
.character-stage,.character-float{overflow:visible}.character-float:after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at var(--pointer-x) var(--pointer-y),#e8ffff 0,#6ff8ff 14%,transparent 40%);-webkit-mask:var(--character-mask,url('../character/front.png')) center/contain no-repeat;mask:var(--character-mask,url('../character/front.png')) center/contain no-repeat;mix-blend-mode:screen;opacity:.25;filter:blur(1px) drop-shadow(var(--rim-x) -2px 4px #72efff);transition:opacity .25s}.character-shield svg{mask-image:radial-gradient(ellipse closest-side at center,#0008 0%,#0003 45%,transparent 78%)}
.character-spec .character-palette{position:fixed;left:6%;top:50%;transform:translateY(-50%);margin:0}
@keyframes character-digital-reveal{0%{opacity:0;clip-path:inset(48% 0 49%);filter:brightness(2) hue-rotate(60deg)}12%{opacity:.75;clip-path:polygon(0 10%,100% 10%,100% 28%,0 28%,0 52%,100% 52%,100% 66%,0 66%);translate:-7px 0}24%{opacity:.35;clip-path:inset(15% 0 40%);translate:8px 0}38%{opacity:.9;clip-path:polygon(0 0,100% 0,100% 35%,0 35%,0 43%,100% 43%,100% 100%,0 100%);translate:-3px 0;filter:brightness(1.8) hue-rotate(30deg)}52%{opacity:.25;clip-path:inset(0);translate:4px 0}66%{opacity:1;clip-path:inset(0);translate:0;filter:brightness(1.3)}77%{opacity:.75;clip-path:polygon(0 0,100% 0,100% 69%,0 69%,0 73%,100% 73%,100% 100%,0 100%);translate:2px 0}86%,100%{opacity:1;clip-path:inset(0);translate:0}}
.display-plinth{left:50%;right:auto;bottom:auto;top:calc(50% + var(--art-width)*.54);width:calc(var(--art-width)*.86);height:calc(var(--art-width)*.15);transform:translate(-50%,-50%);border-radius:50%}
.character-footer{left:max(6%,var(--safe-edge));right:max(6%,var(--safe-edge));bottom:max(var(--safe-edge),env(safe-area-inset-bottom));padding-top:10px;min-height:40px}
.character-spec{bottom:max(19%,130px)}
.character-throttle{right:max(5%,var(--safe-edge));top:50%;transform:translateY(-50%);width:165px;height:min(72vh,680px);min-height:430px;padding:62px 15px 22px 60px;border:1px solid #5e829246;border-radius:5px;background:linear-gradient(100deg,#162935dd,#081721e8);box-shadow:inset 0 1px #a6c7d41f,0 12px 25px #0003;display:flex;flex-direction:column}
.character-throttle:before,.character-throttle:after{content:'⊕';position:absolute;left:8px;color:#58717d;font:12px FuturaSite,ArchiveCN,sans-serif}.character-throttle:before{top:7px}.character-throttle:after{bottom:7px}
.character-throttle{box-sizing:content-box}.character-throttle button,.throttle-title{white-space:nowrap}
.throttle-title{margin-bottom:16px;letter-spacing:.1em}.throttle-title small{display:block;font:10px FuturaSite,ArchiveCN,sans-serif;letter-spacing:.2em;margin-top:4px;color:#698797}
.character-throttle button{height:auto;min-height:0;flex:1;flex-direction:column;align-items:flex-start;justify-content:center;gap:3px}.character-throttle button b{font-size:20px;letter-spacing:.08em}.character-throttle button span{font-size:10px;letter-spacing:.08em}.throttle-idle{margin-top:0}
.throttle-track{left:26px;top:62px;bottom:22px;width:9px;border-radius:5px;background:linear-gradient(90deg,#000,#152a38,#000);box-shadow:inset 0 0 5px #000,1px 0 #7395a366}
.throttle-track:after{content:'';position:absolute;left:14px;top:0;bottom:0;width:9px;background:repeating-linear-gradient(to bottom,#7894a580 0 1px,transparent 1px 8px);pointer-events:none}
.throttle-track i{top:var(--detent-y);transform:translateY(-50%);left:-18px;width:43px;height:30px;border-radius:5px 5px 3px 3px;border:1px solid #8aadb8;background:linear-gradient(#78939e,#293d48 20%,#0d1a22 49%,#314b5b 53%,#20323b 85%,#65828c);box-shadow:0 5px 7px #000b,inset 0 1px #dcf9ff66;z-index:2}
.throttle-track i:before{content:'';position:absolute;left:8px;right:8px;top:7px;height:9px;background:repeating-linear-gradient(90deg,#76909b 0 1px,#1b2e38 1px 4px);border-radius:2px}.throttle-track i em{position:absolute;left:4px;right:4px;bottom:5px;height:2px;background:#6ceaf0;box-shadow:0 0 6px #6ceaf0}
@keyframes torso-float{0%,100%{transform:translate(var(--torso-shift,-38%),-50%)}50%{transform:translate(var(--torso-shift,-38%),calc(-50% - 10px))}}
@media(max-width:700px){.character-screen{--safe-edge:40px;--art-width:min(68vw,58vh)}.character-stage{left:0;right:0;top:15%;bottom:25%}.character-throttle{right:30px;top:50%;width:65px;height:min(64vh,520px);min-height:390px;padding:58px 8px 16px 37px}.character-throttle button b{font-size:17px}.character-throttle button span{font-size:9px}.throttle-title{font-size:10px;letter-spacing:0}.throttle-title small{font-size:8px}.throttle-track{left:16px;top:58px;bottom:16px;width:6px}.throttle-track i{width:28px;left:-11px;top:var(--detent-y)}.throttle-track:after{left:9px;width:5px}.character-spec{bottom:calc(var(--safe-edge) + 58px)}.character-footer{left:var(--safe-edge);right:var(--safe-edge);bottom:var(--safe-edge);min-height:30px}.character-heading{top:var(--safe-edge)}.character-credit{top:var(--safe-edge)}}
@media(max-height:600px) and (min-width:701px){.character-screen{--safe-edge:50px;--art-width:61vh}.character-throttle{height:76vh;min-height:390px;padding-top:52px}.throttle-track{top:52px}.character-heading h1{font-size:38px}.character-spec{bottom:115px}.character-palette{width:90px;height:80px}.character-spec dl{line-height:1.6}.character-throttle button b{font-size:17px}}
@media(prefers-reduced-motion:reduce){.character-float,.character-float img,.character-float .character-energy{animation:none}}
@media(max-width:700px){.character-spec .character-palette{left:5%;width:80px;height:84px}.character-spec{display:block}}

/* One shared column reserves real space for both marks and the control panel.
   The middle row can shrink; neither the logos nor the footer cross its border. */
.character-screen{--rail-width:clamp(180px,17vw,240px);--rail-gap:24px;--rail-edge:max(6%,var(--safe-edge))}
.character-right-rail{position:absolute;top:var(--safe-edge);right:var(--rail-edge);bottom:var(--safe-edge);width:var(--rail-width);display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:var(--rail-gap);z-index:6;isolation:isolate;background:#07131e}
.character-heading p{display:flex;flex-direction:column;align-items:flex-start;gap:7px}.character-heading p small{font-size:10px;line-height:1;letter-spacing:.24em;color:#6f91a4}
.character-right-rail .character-credit,.character-owner-mark{box-sizing:border-box;width:100%;min-height:76px;border:1px solid #9cd8e331;border-radius:14px;background:linear-gradient(135deg,rgba(34,65,82,.5),rgba(8,24,35,.5));box-shadow:inset 0 1px rgba(218,249,255,.12),0 12px 32px rgba(0,0,0,.2);backdrop-filter:blur(14px) saturate(125%);-webkit-backdrop-filter:blur(14px) saturate(125%);overflow:hidden}
.character-right-rail .character-credit{position:static;flex-direction:row;align-items:center;justify-content:center;gap:12px;padding:10px 14px;font-size:14px;line-height:1.4;text-align:center;text-shadow:none;white-space:nowrap}
.character-right-rail .character-credit img{display:block;width:46px;height:48px;flex:0 0 auto}
.character-right-rail .character-throttle{position:relative;inset:auto;transform:none;box-sizing:border-box;width:100%;height:100%;min-height:0;padding:64px 18px 18px 62px;margin:0;background:linear-gradient(105deg,#162935,#0b1a25);box-shadow:inset 0 1px #a6c7d41f}
.character-right-rail .throttle-title{position:absolute;top:20px;left:62px;right:12px;margin:0;line-height:1.3;letter-spacing:.06em}
.character-right-rail .throttle-track{top:64px;bottom:18px;left:27px}
.character-right-rail .character-throttle button{flex:1 1 0;height:auto;min-height:0;border:0;margin:0;padding:0;gap:4px}
.character-right-rail .character-throttle button span{line-height:1.2;color:#8faebe}
.character-right-rail .character-throttle button b{line-height:1.3}
.character-owner-mark{display:flex;align-items:center;justify-content:center;padding:10px 14px}
.character-owner-mark img{display:block;width:68px;height:44px;object-fit:contain;filter:brightness(0) invert(1);pointer-events:none}
.character-screen .character-footer{right:calc(var(--rail-edge) + var(--rail-width) + var(--rail-gap));gap:20px}
.character-footer span{white-space:nowrap;font-size:10px;letter-spacing:.1em}
.version-v121{--art-width:min(68vw,72vh)}
.version-v121 .character-energy{filter:blur(6px) drop-shadow(0 0 15px #5cf4f1);mix-blend-mode:screen}
.version-v121 .character-palette-bars{width:112px;height:130px;margin-left:0}
.version-v121 .character-credit img{width:58px;height:46px}
.character-screen .character-footer{height:48px;min-height:0;padding-top:0;box-sizing:border-box}.character-footer>span{display:none}
.character-version-switch{position:absolute;left:50%;bottom:max(var(--safe-edge),env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;align-items:center;gap:8px;z-index:8;padding:6px;border:1px solid #76a9bb42;border-radius:999px;background:#07131ed9;box-shadow:0 0 28px #49e6ef16,inset 0 0 18px #8af8ff0d;backdrop-filter:blur(12px)}
.character-version-switch button{min-width:94px;min-height:34px;padding:7px 14px;border:1px solid transparent;border-radius:999px;background:transparent;color:#718fa1;font:11px FuturaSite,ArchiveCN,sans-serif;letter-spacing:.12em;cursor:pointer;transition:color .25s,border-color .25s,background .25s,box-shadow .25s}
.character-version-switch button:hover,.character-version-switch button:focus-visible{color:#d9fbff;border-color:#5eb8c7}.character-version-switch button[aria-pressed=true]{color:#eaffff;border-color:#65f6fb;background:#17404b;box-shadow:0 0 12px #48eff066,inset 0 0 12px #75faff20;text-shadow:0 0 9px #65f6fb}
@media(max-width:1000px){.character-footer span{display:none}}
@media(max-width:700px){
 .character-screen{--rail-width:108px;--rail-gap:18px;--rail-edge:var(--safe-edge)}
 .character-right-rail .character-credit,.character-owner-mark{min-height:58px;border-radius:10px}
 .character-right-rail .character-credit{font-size:8.5px;gap:4px;padding:7px 4px}
 .character-right-rail .character-credit img{width:27px;height:30px}
 .character-right-rail .character-throttle{padding:54px 8px 16px 40px}
 .character-right-rail .throttle-title{left:40px;right:4px;top:16px;font-size:10px}
 .character-right-rail .throttle-track{left:17px;top:54px;bottom:16px}
 .character-right-rail .character-throttle button b{font-size:17px;letter-spacing:0}
 .character-owner-mark{padding:8px}.character-owner-mark img{width:48px;height:32px}
 .character-screen .character-footer{height:40px}.character-version-switch{gap:4px;padding:4px}.character-version-switch button{min-width:76px;min-height:30px;padding:6px 9px;font-size:9px}.version-v121{--art-width:min(72vw,60vh)}.version-v121 .character-palette-bars{width:68px;height:79px}
}
@media(max-width:540px){.character-version-switch{left:auto;right:var(--safe-edge);transform:none}.character-footer>button{white-space:nowrap;font-size:12px}.character-version-switch button{min-width:64px;padding-inline:6px}.character-right-rail{bottom:calc(var(--safe-edge) + 56px)}}
@media(max-height:600px){
 .character-screen{--rail-gap:12px}
 .character-right-rail .character-credit{font-size:12px;gap:4px}
 .character-right-rail .character-credit img{width:28px;height:30px}
 .character-right-rail .character-throttle{padding-top:45px;padding-bottom:12px}
 .character-right-rail .throttle-title{top:12px;font-size:10px}.character-right-rail .throttle-title small{font-size:8px;margin-top:2px}
 .character-right-rail .throttle-track{top:45px;bottom:12px}
 .character-right-rail .character-throttle button{gap:2px}.character-right-rail .character-throttle button b{font-size:16px}
 .character-right-rail .character-credit,.character-owner-mark{min-height:52px}.character-owner-mark img{height:28px;width:45px}
}