/* 四件组件的浅色主题适配。设计基准取自 lamperouge 主站：
   --ink #17191d / --muted #707780 / --line / --blue #426b93 / 底 #f4f5f7
   原作者尺寸全部绑定 --u: calc(100vw/1600) 绝对坐标，这里换成 rem/px。 */

/* ==== 1. dock 顶栏（浮动胶囊 + 磁吸放大） ==== */
/* 固定高度：导航项放大时会从 36px 长到 50px，若容器高度跟着变，
   sticky 元素在正常流里就会把下方内容顶下去，整页出现上下抖动。
   锁定高度 + overflow visible，胶囊长高时不牵连页面。 */
.dock-wrap {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: center;
  height: 62px; padding: 0 16px; overflow: visible; pointer-events: none;
}
.dock {
  position: relative;
  pointer-events: auto; display: inline-flex; align-items: center; gap: 2px; padding: 5px;
  border: 1px solid rgba(255,255,255,.14); border-radius: 999px;
  background: #17191d;
  background: rgba(23,25,29,.97);
  box-shadow: 0 8px 26px rgba(23,25,29,.22), 0 2px 6px rgba(23,25,29,.14);
  opacity: 0; transition: opacity .5s ease;
}
html.motion-ready .dock { opacity: 1; }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .dock { background: rgba(23,25,29,.88); backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3); }
}
.dock-item {
  position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center;
  flex: none; height: 36px; gap: 7px; padding: 0 14px;
  border: 1px solid transparent; border-radius: 999px; background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.62);
  text-decoration: none; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 500; letter-spacing: .01em; white-space: nowrap;
  will-change: width, height, transform;
  transition: color .18s ease, border-color .2s ease, background .2s ease;
}
.dock-item .glyph { width: 15px; height: 15px; flex: none; opacity: .75; transition: opacity .18s ease; }
.dock-item:hover { color: #fff; }
.dock-item[aria-current="page"], .dock-item.is-active { background: #f4f5f7; border-color: #f4f5f7; color: #17191d; }
.dock-item[aria-current="page"] .glyph { opacity: 1; }
.dock-item[data-near="true"]:not(.is-active) { color: #fff; background: rgba(255,255,255,.13); }
.dock-item:focus-visible { outline: 3px solid rgba(140,190,240,.6); outline-offset: 2px; }
/* 品牌名在 dock 之外，避免随放大而挤动其它项 */
.dock-brand {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  font-size: 17px; font-weight: 700; letter-spacing: .08em; color: var(--ink);
  text-decoration: none;
}
.dock-brand:hover { color: var(--blue); }
/* 镜面边缘高光：conic gradient 遮罩到边框，起始角指向鼠标 */
[data-spec] { --spec-angle: 2.4rad; --spec-bright: 0; }
[data-spec]::after {
  content: ''; position: absolute; inset: -1px; z-index: 5;
  padding: 1px; border-radius: inherit; pointer-events: none;
  opacity: var(--spec-bright);
  background: conic-gradient(from var(--spec-angle) at 50% 50%,
    rgba(150,205,255,0) 0deg, rgba(150,205,255,.12) 12deg, rgba(225,242,255,1) 26deg,
    rgba(150,205,255,.22) 44deg, rgba(150,205,255,0) 66deg, rgba(150,205,255,0) 180deg,
    rgba(150,205,255,.12) 194deg, rgba(225,242,255,1) 206deg, rgba(150,205,255,.22) 224deg,
    rgba(150,205,255,0) 246deg, rgba(150,205,255,0) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;          mask-composite: exclude;
}.dock-progress { pointer-events: none; position: fixed; left: 0; top: 0; z-index: 31; width: 100%; height: 2px; background: var(--blue); transform: scaleX(0); transform-origin: left; }
/* ==== 2. liquid-button ====
   下面是 ThreeUI living-world 的原始 CSS，逐字保留，只做一处改动：
   在 .liquid-stage 上本地定义 --u（原来是继承全站的 --u = 舞台宽/1600）。
   其它一律不动 —— 上一版我改了 inset 与 border-radius，导致底板变成方块、
   图标与字号失控，所以这里不再自行设计。 */
.liquid-stage {
  --u: clamp(.42, calc(100vw / 1600), .72);
  --lu: calc(var(--h) / 516);
  --bh: var(--h);
  --pad: calc(900 * var(--lu));
  position: relative;
  width: max-content; height: max-content;
  padding: var(--pad);
  display: grid; place-items: center;
  touch-action: manipulation;
  font-optical-sizing: auto; -webkit-font-smoothing: antialiased;
}
.liquid-stage--explore { --h: calc(74.4152 * var(--u)); }
.liquid-stage--play { --h: calc(88.2288 * var(--u)); }
.liquid-plate {
  position: absolute;
  inset: var(--pad);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.014) 44%, rgba(255,255,255,0) 64%),
    rgba(10,12,10,.42);
  box-shadow:
    0 calc(var(--h) * 0.08) calc(var(--h) * 0.18) rgba(0,0,0,.38),
    0 calc(var(--h) * 0.24) calc(var(--h) * 0.50) rgba(0,0,0,.28),
    0 calc(var(--h) * 0.48) calc(var(--h) * 0.96) rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.13),
    inset 0 calc(var(--h) * -0.02) calc(var(--h) * 0.05) rgba(255,255,255,.05);
  transition: box-shadow .38s cubic-bezier(.22,.61,.36,1), background .38s cubic-bezier(.22,.61,.36,1);
}
.liquid-stage.hot .liquid-plate {
  background:
    linear-gradient(180deg, rgba(255,255,255,.105), rgba(255,255,255,.02) 44%, rgba(255,255,255,0) 64%),
    rgba(8,10,8,.50);
  box-shadow:
    0 calc(var(--h) * 0.10) calc(var(--h) * 0.22) rgba(0,0,0,.44),
    0 calc(var(--h) * 0.32) calc(var(--h) * 0.66) rgba(0,0,0,.34),
    0 calc(var(--h) * 0.66) calc(var(--h) * 1.32) rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.17),
    inset 0 calc(var(--h) * -0.02) calc(var(--h) * 0.05) rgba(255,255,255,.06);
}
.liquid-stage.press .liquid-plate {
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.01) 44%, rgba(255,255,255,0) 64%),
    rgba(7,9,7,.55);
  box-shadow:
    0 calc(var(--h) * 0.04) calc(var(--h) * 0.11) rgba(0,0,0,.46),
    0 calc(var(--h) * 0.13) calc(var(--h) * 0.32) rgba(0,0,0,.36),
    0 calc(var(--h) * 0.27) calc(var(--h) * 0.62) rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.10);
  transition-duration: .10s;
}
.liquid-fx { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.liquid-button {
  position: relative;
  height: var(--bh);
  border: 0; background: none;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-family: inherit; font-weight: 500; line-height: 1; letter-spacing: 0;
  cursor: pointer; -webkit-tap-highlight-color: transparent; outline: none;
}
.liquid-button:focus-visible { outline: calc(4 * var(--lu)) solid rgba(255,255,255,.55); outline-offset: calc(10 * var(--lu)); }
.liquid-button .ico { display: block; flex: none; overflow: visible; }
.liquid-button .lbl { display: block; transform: translateY(calc(2 * var(--lu))); }
.liquid-button--explore { padding: 0 calc(224 * var(--lu)) 0 calc(95 * var(--lu)); gap: calc(112 * var(--lu)); font-size: calc(140 * var(--lu)); }
.liquid-button--explore .ico { width: calc(150 * var(--lu)); height: calc(150 * var(--lu)); }
.liquid-stage.no-webgl .liquid-plate { background: linear-gradient(135deg, #2b3138, #17191d); }
.liquid-stage.no-webgl .liquid-button { color: #fff; }
/* ==== 3. ring：环形图块环绕真实文字（双画布） ==== */
.ring-holder { position: relative; }
.ring-back, .ring-front { position: absolute; inset: 0; width: 100%; height: 100%; }
.ring-back { z-index: 0; }
.ring-front { z-index: 2; pointer-events: none; }
.ring-holder > .ring-copy { position: relative; z-index: 1; }
/* ==== 4. dot-border-button（打印驿站提交） ==== */
.dotbtn { --dot-size: 8px; --dot-speed: .35s; --dot-distance: .8rem 1rem;
  position: relative; display: inline-flex; justify-content: center; align-items: center;
  width: auto; height: auto; padding: var(--dot-distance); background: rgba(0,0,0,0);
  user-select: none; color: var(--ink); }
.dotbtn::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  border-radius: inherit; pointer-events: none; background-color: #0000;
  background-image: repeating-linear-gradient(45deg, rgba(23,25,29,.16) 0 1px, transparent 2px 5px);
  opacity: 0; z-index: -1; }
.dotbtn:has(.dotbtn-face:hover)::after { animation: dotbtn-fade calc(var(--dot-speed) * 4) ease-in-out forwards; }
@keyframes dotbtn-fade { 80% { opacity: 0; } 100% { opacity: 1; } }
.dotbtn .dotbtn-face { position: relative; display: flex; justify-content: center; align-items: center;
  padding: .8rem 1.25rem; background: rgba(255,255,255,.55); border: 1px solid rgba(23,25,29,.14);
  color: var(--ink); font-weight: 600; font-size: 1rem; border-radius: 6px; cursor: pointer;
  transition: transform .2s ease-in-out, letter-spacing .2s ease-in-out, background .2s, color .2s; }
.dotbtn .dotbtn-face:hover { background: var(--blue); color: #fff; transform: scale(1.04); letter-spacing: .05em; }
.dotbtn .dotbtn-face:active { transform: scale(.98); letter-spacing: .02em; }
.dotbtn .dotbtn-face svg { margin-left: .5rem; height: 22px; width: 22px; stroke-width: 1;
  stroke-linecap: round; stroke-linejoin: round; stroke: currentColor; fill: none; }
.dotbtn .dot { position: absolute; width: var(--dot-size); aspect-ratio: 1; border-radius: 2px;
  background-color: rgba(23,25,29,.55); transition: all .3s ease-in-out; opacity: 0; }
.dotbtn:has(.dotbtn-face:hover) .dot.top.left { top: 50%; left: 20%; animation: dotbtn-tl var(--dot-speed) ease-in-out forwards; }
@keyframes dotbtn-tl { 90% { opacity: .6; } 100% { top: calc(var(--dot-size) * -.5); left: calc(var(--dot-size) * -.5); opacity: 1; } }
.dotbtn:has(.dotbtn-face:hover) .dot.top.right { top: 50%; right: 20%; animation: dotbtn-tr var(--dot-speed) ease-in-out forwards; animation-delay: calc(var(--dot-speed) * .6); }
@keyframes dotbtn-tr { 80% { opacity: .6; } 100% { top: calc(var(--dot-size) * -.5); right: calc(var(--dot-size) * -.5); opacity: 1; } }
.dotbtn:has(.dotbtn-face:hover) .dot.bottom.right { bottom: 50%; right: 20%; animation: dotbtn-br var(--dot-speed) ease-in-out forwards; animation-delay: calc(var(--dot-speed) * 1.2); }
@keyframes dotbtn-br { 80% { opacity: .6; } 100% { bottom: calc(var(--dot-size) * -.5); right: calc(var(--dot-size) * -.5); opacity: 1; } }
.dotbtn:has(.dotbtn-face:hover) .dot.bottom.left { bottom: 50%; left: 20%; animation: dotbtn-bl var(--dot-speed) ease-in-out forwards; animation-delay: calc(var(--dot-speed) * 1.8); }
@keyframes dotbtn-bl { 80% { opacity: .6; } 100% { bottom: calc(var(--dot-size) * -.5); left: calc(var(--dot-size) * -.5); opacity: 1; } }.dotbtn .line { position: absolute; transition: all .3s ease-in-out; }
.dotbtn .line.horizontal { height: 1px; width: 100%; background-image: repeating-linear-gradient(90deg, #0000 0 2px, rgba(23,25,29,.34) 2px 4px); }
.dotbtn .line.vertical { width: 1px; height: 100%; background-image: repeating-linear-gradient(0deg, #0000 0 2px, rgba(23,25,29,.34) 2px 4px); }
.dotbtn .line.top { top: -.5px; transform-origin: top left; transform: rotate(5deg) scaleX(0); }
.dotbtn:has(.dotbtn-face:hover) .line.top { animation: dotbtn-dt var(--dot-speed) ease-in-out forwards; animation-delay: calc(var(--dot-speed) * .8); }
@keyframes dotbtn-dt { 100% { transform: rotate(0deg) scaleX(1); } }
.dotbtn .line.bottom { bottom: -.5px; transform-origin: bottom right; transform: rotate(5deg) scaleX(0); }
.dotbtn:has(.dotbtn-face:hover) .line.bottom { animation: dotbtn-db var(--dot-speed) ease-in-out forwards; animation-delay: calc(var(--dot-speed) * 2); }
@keyframes dotbtn-db { 100% { transform: rotate(0deg) scaleX(1); } }
.dotbtn .line.left { left: -.5px; transform-origin: bottom left; transform: rotate(0deg) scaleY(0); }
.dotbtn:has(.dotbtn-face:hover) .line.left { animation: dotbtn-dl var(--dot-speed) ease-in-out forwards; animation-delay: calc(var(--dot-speed) * 2.4); }
@keyframes dotbtn-dl { 100% { transform: rotate(0deg) scaleY(1); } }
.dotbtn .line.right { right: -.5px; transform-origin: top right; transform: rotate(5deg) scaleY(0); }
.dotbtn:has(.dotbtn-face:hover) .line.right { animation: dotbtn-dr var(--dot-speed) ease-in-out forwards; animation-delay: calc(var(--dot-speed) * 1.4); }
@keyframes dotbtn-dr { 100% { transform: rotate(0deg) scaleY(1); } }

/* ==== 降级与无障碍 ==== */
@media (prefers-reduced-motion: reduce) {
  .dock, .dock-item, .liquid-plate, .dotbtn .dotbtn-face { transition: none !important; }
  .dock-item { transform: none !important; }
  .dotbtn .dot, .dotbtn .line, .dotbtn::after { display: none; }
  .ring-back, .ring-front { display: none; }
}
@media (prefers-contrast: more) {
  .dock { background: var(--paper); border-color: var(--ink); }
  .dock-item { color: var(--ink); }
}
@media (max-width: 720px) {
  .dock { max-width: calc(100vw - 24px); overflow-x: auto; scrollbar-width: none; }
  .dock::-webkit-scrollbar { display: none; }
  .dock-item { height: 34px; padding: 0 11px; font-size: 12px; }
  .dock-item .glyph { display: none; }
  .ring-back, .ring-front { display: none; }
  .liquid-button { font-size: 14px; padding: 0 18px; }
}
/* ==== 5. flow-field 粒子层 ==== */
.particle-field { position: absolute; inset: 0; z-index: 0; pointer-events: auto; overflow: hidden; }
.particle-field canvas { display: block; width: 100%; height: 100%; }

/* ==== 6. 光效按钮（Canvas 2D 跟随鼠标） ==== */
.glowbtn { position: relative; display: inline-block; width: max-content; }
.glow-fx { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; display: block; border-radius: 999px; pointer-events: none; }
.glowbtn .btn { position: relative; z-index: 1; }
.glowbtn .btn-glow-plate {
  position: absolute; inset: 0; z-index: 0; border-radius: 999px;
  background: linear-gradient(180deg, #232830, #12151a 60%, #0d0f13);
  box-shadow: 0 6px 16px rgba(23,25,29,.26), 0 18px 40px rgba(23,25,29,.20), inset 0 1px 0 rgba(255,255,255,.14);
  transition: box-shadow .35s ease;
}
.glowbtn:hover .btn-glow-plate { box-shadow: 0 10px 24px rgba(23,25,29,.32), 0 26px 56px rgba(23,25,29,.26), inset 0 1px 0 rgba(255,255,255,.24); }
.glowbtn .btn {
  display: inline-flex; align-items: center; gap: 11px;
  min-height: 52px; padding: 0 28px;
  border: 0; background: none; border-radius: 999px;
  color: #f2f5f8; font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1;
  text-decoration: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent; outline: none;
}
.glowbtn .btn .ico { width: 20px; height: 20px; flex: none; }
.glowbtn .btn:focus-visible { outline: 3px solid rgba(140,190,240,.7); outline-offset: 4px; }
.glowbtn.is-secondary .btn-glow-plate {
  background: linear-gradient(180deg, #fdfdfe, #eef0f4 60%, #e6e9ee);
  box-shadow: 0 5px 14px rgba(23,25,29,.12), 0 16px 34px rgba(23,25,29,.08), inset 0 1px 0 #fff;
}
.glowbtn.is-secondary .btn { color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  .glow-fx, .particle-field { display: none; }
}
/* ==== 首页改造：hero 分层 ==== */
.hero { isolation: isolate; }
.particle-field { z-index: 0; }
.hero-grid { position: relative; z-index: 2; }
.ring-holder { position: relative; }
.ring-copy { position: relative; z-index: 1; }
.ring-back { z-index: 0; }
.ring-front { z-index: 2; pointer-events: none; }
/* 粒子层在文字下方，不抢可读性 */
.particle-field { opacity: .9; }
@media (max-width: 720px) {
  .particle-field { opacity: .32; }
  .ring-back, .ring-front { display: none; }
}
/* 原来的全宽 topbar 不再使用 */
.topbar { display: none; }
.nav { display: none; }