@font-face{font-family:YuBen Times;src:url(/fonts/TimesNow-Light.woff2)format("woff2");font-weight:300;font-style:normal;font-display:swap}@font-face{font-family:YuBen SF;src:url(/fonts/homepage-sf-pro-text.woff2)format("woff2");font-weight:400;font-style:normal;font-display:swap}.yuben-case{--yuben-gutter:5.99935vw;--yuben-section-gap:clamp(80px, 10vw, 200px);--yuben-panel-gap:24px;color:#fff;background:#000;padding-bottom:40px;font-family:YuBen SF,-apple-system,sans-serif}.yuben-case h1,.yuben-case h2,.yuben-case h3{text-wrap:initial;font-family:YuBen Times,serif;font-weight:300}.yuben-case h1{letter-spacing:-.0479769em;max-width:1200px;font-size:clamp(64px,7.22222vw,104px);line-height:1.08748}.yuben-case h2{letter-spacing:-.025em;font-size:clamp(42px,4.3vw,72px);line-height:1.08}.yuben-case p{letter-spacing:-.025em;color:#999899;font-size:clamp(20px,1.65vw,26px);line-height:1.5}.yuben-case .yuben-copy>p{max-width:520px;margin-top:28px}.yuben-case .yuben-introduction{padding:clamp(80px, 8.99958vw, 160px) var(--yuben-gutter) 90px}.yuben-case .yuben-opening{padding-bottom:88.25px}.yuben-case .yuben-opening p{color:#fff;max-width:640px;margin-top:36px;font-size:clamp(22px,2.08333vw,30px);line-height:1.4}.yuben-case .yuben-problem{padding:var(--yuben-section-gap) var(--yuben-gutter);grid-template-columns:501.844fr 678.984fr;align-items:center;gap:5.99935vw;display:grid}.yuben-case .yuben-flow{padding-inline:var(--yuben-gutter)}.yuben-case .yuben-flow-steps{align-items:start;gap:var(--yuben-panel-gap);grid-template-columns:repeat(3,minmax(0,1fr));margin:72px 0 0;padding:0;list-style:none;display:grid}.yuben-case .yuben-flow-steps li:nth-child(2){padding-top:64px}.yuben-case .yuben-flow-steps li:nth-child(3){padding-top:128px}.yuben-case .yuben-evidence{padding:var(--yuben-section-gap) var(--yuben-gutter) 0;grid-template-columns:698.156fr 537.062fr;column-gap:32px;display:grid}.yuben-case .yuben-evidence>.yuben-copy{grid-column:2;min-width:0;margin-bottom:72px}.yuben-case .yuben-evidence-pair{grid-column:1/-1;grid-template-columns:698.156fr 537.062fr;align-items:start;gap:32px;display:grid}.yuben-case .yuben-evidence-pair>:last-child{margin-top:112px}.yuben-case .yuben-shipped{padding:var(--yuben-section-gap) var(--yuben-gutter) 0}.yuben-case .yuben-product-grid{gap:var(--yuben-panel-gap);grid-template-columns:559.438fr 683.781fr;align-items:start;margin-top:74px;display:grid}.yuben-case .yuben-product-grid>:first-child{grid-row:span 2}.yuben-case .yuben-shared{padding:var(--yuben-section-gap) var(--yuben-gutter) 0}.yuben-case .yuben-shared>.yuben-copy{text-align:center}.yuben-case .yuben-shared h2{font-size:clamp(44px,5vw,72px);line-height:1.12}.yuben-case .yuben-shared>.yuben-copy p{margin-inline:auto;max-width:698px;margin-top:28.47px;font-size:clamp(20px,1.65vw,23.76px)}.yuben-case .yuben-github{color:#101112;background:#e8e8ea;border-radius:10px;justify-content:center;align-items:center;gap:10px;width:222px;height:48px;margin:29.64px auto 45.53px;font-size:16px;line-height:22px;text-decoration:none;transition:background-color .15s;display:flex}.yuben-case .yuben-github:hover{background:#fff}.yuben-case .yuben-github:active{background:#cfcfd3}.yuben-case .yuben-art{min-width:0}.yuben-case .yuben-art img{background:#101112;width:100%;height:auto;display:block}.yuben-case .yuben-art-scroll{overscroll-behavior-inline:contain;overflow-x:auto}.yuben-case .yuben-art figcaption{display:none}.yuben-case .yuben-next{background:#111214;border:1px solid #ffffff14;border-radius:24px;justify-content:space-between;align-items:center;gap:40px;min-height:320px;margin-top:88px;padding:31px 40px 31px 55.625px;text-decoration:none;transition:border-color .25s;display:flex}.yuben-case .yuben-next-copy{flex-direction:column;justify-content:space-between;align-self:stretch;min-width:0;padding-block:36px 41px;display:flex}.yuben-case .yuben-next h3{letter-spacing:-.025em;font-size:clamp(30px,2.91667vw,42px);line-height:1.14286}.yuben-case .yuben-next-copy>span{align-items:center;gap:16px;font-size:17px;line-height:24px;display:flex}.yuben-case .yuben-next-preview{object-fit:cover;object-position:center;background:#0a0a0b;border-radius:16px;flex-shrink:0;width:256px;height:256px;display:block}.yuben-case .yuben-next:hover{border-color:#ffffff40}.yuben-case :is(a,button):focus-visible{outline-offset:4px;outline:2px solid #80caff}.yuben-case .yuben-art-scroll:focus-visible{outline-offset:-3px;outline:2px solid #80caff}.yuben-case .yuben-video{aspect-ratio:1267.22/660;background:#101112;width:100%;min-width:0;position:relative}.yuben-case .yuben-video--research{aspect-ratio:3/2;background:#0d0d0d}.yuben-case .yuben-video video{object-fit:contain;width:100%;height:100%;display:block}.yuben-case .yuben-video-controls{gap:12px;display:flex;position:absolute;bottom:16px;right:16px}.yuben-case .yuben-video-controls button{color:#eeeef0;cursor:pointer;background:#29292b;border:0;border-radius:50%;place-items:center;width:44px;height:44px;padding:0;display:grid;box-shadow:inset 0 1px #ffffff14}.yuben-case .yuben-video-controls button:hover{background:#414143}.yuben-case .yuben-video-controls button:active{background:#1d1d1f}.yuben-case .yuben-video-controls svg{width:20px;height:20px}.yuben-case .yuben-video-status{color:#fff;background:#101112e8;border-radius:6px;max-width:calc(100% - 150px);padding:8px 12px;font-size:14px;line-height:1.4;position:absolute;bottom:18px;left:16px}.yuben-case .yuben-play-fallback{pointer-events:none;place-items:center;display:grid;position:absolute;inset:0}.yuben-case .yuben-play-fallback button{pointer-events:auto;color:#101112;cursor:pointer;background:#e8e8ea;border:0;border-radius:10px;min-height:48px;padding:12px 20px;font-size:16px}.yuben-case .yuben-sr{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@media (width>=1800px){.yuben-case .yuben-copy>p{max-width:570px}}@media (width<=1100px){.yuben-case .yuben-title-break,.yuben-case .yuben-copy>p .yuben-copy-break{display:none}.yuben-case .yuben-problem{grid-template-columns:1fr;gap:24px}.yuben-case .yuben-flow-steps,.yuben-case .yuben-product-grid{scroll-snap-type:x proximity;align-items:stretch;gap:16px;margin-top:20px;padding:2px 0 8px;display:flex;overflow-x:auto}.yuben-case .yuben-flow-steps li,.yuben-case .yuben-product-grid>.yuben-art{scroll-snap-align:start;flex:0 0 min(82%,360px);min-width:0;padding:0}.yuben-case .yuben-flow-steps li:nth-child(n){padding-top:0}.yuben-case .yuben-flow-steps .yuben-art{height:100%}.yuben-case .yuben-art-scroll{height:100%;overflow:visible}.yuben-case .yuben-art picture{height:100%;display:block}.yuben-case .yuben-art img{border-radius:8px;min-width:0}.yuben-case .yuben-flow-steps img{aspect-ratio:286/350}.yuben-case .yuben-product-grid img{aspect-ratio:286/430}.yuben-case .yuben-art figcaption{display:none}.yuben-case .yuben-evidence{display:block}.yuben-case .yuben-evidence>.yuben-copy{margin-bottom:20px}.yuben-case .yuben-evidence-pair{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.yuben-case .yuben-evidence-pair>:last-child{margin-top:0}.yuben-case .yuben-next{min-height:250px;padding:28px}.yuben-case .yuben-next-copy{gap:32px;padding-block:12px}.yuben-case .yuben-next-preview{width:192px;height:192px}}@media (width<=700px){.yuben-case{--yuben-gutter:20px;--yuben-section-gap:64px;padding-bottom:0}.yuben-case .yuben-introduction{padding-top:40px;padding-bottom:0}.yuben-case h1{letter-spacing:-.035em;font-size:48px;line-height:49px}.yuben-case h2,.yuben-case .yuben-shared h2{font-size:36px;line-height:39px}.yuben-case p,.yuben-case .yuben-opening p,.yuben-case .yuben-shared>.yuben-copy p{color:var(--muted);font-size:17px;line-height:26px}.yuben-case .yuben-opening{padding-bottom:20px}.yuben-case .yuben-opening p,.yuben-case .yuben-copy>p{margin-top:20px}.yuben-case .yuben-shared>.yuben-copy{text-align:left}.yuben-case .yuben-github{width:100%;margin:20px 0}.yuben-case .yuben-next{background:0 0;border:0;flex-direction:column-reverse;align-items:stretch;gap:16px;margin-top:64px;padding:0;position:relative}.yuben-case .yuben-next-preview{aspect-ratio:350/222;border-radius:8px;width:100%;height:auto}.yuben-case .yuben-next h3{font-size:30px;line-height:34px}.yuben-case .yuben-next-copy>span{justify-content:space-between}.yuben-case .yuben-video-controls{gap:8px;bottom:8px;right:8px}.yuben-case .yuben-video-status{max-width:calc(100% - 16px);padding:4px 8px;bottom:60px;left:8px}.yuben-case .yuben-play-fallback{padding-bottom:44px}}.yuben-case :is(.yuben-flow-steps,.yuben-product-grid):focus-visible{outline-offset:4px;outline:2px solid #80caff}@scope(.yuben-case){:scope{--icon-swap-dur:.25s;--icon-swap-blur:2px;--icon-swap-start-scale:.25;--icon-swap-ease:ease-in-out}.t-icon-swap{display:inline-grid;position:relative}.t-icon-swap .t-icon{transition:opacity var(--icon-swap-dur) var(--icon-swap-ease), filter var(--icon-swap-dur) var(--icon-swap-ease), transform var(--icon-swap-dur) var(--icon-swap-ease);grid-area:1/1}.t-icon-swap[data-state=a] .t-icon[data-icon=a],.t-icon-swap[data-state=b] .t-icon[data-icon=b]{opacity:1;filter:blur();transform:scale(1)}.t-icon-swap[data-state=a] .t-icon[data-icon=b],.t-icon-swap[data-state=b] .t-icon[data-icon=a]{opacity:0;filter:blur(var(--icon-swap-blur));transform:scale(var(--icon-swap-start-scale))}@media (prefers-reduced-motion:reduce){.t-icon-swap .t-icon{transition:none!important}}:scope{--stagger-dur:.5s;--stagger-distance:12px;--stagger-stagger:40ms;--stagger-blur:3px;--stagger-ease:cubic-bezier(.22, 1, .36, 1)}.t-stagger-line{opacity:0;transform:translateY(var(--stagger-distance));filter:blur(var(--stagger-blur));transition:opacity var(--stagger-dur) var(--stagger-ease), transform var(--stagger-dur) var(--stagger-ease), filter var(--stagger-dur) var(--stagger-ease);will-change:transform, opacity, filter;display:block}.t-stagger-line--2{transition-delay:var(--stagger-stagger)}.t-stagger.is-shown .t-stagger-line{opacity:1;filter:blur();transform:translateY(0)}.t-stagger.is-hiding .t-stagger-line{opacity:0;filter:blur();transition:opacity .2s,transform linear,filter linear;transform:translateY(0)}@media (prefers-reduced-motion:reduce){.t-stagger-line{transition:none!important}}.t-stagger-line--3{transition-delay:calc(var(--stagger-stagger) * 2)}}.yuben-case [data-yuben-panel]{transition:opacity .5s cubic-bezier(.22,1,.36,1),transform .5s cubic-bezier(.22,1,.36,1);transition-delay:var(--yuben-delay,0s)}.yuben-case .yuben-reveal-pending{opacity:0;transform:translateY(12px)}.yuben-case .t-stagger.is-shown .t-stagger-line{will-change:auto}.yuben-case[data-reduced-motion=true] :is(.t-stagger-line,[data-yuben-panel],.t-icon){transition:none!important}@media (prefers-reduced-motion:reduce){.yuben-case [data-yuben-panel]{opacity:1;transform:none;transition:none!important}}.yuben-case :is(.yuben-flow-steps,.yuben-product-grid) [data-yuben-panel]{opacity:1;transition:none;transform:none}