@import "https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&display=swap";
.pf-page{color:#fafafa;letter-spacing:-.01em;-webkit-font-smoothing:antialiased;background:#0a0a0a;min-height:100vh;font-family:Instrument Sans,-apple-system,BlinkMacSystemFont,sans-serif;font-size:14px;line-height:1.55}.pf-container{max-width:864px;margin:0 auto;padding:0 24px}.pf-section-label{letter-spacing:.12em;text-transform:uppercase;color:#606060;margin-bottom:16px;font-family:Instrument Sans,sans-serif;font-size:12px;font-weight:600}.pf-section-label-tag{letter-spacing:.04em;color:#ffffff4d}.pf-intro{padding:80px 0 24px}.pf-avatar{object-fit:cover;border:1px solid #ffffff14;border-radius:12px;width:56px;height:56px;margin-bottom:16px}.pf-name{color:#fff;margin:0 0 8px;font-size:16px;font-weight:600}.pf-title{color:#fff;margin:0 0 8px;font-size:14px;font-weight:500}.pf-bio{color:#ffffff8c;max-width:520px;margin:0 0 8px;font-size:14px;line-height:1.65}.pf-bio a{color:#22d3ee;font-weight:500;text-decoration:none}.pf-bio a:hover{text-decoration:underline}.pf-copy-hint{color:#ffffff59;cursor:pointer;align-items:center;gap:6px;font-size:13px;transition:color .2s;display:flex}.pf-copy-hint:hover{color:#fff9}.pf-copy-hint kbd{color:#fff9;background:#1a1a1a;border:1px solid #2a2a2a;border-radius:4px;justify-content:center;align-items:center;width:22px;height:22px;font-family:inherit;font-size:12px;font-weight:600;display:inline-flex}.pf-brands{border-top:1px solid #ffffff0f;padding:16px 0}.pf-brands-row{flex-wrap:wrap;align-items:center;gap:16px;display:flex}.pf-brand-icon{color:#ffffff80;background:#141414;border:1px solid #242424;border-radius:8px;justify-content:center;align-items:center;width:32px;height:32px;font-size:14px;transition:border-color .2s,background .2s;display:flex}.pf-brand-icon:hover{background:#1a1a1a;border-color:#ffffff26}.pf-work{border-top:1px solid #ffffff0f;padding:16px 0}.pf-work-description{color:#ffffff73;margin-bottom:16px;font-size:14px;line-height:1.55}.portfolio-grid{grid-template-columns:repeat(2,1fr);gap:16px;display:grid}.index-card-link{color:inherit;text-decoration:none;display:block;position:relative}.index-card{aspect-ratio:16/9;background:#0a0a0a;border:1px solid #ffffff14;border-radius:8px;width:100%;transition:border-color .3s;position:relative;overflow:hidden}.index-card-link:hover .index-card{border-color:#fff3}.card-aperture{z-index:1;position:absolute;inset:0;overflow:hidden}.card-image-main{object-fit:cover;filter:brightness(.8)contrast(1.1);width:100%;height:100%;transition:filter .3s,opacity .25s}.index-card-link:hover .card-image-main{filter:brightness(.9)contrast(1.15)}.card-system-overlay{z-index:2;pointer-events:none;background:0 0;flex-direction:column;justify-content:flex-end;padding:16px;transition:background .3s;display:flex;position:absolute;inset:0}.index-card-link:hover .card-system-overlay{background:linear-gradient(#0000 30%,#00000047 100%)}.index-card-link:hover .card-system-overlay.thumbnail-active{background:0 0}.card-metadata-row{opacity:0;flex-wrap:wrap;gap:8px;transition:transform .4s cubic-bezier(.16,1,.3,1),opacity .3s;display:flex;transform:translateY(8px)}.index-card-link:hover .card-metadata-row{opacity:1;transform:translateY(0)}.card-metadata-row.is-hidden{pointer-events:none;opacity:0!important;transform:translateY(12px)!important}.tech-tag{color:#fafafa;letter-spacing:.05em;text-transform:uppercase;background:#1a1a1a;border:1px solid #333;border-radius:4px;padding:3px 8px;font-size:11px;font-weight:600}.card-work-chips{z-index:4;pointer-events:none;flex-direction:column;gap:8px;display:flex;position:absolute;top:12px;right:12px}.index-card-link:hover .card-work-chips{pointer-events:auto}.work-chip{aspect-ratio:16/10;opacity:0;cursor:pointer;background:#111;border:1.5px solid #ffffff14;border-radius:3px;width:60px;transition:all .4s cubic-bezier(.16,1,.3,1),opacity .3s;position:relative;overflow:hidden;transform:translate(8px)}.index-card-link:hover .work-chip{opacity:.8;transform:translate(0)}.index-card-link .work-chip:hover{opacity:1;border-color:#ffffff80;transform:translate(0)scale(1.05)}.card-work-chips:hover .work-chip:not(:hover){opacity:.25}.video-play-indicator{color:#fff;z-index:2;background:#0000004d;justify-content:center;align-items:center;font-size:14px;display:flex;position:absolute;inset:0}.card-header-info{flex-direction:column;gap:8px;margin-top:8px;display:flex}.card-title{color:#fff;margin:0;font-size:15px;font-weight:600}.card-description{color:#ffffff73;margin:0;font-size:13px;line-height:1.5}.pf-side-projects{border-top:1px solid #ffffff0f;padding:16px 0}.pf-project-list{flex-direction:column;gap:0;display:flex}.pf-project-row{color:inherit;border-bottom:1px solid #ffffff0a;border-radius:6px;align-items:center;gap:16px;padding:16px 8px;text-decoration:none;transition:background .15s;display:flex}.pf-project-row:last-child{border-bottom:none}.pf-project-row:hover{background:#ffffff08}.pf-project-thumb{aspect-ratio:16/9;background:#141414;border:1px solid #242424;border-radius:6px;flex-shrink:0;width:auto;height:72px;position:relative;overflow:hidden}.pf-project-info{flex:1;min-width:0}.pf-project-name{color:#fff;align-items:center;gap:8px;font-size:14px;font-weight:500;line-height:1.3;display:flex}.pf-wip-badge{letter-spacing:.06em;text-transform:uppercase;color:#ffc83cd9;background:#ffc83c1a;border:1px solid #ffc83c40;border-radius:4px;padding:2px 6px;font-size:10px;font-weight:600;line-height:1.4}.pf-project-desc{color:#fff6;white-space:nowrap;text-overflow:ellipsis;font-size:13px;line-height:1.4;overflow:hidden}.pf-project-stack{flex-wrap:wrap;gap:6px;margin-top:6px;display:flex}.pf-stack-tag{letter-spacing:.06em;text-transform:uppercase;color:#ffffff59;background:#141414;border:1px solid #242424;border-radius:3px;padding:2px 6px;font-size:10px;font-weight:600}.pf-project-arrow{color:#fff3;font-size:14px;transition:color .2s,transform .2s}.pf-project-row:hover .pf-project-arrow{color:#ffffff80;transform:translate(2px)}.pf-writing{border-top:1px solid #ffffff0f;padding:16px 0}.pf-writing-list{flex-direction:column;gap:0;display:flex}.pf-writing-row{color:inherit;border-bottom:1px solid #ffffff0a;border-radius:4px;justify-content:space-between;align-items:baseline;gap:16px;margin:0 -8px;padding:16px 8px;text-decoration:none;transition:background .15s;display:flex}.pf-writing-row:last-child{border-bottom:none}.pf-writing-row:hover{background:#ffffff08}.pf-writing-title{color:#ffffffbf;font-size:14px;font-weight:500;line-height:1.4;transition:color .2s}.pf-writing-row:hover .pf-writing-title{color:#fff}.pf-writing-date{color:#ffffff4d;white-space:nowrap;flex-shrink:0;font-size:13px}.pf-writing-tags{flex-wrap:wrap;gap:6px;margin-top:6px;display:flex}.pf-writing-tag{letter-spacing:.06em;text-transform:uppercase;color:#ffffff59;background:#141414;border:1px solid #242424;border-radius:3px;padding:2px 6px;font-size:10px;font-weight:600}.pf-experiments{border-top:1px solid #ffffff0f;padding:16px 0}.pf-masonry{columns:3;column-gap:16px}.pf-masonry-item{break-inside:avoid;cursor:pointer;cursor:pointer;border:1px solid #ffffff0f;border-radius:8px;margin-bottom:16px;transition:border-color .2s;position:relative;overflow:hidden}.pf-masonry-item:hover{border-color:#ffffff26}.pf-masonry-item img{width:100%;height:auto;transition:filter .3s;display:block}.pf-masonry-item:hover img{filter:brightness(1.1)}.pf-masonry-overlay{opacity:0;background:linear-gradient(#0000 50%,#000000b3 100%);align-items:flex-end;padding:12px;transition:opacity .25s;display:flex;position:absolute;inset:0}.pf-masonry-item:hover .pf-masonry-overlay{opacity:1}.pf-masonry-overlay span{color:#fffc;font-size:12px;font-weight:500}.pf-copy-toast{color:#0a0a0a;white-space:nowrap;z-index:9999;pointer-events:none;opacity:0;background:#fff;border-radius:100px;padding:10px 18px;font-size:13px;font-weight:500;transition:opacity .2s,transform .2s;position:fixed;bottom:32px;left:50%;transform:translate(-50%)translateY(8px)}.pf-copy-toast.visible{opacity:1;transform:translate(-50%)translateY(0)}.pf-lightbox-overlay{z-index:9999;cursor:zoom-out;background:#000000eb;justify-content:center;align-items:center;padding:24px;display:flex;position:fixed;inset:0}.pf-lightbox-content{cursor:default;position:relative}.pf-lightbox-close{color:#fff9;cursor:pointer;background:0 0;border:none;padding:8px;font-size:20px;line-height:1;transition:color .15s;position:absolute;top:-40px;right:0}.pf-lightbox-close:hover{color:#fff}.pf-lightbox-label{text-align:center;color:#fff6;letter-spacing:.04em;margin-top:12px;font-size:12px;font-weight:500}.pf-expand-btn{color:#ffffff8c;cursor:pointer;background:#141414;border:1px solid #242424;border-radius:8px;justify-content:center;align-items:center;gap:6px;width:100%;margin-top:16px;padding:10px 16px;font-family:Instrument Sans,sans-serif;font-size:13px;font-weight:500;transition:background .2s,border-color .2s,color .2s;display:flex}.pf-expand-btn:hover{color:#ffffffbf;background:#1a1a1a;border-color:#ffffff1f}.pf-expand-arrow{font-size:12px;transition:transform .3s cubic-bezier(.16,1,.3,1)}.pf-expand-arrow.open{transform:rotate(180deg)}.pf-footer{border-top:1px solid #ffffff0d;margin-top:48px;padding:48px 0 64px}.pf-footer p{color:#fff3;text-transform:uppercase;letter-spacing:.08em;margin:0;font-family:JetBrains Mono,SF Mono,monospace;font-size:12px}@media (max-width:768px){.pf-intro{padding:48px 0 32px}.portfolio-grid{grid-template-columns:1fr}.card-metadata-row{opacity:1;transform:none}.card-system-overlay{background:linear-gradient(#0000 30%,#00000047 100%)}.card-work-chips{display:none}.pf-masonry{columns:2}.pf-writing-row{flex-direction:column;gap:4px}}@media (max-width:480px){.pf-container{padding:0 16px}.pf-intro{padding:36px 0 24px}.pf-name{font-size:15px}.pf-bio{font-size:13px}.pf-copy-hint{gap:8px;font-size:12px}.pf-copy-hint kbd{display:none}.pf-section-label{font-size:11px}.card-title{font-size:14px}.card-description{font-size:12px}.tech-tag{padding:2px 6px;font-size:10px}.pf-project-thumb{width:64px}.pf-project-name{font-size:13px}.pf-project-desc{font-size:12px}.pf-writing-title{font-size:13px}.pf-writing-date{font-size:12px}.pf-writing-tag,.pf-stack-tag{padding:2px 5px;font-size:9px}.pf-masonry{columns:1}.pf-footer{margin-top:32px;padding:32px 0 48px}}