.svg-editor-demo{margin:32px 0;padding:clamp(16px,3vw,32px);border:1px solid var(--border);border-radius:20px;background:var(--card);color:var(--card-foreground)}.svg-editor-demo__intro{max-width:720px;margin-bottom:20px}.svg-editor-demo__intro h2{margin:0 0 8px;font-size:clamp(22px,3vw,30px);font-weight:650;line-height:1.2}.svg-editor-demo__intro p,.svg-editor-demo__error output{margin:0;line-height:1.6}.svg-editor-demo__intro p,.svg-editor-demo__figure figcaption{color:var(--muted-foreground)}.svg-editor-demo__figure{margin:0}.svg-editor-demo__media{overflow:hidden;border:1px solid var(--border);border-radius:12px;background:var(--muted)}.svg-editor-demo__media video,.svg-editor-demo__media img{display:block;width:100%;max-height:640px;object-fit:contain}.svg-editor-demo__media video[hidden]{display:none}.svg-editor-demo__figure figcaption{margin-top:10px;font-size:13px;line-height:1.5}.svg-editor-demo__error{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:16px}.svg-editor-demo__error button{padding:8px 14px;border:1px solid var(--border);border-radius:8px;background:var(--background);color:var(--foreground);font:inherit;cursor:pointer}.svg-editor-demo__error button:focus-visible{outline:2px solid var(--ring);outline-offset:3px}.svg-editor-demo__transcript{margin-top:24px}.svg-editor-demo__transcript h3{margin:0 0 10px;font-size:15px;font-weight:600}.svg-editor-demo__transcript ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 32px;margin:0;padding-left:20px;font-size:14px;line-height:1.6}@media(max-width:640px){.svg-editor-demo__transcript ol{grid-template-columns:1fr}}.svg-editor-faq{margin:32px 0;padding:clamp(16px,3vw,32px);border:1px solid var(--border);border-radius:20px;background:var(--card);color:var(--card-foreground)}.svg-editor-faq h2{margin:0 0 16px;font-size:clamp(22px,3vw,30px);font-weight:650;line-height:1.2}.svg-editor-faq__list{display:grid;gap:10px}.svg-editor-faq details{border:1px solid var(--border);border-radius:14px;background:var(--background);padding:12px 16px}.svg-editor-faq summary{cursor:pointer;list-style:none}.svg-editor-faq summary::-webkit-details-marker{display:none}.svg-editor-faq summary:focus-visible{outline:2px solid var(--ring);outline-offset:3px}.svg-editor-faq h3{margin:0;font-size:16px;font-weight:600;line-height:1.4}.svg-editor-faq details[open] h3{margin-bottom:8px}.svg-editor-faq p{margin:0;font-size:14px;line-height:1.65;color:var(--muted-foreground)}@container svg-editor (width <= 840px){.se-editor .se-zoom-controls{bottom:112px}}
