@nanarino/stylus 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 *ななり ☘
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.rst

@@ -0,0 +1,121 @@
+=========================
+☘ @nanarino/stylus 样式包
+=========================
+
+
+.. image:: ./docs/icons/logo/color/clover.svg
+    :width: 64 px
+    :alt: nanarino Logo
+    :target: https://nanarino.github.io/stylus/
+
+
+使用 ``styl`` 来编写的纯 CSS 库
+
+
+.. image:: https://img.shields.io/badge/stylus-6da13f.svg?style=for-the-badge&logo=stylus
+    :alt: Stylus
+    :target: https://stylus-lang.com/
+
+.. image:: https://img.shields.io/badge/maintained%20with-pnpm%209.15.2-cc00ff.svg?style=for-the-badge&logo=pnpm
+    :alt: pnpm 9.15.2
+    :target: https://pnpm.io/
+
+.. image:: https://img.shields.io/badge/Node.js-v22.12.0-026e00.svg?style=for-the-badge&logo=nodedotjs
+    :alt: Node.js v22.12.0
+    :target: https://nodejs.org/
+
+
+.. highlight:: bash
+
+
+利用
+======
+::
+
+    # 安装 npm 套件
+    pnpm i @nanarino/stylus
+
+    # 在jsx中 `import '@nanarino/stylus'`
+    # 在css中 `@import url('@nanarino/stylus')`
+
+    # 在stylus中可以引入其部分源码 见 `import '@nanarino/stylus/lib/index.styl'`
+
+
+
+运行
+======
+::
+
+    # 克隆仓库然后安装依赖
+    pnpm i
+    # 运行开发服务器
+    pnpm dev
+
+
+
+构建
+======
+::
+
+    # 修改比如配色默认字体后你可以本地构建文档和样式
+    # 构建文档
+    pnpm build:docs
+    # 构建样式
+    pnpm build:styl
+
+
+借物
+======
+* icon: `arco官方图标库 <https://arco.design/iconbox/lib/89/0/>`_
+* color: `arco默认配色 <https://arco.design/palette/list>`_
+* background: `css-doodle <https://css-doodle.com/>`_
+* inspiration: `affinity-css <https://github.com/Deep-Codes/affinity-css/>`_
+* fonts:  `HYWenHei-85W <https://www.hanyi.com.cn/index.php>`_ 和 `JetBrains Mono <https://www.jetbrains.com/lp/mono/>`_ （并非本样式库的预设）
+
+约束
+======
+* astro:
+    - 不省略分号。
+    - 模板外不能含有tsx表达式。
+    - 模板中 jsx的attr里含有 ``"`` 时需要转义。
+    - 直接内嵌客户端脚本时 不省略 ``is:inline`` 并使用IIFE
+    - style 物件写法 需要转义2次 ``:`` 写作 ``\\\:``
+* mdx:
+    - 不能含有js/ts注释。
+    - 分割线使用 ``***`` 而不 ``---``。
+    - style 物件写法 需要转义2次 ``:`` 写作 ``\\\:``
+* styl:
+    - 非跨行组件不设置行高。
+    - 省略冒号分号逗号和花括号。
+    - 用 ``@import`` 先引入css ，再用 ``@require`` 引入stylus。
+    - ``colors = (red #F00)`` 写法应改为Record ``colors = {red: #F00}`` 。
+    - 使通配符引入时要确保引入顺序 以确保譬如含有 ``&>*`` 的选择器被 ``&`` 覆盖。
+
+相容
+======
+
+0.x 版本叫 ``nanarinostyl`` 相容性同 1.x 。 特别的部分给出说明
+
++---------------------+---------+
+| Support             | Version |
++=====================+=========+
+| Chrome              | 105     |
++---------------------+---------+
+| Edge                | 105     |
++---------------------+---------+
+| Firefox             | 121     |
++---------------------+---------+
+| Opera               | 91      |
++---------------------+---------+
+| Safari              | 18      |
++---------------------+---------+
+| Chrome Android      | 105     |
++---------------------+---------+
+| Firefox for Android | 121     |
++---------------------+---------+
+| Opera Android       | 72      |
++---------------------+---------+
+| Safari on iOS       | 18      |
++---------------------+---------+
+| Samsung Internet    | 20.0    |
++---------------------+---------+

package/dist/style.min.css

@@ -0,0 +1 @@
+@-moz-keyframes badge-processing{0%{transform:scale(1);opacity:.5}to{transform:scale(3);opacity:0}}@-webkit-keyframes badge-processing{0%{transform:scale(1);opacity:.5}to{transform:scale(3);opacity:0}}@-o-keyframes badge-processing{0%{transform:scale(1);opacity:.5}to{transform:scale(3);opacity:0}}@keyframes badge-processing{0%{transform:scale(1);opacity:.5}to{transform:scale(3);opacity:0}}:root{background:rgb(var(--white));color:rgb(var(--black))}:root,:root[data-theme=light]{--white:255 255 255;--black:0 0 0;color-scheme:light}:root[data-theme=dark]{--white:0 0 0;--black:255 255 255;color-scheme:dark}:root,:root[data-theme=light]{--red-1:255 236 232;--red-2:253 205 197;--red-3:251 172 163;--red-4:249 137 129;--red-5:247 101 96;--red-6:245 63 63;--red-7:203 39 45;--red-8:161 21 30;--red-9:119 8 19;--red-10:77 0 10;--orange-1:255 247 232;--orange-2:255 228 186;--orange-3:255 207 139;--orange-4:255 182 93;--orange-5:255 154 46;--orange-6:255 125 0;--orange-7:210 95 0;--orange-8:166 69 0;--orange-9:121 46 0;--orange-10:77 27 0;--gold-1:255 252 232;--gold-2:253 244 191;--gold-3:252 233 150;--gold-4:250 220 109;--gold-5:249 204 69;--gold-6:247 186 30;--gold-7:204 146 19;--gold-8:162 109 10;--gold-9:119 75 4;--gold-10:77 45 0;--yellow-1:254 255 232;--yellow-2:254 254 190;--yellow-3:253 250 148;--yellow-4:252 242 107;--yellow-5:251 232 66;--yellow-6:250 220 25;--yellow-7:207 175 15;--yellow-8:163 132 8;--yellow-9:120 93 3;--yellow-10:77 56 0;--lime-1:252 255 232;--lime-2:237 248 187;--lime-3:220 241 144;--lime-4:201 233 104;--lime-5:181 226 65;--lime-6:159 219 29;--lime-7:126 183 18;--lime-8:95 148 10;--lime-9:67 112 4;--lime-10:42 77 0;--green-1:232 255 234;--green-2:175 240 181;--green-3:123 225 136;--green-4:76 210 99;--green-5:35 195 67;--green-6:0 180 42;--green-7:0 154 41;--green-8:0 128 38;--green-9:0 102 34;--green-10:0 77 28;--cyan-1:232 255 251;--cyan-2:183 244 236;--cyan-3:137 233 224;--cyan-4:94 223 214;--cyan-5:55 212 207;--cyan-6:20 201 201;--cyan-7:13 165 170;--cyan-8:7 130 139;--cyan-9:3 97 108;--cyan-10:0 66 77;--blue-1:232 247 255;--blue-2:195 231 254;--blue-3:159 212 253;--blue-4:123 192 252;--blue-5:87 169 251;--blue-6:52 145 250;--blue-7:32 108 207;--blue-8:17 75 163;--blue-9:6 48 120;--blue-10:0 26 77;--purple-1:245 232 255;--purple-2:221 190 246;--purple-3:195 150 237;--purple-4:168 113 227;--purple-5:141 78 218;--purple-6:114 46 209;--purple-7:85 29 176;--purple-8:60 16 143;--purple-9:39 6 110;--purple-10:22 0 77;--pinkpurple-1:255 232 251;--pinkpurple-2:247 186 239;--pinkpurple-3:240 142 230;--pinkpurple-4:232 101 223;--pinkpurple-5:225 62 219;--pinkpurple-6:217 26 217;--pinkpurple-7:176 16 182;--pinkpurple-8:138 9 147;--pinkpurple-9:101 3 112;--pinkpurple-10:66 0 77;--magenta-1:255 232 241;--magenta-2:253 194 219;--magenta-3:251 157 199;--magenta-4:249 121 183;--magenta-5:247 84 168;--magenta-6:245 49 157;--magenta-7:203 30 131;--magenta-8:161 16 105;--magenta-9:119 6 79;--magenta-10:77 0 52;--gray-1:248 248 248;--gray-2:240 240 240;--gray-3:224 224 224;--gray-4:196 196 196;--gray-5:169 169 169;--gray-6:134 134 134;--gray-7:107 107 107;--gray-8:78 78 78;--gray-9:39 39 39;--gray-10:29 29 29}:root[data-theme=dark]{--red-1:77 0 10;--red-2:119 6 17;--red-3:161 22 31;--red-4:203 46 52;--red-5:245 78 78;--red-6:247 105 101;--red-7:249 141 134;--red-8:251 176 167;--red-9:253 209 202;--red-10:255 240 236;--orange-1:77 27 0;--orange-2:121 48 4;--orange-3:166 75 10;--orange-4:210 105 19;--orange-5:255 141 31;--orange-6:255 150 38;--orange-7:255 179 87;--orange-8:255 205 135;--orange-9:255 227 184;--orange-10:255 247 232;--gold-1:77 45 0;--gold-2:119 75 4;--gold-3:162 111 15;--gold-4:204 150 31;--gold-5:247 192 52;--gold-6:249 204 68;--gold-7:250 220 108;--gold-8:252 233 149;--gold-9:253 244 190;--gold-10:255 252 232;--yellow-1:77 56 0;--yellow-2:120 94 7;--yellow-3:163 134 20;--yellow-4:207 179 37;--yellow-5:250 225 60;--yellow-6:251 233 75;--yellow-7:252 243 116;--yellow-8:253 250 157;--yellow-9:254 254 198;--yellow-10:254 255 240;--lime-1:42 77 0;--lime-2:68 112 6;--lime-3:98 148 18;--lime-4:132 183 35;--lime-5:168 219 57;--lime-6:184 226 75;--lime-7:203 233 112;--lime-8:222 241 152;--lime-9:238 248 194;--lime-10:253 255 238;--green-1:0 77 28;--green-2:4 102 37;--green-3:10 128 45;--green-4:18 154 55;--green-5:29 180 64;--green-6:39 195 70;--green-7:80 210 102;--green-8:126 225 139;--green-9:178 240 183;--green-10:235 255 236;--cyan-1:0 66 77;--cyan-2:6 97 108;--cyan-3:17 131 139;--cyan-4:31 166 170;--cyan-5:48 201 201;--cyan-6:63 212 207;--cyan-7:102 223 215;--cyan-8:144 233 225;--cyan-9:190 244 237;--cyan-10:240 255 252;--blue-1:0 26 77;--blue-2:5 47 120;--blue-3:19 76 163;--blue-4:41 113 207;--blue-5:70 154 250;--blue-6:90 170 251;--blue-7:125 193 252;--blue-8:161 213 253;--blue-9:198 232 254;--blue-10:234 248 255;--purple-1:22 0 77;--purple-2:39 6 110;--purple-3:62 19 143;--purple-4:90 37 176;--purple-5:123 61 209;--purple-6:142 81 218;--purple-7:169 116 227;--purple-8:197 154 237;--purple-9:223 194 246;--purple-10:247 237 255;--pinkpurple-1:66 0 77;--pinkpurple-2:101 3 112;--pinkpurple-3:138 13 147;--pinkpurple-4:176 27 182;--pinkpurple-5:217 46 217;--pinkpurple-6:225 61 219;--pinkpurple-7:232 102 223;--pinkpurple-8:240 146 230;--pinkpurple-9:247 193 240;--pinkpurple-10:255 242 253;--magenta-1:77 0 52;--magenta-2:119 8 80;--magenta-3:161 23 108;--magenta-4:203 43 136;--magenta-5:245 69 166;--magenta-6:247 86 169;--magenta-7:249 122 184;--magenta-8:251 158 200;--magenta-9:253 195 219;--magenta-10:255 232 241;--gray-1:23 23 23;--gray-2:46 46 46;--gray-3:72 72 72;--gray-4:95 95 95;--gray-5:120 120 120;--gray-6:146 146 146;--gray-7:171 171 171;--gray-8:197 197 197;--gray-9:223 223 223;--gray-10:246 246 246}*{--box-shadow-color:var(--gray-4);--box-shadow-divider-left:inset 1px 0 0 0 rgb(var(--box-shadow-color)/0.25);--box-shadow-divider-top:inset 0 1px 0 0 rgb(var(--box-shadow-color)/0.25);--box-shadow-divider-right:inset -1px 0 0 0 rgb(var(--box-shadow-color)/0.25);--box-shadow-divider-bottom:inset 0 -1px 0 0 rgb(var(--box-shadow-color)/0.25);--box-shadow-drop-top:0 -6px 12px 4px rgb(var(--box-shadow-color)/0.25), 0 -3px 28px 0 rgb(var(--box-shadow-color)/0.4), 0 -1px 2px -1px rgb(var(--box-shadow-color)/0.56);--box-shadow-drop-left:-6px 0 12px 4px rgb(var(--box-shadow-color)/0.25), -3px 0 6px 0 rgb(var(--box-shadow-color)/0.4), -1px 0 2px -1px rgb(var(--box-shadow-color)/0.56);--box-shadow-drop-right:6px 0 12px 4px rgb(var(--box-shadow-color)/0.25), 3px 0 6px 0 rgb(var(--box-shadow-color)/0.4), 1px 0 2px -1px rgb(var(--box-shadow-color)/0.56);--box-shadow-drop-bottom:0 6px 12px 4px rgb(var(--box-shadow-color)/0.25), 0 3px 6px 0 rgb(var(--box-shadow-color)/0.4), 0 1px 2px -1px rgb(var(--box-shadow-color)/0.56)}:root{--border-radius-sm:4px;--border-radius-md:8px;--border-radius-lg:16px;--font-size-1:12px;--font-size-2:14px;--font-size-3:16px;--font-size-4:20px;--font-size-5:24px;--font-size-6:30px;--font-size-7:38px;--font-size-8:46px;--font-size-9:56px;--font-size-10:68px;--font-size-base:12px;--font-size-body:14px;--font-size-h6:14px;--font-size-h5:16px;--font-size-h4:20px;--font-size-h3:24px;--font-size-h2:30px;--font-size-h1:38px;--font-offset-parent:4px;--line-height-1:20px;--line-height-2:22px;--line-height-3:24px;--line-height-4:28px;--line-height-5:32px;--line-height-6:38px;--line-height-7:46px;--line-height-8:54px;--line-height-9:64px;--line-height-10:76px;--line-height-base:20px;--line-height-body:22px;--line-height-h6:22px;--line-height-h5:24px;--line-height-h4:28px;--line-height-h3:32px;--line-height-h2:38px;--line-height-h1:46px;--primary-1:var(--pinkpurple-1);--primary-2:var(--pinkpurple-2);--primary-3:var(--pinkpurple-3);--primary-4:var(--pinkpurple-4);--primary-5:var(--pinkpurple-5);--primary-6:var(--pinkpurple-6);--primary-7:var(--pinkpurple-7);--primary-8:var(--pinkpurple-8);--primary-9:var(--pinkpurple-9);--primary-10:var(--pinkpurple-10);--success-1:var(--green-1);--success-2:var(--green-2);--success-3:var(--green-3);--success-4:var(--green-4);--success-5:var(--green-5);--success-6:var(--green-6);--success-7:var(--green-7);--success-8:var(--green-8);--success-9:var(--green-9);--success-10:var(--green-10);--danger-1:var(--red-1);--danger-2:var(--red-2);--danger-3:var(--red-3);--danger-4:var(--red-4);--danger-5:var(--red-5);--danger-6:var(--red-6);--danger-7:var(--red-7);--danger-8:var(--red-8);--danger-9:var(--red-9);--danger-10:var(--red-10);--warning-1:var(--orange-1);--warning-2:var(--orange-2);--warning-3:var(--orange-3);--warning-4:var(--orange-4);--warning-5:var(--orange-5);--warning-6:var(--orange-6);--warning-7:var(--orange-7);--warning-8:var(--orange-8);--warning-9:var(--orange-9);--warning-10:var(--orange-10);--outline-color-\*\:focus:var(--black);font-size:var(--font-size-body);font-family:var(--font-family-base, 'system-ui', '—apple-system', 'Segoe UI', 'Rototo', 'Emoji', 'Helvetica', 'Arial', 'sans-serif')}:root [data-primary=success]{--primary-1:var(--success-1);--primary-2:var(--success-2);--primary-3:var(--success-3);--primary-4:var(--success-4);--primary-5:var(--success-5);--primary-6:var(--success-6);--primary-7:var(--success-7);--primary-8:var(--success-8);--primary-9:var(--success-9);--primary-10:var(--success-10)}:root [data-primary=danger]{--primary-1:var(--danger-1);--primary-2:var(--danger-2);--primary-3:var(--danger-3);--primary-4:var(--danger-4);--primary-5:var(--danger-5);--primary-6:var(--danger-6);--primary-7:var(--danger-7);--primary-8:var(--danger-8);--primary-9:var(--danger-9);--primary-10:var(--danger-10)}:root [data-primary=warning]{--primary-1:var(--warning-1);--primary-2:var(--warning-2);--primary-3:var(--warning-3);--primary-4:var(--warning-4);--primary-5:var(--warning-5);--primary-6:var(--warning-6);--primary-7:var(--warning-7);--primary-8:var(--warning-8);--primary-9:var(--warning-9);--primary-10:var(--warning-10)}@font-face{font-family:Emoji;src:local("Apple Color Emoji"),local("Segoe UI Emoji"),local("Segoe UI Symbol"),local("Noto Color Emoji");unicode-range:U+1F000-1F644,U+203C-3299}.na-font-serif{font-family:var(--font-family-serif, var(--font-family-base, 'Georgia', 'Cambria', 'Times New Roman', 'Times', 'serif'))}.na-font-mono{font-family:var(--font-family-mono, var(--font-family-base, 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', 'monospace'))}.na-button,.na-input,.na-select,.na-texrarea{font-family:inherit;font-style:inherit;font-weight:inherit}.na-code,.na-kbd,.na-pre{font-family:var(--font-family-mono, var(--font-family-base, 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', 'monospace'))}.na-cannot-select{-webkit-user-drag:none;-webkit-user-select:none;user-select:none}::selection{background-color:rgb(var(--background-color-selection, var(--primary-9)));color:rgb(var(--color-selection, var(--primary-1)))}.na-layout{display:flex;flex-direction:column;flex:1;--box-shadow-color:var(--gray-6)}.na-layout:where([data-has-aside]){position:relative;flex-direction:row}.na-layout-content{position:relative;z-index:0;flex:1;overflow-x:hidden}.na-layout-aside{width:var(--width-aside, unset);overflow-x:hidden;background-color:rgb(var(--background-color-aside, var(--white)));z-index:1000;top:0;bottom:0;transition:width .3s,padding-left .3s,padding-right .3s,border-left .3s,border-right .3s}.na-layout-aside:first-child{--box-shadow-color:var(--gray-6);box-shadow:var(--box-shadow-divider-right)}.na-layout-aside:last-child{--box-shadow-color:var(--gray-6);box-shadow:var(--box-shadow-divider-left)}.na-layout-aside:where([data-float]){position:absolute}.na-layout-aside:where([data-collapsed]),.na-layout-aside:where([data-folded]){padding-left:0;padding-right:0;border-left:0;border-right:0}.na-layout-aside:where([data-folded]){flex:0}.na-layout-aside:where([data-collapsed]){width:0}.na-layout-header{box-shadow:var(--box-shadow-divider-bottom)}.na-layout-footer{box-shadow:var(--box-shadow-divider-top)}.na-layout-footer,.na-layout-header{--box-shadow-color:var(--gray-6)}.na-watermark{position:relative}.na-watermark::after{pointer-events:none;content:"";position:absolute;inset:0;background:var(--background-watermark, url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 40' width='80' height='40'><path fill='%23808080' d='M0 40a19.96 19.96 0 0 1 5.9-14.11 20.17 20.17 0 0 1 19.44-5.2A20 20 0 0 1 20.2 40H0zM65.32.75A20.02 20.02 0 0 1 40.8 25.26 20.02 20.02 0 0 1 65.32.76zM.07 0h20.1l-.08.07A20.02 20.02 0 0 1 .75 5.25 20.08 20.08 0 0 1 .07 0zm1.94 40h2.53l4.26-4.24v-9.78A17.96 17.96 0 0 0 2 40zm5.38 0h9.8a17.98 17.98 0 0 0 6.67-16.42L7.4 40zm3.43-15.42v9.17l11.62-11.59c-3.97-.5-8.08.3-11.62 2.42zm32.86-.78A18 18 0 0 0 63.85 3.63L43.68 23.8zm7.2-19.17v9.15L62.43 2.22c-3.96-.5-8.05.3-11.57 2.4zm-3.49 2.72c-4.1 4.1-5.81 9.69-5.13 15.03l6.61-6.6V6.02c-.51.41-1 .85-1.48 1.33zM17.18 0H7.42L3.64 3.78A18 18 0 0 0 17.18 0zM2.08 0c-.01.8.04 1.58.14 2.37L4.59 0H2.07z'/></svg>"));border-radius:var(--border-radius-watermark, unset);mix-blend-mode:multiply;opacity:var(--opacity-watermark, 0.1)}:root[data-theme=dark] .na-watermark::after{mix-blend-mode:exclusion}.na-divider:where(hr){border-color:rgb(var(--gray-2)/.4)}.na-divider:where(div){padding-top:2em;margin-bottom:2em;overflow:hidden;--box-shadow-color:var(--gray-6);box-shadow:var(--box-shadow-divider-bottom)}.na-divider:where(span){display:inline-block;vertical-align:middle;height:1em;padding-left:1em;margin-right:1em;--box-shadow-color:var(--black);box-shadow:var(--box-shadow-divider-right)}.na-image{--color-link:var(--color-image, var(--white));--color-link\:hover:var(--gray-2);--color-link\:disabled:var(--gray-4);display:inline-flex;flex-direction:column;gap:16px;align-items:center;justify-content:center;position:relative;box-sizing:border-box;background-repeat:no-repeat;background-size:cover;background-position:center center;overflow:hidden}.na-image>img{width:100%;height:100%;object-fit:cover;object-position:center center}.na-image-footer,.na-image-mask{position:absolute;z-index:2;color:rgb(var(--color-image, var(--white)));display:flex;align-items:center}.na-image-mask{opacity:0;transition:opacity .5s;inset:0;background-color:rgb(var(--black)/.5);justify-content:center}.na-image-mask:hover{opacity:1}.na-image-footer{height:64px;padding:9px 16px;box-sizing:border-box;bottom:0;left:0;right:0;background-image:linear-gradient(180deg,transparent 0%,transparent 0%,rgb(var(--color-image-mask, var(--black))) 100%,rgb(var(--color-image-mask, var(--black))) 100%);gap:16px}.na-image-footer-content{height:100%;display:flex;flex-direction:column;justify-content:space-around;flex:1;word-break:break-all}.na-image-footer-content .na-paragraph,.na-image-footer-content .na-title{height:unset;margin:0}.na-image-footer-action{display:flex;align-items:center;gap:16px}.na-image.na-input-wrapper{color:rgb(var(--color-input\*-wrapper, var(--gray-6)))}.na-image.na-input-wrapper input[type=file].na-input{--color-input:var(--gray-6);--outline-color-\*\:focus:var(--color-input\*-wrapper, var(--color-input));position:absolute;inset:0;border-radius:var(--border-radius-md);border:2px dashed rgb(var(--outline-color-\*\:focus));cursor:pointer;color:transparent;outline:2px solid transparent;transition:box-shadow .3s,opacity .3s}.na-image.na-input-wrapper input[type=file].na-input:where([data-primary]){--color-input:var(--primary-6)}.na-image.na-input-wrapper input[type=file].na-input::-ms-browse{display:none}.na-image.na-input-wrapper input[type=file].na-input::-webkit-file-upload-button{display:none}.na-image.na-input-wrapper input[type=file].na-input::file-selector-button{display:none}.na-image.na-input-wrapper input[type=file].na-input[disabled]{cursor:not-allowed;opacity:.3}.na-image.na-input-wrapper input[type=file].na-input:focus-visible{outline-color:rgb(var(--outline-color-\*\:focus))}.na-image.na-input-wrapper:has(input[type=file].na-input:not([disabled])):hover{box-shadow:var(--box-shadow-drop-bottom)}.na-link{display:inline-flex;font-size:inherit;border:0;background:0 0;padding:unset;cursor:pointer;outline:2px solid transparent;color:rgb(var(--color-link, var(--primary-6)))}.na-link:hover{color:rgb(var(--color-link\:hover, var(--primary-5)))}.na-link:focus{color:rgb(var(--color-link\:focus, var(--primary-7)))}.na-link[aria-disabled],.na-link[disabled]{color:rgb(var(--color-link\:disabled, var(--primary-2)));cursor:not-allowed}.na-link:focus-visible{outline-color:rgb(var(--outline-color-\*\:focus));border-radius:var(--border-radius-sm)}.na-list{line-height:2}.na-list>*,.na-list>li>*{vertical-align:middle}.na-list::marker,.na-list>li::marker{color:rgb(var(--primary-5))}.na-paragraph{margin:1em 0;padding:0;font-size:var(--font-size-body);line-height:var(--line-height-body)}.na-paragraph:has(.na-code){line-height:calc(var(--line-height-body) + var(--font-offset-parent))}.na-paragraph:where([data-size="1"]){--line-height-body:var(--line-height-h1);--font-size-body:var(--font-size-h1)}.na-paragraph:where([data-ellipsis="1"]){display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;height:calc(var(--line-height-body)*1)}.na-paragraph:where([data-size="2"]){--line-height-body:var(--line-height-h2);--font-size-body:var(--font-size-h2)}.na-paragraph:where([data-ellipsis="2"]){display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;height:calc(var(--line-height-body)*2)}.na-paragraph:where([data-size="3"]){--line-height-body:var(--line-height-h3);--font-size-body:var(--font-size-h3)}.na-paragraph:where([data-ellipsis="3"]){display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;height:calc(var(--line-height-body)*3)}.na-paragraph:where([data-size="4"]){--line-height-body:var(--line-height-h4);--font-size-body:var(--font-size-h4)}.na-paragraph:where([data-ellipsis="4"]){display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden;height:calc(var(--line-height-body)*4)}.na-paragraph:where([data-size="5"]){--line-height-body:var(--line-height-h5);--font-size-body:var(--font-size-h5)}.na-paragraph:where([data-ellipsis="5"]){display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;overflow:hidden;height:calc(var(--line-height-body)*5)}.na-paragraph:where([data-size="6"]){--line-height-body:var(--line-height-h6);--font-size-body:var(--font-size-h6)}.na-paragraph:where([data-ellipsis="6"]){display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:6;overflow:hidden;height:calc(var(--line-height-body)*6)}.na-paragraph:where([data-has-indent]){text-indent:2em}.na-table-wrapper{display:grid;overflow:auto;position:relative}.na-table-wrapper .na-table-header-group,.na-table-wrapper thead{top:0;z-index:10;position:sticky}.na-table-wrapper .na-table-footer-group,.na-table-wrapper tfoot{bottom:0;z-index:10;position:sticky}.na-table-wrapper .na-table{height:fit-content}.na-table{font-size:var(--font-size-body);line-height:var(--line-height-body);display:table;max-width:100%;border-collapse:collapse}.na-table.lg{--padding-cell:13px 16px;--font-size-body:var(--font-size-3);--line-height-body:var(--line-height-3)}.na-table.sm{--padding-cell:5px 8px;--font-size-body:var(--font-size-1);--line-height-body:var(--line-height-1)}.na-table tr,.na-table-row{display:table-row;box-sizing:border-box}.na-table tr:hover>*,.na-table-row:hover>*{color:rgb(var(--color-cell-row\:hover, var(--gray-9)));background-color:rgb(var(--background-color-cell-row\:hover, var(--gray-1)))}.na-table td,.na-table th,.na-table-cell{display:table-cell;box-sizing:border-box;white-space:var(--white-space-cell, normal);min-width:var(--min-width-cell, unset);padding:var(--padding-cell, 9px 12px);text-align:var(--text-align-cell, left);border:var(--border-cell, none);box-shadow:var(--box-shadow-divider-bottom)}.na-table-header-group{display:table-header-group}.na-table th,.na-table-footer-group .na-table-cell,.na-table-header-group .na-table-cell{color:rgb(var(--gray-9));background-color:rgb(var(--gray-1))}.na-table-footer-group{display:table-footer-group}.na-table colgroup>col{border:1px rgb(var(--box-shadow-color)/.3)}.na-code:where(code),.na-kbd:where(kbd),.na-tag{white-space:nowrap;box-sizing:border-box;padding:var(--font-offset-parent);border-radius:var(--border-radius-md)}.na-code:where(code){color:rgb(var(--color-code, var(--primary-9)));background-color:rgb(var(--background-color-code, var(--primary-1)))}.na-kbd:where(kbd),.na-tag{display:inline-block;border:1px rgb(var(--color-tag, var(--primary-6)));color:rgb(var(--color-tag, var(--primary-6)));background-color:rgb(var(--background-color-tag, var(--primary-1)))}.na-kbd:where(kbd){border-bottom-style:solid;padding:var(--font-offset-parent) calc(var(--font-offset-parent)*2)}.na-title{padding:0;font-weight:400;margin:1em 0;line-height:var(--line-height-h6);font-size:var(--font-size-h6)}.na-title .na-title-subtitle{line-height:var(--line-height-1);font-size:var(--font-size-1)}.na-title-subtitle{margin-left:var(--font-offset-parent);vertical-align:bottom;color:rgb(var(--gray-6))}h1.na-title{line-height:var(--line-height-h1);font-size:var(--font-size-h1)}h1.na-title .na-title-subtitle{line-height:var(--line-height-6);font-size:var(--font-size-6)}.na-title:where([data-size="1"]){line-height:var(--line-height-h1);font-size:var(--font-size-h1)}.na-title:where([data-size="1"]) .na-title-subtitle{line-height:var(--line-height-6);font-size:var(--font-size-6)}h2.na-title{line-height:var(--line-height-h2);font-size:var(--font-size-h2)}h2.na-title .na-title-subtitle{line-height:var(--line-height-5);font-size:var(--font-size-5)}.na-title:where([data-size="2"]){line-height:var(--line-height-h2);font-size:var(--font-size-h2)}.na-title:where([data-size="2"]) .na-title-subtitle{line-height:var(--line-height-5);font-size:var(--font-size-5)}h3.na-title{line-height:var(--line-height-h3);font-size:var(--font-size-h3)}h3.na-title .na-title-subtitle{line-height:var(--line-height-4);font-size:var(--font-size-4)}.na-title:where([data-size="3"]){line-height:var(--line-height-h3);font-size:var(--font-size-h3)}.na-title:where([data-size="3"]) .na-title-subtitle{line-height:var(--line-height-4);font-size:var(--font-size-4)}h4.na-title{line-height:var(--line-height-h4);font-size:var(--font-size-h4)}h4.na-title .na-title-subtitle{line-height:var(--line-height-3);font-size:var(--font-size-3)}.na-title:where([data-size="4"]){line-height:var(--line-height-h4);font-size:var(--font-size-h4)}.na-title:where([data-size="4"]) .na-title-subtitle{line-height:var(--line-height-3);font-size:var(--font-size-3)}h5.na-title{line-height:var(--line-height-h5);font-size:var(--font-size-h5)}h5.na-title .na-title-subtitle{line-height:var(--line-height-2);font-size:var(--font-size-2)}.na-title:where([data-size="5"]){line-height:var(--line-height-h5);font-size:var(--font-size-h5)}.na-title:where([data-size="5"]) .na-title-subtitle{line-height:var(--line-height-2);font-size:var(--font-size-2)}h6.na-title{line-height:var(--line-height-h6);font-size:var(--font-size-h6)}h6.na-title .na-title-subtitle{line-height:var(--line-height-1);font-size:var(--font-size-1)}.na-title:where([data-size="6"]){line-height:var(--line-height-h6);font-size:var(--font-size-h6)}.na-title:where([data-size="6"]) .na-title-subtitle{line-height:var(--line-height-1);font-size:var(--font-size-1)}.na-blockquote{margin:0;color:rgb(var(--color-blockquote, var(--gray-7)))}.na-blockquote,.na-title:where([data-has-prefix]){position:relative;padding-left:calc(var(--font-offset-parent)*3)}.na-blockquote::before,.na-title:where([data-has-prefix])::before{position:absolute;content:"";width:4px;border-radius:2px;left:0;top:var(--font-offset-parent);bottom:var(--font-offset-parent);background-color:rgb(var(--color-title-prefix, var(--color-blockquote-prefix, var(--gray-3))))}.na-blockquote:where([data-primary]),.na-title:where([data-has-prefix]):where([data-primary]){--color-title-prefix:var(--primary-5)}.na-badge{width:fit-content;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;padding-left:var(--indent-badge, 1.2em);position:relative}.na-badge::before{content:"";position:absolute;border-radius:50%;top:0;bottom:0;left:0;aspect-ratio:1/1;clip-path:inset(var(--margin-badge, 0.3em) round 50%);background-color:rgb(var(--color-badge, var(--primary-6)))}.na-badge:where([data-processing])::after{content:"";box-sizing:border-box;position:absolute;top:var(--margin-badge, 0.3em);bottom:var(--margin-badge, 0.3em);left:var(--margin-badge, 0.3em);aspect-ratio:1/1;border-radius:50%;outline:var(--weight-badge-processing, 1px) solid rgb(var(--color-badge, var(--primary-6)));animation:badge-processing 1.2s ease-in-out infinite}.na-button{--color-button:var(--white);--color-button\:disabled:var(--white);--background-color-button:var(--primary-5);--background-color-button\:focus:var(--primary-6);--background-color-button\:disabled:var(--primary-2);cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-flex;justify-content:center;align-items:center;padding:var(--padding-vertical-button, 5px) var(--padding-horizontal-button, 12px);font-size:var(--font-size-body);height:fit-content;line-height:var(--line-height-body);min-height:var(--line-height-body);outline:2px solid transparent;box-sizing:content-box;border:0;border-radius:var(--border-radius-md);transition:--percent-button-ripple .5s,box-shadow .3s;transition-timing-function:ease-in;background-color:rgb(var(--background-color-button));background-image:radial-gradient(circle,transparent 0%,transparent var(--percent-button-ripple),rgb(var(--background-color-button)) var(--percent-button-ripple),rgb(var(--background-color-button)) 100%);color:rgb(var(--color-button))}@property --percent-button-ripple{syntax:"<percentage>";inherits:false;initial-value:100%}.na-button:where(:not([data-primary])){--color-button:var(--gray-10);--color-button\:disabled:var(--gray-5);--background-color-button:var(--gray-2);--background-color-button\:focus:var(--gray-3);--background-color-button\:disabled:var(--gray-1)}.na-button:focus-visible{outline-color:rgb(var(--outline-color-\*\:focus))}.na-button:not([disabled]):hover{box-shadow:var(--box-shadow-drop-bottom)}.na-button[disabled]{cursor:not-allowed;color:rgb(var(--color-button\:disabled));background-color:rgb(var(--background-color-button\:disabled))}.na-button[disabled]::-ms-browse{color:rgb(var(--color-button\:disabled))}.na-button[disabled]::-webkit-file-upload-button{color:rgb(var(--color-button\:disabled))}.na-button[disabled]::file-selector-button{color:rgb(var(--color-button\:disabled))}.na-button:not([disabled]):focus{background-color:rgb(var(--background-color-button\:focus))}.na-button:not([disabled]):active{--percent-button-ripple:0%;transition:none;background-color:rgb(var(--background-color-button\:focus))}.na-button.sm{--padding-vertical-button:1px;--padding-horizontal-button:8px;--font-size-body:var(--font-size-base);--line-height-body:var(--line-height-base);border-radius:var(--border-radius-sm)}.na-button.lg{--padding-vertical-button:8px;--padding-horizontal-button:16px;--font-size-body:var(--font-size-h5);--line-height-body:var(--line-height-h5)}.na-button:where([data-round]),.na-button:where([data-square]){aspect-ratio:1/1;overflow:hidden;--padding-vertical-button:var(--padding-horizontal-button, 12px)}.na-button:where([data-round]){border-radius:50%}@supports (background:paint(smooth-corners)){.na-button:where([data-square]){border-radius:unset;mask:paint(smooth-corners)}}.na-button::-ms-browse{color:rgb(var(--color-button))}.na-button::-webkit-file-upload-button{color:rgb(var(--color-button))}.na-button::file-selector-button{color:rgb(var(--color-button))}.na-input-wrapper:has(input[type=file].na-input.na-button) .na-input-prefix{pointer-events:none;transform:translateX(.4em)}.na-input-wrapper:has(input[type=file].na-input.na-button:disabled) .na-input-prefix,.na-input-wrapper:has(input[type=file].na-input.na-button[data-primary]) .na-input-prefix{color:rgb(var(--white))}.na-input:where(input[type=file]).na-button{font-size:0;max-height:var(--line-height-body)}.na-input:where(input[type=file]).na-button::-ms-browse{font-size:var(--font-size-body);line-height:var(--line-height-body);padding:0;border:0;background-color:transparent;outline:0;margin:0 .2em}.na-input-wrapper:has(.na-input-prefix) .na-input:where(input[type=file]).na-button::-ms-browse{margin:0 .4em 0 0}.na-input:where(input[type=file]).na-button::-webkit-file-upload-button{font-size:var(--font-size-body);line-height:var(--line-height-body);padding:0;border:0;background-color:transparent;outline:0;margin:0 .2em}.na-input-wrapper:has(.na-input-prefix) .na-input:where(input[type=file]).na-button::-webkit-file-upload-button{margin:0 .4em 0 0}.na-input:where(input[type=file]).na-button::file-selector-button{font-size:var(--font-size-body);line-height:var(--line-height-body);padding:0;border:0;background-color:transparent;outline:0;margin:0 .2em}.na-input-wrapper:has(.na-input-prefix) .na-input:where(input[type=file]).na-button::file-selector-button{margin:0 .4em 0 0}.na-input-wrapper:has(.na-input-prefix) .na-input:where(input[type=file]).na-button{padding-left:calc(var(--padding-horizontal-button, 12px) + 1.5*var(--font-size-body))}.na-input:where(input[type=file]).na-button+label{cursor:pointer}.na-checkbox{min-height:var(--line-height-body);position:relative;display:inline-flex}.na-checkbox .na-input:where(input[type=checkbox]){border:0;width:16px;height:16px;top:0;bottom:0;margin:auto 0;position:absolute;z-index:1;opacity:0;cursor:pointer}.na-checkbox .na-input:where(input[type=checkbox]):disabled,.na-input:where(input[type=checkbox]):disabled+.na-checkbox-label[for]{cursor:not-allowed}.na-input-wrapper:has(.na-checkbox .na-input:where(input[type=checkbox])){gap:8px}.na-checkbox-label{padding-left:var(--indent-checkbox, 1.4em);min-width:2px;min-height:1em;position:relative;display:inline-flex;align-items:center}.na-checkbox-label[for]{cursor:pointer}.na-input:where(input[type=checkbox]):focus-visible+.na-checkbox-label{outline:2px solid rgb(var(--color-input\*-wrapper, var(--outline-color-\*\:focus)));border-radius:var(--border-radius-sm)}.na-input:where(input[type=checkbox]):disabled+.na-checkbox-label{color:rgb(var(--gray-6))}.na-checkbox-label::before{content:"";width:16px;height:16px;box-sizing:border-box;border:2px solid rgb(var(--gray-4));position:absolute;left:0;background-color:rgb(var(--white));border-radius:var(--border-radius-sm);transition:border-color .3s}.na-input:where(input[type=checkbox]):not(:disabled):hover+.na-checkbox-label::before{border-color:rgb(var(--color-checkbox, var(--primary-6)))}.na-input:where(input[type=checkbox]):checked+.na-checkbox-label::before{border-color:rgb(var(--color-checkbox, var(--primary-6)));background-color:rgb(var(--color-checkbox, var(--primary-6)))}.na-input:where(input[type=checkbox]):checked:disabled+.na-checkbox-label::before{border-color:rgb(var(--color-checkbox\:disabled, var(--primary-3)));background-color:rgb(var(--color-checkbox\:disabled, var(--primary-3)))}.na-input:where(input[type=checkbox]):disabled+.na-checkbox-label::before{background-color:rgb(var(--gray-1))}.na-input:where(input[type=checkbox]):disabled:not(:checked)+.na-checkbox-label::before{background-color:rgb(var(--gray-2))}.na-checkbox[data-indeterminate] .na-checkbox-label::before{padding:2px;background-color:rgb(var(--color-checkbox, var(--primary-6)));background-clip:content-box}.na-checkbox[data-indeterminate] .na-input:where(input[type=checkbox]):disabled+.na-checkbox-label::before{background-color:rgb(var(--color-checkbox\:disabled, var(--primary-3)))}.na-checkbox-label::after{content:"";text-align:center;line-height:16px;box-sizing:border-box;position:absolute;left:3px;width:10px;height:10px}.na-checkbox:where(:not([data-marker])) .na-input:where(input[type=checkbox]):checked+.na-checkbox-label::after{height:6px;margin-top:-1px;transform:rotate(-45deg);clip-path:path("M 0 1.5 A 1.5 1.5 0 1 1 3 1 L 3 3 L 9 3 A 1.5 1.5 0 1 1 8.5 6 L 1.5 6 A 1.5 1.5 0 0 1 0 4.5 Z");background-color:rgb(var(--white))}.na-checkbox:where([data-marker="-"]) .na-input:where(input[type=checkbox]):checked+.na-checkbox-label::after{background:rgb(var(--white));height:2px;border-radius:2px}.na-dropdown-wrapper,.na-popover-wrapper{width:fit-content;position:relative}.na-dropdown-wrapper dialog:not(.na-dropdown){visibility:hidden}.na-dropdown-wrapper dialog:not(:popover-open)+.na-dropdown{display:none}.na-dropdown-wrapper .na-dropdown{position:absolute;left:50%;transform:translateX(-50%);top:calc(100% + var(--gap-dialog-form, 8px));padding:var(--gap-dialog-form, 8px);width:max-content;margin:auto}.na-dropdown-wrapper .na-dropdown:not(dialog){display:grid;gap:var(--gap-dialog-form, 8px)}.na-dropdown,.na-popover{z-index:100;border:0;box-shadow:var(--box-shadow-drop-bottom);--box-shadow-color:var(--gray-6);background-color:rgb(var(--background-color-dialog, var(--white)));border-radius:var(--border-radius-md);inset:unset}.na-dialog form[method=dialog],.na-dropdown form[method=dialog],.na-popover form[method=dialog]{display:grid;gap:var(--gap-dialog-form, 8px)}.na-dropdown.sm,.na-popover.sm{--gap-dialog-form:4px}.na-popover{padding:var(--padding-dialog, var(--gap-dialog-form, 8px))}.na-dialog{z-index:100;border:0;box-shadow:var(--box-shadow-drop-bottom);--box-shadow-color:var(--gray-6);background-color:rgb(var(--background-color-dialog, var(--white)));border-radius:var(--border-radius-lg);padding:var(--padding-dialog, 16px 24px)}.na-dialog[open]::backdrop{pointer-events:none;backdrop-filter:brightness(.8) blur(1px)}:root[data-theme=dark] .na-dialog[open]::backdrop{backdrop-filter:brightness(1.25) blur(1px)}.na-form-item{display:flex;gap:8px;margin-bottom:16px;align-items:center}.na-form-item:where(label){width:fit-content}.na-form-item:where([data-inline]){display:inline-flex}.na-form-item-message{color:rgb(var(--primary-6));position:absolute;left:0;bottom:-1.5em;font-size:var(--font-size-base);line-height:var(--line-height-base)}.na-input-wrapper:where([data-validate]):where(:has(:focus:invalid)){--primary-1:var(--danger-1);--primary-2:var(--danger-2);--primary-3:var(--danger-3);--primary-4:var(--danger-4);--primary-5:var(--danger-5);--primary-6:var(--danger-6);--primary-7:var(--danger-7);--primary-8:var(--danger-8);--primary-9:var(--danger-9);--primary-10:var(--danger-10)}.na-input-wrapper:where([data-validate]):where(:not(:has(:focus:invalid))) .na-form-item-message{visibility:hidden}.na-textarea:where(textarea){--color-textarea:var(--color-input\*-wrapper, var(--outline-color-\*\:focus));display:inline-flex;flex-direction:column;padding:var(--padding-textarea, 5px 12px);box-sizing:border-box;border:0;outline:2px solid transparent;border-radius:var(--border-radius-md);font-size:var(--font-size-body);line-height:var(--line-height-body);caret-color:rgb(var(--color-textarea));background-color:rgb(var(--gray-2));transition:outline-color .3s,box-shadow .3s}.na-textarea:where(textarea).sm{--padding-textarea:1px 12px}.na-textarea:where(textarea).lg{--padding-textarea:8px 12px;--font-size-body:var(--font-size-h5);--line-height-body:var(--line-height-h5)}.na-textarea:where(textarea):focus-visible,.na-textarea:where(textarea):hover{box-shadow:var(--box-shadow-drop-bottom)}.na-textarea:where(textarea):focus-visible{outline-color:rgb(var(--color-textarea))}.na-textarea:where(textarea)[disabled]{cursor:not-allowed;background-color:rgb(var(--gray-1));color:rgb(var(--gray-6))}.na-input:where(input:not([type]))[disabled]:hover,.na-input:where(input[type=date])[disabled]:hover,.na-input:where(input[type=datetime-local])[disabled]:hover,.na-input:where(input[type=datetime])[disabled]:hover,.na-input:where(input[type=email])[disabled]:hover,.na-input:where(input[type=month])[disabled]:hover,.na-input:where(input[type=number])[disabled]:hover,.na-input:where(input[type=password])[disabled]:hover,.na-input:where(input[type=search])[disabled]:hover,.na-input:where(input[type=tel])[disabled]:hover,.na-input:where(input[type=text])[disabled]:hover,.na-input:where(input[type=time])[disabled]:hover,.na-input:where(input[type=url])[disabled]:hover,.na-input:where(input[type=week])[disabled]:hover,.na-textarea:where(textarea)[disabled]:hover{box-shadow:none}.na-input:where(input:not([type]))::-webkit-input-placeholder,.na-input:where(input[type=date])::-webkit-input-placeholder,.na-input:where(input[type=datetime-local])::-webkit-input-placeholder,.na-input:where(input[type=datetime])::-webkit-input-placeholder,.na-input:where(input[type=email])::-webkit-input-placeholder,.na-input:where(input[type=month])::-webkit-input-placeholder,.na-input:where(input[type=number])::-webkit-input-placeholder,.na-input:where(input[type=password])::-webkit-input-placeholder,.na-input:where(input[type=search])::-webkit-input-placeholder,.na-input:where(input[type=tel])::-webkit-input-placeholder,.na-input:where(input[type=text])::-webkit-input-placeholder,.na-input:where(input[type=time])::-webkit-input-placeholder,.na-input:where(input[type=url])::-webkit-input-placeholder,.na-input:where(input[type=week])::-webkit-input-placeholder,.na-textarea:where(textarea)::-webkit-input-placeholder{color:rgb(var(--gray-5));font-size:var(--font-size-body);line-height:var(--line-height-body)}.na-textarea:where(textarea):where([data-primary]){--color-textarea:var(--primary-6)}.na-input{--color-input:var(--color-input\*-wrapper, var(--outline-color-\*\:focus))}.na-input:where(input:not([type])),.na-input:where(input[type=date]),.na-input:where(input[type=datetime-local]),.na-input:where(input[type=datetime]),.na-input:where(input[type=email]),.na-input:where(input[type=month]),.na-input:where(input[type=number]),.na-input:where(input[type=password]),.na-input:where(input[type=search]),.na-input:where(input[type=tel]),.na-input:where(input[type=text]),.na-input:where(input[type=time]),.na-input:where(input[type=url]),.na-input:where(input[type=week]){flex:1;padding:var(--padding-vertical-input, 4px) var(--padding-horizontal-input, 12px);box-sizing:border-box;border:0;outline:2px solid transparent;border-radius:var(--border-radius-md);font-size:var(--font-size-body);line-height:var(--line-height-body);caret-color:rgb(var(--color-input));background-color:rgb(var(--gray-2));transition:outline-color .3s,box-shadow .3s}.na-input:where(input:not([type])).sm,.na-input:where(input[type=date]).sm,.na-input:where(input[type=datetime-local]).sm,.na-input:where(input[type=datetime]).sm,.na-input:where(input[type=email]).sm,.na-input:where(input[type=month]).sm,.na-input:where(input[type=number]).sm,.na-input:where(input[type=password]).sm,.na-input:where(input[type=search]).sm,.na-input:where(input[type=tel]).sm,.na-input:where(input[type=text]).sm,.na-input:where(input[type=time]).sm,.na-input:where(input[type=url]).sm,.na-input:where(input[type=week]).sm{--padding-vertical-input:0}.na-input:where(input:not([type])).lg,.na-input:where(input[type=date]).lg,.na-input:where(input[type=datetime-local]).lg,.na-input:where(input[type=datetime]).lg,.na-input:where(input[type=email]).lg,.na-input:where(input[type=month]).lg,.na-input:where(input[type=number]).lg,.na-input:where(input[type=password]).lg,.na-input:where(input[type=search]).lg,.na-input:where(input[type=tel]).lg,.na-input:where(input[type=text]).lg,.na-input:where(input[type=time]).lg,.na-input:where(input[type=url]).lg,.na-input:where(input[type=week]).lg{--padding-vertical-input:7px;--font-size-body:var(--font-size-h5);--line-height-body:var(--line-height-h5)}.na-input:where(input:not([type])):focus-visible,.na-input:where(input:not([type])):hover,.na-input:where(input[type=date]):focus-visible,.na-input:where(input[type=date]):hover,.na-input:where(input[type=datetime-local]):focus-visible,.na-input:where(input[type=datetime-local]):hover,.na-input:where(input[type=datetime]):focus-visible,.na-input:where(input[type=datetime]):hover,.na-input:where(input[type=email]):focus-visible,.na-input:where(input[type=email]):hover,.na-input:where(input[type=month]):focus-visible,.na-input:where(input[type=month]):hover,.na-input:where(input[type=number]):focus-visible,.na-input:where(input[type=number]):hover,.na-input:where(input[type=password]):focus-visible,.na-input:where(input[type=password]):hover,.na-input:where(input[type=search]):focus-visible,.na-input:where(input[type=search]):hover,.na-input:where(input[type=tel]):focus-visible,.na-input:where(input[type=tel]):hover,.na-input:where(input[type=text]):focus-visible,.na-input:where(input[type=text]):hover,.na-input:where(input[type=time]):focus-visible,.na-input:where(input[type=time]):hover,.na-input:where(input[type=url]):focus-visible,.na-input:where(input[type=url]):hover,.na-input:where(input[type=week]):focus-visible,.na-input:where(input[type=week]):hover{box-shadow:var(--box-shadow-drop-bottom)}.na-input:where(input:not([type])):focus-visible,.na-input:where(input[type=date]):focus-visible,.na-input:where(input[type=datetime-local]):focus-visible,.na-input:where(input[type=datetime]):focus-visible,.na-input:where(input[type=email]):focus-visible,.na-input:where(input[type=month]):focus-visible,.na-input:where(input[type=number]):focus-visible,.na-input:where(input[type=password]):focus-visible,.na-input:where(input[type=search]):focus-visible,.na-input:where(input[type=tel]):focus-visible,.na-input:where(input[type=text]):focus-visible,.na-input:where(input[type=time]):focus-visible,.na-input:where(input[type=url]):focus-visible,.na-input:where(input[type=week]):focus-visible{outline-color:rgb(var(--color-input))}.na-input:where(input:not([type]))[disabled],.na-input:where(input[type=date])[disabled],.na-input:where(input[type=datetime-local])[disabled],.na-input:where(input[type=datetime])[disabled],.na-input:where(input[type=email])[disabled],.na-input:where(input[type=month])[disabled],.na-input:where(input[type=number])[disabled],.na-input:where(input[type=password])[disabled],.na-input:where(input[type=search])[disabled],.na-input:where(input[type=tel])[disabled],.na-input:where(input[type=text])[disabled],.na-input:where(input[type=time])[disabled],.na-input:where(input[type=url])[disabled],.na-input:where(input[type=week])[disabled]{cursor:not-allowed;background-color:rgb(var(--gray-1));color:rgb(var(--gray-6))}.na-input:where(input:not([type])):where([data-primary]),.na-input:where(input[type=date]):where([data-primary]),.na-input:where(input[type=datetime-local]):where([data-primary]),.na-input:where(input[type=datetime]):where([data-primary]),.na-input:where(input[type=email]):where([data-primary]),.na-input:where(input[type=month]):where([data-primary]),.na-input:where(input[type=number]):where([data-primary]),.na-input:where(input[type=password]):where([data-primary]),.na-input:where(input[type=search]):where([data-primary]),.na-input:where(input[type=tel]):where([data-primary]),.na-input:where(input[type=text]):where([data-primary]),.na-input:where(input[type=time]):where([data-primary]),.na-input:where(input[type=url]):where([data-primary]),.na-input:where(input[type=week]):where([data-primary]){--color-input:var(--primary-6)}.na-input-wrapper:has(.na-input:where(input:not([type]))),.na-input-wrapper:has(.na-input:where(input[type=date])),.na-input-wrapper:has(.na-input:where(input[type=datetime-local])),.na-input-wrapper:has(.na-input:where(input[type=datetime])),.na-input-wrapper:has(.na-input:where(input[type=email])),.na-input-wrapper:has(.na-input:where(input[type=month])),.na-input-wrapper:has(.na-input:where(input[type=number])),.na-input-wrapper:has(.na-input:where(input[type=password])),.na-input-wrapper:has(.na-input:where(input[type=search])),.na-input-wrapper:has(.na-input:where(input[type=tel])),.na-input-wrapper:has(.na-input:where(input[type=text])),.na-input-wrapper:has(.na-input:where(input[type=time])),.na-input-wrapper:has(.na-input:where(input[type=url])),.na-input-wrapper:has(.na-input:where(input[type=week])){background-color:rgb(var(--gray-2))}.na-input-wrapper:has(.na-input-prefix) .na-input:where(input:not([type])),.na-input-wrapper:has(.na-input-prefix) .na-input:where(input[type=date]),.na-input-wrapper:has(.na-input-prefix) .na-input:where(input[type=datetime-local]),.na-input-wrapper:has(.na-input-prefix) .na-input:where(input[type=datetime]),.na-input-wrapper:has(.na-input-prefix) .na-input:where(input[type=email]),.na-input-wrapper:has(.na-input-prefix) .na-input:where(input[type=month]),.na-input-wrapper:has(.na-input-prefix) .na-input:where(input[type=number]),.na-input-wrapper:has(.na-input-prefix) .na-input:where(input[type=password]),.na-input-wrapper:has(.na-input-prefix) .na-input:where(input[type=search]),.na-input-wrapper:has(.na-input-prefix) .na-input:where(input[type=tel]),.na-input-wrapper:has(.na-input-prefix) .na-input:where(input[type=text]),.na-input-wrapper:has(.na-input-prefix) .na-input:where(input[type=time]),.na-input-wrapper:has(.na-input-prefix) .na-input:where(input[type=url]),.na-input-wrapper:has(.na-input-prefix) .na-input:where(input[type=week]){padding-left:calc(var(--padding-horizontal-input, 12px) + var(--font-size-body))}.na-input-wrapper:has(.na-input-suffix) .na-input:where(input:not([type])),.na-input-wrapper:has(.na-input-suffix) .na-input:where(input[type=date]),.na-input-wrapper:has(.na-input-suffix) .na-input:where(input[type=datetime-local]),.na-input-wrapper:has(.na-input-suffix) .na-input:where(input[type=datetime]),.na-input-wrapper:has(.na-input-suffix) .na-input:where(input[type=email]),.na-input-wrapper:has(.na-input-suffix) .na-input:where(input[type=month]),.na-input-wrapper:has(.na-input-suffix) .na-input:where(input[type=number]),.na-input-wrapper:has(.na-input-suffix) .na-input:where(input[type=password]),.na-input-wrapper:has(.na-input-suffix) .na-input:where(input[type=search]),.na-input-wrapper:has(.na-input-suffix) .na-input:where(input[type=tel]),.na-input-wrapper:has(.na-input-suffix) .na-input:where(input[type=text]),.na-input-wrapper:has(.na-input-suffix) .na-input:where(input[type=time]),.na-input-wrapper:has(.na-input-suffix) .na-input:where(input[type=url]),.na-input-wrapper:has(.na-input-suffix) .na-input:where(input[type=week]){padding-right:calc(var(--padding-horizontal-input, 12px) + var(--font-size-body))}.na-input-wrapper{display:inline-flex;min-height:var(--line-height-body);align-items:center;position:relative;border:2px rgb(var(--color-input\*-wrapper, var(--gray-2)));border-radius:var(--border-radius-md)}.na-input-wrapper:where([data-primary]),.na-input-wrapper:where([data-validate]){--color-input\*-wrapper:var(--primary-6)}.na-input-wrapper:where([data-primary]):has([type=button]:not(.na-input-prefix):not(.na-input-suffix)),.na-input-wrapper:where([data-primary]):has([type=reset]:not(.na-input-prefix):not(.na-input-suffix)),.na-input-wrapper:where([data-primary]):has([type=submit]:not(.na-input-prefix):not(.na-input-suffix)),.na-input-wrapper:where([data-primary]):has(button:not(.na-input-prefix):not(.na-input-suffix)),.na-input-wrapper:where([data-validate]):has([type=button]:not(.na-input-prefix):not(.na-input-suffix)),.na-input-wrapper:where([data-validate]):has([type=reset]:not(.na-input-prefix):not(.na-input-suffix)),.na-input-wrapper:where([data-validate]):has([type=submit]:not(.na-input-prefix):not(.na-input-suffix)),.na-input-wrapper:where([data-validate]):has(button:not(.na-input-prefix):not(.na-input-suffix)){background-color:rgb(var(--color-input\*-wrapper))}.na-input-wrapper>*{display:inline-flex;align-items:center}.na-input-wrapper [type=button],.na-input-wrapper button{cursor:pointer;border-radius:calc(var(--border-radius-md) - 2px);outline:2px solid transparent;padding:6px;border:0;background:0 0}.na-input-wrapper [type=button]:focus-visible,.na-input-wrapper button:focus-visible{outline-color:rgb(var(--color-input\*-wrapper, var(--black)))}.na-input-wrapper:where([data-primary]) [type=button],.na-input-wrapper:where([data-primary]) button{color:rgb(var(--white))}.na-input-wrapper [type=button][disabled],.na-input-wrapper button[disabled]{cursor:not-allowed}.na-input-wrapper [type=reset]{cursor:pointer;border-radius:calc(var(--border-radius-md) - 2px);outline:2px solid transparent;padding:6px;border:0;background:0 0}.na-input-wrapper [type=reset]:focus-visible{outline-color:rgb(var(--color-input\*-wrapper, var(--black)))}.na-input-wrapper:where([data-primary]) [type=reset]{color:rgb(var(--white))}.na-input-wrapper [type=reset][disabled]{cursor:not-allowed}.na-input-wrapper [type=submit]{cursor:pointer;border-radius:calc(var(--border-radius-md) - 2px);outline:2px solid transparent;padding:6px;border:0;background:0 0}.na-input-wrapper [type=submit]:focus-visible{outline-color:rgb(var(--color-input\*-wrapper, var(--black)))}.na-input-wrapper:where([data-primary]) [type=submit]{color:rgb(var(--white))}.na-input-wrapper [type=submit][disabled]{cursor:not-allowed}.na-input-wrapper .na-input-prefix,.na-input-wrapper .na-input-suffix{position:absolute;top:0;bottom:0;margin:auto 0;z-index:1;color:rgb(var(--color-input\*-wrapper, var(--black)));padding:0}.na-input-wrapper .na-input-prefix{left:calc(var(--padding-horizontal-input, 12px)/2)}.na-input-wrapper .na-input-suffix{right:calc(var(--padding-horizontal-input, 12px)/2)}.na-menu{margin:0 1em;padding:0;display:flex;flex-direction:column;gap:.5em}.na-menu:where(menu),.na-menu:where(ul){list-style:none}.na-menu:where(details){margin:0}.na-menu:where(details):not([open]){gap:0}.na-menu:where(details)>summary::-webkit-details-marker{display:none}.na-menu:where(details)>summary::-moz-list-bullet{display:none}.na-menu:where(details)>summary::marker{display:none}.na-menu summary,.na-menu-submenu{display:flex;flex-direction:column;gap:.5em}.na-menu-submenu:where([data-folded]){gap:0}.na-menu-submenu-title{display:flex;justify-content:space-between;align-items:center;cursor:alias;line-height:var(--line-height-body);padding:var(--padding-vertical-menu-item, 0.5em) var(--padding-horizontal-menu-item, 1em)}.na-menu-submenu-title-arrow{position:relative;display:inline-block;width:10px;transform:translateY(-50%);transition:margin-top .3s}.na-menu-submenu-title-arrow:after,.na-menu-submenu-title-arrow:before{position:absolute;width:6px;height:1.5px;background-color:currentColor;border-radius:2px;transition:transform .3s;content:""}.na-menu-submenu-title-arrow:before,.na-menu:where(details)[open] .na-menu-submenu-title-arrow:before{transform:rotate(-45deg) translate(2.5px)}.na-menu-submenu-title-arrow:after,.na-menu:where(details)[open] .na-menu-submenu-title-arrow:after{transform:rotate(45deg) translate(-2.5px)}.na-menu-submenu[data-folded] .na-menu-submenu-title-arrow,.na-menu:where(details):not([open]) .na-menu-submenu-title-arrow{margin-top:-5px}.na-menu-submenu[data-folded] .na-menu-submenu-title-arrow:before,.na-menu:where(details):not([open]) .na-menu-submenu-title-arrow:before{transform:rotate(45deg) translate(2.5px)}.na-menu-submenu[data-folded] .na-menu-submenu-title-arrow:after,.na-menu:where(details):not([open]) .na-menu-submenu-title-arrow:after{transform:rotate(-45deg) translate(-2.5px)}.na-menu-item,.na-menu-item-link{display:flex;align-items:center;border-radius:var(--border-radius-md)}.na-menu-item{position:relative;height:calc(var(--line-height-body) + 2*var(--padding-vertical-menu-item, 0.5em));line-height:var(--line-height-body);text-indent:var(--padding-horizontal-menu-item, 1em);background-color:rgb(var(--background-color-menu-item, from transparent r g b/alpha));color:rgb(var(--color-menu-item, var(--black)))}.na-menu-item-link{position:absolute;inset:0;cursor:pointer;text-decoration:none;color:currentColor}.na-menu-item:where([data-active]),.na-menu-item:where([data-selected]){cursor:auto;background-color:rgb(var(--background-color-menu-item\:active, var(--color-menu, var(--primary-6))));color:rgb(var(--color-menu-item\:active, var(--white)))}.na-menu-item:not(.na-menu-item[data-active]):not(.na-menu-item[data-selected]):hover{background-color:rgb(var(--background-color-menu-item\:hover, from transparent r g b/alpha));color:rgb(var(--color-menu-item\:hover, var(--color-menu, var(--primary-6))))}.na-menu-submenu:where([data-folded]) .na-menu{flex-basis:0;overflow:hidden}.na-message-queue{top:16px;left:0;right:0;z-index:10000;position:fixed;height:0;overflow:visible;display:flex;flex-direction:column;align-items:center;color:rgb(var(--gray-10))}.na-message{--background-color-message:var(--white);--color-message:var(--black);border-radius:var(--border-radius-md);padding:8px;color:rgb(var(--color-message));background-color:rgb(var(--background-color-message));box-shadow:var(--box-shadow-drop-bottom);margin:4px}.na-message .na-paragraph{max-width:60vw;margin:0}.na-paragraph>.na-message-prefix{width:16px;height:16px;vertical-align:middle}.na-paragraph>.na-message-prefix:where([data-primary]){color:rgb(var(--primary-6))}.na-paragraph>.na-message-prefix+*{vertical-align:middle}.na-message:where([data-primary]){--color-message:var(--white);--background-color-message:var(--primary-5);--box-shadow-color:var(--primary-4)}.na-panel{font-size:var(--font-size-body);line-height:var(--line-height-body)}.na-panel:where(:not([data-primary])){--color-panel:var(--white)}.na-panel>summary{display:flex;justify-content:space-between;align-items:center;background:rgb(var(--color-panel, var(--primary-1)));padding:8px 8px 8px 18px;border-left:8px solid rgb(var(--color-panel, var(--primary-1)));position:relative;color:inherit;list-style:none}.na-panel>summary::-webkit-details-marker{display:none}.na-panel>summary::-moz-list-bullet{display:none}.na-panel>summary::marker{display:none}.na-panel>summary::before{content:"";position:absolute;width:18px;height:18px;top:0;bottom:0;left:0;margin:auto 0;background-color:currentColor;transition:transform .3s}.na-panel:where(:not([data-marker])) summary::before{mask:var(--mask-panel-marker, url("data:image/svg+xml;utf8,<svg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg' stroke='currentColor' stroke-width='4'><path d='M34.8287 23.0629C35.4292 23.5433 35.4292 24.4566 34.8287 24.937L17.9496 38.4402C17.1639 39.0688 16 38.5094 16 37.5032L16 10.4967C16 9.49048 17.1639 8.93107 17.9496 9.55964L34.8287 23.0629Z' fill='currentColor'/></svg>")) no-repeat center center/12px 12px}.na-panel:where([data-marker=">"]) summary::before{mask:url("data:image/svg+xml;utf8,<svg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg' stroke='currentColor' stroke-width='4'><path d='M16 39.5127L31.5563 23.9563C31.5563 23.9563 20.6944 13.0944 16 8.4'/></svg>")no-repeat center center/12px 12px}.na-panel[open] summary{margin-bottom:4px}.na-panel[open] summary::before{transform:rotate(90deg)}.na-panel summary+*{display:grid;background:rgb(var(--color-panel, var(--primary-1)));padding:8px 12px;color:inherit}.na-pre{overflow-x:auto;background-color:rgb(var(--background-color-pre, var(--gray-1))/.8);padding:calc(var(--font-offset-parent) + .5em) 1em;margin:1rem 0;border-radius:var(--border-radius-md)}:root[data-theme=dark] .na-pre{background-color:rgb(var(--background-color-pre-dark, var(--gray-1))/.8)}.na-pre>.na-code{white-space:inherit;font-size:var(--font-size-1);line-height:var(--font-size-3);background-color:unset;padding:unset;border:unset;color:unset}.na-pre>.na-code *{color:rgb(var(--color-code, var(--gray-8)))}:root[data-theme=dark] .na-pre>.na-code *{color:rgb(var(--color-code-dark, var(--gray-8)))}.na-radio{min-height:var(--line-height-body);position:relative;display:inline-flex}.na-radio .na-input:where(input[type=radio]){border:0;width:16px;height:16px;top:0;bottom:0;margin:auto 0;position:absolute;z-index:1;opacity:0;cursor:pointer}.na-input:where(input[type=radio]):disabled+.na-radio-label[for],.na-radio .na-input:where(input[type=radio]):disabled{cursor:not-allowed}.na-input-wrapper:has(.na-radio .na-input:where(input[type=radio])){gap:8px}.na-radio-label{padding-left:var(--indent-radio, 1.4em);min-width:2px;min-height:1em;position:relative;display:inline-flex;align-items:center}.na-radio-label[for]{cursor:pointer}.na-input:where(input[type=radio]):focus-visible+.na-radio-label{outline:2px solid rgb(var(--color-input\*-wrapper, var(--outline-color-\*\:focus)));border-radius:var(--border-radius-sm)}.na-input:where(input[type=radio]):disabled+.na-radio-label{color:rgb(var(--gray-6))}.na-radio-label::before{content:"";width:16px;height:16px;box-sizing:border-box;border:2px solid rgb(var(--gray-4));border-radius:8px;position:absolute;left:0;background-color:rgb(var(--white));transition:border-color .3s,border-width .1s}.na-input:where(input[type=radio]):not(:disabled):hover+.na-radio-label::before{border-color:rgb(var(--color-radio, var(--primary-6)))}.na-input:where(input[type=radio]):checked+.na-radio-label::before{border-width:5px;border-color:rgb(var(--color-radio, var(--primary-6)))}.na-input:where(input[type=radio]):checked:disabled+.na-radio-label::before{border-color:rgb(var(--color-radio\:disabled, var(--primary-3)))}.na-input:where(input[type=radio]):disabled+.na-radio-label::before{background-color:rgb(var(--gray-1))}.na-input:where(input[type=radio]):disabled:not(:checked)+.na-radio-label::before{background-color:rgb(var(--gray-2))}.na-select{--color-select:var(--color-input\*-wrapper, var(--outline-color-\*\:focus));flex:1;align-items:center;padding:var(--padding-vertical-select, 4px) var(--padding-horizontal-select, 12px);appearance:base-select;box-sizing:border-box;border:0;outline:2px solid transparent;border-radius:var(--border-radius-md);font-size:var(--font-size-body);line-height:var(--line-height-body);background-color:rgb(var(--gray-2));transition:outline-color .3s,box-shadow .3s}.na-select.sm{--padding-vertical-select:0}.na-select.lg{--padding-vertical-select:7px;--font-size-body:var(--font-size-h5);--line-height-body:var(--line-height-h5)}.na-select:where([data-primary]){--color-select:var(--primary-6)}.na-select:hover{box-shadow:var(--box-shadow-drop-bottom)}.na-select:focus-visible,.na-select:open{outline-color:rgb(var(--color-select));box-shadow:var(--box-shadow-drop-bottom)}.na-select[disabled]{cursor:not-allowed;background-color:rgb(var(--gray-1));color:rgb(var(--gray-6))}.na-select[disabled]:hover{box-shadow:none}.na-select optgroup{display:grid;gap:2px;line-height:calc(var(--line-height-body) + 8px)}.na-select option{padding:var(--padding-vertical-select, 4px) var(--padding-horizontal-select, 12px);line-height:var(--line-height-body);border-radius:var(--border-radius-md);outline:2px solid transparent}.na-select option:focus-visible,.na-select option:hover{color:rgb(var(--primary-6));background-color:rgb(var(--primary-1))}.na-select option:focus-visible{outline-color:rgb(var(--color-select))}.na-select option:focus-visible[data-primary]{outline-color:rgb(var(--primary-6))}.na-select option:checked{color:rgb(var(--white));background-color:rgb(var(--primary-5))}.na-select option:checked:focus-visible{outline-color:rgb(var(--outline-color-\*\:focus))}.na-select::picker(select){border:0;margin:8px 0;border-radius:var(--border-radius-md);box-shadow:var(--box-shadow-drop-bottom);appearance:base-select;background:rgb(var(--white));padding:4px;gap:4px}.na-select:open::picker(select){display:grid}.na-select:where(:has(selectedcontent))::picker-icon{display:none}.na-select button{color:rgb(var(--black))}.na-select selectedcontent{flex:1}.na-switch{--size-switch-mover:calc(var(--size-switch, 22px) - 2 * var(--padding-switch, 2px));display:inline-flex;position:relative;font-size:calc(var(--size-switch-mover) - var(--font-offset-parent));height:var(--size-switch, 22px);width:calc(var(--size-switch, 22px)*2);border-radius:calc((var(--size-switch, 22px)/2))}.na-switch.sm{--size-switch:16px}.na-switch-mover{z-index:1;overflow:hidden;border-radius:50%;background-color:rgb(var(--color-switch-mover, var(--gray-2)));outline:2px solid transparent;will-change:filter}.na-switch-slot{position:absolute;z-index:0;font-size:0;background-color:rgb(var(--color-switch, var(--gray-4)));transition:background-color 1s,box-shadow .5s;inset:0;border-radius:calc((var(--size-switch, 22px)/2))}.na-switch .na-input:where(input[type=checkbox]),.na-switch-mover{cursor:pointer;position:absolute;display:flex;align-items:center;justify-content:center;margin:0;left:var(--padding-switch, 2px);top:var(--padding-switch, 2px);bottom:var(--padding-switch, 2px);width:var(--size-switch-mover);height:var(--size-switch-mover);transition:all .5s}.na-switch .na-input:where(input[type=checkbox]){opacity:0;z-index:2}.na-switch[data-wider-trigger] .na-input:where(input[type=checkbox]){inset:0!important;width:calc(var(--size-switch, 22px)*2);height:var(--size-switch, 22px)}.na-input:where(input[type=checkbox]):focus-visible~.na-switch-mover{outline:2px solid rgb(var(--color-input\*-wrapper, var(--outline-color-\*\:focus)))}.na-input:where(input[type=checkbox]):disabled~.na-switch-mover,.na-switch .na-input:where(input[type=checkbox]):disabled{cursor:not-allowed}.na-input:where(input[type=checkbox]):disabled~.na-switch-slot{background-color:rgb(var(--color-switch\:disabled, var(--gray-1)))}.na-input:where(input[type=checkbox]):checked:disabled~.na-switch-slot{background-color:rgb(var(--color-switch\:checked\:disabled, var(--primary-3)))}.na-input:where(input[type=checkbox]):checked~.na-switch-mover,.na-switch .na-input:where(input[type=checkbox]):checked{left:calc(var(--size-switch, 22px) + var(--padding-switch, 2px))}.na-input:where(input[type=checkbox]):checked~.na-switch-slot{background-color:rgb(var(--color-switch\:checked, var(--primary-6)))}.na-input:where(input[type=checkbox]):not(:disabled)~.na-switch-mover:hover,.na-switch .na-input:where(input[type=checkbox]):not(:disabled):hover~.na-switch-mover{filter:drop-shadow(0 0 var(--padding-switch, 2px) rgb(var(--box-shadow-color-switch, var(--color-switch\:checked, var(--primary-6)))));box-shadow:0 0 var(--box-shadow-width-switch, var(--padding-switch, 2px)) var(--box-shadow-width-switch, var(--padding-switch, 2px)) rgb(var(--box-shadow-color-switch, var(--color-switch\:checked, var(--primary-6)))/25%)}.na-input:where(input[type=checkbox]):not(:disabled)~.na-switch-slot:hover,.na-switch .na-input:where(input[type=checkbox]):not(:disabled):hover~.na-switch-slot{box-shadow:inset 0 0 var(--padding-switch, 2px) var(--padding-switch, 2px) rgb(var(--box-shadow-color-switch, var(--color-switch\:checked, var(--primary-6)))/25%)}.na-input:where(input[type=checkbox]):not(:disabled):checked~.na-switch-mover:hover,.na-switch .na-input:where(input[type=checkbox]):not(:disabled):checked:hover~.na-switch-mover{filter:drop-shadow(0 0 var(--padding-switch, 2px) rgb(var(--box-shadow-color-switch\:checked, var(--color-switch, var(--gray-4)))));box-shadow:0 0 var(--box-shadow-width-switch, var(--padding-switch, 2px)) var(--box-shadow-width-switch, var(--padding-switch, 2px)) rgb(var(--box-shadow-color-switch\:checked, var(--color-switch, var(--gray-4)))/25%)}.na-input:where(input[type=checkbox]):not(:disabled):checked~.na-switch-slot:hover,.na-switch .na-input:where(input[type=checkbox]):not(:disabled):checked:hover~.na-switch-slot{box-shadow:inset 0 0 var(--padding-switch, 2px) var(--padding-switch, 2px) rgb(var(--box-shadow-color-switch\:checked, var(--color-switch, var(--gray-4)))/25%)}

package/lib/common/font.styl

@@ -0,0 +1,39 @@
+@font-face
+    font-family Emoji
+    src local('Apple Color Emoji'), local('Segoe UI Emoji'), local('Segoe UI Symbol'), local('Noto Color Emoji')
+    unicode-range U+1F000-1F644, U+203C-3299
+
+_set_font_base()
+    font-family var(--font-family-base, 'system-ui', '—apple-system', 'Segoe UI', 'Rototo', 'Emoji', 'Helvetica', 'Arial', 'sans-serif')
+_set_font_serif()
+    font-family var(--font-family-serif, var(--font-family-base, 'Georgia', 'Cambria', 'Times New Roman', 'Times', 'serif'))
+_set_font_mono()
+    font-family var(--font-family-mono, var(--font-family-base, 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', 'monospace'))
+
+:root // 兜底
+    font-size var(--font-size-body)
+    _set_font_base()
+.{prefix}-font-serif // 衬线
+    _set_font_serif()
+.{prefix}-font-mono // 等宽
+    _set_font_mono()
+
+.{prefix}-button
+.{prefix}-input
+.{prefix}-texrarea
+.{prefix}-select
+    font-family inherit
+    font-style inherit
+    font-weight inherit
+
+.{prefix}-kbd
+.{prefix}-pre
+.{prefix}-code
+    _set_font_mono()
+
+.{prefix}-cannot-select // 无法选中和拖拽
+    user-drag none
+    user-select none
+*::selection // 被选中
+    background-color rgb(var(--background-color-selection, var(--primary-9)))
+    color rgb(var(--color-selection, var(--primary-1)))

package/lib/common/layout.styl

@@ -0,0 +1,56 @@
+.{prefix}-layout
+    display flex
+    flex-direction column
+    flex 1
+    --box-shadow-color var(--gray-6)
+    &:where([data-has-aside])
+        position relative
+        flex-direction row
+    &-content
+        position relative
+        z-index 0
+        flex 1
+        overflow-x hidden
+    &-aside
+        // --width-aside: unset
+        width var(--width-aside, unset)
+        overflow-x hidden
+        background-color rgb(var(--background-color-aside, var(--white)))
+        z-index 1000
+        top 0
+        bottom 0
+        
+        &:first-child
+            --box-shadow-color @--box-shadow-color
+            box-shadow var(--box-shadow-divider-right)
+        &:last-child
+            --box-shadow-color @--box-shadow-color
+            box-shadow var(--box-shadow-divider-left)
+        &:where([data-float])
+            position absolute
+        &:where([data-folded])
+        &:where([data-collapsed])
+            padding-left 0
+            padding-right 0
+            border-left 0
+            border-right 0
+        &:where([data-folded])
+            /**
+             * 折叠 无动画的收起
+             */
+            flex 0
+        &:where([data-collapsed])
+            /**
+             * 塌陷 有动画的收起
+             */
+            width 0
+        transition width .3s, padding-left .3s, padding-right .3s, border-left .3s, border-right .3s
+
+    &-header
+        box-shadow var(--box-shadow-divider-bottom)
+    &-footer
+        box-shadow var(--box-shadow-divider-top)
+    &-header
+    &-footer
+        --box-shadow-color @--box-shadow-color
+        

package/lib/common/watermark.styl

@@ -0,0 +1,16 @@
+.{prefix}-watermark
+    // --opacity-watermark 0.1
+
+    position relative
+    &::after
+        pointer-events none
+        content ''
+        position absolute
+        inset 0
+        // background-image url('/docs/assets/images/watermark.svg')
+        background var(--background-watermark, url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 40' width='80' height='40'><path fill='%23808080' d='M0 40a19.96 19.96 0 0 1 5.9-14.11 20.17 20.17 0 0 1 19.44-5.2A20 20 0 0 1 20.2 40H0zM65.32.75A20.02 20.02 0 0 1 40.8 25.26 20.02 20.02 0 0 1 65.32.76zM.07 0h20.1l-.08.07A20.02 20.02 0 0 1 .75 5.25 20.08 20.08 0 0 1 .07 0zm1.94 40h2.53l4.26-4.24v-9.78A17.96 17.96 0 0 0 2 40zm5.38 0h9.8a17.98 17.98 0 0 0 6.67-16.42L7.4 40zm3.43-15.42v9.17l11.62-11.59c-3.97-.5-8.08.3-11.62 2.42zm32.86-.78A18 18 0 0 0 63.85 3.63L43.68 23.8zm7.2-19.17v9.15L62.43 2.22c-3.96-.5-8.05.3-11.57 2.4zm-3.49 2.72c-4.1 4.1-5.81 9.69-5.13 15.03l6.61-6.6V6.02c-.51.41-1 .85-1.48 1.33zM17.18 0H7.42L3.64 3.78A18 18 0 0 0 17.18 0zM2.08 0c-.01.8.04 1.58.14 2.37L4.59 0H2.07z'/></svg>"))
+        border-radius var(--border-radius-watermark, unset)
+        mix-blend-mode multiply
+        opacity var(--opacity-watermark, 0.1)
+        /:root[data-theme=dark] &
+            mix-blend-mode exclusion

package/lib/components/badge.styl

@@ -0,0 +1,47 @@
+@keyframes badge-processing
+    0%
+        transform scale(1)
+        opacity 0.5
+    to
+        transform scale(3)
+        opacity 0
+
+
+.{prefix}-badge
+    
+    // --weight-badge-processing 1px
+    // --margin-badge 0.3em
+    // --indent-badge 1.2em
+    
+    // --color-badge var(--primary-6)
+
+    width fit-content
+    white-space nowrap
+    display inline-flex
+    align-items center
+    justify-content center
+    // text-indent var(--indent-badge) // IOS不支持 改用padding-left
+    padding-left var(--indent-badge, 1.2em) 
+    position relative
+    &::before
+        content ''
+        position absolute
+        border-radius 50%
+        top 0
+        bottom 0
+        left 0
+        aspect-ratio 1 / 1
+        clip-path inset(var(--margin-badge, .3em) round 50%)
+        background-color rgb(var(--color-badge, var(--primary-6)))
+    &:where([data-processing])::after
+        content ''
+        box-sizing border-box
+        position absolute
+        top var(--margin-badge, .3em)
+        bottom @top
+        left @top
+        aspect-ratio 1 / 1 // 加上border后 IOS上显示不正确 会比1：1宽一个border距离 导致椭圆形波纹 改用outline后正常
+        border-radius 50%
+        // border var(--weight-badge-processing) solid rgb(var(--color-badge))
+        outline var(--weight-badge-processing, 1px) solid rgb(var(--color-badge, var(--primary-6)))
+        animation badge-processing 1.2s ease-in-out infinite

package/lib/components/button.styl

@@ -0,0 +1,169 @@
+/**
+ * @init 初始背景色
+ * @transparent 透过的按钮当前颜色
+ *
+ * 当 变量 --percent-button-ripple 从 0% -> 100% 时 按钮当前颜色从中心扩散
+ * 一般来说 按钮当前颜色要比初始背景色要深
+ *
+ */
+button_background_color_init(background_color)
+    background-color background_color
+    background-image radial-gradient(circle, 
+        transparent 0%,
+        transparent var(--percent-button-ripple),
+        background_color var(--percent-button-ripple), 
+        background_color 100%
+    )
+
+
+.{prefix}-button
+    /:root
+        // --padding--button 5px 12px
+        @property --percent-button-ripple
+            syntax '<percentage>'
+            inherits false
+            initial-value 100%
+            
+
+    --color-button var(--white)
+    {_get_var_by("color-button\:disabled")} var(--white)
+    --background-color-button var(--primary-5)
+    {_get_var_by("background-color-button\:focus")} var(--primary-6)
+    {_get_var_by("background-color-button\:disabled")} var(--primary-2)
+
+    /**
+     * 不使用主题
+     */
+    &:where(:not([data-primary]))
+        // color unset // 在Safari中是蓝色？
+        --color-button var(--gray-10)
+        {_get_var_by("color-button\:disabled")} var(--gray-5)
+        --background-color-button var(--gray-2)
+        {_get_var_by("background-color-button\:focus")} var(--gray-3)
+        {_get_var_by("background-color-button\:disabled")} var(--gray-1)
+    
+    cursor pointer
+    user-select none
+    display inline-flex
+    justify-content center
+    align-items center
+    padding var(--padding-vertical-button, 5px) var(--padding-horizontal-button, 12px)
+    font-size var(--font-size-body)
+    height fit-content
+    line-height var(--line-height-body)
+    min-height var(--line-height-body)
+    outline 2px solid transparent
+    box-sizing content-box
+    border none
+    border-radius var(--border-radius-md)
+
+
+    transition --percent-button-ripple .5s, box-shadow .3s
+    transition-timing-function ease-in
+
+    button_background_color_init rgb(var(--background-color-button))
+    
+
+    &:focus-visible
+        outline-color rgb(var(_get_var_by("outline-color-\*\:focus")))
+    
+    &:not([disabled]):hover
+        box-shadow var(--box-shadow-drop-bottom)
+    
+    &[disabled]
+        cursor not-allowed
+        color rgb(var(_get_var_by("color-button\:disabled")))
+        &::-ms-browse
+            color rgb(var(_get_var_by("color-button\:disabled")))
+        &::-webkit-file-upload-button
+            color rgb(var(_get_var_by("color-button\:disabled")))
+        &::file-selector-button
+            color rgb(var(_get_var_by("color-button\:disabled")))
+        background-color rgb(var(_get_var_by("background-color-button\:disabled")))
+    
+    &:not([disabled]):focus
+        background-color rgb(var(_get_var_by("background-color-button\:focus")))
+    
+    &:not([disabled]):active
+        --percent-button-ripple 0%
+        transition none
+        background-color rgb(var(_get_var_by("background-color-button\:focus")))
+
+
+    &.sm
+        // --padding-button 1px 8px
+        --padding-vertical-button 1px
+        --padding-horizontal-button 8px
+        --font-size-body var(--font-size-base)
+        --line-height-body var(--line-height-base)
+        border-radius var(--border-radius-sm)
+    
+    &.lg
+        // --padding-button 8px 16px
+        --padding-vertical-button 8px
+        --padding-horizontal-button 16px
+        --font-size-body var(--font-size-h5)
+        --line-height-body var(--line-height-h5)
+    
+    &:where([data-round])
+    &:where([data-square])
+        aspect-ratio 1 / 1
+        overflow hidden
+        --padding-vertical-button var(--padding-horizontal-button, 12px)
+    &:where([data-round])
+        border-radius 50%
+    &:where([data-square])
+        @supports (background paint(smooth-corners)) 
+            &
+                border-radius unset
+                mask paint(smooth-corners)
+            
+
+    color rgb(var(--color-button))
+    &::-ms-browse
+        color rgb(var(--color-button))
+    &::-webkit-file-upload-button
+        color rgb(var(--color-button))
+    &::file-selector-button
+        color rgb(var(--color-button))
+    
+
+    // 文件上传
+    /.{prefix}-input-wrapper
+
+        &:has(input[type=file].{prefix}-input^[0])
+            .{prefix}-input-prefix
+                pointer-events none
+                transform translateX(.4em)
+        &:has(input[type=file].{prefix}-input^[0][data-primary])
+        &:has(input[type=file].{prefix}-input^[0]:disabled)
+            .{prefix}-input-prefix
+                color rgb(var(--white))
+        
+        .{prefix}-input:where(input[type=file])^[0]
+            font-size 0
+            max-height @line-height
+            uploader-button()
+                font-size var(--font-size-body)
+                line-height var(--line-height-body)
+                padding 0
+                border none
+                background-color transparent
+                outline none
+                margin 0 .2em
+                ^[1]:has(.{prefix}-input-prefix) & // & 這裏相當於 ^[-2..-1]
+                    margin 0 .4em 0 0 // 兼容右侧边距即使是0也会显示宽度的特性
+                
+            &::-ms-browse
+                uploader-button()
+            &::-webkit-file-upload-button
+                uploader-button()
+            &::file-selector-button
+                uploader-button()
+            
+            ^[1]:has(.{prefix}-input-prefix) & // & 這裏相當於 ^[-2..-1]
+                padding-left calc(var(--padding-horizontal-button, 12px) + 1.5 * var(--font-size-body))
+            
+            
+            &+label
+                cursor pointer