html { font-family: system-ui, sans-serif; line-height: 1.45; }
body { max-width: 70ch; margin: 2rem auto; padding: 0 1rem; }
header, footer { opacity: .7; margin: 1rem 0; }
section.intro { display:flex; gap:1.25rem; align-items:center; margin-bottom:2rem; }
.intro-copy h1 { margin:0 0 .25rem; color:#ff1493; }
.demo h2 { color:#ff1493; }
.intro-copy p { margin:.35rem 0; }
.intro-copy .contact a { margin-left:.4rem; color:#ff1493; border-bottom-color:#ff1493; }
.overview { margin:0 0 2rem; }
img.profile { width:96px; height:96px; border-radius:50%; object-fit:cover; box-shadow:0 0 0 2px #fff, 0 0 0 4px rgba(0,0,0,0.1); }
canvas { display:block; width:100%; height:auto; image-rendering: pixelated; border:1px solid #ccc; border-radius:8px; box-shadow:0 1rem 3rem rgba(0,0,0,0.12); background-color:#000; }
canvas.with-poster { background-color:#000; }
canvas.demo-activating { cursor: progress; }
a { text-decoration: none; border-bottom: 1px solid currentColor; }
.demo { margin: 2.5rem 0; }
.demo h2 { margin-bottom: .4rem; }
.demo p { margin: .5rem 0; }
.warn { color: #a00; font-size: .9rem; margin-top: .5rem; }
details.source { margin-top: .75rem; border:1px solid #ddd; border-radius:6px; padding:.5rem .75rem; background:#f8f8f8; }
details.source summary { cursor:pointer; font-weight:600; }
details.source pre { margin:.5rem 0 0; padding:.75rem; background:#111; color:#f5f5f5; border-radius:4px; overflow:auto; }
details.source code { font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; font-size:.85rem; line-height:1.4; display:block; }