*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{height:100%}body{font-family:var(--font-sans);color:var(--color-ink);background-color:var(--color-bg);background-image:linear-gradient(var(--color-grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--color-grid-line) 1px,transparent 1px);background-size:24px 24px;display:flex;flex-direction:column;height:100vh;overflow:hidden}.top-nav{flex-shrink:0;display:flex;justify-content:space-between;align-items:center;padding:18px clamp(28px,5vw,48px);background:transparent}.nav-left{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;cursor:pointer}.nav-logo{flex-shrink:0;width:44px;height:44px;object-fit:contain;opacity:.8;transition:transform .4s ease}.nav-left:hover .nav-logo{transform:rotate(45deg)}.nav-identity{display:flex;flex-direction:column;gap:0;min-width:130px}.nav-name,.nav-role{line-height:1.1}.nav-name{color:var(--Label, #2D2D2D);font-family:var(--font-sans);font-size:20px;font-style:normal;font-weight:700;line-height:normal}.nav-role{color:var(--Grey-Text, #666);font-family:var(--font-mono);font-size:14px;font-style:normal;font-weight:400;line-height:normal;letter-spacing:-.02em}.nav-resume{color:var(--Label, #2D2D2D);font-family:var(--font-mono);font-size:16px;font-style:normal;font-weight:400;line-height:normal;letter-spacing:-.02em;text-decoration:none;white-space:nowrap;display:inline-block;transition:transform .2s ease}.nav-resume:hover{transform:translateY(-2px)}.nav-right{display:flex;align-items:center;gap:24px}.nav-icon{position:relative;color:var(--Label, #2D2D2D);display:inline-flex;align-items:center;justify-content:center;text-decoration:none;transition:transform .2s ease,opacity .2s ease;opacity:.65}.nav-icon svg{width:24px;height:24px}.nav-hint{font-family:var(--font-mono);font-size:13px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:#b5b5b5;white-space:nowrap;opacity:0;transform:translate(4px);transition:opacity .15s ease,transform .15s ease;pointer-events:none;margin-right:4px}.nav-hint.is-visible{opacity:1;transform:translate(0)}.nav-icon:hover{transform:translateY(-2px);opacity:.85}.nav-icon[aria-label=Email]{transform:translateY(2px)}.nav-icon[aria-label=Email]:hover{transform:translateY(0)}.nav-resume-icon{display:inline-block;width:1em;height:1em;vertical-align:-.15em;margin-left:.25em}.main{flex:1;min-height:0;overflow-y:auto;scrollbar-gutter:stable;display:flex;flex-direction:column;align-items:center;padding:0 clamp(16px,4vw,32px);position:relative;z-index:10}.content-col{width:100%;max-width:560px;margin-inline:auto;display:flex;flex-direction:column;align-items:center}@keyframes fadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes cardEmerge{0%{opacity:0;transform:translate(var(--sx, 0px),var(--sy, 140px)) scale(var(--sscale, .3)) rotate(var(--srot, 0deg))}10%{opacity:1;transform:translate(var(--sx, 0px),var(--sy, 140px)) scale(var(--sscale, .3)) rotate(var(--srot, 0deg))}13%{opacity:1;transform:translate(var(--sx, 0px),var(--sy, 140px)) scale(var(--sscale, .3)) rotate(var(--srot, 0deg))}to{opacity:1;transform:translate(0) scale(1) rotate(0)}}.panel{display:none;width:100%}.panel.active{display:flex;flex-direction:column;align-items:center;animation:fadeIn .3s ease forwards;padding-block:clamp(16px,3vh,28px)}#panel-welcome.active{flex:1;justify-content:center}#panel-welcome.active .content-col{transform:translateY(-8px)}#panel-works.active,#panel-profile.active{justify-content:flex-start}#panel-works.active{padding-top:0;padding-bottom:0;flex:1;min-height:0;width:100%;overflow-y:auto;overflow-x:visible;scrollbar-gutter:stable;justify-content:center;align-items:center}.hero{position:relative;z-index:1;display:flex;flex-direction:column;width:var(--hero-w, max-content);max-width:100%;margin-inline:auto;margin-bottom:4px}.hero-greeting{align-self:flex-start;filter:url(#pixelate-hero-greeting);color:var(--Label, #2D2D2D);leading-trim:both;text-edge:cap;text-box-trim:trim-both;text-box-edge:cap alphabetic;text-box:trim-both cap alphabetic;font-family:var(--font-serif);-webkit-font-smoothing:antialiased;font-size:46px;font-style:italic;font-weight:400;line-height:normal}.hero-name{align-self:flex-start;filter:url(#pixelate-hero-name);margin-left:184px;margin-top:10px;white-space:nowrap;color:var(--Label, #2D2D2D);leading-trim:both;text-edge:cap;text-box-trim:trim-both;text-box-edge:cap alphabetic;text-box:trim-both cap alphabetic;font-family:var(--font-serif);-webkit-font-smoothing:antialiased;font-size:84px;font-style:italic;font-weight:400;line-height:normal}html:not(.hero-w-ready) .hero,html:not(.hero-w-ready) .cards-row,html:not(.hero-w-ready) .card-paper{visibility:hidden}.cards-row{display:flex;gap:8px;align-items:stretch;width:var(--hero-w, 430px);max-width:100%;margin-inline:auto;margin-bottom:12px}.card-blue{flex:1;min-width:0;height:128px;position:relative;isolation:isolate;overflow:hidden;background-color:var(--color-blue-overlay);border-radius:var(--radius-card);padding:10px 24px;display:flex;align-items:center;justify-content:flex-start;text-align:left}.card-blue:before{content:"";position:absolute;inset:0;z-index:-1;background-image:url(/assets/images/clouds.gif);background-size:cover;background-position:center;filter:blur(3px);mix-blend-mode:multiply}.card-blue-text{font-family:var(--font-serif);-webkit-font-smoothing:antialiased;font-style:normal;font-weight:400;font-size:38px;line-height:1.2;leading-trim:both;text-edge:cap;text-box-trim:trim-both;text-box-edge:cap alphabetic;text-box:trim-both cap alphabetic;letter-spacing:-.02em;color:var(--color-card-text-light)}.card-kitty{filter:url(#noise-card);width:128px;height:128px;flex-shrink:0;align-self:center;background:var(--color-kitty-bg);border-radius:var(--radius-card);overflow:hidden;display:flex;align-items:center;justify-content:center}.card-kitty-img{width:74px;height:74px;aspect-ratio:1 / 1;object-fit:cover;border-radius:8px}.card-paper{background-image:url(/assets/images/paper_texture.jpg);background-color:var(--color-paper-overlay);background-blend-mode:lighten;background-size:cover;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1.5px solid var(--Gray-outline, #E9E9E9);border-radius:var(--radius-card);padding:18px 26px;width:var(--hero-w, 430px);max-width:100%;height:100px;margin-inline:auto}.card-paper-text{font-family:var(--font-mono);font-size:18px;color:var(--color-muted);line-height:1.5}.handle{color:var(--color-subtle);text-decoration:none}.handle:hover{text-decoration:underline}#panel-works .content-col{max-width:none;width:calc(100% + 2*clamp(16px,4vw,32px));margin-inline:calc(-1*clamp(16px,4vw,32px));padding-inline:clamp(28px,5vw,48px)}.works-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;width:100%;overflow:visible;align-items:center;transition:grid-template-columns .55s cubic-bezier(.4,0,.2,1)}.works-grid:has(.work-card:nth-child(1):hover){grid-template-columns:1.6fr 1fr 1fr}.works-grid:has(.work-card:nth-child(2):hover){grid-template-columns:1fr 1.6fr 1fr}.works-grid:has(.work-card:nth-child(3):hover){grid-template-columns:1fr 1fr 1.6fr}.work-card{position:relative;border-radius:18px;padding:6px;cursor:pointer;transition:box-shadow .45s ease;background:#fff3;box-shadow:0 2px 16px #00000026;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}.work-card:hover{box-shadow:0 8px 30px #0000002e;z-index:2}#panel-works.active .work-card{transform-origin:50% 50%;opacity:0}#panel-works.active.emerge{overflow:visible}.main:has(#panel-works.active.emerge){overflow:visible}#panel-works.active.emerge .work-card{animation:cardEmerge 1.2s cubic-bezier(.22,1,.36,1) both;z-index:20}#panel-works.active.emerge .work-card{animation-delay:0s}.work-card--dark-navy .work-card-preview{background-color:#0e1225;background-image:url(/assets/images/neuralyfe_thumbnail.png);background-repeat:no-repeat;background-size:94% auto;background-position:center calc(100% + 24px)}.work-card--green .work-card-preview{background-color:#47645b;background-image:url(/assets/images/polimeter_thumbnail.png);background-repeat:no-repeat;background-size:94% auto;background-position:center calc(100% + 24px)}.work-card--dark .work-card-preview{background-color:#f2f9fa;background-image:url(/assets/images/zendesk_thumbnail.png);background-repeat:no-repeat;background-size:94% auto;background-position:center calc(100% + 24px)}.work-card--sand .work-card-preview{background:var(--color-bg);border:1px solid var(--color-sand-border)}.work-card-preview--full:after{display:none}.work-card-lock{margin-left:auto;align-self:center;font-size:22px;line-height:1}.work-card-preview{position:relative;width:100%;aspect-ratio:3 / 2;border-radius:14px;border:1px solid var(--color-sand-border);background:#ffffff80;background-size:cover;background-position:center top;backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);overflow:hidden}.work-card-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s ease}.work-card:hover .work-card-video{opacity:1}.work-card-badges{position:absolute;top:18px;left:20px;right:22px;z-index:3;display:flex;flex-wrap:wrap;gap:7px}.badge{font-family:var(--font-mono);font-size:14px;font-weight:400;letter-spacing:-.2px;padding:4px 11px;border-radius:100px;white-space:nowrap;color:var(--color-text)}.badge--on-light,.badge--shipped{border-radius:100px;background:#ffffffd9;backdrop-filter:blur(1.5px);-webkit-backdrop-filter:blur(1.5px)}.badge--on-light,.badge--shipped{color:var(--color-muted)}.badge--shipped{display:inline-flex;align-items:center;gap:6px}.shipped-dot{width:6px;height:6px;border-radius:50%;background:var(--color-status-green, #22c55e);box-shadow:0 0 4px var(--color-status-green, #22c55e),0 0 8px #22c55e99}.badge--company{display:inline-flex;align-items:center;gap:6px;border-radius:100px;border:.5px solid #E9E9E9;background:#fffc;backdrop-filter:blur(1.5px);-webkit-backdrop-filter:blur(1.5px);color:var(--color-muted)}.badge-icon{width:14px;height:14px;object-fit:contain}.work-card-title{position:absolute;left:22px;right:18px;top:52px;z-index:2;font-family:var(--font-sans);font-weight:600;font-size:26px;line-height:1.3;color:var(--Label, #2D2D2D);transition:font-size .55s cubic-bezier(.4,0,.2,1)}.work-card:hover .work-card-title{font-size:38px}.works-grid:has(.work-card:hover) .work-card:not(:hover) .work-card-title{font-size:20px}.work-card--dark-navy .work-card-title,.work-card--green .work-card-title{color:#fff}#panel-profile.active{flex:1;min-height:0;width:100%;padding:clamp(8px,1.5vh,16px) clamp(16px,3vw,32px);align-items:center;justify-content:flex-start}.mac-window{width:100%;max-width:860px;height:100%;max-height:100%;background:#fafafa;border-radius:14px;box-shadow:0 1px #fffc inset,0 8px 20px #00000014,0 2px 6px #0000000f;overflow:hidden;display:flex;flex-direction:column;border:1px solid rgba(0,0,0,.08)}.mac-chrome{flex-shrink:0;display:flex;align-items:center;gap:8px;padding:12px 14px;background:linear-gradient(to bottom,#edf1ed,#e4e9e4);border-bottom:1px solid rgba(0,0,0,.08)}.mac-dot{width:12px;height:12px;border-radius:50%;display:inline-block;box-shadow:inset 0 0 0 .5px #00000026}.mac-dot--red{background:#ff5f57}.mac-dot--yellow{background:#febc2e}.mac-dot--green{background:#28c840}.mac-body{flex:1;min-height:0;display:grid;grid-template-columns:minmax(225px,36%) 1fr}.profile-photo-col{position:relative;overflow:hidden;background:#fafafa;padding:clamp(20px,2.5vw,32px);border-right:1.5px solid var(--Gray-outline, #E9E9E9)}.profile-photo-img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(1px 3px 5px rgba(0,0,0,.1))}.profile-scroll-col{overflow-y:auto;padding:clamp(24px,4vh,40px) clamp(16px,2.5vw,28px) 0;scrollbar-gutter:stable}.profile-fade{position:sticky;bottom:0;height:64px;margin-top:-64px;pointer-events:none;background:linear-gradient(to bottom,#fafafa00,#fafafab3)}.profile-section{padding-block:clamp(16px,3vh,28px)}.profile-section:first-child{padding-top:0}.profile-section:nth-child(2){padding-top:0;margin-top:0}.profile-section:last-child{padding-bottom:clamp(40px,8vh,80px)}.profile-heading{font-family:var(--font-serif);font-style:italic;font-weight:400;font-size:40px;line-height:1.1;color:var(--color-ink);margin-bottom:22px}.profile-section:first-child .profile-heading{filter:url(#pixelate-label);-webkit-font-smoothing:antialiased;leading-trim:both;text-edge:cap;text-box-trim:trim-both;text-box-edge:cap alphabetic;text-box:trim-both cap alphabetic}.profile-subheading{font-family:var(--font-serif);font-style:italic;font-weight:400;font-size:26px;line-height:1.1;color:var(--color-ink);margin-bottom:18px}.profile-body{font-family:var(--font-sans);font-weight:300;font-size:16px;line-height:1.65;color:var(--color-text)}.fact-list{display:flex;flex-direction:column;gap:4px}.fact-card{display:flex;flex-direction:column;align-items:flex-start;gap:6px;background:#fff;border:1px solid var(--Gray-outline, #E9E9E9);border-radius:10px;padding:14px 16px}.fact-head{display:flex;align-items:baseline;gap:6px}.fact-emoji{font-size:14px;line-height:1;flex-shrink:0}.fact-label{font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--color-subtle);margin-bottom:4px}.fact-text{font-family:var(--font-sans);font-weight:300;font-size:16px;line-height:1.65;color:var(--color-text)}.exp-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column}.exp-item{display:grid;grid-template-columns:minmax(120px,22%) 1fr;gap:clamp(24px,4vw,56px);padding:14px 0;border-top:1px solid var(--Gray-outline, #E9E9E9)}.exp-item:first-child{border-top:0;padding-top:4px}.exp-left{display:flex;align-items:flex-start;gap:8px}.exp-dot{width:8px;height:8px;background:var(--color-status-green);border-radius:50%;flex-shrink:0;margin-top:6px;box-shadow:0 0 0 3px #22c55e2e;animation:pulse 2s ease-in-out infinite}.exp-company{font-family:var(--font-mono);font-size:14px;font-weight:400;letter-spacing:.04em;text-transform:uppercase;color:var(--color-grey-light);line-height:1.35}.exp-right{min-width:0}.exp-role{font-family:var(--font-sans);font-weight:700;font-size:16px;color:var(--color-text);line-height:1.3}.exp-dates{font-family:var(--font-sans);font-weight:300;font-size:14px;color:var(--color-muted);margin-top:2px}.exp-desc{font-family:var(--font-sans);font-weight:300;font-size:14px;line-height:1.55;color:var(--color-text);margin-top:6px}@keyframes pulse{0%,to{opacity:1}50%{opacity:.3}}.colophon-kao{letter-spacing:-.15em;display:inline-block}.colophon{position:fixed;bottom:18px;right:24px;margin:0;font-family:var(--font-mono);font-size:11px;line-height:1.5;color:#b5b5b5;text-align:right;text-transform:uppercase;letter-spacing:.08em;pointer-events:none;z-index:10}@media(max-width:640px){.colophon{display:none}}.folder-nav{flex-shrink:0;display:flex;justify-content:center;align-items:flex-end;gap:clamp(24px,7vw,48px);padding:clamp(14px,2.5vh,20px) clamp(20px,4vw,32px) clamp(84px,9vh,108px);background:transparent;position:relative;z-index:1}.folder-item{display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;background:none;border:none;cursor:pointer;padding:0;-webkit-tap-highlight-color:transparent}.folder-icon{display:flex;align-items:center;justify-content:center;filter:drop-shadow(2px 3px 4px var(--color-shadow));transition:transform .2s ease,filter .2s ease}.folder-item:hover .folder-icon{transform:translateY(-4px);filter:drop-shadow(3px 5px 6px var(--color-shadow-strong))}@keyframes folder-bounce{0%,to{transform:translateY(0)}15%{transform:translateY(-14px)}30%{transform:translateY(0)}45%{transform:translateY(-8px)}60%{transform:translateY(0)}}.folder-item.bouncing .folder-icon{animation:folder-bounce 2.2s ease-out}.folder-icon--emoji{font-size:clamp(44px,8vw,56px);line-height:1}.folder-icon--svg,.folder-icon--img{display:block;width:clamp(54px,10vw,72px);height:auto}.folder-icon--sidequests{width:clamp(51px,9.5vw,68px)}.folder-icon--profile{width:clamp(48px,9vw,62px);height:clamp(48px,9vw,62px);border-radius:var(--radius-folder);background:var(--color-blue-card);overflow:hidden;display:flex;align-items:center;justify-content:center}.folder-profile-img{width:100%;height:100%;object-fit:cover;transform:translateY(3px) scale(1.5)}.folder-profile-fallback{font-size:30px;display:none;align-items:center;justify-content:center}.folder-label{color:var(--color-ink);text-align:center;font-family:Inter,var(--font-sans);font-size:16px;font-style:normal;font-weight:500;line-height:26px;letter-spacing:-.18px}.folder-item .folder-label{display:inline-block;padding:0 6px;line-height:24px;border-radius:4px}.folder-item.active .folder-label{background:var(--color-blue-select);color:var(--color-white);line-height:22px}@media(max-width:420px){.works-grid{grid-template-columns:1fr}.work-card{min-height:160px}.chips-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:300px){.chips-grid{grid-template-columns:1fr}}