body{margin:0;padding:0;background:#000;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:50px 50px;color:#f5f5f5;font-family:"Noto Serif SC",serif;-webkit-font-smoothing:antialiased;overflow-x:hidden;position:relative}body:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;background:radial-gradient(ellipse at center,transparent 30%,rgba(0,0,0,.8) 100%);z-index:9999}#root{width:100vw;min-height:100vh}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.hall-page{animation:fadeIn 1s ease-out}@keyframes searchPulse{0%{transform:scale(1);box-shadow:0 0 #fff0}50%{transform:scale(1.02);box-shadow:0 0 15px var(--theme-color, #00FA9A)}to{transform:scale(1);box-shadow:0 0 #fff0}}.search-active{animation:searchPulse .3s ease-in-out;border-color:var(--theme-color, #fff)!important}.reset-btn:hover{transform:scale(1.1);background:#fff3!important}.glass-panel{background:#0a0a0a99;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,215,0,.3);box-shadow:0 8px 32px #0006,inset 0 1px #ffd7001a;transition:all .3s cubic-bezier(.4,0,.2,1)}.glass-panel:hover{border-color:#ffd70080;box-shadow:0 12px 40px #00000080,inset 0 2px #ffd70026}.glow-gold{text-shadow:0 0 10px rgba(255,215,0,.5),0 0 20px rgba(255,215,0,.3),0 0 30px rgba(255,215,0,.2);transition:text-shadow .3s ease}.glow-gold:hover{text-shadow:0 0 15px rgba(255,215,0,.8),0 0 30px rgba(255,215,0,.5),0 0 45px rgba(255,215,0,.3)}.glow-red{text-shadow:0 0 10px rgba(200,16,46,.5),0 0 20px rgba(200,16,46,.3);transition:text-shadow .3s ease}.glow-red:hover{text-shadow:0 0 15px rgba(200,16,46,.8),0 0 30px rgba(200,16,46,.5)}@keyframes dustFloat{0%{transform:translateY(0) translate(0);opacity:0}10%{opacity:.15}90%{opacity:.15}to{transform:translateY(-100vh) translate(20px);opacity:0}}.glass-panel,.glow-gold,.glow-red{will-change:transform,opacity}*{scrollbar-width:thin;scrollbar-color:rgba(255,215,0,.3) rgba(10,10,10,.5)}*::-webkit-scrollbar{width:8px;height:8px}*::-webkit-scrollbar-track{background:#0a0a0a80;border-radius:4px}*::-webkit-scrollbar-thumb{background:#ffd7004d;border-radius:4px;transition:background .3s ease}*::-webkit-scrollbar-thumb:hover{background:#ffd70080}@keyframes inkExpand{0%{transform:translateY(0) scale(.5);opacity:0}20%{opacity:.3}80%{opacity:.2}to{transform:translateY(-100vh) scale(2);opacity:0}}@keyframes lightFloat{0%{transform:translateY(0) translate(0) scale(1);opacity:0}10%{opacity:.5}50%{transform:translateY(-50vh) translate(30px) scale(1.2);opacity:.6}to{transform:translateY(-100vh) translate(-20px) scale(.8);opacity:0}}.search-container,.timeline-container,.control-panel,.bottom-player,input[type=text]{background:#0a0a0ab3!important;backdrop-filter:blur(20px)!important;-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.1)!important;border-radius:99px!important;color:#fff!important;box-shadow:0 4px 20px #00000080!important}h1,h2,.page-title,.hero-title{font-family:"Noto Serif SC",Songti SC,SimSun,serif!important;letter-spacing:.3em!important;font-weight:400!important;text-shadow:0 0 15px currentColor!important}.role-card,.card,.category-box{background:#ffffff05!important;border:1px solid rgba(255,255,255,.08)!important;transition:all .4s ease-out!important;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.role-card:hover,.card:hover,.category-box:hover{transform:scale(1.05) translateY(-5px)!important;border-color:#fff6!important;box-shadow:0 0 30px #ffffff26,inset 0 0 20px #ffffff0d!important}button,.btn-reset{border:1px solid rgba(255,255,255,.2)!important;background:transparent!important;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:all .3s}button:hover{background:#ffffff1a!important;box-shadow:0 0 15px #ffffff4d}.title-container,h1.role-title,div.hero-text{position:absolute!important;left:40px!important;bottom:40px!important;top:auto!important;text-align:left!important;z-index:50!important;pointer-events:none}h1,.hero-title{font-size:3rem!important;margin-bottom:.5rem!important;line-height:1.1!important}.subtitle,h2,.english-title{font-size:.9rem!important;opacity:.7;letter-spacing:.4em!important;font-weight:300!important;margin-left:4px!important}.role-card{background:#ffffff08!important;-webkit-backdrop-filter:blur(20px)!important;backdrop-filter:blur(20px)!important;border:1px solid rgba(255,255,255,.15)!important;transition:all .4s ease;overflow:hidden}.card-universe{background:transparent!important;border:none!important;box-shadow:none!important;transition:transform .5s ease}.role-card *{color:#fff!important;fill:#fff!important;stroke:none!important;border-color:#fffc!important;text-shadow:none!important;filter:none!important;animation:none!important;background:none!important;-webkit-text-fill-color:#FFFFFF!important;transition:all .3s ease!important;opacity:1!important}.role-card hr,.role-card .line-separator,.role-card .line,.role-card div[class*=line]{background-color:#fff!important;opacity:.8!important;box-shadow:none!important;border:none!important;height:100%!important;min-height:40px;width:1px!important}.card-universe:hover{transform:scale(1.05)}.card-universe h1,.card-universe span,.card-universe text{color:#fff!important;fill:#fff!important;text-shadow:none!important;animation:none!important;transition:all .3s ease}.card-universe:hover h1,.card-universe:hover span,.card-universe:hover text{color:gold!important;fill:gold!important;text-shadow:0 0 20px #FFD700!important}.role-card:hover{transform:translateY(-5px);border-color:var(--h-color)!important;box-shadow:0 0 15px var(--h-glow, var(--h-color)),inset 0 0 20px #00000080!important}.card-sheng{--h-color: #00F0FF;--h-glow: rgba(0, 240, 255, .4)}.card-dan{--h-color: #FF0055;--h-glow: rgba(255, 0, 85, .35)}.card-jing{--h-color: #bf00ff;--h-glow: rgba(191, 0, 255, .35)}.card-chou{--h-color: #00ff00;--h-glow: rgba(0, 255, 0, .28)}.role-card:hover *{color:var(--h-color)!important;fill:var(--h-color)!important;-webkit-text-fill-color:var(--h-color)!important;border-color:var(--h-color)!important;text-shadow:0 0 8px var(--h-glow, var(--h-color))!important;filter:drop-shadow(0 0 3px var(--h-glow, var(--h-color)))!important}.role-card:hover hr,.role-card:hover .line-separator,.role-card:hover .line,.role-card:hover div[class*=line]{background-color:var(--h-color)!important;box-shadow:0 0 6px var(--h-glow, var(--h-color))!important;opacity:1}.map-back-nav{position:absolute;top:30px;left:30px;z-index:50}.map-back-btn{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:10px;cursor:pointer;-webkit-user-select:none;user-select:none;font-family:"Noto Serif SC",serif;font-size:14px;font-weight:700;letter-spacing:.12em;color:#00f0ff;background:#05050cb8!important;border:1px solid rgba(0,240,255,.28)!important;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 0 18px #00f0ff1f;transition:transform .2s ease,background .25s ease,box-shadow .25s ease,border-color .25s ease}.map-back-btn:hover{transform:translateY(-1px);background:#00f0ff1f!important;border-color:#00f0ff8c!important;box-shadow:0 0 24px #00f0ff52}.map-back-btn:active{transform:translateY(0) scale(.99)}.map-back-btn:focus-visible{outline:2px solid rgba(0,240,255,.55);outline-offset:3px}.map-back-icon{font-size:16px;line-height:1}.map-timeline-overlay{position:absolute;left:0;right:0;bottom:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:60px;padding:30px 50px 20px;background:linear-gradient(to top,rgba(0,0,5,.95) 0%,rgba(0,0,5,.6) 60%,transparent 100%);border-top:1px solid rgba(0,240,255,.15);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}.glass-panel::-webkit-scrollbar{width:4px}.glass-panel::-webkit-scrollbar-track{background:transparent}.glass-panel::-webkit-scrollbar-thumb{background:#00f0ff40;border-radius:999px}.glass-panel::-webkit-scrollbar-thumb:hover{background:#00f0ff66}.node-sidebar-scroll::-webkit-scrollbar{width:4px}.node-sidebar-scroll::-webkit-scrollbar-track{background:transparent}.node-sidebar-scroll::-webkit-scrollbar-thumb{background:#00f0ff2e;border-radius:999px}.node-sidebar-scroll::-webkit-scrollbar-thumb:hover{background:#00f0ff4d}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}@keyframes neonRotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes decryptGlitch{0%{filter:grayscale(100%) contrast(150%) sepia(100%) hue-rotate(180deg) blur(2px);transform:skew(2deg);opacity:.8}20%{filter:invert(100%);transform:skew(-2deg);opacity:.9}40%{filter:grayscale(100%) contrast(150%) sepia(100%) hue-rotate(180deg);transform:skew(1deg);opacity:1}to{filter:grayscale(0%) contrast(100%) sepia(0%) hue-rotate(0deg) blur(0px);transform:skew(0);opacity:1}}.map-timeline-left{width:320px;display:flex;flex-direction:column;align-items:flex-start}.map-timeline-title-row{display:flex;align-items:baseline;gap:16px}.map-timeline-year{font-family:"Noto Serif SC",serif;font-size:52px;line-height:1;letter-spacing:.05em;color:gold;text-shadow:0 0 16px rgba(255,215,0,.3)}.map-timeline-label{font-family:"Noto Serif SC",serif;font-size:18px;font-weight:700;letter-spacing:.1em;color:#fff}.map-timeline-desc{margin-top:8px;font-family:"Noto Serif SC",serif;font-size:13px;line-height:1.5;color:#fff9}.map-timeline-center{flex:1;display:flex;align-items:center;gap:20px}.map-timeline-end{font-family:"Noto Serif SC",serif;font-size:12px;color:#fff6}.map-timeline-range{flex:1;height:3px;cursor:pointer;border-radius:999px;background:#ffffff26;outline:none;accent-color:#00F0FF}.map-timeline-right{display:flex;align-items:center;gap:16px}.map-timeline-btn{padding:8px 20px;border-radius:999px;border:1px solid rgba(255,255,255,.15)!important;background:transparent!important;color:#ffffffb8!important;font-family:"Noto Serif SC",serif;cursor:pointer;transition:transform .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease,background .2s ease}.map-timeline-btn:hover{color:#fff!important;border-color:#ffffff4d!important;box-shadow:0 0 18px #ffffff1a}.map-timeline-btn:active{transform:scale(.99)}.map-timeline-btn-primary{padding:10px 28px;border:1px solid rgba(0,240,255,.4)!important;background:#00f0ff1a!important;color:#00f0ff!important;font-weight:700;box-shadow:0 0 15px #00f0ff26}.map-timeline-btn-primary:hover{border-color:#00f0ffb3!important;box-shadow:0 0 22px #00f0ff52}@supports selector(::-webkit-slider-thumb){.map-timeline-range{-webkit-appearance:none;appearance:none}.map-timeline-range::-webkit-slider-runnable-track{height:3px;border-radius:999px;background:#ffffff26}.map-timeline-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:999px;margin-top:-5.5px;background:#00f0fff2;border:1px solid rgba(0,240,255,.55);box-shadow:0 0 18px #00f0ff59}.map-timeline-range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px #00f0ff2e,0 0 20px #00f0ff80}}.map-timeline-range::-moz-range-track{height:3px;border-radius:999px;background:#ffffff26}.map-timeline-range::-moz-range-thumb{width:14px;height:14px;border-radius:999px;background:#00f0fff2;border:1px solid rgba(0,240,255,.55);box-shadow:0 0 18px #00f0ff59}.map-timeline-range:focus-visible{outline:2px solid rgba(0,240,255,.35);outline-offset:6px}