Spaces:

facebook
/

omnisealbench

Running

App Files Files Community

Mark Duppenthaler commited on 7 days ago

Commit

ca345b7

1 Parent(s): 81574bd

Updated with sorting rows and columns

Browse files

Files changed (11) hide show

README.md +7 -14
backend/mk_leaderboard.py +0 -0
frontend/dist/assets/index-BWZpYvtq.css +1 -0
frontend/dist/assets/index-CwrBXUIs.css +0 -1
frontend/dist/assets/{index-RC6rN_Gk.js → index-D2ksG3qQ.js} +0 -0
frontend/dist/index.html +2 -2
frontend/src/components/DatasetSelector.tsx +2 -2
frontend/src/components/IndependentMetricsTable.tsx +69 -0
frontend/src/components/LeaderboardFilter.tsx +186 -152
frontend/src/components/LeaderboardTable.tsx +559 -243
frontend/src/components/ModelFilter.tsx +2 -2

README.md CHANGED Viewed

@@ -1,15 +1,13 @@
 ---
-title: Omniseal Dev
 emoji: 🦀
 colorFrom: red
 colorTo: green
 sdk: docker
 pinned: false
-short_description: POC development
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 ## Docker Build Instructions
 ### Prerequisites
@@ -24,9 +22,10 @@ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-
 ```bash
 cd backend
 conda env create -f environment.yml -y
 ```
-2. Build frontend (outputs html, js, css into frontend/dist)
 ```bash
 cd frontend
@@ -34,7 +33,7 @@ npm install
 npm run build
 ```
-3. Run backend server which serves built frontend files
 ```bash
 gunicorn --chdir backend -b 0.0.0.0:7860 app:app --reload
@@ -44,13 +43,7 @@ gunicorn --chdir backend -b 0.0.0.0:7860 app:app --reload
 ### Build Steps (Docker, huggingface)
-1. Navigate to the project directory:
-```bash
-cd /path/to/omniseal_dev
-```
-2. Build the Docker image:
 ```bash
 docker build -t omniseal-benchmark .
@@ -74,7 +67,7 @@ docker run -p 7860:7860 -v $(pwd)/backend:/app/backend omniseal-benchmark
 When updating the backend, you can run it in whichever build steps above to take advantage of hot-reload so you don't have to restart the server.
-For the frontend to take advantage of hot reload:
 1. Create a `.env.local` file in the frontend directory. Set `VITE_API_SERVER_URL` to where your backend server is running. When running locally it will be `VITE_API_SERVER_URL=http://localhost:7860`. This overrides the configuration in `.env` so the frontend will connect with your backend URL of choice.

 ---
+title: Omniseal Leaderboard
 emoji: 🦀
 colorFrom: red
 colorTo: green
 sdk: docker
 pinned: false
+short_description: Leaderboard for watermarking models
 ---
 ## Docker Build Instructions
 ### Prerequisites
 ```bash
 cd backend
 conda env create -f environment.yml -y
+conda activate omniseal-benchmark-backend
 ```
+2. Build frontend (outputs html, js, css into frontend/dist). Note you only need this if you are updating the frontend, the repository would already have a build checked in at frontend/dist
 ```bash
 cd frontend
 npm run build
 ```
+3. Run backend server from project root. This would serve frontend files from port http://localhost:7860
 ```bash
 gunicorn --chdir backend -b 0.0.0.0:7860 app:app --reload
 ### Build Steps (Docker, huggingface)
+2. Build the Docker image from project root:
 ```bash
 docker build -t omniseal-benchmark .
 When updating the backend, you can run it in whichever build steps above to take advantage of hot-reload so you don't have to restart the server.
+For the frontend:
 1. Create a `.env.local` file in the frontend directory. Set `VITE_API_SERVER_URL` to where your backend server is running. When running locally it will be `VITE_API_SERVER_URL=http://localhost:7860`. This overrides the configuration in `.env` so the frontend will connect with your backend URL of choice.

backend/mk_leaderboard.py DELETED Viewed

File without changes

frontend/dist/assets/index-BWZpYvtq.css ADDED Viewed

	@@ -0,0 +1 @@

