/* noto-sans-arabic-arabic-wght-normal */
@font-face {
  font-family: 'Noto Sans Arabic Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/shadcn/assets/noto-sans-arabic-arabic-wght-normal-BhzieyvS.woff2) format('woff2-variations');
  unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1;
}
/* noto-sans-arabic-math-wght-normal */
@font-face {
  font-family: 'Noto Sans Arabic Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/shadcn/assets/noto-sans-arabic-math-wght-normal-pS2d8anF.woff2) format('woff2-variations');
  unicode-range: U+0302-0303,U+0305,U+0307-0308,U+0310,U+0312,U+0315,U+031A,U+0326-0327,U+032C,U+032F-0330,U+0332-0333,U+0338,U+033A,U+0346,U+034D,U+0391-03A1,U+03A3-03A9,U+03B1-03C9,U+03D1,U+03D5-03D6,U+03F0-03F1,U+03F4-03F5,U+2016-2017,U+2034-2038,U+203C,U+2040,U+2043,U+2047,U+2050,U+2057,U+205F,U+2070-2071,U+2074-208E,U+2090-209C,U+20D0-20DC,U+20E1,U+20E5-20EF,U+2100-2112,U+2114-2115,U+2117-2121,U+2123-214F,U+2190,U+2192,U+2194-21AE,U+21B0-21E5,U+21F1-21F2,U+21F4-2211,U+2213-2214,U+2216-22FF,U+2308-230B,U+2310,U+2319,U+231C-2321,U+2336-237A,U+237C,U+2395,U+239B-23B7,U+23D0,U+23DC-23E1,U+2474-2475,U+25AF,U+25B3,U+25B7,U+25BD,U+25C1,U+25CA,U+25CC,U+25FB,U+266D-266F,U+27C0-27FF,U+2900-2AFF,U+2B0E-2B11,U+2B30-2B4C,U+2BFE,U+3030,U+FF5B,U+FF5D,U+1D400-1D7FF,U+1EE00-1EEFF;
}
/* noto-sans-arabic-symbols-wght-normal */
@font-face {
  font-family: 'Noto Sans Arabic Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/shadcn/assets/noto-sans-arabic-symbols-wght-normal-BJ6p-EzA.woff2) format('woff2-variations');
  unicode-range: U+0001-000C,U+000E-001F,U+007F-009F,U+20DD-20E0,U+20E2-20E4,U+2150-218F,U+2190,U+2192,U+2194-2199,U+21AF,U+21E6-21F0,U+21F3,U+2218-2219,U+2299,U+22C4-22C6,U+2300-243F,U+2440-244A,U+2460-24FF,U+25A0-27BF,U+2800-28FF,U+2921-2922,U+2981,U+29BF,U+29EB,U+2B00-2BFF,U+4DC0-4DFF,U+FFF9-FFFB,U+10140-1018E,U+10190-1019C,U+101A0,U+101D0-101FD,U+102E0-102FB,U+10E60-10E7E,U+1D2C0-1D2D3,U+1D2E0-1D37F,U+1F000-1F0FF,U+1F100-1F1AD,U+1F1E6-1F1FF,U+1F30D-1F30F,U+1F315,U+1F31C,U+1F31E,U+1F320-1F32C,U+1F336,U+1F378,U+1F37D,U+1F382,U+1F393-1F39F,U+1F3A7-1F3A8,U+1F3AC-1F3AF,U+1F3C2,U+1F3C4-1F3C6,U+1F3CA-1F3CE,U+1F3D4-1F3E0,U+1F3ED,U+1F3F1-1F3F3,U+1F3F5-1F3F7,U+1F408,U+1F415,U+1F41F,U+1F426,U+1F43F,U+1F441-1F442,U+1F444,U+1F446-1F449,U+1F44C-1F44E,U+1F453,U+1F46A,U+1F47D,U+1F4A3,U+1F4B0,U+1F4B3,U+1F4B9,U+1F4BB,U+1F4BF,U+1F4C8-1F4CB,U+1F4D6,U+1F4DA,U+1F4DF,U+1F4E3-1F4E6,U+1F4EA-1F4ED,U+1F4F7,U+1F4F9-1F4FB,U+1F4FD-1F4FE,U+1F503,U+1F507-1F50B,U+1F50D,U+1F512-1F513,U+1F53E-1F54A,U+1F54F-1F5FA,U+1F610,U+1F650-1F67F,U+1F687,U+1F68D,U+1F691,U+1F694,U+1F698,U+1F6AD,U+1F6B2,U+1F6B9-1F6BA,U+1F6BC,U+1F6C6-1F6CF,U+1F6D3-1F6D7,U+1F6E0-1F6EA,U+1F6F0-1F6F3,U+1F6F7-1F6FC,U+1F700-1F7FF,U+1F800-1F80B,U+1F810-1F847,U+1F850-1F859,U+1F860-1F887,U+1F890-1F8AD,U+1F8B0-1F8BB,U+1F8C0-1F8C1,U+1F900-1F90B,U+1F93B,U+1F946,U+1F984,U+1F996,U+1F9E9,U+1FA00-1FA6F,U+1FA70-1FA7C,U+1FA80-1FA89,U+1FA8F-1FAC6,U+1FACE-1FADC,U+1FADF-1FAE9,U+1FAF0-1FAF8,U+1FB00-1FBFF;
}
/* noto-sans-arabic-latin-ext-wght-normal */
@font-face {
  font-family: 'Noto Sans Arabic Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/shadcn/assets/noto-sans-arabic-latin-ext-wght-normal-CIz31GGw.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* noto-sans-arabic-latin-wght-normal */
@font-face {
  font-family: 'Noto Sans Arabic Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/shadcn/assets/noto-sans-arabic-latin-wght-normal-BQEJrIpl.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* noto-sans-hebrew-cyrillic-ext-wght-normal */
@font-face {
  font-family: 'Noto Sans Hebrew Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(data:font/woff2;base64,d09GMgABAAAAAASwABQAAAAACcAAAARHAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGhQbHhw6P0hWQVI/BmA/U1RBVIE0JzIAVC9sEQgKgTiBOQsOADCBLgE2AiQDFgQgBYZYB0YMBxtUCAgeg2176QknnSKgiZnY+Szi4efKeT/ZXBlIKATFoKqq16kKWXYEEkjeGnyd/rxCfIWDrejdJOU2+iBvPkFH4WTeCin/Ocng4f/e8cMv+KtLbdBIE5mbxwTJ9gANKA10LeGpHf8USJZYQB4gpM4pJmImCiWMMMopJxRu1B8h6AOISkTQyxhOyJa0nBLoqaEDSFpWiKD92Z7HNivaQU8puDbQ01yTAvR8o6oTFCh4KsaBIQCIJoRoIILhCPqoEP5DjQgbJECdLWBpUx5rVAB25/k5iKAkIdCjAn852/fnp+MF0HpWC7r/A/WceILFQBlR3oIJNEX0UDCEAabQuCqVqQi4elwlIwTxyCbtahRIEUGAskJESTgWBLK42gcIZFFFQSALyxNAIAtKBSCQ+ZkBFYqSU4DO3AggPcdrhoFYX130euoFgB5abTMYt+1gh6J8+WIwIkRIkAAUVBhCUzCElg2gjx6KGn1NcKX1uQMoL50ZvVoKBiEcCgbQEEPo62GvBiw4DkZqRWaD42+JAxKZi0mZJ56I+eJvYgGMG1poY20WQTUBshjs/sjSWdcfNKAPWlgM9gKoQQEV1LVlH6PKrcabm4z1jYx/vvkZd/fVs7s2hjeefkl8+eNHqVH59V+/ou0ffP9OS5odHn/75VFuWHLl+/dAD2gfOAXtA7WBghEBVvyz2DONe3b++Ol3/6OnVU2dvKtpH3vOP3PK9uZxt7qo9D+zF0MSnUo22N7xnp+9eM+tJEynlOoU5XrVJqYCEEQwiQ6YAoB1UqVuAKKHixOAni+eDy5PrC72//yZgUuuuOWqfY456rATPfq/9w3CaXMxn4Q99jvQlDHeuhM/5pKdd9JJR4oS6vu7zMjIu5F/vbAfaW+ztuqsuVR220wPjkwO7D13+003lhsORLlo2I+cWl2Y2gtED80EuGdu914QVDZdeXRvS71pzD89Tc0B4O2AHwvwae/GfAi7/2u41gLQKCB8uaKyB0JCyXUdFQ5oZUZQtADkd4kJIGjMpgkinBtiDppS64N2XjNiVi5R9MspKruSRm1VjGgZZYrGEs80/SxzSI9AH7cg6OUCAfScRcBKGUIG9kRFXWwMMSMbYJhhCKRnBkEs2BDMQJ/LhjPCPjyFDo3aJWnXqFmbVJuoKDRKwmvH5tJinA4tXOQKVrlahxwtpGRUNd5TXEmSW3Qqb2WpyJTjJMd+rEoXpShiYrwunE4SvE4q7Vo043RS4ojwFKTy8FR4xRoFOQOnKcPZ+OzlhIpwpNTaNVIow1FQasHrRAUTYTACS6MUkxRRCkvUW/XyRUuXL1+66JaddFjNgsnmMpspzDZSQRhBQuQMhy5zqoACrzXYfJNIpB4jyDuaTvkOk5BqEU+pNRFpxusg1lnsnWtWSUzWtOBHQ7DaGUEON6QQTaJFtFGV5CKt/6LX6Ko7W5jQFCYvYBKZB2R9/32t4wAA) format('woff2-variations');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
/* noto-sans-hebrew-greek-ext-wght-normal */
@font-face {
  font-family: 'Noto Sans Hebrew Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(data:font/woff2;base64,d09GMgABAAAAAASwABQAAAAACcAAAARHAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGhQbHhw6P0hWQVI/BmA/U1RBVIE0JzIAVC9sEQgKgTiBOQsOADCBLgE2AiQDFgQgBYZYB0YMBxtUCAgeg2176QknnSKgiZnY+Szi4efKeT/ZXBlIKATFoKqq16kKWXYEEkjeGnyd/rxCfIWDrejdJOU2+iBvPkFH4WTeCin/Ocng4f/e8cMv+KtLbdBIE5mbxwTJ9gANKA10LeGpHf8USJZYQB4gpM4pJmImCiWMMMopJxRu1B8h6AOISkTQyxhOyJa0nBLoqaEDSFpWiKD92Z7HNivaQU8puDbQ01yTAvR8o6oTFCh4KsaBIQCIJoRoIILhCPqoEP5DjQgbJECdLWBpUx5rVAB25/k5iKAkIdCjAn852/fnp+MF0HpWC7r/A/WceILFQBlR3oIJNEX0UDCEAabQuCqVqQi4elwlIwTxyCbtahRIEUGAskJESTgWBLK42gcIZFFFQSALyxNAIAtKBSCQ+ZkBFYqSU4DO3AggPcdrhoFYX130euoFgB5abTMYt+1gh6J8+WIwIkRIkAAUVBhCUzCElg2gjx6KGn1NcKX1uQMoL50ZvVoKBiEcCgbQEEPo62GvBiw4DkZqRWaD42+JAxKZi0mZJ56I+eJvYgGMG1poY20WQTUBshjs/sjSWdcfNKAPWlgM9gKoQQEV1LVlH6PKrcabm4z1jYx/vvkZd/fVs7s2hjeefkl8+eNHqVH59V+/ou0ffP9OS5odHn/75VFuWHLl+/dAD2gfOAXtA7WBghEBVvyz2DONe3b++Ol3/6OnVU2dvKtpH3vOP3PK9uZxt7qo9D+zF0MSnUo22N7xnp+9eM+tJEynlOoU5XrVJqYCEEQwiQ6YAoB1UqVuAKKHixOAni+eDy5PrC72//yZgUuuuOWqfY456rATPfq/9w3CaXMxn4Q99jvQlDHeuhM/5pKdd9JJR4oS6vu7zMjIu5F/vbAfaW+ztuqsuVR220wPjkwO7D13+003lhsORLlo2I+cWl2Y2gtED80EuGdu914QVDZdeXRvS71pzD89Tc0B4O2AHwvwae/GfAi7/2u41gLQKCB8uaKyB0JCyXUdFQ5oZUZQtADkd4kJIGjMpgkinBtiDppS64N2XjNiVi5R9MspKruSRm1VjGgZZYrGEs80/SxzSI9AH7cg6OUCAfScRcBKGUIG9kRFXWwMMSMbYJhhCKRnBkEs2BDMQJ/LhjPCPjyFDo3aJWnXqFmbVJuoKDRKwmvH5tJinA4tXOQKVrlahxwtpGRUNd5TXEmSW3Qqb2WpyJTjJMd+rEoXpShiYrwunE4SvE4q7Vo043RS4ojwFKTy8FR4xRoFOQOnKcPZ+OzlhIpwpNTaNVIow1FQasHrRAUTYTACS6MUkxRRCkvUW/XyRUuXL1+66JaddFjNgsnmMpspzDZSQRhBQuQMhy5zqoACrzXYfJNIpB4jyDuaTvkOk5BqEU+pNRFpxusg1lnsnWtWSUzWtOBHQ7DaGUEON6QQTaJFtFGV5CKt/6LX6Ko7W5jQFCYvYBKZB2R9/32t4wAA) format('woff2-variations');
  unicode-range: U+1F00-1FFF;
}
/* noto-sans-hebrew-hebrew-wght-normal */
@font-face {
  font-family: 'Noto Sans Hebrew Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/shadcn/assets/noto-sans-hebrew-hebrew-wght-normal-Bt6ehdp-.woff2) format('woff2-variations');
  unicode-range: U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F;
}
/* noto-sans-hebrew-latin-ext-wght-normal */
@font-face {
  font-family: 'Noto Sans Hebrew Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/shadcn/assets/noto-sans-hebrew-latin-ext-wght-normal-BojrQYZr.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* noto-sans-hebrew-latin-wght-normal */
@font-face {
  font-family: 'Noto Sans Hebrew Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/shadcn/assets/noto-sans-hebrew-latin-wght-normal-Dl_pbM6R.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/shadcn/fonts/geist-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/shadcn/fonts/geist-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist Fallback";
  src: local("Arial");
  ascent-override: 95.94%;
  descent-override: 28.16%;
  line-gap-override: 0%;
  size-adjust: 104.76%;
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/shadcn/fonts/geist-mono-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/shadcn/fonts/geist-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist Mono Fallback";
  src: local("Arial");
  ascent-override: 74.67%;
  descent-override: 21.92%;
  line-gap-override: 0%;
  size-adjust: 134.59%;
}
:root {
  --font-sans: "Geist", "Geist Fallback", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Geist Mono", "Geist Mono Fallback", ui-monospace, monospace;
  --header-height: 3.5rem;
  --footer-height: 3.5rem;
  --spacing: 0.25rem;
  --radius: 0.625rem;
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --radius-2xl: calc(var(--radius) + 8px);
  --radius-3xl: calc(var(--radius) + 12px);
  --radius-4xl: calc(var(--radius) + 16px);
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.97 0.01 17);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.809 0.105 251.813);
  --chart-2: oklch(0.623 0.214 259.815);
  --surface: oklch(0.98 0 0);
  --surface-foreground: var(--foreground);
  --code: var(--surface);
  --code-foreground: var(--surface-foreground);
  --code-highlight: oklch(0.96 0 0);
  --code-number: oklch(0.56 0 0);
  --selection: oklch(0.145 0 0);
  --selection-foreground: oklch(1 0 0);
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
}
.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.205 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.205 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.922 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.371 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --destructive-foreground: oklch(0.58 0.22 27);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.556 0 0);
  --surface: oklch(0.2 0 0);
  --surface-foreground: oklch(0.708 0 0);
  --code: var(--surface);
  --code-foreground: var(--surface-foreground);
  --code-highlight: oklch(0.27 0 0);
  --code-number: oklch(0.72 0 0);
  --selection: oklch(0.922 0 0);
  --selection-foreground: oklch(0.205 0 0);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.439 0 0);
}
* {
  box-sizing: border-box;
  border-color: var(--border);
}
::selection {
  background: var(--selection);
  color: var(--selection-foreground);
}
html,
body {
  margin: 0;
  padding: 0;
}
body {
  min-height: 100vh;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-synthesis-weight: none;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a {
  color: inherit;
  text-decoration: none;
}
.site-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--background);
}
.container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1rem;
}
@media (min-width: 1024px) {
  .container {
    padding: 0 2rem;
  }
}
@media (min-width: 1600px) {
  .container {
    max-width: 1536px;
  }

  .layout-fixed .site-header .container,
  .layout-fixed .home-preview-shell,
  .layout-fixed .theme-preview-section,
  .layout-fixed .example-preview-section,
  .layout-fixed .docs-layout {
    max-width: calc(1536px + 2rem);
    margin-left: auto;
    margin-right: auto;
  }
}
.site-header .container {
  max-width: none;
  padding: 0;
}
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  background: var(--background);
}
.header-row {
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.header-primary,
.header-actions,
.brand-link {
  display: flex;
  align-items: center;
}
.header-primary {
  gap: 0;
}
.header-actions {
  gap: 0.5rem;
}
.header-primary {
  min-width: 0;
}
.brand-link {
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-md);
  white-space: nowrap;
  transition: background-color 120ms ease, color 120ms ease;
}
.brand-link:hover {
  background: var(--accent);
  color: var(--accent-foreground);
}
.site-logo-icon {
  width: 1.25rem;
  height: 1.25rem;
}
.desktop-brand-link {
  display: inline-flex;
}
.mobile-nav-trigger,
.mobile-nav-links {
  display: none;
}
.mobile-nav-trigger {
  align-items: center;
  gap: 0.65rem;
  border: 0;
  background: transparent;
  color: var(--foreground);
  font: inherit;
  font-weight: 600;
  padding: 0;
  cursor: pointer;
}
.mobile-nav-trigger-icon {
  position: relative;
  width: 1rem;
  height: 1rem;
}
.mobile-nav-line {
  position: absolute;
  left: 0;
  width: 1rem;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transition: transform 120ms ease, top 120ms ease;
}
.mobile-nav-line-top {
  top: 0.28rem;
}
.mobile-nav-line-bottom {
  top: 0.7rem;
}
.mobile-nav-line-top.is-open,
.mobile-nav-line-bottom.is-open {
  top: 0.5rem;
}
.mobile-nav-line-top.is-open {
  transform: rotate(45deg);
}
.mobile-nav-line-bottom.is-open {
  transform: rotate(-45deg);
}
.mobile-nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  padding-top: calc(var(--header-height) + 1rem);
  background: color-mix(in oklab, var(--background) 70%, transparent);
  backdrop-filter: blur(12px);
}
.mobile-nav-panel {
  width: min(100% - 1rem, 32rem);
  margin: 0 auto;
  display: grid;
  gap: 1.25rem;
  border: 1px solid color-mix(in oklab, var(--border) 78%, transparent);
  border-radius: 1rem;
  background: color-mix(in oklab, var(--card) 95%, var(--muted) 5%);
  box-shadow: 0 24px 70px color-mix(in oklab, var(--foreground) 10%, transparent);
  padding: 1rem;
}
.mobile-nav-section {
  display: grid;
  gap: 0.7rem;
}
.mobile-nav-links {
  gap: 0.55rem;
}
.mobile-nav-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid color-mix(in oklab, var(--border) 84%, transparent);
  border-radius: 0.9rem;
  background: color-mix(in oklab, var(--muted) 18%, var(--card));
  padding: 0.85rem 0.95rem;
  font-size: 1rem;
  font-weight: 600;
}
.site-nav {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0;
}
.site-nav a {
  display: inline-flex;
  align-items: center;
  height: 2rem;
  padding: 0 0.625rem;
  border-radius: var(--radius-md);
  color: var(--foreground);
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color 120ms ease, color 120ms ease;
}
.site-nav a:hover,
.site-nav a.active-nav-link {
  color: var(--accent-foreground);
  background: var(--accent);
}
.header-actions {
  margin-left: auto;
}
.header-divider {
  flex: none;
  width: 1px;
  height: 1rem;
  background: var(--border);
}
.header-divider-search {
  margin-left: 0.5rem;
}
.header-divider-create {
  margin-right: 0.5rem;
}
.header-divider-wide {
  display: none;
}
.header-search-button,
.header-icon-link,
.header-create-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--foreground);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}
.header-search-button {
  flex: none;
  width: 16rem;
  height: 2rem;
  justify-content: flex-start;
  padding: 0 3rem 0 0.75rem;
  border: 1px solid var(--input);
  border-radius: var(--radius-lg);
  background: var(--background);
  color: var(--foreground);
  font-weight: 400;
}
.header-search-button:hover {
  background: color-mix(in oklab, var(--muted) 50%, transparent);
}
.dark .header-search-button {
  background: var(--card);
}
.header-search-short {
  display: none;
}
.header-icon-link {
  height: 2rem;
  gap: 0.375rem;
  padding: 0 0.625rem;
}
.header-icon-link:hover {
  background: var(--accent);
  color: var(--accent-foreground);
}
.header-github-icon {
  width: 1rem;
  height: 1rem;
}
.header-github-count {
  color: var(--muted-foreground);
  font-size: 0.75rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.header-create-link {
  height: 31px;
  gap: 0.375rem;
  border-radius: var(--radius-lg);
  padding: 0 0.625rem;
  background: var(--primary);
  color: var(--primary-foreground);
}
.header-create-link:hover {
  background: color-mix(in oklab, var(--primary) 90%, transparent);
}
.copy-icon-done {
  display: none;
}
[data-copied="true"] .copy-icon-idle {
  display: none;
}
[data-copied="true"] .copy-icon-done {
  display: inline-block;
}
.button-icon,
.button svg {
  flex: none;
  width: 1rem;
  height: 1rem;
}
.button-xs svg {
  width: 0.875rem;
  height: 0.875rem;
}
.header-create-link-mobile {
  display: none;
}
.header-mode-toggle {
  width: 2rem;
  height: 2rem;
  padding: 0;
}
.header-layout-toggle {
  display: none;
  width: 2rem;
  height: 2rem;
  padding: 0;
}
.header-divider-layout {
  display: block;
}
.header-layout-toggle-icon {
  display: inline-grid;
  gap: 0.16rem;
  width: 0.95rem;
}
.header-layout-toggle-icon span {
  display: block;
  height: 0.28rem;
  border: 1.5px solid currentColor;
  border-radius: 999px;
}
.header-layout-toggle[data-layout-mode="fixed"] .header-layout-toggle-icon span:first-child {
  width: 100%;
}
.header-layout-toggle[data-layout-mode="fixed"] .header-layout-toggle-icon span:last-child {
  width: 58%;
  justify-self: end;
}
.header-layout-toggle[data-layout-mode="full"] .header-layout-toggle-icon span:first-child,
.header-layout-toggle[data-layout-mode="full"] .header-layout-toggle-icon span:last-child {
  width: 100%;
}
.header-mode-toggle-icon {
  width: 1.125rem;
  height: 1.125rem;
}
.site-search-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: start center;
  padding: 4.5rem 1rem 1rem;
  background: color-mix(in oklab, var(--background) 65%, transparent);
  backdrop-filter: blur(12px);
}
.site-search-dialog {
  width: min(42rem, 100%);
  display: grid;
  gap: 0.9rem;
  border: 1px solid color-mix(in oklab, var(--border) 80%, transparent);
  border-radius: 1rem;
  background: color-mix(in oklab, var(--card) 94%, var(--muted) 6%);
  box-shadow: 0 28px 80px color-mix(in oklab, var(--foreground) 12%, transparent);
  padding: 1rem;
}
.site-search-header,
.site-search-status,
.site-search-result-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.site-search-header h2 {
  margin: 0.15rem 0 0;
  font-size: 1.05rem;
}
.site-search-close {
  white-space: nowrap;
}
.site-search-input {
  width: 100%;
  border: 1px solid color-mix(in oklab, var(--border) 82%, transparent);
  border-radius: 0.8rem;
  background: color-mix(in oklab, var(--muted) 30%, var(--card));
  color: var(--foreground);
  font: inherit;
  padding: 0.8rem 0.9rem;
}
.site-search-status {
  color: var(--muted-foreground);
  font-size: 0.85rem;
}
.site-search-status p,
.site-search-result-copy p,
.site-search-empty {
  margin: 0;
}
.site-search-shortcut,
.site-search-kind {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in oklab, var(--border) 82%, transparent);
  border-radius: 999px;
  background: color-mix(in oklab, var(--muted) 55%, var(--card));
  padding: 0.15rem 0.55rem;
  font-size: 0.73rem;
  font-weight: 700;
}
.site-search-results {
  display: grid;
  gap: 0.65rem;
}
.site-search-result {
  display: block;
  border: 1px solid color-mix(in oklab, var(--border) 84%, transparent);
  border-radius: 0.9rem;
  background: color-mix(in oklab, var(--muted) 16%, var(--card));
  padding: 0.85rem 0.9rem;
}
.site-search-result:hover {
  border-color: color-mix(in oklab, var(--foreground) 18%, var(--border));
  background: color-mix(in oklab, var(--muted) 42%, var(--card));
}
.site-search-result-copy {
  display: grid;
  gap: 0.3rem;
}
.site-search-result-copy strong {
  font-size: 0.96rem;
}
.site-search-result-copy p,
.site-search-path {
  color: var(--muted-foreground);
  font-size: 0.82rem;
}
.site-search-empty {
  border: 1px dashed color-mix(in oklab, var(--border) 82%, transparent);
  border-radius: 0.9rem;
  padding: 1rem;
  color: var(--muted-foreground);
  text-align: center;
}
.main-content {
  flex: 1;
  padding-top: 0;
  padding-bottom: 0;
}
.site-footer {
  border-top: 0;
}
@media (min-width: 1280px) {
  .site-shell {
    --footer-height: 6rem;
  }
}
.site-shell:has(.section-soft) .site-footer {
  background: color-mix(in oklab, var(--surface) 40%, transparent);
}
.site-shell:has([data-slot="docs"]) .site-footer {
  display: none;
}
.site-footer .container {
  max-width: none;
  padding: 0 1rem;
}
@media (min-width: 1280px) {
  .site-footer .container {
    padding: 0 1.5rem;
  }
}
.create-route-shell {
  min-height: 100vh;
  background:
    radial-gradient(circle at top, color-mix(in oklab, var(--primary) 9%, transparent), transparent 36%),
    linear-gradient(180deg, color-mix(in oklab, var(--muted) 35%, var(--background)), var(--background) 22%);
}
.create-header {
  position: sticky;
  top: 0;
  z-index: 60;
  backdrop-filter: blur(16px);
  background: color-mix(in oklab, var(--background) 88%, transparent);
  border-bottom: 1px solid color-mix(in oklab, var(--border) 72%, transparent);
}
.create-header-bar,
.create-header-main,
.create-header-actions,
.create-preview-header,
.create-preview-badges,
.create-command-actions,
.create-explorer-group-head,
.create-option-group-head {
  display: flex;
  align-items: center;
}
.create-header-bar {
  width: min(1540px, 100% - 2rem);
  min-height: calc(var(--header-height) + 0.5rem);
  margin: 0 auto;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.4rem 0;
}
.create-header-main,
.create-header-actions {
  gap: 0.75rem;
}
.create-header-main {
  min-width: 0;
}
.create-nav {
  min-width: 0;
}
.create-main-shell {
  width: min(1540px, 100% - 2rem);
  margin: 0 auto;
  padding: 1.25rem 0 2rem;
}
.create-workspace {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr);
}
.create-explorer-panel,
.create-preview-panel,
.create-customizer-panel {
  display: grid;
  align-content: start;
  gap: 1rem;
  border: 1px solid color-mix(in oklab, var(--border) 82%, transparent);
  border-radius: 1.1rem;
  background: color-mix(in oklab, var(--card) 90%, var(--muted) 10%);
  box-shadow: 0 24px 60px color-mix(in oklab, var(--foreground) 5%, transparent);
  overflow: hidden;
}
.create-explorer-panel,
.create-customizer-panel {
  padding: 1rem;
}
.create-preview-panel {
  padding: 1rem;
}
.create-panel-head {
  display: grid;
  gap: 0.45rem;
}
.create-panel-head-compact h2,
.create-preview-header h2,
.create-explorer-group-head h2,
.create-command-copy h3,
.create-option-group-head h3 {
  margin: 0;
}
.create-lead,
.create-customizer-copy,
.create-preview-copy {
  max-width: 56ch;
}
.create-search-card {
  background: color-mix(in oklab, var(--muted) 42%, var(--card));
}
.create-kind-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.create-kind-pill,
.create-item-button,
.create-option-card {
  border: 1px solid color-mix(in oklab, var(--border) 86%, transparent);
  background: color-mix(in oklab, var(--muted) 16%, var(--card));
  color: var(--foreground);
  font: inherit;
}
.create-kind-pill {
  border-radius: 999px;
  padding: 0.42rem 0.8rem;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}
.create-kind-pill.is-active,
.create-item-button.is-active,
.create-option-card.is-active {
  border-color: color-mix(in oklab, var(--foreground) 24%, var(--border));
  background: color-mix(in oklab, var(--primary) 12%, var(--card));
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--primary) 18%, transparent);
}
.create-explorer-groups,
.create-explorer-group,
.create-explorer-list,
.create-option-group,
.create-option-grid,
.create-command-card,
.create-command-copy {
  display: grid;
  gap: 0.75rem;
}
.create-explorer-group {
  padding-top: 0.2rem;
}
.create-explorer-group + .create-explorer-group {
  border-top: 1px solid color-mix(in oklab, var(--border) 72%, transparent);
  padding-top: 1rem;
}
.create-explorer-group-head,
.create-option-group-head,
.create-preview-header {
  justify-content: space-between;
  gap: 0.75rem;
}
.create-explorer-group-head span {
  color: var(--muted-foreground);
  font-size: 0.78rem;
  font-weight: 600;
}
.create-item-button,
.create-option-card {
  display: grid;
  gap: 0.25rem;
  width: 100%;
  border-radius: 0.85rem;
  padding: 0.8rem 0.9rem;
  text-align: left;
  cursor: pointer;
}
.create-item-title,
.create-option-title {
  font-size: 0.88rem;
  font-weight: 600;
}
.create-item-description,
.create-option-description {
  color: var(--muted-foreground);
  font-size: 0.8rem;
  line-height: 1.45;
}
.create-empty-state {
  margin: 0;
  border: 1px dashed color-mix(in oklab, var(--border) 82%, transparent);
  border-radius: 0.9rem;
  padding: 0.9rem;
  color: var(--muted-foreground);
  text-align: center;
}
.create-preview-header {
  align-items: flex-start;
}
.create-preview-badges {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.45rem;
}
.create-preview-badges span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--border) 86%, transparent);
  background: color-mix(in oklab, var(--muted) 48%, var(--card));
  padding: 0.32rem 0.65rem;
  color: var(--muted-foreground);
  font-size: 0.76rem;
  font-weight: 600;
}
.create-preview-stage-shell {
  border: 1px solid color-mix(in oklab, var(--border) 82%, transparent);
  border-radius: 1rem;
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--card) 95%, var(--muted) 5%), color-mix(in oklab, var(--card) 90%, var(--muted) 10%)),
    radial-gradient(circle at top, color-mix(in oklab, var(--primary) 10%, transparent), transparent 48%);
  overflow: hidden;
}
.create-preview-stage {
  min-height: 26rem;
  padding: 1rem;
}
.create-preview-stage-component,
.create-preview-stage-chart {
  display: grid;
  place-items: center;
}
.create-preview-stage-example {
  padding: 0;
}
.create-preview-stage-example > * {
  min-height: 26rem;
}
.create-preview-stage-block .block-preview-stage,
.create-preview-stage-block .block-preview-fallback {
  min-height: 22rem;
}
.create-preview-stage-block .block-preview-stage,
.create-preview-stage-chart .chart-code-view {
  display: block;
  width: 100%;
  max-height: 32rem;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--code);
}
.chart-code-view[hidden] {
  display: none;
}
.chart-code-source {
  margin: 0;
  max-height: 32rem;
  overflow: auto;
  padding: 1rem;
  color: var(--code-foreground);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.5rem;
  tab-size: 2;
}
.chart-preview-stage {
  margin: 0 auto;
}
.create-command-card {
  padding: 1rem;
  border: 1px solid color-mix(in oklab, var(--border) 82%, transparent);
  border-radius: 1rem;
  background: color-mix(in oklab, var(--muted) 26%, var(--card));
}
.create-command-code {
  margin: 0;
}
.create-command-actions {
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.create-option-grid {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.footer-row {
  height: var(--footer-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.footer-row p {
  width: 100%;
  padding: 0 0.25rem;
  color: var(--muted-foreground);
  font-size: 0.875rem;
  line-height: 2;
  text-align: center;
}
.footer-row a {
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.home-grid,
.stack-gap {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.home-grid {
  grid-template-columns: 1fr;
}
.card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  padding: 1rem;
}
.eyebrow {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.announcement-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  gap: 0.25rem;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0.125rem 0.5rem;
  background: var(--muted);
  color: var(--foreground);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1rem;
  white-space: nowrap;
  transition: background-color 120ms ease;
}
.announcement-chip:hover {
  background: color-mix(in oklab, var(--muted) 90%, var(--foreground));
}
.announcement-chip-arrow {
  width: 0.75rem;
  height: 0.75rem;
}
h1,
h2,
h3,
p {
  margin: 0;
}
h1 {
  margin-top: 0.45rem;
  font-size: clamp(1.75rem, 2.4vw, 2.4rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.lead {
  margin-top: 0.65rem;
  max-width: 64ch;
  color: var(--muted-foreground);
  line-height: 1.55;
}
.route-page-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 2rem 1.5rem;
  text-align: center;
}
.route-page-header h1 {
  margin-top: 0;
  max-width: 48rem;
  font-size: 1.875rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--primary);
  text-wrap: balance;
}
.route-page-header .lead {
  margin-top: 0;
  max-width: 56rem;
  color: var(--foreground);
  font-size: 1rem;
  line-height: 1.5rem;
  text-wrap: balance;
}
.route-page-header .cta-row {
  margin-top: 0;
  width: 100%;
  justify-content: center;
  gap: 0.5rem;
  padding-top: 0.5rem;
}
@media (min-width: 768px) {
  .route-page-header {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .route-page-header .lead {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}
@media (min-width: 1024px) {
  .route-page-header {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .route-page-header h1 {
    line-height: 1.1;
  }
}
@media (min-width: 1280px) {
  .route-page-header {
    gap: 1rem;
  }

  .route-page-header h1 {
    font-size: 3rem;
    letter-spacing: -0.05em;
  }
}
.cta-row,
.doc-nav {
  margin-top: 0.9rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.section-nav {
  display: flex;
  align-items: center;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.section-nav::-webkit-scrollbar {
  display: none;
}
.section-nav a {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 1.75rem;
  padding: 0 1rem;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5rem;
  text-align: center;
  white-space: nowrap;
  color: var(--muted-foreground);
  transition: color 120ms ease;
}
.section-nav-badge {
  display: inline-flex;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: #3b82f6;
}
.section-nav a:hover,
.section-nav a.section-nav-link-active {
  color: var(--primary);
}
.section-nav-row,
.route-nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.route-nav-row .section-nav {
  flex: 1;
  overflow: hidden;
}
.route-theme-container {
  display: grid;
  gap: 1rem;
}
.route-theme-container .example-detail-card,
.route-theme-container .chart-display-card {
  border-color: color-mix(in oklab, var(--route-theme-accent, var(--border)) 18%, var(--border));
  box-shadow: 0 18px 40px color-mix(in oklab, var(--route-theme-accent, var(--foreground)) 8%, transparent);
}
.section-nav-row .section-nav {
  flex: 1;
}
.section-nav-action {
  flex: none;
  margin-right: 1.75rem;
  white-space: nowrap;
}
.theme-selector-stub {
  display: none;
  flex: none;
  align-items: center;
  gap: 0.5rem;
  margin-right: 1rem;
}
.theme-selector-field {
  width: auto;
}
.ui-select-trigger.theme-selector-trigger {
  width: 9rem;
}
.dark .theme-selector-trigger {
  background: color-mix(in oklab, var(--input) 30%, transparent);
}
.theme-selector-copy.button {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  padding: 0;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--foreground);
}
.theme-selector-copy.button:hover {
  background: var(--accent);
  color: var(--accent-foreground);
}
.theme-selector-copy-icon {
  width: 1rem;
  height: 1rem;
}
.chart-display-copy .copy-icon-done {
  width: 0.75rem;
  height: 0.75rem;
}
.button {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  height: 2rem;
  border-radius: var(--radius-lg);
  border: 1px solid transparent;
  background: var(--primary);
  color: var(--primary-foreground);
  padding: 0 0.75rem;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}
.button:hover {
  background: color-mix(in oklab, var(--primary) 90%, transparent);
}
.button-sm {
  height: 31px;
}
.button-compact {
  padding: 0 0.625rem;
}
.button-xs {
  height: 1.75rem;
  padding: 0 0.625rem;
  gap: 0.25rem;
  border-radius: var(--radius-md);
  font-size: 0.8rem;
  line-height: 1.42857;
}
.button-ghost {
  background: transparent;
  color: var(--foreground);
}
.button-outline {
  border: 1px solid var(--border);
  background: var(--background);
  color: var(--foreground);
}
.button-outline:hover {
  background: var(--accent);
  color: var(--accent-foreground);
}
.button-secondary {
  background: var(--secondary);
  color: var(--secondary-foreground);
}
.button-secondary:hover {
  background: color-mix(in oklab, var(--secondary) 80%, transparent);
}
.button-ghost:hover {
  background: var(--accent);
  color: var(--accent-foreground);
}
.stats-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
}
.stat-label,
.slug {
  color: var(--muted-foreground);
  font-size: 0.82rem;
}
.stat-value {
  margin-top: 0.3rem;
  font-size: 1.6rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.control-card {
  display: grid;
  gap: 0.45rem;
}
.control-card input {
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 0.5rem 0.65rem;
  font: inherit;
}
.list-grid,
.pill-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
.pill-grid {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.list-item,
.pill-item {
  display: grid;
  gap: 0.35rem;
}
.pill-name {
  font-weight: 600;
}
.inline-code,
.doc-code {
  margin: 0 -0.25rem;
  border-radius: var(--radius-xl);
  border: 0;
  background: var(--code);
  color: var(--code-foreground);
  padding: 0.875rem 1rem;
  overflow-x: auto;
  scrollbar-width: none;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  line-height: 1.5rem;
}
.doc-code::-webkit-scrollbar {
  display: none;
}
.doc-code code {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
}
.shiki > code {
  display: grid;
  min-width: 100%;
}
.shiki-line {
  display: inline-block;
  min-height: 1.5rem;
  width: 100%;
}
.shiki > code[data-line-numbers] > .shiki-line::before {
  position: sticky;
  left: 0;
  display: inline-block;
  box-sizing: border-box;
  width: 3rem;
  padding-right: 1.25rem;
  background: var(--shiki-line-number-background, var(--code));
  color: var(--muted-foreground);
  content: attr(data-line-number);
  text-align: right;
  user-select: none;
}
.dark .shiki-token {
  color: var(--shiki-dark) !important;
  font-style: var(--shiki-dark-font-style) !important;
  font-weight: var(--shiki-dark-font-weight) !important;
  text-decoration: var(--shiki-dark-text-decoration) !important;
}
.docs-layout {
  display: grid;
  gap: 0;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  padding: 0 0.5rem;
  padding-bottom: 2rem;
  font-size: 15px;
}
@media (min-width: 1024px) {
  .docs-layout {
    grid-template-columns: 288px minmax(0, 1fr);
  }
}
@media (min-width: 1280px) {
  .docs-layout {
    grid-template-columns: 288px minmax(0, 1fr) 288px;
  }
}
.docs-sidebar {
  display: none;
  position: sticky;
  top: calc(var(--header-height) + 1px);
  max-height: calc(100vh - var(--header-height) - 1px);
  overflow-y: auto;
  scrollbar-width: none;
  padding: 4.375rem 3rem 2rem;
}
.docs-sidebar::-webkit-scrollbar {
  display: none;
}
@media (min-width: 1024px) {
  .docs-sidebar {
    display: block;
  }
}
.docs-sidebar-section {
  display: block;
}
.docs-sidebar-section + .docs-sidebar-section {
  margin-top: 1.5rem;
}
.docs-sidebar-label {
  display: flex;
  align-items: center;
  height: 2rem;
  padding: 0 0.5rem;
  border-radius: var(--radius-md);
  color: var(--muted-foreground);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1rem;
}
.docs-sidebar-section ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.docs-sidebar-section:first-child ul {
  gap: 0.25rem;
}
.docs-sidebar-section a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 1.875rem;
  border-radius: var(--radius-md);
  padding: 0 0.5rem;
  color: var(--foreground);
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1rem;
  transition: background-color 120ms ease, color 120ms ease;
}
.docs-sidebar-section a:hover {
  background: var(--accent);
  color: var(--accent-foreground);
}
.docs-sidebar-section a.docs-link-active {
  background: var(--accent);
  color: var(--primary);
  font-weight: 500;
}
.doc-main {
  min-width: 0;
}
.doc-main-shell {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: min(100%, 40rem);
  margin: 0 auto;
  padding: 3rem 1rem 2rem;
  color: oklch(0.269 0 0);
}
.dark .doc-main-shell {
  color: oklch(0.87 0 0);
}
@media (min-width: 768px) {
  .doc-main-shell {
    padding-left: 0;
    padding-right: 0;
  }
}
.doc-header {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.doc-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.doc-main-shell h1 {
  margin-top: 0;
  font-size: 1.875rem;
  font-weight: 600;
  line-height: 2.25rem;
  letter-spacing: -0.025em;
  color: var(--foreground);
}
.doc-header .lead {
  margin-top: 0;
  max-width: 80%;
  color: var(--muted-foreground);
  font-size: 1rem;
  line-height: 1.5rem;
  text-wrap: balance;
}
.doc-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.doc-icon-button.button {
  width: 1.75rem;
  height: 1.75rem;
  min-width: 1.75rem;
  padding: 0;
  border-radius: var(--radius-md);
  background: var(--secondary);
  color: var(--secondary-foreground);
}
.doc-icon-button.button:hover {
  background: color-mix(in oklab, var(--secondary) 80%, transparent);
}
.doc-copy-page.button {
  height: 1.75rem;
  border-radius: var(--radius-md);
  font-size: 0.875rem;
}
.doc-body {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  line-height: 1.625;
  padding-bottom: 4rem;
}
.doc-body h1,
.doc-body h2,
.doc-body h3 {
  color: inherit;
  font-weight: 500;
  letter-spacing: -0.025em;
  scroll-margin-top: 7rem;
}
.doc-body h2 {
  margin-top: 3rem;
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.doc-body h2:first-child {
  margin-top: 0;
}
.doc-body h3 {
  margin-top: 3rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.doc-body code {
  position: relative;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--muted);
  padding: 0.2rem 0.3rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  word-break: break-word;
}
.doc-body p {
  color: inherit;
}
.doc-body ul,
.doc-body ol {
  margin: 0;
  padding-left: 1.2rem;
  display: grid;
  gap: 0.35rem;
}
.doc-body blockquote {
  margin: 0;
  border-left: 3px solid var(--border);
  padding: 0.2rem 0 0.2rem 0.7rem;
  color: var(--muted-foreground);
}
.doc-image {
  margin: 0;
}
.doc-image img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: 0.9rem;
  background: color-mix(in oklab, var(--muted) 24%, var(--card));
}
.doc-body hr {
  border: 0;
  border-top: 1px solid var(--border);
}
.doc-component-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 1rem;
  margin-top: 0.5rem;
}
@media (min-width: 640px) {
  .doc-component-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.doc-body .doc-component-list a {
  color: inherit;
  font-size: 1rem;
  font-weight: 400;
  text-decoration: none;
}
.doc-body .doc-component-list a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.doc-body a {
  color: inherit;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.doc-tabs,
.doc-component-card-source {
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: color-mix(in oklab, var(--card) 88%, var(--muted) 12%);
  padding: 1rem;
}
.doc-callout {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0 -0.25rem;
  border: 1px solid var(--surface);
  border-radius: var(--radius-xl);
  background: var(--surface);
  color: var(--surface-foreground);
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.doc-callout[data-variant="success"] {
  border-color: oklch(0.596 0.145 163.225);
  background: oklch(0.95 0.052 163.051);
}
.dark .doc-callout[data-variant="success"] {
  border-color: oklch(0.765 0.177 163.223);
  background: oklch(0.378 0.077 168.94);
}
.doc-callout[data-variant="warning"] {
  border-color: oklch(0.769 0.188 70.08);
  background: oklch(0.962 0.059 95.617);
}
.dark .doc-callout[data-variant="warning"] {
  border-color: oklch(0.828 0.189 84.429);
  background: oklch(0.414 0.112 45.904);
}
.doc-callout[data-variant="destructive"] {
  border-color: oklch(0.577 0.245 27.325);
  background: oklch(0.936 0.032 17.717);
}
.dark .doc-callout[data-variant="destructive"] {
  border-color: oklch(0.704 0.191 22.216);
  background: oklch(0.396 0.141 25.723);
}
.doc-callout-title {
  margin: 0;
  font-weight: 500;
  line-height: 1;
}
.doc-callout-body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  color: color-mix(in oklab, var(--card-foreground) 80%, transparent);
}
.doc-callout-body p {
  color: inherit;
}
.doc-callout-body code {
  border: 1px solid var(--border);
}
.doc-tabs {
  display: grid;
  gap: 0.85rem;
}
.doc-tabs-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.doc-tab-button {
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--muted-foreground);
  padding: 0.45rem 0.75rem;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
}
.doc-tab-button-active,
.doc-tab-button:hover {
  background: var(--foreground);
  border-color: var(--foreground);
  color: var(--background);
}
.doc-tabs-panel {
  display: grid;
  gap: 0.8rem;
}
.doc-component-card-source {
  display: grid;
  gap: 0.85rem;
}
.doc-component-card:not(.doc-component-card-source) {
  display: block;
  overflow: hidden;
  margin: 1rem 0 3rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: var(--card);
}
.doc-component-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.85rem;
}
.doc-component-copy {
  display: grid;
  gap: 0.25rem;
}
.doc-component-copy h3 {
  margin: 0;
  font-size: 1rem;
}
/* Flex, not grid, to mirror the React docs' preview box: when a preview is
   taller than the padded stage, flex centres the overflow instead of pinning
   it to the top. */
.doc-component-preview-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 18rem;
  min-height: 18rem;
  background: var(--background);
  padding: 2.5rem;
}
/* Article-length previews grow instead of being clipped to the 18rem stage. */
.doc-component-preview-stage:has(.doc-typography-article),
.doc-component-preview-stage:has(.doc-typography-rtl-preview) {
  height: auto;
  min-height: 18rem;
  align-items: start;
}
.doc-component-preview-stage:has(.doc-typography-rtl-preview) {
  display: block;
  padding: 0;
}
.doc-component-code {
  position: relative;
  box-sizing: border-box;
  min-height: 6.5rem;
  overflow: hidden;
  border-top: 1px solid var(--border);
  background: color-mix(in oklab, var(--muted) 35%, var(--card));
}
.doc-component-code[data-doc-preview-code-expanded="false"]::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    color-mix(in oklab, var(--muted) 35%, var(--card)),
    color-mix(in oklab, var(--muted) 22%, transparent),
    transparent
  );
  content: "";
  pointer-events: none;
}
.doc-component-code[data-doc-preview-code-expanded="false"] {
  height: 6.5rem;
}
.doc-component-code[data-doc-preview-code-expanded="true"] {
  min-height: 18rem;
}
.doc-component-snippet,
.doc-component-full-code,
.doc-component-source-code {
  margin: 0;
}
.doc-component-snippet,
.doc-component-full-code {
  --shiki-line-number-background: color-mix(in oklab, var(--muted) 35%, var(--card));
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 1rem 1.25rem;
}
.doc-component-snippet {
  max-height: 6.5rem;
  overflow: hidden;
  padding-right: 7rem;
}
.doc-component-full-code {
  max-height: 18rem;
  overflow: auto;
  padding-top: 2.5rem;
}
.doc-body .doc-component-code code {
  background: transparent;
  padding: 0;
  white-space: pre;
  word-break: normal;
}
.doc-preview-code-toggle,
.doc-preview-code-copy {
  position: absolute;
  z-index: 1;
  height: 1.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--background);
  color: var(--foreground);
  padding: 0 0.75rem;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
}
.doc-preview-code-toggle {
  z-index: 2;
  top: 50%;
  left: 50%;
  height: 2rem;
  border-radius: 0.625rem;
  transform: translate(-50%, calc(-50% - 0.5rem));
}
.doc-preview-code-copy {
  top: 0.75rem;
  right: 1rem;
}
.doc-preview-code-toggle:hover,
.doc-preview-code-copy:hover {
  background: var(--accent);
}
.doc-component-card[data-doc-preview-name^="accordion-"] .doc-component-preview-stage {
  place-items: start center;
}
.doc-component-card[data-doc-preview-name="accordion-demo"] .doc-component-preview-stage,
.doc-component-card[data-doc-preview-name="accordion-basic"] .doc-component-preview-stage,
.doc-component-card[data-doc-preview-name="accordion-disabled"] .doc-component-preview-stage {
  height: 18.75rem;
  min-height: 18.75rem;
}
.doc-component-card[data-doc-preview-name="accordion-multiple"] .doc-component-preview-stage {
  height: 30rem;
  min-height: 30rem;
}
.doc-component-card[data-doc-preview-name="accordion-borders"] .doc-component-preview-stage {
  height: 20rem;
  min-height: 20rem;
}
.doc-component-card[data-doc-preview-name="accordion-card"] .doc-component-preview-stage {
  height: 28rem;
  min-height: 28rem;
}
.doc-component-card[data-doc-preview-name="accordion-rtl"] .doc-component-preview-stage,
.doc-component-card[data-doc-preview-name="alert-rtl"] .doc-component-preview-stage {
  display: block;
  height: 22rem;
  min-height: 22rem;
  padding: 0;
}
.doc-component-card[data-doc-preview-name^="alert-"]:not([data-doc-preview-name^="alert-dialog-"]):not([data-doc-preview-name="alert-rtl"]) .doc-component-preview-stage {
  height: 18rem;
  min-height: 18rem;
  padding: 1.5rem;
}
.doc-component-card[data-doc-preview-name^="alert-dialog-"]:not([data-doc-preview-name="alert-dialog-rtl"]) .doc-component-preview-stage {
  height: 14rem;
  min-height: 14rem;
}
.doc-component-card[data-doc-preview-name="alert-dialog-rtl"] .doc-component-preview-stage {
  display: block;
  height: 18rem;
  min-height: 18rem;
  padding: 0;
}
.doc-component-card[data-doc-preview-name="aspect-ratio-portrait"] .doc-component-preview-stage {
  height: 24rem;
  min-height: 24rem;
}
.doc-component-card[data-doc-preview-name="aspect-ratio-rtl"] .doc-component-preview-stage {
  display: block;
  height: 28rem;
  min-height: 28rem;
  padding: 0;
}
.doc-component-card[data-doc-preview-name="avatar-rtl"] .doc-component-preview-stage {
  display: block;
  height: 22rem;
  min-height: 22rem;
  padding: 0;
}
.doc-component-card[data-doc-preview-name="badge-rtl"] .doc-component-preview-stage {
  display: block;
  height: 22rem;
  min-height: 22rem;
  padding: 0;
}
.doc-component-card[data-doc-preview-name="breadcrumb-rtl"] .doc-component-preview-stage {
  display: block;
  height: 22rem;
  min-height: 22rem;
  padding: 0;
}
.doc-component-card[data-doc-preview-name="button-rtl"] .doc-component-preview-stage {
  display: block;
  height: 22rem;
  min-height: 22rem;
  padding: 0;
}
.doc-component-card[data-doc-preview-name="button-group-rtl"] .doc-component-preview-stage {
  display: block;
  height: 22rem;
  min-height: 22rem;
  padding: 0;
}
.doc-component-card[data-doc-preview-name="calendar-demo"] .doc-component-preview-stage,
.doc-component-card[data-doc-preview-name="calendar-basic"] .doc-component-preview-stage,
.doc-component-card[data-doc-preview-name="calendar-range"] .doc-component-preview-stage,
.doc-component-card[data-doc-preview-name="calendar-caption"] .doc-component-preview-stage,
.doc-component-card[data-doc-preview-name="calendar-booked-dates"] .doc-component-preview-stage,
.doc-component-card[data-doc-preview-name="calendar-week-numbers"] .doc-component-preview-stage {
  height: 24rem;
  min-height: 24rem;
}
.doc-component-card[data-doc-preview-name="calendar-hijri"] .doc-component-preview-stage { height: 25rem; min-height: 25rem; }
.doc-component-card[data-doc-preview-name="calendar-presets"] .doc-component-preview-stage { height: 40.625rem; min-height: 40.625rem; }
.doc-component-card[data-doc-preview-name="calendar-time"] .doc-component-preview-stage { height: 37.5rem; min-height: 37.5rem; }
.doc-component-card[data-doc-preview-name="calendar-custom-days"] .doc-component-preview-stage { height: 35rem; min-height: 35rem; }
.doc-component-card[data-doc-preview-name="calendar-rtl"] .doc-component-preview-stage { display: block; height: 28rem; min-height: 28rem; padding: 0; }
.doc-component-card[data-doc-preview-name="card-demo"] .doc-component-preview-stage { height: 30rem; min-height: 30rem; }
.doc-component-card[data-doc-preview-name="card-small"] .doc-component-preview-stage { height: 24rem; min-height: 24rem; }
.doc-component-card[data-doc-preview-name="card-image"] .doc-component-preview-stage { height: 32rem; min-height: 32rem; }
.doc-component-card[data-doc-preview-name="card-rtl"] .doc-component-preview-stage { display: block; height: 34rem; min-height: 34rem; padding: 0; }
.doc-component-card[data-doc-preview-name="carousel-demo"] .doc-component-preview-stage,
.doc-component-card[data-doc-preview-name="carousel-orientation"] .doc-component-preview-stage,
.doc-component-card[data-doc-preview-name="carousel-api"] .doc-component-preview-stage,
.doc-component-card[data-doc-preview-name="carousel-plugin"] .doc-component-preview-stage { height: 32rem; min-height: 32rem; }
.doc-component-card[data-doc-preview-name="carousel-size"] .doc-component-preview-stage,
.doc-component-card[data-doc-preview-name="carousel-spacing"] .doc-component-preview-stage { height: 18rem; min-height: 18rem; }
.doc-component-card[data-doc-preview-name="carousel-rtl"] .doc-component-preview-stage { display: block; height: 36rem; min-height: 36rem; padding: 0; }
.doc-component-card[data-doc-preview-name="chart-demo"] .doc-component-preview-stage { display: block; height: 438px; min-height: 438px; padding: 0; }
.doc-component-card[data-doc-preview-name^="chart-example"] .doc-component-preview-stage { height: 320px; min-height: 320px; }
.doc-component-card[data-doc-preview-name="chart-tooltip"] .doc-component-preview-stage { height: 288px; min-height: 288px; padding: 0; }
.doc-component-card[data-doc-preview-name="chart-rtl"] .doc-component-preview-stage { display: block; height: 432px; min-height: 432px; padding: 0; }
.doc-component-card[data-doc-preview-name^="context-menu-"]:not([data-doc-preview-name="context-menu-rtl"]) .doc-component-preview-stage { height: 288px; min-height: 288px; }
.doc-component-card[data-doc-preview-name="context-menu-rtl"] .doc-component-preview-stage { display: block; height: 352px; min-height: 352px; padding: 0; }
.doc-context-root { width: 100%; max-width: 320px; }
.doc-context-trigger { display: flex; width: 100%; aspect-ratio: 16 / 9; align-items: center; justify-content: center; border: 1px dashed var(--border); border-radius: var(--radius-xl); color: var(--foreground); font-size: 0.875rem; outline: none; user-select: none; }
.doc-context-trigger:focus-visible { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent); }
.doc-context-sides { display: grid; width: 384px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.doc-context-sides .doc-context-root { width: 184px; }
.doc-context-portal,
.doc-context-sub-portal { position: fixed; z-index: 140; inset: 0 auto auto 0; }
.doc-context-portal[hidden],
.doc-context-sub-portal[hidden] { display: none; }
.doc-context-menu-panel { position: fixed; box-sizing: border-box; min-width: 144px; max-height: calc(100vh - 16px); overflow-x: hidden; overflow-y: auto; border-radius: var(--radius-lg); padding: 0.25rem; color: var(--popover-foreground); background: var(--popover); box-shadow: 0 4px 10px rgb(0 0 0 / 14%); outline: 1px solid color-mix(in oklab, var(--foreground) 10%, transparent); outline-offset: -1px; }
.doc-context-menu-panel.is-wide { width: 192px; }
.doc-context-menu-panel.is-submenu { width: max-content; min-width: 176px; box-shadow: 0 8px 18px rgb(0 0 0 / 16%); }
.doc-context-item { position: relative; display: flex; width: 100%; min-height: 28px; align-items: center; gap: 0.375rem; border: 0; border-radius: var(--radius-md); padding: 0.25rem 0.375rem; color: var(--foreground); background: transparent; font: inherit; font-size: 0.875rem; line-height: 1.25rem; text-align: start; white-space: nowrap; outline: none; user-select: none; }
.doc-context-item:focus:not(:disabled),
.doc-context-item:hover:not(:disabled),
.doc-context-item[data-open] { color: var(--accent-foreground); background: var(--accent); }
.doc-context-item:disabled { pointer-events: none; opacity: 0.5; }
.doc-context-item.is-destructive { color: var(--destructive); }
.doc-context-item.is-destructive:focus,
.doc-context-item.is-destructive:hover { color: var(--destructive); background: color-mix(in oklab, var(--destructive) 10%, transparent); }
.doc-context-item > svg { width: 1rem; height: 1rem; flex: 0 0 1rem; color: var(--muted-foreground); }
.doc-context-item > kbd { margin-inline-start: auto; color: var(--muted-foreground); font-family: inherit; font-size: 0.75rem; letter-spacing: 0.1em; }
.doc-context-item[data-doc-context-check],
.doc-context-item[data-doc-context-radio] { padding-inline-end: 2rem; }
.doc-context-check { position: absolute; inset-inline-end: 0.5rem; display: inline-grid; width: 1rem; height: 1rem; place-items: center; }
.doc-context-check svg { display: none; width: 1rem; height: 1rem; }
.doc-context-item[data-checked="true"] .doc-context-check svg { display: block; }
.doc-context-sub { position: relative; }
.doc-context-sub > .doc-context-item > svg { margin-inline-start: auto; color: currentColor; }
.doc-context-menu-panel[dir="rtl"] .doc-context-sub > .doc-context-item > svg { transform: scaleX(-1); }
.doc-context-label { padding: 0.25rem 0.375rem; color: var(--muted-foreground); font-size: 0.75rem; font-weight: 500; line-height: 1rem; }
.doc-context-separator { height: 1px; margin: 0.25rem -0.25rem; background: var(--border); }
.doc-context-rtl-preview { box-sizing: border-box; height: 288px; align-items: center; }
.doc-context-rtl-preview .doc-context-root { font-family: "Noto Sans Arabic Variable", sans-serif; }
.doc-context-rtl-preview[data-lang="he"] .doc-context-root { font-family: "Noto Sans Hebrew Variable", sans-serif; }
.doc-component-card[data-doc-preview-name^="dialog-"]:not([data-doc-preview-name="dialog-rtl"]) .doc-component-preview-stage { height: 288px; min-height: 288px; }
.doc-component-card[data-doc-preview-name="dialog-rtl"] .doc-component-preview-stage { display: block; height: 352px; min-height: 352px; padding: 0; }
.doc-dialog-portal { position: fixed; z-index: 150; inset: 0; }
.doc-dialog-portal[hidden] { display: none; }
.doc-dialog-overlay { position: absolute; inset: 0; background: rgb(0 0 0 / 50%); }
.doc-dialog-content { position: fixed; z-index: 151; top: 50%; left: 50%; display: grid; box-sizing: border-box; width: min(512px, calc(100vw - 32px)); max-height: calc(100vh - 32px); gap: 1rem; overflow: hidden; transform: translate(-50%, -50%); border-radius: var(--radius-xl); padding: 1.5rem; color: var(--foreground); background: var(--background); box-shadow: 0 16px 50px rgb(0 0 0 / 28%); }
.doc-dialog-content.is-demo,
.doc-dialog-content.is-rtl { width: min(384px, calc(100vw - 32px)); }
.doc-dialog-content.is-close-button { width: min(448px, calc(100vw - 32px)); }
.doc-dialog-x { position: absolute; top: 1rem; inset-inline-end: 1rem; display: inline-grid; width: 24px; height: 24px; place-items: center; border: 0; border-radius: var(--radius-md); padding: 0; color: var(--muted-foreground); background: transparent; font-size: 1.25rem; line-height: 1; }
.doc-dialog-x:hover { color: var(--foreground); background: var(--muted); }
.doc-dialog-content header { display: grid; gap: 0.375rem; padding-inline-end: 1.5rem; }
.doc-dialog-content header h3,
.doc-dialog-content header p { margin: 0; }
.doc-dialog-content header h3 { font-size: 1.125rem; font-weight: 600; line-height: 1.5rem; }
.doc-dialog-content header p { color: var(--muted-foreground); font-size: 0.875rem; line-height: 1.25rem; }
.doc-dialog-fields { display: grid; gap: 1rem; }
.doc-dialog-fields label { display: grid; gap: 0.375rem; font-size: 0.875rem; font-weight: 500; }
.doc-dialog-fields input,
.doc-dialog-share input { box-sizing: border-box; width: 100%; height: 32px; border: 1px solid var(--input); border-radius: var(--radius-lg); padding: 0 0.625rem; color: var(--foreground); background: transparent; font: inherit; font-size: 0.875rem; outline: none; }
.doc-dialog-fields input:focus { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent); }
.doc-dialog-content footer { display: flex; justify-content: flex-end; gap: 0.5rem; }
.doc-dialog-content.is-close-button footer { justify-content: flex-start; }
.doc-dialog-scroll { max-height: 50vh; overflow-y: auto; padding-inline: 0.25rem; }
.doc-dialog-scroll p { margin: 0 0 1rem; font-size: 0.875rem; line-height: 1.5; }
.doc-dialog-scroll p:last-child { margin-bottom: 0; }
.doc-dialog-content.is-sticky-footer footer { position: relative; padding-top: 0.25rem; background: var(--background); }
.doc-dialog-rtl-preview { box-sizing: border-box; height: 288px; align-items: center; }
.doc-dialog-rtl-preview .doc-dialog-preview { font-family: "Noto Sans Arabic Variable", sans-serif; }
.doc-dialog-rtl-preview[data-lang="he"] .doc-dialog-preview { font-family: "Noto Sans Hebrew Variable", sans-serif; }
.doc-component-card[data-doc-preview-name="field-demo"] .doc-component-preview-stage { height: 850px; min-height: 850px; }
.doc-component-card[data-doc-preview-name="field-input"] .doc-component-preview-stage,
.doc-component-card[data-doc-preview-name="field-textarea"] .doc-component-preview-stage,
.doc-component-card[data-doc-preview-name="field-select"] .doc-component-preview-stage,
.doc-component-card[data-doc-preview-name="field-slider"] .doc-component-preview-stage,
.doc-component-card[data-doc-preview-name="field-fieldset"] .doc-component-preview-stage,
.doc-component-card[data-doc-preview-name="field-radio"] .doc-component-preview-stage,
.doc-component-card[data-doc-preview-name="field-switch"] .doc-component-preview-stage,
.doc-component-card[data-doc-preview-name="field-choice-card"] .doc-component-preview-stage { height: 288px; min-height: 288px; }
.doc-component-card[data-doc-preview-name="field-checkbox"] .doc-component-preview-stage { height: 512px; min-height: 512px; }
.doc-component-card[data-doc-preview-name="field-group"] .doc-component-preview-stage { height: 384px; min-height: 384px; }
.doc-component-card[data-doc-preview-name="field-responsive"] .doc-component-preview-stage { height: 500px; min-height: 500px; }
.doc-component-card[data-doc-preview-name="field-rtl"] .doc-component-preview-stage { display: block; height: 755.25px; min-height: 755.25px; padding: 0; }
.doc-field-payment,
.doc-form-preview,
.doc-field-responsive,
.doc-field-form,
.doc-field-set,
.doc-field-group,
.doc-field { box-sizing: border-box; min-width: 0; }
.doc-form-preview { width: 100%; max-width: 384px; }
.doc-form-message { min-height: 20px; margin: 0; color: var(--destructive); font-size: 14px; }
.doc-field-payment { width: 100%; max-width: 448px; }
.doc-field-payment.is-rtl { font-family: "Noto Sans Arabic Variable", sans-serif; }
.doc-field-rtl-preview[data-lang="he"] .doc-field-payment { font-family: "Noto Sans Hebrew Variable", sans-serif; }
.doc-field-form,
.doc-field-set,
.doc-field-group { width: 100%; }
.doc-field-set { display: flex; flex-direction: column; gap: 16px; margin: 0; border: 0; padding: 0; }
.doc-field-group { display: flex; flex-direction: column; gap: 20px; }
.doc-field-group.is-nested { gap: 16px; }
.doc-field-group.is-checkboxes { gap: 12px; }
.doc-field-set.is-checkbox-set { gap: 12px; }
.doc-field { display: flex; width: 100%; flex-direction: column; gap: 8px; }
.doc-field.is-horizontal { flex-direction: row; align-items: center; }
.doc-field.is-horizontal.is-content { align-items: flex-start; }
.doc-field.is-fit { width: fit-content; }
.doc-field.is-disabled { opacity: 0.5; }
.doc-field-legend,
.doc-field-label,
.doc-field-description { margin: 0; }
.doc-field-legend { margin-bottom: 6px; font-size: 16px; font-weight: 500; line-height: 24px; }
.doc-field-legend.is-label,
.doc-field-label { width: fit-content; color: var(--foreground); font-size: 14px; font-weight: 500; line-height: 19.25px; }
.doc-field-legend:not(.is-label) { margin-bottom: 4px; }
.doc-field-legend.is-label { margin-bottom: 6.75px; }
.doc-field-label { display: flex; align-items: center; gap: 8px; }
.doc-field-label.is-normal { flex: auto; font-weight: 400; }
.doc-field-description { color: var(--muted-foreground); font-size: 14px; font-weight: 400; line-height: 21px; text-align: left; text-wrap: pretty; }
.doc-field-payment.is-rtl .doc-field-description { text-align: right; }
.doc-field-legend + .doc-field-description { margin-top: -6px; }
.doc-field > .doc-field-description:nth-last-child(2),
.doc-field-set > .doc-field-description:nth-last-child(2) { margin-top: -4px; }
.doc-field-description a { color: inherit; font-weight: 400; text-decoration: underline; text-underline-offset: 4px; }
.doc-field-grid { display: grid; gap: 16px; }
.doc-field-grid.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.doc-field-grid.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.doc-field-separator { position: relative; height: 20px; flex: none; margin: -8px 0; }
.doc-field-separator::after { position: absolute; inset-inline: 0; top: 50%; height: 1px; background: var(--border); content: ""; }
.doc-field-content { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 2px; line-height: 1.375; }
.doc-field-actions { gap: 8px; }
.doc-field-actions .doc-button { height: 32px; }
.ui-textarea.doc-field-textarea { min-height: 64px; resize: none; }
.doc-field-feedback { height: 64px; min-height: 64px; resize: vertical; }
.doc-field-width-xs { width: 100%; max-width: 320px; }
.doc-field-width-sm { width: 100%; max-width: 384px; }
.doc-field-checkbox svg { width: 14px; height: 14px; }
.doc-field-checkbox:disabled { cursor: not-allowed; }
.doc-field-radio-group { display: grid; width: 100%; gap: 8px; }
.doc-field-choice { display: flex; width: 100%; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius-lg); cursor: pointer; }
.doc-field-choice .doc-field { padding: 10px; }
.doc-field-choice[data-checked="true"] { border-color: color-mix(in oklab, var(--primary) 30%, transparent); background: color-mix(in oklab, var(--primary) 5%, transparent); }
.dark .doc-field-choice[data-checked="true"] { border-color: color-mix(in oklab, var(--primary) 20%, transparent); background: color-mix(in oklab, var(--primary) 10%, transparent); }
.doc-field-choice .ui-radio { margin-top: 1px; }
.doc-field-slider .ui-slider { height: 12px; margin-top: 0; }
.doc-field-slider .ui-slider-thumb { width: 12px; height: 12px; background: #fff; }
.doc-field-numeric { font-weight: 500; font-variant-numeric: tabular-nums; }
.doc-field-responsive { width: 100%; max-width: 512px; }
.doc-field.is-responsive { flex-direction: row; align-items: center; }
.doc-field.is-responsive > * { width: auto; }
.doc-field.is-responsive .doc-field-content { flex: 1; }
.doc-field.is-responsive .ui-input { width: 192px; }
.doc-rtl-preview.doc-field-rtl-preview { box-sizing: border-box; height: 691.25px; align-items: center; padding: 24px; }
.doc-field-rtl-preview .doc-field-payment { padding-block: 24px; }
@media (max-width: 767px) {
  .doc-field.is-responsive { flex-direction: column; align-items: stretch; }
  .doc-field.is-responsive > *,
  .doc-field.is-responsive .ui-input { width: 100%; }
  .doc-field.is-responsive.doc-field-actions { flex-direction: row; }
  .doc-field.is-responsive.doc-field-actions > * { width: auto; }
  .doc-component-card[data-doc-preview-name="field-demo"] .doc-component-preview-stage { height: auto; min-height: 850px; padding-inline: 24px; }
  .doc-component-card[data-doc-preview-name="field-rtl"] .doc-component-preview-stage { height: auto; min-height: 755.25px; }
  .doc-field-grid.is-three { gap: 12px; }
}
.doc-component-card[data-doc-preview-name="hover-card-demo"] { overflow: visible; }
.doc-component-card[data-doc-preview-name="hover-card-demo"] .doc-component-preview-stage { height: 320px; min-height: 320px; }
.doc-component-card[data-doc-preview-name="hover-card-sides"] { overflow: visible; }
.doc-component-card[data-doc-preview-name="hover-card-sides"] .doc-component-preview-stage { height: 352px; min-height: 352px; }
.doc-component-card[data-doc-preview-name="hover-card-rtl"] { overflow: visible; }
.doc-component-card[data-doc-preview-name="hover-card-rtl"] .doc-component-preview-stage { display: block; height: 384px; min-height: 384px; padding: 0; }
.doc-hover-card { display: inline-flex; }
.doc-hover-trigger { text-transform: none; }
.doc-hover-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.doc-hover-content { position: fixed; z-index: 80; box-sizing: border-box; display: flex; width: 256px; flex-direction: column; border-radius: 10px; background: var(--popover); color: var(--popover-foreground); padding: 10px; font-size: 14px; line-height: 20px; outline: none; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1), 0 0 0 1px color-mix(in oklab, var(--foreground) 10%, transparent); animation: doc-hover-card-in 100ms ease-out; }
.doc-hover-content[hidden] { display: none; }
.doc-hover-content strong,
.doc-hover-content p { margin: 0; }
.doc-hover-content strong { font-weight: 600; }
.doc-hover-content.is-demo { gap: 2px; }
.doc-hover-content.is-demo small { margin-top: 4px; color: var(--muted-foreground); font-size: 12px; line-height: 16px; }
.doc-hover-content.is-side,
.doc-hover-content.is-product { gap: 4px; }
.doc-hover-content.is-product p { color: var(--muted-foreground); }
.doc-rtl-preview.doc-hover-rtl-preview { box-sizing: border-box; height: 320px; align-items: center; padding: 24px; }
.doc-hover-rtl-grid { display: grid; gap: 16px; font-family: "Noto Sans Arabic Variable", sans-serif; }
.doc-hover-rtl-preview[data-lang="he"] .doc-hover-rtl-grid { font-family: "Noto Sans Hebrew Variable", sans-serif; }
@keyframes doc-hover-card-in {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}
.doc-component-card[data-doc-preview-name^="input-"]:not([data-doc-preview-name^="input-group-"]):not([data-doc-preview-name^="input-otp-"]):not([data-doc-preview-name="input-form"]):not([data-doc-preview-name="input-rtl"]) .doc-component-preview-stage { height: 288px; min-height: 288px; }
.doc-component-card[data-doc-preview-name="input-form"] .doc-component-preview-stage { height: 512px; min-height: 512px; }
.doc-component-card[data-doc-preview-name="input-rtl"] .doc-component-preview-stage { display: block; height: 352px; min-height: 352px; padding: 0; }
.doc-input-width { width: 100%; max-width: 320px; }
.doc-input-grid { display: grid; width: 100%; max-width: 384px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.doc-input-inline .ui-input { flex: 1; width: auto; }
.doc-input-inline .doc-button { width: 68.25px; }
.doc-input-width.is-disabled .doc-field-label { opacity: 0.5; }
.doc-input-field.is-disabled .ui-input,
.doc-input-width.is-disabled .ui-input { background: color-mix(in oklab, var(--input) 50%, transparent); opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.dark .doc-input-width.is-disabled .ui-input { background: color-mix(in oklab, var(--input) 80%, transparent); }
.doc-input-width.is-invalid .doc-field-label { color: var(--destructive); }
.doc-input-width.is-invalid .ui-input { border-color: var(--destructive); box-shadow: 0 0 0 3px color-mix(in oklab, var(--destructive) 20%, transparent); }
.dark .doc-input-width.is-invalid .ui-input { box-shadow: 0 0 0 3px color-mix(in oklab, var(--destructive) 40%, transparent); }
.doc-input-required { color: var(--destructive); }
.doc-input-file { padding-block: 3px; font-size: 14px; }
.doc-input-file::file-selector-button { display: inline-flex; height: 24px; align-items: center; margin: 0 8px 0 0; border: 0; background: transparent; color: var(--foreground); padding: 0; font: inherit; font-weight: 500; }
.doc-input-badge-label { width: 100%; }
.doc-input-badge { display: inline-flex; width: fit-content; height: 20px; align-items: center; justify-content: center; margin-inline-start: auto; border-radius: 999px; background: var(--secondary); color: var(--secondary-foreground); padding: 2px 8px; font-size: 12px; font-weight: 500; line-height: 16px; }
.doc-input-group .ui-input-group-input { height: 32px; padding-inline: 6px; }
.doc-input-button-group { display: flex; width: 100%; height: 32px; }
.doc-input-button-group .ui-input { min-width: 0; flex: 1; border-start-end-radius: 0; border-end-end-radius: 0; }
.doc-input-button-group .doc-button { width: 67.25px; border-color: var(--border); border-inline-start-width: 0; border-start-start-radius: 0; border-end-start-radius: 0; }
.doc-input-form { width: 100%; max-width: 384px; }
.doc-rtl-preview.doc-input-rtl-preview { box-sizing: border-box; height: 288px; align-items: center; padding: 40px; }
.doc-input-rtl-preview .doc-field { font-family: "Noto Sans Arabic Variable", sans-serif; }
.doc-input-rtl-preview[data-lang="he"] .doc-field { font-family: "Noto Sans Hebrew Variable", sans-serif; }
.doc-input-rtl-preview .doc-field-description { text-align: right; }
.doc-input-rtl-preview[dir="ltr"] .doc-field-description { text-align: left; }
.doc-component-card[data-doc-preview-name="input-group-demo"] .doc-component-preview-stage { height: 416px; min-height: 416px; }
.doc-component-card[data-doc-preview-name="input-group-inline-start"] .doc-component-preview-stage,
.doc-component-card[data-doc-preview-name="input-group-inline-end"] .doc-component-preview-stage { height: 192px; min-height: 192px; }
.doc-component-card[data-doc-preview-name="input-group-block-start"] .doc-component-preview-stage,
.doc-component-card[data-doc-preview-name="input-group-textarea"] .doc-component-preview-stage { height: 384px; min-height: 384px; }
.doc-component-card[data-doc-preview-name="input-group-block-end"] .doc-component-preview-stage { height: 416px; min-height: 416px; }
.doc-component-card[data-doc-preview-name="input-group-icon"] .doc-component-preview-stage,
.doc-component-card[data-doc-preview-name="input-group-text"] .doc-component-preview-stage,
.doc-component-card[data-doc-preview-name="input-group-spinner"] .doc-component-preview-stage { height: 320px; min-height: 320px; }
.doc-component-card[data-doc-preview-name="input-group-button"] .doc-component-preview-stage { height: 288px; min-height: 288px; }
.doc-component-card[data-doc-preview-name="input-group-kbd"] .doc-component-preview-stage { height: 160px; min-height: 160px; }
.doc-component-card[data-doc-preview-name="input-group-dropdown"] .doc-component-preview-stage,
.doc-component-card[data-doc-preview-name="input-group-custom"] .doc-component-preview-stage { height: 224px; min-height: 224px; }
.doc-component-card[data-doc-preview-name="input-group-rtl"] .doc-component-preview-stage { display: block; height: 544px; min-height: 544px; padding: 0; }
.doc-input-group-demo { width: 320px; }
.doc-input-group-field { width: 384px; }
.doc-input-group-stack { display: grid; width: 384px; gap: 24px; }
.doc-input-group-stack.is-tight { gap: 16px; }
.doc-input-group-wide { width: 384px; max-width: 384px; }
.doc-input-group-align-stack { width: 384px; gap: 20px; }
.doc-input-group-shell { box-sizing: border-box; }
.doc-input-group-shell.is-round { border-radius: 999px; }
.doc-input-group-shell.is-block { height: auto; flex-direction: column; align-items: stretch; }
.doc-input-group-shell.is-disabled { background: color-mix(in oklab, var(--input) 50%, transparent); opacity: 0.5; }
.dark .doc-input-group-shell.is-disabled { background: color-mix(in oklab, var(--input) 80%, transparent); }
.doc-input-group-shell.is-xs { width: 320px; }
.doc-input-group-shell .ui-input-group-input { height: 30px; padding-inline: 10px; }
.doc-input-group-shell:has(.ui-input-group-addon:not(.ui-input-group-addon-end)) .ui-input-group-input { padding-inline-start: 6px; }
.doc-input-group-shell:has(.ui-input-group-addon-end) .ui-input-group-input { padding-inline-end: 6px; }
.doc-input-group-shell .ui-input-group-addon-block { box-sizing: border-box; order: 1; min-height: 0; padding: 6px 10px 8px; }
.doc-input-group-shell .ui-input-group-addon-block.is-start { order: -1; padding: 8px 10px 6px; }
.doc-input-group-shell .ui-input-group-addon-block.has-border.is-start { border-bottom: 1px solid var(--border); }
.doc-input-group-shell .ui-input-group-addon-block.has-border.is-end { border-top: 1px solid var(--border); }
.doc-input-group-shell.is-block:has(.ui-input-group-addon-block.is-start) .ui-input-group-input { height: 34px; padding: 4px 10px 12px; }
.doc-input-group-shell.is-block:has(.ui-input-group-addon-block.is-end) .ui-input-group-input { height: 34px; padding: 12px 10px 4px; }
.doc-input-group-shell .ui-input-group-textarea { box-sizing: border-box; min-height: 64px; padding: 8px 10px; }
.doc-input-group-shell .ui-input-group-textarea.is-code { min-height: 200px; }
.doc-input-group-shell .ui-input-group-button { height: 24px; }
.doc-input-group-shell .ui-input-group-button svg { width: 16px; height: 16px; }
.doc-input-group-shell .ui-input-group-button:not(.ui-input-group-button-icon) { padding-inline: 8px; font-size: 12px; }
.doc-input-group-shell .ui-input-group-button-primary { color: var(--primary-foreground); }
.doc-input-group-shell .ui-input-group-addon-block.is-end .ui-input-group-button-primary { height: 32px; }
.doc-input-group-shell .ui-input-group-addon-block small { line-height: 16px; }
.doc-input-group-shell .push-end { margin-left: auto; }
.doc-input-group-prefix { padding-inline-start: 6px !important; }
.doc-input-group-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.doc-input-group-shell .ui-input-group-textarea.is-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.doc-input-group-kbd { display: inline-flex; min-width: 24px; height: 20px; align-items: center; justify-content: center; border-radius: 4px; background: var(--muted); color: var(--muted-foreground); padding-inline: 5px; font-family: inherit; font-size: 12px; }
.doc-input-group-shell .doc-input-group-menu { display: none; }
.doc-input-group-menu .ui-menu-panel { min-width: 128px; }
.doc-input-group-menu .ui-input-group-button svg { width: 14px; height: 14px; }
.doc-input-group-textarea-demo { width: 448px; }
.doc-input-group-custom { width: 384px; }
.doc-input-group-custom .ui-input-group-textarea { min-height: 64px; padding: 10px 12px; }
.doc-input-group-textarea-demo .doc-input-group-shell { height: 292px; }
.doc-input-group-textarea-demo .ui-input-group-textarea { flex: 1; }
.doc-rtl-preview.doc-input-group-rtl-preview { box-sizing: border-box; height: 480px; padding: 72px 40px; font-family: "Noto Sans Arabic Variable", sans-serif; }
.doc-input-group-rtl-preview[data-lang="he"] { font-family: "Noto Sans Hebrew Variable", sans-serif; }
.doc-input-group-rtl-preview .doc-input-group-stack { height: 336.25px; }
.doc-input-group-rtl-preview .doc-field { gap: 8px; }
.doc-input-group-rtl-preview .doc-field-description { text-align: right; }
.doc-input-group-rtl-preview[dir="ltr"] .doc-field-description { text-align: left; }
.doc-input-group-shell [data-doc-input-group-toggle="favorite"][data-active="true"] svg { fill: #2563eb; stroke: #2563eb; }
.doc-input-group-copy-done { display: none; }
[data-doc-input-group-toggle="copy"][data-copied="true"] .doc-input-group-copy-idle { display: none; }
[data-doc-input-group-toggle="copy"][data-copied="true"] .doc-input-group-copy-done { display: contents; }
.doc-input-group-popover { position: absolute; z-index: 70; top: calc(100% + 4px); left: 0; box-sizing: border-box; width: 288px; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--popover); color: var(--popover-foreground); padding: 16px; box-shadow: 0 4px 12px color-mix(in oklab, #000 10%, transparent); font-size: 14px; line-height: 20px; }
.doc-input-group-popover strong { display: block; font-weight: 500; }
.doc-input-group-popover p { margin: 4px 0 0; }
.doc-component-card[data-doc-preview-name^="input-otp-"]:not([data-doc-preview-name="input-otp-form"]):not([data-doc-preview-name="input-otp-rtl"]) .doc-component-preview-stage { height: 288px; min-height: 288px; }
.doc-component-card[data-doc-preview-name="input-otp-form"] .doc-component-preview-stage { height: 480px; min-height: 480px; }
.doc-component-card[data-doc-preview-name="input-otp-rtl"] .doc-component-preview-stage { display: block; height: 352px; min-height: 352px; padding: 0; }
.doc-input-otp-root { position: relative; display: flex; height: 32px; align-items: center; color: var(--foreground); }
.doc-input-otp-root.is-standard { width: 192px; }
.doc-input-otp-root.is-separated { width: 224px; }
.doc-input-otp-root.is-split { width: 208px; }
.doc-input-otp-root.is-four { width: 128px; }
.doc-input-otp-root.is-controlled { width: 196.453125px; }
.doc-input-otp-root.is-form { width: 304px; height: 48px; }
.doc-input-otp-root.is-rtl { width: 320px; }
.doc-input-otp-root.is-disabled { opacity: 0.5; }
.doc-input-otp-root > [data-slot="input-otp"] { position: absolute; z-index: 5; inset: 0; box-sizing: border-box; width: 100%; height: 100%; border: 0; background: transparent; color: transparent; caret-color: transparent; font-family: monospace; letter-spacing: -0.5em; outline: none; }
.doc-input-otp-root > [data-slot="input-otp"]:disabled { cursor: not-allowed; }
.doc-input-otp-group { display: flex; width: fit-content; height: 32px; }
.doc-input-otp-slot { position: relative; display: flex; box-sizing: border-box; width: 32px; height: 32px; align-items: center; justify-content: center; border-top: 1px solid var(--input); border-right: 1px solid var(--input); border-bottom: 1px solid var(--input); background: transparent; font-size: 14px; line-height: 20px; }
.doc-input-otp-group .doc-input-otp-slot:first-child { border-left: 1px solid var(--input); border-radius: var(--radius-lg) 0 0 var(--radius-lg); }
.doc-input-otp-group .doc-input-otp-slot:last-child { border-radius: 0 var(--radius-lg) var(--radius-lg) 0; }
.doc-input-otp-group .doc-input-otp-slot:only-child { border-radius: var(--radius-lg); }
.doc-input-otp-slot[data-active="true"] { z-index: 1; border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent); }
.doc-input-otp-slot[data-active="true"]::after { width: 1px; height: 16px; background: var(--foreground); content: ""; animation: doc-input-otp-caret 1s steps(2, start) infinite; }
.doc-input-otp-slot:not(:empty)[data-active="true"]::after { display: none; }
.doc-input-otp-slot.is-invalid { z-index: 1; border-color: var(--destructive); }
.doc-input-otp-group:has(.doc-input-otp-slot.is-invalid) { z-index: 1; border-radius: var(--radius-lg); box-shadow: 0 0 0 3px color-mix(in oklab, var(--destructive) 20%, transparent); }
.dark .doc-input-otp-group:has(.doc-input-otp-slot.is-invalid) { box-shadow: 0 0 0 3px color-mix(in oklab, var(--destructive) 40%, transparent); }
.doc-input-otp-separator { display: flex; width: 16px; height: 32px; flex: none; align-items: center; justify-content: center; }
.doc-input-otp-separator svg { width: 16px; height: 16px; }
.doc-input-otp-root.is-form .doc-input-otp-separator { width: 40px; height: 48px; }
.doc-input-otp-root.is-form .doc-input-otp-separator svg { width: 24px; height: 24px; }
.doc-input-otp-group.is-large { height: 48px; }
.doc-input-otp-group.is-large .doc-input-otp-slot { width: 44px; height: 48px; font-size: 20px; line-height: 28px; }
.doc-input-otp-pattern { width: fit-content; }
.doc-input-otp-controlled { width: 196.453125px; height: 60px; }
.doc-input-otp-controlled p { margin: 8px 0 0; font-size: 14px; line-height: 20px; text-align: center; white-space: nowrap; }
.doc-input-otp-card { display: flex; box-sizing: border-box; width: 336px; height: 316px; flex-direction: column; gap: 16px; overflow: hidden; border-radius: var(--radius-xl); background: var(--card); color: var(--card-foreground); padding: 16px 0 0; box-shadow: 0 0 0 1px color-mix(in oklab, var(--foreground) 10%, transparent); font-size: 14px; }
.doc-input-otp-card h3,
.doc-input-otp-card p { margin: 0; }
.doc-input-otp-card-header { display: grid; gap: 4px; padding: 0 16px; }
.doc-input-otp-card-header h3 { font-size: 16px; font-weight: 600; line-height: 22px; }
.doc-input-otp-card-header p { color: var(--muted-foreground); line-height: 20px; }
.doc-input-otp-card-header strong { color: inherit; font-weight: 500; }
.doc-input-otp-card-content { padding: 0 16px; }
.doc-input-otp-label-row { display: flex; height: 24px; align-items: center; justify-content: space-between; }
.doc-input-otp-label-row .doc-button { height: 24px; gap: 4px; padding-inline: 8px; font-size: 12px; }
.doc-input-otp-label-row .doc-button svg { width: 12px; height: 12px; }
.doc-input-otp-card-content .doc-field { gap: 8px; }
.doc-input-otp-card-content .doc-field-description { line-height: 21px; }
.doc-input-otp-card .doc-field-description a { color: var(--muted-foreground); }
.doc-input-otp-card a { color: inherit; text-underline-offset: 4px; }
.doc-input-otp-card-footer { display: grid; gap: 8px; margin-top: auto; padding: 16px; background: color-mix(in oklab, var(--muted) 50%, transparent); }
.doc-input-otp-card-footer .doc-button { width: 100%; }
.doc-input-otp-card-footer p { color: var(--muted-foreground); line-height: 20px; }
.doc-input-otp-card-footer a { transition: color 150ms ease; }
.doc-input-otp-card-footer a:hover { color: var(--primary); }
.doc-input-otp-rtl-preview { box-sizing: border-box; height: 288px; padding: 40px; }
.doc-input-otp-rtl-field { width: 320px; font-family: "Noto Sans Arabic Variable", sans-serif; }
.doc-input-otp-rtl-preview[data-lang="he"] .doc-input-otp-rtl-field { font-family: "Noto Sans Hebrew Variable", sans-serif; }
.doc-input-otp-root[dir="rtl"] { justify-content: flex-start; }
.doc-input-otp-root[dir="rtl"] .doc-input-otp-group { direction: rtl; }
.doc-input-otp-root[dir="rtl"] .doc-input-otp-group .doc-input-otp-slot:first-child { border-right: 1px solid var(--input); border-left: 0; border-radius: 0 var(--radius-lg) var(--radius-lg) 0; }
.doc-input-otp-root[dir="rtl"] .doc-input-otp-group .doc-input-otp-slot:last-child { border-left: 1px solid var(--input); border-radius: var(--radius-lg) 0 0 var(--radius-lg); }
@keyframes doc-input-otp-caret { 50% { opacity: 0; } }
.doc-component-card[data-doc-preview-name="item-demo"] .doc-component-preview-stage,
.doc-component-card[data-doc-preview-name="item-icon"] .doc-component-preview-stage,
.doc-component-card[data-doc-preview-name="item-avatar"] .doc-component-preview-stage,
.doc-component-card[data-doc-preview-name="item-image"] .doc-component-preview-stage,
.doc-component-card[data-doc-preview-name="item-link"] .doc-component-preview-stage,
.doc-component-card[data-doc-preview-name="item-dropdown"] .doc-component-preview-stage { height: 288px; min-height: 288px; }
.doc-component-card[data-doc-preview-name^="item-"]:not([data-doc-preview-name="item-rtl"]) .doc-component-preview-stage { display: flex; align-items: center; justify-content: center; }
.doc-component-card[data-doc-preview-name="item-variant"] .doc-component-preview-stage,
.doc-component-card[data-doc-preview-name="item-size"] .doc-component-preview-stage,
.doc-component-card[data-doc-preview-name="item-group"] .doc-component-preview-stage,
.doc-component-card[data-doc-preview-name="item-header"] .doc-component-preview-stage { height: 384px; min-height: 384px; }
.doc-component-card[data-doc-preview-name="item-rtl"] .doc-component-preview-stage { display: block; height: 352px; min-height: 352px; padding: 0; }
.doc-item-stack { display: flex; box-sizing: border-box; width: 100%; min-width: 0; flex-direction: column; gap: 24px; }
.doc-item-stack.is-md { max-width: 448px; }
.doc-item-stack.is-lg { max-width: 512px; }
.doc-item-stack.is-sm { max-width: 384px; }
.doc-item-stack.is-image-list,
.doc-item-stack.is-group-list,
.doc-item-stack.is-link-list { gap: 16px; }
.doc-item { display: flex; box-sizing: border-box; width: 100%; min-width: 0; flex-wrap: wrap; align-items: center; gap: 10px; border: 1px solid transparent; border-radius: var(--radius); padding: 10px 12px; color: var(--foreground); background: transparent; font-size: 14px; text-decoration: none; outline: none; transition: color 100ms ease, background-color 100ms ease, border-color 100ms ease, box-shadow 100ms ease; }
.doc-item.is-outline { border-color: var(--border); }
.doc-item.is-muted { background: color-mix(in oklab, var(--muted) 50%, transparent); }
.doc-body a.doc-item { text-decoration: none; }
a.doc-item:hover { background: color-mix(in oklab, var(--accent) 50%, transparent); }
.doc-item:focus-visible { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent); }
.doc-item.is-xs { gap: 8px; padding: 8px 10px; }
.doc-item-content { display: flex; flex: 1 1 0%; flex-direction: column; gap: 4px; }
.doc-item-content.is-fixed { flex: 0 0 auto; text-align: center; }
.doc-item-content.is-compact { gap: 0; }
.doc-item-title { display: flex; width: fit-content; max-width: 100%; min-width: 0; align-items: center; gap: 8px; overflow: hidden; font-size: 14px; font-weight: 500; line-height: 19.25px; text-overflow: ellipsis; }
.doc-item-title span { color: var(--muted-foreground); }
.doc-item-description { display: -webkit-box; min-width: 0; margin: 0; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: var(--muted-foreground); font-size: 14px; font-weight: 400; line-height: 21px; text-wrap: balance; }
.doc-item.is-xs .doc-item-content { gap: 0; }
.doc-item.is-xs .doc-item-description { font-size: 12px; line-height: 18px; }
.doc-item-media { display: flex; flex: none; align-items: center; justify-content: center; gap: 8px; }
.doc-item:has(.doc-item-description) > .doc-item-media { align-self: flex-start; transform: translateY(2px); }
.doc-item-media.is-icon { width: 32px; height: 32px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--muted); }
.doc-item-media.is-icon svg { width: 16px; height: 16px; }
.doc-item-media.is-verified svg { width: 20px; height: 20px; }
.doc-item-actions { display: flex; flex: none; align-items: center; gap: 8px; }
.doc-item-actions > svg { width: 16px; height: 16px; }
.doc-item-avatar { width: 32px; height: 32px; border-radius: 999px; object-fit: cover; filter: grayscale(1); }
.doc-item-avatar.is-large { width: 40px; height: 40px; }
.doc-item-avatar.is-dropdown { width: 26px; height: 26px; }
.doc-item-avatar-group { display: flex; width: 80px; }
.doc-item-avatar-group img { box-sizing: border-box; width: 32px; height: 32px; border: 2px solid var(--background); border-radius: 999px; object-fit: cover; filter: grayscale(1); }
.doc-item-avatar-group img + img { margin-inline-start: -8px; }
.doc-item-song-image { width: 40px; height: 40px; border-radius: var(--radius-sm); object-fit: cover; filter: grayscale(1); }
.doc-item-header-grid { display: grid; box-sizing: border-box; width: 100%; max-width: 558px; min-width: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.doc-item.is-header { align-items: stretch; flex-wrap: wrap; }
.doc-item-header { display: flex; width: 100%; flex: 0 0 100%; align-items: center; justify-content: space-between; gap: 8px; }
.doc-item-header img { width: 100%; aspect-ratio: 1; border-radius: var(--radius-sm); object-fit: cover; }
.doc-item-dropdown { z-index: 1; }
.doc-item-dropdown:has(> .doc-item-dropdown-panel:not([hidden])) { z-index: 70; }
.doc-item-dropdown-panel { width: 192px; }
.doc-item-dropdown-option { height: auto; padding: 0; }
.doc-item-dropdown-option .doc-item { padding: 8px; }
.doc-item-dropdown-option .doc-item-title { line-height: 19.25px; }
.doc-item-dropdown-option .doc-item-description { line-height: 12px; }
.doc-item-rtl-preview { box-sizing: border-box; height: 288px; align-items: center; padding: 40px; }
.doc-item-rtl-preview .doc-item-stack { font-family: "Noto Sans Arabic Variable", sans-serif; }
.doc-item-rtl-preview[data-lang="he"] .doc-item-stack { font-family: "Noto Sans Hebrew Variable", sans-serif; }
.doc-item[dir="rtl"] > .doc-item-actions > svg { transform: scaleX(-1); }
@media (max-width: 640px) {
  .doc-item-avatar-group { width: 32px; }
  .doc-item-avatar-group img:not(:last-child) { display: none; }
}
.doc-component-card[data-doc-preview-name^="kbd-"]:not([data-doc-preview-name="kbd-rtl"]) .doc-component-preview-stage { display: flex; height: 288px; min-height: 288px; align-items: center; justify-content: center; }
.doc-component-card[data-doc-preview-name="kbd-rtl"] .doc-component-preview-stage { display: block; height: 352px; min-height: 352px; padding: 0; }
.doc-kbd-stack { display: flex; width: fit-content; flex-direction: column; align-items: center; gap: 16px; font-size: 15px; line-height: 22.5px; }
.doc-kbd { display: inline-flex; box-sizing: border-box; width: fit-content; min-width: 20px; height: 20px; align-items: center; justify-content: center; gap: 4px; border-radius: 6px; padding: 0 4px; color: var(--muted-foreground); background: var(--muted); font-family: var(--font-sans); font-size: 12px; font-weight: 500; line-height: 16px; user-select: none; pointer-events: none; }
.doc-kbd.is-shift { width: 22.171875px; }
.doc-kbd.is-enter { width: 21.125px; }
.doc-kbd-group { display: inline-flex; align-items: center; gap: 4px; color: inherit; font-family: inherit; font-size: inherit; font-style: normal; font-weight: inherit; line-height: inherit; }
.doc-kbd-copy { margin: 0; color: var(--muted-foreground); font-size: 14px; line-height: 21px; }
.doc-button.doc-kbd-button { width: 93.734375px; padding-inline-end: 8px; }
.doc-kbd-button .doc-kbd.is-inline-end { transform: translateX(2px); }
.doc-kbd-tooltip-buttons { display: flex; flex-wrap: wrap; gap: 0; }
.doc-kbd-tooltip-buttons.doc-button-group > .doc-button + .doc-button { margin-inline-start: -1px; }
.doc-kbd-input-group { width: 320px; max-width: 320px; }
.doc-kbd-input-group .doc-kbd { border-radius: 5px; }
.doc-kbd-rtl-preview { box-sizing: border-box; height: 288px; align-items: center; padding: 40px; }
.doc-kbd-rtl-preview .doc-kbd-stack { font-family: "Noto Sans Arabic Variable", sans-serif; }
.doc-kbd-rtl-preview[data-lang="he"] .doc-kbd-stack { font-family: "Noto Sans Hebrew Variable", sans-serif; }
.ui-tooltip[data-kbd-tooltip="true"] { display: flex; align-items: center; gap: 8px; border-radius: var(--radius-md); padding-inline-end: 6px; }
.ui-tooltip[data-kbd-tooltip="true"] .doc-kbd-group { gap: 4px; }
.ui-tooltip[data-kbd-tooltip="true"] .doc-kbd { color: var(--primary-foreground); background: color-mix(in oklab, var(--primary-foreground) 20%, transparent); }
.dark .ui-tooltip[data-kbd-tooltip="true"] .doc-kbd { background: color-mix(in oklab, var(--primary-foreground) 10%, transparent); }
.doc-component-card[data-doc-preview-name="label-demo"] .doc-component-preview-stage { display: flex; height: 288px; min-height: 288px; align-items: center; justify-content: center; }
.doc-component-card[data-doc-preview-name="label-rtl"] .doc-component-preview-stage { display: block; height: 352px; min-height: 352px; padding: 0; }
.docs-layout[data-doc-page="label"] .doc-component-card[data-doc-preview-name="field-demo"] .doc-component-preview-stage { height: 704px; min-height: 704px; }
.doc-label-demo { display: flex; width: fit-content; align-items: center; gap: 8px; }
.doc-label-demo .doc-checkbox-control { margin-top: 0; }
.doc-label-text { display: flex; height: 16px; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; line-height: 14px; user-select: none; }
.doc-label-rtl-preview { box-sizing: border-box; height: 288px; align-items: center; padding: 40px; }
.doc-label-rtl-preview .doc-label-demo { font-family: "Noto Sans Arabic Variable", sans-serif; }
.doc-label-rtl-preview[data-lang="he"] .doc-label-demo { font-family: "Noto Sans Hebrew Variable", sans-serif; }
.doc-component-card[data-doc-preview-name^="menubar-"] { overflow: visible; }
.doc-component-card[data-doc-preview-name^="menubar-"]:not([data-doc-preview-name="menubar-rtl"]) .doc-component-preview-stage { height: 288px; min-height: 288px; }
.doc-component-card[data-doc-preview-name="menubar-rtl"] .doc-component-preview-stage { display: block; height: 352px; min-height: 352px; padding: 0; }
.doc-menubar { display: flex; box-sizing: border-box; width: 288px; height: 32px; align-items: center; gap: 2px; border: 1px solid var(--border); border-radius: 10px; padding: 3px; color: var(--foreground); background: var(--background); }
.doc-menubar-menu { position: relative; display: inline-flex; }
.doc-menubar-trigger { display: flex; height: 24px; align-items: center; border: 0; border-radius: 6px; padding: 2px 6px; color: inherit; background: transparent; font-family: inherit; font-size: 14px; font-weight: 500; line-height: 20px; outline: none; white-space: nowrap; }
.doc-menubar-trigger:hover,
.doc-menubar-trigger:focus-visible,
.doc-menubar-trigger[aria-expanded="true"] { color: var(--accent-foreground); background: var(--accent); }
.doc-component-card .doc-menubar-panel { width: max-content; min-width: 144px; max-height: none; overflow: visible; }
.doc-component-card .doc-menubar-panel.is-wide { width: 256px; }
.doc-component-card .doc-menubar-panel.is-view { min-width: 176px; }
.doc-component-card .doc-menubar-menu > .doc-menubar-panel[data-menu-side="bottom"] { top: calc(100% + 8px); }
.doc-component-card .doc-menubar-menu > .doc-menubar-panel[data-menu-side="top"] { bottom: calc(100% + 8px); }
.doc-component-card .doc-menubar-menu > .doc-menubar-panel[data-menu-align="start"] { left: -4px; }
.doc-component-card .doc-menubar-menu > .doc-menubar-panel[data-menu-align="end"] { right: -4px; }
.doc-menubar-panel .ui-menu-item { min-height: 28px; border-radius: 8px; padding: 4px 6px; gap: 6px; font-size: 14px; line-height: 20px; }
.doc-menubar-panel .ui-menu-item[role="menuitemcheckbox"],
.doc-menubar-panel .ui-menu-item[role="menuitemradio"] { padding-inline: 32px 6px; }
.doc-menubar-panel .doc-dropdown-check,
.doc-menubar-panel .doc-dropdown-radio { inset-inline: 8px auto; }
.doc-menubar-panel .doc-dropdown-shortcut { font-size: 12px; line-height: 16px; letter-spacing: 0.1em; }
.doc-menubar-panel .ui-menu-separator { margin: 4px -4px; }
.doc-menubar-rtl-preview { box-sizing: border-box; height: 288px; align-items: center; padding: 40px; }
.doc-menubar-rtl-preview .doc-menubar { font-family: "Noto Sans Arabic Variable", sans-serif; }
.doc-menubar-rtl-preview[data-lang="he"] .doc-menubar { font-family: "Noto Sans Hebrew Variable", sans-serif; }
.doc-component-card[data-doc-preview-name^="native-select-"]:not([data-doc-preview-name="native-select-rtl"]) .doc-component-preview-stage { height: 288px; min-height: 288px; }
.doc-component-card[data-doc-preview-name="native-select-rtl"] .doc-component-preview-stage { display: block; height: 352px; min-height: 352px; padding: 0; }
.doc-native-select { position: relative; width: fit-content; color: var(--foreground); }
.doc-native-select select { display: block; box-sizing: border-box; height: 32px; appearance: none; border: 1px solid var(--input); border-radius: 10px; padding: 4px 32px 4px 10px; color: inherit; background: transparent; font-family: inherit; font-size: 14px; line-height: 20px; outline: none; user-select: none; transition: color 150ms, border-color 150ms, box-shadow 150ms, background-color 150ms; }
.doc-native-select > svg { pointer-events: none; position: absolute; top: 50%; right: 10px; width: 16px; height: 16px; transform: translateY(-50%); color: var(--muted-foreground); }
.doc-native-select.is-demo select { width: 129px; }
.doc-native-select.is-groups select { width: 188px; }
.doc-native-select.is-disabled { opacity: 0.5; }
.doc-native-select.is-disabled select { width: 106px; pointer-events: none; cursor: not-allowed; }
.doc-native-select.is-invalid select { width: 111px; border-color: var(--destructive); box-shadow: 0 0 0 3px color-mix(in oklab, var(--destructive) 20%, transparent); }
.doc-native-select select:focus-visible { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent); }
.dark .doc-native-select select { background: color-mix(in oklab, var(--input) 30%, transparent); }
.dark .doc-native-select select:hover:not(:disabled) { background: color-mix(in oklab, var(--input) 50%, transparent); }
.dark .doc-native-select.is-invalid select { border-color: color-mix(in oklab, var(--destructive) 50%, transparent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--destructive) 40%, transparent); }
.doc-native-select[dir="rtl"] select { width: 104px; padding: 4px 10px 4px 32px; }
.doc-native-select[dir="rtl"] > svg { right: auto; left: 10px; }
.doc-native-select-rtl-preview { box-sizing: border-box; height: 288px; align-items: center; padding: 40px; }
.doc-native-select-rtl-preview .doc-native-select { font-family: "Noto Sans Arabic Variable", sans-serif; }
.doc-native-select-rtl-preview[data-lang="he"] .doc-native-select { font-family: "Noto Sans Hebrew Variable", sans-serif; }
.doc-native-select-rtl-preview[data-lang="en"] .doc-native-select select { width: 129px; }
.doc-component-card[data-doc-preview-name^="navigation-menu-"] { overflow: visible; }
.doc-component-card[data-doc-preview-name="navigation-menu-demo"] .doc-component-preview-stage { height: 384px; min-height: 384px; }
.doc-component-card[data-doc-preview-name="navigation-menu-rtl"] .doc-component-preview-stage { display: block; height: 448px; min-height: 448px; padding: 0; }
.doc-navigation-menu { position: relative; z-index: 1; width: max-content; color: var(--foreground); }
.doc-navigation-menu:has(.doc-navigation-panel:not([hidden])) { z-index: 70; }
.doc-body .doc-navigation-list { display: flex; height: 36px; align-items: center; gap: 0; margin: 0; padding: 0; list-style: none; }
.doc-navigation-list > li { position: static; display: flex; }
.doc-navigation-trigger,
.doc-navigation-direct-link { display: inline-flex; box-sizing: border-box; height: 36px; align-items: center; border: 0; border-radius: 10px; padding: 6px 10px; color: inherit; background: var(--background); font-family: inherit; font-size: 14px; font-weight: 500; line-height: 20px; text-decoration: none; outline: none; }
.doc-navigation-trigger { gap: 4px; }
.doc-navigation-trigger svg { position: relative; top: 1px; width: 12px; height: 12px; transition: transform 150ms; }
.doc-navigation-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.doc-navigation-trigger:hover,
.doc-navigation-trigger:focus-visible,
.doc-navigation-trigger[aria-expanded="true"],
.doc-navigation-direct-link:hover,
.doc-navigation-direct-link:focus-visible { color: var(--accent-foreground); background: var(--accent); }
.doc-navigation-panel { position: absolute; z-index: 70; top: 42px; left: 0; box-sizing: border-box; border-radius: 10px; padding: 4px; color: var(--popover-foreground); background: var(--popover); box-shadow: 0 0 0 1px color-mix(in oklab, var(--foreground) 10%, transparent), 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -2px rgb(0 0 0 / 10%); }
.doc-navigation-panel[hidden] { display: none; }
.doc-navigation-panel.is-started { width: 392px; height: 170px; }
.doc-navigation-panel.is-components { width: 608px; height: 246px; }
.doc-body .doc-navigation-grid { gap: 0; margin: 0; padding: 0; list-style: none; }
.doc-body .doc-navigation-grid.is-started { display: block; width: 384px; }
.doc-body .doc-navigation-grid.is-components { display: grid; width: 600px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.doc-navigation-grid a { display: flex; box-sizing: border-box; flex-direction: column; gap: 4px; border-radius: 8px; padding: 8px; color: inherit; text-decoration: none; outline: none; }
.doc-navigation-grid.is-started a { height: 54px; }
.doc-navigation-grid.is-components a { height: 74px; }
.doc-navigation-grid a:hover,
.doc-navigation-grid a:focus-visible { background: var(--accent); color: var(--accent-foreground); }
.doc-navigation-title { font-size: 14px; font-weight: 500; line-height: 14px; }
.doc-navigation-description { display: -webkit-box; overflow: hidden; color: var(--muted-foreground); font-size: 14px; line-height: 20px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.doc-rtl-preview.doc-navigation-rtl-preview { box-sizing: border-box; height: 384px; align-items: center; padding: 40px; }
.doc-navigation-rtl-preview .doc-navigation-menu { font-family: "Noto Sans Arabic Variable", sans-serif; }
.doc-navigation-rtl-preview[data-lang="he"] .doc-navigation-menu { font-family: "Noto Sans Hebrew Variable", sans-serif; }
.doc-navigation-menu[dir="rtl"] .doc-navigation-panel { right: 0; left: auto; }
.doc-component-card[data-doc-preview-name^="pagination-"]:not([data-doc-preview-name="pagination-rtl"]) .doc-component-preview-stage { height: 288px; min-height: 288px; }
.doc-component-card[data-doc-preview-name="pagination-rtl"] .doc-component-preview-stage { display: block; height: 352px; min-height: 352px; padding: 0; }
.doc-pagination { display: flex; width: 100%; justify-content: center; color: var(--foreground); }
.doc-body .doc-pagination-content { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.doc-body .doc-pagination-content > li { margin: 0; }
.doc-pagination-link,
.doc-pagination-ellipsis { display: inline-flex; box-sizing: border-box; width: 32px; height: 32px; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 10px; padding: 0; color: inherit; background: transparent; font-size: 14px; font-weight: 400; line-height: 20px; text-decoration: none; outline: none; }
.doc-pagination-link.is-wide { width: auto; min-width: 32px; gap: 4px; padding: 6px; }
.doc-pagination-link.is-active { border-color: var(--border); background: var(--background); box-shadow: 0 1px 2px rgb(0 0 0 / 5%); }
.doc-pagination-link:hover,
.doc-pagination-link:focus-visible { background: var(--accent); color: var(--accent-foreground); }
.doc-pagination-link:focus-visible { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent); }
.doc-pagination-icon,
.doc-pagination-ellipsis svg { width: 16px; height: 16px; flex: 0 0 16px; }
.doc-pagination-icons-layout { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 16px; }
.doc-pagination-icons-layout .doc-pagination { width: auto; margin: 0; }
.doc-pagination-field { display: flex; width: fit-content; align-items: center; gap: 12px; color: var(--foreground); font-size: 14px; font-weight: 500; line-height: 20px; white-space: nowrap; }
.doc-pagination-select { position: relative; display: inline-flex; }
.doc-pagination-select > button { display: flex; box-sizing: border-box; width: 80px; height: 32px; align-items: center; justify-content: space-between; border: 1px solid var(--input); border-radius: 10px; padding: 4px 10px; color: inherit; background: transparent; font: inherit; font-weight: 400; outline: none; }
.doc-pagination-select > button:hover,
.doc-pagination-select > button[aria-expanded="true"] { background: var(--accent); }
.doc-pagination-select > button:focus-visible { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent); }
.doc-pagination-select > button svg { width: 16px; height: 16px; color: var(--muted-foreground); }
.doc-component-card .doc-pagination-select-panel { top: calc(100% + 4px); left: 0; width: 80px; min-width: 80px; padding: 4px; }
.doc-pagination-select-panel .ui-menu-item { min-height: 28px; border-radius: 8px; padding: 4px 8px; }
.dark .doc-pagination-select > button { background: color-mix(in oklab, var(--input) 30%, transparent); }
.doc-rtl-preview.doc-pagination-rtl-preview { box-sizing: border-box; height: 288px; align-items: center; padding: 40px; }
.doc-pagination-rtl-preview .doc-pagination { font-family: "Noto Sans Arabic Variable", sans-serif; }
.doc-pagination-rtl-preview[data-lang="he"] .doc-pagination { font-family: "Noto Sans Hebrew Variable", sans-serif; }
.doc-pagination[dir="rtl"] .doc-pagination-icon { transform: scaleX(-1); }
.doc-component-card[data-doc-preview-name^="popover-"] { overflow: visible; }
.doc-component-card[data-doc-preview-name^="popover-"]:not([data-doc-preview-name="popover-rtl"]) .doc-component-preview-stage { height: 288px; min-height: 288px; }
.doc-component-card[data-doc-preview-name="popover-rtl"] .doc-component-preview-stage { display: block; height: 352px; min-height: 352px; padding: 0; }
.doc-popover { position: relative; display: inline-flex; width: fit-content; color: var(--foreground); }
.doc-popover:has(.doc-popover-panel:not([hidden])) { z-index: 75; }
.doc-button.doc-popover-trigger { width: auto; min-width: 0; white-space: nowrap; }
.doc-popover-panel { position: absolute; z-index: 75; box-sizing: border-box; width: 320px; border: 1px solid var(--border); border-radius: 10px; padding: 16px; color: var(--popover-foreground); background: var(--popover); box-shadow: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -2px rgb(0 0 0 / 10%); outline: none; }
.doc-popover-panel[hidden] { display: none; }
.doc-popover-panel[data-side="bottom"] { top: calc(100% + 4px); }
.doc-popover-panel[data-side="top"] { bottom: calc(100% + 4px); }
.doc-popover-panel[data-side="left"] { top: 50%; right: calc(100% + 4px); transform: translateY(-50%); }
.doc-popover-panel[data-side="right"] { top: 50%; left: calc(100% + 4px); transform: translateY(-50%); }
.doc-popover-panel[data-side="bottom"][data-align="start"],
.doc-popover-panel[data-side="top"][data-align="start"] { left: 0; }
.doc-popover-panel[data-side="bottom"][data-align="center"],
.doc-popover-panel[data-side="top"][data-align="center"] { left: 50%; transform: translateX(-50%); }
.doc-popover-panel[data-side="bottom"][data-align="end"],
.doc-popover-panel[data-side="top"][data-align="end"] { right: 0; }
.doc-popover-header { display: grid; gap: 6px; }
.doc-popover-header h4,
.doc-popover-header p { margin: 0; }
.doc-popover-header h4 { font-size: 14px; font-weight: 500; line-height: 14px; }
.doc-popover-header p { color: var(--muted-foreground); font-size: 14px; line-height: 20px; }
.doc-popover-demo-content { display: grid; gap: 16px; }
.doc-popover-dimensions { display: grid; gap: 8px; }
.doc-popover-dimensions label { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; gap: 16px; font-size: 14px; line-height: 20px; }
.doc-popover-dimensions label > span { font-weight: 500; }
.doc-popover-dimensions input { grid-column: span 2; }
.doc-popover-panel input { box-sizing: border-box; width: 100%; height: 32px; border: 1px solid var(--input); border-radius: 10px; padding: 4px 10px; color: inherit; background: transparent; font-family: inherit; font-size: 14px; line-height: 20px; outline: none; }
.doc-popover-panel input:focus-visible { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent); }
.dark .doc-popover-panel input { background: color-mix(in oklab, var(--input) 30%, transparent); }
.doc-popover-panel.is-basic { min-height: 84px; }
.doc-popover-alignments { display: flex; align-items: center; gap: 24px; }
.doc-popover-alignments .doc-popover-trigger { height: 32px; padding-inline: 12px; }
.doc-popover-panel.is-alignment { width: 160px; font-size: 14px; line-height: 20px; }
.doc-popover-panel.is-form { width: 256px; }
.doc-popover-form-content,
.doc-popover-form-fields { display: grid; gap: 16px; }
.doc-popover-form-fields label { display: flex; align-items: center; gap: 12px; font-size: 14px; line-height: 20px; }
.doc-popover-form-fields label > span { width: 50%; font-weight: 500; }
.doc-popover-form-fields input { min-width: 0; }
.doc-rtl-preview.doc-popover-rtl-preview { box-sizing: border-box; height: 288px; align-items: center; padding: 40px; }
.doc-popover-rtl-group { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; font-family: "Noto Sans Arabic Variable", sans-serif; }
.doc-popover-rtl-preview[data-lang="he"] .doc-popover-rtl-group { font-family: "Noto Sans Hebrew Variable", sans-serif; }
.doc-popover-panel.is-rtl { width: 320px; direction: inherit; text-align: start; }
.doc-component-card[data-doc-preview-name^="progress-"]:not([data-doc-preview-name="progress-rtl"]) .doc-component-preview-stage { height: 288px; min-height: 288px; }
.doc-component-card[data-doc-preview-name="progress-rtl"] .doc-component-preview-stage { display: block; height: 352px; min-height: 352px; padding: 0; }
.doc-progress { position: relative; width: 100%; height: 8px; overflow: hidden; border-radius: 999px; background: color-mix(in oklab, var(--primary) 20%, transparent); }
.doc-progress-indicator { display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--primary); transition: transform 300ms ease; }
.doc-progress-demo { width: 60%; }
.doc-progress-field { display: flex; width: 100%; max-width: 384px; flex-direction: column; gap: 12px; }
.doc-progress-field > label { display: flex; align-items: center; font-size: 14px; font-weight: 500; line-height: 20px; }
.doc-progress-value { margin-inline-start: auto; }
.doc-progress-slider { height: 16px; margin-top: 4px; }
.doc-progress-slider .ui-slider-track { height: 4px; }
.doc-progress-slider .ui-slider-thumb { width: 16px; height: 16px; }
.doc-rtl-preview.doc-progress-rtl-preview { box-sizing: border-box; height: 288px; align-items: center; padding: 40px; }
.doc-progress-rtl-preview .doc-progress-field { font-family: "Noto Sans Arabic Variable", sans-serif; }
.doc-progress-rtl-preview[data-lang="he"] .doc-progress-field { font-family: "Noto Sans Hebrew Variable", sans-serif; }
.doc-progress-field[dir="rtl"] .doc-progress { transform: rotate(180deg); }
.doc-component-card[data-doc-preview-name^="radio-group-"]:not([data-doc-preview-name="radio-group-rtl"]) .doc-component-preview-stage { height: 288px; min-height: 288px; }
.doc-component-card[data-doc-preview-name="radio-group-rtl"] .doc-component-preview-stage { display: block; height: 352px; min-height: 352px; padding: 0; }
.doc-radio-group { display: grid; width: fit-content; gap: 12px; color: var(--foreground); }
.doc-radio-field { display: flex; align-items: flex-start; gap: 12px; }
.doc-radio-field > input,
.doc-radio-card > input { box-sizing: border-box; width: 16px; height: 16px; flex: 0 0 16px; appearance: none; border: 1px solid var(--input); border-radius: 999px; margin: 2px 0 0; background: transparent; outline: none; }
/* Fict's SSR does not serialise the `checked` property, so the selected state
   is mirrored onto data-checked and kept in sync on the client. */
.doc-radio-field > input:checked,
.doc-radio-card > input:checked,
.doc-radio-field > input[data-checked="true"],
.doc-radio-card > input[data-checked="true"] { border: 5px solid var(--primary); }
.doc-radio-field > input:hover:not(:disabled),
.doc-radio-card > input:hover:not(:disabled) { border-color: var(--ring); }
.doc-radio-field > input:focus-visible,
.doc-radio-card > input:focus-visible { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent); }
.doc-radio-field > input:disabled { cursor: not-allowed; opacity: 0.5; }
.doc-radio-field > label { display: grid; gap: 2px; font-size: 14px; font-weight: 500; line-height: 20px; }
.doc-radio-field label small,
.doc-radio-copy small { color: var(--muted-foreground); font-size: 14px; font-weight: 400; line-height: 20px; }
.doc-radio-field.is-disabled label { color: var(--muted-foreground); opacity: 0.5; }
.doc-radio-field.is-invalid label { color: var(--destructive); }
.doc-radio-field.is-invalid input { border-color: var(--destructive); }
.doc-radio-group.is-description,
.doc-radio-group.is-rtl { gap: 16px; }
.doc-radio-group.is-choice-card { gap: 8px; }
.doc-radio-card { display: flex; box-sizing: border-box; width: 384px; align-items: center; justify-content: space-between; gap: 16px; border: 1px solid var(--border); border-radius: 10px; padding: 10px; cursor: pointer; }
.doc-radio-card:has(input:checked),
.doc-radio-card:has(input[data-checked="true"]) {
  border-color: color-mix(in oklab, var(--primary) 30%, transparent);
  background: color-mix(in oklab, var(--primary) 5%, transparent);
}
.dark .doc-radio-card:has(input:checked),
.dark .doc-radio-card:has(input[data-checked="true"]) {
  border-color: color-mix(in oklab, var(--primary) 20%, transparent);
  background: color-mix(in oklab, var(--primary) 10%, transparent);
}
.doc-radio-copy { display: grid; gap: 2px; }
.doc-radio-copy strong { font-size: 14px; font-weight: 500; line-height: 20px; }
.doc-radio-fieldset { width: 320px; border: 0; margin: 0; padding: 0; color: var(--foreground); }
.doc-radio-fieldset legend { margin: 0 0 4px; padding: 0; font-size: 14px; font-weight: 500; line-height: 20px; }
.doc-radio-fieldset > p { margin: 0 0 16px; color: var(--muted-foreground); font-size: 14px; line-height: 20px; }
.doc-rtl-preview.doc-radio-rtl-preview { box-sizing: border-box; height: 288px; align-items: center; padding: 40px; }
.doc-radio-rtl-preview .doc-radio-group { font-family: "Noto Sans Arabic Variable", sans-serif; }
.doc-radio-rtl-preview[data-lang="he"] .doc-radio-group { font-family: "Noto Sans Hebrew Variable", sans-serif; }
.doc-component-card[data-doc-preview-name="resizable-demo"] .doc-component-preview-stage { height: 320px; min-height: 320px; }
.doc-component-card[data-doc-preview-name="resizable-vertical"] .doc-component-preview-stage,
.doc-component-card[data-doc-preview-name="resizable-handle"] .doc-component-preview-stage { height: 288px; min-height: 288px; }
.doc-component-card[data-doc-preview-name="resizable-rtl"] .doc-component-preview-stage { display: block; height: 352px; min-height: 352px; padding: 0; }
.doc-resizable-group { display: flex; box-sizing: border-box; overflow: hidden; border: 1px solid var(--border); border-radius: 10px; color: var(--foreground); }
.doc-resizable-group.is-horizontal { flex-direction: row; }
.doc-resizable-group.is-vertical { flex-direction: column; }
.doc-resizable-group.is-complex { width: 384px; height: 202px; }
.doc-resizable-group.is-simple { width: 384px; height: 200px; }
.doc-resizable-group.is-handle { width: 450px; height: 200px; }
.doc-resizable-group.is-nested { width: 100%; height: 100%; border: 0; border-radius: 0; }
.doc-resizable-panel { display: flex; min-width: 0; min-height: 0; flex-grow: 0; flex-shrink: 1; align-items: center; justify-content: center; padding: 24px; }
.doc-resizable-panel > strong { font-size: 14px; font-weight: 600; line-height: 20px; }
.doc-resizable-panel > .doc-resizable-group { margin: -24px; }
.doc-resizable-handle { position: relative; z-index: 1; display: flex; flex: 0 0 1px; align-items: center; justify-content: center; background: var(--border); outline: none; }
.doc-resizable-group.is-horizontal > .doc-resizable-handle { width: 1px; cursor: col-resize; }
.doc-resizable-group.is-vertical > .doc-resizable-handle { width: 100%; height: 1px; cursor: row-resize; }
.doc-resizable-handle:focus-visible { background: var(--ring); box-shadow: 0 0 0 1px var(--ring); }
.doc-resizable-handle > span { display: flex; box-sizing: border-box; width: 12px; height: 24px; flex: 0 0 auto; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 4px; background: var(--background); }
.doc-resizable-group.is-vertical > .doc-resizable-handle > span { width: 24px; height: 12px; transform: rotate(90deg); }
.doc-resizable-handle svg { width: 10px; height: 10px; }
.doc-rtl-preview.doc-resizable-rtl-preview { box-sizing: border-box; height: 288px; align-items: center; padding: 40px; }
.doc-resizable-rtl-preview .doc-resizable-group { font-family: "Noto Sans Arabic Variable", sans-serif; }
.doc-resizable-rtl-preview[data-lang="he"] .doc-resizable-group { font-family: "Noto Sans Hebrew Variable", sans-serif; }
.doc-component-card[data-doc-preview-name="scroll-area-demo"] .doc-component-preview-stage { height: 384px; min-height: 384px; }
.doc-component-card[data-doc-preview-name="scroll-area-horizontal-demo"] .doc-component-preview-stage { height: 512px; min-height: 512px; }
.doc-component-card[data-doc-preview-name="scroll-area-rtl"] .doc-component-preview-stage { display: block; height: 432px; min-height: 432px; padding: 0; }
.doc-scroll-area { position: relative; box-sizing: border-box; overflow: hidden; border: 1px solid var(--border); border-radius: 10px; color: var(--foreground); background: var(--background); }
.doc-scroll-area.is-vertical { width: 192px; height: 288px; }
.doc-scroll-area.is-horizontal { width: 384px; }
.doc-scroll-viewport { width: 100%; height: 100%; overflow: auto; scrollbar-width: none; }
.doc-scroll-viewport::-webkit-scrollbar { display: none; }
.doc-scroll-tags { padding: 16px; }
.doc-scroll-tags h4 { margin: 0 0 16px; font-size: 14px; font-weight: 500; line-height: 14px; }
.doc-scroll-tags > div { font-size: 14px; line-height: 20px; }
.doc-scroll-separator { display: block; height: 1px; margin: 8px 0; background: var(--border); }
.doc-scrollbar { position: absolute; display: flex; padding: 1px; touch-action: none; user-select: none; }
.doc-scrollbar.is-vertical { top: 0; right: 0; width: 10px; height: 100%; border-inline-start: 1px solid transparent; }
.doc-scroll-area[dir="rtl"] .doc-scrollbar.is-vertical { right: auto; left: 0; }
.doc-scrollbar.is-horizontal { right: 0; bottom: 0; left: 0; height: 10px; flex-direction: column; border-top: 1px solid transparent; }
.doc-scrollbar > span { position: relative; flex: 1; border-radius: 999px; background: var(--border); }
.doc-scrollbar.is-vertical > span { max-height: 56px; }
.doc-scrollbar.is-horizontal > span { max-width: 120px; }
.doc-scroll-works { display: flex; width: max-content; gap: 16px; padding: 16px; }
.doc-scroll-works figure { width: 300px; flex: 0 0 auto; margin: 0; }
.doc-scroll-works figure > div { overflow: hidden; border-radius: 8px; }
.doc-scroll-works img { display: block; width: 300px; height: 400px; object-fit: cover; }
.doc-scroll-works figcaption { padding-top: 8px; color: var(--muted-foreground); font-size: 12px; line-height: 16px; }
.doc-scroll-works figcaption strong { color: var(--foreground); font-weight: 600; }
.doc-rtl-preview.doc-scroll-rtl-preview { box-sizing: border-box; height: 368px; align-items: center; padding: 40px; }
.doc-scroll-rtl-preview .doc-scroll-area { font-family: "Noto Sans Arabic Variable", sans-serif; }
.doc-scroll-rtl-preview[data-lang="he"] .doc-scroll-area { font-family: "Noto Sans Hebrew Variable", sans-serif; }
.doc-component-card[data-doc-preview-name^="select-"]:not([data-doc-preview-name="select-rtl"]) { overflow: visible; }
.doc-component-card[data-doc-preview-name^="select-"]:not([data-doc-preview-name="select-rtl"]) .doc-component-preview-stage { height: 288px; min-height: 288px; }
.doc-component-card[data-doc-preview-name="select-rtl"] .doc-component-preview-stage { display: block; height: 352px; min-height: 352px; padding: 0; }
.doc-select { position: relative; display: inline-flex; width: 192px; color: var(--foreground); }
.doc-select.is-scrollable { width: 256px; }
.doc-select.is-rtl { width: 128px; }
.doc-select-trigger { display: flex; box-sizing: border-box; width: 100%; height: 32px; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid var(--input); border-radius: 10px; padding: 4px 10px; color: inherit; background: transparent; font-family: inherit; font-size: 14px; line-height: 20px; outline: none; }
.doc-select-trigger svg { width: 16px; height: 16px; flex: 0 0 16px; color: var(--muted-foreground); }
.doc-select-trigger:hover:not(:disabled),
.doc-select-trigger[aria-expanded="true"] { background: var(--accent); }
.doc-select-trigger:focus-visible { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent); }
.doc-select-trigger:disabled { cursor: not-allowed; opacity: 0.5; }
.doc-select-trigger[aria-invalid="true"] { border-color: var(--destructive); box-shadow: 0 0 0 3px color-mix(in oklab, var(--destructive) 20%, transparent); }
.dark .doc-select-trigger { background: color-mix(in oklab, var(--input) 30%, transparent); }
.doc-select-panel { position: absolute; z-index: 80; top: calc(100% + 4px); left: 0; box-sizing: border-box; width: max-content; min-width: 100%; max-height: 300px; overflow: auto; border: 1px solid var(--border); border-radius: 10px; padding: 4px; color: var(--popover-foreground); background: var(--popover); box-shadow: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -2px rgb(0 0 0 / 10%); }
.doc-select-panel[hidden] { display: none; }
.doc-select-panel.is-scrollable { width: 272px; max-height: 240px; }
.doc-select-item { position: relative; display: flex; box-sizing: border-box; width: 100%; min-height: 28px; align-items: center; border: 0; border-radius: 8px; padding: 4px 28px 4px 8px; color: inherit; background: transparent; font-family: inherit; font-size: 14px; line-height: 20px; text-align: start; outline: none; white-space: nowrap; }
.doc-select[dir="rtl"] .doc-select-item { padding: 4px 8px 4px 28px; }
.doc-select-item:hover,
.doc-select-item:focus-visible { background: var(--accent); color: var(--accent-foreground); }
.doc-select-item:disabled { pointer-events: none; opacity: 0.5; }
.doc-select-check { position: absolute; right: 8px; display: none; }
.doc-select[dir="rtl"] .doc-select-check { right: auto; left: 8px; }
.doc-select-item[aria-selected="true"] .doc-select-check { display: inline; }
.doc-select-label { display: block; padding: 4px 8px; color: var(--muted-foreground); font-size: 12px; line-height: 16px; }
.doc-select-separator { display: block; height: 1px; margin: 4px -4px; background: var(--border); }
.doc-select-align { display: grid; width: 320px; gap: 24px; }
.doc-select-align > label { display: flex; align-items: center; justify-content: space-between; }
.doc-select-align > label > span { display: grid; gap: 2px; }
.doc-select-align strong { font-size: 14px; font-weight: 500; line-height: 20px; }
.doc-select-align small { color: var(--muted-foreground); font-size: 14px; line-height: 20px; }
.doc-select-align [role="switch"] { position: relative; width: 32px; height: 18px; border: 0; border-radius: 999px; padding: 2px; background: var(--primary); }
.doc-select-align [role="switch"] span { display: block; width: 14px; height: 14px; border-radius: 999px; background: var(--background); transform: translateX(14px); transition: transform 150ms; }
.doc-select-align [role="switch"][aria-checked="false"] { background: var(--input); }
.doc-select-align [role="switch"][aria-checked="false"] span { transform: translateX(0); }
.doc-select-invalid-field { display: grid; width: 192px; gap: 8px; }
.doc-select-invalid-field > label { font-size: 14px; font-weight: 500; line-height: 20px; }
.doc-select-invalid-field > p { margin: 0; color: var(--destructive); font-size: 14px; line-height: 20px; }
.doc-rtl-preview.doc-select-rtl-preview { box-sizing: border-box; height: 288px; align-items: center; padding: 40px; }
.doc-select-rtl-preview .doc-select { font-family: "Noto Sans Arabic Variable", sans-serif; }
.doc-select-rtl-preview[data-lang="he"] .doc-select { font-family: "Noto Sans Hebrew Variable", sans-serif; }
.doc-select[dir="rtl"] .doc-select-panel { right: 0; left: auto; }
.doc-component-card[data-doc-preview-name^="separator-"]:not([data-doc-preview-name="separator-rtl"]) .doc-component-preview-stage { height: 288px; min-height: 288px; }
.doc-component-card[data-doc-preview-name="separator-rtl"] .doc-component-preview-stage { display: block; height: 352px; min-height: 352px; padding: 0; }
.doc-separator { display: block; flex-shrink: 0; background: var(--border); }
.doc-separator.is-horizontal { width: 100%; height: 1px; }
.doc-separator.is-vertical { width: 1px; height: 100%; }
.doc-separator-demo { display: flex; width: 384px; flex-direction: column; gap: 16px; color: var(--foreground); font-size: 14px; line-height: 20px; }
.doc-separator-demo > div { display: flex; flex-direction: column; gap: 6px; }
.doc-separator-demo strong { font-weight: 500; line-height: 14px; }
.doc-separator-demo > div > span { color: var(--muted-foreground); }
.doc-separator-demo p { margin: 0; }
.doc-separator-vertical { display: flex; height: 20px; align-items: center; gap: 16px; color: var(--foreground); font-size: 14px; line-height: 20px; }
.doc-separator-menu { display: flex; height: 36px; align-items: center; gap: 16px; color: var(--foreground); }
.doc-separator-menu > div { display: flex; flex-direction: column; gap: 4px; }
.doc-separator-menu strong { font-size: 14px; font-weight: 500; line-height: 16px; }
.doc-separator-menu small { color: var(--muted-foreground); font-size: 12px; line-height: 16px; white-space: nowrap; }
.doc-separator-list { display: flex; width: 384px; flex-direction: column; gap: 8px; color: var(--foreground); font-size: 14px; line-height: 20px; }
.doc-separator-list dl { display: flex; align-items: center; justify-content: space-between; margin: 0; }
.doc-separator-list dd { margin: 0; color: var(--muted-foreground); }
.doc-rtl-preview.doc-separator-rtl-preview { box-sizing: border-box; height: 288px; align-items: center; padding: 40px; }
.doc-separator-rtl-preview .doc-separator-demo { font-family: "Noto Sans Arabic Variable", sans-serif; }
.doc-separator-rtl-preview[data-lang="he"] .doc-separator-demo { font-family: "Noto Sans Hebrew Variable", sans-serif; }
.doc-component-card[data-doc-preview-name^="sheet-"]:not([data-doc-preview-name="sheet-rtl"]) .doc-component-preview-stage { height: 288px; min-height: 288px; }
.doc-component-card[data-doc-preview-name="sheet-rtl"] .doc-component-preview-stage { display: block; height: 352px; min-height: 352px; padding: 0; }
.doc-component-card[data-doc-preview-name="sidebar-demo"] .doc-component-preview-stage { box-sizing: border-box; height: 400px; min-height: 400px; padding: 0; }
.doc-sidebar-demo { display: flex; width: 100%; height: 100%; overflow: hidden; color: var(--foreground); background: var(--background); }
.doc-sidebar-panel { display: flex; box-sizing: border-box; width: 252px; min-width: 252px; height: 100%; flex-direction: column; border-inline-end: 1px solid var(--sidebar-border); background: var(--sidebar); transition: width 200ms linear, min-width 200ms linear; }
.doc-sidebar-team, .doc-sidebar-user, .doc-sidebar-nav-button { display: flex; box-sizing: border-box; width: 100%; align-items: center; gap: 8px; border: 0; border-radius: 8px; color: var(--sidebar-foreground); background: transparent; font: inherit; text-align: start; cursor: pointer; }
.doc-sidebar-team { height: 64px; padding: 10px 12px; }
.doc-sidebar-team:hover, .doc-sidebar-user:hover, .doc-sidebar-nav-button:hover { background: var(--sidebar-accent); color: var(--sidebar-accent-foreground); }
.doc-sidebar-team-logo { display: inline-flex; width: 32px; height: 32px; flex: 0 0 32px; align-items: center; justify-content: center; border-radius: 8px; color: var(--primary-foreground); background: var(--primary); font-size: 12px; }
.doc-sidebar-copy { min-width: 0; flex: 1; overflow: hidden; white-space: nowrap; }
.doc-sidebar-copy strong, .doc-sidebar-copy small { display: block; overflow: hidden; text-overflow: ellipsis; }
.doc-sidebar-copy strong { font-size: 14px; font-weight: 600; line-height: 18px; }
.doc-sidebar-copy small { font-size: 12px; line-height: 16px; }
.doc-sidebar-chevrons { flex: 0 0 auto; font-size: 9px; line-height: 7px; text-align: center; }
.doc-sidebar-content { min-height: 0; flex: 1; overflow: hidden auto; padding: 8px; }
.doc-sidebar-group-label { height: 28px; margin: 0; padding: 6px 4px; color: color-mix(in oklab, var(--sidebar-foreground) 70%, transparent); font-size: 12px; line-height: 16px; }
.doc-sidebar-nav-group + .doc-sidebar-nav-group { margin-top: 1px; }
.doc-sidebar-nav-button { height: 32px; padding: 6px 8px; font-size: 14px; line-height: 20px; }
.doc-sidebar-icon { width: 16px; height: 16px; flex: 0 0 16px; }
.doc-sidebar-chevron { width: 16px; flex: 0 0 16px; font-size: 18px; line-height: 16px; transition: transform 160ms ease; }
.doc-sidebar-nav-group[data-open="true"] > .doc-sidebar-nav-button .doc-sidebar-chevron { transform: rotate(90deg); }
.doc-sidebar-submenu { margin: 1px 0 2px 15px; padding-inline-start: 10px; border-inline-start: 1px solid var(--sidebar-border); }
.doc-sidebar-submenu a { display: flex; height: 32px; align-items: center; border-radius: 6px; padding: 0 8px; color: inherit; font-size: 14px; text-decoration: none; }
.doc-sidebar-submenu a:hover, .doc-sidebar-submenu a:focus-visible { background: var(--sidebar-accent); outline: none; }
.doc-sidebar-user { height: 56px; margin: 4px 8px 8px; width: calc(100% - 16px); padding: 6px; }
.doc-sidebar-user img { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 8px; object-fit: cover; }
.doc-sidebar-inset { min-width: 0; flex: 1; background: var(--background); }
.doc-sidebar-trigger { display: flex; width: 32px; height: 32px; align-items: center; justify-content: center; margin: 10px; border: 0; border-radius: 8px; color: var(--foreground); background: transparent; cursor: pointer; }
.doc-sidebar-trigger:hover { background: var(--accent); }
.doc-sidebar-trigger:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.doc-sidebar-trigger > span { position: relative; display: block; box-sizing: border-box; width: 14px; height: 14px; border: 1.5px solid currentColor; border-radius: 2px; }
.doc-sidebar-trigger > span::before { position: absolute; top: 0; bottom: 0; left: 4px; width: 1.5px; content: ""; background: currentColor; }
.doc-sidebar-demo[data-state="collapsed"] .doc-sidebar-panel { width: 48px; min-width: 48px; }
.doc-sidebar-demo[data-state="collapsed"] .doc-sidebar-copy, .doc-sidebar-demo[data-state="collapsed"] .doc-sidebar-chevrons, .doc-sidebar-demo[data-state="collapsed"] .doc-sidebar-chevron, .doc-sidebar-demo[data-state="collapsed"] .doc-sidebar-group-label, .doc-sidebar-demo[data-state="collapsed"] .doc-sidebar-submenu { display: none; }
.doc-sidebar-demo[data-state="collapsed"] .doc-sidebar-team { height: 48px; padding: 8px; }
.doc-sidebar-demo[data-state="collapsed"] .doc-sidebar-team-logo { width: 32px; }
.doc-sidebar-demo[data-state="collapsed"] .doc-sidebar-content { padding: 8px; }
.doc-sidebar-demo[data-state="collapsed"] .doc-sidebar-nav-button { justify-content: center; padding: 8px; }
.doc-sidebar-demo[data-state="collapsed"] .doc-sidebar-user { width: 40px; margin: auto 4px 4px; padding: 4px; }
@media (max-width: 639px) {
  .doc-component-card[data-doc-preview-name="sidebar-demo"] .doc-component-preview-stage { height: 320px; min-height: 320px; }
  .doc-sidebar-panel { width: 220px; min-width: 220px; }
}
.doc-component-card[data-doc-preview-name^="skeleton-"]:not([data-doc-preview-name="skeleton-card"]):not([data-doc-preview-name="skeleton-rtl"]) .doc-component-preview-stage { height: 288px; min-height: 288px; }
.doc-component-card[data-doc-preview-name="skeleton-card"] .doc-component-preview-stage { height: 320px; min-height: 320px; }
.doc-component-card[data-doc-preview-name="skeleton-rtl"] .doc-component-preview-stage { display: block; height: 352px; min-height: 352px; padding: 0; }
.doc-skeleton { display: block; height: 16px; flex: 0 0 auto; border-radius: 8px; background: var(--muted); animation: doc-skeleton-pulse 2s cubic-bezier(.4,0,.6,1) infinite; }
.doc-skeleton-profile { display: flex; width: fit-content; align-items: center; gap: 16px; }
.doc-skeleton-profile > div { display: grid; gap: 8px; }
.doc-skeleton-profile .is-avatar-lg { width: 48px; height: 48px; border-radius: 9999px; }
.doc-skeleton-profile .is-avatar-sm { width: 40px; height: 40px; border-radius: 9999px; }
.doc-skeleton-profile .is-w-250 { width: 250px; }
.doc-skeleton-profile .is-w-200 { width: 200px; }
.doc-skeleton-profile .is-w-150 { width: 150px; }
.doc-skeleton-profile .is-w-100 { width: 100px; }
.doc-skeleton-card { display: flex; box-sizing: border-box; width: 320px; flex-direction: column; gap: 16px; overflow: hidden; border-radius: 12px; padding: 16px 0; background: var(--card); box-shadow: 0 0 0 1px var(--border); }
.doc-skeleton-card header { display: grid; gap: 4px; padding: 0 16px; }
.doc-skeleton-card > div { padding: 0 16px; }
.doc-skeleton-card .is-w-192 { width: 192px; }
.doc-skeleton-card .is-w-144 { width: 144px; }
.doc-skeleton-card .is-card-media { width: 100%; height: auto; aspect-ratio: 16 / 9; }
.doc-skeleton-stack { display: flex; width: 320px; flex-direction: column; gap: 8px; }
.doc-skeleton-stack .is-full { width: 100%; }
.doc-skeleton-stack .is-three-quarters { width: 75%; }
.doc-skeleton-form { display: flex; width: 320px; flex-direction: column; gap: 28px; }
.doc-skeleton-form > div { display: flex; flex-direction: column; gap: 12px; }
.doc-skeleton-form .is-w-80 { width: 80px; }
.doc-skeleton-form .is-w-96, .doc-skeleton-table .is-w-96 { width: 96px; }
.doc-skeleton-form .is-input { width: 100%; height: 32px; }
.doc-skeleton-form .is-button { width: 96px; height: 32px; }
.doc-skeleton-table { display: flex; width: 384px; flex-direction: column; gap: 8px; }
.doc-skeleton-table > div { display: flex; gap: 16px; }
.doc-skeleton-table .is-flex { min-width: 0; flex: 1; }
.doc-skeleton-table .is-w-80 { width: 80px; }
.doc-rtl-preview.doc-skeleton-rtl-preview { box-sizing: border-box; height: 288px; align-items: center; padding: 40px; }
@keyframes doc-skeleton-pulse { 50% { opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .doc-skeleton { animation: none; } }
.doc-component-card[data-doc-preview-name^="slider-"]:not([data-doc-preview-name="slider-rtl"]) .doc-component-preview-stage { height: 288px; min-height: 288px; }
.doc-component-card[data-doc-preview-name="slider-rtl"] .doc-component-preview-stage { display: block; height: 352px; min-height: 352px; padding: 0; }
.doc-component-card .doc-slider { width: 320px; height: 12px; margin: 0; }
.doc-slider .ui-slider-track { height: 4px; }
.doc-slider .ui-slider-thumb { width: 12px; height: 12px; border-color: var(--primary); background: #fff; }
.doc-slider.is-disabled { cursor: not-allowed; opacity: .5; }
.doc-slider.is-disabled .ui-slider-thumb { cursor: not-allowed; }
.doc-slider-verticals { display: flex; width: 320px; align-items: center; justify-content: center; gap: 24px; }
.doc-slider.is-vertical { width: 12px; height: 160px; flex-direction: column; }
.doc-slider.is-vertical .ui-slider-track { width: 4px; height: 100%; }
.doc-slider.is-vertical .ui-slider-range { right: 0; left: 0; }
.doc-slider.is-vertical .ui-slider-thumb { transform: translate(-50%, -50%); }
.doc-slider-controlled { display: grid; width: 320px; gap: 12px; }
.doc-slider-controlled > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; line-height: 20px; }
.doc-slider-controlled label { font-weight: 500; }
.doc-slider-controlled > div > span { color: var(--muted-foreground); }
.doc-rtl-preview.doc-slider-rtl-preview { box-sizing: border-box; height: 288px; align-items: center; padding: 40px; }
.doc-component-card[data-doc-preview-name^="sonner-"] .doc-component-preview-stage { height: 288px; min-height: 288px; }
.doc-sonner-buttons { display: flex; max-width: 440px; flex-wrap: wrap; gap: 8px; }
.doc-sonner-buttons.is-position { justify-content: center; }
.doc-sonner-toaster { position: fixed; z-index: 200; display: flex; width: 356px; max-width: calc(100vw - 32px); flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.doc-sonner-toaster.is-top-left { top: 16px; left: 16px; }
.doc-sonner-toaster.is-top-center { top: 16px; left: 50%; transform: translateX(-50%); }
.doc-sonner-toaster.is-top-right { top: 16px; right: 16px; }
.doc-sonner-toaster.is-bottom-left { bottom: 16px; left: 16px; flex-direction: column-reverse; }
.doc-sonner-toaster.is-bottom-center { bottom: 16px; left: 50%; flex-direction: column-reverse; transform: translateX(-50%); }
.doc-sonner-toaster.is-bottom-right { right: 16px; bottom: 16px; flex-direction: column-reverse; }
.doc-sonner-toast { display: flex; box-sizing: border-box; min-height: 48px; align-items: center; gap: 6px; border: 1px solid var(--border); border-radius: 10px; padding: 16px; color: var(--foreground); background: var(--background); box-shadow: 0 4px 12px rgb(0 0 0 / 10%); font-size: 13px; line-height: 18px; opacity: 0; transform: translateY(-8px); transition: opacity 180ms ease, transform 180ms ease; pointer-events: auto; }
.doc-sonner-toast[data-mounted="true"] { opacity: 1; transform: translateY(0); }
.doc-sonner-content { display: grid; min-width: 0; flex: 1; gap: 2px; }
.doc-sonner-content strong { font-weight: 500; }
.doc-sonner-content span { color: var(--muted-foreground); }
.doc-sonner-icon { display: inline-flex; width: 16px; height: 16px; flex: 0 0 16px; align-items: center; justify-content: center; border: 1px solid currentColor; border-radius: 999px; font-size: 11px; font-weight: 700; }
.doc-sonner-toast.is-success .doc-sonner-icon { color: var(--success, #16a34a); }
.doc-sonner-toast.is-info .doc-sonner-icon { color: #2563eb; }
.doc-sonner-toast.is-warning .doc-sonner-icon { color: #d97706; }
.doc-sonner-toast.is-error .doc-sonner-icon { color: var(--destructive); }
.doc-sonner-toast > button { height: 24px; border: 0; border-radius: 6px; padding: 0 8px; color: var(--primary-foreground); background: var(--primary); font: inherit; font-weight: 500; cursor: pointer; }
.doc-toast-preview { display: flex; box-sizing: border-box; width: 356px; max-width: 100%; min-height: 72px; align-items: center; gap: 12px; border: 1px solid var(--border); border-radius: 10px; padding: 16px; color: var(--foreground); background: var(--background); box-shadow: 0 4px 12px rgb(0 0 0 / 10%); font-size: 13px; line-height: 18px; }
.doc-toast-preview > button { height: 28px; border: 1px solid var(--border); border-radius: 6px; padding: 0 10px; color: var(--foreground); background: transparent; font: inherit; font-weight: 500; cursor: pointer; }
.doc-sonner-toast:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.doc-component-card[data-doc-preview-name^="spinner-"]:not([data-doc-preview-name="spinner-rtl"]) .doc-component-preview-stage { height: 288px; min-height: 288px; }
.doc-component-card[data-doc-preview-name="spinner-rtl"] .doc-component-preview-stage { display: block; height: 352px; min-height: 352px; padding: 0; }
.doc-spinner { display: inline-block; flex: 0 0 auto; animation: doc-spinner-spin 1s linear infinite; }
.doc-spinner-item { display: flex; box-sizing: border-box; width: 320px; height: 52px; align-items: center; gap: 12px; border-radius: 16px; padding: 12px; background: var(--muted); }
.doc-spinner-item strong { min-width: 0; flex: 1; overflow: hidden; font-size: 14px; font-weight: 500; line-height: 20px; text-overflow: ellipsis; white-space: nowrap; }
.doc-spinner-item > span { flex: 0 0 auto; font-size: 14px; line-height: 20px; font-variant-numeric: tabular-nums; }
.doc-spinner-sizes, .doc-spinner-badges { display: flex; align-items: center; gap: 24px; }
.doc-spinner-buttons { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.doc-spinner-buttons .doc-button { gap: 6px; }
.doc-spinner-buttons .doc-button:disabled { cursor: not-allowed; opacity: .5; }
.doc-spinner-badges { gap: 16px; }
.doc-spinner-badges .doc-badge { gap: 4px; }
.doc-spinner-inputs { display: flex; width: 448px; flex-direction: column; gap: 16px; }
.doc-spinner-inputs .ui-input-group { box-sizing: border-box; width: 100%; }
.doc-spinner-inputs .ui-input-group-block { height: 96px; }
.doc-spinner-inputs .ui-input-group-addon-block { width: 100%; }
.doc-spinner-inputs .ui-input-group-button { margin-left: auto; }
.doc-spinner-empty { display: flex; width: 100%; flex-direction: column; align-items: center; text-align: center; }
.doc-spinner-empty > span { display: flex; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 10px; background: var(--muted); }
.doc-spinner-empty h3 { margin: 16px 0 0; font-size: 16px; line-height: 24px; }
.doc-spinner-empty p { max-width: 384px; margin: 4px 0 16px; color: var(--muted-foreground); font-size: 14px; line-height: 20px; }
.doc-rtl-preview.doc-spinner-rtl-preview { box-sizing: border-box; height: 288px; align-items: center; padding: 40px; }
@keyframes doc-spinner-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .doc-spinner { animation-duration: 2s; } }
.doc-component-card[data-doc-preview-name^="switch-"]:not([data-doc-preview-name="switch-rtl"]) .doc-component-preview-stage { height: 288px; min-height: 288px; }
.doc-component-card[data-doc-preview-name="switch-rtl"] .doc-component-preview-stage { display: block; height: 352px; min-height: 352px; padding: 0; }
.doc-switch-inline { display: flex; width: fit-content; align-items: center; gap: 8px; }
.doc-switch-inline label, .doc-switch-field label { font-size: 14px; font-weight: 500; line-height: 20px; }
.doc-switch-inline.is-disabled, .doc-switch-field.is-disabled { cursor: not-allowed; opacity: .5; }
.doc-switch-field { display: flex; box-sizing: border-box; width: 384px; align-items: flex-start; justify-content: space-between; gap: 16px; }
.doc-switch-field > div { min-width: 0; flex: 1; }
.doc-switch-field label { display: block; }
.doc-switch-field p { margin: 4px 0 0; color: var(--muted-foreground); font-size: 14px; line-height: 20px; }
.doc-switch-field.is-card { border: 1px solid var(--border); border-radius: 10px; padding: 10px; }
.doc-switch-field.is-card:has(.ui-switch[aria-checked="true"]) {
  border-color: color-mix(in oklab, var(--primary) 30%, transparent);
  background: color-mix(in oklab, var(--primary) 5%, transparent);
}
.dark .doc-switch-field.is-card:has(.ui-switch[aria-checked="true"]) {
  border-color: color-mix(in oklab, var(--primary) 20%, transparent);
  background: color-mix(in oklab, var(--primary) 10%, transparent);
}
.doc-switch-field.is-invalid label, .doc-switch-field.is-invalid p { color: var(--destructive); }
.doc-switch-field.is-invalid .ui-switch { border-color: var(--destructive); }
.doc-switch-cards { display: grid; width: 384px; gap: 20px; }
.doc-switch-sizes { display: grid; width: 160px; gap: 24px; }
.doc-switch-field[dir="rtl"] .ui-switch[data-checked="true"] span { transform: translateX(calc(-100% + 2px)); }
.doc-rtl-preview.doc-switch-rtl-preview { box-sizing: border-box; height: 288px; align-items: center; padding: 40px; font-family: "Noto Sans Arabic Variable", sans-serif; }
.doc-switch-rtl-preview[data-lang="he"] { font-family: "Noto Sans Hebrew Variable", sans-serif; }
.doc-component-card[data-doc-preview-name="table-demo"] .doc-component-preview-stage { height: 480px; min-height: 480px; }
.doc-component-card[data-doc-preview-name="table-footer"] .doc-component-preview-stage,
.doc-component-card[data-doc-preview-name="table-actions"] .doc-component-preview-stage { height: 288px; min-height: 288px; }
.doc-component-card[data-doc-preview-name="table-rtl"] { overflow: visible; }
.doc-component-card[data-doc-preview-name="table-rtl"] .doc-component-preview-stage { display: block; height: 451.5px; min-height: 451.5px; padding: 0; }
.doc-table-scroll { width: 100%; overflow: visible; }
.doc-table { width: 100%; border-collapse: collapse; color: var(--foreground); font-size: 14px; line-height: 20px; }
.doc-table caption { caption-side: bottom; height: 20px; margin-top: 16px; color: var(--muted-foreground); text-align: center; }
.doc-table th.is-invoice { width: 100px; }
.doc-table th { height: 40px; padding: 0 8px; color: var(--foreground); font-weight: 500; text-align: start; vertical-align: middle; }
.doc-table td { height: 37px; padding: 0 8px; border-top: 1px solid var(--border); text-align: start; vertical-align: middle; }
.doc-table td strong { font-weight: 500; }
.doc-table .is-numeric { text-align: end; }
.doc-table tfoot { background: var(--muted); font-weight: 500; }
.doc-table tfoot td { height: auto; padding: 8px; }
.doc-table tbody tr:hover { background: color-mix(in oklab, var(--muted) 50%, transparent); }
.doc-table-actions .doc-table-menu { display: inline-flex; position: relative; }
.doc-table-action { display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; border: 0; border-radius: 8px; color: inherit; background: transparent; font: inherit; letter-spacing: 1px; cursor: pointer; }
.doc-table-action:hover, .doc-table-action:focus-visible { background: var(--accent); outline: none; }
.doc-table-action:focus-visible { box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent); }
.doc-table-menu-panel { min-width: 128px; text-align: start; }
.doc-rtl-preview.doc-table-rtl-preview { box-sizing: border-box; height: auto; align-items: center; padding: 40px; font-family: "Noto Sans Arabic Variable", sans-serif; }
.doc-table-rtl-preview[data-lang="he"] { font-family: "Noto Sans Hebrew Variable", sans-serif; }
.doc-component-card[data-doc-preview-name="tabs-demo"] .doc-component-preview-stage { height: 384px; min-height: 384px; }
.doc-component-card[data-doc-preview-name^="tabs-"]:not([data-doc-preview-name="tabs-demo"]):not([data-doc-preview-name="tabs-rtl"]) .doc-component-preview-stage { height: 288px; min-height: 288px; }
.doc-component-card[data-doc-preview-name="tabs-rtl"] .doc-component-preview-stage { display: block; height: 352px; min-height: 352px; padding: 0; }
.doc-preview-tabs { display: grid; width: 400px; gap: 8px; }
.doc-preview-tabs-list { display: inline-flex; width: fit-content; height: 32px; align-items: center; gap: 0; border-radius: 10px; padding: 3px; background: var(--muted); color: var(--muted-foreground); }
.doc-preview-tab { display: inline-flex; height: 25px; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: 8px; padding: 2px 6px; color: inherit; background: transparent; font: inherit; font-size: 14px; font-weight: 500; white-space: nowrap; cursor: pointer; outline: none; }
.doc-preview-tab[aria-selected="true"] { color: var(--foreground); background: var(--background); box-shadow: 0 1px 2px rgb(0 0 0 / 6%); }
.doc-preview-tab:focus-visible { box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent); }
.doc-preview-tab:disabled { cursor: not-allowed; opacity: .5; }
.doc-preview-tab svg { width: 16px; height: 16px; }
.doc-preview-tabs.is-line { width: auto; }
.doc-preview-tabs.is-line .doc-preview-tabs-list { height: 32px; border-radius: 0; padding: 0; background: transparent; }
.doc-preview-tabs.is-line .doc-preview-tab { position: relative; height: 32px; border-radius: 0; box-shadow: none; }
.doc-preview-tabs.is-line .doc-preview-tab[aria-selected="true"]::after { position: absolute; right: 8px; bottom: -1px; left: 8px; height: 2px; content: ""; background: var(--foreground); }
.doc-preview-tabs.is-vertical { width: auto; }
.doc-preview-tabs.is-vertical .doc-preview-tabs-list { width: 128px; height: auto; flex-direction: column; align-items: stretch; }
.doc-preview-tabs.is-vertical .doc-preview-tab { width: 100%; justify-content: flex-start; }
.doc-preview-tabs-card { box-sizing: border-box; border-radius: 12px; padding: 16px 0; background: var(--card); box-shadow: 0 0 0 1px var(--border); }
.doc-preview-tabs-card h3 { margin: 0; padding: 0 16px; font-size: 16px; line-height: 22px; font-weight: 500; }
.doc-preview-tabs-card p { margin: 4px 0 16px; padding: 0 16px; color: var(--muted-foreground); font-size: 14px; line-height: 20px; }
.doc-preview-tabs-card > div { padding: 0 16px; color: var(--muted-foreground); font-size: 14px; line-height: 20px; }
.doc-rtl-preview.doc-tabs-rtl-preview { box-sizing: border-box; height: 288px; align-items: center; padding: 40px; font-family: "Noto Sans Arabic Variable", sans-serif; }
.doc-tabs-rtl-preview[data-lang="he"] { font-family: "Noto Sans Hebrew Variable", sans-serif; }
.doc-component-card[data-doc-preview-name^="textarea-"]:not([data-doc-preview-name="textarea-rtl"]) .doc-component-preview-stage { height: 288px; min-height: 288px; }
.doc-component-card[data-doc-preview-name="textarea-rtl"] .doc-component-preview-stage { display: block; height: 352px; min-height: 352px; padding: 0; }
.doc-textarea, .doc-textarea-field, .doc-textarea-button { box-sizing: border-box; width: 320px; }
.doc-textarea { display: block; min-height: 64px; resize: vertical; border: 1px solid var(--input); border-radius: 10px; padding: 8px 10px; color: var(--foreground); background: transparent; font: inherit; font-size: 14px; line-height: 20px; outline: none; }
.doc-textarea::placeholder { color: var(--muted-foreground); }
.doc-textarea:focus-visible { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent); }
.doc-textarea:disabled { cursor: not-allowed; opacity: .5; }
.doc-textarea[aria-invalid="true"] { border-color: var(--destructive); box-shadow: 0 0 0 3px color-mix(in oklab, var(--destructive) 20%, transparent); }
.doc-textarea-field { display: grid; gap: 8px; }
.doc-textarea-field label { font-size: 14px; font-weight: 500; line-height: 20px; }
.doc-textarea-field p { margin: 0; color: var(--muted-foreground); font-size: 14px; line-height: 20px; }
.doc-textarea-field.is-disabled { opacity: .5; }
.doc-textarea-field.is-invalid label, .doc-textarea-field.is-invalid p { color: var(--destructive); }
.doc-textarea-button { display: grid; gap: 8px; }
.doc-textarea-button .doc-button { width: 100%; }
.doc-rtl-preview.doc-textarea-rtl-preview { box-sizing: border-box; height: 288px; align-items: center; padding: 40px; font-family: "Noto Sans Arabic Variable", sans-serif; }
.doc-textarea-rtl-preview[data-lang="he"] { font-family: "Noto Sans Hebrew Variable", sans-serif; }
.doc-component-card[data-doc-preview-name^="toggle-"]:not([data-doc-preview-name="toggle-rtl"]) .doc-component-preview-stage { height: 288px; min-height: 288px; }
.doc-component-card[data-doc-preview-name="toggle-rtl"] .doc-component-preview-stage { display: block; height: 352px; min-height: 352px; padding: 0; }
.doc-toggle-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.doc-toggle { display: inline-flex; height: 32px; align-items: center; justify-content: center; gap: 6px; border: 1px solid transparent; border-radius: 10px; padding: 0 10px; color: var(--foreground); background: transparent; font: inherit; font-size: 14px; font-weight: 500; white-space: nowrap; cursor: pointer; outline: none; }
.doc-toggle:hover, .doc-toggle[aria-pressed="true"] { background: var(--accent); color: var(--accent-foreground); }
.doc-toggle.is-outline { border-color: var(--border); background: var(--background); }
.doc-toggle.is-outline:hover, .doc-toggle.is-outline[aria-pressed="true"] { background: var(--accent); }
.doc-toggle.is-sm { height: 28px; border-radius: 8px; padding-inline: 8px; }
.doc-toggle.is-lg { height: 36px; padding-inline: 12px; }
.doc-toggle:focus-visible { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent); }
.doc-toggle:disabled { cursor: not-allowed; opacity: .5; }
.doc-toggle svg { width: 16px; height: 16px; }
.doc-toggle[aria-pressed="true"] svg { fill: currentColor; }
.doc-toggle-letter { display: inline-flex; width: 16px; height: 16px; align-items: center; justify-content: center; font-family: serif; font-size: 15px; line-height: 16px; }
.doc-toggle-letter.is-italic { font-style: italic; }
.doc-toggle-letter.is-bold { font-weight: 700; }
.doc-rtl-preview.doc-toggle-rtl-preview { box-sizing: border-box; height: 288px; align-items: center; padding: 40px; font-family: "Noto Sans Arabic Variable", sans-serif; }
.doc-toggle-rtl-preview[data-lang="he"] { font-family: "Noto Sans Hebrew Variable", sans-serif; }
.doc-component-card[data-doc-preview-name^="toggle-group-"]:not([data-doc-preview-name="toggle-group-rtl"]) .doc-component-preview-stage { height: 288px; min-height: 288px; }
.doc-component-card[data-doc-preview-name^="toggle-group-"][data-doc-preview-name="toggle-group-rtl"] .doc-component-preview-stage { display: block; height: 352px; min-height: 352px; padding: 0; }
.doc-toggle-group { display: flex; width: fit-content; gap: 0; }
.doc-toggle-group[data-spacing="0"] { gap: 0; }
.doc-toggle-group[data-spacing="1"] { gap: 4px; }
.doc-toggle-group[data-spacing="2"] { gap: 8px; }
.doc-toggle-group.is-vertical { flex-direction: column; }
.doc-toggle-group-item { display: inline-flex; min-width: 32px; height: 32px; align-items: center; justify-content: center; gap: 4px; border: 1px solid transparent; border-radius: 10px; padding: 0 10px; color: var(--foreground); background: transparent; font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; outline: none; }
.doc-toggle-group-item:hover, .doc-toggle-group-item[aria-pressed="true"] { background: var(--accent); }
.doc-toggle-group.is-outline .doc-toggle-group-item { border-color: var(--border); background: var(--background); }
.doc-toggle-group[data-spacing="0"] .doc-toggle-group-item + .doc-toggle-group-item { margin-inline-start: -1px; }
.doc-toggle-group[data-spacing="0"]:not(.is-vertical) .doc-toggle-group-item:not(:first-child) { border-start-start-radius: 0; border-end-start-radius: 0; }
.doc-toggle-group[data-spacing="0"]:not(.is-vertical) .doc-toggle-group-item:not(:last-child) { border-start-end-radius: 0; border-end-end-radius: 0; }
.doc-toggle-group.is-sm .doc-toggle-group-item { min-width: 28px; height: 28px; border-radius: 8px; padding-inline: 8px; }
.doc-toggle-group.is-lg .doc-toggle-group-item { height: 36px; padding-inline: 12px; }
.doc-toggle-group-item:focus-visible,
.doc-toggle-group.is-outline .doc-toggle-group-item:focus-visible { position: relative; z-index: 1; border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent); }
.doc-toggle-group-item:disabled { cursor: not-allowed; opacity: .5; }
.doc-toggle-group-item svg { width: 16px; height: 16px; }
.doc-toggle-group-stack { display: flex; flex-direction: column; gap: 16px; }
.doc-toggle-font-field { display: grid; gap: 12px; }
.doc-toggle-font-field > label { font-size: 14px; font-weight: 500; }
.doc-toggle-group.is-font .doc-toggle-group-item { width: 64px; height: 64px; flex-direction: column; border-radius: 12px; padding: 0; }
.doc-toggle-group.is-font strong { font-size: 24px; line-height: 24px; }
.doc-toggle-group.is-font strong.is-light { font-weight: 300; }
.doc-toggle-group.is-font strong.is-normal { font-weight: 400; }
.doc-toggle-group.is-font strong.is-medium { font-weight: 500; }
.doc-toggle-group.is-font strong.is-bold { font-weight: 700; }
.doc-toggle-group.is-font small { color: var(--muted-foreground); font-size: 12px; line-height: 16px; }
.doc-toggle-font-field p { margin: 0; color: var(--muted-foreground); font-size: 14px; }
.doc-toggle-font-field code { border-radius: 6px; padding: 2px 4px; color: var(--foreground); background: var(--muted); }
.doc-rtl-preview.doc-toggle-group-rtl-preview { box-sizing: border-box; height: 288px; align-items: center; padding: 40px; font-family: "Noto Sans Arabic Variable", sans-serif; }
.doc-toggle-group-rtl-preview[data-lang="he"] { font-family: "Noto Sans Hebrew Variable", sans-serif; }
.doc-component-card[data-doc-preview-name^="tooltip-"]:not([data-doc-preview-name="tooltip-rtl"]) .doc-component-preview-stage { height: 288px; min-height: 288px; }
.doc-component-card[data-doc-preview-name^="tooltip-"][data-doc-preview-name="tooltip-rtl"] .doc-component-preview-stage { display: block; height: 352px; min-height: 352px; padding: 0; }
.doc-tooltip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.doc-tooltip-row .doc-tooltip-button { width: fit-content; text-transform: capitalize; }
.doc-tooltip-button.is-icon-sm { width: 32px; height: 32px; padding: 0; }
.doc-tooltip-button.is-icon-sm svg { width: 16px; height: 16px; }
.doc-tooltip-disabled { display: inline-block; width: fit-content; }
.doc-rtl-preview.doc-tooltip-rtl-preview { box-sizing: border-box; height: 288px; align-items: center; padding: 40px; font-family: "Noto Sans Arabic Variable", sans-serif; }
.doc-tooltip-rtl-preview[data-lang="he"] { font-family: "Noto Sans Hebrew Variable", sans-serif; }
.doc-sheet-sides { display: flex; flex-wrap: wrap; gap: 8px; }
.doc-sheet-sides .doc-button { text-transform: capitalize; }
.doc-sheet-content { position: fixed; z-index: 151; display: flex; box-sizing: border-box; flex-direction: column; gap: 24px; overflow: hidden; color: var(--foreground); background: var(--background); box-shadow: 0 16px 50px rgb(0 0 0 / 28%); outline: none; }
.doc-sheet-content.is-right,
.doc-sheet-content.is-left { top: 0; bottom: 0; width: min(400px, 80vw); padding: 24px 0; }
.doc-sheet-content.is-right { right: 0; border-left: 1px solid var(--border); }
.doc-sheet-content.is-left { left: 0; border-right: 1px solid var(--border); }
.doc-sheet-content.is-top,
.doc-sheet-content.is-bottom { right: 0; left: 0; max-height: 50vh; padding: 24px 0; }
.doc-sheet-content.is-top { top: 0; border-bottom: 1px solid var(--border); }
.doc-sheet-content.is-bottom { bottom: 0; border-top: 1px solid var(--border); }
.doc-sheet-content header,
.doc-sheet-fields,
.doc-sheet-content footer { padding-inline: 16px; }
.doc-sheet-content header { display: grid; gap: 6px; padding-inline-end: 48px; }
.doc-sheet-content header h3,
.doc-sheet-content header p { margin: 0; }
.doc-sheet-content header h3 { font-size: 18px; font-weight: 600; line-height: 24px; }
.doc-sheet-content header p { color: var(--muted-foreground); font-size: 14px; line-height: 20px; }
.doc-sheet-fields { display: grid; flex: 1; align-content: start; gap: 24px; }
.doc-sheet-fields label { display: grid; gap: 12px; font-size: 14px; font-weight: 500; line-height: 20px; }
.doc-sheet-fields input { box-sizing: border-box; width: 100%; height: 32px; border: 1px solid var(--input); border-radius: 10px; padding: 4px 10px; color: inherit; background: transparent; font: inherit; outline: none; }
.doc-sheet-fields input:focus-visible { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent); }
.doc-sheet-content footer { display: grid; gap: 8px; margin-top: auto; }
.doc-sheet-content footer .doc-button { width: 100%; }
.doc-sheet-scroll { min-height: 0; overflow-y: auto; padding: 0 16px; }
.doc-sheet-scroll p { margin: 0 0 8px; font-size: 14px; line-height: 1.625; }
.doc-sheet-rtl-preview { box-sizing: border-box; height: 288px; align-items: center; padding: 40px; }
.doc-sheet-rtl-preview .doc-sheet-preview { font-family: "Noto Sans Arabic Variable", sans-serif; }
.doc-sheet-rtl-preview[data-lang="he"] .doc-sheet-preview { font-family: "Noto Sans Hebrew Variable", sans-serif; }
.doc-component-card[data-doc-preview-name^="empty-"]:not([data-doc-preview-name="empty-rtl"]) .doc-component-preview-stage { height: 384px; min-height: 384px; }
.doc-component-card[data-doc-preview-name="empty-demo"] .doc-component-preview-stage,
.doc-component-card[data-doc-preview-name="empty-background"] .doc-component-preview-stage,
.doc-component-card[data-doc-preview-name="empty-avatar"] .doc-component-preview-stage,
.doc-component-card[data-doc-preview-name="empty-avatar-group"] .doc-component-preview-stage,
.doc-component-card[data-doc-preview-name="empty-input-group"] .doc-component-preview-stage { padding: 0; }
.doc-component-card[data-doc-preview-name="empty-rtl"] .doc-component-preview-stage { display: block; height: 352px; min-height: 352px; padding: 0; }
.doc-empty { display: flex; box-sizing: border-box; width: 100%; min-width: 0; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; border-radius: var(--radius-xl); padding: 1.5rem; color: var(--foreground); text-align: center; text-wrap: balance; }
.doc-empty.is-outline { border: 1px dashed var(--border); }
.doc-empty.is-background { height: 100%; background: color-mix(in oklab, var(--muted) 30%, transparent); }
.doc-empty-header { display: flex; width: 100%; max-width: 384px; flex-direction: column; align-items: center; gap: 0.5rem; }
.doc-empty-header h3,
.doc-empty-header p,
.doc-empty-content p { margin: 0; }
.doc-empty-header h3 { font-size: 0.875rem; font-weight: 500; line-height: 1.25rem; letter-spacing: -0.01em; }
.doc-empty-header p,
.doc-empty-content p { color: var(--muted-foreground); font-size: 0.875rem; line-height: 1.625; }
.doc-empty-media { display: flex; width: 32px; height: 32px; flex: none; align-items: center; justify-content: center; margin-bottom: 0.5rem; border-radius: var(--radius-lg); color: var(--foreground); background: var(--muted); }
.doc-empty-media svg { width: 16px; height: 16px; }
.doc-empty-avatar { width: 48px; height: 48px; flex: none; margin-bottom: 0.5rem; overflow: hidden; border-radius: 999px; background: var(--muted); }
.doc-empty-avatar img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.doc-empty-avatar-group { display: flex; margin-bottom: 0.5rem; }
.doc-empty-avatar-group img { box-sizing: border-box; width: 48px; height: 48px; border: 2px solid var(--background); border-radius: 999px; object-fit: cover; filter: grayscale(1); }
.doc-empty-avatar-group img + img { margin-inline-start: -0.5rem; }
.doc-empty-content { display: flex; width: 100%; max-width: 384px; min-width: 0; flex-direction: column; align-items: center; gap: 0.625rem; font-size: 0.875rem; }
.doc-empty-content.is-row { flex-direction: row; justify-content: center; gap: 0.5rem; }
.doc-empty-content .doc-button svg { width: 16px; height: 16px; }
.doc-empty-content .doc-empty-small-button { height: 28px; padding-inline: 0.625rem; }
.doc-empty-learn { display: inline-flex; height: 28px; align-items: center; gap: 0.375rem; border-radius: var(--radius-lg); padding: 0 0.5rem; color: var(--muted-foreground); font-size: 0.875rem; font-weight: 500; text-decoration: none; }
.doc-empty-learn:hover { color: var(--foreground); text-decoration: underline; }
.doc-empty-learn svg { width: 16px; height: 16px; }
.doc-empty-input-group { display: flex; box-sizing: border-box; width: 75%; height: 32px; align-items: center; gap: 0.375rem; border: 1px solid var(--input); border-radius: var(--radius-lg); padding: 0 0.625rem; color: var(--muted-foreground); background: transparent; }
.doc-empty-input-group:focus-within { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent); }
.doc-empty-input-group input { min-width: 0; flex: 1; border: 0; padding: 0; color: var(--foreground); background: transparent; font: inherit; outline: none; }
.doc-empty-input-group > svg { width: 16px; height: 16px; flex: none; }
.doc-empty-input-group kbd { display: inline-flex; min-width: 18px; height: 18px; align-items: center; justify-content: center; border-radius: var(--radius-md); color: var(--muted-foreground); background: var(--muted); font: inherit; font-size: 0.75rem; }
.doc-empty-content a { color: inherit; text-underline-offset: 4px; }
.doc-empty-rtl-preview { box-sizing: border-box; height: 288px; padding: 40px; }
.doc-empty-rtl-preview .doc-empty { font-family: "Noto Sans Arabic Variable", sans-serif; }
.doc-empty-rtl-preview[data-lang="he"] .doc-empty { font-family: "Noto Sans Hebrew Variable", sans-serif; }
.doc-empty-rtl-preview[dir="rtl"] .doc-empty-learn svg { transform: rotate(-90deg); }
.doc-component-card[data-doc-preview-name^="dropdown-menu-"] { overflow: visible; }
.doc-component-card[data-doc-preview-name^="dropdown-menu-"]:not([data-doc-preview-name="dropdown-menu-rtl"]) .doc-component-preview-stage { height: 288px; min-height: 288px; }
.doc-component-card[data-doc-preview-name="dropdown-menu-rtl"] .doc-component-preview-stage { display: block; height: 352px; min-height: 352px; padding: 0; }
.doc-dropdown-menu { z-index: 1; }
.doc-dropdown-menu:has(> .doc-dropdown-panel:not([hidden])) { z-index: 70; }
.doc-dropdown-panel { max-height: min(480px, calc(100vh - 16px)); overflow-x: hidden; overflow-y: auto; }
.doc-dropdown-panel.is-128 { width: 128px; }
.doc-dropdown-panel.is-144 { width: 144px; }
.doc-dropdown-panel.is-160 { width: 160px; }
.doc-dropdown-panel.is-176 { width: 176px; }
.doc-dropdown-panel.is-192 { width: 192px; }
.doc-dropdown-panel.is-224 { width: 224px; }
.doc-dropdown-sub-panel { width: max-content; min-width: 96px; }
.doc-dropdown-item:disabled { pointer-events: none; opacity: 0.5; }
.doc-dropdown-item.is-destructive { color: var(--destructive); }
.doc-dropdown-item.is-destructive:hover,
.doc-dropdown-item.is-destructive:focus-visible { color: var(--destructive); background: color-mix(in oklab, var(--destructive) 10%, transparent); }
.doc-dropdown-shortcut { margin-inline-start: auto; color: var(--muted-foreground); font-size: 0.75rem; letter-spacing: 0.1em; }
.doc-dropdown-chevron { margin-inline-start: auto; color: currentColor; font-size: 1.25rem; line-height: 1rem; }
[dir="rtl"] > .doc-dropdown-sub-trigger .doc-dropdown-chevron { transform: scaleX(-1); }
.doc-dropdown-check,
.doc-dropdown-radio { position: absolute; inset-inline-end: 0.5rem; display: none; width: 1rem; place-items: center; font-size: 0.75rem; }
.doc-dropdown-item[data-selected="true"] .doc-dropdown-check,
.doc-dropdown-item[data-selected="true"] .doc-dropdown-radio { display: inline-grid; }
.doc-dropdown-item[role="menuitemcheckbox"],
.doc-dropdown-item[role="menuitemradio"] { padding-inline-end: 2rem; }
.doc-dropdown-avatar-trigger { display: inline-grid; width: 32px; height: 32px; place-items: center; overflow: hidden; border: 0; border-radius: 999px; padding: 0; background: transparent; outline: none; }
.doc-dropdown-avatar-trigger:hover { background: var(--muted); }
.doc-dropdown-avatar-trigger:focus-visible { box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent); }
.doc-dropdown-avatar-trigger img { width: 32px; height: 32px; border-radius: inherit; object-fit: cover; }
.doc-dropdown-rtl-preview { box-sizing: border-box; height: 288px; align-items: center; }
.doc-dropdown-rtl-preview .doc-dropdown-menu { font-family: "Noto Sans Arabic Variable", sans-serif; }
.doc-dropdown-rtl-preview[data-lang="he"] .doc-dropdown-menu { font-family: "Noto Sans Hebrew Variable", sans-serif; }
.doc-component-card[data-doc-preview-name^="drawer-"]:not([data-doc-preview-name="drawer-rtl"]) .doc-component-preview-stage { height: 288px; min-height: 288px; }
.doc-component-card[data-doc-preview-name="drawer-rtl"] .doc-component-preview-stage { display: block; height: 352px; min-height: 352px; padding: 0; }
.doc-drawer-sides { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
.doc-drawer-side-trigger { text-transform: capitalize; }
.doc-drawer-portal { position: fixed; z-index: 160; inset: 0; }
.doc-drawer-portal[hidden] { display: none; }
.doc-drawer-overlay { position: absolute; inset: 0; background: rgb(0 0 0 / 10%); backdrop-filter: blur(2px); }
.doc-drawer-content { position: fixed; z-index: 161; display: flex; box-sizing: border-box; height: auto; flex-direction: column; color: var(--foreground); background: var(--background); font-size: 0.875rem; box-shadow: 0 0 40px rgb(0 0 0 / 12%); }
.doc-drawer-content.is-bottom { inset: auto 0 0; max-height: 80vh; border-top: 1px solid var(--border); border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
.doc-drawer-content.is-bottom.is-sides { max-height: 50vh; }
.doc-drawer-content.is-top { inset: 0 0 auto; max-height: 50vh; border-bottom: 1px solid var(--border); border-radius: 0 0 var(--radius-xl) var(--radius-xl); }
.doc-drawer-content.is-left { inset: 0 auto 0 0; width: 75%; max-width: 384px; border-right: 1px solid var(--border); border-radius: 0 var(--radius-xl) var(--radius-xl) 0; }
.doc-drawer-content.is-right { inset: 0 0 0 auto; width: 75%; max-width: 384px; border-left: 1px solid var(--border); border-radius: var(--radius-xl) 0 0 var(--radius-xl); }
.doc-drawer-handle { display: none; width: 100px; height: 4px; flex: none; align-self: center; margin-top: 1rem; border-radius: 999px; background: var(--muted); }
.doc-drawer-content.is-bottom > .doc-drawer-handle { display: block; }
.doc-drawer-header { display: flex; flex-direction: column; gap: 0.125rem; padding: 1rem; }
.doc-drawer-content.is-bottom .doc-drawer-header,
.doc-drawer-content.is-top .doc-drawer-header { text-align: center; }
.doc-drawer-header h3,
.doc-drawer-header p { margin: 0; }
.doc-drawer-header h3 { color: var(--foreground); font-size: 1rem; font-weight: 500; line-height: 1.5rem; }
.doc-drawer-header p { color: var(--muted-foreground); line-height: 1.25rem; }
.doc-drawer-goal-shell { width: 100%; max-width: 384px; align-self: center; }
.doc-drawer-goal-body { padding: 1rem 1rem 0; }
.doc-drawer-goal-controls { display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
.doc-drawer-round-button { display: inline-grid; box-sizing: border-box; width: 32px; height: 32px; flex: none; place-items: center; border: 1px solid var(--border); border-radius: 999px; padding: 0; color: var(--foreground); background: var(--background); outline: none; }
.doc-drawer-round-button:hover:not(:disabled) { background: var(--muted); }
.doc-drawer-round-button:focus-visible { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent); }
.doc-drawer-round-button:disabled { pointer-events: none; opacity: 0.5; }
.doc-drawer-round-button svg { width: 1rem; height: 1rem; }
.doc-drawer-goal-value { min-width: 0; flex: 1; text-align: center; }
.doc-drawer-goal-value strong { display: block; font-size: 4.5rem; font-weight: 700; line-height: 1; letter-spacing: -0.05em; }
.doc-drawer-goal-value span { display: block; color: var(--muted-foreground); font-size: 0.7rem; line-height: 1rem; text-transform: uppercase; }
.doc-drawer-chart { display: flex; box-sizing: border-box; height: 120px; align-items: flex-end; gap: 5.31px; margin-top: 0.75rem; padding: 5px 7.63px; }
.doc-drawer-chart span { min-height: 2px; flex: 1; border-radius: 2px 2px 0 0; background: var(--chart-1); }
.doc-drawer-content[dir="rtl"] .doc-drawer-chart span { background: var(--chart-2); }
.doc-drawer-footer { display: flex; flex-direction: column; gap: 0.5rem; margin-top: auto; padding: 1rem; }
.doc-drawer-footer .doc-button { width: 100%; }
.doc-drawer-scroll { min-height: 0; flex: 1; overflow-y: auto; padding: 0 1rem; scrollbar-width: none; }
.doc-drawer-scroll::-webkit-scrollbar { display: none; }
.doc-drawer-scroll p { margin: 0 0 1rem; line-height: 1.5; }
.doc-drawer-profile { position: relative; display: grid; gap: 1.5rem; }
.doc-drawer-profile-form { display: grid; align-items: start; gap: 1.5rem; padding: 0 1rem; }
.doc-drawer-profile-form label { display: grid; gap: 0.375rem; font-weight: 500; }
.doc-drawer-profile-form input { box-sizing: border-box; width: 100%; height: 32px; border: 1px solid var(--input); border-radius: var(--radius-lg); padding: 0 0.625rem; color: var(--foreground); background: transparent; font: inherit; outline: none; }
.doc-drawer-profile-form input:focus-visible { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent); }
.doc-drawer-responsive-x { display: none; }
.doc-drawer-mobile-footer { padding-top: 0.5rem; }
.doc-drawer-rtl-preview { box-sizing: border-box; height: 288px; align-items: center; }
.doc-drawer-rtl-preview .doc-drawer-preview { font-family: "Noto Sans Arabic Variable", sans-serif; }
.doc-drawer-rtl-preview[data-lang="he"] .doc-drawer-preview { font-family: "Noto Sans Hebrew Variable", sans-serif; }
@media (min-width: 768px) {
  .doc-drawer-content.is-responsive { inset: 50% auto auto 50%; display: grid; width: min(425px, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 32px); transform: translate(-50%, -50%); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 1.5rem; box-shadow: 0 16px 50px rgb(0 0 0 / 28%); }
  .doc-drawer-content.is-responsive > .doc-drawer-handle,
  .doc-drawer-content.is-responsive .doc-drawer-mobile-footer { display: none; }
  .doc-drawer-content.is-responsive .doc-drawer-profile { gap: 1.5rem; }
  .doc-drawer-content.is-responsive .doc-drawer-header { padding: 0; text-align: start; }
  .doc-drawer-content.is-responsive .doc-drawer-profile-form { padding: 0; }
  .doc-drawer-content.is-responsive .doc-drawer-responsive-x { display: inline-grid; }
}
.doc-component-card[data-doc-preview-name^="date-picker-"]:not([data-doc-preview-name="date-picker-rtl"]) .doc-component-preview-stage { height: 288px; min-height: 288px; }
.doc-component-card[data-doc-preview-name="date-picker-rtl"] .doc-component-preview-stage { display: block; height: 352px; min-height: 352px; padding: 0; }
.doc-date-picker { width: 176px; color: var(--foreground); }
.doc-date-picker.is-standalone { width: 212px; }
.doc-date-picker.is-range { width: 240px; }
.doc-date-field-label,
.doc-date-picker > label { display: flex; flex-direction: column; gap: 0.375rem; color: var(--foreground); font-size: 0.875rem; font-weight: 500; }
.doc-date-field-label { margin-bottom: 0.375rem; }
.doc-date-trigger { display: flex; box-sizing: border-box; width: 100%; height: 32px; align-items: center; justify-content: flex-start; gap: 0.375rem; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 0 0.625rem; color: var(--foreground); background: var(--background); font: inherit; font-size: 0.875rem; font-weight: 400; text-align: start; outline: none; }
.doc-date-trigger[data-empty="true"] { color: var(--muted-foreground); }
.doc-date-trigger:hover,
.doc-date-trigger[aria-expanded="true"] { background: var(--muted); }
.doc-date-trigger:focus-visible { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent); }
.doc-date-trigger > svg { width: 1rem; height: 1rem; flex: 0 0 1rem; margin-inline-start: auto; }
.doc-date-picker.is-range .doc-date-trigger > svg { order: -1; margin-inline: 0; }
.doc-date-popover { position: fixed; z-index: 145; box-sizing: border-box; width: max-content; overflow: hidden; border-radius: var(--radius-xl); color: var(--popover-foreground); background: var(--popover); box-shadow: 0 5px 18px rgb(0 0 0 / 18%); outline: 1px solid color-mix(in oklab, var(--foreground) 10%, transparent); outline-offset: -1px; }
.doc-date-popover[hidden] { display: none; }
.doc-date-popover .doc-calendar { border: 0; box-shadow: none; }
.doc-date-input-picker { width: 192px; }
.doc-date-input-picker.is-natural { width: 320px; }
.doc-date-input-group { display: flex; box-sizing: border-box; width: 100%; height: 32px; overflow: hidden; border: 1px solid var(--input); border-radius: var(--radius-lg); background: transparent; }
.doc-date-input-group:focus-within { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent); }
.doc-date-input-group input { min-width: 0; flex: 1; border: 0; padding: 0 0.625rem; color: var(--foreground); background: transparent; font: inherit; font-size: 0.875rem; outline: none; }
.doc-date-input-group button { display: inline-grid; width: 28px; flex: 0 0 28px; place-items: center; border: 0; color: var(--muted-foreground); background: transparent; }
.doc-date-input-group button:hover { color: var(--foreground); background: var(--muted); }
.doc-date-input-picker > p { margin: 0.375rem 0 0; padding: 0 0.25rem; color: var(--muted-foreground); font-size: 0.875rem; line-height: 1.25rem; }
.doc-date-input-picker > p strong { color: inherit; font-weight: 500; }
.doc-date-time-picker { display: flex; width: 272px; flex-direction: row; gap: 1rem; }
.doc-date-time-picker > label { width: 128px; }
.doc-date-time-picker input[type="time"] { box-sizing: border-box; width: 128px; height: 32px; border: 1px solid var(--input); border-radius: var(--radius-lg); padding: 0 0.625rem; color: var(--foreground); background: var(--background); font: inherit; font-size: 0.875rem; outline: none; }
.doc-date-picker-rtl-preview { box-sizing: border-box; height: 288px; align-items: center; }
.doc-date-picker-rtl-preview .doc-date-picker { font-family: "Noto Sans Arabic Variable", sans-serif; }
.doc-date-picker-rtl-preview[data-lang="he"] .doc-date-picker { font-family: "Noto Sans Hebrew Variable", sans-serif; }
.doc-component-card[data-doc-preview-name="data-table-demo"] .doc-component-preview-stage { display: block; height: auto; min-height: 0; padding: 2.5rem 2rem; }
.doc-component-card[data-doc-preview-name="data-table-rtl"] .doc-component-preview-stage { display: block; height: auto; min-height: 0; padding: 0; }
.doc-data-table { width: 100%; color: var(--foreground); }
.doc-data-toolbar { display: flex; align-items: center; padding: 1rem 0; }
.doc-data-filter { box-sizing: border-box; width: 100%; max-width: 384px; height: 2rem; border: 1px solid var(--input); border-radius: var(--radius-lg); padding: 0 0.625rem; color: var(--foreground); background: transparent; font: inherit; font-size: 0.875rem; outline: none; }
.doc-data-filter:focus { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent); }
.doc-data-filter::placeholder { color: var(--muted-foreground); opacity: 1; }
.doc-data-menu { margin-inline-start: auto; }
.doc-data-columns-trigger { gap: 0.375rem; }
.doc-data-columns-trigger svg { width: 1rem; height: 1rem; }
.doc-data-columns-panel,
.doc-data-action-panel { width: 176px; }
.doc-data-column-item { text-transform: capitalize; }
.doc-data-column-item > span:last-child { margin-inline-start: auto; }
.doc-data-table-frame { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-md); }
.doc-data-table table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.doc-data-table th,
.doc-data-table td { box-sizing: border-box; border-bottom: 1px solid var(--border); padding: 0.5rem; text-align: start; white-space: nowrap; }
.doc-data-table th { height: 40px; color: var(--foreground); font-weight: 500; }
.doc-data-table td { height: 40px; vertical-align: middle; }
/* Keep the inline controls off the text baseline so rows stay 41px like the
   React docs instead of picking up a descender. */
.doc-data-table td .doc-data-menu,
.doc-data-table td .doc-data-action-trigger,
.doc-data-table td .doc-checkbox-control,
.doc-data-table th .doc-checkbox-control { vertical-align: middle; }
.doc-data-table tbody tr:last-child td { border-bottom: 0; }
.doc-data-table tr[data-state="selected"] { background: var(--muted); }
.doc-data-table th[data-doc-data-col="select"],
.doc-data-table td[data-doc-data-col="select"] { width: 33px; padding-inline: 0.5rem 0; }
.doc-data-table th[data-doc-data-col="status"],
.doc-data-table td[data-doc-data-col="status"] { width: 119px; }
.doc-data-table th[data-doc-data-col="amount"],
.doc-data-table td[data-doc-data-col="amount"] { width: 100px; text-align: end; }
.doc-data-table th[data-doc-data-col="actions"],
.doc-data-table td[data-doc-data-col="actions"] { width: 55px; padding-inline: 0.5rem; text-align: start; }
.doc-data-status { text-transform: capitalize; }
.doc-data-email { text-transform: lowercase; }
.doc-data-amount { font-weight: 500; }
.doc-data-sort { display: inline-flex; height: 16px; align-items: center; gap: 0.5rem; border: 0; border-radius: var(--radius-lg); padding: 0; color: var(--foreground); background: transparent; font: inherit; font-size: 0.875rem; font-weight: 500; }
.doc-data-sort-icon { display: block; width: 16px; height: 16px; }
.doc-data-sort:hover { background: var(--muted); }
.doc-data-action-trigger { display: inline-grid; width: 24px; height: 24px; place-items: center; border: 0; border-radius: var(--radius-md); padding: 0; color: var(--foreground); background: transparent; }
.doc-data-action-icon { display: block; width: 12px; height: 12px; }
.doc-data-action-trigger:hover,
.doc-data-action-trigger[aria-expanded="true"] { background: var(--muted); }
.doc-data-footer { display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; padding: 1rem 0; }
.doc-data-footer > span { flex: 1; color: var(--muted-foreground); font-size: 0.875rem; }
.doc-data-footer > span strong { font-weight: 400; }
.doc-data-footer > div { display: flex; gap: 0.5rem; }
.doc-data-table [data-doc-data-empty] td { height: 96px; text-align: center; }
.doc-data-table [hidden] { display: none; }
.doc-rtl-preview.doc-data-table-rtl-preview { box-sizing: border-box; height: auto; padding: 2.5rem 2rem; }
.doc-data-table-rtl-preview .doc-data-table { font-family: "Noto Sans Arabic Variable", sans-serif; }
.doc-data-table-rtl-preview[data-lang="he"] .doc-data-table { font-family: "Noto Sans Hebrew Variable", sans-serif; }
.doc-component-card[data-doc-preview-name="command-demo"] .doc-component-preview-stage { height: 392px; min-height: 392px; }
.doc-component-card[data-doc-preview-name^="command-"]:not([data-doc-preview-name="command-demo"]):not([data-doc-preview-name="command-rtl"]) .doc-component-preview-stage { height: 288px; min-height: 288px; }
.doc-component-card[data-doc-preview-name="command-rtl"] .doc-component-preview-stage { display: block; height: 456px; min-height: 456px; padding: 0; }
.doc-command-surface { box-sizing: border-box; display: flex; width: 384px; height: 312px; flex-direction: column; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-xl); color: var(--foreground); background: var(--popover); }
.doc-command-input { position: relative; box-sizing: border-box; display: flex; height: 44px; flex: 0 0 44px; align-items: center; margin: 0; padding: 0.375rem 0.5rem; }
.doc-command-input::before { position: absolute; inset: 0.375rem 0.5rem; border: 1px solid color-mix(in oklab, var(--input) 30%, transparent); border-radius: var(--radius-lg); background: color-mix(in oklab, var(--input) 30%, transparent); content: ""; }
.doc-command-input > span { position: relative; display: inline-grid; width: 1.5rem; height: 2rem; flex: 0 0 1.5rem; place-items: center; color: var(--muted-foreground); }
.doc-command-input svg { width: 1rem; height: 1rem; }
.doc-command-input input { position: relative; min-width: 0; height: 2rem; flex: 1; border: 0; padding: 0 0.5rem 0 0; color: var(--foreground); background: transparent; font: inherit; font-size: 0.875rem; outline: none; }
.doc-command-input input::placeholder { color: var(--muted-foreground); opacity: 1; }
.doc-command-list { box-sizing: border-box; min-height: 0; flex: 1; overflow-y: auto; padding: 0 0.25rem 0.25rem; }
.doc-command-group { padding: 0.25rem; }
.doc-command-group + .doc-command-group { margin-top: 0.25rem; border-top: 1px solid var(--border); padding-top: 0.5rem; }
.doc-command-group h5 { margin: 0; padding: 0.25rem 0.5rem 0.375rem; color: var(--muted-foreground); font-size: 0.75rem; font-weight: 400; line-height: 1rem; }
.doc-command-item { display: flex; width: 100%; height: 2rem; align-items: center; gap: 0.5rem; border: 0; border-radius: var(--radius-md); padding: 0 0.5rem; color: var(--foreground); background: transparent; font: inherit; font-size: 0.875rem; text-align: start; outline: none; }
.doc-command-item[data-highlighted],
.doc-command-item:hover:not(:disabled) { background: var(--accent); color: var(--accent-foreground); }
.doc-command-item:disabled { color: var(--muted-foreground); opacity: 0.6; }
.doc-command-item > svg { width: 1rem; height: 1rem; flex: 0 0 1rem; }
.doc-command-item > kbd { margin-inline-start: auto; color: var(--muted-foreground); font-family: inherit; font-size: 0.75rem; }
.doc-command-empty { padding: 2rem 0; color: var(--muted-foreground); font-size: 0.875rem; text-align: center; }
.doc-command-empty[hidden],
.doc-command-group[hidden],
.doc-command-item[hidden] { display: none; }
.doc-command-launch { display: flex; flex-direction: column; gap: 1rem; }
.doc-command-portal { position: fixed; z-index: 120; inset: 0; }
.doc-command-portal[hidden] { display: none; }
.doc-command-overlay { position: absolute; inset: 0; background: rgb(0 0 0 / 18%); }
.doc-command-dialog { position: fixed; z-index: 121; top: 33.3328125%; left: 50%; width: 384px; transform: translateX(-50%); }
.doc-command-dialog .doc-command-surface { height: 309px; border: 0; box-shadow: 0 12px 40px rgb(0 0 0 / 22%); }
.doc-command-dialog.is-basic .doc-command-surface,
.doc-command-dialog.is-shortcuts .doc-command-surface { height: 176px; }
.doc-command-dialog.is-scrollable .doc-command-surface { height: 332px; }
.doc-command-dialog.is-scrollable .doc-command-list { height: 288px; flex: 0 0 288px; }
.doc-rtl-preview.doc-command-rtl-preview { box-sizing: border-box; height: 392px; align-items: center; }
.doc-command-surface.is-rtl { font-family: "Noto Sans Arabic Variable", sans-serif; }
.doc-command-rtl-preview[data-lang="he"] .doc-command-surface { font-family: "Noto Sans Hebrew Variable", sans-serif; }
.doc-command-surface.is-rtl .doc-command-input > span { order: 2; }
.doc-command-surface.is-rtl .doc-command-input input { padding-inline: 0.5rem 0; text-align: right; }
.doc-component-card[data-doc-preview-name^="combobox-"]:not([data-doc-preview-name="combobox-rtl"]) .doc-component-preview-stage { height: 288px; min-height: 288px; }
.doc-component-card[data-doc-preview-name="combobox-rtl"] .doc-component-preview-stage { display: block; height: 352px; min-height: 352px; padding: 0; }
.doc-combobox { position: relative; width: max-content; color: var(--foreground); }
.doc-combobox-input-group { box-sizing: border-box; display: flex; width: 215.203125px; height: 2rem; align-items: center; overflow: hidden; border: 1px solid var(--input); border-radius: var(--radius-lg); background: transparent; transition: border-color 150ms ease, box-shadow 150ms ease; }
.doc-combobox-input-group:focus-within { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent); }
.doc-combobox.is-invalid .doc-combobox-input-group { border-color: var(--destructive); box-shadow: 0 0 0 3px color-mix(in oklab, var(--destructive) 20%, transparent); }
.doc-combobox.is-disabled .doc-combobox-input-group { opacity: 0.5; background: var(--muted); }
.doc-combobox-input-group input { min-width: 0; height: 100%; flex: 1; border: 0; padding: 0 0 0 0.6875rem; color: var(--foreground); background: transparent; font: inherit; font-size: 0.875rem; outline: none; }
.doc-combobox-input-group input::placeholder,
.doc-combobox-chips input::placeholder,
.doc-combobox-popup-search input::placeholder { color: var(--muted-foreground); opacity: 1; }
.doc-combobox-toggle,
.doc-combobox-clear { display: inline-grid; width: 1.875rem; height: 100%; flex: 0 0 1.875rem; place-items: center; border: 0; padding: 0; color: var(--muted-foreground); background: transparent; }
.doc-combobox-clear { width: 1.5rem; flex-basis: 1.5rem; }
.doc-combobox-clear[hidden],
.doc-combobox-input-group:has(.doc-combobox-clear:not([hidden])) .doc-combobox-toggle { display: none; }
.doc-combobox-toggle svg,
.doc-combobox-clear svg { width: 1rem; height: 1rem; }
.doc-combobox.has-globe .doc-combobox-input-group { width: 235.203125px; }
.doc-combobox-globe { display: inline-grid; width: 2rem; height: 100%; flex: 0 0 2rem; place-items: center; color: var(--muted-foreground); }
.doc-combobox-globe svg { width: 1rem; height: 1rem; }
.doc-combobox.has-globe input { padding-left: 0; }
.doc-combobox-popup-trigger { box-sizing: border-box; display: flex; width: 256px; height: 2rem; align-items: center; justify-content: space-between; border: 1px solid var(--input); border-radius: var(--radius-lg); padding: 0 0.6875rem; color: var(--foreground); background: transparent; font: inherit; font-size: 0.875rem; font-weight: 400; outline: none; }
.doc-combobox-popup-trigger:hover { background: var(--accent); }
.doc-combobox-popup-trigger:focus-visible { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent); }
.doc-combobox-popup-trigger svg { width: 1rem; height: 1rem; color: var(--muted-foreground); }
.doc-combobox-chips { box-sizing: border-box; display: flex; width: 320px; min-height: 2rem; align-items: center; gap: 0.25rem; overflow: hidden; border: 1px solid var(--input); border-radius: var(--radius-lg); padding: 0.1875rem 0.25rem; background: transparent; }
.doc-combobox-chips:focus-within { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent); }
.doc-combobox-chip { display: inline-flex; height: 1.375rem; flex: none; align-items: center; gap: 0.125rem; border-radius: var(--radius-md); padding-inline: 0.4375rem 0.1875rem; background: var(--muted); font-size: 0.75rem; line-height: 1rem; white-space: nowrap; }
.doc-combobox-chip > button { display: inline-grid; width: 1rem; height: 1rem; place-items: center; border: 0; padding: 0; color: var(--muted-foreground); background: transparent; }
.doc-combobox-chip svg { width: 0.75rem; height: 0.75rem; }
.doc-combobox-chips > input { min-width: 2rem; height: 1.5rem; flex: 1; border: 0; padding: 0 0.25rem; color: var(--foreground); background: transparent; font: inherit; font-size: 0.875rem; outline: none; }
.doc-combobox-panel { position: fixed; z-index: 80; box-sizing: border-box; width: 214px; max-height: 252px; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 0.1875rem; color: var(--popover-foreground); background: var(--popover); box-shadow: 0 6px 18px rgb(0 0 0 / 12%); }
.doc-combobox-panel[hidden] { display: none; }
.doc-combobox-panel.is-wide { width: 240px; }
.doc-combobox-panel.is-chips { width: 320px; }
.doc-combobox-panel.is-popup { width: 284px; max-height: 288px; padding-top: 0.1875rem; }
.doc-combobox-panel.is-rtl { width: 320px; max-height: 142.125px; font-family: "Noto Sans Arabic Variable", sans-serif; }
.doc-combobox-panel.is-rtl[data-lang="he"] { font-family: "Noto Sans Hebrew Variable", sans-serif; }
.doc-combobox-list { display: flex; flex-direction: column; }
.doc-combobox-item { position: relative; display: flex; width: 100%; min-height: 28px; align-items: center; border: 0; border-radius: calc(var(--radius-lg) - 2px); padding: 0.375rem 1.75rem 0.375rem 0.4375rem; color: var(--popover-foreground); background: transparent; font: inherit; font-size: 0.875rem; line-height: 1rem; text-align: left; outline: none; }
.doc-combobox-item:hover,
.doc-combobox-item[data-highlighted] { background: var(--accent); color: var(--accent-foreground); }
.doc-combobox-item[hidden],
.doc-combobox-group-label[hidden] { display: none; }
.doc-combobox-item-copy { display: grid; min-width: 0; gap: 0.125rem; }
.doc-combobox-item-copy strong { font-weight: 400; }
.doc-combobox-item-copy small { color: var(--muted-foreground); font-size: 0.75rem; line-height: 1rem; }
.doc-combobox-panel.is-custom .doc-combobox-item { min-height: 44px; align-items: flex-start; }
.doc-combobox-panel.is-custom .doc-combobox-item-copy strong { font-weight: 500; }
.doc-combobox-check { position: absolute; right: 0.4375rem; display: none; width: 1rem; height: 1rem; }
.doc-combobox-check svg { width: 1rem; height: 1rem; }
.doc-combobox-item[aria-selected="true"] .doc-combobox-check { display: inline-grid; place-items: center; }
.doc-combobox-group-label { padding: 0.375rem 0.4375rem 0.25rem; color: var(--muted-foreground); font-size: 0.75rem; line-height: 1rem; }
.doc-combobox-separator { display: block; height: 1px; margin: 0.1875rem -0.1875rem; background: var(--border); }
.doc-combobox-empty { padding: 0.5rem; color: var(--muted-foreground); font-size: 0.875rem; text-align: center; }
.doc-combobox-popup-search { padding-bottom: 0.1875rem; }
.doc-combobox-popup-search input { box-sizing: border-box; width: 100%; height: 2rem; border: 1px solid var(--input); border-radius: var(--radius-md); padding: 0 0.6875rem; color: var(--foreground); background: transparent; font: inherit; font-size: 0.875rem; outline: none; }
.doc-combobox-popup-search input:focus { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent); }
.doc-combobox-panel.is-rtl .doc-combobox-item { min-height: 28px; justify-content: flex-start; padding-block: 0; padding-inline: 1.75rem 0.4375rem; line-height: 1.5967; text-align: right; }
.doc-combobox-panel.is-rtl .doc-combobox-check { right: auto; left: 0.4375rem; }
.doc-combobox-rtl-preview { box-sizing: border-box; height: 288px; align-items: start; padding-top: 2.5rem; }
.doc-combobox-rtl-field { display: grid; width: 320px; gap: 0.5rem; }
.doc-combobox-rtl-field > label { font-size: 0.875rem; font-weight: 500; line-height: 1.375; }
.doc-combobox-rtl-preview[data-lang="ar"] { font-family: "Noto Sans Arabic Variable", sans-serif; }
.doc-combobox-rtl-preview[data-lang="he"] { font-family: "Noto Sans Hebrew Variable", sans-serif; }
.doc-component-card[data-doc-preview-name="collapsible-demo"] .doc-component-preview-stage,
.doc-component-card[data-doc-preview-name="collapsible-basic"] .doc-component-preview-stage { align-items: start; height: 288px; min-height: 288px; }
.doc-component-card[data-doc-preview-name="collapsible-settings"] .doc-component-preview-stage { height: 288px; min-height: 288px; }
.doc-component-card[data-doc-preview-name="collapsible-file-tree"] .doc-component-preview-stage { height: 576px; min-height: 576px; }
.doc-component-card[data-doc-preview-name="collapsible-rtl"] .doc-component-preview-stage { display: block; height: 352px; min-height: 352px; padding: 0; }
.doc-collapsible-order { display: flex; width: 350px; flex-direction: column; gap: 0.5rem; color: var(--foreground); }
.doc-collapsible-order-header { display: flex; height: 2rem; align-items: center; justify-content: space-between; gap: 1rem; padding-inline: 1rem; }
.doc-collapsible-order-header h4 { margin: 0; font-size: 0.875rem; font-weight: 600; line-height: 1.25rem; }
.doc-collapsible-order-trigger,
.doc-collapsible-settings-trigger { display: inline-grid; width: 2rem; height: 2rem; flex: 0 0 2rem; place-items: center; border: 1px solid transparent; border-radius: var(--radius-lg); padding: 0; color: var(--foreground); background: transparent; outline: none; }
.doc-collapsible-order-trigger:hover,
.doc-collapsible-order-trigger[aria-expanded="true"] { background: var(--muted); }
.doc-collapsible-order-trigger:focus-visible,
.doc-collapsible-settings-trigger:focus-visible { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent); }
.doc-collapsible-order-trigger svg,
.doc-collapsible-settings-trigger svg { width: 1rem; height: 1rem; }
.doc-collapsible-order-row,
.doc-collapsible-order-detail { box-sizing: border-box; display: flex; min-height: 38px; justify-content: space-between; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0.5rem 1rem; font-size: 0.875rem; line-height: 1.25rem; }
.doc-collapsible-order-row > span,
.doc-collapsible-order-detail > span { color: var(--muted-foreground); }
.doc-collapsible-order-row > strong,
.doc-collapsible-order-detail > strong { font-weight: 500; }
.doc-collapsible-order-content { display: flex; flex-direction: column; gap: 0.5rem; }
.doc-collapsible-order-content[hidden] { display: none; }
.doc-collapsible-order-detail { min-height: 58px; flex-direction: column; justify-content: center; }
.doc-collapsible-basic-card { box-sizing: border-box; width: 384px; min-height: 32px; overflow: hidden; border-radius: var(--radius-xl); padding: 1rem; background: var(--card); box-shadow: 0 0 0 1px color-mix(in oklab, var(--foreground) 10%, transparent); }
.doc-collapsible-basic-card [data-slot="card-content"] { width: 100%; }
.doc-collapsible-basic { min-height: 0; border-radius: var(--radius-md); }
.doc-collapsible-settings-card { box-sizing: border-box; display: flex; width: 320px; flex-direction: column; gap: 0.75rem; overflow: hidden; border-radius: var(--radius-xl); padding: 0.75rem; color: var(--card-foreground); background: var(--card); box-shadow: 0 0 0 1px color-mix(in oklab, var(--foreground) 10%, transparent); }
.doc-collapsible-settings-card > header { display: grid; gap: 0.25rem; }
.doc-collapsible-settings-card h4 { margin: 0; font-size: 0.875rem; font-weight: 500; line-height: 1.375; }
.doc-collapsible-settings-card p { margin: 0; color: var(--muted-foreground); font-size: 0.875rem; line-height: 1.25rem; }
.doc-collapsible-settings { display: flex; align-items: flex-start; gap: 0.5rem; }
.doc-collapsible-settings-fields { display: grid; min-width: 0; flex: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.doc-collapsible-settings-fields label { display: block; min-width: 0; }
.doc-collapsible-settings-fields input { box-sizing: border-box; width: 100%; height: 2rem; border: 1px solid var(--input); border-radius: var(--radius-md); padding: 0 0.6875rem; color: var(--foreground); background: transparent; font: inherit; font-size: 0.875rem; outline: none; }
.doc-collapsible-settings-fields input:focus-visible { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent); }
.doc-collapsible-settings-content { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; gap: 0.5rem; }
.doc-collapsible-settings-content[hidden] { display: none; }
.doc-collapsible-settings-trigger { border-color: var(--input); }
.doc-collapsible-settings-trigger:hover { background: var(--accent); }
.doc-collapsible-file-card { box-sizing: border-box; display: flex; width: 256px; flex-direction: column; gap: 0.75rem; overflow: hidden; border-radius: var(--radius-xl); padding: 0.75rem; color: var(--card-foreground); background: var(--card); box-shadow: 0 0 0 1px color-mix(in oklab, var(--foreground) 10%, transparent); }
.doc-collapsible-tabs { display: grid; height: 2rem; grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: var(--radius-lg); padding: 0.1875rem; background: var(--muted); }
.doc-collapsible-tabs button { border: 0; border-radius: calc(var(--radius-lg) - 2px); color: var(--muted-foreground); background: transparent; font: inherit; font-size: 0.875rem; font-weight: 500; outline: none; }
.doc-collapsible-tabs button[data-state="active"] { color: var(--foreground); background: var(--background); box-shadow: 0 1px 2px rgb(0 0 0 / 10%); }
.doc-collapsible-tabs button:focus-visible { box-shadow: 0 0 0 2px var(--ring); }
.doc-collapsible-file-list { display: flex; flex-direction: column; gap: 0.25rem; padding-top: 1.25rem; }
.doc-collapsible-file { display: flex; width: 100%; height: 1.75rem; align-items: center; gap: 0.5rem; border: 0; border-radius: var(--radius-md); padding: 0 0.5rem; color: var(--foreground); background: transparent; font: inherit; font-size: 0.875rem; text-align: start; }
.doc-collapsible-file:hover { text-decoration: underline; }
.doc-collapsible-file:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
.doc-collapsible-file svg { width: 1rem; height: 1rem; flex: 0 0 1rem; }
.doc-collapsible-rtl-preview { box-sizing: border-box; height: 288px; align-items: start; padding: 2.5rem; }
.doc-collapsible-rtl-preview[data-lang="ar"] { font-family: "Noto Sans Arabic Variable", sans-serif; }
.doc-collapsible-rtl-preview[data-lang="he"] { font-family: "Noto Sans Hebrew Variable", sans-serif; }
.doc-component-card[data-doc-preview-name="checkbox-demo"] .doc-component-preview-stage { height: 320px; min-height: 320px; }
.doc-component-card[data-doc-preview-name^="checkbox-"]:not([data-doc-preview-name="checkbox-demo"]):not([data-doc-preview-name="checkbox-rtl"]) .doc-component-preview-stage { height: 288px; min-height: 288px; }
.doc-component-card[data-doc-preview-name="checkbox-table"] .doc-component-preview-stage { padding: 2rem; }
.doc-component-card[data-doc-preview-name="checkbox-rtl"] .doc-component-preview-stage { display: block; height: 384px; min-height: 384px; padding: 0; }
.doc-checkbox-fields { display: grid; width: 384px; gap: 1.5rem; }
.doc-checkbox-fields.is-narrow { width: 224px; }
.doc-checkbox-fields.is-description { width: 288px; }
.doc-checkbox-field { display: flex; align-items: flex-start; gap: 0.5rem; color: var(--foreground); cursor: pointer; }
.doc-checkbox-control { display: inline-grid; width: 1rem; height: 1rem; flex: 0 0 1rem; place-items: center; margin-top: 1px; border: 1px solid var(--input); border-radius: 4px; padding: 0; color: var(--primary-foreground); background: transparent; }
.doc-checkbox-control span { visibility: hidden; font-size: 0.7rem; font-weight: 700; line-height: 1; }
.doc-checkbox-control[aria-checked="true"] { border-color: var(--primary); background: var(--primary); }
.doc-checkbox-control[aria-checked="true"] span { visibility: visible; }
.doc-checkbox-control:focus-visible { outline: 0; box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent); }
.doc-checkbox-field.is-invalid .doc-checkbox-control { border-color: var(--destructive); }
.doc-checkbox-field.is-disabled { opacity: 0.5; cursor: not-allowed; }
.doc-checkbox-copy { display: grid; gap: 0.25rem; min-width: 0; }
.doc-checkbox-copy strong { font-size: 0.875rem; font-weight: 500; line-height: 1rem; }
.doc-checkbox-copy small { color: var(--muted-foreground); font-size: 0.875rem; line-height: 1.25rem; }
.doc-checkbox-field.is-wrapped { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0.625rem; }
.doc-checkbox-group { display: grid; width: 323.28125px; gap: 1rem; margin: 0; border: 0; padding: 0; }
.doc-checkbox-group legend { color: var(--foreground); font-size: 0.875rem; font-weight: 500; }
.doc-checkbox-group > p { margin: -0.5rem 0 0.25rem; color: var(--muted-foreground); font-size: 0.875rem; }
.doc-checkbox-group .doc-checkbox-field { gap: 0.625rem; }
.doc-checkbox-group .doc-checkbox-copy strong { font-weight: 400; }
.doc-checkbox-table { width: 574px; overflow: hidden; }
.doc-checkbox-table table { width: 100%; border-collapse: collapse; font-size: 0.875rem; line-height: 20px; }
.doc-checkbox-table th,
.doc-checkbox-table td { border-bottom: 1px solid var(--border); padding: 0 0.5rem; text-align: left; white-space: nowrap; }
.doc-checkbox-table td { height: 37px; padding: 8px 0 8px 8px; vertical-align: middle; }
/* Keep the checkbox off the text baseline so rows stay 37px. */
.doc-checkbox-table th .doc-checkbox-control,
.doc-checkbox-table td .doc-checkbox-control { vertical-align: middle; }
.doc-checkbox-table tbody tr:last-child td { border-bottom: 0; }
.doc-checkbox-table th:first-child,
.doc-checkbox-table td:first-child { width: 2rem; padding-inline: 0.5rem 0; }
.doc-checkbox-table th { color: var(--foreground); font-weight: 500; }
.doc-checkbox-table th { height: 40px; }
.doc-checkbox-table td strong { font-weight: 500; }
.doc-checkbox-table tr[data-state="selected"] { background: var(--muted); }
.doc-rtl-preview.doc-checkbox-rtl-preview { height: 320px; align-items: center; }
.doc-checkbox-rtl-preview[data-lang="ar"] { font-family: "Noto Sans Arabic Variable", sans-serif; }
.doc-checkbox-rtl-preview[data-lang="he"] { font-family: "Noto Sans Hebrew Variable", sans-serif; }
.doc-chart { position: relative; width: 509px; height: 286.3125px; color: var(--muted-foreground); }
.doc-chart > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.doc-chart-grid line { stroke: var(--border); stroke-width: 1; }
.doc-chart-bars rect { cursor: crosshair; transition: opacity 150ms ease; }
.doc-chart-bars .is-desktop,
.doc-chart-legend i.is-desktop { fill: #2563eb; background: #2563eb; }
.doc-chart-bars .is-mobile,
.doc-chart-legend i.is-mobile { fill: #60a5fa; background: #60a5fa; }
.doc-chart-bars g:hover rect { opacity: 0.75; }
.doc-chart-axis text { fill: var(--muted-foreground); font-size: 12px; }
.doc-chart-legend { position: absolute; inset-inline: 0; bottom: 5px; display: flex; justify-content: center; gap: 1.25rem; font-size: 0.875rem; }
.doc-chart-legend span { display: inline-flex; align-items: center; gap: 0.5rem; }
.doc-chart-legend i { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 2px; }
.doc-chart-legend b { color: var(--foreground); font-weight: 400; }
.doc-chart-hover { position: fixed; z-index: 100; min-width: 9rem; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0.5rem; color: var(--foreground); background: var(--popover); box-shadow: 0 6px 18px rgb(0 0 0 / 14%); font-size: 0.75rem; pointer-events: none; }
.doc-chart-hover strong,
.doc-chart-hover span { display: flex; justify-content: space-between; gap: 1rem; }
.doc-chart-hover strong { margin-bottom: 0.25rem; }
/* The React docs render this preview with [&_.preview>div]:border-none, so the
   card contributes no border box of its own. */
.doc-chart-demo-card { width: 638px; height: 438px; overflow: hidden; border: 0; border-radius: var(--radius-xl); background: var(--card); }
/* The React docs render chart-demo under their theme-blue palette, so the
   series colours differ from the #2563eb/#60a5fa the other examples pin. */
.doc-chart-demo-card .doc-chart-bars .is-desktop,
.doc-chart-rtl-preview .doc-chart-bars .is-desktop { fill: rgb(43 127 255); }
.doc-chart-demo-card .doc-chart-bars .is-mobile,
.doc-chart-rtl-preview .doc-chart-bars .is-mobile { fill: rgb(142 197 255); }
.doc-chart-rtl-preview .doc-chart-legend i.is-desktop { background: rgb(43 127 255); }
.doc-chart-rtl-preview .doc-chart-legend i.is-mobile { background: rgb(142 197 255); }
.doc-chart-demo-card > header { display: grid; height: 99px; grid-template-columns: 1fr 288px; border-bottom: 1px solid var(--border); }
.doc-chart-demo-card > header > div:first-child { padding: 1.5rem; }
.doc-chart-demo-card h4 { margin: 0; font-size: 1rem; font-weight: 600; }
.doc-chart-demo-card p { margin: 0.25rem 0 0; color: var(--muted-foreground); font-size: 0.875rem; }
.doc-chart-demo-card > header > div:last-child { display: grid; grid-template-columns: 1fr 1fr; }
.doc-chart-demo-card > header > div:last-child button { display: flex; flex-direction: column; justify-content: center; border: 0; border-left: 1px solid var(--border); padding: 0 2rem; color: var(--muted-foreground); background: transparent; font: inherit; font-size: 0.75rem; text-align: left; }
.doc-chart-demo-card > header > div:last-child button[aria-pressed="true"] { background: color-mix(in oklab, var(--muted) 45%, transparent); }
.doc-chart-demo-card > header strong { color: var(--foreground); font-size: 1.875rem; font-weight: 700; }
.doc-chart-demo-card .doc-chart { width: 590px; height: 250px; margin: 48px 24px 0; }
.doc-chart-tooltip-guide { position: relative; width: 638px; height: 288px; }
.doc-chart-tooltip-guide > div { position: absolute; display: grid; min-width: 128px; gap: 0.25rem; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0.5rem; background: var(--popover); box-shadow: 0 8px 18px rgb(0 0 0 / 12%); font-size: 0.75rem; }
.doc-chart-tooltip-guide > div span { display: flex; justify-content: space-between; gap: 1.5rem; color: var(--muted-foreground); }
.doc-chart-tooltip-guide > div b { color: var(--foreground); font-weight: 600; }
.doc-chart-tooltip-guide > div:nth-child(1) { left: 144px; top: 44px; }
.doc-chart-tooltip-guide > div:nth-child(2) { right: 142px; top: 54px; }
.doc-chart-tooltip-guide > div:nth-child(3) { left: 135px; bottom: 52px; }
.doc-chart-tooltip-guide > div:nth-child(4) { right: 175px; bottom: 101px; }
.doc-rtl-preview.doc-chart-rtl-preview { height: 368px; align-items: center; }
.doc-chart-rtl-preview .doc-chart { width: 558px; height: 313.875px; }
.doc-chart-rtl-preview[data-lang="ar"] { font-family: "Noto Sans Arabic Variable", sans-serif; }
.doc-chart-rtl-preview[data-lang="he"] { font-family: "Noto Sans Hebrew Variable", sans-serif; }
.doc-carousel { position: relative; width: 320px; height: 352px; color: var(--foreground); outline: none; }
.doc-carousel-content { width: 100%; height: 100%; overflow: hidden; }
.doc-carousel-track { display: flex; height: 100%; margin-inline-start: -16px; transition: transform 300ms ease; will-change: transform; }
.doc-carousel-item { box-sizing: border-box; height: 100%; flex: 0 0 336px; padding-inline-start: 16px; }
.doc-carousel-item-pad { box-sizing: border-box; width: 100%; height: 100%; padding: 4px; }
.doc-carousel-card { box-sizing: border-box; display: flex; width: 100%; height: 100%; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius-xl); padding-top: 1rem; background: var(--card); box-shadow: 0 1px 2px color-mix(in oklab, var(--foreground) 5%, transparent); }
.doc-carousel-card-content { display: flex; width: 100%; min-height: 0; flex: 1; align-items: center; justify-content: center; }
.doc-carousel-card-content strong { font-size: 2.25rem; font-weight: 600; line-height: 1; }
.doc-carousel-previous,
.doc-carousel-next { position: absolute; top: 50%; display: inline-grid; width: 2rem; height: 2rem; place-items: center; border: 1px solid var(--border); border-radius: 999px; padding: 0; color: var(--foreground); background: var(--background); transform: translateY(-50%); }
.doc-carousel-previous { left: -3rem; }
.doc-carousel-next { right: -3rem; }
.doc-carousel-previous:hover:not(:disabled),
.doc-carousel-next:hover:not(:disabled) { background: var(--accent); }
.doc-carousel-previous:disabled,
.doc-carousel-next:disabled { opacity: 0.5; }
.doc-carousel-previous svg,
.doc-carousel-next svg { width: 1rem; height: 1rem; }
.doc-carousel:not(.is-rtl) .doc-button-rtl-arrow { transform: none; }
.doc-carousel.is-size,
.doc-carousel.is-spacing { width: 384px; }
.doc-carousel.is-size { height: 149.328125px; }
.doc-carousel.is-spacing { height: 157.328125px; }
.doc-carousel.is-size .doc-carousel-track { margin-inline-start: -16px; }
.doc-carousel.is-size .doc-carousel-item { flex-basis: 133.328125px; }
.doc-carousel.is-size .doc-carousel-card-content strong { font-size: 1.875rem; }
.doc-carousel.is-spacing .doc-carousel-track { margin-inline-start: -4px; }
.doc-carousel.is-spacing .doc-carousel-item { flex-basis: 129.328125px; padding-inline-start: 4px; }
.doc-carousel.is-spacing .doc-carousel-card-content strong { font-size: 1.5rem; }
.doc-carousel.is-orientation { height: 266px; }
.doc-carousel.is-orientation .doc-carousel-content { height: 266px; }
.doc-carousel.is-orientation .doc-carousel-track { flex-direction: column; margin: -4px 0 0; }
.doc-carousel.is-orientation .doc-carousel-item { width: 320px; height: 135px; flex: 0 0 135px; padding: 4px 0 0; }
.doc-carousel.is-orientation .doc-carousel-card { height: 116px; }
.doc-carousel.is-orientation .doc-carousel-previous,
.doc-carousel.is-orientation .doc-carousel-next { top: auto; left: 50%; right: auto; transform: translateX(-50%); }
.doc-carousel.is-orientation .doc-carousel-previous { top: -3rem; }
.doc-carousel.is-orientation .doc-carousel-next { bottom: -3rem; }
.doc-carousel.is-orientation .doc-carousel-next svg { transform: rotate(180deg); }
.doc-carousel.is-api .doc-carousel-item-pad { padding: 1px; }
.doc-carousel.is-api .doc-carousel-card { height: 350px; }
.doc-carousel-api-wrap { width: 320px; }
.doc-carousel-api-wrap > p { margin: 0; padding: 0.5rem 0; color: var(--muted-foreground); text-align: center; font-size: 0.875rem; }
.doc-rtl-preview.doc-carousel-rtl-preview { height: 32rem; align-items: center; }
.doc-carousel-rtl-preview[data-lang="ar"] { font-family: "Noto Sans Arabic Variable", sans-serif; }
.doc-carousel-rtl-preview[data-lang="he"] { font-family: "Noto Sans Hebrew Variable", sans-serif; }
.doc-card {
  position: relative;
  display: flex;
  width: 384px;
  height: 357px;
  flex-direction: column;
  gap: 1rem;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 0.875rem;
  padding-top: 1rem;
  color: var(--card-foreground);
  background: var(--card);
  box-shadow: 0 1px 2px color-mix(in oklab, var(--foreground) 5%, transparent);
}
.doc-card > .doc-card-header,
.doc-card > .doc-card-content,
.doc-card > .doc-card-footer { width: calc(100% + 2px); margin-inline: -1px; }
.doc-card-header { position: relative; display: grid; height: 66px; flex: 0 0 66px; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr; column-gap: 1rem; padding: 0 1rem; }
.doc-card-header h4 { align-self: start; margin: 0; font-size: 1rem; font-weight: 500; line-height: 1.25rem; }
.doc-card-header p { grid-column: 1; margin: 0; color: var(--muted-foreground); font-size: 0.875rem; line-height: 1.25rem; }
.doc-card-action { grid-column: 2; grid-row: 1; align-self: center; }
.doc-card-action .doc-button.is-link { height: 2rem; margin: -0.375rem -0.5rem 0 0; padding: 0 0.5rem; }
[dir="rtl"].doc-card .doc-card-action .doc-button.is-link { margin-right: 0; margin-left: -0.5rem; }
.doc-card-content { height: 138px; flex: 0 0 138px; padding: 0 1rem; }
.doc-card-content p { margin: 0; font-size: 0.875rem; line-height: 1.25rem; }
.doc-card-fields { display: flex; flex-direction: column; gap: 1.5rem; }
.doc-card-fields label { display: grid; gap: 0.5rem; font-size: 0.875rem; font-weight: 500; line-height: 1rem; }
.doc-card-fields input { box-sizing: border-box; width: 100%; height: 2.25rem; border: 1px solid var(--input); border-radius: var(--radius-md); padding: 0 0.75rem; color: var(--foreground); background: transparent; font: inherit; font-weight: 400; outline: none; }
.doc-card-fields input:focus-visible { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent); }
.doc-card-password-label { display: flex; align-items: center; }
.doc-card-password-label a { margin-inline-start: auto; color: var(--foreground); font-weight: 400; text-decoration: none; }
.doc-card-password-label a:hover { text-decoration: underline; text-underline-offset: 4px; }
.doc-card-footer { display: flex; height: 105px; min-height: 0; flex: 0 0 105px; flex-direction: column; gap: 0.5rem; border-top: 1px solid var(--border); padding: 1rem 1rem 0.5rem; }
.doc-card-footer .doc-button { width: 100%; flex: 0 0 auto; }
.doc-card.is-small { height: 172.25px; gap: 0.75rem; padding-top: 0.75rem; }
.doc-card.is-small .doc-card-header { height: 43.25px; flex-basis: 43.25px; display: block; padding: 0 0.75rem; }
.doc-card.is-small .doc-card-header p { margin-top: 0.125rem; white-space: nowrap; }
.doc-card.is-small .doc-card-content { height: 40px; flex-basis: 40px; padding: 0 0.75rem; }
.doc-card.is-small .doc-card-footer { height: 53px; flex: 0 0 53px; padding: 0.75rem 0.75rem 0.5rem; }
.doc-card.is-small .doc-button { height: 2rem; }
.doc-card.is-image { height: 379px; gap: 1rem; padding: 0; }
.doc-card.is-image > img,
.doc-card-image-shade { position: relative; z-index: 1; width: calc(100% + 2px); height: 216px; flex: 0 0 216px; margin-inline: -1px; object-fit: cover; filter: brightness(0.6) grayscale(1); }
.doc-card-image-shade { position: absolute; inset: 0 0 auto; z-index: 2; background: rgb(0 0 0 / 35%); filter: none; }
.doc-card.is-image .doc-card-header { height: 66px; flex-basis: 66px; }
.doc-card.is-image .doc-card-footer { height: 65px; flex: 0 0 65px; padding: 1rem 1rem 0.75rem; }
.doc-card .doc-badge { display: inline-flex; height: 1.375rem; align-items: center; border-radius: var(--radius-md); padding: 0 0.5rem; background: var(--secondary); color: var(--secondary-foreground); font-size: 0.75rem; font-weight: 500; }
.doc-rtl-preview.doc-card-rtl-preview { height: 30rem; align-items: center; }
/* The direction page reuses the card-rtl preview but sizes it with h-auto,
   so it is shorter than the 30rem the card page pins. */
[data-doc-slug$="/direction"] .doc-component-card[data-doc-preview-name="card-rtl"] .doc-component-preview-stage { height: auto; min-height: 0; }
[data-doc-slug$="/direction"] .doc-rtl-preview.doc-card-rtl-preview { height: 438px; }
.doc-card-rtl-preview[data-lang="ar"] { font-family: "Noto Sans Arabic Variable", sans-serif; }
.doc-card-rtl-preview[data-lang="he"] { font-family: "Noto Sans Hebrew Variable", sans-serif; }
.doc-calendar {
  --doc-calendar-cell: 28px;
  display: flex;
  width: 214px;
  height: 297.1875px;
  gap: 1rem;
  padding: 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--foreground);
  background: var(--background);
  font-size: 0.875rem;
}
.doc-calendar.is-hijri { --doc-calendar-cell: 32px; width: 250px; height: 333.1875px; padding: 0.75rem; font-family: "Noto Sans Arabic Variable", sans-serif; }
.doc-calendar.is-range { width: 424px; height: 258.28125px; padding: 0.5rem; border: 0; border-radius: var(--radius-xl); box-shadow: inset 0 0 0 1px var(--border); }
.doc-calendar.is-presets { --doc-calendar-cell: 38px; width: 266px; height: 348.28125px; padding: 0; border: 0; }
.doc-calendar.is-time { width: 196px; height: 278.28125px; padding: 0; border: 0; }
.doc-calendar.is-booked { width: 212px; height: 222.28125px; padding: 0.5rem; border: 0; }
.doc-calendar.is-custom { --doc-calendar-cell: 48px; width: 352px; height: 378.28125px; padding: 0.5rem; border: 0; }
.doc-calendar.is-week { width: 240px; height: 222.28125px; padding: 0.5rem; border: 0; }
.doc-calendar.is-rtl { --doc-calendar-cell: 36px; width: 270px; height: 353.1875px; font-family: inherit; }
.doc-calendar-month { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 0.75rem; }
.doc-calendar-caption { position: relative; display: flex; height: var(--doc-calendar-cell); flex: 0 0 auto; align-items: center; justify-content: space-between; }
.doc-calendar-caption > button {
  position: relative;
  z-index: 2;
  display: inline-flex;
  width: var(--doc-calendar-cell);
  height: var(--doc-calendar-cell);
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-md);
  color: var(--foreground);
  background: transparent;
}
.doc-calendar-caption > button:hover { background: var(--muted); }
.doc-calendar-caption > button svg { width: 1rem; height: 1rem; }
.doc-calendar-caption strong { position: absolute; inset-inline: var(--doc-calendar-cell); text-align: center; font-size: 0.875rem; font-weight: 500; }
.doc-calendar-dropdowns { position: absolute; inset-inline: var(--doc-calendar-cell); display: flex; justify-content: center; gap: 0.375rem; }
.doc-calendar-dropdowns select { height: 2rem; min-width: 3.25rem; border: 0; border-radius: var(--radius-md); padding: 0 0.25rem; color: var(--foreground); background: transparent; font: inherit; font-weight: 500; }
.doc-calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: 20px; grid-auto-rows: var(--doc-calendar-cell); row-gap: 0.5rem; align-items: center; }
.doc-calendar-grid.has-week-numbers { grid-template-columns: var(--doc-calendar-cell) repeat(7, 1fr); }
.doc-calendar-weekday,
.doc-calendar-week-heading { display: flex; height: 20px; align-items: center; justify-content: center; color: var(--muted-foreground); font-size: 0.8rem; font-weight: 400; }
.doc-calendar-week-number { display: flex; height: var(--doc-calendar-cell); align-items: center; justify-content: center; color: var(--muted-foreground); font-size: 0.8rem; font-weight: 400; }
.doc-calendar-day { display: flex; min-width: 0; height: var(--doc-calendar-cell); align-items: center; justify-content: center; flex-direction: column; gap: 0.25rem; border: 1px solid transparent; border-radius: var(--radius-md); padding: 0; color: var(--foreground); background: transparent; font: inherit; font-weight: 400; line-height: 1; }
.doc-calendar-day:hover:not(:disabled) { background: var(--muted); }
.doc-calendar-day.is-today:not([aria-selected="true"]) { background: var(--muted); }
.doc-calendar-day.is-outside { color: var(--muted-foreground); opacity: 0.55; }
.doc-calendar-day.is-booked { text-decoration: line-through; opacity: 0.5; }
.doc-calendar-day[aria-selected="true"] { color: var(--primary-foreground); background: var(--primary); }
.doc-calendar-day.is-range-middle { border-radius: 0; color: var(--accent-foreground); background: var(--accent); }
.doc-calendar-day.is-range-start { border-start-end-radius: 0; border-end-end-radius: 0; }
.doc-calendar-day.is-range-end { border-start-start-radius: 0; border-end-start-radius: 0; }
.doc-calendar-day small { font-size: 0.75rem; opacity: 0.7; }
.doc-calendar:not(.is-rtl) .doc-button-rtl-arrow { transform: none; }
.doc-calendar.is-range .doc-calendar-month[data-calendar-month-index="0"] .doc-calendar-caption > button:last-child,
.doc-calendar.is-range .doc-calendar-month[data-calendar-month-index="1"] .doc-calendar-caption > button:first-child { visibility: hidden; }
.doc-calendar.is-range .doc-calendar-day.is-range-middle:nth-of-type(7n + 1) { border-start-start-radius: var(--radius-md); border-end-start-radius: var(--radius-md); }
.doc-calendar.is-range .doc-calendar-day.is-range-middle:nth-of-type(7n) { border-start-end-radius: var(--radius-md); border-end-end-radius: var(--radius-md); }
.doc-calendar-card { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--card); }
.doc-calendar-card.is-presets { width: 300px; height: 461.28125px; padding: 0.75rem; }
.doc-calendar-card.is-time { width: 220px; height: 465.78125px; padding: 0.75rem; }
.doc-calendar-card.is-compact { width: 212px; height: 222.28125px; border-radius: var(--radius); }
.doc-calendar-card.is-custom { width: 352px; height: 378.28125px; border-radius: var(--radius); }
.doc-calendar-card.is-week { width: 240px; height: 222.28125px; border-radius: var(--radius); }
.doc-calendar-presets { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.75rem -0.75rem -0.75rem; padding: 0.75rem; border-top: 1px solid var(--border); }
.doc-calendar-presets button { flex: 1 1 30%; height: 1.75rem; border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--foreground); background: var(--background); font: inherit; font-size: 0.8rem; }
.doc-calendar-time-fields { display: grid; gap: 1rem; margin: 0.75rem -0.75rem -0.75rem; padding: 1rem 0.75rem; border-top: 1px solid var(--border); }
.doc-calendar-time-fields label { display: grid; gap: 0.5rem; color: var(--foreground); font-size: 0.875rem; }
.doc-calendar-time-fields label > div { position: relative; display: flex; align-items: center; }
.doc-calendar-time-fields span { position: absolute; inset-inline-start: 0.625rem; z-index: 1; color: var(--muted-foreground); }
.doc-calendar-time-fields input { width: 170px; height: 2rem; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0 0.625rem 0 2rem; color: var(--foreground); background: var(--background); font: inherit; }
.doc-rtl-preview.doc-calendar-rtl-preview { height: 24rem; align-items: center; }
.doc-calendar-rtl-preview[data-lang="ar"] { font-family: "Noto Sans Arabic Variable", sans-serif; }
.doc-calendar-rtl-preview[data-lang="he"] { font-family: "Noto Sans Hebrew Variable", sans-serif; }
.doc-button-row,
.doc-button-size-row,
.doc-button-size-row > div,
.doc-button-groups,
.doc-button-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.doc-button-size-row {
  align-items: flex-start;
  gap: 2rem;
}
.doc-button-size-row > div {
  align-items: flex-start;
}
.doc-button {
  display: inline-flex;
  height: 2rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 0 0.625rem;
  color: var(--primary-foreground);
  background: var(--primary);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  text-decoration: none;
  white-space: nowrap;
  transition: color 150ms, box-shadow 150ms, background-color 150ms, border-color 150ms;
}
.doc-button.is-outline {
  border-color: var(--border);
  color: var(--foreground);
  background: var(--background);
}
.doc-button.is-secondary { color: var(--secondary-foreground); background: var(--secondary); }
.doc-button.is-ghost,
.doc-button.is-link { color: var(--foreground); background: transparent; }
.doc-button.is-link { color: var(--primary); text-underline-offset: 4px; }
.doc-button.is-destructive { color: var(--destructive); background: color-mix(in oklab, var(--destructive) 10%, transparent); }
.dark .doc-button.is-destructive { background: color-mix(in oklab, var(--destructive) 20%, transparent); }
.doc-button:disabled { pointer-events: none; opacity: 0.5; }
.doc-button:hover:not(:disabled).is-outline,
.doc-button:hover:not(:disabled).is-ghost { background: var(--muted); }
.doc-button:hover:not(:disabled).is-link { text-decoration: underline; }
.doc-button:focus-visible { border-color: var(--ring); outline: none; box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent); }
.doc-button.is-xs { height: 1.5rem; gap: 0.25rem; border-radius: var(--radius-md); padding: 0 0.5rem; font-size: 0.75rem; line-height: 1rem; }
.doc-button.is-sm { height: 1.75rem; gap: 0.25rem; border-radius: var(--radius-md); font-size: 0.8rem; }
.doc-button.is-lg { height: 2.25rem; }
.doc-button.is-icon,
.doc-button.is-icon-xs,
.doc-button.is-icon-sm,
.doc-button.is-icon-lg { padding: 0; }
.doc-button.is-icon { width: 2rem; }
.doc-button.is-icon-xs { width: 1.5rem; height: 1.5rem; border-radius: var(--radius-md); }
.doc-button.is-icon-sm { width: 1.75rem; height: 1.75rem; border-radius: var(--radius-md); }
.doc-button.is-icon-lg { width: 2.25rem; height: 2.25rem; }
.doc-button.is-rounded { border-radius: 9999px; }
.doc-button.has-icon-start { padding-inline-start: 0.5rem; }
.doc-button.has-icon-end { padding-inline-end: 0.5rem; }
.doc-button > svg { width: 1rem; height: 1rem; flex: 0 0 auto; pointer-events: none; }
.doc-button.is-icon > svg,
.doc-button.is-icon-xs > svg,
.doc-button.is-icon-sm > svg,
.doc-button.is-icon-lg > svg { margin: 0; }
.doc-button.is-xs > svg,
.doc-button.is-icon-xs > svg { width: 0.75rem; height: 0.75rem; }
.doc-button.is-sm > svg { width: 0.875rem; height: 0.875rem; }
.doc-button-spinner { animation: doc-badge-spin 1s linear infinite; }
.doc-button-rtl-arrow { transform: rotate(180deg); }
.doc-button-rtl-preview[dir="ltr"] .doc-button-rtl-arrow { transform: none; }
.doc-button-groups { gap: 0.5rem; }
.doc-button-group { gap: 0; }
.doc-button-group-size-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
}
.doc-button-group.is-vertical {
  flex-direction: column;
  height: fit-content;
}
.doc-button-group.is-vertical > [data-fict-host]:first-child .doc-button {
  border-radius: var(--radius) var(--radius) 0 0;
}
.doc-button-group.is-vertical > [data-fict-host]:last-child .doc-button {
  margin-top: 0;
  margin-inline-start: 0;
  border-block-start-width: 0;
  border-radius: 0 0 var(--radius) var(--radius);
}
.doc-button-group > .doc-button + .doc-button,
.doc-button-group > .doc-button-menu > .doc-button { margin-inline-start: 0; }
.doc-button-group > .doc-button:not(:only-child):first-child { border-start-end-radius: 0; border-end-end-radius: 0; }
.doc-button-group > .doc-button:not(:only-child):last-child,
.doc-button-group > .doc-button-menu > .doc-button { border-start-start-radius: 0; border-end-start-radius: 0; }
.doc-button-group > [data-fict-host]:first-child:not(:last-child) .doc-button {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}
.doc-button-group > [data-fict-host]:last-child:not(:first-child) .doc-button {
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}
.doc-button-group > [data-fict-host] + [data-fict-host] .doc-button {
  margin-inline-start: 0;
  border-inline-start-width: 0;
}
.doc-button-group > [data-fict-host] + .doc-button-menu > .doc-button,
.doc-button-group > .doc-button-menu:not(:first-child) > .doc-button {
  border-inline-start-width: 0;
}
.doc-button-menu { display: inline-flex; }
.doc-button-menu-panel { width: 10rem; }
.doc-button-menu-panel .ui-menu-item { width: 100%; }
.doc-button-group-separator {
  position: relative;
  z-index: 1;
  width: 1px;
  height: 1rem;
  margin-inline: 0;
  background: var(--border);
}
.doc-button-group.is-separator-group > [data-fict-host]:first-child .doc-button {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}
.doc-button-group.is-separator-group > [data-fict-host]:last-child .doc-button {
  border-inline-start-width: 0;
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}
.doc-button-input-group,
.doc-button-input-combo,
.doc-button-currency-group {
  display: flex;
  height: 2rem;
}
.doc-button-input-group {
  width: 12rem;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--background);
}
.doc-button-input-group input,
.doc-button-input-combo input,
.doc-button-currency-group input {
  min-width: 0;
  height: 2rem;
  border: 1px solid var(--border);
  padding: 0 0.625rem;
  color: var(--foreground);
  background: var(--background);
  font: inherit;
  font-size: 0.875rem;
  outline: none;
}
.doc-button-input-group input {
  flex: 1;
  height: 1.875rem;
  border: 0;
  background: transparent;
}
.doc-button-input-group > button {
  display: inline-flex;
  width: 1.75rem;
  height: 1.75rem;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-md);
  color: var(--muted-foreground);
  background: transparent;
}
.doc-button-input-group > button svg { width: 1rem; height: 1rem; }
.doc-button-input-group > button[aria-pressed="true"] { color: #c2410c; background: #ffedd5; }
.doc-button-input-group input:disabled { opacity: 0.6; }
.doc-button-groups.is-pill .doc-button,
.doc-button-groups.is-pill .doc-button-input-group { border-radius: 9999px; }
.doc-button-groups.is-pill .doc-button-input-group { width: 13.4502rem; }
.doc-button-groups.is-pill .doc-button-input-group input {
  width: 186px;
  height: 2rem;
  flex: none;
}
.doc-button-groups:not(.is-pill) .doc-button-input-group { position: relative; }
.doc-button-groups:not(.is-pill) .doc-button-input-group input {
  width: 100%;
  height: 2rem;
  flex: none;
  padding-inline-end: 2.25rem;
}
.doc-button-groups:not(.is-pill) .doc-button-input-group > button {
  position: absolute;
  inset-inline-end: 1px;
}
.doc-button-input-combo input {
  width: 12rem;
  border-radius: var(--radius) 0 0 var(--radius);
}
.doc-button-input-combo > [data-fict-host] .doc-button {
  margin-inline-start: 0;
  border-inline-start-width: 0;
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}
.doc-button-dropdown-trigger {
  width: 2.1875rem;
  padding: 0 0.5rem;
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}
.doc-button-dropdown-panel { width: 11rem; }
.doc-button-currency-group select {
  width: 50.40625px;
  height: 2rem;
  border: 1px solid var(--border);
  border-radius: var(--radius) 0 0 var(--radius);
  padding: 0 0.625rem;
  color: var(--foreground);
  background: var(--background);
  font-family: var(--font-mono);
}
.doc-button-currency-group input {
  width: 191px;
  margin-inline-start: 0;
  border-inline-start-width: 0;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.doc-button-popover-panel {
  display: grid;
  width: 20rem;
  gap: 1rem;
  padding: 1rem;
  border-radius: var(--radius-xl);
  font-size: 0.875rem;
}
.doc-button-popover-panel[hidden] { display: none; }
.doc-button-popover-panel strong { color: var(--foreground); }
.doc-button-popover-panel p,
.doc-button-popover-panel small { margin: 0; color: var(--muted-foreground); }
.doc-button-popover-panel textarea {
  min-height: 5rem;
  resize: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.5rem 0.75rem;
  color: var(--foreground);
  background: var(--background);
  font: inherit;
}
.doc-component-preview-stage a.doc-button.is-default {
  color: var(--primary-foreground);
  text-decoration: none;
}
.doc-rtl-preview.doc-button-rtl-preview { height: 18rem; align-items: center; }
.doc-button-rtl-preview[data-lang="ar"] { font-family: "Noto Sans Arabic Variable", sans-serif; }
.doc-button-rtl-preview[data-lang="he"] { font-family: "Noto Sans Hebrew Variable", sans-serif; }
.doc-rtl-preview.doc-button-group-rtl-preview { height: 18rem; align-items: center; }
.doc-button-group-rtl-preview[data-lang="ar"] { font-family: "Noto Sans Arabic Variable", sans-serif; }
.doc-button-group-rtl-preview[data-lang="he"] { font-family: "Noto Sans Hebrew Variable", sans-serif; }
.doc-breadcrumb {
  color: var(--muted-foreground);
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.doc-component-preview-stage .doc-breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  width: max-content;
  max-width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-wrap: break-word;
}
.doc-breadcrumb-item {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.doc-component-preview-stage .doc-breadcrumb-link {
  color: inherit;
  font-weight: 400;
  text-decoration: none;
  transition: color 150ms;
}
.doc-component-preview-stage .doc-breadcrumb-link:hover {
  color: var(--foreground);
  text-decoration: none;
}
.doc-breadcrumb-page {
  color: var(--foreground);
  font-weight: 400;
}
.doc-breadcrumb-separator {
  display: inline-flex;
  width: 0.875rem;
  height: 0.875rem;
  align-items: center;
  justify-content: center;
}
.doc-breadcrumb-separator svg {
  width: 0.875rem;
  height: 0.875rem;
}
.doc-breadcrumb[dir="rtl"] .doc-breadcrumb-separator svg {
  transform: rotate(180deg);
}
.doc-breadcrumb-menu {
  display: inline-flex;
}
.doc-breadcrumb-ellipsis-trigger {
  display: inline-flex;
  width: 1.75rem;
  height: 1.75rem;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: inherit;
  background: transparent;
}
.doc-breadcrumb-ellipsis-trigger:hover,
.doc-breadcrumb-ellipsis-trigger[aria-expanded="true"] {
  color: var(--foreground);
  background: var(--muted);
}
.doc-breadcrumb-ellipsis-trigger svg,
.doc-breadcrumb-ellipsis {
  width: 1.25rem;
  height: 1.25rem;
}
.doc-breadcrumb-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.doc-breadcrumb-ellipsis svg {
  width: 1rem;
  height: 1rem;
}
.doc-breadcrumb-dropdown-trigger {
  display: inline-flex;
  height: 1.25rem;
  align-items: center;
  gap: 0.25rem;
  border: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  font-weight: 400;
}
.doc-breadcrumb-dropdown-trigger svg {
  width: 0.875rem;
  height: 0.875rem;
}
.doc-breadcrumb-menu-panel {
  width: 10rem;
}
.doc-breadcrumb-menu-panel .ui-menu-item {
  width: 100%;
}
.doc-rtl-preview.doc-breadcrumb-rtl-preview {
  height: 18rem;
  align-items: center;
}
.doc-breadcrumb-rtl-preview[data-lang="ar"] {
  font-family: "Noto Sans Arabic Variable", sans-serif;
}
.doc-breadcrumb-rtl-preview[data-lang="he"] {
  font-family: "Noto Sans Hebrew Variable", sans-serif;
}
.doc-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.doc-badge-row.is-centered {
  width: 100%;
  justify-content: center;
}
.doc-badge {
  display: inline-flex;
  width: fit-content;
  height: 1.25rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 1.625rem;
  padding: 0.125rem 0.5rem;
  color: var(--primary-foreground);
  background: var(--primary);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1rem;
  text-decoration: none;
  white-space: nowrap;
  transition: color 150ms, box-shadow 150ms, background-color 150ms, border-color 150ms;
}
.doc-badge.is-secondary {
  color: var(--secondary-foreground);
  background: var(--secondary);
}
.doc-badge.is-destructive {
  color: var(--destructive);
  background: color-mix(in oklab, var(--destructive) 10%, transparent);
}
.dark .doc-badge.is-destructive {
  background: color-mix(in oklab, var(--destructive) 20%, transparent);
}
.doc-badge.is-outline {
  border-color: var(--border);
  color: var(--foreground);
  background: transparent;
}
.doc-badge.is-ghost {
  color: var(--foreground);
  background: transparent;
}
.doc-badge.has-icon-start {
  padding-inline-start: 0.375rem;
}
.doc-badge.has-icon-end {
  padding-inline-end: 0.375rem;
}
.doc-badge > svg {
  width: 0.75rem;
  height: 0.75rem;
  flex: 0 0 auto;
  pointer-events: none;
}
.doc-badge-spinner {
  animation: doc-badge-spin 1s linear infinite;
}
@keyframes doc-badge-spin {
  to {
    transform: rotate(360deg);
  }
}
.doc-badge.is-blue {
  color: #1447e6;
  background: #eff6ff;
}
.doc-badge.is-green {
  color: #15803d;
  background: #f0fdf4;
}
.doc-badge.is-sky {
  color: #0369a1;
  background: #f0f9ff;
}
.doc-badge.is-purple {
  color: #7e22ce;
  background: #faf5ff;
}
.doc-badge.is-red {
  color: #b91c1c;
  background: #fef2f2;
}
.dark .doc-badge.is-blue {
  color: #8ec5ff;
  background: #172554;
}
.dark .doc-badge.is-green {
  color: #7bf1a8;
  background: #052e16;
}
.dark .doc-badge.is-sky {
  color: #74d4ff;
  background: #052f4a;
}
.dark .doc-badge.is-purple {
  color: #dab2ff;
  background: #3c0366;
}
.dark .doc-badge.is-red {
  color: #ffa2a2;
  background: #460809;
}
a.doc-badge:hover {
  background: color-mix(in oklab, var(--primary) 80%, transparent);
}
a.doc-badge.is-default {
  color: var(--primary-foreground);
}
a.doc-badge:focus-visible {
  border-color: var(--ring);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
}
.doc-rtl-preview.doc-badge-rtl-preview {
  height: 18rem;
  align-items: center;
}
.doc-badge-rtl-preview[data-lang="ar"] {
  font-family: "Noto Sans Arabic Variable", sans-serif;
}
.doc-badge-rtl-preview[data-lang="he"] {
  font-family: "Noto Sans Hebrew Variable", sans-serif;
}
.doc-avatar-demo-layout {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
  gap: 3rem;
}
.doc-avatar {
  position: relative;
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  overflow: visible;
  border-radius: 999px;
}
.doc-avatar.is-sm {
  width: 1.5rem;
  height: 1.5rem;
}
.doc-avatar.is-lg {
  width: 2.5rem;
  height: 2.5rem;
}
.doc-avatar-image,
.doc-avatar-fallback {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  border-radius: inherit;
}
.doc-avatar-image {
  z-index: 1;
  object-fit: cover;
}
.doc-avatar.is-grayscale .doc-avatar-image,
.doc-avatar-group .doc-avatar-image {
  filter: grayscale(1);
}
.doc-avatar-fallback {
  display: grid;
  place-items: center;
  background: var(--muted);
  color: var(--muted-foreground);
  font-size: 0.75rem;
  font-weight: 500;
}
.doc-avatar-badge {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  display: grid;
  width: 0.625rem;
  height: 0.625rem;
  place-items: center;
  border: 2px solid var(--background);
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-foreground);
}
.doc-avatar-badge.is-online {
  background: #16a34a;
}
.dark .doc-avatar-badge.is-online {
  background: #166534;
}
.doc-avatar-badge svg {
  width: 0.375rem;
  height: 0.375rem;
}
.doc-avatar-group {
  display: inline-flex;
  align-items: center;
}
.doc-avatar-group .doc-avatar,
.doc-avatar-group > .doc-avatar-group-count {
  box-shadow: 0 0 0 2px var(--background);
}
.doc-avatar-group > [data-fict-host]:not(:first-child) .doc-avatar,
.doc-avatar-group > .doc-avatar-group-count {
  margin-inline-start: -0.5rem;
}
.doc-avatar-group-count {
  position: relative;
  z-index: 1;
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--muted);
  color: var(--muted-foreground);
  font-size: 0.75rem;
  font-weight: 500;
}
.doc-avatar-group-count svg {
  width: 1rem;
  height: 1rem;
}
.doc-avatar-size-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.doc-avatar-dropdown {
  position: relative;
}
.doc-avatar-dropdown-trigger {
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  padding: 0;
  cursor: pointer;
  outline: none;
}
.doc-avatar-dropdown-trigger:focus-visible {
  border-color: var(--ring);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
}
.doc-avatar-menu {
  position: absolute;
  z-index: 5;
  top: calc(100% + 0.375rem);
  right: 0;
  display: grid;
  width: 8rem;
  gap: 0.125rem;
  border: 1px solid var(--border);
  border-radius: 0.625rem;
  background: var(--popover);
  color: var(--popover-foreground);
  padding: 0.25rem;
  box-shadow: 0 4px 12px color-mix(in oklab, var(--foreground) 12%, transparent);
}
.doc-avatar-menu[hidden] {
  display: none;
}
.doc-avatar-menu button {
  height: 2rem;
  border: 0;
  border-radius: 0.375rem;
  background: transparent;
  color: inherit;
  padding: 0 0.5rem;
  font: inherit;
  font-size: 0.875rem;
  text-align: start;
  cursor: pointer;
}
.doc-avatar-menu button:hover,
.doc-avatar-menu button:focus-visible {
  background: var(--accent);
  outline: none;
}
.doc-avatar-menu button.is-destructive {
  color: var(--destructive);
}
.doc-avatar-menu-separator {
  height: 1px;
  margin: 0.125rem -0.25rem;
  background: var(--border);
}
.doc-rtl-preview.doc-avatar-rtl-preview {
  height: 18rem;
  align-items: center;
}
.doc-body .doc-aspect-ratio-figure {
  width: 100%;
  margin: 0;
}
.doc-aspect-ratio-figure.is-landscape {
  max-width: 24rem;
}
.doc-component-card[data-doc-preview-name="aspect-ratio-demo"] .doc-aspect-ratio-figure {
  transform: translateY(-0.25rem);
}
.doc-aspect-ratio-figure.is-square {
  max-width: 12rem;
}
.doc-aspect-ratio-figure.is-portrait {
  max-width: 10rem;
}
.doc-aspect-ratio {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 0.625rem;
  background: var(--muted);
}
.doc-aspect-ratio-figure.is-landscape .doc-aspect-ratio {
  aspect-ratio: 16 / 9;
}
.doc-aspect-ratio-figure.is-square .doc-aspect-ratio {
  aspect-ratio: 1;
}
.doc-aspect-ratio-figure.is-portrait .doc-aspect-ratio {
  aspect-ratio: 9 / 16;
}
.doc-aspect-ratio img {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  border-radius: 0.625rem;
  object-fit: cover;
  filter: grayscale(1);
}
.dark .doc-aspect-ratio img {
  filter: grayscale(1) brightness(0.2);
}
.doc-aspect-ratio-figure figcaption {
  margin-top: 0.5rem;
  color: var(--muted-foreground);
  font-size: 0.875rem;
  line-height: 1.25rem;
  text-align: center;
}
.doc-rtl-preview.doc-aspect-ratio-rtl-preview {
  height: 24rem;
  align-items: center;
}
.doc-alert-dialog-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
.doc-alert-dialog-trigger,
.doc-alert-dialog-cancel,
.doc-alert-dialog-action {
  display: inline-flex;
  height: 2rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 0.625rem;
  background: var(--background);
  color: var(--foreground);
  padding: 0 0.625rem;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  white-space: nowrap;
  cursor: pointer;
  outline: none;
}
.doc-alert-dialog-trigger:hover,
.doc-alert-dialog-cancel:hover {
  background: var(--muted);
}
.doc-alert-dialog-trigger:focus-visible,
.doc-alert-dialog-cancel:focus-visible,
.doc-alert-dialog-action:focus-visible {
  border-color: var(--ring);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
}
.doc-alert-dialog-trigger.is-destructive {
  border-color: transparent;
  background: color-mix(in oklab, var(--destructive) 10%, transparent);
  color: var(--destructive);
}
.doc-alert-dialog-trigger.is-destructive:hover {
  background: color-mix(in oklab, var(--destructive) 20%, transparent);
}
.doc-alert-dialog-overlay {
  position: fixed;
  z-index: 100;
  inset: 0;
  background: rgb(0 0 0 / 10%);
  backdrop-filter: blur(2px);
}
.doc-alert-dialog-content {
  position: fixed;
  z-index: 101;
  top: 50%;
  left: 50%;
  display: grid;
  width: calc(100% - 2rem);
  max-width: 20rem;
  gap: 1rem;
  border-radius: 0.875rem;
  background: var(--background);
  color: var(--foreground);
  padding: 1rem;
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--foreground) 10%, transparent);
  transform: translate(-50%, -50%);
  outline: none;
  animation: doc-alert-dialog-in 100ms ease-out;
}
.doc-alert-dialog-header {
  display: grid;
  grid-template-rows: auto 1fr;
  place-items: center;
  gap: 0.375rem;
  text-align: center;
}
.doc-alert-dialog-header[data-has-media="true"] {
  grid-template-rows: auto auto 1fr;
}
.doc-alert-dialog-media {
  display: inline-flex;
  width: 2.5rem;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
  border-radius: 0.5rem;
  background: var(--muted);
  color: var(--foreground);
}
.doc-alert-dialog-media.is-destructive {
  background: color-mix(in oklab, var(--destructive) 10%, transparent);
  color: var(--destructive);
}
.doc-alert-dialog-media svg {
  width: 1.5rem;
  height: 1.5rem;
}
.doc-alert-dialog-title,
.doc-alert-dialog-description {
  margin: 0;
}
.doc-alert-dialog-title {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5rem;
}
.doc-alert-dialog-description {
  color: var(--muted-foreground);
  font-size: 0.875rem;
  line-height: 1.25rem;
  text-wrap: balance;
}
.doc-alert-dialog-description a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.doc-alert-dialog-footer {
  display: flex;
  width: calc(100% + 2rem);
  flex-direction: column-reverse;
  gap: 0.5rem;
  margin: 0 -1rem -1rem;
  border-top: 1px solid var(--border);
  border-radius: 0 0 0.875rem 0.875rem;
  background: color-mix(in oklab, var(--muted) 50%, transparent);
  padding: 1rem;
}
.doc-alert-dialog-content[data-size="sm"] .doc-alert-dialog-footer {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.doc-alert-dialog-content[data-size="sm"] .doc-alert-dialog-cancel,
.doc-alert-dialog-content[data-size="sm"] .doc-alert-dialog-action {
  width: 100%;
}
.doc-alert-dialog-action {
  border-color: transparent;
  background: var(--primary);
  color: var(--primary-foreground);
}
.doc-alert-dialog-action:hover {
  background: color-mix(in oklab, var(--primary) 90%, transparent);
}
.doc-alert-dialog-action.is-destructive {
  background: color-mix(in oklab, var(--destructive) 10%, transparent);
  color: var(--destructive);
}
.doc-alert-dialog-action.is-destructive:hover {
  background: color-mix(in oklab, var(--destructive) 20%, transparent);
}
.doc-rtl-preview.doc-alert-dialog-rtl-preview {
  height: 14rem;
}
@keyframes doc-alert-dialog-in {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}
@media (min-width: 640px) {
  .doc-alert-dialog-content[data-size="default"] {
    max-width: 24rem;
  }

  .doc-alert-dialog-content[data-size="default"] .doc-alert-dialog-header {
    place-items: start;
    text-align: start;
  }

  .doc-alert-dialog-content[data-size="default"] .doc-alert-dialog-header[data-has-media="true"] {
    grid-template-columns: 2.5rem 1fr;
    grid-template-rows: auto 1fr;
    column-gap: 1rem;
  }

  .doc-alert-dialog-content[data-size="default"] .doc-alert-dialog-media {
    grid-row: span 2;
  }

  .doc-alert-dialog-content[data-size="default"] .doc-alert-dialog-title,
  .doc-alert-dialog-content[data-size="default"] .doc-alert-dialog-description {
    grid-column: 2;
  }

  .doc-alert-dialog-content[data-size="default"] .doc-alert-dialog-footer {
    flex-direction: row;
    justify-content: flex-end;
  }
}
.doc-alert-stack {
  display: grid;
  width: 100%;
  max-width: 28rem;
  align-items: start;
  gap: 1rem;
}
.doc-alert {
  position: relative;
  display: grid;
  width: 100%;
  grid-template-columns: 1rem minmax(0, 1fr);
  column-gap: 0.5rem;
  row-gap: 0.125rem;
  border: 1px solid var(--border);
  border-radius: 0.625rem;
  background: var(--card);
  color: var(--card-foreground);
  padding: 0.5rem 0.625rem;
}
.doc-alert-icon {
  width: 1rem;
  height: 1rem;
  margin-top: 0.125rem;
}
.doc-body .doc-alert-title,
.doc-body .doc-alert-description {
  grid-column: 2;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.doc-body .doc-alert-title {
  font-weight: 500;
}
.doc-body .doc-alert-description {
  color: var(--muted-foreground);
}
.doc-alert-destructive {
  color: var(--destructive);
}
.doc-alert-destructive .doc-alert-description {
  color: color-mix(in oklab, var(--destructive) 90%, var(--foreground));
}
.doc-alert-warning {
  border-color: #fde68a;
  background: #fffbeb;
  color: #78350f;
}
.doc-alert-warning .doc-alert-description {
  color: #78350f;
}
.dark .doc-alert-warning {
  border-color: #78350f;
  background: #451a03;
  color: #fffbeb;
}
.dark .doc-alert-warning .doc-alert-description {
  color: #fffbeb;
}
.doc-alert-no-icon {
  grid-template-columns: minmax(0, 1fr);
  padding-inline-end: 4.5rem;
}
.doc-alert-no-icon .doc-alert-title,
.doc-alert-no-icon .doc-alert-description {
  grid-column: 1;
}
.doc-alert-action {
  position: absolute;
  top: 0.5rem;
  inset-inline-end: 0.5625rem;
  display: inline-flex;
  width: 3.5rem;
  height: 1.5rem;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 0.5rem;
  background: var(--primary);
  color: var(--primary-foreground);
  padding: 0 0.5rem;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
}
.doc-rtl-preview.doc-alert-rtl-preview {
  align-items: center;
  padding: 1.5rem;
}
.doc-accordion {
  display: flex;
  width: 100%;
  max-width: 24rem;
  flex-direction: column;
}
.doc-accordion-item:not(:last-child) {
  border-bottom: 1px solid var(--border);
}
.doc-body .doc-accordion-heading {
  display: flex;
  margin: 0;
  font: inherit;
}
.doc-accordion-trigger {
  display: flex;
  width: 100%;
  min-height: 2.625rem;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  border: 1px solid transparent;
  border-radius: 0.625rem;
  background: transparent;
  color: var(--foreground);
  padding: 0.625rem 0;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  text-align: start;
  cursor: pointer;
  outline: none;
}
.doc-accordion-trigger:hover:not(:disabled) span:first-child {
  text-decoration: underline;
}
.doc-accordion-trigger:focus-visible {
  border-color: var(--ring);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
}
.doc-accordion-trigger:disabled {
  cursor: default;
  opacity: 0.5;
}
.doc-accordion-chevron {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  margin-inline-start: auto;
  color: var(--muted-foreground);
}
.doc-accordion-content {
  overflow: hidden;
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.doc-accordion-content[data-state="open"] {
  animation: doc-accordion-down 180ms ease-out;
}
.doc-accordion-content-inner {
  padding: 0 0 0.625rem;
}
.doc-accordion-bordered {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 0.625rem;
}
.doc-accordion-bordered .doc-accordion-item {
  padding: 0 1rem;
}
.doc-accordion-card {
  display: flex;
  width: 100%;
  max-width: 24rem;
  flex-direction: column;
  gap: 1rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: var(--card);
  color: var(--card-foreground);
  padding: 1rem 0;
  box-shadow: 0 1px 2px color-mix(in oklab, var(--foreground) 8%, transparent);
}
.doc-accordion-card-header {
  display: grid;
  gap: 0.25rem;
  padding: 0 1rem;
}
.doc-accordion-card-header h4,
.doc-accordion-card-header p {
  margin: 0;
}
.doc-accordion-card-header h4 {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.375rem;
}
.doc-accordion-card-header p {
  color: var(--muted-foreground);
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.doc-accordion-card-content {
  padding: 0 0.9375rem;
}
/* Typography previews — mirrors the Tailwind utilities used by the React docs.
   Prefixed with .doc-body so they win over the generic prose rules. */
.doc-body .doc-typography-h1 {
  scroll-margin-top: 5rem;
  text-align: center;
  font-size: 2.25rem;
  line-height: 2.5rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  text-wrap: balance;
  margin: 0;
}
.doc-body .doc-typography-h1.is-start {
  text-align: start;
}
.doc-body .doc-typography-h2 {
  scroll-margin-top: 5rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.5rem;
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  margin: 0;
}
.doc-body .doc-typography-h3 {
  scroll-margin-top: 5rem;
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  margin: 0;
}
.doc-body .doc-typography-h4 {
  scroll-margin-top: 5rem;
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  margin: 0;
}
.doc-body .doc-typography-p {
  line-height: 1.75rem;
  margin: 0;
}
.doc-body .doc-typography-lead-paragraph {
  font-size: 1.25rem;
  line-height: 1.75rem;
  color: var(--muted-foreground);
  margin: 0;
}
.doc-body .doc-typography-lead {
  font-size: 1.25rem;
  line-height: 1.75rem;
  color: var(--muted-foreground);
  margin: 0;
}
.doc-body .doc-typography-large {
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 600;
}
.doc-body .doc-typography-small {
  font-size: 0.875rem;
  line-height: 1;
  font-weight: 500;
}
.doc-body .doc-typography-muted {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--muted-foreground);
  margin: 0;
}
.doc-body .doc-typography-blockquote {
  border-inline-start: 2px solid var(--border);
  padding: 0;
  padding-inline-start: 1.5rem;
  font-style: italic;
  line-height: 1.5;
  color: inherit;
  margin: 1.5rem 0 0;
}
.doc-body .doc-typography-list {
  display: block;
  gap: 0;
  margin: 1.5rem 0;
  margin-inline-start: 1.5rem;
  padding: 0;
  line-height: 1.5;
  list-style-type: disc;
}
.doc-body .doc-typography-list > li {
  margin-top: 0.5rem;
}
.doc-body .doc-typography-inline-code {
  position: relative;
  border-radius: 0.25rem;
  background: var(--muted);
  padding: 0.2rem 0.3rem;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
}
.doc-body .doc-typography-table-wrap {
  width: 100%;
  margin: 1.5rem 0;
  overflow-y: auto;
}
.doc-body .doc-typography-table {
  width: 100%;
  border-collapse: collapse;
  line-height: 1.5;
}
.doc-body .doc-typography-table tr {
  border-top: 1px solid var(--border);
}
.doc-body .doc-typography-table tr:nth-child(even) {
  background: var(--muted);
}
.doc-body .doc-typography-table th,
.doc-body .doc-typography-table td {
  border: 1px solid var(--border);
  padding: 0.5rem 1rem;
  text-align: start;
}
.doc-body .doc-typography-table th {
  font-weight: 700;
}
/* The demo and RTL previews render a full article, so they grow with content
   the way the React docs do via [&_.preview]:h-auto. */
.doc-body .doc-typography-article {
  width: 100%;
  line-height: 1.5;
}
.doc-body .doc-typography-article > * + * {
  margin-top: 1.5rem;
}
.doc-body .doc-typography-article .doc-typography-h2 {
  margin-top: 2.5rem;
}
.doc-body .doc-typography-article .doc-typography-h3 {
  margin-top: 2rem;
}
.doc-rtl-preview.doc-typography-rtl-preview {
  box-sizing: border-box;
  height: auto;
  align-items: flex-start;
  padding: 2.5rem;
  font-family: "Noto Sans Arabic Variable", sans-serif;
}
/* Steps — mirrors the React docs' `.steps` rail and `step` counter utility. */
.doc-body .doc-steps {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  counter-reset: step;
  margin-bottom: 3rem;
}
@media (min-width: 768px) {
  .doc-body .doc-steps {
    margin-left: 1rem;
    border-left: 1px solid var(--border);
    padding-left: 2rem;
  }
}
.doc-body .doc-steps:first-child {
  margin-top: 0;
}
.doc-body .doc-steps .doc-step {
  position: relative;
  counter-increment: step;
  /* .doc-body lays blocks out with a 1.5rem flex gap, so this tops the
     heading up to the 2rem the React docs use. */
  margin-top: 0.5rem;
  scroll-margin-top: 8rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 500;
  letter-spacing: -0.025em;
}
.doc-body .doc-steps .doc-step::before {
  content: counter(step);
  display: inline-flex;
  width: 1.5rem;
  height: 1.5rem;
  align-items: center;
  justify-content: center;
  margin-right: 0.5rem;
  border-radius: 9999px;
  border: 0 solid var(--background);
  background: var(--muted);
  color: var(--foreground);
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.875rem;
  font-weight: 500;
  text-align: center;
  text-indent: -1px;
}
@media (min-width: 768px) {
  .doc-body .doc-steps .doc-step::before {
    position: absolute;
    width: 2.25rem;
    height: 2.25rem;
    margin-top: -4px;
    margin-left: -50px;
    border-width: 4px;
  }
}
.doc-rtl-preview-shell {
  width: 100%;
}
.doc-rtl-preview-toolbar {
  display: flex;
  position: relative;
  height: 4rem;
  align-items: center;
  border-bottom: 1px solid var(--border);
  padding: 0 1rem;
}
.doc-rtl-preview-toolbar select {
  appearance: none;
  width: 9rem;
  height: 1.75rem;
  border: 1px solid var(--input);
  border-radius: min(var(--radius-md), 10px);
  background: transparent;
  color: var(--foreground);
  padding: 0 1.875rem 0 0.625rem;
  font: inherit;
  font-size: 0.875rem;
}
/* Chevron drawn over the native control: the select is 9rem wide and starts
   after the toolbar's 1rem padding, so the icon sits 0.5rem inside its end. */
.doc-rtl-preview-toolbar::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 8.5rem;
  width: 1rem;
  height: 1rem;
  transform: translateY(-50%);
  background-color: var(--muted-foreground);
  mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 1rem 1rem no-repeat;
  pointer-events: none;
}
.doc-rtl-info-button {
  display: inline-grid;
  width: 1.75rem;
  height: 1.75rem;
  place-items: center;
  margin-inline-start: auto;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  color: var(--foreground);
  padding: 0;
  cursor: pointer;
}
.doc-rtl-info-button:hover {
  background: var(--accent);
}
.doc-rtl-info-button svg {
  width: 1rem;
  height: 1rem;
}
.doc-rtl-preview {
  display: flex;
  height: 18rem;
  justify-content: center;
  align-items: flex-start;
  padding: 2.5rem;
}
@keyframes doc-accordion-down {
  from {
    max-height: 0;
    opacity: 0;
  }
  to {
    max-height: 12rem;
    opacity: 1;
  }
}
@media (max-width: 767px) {
  .doc-component-card[data-doc-preview-name="accordion-multiple"] .doc-component-preview-stage {
    height: 36rem;
    min-height: 36rem;
  }

  .doc-component-card[data-doc-preview-name="accordion-borders"] .doc-component-preview-stage {
    height: 24rem;
    min-height: 24rem;
  }

  .doc-component-card[data-doc-preview-name="accordion-card"] .doc-component-preview-stage {
    height: 32rem;
    min-height: 32rem;
  }
}
@media (max-width: 639px) {
  .doc-component-card[data-doc-preview-name^="alert-"]:not([data-doc-preview-name^="alert-dialog-"]):not([data-doc-preview-name="alert-rtl"]) .doc-component-preview-stage {
    height: auto;
    min-height: 0;
  }

  .doc-component-card[data-doc-preview-name="alert-rtl"] .doc-component-preview-stage {
    height: auto;
    min-height: 0;
  }

  .doc-rtl-preview.doc-alert-rtl-preview {
    height: auto;
  }
}
.doc-preview-avatar-row,
.doc-preview-chip-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}
.doc-preview-avatar-row span,
.doc-preview-chip-row span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in oklab, var(--border) 85%, transparent);
  background: var(--card);
  color: var(--foreground);
}
.doc-preview-avatar-row span {
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  font-size: 0.84rem;
  font-weight: 700;
}
.doc-preview-chip-row span {
  border-radius: 999px;
  padding: 0.45rem 0.8rem;
  font-size: 0.84rem;
  font-weight: 600;
}
.doc-preview-chip-row span.is-primary {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-foreground);
}
.doc-preview-form-stack,
.doc-preview-nav-shell,
.doc-preview-type-stack,
.doc-preview-feedback-shell {
  display: grid;
  gap: 0.75rem;
  width: min(100%, 24rem);
}
.doc-preview-input-row,
.doc-preview-table-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  align-items: center;
  border: 1px solid color-mix(in oklab, var(--border) 88%, transparent);
  border-radius: 0.8rem;
  background: var(--card);
  padding: 0.75rem 0.85rem;
}
.doc-preview-input-row span,
.doc-preview-table-row span,
.doc-preview-card-shell p,
.doc-preview-type-stack p {
  color: var(--muted-foreground);
}
.doc-preview-input-row strong,
.doc-preview-table-row strong,
.doc-preview-card-shell h4,
.doc-preview-type-stack strong {
  margin: 0;
}
.doc-preview-meter {
  height: 0.55rem;
  border-radius: 999px;
  background: color-mix(in oklab, var(--muted) 74%, var(--card));
  overflow: hidden;
}
.doc-preview-meter span {
  display: block;
  height: 100%;
  width: 64%;
  border-radius: inherit;
  background: var(--primary);
}
.doc-preview-meter span.is-wide {
  width: 78%;
}
.doc-preview-card-shell {
  display: grid;
  gap: 0.65rem;
  width: min(100%, 24rem);
  border: 1px solid color-mix(in oklab, var(--border) 88%, transparent);
  border-radius: 0.9rem;
  background: var(--card);
  padding: 1rem;
}
.doc-preview-card-shell-compact {
  width: 100%;
}
.doc-preview-table-shell {
  display: grid;
  gap: 0.55rem;
  width: min(100%, 28rem);
}
.doc-preview-table-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.doc-preview-table-row-head {
  background: color-mix(in oklab, var(--muted) 60%, var(--card));
  font-weight: 600;
}
.doc-preview-chart {
  width: min(100%, 24rem);
  height: auto;
}
.doc-preview-chart-fill {
  fill: color-mix(in oklab, var(--primary) 16%, transparent);
}
.doc-preview-chart-line {
  fill: none;
  stroke: var(--primary);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.doc-preview-spinner {
  width: 2.5rem;
  height: 2.5rem;
  border: 2px solid color-mix(in oklab, var(--border) 82%, transparent);
  border-top-color: var(--primary);
  border-radius: 999px;
  animation: root-preview-spin 1s linear infinite;
}
.docs-toc {
  display: none;
  position: sticky;
  top: calc(var(--header-height) + 1px);
  max-height: 90svh;
  overflow-y: auto;
  scrollbar-width: none;
  flex-direction: column;
  gap: 2rem;
  padding: 4rem 0 2rem;
}
.docs-toc::-webkit-scrollbar {
  display: none;
}
@media (min-width: 1280px) {
  .docs-toc {
    display: flex;
  }
}
.docs-toc-label {
  height: 1.5rem;
  padding: 0 2rem;
  color: var(--muted-foreground);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.5rem;
}
.docs-toc ul {
  list-style: none;
  margin: 0;
  padding: 0 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.docs-toc a {
  display: block;
  color: var(--muted-foreground);
  font-size: 0.8rem;
  line-height: 1.25rem;
  transition: color 120ms ease;
}
.docs-toc a:hover {
  color: var(--foreground);
}
.docs-toc a.toc-level-3 {
  padding-left: 1rem;
}
.docs-cta-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0 1.5rem;
  border: 0;
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  background: var(--surface);
  color: var(--surface-foreground);
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.docs-cta-title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
  text-wrap: balance;
}
.docs-cta-copy {
  margin-top: 0;
  color: var(--muted-foreground);
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.docs-cta-button {
  margin-top: 0.5rem;
  width: fit-content;
}
.toc-level-3 {
  padding-left: 0.75rem;
}
.colors-grid {
  display: grid;
  gap: 1rem;
}
.colors-route-grid {
  display: grid;
  gap: 0;
  padding-bottom: 1.5rem;
}
.color-palette {
  display: block;
  border-radius: var(--radius-lg);
  scroll-margin-top: 5rem;
}
.color-palette-head {
  display: flex;
  align-items: center;
  height: 2rem;
  padding: 0 1rem;
}
.color-palette-head h2 {
  flex: 1;
  margin: 0;
  padding-left: 0.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  text-transform: capitalize;
}
.color-format-field {
  width: auto;
}
.ui-select-trigger.color-format-trigger {
  width: auto;
  border-color: var(--secondary);
  border-radius: var(--radius-md);
  background: var(--secondary);
  color: var(--secondary-foreground);
  padding-left: 0.75rem;
}
.color-format-content {
  border-radius: var(--radius-xl);
}
.color-scales {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem 0;
}
@media (min-width: 640px) {
  .color-scales {
    flex-direction: row;
    gap: 0.5rem;
  }
}
.color-scale {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.5rem;
  aspect-ratio: 3 / 1;
  width: 100%;
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--swatch-foreground);
  cursor: pointer;
}
@media (min-width: 640px) {
  .color-scale {
    aspect-ratio: 2 / 3;
    width: auto;
    height: auto;
  }
}
.color-swatch {
  display: block;
  flex: 1;
  width: 100%;
  border-radius: var(--radius-md);
  background: var(--swatch);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--input) 100%, transparent);
}
@media (min-width: 768px) {
  .color-swatch {
    border-radius: var(--radius-lg);
  }
}
.color-scale-label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  color: var(--muted-foreground);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  transition: color 120ms ease;
}
.color-scale:hover .color-scale-label {
  color: var(--foreground);
}
.hero {
  display: grid;
  gap: 0.4rem;
}
.home-hero-card {
  padding: 2rem 1.5rem;
}
.home-hero-card h1,
.examples-hero h1 {
  max-width: 56rem;
}
.example-preview-section {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding-inline: 0.5rem;
  padding-bottom: 1.5rem;
}
.example-preview-section .route-theme-container {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1rem;
  scroll-margin-top: 5rem;
}
@media (min-width: 768px) {
  .home-hero-card {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
@media (min-width: 1024px) {
  .home-hero-card {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}
.home-preview-card {
  display: grid;
  gap: 0.75rem;
}
.home-mobile-preview {
  display: block;
}
.home-preview-shell {
  flex: 1;
  padding-bottom: 1.5rem;
}
.home-theme-container {
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
}
.section-soft {
  background-image: linear-gradient(
    to bottom,
    var(--background),
    color-mix(in oklab, var(--surface) 40%, transparent)
  );
}
.dark .section-soft {
  background-image: none;
  background-color: var(--background);
}
@media (max-width: 767.98px) {
  .home-preview-container {
    overflow: hidden;
  }
}
.home-mobile-preview-card {
  width: min(160vw, 100% + 8rem);
  margin-left: -1rem;
}
.home-examples-root {
  display: none;
}
.home-preview-images {
  display: grid;
  gap: 0.8rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.example-detail-card {
  display: flex;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--background);
  background-clip: padding-box;
}
.example-detail-card:has([data-menu-panel]:not([hidden])) {
  position: relative;
  z-index: 70;
  overflow: visible;
}
.example-detail-card:has([data-slot="rtl-components"]) {
  overflow: visible;
  border: 0;
  background: transparent;
}
@media (min-width: 1280px) {
  .example-detail-card {
    border-radius: var(--radius-xl);
  }
}
.example-detail-head {
  display: grid;
  gap: 0.5rem;
}
.example-preview-grid {
  display: grid;
  gap: 0.8rem;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.example-preview-card {
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 0.55rem;
  background: color-mix(in oklab, var(--muted) 30%, var(--card));
  padding: 0.55rem;
  display: grid;
  gap: 0.45rem;
}
.example-preview-card img {
  width: 100%;
  height: auto;
  border-radius: 0.35rem;
  border: 1px solid var(--border);
}
.color-mode-image-dark {
  display: none;
}
.dark .color-mode-image-light {
  display: none;
}
.dark .color-mode-image-dark {
  display: block;
}
/* shadcn primitives */
.ui-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--card);
  color: var(--card-foreground);
  padding: 1.5rem;
}
.ui-field-group {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.ui-field-set {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
  border: 0;
  margin: 0;
  padding: 0;
}
.ui-field-legend {
  margin: 0 0 0.375rem;
  padding: 0;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5rem;
}
.ui-field-description {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.875rem;
  line-height: 1.5;
  text-align: left;
}
.ui-field-legend + .ui-field-description {
  margin-top: -0.375rem;
}
.ui-field {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 0.5rem;
}
.ui-field-horizontal {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
}
.ui-field-row {
  display: grid;
  gap: 1rem;
}
.ui-field-row-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ui-field-row-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ui-col-span-2 {
  grid-column: span 2 / span 2;
}
.ui-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.375;
}
.ui-label-normal {
  font-weight: 400;
}
.ui-input,
.ui-select-trigger,
.ui-textarea {
  display: flex;
  width: 100%;
  min-width: 0;
  border: 1px solid var(--input);
  border-radius: var(--radius-lg);
  background: transparent;
  color: var(--foreground);
  font-family: inherit;
  font-size: 0.875rem;
  line-height: 1.25rem;
  outline: none;
  transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease;
}
.ui-input,
.ui-select-trigger {
  height: 2rem;
  align-items: center;
  padding: 0.25rem 0.625rem;
}
.ui-textarea {
  min-height: 4rem;
  padding: 0.5rem 0.625rem;
  resize: vertical;
}
.ui-input::placeholder,
.ui-textarea::placeholder {
  color: var(--muted-foreground);
}
.ui-input:focus-visible,
.ui-select-trigger:focus-visible,
.ui-textarea:focus-visible {
  border-color: var(--ring);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
}
.ui-select-shell {
  position: relative;
  display: inline-flex;
  width: auto;
  max-width: 100%;
  align-items: center;
}
.ui-select-shell-full {
  width: 100%;
}
.ui-select-native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.ui-select-trigger {
  justify-content: space-between;
  gap: 0.375rem;
  padding-block: 0.5rem;
  padding-inline-start: 0.625rem;
  padding-inline-end: 0.5rem;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}
.ui-select-trigger[data-placeholder="true"] .ui-select-value {
  color: var(--muted-foreground);
}
.ui-select-prefix {
  flex: none;
  font-weight: 500;
}
.ui-select-value {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ui-select-value-mono {
  flex: none;
  color: var(--muted-foreground);
  font-family: var(--font-mono);
}
.ui-select-chevron {
  flex: none;
  width: 1rem;
  height: 1rem;
  color: var(--muted-foreground);
  pointer-events: none;
}
.ui-select-content {
  position: absolute;
  z-index: 60;
  min-width: 100%;
  max-height: 16rem;
  overflow-y: auto;
  border-radius: var(--radius-lg);
  background: var(--popover);
  color: var(--popover-foreground);
  padding: 0.25rem;
  box-shadow:
    0 0 0 1px color-mix(in oklab, var(--foreground) 10%, transparent),
    0 4px 6px -1px rgb(0 0 0 / 0.1),
    0 2px 4px -2px rgb(0 0 0 / 0.1);
}
.ui-select-content[hidden] {
  display: none;
}
.ui-select-content[data-menu-side="bottom"] {
  top: calc(100% + 0.25rem);
}
.ui-select-content[data-menu-side="top"] {
  bottom: calc(100% + 0.25rem);
}
.ui-select-content[data-menu-align="start"] {
  left: 0;
}
.ui-select-content[data-menu-align="end"] {
  right: 0;
}
.ui-select-group-label {
  margin: 0;
  padding: 0.25rem 0.375rem;
  color: var(--muted-foreground);
  font-size: 0.75rem;
  line-height: 1rem;
}
.ui-select-item {
  position: relative;
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.375rem;
  height: 1.75rem;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: inherit;
  padding: 0.25rem 2rem 0.25rem 0.375rem;
  font-family: inherit;
  font-size: 0.875rem;
  line-height: 1.25rem;
  text-align: left;
  white-space: nowrap;
  cursor: default;
}
.ui-select-item:hover,
.ui-select-item[data-active="true"] {
  background: var(--accent);
  color: var(--accent-foreground);
  outline: none;
}
.ui-select-item[aria-selected="true"] {
  background: var(--accent);
  color: var(--accent-foreground);
}
.ui-select-item-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ui-select-item-hint {
  color: var(--muted-foreground);
  font-family: var(--font-mono);
  font-size: 0.75rem;
}
.ui-select-item-check {
  position: absolute;
  right: 0.375rem;
  width: 1rem;
  height: 1rem;
  opacity: 0;
}
.ui-select-item[aria-selected="true"] .ui-select-item-check {
  opacity: 1;
}
.ui-checkbox {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  border: 1px solid var(--input);
  border-radius: 4px;
  background: var(--background);
  color: var(--primary-foreground);
  padding: 0;
  cursor: pointer;
  outline: none;
  transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease;
}
.ui-checkbox[data-checked="true"] {
  border-color: var(--primary);
  background: var(--primary);
}
.ui-checkbox svg {
  width: 0.875rem;
  height: 0.875rem;
  opacity: 0;
}
.ui-checkbox[data-checked="true"] svg {
  opacity: 1;
}
.ui-separator {
  display: block;
  flex: none;
  width: 100%;
  height: 1px;
  background: var(--border);
}
.root-field-demo .ui-separator {
  position: relative;
  height: 1.25rem;
  margin-block: -0.5rem;
  background: transparent;
}
.root-field-demo .ui-separator::after {
  position: absolute;
  inset-inline: 0;
  top: 50%;
  height: 1px;
  background: var(--border);
  content: "";
}
.ui-field-separator {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 1.25rem;
  margin: -0.5rem 0;
  font-size: 0.875rem;
}
.ui-field-separator::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 50%;
  height: 1px;
  background: var(--border);
}
.ui-field-separator span {
  position: relative;
  display: block;
  width: fit-content;
  margin: 0 auto;
  background: var(--background);
  padding: 0 0.5rem;
  color: var(--muted-foreground);
  line-height: 1.25rem;
}
.ui-badge {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  width: fit-content;
  height: 1.25rem;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1rem;
  white-space: nowrap;
}
.ui-badge-default {
  background: var(--primary);
  color: var(--primary-foreground);
}
.ui-badge-secondary {
  background: var(--secondary);
  color: var(--secondary-foreground);
}
.ui-badge-outline {
  border-color: var(--border);
  color: var(--foreground);
}
.ui-badge svg {
  width: 0.75rem;
  height: 0.75rem;
}
.ui-muted {
  color: var(--muted-foreground);
}
.ui-empty {
  display: flex;
  flex: none;
  width: 100%;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  border: 1px dashed var(--border);
  border-radius: var(--radius-xl);
  padding: 2.5rem 1.5rem;
  text-align: center;
}
.ui-empty-header {
  display: flex;
  max-width: 24rem;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
}
.ui-empty-title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  letter-spacing: -0.01em;
}
.ui-empty-description {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.875rem;
  line-height: 1.625;
}
.ui-avatar-group {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
  filter: grayscale(1);
}
.ui-avatar-group > * {
  margin-inline-start: -0.5rem;
}
.ui-avatar-group > *:first-child {
  margin-inline-start: 0;
}
.ui-avatar {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  outline: 2px solid var(--background);
  background: var(--muted);
  color: var(--muted-foreground);
  font-size: 0.75rem;
  font-weight: 500;
  overflow: hidden;
}
.ui-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ui-spinner {
  width: 1rem;
  height: 1rem;
  animation: ui-spin 1s linear infinite;
}
@keyframes ui-spin {
  to {
    transform: rotate(360deg);
  }
}
.ui-input-group {
  position: relative;
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: center;
  height: 2rem;
  border: 1px solid var(--input);
  border-radius: var(--radius-lg);
  background: transparent;
  outline: none;
  transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease;
}
.ui-input-group-round {
  border-radius: 999px;
}
.ui-input-group-block {
  height: auto;
  flex-direction: column;
  align-items: stretch;
}
.ui-input-group-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--foreground);
  padding: 0.25rem 0.75rem;
  font-family: inherit;
  font-size: 0.875rem;
  line-height: 1.25rem;
  outline: none;
}
.ui-input-group-input::placeholder {
  color: var(--muted-foreground);
}
.ui-input-group-textarea {
  width: 100%;
  min-height: 4rem;
  border: 0;
  background: transparent;
  color: var(--foreground);
  padding: 0.5rem 0.625rem;
  font-family: inherit;
  font-size: 0.875rem;
  line-height: 1.25rem;
  outline: none;
  resize: none;
}
.ui-input-group-textarea::placeholder {
  color: var(--muted-foreground);
}
.ui-input-group:has(.ui-input-group-input:focus-visible),
.ui-input-group:has(.ui-input-group-textarea:focus-visible) {
  border-color: var(--ring);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
}
.ui-input-group-addon {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0;
  color: var(--muted-foreground);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
}
.ui-input-group-addon svg {
  width: 1rem;
  height: 1rem;
}
.ui-input-group-addon-end {
  order: 1;
  padding-inline-end: 0.5rem;
}
.ui-input-group-addon-end:has(> .ui-input-group-button) {
  margin-inline-end: -0.3rem;
}
.ui-input-group-addon:not(.ui-input-group-addon-end):not(.ui-input-group-addon-block) {
  order: -1;
  padding-inline-start: 0.5rem;
}
.ui-input-group-addon:not(.ui-input-group-addon-end):not(.ui-input-group-addon-block):has(> .ui-input-group-button) {
  margin-inline-start: -0.3rem;
}
.ui-input-group-addon-block {
  order: 1;
  width: 100%;
  padding: 0.375rem 0.625rem 0.5rem;
}
.ui-input-group-button {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--muted-foreground);
  padding: 0 0.5rem;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}
.ui-input-group-button:hover {
  background: var(--accent);
  color: var(--accent-foreground);
}
.ui-input-group-button-icon {
  width: 1.5rem;
  padding: 0;
  border-radius: 999px;
}
.ui-input-group-button-icon svg {
  width: 0.875rem;
  height: 0.875rem;
}
.ui-input-group-button-outline {
  border: 1px solid var(--input);
}
.ui-input-group-button-primary {
  background: var(--primary);
  color: var(--primary-foreground);
}
.ui-input-group-button[data-toggle="voice"][data-toggle-active="true"] {
  background: var(--primary);
  color: var(--primary-foreground);
}
.ui-input-group-input:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.ui-input-group-button[data-toggle="favorite"][data-toggle-active="true"] svg {
  fill: var(--primary);
  stroke: var(--primary);
}
.ui-input-group-button-primary:hover {
  background: color-mix(in oklab, var(--primary) 90%, transparent);
  color: var(--primary-foreground);
}
.ui-button-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}
.ui-button-group-attached {
  gap: 0;
}
.ui-button-group .button-xs {
  border-radius: var(--radius-lg);
}
.ui-button-group-attached > *:not(:first-child) {
  border-start-start-radius: 0;
  border-end-start-radius: 0;
  margin-inline-start: -1px;
}
.ui-button-group-attached > *:not(:last-child) {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}
.ui-icon-button {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--input);
  border-radius: var(--radius-lg);
  background: transparent;
  color: var(--foreground);
  padding: 0;
  font-family: inherit;
  font-size: 0.875rem;
  line-height: 1.25rem;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}
.ui-icon-button:hover {
  background: var(--accent);
  color: var(--accent-foreground);
}
.ui-icon-button:disabled {
  opacity: 0.5;
  pointer-events: none;
}
.ui-icon-button svg {
  width: 1rem;
  height: 1rem;
}
.ui-icon-button-round {
  border-radius: 999px;
}
.ui-slider {
  position: relative;
  display: flex;
  width: 100%;
  align-items: center;
  height: 1rem;
  margin-top: 0.5rem;
  touch-action: none;
  cursor: pointer;
}
.ui-slider-track {
  position: relative;
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: var(--muted);
  overflow: hidden;
}
.ui-slider-range {
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--primary);
}
.ui-slider-thumb {
  position: absolute;
  top: 50%;
  width: 1rem;
  height: 1rem;
  border: 1px solid var(--ring);
  border-radius: 999px;
  background: var(--background);
  transform: translate(-50%, -50%);
  box-shadow: none;
  cursor: grab;
  outline: none;
  transition: color 150ms ease, box-shadow 150ms ease;
}
.ui-slider-thumb:active {
  cursor: grabbing;
}
.ui-slider-thumb:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
}
.root-badge-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.root-field-title {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
}
.root-field-slider .root-field-title {
  line-height: 1.375;
}
.root-field-slider .ui-field-description {
  margin-top: -0.25rem;
}
.root-field-slider .ui-slider-thumb {
  width: 0.75rem;
  height: 0.75rem;
  background: #fff;
}
.rtl-components .root-field-slider .ui-slider {
  height: 4px;
}
.rtl-components .root-field-slider .ui-slider-thumb {
  transform: translate(50%, -50%);
}
.root-numeric {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.root-input-group-stack {
  display: grid;
  width: 100%;
  gap: 1.5rem;
}
.root-input-flush {
  padding-left: 0.25rem;
}
.root-input-flush-rtl {
  padding-right: 0.25rem;
}
.root-inline-divider {
  flex: none;
  width: 1px;
  height: 1rem;
  background: var(--border);
}
.root-input-group-usage {
  margin-left: auto;
}
.root-verified-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-foreground);
}
.root-verified-dot svg {
  width: 0.75rem;
  height: 0.75rem;
}
.ui-item {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.625rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 0.625rem 0.75rem;
  color: var(--foreground);
  font-size: 0.875rem;
  line-height: 1.25rem;
  transition: background-color 120ms ease;
}
a.ui-item:hover {
  background: color-mix(in oklab, var(--muted) 50%, transparent);
}
.ui-item-media {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  color: inherit;
}
.ui-item-media svg {
  width: 1.25rem;
  height: 1.25rem;
}
.ui-item-content {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: 0.25rem;
}
.ui-item-title {
  margin: 0;
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.375;
}
.ui-item-description {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.875rem;
  line-height: 1.5;
  text-align: left;
  text-wrap: pretty;
}
.ui-item-actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.5rem;
  color: inherit;
}
.ui-item-actions svg {
  width: 1rem;
  height: 1rem;
}
.ui-radio-card {
  display: flex;
  width: 100%;
  align-items: flex-start;
  gap: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 0.75rem;
  text-align: left;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.ui-radio-card[data-checked="true"] {
  border-color: color-mix(in oklab, var(--primary) 30%, transparent);
  background: color-mix(in oklab, var(--primary) 5%, transparent);
}
.ui-radio {
  display: inline-flex;
  flex: none;
  margin-top: 1px;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  border: 1px solid var(--input);
  border-radius: 999px;
  background: var(--background);
  outline: none;
  transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease;
}
.ui-radio[data-checked="true"] {
  border-color: var(--primary);
  background: var(--primary);
}
.ui-radio span {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--background);
  opacity: 0;
}
.ui-radio[data-checked="true"] span {
  opacity: 1;
}
.ui-switch {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  width: 2rem;
  height: 18.4px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--input);
  padding: 0;
  cursor: pointer;
  outline: none;
  transition: all 150ms ease;
}
.ui-switch[data-checked="true"] {
  background: var(--primary);
}
.ui-switch span {
  display: block;
  width: 1rem;
  height: 1rem;
  border-radius: 999px;
  background: var(--background);
  transform: translateX(0);
  transition: transform 120ms ease;
}
.ui-switch[data-checked="true"] span {
  transform: translateX(calc(100% - 2px));
}
.ui-switch.is-sm { width: 24px; height: 14px; }
.ui-switch.is-sm span { width: 12px; height: 12px; }
.ui-switch.is-sm[data-checked="true"] span { transform: translateX(calc(100% - 2px)); }
.ui-counter-input {
  width: 3.5rem;
  height: 1.75rem;
  border: 1px solid var(--input);
  border-radius: var(--radius-lg);
  background: transparent;
  color: var(--foreground);
  padding: 0 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  text-align: center;
  outline: none;
  transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease;
}
.ui-checkbox:focus-visible,
.ui-radio:focus-visible,
.ui-switch:focus-visible,
.ui-counter-input:focus-visible {
  border-color: var(--ring);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
}
.ui-button-group > :focus-visible {
  position: relative;
  z-index: 1;
}
.ui-icon-button-sm {
  width: 1.75rem;
  height: 1.75rem;
}
.ui-icon-button-sm svg {
  width: 0.875rem;
  height: 0.875rem;
}
.root-section-separator {
  margin: 1rem 0;
}
@media (min-width: 1280px) and (max-width: 1535.98px) {
  .root-item-description-xl {
    display: none;
  }
}
.root-item-stack,
.root-radio-group {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 1.5rem;
}
.root-radio-group {
  gap: 0.75rem;
}
.root-counter-group {
  width: auto;
  gap: 0;
}
.root-counter-group > * {
  border-radius: 0;
}
.root-counter-group > *:first-child {
  border-start-start-radius: var(--radius-lg);
  border-end-start-radius: var(--radius-lg);
}
.root-counter-group > *:last-child {
  border-start-end-radius: var(--radius-lg);
  border-end-end-radius: var(--radius-lg);
}
.root-counter-group > *:not(:first-child) {
  border-inline-start-width: 0;
}
.root-compute-fieldset {
  gap: 0.75rem;
}
.root-radio-group {
  gap: 0.5rem;
}
.root-radio-group .ui-radio-card {
  gap: 0.5rem;
  padding: 0.625rem;
}
.root-appearance-settings .ui-item-content {
  gap: 0.125rem;
}
.root-appearance-settings .ui-field-horizontal {
  align-items: flex-start;
}
.rtl-components .root-appearance-settings .ui-switch[data-checked="true"] span {
  transform: translateX(calc(-100% + 2px));
}
.root-appearance-settings .root-field-title {
  line-height: 1.375;
}
.root-addon-flush {
  padding-inline-start: 0.5rem;
  padding-inline-end: 0;
}
.ui-input-group-button-secondary {
  background: var(--secondary);
  color: var(--secondary-foreground);
}
.root-prompt-group {
  border-radius: var(--radius-xl);
}
.root-prompt-top {
  order: -1;
  border-top: 0;
  border-bottom: 0;
  padding: 0.5rem 0.625rem 0.375rem;
}
.root-prompt-bottom {
  border-top: 0;
  gap: 0.25rem;
}
.root-prompt-context,
.root-pill-button {
  color: var(--muted-foreground);
}
.root-prompt-context[data-compact="true"] {
  width: 1.75rem;
  padding: 0;
}
.root-prompt-context[data-compact="true"] .root-prompt-context-label {
  display: none;
}
.root-mention-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}
.root-mention-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  height: 1.75rem;
  border: 0;
  border-radius: 999px;
  background: var(--secondary);
  color: var(--secondary-foreground);
  padding: 0 0.5rem;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
}
.root-mention-chip:hover {
  background: color-mix(in oklab, var(--secondary) 80%, transparent);
}
.root-mention-chip-remove {
  color: var(--muted-foreground);
  font-size: 0.9rem;
  line-height: 1;
}
.root-mention-popover {
  width: 18rem;
  padding: 0;
  border-radius: var(--radius-xl);
}
.root-command {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-xl);
}
.root-command-input {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 2.25rem;
  margin: 0.25rem 0.25rem 0;
  border-radius: var(--radius-lg);
  background: color-mix(in oklab, var(--muted) 70%, transparent);
  padding: 0 0.75rem;
  color: var(--muted-foreground);
}
.root-command-input svg {
  flex: none;
  width: 1rem;
  height: 1rem;
}
.root-command-field {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--foreground);
  padding: 0;
  font-family: inherit;
  font-size: 0.875rem;
  outline: none;
}
.root-command-field::placeholder {
  color: var(--muted-foreground);
}
.root-command-list {
  max-height: 16rem;
  overflow-y: auto;
  padding: 0.25rem;
}
.root-command-group[hidden] {
  display: none;
}
.root-command-heading {
  margin: 0;
  padding: 0.375rem 0.5rem;
  color: var(--muted-foreground);
  font-size: 0.75rem;
  font-weight: 500;
}
.root-command-item {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.5rem;
  border: 0;
  border-radius: var(--radius-lg);
  background: transparent;
  color: inherit;
  padding: 0.375rem 0.5rem;
  font-family: inherit;
  font-size: 0.875rem;
  text-align: left;
  cursor: default;
}
.root-command-item[hidden] {
  display: none;
}
.root-command-item:hover,
.root-command-item[data-selected="true"] {
  background: var(--muted);
  color: var(--foreground);
}
.root-command-emoji {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  font-size: 0.875rem;
}
.root-command-avatar {
  width: 1rem;
  height: 1rem;
  outline: 0;
}
.root-command-empty {
  margin: 0;
  padding: 1.25rem 0.5rem;
  color: var(--muted-foreground);
  font-size: 0.875rem;
  text-align: center;
}
.root-command-empty[hidden] {
  display: none;
}
.root-prompt-context:hover,
.root-pill-button:hover {
  color: var(--accent-foreground);
}
.root-prompt-context {
  height: 2rem;
  border-radius: 999px;
  padding: 0 0.625rem;
  font-size: 0.875rem;
  gap: 0.5rem;
}
.root-prompt-context svg,
.root-pill-button svg {
  width: 1rem;
  height: 1rem;
}
.root-pill-button {
  height: 2rem;
  border-radius: 999px;
  padding: 0 0.625rem;
  font-size: 0.875rem;
  gap: 0.5rem;
}
.root-prompt-bottom .ui-input-group-button {
  height: 2rem;
  font-size: 0.875rem;
  gap: 0.5rem;
}
.root-prompt-bottom .ui-input-group-button-icon {
  width: 2rem;
}
.root-prompt-bottom .ui-input-group-button-icon svg {
  width: 1rem;
  height: 1rem;
}
.root-button-group-inline {
  width: auto;
}
.root-nested-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.root-check-field {
  width: 100%;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid color-mix(in oklab, var(--primary) 30%, transparent);
  border-radius: var(--radius-lg);
  background: color-mix(in oklab, var(--primary) 5%, transparent);
  padding: 0.625rem;
  cursor: pointer;
}
.root-hear-card {
  border: 0;
  padding: 1rem 0;
  box-shadow: none;
}
.root-hear-card form {
  padding-inline: 1rem;
}
.root-hear-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.root-hear-option {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.375rem 0.75rem;
  cursor: pointer;
  transition: padding 100ms linear, background-color 100ms linear;
}
.root-hear-option[data-checked="true"] {
  background: color-mix(in oklab, var(--muted) 60%, transparent);
  padding-inline: 0.5rem;
}
.root-hear-check {
  border-radius: 999px;
  margin-inline-start: -1.5rem;
  transform: translateX(-0.3125rem);
  transition: margin-inline-start 100ms linear, transform 100ms linear;
}
.root-hear-option[data-checked="true"] .root-hear-check {
  margin-inline-start: 0;
  transform: translateX(0);
}
.root-hear-option .root-field-title {
  line-height: 1.375;
}
.root-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.root-empty-solid {
  border-style: dashed;
  padding: 1.5rem;
}
.root-empty-media {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-lg);
  background: var(--muted);
  color: var(--foreground);
  margin-bottom: 0.5rem;
}
.ui-menu {
  position: relative;
  display: inline-flex;
}
.ui-tooltip {
  position: absolute;
  z-index: 90;
  width: fit-content;
  max-width: 18rem;
  border-radius: var(--radius-md);
  background: var(--primary);
  color: var(--primary-foreground);
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  line-height: 1rem;
  text-wrap: balance;
  pointer-events: none;
}
.ui-tooltip[data-side]::after {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--primary);
  content: "";
  transform: rotate(45deg);
}
.ui-tooltip[data-side="top"]::after { bottom: -3px; left: calc(50% - 5px); }
.ui-tooltip[data-side="bottom"]::after { top: -3px; left: calc(50% - 5px); }
.ui-tooltip[data-side="left"]::after { top: calc(50% - 5px); right: -3px; }
.ui-tooltip[data-side="right"]::after { top: calc(50% - 5px); left: -3px; }
.ui-tooltip[hidden] {
  display: none;
}
.ui-menu-panel,
.ui-popover-panel {
  position: absolute;
  z-index: 60;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--popover);
  color: var(--popover-foreground);
  box-shadow:
    0 0 0 1px color-mix(in oklab, var(--foreground) 10%, transparent),
    0 4px 6px -1px rgb(0 0 0 / 0.1),
    0 2px 4px -2px rgb(0 0 0 / 0.1);
}
.ui-menu-panel[hidden],
.ui-popover-panel[hidden] {
  display: none;
}
.ui-menu-panel {
  min-width: 8rem;
  padding: 0.25rem;
}
.ui-popover-panel {
  width: 18rem;
  padding: 1rem;
  font-size: 0.875rem;
}
.ui-menu-panel[data-menu-side="top"],
.ui-popover-panel[data-menu-side="top"] {
  bottom: calc(100% + 0.25rem);
}
.ui-menu-panel[data-menu-side="bottom"],
.ui-popover-panel[data-menu-side="bottom"] {
  top: calc(100% + 0.25rem);
}
.ui-menu-panel[data-menu-align="start"]:not([data-menu-side="left"]):not([data-menu-side="right"]),
.ui-popover-panel[data-menu-align="start"] {
  left: 0;
}
.ui-menu-panel[data-menu-align="end"]:not([data-menu-side="left"]):not([data-menu-side="right"]),
.ui-popover-panel[data-menu-align="end"] {
  right: 0;
}
.ui-menu-panel[data-menu-side="right"] {
  top: -0.25rem;
  left: calc(100% + 0.25rem);
}
.ui-menu-panel[data-menu-side="left"] {
  top: -0.25rem;
  right: calc(100% + 0.25rem);
}
.ui-menu-sub {
  position: relative;
  display: block;
  width: 100%;
}
.ui-menu-item {
  position: relative;
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.375rem;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: inherit;
  padding: 0.25rem 0.375rem;
  font-family: inherit;
  font-size: 0.875rem;
  line-height: 1.25rem;
  text-align: left;
  white-space: nowrap;
  cursor: default;
}
.ui-menu-item:hover,
.ui-menu-item:focus-visible,
.ui-menu-item[data-menu-trigger][aria-expanded="true"] {
  background: var(--accent);
  color: var(--accent-foreground);
  outline: none;
}
.ui-menu-item[data-destructive="true"] {
  color: var(--destructive);
}
.ui-menu-item[data-destructive="true"]:hover {
  background: color-mix(in oklab, var(--destructive) 10%, transparent);
  color: var(--destructive);
}
.ui-menu-item svg {
  flex: none;
  width: 1rem;
  height: 1rem;
}
.ui-menu-item-check {
  margin-left: auto;
  width: 1rem;
  height: 1rem;
  opacity: 0;
}
.ui-menu-item[data-selected="true"] .ui-menu-item-check {
  opacity: 1;
}
.ui-menu-separator {
  display: block;
  height: 1px;
  margin: 0.25rem -0.25rem;
  background: var(--border);
}
.ui-menu-label {
  display: block;
  padding: 0.25rem 0.375rem;
  color: var(--muted-foreground);
  font-size: 0.75rem;
  line-height: 1rem;
}
.ui-popover-title {
  margin: 0;
  font-weight: 500;
}
.ui-popover-text {
  margin: 0;
  color: var(--muted-foreground);
}
.root-model-menu {
  min-width: 12rem;
}
.root-sources-menu {
  min-width: 18rem;
}
.root-actions-menu {
  min-width: 12rem;
}
.root-knowledge-menu {
  width: 18rem;
  min-width: 18rem;
  padding: 0;
  border-radius: var(--radius-xl);
}
.root-command-item-hint {
  color: var(--muted-foreground);
}
.root-secure-popover {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  border-radius: var(--radius-xl);
}
.root-agent-popover {
  padding: 0;
  border-radius: var(--radius-xl);
}
.root-agent-popover-head {
  padding: 0.75rem 1rem;
}
.root-agent-popover-body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
}
.root-agent-textarea {
  margin-bottom: 0.5rem;
  resize: none;
}
.root-menu-trailing {
  display: inline-flex;
  align-items: center;
  margin-inline-start: auto;
}
.root-menu-trailing-icon {
  margin-inline-start: auto;
  width: 1rem;
  height: 1rem;
  color: var(--muted-foreground);
}
.rtl-components .root-rtl-directional-icon,
.rtl-components .root-menu-trailing-icon {
  transform: rotate(180deg);
}
.root-menu-avatar {
  width: 1rem;
  height: 1rem;
  outline: 0;
}
.root-beta-badge {
  height: 1.25rem;
  border-radius: var(--radius-sm);
  background: oklch(0.932 0.032 255.585);
  color: oklch(0.424 0.199 265.638);
  padding: 0 0.25rem;
}
.dark .root-beta-badge {
  background: oklch(0.379 0.146 265.522);
  color: oklch(0.932 0.032 255.585);
}
.examples-root-grid {
  display: grid;
  gap: 2rem;
  margin: 0 auto;
  padding: 0.25rem 0;
}
.rtl-components {
  position: relative;
  padding: 0.25rem;
  direction: rtl;
}
.rtl-components[data-lang="ar"] {
  font-family: "Noto Sans Arabic Variable", sans-serif;
}
.rtl-components[data-lang="he"] {
  font-family: "Noto Sans Hebrew Variable", sans-serif;
}
.rtl-language-selector {
  position: absolute;
  top: -3rem;
  right: 13rem;
  z-index: 80;
  display: none;
}
.rtl-language-selector > .ui-select-trigger {
  width: 8rem;
  height: 2rem;
  border-radius: var(--radius-lg);
}
.rtl-language-selector > .ui-select-content {
  width: 8rem;
}
.examples-root-column {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.examples-root-column-last {
  display: flex;
  order: -1;
}
.example-root-panel {
  display: contents;
}
.root-preview-subtitle,
.root-preview-field span,
.root-preview-item-row span,
.root-preview-copy,
.root-preview-check-row span {
  color: var(--muted-foreground);
}
.root-preview-separator {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.75rem;
  color: var(--muted-foreground);
}
.root-preview-separator span {
  display: block;
  height: 1px;
  background: color-mix(in oklab, var(--border) 78%, transparent);
}
.root-preview-separator p {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 500;
}
.root-preview-subtitle,
.root-preview-copy,
.root-preview-field span,
.root-preview-item-row span,
.root-preview-check-row span {
  font-size: 0.8rem;
  line-height: 1.4;
}
.root-preview-section,
.root-preview-grid {
  display: grid;
}
.root-preview-section {
  gap: 0.2rem;
}
.root-preview-grid {
  gap: 0.55rem;
}
.root-preview-grid-three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.root-preview-shell,
.root-preview-stack,
.root-preview-field,
.root-preview-item-row,
.root-preview-slider-row,
.root-preview-check-row,
.root-preview-separator {
  display: grid;
}
.root-preview-shell {
  gap: 0.6rem;
}
.root-preview-stack {
  gap: 0.55rem;
}
.root-preview-field,
.root-preview-item-row,
.root-preview-slider-row,
.root-preview-check-row {
  gap: 0.2rem;
}
.root-preview-item-card {
  border: 1px solid color-mix(in oklab, var(--border) 88%, transparent);
  border-radius: 0.7rem;
  background: color-mix(in oklab, var(--muted) 28%, var(--card));
}
.root-preview-field,
.root-preview-inline-input,
.root-preview-item-row,
.root-preview-split-row,
.root-preview-badge-row,
.root-preview-segmented-row,
.root-preview-check-row,
.root-preview-avatar-row {
  border: 1px solid color-mix(in oklab, var(--border) 88%, transparent);
  border-radius: 0.7rem;
  background: color-mix(in oklab, var(--muted) 28%, var(--card));
}
.root-preview-item-card .root-preview-item-row {
  border: 0;
  border-radius: 0;
  background: transparent;
}
.root-preview-field,
.root-preview-item-row,
.root-preview-check-row {
  padding: 0.65rem 0.75rem;
}
.root-preview-item-row-split {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.root-preview-item-row-split .root-preview-section {
  flex: 1;
}
.root-preview-item-row-compact {
  gap: 0.65rem;
}
.root-preview-item-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}
.root-preview-field strong,
.root-preview-item-row strong,
.root-preview-inline-input button,
.root-preview-split-row button,
.root-preview-badge,
.root-preview-segmented-row span,
.root-preview-inline-addon {
  font-size: 0.82rem;
  font-weight: 600;
}
.root-preview-field strong,
.root-preview-item-row strong {
  color: var(--foreground);
}
.root-preview-item-action {
  flex-shrink: 0;
}
.root-preview-item-media {
  display: grid;
  place-items: center;
  width: 1.85rem;
  height: 1.85rem;
  border: 1px solid color-mix(in oklab, var(--border) 85%, transparent);
  border-radius: 999px;
  background: var(--card);
}
.root-preview-item-media span {
  display: block;
  width: 0.8rem;
  height: 0.7rem;
  border: 1.5px solid currentColor;
  border-radius: 0.22rem 0.22rem 0.28rem 0.28rem;
  color: var(--muted-foreground);
  position: relative;
}
.root-preview-item-media span::before {
  content: "";
  position: absolute;
  left: 0.12rem;
  right: 0.12rem;
  top: -0.28rem;
  height: 0.22rem;
  border: 1.5px solid currentColor;
  border-bottom: 0;
  border-radius: 0.3rem 0.3rem 0 0;
}
.root-preview-item-media-verified {
  width: 1.55rem;
  height: 1.55rem;
}
.root-preview-item-media-verified span {
  width: 0.4rem;
  height: 0.72rem;
  border: 0;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  border-radius: 0;
  transform: rotate(40deg);
  color: var(--muted-foreground);
}
.root-preview-item-media-verified span::before {
  content: none;
}
.root-preview-item-arrow {
  flex-shrink: 0;
  width: 0.42rem;
  height: 0.42rem;
  border-top: 1.5px solid var(--muted-foreground);
  border-right: 1.5px solid var(--muted-foreground);
  transform: rotate(45deg);
}
.root-preview-avatar-row {
  display: flex;
  align-items: center;
  padding: 0.5rem;
}
.root-preview-avatar-row span {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  margin-left: -0.35rem;
  border: 2px solid var(--card);
  border-radius: 999px;
  background: color-mix(in oklab, var(--muted) 68%, var(--card));
  font-size: 0.72rem;
  font-weight: 700;
}
.root-preview-avatar-row span:first-child {
  margin-left: 0;
}
.root-preview-badge-row,
.root-preview-segmented-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.45rem;
}
.root-preview-badge,
.root-preview-segmented-row span,
.root-preview-inline-addon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in oklab, var(--border) 85%, transparent);
  border-radius: 0.55rem;
  padding: 0.32rem 0.55rem;
  background: var(--card);
  color: var(--foreground);
}
.root-preview-badge.is-active,
.root-preview-segmented-row span.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-foreground);
}
.root-preview-inline-input,
.root-preview-split-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
  padding: 0.45rem;
}
.root-preview-inline-input span:first-child {
  color: var(--muted-foreground);
}
.root-preview-inline-input button,
.root-preview-split-row button {
  border: 1px solid var(--border);
  border-radius: 0.55rem;
  background: var(--card);
  color: var(--foreground);
  padding: 0.4rem 0.65rem;
  font: inherit;
}
.root-preview-button-row,
.root-preview-counter-controls,
.root-preview-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.root-preview-button,
.root-preview-counter-controls button,
.root-preview-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in oklab, var(--border) 85%, transparent);
  border-radius: 0.55rem;
  background: var(--card);
  color: var(--foreground);
  padding: 0.38rem 0.65rem;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
}
.root-preview-button-primary,
.root-preview-pill.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-foreground);
}
.root-preview-button-secondary {
  background: color-mix(in oklab, var(--muted) 40%, var(--card));
}
.root-preview-radio-card,
.root-preview-counter-row {
  position: relative;
  border: 1px solid color-mix(in oklab, var(--border) 88%, transparent);
  border-radius: 0.7rem;
  background: color-mix(in oklab, var(--muted) 22%, var(--card));
}
.root-preview-radio-card {
  display: grid;
  gap: 0.2rem;
  padding: 0.75rem 2.5rem 0.75rem 0.85rem;
}
.root-preview-radio-card.is-active {
  border-color: color-mix(in oklab, var(--primary) 60%, var(--border));
}
.root-preview-radio-indicator {
  position: absolute;
  top: 0.8rem;
  right: 0.85rem;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 999px;
  background: var(--primary);
}
.root-preview-counter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 0.85rem;
}
.root-preview-counter-value {
  min-width: 2ch;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.84rem;
  font-weight: 700;
}
.root-preview-toggle {
  display: inline-flex;
  width: 1.9rem;
  height: 1.1rem;
  border-radius: 999px;
  background: color-mix(in oklab, var(--muted) 88%, var(--card));
  border: 1px solid color-mix(in oklab, var(--border) 88%, transparent);
}
.root-preview-toggle.is-active {
  background: color-mix(in oklab, var(--primary) 65%, var(--card));
  border-color: color-mix(in oklab, var(--primary) 60%, var(--border));
}
.root-preview-inline-input-muted .root-preview-inline-addon {
  background: color-mix(in oklab, var(--muted) 72%, var(--card));
}
.root-preview-meter,
.root-preview-slider-track {
  height: 0.55rem;
  border-radius: 999px;
  background: color-mix(in oklab, var(--muted) 78%, var(--card));
  overflow: hidden;
}
.root-preview-meter span,
.root-preview-slider-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--primary);
}
.root-preview-meter span {
  width: 62%;
}
.root-preview-slider-track span {
  width: 48%;
}
.root-preview-slider-track span.is-wide {
  width: 76%;
}
.root-preview-check-row {
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.55rem;
}
.root-preview-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.95rem;
  height: 0.95rem;
  border: 1px solid var(--border);
  border-radius: 0.3rem;
  background: var(--card);
}
.root-preview-check.is-active {
  background: color-mix(in oklab, var(--primary) 72%, var(--card));
  border-color: color-mix(in oklab, var(--primary) 60%, var(--border));
}
.root-preview-empty {
  place-items: center;
  text-align: center;
}
.root-preview-spinner {
  width: 2.4rem;
  height: 2.4rem;
  border: 2px solid color-mix(in oklab, var(--border) 85%, transparent);
  border-top-color: var(--primary);
  border-radius: 999px;
  animation: root-preview-spin 1s linear infinite;
}
@keyframes root-preview-spin {
  to {
    transform: rotate(360deg);
  }
}
.charts-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.chart-display-card {
  display: grid;
  gap: 0.5rem;
}
.chart-display-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.chart-display-title {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding-left: 0.25rem;
  color: var(--muted-foreground);
  font-size: 13px;
}
.chart-display-icon {
  width: 0.9rem;
  height: 0.9rem;
}
.chart-display-actions {
  display: flex;
  align-items: center;
  margin-left: auto;
  gap: 0.5rem;
}
.chart-display-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--foreground);
  padding: 0;
  cursor: pointer;
  transition: background-color 120ms ease;
}
.chart-display-copy:hover {
  background: var(--muted);
}
.chart-display-copy .button-icon {
  width: 0.75rem;
  height: 0.75rem;
}
.chart-display-divider {
  flex: none;
  width: 1px;
  height: 1rem;
  background: var(--border);
}
.chart-display-button.button {
  height: 2rem;
}
.chart-preview-stage {
  display: grid;
  gap: 0.8rem;
  min-height: 18rem;
  border: 1px solid color-mix(in oklab, var(--border) 80%, transparent);
  border-radius: 1rem;
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--card) 88%, var(--muted) 12%), var(--card)),
    radial-gradient(circle at top, color-mix(in oklab, var(--primary) 14%, transparent), transparent 48%);
  padding: 1rem;
}
.chart-preview-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}
.chart-preview-heading {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.03em;
}
.chart-preview-header span,
.chart-pie-metrics span,
.chart-radial-center span,
.chart-tooltip-card span,
.chart-preview-legend span {
  color: var(--muted-foreground);
  font-size: 0.8rem;
}
.chart-preview-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in oklab, var(--border) 82%, transparent);
  border-radius: 999px;
  background: color-mix(in oklab, var(--muted) 58%, var(--card));
  padding: 0.25rem 0.6rem;
  color: var(--foreground) !important;
  font-size: 0.76rem;
  font-weight: 600;
}
.chart-preview-svg {
  width: 100%;
  height: auto;
  overflow: visible;
}
.chart-grid-line,
.chart-line-primary,
.chart-line-secondary,
.chart-radar-grid-shape,
.chart-radar-line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.chart-grid-line,
.chart-radar-grid-shape {
  stroke: color-mix(in oklab, var(--border) 92%, transparent);
  stroke-width: 1;
}
.chart-area-fill {
  fill: color-mix(in oklab, var(--primary) 16%, transparent);
}
.chart-line-primary,
.chart-radar-line {
  stroke: var(--primary);
  stroke-width: 3;
}
.chart-line-secondary {
  stroke: color-mix(in oklab, var(--foreground) 28%, var(--border) 72%);
  stroke-width: 2;
}
.chart-preview-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.chart-preview-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.chart-accent-dot,
.chart-muted-dot {
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
}
.chart-accent-dot {
  background: var(--primary);
}
.chart-muted-dot {
  background: color-mix(in oklab, var(--foreground) 28%, var(--border) 72%);
}
.chart-bar-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  align-items: end;
  gap: 0.6rem;
  min-height: 12rem;
}
.chart-bar-group {
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 0.24rem;
  min-height: 100%;
}
.chart-bar {
  display: block;
  width: clamp(0.42rem, 1.8vw, 0.72rem);
  height: var(--bar-height);
  border-radius: 999px 999px 0 0;
}
.chart-bar-muted {
  background: color-mix(in oklab, var(--foreground) 18%, var(--border) 82%);
}
.chart-bar-accent {
  background: var(--primary);
}
.chart-pie-layout {
  display: grid;
  grid-template-columns: minmax(120px, 148px) minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  min-height: 12rem;
}
.chart-pie-ring,
.chart-radial-ring {
  position: relative;
  border-radius: 999px;
}
.chart-pie-ring {
  width: min(100%, 9rem);
  aspect-ratio: 1;
  background: conic-gradient(var(--primary) 0 58%, #f59e0b 58% 80%, #22c55e 80% 100%);
}
.chart-pie-ring::after,
.chart-radial-ring::after {
  content: "";
  position: absolute;
  inset: 18%;
  border-radius: inherit;
  background: var(--card);
}
.chart-pie-metrics {
  display: grid;
  gap: 0.35rem;
}
.chart-pie-metrics strong,
.chart-radial-center strong,
.chart-tooltip-card strong {
  font-size: 1.05rem;
  letter-spacing: -0.04em;
}
.chart-preview-radar-svg {
  min-height: 12rem;
}
.chart-radar-fill {
  fill: color-mix(in oklab, var(--primary) 16%, transparent);
}
.chart-radial-layout {
  display: grid;
  place-items: center;
  min-height: 12rem;
}
.chart-radial-ring {
  width: min(100%, 10rem);
  aspect-ratio: 1;
  background: conic-gradient(var(--primary) 0 78%, color-mix(in oklab, var(--muted) 88%, var(--card)) 78% 100%);
}
.chart-radial-center {
  position: absolute;
  inset: 18%;
  z-index: 1;
  display: grid;
  place-items: center;
  text-align: center;
}
.chart-tooltip-layout {
  position: relative;
  min-height: 12rem;
}
.chart-tooltip-card {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  display: grid;
  gap: 0.15rem;
  border: 1px solid color-mix(in oklab, var(--border) 84%, transparent);
  border-radius: 0.8rem;
  background: color-mix(in oklab, var(--card) 92%, var(--muted) 8%);
  padding: 0.65rem 0.75rem;
  box-shadow: 0 10px 30px color-mix(in oklab, var(--foreground) 10%, transparent);
}
.chart-empty-slot {
  display: none;
  border: 1px dashed var(--border);
  border-radius: 0.9rem;
  min-height: 16rem;
  background: color-mix(in oklab, var(--muted) 40%, transparent);
}
.blocks-stack {
  display: grid;
  gap: 3rem;
}
.block-display-card {
  display: grid;
  gap: 1rem;
  scroll-margin-top: 5rem;
}
.block-display-toolbar {
  display: none;
  width: 100%;
  align-items: center;
  gap: 0.5rem;
  padding-left: 0.5rem;
}
@media (min-width: 1024px) {
  .block-display-toolbar {
    display: flex;
    padding-right: 1.5rem;
  }
}
.block-display-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  height: 2rem;
  border-radius: var(--radius-lg);
  padding: 0.25rem;
  background: var(--muted);
  color: var(--muted-foreground);
}
.block-display-tab {
  border: 0;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 1.5rem;
  border-radius: var(--radius-sm);
  padding: 0 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
}
.block-display-tab.is-active {
  background: var(--background);
  color: var(--foreground);
}
.block-display-divider {
  flex: none;
  width: 1px;
  height: 1rem;
  margin: 0 0.5rem;
  background: var(--border);
}
.block-display-description {
  flex: 1;
  font-size: 0.875rem;
  font-weight: 500;
  text-underline-offset: 2px;
}
.block-display-description:hover {
  text-decoration: underline;
}
.block-display-actions {
  display: flex;
  align-items: center;
  margin-left: auto;
  gap: 0.5rem;
}
.block-viewport-group {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  height: 2rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 3px;
}
.block-viewport-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--foreground);
  padding: 0;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}
.block-viewport-button:hover {
  background: var(--accent);
  color: var(--accent-foreground);
}
.block-viewport-button.is-active {
  background: var(--accent);
  color: var(--accent-foreground);
}
.block-viewport-button .button-icon {
  width: 1rem;
  height: 1rem;
}
.block-display-button.button {
  gap: 0.25rem;
  padding-inline: 0.5rem;
  font-family: inherit;
}
.block-display-open.button {
  height: 2rem;
}
.block-code-view {
  display: flex;
  width: 100%;
  min-height: 20rem;
  max-height: 40rem;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--code);
}
.block-code-view[hidden] {
  display: none;
}
.block-code-files {
  display: flex;
  flex: none;
  width: 14rem;
  flex-direction: column;
  gap: 0.125rem;
  overflow-y: auto;
  border-right: 1px solid var(--border);
  padding: 0.5rem;
}
.block-code-file {
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--muted-foreground);
  padding: 0.25rem 0.5rem;
  font-family: inherit;
  font-size: 0.8rem;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.block-code-file:hover {
  background: var(--accent);
  color: var(--accent-foreground);
}
.block-code-file.is-active {
  background: var(--accent);
  color: var(--foreground);
}
.block-code-source {
  flex: 1;
  min-width: 0;
  margin: 0;
  overflow: auto;
  padding: 1rem;
  color: var(--code-foreground);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.5rem;
  tab-size: 2;
}
.block-preview-stage {
  width: 100%;
  transition: width 160ms ease;
  min-height: 20rem;
  border: 1px solid color-mix(in oklab, var(--border) 80%, transparent);
  border-radius: 1rem;
  background: color-mix(in oklab, var(--muted) 16%, var(--card));
  overflow: hidden;
}
.block-preview-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.block-preview-fallback {
  display: grid;
  place-items: center;
  padding: 1rem;
}
.block-auth-shell,
.block-generic-shell {
  width: 100%;
  height: 100%;
}
.block-auth-shell {
  display: grid;
  place-items: center;
}
.block-auth-card {
  display: grid;
  gap: 0.75rem;
  width: min(100%, 22rem);
  border: 1px solid color-mix(in oklab, var(--border) 82%, transparent);
  border-radius: 1rem;
  background: var(--card);
  padding: 1rem;
  box-shadow: 0 18px 60px color-mix(in oklab, var(--foreground) 8%, transparent);
}
.block-auth-eyebrow {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.block-auth-input,
.block-auth-button,
.block-generic-row,
.block-generic-grid span,
.block-generic-rail {
  border-radius: 0.8rem;
  background: color-mix(in oklab, var(--muted) 80%, var(--card));
}
.block-auth-input {
  height: 2.7rem;
}
.block-auth-button {
  height: 2.8rem;
  background: color-mix(in oklab, var(--primary) 82%, var(--card));
}
.block-generic-shell {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  min-height: 18rem;
}
.block-generic-rail {
  border-right: 1px solid color-mix(in oklab, var(--border) 84%, transparent);
  border-radius: 0;
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--muted) 78%, var(--card)), color-mix(in oklab, var(--muted) 52%, var(--card)));
}
.block-generic-body {
  display: grid;
  align-content: start;
  gap: 0.8rem;
  padding: 1rem;
}
.block-generic-row {
  height: 3rem;
}
.block-generic-row.is-wide {
  height: 11rem;
}
.block-generic-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}
.block-generic-grid span {
  display: block;
  height: 5rem;
}
.blocks-browse-more {
  display: flex;
  justify-content: center;
}
.themes-preview-card {
  display: grid;
  gap: 0.8rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.theme-customizer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}
.themes-route {
  gap: 0;
}
.themes-route .route-page-header {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.theme-preview-section {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding-bottom: 1.5rem;
}
.route-surface-wrapper {
  width: 100%;
}
.route-surface-soft {
  border: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
  border-radius: 1.1rem;
  background: color-mix(in oklab, var(--muted) 42%, transparent);
  padding: 1rem;
}
.theme-customizer-shell {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding-top: 1rem;
  padding-bottom: 1rem;
  scroll-margin-top: 5rem;
}
.theme-customizer-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.theme-customizer-scroll {
  display: none;
  min-width: 0;
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
}
.theme-customizer-scroll::-webkit-scrollbar {
  display: none;
}
.theme-customizer-scroll-inner {
  display: flex;
  align-items: center;
  min-width: max-content;
}
.theme-customizer-pill {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  height: 1.75rem;
  border: 0;
  background: transparent;
  color: var(--muted-foreground);
  padding: 0 1rem;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5rem;
  text-align: center;
  text-transform: capitalize;
  white-space: nowrap;
  cursor: pointer;
  transition: color 120ms ease;
}
.theme-customizer-pill:hover,
.theme-customizer-pill[data-active="true"] {
  color: var(--primary);
}
.theme-copy-button.button {
  margin-left: auto;
}
.theme-customizer-mobile {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.ui-select-trigger.theme-route-trigger {
  width: auto;
  min-width: 9rem;
  text-transform: capitalize;
}
.theme-name-scroll {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  flex: 1;
}
.theme-pill {
  border: 1px solid transparent;
  border-radius: 0.45rem;
  padding: 0.32rem 0.6rem;
  background: transparent;
  color: var(--muted-foreground);
  font: inherit;
  font-size: 0.85rem;
  text-transform: capitalize;
  cursor: pointer;
}
.theme-pill:hover,
.theme-pill.theme-pill-active {
  border-color: var(--border);
  color: var(--foreground);
  background: var(--muted);
}
.theme-copy-button {
  margin-left: auto;
}
.theme-copy-button .button-icon {
  display: none;
}
.theme-code-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: color-mix(in oklab, black 35%, transparent);
  backdrop-filter: blur(2px);
}
.theme-code-dialog {
  position: relative;
  display: grid;
  width: 100%;
  max-height: min(88vh, 46rem);
  gap: 1rem;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 1rem 1rem 0 0;
  background: var(--background);
  color: var(--foreground);
  box-shadow: 0 -18px 60px color-mix(in oklab, black 24%, transparent);
  padding: 1.25rem 1rem 1rem;
}
.theme-code-close {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  z-index: 2;
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 0.45rem;
  background: transparent;
  color: var(--muted-foreground);
  cursor: pointer;
}
.theme-code-close:hover {
  background: var(--muted);
  color: var(--foreground);
}
.theme-code-close svg {
  width: 1rem;
  height: 1rem;
}
.theme-code-header {
  display: grid;
  gap: 0.25rem;
  padding-right: 2.5rem;
}
.theme-code-header h2,
.theme-code-header p {
  margin: 0;
}
.theme-code-header h2 {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.5rem;
  text-transform: capitalize;
}
.theme-code-header p {
  color: var(--muted-foreground);
  font-size: 0.875rem;
  line-height: 1.4rem;
}
.theme-code-tabs {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  align-items: center;
  gap: 0.2rem;
  border-radius: var(--radius-md);
  background: var(--muted);
  padding: 0.2rem;
}
.theme-code-tab {
  min-width: 0;
  height: 1.75rem;
  border: 0;
  border-radius: calc(var(--radius-md) - 0.1rem);
  background: transparent;
  color: var(--muted-foreground);
  padding: 0 0.7rem;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}
.theme-code-tab[data-state="active"] {
  background: var(--background);
  color: var(--foreground);
  box-shadow: 0 1px 2px color-mix(in oklab, black 10%, transparent);
}
.theme-code-figure {
  min-width: 0;
  overflow: hidden;
  border: 1px solid color-mix(in oklab, var(--border) 75%, transparent);
  border-radius: 0.75rem;
  background: var(--code);
  color: var(--code-foreground);
  margin: 0;
}
.theme-code-caption {
  display: flex;
  height: 2.6rem;
  align-items: center;
  gap: 0.5rem;
  border-bottom: 1px solid color-mix(in oklab, var(--border) 75%, transparent);
  padding: 0 1rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
}
.theme-code-css-icon {
  display: inline-flex;
  width: 1rem;
  height: 1rem;
  align-items: center;
  justify-content: center;
  color: var(--muted-foreground);
  font-family: var(--font-sans);
  font-weight: 700;
}
.theme-code-body {
  position: relative;
  min-width: 0;
}
.theme-code-copy {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  z-index: 1;
  display: inline-flex;
  width: 1.75rem;
  height: 1.75rem;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--code);
  color: var(--code-foreground);
  cursor: pointer;
}
.theme-code-copy:hover {
  background: var(--muted);
}
.theme-code-copy svg {
  width: 0.9rem;
  height: 0.9rem;
}
.theme-code-body pre {
  max-height: min(52vh, 28rem);
  overflow: auto;
  margin: 0;
  padding: 0.9rem 3rem 1rem 1rem;
  background: transparent;
  color: inherit;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.35rem;
  tab-size: 2;
}
@media (min-width: 640px) {
  .theme-copy-button .button-icon {
    display: inline-block;
  }

  .theme-copy-button .theme-copy-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .theme-code-overlay {
    align-items: center;
    padding: 1rem;
  }

  .theme-code-dialog {
    width: min(42rem, 100%);
    border: 0;
    border-radius: 0.75rem;
    box-shadow:
      0 24px 80px color-mix(in oklab, black 28%, transparent),
      0 0 0 4px color-mix(in oklab, var(--border) 80%, transparent);
    padding: 1.5rem;
  }
}
.theme-preview-shell {
  display: flex;
  flex: 1;
  flex-direction: column;
}
.theme-preview-stage {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}
.theme-preview-gallery,
.theme-cards-demo {
  display: grid;
  gap: 0.8rem;
}
.theme-cards-demo {
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr);
}
.theme-cards-column {
  display: grid;
  align-content: start;
  gap: 0.8rem;
}
.theme-demo-card {
  display: grid;
  gap: 0.8rem;
  border: 1px solid color-mix(in oklab, var(--theme-accent-muted, var(--border)) 28%, var(--border));
  border-radius: 1rem;
  background: color-mix(in oklab, var(--theme-muted, var(--card)) 12%, var(--card));
  box-shadow: 0 14px 40px color-mix(in oklab, var(--theme-accent, var(--foreground)) 8%, transparent);
  padding: 1rem;
}
.theme-demo-card-head,
.theme-demo-table-row,
.theme-demo-share-row,
.theme-demo-access-row,
.theme-demo-member-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.theme-demo-card-head {
  align-items: flex-start;
}
.theme-demo-card-head h3,
.theme-demo-table-row strong,
.theme-demo-member-row strong,
.theme-demo-access-row span {
  margin: 0;
}
.theme-demo-card-head h3 {
  font-size: 1.1rem;
}
.theme-demo-chip,
.theme-demo-status,
.theme-demo-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
}
.theme-demo-chip,
.theme-demo-status {
  border: 1px solid color-mix(in oklab, var(--theme-accent, var(--border)) 26%, var(--border));
  background: color-mix(in oklab, var(--theme-accent-soft, var(--muted)) 22%, var(--card));
  color: var(--foreground);
  padding: 0.25rem 0.65rem;
  text-transform: capitalize;
}
.theme-demo-muted,
.theme-demo-email,
.theme-demo-input {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.82rem;
}
.theme-demo-chart {
  display: flex;
  align-items: end;
  gap: 0.45rem;
  height: 7rem;
}
.theme-demo-chart-bar {
  flex: 1;
  min-width: 0;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(180deg, var(--theme-accent-strong, var(--foreground)), var(--theme-accent, var(--foreground)));
  opacity: 0.92;
}
.theme-demo-list,
.theme-demo-table,
.theme-demo-access-list {
  display: grid;
  gap: 0.65rem;
}
.theme-demo-avatar {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: color-mix(in oklab, var(--theme-accent-soft, var(--muted)) 26%, var(--card));
  color: var(--foreground);
  font-size: 0.72rem;
  font-weight: 700;
}
.theme-demo-member-row {
  justify-content: flex-start;
}
.theme-demo-table-row,
.theme-demo-access-row {
  border: 1px solid color-mix(in oklab, var(--theme-accent-muted, var(--border)) 20%, var(--border));
  border-radius: 0.85rem;
  background: color-mix(in oklab, var(--theme-muted, var(--muted)) 16%, var(--card));
  padding: 0.7rem 0.8rem;
}
.theme-demo-status.status-success {
  background: color-mix(in oklab, #16a34a 18%, var(--card));
}
.theme-demo-status.status-processing {
  background: color-mix(in oklab, #2563eb 18%, var(--card));
}
.theme-demo-status.status-pending {
  background: color-mix(in oklab, #d97706 18%, var(--card));
}
.theme-demo-button {
  border: 1px solid var(--theme-accent, var(--border));
  background: var(--theme-accent, var(--foreground));
  color: var(--background);
  padding: 0.4rem 0.8rem;
}
.theme-demo-button-ghost {
  background: transparent;
  color: var(--foreground);
}
.theme-demo-input {
  flex: 1;
  min-width: 0;
  border: 1px solid color-mix(in oklab, var(--theme-accent-muted, var(--border)) 24%, var(--border));
  border-radius: 999px;
  background: color-mix(in oklab, var(--theme-muted, var(--muted)) 18%, var(--card));
  padding: 0.6rem 0.9rem;
}
.theme-preview-panel {
  display: grid;
  gap: 0.75rem;
}
.theme-preview-header {
  display: grid;
  gap: 0.25rem;
}
.theme-swatch-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.theme-swatch {
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  border: 1px solid var(--border);
}
.example-showcase-surface {
  display: grid;
  gap: 0.9rem;
}
.example-mobile-gallery {
  display: grid;
  gap: 0.8rem;
}
.example-mobile-image {
  width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: 0.9rem;
  background: color-mix(in oklab, var(--muted) 18%, var(--card));
}
.example-live-stage {
  display: none;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 0.9rem;
  background: var(--card);
}
.example-live-stage:has([data-menu-panel]:not([hidden])) {
  position: relative;
  z-index: 70;
  overflow: visible;
}
.example-showcase-surface:has([data-slot="rtl-components"]) .example-mobile-gallery {
  display: none;
}
.example-showcase-surface:has([data-slot="rtl-components"]) .example-live-stage {
  display: block;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.example-icon {
  width: 1rem;
  height: 1rem;
  flex: none;
  pointer-events: none;
}
.live-example {
  min-height: 44rem;
  background: var(--card);
  color: var(--foreground);
}
.dashboard-brand-title,
.dashboard-chart-head h4,
.tasks-header h2,
.playground-header h3,
.auth-brand-panel h3,
.auth-form-shell h3,
.rtl-header h3 {
  margin: 0;
  letter-spacing: -0.03em;
}
.dashboard-example {
  display: grid;
  grid-template-columns: 16rem minmax(0, 1fr);
  min-height: 48rem;
  border: 1px solid var(--border);
  border-radius: 1rem;
  overflow: hidden;
  background: var(--background);
}
.dashboard-sidebar {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--sidebar-border);
  background: var(--sidebar);
  color: var(--sidebar-foreground);
}
.dashboard-sidebar-header {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-bottom: 1px solid var(--sidebar-border);
  padding: 0.5rem;
}
.dashboard-sidebar-content {
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  gap: 0.5rem;
  overflow: auto;
}
.dashboard-sidebar-footer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.5rem;
}
.dashboard-sidebar-group {
  position: relative;
  display: flex;
  width: 100%;
  min-width: 0;
  flex-direction: column;
  padding: 0.5rem;
}
.dashboard-sidebar-group-end {
  margin-top: auto;
}
.dashboard-sidebar-group-label {
  display: flex;
  height: 2rem;
  flex: none;
  align-items: center;
  margin: 0;
  border-radius: var(--radius-md);
  padding: 0 0.5rem;
  color: color-mix(in oklab, var(--sidebar-foreground) 70%, transparent);
  font-size: 0.75rem;
  font-weight: 500;
}
.dashboard-sidebar-menu {
  display: flex;
  width: 100%;
  min-width: 0;
  flex-direction: column;
  gap: 0.25rem;
}
.dashboard-menu-item {
  position: relative;
  display: block;
  width: 100%;
}
.dashboard-document-menu {
  width: 6rem;
}
.dashboard-menu-button {
  display: flex;
  width: 100%;
  height: 2rem;
  align-items: center;
  gap: 0.5rem;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  padding: 0.5rem;
  color: inherit;
  font: inherit;
  font-size: 0.875rem;
  text-align: left;
  cursor: pointer;
}
.dashboard-menu-item:has(.dashboard-menu-action) .dashboard-menu-button {
  padding-right: 2rem;
}
.dashboard-menu-button > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dashboard-menu-button:hover {
  background: var(--sidebar-accent);
  color: var(--sidebar-accent-foreground);
}
.dashboard-menu-button-active {
  background: var(--sidebar-accent);
  color: var(--sidebar-accent-foreground);
  font-weight: 500;
}
.dashboard-menu-button-muted {
  color: color-mix(in oklab, var(--sidebar-foreground) 70%, transparent);
}
.dashboard-menu-button-lg {
  height: 3rem;
}
.dashboard-brand-button {
  padding: 0.375rem;
}
.dashboard-brand-icon {
  width: 1.25rem;
  height: 1.25rem;
}
.dashboard-brand-title {
  font-size: 1rem;
  font-weight: 600;
}
.dashboard-menu-action {
  position: absolute;
  top: 0.375rem;
  right: 0.25rem;
  display: flex;
  width: 1.25rem;
  aspect-ratio: 1;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  padding: 0;
  color: var(--sidebar-foreground);
  cursor: pointer;
  opacity: 0;
}
.dashboard-menu-item:hover .dashboard-menu-action,
.dashboard-menu-action:focus-visible {
  opacity: 1;
}
.dashboard-menu-action:hover {
  background: var(--sidebar-accent);
  color: var(--sidebar-accent-foreground);
}
.dashboard-menu-action[aria-expanded="true"] {
  background: var(--sidebar-accent);
  color: var(--sidebar-accent-foreground);
  opacity: 1;
}
.dashboard-user-menu {
  width: 100%;
}
.dashboard-user-menu-panel {
  width: 14rem;
  border-radius: var(--radius-lg);
}
.dashboard-user-menu-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem;
}
.dashboard-user-menu > [data-menu-trigger][aria-expanded="true"] {
  background: var(--sidebar-accent);
  color: var(--sidebar-accent-foreground);
}
.dashboard-user-avatar {
  width: 2rem;
  height: 2rem;
  flex: none;
  border-radius: var(--radius-lg);
  object-fit: cover;
  filter: grayscale(1);
}
.dashboard-user-meta {
  display: grid;
  flex: 1;
  min-width: 0;
  text-align: left;
  line-height: 1.25;
}
.dashboard-user-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.875rem;
  font-weight: 500;
}
.dashboard-user-email {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted-foreground);
  font-size: 0.75rem;
}
.dashboard-user-more {
  margin-left: auto;
}
.dashboard-brand-copy,
.dashboard-stat-copy,
.tasks-copy,
.auth-footnote,
.dashboard-sale-row p {
  color: var(--muted-foreground);
}
.dashboard-chart-description {
  color: var(--muted-foreground);
}
.dashboard-brand-copy,
.tasks-copy,
.dashboard-sale-row p,
.auth-footnote {
  margin: 0.2rem 0 0;
  font-size: 0.84rem;
  line-height: 1.45;
}
.dashboard-stat-copy {
  margin: 0;
}
.dashboard-chart-title {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
}
.dashboard-chart-description {
  font-size: 0.82rem;
  line-height: 1.45;
}
.dashboard-sidebar-card,
.playground-panel,
.rtl-card {
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: var(--card);
}
.dashboard-sidebar-card,
.playground-panel,
.rtl-card,
.auth-form-shell {
  box-shadow: 0 1px 2px color-mix(in oklab, var(--foreground) 8%, transparent);
}
.dashboard-sidebar-card {
  padding: 1rem;
}
.dashboard-section-label {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.dashboard-sidebar-stack {
  display: grid;
  gap: 0.6rem;
  margin-top: 0.85rem;
}
.dashboard-project-row,
.dashboard-sale-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.dashboard-project-row {
  font-size: 0.88rem;
}
.dashboard-main {
  display: grid;
  align-content: start;
  gap: 1.25rem;
  padding: 0;
  background: var(--background);
  container: dashboard-main / inline-size;
}
.dashboard-site-header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.5rem;
  padding: 0 1.25rem;
  border-bottom: 1px solid color-mix(in oklab, var(--border) 92%, transparent);
  background: color-mix(in oklab, var(--background) 92%, transparent);
  backdrop-filter: blur(8px);
}
.dashboard-site-header h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
}
.dashboard-quick-create {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--foreground);
  border-radius: 0.65rem;
  background: var(--foreground);
  color: var(--background);
  padding: 0.45rem 0.8rem;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}
.dashboard-header,
.tasks-header,
.playground-header,
.rtl-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.dashboard-header h3,
.tasks-header h2,
.playground-header h3,
.auth-brand-panel h3,
.auth-form-shell h3,
.rtl-header h3 {
  margin-top: 0.25rem;
  font-size: 1.6rem;
  line-height: 1.05;
}
.dashboard-toolbar,
.rtl-toggle-row,
.playground-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}
.dashboard-pill,
.playground-ghost-button,
.playground-primary-button,
.auth-provider-button {
  border-radius: 0.7rem;
  font: inherit;
  font-size: 0.86rem;
  cursor: pointer;
}
.dashboard-pill,
.playground-ghost-button,
.auth-provider-button {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--foreground);
}
.dashboard-pill,
.playground-ghost-button {
  padding: 0.5rem 0.8rem;
}
.dashboard-pill-active,
.playground-primary-button {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-foreground);
}
.dashboard-stats-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 0 1.5rem;
}
.dashboard-stat-card,
.dashboard-chart-card,
.dashboard-table-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--card);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
}
.dashboard-stat-card {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1.5rem 0;
}
.dashboard-stat-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 0.5rem;
  padding: 0 1.5rem;
}
.dashboard-stat-value {
  grid-column: 1;
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 2rem;
  font-variant-numeric: tabular-nums;
}
.dashboard-stat-badge {
  grid-column: 2;
  grid-row: 1 / span 2;
  justify-self: end;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1rem;
}
.dashboard-stat-badge .example-icon {
  width: 0.75rem;
  height: 0.75rem;
}
.dashboard-stat-foot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.375rem;
  padding: 0 1.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.dashboard-stat-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--foreground);
}
.dashboard-stat-trend {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
}
.dashboard-stat-label {
  grid-column: 1;
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.dashboard-chart-head h4 {
  margin-top: 0.4rem;
  font-size: 1.5rem;
}
.dashboard-content-grid {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.9fr);
}
.dashboard-table-card,
.playground-panel,
.rtl-card {
  padding: 1rem;
}
.dashboard-chart-card {
  padding: 1.5rem 0;
}
.dashboard-chart-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.85rem;
  padding: 0 1.5rem;
}
.dashboard-range-group {
  display: flex;
  align-items: center;
}
.dashboard-range-item {
  display: inline-flex;
  height: 2.25rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  background: transparent;
  padding: 0 1rem;
  color: var(--foreground);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}
.dashboard-range-item:first-child {
  border-radius: var(--radius-md) 0 0 var(--radius-md);
}
.dashboard-range-item:last-child {
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.dashboard-range-item + .dashboard-range-item {
  border-left-width: 0;
}
.dashboard-range-item:hover {
  background: var(--accent);
  color: var(--accent-foreground);
}
.dashboard-range-item[data-state="on"] {
  background: var(--accent);
  color: var(--accent-foreground);
}
.dashboard-chart-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: color-mix(in oklab, var(--muted) 72%, var(--card));
  color: var(--foreground);
  padding: 0.35rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 600;
}
.dashboard-chart-body {
  padding: 1.5rem 1.5rem 0;
}
.dashboard-chart {
  display: block;
  width: 100%;
  height: auto;
}
.dashboard-chart-grid line {
  stroke: color-mix(in oklab, var(--border) 50%, transparent);
  stroke-width: 1;
}
.dashboard-chart-ticks text {
  fill: var(--muted-foreground);
  font-size: 12px;
}
.dashboard-table-block {
  display: flex;
  width: 100%;
  flex-direction: column;
  justify-content: flex-start;
  gap: 1.5rem;
}
.dashboard-table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0 1.5rem;
}
.dashboard-tabs-list {
  display: inline-flex;
  height: 2.25rem;
  width: fit-content;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  background: var(--muted);
  padding: 3px;
  color: var(--muted-foreground);
}
.dashboard-view-selector {
  position: relative;
  display: none;
  width: fit-content;
  min-width: 8.5rem;
  height: 2rem;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--background);
}
.dashboard-view-selector select {
  width: 100%;
  height: 100%;
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--foreground);
  padding: 0 2rem 0 0.625rem;
  font: inherit;
  font-size: 0.875rem;
  outline: none;
  cursor: pointer;
}
.dashboard-view-selector .example-icon {
  position: absolute;
  right: 0.5rem;
  width: 1rem;
  height: 1rem;
  opacity: 0.5;
  pointer-events: none;
}
.dashboard-tabs-trigger {
  display: inline-flex;
  height: calc(2.25rem - 6px);
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  padding: 0.25rem 0.5rem;
  color: var(--foreground);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}
.dashboard-tabs-trigger[data-state="active"] {
  border-color: var(--border);
  background: var(--background);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
}
.dashboard-tab-badge {
  display: inline-flex;
  width: 1.25rem;
  height: 1.25rem;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: color-mix(in oklab, var(--muted-foreground) 30%, transparent);
  padding: 0.125rem 0.25rem;
  color: var(--primary);
  font-size: 0.75rem;
  font-weight: 500;
}
.dashboard-table-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.dashboard-columns-label-compact {
  display: none;
}
.dashboard-columns-panel {
  width: 14rem;
}
.dashboard-column-item {
  text-transform: capitalize;
}
.dashboard-column-check {
  margin-left: auto;
  opacity: 0;
}
.dashboard-column-item[data-selected="true"] .dashboard-column-check {
  opacity: 1;
}
@media (max-width: 1023px) {
  .dashboard-columns-label-wide {
    display: none;
  }

  .dashboard-columns-label-compact {
    display: inline;
  }
}
@container dashboard-main (max-width: 63.999rem) {
  .dashboard-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@container dashboard-main (max-width: 55.999rem) {
  .dashboard-view-selector {
    display: flex;
  }

  .dashboard-tabs-list {
    display: none;
  }
}
@container dashboard-main (max-width: 35.999rem) {
  .dashboard-stats-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.dashboard-outline-button {
  display: inline-flex;
  height: 2rem;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--background);
  padding: 0 0.625rem;
  color: var(--foreground);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}
.dashboard-outline-button:hover {
  background: var(--accent);
  color: var(--accent-foreground);
}
.dashboard-table-panel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0 1.5rem;
}
.dashboard-table-frame {
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.dashboard-table-frame:has([data-menu-panel]:not([hidden])) {
  overflow: visible;
}
.dashboard-example:has(.dashboard-sidebar [data-menu-panel]:not([hidden])),
.dashboard-sidebar-content:has([data-menu-panel]:not([hidden])) {
  overflow: visible;
}
.dashboard-table-selection-scope {
  min-width: 0;
}
.dashboard-data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  text-align: left;
}
.dashboard-data-table thead {
  background: var(--muted);
}
.dashboard-data-table tr {
  border-bottom: 1px solid var(--border);
}
.dashboard-data-table tbody tr[data-state="selected"] {
  background: var(--muted);
}
.dashboard-data-table tbody tr[data-dragging="true"] {
  position: relative;
  z-index: 10;
  background: var(--background);
  opacity: 0.8;
  transform: translate3d(0, var(--dashboard-drag-offset-y, 0px), 0);
  transition: none;
  will-change: transform;
}
.dashboard-data-table tbody tr[data-drag-shifted="true"] {
  transform: translate3d(0, var(--dashboard-drag-offset-y, 0px), 0);
}
.dashboard-example[data-dashboard-pointer-dragging="true"]
  .dashboard-data-table tbody tr:not([data-dragging="true"]) {
  transition: transform 200ms ease;
}
.dashboard-data-table tbody tr:last-child {
  border-bottom: 0;
}
.dashboard-data-table th {
  height: 2.5rem;
  padding: 0 0.5rem;
  color: var(--foreground);
  font-weight: 500;
  white-space: nowrap;
}
.dashboard-data-table td {
  height: 3.3125rem;
  padding: 0.5rem;
  vertical-align: middle;
}
.dashboard-cell-drag,
.dashboard-cell-select,
.dashboard-cell-actions {
  width: 2rem;
}
.dashboard-cell-select {
  text-align: center;
}
.dashboard-cell-number {
  text-align: right;
}
.dashboard-icon-button {
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--muted-foreground);
  cursor: pointer;
}
.dashboard-icon-button:hover {
  background: var(--accent);
  color: var(--accent-foreground);
}
.dashboard-row-menu-panel {
  width: 8rem;
}
.dashboard-row-menu > [data-menu-trigger][aria-expanded="true"] {
  background: var(--muted);
  color: var(--foreground);
}
.dashboard-drag-handle {
  width: 1.75rem;
  height: 1.75rem;
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.dashboard-drag-handle:hover {
  background: transparent;
}
.dashboard-drag-handle[aria-grabbed="true"] {
  cursor: grabbing;
}
.dashboard-example[data-dashboard-pointer-dragging="true"] {
  user-select: none;
}
.dashboard-grip-icon {
  width: 0.75rem;
  height: 0.75rem;
}
.dashboard-checkbox {
  width: 1rem;
  height: 1rem;
  margin: 0;
  border-radius: 4px;
  accent-color: var(--primary);
}
.dashboard-cell-link {
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--foreground);
  font: inherit;
  font-size: 0.875rem;
  text-align: left;
  cursor: pointer;
}
.dashboard-cell-link:hover {
  text-decoration: underline;
}
body[data-dashboard-drawer-open="true"] {
  overflow: hidden;
}
.dashboard-row-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgb(0 0 0 / 0.5);
}
.dashboard-row-drawer-overlay[hidden] {
  display: none;
}
.dashboard-row-drawer {
  position: absolute;
  inset-block: 0;
  right: 0;
  display: flex;
  width: 75%;
  max-width: 24rem;
  flex-direction: column;
  overflow: hidden;
  border-left: 1px solid var(--border);
  background: var(--background);
  color: var(--foreground);
  box-shadow: -16px 0 40px rgb(0 0 0 / 0.16);
  font-size: 0.875rem;
}
.dashboard-row-drawer-handle {
  display: none;
}
.dashboard-row-drawer-header {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1rem;
  text-align: left;
}
.dashboard-row-drawer-header h2,
.dashboard-row-drawer-header p,
.dashboard-row-drawer-trend p {
  margin: 0;
}
.dashboard-row-drawer-header h2 {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5rem;
}
.dashboard-row-drawer-header p,
.dashboard-row-drawer-trend p {
  color: var(--muted-foreground);
  line-height: 1.4rem;
}
.dashboard-row-drawer-body {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  gap: 1rem;
  overflow-y: auto;
  padding: 0 1rem;
}
.dashboard-row-drawer-insight {
  display: grid;
  gap: 1rem;
}
.dashboard-row-drawer-chart {
  display: block;
  width: 100%;
  height: auto;
}
.dashboard-row-drawer-grid line {
  stroke: color-mix(in oklab, var(--border) 65%, transparent);
  stroke-width: 1;
}
.dashboard-row-drawer-separator {
  height: 1px;
  background: var(--border);
}
.dashboard-row-drawer-trend {
  display: grid;
  gap: 0.5rem;
}
.dashboard-row-drawer-trend strong {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
  line-height: 1.25rem;
}
.dashboard-row-drawer-trend strong .example-icon {
  width: 1rem;
  height: 1rem;
}
.dashboard-row-drawer-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.dashboard-row-drawer-grid-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.dashboard-row-drawer-field {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.75rem;
  font-weight: 500;
}
.dashboard-row-drawer-field input,
.dashboard-row-drawer-field select {
  width: 100%;
  min-width: 0;
  height: 2.25rem;
  border: 1px solid var(--input);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--foreground);
  padding: 0.25rem 0.75rem;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 400;
  outline: none;
}
.dashboard-row-drawer-field input:focus-visible,
.dashboard-row-drawer-field select:focus-visible {
  border-color: var(--ring);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 20%, transparent);
}
.dashboard-row-drawer-select-shell {
  position: relative;
  display: flex;
  min-width: 0;
}
.dashboard-row-drawer-select-shell select {
  appearance: none;
  padding-right: 2rem;
  cursor: pointer;
}
.dashboard-row-drawer-select-shell .example-icon {
  position: absolute;
  top: 50%;
  right: 0.625rem;
  width: 1rem;
  height: 1rem;
  translate: 0 -50%;
  opacity: 0.5;
  pointer-events: none;
}
.dashboard-row-drawer-footer {
  display: flex;
  margin-top: auto;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
}
.dashboard-row-drawer-submit,
.dashboard-row-drawer-done {
  display: inline-flex;
  width: 100%;
  height: 2.25rem;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  padding: 0 1rem;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
}
.dashboard-row-drawer-submit {
  border: 1px solid var(--primary);
  background: var(--primary);
  color: var(--primary-foreground);
}
.dashboard-row-drawer-done {
  border: 1px solid var(--border);
  background: var(--background);
  color: var(--foreground);
}
.dashboard-row-drawer-done:hover {
  background: var(--accent);
  color: var(--accent-foreground);
}
@media (max-width: 767px) {
  .dashboard-row-drawer {
    inset: auto 0 0;
    width: 100%;
    max-width: none;
    max-height: 80vh;
    border-top: 1px solid var(--border);
    border-left: 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow: 0 -16px 40px rgb(0 0 0 / 0.16);
  }

  .dashboard-row-drawer-handle {
    display: block;
    width: 6.25rem;
    height: 0.5rem;
    flex: 0 0 auto;
    border-radius: 999px;
    background: var(--muted);
    margin: 1rem auto 0;
  }

  .dashboard-row-drawer-header {
    text-align: center;
  }

  .dashboard-row-drawer-insight {
    display: none;
  }
}
.dashboard-cell-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.125rem 0.375rem;
  color: var(--muted-foreground);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1rem;
  white-space: nowrap;
}
.dashboard-status-done {
  fill: #22c55e;
  color: #22c55e;
}
.dashboard-cell-input {
  width: 4rem;
  height: 2rem;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  padding: 0.25rem 0.75rem;
  color: inherit;
  font: inherit;
  font-size: 0.875rem;
  text-align: right;
}
.dashboard-cell-value-form {
  display: inline-flex;
}
.dashboard-cell-input:hover {
  background: color-mix(in oklab, var(--input) 30%, transparent);
}
.dashboard-cell-input:focus-visible {
  border-color: var(--border);
  background: var(--background);
  outline: none;
}
.dashboard-toast-region {
  position: fixed;
  top: 1rem;
  left: 50%;
  z-index: 120;
  width: min(22rem, calc(100vw - 2rem));
  translate: -50% 0;
  pointer-events: none;
}
.dashboard-toast {
  display: flex;
  min-height: 3rem;
  align-items: center;
  gap: 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--background);
  color: var(--foreground);
  box-shadow: 0 12px 36px rgb(0 0 0 / 0.14);
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
}
.dashboard-toast-icon {
  display: inline-flex;
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--muted-foreground);
  border-top-color: transparent;
  border-radius: 999px;
  color: var(--foreground);
  font-size: 0.75rem;
  line-height: 1;
  animation: dashboard-toast-spin 0.75s linear infinite;
}
.dashboard-toast[data-state="success"] .dashboard-toast-icon {
  border: 0;
  animation: none;
}
@keyframes dashboard-toast-spin {
  to {
    rotate: 360deg;
  }
}
.dashboard-select-trigger {
  display: inline-flex;
  height: 2rem;
  align-items: center;
  justify-content: space-between;
  gap: 0.375rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: transparent;
  padding: 0 0.5rem 0 0.625rem;
  font-size: 0.875rem;
  white-space: nowrap;
}
.dashboard-select-trigger-reviewer {
  width: 9.5rem;
}
.dashboard-select-trigger-narrow {
  width: 5rem;
}
.dashboard-page-size-select,
.dashboard-reviewer-select {
  min-width: 0;
  flex: 1;
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--foreground);
  font: inherit;
  font-size: 0.875rem;
  outline: none;
  cursor: pointer;
}
.dashboard-reviewer-select:has(option[value=""]:checked),
.dashboard-reviewer-select option[value=""] {
  color: var(--muted-foreground);
}
.dashboard-select-placeholder {
  overflow: hidden;
  color: var(--muted-foreground);
  text-overflow: ellipsis;
}
.dashboard-select-chevron {
  width: 1rem;
  height: 1rem;
  opacity: 0.5;
}
.dashboard-table-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 1rem;
}
.dashboard-table-selection {
  flex: 1;
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.875rem;
}
.dashboard-table-pagination {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 2rem;
}
.dashboard-rows-per-page {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.dashboard-pagination-label {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 500;
}
.dashboard-pagination-buttons {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.dashboard-pagination-button {
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--background);
  color: var(--foreground);
  cursor: pointer;
}
.dashboard-pagination-button:hover:not(:disabled) {
  background: var(--accent);
  color: var(--accent-foreground);
}
.dashboard-pagination-button:disabled {
  opacity: 0.5;
  pointer-events: none;
}
@media (max-width: 1023px) {
  .dashboard-add-section-label,
  .dashboard-table-selection,
  .dashboard-rows-per-page,
  .dashboard-pagination-button.dashboard-pagination-boundary {
    display: none;
  }

  .dashboard-table-footer,
  .dashboard-table-pagination {
    width: 100%;
    justify-content: flex-end;
  }

  .dashboard-table-pagination {
    gap: 1rem;
  }
}
.dashboard-outline-placeholder {
  aspect-ratio: 16 / 9;
  width: 100%;
  flex: 1;
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
}
.dashboard-sales-list {
  display: grid;
  gap: 0.8rem;
  margin-top: 1rem;
}
.dashboard-sale-row {
  padding-bottom: 0.8rem;
  border-bottom: 1px solid color-mix(in oklab, var(--border) 88%, transparent);
}
.dashboard-sale-row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.dashboard-sale-row strong,
.tasks-example,
.playground-example,
.rtl-example {
  display: grid;
  align-content: start;
  gap: 1rem;
  padding: 1.25rem;
  background: var(--card);
}
.tasks-user-nav {
  display: inline-flex;
  width: 2.25rem;
  height: 2.25rem;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  padding: 0;
  cursor: pointer;
}
.tasks-user-avatar {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  object-fit: cover;
}
.tasks-user-nav[aria-expanded="true"] {
  background: var(--muted);
}
.tasks-user-menu-panel {
  width: 14rem;
}
.tasks-user-menu-label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.375rem 0.5rem;
}
.tasks-user-menu-name {
  font-size: 0.875rem;
  line-height: 1;
  font-weight: 500;
}
.tasks-user-menu-email {
  color: var(--muted-foreground);
  font-size: 0.75rem;
  line-height: 1;
}
.tasks-user-menu-panel > .ui-menu-item {
  padding: 0.375rem 0.5rem;
}
.tasks-example {
  gap: 2rem;
  padding: 2rem;
}
.tasks-heading {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.tasks-table-block {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.tasks-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.tasks-toolbar-filters {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 0.5rem;
}
.tasks-filter-input {
  width: 15.625rem;
  height: 2rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: transparent;
  padding: 0.25rem 0.75rem;
  color: var(--foreground);
  font: inherit;
  font-size: 0.875rem;
}
.tasks-filter-input::placeholder {
  color: var(--muted-foreground);
}
.tasks-facet-button,
.tasks-outline-button {
  display: inline-flex;
  height: 2rem;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--background);
  padding: 0 0.625rem;
  color: var(--foreground);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}
.tasks-facet-button {
  border-style: dashed;
}
.tasks-facet-button:hover,
.tasks-outline-button:hover {
  background: var(--accent);
  color: var(--accent-foreground);
}
.tasks-facet-menu {
  display: inline-flex;
}
.tasks-facet-panel {
  width: 12.5rem;
  padding: 0;
  overflow: hidden;
}
.tasks-facet-search-shell {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--border);
  padding: 0.25rem 0.5rem;
}
.tasks-facet-search {
  width: 100%;
  height: 2.25rem;
  border: 0;
  background: transparent;
  color: var(--foreground);
  padding: 0 0.25rem;
  font: inherit;
  font-size: 0.875rem;
  outline: none;
}
.tasks-facet-search::placeholder {
  color: var(--muted-foreground);
}
.tasks-facet-options {
  display: grid;
  gap: 0.125rem;
  max-height: 18rem;
  overflow-y: auto;
  padding: 0.25rem;
}
.tasks-facet-option {
  display: flex;
  width: 100%;
  min-height: 2rem;
  align-items: center;
  gap: 0.5rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--foreground);
  padding: 0.375rem 0.5rem;
  font: inherit;
  font-size: 0.875rem;
  text-align: left;
  cursor: pointer;
}
.tasks-facet-option:hover,
.tasks-facet-option:focus-visible {
  background: var(--accent);
  color: var(--accent-foreground);
  outline: none;
}
.tasks-facet-checkbox {
  display: inline-flex;
  width: 1rem;
  height: 1rem;
  flex: none;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--input);
  border-radius: 4px;
  color: transparent;
}
.tasks-facet-checkbox .example-icon {
  width: 0.875rem;
  height: 0.875rem;
}
.tasks-facet-option[data-selected="true"] .tasks-facet-checkbox {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--primary-foreground);
}
.tasks-facet-count {
  display: inline-flex;
  width: 1rem;
  height: 1rem;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  color: var(--muted-foreground);
  font-family: var(--font-mono);
  font-size: 0.75rem;
}
.tasks-facet-empty {
  margin: 0;
  padding: 1.25rem 0.5rem;
  color: var(--muted-foreground);
  font-size: 0.875rem;
  text-align: center;
}
.tasks-facet-clear-wrap {
  border-top: 1px solid var(--border);
  padding: 0.25rem;
}
.tasks-facet-clear {
  width: 100%;
  min-height: 2rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--foreground);
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
}
.tasks-facet-clear:hover {
  background: var(--accent);
}
.tasks-facet-summary {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.tasks-facet-summary-separator {
  width: 1px;
  height: 1rem;
  background: var(--border);
  margin: 0 0.25rem;
}
.tasks-facet-summary-compact,
.tasks-facet-summary-badge {
  display: inline-flex;
  min-width: 1.25rem;
  height: 1.25rem;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--secondary);
  color: var(--secondary-foreground);
  padding: 0 0.25rem;
  font-size: 0.75rem;
  font-weight: 400;
}
.tasks-facet-summary-wide {
  display: flex;
  gap: 0.25rem;
}
.tasks-facet-summary-compact {
  display: none;
}
.tasks-reset-button {
  display: inline-flex;
  height: 2rem;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--foreground);
  padding: 0 0.625rem;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
}
.tasks-reset-button:hover {
  background: var(--accent);
  color: var(--accent-foreground);
}
.tasks-reset-button .example-icon {
  width: 1rem;
  height: 1rem;
}
.tasks-reset-button[hidden],
.tasks-facet-summary[hidden],
.tasks-facet-clear-wrap[hidden],
.tasks-facet-option[hidden],
.tasks-facet-empty[hidden] {
  display: none;
}
@media (max-width: 1023px) {
  .tasks-facet-summary-compact {
    display: inline-flex;
  }

  .tasks-facet-summary-wide {
    display: none;
  }
}
.tasks-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.tasks-view-menu {
  display: inline-flex;
}
.tasks-view-panel {
  width: 9.375rem;
}
.tasks-view-label {
  padding: 0.375rem 0.5rem;
  color: var(--foreground);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
}
.tasks-view-option {
  padding: 0.375rem 0.5rem;
  text-transform: capitalize;
}
.tasks-view-check {
  display: inline-flex;
  width: 1rem;
  height: 1rem;
  align-items: center;
  justify-content: center;
  opacity: 0;
}
.tasks-view-option[data-selected="true"] .tasks-view-check {
  opacity: 1;
}
.tasks-primary-button {
  display: inline-flex;
  height: 2rem;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--primary);
  padding: 0 0.75rem;
  color: var(--primary-foreground);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}
.tasks-table-frame {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.tasks-table-frame:has([data-menu-panel]:not([hidden])) {
  overflow: visible;
}
.tasks-data-table thead {
  position: relative;
  z-index: 2;
}
.tasks-data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  text-align: left;
}
.tasks-data-table tr {
  border-bottom: 1px solid var(--border);
}
.tasks-data-table tbody tr[data-state="selected"] {
  background: var(--muted);
}
.tasks-data-table tbody tr:last-child {
  border-bottom: 0;
}
.tasks-empty-row td {
  height: 6rem;
  text-align: center;
}
.tasks-data-table th {
  height: 2.5rem;
  padding: 0 0 0 0.5rem;
  color: var(--foreground);
  font-weight: 500;
  white-space: nowrap;
}
.tasks-data-table td {
  height: 3.0625rem;
  padding: 0.5rem 0 0.5rem 0.5rem;
  vertical-align: middle;
}
.tasks-cell-select {
  width: 2rem;
}
.tasks-cell-actions {
  width: 2.5rem;
}
.tasks-cell-id {
  width: 5rem;
  white-space: nowrap;
}
.tasks-checkbox {
  width: 1rem;
  height: 1rem;
  margin: 0;
  border-radius: 4px;
  accent-color: var(--primary);
}
.tasks-column-header {
  display: inline-flex;
  align-items: center;
  font-size: 0.875rem;
  font-weight: 500;
}
.tasks-sort-button {
  display: inline-flex;
  height: 2rem;
  align-items: center;
  gap: 0.375rem;
  margin-left: -0.75rem;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  padding: 0 0.625rem;
  color: var(--foreground);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
}
.tasks-sort-button:hover {
  background: var(--accent);
  color: var(--accent-foreground);
}
.tasks-sort-menu {
  display: inline-flex;
}
.tasks-sort-panel {
  min-width: 8rem;
}
.tasks-sort-button[aria-expanded="true"] {
  background: var(--accent);
  color: var(--accent-foreground);
}
.tasks-sort-icon {
  display: none;
  width: 1rem;
  height: 1rem;
  align-items: center;
  justify-content: center;
}
.tasks-sort-icon .example-icon {
  width: 1rem;
  height: 1rem;
}
.tasks-sort-button[data-sort-direction="none"] [data-task-sort-icon="none"],
.tasks-sort-button[data-sort-direction="asc"] [data-task-sort-icon="asc"],
.tasks-sort-button[data-sort-direction="desc"] [data-task-sort-icon="desc"] {
  display: inline-flex;
}
.tasks-title-cell {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.tasks-label-badge {
  display: inline-flex;
  flex: none;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1rem;
  white-space: nowrap;
}
.tasks-title-text {
  overflow: hidden;
  max-width: 31.25rem;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tasks-meta-cell {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.tasks-status-cell {
  width: 6.25rem;
}
.tasks-meta-icon {
  color: var(--muted-foreground);
}
.tasks-row-action {
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--muted-foreground);
  cursor: pointer;
}
.tasks-row-action:hover {
  background: var(--accent);
  color: var(--accent-foreground);
}
.tasks-row-action[aria-expanded="true"] {
  background: var(--muted);
  color: var(--foreground);
}
.tasks-row-menu-panel {
  width: 10rem;
}
.tasks-row-menu-panel > .ui-menu-item,
.tasks-label-sub-trigger,
.tasks-label-option {
  padding: 0.375rem 0.5rem;
}
.tasks-label-sub-trigger[data-state="open"] {
  background: var(--accent);
  color: var(--accent-foreground);
}
.tasks-label-sub-trigger .example-icon {
  margin-left: auto;
}
.tasks-label-panel {
  min-width: 8rem;
}
.tasks-label-option {
  padding-left: 2rem;
}
.tasks-label-radio {
  position: absolute;
  left: 0.5rem;
  display: inline-flex;
  width: 0.875rem;
  height: 0.875rem;
  align-items: center;
  justify-content: center;
  opacity: 0;
}
.tasks-label-radio .example-icon {
  width: 0.5rem;
  height: 0.5rem;
  fill: currentColor;
}
.tasks-label-option[data-selected="true"] .tasks-label-radio {
  opacity: 1;
}
.tasks-menu-shortcut {
  margin-left: auto;
  color: var(--muted-foreground);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
}
.tasks-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.tasks-selection {
  flex: 1;
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.875rem;
}
.tasks-pagination-controls {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.tasks-rows-per-page {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.tasks-pagination-label {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 500;
}
.tasks-select-trigger {
  display: inline-flex;
  width: 4.5rem;
  height: 2rem;
  align-items: center;
  justify-content: space-between;
  gap: 0.375rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0 0.5rem 0 0.625rem;
  font-size: 0.875rem;
}
.tasks-select-chevron {
  opacity: 0.5;
  pointer-events: none;
}
.tasks-page-size-select {
  min-width: 0;
  flex: 1;
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--foreground);
  font: inherit;
  font-size: 0.875rem;
  outline: none;
  cursor: pointer;
}
.tasks-pagination-buttons {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.tasks-pagination-button {
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--background);
  color: var(--foreground);
  cursor: pointer;
}
.tasks-pagination-button:hover:not(:disabled) {
  background: var(--accent);
  color: var(--accent-foreground);
}
.tasks-pagination-button:disabled {
  opacity: 0.5;
  pointer-events: none;
}
.playground-field,
.auth-field {
  display: grid;
  gap: 0.35rem;
}
.playground-field-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.playground-field-value {
  color: var(--muted-foreground);
  font-weight: 400 !important;
  font-variant-numeric: tabular-nums;
}
.playground-field .ui-slider {
  margin-top: 0.25rem;
}
.playground-field span,
.auth-field span {
  font-size: 0.82rem;
  font-weight: 600;
}
.playground-field select,
.playground-field > input,
.playground-textarea,
.auth-field input {
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: var(--card);
  color: var(--foreground);
  font: inherit;
}
.playground-field select,
.playground-field input,
.auth-field input {
  min-height: 2.6rem;
  padding: 0.65rem 0.8rem;
}
.playground-shell {
  display: grid;
  flex: 1;
  align-items: stretch;
  gap: 1.5rem;
  grid-template-columns: minmax(0, 1fr) 200px;
  padding: 1.5rem 2rem;
}
.playground-example {
  display: flex;
  flex-direction: column;
  align-content: normal;
  gap: 0;
  padding: 0;
}
.playground-header {
  height: 4rem;
  min-height: 4rem;
  align-items: center;
  gap: 0;
  padding: 1rem 2rem;
}
.playground-header h3 {
  margin: 0;
  padding-left: 0.125rem;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.75rem;
}
.playground-separator {
  height: 1px;
  background: color-mix(in oklab, var(--border) 88%, transparent);
}
.playground-top-actions {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 0.5rem;
  width: 100%;
  margin-left: auto;
}
.playground-header-button {
  display: inline-flex;
  height: 2.25rem;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--secondary);
  color: var(--secondary-foreground);
  padding: 0 1rem;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}
.playground-header-button:hover {
  background: color-mix(in oklab, var(--secondary) 80%, var(--foreground) 4%);
}
.playground-header-button-wide {
  width: 100%;
  min-width: 0;
  justify-content: space-between;
  border: 1px solid var(--border);
  background: var(--background);
  color: var(--foreground);
  padding: 0 0.75rem;
}
.playground-header-button-wide:hover {
  background: var(--accent);
  color: var(--accent-foreground);
}
.playground-header-button-label {
  color: var(--muted-foreground);
  white-space: nowrap;
}
.playground-header-button-value {
  max-width: 11rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.playground-header-button-icon {
  width: 2.25rem;
  padding-inline: 0;
}
.playground-actions-menu {
  display: inline-flex;
}
.playground-actions-panel {
  min-width: 13rem;
}
.playground-preset-menu {
  display: inline-flex;
  flex: 1;
  max-width: 18.75rem;
}
.playground-preset-panel {
  width: 18.75rem;
  padding: 0;
  overflow: hidden;
}
.playground-share-menu {
  display: inline-flex;
}
.playground-share-panel {
  width: min(32.5rem, calc(100vw - 2rem));
  padding: 1rem;
}
.playground-share-header {
  display: grid;
  gap: 0.25rem;
  text-align: left;
}
.playground-share-header h3 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
}
.playground-share-header p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.875rem;
  line-height: 1.4;
}
.playground-share-field {
  position: relative;
  margin-top: 1rem;
}
.playground-share-field .playground-dialog-input {
  padding-right: 2.5rem;
}
.playground-share-copy {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  display: inline-flex;
  width: 1.75rem;
  height: 1.75rem;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--muted-foreground);
  cursor: pointer;
}
.playground-share-copy:hover {
  background: var(--accent);
  color: var(--accent-foreground);
}
.playground-share-copy .example-icon {
  width: 0.875rem;
  height: 0.875rem;
}
.playground-command-search-shell {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--border);
  padding: 0.25rem 0.5rem;
}
.playground-command-search {
  width: 100%;
  height: 2.25rem;
  border: 0;
  background: transparent;
  color: var(--foreground);
  padding: 0 0.25rem;
  font: inherit;
  font-size: 0.875rem;
  outline: none;
}
.playground-command-search::placeholder {
  color: var(--muted-foreground);
}
.playground-command-list {
  max-height: 20rem;
  overflow-y: auto;
  padding: 0.25rem;
}
.playground-command-heading {
  margin: 0;
  padding: 0.375rem 0.5rem;
  color: var(--muted-foreground);
  font-size: 0.75rem;
  font-weight: 500;
}
.playground-command-item {
  padding: 0.375rem 0.5rem;
}
.playground-command-item[hidden],
.playground-command-empty[hidden] {
  display: none;
}
.playground-command-empty {
  margin: 0;
  padding: 1.5rem 0.5rem;
  color: var(--muted-foreground);
  font-size: 0.875rem;
  text-align: center;
}
.playground-dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  background: rgb(0 0 0 / 0.5);
  padding: 1rem;
}
.playground-dialog-overlay[hidden] {
  display: none;
}
.playground-dialog {
  position: relative;
  width: min(32rem, calc(100vw - 2rem));
  border-radius: var(--radius-xl);
  background: var(--background);
  color: var(--foreground);
  padding: 1.5rem;
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.2), 0 8px 10px -6px rgb(0 0 0 / 0.2);
}
.playground-dialog-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--muted-foreground);
  cursor: pointer;
}
.playground-dialog-close:hover {
  background: var(--accent);
  color: var(--accent-foreground);
}
.playground-dialog-header {
  display: grid;
  gap: 0.5rem;
  padding-right: 2rem;
}
.playground-dialog-header h3 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
}
.playground-dialog-header p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.875rem;
  line-height: 1.4;
}
.playground-save-fields {
  display: grid;
  gap: 1.5rem;
  padding: 1rem 0;
}
.playground-dialog-input,
.playground-dialog-textarea {
  width: 100%;
  border: 1px solid var(--input);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--foreground);
  padding: 0.5rem 0.75rem;
  font: inherit;
  font-size: 0.875rem;
  outline: none;
}
.playground-dialog-input {
  height: 2.25rem;
}
.playground-dialog-textarea {
  min-height: 5rem;
  resize: vertical;
}
.playground-dialog-input:focus,
.playground-dialog-textarea:focus {
  border-color: var(--ring);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--ring) 25%, transparent);
}
.playground-dialog-footer {
  display: flex;
  justify-content: flex-end;
  padding-top: 0.5rem;
}
.playground-filter-content {
  padding: 1.5rem 0;
}
.playground-filter-content h4 {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.875rem;
  font-weight: 400;
}
.playground-warning-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.75rem;
}
.playground-warning-copy {
  display: grid;
  flex: 1;
  gap: 0.25rem;
  cursor: pointer;
}
.playground-warning-copy strong {
  font-size: 0.875rem;
  font-weight: 600;
}
.playground-warning-copy span {
  color: var(--muted-foreground);
  font-size: 0.875rem;
  line-height: 1.4;
}
.playground-alert-dialog {
  width: min(28rem, calc(100vw - 2rem));
}
.playground-alert-footer {
  gap: 0.5rem;
  padding-top: 1.5rem;
}
.playground-destructive-button {
  display: inline-flex;
  height: 2.25rem;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--destructive);
  color: var(--destructive-foreground);
  padding: 0 1rem;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
}
.playground-toast-region {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 140;
}
.playground-toast {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--background);
  color: var(--foreground);
  padding: 0.75rem 1rem;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.15), 0 4px 6px -4px rgb(0 0 0 / 0.15);
  font-size: 0.875rem;
  font-weight: 500;
}
.playground-code-dialog {
  display: grid;
  gap: 1rem;
}
.playground-code-block {
  overflow-x: auto;
  margin: 0;
  border-radius: var(--radius-md);
  background: #000;
  color: #fff;
  padding: 1.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.playground-code-block b {
  color: #7dd3fc;
  font-weight: inherit;
}
.playground-code-block i {
  color: #86efac;
  font-style: inherit;
}
.playground-code-block em {
  color: #fcd34d;
  font-style: inherit;
}
.playground-code-note {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.875rem;
  line-height: 1.4;
}
.playground-sidebar-panel,
.playground-complete-panel,
.playground-edit-stack {
  display: grid;
  gap: 1rem;
}
.playground-sidebar-panel {
  order: 2;
  align-content: start;
  gap: 1.5rem;
}
.playground-sidebar-panel > .playground-field {
  gap: 0.75rem;
}
.playground-sidebar-panel > .playground-field > span:first-child {
  font-size: 0.875rem;
  line-height: 1;
}
.playground-field[data-slider-scope] {
  gap: 1rem;
  padding-top: 0.5rem;
}
.playground-field[data-slider-scope] .playground-field-head {
  min-height: 1.625rem;
}
.playground-field[data-slider-scope] .playground-field-head span {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.playground-field[data-slider-scope] .playground-field-value {
  width: 3rem;
  min-height: 1.625rem;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: 0.125rem 0.5rem;
  text-align: right;
}
.playground-field[data-slider-scope] .ui-slider {
  height: 0.375rem;
  margin-top: 0;
}
.playground-field[data-slider-scope] .ui-slider-track {
  height: 0.375rem;
}
.playground-main-column {
  order: 1;
}
.playground-model-trigger {
  display: inline-flex;
  width: 100%;
  height: 2.25rem;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--background);
  padding: 0 0.75rem;
  color: var(--foreground);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
}
.playground-model-trigger:hover {
  background: var(--accent);
  color: var(--accent-foreground);
}
.playground-model-menu {
  display: block;
  width: 100%;
}
.playground-model-panel {
  width: 15.625rem;
  padding: 0;
  overflow: visible;
}
.playground-model-list {
  max-height: 25rem;
}
.playground-command-group[hidden] {
  display: none;
}
.playground-model-option[data-selected="true"] {
  background: var(--primary);
  color: var(--primary-foreground);
}
.playground-model-peek {
  position: absolute;
  top: 0;
  right: calc(100% + 0.25rem);
  width: 16.25rem;
  min-height: 17.5rem;
  border-radius: var(--radius-lg);
  background: var(--popover);
  color: var(--popover-foreground);
  padding: 1rem;
  box-shadow:
    0 0 0 1px color-mix(in oklab, var(--foreground) 10%, transparent),
    0 4px 6px -1px rgb(0 0 0 / 0.1),
    0 2px 4px -2px rgb(0 0 0 / 0.1);
}
.playground-model-peek h4,
.playground-model-peek h5,
.playground-model-peek p {
  margin: 0;
}
.playground-model-peek h4,
.playground-model-peek h5 {
  font-size: 0.875rem;
  font-weight: 500;
}
.playground-model-peek > p,
.playground-model-peek [data-playground-model-strengths] {
  margin-top: 0.5rem;
  color: var(--muted-foreground);
  font-size: 0.875rem;
  line-height: 1.4;
}
.playground-model-peek [data-playground-model-strengths-wrap] {
  margin-top: 1rem;
}
.playground-model-peek [data-playground-model-strengths-wrap][hidden] {
  display: none;
}
.playground-model-chevron {
  opacity: 0.5;
}
.playground-icon-tab-list {
  display: grid;
  width: 100%;
  height: 2.25rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-radius: var(--radius-lg);
  background: var(--muted);
  padding: 3px;
}
.playground-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  padding: 0.25rem 0.5rem;
  color: var(--muted-foreground);
}
.playground-tab {
  font: inherit;
  cursor: pointer;
}
.playground-tab-active {
  border-color: var(--border);
  background: var(--background);
  color: var(--foreground);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
}
.playground-tab-icon {
  width: 1.1rem;
  height: 1.1rem;
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
}
.playground-editor-grid {
  display: grid;
  flex: 1;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr);
}
.playground-editor-grid[data-mode="insert"],
.playground-editor-grid[data-mode="edit"] {
  gap: 1.5rem;
}
.playground-editor-grid > [data-playground-mode-panel][hidden] {
  display: none;
}
.playground-main-column {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}
.playground-textarea,
.playground-surface-pane {
  min-height: 43.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1rem;
  background: transparent;
}
.playground-textarea {
  width: 100%;
  resize: none;
  color: var(--foreground);
  font: inherit;
  font-size: 0.875rem;
}
.playground-textarea::placeholder {
  color: var(--muted-foreground);
}
.playground-textarea-compact {
  min-height: 4rem;
}
.playground-complete-panel {
  height: 100%;
}
.playground-copy-surface {
  color: var(--muted-foreground);
  line-height: 1.6;
}
.playground-surface-pane {
  background: color-mix(in oklab, var(--muted) 30%, var(--card));
}
.playground-surface-pane-muted {
  background: color-mix(in oklab, var(--muted) 64%, var(--card));
}
.playground-submit-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.playground-primary-button,
.playground-ghost-button {
  height: 2.25rem;
  min-height: 2.25rem;
  border-radius: var(--radius-md);
  padding: 0 1rem;
  font-size: 0.875rem;
  font-weight: 500;
}
.playground-primary-button {
  border: 0;
}
.playground-ghost-button {
  width: 2.25rem;
  border: 0;
  background: var(--secondary);
  color: var(--secondary-foreground);
  padding: 0;
}
.playground-ghost-button .example-icon {
  width: 1rem;
  height: 1rem;
}
.auth-example {
  display: grid;
  position: relative;
  min-height: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 0;
}
.auth-login-link {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 1;
  display: inline-flex;
  height: 2.25rem;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-md);
  padding: 0 1rem;
  color: var(--foreground);
  font-size: 0.875rem;
  font-weight: 500;
}
.auth-login-link:hover {
  border-color: var(--border);
  background: color-mix(in oklab, var(--muted) 55%, var(--card));
}
.auth-brand-panel {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 2.5rem;
  background: color-mix(in oklab, var(--primary) 5%, var(--card));
  color: var(--primary);
}
.auth-logo-row {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 1.125rem;
  font-weight: 500;
}
.auth-logo-icon {
  width: 1.5rem;
  height: 1.5rem;
}
.auth-brand-panel blockquote {
  margin: auto 0 0;
  max-width: 34rem;
  line-height: 1.5;
  text-wrap: balance;
}
.auth-form-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.auth-footnote {
  margin: 0;
  padding: 0 1.5rem;
  color: var(--muted-foreground);
  font-size: 0.875rem;
  line-height: 1.3125rem;
  text-align: center;
}
.auth-footnote a {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.auth-form-shell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.5rem;
  width: min(100%, 21.875rem);
  padding: 0;
}
.auth-shell-header {
  display: grid;
  gap: 0.5rem;
  text-align: center;
}
.auth-shell-header h1 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 2rem;
  letter-spacing: -0.025em;
}
.auth-shell-header .tasks-copy {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.auth-methods {
  display: grid;
  gap: 1rem;
}
.auth-field-group {
  display: grid;
  gap: 1.75rem;
}
.auth-input {
  height: 2.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: transparent;
  padding: 0.25rem 0.75rem;
  color: var(--foreground);
  font: inherit;
  font-size: 0.875rem;
}
.auth-input::placeholder {
  color: var(--muted-foreground);
}
.auth-submit-button {
  display: inline-flex;
  height: 2.25rem;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--primary);
  color: var(--primary-foreground);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
}
.auth-provider-button {
  display: inline-flex;
  height: 2.25rem;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--background);
  padding: 0 1rem;
  color: var(--foreground);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
}
.auth-provider-button:hover {
  background: var(--accent);
  color: var(--accent-foreground);
}
.auth-submit-button:disabled,
.auth-provider-button:disabled,
.auth-input:disabled {
  opacity: 0.5;
  pointer-events: none;
}
.auth-provider-icon {
  display: inline-flex;
}
.auth-provider-icon[hidden],
.auth-spinner[hidden] {
  display: none;
}
.auth-spinner {
  display: inline-flex;
  width: 1rem;
  height: 1rem;
  flex: none;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 999px;
  animation: ui-spin 0.8s linear infinite;
}
.auth-divider {
  display: grid;
  align-items: center;
  gap: 0.75rem;
  grid-template-columns: 1fr auto 1fr;
  color: var(--muted-foreground);
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.auth-divider p {
  margin: 0;
}
.auth-divider span {
  height: 1px;
  background: color-mix(in oklab, var(--border) 92%, transparent);
}
.rtl-toggle {
  display: inline-flex;
  height: 2rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--background);
  padding: 0 0.75rem;
  color: var(--foreground);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
}
.rtl-toggle:hover {
  background: var(--accent);
  color: var(--accent-foreground);
}
.rtl-toggle-active {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--primary-foreground);
}
.rtl-preview-frame {
  border: 1px dashed color-mix(in oklab, var(--border) 92%, transparent);
  border-radius: 1rem;
  background: var(--card);
  padding: 1rem;
}
.rtl-card {
  padding: 1rem;
}
.rtl-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.8rem;
}
.rtl-stat-grid {
  display: grid;
  gap: 0.75rem;
  margin-top: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.rtl-stat-card {
  display: grid;
  gap: 0.35rem;
  border: 1px solid color-mix(in oklab, var(--border) 92%, transparent);
  border-radius: 0.85rem;
  background: color-mix(in oklab, var(--muted) 32%, var(--card));
  padding: 0.9rem;
}
.rtl-stat-card p,
.rtl-stat-card strong,
.rtl-stat-card span {
  margin: 0;
}
.example-fallback {
  display: grid;
  place-items: center;
  text-align: center;
  gap: 0.5rem;
}
.doc-nav {
  justify-content: space-between;
}
@media (max-width: 860px) {
  .mobile-nav-trigger,
  .mobile-nav-links {
    display: flex;
  }

  .create-header-bar {
    width: 100%;
  }

  .create-header-bar,
  .create-header-main,
  .create-header-actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .create-header-actions {
    width: 100%;
  }

  .create-header-actions .button,
  .create-header-actions a.button {
    width: 100%;
  }

  .header-row {
    align-items: center;
    flex-direction: row;
    padding: 0.5rem 0;
  }

  .header-primary {
    width: auto;
    justify-content: flex-start;
  }

  .site-nav,
  .header-search-button {
    display: none;
  }

  .header-actions {
    width: auto;
    justify-content: flex-end;
  }

  .header-divider,
  .header-create-link-desktop,
  .desktop-brand-link {
    display: none;
  }

  .header-create-link-mobile {
    display: inline-flex;
  }

  .theme-cards-demo {
    grid-template-columns: minmax(0, 1fr);
  }

  .theme-demo-share-row,
  .theme-demo-table-row,
  .theme-demo-access-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .create-nav {
    width: 100%;
  }

  .create-main-shell {
    width: min(100% - 1rem, 100%);
    padding-top: 0.85rem;
  }

  .create-explorer-panel,
  .create-preview-panel,
  .create-customizer-panel {
    padding: 0.9rem;
  }

  .create-preview-badges {
    justify-content: flex-start;
  }

  .create-preview-stage {
    min-height: 18rem;
    padding: 0.85rem;
  }

  .create-preview-stage-example > * {
    min-height: 18rem;
  }

  .header-row {
    height: auto;
    align-items: center;
    flex-direction: row;
  }

  .header-actions {
    justify-content: space-between;
  }

  .header-divider,
  .header-create-link-desktop,
  .desktop-brand-link {
    display: none;
  }

  .header-create-link-mobile {
    display: inline-flex;
  }

  .header-search-button {
    min-width: 0;
    flex: 1;
  }

  .header-search-copy {
    display: none;
  }

  .header-search-short {
    display: inline;
  }

  .docs-layout {
    grid-template-columns: 1fr;
  }

  .docs-sidebar,
  .docs-toc {
    position: static;
    max-height: none;
  }

  .dashboard-example,
  .auth-example,
  .playground-shell,
  .playground-editor-grid,
  .dashboard-stats-grid,
  .dashboard-content-grid,
  .rtl-stat-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-sidebar {
    display: none;
  }

  .dashboard-main,
  .tasks-example,
  .playground-example,
  .auth-brand-panel,
  .auth-form-panel,
  .rtl-example {
    padding: 1rem;
  }

  .auth-brand-panel {
    display: none;
  }

  .tasks-table-frame {
    overflow: auto;
  }

  .tasks-toolbar {
    align-items: stretch;
  }

  .tasks-filter-input {
    width: 100%;
  }

  .playground-header {
    flex-direction: column;
  }

  .playground-top-actions {
    justify-content: stretch;
  }

  .playground-header-button-wide {
    min-width: 100%;
  }

  .playground-submit-row {
    display: grid;
  }
}
@media (min-width: 768px) and (max-width: 860px) {
  .example-showcase-surface:has(.tasks-example) .example-mobile-gallery {
    display: none;
  }

  .example-showcase-surface:has(.tasks-example) .example-live-stage {
    display: block;
  }

  .example-showcase-surface:has(.playground-example) .example-mobile-gallery {
    display: none;
  }

  .example-showcase-surface:has(.playground-example) .example-live-stage {
    display: block;
  }

  .example-showcase-surface:has(.auth-example) .example-mobile-gallery {
    display: none;
  }

  .example-showcase-surface:has(.auth-example) .example-live-stage {
    display: block;
  }

  .playground-example {
    padding: 0;
  }

  .playground-header {
    flex-direction: row;
  }

  .playground-shell {
    grid-template-columns: minmax(0, 1fr) 200px;
  }

  .playground-top-actions {
    justify-content: flex-end;
  }

  .playground-header-button-wide {
    min-width: 0;
  }

  .playground-submit-row {
    display: flex;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .auth-example {
    height: 43.25rem;
    align-items: center;
    justify-content: center;
    grid-template-columns: minmax(0, 21.875rem);
    padding: 0 1rem;
  }

  .auth-brand-panel {
    display: none;
  }

  .auth-form-panel {
    width: 21.875rem;
    padding: 0;
  }

  .auth-login-link {
    top: 2rem;
    right: 2rem;
  }

  .playground-preset-menu {
    max-width: 12.5rem;
  }

  .playground-editor-grid[data-mode="insert"],
  .playground-editor-grid[data-mode="edit"] {
    grid-template-columns: minmax(0, 1fr);
  }

  .playground-editor-grid[data-mode="insert"] {
    grid-template-rows: repeat(2, minmax(18.75rem, 1fr));
  }

  .playground-editor-grid[data-mode="insert"] > .playground-textarea,
  .playground-editor-grid[data-mode="insert"] > .playground-surface-pane {
    min-height: 18.75rem;
  }

  .playground-editor-grid[data-mode="edit"] > .playground-surface-pane {
    min-height: 25rem;
  }

  .tasks-example {
    padding: 2rem;
  }

  .tasks-toolbar {
    align-items: center;
  }

  .tasks-filter-input {
    width: 9.375rem;
  }

  .tasks-view-menu,
  .tasks-pagination-button[data-tasks-page-action="first"],
  .tasks-pagination-button[data-tasks-page-action="last"] {
    display: none;
  }

  .tasks-table-frame {
    overflow: hidden;
  }

  .tasks-table-frame:has([data-menu-panel]:not([hidden])) {
    overflow: visible;
  }
}
@media (min-width: 1024px) {
  .auth-example {
    height: 62.5rem;
    align-items: stretch;
    justify-content: normal;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0;
  }

  .auth-brand-panel {
    display: flex;
  }

  .auth-form-panel {
    width: auto;
    height: 62.5rem;
    padding: 2rem;
  }

  .auth-login-link {
    top: 2rem;
    right: 2rem;
  }

  .playground-preset-menu {
    max-width: 18.75rem;
  }

  .playground-editor-grid[data-mode="insert"],
  .playground-editor-grid[data-mode="edit"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: minmax(43.75rem, 1fr);
  }

  .playground-editor-grid[data-mode="insert"] > .playground-textarea,
  .playground-editor-grid[data-mode="insert"] > .playground-surface-pane {
    min-height: 43.75rem;
  }

  .playground-edit-stack .playground-field:first-child {
    display: flex;
    flex: 1;
    flex-direction: column;
  }

  .playground-edit-stack .playground-field:first-child .playground-textarea {
    flex: 1;
  }

  .tasks-pagination-controls {
    gap: 2rem;
  }
}
@media (min-width: 1024px) and (max-width: 1139px) {
  .docs-layout {
    grid-template-columns: minmax(220px, 240px) minmax(0, 1fr);
  }

  .docs-toc {
    display: none;
  }

  .theme-cards-demo {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (min-width: 861px) {
  .create-workspace {
    grid-template-columns: minmax(260px, 300px) minmax(0, 1fr);
  }

  .create-customizer-panel {
    grid-column: 1 / -1;
  }

  .header-search-short {
    display: none;
  }

  .home-mobile-preview {
    display: none;
  }

  .home-examples-root {
    display: block;
  }

  .home-preview-shell {
    padding-bottom: 0.75rem;
  }

  .examples-root-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .charts-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .chart-display-card[data-full-width="true"] {
    grid-column: span 2;
  }

  .theme-selector-stub {
    display: inline-flex;
  }

  .example-mobile-gallery {
    display: none;
  }

  .example-live-stage {
    display: block;
  }

  .route-surface-soft {
    padding: 1.25rem;
  }

  .theme-customizer-shell {
    padding: 0.85rem 1rem;
  }

  .theme-customizer-scroll {
    display: block;
  }

  .theme-customizer-mobile {
    display: none;
  }
}
@media (min-width: 1140px) {
  .create-workspace {
    grid-template-columns: minmax(280px, 320px) minmax(0, 1fr) minmax(300px, 360px);
    align-items: start;
  }

  .create-explorer-panel,
  .create-customizer-panel {
    position: sticky;
    top: calc(var(--header-height) + 1rem);
    max-height: calc(100vh - var(--header-height) - 2rem);
    overflow: auto;
  }

  .create-customizer-panel {
    grid-column: auto;
  }

  .examples-root-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .charts-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .chart-display-card[data-full-width="true"] {
    grid-column: span 3;
  }

  .colors-route-grid {
    gap: 5rem;
  }

  .chart-empty-slot {
    display: block;
  }
}
@media (min-width: 1400px) {
  .examples-root-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
  }

  .examples-root-column-last {
    display: flex;
  }
}
@media (min-width: 1600px) {
  .header-layout-toggle {
    display: inline-flex;
  }

  .header-divider-wide {
    display: block;
  }
}
@media (min-width: 768px) {
  .examples-root-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .examples-root-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .rtl-language-selector {
    display: inline-flex;
  }

  .examples-root-column-last {
    display: none;
  }
}
@media (min-width: 1280px) {
  .examples-root-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
  }

  .examples-root-column-last {
    display: flex;
    order: 0;
  }
}
@media (min-width: 1536px) {
  .examples-root-grid {
    gap: 2rem;
  }
}