.demo-guide{margin:22px 0 24px;border:1px solid #dcdce2;border-radius:8px;background:#ffffff;overflow:hidden;color:#1d1d1f}
.demo-guide>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:58px;padding:16px 20px;cursor:pointer;list-style:none;font-size:15px;font-weight:650;color:#0066cc}
.demo-guide>summary::-webkit-details-marker{display:none}
.demo-guide>summary::after{content:'+';font-size:22px;font-weight:400;flex-shrink:0}
.demo-guide[open]>summary::after{content:'−'}
.demo-guide>summary span{margin-right:auto;font-size:12px;font-weight:400;color:#5e5e64}
.demo-guide-body{border-top:1px solid #dcdce2;padding:20px}
.demo-guide-intro{max-width:75ch;font-size:13px;line-height:1.7;color:#5e5e64}
.demo-guide-steps{list-style:none;padding:0;margin:20px 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.demo-guide-step{min-width:0;border:1px solid #dcdce2;border-radius:6px;padding:16px;background:#f5f5f7}
.demo-guide-step-head{display:flex;align-items:center;gap:9px;margin-bottom:12px}
.demo-guide-number{display:grid;place-items:center;width:27px;height:27px;flex-shrink:0;border:1px solid #bcc5d3;border-radius:50%;color:#0066cc;font-size:12px;font-weight:650}
.demo-guide-state{font-size:12px;color:#5e5e64}
.demo-guide-step h3{font-family:var(--sans);font-size:14px;line-height:1.45;letter-spacing:0;margin-bottom:7px;color:#1d1d1f}
.demo-guide-step p{font-size:13px;line-height:1.65;color:#5e5e64}
.demo-guide-current{border-color:#0066cc;background:#eef4ff}
.demo-guide-current .demo-guide-state{color:#0066cc;font-weight:650}
.demo-guide-done .demo-guide-number{background:#0066cc;border-color:#0066cc;color:#fff}
.demo-guide-progress{font-size:13px;line-height:1.7;color:#1d1d1f;max-width:85ch}
.demo-guide-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:16px}
.demo-guide-actions button{min-height:44px;padding:10px 15px;border:1px solid #bcc5d3;border-radius:6px;background:transparent;color:#0066cc;font-size:13px;line-height:1.5;transition:background-color .15s ease}
.demo-guide-actions .demo-guide-primary{background:#0066cc;border-color:#0066cc;color:#fff;font-weight:600}
.demo-guide-actions button:hover:not(:disabled){background:#e8f0fb}
.demo-guide-actions .demo-guide-primary:hover:not(:disabled){background:#0055aa}
.demo-guide-actions .demo-guide-close{margin-left:auto}
.demo-guide-paused .demo-guide-progress{border-left:3px solid #9b492f;padding-left:12px}
.demo-guide :focus-visible{outline:3px solid #0066cc;outline-offset:3px}
.demo-guide-page [data-sample],.demo-guide-page .lead-actions button{min-height:44px;font-size:12px}
.demo-guide-page .draft-text,.demo-guide-page #analyze-btn,.demo-guide-page [data-sample],.demo-guide-page #filters{scroll-margin-top:100px}
.demo-guide-page .draft-text:focus{outline:3px solid #0066cc;outline-offset:3px}
@media(max-width:760px){.demo-guide>summary{flex-wrap:wrap;gap:3px 10px;padding:15px 16px}.demo-guide>summary span{font-size:12px}.demo-guide-body{padding:16px}.demo-guide-steps{grid-template-columns:1fr;gap:9px;margin:16px 0}.demo-guide-step{padding:14px}.demo-guide-step-head{margin-bottom:8px}.demo-guide-actions{align-items:stretch}.demo-guide-actions button{flex:1 1 auto}.demo-guide-actions .demo-guide-close{margin-left:0}.demo-guide-page .draft-text,.demo-guide-page #analyze-btn,.demo-guide-page [data-sample],.demo-guide-page #filters{scroll-margin-top:180px}}
@media(prefers-reduced-motion:reduce){.demo-guide-actions button{transition:none}.demo-guide-page{scroll-behavior:auto}}