+ /*! tailwindcss v4.1.8 | MIT License | https://tailwindcss.com */@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-ease:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-red-500:oklch(63.7% .237 25.331);--color-gray-100:oklch(96.7% .003 264.542);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-700:oklch(37.3% .034 259.733);--color-black:#000;--spacing:.25rem;--container-4xl:56rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-lg:1.125rem;--text-lg--line-height:calc(1.75/1.125);--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--ease-in:cubic-bezier(.4,0,1,1);--ease-out:cubic-bezier(0,0,.2,1);--ease-in-out:cubic-bezier(.4,0,.2,1);--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){-webkit-appearance:button;-moz-appearance:button;appearance:button}::file-selector-button{-webkit-appearance:button;-moz-appearance:button;appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}:where(:root),:root:has(input.theme-controller[value=light]:checked),[data-theme=light]{color-scheme:light;--color-base-100:oklch(100% 0 0);--color-base-200:oklch(98% 0 0);--color-base-300:oklch(95% 0 0);--color-base-content:oklch(21% .006 285.885);--color-primary:oklch(45% .24 277.023);--color-primary-content:oklch(93% .034 272.788);--color-secondary:oklch(65% .241 354.308);--color-secondary-content:oklch(94% .028 342.258);--color-accent:oklch(77% .152 181.912);--color-accent-content:oklch(38% .063 188.416);--color-neutral:oklch(14% .005 285.823);--color-neutral-content:oklch(92% .004 286.32);--color-info:oklch(74% .16 232.661);--color-info-content:oklch(29% .066 243.157);--color-success:oklch(76% .177 163.223);--color-success-content:oklch(37% .077 168.94);--color-warning:oklch(82% .189 84.429);--color-warning-content:oklch(41% .112 45.904);--color-error:oklch(71% .194 13.428);--color-error-content:oklch(27% .105 12.094);--radius-selector:.5rem;--radius-field:.25rem;--radius-box:.5rem;--size-selector:.25rem;--size-field:.25rem;--border:1px;--depth:1;--noise:0}@media (prefers-color-scheme:dark){:root{color-scheme:dark;--color-base-100:oklch(25.33% .016 252.42);--color-base-200:oklch(23.26% .014 253.1);--color-base-300:oklch(21.15% .012 254.09);--color-base-content:oklch(97.807% .029 256.847);--color-primary:oklch(58% .233 277.117);--color-primary-content:oklch(96% .018 272.314);--color-secondary:oklch(65% .241 354.308);--color-secondary-content:oklch(94% .028 342.258);--color-accent:oklch(77% .152 181.912);--color-accent-content:oklch(38% .063 188.416);--color-neutral:oklch(14% .005 285.823);--color-neutral-content:oklch(92% .004 286.32);--color-info:oklch(74% .16 232.661);--color-info-content:oklch(29% .066 243.157);--color-success:oklch(76% .177 163.223);--color-success-content:oklch(37% .077 168.94);--color-warning:oklch(82% .189 84.429);--color-warning-content:oklch(41% .112 45.904);--color-error:oklch(71% .194 13.428);--color-error-content:oklch(27% .105 12.094);--radius-selector:.5rem;--radius-field:.25rem;--radius-box:.5rem;--size-selector:.25rem;--size-field:.25rem;--border:1px;--depth:1;--noise:0}}:root:has(input.theme-controller[value=light]:checked),[data-theme=light]{color-scheme:light;--color-base-100:oklch(100% 0 0);--color-base-200:oklch(98% 0 0);--color-base-300:oklch(95% 0 0);--color-base-content:oklch(21% .006 285.885);--color-primary:oklch(45% .24 277.023);--color-primary-content:oklch(93% .034 272.788);--color-secondary:oklch(65% .241 354.308);--color-secondary-content:oklch(94% .028 342.258);--color-accent:oklch(77% .152 181.912);--color-accent-content:oklch(38% .063 188.416);--color-neutral:oklch(14% .005 285.823);--color-neutral-content:oklch(92% .004 286.32);--color-info:oklch(74% .16 232.661);--color-info-content:oklch(29% .066 243.157);--color-success:oklch(76% .177 163.223);--color-success-content:oklch(37% .077 168.94);--color-warning:oklch(82% .189 84.429);--color-warning-content:oklch(41% .112 45.904);--color-error:oklch(71% .194 13.428);--color-error-content:oklch(27% .105 12.094);--radius-selector:.5rem;--radius-field:.25rem;--radius-box:.5rem;--size-selector:.25rem;--size-field:.25rem;--border:1px;--depth:1;--noise:0}:root:has(input.theme-controller[value=dark]:checked),[data-theme=dark]{color-scheme:dark;--color-base-100:oklch(25.33% .016 252.42);--color-base-200:oklch(23.26% .014 253.1);--color-base-300:oklch(21.15% .012 254.09);--color-base-content:oklch(97.807% .029 256.847);--color-primary:oklch(58% .233 277.117);--color-primary-content:oklch(96% .018 272.314);--color-secondary:oklch(65% .241 354.308);--color-secondary-content:oklch(94% .028 342.258);--color-accent:oklch(77% .152 181.912);--color-accent-content:oklch(38% .063 188.416);--color-neutral:oklch(14% .005 285.823);--color-neutral-content:oklch(92% .004 286.32);--color-info:oklch(74% .16 232.661);--color-info-content:oklch(29% .066 243.157);--color-success:oklch(76% .177 163.223);--color-success-content:oklch(37% .077 168.94);--color-warning:oklch(82% .189 84.429);--color-warning-content:oklch(41% .112 45.904);--color-error:oklch(71% .194 13.428);--color-error-content:oklch(27% .105 12.094);--radius-selector:.5rem;--radius-field:.25rem;--radius-box:.5rem;--size-selector:.25rem;--size-field:.25rem;--border:1px;--depth:1;--noise:0}@property --radialprogress{syntax: "<percentage>"; inherits: true; initial-value: 0%;}:root{scrollbar-color:currentColor #0000}@supports (color:color-mix(in lab,red,red)){:root{scrollbar-color:color-mix(in oklch,currentColor 35%,#0000)#0000}}:root{--fx-noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.34' numOctaves='4' stitchTiles='stitch'%3E%3C/feTurbulence%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)' opacity='0.2'%3E%3C/rect%3E%3C/svg%3E")}:root:has(.modal-open,.modal[open],.modal:target,.modal-toggle:checked,.drawer:not([class*=drawer-open])>.drawer-toggle:checked){overflow:hidden}:where(:root:has(.modal-open,.modal[open],.modal:target,.modal-toggle:checked,.drawer:not(.drawer-open)>.drawer-toggle:checked)){scrollbar-gutter:stable;background-image:linear-gradient(var(--color-base-100),var(--color-base-100));--root-bg:var(--color-base-100)}@supports (color:color-mix(in lab,red,red)){:where(:root:has(.modal-open,.modal[open],.modal:target,.modal-toggle:checked,.drawer:not(.drawer-open)>.drawer-toggle:checked)){--root-bg:color-mix(in srgb,var(--color-base-100),oklch(0% 0 0) 40%)}}:where(.modal[open],.modal-open,.modal-toggle:checked+.modal):not(.modal-start,.modal-end){scrollbar-gutter:stable}:root,[data-theme]{background-color:var(--root-bg,var(--color-base-100));color:var(--color-base-content)}}@layer components;@layer utilities{.diff{webkit-user-select:none;-webkit-user-select:none;user-select:none;direction:ltr;grid-template-columns:auto 1fr;width:100%;display:grid;position:relative;overflow:hidden;container-type:inline-size}.diff:focus-visible,.diff:has(.diff-item-1:focus-visible){outline-style:var(--tw-outline-style);outline-offset:1px;outline-width:2px;outline-color:var(--color-base-content)}.diff:focus-visible .diff-resizer{min-width:90cqi;max-width:90cqi}.diff:has(.diff-item-2:focus-visible){outline-style:var(--tw-outline-style);outline-offset:1px;outline-width:2px}.diff:has(.diff-item-2:focus-visible) .diff-resizer{min-width:10cqi;max-width:10cqi}@supports (-webkit-overflow-scrolling:touch) and (overflow:-webkit-paged-x){.diff:focus .diff-resizer{min-width:10cqi;max-width:10cqi}.diff:has(.diff-item-1:focus) .diff-resizer{min-width:90cqi;max-width:90cqi}}.tab{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:center;webkit-user-select:none;-webkit-user-select:none;user-select:none;flex-wrap:wrap;justify-content:center;align-items:center;display:inline-flex;position:relative}@media (hover:hover){.tab:hover{color:var(--color-base-content)}}.tab{--tab-p:1rem;--tab-bg:var(--color-base-100);--tab-border-color:var(--color-base-300);--tab-radius-ss:0;--tab-radius-se:0;--tab-radius-es:0;--tab-radius-ee:0;--tab-order:0;--tab-radius-min:calc(.75rem - var(--border));order:var(--tab-order);height:var(--tab-height);border-color:#0000;padding-inline-start:var(--tab-p);padding-inline-end:var(--tab-p);font-size:.875rem}.tab:is(input[type=radio]){min-width:fit-content}.tab:is(input[type=radio]):after{content:attr(aria-label)}.tab:is(label){position:relative}.tab:is(label) input{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;opacity:0;position:absolute;top:0;right:0;bottom:0;left:0}:is(.tab:checked,.tab:is(label:has(:checked)),.tab:is(.tab-active,[aria-selected=true]))+.tab-content{height:calc(100% - var(--tab-height) + var(--border));display:block}.tab:not(:checked,label:has(:checked),:hover,.tab-active,[aria-selected=true]){color:var(--color-base-content)}@supports (color:color-mix(in lab,red,red)){.tab:not(:checked,label:has(:checked),:hover,.tab-active,[aria-selected=true]){color:color-mix(in oklab,var(--color-base-content)50%,transparent)}}.tab:not(input):empty{cursor:default;flex-grow:1}.tab:focus{--tw-outline-style:none;outline-style:none}@media (forced-colors:active){.tab:focus{outline-offset:2px;outline:2px solid #0000}}.tab:focus-visible,.tab:is(label:has(:checked:focus-visible)){outline-offset:-5px;outline:2px solid}.tab[disabled]{pointer-events:none;opacity:.4}.collapse-arrow>.collapse-title:after{content:"";transform-origin:75% 75%;pointer-events:none;top:1.9rem;width:.5rem;height:.5rem;transition-property:all;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1);display:block;position:absolute;inset-inline-end:1.4rem;transform:translateY(-100%)rotate(45deg);box-shadow:2px 2px}.loading{pointer-events:none;aspect-ratio:1;vertical-align:middle;width:calc(var(--size-selector,.25rem)*6);background-color:currentColor;display:inline-block;-webkit-mask-image:url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='black' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform-origin='center'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='2s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dasharray' values='0,150;42,150;42,150' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dashoffset' values='0;-16;-59' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='black' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform-origin='center'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='2s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dasharray' values='0,150;42,150;42,150' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dashoffset' values='0;-16;-59' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:100%;mask-size:100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.pointer-events-none{pointer-events:none}.collapse:not(td,tr,colgroup){visibility:visible}.collapse{border-radius:var(--radius-box,1rem);isolation:isolate;grid-template-rows:max-content 0fr;width:100%;transition:grid-template-rows .2s;display:grid;position:relative;overflow:hidden}.collapse>input:is([type=checkbox],[type=radio]){-webkit-appearance:none;-moz-appearance:none;appearance:none;opacity:0;z-index:1;grid-row-start:1;grid-column-start:1;width:100%;min-height:1lh;padding:1rem;padding-inline-end:3rem;transition:background-color .2s ease-out}.collapse:is([open],:focus:not(.collapse-close)),.collapse:not(.collapse-close):has(>input:is([type=checkbox],[type=radio]):checked){grid-template-rows:max-content 1fr}.collapse:is([open],:focus:not(.collapse-close))>.collapse-content,.collapse:not(.collapse-close)>:where(input:is([type=checkbox],[type=radio]):checked~.collapse-content){visibility:visible;min-height:fit-content}.collapse:focus-visible,.collapse:has(>input:is([type=checkbox],[type=radio]):focus-visible){outline-color:var(--color-base-content);outline-offset:2px;outline-width:2px;outline-style:solid}.collapse:not(.collapse-close)>input[type=checkbox],.collapse:not(.collapse-close)>input[type=radio]:not(:checked),.collapse:not(.collapse-close)>.collapse-title{cursor:pointer}.collapse:focus:not(.collapse-close,.collapse[open])>.collapse-title{cursor:unset}.collapse:is([open],:focus:not(.collapse-close))>:where(.collapse-content),.collapse:not(.collapse-close)>:where(input:is([type=checkbox],[type=radio]):checked~.collapse-content){padding-bottom:1rem;transition:padding .2s ease-out,background-color .2s ease-out}.collapse[open].collapse-arrow>.collapse-title:after,.collapse.collapse-open.collapse-arrow>.collapse-title:after{transform:translateY(-50%)rotate(225deg)}.collapse.collapse-open.collapse-plus>.collapse-title:after{content:"−"}.collapse.collapse-arrow:focus:not(.collapse-close)>.collapse-title:after,.collapse.collapse-arrow:not(.collapse-close)>input:is([type=checkbox],[type=radio]):checked~.collapse-title:after{transform:translateY(-50%)rotate(225deg)}.collapse[open].collapse-plus>.collapse-title:after,.collapse.collapse-plus:focus:not(.collapse-close)>.collapse-title:after,.collapse.collapse-plus:not(.collapse-close)>input:is([type=checkbox],[type=radio]):checked~.collapse-title:after{content:"−"}.collapse:is(details){width:100%}.collapse:is(details) summary{display:block;position:relative}.collapse:is(details) summary::-webkit-details-marker{display:none}.collapse:is(details) summary{outline:none}.collapse-content{visibility:hidden;min-height:0;cursor:unset;grid-row-start:2;grid-column-start:1;padding-left:1rem;padding-right:1rem;transition:visibility .2s,padding .2s ease-out,background-color .2s ease-out}.collapse{visibility:collapse}.visible{visibility:visible}.toggle{border:var(--border)solid currentColor;color:var(--input-color);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;vertical-align:middle;webkit-user-select:none;-webkit-user-select:none;user-select:none;--radius-selector-max:calc(var(--radius-selector) + var(--radius-selector) + var(--radius-selector));border-radius:calc(var(--radius-selector) + min(var(--toggle-p),var(--radius-selector-max)) + min(var(--border),var(--radius-selector-max)));padding:var(--toggle-p);flex-shrink:0;grid-template-columns:0fr 1fr 1fr;place-content:center;display:inline-grid;position:relative;box-shadow:inset 0 1px}@supports (color:color-mix(in lab,red,red)){.toggle{box-shadow:0 1px color-mix(in oklab,currentColor calc(var(--depth)*10%),#0000) inset}}.toggle{--input-color:var(--color-base-content);transition:color .3s,grid-template-columns .2s}@supports (color:color-mix(in lab,red,red)){.toggle{--input-color:color-mix(in oklab,var(--color-base-content)50%,#0000)}}.toggle{--toggle-p:calc(var(--size)*.125);--size:calc(var(--size-selector,.25rem)*6);width:calc((var(--size)*2) - (var(--border) + var(--toggle-p))*2);height:var(--size)}.toggle>*{z-index:1;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#0000;border:none;grid-column:2/span 1;grid-row-start:1;height:100%;padding:.125rem;transition:opacity .2s,rotate .4s}.toggle>:focus{--tw-outline-style:none;outline-style:none}@media (forced-colors:active){.toggle>:focus{outline-offset:2px;outline:2px solid #0000}}.toggle>:nth-child(2){color:var(--color-base-100);rotate:none}.toggle>:nth-child(3){color:var(--color-base-100);opacity:0;rotate:-15deg}.toggle:has(:checked)>:nth-child(2){opacity:0;rotate:15deg}.toggle:has(:checked)>:nth-child(3){opacity:1;rotate:none}.toggle:before{aspect-ratio:1;border-radius:var(--radius-selector);--tw-content:"";content:var(--tw-content);height:100%;box-shadow:0 -1px oklch(0% 0 0/calc(var(--depth)*.1)) inset,0 8px 0 -4px oklch(100% 0 0/calc(var(--depth)*.1)) inset,0 1px currentColor;background-color:currentColor;grid-row-start:1;grid-column-start:2;transition:background-color .1s,translate .2s,inset-inline-start .2s;position:relative;inset-inline-start:0;translate:0}@supports (color:color-mix(in lab,red,red)){.toggle:before{box-shadow:0 -1px oklch(0% 0 0/calc(var(--depth)*.1)) inset,0 8px 0 -4px oklch(100% 0 0/calc(var(--depth)*.1)) inset,0 1px color-mix(in oklab,currentColor calc(var(--depth)*10%),#0000)}}.toggle:before{background-size:auto,calc(var(--noise)*100%);background-image:none,var(--fx-noise)}@media (forced-colors:active){.toggle:before{outline-style:var(--tw-outline-style);outline-offset:-1px;outline-width:1px}}@media print{.toggle:before{outline-offset:-1rem;outline:.25rem solid}}.toggle:focus-visible,.toggle:has(:focus-visible){outline-offset:2px;outline:2px solid}.toggle:checked,.toggle[aria-checked=true],.toggle:has(>input:checked){background-color:var(--color-base-100);--input-color:var(--color-base-content);grid-template-columns:1fr 1fr 0fr}:is(.toggle:checked,.toggle[aria-checked=true],.toggle:has(>input:checked)):before{background-color:currentColor}@starting-style{:is(.toggle:checked,.toggle[aria-checked=true],.toggle:has(>input:checked)):before{opacity:0}}.toggle:indeterminate{grid-template-columns:.5fr 1fr .5fr}.toggle:disabled{cursor:not-allowed;opacity:.3}.toggle:disabled:before{border:var(--border)solid currentColor;background-color:#0000}.input{cursor:text;border:var(--border)solid #0000;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--color-base-100);vertical-align:middle;white-space:nowrap;width:clamp(3rem,20rem,100%);height:var(--size);touch-action:manipulation;border-color:var(--input-color);box-shadow:0 1px var(--input-color) inset,0 -1px oklch(100% 0 0/calc(var(--depth)*.1)) inset;border-start-start-radius:var(--join-ss,var(--radius-field));border-start-end-radius:var(--join-se,var(--radius-field));border-end-end-radius:var(--join-ee,var(--radius-field));border-end-start-radius:var(--join-es,var(--radius-field));flex-shrink:1;align-items:center;gap:.5rem;padding-inline:.75rem;font-size:.875rem;display:inline-flex;position:relative}@supports (color:color-mix(in lab,red,red)){.input{box-shadow:0 1px color-mix(in oklab,var(--input-color)calc(var(--depth)*10%),#0000) inset,0 -1px oklch(100% 0 0/calc(var(--depth)*.1)) inset}}.input{--size:calc(var(--size-field,.25rem)*10);--input-color:var(--color-base-content)}@supports (color:color-mix(in lab,red,red)){.input{--input-color:color-mix(in oklab,var(--color-base-content)20%,#0000)}}.input:where(input){display:inline-flex}.input :where(input){-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#0000;border:none;width:100%;height:100%;display:inline-flex}.input :where(input):focus,.input :where(input):focus-within{--tw-outline-style:none;outline-style:none}@media (forced-colors:active){.input :where(input):focus,.input :where(input):focus-within{outline-offset:2px;outline:2px solid #0000}}.input :where(input[type=url]),.input :where(input[type=email]){direction:ltr}.input :where(input[type=date]){display:inline-block}.input:focus,.input:focus-within{--input-color:var(--color-base-content);box-shadow:0 1px var(--input-color)}@supports (color:color-mix(in lab,red,red)){.input:focus,.input:focus-within{box-shadow:0 1px color-mix(in oklab,var(--input-color)calc(var(--depth)*10%),#0000)}}.input:focus,.input:focus-within{outline:2px solid var(--input-color);outline-offset:2px;isolation:isolate;z-index:1}.input:has(>input[disabled]),.input:is(:disabled,[disabled]){cursor:not-allowed;border-color:var(--color-base-200);background-color:var(--color-base-200);color:var(--color-base-content)}@supports (color:color-mix(in lab,red,red)){.input:has(>input[disabled]),.input:is(:disabled,[disabled]){color:color-mix(in oklab,var(--color-base-content)40%,transparent)}}:is(.input:has(>input[disabled]),.input:is(:disabled,[disabled]))::placeholder{color:var(--color-base-content)}@supports (color:color-mix(in lab,red,red)){:is(.input:has(>input[disabled]),.input:is(:disabled,[disabled]))::placeholder{color:color-mix(in oklab,var(--color-base-content)20%,transparent)}}.input:has(>input[disabled]),.input:is(:disabled,[disabled]){box-shadow:none}.input:has(>input[disabled])>input[disabled]{cursor:not-allowed}.input::-webkit-date-and-time-value{text-align:inherit}.input[type=number]::-webkit-inner-spin-button{margin-block:-.75rem;margin-inline-end:-.75rem}.input::-webkit-calendar-picker-indicator{position:absolute;inset-inline-end:.75em}.table{border-radius:var(--radius-box);text-align:left;width:100%;font-size:.875rem;position:relative}.table:where(:dir(rtl),[dir=rtl],[dir=rtl] *){text-align:right}@media (hover:hover){:is(.table tr.row-hover,.table tr.row-hover:nth-child(2n)):hover{background-color:var(--color-base-200)}}.table :where(th,td){vertical-align:middle;padding-block:.75rem;padding-inline:1rem}.table :where(thead,tfoot){white-space:nowrap;color:var(--color-base-content)}@supports (color:color-mix(in lab,red,red)){.table :where(thead,tfoot){color:color-mix(in oklab,var(--color-base-content)60%,transparent)}}.table :where(thead,tfoot){font-size:.875rem;font-weight:600}.table :where(tfoot){border-top:var(--border)solid var(--color-base-content)}@supports (color:color-mix(in lab,red,red)){.table :where(tfoot){border-top:var(--border)solid color-mix(in oklch,var(--color-base-content)5%,#0000)}}.table :where(.table-pin-rows thead tr){z-index:1;background-color:var(--color-base-100);position:sticky;top:0}.table :where(.table-pin-rows tfoot tr){z-index:1;background-color:var(--color-base-100);position:sticky;bottom:0}.table :where(.table-pin-cols tr th){background-color:var(--color-base-100);position:sticky;left:0;right:0}.table :where(thead tr,tbody tr:not(:last-child)){border-bottom:var(--border)solid var(--color-base-content)}@supports (color:color-mix(in lab,red,red)){.table :where(thead tr,tbody tr:not(:last-child)){border-bottom:var(--border)solid color-mix(in oklch,var(--color-base-content)5%,#0000)}}.steps{counter-reset:step;grid-auto-columns:1fr;grid-auto-flow:column;display:inline-grid;overflow:auto hidden}.steps .step{text-align:center;--step-bg:var(--color-base-300);--step-fg:var(--color-base-content);grid-template-rows:40px 1fr;grid-template-columns:auto;place-items:center;min-width:4rem;display:grid}.steps .step:before{width:100%;height:.5rem;color:var(--step-bg);background-color:var(--step-bg);--tw-content:"";content:var(--tw-content);border:1px solid;grid-row-start:1;grid-column-start:1;margin-inline-start:-100%;top:0}.steps .step>.step-icon,.steps .step:not(:has(.step-icon)):after{content:counter(step);counter-increment:step;z-index:1;color:var(--step-fg);background-color:var(--step-bg);border:1px solid var(--step-bg);border-radius:3.40282e38px;grid-row-start:1;grid-column-start:1;place-self:center;place-items:center;width:2rem;height:2rem;display:grid;position:relative}.steps .step:first-child:before{content:none}.steps .step[data-content]:after{content:attr(data-content)}.steps .step-neutral+.step-neutral:before,.steps .step-neutral:after,.steps .step-neutral>.step-icon{--step-bg:var(--color-neutral);--step-fg:var(--color-neutral-content)}.steps .step-primary+.step-primary:before,.steps .step-primary:after,.steps .step-primary>.step-icon{--step-bg:var(--color-primary);--step-fg:var(--color-primary-content)}.steps .step-secondary+.step-secondary:before,.steps .step-secondary:after,.steps .step-secondary>.step-icon{--step-bg:var(--color-secondary);--step-fg:var(--color-secondary-content)}.steps .step-accent+.step-accent:before,.steps .step-accent:after,.steps .step-accent>.step-icon{--step-bg:var(--color-accent);--step-fg:var(--color-accent-content)}.steps .step-info+.step-info:before,.steps .step-info:after,.steps .step-info>.step-icon{--step-bg:var(--color-info);--step-fg:var(--color-info-content)}.steps .step-success+.step-success:before,.steps .step-success:after,.steps .step-success>.step-icon{--step-bg:var(--color-success);--step-fg:var(--color-success-content)}.steps .step-warning+.step-warning:before,.steps .step-warning:after,.steps .step-warning>.step-icon{--step-bg:var(--color-warning);--step-fg:var(--color-warning-content)}.steps .step-error+.step-error:before,.steps .step-error:after,.steps .step-error>.step-icon{--step-bg:var(--color-error);--step-fg:var(--color-error-content)}.range{-webkit-appearance:none;-moz-appearance:none;appearance:none;webkit-appearance:none;--range-thumb:var(--color-base-100);--range-thumb-size:calc(var(--size-selector,.25rem)*6);--range-progress:currentColor;--range-fill:1;--range-p:.25rem;--range-bg:currentColor}@supports (color:color-mix(in lab,red,red)){.range{--range-bg:color-mix(in oklab,currentColor 10%,#0000)}}.range{cursor:pointer;vertical-align:middle;--radius-selector-max:calc(var(--radius-selector) + var(--radius-selector) + var(--radius-selector));border-radius:calc(var(--radius-selector) + min(var(--range-p),var(--radius-selector-max)));width:clamp(3rem,20rem,100%);height:var(--range-thumb-size);background-color:#0000;border:none;overflow:hidden}[dir=rtl] .range{--range-dir:-1}.range:focus{outline:none}.range:focus-visible{outline-offset:2px;outline:2px solid}.range::-webkit-slider-runnable-track{background-color:var(--range-bg);border-radius:var(--radius-selector);width:100%;height:calc(var(--range-thumb-size)*.5)}@media (forced-colors:active){.range::-webkit-slider-runnable-track{border:1px solid}.range::-moz-range-track{border:1px solid}}.range::-webkit-slider-thumb{box-sizing:border-box;border-radius:calc(var(--radius-selector) + min(var(--range-p),var(--radius-selector-max)));height:var(--range-thumb-size);width:var(--range-thumb-size);border:var(--range-p)solid;-webkit-appearance:none;-moz-appearance:none;appearance:none;webkit-appearance:none;color:var(--range-progress);box-shadow:0 -1px oklch(0% 0 0/calc(var(--depth)*.1)) inset,0 8px 0 -4px oklch(100% 0 0/calc(var(--depth)*.1)) inset,0 1px currentColor,0 0 0 2rem var(--range-thumb) inset,calc((var(--range-dir,1)*-100rem) - (var(--range-dir,1)*var(--range-thumb-size)/2)) 0 0 calc(100rem*var(--range-fill));background-color:currentColor;position:relative;top:50%;transform:translateY(-50%)}@supports (color:color-mix(in lab,red,red)){.range::-webkit-slider-thumb{box-shadow:0 -1px oklch(0% 0 0/calc(var(--depth)*.1)) inset,0 8px 0 -4px oklch(100% 0 0/calc(var(--depth)*.1)) inset,0 1px color-mix(in oklab,currentColor calc(var(--depth)*10%),#0000),0 0 0 2rem var(--range-thumb) inset,calc((var(--range-dir,1)*-100rem) - (var(--range-dir,1)*var(--range-thumb-size)/2)) 0 0 calc(100rem*var(--range-fill))}}.range::-moz-range-track{background-color:var(--range-bg);border-radius:var(--radius-selector);width:100%;height:calc(var(--range-thumb-size)*.5)}.range::-moz-range-thumb{box-sizing:border-box;border-radius:calc(var(--radius-selector) + min(var(--range-p),var(--radius-selector-max)));height:var(--range-thumb-size);width:var(--range-thumb-size);border:var(--range-p)solid;color:var(--range-progress);box-shadow:0 -1px oklch(0% 0 0/calc(var(--depth)*.1)) inset,0 8px 0 -4px oklch(100% 0 0/calc(var(--depth)*.1)) inset,0 1px currentColor,0 0 0 2rem var(--range-thumb) inset,calc((var(--range-dir,1)*-100rem) - (var(--range-dir,1)*var(--range-thumb-size)/2)) 0 0 calc(100rem*var(--range-fill));background-color:currentColor;position:relative;top:50%}@supports (color:color-mix(in lab,red,red)){.range::-moz-range-thumb{box-shadow:0 -1px oklch(0% 0 0/calc(var(--depth)*.1)) inset,0 8px 0 -4px oklch(100% 0 0/calc(var(--depth)*.1)) inset,0 1px color-mix(in oklab,currentColor calc(var(--depth)*10%),#0000),0 0 0 2rem var(--range-thumb) inset,calc((var(--range-dir,1)*-100rem) - (var(--range-dir,1)*var(--range-thumb-size)/2)) 0 0 calc(100rem*var(--range-fill))}}.range:disabled{cursor:not-allowed;opacity:.3}.range\!{-webkit-appearance:none!important;-moz-appearance:none!important;appearance:none!important;webkit-appearance:none!important;--range-thumb:var(--color-base-100)!important;--range-thumb-size:calc(var(--size-selector,.25rem)*6)!important;--range-progress:currentColor!important;--range-fill:1!important;--range-p:.25rem!important;--range-bg:currentColor!important}@supports (color:color-mix(in lab,red,red)){.range\!{--range-bg:color-mix(in oklab,currentColor 10%,#0000)!important}}.range\!{cursor:pointer!important;vertical-align:middle!important;--radius-selector-max:calc(var(--radius-selector) + var(--radius-selector) + var(--radius-selector))!important;border-radius:calc(var(--radius-selector) + min(var(--range-p),var(--radius-selector-max)))!important;width:clamp(3rem,20rem,100%)!important;height:var(--range-thumb-size)!important;background-color:#0000!important;border:none!important;overflow:hidden!important}[dir=rtl] .range\!{--range-dir:-1!important}.range\!:focus{outline:none!important}.range\!:focus-visible{outline-offset:2px!important;outline:2px solid!important}.range\!::-webkit-slider-runnable-track{background-color:var(--range-bg)!important;border-radius:var(--radius-selector)!important;width:100%!important;height:calc(var(--range-thumb-size)*.5)!important}@media (forced-colors:active){.range\!::-webkit-slider-runnable-track{border:1px solid!important}.range\!::-moz-range-track{border:1px solid!important}}.range\!::-webkit-slider-thumb{box-sizing:border-box!important;border-radius:calc(var(--radius-selector) + min(var(--range-p),var(--radius-selector-max)))!important;height:var(--range-thumb-size)!important;width:var(--range-thumb-size)!important;border:var(--range-p)solid!important;-webkit-appearance:none!important;-moz-appearance:none!important;appearance:none!important;webkit-appearance:none!important;color:var(--range-progress)!important;box-shadow:0 -1px oklch(0% 0 0/calc(var(--depth)*.1)) inset,0 8px 0 -4px oklch(100% 0 0/calc(var(--depth)*.1)) inset,0 1px currentColor,0 0 0 2rem var(--range-thumb) inset,calc((var(--range-dir,1)*-100rem) - (var(--range-dir,1)*var(--range-thumb-size)/2)) 0 0 calc(100rem*var(--range-fill))!important;background-color:currentColor!important;position:relative!important;top:50%!important;transform:translateY(-50%)!important}@supports (color:color-mix(in lab,red,red)){.range\!::-webkit-slider-thumb{box-shadow:0 -1px oklch(0% 0 0/calc(var(--depth)*.1)) inset,0 8px 0 -4px oklch(100% 0 0/calc(var(--depth)*.1)) inset,0 1px color-mix(in oklab,currentColor calc(var(--depth)*10%),#0000),0 0 0 2rem var(--range-thumb) inset,calc((var(--range-dir,1)*-100rem) - (var(--range-dir,1)*var(--range-thumb-size)/2)) 0 0 calc(100rem*var(--range-fill))!important}}.range\!::-moz-range-track{background-color:var(--range-bg)!important;border-radius:var(--radius-selector)!important;width:100%!important;height:calc(var(--range-thumb-size)*.5)!important}.range\!::-moz-range-thumb{box-sizing:border-box!important;border-radius:calc(var(--radius-selector) + min(var(--range-p),var(--radius-selector-max)))!important;height:var(--range-thumb-size)!important;width:var(--range-thumb-size)!important;border:var(--range-p)solid!important;color:var(--range-progress)!important;box-shadow:0 -1px oklch(0% 0 0/calc(var(--depth)*.1)) inset,0 8px 0 -4px oklch(100% 0 0/calc(var(--depth)*.1)) inset,0 1px currentColor,0 0 0 2rem var(--range-thumb) inset,calc((var(--range-dir,1)*-100rem) - (var(--range-dir,1)*var(--range-thumb-size)/2)) 0 0 calc(100rem*var(--range-fill))!important;background-color:currentColor!important;position:relative!important;top:50%!important}@supports (color:color-mix(in lab,red,red)){.range\!::-moz-range-thumb{box-shadow:0 -1px oklch(0% 0 0/calc(var(--depth)*.1)) inset,0 8px 0 -4px oklch(100% 0 0/calc(var(--depth)*.1)) inset,0 1px color-mix(in oklab,currentColor calc(var(--depth)*10%),#0000),0 0 0 2rem var(--range-thumb) inset,calc((var(--range-dir,1)*-100rem) - (var(--range-dir,1)*var(--range-thumb-size)/2)) 0 0 calc(100rem*var(--range-fill))!important}}.range\!:disabled{cursor:not-allowed!important;opacity:.3!important}.tabs-border .tab{--tab-border-color:#0000 #0000 var(--tab-border-color)#0000;border-radius:var(--radius-field);position:relative}.tabs-border .tab:before{--tw-content:"";content:var(--tw-content);background-color:var(--tab-border-color);border-radius:var(--radius-field);width:80%;height:3px;transition:background-color .2s;position:absolute;bottom:0;left:10%}:is(.tabs-border .tab:is(.tab-active,[aria-selected=true]):not(.tab-disabled,[disabled]),.tabs-border .tab:is(input:checked),.tabs-border .tab:is(label:has(:checked))):before{--tab-border-color:currentColor;border-top:3px solid}.select{border:var(--border)solid #0000;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--color-base-100);vertical-align:middle;width:clamp(3rem,20rem,100%);height:var(--size);touch-action:manipulation;text-overflow:ellipsis;box-shadow:0 1px var(--input-color) inset,0 -1px oklch(100% 0 0/calc(var(--depth)*.1)) inset;background-image:linear-gradient(45deg,#0000 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,#0000 50%);background-position:calc(100% - 20px) calc(1px + 50%),calc(100% - 16.1px) calc(1px + 50%);background-repeat:no-repeat;background-size:4px 4px,4px 4px;border-start-start-radius:var(--join-ss,var(--radius-field));border-start-end-radius:var(--join-se,var(--radius-field));border-end-end-radius:var(--join-ee,var(--radius-field));border-end-start-radius:var(--join-es,var(--radius-field));flex-shrink:1;align-items:center;gap:.375rem;padding-inline:1rem 1.75rem;font-size:.875rem;display:inline-flex;position:relative}@supports (color:color-mix(in lab,red,red)){.select{box-shadow:0 1px color-mix(in oklab,var(--input-color)calc(var(--depth)*10%),#0000) inset,0 -1px oklch(100% 0 0/calc(var(--depth)*.1)) inset}}.select{border-color:var(--input-color);--input-color:var(--color-base-content)}@supports (color:color-mix(in lab,red,red)){.select{--input-color:color-mix(in oklab,var(--color-base-content)20%,#0000)}}.select{--size:calc(var(--size-field,.25rem)*10)}[dir=rtl] .select{background-position:12px calc(1px + 50%),16px calc(1px + 50%)}.select select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:inherit;border-radius:inherit;border-style:none;width:calc(100% + 2.75rem);height:calc(100% - 2px);margin-inline:-1rem -1.75rem;padding-inline:1rem 1.75rem}.select select:focus,.select select:focus-within{--tw-outline-style:none;outline-style:none}@media (forced-colors:active){.select select:focus,.select select:focus-within{outline-offset:2px;outline:2px solid #0000}}.select select:not(:last-child){background-image:none;margin-inline-end:-1.375rem}.select:focus,.select:focus-within{--input-color:var(--color-base-content);box-shadow:0 1px var(--input-color)}@supports (color:color-mix(in lab,red,red)){.select:focus,.select:focus-within{box-shadow:0 1px color-mix(in oklab,var(--input-color)calc(var(--depth)*10%),#0000)}}.select:focus,.select:focus-within{outline:2px solid var(--input-color);outline-offset:2px;isolation:isolate;z-index:1}.select:has(>select[disabled]),.select:is(:disabled,[disabled]){cursor:not-allowed;border-color:var(--color-base-200);background-color:var(--color-base-200);color:var(--color-base-content)}@supports (color:color-mix(in lab,red,red)){.select:has(>select[disabled]),.select:is(:disabled,[disabled]){color:color-mix(in oklab,var(--color-base-content)40%,transparent)}}:is(.select:has(>select[disabled]),.select:is(:disabled,[disabled]))::placeholder{color:var(--color-base-content)}@supports (color:color-mix(in lab,red,red)){:is(.select:has(>select[disabled]),.select:is(:disabled,[disabled]))::placeholder{color:color-mix(in oklab,var(--color-base-content)20%,transparent)}}.select:has(>select[disabled])>select[disabled]{cursor:not-allowed}.timeline{display:flex;position:relative}.timeline>li{grid-template-rows:var(--timeline-row-start,minmax(0,1fr))auto var(--timeline-row-end,minmax(0,1fr));grid-template-columns:var(--timeline-col-start,minmax(0,1fr))auto var(--timeline-col-end,minmax(0,1fr));flex-shrink:0;align-items:center;display:grid;position:relative}.timeline>li>hr{border:none;width:100%}.timeline>li>hr:first-child{grid-row-start:2;grid-column-start:1}.timeline>li>hr:last-child{grid-area:2/3/auto/none}@media print{.timeline>li>hr{border:.1px solid var(--color-base-300)}}.timeline :where(hr){background-color:var(--color-base-300);height:.25rem}.timeline:has(.timeline-middle hr):first-child{border-start-start-radius:0;border-start-end-radius:var(--radius-selector);border-end-end-radius:var(--radius-selector);border-end-start-radius:0}.timeline:has(.timeline-middle hr):last-child,.timeline:not(:has(.timeline-middle)) :first-child hr:last-child{border-start-start-radius:var(--radius-selector);border-start-end-radius:0;border-end-end-radius:0;border-end-start-radius:var(--radius-selector)}.timeline:not(:has(.timeline-middle)) :last-child hr:first-child{border-start-start-radius:0;border-start-end-radius:var(--radius-selector);border-end-end-radius:var(--radius-selector);border-end-start-radius:0}.collapse-title{grid-row-start:1;grid-column-start:1;width:100%;min-height:1lh;padding:1rem;padding-inline-end:3rem;transition:background-color .2s ease-out;position:relative}.checkbox{border:var(--border)solid var(--input-color,var(--color-base-content))}@supports (color:color-mix(in lab,red,red)){.checkbox{border:var(--border)solid var(--input-color,color-mix(in oklab,var(--color-base-content)20%,#0000))}}.checkbox{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:var(--radius-selector);vertical-align:middle;color:var(--color-base-content);box-shadow:0 1px oklch(0% 0 0/calc(var(--depth)*.1)) inset,0 0 #0000 inset,0 0 #0000;--size:calc(var(--size-selector,.25rem)*6);width:var(--size);height:var(--size);background-size:auto,calc(var(--noise)*100%);background-image:none,var(--fx-noise);flex-shrink:0;padding:.25rem;transition:background-color .2s,box-shadow .2s;display:inline-block;position:relative}.checkbox:before{--tw-content:"";content:var(--tw-content);opacity:0;clip-path:polygon(20% 100%,20% 80%,50% 80%,50% 80%,70% 80%,70% 100%);width:100%;height:100%;box-shadow:0 3px oklch(100% 0 0/calc(var(--depth)*.1)) inset;background-color:currentColor;font-size:1rem;line-height:.75;transition:clip-path .3s .1s,opacity .1s .1s,rotate .3s .1s,translate .3s .1s;display:block;rotate:45deg}.checkbox:focus-visible{outline:2px solid var(--input-color,currentColor);outline-offset:2px}.checkbox:checked,.checkbox[aria-checked=true]{background-color:var(--input-color,#0000);box-shadow:0 0 #0000 inset,0 8px 0 -4px oklch(100% 0 0/calc(var(--depth)*.1)) inset,0 1px oklch(0% 0 0/calc(var(--depth)*.1))}:is(.checkbox:checked,.checkbox[aria-checked=true]):before{clip-path:polygon(20% 100%,20% 80%,50% 80%,50% 0%,70% 0%,70% 100%);opacity:1}@media (forced-colors:active){:is(.checkbox:checked,.checkbox[aria-checked=true]):before{--tw-content:"✔︎";clip-path:none;background-color:#0000;rotate:none}}@media print{:is(.checkbox:checked,.checkbox[aria-checked=true]):before{--tw-content:"✔︎";clip-path:none;background-color:#0000;rotate:none}}.checkbox:indeterminate:before{opacity:1;clip-path:polygon(20% 100%,20% 80%,50% 80%,50% 80%,80% 80%,80% 100%);translate:0 -35%;rotate:none}.checkbox:disabled{cursor:not-allowed;opacity:.2}.radio{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;vertical-align:middle;border:var(--border)solid var(--input-color,currentColor);border-radius:3.40282e38px;flex-shrink:0;padding:.25rem;display:inline-block;position:relative}@supports (color:color-mix(in lab,red,red)){.radio{border:var(--border)solid var(--input-color,color-mix(in srgb,currentColor 20%,#0000))}}.radio{box-shadow:0 1px oklch(0% 0 0/calc(var(--depth)*.1)) inset;--size:calc(var(--size-selector,.25rem)*6);width:var(--size);height:var(--size);color:var(--input-color,currentColor)}.radio:before{--tw-content:"";content:var(--tw-content);background-size:auto,calc(var(--noise)*100%);background-image:none,var(--fx-noise);border-radius:3.40282e38px;width:100%;height:100%;display:block}.radio:focus-visible{outline:2px solid}.radio:checked,.radio[aria-checked=true]{background-color:var(--color-base-100);border-color:currentColor;animation:.2s ease-out radio}:is(.radio:checked,.radio[aria-checked=true]):before{box-shadow:0 -1px oklch(0% 0 0/calc(var(--depth)*.1)) inset,0 8px 0 -4px oklch(100% 0 0/calc(var(--depth)*.1)) inset,0 1px oklch(0% 0 0/calc(var(--depth)*.1));background-color:currentColor}@media (forced-colors:active){:is(.radio:checked,.radio[aria-checked=true]):before{outline-style:var(--tw-outline-style);outline-offset:-1px;outline-width:1px}}@media print{:is(.radio:checked,.radio[aria-checked=true]):before{outline-offset:-1rem;outline:.25rem solid}}.radio:disabled{cursor:not-allowed;opacity:.2}.stats{border-radius:var(--radius-box);grid-auto-flow:column;display:inline-grid;position:relative;overflow-x:auto}.progress{-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:var(--radius-box);background-color:currentColor;width:100%;height:.5rem;position:relative;overflow:hidden}@supports (color:color-mix(in lab,red,red)){.progress{background-color:color-mix(in oklab,currentColor 20%,transparent)}}.progress{color:var(--color-base-content)}.progress:indeterminate{background-image:repeating-linear-gradient(90deg,currentColor -1% 10%,#0000 10% 90%);background-position-x:15%;background-size:200%;animation:5s ease-in-out infinite progress}@supports ((-moz-appearance:none)){.progress:indeterminate::-moz-progress-bar{background-color:#0000;background-image:repeating-linear-gradient(90deg,currentColor -1% 10%,#0000 10% 90%);background-position-x:15%;background-size:200%;animation:5s ease-in-out infinite progress}.progress::-moz-progress-bar{border-radius:var(--radius-box);background-color:currentColor}}@supports ((-webkit-appearance:none)){.progress::-webkit-progress-bar{border-radius:var(--radius-box);background-color:#0000}.progress::-webkit-progress-value{border-radius:var(--radius-box);background-color:currentColor}}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.sticky{position:sticky}.top-0{top:calc(var(--spacing)*0)}.top-1\/2{top:50%}.top-12{top:calc(var(--spacing)*12)}.right-2{right:calc(var(--spacing)*2)}.left-0{left:calc(var(--spacing)*0)}.textarea{border:var(--border)solid #0000;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:var(--radius-field);background-color:var(--color-base-100);vertical-align:middle;touch-action:manipulation;border-color:var(--input-color);width:clamp(3rem,20rem,100%);min-height:5rem;box-shadow:0 1px var(--input-color) inset,0 -1px oklch(100% 0 0/calc(var(--depth)*.1)) inset;flex-shrink:1;padding-block:.5rem;padding-inline:.75rem;font-size:.875rem}@supports (color:color-mix(in lab,red,red)){.textarea{box-shadow:0 1px color-mix(in oklab,var(--input-color)calc(var(--depth)*10%),#0000) inset,0 -1px oklch(100% 0 0/calc(var(--depth)*.1)) inset}}.textarea{--input-color:var(--color-base-content)}@supports (color:color-mix(in lab,red,red)){.textarea{--input-color:color-mix(in oklab,var(--color-base-content)20%,#0000)}}.textarea textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#0000;border:none}.textarea textarea:focus,.textarea textarea:focus-within{--tw-outline-style:none;outline-style:none}@media (forced-colors:active){.textarea textarea:focus,.textarea textarea:focus-within{outline-offset:2px;outline:2px solid #0000}}.textarea:focus,.textarea:focus-within{--input-color:var(--color-base-content);box-shadow:0 1px var(--input-color)}@supports (color:color-mix(in lab,red,red)){.textarea:focus,.textarea:focus-within{box-shadow:0 1px color-mix(in oklab,var(--input-color)calc(var(--depth)*10%),#0000)}}.textarea:focus,.textarea:focus-within{outline:2px solid var(--input-color);outline-offset:2px;isolation:isolate}.textarea:has(>textarea[disabled]),.textarea:is(:disabled,[disabled]){cursor:not-allowed;border-color:var(--color-base-200);background-color:var(--color-base-200);color:var(--color-base-content)}@supports (color:color-mix(in lab,red,red)){.textarea:has(>textarea[disabled]),.textarea:is(:disabled,[disabled]){color:color-mix(in oklab,var(--color-base-content)40%,transparent)}}:is(.textarea:has(>textarea[disabled]),.textarea:is(:disabled,[disabled]))::placeholder{color:var(--color-base-content)}@supports (color:color-mix(in lab,red,red)){:is(.textarea:has(>textarea[disabled]),.textarea:is(:disabled,[disabled]))::placeholder{color:color-mix(in oklab,var(--color-base-content)20%,transparent)}}.textarea:has(>textarea[disabled]),.textarea:is(:disabled,[disabled]){box-shadow:none}.textarea:has(>textarea[disabled])>textarea[disabled]{cursor:not-allowed}.stack{grid-template-rows:3px 4px 1fr 4px 3px;grid-template-columns:3px 4px 1fr 4px 3px;display:inline-grid}.stack>*{width:100%;height:100%}.stack>:nth-child(n+2){opacity:.7;width:100%}.stack>:nth-child(2){z-index:2;opacity:.9}.stack>:first-child{z-index:3;width:100%}:is(.stack,.stack.stack-bottom)>*{grid-area:3/3/6/4}:is(.stack,.stack.stack-bottom)>:nth-child(2){grid-area:2/2/5/5}:is(.stack,.stack.stack-bottom)>:first-child{grid-area:1/1/4/6}.stack.stack-top>*{grid-area:1/3/4/4}.stack.stack-top>:nth-child(2){grid-area:2/2/5/5}.stack.stack-top>:first-child{grid-area:3/1/6/6}.stack.stack-start>*{grid-area:3/1/4/4}.stack.stack-start>:nth-child(2){grid-area:2/2/5/5}.stack.stack-start>:first-child{grid-area:1/3/6/6}.stack.stack-end>*{grid-area:3/3/4/6}.stack.stack-end>:nth-child(2){grid-area:2/2/5/5}.stack.stack-end>:first-child{grid-area:1/1/6/4}.z-10{z-index:10}.z-20{z-index:20}.tab-content{order:var(--tabcontent-order);--tabcontent-radius-ss:0;--tabcontent-radius-se:0;--tabcontent-radius-es:0;--tabcontent-radius-ee:0;--tabcontent-order:1;width:100%;margin:var(--tabcontent-margin);border-color:#0000;border-width:var(--border);border-start-start-radius:var(--tabcontent-radius-ss);border-start-end-radius:var(--tabcontent-radius-se);border-end-end-radius:var(--tabcontent-radius-ee);border-end-start-radius:var(--tabcontent-radius-es);display:none}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.container\!{width:100%!important}@media (min-width:40rem){.container\!{max-width:40rem!important}}@media (min-width:48rem){.container\!{max-width:48rem!important}}@media (min-width:64rem){.container\!{max-width:64rem!important}}@media (min-width:80rem){.container\!{max-width:80rem!important}}@media (min-width:96rem){.container\!{max-width:96rem!important}}.filter{flex-wrap:wrap;display:flex}.filter input[type=radio]{width:auto}.filter input{opacity:1;transition:margin .1s,opacity .3s,padding .3s,border-width .1s;overflow:hidden;scale:1}.filter input:not(:last-child){margin-inline-end:.25rem}.filter input.filter-reset{aspect-ratio:1}.filter input.filter-reset:after{content:"×"}.filter:not(:has(input:checked:not(.filter-reset))) .filter-reset,.filter:not(:has(input:checked:not(.filter-reset))) input[type=reset],.filter:has(input:checked:not(.filter-reset)) input:not(:checked,.filter-reset,input[type=reset]){opacity:0;border-width:0;width:0;margin-inline:0;padding-inline:0;scale:0}.mx-auto{margin-inline:auto}.input-sm{--size:calc(var(--size-field,.25rem)*8);font-size:.75rem}.input-sm[type=number]::-webkit-inner-spin-button{margin-block:-.5rem;margin-inline-end:-.75rem}.my-4{margin-block:calc(var(--spacing)*4)}.label{white-space:nowrap;color:currentColor;align-items:center;gap:.375rem;display:inline-flex}@supports (color:color-mix(in lab,red,red)){.label{color:color-mix(in oklab,currentColor 60%,transparent)}}.label:has(input){cursor:pointer}.label:is(.input>*,.select>*){white-space:nowrap;height:calc(100% - .5rem);font-size:inherit;align-items:center;padding-inline:.75rem;display:flex}.label:is(.input>*,.select>*):first-child{border-inline-end:var(--border)solid currentColor;margin-inline:-.75rem .75rem}@supports (color:color-mix(in lab,red,red)){.label:is(.input>*,.select>*):first-child{border-inline-end:var(--border)solid color-mix(in oklab,currentColor 10%,#0000)}}.label:is(.input>*,.select>*):last-child{border-inline-start:var(--border)solid currentColor;margin-inline:.75rem -.75rem}@supports (color:color-mix(in lab,red,red)){.label:is(.input>*,.select>*):last-child{border-inline-start:var(--border)solid color-mix(in oklab,currentColor 10%,#0000)}}.mt-8{margin-top:calc(var(--spacing)*8)}.mr-2{margin-right:calc(var(--spacing)*2)}.fieldset-legend{color:var(--color-base-content);justify-content:space-between;align-items:center;gap:.5rem;margin-bottom:-.25rem;padding-block:.5rem;font-weight:600;display:flex}.mb-1{margin-bottom:calc(var(--spacing)*1)}.mb-2{margin-bottom:calc(var(--spacing)*2)}.mb-3{margin-bottom:calc(var(--spacing)*3)}.mb-4{margin-bottom:calc(var(--spacing)*4)}.mb-8{margin-bottom:calc(var(--spacing)*8)}.ml-1{margin-left:calc(var(--spacing)*1)}.ml-2{margin-left:calc(var(--spacing)*2)}.status{aspect-ratio:1;border-radius:var(--radius-selector);background-color:var(--color-base-content);width:.5rem;height:.5rem;display:inline-block}@supports (color:color-mix(in lab,red,red)){.status{background-color:color-mix(in oklab,var(--color-base-content)20%,transparent)}}.status{vertical-align:middle;color:#0000004d;background-position:50%;background-repeat:no-repeat}@supports (color:color-mix(in lab,red,red)){.status{color:#0000004d}@supports (color:color-mix(in lab,red,red)){.status{color:color-mix(in oklab,var(--color-black)30%,transparent)}}}.status{background-image:radial-gradient(circle at 35% 30%,oklch(1 0 0/calc(var(--depth)*.5)),#0000);box-shadow:0 2px 3px -1px}@supports (color:color-mix(in lab,red,red)){.status{box-shadow:0 2px 3px -1px color-mix(in oklab,currentColor calc(var(--depth)*100%),#0000)}}.tabs{--tabs-height:auto;--tabs-direction:row;--tab-height:calc(var(--size-field,.25rem)*10);height:var(--tabs-height);flex-wrap:wrap;flex-direction:var(--tabs-direction);display:flex}.fieldset{grid-template-columns:1fr;grid-auto-rows:max-content;gap:.375rem;padding-block:.25rem;font-size:.75rem;display:grid}.card-title{font-size:var(--cardtitle-fs,1.125rem);align-items:center;gap:.5rem;font-weight:600;display:flex}.join{--join-ss:0;--join-se:0;--join-es:0;--join-ee:0;align-items:stretch;display:inline-flex}.join :where(.join-item){border-start-start-radius:var(--join-ss,0);border-start-end-radius:var(--join-se,0);border-end-end-radius:var(--join-ee,0);border-end-start-radius:var(--join-es,0)}.join :where(.join-item) *{--join-ss:var(--radius-field);--join-se:var(--radius-field);--join-es:var(--radius-field);--join-ee:var(--radius-field)}.join>.join-item:where(:first-child),.join :first-child:not(:last-child) :where(.join-item){--join-ss:var(--radius-field);--join-se:0;--join-es:var(--radius-field);--join-ee:0}.join>.join-item:where(:last-child),.join :last-child:not(:first-child) :where(.join-item){--join-ss:0;--join-se:var(--radius-field);--join-es:0;--join-ee:var(--radius-field)}.join>.join-item:where(:only-child),.join :only-child :where(.join-item){--join-ss:var(--radius-field);--join-se:var(--radius-field);--join-es:var(--radius-field);--join-ee:var(--radius-field)}.mask{vertical-align:middle;display:inline-block;-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-block{display:inline-block}.table{display:table}.h-4{height:calc(var(--spacing)*4)}.h-64{height:calc(var(--spacing)*64)}.max-h-48{max-height:calc(var(--spacing)*48)}.max-h-\[80vh\]{max-height:80vh}.min-h-screen{min-height:100vh}.loading-lg{width:calc(var(--size-selector,.25rem)*7)}.w-4{width:calc(var(--spacing)*4)}.w-11\/12{width:91.6667%}.w-48{width:calc(var(--spacing)*48)}.w-full{width:100%}.max-w-4xl{max-width:var(--container-4xl)}.max-w-full{max-width:100%}.min-w-\[220px\]{min-width:220px}.min-w-max{min-width:max-content}.flex-1{flex:1}.-translate-y-1\/2{--tw-translate-y: -50% ;translate:var(--tw-translate-x)var(--tw-translate-y)}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.link{cursor:pointer;text-decoration-line:underline}.link:focus{--tw-outline-style:none;outline-style:none}@media (forced-colors:active){.link:focus{outline-offset:2px;outline:2px solid #0000}}.link:focus-visible{outline-offset:2px;outline:2px solid}.cursor-pointer{cursor:pointer}.resize{resize:both}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-row{flex-direction:row}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-1{gap:calc(var(--spacing)*1)}.gap-2{gap:calc(var(--spacing)*2)}.gap-4{gap:calc(var(--spacing)*4)}.gap-8{gap:calc(var(--spacing)*8)}:where(.space-y-8>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*8)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*8)*calc(1 - var(--tw-space-y-reverse)))}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-auto{overflow:auto}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-b-3{border-bottom-style:var(--tw-border-style);border-bottom-width:3px}.border-gray-200{border-color:var(--color-gray-200)}.border-gray-700{border-color:var(--color-gray-700)}.border-b-gray-700{border-bottom-color:var(--color-gray-700)}.bg-base-100{background-color:var(--color-base-100)}.bg-base-200{background-color:var(--color-base-200)}.loading-spinner{-webkit-mask-image:url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='black' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform-origin='center'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='2s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dasharray' values='0,150;42,150;42,150' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dashoffset' values='0;-16;-59' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='black' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform-origin='center'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='2s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dasharray' values='0,150;42,150;42,150' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dashoffset' values='0;-16;-59' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E")}.radio-sm{padding:.1875rem}.radio-sm[type=radio]{--size:calc(var(--size-selector,.25rem)*5)}.p-4{padding:calc(var(--spacing)*4)}.px-2{padding-inline:calc(var(--spacing)*2)}.px-3{padding-inline:calc(var(--spacing)*3)}.py-1{padding-block:calc(var(--spacing)*1)}.pt-4{padding-top:calc(var(--spacing)*4)}.pr-2{padding-right:calc(var(--spacing)*2)}.pr-8{padding-right:calc(var(--spacing)*8)}.pl-6{padding-left:calc(var(--spacing)*6)}.pl-10{padding-left:calc(var(--spacing)*10)}.text-center{text-align:center}.text-left{text-align:left}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.text-gray-400{color:var(--color-gray-400)}.text-primary{color:var(--color-primary)}.text-red-500{color:var(--color-red-500)}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.blur{--tw-blur:blur(8px);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.invert{--tw-invert:invert(100%);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,visibility,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition\!{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,visibility,content-visibility,overlay,pointer-events!important;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function))!important;transition-duration:var(--tw-duration,var(--default-transition-duration))!important}.ease-in{--tw-ease:var(--ease-in);transition-timing-function:var(--ease-in)}.ease-in-out{--tw-ease:var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.ease-out{--tw-ease:var(--ease-out);transition-timing-function:var(--ease-out)}.select-none{-webkit-user-select:none;user-select:none}@media (hover:hover){.hover\:bg-base-100:hover{background-color:var(--color-base-100)}.hover\:bg-base-200:hover{background-color:var(--color-base-200)}.hover\:bg-base-300:hover{background-color:var(--color-base-300)}}@media (min-width:48rem){.md\:w-1\/2{width:50%}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:flex-row{flex-direction:row}.md\:gap-x-4{column-gap:calc(var(--spacing)*4)}}@media (min-width:64rem){.lg\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}}}@keyframes radio{0%{padding:5px}50%{padding:3px}}@keyframes skeleton{0%{background-position:150%}to{background-position:-50%}}@keyframes progress{50%{background-position-x:-115%}}@keyframes toast{0%{opacity:0;scale:.9}to{opacity:1;scale:1}}@keyframes dropdown{0%{opacity:0}}@keyframes rating{0%,40%{filter:brightness(1.05)contrast(1.05);scale:1.1}}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}

