.demo-layout{display:grid;grid-template-columns:290px minmax(0,1fr);gap:16px;align-items:start}.demo-list,.demo-runner{background:#fff;border:1px solid var(--line);border-radius:9px}.demo-list{padding:8px;display:grid;gap:4px;max-height:calc(100vh - 210px);overflow:auto}.demo-option{width:100%;border:1px solid transparent;background:transparent;border-radius:7px;padding:12px;text-align:left;cursor:pointer;color:var(--ink);display:flex;gap:10px;align-items:flex-start}.demo-option:hover{background:#f7f9fa}.demo-option.active{background:var(--blue-soft);border-color:#c9d9ff}.demo-option-number{font-size:11px;color:#8d99a1;font-weight:800;margin-top:2px}.demo-option strong{display:block;font-size:13px}.demo-option small{display:block;color:var(--muted);font-size:11px;margin-top:3px}.demo-runner{padding:24px;min-height:540px}.demo-runner-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;border-bottom:1px solid var(--line);padding-bottom:18px}.demo-runner-head h3{margin:2px 0 4px;font-size:21px}.demo-runner-head p{color:var(--muted);font-size:12px;margin:0;max-width:600px}.demo-badge{font-size:11px;border-radius:4px;padding:4px 7px;background:var(--teal-soft);color:var(--teal);white-space:nowrap}.demo-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:end;margin:20px 0}.demo-form textarea{width:100%;min-height:86px;resize:vertical;border:1px solid var(--line);border-radius:7px;padding:10px;font:13px inherit;outline:0}.demo-form textarea:focus{border-color:#91b5ff;box-shadow:0 0 0 3px var(--blue-soft)}.demo-form label{display:grid;gap:6px;font-size:12px;font-weight:700}.demo-form .button{height:38px;white-space:nowrap}.demo-steps{display:grid;gap:0;margin:18px 0 22px}.demo-step{display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px;position:relative;padding-bottom:17px}.demo-step:not(:last-child)::after{content:"";position:absolute;left:14px;top:29px;bottom:0;width:1px;background:var(--line)}.demo-step-marker{width:29px;height:29px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);background:#fff;color:#9aa5ab;font-size:11px;font-weight:800;z-index:1}.demo-step.active .demo-step-marker{border-color:#9bb9ff;background:var(--blue-soft);color:var(--blue)}.demo-step.complete .demo-step-marker{border-color:#9ddbc8;background:var(--teal-soft);color:var(--teal)}.demo-step strong{display:block;font-size:13px;margin:4px 0 2px}.demo-step small{color:var(--muted);font-size:11px}.demo-output{background:#f7f9fa;border:1px solid var(--line);border-radius:8px;padding:16px}.demo-output h4{margin:0 0 6px;font-size:13px}.demo-output p{margin:0;color:#40515c;font-size:12px;line-height:1.7}.demo-output .handoff{margin-top:10px;padding-top:10px;border-top:1px solid var(--line);color:#8a5c2a}.demo-hint{color:var(--muted);font-size:12px;margin:22px 0 0}.demo-empty{padding:26px 12px;color:var(--muted);font-size:12px;text-align:center}@media(max-width:900px){.demo-layout{grid-template-columns:1fr}.demo-list{max-height:none;grid-template-columns:repeat(2,minmax(0,1fr))}.demo-runner{min-height:0}}@media(max-width:720px){.demo-list{grid-template-columns:1fr}.demo-runner{padding:18px}.demo-runner-head{display:block}.demo-badge{display:inline-block;margin-top:10px}.demo-form{grid-template-columns:1fr}}