[{"data":1,"prerenderedAt":4939},["ShallowReactive",2],{"navigation_en":3,"-docs-theme-design-tokens-fluid-design-viewport":682,"-docs-theme-design-tokens-fluid-design-viewport-surround":4934},{"gettingStarted":4,"api":71,"theme":162},[5,36,51],{"title":6,"icon":7,"path":8,"stem":9,"children":10,"page":7},"Getting Started",false,"\u002Fdocs\u002Fgetting-started","docs\u002Fgetting-started",[11,16,21,26,31],{"title":12,"path":13,"stem":14,"icon":15},"Introduction","\u002Fdocs\u002Fgetting-started\u002Fintroduction","docs\u002Fgetting-started\u002F01.introduction","i-lucide-house",{"title":17,"path":18,"stem":19,"icon":20},"Installation","\u002Fdocs\u002Fgetting-started\u002Finstallation","docs\u002Fgetting-started\u002F02.installation","i-lucide-download",{"title":22,"path":23,"stem":24,"icon":25},"Guides","\u002Fdocs\u002Fgetting-started\u002Fguides","docs\u002Fgetting-started\u002F03.guides","i-lucide-book-open",{"title":27,"path":28,"stem":29,"icon":30},"Comparisons","\u002Fdocs\u002Fgetting-started\u002Fcomparisons","docs\u002Fgetting-started\u002F06.comparisons","i-lucide-file-diff",{"title":32,"path":33,"stem":34,"icon":35},"Licensing","\u002Fdocs\u002Fgetting-started\u002Flicensing","docs\u002Fgetting-started\u002F07.licensing","i-lucide-scale",{"title":37,"icon":7,"path":38,"stem":39,"children":40,"page":7},"Tooling","\u002Fdocs\u002Fgetting-started\u002Ftooling","docs\u002Fgetting-started\u002Ftooling",[41,46],{"title":42,"path":43,"stem":44,"icon":45},"CLI Reference","\u002Fdocs\u002Fgetting-started\u002Ftooling\u002Fcli","docs\u002Fgetting-started\u002Ftooling\u002F01.cli","i-lucide-square-terminal",{"title":47,"path":48,"stem":49,"icon":50},"Utility Scanner","\u002Fdocs\u002Fgetting-started\u002Ftooling\u002Fscanner","docs\u002Fgetting-started\u002Ftooling\u002F02.scanner","i-lucide-view",{"title":52,"icon":7,"path":53,"stem":54,"children":55,"page":7},"Integrations","\u002Fdocs\u002Fgetting-started\u002Fintegrations","docs\u002Fgetting-started\u002Fintegrations",[56,61,66],{"title":57,"path":58,"stem":59,"icon":60},"DTCG","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Fdtcg","docs\u002Fgetting-started\u002Fintegrations\u002F01.dtcg","i-lucide-square-code",{"title":62,"path":63,"stem":64,"icon":65},"Figma Plugin","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Ffigma-plugin","docs\u002Fgetting-started\u002Fintegrations\u002F02.figma-plugin","i-simple-icons-figma",{"title":67,"path":68,"stem":69,"icon":70},"Storybook","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Fstorybook","docs\u002Fgetting-started\u002Fintegrations\u002F03.storybook","i-simple-icons-storybook",[72],{"title":73,"path":74,"stem":75,"children":76,"icon":7},"API Reference","\u002Fdocs\u002Fapi","docs\u002Fapi\u002F00.index",[77,80,85,90,95,100,105,110,115,120,125,130,145,150,155,160],{"title":78,"path":74,"stem":75,"icon":79},"Overview","i-lucide-book-text",{"title":81,"path":82,"stem":83,"icon":84},"Instance","\u002Fdocs\u002Fapi\u002Finstance","docs\u002Fapi\u002F01.instance","i-lucide-cloud-lightning",{"title":86,"path":87,"stem":88,"icon":89},"Variables","\u002Fdocs\u002Fapi\u002Fvariables","docs\u002Fapi\u002F02.variables","i-lucide-variable",{"title":91,"path":92,"stem":93,"icon":94},"Selectors","\u002Fdocs\u002Fapi\u002Fselectors","docs\u002Fapi\u002F03.selectors","i-lucide-scan-text",{"title":96,"path":97,"stem":98,"icon":99},"At-Rules","\u002Fdocs\u002Fapi\u002Fat-rules","docs\u002Fapi\u002F04.at-rules","i-lucide-at-sign",{"title":101,"path":102,"stem":103,"icon":104},"Media Queries","\u002Fdocs\u002Fapi\u002Fmedia-queries","docs\u002Fapi\u002F05.media-queries","i-lucide-image-upscale",{"title":106,"path":107,"stem":108,"icon":109},"Keyframes","\u002Fdocs\u002Fapi\u002Fkeyframes","docs\u002Fapi\u002F06.keyframes","i-lucide-square-play",{"title":111,"path":112,"stem":113,"icon":114},"Interpolation","\u002Fdocs\u002Fapi\u002Finterpolation","docs\u002Fapi\u002F07.interpolation","i-lucide-wrap-text",{"title":116,"path":117,"stem":118,"icon":119},"Utilities","\u002Fdocs\u002Fapi\u002Futilities","docs\u002Fapi\u002F08.utilities","i-lucide-sparkles",{"title":121,"path":122,"stem":123,"icon":124},"Utility Modifiers","\u002Fdocs\u002Fapi\u002Futility-modifiers","docs\u002Fapi\u002F09.utility-modifiers","i-lucide-align-horizontal-justify-center",{"title":126,"path":127,"stem":128,"icon":129},"Themes","\u002Fdocs\u002Fapi\u002Fthemes","docs\u002Fapi\u002F10.themes","i-lucide-paintbrush",{"title":131,"path":132,"stem":133,"children":134,"icon":144},"Recipes","\u002Fdocs\u002Fapi\u002Frecipes","docs\u002Fapi\u002F11.recipes\u002F00.index",[135,136,140],{"title":78,"path":132,"stem":133},{"title":137,"path":138,"stem":139},"Runtime","\u002Fdocs\u002Fapi\u002Frecipes\u002Fruntime","docs\u002Fapi\u002F11.recipes\u002F01.runtime",{"title":141,"path":142,"stem":143},"Output Format","\u002Fdocs\u002Fapi\u002Frecipes\u002Foutput-format","docs\u002Fapi\u002F11.recipes\u002F02.output-format","i-lucide-chef-hat",{"title":146,"path":147,"stem":148,"icon":149},"Composables","\u002Fdocs\u002Fapi\u002Fcomposables","docs\u002Fapi\u002F12.composables","i-lucide-component",{"title":151,"path":152,"stem":153,"icon":154},"Imports","\u002Fdocs\u002Fapi\u002Fimports","docs\u002Fapi\u002F13.imports","i-lucide-file-input",{"title":156,"path":157,"stem":158,"icon":159},"Merging","\u002Fdocs\u002Fapi\u002Fmerging","docs\u002Fapi\u002F13.merging","i-lucide-squares-intersect",{"title":151,"path":152,"stem":161,"icon":154},"docs\u002Fapi\u002F14.imports",[163,243,357,558,635],{"title":164,"path":165,"stem":166,"children":167,"icon":7},"Design Tokens","\u002Fdocs\u002Ftheme\u002Fdesign-tokens","docs\u002Ftheme\u002Fdesign-tokens\u002F00.index",[168,169,174,179,184,189,194,199,204,209,224,228,233,238],{"title":78,"path":165,"stem":166,"icon":79},{"title":170,"path":171,"stem":172,"icon":173},"Preset","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fpreset","docs\u002Ftheme\u002Fdesign-tokens\u002F01.preset","i-lucide-package",{"title":175,"path":176,"stem":177,"icon":178},"Border Radiuses","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fborder-radiuses","docs\u002Ftheme\u002Fdesign-tokens\u002F02.border-radiuses","i-lucide-square-round-corner",{"title":180,"path":181,"stem":182,"icon":183},"Borders","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fborders","docs\u002Ftheme\u002Fdesign-tokens\u002F03.borders","i-lucide-square-dashed-top-solid",{"title":185,"path":186,"stem":187,"icon":188},"Box Shadows","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fbox-shadows","docs\u002Ftheme\u002Fdesign-tokens\u002F04.box-shadows","i-lucide-layers-2",{"title":190,"path":191,"stem":192,"icon":193},"Breakpoints","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fbreakpoints","docs\u002Ftheme\u002Fdesign-tokens\u002F05.breakpoints","i-lucide-monitor-smartphone",{"title":195,"path":196,"stem":197,"icon":198},"Colors","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fcolors","docs\u002Ftheme\u002Fdesign-tokens\u002F06.colors","i-lucide-palette",{"title":200,"path":201,"stem":202,"icon":203},"Duration","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fduration","docs\u002Ftheme\u002Fdesign-tokens\u002F07.duration","i-lucide-timer",{"title":205,"path":206,"stem":207,"icon":208},"Easing","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Feasing","docs\u002Ftheme\u002Fdesign-tokens\u002F08.easing","i-lucide-spline",{"title":210,"path":211,"stem":212,"children":213,"icon":104,"defaultOpen":223},"Fluid Design","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Ffluid-design","docs\u002Ftheme\u002Fdesign-tokens\u002F09.fluid-design\u002F01.index",[214,215,219],{"title":78,"path":211,"stem":212},{"title":216,"path":217,"stem":218},"Fluid Viewport","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Ffluid-design\u002Fviewport","docs\u002Ftheme\u002Fdesign-tokens\u002F09.fluid-design\u002F02.viewport",{"title":220,"path":221,"stem":222},"Fluid Typography","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Ffluid-design\u002Ftypography","docs\u002Ftheme\u002Fdesign-tokens\u002F09.fluid-design\u002F03.typography",true,{"title":225,"path":226,"stem":227,"icon":35},"Scales","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fscales","docs\u002Ftheme\u002Fdesign-tokens\u002F10.scales",{"title":229,"path":230,"stem":231,"icon":232},"Spacing","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fspacing","docs\u002Ftheme\u002Fdesign-tokens\u002F11.spacing","i-lucide-move-horizontal",{"title":234,"path":235,"stem":236,"icon":237},"Typography","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Ftypography","docs\u002Ftheme\u002Fdesign-tokens\u002F12.typography","i-lucide-type",{"title":239,"path":240,"stem":241,"icon":242},"Z-Index","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fz-index","docs\u002Ftheme\u002Fdesign-tokens\u002F13.z-index","i-lucide-layers",{"title":244,"path":245,"stem":246,"children":247,"icon":7},"Elements","\u002Fdocs\u002Ftheme\u002Felements","docs\u002Ftheme\u002Felements\u002F00.index",[248,249,252,259,281,301,313,329,341],{"title":78,"path":245,"stem":246,"icon":79},{"title":170,"path":250,"stem":251,"icon":173},"\u002Fdocs\u002Ftheme\u002Felements\u002Fpreset","docs\u002Ftheme\u002Felements\u002F01.preset",{"title":253,"icon":242,"defaultOpen":223,"page":7,"children":254},"Base",[255],{"title":256,"path":257,"stem":258,"icon":7},"Body","\u002Fdocs\u002Ftheme\u002Felements\u002Fbody","docs\u002Ftheme\u002Felements\u002F02.base\u002F00.body",{"title":234,"icon":237,"defaultOpen":223,"page":7,"children":260},[261,265,269,273,277],{"title":262,"path":263,"stem":264,"icon":7},"Headings","\u002Fdocs\u002Ftheme\u002Felements\u002Fheadings","docs\u002Ftheme\u002Felements\u002F03.typography\u002F01.headings",{"title":266,"path":267,"stem":268,"icon":7},"Paragraphs","\u002Fdocs\u002Ftheme\u002Felements\u002Fparagraphs","docs\u002Ftheme\u002Felements\u002F03.typography\u002F02.paragraphs",{"title":270,"path":271,"stem":272,"icon":7},"Links","\u002Fdocs\u002Ftheme\u002Felements\u002Flinks","docs\u002Ftheme\u002Felements\u002F03.typography\u002F03.links",{"title":274,"path":275,"stem":276,"icon":7},"Lists","\u002Fdocs\u002Ftheme\u002Felements\u002Flists","docs\u002Ftheme\u002Felements\u002F03.typography\u002F04.lists",{"title":278,"path":279,"stem":280,"icon":7},"Definition Lists","\u002Fdocs\u002Ftheme\u002Felements\u002Fdefinition-lists","docs\u002Ftheme\u002Felements\u002F03.typography\u002F05.definition-lists",{"title":282,"icon":283,"defaultOpen":223,"page":7,"children":284},"Inline Text","i-lucide-whole-word",[285,289,293,297],{"title":286,"path":287,"stem":288,"icon":7},"Abbreviation","\u002Fdocs\u002Ftheme\u002Felements\u002Fabbreviation","docs\u002Ftheme\u002Felements\u002F04.inline-text\u002F00.abbreviation",{"title":290,"path":291,"stem":292,"icon":7},"Code","\u002Fdocs\u002Ftheme\u002Felements\u002Fcode","docs\u002Ftheme\u002Felements\u002F04.inline-text\u002F01.code",{"title":294,"path":295,"stem":296,"icon":7},"Kbd","\u002Fdocs\u002Ftheme\u002Felements\u002Fkbd","docs\u002Ftheme\u002Felements\u002F04.inline-text\u002F02.kbd",{"title":298,"path":299,"stem":300,"icon":7},"Mark","\u002Fdocs\u002Ftheme\u002Felements\u002Fmark","docs\u002Ftheme\u002Felements\u002F04.inline-text\u002F03.mark",{"title":302,"icon":303,"defaultOpen":223,"page":7,"children":304},"Media & Embeds","i-lucide-image",[305,309],{"title":306,"path":307,"stem":308,"icon":7},"Image","\u002Fdocs\u002Ftheme\u002Felements\u002Fimage","docs\u002Ftheme\u002Felements\u002F05.media\u002F00.image",{"title":310,"path":311,"stem":312,"icon":7},"Iframe","\u002Fdocs\u002Ftheme\u002Felements\u002Fiframe","docs\u002Ftheme\u002Felements\u002F05.media\u002F01.iframe",{"title":314,"icon":315,"defaultOpen":223,"page":7,"children":316},"Forms & Tables","i-lucide-table",[317,321,325],{"title":318,"path":319,"stem":320,"icon":7},"Caption","\u002Fdocs\u002Ftheme\u002Felements\u002Fcaption","docs\u002Ftheme\u002Felements\u002F06.forms-tables\u002F00.caption",{"title":322,"path":323,"stem":324,"icon":7},"Legend","\u002Fdocs\u002Ftheme\u002Felements\u002Flegend","docs\u002Ftheme\u002Felements\u002F06.forms-tables\u002F01.legend",{"title":326,"path":327,"stem":328,"icon":7},"Output","\u002Fdocs\u002Ftheme\u002Felements\u002Foutput","docs\u002Ftheme\u002Felements\u002F06.forms-tables\u002F02.output",{"title":330,"icon":331,"defaultOpen":223,"page":7,"children":332},"Structure","i-lucide-separator-horizontal",[333,337],{"title":334,"path":335,"stem":336,"icon":7},"Address","\u002Fdocs\u002Ftheme\u002Felements\u002Faddress","docs\u002Ftheme\u002Felements\u002F07.structure\u002F00.address",{"title":338,"path":339,"stem":340,"icon":7},"Horizontal Rule","\u002Fdocs\u002Ftheme\u002Felements\u002Fhorizontal-rule","docs\u002Ftheme\u002Felements\u002F07.structure\u002F01.horizontal-rule",{"title":342,"icon":343,"defaultOpen":223,"page":7,"children":344},"States","i-lucide-mouse-pointer-click",[345,349,353],{"title":346,"path":347,"stem":348,"icon":7},"Focus","\u002Fdocs\u002Ftheme\u002Felements\u002Ffocus","docs\u002Ftheme\u002Felements\u002F08.states\u002F00.focus",{"title":350,"path":351,"stem":352,"icon":7},"Selection","\u002Fdocs\u002Ftheme\u002Felements\u002Fselection","docs\u002Ftheme\u002Felements\u002F08.states\u002F01.selection",{"title":354,"path":355,"stem":356,"icon":7},"Summary","\u002Fdocs\u002Ftheme\u002Felements\u002Fsummary","docs\u002Ftheme\u002Felements\u002F08.states\u002F02.summary",{"title":358,"path":359,"stem":360,"children":361,"icon":7},"Components","\u002Fdocs\u002Ftheme\u002Fcomponents","docs\u002Ftheme\u002Fcomponents\u002F00.index",[362,363,375,399,427,491,518,550],{"title":78,"path":359,"stem":360,"icon":79},{"title":364,"icon":365,"defaultOpen":223,"page":7,"children":366},"Actions","i-lucide-square-mouse-pointer",[367,371],{"title":368,"path":369,"stem":370,"icon":7},"Button","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fbutton","docs\u002Ftheme\u002Fcomponents\u002F02.actions\u002F00.button",{"title":372,"path":373,"stem":374,"icon":7},"Hamburger Menu","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fhamburger-menu","docs\u002Ftheme\u002Fcomponents\u002F02.actions\u002F01.hamburger-menu",{"title":376,"icon":377,"defaultOpen":223,"page":7,"children":378},"Navigation","i-lucide-navigation",[379,383,387,391,395],{"title":380,"path":381,"stem":382,"icon":7},"Breadcrumb","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fbreadcrumb","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F00.breadcrumb",{"title":384,"path":385,"stem":386,"icon":7},"Nav","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fnav","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F01.nav",{"title":388,"path":389,"stem":390,"icon":7},"Pagination","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fpagination","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F02.pagination",{"title":392,"path":393,"stem":394,"icon":7},"Sidebar","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fsidebar","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F03.sidebar",{"title":396,"path":397,"stem":398,"icon":7},"Tabs","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftabs","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F04.tabs",{"title":400,"icon":401,"defaultOpen":223,"page":7,"children":402},"Feedback","i-lucide-megaphone",[403,407,411,415,419,423],{"title":404,"path":405,"stem":406,"icon":7},"Badge","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fbadge","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F00.badge",{"title":408,"path":409,"stem":410,"icon":7},"Callout","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcallout","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F01.callout",{"title":412,"path":413,"stem":414,"icon":7},"Chip","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fchip","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F02.chip",{"title":416,"path":417,"stem":418,"icon":7},"Progress","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fprogress","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F03.progress",{"title":420,"path":421,"stem":422,"icon":7},"Skeleton","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fskeleton","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F04.skeleton",{"title":424,"path":425,"stem":426,"icon":7},"Spinner","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fspinner","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F05.spinner",{"title":428,"icon":429,"defaultOpen":223,"page":7,"children":430},"Forms","i-lucide-text-cursor-input",[431,435,439,443,447,451,455,459,463,467,471,475,479,483,487],{"title":432,"path":433,"stem":434,"icon":7},"Calendar","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcalendar","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F00.calendar",{"title":436,"path":437,"stem":438,"icon":7},"Checkbox","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcheckbox","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F01.checkbox",{"title":440,"path":441,"stem":442,"icon":7},"Checkbox Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcheckbox-group","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F02.checkbox-group",{"title":444,"path":445,"stem":446,"icon":7},"Color Picker","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcolor-picker","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F03.color-picker",{"title":448,"path":449,"stem":450,"icon":7},"Field Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ffield-group","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F04.field-group",{"title":452,"path":453,"stem":454,"icon":7},"Input","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Finput","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F05.input",{"title":456,"path":457,"stem":458,"icon":7},"OTP","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fotp","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F06.otp",{"title":460,"path":461,"stem":462,"icon":7},"Radio","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fradio","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F07.radio",{"title":464,"path":465,"stem":466,"icon":7},"Radio Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fradio-group","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F08.radio-group",{"title":468,"path":469,"stem":470,"icon":7},"Select","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fselect","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F09.select",{"title":472,"path":473,"stem":474,"icon":7},"Slider","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fslider","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F10.slider",{"title":476,"path":477,"stem":478,"icon":7},"Switch","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fswitch","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F11.switch",{"title":480,"path":481,"stem":482,"icon":7},"Textarea","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftextarea","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F12.textarea",{"title":484,"path":485,"stem":486,"icon":7},"Toggle","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftoggle","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F13.toggle",{"title":488,"path":489,"stem":490,"icon":7},"Toggle Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftoggle-group","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F14.toggle-group",{"title":492,"icon":242,"defaultOpen":223,"page":7,"children":493},"Overlays",[494,498,502,506,510,514],{"title":495,"path":496,"stem":497,"icon":7},"ContextMenu","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcontext-menu","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F00.context-menu",{"title":499,"path":500,"stem":501,"icon":7},"Drawer","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fdrawer","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F01.drawer",{"title":503,"path":504,"stem":505,"icon":7},"Dropdown","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fdropdown","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F02.dropdown",{"title":507,"path":508,"stem":509,"icon":7},"Modal","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fmodal","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F03.modal",{"title":511,"path":512,"stem":513,"icon":7},"Popover","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fpopover","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F04.popover",{"title":515,"path":516,"stem":517,"icon":7},"Tooltip","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftooltip","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F05.tooltip",{"title":519,"icon":520,"defaultOpen":223,"page":7,"children":521},"Layout","i-lucide-layout",[522,526,530,534,538,542,546],{"title":523,"path":524,"stem":525,"icon":7},"Accordion","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Faccordion","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F00.accordion",{"title":527,"path":528,"stem":529,"icon":7},"Avatar","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Favatar","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F01.avatar",{"title":531,"path":532,"stem":533,"icon":7},"Avatar Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Favatar-group","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F02.avatar-group",{"title":535,"path":536,"stem":537,"icon":7},"Card","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcard","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F03.card",{"title":539,"path":540,"stem":541,"icon":7},"Media","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fmedia","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F04.media",{"title":543,"path":544,"stem":545,"icon":7},"PageHero","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fpage-hero","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F05.page-hero",{"title":547,"path":548,"stem":549,"icon":7},"Placeholder","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fplaceholder","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F06.placeholder",{"title":551,"icon":552,"defaultOpen":223,"page":7,"children":553},"AI Chat","i-lucide-message-circle",[554],{"title":555,"path":556,"stem":557,"icon":7},"ChatMessage","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fchat-message","docs\u002Ftheme\u002Fcomponents\u002F08.ai-chat\u002F00.chat-message",{"title":116,"path":559,"stem":560,"children":561,"icon":7},"\u002Fdocs\u002Ftheme\u002Futilities","docs\u002Ftheme\u002Futilities\u002F00.index",[562,563,567,572,577,581,584,588,593,598,602,605,610,613,618,622,627,632],{"title":78,"path":559,"stem":560,"icon":79},{"title":564,"path":565,"stem":566,"icon":173},"Presets","\u002Fdocs\u002Ftheme\u002Futilities\u002Fpreset","docs\u002Ftheme\u002Futilities\u002F01.preset",{"title":568,"path":569,"stem":570,"icon":571},"Accessibility","\u002Fdocs\u002Ftheme\u002Futilities\u002Faccessibility","docs\u002Ftheme\u002Futilities\u002F02.accessibility","i-lucide-accessibility",{"title":573,"path":574,"stem":575,"icon":576},"Animations","\u002Fdocs\u002Ftheme\u002Futilities\u002Fanimations","docs\u002Ftheme\u002Futilities\u002F03.animations","i-lucide-loader-circle",{"title":578,"path":579,"stem":580,"icon":303},"Backgrounds","\u002Fdocs\u002Ftheme\u002Futilities\u002Fbackgrounds","docs\u002Ftheme\u002Futilities\u002F04.backgrounds",{"title":180,"path":582,"stem":583,"icon":183},"\u002Fdocs\u002Ftheme\u002Futilities\u002Fborders","docs\u002Ftheme\u002Futilities\u002F05.borders",{"title":585,"path":586,"stem":587,"icon":119},"Effects","\u002Fdocs\u002Ftheme\u002Futilities\u002Feffects","docs\u002Ftheme\u002Futilities\u002F06.effects",{"title":589,"path":590,"stem":591,"icon":592},"Filters","\u002Fdocs\u002Ftheme\u002Futilities\u002Ffilters","docs\u002Ftheme\u002Futilities\u002F07.filters","i-lucide-aperture",{"title":594,"path":595,"stem":596,"icon":597},"Flexbox & Grid","\u002Fdocs\u002Ftheme\u002Futilities\u002Fflexbox-grid","docs\u002Ftheme\u002Futilities\u002F08.flexbox-grid","i-lucide-layout-grid",{"title":599,"path":600,"stem":601,"icon":343},"Interactivity","\u002Fdocs\u002Ftheme\u002Futilities\u002Finteractivity","docs\u002Ftheme\u002Futilities\u002F09.interactivity",{"title":519,"path":603,"stem":604,"icon":520},"\u002Fdocs\u002Ftheme\u002Futilities\u002Flayout","docs\u002Ftheme\u002Futilities\u002F10.layout",{"title":606,"path":607,"stem":608,"icon":609},"Sizing","\u002Fdocs\u002Ftheme\u002Futilities\u002Fsizing","docs\u002Ftheme\u002Futilities\u002F11.sizing","i-lucide-scaling",{"title":229,"path":611,"stem":612,"icon":232},"\u002Fdocs\u002Ftheme\u002Futilities\u002Fspacing","docs\u002Ftheme\u002Futilities\u002F12.spacing",{"title":614,"path":615,"stem":616,"icon":617},"SVG","\u002Fdocs\u002Ftheme\u002Futilities\u002Fsvg","docs\u002Ftheme\u002Futilities\u002F13.svg","i-lucide-pen-tool",{"title":619,"path":620,"stem":621,"icon":315},"Tables","\u002Fdocs\u002Ftheme\u002Futilities\u002Ftables","docs\u002Ftheme\u002Futilities\u002F14.tables",{"title":623,"path":624,"stem":625,"icon":626},"Transforms","\u002Fdocs\u002Ftheme\u002Futilities\u002Ftransforms","docs\u002Ftheme\u002Futilities\u002F15.transforms","i-lucide-rotate-3d",{"title":628,"path":629,"stem":630,"icon":631},"Transitions","\u002Fdocs\u002Ftheme\u002Futilities\u002Ftransitions","docs\u002Ftheme\u002Futilities\u002F16.transitions","i-lucide-arrow-left-right",{"title":234,"path":633,"stem":634,"icon":237},"\u002Fdocs\u002Ftheme\u002Futilities\u002Ftypography","docs\u002Ftheme\u002Futilities\u002F17.typography",{"title":636,"path":637,"stem":638,"children":639,"icon":7},"Modifiers","\u002Fdocs\u002Ftheme\u002Fmodifiers","docs\u002Ftheme\u002Fmodifiers\u002F00.index",[640,641,644,648,653,657,662,667,672,677],{"title":78,"path":637,"stem":638,"icon":79},{"title":564,"path":642,"stem":643,"icon":173},"\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fpreset","docs\u002Ftheme\u002Fmodifiers\u002F01.preset",{"title":645,"path":646,"stem":647,"icon":571},"ARIA State","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Faria-state","docs\u002Ftheme\u002Fmodifiers\u002F02.aria-state",{"title":649,"path":650,"stem":651,"icon":652},"Directional","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fdirectional","docs\u002Ftheme\u002Fmodifiers\u002F03.directional","i-lucide-flip-horizontal",{"title":654,"path":655,"stem":656,"icon":429},"Form State","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fform-state","docs\u002Ftheme\u002Fmodifiers\u002F04.form-state",{"title":658,"path":659,"stem":660,"icon":661},"Media & Preferences","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fmedia-preferences","docs\u002Ftheme\u002Fmodifiers\u002F05.media-preferences","i-lucide-sun-moon",{"title":663,"path":664,"stem":665,"icon":666},"Other State","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fother-state","docs\u002Ftheme\u002Fmodifiers\u002F06.other-state","i-lucide-toggle-left",{"title":668,"path":669,"stem":670,"icon":671},"Pseudo-Elements","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fpseudo-elements","docs\u002Ftheme\u002Fmodifiers\u002F07.pseudo-elements","i-lucide-box-select",{"title":673,"path":674,"stem":675,"icon":676},"Pseudo-State","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fpseudo-state","docs\u002Ftheme\u002Fmodifiers\u002F08.pseudo-state","i-lucide-pointer",{"title":678,"path":679,"stem":680,"icon":681},"Structural","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fstructural","docs\u002Ftheme\u002Fmodifiers\u002F09.structural","i-lucide-list-ordered",{"id":683,"title":684,"body":685,"description":4927,"extension":4928,"links":4929,"meta":4930,"navigation":4931,"path":217,"seo":4932,"stem":218,"__hash__":4933},"docs_theme\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002F09.fluid-design\u002F02.viewport.md","Fluid Responsive Design - Viewport",{"type":686,"value":687,"toc":4906},"minimark",[688,714,718,722,726,729,763,769,775,780,783,1031,1034,1078,1088,1092,1098,1154,1157,1161,1164,1393,1399,1404,1408,1419,1796,1800,1803,2049,2053,2056,2473,2476,2689,2693,2697,2700,3701,3705,3708,4316,4320,4323,4719,4723,4812,4821,4825,4902],[689,690,691,695,696,700,701,705,706,709,710,713],"note",{"icon":173},[692,693,694],"strong",{},"Part of the Design Tokens Preset:"," ",[697,698,699],"code",{},"useFluidViewportDesignTokens"," is enabled by default in the ",[702,703,704],"a",{"href":171},"Design Tokens Preset"," (",[697,707,708],{},"useDesignTokensPreset",") and you can configure it through the preset's ",[697,711,712],{},"fluidViewport"," option. For most projects, applying it via the preset is the recommended approach.",[715,716,78],"h2",{"id":717},"overview",[719,720,721],"p",{},"The viewport composables provide the foundation for fluid responsive design in Styleframe. They handle the mathematical calculations that make values scale smoothly between minimum and maximum viewport widths without using media queries, creating truly fluid interfaces that adapt seamlessly to any screen size.",[715,723,725],{"id":724},"why-use-viewport-composables","Why use viewport composables?",[719,727,728],{},"Viewport composables help you:",[730,731,732,739,745,751,757],"ul",{},[733,734,735,738],"li",{},[692,736,737],{},"Eliminate media query clutter",": Create values that scale smoothly without breakpoint-based jumps.",[733,740,741,744],{},[692,742,743],{},"Ensure consistent scaling",": All fluid values use the same viewport range for predictable behavior.",[733,746,747,750],{},[692,748,749],{},"Simplify responsive design",": Define min\u002Fmax values and let the browser handle interpolation.",[733,752,753,756],{},[692,754,755],{},"Improve maintainability",": Change your viewport range once to update all fluid calculations.",[733,758,759,762],{},[692,760,761],{},"Create harmonious scaling",": Values transition smoothly in perfect proportion to the viewport size.",[715,764,766],{"id":765},"usefluidviewportdesigntokens",[697,767,768],{},"useFluidViewportDesignTokens()",[719,770,771,772,774],{},"The ",[697,773,768],{}," composable establishes the viewport range for all fluid calculations in your theme. It creates four essential CSS variables that serve as the foundation for fluid design tokens.",[776,777,779],"h3",{"id":778},"default-viewport-range","Default Viewport Range",[719,781,782],{},"Styleframe provides a carefully chosen default viewport range that covers most common devices:",[784,785,786,949],"tabs",{},[787,788,790],"tabs-item",{"icon":789,"label":290},"i-lucide-code",[791,792,798],"pre",{"className":793,"code":794,"filename":795,"language":796,"meta":797,"style":797},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { styleframe } from 'styleframe';\nimport { useFluidViewportDesignTokens } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nconst { fluidMinWidth, fluidMaxWidth, fluidScreen, fluidBreakpoint } = useFluidViewportDesignTokens(s);\n\nexport default s;\n","styleframe.config.ts","ts","",[697,799,800,836,859,865,886,891,930,935],{"__ignoreMap":797},[801,802,805,809,813,817,820,823,826,830,833],"span",{"class":803,"line":804},"line",1,[801,806,808],{"class":807},"s7zQu","import",[801,810,812],{"class":811},"sMK4o"," {",[801,814,816],{"class":815},"sTEyZ"," styleframe",[801,818,819],{"class":811}," }",[801,821,822],{"class":807}," from",[801,824,825],{"class":811}," '",[801,827,829],{"class":828},"sfazB","styleframe",[801,831,832],{"class":811},"'",[801,834,835],{"class":811},";\n",[801,837,839,841,843,846,848,850,852,855,857],{"class":803,"line":838},2,[801,840,808],{"class":807},[801,842,812],{"class":811},[801,844,845],{"class":815}," useFluidViewportDesignTokens",[801,847,819],{"class":811},[801,849,822],{"class":807},[801,851,825],{"class":811},[801,853,854],{"class":828},"@styleframe\u002Ftheme",[801,856,832],{"class":811},[801,858,835],{"class":811},[801,860,862],{"class":803,"line":861},3,[801,863,864],{"emptyLinePlaceholder":223},"\n",[801,866,868,872,875,878,881,884],{"class":803,"line":867},4,[801,869,871],{"class":870},"spNyl","const",[801,873,874],{"class":815}," s ",[801,876,877],{"class":811},"=",[801,879,816],{"class":880},"s2Zo4",[801,882,883],{"class":815},"()",[801,885,835],{"class":811},[801,887,889],{"class":803,"line":888},5,[801,890,864],{"emptyLinePlaceholder":223},[801,892,894,896,898,901,904,907,909,912,914,917,920,923,925,928],{"class":803,"line":893},6,[801,895,871],{"class":870},[801,897,812],{"class":811},[801,899,900],{"class":815}," fluidMinWidth",[801,902,903],{"class":811},",",[801,905,906],{"class":815}," fluidMaxWidth",[801,908,903],{"class":811},[801,910,911],{"class":815}," fluidScreen",[801,913,903],{"class":811},[801,915,916],{"class":815}," fluidBreakpoint ",[801,918,919],{"class":811},"}",[801,921,922],{"class":811}," =",[801,924,845],{"class":880},[801,926,927],{"class":815},"(s)",[801,929,835],{"class":811},[801,931,933],{"class":803,"line":932},7,[801,934,864],{"emptyLinePlaceholder":223},[801,936,938,941,944,947],{"class":803,"line":937},8,[801,939,940],{"class":807},"export",[801,942,943],{"class":807}," default",[801,945,946],{"class":815}," s",[801,948,835],{"class":811},[787,950,951],{"icon":154,"label":326},[791,952,957],{"className":953,"code":954,"filename":955,"language":956,"meta":797,"style":797},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight",":root {\n    --fluid--min-width: 320;\n    --fluid--max-width: 1440;\n    --fluid--screen: 100vw;\n    --fluid--breakpoint: calc(...);\n}\n","styleframe\u002Findex.css","css",[697,958,959,970,983,995,1007,1026],{"__ignoreMap":797},[801,960,961,964,967],{"class":803,"line":804},[801,962,963],{"class":811},":",[801,965,966],{"class":870},"root",[801,968,969],{"class":811}," {\n",[801,971,972,975,977,981],{"class":803,"line":838},[801,973,974],{"class":815},"    --fluid--min-width",[801,976,963],{"class":811},[801,978,980],{"class":979},"sbssI"," 320",[801,982,835],{"class":811},[801,984,985,988,990,993],{"class":803,"line":861},[801,986,987],{"class":815},"    --fluid--max-width",[801,989,963],{"class":811},[801,991,992],{"class":979}," 1440",[801,994,835],{"class":811},[801,996,997,1000,1002,1005],{"class":803,"line":867},[801,998,999],{"class":815},"    --fluid--screen",[801,1001,963],{"class":811},[801,1003,1004],{"class":979}," 100vw",[801,1006,835],{"class":811},[801,1008,1009,1012,1014,1017,1020,1023],{"class":803,"line":888},[801,1010,1011],{"class":815},"    --fluid--breakpoint",[801,1013,963],{"class":811},[801,1015,1016],{"class":880}," calc",[801,1018,1019],{"class":811},"(",[801,1021,1022],{"class":815},"...",[801,1024,1025],{"class":811},");\n",[801,1027,1028],{"class":803,"line":893},[801,1029,1030],{"class":811},"}\n",[719,1032,1033],{},"The default values provide:",[730,1035,1036,1048,1059,1070],{},[733,1037,1038,1043,1044,1047],{},[692,1039,1040],{},[697,1041,1042],{},"minWidth",": ",[697,1045,1046],{},"320"," - Covers small mobile devices (iPhone SE)",[733,1049,1050,1043,1055,1058],{},[692,1051,1052],{},[697,1053,1054],{},"maxWidth",[697,1056,1057],{},"1440"," - Covers standard laptops and smaller desktops",[733,1060,1061,1043,1066,1069],{},[692,1062,1063],{},[697,1064,1065],{},"screen",[697,1067,1068],{},"100vw"," - The current viewport width",[733,1071,1072,1077],{},[692,1073,1074],{},[697,1075,1076],{},"breakpoint",": Calculated - Normalized progress value from 0 to 1",[1079,1080,1081,1084,1085,1087],"tip",{},[692,1082,1083],{},"Pro tip:"," Call ",[697,1086,768],{}," once at the beginning of your theme configuration. All other fluid composables will automatically reference these viewport variables.",[776,1089,1091],{"id":1090},"understanding-the-breakpoint-variable","Understanding the Breakpoint Variable",[719,1093,771,1094,1097],{},[697,1095,1096],{},"fluidBreakpoint"," variable is the key to fluid scaling. It represents the current viewport's position between minimum and maximum widths as a decimal value:",[1099,1100,1101,1117],"table",{},[1102,1103,1104],"thead",{},[1105,1106,1107,1111,1114],"tr",{},[1108,1109,1110],"th",{},"Viewport Width",[1108,1112,1113],{},"Breakpoint Value",[1108,1115,1116],{},"Percentage",[1118,1119,1120,1132,1143],"tbody",{},[1105,1121,1122,1126,1129],{},[1123,1124,1125],"td",{},"320px (min)",[1123,1127,1128],{},"0",[1123,1130,1131],{},"0% through range",[1105,1133,1134,1137,1140],{},[1123,1135,1136],{},"880px (middle)",[1123,1138,1139],{},"0.5",[1123,1141,1142],{},"50% through range",[1105,1144,1145,1148,1151],{},[1123,1146,1147],{},"1440px (max)",[1123,1149,1150],{},"1",[1123,1152,1153],{},"100% through range",[719,1155,1156],{},"This normalized value makes it easy to interpolate between any min\u002Fmax value pair.",[776,1158,1160],{"id":1159},"customizing-the-viewport-range","Customizing the Viewport Range",[719,1162,1163],{},"You can customize the viewport range to match your design requirements:",[784,1165,1166,1330],{},[787,1167,1168],{"icon":789,"label":290},[791,1169,1171],{"className":793,"code":1170,"filename":795,"language":796,"meta":797,"style":797},"import { styleframe } from 'styleframe';\nimport { useFluidViewportDesignTokens } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\n\u002F\u002F Custom viewport range for tablet-to-desktop\nconst { fluidMinWidth, fluidMaxWidth, fluidScreen, fluidBreakpoint } = useFluidViewportDesignTokens(s, {\n    minWidth: 768,   \u002F\u002F Start scaling at tablet size\n    maxWidth: 1920   \u002F\u002F Stop scaling at large desktop\n});\n\nexport default s;\n",[697,1172,1173,1193,1213,1217,1231,1235,1241,1274,1290,1304,1314,1319],{"__ignoreMap":797},[801,1174,1175,1177,1179,1181,1183,1185,1187,1189,1191],{"class":803,"line":804},[801,1176,808],{"class":807},[801,1178,812],{"class":811},[801,1180,816],{"class":815},[801,1182,819],{"class":811},[801,1184,822],{"class":807},[801,1186,825],{"class":811},[801,1188,829],{"class":828},[801,1190,832],{"class":811},[801,1192,835],{"class":811},[801,1194,1195,1197,1199,1201,1203,1205,1207,1209,1211],{"class":803,"line":838},[801,1196,808],{"class":807},[801,1198,812],{"class":811},[801,1200,845],{"class":815},[801,1202,819],{"class":811},[801,1204,822],{"class":807},[801,1206,825],{"class":811},[801,1208,854],{"class":828},[801,1210,832],{"class":811},[801,1212,835],{"class":811},[801,1214,1215],{"class":803,"line":861},[801,1216,864],{"emptyLinePlaceholder":223},[801,1218,1219,1221,1223,1225,1227,1229],{"class":803,"line":867},[801,1220,871],{"class":870},[801,1222,874],{"class":815},[801,1224,877],{"class":811},[801,1226,816],{"class":880},[801,1228,883],{"class":815},[801,1230,835],{"class":811},[801,1232,1233],{"class":803,"line":888},[801,1234,864],{"emptyLinePlaceholder":223},[801,1236,1237],{"class":803,"line":893},[801,1238,1240],{"class":1239},"sHwdD","\u002F\u002F Custom viewport range for tablet-to-desktop\n",[801,1242,1243,1245,1247,1249,1251,1253,1255,1257,1259,1261,1263,1265,1267,1270,1272],{"class":803,"line":932},[801,1244,871],{"class":870},[801,1246,812],{"class":811},[801,1248,900],{"class":815},[801,1250,903],{"class":811},[801,1252,906],{"class":815},[801,1254,903],{"class":811},[801,1256,911],{"class":815},[801,1258,903],{"class":811},[801,1260,916],{"class":815},[801,1262,919],{"class":811},[801,1264,922],{"class":811},[801,1266,845],{"class":880},[801,1268,1269],{"class":815},"(s",[801,1271,903],{"class":811},[801,1273,969],{"class":811},[801,1275,1276,1280,1282,1285,1287],{"class":803,"line":937},[801,1277,1279],{"class":1278},"swJcz","    minWidth",[801,1281,963],{"class":811},[801,1283,1284],{"class":979}," 768",[801,1286,903],{"class":811},[801,1288,1289],{"class":1239},"   \u002F\u002F Start scaling at tablet size\n",[801,1291,1293,1296,1298,1301],{"class":803,"line":1292},9,[801,1294,1295],{"class":1278},"    maxWidth",[801,1297,963],{"class":811},[801,1299,1300],{"class":979}," 1920",[801,1302,1303],{"class":1239},"   \u002F\u002F Stop scaling at large desktop\n",[801,1305,1307,1309,1312],{"class":803,"line":1306},10,[801,1308,919],{"class":811},[801,1310,1311],{"class":815},")",[801,1313,835],{"class":811},[801,1315,1317],{"class":803,"line":1316},11,[801,1318,864],{"emptyLinePlaceholder":223},[801,1320,1322,1324,1326,1328],{"class":803,"line":1321},12,[801,1323,940],{"class":807},[801,1325,943],{"class":807},[801,1327,946],{"class":815},[801,1329,835],{"class":811},[787,1331,1332],{"icon":154,"label":326},[791,1333,1335],{"className":953,"code":1334,"filename":955,"language":956,"meta":797,"style":797},":root {\n    --fluid--min-width: 768;\n    --fluid--max-width: 1920;\n    --fluid--screen: 100vw;\n    --fluid--breakpoint: calc(...);\n}\n",[697,1336,1337,1345,1355,1365,1375,1389],{"__ignoreMap":797},[801,1338,1339,1341,1343],{"class":803,"line":804},[801,1340,963],{"class":811},[801,1342,966],{"class":870},[801,1344,969],{"class":811},[801,1346,1347,1349,1351,1353],{"class":803,"line":838},[801,1348,974],{"class":815},[801,1350,963],{"class":811},[801,1352,1284],{"class":979},[801,1354,835],{"class":811},[801,1356,1357,1359,1361,1363],{"class":803,"line":861},[801,1358,987],{"class":815},[801,1360,963],{"class":811},[801,1362,1300],{"class":979},[801,1364,835],{"class":811},[801,1366,1367,1369,1371,1373],{"class":803,"line":867},[801,1368,999],{"class":815},[801,1370,963],{"class":811},[801,1372,1004],{"class":979},[801,1374,835],{"class":811},[801,1376,1377,1379,1381,1383,1385,1387],{"class":803,"line":888},[801,1378,1011],{"class":815},[801,1380,963],{"class":811},[801,1382,1016],{"class":880},[801,1384,1019],{"class":811},[801,1386,1022],{"class":815},[801,1388,1025],{"class":811},[801,1390,1391],{"class":803,"line":893},[801,1392,1030],{"class":811},[715,1394,1396],{"id":1395},"usefluidclamp",[697,1397,1398],{},"useFluidClamp()",[719,1400,771,1401,1403],{},[697,1402,1398],{}," composable creates individual fluid values that scale smoothly between minimum and maximum values. It's the low-level building block for all fluid design tokens.",[776,1405,1407],{"id":1406},"basic-fluid-values","Basic Fluid Values",[719,1409,1410,1411,1414,1415,1418],{},"Create a fluid value by providing minimum and maximum endpoints. Ranges accept either an object ",[697,1412,1413],{},"{ min, max }"," or a tuple ",[697,1416,1417],{},"[min, max]"," — pick whichever reads better at the call site.",[784,1420,1421,1681],{},[787,1422,1423],{"icon":789,"label":290},[791,1424,1426],{"className":793,"code":1425,"filename":795,"language":796,"meta":797,"style":797},"import { styleframe } from 'styleframe';\nimport { useFluidViewportDesignTokens, useFluidClamp } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\nconst { variable, ref, selector } = s;\n\n\u002F\u002F Set up fluid viewport range\nuseFluidViewportDesignTokens(s);\n\n\u002F\u002F Create a fluid font size: 16px at mobile, 20px at desktop\nconst fluidFontSize = variable(\n    'font-size',\n    useFluidClamp(s, { min: 16, max: 20 })\n    \u002F\u002F or: useFluidClamp(s, [16, 20])\n);\n\nselector('.text', {\n    fontSize: ref(fluidFontSize)\n});\n\nexport default s;\n",[697,1427,1428,1448,1473,1477,1491,1518,1522,1527,1535,1539,1544,1558,1571,1606,1612,1619,1624,1643,1656,1665,1670],{"__ignoreMap":797},[801,1429,1430,1432,1434,1436,1438,1440,1442,1444,1446],{"class":803,"line":804},[801,1431,808],{"class":807},[801,1433,812],{"class":811},[801,1435,816],{"class":815},[801,1437,819],{"class":811},[801,1439,822],{"class":807},[801,1441,825],{"class":811},[801,1443,829],{"class":828},[801,1445,832],{"class":811},[801,1447,835],{"class":811},[801,1449,1450,1452,1454,1456,1458,1461,1463,1465,1467,1469,1471],{"class":803,"line":838},[801,1451,808],{"class":807},[801,1453,812],{"class":811},[801,1455,845],{"class":815},[801,1457,903],{"class":811},[801,1459,1460],{"class":815}," useFluidClamp",[801,1462,819],{"class":811},[801,1464,822],{"class":807},[801,1466,825],{"class":811},[801,1468,854],{"class":828},[801,1470,832],{"class":811},[801,1472,835],{"class":811},[801,1474,1475],{"class":803,"line":861},[801,1476,864],{"emptyLinePlaceholder":223},[801,1478,1479,1481,1483,1485,1487,1489],{"class":803,"line":867},[801,1480,871],{"class":870},[801,1482,874],{"class":815},[801,1484,877],{"class":811},[801,1486,816],{"class":880},[801,1488,883],{"class":815},[801,1490,835],{"class":811},[801,1492,1493,1495,1497,1500,1502,1505,1507,1510,1512,1514,1516],{"class":803,"line":888},[801,1494,871],{"class":870},[801,1496,812],{"class":811},[801,1498,1499],{"class":815}," variable",[801,1501,903],{"class":811},[801,1503,1504],{"class":815}," ref",[801,1506,903],{"class":811},[801,1508,1509],{"class":815}," selector ",[801,1511,919],{"class":811},[801,1513,922],{"class":811},[801,1515,946],{"class":815},[801,1517,835],{"class":811},[801,1519,1520],{"class":803,"line":893},[801,1521,864],{"emptyLinePlaceholder":223},[801,1523,1524],{"class":803,"line":932},[801,1525,1526],{"class":1239},"\u002F\u002F Set up fluid viewport range\n",[801,1528,1529,1531,1533],{"class":803,"line":937},[801,1530,699],{"class":880},[801,1532,927],{"class":815},[801,1534,835],{"class":811},[801,1536,1537],{"class":803,"line":1292},[801,1538,864],{"emptyLinePlaceholder":223},[801,1540,1541],{"class":803,"line":1306},[801,1542,1543],{"class":1239},"\u002F\u002F Create a fluid font size: 16px at mobile, 20px at desktop\n",[801,1545,1546,1548,1551,1553,1555],{"class":803,"line":1316},[801,1547,871],{"class":870},[801,1549,1550],{"class":815}," fluidFontSize ",[801,1552,877],{"class":811},[801,1554,1499],{"class":880},[801,1556,1557],{"class":815},"(\n",[801,1559,1560,1563,1566,1568],{"class":803,"line":1321},[801,1561,1562],{"class":811},"    '",[801,1564,1565],{"class":828},"font-size",[801,1567,832],{"class":811},[801,1569,1570],{"class":811},",\n",[801,1572,1574,1577,1579,1581,1583,1586,1588,1591,1593,1596,1598,1601,1603],{"class":803,"line":1573},13,[801,1575,1576],{"class":880},"    useFluidClamp",[801,1578,1269],{"class":815},[801,1580,903],{"class":811},[801,1582,812],{"class":811},[801,1584,1585],{"class":1278}," min",[801,1587,963],{"class":811},[801,1589,1590],{"class":979}," 16",[801,1592,903],{"class":811},[801,1594,1595],{"class":1278}," max",[801,1597,963],{"class":811},[801,1599,1600],{"class":979}," 20",[801,1602,819],{"class":811},[801,1604,1605],{"class":815},")\n",[801,1607,1609],{"class":803,"line":1608},14,[801,1610,1611],{"class":1239},"    \u002F\u002F or: useFluidClamp(s, [16, 20])\n",[801,1613,1615,1617],{"class":803,"line":1614},15,[801,1616,1311],{"class":815},[801,1618,835],{"class":811},[801,1620,1622],{"class":803,"line":1621},16,[801,1623,864],{"emptyLinePlaceholder":223},[801,1625,1627,1630,1632,1634,1637,1639,1641],{"class":803,"line":1626},17,[801,1628,1629],{"class":880},"selector",[801,1631,1019],{"class":815},[801,1633,832],{"class":811},[801,1635,1636],{"class":828},".text",[801,1638,832],{"class":811},[801,1640,903],{"class":811},[801,1642,969],{"class":811},[801,1644,1646,1649,1651,1653],{"class":803,"line":1645},18,[801,1647,1648],{"class":1278},"    fontSize",[801,1650,963],{"class":811},[801,1652,1504],{"class":880},[801,1654,1655],{"class":815},"(fluidFontSize)\n",[801,1657,1659,1661,1663],{"class":803,"line":1658},19,[801,1660,919],{"class":811},[801,1662,1311],{"class":815},[801,1664,835],{"class":811},[801,1666,1668],{"class":803,"line":1667},20,[801,1669,864],{"emptyLinePlaceholder":223},[801,1671,1673,1675,1677,1679],{"class":803,"line":1672},21,[801,1674,940],{"class":807},[801,1676,943],{"class":807},[801,1678,946],{"class":815},[801,1680,835],{"class":811},[787,1682,1683],{"icon":154,"label":326},[791,1684,1686],{"className":953,"code":1685,"filename":955,"language":956,"meta":797,"style":797},":root {\n    --fluid--min-width: 320;\n    --fluid--max-width: 1440;\n    --fluid--screen: 100vw;\n    --fluid--breakpoint: calc(...);\n    --font-size: calc(...);\n}\n\n.text {\n    font-size: var(--font-size);\n}\n",[697,1687,1688,1696,1706,1716,1726,1740,1755,1759,1763,1774,1792],{"__ignoreMap":797},[801,1689,1690,1692,1694],{"class":803,"line":804},[801,1691,963],{"class":811},[801,1693,966],{"class":870},[801,1695,969],{"class":811},[801,1697,1698,1700,1702,1704],{"class":803,"line":838},[801,1699,974],{"class":815},[801,1701,963],{"class":811},[801,1703,980],{"class":979},[801,1705,835],{"class":811},[801,1707,1708,1710,1712,1714],{"class":803,"line":861},[801,1709,987],{"class":815},[801,1711,963],{"class":811},[801,1713,992],{"class":979},[801,1715,835],{"class":811},[801,1717,1718,1720,1722,1724],{"class":803,"line":867},[801,1719,999],{"class":815},[801,1721,963],{"class":811},[801,1723,1004],{"class":979},[801,1725,835],{"class":811},[801,1727,1728,1730,1732,1734,1736,1738],{"class":803,"line":888},[801,1729,1011],{"class":815},[801,1731,963],{"class":811},[801,1733,1016],{"class":880},[801,1735,1019],{"class":811},[801,1737,1022],{"class":815},[801,1739,1025],{"class":811},[801,1741,1742,1745,1747,1749,1751,1753],{"class":803,"line":893},[801,1743,1744],{"class":815},"    --font-size",[801,1746,963],{"class":811},[801,1748,1016],{"class":880},[801,1750,1019],{"class":811},[801,1752,1022],{"class":815},[801,1754,1025],{"class":811},[801,1756,1757],{"class":803,"line":932},[801,1758,1030],{"class":811},[801,1760,1761],{"class":803,"line":937},[801,1762,864],{"emptyLinePlaceholder":223},[801,1764,1765,1768,1772],{"class":803,"line":1292},[801,1766,1767],{"class":811},".",[801,1769,1771],{"class":1770},"sBMFI","text",[801,1773,969],{"class":811},[801,1775,1776,1780,1782,1785,1787,1790],{"class":803,"line":1306},[801,1777,1779],{"class":1778},"sqsOY","    font-size",[801,1781,963],{"class":811},[801,1783,1784],{"class":880}," var",[801,1786,1019],{"class":811},[801,1788,1789],{"class":815},"--font-size",[801,1791,1025],{"class":811},[801,1793,1794],{"class":803,"line":1316},[801,1795,1030],{"class":811},[776,1797,1799],{"id":1798},"using-variables-in-ranges","Using Variables in Ranges",[719,1801,1802],{},"You can pass Styleframe variables instead of literal values for more flexible configurations:",[791,1804,1806],{"className":793,"code":1805,"filename":795,"language":796,"meta":797,"style":797},"import { styleframe } from 'styleframe';\nimport { useFluidViewportDesignTokens, useFluidClamp } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\nconst { variable, ref } = s;\n\nuseFluidViewportDesignTokens(s);\n\n\u002F\u002F Define min\u002Fmax as variables\nconst fontSizeMin = variable('font-size.min', 16);\nconst fontSizeMax = variable('font-size.max', 20);\n\nconst fontSize = variable(\n    'font-size',\n    useFluidClamp(s, { min: ref(fontSizeMin), max: ref(fontSizeMax) })\n);\n\nexport default s;\n",[697,1807,1808,1828,1852,1856,1870,1891,1895,1903,1907,1912,1940,1968,1972,1985,1995,2029,2035,2039],{"__ignoreMap":797},[801,1809,1810,1812,1814,1816,1818,1820,1822,1824,1826],{"class":803,"line":804},[801,1811,808],{"class":807},[801,1813,812],{"class":811},[801,1815,816],{"class":815},[801,1817,819],{"class":811},[801,1819,822],{"class":807},[801,1821,825],{"class":811},[801,1823,829],{"class":828},[801,1825,832],{"class":811},[801,1827,835],{"class":811},[801,1829,1830,1832,1834,1836,1838,1840,1842,1844,1846,1848,1850],{"class":803,"line":838},[801,1831,808],{"class":807},[801,1833,812],{"class":811},[801,1835,845],{"class":815},[801,1837,903],{"class":811},[801,1839,1460],{"class":815},[801,1841,819],{"class":811},[801,1843,822],{"class":807},[801,1845,825],{"class":811},[801,1847,854],{"class":828},[801,1849,832],{"class":811},[801,1851,835],{"class":811},[801,1853,1854],{"class":803,"line":861},[801,1855,864],{"emptyLinePlaceholder":223},[801,1857,1858,1860,1862,1864,1866,1868],{"class":803,"line":867},[801,1859,871],{"class":870},[801,1861,874],{"class":815},[801,1863,877],{"class":811},[801,1865,816],{"class":880},[801,1867,883],{"class":815},[801,1869,835],{"class":811},[801,1871,1872,1874,1876,1878,1880,1883,1885,1887,1889],{"class":803,"line":888},[801,1873,871],{"class":870},[801,1875,812],{"class":811},[801,1877,1499],{"class":815},[801,1879,903],{"class":811},[801,1881,1882],{"class":815}," ref ",[801,1884,919],{"class":811},[801,1886,922],{"class":811},[801,1888,946],{"class":815},[801,1890,835],{"class":811},[801,1892,1893],{"class":803,"line":893},[801,1894,864],{"emptyLinePlaceholder":223},[801,1896,1897,1899,1901],{"class":803,"line":932},[801,1898,699],{"class":880},[801,1900,927],{"class":815},[801,1902,835],{"class":811},[801,1904,1905],{"class":803,"line":937},[801,1906,864],{"emptyLinePlaceholder":223},[801,1908,1909],{"class":803,"line":1292},[801,1910,1911],{"class":1239},"\u002F\u002F Define min\u002Fmax as variables\n",[801,1913,1914,1916,1919,1921,1923,1925,1927,1930,1932,1934,1936,1938],{"class":803,"line":1306},[801,1915,871],{"class":870},[801,1917,1918],{"class":815}," fontSizeMin ",[801,1920,877],{"class":811},[801,1922,1499],{"class":880},[801,1924,1019],{"class":815},[801,1926,832],{"class":811},[801,1928,1929],{"class":828},"font-size.min",[801,1931,832],{"class":811},[801,1933,903],{"class":811},[801,1935,1590],{"class":979},[801,1937,1311],{"class":815},[801,1939,835],{"class":811},[801,1941,1942,1944,1947,1949,1951,1953,1955,1958,1960,1962,1964,1966],{"class":803,"line":1316},[801,1943,871],{"class":870},[801,1945,1946],{"class":815}," fontSizeMax ",[801,1948,877],{"class":811},[801,1950,1499],{"class":880},[801,1952,1019],{"class":815},[801,1954,832],{"class":811},[801,1956,1957],{"class":828},"font-size.max",[801,1959,832],{"class":811},[801,1961,903],{"class":811},[801,1963,1600],{"class":979},[801,1965,1311],{"class":815},[801,1967,835],{"class":811},[801,1969,1970],{"class":803,"line":1321},[801,1971,864],{"emptyLinePlaceholder":223},[801,1973,1974,1976,1979,1981,1983],{"class":803,"line":1573},[801,1975,871],{"class":870},[801,1977,1978],{"class":815}," fontSize ",[801,1980,877],{"class":811},[801,1982,1499],{"class":880},[801,1984,1557],{"class":815},[801,1986,1987,1989,1991,1993],{"class":803,"line":1608},[801,1988,1562],{"class":811},[801,1990,1565],{"class":828},[801,1992,832],{"class":811},[801,1994,1570],{"class":811},[801,1996,1997,1999,2001,2003,2005,2007,2009,2011,2014,2016,2018,2020,2022,2025,2027],{"class":803,"line":1614},[801,1998,1576],{"class":880},[801,2000,1269],{"class":815},[801,2002,903],{"class":811},[801,2004,812],{"class":811},[801,2006,1585],{"class":1278},[801,2008,963],{"class":811},[801,2010,1504],{"class":880},[801,2012,2013],{"class":815},"(fontSizeMin)",[801,2015,903],{"class":811},[801,2017,1595],{"class":1278},[801,2019,963],{"class":811},[801,2021,1504],{"class":880},[801,2023,2024],{"class":815},"(fontSizeMax) ",[801,2026,919],{"class":811},[801,2028,1605],{"class":815},[801,2030,2031,2033],{"class":803,"line":1621},[801,2032,1311],{"class":815},[801,2034,835],{"class":811},[801,2036,2037],{"class":803,"line":1626},[801,2038,864],{"emptyLinePlaceholder":223},[801,2040,2041,2043,2045,2047],{"class":803,"line":1645},[801,2042,940],{"class":807},[801,2044,943],{"class":807},[801,2046,946],{"class":815},[801,2048,835],{"class":811},[715,2050,2052],{"id":2051},"using-viewport-variables","Using Viewport Variables",[719,2054,2055],{},"Once you've set up your fluid viewport range and created fluid values, you can reference them throughout your theme:",[791,2057,2059],{"className":793,"code":2058,"filename":795,"language":796,"meta":797,"style":797},"import { styleframe } from 'styleframe';\nimport { useFluidViewportDesignTokens, useFluidClamp } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\nconst { variable, ref, selector } = s;\n\n\u002F\u002F Set up viewport range\nuseFluidViewportDesignTokens(s);\n\n\u002F\u002F Create fluid design tokens\nconst spacing = variable('spacing', useFluidClamp(s, { min: 16, max: 24 }));\nconst fontSize = variable('font-size', useFluidClamp(s, { min: 16, max: 18 }));\nconst borderRadius = variable('border-radius', useFluidClamp(s, { min: 8, max: 12 }));\n\n\u002F\u002F Use in selectors\nselector('.card', {\n    padding: ref(spacing),\n    fontSize: ref(fontSize),\n    borderRadius: ref(borderRadius)\n});\n\nselector('.container', {\n    gap: ref(spacing),\n    marginBlock: ref(spacing)\n});\n\nexport default s;\n",[697,2060,2061,2081,2105,2109,2123,2147,2151,2156,2164,2168,2173,2225,2274,2326,2330,2335,2352,2366,2379,2391,2399,2403,2421,2435,2448,2457,2462],{"__ignoreMap":797},[801,2062,2063,2065,2067,2069,2071,2073,2075,2077,2079],{"class":803,"line":804},[801,2064,808],{"class":807},[801,2066,812],{"class":811},[801,2068,816],{"class":815},[801,2070,819],{"class":811},[801,2072,822],{"class":807},[801,2074,825],{"class":811},[801,2076,829],{"class":828},[801,2078,832],{"class":811},[801,2080,835],{"class":811},[801,2082,2083,2085,2087,2089,2091,2093,2095,2097,2099,2101,2103],{"class":803,"line":838},[801,2084,808],{"class":807},[801,2086,812],{"class":811},[801,2088,845],{"class":815},[801,2090,903],{"class":811},[801,2092,1460],{"class":815},[801,2094,819],{"class":811},[801,2096,822],{"class":807},[801,2098,825],{"class":811},[801,2100,854],{"class":828},[801,2102,832],{"class":811},[801,2104,835],{"class":811},[801,2106,2107],{"class":803,"line":861},[801,2108,864],{"emptyLinePlaceholder":223},[801,2110,2111,2113,2115,2117,2119,2121],{"class":803,"line":867},[801,2112,871],{"class":870},[801,2114,874],{"class":815},[801,2116,877],{"class":811},[801,2118,816],{"class":880},[801,2120,883],{"class":815},[801,2122,835],{"class":811},[801,2124,2125,2127,2129,2131,2133,2135,2137,2139,2141,2143,2145],{"class":803,"line":888},[801,2126,871],{"class":870},[801,2128,812],{"class":811},[801,2130,1499],{"class":815},[801,2132,903],{"class":811},[801,2134,1504],{"class":815},[801,2136,903],{"class":811},[801,2138,1509],{"class":815},[801,2140,919],{"class":811},[801,2142,922],{"class":811},[801,2144,946],{"class":815},[801,2146,835],{"class":811},[801,2148,2149],{"class":803,"line":893},[801,2150,864],{"emptyLinePlaceholder":223},[801,2152,2153],{"class":803,"line":932},[801,2154,2155],{"class":1239},"\u002F\u002F Set up viewport range\n",[801,2157,2158,2160,2162],{"class":803,"line":937},[801,2159,699],{"class":880},[801,2161,927],{"class":815},[801,2163,835],{"class":811},[801,2165,2166],{"class":803,"line":1292},[801,2167,864],{"emptyLinePlaceholder":223},[801,2169,2170],{"class":803,"line":1306},[801,2171,2172],{"class":1239},"\u002F\u002F Create fluid design tokens\n",[801,2174,2175,2177,2180,2182,2184,2186,2188,2191,2193,2195,2197,2199,2201,2203,2205,2207,2209,2211,2213,2215,2218,2220,2223],{"class":803,"line":1316},[801,2176,871],{"class":870},[801,2178,2179],{"class":815}," spacing ",[801,2181,877],{"class":811},[801,2183,1499],{"class":880},[801,2185,1019],{"class":815},[801,2187,832],{"class":811},[801,2189,2190],{"class":828},"spacing",[801,2192,832],{"class":811},[801,2194,903],{"class":811},[801,2196,1460],{"class":880},[801,2198,1269],{"class":815},[801,2200,903],{"class":811},[801,2202,812],{"class":811},[801,2204,1585],{"class":1278},[801,2206,963],{"class":811},[801,2208,1590],{"class":979},[801,2210,903],{"class":811},[801,2212,1595],{"class":1278},[801,2214,963],{"class":811},[801,2216,2217],{"class":979}," 24",[801,2219,819],{"class":811},[801,2221,2222],{"class":815},"))",[801,2224,835],{"class":811},[801,2226,2227,2229,2231,2233,2235,2237,2239,2241,2243,2245,2247,2249,2251,2253,2255,2257,2259,2261,2263,2265,2268,2270,2272],{"class":803,"line":1321},[801,2228,871],{"class":870},[801,2230,1978],{"class":815},[801,2232,877],{"class":811},[801,2234,1499],{"class":880},[801,2236,1019],{"class":815},[801,2238,832],{"class":811},[801,2240,1565],{"class":828},[801,2242,832],{"class":811},[801,2244,903],{"class":811},[801,2246,1460],{"class":880},[801,2248,1269],{"class":815},[801,2250,903],{"class":811},[801,2252,812],{"class":811},[801,2254,1585],{"class":1278},[801,2256,963],{"class":811},[801,2258,1590],{"class":979},[801,2260,903],{"class":811},[801,2262,1595],{"class":1278},[801,2264,963],{"class":811},[801,2266,2267],{"class":979}," 18",[801,2269,819],{"class":811},[801,2271,2222],{"class":815},[801,2273,835],{"class":811},[801,2275,2276,2278,2281,2283,2285,2287,2289,2292,2294,2296,2298,2300,2302,2304,2306,2308,2311,2313,2315,2317,2320,2322,2324],{"class":803,"line":1573},[801,2277,871],{"class":870},[801,2279,2280],{"class":815}," borderRadius ",[801,2282,877],{"class":811},[801,2284,1499],{"class":880},[801,2286,1019],{"class":815},[801,2288,832],{"class":811},[801,2290,2291],{"class":828},"border-radius",[801,2293,832],{"class":811},[801,2295,903],{"class":811},[801,2297,1460],{"class":880},[801,2299,1269],{"class":815},[801,2301,903],{"class":811},[801,2303,812],{"class":811},[801,2305,1585],{"class":1278},[801,2307,963],{"class":811},[801,2309,2310],{"class":979}," 8",[801,2312,903],{"class":811},[801,2314,1595],{"class":1278},[801,2316,963],{"class":811},[801,2318,2319],{"class":979}," 12",[801,2321,819],{"class":811},[801,2323,2222],{"class":815},[801,2325,835],{"class":811},[801,2327,2328],{"class":803,"line":1608},[801,2329,864],{"emptyLinePlaceholder":223},[801,2331,2332],{"class":803,"line":1614},[801,2333,2334],{"class":1239},"\u002F\u002F Use in selectors\n",[801,2336,2337,2339,2341,2343,2346,2348,2350],{"class":803,"line":1621},[801,2338,1629],{"class":880},[801,2340,1019],{"class":815},[801,2342,832],{"class":811},[801,2344,2345],{"class":828},".card",[801,2347,832],{"class":811},[801,2349,903],{"class":811},[801,2351,969],{"class":811},[801,2353,2354,2357,2359,2361,2364],{"class":803,"line":1626},[801,2355,2356],{"class":1278},"    padding",[801,2358,963],{"class":811},[801,2360,1504],{"class":880},[801,2362,2363],{"class":815},"(spacing)",[801,2365,1570],{"class":811},[801,2367,2368,2370,2372,2374,2377],{"class":803,"line":1645},[801,2369,1648],{"class":1278},[801,2371,963],{"class":811},[801,2373,1504],{"class":880},[801,2375,2376],{"class":815},"(fontSize)",[801,2378,1570],{"class":811},[801,2380,2381,2384,2386,2388],{"class":803,"line":1658},[801,2382,2383],{"class":1278},"    borderRadius",[801,2385,963],{"class":811},[801,2387,1504],{"class":880},[801,2389,2390],{"class":815},"(borderRadius)\n",[801,2392,2393,2395,2397],{"class":803,"line":1667},[801,2394,919],{"class":811},[801,2396,1311],{"class":815},[801,2398,835],{"class":811},[801,2400,2401],{"class":803,"line":1672},[801,2402,864],{"emptyLinePlaceholder":223},[801,2404,2406,2408,2410,2412,2415,2417,2419],{"class":803,"line":2405},22,[801,2407,1629],{"class":880},[801,2409,1019],{"class":815},[801,2411,832],{"class":811},[801,2413,2414],{"class":828},".container",[801,2416,832],{"class":811},[801,2418,903],{"class":811},[801,2420,969],{"class":811},[801,2422,2424,2427,2429,2431,2433],{"class":803,"line":2423},23,[801,2425,2426],{"class":1278},"    gap",[801,2428,963],{"class":811},[801,2430,1504],{"class":880},[801,2432,2363],{"class":815},[801,2434,1570],{"class":811},[801,2436,2438,2441,2443,2445],{"class":803,"line":2437},24,[801,2439,2440],{"class":1278},"    marginBlock",[801,2442,963],{"class":811},[801,2444,1504],{"class":880},[801,2446,2447],{"class":815},"(spacing)\n",[801,2449,2451,2453,2455],{"class":803,"line":2450},25,[801,2452,919],{"class":811},[801,2454,1311],{"class":815},[801,2456,835],{"class":811},[801,2458,2460],{"class":803,"line":2459},26,[801,2461,864],{"emptyLinePlaceholder":223},[801,2463,2465,2467,2469,2471],{"class":803,"line":2464},27,[801,2466,940],{"class":807},[801,2468,943],{"class":807},[801,2470,946],{"class":815},[801,2472,835],{"class":811},[719,2474,2475],{},"Generated CSS:",[791,2477,2479],{"className":953,"code":2478,"filename":955,"language":956,"meta":797,"style":797},":root {\n    --fluid--min-width: 320;\n    --fluid--max-width: 1440;\n    --fluid--screen: 100vw;\n    --fluid--breakpoint: calc(...);\n    --spacing: calc(...);\n    --font-size: calc(...);\n    --border-radius: calc(...);\n}\n\n.card {\n    padding: var(--spacing);\n    font-size: var(--font-size);\n    border-radius: var(--border-radius);\n}\n\n.container {\n    gap: var(--spacing);\n    margin-block: var(--spacing);\n}\n",[697,2480,2481,2489,2499,2509,2519,2533,2548,2562,2577,2581,2585,2594,2609,2623,2639,2643,2647,2656,2670,2685],{"__ignoreMap":797},[801,2482,2483,2485,2487],{"class":803,"line":804},[801,2484,963],{"class":811},[801,2486,966],{"class":870},[801,2488,969],{"class":811},[801,2490,2491,2493,2495,2497],{"class":803,"line":838},[801,2492,974],{"class":815},[801,2494,963],{"class":811},[801,2496,980],{"class":979},[801,2498,835],{"class":811},[801,2500,2501,2503,2505,2507],{"class":803,"line":861},[801,2502,987],{"class":815},[801,2504,963],{"class":811},[801,2506,992],{"class":979},[801,2508,835],{"class":811},[801,2510,2511,2513,2515,2517],{"class":803,"line":867},[801,2512,999],{"class":815},[801,2514,963],{"class":811},[801,2516,1004],{"class":979},[801,2518,835],{"class":811},[801,2520,2521,2523,2525,2527,2529,2531],{"class":803,"line":888},[801,2522,1011],{"class":815},[801,2524,963],{"class":811},[801,2526,1016],{"class":880},[801,2528,1019],{"class":811},[801,2530,1022],{"class":815},[801,2532,1025],{"class":811},[801,2534,2535,2538,2540,2542,2544,2546],{"class":803,"line":893},[801,2536,2537],{"class":815},"    --spacing",[801,2539,963],{"class":811},[801,2541,1016],{"class":880},[801,2543,1019],{"class":811},[801,2545,1022],{"class":815},[801,2547,1025],{"class":811},[801,2549,2550,2552,2554,2556,2558,2560],{"class":803,"line":932},[801,2551,1744],{"class":815},[801,2553,963],{"class":811},[801,2555,1016],{"class":880},[801,2557,1019],{"class":811},[801,2559,1022],{"class":815},[801,2561,1025],{"class":811},[801,2563,2564,2567,2569,2571,2573,2575],{"class":803,"line":937},[801,2565,2566],{"class":815},"    --border-radius",[801,2568,963],{"class":811},[801,2570,1016],{"class":880},[801,2572,1019],{"class":811},[801,2574,1022],{"class":815},[801,2576,1025],{"class":811},[801,2578,2579],{"class":803,"line":1292},[801,2580,1030],{"class":811},[801,2582,2583],{"class":803,"line":1306},[801,2584,864],{"emptyLinePlaceholder":223},[801,2586,2587,2589,2592],{"class":803,"line":1316},[801,2588,1767],{"class":811},[801,2590,2591],{"class":1770},"card",[801,2593,969],{"class":811},[801,2595,2596,2598,2600,2602,2604,2607],{"class":803,"line":1321},[801,2597,2356],{"class":1778},[801,2599,963],{"class":811},[801,2601,1784],{"class":880},[801,2603,1019],{"class":811},[801,2605,2606],{"class":815},"--spacing",[801,2608,1025],{"class":811},[801,2610,2611,2613,2615,2617,2619,2621],{"class":803,"line":1573},[801,2612,1779],{"class":1778},[801,2614,963],{"class":811},[801,2616,1784],{"class":880},[801,2618,1019],{"class":811},[801,2620,1789],{"class":815},[801,2622,1025],{"class":811},[801,2624,2625,2628,2630,2632,2634,2637],{"class":803,"line":1608},[801,2626,2627],{"class":1778},"    border-radius",[801,2629,963],{"class":811},[801,2631,1784],{"class":880},[801,2633,1019],{"class":811},[801,2635,2636],{"class":815},"--border-radius",[801,2638,1025],{"class":811},[801,2640,2641],{"class":803,"line":1614},[801,2642,1030],{"class":811},[801,2644,2645],{"class":803,"line":1621},[801,2646,864],{"emptyLinePlaceholder":223},[801,2648,2649,2651,2654],{"class":803,"line":1626},[801,2650,1767],{"class":811},[801,2652,2653],{"class":1770},"container",[801,2655,969],{"class":811},[801,2657,2658,2660,2662,2664,2666,2668],{"class":803,"line":1645},[801,2659,2426],{"class":1778},[801,2661,963],{"class":811},[801,2663,1784],{"class":880},[801,2665,1019],{"class":811},[801,2667,2606],{"class":815},[801,2669,1025],{"class":811},[801,2671,2672,2675,2677,2679,2681,2683],{"class":803,"line":1658},[801,2673,2674],{"class":1778},"    margin-block",[801,2676,963],{"class":811},[801,2678,1784],{"class":880},[801,2680,1019],{"class":811},[801,2682,2606],{"class":815},[801,2684,1025],{"class":811},[801,2686,2687],{"class":803,"line":1667},[801,2688,1030],{"class":811},[715,2690,2692],{"id":2691},"examples","Examples",[776,2694,2696],{"id":2695},"complete-fluid-spacing-system","Complete Fluid Spacing System",[719,2698,2699],{},"Create a comprehensive fluid spacing scale that adapts to viewport size:",[784,2701,2702,3345],{},[787,2703,2704],{"icon":789,"label":290},[791,2705,2707],{"className":793,"code":2706,"filename":795,"language":796,"meta":797,"style":797},"import { styleframe } from 'styleframe';\nimport { useFluidViewportDesignTokens, useFluidClamp } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\nconst { variable, ref, selector } = s;\n\nuseFluidViewportDesignTokens(s);\n\n\u002F\u002F Create fluid spacing scale\nconst {\n    spacing,\n    spacingXs,\n    spacingSm,\n    spacingMd,\n    spacingLg,\n    spacingXl,\n} = useSpacingDesignTokens(s, {\n    xs: useFluidClamp(s, { min: 4, max: 6 }),\n    sm: useFluidClamp(s, { min: 8, max: 12 }),\n    md: useFluidClamp(s, { min: 16, max: 24 }),\n    lg: useFluidClamp(s, { min: 24, max: 32 }),\n    xl: useFluidClamp(s, { min: 32, max: 48 }),\n    default: '@font-size.md'\n})\n\n\u002F\u002F Apply to components\nselector('.container', {\n    padding: ref(spacing),\n    gap: ref(spacingMd)\n});\n\nselector('.section', {\n    marginTop: ref(spacingXl),\n    marginBottom: ref(spacingLg)\n});\n\nselector('.hero', {\n    paddingBlock: ref(spacing3xl),\n    paddingInline: ref(spacing2xl)\n});\n\nselector('.button', {\n    paddingBlock: ref(spacingSm),\n    paddingInline: ref(spacing),\n    gap: ref(spacingXs)\n});\n\nexport default s;\n",[697,2708,2709,2729,2753,2757,2771,2795,2799,2807,2811,2816,2822,2829,2836,2843,2850,2857,2864,2879,2916,2951,2986,3022,3058,3073,3079,3083,3088,3104,3117,3129,3138,3143,3161,3176,3189,3198,3203,3221,3236,3249,3258,3263,3281,3295,3308,3320,3329,3334],{"__ignoreMap":797},[801,2710,2711,2713,2715,2717,2719,2721,2723,2725,2727],{"class":803,"line":804},[801,2712,808],{"class":807},[801,2714,812],{"class":811},[801,2716,816],{"class":815},[801,2718,819],{"class":811},[801,2720,822],{"class":807},[801,2722,825],{"class":811},[801,2724,829],{"class":828},[801,2726,832],{"class":811},[801,2728,835],{"class":811},[801,2730,2731,2733,2735,2737,2739,2741,2743,2745,2747,2749,2751],{"class":803,"line":838},[801,2732,808],{"class":807},[801,2734,812],{"class":811},[801,2736,845],{"class":815},[801,2738,903],{"class":811},[801,2740,1460],{"class":815},[801,2742,819],{"class":811},[801,2744,822],{"class":807},[801,2746,825],{"class":811},[801,2748,854],{"class":828},[801,2750,832],{"class":811},[801,2752,835],{"class":811},[801,2754,2755],{"class":803,"line":861},[801,2756,864],{"emptyLinePlaceholder":223},[801,2758,2759,2761,2763,2765,2767,2769],{"class":803,"line":867},[801,2760,871],{"class":870},[801,2762,874],{"class":815},[801,2764,877],{"class":811},[801,2766,816],{"class":880},[801,2768,883],{"class":815},[801,2770,835],{"class":811},[801,2772,2773,2775,2777,2779,2781,2783,2785,2787,2789,2791,2793],{"class":803,"line":888},[801,2774,871],{"class":870},[801,2776,812],{"class":811},[801,2778,1499],{"class":815},[801,2780,903],{"class":811},[801,2782,1504],{"class":815},[801,2784,903],{"class":811},[801,2786,1509],{"class":815},[801,2788,919],{"class":811},[801,2790,922],{"class":811},[801,2792,946],{"class":815},[801,2794,835],{"class":811},[801,2796,2797],{"class":803,"line":893},[801,2798,864],{"emptyLinePlaceholder":223},[801,2800,2801,2803,2805],{"class":803,"line":932},[801,2802,699],{"class":880},[801,2804,927],{"class":815},[801,2806,835],{"class":811},[801,2808,2809],{"class":803,"line":937},[801,2810,864],{"emptyLinePlaceholder":223},[801,2812,2813],{"class":803,"line":1292},[801,2814,2815],{"class":1239},"\u002F\u002F Create fluid spacing scale\n",[801,2817,2818,2820],{"class":803,"line":1306},[801,2819,871],{"class":870},[801,2821,969],{"class":811},[801,2823,2824,2827],{"class":803,"line":1316},[801,2825,2826],{"class":815},"    spacing",[801,2828,1570],{"class":811},[801,2830,2831,2834],{"class":803,"line":1321},[801,2832,2833],{"class":815},"    spacingXs",[801,2835,1570],{"class":811},[801,2837,2838,2841],{"class":803,"line":1573},[801,2839,2840],{"class":815},"    spacingSm",[801,2842,1570],{"class":811},[801,2844,2845,2848],{"class":803,"line":1608},[801,2846,2847],{"class":815},"    spacingMd",[801,2849,1570],{"class":811},[801,2851,2852,2855],{"class":803,"line":1614},[801,2853,2854],{"class":815},"    spacingLg",[801,2856,1570],{"class":811},[801,2858,2859,2862],{"class":803,"line":1621},[801,2860,2861],{"class":815},"    spacingXl",[801,2863,1570],{"class":811},[801,2865,2866,2868,2870,2873,2875,2877],{"class":803,"line":1626},[801,2867,919],{"class":811},[801,2869,922],{"class":811},[801,2871,2872],{"class":880}," useSpacingDesignTokens",[801,2874,1269],{"class":815},[801,2876,903],{"class":811},[801,2878,969],{"class":811},[801,2880,2881,2884,2886,2888,2890,2892,2894,2896,2898,2901,2903,2905,2907,2910,2912,2914],{"class":803,"line":1645},[801,2882,2883],{"class":1278},"    xs",[801,2885,963],{"class":811},[801,2887,1460],{"class":880},[801,2889,1269],{"class":815},[801,2891,903],{"class":811},[801,2893,812],{"class":811},[801,2895,1585],{"class":1278},[801,2897,963],{"class":811},[801,2899,2900],{"class":979}," 4",[801,2902,903],{"class":811},[801,2904,1595],{"class":1278},[801,2906,963],{"class":811},[801,2908,2909],{"class":979}," 6",[801,2911,819],{"class":811},[801,2913,1311],{"class":815},[801,2915,1570],{"class":811},[801,2917,2918,2921,2923,2925,2927,2929,2931,2933,2935,2937,2939,2941,2943,2945,2947,2949],{"class":803,"line":1658},[801,2919,2920],{"class":1278},"    sm",[801,2922,963],{"class":811},[801,2924,1460],{"class":880},[801,2926,1269],{"class":815},[801,2928,903],{"class":811},[801,2930,812],{"class":811},[801,2932,1585],{"class":1278},[801,2934,963],{"class":811},[801,2936,2310],{"class":979},[801,2938,903],{"class":811},[801,2940,1595],{"class":1278},[801,2942,963],{"class":811},[801,2944,2319],{"class":979},[801,2946,819],{"class":811},[801,2948,1311],{"class":815},[801,2950,1570],{"class":811},[801,2952,2953,2956,2958,2960,2962,2964,2966,2968,2970,2972,2974,2976,2978,2980,2982,2984],{"class":803,"line":1667},[801,2954,2955],{"class":1278},"    md",[801,2957,963],{"class":811},[801,2959,1460],{"class":880},[801,2961,1269],{"class":815},[801,2963,903],{"class":811},[801,2965,812],{"class":811},[801,2967,1585],{"class":1278},[801,2969,963],{"class":811},[801,2971,1590],{"class":979},[801,2973,903],{"class":811},[801,2975,1595],{"class":1278},[801,2977,963],{"class":811},[801,2979,2217],{"class":979},[801,2981,819],{"class":811},[801,2983,1311],{"class":815},[801,2985,1570],{"class":811},[801,2987,2988,2991,2993,2995,2997,2999,3001,3003,3005,3007,3009,3011,3013,3016,3018,3020],{"class":803,"line":1672},[801,2989,2990],{"class":1278},"    lg",[801,2992,963],{"class":811},[801,2994,1460],{"class":880},[801,2996,1269],{"class":815},[801,2998,903],{"class":811},[801,3000,812],{"class":811},[801,3002,1585],{"class":1278},[801,3004,963],{"class":811},[801,3006,2217],{"class":979},[801,3008,903],{"class":811},[801,3010,1595],{"class":1278},[801,3012,963],{"class":811},[801,3014,3015],{"class":979}," 32",[801,3017,819],{"class":811},[801,3019,1311],{"class":815},[801,3021,1570],{"class":811},[801,3023,3024,3027,3029,3031,3033,3035,3037,3039,3041,3043,3045,3047,3049,3052,3054,3056],{"class":803,"line":2405},[801,3025,3026],{"class":1278},"    xl",[801,3028,963],{"class":811},[801,3030,1460],{"class":880},[801,3032,1269],{"class":815},[801,3034,903],{"class":811},[801,3036,812],{"class":811},[801,3038,1585],{"class":1278},[801,3040,963],{"class":811},[801,3042,3015],{"class":979},[801,3044,903],{"class":811},[801,3046,1595],{"class":1278},[801,3048,963],{"class":811},[801,3050,3051],{"class":979}," 48",[801,3053,819],{"class":811},[801,3055,1311],{"class":815},[801,3057,1570],{"class":811},[801,3059,3060,3063,3065,3067,3070],{"class":803,"line":2423},[801,3061,3062],{"class":1278},"    default",[801,3064,963],{"class":811},[801,3066,825],{"class":811},[801,3068,3069],{"class":828},"@font-size.md",[801,3071,3072],{"class":811},"'\n",[801,3074,3075,3077],{"class":803,"line":2437},[801,3076,919],{"class":811},[801,3078,1605],{"class":815},[801,3080,3081],{"class":803,"line":2450},[801,3082,864],{"emptyLinePlaceholder":223},[801,3084,3085],{"class":803,"line":2459},[801,3086,3087],{"class":1239},"\u002F\u002F Apply to components\n",[801,3089,3090,3092,3094,3096,3098,3100,3102],{"class":803,"line":2464},[801,3091,1629],{"class":880},[801,3093,1019],{"class":815},[801,3095,832],{"class":811},[801,3097,2414],{"class":828},[801,3099,832],{"class":811},[801,3101,903],{"class":811},[801,3103,969],{"class":811},[801,3105,3107,3109,3111,3113,3115],{"class":803,"line":3106},28,[801,3108,2356],{"class":1278},[801,3110,963],{"class":811},[801,3112,1504],{"class":880},[801,3114,2363],{"class":815},[801,3116,1570],{"class":811},[801,3118,3120,3122,3124,3126],{"class":803,"line":3119},29,[801,3121,2426],{"class":1278},[801,3123,963],{"class":811},[801,3125,1504],{"class":880},[801,3127,3128],{"class":815},"(spacingMd)\n",[801,3130,3132,3134,3136],{"class":803,"line":3131},30,[801,3133,919],{"class":811},[801,3135,1311],{"class":815},[801,3137,835],{"class":811},[801,3139,3141],{"class":803,"line":3140},31,[801,3142,864],{"emptyLinePlaceholder":223},[801,3144,3146,3148,3150,3152,3155,3157,3159],{"class":803,"line":3145},32,[801,3147,1629],{"class":880},[801,3149,1019],{"class":815},[801,3151,832],{"class":811},[801,3153,3154],{"class":828},".section",[801,3156,832],{"class":811},[801,3158,903],{"class":811},[801,3160,969],{"class":811},[801,3162,3164,3167,3169,3171,3174],{"class":803,"line":3163},33,[801,3165,3166],{"class":1278},"    marginTop",[801,3168,963],{"class":811},[801,3170,1504],{"class":880},[801,3172,3173],{"class":815},"(spacingXl)",[801,3175,1570],{"class":811},[801,3177,3179,3182,3184,3186],{"class":803,"line":3178},34,[801,3180,3181],{"class":1278},"    marginBottom",[801,3183,963],{"class":811},[801,3185,1504],{"class":880},[801,3187,3188],{"class":815},"(spacingLg)\n",[801,3190,3192,3194,3196],{"class":803,"line":3191},35,[801,3193,919],{"class":811},[801,3195,1311],{"class":815},[801,3197,835],{"class":811},[801,3199,3201],{"class":803,"line":3200},36,[801,3202,864],{"emptyLinePlaceholder":223},[801,3204,3206,3208,3210,3212,3215,3217,3219],{"class":803,"line":3205},37,[801,3207,1629],{"class":880},[801,3209,1019],{"class":815},[801,3211,832],{"class":811},[801,3213,3214],{"class":828},".hero",[801,3216,832],{"class":811},[801,3218,903],{"class":811},[801,3220,969],{"class":811},[801,3222,3224,3227,3229,3231,3234],{"class":803,"line":3223},38,[801,3225,3226],{"class":1278},"    paddingBlock",[801,3228,963],{"class":811},[801,3230,1504],{"class":880},[801,3232,3233],{"class":815},"(spacing3xl)",[801,3235,1570],{"class":811},[801,3237,3239,3242,3244,3246],{"class":803,"line":3238},39,[801,3240,3241],{"class":1278},"    paddingInline",[801,3243,963],{"class":811},[801,3245,1504],{"class":880},[801,3247,3248],{"class":815},"(spacing2xl)\n",[801,3250,3252,3254,3256],{"class":803,"line":3251},40,[801,3253,919],{"class":811},[801,3255,1311],{"class":815},[801,3257,835],{"class":811},[801,3259,3261],{"class":803,"line":3260},41,[801,3262,864],{"emptyLinePlaceholder":223},[801,3264,3266,3268,3270,3272,3275,3277,3279],{"class":803,"line":3265},42,[801,3267,1629],{"class":880},[801,3269,1019],{"class":815},[801,3271,832],{"class":811},[801,3273,3274],{"class":828},".button",[801,3276,832],{"class":811},[801,3278,903],{"class":811},[801,3280,969],{"class":811},[801,3282,3284,3286,3288,3290,3293],{"class":803,"line":3283},43,[801,3285,3226],{"class":1278},[801,3287,963],{"class":811},[801,3289,1504],{"class":880},[801,3291,3292],{"class":815},"(spacingSm)",[801,3294,1570],{"class":811},[801,3296,3298,3300,3302,3304,3306],{"class":803,"line":3297},44,[801,3299,3241],{"class":1278},[801,3301,963],{"class":811},[801,3303,1504],{"class":880},[801,3305,2363],{"class":815},[801,3307,1570],{"class":811},[801,3309,3311,3313,3315,3317],{"class":803,"line":3310},45,[801,3312,2426],{"class":1278},[801,3314,963],{"class":811},[801,3316,1504],{"class":880},[801,3318,3319],{"class":815},"(spacingXs)\n",[801,3321,3323,3325,3327],{"class":803,"line":3322},46,[801,3324,919],{"class":811},[801,3326,1311],{"class":815},[801,3328,835],{"class":811},[801,3330,3332],{"class":803,"line":3331},47,[801,3333,864],{"emptyLinePlaceholder":223},[801,3335,3337,3339,3341,3343],{"class":803,"line":3336},48,[801,3338,940],{"class":807},[801,3340,943],{"class":807},[801,3342,946],{"class":815},[801,3344,835],{"class":811},[787,3346,3347],{"icon":154,"label":326},[791,3348,3350],{"className":953,"code":3349,"filename":955,"language":956,"meta":797,"style":797},":root {\n    --fluid--min-width: 320;\n    --fluid--max-width: 1440;\n    --fluid--screen: 100vw;\n    --fluid--breakpoint: calc(...);\n    --spacing--xs: calc(...);\n    --spacing--sm: calc(...);\n    --spacing--md: calc(...);\n    --spacing--lg: calc(...);\n    --spacing--xl: calc(...);\n    --spacing: calc(...);\n}\n\n.container {\n    padding: var(--spacing);\n    gap: var(--spacing--md);\n}\n\n.section {\n    margin-top: var(--spacing--xl);\n    margin-bottom: var(--spacing--lg);\n}\n\n.hero {\n    padding-block: var(--spacing--3xl);\n    padding-inline: var(--spacing--2xl);\n}\n\n.button {\n    padding-block: var(--spacing--sm);\n    padding-inline: var(--spacing);\n    gap: var(--spacing--xs);\n}\n",[697,3351,3352,3360,3370,3380,3390,3404,3419,3434,3449,3464,3479,3493,3497,3501,3509,3523,3538,3542,3546,3555,3571,3587,3591,3595,3604,3620,3636,3640,3644,3653,3668,3682,3697],{"__ignoreMap":797},[801,3353,3354,3356,3358],{"class":803,"line":804},[801,3355,963],{"class":811},[801,3357,966],{"class":870},[801,3359,969],{"class":811},[801,3361,3362,3364,3366,3368],{"class":803,"line":838},[801,3363,974],{"class":815},[801,3365,963],{"class":811},[801,3367,980],{"class":979},[801,3369,835],{"class":811},[801,3371,3372,3374,3376,3378],{"class":803,"line":861},[801,3373,987],{"class":815},[801,3375,963],{"class":811},[801,3377,992],{"class":979},[801,3379,835],{"class":811},[801,3381,3382,3384,3386,3388],{"class":803,"line":867},[801,3383,999],{"class":815},[801,3385,963],{"class":811},[801,3387,1004],{"class":979},[801,3389,835],{"class":811},[801,3391,3392,3394,3396,3398,3400,3402],{"class":803,"line":888},[801,3393,1011],{"class":815},[801,3395,963],{"class":811},[801,3397,1016],{"class":880},[801,3399,1019],{"class":811},[801,3401,1022],{"class":815},[801,3403,1025],{"class":811},[801,3405,3406,3409,3411,3413,3415,3417],{"class":803,"line":893},[801,3407,3408],{"class":815},"    --spacing--xs",[801,3410,963],{"class":811},[801,3412,1016],{"class":880},[801,3414,1019],{"class":811},[801,3416,1022],{"class":815},[801,3418,1025],{"class":811},[801,3420,3421,3424,3426,3428,3430,3432],{"class":803,"line":932},[801,3422,3423],{"class":815},"    --spacing--sm",[801,3425,963],{"class":811},[801,3427,1016],{"class":880},[801,3429,1019],{"class":811},[801,3431,1022],{"class":815},[801,3433,1025],{"class":811},[801,3435,3436,3439,3441,3443,3445,3447],{"class":803,"line":937},[801,3437,3438],{"class":815},"    --spacing--md",[801,3440,963],{"class":811},[801,3442,1016],{"class":880},[801,3444,1019],{"class":811},[801,3446,1022],{"class":815},[801,3448,1025],{"class":811},[801,3450,3451,3454,3456,3458,3460,3462],{"class":803,"line":1292},[801,3452,3453],{"class":815},"    --spacing--lg",[801,3455,963],{"class":811},[801,3457,1016],{"class":880},[801,3459,1019],{"class":811},[801,3461,1022],{"class":815},[801,3463,1025],{"class":811},[801,3465,3466,3469,3471,3473,3475,3477],{"class":803,"line":1306},[801,3467,3468],{"class":815},"    --spacing--xl",[801,3470,963],{"class":811},[801,3472,1016],{"class":880},[801,3474,1019],{"class":811},[801,3476,1022],{"class":815},[801,3478,1025],{"class":811},[801,3480,3481,3483,3485,3487,3489,3491],{"class":803,"line":1316},[801,3482,2537],{"class":815},[801,3484,963],{"class":811},[801,3486,1016],{"class":880},[801,3488,1019],{"class":811},[801,3490,1022],{"class":815},[801,3492,1025],{"class":811},[801,3494,3495],{"class":803,"line":1321},[801,3496,1030],{"class":811},[801,3498,3499],{"class":803,"line":1573},[801,3500,864],{"emptyLinePlaceholder":223},[801,3502,3503,3505,3507],{"class":803,"line":1608},[801,3504,1767],{"class":811},[801,3506,2653],{"class":1770},[801,3508,969],{"class":811},[801,3510,3511,3513,3515,3517,3519,3521],{"class":803,"line":1614},[801,3512,2356],{"class":1778},[801,3514,963],{"class":811},[801,3516,1784],{"class":880},[801,3518,1019],{"class":811},[801,3520,2606],{"class":815},[801,3522,1025],{"class":811},[801,3524,3525,3527,3529,3531,3533,3536],{"class":803,"line":1621},[801,3526,2426],{"class":1778},[801,3528,963],{"class":811},[801,3530,1784],{"class":880},[801,3532,1019],{"class":811},[801,3534,3535],{"class":815},"--spacing--md",[801,3537,1025],{"class":811},[801,3539,3540],{"class":803,"line":1626},[801,3541,1030],{"class":811},[801,3543,3544],{"class":803,"line":1645},[801,3545,864],{"emptyLinePlaceholder":223},[801,3547,3548,3550,3553],{"class":803,"line":1658},[801,3549,1767],{"class":811},[801,3551,3552],{"class":1770},"section",[801,3554,969],{"class":811},[801,3556,3557,3560,3562,3564,3566,3569],{"class":803,"line":1667},[801,3558,3559],{"class":1778},"    margin-top",[801,3561,963],{"class":811},[801,3563,1784],{"class":880},[801,3565,1019],{"class":811},[801,3567,3568],{"class":815},"--spacing--xl",[801,3570,1025],{"class":811},[801,3572,3573,3576,3578,3580,3582,3585],{"class":803,"line":1672},[801,3574,3575],{"class":1778},"    margin-bottom",[801,3577,963],{"class":811},[801,3579,1784],{"class":880},[801,3581,1019],{"class":811},[801,3583,3584],{"class":815},"--spacing--lg",[801,3586,1025],{"class":811},[801,3588,3589],{"class":803,"line":2405},[801,3590,1030],{"class":811},[801,3592,3593],{"class":803,"line":2423},[801,3594,864],{"emptyLinePlaceholder":223},[801,3596,3597,3599,3602],{"class":803,"line":2437},[801,3598,1767],{"class":811},[801,3600,3601],{"class":1770},"hero",[801,3603,969],{"class":811},[801,3605,3606,3609,3611,3613,3615,3618],{"class":803,"line":2450},[801,3607,3608],{"class":1778},"    padding-block",[801,3610,963],{"class":811},[801,3612,1784],{"class":880},[801,3614,1019],{"class":811},[801,3616,3617],{"class":815},"--spacing--3xl",[801,3619,1025],{"class":811},[801,3621,3622,3625,3627,3629,3631,3634],{"class":803,"line":2459},[801,3623,3624],{"class":1778},"    padding-inline",[801,3626,963],{"class":811},[801,3628,1784],{"class":880},[801,3630,1019],{"class":811},[801,3632,3633],{"class":815},"--spacing--2xl",[801,3635,1025],{"class":811},[801,3637,3638],{"class":803,"line":2464},[801,3639,1030],{"class":811},[801,3641,3642],{"class":803,"line":3106},[801,3643,864],{"emptyLinePlaceholder":223},[801,3645,3646,3648,3651],{"class":803,"line":3119},[801,3647,1767],{"class":811},[801,3649,3650],{"class":1770},"button",[801,3652,969],{"class":811},[801,3654,3655,3657,3659,3661,3663,3666],{"class":803,"line":3131},[801,3656,3608],{"class":1778},[801,3658,963],{"class":811},[801,3660,1784],{"class":880},[801,3662,1019],{"class":811},[801,3664,3665],{"class":815},"--spacing--sm",[801,3667,1025],{"class":811},[801,3669,3670,3672,3674,3676,3678,3680],{"class":803,"line":3140},[801,3671,3624],{"class":1778},[801,3673,963],{"class":811},[801,3675,1784],{"class":880},[801,3677,1019],{"class":811},[801,3679,2606],{"class":815},[801,3681,1025],{"class":811},[801,3683,3684,3686,3688,3690,3692,3695],{"class":803,"line":3145},[801,3685,2426],{"class":1778},[801,3687,963],{"class":811},[801,3689,1784],{"class":880},[801,3691,1019],{"class":811},[801,3693,3694],{"class":815},"--spacing--xs",[801,3696,1025],{"class":811},[801,3698,3699],{"class":803,"line":3163},[801,3700,1030],{"class":811},[776,3702,3704],{"id":3703},"fluid-container-widths","Fluid Container Widths",[719,3706,3707],{},"Create containers that scale fluidly between viewport sizes:",[791,3709,3711],{"className":793,"code":3710,"filename":795,"language":796,"meta":797,"style":797},"import { styleframe } from 'styleframe';\nimport { useFluidViewportDesignTokens, useFluidClamp } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\nconst { variable, ref, selector } = s;\n\nuseFluidViewportDesignTokens(s);\n\n\u002F\u002F Fluid container max-widths\nconst containerSm = variable('container.sm', useFluidClamp(s, { min: 320, max: 640 }));\nconst containerMd = variable('container.md', useFluidClamp(s, { min: 640, max: 960 }));\nconst containerLg = variable('container.lg', useFluidClamp(s, { min: 960, max: 1280 }));\nconst containerXl = variable('container.xl', useFluidClamp(s, { min: 1280, max: 1600 }));\n\nselector('.container-sm', {\n    maxWidth: ref(containerSm),\n    marginInline: 'auto',\n    paddingInline: '1rem'\n});\n\nselector('.container-md', {\n    maxWidth: ref(containerMd),\n    marginInline: 'auto',\n    paddingInline: '1.5rem'\n});\n\nselector('.container-lg', {\n    maxWidth: ref(containerLg),\n    marginInline: 'auto',\n    paddingInline: '2rem'\n});\n\nselector('.container-xl', {\n    maxWidth: ref(containerXl),\n    marginInline: 'auto',\n    paddingInline: '2.5rem'\n});\n\nexport default s;\n",[697,3712,3713,3733,3757,3761,3775,3799,3803,3811,3815,3820,3871,3922,3973,4024,4028,4045,4058,4074,4087,4095,4099,4116,4129,4143,4156,4164,4168,4185,4198,4212,4225,4233,4237,4254,4267,4281,4294,4302,4306],{"__ignoreMap":797},[801,3714,3715,3717,3719,3721,3723,3725,3727,3729,3731],{"class":803,"line":804},[801,3716,808],{"class":807},[801,3718,812],{"class":811},[801,3720,816],{"class":815},[801,3722,819],{"class":811},[801,3724,822],{"class":807},[801,3726,825],{"class":811},[801,3728,829],{"class":828},[801,3730,832],{"class":811},[801,3732,835],{"class":811},[801,3734,3735,3737,3739,3741,3743,3745,3747,3749,3751,3753,3755],{"class":803,"line":838},[801,3736,808],{"class":807},[801,3738,812],{"class":811},[801,3740,845],{"class":815},[801,3742,903],{"class":811},[801,3744,1460],{"class":815},[801,3746,819],{"class":811},[801,3748,822],{"class":807},[801,3750,825],{"class":811},[801,3752,854],{"class":828},[801,3754,832],{"class":811},[801,3756,835],{"class":811},[801,3758,3759],{"class":803,"line":861},[801,3760,864],{"emptyLinePlaceholder":223},[801,3762,3763,3765,3767,3769,3771,3773],{"class":803,"line":867},[801,3764,871],{"class":870},[801,3766,874],{"class":815},[801,3768,877],{"class":811},[801,3770,816],{"class":880},[801,3772,883],{"class":815},[801,3774,835],{"class":811},[801,3776,3777,3779,3781,3783,3785,3787,3789,3791,3793,3795,3797],{"class":803,"line":888},[801,3778,871],{"class":870},[801,3780,812],{"class":811},[801,3782,1499],{"class":815},[801,3784,903],{"class":811},[801,3786,1504],{"class":815},[801,3788,903],{"class":811},[801,3790,1509],{"class":815},[801,3792,919],{"class":811},[801,3794,922],{"class":811},[801,3796,946],{"class":815},[801,3798,835],{"class":811},[801,3800,3801],{"class":803,"line":893},[801,3802,864],{"emptyLinePlaceholder":223},[801,3804,3805,3807,3809],{"class":803,"line":932},[801,3806,699],{"class":880},[801,3808,927],{"class":815},[801,3810,835],{"class":811},[801,3812,3813],{"class":803,"line":937},[801,3814,864],{"emptyLinePlaceholder":223},[801,3816,3817],{"class":803,"line":1292},[801,3818,3819],{"class":1239},"\u002F\u002F Fluid container max-widths\n",[801,3821,3822,3824,3827,3829,3831,3833,3835,3838,3840,3842,3844,3846,3848,3850,3852,3854,3856,3858,3860,3862,3865,3867,3869],{"class":803,"line":1306},[801,3823,871],{"class":870},[801,3825,3826],{"class":815}," containerSm ",[801,3828,877],{"class":811},[801,3830,1499],{"class":880},[801,3832,1019],{"class":815},[801,3834,832],{"class":811},[801,3836,3837],{"class":828},"container.sm",[801,3839,832],{"class":811},[801,3841,903],{"class":811},[801,3843,1460],{"class":880},[801,3845,1269],{"class":815},[801,3847,903],{"class":811},[801,3849,812],{"class":811},[801,3851,1585],{"class":1278},[801,3853,963],{"class":811},[801,3855,980],{"class":979},[801,3857,903],{"class":811},[801,3859,1595],{"class":1278},[801,3861,963],{"class":811},[801,3863,3864],{"class":979}," 640",[801,3866,819],{"class":811},[801,3868,2222],{"class":815},[801,3870,835],{"class":811},[801,3872,3873,3875,3878,3880,3882,3884,3886,3889,3891,3893,3895,3897,3899,3901,3903,3905,3907,3909,3911,3913,3916,3918,3920],{"class":803,"line":1316},[801,3874,871],{"class":870},[801,3876,3877],{"class":815}," containerMd ",[801,3879,877],{"class":811},[801,3881,1499],{"class":880},[801,3883,1019],{"class":815},[801,3885,832],{"class":811},[801,3887,3888],{"class":828},"container.md",[801,3890,832],{"class":811},[801,3892,903],{"class":811},[801,3894,1460],{"class":880},[801,3896,1269],{"class":815},[801,3898,903],{"class":811},[801,3900,812],{"class":811},[801,3902,1585],{"class":1278},[801,3904,963],{"class":811},[801,3906,3864],{"class":979},[801,3908,903],{"class":811},[801,3910,1595],{"class":1278},[801,3912,963],{"class":811},[801,3914,3915],{"class":979}," 960",[801,3917,819],{"class":811},[801,3919,2222],{"class":815},[801,3921,835],{"class":811},[801,3923,3924,3926,3929,3931,3933,3935,3937,3940,3942,3944,3946,3948,3950,3952,3954,3956,3958,3960,3962,3964,3967,3969,3971],{"class":803,"line":1321},[801,3925,871],{"class":870},[801,3927,3928],{"class":815}," containerLg ",[801,3930,877],{"class":811},[801,3932,1499],{"class":880},[801,3934,1019],{"class":815},[801,3936,832],{"class":811},[801,3938,3939],{"class":828},"container.lg",[801,3941,832],{"class":811},[801,3943,903],{"class":811},[801,3945,1460],{"class":880},[801,3947,1269],{"class":815},[801,3949,903],{"class":811},[801,3951,812],{"class":811},[801,3953,1585],{"class":1278},[801,3955,963],{"class":811},[801,3957,3915],{"class":979},[801,3959,903],{"class":811},[801,3961,1595],{"class":1278},[801,3963,963],{"class":811},[801,3965,3966],{"class":979}," 1280",[801,3968,819],{"class":811},[801,3970,2222],{"class":815},[801,3972,835],{"class":811},[801,3974,3975,3977,3980,3982,3984,3986,3988,3991,3993,3995,3997,3999,4001,4003,4005,4007,4009,4011,4013,4015,4018,4020,4022],{"class":803,"line":1573},[801,3976,871],{"class":870},[801,3978,3979],{"class":815}," containerXl ",[801,3981,877],{"class":811},[801,3983,1499],{"class":880},[801,3985,1019],{"class":815},[801,3987,832],{"class":811},[801,3989,3990],{"class":828},"container.xl",[801,3992,832],{"class":811},[801,3994,903],{"class":811},[801,3996,1460],{"class":880},[801,3998,1269],{"class":815},[801,4000,903],{"class":811},[801,4002,812],{"class":811},[801,4004,1585],{"class":1278},[801,4006,963],{"class":811},[801,4008,3966],{"class":979},[801,4010,903],{"class":811},[801,4012,1595],{"class":1278},[801,4014,963],{"class":811},[801,4016,4017],{"class":979}," 1600",[801,4019,819],{"class":811},[801,4021,2222],{"class":815},[801,4023,835],{"class":811},[801,4025,4026],{"class":803,"line":1608},[801,4027,864],{"emptyLinePlaceholder":223},[801,4029,4030,4032,4034,4036,4039,4041,4043],{"class":803,"line":1614},[801,4031,1629],{"class":880},[801,4033,1019],{"class":815},[801,4035,832],{"class":811},[801,4037,4038],{"class":828},".container-sm",[801,4040,832],{"class":811},[801,4042,903],{"class":811},[801,4044,969],{"class":811},[801,4046,4047,4049,4051,4053,4056],{"class":803,"line":1621},[801,4048,1295],{"class":1278},[801,4050,963],{"class":811},[801,4052,1504],{"class":880},[801,4054,4055],{"class":815},"(containerSm)",[801,4057,1570],{"class":811},[801,4059,4060,4063,4065,4067,4070,4072],{"class":803,"line":1626},[801,4061,4062],{"class":1278},"    marginInline",[801,4064,963],{"class":811},[801,4066,825],{"class":811},[801,4068,4069],{"class":828},"auto",[801,4071,832],{"class":811},[801,4073,1570],{"class":811},[801,4075,4076,4078,4080,4082,4085],{"class":803,"line":1645},[801,4077,3241],{"class":1278},[801,4079,963],{"class":811},[801,4081,825],{"class":811},[801,4083,4084],{"class":828},"1rem",[801,4086,3072],{"class":811},[801,4088,4089,4091,4093],{"class":803,"line":1658},[801,4090,919],{"class":811},[801,4092,1311],{"class":815},[801,4094,835],{"class":811},[801,4096,4097],{"class":803,"line":1667},[801,4098,864],{"emptyLinePlaceholder":223},[801,4100,4101,4103,4105,4107,4110,4112,4114],{"class":803,"line":1672},[801,4102,1629],{"class":880},[801,4104,1019],{"class":815},[801,4106,832],{"class":811},[801,4108,4109],{"class":828},".container-md",[801,4111,832],{"class":811},[801,4113,903],{"class":811},[801,4115,969],{"class":811},[801,4117,4118,4120,4122,4124,4127],{"class":803,"line":2405},[801,4119,1295],{"class":1278},[801,4121,963],{"class":811},[801,4123,1504],{"class":880},[801,4125,4126],{"class":815},"(containerMd)",[801,4128,1570],{"class":811},[801,4130,4131,4133,4135,4137,4139,4141],{"class":803,"line":2423},[801,4132,4062],{"class":1278},[801,4134,963],{"class":811},[801,4136,825],{"class":811},[801,4138,4069],{"class":828},[801,4140,832],{"class":811},[801,4142,1570],{"class":811},[801,4144,4145,4147,4149,4151,4154],{"class":803,"line":2437},[801,4146,3241],{"class":1278},[801,4148,963],{"class":811},[801,4150,825],{"class":811},[801,4152,4153],{"class":828},"1.5rem",[801,4155,3072],{"class":811},[801,4157,4158,4160,4162],{"class":803,"line":2450},[801,4159,919],{"class":811},[801,4161,1311],{"class":815},[801,4163,835],{"class":811},[801,4165,4166],{"class":803,"line":2459},[801,4167,864],{"emptyLinePlaceholder":223},[801,4169,4170,4172,4174,4176,4179,4181,4183],{"class":803,"line":2464},[801,4171,1629],{"class":880},[801,4173,1019],{"class":815},[801,4175,832],{"class":811},[801,4177,4178],{"class":828},".container-lg",[801,4180,832],{"class":811},[801,4182,903],{"class":811},[801,4184,969],{"class":811},[801,4186,4187,4189,4191,4193,4196],{"class":803,"line":3106},[801,4188,1295],{"class":1278},[801,4190,963],{"class":811},[801,4192,1504],{"class":880},[801,4194,4195],{"class":815},"(containerLg)",[801,4197,1570],{"class":811},[801,4199,4200,4202,4204,4206,4208,4210],{"class":803,"line":3119},[801,4201,4062],{"class":1278},[801,4203,963],{"class":811},[801,4205,825],{"class":811},[801,4207,4069],{"class":828},[801,4209,832],{"class":811},[801,4211,1570],{"class":811},[801,4213,4214,4216,4218,4220,4223],{"class":803,"line":3131},[801,4215,3241],{"class":1278},[801,4217,963],{"class":811},[801,4219,825],{"class":811},[801,4221,4222],{"class":828},"2rem",[801,4224,3072],{"class":811},[801,4226,4227,4229,4231],{"class":803,"line":3140},[801,4228,919],{"class":811},[801,4230,1311],{"class":815},[801,4232,835],{"class":811},[801,4234,4235],{"class":803,"line":3145},[801,4236,864],{"emptyLinePlaceholder":223},[801,4238,4239,4241,4243,4245,4248,4250,4252],{"class":803,"line":3163},[801,4240,1629],{"class":880},[801,4242,1019],{"class":815},[801,4244,832],{"class":811},[801,4246,4247],{"class":828},".container-xl",[801,4249,832],{"class":811},[801,4251,903],{"class":811},[801,4253,969],{"class":811},[801,4255,4256,4258,4260,4262,4265],{"class":803,"line":3178},[801,4257,1295],{"class":1278},[801,4259,963],{"class":811},[801,4261,1504],{"class":880},[801,4263,4264],{"class":815},"(containerXl)",[801,4266,1570],{"class":811},[801,4268,4269,4271,4273,4275,4277,4279],{"class":803,"line":3191},[801,4270,4062],{"class":1278},[801,4272,963],{"class":811},[801,4274,825],{"class":811},[801,4276,4069],{"class":828},[801,4278,832],{"class":811},[801,4280,1570],{"class":811},[801,4282,4283,4285,4287,4289,4292],{"class":803,"line":3200},[801,4284,3241],{"class":1278},[801,4286,963],{"class":811},[801,4288,825],{"class":811},[801,4290,4291],{"class":828},"2.5rem",[801,4293,3072],{"class":811},[801,4295,4296,4298,4300],{"class":803,"line":3205},[801,4297,919],{"class":811},[801,4299,1311],{"class":815},[801,4301,835],{"class":811},[801,4303,4304],{"class":803,"line":3223},[801,4305,864],{"emptyLinePlaceholder":223},[801,4307,4308,4310,4312,4314],{"class":803,"line":3238},[801,4309,940],{"class":807},[801,4311,943],{"class":807},[801,4313,946],{"class":815},[801,4315,835],{"class":811},[776,4317,4319],{"id":4318},"fluid-border-radius-scale","Fluid Border Radius Scale",[719,4321,4322],{},"Scale border radius values smoothly for cohesive visual design:",[791,4324,4326],{"className":793,"code":4325,"filename":795,"language":796,"meta":797,"style":797},"import { styleframe } from 'styleframe';\nimport { useFluidViewportDesignTokens, useFluidClamp } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\nconst { variable, ref, selector } = s;\n\nuseFluidViewportDesignTokens(s);\n\n\u002F\u002F Fluid border radius scale\nconst {\n    borderRadius,\n    borderRadiusSm,\n    borderRadiusMd,\n    borderRadiusLg\n} = useBorderRadiusDesignTokens(s, {\n    sm: useFluidClamp(s, { min: 4, max: 6 }),\n    md: useFluidClamp(s, { min: 12, max: 16 }),\n    lg: useFluidClamp(s, { min: 16, max: 24 }),\n    default: '@font-size.md'\n)\n\nselector('.card', {\n    borderRadius: ref(borderRadius)\n});\n\nselector('.button', {\n    borderRadius: ref(borderRadiusSm)\n});\n\nselector('.modal', {\n    borderRadius: ref(borderRadiusLg)\n});\n\nexport default s;\n",[697,4327,4328,4348,4372,4376,4390,4414,4418,4426,4430,4435,4441,4447,4454,4461,4466,4481,4515,4549,4583,4595,4599,4603,4619,4629,4635,4639,4655,4666,4672,4676,4693,4704,4710,4714],{"__ignoreMap":797},[801,4329,4330,4332,4334,4336,4338,4340,4342,4344,4346],{"class":803,"line":804},[801,4331,808],{"class":807},[801,4333,812],{"class":811},[801,4335,816],{"class":815},[801,4337,819],{"class":811},[801,4339,822],{"class":807},[801,4341,825],{"class":811},[801,4343,829],{"class":828},[801,4345,832],{"class":811},[801,4347,835],{"class":811},[801,4349,4350,4352,4354,4356,4358,4360,4362,4364,4366,4368,4370],{"class":803,"line":838},[801,4351,808],{"class":807},[801,4353,812],{"class":811},[801,4355,845],{"class":815},[801,4357,903],{"class":811},[801,4359,1460],{"class":815},[801,4361,819],{"class":811},[801,4363,822],{"class":807},[801,4365,825],{"class":811},[801,4367,854],{"class":828},[801,4369,832],{"class":811},[801,4371,835],{"class":811},[801,4373,4374],{"class":803,"line":861},[801,4375,864],{"emptyLinePlaceholder":223},[801,4377,4378,4380,4382,4384,4386,4388],{"class":803,"line":867},[801,4379,871],{"class":870},[801,4381,874],{"class":815},[801,4383,877],{"class":811},[801,4385,816],{"class":880},[801,4387,883],{"class":815},[801,4389,835],{"class":811},[801,4391,4392,4394,4396,4398,4400,4402,4404,4406,4408,4410,4412],{"class":803,"line":888},[801,4393,871],{"class":870},[801,4395,812],{"class":811},[801,4397,1499],{"class":815},[801,4399,903],{"class":811},[801,4401,1504],{"class":815},[801,4403,903],{"class":811},[801,4405,1509],{"class":815},[801,4407,919],{"class":811},[801,4409,922],{"class":811},[801,4411,946],{"class":815},[801,4413,835],{"class":811},[801,4415,4416],{"class":803,"line":893},[801,4417,864],{"emptyLinePlaceholder":223},[801,4419,4420,4422,4424],{"class":803,"line":932},[801,4421,699],{"class":880},[801,4423,927],{"class":815},[801,4425,835],{"class":811},[801,4427,4428],{"class":803,"line":937},[801,4429,864],{"emptyLinePlaceholder":223},[801,4431,4432],{"class":803,"line":1292},[801,4433,4434],{"class":1239},"\u002F\u002F Fluid border radius scale\n",[801,4436,4437,4439],{"class":803,"line":1306},[801,4438,871],{"class":870},[801,4440,969],{"class":811},[801,4442,4443,4445],{"class":803,"line":1316},[801,4444,2383],{"class":815},[801,4446,1570],{"class":811},[801,4448,4449,4452],{"class":803,"line":1321},[801,4450,4451],{"class":815},"    borderRadiusSm",[801,4453,1570],{"class":811},[801,4455,4456,4459],{"class":803,"line":1573},[801,4457,4458],{"class":815},"    borderRadiusMd",[801,4460,1570],{"class":811},[801,4462,4463],{"class":803,"line":1608},[801,4464,4465],{"class":815},"    borderRadiusLg\n",[801,4467,4468,4470,4472,4475,4477,4479],{"class":803,"line":1614},[801,4469,919],{"class":811},[801,4471,922],{"class":811},[801,4473,4474],{"class":880}," useBorderRadiusDesignTokens",[801,4476,1269],{"class":815},[801,4478,903],{"class":811},[801,4480,969],{"class":811},[801,4482,4483,4485,4487,4489,4491,4493,4495,4497,4499,4501,4503,4505,4507,4509,4511,4513],{"class":803,"line":1621},[801,4484,2920],{"class":1278},[801,4486,963],{"class":811},[801,4488,1460],{"class":880},[801,4490,1269],{"class":815},[801,4492,903],{"class":811},[801,4494,812],{"class":811},[801,4496,1585],{"class":1278},[801,4498,963],{"class":811},[801,4500,2900],{"class":979},[801,4502,903],{"class":811},[801,4504,1595],{"class":1278},[801,4506,963],{"class":811},[801,4508,2909],{"class":979},[801,4510,819],{"class":811},[801,4512,1311],{"class":815},[801,4514,1570],{"class":811},[801,4516,4517,4519,4521,4523,4525,4527,4529,4531,4533,4535,4537,4539,4541,4543,4545,4547],{"class":803,"line":1626},[801,4518,2955],{"class":1278},[801,4520,963],{"class":811},[801,4522,1460],{"class":880},[801,4524,1269],{"class":815},[801,4526,903],{"class":811},[801,4528,812],{"class":811},[801,4530,1585],{"class":1278},[801,4532,963],{"class":811},[801,4534,2319],{"class":979},[801,4536,903],{"class":811},[801,4538,1595],{"class":1278},[801,4540,963],{"class":811},[801,4542,1590],{"class":979},[801,4544,819],{"class":811},[801,4546,1311],{"class":815},[801,4548,1570],{"class":811},[801,4550,4551,4553,4555,4557,4559,4561,4563,4565,4567,4569,4571,4573,4575,4577,4579,4581],{"class":803,"line":1645},[801,4552,2990],{"class":1278},[801,4554,963],{"class":811},[801,4556,1460],{"class":880},[801,4558,1269],{"class":815},[801,4560,903],{"class":811},[801,4562,812],{"class":811},[801,4564,1585],{"class":1278},[801,4566,963],{"class":811},[801,4568,1590],{"class":979},[801,4570,903],{"class":811},[801,4572,1595],{"class":1278},[801,4574,963],{"class":811},[801,4576,2217],{"class":979},[801,4578,819],{"class":811},[801,4580,1311],{"class":815},[801,4582,1570],{"class":811},[801,4584,4585,4587,4589,4591,4593],{"class":803,"line":1658},[801,4586,3062],{"class":1278},[801,4588,963],{"class":811},[801,4590,825],{"class":811},[801,4592,3069],{"class":828},[801,4594,3072],{"class":811},[801,4596,4597],{"class":803,"line":1667},[801,4598,1605],{"class":815},[801,4600,4601],{"class":803,"line":1672},[801,4602,864],{"emptyLinePlaceholder":223},[801,4604,4605,4607,4609,4611,4613,4615,4617],{"class":803,"line":2405},[801,4606,1629],{"class":880},[801,4608,1019],{"class":815},[801,4610,832],{"class":811},[801,4612,2345],{"class":828},[801,4614,832],{"class":811},[801,4616,903],{"class":811},[801,4618,969],{"class":811},[801,4620,4621,4623,4625,4627],{"class":803,"line":2423},[801,4622,2383],{"class":1278},[801,4624,963],{"class":811},[801,4626,1504],{"class":880},[801,4628,2390],{"class":815},[801,4630,4631,4633],{"class":803,"line":2437},[801,4632,919],{"class":811},[801,4634,1025],{"class":815},[801,4636,4637],{"class":803,"line":2450},[801,4638,864],{"emptyLinePlaceholder":223},[801,4640,4641,4643,4645,4647,4649,4651,4653],{"class":803,"line":2459},[801,4642,1629],{"class":880},[801,4644,1019],{"class":815},[801,4646,832],{"class":811},[801,4648,3274],{"class":828},[801,4650,832],{"class":811},[801,4652,903],{"class":811},[801,4654,969],{"class":811},[801,4656,4657,4659,4661,4663],{"class":803,"line":2464},[801,4658,2383],{"class":1278},[801,4660,963],{"class":811},[801,4662,1504],{"class":880},[801,4664,4665],{"class":815},"(borderRadiusSm)\n",[801,4667,4668,4670],{"class":803,"line":3106},[801,4669,919],{"class":811},[801,4671,1025],{"class":815},[801,4673,4674],{"class":803,"line":3119},[801,4675,864],{"emptyLinePlaceholder":223},[801,4677,4678,4680,4682,4684,4687,4689,4691],{"class":803,"line":3131},[801,4679,1629],{"class":880},[801,4681,1019],{"class":815},[801,4683,832],{"class":811},[801,4685,4686],{"class":828},".modal",[801,4688,832],{"class":811},[801,4690,903],{"class":811},[801,4692,969],{"class":811},[801,4694,4695,4697,4699,4701],{"class":803,"line":3140},[801,4696,2383],{"class":1278},[801,4698,963],{"class":811},[801,4700,1504],{"class":880},[801,4702,4703],{"class":815},"(borderRadiusLg)\n",[801,4705,4706,4708],{"class":803,"line":3145},[801,4707,919],{"class":811},[801,4709,1025],{"class":815},[801,4711,4712],{"class":803,"line":3163},[801,4713,864],{"emptyLinePlaceholder":223},[801,4715,4716],{"class":803,"line":3178},[801,4717,4718],{"class":815},"export default s;\n",[715,4720,4722],{"id":4721},"best-practices","Best Practices",[730,4724,4725,4734,4740,4746,4752,4758,4768,4794,4800,4806],{},[733,4726,4727,4733],{},[692,4728,4729,4730,4732],{},"Call ",[697,4731,768],{}," once",": Set up your fluid viewport range once at the beginning of your theme configuration. Multiple calls will override previous values.",[733,4735,4736,4739],{},[692,4737,4738],{},"Use meaningful value ranges",": Choose min\u002Fmax values that create noticeable but not jarring differences. Aim for 25-50% change between endpoints (e.g., 16px to 24px, not 16px to 16.5px).",[733,4741,4742,4745],{},[692,4743,4744],{},"Test at multiple viewport sizes",": Always verify your fluid values at minimum, middle, and maximum viewport widths, plus various in-between sizes to ensure smooth transitions.",[733,4747,4748,4751],{},[692,4749,4750],{},"Match scaling ratios",": Keep similar scaling ratios across related values. If font sizes grow by 1.5x, consider spacing growing by a similar ratio for visual harmony.",[733,4753,4754,4757],{},[692,4755,4756],{},"Document your viewport range",": Always comment why you chose specific viewport widths. Link to analytics data or design requirements.",[733,4759,4760,4763,4764,4767],{},[692,4761,4762],{},"Consider performance",": Fluid calculations use CSS ",[697,4765,4766],{},"calc()"," which is well-optimized, but avoid nesting too many calculations (3-4 levels deep maximum).",[733,4769,4770,4777,4778,4780,4781,4783,4784,4786,4787,4789,4790,4793],{},[692,4771,4772,4773,4776],{},"Use ",[697,4774,4775],{},"useFontSizeDesignTokens()"," for typography",": For complete type systems, pass ",[697,4779,1417],{}," ranges to ",[697,4782,4775],{}," instead of building individual ",[697,4785,1398],{}," calls. ",[697,4788,708],{}," wires this up by default — pass ",[697,4791,4792],{},"fluidFontSize: false"," to opt out.",[733,4795,4796,4799],{},[692,4797,4798],{},"Combine with media queries",": Use fluid values for smooth scaling and media queries for layout changes. They complement each other.",[733,4801,4802,4805],{},[692,4803,4804],{},"Start conservative",": Begin with subtle fluid scaling and increase ranges based on testing. It's easier to scale up than fix overly aggressive scaling.",[733,4807,4808,4811],{},[692,4809,4810],{},"Create custom breakpoints sparingly",": Most projects only need one viewport range. Add custom breakpoints only when you have specific requirements for different device categories.",[689,4813,4814,4817,4818,4820],{},[692,4815,4816],{},"Good to know:"," Fluid values use CSS ",[697,4819,4766],{}," which has excellent browser support and performance. The calculations happen at render time, allowing smooth scaling at any viewport size without JavaScript.",[715,4822,4824],{"id":4823},"faq","FAQ",[4826,4827,4828,4834,4854,4858,4865,4882,4886,4890,4894,4898],"accordion",{},[4829,4830,4833],"accordion-item",{"icon":4831,"label":4832},"i-lucide-circle-help","When should I use fluid values vs media queries?","Use fluid values for properties that should scale smoothly (font sizes, spacing, border radius). Use media queries for discrete layout changes (column count, flexbox direction, display properties). Often you'll use both together: fluid values for smooth scaling and media queries for structural changes.",[4829,4835,4837,4839,4840,4842,4843,4846,4847,4850,4851,4853],{"icon":4831,"label":4836},"What's the difference between useFluidClamp() and CSS clamp()?",[697,4838,1398],{}," generates a CSS ",[697,4841,4766],{}," expression that interpolates between two values based on viewport width. CSS ",[697,4844,4845],{},"clamp()"," also takes a preferred value but uses viewport units directly (e.g., ",[697,4848,4849],{},"clamp(16px, 4vw, 20px)","). ",[697,4852,1398],{}," provides more control and consistency across your design system by using a shared breakpoint calculation.",[4829,4855,4857],{"icon":4831,"label":4856},"Can I use different viewport ranges for different properties?","Yes! Create custom breakpoint variables for different purposes. For example, use one range for body text (320-1440px) and another for hero sections (1024-1920px). This gives you fine-grained control over scaling behavior.",[4829,4859,4861,4862,4864],{"icon":4831,"label":4860},"Does useFluidClamp() work with non-pixel values?","Yes, but the formula assumes pixel-based calculations for the conversion to rem units. For best results and consistency, use numeric pixel values. For other units, you may need to handle the conversion manually or use CSS ",[697,4863,4766],{}," directly.",[4829,4866,4868,4869,4871,4872,4875,4876,4879,4880,1767],{"icon":4831,"label":4867},"How do I make a value fluid only on mobile or desktop?","Create a custom breakpoint variable with a narrow viewport range using ",[697,4870,768],{},". For mobile-only scaling, use ",[697,4873,4874],{},"minWidth: 320, maxWidth: 767",". For desktop-only, use ",[697,4877,4878],{},"minWidth: 1024, maxWidth: 1920",". Pass this custom breakpoint as the third argument to ",[697,4881,1398],{},[4829,4883,4885],{"icon":4831,"label":4884},"Can I combine fluid values with fixed values?","Absolutely! Mix fluid and fixed values as needed within the same component. For example, use fluid font sizes and spacing but fixed border widths and shadows. You can also combine fluid values with media queries for layout changes like column count or flexbox direction.",[4829,4887,4889],{"icon":4831,"label":4888},"What viewport range should I choose?","Choose a range that covers your primary user devices. Check your analytics to see common viewport sizes. The default 320-1440px covers most devices. For modern mobile-first sites, consider 375-1600px. For desktop-focused applications, try 1024-1920px. Always test with real devices and content.",[4829,4891,4893],{"icon":4831,"label":4892},"How does this compare to container queries?","Container queries respond to a parent element's size, while fluid viewport values respond to the viewport size. Both have their place. Use fluid viewport values for global scaling consistency. Use container queries when component size should depend on its container rather than the viewport.",[4829,4895,4897],{"icon":4831,"label":4896},"Can I animate fluid values?","Fluid values transition smoothly as the viewport resizes, but this happens automatically through the CSS calculation. You can apply CSS transitions to properties using fluid values if you want to animate changes from other sources (like theme switches or hover states). The fluid scaling itself happens instantly as the viewport changes.",[4829,4899,4901],{"icon":4831,"label":4900},"Should I use useFluidClamp() for everything?","No. Use fluid values for properties that benefit from smooth viewport-based scaling: spacing, typography, border radius, and container widths. Keep fixed values for properties that should remain constant: border widths, shadows, opacity, z-index, and structural layout properties. Not everything needs to scale.",[4903,4904,4905],"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 .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 .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}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}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}",{"title":797,"searchDepth":838,"depth":838,"links":4907},[4908,4909,4910,4915,4919,4920,4925,4926],{"id":717,"depth":838,"text":78},{"id":724,"depth":838,"text":725},{"id":765,"depth":838,"text":768,"children":4911},[4912,4913,4914],{"id":778,"depth":861,"text":779},{"id":1090,"depth":861,"text":1091},{"id":1159,"depth":861,"text":1160},{"id":1395,"depth":838,"text":1398,"children":4916},[4917,4918],{"id":1406,"depth":861,"text":1407},{"id":1798,"depth":861,"text":1799},{"id":2051,"depth":838,"text":2052},{"id":2691,"depth":838,"text":2692,"children":4921},[4922,4923,4924],{"id":2695,"depth":861,"text":2696},{"id":3703,"depth":861,"text":3704},{"id":4318,"depth":861,"text":4319},{"id":4721,"depth":838,"text":4722},{"id":4823,"depth":838,"text":4824},"Create fluid, responsive design tokens that scale smoothly between viewport sizes using auto-generated complex CSS calculations.","md",null,{},{"title":216},{"title":684,"description":4927},"gMOxFkQP4z_1sAoeGSy8CvLcUolNSKvBti4_aCMXjeY",[4935,4937],{"title":78,"path":211,"stem":212,"description":4936,"children":-1},"Create fluid, responsive designs that scale smoothly across all viewport sizes using mathematical precision. Based on the Utopia fluid type scale for optimal readability without breakpoints.",{"title":220,"path":221,"stem":222,"description":4938,"children":-1},"Create fluid typography systems that scale smoothly across viewports using mathematical modular scales and CSS clamp functions.",1781596325522]