[{"data":1,"prerenderedAt":6163},["ShallowReactive",2],{"navigation_en":3,"-docs-theme-utilities-composables-effects":407,"-docs-theme-utilities-composables-effects-surround":6158},{"gettingStarted":4,"api":57,"theme":148},[5],{"title":6,"icon":7,"path":8,"stem":9,"children":10,"page":7},"Getting Started",false,"/docs/getting-started","docs/getting-started",[11,16,21,26,31,52],{"title":12,"path":13,"stem":14,"icon":15},"Introduction","/docs/getting-started/introduction","docs/getting-started/01.introduction","i-lucide-house",{"title":17,"path":18,"stem":19,"icon":20},"Installation","/docs/getting-started/installation","docs/getting-started/02.installation","i-lucide-download",{"title":22,"path":23,"stem":24,"icon":25},"Guides","/docs/getting-started/guides","docs/getting-started/03.guides","i-lucide-book-open",{"title":27,"path":28,"stem":29,"icon":30},"Comparisons","/docs/getting-started/comparisons","docs/getting-started/04.comparisons","i-lucide-file-diff",{"title":32,"icon":33,"path":34,"stem":35,"children":36,"page":7},"Tooling","i-lucide-hammer","/docs/getting-started/tooling","docs/getting-started/05.tooling",[37,42,47],{"title":38,"path":39,"stem":40,"icon":41},"CLI Reference","/docs/getting-started/tooling/cli","docs/getting-started/05.tooling/01.cli","i-lucide-square-terminal",{"title":43,"path":44,"stem":45,"icon":46},"Utility Scanner","/docs/getting-started/tooling/scanner","docs/getting-started/05.tooling/02.scanner","i-lucide-view",{"title":48,"path":49,"stem":50,"icon":51},"Figma Plugin","/docs/getting-started/tooling/figma-plugin","docs/getting-started/05.tooling/03.figma-plugin","i-simple-icons-figma",{"title":53,"path":54,"stem":55,"icon":56},"Licensing","/docs/getting-started/licensing","docs/getting-started/06.licensing","i-lucide-scale",[58],{"title":59,"path":60,"stem":61,"children":62,"icon":7},"API Reference","/docs/api","docs/api/00.index",[63,66,71,76,81,86,91,96,101,106,111,116,131,136,141,146],{"title":64,"path":60,"stem":61,"icon":65},"Overview","i-lucide-book-text",{"title":67,"path":68,"stem":69,"icon":70},"Instance","/docs/api/instance","docs/api/01.instance","i-lucide-cloud-lightning",{"title":72,"path":73,"stem":74,"icon":75},"Variables","/docs/api/variables","docs/api/02.variables","i-lucide-variable",{"title":77,"path":78,"stem":79,"icon":80},"Selectors","/docs/api/selectors","docs/api/03.selectors","i-lucide-scan-text",{"title":82,"path":83,"stem":84,"icon":85},"At-Rules","/docs/api/at-rules","docs/api/04.at-rules","i-lucide-at-sign",{"title":87,"path":88,"stem":89,"icon":90},"Media Queries","/docs/api/media-queries","docs/api/05.media-queries","i-lucide-image-upscale",{"title":92,"path":93,"stem":94,"icon":95},"Keyframes","/docs/api/keyframes","docs/api/06.keyframes","i-lucide-square-play",{"title":97,"path":98,"stem":99,"icon":100},"Interpolation","/docs/api/interpolation","docs/api/07.interpolation","i-lucide-wrap-text",{"title":102,"path":103,"stem":104,"icon":105},"Utilities","/docs/api/utilities","docs/api/08.utilities","i-lucide-sparkles",{"title":107,"path":108,"stem":109,"icon":110},"Utility Modifiers","/docs/api/utility-modifiers","docs/api/09.utility-modifiers","i-lucide-align-horizontal-justify-center",{"title":112,"path":113,"stem":114,"icon":115},"Themes","/docs/api/themes","docs/api/10.themes","i-lucide-paintbrush",{"title":117,"path":118,"stem":119,"children":120,"icon":130},"Recipes","/docs/api/recipes","docs/api/11.recipes/00.index",[121,122,126],{"title":64,"path":118,"stem":119},{"title":123,"path":124,"stem":125},"Runtime","/docs/api/recipes/runtime","docs/api/11.recipes/01.runtime",{"title":127,"path":128,"stem":129},"Output Format","/docs/api/recipes/output-format","docs/api/11.recipes/02.output-format","i-lucide-chef-hat",{"title":132,"path":133,"stem":134,"icon":135},"Composables","/docs/api/composables","docs/api/12.composables","i-lucide-component",{"title":137,"path":138,"stem":139,"icon":140},"Imports","/docs/api/imports","docs/api/13.imports","i-lucide-file-input",{"title":142,"path":143,"stem":144,"icon":145},"Merging","/docs/api/merging","docs/api/13.merging","i-lucide-squares-intersect",{"title":137,"path":138,"stem":147,"icon":140},"docs/api/14.imports",[149,223,289,362],{"title":150,"path":151,"stem":152,"children":153,"icon":7},"Design Tokens","/docs/theme/design-tokens","docs/theme/design-tokens/00.index",[154,155,160],{"title":64,"path":151,"stem":152,"icon":65},{"title":156,"path":157,"stem":158,"icon":159},"Presets","/docs/theme/design-tokens/presets","docs/theme/design-tokens/01.presets","i-lucide-package",{"title":132,"icon":135,"defaultOpen":7,"path":161,"stem":162,"children":163,"page":7},"/docs/theme/design-tokens/composables","docs/theme/design-tokens/02.composables",[164,168,172,176,180,184,188,192,207,211,215,219],{"title":165,"path":166,"stem":167,"icon":7},"Border Radiuses","/docs/theme/design-tokens/composables/border-radiuses","docs/theme/design-tokens/02.composables/00.border-radiuses",{"title":169,"path":170,"stem":171,"icon":7},"Borders","/docs/theme/design-tokens/composables/borders","docs/theme/design-tokens/02.composables/01.borders",{"title":173,"path":174,"stem":175,"icon":7},"Box Shadows","/docs/theme/design-tokens/composables/box-shadows","docs/theme/design-tokens/02.composables/02.box-shadows",{"title":177,"path":178,"stem":179,"icon":7},"Breakpoints","/docs/theme/design-tokens/composables/breakpoints","docs/theme/design-tokens/02.composables/03.breakpoints",{"title":181,"path":182,"stem":183,"icon":7},"Colors","/docs/theme/design-tokens/composables/colors","docs/theme/design-tokens/02.composables/04.colors",{"title":185,"path":186,"stem":187,"icon":7},"Duration","/docs/theme/design-tokens/composables/duration","docs/theme/design-tokens/02.composables/05.duration",{"title":189,"path":190,"stem":191,"icon":7},"Easing","/docs/theme/design-tokens/composables/easing","docs/theme/design-tokens/02.composables/06.easing",{"title":193,"path":194,"stem":195,"children":196,"icon":7,"pro":206,"defaultOpen":7},"Fluid Design","/docs/theme/design-tokens/composables/fluid-design","docs/theme/design-tokens/02.composables/07.fluid-design/01.index",[197,198,202],{"title":64,"path":194,"stem":195},{"title":199,"path":200,"stem":201},"Fluid Viewport","/docs/theme/design-tokens/composables/fluid-design/viewport","docs/theme/design-tokens/02.composables/07.fluid-design/02.viewport",{"title":203,"path":204,"stem":205},"Fluid Typography","/docs/theme/design-tokens/composables/fluid-design/typography","docs/theme/design-tokens/02.composables/07.fluid-design/03.typography",true,{"title":208,"path":209,"stem":210,"icon":7},"Scales","/docs/theme/design-tokens/composables/scales","docs/theme/design-tokens/02.composables/08.scales",{"title":212,"path":213,"stem":214,"icon":7},"Spacing","/docs/theme/design-tokens/composables/spacing","docs/theme/design-tokens/02.composables/09.spacing",{"title":216,"path":217,"stem":218,"icon":7},"Typography","/docs/theme/design-tokens/composables/typography","docs/theme/design-tokens/02.composables/10.typography",{"title":220,"path":221,"stem":222,"icon":7},"Z-Index","/docs/theme/design-tokens/composables/z-index","docs/theme/design-tokens/02.composables/11.z-index",{"title":224,"path":225,"stem":226,"children":227,"icon":7},"Components","/docs/theme/components","docs/theme/components/00.index",[228,229],{"title":64,"path":225,"stem":226,"icon":65},{"title":132,"icon":135,"defaultOpen":206,"path":230,"stem":231,"children":232,"page":7},"/docs/theme/components/composables","docs/theme/components/02.composables",[233,237,241,245,249,253,257,261,265,269,273,277,281,285],{"title":234,"path":235,"stem":236},"Badge","/docs/theme/components/composables/badge","docs/theme/components/02.composables/01.badge",{"title":238,"path":239,"stem":240},"Button","/docs/theme/components/composables/button","docs/theme/components/02.composables/02.button",{"title":242,"path":243,"stem":244},"Button Group","/docs/theme/components/composables/button-group","docs/theme/components/02.composables/03.button-group",{"title":246,"path":247,"stem":248},"Callout","/docs/theme/components/composables/callout","docs/theme/components/02.composables/04.callout",{"title":250,"path":251,"stem":252},"Card","/docs/theme/components/composables/card","docs/theme/components/02.composables/05.card",{"title":254,"path":255,"stem":256},"Nav","/docs/theme/components/composables/nav","docs/theme/components/02.composables/06.nav",{"title":258,"path":259,"stem":260},"Modal","/docs/theme/components/composables/modal","docs/theme/components/02.composables/07.modal",{"title":262,"path":263,"stem":264},"Skeleton","/docs/theme/components/composables/skeleton","docs/theme/components/02.composables/08.skeleton",{"title":266,"path":267,"stem":268},"Tooltip","/docs/theme/components/composables/tooltip","docs/theme/components/02.composables/08.tooltip",{"title":270,"path":271,"stem":272},"Placeholder","/docs/theme/components/composables/placeholder","docs/theme/components/02.composables/09.placeholder",{"title":274,"path":275,"stem":276},"Progress","/docs/theme/components/composables/progress","docs/theme/components/02.composables/10.progress",{"title":278,"path":279,"stem":280},"Popover","/docs/theme/components/composables/popover","docs/theme/components/02.composables/11.popover",{"title":282,"path":283,"stem":284},"Chip","/docs/theme/components/composables/chip","docs/theme/components/02.composables/12.chip",{"title":286,"path":287,"stem":288},"Spinner","/docs/theme/components/composables/spinner","docs/theme/components/02.composables/13.spinner",{"title":102,"path":290,"stem":291,"children":292,"icon":7},"/docs/theme/utilities","docs/theme/utilities/00.index",[293,294,297],{"title":64,"path":290,"stem":291,"icon":65},{"title":156,"path":295,"stem":296,"icon":159},"/docs/theme/utilities/presets","docs/theme/utilities/01.presets",{"title":132,"icon":135,"defaultOpen":7,"path":298,"stem":299,"children":300,"page":7},"/docs/theme/utilities/composables","docs/theme/utilities/02.composables",[301,305,309,313,316,320,324,328,332,336,340,343,347,351,355,359],{"title":302,"path":303,"stem":304,"icon":7},"Accessibility","/docs/theme/utilities/composables/accessibility","docs/theme/utilities/02.composables/00.accessibility",{"title":306,"path":307,"stem":308,"icon":7},"Animations","/docs/theme/utilities/composables/animations","docs/theme/utilities/02.composables/01.animations",{"title":310,"path":311,"stem":312,"icon":7},"Backgrounds","/docs/theme/utilities/composables/backgrounds","docs/theme/utilities/02.composables/02.backgrounds",{"title":169,"path":314,"stem":315,"icon":7},"/docs/theme/utilities/composables/borders","docs/theme/utilities/02.composables/03.borders",{"title":317,"path":318,"stem":319,"icon":7},"Effects","/docs/theme/utilities/composables/effects","docs/theme/utilities/02.composables/04.effects",{"title":321,"path":322,"stem":323,"icon":7},"Filters","/docs/theme/utilities/composables/filters","docs/theme/utilities/02.composables/05.filters",{"title":325,"path":326,"stem":327,"icon":7},"Flexbox & Grid","/docs/theme/utilities/composables/flexbox-grid","docs/theme/utilities/02.composables/06.flexbox-grid",{"title":329,"path":330,"stem":331,"icon":7},"Interactivity","/docs/theme/utilities/composables/interactivity","docs/theme/utilities/02.composables/07.interactivity",{"title":333,"path":334,"stem":335,"icon":7},"Layout","/docs/theme/utilities/composables/layout","docs/theme/utilities/02.composables/08.layout",{"title":337,"path":338,"stem":339,"icon":7},"Sizing","/docs/theme/utilities/composables/sizing","docs/theme/utilities/02.composables/09.sizing",{"title":212,"path":341,"stem":342,"icon":7},"/docs/theme/utilities/composables/spacing","docs/theme/utilities/02.composables/10.spacing",{"title":344,"path":345,"stem":346,"icon":7},"SVG","/docs/theme/utilities/composables/svg","docs/theme/utilities/02.composables/11.svg",{"title":348,"path":349,"stem":350,"icon":7},"Tables","/docs/theme/utilities/composables/tables","docs/theme/utilities/02.composables/12.tables",{"title":352,"path":353,"stem":354,"icon":7},"Transforms","/docs/theme/utilities/composables/transforms","docs/theme/utilities/02.composables/13.transforms",{"title":356,"path":357,"stem":358,"icon":7},"Transitions","/docs/theme/utilities/composables/transitions","docs/theme/utilities/02.composables/14.transitions",{"title":216,"path":360,"stem":361,"icon":7},"/docs/theme/utilities/composables/typography","docs/theme/utilities/02.composables/15.typography",{"title":363,"path":364,"stem":365,"children":366,"icon":7},"Modifiers","/docs/theme/modifiers","docs/theme/modifiers/00.index",[367,368,371],{"title":64,"path":364,"stem":365,"icon":65},{"title":156,"path":369,"stem":370,"icon":159},"/docs/theme/modifiers/presets","docs/theme/modifiers/01.presets",{"title":132,"icon":135,"defaultOpen":7,"path":372,"stem":373,"children":374,"page":7},"/docs/theme/modifiers/composables","docs/theme/modifiers/02.composables",[375,379,383,387,391,395,399,403],{"title":376,"path":377,"stem":378,"icon":7},"ARIA State","/docs/theme/modifiers/composables/aria-state","docs/theme/modifiers/02.composables/00.aria-state",{"title":380,"path":381,"stem":382,"icon":7},"Directional","/docs/theme/modifiers/composables/directional","docs/theme/modifiers/02.composables/01.directional",{"title":384,"path":385,"stem":386,"icon":7},"Form State","/docs/theme/modifiers/composables/form-state","docs/theme/modifiers/02.composables/02.form-state",{"title":388,"path":389,"stem":390,"icon":7},"Media & Preferences","/docs/theme/modifiers/composables/media-preferences","docs/theme/modifiers/02.composables/03.media-preferences",{"title":392,"path":393,"stem":394,"icon":7},"Other State","/docs/theme/modifiers/composables/other-state","docs/theme/modifiers/02.composables/04.other-state",{"title":396,"path":397,"stem":398,"icon":7},"Pseudo-Elements","/docs/theme/modifiers/composables/pseudo-elements","docs/theme/modifiers/02.composables/05.pseudo-elements",{"title":400,"path":401,"stem":402,"icon":7},"Pseudo-State","/docs/theme/modifiers/composables/pseudo-state","docs/theme/modifiers/02.composables/06.pseudo-state",{"title":404,"path":405,"stem":406,"icon":7},"Structural","/docs/theme/modifiers/composables/structural","docs/theme/modifiers/02.composables/07.structural",{"id":408,"title":409,"body":410,"description":6151,"extension":1040,"links":6152,"meta":6153,"navigation":6154,"path":318,"seo":6155,"sitemap":6156,"stem":319,"__hash__":6157},"docs_theme/docs/theme/utilities/02.composables/04.effects.md","Effects Utilities",{"type":411,"value":412,"toc":6135},"minimark",[413,417,421,425,428,457,464,471,1852,1862,1868,1874,2251,2257,2263,3107,3113,3119,3548,3554,3560,4416,4422,4428,4808,4812,4817,5593,5596,5644,5648,5928,5930,6048,6052,6090,6094,6131],[414,415,64],"h2",{"id":416},"overview",[418,419,420],"p",{},"Effect utilities help you apply visual effects to elements including box shadows, text shadows, opacity, and blend modes. These utilities create depth, hierarchy, and visual interest in your designs.",[414,422,424],{"id":423},"why-use-effect-utilities","Why Use Effect Utilities?",[418,426,427],{},"Effect utilities help you:",[429,430,431,439,445,451],"ul",{},[432,433,434,438],"li",{},[435,436,437],"strong",{},"Create visual hierarchy",": Use shadows to indicate elevation and depth",[432,440,441,444],{},[435,442,443],{},"Control transparency",": Manage element opacity for overlays and fades",[432,446,447,450],{},[435,448,449],{},"Apply blend effects",": Mix colors and images with blend modes",[432,452,453,456],{},[435,454,455],{},"Integrate with design tokens",": Define consistent shadow values across your application",[414,458,460],{"id":459},"useboxshadowutility",[461,462,463],"code",{},"useBoxShadowUtility",[418,465,466,467,470],{},"The ",[461,468,469],{},"useBoxShadowUtility()"," function creates utility classes for applying box shadows.",[472,473,474,770,1723],"tabs",{},[475,476,479],"tabs-item",{"icon":477,"label":478},"i-lucide-code","Code",[480,481,487],"pre",{"className":482,"code":483,"filename":484,"language":485,"meta":486,"style":486},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { styleframe } from \"styleframe\";\nimport { useBoxShadowUtility } from \"@styleframe/theme\";\n\nconst s = styleframe();\n\nuseBoxShadowUtility(s, {\n    sm: '0 1px 2px 0 rgb(0 0 0 / 0.05)',\n    default: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',\n    md: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',\n    lg: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',\n    xl: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',\n    '2xl': '0 25px 50px -12px rgb(0 0 0 / 0.25)',\n    inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)',\n    none: 'none',\n});\n\nexport default s;\n","styleframe.config.ts","ts","",[461,488,489,525,548,554,575,580,594,616,633,650,667,684,706,723,740,751,756],{"__ignoreMap":486},[490,491,494,498,502,506,509,512,515,519,522],"span",{"class":492,"line":493},"line",1,[490,495,497],{"class":496},"s7zQu","import",[490,499,501],{"class":500},"sMK4o"," {",[490,503,505],{"class":504},"sTEyZ"," styleframe",[490,507,508],{"class":500}," }",[490,510,511],{"class":496}," from",[490,513,514],{"class":500}," \"",[490,516,518],{"class":517},"sfazB","styleframe",[490,520,521],{"class":500},"\"",[490,523,524],{"class":500},";\n",[490,526,528,530,532,535,537,539,541,544,546],{"class":492,"line":527},2,[490,529,497],{"class":496},[490,531,501],{"class":500},[490,533,534],{"class":504}," useBoxShadowUtility",[490,536,508],{"class":500},[490,538,511],{"class":496},[490,540,514],{"class":500},[490,542,543],{"class":517},"@styleframe/theme",[490,545,521],{"class":500},[490,547,524],{"class":500},[490,549,551],{"class":492,"line":550},3,[490,552,553],{"emptyLinePlaceholder":206},"\n",[490,555,557,561,564,567,570,573],{"class":492,"line":556},4,[490,558,560],{"class":559},"spNyl","const",[490,562,563],{"class":504}," s ",[490,565,566],{"class":500},"=",[490,568,505],{"class":569},"s2Zo4",[490,571,572],{"class":504},"()",[490,574,524],{"class":500},[490,576,578],{"class":492,"line":577},5,[490,579,553],{"emptyLinePlaceholder":206},[490,581,583,585,588,591],{"class":492,"line":582},6,[490,584,463],{"class":569},[490,586,587],{"class":504},"(s",[490,589,590],{"class":500},",",[490,592,593],{"class":500}," {\n",[490,595,597,601,604,607,610,613],{"class":492,"line":596},7,[490,598,600],{"class":599},"swJcz","    sm",[490,602,603],{"class":500},":",[490,605,606],{"class":500}," '",[490,608,609],{"class":517},"0 1px 2px 0 rgb(0 0 0 / 0.05)",[490,611,612],{"class":500},"'",[490,614,615],{"class":500},",\n",[490,617,619,622,624,626,629,631],{"class":492,"line":618},8,[490,620,621],{"class":599},"    default",[490,623,603],{"class":500},[490,625,606],{"class":500},[490,627,628],{"class":517},"0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",[490,630,612],{"class":500},[490,632,615],{"class":500},[490,634,636,639,641,643,646,648],{"class":492,"line":635},9,[490,637,638],{"class":599},"    md",[490,640,603],{"class":500},[490,642,606],{"class":500},[490,644,645],{"class":517},"0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",[490,647,612],{"class":500},[490,649,615],{"class":500},[490,651,653,656,658,660,663,665],{"class":492,"line":652},10,[490,654,655],{"class":599},"    lg",[490,657,603],{"class":500},[490,659,606],{"class":500},[490,661,662],{"class":517},"0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",[490,664,612],{"class":500},[490,666,615],{"class":500},[490,668,670,673,675,677,680,682],{"class":492,"line":669},11,[490,671,672],{"class":599},"    xl",[490,674,603],{"class":500},[490,676,606],{"class":500},[490,678,679],{"class":517},"0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",[490,681,612],{"class":500},[490,683,615],{"class":500},[490,685,687,690,693,695,697,699,702,704],{"class":492,"line":686},12,[490,688,689],{"class":500},"    '",[490,691,692],{"class":599},"2xl",[490,694,612],{"class":500},[490,696,603],{"class":500},[490,698,606],{"class":500},[490,700,701],{"class":517},"0 25px 50px -12px rgb(0 0 0 / 0.25)",[490,703,612],{"class":500},[490,705,615],{"class":500},[490,707,709,712,714,716,719,721],{"class":492,"line":708},13,[490,710,711],{"class":599},"    inner",[490,713,603],{"class":500},[490,715,606],{"class":500},[490,717,718],{"class":517},"inset 0 2px 4px 0 rgb(0 0 0 / 0.05)",[490,720,612],{"class":500},[490,722,615],{"class":500},[490,724,726,729,731,733,736,738],{"class":492,"line":725},14,[490,727,728],{"class":599},"    none",[490,730,603],{"class":500},[490,732,606],{"class":500},[490,734,735],{"class":517},"none",[490,737,612],{"class":500},[490,739,615],{"class":500},[490,741,743,746,749],{"class":492,"line":742},15,[490,744,745],{"class":500},"}",[490,747,748],{"class":504},")",[490,750,524],{"class":500},[490,752,754],{"class":492,"line":753},16,[490,755,553],{"emptyLinePlaceholder":206},[490,757,759,762,765,768],{"class":492,"line":758},17,[490,760,761],{"class":496},"export",[490,763,764],{"class":496}," default",[490,766,767],{"class":504}," s",[490,769,524],{"class":500},[475,771,773],{"icon":140,"label":772},"Output",[480,774,779],{"className":775,"code":776,"filename":777,"language":778,"meta":486,"style":486},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","._box-shadow\\:sm {\n    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n._box-shadow {\n    --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n._box-shadow\\:md {\n    --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n._box-shadow\\:lg {\n    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n._box-shadow\\:xl {\n    --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n._box-shadow\\:2xl {\n    --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n._box-shadow\\:inner {\n    --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);\n    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n._box-shadow\\:none {\n    --tw-shadow: none;\n    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n","styleframe/index.css","css",[461,780,781,798,839,898,903,907,915,972,1022,1026,1030,1043,1100,1150,1154,1158,1171,1229,1280,1285,1290,1304,1364,1415,1420,1425,1438,1472,1523,1528,1533,1547,1581,1632,1637,1642,1655,1667,1718],{"__ignoreMap":486},[490,782,783,786,790,793,796],{"class":492,"line":493},[490,784,785],{"class":500},".",[490,787,789],{"class":788},"sBMFI","_box-shadow",[490,791,792],{"class":504},"\\:",[490,794,795],{"class":788},"sm",[490,797,593],{"class":500},[490,799,800,803,805,809,812,815,817,820,823,826,828,830,833,836],{"class":492,"line":527},[490,801,802],{"class":504},"    --tw-shadow",[490,804,603],{"class":500},[490,806,808],{"class":807},"sbssI"," 0",[490,810,811],{"class":807}," 1px",[490,813,814],{"class":807}," 2px",[490,816,808],{"class":807},[490,818,819],{"class":569}," rgb",[490,821,822],{"class":500},"(",[490,824,825],{"class":807},"0",[490,827,808],{"class":807},[490,829,808],{"class":807},[490,831,832],{"class":504}," / ",[490,834,835],{"class":807},"0.05",[490,837,838],{"class":500},");\n",[490,840,841,845,847,850,852,855,857,859,861,864,867,870,872,874,877,879,881,883,885,887,889,891,893,896],{"class":492,"line":550},[490,842,844],{"class":843},"sqsOY","    box-shadow",[490,846,603],{"class":500},[490,848,849],{"class":569}," var",[490,851,822],{"class":500},[490,853,854],{"class":504},"--tw-ring-offset-shadow",[490,856,590],{"class":500},[490,858,808],{"class":807},[490,860,808],{"class":807},[490,862,863],{"class":500}," #",[490,865,866],{"class":504},"0000",[490,868,869],{"class":500},"),",[490,871,849],{"class":569},[490,873,822],{"class":500},[490,875,876],{"class":504},"--tw-ring-shadow",[490,878,590],{"class":500},[490,880,808],{"class":807},[490,882,808],{"class":807},[490,884,863],{"class":500},[490,886,866],{"class":504},[490,888,869],{"class":500},[490,890,849],{"class":569},[490,892,822],{"class":500},[490,894,895],{"class":504},"--tw-shadow",[490,897,838],{"class":500},[490,899,900],{"class":492,"line":556},[490,901,902],{"class":500},"}\n",[490,904,905],{"class":492,"line":577},[490,906,553],{"emptyLinePlaceholder":206},[490,908,909,911,913],{"class":492,"line":582},[490,910,785],{"class":500},[490,912,789],{"class":788},[490,914,593],{"class":500},[490,916,917,919,921,923,925,928,930,932,934,936,938,940,942,945,947,949,951,953,956,958,960,962,964,966,968,970],{"class":492,"line":596},[490,918,802],{"class":504},[490,920,603],{"class":500},[490,922,808],{"class":807},[490,924,811],{"class":807},[490,926,927],{"class":807}," 3px",[490,929,808],{"class":807},[490,931,819],{"class":569},[490,933,822],{"class":500},[490,935,825],{"class":807},[490,937,808],{"class":807},[490,939,808],{"class":807},[490,941,832],{"class":504},[490,943,944],{"class":807},"0.1",[490,946,869],{"class":500},[490,948,808],{"class":807},[490,950,811],{"class":807},[490,952,814],{"class":807},[490,954,955],{"class":807}," -1px",[490,957,819],{"class":569},[490,959,822],{"class":500},[490,961,825],{"class":807},[490,963,808],{"class":807},[490,965,808],{"class":807},[490,967,832],{"class":504},[490,969,944],{"class":807},[490,971,838],{"class":500},[490,973,974,976,978,980,982,984,986,988,990,992,994,996,998,1000,1002,1004,1006,1008,1010,1012,1014,1016,1018,1020],{"class":492,"line":618},[490,975,844],{"class":843},[490,977,603],{"class":500},[490,979,849],{"class":569},[490,981,822],{"class":500},[490,983,854],{"class":504},[490,985,590],{"class":500},[490,987,808],{"class":807},[490,989,808],{"class":807},[490,991,863],{"class":500},[490,993,866],{"class":504},[490,995,869],{"class":500},[490,997,849],{"class":569},[490,999,822],{"class":500},[490,1001,876],{"class":504},[490,1003,590],{"class":500},[490,1005,808],{"class":807},[490,1007,808],{"class":807},[490,1009,863],{"class":500},[490,1011,866],{"class":504},[490,1013,869],{"class":500},[490,1015,849],{"class":569},[490,1017,822],{"class":500},[490,1019,895],{"class":504},[490,1021,838],{"class":500},[490,1023,1024],{"class":492,"line":635},[490,1025,902],{"class":500},[490,1027,1028],{"class":492,"line":652},[490,1029,553],{"emptyLinePlaceholder":206},[490,1031,1032,1034,1036,1038,1041],{"class":492,"line":669},[490,1033,785],{"class":500},[490,1035,789],{"class":788},[490,1037,792],{"class":504},[490,1039,1040],{"class":788},"md",[490,1042,593],{"class":500},[490,1044,1045,1047,1049,1051,1054,1057,1059,1061,1063,1065,1067,1069,1071,1073,1075,1077,1079,1081,1084,1086,1088,1090,1092,1094,1096,1098],{"class":492,"line":686},[490,1046,802],{"class":504},[490,1048,603],{"class":500},[490,1050,808],{"class":807},[490,1052,1053],{"class":807}," 4px",[490,1055,1056],{"class":807}," 6px",[490,1058,955],{"class":807},[490,1060,819],{"class":569},[490,1062,822],{"class":500},[490,1064,825],{"class":807},[490,1066,808],{"class":807},[490,1068,808],{"class":807},[490,1070,832],{"class":504},[490,1072,944],{"class":807},[490,1074,869],{"class":500},[490,1076,808],{"class":807},[490,1078,814],{"class":807},[490,1080,1053],{"class":807},[490,1082,1083],{"class":807}," -2px",[490,1085,819],{"class":569},[490,1087,822],{"class":500},[490,1089,825],{"class":807},[490,1091,808],{"class":807},[490,1093,808],{"class":807},[490,1095,832],{"class":504},[490,1097,944],{"class":807},[490,1099,838],{"class":500},[490,1101,1102,1104,1106,1108,1110,1112,1114,1116,1118,1120,1122,1124,1126,1128,1130,1132,1134,1136,1138,1140,1142,1144,1146,1148],{"class":492,"line":708},[490,1103,844],{"class":843},[490,1105,603],{"class":500},[490,1107,849],{"class":569},[490,1109,822],{"class":500},[490,1111,854],{"class":504},[490,1113,590],{"class":500},[490,1115,808],{"class":807},[490,1117,808],{"class":807},[490,1119,863],{"class":500},[490,1121,866],{"class":504},[490,1123,869],{"class":500},[490,1125,849],{"class":569},[490,1127,822],{"class":500},[490,1129,876],{"class":504},[490,1131,590],{"class":500},[490,1133,808],{"class":807},[490,1135,808],{"class":807},[490,1137,863],{"class":500},[490,1139,866],{"class":504},[490,1141,869],{"class":500},[490,1143,849],{"class":569},[490,1145,822],{"class":500},[490,1147,895],{"class":504},[490,1149,838],{"class":500},[490,1151,1152],{"class":492,"line":725},[490,1153,902],{"class":500},[490,1155,1156],{"class":492,"line":742},[490,1157,553],{"emptyLinePlaceholder":206},[490,1159,1160,1162,1164,1166,1169],{"class":492,"line":753},[490,1161,785],{"class":500},[490,1163,789],{"class":788},[490,1165,792],{"class":504},[490,1167,1168],{"class":788},"lg",[490,1170,593],{"class":500},[490,1172,1173,1175,1177,1179,1182,1185,1188,1190,1192,1194,1196,1198,1200,1202,1204,1206,1208,1210,1213,1215,1217,1219,1221,1223,1225,1227],{"class":492,"line":758},[490,1174,802],{"class":504},[490,1176,603],{"class":500},[490,1178,808],{"class":807},[490,1180,1181],{"class":807}," 10px",[490,1183,1184],{"class":807}," 15px",[490,1186,1187],{"class":807}," -3px",[490,1189,819],{"class":569},[490,1191,822],{"class":500},[490,1193,825],{"class":807},[490,1195,808],{"class":807},[490,1197,808],{"class":807},[490,1199,832],{"class":504},[490,1201,944],{"class":807},[490,1203,869],{"class":500},[490,1205,808],{"class":807},[490,1207,1053],{"class":807},[490,1209,1056],{"class":807},[490,1211,1212],{"class":807}," -4px",[490,1214,819],{"class":569},[490,1216,822],{"class":500},[490,1218,825],{"class":807},[490,1220,808],{"class":807},[490,1222,808],{"class":807},[490,1224,832],{"class":504},[490,1226,944],{"class":807},[490,1228,838],{"class":500},[490,1230,1232,1234,1236,1238,1240,1242,1244,1246,1248,1250,1252,1254,1256,1258,1260,1262,1264,1266,1268,1270,1272,1274,1276,1278],{"class":492,"line":1231},18,[490,1233,844],{"class":843},[490,1235,603],{"class":500},[490,1237,849],{"class":569},[490,1239,822],{"class":500},[490,1241,854],{"class":504},[490,1243,590],{"class":500},[490,1245,808],{"class":807},[490,1247,808],{"class":807},[490,1249,863],{"class":500},[490,1251,866],{"class":504},[490,1253,869],{"class":500},[490,1255,849],{"class":569},[490,1257,822],{"class":500},[490,1259,876],{"class":504},[490,1261,590],{"class":500},[490,1263,808],{"class":807},[490,1265,808],{"class":807},[490,1267,863],{"class":500},[490,1269,866],{"class":504},[490,1271,869],{"class":500},[490,1273,849],{"class":569},[490,1275,822],{"class":500},[490,1277,895],{"class":504},[490,1279,838],{"class":500},[490,1281,1283],{"class":492,"line":1282},19,[490,1284,902],{"class":500},[490,1286,1288],{"class":492,"line":1287},20,[490,1289,553],{"emptyLinePlaceholder":206},[490,1291,1293,1295,1297,1299,1302],{"class":492,"line":1292},21,[490,1294,785],{"class":500},[490,1296,789],{"class":788},[490,1298,792],{"class":504},[490,1300,1301],{"class":788},"xl",[490,1303,593],{"class":500},[490,1305,1307,1309,1311,1313,1316,1319,1322,1324,1326,1328,1330,1332,1334,1336,1338,1340,1343,1345,1348,1350,1352,1354,1356,1358,1360,1362],{"class":492,"line":1306},22,[490,1308,802],{"class":504},[490,1310,603],{"class":500},[490,1312,808],{"class":807},[490,1314,1315],{"class":807}," 20px",[490,1317,1318],{"class":807}," 25px",[490,1320,1321],{"class":807}," -5px",[490,1323,819],{"class":569},[490,1325,822],{"class":500},[490,1327,825],{"class":807},[490,1329,808],{"class":807},[490,1331,808],{"class":807},[490,1333,832],{"class":504},[490,1335,944],{"class":807},[490,1337,869],{"class":500},[490,1339,808],{"class":807},[490,1341,1342],{"class":807}," 8px",[490,1344,1181],{"class":807},[490,1346,1347],{"class":807}," -6px",[490,1349,819],{"class":569},[490,1351,822],{"class":500},[490,1353,825],{"class":807},[490,1355,808],{"class":807},[490,1357,808],{"class":807},[490,1359,832],{"class":504},[490,1361,944],{"class":807},[490,1363,838],{"class":500},[490,1365,1367,1369,1371,1373,1375,1377,1379,1381,1383,1385,1387,1389,1391,1393,1395,1397,1399,1401,1403,1405,1407,1409,1411,1413],{"class":492,"line":1366},23,[490,1368,844],{"class":843},[490,1370,603],{"class":500},[490,1372,849],{"class":569},[490,1374,822],{"class":500},[490,1376,854],{"class":504},[490,1378,590],{"class":500},[490,1380,808],{"class":807},[490,1382,808],{"class":807},[490,1384,863],{"class":500},[490,1386,866],{"class":504},[490,1388,869],{"class":500},[490,1390,849],{"class":569},[490,1392,822],{"class":500},[490,1394,876],{"class":504},[490,1396,590],{"class":500},[490,1398,808],{"class":807},[490,1400,808],{"class":807},[490,1402,863],{"class":500},[490,1404,866],{"class":504},[490,1406,869],{"class":500},[490,1408,849],{"class":569},[490,1410,822],{"class":500},[490,1412,895],{"class":504},[490,1414,838],{"class":500},[490,1416,1418],{"class":492,"line":1417},24,[490,1419,902],{"class":500},[490,1421,1423],{"class":492,"line":1422},25,[490,1424,553],{"emptyLinePlaceholder":206},[490,1426,1428,1430,1432,1434,1436],{"class":492,"line":1427},26,[490,1429,785],{"class":500},[490,1431,789],{"class":788},[490,1433,792],{"class":504},[490,1435,692],{"class":788},[490,1437,593],{"class":500},[490,1439,1441,1443,1445,1447,1449,1452,1455,1457,1459,1461,1463,1465,1467,1470],{"class":492,"line":1440},27,[490,1442,802],{"class":504},[490,1444,603],{"class":500},[490,1446,808],{"class":807},[490,1448,1318],{"class":807},[490,1450,1451],{"class":807}," 50px",[490,1453,1454],{"class":807}," -12px",[490,1456,819],{"class":569},[490,1458,822],{"class":500},[490,1460,825],{"class":807},[490,1462,808],{"class":807},[490,1464,808],{"class":807},[490,1466,832],{"class":504},[490,1468,1469],{"class":807},"0.25",[490,1471,838],{"class":500},[490,1473,1475,1477,1479,1481,1483,1485,1487,1489,1491,1493,1495,1497,1499,1501,1503,1505,1507,1509,1511,1513,1515,1517,1519,1521],{"class":492,"line":1474},28,[490,1476,844],{"class":843},[490,1478,603],{"class":500},[490,1480,849],{"class":569},[490,1482,822],{"class":500},[490,1484,854],{"class":504},[490,1486,590],{"class":500},[490,1488,808],{"class":807},[490,1490,808],{"class":807},[490,1492,863],{"class":500},[490,1494,866],{"class":504},[490,1496,869],{"class":500},[490,1498,849],{"class":569},[490,1500,822],{"class":500},[490,1502,876],{"class":504},[490,1504,590],{"class":500},[490,1506,808],{"class":807},[490,1508,808],{"class":807},[490,1510,863],{"class":500},[490,1512,866],{"class":504},[490,1514,869],{"class":500},[490,1516,849],{"class":569},[490,1518,822],{"class":500},[490,1520,895],{"class":504},[490,1522,838],{"class":500},[490,1524,1526],{"class":492,"line":1525},29,[490,1527,902],{"class":500},[490,1529,1531],{"class":492,"line":1530},30,[490,1532,553],{"emptyLinePlaceholder":206},[490,1534,1536,1538,1540,1542,1545],{"class":492,"line":1535},31,[490,1537,785],{"class":500},[490,1539,789],{"class":788},[490,1541,792],{"class":504},[490,1543,1544],{"class":788},"inner",[490,1546,593],{"class":500},[490,1548,1550,1552,1554,1557,1559,1561,1563,1565,1567,1569,1571,1573,1575,1577,1579],{"class":492,"line":1549},32,[490,1551,802],{"class":504},[490,1553,603],{"class":500},[490,1555,1556],{"class":504}," inset ",[490,1558,825],{"class":807},[490,1560,814],{"class":807},[490,1562,1053],{"class":807},[490,1564,808],{"class":807},[490,1566,819],{"class":569},[490,1568,822],{"class":500},[490,1570,825],{"class":807},[490,1572,808],{"class":807},[490,1574,808],{"class":807},[490,1576,832],{"class":504},[490,1578,835],{"class":807},[490,1580,838],{"class":500},[490,1582,1584,1586,1588,1590,1592,1594,1596,1598,1600,1602,1604,1606,1608,1610,1612,1614,1616,1618,1620,1622,1624,1626,1628,1630],{"class":492,"line":1583},33,[490,1585,844],{"class":843},[490,1587,603],{"class":500},[490,1589,849],{"class":569},[490,1591,822],{"class":500},[490,1593,854],{"class":504},[490,1595,590],{"class":500},[490,1597,808],{"class":807},[490,1599,808],{"class":807},[490,1601,863],{"class":500},[490,1603,866],{"class":504},[490,1605,869],{"class":500},[490,1607,849],{"class":569},[490,1609,822],{"class":500},[490,1611,876],{"class":504},[490,1613,590],{"class":500},[490,1615,808],{"class":807},[490,1617,808],{"class":807},[490,1619,863],{"class":500},[490,1621,866],{"class":504},[490,1623,869],{"class":500},[490,1625,849],{"class":569},[490,1627,822],{"class":500},[490,1629,895],{"class":504},[490,1631,838],{"class":500},[490,1633,1635],{"class":492,"line":1634},34,[490,1636,902],{"class":500},[490,1638,1640],{"class":492,"line":1639},35,[490,1641,553],{"emptyLinePlaceholder":206},[490,1643,1645,1647,1649,1651,1653],{"class":492,"line":1644},36,[490,1646,785],{"class":500},[490,1648,789],{"class":788},[490,1650,792],{"class":504},[490,1652,735],{"class":788},[490,1654,593],{"class":500},[490,1656,1658,1660,1662,1665],{"class":492,"line":1657},37,[490,1659,802],{"class":504},[490,1661,603],{"class":500},[490,1663,1664],{"class":504}," none",[490,1666,524],{"class":500},[490,1668,1670,1672,1674,1676,1678,1680,1682,1684,1686,1688,1690,1692,1694,1696,1698,1700,1702,1704,1706,1708,1710,1712,1714,1716],{"class":492,"line":1669},38,[490,1671,844],{"class":843},[490,1673,603],{"class":500},[490,1675,849],{"class":569},[490,1677,822],{"class":500},[490,1679,854],{"class":504},[490,1681,590],{"class":500},[490,1683,808],{"class":807},[490,1685,808],{"class":807},[490,1687,863],{"class":500},[490,1689,866],{"class":504},[490,1691,869],{"class":500},[490,1693,849],{"class":569},[490,1695,822],{"class":500},[490,1697,876],{"class":504},[490,1699,590],{"class":500},[490,1701,808],{"class":807},[490,1703,808],{"class":807},[490,1705,863],{"class":500},[490,1707,866],{"class":504},[490,1709,869],{"class":500},[490,1711,849],{"class":569},[490,1713,822],{"class":500},[490,1715,895],{"class":504},[490,1717,838],{"class":500},[490,1719,1721],{"class":492,"line":1720},39,[490,1722,902],{"class":500},[475,1724,1727],{"icon":1725,"label":1726},"i-lucide-layout","Usage",[480,1728,1732],{"className":1729,"code":1730,"language":1731,"meta":486,"style":486},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cdiv class=\"_box-shadow:sm\">Subtle shadow\u003C/div>\n\u003Cdiv class=\"_box-shadow:md\">Medium shadow\u003C/div>\n\u003Cdiv class=\"_box-shadow:lg\">Large shadow\u003C/div>\n\u003Cdiv class=\"_box-shadow:inner\">Inset shadow\u003C/div>\n","html",[461,1733,1734,1768,1796,1824],{"__ignoreMap":486},[490,1735,1736,1739,1742,1745,1747,1749,1752,1754,1757,1760,1763,1765],{"class":492,"line":493},[490,1737,1738],{"class":500},"\u003C",[490,1740,1741],{"class":599},"div",[490,1743,1744],{"class":559}," class",[490,1746,566],{"class":500},[490,1748,521],{"class":500},[490,1750,1751],{"class":517},"_box-shadow:sm",[490,1753,521],{"class":500},[490,1755,1756],{"class":500},">",[490,1758,1759],{"class":504},"Subtle shadow",[490,1761,1762],{"class":500},"\u003C/",[490,1764,1741],{"class":599},[490,1766,1767],{"class":500},">\n",[490,1769,1770,1772,1774,1776,1778,1780,1783,1785,1787,1790,1792,1794],{"class":492,"line":527},[490,1771,1738],{"class":500},[490,1773,1741],{"class":599},[490,1775,1744],{"class":559},[490,1777,566],{"class":500},[490,1779,521],{"class":500},[490,1781,1782],{"class":517},"_box-shadow:md",[490,1784,521],{"class":500},[490,1786,1756],{"class":500},[490,1788,1789],{"class":504},"Medium shadow",[490,1791,1762],{"class":500},[490,1793,1741],{"class":599},[490,1795,1767],{"class":500},[490,1797,1798,1800,1802,1804,1806,1808,1811,1813,1815,1818,1820,1822],{"class":492,"line":550},[490,1799,1738],{"class":500},[490,1801,1741],{"class":599},[490,1803,1744],{"class":559},[490,1805,566],{"class":500},[490,1807,521],{"class":500},[490,1809,1810],{"class":517},"_box-shadow:lg",[490,1812,521],{"class":500},[490,1814,1756],{"class":500},[490,1816,1817],{"class":504},"Large shadow",[490,1819,1762],{"class":500},[490,1821,1741],{"class":599},[490,1823,1767],{"class":500},[490,1825,1826,1828,1830,1832,1834,1836,1839,1841,1843,1846,1848,1850],{"class":492,"line":556},[490,1827,1738],{"class":500},[490,1829,1741],{"class":599},[490,1831,1744],{"class":559},[490,1833,566],{"class":500},[490,1835,521],{"class":500},[490,1837,1838],{"class":517},"_box-shadow:inner",[490,1840,521],{"class":500},[490,1842,1756],{"class":500},[490,1844,1845],{"class":504},"Inset shadow",[490,1847,1762],{"class":500},[490,1849,1741],{"class":599},[490,1851,1767],{"class":500},[1853,1854,1855,1858,1859,1861],"tip",{},[435,1856,1857],{},"Pro tip",": The box shadow utility uses CSS custom properties (",[461,1860,895],{},") so it can be combined with ring utilities without conflicts.",[414,1863,1865],{"id":1864},"useboxshadowcolorutility",[461,1866,1867],{},"useBoxShadowColorUtility",[418,1869,466,1870,1873],{},[461,1871,1872],{},"useBoxShadowColorUtility()"," function creates utility classes for setting shadow colors.",[472,1875,1876,2097,2216],{},[475,1877,1878],{"icon":477,"label":478},[480,1879,1881],{"className":482,"code":1880,"filename":484,"language":485,"meta":486,"style":486},"import { styleframe } from \"styleframe\";\nimport { useBoxShadowColorUtility } from \"@styleframe/theme\";\nimport { useColorDesignTokens } from \"@styleframe/theme\";\n\nconst s = styleframe();\nconst { ref } = s;\n\nconst { colorPrimary } = useColorDesignTokens(s, { primary: '#006cff' } as const);\n\nuseBoxShadowColorUtility(s, {\n    primary: ref(colorPrimary),\n    black: 'rgb(0 0 0 / 0.25)',\n});\n\nexport default s;\n",[461,1882,1883,1903,1924,1945,1949,1963,1981,1985,2030,2034,2044,2059,2075,2083,2087],{"__ignoreMap":486},[490,1884,1885,1887,1889,1891,1893,1895,1897,1899,1901],{"class":492,"line":493},[490,1886,497],{"class":496},[490,1888,501],{"class":500},[490,1890,505],{"class":504},[490,1892,508],{"class":500},[490,1894,511],{"class":496},[490,1896,514],{"class":500},[490,1898,518],{"class":517},[490,1900,521],{"class":500},[490,1902,524],{"class":500},[490,1904,1905,1907,1909,1912,1914,1916,1918,1920,1922],{"class":492,"line":527},[490,1906,497],{"class":496},[490,1908,501],{"class":500},[490,1910,1911],{"class":504}," useBoxShadowColorUtility",[490,1913,508],{"class":500},[490,1915,511],{"class":496},[490,1917,514],{"class":500},[490,1919,543],{"class":517},[490,1921,521],{"class":500},[490,1923,524],{"class":500},[490,1925,1926,1928,1930,1933,1935,1937,1939,1941,1943],{"class":492,"line":550},[490,1927,497],{"class":496},[490,1929,501],{"class":500},[490,1931,1932],{"class":504}," useColorDesignTokens",[490,1934,508],{"class":500},[490,1936,511],{"class":496},[490,1938,514],{"class":500},[490,1940,543],{"class":517},[490,1942,521],{"class":500},[490,1944,524],{"class":500},[490,1946,1947],{"class":492,"line":556},[490,1948,553],{"emptyLinePlaceholder":206},[490,1950,1951,1953,1955,1957,1959,1961],{"class":492,"line":577},[490,1952,560],{"class":559},[490,1954,563],{"class":504},[490,1956,566],{"class":500},[490,1958,505],{"class":569},[490,1960,572],{"class":504},[490,1962,524],{"class":500},[490,1964,1965,1967,1969,1972,1974,1977,1979],{"class":492,"line":582},[490,1966,560],{"class":559},[490,1968,501],{"class":500},[490,1970,1971],{"class":504}," ref ",[490,1973,745],{"class":500},[490,1975,1976],{"class":500}," =",[490,1978,767],{"class":504},[490,1980,524],{"class":500},[490,1982,1983],{"class":492,"line":596},[490,1984,553],{"emptyLinePlaceholder":206},[490,1986,1987,1989,1991,1994,1996,1998,2000,2002,2004,2006,2009,2011,2013,2016,2018,2020,2023,2026,2028],{"class":492,"line":618},[490,1988,560],{"class":559},[490,1990,501],{"class":500},[490,1992,1993],{"class":504}," colorPrimary ",[490,1995,745],{"class":500},[490,1997,1976],{"class":500},[490,1999,1932],{"class":569},[490,2001,587],{"class":504},[490,2003,590],{"class":500},[490,2005,501],{"class":500},[490,2007,2008],{"class":599}," primary",[490,2010,603],{"class":500},[490,2012,606],{"class":500},[490,2014,2015],{"class":517},"#006cff",[490,2017,612],{"class":500},[490,2019,508],{"class":500},[490,2021,2022],{"class":496}," as",[490,2024,2025],{"class":559}," const",[490,2027,748],{"class":504},[490,2029,524],{"class":500},[490,2031,2032],{"class":492,"line":635},[490,2033,553],{"emptyLinePlaceholder":206},[490,2035,2036,2038,2040,2042],{"class":492,"line":652},[490,2037,1867],{"class":569},[490,2039,587],{"class":504},[490,2041,590],{"class":500},[490,2043,593],{"class":500},[490,2045,2046,2049,2051,2054,2057],{"class":492,"line":669},[490,2047,2048],{"class":599},"    primary",[490,2050,603],{"class":500},[490,2052,2053],{"class":569}," ref",[490,2055,2056],{"class":504},"(colorPrimary)",[490,2058,615],{"class":500},[490,2060,2061,2064,2066,2068,2071,2073],{"class":492,"line":686},[490,2062,2063],{"class":599},"    black",[490,2065,603],{"class":500},[490,2067,606],{"class":500},[490,2069,2070],{"class":517},"rgb(0 0 0 / 0.25)",[490,2072,612],{"class":500},[490,2074,615],{"class":500},[490,2076,2077,2079,2081],{"class":492,"line":708},[490,2078,745],{"class":500},[490,2080,748],{"class":504},[490,2082,524],{"class":500},[490,2084,2085],{"class":492,"line":725},[490,2086,553],{"emptyLinePlaceholder":206},[490,2088,2089,2091,2093,2095],{"class":492,"line":742},[490,2090,761],{"class":496},[490,2092,764],{"class":496},[490,2094,767],{"class":504},[490,2096,524],{"class":500},[475,2098,2099],{"icon":140,"label":772},[480,2100,2102],{"className":775,"code":2101,"filename":777,"language":778,"meta":486,"style":486},":root {\n    --color--primary: oklch(0.5749 0.233917 259.9541 / 1);\n}\n\n._box-shadow-color\\:primary { --tw-shadow-color: var(--color--primary); }\n._box-shadow-color\\:black { --tw-shadow-color: rgb(0 0 0 / 0.25); }\n",[461,2103,2104,2113,2141,2145,2149,2181],{"__ignoreMap":486},[490,2105,2106,2108,2111],{"class":492,"line":493},[490,2107,603],{"class":500},[490,2109,2110],{"class":559},"root",[490,2112,593],{"class":500},[490,2114,2115,2118,2120,2123,2125,2128,2131,2134,2136,2139],{"class":492,"line":527},[490,2116,2117],{"class":504},"    --color--primary",[490,2119,603],{"class":500},[490,2121,2122],{"class":569}," oklch",[490,2124,822],{"class":500},[490,2126,2127],{"class":807},"0.5749",[490,2129,2130],{"class":807}," 0.233917",[490,2132,2133],{"class":807}," 259.9541",[490,2135,832],{"class":504},[490,2137,2138],{"class":807},"1",[490,2140,838],{"class":500},[490,2142,2143],{"class":492,"line":550},[490,2144,902],{"class":500},[490,2146,2147],{"class":492,"line":556},[490,2148,553],{"emptyLinePlaceholder":206},[490,2150,2151,2153,2156,2158,2161,2163,2166,2168,2170,2172,2175,2178],{"class":492,"line":577},[490,2152,785],{"class":500},[490,2154,2155],{"class":788},"_box-shadow-color",[490,2157,792],{"class":504},[490,2159,2160],{"class":788},"primary",[490,2162,501],{"class":500},[490,2164,2165],{"class":504}," --tw-shadow-color",[490,2167,603],{"class":500},[490,2169,849],{"class":569},[490,2171,822],{"class":500},[490,2173,2174],{"class":504},"--color--primary",[490,2176,2177],{"class":500},");",[490,2179,2180],{"class":500}," }\n",[490,2182,2183,2185,2187,2189,2192,2194,2196,2198,2200,2202,2204,2206,2208,2210,2212,2214],{"class":492,"line":582},[490,2184,785],{"class":500},[490,2186,2155],{"class":788},[490,2188,792],{"class":504},[490,2190,2191],{"class":788},"black",[490,2193,501],{"class":500},[490,2195,2165],{"class":504},[490,2197,603],{"class":500},[490,2199,819],{"class":569},[490,2201,822],{"class":500},[490,2203,825],{"class":807},[490,2205,808],{"class":807},[490,2207,808],{"class":807},[490,2209,832],{"class":504},[490,2211,1469],{"class":807},[490,2213,2177],{"class":500},[490,2215,2180],{"class":500},[475,2217,2218],{"icon":1725,"label":1726},[480,2219,2221],{"className":1729,"code":2220,"language":1731,"meta":486,"style":486},"\u003Cdiv class=\"_box-shadow:lg _box-shadow-color:primary\">Colored shadow\u003C/div>\n",[461,2222,2223],{"__ignoreMap":486},[490,2224,2225,2227,2229,2231,2233,2235,2238,2240,2242,2245,2247,2249],{"class":492,"line":493},[490,2226,1738],{"class":500},[490,2228,1741],{"class":599},[490,2230,1744],{"class":559},[490,2232,566],{"class":500},[490,2234,521],{"class":500},[490,2236,2237],{"class":517},"_box-shadow:lg _box-shadow-color:primary",[490,2239,521],{"class":500},[490,2241,1756],{"class":500},[490,2243,2244],{"class":504},"Colored shadow",[490,2246,1762],{"class":500},[490,2248,1741],{"class":599},[490,2250,1767],{"class":500},[414,2252,2254],{"id":2253},"useopacityutility",[461,2255,2256],{},"useOpacityUtility",[418,2258,466,2259,2262],{},[461,2260,2261],{},"useOpacityUtility()"," function creates utility classes for controlling element opacity.",[472,2264,2265,2661,3015],{},[475,2266,2267],{"icon":477,"label":478},[480,2268,2270],{"className":482,"code":2269,"filename":484,"language":485,"meta":486,"style":486},"import { styleframe } from \"styleframe\";\nimport { useOpacityUtility } from \"@styleframe/theme\";\n\nconst s = styleframe();\n\nuseOpacityUtility(s, {\n    '0': '0',\n    '5': '0.05',\n    '10': '0.1',\n    '20': '0.2',\n    '25': '0.25',\n    '30': '0.3',\n    '40': '0.4',\n    '50': '0.5',\n    '60': '0.6',\n    '70': '0.7',\n    '75': '0.75',\n    '80': '0.8',\n    '90': '0.9',\n    '95': '0.95',\n    '100': '1',\n});\n\nexport default s;\n",[461,2271,2272,2292,2313,2317,2331,2335,2345,2363,2382,2401,2421,2440,2460,2480,2500,2520,2540,2560,2580,2600,2620,2639,2647,2651],{"__ignoreMap":486},[490,2273,2274,2276,2278,2280,2282,2284,2286,2288,2290],{"class":492,"line":493},[490,2275,497],{"class":496},[490,2277,501],{"class":500},[490,2279,505],{"class":504},[490,2281,508],{"class":500},[490,2283,511],{"class":496},[490,2285,514],{"class":500},[490,2287,518],{"class":517},[490,2289,521],{"class":500},[490,2291,524],{"class":500},[490,2293,2294,2296,2298,2301,2303,2305,2307,2309,2311],{"class":492,"line":527},[490,2295,497],{"class":496},[490,2297,501],{"class":500},[490,2299,2300],{"class":504}," useOpacityUtility",[490,2302,508],{"class":500},[490,2304,511],{"class":496},[490,2306,514],{"class":500},[490,2308,543],{"class":517},[490,2310,521],{"class":500},[490,2312,524],{"class":500},[490,2314,2315],{"class":492,"line":550},[490,2316,553],{"emptyLinePlaceholder":206},[490,2318,2319,2321,2323,2325,2327,2329],{"class":492,"line":556},[490,2320,560],{"class":559},[490,2322,563],{"class":504},[490,2324,566],{"class":500},[490,2326,505],{"class":569},[490,2328,572],{"class":504},[490,2330,524],{"class":500},[490,2332,2333],{"class":492,"line":577},[490,2334,553],{"emptyLinePlaceholder":206},[490,2336,2337,2339,2341,2343],{"class":492,"line":582},[490,2338,2256],{"class":569},[490,2340,587],{"class":504},[490,2342,590],{"class":500},[490,2344,593],{"class":500},[490,2346,2347,2349,2351,2353,2355,2357,2359,2361],{"class":492,"line":596},[490,2348,689],{"class":500},[490,2350,825],{"class":599},[490,2352,612],{"class":500},[490,2354,603],{"class":500},[490,2356,606],{"class":500},[490,2358,825],{"class":517},[490,2360,612],{"class":500},[490,2362,615],{"class":500},[490,2364,2365,2367,2370,2372,2374,2376,2378,2380],{"class":492,"line":618},[490,2366,689],{"class":500},[490,2368,2369],{"class":599},"5",[490,2371,612],{"class":500},[490,2373,603],{"class":500},[490,2375,606],{"class":500},[490,2377,835],{"class":517},[490,2379,612],{"class":500},[490,2381,615],{"class":500},[490,2383,2384,2386,2389,2391,2393,2395,2397,2399],{"class":492,"line":635},[490,2385,689],{"class":500},[490,2387,2388],{"class":599},"10",[490,2390,612],{"class":500},[490,2392,603],{"class":500},[490,2394,606],{"class":500},[490,2396,944],{"class":517},[490,2398,612],{"class":500},[490,2400,615],{"class":500},[490,2402,2403,2405,2408,2410,2412,2414,2417,2419],{"class":492,"line":652},[490,2404,689],{"class":500},[490,2406,2407],{"class":599},"20",[490,2409,612],{"class":500},[490,2411,603],{"class":500},[490,2413,606],{"class":500},[490,2415,2416],{"class":517},"0.2",[490,2418,612],{"class":500},[490,2420,615],{"class":500},[490,2422,2423,2425,2428,2430,2432,2434,2436,2438],{"class":492,"line":669},[490,2424,689],{"class":500},[490,2426,2427],{"class":599},"25",[490,2429,612],{"class":500},[490,2431,603],{"class":500},[490,2433,606],{"class":500},[490,2435,1469],{"class":517},[490,2437,612],{"class":500},[490,2439,615],{"class":500},[490,2441,2442,2444,2447,2449,2451,2453,2456,2458],{"class":492,"line":686},[490,2443,689],{"class":500},[490,2445,2446],{"class":599},"30",[490,2448,612],{"class":500},[490,2450,603],{"class":500},[490,2452,606],{"class":500},[490,2454,2455],{"class":517},"0.3",[490,2457,612],{"class":500},[490,2459,615],{"class":500},[490,2461,2462,2464,2467,2469,2471,2473,2476,2478],{"class":492,"line":708},[490,2463,689],{"class":500},[490,2465,2466],{"class":599},"40",[490,2468,612],{"class":500},[490,2470,603],{"class":500},[490,2472,606],{"class":500},[490,2474,2475],{"class":517},"0.4",[490,2477,612],{"class":500},[490,2479,615],{"class":500},[490,2481,2482,2484,2487,2489,2491,2493,2496,2498],{"class":492,"line":725},[490,2483,689],{"class":500},[490,2485,2486],{"class":599},"50",[490,2488,612],{"class":500},[490,2490,603],{"class":500},[490,2492,606],{"class":500},[490,2494,2495],{"class":517},"0.5",[490,2497,612],{"class":500},[490,2499,615],{"class":500},[490,2501,2502,2504,2507,2509,2511,2513,2516,2518],{"class":492,"line":742},[490,2503,689],{"class":500},[490,2505,2506],{"class":599},"60",[490,2508,612],{"class":500},[490,2510,603],{"class":500},[490,2512,606],{"class":500},[490,2514,2515],{"class":517},"0.6",[490,2517,612],{"class":500},[490,2519,615],{"class":500},[490,2521,2522,2524,2527,2529,2531,2533,2536,2538],{"class":492,"line":753},[490,2523,689],{"class":500},[490,2525,2526],{"class":599},"70",[490,2528,612],{"class":500},[490,2530,603],{"class":500},[490,2532,606],{"class":500},[490,2534,2535],{"class":517},"0.7",[490,2537,612],{"class":500},[490,2539,615],{"class":500},[490,2541,2542,2544,2547,2549,2551,2553,2556,2558],{"class":492,"line":758},[490,2543,689],{"class":500},[490,2545,2546],{"class":599},"75",[490,2548,612],{"class":500},[490,2550,603],{"class":500},[490,2552,606],{"class":500},[490,2554,2555],{"class":517},"0.75",[490,2557,612],{"class":500},[490,2559,615],{"class":500},[490,2561,2562,2564,2567,2569,2571,2573,2576,2578],{"class":492,"line":1231},[490,2563,689],{"class":500},[490,2565,2566],{"class":599},"80",[490,2568,612],{"class":500},[490,2570,603],{"class":500},[490,2572,606],{"class":500},[490,2574,2575],{"class":517},"0.8",[490,2577,612],{"class":500},[490,2579,615],{"class":500},[490,2581,2582,2584,2587,2589,2591,2593,2596,2598],{"class":492,"line":1282},[490,2583,689],{"class":500},[490,2585,2586],{"class":599},"90",[490,2588,612],{"class":500},[490,2590,603],{"class":500},[490,2592,606],{"class":500},[490,2594,2595],{"class":517},"0.9",[490,2597,612],{"class":500},[490,2599,615],{"class":500},[490,2601,2602,2604,2607,2609,2611,2613,2616,2618],{"class":492,"line":1287},[490,2603,689],{"class":500},[490,2605,2606],{"class":599},"95",[490,2608,612],{"class":500},[490,2610,603],{"class":500},[490,2612,606],{"class":500},[490,2614,2615],{"class":517},"0.95",[490,2617,612],{"class":500},[490,2619,615],{"class":500},[490,2621,2622,2624,2627,2629,2631,2633,2635,2637],{"class":492,"line":1292},[490,2623,689],{"class":500},[490,2625,2626],{"class":599},"100",[490,2628,612],{"class":500},[490,2630,603],{"class":500},[490,2632,606],{"class":500},[490,2634,2138],{"class":517},[490,2636,612],{"class":500},[490,2638,615],{"class":500},[490,2640,2641,2643,2645],{"class":492,"line":1306},[490,2642,745],{"class":500},[490,2644,748],{"class":504},[490,2646,524],{"class":500},[490,2648,2649],{"class":492,"line":1366},[490,2650,553],{"emptyLinePlaceholder":206},[490,2652,2653,2655,2657,2659],{"class":492,"line":1417},[490,2654,761],{"class":496},[490,2656,764],{"class":496},[490,2658,767],{"class":504},[490,2660,524],{"class":500},[475,2662,2663],{"icon":140,"label":772},[480,2664,2666],{"className":775,"code":2665,"filename":777,"language":778,"meta":486,"style":486},"._opacity\\:0 { opacity: 0; }\n._opacity\\:5 { opacity: 0.05; }\n._opacity\\:10 { opacity: 0.1; }\n._opacity\\:20 { opacity: 0.2; }\n._opacity\\:25 { opacity: 0.25; }\n._opacity\\:30 { opacity: 0.3; }\n._opacity\\:40 { opacity: 0.4; }\n._opacity\\:50 { opacity: 0.5; }\n._opacity\\:60 { opacity: 0.6; }\n._opacity\\:70 { opacity: 0.7; }\n._opacity\\:75 { opacity: 0.75; }\n._opacity\\:80 { opacity: 0.8; }\n._opacity\\:90 { opacity: 0.9; }\n._opacity\\:95 { opacity: 0.95; }\n._opacity\\:100 { opacity: 1; }\n",[461,2667,2668,2693,2716,2739,2762,2785,2808,2831,2854,2877,2900,2923,2946,2969,2992],{"__ignoreMap":486},[490,2669,2670,2672,2675,2677,2679,2681,2684,2686,2688,2691],{"class":492,"line":493},[490,2671,785],{"class":500},[490,2673,2674],{"class":788},"_opacity",[490,2676,792],{"class":504},[490,2678,825],{"class":788},[490,2680,501],{"class":500},[490,2682,2683],{"class":843}," opacity",[490,2685,603],{"class":500},[490,2687,808],{"class":807},[490,2689,2690],{"class":500},";",[490,2692,2180],{"class":500},[490,2694,2695,2697,2699,2701,2703,2705,2707,2709,2712,2714],{"class":492,"line":527},[490,2696,785],{"class":500},[490,2698,2674],{"class":788},[490,2700,792],{"class":504},[490,2702,2369],{"class":788},[490,2704,501],{"class":500},[490,2706,2683],{"class":843},[490,2708,603],{"class":500},[490,2710,2711],{"class":807}," 0.05",[490,2713,2690],{"class":500},[490,2715,2180],{"class":500},[490,2717,2718,2720,2722,2724,2726,2728,2730,2732,2735,2737],{"class":492,"line":550},[490,2719,785],{"class":500},[490,2721,2674],{"class":788},[490,2723,792],{"class":504},[490,2725,2388],{"class":788},[490,2727,501],{"class":500},[490,2729,2683],{"class":843},[490,2731,603],{"class":500},[490,2733,2734],{"class":807}," 0.1",[490,2736,2690],{"class":500},[490,2738,2180],{"class":500},[490,2740,2741,2743,2745,2747,2749,2751,2753,2755,2758,2760],{"class":492,"line":556},[490,2742,785],{"class":500},[490,2744,2674],{"class":788},[490,2746,792],{"class":504},[490,2748,2407],{"class":788},[490,2750,501],{"class":500},[490,2752,2683],{"class":843},[490,2754,603],{"class":500},[490,2756,2757],{"class":807}," 0.2",[490,2759,2690],{"class":500},[490,2761,2180],{"class":500},[490,2763,2764,2766,2768,2770,2772,2774,2776,2778,2781,2783],{"class":492,"line":577},[490,2765,785],{"class":500},[490,2767,2674],{"class":788},[490,2769,792],{"class":504},[490,2771,2427],{"class":788},[490,2773,501],{"class":500},[490,2775,2683],{"class":843},[490,2777,603],{"class":500},[490,2779,2780],{"class":807}," 0.25",[490,2782,2690],{"class":500},[490,2784,2180],{"class":500},[490,2786,2787,2789,2791,2793,2795,2797,2799,2801,2804,2806],{"class":492,"line":582},[490,2788,785],{"class":500},[490,2790,2674],{"class":788},[490,2792,792],{"class":504},[490,2794,2446],{"class":788},[490,2796,501],{"class":500},[490,2798,2683],{"class":843},[490,2800,603],{"class":500},[490,2802,2803],{"class":807}," 0.3",[490,2805,2690],{"class":500},[490,2807,2180],{"class":500},[490,2809,2810,2812,2814,2816,2818,2820,2822,2824,2827,2829],{"class":492,"line":596},[490,2811,785],{"class":500},[490,2813,2674],{"class":788},[490,2815,792],{"class":504},[490,2817,2466],{"class":788},[490,2819,501],{"class":500},[490,2821,2683],{"class":843},[490,2823,603],{"class":500},[490,2825,2826],{"class":807}," 0.4",[490,2828,2690],{"class":500},[490,2830,2180],{"class":500},[490,2832,2833,2835,2837,2839,2841,2843,2845,2847,2850,2852],{"class":492,"line":618},[490,2834,785],{"class":500},[490,2836,2674],{"class":788},[490,2838,792],{"class":504},[490,2840,2486],{"class":788},[490,2842,501],{"class":500},[490,2844,2683],{"class":843},[490,2846,603],{"class":500},[490,2848,2849],{"class":807}," 0.5",[490,2851,2690],{"class":500},[490,2853,2180],{"class":500},[490,2855,2856,2858,2860,2862,2864,2866,2868,2870,2873,2875],{"class":492,"line":635},[490,2857,785],{"class":500},[490,2859,2674],{"class":788},[490,2861,792],{"class":504},[490,2863,2506],{"class":788},[490,2865,501],{"class":500},[490,2867,2683],{"class":843},[490,2869,603],{"class":500},[490,2871,2872],{"class":807}," 0.6",[490,2874,2690],{"class":500},[490,2876,2180],{"class":500},[490,2878,2879,2881,2883,2885,2887,2889,2891,2893,2896,2898],{"class":492,"line":652},[490,2880,785],{"class":500},[490,2882,2674],{"class":788},[490,2884,792],{"class":504},[490,2886,2526],{"class":788},[490,2888,501],{"class":500},[490,2890,2683],{"class":843},[490,2892,603],{"class":500},[490,2894,2895],{"class":807}," 0.7",[490,2897,2690],{"class":500},[490,2899,2180],{"class":500},[490,2901,2902,2904,2906,2908,2910,2912,2914,2916,2919,2921],{"class":492,"line":669},[490,2903,785],{"class":500},[490,2905,2674],{"class":788},[490,2907,792],{"class":504},[490,2909,2546],{"class":788},[490,2911,501],{"class":500},[490,2913,2683],{"class":843},[490,2915,603],{"class":500},[490,2917,2918],{"class":807}," 0.75",[490,2920,2690],{"class":500},[490,2922,2180],{"class":500},[490,2924,2925,2927,2929,2931,2933,2935,2937,2939,2942,2944],{"class":492,"line":686},[490,2926,785],{"class":500},[490,2928,2674],{"class":788},[490,2930,792],{"class":504},[490,2932,2566],{"class":788},[490,2934,501],{"class":500},[490,2936,2683],{"class":843},[490,2938,603],{"class":500},[490,2940,2941],{"class":807}," 0.8",[490,2943,2690],{"class":500},[490,2945,2180],{"class":500},[490,2947,2948,2950,2952,2954,2956,2958,2960,2962,2965,2967],{"class":492,"line":708},[490,2949,785],{"class":500},[490,2951,2674],{"class":788},[490,2953,792],{"class":504},[490,2955,2586],{"class":788},[490,2957,501],{"class":500},[490,2959,2683],{"class":843},[490,2961,603],{"class":500},[490,2963,2964],{"class":807}," 0.9",[490,2966,2690],{"class":500},[490,2968,2180],{"class":500},[490,2970,2971,2973,2975,2977,2979,2981,2983,2985,2988,2990],{"class":492,"line":725},[490,2972,785],{"class":500},[490,2974,2674],{"class":788},[490,2976,792],{"class":504},[490,2978,2606],{"class":788},[490,2980,501],{"class":500},[490,2982,2683],{"class":843},[490,2984,603],{"class":500},[490,2986,2987],{"class":807}," 0.95",[490,2989,2690],{"class":500},[490,2991,2180],{"class":500},[490,2993,2994,2996,2998,3000,3002,3004,3006,3008,3011,3013],{"class":492,"line":742},[490,2995,785],{"class":500},[490,2997,2674],{"class":788},[490,2999,792],{"class":504},[490,3001,2626],{"class":788},[490,3003,501],{"class":500},[490,3005,2683],{"class":843},[490,3007,603],{"class":500},[490,3009,3010],{"class":807}," 1",[490,3012,2690],{"class":500},[490,3014,2180],{"class":500},[475,3016,3017],{"icon":1725,"label":1726},[480,3018,3020],{"className":1729,"code":3019,"language":1731,"meta":486,"style":486},"\u003Cdiv class=\"_opacity:50\">50% opacity\u003C/div>\n\u003Cdiv class=\"_opacity:75\">75% opacity\u003C/div>\n\u003Cbutton class=\"_opacity:50 _hover:opacity:100\">Fade on hover\u003C/button>\n",[461,3021,3022,3050,3078],{"__ignoreMap":486},[490,3023,3024,3026,3028,3030,3032,3034,3037,3039,3041,3044,3046,3048],{"class":492,"line":493},[490,3025,1738],{"class":500},[490,3027,1741],{"class":599},[490,3029,1744],{"class":559},[490,3031,566],{"class":500},[490,3033,521],{"class":500},[490,3035,3036],{"class":517},"_opacity:50",[490,3038,521],{"class":500},[490,3040,1756],{"class":500},[490,3042,3043],{"class":504},"50% opacity",[490,3045,1762],{"class":500},[490,3047,1741],{"class":599},[490,3049,1767],{"class":500},[490,3051,3052,3054,3056,3058,3060,3062,3065,3067,3069,3072,3074,3076],{"class":492,"line":527},[490,3053,1738],{"class":500},[490,3055,1741],{"class":599},[490,3057,1744],{"class":559},[490,3059,566],{"class":500},[490,3061,521],{"class":500},[490,3063,3064],{"class":517},"_opacity:75",[490,3066,521],{"class":500},[490,3068,1756],{"class":500},[490,3070,3071],{"class":504},"75% opacity",[490,3073,1762],{"class":500},[490,3075,1741],{"class":599},[490,3077,1767],{"class":500},[490,3079,3080,3082,3085,3087,3089,3091,3094,3096,3098,3101,3103,3105],{"class":492,"line":550},[490,3081,1738],{"class":500},[490,3083,3084],{"class":599},"button",[490,3086,1744],{"class":559},[490,3088,566],{"class":500},[490,3090,521],{"class":500},[490,3092,3093],{"class":517},"_opacity:50 _hover:opacity:100",[490,3095,521],{"class":500},[490,3097,1756],{"class":500},[490,3099,3100],{"class":504},"Fade on hover",[490,3102,1762],{"class":500},[490,3104,3084],{"class":599},[490,3106,1767],{"class":500},[414,3108,3110],{"id":3109},"usetextshadowutility",[461,3111,3112],{},"useTextShadowUtility",[418,3114,466,3115,3118],{},[461,3116,3117],{},"useTextShadowUtility()"," function creates utility classes for applying text shadows.",[472,3120,3121,3297,3485],{},[475,3122,3123],{"icon":477,"label":478},[480,3124,3126],{"className":482,"code":3125,"filename":484,"language":485,"meta":486,"style":486},"import { styleframe } from \"styleframe\";\nimport { useTextShadowUtility } from \"@styleframe/theme\";\n\nconst s = styleframe();\n\nuseTextShadowUtility(s, {\n    sm: '0 1px 2px rgb(0 0 0 / 0.05)',\n    default: '0 1px 3px rgb(0 0 0 / 0.1)',\n    md: '0 2px 4px rgb(0 0 0 / 0.1)',\n    lg: '0 4px 8px rgb(0 0 0 / 0.15)',\n    none: 'none',\n});\n\nexport default s;\n",[461,3127,3128,3148,3169,3173,3187,3191,3201,3216,3231,3246,3261,3275,3283,3287],{"__ignoreMap":486},[490,3129,3130,3132,3134,3136,3138,3140,3142,3144,3146],{"class":492,"line":493},[490,3131,497],{"class":496},[490,3133,501],{"class":500},[490,3135,505],{"class":504},[490,3137,508],{"class":500},[490,3139,511],{"class":496},[490,3141,514],{"class":500},[490,3143,518],{"class":517},[490,3145,521],{"class":500},[490,3147,524],{"class":500},[490,3149,3150,3152,3154,3157,3159,3161,3163,3165,3167],{"class":492,"line":527},[490,3151,497],{"class":496},[490,3153,501],{"class":500},[490,3155,3156],{"class":504}," useTextShadowUtility",[490,3158,508],{"class":500},[490,3160,511],{"class":496},[490,3162,514],{"class":500},[490,3164,543],{"class":517},[490,3166,521],{"class":500},[490,3168,524],{"class":500},[490,3170,3171],{"class":492,"line":550},[490,3172,553],{"emptyLinePlaceholder":206},[490,3174,3175,3177,3179,3181,3183,3185],{"class":492,"line":556},[490,3176,560],{"class":559},[490,3178,563],{"class":504},[490,3180,566],{"class":500},[490,3182,505],{"class":569},[490,3184,572],{"class":504},[490,3186,524],{"class":500},[490,3188,3189],{"class":492,"line":577},[490,3190,553],{"emptyLinePlaceholder":206},[490,3192,3193,3195,3197,3199],{"class":492,"line":582},[490,3194,3112],{"class":569},[490,3196,587],{"class":504},[490,3198,590],{"class":500},[490,3200,593],{"class":500},[490,3202,3203,3205,3207,3209,3212,3214],{"class":492,"line":596},[490,3204,600],{"class":599},[490,3206,603],{"class":500},[490,3208,606],{"class":500},[490,3210,3211],{"class":517},"0 1px 2px rgb(0 0 0 / 0.05)",[490,3213,612],{"class":500},[490,3215,615],{"class":500},[490,3217,3218,3220,3222,3224,3227,3229],{"class":492,"line":618},[490,3219,621],{"class":599},[490,3221,603],{"class":500},[490,3223,606],{"class":500},[490,3225,3226],{"class":517},"0 1px 3px rgb(0 0 0 / 0.1)",[490,3228,612],{"class":500},[490,3230,615],{"class":500},[490,3232,3233,3235,3237,3239,3242,3244],{"class":492,"line":635},[490,3234,638],{"class":599},[490,3236,603],{"class":500},[490,3238,606],{"class":500},[490,3240,3241],{"class":517},"0 2px 4px rgb(0 0 0 / 0.1)",[490,3243,612],{"class":500},[490,3245,615],{"class":500},[490,3247,3248,3250,3252,3254,3257,3259],{"class":492,"line":652},[490,3249,655],{"class":599},[490,3251,603],{"class":500},[490,3253,606],{"class":500},[490,3255,3256],{"class":517},"0 4px 8px rgb(0 0 0 / 0.15)",[490,3258,612],{"class":500},[490,3260,615],{"class":500},[490,3262,3263,3265,3267,3269,3271,3273],{"class":492,"line":669},[490,3264,728],{"class":599},[490,3266,603],{"class":500},[490,3268,606],{"class":500},[490,3270,735],{"class":517},[490,3272,612],{"class":500},[490,3274,615],{"class":500},[490,3276,3277,3279,3281],{"class":492,"line":686},[490,3278,745],{"class":500},[490,3280,748],{"class":504},[490,3282,524],{"class":500},[490,3284,3285],{"class":492,"line":708},[490,3286,553],{"emptyLinePlaceholder":206},[490,3288,3289,3291,3293,3295],{"class":492,"line":725},[490,3290,761],{"class":496},[490,3292,764],{"class":496},[490,3294,767],{"class":504},[490,3296,524],{"class":500},[475,3298,3299],{"icon":140,"label":772},[480,3300,3302],{"className":775,"code":3301,"filename":777,"language":778,"meta":486,"style":486},"._text-shadow\\:sm { text-shadow: 0 1px 2px rgb(0 0 0 / 0.05); }\n._text-shadow { text-shadow: 0 1px 3px rgb(0 0 0 / 0.1); }\n._text-shadow\\:md { text-shadow: 0 2px 4px rgb(0 0 0 / 0.1); }\n._text-shadow\\:lg { text-shadow: 0 4px 8px rgb(0 0 0 / 0.15); }\n._text-shadow\\:none { text-shadow: none; }\n",[461,3303,3304,3346,3382,3422,3463],{"__ignoreMap":486},[490,3305,3306,3308,3311,3313,3315,3317,3320,3322,3324,3326,3328,3330,3332,3334,3336,3338,3340,3342,3344],{"class":492,"line":493},[490,3307,785],{"class":500},[490,3309,3310],{"class":788},"_text-shadow",[490,3312,792],{"class":504},[490,3314,795],{"class":788},[490,3316,501],{"class":500},[490,3318,3319],{"class":843}," text-shadow",[490,3321,603],{"class":500},[490,3323,808],{"class":807},[490,3325,811],{"class":807},[490,3327,814],{"class":807},[490,3329,819],{"class":569},[490,3331,822],{"class":500},[490,3333,825],{"class":807},[490,3335,808],{"class":807},[490,3337,808],{"class":807},[490,3339,832],{"class":504},[490,3341,835],{"class":807},[490,3343,2177],{"class":500},[490,3345,2180],{"class":500},[490,3347,3348,3350,3352,3354,3356,3358,3360,3362,3364,3366,3368,3370,3372,3374,3376,3378,3380],{"class":492,"line":527},[490,3349,785],{"class":500},[490,3351,3310],{"class":788},[490,3353,501],{"class":500},[490,3355,3319],{"class":843},[490,3357,603],{"class":500},[490,3359,808],{"class":807},[490,3361,811],{"class":807},[490,3363,927],{"class":807},[490,3365,819],{"class":569},[490,3367,822],{"class":500},[490,3369,825],{"class":807},[490,3371,808],{"class":807},[490,3373,808],{"class":807},[490,3375,832],{"class":504},[490,3377,944],{"class":807},[490,3379,2177],{"class":500},[490,3381,2180],{"class":500},[490,3383,3384,3386,3388,3390,3392,3394,3396,3398,3400,3402,3404,3406,3408,3410,3412,3414,3416,3418,3420],{"class":492,"line":550},[490,3385,785],{"class":500},[490,3387,3310],{"class":788},[490,3389,792],{"class":504},[490,3391,1040],{"class":788},[490,3393,501],{"class":500},[490,3395,3319],{"class":843},[490,3397,603],{"class":500},[490,3399,808],{"class":807},[490,3401,814],{"class":807},[490,3403,1053],{"class":807},[490,3405,819],{"class":569},[490,3407,822],{"class":500},[490,3409,825],{"class":807},[490,3411,808],{"class":807},[490,3413,808],{"class":807},[490,3415,832],{"class":504},[490,3417,944],{"class":807},[490,3419,2177],{"class":500},[490,3421,2180],{"class":500},[490,3423,3424,3426,3428,3430,3432,3434,3436,3438,3440,3442,3444,3446,3448,3450,3452,3454,3456,3459,3461],{"class":492,"line":556},[490,3425,785],{"class":500},[490,3427,3310],{"class":788},[490,3429,792],{"class":504},[490,3431,1168],{"class":788},[490,3433,501],{"class":500},[490,3435,3319],{"class":843},[490,3437,603],{"class":500},[490,3439,808],{"class":807},[490,3441,1053],{"class":807},[490,3443,1342],{"class":807},[490,3445,819],{"class":569},[490,3447,822],{"class":500},[490,3449,825],{"class":807},[490,3451,808],{"class":807},[490,3453,808],{"class":807},[490,3455,832],{"class":504},[490,3457,3458],{"class":807},"0.15",[490,3460,2177],{"class":500},[490,3462,2180],{"class":500},[490,3464,3465,3467,3469,3471,3473,3475,3477,3479,3481,3483],{"class":492,"line":577},[490,3466,785],{"class":500},[490,3468,3310],{"class":788},[490,3470,792],{"class":504},[490,3472,735],{"class":788},[490,3474,501],{"class":500},[490,3476,3319],{"class":843},[490,3478,603],{"class":500},[490,3480,1664],{"class":504},[490,3482,2690],{"class":500},[490,3484,2180],{"class":500},[475,3486,3487],{"icon":1725,"label":1726},[480,3488,3490],{"className":1729,"code":3489,"language":1731,"meta":486,"style":486},"\u003Ch1 class=\"_text-shadow\">Subtle text shadow\u003C/h1>\n\u003Ch1 class=\"_text-shadow:lg\">Large text shadow\u003C/h1>\n",[461,3491,3492,3520],{"__ignoreMap":486},[490,3493,3494,3496,3499,3501,3503,3505,3507,3509,3511,3514,3516,3518],{"class":492,"line":493},[490,3495,1738],{"class":500},[490,3497,3498],{"class":599},"h1",[490,3500,1744],{"class":559},[490,3502,566],{"class":500},[490,3504,521],{"class":500},[490,3506,3310],{"class":517},[490,3508,521],{"class":500},[490,3510,1756],{"class":500},[490,3512,3513],{"class":504},"Subtle text shadow",[490,3515,1762],{"class":500},[490,3517,3498],{"class":599},[490,3519,1767],{"class":500},[490,3521,3522,3524,3526,3528,3530,3532,3535,3537,3539,3542,3544,3546],{"class":492,"line":527},[490,3523,1738],{"class":500},[490,3525,3498],{"class":599},[490,3527,1744],{"class":559},[490,3529,566],{"class":500},[490,3531,521],{"class":500},[490,3533,3534],{"class":517},"_text-shadow:lg",[490,3536,521],{"class":500},[490,3538,1756],{"class":500},[490,3540,3541],{"class":504},"Large text shadow",[490,3543,1762],{"class":500},[490,3545,3498],{"class":599},[490,3547,1767],{"class":500},[414,3549,3551],{"id":3550},"usemixblendmodeutility",[461,3552,3553],{},"useMixBlendModeUtility",[418,3555,466,3556,3559],{},[461,3557,3558],{},"useMixBlendModeUtility()"," function creates utility classes for controlling how an element blends with its background.",[472,3561,3562,3932,4309],{},[475,3563,3564],{"icon":477,"label":478},[480,3565,3567],{"className":482,"code":3566,"filename":484,"language":485,"meta":486,"style":486},"import { styleframe } from \"styleframe\";\nimport { useMixBlendModeUtility } from \"@styleframe/theme\";\n\nconst s = styleframe();\n\nuseMixBlendModeUtility(s, {\n    normal: 'normal',\n    multiply: 'multiply',\n    screen: 'screen',\n    overlay: 'overlay',\n    darken: 'darken',\n    lighten: 'lighten',\n    'color-dodge': 'color-dodge',\n    'color-burn': 'color-burn',\n    'hard-light': 'hard-light',\n    'soft-light': 'soft-light',\n    difference: 'difference',\n    exclusion: 'exclusion',\n    hue: 'hue',\n    saturation: 'saturation',\n    color: 'color',\n    luminosity: 'luminosity',\n});\n\nexport default s;\n",[461,3568,3569,3589,3610,3614,3628,3632,3642,3658,3674,3690,3706,3722,3738,3757,3776,3795,3814,3830,3846,3862,3878,3894,3910,3918,3922],{"__ignoreMap":486},[490,3570,3571,3573,3575,3577,3579,3581,3583,3585,3587],{"class":492,"line":493},[490,3572,497],{"class":496},[490,3574,501],{"class":500},[490,3576,505],{"class":504},[490,3578,508],{"class":500},[490,3580,511],{"class":496},[490,3582,514],{"class":500},[490,3584,518],{"class":517},[490,3586,521],{"class":500},[490,3588,524],{"class":500},[490,3590,3591,3593,3595,3598,3600,3602,3604,3606,3608],{"class":492,"line":527},[490,3592,497],{"class":496},[490,3594,501],{"class":500},[490,3596,3597],{"class":504}," useMixBlendModeUtility",[490,3599,508],{"class":500},[490,3601,511],{"class":496},[490,3603,514],{"class":500},[490,3605,543],{"class":517},[490,3607,521],{"class":500},[490,3609,524],{"class":500},[490,3611,3612],{"class":492,"line":550},[490,3613,553],{"emptyLinePlaceholder":206},[490,3615,3616,3618,3620,3622,3624,3626],{"class":492,"line":556},[490,3617,560],{"class":559},[490,3619,563],{"class":504},[490,3621,566],{"class":500},[490,3623,505],{"class":569},[490,3625,572],{"class":504},[490,3627,524],{"class":500},[490,3629,3630],{"class":492,"line":577},[490,3631,553],{"emptyLinePlaceholder":206},[490,3633,3634,3636,3638,3640],{"class":492,"line":582},[490,3635,3553],{"class":569},[490,3637,587],{"class":504},[490,3639,590],{"class":500},[490,3641,593],{"class":500},[490,3643,3644,3647,3649,3651,3654,3656],{"class":492,"line":596},[490,3645,3646],{"class":599},"    normal",[490,3648,603],{"class":500},[490,3650,606],{"class":500},[490,3652,3653],{"class":517},"normal",[490,3655,612],{"class":500},[490,3657,615],{"class":500},[490,3659,3660,3663,3665,3667,3670,3672],{"class":492,"line":618},[490,3661,3662],{"class":599},"    multiply",[490,3664,603],{"class":500},[490,3666,606],{"class":500},[490,3668,3669],{"class":517},"multiply",[490,3671,612],{"class":500},[490,3673,615],{"class":500},[490,3675,3676,3679,3681,3683,3686,3688],{"class":492,"line":635},[490,3677,3678],{"class":599},"    screen",[490,3680,603],{"class":500},[490,3682,606],{"class":500},[490,3684,3685],{"class":517},"screen",[490,3687,612],{"class":500},[490,3689,615],{"class":500},[490,3691,3692,3695,3697,3699,3702,3704],{"class":492,"line":652},[490,3693,3694],{"class":599},"    overlay",[490,3696,603],{"class":500},[490,3698,606],{"class":500},[490,3700,3701],{"class":517},"overlay",[490,3703,612],{"class":500},[490,3705,615],{"class":500},[490,3707,3708,3711,3713,3715,3718,3720],{"class":492,"line":669},[490,3709,3710],{"class":599},"    darken",[490,3712,603],{"class":500},[490,3714,606],{"class":500},[490,3716,3717],{"class":517},"darken",[490,3719,612],{"class":500},[490,3721,615],{"class":500},[490,3723,3724,3727,3729,3731,3734,3736],{"class":492,"line":686},[490,3725,3726],{"class":599},"    lighten",[490,3728,603],{"class":500},[490,3730,606],{"class":500},[490,3732,3733],{"class":517},"lighten",[490,3735,612],{"class":500},[490,3737,615],{"class":500},[490,3739,3740,3742,3745,3747,3749,3751,3753,3755],{"class":492,"line":708},[490,3741,689],{"class":500},[490,3743,3744],{"class":599},"color-dodge",[490,3746,612],{"class":500},[490,3748,603],{"class":500},[490,3750,606],{"class":500},[490,3752,3744],{"class":517},[490,3754,612],{"class":500},[490,3756,615],{"class":500},[490,3758,3759,3761,3764,3766,3768,3770,3772,3774],{"class":492,"line":725},[490,3760,689],{"class":500},[490,3762,3763],{"class":599},"color-burn",[490,3765,612],{"class":500},[490,3767,603],{"class":500},[490,3769,606],{"class":500},[490,3771,3763],{"class":517},[490,3773,612],{"class":500},[490,3775,615],{"class":500},[490,3777,3778,3780,3783,3785,3787,3789,3791,3793],{"class":492,"line":742},[490,3779,689],{"class":500},[490,3781,3782],{"class":599},"hard-light",[490,3784,612],{"class":500},[490,3786,603],{"class":500},[490,3788,606],{"class":500},[490,3790,3782],{"class":517},[490,3792,612],{"class":500},[490,3794,615],{"class":500},[490,3796,3797,3799,3802,3804,3806,3808,3810,3812],{"class":492,"line":753},[490,3798,689],{"class":500},[490,3800,3801],{"class":599},"soft-light",[490,3803,612],{"class":500},[490,3805,603],{"class":500},[490,3807,606],{"class":500},[490,3809,3801],{"class":517},[490,3811,612],{"class":500},[490,3813,615],{"class":500},[490,3815,3816,3819,3821,3823,3826,3828],{"class":492,"line":758},[490,3817,3818],{"class":599},"    difference",[490,3820,603],{"class":500},[490,3822,606],{"class":500},[490,3824,3825],{"class":517},"difference",[490,3827,612],{"class":500},[490,3829,615],{"class":500},[490,3831,3832,3835,3837,3839,3842,3844],{"class":492,"line":1231},[490,3833,3834],{"class":599},"    exclusion",[490,3836,603],{"class":500},[490,3838,606],{"class":500},[490,3840,3841],{"class":517},"exclusion",[490,3843,612],{"class":500},[490,3845,615],{"class":500},[490,3847,3848,3851,3853,3855,3858,3860],{"class":492,"line":1282},[490,3849,3850],{"class":599},"    hue",[490,3852,603],{"class":500},[490,3854,606],{"class":500},[490,3856,3857],{"class":517},"hue",[490,3859,612],{"class":500},[490,3861,615],{"class":500},[490,3863,3864,3867,3869,3871,3874,3876],{"class":492,"line":1287},[490,3865,3866],{"class":599},"    saturation",[490,3868,603],{"class":500},[490,3870,606],{"class":500},[490,3872,3873],{"class":517},"saturation",[490,3875,612],{"class":500},[490,3877,615],{"class":500},[490,3879,3880,3883,3885,3887,3890,3892],{"class":492,"line":1292},[490,3881,3882],{"class":599},"    color",[490,3884,603],{"class":500},[490,3886,606],{"class":500},[490,3888,3889],{"class":517},"color",[490,3891,612],{"class":500},[490,3893,615],{"class":500},[490,3895,3896,3899,3901,3903,3906,3908],{"class":492,"line":1306},[490,3897,3898],{"class":599},"    luminosity",[490,3900,603],{"class":500},[490,3902,606],{"class":500},[490,3904,3905],{"class":517},"luminosity",[490,3907,612],{"class":500},[490,3909,615],{"class":500},[490,3911,3912,3914,3916],{"class":492,"line":1366},[490,3913,745],{"class":500},[490,3915,748],{"class":504},[490,3917,524],{"class":500},[490,3919,3920],{"class":492,"line":1417},[490,3921,553],{"emptyLinePlaceholder":206},[490,3923,3924,3926,3928,3930],{"class":492,"line":1422},[490,3925,761],{"class":496},[490,3927,764],{"class":496},[490,3929,767],{"class":504},[490,3931,524],{"class":500},[475,3933,3934],{"icon":140,"label":772},[480,3935,3937],{"className":775,"code":3936,"filename":777,"language":778,"meta":486,"style":486},"._mix-blend-mode\\:normal { mix-blend-mode: normal; }\n._mix-blend-mode\\:multiply { mix-blend-mode: multiply; }\n._mix-blend-mode\\:screen { mix-blend-mode: screen; }\n._mix-blend-mode\\:overlay { mix-blend-mode: overlay; }\n._mix-blend-mode\\:darken { mix-blend-mode: darken; }\n._mix-blend-mode\\:lighten { mix-blend-mode: lighten; }\n._mix-blend-mode\\:color-dodge { mix-blend-mode: color-dodge; }\n._mix-blend-mode\\:color-burn { mix-blend-mode: color-burn; }\n._mix-blend-mode\\:hard-light { mix-blend-mode: hard-light; }\n._mix-blend-mode\\:soft-light { mix-blend-mode: soft-light; }\n._mix-blend-mode\\:difference { mix-blend-mode: difference; }\n._mix-blend-mode\\:exclusion { mix-blend-mode: exclusion; }\n._mix-blend-mode\\:hue { mix-blend-mode: hue; }\n._mix-blend-mode\\:saturation { mix-blend-mode: saturation; }\n._mix-blend-mode\\:color { mix-blend-mode: color; }\n._mix-blend-mode\\:luminosity { mix-blend-mode: luminosity; }\n",[461,3938,3939,3964,3987,4010,4033,4056,4079,4102,4125,4148,4171,4194,4217,4240,4263,4286],{"__ignoreMap":486},[490,3940,3941,3943,3946,3948,3950,3952,3955,3957,3960,3962],{"class":492,"line":493},[490,3942,785],{"class":500},[490,3944,3945],{"class":788},"_mix-blend-mode",[490,3947,792],{"class":504},[490,3949,3653],{"class":788},[490,3951,501],{"class":500},[490,3953,3954],{"class":843}," mix-blend-mode",[490,3956,603],{"class":500},[490,3958,3959],{"class":504}," normal",[490,3961,2690],{"class":500},[490,3963,2180],{"class":500},[490,3965,3966,3968,3970,3972,3974,3976,3978,3980,3983,3985],{"class":492,"line":527},[490,3967,785],{"class":500},[490,3969,3945],{"class":788},[490,3971,792],{"class":504},[490,3973,3669],{"class":788},[490,3975,501],{"class":500},[490,3977,3954],{"class":843},[490,3979,603],{"class":500},[490,3981,3982],{"class":504}," multiply",[490,3984,2690],{"class":500},[490,3986,2180],{"class":500},[490,3988,3989,3991,3993,3995,3997,3999,4001,4003,4006,4008],{"class":492,"line":550},[490,3990,785],{"class":500},[490,3992,3945],{"class":788},[490,3994,792],{"class":504},[490,3996,3685],{"class":788},[490,3998,501],{"class":500},[490,4000,3954],{"class":843},[490,4002,603],{"class":500},[490,4004,4005],{"class":504}," screen",[490,4007,2690],{"class":500},[490,4009,2180],{"class":500},[490,4011,4012,4014,4016,4018,4020,4022,4024,4026,4029,4031],{"class":492,"line":556},[490,4013,785],{"class":500},[490,4015,3945],{"class":788},[490,4017,792],{"class":504},[490,4019,3701],{"class":788},[490,4021,501],{"class":500},[490,4023,3954],{"class":843},[490,4025,603],{"class":500},[490,4027,4028],{"class":504}," overlay",[490,4030,2690],{"class":500},[490,4032,2180],{"class":500},[490,4034,4035,4037,4039,4041,4043,4045,4047,4049,4052,4054],{"class":492,"line":577},[490,4036,785],{"class":500},[490,4038,3945],{"class":788},[490,4040,792],{"class":504},[490,4042,3717],{"class":788},[490,4044,501],{"class":500},[490,4046,3954],{"class":843},[490,4048,603],{"class":500},[490,4050,4051],{"class":504}," darken",[490,4053,2690],{"class":500},[490,4055,2180],{"class":500},[490,4057,4058,4060,4062,4064,4066,4068,4070,4072,4075,4077],{"class":492,"line":582},[490,4059,785],{"class":500},[490,4061,3945],{"class":788},[490,4063,792],{"class":504},[490,4065,3733],{"class":788},[490,4067,501],{"class":500},[490,4069,3954],{"class":843},[490,4071,603],{"class":500},[490,4073,4074],{"class":504}," lighten",[490,4076,2690],{"class":500},[490,4078,2180],{"class":500},[490,4080,4081,4083,4085,4087,4089,4091,4093,4095,4098,4100],{"class":492,"line":596},[490,4082,785],{"class":500},[490,4084,3945],{"class":788},[490,4086,792],{"class":504},[490,4088,3744],{"class":788},[490,4090,501],{"class":500},[490,4092,3954],{"class":843},[490,4094,603],{"class":500},[490,4096,4097],{"class":504}," color-dodge",[490,4099,2690],{"class":500},[490,4101,2180],{"class":500},[490,4103,4104,4106,4108,4110,4112,4114,4116,4118,4121,4123],{"class":492,"line":618},[490,4105,785],{"class":500},[490,4107,3945],{"class":788},[490,4109,792],{"class":504},[490,4111,3763],{"class":788},[490,4113,501],{"class":500},[490,4115,3954],{"class":843},[490,4117,603],{"class":500},[490,4119,4120],{"class":504}," color-burn",[490,4122,2690],{"class":500},[490,4124,2180],{"class":500},[490,4126,4127,4129,4131,4133,4135,4137,4139,4141,4144,4146],{"class":492,"line":635},[490,4128,785],{"class":500},[490,4130,3945],{"class":788},[490,4132,792],{"class":504},[490,4134,3782],{"class":788},[490,4136,501],{"class":500},[490,4138,3954],{"class":843},[490,4140,603],{"class":500},[490,4142,4143],{"class":504}," hard-light",[490,4145,2690],{"class":500},[490,4147,2180],{"class":500},[490,4149,4150,4152,4154,4156,4158,4160,4162,4164,4167,4169],{"class":492,"line":652},[490,4151,785],{"class":500},[490,4153,3945],{"class":788},[490,4155,792],{"class":504},[490,4157,3801],{"class":788},[490,4159,501],{"class":500},[490,4161,3954],{"class":843},[490,4163,603],{"class":500},[490,4165,4166],{"class":504}," soft-light",[490,4168,2690],{"class":500},[490,4170,2180],{"class":500},[490,4172,4173,4175,4177,4179,4181,4183,4185,4187,4190,4192],{"class":492,"line":669},[490,4174,785],{"class":500},[490,4176,3945],{"class":788},[490,4178,792],{"class":504},[490,4180,3825],{"class":788},[490,4182,501],{"class":500},[490,4184,3954],{"class":843},[490,4186,603],{"class":500},[490,4188,4189],{"class":504}," difference",[490,4191,2690],{"class":500},[490,4193,2180],{"class":500},[490,4195,4196,4198,4200,4202,4204,4206,4208,4210,4213,4215],{"class":492,"line":686},[490,4197,785],{"class":500},[490,4199,3945],{"class":788},[490,4201,792],{"class":504},[490,4203,3841],{"class":788},[490,4205,501],{"class":500},[490,4207,3954],{"class":843},[490,4209,603],{"class":500},[490,4211,4212],{"class":504}," exclusion",[490,4214,2690],{"class":500},[490,4216,2180],{"class":500},[490,4218,4219,4221,4223,4225,4227,4229,4231,4233,4236,4238],{"class":492,"line":708},[490,4220,785],{"class":500},[490,4222,3945],{"class":788},[490,4224,792],{"class":504},[490,4226,3857],{"class":788},[490,4228,501],{"class":500},[490,4230,3954],{"class":843},[490,4232,603],{"class":500},[490,4234,4235],{"class":504}," hue",[490,4237,2690],{"class":500},[490,4239,2180],{"class":500},[490,4241,4242,4244,4246,4248,4250,4252,4254,4256,4259,4261],{"class":492,"line":725},[490,4243,785],{"class":500},[490,4245,3945],{"class":788},[490,4247,792],{"class":504},[490,4249,3873],{"class":788},[490,4251,501],{"class":500},[490,4253,3954],{"class":843},[490,4255,603],{"class":500},[490,4257,4258],{"class":504}," saturation",[490,4260,2690],{"class":500},[490,4262,2180],{"class":500},[490,4264,4265,4267,4269,4271,4273,4275,4277,4279,4282,4284],{"class":492,"line":742},[490,4266,785],{"class":500},[490,4268,3945],{"class":788},[490,4270,792],{"class":504},[490,4272,3889],{"class":788},[490,4274,501],{"class":500},[490,4276,3954],{"class":843},[490,4278,603],{"class":500},[490,4280,4281],{"class":504}," color",[490,4283,2690],{"class":500},[490,4285,2180],{"class":500},[490,4287,4288,4290,4292,4294,4296,4298,4300,4302,4305,4307],{"class":492,"line":753},[490,4289,785],{"class":500},[490,4291,3945],{"class":788},[490,4293,792],{"class":504},[490,4295,3905],{"class":788},[490,4297,501],{"class":500},[490,4299,3954],{"class":843},[490,4301,603],{"class":500},[490,4303,4304],{"class":504}," luminosity",[490,4306,2690],{"class":500},[490,4308,2180],{"class":500},[475,4310,4311],{"icon":1725,"label":1726},[480,4312,4314],{"className":1729,"code":4313,"language":1731,"meta":486,"style":486},"\u003Cdiv class=\"_mix-blend-mode:multiply\">Multiply blend\u003C/div>\n\u003Cdiv class=\"_mix-blend-mode:screen\">Screen blend\u003C/div>\n\u003Cimg class=\"_mix-blend-mode:overlay\" src=\"image.jpg\" alt=\"Blended image\">\n",[461,4315,4316,4344,4372],{"__ignoreMap":486},[490,4317,4318,4320,4322,4324,4326,4328,4331,4333,4335,4338,4340,4342],{"class":492,"line":493},[490,4319,1738],{"class":500},[490,4321,1741],{"class":599},[490,4323,1744],{"class":559},[490,4325,566],{"class":500},[490,4327,521],{"class":500},[490,4329,4330],{"class":517},"_mix-blend-mode:multiply",[490,4332,521],{"class":500},[490,4334,1756],{"class":500},[490,4336,4337],{"class":504},"Multiply blend",[490,4339,1762],{"class":500},[490,4341,1741],{"class":599},[490,4343,1767],{"class":500},[490,4345,4346,4348,4350,4352,4354,4356,4359,4361,4363,4366,4368,4370],{"class":492,"line":527},[490,4347,1738],{"class":500},[490,4349,1741],{"class":599},[490,4351,1744],{"class":559},[490,4353,566],{"class":500},[490,4355,521],{"class":500},[490,4357,4358],{"class":517},"_mix-blend-mode:screen",[490,4360,521],{"class":500},[490,4362,1756],{"class":500},[490,4364,4365],{"class":504},"Screen blend",[490,4367,1762],{"class":500},[490,4369,1741],{"class":599},[490,4371,1767],{"class":500},[490,4373,4374,4376,4379,4381,4383,4385,4388,4390,4393,4395,4397,4400,4402,4405,4407,4409,4412,4414],{"class":492,"line":550},[490,4375,1738],{"class":500},[490,4377,4378],{"class":599},"img",[490,4380,1744],{"class":559},[490,4382,566],{"class":500},[490,4384,521],{"class":500},[490,4386,4387],{"class":517},"_mix-blend-mode:overlay",[490,4389,521],{"class":500},[490,4391,4392],{"class":559}," src",[490,4394,566],{"class":500},[490,4396,521],{"class":500},[490,4398,4399],{"class":517},"image.jpg",[490,4401,521],{"class":500},[490,4403,4404],{"class":559}," alt",[490,4406,566],{"class":500},[490,4408,521],{"class":500},[490,4410,4411],{"class":517},"Blended image",[490,4413,521],{"class":500},[490,4415,1767],{"class":500},[414,4417,4419],{"id":4418},"usebackgroundblendmodeutility",[461,4420,4421],{},"useBackgroundBlendModeUtility",[418,4423,466,4424,4427],{},[461,4425,4426],{},"useBackgroundBlendModeUtility()"," function creates utility classes for controlling how background layers blend together.",[472,4429,4430,4616,4757],{},[475,4431,4432],{"icon":477,"label":478},[480,4433,4435],{"className":482,"code":4434,"filename":484,"language":485,"meta":486,"style":486},"import { styleframe } from \"styleframe\";\nimport { useBackgroundBlendModeUtility } from \"@styleframe/theme\";\n\nconst s = styleframe();\n\nuseBackgroundBlendModeUtility(s, {\n    normal: 'normal',\n    multiply: 'multiply',\n    screen: 'screen',\n    overlay: 'overlay',\n    darken: 'darken',\n    lighten: 'lighten',\n});\n\nexport default s;\n",[461,4436,4437,4457,4478,4482,4496,4500,4510,4524,4538,4552,4566,4580,4594,4602,4606],{"__ignoreMap":486},[490,4438,4439,4441,4443,4445,4447,4449,4451,4453,4455],{"class":492,"line":493},[490,4440,497],{"class":496},[490,4442,501],{"class":500},[490,4444,505],{"class":504},[490,4446,508],{"class":500},[490,4448,511],{"class":496},[490,4450,514],{"class":500},[490,4452,518],{"class":517},[490,4454,521],{"class":500},[490,4456,524],{"class":500},[490,4458,4459,4461,4463,4466,4468,4470,4472,4474,4476],{"class":492,"line":527},[490,4460,497],{"class":496},[490,4462,501],{"class":500},[490,4464,4465],{"class":504}," useBackgroundBlendModeUtility",[490,4467,508],{"class":500},[490,4469,511],{"class":496},[490,4471,514],{"class":500},[490,4473,543],{"class":517},[490,4475,521],{"class":500},[490,4477,524],{"class":500},[490,4479,4480],{"class":492,"line":550},[490,4481,553],{"emptyLinePlaceholder":206},[490,4483,4484,4486,4488,4490,4492,4494],{"class":492,"line":556},[490,4485,560],{"class":559},[490,4487,563],{"class":504},[490,4489,566],{"class":500},[490,4491,505],{"class":569},[490,4493,572],{"class":504},[490,4495,524],{"class":500},[490,4497,4498],{"class":492,"line":577},[490,4499,553],{"emptyLinePlaceholder":206},[490,4501,4502,4504,4506,4508],{"class":492,"line":582},[490,4503,4421],{"class":569},[490,4505,587],{"class":504},[490,4507,590],{"class":500},[490,4509,593],{"class":500},[490,4511,4512,4514,4516,4518,4520,4522],{"class":492,"line":596},[490,4513,3646],{"class":599},[490,4515,603],{"class":500},[490,4517,606],{"class":500},[490,4519,3653],{"class":517},[490,4521,612],{"class":500},[490,4523,615],{"class":500},[490,4525,4526,4528,4530,4532,4534,4536],{"class":492,"line":618},[490,4527,3662],{"class":599},[490,4529,603],{"class":500},[490,4531,606],{"class":500},[490,4533,3669],{"class":517},[490,4535,612],{"class":500},[490,4537,615],{"class":500},[490,4539,4540,4542,4544,4546,4548,4550],{"class":492,"line":635},[490,4541,3678],{"class":599},[490,4543,603],{"class":500},[490,4545,606],{"class":500},[490,4547,3685],{"class":517},[490,4549,612],{"class":500},[490,4551,615],{"class":500},[490,4553,4554,4556,4558,4560,4562,4564],{"class":492,"line":652},[490,4555,3694],{"class":599},[490,4557,603],{"class":500},[490,4559,606],{"class":500},[490,4561,3701],{"class":517},[490,4563,612],{"class":500},[490,4565,615],{"class":500},[490,4567,4568,4570,4572,4574,4576,4578],{"class":492,"line":669},[490,4569,3710],{"class":599},[490,4571,603],{"class":500},[490,4573,606],{"class":500},[490,4575,3717],{"class":517},[490,4577,612],{"class":500},[490,4579,615],{"class":500},[490,4581,4582,4584,4586,4588,4590,4592],{"class":492,"line":686},[490,4583,3726],{"class":599},[490,4585,603],{"class":500},[490,4587,606],{"class":500},[490,4589,3733],{"class":517},[490,4591,612],{"class":500},[490,4593,615],{"class":500},[490,4595,4596,4598,4600],{"class":492,"line":708},[490,4597,745],{"class":500},[490,4599,748],{"class":504},[490,4601,524],{"class":500},[490,4603,4604],{"class":492,"line":725},[490,4605,553],{"emptyLinePlaceholder":206},[490,4607,4608,4610,4612,4614],{"class":492,"line":742},[490,4609,761],{"class":496},[490,4611,764],{"class":496},[490,4613,767],{"class":504},[490,4615,524],{"class":500},[475,4617,4618],{"icon":140,"label":772},[480,4619,4621],{"className":775,"code":4620,"filename":777,"language":778,"meta":486,"style":486},"._background-blend-mode\\:normal { background-blend-mode: normal; }\n._background-blend-mode\\:multiply { background-blend-mode: multiply; }\n._background-blend-mode\\:screen { background-blend-mode: screen; }\n._background-blend-mode\\:overlay { background-blend-mode: overlay; }\n._background-blend-mode\\:darken { background-blend-mode: darken; }\n._background-blend-mode\\:lighten { background-blend-mode: lighten; }\n",[461,4622,4623,4647,4669,4691,4713,4735],{"__ignoreMap":486},[490,4624,4625,4627,4630,4632,4634,4636,4639,4641,4643,4645],{"class":492,"line":493},[490,4626,785],{"class":500},[490,4628,4629],{"class":788},"_background-blend-mode",[490,4631,792],{"class":504},[490,4633,3653],{"class":788},[490,4635,501],{"class":500},[490,4637,4638],{"class":843}," background-blend-mode",[490,4640,603],{"class":500},[490,4642,3959],{"class":504},[490,4644,2690],{"class":500},[490,4646,2180],{"class":500},[490,4648,4649,4651,4653,4655,4657,4659,4661,4663,4665,4667],{"class":492,"line":527},[490,4650,785],{"class":500},[490,4652,4629],{"class":788},[490,4654,792],{"class":504},[490,4656,3669],{"class":788},[490,4658,501],{"class":500},[490,4660,4638],{"class":843},[490,4662,603],{"class":500},[490,4664,3982],{"class":504},[490,4666,2690],{"class":500},[490,4668,2180],{"class":500},[490,4670,4671,4673,4675,4677,4679,4681,4683,4685,4687,4689],{"class":492,"line":550},[490,4672,785],{"class":500},[490,4674,4629],{"class":788},[490,4676,792],{"class":504},[490,4678,3685],{"class":788},[490,4680,501],{"class":500},[490,4682,4638],{"class":843},[490,4684,603],{"class":500},[490,4686,4005],{"class":504},[490,4688,2690],{"class":500},[490,4690,2180],{"class":500},[490,4692,4693,4695,4697,4699,4701,4703,4705,4707,4709,4711],{"class":492,"line":556},[490,4694,785],{"class":500},[490,4696,4629],{"class":788},[490,4698,792],{"class":504},[490,4700,3701],{"class":788},[490,4702,501],{"class":500},[490,4704,4638],{"class":843},[490,4706,603],{"class":500},[490,4708,4028],{"class":504},[490,4710,2690],{"class":500},[490,4712,2180],{"class":500},[490,4714,4715,4717,4719,4721,4723,4725,4727,4729,4731,4733],{"class":492,"line":577},[490,4716,785],{"class":500},[490,4718,4629],{"class":788},[490,4720,792],{"class":504},[490,4722,3717],{"class":788},[490,4724,501],{"class":500},[490,4726,4638],{"class":843},[490,4728,603],{"class":500},[490,4730,4051],{"class":504},[490,4732,2690],{"class":500},[490,4734,2180],{"class":500},[490,4736,4737,4739,4741,4743,4745,4747,4749,4751,4753,4755],{"class":492,"line":582},[490,4738,785],{"class":500},[490,4740,4629],{"class":788},[490,4742,792],{"class":504},[490,4744,3733],{"class":788},[490,4746,501],{"class":500},[490,4748,4638],{"class":843},[490,4750,603],{"class":500},[490,4752,4074],{"class":504},[490,4754,2690],{"class":500},[490,4756,2180],{"class":500},[475,4758,4759],{"icon":1725,"label":1726},[480,4760,4762],{"className":1729,"code":4761,"language":1731,"meta":486,"style":486},"\u003Cdiv class=\"_background-blend-mode:multiply\" style=\"background: url(image.jpg), blue;\">\n    Background layers multiply\n\u003C/div>\n",[461,4763,4764,4795,4800],{"__ignoreMap":486},[490,4765,4766,4768,4770,4772,4774,4776,4779,4781,4784,4786,4788,4791,4793],{"class":492,"line":493},[490,4767,1738],{"class":500},[490,4769,1741],{"class":599},[490,4771,1744],{"class":559},[490,4773,566],{"class":500},[490,4775,521],{"class":500},[490,4777,4778],{"class":517},"_background-blend-mode:multiply",[490,4780,521],{"class":500},[490,4782,4783],{"class":559}," style",[490,4785,566],{"class":500},[490,4787,521],{"class":500},[490,4789,4790],{"class":517},"background: url(image.jpg), blue;",[490,4792,521],{"class":500},[490,4794,1767],{"class":500},[490,4796,4797],{"class":492,"line":527},[490,4798,4799],{"class":504},"    Background layers multiply\n",[490,4801,4802,4804,4806],{"class":492,"line":550},[490,4803,1762],{"class":500},[490,4805,1741],{"class":599},[490,4807,1767],{"class":500},[414,4809,4811],{"id":4810},"examples","Examples",[4813,4814,4816],"h3",{"id":4815},"card-with-elevation","Card with Elevation",[472,4818,4819,5112],{},[475,4820,4821],{"icon":477,"label":478},[480,4822,4824],{"className":482,"code":4823,"filename":484,"language":485,"meta":486,"style":486},"import { styleframe } from \"styleframe\";\nimport { useBoxShadowUtility } from \"@styleframe/theme\";\n\nconst s = styleframe();\nconst { selector, modifier } = s;\n\nuseBoxShadowUtility(s, {\n    sm: '0 1px 2px 0 rgb(0 0 0 / 0.05)',\n    default: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',\n    md: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',\n    lg: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',\n});\n\n// Create hover modifier\nconst hover = modifier('hover', ({ declarations }) => ({\n    '&:hover': declarations,\n}));\n\n// Apply shadow with hover state\nuseBoxShadowUtility(s, { lg: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)' }, [hover]);\n\nexport default s;\n",[461,4825,4826,4846,4866,4870,4884,4906,4910,4920,4934,4948,4962,4976,4984,4988,4994,5036,5051,5060,5064,5069,5098,5102],{"__ignoreMap":486},[490,4827,4828,4830,4832,4834,4836,4838,4840,4842,4844],{"class":492,"line":493},[490,4829,497],{"class":496},[490,4831,501],{"class":500},[490,4833,505],{"class":504},[490,4835,508],{"class":500},[490,4837,511],{"class":496},[490,4839,514],{"class":500},[490,4841,518],{"class":517},[490,4843,521],{"class":500},[490,4845,524],{"class":500},[490,4847,4848,4850,4852,4854,4856,4858,4860,4862,4864],{"class":492,"line":527},[490,4849,497],{"class":496},[490,4851,501],{"class":500},[490,4853,534],{"class":504},[490,4855,508],{"class":500},[490,4857,511],{"class":496},[490,4859,514],{"class":500},[490,4861,543],{"class":517},[490,4863,521],{"class":500},[490,4865,524],{"class":500},[490,4867,4868],{"class":492,"line":550},[490,4869,553],{"emptyLinePlaceholder":206},[490,4871,4872,4874,4876,4878,4880,4882],{"class":492,"line":556},[490,4873,560],{"class":559},[490,4875,563],{"class":504},[490,4877,566],{"class":500},[490,4879,505],{"class":569},[490,4881,572],{"class":504},[490,4883,524],{"class":500},[490,4885,4886,4888,4890,4893,4895,4898,4900,4902,4904],{"class":492,"line":577},[490,4887,560],{"class":559},[490,4889,501],{"class":500},[490,4891,4892],{"class":504}," selector",[490,4894,590],{"class":500},[490,4896,4897],{"class":504}," modifier ",[490,4899,745],{"class":500},[490,4901,1976],{"class":500},[490,4903,767],{"class":504},[490,4905,524],{"class":500},[490,4907,4908],{"class":492,"line":582},[490,4909,553],{"emptyLinePlaceholder":206},[490,4911,4912,4914,4916,4918],{"class":492,"line":596},[490,4913,463],{"class":569},[490,4915,587],{"class":504},[490,4917,590],{"class":500},[490,4919,593],{"class":500},[490,4921,4922,4924,4926,4928,4930,4932],{"class":492,"line":618},[490,4923,600],{"class":599},[490,4925,603],{"class":500},[490,4927,606],{"class":500},[490,4929,609],{"class":517},[490,4931,612],{"class":500},[490,4933,615],{"class":500},[490,4935,4936,4938,4940,4942,4944,4946],{"class":492,"line":635},[490,4937,621],{"class":599},[490,4939,603],{"class":500},[490,4941,606],{"class":500},[490,4943,628],{"class":517},[490,4945,612],{"class":500},[490,4947,615],{"class":500},[490,4949,4950,4952,4954,4956,4958,4960],{"class":492,"line":652},[490,4951,638],{"class":599},[490,4953,603],{"class":500},[490,4955,606],{"class":500},[490,4957,645],{"class":517},[490,4959,612],{"class":500},[490,4961,615],{"class":500},[490,4963,4964,4966,4968,4970,4972,4974],{"class":492,"line":669},[490,4965,655],{"class":599},[490,4967,603],{"class":500},[490,4969,606],{"class":500},[490,4971,662],{"class":517},[490,4973,612],{"class":500},[490,4975,615],{"class":500},[490,4977,4978,4980,4982],{"class":492,"line":686},[490,4979,745],{"class":500},[490,4981,748],{"class":504},[490,4983,524],{"class":500},[490,4985,4986],{"class":492,"line":708},[490,4987,553],{"emptyLinePlaceholder":206},[490,4989,4990],{"class":492,"line":725},[490,4991,4993],{"class":4992},"sHwdD","// Create hover modifier\n",[490,4995,4996,4998,5001,5003,5006,5008,5010,5013,5015,5017,5020,5024,5027,5030,5033],{"class":492,"line":742},[490,4997,560],{"class":559},[490,4999,5000],{"class":504}," hover ",[490,5002,566],{"class":500},[490,5004,5005],{"class":569}," modifier",[490,5007,822],{"class":504},[490,5009,612],{"class":500},[490,5011,5012],{"class":517},"hover",[490,5014,612],{"class":500},[490,5016,590],{"class":500},[490,5018,5019],{"class":500}," ({",[490,5021,5023],{"class":5022},"sHdIc"," declarations",[490,5025,5026],{"class":500}," })",[490,5028,5029],{"class":559}," =>",[490,5031,5032],{"class":504}," (",[490,5034,5035],{"class":500},"{\n",[490,5037,5038,5040,5043,5045,5047,5049],{"class":492,"line":753},[490,5039,689],{"class":500},[490,5041,5042],{"class":599},"&:hover",[490,5044,612],{"class":500},[490,5046,603],{"class":500},[490,5048,5023],{"class":504},[490,5050,615],{"class":500},[490,5052,5053,5055,5058],{"class":492,"line":758},[490,5054,745],{"class":500},[490,5056,5057],{"class":504},"))",[490,5059,524],{"class":500},[490,5061,5062],{"class":492,"line":1231},[490,5063,553],{"emptyLinePlaceholder":206},[490,5065,5066],{"class":492,"line":1282},[490,5067,5068],{"class":4992},"// Apply shadow with hover state\n",[490,5070,5071,5073,5075,5077,5079,5082,5084,5086,5088,5090,5093,5096],{"class":492,"line":1287},[490,5072,463],{"class":569},[490,5074,587],{"class":504},[490,5076,590],{"class":500},[490,5078,501],{"class":500},[490,5080,5081],{"class":599}," lg",[490,5083,603],{"class":500},[490,5085,606],{"class":500},[490,5087,662],{"class":517},[490,5089,612],{"class":500},[490,5091,5092],{"class":500}," },",[490,5094,5095],{"class":504}," [hover])",[490,5097,524],{"class":500},[490,5099,5100],{"class":492,"line":1292},[490,5101,553],{"emptyLinePlaceholder":206},[490,5103,5104,5106,5108,5110],{"class":492,"line":1306},[490,5105,761],{"class":496},[490,5107,764],{"class":496},[490,5109,767],{"class":504},[490,5111,524],{"class":500},[475,5113,5114],{"icon":140,"label":772},[480,5115,5117],{"className":775,"code":5116,"filename":777,"language":778,"meta":486,"style":486},"._box-shadow\\:sm {\n    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n._box-shadow {\n    --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n._box-shadow\\:lg {\n    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n._hover\\:box-shadow\\:lg:hover {\n    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n",[461,5118,5119,5131,5161,5211,5215,5219,5227,5281,5331,5335,5339,5351,5405,5455,5459,5463,5485,5539,5589],{"__ignoreMap":486},[490,5120,5121,5123,5125,5127,5129],{"class":492,"line":493},[490,5122,785],{"class":500},[490,5124,789],{"class":788},[490,5126,792],{"class":504},[490,5128,795],{"class":788},[490,5130,593],{"class":500},[490,5132,5133,5135,5137,5139,5141,5143,5145,5147,5149,5151,5153,5155,5157,5159],{"class":492,"line":527},[490,5134,802],{"class":504},[490,5136,603],{"class":500},[490,5138,808],{"class":807},[490,5140,811],{"class":807},[490,5142,814],{"class":807},[490,5144,808],{"class":807},[490,5146,819],{"class":569},[490,5148,822],{"class":500},[490,5150,825],{"class":807},[490,5152,808],{"class":807},[490,5154,808],{"class":807},[490,5156,832],{"class":504},[490,5158,835],{"class":807},[490,5160,838],{"class":500},[490,5162,5163,5165,5167,5169,5171,5173,5175,5177,5179,5181,5183,5185,5187,5189,5191,5193,5195,5197,5199,5201,5203,5205,5207,5209],{"class":492,"line":550},[490,5164,844],{"class":843},[490,5166,603],{"class":500},[490,5168,849],{"class":569},[490,5170,822],{"class":500},[490,5172,854],{"class":504},[490,5174,590],{"class":500},[490,5176,808],{"class":807},[490,5178,808],{"class":807},[490,5180,863],{"class":500},[490,5182,866],{"class":504},[490,5184,869],{"class":500},[490,5186,849],{"class":569},[490,5188,822],{"class":500},[490,5190,876],{"class":504},[490,5192,590],{"class":500},[490,5194,808],{"class":807},[490,5196,808],{"class":807},[490,5198,863],{"class":500},[490,5200,866],{"class":504},[490,5202,869],{"class":500},[490,5204,849],{"class":569},[490,5206,822],{"class":500},[490,5208,895],{"class":504},[490,5210,838],{"class":500},[490,5212,5213],{"class":492,"line":556},[490,5214,902],{"class":500},[490,5216,5217],{"class":492,"line":577},[490,5218,553],{"emptyLinePlaceholder":206},[490,5220,5221,5223,5225],{"class":492,"line":582},[490,5222,785],{"class":500},[490,5224,789],{"class":788},[490,5226,593],{"class":500},[490,5228,5229,5231,5233,5235,5237,5239,5241,5243,5245,5247,5249,5251,5253,5255,5257,5259,5261,5263,5265,5267,5269,5271,5273,5275,5277,5279],{"class":492,"line":596},[490,5230,802],{"class":504},[490,5232,603],{"class":500},[490,5234,808],{"class":807},[490,5236,811],{"class":807},[490,5238,927],{"class":807},[490,5240,808],{"class":807},[490,5242,819],{"class":569},[490,5244,822],{"class":500},[490,5246,825],{"class":807},[490,5248,808],{"class":807},[490,5250,808],{"class":807},[490,5252,832],{"class":504},[490,5254,944],{"class":807},[490,5256,869],{"class":500},[490,5258,808],{"class":807},[490,5260,811],{"class":807},[490,5262,814],{"class":807},[490,5264,955],{"class":807},[490,5266,819],{"class":569},[490,5268,822],{"class":500},[490,5270,825],{"class":807},[490,5272,808],{"class":807},[490,5274,808],{"class":807},[490,5276,832],{"class":504},[490,5278,944],{"class":807},[490,5280,838],{"class":500},[490,5282,5283,5285,5287,5289,5291,5293,5295,5297,5299,5301,5303,5305,5307,5309,5311,5313,5315,5317,5319,5321,5323,5325,5327,5329],{"class":492,"line":618},[490,5284,844],{"class":843},[490,5286,603],{"class":500},[490,5288,849],{"class":569},[490,5290,822],{"class":500},[490,5292,854],{"class":504},[490,5294,590],{"class":500},[490,5296,808],{"class":807},[490,5298,808],{"class":807},[490,5300,863],{"class":500},[490,5302,866],{"class":504},[490,5304,869],{"class":500},[490,5306,849],{"class":569},[490,5308,822],{"class":500},[490,5310,876],{"class":504},[490,5312,590],{"class":500},[490,5314,808],{"class":807},[490,5316,808],{"class":807},[490,5318,863],{"class":500},[490,5320,866],{"class":504},[490,5322,869],{"class":500},[490,5324,849],{"class":569},[490,5326,822],{"class":500},[490,5328,895],{"class":504},[490,5330,838],{"class":500},[490,5332,5333],{"class":492,"line":635},[490,5334,902],{"class":500},[490,5336,5337],{"class":492,"line":652},[490,5338,553],{"emptyLinePlaceholder":206},[490,5340,5341,5343,5345,5347,5349],{"class":492,"line":669},[490,5342,785],{"class":500},[490,5344,789],{"class":788},[490,5346,792],{"class":504},[490,5348,1168],{"class":788},[490,5350,593],{"class":500},[490,5352,5353,5355,5357,5359,5361,5363,5365,5367,5369,5371,5373,5375,5377,5379,5381,5383,5385,5387,5389,5391,5393,5395,5397,5399,5401,5403],{"class":492,"line":686},[490,5354,802],{"class":504},[490,5356,603],{"class":500},[490,5358,808],{"class":807},[490,5360,1181],{"class":807},[490,5362,1184],{"class":807},[490,5364,1187],{"class":807},[490,5366,819],{"class":569},[490,5368,822],{"class":500},[490,5370,825],{"class":807},[490,5372,808],{"class":807},[490,5374,808],{"class":807},[490,5376,832],{"class":504},[490,5378,944],{"class":807},[490,5380,869],{"class":500},[490,5382,808],{"class":807},[490,5384,1053],{"class":807},[490,5386,1056],{"class":807},[490,5388,1212],{"class":807},[490,5390,819],{"class":569},[490,5392,822],{"class":500},[490,5394,825],{"class":807},[490,5396,808],{"class":807},[490,5398,808],{"class":807},[490,5400,832],{"class":504},[490,5402,944],{"class":807},[490,5404,838],{"class":500},[490,5406,5407,5409,5411,5413,5415,5417,5419,5421,5423,5425,5427,5429,5431,5433,5435,5437,5439,5441,5443,5445,5447,5449,5451,5453],{"class":492,"line":708},[490,5408,844],{"class":843},[490,5410,603],{"class":500},[490,5412,849],{"class":569},[490,5414,822],{"class":500},[490,5416,854],{"class":504},[490,5418,590],{"class":500},[490,5420,808],{"class":807},[490,5422,808],{"class":807},[490,5424,863],{"class":500},[490,5426,866],{"class":504},[490,5428,869],{"class":500},[490,5430,849],{"class":569},[490,5432,822],{"class":500},[490,5434,876],{"class":504},[490,5436,590],{"class":500},[490,5438,808],{"class":807},[490,5440,808],{"class":807},[490,5442,863],{"class":500},[490,5444,866],{"class":504},[490,5446,869],{"class":500},[490,5448,849],{"class":569},[490,5450,822],{"class":500},[490,5452,895],{"class":504},[490,5454,838],{"class":500},[490,5456,5457],{"class":492,"line":725},[490,5458,902],{"class":500},[490,5460,5461],{"class":492,"line":742},[490,5462,553],{"emptyLinePlaceholder":206},[490,5464,5465,5467,5470,5472,5475,5477,5479,5481,5483],{"class":492,"line":753},[490,5466,785],{"class":500},[490,5468,5469],{"class":788},"_hover",[490,5471,792],{"class":504},[490,5473,5474],{"class":788},"box-shadow",[490,5476,792],{"class":504},[490,5478,1168],{"class":788},[490,5480,603],{"class":500},[490,5482,5012],{"class":559},[490,5484,593],{"class":500},[490,5486,5487,5489,5491,5493,5495,5497,5499,5501,5503,5505,5507,5509,5511,5513,5515,5517,5519,5521,5523,5525,5527,5529,5531,5533,5535,5537],{"class":492,"line":758},[490,5488,802],{"class":504},[490,5490,603],{"class":500},[490,5492,808],{"class":807},[490,5494,1181],{"class":807},[490,5496,1184],{"class":807},[490,5498,1187],{"class":807},[490,5500,819],{"class":569},[490,5502,822],{"class":500},[490,5504,825],{"class":807},[490,5506,808],{"class":807},[490,5508,808],{"class":807},[490,5510,832],{"class":504},[490,5512,944],{"class":807},[490,5514,869],{"class":500},[490,5516,808],{"class":807},[490,5518,1053],{"class":807},[490,5520,1056],{"class":807},[490,5522,1212],{"class":807},[490,5524,819],{"class":569},[490,5526,822],{"class":500},[490,5528,825],{"class":807},[490,5530,808],{"class":807},[490,5532,808],{"class":807},[490,5534,832],{"class":504},[490,5536,944],{"class":807},[490,5538,838],{"class":500},[490,5540,5541,5543,5545,5547,5549,5551,5553,5555,5557,5559,5561,5563,5565,5567,5569,5571,5573,5575,5577,5579,5581,5583,5585,5587],{"class":492,"line":1231},[490,5542,844],{"class":843},[490,5544,603],{"class":500},[490,5546,849],{"class":569},[490,5548,822],{"class":500},[490,5550,854],{"class":504},[490,5552,590],{"class":500},[490,5554,808],{"class":807},[490,5556,808],{"class":807},[490,5558,863],{"class":500},[490,5560,866],{"class":504},[490,5562,869],{"class":500},[490,5564,849],{"class":569},[490,5566,822],{"class":500},[490,5568,876],{"class":504},[490,5570,590],{"class":500},[490,5572,808],{"class":807},[490,5574,808],{"class":807},[490,5576,863],{"class":500},[490,5578,866],{"class":504},[490,5580,869],{"class":500},[490,5582,849],{"class":569},[490,5584,822],{"class":500},[490,5586,895],{"class":504},[490,5588,838],{"class":500},[490,5590,5591],{"class":492,"line":1282},[490,5592,902],{"class":500},[418,5594,5595],{},"Usage in HTML:",[480,5597,5599],{"className":1729,"code":5598,"language":1731,"meta":486,"style":486},"\u003Cdiv class=\"_box-shadow _hover:box-shadow:lg\" style=\"transition: box-shadow 0.2s\">\n    Hover me for elevation\n\u003C/div>\n",[461,5600,5601,5631,5636],{"__ignoreMap":486},[490,5602,5603,5605,5607,5609,5611,5613,5616,5618,5620,5622,5624,5627,5629],{"class":492,"line":493},[490,5604,1738],{"class":500},[490,5606,1741],{"class":599},[490,5608,1744],{"class":559},[490,5610,566],{"class":500},[490,5612,521],{"class":500},[490,5614,5615],{"class":517},"_box-shadow _hover:box-shadow:lg",[490,5617,521],{"class":500},[490,5619,4783],{"class":559},[490,5621,566],{"class":500},[490,5623,521],{"class":500},[490,5625,5626],{"class":517},"transition: box-shadow 0.2s",[490,5628,521],{"class":500},[490,5630,1767],{"class":500},[490,5632,5633],{"class":492,"line":527},[490,5634,5635],{"class":504},"    Hover me for elevation\n",[490,5637,5638,5640,5642],{"class":492,"line":550},[490,5639,1762],{"class":500},[490,5641,1741],{"class":599},[490,5643,1767],{"class":500},[4813,5645,5647],{"id":5646},"faded-overlay","Faded Overlay",[472,5649,5650,5846],{},[475,5651,5652],{"icon":477,"label":478},[480,5653,5655],{"className":482,"code":5654,"filename":484,"language":485,"meta":486,"style":486},"import { styleframe } from \"styleframe\";\nimport { useOpacityUtility } from \"@styleframe/theme\";\nimport { useBackgroundColorUtility } from \"@styleframe/theme\";\n\nconst s = styleframe();\n\nuseBackgroundColorUtility(s, {\n    black: '#000',\n});\n\nuseOpacityUtility(s, {\n    '50': '0.5',\n    '75': '0.75',\n});\n\nexport default s;\n",[461,5656,5657,5677,5697,5718,5722,5736,5740,5751,5766,5774,5778,5788,5806,5824,5832,5836],{"__ignoreMap":486},[490,5658,5659,5661,5663,5665,5667,5669,5671,5673,5675],{"class":492,"line":493},[490,5660,497],{"class":496},[490,5662,501],{"class":500},[490,5664,505],{"class":504},[490,5666,508],{"class":500},[490,5668,511],{"class":496},[490,5670,514],{"class":500},[490,5672,518],{"class":517},[490,5674,521],{"class":500},[490,5676,524],{"class":500},[490,5678,5679,5681,5683,5685,5687,5689,5691,5693,5695],{"class":492,"line":527},[490,5680,497],{"class":496},[490,5682,501],{"class":500},[490,5684,2300],{"class":504},[490,5686,508],{"class":500},[490,5688,511],{"class":496},[490,5690,514],{"class":500},[490,5692,543],{"class":517},[490,5694,521],{"class":500},[490,5696,524],{"class":500},[490,5698,5699,5701,5703,5706,5708,5710,5712,5714,5716],{"class":492,"line":550},[490,5700,497],{"class":496},[490,5702,501],{"class":500},[490,5704,5705],{"class":504}," useBackgroundColorUtility",[490,5707,508],{"class":500},[490,5709,511],{"class":496},[490,5711,514],{"class":500},[490,5713,543],{"class":517},[490,5715,521],{"class":500},[490,5717,524],{"class":500},[490,5719,5720],{"class":492,"line":556},[490,5721,553],{"emptyLinePlaceholder":206},[490,5723,5724,5726,5728,5730,5732,5734],{"class":492,"line":577},[490,5725,560],{"class":559},[490,5727,563],{"class":504},[490,5729,566],{"class":500},[490,5731,505],{"class":569},[490,5733,572],{"class":504},[490,5735,524],{"class":500},[490,5737,5738],{"class":492,"line":582},[490,5739,553],{"emptyLinePlaceholder":206},[490,5741,5742,5745,5747,5749],{"class":492,"line":596},[490,5743,5744],{"class":569},"useBackgroundColorUtility",[490,5746,587],{"class":504},[490,5748,590],{"class":500},[490,5750,593],{"class":500},[490,5752,5753,5755,5757,5759,5762,5764],{"class":492,"line":618},[490,5754,2063],{"class":599},[490,5756,603],{"class":500},[490,5758,606],{"class":500},[490,5760,5761],{"class":517},"#000",[490,5763,612],{"class":500},[490,5765,615],{"class":500},[490,5767,5768,5770,5772],{"class":492,"line":635},[490,5769,745],{"class":500},[490,5771,748],{"class":504},[490,5773,524],{"class":500},[490,5775,5776],{"class":492,"line":652},[490,5777,553],{"emptyLinePlaceholder":206},[490,5779,5780,5782,5784,5786],{"class":492,"line":669},[490,5781,2256],{"class":569},[490,5783,587],{"class":504},[490,5785,590],{"class":500},[490,5787,593],{"class":500},[490,5789,5790,5792,5794,5796,5798,5800,5802,5804],{"class":492,"line":686},[490,5791,689],{"class":500},[490,5793,2486],{"class":599},[490,5795,612],{"class":500},[490,5797,603],{"class":500},[490,5799,606],{"class":500},[490,5801,2495],{"class":517},[490,5803,612],{"class":500},[490,5805,615],{"class":500},[490,5807,5808,5810,5812,5814,5816,5818,5820,5822],{"class":492,"line":708},[490,5809,689],{"class":500},[490,5811,2546],{"class":599},[490,5813,612],{"class":500},[490,5815,603],{"class":500},[490,5817,606],{"class":500},[490,5819,2555],{"class":517},[490,5821,612],{"class":500},[490,5823,615],{"class":500},[490,5825,5826,5828,5830],{"class":492,"line":725},[490,5827,745],{"class":500},[490,5829,748],{"class":504},[490,5831,524],{"class":500},[490,5833,5834],{"class":492,"line":742},[490,5835,553],{"emptyLinePlaceholder":206},[490,5837,5838,5840,5842,5844],{"class":492,"line":753},[490,5839,761],{"class":496},[490,5841,764],{"class":496},[490,5843,767],{"class":504},[490,5845,524],{"class":500},[475,5847,5848],{"icon":140,"label":772},[480,5849,5851],{"className":775,"code":5850,"filename":777,"language":778,"meta":486,"style":486},"._bg\\:black { background-color: #000; }\n\n._opacity\\:50 { opacity: 0.5; }\n._opacity\\:75 { opacity: 0.75; }\n",[461,5852,5853,5880,5884,5906],{"__ignoreMap":486},[490,5854,5855,5857,5860,5862,5864,5866,5869,5871,5873,5876,5878],{"class":492,"line":493},[490,5856,785],{"class":500},[490,5858,5859],{"class":788},"_bg",[490,5861,792],{"class":504},[490,5863,2191],{"class":788},[490,5865,501],{"class":500},[490,5867,5868],{"class":843}," background-color",[490,5870,603],{"class":500},[490,5872,863],{"class":500},[490,5874,5875],{"class":504},"000",[490,5877,2690],{"class":500},[490,5879,2180],{"class":500},[490,5881,5882],{"class":492,"line":527},[490,5883,553],{"emptyLinePlaceholder":206},[490,5885,5886,5888,5890,5892,5894,5896,5898,5900,5902,5904],{"class":492,"line":550},[490,5887,785],{"class":500},[490,5889,2674],{"class":788},[490,5891,792],{"class":504},[490,5893,2486],{"class":788},[490,5895,501],{"class":500},[490,5897,2683],{"class":843},[490,5899,603],{"class":500},[490,5901,2849],{"class":807},[490,5903,2690],{"class":500},[490,5905,2180],{"class":500},[490,5907,5908,5910,5912,5914,5916,5918,5920,5922,5924,5926],{"class":492,"line":556},[490,5909,785],{"class":500},[490,5911,2674],{"class":788},[490,5913,792],{"class":504},[490,5915,2546],{"class":788},[490,5917,501],{"class":500},[490,5919,2683],{"class":843},[490,5921,603],{"class":500},[490,5923,2918],{"class":807},[490,5925,2690],{"class":500},[490,5927,2180],{"class":500},[418,5929,5595],{},[480,5931,5933],{"className":1729,"code":5932,"language":1731,"meta":486,"style":486},"\u003Cdiv class=\"image-container\" style=\"position: relative;\">\n    \u003Cimg src=\"hero.jpg\" alt=\"Hero\">\n    \u003Cdiv class=\"_bg:black _opacity:50\" style=\"position: absolute; inset: 0;\">\n        \u003C!-- Semi-transparent overlay -->\n    \u003C/div>\n\u003C/div>\n",[461,5934,5935,5965,5996,6026,6031,6040],{"__ignoreMap":486},[490,5936,5937,5939,5941,5943,5945,5947,5950,5952,5954,5956,5958,5961,5963],{"class":492,"line":493},[490,5938,1738],{"class":500},[490,5940,1741],{"class":599},[490,5942,1744],{"class":559},[490,5944,566],{"class":500},[490,5946,521],{"class":500},[490,5948,5949],{"class":517},"image-container",[490,5951,521],{"class":500},[490,5953,4783],{"class":559},[490,5955,566],{"class":500},[490,5957,521],{"class":500},[490,5959,5960],{"class":517},"position: relative;",[490,5962,521],{"class":500},[490,5964,1767],{"class":500},[490,5966,5967,5970,5972,5974,5976,5978,5981,5983,5985,5987,5989,5992,5994],{"class":492,"line":527},[490,5968,5969],{"class":500},"    \u003C",[490,5971,4378],{"class":599},[490,5973,4392],{"class":559},[490,5975,566],{"class":500},[490,5977,521],{"class":500},[490,5979,5980],{"class":517},"hero.jpg",[490,5982,521],{"class":500},[490,5984,4404],{"class":559},[490,5986,566],{"class":500},[490,5988,521],{"class":500},[490,5990,5991],{"class":517},"Hero",[490,5993,521],{"class":500},[490,5995,1767],{"class":500},[490,5997,5998,6000,6002,6004,6006,6008,6011,6013,6015,6017,6019,6022,6024],{"class":492,"line":550},[490,5999,5969],{"class":500},[490,6001,1741],{"class":599},[490,6003,1744],{"class":559},[490,6005,566],{"class":500},[490,6007,521],{"class":500},[490,6009,6010],{"class":517},"_bg:black _opacity:50",[490,6012,521],{"class":500},[490,6014,4783],{"class":559},[490,6016,566],{"class":500},[490,6018,521],{"class":500},[490,6020,6021],{"class":517},"position: absolute; inset: 0;",[490,6023,521],{"class":500},[490,6025,1767],{"class":500},[490,6027,6028],{"class":492,"line":556},[490,6029,6030],{"class":4992},"        \u003C!-- Semi-transparent overlay -->\n",[490,6032,6033,6036,6038],{"class":492,"line":577},[490,6034,6035],{"class":500},"    \u003C/",[490,6037,1741],{"class":599},[490,6039,1767],{"class":500},[490,6041,6042,6044,6046],{"class":492,"line":582},[490,6043,1762],{"class":500},[490,6045,1741],{"class":599},[490,6047,1767],{"class":500},[414,6049,6051],{"id":6050},"best-practices","Best Practices",[429,6053,6054,6060,6066,6072,6078,6084],{},[432,6055,6056,6059],{},[435,6057,6058],{},"Use consistent shadow scales",": Define a shadow scale (sm, default, md, lg, xl) for consistent elevation",[432,6061,6062,6065],{},[435,6063,6064],{},"Consider dark mode",": Shadows may need adjustment for dark themes where they can look harsh",[432,6067,6068,6071],{},[435,6069,6070],{},"Animate with care",": Box shadows can be expensive to animate; consider using transform for hover effects when possible",[432,6073,6074,6077],{},[435,6075,6076],{},"Use opacity for overlays",": Opacity utilities work well for modal overlays and image tints",[432,6079,6080,6083],{},[435,6081,6082],{},"Test blend modes",": Blend mode effects vary significantly based on the colors involved",[432,6085,6086,6089],{},[435,6087,6088],{},"Combine with transitions",": Add CSS transitions for smooth shadow and opacity changes",[414,6091,6093],{"id":6092},"faq","FAQ",[6095,6096,6097,6105,6116,6127],"accordion",{},[6098,6099,466,6102,6104],"accordion-item",{"icon":6100,"label":6101},"i-lucide-circle-help","Why do shadows use CSS custom properties?",[461,6103,895],{}," custom property allows shadows to be combined with ring utilities. Both use box-shadow, so the custom property approach lets them coexist without overwriting each other.",[6098,6106,6108,6111,6112,6115],{"icon":6100,"label":6107},"What's the difference between mix-blend-mode and background-blend-mode?",[461,6109,6110],{},"mix-blend-mode"," controls how an element blends with elements behind it. ",[461,6113,6114],{},"background-blend-mode"," controls how an element's background layers (image, color, gradient) blend with each other.",[6098,6117,6119,6120,6122,6123,6126],{"icon":6100,"label":6118},"Can I create colored shadows?","Yes, use ",[461,6121,1867],{}," to set shadow colors. This works best when combined with shadow utilities that use the ",[461,6124,6125],{},"--tw-shadow-color"," custom property.",[6098,6128,6130],{"icon":6100,"label":6129},"How do I animate opacity smoothly?","Add a CSS transition for opacity. Opacity is well-optimized for animations and won't cause layout shifts. Consider using modifiers with different opacity values for hover/focus states.",[6132,6133,6134],"style",{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}",{"title":486,"searchDepth":527,"depth":527,"links":6136},[6137,6138,6139,6140,6141,6142,6143,6144,6145,6149,6150],{"id":416,"depth":527,"text":64},{"id":423,"depth":527,"text":424},{"id":459,"depth":527,"text":463},{"id":1864,"depth":527,"text":1867},{"id":2253,"depth":527,"text":2256},{"id":3109,"depth":527,"text":3112},{"id":3550,"depth":527,"text":3553},{"id":4418,"depth":527,"text":4421},{"id":4810,"depth":527,"text":4811,"children":6146},[6147,6148],{"id":4815,"depth":550,"text":4816},{"id":5646,"depth":550,"text":5647},{"id":6050,"depth":527,"text":6051},{"id":6092,"depth":527,"text":6093},"Create effect utilities for shadows, opacity, and blend modes with full type safety.",null,{},{"title":317,"icon":7},{"title":409,"description":6151},{"loc":318},"1ef3pxnKhoCCxFBuxYCBJBVGjlLu8-TCMoHlWAYzjLk",[6159,6161],{"title":169,"path":314,"stem":315,"description":6160,"icon":7,"children":-1},"Create border utilities for colors, widths, radiuses, styles, outlines, and focus rings with full type safety.",{"title":321,"path":322,"stem":323,"description":6162,"icon":7,"children":-1},"Create filter utilities for blur, brightness, contrast, grayscale, and backdrop effects with full type safety.",1776621147369]