/* HOUCHENWU / suspended in silk. */
.webshoe-gallery{position:relative;isolation:isolate;overflow:hidden;min-height:800px;height:clamp(800px,calc(100svh - 78px),1060px);background:#08070b;color:#d7cdda;border-block:1px solid #a88cac20;scroll-margin-top:78px}
.webshoe-gallery:before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 67% 46%,#6455681a,transparent 48%),radial-gradient(ellipse at 7% 90%,#30223332,transparent 50%)}
.webshoe-topline{position:absolute;top:35px;left:6vw;right:6vw;display:flex;justify-content:space-between;gap:20px;font:8px Georgia,serif;letter-spacing:.25em;color:#9d8ca9;z-index:4;pointer-events:none}.webshoe-topline span:last-child{color:#716879}
.webshoe-copy{position:absolute;left:6vw;top:23%;width:clamp(240px,23vw,365px);z-index:4;pointer-events:none}
.webshoe-copy .webshoe-kicker{font:8px Georgia,serif;letter-spacing:.25em;color:#a997b9;display:flex;align-items:center;gap:13px}.webshoe-kicker:before{content:"";height:1px;width:32px;background:#ad8cba69}
.webshoe-copy h2{margin:26px 0 24px;font:400 clamp(42px,4.4vw,70px)/1.2 "Songti SC","SimSun",serif;letter-spacing:.045em}.webshoe-copy h2 em{display:block;font-style:normal;color:#a08aac;margin-top:9px}
.webshoe-copy>p{font:12px/2.25 "SimSun",serif;letter-spacing:.04em;color:#998d9f;max-width:285px;margin:0 0 28px}
.webshoe-current{border-top:1px solid #bda1cc26;padding-top:24px;min-height:95px}.webshoe-current>span{font:8px Georgia,serif;letter-spacing:.2em;color:#9a80ab}.webshoe-current h3{font:400 21px/1.5 "SimSun",serif;margin:11px 0 7px;color:#dacee2}.webshoe-current small{display:block;font:7px/1.7 Georgia,serif;letter-spacing:.09em;color:#817389}
.webshoe-detail-link{pointer-events:auto;margin-top:22px;padding:12px 0;font:10px "Microsoft YaHei",sans-serif;color:#c6b0d4;letter-spacing:.1em;border-bottom:1px solid #9a80ac66;display:inline-flex;gap:35px}.webshoe-detail-link:hover{color:#f5eafb}.webshoe-detail-link b{font:18px Georgia,serif;font-weight:400}
.webshoe-scene{position:absolute;inset:0 0 0 26%;perspective:1250px;perspective-origin:53% 47%;touch-action:pan-y;cursor:grab;outline:none}.webshoe-scene:active{cursor:grabbing}.webshoe-scene:focus-visible{outline:1px solid #9e80b04f;outline-offset:-30px}
.webshoe-web{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#ae9fbc;stroke-width:.7;opacity:.23;pointer-events:none;mask-image:linear-gradient(90deg,transparent,#000 27%,#000 90%,transparent)}
.webshoe-web .web-glint{stroke:#e0d0ed;opacity:.42}.webshoe-web .web-dim{opacity:.38}
.webshoe-mote{position:absolute;width:2px;height:2px;background:#beaccb;border-radius:50%;opacity:.16;pointer-events:none;animation:webshoe-drift 15s linear infinite}
.webshoe-item{position:absolute;left:53%;top:49%;width:clamp(310px,33vw,470px);aspect-ratio:1.06;transform-style:preserve-3d;will-change:transform,opacity;padding:0;border:0;background:none;cursor:zoom-in;outline:none;user-select:none;-webkit-user-select:none}
.webshoe-suspension{position:absolute;inset:0;transform-origin:63% -80%;animation:webshoe-sway 7.5s ease-in-out infinite alternate;animation-delay:var(--sway-delay,0s)}
.webshoe-item img{width:100%;height:100%;object-fit:contain;pointer-events:none;-webkit-user-drag:none;filter:drop-shadow(0 26px 28px #000a) drop-shadow(0 0 1px #c9b1d140)}
.webshoe-threads{position:absolute;left:0;bottom:94%;width:100%;height:320px;overflow:visible;fill:none;stroke:#baacc7;stroke-width:.6;opacity:.58;pointer-events:none}.webshoe-threads .fine{stroke-width:.4;opacity:.35}.webshoe-threads circle{fill:#ddccea;stroke:none}
.webshoe-item:focus-visible img{filter:drop-shadow(0 0 9px #b498ca8c) drop-shadow(0 26px 28px #000a)}
.webshoe-plinth{position:absolute;left:53%;top:78%;width:45%;height:1px;background:linear-gradient(90deg,transparent,#aa89bf26,transparent);transform:translateX(-50%);pointer-events:none}.webshoe-plinth:after{content:"";position:absolute;inset:-22px -30px;background:radial-gradient(ellipse,#9b79a812,transparent 65%);filter:blur(14px)}
.webshoe-spider{position:absolute;color:#b5a2c2;opacity:.5;width:43px;height:53px;pointer-events:none;z-index:2;animation:webshoe-spider-descent 16s ease-in-out infinite alternate;filter:drop-shadow(0 0 5px #a88cb42e)}.webshoe-spider:before{content:"";position:absolute;left:50%;width:1px;height:300px;bottom:93%;background:linear-gradient(transparent,#c0aec579)}.webshoe-spider svg{width:100%;height:100%;overflow:visible}.webshoe-spider .legs{fill:none;stroke:currentColor;stroke-width:.9;stroke-linecap:round;transform-origin:20px 24px;animation:webshoe-legs 2.8s ease-in-out infinite alternate}.webshoe-spider .body{fill:#221a2b;stroke:currentColor;stroke-width:.8}.webshoe-spider.first{left:37%;top:13%;transform:scale(.7)}.webshoe-spider.second{right:5.5%;top:65%;width:30px;height:38px;animation-delay:-9s;opacity:.4}
.webshoe-footer{position:absolute;left:6vw;right:6vw;bottom:40px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;z-index:5;border-top:1px solid #b795c626;padding-top:23px}
.webshoe-edition{font:8px Georgia,serif;letter-spacing:.16em;color:#8c7b99}.webshoe-edition span{display:block;font-size:7px;color:#645a6d;margin-top:8px}
.webshoe-controls{display:flex;align-items:center;gap:20px}.webshoe-arrow{width:36px;height:36px;color:#c8b4d5;font:22px Georgia,serif;border:1px solid #ad8ac335;border-radius:50%;transition:color .2s,border-color .2s}.webshoe-arrow:hover{color:white;border-color:#cdb4df8c}.webshoe-dots{display:flex;gap:12px}.webshoe-dots button{position:relative;min-width:25px;height:35px;padding:0;font:9px Georgia,serif;color:#776582}.webshoe-dots button:after{content:"";position:absolute;left:10px;bottom:0;width:5px;height:5px;border:1px solid #a786bd66;transform:rotate(45deg)}.webshoe-dots button[aria-current="true"]{color:#e6d6ef}.webshoe-dots button[aria-current="true"]:after{background:#b49bc7;border-color:#b49bc7}
.webshoe-tools{text-align:right}.webshoe-tools button{font:9px "Microsoft YaHei",sans-serif;color:#b099bc;padding:9px 0;letter-spacing:.08em;border-bottom:1px solid #b799c52e}.webshoe-tools p{font:8px "SimSun",serif;color:#7a6b85;margin:9px 0 0;letter-spacing:.08em}
.webshoe-controls button:focus-visible,.webshoe-tools button:focus-visible,.webshoe-detail-link:focus-visible{outline:1px solid #c7aad7;outline-offset:5px}
.webshoe-detail{width:min(980px,94vw);height:min(900px,90svh);border:1px solid #b298c049;background:#0e0a13;color:#ded2e6;padding:36px;overflow:auto}.webshoe-detail::backdrop{background:#050309ed;backdrop-filter:blur(12px)}.webshoe-detail-inner{display:grid;grid-template-columns:1.35fr .8fr;align-items:center;gap:34px;height:100%}.webshoe-detail-inner img{max-height:100%;width:100%;object-fit:contain;min-height:0}.webshoe-detail-inner h3{font:400 27px/1.6 "SimSun",serif}.webshoe-detail-inner p{font:12px/2.2 "SimSun",serif;color:#a994b4}.webshoe-detail-inner small{font:8px/1.8 Georgia,serif;letter-spacing:.17em;color:#a58db5}.webshoe-close{position:absolute;right:12px;top:12px;z-index:2;width:35px;height:35px;font-size:25px;color:#d8c2e5;background:#100a17;border:1px solid #9e80ac66}.webshoe-detail-open{overflow:hidden}
@keyframes webshoe-sway{from{rotate:-1.8deg;translate:-3px 0}to{rotate:1.8deg;translate:3px 7px}}
@keyframes webshoe-drift{to{transform:translate(18px,-55px);opacity:.04}}
@keyframes webshoe-spider-descent{to{translate:0 52px;rotate:5deg}}
@keyframes webshoe-legs{to{transform:scaleX(.9) rotate(3deg)}}
@media(min-width:1800px){.webshoe-item{width:520px}.webshoe-copy{width:390px}.webshoe-copy>p{max-width:340px;font-size:14px}.webshoe-current h3{font-size:24px}}
@media(max-width:1100px){.webshoe-copy{left:5vw;width:230px;top:24%}.webshoe-copy h2{font-size:44px}.webshoe-copy>p{font-size:11px}.webshoe-current h3{font-size:18px}.webshoe-item{width:340px}.webshoe-scene{left:24%}.webshoe-footer{left:5vw;right:5vw;grid-template-columns:1fr auto}.webshoe-edition{display:none}.webshoe-controls{gap:12px}.webshoe-tools p{font-size:7px}}
@media(max-width:760px){
 .webshoe-gallery{height:1000px;min-height:1000px;scroll-margin-top:65px}.webshoe-topline{top:27px;left:24px;right:24px;font-size:7px}.webshoe-topline span:last-child{font-size:6px;letter-spacing:.12em}
 .webshoe-copy{top:85px;left:25px;right:25px;width:auto;text-align:center;pointer-events:none}.webshoe-copy .webshoe-kicker{font-size:7px;justify-content:center}.webshoe-kicker:before{display:none}.webshoe-copy h2{font-size:40px;margin:18px 0 15px}.webshoe-copy h2 em{display:inline;margin-left:12px}.webshoe-copy>p{font-size:11px;max-width:310px;margin:0 auto;line-height:2}
 .webshoe-current{position:absolute;top:570px;left:0;right:0;border:0;padding:0;min-height:80px}.webshoe-current h3{font-size:23px;margin:8px 0}.webshoe-current small{font-size:6px}.webshoe-detail-link{position:absolute;top:666px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:9px;margin:0;padding:10px 0;gap:22px}
 .webshoe-scene{inset:240px 0 305px;perspective:1000px;perspective-origin:50% 47%}.webshoe-item{left:50%;top:53%;width:min(73vw,350px)}.webshoe-web{opacity:.25;mask-image:linear-gradient(0deg,transparent,#000 25%,#000 85%,transparent)}.webshoe-threads{height:240px}.webshoe-plinth{left:50%;top:93%;width:62%}
 .webshoe-spider.first{left:10%;top:28%;width:29px}.webshoe-spider.second{right:5%;top:62%;width:23px}.webshoe-footer{left:24px;right:24px;bottom:28px;display:flex;flex-direction:column;gap:18px;padding-top:24px}.webshoe-controls{gap:18px}.webshoe-dots{gap:11px}.webshoe-tools{display:flex;align-items:center;gap:20px;text-align:center}.webshoe-tools p{font-size:8px}.webshoe-tools button{font-size:9px}
 .webshoe-detail{padding:44px 20px 22px;height:90svh}.webshoe-detail-inner{display:flex;flex-direction:column;gap:15px;text-align:center}.webshoe-detail-inner img{height:70%;min-height:0}.webshoe-detail-inner h3{font-size:21px;margin:12px 0}.webshoe-detail-inner p{display:none}.webshoe-detail-inner small{font-size:7px}
}
@media(max-width:390px){.webshoe-gallery{height:950px;min-height:950px}.webshoe-copy h2{font-size:34px}.webshoe-scene{inset:225px 0 300px}.webshoe-current{top:530px}.webshoe-detail-link{top:625px}.webshoe-controls{gap:10px}.webshoe-dots{gap:7px}.webshoe-tools{gap:16px}.webshoe-tools p{font-size:7px}}
@media(prefers-reduced-motion:reduce){.webshoe-suspension,.webshoe-mote,.webshoe-spider,.webshoe-spider .legs{animation:none!important}.webshoe-item{will-change:auto}}
@media(max-width:390px){.webshoe-copy h2 em{display:block;margin:6px 0 0}.webshoe-copy h2{font-size:33px;line-height:1.1}}
