/* Shared look for the live example pages in docs/examples/ */
body { font: 14px/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif; margin: 1em; color: #222; background: #fff; }
h1 { font-size: 1.25em; margin: 0 0 .5em; }
h2 { font-size: 1.05em; margin: 1.2em 0 .4em; }
p { margin: .4em 0 .8em; }
code { background: #f0f2f5; padding: .1em .3em; border-radius: 3px; font-size: .95em; }
fieldset, .panel { border: 1px solid #ccc; border-radius: 6px; margin: 1em 0; padding: 1em; }
legend { color: #4a6cf7; font-weight: 600; padding: 0 .4em; }
label { display: block; margin: .4em 0; }
input[type=text], input[type=password], input[type=number], input[type=search], select, textarea { width: 100%; box-sizing: border-box; padding: .4em; font: inherit; border: 1px solid #bbb; border-radius: 4px; }
textarea { min-height: 6em; font-family: monospace; }
button { padding: .45em .9em; font: inherit; border: 1px solid #4a6cf7; border-radius: 4px; background: #fff; color: #4a6cf7; cursor: pointer; margin: 0 .4em .4em 0; }
button:hover { background: #4a6cf7; color: #fff; }
button:disabled { opacity: .5; cursor: default; }
output, .out, .log { display: block; background: #f5f5f5; border-radius: 4px; padding: .6em; word-break: break-all; white-space: pre-wrap; font-family: monospace; font-size: .92em; min-height: 1.6em; }
.log { max-height: 12em; overflow: auto; }
.demo { border: 1px dashed #4a6cf7; border-radius: 4px; padding: 1em; margin: 1em 0; }
.ok { color: #1a7f37; } .bad { color: #b42318; }
progress { width: 100%; }
iframe { width: 100%; border: 1px dashed #4a6cf7; background: #fff; }
canvas, img { max-width: 100%; }
table { border-collapse: collapse; width: 100%; } th, td { border: 1px solid #e1e4e8; padding: .3em .5em; text-align: left; } th { background: #f6f8fa; }
.row { display: flex; flex-wrap: wrap; gap: 1em; } .row > * { flex: 1 1 240px; min-width: 0; }