*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:7.5rem}
body{margin:0;overflow-x:hidden;background:var(--paper);color:var(--ink);font-family:Consolas,'Courier New',monospace;line-height:1.55}
img,picture{display:block;max-width:100%}a{color:inherit}button,a{font:inherit}section,article{scroll-margin-top:7.5rem}
:focus-visible{outline:3px solid var(--butter);outline-offset:4px}a{-webkit-tap-highlight-color:transparent}
.skip-link{position:fixed;z-index:100;top:-6rem;left:.75rem;padding:.8rem 1rem;background:var(--butter);color:var(--ink);font-weight:700}.skip-link:focus{top:.75rem}
.demo-note{position:fixed;right:.5rem;bottom:.5rem;z-index:80;margin:0;padding:.38rem .52rem;background:rgba(11,12,15,.9);color:#fff;font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;pointer-events:none}
.icon{width:1.2rem;height:1.2rem;display:block;flex:0 0 auto;overflow:visible}
::selection{background:var(--butter);color:var(--ink)}
@media(min-width:641px){html{scroll-padding-top:4.75rem}section,article{scroll-margin-top:4.75rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}