:root { font-family: Inter, "PingFang SC", sans-serif; background: #0d0f12; color: #d5d9e0; } * { box-sizing: border-box; } body { margin: 0; } .case-space { width: min(1100px, calc(100% - 48px)); min-height: 100vh; margin: 0 auto; padding: 40px 0; } .back { color: #8b93a1; font-size: 14px; text-decoration: none; } .eyebrow { margin: 100px 0 12px; color: #736b5d; font-size: 11px; font-weight: 800; letter-spacing: .16em; } h1 { margin: 0; font-family: "Noto Serif SC", "Songti SC", STSong, serif; font-size: clamp(42px, 7vw, 76px); letter-spacing: -.07em; } .lead { max-width: 560px; color: #615c53; line-height: 1.8; } .case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 55px; } article { min-height: 280px; padding: 22px; border: 1px solid #bbb3a5; background: #d3ccc0; } article:nth-child(2) { background: #bbb4aa; } article:nth-child(3) { background: #ccc5b9; } article span { color: #706759; font-size: 12px; font-weight: 800; letter-spacing: .1em; } h2 { margin: 145px 0 8px; font-size: 28px; letter-spacing: -.05em; } article p { margin: 0; color: #635b4e; } @media (max-width: 680px) { .case-grid { grid-template-columns: 1fr; } }

/* v179：云端应用封面网格（尺寸布局对齐云端 ComfyUI 门户） */
.application-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 260px)); gap: 16px; margin-top: 55px; }
.application-card { position: relative; width: 100%; aspect-ratio: 3 / 4; border: 1px solid #2b3038; border-radius: 14px; background: #12141a; overflow: hidden; cursor: pointer; }
.application-card .card-media { position: absolute; inset: 0; width: 100%; height: 100%; background: #121212; }
.application-card .card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease-in-out; }
.application-card:hover .card-media img { transform: scale(1.04); }
.showcase-loading { grid-column: 1 / -1; color: #8b93a1; font-size: 14px; }

/* v187：卡片名称浮层 + 点击进入案例对比 */
.application-card .card-overlay { position: absolute; inset: auto 0 0 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; padding: 28px 12px 10px; background: linear-gradient(to top, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0)); pointer-events: none; }
.application-card .card-name { color: #f2f4f8; font-size: 14px; font-weight: 700; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.application-card .card-tag { color: rgba(235, 238, 244, 0.72); font-size: 11px; flex: none; }

/* 2026-11-02：预设站专用——封面隐藏（小眼睛） */
.application-card .cover-eye { position: absolute; top: 8px; right: 8px; z-index: 3; width: 28px; height: 28px; padding: 0; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 8px; background: rgba(10, 12, 16, 0.55); color: #e8ebf1; cursor: pointer; opacity: 1; transition: opacity 0.15s ease, background 0.15s ease, border-color 0.15s ease; }
.application-card .cover-eye svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.application-card:hover .cover-eye, .application-card .cover-eye:focus-visible, .application-card.cover-hidden .cover-eye { opacity: 1; }
.application-card .cover-eye:hover { background: rgba(10, 12, 16, 0.86); border-color: rgba(255, 255, 255, 0.4); }
.application-card .cover-masked { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; color: #6b7280; font-size: 12px; letter-spacing: 0.12em; background: repeating-linear-gradient(45deg, #12141a, #12141a 10px, #171a21 10px, #171a21 20px); }
.application-card.cover-hidden .cover-masked { display: flex; }
.application-card.cover-hidden .card-media img { visibility: hidden; }

/* 2026-11-02：正式站独有的技术交流二维码卡片 */
.application-card.is-prod-qr { cursor: default; background: #ffffff; }
.application-card.is-prod-qr .card-media { background: #ffffff; }
.application-card.is-prod-qr .card-media img { object-fit: cover; }
.application-card.is-prod-qr:hover .card-media img { transform: none; }