.demo-video .sap-frame__media{aspect-ratio:auto;background:var(--sap-bg)}.demo-video .sap-frame__media video{background-image:var(--poster);background-position:50%;background-size:cover;height:auto}.demo-video .demo-video__desktop{aspect-ratio:16/9}.demo-video .demo-video__mobile{aspect-ratio:4/5;max-height:75vh;margin:0 auto;display:none}.demo-video .sap-frame__cap .sap-link{font:inherit}@media (max-width:767px){.demo-video .demo-video__desktop{display:none}.demo-video .demo-video__mobile{display:block}}.demo-panel{flex-direction:column;display:flex}.demo-frame{background:var(--sap-bg);border:0;width:100%;min-height:400px;display:block}.demo-panel .sap-window__foot{align-items:center}.demo-panel__actions{flex-wrap:wrap;align-items:center;gap:4px 20px;display:flex}.demo-panel__actions .sap-link{font-family:var(--sap-font-body);font-size:14px}.demo-reset{cursor:pointer;min-height:44px;font:600 14px/1 var(--sap-font-body);color:var(--sap-text);text-underline-offset:5px;background:0 0;border:0;padding:0;text-decoration:underline;text-decoration-thickness:1px}.demo-reset:hover{color:var(--sap-accent)}.demo-reset:focus-visible{outline:2px solid var(--sap-accent);outline-offset:4px}.demo-fallback{border-top:var(--sap-border);margin:0;padding:16px;font-size:15px}.demo-featured{margin-bottom:var(--sap-section-y)}.demo-featured .sap-frame{grid-template-rows:auto 1fr;grid-template-columns:minmax(0,7fr) minmax(0,5fr);display:grid}.demo-featured .sap-window__bar{grid-column:1/-1}.demo-featured .sap-frame__media{border-bottom:0;border-right:var(--sap-border)}.demo-featured .sap-frame__body{justify-content:center;gap:12px;padding:28px}.demo-featured .sap-frame__body h2.demo-featured__h{font-family:var(--sap-font-display);letter-spacing:var(--sap-track-display);font-size:32px;font-weight:400;line-height:1.15}.demo-steps{flex-wrap:wrap;gap:4px 18px;padding:0;list-style:none;display:flex}.demo-featured .sap-ctas{align-items:center;gap:12px 24px;margin-top:8px}.demo-card.demo-featured{margin-bottom:0}.demo-k{font:12.5px/1.5 var(--sap-font-mono);color:var(--sap-text-muted);margin:0}.demo-k b{color:var(--sap-text);font-weight:400}.demo-filters{border-top:var(--sap-border);border-bottom:var(--sap-border);grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;align-items:end;gap:20px 24px;margin:0;padding:24px 0;display:grid}.demo-filters__actions{align-items:center;gap:20px;display:flex}.demo-filters__reset{cursor:pointer;min-height:44px;font:600 15px/1 var(--sap-font-body);color:var(--sap-text);text-underline-offset:5px;background:0 0;border:0;padding:0;text-decoration:underline;text-decoration-thickness:1px}.demo-filters__reset:hover{color:var(--sap-accent)}.demo-filters__reset:focus-visible{outline:2px solid var(--sap-accent);outline-offset:4px}.demo-status{font:12.5px/1.5 var(--sap-font-mono);color:var(--sap-text-muted);margin:18px 0 24px}.demo-gallery>article{min-width:0;display:flex}.demo-gallery>article>.sap-frame{flex:1}.demo-empty{border-bottom:var(--sap-border);padding:48px 0}.demo-empty h3{font-size:var(--sap-fs-h3);letter-spacing:var(--sap-track-h3);margin:0;font-weight:600}.demo-empty p{color:var(--sap-text-muted);margin:8px 0 0}.demo-closing{color:var(--sap-text-muted);margin:32px 0 0;font-size:14px}.demo-crumbs{margin:0 0 32px}.demo-section+.demo-section{padding-top:0}.demo-does{margin-top:var(--sap-section-y)}.demo-does>h2{margin:0 0 24px}.demo-notes{max-width:68ch}.demo-notes .demo-intro{margin:0 0 20px;font-size:18px;line-height:1.6}.demo-notes .demo-muted{color:var(--sap-text-muted);margin:0 0 28px;font-size:14px}.demo-article-body{max-width:68ch;color:var(--sap-text-muted)}.demo-article-body h2{font-family:var(--sap-font-display);letter-spacing:var(--sap-track-display);color:var(--sap-text);margin:0;padding-top:28px;font-size:32px;font-weight:400;line-height:1.15}.demo-article-body strong{color:var(--sap-text);font-weight:600}.demo-article-body a{color:var(--sap-text);text-underline-offset:4px;text-decoration:underline;text-decoration-thickness:1px}.demo-article-body a:hover{color:var(--sap-accent)}.demo-article-body [role=region]{border:0;border-top:var(--sap-border-strong);border-radius:0}.demo-article-body table{border-collapse:collapse;font-size:15px}.demo-article-body thead{background:0 0}.demo-article-body thead th{font:400 12.5px/1.4 var(--sap-font-mono);color:var(--sap-text-muted);border-bottom:var(--sap-border-strong)}.demo-article-body tbody tr{border-top:0;border-bottom:var(--sap-border)}.demo-article-body tbody th{color:var(--sap-text)}.demo-article-body tbody td{font:13px var(--sap-font-mono);font-variant-numeric:tabular-nums;color:var(--sap-text)}@media (max-width:860px){.demo-featured .sap-frame{display:flex}.demo-featured .sap-frame__media{border-right:0;border-bottom:var(--sap-border)}.demo-featured .sap-frame__body{padding:18px 16px 20px}.demo-filters{grid-template-columns:1fr}.demo-featured .sap-frame__body h2.demo-featured__h{font-size:26px}}