.portfolio{background:var(--color-bg)}.portfolio-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1.75rem}.project-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden;display:block;transition:transform .2s ease,box-shadow .2s ease}.project-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}.project-preview{background:var(--color-surface-alt);padding:1.5rem 1.5rem 0;overflow:hidden}.browser-mockup{background:var(--color-surface);border:1px solid var(--color-border);border-bottom:none;border-radius:10px 10px 0 0;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;overflow:hidden}.browser-header{height:30px;border-bottom:1px solid var(--color-border);display:flex;align-items:center;padding:0 12px;gap:6px;background:var(--color-surface-alt);flex-shrink:0}.browser-dot{width:8px;height:8px;border-radius:50%}.browser-dot.red{background:#ef4444;opacity:.7}.browser-dot.yellow{background:#eab308;opacity:.7}.browser-dot.green{background:#22c55e;opacity:.7}.browser-content{height:200px}.project-info{padding:1.75rem}.project-tags{display:flex;gap:.5rem;margin-bottom:1rem;flex-wrap:wrap}.tag{font-size:.72rem;text-transform:uppercase;letter-spacing:.5px;padding:4px 10px;border-radius:999px;font-weight:600}.tag.live{background:#e8f7ee;color:#15803d;border:1px solid #c9ecd8}.tag.prototype{background:#fdf5e0;color:#a16207;border:1px solid #f3e5bb}.tag.type{border:1px solid var(--color-border);color:var(--color-text-muted)}.tag.package{background:var(--color-accent-soft);color:var(--color-accent-dark);border:1px solid transparent}.project-title{font-size:1.35rem;margin-bottom:.5rem}.project-desc{font-size:.95rem;line-height:1.6}.visit-link{display:inline-flex;align-items:center;gap:6px;margin-top:1.25rem;color:var(--color-accent);font-weight:600;font-size:.9rem}.project-card:hover .visit-link{color:var(--color-accent-dark)}.portfolio-drawer{max-height:0;overflow:hidden;transition:max-height .5s ease-out,opacity .3s ease;opacity:0}.portfolio-drawer.open{max-height:2000px;opacity:1;transition:max-height .5s ease-in,opacity .3s ease .1s}.portfolio-drawer .portfolio-grid{margin-top:1.75rem}.show-more-btn{display:flex;align-items:center;justify-content:center;gap:.5rem;margin:2.5rem auto 0;padding:.8rem 2rem;background:var(--color-surface);border:1px solid var(--color-border);border-radius:999px;color:var(--color-text-main);font-size:.95rem;font-weight:600;transition:border-color .2s ease,background .2s ease}.show-more-btn:hover{border-color:var(--color-ink)}.show-more-icon{transition:transform .3s ease}.show-more-icon.rotated{transform:rotate(180deg)}@media(max-width:768px){.portfolio-grid{grid-template-columns:1fr}}