@font-face{font-family:IndexPingFang;src:url('assets/index-pingfang-regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:IndexPingFang;src:url('assets/index-pingfang-heavy.woff2') format('woff2');font-weight:900;font-display:swap}
@font-face{font-family:IndexPingFang;src:url('assets/index-pingfang-light.woff2') format('woff2');font-weight:300;font-display:swap}
.project-index{position:relative;min-height:100svh;scroll-margin-top:var(--nav-height);background:var(--blue);isolation:isolate}
.project-index-list{position:absolute;top:50.555556svh;left:5.208333%;width:26.302083%;display:flex;flex-direction:column;gap:1.5625vw;z-index:2}
.index-row button{appearance:none;border:0;background:none;color:#1b1b1b;opacity:.9;padding:0;margin:0;text-align:left;font:400 1.979167vw/1.4 IndexPingFang,sans-serif;white-space:nowrap;cursor:pointer;display:inline-grid}
.index-label{grid-area:1/1;transition:opacity .55s cubic-bezier(.22,.61,.36,1);pointer-events:none}
.index-label-regular{font-weight:400;opacity:1}
.index-label-light{font-weight:300;opacity:0}
.index-label-heavy{font-weight:900;opacity:0}
.project-index.has-selection .index-label-regular{opacity:0}
.project-index.has-selection .index-label-light{opacity:.666667}
.project-index.has-selection button[aria-expanded="true"] .index-label-light{opacity:0}
.project-index.has-selection button[aria-expanded="true"] .index-label-heavy{opacity:1}
.project-detail-frame{position:absolute;top:32.037037svh;left:42.447917%;width:28.541667vw;height:33.020833vw;padding:calc(1.25vw - 1.5px);border:1.5px solid white;border-radius:1.666667vw;background:rgba(249,249,249,.8);box-shadow:0 4px 20px #0000002e;opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .35s ease,transform .5s cubic-bezier(.22,.61,.36,1),visibility .35s;pointer-events:none;box-sizing:border-box}
.project-detail-media{width:100%;height:17.708333vw;border:1px solid #cecece;border-radius:1.041667vw;background:#fff;box-sizing:border-box}
.project-index.has-selection .project-detail-frame{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
.project-detail-frame.has-frame-motion{transition:none;will-change:opacity,transform}
.project-detail-frame[data-layout="landscape"]{left:38.489583%;width:44.84375vw;height:27.395833vw}
.project-detail-frame[data-layout="landscape"] .project-detail-media{width:20.46875vw;height:100%}
@media(max-width:700px){
 .project-index{padding:120px 7vw 60px;min-height:100svh}
 .project-index-list{position:relative;inset:auto;width:100%;gap:20px}
 .index-row button{font-size:clamp(19px,5.1vw,30px);min-height:44px}
 .project-frame-area{position:relative;margin-top:36px;min-height:100vw}
 .project-detail-frame,.project-detail-frame[data-layout="landscape"]{box-sizing:border-box;top:0;left:0;width:100%;height:auto;aspect-ratio:861/526;padding:12px;border-radius:20px}
 .project-detail-frame:not([data-layout="landscape"]){width:76%;left:12%;aspect-ratio:548/634}
 .project-detail-media{height:auto;aspect-ratio:500/340;border-radius:12px}
 .project-detail-frame[data-layout="landscape"] .project-detail-media{width:48.34%;height:100%;aspect-ratio:auto}
}
@media(prefers-reduced-motion:reduce){.project-detail-frame{transition:none;transform:none}}