[data-recipe=es-device-showcase]{background:radial-gradient(ellipse 60% 50% at 80% 10%,rgba(122,79,224,.14),transparent 70%),radial-gradient(ellipse 55% 55% at 10% 90%,rgba(32,160,255,.14),transparent 70%),#fff!important}
.ds-pills{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:34px 0 28px}
.ds-pill{font:inherit;font-size:17px;min-height:44px;padding:8px 22px;border-radius:999px;border:1.5px solid #cfd6ea;background:#fff;color:#2d3140;cursor:pointer;transition:background .25s ease,color .25s ease,border-color .25s ease,box-shadow .25s ease}
.ds-pill:hover{border-color:#2F6BFF;box-shadow:0 6px 16px -8px rgba(47,107,255,.6)}
.ds-pill[aria-selected=true]{background:linear-gradient(135deg,#2F6BFF,#7A4FE0);border-color:transparent;color:#fff}
.ds-stage{position:relative;width:100%;max-width:980px;margin:0 auto;aspect-ratio:980/580}
.ds-pane{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .7s ease}
.ds-pane.on{opacity:1;pointer-events:auto}
.ds-laptop{position:absolute;left:0;top:0;width:82%}
.ds-lid{border-radius:16px 16px 4px 4px;background:#16171b;padding:2.2% 2.2% 2.6%;box-shadow:0 30px 60px -28px rgba(20,24,60,.55)}
.ds-scr{aspect-ratio:16/10;border-radius:5px;background:#fff;overflow-y:auto}
.ds-base{height:16px;margin:0 -4%;border-radius:0 0 22px 22px;background:linear-gradient(#d9dce4,#b9bdc9);box-shadow:0 14px 24px -14px rgba(20,24,60,.5)}
.ds-phone{position:absolute;right:1%;bottom:0;width:21%;border-radius:26px;background:#101114;padding:2.4%;box-shadow:0 26px 48px -18px rgba(20,24,60,.6)}
.ds-pscr{aspect-ratio:9/19;border-radius:20px;background:#fff;overflow-y:auto}
.ds-scr a,.ds-pscr a{display:block;cursor:pointer}.ds-scr img,.ds-pscr img{display:block;width:100%;height:auto}
.ds-note{display:grid;margin:30px auto 0;max-width:640px;text-align:center}.ds-note p{grid-area:1/1;margin:0;font-size:20px;line-height:1.45;color:#2d3140;opacity:0;transition:opacity .6s ease}.ds-note p.on{opacity:1}
.ds-hint{text-align:center;margin:16px 0 0;font-size:15px;color:var(--grey)}
@media(max-width:700px){.ds-stage{aspect-ratio:980/700}.ds-laptop{width:88%}.ds-phone{width:30%;border-radius:18px}.ds-pscr{border-radius:13px}.ds-pill{padding:6px 16px}.ds-note p{font-size:18px}}
@media(prefers-reduced-motion:reduce){.ds-pane,.ds-note p{transition:none}}