:root{--font-pixel:"Silkscreen", cursive;--font-body:"Inter", system-ui, -apple-system, sans-serif;--color-accent:#ff4000;--color-accent-hover:#e63800;--color-foreground:#0e002d;--color-surface:#f2f2f2;--color-card:#fff;--color-divider:#dcdcdc;--color-muted:#737373;--color-blue:#135bd7;--grid-size:24px;--grid-color:#0000000f;--raise:3px;--heading-1:clamp(28px, 5vw, 36px);--heading-2:clamp(22px, 3.5vw, 30px);--heading-3:clamp(18px, 2.5vw, 24px);--large-copy:clamp(16px, 2vw, 20px);--body-copy:15px;--small-copy:13px;--label:10px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*,:before,:after{box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:var(--font-body);font-size:var(--body-copy);color:var(--color-foreground);background-color:var(--color-surface);margin:0;line-height:1.6;overflow-x:hidden}#root{z-index:1;width:100%;max-width:880px;margin:0 auto;padding:48px 24px 80px;position:relative}a{color:var(--color-accent);font-weight:500;text-decoration:none;transition:color .16s}a:hover{color:var(--color-accent-hover)}::selection{background:#ff40002e}@keyframes fadeUp{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}.fade-section{opacity:0;animation:.5s cubic-bezier(.22,1,.36,1) forwards fadeUp}.portfolio{flex-direction:column;align-items:center;gap:48px;display:flex}.section-heading{font-family:var(--font-pixel);font-size:var(--large-copy);color:var(--color-foreground);border-bottom:2px solid var(--color-divider);letter-spacing:.02em;width:100%;margin:0 0 14px;padding-bottom:6px;font-weight:400;display:inline-block}.section-card{background:var(--color-card);border:1px solid var(--color-divider);width:100%;box-shadow:0 2px 0 var(--color-divider), 0 8px 24px #0e002d0d;border-radius:16px;padding:28px 24px;transition:box-shadow .28s,transform .28s;position:relative}.section-card:hover{box-shadow:0 2px 0 var(--color-divider), 0 14px 40px #0e002d17;transform:translateY(-2px)}.hero-card{background:var(--color-card);border:1px solid var(--color-divider);width:100%;box-shadow:0 3px 0 var(--color-divider), 0 8px 24px #0e002d0d;border-radius:16px;padding:36px 28px;transition:box-shadow .28s,transform .28s}.hero-card:hover{box-shadow:0 3px 0 var(--color-divider), 0 16px 48px #0e002d1a;transform:translateY(-2px)}.hero{align-items:center;gap:16px;display:flex}.avatar-wrap{transition:transform .3s cubic-bezier(.22,1,.36,1)}.avatar-wrap:hover{transform:scale(1.12)rotate(-4deg)}.hero-info{flex-direction:column;gap:2px;display:flex}.hero-name{font-family:var(--font-pixel);font-size:var(--heading-1);color:var(--color-foreground);margin:0;font-weight:700;line-height:1.25}.hero-name .accent{color:var(--color-accent)}.hero-role{font-family:var(--font-pixel);font-size:var(--small-copy);color:var(--color-muted);letter-spacing:.04em;margin:0}.hero-bottom{justify-content:space-between;align-items:center;gap:24px;margin-top:18px;display:flex}.hero-desc{font-size:var(--body-copy);color:var(--color-muted);flex:1;max-width:560px;margin:0;line-height:1.7}.pixel-face{border:1px solid var(--color-divider);background:var(--color-card);border-radius:12px;padding:8px;transition:border-color .3s,box-shadow .3s}.pixel-face:hover{border-color:var(--color-accent);box-shadow:0 0 0 2px #ff40001a}@keyframes pixelIn{0%{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}.skills-grid{flex-wrap:wrap;gap:8px;display:flex}.skill-chip{font-family:var(--font-pixel);border:1px solid var(--color-divider);background:var(--color-surface);color:var(--color-foreground);cursor:default;box-shadow:0 var(--raise) 0 var(--color-divider);border-radius:8px;align-items:center;gap:6px;padding:7px 14px;font-size:11px;transition:background .18s,color .18s,transform .12s,box-shadow .12s,border-color .18s;display:inline-flex;transform:translateY(0)}.skill-icon{pointer-events:none;flex-shrink:0;width:16px;height:16px}.skill-chip:hover{background:var(--color-accent);color:#fff;border-color:var(--color-accent);box-shadow:0 var(--raise) 0 var(--color-accent-hover);transform:translateY(-1px)}.skill-chip:hover .skill-icon{filter:brightness(0)invert()}.skill-chip:active{transform:translateY(var(--raise));box-shadow:0 0 0 var(--color-divider)}.projects-grid{flex-direction:column;gap:18px;display:flex}.project-item{background:var(--color-surface);border:1px solid var(--color-divider);cursor:default;box-shadow:0 var(--raise) 0 var(--color-divider);border-radius:14px;align-items:stretch;gap:20px;padding:20px;transition:transform .24s cubic-bezier(.22,1,.36,1),box-shadow .24s,border-color .24s;display:flex;position:relative;overflow:hidden;transform:translateY(0)}.project-item:hover{border-color:var(--color-accent);transform:translateY(-4px);box-shadow:0 12px 32px #0e002d1a}.project-body{flex-direction:column;flex:1;min-width:0;display:flex}.project-num{font-family:var(--font-pixel);color:var(--color-accent);letter-spacing:.04em;margin:0 0 4px;font-size:12px}.project-title{font-family:var(--font-pixel);color:var(--color-accent);margin:0;font-size:17px;font-weight:700;line-height:1.3}.project-desc{font-size:var(--small-copy);color:var(--color-muted);margin:6px 0 12px;line-height:1.6}.project-image{background:var(--color-divider);border:1px solid var(--color-divider);border-radius:10px;flex-shrink:0;align-self:stretch;width:200px;min-width:200px;overflow:hidden}.project-image img{object-fit:cover;object-position:top left;width:100%;height:100%}.project-stack{flex-wrap:wrap;gap:5px;margin-bottom:14px;display:flex}.stack-tag{font-family:var(--font-pixel);color:var(--color-blue);background:#135bd712;border:1px solid #135bd726;border-radius:6px;padding:3px 9px;font-size:9px}.project-actions{gap:10px;display:flex}.project-btn{font-family:var(--font-pixel);letter-spacing:.06em;border:1px solid var(--color-divider);background:var(--color-card);color:var(--color-foreground);box-shadow:0 var(--raise) 0 var(--color-divider);border-radius:8px;align-items:center;gap:5px;padding:7px 14px;font-size:10px;text-decoration:none;transition:background .16s,color .16s,border-color .16s,transform .1s,box-shadow .1s;display:inline-flex;transform:translateY(0)}.project-btn:hover{background:var(--color-foreground);color:#fff;border-color:var(--color-foreground);box-shadow:0 var(--raise) 0 #0e002d66;transform:translateY(-1px)}.project-btn:active{transform:translateY(var(--raise));box-shadow:0 0 #0000}.project-btn svg{fill:currentColor;width:12px;height:12px}.resume-btn{font-family:var(--font-pixel);font-size:var(--small-copy);background:var(--color-accent);color:#fff;border:1px solid var(--color-accent);cursor:pointer;box-shadow:0 4px 0 var(--color-accent-hover);border-radius:10px;align-items:center;gap:8px;padding:12px 24px;text-decoration:none;transition:background .18s,transform .1s,box-shadow .1s;display:inline-flex;transform:translateY(0)}.resume-btn:hover{background:var(--color-accent-hover);color:#fff;transform:translateY(-2px);box-shadow:0 6px #e6380099}.resume-btn:active{transform:translateY(4px);box-shadow:0 0 #0000}.resume-btn svg{fill:currentColor;width:14px;height:14px}.contact-table{flex-direction:column;gap:0;margin:0;display:flex}.contact-row{font-size:var(--small-copy);border-bottom:1px solid var(--color-surface);justify-content:space-between;align-items:center;padding:10px 0;transition:background .18s;display:flex}.contact-row:last-child{border-bottom:none}.contact-row:hover{background:var(--color-surface);border-radius:8px;margin:0 -8px;padding-left:8px;padding-right:8px}.contact-row dt{font-family:var(--font-pixel);color:var(--color-muted);letter-spacing:.06em;font-size:11px}.contact-row dd{margin:0}.contact-row a{align-items:center;gap:5px;display:inline-flex}.contact-row a .arrow{opacity:0;color:var(--color-accent);font-size:12px;transition:opacity .2s,transform .2s;transform:translate(-4px)translateY(1px)}.contact-row:hover a .arrow{opacity:1;transform:translate(0)translateY(0)}@media (width<=560px){.project-item{flex-direction:column}.project-image{width:100%;min-width:unset;aspect-ratio:16/9;max-height:160px}}@media (width>=640px){.hero-card{padding:40px 36px}.section-card{padding:32px 30px}}