* { box-sizing: border-box; }
body { margin:0; padding:80px 24px 48px; background:#f5f7fa;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; }
.demo-section { background:#fff; border-radius:12px; padding:28px 32px;
  margin-bottom:24px; border:1px solid #e0e0e0; }
.demo-row { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:12px; }
code { background:#f0f4ff; color:#1a3a6b; padding:2px 6px; border-radius:4px; font-size:13px; }
pre { background:#1e1e2e; color:#cdd6f4; padding:16px 20px; border-radius:10px;
  overflow-x:auto; font-size:13px; line-height:1.7; margin:16px 0 0; }
pre code { background:transparent; color:inherit; padding:0; border-radius:0; font-size:inherit; }
pre .cm{color:#6c7086;} pre .kw{color:#cba6f7;} pre .st{color:#a6e3a1;}
pre .fn{color:#89b4fa;} pre .nm{color:#fab387;} pre .op{color:#cdd6f4;}