@layer components{.ap-phone-frame{--ap-phone-scale:1;--ap-phone-max-width:21.25rem;--ap-phone-pad:calc(.75rem * var(--ap-phone-scale));--ap-phone-radius:calc(2.4rem * var(--ap-phone-scale));--ap-phone-screen-radius:calc(1.85rem * var(--ap-phone-scale));--ap-phone-notch-width:calc(7rem * var(--ap-phone-scale));--ap-phone-notch-height:calc(1.5rem * var(--ap-phone-scale));--ap-phone-notch-inset:calc(.75rem * var(--ap-phone-scale));--ap-phone-shadow-y-far:calc(34px * var(--ap-phone-scale));--ap-phone-shadow-blur-far:calc(100px * var(--ap-phone-scale));--ap-phone-shadow-y-near:calc(14px * var(--ap-phone-scale));--ap-phone-shadow-blur-near:calc(36px * var(--ap-phone-scale));width:100%;max-width:var(--ap-phone-max-width);padding:var(--ap-phone-pad);border:1px solid color-mix(in oklab, var(--color-text-primary-token) 12%, transparent);border-radius:var(--ap-phone-radius);background:linear-gradient(180deg, color-mix(in oklab, var(--color-bg-surface-2) 98%, transparent), color-mix(in oklab, var(--color-bg-surface-0) 98%, transparent));box-shadow:0 var(--ap-phone-shadow-y-far) var(--ap-phone-shadow-blur-far) color-mix(in oklab, var(--system-b-cinematic-black) 48%, transparent), 0 var(--ap-phone-shadow-y-near) var(--ap-phone-shadow-blur-near) color-mix(in oklab, var(--system-b-cinematic-black) 28%, transparent);margin-inline:auto;container:ap-phone/inline-size}.ap-phone-frame[data-size=md]{--ap-phone-scale:.7059;--ap-phone-max-width:15rem}.ap-phone-frame[data-size=sm]{--ap-phone-scale:.5647;--ap-phone-max-width:12rem}.ap-phone-frame__screen{aspect-ratio:9/19.5;background:var(--color-bg-surface-0);border:1px solid color-mix(in oklab, var(--color-text-primary-token) 8%, transparent);border-radius:min(var(--ap-phone-screen-radius), 8.71cqi);position:relative;overflow:hidden}.ap-phone-frame__notch{left:50%;top:min(var(--ap-phone-notch-inset), 3.53cqi);z-index:20;width:min(var(--ap-phone-notch-width), 32.94cqi);height:min(var(--ap-phone-notch-height), 7.06cqi);background:color-mix(in oklab, var(--system-b-cinematic-black) 70%, transparent);box-shadow:0 0 0 1px color-mix(in oklab, var(--color-text-primary-token) 8%, transparent);border-radius:999px;position:absolute;translate:-50%}.ap-phone-frame__overlay{background:radial-gradient(circle at top, color-mix(in oklab, var(--color-text-tertiary-token) 14%, transparent), transparent 35%), linear-gradient(180deg, color-mix(in oklab, var(--color-text-primary-token) 4%, transparent), transparent 22%, transparent 78%, color-mix(in oklab, var(--system-b-cinematic-black) 22%, transparent));position:absolute;inset:0}.ap-phone-frame__viewport{z-index:10;width:100%;height:100%;position:relative}}
.ap-mode-switcher__headline{max-width:12ch}.ap-mode-switcher__copy--compact{max-width:29rem}.ap-mode-switcher__phone--compact{max-width:15.75rem}@media (min-width:40rem){.ap-mode-switcher__phone--compact{max-width:16.75rem}}.ap-mode-switcher__active-tab{box-shadow:0 1px 3px 0 color-mix(in oklab, var(--system-b-cinematic-black) 10%, transparent), 0 1px 2px -1px color-mix(in oklab, var(--system-b-cinematic-black) 10%, transparent)}