:root { color-scheme: light; font: 1rem/1.5 system-ui, sans-serif; color: #162235; background: #f5f7fa; }
body { margin: 0; padding: 1.5rem; }
main { max-width: 64rem; margin: auto; }
h1 { line-height: 1.2; }
section { margin: 2rem 0; padding: 1rem; background: white; border: 1px solid #d4dce5; border-radius: .5rem; }
.edge-grid { display: grid; grid-template-columns: repeat(3, minmax(128px, 1fr)); gap: 1rem; max-width: 40rem; overflow-x: auto; }
.row { display: flex; flex-wrap: wrap; gap: 1.5rem; }
figure { margin: .5rem 0; }
canvas, .formats img { display: block; width: 128px; height: 128px; image-rendering: pixelated; border: 1px solid #778497; }
.formats img { background-color: #d9e2ea; background-image: conic-gradient(#fff 25%, transparent 0 50%, #fff 0 75%, transparent 0); background-size: 16px 16px; }
figcaption { margin-top: .5rem; }
a { color: #164ba2; text-decoration: underline; }
button { padding: .6rem 1rem; font: inherit; cursor: pointer; }
pre { overflow-x: auto; padding: 1rem; background: #f2f5f8; border: 1px solid #d4dce5; }
#status[data-state="error"] { color: #9e1f15; }