@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]{--device-preview-chrome-height:42px;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{height:var(--device-preview-chrome-height);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]{gap:var(--space-md);padding:var(--space-md);background:var(--device-preview-chrome-surface)}.device-preview-chrome[data-device=phone]{--device-preview-island:33.5%;--device-preview-status-inset:var(--space-lg);padding:var(--space-tight) 0 var(--space-micro);background:var(--device-preview-surface);justify-content:space-between;position:relative}.device-preview-clock,.device-preview-status{max-width:calc((100% - var(--device-preview-island)) / 2 - var(--device-preview-status-inset));overflow:hidden}.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-clock{margin-left:var(--device-preview-status-inset);letter-spacing:.01em;align-self:center;font-size:13px;font-weight:600}.device-preview-notch{width:var(--device-preview-island);aspect-ratio:102/30;border-radius:var(--radius-full);background:#000;display:block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.device-preview-notch:after{aspect-ratio:1;border-radius:var(--radius-full);content:"";background:radial-gradient(circle at 34% 32%,#33456a,#090c13 68%);width:11%;position:absolute;top:50%;right:8%;transform:translateY(-50%)}.device-preview-status{margin-right:var(--device-preview-status-inset);justify-content:flex-end;align-items:center;gap:4px;display:flex}.device-preview-signal{background-image:linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor);background-position:0 100%,5px 100%,10px 100%,15px 100%;background-repeat:no-repeat;background-size:2px 45%,2px 63%,2px 81%,2px 100%;width:17px;height:11px;display:block}[data-icon=device-preview-wifi]{width:14px;height:14px}.device-preview-battery{border-radius:var(--radius-detail);opacity:.9;border:1px solid;width:24px;height:12px;display:block;position:relative}.device-preview-battery:before{content:"";background:currentColor;position:absolute;inset:1.5px}.device-preview-battery:after{content:"";background:currentColor;border-radius:0 1px 1px 0;width:2px;height:4px;position:absolute;top:50%;right:-3px;transform:translateY(-50%)}.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}.device-preview-segments{grid-template-columns:repeat(var(--device-preview-segment-count,2), minmax(0, 1fr));padding:var(--space-micro);border-radius:calc(var(--radius-control) + var(--space-micro));background:var(--surface-muted);display:grid;position:relative}.device-preview-segments:before{z-index:var(--z-surface-base);top:var(--space-micro);bottom:var(--space-micro);left:var(--space-micro);width:calc((100% - var(--space-tight)) / var(--device-preview-segment-count,2));border-radius:var(--radius-control);background:var(--surface-ink);content:"";transform:translateX(calc(var(--device-preview-segment-index,0) * 100%));transition:transform var(--duration-base) var(--ease-drawer);position:absolute}.device-preview-segment{z-index:var(--z-surface-content);min-width:0;display:block;position:relative}.device-preview-segment input{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.device-preview-segment span{padding:var(--space-control) var(--space-tight);border-radius:var(--radius-control);color:var(--text-secondary);cursor:pointer;font-size:var(--type-body-sm-size);text-align:center;transition:color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-enter);background:0 0;justify-content:center;align-items:center;font-weight:500;display:flex}.device-preview-segment svg{flex:none;width:18px;height:18px}.device-preview-segment:has(svg) span{padding-inline:var(--space-lg)}@media (hover:hover) and (pointer:fine){.device-preview-segment:hover input:not(:checked)+span{background:var(--surface-hover)}}.device-preview-segment:active span{transform:scale(.97)}.device-preview-segment input:checked+span{color:var(--text-inverse)}.device-preview-segment input:focus-visible+span{outline:2px solid var(--focus-ring);outline-offset:2px}@media (prefers-reduced-motion:reduce){.device-preview-chrome,.device-preview-screen{animation:none}}}