:root{--red-6: #fa5252;--size-2: .5rem;--font-size-0: .75rem}*,*:after,*:before{box-sizing:border-box}body{overflow-x:hidden;display:grid;place-items:center;min-height:100vh;height:400vh;font-family:Google Sans,sans-serif,system-ui;accent-color:var(--red-6)}pre{padding:var(--size-2);overflow:auto}ul:not(.closed)>.code-block{height:auto!important;line-height:1!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}*:focus-visible{outline-color:var(--red-6)}input::-moz-selection{background:var(--red-6);color:var(--text-1);background:red;color:#fff}input::selection{background:var(--red-6);color:var(--text-1);background:red;color:#fff}form{display:inline-grid;grid-template-columns:auto auto;gap:.5rem 1rem;justify-content:center}:where(p,ul,ol,dl,h6){font-size:var(--font-size-0)}@property --spin{syntax: "<angle>"; inherits: false; initial-value: 0deg;}@property --boost{syntax: "<angle>"; inherits: false; initial-value: 0deg;}@keyframes accelerate{to{--boost: -720deg}}.ring{--font-size: 25vmin;--char-count: 31;--inner-angle: calc((360 / var(--char-count, 31)) * 1deg);--character-width: 1;--radius: calc((var(--character-width, 1) / sin(var(--inner-angle))) * -1ch);font-family:monospace;text-transform:uppercase;font-size:var(--font-size);animation:rotation 10s infinite linear,accelerate auto both linear;animation-timeline:auto,scroll(root);animation-range:normal,0 300vh;rotate:calc(var(--spin) + var(--boost));position:fixed;top:50%;left:100%;translate:-35% -50%}.char{display:inline-block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(calc(var(--inner-angle) * var(--char-index))) translateY(var(--radius))}@keyframes rotation{to{--spin: -360deg}}
