.project-card{--card-inset:32px;--meta-band:52px;text-align:center;box-sizing:border-box;background:#f4f3f2;border-radius:16px;width:100%;min-width:0;max-width:100%;height:564px;text-decoration:none;display:block;position:relative;overflow:hidden}.project-card:focus-visible{outline-offset:2px;outline:2px solid #000}.project-card__visual{inset:var(--card-inset);box-sizing:border-box;justify-content:center;align-items:center;transition:filter .35s;display:flex;position:absolute}.project-card__visual-inner{flex-direction:column;flex:auto;justify-content:center;align-items:center;width:100%;min-width:0;height:100%;min-height:0;display:flex;container:card-visual/size}.project-card__visual-inner>*{flex:none;align-self:center;max-width:100%;max-height:100%}@media (min-width:769px) and (hover:hover) and (pointer:fine){.project-card:hover .project-card__visual{filter:blur(10px)}.project-card:hover .project-card__meta{opacity:1;pointer-events:auto}}.project-card__image--fill{object-fit:cover;border-radius:8px;width:100%;height:100%;display:block;position:absolute;inset:0}.project-card__image-wrap{flex:none;justify-content:center;align-items:center;width:min(80cqw,80%);max-height:100cqh;display:flex}.project-card__image{object-fit:contain;object-position:center;border-radius:8px;width:100%;height:auto;max-height:100cqh;display:block;box-shadow:0 0 0 1px #00000014,0 12px 40px #00000024,0 4px 12px #00000012}.project-card__meta{padding:var(--card-inset);text-align:center;opacity:0;z-index:2;box-sizing:border-box;pointer-events:none;flex-direction:column;justify-content:center;align-items:center;transition:opacity .25s;display:flex;position:absolute;inset:0}.project-card__title{color:#000;overflow-wrap:anywhere;max-width:100%;font-size:clamp(14px,4.2vw,18px);font-weight:500;line-height:1.3;display:block}.project-card__company{color:#666;overflow-wrap:anywhere;max-width:100%;margin-top:4px;font-size:clamp(11px,3.1vw,13px);display:block}.pc-browser{background:#fff;border-radius:8px;flex-direction:column;flex:none;width:min(82cqw,149.883cqh - 44.9649px);max-width:100%;max-height:100cqh;display:flex;overflow:hidden;box-shadow:0 0 0 1px #00000014,0 12px 40px #00000024,0 4px 12px #00000012}.pc-browser__chrome{background:#e8e8e8;border-bottom:1px solid #d0d0d0;flex-shrink:0;align-items:center;gap:6px;height:30px;min-height:30px;padding:0 10px;display:flex}.pc-browser__dots{flex-shrink:0;align-items:center;gap:5px;display:flex}.pc-dot{border-radius:50%;flex-shrink:0;width:9px;height:9px;display:block}.pc-dot--red{background:#ff5f57;box-shadow:inset 0 0 0 .5px #0000001f}.pc-dot--yellow{background:#febc2e;box-shadow:inset 0 0 0 .5px #0000001f}.pc-dot--green{background:#28c840;box-shadow:inset 0 0 0 .5px #0000001f}.pc-browser__url-bar{background:#fff;border:1px solid #0000001a;border-radius:4px;flex:1;align-items:center;max-width:220px;height:18px;margin:0 auto;padding:0 7px;display:flex}.pc-browser__url-text{color:#444;white-space:nowrap;text-overflow:ellipsis;font-family:-apple-system,SF Pro Text,system-ui,sans-serif;font-size:9.5px;overflow:hidden}.pc-browser__spacer{flex:0 0 48px}.pc-browser__screen{aspect-ratio:1280/854;flex:none;width:100%;position:relative;overflow:hidden}.pc-browser__video{object-fit:cover;width:100%;height:100%;display:block}@media (max-width:768px){.project-card{height:auto;aspect-ratio:var(--card-aspect,10 / 13);border-radius:clamp(12px,3.5vw,16px);min-height:clamp(220px,82vw,320px)}.project-card--phone{--card-aspect:10 / 13}.project-card--browser{--card-aspect:16 / 11}.project-card--image{--card-aspect:5 / 4}.project-card--fill{--card-aspect:3 / 2}}@media (max-width:768px) and (hover:none),(max-width:768px) and (pointer:coarse){.project-card__visual-inner{padding-bottom:var(--meta-band);box-sizing:border-box;flex-direction:column;justify-content:center;align-items:center}.project-card__meta{height:auto;min-height:var(--meta-band);opacity:1;pointer-events:none;padding:8px var(--card-inset) var(--card-inset);text-align:center;background:linear-gradient(#0000 0%,#f4f3f2fa 40%);justify-content:flex-end;align-items:center;transition:none;inset:auto 0 0}.project-card--phone .phone-stencil--card{max-height:calc(100cqh - var(--meta-band))}.project-card--browser .pc-browser{width:min(92cqw, calc((100cqh - var(--meta-band) - 30px) * 1280 / 854))}}@media (max-width:768px) and (hover:hover) and (pointer:fine){.project-card:hover .project-card__visual{filter:blur(10px)}.project-card:hover .project-card__meta{opacity:1;pointer-events:auto}}@media (max-width:440px){.project-card{--card-inset:clamp(12px, 4.5vw, 20px);--meta-band:clamp(48px, 14vw, 56px)}.project-card__visual{justify-content:center;align-items:center}.project-card__visual-inner{justify-content:center;align-items:center;width:100%;height:100%}.project-card__image-wrap{width:min(84cqw,92%);margin-inline:auto}.project-card--phone .phone-stencil--card{flex-direction:column;justify-content:center;align-items:center;width:100%;max-width:100%;margin-inline:auto;display:flex}.project-card--browser .pc-browser{width:min(92cqw,149.883cqh - 44.9649px);margin-inline:auto}.pc-browser__chrome{height:clamp(24px,7vw,30px);min-height:clamp(24px,7vw,30px);padding:0 clamp(6px,2vw,10px)}.pc-browser__url-bar{max-width:min(220px,55cqw);height:clamp(14px,4vw,18px)}.pc-browser__url-text{font-size:clamp(8px,2.4vw,9.5px)}.pc-browser__spacer{flex:0 0 clamp(28px,12vw,48px)}}@media (max-width:280px){.project-card{--card-inset:10px;--meta-band:46px;border-radius:12px}}.project-card__visual-inner .phone-stencil{flex:none;width:auto;max-width:100%;max-height:100%}