.showcase-wrap{--pin-runway:300vh}.showcase-stage{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff}.show-inner{align-items:center;gap:2rem;width:100%;display:grid}@media (width>=900px){.show-inner{grid-template-columns:.9fr 1.1fr;gap:3.5rem}}.show-info .show-num{font-family:var(--font-title);color:var(--green);letter-spacing:.08em;border-bottom:2px solid var(--amber);padding-bottom:.15rem;font-size:.9rem;font-weight:700;display:inline-block}.show-info h3{margin:.8rem 0 .6rem;font-size:clamp(1.5rem,3vw,2.2rem)}.show-info p{max-width:34rem}.show-tags{flex-wrap:wrap;gap:.5rem;margin-top:1.1rem;display:flex}.show-tags span{color:var(--green);background:var(--green-soft);border-radius:999px;padding:.25rem .7rem;font-size:.82rem;font-weight:600}.show .browser-frame{box-shadow:none;margin:0 auto}.show .browser-frame img{aspect-ratio:16/10;object-fit:cover;object-position:top;width:100%;display:block}.ph{aspect-ratio:16/10;background:var(--green-soft);color:var(--ink-soft);text-align:center;justify-content:center;align-items:center;padding:1rem;font-size:.9rem;display:flex;position:relative}.ph:before{content:"";border:1.5px dashed color-mix(in srgb, var(--green) 45%, transparent);border-radius:6px;position:absolute;inset:12px}.show-recap{display:none}.recap-inner{align-items:center;gap:2rem;width:100%;display:grid}@media (width>=900px){.recap-inner{grid-template-columns:.75fr 1.25fr;gap:3rem}}.recap-info{justify-items:start;gap:.5rem;display:grid}.recap-info h3{margin:0;font-size:clamp(1.3rem,2.4vw,1.9rem)}.recap-stack{width:min(500px,88%);margin:0 auto;padding:3rem 0 0 3rem;position:relative}.recap-stack .browser-frame{z-index:1;width:100%;max-width:none;box-shadow:8px 8px 0 var(--ink);position:relative}.recap-stack .bf-back{z-index:0;width:85%;box-shadow:none;border-width:2.5px;position:absolute;top:0;left:0}.recap-stack .browser-frame img{aspect-ratio:16/10;object-fit:cover;object-position:top;width:100%;display:block}.recap-stack .ph{aspect-ratio:16/10;font-size:.85rem}@media (width<=899px){.recap-stack{width:min(390px,82vw)}.recap-info{text-align:center;justify-items:center}}.show-cta{justify-content:center;margin-top:2rem;display:flex}.show-hint{text-align:center;color:var(--ink-soft);opacity:.7;font-size:.85rem;display:none}.show-hint[hidden]{display:none}@media (prefers-reduced-motion:no-preference){.pin-on .showcase-body{flex-direction:column;flex:1;min-height:0;display:flex}.pin-on .shows{flex:1;width:100%;min-height:0;display:grid}.pin-on .show{opacity:0;visibility:hidden;grid-area:1/1;align-items:center;min-height:0;transition:opacity .55s;display:flex}.pin-on .pin-stage.live .show.is-active{opacity:1;visibility:visible}.pin-on .show-inner{padding-top:1rem}.pin-on .show-info>*{opacity:0;transition:opacity .5s,transform .5s cubic-bezier(.2,.7,.2,1);transform:translateY(20px)}.pin-on .pin-stage.live .show.is-active .show-info>:first-child{opacity:1;transition-delay:.45s;transform:none}.pin-on .pin-stage.live .show.is-active .show-info>:nth-child(2){opacity:1;transition-delay:.55s;transform:none}.pin-on .pin-stage.live .show.is-active .show-info>:nth-child(3){opacity:1;transition-delay:.65s;transform:none}.pin-on .pin-stage.live .show.is-active .show-info>:nth-child(4){opacity:1;transition-delay:.75s;transform:none}.pin-on .show .browser-frame{opacity:0;max-width:min(640px,max(260px,160svh - 33.6rem));transition:opacity .55s .55s,transform .55s cubic-bezier(.2,.7,.2,1) .55s;transform:translateY(26px)scale(.97)}.pin-on .pin-stage.live .show.is-active .browser-frame{opacity:1;transform:none}.pin-on .show-hint:not([hidden]){display:block}.pin-on .pin-stage.all .shows{display:none}.pin-on .pin-stage.all .show-recap{flex:1;align-items:center;min-height:0;animation:.5s cubic-bezier(.2,.7,.2,1) .1s both rise;display:flex}.pin-on .recap-stack{width:min(500px,88%,max(200px,160svh - 36.8rem))}.pin-on .pin-stage.all .recap-stack .browser-frame{animation:.55s cubic-bezier(.2,.7,.2,1) .2s both rise}.pin-on .pin-stage.all .recap-stack .bf-back{animation:.55s cubic-bezier(.2,.7,.2,1) .45s both rise}.pin-on .show-cta{opacity:0;visibility:hidden;pointer-events:none;margin-top:0;transition:opacity .45s .3s,visibility 0s linear .75s;position:absolute;bottom:clamp(3rem,8vh,4.5rem);left:0;right:0}.pin-on .pin-stage.cta-on .show-cta{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .45s .3s,visibility}.pin-on .show-hint{position:absolute;bottom:3.9rem;left:50%;transform:translate(-50%)}@media (width<=899px){.pin-on .show-inner{grid-template-rows:auto auto;align-content:center;gap:clamp(.9rem,2.4svh,1.4rem);height:100%;padding-top:.5rem;padding-bottom:0}.pin-on .show-info h3{margin:.5rem 0 .4rem}.pin-on .show-info p{font-size:.95rem}.pin-on .show .browser-frame{width:min(430px,100%,max(180px,160svh - 43.2rem));max-width:none;margin-inline:auto}.pin-on .show .browser-frame img{aspect-ratio:16/10;object-fit:cover;object-position:top}.pin-on .show .ph{aspect-ratio:16/10}.pin-on .pin-dots{display:none}.pin-on .show-cta{bottom:7.4rem}.pin-on .show-hint:not([hidden]){display:none}.pin-on .recap-inner{padding-top:.5rem;padding-bottom:9rem}}@media (width<=899px) and (height<=720px){.pin-on .show-tags{display:none}.pin-on .show-inner{gap:.8rem}.pin-on .show-info p{font-size:.88rem;line-height:1.45}.pin-on .pin-head h2{font-size:1.35rem}.pin-on .show .browser-frame{width:min(430px,100%,max(180px,160svh - 51.2rem))}.pin-on .recap-stack{width:min(500px,82vw,max(180px,160svh - 51.2rem));padding:1.5rem 0 0 1.5rem}.pin-on .recap-info h3{font-size:1.15rem}.pin-on .recap-inner{padding-bottom:7rem}}@media (width<=899px) and (height<=500px) and (width>=560px){.pin-on .pin-inner{padding-top:3rem;padding-bottom:6rem}.pin-on .pin-head h2{font-size:1.15rem}.pin-on .show-inner{grid-template-rows:auto;grid-template-columns:1fr 1fr;align-content:center;align-items:center;gap:1.2rem;padding-top:0}.pin-on .show .browser-frame{width:min(100%,max(180px,160svh - 24.8rem))}.pin-on .show-cta{bottom:3.2rem}.pin-on .recap-inner{grid-template-columns:.8fr 1.2fr;align-items:center;gap:1.2rem;padding-bottom:4rem}.pin-on .recap-info{text-align:left;justify-items:start}.pin-on .recap-stack{width:min(100%,max(180px,160svh - 26.4rem));padding:1rem 0 0 1rem}}}