.dv-device{position:absolute;inset:0}.dv-screen{background:var(--dv-screen-bg,var(--color-white));isolation:isolate;content-visibility:auto;position:absolute;overflow:hidden}.dv-bezel{background:var(--color-night-950);position:absolute;inset:.17em}.dv-frame{background:linear-gradient(145deg, var(--color-night-600) 0%, var(--color-night-800) 30%, var(--color-night-900) 66%, var(--color-night-700) 100%);box-shadow:inset 0 0 0 .07em #fff3, var(--dv-shadow);position:absolute}.dv-side-button{border-radius:.2em;position:absolute}.dv-camera{background:radial-gradient(circle at 36% 34%, var(--color-night-600) 0 18%, var(--color-black) 46%);border-radius:50%;position:absolute}.dv-phone .dv-side-button{background:linear-gradient(90deg, var(--color-night-700), var(--color-night-800) 45%, var(--color-night-600));width:.42em;right:-.2em}.dv-phone .dv-volume-button{height:5.8em;top:8.8em}.dv-phone .dv-power-button{height:3.2em;top:16.2em}.dv-phone .dv-frame{border-radius:3.1em;inset:0}.dv-phone .dv-bezel{border-radius:2.95em}.dv-phone .dv-screen{clip-path:inset(0 round 2.52em);border-radius:2.52em;inset:.6em}.dv-phone .dv-camera{z-index:6;width:1.16em;height:1.16em;top:.78em;left:calc(50% - .58em);box-shadow:0 0 0 .12em #0c16381f}.dv-status-bar{z-index:5;height:2.75em;color:var(--dv-status-ink,var(--color-ink));justify-content:space-between;align-items:center;padding:.2em 1.5em 0 1.95em;display:flex;position:absolute;inset:0 0 auto}.dv-status-time{font-variant-numeric:tabular-nums;font-size:.86em;font-weight:650}.dv-status-icons{align-items:center;gap:.3em;display:flex}.dv-status-icons svg{fill:currentColor;display:block}.dv-status-signal{width:1.05em;height:.7em}.dv-status-wifi{width:.95em;height:.72em}.dv-status-battery{width:1.55em;height:.75em}.dv-home-indicator{z-index:5;background:var(--dv-status-ink,var(--color-ink));border-radius:.2em;width:5.4em;height:.26em;position:absolute;bottom:.45em;left:calc(50% - 2.7em)}.dv-laptop .dv-frame{border-radius:1.6em 1.6em .5em .5em;width:50em;height:32.6em;top:0;left:3em}.dv-laptop .dv-bezel{border-radius:1.45em 1.45em .36em .36em}.dv-laptop .dv-screen{clip-path:inset(0 round .3em);border-radius:.3em;width:48em;height:30em;top:1.4em;left:1em}.dv-laptop .dv-camera{width:.44em;height:.44em;top:.48em;left:calc(50% - .22em)}.dv-base{background:linear-gradient(180deg, var(--color-night-600) 0%, var(--color-night-700) 30%, var(--color-night-800) 70%, var(--color-night-900) 100%);width:56em;height:1.8em;box-shadow:inset 0 .07em 0 #ffffff47, inset 0 -.12em .2em #03071a73, var(--dv-shadow);border-radius:.25em .25em 1.6em 1.6em/.25em .25em 1.3em 1.3em;position:absolute;bottom:0;left:0}.dv-notch{background:var(--color-night-900);border-radius:0 0 .7em .7em;width:9em;height:.55em;position:absolute;top:0;left:calc(50% - 4.5em);box-shadow:inset 0 .1em .15em #03071a99}.dv-tablet .dv-side-button{background:linear-gradient(180deg, var(--color-night-700), var(--color-night-800) 45%, var(--color-night-600));height:.42em;top:-.2em}.dv-tablet .dv-power-button{width:3.4em;right:3.6em}.dv-tablet .dv-volume-button{width:5.8em;right:8.4em}.dv-tablet .dv-frame{border-radius:2.6em;inset:0}.dv-tablet .dv-bezel{border-radius:2.45em}.dv-tablet .dv-screen{clip-path:inset(0 round 1.25em);border-radius:1.25em;inset:1.3em}.dv-tablet .dv-camera{width:.46em;height:.46em;top:.42em;left:calc(50% - .23em)}.dv-monitor .dv-frame{border-radius:.9em;width:49.6em;height:29.4em;top:0;left:0}.dv-monitor .dv-bezel{border-radius:.75em}.dv-monitor .dv-screen{clip-path:inset(0 round .2em);border-radius:.2em;width:48em;height:27em;top:.8em;left:.8em}.dv-power-light{background:var(--color-night-accent);opacity:.7;border-radius:50%;width:.36em;height:.36em;position:absolute;bottom:.62em;right:2.4em}.dv-neck{background:linear-gradient(90deg, var(--color-night-800), var(--color-night-600) 35%, var(--color-night-700) 70%, var(--color-night-900));border-radius:.3em;width:7.2em;height:7.2em;position:absolute;top:27.6em;left:calc(50% - 3.6em)}.dv-foot{background:linear-gradient(180deg, var(--color-night-600) 0%, var(--color-night-700) 35%, var(--color-night-800) 75%, var(--color-night-900) 100%);width:19em;height:1.8em;box-shadow:inset 0 .07em 0 #ffffff3d, var(--dv-shadow);border-radius:.5em .5em 1em 1em/.5em .5em .9em .9em;position:absolute;bottom:0;left:calc(50% - 9.5em)}
.demo-wrap{--dh:37.5rem;flex:none;position:relative}.demo-stage{--loop:15s;--dv-shadow:0 2.4em 3.6em -1.8em #0c163880, 0 .9em 1.6em -.8em #0c163852;text-align:start;-webkit-user-select:none;user-select:none;flex:none;font-weight:500;line-height:1.25;position:relative}html:not([data-scheme=light]) .demo-stage{--dv-shadow:0 0 0 .07em #a3b2ff47, 0 2.4em 4em -1.4em #000000bf, 0 0 6em -1.4em #6d57ff80}.demo-phone>.demo-stage{width:19.6em;height:40em;font-size:calc(var(--dh) / 40)}.demo-laptop>.demo-stage{width:56em;height:34.4em;font-size:calc(var(--dh) / 34.4)}.demo-tablet>.demo-stage{width:42.6em;height:30.6em;font-size:calc(var(--dh) / 30.6)}.demo-monitor>.demo-stage{width:49.6em;height:36.4em;font-size:calc(var(--dh) / 36.4)}.demo-laptop{--dv-hw:.6143}.demo-tablet{--dv-hw:.7183}.demo-monitor{--dv-hw:.7339}.demo-phone.demo-size-hero{--dh:min(40rem, max(24rem, 100svh - 19.5rem), 125vw)}.demo-landscape.demo-size-hero{--dh:min(30rem, 100cqh, (100cqw - 2.5rem) * var(--dv-hw))}.demo-phone.demo-size-card{--dh:min(16rem, (100cqw - 3rem) * 2)}.demo-landscape.demo-size-card{--dh:min(16rem, (100cqw - 1.5rem) * var(--dv-hw))}.demo-laptop.demo-size-card{--dh:min(16rem, (100cqw - .5rem) * var(--dv-hw))}@media (min-width:48rem){.demo-phone.demo-size-card{--dh:min(22rem, (100cqw - 3rem) * 2)}.demo-landscape.demo-size-card{--dh:min(22rem, (100cqw - 1.5rem) * var(--dv-hw))}.demo-laptop.demo-size-card{--dh:min(22rem, (100cqw - .5rem) * var(--dv-hw))}}@media (min-width:64rem){.demo-size-stop{margin-block-end:0}.demo-phone.demo-size-stop{--dh:min(37.5rem, 64svh, (100cqw - 3rem) * 2)}.demo-landscape.demo-size-stop{--dh:min(30rem, 64svh, (100cqw - 1.5rem) * var(--dv-hw))}.demo-laptop.demo-size-stop{--dh:min(30rem, 64svh, (100cqw - .5rem) * var(--dv-hw))}@container demo-slot (max-width:6rem){.demo-phone.demo-size-stop{display:none}}@container demo-slot (max-width:18rem){.demo-landscape.demo-size-stop{display:none}}}.demo-tap{z-index:4;opacity:0;pointer-events:none;width:2.8em;height:2.8em;animation:demo-tap var(--loop) linear var(--tap-at,0s) infinite both;background:#0c163847;border:.15em solid #fffffff2;border-radius:50%;margin:-1.4em 0 0 -1.4em;position:absolute;top:50%;left:50%;box-shadow:0 .25em .8em #0c16384d}.demo-tap:after{content:"";opacity:0;animation:demo-tap-ripple var(--loop) linear var(--tap-at,0s) infinite both;border:.14em solid #ffffffe6;border-radius:50%;position:absolute;inset:-.13em;box-shadow:0 0 0 .1em #0c163833}.demo-cursor{z-index:4;filter:drop-shadow(0 .12em .2em #0c163859);pointer-events:none;width:1.2em;height:1.5em;margin:-.075em 0 0 -.075em;position:absolute;top:0;left:0}.demo-cursor svg{width:100%;height:100%;display:block}@media (prefers-reduced-motion:reduce){.demo-stage *,.demo-stage :before,.demo-stage :after{animation:none!important}}html[data-motion=off] .demo-stage *,html[data-motion=off] .demo-stage :before,html[data-motion=off] .demo-stage :after{animation:none!important}.demo-pause{--badge:clamp(1.5rem, var(--dh) * .075, 2.75rem);--badge-right:calc(var(--badge) * -.4);--badge-bottom:calc(var(--dh) * .08);z-index:1;border-radius:calc(var(--dh) / 40 * 3.1);cursor:pointer;-webkit-tap-highlight-color:transparent;position:absolute;inset:0}.demo-laptop>.demo-pause{--badge:clamp(1.5rem, var(--dh) * .13, 2.75rem);--badge-right:calc(var(--dh) / 34.4 * 3 - var(--badge) * .4);--badge-bottom:calc(var(--dh) * .12);border-radius:calc(var(--dh) / 34.4 * 1.6)}.demo-tablet>.demo-pause{--badge:clamp(1.5rem, var(--dh) * .11, 2.75rem);--badge-bottom:calc(var(--dh) * .1);border-radius:calc(var(--dh) / 30.6 * 2.6)}.demo-monitor>.demo-pause{--badge:clamp(1.5rem, var(--dh) * .11, 2.75rem);--badge-bottom:calc(var(--dh) * .27);border-radius:calc(var(--dh) / 36.4 * .9)}.demo-pause:has(.demo-pause-input:focus-visible){outline:2px solid var(--focus-ring,var(--color-cobalt));outline-offset:3px}.demo-pause-input,.demo-pause-text{white-space:nowrap;clip-path:inset(50%);border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.demo-pause-input{right:calc(var(--badge-right) + var(--badge) / 2);bottom:calc(var(--badge-bottom) + var(--badge) / 2);scroll-margin-block:calc(var(--dh) - var(--badge-bottom)) calc(var(--badge-bottom) + 1rem)}.demo-pause-badge{right:var(--badge-right);bottom:var(--badge-bottom);width:var(--badge);height:var(--badge);border:1px solid var(--color-hairline);background:var(--color-white);color:var(--color-cobalt);border-radius:50%;place-items:center;transition:background-color .2s ease-out,border-color .2s ease-out,color .2s ease-out;display:grid;position:absolute;box-shadow:0 .4rem 1rem -.4rem #0c16388c}.demo-pause:hover .demo-pause-badge{border-color:var(--color-cobalt);background:var(--color-cobalt);color:var(--color-white)}.demo-pause-icon{fill:currentColor;width:44%;height:44%;display:block}.demo-pause-icon-play{display:none;translate:6%}.demo-pause-input:checked~.demo-pause-badge .demo-pause-icon-pause{display:none}.demo-pause-input:checked~.demo-pause-badge .demo-pause-icon-play{display:block}.demo-wrap:has(.demo-pause-input:checked) .demo-stage *{animation-play-state:paused!important}.demo-wrap:has(.demo-pause-input:checked) .demo-stage :before{animation-play-state:paused!important}.demo-wrap:has(.demo-pause-input:checked) .demo-stage :after{animation-play-state:paused!important}@media (prefers-reduced-motion:reduce){.demo-pause{display:none}.demo-pause-badge{transition:none}}html[data-motion=off] .demo-pause{display:none}@keyframes demo-tap{0%{opacity:0;animation-timing-function:cubic-bezier(.2,.8,.2,1);transform:scale(1.6)}1.33%{opacity:1;transform:scale(1)}2.33%{opacity:1;animation-timing-function:ease-out;transform:scale(.82)}3.67%,to{opacity:0;transform:scale(1.1)}}@keyframes demo-tap-ripple{0%,2.2%{opacity:0;transform:scale(.9)}2.4%{opacity:.9;animation-timing-function:cubic-bezier(.2,.8,.2,1);transform:scale(1)}5.33%,to{opacity:0;transform:scale(2.3)}}