:root{color-scheme:dark;font-family:"Noto Serif SC","Songti SC","SimSun",serif;color:#cab596;background:#080a08}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#080a08}
button{font:inherit}
.site-shell{min-height:100vh;display:flex;justify-content:center;align-items:flex-start;background:radial-gradient(ellipse at center,#171510 0%,#080a08 74%)}
.stage{position:relative;width:min(100vw,56.044vh);aspect-ratio:816/1456;max-width:816px;overflow:hidden;container-type:inline-size;isolation:isolate;user-select:none;touch-action:none}
.artwork,.motion-video,.model-overlay,#pointerCanvas{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:fill;pointer-events:none}
.artwork{z-index:0}.motion-video{z-index:1;opacity:0;transition:opacity .25s}.motion-video.visible{opacity:1}
.dissolve-video{z-index:2;transition:none}
.detail-panel{position:absolute;left:2.8%;right:2.8%;top:23%;height:57.4%;z-index:2;background:rgba(0,0,0,.81);opacity:0;pointer-events:none;transition:opacity .55s}.detail-panel.visible{opacity:1}
.model-overlay{z-index:4;opacity:0;transition:opacity .18s;filter:brightness(1.12) contrast(1.06)}.model-overlay.visible{opacity:1;animation:model-breathe 5s ease-in-out infinite alternate}
@keyframes model-breathe{from{filter:brightness(1.08) contrast(1.06);transform:translateY(0)}to{filter:brightness(1.20) contrast(1.06);transform:translateY(-1px)}}
#pointerCanvas{z-index:4}
.stage.detail-open #pointerCanvas{z-index:2}
.stage.detail-open .detail-panel{z-index:3}
.stage.detail-open .model-overlay{z-index:5}
.stage.dissolving .detail-panel,.stage.dissolving .model-overlay{transition:none}
.archive-heading{position:absolute;left:5.2%;top:3.4%;z-index:5;color:#d2b58b;letter-spacing:.28em;font-size:clamp(10px,2.2cqw,19px);text-shadow:0 1px 12px #000;opacity:.86;pointer-events:none}
.timeline-hint{position:absolute;top:57%;width:100%;z-index:5;text-align:center;color:#c1a987;font-size:clamp(9px,1.5cqw,13px);letter-spacing:.12em;text-shadow:0 2px 6px #000;opacity:.87;transition:opacity .35s;pointer-events:none}
.timeline-hint.hidden,.selected-record.hidden{opacity:0}
.dial-layer{position:absolute;inset:0;width:100%;height:100%;z-index:5;overflow:visible;touch-action:none}
.dial-hit{cursor:grab;pointer-events:all}.dial-hit:active{cursor:grabbing}
.dial-marker{cursor:pointer}.dial-marker circle{fill:#d4af78;stroke:#241c12;stroke-width:1.5;filter:drop-shadow(0 0 3px #ecc58a88)}
.dial-marker.active circle{fill:#f4d6a0;stroke:#ead1a0;stroke-width:2;filter:drop-shadow(0 0 6px #fff1b7)}
.dial-marker text{fill:#c4ad8a;font-size:24px;letter-spacing:.03em;text-shadow:0 1px 4px #050503;paint-order:stroke;stroke:#100e0a;stroke-width:3px;stroke-linejoin:round}
#timelineMarkers.hidden{opacity:0;pointer-events:none}
.selected-record{position:absolute;left:0;right:0;top:58.5%;z-index:5;text-align:center;min-height:2.5em;color:#e3c59a;font-size:clamp(15px,2.55cqw,22.5px);letter-spacing:.16em;text-shadow:0 2px 8px #000;pointer-events:none;transition:opacity .3s}
.selected-record small{display:block;margin-top:.25em;font-size:.78em;color:#baa68d;letter-spacing:.08em}
.detail-content{position:absolute;left:2.8%;right:2.8%;top:23%;height:57.4%;z-index:6;opacity:0;pointer-events:none;transition:opacity .55s}.detail-content.visible{opacity:1;pointer-events:auto}
.close-button{position:absolute;right:5.3%;top:5%;width:9%;aspect-ratio:1;background:transparent;border:2px solid #c4ac88;border-radius:50%;color:#c4ac88;cursor:pointer;transition:transform .2s,background .2s}
.close-button:hover,.close-button:focus-visible{transform:scale(1.08);background:#a489512a;outline:none}
.close-button span{position:absolute;left:17%;top:48%;width:66%;height:2px;background:#c4ac88;transform:rotate(45deg)}.close-button span+span{transform:rotate(-45deg)}
.detail-copy{position:absolute;left:4%;right:4%;bottom:4.2%;text-align:center;color:#bda989;text-shadow:0 2px 5px #000}
.detail-copy h1{font-size:clamp(17px,3.7cqw,32px);font-weight:400;letter-spacing:.1em;line-height:1.5;margin:0 0 .7em;color:#d2b899}
.detail-copy p{font-size:clamp(13px,2.6cqw,22px);font-weight:400;line-height:1.65;letter-spacing:.06em;margin:0;text-align:center;color:#cdb596}
@media(max-aspect-ratio:7/12){.stage{width:100vw}.site-shell{align-items:flex-start}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}
/* Approved PSD composites contain the actual last-frame particles and copy. */
.model-overlay,.model-overlay.visible{filter:none;animation:none;transition:none}
.detail-panel{display:none}
.detail-content{transition:none}
.detail-copy{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.close-button,.close-button:hover,.close-button:focus-visible{border:none;background:transparent;transform:none}
.close-button span{display:none}
.close-button:focus-visible{outline:none}
.stage.detail-open .archive-heading{visibility:hidden}