@layer components{.pattern-library_wrap{color:#173347;--pattern-blue:#0875bb;background:#fff}.pattern-library_wrap [hidden]{display:none!important}.pattern-library_wrap button{cursor:pointer;font:inherit}.pattern-library_wrap a{text-underline-offset:.2em}.pattern-library_wrap :is(button,a,input,summary,textarea):focus-visible{outline-offset:.25rem;outline:.1875rem solid #0875bb}.pattern-library_wrap h1,.pattern-library_wrap h2,.pattern-library_wrap h3{font-family:var(--font-space-grotesk),sans-serif;letter-spacing:-.035em;font-weight:700}.pattern-library_wrap h1{margin:.9rem 0 1.4rem;font-size:clamp(2.5rem,4.2vw,4rem);line-height:1.12}.pattern-library_wrap h2{margin:.6rem 0 1rem;font-size:2rem;line-height:1.25}.pattern-library_wrap p{line-height:1.7}.pattern-library_wrap .pattern-library_container{width:calc(100% - 3rem);max-width:77.625rem;margin-inline:auto}.pattern-library_wrap .pattern-library_hero{background:#eef7fc;border-bottom:.0625rem solid #dbe9f2;padding:1.5rem 0 0}.pattern-library_wrap .pattern-library_intro{grid-template-columns:1.4fr 1fr;align-items:center;gap:6rem;padding:3rem 0 3.5rem;display:grid}.pattern-library_wrap .pattern-library_intro>div>p:not(.pattern-library_eyebrow){color:#526b7b;max-width:48ch;margin-bottom:2rem;font-size:1.125rem}.pattern-library_wrap .pattern-library_eyebrow{letter-spacing:.14em;color:#55758b;margin:0;font-size:.7rem;font-weight:700}.pattern-library_wrap .pattern-library_primary{background:var(--pattern-blue);color:#fff;border-radius:.35rem;align-items:center;gap:2rem;padding:.875rem 1.25rem;font-size:.9rem;font-weight:600;text-decoration:none;display:inline-flex}.pattern-library_wrap .pattern-library_help{color:#28485f;margin-left:1.5rem;font-size:.875rem}.pattern-library_wrap .pattern-library_steps{background:#fff;border:.0625rem solid #dae7ee;border-radius:.8rem;padding:2rem;box-shadow:0 .6rem 2rem #19476b06}.pattern-library_wrap .pattern-library_symbol{color:var(--pattern-blue);background:#eaf5fc;border-radius:.5rem;place-items:center;width:3rem;height:3rem;font-size:2rem;display:inline-grid}.pattern-library_wrap .pattern-library_steps h2{margin:1.25rem 0;font-size:1.3rem}.pattern-library_wrap .pattern-library_steps ol{margin:0;padding:0;list-style:none}.pattern-library_wrap .pattern-library_steps li{border-bottom:.0625rem solid #edf1f4;padding:.7rem 0;font-size:.9rem}.pattern-library_wrap .pattern-library_steps li span{color:#6c8ca3;margin-right:1rem;font-size:.75rem}.pattern-library_wrap .pattern-library_steps p{color:#6c8090;margin:1rem 0 0;font-size:.75rem}.pattern-library_wrap .pattern-library_hero-foot{color:#587287;border-top:.0625rem solid #d9e7f0;justify-content:space-between;padding:1.1rem 0;font-size:.75rem;display:flex}.pattern-library_wrap .pattern-library_collection{padding-block:3.5rem;scroll-margin-top:7rem}.pattern-library_wrap .pattern-library_collection-head{justify-content:space-between;align-items:center;gap:2rem;margin-bottom:1.7rem;display:flex}.pattern-library_wrap .pattern-library_collection-head a{color:#47677e;white-space:nowrap;font-size:.8rem}.pattern-library_wrap .pattern-library_toolbar{align-items:center;gap:1rem;margin-bottom:1.25rem;display:flex}.pattern-library_wrap .pattern-library_search{background:#f6f9fb;border:.0625rem solid #d9e4ec;border-radius:.4rem;flex:1;align-items:center;gap:.75rem;padding:.75rem 1rem;display:flex}.pattern-library_wrap .pattern-library_search>span{font-size:1.6rem;line-height:1}.pattern-library_wrap .pattern-library_search input{width:100%;font:inherit;color:inherit;background:0 0;border:0;font-size:.9rem}.pattern-library_wrap .pattern-library_toolbar>button{background:#fff;border:.0625rem solid #d9e4ec;border-radius:.4rem;min-height:2.75rem;padding:.75rem 1rem;font-size:.8rem}.pattern-library_wrap .pattern-library_filters{border-bottom:.0625rem solid #e1e9ef;flex-wrap:wrap;gap:.5rem;padding-bottom:1.4rem;display:flex}.pattern-library_wrap .pattern-library_filters button{color:#536c7d;background:#fff;border:.0625rem solid #e1e9ef;border-radius:.35rem;min-height:2.75rem;padding:.5rem .8rem;font-size:.8rem}.pattern-library_wrap .pattern-library_filters [aria-pressed=true]{color:#076aaa;background:#eaf5fc;border-color:#aad2ed;font-weight:600}.pattern-library_wrap .pattern-library_filters span{margin-left:.5rem;font-size:.7rem}.pattern-library_wrap .pattern-library_results{color:#6c8090;justify-content:space-between;align-items:center;margin:1.4rem 0;font-size:.75rem;display:flex}.pattern-library_wrap .pattern-library_results p{color:#324f64;margin:0;font-weight:600}.pattern-library_wrap .pattern-library_list{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem;display:grid}.pattern-library_wrap .pattern-library_card{background:#fff;border:.0625rem solid #dfe7ed;border-radius:.6rem;flex-direction:column;display:flex;overflow:hidden}.pattern-library_wrap .pattern-library_preview{background:#f1f5f7;border:0;border-bottom:.0625rem solid #e0e8ee;width:100%;padding:0;display:block;position:relative}.pattern-library_wrap .pattern-library_preview img{aspect-ratio:8/4.4;object-fit:contain;background:#f3f6f8;width:100%;display:block}.pattern-library_wrap .pattern-library_preview>span{color:#37576c;background:#fffffff0;border:.0625rem solid #dfe7ed;border-radius:.25rem;padding:.25rem .5rem;font-size:.65rem;position:absolute;bottom:.65rem;right:.65rem}.pattern-library_wrap .pattern-library_card-body{flex-direction:column;flex:1;padding:1.25rem;display:flex}.pattern-library_wrap .pattern-library_tag{text-transform:uppercase;letter-spacing:.08em;color:#557d96;margin:0 0 .5rem;font-size:.625rem}.pattern-library_wrap .pattern-library_card h3{letter-spacing:-.02em;margin:0 0 .5rem;font-size:1.1rem;line-height:1.4}.pattern-library_wrap .pattern-library_author{color:#70818e;margin:0 0 1.25rem;font-size:.75rem}.pattern-library_wrap .pattern-library_card-actions{justify-content:space-between;align-items:center;gap:.6rem;margin-top:auto;display:flex}.pattern-library_wrap .pattern-library_card-actions button,.pattern-library_wrap .pattern-library_dialog-actions button{color:#fff;background:#0875bb;border:0;border-radius:.3rem;min-height:2.75rem;padding:.75rem .8rem;font-size:.75rem;font-weight:600}.pattern-library_wrap :is(.pattern-library_card-actions,.pattern-library_dialog-actions) button{justify-content:center;align-items:center;gap:.5rem;display:inline-flex}.pattern-library_wrap :is(.pattern-library_card-actions,.pattern-library_dialog-actions) button svg{flex-shrink:0;width:1rem;height:1rem}.pattern-library_wrap .pattern-library_card-actions a{color:#557084;font-size:.7rem}.pattern-library_wrap details{color:#6c8090;margin-top:.9rem;font-size:.7rem}.pattern-library_wrap summary{cursor:pointer;padding:.3rem 0}.pattern-library_wrap textarea{color:#173347;background:#f6f9fb;border:.0625rem solid #ccdce6;width:100%;height:10rem;margin-top:.5rem;padding:.5rem;font:.75rem/1.5 monospace}.pattern-library_wrap .pattern-library_credit{color:#6a7f8f;margin-top:1.75rem;font-size:.75rem}.pattern-library_wrap .pattern-library_guide{background:#f1f7fb;border-top:.0625rem solid #e3edf4;padding:4rem 0;scroll-margin-top:2rem}.pattern-library_wrap .pattern-library_guide-heading{justify-content:space-between;align-items:center;gap:3rem;margin-bottom:2rem;display:flex}.pattern-library_wrap .pattern-library_guide-heading h2{margin:.75rem 0 0;font-size:clamp(1.8rem,3vw,2.5rem);line-height:1.2}.pattern-library_wrap .pattern-library_guide-heading>p{color:#587185;max-width:34ch;margin:0;font-size:.95rem}.pattern-library_wrap .pattern-library_guide-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem;margin:0;padding:0;list-style:none;display:grid}.pattern-library_wrap .pattern-library_guide-list>li{background:#fff;border:.0625rem solid #dce8f0;border-radius:.75rem;flex-direction:column;padding:1.75rem;display:flex}.pattern-library_wrap .pattern-library_guide-top{justify-content:space-between;align-items:center;margin-bottom:1.75rem;display:flex}.pattern-library_wrap .pattern-library_guide-icon{color:#0875bb;background:#edf7fe;border-radius:.65rem;place-items:center;width:3rem;height:3rem;display:grid}.pattern-library_wrap .pattern-library_guide-icon svg{width:1.5rem;height:1.5rem}.pattern-library_wrap .pattern-library_guide-step{letter-spacing:.12em;color:#6b879b;font-size:.65rem;font-weight:600}.pattern-library_wrap .pattern-library_guide-list h3{letter-spacing:-.025em;margin:0 0 .75rem;font-size:1.2rem}.pattern-library_wrap .pattern-library_guide-list p{color:#5b7284;margin:0 0 1.75rem;font-size:.875rem}.pattern-library_wrap .pattern-library_guide-list a{color:#0875bb;justify-content:space-between;align-items:center;min-height:2.5rem;margin-top:auto;font-size:.8rem;font-weight:600;text-decoration:none;display:flex}.pattern-library_wrap .pattern-library_shortcut{color:#6a8294;flex-wrap:wrap;align-items:center;gap:.35rem;min-height:2.5rem;margin-top:auto;font-size:.7rem;display:flex}.pattern-library_wrap .pattern-library_shortcut kbd{color:#37596f;background:#f9fbfc;border:.0625rem solid #dce6ee;border-bottom-width:.1875rem;border-radius:.3rem;place-items:center;min-width:1.75rem;height:1.75rem;font:.8rem/1 inherit;display:grid}.pattern-library_wrap .pattern-library_shortcut>span{margin-left:.3rem}.pattern-library_wrap .pattern-library_guide-ready{color:#51736c;align-items:center;gap:.5rem;min-height:2.5rem;margin-top:auto;font-size:.8rem;display:flex}.pattern-library_wrap .pattern-library_guide-ready>span{color:#277151;background:#edf6f1;border-radius:50%;place-items:center;width:1.4rem;height:1.4rem;display:grid}.pattern-library_wrap .pattern-library_guide-tip{border:.0625rem solid #dce8f0;border-radius:.5rem;align-items:center;gap:1rem;margin-top:1.5rem;padding:1.1rem 1.25rem;display:flex}.pattern-library_wrap .pattern-library_guide-tip-icon{color:#557c97;font:.9rem monospace}.pattern-library_wrap .pattern-library_guide-tip p{color:#5c768a;margin:0;font-size:.8rem}.pattern-library_wrap .pattern-library_guide-tip strong{color:#274c64}.pattern-library_wrap .pattern-library_dialog{color:#173347;border:.0625rem solid #d9e6ef;border-radius:.75rem;width:min(66rem,100% - 2rem);max-height:90vh;padding:1.5rem}.pattern-library_wrap .pattern-library_dialog::backdrop{background:#0f273ab8}.pattern-library_wrap .pattern-library_dialog-head{justify-content:space-between;align-items:center;gap:1rem;display:flex}.pattern-library_wrap .pattern-library_dialog-head h2{font-size:1.4rem}.pattern-library_wrap .pattern-library_dialog-head button{background:#edf4f9;border:0;border-radius:.3rem;min-width:2.75rem;min-height:2.75rem}.pattern-library_wrap .pattern-library_dialog img{background:#f3f6f9;width:100%;height:auto;display:block}.pattern-library_wrap .pattern-library_dialog>p{color:#637b8e;font-size:.8rem}.pattern-library_wrap .pattern-library_dialog-actions{align-items:center;gap:1.5rem;font-size:.8rem;display:flex}.pattern-library_wrap .pattern-library_toast{z-index:1000;color:#fff;background:#163b52;border-radius:.5rem;width:max-content;max-width:calc(100% - 2rem);padding:1rem 1.5rem;font-size:.875rem;position:fixed;bottom:1.5rem;left:50%;transform:translate(-50%);box-shadow:0 .5rem 2rem #0002}@media (max-width:60rem){.pattern-library_wrap .pattern-library_intro{gap:2rem}.pattern-library_wrap .pattern-library_guide-list>li{padding:1.25rem}.pattern-library_wrap .pattern-library_list{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:40rem){.pattern-library_wrap .pattern-library_guide-heading{flex-direction:column;align-items:start;gap:1rem}.pattern-library_wrap .pattern-library_guide-heading>p{max-width:none}.pattern-library_wrap .pattern-library_guide{padding-block:2.5rem}.pattern-library_wrap .pattern-library_intro{grid-template-columns:1fr;padding-block:2rem}.pattern-library_wrap .pattern-library_steps{padding:1.5rem}.pattern-library_wrap .pattern-library_hero-foot{flex-direction:column;gap:.5rem}.pattern-library_wrap .pattern-library_collection-head{display:block}.pattern-library_wrap .pattern-library_collection-head h2{font-size:1.7rem}.pattern-library_wrap .pattern-library_list,.pattern-library_wrap .pattern-library_guide-list{grid-template-columns:1fr}.pattern-library_wrap .pattern-library_results>span{display:none}.pattern-library_wrap .pattern-library_help{margin-left:1rem}.pattern-library_wrap .pattern-library_toolbar{align-items:stretch}.pattern-library_wrap .pattern-library_toolbar>button{padding:.5rem}.pattern-library_wrap .pattern-library_collection{padding-block:2.5rem}}}