*,*:after,*:before{box-sizing:border-box}:root{font-size:12px;--color-text: #000;--color-bg: #fff;--color-link: #000;--color-link-hover: #000;--page-padding: 1.5rem}body{margin:0;color:var(--color-text);background-color:var(--color-bg);touch-action:none;overscroll-behavior:none;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media(scripting:enabled){.loading:before,.loading:after{content:"";position:fixed;z-index:10000}.loading:before{top:0;left:0;width:100%;height:100%;background:var(--color-bg)}.loading:after{top:50%;left:50%;width:100px;height:1px;margin:0 0 0 -50px;background:var(--color-link);animation:loaderAnim 1.5s ease-in-out infinite alternate forwards}}@keyframes loaderAnim{0%{transform:scaleX(0);transform-origin:0% 50%}50%{transform:scaleX(1);transform-origin:0% 50%}50.1%{transform:scaleX(1);transform-origin:100% 50%}to{transform:scaleX(0);transform-origin:100% 50%}}a{text-decoration:none;color:var(--color-link);outline:none;cursor:pointer}a:hover{text-decoration:underline;color:var(--color-link-hover)}a:focus{outline:none;background:#d3d3d3}a:focus:not(:focus-visible){background:transparent}a:focus:focus-visible{outline:2px solid red;background:transparent}.frame{padding:var(--page-padding);display:grid;z-index:1000;position:relative;gap:1rem;pointer-events:none;justify-items:start;grid-template-columns:100%;grid-template-areas:"title" "links" "demos" "tags" "sponsor"}.frame #cdawrap{justify-self:start;grid-area:sponsor}.frame a,.frame button{pointer-events:auto;touch-action:none;-webkit-tap-highlight-color:transparent}.frame .frame__title{grid-area:title;font-size:inherit;margin:0}.frame .frame__tags{grid-area:tags;display:flex;flex-wrap:wrap;gap:1rem}.frame .frame__links,.frame .frame__demos{display:flex;flex-wrap:wrap;gap:1rem}.frame .frame__links{grid-area:links}.frame .frame__demos{grid-area:demos}@media screen and (min-width:53em){.frame{height:100%;position:fixed;top:0;left:0;width:100%;grid-template-columns:auto auto 1fr;grid-template-rows:auto auto;align-content:space-between;grid-template-areas:"title links demos" "tags tags sponsor"}.frame .frame__tags{align-self:end}.frame .frame__demos,.frame #cdawrap{justify-self:end;text-align:right;max-width:300px}}#sizer{position:fixed;top:0;left:0;height:100vh;width:100vw;pointer-events:none;-webkit-user-select:none;user-select:none;visibility:hidden;opacity:0}html,body{height:100%;overflow:hidden;overscroll-behavior:none}body{position:fixed;inset:0;touch-action:none}.frame{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.sound-toggle{grid-area:demos;display:flex;align-items:center;gap:.5rem;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer}.sound-toggle:hover .sound-toggle__icon,.sound-toggle:focus-visible .sound-toggle__icon{opacity:1}@media screen and (min-width:53em){.sound-toggle{justify-self:end}}.sound-toggle__icon{width:1.25rem;height:1.25rem;opacity:.7;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;transition:opacity .2s}.sound-toggle__icon path:first-child{fill:currentColor;stroke-linejoin:round}.sound-toggle__slash,.sound-toggle.is-muted .sound-toggle__wave{display:none}.sound-toggle.is-muted .sound-toggle__slash{display:block}