.dp-slot{justify-content:center;align-items:center;min-height:0;display:flex;container-type:size}.dp{--u:calc(100cqw / 412);--dp-top:#fff;--dp-fg:#0c1f17;aspect-ratio:412/924;background:linear-gradient(135deg,#a9adb2 0%,#5a5e63 7%,#34373b 22%,#2a2c30 50%,#36393d 78%,#62666b 93%,#b4b8bd 100%);border-radius:13.35%/5.95%;flex-shrink:0;width:min(100cqw,44.5887cqh,360px);position:relative;box-shadow:0 34px 60px -30px #08141e8c,0 12px 22px -14px #08141e59,0 2px 5px #08141e29;container-type:inline-size}.dp[data-dark]{--dp-top:#131215;--dp-fg:#f4f4f5}.dp:before{content:"";inset:calc(var(--u) * 3.6);border-radius:calc(var(--u) * 51.4);box-shadow:inset 0 0 0 calc(var(--u) * .9) #ffffff12, 0 0 0 calc(var(--u) * .7) #0000008c;pointer-events:none;background:#050707;position:absolute}.dp:after{content:"";left:calc(var(--u) * -3.3);top:calc(var(--u) * 168);width:calc(var(--u) * 3.8);height:calc(var(--u) * 30);border-radius:calc(var(--u) * 2);box-shadow:0 calc(var(--u) * 52) 0 #4c5054, 0 calc(var(--u) * 76) 0 #4c5054, 0 calc(var(--u) * 124) 0 #4c5054, 0 calc(var(--u) * 148) 0 #4c5054, calc(var(--u) * 414.6) calc(var(--u) * 86) 0 #44474b, calc(var(--u) * 414.6) calc(var(--u) * 112) 0 #44474b, calc(var(--u) * 414.6) calc(var(--u) * 138) 0 #44474b, calc(var(--u) * 414.6) calc(var(--u) * 158) 0 #44474b;pointer-events:none;background:linear-gradient(90deg,#9ea2a7,#44474b 70%);position:absolute}.dp-screen{inset:calc(var(--u) * 11);border-radius:calc(var(--u) * 44);background:var(--dp-top);isolation:isolate;position:absolute;overflow:hidden}.dp-bar{z-index:3;height:calc(var(--u) * 40);padding:calc(var(--u) * 3) calc(var(--u) * 26) 0 calc(var(--u) * 32);background:var(--dp-top);color:var(--dp-fg);font-size:calc(var(--u) * 15);letter-spacing:-.01em;font-variant-numeric:tabular-nums;justify-content:space-between;align-items:center;font-weight:600;line-height:1;display:flex;position:absolute;top:0;left:0;right:0}.dp-isle{left:50%;top:calc(var(--u) * 9);width:calc(var(--u) * 84);height:calc(var(--u) * 23);margin-left:calc(var(--u) * -42);border-radius:calc(var(--u) * 12);background:#000;position:absolute}.dp-ico{align-items:center;gap:calc(var(--u) * 5);display:flex}.dp-ico svg{height:calc(var(--u) * 11);fill:currentColor;width:auto;display:block}.dp-view{left:0;right:0;top:calc(var(--u) * 40);position:absolute;bottom:0;overflow:hidden}.dp-home{z-index:3;left:50%;bottom:calc(var(--u) * 7);width:calc(var(--u) * 126);height:calc(var(--u) * 4.5);margin-left:calc(var(--u) * -63);border-radius:calc(var(--u) * 3);background:var(--dp-fg);opacity:.85;pointer-events:none;position:absolute}.dp-canvas{transform-origin:0 0;position:absolute;top:0;left:0;overflow:hidden}.dp-canvas .min-h-screen{min-height:var(--dp-h)}.dp-canvas .animate-sheet-up{max-height:calc(var(--dp-h) * .85)!important}@keyframes demo-fill{0%{transform:scaleX(0)}to{transform:scaleX(1)}}@media (prefers-color-scheme:light){html:has(.demo-journey){background:#fff}html:has(.demo-journey) body{background:#fff}}@keyframes demo-notice{0%{opacity:0;transform:translateY(-130%)}to{opacity:1;transform:translateY(0)}}@keyframes demo-row-in{0%{opacity:0;transform:translate(-12%)}to{opacity:1;transform:translate(0)}}.dp-canvas .dp-fill{min-height:var(--dp-h)}@keyframes demo-guide{0%,to{transform:translateY(6px)}50%{transform:translateY(-4px)}}