.device{isolation:isolate;box-shadow:var(--shadow-2);position:relative}.device__screen{aspect-ratio:var(--device-aspect);background-color:var(--paper-2);position:relative;overflow:hidden;container-type:size}.device__screen :is(img,video){object-fit:cover;object-position:top;width:100%;height:100%;display:block}.device--browser{border:1px solid var(--ink-1);background-color:var(--paper-0);border-radius:8px;overflow:hidden}.device__bar{border-bottom:1px solid var(--ink-1);background-color:var(--paper-0);grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;height:28px;padding-inline:12px;display:grid}.device__dots{gap:6px;display:flex}.device__dots>span{border:1px solid var(--ink-1);border-radius:50%;width:8px;height:8px}.device__dots>span:first-child{background-color:var(--sun-400)}.device__spacer{width:36px}.device__url{background-color:var(--paper-1);max-width:100%;box-shadow:inset 0 0 0 1px var(--paper-3);color:var(--ink-2);font-family:var(--font-mono);text-overflow:ellipsis;white-space:nowrap;border-radius:2px;justify-self:center;padding:2px 12px;font-size:11px;font-weight:500;line-height:16px;overflow:hidden}.device--phone{background-color:var(--ink-1);border-radius:36px;padding:8px}.device--phone .device__screen{border-radius:28px}.device__island{z-index:1;background-color:var(--ink-1);border-radius:999px;width:26cqi;height:2.6cqh;position:absolute;top:1.2cqh;left:37cqi}.device--scroll .device__screen :is(img,video){height:auto}@media (prefers-reduced-motion:no-preference){.device__scroller{transition:transform .7s var(--ease-in-out)}.device--scroll:focus-within .device__scroller,[data-device-hover]:focus-within .device--scroll .device__scroller{transition-duration:3s;transform:translateY(calc(100cqh - 100%))}}@media (prefers-reduced-motion:no-preference) and (hover:hover){.device--scroll:hover .device__scroller,[data-device-hover]:hover .device--scroll .device__scroller{transition-duration:3s;transform:translateY(calc(100cqh - 100%))}}