* { box-sizing: border-box; }
html { scroll-behavior: smooth; color-scheme: light; }
body { margin: 0; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; }
[hidden] { display: none !important; }
site-header, site-footer, quick-contact-form, live-demo, demo-gallery { display: block; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; }
.skip-link { position: absolute; z-index: 100; left: 12px; top: 12px; padding: 15px; background: var(--color-paper); transform: translateY(-160%); }
.skip-link:focus { transform: none; }
html:has(live-demo dialog:modal) { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
img { max-width: 100%; height: auto; }

/* The bitmap retains the SVG image's xMidYMin slice, including rounded clipping paths. */
.svg-raster-image { display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 0 }