@font-face{font-family:Inter;src:url(/_astro/inter-latin-wght-normal.Dx4kXJAl.woff2)format("woff2");font-style:normal;font-weight:100 900;font-display:swap}:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--background:#15171d;--surface:#20232c;--surface-hover:#292e38;--text:#eae7e1;--muted:#b7b9c4;--accent:#f2bd71;--blue:#a4ceff;--coral:#f39e94;--mint:#a9d4b2;--blue-surface:#1d2b3a;--coral-surface:#332522;--amber-surface:#30281e;--line:#454955;--font-sans:"Inter", ui-sans-serif, system-ui, sans-serif;--font-mono:ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:110px}body{background:var(--background);color:var(--text);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;margin:0;font-size:16px;line-height:1.75}::selection{background:var(--accent);color:var(--background)}a{color:inherit;text-decoration:none}a,button{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible{outline:3px solid var(--accent);outline-offset:5px;border-radius:3px}h1,h2,h3,h4,p{margin:0}h1,h2,h3{letter-spacing:-.035em;text-wrap:balance;font-weight:600;line-height:1.2}h2{font-size:clamp(28px,3.5vw,36px)}h3{font-size:23px}p{overflow-wrap:break-word;max-width:70ch}svg{flex-shrink:0}.shell{width:100%;max-width:1120px;margin-inline:auto;padding-inline:40px}.site-header{z-index:10;background:var(--background);border-bottom:1px solid var(--line);position:sticky;top:0}.header-inner{justify-content:space-between;align-items:center;gap:24px;min-height:88px;display:flex}.wordmark{white-space:nowrap;align-items:center;gap:12px;min-height:44px;font-size:15px;font-weight:600;display:inline-flex}.monogram{background:var(--accent);border:1px solid var(--accent);width:38px;height:38px;font-family:var(--font-mono);color:var(--background);border-radius:9px;place-items:center;font-size:14px;display:grid}nav{flex-wrap:wrap;align-items:center;gap:4px;display:flex}nav a{min-width:44px;min-height:44px;color:var(--muted);border-radius:6px;justify-content:center;align-items:center;padding:8px 12px;font-size:14px;transition:color .16s,background-color .16s;display:inline-flex}nav a:hover{color:var(--text);background:var(--surface)}nav .nav-contact{color:var(--accent)}.nav-contact span{margin-left:6px}.eyebrow{font-family:var(--font-mono);color:var(--muted);font-size:12px;line-height:1.7}.hero{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);align-items:center;column-gap:56px;padding-top:56px;display:grid}.hero h1{letter-spacing:-.055em;margin-top:20px;font-size:clamp(40px,5.5vw,60px)}.hero h1 span{color:var(--accent)}.hero h1 .hero-greeting{color:var(--text)}.mobile-intro,.mobile-dock{display:none}.hero-subtitle span{color:var(--blue)}.hero-subtitle{letter-spacing:-.025em;color:var(--text);margin-top:18px;font-size:clamp(22px,2.7vw,29px);line-height:1.4}.hero-description{color:var(--muted);max-width:48ch;margin-top:24px}.hero-actions{flex-wrap:wrap;gap:12px;margin-top:30px;display:flex}.button{border:1px solid #0000;border-radius:7px;justify-content:center;align-items:center;gap:16px;min-height:48px;padding:11px 19px;font-size:14px;font-weight:600;line-height:1.5;transition:background-color .16s,border-color .16s;display:inline-flex}.button-primary{color:var(--background);background:var(--accent)}.button-primary:hover{background:#ffd49a}.button-secondary{background:var(--surface);border-color:var(--line)}.button-secondary:hover{background:var(--surface-hover);border-color:var(--muted)}.button-ghost{border-color:var(--line);color:var(--text);background:0 0}.button-ghost:hover{border-color:var(--muted);background:var(--surface)}.text-link{min-height:44px;color:var(--accent);align-items:center;gap:10px;padding-block:9px;font-size:14px;font-weight:500;display:inline-flex}.text-link:hover{text-underline-offset:5px;text-decoration:underline}.portrait{justify-self:end;width:100%;max-width:300px;margin:0}.portrait img{aspect-ratio:1;object-fit:cover;border:1px solid var(--line);border-radius:18px;width:100%;height:auto;display:block}.portrait figcaption{color:var(--muted);text-align:center;margin-top:12px;font-size:12px}.hero-history{border-top:1px solid var(--line);grid-column:1/-1;align-items:center;gap:24px;margin-top:40px;padding:20px 0;font-size:15px;display:flex}.separator{color:var(--muted);margin-inline:10px}.company-tokopedia{color:var(--mint)}.company-bytedance{color:var(--blue)}.history-detail{color:var(--muted);margin-left:auto;font-size:14px}.section{border-top:1px solid var(--line);padding-block:64px}.section-heading{justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:30px;display:flex}.section-heading h2{margin-top:12px}#work .section-heading .eyebrow{color:var(--blue)}#experience .section-heading .eyebrow{color:var(--accent)}#about .section-heading .eyebrow{color:var(--coral)}.section-heading>p{color:var(--muted);font-size:14px;line-height:1.7}.project-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;display:grid}.project-card{--card-accent:var(--blue);--card-line:#405a75;background:var(--blue-surface);border:1px solid var(--card-line);border-top:2px solid var(--card-accent);border-radius:9px;flex-direction:column;min-width:0;padding:18px;transition:transform .16s,box-shadow .16s,border-color .16s;display:flex;position:relative}.project-card:nth-child(3n+2){--card-accent:var(--coral);--card-line:#75504a;background:var(--coral-surface)}.project-card:nth-child(3n){--card-accent:var(--accent);--card-line:#715a3b;background:var(--amber-surface)}.project-top{align-items:center;gap:10px;margin-bottom:10px;display:flex}.project-icon{color:var(--card-accent);place-items:center;width:28px;height:28px;display:grid}.project-icon svg{width:24px;height:24px}.status{color:var(--card-accent);font-size:12px}.project-card h3{font-size:18px}.project-title{justify-content:space-between;align-items:baseline;gap:12px;min-height:44px;display:flex}.project-title:hover{color:var(--card-accent)}.project-title:after{content:"";border-radius:9px;position:absolute;inset:0}.project-title:focus-visible{outline:none}.project-title:focus-visible:after{outline:3px solid var(--accent);outline-offset:4px}@media (hover:hover) and (pointer:fine){.project-card:hover{border-color:var(--card-accent);transform:translateY(-2px);box-shadow:0 8px 22px #0003}.project-card:hover .project-title{color:var(--card-accent)}}.project-title svg{color:var(--card-accent);align-self:center}.project-card>p{color:var(--muted);margin-top:8px;font-size:14px;line-height:1.6}.tags{flex-wrap:wrap;gap:8px;margin:20px 0 0;padding:0;list-style:none;display:flex}.tags li{border:1px solid var(--line);color:var(--muted);border-radius:5px;padding:4px 9px;font-size:12px;line-height:1.6}.project-card .project-proof{margin-top:auto;padding-top:14px;font-size:13px}.project-proof strong{color:var(--card-accent);margin-right:4px;font-size:17px;font-weight:600}.project-proof span{margin-top:3px;font-size:12px;display:block}.section-intro{max-width:68ch;color:var(--muted);margin-bottom:28px}.career-impact{grid-column:1/-1;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;padding-top:12px;display:grid}.career-impact>div{--impact-accent:var(--accent);min-width:0}.career-impact>div:nth-child(2){--impact-accent:var(--blue)}.career-impact>div:nth-child(3){--impact-accent:var(--coral)}.career-impact h2{color:var(--impact-accent);letter-spacing:-.02em;font-size:17px}.impact-summary{color:var(--muted);margin-top:6px;font-size:12px}.career-impact dl{margin:16px 0 0}.career-impact dl>div+div{margin-top:16px}.career-impact dt{flex-wrap:wrap;align-items:baseline;gap:2px 8px;font-size:13px;font-weight:500;line-height:1.5;display:flex}.career-impact dt strong{letter-spacing:-.035em;color:var(--impact-accent);font-size:25px;font-weight:650;line-height:1.3}.career-impact dd{color:var(--muted);margin:3px 0 0;font-size:12px;line-height:1.5}.impact-scope{color:var(--muted);grid-column:1/-1;margin-block:24px 32px;font-size:12px}.case-metrics{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:0;display:grid}.case-metrics dt{color:var(--text);font-size:14px}.case-metrics dd{margin:10px 0 0}.metric-value{letter-spacing:-.03em;color:var(--accent);font-size:32px;font-weight:600;line-height:1.3;display:block}.case-metrics dd>p{color:var(--muted);margin-top:8px;font-size:12px;line-height:1.7}.experience-row+.experience-row{margin-top:30px}.recognition{border-top:1px solid #75504a;margin-top:24px;padding-top:24px}.case-metrics{background:var(--surface);border:1px solid var(--line);border-radius:9px;margin-bottom:32px;padding:24px}.impact-list{color:var(--muted);margin:0;padding-left:22px}.impact-list li+li{margin-top:16px}.evidence-note{border-left:3px solid var(--blue);margin-block:12px 28px;padding-left:20px}.evidence-note p+p{color:var(--muted);margin-top:10px;font-size:14px}.experience-row{border-top:1px solid var(--line);grid-template-columns:140px minmax(0,1fr);gap:32px;padding:30px 0 0;display:grid}.experience-meta{flex-direction:column;gap:6px;font-size:14px;display:flex}.experience-date{color:var(--accent);font-family:var(--font-mono)}.experience-body{min-width:0}.role{color:var(--accent);margin-top:10px;font-size:14px}.experience-body>p:not(.role){color:var(--muted);max-width:65ch;margin-top:20px}.experience-points{max-width:65ch;color:var(--muted);grid-template-columns:minmax(0,1fr);gap:20px;margin:24px 0 0;padding-left:20px;font-size:14px;line-height:1.75;display:grid}.experience-points li{overflow-wrap:break-word;min-width:0}.experience-points li>strong:first-child{margin-bottom:6px;display:block}.experience-points li::marker{color:var(--blue)}.experience-points strong{color:var(--text);font-weight:600}.experience-body .text-link{margin-top:12px}.toolkit{border:1px solid var(--line);border-radius:9px;margin-top:36px;padding:24px}.toolkit ul{font-family:var(--font-mono);flex-wrap:wrap;gap:12px 24px;margin:12px 0 0;padding:0;font-size:14px;list-style:none;display:flex}.toolkit li{background:var(--blue-surface);color:var(--blue);border-radius:6px;padding:5px 12px}.toolkit li:nth-child(3n+2){background:var(--amber-surface);color:var(--accent)}.toolkit li:nth-child(3n){background:var(--coral-surface);color:var(--coral)}.about-columns{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);align-items:start;gap:56px;display:grid}.about-copy{max-width:65ch;color:var(--muted)}.about-copy p+p{margin-top:18px}.education-card{background:var(--coral-surface);border:1px solid #75504a;border-radius:9px;padding:24px}.education-card .eyebrow{color:var(--coral)}.education-card h3{margin-top:16px;font-size:19px}.education-card p{margin-top:10px;font-size:14px}.muted{color:var(--muted)}.resume-panel{background:var(--amber-surface);border:1px solid #715a3b;border-radius:12px;justify-content:space-between;align-items:center;gap:32px;padding:32px;display:flex}.resume-panel .eyebrow{color:var(--accent)}.resume-panel h2{margin-top:12px;font-size:28px}.resume-panel p:not(.eyebrow){color:var(--muted);margin-top:12px;font-size:16px}.resume-actions,.contact-actions{flex-wrap:wrap;align-items:center;gap:16px;display:flex}.contact-section{justify-content:space-between;align-items:center;gap:40px;padding-block:72px;display:flex}.contact-section h2{color:var(--coral);margin-top:14px;font-size:clamp(36px,4vw,48px)}.contact-section p:not(.eyebrow){color:var(--muted);margin-top:18px}.contact-actions{max-width:340px}.email-copy{flex-wrap:wrap;align-items:center;gap:4px 12px;width:100%;display:flex}.email-address{min-width:0;color:var(--text);overflow-wrap:anywhere;-webkit-user-select:all;user-select:all;font-size:14px}.copy-email{min-height:44px;color:var(--blue);border:1px solid var(--line);font:inherit;cursor:pointer;background:0 0;border-radius:6px;justify-content:center;align-items:center;gap:6px;padding:8px;font-size:12px;display:inline-flex}.copy-email[hidden]{display:none}.copy-email:hover{background:var(--surface)}.copy-email:disabled{cursor:wait;opacity:.6}.copy-status{width:100%;color:var(--muted);font-size:12px}.copy-status:empty{display:none}.contact-location{width:100%;color:var(--muted);font-size:13px}.footer{border-top:1px solid var(--line);color:var(--muted);justify-content:space-between;align-items:center;gap:20px;padding-block:24px;font-size:12px;display:flex}.footer a{align-items:center;gap:8px;min-height:44px;display:inline-flex}.footer a:hover{color:var(--accent)}.detail-page{max-width:960px;margin:0 auto;padding-top:24px}.breadcrumbs{max-width:760px;display:block}.breadcrumbs ol{color:var(--muted);flex-wrap:wrap;align-items:center;gap:0 8px;margin:0;padding:0;font-size:12px;list-style:none;display:flex}.breadcrumbs li{align-items:center;min-width:0;display:inline-flex}.breadcrumbs li+li:before{content:"/";color:var(--line);margin-right:8px}.breadcrumbs a{min-width:auto;min-height:44px;color:var(--blue);padding:8px 2px;font-size:12px}.breadcrumbs [aria-current]{overflow-wrap:anywhere}.back-link{min-height:44px;color:var(--muted);align-items:center;gap:12px;padding-block:10px;font-size:14px;display:inline-flex}.back-link:hover{color:var(--accent)}.detail-header{max-width:760px;padding-block:20px 32px}.detail-header>.eyebrow{color:var(--accent)}.detail-header h1{margin-top:20px;font-size:clamp(34px,5vw,52px)}.detail-intro{color:var(--muted);margin-top:24px;font-size:18px;line-height:1.8}.case-overview{border:1px solid var(--line);background:var(--surface);border-radius:9px;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 24px;margin:24px 0 0;padding:24px;display:grid}.case-overview dt{color:var(--muted);font-size:12px}.case-overview dd{overflow-wrap:anywhere;margin:6px 0 0;font-size:14px;line-height:1.6}.overview-impact strong{color:var(--accent);letter-spacing:-.035em;font-size:23px;font-weight:600}.case-layout{grid-template-columns:minmax(0,760px) minmax(0,168px);gap:32px;display:grid}.case-content{grid-area:1/1;min-width:0}.case-toc{grid-area:1/2;align-self:start;position:sticky;top:110px}.case-toc nav{gap:4px;display:grid}.case-toc .eyebrow{padding:8px 12px}.case-toc a{border-left:2px solid #0000;justify-content:flex-start;min-width:0;font-size:12px;line-height:1.4}.case-toc a[aria-current]{color:var(--accent);background:var(--amber-surface);border-left-color:var(--accent)}.detail-subheading{margin-block:28px 16px;font-size:19px}.architecture-figure{margin:24px 0 0}.diagram-scroll{border:1px solid var(--line);border-radius:10px;max-width:100%;overflow-x:auto}.diagram-scroll:focus-visible{outline:3px solid var(--accent);outline-offset:4px}.diagram-scroll img{width:100%;min-width:640px;height:auto;display:block}.architecture-figure figcaption{color:var(--muted);max-width:65ch;margin-top:12px;font-size:12px;line-height:1.6}.detail-section{border-top:1px solid var(--line);padding-block:32px}.detail-section h2{margin-bottom:20px;font-size:27px}.detail-section>p{color:var(--muted)}.focus-item{grid-template-columns:30px minmax(0,1fr);gap:20px;margin-top:28px;display:grid}.focus-item .eyebrow{color:var(--accent);padding-top:4px}.focus-item h3{margin-bottom:12px;font-size:20px}.focus-item p{color:var(--muted)}.takeaway{background:var(--surface);border:1px solid var(--line);border-radius:9px;margin-block:12px 40px;padding:28px}.takeaway>.eyebrow{color:var(--accent)}.takeaway p{color:var(--text);margin-top:14px}.case-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-block:8px 40px;display:grid}.case-actions .case-action{border:1px solid var(--line);min-width:0;min-height:100px;color:var(--text);border-radius:9px;justify-content:space-between;align-items:center;gap:16px;padding:20px;display:flex}.case-action h3{overflow-wrap:anywhere;margin-top:8px;font-size:18px}.case-action-next{background:var(--blue-surface)}.case-action-cv{background:var(--amber-surface)}.case-action-next .eyebrow{color:var(--blue)}.case-action-cv .eyebrow{color:var(--accent)}.case-actions .case-action:hover{border-color:var(--muted);background:var(--surface-hover)}.not-found{padding-block:100px}.not-found h1{margin-top:24px;font-size:clamp(36px,6vw,56px)}.not-found p{color:var(--muted);margin-top:24px}.not-found .button{margin-top:24px}.cv-page{padding-block:32px 56px}.cv-back{color:var(--blue)}.cv-header{justify-content:space-between;align-items:center;gap:32px;padding-block:32px;display:flex}.cv-header h1{margin-top:16px;font-size:clamp(32px,4vw,44px)}.cv-header p{color:var(--muted);margin-top:16px}.cv-header .button{flex-shrink:0}.cv-fallback{color:var(--muted);margin-bottom:20px;font-size:14px}.cv-fallback a,.cv-viewer a{min-height:44px;color:var(--accent);text-underline-offset:4px;padding-block:9px;text-decoration:underline;display:inline-block}.cv-viewer{border:1px solid var(--line);background:var(--surface);border-radius:8px;width:100%;height:80vh;min-height:500px;display:block}.cv-viewer>p{padding:24px}.skip-link{z-index:50;color:var(--background);background:var(--accent);border-radius:5px;padding:12px 18px;position:fixed;top:12px;left:12px;transform:translateY(-150%)}.skip-link:focus{transform:translateY(0)}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@media (width>=1000px){.experience-points{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:36px;max-width:none}}@media (width<=1100px){.detail-page{max-width:760px}.case-layout{display:block}.case-toc{margin-bottom:20px;position:static}.case-toc nav{grid-template-columns:repeat(4,minmax(0,1fr))}.case-toc .eyebrow{grid-column:1/-1;padding-left:0}}@media (width<=900px){.shell{padding-inline:28px}.header-inner{gap:16px}.wordmark{gap:8px}nav a{padding-inline:9px}.hero{gap:32px;padding-top:56px}.experience-row{grid-template-columns:140px minmax(0,1fr);gap:28px}.about-columns{gap:28px}.project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.resume-panel{flex-wrap:wrap}}@media (width<=700px){html{scroll-padding-top:16px;scroll-padding-bottom:calc(100px + env(safe-area-inset-bottom,0px))}body{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}.site-header{position:static}.site-header-home{display:none}.shell{padding-inline:20px}.header-inner{min-height:60px;padding-block:8px}.wordmark{font-size:13px}.monogram{width:30px;height:30px;font-size:12px}.desktop-nav{display:none}.mobile-dock{z-index:30;left:max(12px, env(safe-area-inset-left,0px));right:max(12px, env(safe-area-inset-right,0px));bottom:calc(12px + env(safe-area-inset-bottom,0px));background:#20232cf5;border:1px solid #ffffff30;border-radius:28px;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;width:auto;max-width:440px;margin-inline:auto;padding:6px;display:grid;position:fixed;box-shadow:0 8px 28px #0006,inset 0 1px #ffffff1f}.mobile-dock a{min-width:0;min-height:54px;color:var(--muted);border-radius:21px;flex-direction:column;gap:4px;padding:6px 2px;font-size:10px;font-weight:500;line-height:1.2;display:flex}.mobile-dock a[aria-current]{color:var(--accent);background:#f2bd711a;box-shadow:inset 0 0 0 1px #f2bd7133}.mobile-dock a:focus-visible{outline-offset:-2px;border-radius:21px}@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.mobile-dock{-webkit-backdrop-filter:blur(14px)saturate(140%);backdrop-filter:blur(14px)saturate(140%);background:#20232ce8}}.hero{grid-template-columns:88px minmax(0,1fr);gap:8px 16px;padding-top:24px}.hero-copy{display:contents}.hero .eyebrow{grid-area:2/2;align-self:start;font-size:11px}.hero h1{grid-area:1/2;align-self:end;margin:0;font-size:clamp(28px,8vw,36px)}.hero h1 .hero-greeting{display:none}.hero-subtitle{grid-column:1/-1;margin-top:18px;font-size:23px}.hero-description{grid-column:1/-1;max-width:54ch;margin-top:8px}.desktop-intro{display:none}.mobile-intro{display:block}.hero-actions{grid-column:1/-1;gap:8px;margin-block:12px 18px}.hero-actions .button{padding-inline:14px;font-size:13px}.portrait{grid-area:1/1/span 2;justify-self:start;width:88px;max-width:88px}.portrait img{border-radius:16px}.portrait figcaption{display:none}.hero-history{flex-wrap:wrap;gap:10px 20px;margin-top:0}.hero-history .eyebrow{width:100%}.hero-history>.eyebrow{display:none}.history-detail{font-size:12px}.section{padding-block:48px}.section-heading{flex-direction:column;align-items:flex-start;gap:14px}.career-impact,.case-metrics{grid-template-columns:minmax(0,1fr);gap:22px}.career-impact>div{border-left:2px solid var(--impact-accent);padding-left:16px}.career-impact dt strong{font-size:24px}.project-grid{grid-template-columns:minmax(0,1fr);gap:16px}.project-card{border-top:1px solid var(--card-line);border-left:3px solid var(--card-accent);padding:16px}.project-card h3{font-size:17px}.project-icon{display:none}.project-title{min-height:40px}.project-title:after{border-radius:8px}.project-card>p:not(.project-proof){white-space:nowrap;text-overflow:ellipsis;margin-top:2px;font-size:13px;line-height:1.5;overflow:hidden}.project-card .project-proof{padding-top:10px}.project-top{margin-bottom:8px}.experience-row{grid-template-columns:minmax(0,1fr);gap:20px}.experience-meta{flex-flow:wrap;gap:16px}.about-columns{grid-template-columns:minmax(0,1fr);gap:24px}.education-card{max-width:480px}.resume-panel{gap:24px;padding:24px}.contact-section{flex-direction:column;align-items:flex-start;gap:28px;padding-block:48px}.contact-actions{max-width:none}.footer{flex-wrap:wrap;gap:8px 16px}.footer p:nth-child(2){order:3;width:100%}.footer a{margin-left:auto}.cv-header{flex-direction:column;align-items:flex-start;gap:24px}.cv-viewer{height:65vh;min-height:430px}.detail-page{padding-top:24px}.case-overview{gap:18px;padding:18px}.case-toc nav{grid-template-columns:repeat(2,minmax(0,1fr))}.case-actions{grid-template-columns:minmax(0,1fr)}.case-actions .case-action{min-height:84px}.detail-intro{font-size:17px}.focus-item{grid-template-columns:20px minmax(0,1fr);gap:12px}.takeaway{padding:24px}.desktop-break{display:none}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.project-card:hover{transform:none}*,:before,:after{transition-duration:0s!important;animation-duration:0s!important}}