.demo-shell{max-width:1280px;padding:0 40px;margin:auto}.demo-intro{display:grid;grid-template-columns:1.3fr 1fr;gap:60px;align-items:end;padding:40px 0}.demo-intro h1{font-size:clamp(32px,4vw,52px);margin-top:16px}.demo-intro>p{color:var(--muted);max-width:450px}.live-demo{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#fff}.live-demo-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 24px;border-bottom:1px solid var(--line);font-weight:600}.live-demo-heading small{margin-left:12px;font-size:10px;color:var(--muted);letter-spacing:1px;white-space:nowrap}.demo-stage{position:relative;min-height:440px;aspect-ratio:16/9;background:#f1f4ee}.demo-stage>img{width:100%;height:100%;position:absolute;inset:0;object-fit:contain}.demo-launch{position:absolute;inset:auto 0 24px;text-align:center;display:grid;justify-items:center;gap:8px}.demo-launch .button{min-height:52px;padding:13px 28px;font:600 16px 'Segoe UI',sans-serif;cursor:pointer;box-shadow:0 5px 24px #28473726}.demo-launch .button:focus-visible{outline:3px solid #ab743b;outline-offset:4px}.demo-launch p{font-size:12px;background:#fffffff2;border-radius:6px;padding:3px 10px;color:#43594b}.demo-status{font-size:13px;color:var(--muted);padding:14px 24px;border-top:1px solid var(--line)}.demo-explore{margin:64px 0 32px}.demo-explore h2{margin-top:12px}.demo-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-top:30px}.demo-steps span{font-size:11px;letter-spacing:1px;color:var(--green)}.demo-steps h3{margin:12px 0}.demo-steps p,.demo-notes p{color:var(--muted);font-size:15px}.demo-gallery{display:grid;grid-template-columns:1fr 1fr;gap:24px}.demo-gallery figure{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}.demo-gallery img{display:block;width:100%;height:auto}.demo-gallery figcaption{padding:16px 20px;font-size:14px}.demo-notes{max-width:860px;padding:48px 0}.demo-notes p{margin-top:20px}.demo-links{display:flex;flex-wrap:wrap;gap:12px 24px;margin-top:16px}.demo-links a{display:inline-flex;align-items:center;min-height:44px}.article-figure{margin:24px 0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:white}.article-figure img{display:block;width:100%;height:auto}.article-figure figcaption{padding:14px 18px;font-size:13px;color:var(--muted)}
@media(max-width:900px){.demo-shell{padding:0 24px}.demo-intro{grid-template-columns:1fr;gap:20px}.demo-intro>p{max-width:650px}.demo-steps{gap:20px}.demo-stage{min-height:400px}.demo-gallery{gap:16px}}
@media(max-width:600px){.demo-shell{padding:0 16px}.demo-intro{padding:28px 0}.demo-intro h1{font-size:34px}.demo-steps,.demo-gallery{grid-template-columns:1fr}.demo-steps{gap:28px}.demo-explore{margin-top:40px}.live-demo-heading{padding:14px;align-items:flex-start;flex-direction:column}.live-demo-heading .button{width:100%}.demo-stage{min-height:370px}.demo-stage>img{padding-bottom:64px}.demo-status{padding:14px}.demo-gallery figcaption{padding:14px}.demo-notes{padding:32px 0}.demo-links{gap:8px 20px}.finish .demo-links,.finish .demo-links .button{width:100%}}
.demo-stage{width:100%}