@font-face{font-family:huaGuangGuYunSongFont;src:url(../media/HuaGuangGuYunSong_subset-s.p.1-gfaziv5l10v.woff2)format("woff2");font-display:swap}@font-face{font-family:huaGuangGuYunSongFont Fallback;src:local(Arial);ascent-override:108.73%;descent-override:20.97%;line-gap-override:0.0%;size-adjust:92.52%}.huaguangguyunsongfont_855f6d9-module__VVpQvW__className{font-family:huaGuangGuYunSongFont,huaGuangGuYunSongFont Fallback}.huaguangguyunsongfont_855f6d9-module__VVpQvW__variable{--font-display:"huaGuangGuYunSongFont", "huaGuangGuYunSongFont Fallback"}
:root{--bp-mobile:480px;--bp-portrait:768px;--bp-tablet:1024px;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);--safe-right:env(safe-area-inset-right,0px);--font-base:"KaiTi", "STKaiti", "Kaiti SC", "楷体", "华文楷体", "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;font-family:var(--font-base)}*{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100dvh}body{font-family:var(--font-base);background:#020612;overflow:hidden}#canvas-container{width:100vw;height:100dvh;position:fixed;top:0;left:0}canvas{display:block}#info-panel{--panel-accent:#c8b5b4;font-family:var(--font-base);pointer-events:none;opacity:0;z-index:1000;width:min(92vw,1180px);min-height:min(82vh,760px);transition:opacity .4s cubic-bezier(.4,0,.2,1),transform .4s cubic-bezier(.4,0,.2,1);position:absolute;transform:translate(-50%,18px)}#info-panel.visible{opacity:1;transform:translate(-50%)}.panel-layout{grid-template-columns:minmax(0,1.2fr) minmax(320px,.88fr);align-items:stretch;gap:clamp(32px,5vw,88px);min-height:min(82vh,760px);display:grid;position:relative}.panel-layout:before{content:"";filter:blur(18px);z-index:-1;background:radial-gradient(circle at 18% 22%,#ffffff0f,#0000 36%),radial-gradient(circle at 82% 78%,#0000004d,#0000 42%);position:absolute;inset:-28px}.panel-copy-column{flex-direction:column;justify-content:flex-start;gap:clamp(28px,4vw,54px);padding:clamp(20px,3vw,40px) 0;display:flex}.panel-copy-section{flex-direction:column;display:flex}.panel-copy-block{margin-left:16px}.panel-section-heading{align-items:center;gap:12px;margin-bottom:4px;display:flex}.panel-section-dot{background:#f1f1f1eb;border-radius:999px;flex-shrink:0;width:6px;height:6px}.panel-section-title{letter-spacing:.16em;color:#f5f5f5f5;font-size:clamp(20px,1.5vw,24px);font-weight:700}.panel-section-subtitle{color:#9999;font-family:var(--font-base);letter-spacing:.08em;margin:0 0 28px 18px;font-size:11px}.panel-title{font-family:var(--font-base);color:#f8f8f8f5;letter-spacing:.12em;margin-bottom:10px;font-size:clamp(28px,2.35vw,40px);font-weight:700;line-height:1.35}.panel-era{color:#cdcdcdb3;letter-spacing:.14em;margin-bottom:18px;font-size:13px}.panel-desc{color:#d6d6d6d1;max-width:44rem;font-family:var(--font-base);letter-spacing:.06em;text-align:justify;text-justify:inter-ideograph;white-space:pre-line;pointer-events:auto;scrollbar-width:none;-ms-overflow-style:none;max-height:clamp(120px,18vh,240px);font-size:14px;line-height:2.2;overflow-y:auto}.panel-desc::-webkit-scrollbar{display:none}.panel-desc-toggle{color:color-mix(in srgb, var(--panel-accent) 78%, #fff 22%);letter-spacing:.16em;cursor:default;pointer-events:none;opacity:.7;background:0 0;border:0;align-self:flex-start;margin-top:12px;padding:0;font-size:12px}.panel-detail-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,44px);display:grid}.panel-meta-list{flex-direction:column;gap:12px;margin-left:16px;display:flex}.panel-meta-row{color:#d9d9d9c7;letter-spacing:.06em;justify-content:space-between;align-items:center;gap:16px;font-size:13px;line-height:1.9;display:flex}.panel-meta-key{color:#b0b0b0b8;flex:0 0 84px}.panel-meta-value{text-align:left;flex:1}.panel-palette{flex-wrap:wrap;gap:14px;margin:8px 0 0 16px;display:flex}.panel-palette-swatch{border:1px solid #ffffff2e;border-radius:999px;width:44px;height:44px;transition:transform .25s,box-shadow .25s;box-shadow:inset 0 2px 4px #0000002e,0 8px 24px #0000003d}.panel-palette-swatch:hover{transform:translateY(-2px)scale(1.04);box-shadow:inset 0 2px 4px #0000002e,0 12px 28px #00000057}.panel-visual-column{justify-content:center;align-items:center;display:flex}.panel-buttons{bottom:calc(28px + var(--safe-bottom));opacity:0;pointer-events:none;z-index:1001;gap:16px;width:max-content;transition:opacity .25s;display:flex;position:fixed;left:50%;transform:translate(-50%)}#info-panel.visible+.panel-buttons{opacity:1;pointer-events:auto}body:has(#info-panel.visible) .panel-buttons{opacity:1;pointer-events:auto}.panel-btn{-webkit-backdrop-filter:blur(12px);color:#ffffffe6;cursor:pointer;background:#14141447;border:1px solid #ffffff29;border-radius:50%;justify-content:center;align-items:center;width:52px;height:52px;transition:all .3s;display:flex;box-shadow:0 4px 20px #0003}.panel-btn:hover{background:#ffffff24;transform:scale(1.05)}.panel-btn:active{transform:scale(.95)}.panel-paper-stage{aspect-ratio:1/1.45;background-color:#f4f1ec;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='paperNoise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23paperNoise)' opacity='0.03'/%3E%3C/svg%3E"),linear-gradient(#ffffff8c,#e4dcd2bf);border:1px solid #e8e4dbe6;flex-direction:column;justify-content:space-between;align-items:center;width:min(100%,430px);padding:40px 30px 26px;display:flex;position:relative;overflow:hidden;box-shadow:0 28px 60px #0000007a}.panel-paper-glyph{writing-mode:vertical-rl;text-orientation:upright;color:#c8b4b429;font-family:var(--font-base);letter-spacing:1.3rem;pointer-events:none;-webkit-user-select:none;user-select:none;font-size:clamp(72px,6vw,92px);font-weight:300;position:absolute}.panel-paper-glyph-primary{top:34px;left:24%;transform:translate(-50%)}.panel-paper-glyph-secondary{top:116px;right:18%;transform:translate(50%)}.panel-paper-heading{z-index:1;width:100%;color:color-mix(in srgb, var(--panel-accent) 72%, #8d4d48 28%);font-family:var(--font-base);letter-spacing:.24em;padding-top:56px;font-size:11px;position:relative}.panel-paper-heading-line{margin-left:64px}.panel-paper-heading-line-shift{margin-top:10px;margin-left:144px}.panel-preview-shell{z-index:1;flex:1;justify-content:center;align-items:flex-end;width:min(100%,300px);padding:24px 0 56px;display:flex;position:relative}.panel-preview-frame{filter:drop-shadow(0 18px 22px #00000038);background-color:#0000;background-position:50%;background-repeat:no-repeat;background-size:contain;width:100%;height:100%}.panel-paper-caption{z-index:1;color:#7a7570d9;width:100%;font-family:var(--font-base);letter-spacing:.12em;font-size:10px;position:relative}.panel-paper-caption-lines{flex-direction:column;gap:4px;display:flex}.panel-paper-caption-line{line-height:1.5}.panel-paper-caption-line-en{color:#7e6c67c2;font-size:9px}@media (max-width:1024px){#info-panel{width:min(94vw,960px)}.panel-layout{grid-template-columns:1fr;gap:24px}.panel-copy-column{order:2;padding-top:0}.panel-visual-column{order:1}}@media (max-width:768px){#info-panel{width:min(96vw,640px);min-height:auto}.panel-layout{min-height:auto}.panel-copy-column{gap:24px}.panel-detail-grid{grid-template-columns:1fr;gap:24px}.panel-title{letter-spacing:.08em;font-size:28px}.panel-desc{font-size:13px;line-height:2}.panel-paper-stage{width:min(100%,360px);padding:28px 22px 20px}.panel-paper-heading-line{margin-left:32px}.panel-paper-heading-line-shift{margin-left:88px}.panel-preview-shell{width:min(100%,240px);padding-bottom:36px}}@media (orientation:portrait),(max-width:768px){#info-panel{width:min(94vw,720px);max-height:calc(100dvh - 140px - var(--safe-top) - var(--safe-bottom));-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding-bottom:16px;overflow:hidden auto}#info-panel.visible{pointer-events:auto}.panel-paper-stage{aspect-ratio:1/1.25}.panel-visual-column{padding-top:calc(56px + var(--safe-top))}.panel-copy-column{padding-top:8px;padding-bottom:24px}.bottom-controls{bottom:calc(28px + var(--safe-bottom));transition:opacity .25s}.panel-paper-heading{text-align:center;padding-top:36px}.panel-paper-heading-line,.panel-paper-heading-line-shift{margin-left:0}.panel-paper-heading-line-shift{margin-top:6px}#hint{bottom:calc(16px + var(--safe-bottom))}}@media (orientation:portrait) and (max-width:480px){#info-panel{width:96vw;max-height:calc(100dvh - 120px - var(--safe-top) - var(--safe-bottom))}.panel-paper-stage{width:min(100%,320px)}.panel-buttons{gap:20px}.panel-btn{width:44px;height:44px}.panel-paper-glyph{letter-spacing:.9rem;font-size:clamp(56px,14vw,72px)}.panel-paper-glyph-secondary{top:clamp(72px,14vh,100px)}}#hint{color:#94a3b899;letter-spacing:1px;pointer-events:none;z-index:100;font-size:12px;position:fixed;bottom:30px;left:50%;transform:translate(-50%)}#loader{z-index:9999;background:#020612;flex-direction:column;justify-content:center;align-items:center;gap:20px;width:100%;height:100dvh;transition:opacity .5s;display:flex;position:fixed;top:0;left:0}#loader.hidden{opacity:0;pointer-events:none}.loader-text{color:#93c5fdcc;letter-spacing:4px;font-size:14px;animation:1.5s ease-in-out infinite pulse}@keyframes pulse{0%,to{opacity:.4}50%{opacity:1}}.bottom-controls{z-index:100;pointer-events:auto;align-items:center;transition:opacity .25s;display:flex;position:fixed;bottom:40px;left:50%;transform:translate(-50%)}body:has(#info-panel.visible) .bottom-controls{opacity:0;pointer-events:none}.control-btn{color:#0009;cursor:pointer;-webkit-backdrop-filter:blur(4px);background:#ffffffd9;border:1px solid #0003;border-radius:50%;justify-content:center;align-items:center;width:44px;height:44px;transition:all .3s;display:flex;position:relative;box-shadow:0 2px 8px #00000014}.control-btn-icon{object-fit:contain;filter:opacity(.6);width:auto;max-width:34px;height:auto;max-height:34px}.control-btn-icon-color{width:24px;max-width:24px;height:24px;max-height:24px}.control-btn-icon-time{width:23px;max-width:23px;height:23px;max-height:23px}.control-btn:hover{color:#000000d9;background:#fffffff2;border-color:#0006}.control-btn:hover .control-btn-icon{filter:opacity(.85)}.control-btn.active{color:#000000e6;border-color:#0009}.control-btn.active .control-btn-icon{filter:opacity(.9)}.active-indicator{border-top:6px solid #0009;border-left:6px solid #0000;border-right:6px solid #0000;width:0;height:0;position:absolute;top:-16px;left:50%;transform:translate(-50%)}.dash-line{border-top:2px dashed #0003;width:40px;height:1px;margin:0 4px}