.landing{box-sizing:border-box;align-content:center;min-height:100svh;padding-block:clamp(72px,7vw,100px)}.landing-title{font-family:var(--font-display);letter-spacing:-.04em;grid-column:1/4;align-self:start;margin:0;font-size:clamp(24px,2.2vw,32px);font-weight:600;line-height:1.15}.landing-title a{text-decoration:none}.landing-title a:hover{text-decoration:underline}.landing-feature{grid-column:5/-1;min-width:0}.back-link{color:var(--muted);font-family:var(--font-display);margin-bottom:clamp(48px,7vw,88px);font-size:13px;line-height:1.4;text-decoration:none;display:inline-block}.back-link:hover{color:var(--foreground)}.article-demo{margin-top:42px}.article-copy{margin-top:32px}.demo-stage{--cycle:9s;--seek:0s;--origin-x:clamp(56px, 11vw, 110px);--origin-y:clamp(74px, 9vw, 96px);aspect-ratio:1.62;color:#20201e;background:#20211f;width:100%;min-height:300px;position:relative;overflow:hidden}.article-demo{min-height:320px}.upload-demo{position:absolute;inset:0;overflow:hidden}.upload-target{box-sizing:border-box;width:min(clamp(250px,24vw,300px),100% - 64px);min-height:clamp(144px,13.5vw,170px);font-family:var(--font-display);text-align:center;animation:target-state var(--cycle) var(--seek) linear infinite;background:#fff;border:1px solid #ddd;border-radius:14px;flex-direction:column;justify-content:center;align-items:center;gap:7px;padding:20px 14px;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.upload-icon{color:#8d8f8a;width:18px;height:18px}.upload-label{font-size:12px;font-weight:500;line-height:1.3;display:grid}.upload-label span{grid-area:1/1}.label-default{animation:default-state var(--cycle) var(--seek) linear infinite}.label-done{opacity:0;animation:done-state var(--cycle) var(--seek) linear infinite}.upload-support{color:#898a86;font-size:10px;line-height:1.4}.drag-item{z-index:1;opacity:0;transform:translate(calc(-50% + var(--origin-x)), calc(-50% - var(--origin-y)));animation:drag-file var(--cycle) var(--seek) ease-in-out infinite;position:absolute;top:50%;left:50%}.file-chip{font:500 11px/1.2 var(--font-display);white-space:nowrap;background:#fff;border:1px solid #d9dad7;border-radius:7px;align-items:center;gap:7px;padding:8px 10px;display:flex;box-shadow:0 5px 18px #0002}.file-chip svg{color:#81837e;width:15px;height:15px}.demo-cursor{width:21px;height:27px;position:absolute;top:65%;left:74%}.stage-link{z-index:2;position:absolute;inset:0}.stage-link:focus-visible{outline-offset:-6px;outline:2px solid #fff}.motion-toggle{z-index:3;color:#f2f2ee;cursor:pointer;background:#ffffff18;border:0;border-radius:50%;place-items:center;width:32px;height:32px;padding:0;display:grid;position:absolute;bottom:12px;right:12px}.motion-toggle:hover{background:#ffffff2b}.motion-toggle:focus-visible{outline-offset:3px;outline:2px solid #fff}.motion-toggle svg{width:14px;height:14px}.motion-toggle .icon-play,.motion-toggle[data-playing=false] .icon-pause{display:none}.motion-toggle[data-playing=false] .icon-play{display:block}.demo-stage.is-paused .animated,.demo-stage.offscreen .animated{animation-play-state:paused}@keyframes target-state{0%,31%{background:#fff;border-color:#ddd}37%,48%{background:#f8faff;border-color:#568be9}54%,to{background:#fff;border-color:#ddd}}@keyframes default-state{0%,48%{opacity:1}53%,87%{opacity:0}93%,to{opacity:1}}@keyframes done-state{0%,48%{opacity:0}53%,87%{opacity:1}93%,to{opacity:0}}@keyframes drag-file{0%,8%{opacity:0;transform:translate(calc(-50% + var(--origin-x)), calc(-50% - var(--origin-y))) scale(.97)}14%,20%{opacity:1;transform:translate(calc(-50% + var(--origin-x)), calc(-50% - var(--origin-y))) scale(1)}43%,46%{opacity:1;transform:translate(-50%,-125%)scale(1)}51%,87%{opacity:0;transform:translate(-50%,-100%)scale(.94)}to{opacity:0;transform:translate(calc(-50% + var(--origin-x)), calc(-50% - var(--origin-y))) scale(.97)}}@media (width<=960px){.landing-title{grid-column:1/3}.landing-feature{grid-column:4/-1}}@media (width<=640px){.landing{align-content:start;row-gap:44px;min-height:auto;padding-block:72px 96px}.landing-title,.landing-feature{grid-column:1/-1}.demo-stage,.article-demo{aspect-ratio:1.1;min-height:292px}.article-demo{margin-top:32px}}.project-header{padding:32px clamp(24px,4vw,72px)}.back-link{color:#141414;justify-content:center;align-items:center;width:28px;height:28px;display:inline-flex}.back-link svg{width:24px;height:24px}.project-intro{padding:60px clamp(24px,4vw,72px) 104px}.project-intro h1{letter-spacing:-.065em;margin:0;font-size:clamp(56px,8vw,104px);font-weight:500;line-height:1.05}.project-detail{grid-template-columns:4fr 7fr;align-items:start;gap:clamp(32px,4vw,72px);padding:0 clamp(24px,4vw,72px) 120px;display:grid}.project-detail h2{letter-spacing:-.05em;margin:0;font-size:clamp(28px,3vw,46px);font-weight:500;line-height:1.15}.project-detail h2 a{text-decoration:none}.project-detail h2 a:hover{text-underline-offset:5px;text-decoration:underline 1px}.project-detail .article-demo{min-height:320px;margin:0}.project-detail .upload-target{width:min(47%,500px);min-height:44%}.project-detail .upload-label{font-size:clamp(12px,1.3vw,22px)}.project-detail .upload-support{font-size:clamp(9px,1vw,16px)}.project-detail .motion-toggle{width:40px;height:40px;bottom:20px;right:20px}.article{max-width:720px;margin-inline:auto;padding:clamp(40px,7vw,88px) 20px 120px}.article h1{letter-spacing:-.045em;margin:56px 0 36px;font-size:clamp(42px,5.5vw,76px);font-weight:600;line-height:1.08}.article .article-demo{margin:0}@media (width<=720px){.project-intro{padding-top:36px;padding-bottom:72px}.project-detail{grid-template-columns:1fr;gap:32px;padding-bottom:72px}.project-detail .upload-target{width:min(300px,100% - 64px);min-height:150px}.project-detail .upload-label{font-size:12px}.project-detail .upload-support{font-size:10px}}