@font-face{font-family:CommitMono;src:url(/fonts/commit-mono/CommitMono-400-Regular.otf)format("opentype");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:CommitMono;src:url(/fonts/commit-mono/CommitMono-400-Italic.otf)format("opentype");font-weight:400;font-style:italic;font-display:swap}@font-face{font-family:CommitMono;src:url(/fonts/commit-mono/CommitMono-700-Regular.otf)format("opentype");font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:CommitMono;src:url(/fonts/commit-mono/CommitMono-700-Italic.otf)format("opentype");font-weight:700;font-style:italic;font-display:swap}
:root{--text:#111;--middle:#555;--bg:#aaa;--bg25:repeating-conic-gradient(var(--text)0% 25%,transparent 0% 100%)1px .5px/2px 2px;--bg50:repeating-conic-gradient(var(--text)0% 25%,transparent 0% 50%,var(--text)0% 75%,transparent 0% 100%)1px .5px/2px 2px;--max-width:54ch;--layout-width:calc(var(--max-width) + 16ch);font-size:16px}:root[data-theme=dark]{--bg:#111;--text:#ccc}:root[data-contrast=high][data-theme=light]{--bg:#fff;--text:#000}:root[data-contrast=high][data-theme=dark]{--bg:#000;--text:#fff}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);color:var(--text);font-feature-settings:"ss01","ss03","ss04","ss05";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;font-family:CommitMono,IBM Plex Mono,SFMono-Regular,Menlo,monospace;font-size:.75rem;line-height:1rem;overflow:hidden}#loading{background:var(--bg);z-index:200;place-content:center;display:grid;position:fixed;top:0;bottom:0;left:0;right:0}#loading.loading-hidden{display:none}#loading p{width:10ch}#loading p:after{content:"...";animation:.5s steps(4,start) infinite loading-dots}::selection{color:var(--bg);background-color:var(--text)}#change-setting,#click-focus{pointer-events:none;visibility:hidden;z-index:150;place-content:center;display:grid;position:fixed;top:0;bottom:0;left:0;right:0}#page-animation{width:200vw;height:200vh;z-index:120;background:var(--bg);visibility:hidden;pointer-events:none;height:200dvh;position:fixed;top:0;bottom:0;left:0;right:0}#page-animation.page-animation{animation:.44s steps(10,start) forwards page-animation}#change-setting[data-visible=true],#click-focus[data-visible=true]{visibility:visible}a{color:inherit;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none;text-underline-offset:.24ch;text-decoration:underline}:focus{animation:50ms 2 flicker}a:focus{background-color:var(--text);color:var(--bg);outline:none;text-decoration:none}.app-root{min-height:100vh;background:var(--bg);min-height:100dvh;position:relative}.app-shell{height:100vh;grid-template-rows:auto 1fr auto;height:100dvh;display:grid;position:relative;overflow:hidden}.app-header{background:var(--bg);z-index:10;scrollbar-width:none;padding:1rem 0 .5rem;position:fixed;top:0;left:0;right:0;overflow-x:auto}.app-header::-webkit-scrollbar{display:none}#main-scroll{scrollbar-width:none;-ms-overflow-style:none;grid-row:2;width:100%;height:100%;padding:4rem 0 6rem;overflow-y:scroll}#main-scroll::-webkit-scrollbar{display:none}.push-region{will-change:transform;width:-moz-fit-content;width:fit-content;max-width:100%;margin-left:auto;margin-right:auto;transition:transform .12s}.app-footer{background:var(--bg);z-index:10;scrollbar-width:none;padding:.5rem 0 1.25rem;position:fixed;bottom:0;left:0;right:0;overflow-x:auto}.app-footer::-webkit-scrollbar{display:none}.app-footer[data-hidden=true]{display:none}.nav-form{flex-wrap:nowrap;justify-content:center;gap:4ch;width:max-content;margin-left:auto;margin-right:auto;font-size:.75rem;line-height:1rem;display:flex}.layout-container{width:min(100%,var(--layout-width));margin-left:auto;margin-right:auto;padding-left:3ch;padding-right:3ch}.app-header-inner{justify-content:center;width:100%;padding-left:3ch;padding-right:3ch;display:flex}.app-footer-inner{scrollbar-width:none;justify-content:center;width:100%;padding-left:3ch;padding-right:3ch;display:flex;overflow-x:auto}.app-footer-inner::-webkit-scrollbar{display:none}.layout-container>.nav-form{justify-content:center}.nav-item{align-items:center;gap:.75ch;display:flex}.nav-radio{-webkit-appearance:none;-moz-appearance:none;appearance:none;opacity:0;width:0;height:0;position:absolute}.nav-label{cursor:pointer;white-space:nowrap;font-feature-settings:inherit;font-variation-settings:inherit;background:0 0;align-items:center;gap:.5ch;padding:.125rem .5ch;font-size:.75rem;font-weight:400;line-height:1rem;display:inline-flex}.nav-label:hover{background:var(--bg25)}.nav-label:after{content:"";background:0 0;width:100%;height:.0625rem;margin-top:.25rem;display:block}.nav-radio:focus+.nav-label,.nav-label:focus{outline:none;text-decoration:none;animation:50ms 2 flicker}.nav-radio:checked+.nav-label:after{background:var(--text)}.nav-radio:checked+.nav-label{background:var(--bg50);color:var(--text)}.nav-label:focus-visible{background:var(--bg25);color:var(--text)}.nav-radio:focus-visible+.nav-label{background:var(--bg25);color:var(--text)}.nav-radio:checked+.nav-label:focus-visible{background:var(--bg50);color:var(--text)}.nav-label[data-highlighted=true],.nav-radio:checked+.nav-label[data-highlighted=true]{background:var(--text);color:var(--bg)}.nav-label.is-edge-feedback{animation:.2s line-shake}.nav-label.is-edge-feedback.is-edge-vertical{animation:.2s line-bounce}.section-stack{gap:4rem;width:-moz-fit-content;width:fit-content;max-width:100%;margin-left:auto;margin-right:auto;display:grid}.section{width:-moz-fit-content;width:fit-content;max-width:var(--max-width);display:none;position:relative}.section.is-active{display:block}.section-cursors-layer{width:100%;display:block;position:relative}.section-cursors-content{z-index:1;position:relative}.section-cursors-inner{position:relative}[data-remote-highlight=true]{box-shadow:var(--remote-highlight-shadow,none);border-radius:.35rem;transition:box-shadow .16s;position:relative}.section h1,.section h2,.section-line--title{font-variation-settings:"wght" 400;margin-bottom:1.5rem;font-size:1.5rem;font-weight:400;line-height:2rem}.section-line--title-first{font-variation-settings:"wght" 400;white-space:pre-line;margin-top:6rem;margin-bottom:1.5rem;font-size:1.5rem;font-weight:400;line-height:2rem}.section-line--title-loyal{color:#cd1600;display:inline-block}.section p{white-space:pre-wrap;margin-bottom:1rem;font-size:.75rem;line-height:1rem}.section h1,.section h2,.section p,.nav-label{letter-spacing:0}.section p,.nav-label{font-variation-settings:"wght" 400}.section-line--title{font-variation-settings:"wght" 400;margin-bottom:1.5rem;font-size:1.5rem;font-weight:400;line-height:2rem}.section-line{border-radius:.125rem;outline:none;margin-left:-.5ch;margin-right:-.5ch;padding:.125rem .5ch;display:block}.section-line:focus{outline:none}.section-line[data-highlighted=true]{background:var(--text);color:var(--bg)}.section-line[data-highlighted=true] a{color:var(--bg)}.section-line.is-edge-feedback{animation:.2s line-shake}.section-line.is-edge-feedback.is-edge-vertical{animation:.2s line-bounce}.section-list{max-width:max-content;margin:0;padding:0;list-style:none}.section-list li{width:-moz-fit-content;width:fit-content;max-width:54ch;margin-bottom:0;margin-left:2ch;font-size:.75rem;line-height:1rem;position:relative}.section-list li:before{content:"• ";margin-left:-2ch;position:absolute}.section-list a{display:inline-block}.section-list a:hover{background:var(--bg25)}.section-line--links-heading{font-variation-settings:"wght" 700;margin-bottom:.25rem;font-size:.75rem;font-weight:700;line-height:1rem}.section-subsection .section-line--links-heading{margin-bottom:.75rem;font-size:1.25rem;line-height:1.75rem}.section-list--controls{margin-top:.25rem}.section-list--controls li{align-items:center;gap:1ch;display:flex}.section-controls-keys{gap:.5ch;display:inline-flex}.section-controls-key{border:1px solid var(--text);border-radius:.125rem;justify-content:center;align-items:center;min-width:1.5ch;padding:.125rem .5ch;display:inline-flex}.section-controls-label{display:inline-block}.section-controls{margin-top:3rem;margin-bottom:3rem}.section-controls .section-list{margin:0}.section-controls-footer{margin-top:0}.section-faq{margin-top:1.5rem}.section-faq-item{margin-bottom:1rem}.section-faq-summary{cursor:pointer;align-items:center;gap:1ch;display:inline-flex}.section-faq-summary::-webkit-details-marker{display:none}.section-faq-summary:before{content:"[+]";justify-content:center;align-items:center;min-width:3ch;display:inline-flex}.section-faq-item[open] .section-faq-summary:before{content:"[-]"}.section-faq-answer{margin-top:.5rem;padding-left:2ch}.section-faq-answer p{margin-bottom:.75rem}.section-faq-answer p:last-child{margin-bottom:0}.section-faq-answer ul,.section-faq-answer ol{margin:0 0 .75rem 2ch;padding:0}.section-faq-answer ol{list-style:decimal}.section-faq-answer ul{list-style:outside}.section-faq-answer li{margin-bottom:.5rem;font-size:.75rem;line-height:1rem}.section-faq-answer li:last-child{margin-bottom:0}.section-tabs{margin:3rem 0 2.5rem}.section-subsection{margin-top:2rem}.section-subsection .section-tabs{margin-top:1rem}.section-tabs-track{--section-tabs-baseline:1.5rem;padding:0 0 var(--section-tabs-baseline);justify-content:space-between;align-items:flex-end;gap:4ch;display:flex;position:relative}.section-tabs-track:before{content:"";left:0;right:0;bottom:calc(var(--section-tabs-baseline) + .25rem);background:var(--text);height:1px;position:absolute}.section-tabs-tab{cursor:pointer;background:0 0;border:none;flex-direction:column;align-items:center;gap:.5rem;margin:0;padding:0;display:flex}.section-tabs-label{border-radius:.125rem;margin-left:-.5ch;margin-right:-.5ch;padding:.125rem .5ch;font-size:.75rem;line-height:1rem;transition:background .12s,color .12s}.section-tabs[data-variant=plain] .section-tabs-track{--section-tabs-baseline:0;align-items:center;gap:4ch;padding-bottom:0}.section-tabs[data-variant=plain] .section-tabs-track:before{display:none}.section-tabs[data-variant=plain] .section-tabs-tab{flex-direction:row;gap:0}.section-tabs[data-variant=plain] .section-tabs-square{display:none}.section-tabs[data-variant=media] .section-tabs-track{--section-tabs-baseline:0;flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:2.5ch;padding-bottom:0}.section-tabs[data-variant=media] .section-tabs-track:before{display:none}.section-tabs[data-variant=media] .section-tabs-tab{flex-direction:row;gap:0}.section-tabs[data-variant=media] .section-tabs-square{display:none}:root[data-theme=dark] .section-tabs-tab[data-active=false] .section-tabs-label{color:var(--text);opacity:.7}:root[data-theme=dark] .section-tabs-tab[data-active=false] .section-tabs-square{background:var(--bg)}.section-tabs-label:hover{background:var(--bg25)}.section-quote{border-left:1px solid var(--text);max-width:48ch;margin:3rem 0;padding-left:1.75rem}.section-quote-text{margin:0}.section-quote-text p{white-space:pre-wrap;margin:0 0 1rem;font-size:.75rem;font-style:italic;line-height:1.25rem}.section-quote-text p:last-child{margin-bottom:0}.section-quote-attribution{font-variation-settings:"wght" 400;margin-top:1.5rem;font-size:.75rem;font-style:normal;line-height:1rem}.section-tabs-media{grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));align-items:start;gap:1rem;display:grid}.section-tabs-media-frame{aspect-ratio:4/3;border:1px solid var(--text);background:var(--bg25);place-content:center;width:100%;padding:.75rem;display:grid;position:relative;overflow:hidden}.section-tabs-media-image{object-fit:cover}.section-tabs-media-placeholder{text-transform:uppercase;letter-spacing:.1em;text-align:center;font-size:.75rem;line-height:1rem}.section-tabs-media-caption{flex-direction:column;gap:.375rem;font-size:.75rem;line-height:1rem;display:flex}.section-tabs-media-caption p{margin:0}.section-tabs-media-caption ul,.section-tabs-media-caption ol{margin:0;padding-left:1.5rem}.section-tabs-media-caption li{margin-bottom:.5rem}.section-tabs-media-caption li:last-child{margin-bottom:0}.section-tabs .section-quote{margin:2rem 0 0}.section-tabs-tab:hover .section-tabs-label{background:var(--bg25);color:var(--text)}.section-tabs-tab:focus-visible .section-tabs-label{background:var(--bg25);color:var(--text);outline:none}.section-tabs-tab[data-active=true] .section-tabs-label{background:var(--bg50);color:var(--text)}.section-tabs-tab:hover .section-tabs-square{transform:scale(1.2)}.section-tabs-square{border:1px solid var(--text);background:var(--text);z-index:1;width:.5rem;height:.5rem;transition:transform .12s,background .12s;position:relative}.section-tabs-tab[data-active=true] .section-tabs-square{transform:scale(1.4)}.section-tabs-tab:active .section-tabs-label,.section-tabs-tab[data-active=true]:active .section-tabs-label,:root[data-theme=dark] .section-tabs-tab[data-active=true] .section-tabs-label{background:var(--text);color:var(--bg)}.section-tabs-panel{margin-top:1.5rem}.section-tabs-panel p{margin-bottom:1rem;font-size:.75rem;line-height:1rem}.section-tabs-panel ul,.section-tabs-panel ol{margin-bottom:1rem;margin-left:2ch;padding:0}.section-tabs-panel ul{list-style:outside}.section-tabs-panel ol{list-style:decimal}.section-tabs-panel li{margin-bottom:.5rem;font-size:.75rem;line-height:1rem}.section-tabs-panel li:last-child{margin-bottom:0}.section-nav-link{margin-top:2rem;color:inherit;text-align:left;cursor:pointer;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none;text-underline-offset:.24ch;background:0 0;border:none;margin-left:-.5ch;margin-right:-.5ch;padding:.125rem .5ch;text-decoration:underline}.section-nav-link:hover{background:var(--bg25)}.section-line--tutorial{margin-bottom:.75rem}@keyframes line-shake{0%{transform:translate(0)}20%{transform:translate(-.5ch)}40%{transform:translate(.5ch)}60%{transform:translate(-.25ch)}80%{transform:translate(.25ch)}to{transform:translate(0)}}@keyframes line-bounce{0%{transform:translateY(0)}25%{transform:translateY(-.25rem)}50%{transform:translateY(.25rem)}to{transform:translateY(0)}}.section p:last-of-type{margin-bottom:0}.keyboard-legend{gap:4ch;width:max-content;margin-left:auto;margin-right:auto;font-size:.75rem;line-height:1rem;display:flex}.key-group{white-space:nowrap;flex-direction:column;gap:.5rem;display:flex}.key-row{gap:.5ch;display:flex}.key-row--stacked{gap:2.5rem}.key{border:.0625rem solid var(--text);border-bottom:.125rem solid var(--text);-webkit-user-select:none;-moz-user-select:none;user-select:none;text-align:center;min-width:1.5ch;color:inherit;background:0 0;justify-content:center;align-items:center;padding:0 calc(.5ch - .0625rem);line-height:.85rem;transition:background-color .12s,color .12s,border-color .12s;display:inline-flex}.key-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;font:inherit;color:inherit;background:0 0;padding:0}.key-button:focus-visible{box-shadow:0 0 0 .125rem var(--text);outline:none}.key--active,.key--pressed{background:var(--text);color:var(--bg);border-color:var(--text)}.key--pressed{animation:.32s key-press}@keyframes key-press{0%{transform:translateY(0)}40%{transform:translateY(.1rem)}to{transform:translateY(0)}}.span-key{border:.0625rem solid var(--text);border-bottom:.125rem solid var(--text);margin-left:.25ch;margin-right:.25ch;padding:0 calc(.5ch - .0625rem);display:inline-block}.tutorial-container{max-width:var(--max-width);margin-top:2rem}.tutorial-container h3{margin-bottom:.75rem;font-size:.75rem;font-weight:700;line-height:1rem}.tutorial-keys{flex-wrap:wrap;gap:.5rem;display:flex}.tutorial-key{align-items:center;gap:.25rem;display:inline-flex}.key-stack{flex-direction:column;align-items:center;gap:.25rem;display:flex}.key-stack-label{font-size:.75rem}.code-inspector{gap:1.5rem;width:-moz-fit-content;width:fit-content;margin-top:2rem;display:grid}.code-inspector__controls{border-bottom:.0625rem solid var(--text);flex-wrap:wrap;gap:.75rem;padding-bottom:.75rem;display:flex}.code-inspector__option{cursor:pointer;align-items:center;gap:.5rem;display:inline-flex}.code-inspector__option input{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:.0625rem solid var(--text);background:var(--bg);border-radius:50%;width:.75rem;height:.75rem;position:relative}.code-inspector__option input:checked:after{content:"";background:var(--text);border-radius:50%;position:absolute;top:.125rem;bottom:.125rem;left:.125rem;right:.125rem}.code-inspector__option input:focus-visible{outline:.125rem solid var(--text);outline-offset:2px}.code-inspector__option span:first-of-type{font-size:1rem;line-height:1rem}.code-inspector__option-label{text-transform:uppercase;letter-spacing:.1em;font-size:.625rem}.code-inspector__preview{border:.0625rem solid var(--text);background:var(--bg);width:-moz-fit-content;width:fit-content;padding:.5rem}.code-inspector__preview canvas{width:640px;height:360px;display:block}.code-inspector__description h3{margin-bottom:.5rem;font-size:.75rem;font-weight:700;line-height:1rem}.code-inspector__description p{margin-bottom:.75rem;font-size:.75rem;line-height:1rem}.code-inspector__error{color:#b00020}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@keyframes loading-dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}to{content:""}}@keyframes flicker{0%,49%{opacity:0}50%,to{opacity:1}}@keyframes page-animation{0%{visibility:visible;transform:translateY(0)}99.9%{visibility:visible}to{visibility:hidden;transform:translateY(200vh)}}@media (pointer:coarse) and (max-width:1000px){#main-scroll{padding:5rem 0 8rem}.layout-container{padding-left:2ch;padding-right:2ch}.app-header-inner,.app-footer-inner{justify-content:flex-start;padding-left:2ch;padding-right:2ch}.nav-form{flex-wrap:wrap;justify-content:flex-start}body{overflow:visible}}