frontend/dist/assets/index-CwrBXUIs.css DELETED Viewed

@@ -1 +0,0 @@

- /*! tailwindcss v4.1.8 | MIT License | https://tailwindcss.com */@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-red-500:oklch(63.7% .237 25.331);--color-gray-100:oklch(96.7% .003 264.542);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-700:oklch(37.3% .034 259.733);--spacing:.25rem;--container-4xl:56rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-lg:1.125rem;--text-lg--line-height:calc(1.75/1.125);--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){-webkit-appearance:button;-moz-appearance:button;appearance:button}::file-selector-button{-webkit-appearance:button;-moz-appearance:button;appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}:where(:root),:root:has(input.theme-controller[value=light]:checked),[data-theme=light]{color-scheme:light;--color-base-100:oklch(100% 0 0);--color-base-200:oklch(98% 0 0);--color-base-300:oklch(95% 0 0);--color-base-content:oklch(21% .006 285.885);--color-primary:oklch(45% .24 277.023);--color-primary-content:oklch(93% .034 272.788);--color-secondary:oklch(65% .241 354.308);--color-secondary-content:oklch(94% .028 342.258);--color-accent:oklch(77% .152 181.912);--color-accent-content:oklch(38% .063 188.416);--color-neutral:oklch(14% .005 285.823);--color-neutral-content:oklch(92% .004 286.32);--color-info:oklch(74% .16 232.661);--color-info-content:oklch(29% .066 243.157);--color-success:oklch(76% .177 163.223);--color-success-content:oklch(37% .077 168.94);--color-warning:oklch(82% .189 84.429);--color-warning-content:oklch(41% .112 45.904);--color-error:oklch(71% .194 13.428);--color-error-content:oklch(27% .105 12.094);--radius-selector:.5rem;--radius-field:.25rem;--radius-box:.5rem;--size-selector:.25rem;--size-field:.25rem;--border:1px;--depth:1;--noise:0}@media (prefers-color-scheme:dark){:root{color-scheme:dark;--color-base-100:oklch(25.33% .016 252.42);--color-base-200:oklch(23.26% .014 253.1);--color-base-300:oklch(21.15% .012 254.09);--color-base-content:oklch(97.807% .029 256.847);--color-primary:oklch(58% .233 277.117);--color-primary-content:oklch(96% .018 272.314);--color-secondary:oklch(65% .241 354.308);--color-secondary-content:oklch(94% .028 342.258);--color-accent:oklch(77% .152 181.912);--color-accent-content:oklch(38% .063 188.416);--color-neutral:oklch(14% .005 285.823);--color-neutral-content:oklch(92% .004 286.32);--color-info:oklch(74% .16 232.661);--color-info-content:oklch(29% .066 243.157);--color-success:oklch(76% .177 163.223);--color-success-content:oklch(37% .077 168.94);--color-warning:oklch(82% .189 84.429);--color-warning-content:oklch(41% .112 45.904);--color-error:oklch(71% .194 13.428);--color-error-content:oklch(27% .105 12.094);--radius-selector:.5rem;--radius-field:.25rem;--radius-box:.5rem;--size-selector:.25rem;--size-field:.25rem;--border:1px;--depth:1;--noise:0}}:root:has(input.theme-controller[value=light]:checked),[data-theme=light]{color-scheme:light;--color-base-100:oklch(100% 0 0);--color-base-200:oklch(98% 0 0);--color-base-300:oklch(95% 0 0);--color-base-content:oklch(21% .006 285.885);--color-primary:oklch(45% .24 277.023);--color-primary-content:oklch(93% .034 272.788);--color-secondary:oklch(65% .241 354.308);--color-secondary-content:oklch(94% .028 342.258);--color-accent:oklch(77% .152 181.912);--color-accent-content:oklch(38% .063 188.416);--color-neutral:oklch(14% .005 285.823);--color-neutral-content:oklch(92% .004 286.32);--color-info:oklch(74% .16 232.661);--color-info-content:oklch(29% .066 243.157);--color-success:oklch(76% .177 163.223);--color-success-content:oklch(37% .077 168.94);--color-warning:oklch(82% .189 84.429);--color-warning-content:oklch(41% .112 45.904);--color-error:oklch(71% .194 13.428);--color-error-content:oklch(27% .105 12.094);--radius-selector:.5rem;--radius-field:.25rem;--radius-box:.5rem;--size-selector:.25rem;--size-field:.25rem;--border:1px;--depth:1;--noise:0}:root:has(input.theme-controller[value=dark]:checked),[data-theme=dark]{color-scheme:dark;--color-base-100:oklch(25.33% .016 252.42);--color-base-200:oklch(23.26% .014 253.1);--color-base-300:oklch(21.15% .012 254.09);--color-base-content:oklch(97.807% .029 256.847);--color-primary:oklch(58% .233 277.117);--color-primary-content:oklch(96% .018 272.314);--color-secondary:oklch(65% .241 354.308);--color-secondary-content:oklch(94% .028 342.258);--color-accent:oklch(77% .152 181.912);--color-accent-content:oklch(38% .063 188.416);--color-neutral:oklch(14% .005 285.823);--color-neutral-content:oklch(92% .004 286.32);--color-info:oklch(74% .16 232.661);--color-info-content:oklch(29% .066 243.157);--color-success:oklch(76% .177 163.223);--color-success-content:oklch(37% .077 168.94);--color-warning:oklch(82% .189 84.429);--color-warning-content:oklch(41% .112 45.904);--color-error:oklch(71% .194 13.428);--color-error-content:oklch(27% .105 12.094);--radius-selector:.5rem;--radius-field:.25rem;--radius-box:.5rem;--size-selector:.25rem;--size-field:.25rem;--border:1px;--depth:1;--noise:0}@property --radialprogress{syntax: "<percentage>"; inherits: true; initial-value: 0%;}:root{scrollbar-color:currentColor #0000}@supports (color:color-mix(in lab,red,red)){:root{scrollbar-color:color-mix(in oklch,currentColor 35%,#0000)#0000}}:root{--fx-noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.34' numOctaves='4' stitchTiles='stitch'%3E%3C/feTurbulence%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)' opacity='0.2'%3E%3C/rect%3E%3C/svg%3E")}:root:has(.modal-open,.modal[open],.modal:target,.modal-toggle:checked,.drawer:not([class*=drawer-open])>.drawer-toggle:checked){overflow:hidden}:where(:root:has(.modal-open,.modal[open],.modal:target,.modal-toggle:checked,.drawer:not(.drawer-open)>.drawer-toggle:checked)){scrollbar-gutter:stable;background-image:linear-gradient(var(--color-base-100),var(--color-base-100));--root-bg:var(--color-base-100)}@supports (color:color-mix(in lab,red,red)){:where(:root:has(.modal-open,.modal[open],.modal:target,.modal-toggle:checked,.drawer:not(.drawer-open)>.drawer-toggle:checked)){--root-bg:color-mix(in srgb,var(--color-base-100),oklch(0% 0 0) 40%)}}:where(.modal[open],.modal-open,.modal-toggle:checked+.modal):not(.modal-start,.modal-end){scrollbar-gutter:stable}:root,[data-theme]{background-color:var(--root-bg,var(--color-base-100));color:var(--color-base-content)}}@layer components;@layer utilities{.diff{webkit-user-select:none;-webkit-user-select:none;user-select:none;direction:ltr;grid-template-columns:auto 1fr;width:100%;display:grid;position:relative;overflow:hidden;container-type:inline-size}.diff:focus-visible,.diff:has(.diff-item-1:focus-visible){outline-style:var(--tw-outline-style);outline-offset:1px;outline-width:2px;outline-color:var(--color-base-content)}.diff:focus-visible .diff-resizer{min-width:90cqi;max-width:90cqi}.diff:has(.diff-item-2:focus-visible){outline-style:var(--tw-outline-style);outline-offset:1px;outline-width:2px}.diff:has(.diff-item-2:focus-visible) .diff-resizer{min-width:10cqi;max-width:10cqi}@supports (-webkit-overflow-scrolling:touch) and (overflow:-webkit-paged-x){.diff:focus .diff-resizer{min-width:10cqi;max-width:10cqi}.diff:has(.diff-item-1:focus) .diff-resizer{min-width:90cqi;max-width:90cqi}}.tab{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:center;webkit-user-select:none;-webkit-user-select:none;user-select:none;flex-wrap:wrap;justify-content:center;align-items:center;display:inline-flex;position:relative}@media (hover:hover){.tab:hover{color:var(--color-base-content)}}.tab{--tab-p:1rem;--tab-bg:var(--color-base-100);--tab-border-color:var(--color-base-300);--tab-radius-ss:0;--tab-radius-se:0;--tab-radius-es:0;--tab-radius-ee:0;--tab-order:0;--tab-radius-min:calc(.75rem - var(--border));order:var(--tab-order);height:var(--tab-height);border-color:#0000;padding-inline-start:var(--tab-p);padding-inline-end:var(--tab-p);font-size:.875rem}.tab:is(input[type=radio]){min-width:fit-content}.tab:is(input[type=radio]):after{content:attr(aria-label)}.tab:is(label){position:relative}.tab:is(label) input{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;opacity:0;position:absolute;top:0;right:0;bottom:0;left:0}:is(.tab:checked,.tab:is(label:has(:checked)),.tab:is(.tab-active,[aria-selected=true]))+.tab-content{height:calc(100% - var(--tab-height) + var(--border));display:block}.tab:not(:checked,label:has(:checked),:hover,.tab-active,[aria-selected=true]){color:var(--color-base-content)}@supports (color:color-mix(in lab,red,red)){.tab:not(:checked,label:has(:checked),:hover,.tab-active,[aria-selected=true]){color:color-mix(in oklab,var(--color-base-content)50%,transparent)}}.tab:not(input):empty{cursor:default;flex-grow:1}.tab:focus{--tw-outline-style:none;outline-style:none}@media (forced-colors:active){.tab:focus{outline-offset:2px;outline:2px solid #0000}}.tab:focus-visible,.tab:is(label:has(:checked:focus-visible)){outline-offset:-5px;outline:2px solid}.tab[disabled]{pointer-events:none;opacity:.4}.loading{pointer-events:none;aspect-ratio:1;vertical-align:middle;width:calc(var(--size-selector,.25rem)*6);background-color:currentColor;display:inline-block;-webkit-mask-image:url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='black' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform-origin='center'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='2s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dasharray' values='0,150;42,150;42,150' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dashoffset' values='0;-16;-59' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='black' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform-origin='center'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='2s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dasharray' values='0,150;42,150;42,150' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dashoffset' values='0;-16;-59' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:100%;mask-size:100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.pointer-events-none{pointer-events:none}.collapse:not(td,tr,colgroup){visibility:visible}.collapse{border-radius:var(--radius-box,1rem);isolation:isolate;grid-template-rows:max-content 0fr;width:100%;transition:grid-template-rows .2s;display:grid;position:relative;overflow:hidden}.collapse>input:is([type=checkbox],[type=radio]){-webkit-appearance:none;-moz-appearance:none;appearance:none;opacity:0;z-index:1;grid-row-start:1;grid-column-start:1;width:100%;min-height:1lh;padding:1rem;padding-inline-end:3rem;transition:background-color .2s ease-out}.collapse:is([open],:focus:not(.collapse-close)),.collapse:not(.collapse-close):has(>input:is([type=checkbox],[type=radio]):checked){grid-template-rows:max-content 1fr}.collapse:is([open],:focus:not(.collapse-close))>.collapse-content,.collapse:not(.collapse-close)>:where(input:is([type=checkbox],[type=radio]):checked~.collapse-content){visibility:visible;min-height:fit-content}.collapse:focus-visible,.collapse:has(>input:is([type=checkbox],[type=radio]):focus-visible){outline-color:var(--color-base-content);outline-offset:2px;outline-width:2px;outline-style:solid}.collapse:not(.collapse-close)>input[type=checkbox],.collapse:not(.collapse-close)>input[type=radio]:not(:checked),.collapse:not(.collapse-close)>.collapse-title{cursor:pointer}.collapse:focus:not(.collapse-close,.collapse[open])>.collapse-title{cursor:unset}.collapse:is([open],:focus:not(.collapse-close))>:where(.collapse-content),.collapse:not(.collapse-close)>:where(input:is([type=checkbox],[type=radio]):checked~.collapse-content){padding-bottom:1rem;transition:padding .2s ease-out,background-color .2s ease-out}.collapse[open].collapse-arrow>.collapse-title:after,.collapse.collapse-open.collapse-arrow>.collapse-title:after{transform:translateY(-50%)rotate(225deg)}.collapse.collapse-open.collapse-plus>.collapse-title:after{content:"−"}.collapse.collapse-arrow:focus:not(.collapse-close)>.collapse-title:after,.collapse.collapse-arrow:not(.collapse-close)>input:is([type=checkbox],[type=radio]):checked~.collapse-title:after{transform:translateY(-50%)rotate(225deg)}.collapse[open].collapse-plus>.collapse-title:after,.collapse.collapse-plus:focus:not(.collapse-close)>.collapse-title:after,.collapse.collapse-plus:not(.collapse-close)>input:is([type=checkbox],[type=radio]):checked~.collapse-title:after{content:"−"}.collapse:is(details){width:100%}.collapse:is(details) summary{display:block;position:relative}.collapse:is(details) summary::-webkit-details-marker{display:none}.collapse:is(details) summary{outline:none}.collapse{visibility:collapse}.visible{visibility:visible}.toggle{border:var(--border)solid currentColor;color:var(--input-color);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;vertical-align:middle;webkit-user-select:none;-webkit-user-select:none;user-select:none;--radius-selector-max:calc(var(--radius-selector) + var(--radius-selector) + var(--radius-selector));border-radius:calc(var(--radius-selector) + min(var(--toggle-p),var(--radius-selector-max)) + min(var(--border),var(--radius-selector-max)));padding:var(--toggle-p);flex-shrink:0;grid-template-columns:0fr 1fr 1fr;place-content:center;display:inline-grid;position:relative;box-shadow:inset 0 1px}@supports (color:color-mix(in lab,red,red)){.toggle{box-shadow:0 1px color-mix(in oklab,currentColor calc(var(--depth)*10%),#0000) inset}}.toggle{--input-color:var(--color-base-content);transition:color .3s,grid-template-columns .2s}@supports (color:color-mix(in lab,red,red)){.toggle{--input-color:color-mix(in oklab,var(--color-base-content)50%,#0000)}}.toggle{--toggle-p:calc(var(--size)*.125);--size:calc(var(--size-selector,.25rem)*6);width:calc((var(--size)*2) - (var(--border) + var(--toggle-p))*2);height:var(--size)}.toggle>*{z-index:1;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#0000;border:none;grid-column:2/span 1;grid-row-start:1;height:100%;padding:.125rem;transition:opacity .2s,rotate .4s}.toggle>:focus{--tw-outline-style:none;outline-style:none}@media (forced-colors:active){.toggle>:focus{outline-offset:2px;outline:2px solid #0000}}.toggle>:nth-child(2){color:var(--color-base-100);rotate:none}.toggle>:nth-child(3){color:var(--color-base-100);opacity:0;rotate:-15deg}.toggle:has(:checked)>:nth-child(2){opacity:0;rotate:15deg}.toggle:has(:checked)>:nth-child(3){opacity:1;rotate:none}.toggle:before{aspect-ratio:1;border-radius:var(--radius-selector);--tw-content:"";content:var(--tw-content);height:100%;box-shadow:0 -1px oklch(0% 0 0/calc(var(--depth)*.1)) inset,0 8px 0 -4px oklch(100% 0 0/calc(var(--depth)*.1)) inset,0 1px currentColor;background-color:currentColor;grid-row-start:1;grid-column-start:2;transition:background-color .1s,translate .2s,inset-inline-start .2s;position:relative;inset-inline-start:0;translate:0}@supports (color:color-mix(in lab,red,red)){.toggle:before{box-shadow:0 -1px oklch(0% 0 0/calc(var(--depth)*.1)) inset,0 8px 0 -4px oklch(100% 0 0/calc(var(--depth)*.1)) inset,0 1px color-mix(in oklab,currentColor calc(var(--depth)*10%),#0000)}}.toggle:before{background-size:auto,calc(var(--noise)*100%);background-image:none,var(--fx-noise)}@media (forced-colors:active){.toggle:before{outline-style:var(--tw-outline-style);outline-offset:-1px;outline-width:1px}}@media print{.toggle:before{outline-offset:-1rem;outline:.25rem solid}}.toggle:focus-visible,.toggle:has(:focus-visible){outline-offset:2px;outline:2px solid}.toggle:checked,.toggle[aria-checked=true],.toggle:has(>input:checked){background-color:var(--color-base-100);--input-color:var(--color-base-content);grid-template-columns:1fr 1fr 0fr}:is(.toggle:checked,.toggle[aria-checked=true],.toggle:has(>input:checked)):before{background-color:currentColor}@starting-style{:is(.toggle:checked,.toggle[aria-checked=true],.toggle:has(>input:checked)):before{opacity:0}}.toggle:indeterminate{grid-template-columns:.5fr 1fr .5fr}.toggle:disabled{cursor:not-allowed;opacity:.3}.toggle:disabled:before{border:var(--border)solid currentColor;background-color:#0000}.input{cursor:text;border:var(--border)solid #0000;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--color-base-100);vertical-align:middle;white-space:nowrap;width:clamp(3rem,20rem,100%);height:var(--size);touch-action:manipulation;border-color:var(--input-color);box-shadow:0 1px var(--input-color) inset,0 -1px oklch(100% 0 0/calc(var(--depth)*.1)) inset;border-start-start-radius:var(--join-ss,var(--radius-field));border-start-end-radius:var(--join-se,var(--radius-field));border-end-end-radius:var(--join-ee,var(--radius-field));border-end-start-radius:var(--join-es,var(--radius-field));flex-shrink:1;align-items:center;gap:.5rem;padding-inline:.75rem;font-size:.875rem;display:inline-flex;position:relative}@supports (color:color-mix(in lab,red,red)){.input{box-shadow:0 1px color-mix(in oklab,var(--input-color)calc(var(--depth)*10%),#0000) inset,0 -1px oklch(100% 0 0/calc(var(--depth)*.1)) inset}}.input{--size:calc(var(--size-field,.25rem)*10);--input-color:var(--color-base-content)}@supports (color:color-mix(in lab,red,red)){.input{--input-color:color-mix(in oklab,var(--color-base-content)20%,#0000)}}.input:where(input){display:inline-flex}.input :where(input){-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#0000;border:none;width:100%;height:100%;display:inline-flex}.input :where(input):focus,.input :where(input):focus-within{--tw-outline-style:none;outline-style:none}@media (forced-colors:active){.input :where(input):focus,.input :where(input):focus-within{outline-offset:2px;outline:2px solid #0000}}.input :where(input[type=url]),.input :where(input[type=email]){direction:ltr}.input :where(input[type=date]){display:inline-block}.input:focus,.input:focus-within{--input-color:var(--color-base-content);box-shadow:0 1px var(--input-color)}@supports (color:color-mix(in lab,red,red)){.input:focus,.input:focus-within{box-shadow:0 1px color-mix(in oklab,var(--input-color)calc(var(--depth)*10%),#0000)}}.input:focus,.input:focus-within{outline:2px solid var(--input-color);outline-offset:2px;isolation:isolate;z-index:1}.input:has(>input[disabled]),.input:is(:disabled,[disabled]){cursor:not-allowed;border-color:var(--color-base-200);background-color:var(--color-base-200);color:var(--color-base-content)}@supports (color:color-mix(in lab,red,red)){.input:has(>input[disabled]),.input:is(:disabled,[disabled]){color:color-mix(in oklab,var(--color-base-content)40%,transparent)}}:is(.input:has(>input[disabled]),.input:is(:disabled,[disabled]))::placeholder{color:var(--color-base-content)}@supports (color:color-mix(in lab,red,red)){:is(.input:has(>input[disabled]),.input:is(:disabled,[disabled]))::placeholder{color:color-mix(in oklab,var(--color-base-content)20%,transparent)}}.input:has(>input[disabled]),.input:is(:disabled,[disabled]){box-shadow:none}.input:has(>input[disabled])>input[disabled]{cursor:not-allowed}.input::-webkit-date-and-time-value{text-align:inherit}.input[type=number]::-webkit-inner-spin-button{margin-block:-.75rem;margin-inline-end:-.75rem}.input::-webkit-calendar-picker-indicator{position:absolute;inset-inline-end:.75em}.table{border-radius:var(--radius-box);text-align:left;width:100%;font-size:.875rem;position:relative}.table:where(:dir(rtl),[dir=rtl],[dir=rtl] *){text-align:right}@media (hover:hover){:is(.table tr.row-hover,.table tr.row-hover:nth-child(2n)):hover{background-color:var(--color-base-200)}}.table :where(th,td){vertical-align:middle;padding-block:.75rem;padding-inline:1rem}.table :where(thead,tfoot){white-space:nowrap;color:var(--color-base-content)}@supports (color:color-mix(in lab,red,red)){.table :where(thead,tfoot){color:color-mix(in oklab,var(--color-base-content)60%,transparent)}}.table :where(thead,tfoot){font-size:.875rem;font-weight:600}.table :where(tfoot){border-top:var(--border)solid var(--color-base-content)}@supports (color:color-mix(in lab,red,red)){.table :where(tfoot){border-top:var(--border)solid color-mix(in oklch,var(--color-base-content)5%,#0000)}}.table :where(.table-pin-rows thead tr){z-index:1;background-color:var(--color-base-100);position:sticky;top:0}.table :where(.table-pin-rows tfoot tr){z-index:1;background-color:var(--color-base-100);position:sticky;bottom:0}.table :where(.table-pin-cols tr th){background-color:var(--color-base-100);position:sticky;left:0;right:0}.table :where(thead tr,tbody tr:not(:last-child)){border-bottom:var(--border)solid var(--color-base-content)}@supports (color:color-mix(in lab,red,red)){.table :where(thead tr,tbody tr:not(:last-child)){border-bottom:var(--border)solid color-mix(in oklch,var(--color-base-content)5%,#0000)}}.tabs-border .tab{--tab-border-color:#0000 #0000 var(--tab-border-color)#0000;border-radius:var(--radius-field);position:relative}.tabs-border .tab:before{--tw-content:"";content:var(--tw-content);background-color:var(--tab-border-color);border-radius:var(--radius-field);width:80%;height:3px;transition:background-color .2s;position:absolute;bottom:0;left:10%}:is(.tabs-border .tab:is(.tab-active,[aria-selected=true]):not(.tab-disabled,[disabled]),.tabs-border .tab:is(input:checked),.tabs-border .tab:is(label:has(:checked))):before{--tab-border-color:currentColor;border-top:3px solid}.select{border:var(--border)solid #0000;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--color-base-100);vertical-align:middle;width:clamp(3rem,20rem,100%);height:var(--size);touch-action:manipulation;text-overflow:ellipsis;box-shadow:0 1px var(--input-color) inset,0 -1px oklch(100% 0 0/calc(var(--depth)*.1)) inset;background-image:linear-gradient(45deg,#0000 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,#0000 50%);background-position:calc(100% - 20px) calc(1px + 50%),calc(100% - 16.1px) calc(1px + 50%);background-repeat:no-repeat;background-size:4px 4px,4px 4px;border-start-start-radius:var(--join-ss,var(--radius-field));border-start-end-radius:var(--join-se,var(--radius-field));border-end-end-radius:var(--join-ee,var(--radius-field));border-end-start-radius:var(--join-es,var(--radius-field));flex-shrink:1;align-items:center;gap:.375rem;padding-inline:1rem 1.75rem;font-size:.875rem;display:inline-flex;position:relative}@supports (color:color-mix(in lab,red,red)){.select{box-shadow:0 1px color-mix(in oklab,var(--input-color)calc(var(--depth)*10%),#0000) inset,0 -1px oklch(100% 0 0/calc(var(--depth)*.1)) inset}}.select{border-color:var(--input-color);--input-color:var(--color-base-content)}@supports (color:color-mix(in lab,red,red)){.select{--input-color:color-mix(in oklab,var(--color-base-content)20%,#0000)}}.select{--size:calc(var(--size-field,.25rem)*10)}[dir=rtl] .select{background-position:12px calc(1px + 50%),16px calc(1px + 50%)}.select select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:inherit;border-radius:inherit;border-style:none;width:calc(100% + 2.75rem);height:calc(100% - 2px);margin-inline:-1rem -1.75rem;padding-inline:1rem 1.75rem}.select select:focus,.select select:focus-within{--tw-outline-style:none;outline-style:none}@media (forced-colors:active){.select select:focus,.select select:focus-within{outline-offset:2px;outline:2px solid #0000}}.select select:not(:last-child){background-image:none;margin-inline-end:-1.375rem}.select:focus,.select:focus-within{--input-color:var(--color-base-content);box-shadow:0 1px var(--input-color)}@supports (color:color-mix(in lab,red,red)){.select:focus,.select:focus-within{box-shadow:0 1px color-mix(in oklab,var(--input-color)calc(var(--depth)*10%),#0000)}}.select:focus,.select:focus-within{outline:2px solid var(--input-color);outline-offset:2px;isolation:isolate;z-index:1}.select:has(>select[disabled]),.select:is(:disabled,[disabled]){cursor:not-allowed;border-color:var(--color-base-200);background-color:var(--color-base-200);color:var(--color-base-content)}@supports (color:color-mix(in lab,red,red)){.select:has(>select[disabled]),.select:is(:disabled,[disabled]){color:color-mix(in oklab,var(--color-base-content)40%,transparent)}}:is(.select:has(>select[disabled]),.select:is(:disabled,[disabled]))::placeholder{color:var(--color-base-content)}@supports (color:color-mix(in lab,red,red)){:is(.select:has(>select[disabled]),.select:is(:disabled,[disabled]))::placeholder{color:color-mix(in oklab,var(--color-base-content)20%,transparent)}}.select:has(>select[disabled])>select[disabled]{cursor:not-allowed}.checkbox{border:var(--border)solid var(--input-color,var(--color-base-content))}@supports (color:color-mix(in lab,red,red)){.checkbox{border:var(--border)solid var(--input-color,color-mix(in oklab,var(--color-base-content)20%,#0000))}}.checkbox{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:var(--radius-selector);vertical-align:middle;color:var(--color-base-content);box-shadow:0 1px oklch(0% 0 0/calc(var(--depth)*.1)) inset,0 0 #0000 inset,0 0 #0000;--size:calc(var(--size-selector,.25rem)*6);width:var(--size);height:var(--size);background-size:auto,calc(var(--noise)*100%);background-image:none,var(--fx-noise);flex-shrink:0;padding:.25rem;transition:background-color .2s,box-shadow .2s;display:inline-block;position:relative}.checkbox:before{--tw-content:"";content:var(--tw-content);opacity:0;clip-path:polygon(20% 100%,20% 80%,50% 80%,50% 80%,70% 80%,70% 100%);width:100%;height:100%;box-shadow:0 3px oklch(100% 0 0/calc(var(--depth)*.1)) inset;background-color:currentColor;font-size:1rem;line-height:.75;transition:clip-path .3s .1s,opacity .1s .1s,rotate .3s .1s,translate .3s .1s;display:block;rotate:45deg}.checkbox:focus-visible{outline:2px solid var(--input-color,currentColor);outline-offset:2px}.checkbox:checked,.checkbox[aria-checked=true]{background-color:var(--input-color,#0000);box-shadow:0 0 #0000 inset,0 8px 0 -4px oklch(100% 0 0/calc(var(--depth)*.1)) inset,0 1px oklch(0% 0 0/calc(var(--depth)*.1))}:is(.checkbox:checked,.checkbox[aria-checked=true]):before{clip-path:polygon(20% 100%,20% 80%,50% 80%,50% 0%,70% 0%,70% 100%);opacity:1}@media (forced-colors:active){:is(.checkbox:checked,.checkbox[aria-checked=true]):before{--tw-content:"✔︎";clip-path:none;background-color:#0000;rotate:none}}@media print{:is(.checkbox:checked,.checkbox[aria-checked=true]):before{--tw-content:"✔︎";clip-path:none;background-color:#0000;rotate:none}}.checkbox:indeterminate:before{opacity:1;clip-path:polygon(20% 100%,20% 80%,50% 80%,50% 80%,80% 80%,80% 100%);translate:0 -35%;rotate:none}.checkbox:disabled{cursor:not-allowed;opacity:.2}.radio{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;vertical-align:middle;border:var(--border)solid var(--input-color,currentColor);border-radius:3.40282e38px;flex-shrink:0;padding:.25rem;display:inline-block;position:relative}@supports (color:color-mix(in lab,red,red)){.radio{border:var(--border)solid var(--input-color,color-mix(in srgb,currentColor 20%,#0000))}}.radio{box-shadow:0 1px oklch(0% 0 0/calc(var(--depth)*.1)) inset;--size:calc(var(--size-selector,.25rem)*6);width:var(--size);height:var(--size);color:var(--input-color,currentColor)}.radio:before{--tw-content:"";content:var(--tw-content);background-size:auto,calc(var(--noise)*100%);background-image:none,var(--fx-noise);border-radius:3.40282e38px;width:100%;height:100%;display:block}.radio:focus-visible{outline:2px solid}.radio:checked,.radio[aria-checked=true]{background-color:var(--color-base-100);border-color:currentColor;animation:.2s ease-out radio}:is(.radio:checked,.radio[aria-checked=true]):before{box-shadow:0 -1px oklch(0% 0 0/calc(var(--depth)*.1)) inset,0 8px 0 -4px oklch(100% 0 0/calc(var(--depth)*.1)) inset,0 1px oklch(0% 0 0/calc(var(--depth)*.1));background-color:currentColor}@media (forced-colors:active){:is(.radio:checked,.radio[aria-checked=true]):before{outline-style:var(--tw-outline-style);outline-offset:-1px;outline-width:1px}}@media print{:is(.radio:checked,.radio[aria-checked=true]):before{outline-offset:-1rem;outline:.25rem solid}}.radio:disabled{cursor:not-allowed;opacity:.2}.stats{border-radius:var(--radius-box);grid-auto-flow:column;display:inline-grid;position:relative;overflow-x:auto}.absolute{position:absolute}.relative{position:relative}.static{position:static}.sticky{position:sticky}.top-0{top:calc(var(--spacing)*0)}.top-1\/2{top:50%}.top-12{top:calc(var(--spacing)*12)}.right-2{right:calc(var(--spacing)*2)}.left-0{left:calc(var(--spacing)*0)}.z-10{z-index:10}.z-20{z-index:20}.tab-content{order:var(--tabcontent-order);--tabcontent-radius-ss:0;--tabcontent-radius-se:0;--tabcontent-radius-es:0;--tabcontent-radius-ee:0;--tabcontent-order:1;width:100%;margin:var(--tabcontent-margin);border-color:#0000;border-width:var(--border);border-start-start-radius:var(--tabcontent-radius-ss);border-start-end-radius:var(--tabcontent-radius-se);border-end-end-radius:var(--tabcontent-radius-ee);border-end-start-radius:var(--tabcontent-radius-es);display:none}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.filter{flex-wrap:wrap;display:flex}.filter input[type=radio]{width:auto}.filter input{opacity:1;transition:margin .1s,opacity .3s,padding .3s,border-width .1s;overflow:hidden;scale:1}.filter input:not(:last-child){margin-inline-end:.25rem}.filter input.filter-reset{aspect-ratio:1}.filter input.filter-reset:after{content:"×"}.filter:not(:has(input:checked:not(.filter-reset))) .filter-reset,.filter:not(:has(input:checked:not(.filter-reset))) input[type=reset],.filter:has(input:checked:not(.filter-reset)) input:not(:checked,.filter-reset,input[type=reset]){opacity:0;border-width:0;width:0;margin-inline:0;padding-inline:0;scale:0}.mx-auto{margin-inline:auto}.input-sm{--size:calc(var(--size-field,.25rem)*8);font-size:.75rem}.input-sm[type=number]::-webkit-inner-spin-button{margin-block:-.5rem;margin-inline-end:-.75rem}.my-4{margin-block:calc(var(--spacing)*4)}.label{white-space:nowrap;color:currentColor;align-items:center;gap:.375rem;display:inline-flex}@supports (color:color-mix(in lab,red,red)){.label{color:color-mix(in oklab,currentColor 60%,transparent)}}.label:has(input){cursor:pointer}.label:is(.input>*,.select>*){white-space:nowrap;height:calc(100% - .5rem);font-size:inherit;align-items:center;padding-inline:.75rem;display:flex}.label:is(.input>*,.select>*):first-child{border-inline-end:var(--border)solid currentColor;margin-inline:-.75rem .75rem}@supports (color:color-mix(in lab,red,red)){.label:is(.input>*,.select>*):first-child{border-inline-end:var(--border)solid color-mix(in oklab,currentColor 10%,#0000)}}.label:is(.input>*,.select>*):last-child{border-inline-start:var(--border)solid currentColor;margin-inline:.75rem -.75rem}@supports (color:color-mix(in lab,red,red)){.label:is(.input>*,.select>*):last-child{border-inline-start:var(--border)solid color-mix(in oklab,currentColor 10%,#0000)}}.mt-8{margin-top:calc(var(--spacing)*8)}.mr-2{margin-right:calc(var(--spacing)*2)}.fieldset-legend{color:var(--color-base-content);justify-content:space-between;align-items:center;gap:.5rem;margin-bottom:-.25rem;padding-block:.5rem;font-weight:600;display:flex}.mb-1{margin-bottom:calc(var(--spacing)*1)}.mb-2{margin-bottom:calc(var(--spacing)*2)}.mb-3{margin-bottom:calc(var(--spacing)*3)}.mb-4{margin-bottom:calc(var(--spacing)*4)}.mb-8{margin-bottom:calc(var(--spacing)*8)}.ml-2{margin-left:calc(var(--spacing)*2)}.tabs{--tabs-height:auto;--tabs-direction:row;--tab-height:calc(var(--size-field,.25rem)*10);height:var(--tabs-height);flex-wrap:wrap;flex-direction:var(--tabs-direction);display:flex}.fieldset{grid-template-columns:1fr;grid-auto-rows:max-content;gap:.375rem;padding-block:.25rem;font-size:.75rem;display:grid}.card-title{font-size:var(--cardtitle-fs,1.125rem);align-items:center;gap:.5rem;font-weight:600;display:flex}.join{--join-ss:0;--join-se:0;--join-es:0;--join-ee:0;align-items:stretch;display:inline-flex}.join :where(.join-item){border-start-start-radius:var(--join-ss,0);border-start-end-radius:var(--join-se,0);border-end-end-radius:var(--join-ee,0);border-end-start-radius:var(--join-es,0)}.join :where(.join-item) *{--join-ss:var(--radius-field);--join-se:var(--radius-field);--join-es:var(--radius-field);--join-ee:var(--radius-field)}.join>.join-item:where(:first-child),.join :first-child:not(:last-child) :where(.join-item){--join-ss:var(--radius-field);--join-se:0;--join-es:var(--radius-field);--join-ee:0}.join>.join-item:where(:last-child),.join :last-child:not(:first-child) :where(.join-item){--join-ss:0;--join-se:var(--radius-field);--join-es:0;--join-ee:var(--radius-field)}.join>.join-item:where(:only-child),.join :only-child :where(.join-item){--join-ss:var(--radius-field);--join-se:var(--radius-field);--join-es:var(--radius-field);--join-ee:var(--radius-field)}.flex{display:flex}.grid{display:grid}.table{display:table}.h-4{height:calc(var(--spacing)*4)}.h-64{height:calc(var(--spacing)*64)}.max-h-48{max-height:calc(var(--spacing)*48)}.max-h-\[80vh\]{max-height:80vh}.min-h-screen{min-height:100vh}.loading-lg{width:calc(var(--size-selector,.25rem)*7)}.w-4{width:calc(var(--spacing)*4)}.w-11\/12{width:91.6667%}.w-48{width:calc(var(--spacing)*48)}.w-full{width:100%}.max-w-4xl{max-width:var(--container-4xl)}.max-w-full{max-width:100%}.min-w-\[220px\]{min-width:220px}.min-w-max{min-width:max-content}.flex-1{flex:1}.-translate-y-1\/2{--tw-translate-y: -50% ;translate:var(--tw-translate-x)var(--tw-translate-y)}.cursor-pointer{cursor:pointer}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-row{flex-direction:row}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-1{gap:calc(var(--spacing)*1)}.gap-2{gap:calc(var(--spacing)*2)}.gap-4{gap:calc(var(--spacing)*4)}.gap-8{gap:calc(var(--spacing)*8)}:where(.space-y-8>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*8)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*8)*calc(1 - var(--tw-space-y-reverse)))}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-auto{overflow:auto}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.border{border-style:var(--tw-border-style);border-width:1px}.border-x{border-inline-style:var(--tw-border-style);border-inline-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-b-2{border-bottom-style:var(--tw-border-style);border-bottom-width:2px}.border-gray-100{border-color:var(--color-gray-100)}.border-gray-200{border-color:var(--color-gray-200)}.border-gray-300{border-color:var(--color-gray-300)}.border-gray-700{border-color:var(--color-gray-700)}.border-b-gray-700{border-bottom-color:var(--color-gray-700)}.bg-base-100{background-color:var(--color-base-100)}.bg-base-200{background-color:var(--color-base-200)}.loading-spinner{-webkit-mask-image:url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='black' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform-origin='center'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='2s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dasharray' values='0,150;42,150;42,150' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dashoffset' values='0;-16;-59' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='black' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform-origin='center'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='2s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dasharray' values='0,150;42,150;42,150' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dashoffset' values='0;-16;-59' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E")}.radio-sm{padding:.1875rem}.radio-sm[type=radio]{--size:calc(var(--size-selector,.25rem)*5)}.p-4{padding:calc(var(--spacing)*4)}.px-2{padding-inline:calc(var(--spacing)*2)}.px-3{padding-inline:calc(var(--spacing)*3)}.py-1{padding-block:calc(var(--spacing)*1)}.pt-4{padding-top:calc(var(--spacing)*4)}.pr-2{padding-right:calc(var(--spacing)*2)}.pr-8{padding-right:calc(var(--spacing)*8)}.pl-6{padding-left:calc(var(--spacing)*6)}.pl-10{padding-left:calc(var(--spacing)*10)}.text-center{text-align:center}.text-left{text-align:left}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.text-gray-400{color:var(--color-gray-400)}.text-primary{color:var(--color-primary)}.text-red-500{color:var(--color-red-500)}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.filter{filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}@media (hover:hover){.hover\:bg-base-100:hover{background-color:var(--color-base-100)}.hover\:bg-base-200:hover{background-color:var(--color-base-200)}.hover\:bg-base-300:hover{background-color:var(--color-base-300)}}@media (min-width:48rem){.md\:w-1\/2{width:50%}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:flex-row{flex-direction:row}.md\:gap-x-4{column-gap:calc(var(--spacing)*4)}}@media (min-width:64rem){.lg\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}}}@keyframes radio{0%{padding:5px}50%{padding:3px}}@keyframes skeleton{0%{background-position:150%}to{background-position:-50%}}@keyframes progress{50%{background-position-x:-115%}}@keyframes toast{0%{opacity:0;scale:.9}to{opacity:1;scale:1}}@keyframes dropdown{0%{opacity:0}}@keyframes rating{0%,40%{filter:brightness(1.05)contrast(1.05);scale:1.1}}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}

frontend/dist/assets/{index-RC6rN_Gk.js → index-D2ksG3qQ.js} RENAMED Viewed

The diff for this file is too large to render. See raw diff

frontend/dist/index.html CHANGED Viewed

@@ -5,8 +5,8 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>🥇 Omni Seal Bench Watermarking Leaderboard</title>
-    <script type="module" crossorigin src="/assets/index-RC6rN_Gk.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-CwrBXUIs.css">
   </head>
   <body>
     <div id="root"></div>

     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>🥇 Omni Seal Bench Watermarking Leaderboard</title>
+    <script type="module" crossorigin src="/assets/index-D2ksG3qQ.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-BWZpYvtq.css">
   </head>
   <body>
     <div id="root"></div>

frontend/src/components/DatasetSelector.tsx CHANGED Viewed

@@ -12,8 +12,8 @@ const DatasetSelector: React.FC<DatasetSelectorProps> = ({
   onDatasetNameChange,
 }) => {
   return (
-    <div className="mb-4">
-      <fieldset className="fieldset w-full p-4 rounded border border-gray-700">
         <legend className="fieldset-legend font-semibold">Dataset</legend>
         <div className="flex flex-wrap gap-2">
           {datasetNames.map((datasetName) => (

   onDatasetNameChange,
 }) => {
   return (
+    <div className="">
+      <fieldset className="fieldset w-full p-4 rounded border border-gray-700 bg-base-200">
         <legend className="fieldset-legend font-semibold">Dataset</legend>
         <div className="flex flex-wrap gap-2">
           {datasetNames.map((datasetName) => (

frontend/src/components/IndependentMetricsTable.tsx ADDED Viewed

	@@ -0,0 +1,69 @@

+import React from 'react'
+interface Row {
+  metric: string
+  [key: string]: string | number
+}
+interface IndependentMetricsTableProps {
+  independentMetrics: string[]
+  tableHeader: string[]
+  selectedModels: Set<string>
+  tableRows: Row[]
+}
+const IndependentMetricsTable: React.FC<IndependentMetricsTableProps> = ({
+  independentMetrics,
+  tableHeader,
+  selectedModels,
+  tableRows,
+}) => {
+  if (independentMetrics.length === 0) return null
+  return (
+    <div className="overflow-x-auto max-h-[80vh] overflow-y-auto">
+      <table className="table w-full min-w-max border-gray-700 border">
+        <thead>
+          <tr>
+            <th className="sticky left-0 top-0 bg-base-100 z-20 border-gray-700 border">Metric</th>
+            {tableHeader
+              .filter((model) => selectedModels.has(model))
+              .map((model) => (
+                <th
+                  key={`independent-${model}`}
+                  className="sticky top-0 bg-base-100 z-10 text-center text-xs border-gray-700 border"
+                >
+                  {model}
+                </th>
+              ))}
+          </tr>
+        </thead>
+        <tbody>
+          {independentMetrics.sort().map((metric) => {
+            const row = tableRows.find((r) => r.metric === metric)
+            if (!row) return null
+            return (
+              <tr key={`independent-${metric}`} className="hover:bg-base-100">
+                <td className="sticky left-0 bg-base-100 z-10 border-gray-700 border">{metric}</td>
+                {tableHeader
+                  .filter((model) => selectedModels.has(model))
+                  .map((col) => {
+                    const cell = row[col]
+                    return (
+                      <td
+                        key={`independent-${metric}-${col}`}
+                        className="text-center border-gray-700 border"
+                      >
+                        {!isNaN(Number(cell)) ? Number(Number(cell).toFixed(3)) : cell}
+                      </td>
+                    )
+                  })}
+              </tr>
+            )
+          })}
+        </tbody>
+      </table>
+    </div>
+  )
+}
+export default IndependentMetricsTable

frontend/src/components/LeaderboardFilter.tsx CHANGED Viewed

@@ -20,6 +20,7 @@ const LeaderboardFilter: React.FC<FilterProps> = ({
     {}
   )
   const [searchTerm, setSearchTerm] = useState('')
   const toggleGroup = (group: string) => {
     setOpenGroups((prev) => ({ ...prev, [group]: !prev[group] }))
@@ -164,166 +165,199 @@ const LeaderboardFilter: React.FC<FilterProps> = ({
     setOpenSubGroups(openSubGroups)
   }
   return (
     <div className="w-full mb-4">
-      <fieldset className="fieldset w-full p-4 rounded border">
-        <legend className="fieldset-legend font-semibold">Filter Metrics</legend>
-        <div className="flex gap-2 mb-3">
-          <div className="relative mr-2">
-            <input
-              type="text"
-              placeholder="Search metrics..."
-              className="input input-bordered border-gray-300 input-sm w-48 pr-8"
-              value={searchTerm}
-              onChange={(e) => {
-                const value = e.target.value
-                setSearchTerm(value)
-                const openGroups: { [key: string]: boolean } = {}
-                const openSubGroups: { [key: string]: { [key: string]: boolean } } = {}
-                Object.entries(groups).forEach(([group, subGroups]) => {
-                  let groupHasMatch = false
-                  openSubGroups[group] = {}
-                  Object.entries(subGroups).forEach(([subGroup, metrics]) => {
-                    const hasMatch = metrics.some((metric) =>
-                      metric.toLowerCase().includes(value.toLowerCase())
-                    )
-                    openSubGroups[group][subGroup] = hasMatch || value === ''
-                    if (hasMatch) groupHasMatch = true
-                  })
-                  openGroups[group] = groupHasMatch || value === ''
-                })
-                setOpenGroups(openGroups)
-                setOpenSubGroups(openSubGroups)
-              }}
-            />
-            <span className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                className="h-4 w-4"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M21 21l-4-4m0 0A7 7 0 104 4a7 7 0 0013 13z"
-                />
-              </svg>
-            </span>
-          </div>
-          <button
-            type="button"
-            className="text-xs px-3 py-1 border rounded font-semibold bg-base-200 cursor-pointer"
-            onClick={selectAllGlobal}
-          >
-            All
-          </button>
-          <button
-            type="button"
-            className="text-xs px-3 py-1 border rounded font-semibold bg-base-200 cursor-pointer"
-            onClick={deselectAllGlobal}
-          >
-            None
-          </button>
         </div>
-        <div className="flex flex-row flex-wrap gap-4 w-full items-start">
-          {Object.entries(groups).map(([group, subGroups]) => (
-            <div key={group} className="flex-1 min-w-[220px] max-w-full">
-              <div className="flex items-center gap-2 mb-1">
-                <button
-                  type="button"
-                  onClick={() => toggleGroup(group)}
-                  className="flex-1 text-left font-medium py-1 px-2 rounded border border-gray-200 cursor-pointer"
-                >
-                  {group} {openGroups[group] ? '▼' : '▶'}
-                </button>
-                <button
-                  type="button"
-                  className="text-xs px-2 py-1 border rounded cursor-pointer"
-                  onClick={() => selectAllInGroup(group)}
-                >
-                  All
-                </button>
-                <button
-                  type="button"
-                  className="text-xs px-2 py-1 border rounded cursor-pointer"
-                  onClick={() => deselectAllInGroup(group)}
-                >
-                  None
-                </button>
-              </div>
-              {openGroups[group] && (
-                <div className="ml-2">
-                  {Object.entries(subGroups).map(([subGroup, metrics]) => {
-                    const filteredMetrics = searchTerm
-                      ? metrics.filter((metric) =>
-                          metric.toLowerCase().includes(searchTerm.toLowerCase())
                         )
-                      : metrics
-                    if (filteredMetrics.length === 0) return null
-                    return (
-                      <div key={subGroup} className="mb-2">
-                        <div className="flex items-center gap-2 mb-1">
-                          <button
-                            type="button"
-                            onClick={() => toggleSubGroup(group, subGroup)}
-                            className="flex-1 text-left py-1 px-2 rounded border border-gray-100 cursor-pointer"
-                          >
-                            {subGroup} {openSubGroups[group]?.[subGroup] ? '▼' : '▶'}
-                          </button>
-                          <button
-                            type="button"
-                            className="text-xs px-2 py-1 border rounded cursor-pointer"
-                            onClick={() => selectAllInSubGroup(group, subGroup)}
-                          >
-                            All
-                          </button>
-                          <button
-                            type="button"
-                            className="text-xs px-2 py-1 border rounded cursor-pointer"
-                            onClick={() => deselectAllInSubGroup(group, subGroup)}
-                          >
-                            None
-                          </button>
-                        </div>
-                        {openSubGroups[group]?.[subGroup] && (
-                          <div className="grid grid-cols-1 gap-1 ml-2 max-h-48 overflow-y-auto pr-2">
-                            {filteredMetrics.map((metric) => (
-                              <label key={metric} className="flex items-center gap-2 text-sm">
-                                <input
-                                  type="checkbox"
-                                  checked={selectedMetrics.has(metric)}
-                                  onChange={(event) => {
-                                    const newSet = new Set(selectedMetrics)
-                                    if (event.target.checked) {
-                                      newSet.add(metric)
-                                    } else {
-                                      newSet.delete(metric)
-                                    }
-                                    setSelectedMetrics(newSet)
-                                  }}
-                                  className="form-checkbox h-4 w-4"
-                                />
-                                <span className="truncate" title={metric}>
-                                  {metric.includes('_')
-                                    ? metric.split('_').slice(1).join('_')
-                                    : metric}
-                                </span>
-                              </label>
-                            ))}
                           </div>
-                        )}
-                      </div>
-                    )
-                  })}
                 </div>
-              )}
             </div>
-          ))}
         </div>
-      </fieldset>
     </div>
   )
 }

     {}
   )
   const [searchTerm, setSearchTerm] = useState('')
+  const [filterOpen, setFilterOpen] = useState(false)
   const toggleGroup = (group: string) => {
     setOpenGroups((prev) => ({ ...prev, [group]: !prev[group] }))
     setOpenSubGroups(openSubGroups)
   }
+  // Open all groups and subgroups if all metrics are selected (initial load)
+  useEffect(() => {
+    // Only run on initial mount
+    const allMetrics = Object.values(groups).flatMap((subGroups) => Object.values(subGroups).flat())
+    const allSelected = allMetrics.every((metric) => selectedMetrics.has(metric))
+    if (allSelected && Object.keys(groups).length > 0) {
+      const openGroups: { [key: string]: boolean } = {}
+      const openSubGroups: { [key: string]: { [key: string]: boolean } } = {}
+      Object.entries(groups).forEach(([group, subGroups]) => {
+        openGroups[group] = true
+        openSubGroups[group] = {}
+        Object.keys(subGroups).forEach((subGroup) => {
+          openSubGroups[group][subGroup] = true
+        })
+      })
+      setOpenGroups(openGroups)
+      setOpenSubGroups(openSubGroups)
+    }
+    // eslint-disable-next-line
+  }, [groups, selectedMetrics])
   return (
     <div className="w-full mb-4">
+      <div className="collapse collapse-arrow bg-base-200 border border-gray-700">
+        <input
+          type="checkbox"
+          className="peer"
+          checked={filterOpen}
+          onChange={() => setFilterOpen((open) => !open)}
+        />
+        <div className="collapse-title select-none ">
+          <span className="text-sm">Filter Individual Metrics</span>
         </div>
+        <div className="collapse-content">
+          <fieldset className="fieldset w-full">
+            <div className="flex gap-2 mb-3">
+              <div className="relative mr-2">
+                <input
+                  type="text"
+                  placeholder="Search metrics..."
+                  className="input input-bordered border-gray-700 input-sm w-48 pr-8"
+                  value={searchTerm}
+                  onChange={(e) => {
+                    const value = e.target.value
+                    setSearchTerm(value)
+                    const openGroups: { [key: string]: boolean } = {}
+                    const openSubGroups: { [key: string]: { [key: string]: boolean } } = {}
+                    Object.entries(groups).forEach(([group, subGroups]) => {
+                      let groupHasMatch = false
+                      openSubGroups[group] = {}
+                      Object.entries(subGroups).forEach(([subGroup, metrics]) => {
+                        const hasMatch = metrics.some((metric) =>
+                          metric.toLowerCase().includes(value.toLowerCase())
                         )
+                        openSubGroups[group][subGroup] = hasMatch || value === ''
+                        if (hasMatch) groupHasMatch = true
+                      })
+                      openGroups[group] = groupHasMatch || value === ''
+                    })
+                    setOpenGroups(openGroups)
+                    setOpenSubGroups(openSubGroups)
+                  }}
+                />
+                <span className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    className="h-4 w-4"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M21 21l-4-4m0 0A7 7 0 104 4a7 7 0 0013 13z"
+                    />
+                  </svg>
+                </span>
+              </div>
+              <button
+                type="button"
+                className="text-xs px-3 py-1 border border-gray-700 rounded font-semibold bg-base-200 cursor-pointer"
+                onClick={selectAllGlobal}
+              >
+                All
+              </button>
+              <button
+                type="button"
+                className="text-xs px-3 py-1 border border-gray-700 rounded font-semibold bg-base-200 cursor-pointer"
+                onClick={deselectAllGlobal}
+              >
+                None
+              </button>
+            </div>
+            <div className="flex flex-row flex-wrap gap-4 w-full items-start">
+              {Object.entries(groups).map(([group, subGroups]) => (
+                <div key={group} className="flex-1 min-w-[220px] max-w-full">
+                  <div className="flex items-center gap-2 mb-1">
+                    <button
+                      type="button"
+                      onClick={() => toggleGroup(group)}
+                      className="flex-1 text-left font-medium py-1 px-2 rounded border border-gray-700 cursor-pointer"
+                    >
+                      {group} {openGroups[group] ? '▼' : '▶'}
+                    </button>
+                    <button
+                      type="button"
+                      className="text-xs px-2 py-1 border border-gray-700 rounded cursor-pointer"
+                      onClick={() => selectAllInGroup(group)}
+                    >
+                      All
+                    </button>
+                    <button
+                      type="button"
+                      className="text-xs px-2 py-1 border border-gray-700 rounded cursor-pointer"
+                      onClick={() => deselectAllInGroup(group)}
+                    >
+                      None
+                    </button>
+                  </div>
+                  {openGroups[group] && (
+                    <div className="ml-2">
+                      {Object.entries(subGroups).map(([subGroup, metrics]) => {
+                        const filteredMetrics = searchTerm
+                          ? metrics.filter((metric) =>
+                              metric.toLowerCase().includes(searchTerm.toLowerCase())
+                            )
+                          : metrics
+                        if (filteredMetrics.length === 0) return null
+                        return (
+                          <div key={subGroup} className="mb-2">
+                            <div className="flex items-center gap-2 mb-1">
+                              <button
+                                type="button"
+                                onClick={() => toggleSubGroup(group, subGroup)}
+                                className="flex-1 text-left py-1 px-2 rounded border border-gray-700 cursor-pointer"
+                              >
+                                {subGroup} {openSubGroups[group]?.[subGroup] ? '▼' : '▶'}
+                              </button>
+                              <button
+                                type="button"
+                                className="text-xs px-2 py-1 border border-gray-700 rounded cursor-pointer"
+                                onClick={() => selectAllInSubGroup(group, subGroup)}
+                              >
+                                All
+                              </button>
+                              <button
+                                type="button"
+                                className="text-xs px-2 py-1 border border-gray-700 rounded cursor-pointer"
+                                onClick={() => deselectAllInSubGroup(group, subGroup)}
+                              >
+                                None
+                              </button>
+                            </div>
+                            {openSubGroups[group]?.[subGroup] && (
+                              <div className="grid grid-cols-1 gap-1 ml-2 max-h-48 overflow-y-auto pr-2">
+                                {filteredMetrics.map((metric) => (
+                                  <label key={metric} className="flex items-center gap-2 text-sm">
+                                    <input
+                                      type="checkbox"
+                                      checked={selectedMetrics.has(metric)}
+                                      onChange={(event) => {
+                                        const newSet = new Set(selectedMetrics)
+                                        if (event.target.checked) {
+                                          newSet.add(metric)
+                                        } else {
+                                          newSet.delete(metric)
+                                        }
+                                        setSelectedMetrics(newSet)
+                                      }}
+                                      className="form-checkbox h-4 w-4"
+                                    />
+                                    <span className="truncate" title={metric}>
+                                      {metric.includes('_')
+                                        ? metric.split('_').slice(1).join('_')
+                                        : metric}
+                                    </span>
+                                  </label>
+                                ))}
+                              </div>
+                            )}
                           </div>
+                        )
+                      })}
+                    </div>
+                  )}
                 </div>
+              ))}
             </div>
+          </fieldset>
         </div>
+      </div>
     </div>
   )
 }

frontend/src/components/LeaderboardTable.tsx CHANGED Viewed

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react'
 import LeaderboardFilter from './LeaderboardFilter'
 import LoadingSpinner from './LoadingSpinner'
 interface LeaderboardTableProps {
   benchmarkData: any
@@ -16,6 +17,12 @@ interface Groups {
   [group: string]: { [subgroup: string]: string[] }
 }
 const OverallMetricFilter: React.FC<{
   overallMetrics: string[]
   selectedOverallMetrics: Set<string>
@@ -31,8 +38,8 @@ const OverallMetricFilter: React.FC<{
     setSelectedOverallMetrics(newSelected)
   }
   return (
-    <div className="w-full mb-4">
-      <fieldset className="fieldset w-full p-4 rounded border border-gray-700">
         <legend className="fieldset-legend font-semibold">
           Metrics ({selectedOverallMetrics.size}/{overallMetrics.length})
         </legend>
@@ -60,14 +67,20 @@ const LeaderboardTable: React.FC<LeaderboardTableProps> = ({ benchmarkData, sele
   const [tableRows, setTableRows] = useState<Row[]>([])
   const [tableHeader, setTableHeader] = useState<string[]>([])
   const [error, setError] = useState<string | null>(null)
-  const [groups, setGroups] = useState<Groups>({})
-  const [openGroups, setOpenGroups] = useState<{ [key: string]: boolean }>({})
-  const [openSubGroups, setOpenSubGroups] = useState<{ [key: string]: { [key: string]: boolean } }>(
-    {}
-  )
   const [selectedMetrics, setSelectedMetrics] = useState<Set<string>>(new Set())
   const [overallMetrics, setOverallMetrics] = useState<string[]>([])
   const [selectedOverallMetrics, setSelectedOverallMetrics] = useState<Set<string>>(new Set())
   useEffect(() => {
     if (!benchmarkData) {
@@ -128,9 +141,9 @@ const LeaderboardTable: React.FC<LeaderboardTableProps> = ({ benchmarkData, sele
       setSelectedMetrics(new Set(allMetrics))
       setTableHeader(headers)
       setTableRows(rows)
-      setGroups(groupsData)
-      setOpenGroups(initialOpenGroups)
-      setOpenSubGroups(initialOpenSubGroups)
       setError(null)
     } catch (err: any) {
       setError('Failed to parse benchmark data, please try again: ' + err.message)
@@ -138,11 +151,11 @@ const LeaderboardTable: React.FC<LeaderboardTableProps> = ({ benchmarkData, sele
   }, [benchmarkData])
   const toggleGroup = (group: string) => {
-    setOpenGroups((prev) => ({ ...prev, [group]: !prev[group] }))
   }
   const toggleSubGroup = (group: string, subGroup: string) => {
-    setOpenSubGroups((prev) => ({
       ...prev,
       [group]: {
         ...(prev[group] || {}),
@@ -151,6 +164,138 @@ const LeaderboardTable: React.FC<LeaderboardTableProps> = ({ benchmarkData, sele
     }))
   }
   // Find all metrics matching a particular extracted metric name (like "log10_p_value")
   const findAllMetricsForName = (metricName: string): string[] => {
     return tableRows
@@ -218,12 +363,12 @@ const LeaderboardTable: React.FC<LeaderboardTableProps> = ({ benchmarkData, sele
     if (!group) return metricNames
     // Get all metrics for the specified group
-    const groupMetrics = Object.values(groups[group] || {}).flat()
     // If subgroup is specified, further filter to that subgroup
-    if (subgroup && groups[group]?.[subgroup]) {
       return metricNames.filter(
-        (metric) => groups[group][subgroup].includes(metric) && selectedMetrics.has(metric)
       )
     }
@@ -233,8 +378,101 @@ const LeaderboardTable: React.FC<LeaderboardTableProps> = ({ benchmarkData, sele
     )
   }
   return (
-    <div className="rounded shadow">
       {error && <div className="text-red-500">{error}</div>}
       {!error && (
         <div className="flex flex-col gap-8">
@@ -244,11 +482,11 @@ const LeaderboardTable: React.FC<LeaderboardTableProps> = ({ benchmarkData, sele
               selectedOverallMetrics={selectedOverallMetrics}
               setSelectedOverallMetrics={setSelectedOverallMetrics}
             />
-            {/* <LeaderboardFilter
-              groups={groups}
               selectedMetrics={selectedMetrics}
               setSelectedMetrics={setSelectedMetrics}
-            /> */}
           </div>
           {selectedModels.size === 0 || selectedMetrics.size === 0 ? (
@@ -258,61 +496,12 @@ const LeaderboardTable: React.FC<LeaderboardTableProps> = ({ benchmarkData, sele
           ) : (
             <>
               {/* Standalone metrics table */}
-              {(() => {
-                const standaloneMetrics = findStandaloneMetrics()
-                if (standaloneMetrics.length === 0) return null
-                return (
-                  <div className="overflow-x-auto max-h-[80vh] overflow-y-auto">
-                    <table className="table w-full min-w-max border-gray-700 border">
-                      <thead>
-                        <tr>
-                          <th className="sticky left-0 top-0 bg-base-100 z-20 border-gray-700 border">
-                            Metric
-                          </th>
-                          {tableHeader
-                            .filter((model) => selectedModels.has(model))
-                            .map((model) => (
-                              <th
-                                key={`standalone-${model}`}
-                                className="sticky top-0 bg-base-100 z-10 text-center text-xs border-gray-700 border"
-                              >
-                                {model}
-                              </th>
-                            ))}
-                        </tr>
-                      </thead>
-                      <tbody>
-                        {standaloneMetrics.sort().map((metric) => {
-                          const row = tableRows.find((r) => r.metric === metric)
-                          if (!row) return null
-                          return (
-                            <tr key={`standalone-${metric}`} className="hover:bg-base-100">
-                              <td className="sticky left-0 bg-base-100 z-10 border-gray-700 border">
-                                {metric}
-                              </td>
-                              {tableHeader
-                                .filter((model) => selectedModels.has(model))
-                                .map((col) => {
-                                  const cell = row[col]
-                                  return (
-                                    <td
-                                      key={`standalone-${metric}-${col}`}
-                                      className="text-center border-gray-700 border"
-                                    >
-                                      {!isNaN(Number(cell))
-                                        ? Number(Number(cell).toFixed(3))
-                                        : cell}
-                                    </td>
-                                  )
-                                })}
-                            </tr>
-                          )
-                        })}
-                      </tbody>
-                    </table>
-                  </div>
-                )
-              })()}
               {/* Main metrics table */}
               <div className="overflow-x-auto max-h-[80vh] overflow-y-auto">
@@ -326,11 +515,9 @@ const LeaderboardTable: React.FC<LeaderboardTableProps> = ({ benchmarkData, sele
                         .filter((metric) => selectedOverallMetrics.has(metric))
                         .map((metric) => (
                           <th
-                            key={metric}
-                            colSpan={
-                              tableHeader.filter((model) => selectedModels.has(model)).length
-                            }
-                            className="sticky top-0 bg-base-100 z-10 text-center border-x border-gray-300 border border-gray-700 border"
                           >
                             {metric}
                           </th>
@@ -342,27 +529,33 @@ const LeaderboardTable: React.FC<LeaderboardTableProps> = ({ benchmarkData, sele
                         .filter((metric) => selectedOverallMetrics.has(metric))
                         .map((metric) => (
                           <React.Fragment key={`header-models-${metric}`}>
-                            {tableHeader
-                              .filter((model) => selectedModels.has(model))
-                              .map((model) => (
                                 <th
                                   key={`${metric}-${model}`}
-                                  className="sticky top-12 bg-base-100 z-10 text-center text-xs border-gray-700 border border-bottom-solid border-b-gray-700 border-b-2"
                                 >
                                   {model}
                                 </th>
-                              ))}
                           </React.Fragment>
                         ))}
                     </tr>
                   </thead>
                   <tbody>
-                    {/* First render each group */}
-                    {Object.entries(groups).map(([group, subGroups]) => {
                       // Skip the "Overall" group completely
                       if (group === 'Overall') return null
-                      // Get all metrics for this group
                       const allGroupMetrics = Object.values(subGroups).flat()
                       // Filter to only include selected metrics
                       const visibleGroupMetrics = filterMetricsByGroupAndSubgroup(
@@ -370,9 +563,35 @@ const LeaderboardTable: React.FC<LeaderboardTableProps> = ({ benchmarkData, sele
                         group
                       )
-                      // Skip this group if no metrics are selected
                       if (visibleGroupMetrics.length === 0) return null
                       return (
                         <React.Fragment key={group}>
                           {/* Group row with average stats for the entire group */}
@@ -380,27 +599,45 @@ const LeaderboardTable: React.FC<LeaderboardTableProps> = ({ benchmarkData, sele
                             className="bg-base-200 cursor-pointer hover:bg-base-300"
                             onClick={() => toggleGroup(group)}
                           >
-                            <td className="sticky left-0 bg-base-200 z-10 font-medium border-gray-700 border">
-                              {openGroups[group] ? '▼ ' : '▶ '}
-                              {group}
                             </td>
                             {/* For each metric column */}
                             {overallMetrics
                               .filter((metric) => selectedOverallMetrics.has(metric))
-                              .map((metric) => (
-                                // Render sub-columns for each model
-                                <React.Fragment key={`${group}-${metric}`}>
-                                  {tableHeader
-                                    .filter((model) => selectedModels.has(model))
-                                    .map((col) => {
-                                      // Find all metrics in this group that match the current metric name
                                       const allMetricsWithName = findAllMetricsForName(metric)
                                       const metricsInGroupForThisMetric =
                                         visibleGroupMetrics.filter((m) =>
                                           allMetricsWithName.includes(m)
                                         )
                                       const stats = calculateStats(metricsInGroupForThisMetric, col)
                                       return (
                                         <td
                                           key={`${group}-${metric}-${col}`}
@@ -412,21 +649,22 @@ const LeaderboardTable: React.FC<LeaderboardTableProps> = ({ benchmarkData, sele
                                         </td>
                                       )
                                     })}
-                                </React.Fragment>
-                              ))}
                           </tr>
-                          {/* Only render subgroups if group is open */}
-                          {openGroups[group] &&
-                            Object.entries(subGroups).map(([subGroup, metrics]) => {
-                              // Filter to only include selected metrics in this subgroup
                               const visibleSubgroupMetrics = filterMetricsByGroupAndSubgroup(
                                 metrics,
                                 group,
                                 subGroup
                               )
-                              // Skip this subgroup if no metrics are selected
                               if (visibleSubgroupMetrics.length === 0) return null
                               return (
@@ -436,147 +674,208 @@ const LeaderboardTable: React.FC<LeaderboardTableProps> = ({ benchmarkData, sele
                                     className="bg-base-100 cursor-pointer hover:bg-base-200"
                                     onClick={() => toggleSubGroup(group, subGroup)}
                                   >
-                                    <td className="sticky left-0 bg-base-100 z-10 pl-6 font-medium border-gray-700 border">
-                                      {openSubGroups[group]?.[subGroup] ? '▼ ' : '▶ '}
-                                      {subGroup}
                                     </td>
                                     {/* For each metric column */}
                                     {overallMetrics
                                       .filter((metric) => selectedOverallMetrics.has(metric))
-                                      .map((metric) => (
-                                        // Render sub-columns for each model
-                                        <React.Fragment key={`${group}-${subGroup}-${metric}`}>
-                                          {tableHeader
-                                            .filter((model) => selectedModels.has(model))
-                                            .map((col) => {
-                                              // Find all metrics in this subgroup that match the current metric name
-                                              const allMetricsWithName =
-                                                findAllMetricsForName(metric)
-                                              const metricsInSubgroupForThisMetric =
-                                                visibleSubgroupMetrics.filter((m) =>
-                                                  allMetricsWithName.includes(m)
                                                 )
-                                              const stats = calculateStats(
-                                                metricsInSubgroupForThisMetric,
-                                                col
-                                              )
-                                              return (
-                                                <td
-                                                  key={`${group}-${subGroup}-${metric}-${col}`}
-                                                  className="font-medium text-center border-gray-700 border"
-                                                >
-                                                  {!isNaN(stats.avg)
-                                                    ? `${stats.avg.toFixed(3)} ± ${stats.stdDev.toFixed(3)}`
-                                                    : 'N/A'}
-                                                </td>
-                                              )
-                                            })}
-                                        </React.Fragment>
-                                      ))}
                                   </tr>
                                   {/* Individual metric rows */}
-                                  {openSubGroups[group]?.[subGroup] &&
-                                    // Sort visibleSubgroupMetrics alphabetically by the clean metric name
-                                    [...visibleSubgroupMetrics]
-                                      .sort((a, b) => {
-                                        // For metrics with format {category}_{strength}_{overall_metric_name},
-                                        // First sort by category, then by overall_metric_name, then by strength
-                                        // First extract the overall metric group
-                                        const getOverallMetricGroup = (metric: string) => {
-                                          for (const overall of overallMetrics) {
-                                            if (
-                                              metric.endsWith(`_${overall}`) ||
-                                              metric === overall
-                                            ) {
-                                              return overall
                                             }
                                           }
-                                          return ''
-                                        }
-                                        const overallA = getOverallMetricGroup(a)
-                                        const overallB = getOverallMetricGroup(b)
-                                        // Extract the strength (last part before the overall metric)
-                                        const stripOverall = (metric: string, overall: string) => {
-                                          if (metric.endsWith(`_${overall}`)) {
-                                            // Remove the overall metric group and any preceding underscore
-                                            const stripped = metric.slice(
-                                              0,
-                                              metric.length - overall.length - 1
-                                            )
-                                            const parts = stripped.split('_')
-                                            return parts.length > 0 ? parts[parts.length - 1] : ''
                                           }
-                                          return metric
-                                        }
-                                        // Extract the category (what remains after removing strength and overall_metric_name)
-                                        const getCategory = (metric: string, overall: string) => {
-                                          if (metric.endsWith(`_${overall}`)) {
-                                            const stripped = metric.slice(
-                                              0,
-                                              metric.length - overall.length - 1
-                                            )
-                                            const parts = stripped.split('_')
-                                            // Remove the last part (strength) and join the rest (category)
-                                            return parts.length > 1
-                                              ? parts.slice(0, parts.length - 1).join('_')
-                                              : ''
                                           }
-                                          return metric
-                                        }
-                                        const categoryA = getCategory(a, overallA)
-                                        const categoryB = getCategory(b, overallB)
-                                        // First sort by category
-                                        if (categoryA !== categoryB) {
-                                          return categoryA.localeCompare(categoryB)
-                                        }
-                                        // Then sort by overall metric name
-                                        if (overallA !== overallB) {
-                                          return overallA.localeCompare(overallB)
-                                        }
-                                        // Finally sort by strength
-                                        const subA = stripOverall(a, overallA)
-                                        const subB = stripOverall(b, overallB)
-                                        // Try to parse subA and subB as numbers, handling k/m/b suffixes
-                                        const parseNumber = (str: string) => {
-                                          const match = str.match(/^(\d+(?:\.\d+)?)([kKmMbB]?)$/)
-                                          if (!match) return NaN
-                                          let [_, num, suffix] = match
-                                          let value = parseFloat(num)
-                                          switch (suffix.toLowerCase()) {
-                                            case 'k':
-                                              value *= 1e3
-                                              break
-                                            case 'm':
-                                              value *= 1e6
-                                              break
-                                            case 'b':
-                                              value *= 1e9
-                                              break
                                           }
-                                          return value
-                                        }
-                                        const numA = parseNumber(subA)
-                                        const numB = parseNumber(subB)
-                                        if (!isNaN(numA) && !isNaN(numB)) {
-                                          return numA - numB
-                                        }
-                                        // Fallback to string comparison if not both numbers
-                                        return subA.localeCompare(subB)
-                                      })
-                                      .map((metric) => {
                                         const row = tableRows.find((r) => r.metric === metric)
                                         if (!row) return null
@@ -587,41 +886,56 @@ const LeaderboardTable: React.FC<LeaderboardTableProps> = ({ benchmarkData, sele
                                         return (
                                           <tr key={metric} className="hover:bg-base-100">
-                                            <td className="sticky left-0 bg-base-100 z-10 pl-10 border-gray-700 border">
-                                              {metric}
                                             </td>
-                                            {/* For each metric column */}
                                             {overallMetrics
                                               .filter((oMetric) =>
                                                 selectedOverallMetrics.has(oMetric)
                                               )
                                               .map((oMetric) => {
-                                                // Only show values for the matching metric
                                                 const isMatchingMetric =
                                                   findAllMetricsForName(oMetric).includes(metric)
                                                 if (!isMatchingMetric) {
-                                                  // Fill empty cells for non-matching metrics
                                                   return (
                                                     <React.Fragment key={`${metric}-${oMetric}`}>
-                                                      {tableHeader
-                                                        .filter((model) =>
-                                                          selectedModels.has(model)
-                                                        )
-                                                        .map((col) => (
                                                           <td
                                                             key={`${metric}-${oMetric}-${col}`}
                                                             className="text-center border-gray-700 border"
                                                           ></td>
-                                                        ))}
                                                     </React.Fragment>
                                                   )
                                                 }
                                                 return (
                                                   <React.Fragment key={`${metric}-${oMetric}`}>
-                                                    {tableHeader
-                                                      .filter((model) => selectedModels.has(model))
-                                                      .map((col) => {
                                                         const cell = row[col]
                                                         return (
                                                           <td
@@ -633,13 +947,15 @@ const LeaderboardTable: React.FC<LeaderboardTableProps> = ({ benchmarkData, sele
                                                               : cell}
                                                           </td>
                                                         )
-                                                      })}
                                                   </React.Fragment>
                                                 )
                                               })}
                                           </tr>
                                         )
-                                      })}
                                 </React.Fragment>
                               )
                             })}

 import React, { useEffect, useState } from 'react'
 import LeaderboardFilter from './LeaderboardFilter'
 import LoadingSpinner from './LoadingSpinner'
+import IndependentMetricsTable from './IndependentMetricsTable'
 interface LeaderboardTableProps {
   benchmarkData: any
   [group: string]: { [subgroup: string]: string[] }
 }
+interface SortState {
+  [overallMetric: string]: {
+    [model: string]: { direction: 'asc' | 'desc' }
+  }
+}
 const OverallMetricFilter: React.FC<{
   overallMetrics: string[]
   selectedOverallMetrics: Set<string>
     setSelectedOverallMetrics(newSelected)
   }
   return (
+    <div className="w-full">
+      <fieldset className="fieldset w-full p-4 rounded border border-gray-700 bg-base-200">
         <legend className="fieldset-legend font-semibold">
           Metrics ({selectedOverallMetrics.size}/{overallMetrics.length})
         </legend>
   const [tableRows, setTableRows] = useState<Row[]>([])
   const [tableHeader, setTableHeader] = useState<string[]>([])
   const [error, setError] = useState<string | null>(null)
+  const [groupRows, setGroupRows] = useState<Groups>({})
+  const [openGroupRows, setOpenGroupRows] = useState<{ [key: string]: boolean }>({})
+  const [openSubGroupRows, setOpenSubGroupRows] = useState<{
+    [key: string]: { [key: string]: boolean }
+  }>({})
   const [selectedMetrics, setSelectedMetrics] = useState<Set<string>>(new Set())
   const [overallMetrics, setOverallMetrics] = useState<string[]>([])
   const [selectedOverallMetrics, setSelectedOverallMetrics] = useState<Set<string>>(new Set())
+  const [sortState, setSortState] = useState<SortState>({})
+  const [columnSortState, setColumnSortState] = useState<SortState>({})
+  // Add state for row-based column sorting
+  const [selectedRowForSort, setSelectedRowForSort] = useState<{
+    [rowKey: string]: { direction: 'asc' | 'desc' }
+  }>({})
   useEffect(() => {
     if (!benchmarkData) {
       setSelectedMetrics(new Set(allMetrics))
       setTableHeader(headers)
       setTableRows(rows)
+      setGroupRows(groupsData)
+      setOpenGroupRows(initialOpenGroups)
+      setOpenSubGroupRows(initialOpenSubGroups)
       setError(null)
     } catch (err: any) {
       setError('Failed to parse benchmark data, please try again: ' + err.message)
   }, [benchmarkData])
   const toggleGroup = (group: string) => {
+    setOpenGroupRows((prev) => ({ ...prev, [group]: !prev[group] }))
   }
   const toggleSubGroup = (group: string, subGroup: string) => {
+    setOpenSubGroupRows((prev) => ({
       ...prev,
       [group]: {
         ...(prev[group] || {}),
     }))
   }
+  const handleSort = (overallMetric: string, model: string) => {
+    setSortState((prev) => {
+      const prevDir = prev[overallMetric]?.[model]?.direction
+      let newSortState: SortState = {}
+      if (!prevDir) {
+        // No sort yet, set to 'asc'
+        newSortState[overallMetric] = { [model]: { direction: 'asc' } }
+      } else if (prevDir === 'asc') {
+        // Was 'asc', set to 'desc'
+        newSortState[overallMetric] = { [model]: { direction: 'desc' } }
+      }
+      // Else revert back to unsorted state
+      return newSortState
+    })
+  }
+  // Helper to generate a stable composite key for row-based column sorting
+  function getRowSortKey(group: string | null, subGroup: string | null, metric: string | null) {
+    return `${group ?? ''}||${subGroup ?? ''}||${metric ?? ''}`
+  }
+  // Update handleColumnSort to use setSelectedRowForSort
+  const handleColumnSort = (
+    group: string | null,
+    subGroup: string | null,
+    metric: string | null
+  ) => {
+    const rowKey = getRowSortKey(group, subGroup, metric)
+    setSelectedRowForSort((prev) => {
+      const prevDir = prev[rowKey]?.direction
+      const newSortState: { [rowKey: string]: { direction: 'asc' | 'desc' } } = {}
+      if (!prevDir) {
+        newSortState[rowKey] = { direction: 'asc' }
+      } else if (prevDir === 'asc') {
+        newSortState[rowKey] = { direction: 'desc' }
+      } else if (prevDir === 'desc') {
+        delete newSortState[rowKey]
+      }
+      return newSortState
+    })
+  }
+  // Helper to get current row sort config for a row
+  function getRowColumnSort(group: string | null, subGroup: string | null, metric: string | null) {
+    return selectedRowForSort[getRowSortKey(group, subGroup, metric)] || null
+  }
+  const getSortConfig = () => {
+    // Find the first sorted column (overallMetric, model)
+    console.log({ sortState })
+    for (const overallMetric of overallMetrics) {
+      if (!selectedOverallMetrics.has(overallMetric)) continue
+      const models = tableHeader.filter((model) => selectedModels.has(model))
+      for (const model of models) {
+        if (sortState[overallMetric]?.[model]) {
+          return { overallMetric, model, direction: sortState[overallMetric][model].direction }
+        }
+      }
+    }
+    return null
+  }
+  // Move getRowSortConfig above sortModelColumns so it is defined before use
+  const getRowSortConfig = () => {
+    for (const overallMetric of overallMetrics) {
+      if (!selectedOverallMetrics.has(overallMetric)) continue
+      const models = tableHeader.filter((model) => selectedModels.has(model))
+      for (const model of models) {
+        if (sortState[overallMetric]?.[model]) {
+          return { overallMetric, model, direction: sortState[overallMetric][model].direction }
+        }
+      }
+    }
+    return null
+  }
+  const getColumnSortConfig = () => {
+    for (const overallMetric of overallMetrics) {
+      if (!selectedOverallMetrics.has(overallMetric)) continue
+      if (columnSortState[overallMetric]?.['__col__']) {
+        return { overallMetric, direction: columnSortState[overallMetric]['__col__'].direction }
+      }
+    }
+    return null
+  }
+  const sortModelColumns = (models: string[], overallMetric: string): string[] => {
+    // Column sort takes precedence; if no column sort, return models in default order
+    const columnSortConfig = getColumnSortConfig()
+    console.log({ columnSortConfig, overallMetric })
+    if (columnSortConfig && columnSortConfig.overallMetric === overallMetric) {
+      // Sort by average value for each model in this overallMetric
+      return [...models].sort((a, b) => {
+        const valsA = tableRows
+          .filter((row) => findAllMetricsForName(overallMetric).includes(row.metric as string))
+          .map((row) => Number(row[a]))
+          .filter((v) => !isNaN(v))
+        const valsB = tableRows
+          .filter((row) => findAllMetricsForName(overallMetric).includes(row.metric as string))
+          .map((row) => Number(row[b]))
+          .filter((v) => !isNaN(v))
+        const avgA = valsA.length ? valsA.reduce((s, v) => s + v, 0) / valsA.length : NaN
+        const avgB = valsB.length ? valsB.reduce((s, v) => s + v, 0) / valsB.length : NaN
+        if (isNaN(avgA) && isNaN(avgB)) return 0
+        if (isNaN(avgA)) return 1
+        if (isNaN(avgB)) return -1
+        return columnSortConfig.direction === 'asc' ? avgA - avgB : avgB - avgA
+      })
+    }
+    // No column sort: return models in default order
+    return models
+  }
+  const sortRowsBySubcolumn = (
+    rows: string[],
+    overallMetric: string,
+    model: string,
+    direction: 'asc' | 'desc'
+  ) => {
+    return [...rows].sort((a, b) => {
+      const rowA = tableRows.find((r) => r.metric === a)
+      const rowB = tableRows.find((r) => r.metric === b)
+      if (!rowA || !rowB) return 0
+      const valA = Number(rowA[model])
+      const valB = Number(rowB[model])
+      if (isNaN(valA) && isNaN(valB)) return 0
+      if (isNaN(valA)) return 1
+      if (isNaN(valB)) return -1
+      return direction === 'asc' ? valA - valB : valB - valA
+    })
+  }
   // Find all metrics matching a particular extracted metric name (like "log10_p_value")
   const findAllMetricsForName = (metricName: string): string[] => {
     return tableRows
     if (!group) return metricNames
     // Get all metrics for the specified group
+    const groupMetrics = Object.values(groupRows[group] || {}).flat() as string[]
     // If subgroup is specified, further filter to that subgroup
+    if (subgroup && groupRows[group]?.[subgroup]) {
       return metricNames.filter(
+        (metric) => groupRows[group][subgroup].includes(metric) && selectedMetrics.has(metric)
       )
     }
     )
   }
+  // Before rendering group rows:
+  const groupSortConfig = getSortConfig()
+  let groupEntries = Object.entries(groupRows).filter(([group]) => group !== 'Overall')
+  if (groupSortConfig) {
+    groupEntries = groupEntries.sort(([groupA, subGroupsA], [groupB, subGroupsB]) => {
+      // For each group, get all metrics in the group for the selected overallMetric
+      const allMetricsWithName = findAllMetricsForName(groupSortConfig.overallMetric)
+      const getGroupAvg = (subGroups: { [key: string]: string[] }) => {
+        const allGroupMetrics = Object.values(subGroups).flat()
+        const metricsInGroupForThisMetric = allGroupMetrics.filter((m) =>
+          allMetricsWithName.includes(m)
+        )
+        const stats = calculateStats(metricsInGroupForThisMetric, groupSortConfig.model)
+        return stats.avg
+      }
+      const avgA = getGroupAvg(subGroupsA)
+      const avgB = getGroupAvg(subGroupsB)
+      if (isNaN(avgA) && isNaN(avgB)) return 0
+      if (isNaN(avgA)) return 1
+      if (isNaN(avgB)) return -1
+      return groupSortConfig.direction === 'asc' ? avgA - avgB : avgB - avgA
+    })
+  }
+  // Compute model order for each overall metric before rendering
+  const modelOrderByOverallMetric: { [metric: string]: string[] } = {}
+  overallMetrics
+    .filter((metric) => selectedOverallMetrics.has(metric))
+    .forEach((metric) => {
+      // Check if there is an active row-based column sort for this metric
+      let sortedModels: string[] | null = null
+      // Find the active rowKey for this metric in rowColumnSort
+      const activeRowKey = Object.keys(selectedRowForSort).find((rowKey) => {
+        // rowKey format: group||subGroup||metric
+        const [group, subGroup, rowMetric] = rowKey.split('||')
+        // If rowMetric is empty, it's a group or subgroup row
+        if (rowMetric === '' && metric === metric) return true
+        // If rowMetric matches this metric, it's an individual metric row
+        if (rowMetric && findAllMetricsForName(metric).includes(rowMetric)) return true
+        return false
+      })
+      if (activeRowKey && selectedRowForSort[activeRowKey]) {
+        const direction = selectedRowForSort[activeRowKey].direction
+        const [group, subGroup, rowMetric] = activeRowKey.split('||')
+        const models = tableHeader.filter((model) => selectedModels.has(model))
+        if (!rowMetric) {
+          // Group or subgroup row: sort by average for this group/subgroup and metric
+          // Find all metrics in this group/subgroup for this overall metric
+          let relevantMetrics: string[] = []
+          if (group && !subGroup) {
+            // Group row
+            const groupMetrics = Object.values(groupRows[group] || {}).flat() as string[]
+            relevantMetrics = groupMetrics.filter((m: string) =>
+              findAllMetricsForName(metric).includes(m)
+            )
+          } else if (group && subGroup) {
+            // Subgroup row
+            relevantMetrics = (groupRows[group]?.[subGroup] || []).filter((m: string) =>
+              findAllMetricsForName(metric).includes(m)
+            )
+          }
+          sortedModels = [...models].sort((a, b) => {
+            const statsA = calculateStats(relevantMetrics, a)
+            const statsB = calculateStats(relevantMetrics, b)
+            if (isNaN(statsA.avg) && isNaN(statsB.avg)) return 0
+            if (isNaN(statsA.avg)) return 1
+            if (isNaN(statsB.avg)) return -1
+            return direction === 'asc' ? statsA.avg - statsB.avg : statsB.avg - statsA.avg
+          })
+        } else {
+          // Individual metric row: sort by value for that metric
+          sortedModels = [...models].sort((a, b) => {
+            const rowA = tableRows.find((r) => r.metric === rowMetric)
+            const rowB = rowA // same row
+            const valA = rowA ? Number(rowA[a]) : NaN
+            const valB = rowB ? Number(rowB[b]) : NaN
+            if (isNaN(valA) && isNaN(valB)) return 0
+            if (isNaN(valA)) return 1
+            if (isNaN(valB)) return -1
+            return direction === 'asc' ? valA - valB : valB - valA
+          })
+        }
+      }
+      modelOrderByOverallMetric[metric] =
+        sortedModels ||
+        sortModelColumns(
+          tableHeader.filter((model) => selectedModels.has(model)),
+          metric
+        )
+    })
+  console.log({ modelOrderByOverallMetric })
   return (
+    <div className="rounded">
       {error && <div className="text-red-500">{error}</div>}
       {!error && (
         <div className="flex flex-col gap-8">
               selectedOverallMetrics={selectedOverallMetrics}
               setSelectedOverallMetrics={setSelectedOverallMetrics}
             />
+            <LeaderboardFilter
+              groups={groupRows}
               selectedMetrics={selectedMetrics}
               setSelectedMetrics={setSelectedMetrics}
+            />
           </div>
           {selectedModels.size === 0 || selectedMetrics.size === 0 ? (
           ) : (
             <>
               {/* Standalone metrics table */}
+              <IndependentMetricsTable
+                independentMetrics={findStandaloneMetrics()}
+                tableHeader={tableHeader}
+                selectedModels={selectedModels}
+                tableRows={tableRows}
+              />
               {/* Main metrics table */}
               <div className="overflow-x-auto max-h-[80vh] overflow-y-auto">
                         .filter((metric) => selectedOverallMetrics.has(metric))
                         .map((metric) => (
                           <th
+                            key={`header-metric-${metric}`}
+                            className="bg-base-100 z-10 text-center text-xs border-gray-700 border"
+                            colSpan={modelOrderByOverallMetric[metric].length}
                           >
                             {metric}
                           </th>
                         .filter((metric) => selectedOverallMetrics.has(metric))
                         .map((metric) => (
                           <React.Fragment key={`header-models-${metric}`}>
+                            {modelOrderByOverallMetric[metric].map((model) => {
+                              const isSorted = sortState[metric]?.[model]?.direction !== undefined
+                              const direction = sortState[metric]?.[model]?.direction || 'desc'
+                              return (
                                 <th
                                   key={`${metric}-${model}`}
+                                  className="sticky top-12 bg-base-100 z-10 text-center text-xs border-gray-700 border border-bottom-solid border-b-gray-700 border-b-3 cursor-pointer select-none"
+                                  onClick={() => handleSort(metric, model)}
                                 >
                                   {model}
+                                  <span className="ml-1">
+                                    {isSorted ? (direction === 'asc' ? '↑' : '↓') : '⇅'}
+                                  </span>
                                 </th>
+                              )
+                            })}
                           </React.Fragment>
                         ))}
                     </tr>
                   </thead>
                   <tbody>
+                    {/* First render each group row */}
+                    {groupEntries.map(([group, subGroups]) => {
                       // Skip the "Overall" group completely
                       if (group === 'Overall') return null
+                      // Get all metrics for this group row
                       const allGroupMetrics = Object.values(subGroups).flat()
                       // Filter to only include selected metrics
                       const visibleGroupMetrics = filterMetricsByGroupAndSubgroup(
                         group
                       )
+                      // Skip this group row if no metrics are selected
                       if (visibleGroupMetrics.length === 0) return null
+                      // Sort subgroups by average if sort config is active
+                      let subGroupEntries = Object.entries(subGroups)
+                      if (groupSortConfig) {
+                        const allMetricsWithName = findAllMetricsForName(
+                          groupSortConfig.overallMetric
+                        )
+                        const getSubGroupAvg = (metrics: string[]) => {
+                          const metricsInSubGroupForThisMetric = metrics.filter((m) =>
+                            allMetricsWithName.includes(m)
+                          )
+                          const stats = calculateStats(
+                            metricsInSubGroupForThisMetric,
+                            groupSortConfig.model
+                          )
+                          return stats.avg
+                        }
+                        subGroupEntries = subGroupEntries.sort(([, metricsA], [, metricsB]) => {
+                          const avgA = getSubGroupAvg(metricsA)
+                          const avgB = getSubGroupAvg(metricsB)
+                          if (isNaN(avgA) && isNaN(avgB)) return 0
+                          if (isNaN(avgA)) return 1
+                          if (isNaN(avgB)) return -1
+                          return groupSortConfig.direction === 'asc' ? avgA - avgB : avgB - avgA
+                        })
+                      }
                       return (
                         <React.Fragment key={group}>
                           {/* Group row with average stats for the entire group */}
                             className="bg-base-200 cursor-pointer hover:bg-base-300"
                             onClick={() => toggleGroup(group)}
                           >
+                            <td className="sticky left-0 bg-base-200 z-10 font-medium border-gray-700 border cursor-pointer select-none flex items-center gap-1">
+                              <span>{openGroupRows[group] ? '▼ ' : '▶ '}</span>
+                              <span className="flex-1">{group}</span>
+                              {/* Sort icon: only this triggers sort, and shows default if unsorted */}
+                              <span
+                                className="ml-1 cursor-pointer"
+                                onClick={(e) => {
+                                  e.stopPropagation()
+                                  handleColumnSort(group, null, null)
+                                }}
+                                title={
+                                  getRowColumnSort(group, null, null)
+                                    ? getRowColumnSort(group, null, null)?.direction === 'asc'
+                                      ? 'Sort descending'
+                                      : 'Clear sort'
+                                    : 'Sort by this row'
+                                }
+                              >
+                                {getRowColumnSort(group, null, null)
+                                  ? getRowColumnSort(group, null, null)?.direction === 'asc'
+                                    ? '↑'
+                                    : '↓'
+                                  : '⇅'}
+                              </span>
                             </td>
                             {/* For each metric column */}
                             {overallMetrics
                               .filter((metric) => selectedOverallMetrics.has(metric))
+                              .map((metric) => {
+                                const rowKey = getRowSortKey(group, null, null)
+                                return (
+                                  <React.Fragment key={`${group}-${metric}`}>
+                                    {modelOrderByOverallMetric[metric].map((col: string) => {
                                       const allMetricsWithName = findAllMetricsForName(metric)
                                       const metricsInGroupForThisMetric =
                                         visibleGroupMetrics.filter((m) =>
                                           allMetricsWithName.includes(m)
                                         )
                                       const stats = calculateStats(metricsInGroupForThisMetric, col)
                                       return (
                                         <td
                                           key={`${group}-${metric}-${col}`}
                                         </td>
                                       )
                                     })}
+                                  </React.Fragment>
+                                )
+                              })}
                           </tr>
+                          {/* Only render subgroups if group row is open */}
+                          {openGroupRows[group] &&
+                            subGroupEntries.map(([subGroup, metrics]) => {
+                              // Filter to only include selected metrics in this subgroup row
                               const visibleSubgroupMetrics = filterMetricsByGroupAndSubgroup(
                                 metrics,
                                 group,
                                 subGroup
                               )
+                              // Skip this subgroup row if no metrics are selected
                               if (visibleSubgroupMetrics.length === 0) return null
                               return (
                                     className="bg-base-100 cursor-pointer hover:bg-base-200"
                                     onClick={() => toggleSubGroup(group, subGroup)}
                                   >
+                                    <td className="sticky left-0 bg-base-100 z-10 pl-6 font-medium border-gray-700 border cursor-pointer select-none flex items-center gap-1">
+                                      <span>
+                                        {openSubGroupRows[group]?.[subGroup] ? '▼ ' : '▶ '}
+                                      </span>
+                                      <span className="flex-1">{subGroup}</span>
+                                      <span
+                                        className="ml-1 cursor-pointer"
+                                        onClick={(e) => {
+                                          e.stopPropagation()
+                                          handleColumnSort(group, subGroup, null)
+                                        }}
+                                        title={
+                                          getRowColumnSort(group, subGroup, null)
+                                            ? getRowColumnSort(group, subGroup, null)?.direction ===
+                                              'asc'
+                                              ? 'Sort descending'
+                                              : 'Clear sort'
+                                            : 'Sort by this row'
+                                        }
+                                      >
+                                        {getRowColumnSort(group, subGroup, null)
+                                          ? getRowColumnSort(group, subGroup, null)?.direction ===
+                                            'asc'
+                                            ? '↑'
+                                            : '↓'
+                                          : '⇅'}
+                                      </span>
                                     </td>
                                     {/* For each metric column */}
                                     {overallMetrics
                                       .filter((metric) => selectedOverallMetrics.has(metric))
+                                      .map((metric) => {
+                                        const rowKey = getRowSortKey(group, subGroup, null)
+                                        return (
+                                          <React.Fragment key={`${group}-${subGroup}-${metric}`}>
+                                            {modelOrderByOverallMetric[metric].map(
+                                              (col: string) => {
+                                                const allMetricsWithName =
+                                                  findAllMetricsForName(metric)
+                                                const metricsInSubgroupForThisMetric =
+                                                  visibleSubgroupMetrics.filter((m) =>
+                                                    allMetricsWithName.includes(m)
+                                                  )
+                                                const stats = calculateStats(
+                                                  metricsInSubgroupForThisMetric,
+                                                  col
                                                 )
+                                                return (
+                                                  <td
+                                                    key={`${group}-${subGroup}-${metric}-${col}`}
+                                                    className="font-medium text-center border-gray-700 border"
+                                                  >
+                                                    {!isNaN(stats.avg)
+                                                      ? `${stats.avg.toFixed(3)} ± ${stats.stdDev.toFixed(3)}`
+                                                      : 'N/A'}
+                                                  </td>
+                                                )
+                                              }
+                                            )}
+                                          </React.Fragment>
+                                        )
+                                      })}
                                   </tr>
                                   {/* Individual metric rows */}
+                                  {openSubGroupRows[group]?.[subGroup] &&
+                                    (() => {
+                                      // Sorting logic for individual metric rows
+                                      const sortConfig = getSortConfig()
+                                      let sortedMetrics = [...visibleSubgroupMetrics]
+                                      console.log(
+                                        'Sorting metrics for subgroup:',
+                                        group,
+                                        subGroup,
+                                        'with config:',
+                                        sortConfig
+                                      )
+                                      if (sortConfig) {
+                                        // Only sort metrics that match the selected overallMetric and model
+                                        const allMetricsWithName = findAllMetricsForName(
+                                          sortConfig.overallMetric
+                                        )
+                                        const metricsInSubgroupForThisMetric = sortedMetrics.filter(
+                                          (m) => allMetricsWithName.includes(m)
+                                        )
+                                        const metricsNotInSubgroupForThisMetric =
+                                          sortedMetrics.filter(
+                                            (m) => !allMetricsWithName.includes(m)
+                                          )
+                                        // Only apply subcolumn sort to matching metrics, leave others in original order
+                                        sortedMetrics = [
+                                          ...sortRowsBySubcolumn(
+                                            metricsInSubgroupForThisMetric,
+                                            sortConfig.overallMetric,
+                                            sortConfig.model,
+                                            sortConfig.direction
+                                          ),
+                                          ...metricsNotInSubgroupForThisMetric,
+                                        ]
+                                      } else {
+                                        // Fallback sort logic (category, overall, strength)
+                                        sortedMetrics = sortedMetrics.sort((a, b) => {
+                                          // For metrics with format {category}_{strength}_{overall_metric_name},
+                                          // First sort by category, then by overall_metric_name, then by strength
+                                          // First extract the overall metric group
+                                          const getOverallMetricGroup = (metric: string) => {
+                                            for (const overall of overallMetrics) {
+                                              if (
+                                                metric.endsWith(`_${overall}`) ||
+                                                metric === overall
+                                              ) {
+                                                return overall
+                                              }
                                             }
+                                            return ''
                                           }
+                                          const overallA = getOverallMetricGroup(a)
+                                          const overallB = getOverallMetricGroup(b)
+                                          // Extract the strength (last part before the overall metric)
+                                          const stripOverall = (
+                                            metric: string,
+                                            overall: string
+                                          ) => {
+                                            if (metric.endsWith(`_${overall}`)) {
+                                              // Remove the overall metric group and any preceding underscore
+                                              const stripped = metric.slice(
+                                                0,
+                                                metric.length - overall.length - 1
+                                              )
+                                              const parts = stripped.split('_')
+                                              return parts.length > 0 ? parts[parts.length - 1] : ''
+                                            }
+                                            return metric
                                           }
+                                          // Extract the category (what remains after removing strength and overall_metric_name)
+                                          const getCategory = (metric: string, overall: string) => {
+                                            if (metric.endsWith(`_${overall}`)) {
+                                              const stripped = metric.slice(
+                                                0,
+                                                metric.length - overall.length - 1
+                                              )
+                                              const parts = stripped.split('_')
+                                              // Remove the last part (strength) and join the rest (category)
+                                              return parts.length > 1
+                                                ? parts.slice(0, parts.length - 1).join('_')
+                                                : ''
+                                            }
+                                            return metric
                                           }
+                                          const categoryA = getCategory(a, overallA)
+                                          const categoryB = getCategory(b, overallB)
+                                          // First sort by category
+                                          if (categoryA !== categoryB) {
+                                            return categoryA.localeCompare(categoryB)
+                                          }
+                                          // Then sort by overall metric name
+                                          if (overallA !== overallB) {
+                                            return overallA.localeCompare(overallB)
+                                          }
+                                          // Finally sort by strength
+                                          const subA = stripOverall(a, overallA)
+                                          const subB = stripOverall(b, overallB)
+                                          // Try to parse subA and subB as numbers, handling k/m/b suffixes
+                                          const parseNumber = (str: string) => {
+                                            const match = str.match(/^\d+(?:\.\d+)?([kKmMbB]?)$/)
+                                            if (!match) return NaN
+                                            let [_, suffix] = match
+                                            let value = parseFloat(str)
+                                            switch (suffix?.toLowerCase()) {
+                                              case 'k':
+                                                value *= 1e3
+                                                break
+                                              case 'm':
+                                                value *= 1e6
+                                                break
+                                              case 'b':
+                                                value *= 1e9
+                                                break
+                                            }
+                                            return value
                                           }
+                                          const numA = parseNumber(subA)
+                                          const numB = parseNumber(subB)
+                                          if (!isNaN(numA) && !isNaN(numB)) {
+                                            return numA - numB
+                                          }
+                                          // Fallback to string comparison if not both numbers
+                                          return subA.localeCompare(subB)
+                                        })
+                                      }
+                                      return sortedMetrics.map((metric) => {
                                         const row = tableRows.find((r) => r.metric === metric)
                                         if (!row) return null
                                         return (
                                           <tr key={metric} className="hover:bg-base-100">
+                                            <td className="sticky left-0 bg-base-100 z-10 pl-10 border-gray-700 border cursor-pointer select-none flex items-center gap-1">
+                                              <span className="flex-1">{metric}</span>
+                                              <span
+                                                className="ml-1 cursor-pointer"
+                                                onClick={(e) => {
+                                                  e.stopPropagation()
+                                                  handleColumnSort(group, subGroup, metric)
+                                                }}
+                                                title={
+                                                  getRowColumnSort(group, subGroup, metric)
+                                                    ? getRowColumnSort(group, subGroup, metric)
+                                                        ?.direction === 'asc'
+                                                      ? 'Sort descending'
+                                                      : 'Clear sort'
+                                                    : 'Sort by this row'
+                                                }
+                                              >
+                                                {getRowColumnSort(group, subGroup, metric)
+                                                  ? getRowColumnSort(group, subGroup, metric)
+                                                      ?.direction === 'asc'
+                                                    ? '▲'
+                                                    : '▼'
+                                                  : '⇅'}
+                                              </span>
                                             </td>
                                             {overallMetrics
                                               .filter((oMetric) =>
                                                 selectedOverallMetrics.has(oMetric)
                                               )
                                               .map((oMetric) => {
                                                 const isMatchingMetric =
                                                   findAllMetricsForName(oMetric).includes(metric)
                                                 if (!isMatchingMetric) {
                                                   return (
                                                     <React.Fragment key={`${metric}-${oMetric}`}>
+                                                      {modelOrderByOverallMetric[oMetric].map(
+                                                        (col) => (
                                                           <td
                                                             key={`${metric}-${oMetric}-${col}`}
                                                             className="text-center border-gray-700 border"
                                                           ></td>
+                                                        )
+                                                      )}
                                                     </React.Fragment>
                                                   )
                                                 }
                                                 return (
                                                   <React.Fragment key={`${metric}-${oMetric}`}>
+                                                    {modelOrderByOverallMetric[oMetric].map(
+                                                      (col) => {
                                                         const cell = row[col]
                                                         return (
                                                           <td
                                                               : cell}
                                                           </td>
                                                         )
+                                                      }
+                                                    )}
                                                   </React.Fragment>
                                                 )
                                               })}
                                           </tr>
                                         )
+                                      })
+                                    })()}
                                 </React.Fragment>
                               )
                             })}

frontend/src/components/ModelFilter.tsx CHANGED Viewed

@@ -18,8 +18,8 @@ const ModelFilter: React.FC<ModelFilterProps> = ({ models, selectedModels, setSe
   }
   return (
-    <div className="w-full mb-4">
-      <fieldset className="fieldset w-full p-4 rounded border border-gray-700">
         <legend className="fieldset-legend font-semibold">
           Models ({selectedModels.size}/{models.length})
         </legend>

   }
   return (
+    <div className="w-full">
+      <fieldset className="fieldset w-full p-4 rounded border border-gray-700 bg-base-200">
         <legend className="fieldset-legend font-semibold">
           Models ({selectedModels.size}/{models.length})
         </legend>