.directory-card,.is-dealt .directory-card{background:linear-gradient(145deg,#ffffffc9,rgba(var(--glass-color),.12));border:1px solid #efefed;box-shadow:0 9px 20px #343b4409,inset 0 1px 2px #fff;backdrop-filter:none;-webkit-backdrop-filter:none;overflow:hidden}
.directory-card::before{opacity:.45}.directory-card::after{display:none}
.folder-sheets{position:absolute;inset:0;pointer-events:none;z-index:1}
.folder-sheets i{position:absolute;display:block;border:4px solid #fff;border-radius:11px;background:linear-gradient(145deg,rgba(var(--glass-color),.58),rgba(var(--glass-color),.9));box-shadow:0 4px 9px #27303f12;transform-origin:50% 90%;transition:rotate .35s,translate .35s}
.folder-sheets i:nth-child(1){width:42%;height:56%;left:12%;top:16%;rotate:-20deg;background:linear-gradient(150deg,#f6f7f1,rgba(var(--glass-color),.8))}
.folder-sheets i:nth-child(2){width:43%;height:62%;left:30%;top:8%;rotate:0deg;background:linear-gradient(155deg,#ffffffed,rgba(var(--glass-color),.85))}
.folder-sheets i:nth-child(3){width:40%;height:52%;left:51%;top:23%;rotate:20deg;background:linear-gradient(145deg,rgba(var(--glass-color),.45),rgba(var(--glass-color),.95))}
.folder-sheets i::before,.folder-sheets i::after{content:'';position:absolute;left:17%;right:17%;height:2px;border-radius:2px;background:#ffffffa8}
.folder-sheets i::before{top:25%}.folder-sheets i::after{top:33%;right:32%}
.folder-face{position:absolute;left:6%;right:6%;top:44%;bottom:8%;z-index:3;border-radius:14px;background:linear-gradient(170deg,rgba(var(--glass-color),.83) 0%,rgba(var(--glass-color),.58) 25%,#ffffffd9 96%);backdrop-filter:blur(15px) saturate(110%);-webkit-backdrop-filter:blur(15px) saturate(110%);box-shadow:0 5px 10px #30384413,inset 0 1px 1px #ffffffed,inset 0 -1px 2px #fff;clip-path:polygon(0 0,42% 0,54% 18%,100% 18%,100% 100%,0 100%);border:1px solid #ffffffd1;pointer-events:none}
.directory-card .card-corner{position:absolute;top:47%;left:13%;z-index:4;opacity:.65;font:9px Arial,sans-serif;letter-spacing:1px}.card-corner b{display:none}
.directory-card .card-title{position:absolute;left:13%;right:12%;bottom:15%;margin:0;z-index:5}
.directory-card .card-title h2{font-size:20px;line-height:1.28;margin:0;font-weight:650;letter-spacing:-.3px;text-shadow:0 1px 1px #ffffffb3}
.directory-card .card-overline,.directory-card .card-title p,.directory-card .card-open{display:none}
.directory-card:hover .folder-sheets i:nth-child(1){rotate:-25deg;translate:-2px -3px}.directory-card:hover .folder-sheets i:nth-child(2){translate:0 -5px}.directory-card:hover .folder-sheets i:nth-child(3){rotate:25deg;translate:2px -3px}
.directory-card:hover,.directory-card:focus-visible{box-shadow:0 13px 28px #343b4412,inset 0 1px 2px #fff;border-color:#e4e7e1}
.is-selecting .directory-card[style*="z-index: 10"]{box-shadow:0 20px 35px #343b441b,inset 0 1px 2px #fff;border-color:#e1e6dc}
@media(max-width:1100px){.directory-card .card-title h2{font-size:18px}.folder-sheets i{border-width:3px;border-radius:9px}}
@media(max-width:680px){.folder-sheets i{border-width:3px;border-radius:7px}.folder-face{border-radius:9px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.directory-card .card-corner{font-size:7px;top:47%}.directory-card .card-title h2{font-size:12px;line-height:1.25;font-weight:650}.directory-card .card-title{bottom:15%}}
@media(max-width:680px) and (max-height:680px){.directory-card .card-title h2{font-size:10px}.directory-card .card-corner{font-size:6px}}
@media(prefers-reduced-motion:reduce){.folder-sheets i{transition:none}.directory-card:hover .folder-sheets i{rotate:revert;translate:none}}
@media(prefers-reduced-transparency:reduce){.folder-face{background:linear-gradient(170deg,rgb(var(--glass-color)),#fffffff2);backdrop-filter:none;-webkit-backdrop-filter:none}}
/* Palette from the supplied reference: #B1E4E3, #EBDEFC, #FED141. */
.directory-card-1{--glass-color:177,228,227;--glass-ink:#166967}
.directory-card-2{--glass-color:235,222,252;--glass-ink:#70479d}
.directory-card-3{--glass-color:254,209,65;--glass-ink:#695315}
.directory-card-4{--glass-color:161,201,244;--glass-ink:#2e5a88}
.card-deck::before{background:radial-gradient(ellipse at 16% 55%,#b1e4e32b,transparent 38%),radial-gradient(ellipse at 40% 35%,#ebdefc33,transparent 34%),radial-gradient(ellipse at 65% 35%,#fed14121,transparent 35%),radial-gradient(ellipse at 90% 55%,#a1c9f426,transparent 36%)}
.directory-card-4 .folder-sheets i:nth-child(1){background:linear-gradient(150deg,#fff,#b9d8f8)}
.directory-card-4 .folder-sheets i:nth-child(2){background:linear-gradient(155deg,#fff,#a1c9f4)}
.directory-card-4 .folder-sheets i:nth-child(3){background:linear-gradient(145deg,#c6e0fbbb,#8fbef0)}
.directory-card-4 .folder-face{background:linear-gradient(135deg,#a1c9f4cf,#bad9f8b8 65%,#ffffffe6)}
/* Shared folder cards for the project selection views. */
.work-menu.folder-menu{--menu-size:clamp(180px,22vw,255px);display:grid;grid-template-columns:repeat(2,max-content);grid-template-rows:none;grid-auto-rows:max-content;align-content:center;justify-content:center;align-items:center;gap:28px;max-height:none;padding:35px 10px;isolation:isolate}
.work-menu.folder-menu>.directory-card{position:relative;top:auto;left:auto;width:var(--menu-size);height:var(--menu-size);min-height:0;flex:none;transform:none;opacity:1;padding:0;gap:0;animation:menu-folder-in .5s ease both}
.work-menu.folder-menu>.directory-card:nth-child(2){animation-delay:.06s}.work-menu.folder-menu>.directory-card:nth-child(3){animation-delay:.12s}.work-menu.folder-menu>.directory-card:nth-child(4){animation-delay:.18s}
.work-menu.folder-menu>.directory-card .folder-sheets{position:absolute;inset:0}.work-menu.folder-menu>.directory-card .card-title h2{font-size:23px;text-align:left;line-height:1.25}.work-menu.folder-menu>.directory-card.menu-selected{z-index:5;box-shadow:0 20px 35px #343b441b,inset 0 1px 2px #fff}
@keyframes menu-folder-in{from{opacity:0;translate:0 15px}to{opacity:1;translate:0 0}}
@media(max-height:760px){.work-menu.folder-menu{--menu-size:185px;gap:24px;padding:20px 10px}.work-menu.folder-menu>.directory-card .card-title h2{font-size:19px}}
@media(max-width:680px){.work-menu.folder-menu{--menu-size:130px;gap:20px;padding:25px 5px}.work-menu.folder-menu>.directory-card .card-title h2{font-size:14px}.work-menu.folder-menu>.directory-card .card-corner{font-size:8px}}
@media(prefers-reduced-motion:reduce){.work-menu.folder-menu>.directory-card{animation:none}}
.work-menu.folder-menu>.directory-card{background:linear-gradient(145deg,#ffffffc9,rgba(var(--glass-color),.12));border:1px solid #efefed;border-radius:34px;box-shadow:0 9px 20px #343b4409,inset 0 1px 2px #fff}@media(max-width:1100px){.work-menu.folder-menu>.directory-card{border-radius:29px}}@media(max-width:680px){.work-menu.folder-menu>.directory-card{border-radius:23px}}
/* Shenzhen Maixi: supplied project images inside the folder. */
.folder-photos i{overflow:hidden}.folder-photos i::before,.folder-photos i::after{display:none}.folder-photos i img{display:block;width:100%;height:100%;object-fit:cover;border-radius:5px}
.directory-card .folder-photos i:nth-child(1){width:36%;height:55%;left:7%;top:20%;rotate:-23deg;z-index:1}
.directory-card .folder-photos i:nth-child(2){width:36%;height:58%;left:24%;top:9%;rotate:-8deg;z-index:2}
.directory-card .folder-photos i:nth-child(3){width:36%;height:58%;left:43%;top:12%;rotate:8deg;z-index:3}
.directory-card .folder-photos i:nth-child(4){width:34%;height:53%;left:60%;top:24%;rotate:23deg;z-index:4}
.directory-card:hover .folder-photos i:nth-child(1){rotate:-27deg;translate:-2px -3px}.directory-card:hover .folder-photos i:nth-child(2){rotate:-10deg;translate:0 -5px}.directory-card:hover .folder-photos i:nth-child(3){rotate:10deg;translate:0 -5px}.directory-card:hover .folder-photos i:nth-child(4){rotate:27deg;translate:2px -3px}
.work-menu.folder-menu>.directory-card .folder-photos img{height:100%;width:100%;object-fit:cover;border-radius:5px;background:none}
@media(prefers-reduced-motion:reduce){.directory-card:hover .folder-photos i{translate:none}}
/* Keep every supplied cover proportional and fully visible inside its paper frame. */
.directory-card .folder-photos i:nth-child(1){width:38%;height:38%;left:7%;top:20%}
.directory-card .folder-photos i:nth-child(2){width:38%;height:38%;left:24%;top:8%}
.directory-card .folder-photos i:nth-child(3){width:38%;height:38%;left:43%;top:12%}
.directory-card .folder-photos i:nth-child(4){width:36%;height:36%;left:59%;top:24%}
.directory-card .folder-photos i,.work-menu.folder-menu>.directory-card .folder-photos i{background:#fff}
.directory-card .folder-photos i img,.work-menu.folder-menu>.directory-card .folder-photos i img{width:100%;height:100%;object-fit:contain;object-position:center;background:#fff}
/* Clear frosted folder fronts: diffuse the layers behind the glass. */
.directory-card,.is-dealt .directory-card,.work-menu.folder-menu>.directory-card{background:linear-gradient(150deg,#ffffff40,rgba(var(--glass-color),.055));border-color:#e9ecea80;box-shadow:0 8px 18px #343b4406,inset 0 1px 1px #ffffffb3}
.directory-card::before{opacity:.22}
.folder-face,.directory-card-4 .folder-face{background:linear-gradient(180deg,rgba(var(--glass-color),.13) 0%,#ffffff38 38%,#ffffffcc 100%);backdrop-filter:blur(13px) saturate(85%);-webkit-backdrop-filter:blur(13px) saturate(85%);border:1px solid #ffffffe0;box-shadow:0 5px 12px #202b3317,inset 0 1px 1px #fffffff5,inset 1px 0 2px #ffffff8c}
.directory-card .card-title h2{color:var(--glass-ink);text-shadow:0 1px 2px #ffffffbf}
.directory-card:hover,.directory-card:focus-visible{background:linear-gradient(150deg,#ffffff59,rgba(var(--glass-color),.075));border-color:#e3e8e2b3;box-shadow:0 14px 25px #343b4410,inset 0 1px 2px #ffffffc9}
@media(max-width:680px){.folder-face,.directory-card-4 .folder-face{backdrop-filter:blur(8px) saturate(85%);-webkit-backdrop-filter:blur(8px) saturate(85%)}}
@supports not (backdrop-filter:blur(1px)){.folder-face,.directory-card-4 .folder-face{background:linear-gradient(180deg,rgba(var(--glass-color),.46),#fffffff0)}}
@media(prefers-reduced-transparency:reduce){.folder-face,.directory-card-4 .folder-face{background:linear-gradient(180deg,rgb(var(--glass-color)),#fff);backdrop-filter:none;-webkit-backdrop-filter:none}}
/* Reference-style circular navigation badge and white folder numbers. */
.directory-card .card-corner{color:#fff;opacity:1;text-shadow:0 1px 3px #24374338;font-weight:500}
.folder-go{position:absolute;right:11%;bottom:12%;z-index:6;width:18%;aspect-ratio:1;border-radius:50%;background:#303333;color:#fff;border:1.5px solid #fff;display:grid;place-items:center;box-shadow:0 2px 4px #19212110;pointer-events:none}
.folder-go svg{display:block;width:57%;height:57%}
.directory-card .card-title{right:32%}
.directory-card .card-title h2{font-size:18px}
.work-menu.folder-menu>.directory-card .card-title h2{font-size:20px}
@media(max-width:1100px){.directory-card .card-title h2{font-size:16px}}
@media(max-width:680px){.directory-card .card-title h2{font-size:11px}.work-menu.folder-menu>.directory-card .card-title h2{font-size:12px}.folder-go{border-width:1px}}
@media(max-width:680px) and (max-height:680px){.directory-card .card-title h2{font-size:9px}}
/* 04: even translucent glass, with image silhouettes extending behind it. */
.directory-card-4 .folder-face{background:linear-gradient(180deg,rgba(236,242,247,.23),rgba(255,255,255,.28));backdrop-filter:blur(10px) saturate(85%);-webkit-backdrop-filter:blur(10px) saturate(85%);border-color:#ffffffc7;box-shadow:0 5px 12px #202b3314,inset 0 1px 1px #ffffffde,inset 1px 0 2px #ffffff70}
.directory-card-4 .folder-photos i:nth-child(1){width:46%;height:46%;left:3%;top:21%}
.directory-card-4 .folder-photos i:nth-child(2){width:48%;height:48%;left:19%;top:10%}
.directory-card-4 .folder-photos i:nth-child(3){width:48%;height:48%;left:39%;top:14%}
.directory-card-4 .folder-photos i:nth-child(4){width:44%;height:44%;left:55%;top:27%}
@media(max-width:680px){.directory-card-4 .folder-face{backdrop-filter:blur(6px) saturate(85%);-webkit-backdrop-filter:blur(6px) saturate(85%)}}
@supports not (backdrop-filter:blur(1px)){.directory-card-4 .folder-face{background:rgba(238,244,250,.65)}}
@media(prefers-reduced-transparency:reduce){.directory-card-4 .folder-face{background:#e3edf7;backdrop-filter:none;-webkit-backdrop-filter:none}}
/* New images belong to the homepage folder cards. */
.card-deck .directory-card .folder-photos-2 i:nth-child(1){width:51%;height:51%;left:8%;top:14%;rotate:-15deg;z-index:1}
.card-deck .directory-card .folder-photos-2 i:nth-child(2){width:51%;height:51%;left:40%;top:19%;rotate:15deg;z-index:2}
.card-deck .directory-card .folder-photos-1 i:nth-child(1){width:58%;height:66%;left:21%;top:7%;rotate:-4deg;z-index:1}
.card-deck .directory-card:hover .folder-photos-2 i:nth-child(1){rotate:-19deg;translate:-2px -4px}.card-deck .directory-card:hover .folder-photos-2 i:nth-child(2){rotate:19deg;translate:2px -4px}
.card-deck .directory-card:hover .folder-photos-1 i:nth-child(1){rotate:0deg;translate:0 -5px}
.card-deck .directory-card .folder-photos img{object-fit:contain;object-position:center;width:100%;height:100%;background:#fff}
@media(prefers-reduced-motion:reduce){.card-deck .directory-card:hover .folder-photos i{translate:none}}
/* Collaboration uses simple glass cards, without folder artwork. */
.work-menu.folder-menu.plain-glass{position:relative;isolation:isolate;gap:32px}
.work-menu.folder-menu.plain-glass::before{content:'';position:absolute;inset:18% 14%;z-index:-1;background:radial-gradient(ellipse at 23% 45%,#b1e4e352,transparent 48%),radial-gradient(ellipse at 77% 55%,#ebdefc66,transparent 48%);filter:blur(35px);pointer-events:none}
.work-menu.folder-menu.plain-glass>.directory-card{background:linear-gradient(140deg,#ffffff7a,rgba(var(--glass-color),.19));backdrop-filter:blur(22px) saturate(110%);-webkit-backdrop-filter:blur(22px) saturate(110%);border:1px solid #ffffffd9;border-radius:25px;box-shadow:0 12px 28px #343b440a,inset 0 1px 2px #fff,inset 0 -1px 2px #ffffff8c}
.work-menu.folder-menu.plain-glass>.directory-card::before{opacity:.7}
.work-menu.folder-menu.plain-glass>.directory-card .card-corner{top:22px;left:24px;font-size:11px;color:var(--glass-ink);opacity:.65;text-shadow:none}
.work-menu.folder-menu.plain-glass>.directory-card .card-title{left:24px;right:24px;top:43%;bottom:auto;transform:translateY(-50%)}
.work-menu.folder-menu.plain-glass>.directory-card .card-title h2{font-size:23px;line-height:1.4;font-weight:550;text-shadow:0 1px 2px #ffffff8c}
.work-menu.folder-menu.plain-glass>.directory-card .folder-go{right:22px;bottom:22px;width:36px}
.work-menu.folder-menu.plain-glass>.directory-card:hover{box-shadow:0 18px 32px #343b4412,inset 0 1px 2px #fff}
@media(max-width:680px){.work-menu.folder-menu.plain-glass{gap:20px}.work-menu.folder-menu.plain-glass>.directory-card{border-radius:20px}.work-menu.folder-menu.plain-glass>.directory-card .card-corner{top:14px;left:14px;font-size:8px}.work-menu.folder-menu.plain-glass>.directory-card .card-title{left:14px;right:14px;top:46%}.work-menu.folder-menu.plain-glass>.directory-card .card-title h2{font-size:14px}.work-menu.folder-menu.plain-glass>.directory-card .folder-go{right:12px;bottom:12px;width:23px}}
@media(prefers-reduced-transparency:reduce){.work-menu.folder-menu.plain-glass>.directory-card{background:linear-gradient(140deg,#fff,rgb(var(--glass-color)));backdrop-filter:none;-webkit-backdrop-filter:none}}