.case-beach-scene{isolation:isolate;place-items:center;width:100%;height:100%;margin:0;display:grid;position:relative;overflow:hidden}.case-beach-scene__stage{--case-beach-chase-duration:10s;--case-beach-cat-width:26%;aspect-ratio:1122/1402;width:100%;max-height:100%;position:relative;overflow:hidden}.case-beach-scene__background{z-index:0;object-fit:cover;pointer-events:none;width:113%;max-width:none;height:113%;display:block;position:absolute;top:-6.5%;left:-6.5%}.case-beach-scene__background--night,.case-beach-scene__night-only,.case-beach-scene[data-time=night] .case-beach-scene__background--day,.case-beach-scene[data-time=night] .case-beach-scene__day-only{display:none}.case-beach-scene[data-time=night] .case-beach-scene__background--night,.case-beach-scene[data-time=night] .case-beach-scene__night-only{display:block}.case-beach-scene__weather{z-index:1;pointer-events:none;width:100%;height:100%;display:block;position:absolute;inset:0;overflow:hidden}.case-beach-scene__weather-day{display:inline}.case-beach-scene__weather-night,.case-beach-scene[data-time=night] .case-beach-scene__weather-day{display:none}.case-beach-scene[data-time=night] .case-beach-scene__weather-night{display:inline}.case-beach-scene__cloud{fill:#fff6df;opacity:.78}.case-beach-scene__cloud--near{animation:30s linear infinite case-beach-cloud-drift}.case-beach-scene__cloud--far{opacity:.58;animation:38s linear -14s infinite case-beach-cloud-drift-far}.case-beach-scene__meteor{opacity:0;animation:12s linear infinite case-beach-meteor}.case-beach-scene__meteor--second{animation-duration:17s;animation-delay:6.2s}.case-beach-scene__meteor-head{fill:#fff1c9}.case-beach-scene__meteor-tail{fill:#9eb8cf}.case-beach-scene__foreground,.case-beach-scene__foreground-set{pointer-events:none;position:absolute;inset:0}.case-beach-scene__foreground{z-index:2}.case-beach-scene__foreground-set--night,.case-beach-scene[data-time=night] .case-beach-scene__foreground-set--day{display:none}.case-beach-scene[data-time=night] .case-beach-scene__foreground-set--night{display:block}.case-beach-scene__foreground-image{object-fit:cover;width:113%;max-width:none;height:113%;display:block;position:absolute;top:-6.5%;left:-6.5%}.case-beach-scene__person{z-index:3;pointer-events:none;position:absolute;inset:0}.case-beach-scene__person-frame,.case-beach-scene__person-source{z-index:3;object-fit:cover;opacity:0;width:113%;max-width:none;height:113%;display:block;position:absolute;top:-6.5%;left:-6.5%}.case-beach-scene__person-frame[data-active=true],.case-beach-scene__person--sleep{opacity:1}.case-beach-scene__person-source.case-beach-scene__night-only{display:none}.case-beach-scene[data-time=night] .case-beach-scene__person-source.case-beach-scene__night-only{display:block}.case-beach-scene__day-animals,.case-beach-scene__night-animals{z-index:4;pointer-events:none;position:absolute;inset:0}.case-beach-scene__cat-runner{width:var(--case-beach-cat-width);aspect-ratio:1073/742;transform-origin:bottom;animation:case-beach-cat-roundtrip var(--case-beach-chase-duration) linear infinite;position:absolute;bottom:8%;left:7%}.case-beach-scene__cat-gallop{transform-origin:bottom;animation:.56s step-end infinite case-beach-cat-gallop;display:block;position:absolute;inset:0}.case-beach-scene__cat-frame{object-fit:contain;opacity:0;width:100%;height:100%;display:block;position:absolute;inset:0}.case-beach-scene__cat-frame--a{animation:.56s step-end infinite case-beach-cat-gait-a}.case-beach-scene__cat-frame--b{animation:.56s step-end infinite case-beach-cat-gait-b}.case-beach-scene__cat-frame--c{animation:.56s step-end infinite case-beach-cat-gait-c}.case-beach-scene__cat-frame--d{animation:.56s step-end infinite case-beach-cat-gait-d}.case-beach-scene__crab{aspect-ratio:1.38;width:11%;animation:case-beach-crab-escape var(--case-beach-chase-duration) linear infinite;transform-origin:bottom;position:absolute;bottom:10%;left:0}.case-beach-scene__crab-frame{object-fit:contain;opacity:0;width:100%;height:100%;display:block;position:absolute;inset:0}.case-beach-scene__crab-frame--a{animation:.72s step-end infinite case-beach-crab-gait-a}.case-beach-scene__crab-frame--b{animation:.72s step-end infinite case-beach-crab-gait-b}.case-beach-scene__night-cat-jump{width:var(--case-beach-cat-width);aspect-ratio:1073/742;transform-origin:bottom;animation:1.9s linear both case-beach-night-cat-jump;display:block;position:absolute;bottom:7.5%;left:18%}.case-beach-scene__night-cat-pose{object-fit:contain;opacity:0;width:100%;height:100%;display:block;position:absolute;inset:0}.case-beach-scene__night-cat-pose--air{width:128%;height:128%;top:-14%;left:-14%}.case-beach-scene__night-cat-pose--ground{animation:1.9s step-end both case-beach-night-cat-ground-pose}.case-beach-scene__night-cat-pose--air{animation:1.9s step-end both case-beach-night-cat-air-pose}.case-beach-scene__night-cat-sleep{z-index:4;width:var(--case-beach-cat-width);opacity:0;animation:1.9s step-end both case-beach-night-cat-settle;position:absolute;top:45%;left:32%}.case-beach-scene[data-paused=true] .case-beach-scene__cloud,.case-beach-scene[data-paused=true] .case-beach-scene__meteor,.case-beach-scene[data-paused=true] .case-beach-scene__cat-runner,.case-beach-scene[data-paused=true] .case-beach-scene__cat-gallop,.case-beach-scene[data-paused=true] .case-beach-scene__cat-frame,.case-beach-scene[data-paused=true] .case-beach-scene__crab,.case-beach-scene[data-paused=true] .case-beach-scene__night-cat-jump,.case-beach-scene[data-paused=true] .case-beach-scene__night-cat-pose,.case-beach-scene[data-paused=true] .case-beach-scene__night-cat-sleep{animation-play-state:paused}@keyframes case-beach-cloud-drift{0%{transform:translate(-300px)}to{transform:translate(1150px)}}@keyframes case-beach-cloud-drift-far{0%{transform:translate(-900px)}to{transform:translate(500px)}}@keyframes case-beach-meteor{0%,5%{opacity:0;transform:translate(0)}6%{opacity:1;transform:translate(-5px,4px)}12%{opacity:.9;transform:translate(-150px,94px)}15%,to{opacity:0;transform:translate(-205px,128px)}}@keyframes case-beach-cat-roundtrip{0%,4.9%{transform:translate(0)scaleX(-1)}5%{transform:translate(0)scaleX(1)}46%,53.9%{transform:translate(236%)scaleX(1)}54%{transform:translate(236%)scaleX(-1)}96%,to{transform:translate(0)scaleX(-1)}}@keyframes case-beach-cat-gallop{0%{transform:translateY(4%)rotate(2deg)scale(.96,.94)}25%{transform:translateY(-3%)rotate(-2deg)scale(1.03,1.02)}50%{transform:translateY(-10%)rotate(-4deg)scale(1.08,.98)}75%{transform:translateY(-2%)rotate(2deg)scale(.99,1.04)}}@keyframes case-beach-cat-gait-a{0%,24.9%{opacity:1}25%,to{opacity:0}}@keyframes case-beach-cat-gait-b{0%,24.9%,50%,to{opacity:0}25%,49.9%{opacity:1}}@keyframes case-beach-cat-gait-c{0%,49.9%,75%,to{opacity:0}50%,74.9%{opacity:1}}@keyframes case-beach-cat-gait-d{0%,74.9%{opacity:0}75%,to{opacity:1}}@keyframes case-beach-crab-escape{0%{transform:translate(950%)scaleX(1)}8%{transform:translate(730%)scaleX(1)}35%{transform:translate(815%)scaleX(1)}46%,49.9%{transform:translate(950%)scaleX(1)}50%{transform:translate(-120%)scaleX(-1)}55%{transform:translate(35%)scaleX(-1)}78%{transform:translate(-15%)scaleX(-1)}96%,99.9%{transform:translate(-120%)scaleX(-1)}to{transform:translate(950%)scaleX(1)}}@keyframes case-beach-crab-gait-a{0%,49.9%{opacity:1}50%,to{opacity:0}}@keyframes case-beach-crab-gait-b{0%,49.9%{opacity:0}50%,to{opacity:1}}@keyframes case-beach-night-cat-jump{0%,18%{opacity:1;transform:translate(0)rotate(0)}24%{opacity:1;transform:translate(5%,-18%)rotate(-12deg)}40%{opacity:1;transform:translate(20%,-140%)rotate(-13deg)}59%{opacity:1;transform:translate(40%,-285%)rotate(-3deg)}70%{opacity:1;transform:translate(49%,-277%)rotate(7deg)}82%,93%{opacity:1;transform:translate(54%,-231%)rotate(0)}94%,to{opacity:0;transform:translate(54%,-231%)rotate(0)}}@keyframes case-beach-night-cat-ground-pose{0%,23%{opacity:1}24%,81%{opacity:0}82%,93%{opacity:1}94%,to{opacity:0}}@keyframes case-beach-night-cat-air-pose{0%,23%{opacity:0}24%,81%{opacity:1}82%,to{opacity:0}}@keyframes case-beach-night-cat-settle{0%,93%{opacity:0}94%,to{opacity:1}}@media (prefers-reduced-motion:reduce){.case-beach-scene__cloud,.case-beach-scene__meteor,.case-beach-scene__cat-runner,.case-beach-scene__cat-gallop,.case-beach-scene__cat-frame,.case-beach-scene__crab,.case-beach-scene__night-cat-jump,.case-beach-scene__night-cat-pose,.case-beach-scene__night-cat-sleep{animation:none!important}.case-beach-scene__meteor,.case-beach-scene__night-cat-jump{opacity:0}.case-beach-scene__crab{transform:translate(730%)scaleX(1)}.case-beach-scene__night-cat-sleep,.case-beach-scene__cat-frame--a,.case-beach-scene__crab-frame--a{opacity:1}.case-beach-scene__cat-frame--b,.case-beach-scene__cat-frame--c,.case-beach-scene__cat-frame--d,.case-beach-scene__crab-frame--b{opacity:0}}
.case-showcase{--case-surface-light:#f6ecdf;--case-surface-dark:#241f19;--case-border-light:#0808073b;--case-border-dark:#f0e5d73b;--case-surface:var(--case-surface-light);--case-border:var(--case-border-light);--case-inset:clamp(24px, 2.4vw, 38px);--case-motion:.42s cubic-bezier(.22, 1, .36, 1);padding:32px var(--home-gutter) 64px;font-family:var(--home-font);position:relative}.studio-subpage>main>.case-showcase:first-child{padding-top:clamp(24px,3.4svh,44px)}.studio-home[data-theme=dark] .case-showcase{--case-surface:var(--case-surface-dark);--case-border:var(--case-border-dark)}.case-showcase__header{text-align:center}.case-showcase__title,.case-showcase__subtitle{font-family:var(--home-display);font-synthesis:none;margin:0;padding-block:.08em;font-weight:400}.case-showcase__title{font-size:clamp(68px,min(6.2vw,11svh),120px);line-height:1.12}.case-showcase__subtitle{text-wrap:balance;margin-top:18px;font-size:clamp(28px,2.9vw,56px);line-height:1.28}.case-showcase__note{letter-spacing:.035em;margin:12px 0 0;font-size:13px;line-height:1.8}.case-showcase__layout{grid-template-columns:minmax(0,1fr) minmax(220px,.3fr);align-items:start;gap:clamp(32px,4vw,64px);margin-top:32px;display:grid}.case-showcase__accordion{border:1px solid var(--case-border);border-radius:0;min-width:0;position:relative}.case-showcase__item{--case-rule-width:1px 0 0;border-top:1px solid var(--case-border);overflow-anchor:none;min-width:0;position:relative;overflow:hidden}.case-showcase__item:first-child{--case-rule-width:0;border-top:0}.case-showcase__item[data-expanded=true]{background:var(--case-surface)}.case-showcase__watermark{z-index:0;aspect-ratio:1;pointer-events:none;opacity:0;width:clamp(210px,24vw,310px);transition:opacity .18s;position:absolute;bottom:-72px;left:-32px}.case-showcase__item[data-expanded=true] .case-showcase__watermark{opacity:1;transition-delay:.16s}.case-showcase__watermark>span{position:absolute;inset:0}.case-showcase__watermark-ink{background:color-mix(in srgb, var(--home-body) 15%, transparent);-webkit-mask:var(--case-icon-ink) center / contain no-repeat;mask:var(--case-icon-ink) center / contain no-repeat}.case-showcase__watermark-accent{background:color-mix(in srgb, var(--home-accent) 13%, transparent);-webkit-mask:var(--case-icon-accent) center / contain no-repeat;mask:var(--case-icon-accent) center / contain no-repeat}.case-showcase__heading{margin:0}.case-showcase__trigger{width:100%;min-height:68px;padding:14px var(--case-inset);text-align:left;cursor:default;touch-action:manipulation;background:0 0;border:0;border-radius:0;grid-template-columns:52px minmax(0,1fr) 24px;align-items:center;gap:20px;display:grid;position:relative}.case-showcase__number{white-space:nowrap;letter-spacing:.1em;font-size:13px;font-weight:400}.case-showcase__name{overflow-wrap:anywhere;font-size:clamp(26px,2.1vw,36px);font-weight:550;line-height:1.3}.case-showcase__mark{width:24px;height:24px;color:var(--home-muted);place-items:center;display:grid}.case-showcase__trigger:focus-visible,.case-showcase__demo-link:focus-visible{outline:2px solid var(--home-accent);outline-offset:-5px}.case-showcase__detail:focus-visible{outline:2px solid var(--home-accent);outline-offset:5px}.case-showcase__panel{transition:grid-template-rows var(--case-motion);grid-template-rows:0fr;display:grid}.case-showcase__item[data-expanded=true] .case-showcase__panel{grid-template-rows:1fr}.case-showcase__panel-clip{min-height:0;overflow:hidden}.case-showcase__content{z-index:1;padding:0 var(--case-inset) 18px calc(var(--case-inset) + 72px);grid-template-columns:minmax(0,1fr) minmax(190px,.68fr);align-items:start;gap:clamp(24px,3vw,48px);display:grid;position:relative}.case-showcase__content[data-has-demo=true]{min-height:272px}.case-showcase__item[data-preview=browser] .case-showcase__content{grid-template-columns:minmax(0,1fr) minmax(400px,1.1fr)}.case-showcase__copy{min-width:0;padding-block:0}.case-showcase__copy h3{margin:0;font-size:clamp(17px,1.3vw,21px);font-weight:600;line-height:1.7}.case-showcase__description{overflow-wrap:anywhere;margin:10px 0 0;font-size:clamp(15px,1.15vw,18px);line-height:1.8}.case-showcase__tags{flex-wrap:wrap;gap:8px 0;margin:16px 0 0;padding:0;list-style:none;display:flex}.case-showcase__tags li{font-size:12px;line-height:1.4;position:relative}.case-showcase__tags li+li{margin-left:12px;padding-left:12px}.case-showcase__tags li+li:before{background:var(--case-border);content:"";width:1px;position:absolute;top:2px;bottom:2px;left:0}.case-showcase__preview{z-index:1;top:16px;right:var(--case-inset);background:0 0;width:clamp(190px,32%,320px);min-width:0;height:312px;display:block;position:absolute;overflow:hidden}.case-showcase__preview-media{width:100%;min-width:0;height:100%;min-height:0;overflow:hidden}.case-showcase__preview[data-preview=browser]{width:clamp(340px,46%,450px);height:auto;min-height:312px;padding-bottom:42px}.case-showcase__preview[data-preview=browser] .case-showcase__preview-media{aspect-ratio:1366/768;height:auto}.case-showcase__preview-viewport{width:100%;height:100%;position:relative;overflow:hidden;container-type:inline-size}.case-showcase__preview-viewport[data-device=mini-hotpot],.case-showcase__preview-viewport[data-device=mini-haircut]{border-radius:32px;width:calc(100% - 16px);margin-inline:auto}.case-showcase__preview-viewport[data-device=phone]{background:#05050c;border:6px solid #292623;border-radius:34px 34px 22px 22px;width:calc(100% - 16px);margin-inline:auto}.case-showcase__preview-viewport[data-device=phone]:after{z-index:3;content:"";background:#05050c;border-radius:999px;width:44px;height:11px;position:absolute;top:6px;left:50%;transform:translate(-50%)}.case-showcase__preview-viewport[data-device=captured-phone]{border-radius:32px;width:calc(100% - 16px);margin-inline:auto}.case-showcase__preview-track{width:100%;min-height:100%;transition:transform cubic-bezier(.2,.72,.22,1);transform:translate(0,0)}.case-showcase__preview[data-scroll=true] .case-showcase__preview-track{transform:translate3d(0, calc(-1 * var(--case-travel,0px)), 0);transition-duration:var(--case-scroll-duration,1s)}.case-showcase__preview-track img{width:100%;height:auto;display:block}.case-showcase__preview-viewport[data-device=captured-phone] .case-showcase__preview-track img{width:121.25%;max-width:none;margin-top:-1.5%;margin-left:-10.6%}.case-showcase__preview-viewport[data-device=browser] .case-showcase__preview-track,.case-showcase__preview[data-preview=browser][data-scroll=true] .case-showcase__preview-track{transform:none}.case-showcase__mini{width:100%;height:calc(844px * var(--case-mini-js-scale));pointer-events:none;overflow:hidden}.case-showcase__mini-source{width:390px;height:844px;transform:scale(var(--case-mini-js-scale));transform-origin:0 0}.case-showcase__mini-source iframe,.case-showcase__web-source iframe{pointer-events:none;border:0;display:block}.case-showcase__mini-source iframe{width:390px;height:844px}.case-showcase__web-source{width:1366px;height:768px;transform:scale(var(--case-web-scale));transform-origin:0 0}.case-showcase__web-source iframe{width:1366px;height:768px}@supports (scale:calc(100cqw / 390px)){.case-showcase__mini{height:calc(844px * (100cqw / 390px))}.case-showcase__mini-source{transform:scale(calc(100cqw / 390px))}}.case-showcase__demo-link{cursor:pointer;background:0 0;border:0;width:100%;padding:0;position:absolute;inset:0}.case-showcase__demo-caption{border:1px solid var(--case-border);background:var(--case-surface);opacity:1;border-radius:6px;justify-content:center;align-items:center;gap:8px;height:36px;padding:0 11px;font-size:12px;display:inline-flex;position:absolute;bottom:12px;right:12px}.case-showcase__preview[data-preview=browser] .case-showcase__demo-caption{border:0;border-top:1px solid var(--case-border);background:0 0;border-radius:0;height:42px;bottom:0;left:0;right:0}.case-showcase__arrow{width:19px;height:19px;color:var(--home-body);display:inline-flex}.case-showcase__demo-link:hover .case-showcase__arrow,.case-showcase__detail:hover .case-showcase__arrow{color:var(--home-accent)}.case-showcase__document-preview{min-height:210px;color:var(--home-muted);align-content:center;justify-items:center;gap:16px;font-size:13px;display:grid}.case-showcase__detail{align-items:center;gap:18px;margin-top:24px;padding-block:5px;font-size:14px;text-decoration:none;display:inline-flex}.case-showcase__footnote{justify-items:center;padding-top:32px;display:grid}.case-showcase__footnote p{text-align:center;margin:0 0 8px;font-size:12px;line-height:1.9}.case-showcase__contact-link{width:min(100%,370px);min-height:74px;color:var(--home-ink);grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:24px;padding:15px 2px 8px;font-size:clamp(18px,1.55vw,22px);text-decoration:none;display:grid;position:relative;overflow:hidden}.case-showcase__contact-link:before,.case-showcase__contact-link:after{content:"";width:100%;height:1px;position:absolute;top:0;left:0}.case-showcase__contact-link:before{background:var(--case-border)}.case-showcase__contact-link:after{background:var(--home-accent);width:16%;transition:width .32s cubic-bezier(.22,1,.36,1)}.case-showcase__contact-link:is(:hover,:focus-visible):after{width:100%}.case-showcase__contact-link .case-showcase__arrow{color:var(--home-ink);transition:color .22s,transform .22s}.case-showcase__contact-link:is(:hover,:focus-visible) .case-showcase__arrow{color:var(--home-accent);transform:translate(3px,-3px)}.case-showcase__contact-link:focus-visible{outline:2px solid var(--home-accent);outline-offset:4px}.case-showcase__placeholder{z-index:2;top:min(385px,max(150px,100svh - 335px));right:var(--home-gutter);width:max(220px, calc((100vw - 2 * var(--home-gutter) - clamp(32px, 4vw, 64px)) * .230769));pointer-events:none;height:402px;transform:translate3d(0, var(--case-float-offset,0px), 0);place-items:center;display:grid;position:fixed}.case-showcase [data-case-ink=primary]{color:var(--home-ink)}.case-showcase [data-case-ink=body]{color:var(--home-body)}.case-showcase [data-case-ink=muted]{color:var(--home-muted)}.case-showcase [data-case-ink=accent]{color:var(--home-accent)}.studio-home[data-theme-mode^=split-] .case-showcase [data-case-ink]{--case-ink-dark:var(--home-dark-ink);--case-ink-light:var(--home-light-ink);background-image:linear-gradient(var(--theme-split-text-angle), var(--case-ink-dark) 0 var(--theme-split-text-stop), var(--case-ink-light) var(--theme-split-text-stop) 100%);-webkit-text-fill-color:transparent;background-position:0 0;background-repeat:no-repeat;background-size:100vw 100vh;background-attachment:fixed;-webkit-background-clip:text;background-clip:text}.studio-home[data-theme-mode^=split-] .case-showcase [data-case-ink=body]{--case-ink-dark:var(--home-dark-body);--case-ink-light:var(--home-light-body)}.studio-home[data-theme-mode^=split-] .case-showcase [data-case-ink=muted]{--case-ink-dark:var(--home-dark-muted);--case-ink-light:var(--home-light-muted)}.studio-home[data-theme-mode^=split-] .case-showcase [data-case-ink=accent]{--case-ink-dark:var(--home-dark-accent);--case-ink-light:var(--home-light-accent)}.studio-home[data-theme-mode^=split-] .case-showcase__item[data-expanded=true]{background:linear-gradient(var(--theme-split-text-angle), var(--case-surface-dark) 0 var(--theme-split-text-stop), var(--case-surface-light) var(--theme-split-text-stop) 100%) 0 0 / 100vw 100vh fixed no-repeat}.studio-home[data-theme-mode^=split-] .case-showcase__watermark-ink{background:linear-gradient(var(--theme-split-text-angle), color-mix(in srgb, var(--home-dark-body) 15%, transparent) 0 var(--theme-split-text-stop), color-mix(in srgb, var(--home-light-body) 15%, transparent) var(--theme-split-text-stop) 100%) 0 0 / 100vw 100vh fixed no-repeat}.studio-home[data-theme-mode^=split-] .case-showcase__watermark-accent{background:linear-gradient(var(--theme-split-text-angle), color-mix(in srgb, var(--home-dark-accent) 13%, transparent) 0 var(--theme-split-text-stop), color-mix(in srgb, var(--home-light-accent) 13%, transparent) var(--theme-split-text-stop) 100%) 0 0 / 100vw 100vh fixed no-repeat}.studio-home[data-theme-mode^=split-] .case-showcase__demo-caption{background:linear-gradient(var(--theme-split-text-angle), var(--case-surface-dark) 0 var(--theme-split-text-stop), var(--case-surface-light) var(--theme-split-text-stop) 100%) 0 0 / 100vw 100vh fixed no-repeat;border-color:#0000}.studio-home[data-theme-mode^=split-] .case-showcase__preview[data-preview=browser] .case-showcase__demo-caption{border-top-color:var(--case-border);background:0 0}.studio-home[data-theme-mode^=split-] .case-showcase__contact-link:before{background:var(--theme-split-border-gradient) 0 0 / 100vw 100vh fixed no-repeat}.studio-home[data-theme-mode^=split-] .case-showcase__contact-link:after{background:var(--theme-split-accent-gradient) 0 0 / 100vw 100vh fixed no-repeat}.studio-home[data-theme-mode^=split-] .case-showcase__accordion,.studio-home[data-theme-mode^=split-] .case-showcase__item{border-color:#0000}.studio-home[data-theme-mode^=split-] .case-showcase__accordion:before,.studio-home[data-theme-mode^=split-] .case-showcase__item:before{z-index:1;padding:var(--case-rule-width,1px);background:linear-gradient(var(--theme-split-text-angle), var(--case-border-dark) 0 var(--theme-split-text-stop), var(--case-border-light) var(--theme-split-text-stop) 100%) 0 0 / 100vw 100vh fixed no-repeat;pointer-events:none;content:"";position:absolute;inset:0;-webkit-mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);-webkit-mask-position:0 0,0 0;mask-position:0 0,0 0;-webkit-mask-size:auto,auto;mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.studio-home[data-theme-mode^=split-] .case-showcase__tags li+li:before{background:var(--theme-split-border-gradient) 0 0 / 100vw 100vh fixed no-repeat}.studio-home[data-theme-mode^=split-] .case-showcase__mark{background:var(--theme-split-muted-gradient) 0 0 / 100vw 100vh fixed no-repeat;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") 50%/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") 50%/contain no-repeat}.studio-home[data-theme-mode^=split-] .case-showcase__mark svg,.studio-home[data-theme-mode^=split-] .case-showcase__arrow svg{visibility:hidden}.studio-home[data-theme-mode^=split-] .case-showcase__arrow{background:var(--theme-split-body-gradient) 0 0 / 100vw 100vh fixed no-repeat;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10M7 17 17 7'/%3E%3C/svg%3E") 50%/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10M7 17 17 7'/%3E%3C/svg%3E") 50%/contain no-repeat}@media (max-width:1100px){.case-showcase__layout{grid-template-columns:minmax(0,1fr) 180px;gap:24px}.case-showcase__placeholder{width:180px}.case-showcase__content{padding-left:var(--case-inset);grid-template-columns:minmax(0,1fr) 180px;gap:24px}.case-showcase__trigger{grid-template-columns:42px minmax(0,1fr) 24px;gap:14px}.case-showcase__watermark{width:210px}}@media (max-width:850px){.case-showcase{padding-inline:24px}.case-showcase__layout{grid-template-columns:minmax(0,1fr)}.case-showcase__item[data-preview=browser] .case-showcase__content{grid-template-columns:minmax(0,1fr);min-height:0}.case-showcase__preview[data-preview=browser]{width:min(calc(100% - 2 * var(--case-inset)), 450px);min-height:0;margin:0 auto 16px;position:relative;top:auto;right:auto}.case-showcase__placeholder{justify-self:center;width:min(100%,420px);height:360px;position:static;transform:none}}@media (max-width:600px){.case-showcase{--case-inset:20px;padding-inline:20px;padding-bottom:36px}.studio-subpage>main>.case-showcase:first-child{padding-top:30px}.case-showcase__title{font-size:clamp(54px,14vw,78px)}.case-showcase__subtitle{margin-top:12px;font-size:clamp(24px,6vw,32px)}.case-showcase__note{margin-top:10px;font-size:11px}.case-showcase__layout{margin-top:24px}.case-showcase__trigger{gap:12px;min-height:70px;padding-block:16px}.case-showcase__number{font-size:11px}.case-showcase__name{font-size:24px}.case-showcase__content{grid-template-columns:minmax(0,1fr);gap:18px;padding-bottom:12px}.case-showcase__content[data-has-demo=true]{min-height:0}.case-showcase__copy{padding-block:0}.case-showcase__copy h3{font-size:17px}.case-showcase__description{margin-top:10px;font-size:15px;line-height:1.8}.case-showcase__tags{margin-top:14px}.case-showcase__preview{width:calc(100% - 2 * var(--case-inset));height:304px;margin:0 auto 16px;position:relative;top:auto;right:auto}.case-showcase__preview[data-preview=browser]{height:auto}.case-showcase__watermark{width:170px;bottom:-46px;left:-24px}.case-showcase__footnote p{font-size:11px}.case-showcase__placeholder{height:300px}}@media (prefers-reduced-motion:reduce){.case-showcase__panel,.case-showcase__preview-track,.case-showcase__contact-link:after,.case-showcase__contact-link .case-showcase__arrow{transition:none}}
