.hp-wrap{width:100%;max-width:420px;margin:28px auto 0}.hp-browser{border:1px solid var(--c-accent-15);border-radius:var(--br-md);box-shadow:0 20px 60px #0006, 0 0 40px var(--c-accent-06);background:#050d19b3;overflow:hidden}.hp-bar{border-bottom:1px solid var(--c-accent-08);background:#0a1a2ee6;align-items:center;gap:6px;padding:10px 14px;display:flex}.hp-dot{border-radius:50%;width:8px;height:8px}.hp-dot-r{background:#ff5f57}.hp-dot-y{background:#ffbd2e}.hp-dot-g{background:#28ca41}.hp-url{color:var(--c-text-dim);background:var(--c-accent-05);border-radius:var(--br-pill);white-space:nowrap;text-overflow:ellipsis;animation:hpUrlFade .5s var(--ease-out);flex:1;margin-left:12px;padding:3px 12px;font-size:11px;overflow:hidden}@keyframes hpUrlFade{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.hp-viewport{aspect-ratio:16/10;background:#0a1a2e80;width:100%;position:relative}.hp-slide{opacity:0;visibility:hidden;transition:opacity .8s,visibility .8s;position:absolute;inset:0}.hp-slide--active{opacity:1;visibility:visible}.hp-slide img{object-fit:cover}.hp-progress{border-top:1px solid var(--c-accent-08);background:#0a1a2ee6;justify-content:center;gap:8px;padding:10px 0 12px;display:flex}.hp-dot-nav{background:var(--c-accent-20);width:6px;height:6px;transition:all .4s var(--ease-out);border-radius:50%}.hp-dot-nav--active{background:var(--c-accent);width:18px;box-shadow:0 0 10px var(--c-accent-40);border-radius:3px}@media (max-width:768px){.hp-wrap{max-width:320px}.hp-url{font-size:10px}}@media (prefers-reduced-motion:reduce){.hp-slide{transition:none}.hp-url{animation:none}}
.pg-portfolio-grid{gap:var(--sp-gap);grid-template-columns:repeat(3,1fr);display:grid}.pg-portfolio-card{color:inherit;background:var(--c-card-bg);border:1px solid var(--c-border);border-radius:var(--br-xl);transition:transform var(--tr-smooth), box-shadow var(--tr-smooth), border-color var(--tr-smooth);text-decoration:none;display:block;overflow:hidden}.pg-portfolio-card:hover{transform:var(--lift-md);border-color:var(--c-border-hover);box-shadow:var(--shadow-glow-md)}.pg-portfolio-img{aspect-ratio:16/10;width:100%;position:relative;overflow:hidden}.pg-portfolio-img img{object-fit:cover;width:100%;height:100%;transition:transform .8s var(--ease-out)}.pg-portfolio-card:hover .pg-portfolio-img img{transform:scale(1.05)}.pg-portfolio-placeholder{background:var(--c-accent-04);width:100%;height:100%;color:var(--c-accent-30);justify-content:center;align-items:center;display:flex}.pg-portfolio-img:after{content:"";background:linear-gradient(to top, var(--c-bg) 0%, transparent 50%);pointer-events:none;position:absolute;inset:0}.pg-portfolio-body{padding:24px var(--sp-section-x) 28px}.pg-portfolio-name{font-size:var(--fs-card-title);color:var(--c-heading);margin:0 0 8px;font-weight:600}.pg-portfolio-desc{font-size:var(--fs-body-sm);color:var(--c-text-body);margin:0 0 14px;line-height:1.6}.pg-portfolio-tags{flex-wrap:wrap;gap:6px;display:flex}.pg-portfolio-tag{border-radius:var(--br-pill);background:var(--c-accent-06);border:1px solid var(--c-accent-10);color:var(--c-accent);letter-spacing:.02em;padding:3px 10px;font-size:12px}@media (max-width:1024px){.pg-portfolio-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:768px){.pg-portfolio-grid{grid-template-columns:1fr}}