.gif-player{width:fit-content;max-width:100%;margin-inline:auto;display:block;position:relative}.gif-player__toggle{border:2px solid var(--color-light);border-radius:var(--br-circle);background:var(--color-dark);width:2.75rem;height:2.75rem;color:var(--color-light);cursor:pointer;transition:color var(--transition-duration--general) ease, border-color var(--transition-duration--general) ease;justify-content:center;align-items:center;padding:0;font-size:1rem;display:inline-flex;position:absolute;top:.5rem;right:.5rem}.gif-player__toggle:hover:not(:disabled),.gif-player__toggle:focus-visible{color:var(--color-primary);border-color:var(--color-primary)}.gif-player__toggle:focus-visible{outline:2px solid var(--color-primary-strong);outline-offset:2px}
.code-editor-container{min-height:60px;position:relative}.code-editor-container--fixed-height{height:200px}.code-editor-container .copy{z-index:2;opacity:0;color:#888;pointer-events:none;background-color:#0000;border:none;border-radius:.25rem;justify-content:center;align-items:center;width:2rem;height:2rem;transition:opacity .2s,background-color .2s;display:flex;position:absolute;top:.5rem;right:.5rem}.code-editor-container:hover .copy{opacity:.75;pointer-events:auto}.code-editor-container[data-shiki-theme=github-dark] .copy{color:#fff}.code-editor-container[data-shiki-theme=github-light] .copy{color:#24292e}.code-editor-container:hover .copy:hover{opacity:1;cursor:pointer;background-color:#9ca3af1a}.code-editor-container[data-shiki-theme=github-dark]{background-color:#24292e}.code-editor-container[data-shiki-theme=github-light]{background-color:#fff}.shiki-editor{width:100%;min-height:60px;display:grid;position:relative}.shiki-editor__textarea,.shiki-editor__highlight{width:100%;font-family:var(--font-mono), monospace;tab-size:2;white-space:pre-wrap;word-break:break-all;box-sizing:border-box;border:none;grid-area:1/1/2/2;margin:0;font-size:.9rem;line-height:1.5rem}.shiki-editor__textarea{z-index:1;color:#0000;caret-color:#24292e;resize:none;background:0 0;outline:none;padding:1rem;overflow:hidden}.code-editor-container[data-shiki-theme=github-dark] .shiki-editor__textarea{caret-color:#fff}.code-editor-container[data-shiki-theme=github-light] .shiki-editor__textarea{caret-color:#24292e}.shiki-editor__highlight{z-index:0;pointer-events:none;padding:1rem;overflow:hidden}.shiki-editor__highlight pre,.shiki-editor__highlight code{font-family:inherit;font-size:inherit;line-height:inherit;white-space:pre-wrap;word-break:break-all;background:0 0;margin:0;padding:0}
.css-playground{flex-direction:column;gap:.75rem;margin:0;display:flex}.css-playground__caption{font-family:var(--font-secondary);color:var(--font-color);font-size:1.05rem;font-weight:600}.css-playground__body{grid-template-columns:1fr;align-items:stretch;gap:1rem;display:grid}@media screen and (min-width:48rem){.css-playground__body{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}.css-playground__editors{flex-direction:column;gap:1rem;min-width:0;display:flex}.css-playground__panel{flex-direction:column;gap:.375rem;min-width:0;display:flex}.css-playground__label{text-transform:uppercase;letter-spacing:.04em;color:var(--font-color-muted);font-size:.8rem;font-weight:600}.css-playground__editor{border-radius:var(--br-normal);overflow:hidden}.css-playground__preview-wrapper{flex-direction:column;gap:.5rem;height:100%;display:flex}.css-playground__preview{border:1px solid var(--border-color);border-radius:var(--br-normal);background:var(--background-primary);resize:vertical;width:100%;height:100%;min-height:18rem;display:block}.css-playground__error{border-radius:var(--br-normal);background:var(--crimson);color:#fff;align-items:center;gap:.5rem;margin:0;padding:.625rem .75rem;font-size:.85rem;line-height:1.4;display:flex}.css-playground__error:empty{display:none}
.article-page__content{max-width:calc(var(--article-max-width) + 6rem);margin:3rem 2rem;padding:1.5rem 3rem}.article-page__content p{margin-block:2em;line-height:1.7}.article-page__content p:has(img){flex-direction:column;justify-content:center;display:flex}.article-page__content p code{margin:0}.article-page__content .alert p{margin-block:0}.article-page__content img,.article-page__content video{max-width:100%;margin:auto;display:block}.article-page__content figure{margin-top:2rem;margin-bottom:2rem}.article-page__content figcaption{text-align:center;margin-top:.5rem;font-size:.8rem;font-weight:400}.article-page__content .css-playground figcaption{text-align:left;margin:.5rem 0;font-size:1.2rem}@media screen and (min-width:992px){.article-page__content{margin:3rem auto}}