@layer components{.device-preview{--device-preview-rail:#b6bbc4;min-width:0;max-width:100%;display:inline-flex;position:relative}.device-preview[data-device=phone]:before,.device-preview[data-device=phone]:after{z-index:-1;background-color:var(--device-preview-rail);content:"";background-repeat:no-repeat;width:6px;position:absolute}.device-preview[data-device=phone]:before{background-image:linear-gradient(var(--device-preview-rail), var(--device-preview-rail)), linear-gradient(var(--device-preview-rail), var(--device-preview-rail)), linear-gradient(var(--device-preview-rail), var(--device-preview-rail));background-color:#0000;background-position:0 0,0 34%,0 100%;background-size:100% 12%,100% 27%,100% 27%;height:30%;top:15%;left:-3px}.device-preview[data-device=phone]:after{height:16%;top:25%;right:-3px}.device-preview-frame{--device-preview-bezel:8px;--device-preview-surface:#fff;--device-preview-chrome-surface:#f6f8fb;--device-preview-text:#101114;--device-preview-dim:#6b717f;--device-preview-dot:#dfe4ec;--device-preview-radius:var(--radius-card);--device-preview-url-radius:var(--radius-full);--device-preview-chrome-height:58px;width:var(--device-preview-frame-width,auto);height:var(--device-preview-frame-height,auto);border:0 solid var(--surface-ink);border-radius:var(--device-preview-radius);background:var(--device-preview-surface);min-width:0;max-width:100%;box-shadow:var(--elevation-glass);transition:width var(--duration-dissolve) var(--ease-drawer), height var(--duration-dissolve) var(--ease-drawer), border-width var(--duration-dissolve) var(--ease-drawer), background-color var(--duration-base) var(--ease-standard);flex-direction:column;display:flex;overflow:hidden}.device-preview-frame[data-device=phone]{border-width:var(--device-preview-bezel);box-shadow:0 0 0 3px var(--device-preview-rail), var(--elevation-glass);border-radius:46px;position:relative}.device-preview-frame[data-device=desktop] .device-preview-chrome,.device-preview-frame[data-device=desktop] .device-preview-screen{animation:device-preview-in-desktop var(--duration-slow) var(--ease-enter) 90ms both}.device-preview-frame[data-device=phone] .device-preview-chrome,.device-preview-frame[data-device=phone] .device-preview-screen{animation:device-preview-in-phone var(--duration-slow) var(--ease-enter) 90ms both}@keyframes device-preview-in-desktop{0%{opacity:0;transform:translateY(6px)}}@keyframes device-preview-in-phone{0%{opacity:0;transform:translateY(6px)}}.device-preview-screen{flex:1;min-height:0}.device-preview-chrome{color:var(--device-preview-text);transition:color var(--duration-base) var(--ease-standard), background-color var(--duration-base) var(--ease-standard);flex:none;align-items:center;display:flex}.device-preview-chrome[data-device=desktop]{height:var(--device-preview-chrome-height);gap:var(--space-md);padding:var(--space-md);background:var(--device-preview-chrome-surface)}.device-preview-dots{gap:var(--space-micro);flex:none;display:flex}.device-preview-dots i{border-radius:var(--radius-full);background:var(--device-preview-dot);width:10px;height:10px;display:block}.device-preview-url{min-width:0;padding:var(--space-micro) var(--space-md);border-radius:var(--device-preview-url-radius);color:var(--device-preview-dim);background:var(--device-preview-surface);font-size:var(--type-caption-size);text-overflow:ellipsis;white-space:nowrap;transition:color var(--duration-base) var(--ease-standard), background-color var(--duration-base) var(--ease-standard);overflow:hidden}.device-preview-chrome[data-device=phone]{--device-preview-pt:calc(100cqw / 390);background:var(--device-preview-surface);grid-template-columns:minmax(0,1fr) 32.05% minmax(0,1fr);place-items:center;display:grid;container-type:inline-size}.device-preview-chrome[data-device=phone]>*{margin-block:calc(11 * var(--device-preview-pt)) calc(6 * var(--device-preview-pt))}.device-preview-clock{font-family:-apple-system,BlinkMacSystemFont,SF Pro Text,Helvetica Neue,sans-serif;font-size:calc(17 * var(--device-preview-pt));letter-spacing:-.02em;font-weight:600;line-height:calc(37 * var(--device-preview-pt))}.device-preview-notch{width:100%;height:calc(37 * var(--device-preview-pt));border-radius:var(--radius-full);background:#000;display:block;position:relative}.device-preview-notch:after{top:50%;right:calc(12 * var(--device-preview-pt));width:calc(12 * var(--device-preview-pt));aspect-ratio:1;border-radius:var(--radius-full);content:"";background:radial-gradient(circle at 34% 32%,#33456a,#090c13 68%);position:absolute;transform:translateY(-50%)}.device-preview-status{height:calc(37 * var(--device-preview-pt));align-items:center;gap:calc(5 * var(--device-preview-pt));display:flex}.device-preview-status svg{fill:currentColor;flex:none;display:block}.device-preview-signal{width:calc(18 * var(--device-preview-pt));height:calc(12 * var(--device-preview-pt))}.device-preview-wifi{width:calc(17 * var(--device-preview-pt));height:calc(12 * var(--device-preview-pt))}.device-preview-battery{width:calc(27 * var(--device-preview-pt));height:calc(13 * var(--device-preview-pt))}.device-preview-home{right:0;bottom:var(--space-tight);border-radius:var(--radius-full);background:var(--device-preview-text);width:37.5%;height:4px;margin-inline:auto;display:block;position:absolute;left:0}@media (prefers-reduced-motion:reduce){.device-preview-chrome,.device-preview-screen{animation:none}}}