@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/2c55a0e60120577a-s.03ez25a9g3i0n.woff2)format("woff2");unicode-range:U+460-52F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/9c72aa0f40e4eef8-s.3i9rha7jpxn0q.woff2)format("woff2");unicode-range:U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116}@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/ad66f9afd8947f86-s.2o7ko1d-5m1xu.woff2)format("woff2");unicode-range:U+1F??}@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/5476f68d60460930-s.1ee5w62fj497l.woff2)format("woff2");unicode-range:U+370-377,U+37A-37F,U+384-38A,U+38C,U+38E-3A1,U+3A3-3FF}@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/2bbe8d2671613f1f-s.1way2z9fj6cig.woff2)format("woff2");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:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/1bffadaabf893a1e-s.0szrwpqb9mkwe.woff2)format("woff2");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-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/83afe278b6a6bb3c-s.p.45535valc9rzk.woff2)format("woff2");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:Inter Fallback;src:local(Arial);ascent-override:90.44%;descent-override:22.52%;line-gap-override:0.0%;size-adjust:107.12%}.-KQRRa_className{font-family:Inter,Inter Fallback;font-style:normal}.-KQRRa_variable{--font-sans:"Inter", "Inter Fallback"}
:root{--bg:#fdfdfc;--gray-2:#f9f9f8;--gray-3:#f1f0ef;--gray-4:#e9e8e6;--gray-5:#e2e1de;--gray-6:#dad9d6;--gray-8:#bcbbb5;--gray-9:#6f6e69;--gray-11:#63635e;--gray-12:#21201c;--card:#fff;--green:#30a46c;--ease-out:cubic-bezier(.23, 1, .32, 1);--ease-in-out:cubic-bezier(.77, 0, .175, 1);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}@media (prefers-color-scheme:dark){:root{--bg:#111110;--gray-2:#191918;--gray-3:#222221;--gray-4:#2a2a28;--gray-5:#31312e;--gray-6:#3b3a37;--gray-8:#62605b;--gray-9:#93918a;--gray-11:#b5b3ad;--gray-12:#eeeeec;--card:#191918;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-moz-text-size-adjust:100%;text-size-adjust:100%}body{background:var(--bg);color:var(--gray-12);font-family:var(--font-sans), system-ui, sans-serif;font-feature-settings:"cv11", "ss01";-webkit-font-smoothing:antialiased;font-size:16px;line-height:1.6}img,video,svg{max-width:100%;display:block}button{font:inherit;color:inherit;cursor:pointer;background:0 0;border:0}a{color:inherit;text-decoration:none}ol,ul{list-style:none}::selection{background:var(--gray-12);color:var(--bg)}:focus-visible{outline:2px solid var(--gray-12);outline-offset:2px;border-radius:6px}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.muted{color:var(--gray-11)}.meta{color:var(--gray-9);font-variant-numeric:tabular-nums;white-space:nowrap;font-size:13px}.page{max-width:640px;margin:0 auto;padding:96px 24px 48px}.intro h1{font-size:15px;font-weight:500;line-height:1.4}.intro p{line-height:1.4}.intro .links{gap:16px;margin-top:20px;font-size:14px}.block{margin-top:88px}.block h2{margin-bottom:16px;font-size:15px;font-weight:500}.block>p+p{margin-top:14px}.block>.link{margin-top:24px}.link{color:var(--gray-12);text-decoration:underline;-webkit-text-decoration-color:var(--gray-6);text-decoration-color:var(--gray-6);text-underline-offset:3px;align-items:center;gap:4px;transition:text-decoration-color .16s;display:inline-flex}@media (hover:hover) and (pointer:fine){.link:hover{-webkit-text-decoration-color:var(--gray-12);text-decoration-color:var(--gray-12)}}.arrow{fill:none;stroke:currentColor;stroke-width:1.4px;stroke-linecap:round;width:12px;height:12px;color:var(--gray-9);transition:transform .2s var(--ease-out), color .16s ease}@media (hover:hover) and (pointer:fine){.link:hover .arrow{color:var(--gray-12);transform:translate(1px,-1px)}}.button{background:var(--gray-12);height:36px;color:var(--bg);transition:transform .16s var(--ease-out), opacity .16s ease;border-radius:10px;align-items:center;gap:8px;padding:0 14px;font-size:14px;font-weight:500;display:inline-flex}@media (hover:hover) and (pointer:fine){.button:hover{opacity:.88}}.button:active{transform:scale(.97)}.button .apple{fill:currentColor;width:15px;height:15px;margin-top:-2px}.projects{gap:72px;display:grid}.project{min-width:0}.project-head{justify-content:space-between;align-items:baseline;gap:16px;display:flex}.project-head h3{font-size:15px;font-weight:500;line-height:1.4}.project-head p{line-height:1.4}.project>p{margin-top:20px}.project>.stack-line{color:var(--gray-9);margin-top:12px;font-size:13px}.project>.credit{color:var(--gray-9);margin-top:4px;font-size:13px}.project>.credit .link{color:var(--gray-11)}.actions{flex-wrap:wrap;align-items:center;gap:20px;margin-top:20px;display:flex}.frame{margin:20px -24px 0}@media (min-width:720px){.frame{margin-inline:-48px}}.frame-body{background:color-mix(in oklab, var(--field,var(--gray-3)) var(--field-mix), var(--gray-3));border-radius:16px;place-items:center;min-height:400px;padding:28px;display:grid;position:relative;overflow:hidden}.frame figcaption{color:var(--gray-9);margin-top:10px;padding-inline:24px;font-size:13px}@media (min-width:720px){.frame figcaption{padding-inline:48px}}.frame-body{--field-mix:14%;transition:background-color .24s}.frame-body[data-kind=gastify]{--field:#e5146e}.frame-body[data-kind=danone]{--field:#1d4ed8}.frame-body[data-kind=service-ops]{--field:#1fa595}.frame-body[data-kind=tickets]{--field:#e39a2b}.frame-body[data-kind=pre-sale]{--field:#7f9a5a}.frame-body .segmented{background:color-mix(in oklab, var(--field,var(--gray-4)) 12%, var(--gray-4))}@media (prefers-color-scheme:dark){.frame-body{--field-mix:18%}}.phones{place-items:center;width:100%;height:340px;display:grid;position:relative}.phone{aspect-ratio:720/1566;height:100%;transition:transform .5s var(--ease-out);background:#fff;border:5px solid #1b1a17;border-radius:22px;position:absolute;overflow:hidden;box-shadow:0 1px 2px #0000000f,0 12px 32px -12px #00000040}.phone img,.phone video{object-fit:cover;width:100%;height:100%}.phone.side{z-index:0;height:88%}.phone:not(.side){z-index:1}.phone.left{transform:translate(-46%)rotate(-6deg)}.phone.right{transform:translate(46%)rotate(6deg)}@media (hover:hover) and (pointer:fine){.frame-body:hover .phone.left{transform:translate(-108%)rotate(-3deg)}.frame-body:hover .phone.right{transform:translate(108%)rotate(3deg)}.frame-body:hover .phone:not(.side){transform:translateY(-4px)}}.frame-body:focus-within .phone.left{transform:translate(-108%)rotate(-3deg)}.frame-body:focus-within .phone.right{transform:translate(108%)rotate(3deg)}@media (hover:none){.phone.left{transform:translate(-62%)rotate(-5deg)}.phone.right{transform:translate(62%)rotate(5deg)}}.segmented{background:var(--gray-4);border-radius:10px;padding:3px;display:inline-flex;position:relative}.segmented button{z-index:1;height:28px;color:var(--gray-11);white-space:nowrap;border-radius:7px;padding:0 12px;font-size:13px;font-weight:500;transition:color .2s;position:relative}@media (hover:hover) and (pointer:fine){.segmented button:hover{color:var(--gray-12)}}.segmented button[aria-checked=true]{color:var(--gray-12)}.segmented-pill{background:var(--card);height:28px;transition:transform .24s var(--ease-out), width .24s var(--ease-out);border-radius:7px;position:absolute;top:3px;left:0;box-shadow:0 1px 2px #00000014,0 0 0 .5px #0000000f}.frame-body.screens{place-items:normal;min-height:0;padding:24px 24px 18px;display:block}.stage{aspect-ratio:16/10;width:100%;position:relative}.shot{background:var(--gray-3);opacity:0;filter:blur(4px);pointer-events:none;transition:opacity .2s var(--ease-out), transform .24s var(--ease-out), filter .2s var(--ease-out);cursor:zoom-in;border-radius:10px;position:absolute;inset:0;overflow:hidden;transform:scale(.985);box-shadow:0 0 0 1px #00000014,0 1px 2px #0000000f,0 16px 40px -20px #00000059}.shot[data-active=true]{opacity:1;filter:none;pointer-events:auto;transform:none}.shot-wip{text-align:center;cursor:default;background:color-mix(in oklab, var(--field,var(--gray-4)) 10%, var(--gray-2));place-content:center;gap:4px;font-size:15px;font-weight:500;display:grid}.shot-wip-note{color:var(--gray-9);font-size:13px;font-weight:400}.shot img,.shot video{object-fit:cover;object-position:top left;width:100%;height:100%;display:block}.shot-phone{aspect-ratio:390/844;border:5px solid #1b1a17;border-radius:22px;height:100%;inset:0 auto 0 50%;translate:-50%}.screens-tabs{scrollbar-width:none;justify-content:center;margin-top:18px;scroll-padding-inline:24px;display:flex;overflow-x:auto}.screens-tabs[data-overflow=end]{-webkit-mask-image:linear-gradient(90deg,#000 82%,#0000);mask-image:linear-gradient(90deg,#000 82%,#0000)}.screens-tabs[data-overflow=both]{-webkit-mask-image:linear-gradient(90deg,#0000,#000 18% 82%,#0000);mask-image:linear-gradient(90deg,#0000,#000 18% 82%,#0000)}.screens-tabs[data-overflow=start]{-webkit-mask-image:linear-gradient(90deg,#0000,#000 18%);mask-image:linear-gradient(90deg,#0000,#000 18%)}.screens-tabs::-webkit-scrollbar{display:none}.screens-note{color:var(--gray-9)}@media (prefers-color-scheme:dark){.shot{box-shadow:0 0 0 1px #ffffff14,0 16px 40px -20px #0009}}.list{gap:20px;display:grid}.list li>span{font-weight:450}.role-line{align-items:baseline;gap:10px;display:flex}.role-line .dots{border-bottom:1px dotted var(--gray-6);flex:1;transform:translateY(-4px)}.chips{flex-wrap:wrap;gap:6px;display:flex}.chips li{background:var(--gray-3);color:var(--gray-11);border-radius:99px;padding:2px 10px;font-size:13px;transition:background-color .16s,color .16s}@media (hover:hover) and (pointer:fine){.chips li:hover{background:var(--gray-4);color:var(--gray-12)}}.copy{background:var(--gray-3);height:40px;transition:background-color .16s ease, transform .16s var(--ease-out);border-radius:10px;align-items:center;gap:10px;margin-top:18px;padding:0 8px 0 14px;font-size:14px;font-weight:500;display:inline-flex}@media (hover:hover) and (pointer:fine){.copy:hover{background:var(--gray-4)}}.copy:active{transform:scale(.98)}.copy-icon{background:var(--card);border-radius:7px;place-items:center;width:26px;height:26px;display:grid;position:relative}.copy-icon svg{fill:none;stroke:currentColor;stroke-width:1.4px;stroke-linecap:round;stroke-linejoin:round;width:14px;height:14px;transition:opacity .2s ease, transform .3s var(--ease-out), filter .2s ease;position:absolute}.copy .icon-check{opacity:0;filter:blur(2px);color:var(--green);stroke-width:1.8px;transform:scale(.5)}.copy[data-copied=true] .icon-copy{opacity:0;filter:blur(2px);transform:scale(.5)}.copy[data-copied=true] .icon-check{opacity:1;filter:none;transform:none}.links{flex-wrap:wrap;gap:20px;margin-top:20px;display:flex}.footer{color:var(--gray-9);font-variant-numeric:tabular-nums;justify-content:space-between;margin-top:112px;font-size:13px;display:flex}@media (prefers-reduced-motion:no-preference){.js [data-reveal]{opacity:0;filter:blur(4px);transform:translateY(8px)}.js [data-reveal].in{opacity:1;filter:none;transition:opacity .7s var(--ease-out), transform .7s var(--ease-out), filter .7s var(--ease-out);transition-delay:calc(var(--d,0) * 90ms);transform:none}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}@media (min-width:1280px){.page{max-width:1280px;padding-inline:64px}.page>:not(.wide):not(.split):not(.footer){max-width:640px}.projects{gap:128px}.project{grid-template-rows:repeat(7,auto) 1fr;grid-template-columns:minmax(0,340px) minmax(0,1fr);align-items:start;column-gap:72px;display:grid}.project>*{grid-column:1}.project>.frame{grid-area:1/2/span 8;margin:0}.project-head{flex-direction:column;align-items:flex-start;gap:6px}.frame figcaption{padding-inline:4px}.phones{height:440px}[aria-labelledby=process] .list{grid-template-columns:repeat(3,1fr);column-gap:48px}.split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;column-gap:72px;display:grid}}@media (max-width:560px){.page{padding-top:64px}.block{margin-top:72px}.project-head{flex-direction:column;gap:2px}.frame-body{border-radius:14px;min-height:300px;padding:20px 16px}.frame{margin-inline:-8px}.frame figcaption{padding-inline:8px}.phones{height:260px}.frame-body:hover .phone.left,.frame-body:focus-within .phone.left{transform:translate(-62%)rotate(-5deg)}.frame-body:hover .phone.right,.frame-body:focus-within .phone.right{transform:translate(62%)rotate(5deg)}.segmented button{padding:0 9px}.frame-body.screens{padding:14px 12px 12px}.screens-tabs{justify-content:flex-start}.shot-phone{border-width:4px;border-radius:16px}}