*{box-sizing:border-box;margin:0;padding:0}html,body,#root{-webkit-text-size-adjust:100%;background:#160f06;width:100%;height:100%;overflow:hidden}@media (aspect-ratio<=11/10),(width<=599.98px){html,body,#root{background:#1e1a15}}@font-face{font-family:VT323;font-style:normal;font-display:swap;font-weight:400;src:url(/assets/vt323-vietnamese-400-normal-D0VnvwZ9.woff2)format("woff2"),url(/assets/vt323-vietnamese-400-normal-D_5Q7Vcv.woff)format("woff");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:VT323;font-style:normal;font-display:swap;font-weight:400;src:url(/assets/vt323-latin-ext-400-normal-iUdYUaX4.woff2)format("woff2"),url(/assets/vt323-latin-ext-400-normal-DqOq58ri.woff)format("woff");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:VT323;font-style:normal;font-display:swap;font-weight:400;src:url(/assets/vt323-latin-400-normal-wDgJuOC9.woff2)format("woff2"),url(/assets/vt323-latin-400-normal-Dqn9ZSPj.woff)format("woff");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:iconfont;src:url(data:font/woff2;base64,d09GMgABAAAAAAMIAAsAAAAACTAAAAK6AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHCoGVgBsCow4jCEBNgIkAxYLFAAEIAWBAgcgGz4IIC4G7MbpCwI9dPkyeqzIatk96uOtwX+1X+893fMWZrZm4QOxCyKoVGQcqxgd4aMUChNH/EPe3t8mlmnggXRRAjmEmZSmqPcZ//CfJLL5w9/PdBGh0YJ/s42mAx1gRFoW1929d1vTtY4vAc+rTQsPI20b4V/w248F05nmRfl9ghRNmmb7jn3HlO/Lzx6oWyDp/5Kz0d17FaS6BslNUYLS7qaYwomHru3XtOlv+K+bZJ0rwZZM7KR2N40dnGpvaXCWenyv8155K1vWkdzvQZZ/ZflNfpkv5EauCnBXcUqL1EX2in0CbZtHIDDOmSCctRzCk3b947X301ZNTzdqjf727tqUokKFT9GIM6o4VEuSBIm9IRJRMXMEohLtQiVcKp0kSegpOxBCJFQbiVqUqDHTQES8EsVEe/zZGaZvC0MWW+hKikpYYlZHxBsBP44xlgAyL3YqUZqyHhwYWmUlwWksVnXVlfOlG3C8U1PWWrTvsxhJ/IAj2YjmSmMGpCpr6tiaNcUfJ90h9qCEYQBgUJhSKPAIIYz3iFk7wsCd7IhBBhs3dLx2dO1zxZMznxq98sXdSZ50fmDXbk7AuaxBj02xvggBFBBhBYYyiMUmEA9X92fvbHTJLHOanf6EK7bhkzg2+cI4LtKWWliGdshfEQMyRoxr6DJMSK2kc+k1/lOPEMqlcoDoBCIlqECJ2I9S26hZUfjbHfPg8W+H4Vmx4lehrIXMeFEpPvVgeAqbn10wl9XHbs0YK0007H588dvn0AJvut+MNUyvH5Ikdeky8R3T2kPYzp/q1AUSdObo+mLrfleSukn6dqMnhNWd3llhJAnnuIw1IF4LaRIaadUfi+sAZ5Uc4FhVoUFDucka497GA+SFToPuEjpvu+qhB24YN3/miOtueu6ey5444bonnro94ZUPW7FomRMAAAA=)format("woff2")}.hn{line-height:1}.hn:before{vertical-align:top;font-style:normal;font-family:iconfont!important;font-weight:400!important}.hn-github:before{content:""}.hn-linkedin:before{content:""}.hn-at:before{content:""}.hn-code:before{content:""}.hn-envelope:before{content:""}.hn-home:before{content:""}.hn-trophy:before{content:""}.hn-user:before{content:""}:root{--bg:#1e1a15;--void:#160f06;--ink:#f2ebdf;--ink-2:#d5ccbd;--muted:#a39887;--dim:#73695c;--accent:#f0b65c;--accent-hi:#ffd08a;--line:#f2ebdf29;--u:min(1vw, 1.6vh);--pad-x:clamp(20px, calc(4.4 * var(--u)), 84px);--pad-y:clamp(16px, calc(3.2 * var(--u)), 56px);--gap-s:clamp(6px, calc(.9 * var(--u)), 14px);--gap-m:clamp(12px, calc(2 * var(--u)), 34px);--gap-l:clamp(20px, calc(3.6 * var(--u)), 64px);--fs-display:clamp(52px, calc(11.5 * var(--u)), 184px);--fs-title:clamp(36px, calc(6.6 * var(--u)), 118px);--fs-nav:clamp(22px, calc(2.9 * var(--u)), 48px);--fs-lead:clamp(20px, calc(2.4 * var(--u)), 40px);--fs-body:clamp(18px, calc(2.05 * var(--u)), 34px);--fs-small:clamp(15px, calc(1.4 * var(--u)), 23px);--fs-hint:clamp(14px, calc(1.1 * var(--u)), 19px);--tabbar-h:58px;--icon-home:currentColor;--icon-about:currentColor;--icon-experience:currentColor;--icon-projects:currentColor;--icon-contact:currentColor}#app.icons-color{--icon-home:#c2a87d;--icon-about:#8bbfd4;--icon-experience:#d4b85a;--icon-projects:#8dc4a0;--icon-contact:#c49a9a}.nav-link .hn-home,.tab .hn-home{color:var(--icon-home)}.nav-link .hn-user,.tab .hn-user{color:var(--icon-about)}.nav-link .hn-trophy,.tab .hn-trophy{color:var(--icon-experience)}.nav-link .hn-code,.tab .hn-code{color:var(--icon-projects)}.nav-link .hn-envelope,.tab .hn-envelope{color:var(--icon-contact)}#app.icons-color .panel-title .hn-user{color:var(--icon-about)}#app.icons-color .panel-title .hn-trophy{color:var(--icon-experience)}#app.icons-color .panel-title .hn-code{color:var(--icon-projects)}#app.icons-color .panel-title .hn-envelope{color:var(--icon-contact)}#app.icons-color.can-hover .nav-link:hover .hn,#app.icons-color .nav-link:focus-visible .hn{filter:brightness(1.18)}#app{color:var(--ink);background:var(--void);font-family:VT323,monospace;position:fixed;inset:0;overflow:hidden}#app.layout-stacked{background:var(--bg)}.stage{opacity:0;transition:opacity .45s ease-out;position:absolute;inset:0}.stage.visible{opacity:1}.stage canvas{touch-action:none}#overlay{pointer-events:none;z-index:10;position:absolute;inset:0}#overlay a,#overlay button,.project{pointer-events:auto}h1,h2,p,ul,ol,dl,dd{margin:0;padding:0;font-weight:400}ul,ol{list-style:none}kbd{font:inherit}:focus{outline:none}:focus-visible{outline:2px dashed var(--accent);outline-offset:4px}.panel:focus-visible{outline:none}.panel{color:var(--ink);font-family:VT323,monospace}.panel-title{font-size:var(--fs-title);white-space:nowrap;letter-spacing:.01em;line-height:.95}.panel-title .hn{vertical-align:-.23em;color:var(--accent);margin-right:.22em;font-size:.66em}.title-accent{color:var(--accent)}.panel-body{gap:var(--gap-m);margin-top:var(--gap-l);flex-direction:column;display:flex}.body-text{text-wrap:pretty}.project-desc,.project-tech{text-wrap:balance}.body-text{font-size:var(--fs-lead);color:var(--ink-2);max-width:34em;line-height:1.12}.inline-link{color:var(--hl,var(--accent));text-underline-offset:.14em;text-decoration:underline;text-decoration-thickness:2px;-webkit-text-decoration-color:color-mix(in srgb, var(--hl,var(--accent)) 40%, transparent);text-decoration-color:color-mix(in srgb, var(--hl,var(--accent)) 40%, transparent);transition:color .15s,text-decoration-color .15s}.can-hover .inline-link:hover,.inline-link:focus-visible{color:var(--hl-hi,var(--accent-hi));text-decoration-color:currentColor}.about-hl-shopify{--hl:#95bf47;--hl-hi:#b5d97a}.about-hl-botpress{--hl:#a78bfa;--hl-hi:#c4b5fd}.about-hl-nokia{--hl:#5bb8f5;--hl-hi:#8dd0ff}.about-hl-ubc{--hl:#f5c45b;--hl-hi:#fad97a}.about-hl-skills{--hl:#6ee7b7;--hl-hi:#9af0d1}.interest{color:var(--ink)}.nav-link{color:var(--muted);font-size:var(--fs-nav);-webkit-user-select:none;user-select:none;padding:.1em 0;line-height:1;text-decoration:none;transition:color .15s;display:inline-block;position:relative}.nav-link .hn{vertical-align:-.15em;margin-right:.3em;font-size:.8em}.nav-link:before{content:">";color:var(--accent);opacity:0;margin-right:.3em;transition:opacity .15s;position:absolute;right:100%}.can-hover .nav-link:hover,.nav-link:focus-visible{color:var(--ink)}.can-hover .nav-link:hover:before,.nav-link:focus-visible:before{opacity:1}.nav-link:focus-visible{outline:none}.section-nav{column-gap:calc(var(--fs-nav) * 1.3);row-gap:calc(var(--fs-nav) * .32);padding-top:var(--gap-l);grid-template-columns:repeat(2,max-content);margin-top:auto;display:grid}.nav-warmup{white-space:nowrap;visibility:hidden;pointer-events:none;width:1px;height:1px;font-family:VT323,monospace;display:flex;position:fixed;top:0;left:0;overflow:hidden}#name-title{font-size:var(--fs-display);white-space:nowrap;-webkit-user-select:none;user-select:none;line-height:.9}#menu{gap:calc(var(--fs-nav) * .42);margin-top:var(--gap-l);flex-direction:column;display:flex}.experience-list{gap:var(--gap-m);margin-top:var(--gap-l);flex-direction:column;display:flex}.experience-entry{font-size:var(--fs-body);grid-template-columns:auto 1fr;align-items:center;column-gap:.7em;display:grid}.experience-logo{object-fit:contain;width:2.6em;height:2.6em;transition:opacity .2s}.experience-list.is-erasing .experience-logo{opacity:0}.experience-info{flex-direction:column;line-height:1.05;display:flex}.experience-name{color:var(--ink);font-size:1.35em}.experience-now{vertical-align:.2em;color:var(--bg);background:var(--accent);margin-left:.5em;padding:0 .3em;font-size:.6em}.experience-now:has(.is-empty){background:0 0}.experience-role{color:var(--ink-2)}.experience-date{color:var(--muted);font-size:var(--fs-small)}.project-list{gap:var(--gap-l);margin-top:var(--gap-l);flex-direction:column;display:flex}.project{cursor:default}.project-header{font-size:calc(var(--fs-nav) * .88);align-items:center;gap:.35em;line-height:1;display:flex}.project-icon{width:1.05em;height:1.05em;image-rendering:pixelated}.project-header :is(.project-icon,.external-mark,.project-source){visibility:hidden}:is(.project-header:has(.typed[data-anchor=right]:not(.is-empty)) :is(.external-mark,.project-source),.project-header:has(.typed[data-anchor=right].is-done) .project-icon,.project-header:has(.typed[data-anchor=left]:not(.is-empty)) .project-icon,.project-header:has(.typed[data-anchor=left].is-done) :is(.external-mark,.project-source)){visibility:visible}.project-name{color:var(--ink);text-decoration:none;transition:color .15s}.external-mark{vertical-align:.16em;width:.42em;height:.42em;fill:var(--muted);shape-rendering:crispedges;margin-left:.28em}.project-source{color:var(--muted);font-size:.85em;line-height:1;text-decoration:none;transition:color .15s}.project.is-active .project-name{color:var(--accent)}.can-hover .project-name:hover,.project-name:focus-visible{color:var(--accent-hi);text-underline-offset:.12em;text-decoration:underline;text-decoration-thickness:2px}.can-hover .project-source:hover,.project-source:focus-visible{color:var(--ink)}.project-desc{font-size:var(--fs-body);color:var(--ink-2);margin-top:.35em;line-height:1.1}.project-tech{font-size:var(--fs-small);color:var(--muted);margin-top:.3em;line-height:1.1}.contact-list{gap:var(--gap-m);margin-top:var(--gap-l);flex-direction:column;display:flex}.contact-row{flex-direction:column;gap:.15em;display:flex}.contact-label{font-size:var(--fs-small);color:var(--muted);letter-spacing:.06em;text-transform:uppercase}.contact-status{color:var(--accent);opacity:0;margin-left:.6em;transition:opacity .15s}.contact-status.is-shown{opacity:1}.contact-value{font:inherit;font-size:var(--fs-lead);color:var(--ink);cursor:pointer;text-align:inherit;text-underline-offset:.14em;text-decoration:underline;text-decoration-thickness:2px;-webkit-text-decoration-color:var(--line);text-decoration-color:var(--line);background:0 0;border:0;padding:0;line-height:1.05;transition:color .15s,text-decoration-color .15s}.contact-value .hn{color:var(--muted);vertical-align:-.1em;margin-right:.35em;font-size:.85em}.can-hover .contact-value:hover,.contact-value:focus-visible{color:var(--accent-hi);text-decoration-color:currentColor}.typed-off{visibility:hidden}.typed-edge{color:#fff;text-shadow:0 0 .3em #ffffff8c;box-shadow:inset 0 -.09em #fff}.typed-line{white-space:nowrap;display:inline-block}.typed-edge-erase{-webkit-text-fill-color:transparent;text-shadow:none}.typed-sr,.sr-only{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.typed:is(.is-empty,.is-off),.typed:is(.is-empty,.is-off) *{pointer-events:none!important}a:has(.typed:is(.is-empty,.is-off)){pointer-events:none!important}button:has(.typed:is(.is-empty,.is-off)){pointer-events:none!important}.layout-wide .panel{padding:var(--pad-y) var(--pad-x);text-shadow:0 1px 2px #00000073,0 0 .6em #14100c8c;flex-direction:column;display:flex;position:absolute;top:0;bottom:0}.layout-wide .project-list{gap:var(--gap-m);margin-top:var(--gap-m)}.layout-wide .panel-left{text-align:left;align-items:flex-start;width:min(58vw,1180px);left:0}.layout-wide .panel-right{text-align:right;align-items:flex-end;width:min(52vw,980px);right:0}.layout-wide .panel-right .section-nav{justify-content:end;justify-items:end}.layout-wide .panel-right .project-header{justify-content:flex-end}.layout-wide #home-panel{--uh:min(1vw, 1.84vh);--fs-nav:clamp(22px, calc(3.4 * var(--uh)), 96px);width:auto;padding:calc(2.45 * var(--uh)) calc(6.5 * var(--uh)) 0 0}.layout-wide #name-title{font-size:clamp(52px, calc(13 * var(--uh)), 360px)}.layout-wide #menu{gap:calc(var(--fs-nav) * .31);margin-top:max(calc(7.1 * var(--uh)), calc(var(--menu-top,.39) * 100vh - 14.15 * var(--uh)));padding-right:calc(.5 * var(--uh))}.layout-wide #contact-panel{align-content:start;align-items:start;column-gap:var(--gap-l);grid-template-columns:minmax(0,1fr) auto;width:auto;display:grid;left:0}.layout-wide #contact-panel .panel-title{grid-area:1/2;justify-self:end}.layout-wide #contact-panel .contact-list{justify-self:start;column-gap:calc(var(--gap-l) * 1.2);row-gap:var(--gap-m);text-align:left;flex-flow:wrap;grid-area:1/1;margin-top:0}.layout-wide #contact-panel .section-nav{grid-area:2/1/3/3;justify-self:end;margin-top:0}.layout-wide #projects-panel{width:min(44vw,860px)}.layout-wide .project-desc{max-width:30em;margin-left:auto}.layout-wide .experience-list{clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}.layout-wide .panel-sheet{display:contents}@media (height<=520px){:root{--fs-title:clamp(28px, calc(6.6 * var(--u)), 118px);--fs-nav:clamp(17px, calc(2.9 * var(--u)), 48px);--fs-lead:clamp(15px, calc(2.4 * var(--u)), 40px);--fs-body:clamp(14px, calc(2.05 * var(--u)), 34px);--fs-small:clamp(13px, calc(1.4 * var(--u)), 23px);--fs-display:clamp(40px, calc(11.5 * var(--u)), 184px);--gap-l:clamp(12px, calc(3.6 * var(--u)), 64px)}}.key-hints{bottom:var(--pad-y);right:var(--pad-x);font-size:var(--fs-hint);color:var(--muted);white-space:nowrap;-webkit-user-select:none;user-select:none;opacity:0;gap:1.6em;transition:opacity .8s ease-out;display:flex;position:absolute}.view-about .key-hints{right:auto;left:var(--pad-x)}.layout-wide.has-key-hints .panel{padding-bottom:calc(var(--pad-y) + var(--fs-hint) * 2.4)}.key-hints.visible{opacity:1}@media (height<=520px){.key-hints{display:none}.layout-wide.has-key-hints .panel{padding-bottom:var(--pad-y)}}.key-hints kbd,.freecam-hud kbd{color:var(--ink);border:1px solid #f2ebdf59;border-bottom-width:3px;border-radius:3px;margin-right:.45em;padding:0 .4em;line-height:1.15;display:inline-block}.freecam-ui{transition:opacity .7s ease-out}.freecam-ui.idle{opacity:0}.freecam-hud{top:var(--pad-y);left:var(--pad-x);font-size:var(--fs-hint);color:var(--muted);text-shadow:0 1px 2px #00000080;position:absolute}.freecam-title{font-size:calc(var(--fs-hint) * 1.6);color:var(--accent);letter-spacing:.04em;text-transform:uppercase;line-height:1}.freecam-controls{flex-wrap:wrap;gap:.4em 1.4em;margin-top:.6em;display:flex}.freecam-controls kbd{margin-right:.35em}.freecam-controls kbd+kbd{margin-left:.35em}.freecam-pose{font:inherit;color:var(--dim);cursor:copy;background:0 0;border:0;flex-direction:column;align-items:flex-start;margin-top:.9em;padding:0;font-size:.9em;line-height:1.15;display:flex}.can-hover .freecam-pose:hover{color:var(--muted)}.is-freecam .panel-sheet{opacity:0}.layout-stacked,.layout-flat{--pad-x:clamp(20px, 6vw, 56px);--gap-s:8px;--gap-m:clamp(14px, 3.4vw, 20px);--gap-l:clamp(18px, 4.6vw, 26px);--fs-display:clamp(50px, 16vw, 128px);--fs-title:clamp(36px, 10.5vw, 84px);--fs-nav:clamp(24px, 6.6vw, 46px);--fs-lead:clamp(19px, 5.1vw, 36px);--fs-body:clamp(18px, 4.7vw, 32px);--fs-small:clamp(15px, 3.9vw, 24px);--tabbar-h:clamp(56px, 7.5vw, 74px)}@property --scene-frac{syntax:"<number>";inherits:false;initial-value:0}.layout-stacked .panel-sheet,.layout-flat .panel-sheet{left:0;right:0;top:calc(var(--scene-frac) * 100%);padding:26px var(--pad-x) calc(var(--tabbar-h) + 28px + env(safe-area-inset-bottom));overscroll-behavior:contain;pointer-events:auto;scrollbar-width:none;flex-direction:column;transition:top .7s cubic-bezier(.22,.8,.3,1),opacity .3s;display:flex;position:absolute;bottom:0;overflow-y:auto}.layout-stacked .panel-sheet::-webkit-scrollbar{display:none}.layout-flat .panel-sheet::-webkit-scrollbar{display:none}.layout-stacked .panel-sheet{background:linear-gradient(to bottom, #1e1a1500 0, #1e1a15db 12px, var(--bg) 22px)}.layout-stacked:not(.view-home) .panel-sheet,.layout-flat:not(.view-home) .panel-sheet{-webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - var(--tabbar-h) - 40px - env(safe-area-inset-bottom)), transparent calc(100% - var(--tabbar-h) - 6px - env(safe-area-inset-bottom)));-webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - var(--tabbar-h) - 40px - env(safe-area-inset-bottom)), transparent calc(100% - var(--tabbar-h) - 6px - env(safe-area-inset-bottom)));mask-image:linear-gradient(to bottom, #000 calc(100% - var(--tabbar-h) - 40px - env(safe-area-inset-bottom)), transparent calc(100% - var(--tabbar-h) - 6px - env(safe-area-inset-bottom)))}.layout-stacked:not(.view-home):not(.is-freecam) #overlay:before{content:"";height:calc(var(--tabbar-h) + 40px + env(safe-area-inset-bottom));background:var(--bg);position:absolute;bottom:0;left:0;right:0}.layout-stacked.view-home .panel-sheet,.layout-flat.view-home .panel-sheet{padding-bottom:calc(28px + env(safe-area-inset-bottom))}.layout-stacked .panel,.layout-flat .panel{text-align:left;flex-direction:column;align-items:flex-start;display:flex}.layout-stacked .panel-title,.layout-flat .panel-title{white-space:normal}.layout-stacked .panel-body,.layout-stacked .project-list,.layout-stacked .contact-list,.layout-stacked .experience-list,.layout-flat .panel-body,.layout-flat .project-list,.layout-flat .contact-list,.layout-flat .experience-list{margin-top:var(--gap-m)}.layout-stacked .project-list,.layout-flat .project-list{gap:var(--gap-l)}.layout-stacked #menu,.layout-flat #menu{margin-top:var(--gap-m);gap:4px}.layout-stacked #menu .nav-link,.layout-flat #menu .nav-link{padding:8px 0}.is-touch #menu .nav-link:after{content:" ›";color:var(--dim);visibility:hidden}.is-touch #menu .nav-link:has(>.typed.is-done):after{visibility:visible}.layout-flat .panel-sheet{align-items:center;padding-top:max(40px,8vh);top:0}.layout-flat .panel{width:100%;max-width:640px;margin:auto 0}.tabbar{padding:0 4px env(safe-area-inset-bottom);pointer-events:auto;background:#17140f;border-top:1px solid #f2ebdf14;animation:.3s ease-out tabbar-in;display:flex;position:absolute;bottom:0;left:0;right:0}@keyframes tabbar-in{0%{opacity:0;transform:translateY(12px)}}.tab{min-height:var(--tabbar-h);color:var(--muted);-webkit-tap-highlight-color:transparent;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:3px;font-size:clamp(15px,2.3vw,21px);line-height:1;text-decoration:none;display:flex}.tab .hn{font-size:1.45em}.tab[aria-current=page]{color:var(--accent)}.tab:active{color:var(--ink)}.tab:focus-visible{outline-offset:-6px}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}