/* Designer source-to-website example. Only this module is affected. */
.ds-demo{margin-top:1px;scroll-margin-top:95px}.ds-demo *{box-sizing:border-box}.ds-demo .ds-demo-intro{display:grid;grid-template-columns:13fr 11fr;gap:40px;padding:32px 36px;background:var(--sp-paper);border-radius:5px}.ds-demo .ds-demo-intro .sp-label{margin-bottom:14px}.ds-demo .ds-demo-intro h2{font-size:clamp(30px,3vw,42px);line-height:1.1}.ds-demo .ds-demo-intro>p{align-self:center;font-size:14px;line-height:1.6;max-width:460px}.ds-demo .ds-demo-grid{display:grid;grid-template-columns:minmax(0,13fr) minmax(0,11fr);gap:1px;margin-top:1px}.ds-demo .ds-source-panel,.ds-demo .ds-result-panel{min-width:0;background:var(--sp-paper);padding:32px;border-radius:5px}.ds-demo .sp-label{margin:0 0 18px;color:#263fe5}.ds-demo .ds-select-label{display:block;font:11px/1.5 'Courier New',monospace;margin-bottom:10px}.ds-demo select{display:block;width:100%;font:14px/1.4 Arial,sans-serif;color:#20211f;background:#fcfaf4;border:1px solid #20211f35;border-radius:3px;padding:14px 52px 14px 14px;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%2320211f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 18px center;background-size:12px 8px}.ds-demo .ds-source-visual{margin:24px 0 14px}.ds-demo .ds-source-view[hidden]{display:none}.ds-demo .ds-source-view svg{display:block;width:100%;height:430px}.ds-demo .ds-source-caption{font-size:12px;line-height:1.6;min-height:3.2em;color:#666861;margin-bottom:24px}.ds-demo .ds-brief{border-top:1px solid #20211f28;padding-top:24px}.ds-demo .ds-brief .sp-label{margin-bottom:14px}.ds-demo #ds-brief-text{white-space:pre-line;font-size:13px;line-height:1.65}.ds-demo .ds-copy{border:0;border-bottom:1px solid #263fe5;padding:8px 0;margin-top:18px;background:none;color:#263fe5;font:12px/1.5 Arial,sans-serif;cursor:pointer}.ds-demo .ds-copy-status{display:block;min-height:36px;font:11px/1.5 Arial,sans-serif;color:#263fe5;margin-top:8px}.ds-demo .ds-process{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;padding:1px;background:#20211f35;border-radius:3px;margin-bottom:32px}.ds-demo .ds-process span{display:flex;align-items:center;justify-content:center;padding:14px 8px;background:var(--sp-paper);font:12px/1.4 Arial,sans-serif;text-align:center;min-height:52px}.ds-demo h3{font-size:28px;font-weight:400;line-height:1.2;letter-spacing:-.03em;margin-bottom:22px}.ds-demo .ds-full-preview{display:block;color:inherit}.ds-demo .ds-final-image{display:block;width:100%;height:560px;object-fit:contain;border:0}.ds-demo .ds-result-caption{font-size:11px;line-height:1.6;color:#666861;margin:18px 0 26px}.ds-demo .ds-result-notes{border-top:1px solid #20211f28;padding-top:22px}.ds-demo .ds-result-notes p{font-size:14px;line-height:1.65}.ds-demo .ds-result-notes p+p{margin-top:18px}.ds-demo .ds-result-notes strong{font-weight:400;color:#263fe5}.ds-demo .sp-text-link{display:inline-block;margin-top:24px}.ds-demo :is(select,button,a):focus-visible{outline:2px solid #263fe5;outline-offset:4px}
@media(max-width:1050px){.ds-demo .ds-source-panel,.ds-demo .ds-result-panel{padding:26px}.ds-demo .ds-demo-intro{padding:28px 26px;gap:28px}.ds-demo .ds-process span{font-size:11px;padding:12px 6px}}
@media(max-width:760px){.ds-demo .ds-demo-intro,.ds-demo .ds-demo-grid{grid-template-columns:1fr}.ds-demo .ds-demo-intro{gap:18px;padding:25px}.ds-demo .ds-source-panel,.ds-demo .ds-result-panel{padding:25px}.ds-demo .ds-source-view svg{height:380px}.ds-demo .ds-final-image{height:480px}.ds-demo .ds-process{margin-bottom:26px}.ds-demo h3{font-size:26px}}

/* Continuous sketch carousel: duplicate one sequence, then wrap at the same position. */
.ds-demo .ds-carousel-track{animation:ds-carousel-wrap 28s linear infinite;will-change:transform}
@keyframes ds-carousel-wrap{from{transform:translateX(0)}to{transform:translateX(-1068px)}}
.ds-demo .ds-source-visual:hover .ds-carousel-track,.ds-demo .ds-source-visual[data-paused=true] .ds-carousel-track,.ds-demo .ds-source-view[hidden] .ds-carousel-track{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.ds-demo .ds-carousel-track{animation:none;will-change:auto}}

.ds-demo .ds-motion-toggle{display:inline-block;border:0;border-bottom:1px solid #263fe5;padding:4px 0;margin:0 0 14px;background:none;color:#263fe5;font:11px/1.5 Arial,sans-serif;cursor:pointer}.ds-demo .ds-motion-toggle[hidden]{display:none}@media(prefers-reduced-motion:reduce){.ds-demo .ds-motion-toggle{display:none}}