[{"data":1,"prerenderedAt":3827},["ShallowReactive",2],{"navigation_en":3,"-docs-theme-modifiers-composables-media-preferences":407,"-docs-theme-modifiers-composables-media-preferences-surround":3822},{"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":3814,"extension":3815,"links":3816,"meta":3817,"navigation":3818,"path":389,"seo":3819,"sitemap":3820,"stem":390,"__hash__":3821},"docs_theme/docs/theme/modifiers/02.composables/03.media-preferences.md","Media & Preferences Modifiers",{"type":411,"value":412,"toc":3792},"minimark",[413,417,434,438,441,482,488,503,1209,1216,1354,1359,1391,1397,1403,1712,1715,1740,1746,1752,2102,2105,2129,2135,2141,2144,2168,2174,2180,2183,2207,2213,2219,2222,2246,2252,2258,2261,2285,2291,2297,2666,2669,2693,2699,2705,2708,2732,2738,2744,2749,2895,2899,2903,3274,3278,3679,3683,3739,3743,3788],[414,415,64],"h2",{"id":416},"overview",[418,419,420,421,425,426,429,430,433],"p",{},"Media and preference modifiers let you apply utility styles conditionally based on user preferences and media conditions. They wrap utility declarations in CSS ",[422,423,424],"code",{},"@media"," queries like ",[422,427,428],{},"prefers-color-scheme: dark"," and ",[422,431,432],{},"prefers-reduced-motion",", generating variant utility classes that adapt to the user's environment.",[414,435,437],{"id":436},"why-use-media-preference-modifiers","Why Use Media & Preference Modifiers?",[418,439,440],{},"Media and preference modifiers help you:",[442,443,444,452,458,464,470,476],"ul",{},[445,446,447,451],"li",{},[448,449,450],"strong",{},"Support dark mode",": Automatically switch colors and styles based on the user's color scheme preference",[445,453,454,457],{},[448,455,456],{},"Respect motion preferences",": Disable or reduce animations for users who prefer reduced motion",[445,459,460,463],{},[448,461,462],{},"Handle contrast preferences",": Increase or decrease contrast for users who need it",[445,465,466,469],{},[448,467,468],{},"Target orientation",": Adapt layouts for portrait and landscape orientations",[445,471,472,475],{},[448,473,474],{},"Support print styles",": Apply print-specific styling without separate stylesheets",[445,477,478,481],{},[448,479,480],{},"Handle forced colors",": Adapt to Windows High Contrast Mode and similar settings",[414,483,485],{"id":484},"usedarkmodifier",[422,486,487],{},"useDarkModifier",[418,489,490,491,494,495,498,499,502],{},"The ",[422,492,493],{},"useDarkModifier()"," function creates a modifier that applies styles when the user's system prefers a dark color scheme. It generates both a ",[422,496,497],{},"@media (prefers-color-scheme: dark)"," query and a ",[422,500,501],{},":is(.dark-theme, [data-theme=\"dark\"])"," class-based selector, and forwards variables and children through both paths.",[504,505,506,814,1148],"tabs",{},[507,508,511],"tabs-item",{"icon":509,"label":510},"i-lucide-code","Code",[512,513,519],"pre",{"className":514,"code":515,"filename":516,"language":517,"meta":518,"style":518},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { styleframe } from \"styleframe\";\nimport { useBackgroundColorUtility, useTextColorUtility } from \"@styleframe/theme\";\nimport { useDarkModifier } from \"@styleframe/theme\";\n\nconst s = styleframe();\n\nconst dark = useDarkModifier(s);\n\nuseBackgroundColorUtility(s, {\n    surface: '#ffffff',\n    'surface-dark': '#1a1a2e',\n}, [dark]);\n\nuseTextColorUtility(s, {\n    body: '#212529',\n    'body-light': '#e2e8f0',\n}, [dark]);\n\nexport default s;\n","styleframe.config.ts","ts","",[422,520,521,557,586,608,614,635,640,657,662,676,698,720,731,736,748,765,786,795,800],{"__ignoreMap":518},[522,523,526,530,534,538,541,544,547,551,554],"span",{"class":524,"line":525},"line",1,[522,527,529],{"class":528},"s7zQu","import",[522,531,533],{"class":532},"sMK4o"," {",[522,535,537],{"class":536},"sTEyZ"," styleframe",[522,539,540],{"class":532}," }",[522,542,543],{"class":528}," from",[522,545,546],{"class":532}," \"",[522,548,550],{"class":549},"sfazB","styleframe",[522,552,553],{"class":532},"\"",[522,555,556],{"class":532},";\n",[522,558,560,562,564,567,570,573,575,577,579,582,584],{"class":524,"line":559},2,[522,561,529],{"class":528},[522,563,533],{"class":532},[522,565,566],{"class":536}," useBackgroundColorUtility",[522,568,569],{"class":532},",",[522,571,572],{"class":536}," useTextColorUtility",[522,574,540],{"class":532},[522,576,543],{"class":528},[522,578,546],{"class":532},[522,580,581],{"class":549},"@styleframe/theme",[522,583,553],{"class":532},[522,585,556],{"class":532},[522,587,589,591,593,596,598,600,602,604,606],{"class":524,"line":588},3,[522,590,529],{"class":528},[522,592,533],{"class":532},[522,594,595],{"class":536}," useDarkModifier",[522,597,540],{"class":532},[522,599,543],{"class":528},[522,601,546],{"class":532},[522,603,581],{"class":549},[522,605,553],{"class":532},[522,607,556],{"class":532},[522,609,611],{"class":524,"line":610},4,[522,612,613],{"emptyLinePlaceholder":206},"\n",[522,615,617,621,624,627,630,633],{"class":524,"line":616},5,[522,618,620],{"class":619},"spNyl","const",[522,622,623],{"class":536}," s ",[522,625,626],{"class":532},"=",[522,628,537],{"class":629},"s2Zo4",[522,631,632],{"class":536},"()",[522,634,556],{"class":532},[522,636,638],{"class":524,"line":637},6,[522,639,613],{"emptyLinePlaceholder":206},[522,641,643,645,648,650,652,655],{"class":524,"line":642},7,[522,644,620],{"class":619},[522,646,647],{"class":536}," dark ",[522,649,626],{"class":532},[522,651,595],{"class":629},[522,653,654],{"class":536},"(s)",[522,656,556],{"class":532},[522,658,660],{"class":524,"line":659},8,[522,661,613],{"emptyLinePlaceholder":206},[522,663,665,668,671,673],{"class":524,"line":664},9,[522,666,667],{"class":629},"useBackgroundColorUtility",[522,669,670],{"class":536},"(s",[522,672,569],{"class":532},[522,674,675],{"class":532}," {\n",[522,677,679,683,686,689,692,695],{"class":524,"line":678},10,[522,680,682],{"class":681},"swJcz","    surface",[522,684,685],{"class":532},":",[522,687,688],{"class":532}," '",[522,690,691],{"class":549},"#ffffff",[522,693,694],{"class":532},"'",[522,696,697],{"class":532},",\n",[522,699,701,704,707,709,711,713,716,718],{"class":524,"line":700},11,[522,702,703],{"class":532},"    '",[522,705,706],{"class":681},"surface-dark",[522,708,694],{"class":532},[522,710,685],{"class":532},[522,712,688],{"class":532},[522,714,715],{"class":549},"#1a1a2e",[522,717,694],{"class":532},[522,719,697],{"class":532},[522,721,723,726,729],{"class":524,"line":722},12,[522,724,725],{"class":532},"},",[522,727,728],{"class":536}," [dark])",[522,730,556],{"class":532},[522,732,734],{"class":524,"line":733},13,[522,735,613],{"emptyLinePlaceholder":206},[522,737,739,742,744,746],{"class":524,"line":738},14,[522,740,741],{"class":629},"useTextColorUtility",[522,743,670],{"class":536},[522,745,569],{"class":532},[522,747,675],{"class":532},[522,749,751,754,756,758,761,763],{"class":524,"line":750},15,[522,752,753],{"class":681},"    body",[522,755,685],{"class":532},[522,757,688],{"class":532},[522,759,760],{"class":549},"#212529",[522,762,694],{"class":532},[522,764,697],{"class":532},[522,766,768,770,773,775,777,779,782,784],{"class":524,"line":767},16,[522,769,703],{"class":532},[522,771,772],{"class":681},"body-light",[522,774,694],{"class":532},[522,776,685],{"class":532},[522,778,688],{"class":532},[522,780,781],{"class":549},"#e2e8f0",[522,783,694],{"class":532},[522,785,697],{"class":532},[522,787,789,791,793],{"class":524,"line":788},17,[522,790,725],{"class":532},[522,792,728],{"class":536},[522,794,556],{"class":532},[522,796,798],{"class":524,"line":797},18,[522,799,613],{"emptyLinePlaceholder":206},[522,801,803,806,809,812],{"class":524,"line":802},19,[522,804,805],{"class":528},"export",[522,807,808],{"class":528}," default",[522,810,811],{"class":536}," s",[522,813,556],{"class":532},[507,815,817],{"icon":140,"label":816},"Output",[512,818,823],{"className":819,"code":820,"filename":821,"language":822,"meta":518,"style":518},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","._background-color\\:surface { background-color: #ffffff; }\n._background-color\\:surface-dark { background-color: #1a1a2e; }\n._text-color\\:body { color: #212529; }\n._text-color\\:body-light { color: #e2e8f0; }\n\n._dark\\:background-color\\:surface-dark {\n    @media (prefers-color-scheme: dark) {\n        background-color: #1a1a2e;\n    }\n    :is(.dark-theme, [data-theme=\"dark\"]) & {\n        background-color: #1a1a2e;\n    }\n}\n\n._dark\\:text-color\\:body-light {\n    @media (prefers-color-scheme: dark) {\n        color: #e2e8f0;\n    }\n    :is(.dark-theme, [data-theme=\"dark\"]) & {\n        color: #e2e8f0;\n    }\n}\n","styleframe/index.css","css",[422,824,825,860,885,913,938,942,960,970,983,988,1028,1040,1044,1049,1053,1070,1078,1091,1095,1125,1138,1143],{"__ignoreMap":518},[522,826,827,830,834,837,840,842,846,848,851,854,857],{"class":524,"line":525},[522,828,829],{"class":532},".",[522,831,833],{"class":832},"sBMFI","_background-color",[522,835,836],{"class":536},"\\:",[522,838,839],{"class":832},"surface",[522,841,533],{"class":532},[522,843,845],{"class":844},"sqsOY"," background-color",[522,847,685],{"class":532},[522,849,850],{"class":532}," #",[522,852,853],{"class":536},"ffffff",[522,855,856],{"class":532},";",[522,858,859],{"class":532}," }\n",[522,861,862,864,866,868,870,872,874,876,878,881,883],{"class":524,"line":559},[522,863,829],{"class":532},[522,865,833],{"class":832},[522,867,836],{"class":536},[522,869,706],{"class":832},[522,871,533],{"class":532},[522,873,845],{"class":844},[522,875,685],{"class":532},[522,877,850],{"class":532},[522,879,880],{"class":536},"1a1a2e",[522,882,856],{"class":532},[522,884,859],{"class":532},[522,886,887,889,892,894,897,899,902,904,906,909,911],{"class":524,"line":588},[522,888,829],{"class":532},[522,890,891],{"class":832},"_text-color",[522,893,836],{"class":536},[522,895,896],{"class":832},"body",[522,898,533],{"class":532},[522,900,901],{"class":844}," color",[522,903,685],{"class":532},[522,905,850],{"class":532},[522,907,908],{"class":536},"212529",[522,910,856],{"class":532},[522,912,859],{"class":532},[522,914,915,917,919,921,923,925,927,929,931,934,936],{"class":524,"line":610},[522,916,829],{"class":532},[522,918,891],{"class":832},[522,920,836],{"class":536},[522,922,772],{"class":832},[522,924,533],{"class":532},[522,926,901],{"class":844},[522,928,685],{"class":532},[522,930,850],{"class":532},[522,932,933],{"class":536},"e2e8f0",[522,935,856],{"class":532},[522,937,859],{"class":532},[522,939,940],{"class":524,"line":616},[522,941,613],{"emptyLinePlaceholder":206},[522,943,944,946,949,951,954,956,958],{"class":524,"line":637},[522,945,829],{"class":532},[522,947,948],{"class":832},"_dark",[522,950,836],{"class":536},[522,952,953],{"class":832},"background-color",[522,955,836],{"class":536},[522,957,706],{"class":832},[522,959,675],{"class":532},[522,961,962,965,967],{"class":524,"line":642},[522,963,964],{"class":536},"    @media (prefers-color-scheme",[522,966,685],{"class":532},[522,968,969],{"class":536}," dark) {\n",[522,971,972,975,977,979,981],{"class":524,"line":659},[522,973,974],{"class":844},"        background-color",[522,976,685],{"class":532},[522,978,850],{"class":532},[522,980,880],{"class":536},[522,982,556],{"class":532},[522,984,985],{"class":524,"line":664},[522,986,987],{"class":532},"    }\n",[522,989,990,993,996,999,1002,1004,1007,1010,1012,1014,1017,1019,1022,1025],{"class":524,"line":678},[522,991,992],{"class":532},"    :",[522,994,995],{"class":619},"is",[522,997,998],{"class":532},"(.",[522,1000,1001],{"class":832},"dark-theme",[522,1003,569],{"class":532},[522,1005,1006],{"class":532}," [",[522,1008,1009],{"class":619},"data-theme",[522,1011,626],{"class":532},[522,1013,553],{"class":532},[522,1015,1016],{"class":549},"dark",[522,1018,553],{"class":532},[522,1020,1021],{"class":532},"])",[522,1023,1024],{"class":536}," & ",[522,1026,1027],{"class":532},"{\n",[522,1029,1030,1032,1034,1036,1038],{"class":524,"line":700},[522,1031,974],{"class":844},[522,1033,685],{"class":532},[522,1035,850],{"class":532},[522,1037,880],{"class":536},[522,1039,556],{"class":532},[522,1041,1042],{"class":524,"line":722},[522,1043,987],{"class":532},[522,1045,1046],{"class":524,"line":733},[522,1047,1048],{"class":536},"}\n",[522,1050,1051],{"class":524,"line":738},[522,1052,613],{"emptyLinePlaceholder":206},[522,1054,1055,1057,1059,1061,1064,1066,1068],{"class":524,"line":750},[522,1056,829],{"class":532},[522,1058,948],{"class":832},[522,1060,836],{"class":536},[522,1062,1063],{"class":832},"text-color",[522,1065,836],{"class":536},[522,1067,772],{"class":832},[522,1069,675],{"class":532},[522,1071,1072,1074,1076],{"class":524,"line":767},[522,1073,964],{"class":536},[522,1075,685],{"class":532},[522,1077,969],{"class":536},[522,1079,1080,1083,1085,1087,1089],{"class":524,"line":788},[522,1081,1082],{"class":844},"        color",[522,1084,685],{"class":532},[522,1086,850],{"class":532},[522,1088,933],{"class":536},[522,1090,556],{"class":532},[522,1092,1093],{"class":524,"line":797},[522,1094,987],{"class":532},[522,1096,1097,1099,1101,1103,1105,1107,1109,1111,1113,1115,1117,1119,1121,1123],{"class":524,"line":802},[522,1098,992],{"class":532},[522,1100,995],{"class":619},[522,1102,998],{"class":532},[522,1104,1001],{"class":832},[522,1106,569],{"class":532},[522,1108,1006],{"class":532},[522,1110,1009],{"class":619},[522,1112,626],{"class":532},[522,1114,553],{"class":532},[522,1116,1016],{"class":549},[522,1118,553],{"class":532},[522,1120,1021],{"class":532},[522,1122,1024],{"class":536},[522,1124,1027],{"class":532},[522,1126,1128,1130,1132,1134,1136],{"class":524,"line":1127},20,[522,1129,1082],{"class":844},[522,1131,685],{"class":532},[522,1133,850],{"class":532},[522,1135,933],{"class":536},[522,1137,556],{"class":532},[522,1139,1141],{"class":524,"line":1140},21,[522,1142,987],{"class":532},[522,1144,1146],{"class":524,"line":1145},22,[522,1147,1048],{"class":536},[507,1149,1152],{"icon":1150,"label":1151},"i-lucide-layout","Usage",[512,1153,1157],{"className":1154,"code":1155,"language":1156,"meta":518,"style":518},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cbody class=\"_background-color:surface _dark:background-color:surface-dark _text-color:body _dark:text-color:body-light\">\n    \u003Cp>This text adapts to dark mode automatically.\u003C/p>\n\u003C/body>\n","html",[422,1158,1159,1181,1201],{"__ignoreMap":518},[522,1160,1161,1164,1166,1169,1171,1173,1176,1178],{"class":524,"line":525},[522,1162,1163],{"class":532},"\u003C",[522,1165,896],{"class":681},[522,1167,1168],{"class":619}," class",[522,1170,626],{"class":532},[522,1172,553],{"class":532},[522,1174,1175],{"class":549},"_background-color:surface _dark:background-color:surface-dark _text-color:body _dark:text-color:body-light",[522,1177,553],{"class":532},[522,1179,1180],{"class":532},">\n",[522,1182,1183,1186,1188,1191,1194,1197,1199],{"class":524,"line":559},[522,1184,1185],{"class":532},"    \u003C",[522,1187,418],{"class":681},[522,1189,1190],{"class":532},">",[522,1192,1193],{"class":536},"This text adapts to dark mode automatically.",[522,1195,1196],{"class":532},"\u003C/",[522,1198,418],{"class":681},[522,1200,1180],{"class":532},[522,1202,1203,1205,1207],{"class":524,"line":588},[522,1204,1196],{"class":532},[522,1206,896],{"class":681},[522,1208,1180],{"class":532},[418,1210,1211,1212,1215],{},"The dark modifier composes with other modifiers. When combined (e.g., ",[422,1213,1214],{},"[dark, hover]","), modifiers nest inside-out — dark wraps hover:",[504,1217,1218],{},[507,1219,1221],{"icon":140,"label":1220},"Output for [dark, hover]",[512,1222,1224],{"className":819,"code":1223,"filename":821,"language":822,"meta":518,"style":518},"._dark\\:hover\\:background-color\\:primary {\n    @media (prefers-color-scheme: dark) {\n        &:hover {\n            background-color: var(--color--primary);\n        }\n    }\n    :is(.dark-theme, [data-theme=\"dark\"]) & {\n        &:hover {\n            background-color: var(--color--primary);\n        }\n    }\n}\n",[422,1225,1226,1248,1256,1266,1283,1288,1292,1322,1330,1342,1346,1350],{"__ignoreMap":518},[522,1227,1228,1230,1232,1234,1237,1239,1241,1243,1246],{"class":524,"line":525},[522,1229,829],{"class":532},[522,1231,948],{"class":832},[522,1233,836],{"class":536},[522,1235,1236],{"class":832},"hover",[522,1238,836],{"class":536},[522,1240,953],{"class":832},[522,1242,836],{"class":536},[522,1244,1245],{"class":832},"primary",[522,1247,675],{"class":532},[522,1249,1250,1252,1254],{"class":524,"line":559},[522,1251,964],{"class":536},[522,1253,685],{"class":532},[522,1255,969],{"class":536},[522,1257,1258,1261,1263],{"class":524,"line":588},[522,1259,1260],{"class":536},"        &",[522,1262,685],{"class":532},[522,1264,1265],{"class":536},"hover {\n",[522,1267,1268,1271,1274,1277,1280],{"class":524,"line":610},[522,1269,1270],{"class":536},"            background-color: ",[522,1272,1273],{"class":629},"var",[522,1275,1276],{"class":532},"(",[522,1278,1279],{"class":536},"--color--primary",[522,1281,1282],{"class":532},");\n",[522,1284,1285],{"class":524,"line":616},[522,1286,1287],{"class":532},"        }\n",[522,1289,1290],{"class":524,"line":637},[522,1291,987],{"class":536},[522,1293,1294,1296,1298,1300,1302,1304,1306,1308,1310,1312,1314,1316,1318,1320],{"class":524,"line":642},[522,1295,992],{"class":532},[522,1297,995],{"class":619},[522,1299,998],{"class":532},[522,1301,1001],{"class":832},[522,1303,569],{"class":532},[522,1305,1006],{"class":532},[522,1307,1009],{"class":619},[522,1309,626],{"class":532},[522,1311,553],{"class":532},[522,1313,1016],{"class":549},[522,1315,553],{"class":532},[522,1317,1021],{"class":532},[522,1319,1024],{"class":536},[522,1321,1027],{"class":532},[522,1323,1324,1326,1328],{"class":524,"line":659},[522,1325,1260],{"class":536},[522,1327,685],{"class":532},[522,1329,1265],{"class":536},[522,1331,1332,1334,1336,1338,1340],{"class":524,"line":664},[522,1333,1270],{"class":536},[522,1335,1273],{"class":629},[522,1337,1276],{"class":532},[522,1339,1279],{"class":536},[522,1341,1282],{"class":532},[522,1343,1344],{"class":524,"line":678},[522,1345,1287],{"class":532},[522,1347,1348],{"class":524,"line":700},[522,1349,987],{"class":536},[522,1351,1352],{"class":524,"line":722},[522,1353,1048],{"class":536},[1355,1356,1358],"h4",{"id":1357},"css-selector","CSS Selector",[1360,1361,1362,1374],"table",{},[1363,1364,1365],"thead",{},[1366,1367,1368,1372],"tr",{},[1369,1370,1371],"th",{},"Modifier Name",[1369,1373,77],{},[1375,1376,1377],"tbody",{},[1366,1378,1379,1384],{},[1380,1381,1382],"td",{},[422,1383,1016],{},[1380,1385,1386,429,1388],{},[422,1387,497],{},[422,1389,1390],{},":is(.dark-theme, [data-theme=\"dark\"]) &",[414,1392,1394],{"id":1393},"usemotionsafemodifier",[422,1395,1396],{},"useMotionSafeModifier",[418,1398,490,1399,1402],{},[422,1400,1401],{},"useMotionSafeModifier()"," function creates a modifier that applies styles only when the user has not requested reduced motion.",[504,1404,1405,1582,1666],{},[507,1406,1407],{"icon":509,"label":510},[512,1408,1410],{"className":514,"code":1409,"filename":516,"language":517,"meta":518,"style":518},"import { styleframe } from \"styleframe\";\nimport { useTransitionDurationUtility } from \"@styleframe/theme\";\nimport { useMotionSafeModifier } from \"@styleframe/theme\";\n\nconst s = styleframe();\n\nconst motionSafe = useMotionSafeModifier(s);\n\nuseTransitionDurationUtility(s, {\n    300: '300ms',\n    500: '500ms',\n}, [motionSafe]);\n\nexport default s;\n",[422,1411,1412,1432,1453,1474,1478,1492,1496,1511,1515,1526,1543,1559,1568,1572],{"__ignoreMap":518},[522,1413,1414,1416,1418,1420,1422,1424,1426,1428,1430],{"class":524,"line":525},[522,1415,529],{"class":528},[522,1417,533],{"class":532},[522,1419,537],{"class":536},[522,1421,540],{"class":532},[522,1423,543],{"class":528},[522,1425,546],{"class":532},[522,1427,550],{"class":549},[522,1429,553],{"class":532},[522,1431,556],{"class":532},[522,1433,1434,1436,1438,1441,1443,1445,1447,1449,1451],{"class":524,"line":559},[522,1435,529],{"class":528},[522,1437,533],{"class":532},[522,1439,1440],{"class":536}," useTransitionDurationUtility",[522,1442,540],{"class":532},[522,1444,543],{"class":528},[522,1446,546],{"class":532},[522,1448,581],{"class":549},[522,1450,553],{"class":532},[522,1452,556],{"class":532},[522,1454,1455,1457,1459,1462,1464,1466,1468,1470,1472],{"class":524,"line":588},[522,1456,529],{"class":528},[522,1458,533],{"class":532},[522,1460,1461],{"class":536}," useMotionSafeModifier",[522,1463,540],{"class":532},[522,1465,543],{"class":528},[522,1467,546],{"class":532},[522,1469,581],{"class":549},[522,1471,553],{"class":532},[522,1473,556],{"class":532},[522,1475,1476],{"class":524,"line":610},[522,1477,613],{"emptyLinePlaceholder":206},[522,1479,1480,1482,1484,1486,1488,1490],{"class":524,"line":616},[522,1481,620],{"class":619},[522,1483,623],{"class":536},[522,1485,626],{"class":532},[522,1487,537],{"class":629},[522,1489,632],{"class":536},[522,1491,556],{"class":532},[522,1493,1494],{"class":524,"line":637},[522,1495,613],{"emptyLinePlaceholder":206},[522,1497,1498,1500,1503,1505,1507,1509],{"class":524,"line":642},[522,1499,620],{"class":619},[522,1501,1502],{"class":536}," motionSafe ",[522,1504,626],{"class":532},[522,1506,1461],{"class":629},[522,1508,654],{"class":536},[522,1510,556],{"class":532},[522,1512,1513],{"class":524,"line":659},[522,1514,613],{"emptyLinePlaceholder":206},[522,1516,1517,1520,1522,1524],{"class":524,"line":664},[522,1518,1519],{"class":629},"useTransitionDurationUtility",[522,1521,670],{"class":536},[522,1523,569],{"class":532},[522,1525,675],{"class":532},[522,1527,1528,1532,1534,1536,1539,1541],{"class":524,"line":678},[522,1529,1531],{"class":1530},"sbssI","    300",[522,1533,685],{"class":532},[522,1535,688],{"class":532},[522,1537,1538],{"class":549},"300ms",[522,1540,694],{"class":532},[522,1542,697],{"class":532},[522,1544,1545,1548,1550,1552,1555,1557],{"class":524,"line":700},[522,1546,1547],{"class":1530},"    500",[522,1549,685],{"class":532},[522,1551,688],{"class":532},[522,1553,1554],{"class":549},"500ms",[522,1556,694],{"class":532},[522,1558,697],{"class":532},[522,1560,1561,1563,1566],{"class":524,"line":722},[522,1562,725],{"class":532},[522,1564,1565],{"class":536}," [motionSafe])",[522,1567,556],{"class":532},[522,1569,1570],{"class":524,"line":733},[522,1571,613],{"emptyLinePlaceholder":206},[522,1573,1574,1576,1578,1580],{"class":524,"line":738},[522,1575,805],{"class":528},[522,1577,808],{"class":528},[522,1579,811],{"class":536},[522,1581,556],{"class":532},[507,1583,1584],{"icon":140,"label":816},[512,1585,1587],{"className":819,"code":1586,"filename":821,"language":822,"meta":518,"style":518},"._transition-duration\\:300 { transition-duration: 300ms; }\n\n._motion-safe\\:transition-duration\\:300 {\n    @media (prefers-reduced-motion: no-preference) {\n        transition-duration: 300ms;\n    }\n}\n",[422,1588,1589,1615,1619,1637,1647,1658,1662],{"__ignoreMap":518},[522,1590,1591,1593,1596,1598,1601,1603,1606,1608,1611,1613],{"class":524,"line":525},[522,1592,829],{"class":532},[522,1594,1595],{"class":832},"_transition-duration",[522,1597,836],{"class":536},[522,1599,1600],{"class":832},"300",[522,1602,533],{"class":532},[522,1604,1605],{"class":844}," transition-duration",[522,1607,685],{"class":532},[522,1609,1610],{"class":1530}," 300ms",[522,1612,856],{"class":532},[522,1614,859],{"class":532},[522,1616,1617],{"class":524,"line":559},[522,1618,613],{"emptyLinePlaceholder":206},[522,1620,1621,1623,1626,1628,1631,1633,1635],{"class":524,"line":588},[522,1622,829],{"class":532},[522,1624,1625],{"class":832},"_motion-safe",[522,1627,836],{"class":536},[522,1629,1630],{"class":832},"transition-duration",[522,1632,836],{"class":536},[522,1634,1600],{"class":832},[522,1636,675],{"class":532},[522,1638,1639,1642,1644],{"class":524,"line":610},[522,1640,1641],{"class":536},"    @media (prefers-reduced-motion",[522,1643,685],{"class":532},[522,1645,1646],{"class":536}," no-preference) {\n",[522,1648,1649,1652,1654,1656],{"class":524,"line":616},[522,1650,1651],{"class":844},"        transition-duration",[522,1653,685],{"class":532},[522,1655,1610],{"class":1530},[522,1657,556],{"class":532},[522,1659,1660],{"class":524,"line":637},[522,1661,987],{"class":532},[522,1663,1664],{"class":524,"line":642},[522,1665,1048],{"class":536},[507,1667,1668],{"icon":1150,"label":1151},[512,1669,1671],{"className":1154,"code":1670,"language":1156,"meta":518,"style":518},"\u003C!-- Only animate when motion is allowed -->\n\u003Cdiv class=\"_motion-safe:transition-duration:300\">\n    Animated content\n\u003C/div>\n",[422,1672,1673,1679,1699,1704],{"__ignoreMap":518},[522,1674,1675],{"class":524,"line":525},[522,1676,1678],{"class":1677},"sHwdD","\u003C!-- Only animate when motion is allowed -->\n",[522,1680,1681,1683,1686,1688,1690,1692,1695,1697],{"class":524,"line":559},[522,1682,1163],{"class":532},[522,1684,1685],{"class":681},"div",[522,1687,1168],{"class":619},[522,1689,626],{"class":532},[522,1691,553],{"class":532},[522,1693,1694],{"class":549},"_motion-safe:transition-duration:300",[522,1696,553],{"class":532},[522,1698,1180],{"class":532},[522,1700,1701],{"class":524,"line":588},[522,1702,1703],{"class":536},"    Animated content\n",[522,1705,1706,1708,1710],{"class":524,"line":610},[522,1707,1196],{"class":532},[522,1709,1685],{"class":681},[522,1711,1180],{"class":532},[1355,1713,1358],{"id":1714},"css-selector-1",[1360,1716,1717,1726],{},[1363,1718,1719],{},[1366,1720,1721,1723],{},[1369,1722,1371],{},[1369,1724,1725],{},"Media Query",[1375,1727,1728],{},[1366,1729,1730,1735],{},[1380,1731,1732],{},[422,1733,1734],{},"motion-safe",[1380,1736,1737],{},[422,1738,1739],{},"@media (prefers-reduced-motion: no-preference)",[414,1741,1743],{"id":1742},"usemotionreducemodifier",[422,1744,1745],{},"useMotionReduceModifier",[418,1747,490,1748,1751],{},[422,1749,1750],{},"useMotionReduceModifier()"," function creates a modifier that applies styles when the user prefers reduced motion.",[504,1753,1754,1956,2058],{},[507,1755,1756],{"icon":509,"label":510},[512,1757,1759],{"className":514,"code":1758,"filename":516,"language":517,"meta":518,"style":518},"import { styleframe } from \"styleframe\";\nimport { useTransitionDurationUtility, useAnimationUtility } from \"@styleframe/theme\";\nimport { useMotionReduceModifier } from \"@styleframe/theme\";\n\nconst s = styleframe();\n\nconst motionReduce = useMotionReduceModifier(s);\n\nuseTransitionDurationUtility(s, {\n    0: '0ms',\n}, [motionReduce]);\n\nuseAnimationUtility(s, {\n    none: 'none',\n}, [motionReduce]);\n\nexport default s;\n",[422,1760,1761,1781,1806,1827,1831,1845,1849,1864,1868,1878,1894,1903,1907,1918,1934,1942,1946],{"__ignoreMap":518},[522,1762,1763,1765,1767,1769,1771,1773,1775,1777,1779],{"class":524,"line":525},[522,1764,529],{"class":528},[522,1766,533],{"class":532},[522,1768,537],{"class":536},[522,1770,540],{"class":532},[522,1772,543],{"class":528},[522,1774,546],{"class":532},[522,1776,550],{"class":549},[522,1778,553],{"class":532},[522,1780,556],{"class":532},[522,1782,1783,1785,1787,1789,1791,1794,1796,1798,1800,1802,1804],{"class":524,"line":559},[522,1784,529],{"class":528},[522,1786,533],{"class":532},[522,1788,1440],{"class":536},[522,1790,569],{"class":532},[522,1792,1793],{"class":536}," useAnimationUtility",[522,1795,540],{"class":532},[522,1797,543],{"class":528},[522,1799,546],{"class":532},[522,1801,581],{"class":549},[522,1803,553],{"class":532},[522,1805,556],{"class":532},[522,1807,1808,1810,1812,1815,1817,1819,1821,1823,1825],{"class":524,"line":588},[522,1809,529],{"class":528},[522,1811,533],{"class":532},[522,1813,1814],{"class":536}," useMotionReduceModifier",[522,1816,540],{"class":532},[522,1818,543],{"class":528},[522,1820,546],{"class":532},[522,1822,581],{"class":549},[522,1824,553],{"class":532},[522,1826,556],{"class":532},[522,1828,1829],{"class":524,"line":610},[522,1830,613],{"emptyLinePlaceholder":206},[522,1832,1833,1835,1837,1839,1841,1843],{"class":524,"line":616},[522,1834,620],{"class":619},[522,1836,623],{"class":536},[522,1838,626],{"class":532},[522,1840,537],{"class":629},[522,1842,632],{"class":536},[522,1844,556],{"class":532},[522,1846,1847],{"class":524,"line":637},[522,1848,613],{"emptyLinePlaceholder":206},[522,1850,1851,1853,1856,1858,1860,1862],{"class":524,"line":642},[522,1852,620],{"class":619},[522,1854,1855],{"class":536}," motionReduce ",[522,1857,626],{"class":532},[522,1859,1814],{"class":629},[522,1861,654],{"class":536},[522,1863,556],{"class":532},[522,1865,1866],{"class":524,"line":659},[522,1867,613],{"emptyLinePlaceholder":206},[522,1869,1870,1872,1874,1876],{"class":524,"line":664},[522,1871,1519],{"class":629},[522,1873,670],{"class":536},[522,1875,569],{"class":532},[522,1877,675],{"class":532},[522,1879,1880,1883,1885,1887,1890,1892],{"class":524,"line":678},[522,1881,1882],{"class":1530},"    0",[522,1884,685],{"class":532},[522,1886,688],{"class":532},[522,1888,1889],{"class":549},"0ms",[522,1891,694],{"class":532},[522,1893,697],{"class":532},[522,1895,1896,1898,1901],{"class":524,"line":700},[522,1897,725],{"class":532},[522,1899,1900],{"class":536}," [motionReduce])",[522,1902,556],{"class":532},[522,1904,1905],{"class":524,"line":722},[522,1906,613],{"emptyLinePlaceholder":206},[522,1908,1909,1912,1914,1916],{"class":524,"line":733},[522,1910,1911],{"class":629},"useAnimationUtility",[522,1913,670],{"class":536},[522,1915,569],{"class":532},[522,1917,675],{"class":532},[522,1919,1920,1923,1925,1927,1930,1932],{"class":524,"line":738},[522,1921,1922],{"class":681},"    none",[522,1924,685],{"class":532},[522,1926,688],{"class":532},[522,1928,1929],{"class":549},"none",[522,1931,694],{"class":532},[522,1933,697],{"class":532},[522,1935,1936,1938,1940],{"class":524,"line":750},[522,1937,725],{"class":532},[522,1939,1900],{"class":536},[522,1941,556],{"class":532},[522,1943,1944],{"class":524,"line":767},[522,1945,613],{"emptyLinePlaceholder":206},[522,1947,1948,1950,1952,1954],{"class":524,"line":788},[522,1949,805],{"class":528},[522,1951,808],{"class":528},[522,1953,811],{"class":536},[522,1955,556],{"class":532},[507,1957,1958],{"icon":140,"label":816},[512,1959,1961],{"className":819,"code":1960,"filename":821,"language":822,"meta":518,"style":518},"._motion-reduce\\:transition-duration\\:0 {\n    @media (prefers-reduced-motion: reduce) {\n        transition-duration: 0ms;\n    }\n}\n\n._motion-reduce\\:animation\\:none {\n    @media (prefers-reduced-motion: reduce) {\n        animation: none;\n    }\n}\n",[422,1962,1963,1981,1990,2001,2005,2009,2013,2030,2038,2050,2054],{"__ignoreMap":518},[522,1964,1965,1967,1970,1972,1974,1976,1979],{"class":524,"line":525},[522,1966,829],{"class":532},[522,1968,1969],{"class":832},"_motion-reduce",[522,1971,836],{"class":536},[522,1973,1630],{"class":832},[522,1975,836],{"class":536},[522,1977,1978],{"class":832},"0",[522,1980,675],{"class":532},[522,1982,1983,1985,1987],{"class":524,"line":559},[522,1984,1641],{"class":536},[522,1986,685],{"class":532},[522,1988,1989],{"class":536}," reduce) {\n",[522,1991,1992,1994,1996,1999],{"class":524,"line":588},[522,1993,1651],{"class":844},[522,1995,685],{"class":532},[522,1997,1998],{"class":1530}," 0ms",[522,2000,556],{"class":532},[522,2002,2003],{"class":524,"line":610},[522,2004,987],{"class":532},[522,2006,2007],{"class":524,"line":616},[522,2008,1048],{"class":536},[522,2010,2011],{"class":524,"line":637},[522,2012,613],{"emptyLinePlaceholder":206},[522,2014,2015,2017,2019,2021,2024,2026,2028],{"class":524,"line":642},[522,2016,829],{"class":532},[522,2018,1969],{"class":832},[522,2020,836],{"class":536},[522,2022,2023],{"class":832},"animation",[522,2025,836],{"class":536},[522,2027,1929],{"class":832},[522,2029,675],{"class":532},[522,2031,2032,2034,2036],{"class":524,"line":659},[522,2033,1641],{"class":536},[522,2035,685],{"class":532},[522,2037,1989],{"class":536},[522,2039,2040,2043,2045,2048],{"class":524,"line":664},[522,2041,2042],{"class":844},"        animation",[522,2044,685],{"class":532},[522,2046,2047],{"class":536}," none",[522,2049,556],{"class":532},[522,2051,2052],{"class":524,"line":678},[522,2053,987],{"class":532},[522,2055,2056],{"class":524,"line":700},[522,2057,1048],{"class":536},[507,2059,2060],{"icon":1150,"label":1151},[512,2061,2063],{"className":1154,"code":2062,"language":1156,"meta":518,"style":518},"\u003C!-- Disable animation for users who prefer reduced motion -->\n\u003Cdiv class=\"_motion-reduce:animation:none _motion-reduce:transition-duration:0\">\n    Accessible content\n\u003C/div>\n",[422,2064,2065,2070,2089,2094],{"__ignoreMap":518},[522,2066,2067],{"class":524,"line":525},[522,2068,2069],{"class":1677},"\u003C!-- Disable animation for users who prefer reduced motion -->\n",[522,2071,2072,2074,2076,2078,2080,2082,2085,2087],{"class":524,"line":559},[522,2073,1163],{"class":532},[522,2075,1685],{"class":681},[522,2077,1168],{"class":619},[522,2079,626],{"class":532},[522,2081,553],{"class":532},[522,2083,2084],{"class":549},"_motion-reduce:animation:none _motion-reduce:transition-duration:0",[522,2086,553],{"class":532},[522,2088,1180],{"class":532},[522,2090,2091],{"class":524,"line":588},[522,2092,2093],{"class":536},"    Accessible content\n",[522,2095,2096,2098,2100],{"class":524,"line":610},[522,2097,1196],{"class":532},[522,2099,1685],{"class":681},[522,2101,1180],{"class":532},[1355,2103,1358],{"id":2104},"css-selector-2",[1360,2106,2107,2115],{},[1363,2108,2109],{},[1366,2110,2111,2113],{},[1369,2112,1371],{},[1369,2114,1725],{},[1375,2116,2117],{},[1366,2118,2119,2124],{},[1380,2120,2121],{},[422,2122,2123],{},"motion-reduce",[1380,2125,2126],{},[422,2127,2128],{},"@media (prefers-reduced-motion: reduce)",[414,2130,2132],{"id":2131},"usecontrastmoremodifier",[422,2133,2134],{},"useContrastMoreModifier",[418,2136,490,2137,2140],{},[422,2138,2139],{},"useContrastMoreModifier()"," function creates a modifier that applies styles when the user prefers more contrast.",[1355,2142,1358],{"id":2143},"css-selector-3",[1360,2145,2146,2154],{},[1363,2147,2148],{},[1366,2149,2150,2152],{},[1369,2151,1371],{},[1369,2153,1725],{},[1375,2155,2156],{},[1366,2157,2158,2163],{},[1380,2159,2160],{},[422,2161,2162],{},"contrast-more",[1380,2164,2165],{},[422,2166,2167],{},"@media (prefers-contrast: more)",[414,2169,2171],{"id":2170},"usecontrastlessmodifier",[422,2172,2173],{},"useContrastLessModifier",[418,2175,490,2176,2179],{},[422,2177,2178],{},"useContrastLessModifier()"," function creates a modifier that applies styles when the user prefers less contrast.",[1355,2181,1358],{"id":2182},"css-selector-4",[1360,2184,2185,2193],{},[1363,2186,2187],{},[1366,2188,2189,2191],{},[1369,2190,1371],{},[1369,2192,1725],{},[1375,2194,2195],{},[1366,2196,2197,2202],{},[1380,2198,2199],{},[422,2200,2201],{},"contrast-less",[1380,2203,2204],{},[422,2205,2206],{},"@media (prefers-contrast: less)",[414,2208,2210],{"id":2209},"useportraitmodifier",[422,2211,2212],{},"usePortraitModifier",[418,2214,490,2215,2218],{},[422,2216,2217],{},"usePortraitModifier()"," function creates a modifier that applies styles in portrait orientation.",[1355,2220,1358],{"id":2221},"css-selector-5",[1360,2223,2224,2232],{},[1363,2225,2226],{},[1366,2227,2228,2230],{},[1369,2229,1371],{},[1369,2231,1725],{},[1375,2233,2234],{},[1366,2235,2236,2241],{},[1380,2237,2238],{},[422,2239,2240],{},"portrait",[1380,2242,2243],{},[422,2244,2245],{},"@media (orientation: portrait)",[414,2247,2249],{"id":2248},"uselandscapemodifier",[422,2250,2251],{},"useLandscapeModifier",[418,2253,490,2254,2257],{},[422,2255,2256],{},"useLandscapeModifier()"," function creates a modifier that applies styles in landscape orientation.",[1355,2259,1358],{"id":2260},"css-selector-6",[1360,2262,2263,2271],{},[1363,2264,2265],{},[1366,2266,2267,2269],{},[1369,2268,1371],{},[1369,2270,1725],{},[1375,2272,2273],{},[1366,2274,2275,2280],{},[1380,2276,2277],{},[422,2278,2279],{},"landscape",[1380,2281,2282],{},[422,2283,2284],{},"@media (orientation: landscape)",[414,2286,2288],{"id":2287},"useprintmodifier",[422,2289,2290],{},"usePrintModifier",[418,2292,490,2293,2296],{},[422,2294,2295],{},"usePrintModifier()"," function creates a modifier that applies styles for print media.",[504,2298,2299,2498,2583],{},[507,2300,2301],{"icon":509,"label":510},[512,2302,2304],{"className":514,"code":2303,"filename":516,"language":517,"meta":518,"style":518},"import { styleframe } from \"styleframe\";\nimport { useDisplayUtility, useBackgroundColorUtility } from \"@styleframe/theme\";\nimport { usePrintModifier } from \"@styleframe/theme\";\n\nconst s = styleframe();\n\nconst print = usePrintModifier(s);\n\nuseDisplayUtility(s, {\n    none: 'none',\n}, [print]);\n\nuseBackgroundColorUtility(s, {\n    white: '#ffffff',\n}, [print]);\n\nexport default s;\n",[422,2305,2306,2326,2351,2372,2376,2390,2394,2409,2413,2424,2438,2447,2451,2461,2476,2484,2488],{"__ignoreMap":518},[522,2307,2308,2310,2312,2314,2316,2318,2320,2322,2324],{"class":524,"line":525},[522,2309,529],{"class":528},[522,2311,533],{"class":532},[522,2313,537],{"class":536},[522,2315,540],{"class":532},[522,2317,543],{"class":528},[522,2319,546],{"class":532},[522,2321,550],{"class":549},[522,2323,553],{"class":532},[522,2325,556],{"class":532},[522,2327,2328,2330,2332,2335,2337,2339,2341,2343,2345,2347,2349],{"class":524,"line":559},[522,2329,529],{"class":528},[522,2331,533],{"class":532},[522,2333,2334],{"class":536}," useDisplayUtility",[522,2336,569],{"class":532},[522,2338,566],{"class":536},[522,2340,540],{"class":532},[522,2342,543],{"class":528},[522,2344,546],{"class":532},[522,2346,581],{"class":549},[522,2348,553],{"class":532},[522,2350,556],{"class":532},[522,2352,2353,2355,2357,2360,2362,2364,2366,2368,2370],{"class":524,"line":588},[522,2354,529],{"class":528},[522,2356,533],{"class":532},[522,2358,2359],{"class":536}," usePrintModifier",[522,2361,540],{"class":532},[522,2363,543],{"class":528},[522,2365,546],{"class":532},[522,2367,581],{"class":549},[522,2369,553],{"class":532},[522,2371,556],{"class":532},[522,2373,2374],{"class":524,"line":610},[522,2375,613],{"emptyLinePlaceholder":206},[522,2377,2378,2380,2382,2384,2386,2388],{"class":524,"line":616},[522,2379,620],{"class":619},[522,2381,623],{"class":536},[522,2383,626],{"class":532},[522,2385,537],{"class":629},[522,2387,632],{"class":536},[522,2389,556],{"class":532},[522,2391,2392],{"class":524,"line":637},[522,2393,613],{"emptyLinePlaceholder":206},[522,2395,2396,2398,2401,2403,2405,2407],{"class":524,"line":642},[522,2397,620],{"class":619},[522,2399,2400],{"class":536}," print ",[522,2402,626],{"class":532},[522,2404,2359],{"class":629},[522,2406,654],{"class":536},[522,2408,556],{"class":532},[522,2410,2411],{"class":524,"line":659},[522,2412,613],{"emptyLinePlaceholder":206},[522,2414,2415,2418,2420,2422],{"class":524,"line":664},[522,2416,2417],{"class":629},"useDisplayUtility",[522,2419,670],{"class":536},[522,2421,569],{"class":532},[522,2423,675],{"class":532},[522,2425,2426,2428,2430,2432,2434,2436],{"class":524,"line":678},[522,2427,1922],{"class":681},[522,2429,685],{"class":532},[522,2431,688],{"class":532},[522,2433,1929],{"class":549},[522,2435,694],{"class":532},[522,2437,697],{"class":532},[522,2439,2440,2442,2445],{"class":524,"line":700},[522,2441,725],{"class":532},[522,2443,2444],{"class":536}," [print])",[522,2446,556],{"class":532},[522,2448,2449],{"class":524,"line":722},[522,2450,613],{"emptyLinePlaceholder":206},[522,2452,2453,2455,2457,2459],{"class":524,"line":733},[522,2454,667],{"class":629},[522,2456,670],{"class":536},[522,2458,569],{"class":532},[522,2460,675],{"class":532},[522,2462,2463,2466,2468,2470,2472,2474],{"class":524,"line":738},[522,2464,2465],{"class":681},"    white",[522,2467,685],{"class":532},[522,2469,688],{"class":532},[522,2471,691],{"class":549},[522,2473,694],{"class":532},[522,2475,697],{"class":532},[522,2477,2478,2480,2482],{"class":524,"line":750},[522,2479,725],{"class":532},[522,2481,2444],{"class":536},[522,2483,556],{"class":532},[522,2485,2486],{"class":524,"line":767},[522,2487,613],{"emptyLinePlaceholder":206},[522,2489,2490,2492,2494,2496],{"class":524,"line":788},[522,2491,805],{"class":528},[522,2493,808],{"class":528},[522,2495,811],{"class":536},[522,2497,556],{"class":532},[507,2499,2500],{"icon":140,"label":816},[512,2501,2503],{"className":819,"code":2502,"filename":821,"language":822,"meta":518,"style":518},"._print\\:display\\:none {\n    @media print { display: none; }\n}\n\n._print\\:background-color\\:white {\n    @media print { background-color: #ffffff; }\n}\n",[422,2504,2505,2523,2538,2542,2546,2563,2579],{"__ignoreMap":518},[522,2506,2507,2509,2512,2514,2517,2519,2521],{"class":524,"line":525},[522,2508,829],{"class":532},[522,2510,2511],{"class":832},"_print",[522,2513,836],{"class":536},[522,2515,2516],{"class":832},"display",[522,2518,836],{"class":536},[522,2520,1929],{"class":832},[522,2522,675],{"class":532},[522,2524,2525,2528,2530,2532,2534,2536],{"class":524,"line":559},[522,2526,2527],{"class":536},"    @media print { ",[522,2529,2516],{"class":844},[522,2531,685],{"class":532},[522,2533,2047],{"class":536},[522,2535,856],{"class":532},[522,2537,859],{"class":532},[522,2539,2540],{"class":524,"line":588},[522,2541,1048],{"class":536},[522,2543,2544],{"class":524,"line":610},[522,2545,613],{"emptyLinePlaceholder":206},[522,2547,2548,2550,2552,2554,2556,2558,2561],{"class":524,"line":616},[522,2549,829],{"class":532},[522,2551,2511],{"class":832},[522,2553,836],{"class":536},[522,2555,953],{"class":832},[522,2557,836],{"class":536},[522,2559,2560],{"class":832},"white",[522,2562,675],{"class":532},[522,2564,2565,2567,2569,2571,2573,2575,2577],{"class":524,"line":637},[522,2566,2527],{"class":536},[522,2568,953],{"class":844},[522,2570,685],{"class":532},[522,2572,850],{"class":532},[522,2574,853],{"class":536},[522,2576,856],{"class":532},[522,2578,859],{"class":532},[522,2580,2581],{"class":524,"line":642},[522,2582,1048],{"class":536},[507,2584,2585],{"icon":1150,"label":1151},[512,2586,2588],{"className":1154,"code":2587,"language":1156,"meta":518,"style":518},"\u003C!-- Hide navigation when printing -->\n\u003Cnav class=\"_print:display:none\">Site Navigation\u003C/nav>\n\n\u003C!-- White background for print -->\n\u003Cmain class=\"_print:background-color:white\">\n    Printable content\n\u003C/main>\n",[422,2589,2590,2595,2624,2628,2633,2653,2658],{"__ignoreMap":518},[522,2591,2592],{"class":524,"line":525},[522,2593,2594],{"class":1677},"\u003C!-- Hide navigation when printing -->\n",[522,2596,2597,2599,2602,2604,2606,2608,2611,2613,2615,2618,2620,2622],{"class":524,"line":559},[522,2598,1163],{"class":532},[522,2600,2601],{"class":681},"nav",[522,2603,1168],{"class":619},[522,2605,626],{"class":532},[522,2607,553],{"class":532},[522,2609,2610],{"class":549},"_print:display:none",[522,2612,553],{"class":532},[522,2614,1190],{"class":532},[522,2616,2617],{"class":536},"Site Navigation",[522,2619,1196],{"class":532},[522,2621,2601],{"class":681},[522,2623,1180],{"class":532},[522,2625,2626],{"class":524,"line":588},[522,2627,613],{"emptyLinePlaceholder":206},[522,2629,2630],{"class":524,"line":610},[522,2631,2632],{"class":1677},"\u003C!-- White background for print -->\n",[522,2634,2635,2637,2640,2642,2644,2646,2649,2651],{"class":524,"line":616},[522,2636,1163],{"class":532},[522,2638,2639],{"class":681},"main",[522,2641,1168],{"class":619},[522,2643,626],{"class":532},[522,2645,553],{"class":532},[522,2647,2648],{"class":549},"_print:background-color:white",[522,2650,553],{"class":532},[522,2652,1180],{"class":532},[522,2654,2655],{"class":524,"line":637},[522,2656,2657],{"class":536},"    Printable content\n",[522,2659,2660,2662,2664],{"class":524,"line":642},[522,2661,1196],{"class":532},[522,2663,2639],{"class":681},[522,2665,1180],{"class":532},[1355,2667,1358],{"id":2668},"css-selector-7",[1360,2670,2671,2679],{},[1363,2672,2673],{},[1366,2674,2675,2677],{},[1369,2676,1371],{},[1369,2678,1725],{},[1375,2680,2681],{},[1366,2682,2683,2688],{},[1380,2684,2685],{},[422,2686,2687],{},"print",[1380,2689,2690],{},[422,2691,2692],{},"@media print",[414,2694,2696],{"id":2695},"useforcedcolorsmodifier",[422,2697,2698],{},"useForcedColorsModifier",[418,2700,490,2701,2704],{},[422,2702,2703],{},"useForcedColorsModifier()"," function creates a modifier that applies styles when forced colors mode is active (e.g., Windows High Contrast Mode).",[1355,2706,1358],{"id":2707},"css-selector-8",[1360,2709,2710,2718],{},[1363,2711,2712],{},[1366,2713,2714,2716],{},[1369,2715,1371],{},[1369,2717,1725],{},[1375,2719,2720],{},[1366,2721,2722,2727],{},[1380,2723,2724],{},[422,2725,2726],{},"forced-colors",[1380,2728,2729],{},[422,2730,2731],{},"@media (forced-colors: active)",[414,2733,2735],{"id":2734},"usemediapreferencemodifiers",[422,2736,2737],{},"useMediaPreferenceModifiers",[418,2739,490,2740,2743],{},[422,2741,2742],{},"useMediaPreferenceModifiers()"," function registers all media and preference modifiers at once and returns them as a destructurable object.",[2745,2746,2748],"h3",{"id":2747},"returned-modifiers","Returned Modifiers",[1360,2750,2751,2762],{},[1363,2752,2753],{},[1366,2754,2755,2758,2760],{},[1369,2756,2757],{},"Key",[1369,2759,1371],{},[1369,2761,1725],{},[1375,2763,2764,2778,2793,2808,2823,2838,2852,2866,2880],{},[1366,2765,2766,2770,2774],{},[1380,2767,2768],{},[422,2769,1016],{},[1380,2771,2772],{},[422,2773,1016],{},[1380,2775,2776],{},[422,2777,497],{},[1366,2779,2780,2785,2789],{},[1380,2781,2782],{},[422,2783,2784],{},"motionSafe",[1380,2786,2787],{},[422,2788,1734],{},[1380,2790,2791],{},[422,2792,1739],{},[1366,2794,2795,2800,2804],{},[1380,2796,2797],{},[422,2798,2799],{},"motionReduce",[1380,2801,2802],{},[422,2803,2123],{},[1380,2805,2806],{},[422,2807,2128],{},[1366,2809,2810,2815,2819],{},[1380,2811,2812],{},[422,2813,2814],{},"contrastMore",[1380,2816,2817],{},[422,2818,2162],{},[1380,2820,2821],{},[422,2822,2167],{},[1366,2824,2825,2830,2834],{},[1380,2826,2827],{},[422,2828,2829],{},"contrastLess",[1380,2831,2832],{},[422,2833,2201],{},[1380,2835,2836],{},[422,2837,2206],{},[1366,2839,2840,2844,2848],{},[1380,2841,2842],{},[422,2843,2240],{},[1380,2845,2846],{},[422,2847,2240],{},[1380,2849,2850],{},[422,2851,2245],{},[1366,2853,2854,2858,2862],{},[1380,2855,2856],{},[422,2857,2279],{},[1380,2859,2860],{},[422,2861,2279],{},[1380,2863,2864],{},[422,2865,2284],{},[1366,2867,2868,2872,2876],{},[1380,2869,2870],{},[422,2871,2687],{},[1380,2873,2874],{},[422,2875,2687],{},[1380,2877,2878],{},[422,2879,2692],{},[1366,2881,2882,2887,2891],{},[1380,2883,2884],{},[422,2885,2886],{},"forcedColors",[1380,2888,2889],{},[422,2890,2726],{},[1380,2892,2893],{},[422,2894,2731],{},[414,2896,2898],{"id":2897},"examples","Examples",[2745,2900,2902],{"id":2901},"dark-mode-with-accessible-motion","Dark Mode with Accessible Motion",[504,2904,2905,3235],{},[507,2906,2907],{"icon":509,"label":510},[512,2908,2910],{"className":514,"code":2909,"filename":516,"language":517,"meta":518,"style":518},"import { styleframe } from \"styleframe\";\nimport {\n    useBackgroundColorUtility,\n    useTextColorUtility,\n    useTransitionDurationUtility,\n} from \"@styleframe/theme\";\nimport { useMediaPreferenceModifiers } from \"@styleframe/theme\";\n\nconst s = styleframe();\n\nconst { dark, motionSafe, motionReduce } = useMediaPreferenceModifiers(s);\n\nuseBackgroundColorUtility(s, {\n    surface: '#ffffff',\n    'surface-dark': '#0f172a',\n}, [dark]);\n\nuseTextColorUtility(s, {\n    body: '#1e293b',\n    'body-dark': '#e2e8f0',\n}, [dark]);\n\nuseTransitionDurationUtility(s, {\n    200: '200ms',\n    0: '0ms',\n}, [motionSafe, motionReduce]);\n\nexport default s;\n",[422,2911,2912,2932,2938,2945,2952,2959,2974,2995,2999,3013,3017,3046,3050,3060,3074,3093,3101,3105,3115,3130,3149,3157,3161,3172,3189,3204,3219,3224],{"__ignoreMap":518},[522,2913,2914,2916,2918,2920,2922,2924,2926,2928,2930],{"class":524,"line":525},[522,2915,529],{"class":528},[522,2917,533],{"class":532},[522,2919,537],{"class":536},[522,2921,540],{"class":532},[522,2923,543],{"class":528},[522,2925,546],{"class":532},[522,2927,550],{"class":549},[522,2929,553],{"class":532},[522,2931,556],{"class":532},[522,2933,2934,2936],{"class":524,"line":559},[522,2935,529],{"class":528},[522,2937,675],{"class":532},[522,2939,2940,2943],{"class":524,"line":588},[522,2941,2942],{"class":536},"    useBackgroundColorUtility",[522,2944,697],{"class":532},[522,2946,2947,2950],{"class":524,"line":610},[522,2948,2949],{"class":536},"    useTextColorUtility",[522,2951,697],{"class":532},[522,2953,2954,2957],{"class":524,"line":616},[522,2955,2956],{"class":536},"    useTransitionDurationUtility",[522,2958,697],{"class":532},[522,2960,2961,2964,2966,2968,2970,2972],{"class":524,"line":637},[522,2962,2963],{"class":532},"}",[522,2965,543],{"class":528},[522,2967,546],{"class":532},[522,2969,581],{"class":549},[522,2971,553],{"class":532},[522,2973,556],{"class":532},[522,2975,2976,2978,2980,2983,2985,2987,2989,2991,2993],{"class":524,"line":642},[522,2977,529],{"class":528},[522,2979,533],{"class":532},[522,2981,2982],{"class":536}," useMediaPreferenceModifiers",[522,2984,540],{"class":532},[522,2986,543],{"class":528},[522,2988,546],{"class":532},[522,2990,581],{"class":549},[522,2992,553],{"class":532},[522,2994,556],{"class":532},[522,2996,2997],{"class":524,"line":659},[522,2998,613],{"emptyLinePlaceholder":206},[522,3000,3001,3003,3005,3007,3009,3011],{"class":524,"line":664},[522,3002,620],{"class":619},[522,3004,623],{"class":536},[522,3006,626],{"class":532},[522,3008,537],{"class":629},[522,3010,632],{"class":536},[522,3012,556],{"class":532},[522,3014,3015],{"class":524,"line":678},[522,3016,613],{"emptyLinePlaceholder":206},[522,3018,3019,3021,3023,3026,3028,3031,3033,3035,3037,3040,3042,3044],{"class":524,"line":700},[522,3020,620],{"class":619},[522,3022,533],{"class":532},[522,3024,3025],{"class":536}," dark",[522,3027,569],{"class":532},[522,3029,3030],{"class":536}," motionSafe",[522,3032,569],{"class":532},[522,3034,1855],{"class":536},[522,3036,2963],{"class":532},[522,3038,3039],{"class":532}," =",[522,3041,2982],{"class":629},[522,3043,654],{"class":536},[522,3045,556],{"class":532},[522,3047,3048],{"class":524,"line":722},[522,3049,613],{"emptyLinePlaceholder":206},[522,3051,3052,3054,3056,3058],{"class":524,"line":733},[522,3053,667],{"class":629},[522,3055,670],{"class":536},[522,3057,569],{"class":532},[522,3059,675],{"class":532},[522,3061,3062,3064,3066,3068,3070,3072],{"class":524,"line":738},[522,3063,682],{"class":681},[522,3065,685],{"class":532},[522,3067,688],{"class":532},[522,3069,691],{"class":549},[522,3071,694],{"class":532},[522,3073,697],{"class":532},[522,3075,3076,3078,3080,3082,3084,3086,3089,3091],{"class":524,"line":750},[522,3077,703],{"class":532},[522,3079,706],{"class":681},[522,3081,694],{"class":532},[522,3083,685],{"class":532},[522,3085,688],{"class":532},[522,3087,3088],{"class":549},"#0f172a",[522,3090,694],{"class":532},[522,3092,697],{"class":532},[522,3094,3095,3097,3099],{"class":524,"line":767},[522,3096,725],{"class":532},[522,3098,728],{"class":536},[522,3100,556],{"class":532},[522,3102,3103],{"class":524,"line":788},[522,3104,613],{"emptyLinePlaceholder":206},[522,3106,3107,3109,3111,3113],{"class":524,"line":797},[522,3108,741],{"class":629},[522,3110,670],{"class":536},[522,3112,569],{"class":532},[522,3114,675],{"class":532},[522,3116,3117,3119,3121,3123,3126,3128],{"class":524,"line":802},[522,3118,753],{"class":681},[522,3120,685],{"class":532},[522,3122,688],{"class":532},[522,3124,3125],{"class":549},"#1e293b",[522,3127,694],{"class":532},[522,3129,697],{"class":532},[522,3131,3132,3134,3137,3139,3141,3143,3145,3147],{"class":524,"line":1127},[522,3133,703],{"class":532},[522,3135,3136],{"class":681},"body-dark",[522,3138,694],{"class":532},[522,3140,685],{"class":532},[522,3142,688],{"class":532},[522,3144,781],{"class":549},[522,3146,694],{"class":532},[522,3148,697],{"class":532},[522,3150,3151,3153,3155],{"class":524,"line":1140},[522,3152,725],{"class":532},[522,3154,728],{"class":536},[522,3156,556],{"class":532},[522,3158,3159],{"class":524,"line":1145},[522,3160,613],{"emptyLinePlaceholder":206},[522,3162,3164,3166,3168,3170],{"class":524,"line":3163},23,[522,3165,1519],{"class":629},[522,3167,670],{"class":536},[522,3169,569],{"class":532},[522,3171,675],{"class":532},[522,3173,3175,3178,3180,3182,3185,3187],{"class":524,"line":3174},24,[522,3176,3177],{"class":1530},"    200",[522,3179,685],{"class":532},[522,3181,688],{"class":532},[522,3183,3184],{"class":549},"200ms",[522,3186,694],{"class":532},[522,3188,697],{"class":532},[522,3190,3192,3194,3196,3198,3200,3202],{"class":524,"line":3191},25,[522,3193,1882],{"class":1530},[522,3195,685],{"class":532},[522,3197,688],{"class":532},[522,3199,1889],{"class":549},[522,3201,694],{"class":532},[522,3203,697],{"class":532},[522,3205,3207,3209,3212,3214,3217],{"class":524,"line":3206},26,[522,3208,725],{"class":532},[522,3210,3211],{"class":536}," [motionSafe",[522,3213,569],{"class":532},[522,3215,3216],{"class":536}," motionReduce])",[522,3218,556],{"class":532},[522,3220,3222],{"class":524,"line":3221},27,[522,3223,613],{"emptyLinePlaceholder":206},[522,3225,3227,3229,3231,3233],{"class":524,"line":3226},28,[522,3228,805],{"class":528},[522,3230,808],{"class":528},[522,3232,811],{"class":536},[522,3234,556],{"class":532},[507,3236,3237],{"icon":1150,"label":1151},[512,3238,3240],{"className":1154,"code":3239,"language":1156,"meta":518,"style":518},"\u003Cdiv class=\"_background-color:surface _dark:background-color:surface-dark _text-color:body _dark:text-color:body-dark _motion-safe:transition-duration:200 _motion-reduce:transition-duration:0\">\n    Adaptive content\n\u003C/div>\n",[422,3241,3242,3261,3266],{"__ignoreMap":518},[522,3243,3244,3246,3248,3250,3252,3254,3257,3259],{"class":524,"line":525},[522,3245,1163],{"class":532},[522,3247,1685],{"class":681},[522,3249,1168],{"class":619},[522,3251,626],{"class":532},[522,3253,553],{"class":532},[522,3255,3256],{"class":549},"_background-color:surface _dark:background-color:surface-dark _text-color:body _dark:text-color:body-dark _motion-safe:transition-duration:200 _motion-reduce:transition-duration:0",[522,3258,553],{"class":532},[522,3260,1180],{"class":532},[522,3262,3263],{"class":524,"line":559},[522,3264,3265],{"class":536},"    Adaptive content\n",[522,3267,3268,3270,3272],{"class":524,"line":588},[522,3269,1196],{"class":532},[522,3271,1685],{"class":681},[522,3273,1180],{"class":532},[2745,3275,3277],{"id":3276},"print-friendly-layout","Print-Friendly Layout",[504,3279,3280,3544],{},[507,3281,3282],{"icon":509,"label":510},[512,3283,3285],{"className":514,"code":3284,"filename":516,"language":517,"meta":518,"style":518},"import { styleframe } from \"styleframe\";\nimport {\n    useDisplayUtility,\n    useBackgroundColorUtility,\n    useTextColorUtility,\n} from \"@styleframe/theme\";\nimport { usePrintModifier } from \"@styleframe/theme\";\n\nconst s = styleframe();\n\nconst print = usePrintModifier(s);\n\nuseDisplayUtility(s, {\n    none: 'none',\n    block: 'block',\n}, [print]);\n\nuseBackgroundColorUtility(s, {\n    transparent: 'transparent',\n}, [print]);\n\nuseTextColorUtility(s, {\n    black: '#000000',\n}, [print]);\n\nexport default s;\n",[422,3286,3287,3307,3313,3320,3326,3332,3346,3366,3370,3384,3388,3402,3406,3416,3430,3446,3454,3458,3468,3484,3492,3496,3506,3522,3530,3534],{"__ignoreMap":518},[522,3288,3289,3291,3293,3295,3297,3299,3301,3303,3305],{"class":524,"line":525},[522,3290,529],{"class":528},[522,3292,533],{"class":532},[522,3294,537],{"class":536},[522,3296,540],{"class":532},[522,3298,543],{"class":528},[522,3300,546],{"class":532},[522,3302,550],{"class":549},[522,3304,553],{"class":532},[522,3306,556],{"class":532},[522,3308,3309,3311],{"class":524,"line":559},[522,3310,529],{"class":528},[522,3312,675],{"class":532},[522,3314,3315,3318],{"class":524,"line":588},[522,3316,3317],{"class":536},"    useDisplayUtility",[522,3319,697],{"class":532},[522,3321,3322,3324],{"class":524,"line":610},[522,3323,2942],{"class":536},[522,3325,697],{"class":532},[522,3327,3328,3330],{"class":524,"line":616},[522,3329,2949],{"class":536},[522,3331,697],{"class":532},[522,3333,3334,3336,3338,3340,3342,3344],{"class":524,"line":637},[522,3335,2963],{"class":532},[522,3337,543],{"class":528},[522,3339,546],{"class":532},[522,3341,581],{"class":549},[522,3343,553],{"class":532},[522,3345,556],{"class":532},[522,3347,3348,3350,3352,3354,3356,3358,3360,3362,3364],{"class":524,"line":642},[522,3349,529],{"class":528},[522,3351,533],{"class":532},[522,3353,2359],{"class":536},[522,3355,540],{"class":532},[522,3357,543],{"class":528},[522,3359,546],{"class":532},[522,3361,581],{"class":549},[522,3363,553],{"class":532},[522,3365,556],{"class":532},[522,3367,3368],{"class":524,"line":659},[522,3369,613],{"emptyLinePlaceholder":206},[522,3371,3372,3374,3376,3378,3380,3382],{"class":524,"line":664},[522,3373,620],{"class":619},[522,3375,623],{"class":536},[522,3377,626],{"class":532},[522,3379,537],{"class":629},[522,3381,632],{"class":536},[522,3383,556],{"class":532},[522,3385,3386],{"class":524,"line":678},[522,3387,613],{"emptyLinePlaceholder":206},[522,3389,3390,3392,3394,3396,3398,3400],{"class":524,"line":700},[522,3391,620],{"class":619},[522,3393,2400],{"class":536},[522,3395,626],{"class":532},[522,3397,2359],{"class":629},[522,3399,654],{"class":536},[522,3401,556],{"class":532},[522,3403,3404],{"class":524,"line":722},[522,3405,613],{"emptyLinePlaceholder":206},[522,3407,3408,3410,3412,3414],{"class":524,"line":733},[522,3409,2417],{"class":629},[522,3411,670],{"class":536},[522,3413,569],{"class":532},[522,3415,675],{"class":532},[522,3417,3418,3420,3422,3424,3426,3428],{"class":524,"line":738},[522,3419,1922],{"class":681},[522,3421,685],{"class":532},[522,3423,688],{"class":532},[522,3425,1929],{"class":549},[522,3427,694],{"class":532},[522,3429,697],{"class":532},[522,3431,3432,3435,3437,3439,3442,3444],{"class":524,"line":750},[522,3433,3434],{"class":681},"    block",[522,3436,685],{"class":532},[522,3438,688],{"class":532},[522,3440,3441],{"class":549},"block",[522,3443,694],{"class":532},[522,3445,697],{"class":532},[522,3447,3448,3450,3452],{"class":524,"line":767},[522,3449,725],{"class":532},[522,3451,2444],{"class":536},[522,3453,556],{"class":532},[522,3455,3456],{"class":524,"line":788},[522,3457,613],{"emptyLinePlaceholder":206},[522,3459,3460,3462,3464,3466],{"class":524,"line":797},[522,3461,667],{"class":629},[522,3463,670],{"class":536},[522,3465,569],{"class":532},[522,3467,675],{"class":532},[522,3469,3470,3473,3475,3477,3480,3482],{"class":524,"line":802},[522,3471,3472],{"class":681},"    transparent",[522,3474,685],{"class":532},[522,3476,688],{"class":532},[522,3478,3479],{"class":549},"transparent",[522,3481,694],{"class":532},[522,3483,697],{"class":532},[522,3485,3486,3488,3490],{"class":524,"line":1127},[522,3487,725],{"class":532},[522,3489,2444],{"class":536},[522,3491,556],{"class":532},[522,3493,3494],{"class":524,"line":1140},[522,3495,613],{"emptyLinePlaceholder":206},[522,3497,3498,3500,3502,3504],{"class":524,"line":1145},[522,3499,741],{"class":629},[522,3501,670],{"class":536},[522,3503,569],{"class":532},[522,3505,675],{"class":532},[522,3507,3508,3511,3513,3515,3518,3520],{"class":524,"line":3163},[522,3509,3510],{"class":681},"    black",[522,3512,685],{"class":532},[522,3514,688],{"class":532},[522,3516,3517],{"class":549},"#000000",[522,3519,694],{"class":532},[522,3521,697],{"class":532},[522,3523,3524,3526,3528],{"class":524,"line":3174},[522,3525,725],{"class":532},[522,3527,2444],{"class":536},[522,3529,556],{"class":532},[522,3531,3532],{"class":524,"line":3191},[522,3533,613],{"emptyLinePlaceholder":206},[522,3535,3536,3538,3540,3542],{"class":524,"line":3206},[522,3537,805],{"class":528},[522,3539,808],{"class":528},[522,3541,811],{"class":536},[522,3543,556],{"class":532},[507,3545,3546],{"icon":1150,"label":1151},[512,3547,3549],{"className":1154,"code":3548,"language":1156,"meta":518,"style":518},"\u003Cheader class=\"_print:display:none\">Site Header\u003C/header>\n\u003Cnav class=\"_print:display:none\">Navigation\u003C/nav>\n\u003Cmain class=\"_print:background-color:transparent _print:text-color:black\">\n    \u003Carticle>Printable article content\u003C/article>\n\u003C/main>\n\u003Cfooter class=\"_print:display:none\">Site Footer\u003C/footer>\n",[422,3550,3551,3579,3606,3625,3643,3651],{"__ignoreMap":518},[522,3552,3553,3555,3558,3560,3562,3564,3566,3568,3570,3573,3575,3577],{"class":524,"line":525},[522,3554,1163],{"class":532},[522,3556,3557],{"class":681},"header",[522,3559,1168],{"class":619},[522,3561,626],{"class":532},[522,3563,553],{"class":532},[522,3565,2610],{"class":549},[522,3567,553],{"class":532},[522,3569,1190],{"class":532},[522,3571,3572],{"class":536},"Site Header",[522,3574,1196],{"class":532},[522,3576,3557],{"class":681},[522,3578,1180],{"class":532},[522,3580,3581,3583,3585,3587,3589,3591,3593,3595,3597,3600,3602,3604],{"class":524,"line":559},[522,3582,1163],{"class":532},[522,3584,2601],{"class":681},[522,3586,1168],{"class":619},[522,3588,626],{"class":532},[522,3590,553],{"class":532},[522,3592,2610],{"class":549},[522,3594,553],{"class":532},[522,3596,1190],{"class":532},[522,3598,3599],{"class":536},"Navigation",[522,3601,1196],{"class":532},[522,3603,2601],{"class":681},[522,3605,1180],{"class":532},[522,3607,3608,3610,3612,3614,3616,3618,3621,3623],{"class":524,"line":588},[522,3609,1163],{"class":532},[522,3611,2639],{"class":681},[522,3613,1168],{"class":619},[522,3615,626],{"class":532},[522,3617,553],{"class":532},[522,3619,3620],{"class":549},"_print:background-color:transparent _print:text-color:black",[522,3622,553],{"class":532},[522,3624,1180],{"class":532},[522,3626,3627,3629,3632,3634,3637,3639,3641],{"class":524,"line":610},[522,3628,1185],{"class":532},[522,3630,3631],{"class":681},"article",[522,3633,1190],{"class":532},[522,3635,3636],{"class":536},"Printable article content",[522,3638,1196],{"class":532},[522,3640,3631],{"class":681},[522,3642,1180],{"class":532},[522,3644,3645,3647,3649],{"class":524,"line":616},[522,3646,1196],{"class":532},[522,3648,2639],{"class":681},[522,3650,1180],{"class":532},[522,3652,3653,3655,3658,3660,3662,3664,3666,3668,3670,3673,3675,3677],{"class":524,"line":637},[522,3654,1163],{"class":532},[522,3656,3657],{"class":681},"footer",[522,3659,1168],{"class":619},[522,3661,626],{"class":532},[522,3663,553],{"class":532},[522,3665,2610],{"class":549},[522,3667,553],{"class":532},[522,3669,1190],{"class":532},[522,3671,3672],{"class":536},"Site Footer",[522,3674,1196],{"class":532},[522,3676,3657],{"class":681},[522,3678,1180],{"class":532},[414,3680,3682],{"id":3681},"best-practices","Best Practices",[442,3684,3685,3694,3703,3714,3723,3733],{},[445,3686,3687,3693],{},[448,3688,3689,3690,3692],{},"Use ",[422,3691,1016],{}," for color scheme adaptation",": Provide alternative colors for dark mode without JavaScript",[445,3695,3696,3699,3700,3702],{},[448,3697,3698],{},"Always handle reduced motion",": Use ",[422,3701,2123],{}," to disable animations for users who need it",[445,3704,3705,3699,3708,3710,3711,3713],{},[448,3706,3707],{},"Choose between motion-safe and motion-reduce",[422,3709,1734],{}," to add animations (opt-in) or ",[422,3712,2123],{}," to remove them (opt-out)",[445,3715,3716,3719,3720,3722],{},[448,3717,3718],{},"Test print styles",": Use browser print preview to verify ",[422,3721,2687],{}," modifier results",[445,3724,3725,3699,3728,429,3730,3732],{},[448,3726,3727],{},"Consider contrast preferences",[422,3729,2162],{},[422,3731,2201],{}," for users with visual needs",[445,3734,3735,3738],{},[448,3736,3737],{},"Use forced-colors sparingly",": Only override forced colors mode when absolutely necessary for content comprehension",[414,3740,3742],{"id":3741},"faq","FAQ",[3744,3745,3746,3760,3771,3784],"accordion",{},[3747,3748,3689,3751,3753,3754,3756,3757,3759],"accordion-item",{"icon":3749,"label":3750},"i-lucide-circle-help","Should I use motion-safe or motion-reduce?",[422,3752,1734],{}," if you want animations to be opt-in (only animate when the user hasn't restricted motion). Use ",[422,3755,2123],{}," if you want to override specific animations when reduced motion is preferred. The ",[422,3758,1734],{}," approach is generally safer as it starts without animation and adds it when allowed.",[3747,3761,3763,3764,3766,3767,3770],{"icon":3749,"label":3762},"Can I combine dark with hover?","Yes! Use a nested array ",[422,3765,1214],{}," to generate a combined variant. The dark modifier wraps hover, producing nested selectors: ",[422,3768,3769],{},"@media (prefers-color-scheme: dark) { &:hover { ... } }",". This lets you create different hover effects for dark mode.",[3747,3772,3774,3775,3777,3778,3780,3781,3783],{"icon":3749,"label":3773},"Does the dark modifier work with data-theme?","Yes. The ",[422,3776,487],{}," generates both ",[422,3779,497],{}," (for system preference) and ",[422,3782,1390],{}," (for class/attribute-based toggling). Both selectors are produced for every dark modifier variant.",[3747,3785,3787],{"icon":3749,"label":3786},"How do I test orientation modifiers?","Use browser developer tools to simulate different device orientations. In Chrome DevTools, toggle the device toolbar and rotate the viewport to test portrait and landscape modifiers.",[3789,3790,3791],"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 .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}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}",{"title":518,"searchDepth":559,"depth":559,"links":3793},[3794,3795,3796,3797,3798,3799,3800,3801,3802,3803,3804,3805,3808,3812,3813],{"id":416,"depth":559,"text":64},{"id":436,"depth":559,"text":437},{"id":484,"depth":559,"text":487},{"id":1393,"depth":559,"text":1396},{"id":1742,"depth":559,"text":1745},{"id":2131,"depth":559,"text":2134},{"id":2170,"depth":559,"text":2173},{"id":2209,"depth":559,"text":2212},{"id":2248,"depth":559,"text":2251},{"id":2287,"depth":559,"text":2290},{"id":2695,"depth":559,"text":2698},{"id":2734,"depth":559,"text":2737,"children":3806},[3807],{"id":2747,"depth":588,"text":2748},{"id":2897,"depth":559,"text":2898,"children":3809},[3810,3811],{"id":2901,"depth":588,"text":2902},{"id":3276,"depth":588,"text":3277},{"id":3681,"depth":559,"text":3682},{"id":3741,"depth":559,"text":3742},"Create media and preference modifiers for adaptive styling based on user preferences like dark mode, reduced motion, and more.","md",null,{},{"title":388,"icon":7},{"title":409,"description":3814},{"loc":389},"-b8ScAfV8yXk6kVoujCYXST_3M7g3Zm_95uWpYag5zs",[3823,3825],{"title":384,"path":385,"stem":386,"description":3824,"icon":7,"children":-1},"Create form state modifiers for styling form elements based on their validation and interaction states with full type safety.",{"title":392,"path":393,"stem":394,"description":3826,"icon":7,"children":-1},"Create other state modifiers for targeting open and inert elements with full type safety.",1776621151606]