.demo-guide{margin:0 0 38px;border:1px solid #d3ded5;border-radius:16px;background:#f0f4ed;padding:28px}
.demo-guide>header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:22px}
.demo-guide .mini-tag{color:#33584b;font-size:10px;letter-spacing:.06em}
.demo-guide h2,.demo-invitation h2{font-size:23px;margin:6px 0 8px}
.demo-guide>header p:last-child,.demo-invitation p{color:var(--muted);line-height:1.65;margin-bottom:0}
.demo-scenarios{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.demo-scenario{background:var(--paper,#fff);border:1px solid var(--line);border-radius:12px;padding:22px;min-width:0}
.demo-step{display:inline-flex;font-size:12px;letter-spacing:.12em;border-bottom:2px solid #779780;padding-bottom:7px;color:#45604d}
.demo-scenario h3{font-size:20px;margin:18px 0 12px;line-height:1.35}
.demo-scenario p{font-size:13px;line-height:1.7;color:var(--muted)}
.demo-scenario ul{list-style:none;padding:0;margin:20px 0 0}
.demo-scenario li+li{border-top:1px solid var(--line)}
.demo-scenario a{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:44px;padding:9px 0;color:var(--ink);font-size:13px;text-decoration:none}
.demo-scenario a:hover{text-decoration:underline}.demo-scenario a:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.demo-footnote{font-size:12px;line-height:1.65;color:var(--muted);margin:20px 0 0}
.demo-import{margin-top:16px;font-size:13px;line-height:1.7}.demo-import summary{cursor:pointer;min-height:34px}.demo-import p{max-width:750px;overflow-wrap:anywhere}
.demo-invitation{display:flex;gap:22px;align-items:center;flex-wrap:wrap;padding:24px;margin-bottom:30px;border:1px dashed #aebfae;border-radius:12px;background:#f3f6ef}
.demo-invitation>div{flex:1;min-width:220px}.demo-invitation>p{flex-basis:100%;margin:0}.demo-invitation>p:empty{display:none}
@media(max-width:1150px){.demo-scenarios{grid-template-columns:1fr}.demo-scenario{padding:20px}.demo-scenario ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px}.demo-scenario h3{margin:12px 0}.demo-guide>header{flex-wrap:wrap}}
@media(max-width:600px){.demo-guide{padding:18px;border-radius:12px}.demo-guide h2{font-size:21px}.demo-scenario{padding:17px}.demo-scenario ul{display:block}.demo-invitation{padding:18px}.demo-invitation>div{min-width:0;flex-basis:100%}.demo-invitation>.button{width:100%;justify-content:center}}