/* A dark threshold, a pair of claws, then the collection. */
.entrance-pending body{background:#000}
.entrance-pending body>header,.entrance-pending body>main,.entrance-pending body>footer{visibility:hidden;animation:entrance-failsafe 0s 9s forwards}
@keyframes entrance-failsafe{to{visibility:visible}}
body.entering{overflow:hidden}
.threshold{position:fixed;inset:0;width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;border:0;overflow:hidden;color:#eadef1;background:#000;isolation:isolate;--scene:6200ms}
.threshold::backdrop{background:#000;backdrop-filter:none}
.threshold[open]{display:block}
.threshold-world{position:absolute;inset:-16px;perspective:850px;overflow:hidden;animation:threshold-shudder var(--scene) linear both}
.threshold-aura{position:absolute;inset:-20%;background:radial-gradient(ellipse at 50% 48%,#71419780,transparent 48%);opacity:0;animation:threshold-aura var(--scene) linear both}
.threshold-copy{position:absolute;inset:43% 0 auto;text-align:center;z-index:5;pointer-events:none;animation:threshold-copy var(--scene) both}
.threshold-copy span{display:block;font:9px Georgia,serif;letter-spacing:.5em;color:#a797b7;margin-bottom:22px}
.threshold-copy p{font:clamp(15px,1.5vw,22px) Georgia,"SimSun",serif;letter-spacing:.32em;margin:0;color:#e8d7f2}
.threshold-seam{display:none}
.threshold-hand{position:absolute;left:50%;top:50%;width:min(94vw,1200px);height:70vh;display:flex;align-items:center;justify-content:center;max-width:none;pointer-events:none;opacity:0;filter:brightness(2.8) saturate(.22) contrast(1.18) drop-shadow(0 0 1px #c1b6cd88) drop-shadow(0 0 18px #45354b80);will-change:transform,opacity;z-index:3;backface-visibility:hidden}
.threshold-hand canvas,.threshold-hand img{width:100%;height:100%;object-fit:contain;display:block}
.threshold-hand--top{animation:threshold-hand-top var(--scene) both}
.threshold-hand--bottom{width:min(78vw,1000px);animation:threshold-hand-bottom var(--scene) both}
.threshold-cracks{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:4}
.threshold-veil{position:absolute;inset:0;z-index:2;background:#000;animation:threshold-veil var(--scene) both}
.threshold-veil--left{clip-path:polygon(0 0,50% 0,49% 23%,51% 38%,48.5% 49%,51.5% 61%,49% 78%,50% 100%,0 100%);transform-origin:left center}
.threshold-veil--right{clip-path:polygon(50% 0,100% 0,100% 100%,50% 100%,49% 78%,51.5% 61%,48.5% 49%,51% 38%,49% 23%);transform-origin:right center;animation-name:threshold-veil-right}
.threshold-web{position:absolute;width:min(38vw,520px);height:auto;fill:none;stroke:#d0cbd5;stroke-width:.6;opacity:0;z-index:4;pointer-events:none;animation:threshold-silk var(--scene) both;transform-origin:0 0}
.threshold-web--left{left:0;top:0}.threshold-web--right{right:0;bottom:0;rotate:180deg;transform-origin:100% 100%;animation-delay:.12s}
.chamber-web{position:absolute;pointer-events:none;fill:none;stroke:#b8afc3;stroke-width:.7;width:28%;opacity:.17;z-index:1;top:10%;left:7%}
.chamber-web--right{top:auto;left:auto;bottom:13%;right:7%;rotate:180deg;width:23%}
.arch,.arch:after{border:0}.web-spider{fill:#706c78;stroke:#89818f;stroke-width:.65}
.threshold-mark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;width:90%;opacity:0;animation:threshold-mark var(--scene) both;z-index:5}
.threshold-mark span{font:clamp(20px,3vw,42px) Georgia,serif;letter-spacing:.25em}
.threshold-mark p{margin-top:22px;font:11px "Microsoft YaHei",sans-serif;letter-spacing:.48em;color:#b09bbf}
.threshold-skip{position:absolute;right:32px;bottom:28px;z-index:10;border:1px solid #b194c650;background:#0c0713b3;padding:12px 18px;color:#bcaaca;font:10px "Microsoft YaHei",sans-serif;letter-spacing:.16em;cursor:pointer}
.threshold-skip:hover{border-color:#dcc2ed;color:#f3e7fa}
.threshold-skip:focus-visible{outline:2px solid #d9b9ef;outline-offset:4px}
.threshold.departing{opacity:0;transition:opacity .7s ease;pointer-events:none}
.replay-entrance{padding:9px 0;font:10px "Microsoft YaHei",sans-serif;letter-spacing:.08em;color:#a99ab5;border-bottom:1px solid #644b79;cursor:pointer}
@keyframes threshold-copy{0%,4%{opacity:0;transform:translateY(8px)}13%,25%{opacity:1;transform:none}34%,100%{opacity:0;transform:translateY(-10px)}}
@keyframes threshold-aura{0%,25%{opacity:0}40%{opacity:.5}47%{opacity:1}57%{opacity:.5}72%{opacity:.8}100%{opacity:.2}}
@keyframes threshold-seam{0%,26%{opacity:0;transform:scaleY(0)}36%{opacity:.6;transform:scaleY(.6)}43%{opacity:1;transform:scaleY(1)}55%{opacity:.9;transform:scaleY(1.2) scaleX(2)}69%{opacity:0;transform:scaleY(1.2) scaleX(40)}100%{opacity:0}}
@keyframes threshold-hand-top{0%,15%{opacity:0;transform:translate(-68%,-123%) translateZ(-460px) rotate(-28deg)}26%{opacity:.5;transform:translate(-59%,-110%) translateZ(-200px) rotate(-18deg)}33%{opacity:.8;transform:translate(-53%,-91%) translateZ(-60px) rotate(-8deg);animation-timing-function:cubic-bezier(.2,.8,.3,1)}38%{opacity:1;transform:translate(-54%,-89%) translateZ(165px) rotate(-4deg)}42%{transform:translate(-57%,-98%) translateZ(95px) rotate(-13deg)}49%{transform:translate(-54%,-93%) translateZ(150px) rotate(-6deg)}55%{opacity:1;transform:translate(-60%,-97%) translateZ(175px) rotate(-12deg);animation-timing-function:cubic-bezier(.4,0,.3,1)}70%{opacity:.9;transform:translate(-72%,-114%) translateZ(200px) rotate(-22deg)}85%{opacity:.15;transform:translate(-103%,-155%) translateZ(210px) rotate(-35deg)}95%,100%{opacity:0;transform:translate(-115%,-180%) translateZ(200px) rotate(-38deg)}}
@keyframes threshold-hand-bottom{0%,20%{opacity:0;transform:translate(-23%,16%) translateZ(-430px) rotate(27deg)}30%{opacity:.4;transform:translate(-35%,2%) translateZ(-210px) rotate(21deg)}36%{opacity:.85;transform:translate(-43%,-13%) translateZ(-35px) rotate(11deg);animation-timing-function:cubic-bezier(.2,.8,.3,1)}41%{opacity:1;transform:translate(-42%,-18%) translateZ(155px) rotate(4deg)}45%{transform:translate(-37%,-11%) translateZ(80px) rotate(16deg)}52%{transform:translate(-43%,-15%) translateZ(160px) rotate(9deg)}58%{opacity:1;transform:translate(-37%,-9%) translateZ(165px) rotate(16deg);animation-timing-function:cubic-bezier(.4,0,.3,1)}73%{opacity:.85;transform:translate(-19%,16%) translateZ(190px) rotate(29deg)}86%{opacity:.15;transform:translate(9%,64%) translateZ(210px) rotate(41deg)}96%,100%{opacity:0;transform:translate(20%,100%) translateZ(200px) rotate(45deg)}}
@keyframes threshold-shudder{0%,37%,46%,54%,61%,100%{transform:none}38%{transform:translate(-9px,6px) rotate(-.35deg)}39%{transform:translate(7px,-5px) rotate(.3deg)}40%{transform:translate(-3px,2px)}41%{transform:translate(9px,7px) rotate(.45deg)}42%{transform:translate(-7px,-5px) rotate(-.3deg)}43%{transform:translate(4px,3px)}44%{transform:translate(-2px,-1px)}55%{transform:translate(-5px,2px) rotate(-.16deg)}56%{transform:translate(4px,-3px)}58%{transform:translate(-3px,1px)}60%{transform:translate(1px,-1px)}}
@keyframes threshold-silk{0%,9%{opacity:0;transform:none}20%{opacity:.1}35%{opacity:.23;transform:skew(-2deg,1deg)}42%{opacity:.3;transform:skew(3deg,-2deg)}54%{opacity:.21;transform:none}69%{opacity:.14;transform:scale(1.15) skew(-5deg,2deg)}84%,100%{opacity:0;transform:scale(1.3)}}
@keyframes threshold-veil{0%,53%{opacity:1;transform:none}83%,100%{opacity:0;transform:translateX(-70%) scaleX(.6)}}
@keyframes threshold-veil-right{0%,53%{opacity:1;transform:none}83%,100%{opacity:0;transform:translateX(70%) scaleX(.6)}}
@keyframes threshold-mark{0%,72%{opacity:0;filter:blur(10px)}84%,91%{opacity:1;filter:blur(0)}100%{opacity:0;filter:blur(2px)}}
/* Equal visible longest edge, with transparent artwork kept in its native ratio. */
.levitation{inset:auto;left:50%;top:27%;width:min(70%,36vh);height:auto;aspect-ratio:1;translate:-50% 0}
.jewel-button{display:flex;justify-content:center;align-items:center;aspect-ratio:1}
.jewel-button:focus-visible{outline:none}.jewel-button:focus-visible img{filter:brightness(1.35) drop-shadow(0 0 18px #a894ba66)}
#name:focus{outline:none}
.jewel-button img{flex:none;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}
.piece img{width:58px;height:58px}
.viewer-image{display:flex;justify-content:center;align-items:center}
.viewer-image img{width:min(100%,62vh);height:min(100%,62vh);max-width:100%;max-height:100%;object-fit:contain}
@media(min-width:1500px){.piece img{width:72px;height:72px}}
@media(max-width:1000px){.piece img{width:44px;height:44px}}
@media(max-width:720px){.threshold-hand{width:135vw;height:57vh}.threshold-hand--bottom{width:120vw}.threshold-skip{right:18px;bottom:22px}.threshold-copy p{letter-spacing:.2em}.threshold-copy span{font-size:8px;letter-spacing:.35em}.threshold-mark span{font-size:23px;letter-spacing:.17em}.threshold-mark p{font-size:10px;letter-spacing:.3em}.levitation{top:27%;width:min(70%,260px)}.piece img{width:48px;height:48px;max-width:100%}.replay-entrance{font-size:9px}.viewer-image img{width:100%;height:100%}}
@media(prefers-reduced-motion:reduce){.entrance-pending body>header,.entrance-pending body>main,.entrance-pending body>footer{visibility:visible}.threshold{display:none!important}.threshold.departing{transition:none}}