.showcase{--sc-dur:2s;--sc-ease:cubic-bezier(.22, 1, .36, 1)}.showcase__stage{aspect-ratio:16/10.6;position:relative;overflow:visible}.frame{cursor:pointer;outline-offset:4px;transition:transform .72s var(--sc-ease), opacity .72s ease, filter .72s ease, box-shadow .72s ease, outline-color .35s ease;outline:2px solid #0000;position:absolute}[data-view=desktop] .frame--browser,[data-view=mobile] .frame--phone{outline-color:color-mix(in srgb, var(--brand) 30%, transparent)}.showcase[data-hover=browser] .frame--browser,.showcase:has([data-view-btn=desktop]:focus-visible) .frame--browser{outline-color:var(--brand);box-shadow:0 1px 2px #0b12191a,0 22px 50px -20px #0b12196b,0 0 38px -4px #00c7e2b3}.showcase[data-hover=phone] .frame--phone,.showcase:has([data-view-btn=mobile]:focus-visible) .frame--phone{outline-color:var(--brand);box-shadow:0 2px 4px #0b121938,0 40px 64px -22px #0b121999,0 0 42px -4px #00c7e2bf}.frame--browser{background:var(--surface-raised);border:1px solid var(--border-base);border-radius:12px;width:87%;top:0;left:0;overflow:hidden;box-shadow:0 1px 2px #0b12191a,0 22px 50px -20px #0b12196b}.browser__bar{background:var(--surface-sunken);border-bottom:1px solid var(--border-base);align-items:center;gap:.75rem;height:1.9rem;padding-inline:.7rem;display:flex}.browser__dots{flex-shrink:0;gap:.3rem;display:flex}.browser__dots i{background:var(--border-strong);border-radius:9999px;width:.44rem;height:.44rem}.browser__url{text-overflow:ellipsis;white-space:nowrap;min-width:0;font-family:var(--font-mono);letter-spacing:.02em;color:var(--text-muted);background:var(--surface);border-radius:9999px;flex:1;padding:.15rem .6rem;font-size:.625rem;overflow:hidden}.frame__screen--desktop{aspect-ratio:16/10;background:var(--surface-sunken)}.frame--phone{transform-origin:100% 100%;background:linear-gradient(160deg,#2b3a4d 0%,#131c26 100%);border-radius:1.15rem;width:21.5%;padding:.32rem;bottom:0;right:2%;box-shadow:0 1px 2px #0b121933,0 26px 46px -18px #0b12198c}.phone__notch{z-index:2;background:#131c26;border-radius:0 0 .34rem .34rem;width:32%;height:.34rem;position:absolute;top:.32rem;left:50%;translate:-50%}.frame__screen--phone{aspect-ratio:9/19.5;background:var(--surface-sunken);border-radius:.85rem}.frame__screen{position:relative;overflow:hidden}.frame__screen .shot{object-fit:cover;object-position:top center;width:100%;height:100%;position:absolute;inset:0}[data-view=desktop] .frame--browser{opacity:1;z-index:2;transform:none}[data-view=desktop] .frame--phone{opacity:.9;z-index:1;transform:scale(.93)}[data-view=mobile] .frame--browser{opacity:.55;filter:saturate(.82);z-index:1;transform:scale(.955)translate(-2.5%,-1.5%)}[data-view=mobile] .frame--phone{opacity:1;z-index:3;transform:scale(1.24)translate(-7%);box-shadow:0 2px 4px #0b121938,0 40px 64px -22px #0b121999}@keyframes sc-float-a{0%,to{translate:0}50%{translate:0 -7px}}@keyframes sc-float-b{0%,to{translate:0}50%{translate:0 -11px}}[data-visible] .frame--browser{animation:7s ease-in-out infinite sc-float-a}[data-visible] .frame--phone{animation:7s ease-in-out 1.6s infinite sc-float-b}.showcase__controls{align-items:center;gap:.9rem;margin-top:1.15rem;display:flex}.showcase__vp{font-family:var(--font-mono);letter-spacing:.1em;color:var(--text-muted);font-variant-numeric:tabular-nums;white-space:nowrap;font-size:.625rem}[data-view=desktop] [data-vp-mobile],[data-view=mobile] [data-vp-desktop]{display:none}.segmented{background:var(--surface-sunken);border:1px solid var(--border-base);border-radius:9999px;padding:.14rem;display:inline-flex}.segmented button{font-family:var(--font-mono);letter-spacing:.11em;text-transform:uppercase;color:var(--text-muted);border-radius:9999px;align-items:center;gap:.35rem;padding:.34rem .72rem;font-size:.625rem;transition:background-color .22s,color .22s;display:inline-flex}.segmented button[aria-pressed=true]{background:var(--brand);color:var(--brand-contrast)}.showcase__tick{background:var(--border-base);border-radius:9999px;flex:1;max-width:4rem;height:2px;overflow:hidden}.showcase__tick i{background:var(--brand);transform-origin:0;width:100%;height:100%;animation:sc-tick var(--sc-dur) linear infinite;display:block}@keyframes sc-tick{0%{transform:scaleX(0)}to{transform:scaleX(1)}}.showcase[data-paused] .showcase__tick i,.showcase[data-manual] .showcase__tick i{animation-play-state:paused}.showcase[data-manual] .showcase__tick i{opacity:.3}@media (prefers-reduced-motion:reduce){.frame{transition:none}[data-visible] .frame--browser,[data-visible] .frame--phone{animation:none}.showcase__tick i{opacity:.3;animation:none;transform:scaleX(1)}}@media (width<=640px){.frame--phone{width:25%}[data-view=mobile] .frame--phone{transform:scale(1.18)translate(-4%)}}