/* Shared themes and responsive page layouts. Artwork retains its original colors. */
select{font:inherit;color:inherit}select:focus-visible,summary:focus-visible{outline:3px solid var(--border-color-action);outline-offset:4px}.theme-picker{flex-shrink:0}.theme-picker select{width:116px;min-height:40px;padding:8px 24px 8px 12px;border:1px solid var(--line);border-radius:24px;background:var(--container-color-primary);font-size:12px;cursor:pointer}.desktop-nav a:hover{color:var(--ink)}.primary{background:var(--font-color-primary);color:var(--container-color-primary);border-color:var(--font-color-primary)}.primary:hover{background:var(--font-color-secondary)}.tag:not(.tag-dark){color:#212121}.word{display:inline-block;white-space:pre}.subpage h1{font-size:56px;line-height:72px;font-weight:700}.subpage main{position:relative}.article-header{padding:48px var(--margin) 0}.article-intro{max-width:888px;margin:0 auto 48px;text-align:center}.article-intro p{font-size:18px;line-height:28px;color:var(--muted);margin-top:16px}.article-cover{width:100%;max-width:888px;max-height:660px;object-fit:cover;margin:auto;border-radius:32px;border:1px solid var(--border-color-secondary)}.coming-label{display:inline-block;background:var(--font-color-primary);color:var(--container-color-primary);padding:8px 16px;border-radius:24px;font-size:14px;margin-bottom:24px}.article-body{display:flex;flex-direction:column;gap:48px;padding:48px var(--margin) 96px;max-width:1560px;margin:auto}.article-section{width:100%;min-width:0}.article-section>.figma-block{height:auto}.prose{width:100%;max-width:888px;margin-inline:auto;display:flex;flex-direction:column;gap:16px;font-size:18px;line-height:28px}.prose h1,.prose h2{font-size:32px;line-height:42px;font-weight:600}.prose h3{font-size:28px;line-height:38px;font-weight:600}.prose h4{font-size:24px;line-height:34px}.prose p:empty{display:none}.prose p>span:only-child{display:contents}.prose ul,.prose ol{margin:0;padding-left:28px}.prose a,.experience-copy a{text-decoration:underline;text-underline-offset:4px}.figma-block{min-width:0}.figma-block p{margin:0}.fill-image{width:100%;height:100%;object-fit:cover;border-radius:inherit}.article-carousel{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 max(0px,calc((100% - 888px)/2)) 16px;scrollbar-width:thin;overscroll-behavior-inline:contain}.carousel-item{flex:0 0 min(432px,88vw);min-width:0;display:flex;flex-direction:column;gap:16px;scroll-snap-align:start}.article-body img[src$=".png"]{cursor:zoom-in}.contribution{margin-inline:auto}.article-quote{max-width:888px;margin:auto}.cooking{text-align:center}.cooking>.figma-block{align-items:center}.cooking .prose{align-items:center}.about-photo{max-width:984px;margin:48px auto 0;padding:0 48px;height:auto;aspect-ratio:984/560;overflow:hidden;position:relative}.about-photo img{position:absolute;width:calc(100% - 96px);height:237.86%;top:-115.71%;object-fit:cover;border-radius:32px}.about-photo{clip-path:inset(0 48px round 32px)}.about-body{max-width:984px;margin:auto;padding:48px 48px 96px;display:flex;flex-direction:column;gap:48px}.about-body hr{width:100%;height:1px;border:0;background:var(--border-color-secondary);margin:0}.toolbox{border:1px solid var(--border-color-secondary);border-radius:32px;padding:24px;display:flex;align-items:center;gap:24px}.toolbox>div:first-child{flex-shrink:0}.toolbox strong{font-size:18px}.toolbox p{font-size:14px;color:var(--muted)}.tool-icons{display:flex;gap:16px;overflow:auto;min-width:0}.tool-icons>.figma-block{height:64px;flex-shrink:0}.experience-list{display:flex;flex-direction:column;gap:16px}.experience-item{border:1px solid var(--border-color-secondary);border-radius:32px;padding:24px;background:var(--container-color-primary)}.experience-item summary{display:flex;gap:24px;align-items:center;cursor:pointer;list-style:none}.experience-item summary::-webkit-details-marker{display:none}.company-icon{width:64px;height:64px;object-fit:cover;border-radius:16px;background:var(--container-color-secondary)}.experience-item summary>span:nth-child(2){flex:1;min-width:0}.experience-item summary strong{font-size:18px;line-height:28px;display:block}.experience-item small{display:block;font-size:16px;line-height:26px;color:var(--muted)}.chevron{font-size:28px;transition:transform .2s}.experience-item[open] .chevron{transform:rotate(180deg)}.experience-copy{font-size:18px;line-height:28px;margin-top:16px}.experience-copy p+p{margin-top:16px}.experience-copy ul{padding-left:24px}.gallery-page{background:var(--container-color-secondary)}.gallery-page .navbar{background:transparent;border-color:#ffffff29;color:white}.gallery-page .desktop-nav{color:#fffd}.gallery-page .menu-toggle span{background:white}.gallery-page .nav-call{border-color:#ffffff66}.gallery-page .theme-picker{color:var(--ink)}.gallery-backdrop{position:absolute;top:-72px;left:0;right:0;height:1134px;z-index:-1;background-image:linear-gradient(to bottom,transparent 40%,var(--container-color-secondary)),var(--gallery-art);background-size:100% 100%,100% 674px;background-repeat:no-repeat}.gallery-main{max-width:1656px;margin:auto;padding:48px var(--margin) 72px}.gallery-intro{max-width:672px;margin:0 auto 48px;text-align:center;color:#fff;min-height:240px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}.gallery-intro p{font-size:18px;line-height:28px}.gallery-link{margin-top:8px;background:white;color:#212121;border-color:white}.case-index .gallery-intro{min-height:168px}.design-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.design-card{position:relative;display:block;aspect-ratio:443/332;overflow:hidden;border-radius:24px}.design-card>img,.design-card>video{width:100%;height:100%;object-fit:cover;transition:transform .35s}.design-card:hover>img{transform:scale(1.025)}.design-stats{position:absolute;right:16px;bottom:16px;display:flex;gap:8px;align-items:center;padding:8px 12px;background:#ffffffb3;backdrop-filter:blur(16px);border-radius:24px;color:#2a2a2a;font-size:14px}.design-stats img{width:16px;height:16px}.photo-gallery>.figma-block{height:auto}.photo-gallery a{display:block;transition:filter .2s}.photo-gallery a:hover{filter:brightness(.92)}.photo-gallery img{max-width:none}.lightbox-photo{width:100%;max-height:72vh;object-fit:contain}.lightbox-caption{font-size:16px!important;line-height:26px!important;margin:16px 0!important}dialog{color:var(--ink);background:var(--container-color-primary)}.dialog-close{background:var(--container-color-secondary);color:var(--ink)}[data-theme=dark] .brand-logo{background:#f2f2f2;border-radius:12px}[data-theme=dark] .gallery-backdrop{filter:brightness(.65)}[data-theme=dark] .article-body img[src$=".svg"]{filter:brightness(1.4)}
@media(max-width:1100px){.desktop-nav{gap:12px;font-size:12px}.nav-call{padding-inline:16px;font-size:12px}.identity{font-size:20px}.theme-picker select{width:100px}.subpage h1{font-size:44px;line-height:56px}.about-body{padding-inline:24px}.about-photo{padding-inline:24px;clip-path:inset(0 24px round 24px)}.about-photo img{width:calc(100% - 48px)}.toolbox{flex-direction:column;align-items:flex-start}.tool-icons{width:100%}.gallery-main{padding-bottom:48px}}
@media(max-width:850px){.desktop-nav,.nav-call{display:none}.theme-picker{margin-left:auto}.menu-toggle{width:40px;height:40px;padding:10px;display:flex;flex-direction:column;justify-content:center;gap:4px}.menu-toggle span{display:block;width:20px;height:2px;background:var(--ink)}#mobile-nav{position:absolute;top:71px;left:0;right:0;display:flex;flex-direction:column;gap:24px;padding:32px 24px;background:var(--container-color-primary);color:var(--ink);box-shadow:0 20px 25px #0001}.article-body .layout-row:not(.project-facts>.layout-row){flex-wrap:wrap}.analytics>div{flex-basis:200px}.article-section .figma-block{max-width:100%}}
@media(max-width:650px){.subpage h1{font-size:32px;line-height:42px}.article-header{padding-top:32px}.article-intro{margin-bottom:32px}.article-intro p{font-size:16px;line-height:26px}.article-cover{border-radius:16px}.article-body{padding-top:32px;padding-bottom:48px;gap:32px}.prose,.experience-copy{font-size:16px;line-height:26px}.prose h1,.prose h2{font-size:28px;line-height:38px}.prose h3{font-size:24px;line-height:34px}.prose h4{font-size:20px;line-height:30px}.article-body .layout-row:not(.project-facts>.layout-row){flex-direction:column;align-items:stretch}.analytics>div{flex-basis:auto}.contribution{padding:16px!important;border-radius:16px!important}.contribution h2{font-size:28px!important;line-height:38px!important}.project-facts>.layout-row{padding:16px!important}.project-facts>.layout-row>p:first-child{width:100px;font-size:12px}.project-facts>.layout-row>p:last-child{font-size:12px;overflow-wrap:anywhere}.article-carousel{gap:16px;padding-inline:0}.carousel-item{flex-basis:85%}.article-section>.figma-block{padding-inline:0}.article-section .figma-block:has(>.prose){padding-inline:0}.article-body p,.article-body span{font-size:inherit}.about-photo{margin-top:32px;padding-inline:16px;clip-path:inset(0 16px round 16px)}.about-photo img{width:calc(100% - 32px)}.about-body{padding:32px 16px 48px;gap:32px}.toolbox{border-radius:16px;padding:16px}.experience-item{border-radius:16px;padding:16px}.experience-item summary{gap:12px}.company-icon{width:48px;height:48px}.experience-item summary strong{font-size:16px;line-height:24px}.experience-item small{font-size:12px;line-height:20px}.gallery-main{padding-top:32px}.gallery-intro{margin-bottom:32px;min-height:240px}.gallery-intro p{font-size:16px;line-height:26px}.gallery-backdrop{height:900px;background-size:100% 100%,auto 674px;background-position:top center}.design-grid{grid-template-columns:1fr;gap:16px}.design-card{border-radius:16px}.design-stats{font-size:12px;padding:4px 8px;right:12px;bottom:12px}.photo-gallery .layout-row{flex-direction:column}.photo-gallery .layout-row>*{width:100%;flex:auto}.photo-gallery .layout-row>div:not([data-figma-node="1:3418"]):not([data-figma-node="1:3430"]){width:100%}.photo-gallery a{flex:none!important;width:100%}.photo-gallery .figma-block{height:auto}.gallery-page #mobile-nav{color:var(--ink)}}
.gallery-backdrop{background:none;isolation:isolate;overflow:hidden}.gallery-backdrop::before{content:"";position:absolute;inset:0 0 auto;height:674px;background-image:var(--gallery-art);background-size:100% 100%;filter:blur(24px);transform:scale(1.03)}.gallery-backdrop::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 32%,var(--container-color-secondary) 92%),repeating-linear-gradient(90deg,#ffffff26 0,transparent calc(100% / 30),#ffffff26 calc(100% / 30));backdrop-filter:blur(24px)}
@media(max-width:650px){.photo-gallery [data-figma-node="1:3420"],.photo-gallery [data-figma-node="1:3421"],.photo-gallery [data-figma-node="1:3428"],.photo-gallery [data-figma-node="1:3429"]{aspect-ratio:1.6;flex:none}.experience-item summary strong{font-size:16px;line-height:24px}}
.article-carousel{width:100%;max-width:100%;min-width:0}.prose p+p{margin-top:12px}.experience-copy p+p{margin-top:28px}.experience-copy strong{font-size:inherit;line-height:inherit;display:inline}.about-photo{aspect-ratio:auto;height:560px}.about-body>.prose h1{font-size:32px;line-height:42px}
@media(max-width:984px){.about-photo{height:auto;aspect-ratio:984/560}}
@media(max-width:650px){.photo-gallery>.figma-block,.photo-gallery .layout-row,.photo-gallery [data-figma-node="1:3427"]>div{gap:16px}.photo-gallery [data-figma-node="1:3420"],.photo-gallery [data-figma-node="1:3421"],.photo-gallery [data-figma-node="1:3428"],.photo-gallery [data-figma-node="1:3429"]{aspect-ratio:400/500}.photo-gallery [data-figma-node="1:3426"]{flex-direction:column-reverse}.photo-gallery [data-figma-node="1:3420"] img,.photo-gallery [data-figma-node="1:3421"] img,.photo-gallery [data-figma-node="1:3428"] img,.photo-gallery [data-figma-node="1:3429"] img{width:100%;height:100%;inset:0;object-fit:cover}.about-body>.prose h1{font-size:28px;line-height:38px}.photo-gallery [data-figma-node="1:3419"]>div{gap:16px}}
[data-theme=dark] .tool-icons>.figma-block{background:#f2f2f2}

/* Gallery links use a consistent, accessible SVG icon instead of a text glyph. */
.gallery-link{gap:8px}.gallery-link .external-link-icon{width:20px;height:20px;flex:none}.design-stats{z-index:2;background:#ffffffd9;font-weight:600;box-shadow:0 4px 16px #00000014}
@media(max-width:650px){.theme-picker select{width:116px}.analytics>div>div:last-child>p:first-child{font-size:28px;line-height:38px}.contribution>div:first-child>p,.contribution>div:first-child>p span{font-size:16px;line-height:26px}}

.tool-icons{position:relative;overflow:hidden;flex:1;gap:0;mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent)}
.tool-icons-track{display:flex;width:max-content;animation:tool-icons-marquee 18s linear infinite}
.tool-icons-set{display:flex;gap:16px;padding-right:16px;flex:0 0 auto}
.tool-icons-set>.figma-block{height:64px;flex-shrink:0}
@keyframes tool-icons-marquee{to{transform:translateX(-50%)}}
@media(hover:hover) and (pointer:fine){.tool-icons:hover .tool-icons-track{animation-play-state:paused}}
@media(prefers-reduced-motion:reduce){.tool-icons{overflow:auto;mask-image:none;-webkit-mask-image:none}.tool-icons-track{animation:none}.tool-icons-set[aria-hidden=true],.tool-icons-set:nth-child(2){display:none}}

.about-body hr{width:47px;height:3px;border:0;background:transparent;margin:24px auto;color:var(--muted);overflow:visible}
.about-body hr::before{content:"";display:block;width:3px;height:3px;border-radius:50%;background:currentColor;box-shadow:22px 0 currentColor,44px 0 currentColor}
.case-article .article-section+.article-section::before{content:"";display:block;width:3px;height:3px;margin:0 auto 48px;border-radius:50%;background:var(--muted);box-shadow:22px 0 var(--muted),44px 0 var(--muted);transform:translateX(-22px)}
@media(max-width:650px){.about-body hr{margin:8px auto}.case-article .article-section+.article-section::before{margin-bottom:32px}}

.experience-item summary{align-items:center}
.chevron{width:40px;height:40px;margin-left:auto;display:grid;place-items:center;flex:0 0 40px;font-size:0;line-height:0;color:var(--ink);transition:transform var(--motion-medium,240ms) var(--ease-enter,cubic-bezier(.22,1,.36,1))}
.chevron::before{content:"";width:24px;height:24px;background:currentColor;mask:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 15L12 9L6 15' stroke='%23171717' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/24px 24px no-repeat;-webkit-mask:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 15L12 9L6 15' stroke='%23171717' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/24px 24px no-repeat;transform:rotate(180deg);transition:transform var(--motion-medium,240ms) var(--ease-enter,cubic-bezier(.22,1,.36,1))}
.experience-item[open] .chevron{transform:none}
.experience-item[open] .chevron::before{transform:rotate(0deg)}
.article-carousel{width:100%;padding:0 0 16px max(0px,calc((100% - 888px)/2));cursor:grab;user-select:none;scroll-padding-inline:max(0px,calc((100% - 888px)/2));touch-action:pan-y}
.article-carousel.is-dragging{cursor:grabbing;scroll-snap-type:none}
.article-carousel.is-dragging *{cursor:grabbing}
.article-carousel img{-webkit-user-drag:none;user-select:none}
@media(max-width:650px){.article-carousel{width:100%;padding-inline:0;scroll-padding-inline:0}}
.project-facts{overflow:hidden}
.project-facts .layout-row{border-top:0!important;border-bottom:0!important;overflow:visible}
.project-facts .layout-row+.layout-row::before{content:"";position:absolute;top:0;left:24px;right:24px;height:1px;background:var(--border-color-secondary)}

.article-cover{display:block;border-radius:var(--shape-large)}.article-cover:has(source[src="/assets/tokopedia-nest.mp4"]){aspect-ratio:16/9;height:auto;object-fit:contain}.fill-video{display:block;background:var(--container-color-secondary)}
.f35{display:grid!important;place-items:center}.f32{inset:0;display:grid;place-items:center}.f34{inset:0;display:grid;place-items:center}.f42{inset:12px;display:grid;place-items:center}.f42 img{width:100%;height:100%;object-fit:contain}