/* /demo: step cards. Same calm palette as site.css. */
.demo{padding-bottom:30px}.steps{list-style:none;margin:0;padding:0;display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}.step,.step *{min-width:0}.cols>*{min-width:0}.bub,.call pre,.res small{overflow-wrap:anywhere}
.step{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:clamp(16px,3vw,26px);scroll-margin-top:12px}
.sh{display:flex;align-items:center;gap:12px;margin-bottom:6px}.sh h2{font-size:clamp(21px,3vw,28px)}
.n{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--bark);color:var(--linen);font:800 16px var(--sans)}
.step.done .n{background:var(--ok)}.step .sub{color:var(--bark2);margin-bottom:14px;max-width:44em}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}.chip{font:600 15px var(--sans);min-height:40px;padding:0 14px;border-radius:99px;border:1.5px solid var(--line2);background:#fff;color:var(--bark);cursor:pointer}.chip:hover{border-color:var(--beet);color:var(--beet)}
.inl{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}.inl input{flex:1 1 200px;width:auto}
.log{display:grid;gap:12px;margin-top:12px}
.bub{max-width:40em;padding:11px 15px;border-radius:16px;font-size:16px;white-space:pre-wrap}.bub.u{background:var(--bark);color:var(--linen);justify-self:end;border-bottom-right-radius:4px}.bub.b{background:#fff;border:1px solid var(--line);border-bottom-left-radius:4px}
.bub small{display:block;margin-top:8px;color:var(--bark3);font-size:13px}
.call{border:1px solid var(--line);border-radius:12px;background:#fff;overflow:hidden}.call summary{cursor:pointer;padding:9px 12px;font:600 13px ui-monospace,Menlo,monospace;display:flex;flex-wrap:wrap;gap:8px;align-items:center;list-style:none}
.call summary::-webkit-details-marker{display:none}.call summary:before{content:"▸";color:var(--beet)}.call[open] summary:before{content:"▾"}
.call .lv{margin-left:0}.call .http{margin-left:auto;color:var(--bark3)}.call .http.bad{color:var(--beet)}
.call pre{border-radius:0;max-height:260px;font-size:12px}
.res{list-style:none;margin:0;padding:0;display:grid;gap:8px}.res li{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 14px;font-size:15px}.res b{display:block}.res small{color:var(--bark2);word-break:break-word}
.cols{display:grid;gap:18px;grid-template-columns:1fr}@media(min-width:860px){.cols{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}}
.tabs{display:flex;gap:6px;margin-bottom:10px}.tab{font:700 14px var(--sans);min-height:36px;padding:0 14px;border-radius:99px;border:1.5px solid var(--line2);background:transparent;color:var(--bark);cursor:pointer}.tab.on{background:var(--bark);color:var(--linen);border-color:var(--bark)}
.cat{list-style:none;margin:0;padding:0;max-height:430px;overflow:auto;display:grid;gap:6px;padding-right:4px}
.cat li{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px 10px 8px 14px}.cat .nm{min-width:0}.cat .nm b{display:block;font-weight:600}.cat .nm small{color:var(--bark3);font-size:12.5px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stp{flex:none;display:flex;align-items:center;gap:4px}.stp button{width:40px;height:40px;border-radius:50%;border:1.5px solid var(--line2);background:var(--paper);font:700 20px var(--sans);color:var(--bark);cursor:pointer}.stp button:hover{border-color:var(--beet);color:var(--beet)}.stp output{min-width:28px;text-align:center;font:800 17px var(--sans);font-variant-numeric:tabular-nums}
.cart{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;align-self:start;position:sticky;top:12px}.cart h3{margin-bottom:6px}.cart .empty{color:var(--bark3);display:block}
.cart .lines li{grid-template-columns:34px 1fr auto}.cart .lines .q{font-size:17px}
.frame-wrap{border:1px solid var(--line);border-radius:14px;background:#fff;overflow:hidden;min-height:90px;padding:0}.frame-wrap>.hint{padding:14px}.frame-wrap iframe{display:block;width:100%;border:0;height:min(76vh,700px);min-height:520px}
.try{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:12px}.try .hint{margin:0}
.states{list-style:none;margin:0 0 14px;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:8px}@media(min-width:700px){.states{grid-template-columns:repeat(4,1fr)}}
.states li{background:#fff;border:1.5px dashed var(--line2);border-radius:12px;padding:10px 12px;font:700 15px ui-monospace,Menlo,monospace;color:var(--bark3)}.states li small{display:block;font:500 12.5px var(--sans);margin-top:3px}
.states li.on{border:1.5px solid var(--ok);border-style:solid;color:var(--ok);background:#f1f8f2}.states li.cur{background:var(--ok);color:#fff}.states li.cur small{color:#e6f3e8}
.err{color:var(--beet);font-weight:600}

.cat .pc{font:700 14px var(--sans);font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--bark);margin-left:auto;padding-left:8px}
.cart .pr{font:700 14px var(--sans);font-variant-numeric:tabular-nums;white-space:nowrap}
.cart .sub-t{border-top:1px solid var(--line);margin-top:8px;padding-top:8px;display:flex;justify-content:space-between;font-weight:700}
.cart .pnote{font-size:12.5px;color:var(--bark2);margin-top:6px}
.cat li.grp small.est{color:var(--bark);font-weight:600}.cat li.grp small.why{color:var(--bark3);font-size:12px;white-space:normal}
.cat li.grp{flex-wrap:wrap}.cat li.grp .nm{flex:1 1 260px}.cat li.grp .pc{margin-left:auto}
@media(max-width:560px){.cat li.grp .nm{flex-basis:100%}}