.examples_container__gW04g{padding:32px;max-width:1200px;width:100%;margin-left:auto;margin-right:auto}.examples_sectionTitle__COtFK{font-size:2rem;font-weight:700;margin-top:0;margin-bottom:0;color:hsl(180,60%,25%)}.examples_sectionDescription__XBuq2{font-size:1.1rem;line-height:1.6;margin-top:0;margin-bottom:0;color:hsl(180,40%,40%)}.examples_demoSection__zEv2e{width:100%}.examples_demoSectionHeader__yA_1T{margin-bottom:16px}.examples_demoSectionTitle__gANUs{font-size:1.5rem;font-weight:600;margin-top:0;margin-bottom:0}.examples_demoSectionDescription__Z4QRw{font-size:1rem;line-height:1.5;margin-top:0;margin-bottom:0}.examples_demoSectionContent__VpT6J{padding:24px;border-width:1px;border-style:solid;border-radius:12px;background-color:white}.examples_implementationNotes__y_qvF{padding:24px;border-width:1px;border-style:solid;border-radius:12px;margin-top:32px}.examples_implementationNotesTitle__m6Bim{font-size:1.25rem;font-weight:600;margin-top:0;margin-bottom:0}.examples_implementationNotesList__3Zu5u{margin-top:16px;margin-bottom:0;padding-left:24px}.examples_implementationNotesList__3Zu5u li{margin-bottom:8px;line-height:1.5}.examples_implementationNotesList__3Zu5u li:last-child{margin-bottom:0}@media (max-width:768px){.examples_container__gW04g{padding:24px}.examples_sectionTitle__COtFK{font-size:1.75rem}.examples_sectionDescription__XBuq2{font-size:1rem}.examples_demoSectionContent__VpT6J,.examples_implementationNotes__y_qvF{padding:16px}}@media (max-width:480px){.examples_container__gW04g{padding:16px}.examples_sectionTitle__COtFK{font-size:1.5rem}.examples_demoSectionTitle__gANUs{font-size:1.25rem}.examples_demoSectionContent__VpT6J{padding:12px}}.Menu_menuRoot__3mvVm{position:relative;gap:12px}.Menu_menuList__fCbom,.Menu_menuRoot__3mvVm{display:flex;flex-direction:row;align-items:center;justify-content:flex-start}.Menu_menuList__fCbom{gap:8px;list-style-type:none;margin:0;padding:0}.Menu_triggerButton__qyviX{border-width:0;border-style:none;background-color:transparent;cursor:pointer;padding:6px 12px;border-radius:6px;font-size:.95rem;font-weight:500;line-height:1.2;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:6px;transition:background-color .15s ease,color .15s ease}.Menu_triggerButtonDark__1yCJb{color:white}.Menu_triggerButtonLight__s77mU{color:black}.Menu_triggerButtonOpenLight__z5m8s{background-color:rgba(255,255,255,.65)}.Menu_triggerButtonOpenDark__qYYuZ{background-color:rgba(0,0,0,.25)}.Menu_dropdownContainer__q0RUo{position:absolute;top:100%;left:0;z-index:9999;min-width:220px;padding:4px 0}.Menu_dropdownPanel__ZtmWw{border-width:1px;border-style:solid;border-radius:8px;backdrop-filter:blur(8px);overflow:hidden;box-shadow:0 4px 12px rgba(0,0,0,.25)}.Menu_dropdownList___UAlx{list-style-type:none;margin:0;padding:4px;display:flex;flex-direction:column;gap:2px}.Menu_dropdownItemButton__2VxF2{width:100%;text-align:left;cursor:pointer;border-width:0;border-style:none;background-color:transparent;padding:8px 10px;border-radius:6px;font-size:.85rem;line-height:1.25;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:2px;transition:background-color .12s ease,color .12s ease}.Menu_dropdownItemLabel__L2ZWB{font-weight:500;margin:0}.Menu_dropdownItemDescription__aYpTI{font-size:.7rem;opacity:.75;margin:0}.Menu_dropdownItemLightHover__e9Acd{background-color:rgba(255,255,255,.85)}.Menu_dropdownItemDarkHover__7qS_5{background-color:rgba(0,0,0,.35)}.Menu_dropdownItemSelectedLight__0JVyT{outline:2px solid rgba(0,0,0,.35);outline-offset:0}.Menu_dropdownItemSelectedDark__UVKkZ{outline:2px solid rgba(255,255,255,.45);outline-offset:0}.Menu_visuallyHidden__RRF6L{position:absolute;width:1px;height:1px;padding:0;margin:-1px 0 0 -1px;overflow:hidden;clip:rect(0 0 0 0);border-width:0}.Header_header__AF_3G{border-bottom-width:1px;border-bottom-style:solid;padding:1rem 2rem;min-height:4rem;box-shadow:0 2px 4px hsla(180,50%,20%,.1)}.Header_title__a3JC3{font-size:1.25rem;font-weight:700}.Header_subtitle__sBTEk{font-size:.875rem;font-weight:400;opacity:.8}.Header_navLink__bX76H{text-decoration:none;padding:.5rem 1rem;border-radius:.375rem;transition:all .2s ease-in-out;font-size:.875rem;font-weight:500;border:1px solid transparent}.Header_navLink__bX76H:hover:not(.Header_navLinkActive__ielxB){background-color:hsl(180,30%,92%);border-color:hsl(180,30%,80%)}.Header_navLinkActive__ielxB{font-weight:600;background-color:hsl(25,40%,92%);border-color:hsl(25,30%,80%);color:hsl(25,60%,40%)}.Header_debugButton__vGC4f{border-width:0;border-radius:6px;padding:6px 12px;font-size:.75rem;font-weight:600;cursor:pointer;transition:all .2s ease;text-transform:uppercase;letter-spacing:.5px;color:white}.Header_debugButton__vGC4f:hover{transform:translateY(-1px);box-shadow:0 2px 4px rgba(0,0,0,.2)}.Header_debugButton__vGC4f:not(:hover){transform:translateY(0);box-shadow:none}.Header_debugButtonOn__QyKvY{background-color:hsl(120,60%,50%)}.Header_debugButtonOff__ixlTL{background-color:hsl(180,60%,50%)}.examples_container__eKaHo{padding:2rem;max-width:1200px;width:100%;align-self:center}.examples_sectionTitle__0s3o3{font-size:2rem;font-weight:700;margin:0;color:hsl(220,60%,25%)}.examples_sectionDescription__46SqE{font-size:1.125rem;line-height:1.6;margin:0;color:hsl(220,40%,40%)}.examples_demoSection__4c2rl{margin-bottom:2rem}.examples_demoSectionHeader__pApxE{margin-bottom:.5rem}.examples_demoSectionTitle__0WoSQ{font-size:1.5rem;font-weight:600;margin:0}.examples_demoSectionDescription__4HlSJ{margin:0;line-height:1.5}.examples_demoSectionContent__eoUIm{border-width:1px;border-style:solid;border-radius:.5rem;padding:1rem}.examples_implementationNotes__3qtd5{margin-top:3rem;padding:1.5rem;border-width:1px;border-style:solid;border-radius:.5rem}.examples_implementationNotesTitle__cJ3mz{font-size:1.25rem;font-weight:600;margin:0}.examples_implementationNotesList__QgFlj{line-height:1.6;padding-left:1.5rem;margin:1rem 0 0}@media (max-width:768px){.examples_container__eKaHo{padding:1rem}.examples_sectionTitle__0s3o3{font-size:1.75rem}.examples_sectionDescription__46SqE{font-size:1rem}.examples_implementationNotes__3qtd5{padding:1rem}}.examples_examplesRoot__DOIbh{padding:16px}.examples_grid__BvicE{display:flex;flex-direction:row;flex-wrap:wrap;gap:24px}.examples_exampleCard___Aeon{flex-grow:1;flex-basis:320px;border:1px solid rgba(0,0,0,.1);border-radius:8px;padding:12px}.examples_heading__w81RH{font-size:1.1rem;font-weight:600;margin:0 0 8px}.HueExplorer_root__majkS{padding:4px}.HueExplorer_gridWrapper__iTj4P,.HueExplorer_row__32bep{gap:0;flex-shrink:0;flex-grow:0;overflow:hidden}.HueExplorer_cell__fZ_Xu{width:24px;height:24px;min-width:24px;max-width:24px;min-height:24px;max-height:24px;flex-shrink:0;flex-grow:0;box-sizing:border-box;margin:0;padding:0;border-width:0;border-style:none;background-color:transparent;font-family:inherit;font-size:inherit;line-height:1;overflow:hidden}.HueExplorer_label__lHQQ1{font-size:.75rem;font-family:monospace;user-select:none}.examples_gradientBox__mjo7i{min-height:200px;border-radius:8px;overflow:hidden}.examples_presetBox__1NnmJ{height:60px;border-radius:4px;border:1px solid rgba(0,0,0,.1)}.examples_code__ZalVg{font-family:Courier New,monospace;font-size:.875rem;line-height:1.5;margin:0;padding:0;overflow-x:auto;white-space:pre-wrap;word-wrap:break-word}.Hero_hero__XMryK{display:block;position:relative}.Hero_heroVideo__iljmM{position:absolute;top:50%;left:50%;min-width:100%;min-height:100%;width:auto;height:auto;transform:translate(-50%,-50%);object-fit:cover;z-index:0}.examples_heroContainer__xmBiP{border-radius:8px;overflow:hidden;margin:1rem 0;box-shadow:0 4px 12px rgba(0,0,0,.1)}.examples_code__tC_JL{font-family:Courier New,monospace;font-size:.875rem;line-height:1.5;margin:1rem 0 0;padding:0;overflow-x:auto;white-space:pre-wrap;word-wrap:break-word}.Icon_icon__1cvPn{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:hsl(var(--hue,0),0%,30%);transition-property:color,opacity,transform;transition-duration:.2s;transition-timing-function:ease-in-out}.Icon_sm__MaIdO{width:1rem;height:1rem;font-size:1rem}.Icon_md__rdfZe{width:1.5rem;height:1.5rem;font-size:1.5rem}.Icon_lg__hOU_k{width:2rem;height:2rem;font-size:2rem}.Icon_xl__wuwzh{width:3rem;height:3rem;font-size:3rem}.Icon_default__6FSWa{color:hsl(var(--hue,0),60%,40%);opacity:1}.Icon_light__rf9xk{color:hsl(var(--hue,0),60%,80%);opacity:1}.Icon_dark__MgN1E{color:hsl(var(--hue,0),60%,20%);opacity:1}.Icon_icon__1cvPn:hover{opacity:.8;transform:scale(1.05)}.Icon_icon__1cvPn:focus-visible{outline-width:2px;outline-style:solid;outline-color:hsl(var(--hue,0),60%,50%);outline-offset:2px}.Icon_icon__1cvPn:active{transform:scale(.95)}.Icon_icon__1cvPn:disabled,.Icon_icon__1cvPn[aria-disabled=true]{opacity:.5;cursor:not-allowed;pointer-events:none}.Icon_decorative__b1sE0{pointer-events:none}.Icon_decorative__b1sE0:focus-visible{outline-width:0}@media (max-width:768px){.Icon_xl__wuwzh{width:2.5rem;height:2.5rem;font-size:2.5rem}}@media (max-width:480px){.Icon_lg__hOU_k{width:1.5rem;height:1.5rem;font-size:1.5rem}.Icon_xl__wuwzh{width:2rem;height:2rem;font-size:2rem}}@keyframes Icon_spin__xezXn{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.Icon_spinning__41Amv{animation-name:Icon_spin__xezXn;animation-duration:1s;animation-timing-function:linear;animation-iteration-count:infinite}@keyframes Icon_pulse__RTK0W{0%,to{opacity:1}50%{opacity:.5}}.Icon_pulsing__neW5d{animation-name:Icon_pulse__RTK0W;animation-duration:2s;animation-timing-function:ease-in-out;animation-iteration-count:infinite}.examples_preview__2AJpT{margin-top:1.5rem;margin-bottom:1.5rem;padding:1.5rem;background-color:hsl(0,0%,98%);border:1px solid hsl(0,0%,90%);border-radius:.5rem;min-height:100px;display:flex;align-items:center}.examples_code__O5BPE{margin:1rem 0 0;padding:1rem;background-color:hsl(0,0%,16%);color:hsl(0,0%,90%);font-size:.8125rem;font-family:monospace;overflow-x:auto;border-radius:.375rem;line-height:1.5}@media (max-width:768px){.examples_preview__2AJpT{padding:1rem}.examples_code__O5BPE{font-size:.75rem}}.playground_playgroundContent__0hM27{width:100%;padding:24px}.playground_configSummary__FNaMb{padding:16px;border:1px solid hsl(180,20%,85%);border-radius:8px;background-color:white}.playground_select__o6Ovc{width:100%;padding:8px 12px;border:1px solid hsl(180,30%,80%);border-radius:6px;background-color:white;font-size:.875rem}.playground_select__o6Ovc:focus{outline:none;border-color:hsl(180,60%,45%);box-shadow:0 0 0 2px hsla(180,60%,45%,.25)}@media (max-width:768px){.playground_playgroundContent__0hM27{padding:16px}.playground_configSummary__FNaMb{padding:12px}}.playground_playgroundContent__o_Fwc{min-height:600px;padding:2rem}.playground_configSummary__Cc0_2{background-color:hsl(220,20%,96%);border:1px solid hsl(220,20%,88%);border-radius:6px;padding:1rem;font-family:Courier New,monospace;font-size:.75rem;white-space:pre-wrap;overflow-x:auto}.playground_demoCard__bMPtt{transition:transform .2s ease-in-out}.playground_demoCard__bMPtt:hover{transform:translateY(-2px)}.playground_colorSwatch__Vyw6x{width:24px;height:24px;border-radius:4px;border:2px solid white;box-shadow:0 0 0 1px hsl(220,20%,80%)}@media (max-width:768px){.playground_playgroundContent__o_Fwc{padding:1rem}}.playground_gradientPreview__D2BZy{width:100%;height:300px;border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,.15);transition-property:box-shadow;transition-duration:.2s;transition-timing-function:ease}.playground_gradientPreview__D2BZy:hover{box-shadow:0 6px 16px rgba(0,0,0,.2)}.playground_colorStopContainer__BLu_B{padding:1rem;border:1px solid hsl(225,30%,85%);border-radius:8px;background-color:hsl(225,10%,98%)}.playground_colorStopContainer__BLu_B:hover{border-color:hsl(225,30%,75%);background-color:hsl(225,10%,96%)}.playground_huePreview__iycA9{display:inline-block;width:16px;height:16px;border-radius:50%;border:2px solid hsl(225,30%,85%);margin-left:8px;vertical-align:middle}.playground_removeButton__xQYVw{background-color:hsl(0,70%,55%);color:white;border-width:0;width:28px;height:28px;border-radius:4px;cursor:pointer;font-size:1.25rem;font-weight:600;display:flex;align-items:center;justify-content:center;transition-property:all;transition-duration:.2s;transition-timing-function:ease}.playground_removeButton__xQYVw:hover{background-color:hsl(0,70%,45%);transform:scale(1.1)}.playground_removeButton__xQYVw:active{transform:scale(.95)}.playground_addButton__R0G2Z{background-color:hsl(120,70%,55%);color:white;border-width:0;padding:10px 16px;border-radius:6px;cursor:pointer;font-weight:600;font-size:.9375rem;transition-property:all;transition-duration:.2s;transition-timing-function:ease;width:100%}.playground_addButton__R0G2Z:hover{background-color:hsl(120,70%,45%);transform:translateY(-2px);box-shadow:0 4px 8px rgba(0,0,0,.15)}.playground_addButton__R0G2Z:active{transform:translateY(0)}.playground_presetButton__eeTUf{background-color:hsl(210,70%,55%);color:white;border-width:0;padding:10px 16px;border-radius:6px;cursor:pointer;font-weight:500;font-size:.875rem;text-transform:capitalize;transition-property:all;transition-duration:.2s;transition-timing-function:ease;width:100%}.playground_presetButton__eeTUf:hover{background-color:hsl(210,70%,45%);transform:translateY(-2px);box-shadow:0 4px 8px rgba(0,0,0,.15)}.playground_presetButton__eeTUf:active{transform:translateY(0)}.playground_copyButton__gfhh5{background-color:hsl(270,70%,55%);color:white;border-width:0;padding:10px 16px;border-radius:6px;cursor:pointer;font-weight:600;font-size:.9375rem;transition-property:all;transition-duration:.2s;transition-timing-function:ease;width:100%}.playground_copyButton__gfhh5:hover{background-color:hsl(270,70%,45%);transform:translateY(-2px);box-shadow:0 4px 8px rgba(0,0,0,.15)}.playground_copyButton__gfhh5:active{transform:translateY(0)}.playground_codeDisplay__kWBQ_{font-size:.8125rem;background-color:white;padding:1rem;border:1px solid hsl(180,30%,85%);border-radius:6px}.playground_codeDisplay__kWBQ_,.playground_configDisplay__t52rR{margin:0;font-family:Courier New,monospace;color:hsl(180,50%,30%);overflow-x:auto;white-space:pre}.playground_configDisplay__t52rR{font-size:.75rem;background-color:hsl(180,10%,98%);padding:.75rem;border:1px solid hsl(180,30%,85%);border-radius:4px;max-height:250px;overflow-y:auto}.playground_errorBox__vx9yJ{background-color:hsl(0,70%,95%);color:hsl(0,70%,30%);padding:1rem;border-radius:6px;border:1px solid hsl(0,70%,80%);font-size:.875rem}@media (max-width:768px){.playground_gradientPreview__D2BZy{height:250px}.playground_codeDisplay__kWBQ_{font-size:.75rem}.playground_configDisplay__t52rR{font-size:.6875rem}.playground_colorStopContainer__BLu_B{padding:.75rem}}.playground_previewContainer__47EoP{width:100%;border-radius:12px;overflow:hidden;box-shadow:0 4px 12px rgba(0,0,0,.15)}.playground_colorStopContainer__5orLR{padding:1rem;border:1px solid hsl(225,30%,85%);border-radius:8px;background-color:hsl(225,10%,98%)}.playground_colorStopContainer__5orLR:hover{border-color:hsl(225,30%,75%);background-color:hsl(225,10%,96%)}.playground_huePreview__dzirl{display:inline-block;width:16px;height:16px;border-radius:50%;border:2px solid hsl(225,30%,85%);margin-left:8px;vertical-align:middle}.playground_removeButton___k7Li{background-color:hsl(0,70%,55%);color:white;border-width:0;width:28px;height:28px;border-radius:4px;cursor:pointer;font-size:1.25rem;font-weight:600;display:flex;align-items:center;justify-content:center;transition-property:all;transition-duration:.2s;transition-timing-function:ease}.playground_removeButton___k7Li:hover{background-color:hsl(0,70%,45%);transform:scale(1.1)}.playground_removeButton___k7Li:active{transform:scale(.95)}.playground_addButton__iZq3G{background-color:hsl(120,70%,55%);color:white;border-width:0;padding:10px 16px;border-radius:6px;cursor:pointer;font-weight:600;font-size:.9375rem;transition-property:all;transition-duration:.2s;transition-timing-function:ease;width:100%}.playground_addButton__iZq3G:hover{background-color:hsl(120,70%,45%);transform:translateY(-2px);box-shadow:0 4px 8px rgba(0,0,0,.15)}.playground_addButton__iZq3G:active{transform:translateY(0)}.playground_copyButton__wITdG{background-color:hsl(180,70%,45%);color:white;border-width:0;padding:10px 16px;border-radius:6px;cursor:pointer;font-weight:600;font-size:.9375rem;transition-property:all;transition-duration:.2s;transition-timing-function:ease;width:100%}.playground_copyButton__wITdG:hover{background-color:hsl(180,70%,35%);transform:translateY(-2px);box-shadow:0 4px 8px rgba(0,0,0,.15)}.playground_copyButton__wITdG:active{transform:translateY(0)}.playground_codeDisplay__JliSb{margin:0;font-size:.8125rem;font-family:Courier New,monospace;color:hsl(180,50%,30%);background-color:white;padding:1rem;border:1px solid hsl(180,30%,85%);border-radius:6px;overflow-x:auto;white-space:pre}.playground_colorPicker__SNJA7{width:100%;height:50px;border-radius:6px;border:1px solid hsl(225,30%,85%);cursor:pointer}@media (max-width:768px){.playground_previewContainer__47EoP{border-radius:8px}.playground_codeDisplay__JliSb{font-size:.75rem}.playground_colorStopContainer__5orLR{padding:.75rem}}.playground_previewContainer__9_1v_{background-color:hsl(220,20%,98%);border:1px solid hsl(220,20%,90%);border-radius:8px;padding:2rem;display:flex;align-items:center;justify-content:center;min-height:200px}.playground_codeDisplay__BVE6x{background-color:hsl(220,20%,96%);border:1px solid hsl(220,20%,85%);border-radius:6px;padding:1rem;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:.875rem;line-height:1.5;overflow-x:auto;white-space:pre;margin-top:0;margin-bottom:0;max-height:400px;overflow-y:auto}.playground_copyButton__BJt_v{background-color:hsl(270,60%,50%);color:white;border-width:0;border-radius:6px;padding:12px 24px;font-size:.875rem;font-weight:500;cursor:pointer;transition:background-color .2s ease-in-out;align-self:flex-start}.playground_copyButton__BJt_v:hover{background-color:hsl(270,60%,45%)}.playground_copyButton__BJt_v:active{background-color:hsl(270,60%,40%)}.playground_colorSwatch__dBHpr{display:inline-block;width:16px;height:16px;border-radius:3px;margin-right:8px;vertical-align:middle;border:1px solid hsl(220,20%,80%)}@media (max-width:768px){.playground_previewContainer__9_1v_{padding:1rem}.playground_codeDisplay__BVE6x{font-size:.8125rem;padding:.75rem}}