@layer components{.dm{--dm-seconds:7s;--dm-shift:0px;--dm-bezel:color-mix(in oklch, var(--foreground) 86%, var(--card));width:100%;margin-inline:auto}.dm[data-device=phone]{max-width:17rem}.dm[data-device=browser]{max-width:46rem}.dm[data-device=laptop]{max-width:42rem}.dm-body{background:var(--card);flex-direction:column;display:flex;position:relative;overflow:hidden}.dm[data-device=phone] .dm-body{aspect-ratio:9/18.5;border:1px solid var(--border);background:var(--dm-bezel);box-shadow:0 12px 32px color-mix(in oklch, var(--foreground) 18%, transparent);border-radius:2.5rem;padding:.6rem}.dm[data-device=browser] .dm-body{aspect-ratio:16/10;border:1px solid var(--border);border-radius:calc(var(--radius,.625rem) + 4px);box-shadow:0 12px 32px color-mix(in oklch, var(--foreground) 14%, transparent)}.dm[data-device=laptop] .dm-body{aspect-ratio:16/10.4;border:1px solid var(--border);background:var(--dm-bezel);border-radius:.9rem .9rem 0 0;padding:.7rem .7rem .55rem}.dm-screen{background:var(--background);min-height:0;color:var(--foreground);flex:1;position:relative;overflow:hidden;container-type:inline-size}.dm[data-device=phone] .dm-screen{border-radius:2rem}.dm[data-device=laptop] .dm-screen{border-radius:.35rem}.dm[data-play=true] .dm-scroll{animation:dm-scroll var(--dm-seconds) cubic-bezier(.45, 0, .25, 1) forwards}@keyframes dm-scroll{to{transform:translateY(var(--dm-shift))}}.dm-notch{z-index:2;background:var(--dm-bezel);border-radius:9999px;width:28%;height:1.1rem;position:absolute;top:.95rem;left:50%;translate:-50%}.dm-bar{border-bottom:1px solid var(--border);background:var(--muted);align-items:center;gap:.75rem;padding:.5rem .75rem;display:flex}.dm-dots{gap:.35rem;display:inline-flex}.dm-dots i{background:color-mix(in oklch, var(--foreground) 30%, var(--muted));border-radius:9999px;width:.6rem;height:.6rem}.dm-url{background:var(--background);min-width:0;color:var(--foreground);text-overflow:ellipsis;white-space:nowrap;border-radius:9999px;flex:1;padding:.15rem .75rem;font-size:.7rem;line-height:1.1rem;overflow:hidden}.dm-base{background:color-mix(in oklch, var(--dm-bezel) 78%, var(--card));height:.85rem;box-shadow:0 10px 24px color-mix(in oklch, var(--foreground) 16%, transparent);border-radius:0 0 1.1rem 1.1rem;margin-inline:-3%;position:relative}.dm-base span{background:color-mix(in oklch, var(--dm-bezel) 60%, var(--card));border-radius:0 0 .5rem .5rem;width:18%;height:.35rem;position:absolute;top:0;left:50%;translate:-50%}.dm-ui{flex-direction:column;gap:3cqw;padding:4cqw;font-size:clamp(.5rem,3.3cqw,.9rem);line-height:1.35;display:flex}.dm-ui-head{align-items:center;gap:2cqw;display:flex}.dm-ui-logo{background:var(--primary);border-radius:30%;width:6cqw;height:6cqw}.dm-ui-title{font-weight:600}.dm-ui-tiles{grid-template-columns:repeat(3,1fr);gap:2.5cqw;display:grid}.dm-ui-tile{border:1px solid var(--border);background:var(--card);color:var(--card-foreground);border-radius:2.5cqw;flex-direction:column;gap:.5cqw;padding:2.5cqw;display:flex}.dm-ui-label{color:var(--muted-foreground);font-size:.85em}.dm-ui-value{font-variant-numeric:tabular-nums;font-size:1.25em;font-weight:700}.dm-ui-chart{background:color-mix(in oklch, var(--primary) 8%, var(--card));border-radius:2.5cqw;align-items:flex-end;gap:2cqw;height:24cqw;padding:2.5cqw;display:flex}.dm-ui-chart span{background:var(--primary);border-radius:1cqw 1cqw 0 0;flex:1}.dm-ui-list{flex-direction:column;gap:2cqw;margin:0;padding:0;list-style:none;display:flex}.dm-ui-list li{border:1px solid var(--border);background:var(--card);color:var(--card-foreground);border-radius:2.5cqw;align-items:center;gap:2.5cqw;padding:2.5cqw;display:flex}.dm-ui-dot{background:var(--border);border-radius:9999px;width:2.4cqw;height:2.4cqw}.dm-ui-dot[data-on=true]{background:var(--primary)}.dm[data-motion-mode=none] .dm-scroll{animation:none}@media (prefers-reduced-motion:reduce){.dm .dm-scroll{animation:none}}}