*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#050508;--s:#0a0a0e;--b:#14141a;--b2:#1e1e26;
  --t:#e8e8ec;--t2:#888890;--t3:#5a5a62;
  --a:#5eead4;--a2:rgba(94,234,212,0.12);
  --r:14px;--rs:8px;--nav-h:60px
}
html,body{
  width:100%;height:100%;overflow:hidden;
  background:var(--bg);color:var(--t);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif
}
#sceneCanvas{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;display:block}

/* 导航 */
.tools-nav{
  position:fixed;top:0;left:0;width:100%;z-index:100;
  height:var(--nav-h);padding:0 20px;
  display:flex;align-items:center;
  background:rgba(5,5,8,0.85);border-bottom:1px solid var(--b)
}
.tools-nav-inner{width:100%;max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between}
.logo{font-size:15px;font-weight:700;color:var(--t);text-decoration:none;letter-spacing:-.02em}
.logo .d{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--a);margin-right:7px;vertical-align:middle}
.nav-back{font-size:18px;color:var(--t2);text-decoration:none;margin-right:8px;transition:color .3s;line-height:1}
.nav-back:hover{color:var(--t)}
.nav-links{display:flex;gap:16px}
.nav-links a{font-size:13px;color:var(--t2);text-decoration:none;transition:color .3s;font-weight:500}
.nav-links a:hover{color:var(--t)}

/* 标签 */
#toolLabels{position:fixed;top:0;left:0;width:100%;height:100%;z-index:2;pointer-events:none}
.tool-label{
  position:absolute;font-size:13px;font-weight:600;letter-spacing:.02em;
  cursor:pointer;pointer-events:auto;
  padding:6px 14px;border-radius:6px;
  background:rgba(5,5,8,0.75);border:1px solid rgba(255,255,255,0.06);
  transition:transform .2s,border-color .2s;white-space:nowrap;
  transform:translate(-50%,-50%)
}
.tool-label:hover{transform:translate(-50%,-50%) scale(1.06);border-color:var(--a)}

/* HUD */
.hud{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%);
  z-index:10;display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none
}
.hud-name{font-size:16px;font-weight:700;letter-spacing:-.01em;transition:color .3s,opacity .3s}
.hud-dots{display:flex;gap:5px}
.hud-dot{width:5px;height:5px;border-radius:50%;background:var(--b2);transition:all .3s}
.hud-dot.active{
  width:18px;border-radius:3px;background:var(--a);
  box-shadow:0 0 10px rgba(94,234,212,0.25)
}
.hud-dot.inactive{opacity:0.25}
.hud-counter{font-size:11px;color:var(--t3);font-weight:500}

/* 访客 */
.visit-badge{
  position:fixed;top:calc(var(--nav-h) + 12px);right:20px !important;left:auto !important;
  z-index:10;font-size:11px;color:var(--t3);
  padding:5px 10px;border-radius:var(--rs);border:1px solid var(--b);
  background:rgba(5,5,8,0.7)
}

/* Loading */
#loading{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
  z-index:100;font-size:13px;color:var(--t3);letter-spacing:.1em;
  transition:opacity .6s
}
#loading.hide{opacity:0;pointer-events:none}

/* 画卷覆盖层 */
#scrollOverlay{
  position:fixed;top:0;left:0;width:100%;height:100%;
  z-index:30;pointer-events:none;
  transform:scaleY(0);transform-origin:center;
  background:#08080c;
  transition:transform .55s cubic-bezier(.22,1,.36,1),opacity .3s;
  opacity:0;overflow:hidden
}
#scrollOverlay.open{
  transform:scaleY(1);opacity:1;pointer-events:auto
}
#scrollOverlay .paper{
  position:absolute;top:0;left:0;width:100%;height:100%;
  opacity:0.06;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
  background-repeat:repeat;background-size:200px 200px
}
#scrollOverlay .scroll-content{
  position:absolute;top:60px;left:50%;
  transform:translateX(-50%);
  width:min(520px,85vw);max-height:calc(100vh - 80px);overflow-y:auto;
  opacity:0;transition:opacity .35s .3s;padding:0 0 40px
}
#scrollOverlay.open .scroll-content{opacity:1}
.scroll-content::-webkit-scrollbar{width:3px}
.scroll-content::-webkit-scrollbar-track{background:transparent}
.scroll-content::-webkit-scrollbar-thumb{background:var(--b2);border-radius:2px}

/* 卷轴关闭按钮 */
.scroll-close{
  position:fixed;top:20px;right:20px;z-index:31;
  width:36px;height:36px;border-radius:50%;
  border:1px solid var(--b2);background:var(--s);color:var(--t2);
  font-size:16px;cursor:pointer;
  display:none;align-items:center;justify-content:center;
  transition:all .3s
}
.scroll-close:hover{border-color:var(--a);color:var(--a)}
#scrollOverlay.open ~ .scroll-close{display:flex}
/* can't use sibling selector reliably, will use JS instead */

/* 卷轴内容样式 */
.scroll-header{display:flex;align-items:center;gap:14px;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--b)}
.scroll-icon{width:52px;height:52px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
.scroll-title{font-size:20px;font-weight:700;letter-spacing:-.02em;color:var(--t)}
.scroll-tag{display:inline-block;font-family:monospace;font-size:10px;font-weight:600;text-transform:uppercase;padding:2px 7px;border-radius:4px;margin-top:3px}
.scroll-desc{font-size:13px;color:var(--t2);line-height:1.7;margin-bottom:18px;padding:10px 14px;background:var(--s);border-radius:6px;border-left:2px solid var(--a)}
.scroll-section{margin-bottom:16px}
.scroll-section h3{font-size:13px;font-weight:600;color:var(--t);margin-bottom:6px}
.scroll-section ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:4px}
.scroll-section li{font-size:12px;color:var(--t2);padding:5px 10px;background:var(--s);border-radius:4px;line-height:1.5}
.scroll-section li span{color:var(--a);font-weight:700;margin-right:4px}
.scroll-scenes{display:flex;flex-wrap:wrap;gap:4px}
.scroll-scenes span{display:inline-block;font-size:11px;padding:3px 8px;border-radius:4px;background:var(--a2);color:var(--a);font-weight:500}
.scroll-footer{margin-top:16px;padding-top:14px;border-top:1px solid var(--b);display:flex;align-items:center;justify-content:space-between;gap:8px}
.scroll-back-btn{display:inline-flex;align-items:center;gap:4px;padding:8px 16px;font-size:12px;font-weight:600;border:1px solid var(--b2);border-radius:var(--rs);cursor:pointer;background:var(--s);color:var(--t2);text-decoration:none;transition:all .3s}
.scroll-back-btn:hover{border-color:var(--a);color:var(--a)}
.scroll-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 20px;font-size:13px;font-weight:600;
  border:none;border-radius:var(--rs);cursor:pointer;
  text-decoration:none;transition:all .3s
}
.scroll-go{color:#050508}
.scroll-hint{font-size:11px;color:var(--t3)}