:root{--color-bg: #0c0c0c;--color-bg-elevated: #141414;--color-bg-overlay: rgba(12, 12, 12, .85);--color-text-primary: #f5f2eb;--color-text-secondary: #b8b3ac;--color-text-tertiary: #8a8580;--color-accent: #b8a88a;--color-accent-soft: rgba(184, 168, 138, .15);--color-divider: rgba(245, 242, 235, .06);--color-divider-strong: rgba(245, 242, 235, .12);--font-cn: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;--font-en: "Inter", -apple-system, sans-serif;--space-xs: .25rem;--space-sm: .5rem;--space-md: 1rem;--space-lg: 1.5rem;--space-xl: 2rem;--space-2xl: 3rem;--space-3xl: 4rem;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-full: 9999px;--ease-out: cubic-bezier(.25, .1, .25, 1);--ease-spring: cubic-bezier(.34, 1.56, .64, 1);--duration-fast: .2s;--duration-normal: .4s;--duration-slow: .6s}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}html{font-size:16px;-webkit-text-size-adjust:100%;overscroll-behavior:none}body{font-family:var(--font-cn);font-weight:300;background-color:var(--color-bg);color:var(--color-text-primary);line-height:1.7;overflow:hidden;width:100vw;height:100vh;height:100dvh;height:calc(var(--vh, 1dvh) * 100);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#app{width:100%;height:100%;position:relative;overflow:hidden}.page{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;overflow:hidden;opacity:0;visibility:hidden;transition:opacity var(--duration-normal) var(--ease-out),visibility var(--duration-normal) var(--ease-out)}.page.active{opacity:1;visibility:visible}.bg-image{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;z-index:0}.bg-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to bottom,#0c0c0c4d,#0c0c0c1a 30%,#0c0c0c66 70%,#0c0c0cd9);z-index:1;pointer-events:none}.top-nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:env(safe-area-inset-top) var(--space-lg) var(--space-md);padding-top:calc(env(safe-area-inset-top) + var(--space-md));pointer-events:none}.top-nav>*{pointer-events:auto}.nav-back{display:flex;align-items:center;gap:var(--space-sm);color:var(--color-text-secondary);font-size:.875rem;font-weight:300;letter-spacing:2px;text-decoration:none;transition:color var(--duration-fast) var(--ease-out)}.nav-back:hover,.nav-back:active{color:var(--color-text-primary)}.nav-back svg{width:20px;height:20px}.nav-title{font-size:.75rem;font-weight:300;letter-spacing:4px;color:var(--color-text-tertiary);text-transform:uppercase}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-lg);font-family:var(--font-cn);font-size:.875rem;font-weight:300;letter-spacing:2px;border:1px solid var(--color-divider-strong);border-radius:var(--radius-full);background:transparent;color:var(--color-text-primary);cursor:pointer;transition:all var(--duration-fast) var(--ease-out);text-decoration:none}.btn:hover,.btn:active,.btn-primary{border-color:var(--color-accent);background:var(--color-accent-soft)}.btn-primary:hover{background:#b8a88a40}.tab-group{display:flex;gap:var(--space-lg);border-bottom:1px solid var(--color-divider);margin-bottom:var(--space-lg)}.tab{padding:var(--space-sm) 0;font-family:var(--font-cn);font-size:.875rem;font-weight:300;color:var(--color-text-tertiary);background:none;border:none;cursor:pointer;letter-spacing:2px;position:relative;transition:color var(--duration-fast) var(--ease-out)}.tab.active{color:var(--color-text-primary)}.tab.active:after{content:"";position:absolute;bottom:-1px;left:0;right:0;height:1px;background:var(--color-accent)}.pill{display:inline-flex;align-items:center;padding:var(--space-xs) var(--space-md);font-size:.75rem;font-weight:300;letter-spacing:2px;color:var(--color-accent);border:1px solid rgba(184,168,138,.3);border-radius:var(--radius-full)}@keyframes breathe{0%,to{opacity:.3}50%{opacity:.8}}.breathe{animation:breathe 4s ease-in-out infinite}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.fade-in-up{animation:fadeInUp var(--duration-slow) var(--ease-out) forwards}.loading-screen{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--color-bg);gap:var(--space-lg)}.loading-text{font-size:.875rem;font-weight:300;letter-spacing:8px;color:var(--color-text-secondary)}.loading-bar{width:120px;height:1px;background:var(--color-divider);position:relative;overflow:hidden}.loading-bar:after{content:"";position:absolute;left:0;top:0;height:100%;width:30%;background:var(--color-accent);animation:loadingSlide 1.5s ease-in-out infinite}@keyframes loadingSlide{0%{left:-30%}to{left:100%}}.canvas-container{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2}.canvas-container canvas{display:block;width:100%;height:100%;touch-action:none}::-webkit-scrollbar{display:none}html{scrollbar-width:none}.top-nav .nav-title{position:absolute;left:50%;transform:translate(-50%)}.timeline-page{position:relative;width:100%;height:100%;overflow-y:auto;overflow-x:hidden;scroll-snap-type:y mandatory;-webkit-overflow-scrolling:touch}.timeline-page::-webkit-scrollbar{display:none}.timeline-content{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;padding:var(--space-xl)}.timeline-item{position:relative;width:100%;height:100vh;height:100dvh;height:calc(var(--vh, 1dvh) * 100);scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}.timeline-umbrella-silhouette{position:relative;width:200px;height:220px;margin-bottom:var(--space-2xl);display:flex;align-items:center;justify-content:center}.timeline-umbrella-silhouette svg{width:100%;height:100%;stroke:var(--color-accent);stroke-width:.75;fill:none;opacity:.4}.timeline-era-label{display:flex;align-items:center;gap:var(--space-md);margin-bottom:var(--space-md)}.timeline-era-label .line{width:24px;height:1px;background:var(--color-accent);opacity:.5}.timeline-era-label .text{font-size:.75rem;font-weight:300;letter-spacing:6px;color:var(--color-accent)}.timeline-name{font-size:2.9rem;font-weight:100;letter-spacing:8px;color:var(--color-text-primary);margin-bottom:var(--space-xs);text-align:center}.timeline-name-en{font-family:var(--font-en);font-size:.75rem;font-weight:200;letter-spacing:3px;color:var(--color-text-tertiary);text-transform:uppercase;margin-bottom:var(--space-xl);text-align:center}.timeline-desc{max-width:320px;font-size:.875rem;font-weight:300;line-height:1.8;color:#c4bfb8;text-align:center;margin-bottom:var(--space-2xl);padding:0 var(--space-lg)}.timeline-cta{display:flex;flex-direction:column;align-items:center;gap:var(--space-lg)}.timeline-scroll-hint{font-size:.75rem;font-weight:300;letter-spacing:3px;color:var(--color-text-tertiary);display:flex;align-items:center;gap:var(--space-sm)}.timeline-scroll-hint svg{width:16px;height:16px;animation:scrollBounce 2s ease-in-out infinite}@keyframes scrollBounce{0%,to{transform:translateY(0);opacity:.5}50%{transform:translateY(6px);opacity:1}}.timeline-header{position:absolute;top:0;left:0;right:0;z-index:10;display:flex;flex-direction:column;align-items:center;padding-top:calc(env(safe-area-inset-top) + var(--space-2xl));pointer-events:none}.timeline-header h1{font-size:1rem;font-weight:300;letter-spacing:8px;color:var(--color-text-primary);margin-bottom:var(--space-xs)}.timeline-header .subtitle{font-size:.75rem;font-weight:300;letter-spacing:4px;color:var(--color-text-tertiary)}.timeline-indicator{position:fixed;right:var(--space-lg);top:50%;transform:translateY(-50%);z-index:50;display:flex;flex-direction:column;gap:var(--space-sm)}.timeline-indicator .dot{width:4px;height:4px;border-radius:50%;background:var(--color-text-tertiary);transition:all var(--duration-fast) var(--ease-out)}.timeline-indicator .dot.active{background:var(--color-accent);transform:scale(1.8)}.timeline-progress{position:fixed;left:0;top:0;width:2px;height:0%;background:var(--color-accent);opacity:.5;z-index:50;transition:height .1s linear}.umbreline{position:relative;flex-shrink:0;width:240px;height:218px;margin-bottom:var(--space-2xl);cursor:pointer;-webkit-tap-highlight-color:transparent;outline:none}.umbreline svg{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;color:var(--color-accent)}.timeline-item[data-id=han] .umbreline svg{top:0;right:0;bottom:24px;left:0;height:calc(100% - 24px)}.umbreline .u-closed{opacity:.9;animation:uBreathe 2.6s ease-in-out infinite}.umbreline .u-open{opacity:0;transform-origin:50% 9%}@keyframes uBreathe{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}.umbreline-hint{position:absolute;left:50%;bottom:-4px;transform:translate(-50%);font-size:.7rem;font-weight:300;letter-spacing:3px;color:var(--color-accent);opacity:.6;white-space:nowrap;animation:hintPulse 2s ease-in-out infinite;pointer-events:none}@keyframes hintPulse{0%,to{opacity:.35}50%{opacity:.85}}.umbrella-open .u-closed{animation:closedFade .3s ease-out both}@keyframes closedFade{to{opacity:0;transform:translateY(8px) scale(.92)}}.timeline-item.tl-interactive.umbrella-open .u-open{animation:canopyOpen 1.2s cubic-bezier(.25,.8,.35,1) .1s both}.timeline-item[data-id=ming] .u-open{transform-origin:50% 16%}.timeline-item[data-id=qing] .u-open,.timeline-item[data-id=xihu_silk] .u-open{transform-origin:50% 10%}.timeline-item[data-id=guohuo] .u-open{transform-origin:50% 12%}.timeline-item[data-id=yuan] .u-open{transform-origin:50% 11%}@keyframes canopyOpen{0%{opacity:0;transform:scaleX(.03) scaleY(.55)}15%{opacity:1}to{opacity:1;transform:scaleX(1) scaleY(1)}}.u-canopy{opacity:0}.timeline-item[data-id=pre_qin].umbrella-open .u-canopy{animation:canopyDescend 1.25s cubic-bezier(.25,.8,.35,1) .1s both}@keyframes canopyDescend{0%{opacity:0;transform:translateY(-150px)}15%{opacity:1}85%{opacity:1;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}.timeline-item[data-id=pre_qin].umbrella-open .u-tassels{transform-box:fill-box;transform-origin:50% 0%;animation:tasselSway 3.2s ease-in-out 1.5s infinite alternate}@keyframes tasselSway{0%{transform:rotate(-1.2deg)}to{transform:rotate(1.2deg)}}.timeline-item[data-id=han].umbrella-open .u-canopy{animation:canopyMount 1.15s cubic-bezier(.3,.9,.35,1) .1s both}@keyframes canopyMount{0%{opacity:0;transform:translateY(-140px)}15%{opacity:1}80%{opacity:1;transform:translateY(0)}90%{opacity:1;transform:translateY(-3px)}to{opacity:1;transform:translateY(0)}}.umbrella-open .umbreline{cursor:default}.umbrella-open .umbreline-hint{display:none}.timeline-item.tl-interactive .fall-block{pointer-events:none}.timeline-item.tl-interactive .fall-char{display:inline-block;opacity:0;transform:translate(var(--dx),-180px) rotate(var(--rot));pointer-events:none}.timeline-item.tl-interactive.umbrella-open .fall-char{animation:charRain .65s cubic-bezier(.5,0,.84,.44) var(--d) both}@keyframes charRain{0%{opacity:0;transform:translate(var(--dx),-180px) rotate(var(--rot))}25%{opacity:1}to{opacity:1;transform:translate(0) rotate(0)}}.timeline-item.tl-interactive .timeline-desc{max-width:260px;padding:0;line-height:2;letter-spacing:.06em}.timeline-item[data-id=pre_qin] .timeline-desc{max-width:300px}.timeline-item[data-id=wei_jin].umbrella-open .u-curtain-l{transform-box:fill-box;transform-origin:0% 0%;animation:curtainPartL 1.15s cubic-bezier(.3,.7,.4,1) .1s both}.timeline-item[data-id=wei_jin].umbrella-open .u-curtain-r{transform-box:fill-box;transform-origin:100% 0%;animation:curtainPartR 1.15s cubic-bezier(.3,.7,.4,1) .1s both}@keyframes curtainPartL{to{transform:rotate(-16deg) translateY(-2px);opacity:.22}}@keyframes curtainPartR{to{transform:rotate(16deg) translateY(-2px);opacity:.22}}.timeline-item.tl-interactive .veil-char{display:inline-block;opacity:0;transform:translateY(5px);pointer-events:none}.timeline-item.tl-interactive.umbrella-open .veil-char{animation:veilIn .55s ease-out var(--d) both}@keyframes veilIn{to{opacity:1;transform:translateY(0)}}.timeline-item.tl-interactive .half-char{position:relative;display:inline-block;line-height:1;pointer-events:none}.timeline-item.tl-interactive .half{display:inline-block}.timeline-item.tl-interactive .half-b{clip-path:inset(48% 0 0 0);opacity:0;transform:translateY(2px)}.timeline-item.tl-interactive .half-t{position:absolute;left:0;top:0;clip-path:inset(0 0 48% 0);opacity:0;transform:translateY(-.55em) rotate(var(--r))}.timeline-item.tl-interactive.umbrella-open .half-b{animation:halfBIn .35s ease-out var(--d) both}.timeline-item.tl-interactive.umbrella-open .half-t{animation:halfTFall .45s cubic-bezier(.5,0,.84,.44) calc(var(--d) + .14s) both}@keyframes halfBIn{0%{opacity:0;transform:translateY(2px)}to{opacity:1;transform:translateY(0)}}@keyframes halfTFall{0%{opacity:0;transform:translateY(-.55em) rotate(var(--r))}25%{opacity:1}78%{opacity:1;transform:translateY(1px) rotate(0)}to{opacity:1;transform:translateY(0) rotate(0)}}.timeline-item.tl-interactive .anim-note,.timeline-item.tl-interactive .timeline-cta .btn,.timeline-item.tl-interactive .timeline-scroll-hint{opacity:0;visibility:hidden;transition:opacity .5s ease,visibility 0s}.timeline-item.tl-interactive.umbrella-open .anim-note{opacity:.8;visibility:visible;transition:opacity .5s ease 1.6s,visibility 0s 1.6s}.timeline-item.tl-interactive.umbrella-open .timeline-cta .btn{opacity:1;visibility:visible;transition:opacity .5s ease 1.8s,visibility 0s 1.8s}.timeline-item.tl-interactive.umbrella-open .timeline-scroll-hint{opacity:1;visibility:visible;transition:opacity .5s ease 2s,visibility 0s 2s}.anim-note{max-width:300px;font-size:.65rem;font-weight:300;letter-spacing:1px;color:var(--color-text-tertiary);text-align:center;opacity:.8;margin-bottom:calc(-1 * var(--space-sm))}.timeline-item.tl-interactive .timeline-era-label .text{font-size:1.05rem;letter-spacing:5px}.timeline-era-years{font-family:var(--font-en);font-size:.7rem;font-weight:200;letter-spacing:2px;color:var(--color-text-tertiary);text-align:center;margin-top:calc(-1 * var(--space-xs));margin-bottom:var(--space-md)}.umbreline-direct{margin-top:var(--space-md);font-size:.75rem;font-weight:300;letter-spacing:2px;color:var(--color-text-tertiary);cursor:pointer;opacity:0;pointer-events:none;transition:opacity .5s ease}.timeline-item.tl-interactive.show-direct .umbreline-direct{opacity:1;pointer-events:auto}.timeline-item.tl-interactive.umbrella-open .umbreline-direct{display:none}@media (prefers-reduced-motion: reduce){.timeline-item.tl-interactive .u-closed,.timeline-item.tl-interactive .u-open,.timeline-item.tl-interactive .u-canopy,.timeline-item.tl-interactive .u-tassels,.timeline-item.tl-interactive .fall-char,.timeline-item.tl-interactive .half-b,.timeline-item.tl-interactive .half-t,.timeline-item.tl-interactive .veil-char,.timeline-item.tl-interactive .u-curtain-l,.timeline-item.tl-interactive .u-curtain-r,.timeline-item.tl-interactive .anim-note,.timeline-item.tl-interactive .timeline-cta .btn,.timeline-item.tl-interactive .timeline-scroll-hint{animation:none!important;transition:none!important}.timeline-item.tl-interactive.umbrella-open .u-closed{display:none}.timeline-item.tl-interactive.umbrella-open .u-open,.timeline-item.tl-interactive.umbrella-open .u-canopy,.timeline-item.tl-interactive.umbrella-open .fall-char,.timeline-item.tl-interactive.umbrella-open .half-b,.timeline-item.tl-interactive.umbrella-open .half-t,.timeline-item.tl-interactive.umbrella-open .veil-char{opacity:1;transform:none}.timeline-item.tl-interactive.umbrella-open .u-curtain-l,.timeline-item.tl-interactive.umbrella-open .u-curtain-r{transform-box:fill-box;opacity:.22}.timeline-item.tl-interactive.umbrella-open .u-curtain-l{transform-origin:0% 0%;transform:rotate(-16deg) translateY(-2px)}.timeline-item.tl-interactive.umbrella-open .u-curtain-r{transform-origin:100% 0%;transform:rotate(16deg) translateY(-2px)}.timeline-item.tl-interactive.umbrella-open .anim-note{opacity:.8;visibility:visible}.timeline-item.tl-interactive.umbrella-open .timeline-cta .btn,.timeline-item.tl-interactive.umbrella-open .timeline-scroll-hint{opacity:1;visibility:visible}}.timeline-item.tl-interactive .bg-overlay{background:none!important}.timeline-item.tl-has-bg .timeline-name{font-family:Qiji,Xingkai SC,STXingkai,Kaiti SC,STKaiti,KaiTi,"Noto Serif SC",serif;font-weight:400;color:#f8f3e8}.timeline-item.tl-has-bg .timeline-name-en{color:#d4604a;font-weight:400}.timeline-item.tl-has-bg .timeline-desc{color:#3a3024e0}.timeline-item.tl-has-bg .anim-note{color:#4a403099}.timeline-item.tl-has-bg .timeline-scroll-hint,.timeline-item.tl-has-bg .umbreline-direct{color:#4a4030a6}.timeline-item.tl-has-bg .timeline-cta .btn{color:#f8f3e8;background:#4a3f2ed1;border-color:#4a3f2ee6}.timeline-item.tl-has-bg .timeline-cta .btn:hover,.timeline-item.tl-has-bg .timeline-cta .btn:active{color:#fffaf0;background:#3a3024eb;border-color:#a8492f}.timeline-item.tl-has-bg .bg-overlay{background:none!important}.timeline-item.tl-has-bg .timeline-era-years{color:#f8f3e8b8}.timeline-item.tl-has-bg .umbreline-hint{color:#4a4030bf}.timeline-item.tl-has-bg .timeline-era-label .text{color:#f8f3e8}.timeline-item.tl-has-bg .timeline-era-label .line{background:#f8f3e8;opacity:.7}.timeline-item.tl-has-bg .umbreline svg{color:#f2ebdd}.timeline-item.tl-has-bg .timeline-cta,.timeline-item.tl-has-bg .umbreline-direct{order:3}.timeline-item.tl-has-bg .umbreline{margin-bottom:var(--space-lg)}.timeline-item.tl-has-bg .timeline-desc{margin-top:0;margin-bottom:var(--space-md)}.timeline-item[data-id=wei_jin] .timeline-name,.timeline-item[data-id=song] .timeline-name,.timeline-item[data-id=qing] .timeline-name,.timeline-item[data-id=xihu_silk] .timeline-name,.timeline-item[data-id=guohuo] .timeline-name{color:#38301f}.timeline-item[data-id=wei_jin] .timeline-name-en,.timeline-item[data-id=song] .timeline-name-en,.timeline-item[data-id=qing] .timeline-name-en,.timeline-item[data-id=xihu_silk] .timeline-name-en,.timeline-item[data-id=guohuo] .timeline-name-en{color:#a8492f}.timeline-item[data-id=wei_jin] .timeline-era-label .text,.timeline-item[data-id=song] .timeline-era-label .text,.timeline-item[data-id=qing] .timeline-era-label .text,.timeline-item[data-id=xihu_silk] .timeline-era-label .text,.timeline-item[data-id=guohuo] .timeline-era-label .text{color:#4a4030}.timeline-item[data-id=wei_jin] .timeline-era-label .line,.timeline-item[data-id=song] .timeline-era-label .line,.timeline-item[data-id=qing] .timeline-era-label .line,.timeline-item[data-id=xihu_silk] .timeline-era-label .line,.timeline-item[data-id=guohuo] .timeline-era-label .line{background:#4a4030;opacity:.55}.timeline-item[data-id=wei_jin] .timeline-era-years,.timeline-item[data-id=song] .timeline-era-years,.timeline-item[data-id=qing] .timeline-era-years,.timeline-item[data-id=xihu_silk] .timeline-era-years,.timeline-item[data-id=guohuo] .timeline-era-years{color:#4a4030ad}.timeline-item[data-id=wei_jin] .umbreline svg,.timeline-item[data-id=song] .umbreline svg,.timeline-item[data-id=qing] .umbreline svg,.timeline-item[data-id=xihu_silk] .umbreline svg,.timeline-item[data-id=guohuo] .umbreline svg{color:#4a3f2e}.timeline-item:not(.tl-active) *{animation-play-state:paused!important}.detail-page{position:relative;width:100%;height:100%;overflow:hidden}.detail-viewer{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;background:radial-gradient(ellipse 75% 55% at 50% 42%,#e8dcc817,#0c0c0c00 72%)}.detail-gesture-hint{position:absolute;bottom:50%;left:50%;transform:translate(-50%,120px);z-index:5;display:flex;flex-direction:column;align-items:center;gap:var(--space-sm);pointer-events:none}.detail-gesture-hint span{font-size:.75rem;font-weight:300;letter-spacing:2px;color:var(--color-text-tertiary);opacity:.7}.detail-panel{position:absolute;bottom:0;left:0;right:0;z-index:10;background:linear-gradient(to top,rgba(12,12,12,.95) 0%,rgba(12,12,12,.8) 60%,transparent 100%);padding:var(--space-3xl) var(--space-lg) calc(env(safe-area-inset-bottom) + var(--space-xl) + 48px);transform:translateY(0);transition:transform var(--duration-normal) var(--ease-out)}.detail-panel.collapsed{transform:translateY(calc(100% - 180px))}.detail-page.has-bg .detail-viewer,.detail-page.has-bg .detail-panel{background:none}.detail-panel-handle{position:absolute;top:var(--space-sm);left:50%;transform:translate(-50%);width:36px;height:4px;border-radius:2px;background:var(--color-divider-strong);cursor:pointer}.detail-panel-header{margin-bottom:var(--space-lg)}.detail-panel-era{display:inline-flex;align-items:center;gap:var(--space-sm);margin-bottom:var(--space-sm)}.detail-panel-era .pill{font-size:.7rem}.detail-panel-name{font-size:1.75rem;font-weight:100;letter-spacing:6px;color:var(--color-text-primary);margin-bottom:var(--space-xs)}.detail-panel-period{font-size:.75rem;font-weight:300;letter-spacing:2px;color:var(--color-text-tertiary);margin-bottom:var(--space-md)}.detail-panel-body{max-height:40vh;overflow-y:auto;-webkit-overflow-scrolling:touch}.detail-panel-body::-webkit-scrollbar{display:none}.detail-tab-content{font-size:.875rem;font-weight:300;line-height:1.9;color:var(--color-text-secondary)}.detail-tab-content p{margin-bottom:var(--space-md)}.detail-meta{display:flex;flex-wrap:wrap;gap:var(--space-sm);margin-top:var(--space-lg);padding-top:var(--space-lg);border-top:1px solid var(--color-divider)}.detail-meta-item{display:flex;align-items:center;gap:var(--space-xs);font-size:.75rem;color:var(--color-text-tertiary)}.detail-meta-item .label{color:var(--color-text-tertiary)}.detail-meta-item .value{color:var(--color-text-secondary)}.detail-nav{position:fixed;bottom:calc(env(safe-area-inset-bottom) + var(--space-2xl));left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm);padding:0 var(--space-lg);pointer-events:none}.detail-nav-btn{pointer-events:auto;flex-shrink:0;display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;color:var(--color-text-secondary);background:#0c0c0c99;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--color-divider);border-radius:var(--radius-full);cursor:pointer;transition:all var(--duration-fast) var(--ease-out)}.detail-nav-btn:hover,.detail-nav-btn:active{color:var(--color-text-primary);border-color:var(--color-accent)}.detail-nav-btn.disabled{opacity:.3;pointer-events:none}.detail-nav-btn svg{width:16px;height:16px}.material-tags{display:flex;flex-wrap:wrap;gap:var(--space-sm);margin-bottom:var(--space-md)}.material-tag{padding:var(--space-xs) var(--space-sm);font-size:.7rem;font-weight:300;letter-spacing:1px;color:var(--color-text-secondary);border:1px solid var(--color-divider);border-radius:var(--radius-full)}.detail-panel-period .material-tags{display:inline;margin-left:6px;margin-bottom:0}.detail-panel-period .material-tag{display:inline-block;margin:2px 3px 2px 0;padding:2px 8px}.detail-tags{pointer-events:auto;flex:1;display:flex;justify-content:center;gap:var(--space-sm)}.detail-tag-btn{font-family:var(--font-cn);font-size:.75rem;font-weight:300;letter-spacing:2px;color:var(--color-text-secondary);background:#0c0c0c99;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--color-divider);border-radius:var(--radius-full);padding:var(--space-xs) var(--space-md);cursor:pointer;transition:all var(--duration-fast) var(--ease-out)}.detail-tag-btn:hover,.detail-tag-btn:active,.detail-tag-btn.active{color:var(--color-text-primary);border-color:var(--color-accent)}.sheet-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#00000073;opacity:0;pointer-events:none;transition:opacity .3s ease;z-index:30}.sheet-overlay.visible{opacity:1;pointer-events:auto}.detail-sheet{position:absolute;left:0;right:0;bottom:0;max-height:62%;display:flex;flex-direction:column;background:#f6f2e9e6;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:1px solid rgba(93,74,52,.18);border-radius:20px 20px 0 0;transform:translateY(105%);transition:transform .35s var(--ease-out);z-index:31}.detail-sheet.open{transform:translateY(0)}.sheet-handle{width:40px;height:4px;margin:10px auto 4px;border-radius:2px;background:#5d4a344d;cursor:pointer;flex-shrink:0}.sheet-title{font-family:var(--font-cn);font-size:.8rem;font-weight:500;letter-spacing:4px;text-align:center;color:#857050;padding:var(--space-sm) 0;flex-shrink:0}.sheet-body{overflow-y:auto;padding:var(--space-sm) var(--space-lg) var(--space-xl);-webkit-overflow-scrolling:touch}.sheet-text{font-size:.85rem;font-weight:300;line-height:1.9;color:#4a3c2c}.sheet-sources{list-style:none;padding:0;margin:0}.sheet-sources li{position:relative;padding-left:.9em;font-size:.78rem;font-weight:300;line-height:1.9;color:#5d4a34;margin-bottom:var(--space-sm)}.sheet-sources li:before{content:"·";position:absolute;left:0;color:#b5402c}.sheet-figure{margin:0 0 var(--space-lg)}.sheet-figure img{display:block;width:100%;max-height:50vh;object-fit:contain;border-radius:var(--radius-md);background:#ffffff0a}.sheet-figure figcaption{margin-top:var(--space-sm);font-size:.72rem;font-weight:300;letter-spacing:1px;line-height:1.7;text-align:center;color:#857050}.detail-page.has-bg .detail-panel-name{color:#4f3d29}.detail-page.has-bg .detail-panel-period{color:#857050}.detail-page.has-bg .detail-panel-era .pill,.detail-page.has-bg .material-tag{color:#6b5638;border-color:#6b563859}.detail-page.has-bg .tab{color:#98825e}.detail-page.has-bg .tab.active{color:#4f3d29}.detail-page.has-bg .tab.active:after{background:#a83a2a}.detail-page.has-bg .tab-group{border-bottom-color:#5d4a342e}.detail-page.has-bg .detail-tab-content{color:#5d4a34}.detail-page.has-bg .detail-panel-handle{background:#5d4a344d}.detail-page.has-bg .detail-gesture-hint span{color:#6b5638}.detail-page.has-bg .detail-nav-btn,.detail-page.has-bg .detail-tag-btn{color:#5d4a34;background:#fffdf68c;border-color:#5d4a3447}.detail-page.has-bg .detail-nav-btn:hover,.detail-page.has-bg .detail-nav-btn:active,.detail-page.has-bg .detail-tag-btn:hover,.detail-page.has-bg .detail-tag-btn:active,.detail-page.has-bg .detail-tag-btn.active{color:#3f2f1c;border-color:#a83a2a}.detail-panel-years{font-size:.75rem;color:var(--color-text-tertiary)}.detail-page.has-bg .detail-panel-years{color:#857050}.detail-page.has-bg .nav-back,.detail-page.has-bg .nav-title{color:#f8f3e8f2;text-shadow:0 1px 8px rgba(80,52,26,.35)}.detail-banner{position:absolute;top:calc(env(safe-area-inset-top,0px) + 66px);left:0;right:0;z-index:6;display:flex;flex-direction:column;align-items:center;pointer-events:none}.detail-banner-name{font-family:Qiji,Xingkai SC,STXingkai,Kaiti SC,STKaiti,KaiTi,"Noto Serif SC",serif;font-size:2.4rem;font-weight:400;letter-spacing:12px;text-indent:12px;line-height:1.2;color:#f8f3e8;text-shadow:0 1px 14px rgba(80,52,26,.4);text-align:center}.detail-banner-name-en{font-family:var(--font-en);font-size:.72rem;font-weight:400;letter-spacing:3px;text-transform:uppercase;color:#d4604a;margin-top:0;text-align:center}.detail-page:not(.has-bg) .detail-banner-name{color:var(--color-text-primary);text-shadow:none}.detail-page:not(.has-bg) .detail-banner-name-en{color:var(--color-text-tertiary);text-shadow:none}.detail-viewer{z-index:2}.detail-painting{position:absolute;top:47%;left:50%;transform:translate(-50%,-50%);z-index:1;width:min(84%,600px);margin:0;clip-path:polygon(14px 0,calc(100% - 14px) 0,100% 14px,100% calc(100% - 14px),calc(100% - 14px) 100%,14px 100%,0 calc(100% - 14px),0 14px);pointer-events:none}.detail-painting img{display:block;width:100%;aspect-ratio:1.8;object-fit:cover}.detail-model-img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:contain;z-index:2;pointer-events:none}#detail-page-pre_qin .detail-painting img{filter:saturate(.72) brightness(.9)}@media (min-width: 900px){.detail-painting{top:39.5%;left:50%;width:86%;max-width:none;height:45%;aspect-ratio:auto}}.detail-stage{display:contents}@media (max-width: 899px){.detail-page{display:flex;flex-direction:column}.detail-page .top-nav{position:static;flex-shrink:0;padding-top:calc(env(safe-area-inset-top) + var(--space-xl))}.detail-page .top-nav .nav-back{transform:translateY(var(--space-xl))}.detail-page .detail-banner{position:static;flex-shrink:0;padding:0 var(--space-lg) var(--space-xs)}.detail-page .detail-banner-name{margin:0;font-size:2.4rem;letter-spacing:8px;text-indent:8px;line-height:1.15}.detail-page .detail-banner-name-en{margin-top:0}.detail-page .detail-stage{display:block;position:relative;flex:1 1 auto;min-height:200px;z-index:1}.detail-page .detail-viewer{position:absolute;top:0;right:0;bottom:0;left:0}.detail-page .detail-painting{top:47%;left:50%;width:84%;max-width:none;height:min(88%,46.7vw);aspect-ratio:auto}.detail-page .detail-painting img{height:100%;aspect-ratio:auto}.detail-page .detail-panel{position:static;flex:0 0 auto;max-height:54%;overflow-y:auto;transform:none!important;padding:var(--space-md) var(--space-lg) var(--space-xs)}.detail-page .detail-panel-handle{display:none}.detail-page .detail-panel-header{margin-bottom:var(--space-sm)}.detail-page .detail-panel-body{max-height:none}.detail-page .detail-panel-period{display:block;margin-bottom:var(--space-sm)}.detail-page .material-tags{display:flex;margin-bottom:var(--space-md);margin-left:0}.detail-page .material-tag{display:inline-block;margin:2px 3px 2px 0;padding:2px 8px}.detail-page .detail-gesture-hint{position:static;transform:none;flex-shrink:0;padding:2px 0}.detail-page .detail-nav{position:static;flex-shrink:0;padding:var(--space-xs) var(--space-lg) calc(env(safe-area-inset-bottom) + var(--space-xl) + var(--space-sm))}}#detail-page-guohuo .detail-banner-name,#detail-page-qing .detail-banner-name,#detail-page-xihu_silk .detail-banner-name{color:#38301f;text-shadow:none}