:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;--base-00:#fff;--base-05:#f5f5f5;--base-10:#eaeaea;--base-101:#d5d5d5;--base-103:#b0b0b0;--base-104:#9e9e9e;--base-20:gray;--base-30:#707070;--base-40:#606060;--base-50:#505050;--base-60:#404040;--base-70:#303030;--base-80:#202020;--base-90:#101010;--base-100:#000;color:#ffffffde;--header-background:var(--base-05);--primary-color:#002ba5;--border-radius:5px;--primary-color-light:#c3d3ff;--primary-color-lighter:#e3e9ff;--secondary-color:#007acc;--secondary-color-alt:#0ea5e9;--secondary-color-light:#45b4ff;--blockquote-border-color:#38bdf8;--error-color-light:#ff9e97;--error-color:#ff4437;--error-color-dark:#ac0c01;--sucess-color-02:#baffbf;--sucess-color-light:#6bff77;--sucess-color:#02b94f;--sucess-color-dark:#03860e;--sucess-color-15:#006408;--font-weight-regular:400;--font-weight-bold:700;--max-width:1200px;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#242424;font-weight:400;line-height:1.5}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}html{scroll-behavior:smooth;font-size:16px}:root{--cc-font-base:clamp(1rem, calc(.955rem + .227vw), 1.13rem);--cc-font-small:clamp(.88rem, calc(.835rem + .199vw), .98rem);--cc-font-h1:clamp(2.25rem, calc(2.148rem + .511vw), 2.53rem);--cc-font-h2:clamp(2rem, calc(1.909rem + .455vw), 2.25rem);--cc-font-h3:clamp(1.75rem, calc(1.67rem + .398vw), 1.97rem);--cc-font-h4:clamp(1.5rem, calc(1.432rem + .341vw), 1.69rem);--cc-font-h5:clamp(1.25rem, calc(1.193rem + .284vw), 1.41rem);--cc-font-h6:clamp(1.13rem, calc(1.074rem + .256vw), 1.27rem)}@font-face{font-family:Inter;src:local(Inter Regular),local(Inter-Regular),url(/fonts/inter/Inter-Regular.woff2)format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Inter;src:local(Inter Italic),local(Inter-Italic),url(/fonts/inter/Inter-Italic.woff2)format("woff2");font-weight:400;font-style:italic;font-display:swap;unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Inter;src:local(Inter Bold),local(Inter-Bold),url(/fonts/inter/Inter-Bold.woff2)format("woff2");font-weight:700;font-style:normal;font-display:swap;unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Roboto Mono;src:local(Roboto Mono),local(Roboto Mono Regular),local(RobotoMono-Regular),url(/fonts/roboto-mono/RobotoMono-Regular.woff2)format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+??}@font-face{font-family:Roboto Mono;src:local(Roboto Mono Bold),local(RobotoMono-Bold),url(/fonts/roboto-mono/RobotoMono-Bold.woff2)format("woff2");font-weight:700;font-style:normal;font-display:swap;unicode-range:U+??}body{font-family:Inter,ui-sans-serif,system-ui,sans-serif;font-weight:400;line-height:1.5}h1,h2,h3,h4,h5,h6{font-family:Inter,ui-sans-serif,system-ui,sans-serif;font-weight:700;line-height:1.4}code,pre{font-family:Roboto Mono,monospace;font-weight:inherit;font-size:inherit}body,p,.cc-body,.cc-p{font-size:var(--cc-font-base)}small,caption,.cc-small,.cc-caption{font-size:var(--cc-font-small)}h1,.cc-h1{font-size:var(--cc-font-h1)}h2,.cc-h2{font-size:var(--cc-font-h2)}h3,.cc-h3{font-size:var(--cc-font-h3)}h4,.cc-h4{font-size:var(--cc-font-h4)}h5,.cc-h5{font-size:var(--cc-font-h5)}h6,.cc-h6{font-size:var(--cc-font-h6)}:before,:after{box-sizing:border-box}a{font-weight:inherit;border-bottom:1px solid var(--primary-color);color:inherit;padding-inline:.3rem;text-decoration:none;transition:background .3s}a:hover{background-color:var(--primary-color);color:#fff}body{text-align:center;color:#333;background-color:#f4f4f4;flex-direction:column;align-content:center;place-items:center;width:100%;min-width:320px;min-height:100vh;margin:0 auto;display:flex;max-width:100vw!important}#root{width:100%}.code-box{color:#f8f8f2;border-radius:var(--border-radius);white-space:pre;text-align:left;background:#272822;width:100%;max-width:100%;padding:1rem;font-size:.9rem;overflow-x:auto}.code-box code{font-size:.82rem;line-height:1.6}button{font-size:1em;font-weight:inherit;background-color:var(--base-30);cursor:pointer;color:var(--base-00);border:1px solid #0000;border-radius:8px;padding:.6em 1.2em;font-family:inherit;transition:border-color .25s}button:hover{border-color:var(--base-00);background-color:var(--base-00);color:var(--base-70)}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}.skip-link{color:#fff;z-index:100;font-weight:var(--font-weight-regular);background-color:#000;font-size:.95rem;text-decoration:none;transition:top .3s;position:absolute;top:-40px;left:0}.skip-link:focus,.skip-link:active{top:0}.header-container{flex-flow:wrap;flex:2;place-content:center space-between;align-items:center;width:100%;max-width:1200px;height:50px;margin:auto;display:flex}.logo{will-change:filter;flex:1;align-content:center;align-items:center;height:auto;margin-right:.5rem;padding:.2em;transition:filter .3s;display:inline-flex}.logo-link{border-bottom:unset;cursor:pointer}.logo-link:hover{border-bottom:unset;background-color:unset}.logo svg{height:auto}svg.mobile-logo-svg{width:50px!important}svg.desktop-logo-svg{display:none;width:180px!important}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}.card{padding:2em}.read-the-docs{color:#888}.App{text-align:center;padding:20px;font-family:Arial,sans-serif}h1,h2,h3{color:#333}p{color:var(--base-80);padding:.5rem 0}*{box-sizing:border-box;margin:0;padding:0}.App-header{background-color:var(--base-00);color:var(--primary-color);z-index:100;justify-content:space-between;align-items:center;width:100%;padding:10px 20px;display:flex;position:sticky;top:0}.nav{justify-content:center;display:flex}.nav-list{gap:1rem;margin:0;padding:0;list-style:none;display:flex}.nav-item{margin:0}.nav-link{font-weight:var(--font-weight-bold);border-bottom:unset;color:var(--primary-color);border-radius:var(--border-radius);background-color:var(--primary-color-lighter);vertical-align:middle;flex-direction:row;align-content:center;align-items:flex-start;gap:2px;width:100%;padding:.5rem 1rem;text-decoration:none;transition:background .3s;display:flex}a.nav-link svg{width:24px;height:24px}.nav-link:hover{border-bottom:unset;color:#fff;background-color:var(--header-color);background:var(--primary-color)}span.nav-link-text{padding-left:5px}nav ul li{margin:0 15px}main{background-color:var(--base-00);flex-direction:column;width:100%;min-height:100vh;display:flex}.App{flex-direction:column;justify-content:center;align-items:center;width:100%;max-width:1200px;margin:0 auto;display:flex}li.nav-item.slug-blog{display:none}.nav-text-desktop{display:inline}.nav-text-mobile{display:none}@media (width<=1080px){.nav-text-desktop{display:none}.nav-text-mobile{display:inline}}@media (width>=768px){svg.mobile-logo-svg{display:none}svg.desktop-logo-svg{display:block;width:180px!important}li.nav-item.slug-blog{display:block}.header-container{height:70px}}@media (width<=768px){.App-header,.App-header nav ul{align-items:center}.App-header nav ul li{margin:10px 0}.nav{flex:4;height:30px!important}.nav-link{padding:.2rem}}@media (width<=480px){.App-header nav ul li{font-size:.9em}.App{padding:10px}}.site-footer{text-align:center;font-size:var(--cc-font-small);background:var(--base-05);padding:2rem 1rem}.footer-links{margin-bottom:.5rem}.footer-link{color:var(--primary-color)}.footer-link:hover{text-decoration:none}.footer-credit{color:#9ca3af;margin-top:.5rem}.footer-made{color:var(--base-60);padding-top:1rem}.heart{transform-origin:50%;animation:1.8s infinite pulse;display:inline-block}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.2)}}.ad-section{text-align:center;border:1px solid #d3d3d3;width:100%}.ad-container{text-align:center;width:100%;max-width:100%;min-height:100px;padding:1rem 0;display:block;position:relative;overflow:hidden}.ad-label{text-transform:uppercase;letter-spacing:.05em;color:#999;font-size:.7rem;font-weight:var(--font-weight-regular);text-align:center;margin:0 auto;position:absolute;top:.2rem}ul.no-bullets{text-indent:-1.8rem;list-style:none}section.blog-preview{max-width:1200px;margin:0 auto;padding:1rem}.blog-preview-list{flex-flow:wrap;justify-content:center;align-items:flex-start;gap:1.5rem;list-style:none;display:flex}.blog-preview-card{background:#fff;border-radius:12px;flex-direction:column;width:320px;display:flex;overflow:hidden;box-shadow:0 2px 10px #0000000d}.blog-preview-figure{aspect-ratio:16/9;background:url(/favicon.svg) 50%/48px 48px no-repeat;justify-content:center;align-items:center;width:100%;display:flex;overflow:hidden}.blog-preview-image{object-fit:cover;width:100%;height:auto;display:block}a.blog-preview-link:hover{padding-inline:unset}.blog-preview-content{border-top:1px solid var(--primary-color-light);padding:1rem}.blog-preview-content h3{font-size:var(--cc-font-p)}.blog-preview-content p{font-size:var(--cc-font-small);-webkit-line-clamp:3;text-overflow:ellipsis;-webkit-box-orient:vertical;max-height:5.4em;line-height:1.5;display:-webkit-box;overflow:hidden}a.blog-preview-link{border-radius:12px;padding-inline:unset!important;border-bottom:unset!important;margin:0!important;padding:0!important}li.blog-preview-item:focus-visible{outline:none;margin:0;padding:0}.controls-header{flex-flow:wrap;justify-content:space-between;gap:1rem;width:100%;display:flex}.controls-group.single.laycal{flex-direction:column;align-items:flex-start;gap:.5rem;display:flex}.controls-group-wrapper{flex-flow:column wrap;place-content:center;align-items:center;gap:.5rem;width:100%;display:flex}.controls-group-row.left-right-input{flex-flow:wrap;place-content:center;align-items:center;gap:1rem;display:flex}.controls-group.double.top-input{order:unset!important}.image-wrapper{width:100%;max-width:100%;margin:0 auto;display:block}.inline-image{object-fit:cover;max-width:100%;height:auto;display:block}.as-16x9{aspect-ratio:16/9;width:100%;max-width:clamp(320px,203.636px + 36.364vw,640px);height:auto}.as-1x1{aspect-ratio:1;width:clamp(320px,203.636px + 36.364vw,640px);height:auto}.as-16x9.w-500,.as-1x1.w-500{width:clamp(320px,254.545px + 20.455vw,500px)}.flex-row{gap:1rem;display:flex;flex-direction:row!important}.space-between{align-content:space-between;justify-content:space-between!important}.flex-1{flex:1}.flex-0-6{flex:.6}.center{text-align:center;place-content:center;place-self:center;place-items:center}.wrap{flex-wrap:wrap}.article-header-wrapper{background-color:#fff;background-position:50%;background-size:cover;background-attachment:fixed;min-height:250px}.article-header-wrapper.header-bg-image{background-image:url(/images/header-background.svg)}.article-header{background-color:#fff9;margin:0 auto;padding:clamp(20px,9.091px + 3.409vw,50px) clamp(10px,6.364px + 1.136vw,20px);max-width:840px!important}p.article-meta-by{font-size:var(--cc-small)}ul.meta-tags{padding-top:1rem;padding-left:unset;flex-flow:wrap;place-content:center flex-start;align-items:center;gap:.5rem;list-style:none;display:flex}li.meta-tag-item{background-color:var(--header-background);border-radius:5px;padding:2px 12px}nav.breadcrumb ol{list-style:none;display:flex}.breadcrumb{margin-bottom:1rem;font-size:.875rem}.breadcrumb-item{display:inline}.breadcrumb-item+.breadcrumb-item:before{content:">";color:var(--base-40);margin:0 .5rem}.faq-section{padding-top:clamp(10px,2.727px + 2.273vw,30px)}.faq-question{font-weight:var(--font-weight-bold)}.faq-item{border:1px solid var(--primary-color-light,#ddd);background:var(--base-10);border-radius:6px;margin-bottom:1rem;transition:all .3s;overflow:hidden}.faq-item summary{font-weight:var(--font-weight-regular);font-size:var(--cc-font-base);cursor:pointer;padding:1rem;list-style:none;position:relative}.faq-item summary::-webkit-details-marker{display:none}.faq-item summary:after{content:"+";font-size:1.2rem;transition:transform .3s;position:absolute;right:1rem}.faq-item[open] summary:after{content:"-"}.faq-answer{max-height:0;color:var(--cc-text-secondary,#666);padding:0 1rem;transition:max-height .3s,padding .3s;overflow:hidden}.faq-item[open] .faq-answer{max-height:500px;padding:0 1rem 1rem}.note-box{border-left:4px solid var(--blockquote-border-color);color:var(--primary-color);background-color:#ddf4ff;border-radius:6px;margin:1.5rem 0;padding:1rem 1.25rem}.warning-box{border-left:4px solid var(--error-color);color:var(--error-color-dark);background-color:#ffdbd9;border-radius:6px;margin:1.5rem 0;padding:1rem 1.25rem}.tip-box{background-color:var(--sucess-color-02);border-left:4px solid var(--sucess-color);color:var(--sucess-color-15);border-radius:6px;margin:1.5rem 0;padding:1rem 1.25rem}.tip-box code,.warning-box code,.note-box code{background:var(--base-00);border-radius:var(--border-radius);padding-inline:.3em}.tip-box code{color:var(--sucess-color-15)}.warning-box code{color:var(--error-color-dark)}.note-box code{color:var(--primary-color)}.article-body.single-column{border:unset;text-align:left;margin:0 auto}.table-wrapper{-webkit-overflow-scrolling:touch;max-width:100%;margin:.5rem 0;overflow-x:auto}.custom-table{border-collapse:collapse;table-layout:auto;width:auto;min-width:100%}.custom-table th,.custom-table td{text-align:left;vertical-align:top;white-space:normal;overflow-wrap:break-word;word-break:keep-all;border:1px solid #ccc;padding:.5rem 1rem;min-width:fit-content!important}.custom-table th{font-weight:var(--font-weight-bold);background-color:#f9f9f9}.comment-callout{background:var(--base-05);border-top:4px solid var(--secondary-color-alt);border-bottom-left-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius);margin-top:2rem;padding:1rem;font-size:.95rem}.comment-callout a{font-weight:var(--font-weight-bold);color:var(--secondary-color-alt);margin-top:.5rem;text-decoration:underline;display:inline-block}.comment-callout button{background-color:var(--secondary-color-alt);color:#fff;cursor:pointer;font-weight:var(--font-weight-bold);border:none;border-radius:4px;margin-top:.5rem;padding:.5rem 1rem}.comment-modal-overlay{z-index:1000;background:#00000080;position:fixed;inset:0}.comment-modal-content{background:#fff;border-radius:8px;max-width:800px;margin:5vh auto;position:relative;overflow:hidden}.modal-close{cursor:pointer;background:0 0;border:none;font-size:1.5rem;position:absolute;top:1rem;right:1rem}.meta-published-info{border-top:1px solid var(--base-10);margin-top:1rem;padding-top:.5rem}.image-link{border-bottom:unset!important;font-weight:unset!important;padding-inline:unset!important;transition:unset!important}.image-link:hover{padding-inline:unset;background-color:unset!important}.codepen{box-sizing:border-box;border:2px solid;justify-content:center;align-items:center;height:300px;margin:1em 0;padding:1em;display:flex}.homepage-hero{text-align:center;background:linear-gradient(to bottom, var(--base-05), #f5f5f500);flex-direction:column;justify-content:center;align-items:center;display:flex}.homepage-hero-content{text-align:center;width:100%;max-width:820px;margin-inline:auto;padding-block:clamp(16px,10.182px + 1.818vw,32px);padding-inline:clamp(16px,10.182px + 1.818vw,32px)}.hero-title{font-size:var(--cc-font-h2);font-weight:var(--font-weight-bold);letter-spacing:-.01em;word-wrap:break-word;margin-bottom:1.25rem}.primary-color{color:var(--primary-color);font-size:110%}.hero-description{font-family:var(--font-body,"Inter", sans-serif);font-size:var(--cc-font-h6);color:var(--base-90);max-width:65ch;margin-inline:auto;line-height:1.6}.hero-subtext{font-size:var(--cc-font-base);font-weight:var(--font-weight-bold);color:var(--base-80);letter-spacing:.15px;margin-top:.5rem;font-style:italic}.hero-description strong{font-weight:var(--font-weight-bold);color:var(--base-100)}.tool-selector{flex-direction:column;gap:1.5rem;display:flex}.tool-message{background:var(--base-05);border-left:4px solid var(--primary-color-light);border-right:4px solid var(--primary-color-light);border-top:1px solid var(--primary-color-light);border-bottom:1px solid var(--primary-color-light);border-radius:6px;margin-top:2rem;padding:1.5rem;font-size:1.1rem;line-height:1.6}.tool-message strong{color:var(--primary-color)}.tool-message-subtext{font-size:var(--cc-font-h3);font-weight:var(--font-weight-regular);color:var(--base-70);text-align:center;margin-top:.5rem}@media (width>=768px){.tool-selector{flex-direction:row;justify-content:center}}.tool-card{background:var(--primary-color);color:var(--base-00);border:1px solid #ddd;border-radius:8px;max-width:320px;padding:1.5rem 2rem;text-decoration:none;transition:box-shadow .2s,transform .2s;box-shadow:0 0 #0000}a.tool-card h2,a.tool-card p{color:var(--base-00)}.tool-card:hover{background-color:var(--primary-color-light);color:var(--primary-color);transform:translateY(-3px);box-shadow:0 8px 20px #0000001a}a.tool-card:hover h2,a.tool-card:hover p{color:var(--primary-color)}.section-image-container{flex:1;width:100%}.homepage .section-image{aspect-ratio:1;border-radius:var(--border-radius);max-width:500px;height:auto}.features-grid{flex-wrap:wrap;justify-content:center;gap:1.5rem;margin-top:2rem;display:flex}.feature-card{background:var(--base-00);border:1px solid var(--primary-color-light);text-align:start;border-radius:8px;width:320px;padding:2.5rem 1.5rem 1.5rem;transition:transform .3s,box-shadow .3s;position:relative;overflow:visible;box-shadow:0 2px 6px #0000000f}.feature-card:hover{transform:translateY(-6px);box-shadow:0 8px 18px #0000001a}.feature-icon-wrapper{margin-bottom:1rem}.feature-main-icon{width:48px;height:48px}.feature-text{font-size:110%;font-weight:var(--font-weight-regular);color:var(--primary-color);line-height:1.6}.feature-card.has-checkmark:before{content:"";border:2px solid var(--sucess-color);background:#fff url(/icons/checkmark.svg) 50%/cover no-repeat;border-radius:50%;width:24px;height:24px;position:absolute;top:-10px;left:1rem;box-shadow:0 2px 4px #0000001a}section.section-content.section-features{background-color:var(--base-05);align-content:center;align-items:center}.section-features .section-content-wrapper{justify-content:center}.homepage-tool-reminder{text-align:center;margin-top:4rem}.homepage-tool-reminder h2{margin-bottom:.5rem;font-size:2rem}.homepage-subtext{font-size:var(--cc-font-h4);color:var(--base-70);margin-bottom:2rem}.section-content.homepage-tool-reminder{align-content:center;align-items:center;display:flex}.align-center{place-content:center!important}footer.homepage-footer-note{padding:1rem 0}.homepage-footer-note-tagline{font-size:var(--cc-font-h5)}.flex{display:flex}.flex-row{flex-direction:row}.gap{gap:1rem}.jc-space-between{justify-content:space-between}.calculator-container{flex-direction:column;place-content:center;align-items:center;gap:2rem;width:100%;max-width:640px;margin:0 auto;padding:2rem 0;display:flex}.controls{background:#f5f5f5;border-radius:5px;flex-flow:wrap;place-content:center;gap:1.5rem;width:100%;padding:1rem;display:flex}.controls-group{background:#fff;border-radius:5px;flex-direction:column;gap:.5rem;padding:.5rem;display:flex;width:290px!important}.font-size-input-container{flex-direction:column!important;gap:.5rem!important}.controls-group.single{flex-direction:row;order:1;place-content:center;align-items:center;gap:1rem;display:flex}.controls-label{font-weight:var(--font-weight-bold);text-align:start;margin-bottom:0}.control-unit{color:#888;font-size:.9em}.control-unit:before{content:" ["}.control-unit:after{content:"]"}.controls-group.double .controls-input-pair{gap:1rem;display:flex}.controls-input-wrapper{flex-direction:column;align-items:flex-start;gap:0;width:100%;display:flex}.controls-input{border:.5px solid #d3d3d3;border-radius:5px;width:100%;padding:.3rem .5rem;font-size:1rem}.controls-unit{color:#666;font-size:.9rem}.controls-group.single.prefix-input{flex-flow:column wrap;order:2;gap:0;display:flex}.controls-group.double{order:3}@media (width<=768px){.controls-group.single.prefix-input{order:4;gap:.5rem}}.prefix-input .controls-input-wrapper{flex:1.6}.prefix-input .controls-label{flex:1;padding-right:5px}.controls-tip{color:#717171;font-size:.8rem}.code-output{background:#f7f7f7;border-radius:8px;width:100%;max-width:100%;padding:1.5rem;overflow:auto;box-shadow:0 0 0 1px #e0e0e0}.code-output-header{flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:.5rem;display:flex}.code-output-title{font-size:1.25rem;font-weight:var(--font-weight-bold);color:#333;margin:0}.code-output-subtitle{text-align:start;font-size:var(--cc-font-base)}.code-output-actions{gap:.75rem;display:flex}.code-action-block{position:relative}.code-action-block code{text-wrap:auto;overflow-wrap:break-word;width:100%;display:block;overflow:auto}.code-box-wrapper{position:relative}.code-output-block{padding-top:1rem}.layout-size .code-output-block{padding-top:0!important}.floating-copy{z-index:2;color:#222;cursor:pointer;background:#fffd;border:1px solid #ccc;border-radius:4px;padding:.3rem .6rem;font-size:.85rem;transition:background .2s;position:absolute;top:.5rem;right:.5rem}.floating-copy:hover{background:#f1f1f1}.code-button{cursor:pointer;background:#fff;border:1px solid #ccc;border-radius:5px;padding:.5rem 1rem;font-size:.95rem;transition:all .2s}.code-button:hover{background:#eaeaea}.preview-list{background:#f7f7f7;border-radius:8px;width:100%;max-width:100%;padding:1.5rem;overflow:hidden;box-shadow:0 0 0 1px #e0e0e0}h2.preview-list-title{text-align:left;border-bottom:1px solid #626161}.preview-container{background-color:#fff;border-radius:5px;margin-top:.5rem;padding:1rem}.preview-item{border-bottom:1px solid #ccc;flex-flow:wrap;place-content:center flex-start;align-items:flex-start;gap:1rem;width:100%;padding:1rem;display:flex;overflow:hidden}.preview-input{flex-direction:column;flex:1;align-items:flex-start;display:flex}.preview-input-wrapper{width:100%;max-width:150px;margin-top:.5rem}.preview-input-range{width:100%}.preview-div-live{white-space:nowrap;text-overflow:ellipsis;object-fit:contain;flex-wrap:nowrap;flex:2.5;place-content:center flex-start;align-self:center;align-items:center;max-width:100%;display:inline-flex;overflow:hidden;overflow-x:scroll!important}button.share-button{background-color:var(--primary-color-light);color:var(--primary-color);font-weight:var(--font-weight-bold);font-size:var(--cc-font-h6)}.share-button:hover{background:var(--primary-color);color:var(--base-00)}.preview-list:target{outline-offset:10px;background-color:#f0fff4;outline:2px solid #38b000;transition:all .3s}a.code-preview-button{background-color:var(--primary-color);color:var(--base-00);font-weight:var(--font-weight-bold);border-radius:5px;padding:4px 8px;text-decoration:none;transition:all .3s}.code-preview-button:hover{background-color:var(--primary-color-light);color:var(--primary-color);transition:all .3s}section.code-output-block.css-block{padding-top:2rem}.tool-switcher{flex-direction:column;margin:auto;padding:1rem;display:flex}a.tool-button.secondary{background-color:var(--primary-color-lighter);border:1px solid var(--primary-color);border-radius:5px;padding:.6rem;transition:all .3s}a.tool-button.secondary:hover{border:1px solid var(--primary-color-light);background-color:var(--primary-color-light);color:var(--primary-color);transition:all .3s}.font-size .section-content{margin:1rem auto}.section-content{max-width:var(--max-width);background-color:var(--base-05);border-radius:10px;flex-flow:column wrap;flex:1;align-content:flex-start;align-items:flex-start;gap:1rem;width:100%;margin:1.5rem auto;padding:clamp(20px,12.727px + 2.273vw,40px);display:flex}.section-content-wrapper{flex-flow:wrap;justify-content:space-between;width:100%;display:flex}.section-content-container{text-align:left;flex:1;max-width:100%;padding:0 20px}.section-content-container p{padding:.5rem 0}.section-content-container ul{margin-left:20px;padding:.5rem 0}.section-content-container li{padding:3px 0}h2.know-font-size-calculator{padding:1rem}.section-content-container .code-box{width:fit-content;padding:.5rem 1rem}header.section-heading h3,.preview-list h2{font-size:var(--cc-font-h4)}h3.global-font-section-heading{font-size:var(--cc-font-base)!important}.preview-font-family{min-width:160px}.global-font-settings{flex-direction:column;align-content:flex-start;gap:1rem;display:flex}.global-font-control{flex:1;gap:5px;width:100%;display:inline-flex}.global-font-control label{font-size:90%!important}.global-font-control.preview-text-input-wrapper{flex-direction:column;display:flex}.preview-text-input{min-height:30px;padding-inline:5px}.preview-item-header-row{flex-direction:row;place-content:center space-between;align-items:center;width:100%;display:flex}.preview-reset-button{background-color:var(--primary-color-light);border-color:var(--primary-color-light);color:var(--base-00);cursor:pointer;vertical-align:middle;border-radius:8px;place-content:center;align-items:center;width:30px;height:30px;padding:4px;font-size:.85rem;transition:all .3s;display:flex}button.preview-reset-button:disabled{cursor:not-allowed;background:var(--base-20);opacity:.6}button:disabled{color:#666;cursor:not-allowed;opacity:.6;background-color:#ccc}.button-text.left{padding-left:5px}.preview-reset-button:hover{transition:all .2s;opacity:.8!important;border:1px solid var(--primary-color)!important}.preview-typescale-viewport{flex-flow:wrap;justify-content:space-between;align-items:center;width:100%;display:flex}.preview-control{flex-direction:column;width:100%;max-width:240px;display:flex}.preview-samples{flex-direction:column;place-content:flex-start center;align-items:flex-start;gap:10px;width:100%;display:flex}.preiview-wrapper{place-content:center flex-start;align-items:center;gap:5px;width:100%;display:flex}.preview-icon{width:30px;height:30px}span.tooltip{background-color:var(--base-30);color:var(--base-05);cursor:help;vertical-align:middle;border-radius:50%;justify-content:center;align-items:center;width:1rem;height:1rem;margin-left:.3rem;font-size:.75rem;line-height:1;display:inline-flex;position:relative;top:-5px}.no-gap{gap:unset}.w-80{width:80px}.controls-group-header-wrapper{flex-flow:wrap;place-content:center space-between;align-items:flex-start;width:100%;display:flex}.controls-input-wrapper label{font-size:small}.toggle-switch-wrapper{align-items:center;gap:.5rem;display:flex}.toggle-switch{width:42px;height:22px;display:inline-block;position:relative}.toggle-switch input{opacity:0;width:0;height:0}.toggle-switch .slider{cursor:pointer;background-color:#ccc;border-radius:22px;transition:all .3s;position:absolute;inset:0}.toggle-switch .slider:before{content:"";background-color:#fff;border-radius:50%;width:16px;height:16px;transition:all .3s;position:absolute;bottom:3px;left:4px}.toggle-switch input:checked+.slider{background-color:#4caf50}.toggle-switch input:checked+.slider:before{transform:translate(20px)}.unit-label{font-size:.9rem}.output-unit-block{flex-wrap:wrap;justify-content:space-between;width:100%}.viewport-unit-input{border-color:var(--secondary-color);color:var(--primary-color)}.blog-article-layout{padding:1rem;display:block}.article-title{margin:0;font-size:2rem}.article-meta{color:#666;margin-top:.5rem;font-size:.9rem}.featured-image{object-fit:cover;width:100%;height:auto;margin-bottom:1rem}.blog-grid{text-align:left;flex-flow:column wrap;justify-content:center;display:flex}.sidebar-left,.sidebar-right{border-top:1px solid var(--primary-color-light);border-bottom:1px solid var(--primary-color-light);flex-direction:column;padding:1rem}.sidebar-left{display:none}.article-body{border:1px solid var(--primary-color-light);flex-direction:column;flex:1;order:1;gap:0;width:100%;max-width:100%;padding:1rem;display:flex}.article-body>section{border-bottom:1px solid var(--base-10);padding-block:clamp(1.5rem,1.1rem + 1.5vw,2.5rem)}.article-body>section:first-child{padding-top:.75rem}.article-body>section:last-of-type{border-bottom:0}.article-body section>:first-child{margin-top:0}.article-body p,.article-body li{line-height:1.7}.sidebar-right{order:2;display:flex}.article-footer{text-align:center;margin-top:3rem}.ad-container{flex-direction:column;justify-content:center;align-items:center;margin-inline:auto;display:flex;overflow:hidden}.article-inline-ad,.article-ad-320x120{width:100%;max-width:320px;min-height:120px;max-height:120px;margin-inline:auto}.ad-label{color:#6b7280;letter-spacing:.08em;text-transform:uppercase;font-size:.7rem}.unit-converter-media{align-items:start;gap:1.25rem;display:grid}.css-unit-converter{border:1px solid var(--primary-color-light);border-radius:var(--border-radius);background:var(--primary-color-lighter);padding:1rem}.converter-input-row,.converter-results{grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;margin-top:.75rem;display:grid}.converter-input-row label{gap:.25rem;font-size:.85rem;font-weight:600;display:grid}.converter-input-row input,.converter-input-row select{border:1px solid var(--base-20);color:#111;width:100%;font:inherit;background:#fff;border-radius:4px;padding:.55rem}.converter-results{grid-template-columns:1fr}.converter-results div{border-bottom:1px solid var(--base-10);justify-content:space-between;gap:1rem;padding-block:.45rem;display:flex}.converter-results dd{font-family:var(--font-family-code);margin:0;font-weight:700}.converter-note{margin-bottom:0;font-size:.85rem}@media (width>=900px){.unit-converter-media{grid-template-columns:minmax(0,1fr) minmax(260px,.8fr)}}@media (width>=768px){.blog-grid{flex-direction:row;width:100%;margin:0 auto}.article-body{order:1;width:100%;max-width:75%;display:flex}.sidebar-left,.sidebar-right{align-self:start;position:-webkit-sticky;top:70px;position:sticky!important}.sidebar-left{order:1;max-width:20%;display:none}.sidebar-right{order:2;max-width:25%;display:flex}}@media (width>=1024px){.blog-grid{flex-direction:row;width:100%;max-width:1400px;margin:0 auto}.article-body{flex:none;order:2;width:100%;max-width:680px;display:flex}.sidebar-left,.sidebar-right{flex:1;align-self:start;width:100%;max-width:360px;display:flex;position:-webkit-sticky;top:70px;position:sticky!important}.sidebar-left{order:1}.sidebar-right{order:3}.sidebar-left h2,.sidebar-right h2{margin-bottom:1rem;font-size:1.5rem}.sidebar-left ul,.sidebar-right ul{padding-left:0;list-style:none}.sidebar-left li,.sidebar-right li{margin:.5rem 0}}.ad-box{text-align:center;background:#f5f5f5;border:1px dashed #ccc;margin-bottom:1rem;padding:1rem;font-size:.85rem}.blog-toc{margin-bottom:2rem;font-size:.95rem}.blog-toc-heading{font-weight:var(--font-weight-bold);margin-bottom:.5rem}.blog-toc ul{padding-left:0;list-style:none}.blog-toc li{margin:.25rem 0}.blog-toc a{border-bottom:1px solid #0000}.toc-level-3{padding-left:1rem;font-size:.9em}.article-body ul,.article-body ol{padding-left:1.5rem}.article-body,.sidebar-left,.sidebar-right{word-break:break-word}h2{font-size:var(--cc-font-h3);padding-top:1rem}figure{width:100%}figcaption{font-size:small}figure.image-block{border-top:1px solid var(--base-10);border-bottom:1px solid var(--base-10);width:100%}h3{font-size:var(--cc-font-h5);padding-top:1.2rem}p.webpage{border:1px solid var(--primary-color);border-radius:var(--border-radius);background-color:var(--primary-color-lighter);margin:.5rem 0;padding:1rem}section.blog-section{width:100%;max-width:840px;margin:auto;padding:30px 0}.blog-header{border-bottom:1px solid var(--primary-color-light);background-color:#fff;min-height:250px;margin:1rem;padding:2rem}.featured-app-card{max-width:300px;color:#fff;background-color:var(--primary-color);border:1px solid var(--primary-color);border-radius:5px;text-decoration:none;display:inline-block;overflow:hidden;border-bottom:1px solid #0000!important}.featured-app-image{width:100%;height:auto;display:block}.featured-app-content{text-align:center;font-weight:var(--font-weight-bold);background-color:var(--primary-color);color:var(--base-00);border-bottom-radius:var(--border-radius);border-bottom-right-radius:5px;border-bottom-left-radius:5px;padding:1rem 1rem -10px;font-size:1rem;line-height:1.4}.featured-apps.flex-row{flex-wrap:wrap;justify-content:center}.featured-app-content h2{font-size:var(--cc-font-h5);color:#fff;padding:1rem 0}.pillar-article-image{aspect-ratio:16/9;width:100%;max-width:320px;height:auto}.pillar-article-content{text-align:left}.pillar-article-content h2{font-size:var(--cc-font-h5)}.pillar-article{border-top:1px solid var(--primary-color-light);border-bottom:1px solid var(--primary-color-light);background-color:var(--primary-color-lighter);border-radius:5px;flex-direction:column;flex:1;width:80%;margin:2rem auto;padding:40px 20px;display:flex}img.pillar-article-image.inline-image{display:none}@media (width>=768px){.featured-apps>*{flex:1}img.pillar-article-image.inline-image{display:block!important}.pillar-article{width:100%}.blog-preview-card{flex-direction:row;display:flex;width:100%!important}.blog-preview-content{border-top:unset;text-align:start;padding-top:1rem}}.contact-form{flex-direction:column;width:100%;max-width:500px;margin:0 auto;display:flex}.form-group{margin-bottom:1rem}.form-control{width:100%;padding:.75rem;font-size:1rem}.form-submit{background:var(--secondary-color);color:#fff;font-weight:var(--font-weight-bold);cursor:pointer;border:none;padding:.75rem 1.5rem}.form-status{background:var(--base-10);border-left:4px solid var(--secondary-color);margin-top:1rem;padding:1rem;font-size:1rem}.review-scale label{font-weight:var(--font-weight-bold);margin-bottom:.25rem;display:block}