.example-window{overflow:hidden}.example-window .example-grid{display:flex;gap:24px;will-change:transform}.example-window .example-card{flex:0 0 100%;min-width:0}.carousel-controls{display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:20px}.carousel-controls button{cursor:pointer;min-height:44px;padding:10px 16px;border:1px solid var(--line);border-radius:24px;background:var(--paper);color:var(--ink);font:inherit}.carousel-controls span{font-size:13px}.home-banner{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:-1}.custom-home-video{width:100%;height:100%;object-fit:contain;background:#000}.phone-display .phone-custom{padding:0;background:#000}.phone-custom video{position:static;display:block}.example-info{color:#191919}.phone-frame{color:#191919}.home-banner~.phone-frame{position:relative}body[data-motion=disabled] *{animation:none!important;scroll-behavior:auto!important}
@media(min-width:600px){.example-window .example-card{flex-basis:calc((100% - 24px)/2)}}@media(min-width:900px){.example-window .example-card{flex-basis:calc((100% - 48px)/3)}}
@media(prefers-reduced-motion:reduce){.example-grid{transition:none!important;will-change:auto}}

.phone-frame.reference-phone{border:0;background:transparent url('/static/phone-reference-front.webp') center/100% 100% no-repeat;aspect-ratio:523/1100;height:auto;padding:0}.reference-phone .phone-display{position:absolute;inset:7% 4% 3%;width:92%;height:90%;border-radius:22px;background:#111}.reference-phone .phone-island,.reference-phone .phone-home-indicator{display:none}

.home-phone-rear{position:absolute;width:60%;height:90%;object-fit:contain;left:0;top:0;transform:rotate(-9deg);z-index:0}.phone-frame.reference-phone{margin-left:40%;transform:rotate(4deg);z-index:1;width:48%;max-width:245px}.reference-phone .phone-display{color:#191919}

.phone-page.phone-custom{pointer-events:auto}.animated-showcase:has(.reference-phone){display:block}.reference-phone{box-shadow:none!important}.example-window .example-card{flex-basis:calc((100% - (var(--visible,1) - 1)*24px)/var(--visible,1))}
