:root{--color-primary: #243a51;--color-accent: #AD0000;--color-accent-light: #ff5050;--color-pink: #ff8282;--color-teal: #F1F9F9;--color-teal-dark: #006b5d;--color-teal-light: #b2eee6;--color-light-orange: #ffcb81;--color-bright-yellow: #fbfb88;--color-bg: #ffffff;--color-text: #222222;--color-header-bg: var(--color-teal-light);--color-footer-bg: var(--color-primary);--color-link: var(--color-teal-dark);--color-link-hover: var(--color-accent);--color-btn-bg: var(--color-primary);--color-btn-bg-hover: var(--color-teal-dark);--color-btn-text: #ffffff;--color-btn-text-hover: #ffffff;--color-border: #e0e0e0;--color-taglines: var(--color-teal-dark);--color-table: #f9f9f9;--color-demo-btn: var(--color-light-orange);--color-demo-btn-text: var(--color-text);--color-demo-btn-hover: var(--color-bright-yellow);--font-body: "Roboto", system-ui, sans-serif;--font-size-base: 1rem;--font-size-lg: 1.25rem;--line-height: 1.6}[data-theme=dark]{--color-primary: #8ad6cc;--color-bg: #1a1a1a;--color-text: #e9e9e9;--color-header-bg: #2a2a2a;--color-footer-bg: #101010;--color-link: var(--color-pink);--color-link-hover: var(--color-teal-light);--color-btn-bg: var(--color-accent-light);--color-btn-bg-hover: var(--color-pink);--color-btn-text: #1a1a1a;--color-btn-text-hover: #1a1a1a;--color-border: #333333;--color-taglines: var(--color-pink);--color-demo-btn: var(--color-light-orange);--color-demo-btn-text: #1a1a1a;--color-demo-btn-hover: var(--color-bright-yellow)}*{box-sizing:inherit;margin:0;padding:0}html{box-sizing:border-box}html,body{height:100%;font-family:var(--font-body);font-optical-sizing:auto;font-weight:400;font-style:normal;font-size:var(--font-size-base);line-height:var(--line-height);color:var(--color-text);background-color:var(--color-bg);transition:background-color .3s ease,color .3s ease}#root{margin:0 auto;min-height:100%;display:grid;grid-template-rows:auto 1fr auto}button:not(.tab),.btn-style{padding:0;background:none;border:none;background:var(--color-btn-bg);color:var(--color-btn-text);border-radius:8px;padding:.6rem 1.2rem;font-size:.9rem;letter-spacing:1px;text-transform:uppercase;font-weight:700;cursor:pointer;transition:all .3s ease-in-out}button:not(.tab):hover,button:not(.tab):active,button:not(.tab):focus,.btn-style:hover,.btn-style:active,.btn-style:focus{outline:none;background-color:var(--color-btn-bg-hover);color:var(--color-btn-text-hover)}button:not(.tab):focus-visible,.btn-style:focus-visible{outline:2px solid currentColor}a:not(.github-corner):not(.footer-link):not(.header-link){color:var(--color-link);transition:all .3s ease-in-out}a:not(.github-corner):not(.footer-link):not(.header-link):hover,a:not(.github-corner):not(.footer-link):not(.header-link):active,a:not(.github-corner):not(.footer-link):not(.header-link):focus{outline:none;color:var(--color-link-hover);text-decoration:underline}a:not(.github-corner):not(.footer-link):not(.header-link):focus-visible{text-decoration:none;outline:2px solid currentColor}section{padding:2.5rem 0 1.8rem;max-width:1200px;margin:0 auto}h1,.h1-style{font-size:3rem;line-height:1.1}h2,.h2-style{font-size:2rem;line-height:1.2}h3,.h3-style{font-size:1.5rem;line-height:1.3}h4,.h4-style{font-size:1.4rem;line-height:1.2}h1,h2,h3,h4,h5,h6,.h1-style,.h2-style,.h3-style,.h4-style{font-family:Alice,serif;font-weight:400;font-style:normal;color:var(--color-primary);margin-bottom:1rem;text-transform:capitalize}p,ul{margin-bottom:1rem}ul{list-style:none}@media(min-width:768px){ul{padding-left:1rem}}ul:not(.socials):not(.header-nav):not(.footer-nav) li:before{content:"";display:inline-block;width:25px;height:25px;background-image:url(data:image/svg+xml,%3Csvg%20width%3D%2225px%22%20height%3D%2225px%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22SVGRepo_bgCarrier%22%20stroke-width%3D%220%22%3E%3C%2Fg%3E%3Cg%20id%3D%22SVGRepo_tracerCarrier%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fg%3E%3Cg%20id%3D%22SVGRepo_iconCarrier%22%3E%3Cg%20id%3D%22Arrow%20%2F%20Caret_Right_SM%22%3E%3Cpath%20id%3D%22Vector%22%20d%3D%22M11%209L14%2012L11%2015%22%20stroke%3D%22%23000000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E);background-size:contain;background-repeat:no-repeat;margin-right:10px;vertical-align:top}header,main,footer{padding:2rem}hr{border:none;background-image:url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%20100%22%3E%3Cpath%20fill%3D%22%23EDEDED%22%20d%3D%22M990%2045H535.5A35.2%2035.2%200%200%201%20500%2011.6%2035.2%2035.2%200%200%201%20464.5%2045H10v10h454.5A35.2%2035.2%200%200%201%20500%2088.4%2035.2%2035.2%200%200%201%20535.5%2055H990V45Z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E);background-size:300px;background-repeat:no-repeat;background-position:center;display:block;height:30px;margin:.5rem auto}pre{margin-bottom:1rem!important;width:100%;max-width:80vw}@media(min-width:768px){pre{max-width:unset}}table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}table{width:100%;border-collapse:collapse;font-family:Arial,sans-serif;margin-bottom:2rem;border:1px solid var(--color-border)}table th,table td{padding:8px 12px;border-bottom:1px solid var(--color-border);text-align:left}table th:first-of-type,table td:first-of-type{width:33%}table th{background-color:var(--color-table);font-weight:700}table tr:nth-child(2n){background-color:var(--color-table)}code{color:var(--color-link-hover)}[data-theme=dark] hr{background-image:url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%20100%22%3E%3Cpath%20fill%3D%22%23333333%22%20d%3D%22M990%2045H535.5A35.2%2035.2%200%200%201%20500%2011.6%2035.2%2035.2%200%200%201%20464.5%2045H10v10h454.5A35.2%2035.2%200%200%201%20500%2088.4%2035.2%2035.2%200%200%201%20535.5%2055H990V45Z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E)}[data-theme=dark] ul:not(.socials):not(.header-nav):not(.footer-nav) li:before{background-image:url(data:image/svg+xml,%3Csvg%20width%3D%2220px%22%20height%3D%2220px%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20stroke%3D%22%23ffffff%22%3E%3Cg%20id%3D%22SVGRepo_bgCarrier%22%20stroke-width%3D%220%22%3E%3C%2Fg%3E%3Cg%20id%3D%22SVGRepo_tracerCarrier%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fg%3E%3Cg%20id%3D%22SVGRepo_iconCarrier%22%3E%3Cg%20id%3D%22Arrow%20%2F%20Caret_Right_SM%22%3E%3Cpath%20id%3D%22Vector%22%20d%3D%22M11%209L14%2012L11%2015%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E)}[data-theme=dark] table th{background-color:var(--color-border)}[data-theme=dark] table tr:nth-child(2n){background-color:var(--color-border)}#btn-theme-toggle{margin:auto;display:flex;gap:5px;align-items:center;min-height:50px}#btn-theme-toggle:focus-visible{outline-color:var(--color-btn-bg)}#btn-theme-toggle .theme-icon{width:28px}#btn-theme-toggle .theme-icon#dark-icon{display:none}.tagline{font-style:italic;font-size:1.3rem;color:var(--color-taglines)}.tip{background-color:var(--color-header-bg);padding:.5rem 15px;border-radius:4px;margin-bottom:2rem}.tip>p{margin-bottom:0}.screen-reader-only{border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal!important}body.dialog-open{overflow:hidden}[data-theme=dark] #btn-theme-toggle .theme-icon#dark-icon{display:block}[data-theme=dark] #btn-theme-toggle .theme-icon#light-icon{display:none}header{display:flex;align-items:center;flex-direction:column;background:var(--color-header-bg);padding:1.5rem 2rem;text-align:center;box-shadow:0 2px 4px #0003}header h1{text-shadow:0 0 2px #fff}header nav{margin-bottom:1rem}header ul{display:flex;align-content:space-between;justify-content:center;flex-wrap:wrap;gap:1rem;margin:0;padding:0;font-size:.9rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;list-style:none}header ul a{color:var(--color-link);transition:all .3s ease-in-out;text-decoration:none}header ul a:hover,header ul a:active,header ul a:focus{color:var(--color-link-hover);text-decoration:none}header ul a:hover.current,header ul a:active.current,header ul a:focus.current{border-color:var(--color-link-hover)}header ul a.current{border-bottom:2px solid var(--color-link)}.github-corner .octo-cat{fill:#e15151;color:#fff;position:absolute;top:0;border:0;right:0}.github-corner .octo-arm{transform-origin:130px 106px}.github-corner:hover .octo-cat,.github-corner:focus .octo-cat{fill:#ff8282}.github-corner:hover .octo-arm,.github-corner:focus .octo-arm{animation:octocat-wave .56s ease-in-out}@keyframes octocat-wave{0%,to{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}footer{position:relative;background:var(--color-footer-bg);color:#fff;text-align:center;padding:2rem 1rem;font-size:.9rem}footer ul{list-style:none;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1.5rem;margin-bottom:2rem}footer a{color:var(--color-teal-light);text-decoration:none}footer a.current{border-bottom:2px solid var(--color-teal-light)}footer a:hover,footer a:active,footer a:focus{text-decoration:none}footer .support{padding-bottom:2rem}footer .support a.btn-style{background-color:var(--color-accent)}footer .support a.btn-style:hover,footer .support a.btn-style:focus,footer .support a.btn-style:active{background-color:var(--color-teal-dark)}footer .socials{margin-top:1rem}footer .socials a{transition:all .3s ease;display:flex;align-items:center;justify-content:center;gap:8px;border:2px solid var(--color-teal-light);border-radius:6px;padding:.5rem 10px;min-width:150px}footer .socials a svg #SVGRepo_iconCarrier,footer .socials a svg path{fill:var(--color-teal-light)}footer .socials a:hover,footer .socials a:active,footer .socials a:focus{color:var(--color-accent-light);border-color:var(--color-accent-light)}footer .socials a:hover svg #SVGRepo_iconCarrier,footer .socials a:hover svg path,footer .socials a:active svg #SVGRepo_iconCarrier,footer .socials a:active svg path,footer .socials a:focus svg #SVGRepo_iconCarrier,footer .socials a:focus svg path{fill:var(--color-accent-light)}footer .footer-copyright p{font-family:cursive;text-align:center}footer .footer-copyright p a{text-decoration:underline}[data-theme=dark] .support a.btn-style{background-color:var(--color-accent-light)}[data-theme=dark] .support a.btn-style:hover,[data-theme=dark] .support a.btn-style:focus,[data-theme=dark] .support a.btn-style:active{background-color:var(--color-teal-light)}.tablist{margin-bottom:2rem;border-bottom:2px solid var(--color-border)}.tablist .tab{position:relative;border:1px solid var(--color-border);border-bottom:none;padding:.6rem 1.2rem;font-size:.9rem;letter-spacing:1px;text-transform:uppercase;font-weight:700;cursor:pointer}.tablist .tab.active{background-color:var(--color-btn-bg);color:var(--color-btn-text-hover)}.tablist .tab.active:after{content:"";position:absolute;bottom:-10px;left:50%;transform:translate(-50%);width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid var(--color-btn-bg)}.tablist .tab.active:hover:after,.tablist .tab.active:focus:after,.tablist .tab.active:active:after{border-top:10px solid var(--color-btn-bg-hover)}.tablist .tab:hover,.tablist .tab:focus,.tablist .tab:active{background-color:var(--color-btn-bg-hover);color:var(--color-btn-text-hover)}.component-desc section{border-top:1px solid var(--color-border)}.component-desc section:first-of-type{border:none}#home{text-align:center}#home #definitions{text-align:left;padding-top:0}#home #definitions .glossary-word{font-size:1.2rem}.demo-area{border:3px dashed #edecec;background:repeating-linear-gradient(-45deg,#edecec,#edecec 6.5px,#fff 6.5px 32.5px);padding:1rem;margin-bottom:1rem;border-radius:6px;width:100%;min-height:100px}.demo-area#btn-demo{display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap}@media(min-width:768px){.demo-area#btn-demo{flex-direction:row}}.demo-area .example-btn{display:flex;align-items:center;justify-content:center;gap:.5rem;height:35px}.demo-area .example-btn:not(.link-style):not(.link-style-combo){background-color:var(--color-demo-btn);color:var(--color-demo-btn-text)}.demo-area .example-btn:not(.link-style):not(.link-style-combo) #SVGRepo_iconCarrier path{stroke:var(--color-demo-btn-text)}.demo-area .example-btn:not(.link-style):not(.link-style-combo):hover,.demo-area .example-btn:not(.link-style):not(.link-style-combo):active,.demo-area .example-btn:not(.link-style):not(.link-style-combo):focus{background-color:var(--color-bright-yellow);color:var(--color-demo-btn-text)}.demo-area .example-btn:not(.link-style):not(.link-style-combo):hover #SVGRepo_iconCarrier path,.demo-area .example-btn:not(.link-style):not(.link-style-combo):active #SVGRepo_iconCarrier path,.demo-area .example-btn:not(.link-style):not(.link-style-combo):focus #SVGRepo_iconCarrier path{stroke:var(--color-demo-btn-text)}.demo-area .example-btn.link-style,.demo-area .example-btn.link-style-combo{padding:0;background:none;border:none;border-radius:0;color:var(--color-link)}.demo-area .example-btn.link-style #SVGRepo_iconCarrier path,.demo-area .example-btn.link-style-combo #SVGRepo_iconCarrier path{stroke:var(--color-link)}.demo-area .example-btn.link-style:hover,.demo-area .example-btn.link-style:active,.demo-area .example-btn.link-style:focus,.demo-area .example-btn.link-style-combo:hover,.demo-area .example-btn.link-style-combo:active,.demo-area .example-btn.link-style-combo:focus{color:var(--color-link-hover)}.demo-area .example-btn.link-style:hover #SVGRepo_iconCarrier path,.demo-area .example-btn.link-style:active #SVGRepo_iconCarrier path,.demo-area .example-btn.link-style:focus #SVGRepo_iconCarrier path,.demo-area .example-btn.link-style-combo:hover #SVGRepo_iconCarrier path,.demo-area .example-btn.link-style-combo:active #SVGRepo_iconCarrier path,.demo-area .example-btn.link-style-combo:focus #SVGRepo_iconCarrier path{stroke:var(--color-link-hover)}.demo-area .dialog-trigger{margin:auto;display:block}.demo-area .dialog-trigger:focus-visible{outline:2px solid var(--color-primary)}.demo-area #example-dialog{background-color:var(--color-bg);box-shadow:0 0 5px #00000080;border:none;border-radius:10px;color:var(--color-text);position:fixed;padding:2rem 2.2rem;margin:auto!important;height:auto;max-height:fit-content;max-width:900px;overflow-y:hidden;width:90vw}.demo-area #btn-dialog-close{padding:0;background:none;border:none;border-radius:0;width:30px;height:30px}.demo-area #btn-dialog-close:focus-visible{outline-color:var(--color-primary)}.demo-area .dialog-top{display:flex;justify-content:space-between;margin-bottom:1rem}.demo-area .dialog-top h1{font-size:2rem}dialog::backdrop{background:#0009}[data-theme=dark] .demo-area{border:3px dashed #2a2a2a;background:repeating-linear-gradient(-45deg,#2a2a2a,#2a2a2a 6.5px,#1a1a1a 6.5px 32.5px)}[data-theme=dark] .demo-area #btn-dialog-close svg path{fill:var(--color-accent-light)}