:root{color-scheme:light;--paper:#fff;--paper-2:#f5f4f1;--card:#fff;--ink:#1b1b1b;--ink-2:#4a4a4a;--mute:#626262;--soft:#737373;--hair:#e6e6e6;--line:#dadada;--on-ink:#fff;--on-ink-2:#b9b9b9;--top-bg:#ffffffe0;--sans:"Host Grotesk",system-ui,sans-serif;--mono:"IBM Plex Mono",ui-monospace,monospace;--name:"Hanken Grotesk",var(--sans);--ease-out:cubic-bezier(.16,1,.3,1);--ease-io:cubic-bezier(.77,0,.18,1);--gut:clamp(16px,5vw,64px)}:root[data-theme=dark]{color-scheme:dark;--paper:#111;--paper-2:#1a1a1a;--card:#161616;--ink:#ededea;--ink-2:#c9c9c5;--mute:#a3a3a0;--soft:#85857f;--hair:#262626;--line:#363636;--on-ink:#111;--on-ink-2:#4a4a4a;--top-bg:#111111db}body{transition:background-color .3s,color .3s}*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:var(--paper);color:var(--ink);font:16px/1.65 var(--sans);-webkit-font-smoothing:antialiased;margin:0}img{max-width:100%;height:auto}a{color:inherit;text-decoration:none}:focus-visible{outline:2px solid var(--ink);outline-offset:3px}.in{max-width:1280px;padding-inline:var(--gut);margin:0 auto}.lab{font:12px/1.4 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--soft)}.mono{font-family:var(--mono)}.todo{color:#6b4e00;background:repeating-linear-gradient(-45deg,#fff6d6 0 6px,#ffefb8 6px 12px);border-radius:3px;padding:0 .3em;font-style:normal}.skip{background:var(--ink);color:var(--on-ink);z-index:99;padding:10px 14px;position:absolute;top:8px;left:-999px}.skip:focus{left:8px}.top{top:env(safe-area-inset-top,0px);z-index:40;background:var(--top-bg);backdrop-filter:saturate(1.4)blur(10px);position:sticky}.top .in{justify-content:space-between;align-items:center;gap:16px;padding-block:18px;display:flex}.nm{font-family:var(--name);white-space:nowrap;letter-spacing:-.02em}.nm .fn{margin-right:.18em;font-weight:400}.nm .ln{font-style:italic;font-weight:700}.logo{font-size:20px;line-height:1}.logo:hover .ln{text-underline-offset:4px;text-decoration:underline 1px}.top nav{font:13px/1 var(--sans);letter-spacing:.04em;text-transform:uppercase;color:var(--mute);gap:28px;display:flex}.top nav a:hover,.top nav a[aria-current]{color:var(--ink)}.top nav b{font:400 12px/1 var(--mono);color:var(--soft)}.top .lang{font:12px/1 var(--mono);color:var(--soft)}.top .lang b{color:var(--ink);font-weight:400}.top .lang a{color:var(--soft)}.top .lang a:hover{color:var(--ink)}.top .lang span{margin-inline:2px}.tools{align-items:center;gap:16px;display:flex}.theme{border:1px solid var(--line);cursor:pointer;width:34px;height:34px;color:var(--ink);transition:border-color .2s,transform .3s var(--ease-out);background:0 0;border-radius:50%;place-items:center;padding:0;display:grid}.theme:hover{border-color:var(--ink);transform:rotate(-20deg)}.theme svg{fill:none;stroke:currentColor;stroke-width:1.8px;stroke-linecap:round;stroke-linejoin:round;grid-area:1/1;width:16px;height:16px}:root[data-theme=dark] .theme .i-moon,:root:not([data-theme=dark]) .theme .i-sun{display:none}.progress{background:var(--ink);transform-origin:0;width:100%;height:2px;transform:scaleX(var(--p,0));position:absolute;bottom:0;left:0}.foot{margin-top:clamp(72px,10vw,128px)}.foot .in{border-top:1px solid var(--hair);font:12px/1.5 var(--mono);color:var(--soft);flex-wrap:wrap;justify-content:space-between;gap:12px;padding-block:22px;display:flex}.foot a:hover{color:var(--ink)}.dev{width:var(--w,100%);position:relative;container-type:inline-size}.dev .frm{z-index:2;pointer-events:none;user-select:none;width:100%;height:auto;display:block;position:relative}.dev .scr{z-index:1;background:#fff;position:absolute;overflow:hidden}.dev .scr img{max-width:none;display:block}.laptop .scr{background:#0e0e0e;width:84.024%;height:83.738%;top:5.234%;left:7.805%}.laptop .scr img{width:100%;height:auto;position:absolute;top:0;left:0}.phone .scr{border-radius:12.2%/5.6%;width:85.393%;height:94.857%;top:2.286%;left:7.303%}.phone .scr img{object-fit:cover;object-position:top;width:100%;height:100%;position:absolute;inset:0}.dev.scrolly .scr img{transition:transform 7s cubic-bezier(.45,0,.3,1)}.dev.scrolly:hover .scr img,.scroll-on-hover:hover .dev.scrolly .scr img{transform:translateY(calc(-1 * var(--shift,0px)))}.sec{border-top:1px solid var(--ink);justify-content:space-between;align-items:baseline;margin-top:clamp(64px,9vw,120px);padding-block:16px;display:flex}.sec h2{font:500 14px/1 var(--sans);letter-spacing:.04em;text-transform:uppercase;margin:0}.sec span{font:12px/1 var(--mono);color:var(--soft)}.btn{background:var(--ink);color:var(--on-ink);font:500 15px/1 var(--sans);transition:transform .2s var(--ease-out);cursor:pointer;border:0;border-radius:999px;align-items:center;gap:10px;padding:15px 22px;display:inline-flex}.btn:hover{transform:translateY(-2px)}.btn svg{width:17px;height:17px}.chip{font:13px/1 var(--mono);color:var(--ink-2);border:1px solid var(--hair);background:var(--card);cursor:pointer;border-radius:999px;align-items:center;gap:10px;padding:14px 16px;display:inline-flex}.chip:hover{border-color:var(--ink)}.chip small{font:11px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--soft)}.cbar{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.talk{grid-template-columns:minmax(0,1fr) minmax(0,360px);align-items:center;gap:clamp(32px,6vw,96px);display:grid}.portrait{aspect-ratio:4/5;background:var(--paper-2);border-radius:18px;margin:0;overflow:hidden}.portrait img{object-fit:cover;object-position:50% 40%;width:100%;height:100%;display:block}@media (width<=820px){.talk{grid-template-columns:minmax(0,1fr)}.portrait{order:-1;max-width:280px}}.case-hero{padding-block:clamp(32px,5vw,64px) 0}.back{font:13px/1 var(--mono);color:var(--mute);gap:8px;display:inline-flex}.back:hover{color:var(--ink)}.tags{flex-wrap:wrap;gap:6px;margin-top:28px;display:flex}.tags span{font:12px/1 var(--mono);color:var(--mute);border:1px solid var(--hair);border-radius:999px;padding:7px 10px}.case-hero h1{font:500 clamp(56px,11vw,150px)/.92 var(--sans);letter-spacing:-.055em;margin:22px 0 0}.case-hero .sub{font:400 clamp(22px,2.6vw,34px)/1.2 var(--sans);letter-spacing:-.03em;color:var(--ink-2);text-wrap:balance;max-width:26ch;margin:22px 0 0}.meta{border-top:1px solid var(--hair);grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:clamp(36px,5vw,56px);padding-top:20px;display:grid}.meta div{min-width:0}.meta dt{font:12px/1.4 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--soft)}.meta dd{margin:8px 0 0;font-size:15px;line-height:1.45}.meta .hl dd{font:400 44px/1 var(--sans);letter-spacing:-.04em}.meta .hl dd small{font:13px/1.4 var(--sans);letter-spacing:0;color:var(--mute);margin-top:6px;display:block}.stage{isolation:isolate;background:var(--sbg,var(--paper-2));aspect-ratio:3.3;min-height:280px;max-height:62vh;padding:clamp(24px,3.5vw,48px) var(--gut) 0;justify-content:center;align-items:flex-start;gap:clamp(16px,3vw,48px);margin-top:clamp(40px,6vw,72px);display:flex;position:relative;overflow:hidden}.stage:after{content:"";z-index:3;pointer-events:none;opacity:.42;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");position:absolute;inset:0}.stage .dev.laptop{--w:min(50%,640px)}.stage .dev.phone{--w:min(14%,190px)}@media (width<=820px){.stage{aspect-ratio:16/10;min-height:0}.stage .dev.laptop{--w:86%}.stage .dev.phone{--w:28%}}.stage.pad-b{padding-bottom:clamp(28px,5vw,64px)}.stage .cap{left:var(--gut);font:12px/1.3 var(--mono);color:var(--cc,var(--soft));position:absolute;top:20px}.blk{padding-top:clamp(72px,10vw,128px)}.blk-h{font:12px/1 var(--mono);color:var(--soft);align-items:center;gap:12px;margin-bottom:22px;display:flex}.blk-h:after{content:"";background:var(--hair);flex:1;height:1px}.blk h2{font:500 clamp(30px,4.2vw,54px)/1.06 var(--sans);letter-spacing:-.04em;text-wrap:balance;max-width:20ch;margin:0}.blk .lead{color:var(--ink-2);max-width:60ch;margin:22px 0 0;font-size:clamp(17px,1.5vw,20px);line-height:1.55}.blk p{max-width:62ch}.two{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:clamp(24px,5vw,72px);display:grid}.two.c{align-items:center}.grid{grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:16px;margin-top:36px;display:grid}.card{border:1px solid var(--hair);background:var(--card);border-radius:14px;min-width:0;padding:22px}.card h3{font:500 18px/1.25 var(--sans);letter-spacing:-.01em;margin:0}.card p{color:var(--mute);margin:8px 0 0;font-size:15px}.card .k{font:12px/1 var(--mono);color:var(--soft);margin-bottom:14px;display:block}.card .ic{background:var(--ia,var(--paper-2));width:40px;height:40px;color:var(--ib,var(--ink));border-radius:12px;place-items:center;margin-bottom:16px;display:grid}.card .ic svg{fill:none;stroke:currentColor;stroke-width:1.8px;stroke-linecap:round;stroke-linejoin:round;width:20px;height:20px}.card.dark{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}.card.dark p{color:var(--on-ink-2)}.flowline{flex-wrap:wrap;align-items:center;gap:10px;margin-top:32px;display:flex}.flowline span{font:14px/1 var(--sans);border:1px solid var(--line);background:var(--card);border-radius:999px;padding:12px 16px}.flowline i{color:var(--soft);font-style:normal}.flowline span.hi{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}.note{color:var(--mute);border-left:2px solid var(--ink);margin-top:22px;padding-left:14px;font-size:15px}.q{font:400 clamp(26px,3.4vw,42px)/1.2 var(--sans);letter-spacing:-.03em;text-wrap:balance;max-width:24ch;margin:0}.big-num{font:500 clamp(80px,14vw,200px)/.85 var(--sans);letter-spacing:-.06em}.vs{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:16px;margin-top:36px;display:grid}.vs .arrow{font:20px/1 var(--mono);color:var(--soft)}.pairs{border-top:1px solid var(--hair);flex-direction:column;margin-top:32px;display:flex}.pairs div{border-bottom:1px solid var(--hair);letter-spacing:-.01em;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding-block:16px;font-size:clamp(17px,1.8vw,22px);display:grid}.pairs div span:last-child{text-align:right}.pairs i{font:14px/1 var(--mono);color:var(--soft);font-style:normal}.swatches{flex-wrap:wrap;gap:10px;margin-top:28px;display:flex}.sw{border:1px solid var(--hair);width:132px;font:12px/1.35 var(--mono);color:var(--mute);background:var(--card);border-radius:12px;overflow:hidden}.sw:before{content:"";background:var(--c);height:72px;display:block}.sw span{padding:10px 12px;display:block}.sw b{font:500 13px/1.3 var(--sans);color:var(--ink);display:block}.specimen{letter-spacing:-.04em;font-size:clamp(64px,9vw,120px);line-height:1}.quote-box{border:1px dashed var(--line);border-radius:14px;margin-top:28px;padding:clamp(22px,3vw,36px)}.quote-box p{font:400 clamp(20px,2.2vw,28px)/1.3 var(--sans);letter-spacing:-.02em;margin:0}.quote-box footer{color:var(--mute);align-items:center;gap:12px;margin-top:20px;font-size:14px;display:flex}.quote-box .av{border:1px dashed var(--line);border-radius:50%;width:40px;height:40px}.persona{grid-template-columns:72px minmax(0,1fr);align-items:start;gap:16px;display:grid}.persona .av{background:var(--paper-2);width:72px;height:72px;font:500 22px/1 var(--sans);color:var(--soft);border-radius:50%;place-items:center;display:grid}.shot{margin:0}.shot figcaption{font:12px/1.5 var(--mono);color:var(--soft);margin-top:12px}.row-devs{flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:clamp(12px,3vw,40px);display:flex}.comp{border:1px solid var(--hair);background:var(--paper-2);border-radius:14px;place-items:center;padding:clamp(16px,3vw,32px);display:grid}.comp img{border-radius:8px;box-shadow:0 18px 40px -24px #00000059}.long{border:1px solid var(--hair);overscroll-behavior:contain;background:var(--card);border-radius:14px;max-height:min(80vh,900px);overflow:hidden auto}.long img{width:100%;display:block}.anno{border-top:1px solid var(--hair);flex-direction:column;gap:0;display:flex}.anno li{border-bottom:1px solid var(--hair);grid-template-columns:32px minmax(0,1fr);gap:8px;padding-block:14px;list-style:none;display:grid}.anno li b{font:12px/1.6 var(--mono);color:var(--soft);font-weight:400}.anno{margin:0;padding:0}.next{border-top:1px solid var(--ink);margin-top:clamp(80px,12vw,140px);padding-top:24px;display:block}.next .lab{display:block}.next b{font:500 clamp(56px,11vw,150px)/.95 var(--sans);letter-spacing:-.055em;transition:transform .4s var(--ease-out);margin-top:10px;display:block}.next span.go{font:15px/1 var(--sans);border-bottom:1px solid var(--ink);margin-top:18px;padding-bottom:3px;display:inline-block}.next:hover b{transform:translate(12px)}@media (width<=820px){.top nav{display:none}.meta{grid-template-columns:repeat(2,minmax(0,1fr))}.two,.vs{grid-template-columns:minmax(0,1fr)}.vs .arrow{justify-self:center;transform:rotate(90deg)}.grid{grid-template-columns:minmax(0,1fr)}.grid.keep2{grid-template-columns:repeat(2,minmax(0,1fr))}.pairs div{font-size:16px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}:root[data-theme=dark] .fp .meta .hl dd,:root[data-theme=dark] .fp .big-num{color:#f0625a!important}:root[data-theme=dark] .acr .result .big-num{color:#f0625a}:root[data-theme=dark] .stage .cap{color:#ffffffb3}