cladux-html 0.1.0 → 0.3.0

package/cl.css

@@ -1,2 +1,2246 @@
-/*! cladux-html v0.1.0 | Apache-2.0 | https://cladux.vercel.app/docs/html */
-@layer cl.base,cl.components,cl.utilities;:root{--radius: .625rem;--background: oklch(1 0 0);--foreground: oklch(.145 0 0);--card: oklch(1 0 0);--card-foreground: oklch(.145 0 0);--popover: oklch(1 0 0);--popover-foreground: oklch(.145 0 0);--primary: oklch(.205 0 0);--primary-foreground: oklch(.985 0 0);--secondary: oklch(.97 0 0);--secondary-foreground: oklch(.205 0 0);--muted: oklch(.97 0 0);--muted-foreground: oklch(.556 0 0);--accent: oklch(.97 0 0);--accent-foreground: oklch(.205 0 0);--destructive: oklch(.577 .245 27.325);--border: oklch(.922 0 0);--input: oklch(.922 0 0);--ring: oklch(.708 0 0);--chart-1: oklch(.87 0 0);--chart-2: oklch(.556 0 0);--chart-3: oklch(.439 0 0);--chart-4: oklch(.371 0 0);--chart-5: oklch(.269 0 0);--sidebar: oklch(.985 0 0);--sidebar-foreground: oklch(.145 0 0);--sidebar-primary: oklch(.205 0 0);--sidebar-primary-foreground: oklch(.985 0 0);--sidebar-accent: oklch(.97 0 0);--sidebar-accent-foreground: oklch(.205 0 0);--sidebar-border: oklch(.922 0 0);--sidebar-ring: oklch(.708 0 0)}.dark,[data-theme=dark]{--background: oklch(.145 0 0);--foreground: oklch(.985 0 0);--card: oklch(.205 0 0);--card-foreground: oklch(.985 0 0);--popover: oklch(.205 0 0);--popover-foreground: oklch(.985 0 0);--primary: oklch(.922 0 0);--primary-foreground: oklch(.205 0 0);--secondary: oklch(.269 0 0);--secondary-foreground: oklch(.985 0 0);--muted: oklch(.269 0 0);--muted-foreground: oklch(.708 0 0);--accent: oklch(.269 0 0);--accent-foreground: oklch(.985 0 0);--destructive: oklch(.704 .191 22.216);--border: oklch(1 0 0 / 10%);--input: oklch(1 0 0 / 15%);--ring: oklch(.556 0 0);--chart-1: oklch(.87 0 0);--chart-2: oklch(.556 0 0);--chart-3: oklch(.439 0 0);--chart-4: oklch(.371 0 0);--chart-5: oklch(.269 0 0);--sidebar: oklch(.205 0 0);--sidebar-foreground: oklch(.985 0 0);--sidebar-primary: oklch(.488 .243 264.376);--sidebar-primary-foreground: oklch(.985 0 0);--sidebar-accent: oklch(.269 0 0);--sidebar-accent-foreground: oklch(.985 0 0);--sidebar-border: oklch(1 0 0 / 10%);--sidebar-ring: oklch(.556 0 0)}@layer cl.base{*,*:before,*:after{box-sizing:border-box;border:0 solid var(--border);outline-color:color-mix(in oklab,var(--ring) 50%,transparent)}*{margin:0;padding:0}html{-webkit-text-size-adjust:100%;text-size-adjust:100%;font-family:var( --font-sans, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji" );line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{min-height:100dvh;background-color:var(--background);color:var(--foreground)}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit;color:inherit;background-color:transparent}button{cursor:pointer}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit;text-wrap:balance;overflow-wrap:break-word}p{text-wrap:pretty;overflow-wrap:break-word}a{color:inherit;text-decoration:inherit}code,kbd,samp,pre{font-family:var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace)}}@layer cl.components{.cl-popover,.cl-menu,.cl-tooltip{--_slide: .5rem;position:fixed;inset:auto;z-index:50;margin:0;border:0 solid var(--border);overflow:visible;opacity:0;scale:.95;transition-property:opacity,scale,translate,display,overlay;transition-duration:.1s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-behavior:allow-discrete}.cl-popover:popover-open,.cl-menu:popover-open,.cl-tooltip:popover-open{opacity:1;scale:1}@starting-style{.cl-popover:popover-open,.cl-menu:popover-open,.cl-tooltip:popover-open{opacity:0;scale:.95}:is(.cl-popover,.cl-menu,.cl-tooltip):popover-open[data-placed=bottom]{translate:0 calc(var(--_slide) * -1)}:is(.cl-popover,.cl-menu,.cl-tooltip):popover-open[data-placed=top]{translate:0 var(--_slide)}:is(.cl-popover,.cl-menu,.cl-tooltip):popover-open[data-placed=left]{translate:var(--_slide) 0}:is(.cl-popover,.cl-menu,.cl-tooltip):popover-open[data-placed=right]{translate:calc(var(--_slide) * -1) 0}}}@layer cl.components{.cl-badge{--_ring: color-mix(in oklab, var(--ring) 50%, transparent);display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;gap:.25rem;width:fit-content;height:1.25rem;overflow:hidden;padding:.125rem .5rem;border:1px solid transparent;border-radius:calc(var(--radius) * 2.6);font-size:.75rem;line-height:1rem;font-weight:500;white-space:nowrap;text-decoration:none;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.cl-badge:has([data-icon=inline-start]){padding-inline-start:.375rem}.cl-badge:has([data-icon=inline-end]){padding-inline-end:.375rem}.cl-badge>svg{pointer-events:none;width:.75rem!important;height:.75rem!important}.cl-badge:not([data-variant]),.cl-badge[data-variant=default]{background-color:var(--primary);color:var(--primary-foreground)}.cl-badge[data-variant=secondary]{background-color:var(--secondary);color:var(--secondary-foreground)}.cl-badge[data-variant=destructive]{--_ring: color-mix(in oklab, var(--destructive) 20%, transparent);background-color:color-mix(in oklab,var(--destructive) 10%,transparent);color:var(--destructive)}.cl-badge[data-variant=outline]{border-color:var(--border);color:var(--foreground)}.cl-badge[data-variant=link]{color:var(--primary);text-underline-offset:4px}@media(hover:hover){a.cl-badge:not([data-variant]):hover,a.cl-badge[data-variant=default]:hover{background-color:color-mix(in oklab,var(--primary) 80%,transparent)}a.cl-badge[data-variant=secondary]:hover{background-color:color-mix(in oklab,var(--secondary) 80%,transparent)}a.cl-badge[data-variant=destructive]:hover{background-color:color-mix(in oklab,var(--destructive) 20%,transparent)}a.cl-badge[data-variant=outline]:hover,.cl-badge[data-variant=ghost]:hover{background-color:var(--muted);color:var(--muted-foreground)}.cl-badge[data-variant=link]:hover{text-decoration-line:underline}}:where(.dark,[data-theme=dark]) .cl-badge[data-variant=destructive]{--_ring: color-mix(in oklab, var(--destructive) 40%, transparent);background-color:color-mix(in oklab,var(--destructive) 20%,transparent)}@media(hover:hover){:where(.dark,[data-theme=dark]) .cl-badge[data-variant=ghost]:hover{background-color:color-mix(in oklab,var(--muted) 50%,transparent)}}.cl-badge:focus-visible{border-color:var(--ring);box-shadow:0 0 0 3px var(--_ring)}.cl-badge[aria-invalid=true]{--_ring: color-mix(in oklab, var(--destructive) 20%, transparent);border-color:var(--destructive)}:where(.dark,[data-theme=dark]) .cl-badge[aria-invalid=true]{--_ring: color-mix(in oklab, var(--destructive) 40%, transparent)}}@layer cl.components{.cl-button{--_h: 2rem;--_px: .625rem;--_px-icon: .5rem;--_gap: .375rem;--_svg: 1rem;--_ring: color-mix(in oklab, var(--ring) 50%, transparent);display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;gap:var(--_gap);height:var(--_h);padding:0 var(--_px);border:1px solid transparent;border-radius:var(--radius);background-color:transparent;background-clip:padding-box;color:inherit;font-size:.875rem;line-height:1.25rem;font-weight:500;white-space:nowrap;text-decoration:none;cursor:pointer;user-select:none;-webkit-user-select:none;outline:none;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.cl-button:has([data-icon=inline-start]){padding-inline-start:var(--_px-icon)}.cl-button:has([data-icon=inline-end]){padding-inline-end:var(--_px-icon)}.cl-button svg{pointer-events:none;flex-shrink:0}.cl-button svg:not([class*=size-]){width:var(--_svg);height:var(--_svg)}.cl-button:active:not([aria-haspopup]){translate:0 1px}.cl-button:disabled,.cl-button[aria-disabled=true]{pointer-events:none;opacity:.5}.cl-button:not([data-variant]),.cl-button[data-variant=default]{background-color:var(--primary);color:var(--primary-foreground)}.cl-button[data-variant=outline]{border-color:var(--border);background-color:var(--background)}.cl-button[data-variant=secondary]{background-color:var(--secondary);color:var(--secondary-foreground)}.cl-button[data-variant=destructive]{--_ring: color-mix(in oklab, var(--destructive) 20%, transparent);background-color:color-mix(in oklab,var(--destructive) 10%,transparent);color:var(--destructive)}.cl-button[data-variant=link]{color:var(--primary);text-underline-offset:4px}.cl-button:is([data-variant=outline],[data-variant=ghost])[aria-expanded=true]{background-color:var(--muted);color:var(--foreground)}@media(hover:hover){.cl-button:not([data-variant]):hover,.cl-button[data-variant=default]:hover{background-color:color-mix(in oklab,var(--primary) 80%,transparent)}.cl-button:is([data-variant=outline],[data-variant=ghost]):hover{background-color:var(--muted);color:var(--foreground)}.cl-button[data-variant=secondary]:hover{background-color:color-mix(in oklch,var(--secondary),var(--foreground) 5%)}.cl-button[data-variant=destructive]:hover{background-color:color-mix(in oklab,var(--destructive) 20%,transparent)}.cl-button[data-variant=link]:hover{text-decoration-line:underline}}:where(.dark,[data-theme=dark]) .cl-button[data-variant=outline]{border-color:var(--input);background-color:color-mix(in oklab,var(--input) 30%,transparent)}:where(.dark,[data-theme=dark]) .cl-button[data-variant=destructive]{--_ring: color-mix(in oklab, var(--destructive) 40%, transparent);background-color:color-mix(in oklab,var(--destructive) 20%,transparent)}@media(hover:hover){:where(.dark,[data-theme=dark]) .cl-button[data-variant=outline]:hover{background-color:color-mix(in oklab,var(--input) 50%,transparent)}:where(.dark,[data-theme=dark]) .cl-button[data-variant=ghost]:hover{background-color:color-mix(in oklab,var(--muted) 50%,transparent)}:where(.dark,[data-theme=dark]) .cl-button[data-variant=destructive]:hover{background-color:color-mix(in oklab,var(--destructive) 30%,transparent)}}.cl-button:focus-visible{border-color:var(--ring);box-shadow:0 0 0 3px var(--_ring)}.cl-button[data-variant=destructive]:focus-visible{border-color:color-mix(in oklab,var(--destructive) 40%,transparent)}.cl-button[aria-invalid=true]{border-color:var(--destructive);box-shadow:0 0 0 3px color-mix(in oklab,var(--destructive) 20%,transparent)}:where(.dark,[data-theme=dark]) .cl-button[aria-invalid=true]{border-color:color-mix(in oklab,var(--destructive) 50%,transparent);box-shadow:0 0 0 3px color-mix(in oklab,var(--destructive) 40%,transparent)}.cl-button[data-size=xs]{--_h: 1.5rem;--_px: .5rem;--_px-icon: .375rem;--_gap: .25rem;--_svg: .75rem;border-radius:min(calc(var(--radius) * .8),10px);font-size:.75rem;line-height:1rem}.cl-button[data-size=sm]{--_h: 1.75rem;--_px-icon: .375rem;--_gap: .25rem;--_svg: .875rem;border-radius:min(calc(var(--radius) * .8),12px);font-size:.8rem;line-height:inherit}.cl-button[data-size=lg]{--_h: 2.25rem}.cl-button[data-size^=icon]{--_px: 0;--_px-icon: 0;--_gap: normal;width:var(--_h)}.cl-button[data-size=icon-xs]{--_h: 1.5rem;--_svg: .75rem;border-radius:min(calc(var(--radius) * .8),10px)}.cl-button[data-size=icon-sm]{--_h: 1.75rem;border-radius:min(calc(var(--radius) * .8),12px)}.cl-button[data-size=icon-lg]{--_h: 2.25rem}}@layer cl.components{.cl-card{--card-spacing: 1rem;display:flex;flex-direction:column;gap:var(--card-spacing);overflow:hidden;padding-block:var(--card-spacing);border-radius:calc(var(--radius) * 1.4);background-color:var(--card);color:var(--card-foreground);font-size:.875rem;line-height:1.25rem;box-shadow:0 0 0 1px color-mix(in oklab,var(--foreground) 10%,transparent)}.cl-card[data-size=sm]{--card-spacing: .75rem}.cl-card:has(.cl-card-footer){padding-bottom:0}.cl-card:has(>img:first-child){padding-top:0}.cl-card>img:first-child{border-top-left-radius:calc(var(--radius) * 1.4);border-top-right-radius:calc(var(--radius) * 1.4)}.cl-card>img:last-child{border-bottom-left-radius:calc(var(--radius) * 1.4);border-bottom-right-radius:calc(var(--radius) * 1.4)}.cl-card-header{container:card-header / inline-size;display:grid;grid-auto-rows:min-content;align-items:flex-start;gap:.25rem;padding-inline:var(--card-spacing);border-top-left-radius:calc(var(--radius) * 1.4);border-top-right-radius:calc(var(--radius) * 1.4)}.cl-card-header:has(.cl-card-action){grid-template-columns:1fr auto}.cl-card-header:has(.cl-card-description){grid-template-rows:auto auto}.cl-card-header.border-b,.cl-card-header[data-border]{padding-bottom:var(--card-spacing);border-bottom-width:1px}.cl-card-title{font-size:1rem;line-height:1.375;font-weight:500}.cl-card[data-size=sm] .cl-card-title{font-size:.875rem}.cl-card-description{color:var(--muted-foreground);font-size:.875rem;line-height:1.25rem}.cl-card-action{grid-column-start:2;grid-row:1 / span 2;align-self:flex-start;justify-self:flex-end}.cl-card-content{padding-inline:var(--card-spacing)}.cl-card-footer{display:flex;align-items:center;padding:var(--card-spacing);border-top-width:1px;border-bottom-left-radius:calc(var(--radius) * 1.4);border-bottom-right-radius:calc(var(--radius) * 1.4);background-color:color-mix(in oklab,var(--muted) 50%,transparent)}}@layer cl.components{.cl-checkbox{appearance:none;-webkit-appearance:none;position:relative;display:inline-grid;flex-shrink:0;place-content:center;width:1rem;height:1rem;margin:0;border:1px solid var(--input);border-radius:4px;background-color:transparent;color:inherit;cursor:default;outline:none;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.cl-checkbox:before{content:"";width:.875rem;height:.875rem;background-color:currentColor;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;visibility:hidden}.cl-checkbox:after{content:"";position:absolute;inset:-.5rem -.75rem}.cl-checkbox:checked{border-color:var(--primary);background-color:var(--primary);color:var(--primary-foreground)}.cl-checkbox:checked:before{visibility:visible}.cl-checkbox:focus-visible{border-color:var(--ring);box-shadow:0 0 0 3px color-mix(in oklab,var(--ring) 50%,transparent)}.cl-checkbox:disabled{cursor:not-allowed;opacity:.5}.cl-checkbox[aria-invalid=true]{border-color:var(--destructive);box-shadow:0 0 0 3px color-mix(in oklab,var(--destructive) 20%,transparent)}.cl-checkbox[aria-invalid=true]:checked{border-color:var(--primary)}:where(.dark,[data-theme=dark]) .cl-checkbox{background-color:color-mix(in oklab,var(--input) 30%,transparent)}:where(.dark,[data-theme=dark]) .cl-checkbox:checked{background-color:var(--primary)}:where(.dark,[data-theme=dark]) .cl-checkbox[aria-invalid=true]{box-shadow:0 0 0 3px color-mix(in oklab,var(--destructive) 40%,transparent)}:where(.dark,[data-theme=dark]) .cl-checkbox[aria-invalid=true]:not(:checked){border-color:color-mix(in oklab,var(--destructive) 50%,transparent)}}@layer cl.components{.cl-dialog{position:fixed;inset:50% auto auto 50%;translate:-50% -50%;z-index:50;gap:1rem;width:100%;max-width:calc(100% - 2rem);max-height:none;margin:0;padding:1rem;border:0 solid var(--border);border-radius:calc(var(--radius) * 1.4);background-color:var(--popover);color:var(--popover-foreground);font-size:.875rem;line-height:1.25rem;outline:none;box-shadow:0 0 0 1px color-mix(in oklab,var(--foreground) 10%,transparent);opacity:0;scale:.95;transition-property:opacity,scale,display,overlay;transition-duration:.1s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-behavior:allow-discrete}.cl-dialog[open]{display:grid;opacity:1;scale:1}@starting-style{.cl-dialog[open]{opacity:0;scale:.95}}.cl-dialog::backdrop{background-color:#0000;transition-property:background-color,backdrop-filter,display,overlay;transition-duration:.1s;transition-behavior:allow-discrete}.cl-dialog[open]::backdrop{background-color:#0000001a;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}@starting-style{.cl-dialog[open]::backdrop{background-color:#0000;-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0)}}@media(width>=40rem){.cl-dialog{max-width:24rem}}.cl-dialog-header{display:flex;flex-direction:column;gap:.5rem}.cl-dialog-title{margin:0;font-size:1rem;line-height:1;font-weight:500}.cl-dialog-description{margin:0;color:var(--muted-foreground);font-size:.875rem;line-height:1.25rem}.cl-dialog-description>a{text-decoration-line:underline;text-underline-offset:3px}.cl-dialog-footer{display:flex;flex-direction:column-reverse;gap:.5rem;margin:0 -1rem -1rem;padding:1rem;border-top:1px solid var(--border);border-bottom-left-radius:calc(var(--radius) * 1.4);border-bottom-right-radius:calc(var(--radius) * 1.4);background-color:color-mix(in oklab,var(--muted) 50%,transparent)}@media(width>=40rem){.cl-dialog-footer{flex-direction:row;justify-content:flex-end}}.cl-dialog-close{position:absolute;top:.5rem;inset-inline-end:.5rem}}@layer cl.components{.cl-menu{display:none;width:var(--cl-anchor-width, auto);min-width:8rem;max-height:var(--cl-available-height, none);overflow-x:hidden;overflow-y:auto;padding:.25rem;border-radius:var(--radius);background-color:var(--popover);color:var(--popover-foreground);font-size:1rem;line-height:1.5rem;outline:none;box-shadow:0 0 0 1px color-mix(in oklab,var(--foreground) 10%,transparent),0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}.cl-menu:popover-open{display:block}.cl-menu-item{position:relative;display:flex;align-items:center;gap:.375rem;width:100%;padding:.25rem .375rem;border:0 solid var(--border);border-radius:calc(var(--radius) * .8);background-color:transparent;color:inherit;font:inherit;font-size:.875rem;line-height:1.25rem;text-align:start;text-decoration:none;cursor:default;outline:none;user-select:none;-webkit-user-select:none}.cl-menu-item svg{pointer-events:none;flex-shrink:0}.cl-menu-item svg:not([class*=size-]){width:1rem;height:1rem}.cl-menu-item:focus{background-color:var(--accent);color:var(--accent-foreground)}.cl-menu-item:not([data-variant=destructive]):focus *{color:var(--accent-foreground)}.cl-menu-item[data-inset]{padding-inline-start:1.75rem}.cl-menu-item:disabled,.cl-menu-item[aria-disabled=true]{pointer-events:none;opacity:.5}.cl-menu-item[data-variant=destructive],.cl-menu-item[data-variant=destructive]>svg{color:var(--destructive)}.cl-menu-item[data-variant=destructive]:focus{background-color:color-mix(in oklab,var(--destructive) 10%,transparent);color:var(--destructive)}:where(.dark,[data-theme=dark]) .cl-menu-item[data-variant=destructive]:focus{background-color:color-mix(in oklab,var(--destructive) 20%,transparent)}.cl-menu-item:is([role=menuitemcheckbox],[role=menuitemradio]){padding-inline-end:2rem;padding-inline-start:.375rem}.cl-menu-item:is([role=menuitemcheckbox],[role=menuitemradio]):after{content:"";position:absolute;inset-inline-end:.5rem;width:1rem;height:1rem;background-color:currentColor;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;visibility:hidden}.cl-menu-item[aria-checked=true]:after{visibility:visible}.cl-menu-label{padding:.25rem .375rem;color:var(--muted-foreground);font-size:.75rem;line-height:1rem;font-weight:500}.cl-menu-label[data-inset]{padding-inline-start:1.75rem}.cl-menu-separator{height:1px;margin:.25rem -.25rem;background-color:var(--border)}.cl-menu-shortcut{margin-inline-start:auto;color:var(--muted-foreground);font-size:.75rem;line-height:1rem;letter-spacing:.1em}.cl-menu-item:focus .cl-menu-shortcut{color:var(--accent-foreground)}}@layer cl.components{.cl-input{width:100%;min-width:0;height:2rem;padding:.25rem .625rem;border:1px solid var(--input);border-radius:var(--radius);background-color:transparent;color:inherit;font-size:1rem;line-height:1.5rem;outline:none;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.cl-input::placeholder{color:var(--muted-foreground)}.cl-input::file-selector-button{display:inline-flex;height:1.5rem;border:0;background-color:transparent;color:var(--foreground);font-size:.875rem;line-height:1.25rem;font-weight:500}.cl-input:focus-visible{border-color:var(--ring);box-shadow:0 0 0 3px color-mix(in oklab,var(--ring) 50%,transparent)}.cl-input:disabled{pointer-events:none;cursor:not-allowed;opacity:.5;background-color:color-mix(in oklab,var(--input) 50%,transparent)}.cl-input[aria-invalid=true]{border-color:var(--destructive);box-shadow:0 0 0 3px color-mix(in oklab,var(--destructive) 20%,transparent)}@media(width>=48rem){.cl-input{font-size:.875rem;line-height:1.25rem}}:where(.dark,[data-theme=dark]) .cl-input{background-color:color-mix(in oklab,var(--input) 30%,transparent)}:where(.dark,[data-theme=dark]) .cl-input:disabled{background-color:color-mix(in oklab,var(--input) 80%,transparent)}:where(.dark,[data-theme=dark]) .cl-input[aria-invalid=true]{border-color:color-mix(in oklab,var(--destructive) 50%,transparent);box-shadow:0 0 0 3px color-mix(in oklab,var(--destructive) 40%,transparent)}}@layer cl.components{.cl-kbd{display:inline-flex;align-items:center;justify-content:center;gap:.25rem;width:fit-content;min-width:1.25rem;height:1.25rem;padding-inline:.25rem;border-radius:calc(var(--radius) * .6);background-color:var(--muted);color:var(--muted-foreground);font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);font-size:.75rem;line-height:1rem;font-weight:500;pointer-events:none;user-select:none;-webkit-user-select:none}.cl-kbd svg:not([class*=size-]){width:.75rem;height:.75rem}.cl-kbd-group{display:inline-flex;align-items:center;gap:.25rem}}@layer cl.components{.cl-label{display:flex;align-items:center;gap:.5rem;font-size:.875rem;line-height:1;font-weight:500;user-select:none;-webkit-user-select:none}:disabled~.cl-label{cursor:not-allowed;opacity:.5}:where([data-disabled=true]) .cl-label{pointer-events:none;opacity:.5}}@layer cl.components{.cl-popover{display:none;flex-direction:column;gap:.625rem;width:18rem;padding:.625rem;border-radius:var(--radius);background-color:var(--popover);color:var(--popover-foreground);font-size:.875rem;line-height:1.25rem;outline:none;box-shadow:0 0 0 1px color-mix(in oklab,var(--foreground) 10%,transparent),0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}.cl-popover:popover-open{display:flex}.cl-popover-header{display:flex;flex-direction:column;gap:.125rem;font-size:.875rem;line-height:1.25rem}.cl-popover-title{margin:0;font-weight:500}.cl-popover-description{margin:0;color:var(--muted-foreground)}}@layer cl.components{.cl-select{--_h: 2rem;position:relative;width:fit-content}.cl-select[data-size=sm]{--_h: 1.75rem}.cl-select:has(select:disabled){opacity:.5}.cl-select>select{appearance:none;-webkit-appearance:none;width:100%;min-width:0;height:var(--_h);margin:0;padding:.25rem 2rem .25rem .625rem;border:1px solid var(--input);border-radius:var(--radius);background-color:transparent;color:inherit;font:inherit;font-size:.875rem;line-height:1.25rem;outline:none;user-select:none;-webkit-user-select:none;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.cl-select[data-size=sm]>select{padding-block:.125rem;border-radius:min(calc(var(--radius) * .8),10px)}.cl-select>select>:is(option,optgroup){background-color:Canvas;color:CanvasText}.cl-select:after{content:"";position:absolute;top:50%;inset-inline-end:.625rem;width:1rem;height:1rem;translate:0 -50%;background-color:var(--muted-foreground);mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;pointer-events:none}.cl-select>select:focus-visible{border-color:var(--ring);box-shadow:0 0 0 3px color-mix(in oklab,var(--ring) 50%,transparent)}.cl-select>select:disabled{pointer-events:none;cursor:not-allowed}.cl-select>select[aria-invalid=true]{border-color:var(--destructive);box-shadow:0 0 0 3px color-mix(in oklab,var(--destructive) 20%,transparent)}:where(.dark,[data-theme=dark]) .cl-select>select{background-color:color-mix(in oklab,var(--input) 30%,transparent)}@media(hover:hover){:where(.dark,[data-theme=dark]) .cl-select>select:hover{background-color:color-mix(in oklab,var(--input) 50%,transparent)}}:where(.dark,[data-theme=dark]) .cl-select>select[aria-invalid=true]{border-color:color-mix(in oklab,var(--destructive) 50%,transparent);box-shadow:0 0 0 3px color-mix(in oklab,var(--destructive) 40%,transparent)}}@layer cl.components{.cl-separator{flex-shrink:0;width:100%;height:1px;background-color:var(--border)}.cl-separator[data-orientation=vertical]{width:1px;height:auto;align-self:stretch}}@layer cl.components{@keyframes cl-pulse{50%{opacity:.5}}.cl-skeleton{border-radius:calc(var(--radius) * .8);background-color:var(--muted);animation:cl-pulse 2s cubic-bezier(.4,0,.6,1) infinite}}@layer cl.components{.cl-switch{--_w: 32px;--_h: 18.4px;--_thumb: 1rem;appearance:none;-webkit-appearance:none;position:relative;display:inline-flex;flex-shrink:0;align-items:center;width:var(--_w);height:var(--_h);margin:0;border:1px solid transparent;border-radius:calc(infinity * 1px);background-color:var(--input);cursor:default;outline:none;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.cl-switch[data-size=sm]{--_w: 24px;--_h: 14px;--_thumb: .75rem}.cl-switch:before{content:"";display:block;width:var(--_thumb);height:var(--_thumb);border-radius:calc(infinity * 1px);background-color:var(--background);pointer-events:none;transition-property:transform,translate,scale,rotate;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.cl-switch:after{content:"";position:absolute;inset:-.5rem -.75rem}.cl-switch:checked{background-color:var(--primary)}.cl-switch:checked:before{translate:calc(100% - 2px) 0}.cl-switch:focus-visible{border-color:var(--ring);box-shadow:0 0 0 3px color-mix(in oklab,var(--ring) 50%,transparent)}.cl-switch:disabled{cursor:not-allowed;opacity:.5}.cl-switch[aria-invalid=true]{border-color:var(--destructive);box-shadow:0 0 0 3px color-mix(in oklab,var(--destructive) 20%,transparent)}:where(.dark,[data-theme=dark]) .cl-switch:not(:checked){background-color:color-mix(in oklab,var(--input) 80%,transparent)}:where(.dark,[data-theme=dark]) .cl-switch:before{background-color:var(--foreground)}:where(.dark,[data-theme=dark]) .cl-switch:checked:before{background-color:var(--primary-foreground)}:where(.dark,[data-theme=dark]) .cl-switch[aria-invalid=true]{border-color:color-mix(in oklab,var(--destructive) 50%,transparent);box-shadow:0 0 0 3px color-mix(in oklab,var(--destructive) 40%,transparent)}}@layer cl.components{.cl-tabs{display:flex;flex-direction:column;gap:.5rem}.cl-tabs-list{display:inline-flex;align-items:center;justify-content:center;width:fit-content;height:2rem;padding:3px;border-radius:var(--radius);background-color:var(--muted);color:var(--muted-foreground)}.cl-tabs-list[data-variant=line]{gap:.25rem;border-radius:0;background-color:transparent}.cl-tabs-trigger{position:relative;display:inline-flex;flex:1 1 0%;align-items:center;justify-content:center;gap:.375rem;height:calc(100% - 1px);padding:.125rem .375rem;border:1px solid transparent;border-radius:calc(var(--radius) * .8);background-color:transparent;color:color-mix(in oklab,var(--foreground) 60%,transparent);font:inherit;font-size:.875rem;line-height:1.25rem;font-weight:500;white-space:nowrap;cursor:pointer;outline:none;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.cl-tabs-trigger svg{pointer-events:none;flex-shrink:0}.cl-tabs-trigger svg:not([class*=size-]){width:1rem;height:1rem}.cl-tabs-trigger:disabled{pointer-events:none;opacity:.5}.cl-tabs-trigger[aria-selected=true]{background-color:var(--background);color:var(--foreground)}.cl-tabs-list:not([data-variant=line]) .cl-tabs-trigger[aria-selected=true]{box-shadow:0 1px 3px #0000001a,0 1px 2px -1px #0000001a}.cl-tabs-list[data-variant=line] .cl-tabs-trigger{background-color:transparent}.cl-tabs-trigger:after{content:"";position:absolute;inset-inline:0;bottom:-5px;height:2px;background-color:var(--foreground);opacity:0;transition:opacity .15s cubic-bezier(.4,0,.2,1)}.cl-tabs-list[data-variant=line] .cl-tabs-trigger[aria-selected=true]:after{opacity:1}@media(hover:hover){.cl-tabs-trigger:hover{color:var(--foreground)}}.cl-tabs-trigger:focus-visible{border-color:var(--ring);outline:1px solid var(--ring);box-shadow:0 0 0 3px color-mix(in oklab,var(--ring) 50%,transparent)}:where(.dark,[data-theme=dark]) .cl-tabs-trigger{color:var(--muted-foreground)}@media(hover:hover){:where(.dark,[data-theme=dark]) .cl-tabs-trigger:hover{color:var(--foreground)}}:where(.dark,[data-theme=dark]) .cl-tabs-trigger[aria-selected=true]{border-color:var(--input);background-color:color-mix(in oklab,var(--input) 30%,transparent);color:var(--foreground)}:where(.dark,[data-theme=dark]) .cl-tabs-list[data-variant=line] .cl-tabs-trigger[aria-selected=true]{border-color:transparent;background-color:transparent}.cl-tabs-content{flex:1 1 0%;font-size:.875rem;line-height:1.25rem;outline:none}.cl-tabs-content[hidden]{display:none}}@layer cl.components{.cl-textarea{display:flex;field-sizing:content;width:100%;min-height:4rem;padding:.5rem .625rem;border:1px solid var(--input);border-radius:var(--radius);background-color:transparent;color:inherit;font-size:1rem;line-height:1.5rem;outline:none;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.cl-textarea::placeholder{color:var(--muted-foreground)}.cl-textarea:focus-visible{border-color:var(--ring);box-shadow:0 0 0 3px color-mix(in oklab,var(--ring) 50%,transparent)}.cl-textarea:disabled{cursor:not-allowed;opacity:.5;background-color:color-mix(in oklab,var(--input) 50%,transparent)}.cl-textarea[aria-invalid=true]{border-color:var(--destructive);box-shadow:0 0 0 3px color-mix(in oklab,var(--destructive) 20%,transparent)}@media(width>=48rem){.cl-textarea{font-size:.875rem;line-height:1.25rem}}:where(.dark,[data-theme=dark]) .cl-textarea{background-color:color-mix(in oklab,var(--input) 30%,transparent)}:where(.dark,[data-theme=dark]) .cl-textarea:disabled{background-color:color-mix(in oklab,var(--input) 80%,transparent)}:where(.dark,[data-theme=dark]) .cl-textarea[aria-invalid=true]{border-color:color-mix(in oklab,var(--destructive) 50%,transparent);box-shadow:0 0 0 3px color-mix(in oklab,var(--destructive) 40%,transparent)}}@layer cl.components{.cl-toaster{--gap: 14px;position:fixed;inset-inline-end:24px;bottom:24px;z-index:100;width:356px;height:var(--front-height, 0px);margin:0;padding:0;list-style:none}@media(width<600px){.cl-toaster{right:16px;bottom:16px;left:16px;width:auto}}.cl-toaster[data-expanded]:before{content:"";position:absolute;inset-inline:0;bottom:0;height:var(--expanded-height, 0px)}.cl-toast{--y: 0px;--scale: 1;position:absolute;right:0;bottom:0;left:0;display:flex;align-items:center;gap:6px;box-sizing:border-box;padding:16px;overflow:hidden;border:1px solid var(--border);border-radius:var(--radius);background-color:var(--popover);color:var(--popover-foreground);font-size:13px;box-shadow:0 4px 12px #0000001a;transform:translateY(var(--y)) scale(var(--scale));transform-origin:bottom center;transition-property:transform,opacity,height;transition-duration:.4s;transition-timing-function:ease}@starting-style{.cl-toast{opacity:0;transform:translateY(100%)}}.cl-toaster:not([data-expanded]) .cl-toast:not([data-front]){height:var(--front-height)}.cl-toaster:not([data-expanded]) .cl-toast:not([data-front])>*{opacity:0}.cl-toast>*{transition:opacity .4s}.cl-toast[data-hidden],.cl-toast[data-removed]{opacity:0;pointer-events:none}.cl-toast[data-removed]{transform:translateY(calc(var(--y) + 25%)) scale(var(--scale));transition-duration:.2s}.cl-toast-icon{display:flex;flex-shrink:0;align-self:center;margin-inline-end:4px}.cl-toast-icon svg{width:1rem;height:1rem}.cl-toast[data-type=loading] .cl-toast-icon svg{animation:cl-spin 1s linear infinite}@keyframes cl-spin{to{rotate:360deg}}.cl-toast-content{display:flex;flex-direction:column;gap:2px}.cl-toast-title{font-weight:500;line-height:1.5}.cl-toast-description{color:#3f3f3f;font-weight:400;line-height:1.4}:where(.dark,[data-theme=dark]) .cl-toast-description{color:#e8e8e8}.cl-toast-action{flex-shrink:0;height:24px;margin-inline-start:auto;padding:0 8px;border:0;border-radius:4px;background-color:var(--popover-foreground);color:var(--popover);font:inherit;font-size:12px;font-weight:500;cursor:pointer}@media(prefers-reduced-motion:reduce){.cl-toast,.cl-toast>*{transition-duration:0ms}}}@layer cl.components{.cl-tooltip{display:none;align-items:center;gap:.375rem;width:fit-content;max-width:20rem;padding:.375rem .75rem;border-radius:calc(var(--radius) * .8);background-color:var(--foreground);color:var(--background);font-size:.75rem;line-height:1rem;pointer-events:none}.cl-tooltip:popover-open{display:inline-flex}.cl-tooltip:has(.cl-kbd){padding-inline-end:.375rem}.cl-tooltip:after{content:"";position:absolute;width:.625rem;height:.625rem;border-radius:2px;background-color:var(--foreground);rotate:45deg;z-index:-1}.cl-tooltip[data-placed=top]:after{top:calc(100% - 7px);left:calc(50% - 5px)}.cl-tooltip[data-placed=bottom]:after{bottom:calc(100% - 7px);left:calc(50% - 5px)}.cl-tooltip[data-placed=left]:after{left:calc(100% - 7px);top:calc(50% - 5px)}.cl-tooltip[data-placed=right]:after{right:calc(100% - 7px);top:calc(50% - 5px)}.cl-tooltip .cl-kbd{position:relative;z-index:50;border-radius:calc(var(--radius) * .6);background-color:color-mix(in oklab,var(--background) 20%,transparent);color:var(--background)}:where(.dark,[data-theme=dark]) .cl-tooltip .cl-kbd{background-color:color-mix(in oklab,var(--background) 10%,transparent)}}@layer cl.components;@layer cl.utilities{.cl-container{width:100%;max-width:var(--cl-max, 72rem);margin-inline:auto;padding-inline:1rem}.cl-stack{display:flex;flex-direction:column;gap:var(--cl-gap, 1rem)}.cl-cluster{display:flex;flex-wrap:wrap;align-items:center;gap:var(--cl-gap, .5rem)}.cl-grid-auto{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(var(--cl-min, 16rem),100%),1fr));gap:var(--cl-gap, 1rem)}.cl-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}}
+/*! cladux-html v0.3.0 | Apache-2.0 | https://cladux.vercel.app/docs/html */
+@layer cl.base, cl.components, cl.utilities;
+
+:root {
+  --radius: 0.625rem;
+  --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);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.87 0 0);
+  --chart-2: oklch(0.556 0 0);
+  --chart-3: oklch(0.439 0 0);
+  --chart-4: oklch(0.371 0 0);
+  --chart-5: oklch(0.269 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,
+[data-theme=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.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.87 0 0);
+  --chart-2: oklch(0.556 0 0);
+  --chart-3: oklch(0.439 0 0);
+  --chart-4: oklch(0.371 0 0);
+  --chart-5: oklch(0.269 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.556 0 0);
+}
+
+@layer cl.base {
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+    border: 0 solid var(--border);
+    outline-color: color-mix(in oklab, var(--ring) 50%, transparent);
+  }
+  * {
+    margin: 0;
+    padding: 0;
+  }
+  html {
+    -webkit-text-size-adjust: 100%;
+    text-size-adjust: 100%;
+    font-family: var( --font-sans, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji" );
+    line-height: 1.5;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+  body {
+    min-height: 100dvh;
+    background-color: var(--background);
+    color: var(--foreground);
+  }
+  img,
+  picture,
+  video,
+  canvas,
+  svg {
+    display: block;
+    max-width: 100%;
+  }
+  input,
+  button,
+  textarea,
+  select {
+    font: inherit;
+    color: inherit;
+    background-color: transparent;
+  }
+  button {
+    cursor: pointer;
+  }
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-size: inherit;
+    font-weight: inherit;
+    text-wrap: balance;
+    overflow-wrap: break-word;
+  }
+  p {
+    text-wrap: pretty;
+    overflow-wrap: break-word;
+  }
+  a {
+    color: inherit;
+    text-decoration: inherit;
+  }
+  code,
+  kbd,
+  samp,
+  pre {
+    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
+  }
+}
+
+@layer cl.components {
+  .cl-popover,
+  .cl-menu,
+  .cl-tooltip,
+  .cl-combobox-content {
+    --_slide: 0.5rem;
+    position: fixed;
+    inset: auto;
+    z-index: 50;
+    margin: 0;
+    border: 0 solid var(--border);
+    overflow: visible;
+    opacity: 0;
+    scale: 0.95;
+    transition-property:
+      opacity,
+      scale,
+      translate,
+      display,
+      overlay;
+    transition-duration: 100ms;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-behavior: allow-discrete;
+  }
+  .cl-popover:popover-open,
+  .cl-menu:popover-open,
+  .cl-tooltip:popover-open,
+  .cl-combobox-content:popover-open {
+    opacity: 1;
+    scale: 1;
+  }
+  @starting-style {
+    .cl-popover:popover-open,
+    .cl-menu:popover-open,
+    .cl-tooltip:popover-open,
+    .cl-combobox-content:popover-open {
+      opacity: 0;
+      scale: 0.95;
+    }
+    :is(.cl-popover, .cl-menu, .cl-tooltip, .cl-combobox-content):popover-open[data-placed=bottom] {
+      translate: 0 calc(var(--_slide) * -1);
+    }
+    :is(.cl-popover, .cl-menu, .cl-tooltip, .cl-combobox-content):popover-open[data-placed=top] {
+      translate: 0 var(--_slide);
+    }
+    :is(.cl-popover, .cl-menu, .cl-tooltip, .cl-combobox-content):popover-open[data-placed=left] {
+      translate: var(--_slide) 0;
+    }
+    :is(.cl-popover, .cl-menu, .cl-tooltip, .cl-combobox-content):popover-open[data-placed=right] {
+      translate: calc(var(--_slide) * -1) 0;
+    }
+  }
+}
+
+@layer cl.components {
+  .cl-accordion {
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+  }
+  .cl-accordion-item:not(:last-child) {
+    border-bottom: 1px solid var(--border);
+  }
+  .cl-accordion-trigger {
+    position: relative;
+    display: flex;
+    flex: 1;
+    align-items: flex-start;
+    justify-content: space-between;
+    padding: 0.625rem 0;
+    border: 1px solid transparent;
+    border-radius: var(--radius);
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    font-weight: 500;
+    text-align: start;
+    outline: none;
+    cursor: pointer;
+    list-style: none;
+    transition-property: all;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+  }
+  .cl-accordion-trigger::-webkit-details-marker {
+    display: none;
+  }
+  @media (hover: hover) {
+    .cl-accordion-trigger:hover {
+      text-decoration: underline;
+    }
+  }
+  .cl-accordion-trigger:focus-visible {
+    border-color: var(--ring);
+    box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
+  }
+  .cl-accordion-item[data-disabled] > .cl-accordion-trigger {
+    pointer-events: none;
+    opacity: 0.5;
+  }
+  .cl-accordion-trigger::after {
+    content: "";
+    flex-shrink: 0;
+    width: 1rem;
+    height: 1rem;
+    margin-inline-start: auto;
+    background-color: var(--muted-foreground);
+    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
+  }
+  .cl-accordion-item[open] > .cl-accordion-trigger::after {
+    rotate: 180deg;
+  }
+  .cl-accordion-item::details-content {
+    display: grid;
+    grid-template-rows: 0fr;
+    overflow: hidden;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    transition: grid-template-rows 200ms ease-out, content-visibility 200ms ease-out allow-discrete;
+  }
+  .cl-accordion-item[open]::details-content {
+    grid-template-rows: 1fr;
+  }
+  .cl-accordion-item[data-closing]::details-content {
+    transition: none;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .cl-accordion-item::details-content {
+      transition: none;
+    }
+  }
+  .cl-accordion-content {
+    min-height: 0;
+    overflow: hidden;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+  }
+  .cl-accordion-content::after {
+    content: "";
+    display: block;
+    height: 0.625rem;
+  }
+  .cl-accordion-content a {
+    text-decoration: underline;
+    text-underline-offset: 3px;
+  }
+  @media (hover: hover) {
+    .cl-accordion-content a:hover {
+      color: var(--foreground);
+    }
+  }
+  .cl-accordion-content p:not(:last-child) {
+    margin-bottom: 1rem;
+  }
+}
+
+@layer cl.components {
+  .cl-badge {
+    --_ring: color-mix(in oklab, var(--ring) 50%, transparent);
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    gap: 0.25rem;
+    width: fit-content;
+    height: 1.25rem;
+    overflow: hidden;
+    padding: 0.125rem 0.5rem;
+    border: 1px solid transparent;
+    border-radius: calc(var(--radius) * 2.6);
+    font-size: 0.75rem;
+    line-height: 1rem;
+    font-weight: 500;
+    white-space: nowrap;
+    text-decoration: none;
+    transition-property: all;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+  }
+  .cl-badge:has([data-icon=inline-start]) {
+    padding-inline-start: 0.375rem;
+  }
+  .cl-badge:has([data-icon=inline-end]) {
+    padding-inline-end: 0.375rem;
+  }
+  .cl-badge > svg {
+    pointer-events: none;
+    width: 0.75rem !important;
+    height: 0.75rem !important;
+  }
+  .cl-badge:not([data-variant]),
+  .cl-badge[data-variant=default] {
+    background-color: var(--primary);
+    color: var(--primary-foreground);
+  }
+  .cl-badge[data-variant=secondary] {
+    background-color: var(--secondary);
+    color: var(--secondary-foreground);
+  }
+  .cl-badge[data-variant=destructive] {
+    --_ring: color-mix(in oklab, var(--destructive) 20%, transparent);
+    background-color: color-mix(in oklab, var(--destructive) 10%, transparent);
+    color: var(--destructive);
+  }
+  .cl-badge[data-variant=outline] {
+    border-color: var(--border);
+    color: var(--foreground);
+  }
+  .cl-badge[data-variant=link] {
+    color: var(--primary);
+    text-underline-offset: 4px;
+  }
+  @media (hover: hover) {
+    a.cl-badge:not([data-variant]):hover,
+    a.cl-badge[data-variant=default]:hover {
+      background-color: color-mix(in oklab, var(--primary) 80%, transparent);
+    }
+    a.cl-badge[data-variant=secondary]:hover {
+      background-color: color-mix(in oklab, var(--secondary) 80%, transparent);
+    }
+    a.cl-badge[data-variant=destructive]:hover {
+      background-color: color-mix(in oklab, var(--destructive) 20%, transparent);
+    }
+    a.cl-badge[data-variant=outline]:hover,
+    .cl-badge[data-variant=ghost]:hover {
+      background-color: var(--muted);
+      color: var(--muted-foreground);
+    }
+    .cl-badge[data-variant=link]:hover {
+      text-decoration-line: underline;
+    }
+  }
+  :where(.dark, [data-theme=dark]) .cl-badge[data-variant=destructive] {
+    --_ring: color-mix(in oklab, var(--destructive) 40%, transparent);
+    background-color: color-mix(in oklab, var(--destructive) 20%, transparent);
+  }
+  @media (hover: hover) {
+    :where(.dark, [data-theme=dark]) .cl-badge[data-variant=ghost]:hover {
+      background-color: color-mix(in oklab, var(--muted) 50%, transparent);
+    }
+  }
+  .cl-badge:focus-visible {
+    border-color: var(--ring);
+    box-shadow: 0 0 0 3px var(--_ring);
+  }
+  .cl-badge[aria-invalid=true] {
+    --_ring: color-mix(in oklab, var(--destructive) 20%, transparent);
+    border-color: var(--destructive);
+  }
+  :where(.dark, [data-theme=dark]) .cl-badge[aria-invalid=true] {
+    --_ring: color-mix(in oklab, var(--destructive) 40%, transparent);
+  }
+}
+
+@layer cl.components {
+  .cl-button {
+    --_h: 2rem;
+    --_px: 0.625rem;
+    --_px-icon: 0.5rem;
+    --_gap: 0.375rem;
+    --_svg: 1rem;
+    --_ring: color-mix(in oklab, var(--ring) 50%, transparent);
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    gap: var(--_gap);
+    height: var(--_h);
+    padding: 0 var(--_px);
+    border: 1px solid transparent;
+    border-radius: var(--radius);
+    background-color: transparent;
+    background-clip: padding-box;
+    color: inherit;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    font-weight: 500;
+    white-space: nowrap;
+    text-decoration: none;
+    cursor: pointer;
+    user-select: none;
+    -webkit-user-select: none;
+    outline: none;
+    transition-property: all;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+  }
+  .cl-button:has([data-icon=inline-start]) {
+    padding-inline-start: var(--_px-icon);
+  }
+  .cl-button:has([data-icon=inline-end]) {
+    padding-inline-end: var(--_px-icon);
+  }
+  .cl-button svg {
+    pointer-events: none;
+    flex-shrink: 0;
+  }
+  .cl-button svg:not([class*=size-]) {
+    width: var(--_svg);
+    height: var(--_svg);
+  }
+  .cl-button:active:not([aria-haspopup]) {
+    translate: 0 1px;
+  }
+  .cl-button:disabled,
+  .cl-button[aria-disabled=true] {
+    pointer-events: none;
+    opacity: 0.5;
+  }
+  .cl-button:not([data-variant]),
+  .cl-button[data-variant=default] {
+    background-color: var(--primary);
+    color: var(--primary-foreground);
+  }
+  .cl-button[data-variant=outline] {
+    border-color: var(--border);
+    background-color: var(--background);
+  }
+  .cl-button[data-variant=secondary] {
+    background-color: var(--secondary);
+    color: var(--secondary-foreground);
+  }
+  .cl-button[data-variant=destructive] {
+    --_ring: color-mix(in oklab, var(--destructive) 20%, transparent);
+    background-color: color-mix(in oklab, var(--destructive) 10%, transparent);
+    color: var(--destructive);
+  }
+  .cl-button[data-variant=link] {
+    color: var(--primary);
+    text-underline-offset: 4px;
+  }
+  .cl-button:is([data-variant=outline], [data-variant=ghost])[aria-expanded=true] {
+    background-color: var(--muted);
+    color: var(--foreground);
+  }
+  @media (hover: hover) {
+    .cl-button:not([data-variant]):hover,
+    .cl-button[data-variant=default]:hover {
+      background-color: color-mix(in oklab, var(--primary) 80%, transparent);
+    }
+    .cl-button:is([data-variant=outline], [data-variant=ghost]):hover {
+      background-color: var(--muted);
+      color: var(--foreground);
+    }
+    .cl-button[data-variant=secondary]:hover {
+      background-color: color-mix(in oklch, var(--secondary), var(--foreground) 5%);
+    }
+    .cl-button[data-variant=destructive]:hover {
+      background-color: color-mix(in oklab, var(--destructive) 20%, transparent);
+    }
+    .cl-button[data-variant=link]:hover {
+      text-decoration-line: underline;
+    }
+  }
+  :where(.dark, [data-theme=dark]) .cl-button[data-variant=outline] {
+    border-color: var(--input);
+    background-color: color-mix(in oklab, var(--input) 30%, transparent);
+  }
+  :where(.dark, [data-theme=dark]) .cl-button[data-variant=destructive] {
+    --_ring: color-mix(in oklab, var(--destructive) 40%, transparent);
+    background-color: color-mix(in oklab, var(--destructive) 20%, transparent);
+  }
+  @media (hover: hover) {
+    :where(.dark, [data-theme=dark]) .cl-button[data-variant=outline]:hover {
+      background-color: color-mix(in oklab, var(--input) 50%, transparent);
+    }
+    :where(.dark, [data-theme=dark]) .cl-button[data-variant=ghost]:hover {
+      background-color: color-mix(in oklab, var(--muted) 50%, transparent);
+    }
+    :where(.dark, [data-theme=dark]) .cl-button[data-variant=destructive]:hover {
+      background-color: color-mix(in oklab, var(--destructive) 30%, transparent);
+    }
+  }
+  .cl-button:focus-visible {
+    border-color: var(--ring);
+    box-shadow: 0 0 0 3px var(--_ring);
+  }
+  .cl-button[data-variant=destructive]:focus-visible {
+    border-color: color-mix(in oklab, var(--destructive) 40%, transparent);
+  }
+  .cl-button[aria-invalid=true] {
+    border-color: var(--destructive);
+    box-shadow: 0 0 0 3px color-mix(in oklab, var(--destructive) 20%, transparent);
+  }
+  :where(.dark, [data-theme=dark]) .cl-button[aria-invalid=true] {
+    border-color: color-mix(in oklab, var(--destructive) 50%, transparent);
+    box-shadow: 0 0 0 3px color-mix(in oklab, var(--destructive) 40%, transparent);
+  }
+  .cl-button[data-size=xs] {
+    --_h: 1.5rem;
+    --_px: 0.5rem;
+    --_px-icon: 0.375rem;
+    --_gap: 0.25rem;
+    --_svg: 0.75rem;
+    border-radius: min(calc(var(--radius) * 0.8), 10px);
+    font-size: 0.75rem;
+    line-height: 1rem;
+  }
+  .cl-button[data-size=sm] {
+    --_h: 1.75rem;
+    --_px-icon: 0.375rem;
+    --_gap: 0.25rem;
+    --_svg: 0.875rem;
+    border-radius: min(calc(var(--radius) * 0.8), 12px);
+    font-size: 0.8rem;
+    line-height: inherit;
+  }
+  .cl-button[data-size=lg] {
+    --_h: 2.25rem;
+  }
+  .cl-button[data-size^=icon] {
+    --_px: 0;
+    --_px-icon: 0;
+    --_gap: normal;
+    width: var(--_h);
+  }
+  .cl-button[data-size=icon-xs] {
+    --_h: 1.5rem;
+    --_svg: 0.75rem;
+    border-radius: min(calc(var(--radius) * 0.8), 10px);
+  }
+  .cl-button[data-size=icon-sm] {
+    --_h: 1.75rem;
+    border-radius: min(calc(var(--radius) * 0.8), 12px);
+  }
+  .cl-button[data-size=icon-lg] {
+    --_h: 2.25rem;
+  }
+}
+
+@layer cl.components {
+  .cl-card {
+    --card-spacing: 1rem;
+    display: flex;
+    flex-direction: column;
+    gap: var(--card-spacing);
+    overflow: hidden;
+    padding-block: var(--card-spacing);
+    border-radius: calc(var(--radius) * 1.4);
+    background-color: var(--card);
+    color: var(--card-foreground);
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    box-shadow: 0 0 0 1px color-mix(in oklab, var(--foreground) 10%, transparent);
+  }
+  .cl-card[data-size=sm] {
+    --card-spacing: 0.75rem;
+  }
+  .cl-card:has(.cl-card-footer) {
+    padding-bottom: 0;
+  }
+  .cl-card:has(> img:first-child) {
+    padding-top: 0;
+  }
+  .cl-card > img:first-child {
+    border-top-left-radius: calc(var(--radius) * 1.4);
+    border-top-right-radius: calc(var(--radius) * 1.4);
+  }
+  .cl-card > img:last-child {
+    border-bottom-left-radius: calc(var(--radius) * 1.4);
+    border-bottom-right-radius: calc(var(--radius) * 1.4);
+  }
+  .cl-card-header {
+    container: card-header / inline-size;
+    display: grid;
+    grid-auto-rows: min-content;
+    align-items: flex-start;
+    gap: 0.25rem;
+    padding-inline: var(--card-spacing);
+    border-top-left-radius: calc(var(--radius) * 1.4);
+    border-top-right-radius: calc(var(--radius) * 1.4);
+  }
+  .cl-card-header:has(.cl-card-action) {
+    grid-template-columns: 1fr auto;
+  }
+  .cl-card-header:has(.cl-card-description) {
+    grid-template-rows: auto auto;
+  }
+  .cl-card-header.border-b,
+  .cl-card-header[data-border] {
+    padding-bottom: var(--card-spacing);
+    border-bottom-width: 1px;
+  }
+  .cl-card-title {
+    font-size: 1rem;
+    line-height: 1.375;
+    font-weight: 500;
+  }
+  .cl-card[data-size=sm] .cl-card-title {
+    font-size: 0.875rem;
+  }
+  .cl-card-description {
+    color: var(--muted-foreground);
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+  }
+  .cl-card-action {
+    grid-column-start: 2;
+    grid-row: 1 / span 2;
+    align-self: flex-start;
+    justify-self: flex-end;
+  }
+  .cl-card-content {
+    padding-inline: var(--card-spacing);
+  }
+  .cl-card-footer {
+    display: flex;
+    align-items: center;
+    padding: var(--card-spacing);
+    border-top-width: 1px;
+    border-bottom-left-radius: calc(var(--radius) * 1.4);
+    border-bottom-right-radius: calc(var(--radius) * 1.4);
+    background-color: color-mix(in oklab, var(--muted) 50%, transparent);
+  }
+}
+
+@layer cl.components {
+  .cl-carousel {
+    --cl-carousel-per-view: 1;
+    --cl-carousel-gap: 1rem;
+    position: relative;
+  }
+  .cl-carousel-content {
+    display: flex;
+    gap: var(--cl-carousel-gap);
+    overflow: auto hidden;
+    overscroll-behavior-x: contain;
+    scroll-snap-type: x mandatory;
+    scrollbar-width: none;
+    border-radius: var(--radius);
+    outline: none;
+  }
+  .cl-carousel-content::-webkit-scrollbar {
+    display: none;
+  }
+  .cl-carousel-content:focus-visible {
+    box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
+  }
+  .cl-carousel-content[data-dragging] {
+    scroll-snap-type: none;
+    cursor: grabbing;
+    -webkit-user-select: none;
+    user-select: none;
+  }
+  .cl-carousel-item {
+    flex: 0 0 calc((100% - (var(--cl-carousel-per-view) - 1) * var(--cl-carousel-gap)) / var(--cl-carousel-per-view));
+    min-width: 0;
+    scroll-snap-align: start;
+  }
+  .cl-carousel[data-orientation=vertical] .cl-carousel-content {
+    flex-direction: column;
+    overflow: hidden auto;
+    overscroll-behavior-x: auto;
+    overscroll-behavior-y: contain;
+    scroll-snap-type: y mandatory;
+  }
+  .cl-carousel :is(.cl-carousel-previous, .cl-carousel-next) {
+    position: absolute;
+    inset-block: 0;
+    margin-block: auto;
+    border-radius: calc(infinity * 1px);
+    touch-action: manipulation;
+  }
+  .cl-carousel .cl-button:is(.cl-carousel-previous, .cl-carousel-next) {
+    border-radius: calc(infinity * 1px);
+  }
+  .cl-carousel-previous {
+    inset-inline-start: -3rem;
+  }
+  .cl-carousel-next {
+    inset-inline-end: -3rem;
+  }
+  .cl-carousel:not([data-orientation=vertical]) :is(.cl-carousel-previous, .cl-carousel-next):dir(rtl) svg {
+    rotate: 180deg;
+  }
+  .cl-carousel[data-orientation=vertical] :is(.cl-carousel-previous, .cl-carousel-next) {
+    inset: auto auto auto 50%;
+    margin: 0;
+    translate: -50% 0;
+    rotate: 90deg;
+  }
+  .cl-carousel[data-orientation=vertical] .cl-carousel-previous {
+    top: -3rem;
+  }
+  .cl-carousel[data-orientation=vertical] .cl-carousel-next {
+    bottom: -3rem;
+  }
+}
+
+@layer cl.components {
+  .cl-checkbox {
+    appearance: none;
+    -webkit-appearance: none;
+    position: relative;
+    display: inline-grid;
+    flex-shrink: 0;
+    place-content: center;
+    width: 1rem;
+    height: 1rem;
+    margin: 0;
+    border: 1px solid var(--input);
+    border-radius: 4px;
+    background-color: transparent;
+    color: inherit;
+    cursor: default;
+    outline: none;
+    transition-property:
+      color,
+      background-color,
+      border-color,
+      outline-color,
+      text-decoration-color,
+      fill,
+      stroke;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+  }
+  .cl-checkbox::before {
+    content: "";
+    width: 0.875rem;
+    height: 0.875rem;
+    background-color: currentColor;
+    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
+    visibility: hidden;
+  }
+  .cl-checkbox::after {
+    content: "";
+    position: absolute;
+    inset: -0.5rem -0.75rem;
+  }
+  .cl-checkbox:checked {
+    border-color: var(--primary);
+    background-color: var(--primary);
+    color: var(--primary-foreground);
+  }
+  .cl-checkbox:checked::before {
+    visibility: visible;
+  }
+  .cl-checkbox:focus-visible {
+    border-color: var(--ring);
+    box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
+  }
+  .cl-checkbox:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+  .cl-checkbox[aria-invalid=true] {
+    border-color: var(--destructive);
+    box-shadow: 0 0 0 3px color-mix(in oklab, var(--destructive) 20%, transparent);
+  }
+  .cl-checkbox[aria-invalid=true]:checked {
+    border-color: var(--primary);
+  }
+  :where(.dark, [data-theme=dark]) .cl-checkbox {
+    background-color: color-mix(in oklab, var(--input) 30%, transparent);
+  }
+  :where(.dark, [data-theme=dark]) .cl-checkbox:checked {
+    background-color: var(--primary);
+  }
+  :where(.dark, [data-theme=dark]) .cl-checkbox[aria-invalid=true] {
+    box-shadow: 0 0 0 3px color-mix(in oklab, var(--destructive) 40%, transparent);
+  }
+  :where(.dark, [data-theme=dark]) .cl-checkbox[aria-invalid=true]:not(:checked) {
+    border-color: color-mix(in oklab, var(--destructive) 50%, transparent);
+  }
+}
+
+@layer cl.components {
+  .cl-combobox {
+    position: relative;
+    display: flex;
+    align-items: center;
+    height: 2rem;
+    min-width: 0;
+    border: 1px solid var(--input);
+    border-radius: var(--radius);
+    transition-property:
+      color,
+      background-color,
+      border-color,
+      outline-color,
+      text-decoration-color,
+      fill,
+      stroke;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+  }
+  .cl-combobox:has(> .cl-combobox-input:focus-visible) {
+    border-color: var(--ring);
+    box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
+  }
+  .cl-combobox:has(> .cl-combobox-input[aria-invalid=true]) {
+    border-color: var(--destructive);
+    box-shadow: 0 0 0 3px color-mix(in oklab, var(--destructive) 20%, transparent);
+  }
+  .cl-combobox:has(> .cl-combobox-input:disabled) {
+    background-color: color-mix(in oklab, var(--input) 50%, transparent);
+    opacity: 0.5;
+  }
+  :where(.dark, [data-theme=dark]) .cl-combobox {
+    background-color: color-mix(in oklab, var(--input) 30%, transparent);
+  }
+  :where(.dark, [data-theme=dark]) .cl-combobox:has(> .cl-combobox-input:disabled) {
+    background-color: color-mix(in oklab, var(--input) 80%, transparent);
+  }
+  :where(.dark, [data-theme=dark]) .cl-combobox:has(> .cl-combobox-input[aria-invalid=true]) {
+    border-color: color-mix(in oklab, var(--destructive) 50%, transparent);
+    box-shadow: 0 0 0 3px color-mix(in oklab, var(--destructive) 40%, transparent);
+  }
+  .cl-combobox-input {
+    flex: 1;
+    width: 100%;
+    min-width: 0;
+    height: 2rem;
+    padding: 0.25rem 0.375rem 0.25rem 0.625rem;
+    border: 0;
+    border-radius: 0;
+    background-color: transparent;
+    color: inherit;
+    font-size: 1rem;
+    line-height: 1.5rem;
+    outline: none;
+  }
+  .cl-combobox-input::placeholder {
+    color: var(--muted-foreground);
+  }
+  .cl-combobox-input:disabled {
+    pointer-events: none;
+    cursor: not-allowed;
+  }
+  @media (width >= 48rem) {
+    .cl-combobox-input {
+      font-size: 0.875rem;
+      line-height: 1.25rem;
+    }
+  }
+  .cl-combobox-trigger {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    width: 1.5rem;
+    height: 1.5rem;
+    margin-inline-end: 0.2rem;
+    padding: 0;
+    border: 0;
+    border-radius: calc(var(--radius) - 3px);
+    background-color: transparent;
+    cursor: default;
+    transition-property: color, background-color;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+  }
+  .cl-combobox-trigger::before {
+    content: "";
+    width: 1rem;
+    height: 1rem;
+    background-color: var(--muted-foreground);
+    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
+  }
+  @media (hover: hover) {
+    .cl-combobox-trigger:hover {
+      background-color: var(--muted);
+    }
+  }
+  .cl-combobox-trigger:disabled {
+    pointer-events: none;
+  }
+  .cl-combobox-content {
+    display: none;
+    width: var(--cl-anchor-width, auto);
+    min-width: max(9rem, calc(var(--cl-anchor-width, 0px) + 1.75rem));
+    max-height: min(18rem, var(--cl-available-height, 18rem));
+    overflow: hidden;
+    padding: 0;
+    border-radius: var(--radius);
+    background-color: var(--popover);
+    color: var(--popover-foreground);
+    font-size: 1rem;
+    line-height: 1.5rem;
+    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);
+  }
+  .cl-combobox-content:popover-open {
+    display: block;
+  }
+  .cl-combobox-list {
+    max-height: min(15.75rem, calc(var(--cl-available-height, 18rem) - 2.25rem));
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    scroll-padding-block: 0.25rem;
+    scrollbar-width: none;
+    padding: 0.25rem;
+  }
+  .cl-combobox-list::-webkit-scrollbar {
+    display: none;
+  }
+  .cl-combobox-content[data-empty] .cl-combobox-list {
+    padding: 0;
+  }
+  .cl-combobox-item {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    width: 100%;
+    padding-block: 0.25rem;
+    padding-inline: 0.375rem 2rem;
+    border-radius: calc(var(--radius) * 0.8);
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    cursor: default;
+    -webkit-user-select: none;
+    user-select: none;
+    outline: none;
+  }
+  .cl-combobox-item[hidden] {
+    display: none;
+  }
+  .cl-combobox-item[data-highlighted] {
+    background-color: var(--accent);
+    color: var(--accent-foreground);
+  }
+  .cl-combobox-item[aria-disabled=true] {
+    pointer-events: none;
+    opacity: 0.5;
+  }
+  .cl-combobox-item svg {
+    flex-shrink: 0;
+    width: 1rem;
+    height: 1rem;
+    pointer-events: none;
+  }
+  .cl-combobox-item[aria-selected=true]::after {
+    content: "";
+    position: absolute;
+    inset-inline-end: 0.5rem;
+    width: 1rem;
+    height: 1rem;
+    background-color: currentColor;
+    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
+    pointer-events: none;
+  }
+  .cl-combobox-label {
+    padding: 0.375rem 0.5rem;
+    color: var(--muted-foreground);
+    font-size: 0.75rem;
+    line-height: 1rem;
+  }
+  .cl-combobox-separator {
+    height: 1px;
+    margin: 0.25rem -0.25rem;
+    background-color: var(--border);
+  }
+  .cl-combobox-empty {
+    display: none;
+    justify-content: center;
+    width: 100%;
+    padding-block: 0.5rem;
+    color: var(--muted-foreground);
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    text-align: center;
+  }
+  .cl-combobox-content[data-empty] .cl-combobox-empty {
+    display: flex;
+  }
+}
+
+@layer cl.components {
+  .cl-dialog {
+    position: fixed;
+    inset: 50% auto auto 50%;
+    z-index: 50;
+    gap: 1rem;
+    width: 100%;
+    height: auto;
+    max-width: calc(100% - 2rem);
+    max-height: none;
+    margin: 0;
+    padding: 1rem;
+    border: 0;
+    border-radius: calc(var(--radius) * 1.4);
+    background-color: var(--popover);
+    color: var(--popover-foreground);
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    outline: none;
+    box-shadow: 0 0 0 1px color-mix(in oklab, var(--foreground) 10%, transparent);
+    translate: -50% -50%;
+    opacity: 0;
+    scale: 0.95;
+    transition-property:
+      opacity,
+      scale,
+      display,
+      overlay;
+    transition-duration: 100ms;
+    transition-timing-function: ease;
+    transition-behavior: allow-discrete;
+  }
+  .cl-dialog[open] {
+    display: grid;
+    opacity: 1;
+    scale: 1;
+  }
+  @starting-style {
+    .cl-dialog[open] {
+      opacity: 0;
+      scale: 0.95;
+    }
+  }
+  @media (width >= 40rem) {
+    .cl-dialog {
+      max-width: 24rem;
+    }
+  }
+  .cl-dialog::backdrop {
+    background-color: rgb(0 0 0 / 0);
+    transition-property:
+      background-color,
+      backdrop-filter,
+      display,
+      overlay;
+    transition-duration: 100ms;
+    transition-timing-function: ease;
+    transition-behavior: allow-discrete;
+  }
+  .cl-dialog[open]::backdrop {
+    background-color: rgb(0 0 0 / 0.1);
+    -webkit-backdrop-filter: blur(4px);
+    backdrop-filter: blur(4px);
+  }
+  @starting-style {
+    .cl-dialog[open]::backdrop {
+      background-color: rgb(0 0 0 / 0);
+      -webkit-backdrop-filter: blur(0);
+      backdrop-filter: blur(0);
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .cl-dialog,
+    .cl-dialog::backdrop {
+      transition-duration: 0s;
+    }
+  }
+  .cl-dialog-header {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+  .cl-dialog-title {
+    margin: 0;
+    font-size: 1rem;
+    line-height: 1;
+    font-weight: 500;
+  }
+  .cl-dialog-description {
+    margin: 0;
+    color: var(--muted-foreground);
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+  }
+  .cl-dialog-description > a {
+    text-decoration-line: underline;
+    text-underline-offset: 3px;
+  }
+  @media (hover: hover) {
+    .cl-dialog-description > a:hover {
+      color: var(--foreground);
+    }
+  }
+  .cl-dialog-footer {
+    display: flex;
+    flex-direction: column-reverse;
+    gap: 0.5rem;
+    margin: 0 -1rem -1rem;
+    padding: 1rem;
+    border-top: 1px solid var(--border);
+    border-radius: 0 0 calc(var(--radius) * 1.4) calc(var(--radius) * 1.4);
+    background-color: color-mix(in oklab, var(--muted) 50%, transparent);
+  }
+  @media (width >= 40rem) {
+    .cl-dialog-footer {
+      flex-direction: row;
+      justify-content: flex-end;
+    }
+  }
+  .cl-dialog-close {
+    position: absolute;
+    top: 0.5rem;
+    inset-inline-end: 0.5rem;
+  }
+}
+
+@layer cl.components {
+  .cl-menu {
+    display: none;
+    width: var(--cl-anchor-width, auto);
+    min-width: 8rem;
+    max-height: var(--cl-available-height, none);
+    overflow-x: hidden;
+    overflow-y: auto;
+    padding: 0.25rem;
+    border-radius: var(--radius);
+    background-color: var(--popover);
+    color: var(--popover-foreground);
+    font-size: 1rem;
+    line-height: 1.5rem;
+    outline: none;
+    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);
+  }
+  .cl-menu:popover-open {
+    display: block;
+  }
+  .cl-menu-item {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    width: 100%;
+    padding: 0.25rem 0.375rem;
+    border: 0 solid var(--border);
+    border-radius: calc(var(--radius) * 0.8);
+    background-color: transparent;
+    color: inherit;
+    font: inherit;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    text-align: start;
+    text-decoration: none;
+    cursor: default;
+    outline: none;
+    user-select: none;
+    -webkit-user-select: none;
+  }
+  .cl-menu-item svg {
+    pointer-events: none;
+    flex-shrink: 0;
+  }
+  .cl-menu-item svg:not([class*=size-]) {
+    width: 1rem;
+    height: 1rem;
+  }
+  .cl-menu-item:focus {
+    background-color: var(--accent);
+    color: var(--accent-foreground);
+  }
+  .cl-menu-item:not([data-variant=destructive]):focus * {
+    color: var(--accent-foreground);
+  }
+  .cl-menu-item[data-inset] {
+    padding-inline-start: 1.75rem;
+  }
+  .cl-menu-item:disabled,
+  .cl-menu-item[aria-disabled=true] {
+    pointer-events: none;
+    opacity: 0.5;
+  }
+  .cl-menu-item[data-variant=destructive],
+  .cl-menu-item[data-variant=destructive] > svg {
+    color: var(--destructive);
+  }
+  .cl-menu-item[data-variant=destructive]:focus {
+    background-color: color-mix(in oklab, var(--destructive) 10%, transparent);
+    color: var(--destructive);
+  }
+  :where(.dark, [data-theme=dark]) .cl-menu-item[data-variant=destructive]:focus {
+    background-color: color-mix(in oklab, var(--destructive) 20%, transparent);
+  }
+  .cl-menu-item:is([role=menuitemcheckbox], [role=menuitemradio]) {
+    padding-inline-end: 2rem;
+    padding-inline-start: 0.375rem;
+  }
+  .cl-menu-item:is([role=menuitemcheckbox], [role=menuitemradio])::after {
+    content: "";
+    position: absolute;
+    inset-inline-end: 0.5rem;
+    width: 1rem;
+    height: 1rem;
+    background-color: currentColor;
+    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
+    visibility: hidden;
+  }
+  .cl-menu-item[aria-checked=true]::after {
+    visibility: visible;
+  }
+  .cl-menu-label {
+    padding: 0.25rem 0.375rem;
+    color: var(--muted-foreground);
+    font-size: 0.75rem;
+    line-height: 1rem;
+    font-weight: 500;
+  }
+  .cl-menu-label[data-inset] {
+    padding-inline-start: 1.75rem;
+  }
+  .cl-menu-separator {
+    height: 1px;
+    margin: 0.25rem -0.25rem;
+    background-color: var(--border);
+  }
+  .cl-menu-shortcut {
+    margin-inline-start: auto;
+    color: var(--muted-foreground);
+    font-size: 0.75rem;
+    line-height: 1rem;
+    letter-spacing: 0.1em;
+  }
+  .cl-menu-item:focus .cl-menu-shortcut {
+    color: var(--accent-foreground);
+  }
+}
+
+@layer cl.components {
+  .cl-input {
+    width: 100%;
+    min-width: 0;
+    height: 2rem;
+    padding: 0.25rem 0.625rem;
+    border: 1px solid var(--input);
+    border-radius: var(--radius);
+    background-color: transparent;
+    color: inherit;
+    font-size: 1rem;
+    line-height: 1.5rem;
+    outline: none;
+    transition-property:
+      color,
+      background-color,
+      border-color,
+      outline-color,
+      text-decoration-color,
+      fill,
+      stroke;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+  }
+  .cl-input::placeholder {
+    color: var(--muted-foreground);
+  }
+  .cl-input::file-selector-button {
+    display: inline-flex;
+    height: 1.5rem;
+    border: 0;
+    background-color: transparent;
+    color: var(--foreground);
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    font-weight: 500;
+  }
+  .cl-input:focus-visible {
+    border-color: var(--ring);
+    box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
+  }
+  .cl-input:disabled {
+    pointer-events: none;
+    cursor: not-allowed;
+    opacity: 0.5;
+    background-color: color-mix(in oklab, var(--input) 50%, transparent);
+  }
+  .cl-input[aria-invalid=true] {
+    border-color: var(--destructive);
+    box-shadow: 0 0 0 3px color-mix(in oklab, var(--destructive) 20%, transparent);
+  }
+  @media (width >= 48rem) {
+    .cl-input {
+      font-size: 0.875rem;
+      line-height: 1.25rem;
+    }
+  }
+  :where(.dark, [data-theme=dark]) .cl-input {
+    background-color: color-mix(in oklab, var(--input) 30%, transparent);
+  }
+  :where(.dark, [data-theme=dark]) .cl-input:disabled {
+    background-color: color-mix(in oklab, var(--input) 80%, transparent);
+  }
+  :where(.dark, [data-theme=dark]) .cl-input[aria-invalid=true] {
+    border-color: color-mix(in oklab, var(--destructive) 50%, transparent);
+    box-shadow: 0 0 0 3px color-mix(in oklab, var(--destructive) 40%, transparent);
+  }
+}
+
+@layer cl.components {
+  .cl-kbd {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.25rem;
+    width: fit-content;
+    min-width: 1.25rem;
+    height: 1.25rem;
+    padding-inline: 0.25rem;
+    border-radius: calc(var(--radius) * 0.6);
+    background-color: var(--muted);
+    color: var(--muted-foreground);
+    font-family: var(--font-sans, ui-sans-serif, system-ui, sans-serif);
+    font-size: 0.75rem;
+    line-height: 1rem;
+    font-weight: 500;
+    pointer-events: none;
+    user-select: none;
+    -webkit-user-select: none;
+  }
+  .cl-kbd svg:not([class*=size-]) {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+  .cl-kbd-group {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+  }
+}
+
+@layer cl.components {
+  .cl-label {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.875rem;
+    line-height: 1;
+    font-weight: 500;
+    user-select: none;
+    -webkit-user-select: none;
+  }
+  :disabled ~ .cl-label {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+  :where([data-disabled=true]) .cl-label {
+    pointer-events: none;
+    opacity: 0.5;
+  }
+}
+
+@layer cl.components {
+  .cl-popover {
+    display: none;
+    flex-direction: column;
+    gap: 0.625rem;
+    width: 18rem;
+    padding: 0.625rem;
+    border-radius: var(--radius);
+    background-color: var(--popover);
+    color: var(--popover-foreground);
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    outline: none;
+    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);
+  }
+  .cl-popover:popover-open {
+    display: flex;
+  }
+  .cl-popover-header {
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+  }
+  .cl-popover-title {
+    margin: 0;
+    font-weight: 500;
+  }
+  .cl-popover-description {
+    margin: 0;
+    color: var(--muted-foreground);
+  }
+}
+
+@layer cl.components {
+  .cl-select {
+    --_h: 2rem;
+    position: relative;
+    width: fit-content;
+  }
+  .cl-select[data-size=sm] {
+    --_h: 1.75rem;
+  }
+  .cl-select:has(select:disabled) {
+    opacity: 0.5;
+  }
+  .cl-select > select {
+    appearance: none;
+    -webkit-appearance: none;
+    width: 100%;
+    min-width: 0;
+    height: var(--_h);
+    margin: 0;
+    padding: 0.25rem 2rem 0.25rem 0.625rem;
+    border: 1px solid var(--input);
+    border-radius: var(--radius);
+    background-color: transparent;
+    color: inherit;
+    font: inherit;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    outline: none;
+    user-select: none;
+    -webkit-user-select: none;
+    transition-property:
+      color,
+      background-color,
+      border-color,
+      outline-color,
+      text-decoration-color,
+      fill,
+      stroke;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+  }
+  .cl-select[data-size=sm] > select {
+    padding-block: 0.125rem;
+    border-radius: min(calc(var(--radius) * 0.8), 10px);
+  }
+  .cl-select > select > :is(option, optgroup) {
+    background-color: Canvas;
+    color: CanvasText;
+  }
+  .cl-select::after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    inset-inline-end: 0.625rem;
+    width: 1rem;
+    height: 1rem;
+    translate: 0 -50%;
+    background-color: var(--muted-foreground);
+    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
+    pointer-events: none;
+  }
+  .cl-select > select:focus-visible {
+    border-color: var(--ring);
+    box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
+  }
+  .cl-select > select:disabled {
+    pointer-events: none;
+    cursor: not-allowed;
+  }
+  .cl-select > select[aria-invalid=true] {
+    border-color: var(--destructive);
+    box-shadow: 0 0 0 3px color-mix(in oklab, var(--destructive) 20%, transparent);
+  }
+  :where(.dark, [data-theme=dark]) .cl-select > select {
+    background-color: color-mix(in oklab, var(--input) 30%, transparent);
+  }
+  @media (hover: hover) {
+    :where(.dark, [data-theme=dark]) .cl-select > select:hover {
+      background-color: color-mix(in oklab, var(--input) 50%, transparent);
+    }
+  }
+  :where(.dark, [data-theme=dark]) .cl-select > select[aria-invalid=true] {
+    border-color: color-mix(in oklab, var(--destructive) 50%, transparent);
+    box-shadow: 0 0 0 3px color-mix(in oklab, var(--destructive) 40%, transparent);
+  }
+}
+
+@layer cl.components {
+  .cl-separator {
+    flex-shrink: 0;
+    width: 100%;
+    height: 1px;
+    background-color: var(--border);
+  }
+  .cl-separator[data-orientation=vertical] {
+    width: 1px;
+    height: auto;
+    align-self: stretch;
+  }
+}
+
+@layer cl.components {
+  .cl-sheet {
+    --_from: 2.5rem 0;
+    position: fixed;
+    inset: 0 0 0 auto;
+    z-index: 50;
+    gap: 1rem;
+    width: 75%;
+    height: 100%;
+    max-width: none;
+    max-height: none;
+    margin: 0;
+    padding: 0;
+    border: 0 solid var(--border);
+    border-left-width: 1px;
+    background-color: var(--popover);
+    background-clip: padding-box;
+    color: var(--popover-foreground);
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    outline: none;
+    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+    opacity: 0;
+    translate: var(--_from);
+    transition-property:
+      opacity,
+      translate,
+      display,
+      overlay;
+    transition-duration: 200ms;
+    transition-timing-function: ease-in-out;
+    transition-behavior: allow-discrete;
+  }
+  .cl-sheet[open] {
+    display: flex;
+    flex-direction: column;
+    opacity: 1;
+    translate: 0 0;
+  }
+  @starting-style {
+    .cl-sheet[open] {
+      opacity: 0;
+      translate: var(--_from);
+    }
+  }
+  .cl-sheet[data-side=left] {
+    --_from: -2.5rem 0;
+    inset: 0 auto 0 0;
+    border-left-width: 0;
+    border-right-width: 1px;
+  }
+  .cl-sheet:is([data-side=top], [data-side=bottom]) {
+    width: auto;
+    height: auto;
+    border-left-width: 0;
+  }
+  .cl-sheet[data-side=top] {
+    --_from: 0 -2.5rem;
+    inset: 0 0 auto 0;
+    border-bottom-width: 1px;
+  }
+  .cl-sheet[data-side=bottom] {
+    --_from: 0 2.5rem;
+    inset: auto 0 0 0;
+    border-top-width: 1px;
+  }
+  @media (width >= 40rem) {
+    .cl-sheet:not([data-side=top], [data-side=bottom]) {
+      max-width: 24rem;
+    }
+  }
+  .cl-sheet::backdrop {
+    background-color: rgb(0 0 0 / 0);
+    transition-property:
+      background-color,
+      backdrop-filter,
+      display,
+      overlay;
+    transition-duration: 100ms;
+    transition-behavior: allow-discrete;
+  }
+  .cl-sheet[open]::backdrop {
+    background-color: rgb(0 0 0 / 0.1);
+    -webkit-backdrop-filter: blur(4px);
+    backdrop-filter: blur(4px);
+  }
+  @starting-style {
+    .cl-sheet[open]::backdrop {
+      background-color: rgb(0 0 0 / 0);
+      -webkit-backdrop-filter: blur(0);
+      backdrop-filter: blur(0);
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .cl-sheet,
+    .cl-sheet::backdrop {
+      transition-duration: 0s;
+    }
+  }
+  .cl-sheet-header {
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+    padding: 1rem;
+  }
+  .cl-sheet-footer {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    margin-top: auto;
+    padding: 1rem;
+  }
+  .cl-sheet-title {
+    margin: 0;
+    color: var(--foreground);
+    font-size: 1rem;
+    line-height: 1.5rem;
+    font-weight: 500;
+  }
+  .cl-sheet-description {
+    margin: 0;
+    color: var(--muted-foreground);
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+  }
+  .cl-sheet-close {
+    position: absolute;
+    top: 0.75rem;
+    inset-inline-end: 0.75rem;
+  }
+}
+
+@layer cl.components {
+  @keyframes cl-pulse {
+    50% {
+      opacity: 0.5;
+    }
+  }
+  .cl-skeleton {
+    border-radius: calc(var(--radius) * 0.8);
+    background-color: var(--muted);
+    animation: cl-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  }
+}
+
+@layer cl.components {
+  .cl-slider {
+    appearance: none;
+    -webkit-appearance: none;
+    display: block;
+    width: 100%;
+    height: 1.75rem;
+    margin: -0.75rem 0;
+    padding: 0;
+    background: transparent;
+    touch-action: none;
+    -webkit-user-select: none;
+    user-select: none;
+    outline: none;
+  }
+  .cl-slider:disabled {
+    pointer-events: none;
+    opacity: 0.5;
+  }
+  .cl-slider::-webkit-slider-runnable-track {
+    height: 0.25rem;
+    border-radius: calc(infinity * 1px);
+    background:
+      linear-gradient(
+        to right,
+        var(--primary) var(--cl-slider-fill, 0%),
+        var(--muted) var(--cl-slider-fill, 0%));
+  }
+  .cl-slider:dir(rtl)::-webkit-slider-runnable-track {
+    background:
+      linear-gradient(
+        to left,
+        var(--primary) var(--cl-slider-fill, 0%),
+        var(--muted) var(--cl-slider-fill, 0%));
+  }
+  .cl-slider::-moz-range-track {
+    height: 0.25rem;
+    border-radius: calc(infinity * 1px);
+    background-color: var(--muted);
+  }
+  .cl-slider::-moz-range-progress {
+    height: 0.25rem;
+    border-radius: calc(infinity * 1px);
+    background-color: var(--primary);
+  }
+  .cl-slider::-webkit-slider-thumb {
+    appearance: none;
+    -webkit-appearance: none;
+    box-sizing: border-box;
+    width: 0.75rem;
+    height: 0.75rem;
+    margin-top: -0.25rem;
+    border: 1px solid var(--ring);
+    border-radius: calc(infinity * 1px);
+    background-color: white;
+    transition-property: color, box-shadow;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+  }
+  .cl-slider::-moz-range-thumb {
+    box-sizing: border-box;
+    width: 0.75rem;
+    height: 0.75rem;
+    border: 1px solid var(--ring);
+    border-radius: calc(infinity * 1px);
+    background-color: white;
+    transition-property: color, box-shadow;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+  }
+  .cl-slider:is(:focus-visible, :active)::-webkit-slider-thumb {
+    box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
+  }
+  .cl-slider:is(:focus-visible, :active)::-moz-range-thumb {
+    box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
+  }
+  @media (hover: hover) {
+    .cl-slider::-webkit-slider-thumb:hover {
+      box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
+    }
+    .cl-slider::-moz-range-thumb:hover {
+      box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
+    }
+  }
+}
+
+@layer cl.components {
+  .cl-switch {
+    --_w: 32px;
+    --_h: 18.4px;
+    --_thumb: 1rem;
+    appearance: none;
+    -webkit-appearance: none;
+    position: relative;
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    width: var(--_w);
+    height: var(--_h);
+    margin: 0;
+    border: 1px solid transparent;
+    border-radius: calc(infinity * 1px);
+    background-color: var(--input);
+    cursor: default;
+    outline: none;
+    transition-property: all;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+  }
+  .cl-switch[data-size=sm] {
+    --_w: 24px;
+    --_h: 14px;
+    --_thumb: 0.75rem;
+  }
+  .cl-switch::before {
+    content: "";
+    display: block;
+    width: var(--_thumb);
+    height: var(--_thumb);
+    border-radius: calc(infinity * 1px);
+    background-color: var(--background);
+    pointer-events: none;
+    transition-property:
+      transform,
+      translate,
+      scale,
+      rotate;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+  }
+  .cl-switch::after {
+    content: "";
+    position: absolute;
+    inset: -0.5rem -0.75rem;
+  }
+  .cl-switch:checked {
+    background-color: var(--primary);
+  }
+  .cl-switch:checked::before {
+    translate: calc(100% - 2px) 0;
+  }
+  .cl-switch:focus-visible {
+    border-color: var(--ring);
+    box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
+  }
+  .cl-switch:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+  .cl-switch[aria-invalid=true] {
+    border-color: var(--destructive);
+    box-shadow: 0 0 0 3px color-mix(in oklab, var(--destructive) 20%, transparent);
+  }
+  :where(.dark, [data-theme=dark]) .cl-switch:not(:checked) {
+    background-color: color-mix(in oklab, var(--input) 80%, transparent);
+  }
+  :where(.dark, [data-theme=dark]) .cl-switch::before {
+    background-color: var(--foreground);
+  }
+  :where(.dark, [data-theme=dark]) .cl-switch:checked::before {
+    background-color: var(--primary-foreground);
+  }
+  :where(.dark, [data-theme=dark]) .cl-switch[aria-invalid=true] {
+    border-color: color-mix(in oklab, var(--destructive) 50%, transparent);
+    box-shadow: 0 0 0 3px color-mix(in oklab, var(--destructive) 40%, transparent);
+  }
+}
+
+@layer cl.components {
+  .cl-tabs {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+  .cl-tabs-list {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: fit-content;
+    height: 2rem;
+    padding: 3px;
+    border-radius: var(--radius);
+    background-color: var(--muted);
+    color: var(--muted-foreground);
+  }
+  .cl-tabs-list[data-variant=line] {
+    gap: 0.25rem;
+    border-radius: 0;
+    background-color: transparent;
+  }
+  .cl-tabs-trigger {
+    position: relative;
+    display: inline-flex;
+    flex: 1 1 0%;
+    align-items: center;
+    justify-content: center;
+    gap: 0.375rem;
+    height: calc(100% - 1px);
+    padding: 0.125rem 0.375rem;
+    border: 1px solid transparent;
+    border-radius: calc(var(--radius) * 0.8);
+    background-color: transparent;
+    color: color-mix(in oklab, var(--foreground) 60%, transparent);
+    font: inherit;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    font-weight: 500;
+    white-space: nowrap;
+    cursor: pointer;
+    outline: none;
+    transition-property: all;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+  }
+  .cl-tabs-trigger svg {
+    pointer-events: none;
+    flex-shrink: 0;
+  }
+  .cl-tabs-trigger svg:not([class*=size-]) {
+    width: 1rem;
+    height: 1rem;
+  }
+  .cl-tabs-trigger:disabled {
+    pointer-events: none;
+    opacity: 0.5;
+  }
+  .cl-tabs-trigger[aria-selected=true] {
+    background-color: var(--background);
+    color: var(--foreground);
+  }
+  .cl-tabs-list:not([data-variant=line]) .cl-tabs-trigger[aria-selected=true] {
+    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  }
+  .cl-tabs-list[data-variant=line] .cl-tabs-trigger {
+    background-color: transparent;
+  }
+  .cl-tabs-trigger::after {
+    content: "";
+    position: absolute;
+    inset-inline: 0;
+    bottom: -5px;
+    height: 2px;
+    background-color: var(--foreground);
+    opacity: 0;
+    transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  }
+  .cl-tabs-list[data-variant=line] .cl-tabs-trigger[aria-selected=true]::after {
+    opacity: 1;
+  }
+  @media (hover: hover) {
+    .cl-tabs-trigger:hover {
+      color: var(--foreground);
+    }
+  }
+  .cl-tabs-trigger:focus-visible {
+    border-color: var(--ring);
+    outline: 1px solid var(--ring);
+    box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
+  }
+  :where(.dark, [data-theme=dark]) .cl-tabs-trigger {
+    color: var(--muted-foreground);
+  }
+  @media (hover: hover) {
+    :where(.dark, [data-theme=dark]) .cl-tabs-trigger:hover {
+      color: var(--foreground);
+    }
+  }
+  :where(.dark, [data-theme=dark]) .cl-tabs-trigger[aria-selected=true] {
+    border-color: var(--input);
+    background-color: color-mix(in oklab, var(--input) 30%, transparent);
+    color: var(--foreground);
+  }
+  :where(.dark, [data-theme=dark]) .cl-tabs-list[data-variant=line] .cl-tabs-trigger[aria-selected=true] {
+    border-color: transparent;
+    background-color: transparent;
+  }
+  .cl-tabs-content {
+    flex: 1 1 0%;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    outline: none;
+  }
+  .cl-tabs-content[hidden] {
+    display: none;
+  }
+}
+
+@layer cl.components {
+  .cl-textarea {
+    display: flex;
+    field-sizing: content;
+    width: 100%;
+    min-height: 4rem;
+    padding: 0.5rem 0.625rem;
+    border: 1px solid var(--input);
+    border-radius: var(--radius);
+    background-color: transparent;
+    color: inherit;
+    font-size: 1rem;
+    line-height: 1.5rem;
+    outline: none;
+    transition-property:
+      color,
+      background-color,
+      border-color,
+      outline-color,
+      text-decoration-color,
+      fill,
+      stroke;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+  }
+  .cl-textarea::placeholder {
+    color: var(--muted-foreground);
+  }
+  .cl-textarea:focus-visible {
+    border-color: var(--ring);
+    box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
+  }
+  .cl-textarea:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+    background-color: color-mix(in oklab, var(--input) 50%, transparent);
+  }
+  .cl-textarea[aria-invalid=true] {
+    border-color: var(--destructive);
+    box-shadow: 0 0 0 3px color-mix(in oklab, var(--destructive) 20%, transparent);
+  }
+  @media (width >= 48rem) {
+    .cl-textarea {
+      font-size: 0.875rem;
+      line-height: 1.25rem;
+    }
+  }
+  :where(.dark, [data-theme=dark]) .cl-textarea {
+    background-color: color-mix(in oklab, var(--input) 30%, transparent);
+  }
+  :where(.dark, [data-theme=dark]) .cl-textarea:disabled {
+    background-color: color-mix(in oklab, var(--input) 80%, transparent);
+  }
+  :where(.dark, [data-theme=dark]) .cl-textarea[aria-invalid=true] {
+    border-color: color-mix(in oklab, var(--destructive) 50%, transparent);
+    box-shadow: 0 0 0 3px color-mix(in oklab, var(--destructive) 40%, transparent);
+  }
+}
+
+@layer cl.components {
+  .cl-toaster {
+    --gap: 14px;
+    position: fixed;
+    inset-inline-end: 24px;
+    bottom: 24px;
+    z-index: 100;
+    width: 356px;
+    height: var(--front-height, 0px);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  @media (width < 600px) {
+    .cl-toaster {
+      right: 16px;
+      bottom: 16px;
+      left: 16px;
+      width: auto;
+    }
+  }
+  .cl-toaster[data-expanded]::before {
+    content: "";
+    position: absolute;
+    inset-inline: 0;
+    bottom: 0;
+    height: var(--expanded-height, 0px);
+  }
+  .cl-toast {
+    --y: 0px;
+    --scale: 1;
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    box-sizing: border-box;
+    padding: 16px;
+    overflow: hidden;
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    background-color: var(--popover);
+    color: var(--popover-foreground);
+    font-size: 13px;
+    box-shadow: 0 4px 12px rgb(0 0 0 / 0.1);
+    transform: translateY(var(--y)) scale(var(--scale));
+    transform-origin: bottom center;
+    transition-property:
+      transform,
+      opacity,
+      height;
+    transition-duration: 400ms;
+    transition-timing-function: ease;
+  }
+  @starting-style {
+    .cl-toast {
+      opacity: 0;
+      transform: translateY(100%);
+    }
+  }
+  .cl-toaster:not([data-expanded]) .cl-toast:not([data-front]) {
+    height: var(--front-height);
+  }
+  .cl-toaster:not([data-expanded]) .cl-toast:not([data-front]) > * {
+    opacity: 0;
+  }
+  .cl-toast > * {
+    transition: opacity 400ms;
+  }
+  .cl-toast[data-hidden],
+  .cl-toast[data-removed] {
+    opacity: 0;
+    pointer-events: none;
+  }
+  .cl-toast[data-removed] {
+    transform: translateY(calc(var(--y) + 25%)) scale(var(--scale));
+    transition-duration: 200ms;
+  }
+  .cl-toast-icon {
+    display: flex;
+    flex-shrink: 0;
+    align-self: center;
+    margin-inline-end: 4px;
+  }
+  .cl-toast-icon svg {
+    width: 1rem;
+    height: 1rem;
+  }
+  .cl-toast[data-type=loading] .cl-toast-icon svg {
+    animation: cl-spin 1s linear infinite;
+  }
+  @keyframes cl-spin {
+    to {
+      rotate: 360deg;
+    }
+  }
+  .cl-toast-content {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+  .cl-toast-title {
+    font-weight: 500;
+    line-height: 1.5;
+  }
+  .cl-toast-description {
+    color: #3f3f3f;
+    font-weight: 400;
+    line-height: 1.4;
+  }
+  :where(.dark, [data-theme=dark]) .cl-toast-description {
+    color: hsl(0 0% 91%);
+  }
+  .cl-toast-action {
+    flex-shrink: 0;
+    height: 24px;
+    margin-inline-start: auto;
+    padding: 0 8px;
+    border: 0;
+    border-radius: 4px;
+    background-color: var(--popover-foreground);
+    color: var(--popover);
+    font: inherit;
+    font-size: 12px;
+    font-weight: 500;
+    cursor: pointer;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .cl-toast,
+    .cl-toast > * {
+      transition-duration: 0ms;
+    }
+  }
+}
+
+@layer cl.components {
+  .cl-tooltip {
+    display: none;
+    align-items: center;
+    gap: 0.375rem;
+    width: fit-content;
+    max-width: 20rem;
+    padding: 0.375rem 0.75rem;
+    border-radius: calc(var(--radius) * 0.8);
+    background-color: var(--foreground);
+    color: var(--background);
+    font-size: 0.75rem;
+    line-height: 1rem;
+    pointer-events: none;
+  }
+  .cl-tooltip:popover-open {
+    display: inline-flex;
+  }
+  .cl-tooltip:has(.cl-kbd) {
+    padding-inline-end: 0.375rem;
+  }
+  .cl-tooltip::after {
+    content: "";
+    position: absolute;
+    width: 0.625rem;
+    height: 0.625rem;
+    border-radius: 2px;
+    background-color: var(--foreground);
+    rotate: 45deg;
+    z-index: -1;
+  }
+  .cl-tooltip[data-placed=top]::after {
+    top: calc(100% - 7px);
+    left: calc(50% - 5px);
+  }
+  .cl-tooltip[data-placed=bottom]::after {
+    bottom: calc(100% - 7px);
+    left: calc(50% - 5px);
+  }
+  .cl-tooltip[data-placed=left]::after {
+    left: calc(100% - 7px);
+    top: calc(50% - 5px);
+  }
+  .cl-tooltip[data-placed=right]::after {
+    right: calc(100% - 7px);
+    top: calc(50% - 5px);
+  }
+  .cl-tooltip .cl-kbd {
+    position: relative;
+    z-index: 50;
+    border-radius: calc(var(--radius) * 0.6);
+    background-color: color-mix(in oklab, var(--background) 20%, transparent);
+    color: var(--background);
+  }
+  :where(.dark, [data-theme=dark]) .cl-tooltip .cl-kbd {
+    background-color: color-mix(in oklab, var(--background) 10%, transparent);
+  }
+}
+
+@layer cl.components;
+
+@layer cl.utilities {
+  .cl-container {
+    width: 100%;
+    max-width: var(--cl-max, 72rem);
+    margin-inline: auto;
+    padding-inline: 1rem;
+  }
+  .cl-stack {
+    display: flex;
+    flex-direction: column;
+    gap: var(--cl-gap, 1rem);
+  }
+  .cl-cluster {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--cl-gap, 0.5rem);
+  }
+  .cl-grid-auto {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(var(--cl-min, 16rem), 100%), 1fr));
+    gap: var(--cl-gap, 1rem);
+  }
+  .cl-sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
+}