.device-scenes .ds-device{position:relative;inset:auto;width:100%;margin:0;min-width:0;transform:none}
.device-scenes .ds-device .device-template{width:100%}
.ds-ensemble{display:grid;grid-template-columns:1.35fr 1fr .48fr;gap:28px;align-items:end;padding:40px 0 12px}
.ds-platform{min-width:0;text-align:center}.ds-platform h3{font-size:19px;margin:25px 0 7px}.ds-platform p{font-size:14px;color:var(--muted);line-height:1.5;margin:0;min-height:42px}
.ds-chapter{margin-top:100px}.ds-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;margin-top:40px}
.ds-action{display:flex;flex-direction:column;min-width:0;padding:32px;border:1px solid #dce5f3;border-radius:28px;background:linear-gradient(145deg,#fff,#f1f6ff);overflow:hidden}
.ds-action h3{font-size:clamp(25px,2.5vw,34px);line-height:1.15;margin:12px 0}.ds-action-copy>p:last-child{color:var(--muted);line-height:1.65;margin:0}.ds-action-copy{min-height:205px}
.ds-import-visual{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:start;padding:24px 0 0;margin:auto 0 0}
.device-scenes .ds-import-mac{grid-column:1/13;grid-row:1;padding-top:18px}.ds-import-card{position:relative;grid-column:7/12;grid-row:1;margin-top:30%;z-index:2;transform:rotate(2deg)}
.ds-capture{display:block;width:100%;height:auto;border-radius:18px;box-shadow:0 20px 42px -18px #24436d55}.ds-import-card picture,.ds-share-visual picture{display:block}
.ds-share-visual{width:min(100%,350px);margin:auto auto 0;padding-top:28px}.ds-visual-caption{color:var(--muted);font-size:12px;line-height:1.5;text-align:center;margin:24px 0 0}
.ds-settings{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);align-items:center;gap:70px;margin-top:100px;padding:56px;border-radius:30px;background:#f3f6fc;border:1px solid #e0e7f2}
.ds-settings h2{font-size:clamp(32px,4vw,50px);line-height:1.08;margin:14px 0 26px}.ds-settings-controls{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0}.ds-settings-controls[hidden],.ds-settings-previews>[hidden]{display:none!important}
.ds-settings-controls button{font:inherit;font-size:14px;font-weight:650;min-height:46px;padding:10px 16px;border:1px solid #d0dcf0;border-radius:13px;background:#fff;color:var(--blue);cursor:pointer}.ds-settings-controls button[aria-pressed=true]{background:var(--blue);border-color:var(--blue);color:#fff}.ds-settings-controls button:focus-visible{outline:3px solid var(--blue);outline-offset:4px}
.ds-settings-explanation{min-height:128px}.ds-settings-explanation h3{margin:0 0 10px;font-size:20px}.ds-settings-explanation p,.ds-shortcuts p{color:var(--muted);line-height:1.65;margin:0}.ds-settings-previews{width:min(100%,260px);justify-self:center;min-width:0}
.ds-shortcuts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;border-top:1px solid #dce4ef;padding-top:24px;margin-top:20px}.ds-shortcuts h3{font-size:16px;margin:10px 0 8px}.ds-shortcuts p{font-size:13px}.ds-shortcuts span{color:var(--blue);font-size:26px;line-height:28px}.ds-shortcuts svg{width:26px;height:28px;stroke:var(--blue);stroke-width:1.7;fill:none;stroke-linecap:round}
@media(prefers-reduced-motion:no-preference){.ds-ensemble.is-visible .ds-platform{animation:ds-device-arrive .85s cubic-bezier(.2,.7,.2,1) both}.ds-ensemble.is-visible .ds-ipad{animation-delay:.12s}.ds-ensemble.is-visible .ds-iphone{animation-delay:.24s}.ds-action.is-visible .ds-import-card{animation:ds-import-arrive .9s cubic-bezier(.2,.7,.2,1) .2s both}.ds-action.is-visible .ds-share-visual{animation:ds-device-arrive .8s ease .2s both}}
@keyframes ds-device-arrive{from{opacity:0;translate:0 22px}to{opacity:1;translate:0 0}}
@keyframes ds-import-arrive{from{opacity:0;translate:14px -12px}to{opacity:1;translate:0 0}}
@media(max-width:1000px){.ds-ensemble{grid-template-columns:1.2fr 1fr .48fr;gap:18px}.ds-action{padding:24px}.ds-action-copy{min-height:240px}.ds-settings{gap:35px;padding:32px}.ds-shortcuts{gap:18px}}
@media(max-width:700px){.ds-ensemble{grid-template-columns:minmax(0,1.1fr) minmax(0,.65fr);gap:30px 24px;padding-top:20px}.ds-mac{grid-column:1/-1;width:min(100%,520px);justify-self:center}.ds-ipad{align-self:center}.ds-iphone{width:min(100%,155px);justify-self:center}.ds-platform h3{margin-top:18px}.ds-platform p{font-size:13px}.ds-actions{grid-template-columns:minmax(0,1fr);gap:22px}.ds-action-copy{min-height:0}.ds-import-visual{display:flex;flex-direction:column;align-items:center;gap:18px;margin-top:12px}.device-scenes .ds-import-mac{padding:0}.ds-import-card{width:min(62%,220px);margin:0;transform:none}.ds-share-visual{width:min(100%,330px)}.ds-settings{grid-template-columns:minmax(0,1fr);padding:28px 22px;gap:30px;margin-top:64px}.ds-settings-previews{width:min(68%,250px)}.ds-settings-explanation{min-height:125px}.ds-chapter{margin-top:64px}.ds-shortcuts{gap:20px}.ds-settings h2{font-size:34px}}
@media(max-width:380px){.ds-action{padding:22px 18px}.ds-settings-controls{gap:6px}.ds-settings-controls button{padding:10px 12px;font-size:13px}.ds-shortcuts{grid-template-columns:1fr}}

.device-scenes .ds-ipad .device-screen-slot img{object-fit:cover;object-position:center;transform:scale(1,1.03);transform-origin:center}
.device-scenes .ds-ipad .device-frame-stack::after{content:"";position:absolute;z-index:4;left:19%;top:-2.1%;width:62%;height:2.1%;border-radius:0 999px 999px 0;clip-path:polygon(0 50%,3% 10%,5% 0,99% 0,100% 20%,100% 80%,99% 100%,5% 100%,3% 90%);background:linear-gradient(90deg,#15191f 0%,#363d47 3%,transparent 3.2%,transparent 94%,#161c24 94.2%,#353d48 94.6%,#252c35 95%),linear-gradient(180deg,#636c79 0%,#414a57 18%,#292f39 48%,#1b2028 82%,#10151d 100%);box-shadow:inset 0 1px 0 rgba(204,218,238,.3),inset 0 -1px 0 #0c1018;pointer-events:none}
.ds-share-visual picture{filter:drop-shadow(0 14px 18px rgba(36,67,109,.16))}
.ds-share-visual .ds-capture{border-radius:0;box-shadow:none;clip-path:inset(1% 1.8% 3% 1.8% round 7%)}

.device-scenes .ds-ipad .device-frame-stack::before{content:"";position:absolute;z-index:3;left:23%;top:-.45%;width:54%;height:.8%;border-radius:999px;background:#8fbaff;box-shadow:0 0 9px 2px rgba(88,155,255,.28);opacity:0;pointer-events:none}
@media(prefers-reduced-motion:no-preference){
  .ds-ipad.pencil-waiting .device-frame-stack::after{opacity:0}
  .ds-ipad.pencil-attached .device-frame-stack::after{transform-origin:70% 50%;animation:ds-pencil-dock 1.35s .2s both}
  .ds-ipad.pencil-attached .device-frame-stack::before{animation:ds-pencil-magnet 1.35s .2s both}
}
@keyframes ds-pencil-dock{
  0%{opacity:0;transform:translate(7%,calc(-1 * clamp(54px,10vw,130px))) rotate(-12deg);animation-timing-function:cubic-bezier(.42,0,.74,.35)}
  12%{opacity:1}
  52%{opacity:1;transform:translate(1.5%,-180%) rotate(-3deg);animation-timing-function:cubic-bezier(.18,.7,.25,1)}
  65%{opacity:1;transform:translate(0,12%) rotate(.7deg)}
  76%{opacity:1;transform:translate(0,-28%) rotate(-.4deg)}
  88%,100%{opacity:1;transform:translate(0,0) rotate(0)}
}
@keyframes ds-pencil-magnet{0%,49%,100%{opacity:0;transform:scaleX(.8)}62%{opacity:.65;transform:scaleX(1)}83%{opacity:.12;transform:scaleX(.96)}}

.ds-actions{margin-top:64px}
.ds-action-copy{min-height:0}
.ds-import-visual{display:block;width:100%;padding:0;margin:32px auto 0}
.ds-import-card{width:min(70%,290px);margin:0 auto;transform:none;position:relative}
.ds-share-visual{position:relative;width:min(100%,360px);padding:0;margin:auto auto 0}
.ds-action-copy + .ds-share-visual{margin-top:32px;margin-bottom:auto}
.ds-import-card .ds-capture{border-radius:0;box-shadow:none}
.ds-import-card picture{filter:drop-shadow(0 14px 18px rgba(36,67,109,.13))}
.ds-window-demo{position:absolute;inset:0;pointer-events:none;visibility:hidden}
.ds-window-demo.is-ready{visibility:visible}
.ds-window-demo svg{width:100%;height:100%;overflow:visible;display:block}
.ds-window-demo text{font-family:-apple-system,BlinkMacSystemFont,"Inter",sans-serif}
.ds-code-field text,.ds-pin-field text{font-family:ui-monospace,monospace;fill:#32495e}
.ds-share-confirm text{fill:#06858e}
.ds-drop-ready,.ds-drop-add,.ds-drop-stack,.ds-drop-cursor,.ds-share-confirm{opacity:0}
.ds-drop-stack{transform-origin:380px 439px}
.ds-drop-zone{transform-origin:384px 492px}
.ds-code-value,.ds-pin-value{opacity:0;clip-path:inset(0 100% 0 0);transform-box:fill-box}
.ds-window-demo.is-ready.is-demo-visible .ds-drop-zone{animation:ds-drop-target 8s ease-in-out infinite both}
.ds-window-demo.is-ready.is-demo-visible .ds-drop-fill{animation:ds-drop-fill 8s ease-in-out infinite both}
.ds-window-demo.is-ready.is-demo-visible .ds-drop-border{animation:ds-drop-dashes 8s linear infinite both}
.ds-window-demo.is-ready.is-demo-visible .ds-drop-empty{animation:ds-drop-empty 8s ease-in-out infinite both}
.ds-window-demo.is-ready.is-demo-visible .ds-drop-stack{animation:ds-drop-deposit 8s cubic-bezier(.22,.7,.2,1) infinite both}
.ds-window-demo.is-ready.is-demo-visible .ds-drop-cursor{animation:ds-drop-cursor 8s ease infinite both}
.ds-window-demo.is-ready.is-demo-visible .ds-drop-ready,
.ds-window-demo.is-ready.is-demo-visible .ds-drop-add{animation:ds-drop-ready 8s ease-in-out infinite both}
.ds-window-demo.is-ready.is-demo-visible .ds-share-confirm{animation:ds-share-confirm 9s ease-in-out infinite both}
@keyframes ds-drop-target{0%,6%,35%,100%{transform:scale(1)}16%,23%{transform:scale(1.025)}28%{transform:scale(.995)}}
@keyframes ds-drop-fill{0%,7%,35%,100%{fill:#f5f5f5}16%,23%{fill:#e5f1ff}}
@keyframes ds-drop-dashes{0%,7%,85%,100%{stroke:#bbb;stroke-dashoffset:0}16%,23%{stroke:#1684ff;stroke-dashoffset:32}28%,80%{stroke:#86b9ff;stroke-dashoffset:48}}
@keyframes ds-drop-empty{0%,10%,100%{opacity:1}19%,89%{opacity:0}}
@keyframes ds-drop-deposit{0%,5%{opacity:0;transform:translate(230px,-160px) scale(.72) rotate(9deg)}12%{opacity:1;transform:translate(130px,-100px) scale(.82) rotate(5deg)}23%{opacity:1;transform:translate(0,0) scale(1.04) rotate(0)}30%,83%{opacity:1;transform:translate(0,0) scale(1) rotate(0)}93%,100%{opacity:0;transform:translate(0,0) scale(.92)}}
@keyframes ds-drop-cursor{0%,7%,32%,100%{opacity:0}12%,23%{opacity:1}27%{opacity:0;transform:translate(35px,25px)}}
@keyframes ds-drop-ready{0%,23%,94%,100%{opacity:0}30%,83%{opacity:1}}
@keyframes ds-share-confirm{0%,72%,100%{opacity:0;transform:translateY(5px)}78%,92%{opacity:1;transform:translateY(0)}}

.ds-window-demo.is-ready.is-demo-visible .ds-code-field-0 .ds-code-value{animation:ds-code-write-0 9s steps(1,end) infinite both}
.ds-window-demo.is-ready.is-demo-visible .ds-code-field-0 rect{animation:ds-code-focus-0 9s ease infinite both}
@keyframes ds-code-write-0{0%,10%{opacity:1;clip-path:inset(0 100% 0 0)}16%,94%{opacity:1;clip-path:inset(0)}99%,100%{opacity:0;clip-path:inset(0)}}
@keyframes ds-code-focus-0{0%,8%,20%,100%{stroke:#d2dce7}10%,16%{stroke:#40c7d5}}

.ds-window-demo.is-ready.is-demo-visible .ds-code-field-1 .ds-code-value{animation:ds-code-write-1 9s steps(2,end) infinite both}
.ds-window-demo.is-ready.is-demo-visible .ds-code-field-1 rect{animation:ds-code-focus-1 9s ease infinite both}
@keyframes ds-code-write-1{0%,20%{opacity:1;clip-path:inset(0 100% 0 0)}29%,94%{opacity:1;clip-path:inset(0)}99%,100%{opacity:0;clip-path:inset(0)}}
@keyframes ds-code-focus-1{0%,18%,33%,100%{stroke:#d2dce7}20%,29%{stroke:#40c7d5}}

.ds-window-demo.is-ready.is-demo-visible .ds-code-field-2 .ds-code-value{animation:ds-code-write-2 9s steps(1,end) infinite both}
.ds-window-demo.is-ready.is-demo-visible .ds-code-field-2 rect{animation:ds-code-focus-2 9s ease infinite both}
@keyframes ds-code-write-2{0%,33%{opacity:1;clip-path:inset(0 100% 0 0)}39%,94%{opacity:1;clip-path:inset(0)}99%,100%{opacity:0;clip-path:inset(0)}}
@keyframes ds-code-focus-2{0%,31%,43%,100%{stroke:#d2dce7}33%,39%{stroke:#40c7d5}}

.ds-window-demo.is-ready.is-demo-visible .ds-code-field-3 .ds-code-value{animation:ds-code-write-3 9s steps(1,end) infinite both}
.ds-window-demo.is-ready.is-demo-visible .ds-code-field-3 rect{animation:ds-code-focus-3 9s ease infinite both}
@keyframes ds-code-write-3{0%,43%{opacity:1;clip-path:inset(0 100% 0 0)}49%,94%{opacity:1;clip-path:inset(0)}99%,100%{opacity:0;clip-path:inset(0)}}
@keyframes ds-code-focus-3{0%,41%,53%,100%{stroke:#d2dce7}43%,49%{stroke:#40c7d5}}

.ds-window-demo.is-ready.is-demo-visible .ds-code-field-4 .ds-code-value{animation:ds-code-write-4 9s steps(1,end) infinite both}
.ds-window-demo.is-ready.is-demo-visible .ds-code-field-4 rect{animation:ds-code-focus-4 9s ease infinite both}
@keyframes ds-code-write-4{0%,53%{opacity:1;clip-path:inset(0 100% 0 0)}59%,94%{opacity:1;clip-path:inset(0)}99%,100%{opacity:0;clip-path:inset(0)}}
@keyframes ds-code-focus-4{0%,51%,63%,100%{stroke:#d2dce7}53%,59%{stroke:#40c7d5}}

.ds-window-demo.is-ready.is-demo-visible .ds-pin-value{animation:ds-pin-write 9s steps(4,end) infinite both}
.ds-window-demo.is-ready.is-demo-visible .ds-pin-field rect{animation:ds-pin-focus 9s ease infinite both}
@keyframes ds-pin-write{0%,62%{opacity:1;clip-path:inset(0 100% 0 0)}73%,94%{opacity:1;clip-path:inset(0)}99%,100%{opacity:0;clip-path:inset(0)}}
@keyframes ds-pin-focus{0%,59%,78%,100%{stroke:#d2dce7}63%,73%{stroke:#40c7d5}}
@media(max-width:1000px){.ds-action-copy{min-height:0}}
@media(max-width:700px){.ds-actions{margin-top:48px}.ds-import-visual{display:block;margin-top:28px}.ds-import-card{width:min(70%,280px);margin:0 auto}.ds-share-visual{width:min(100%,360px)}}
@media(prefers-reduced-motion:reduce){.ds-window-demo{display:none}.ds-action .ds-window-demo *{animation:none!important}}

.ds-settings-demo{position:absolute;inset:0;z-index:2;pointer-events:none;visibility:hidden}
.ds-settings-demo.is-ready{visibility:visible}
.ds-settings-demo > svg{display:block;width:100%;height:100%}
.ds-settings-demo text{font-family:-apple-system,BlinkMacSystemFont,"Inter",sans-serif;fill:#111;font-variant-numeric:tabular-nums}
.ds-setting-switch{transform-box:view-box}
.ds-settings-demo.is-ready.is-settings-visible .ds-switch-track{animation:ds-setting-track 14s var(--switch-delay) ease-in-out infinite both}
.ds-settings-demo.is-ready.is-settings-visible .ds-switch-thumb{animation:ds-setting-thumb 14s var(--switch-delay) cubic-bezier(.22,.75,.25,1) infinite both}
.ds-settings-demo.is-ready.is-settings-visible .ds-storage-bar{animation:ds-storage-reveal .78s .08s ease-out both}
@keyframes ds-setting-track{0%,6%,35%,100%{fill:var(--switch-blue)}10%,27%{fill:#c1c3c8}}
@keyframes ds-setting-thumb{0%,6%,35%,100%{transform:translateX(0)}10%,27%{transform:translateX(-49px)}}
@keyframes ds-storage-reveal{from{clip-path:inset(0 100% 0 0) fill-box}to{clip-path:inset(0) fill-box}}
@media(prefers-reduced-motion:reduce){.ds-settings-demo{display:none}.ds-settings-demo *{animation:none!important}}