.works-scene{display:block;isolation:isolate}
.works-carousel{position:absolute;left:40px;top:140px;width:1120px;height:400px;perspective:1200px;touch-action:pan-y;cursor:grab;outline:none}
.works-carousel:active{cursor:grabbing}
.works-ring{position:absolute;inset:0;transform-style:preserve-3d}
.category-card{position:absolute;left:420px;top:30px;width:280px;height:350px;margin:0;padding:0;border:0;border-radius:12px;background:var(--cover);color:#202020;cursor:pointer;transform-style:preserve-3d;backface-visibility:visible;transition:none;text-decoration:none;box-shadow:0 8px 16px -6px #29233538,0 26px 38px -13px #29233555;will-change:transform;user-select:none;-webkit-user-select:none}
.category-cover{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;border:1px solid #ffffff65;border-radius:12px;overflow:hidden}
.category-number{position:absolute;left:22px;top:20px;font-size:13px;letter-spacing:.12em;opacity:.55}
.category-cover strong{font-size:32px;letter-spacing:.05em;font-weight:600}
.category-description{margin-top:16px;font-size:14px;letter-spacing:.08em;opacity:.65;min-height:20px}
.category-card:focus-visible{outline:2px solid #01ff01;outline-offset:6px}
.works-selector{position:absolute;left:0;right:0;top:557px;display:flex;justify-content:center;gap:24px}
.works-selector button{position:relative;border:0;background:none;padding:8px 0;color:#b3b3b3;font:14px Arial,"PingFang SC",sans-serif;cursor:pointer;transition:color .2s}
.works-selector button[aria-pressed="true"],.works-selector button:hover{color:#111}
.works-selector button::after{content:"";position:absolute;left:50%;bottom:-4px;width:6px;height:6px;border-radius:50%;transform:translateX(-50%);background:#01ff01;opacity:0;transition:opacity .2s}
.works-selector button[aria-pressed="true"]::after{opacity:1}
.works-scroll{position:absolute;left:558px;top:620px;width:84px;padding:0;border:0;background:none;cursor:pointer;z-index:8}
.works-scroll img{display:block;width:100%;height:auto;pointer-events:none}
.works-live{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.works-carousel:focus-visible,.works-selector button:focus-visible,.works-scroll:focus-visible{outline:2px solid #01ff01;outline-offset:5px}
@media(prefers-reduced-motion:reduce){.category-card{transition:none}}

.category-card .category-cover{transition:box-shadow .25s}
.category-card:hover .category-cover,.category-card:focus-visible .category-cover{box-shadow:0 16px 28px -14px #30304035}
.category-detail{display:block;height:auto;min-height:760px;padding:130px 90px 70px;overflow:visible}
.category-return{display:inline-block;font-size:14px;color:#888;text-decoration:none;padding:8px 0}
.category-return:hover{color:#111;text-decoration:underline;text-decoration-color:#01ff01}
.category-detail h1{font-size:30px;font-weight:600;letter-spacing:.04em;margin:14px 0 32px}
.category-projects{display:flex;justify-content:center;gap:34px;align-items:flex-start}
.category-project{width:280px;margin:0}
.project-placeholder{width:100%;aspect-ratio:4/5;border-radius:12px}
.category-project h2{font-size:16px;font-weight:500;margin:18px 0 0;text-align:center}
.category-projects:has(.category-project:only-child) .category-project{width:400px}
.works-ring{pointer-events:none}
.category-card{pointer-events:auto}

.category-cover>img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}

.card-reflection{position:absolute;top:calc(100% + 7px);left:0;width:100%;height:45px;overflow:hidden;pointer-events:none;opacity:.2;mask-image:linear-gradient(#000,transparent);-webkit-mask-image:linear-gradient(#000,transparent)}
.card-reflection img{display:block;width:100%;height:350px;transform:scaleY(-1);border-radius:12px;pointer-events:none}

.works-carousel.is-dragging,.works-carousel.is-dragging .category-card{cursor:grabbing}
.category-card{-webkit-user-drag:none}

.category-project{position:relative;transition:transform .25s cubic-bezier(.2,.65,.3,1)}
.category-project:hover{transform:translateY(-5px) scale(1.09);z-index:3}

/* Paint the complete ring before deferred scripts or cover images finish loading. */
.category-card[data-index="0"]{transform:translate3d(0.0000px,-0.0000px,0.0000px) rotateY(0.0000deg) scale(1.0000);opacity:1.0000;z-index:6}
.category-card[data-index="1"]{transform:translate3d(307.4390px,-11.0000px,-155.0000px) rotateY(55.4256deg) scale(0.9350);opacity:0.8350;z-index:4}
.category-card[data-index="2"]{transform:translate3d(307.4390px,-33.0000px,-465.0000px) rotateY(55.4256deg) scale(0.8050);opacity:0.5050;z-index:1}
.category-card[data-index="3"]{transform:translate3d(0.0000px,-44.0000px,-620.0000px) rotateY(0.0000deg) scale(0.7400);opacity:0.3400;z-index:0}
.category-card[data-index="4"]{transform:translate3d(-307.4390px,-33.0000px,-465.0000px) rotateY(-55.4256deg) scale(0.8050);opacity:0.5050;z-index:1}
.category-card[data-index="5"]{transform:translate3d(-307.4390px,-11.0000px,-155.0000px) rotateY(-55.4256deg) scale(0.9350);opacity:0.8350;z-index:4}
