@layer eng-reset, eng-tokens;
@layer eng-reset { :not(select, select *), :not(select, select *)::before, :not(select, select *)::after { all: revert; } }
body { font-feature-settings: normal; }
:where(em, i, cite) { font-style: revert; }
@font-face { font-family: "Inter"; src: url("../../fonts/InterVariable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; font-feature-settings: "cv01", "ss03"; }
@layer eng-tokens {
  :root, [data-scheme] {
  color-scheme: light;
  
  --gray-0: #ffffff;
  --gray-10: #fcfcfb;
  --gray-20: #f9f9f7;
  --gray-30: #f6f6f4;
  --gray-40: #f3f3f0;
  --gray-50: #f0efec;
  --gray-60: #edece8;
  --gray-70: #eae9e4;
  --gray-80: #e7e6e1;
  --gray-90: #e4e3dd;
  --gray-100: #e1e0d9;
  --gray-150: #d2d1c7;
  --gray-200: #c3c2b7;
  --gray-250: #b4b3a8;
  --gray-300: #a5a49a;
  --gray-350: #97958d;
  --gray-400: #898781;
  --gray-450: #7b7974;
  --gray-500: #6d6b67;
  --gray-550: #5f5e5a;
  --gray-600: #52514e;
  --gray-650: #444442;
  --gray-700: #383835;
  --gray-750: #2c2c2a;
  --gray-800: #20201f;
  --gray-810: #1e1e1d;
  --gray-820: #1c1c1b;
  --gray-830: #1a1a19;
  --gray-840: #181817;
  --gray-850: #151515;
  --gray-860: #131313;
  --gray-870: #111111;
  --gray-880: #0f0f0f;
  --gray-890: #0d0d0d;
  --gray-900: #0b0b0b;
  --red-0: #ffffff;
  --red-10: #fffbfb;
  --red-20: #fef7f7;
  --red-30: #fef3f3;
  --red-40: #fdefef;
  --red-50: #fbebeb;
  --red-60: #fae7e7;
  --red-70: #fae3e3;
  --red-80: #fadfdf;
  --red-90: #fadada;
  --red-100: #fad6d6;
  --red-150: #f7c1c1;
  --red-200: #f4abab;
  --red-250: #f09595;
  --red-300: #ec7e7e;
  --red-350: #e66767;
  --red-400: #e34948;
  --red-450: #d03b3b;
  --red-500: #b93535;
  --red-550: #a32c2c;
  --red-600: #8e2626;
  --red-650: #791e1e;
  --red-700: #641919;
  --red-750: #511212;
  --red-800: #3c0e0e;
  --red-810: #380d0d;
  --red-820: #340c0c;
  --red-830: #310b0b;
  --red-840: #2d0a0a;
  --red-850: #280a0a;
  --red-860: #230b0a;
  --red-870: #1d0b0a;
  --red-880: #170c0b;
  --red-890: #110c0b;
  --red-900: #0b0b0b;
  --orange-0: #ffffff;
  --orange-10: #fefbfa;
  --orange-20: #fdf7f5;
  --orange-30: #fcf4f0;
  --orange-40: #faf0ec;
  --orange-50: #f9ece7;
  --orange-60: #f8e9e2;
  --orange-70: #f7e5dd;
  --orange-80: #f7e1d7;
  --orange-90: #f7dcd1;
  --orange-100: #f7d8cb;
  --orange-150: #f3c5b2;
  --orange-200: #f4ae94;
  --orange-250: #f09978;
  --orange-300: #ec835a;
  --orange-350: #eb6834;
  --orange-400: #d95926;
  --orange-450: #c25124;
  --orange-500: #ae461c;
  --orange-550: #993d19;
  --orange-600: #863311;
  --orange-650: #712b0f;
  --orange-700: #5d230b;
  --orange-750: #4b1b08;
  --orange-800: #371407;
  --orange-810: #341307;
  --orange-820: #301106;
  --orange-830: #2d1006;
  --orange-840: #290f06;
  --orange-850: #240e07;
  --orange-860: #1f0e08;
  --orange-870: #1a0e09;
  --orange-880: #150d0a;
  --orange-890: #100c0b;
  --orange-900: #0b0b0b;
  --yellow-0: #ffffff;
  --yellow-10: #fefcf8;
  --yellow-20: #fcf8f1;
  --yellow-30: #fbf5ea;
  --yellow-40: #f9f2e4;
  --yellow-50: #f9eeda;
  --yellow-60: #faebce;
  --yellow-70: #fae7c2;
  --yellow-80: #fae3b8;
  --yellow-90: #f9e0b0;
  --yellow-100: #f9dca4;
  --yellow-150: #f9c868;
  --yellow-200: #fab219;
  --yellow-250: #eda104;
  --yellow-300: #da9303;
  --yellow-350: #c98500;
  --yellow-400: #b77701;
  --yellow-450: #a66a00;
  --yellow-500: #945d01;
  --yellow-550: #835100;
  --yellow-600: #724500;
  --yellow-650: #623900;
  --yellow-700: #512e00;
  --yellow-750: #412400;
  --yellow-800: #311a00;
  --yellow-810: #2e1800;
  --yellow-820: #2b1700;
  --yellow-830: #271500;
  --yellow-840: #231402;
  --yellow-850: #1f1204;
  --yellow-860: #1b1106;
  --yellow-870: #171007;
  --yellow-880: #130e09;
  --yellow-890: #0f0d0a;
  --yellow-900: #0b0b0b;
  --green-0: #ffffff;
  --green-10: #fafdfa;
  --green-20: #f5fbf4;
  --green-30: #f0f9ef;
  --green-40: #ebf7e9;
  --green-50: #e5f4e4;
  --green-60: #e0f2de;
  --green-70: #dbf0d8;
  --green-80: #d5eed3;
  --green-90: #d0eccd;
  --green-100: #caeac7;
  --green-150: #aee0a9;
  --green-200: #91d68b;
  --green-250: #73cb6d;
  --green-300: #55bf50;
  --green-350: #34b231;
  --green-400: #0da30e;
  --green-450: #009300;
  --green-500: #028301;
  --green-550: #017301;
  --green-600: #006300;
  --green-650: #005400;
  --green-700: #074505;
  --green-750: #0f350d;
  --green-800: #11260f;
  --green-810: #10230f;
  --green-820: #10210f;
  --green-830: #101e0f;
  --green-840: #101b0f;
  --green-850: #0f180e;
  --green-860: #0e160e;
  --green-870: #0e130d;
  --green-880: #0d100d;
  --green-890: #0c0e0c;
  --green-900: #0b0b0b;
  --aqua-0: #ffffff;
  --aqua-10: #f9fdfb;
  --aqua-20: #f3fbf8;
  --aqua-30: #edf9f4;
  --aqua-40: #e8f7f1;
  --aqua-50: #e2f4ed;
  --aqua-60: #dcf2ea;
  --aqua-70: #d5f0e6;
  --aqua-80: #ceefe2;
  --aqua-90: #c7eddf;
  --aqua-100: #bfebdb;
  --aqua-150: #a0e1c9;
  --aqua-200: #7ad7b4;
  --aqua-250: #5acba0;
  --aqua-300: #3cbd8c;
  --aqua-350: #1baf7a;
  --aqua-400: #1a9e70;
  --aqua-450: #148e65;
  --aqua-500: #0f7e5c;
  --aqua-550: #0f6e53;
  --aqua-600: #065f49;
  --aqua-650: #095040;
  --aqua-700: #034235;
  --aqua-750: #02342b;
  --aqua-800: #022720;
  --aqua-810: #02241e;
  --aqua-820: #02221c;
  --aqua-830: #021f1a;
  --aqua-840: #031c18;
  --aqua-850: #051a16;
  --aqua-860: #071713;
  --aqua-870: #081411;
  --aqua-880: #0a110f;
  --aqua-890: #0b0e0d;
  --aqua-900: #0b0b0b;
  --blue-0: #ffffff;
  --blue-10: #fafcff;
  --blue-20: #f5f9fe;
  --blue-30: #f0f7fe;
  --blue-40: #ebf4fc;
  --blue-50: #e7f1fb;
  --blue-60: #e2eefa;
  --blue-70: #ddebfa;
  --blue-80: #d7e8fa;
  --blue-90: #d2e5fa;
  --blue-100: #cde2fb;
  --blue-150: #b7d3f6;
  --blue-200: #9ec5f4;
  --blue-250: #86b6ef;
  --blue-300: #6da7ec;
  --blue-350: #5598e7;
  --blue-400: #3987e5;
  --blue-450: #2a78d6;
  --blue-500: #256abf;
  --blue-550: #1c5cab;
  --blue-600: #184f95;
  --blue-650: #114281;
  --blue-700: #0d366b;
  --blue-750: #062b57;
  --blue-800: #032042;
  --blue-810: #031e3d;
  --blue-820: #021c39;
  --blue-830: #021a36;
  --blue-840: #021831;
  --blue-850: #03162c;
  --blue-860: #051426;
  --blue-870: #07121f;
  --blue-880: #091018;
  --blue-890: #0a0d11;
  --blue-900: #0b0b0b;
  --violet-0: #ffffff;
  --violet-10: #fcfbff;
  --violet-20: #f8f8ff;
  --violet-30: #f5f4ff;
  --violet-40: #f2f1ff;
  --violet-50: #efedff;
  --violet-60: #ebeafe;
  --violet-70: #e8e6fe;
  --violet-80: #e5e2fd;
  --violet-90: #e2dffd;
  --violet-100: #dfdbfd;
  --violet-150: #cfcafb;
  --violet-200: #bfb9f5;
  --violet-250: #b0a7f2;
  --violet-300: #a096eb;
  --violet-350: #9085e9;
  --violet-400: #8173e3;
  --violet-450: #7161e0;
  --violet-500: #6250d6;
  --violet-550: #5645be;
  --violet-600: #4a3aa7;
  --violet-650: #3e318e;
  --violet-700: #322777;
  --violet-750: #271e60;
  --violet-800: #1d1649;
  --violet-810: #1b1544;
  --violet-820: #19133f;
  --violet-830: #17123b;
  --violet-840: #151036;
  --violet-850: #130f32;
  --violet-860: #110e2b;
  --violet-870: #0f0e23;
  --violet-880: #0e0d1b;
  --violet-890: #0c0c13;
  --violet-900: #0b0b0b;
  --magenta-0: #ffffff;
  --magenta-10: #fefbfc;
  --magenta-20: #fef6f9;
  --magenta-30: #fdf2f6;
  --magenta-40: #fbeff3;
  --magenta-50: #faebf0;
  --magenta-60: #f9e6ed;
  --magenta-70: #f9e2eb;
  --magenta-80: #f9dee8;
  --magenta-90: #f9d9e5;
  --magenta-100: #f9d4e2;
  --magenta-150: #f3c0d3;
  --magenta-200: #f3a8c3;
  --magenta-250: #ed93b4;
  --magenta-300: #e87ba4;
  --magenta-350: #e46191;
  --magenta-400: #d55181;
  --magenta-450: #c04873;
  --magenta-500: #ad3d66;
  --magenta-550: #993458;
  --magenta-600: #862a4c;
  --magenta-650: #722340;
  --magenta-700: #5e1c34;
  --magenta-750: #4c1429;
  --magenta-800: #390f1f;
  --magenta-810: #360d1c;
  --magenta-820: #320c1a;
  --magenta-830: #2f0b18;
  --magenta-840: #2b0a16;
  --magenta-850: #270a14;
  --magenta-860: #220a12;
  --magenta-870: #1c0b11;
  --magenta-880: #170b0f;
  --magenta-890: #110b0d;
  --magenta-900: #0b0b0b;
  --clay: #d97757;
  --clay-emphasized: #c6613f;
  --heather: #cbcadb;
  --plum: #827dbd;
  --cactus: #bcd1ca;
  --mineral: #629987;
  --ink-muted: #6c6b69;
  --ink-muted-dark: #888784;
  --ink-hairline: #888784;
  --ink-hairline-dark: #6c6b69;
  --role-raised: #ffffff;
  --role-raised-dark: #0b0b0b;
  --state-raised-hover: #f6f6f3;
  --state-raised-hover-dark: #111110;
  --state-raised-selected: #efede8;
  --state-raised-selected-dark: #171715;
  --state-raised-selected-hover: #eae9e2;
  --state-raised-selected-hover-dark: #1b1a18;
  --role-paper: #fcfcfb;
  --role-paper-dark: #0d0d0d;
  --state-paper-hover: #f4f3ef;
  --state-paper-hover-dark: #131312;
  --state-paper-selected: #eceae4;
  --state-paper-selected-dark: #191917;
  --state-paper-selected-hover: #e7e6de;
  --state-paper-selected-hover-dark: #1d1c1a;
  --role-mat: #f9f9f7;
  --role-mat-dark: #0f0f0f;
  --state-mat-hover: #f1f0ec;
  --state-mat-hover-dark: #151514;
  --state-mat-selected: #e9e7e0;
  --state-mat-selected-dark: #1c1b19;
  --state-mat-selected-hover: #e4e3db;
  --state-mat-selected-hover-dark: #1f1e1c;
  --role-ground: #f4f3f0;
  --role-ground-dark: #131313;
  --state-ground-hover: #ebeae5;
  --state-ground-hover-dark: #191918;
  --state-ground-selected: #e3e1da;
  --state-ground-selected-dark: #201f1d;
  --state-ground-selected-hover: #dfddd4;
  --state-ground-selected-hover-dark: #23221f;
  --role-well: #f1f0ed;
  --role-well-dark: #151515;
  --state-well-hover: #e8e7e2;
  --state-well-hover-dark: #1b1b1a;
  --state-well-selected: #e0ded7;
  --state-well-selected-dark: #22211f;
  --state-well-selected-hover: #dcdad1;
  --state-well-selected-hover-dark: #252521;
  --role-pill-fill: #eeede9;
  --role-pill-fill-dark: #171716;
  --state-pill-fill-hover: #e5e4de;
  --state-pill-fill-hover-dark: #1d1d1c;
  --state-pill-fill-selected: #dddbd3;
  --state-pill-fill-selected-dark: #242421;
  --state-pill-fill-selected-hover: #d9d7ce;
  --state-pill-fill-selected-hover-dark: #282723;
  --role-rule: #e9e8e4;
  --state-rule-hover: #e1dfd9;
  --state-rule-hover-dark: #21211f;
  --state-rule-selected: #d9d6ce;
  --state-rule-selected-dark: #282724;
  --state-rule-selected-hover: #d5d2c8;
  --state-rule-selected-hover-dark: #2b2b27;
  --alpha-0: rgb(11 11 11 / 0%);
  --alpha-1: rgb(11 11 11 / 5%);
  --alpha-2: rgb(11 11 11 / 10%);
  --alpha-3: rgb(11 11 11 / 20%);
  --alpha-4: rgb(11 11 11 / 35%);
  --alpha-5: rgb(11 11 11 / 50%);
  --alpha-6: rgb(11 11 11 / 60%);
  --alpha-7: rgb(11 11 11 / 70%);
  --alpha-8: rgb(11 11 11 / 85%);
  --alpha-9: rgb(11 11 11 / 95%);
  @supports (color: oklch(from red l c h)) {
  --gray-0: oklch(100.0% 0.0000 100);
  --gray-10: oklch(99.1% 0.0013 100);
  --gray-20: oklch(98.1% 0.0026 100);
  --gray-30: oklch(97.2% 0.0026 100);
  --gray-40: oklch(96.2% 0.0040 100);
  --gray-50: oklch(95.3% 0.0041 91.4);
  --gray-60: oklch(94.3% 0.0054 95.1);
  --gray-70: oklch(93.4% 0.0068 97.4);
  --gray-80: oklch(92.4% 0.0068 97.4);
  --gray-90: oklch(91.5% 0.0081 98.9);
  --gray-100: oklch(90.6% 0.0095 100);
  --gray-150: oklch(85.8% 0.0136 102);
  --gray-200: oklch(81.1% 0.0152 102.5);
  --gray-250: oklch(76.4% 0.0154 102.5);
  --gray-300: oklch(71.7% 0.0142 102.1);
  --gray-350: oklch(66.9% 0.0118 95.2);
  --gray-400: oklch(62.2% 0.0092 91.5);
  --gray-450: oklch(57.5% 0.0079 88.7);
  --gray-500: oklch(52.8% 0.0067 84.6);
  --gray-550: oklch(48.1% 0.0064 95.2);
  --gray-600: oklch(43.3% 0.0050 91.5);
  --gray-650: oklch(38.6% 0.0036 100);
  --gray-700: oklch(33.9% 0.0051 106.7);
  --gray-750: oklch(29.2% 0.0036 100);
  --gray-800: oklch(24.4% 0.0019 100);
  --gray-810: oklch(23.5% 0.0019 100);
  --gray-820: oklch(22.6% 0.0019 100);
  --gray-830: oklch(21.6% 0.0019 100);
  --gray-840: oklch(20.7% 0.0019 100);
  --gray-850: oklch(19.7% 0.0000 100);
  --gray-860: oklch(18.8% 0.0000 100);
  --gray-870: oklch(17.8% 0.0000 100);
  --gray-880: oklch(16.9% 0.0000 100);
  --gray-890: oklch(15.9% 0.0000 100);
  --gray-900: oklch(15.0% 0.0000 100);
  --red-0: oklch(100.0% 0.0000 22.4);
  --red-10: oklch(99.1% 0.0043 17.2);
  --red-20: oklch(98.1% 0.0075 17.3);
  --red-30: oklch(97.2% 0.0119 17.4);
  --red-40: oklch(96.2% 0.0152 17.4);
  --red-50: oklch(95.3% 0.0174 17.5);
  --red-60: oklch(94.3% 0.0208 17.5);
  --red-70: oklch(93.4% 0.0253 17.6);
  --red-80: oklch(92.4% 0.0299 17.7);
  --red-90: oklch(91.5% 0.0356 17.8);
  --red-100: oklch(90.6% 0.0403 17.9);
  --red-150: oklch(85.8% 0.0621 18.4);
  --red-200: oklch(81.1% 0.0863 19.1);
  --red-250: oklch(76.4% 0.1101 19.9);
  --red-300: oklch(71.7% 0.1357 21);
  --red-350: oklch(66.9% 0.1586 22.3);
  --red-400: oklch(62.2% 0.1909 24.9);
  --red-450: oklch(57.5% 0.1862 25.2);
  --red-500: oklch(52.8% 0.1689 25.1);
  --red-550: oklch(48.1% 0.1555 25.3);
  --red-600: oklch(43.3% 0.1396 25.1);
  --red-650: oklch(38.6% 0.1255 25.3);
  --red-700: oklch(33.9% 0.1075 25);
  --red-750: oklch(29.2% 0.0935 25.1);
  --red-800: oklch(24.4% 0.0724 24.2);
  --red-810: oklch(23.5% 0.0685 24.1);
  --red-820: oklch(22.6% 0.0646 23.9);
  --red-830: oklch(21.6% 0.0619 23.8);
  --red-840: oklch(20.7% 0.0579 23.7);
  --red-850: oklch(19.7% 0.0506 22.9);
  --red-860: oklch(18.8% 0.0414 24.2);
  --red-870: oklch(17.8% 0.0316 24.1);
  --red-880: oklch(16.9% 0.0194 25.1);
  --red-890: oklch(15.9% 0.0090 31.3);
  --red-900: oklch(15.0% 0.0000 22.4);
  --orange-0: oklch(100.0% 0.0000 41.4);
  --orange-10: oklch(99.1% 0.0035 41.4);
  --orange-20: oklch(98.1% 0.0070 39.5);
  --orange-30: oklch(97.2% 0.0102 48.6);
  --orange-40: oklch(96.2% 0.0121 43.3);
  --orange-50: oklch(95.3% 0.0157 42.4);
  --orange-60: oklch(94.3% 0.0189 46.8);
  --orange-70: oklch(93.4% 0.0225 45.6);
  --orange-80: oklch(92.4% 0.0278 46.1);
  --orange-90: oklch(91.5% 0.0336 43.5);
  --orange-100: oklch(90.6% 0.0389 44.1);
  --orange-150: oklch(85.8% 0.0589 43.6);
  --orange-200: oklch(81.1% 0.0902 41.2);
  --orange-250: oklch(76.4% 0.1146 41.5);
  --orange-300: oklch(71.7% 0.1406 41.6);
  --orange-350: oklch(66.9% 0.1750 40.6);
  --orange-400: oklch(62.2% 0.1726 40.1);
  --orange-450: oklch(57.5% 0.1560 40.3);
  --orange-500: oklch(52.8% 0.1463 40.3);
  --orange-550: oklch(48.1% 0.1323 40);
  --orange-600: oklch(43.3% 0.1223 40.2);
  --orange-650: oklch(38.6% 0.1065 40.2);
  --orange-700: oklch(33.9% 0.0917 40.8);
  --orange-750: oklch(29.2% 0.0786 40.4);
  --orange-800: oklch(24.4% 0.0604 40.4);
  --orange-810: oklch(23.5% 0.0574 40.2);
  --orange-820: oklch(22.6% 0.0546 40.3);
  --orange-830: oklch(21.6% 0.0515 40);
  --orange-840: oklch(20.7% 0.0469 40.4);
  --orange-850: oklch(19.7% 0.0400 39);
  --orange-860: oklch(18.8% 0.0316 40.5);
  --orange-870: oklch(17.8% 0.0230 43.6);
  --orange-880: oklch(16.9% 0.0152 41.5);
  --orange-890: oklch(15.9% 0.0073 34.3);
  --orange-900: oklch(15.0% 0.0000 41.4);
  --yellow-0: oklch(100.0% 0.0000 73.5);
  --yellow-10: oklch(99.1% 0.0057 84.6);
  --yellow-20: oklch(98.1% 0.0102 81.8);
  --yellow-30: oklch(97.2% 0.0159 82.8);
  --yellow-40: oklch(96.2% 0.0200 84.6);
  --yellow-50: oklch(95.3% 0.0290 82.6);
  --yellow-60: oklch(94.3% 0.0414 83.9);
  --yellow-70: oklch(93.4% 0.0526 84);
  --yellow-80: oklch(92.4% 0.0613 83);
  --yellow-90: oklch(91.5% 0.0679 83.6);
  --yellow-100: oklch(90.6% 0.0786 83.6);
  --yellow-150: oklch(85.8% 0.1268 82.4);
  --yellow-200: oklch(81.1% 0.1644 78.5);
  --yellow-250: oklch(76.4% 0.1604 75.1);
  --yellow-300: oklch(71.7% 0.1511 74.2);
  --yellow-350: oklch(66.9% 0.1425 73.2);
  --yellow-400: oklch(62.2% 0.1331 72);
  --yellow-450: oklch(57.5% 0.1240 70.8);
  --yellow-500: oklch(52.8% 0.1141 70);
  --yellow-550: oklch(48.1% 0.1046 69.2);
  --yellow-600: oklch(43.3% 0.0951 67.6);
  --yellow-650: oklch(38.6% 0.0857 66.3);
  --yellow-700: oklch(33.9% 0.0752 66);
  --yellow-750: oklch(29.2% 0.0649 66.2);
  --yellow-800: oklch(24.4% 0.0541 66.5);
  --yellow-810: oklch(23.5% 0.0520 66.3);
  --yellow-820: oklch(22.6% 0.0497 68.4);
  --yellow-830: oklch(21.6% 0.0467 70);
  --yellow-840: oklch(20.7% 0.0403 71);
  --yellow-850: oklch(19.7% 0.0337 68.4);
  --yellow-860: oklch(18.8% 0.0267 69.1);
  --yellow-870: oklch(17.8% 0.0210 73.7);
  --yellow-880: oklch(16.9% 0.0131 66.9);
  --yellow-890: oklch(15.9% 0.0070 78.1);
  --yellow-900: oklch(15.0% 0.0000 73.5);
  --green-0: oklch(100.0% 0.0000 142.6);
  --green-10: oklch(99.1% 0.0050 145.5);
  --green-20: oklch(98.1% 0.0112 141.3);
  --green-30: oklch(97.2% 0.0162 142.6);
  --green-40: oklch(96.2% 0.0224 141.2);
  --green-50: oklch(95.3% 0.0265 143.6);
  --green-60: oklch(94.3% 0.0327 142.5);
  --green-70: oklch(93.4% 0.0389 141.7);
  --green-80: oklch(92.4% 0.0447 143.2);
  --green-90: oklch(91.5% 0.0510 142.5);
  --green-100: oklch(90.6% 0.0579 142.8);
  --green-150: oklch(85.8% 0.0911 142.4);
  --green-200: oklch(81.1% 0.1244 142.5);
  --green-250: oklch(76.4% 0.1549 142.6);
  --green-300: oklch(71.7% 0.1795 142.7);
  --green-350: oklch(66.9% 0.1987 142.6);
  --green-400: oklch(62.2% 0.2073 142.6);
  --green-450: oklch(57.5% 0.1955 142.5);
  --green-500: oklch(52.8% 0.1789 142.5);
  --green-550: oklch(48.1% 0.1630 142.5);
  --green-600: oklch(43.3% 0.1473 142.5);
  --green-650: oklch(38.6% 0.1315 142.5);
  --green-700: oklch(33.9% 0.1089 142.5);
  --green-750: oklch(29.2% 0.0788 142.5);
  --green-800: oklch(24.4% 0.0499 142.1);
  --green-810: oklch(23.5% 0.0449 142.9);
  --green-820: oklch(22.6% 0.0409 142.9);
  --green-830: oklch(21.6% 0.0347 142.8);
  --green-840: oklch(20.7% 0.0282 142.5);
  --green-850: oklch(19.7% 0.0238 142.1);
  --green-860: oklch(18.8% 0.0200 144.7);
  --green-870: oklch(17.8% 0.0144 140.4);
  --green-880: oklch(16.9% 0.0078 145.2);
  --green-890: oklch(15.9% 0.0053 145.3);
  --green-900: oklch(15.0% 0.0000 142.6);
  --aqua-0: oklch(100.0% 0.0000 171.4);
  --aqua-10: oklch(99.1% 0.0050 165);
  --aqua-20: oklch(98.1% 0.0093 171.8);
  --aqua-30: oklch(97.2% 0.0142 169.3);
  --aqua-40: oklch(96.2% 0.0177 170.1);
  --aqua-50: oklch(95.3% 0.0211 170.6);
  --aqua-60: oklch(94.3% 0.0255 172);
  --aqua-70: oklch(93.4% 0.0313 171.3);
  --aqua-80: oklch(92.4% 0.0386 169.7);
  --aqua-90: oklch(91.5% 0.0438 171);
  --aqua-100: oklch(90.6% 0.0505 171);
  --aqua-150: oklch(85.8% 0.0739 169.6);
  --aqua-200: oklch(81.1% 0.1030 167.5);
  --aqua-250: oklch(76.4% 0.1216 165.5);
  --aqua-300: oklch(71.7% 0.1339 163.7);
  --aqua-350: oklch(66.9% 0.1408 162.1);
  --aqua-400: oklch(62.2% 0.1283 163.1);
  --aqua-450: oklch(57.5% 0.1186 163.6);
  --aqua-500: oklch(52.8% 0.1064 165.5);
  --aqua-550: oklch(48.1% 0.0934 167.7);
  --aqua-600: oklch(43.3% 0.0840 169.6);
  --aqua-650: oklch(38.6% 0.0707 172.6);
  --aqua-700: oklch(33.9% 0.0630 173.8);
  --aqua-750: oklch(29.2% 0.0527 176.8);
  --aqua-800: oklch(24.4% 0.0434 177.1);
  --aqua-810: oklch(23.5% 0.0408 178.5);
  --aqua-820: oklch(22.6% 0.0394 177.8);
  --aqua-830: oklch(21.6% 0.0367 179.5);
  --aqua-840: oklch(20.7% 0.0328 181.1);
  --aqua-850: oklch(19.7% 0.0289 179.2);
  --aqua-860: oklch(18.8% 0.0238 175.7);
  --aqua-870: oklch(17.8% 0.0186 176.6);
  --aqua-880: oklch(16.9% 0.0116 175.4);
  --aqua-890: oklch(15.9% 0.0053 173.6);
  --aqua-900: oklch(15.0% 0.0000 171.4);
  --blue-0: oklch(100.0% 0.0000 253.6);
  --blue-10: oklch(99.1% 0.0045 258.3);
  --blue-20: oklch(98.1% 0.0079 253.9);
  --blue-30: oklch(97.2% 0.0120 247.9);
  --blue-40: oklch(96.2% 0.0144 244.7);
  --blue-50: oklch(95.3% 0.0172 248);
  --blue-60: oklch(94.3% 0.0207 248);
  --blue-70: oklch(93.4% 0.0253 250);
  --blue-80: oklch(92.4% 0.0305 249.7);
  --blue-90: oklch(91.5% 0.0352 250.9);
  --blue-100: oklch(90.6% 0.0411 252.8);
  --blue-150: oklch(85.8% 0.0575 254.1);
  --blue-200: oklch(81.1% 0.0788 253.4);
  --blue-250: oklch(76.4% 0.0970 253.2);
  --blue-300: oklch(71.7% 0.1183 253.6);
  --blue-350: oklch(66.9% 0.1364 253.8);
  --blue-400: oklch(62.2% 0.1612 255.1);
  --blue-450: oklch(57.5% 0.1626 255.5);
  --blue-500: oklch(52.8% 0.1497 255.9);
  --blue-550: oklch(48.1% 0.1416 256.1);
  --blue-600: oklch(43.3% 0.1282 256.5);
  --blue-650: oklch(38.6% 0.1183 256.7);
  --blue-700: oklch(33.9% 0.1027 256.9);
  --blue-750: oklch(29.2% 0.0893 255.8);
  --blue-800: oklch(24.4% 0.0731 254.6);
  --blue-810: oklch(23.5% 0.0680 254);
  --blue-820: oklch(22.6% 0.0649 253);
  --blue-830: oklch(21.6% 0.0629 253.5);
  --blue-840: oklch(20.7% 0.0577 252.5);
  --blue-850: oklch(19.7% 0.0515 252.6);
  --blue-860: oklch(18.8% 0.0427 253.3);
  --blue-870: oklch(17.8% 0.0317 253);
  --blue-880: oklch(16.9% 0.0201 252.2);
  --blue-890: oklch(15.9% 0.0099 255.7);
  --blue-900: oklch(15.0% 0.0000 253.6);
  --violet-0: oklch(100.0% 0.0000 286.1);
  --violet-10: oklch(99.1% 0.0051 297.7);
  --violet-20: oklch(98.1% 0.0093 286.2);
  --violet-30: oklch(97.2% 0.0143 290.3);
  --violet-40: oklch(96.2% 0.0187 289.3);
  --violet-50: oklch(95.3% 0.0241 291);
  --violet-60: oklch(94.3% 0.0268 288.2);
  --violet-70: oklch(93.4% 0.0323 289.6);
  --violet-80: oklch(92.4% 0.0365 290.8);
  --violet-90: oklch(91.5% 0.0407 290.2);
  --violet-100: oklch(90.6% 0.0463 290.8);
  --violet-150: oklch(85.8% 0.0677 289.6);
  --violet-200: oklch(81.1% 0.0841 289);
  --violet-250: oklch(76.4% 0.1065 289.1);
  --violet-300: oklch(71.7% 0.1223 288.3);
  --violet-350: oklch(66.9% 0.1452 286.8);
  --violet-400: oklch(62.2% 0.1638 286.3);
  --violet-450: oklch(57.5% 0.1860 284.6);
  --violet-500: oklch(52.8% 0.1968 283.4);
  --violet-550: oklch(48.1% 0.1815 283.6);
  --violet-600: oklch(43.3% 0.1671 283.6);
  --violet-650: oklch(38.6% 0.1471 283.5);
  --violet-700: oklch(33.9% 0.1306 283.2);
  --violet-750: oklch(29.2% 0.1119 283.1);
  --violet-800: oklch(24.4% 0.0908 283.6);
  --violet-810: oklch(23.5% 0.0849 283.6);
  --violet-820: oklch(22.6% 0.0805 284.1);
  --violet-830: oklch(21.6% 0.0759 283.6);
  --violet-840: oklch(20.7% 0.0714 284.2);
  --violet-850: oklch(19.7% 0.0667 283.7);
  --violet-860: oklch(18.8% 0.0567 284.2);
  --violet-870: oklch(17.8% 0.0424 283.4);
  --violet-880: oklch(16.9% 0.0289 286.1);
  --violet-890: oklch(15.9% 0.0148 284.6);
  --violet-900: oklch(15.0% 0.0000 286.1);
  --magenta-0: oklch(100.0% 0.0000 358.6);
  --magenta-10: oklch(99.1% 0.0034 358.6);
  --magenta-20: oklch(98.1% 0.0094 352.4);
  --magenta-30: oklch(97.2% 0.0129 353.1);
  --magenta-40: oklch(96.2% 0.0139 355);
  --magenta-50: oklch(95.3% 0.0175 355.1);
  --magenta-60: oklch(94.3% 0.0226 353.1);
  --magenta-70: oklch(93.4% 0.0277 352);
  --magenta-80: oklch(92.4% 0.0324 353.3);
  --magenta-90: oklch(91.5% 0.0387 353.3);
  --magenta-100: oklch(90.6% 0.0450 353.3);
  --magenta-150: oklch(85.8% 0.0630 354.2);
  --magenta-200: oklch(81.1% 0.0941 356.1);
  --magenta-250: oklch(76.4% 0.1150 356.6);
  --magenta-300: oklch(71.7% 0.1412 357.4);
  --magenta-350: oklch(66.9% 0.1690 359.8);
  --magenta-400: oklch(62.2% 0.1712 0.8);
  --magenta-450: oklch(57.5% 0.1585 1.2);
  --magenta-500: oklch(52.8% 0.1505 1.1);
  --magenta-550: oklch(48.1% 0.1383 1.8);
  --magenta-600: oklch(43.3% 0.1289 1.4);
  --magenta-650: oklch(38.6% 0.1140 1.4);
  --magenta-700: oklch(33.9% 0.0986 1.5);
  --magenta-750: oklch(29.2% 0.0868 1.1);
  --magenta-800: oklch(24.4% 0.0689 360);
  --magenta-810: oklch(23.5% 0.0674 1.2);
  --magenta-820: oklch(22.6% 0.0634 0.8);
  --magenta-830: oklch(21.6% 0.0606 1.2);
  --magenta-840: oklch(20.7% 0.0565 0.8);
  --magenta-850: oklch(19.7% 0.0504 1.3);
  --magenta-860: oklch(18.8% 0.0426 1);
  --magenta-870: oklch(17.8% 0.0311 358.2);
  --magenta-880: oklch(16.9% 0.0221 358.2);
  --magenta-890: oklch(15.9% 0.0111 356.5);
  --magenta-900: oklch(15.0% 0.0000 358.6);
  --clay: oklch(67.2% 0.131 38.8);
  --clay-emphasized: oklch(60.8% 0.138 39.0);
  --heather: oklch(84.5% 0.024 288.6);
  --plum: oklch(62.0% 0.096 286.8);
  --cactus: oklch(84.3% 0.025 173.7);
  --mineral: oklch(63.9% 0.065 171.5);
  --ink-muted: oklch(52.78% 0.0034 84.6);
  --ink-muted-dark: oklch(62.22% 0.0046 91.5);
  --ink-hairline: oklch(62.22% 0.0046 91.5);
  --ink-hairline-dark: oklch(52.78% 0.0034 84.6);
  --role-raised: oklch(100.00% 0.0000 0);
  --role-raised-dark: oklch(15.00% 0.0000 100.0);
  --state-raised-hover: oklch(97.30% 0.0039 106.4);
  --state-raised-hover-dark: oklch(17.70% 0.0013 95.2);
  --state-raised-selected: oklch(94.60% 0.0074 92.8);
  --state-raised-selected-dark: oklch(20.40% 0.0030 95.2);
  --state-raised-selected-hover: oklch(93.25% 0.0094 95.7);
  --state-raised-selected-hover-dark: oklch(21.75% 0.0042 95.2);
  --role-paper: oklch(99.08% 0.0013 106.4);
  --role-paper-dark: oklch(15.92% 0.0000 100.0);
  --state-paper-hover: oklch(96.38% 0.0051 93.9);
  --state-paper-hover-dark: oklch(18.62% 0.0013 95.2);
  --state-paper-selected: oklch(93.68% 0.0083 94.8);
  --state-paper-selected-dark: oklch(21.32% 0.0033 95.2);
  --state-paper-selected-hover: oklch(92.33% 0.0103 97.4);
  --state-paper-selected-hover-dark: oklch(22.67% 0.0045 95.2);
  --role-mat: oklch(98.16% 0.0026 106.4);
  --role-mat-dark: oklch(16.84% 0.0000 100.0);
  --state-mat-hover: oklch(95.46% 0.0054 91.4);
  --state-mat-hover-dark: oklch(19.54% 0.0013 95.2);
  --state-mat-selected: oklch(92.76% 0.0092 96.7);
  --state-mat-selected-dark: oklch(22.24% 0.0037 95.2);
  --state-mat-selected-hover: oklch(91.41% 0.0108 97.0);
  --state-mat-selected-hover-dark: oklch(23.59% 0.0049 95.2);
  --role-ground: oklch(96.41% 0.0041 91.4);
  --role-ground-dark: oklch(18.59% 0.0000 100.0);
  --state-ground-hover: oklch(93.71% 0.0069 94.7);
  --state-ground-hover-dark: oklch(21.29% 0.0019 95.2);
  --state-ground-selected: oklch(91.01% 0.0103 96.8);
  --state-ground-selected-dark: oklch(23.99% 0.0043 95.2);
  --state-ground-selected-hover: oklch(89.66% 0.0117 96.3);
  --state-ground-selected-hover-dark: oklch(25.34% 0.0055 95.2);
  --role-well: oklch(95.51% 0.0041 91.4);
  --role-well-dark: oklch(19.49% 0.0000 100.0);
  --state-well-hover: oklch(92.81% 0.0078 96.6);
  --state-well-hover-dark: oklch(22.19% 0.0022 95.2);
  --state-well-selected: oklch(90.11% 0.0108 96.5);
  --state-well-selected-dark: oklch(24.89% 0.0047 95.2);
  --state-well-selected-hover: oklch(88.76% 0.0122 95.9);
  --state-well-selected-hover-dark: oklch(26.24% 0.0059 95.2);
  --role-pill-fill: oklch(94.58% 0.0054 95.1);
  --role-pill-fill-dark: oklch(20.42% 0.0014 100.0);
  --state-pill-fill-hover: oklch(91.88% 0.0084 97.2);
  --state-pill-fill-hover-dark: oklch(23.12% 0.0026 95.2);
  --state-pill-fill-selected: oklch(89.18% 0.0113 96.1);
  --state-pill-fill-selected-dark: oklch(25.82% 0.0050 95.2);
  --state-pill-fill-selected-hover: oklch(87.83% 0.0127 95.6);
  --state-pill-fill-selected-hover-dark: oklch(27.17% 0.0062 95.2);
  --role-rule: oklch(93.07% 0.0055 95.1);
  --state-rule-hover: oklch(90.37% 0.0092 96.6);
  --state-rule-hover-dark: oklch(24.63% 0.0032 95.2);
  --state-rule-selected: oklch(87.67% 0.0121 95.5);
  --state-rule-selected-dark: oklch(27.33% 0.0056 95.2);
  --state-rule-selected-hover: oklch(86.32% 0.0135 95.0);
  --state-rule-selected-hover-dark: oklch(28.68% 0.0068 95.2);
  --alpha-0: oklch(from var(--neutral-900) l c h / 0%);
  --alpha-1: oklch(from var(--neutral-900) l c h / 5%);
  --alpha-2: oklch(from var(--neutral-900) l c h / 10%);
  --alpha-3: oklch(from var(--neutral-900) l c h / 20%);
  --alpha-4: oklch(from var(--neutral-900) l c h / 35%);
  --alpha-5: oklch(from var(--neutral-900) l c h / 50%);
  --alpha-6: oklch(from var(--neutral-900) l c h / 60%);
  --alpha-7: oklch(from var(--neutral-900) l c h / 70%);
  --alpha-8: oklch(from var(--neutral-900) l c h / 85%);
  --alpha-9: oklch(from var(--neutral-900) l c h / 95%);
  }
  --neutral-0: var(--gray-0);
  --neutral-0: var(--gray-0);
  --neutral-10: var(--gray-10);
  --neutral-20: var(--gray-20);
  --neutral-30: var(--gray-30);
  --neutral-40: var(--gray-40);
  --neutral-50: var(--gray-50);
  --neutral-60: var(--gray-60);
  --neutral-70: var(--gray-70);
  --neutral-80: var(--gray-80);
  --neutral-90: var(--gray-90);
  --neutral-100: var(--gray-100);
  --neutral-150: var(--gray-150);
  --neutral-200: var(--gray-200);
  --neutral-250: var(--gray-250);
  --neutral-300: var(--gray-300);
  --neutral-350: var(--gray-350);
  --neutral-400: var(--gray-400);
  --neutral-450: var(--gray-450);
  --neutral-500: var(--gray-500);
  --neutral-550: var(--gray-550);
  --neutral-600: var(--gray-600);
  --neutral-650: var(--gray-650);
  --neutral-700: var(--gray-700);
  --neutral-750: var(--gray-750);
  --neutral-800: var(--gray-800);
  --neutral-810: var(--gray-810);
  --neutral-820: var(--gray-820);
  --neutral-830: var(--gray-830);
  --neutral-840: var(--gray-840);
  --neutral-850: var(--gray-850);
  --neutral-860: var(--gray-860);
  --neutral-870: var(--gray-870);
  --neutral-880: var(--gray-880);
  --neutral-890: var(--gray-890);
  --neutral-900: var(--gray-900);
  --surface-0: var(--gray-20);
  --surface-1: var(--gray-10);
  --surface-2: var(--gray-0);
  --surface-3: var(--gray-0);
  --surface-popover: var(--surface-3);
  --surface-panel: var(--surface-2);
  --page-bg: var(--surface-1);
  --raised: var(--role-raised);
  --paper: var(--role-paper);
  --mat: var(--role-mat);
  --ground: var(--role-ground);
  --well: var(--role-well);
  --pill-fill: var(--role-pill-fill);
  --rule: var(--role-rule);
  --sidebar-bg: var(--ground);
  --row-hover: var(--state-paper-hover);
  --row-selected: var(--state-paper-selected);
  --row-selected-hover: var(--state-paper-selected-hover);
  --text-primary: var(--neutral-900);
  --text-secondary: var(--neutral-600);
  --text-muted: var(--ink-muted);
  --text-disabled: var(--alpha-4);
  --border: var(--alpha-2);
  --border-strong: var(--alpha-3);
  --border-stronger: oklch(from var(--neutral-900) l c h / 40%);
  --fill-primary: var(--neutral-900);
  --fill-primary-hover: var(--neutral-750);
  --on-primary: var(--neutral-0);
  --fill-secondary: oklch(100% 0 0 / 10%);
  --fill-secondary-hover: var(--alpha-1);
  --fill-secondary-ring: var(--border);
  --fill-field: oklch(100% 0 0 / 50%);
  --fill-ghost-hover: var(--alpha-1);
  --fill-ghost-selected: var(--alpha-2);
  --fill-disabled: var(--alpha-1);
  --fill-control: var(--alpha-2);
  --fill-control-hover: var(--alpha-3);
  --fill-accent: var(--blue-500);
  --fill-accent-hover: var(--blue-450);
  --fill-danger: var(--red-450);
  --fill-danger-hover: var(--red-400);
  --fill-success: var(--green-450);
  --fill-success-hover: var(--green-400);
  --fill-warning: var(--yellow-200);
  --fill-warning-hover: var(--yellow-250);
  --fill-pro: var(--violet-450);
  --fill-pro-hover: var(--violet-400);
  --fill-brand: var(--clay-emphasized);
  --fill-brand-hover: var(--clay);
  --bg-accent: var(--blue-100);
  --bg-danger: var(--red-100);
  --bg-success: var(--green-100);
  --bg-warning: var(--yellow-100);
  --bg-pro: var(--violet-100);
  --bg-neutral: var(--alpha-1);
  --bg-neutral-hover: var(--alpha-2);
  --bg-user-message: var(--bg-neutral);
  --bg-highlight: color-mix(in oklch, var(--fill-warning) 33%, transparent);
  --backdrop: oklch(0% 0 0 / 40%);
  --text-accent: var(--blue-600);
  --text-danger: var(--red-600);
  --text-success: var(--green-600);
  --text-warning: var(--yellow-600);
  --text-pro: var(--violet-600);
  --on-accent: var(--gray-0);
  --on-danger: var(--gray-0);
  --on-success: var(--gray-900);
  --on-warning: var(--gray-900);
  --on-pro: var(--gray-0);
  --on-brand: var(--gray-0);
  --border-accent: var(--blue-250);
  --border-danger: var(--red-250);
  --border-success: var(--green-250);
  --border-warning: var(--yellow-250);
  --border-pro: var(--violet-250);
  --tooltip-bg: var(--neutral-900);
  --tooltip-fg: var(--neutral-0);
  --switch-track: var(--alpha-3);
  --switch-track-hover: var(--alpha-4);
  --switch-knob: var(--gray-0);
  --slider-track: var(--gray-60);
  --slider-fill: var(--alpha-3);
  --slider-handle: var(--gray-0);
  --segmented-track: var(--alpha-1);
  --segmented-thumb: var(--surface-popover);
  --radio-card-selected: var(--blue-50);
  --skeleton-base: var(--alpha-2);
  --skeleton-sheen: var(--alpha-2);
  --hairline-ink: var(--ink-hairline);
  --shortcut-ink: var(--gray-500);
  --shortcut-line: color-mix(in oklch, currentColor 18%, transparent);
  --ring-outer: 1px;
  --ring-inner: 0px;
  --ring-color: var(--border);
  --shadow-color: oklch(from var(--gray-900) l c h / 8%);
  --focus-shadow: inset 0 0 0 1px var(--page-bg), 0 0 0 1px var(--fill-accent), 0 0 6px 1px var(--bg-accent);
  --chart-1: var(--blue-450);
  --chart-2: var(--orange-350);
  --chart-3: var(--aqua-350);
  --chart-4: var(--yellow-250);
  --chart-5: var(--magenta-300);
  --chart-6: var(--green-500);
  --chart-7: var(--violet-500);
  --chart-8: var(--red-400);
  --chart-grid: var(--alpha-2);
  --chart-axis: var(--gray-200);
  --chart-muted: var(--gray-200);
  --chart-reference: var(--gray-400);
  
  --font-sans: var(--font-brand-sans, ui-sans-serif), ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-voice: var(--font-brand-serif, ui-serif), ui-serif, Georgia, "Times New Roman", serif;
  --font-mono: "Geist Mono", ui-monospace, monospace;
  --wght-regular: 400; --wght-medium: 500; --wght-semibold: 580; --wght-bold: 600;
  --text-entry-floor: 16px;
  
  --dur-fast: 60ms;
  --dur-snap: .12s;
  --dur-base: .2s;
  --dur-sheet: .3s;
  --dur-slow: .45s;
  --ease-out: cubic-bezier(.165,.84,.44,1);
  --ease-snap: cubic-bezier(.32,.72,0,1);
  --ease-overshoot: cubic-bezier(.34,1.3,.64,1);
  --ease-emphasis: cubic-bezier(.215,.61,.355,1);
  --btn-spring: linear(0,.2459,.6526,.9468,1.0764,1.0915,1.0585,1.0219,.9993,.9914,.9921,.9957,.9988,1.0004,1);
  --actions-in-delay: .1s;
  --skeleton-hold: .5s;
  --cmd-ring-delay: .6s;
  
  --z-coachmark: 35;
  --z-modal: 40;
  --z-popover: 50;
  --z-tooltip: 50;
  --z-toast: 60;
  
  --radius: 8px;
  --radius-xs: 6px;
  --radius-sm: 7px;
  --radius-lg: 10px;
  --radius-composer: 14px;
  --h-control: 32px;
  --h-control-xs: 24px;
  --h-control-sm: 28px;
  --h-control-lg: 40px;
  --h-control-nested: 22px;
  --icon: 20px;
  --icon-sm: 16px;
  --icon-lg: 24px;
  --pad-xs: 6px;
  --pad-sm: 8px;
  --pad-md: 12px;
  --pad-lg: 16px;
  --pad-xl: 24px;
  --gap-xs: 8px;
  --gap-sm: 12px;
  --gap-md: 16px;
  --gap-lg: 28px;
  --gap-xl: 40px;
  --fs-caption: 12px;
  --lh-caption: 17px;
  --fs-footnote: 13px;
  --lh-footnote: 17px;
  --fs-code: 13px;
  --lh-code: 19px;
  --fs-body: 14px;
  --lh-body: 20px;
  --fs-heading: 15px;
  --lh-heading: 20px;
  --fs-title: 22px;
  --lh-title: 28px;
  --fs-prose: 1rem;
  --lh-prose: 1.5rem;
  --checkbox: 20px;
  --checkbox-glyph: 16px;
  --checkbox-radius: 5px;
  --switch-h: 20px;
  --avatar-xs: 20px;
  --avatar-sm: 24px;
  --avatar-md: 32px;
  --avatar-lg: 40px;
  --row-h: 32px;
  --row-font: 14px;
  --group-font: 12px;
  --leading-slot: 28px;
  --new-circle: 22px;
  --radius-card: calc(var(--radius) + 4px);
  --radius-chip: calc(var(--h-control-nested) / 4); }
  :root[data-density="compact"] {
  --radius: 6px;
  --radius-xs: 5px;
  --radius-sm: 5px;
  --radius-lg: 7px;
  --radius-composer: 12px;
  --h-control: 24px;
  --h-control-xs: 20px;
  --h-control-sm: 20px;
  --h-control-lg: 28px;
  --h-control-nested: 18px;
  --icon: 16px;
  --icon-sm: 12px;
  --icon-lg: 16px;
  --pad-xs: 4px;
  --pad-sm: 6px;
  --pad-md: 8px;
  --pad-lg: 12px;
  --pad-xl: 20px;
  --gap-xs: 6px;
  --gap-sm: 8px;
  --gap-md: 12px;
  --gap-lg: 20px;
  --gap-xl: 32px;
  --fs-caption: 11px;
  --lh-caption: 17px;
  --fs-footnote: 12px;
  --lh-footnote: 15px;
  --fs-code: 12px;
  --lh-code: 17px;
  --fs-body: 13px;
  --lh-body: 19px;
  --fs-heading: 14px;
  --lh-heading: 18px;
  --fs-title: 20px;
  --lh-title: 25px;
  --fs-prose: .875rem;
  --lh-prose: 1.25rem;
  --checkbox: 16px;
  --checkbox-glyph: 16px;
  --checkbox-radius: 4px;
  --switch-h: 16px;
  --avatar-xs: 16px;
  --avatar-sm: 20px;
  --avatar-md: 28px;
  --avatar-lg: 36px;
  --row-h: 26px;
  --row-font: 13px;
  --group-font: 12px;
  --leading-slot: 24px;
  --new-circle: 18px;
  --radius-card: calc(var(--radius) + 4px);
  --radius-chip: calc(var(--h-control-nested) / 4); }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
  color-scheme: dark;
  --alpha-0: rgb(255 255 255 / 0%);
  --alpha-1: rgb(255 255 255 / 5%);
  --alpha-2: rgb(255 255 255 / 10%);
  --alpha-3: rgb(255 255 255 / 20%);
  --alpha-4: rgb(255 255 255 / 35%);
  --alpha-5: rgb(255 255 255 / 50%);
  --alpha-6: rgb(255 255 255 / 60%);
  --alpha-7: rgb(255 255 255 / 70%);
  --alpha-8: rgb(255 255 255 / 85%);
  --alpha-9: rgb(255 255 255 / 95%);
  --neutral-0: var(--gray-900);
  --neutral-0: var(--gray-900);
  --neutral-10: var(--gray-890);
  --neutral-20: var(--gray-880);
  --neutral-30: var(--gray-870);
  --neutral-40: var(--gray-860);
  --neutral-50: var(--gray-850);
  --neutral-60: var(--gray-840);
  --neutral-70: var(--gray-830);
  --neutral-80: var(--gray-820);
  --neutral-90: var(--gray-810);
  --neutral-100: var(--gray-800);
  --neutral-150: var(--gray-750);
  --neutral-200: var(--gray-700);
  --neutral-250: var(--gray-650);
  --neutral-300: var(--gray-600);
  --neutral-350: var(--gray-550);
  --neutral-400: var(--gray-500);
  --neutral-450: var(--gray-450);
  --neutral-500: var(--gray-400);
  --neutral-550: var(--gray-350);
  --neutral-600: var(--gray-300);
  --neutral-650: var(--gray-250);
  --neutral-700: var(--gray-200);
  --neutral-750: var(--gray-150);
  --neutral-800: var(--gray-100);
  --neutral-810: var(--gray-90);
  --neutral-820: var(--gray-80);
  --neutral-830: var(--gray-70);
  --neutral-840: var(--gray-60);
  --neutral-850: var(--gray-50);
  --neutral-860: var(--gray-40);
  --neutral-870: var(--gray-30);
  --neutral-880: var(--gray-20);
  --neutral-890: var(--gray-10);
  --neutral-900: var(--gray-0);
  --surface-0: var(--gray-900);
  --surface-1: var(--gray-850);
  --surface-2: var(--gray-830);
  --surface-3: var(--gray-800);
  --raised: var(--role-raised-dark);
  --paper: var(--role-paper-dark);
  --mat: var(--role-mat-dark);
  --ground: var(--role-ground-dark);
  --well: var(--role-well-dark);
  --pill-fill: var(--role-pill-fill-dark);
  --rule: var(--alpha-2);
  --sidebar-bg: var(--ground);
  --row-hover: var(--state-paper-hover-dark);
  --row-selected: var(--state-paper-selected-dark);
  --row-selected-hover: var(--state-paper-selected-hover-dark);
  --text-primary: var(--gray-50);
  --text-secondary: var(--gray-200);
  --text-muted: var(--ink-muted-dark);
  --hairline-ink: var(--ink-hairline-dark);
  --fill-primary-hover: var(--gray-100);
  --fill-secondary: var(--alpha-2);
  --fill-secondary-hover: oklch(100% 0 0 / 14%);
  --fill-secondary-ring: transparent;
  --fill-field: var(--alpha-1);
  --fill-ghost-hover: oklch(from var(--neutral-900) l c h / 7.5%);
  --fill-ghost-selected: oklch(from var(--neutral-900) l c h / 15%);
  --fill-accent: var(--blue-500);
  --fill-accent-hover: var(--blue-450);
  --bg-accent: var(--blue-800);
  --bg-danger: var(--red-800);
  --bg-success: var(--green-800);
  --bg-warning: var(--yellow-800);
  --bg-pro: var(--violet-800);
  --backdrop: oklch(0% 0 0 / 50%);
  --text-accent: var(--blue-300);
  --text-danger: var(--red-300);
  --text-success: var(--green-400);
  --text-warning: var(--yellow-300);
  --text-pro: var(--violet-300);
  --border-accent: var(--blue-700);
  --border-danger: var(--red-700);
  --border-success: var(--green-700);
  --border-warning: var(--yellow-700);
  --border-pro: var(--violet-700);
  --tooltip-bg: var(--surface-3);
  --tooltip-fg: var(--text-primary);
  --switch-track: var(--alpha-2);
  --switch-track-hover: var(--alpha-3);
  --slider-track: var(--gray-830);
  --segmented-thumb: var(--alpha-2);
  --radio-card-selected: var(--blue-850);
  --shortcut-ink: var(--gray-300);
  --shortcut-line: color-mix(in oklch, currentColor 22%, transparent);
  --ring-outer: 0px;
  --ring-inner: 1px;
  --ring-color: var(--alpha-2);
  --shadow-color: oklch(0% 0 0 / 24%);
  --focus-shadow: inset 0 0 0 1px var(--page-bg), 0 0 0 1px var(--fill-accent), 0 0 6px 1px oklch(from var(--blue-600) l c h / 60%);
  --chart-1: var(--blue-400);
  --chart-2: var(--orange-400);
  --chart-3: var(--aqua-400);
  --chart-4: var(--yellow-350);
  --chart-5: var(--magenta-400);
  --chart-6: var(--green-500);
  --chart-7: var(--violet-350);
  --chart-8: var(--red-350);
  --chart-axis: var(--gray-700);
  --chart-muted: var(--gray-550);
  --chart-reference: var(--gray-350);
  --wght-regular: 360; --wght-medium: 460; --wght-semibold: 540; --wght-bold: 560; }
  }
  :root[data-theme="dark"], [data-scheme="dark"][data-scheme] {
  color-scheme: dark;
  --alpha-0: rgb(255 255 255 / 0%);
  --alpha-1: rgb(255 255 255 / 5%);
  --alpha-2: rgb(255 255 255 / 10%);
  --alpha-3: rgb(255 255 255 / 20%);
  --alpha-4: rgb(255 255 255 / 35%);
  --alpha-5: rgb(255 255 255 / 50%);
  --alpha-6: rgb(255 255 255 / 60%);
  --alpha-7: rgb(255 255 255 / 70%);
  --alpha-8: rgb(255 255 255 / 85%);
  --alpha-9: rgb(255 255 255 / 95%);
  --neutral-0: var(--gray-900);
  --neutral-0: var(--gray-900);
  --neutral-10: var(--gray-890);
  --neutral-20: var(--gray-880);
  --neutral-30: var(--gray-870);
  --neutral-40: var(--gray-860);
  --neutral-50: var(--gray-850);
  --neutral-60: var(--gray-840);
  --neutral-70: var(--gray-830);
  --neutral-80: var(--gray-820);
  --neutral-90: var(--gray-810);
  --neutral-100: var(--gray-800);
  --neutral-150: var(--gray-750);
  --neutral-200: var(--gray-700);
  --neutral-250: var(--gray-650);
  --neutral-300: var(--gray-600);
  --neutral-350: var(--gray-550);
  --neutral-400: var(--gray-500);
  --neutral-450: var(--gray-450);
  --neutral-500: var(--gray-400);
  --neutral-550: var(--gray-350);
  --neutral-600: var(--gray-300);
  --neutral-650: var(--gray-250);
  --neutral-700: var(--gray-200);
  --neutral-750: var(--gray-150);
  --neutral-800: var(--gray-100);
  --neutral-810: var(--gray-90);
  --neutral-820: var(--gray-80);
  --neutral-830: var(--gray-70);
  --neutral-840: var(--gray-60);
  --neutral-850: var(--gray-50);
  --neutral-860: var(--gray-40);
  --neutral-870: var(--gray-30);
  --neutral-880: var(--gray-20);
  --neutral-890: var(--gray-10);
  --neutral-900: var(--gray-0);
  --surface-0: var(--gray-900);
  --surface-1: var(--gray-850);
  --surface-2: var(--gray-830);
  --surface-3: var(--gray-800);
  --raised: var(--role-raised-dark);
  --paper: var(--role-paper-dark);
  --mat: var(--role-mat-dark);
  --ground: var(--role-ground-dark);
  --well: var(--role-well-dark);
  --pill-fill: var(--role-pill-fill-dark);
  --rule: var(--alpha-2);
  --sidebar-bg: var(--ground);
  --row-hover: var(--state-paper-hover-dark);
  --row-selected: var(--state-paper-selected-dark);
  --row-selected-hover: var(--state-paper-selected-hover-dark);
  --text-primary: var(--gray-50);
  --text-secondary: var(--gray-200);
  --text-muted: var(--ink-muted-dark);
  --hairline-ink: var(--ink-hairline-dark);
  --fill-primary-hover: var(--gray-100);
  --fill-secondary: var(--alpha-2);
  --fill-secondary-hover: oklch(100% 0 0 / 14%);
  --fill-secondary-ring: transparent;
  --fill-field: var(--alpha-1);
  --fill-ghost-hover: oklch(from var(--neutral-900) l c h / 7.5%);
  --fill-ghost-selected: oklch(from var(--neutral-900) l c h / 15%);
  --fill-accent: var(--blue-500);
  --fill-accent-hover: var(--blue-450);
  --bg-accent: var(--blue-800);
  --bg-danger: var(--red-800);
  --bg-success: var(--green-800);
  --bg-warning: var(--yellow-800);
  --bg-pro: var(--violet-800);
  --backdrop: oklch(0% 0 0 / 50%);
  --text-accent: var(--blue-300);
  --text-danger: var(--red-300);
  --text-success: var(--green-400);
  --text-warning: var(--yellow-300);
  --text-pro: var(--violet-300);
  --border-accent: var(--blue-700);
  --border-danger: var(--red-700);
  --border-success: var(--green-700);
  --border-warning: var(--yellow-700);
  --border-pro: var(--violet-700);
  --tooltip-bg: var(--surface-3);
  --tooltip-fg: var(--text-primary);
  --switch-track: var(--alpha-2);
  --switch-track-hover: var(--alpha-3);
  --slider-track: var(--gray-830);
  --segmented-thumb: var(--alpha-2);
  --radio-card-selected: var(--blue-850);
  --shortcut-ink: var(--gray-300);
  --shortcut-line: color-mix(in oklch, currentColor 22%, transparent);
  --ring-outer: 0px;
  --ring-inner: 1px;
  --ring-color: var(--alpha-2);
  --shadow-color: oklch(0% 0 0 / 24%);
  --focus-shadow: inset 0 0 0 1px var(--page-bg), 0 0 0 1px var(--fill-accent), 0 0 6px 1px oklch(from var(--blue-600) l c h / 60%);
  --chart-1: var(--blue-400);
  --chart-2: var(--orange-400);
  --chart-3: var(--aqua-400);
  --chart-4: var(--yellow-350);
  --chart-5: var(--magenta-400);
  --chart-6: var(--green-500);
  --chart-7: var(--violet-350);
  --chart-8: var(--red-350);
  --chart-axis: var(--gray-700);
  --chart-muted: var(--gray-550);
  --chart-reference: var(--gray-350);
  --wght-regular: 360; --wght-medium: 460; --wght-semibold: 540; --wght-bold: 560; }
  :root {
  --ink: var(--text-primary); --ink2: var(--text-secondary); --ink3: var(--text-muted); --ink4: var(--hairline-ink);
  --line: oklch(from var(--neutral-900) l c h / 6%);
  --panel-line: oklch(from var(--neutral-900) l c h / 8%);
  --line2: oklch(from var(--neutral-900) l c h / 10%);
  --elev: 0 3px 6px -2px rgba(0,0,0,.02), 0 1px 1px rgba(0,0,0,.04);
  --lift: 0 0 0 .5px oklch(from var(--neutral-900) l c h / 8.8%), 0 3px 6px -2px rgba(0,0,0,.02), 0 1px 1px 0 rgba(0,0,0,.04);
  --pop: 0 0 0 .5px oklch(from var(--neutral-900) l c h / 10%), 0 6px 18px rgba(0,0,0,.02), 0 3px 9px rgba(0,0,0,.04), 0 1px 1px rgba(0,0,0,.04);
  --dock: 0 0 0 1px oklch(from var(--neutral-900) l c h / 12%), 0 18px 44px -8px rgba(0,0,0,.2), 0 4px 12px -2px rgba(0,0,0,.08);
  --badge-accent-bg: #cde2fb; --badge-accent-fg: #184f95;
  --badge-danger-bg: #fad6d6; --badge-danger-fg: #8e2626;
  --badge-success-bg: #caeac7; --badge-success-fg: #006300;
  --badge-warning-bg: #f9dca4; --badge-warning-fg: #734500;
  --badge-pro-bg: #dfdbfd; --badge-pro-fg: #4a3aa7;
  --badge-neutral-bg: var(--pill-fill); --badge-neutral-fg: var(--ink2);
  --korn-opacity: 0.05; }
  :root {
  --pill: var(--pill-fill);
  --d-h: var(--state-ground-hover); --d-s: var(--state-ground-selected); --d-sh: var(--state-ground-selected-hover);
  --p-h: var(--state-paper-hover);  --p-s: var(--state-paper-selected);  --p-sh: var(--state-paper-selected-hover);
  --r-h: var(--state-raised-hover); --r-s: var(--state-raised-selected); }
  :root[data-theme="dark"], [data-scheme="dark"][data-scheme] {
  --d-h: var(--state-ground-hover-dark); --d-s: var(--state-ground-selected-dark); --d-sh: var(--state-ground-selected-hover-dark);
  --p-h: var(--state-paper-hover-dark);  --p-s: var(--state-paper-selected-dark);  --p-sh: var(--state-paper-selected-hover-dark);
  --r-h: var(--state-raised-hover-dark); --r-s: var(--state-raised-selected-dark); }
  @property --anim { syntax: "<number>"; inherits: false; initial-value: 0; }
}
:root:root:root { --paper: var(--role-paper); --ground: var(--role-ground); }
@media (prefers-color-scheme: dark) {
  :root:root:root:not([data-theme="light"]) { --paper: var(--role-paper-dark); --ground: var(--role-ground-dark); }
}
:root:root:root[data-theme="dark"] { --paper: var(--role-paper-dark); --ground: var(--role-ground-dark); }
@font-face { font-family: "Inter Fallback"; src: local("Arial"); ascent-override: 90.44%; descent-override: 22.52%; line-gap-override: 0%; size-adjust: 107.12%; }
:root, [data-scheme] {
  --font: "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-code: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  
  --w-body: 400; --w-ui: 450; --w-label: 500; --w-head: 550;
  --t-meta:  var(--w-ui) 12px/16px var(--font);
  --t-ui:    var(--w-ui) 13px/20px var(--font);
  --t-body:  var(--w-body) 15px/24px var(--font);
  --t-head:  var(--w-head) 20px/28px var(--font);
  --t-title: var(--w-head) 32px/40px var(--font);
  
  --w-display: 500;
  --t-display: var(--w-display) 64px/1 var(--font);
  --t-section: var(--w-display) 48px/1 var(--font);
  --t-lead:    var(--w-body) 24px/1.33 var(--font);
  --t-close:   var(--w-display) 72px/1 var(--font);

  
  --r-sm: 6px; --r: 8px; --r-lg: 12px; --r-pill: 9999px;
  --r-press: 9999px; --r-value: 8px; --r-mark: 6px; --r-key: 4px; --r-contain: 12px; --r-row: 8px;
  --hair: .5px;

  
  --ts: 1;
  --tau: calc(50ms * var(--ts));
  --ease-lag: cubic-bezier(.19, 1, .22, 1);
  --d-lag: calc(390ms * var(--ts));
  --d-fold: calc(190ms * var(--ts));
  --d-op: calc(40ms * var(--ts));
  
  --ease-tau: linear(0, 0.0234 0.39%, 0.0740 1.28%, 0.1420 2.54%, 0.2210 4.15%, 0.3058 6.06%, 0.3921 8.27%, 0.4764 10.75%, 0.5561 13.48%, 0.6294 16.47%, 0.6951 19.70%, 0.7528 23.17%, 0.8025 26.86%, 0.8443 30.78%, 0.8791 34.91%, 0.9074 39.26%, 0.9301 43.81%, 0.9481 48.56%, 0.9621 53.52%, 0.9728 58.67%, 0.9810 64.02%, 0.9870 69.55%, 0.9915 75.28%, 0.9948 81.19%, 0.9972 87.28%, 0.9988 93.55%, 1);
  --d-tau: calc(300ms * var(--ts));

  
  --e1: 0 3px 6px -2px lch(0 0 0 / .02), 0 1px 1px lch(0 0 0 / .04);
  --e2: 0 6px 18px lch(0 0 0 / .02), 0 3px 9px lch(0 0 0 / .04), 0 1px 1px lch(0 0 0 / .04);
  --e3: 0 9px 48px lch(0 0 0 / .08), 0 6px 24px lch(0 0 0 / .10), 0 1px 1px lch(0 0 0 / .04);
  --ring: 0 0 0 var(--hair) var(--line2);
  --ring-strong: 0 0 0 var(--hair) var(--alpha-3);
  --backdrop: lch(0 0 0 / .25);


  --header-h: 64px;
  --dock-h: 48px; }
@media (max-width: 1279px) {
  :root, [data-scheme] { --t-display: var(--w-display) 56px/1.1 var(--font); --t-section: var(--w-display) 40px/1.1 var(--font); --t-lead: var(--w-body) 20px/1.33 var(--font); --t-close: var(--w-display) 40px/1.1 var(--font); }
}
@media (max-width: 639px) {
  :root, [data-scheme] { --t-display: var(--w-display) 38px/1.1 var(--font); --t-section: var(--w-display) 24px/1.33 var(--font); --t-lead: var(--w-body) 15px/1.6 var(--font); --t-close: var(--w-display) 38px/1.1 var(--font); }
}
:root[data-theme="dark"], [data-scheme="dark"][data-scheme] {
  --w-body: 370; --w-ui: 420; --w-label: 470; --w-head: 520; --w-display: 470;
  --e1: 0 3px 6px -2px lch(0 0 0 / .3), 0 1px 1px lch(0 0 0 / .4);
  --e2: 0 0 0 .5px oklch(100% 0 0 / 8%), 0 6px 18px lch(0 0 0 / .3), 0 3px 9px lch(0 0 0 / .3), 0 1px 1px lch(0 0 0 / .3);
  --e3: 0 0 0 .5px oklch(100% 0 0 / 9%), 0 9px 48px lch(0 0 0 / .5), 0 6px 24px lch(0 0 0 / .4), 0 1px 1px lch(0 0 0 / .3);
  --backdrop: lch(0 0 0 / .5); }
*, *::before, *::after { box-sizing: border-box; }
:root, [data-scheme] { box-sizing: border-box; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
html { scroll-padding-top: env(safe-area-inset-top, 0px); height: 100%; }
html, body { margin: 0; background: var(--paper); }
body {
  font: var(--t-body);
  letter-spacing: -0.011em;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  height: 100%;
  overflow: hidden;
  cursor: default; }
h1, h2, h3, h4, p, ol, figure { margin: 0; padding: 0; }
ol { list-style: none; }
a { color: inherit; text-decoration: none; cursor: default; }
button, input, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { background: none; border: 0; padding: 0; margin: 0; cursor: default; }
input, textarea { cursor: text; }
svg { display: block; }
:focus { outline: none; }
:focus-visible { box-shadow: var(--focus-shadow); border-radius: var(--r-sm); }
::selection { background: color-mix(in oklch, var(--violet-450) 24%, transparent); }
[hidden] { display: none !important; }
.num { font-variant-numeric: tabular-nums; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
* { scrollbar-width: thin; scrollbar-color: var(--alpha-2) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--alpha-2); border-radius: 10px; border: 3px solid transparent; background-clip: content-box; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
}
:root[data-motion="reduced"] *, :root[data-motion="reduced"] *::before, :root[data-motion="reduced"] *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
@media (max-width: 720px) {
  .hide-sm { display: none !important; }
}
:root {
  
  --fill-accent: var(--violet-500);
  --fill-accent-hover: var(--violet-550);
  --text-accent: var(--violet-600);
  --bg-accent: var(--violet-100);
  --border-accent: var(--violet-250);
  --focus-shadow: inset 0 0 0 1px var(--page-bg), 0 0 0 1px var(--fill-accent), 0 0 6px 1px var(--bg-accent);
  
  --glass: color-mix(in oklch, var(--raised) 86%, transparent);

  --b-accent-bg: oklch(from var(--violet-250) l c h / 35%); --b-accent-fg: var(--violet-600);
  --b-info-bg: oklch(from var(--blue-250) l c h / 35%); --b-info-fg: var(--blue-600);
  --b-danger-bg: oklch(from var(--red-250) l c h / 35%); --b-danger-fg: var(--red-600);
  --b-success-bg: oklch(from var(--green-250) l c h / 35%); --b-success-fg: var(--green-600);
  --b-warning-bg: oklch(from var(--yellow-250) l c h / 35%); --b-warning-fg: var(--yellow-600);
  --b-orange-bg: oklch(from var(--orange-250) l c h / 35%); --b-orange-fg: var(--orange-600);
  --b-aqua-bg: oklch(from var(--aqua-250) l c h / 35%); --b-aqua-fg: var(--aqua-600);
  --b-magenta-bg: oklch(from var(--magenta-250) l c h / 35%); --b-magenta-fg: var(--magenta-600);
  --key-ring: oklch(from var(--gray-900) l c h / 13%); --key-bg: var(--gray-0); --key-lip: var(--role-rule); --key-down: var(--role-well); }
:root[data-theme="dark"], [data-scheme="dark"][data-scheme] {
  --text-accent: var(--violet-300);
  --bg-accent: var(--violet-800);
  --border-accent: var(--violet-700);
  --focus-shadow: inset 0 0 0 1px var(--page-bg), 0 0 0 1px var(--fill-accent), 0 0 6px 1px oklch(from var(--violet-600) l c h / 60%);

  --b-accent-bg: oklch(from var(--violet-750) l c h / 75%); --b-accent-fg: var(--violet-300);
  --b-info-bg: oklch(from var(--blue-750) l c h / 75%); --b-info-fg: var(--blue-300);
  --b-danger-bg: oklch(from var(--red-750) l c h / 75%); --b-danger-fg: var(--red-300);
  --b-success-bg: oklch(from var(--green-800) l c h / 75%); --b-success-fg: var(--green-300);
  --b-warning-bg: oklch(from var(--yellow-750) l c h / 75%); --b-warning-fg: var(--yellow-300);
  --b-orange-bg: oklch(from var(--orange-750) l c h / 75%); --b-orange-fg: var(--orange-300);
  --b-aqua-bg: oklch(from var(--aqua-750) l c h / 75%); --b-aqua-fg: var(--aqua-300);
  --b-magenta-bg: oklch(from var(--magenta-750) l c h / 75%); --b-magenta-fg: var(--magenta-300);
  --key-ring: oklch(from var(--gray-0) l c h / 12%); --key-bg: var(--state-pill-fill-hover-dark); --key-lip: var(--gray-900); --key-down: var(--gray-850); }
.hdr {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30;
  height: calc(var(--header-h) + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) 24px 0 32px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  pointer-events: none;
  transition: transform var(--d-lag) var(--ease-lag); }
.hdr::before {
  content: ""; position: absolute; inset: 0 0 -24px; z-index: -1; pointer-events: none;
  background: linear-gradient(var(--paper) 55%, transparent);
  opacity: var(--hdr-veil, 1); }
.hdr[data-hidden="true"] { transform: translateY(calc(-100% - 8px)); }
.hdr > * { pointer-events: auto; }
.hdr__left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.hdr__logo { display: grid; place-items: center; width: 48px; height: 36px; margin: 0 -8px; border-radius: var(--r-press); color: var(--ink); }
.hdr__logo svg { width: 42px; height: 22px; }
@media (hover: hover) {
  .hdr__logo:is(:hover, [data-hover]) { background: var(--fill-ghost-hover); }
}
.hdr__title { font: var(--t-ui); font-weight: var(--w-label); color: var(--ink); white-space: nowrap; }
.hdr__crumb { display: flex; align-items: center; gap: 8px; font: var(--t-ui); color: var(--ink3); white-space: nowrap; overflow: hidden; }
.hdr__crumb::before { content: ""; width: 1px; height: 14px; background: var(--line2); transform: rotate(18deg); }
.hdr__crumb span { transition: color 150ms; }
.hdr__right { display: flex; align-items: center; gap: 6px; }
.hdr__count { font: var(--t-meta); font-variant-numeric: tabular-nums; color: var(--ink3); margin-right: 10px; white-space: nowrap; }
.ibtn {
  width: 32px; height: 32px; display: grid; place-items: center;
  border-radius: var(--r-press); color: var(--ink2); }
.ibtn[aria-expanded="true"] { background: var(--fill-ghost-hover); color: var(--ink); }
@media (hover: hover) {
  .ibtn:is(:hover, [data-hover]) { background: var(--fill-ghost-hover); color: var(--ink); }
}
.ibtn svg { width: 18px; height: 18px; }
.hbtn {
  height: 32px; display: inline-flex; align-items: center; gap: 8px; padding: 0 8px 0 12px;
  border-radius: var(--r-press); color: var(--ink2); font: var(--t-ui); }
@media (hover: hover) {
  .hbtn:is(:hover, [data-hover]) { background: var(--fill-ghost-hover); color: var(--ink); }
}
.hbtn svg { width: 15px; height: 15px; }
@media (max-width: 720px) {
  .hdr { padding: env(safe-area-inset-top, 0px) 12px 0 20px; }
  .hdr__count { display: none; }
}
@media (max-width: 720px) {
  .hbtn kbd { display: none; }
  .hbtn { padding: 0 8px; }
}
@media (pointer: coarse) {
  .ibtn { width: 40px; height: 40px; }
  .hbtn { height: 40px; }
}
.views { position: fixed; inset: 0; }
.view { position: absolute; inset: 0; visibility: hidden; opacity: 0; }
.view[data-active="true"] { visibility: visible; opacity: 1; transition: opacity var(--d-op) linear; }
.view[data-active="false"] * { animation-play-state: paused !important; }
.view--scroll { overflow-y: auto; overscroll-behavior: contain; }
.view__inner { max-width: 1320px; margin: 0 auto; padding: calc(var(--header-h) + 56px) 40px 160px; }
@media (max-width: 720px) {
  .view__inner { padding: calc(var(--header-h) + 24px) 20px 140px; }
}
.view[data-active="false"] { content-visibility: hidden; }
.views[inert] { content-visibility: hidden; }
.dock {
  --ctl: var(--dock-h);
  --sp: 12px;
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 40;
  transform: translateX(-50%);
  width: min(560px, calc(100vw - 24px));
  height: var(--ctl);
  display: grid; align-items: center; gap: var(--sp);
  grid-template-columns: calc(var(--ctl) * .5) var(--ctl) 1fr var(--ctl) calc(var(--ctl) * .5);
  transition: opacity var(--d-op) linear, transform var(--d-lag) var(--ease-lag); }
.dock[data-hidden="true"] { opacity: 0; transform: translateX(-50%) translateY(16px); pointer-events: none; }
.dock__toggle {
  grid-area: 1 / 2 / 2 / 4; position: relative; height: 100%;
  display: grid; grid-template-columns: repeat(4, 1fr); align-items: center;
  border-radius: var(--r-pill);
  background: var(--glass);
  box-shadow: var(--ring-strong), var(--e2);
  backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%);
  clip-path: inset(-40px -40px -40px -40px round 99px);
  transition: clip-path var(--d-lag) var(--ease-lag), transform var(--d-lag) var(--ease-lag), visibility 0s linear 0s; }
.dock__ind {
  position: absolute; top: 4px; bottom: 4px; left: 0; width: 0;
  border-radius: var(--r-pill); background: var(--fill-primary);
  pointer-events: none; z-index: 0; }
.dock__ind--b { opacity: .18; }
.dock__toggle[data-collapsed="true"] {
  clip-path: inset(0 calc(100% - var(--ctl)) 0 0 round 99px);
  transform: translateX(calc(-1 * (var(--ctl) + var(--sp))));
  visibility: hidden;
  transition: clip-path var(--d-lag) var(--ease-lag), transform var(--d-lag) var(--ease-lag), visibility 0s linear 200ms; }
.seg {
  position: relative; z-index: 1; height: 100%;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font: var(--t-ui); font-weight: var(--w-label); color: var(--ink2); white-space: nowrap;
  transition: color 150ms; }
@media (hover: hover) {
  .seg:is(:hover, [data-hover]) { color: var(--ink); }
}
.seg[aria-selected="true"] { color: var(--on-primary); transition: none; }
.seg svg { width: 14px; height: 14px; flex: none; }
.dock__search { grid-area: 1 / 2 / 2 / 6; position: relative; height: 100%; pointer-events: none; }
.dock__form {
  position: relative; width: 100%; height: 100%; pointer-events: auto;
  display: grid; grid-template-columns: var(--ctl) 1fr; align-items: center;
  border-radius: var(--r-pill);
  background: var(--glass);
  box-shadow: var(--ring-strong), var(--e2);
  backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%);
  clip-path: inset(-40px round 99px);
  transition: clip-path var(--d-lag) var(--ease-lag), transform var(--d-lag) var(--ease-lag); }
.dock__search[data-collapsed="true"] .dock__form {
  clip-path: inset(0 calc(100% - var(--ctl)) 0 0 round 99px);
  transform: translateX(calc(100% - var(--ctl))); }
.dock__icon { display: grid; place-items: center; height: 100%; color: var(--ink2); }
.dock__icon svg { width: 16px; height: 16px; }
.dock__search[data-collapsed="false"] .dock__icon { color: var(--ink); }
.dock__field { position: relative; min-width: 0; height: 100%; display: flex; align-items: center; padding-right: 64px; }
.dock__input { width: 100%; height: 100%; background: none; border: 0; outline: none; padding: 0; font: var(--t-body); color: var(--ink); position: relative; z-index: 2; }
.dock__input::placeholder { color: transparent; }
.dock__ghost { position: absolute; inset: 0 64px 0 0; display: flex; align-items: center; pointer-events: none; z-index: 1; white-space: nowrap; overflow: hidden; font: var(--t-body); color: var(--ink3); }
.dock__ghost span { color: var(--ink2); }
.dock__ghost::after { content: ""; width: 1px; height: 18px; background: var(--ink); margin-left: 1px; }
.dock__ghost[data-on="false"] { visibility: hidden; }
.dock__enter {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border-radius: var(--r-pill); display: grid; place-items: center;
  background: var(--fill-primary); color: var(--on-primary);
  transition: opacity var(--d-op) linear; }
.dock__enter svg { width: 14px; height: 14px; }
.dock__search[data-collapsed="true"] .dock__enter { opacity: 0; }
.dock__close {
  position: absolute; left: calc(-1 * (var(--ctl) + var(--sp))); top: 0;
  width: var(--ctl); height: var(--ctl); border-radius: var(--r-pill);
  display: grid; place-items: center; pointer-events: auto;
  background: var(--fill-primary); color: var(--on-primary);
  box-shadow: var(--e2);
  transition: opacity var(--d-op) linear 120ms, transform var(--d-lag) var(--ease-lag); }
.dock__close svg { width: 14px; height: 14px; }
.dock__search[data-collapsed="true"] .dock__close { opacity: 0; transform: translateX(120px); visibility: hidden; transition: opacity 30ms linear, transform var(--d-lag) var(--ease-lag), visibility 0s linear var(--d-lag); }
@media (max-width: 720px) {
  .seg span { display: none; }
}
.dock__input:focus-visible { box-shadow: none; }
.palette__scroll { max-height: min(46vh, 380px); overflow-y: auto; padding: 6px; }
.palette__group { padding: 10px 10px 6px; font: var(--t-meta); color: var(--ink3); }
.palette__row { display: flex; align-items: center; gap: 12px; width: 100%; height: 36px; padding: 0 10px; border-radius: var(--r); text-align: left; color: var(--ink); }
.palette__row[data-cursor="true"] { background: var(--r-s); }
.palette__row .ico { width: 16px; height: 16px; color: var(--ink3); flex: none; }
.palette__name { font: var(--t-ui); font-weight: var(--w-label); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette__name mark { background: none; color: var(--text-accent); }
.palette__meta { font: var(--t-meta); color: var(--ink3); flex: none; }
.palette__empty { padding: 28px 16px; text-align: center; color: var(--ink3); font: var(--t-ui); }
.palette__foot { display: flex; align-items: center; gap: 16px; padding: 9px 14px; border-top: var(--hair) solid var(--line2); color: var(--ink3); font: var(--t-meta); }
.palette__foot span { display: flex; align-items: center; gap: 6px; }
kbd.key {
  display: inline-block; text-align: center; font-family: var(--font); font-weight: var(--w-label); letter-spacing: 0; color: var(--ink2);
  background: var(--key-bg); box-shadow: inset 0 -2px 0 var(--key-lip), 0 0 0 1px var(--key-ring);
  min-width: 22px; padding: 2px 6px 4px; border-radius: 6px; font-size: 12px; line-height: 16px;
  transition: transform .09s cubic-bezier(.25,.46,.45,.94), box-shadow .09s cubic-bezier(.25,.46,.45,.94), background .09s; }
kbd.key.sm { min-width: 18px; padding: 0 4px 2px; border-radius: 5px; font-size: 11px; line-height: 15px; box-shadow: inset 0 -1.5px 0 var(--key-lip), 0 0 0 1px var(--key-ring); }
kbd.key[data-down] { transform: translateY(1px); background: var(--key-down); box-shadow: inset 0 0 0 var(--key-lip), 0 0 0 1px var(--key-ring); color: var(--ink); transition: none; }
.toast {
  position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); z-index: 90;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px;
  border-radius: var(--r-pill); background: var(--tooltip-bg); color: var(--tooltip-fg);
  font: var(--t-ui); box-shadow: var(--e2); pointer-events: none; }
.toast svg { width: 14px; height: 14px; }
.badge {
  display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 7px;
  border-radius: var(--r-mark); font: var(--w-label) 12px/1 var(--font); letter-spacing: 0; white-space: nowrap;
  background: var(--pill); color: var(--ink2); vertical-align: middle; }
.badge i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.badge[data-k="accent"] { background: var(--b-accent-bg); color: var(--b-accent-fg); }
.badge[data-k="info"] { background: var(--b-info-bg); color: var(--b-info-fg); }
.badge[data-k="danger"] { background: var(--b-danger-bg); color: var(--b-danger-fg); }
.badge[data-k="success"] { background: var(--b-success-bg); color: var(--b-success-fg); }
.badge[data-k="warning"] { background: var(--b-warning-bg); color: var(--b-warning-fg); }
.badge[data-k="orange"] { background: var(--b-orange-bg); color: var(--b-orange-fg); }
.badge[data-k="aqua"] { background: var(--b-aqua-bg); color: var(--b-aqua-fg); }
.badge[data-k="magenta"] { background: var(--b-magenta-bg); color: var(--b-magenta-fg); }
.x-ilabel { display: inline-block; padding: 0 5px; border-radius: var(--r-mark); font-weight: var(--w-label); color: var(--b-accent-fg); background: var(--b-accent-bg); line-height: 22px; }
.intro {
  position: absolute; left: 50%; top: 50%; z-index: 2;
  width: min(460px, calc(100vw - 32px));
  transform: translate(-50%, -50%);
  padding: 32px 32px 28px;
  border-radius: var(--r-contain);
  background: var(--glass);
  backdrop-filter: blur(24px) saturate(140%); -webkit-backdrop-filter: blur(24px) saturate(140%);
  box-shadow: var(--ring-strong), var(--e3); }
.intro__mark { width: 50px; height: 26px; color: var(--ink); margin-bottom: 28px; }
.intro__title { font: var(--t-title); letter-spacing: -0.022em; }
.intro__text { font: var(--t-body); color: var(--ink2); margin-top: 12px; }
.intro__stats { display: flex; gap: 24px; margin-top: 20px; padding-top: 16px; border-top: var(--hair) solid var(--line2); }
.intro__stats div { display: flex; flex-direction: column; }
.intro__stats b { font: var(--t-head); font-variant-numeric: tabular-nums; font-weight: var(--w-head); }
.intro__stats span { font: var(--t-meta); color: var(--ink2); }
.intro__actions { display: flex; align-items: center; gap: 8px; margin-top: 24px; }
@media (max-width: 720px) {
  .intro { padding: 24px 22px 22px; }
}
.menu-wrap { position: relative; }
.optmenu {
  position: absolute; top: calc(100% + 8px); right: 0; width: 304px;
  background: var(--raised); border-radius: 12px; box-shadow: var(--pop), var(--e2);
  z-index: 50; transform-origin: top right; }
.optmenu[data-open="false"] { opacity: 0; transform: scale(.98); visibility: hidden; pointer-events: none; transition: opacity 30ms linear, visibility 0s linear 30ms; }
.optmenu[data-open="true"] { opacity: 1; transform: none; transition: opacity 30ms linear, transform var(--d-lag) var(--ease-lag); }
:root[data-theme="dark"] .optmenu:not([data-scheme="light"] *), [data-scheme="dark"][data-scheme] .optmenu { background: var(--surface-3); }
.optmenu__section { display: flex; flex-direction: column; padding: 8px 16px; }
.optmenu__section + .optmenu__section { border-top: .5px solid var(--line2); }
.optrow { display: flex; height: 32px; min-height: 32px; }
.optrow__label { display: flex; align-items: center; font-size: 12px; font-weight: var(--w-label); line-height: normal; color: var(--ink2); white-space: nowrap; }
.optrow__control { flex: 1 1 auto; display: flex; align-items: center; justify-content: flex-end; }
.optselect-wrap { position: relative; display: flex; height: 26px; }
.optselect {
  position: relative; display: flex; align-items: center; width: 120px; height: 24px; margin: 1px 0 0;
  padding: 1px 20px 1px 8px; border: .5px solid transparent; border-radius: 8px;
  background-color: var(--raised); color: var(--ink); font-size: 12px; font-weight: var(--w-ui); line-height: normal; text-align: left;
  transition: color 150ms; }
.optselect::after { content: ""; position: absolute; inset: 0; border-radius: 8px; pointer-events: none; box-shadow: var(--lift); transition: box-shadow .15s; }
.optselect[aria-expanded="true"] { background-color: var(--r-h); color: var(--ink); transition: none; }
@media (hover: hover) {
  .optselect:is(:hover, [data-hover]) { background-color: var(--r-h); color: var(--ink); transition: none; }
}
.optselect:focus-visible { border-radius: 8px; }
.optselect__text { font-weight: var(--w-ui); flex: 0 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.optselect__chevron { position: absolute; right: 7px; top: 0; width: 8px; height: 23px; display: flex; align-items: center; color: var(--ink2); }
.optselect__chevron svg { width: 8px; height: 5px; }
.optselect--action { justify-content: space-between; padding-right: 8px; }
.optselect__keys { display: flex; gap: 3px; }
:root[data-theme="dark"] .optselect:not([data-scheme="light"] *), [data-scheme="dark"][data-scheme] .optselect { background-color: var(--gray-750); }
:root[data-theme="dark"] .optselect:not([data-scheme="light"] *)::after, [data-scheme="dark"][data-scheme] .optselect::after { box-shadow: 0 0 0 .5px oklch(from var(--neutral-900) l c h / 14.8%), 0 .5px 1px 1px rgba(0,0,0,.3); }
:root[data-theme="dark"] .optselect[aria-expanded="true"]:not([data-scheme="light"] *), [data-scheme="dark"][data-scheme] .optselect[aria-expanded="true"] { background-color: var(--gray-700); }
@media (hover: hover) {
  :root[data-theme="dark"] .optselect:is(:hover, [data-hover]):not([data-scheme="light"] *), [data-scheme="dark"][data-scheme] .optselect:is(:hover, [data-hover]) { background-color: var(--gray-700); }
}
.opttoggle {
  position: relative; appearance: none; -webkit-appearance: none; width: 22px; height: 14px; margin: 0; border: 0;
  border-radius: 72px; background-color: var(--neutral-200); outline: none; cursor: default;
  transition: background-color 150ms linear, opacity .15s ease-out; }
.opttoggle::before { content: ""; position: absolute; inset: -6px; }
.opttoggle::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; border-radius: 5px;
  background-color: var(--raised); transition: transform var(--d-tau) var(--ease-tau); }
.opttoggle:checked { background-color: var(--ink); }
.opttoggle:checked::after { transform: translateX(8px); }
.opttoggle:focus-visible { box-shadow: var(--focus-shadow); }
:root[data-theme="dark"] .opttoggle:not([data-scheme="light"] *), [data-scheme="dark"][data-scheme] .opttoggle { background-color: var(--gray-500); }
:root[data-theme="dark"] .opttoggle:not([data-scheme="light"] *)::after, [data-scheme="dark"][data-scheme] .opttoggle::after { background-color: var(--gray-50); }
:root[data-theme="dark"] .opttoggle:checked:not([data-scheme="light"] *), [data-scheme="dark"][data-scheme] .opttoggle:checked { background-color: var(--ink); }
:root[data-theme="dark"] .opttoggle:checked:not([data-scheme="light"] *)::after, [data-scheme="dark"][data-scheme] .opttoggle:checked::after { background-color: var(--surface-3); }
.optpop { position: absolute; top: calc(100% + 4px); right: 0; z-index: 10; transform-origin: top right; opacity: 0; transform: scale(.98); pointer-events: none; visibility: hidden; transition: opacity 30ms linear, visibility 0s linear 30ms; }
.optpop.is-open { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition: opacity var(--d-op) linear, transform var(--d-tau) var(--ease-tau); }
.optlistpop { min-width: 120px; background-color: var(--mat); border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 .5px var(--alpha-3), 0 6px 18px rgba(0,0,0,.02), 0 3px 9px rgba(0,0,0,.04), 0 1px 1px rgba(0,0,0,.04); }
:root[data-theme="dark"] .optlistpop:not([data-scheme="light"] *), [data-scheme="dark"][data-scheme] .optlistpop { background: var(--gray-870); box-shadow: 0 0 0 .5px var(--alpha-3), 0 3px 8px rgba(0,0,0,.125), 0 2px 5px rgba(0,0,0,.125), 0 1px 1px rgba(0,0,0,.125); }
.optlistpop__list { padding: 4px 0; }
.optitem { position: relative; display: flex; align-items: center; height: 24px; padding: 0 34px 0 12px; font-size: 12px; font-weight: var(--w-ui); line-height: 18px; color: var(--ink); white-space: nowrap; width: 100%; }
.optitem::before { content: ""; position: absolute; inset: 0 4px; border-radius: 8px; }
.optitem[data-cursor="true"]::before { background-color: var(--state-mat-hover); }
@media (hover: hover) {
  .optitem:is(:hover, [data-hover])::before { background-color: var(--state-mat-hover); }
}
:root[data-theme="dark"] .optitem[data-cursor="true"]:not([data-scheme="light"] *)::before, [data-scheme="dark"][data-scheme] .optitem[data-cursor="true"]::before { background-color: var(--alpha-3); }
@media (hover: hover) {
  :root[data-theme="dark"] .optitem:is(:hover, [data-hover]):not([data-scheme="light"] *)::before, [data-scheme="dark"][data-scheme] .optitem:is(:hover, [data-hover])::before { background-color: var(--alpha-3); }
}
.optitem__text { position: relative; }
.optitem__check { position: absolute; right: 10px; top: 5px; width: 14px; height: 14px; display: none; align-items: center; justify-content: center; color: var(--ink2); }
.optitem[aria-selected="true"] .optitem__check { display: flex; }
.optitem__check svg { width: 14px; height: 14px; }
.skip { position: fixed; left: 12px; top: 12px; z-index: 100; padding: 8px 12px; border-radius: var(--r); background: var(--fill-primary); color: var(--on-primary); font: var(--t-ui); font-weight: var(--w-label); transform: translateY(-160%); }
.skip:focus-visible { transform: none; box-shadow: var(--focus-shadow); }
.x-btn {
  --h: 32px; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--h); padding: 0 14px; border-radius: var(--r-press);
  font: var(--t-ui); font-weight: var(--w-label); white-space: nowrap;
  background: var(--fill-primary); color: var(--on-primary); }
.x-btn[data-s="small"] { --h: 28px; padding: 0 12px; font-size: 12px; }
.x-btn[data-s="large"] { --h: 40px; padding: 0 18px; font-size: 14px; }
@media (hover: hover) {
  .x-btn:is(:hover, [data-hover]) { background: var(--fill-primary-hover); }
}
.x-btn[data-v="secondary"] { background: var(--raised); color: var(--ink); box-shadow: var(--lift); }
@media (hover: hover) {
  .x-btn[data-v="secondary"]:is(:hover, [data-hover]) { background: var(--r-h); }
}
.x-btn[data-v="ghost"] { background: none; color: var(--ink2); }
@media (hover: hover) {
  .x-btn[data-v="ghost"]:is(:hover, [data-hover]) { background: var(--fill-ghost-hover); color: var(--ink); }
}
.x-btn[data-v="accent"] { background: var(--fill-accent); color: var(--on-accent); }
@media (hover: hover) {
  .x-btn[data-v="accent"]:is(:hover, [data-hover]) { background: var(--fill-accent-hover); }
}
.x-btn[data-v="danger"] { background: var(--fill-danger); color: var(--on-danger); }
.x-btn:is(:active, [data-active]):not(:disabled) { transform: translateY(1px); }
.x-btn:disabled { opacity: .45; }
.x-btn .key { margin-right: -4px; }
.x-seg { position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: auto; gap: 4px; padding: 0; border-radius: var(--r-press); background: none; }
.x-seg__thumb { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: var(--r-press); background: var(--pill); }
:root[data-theme="dark"] .x-seg__thumb:not([data-scheme="light"] *), [data-scheme="dark"][data-scheme] .x-seg__thumb { background: var(--alpha-2); }
.x-seg button { position: relative; height: 28px; padding: 0 12px; border-radius: var(--r-press); font: var(--t-ui); font-weight: var(--w-label); color: var(--ink2); transition: color 150ms; }
@media (hover: hover) {
  .x-seg button:is(:hover, [data-hover]):not([aria-selected="true"]):not([data-on="true"]) { background: var(--fill-ghost-hover); color: var(--ink); transition: none; }
}
.x-seg button[data-on="true"] { color: var(--ink); transition: none; }
@view-transition { navigation: auto; }
.hdr__logo svg { view-transition-name: ramtt-r; }
.rmenu {
  position: fixed; left: 0; top: 0; z-index: 90;
  padding: 6px; overflow: hidden;
  border-radius: 12px; background: var(--raised);
  box-shadow: var(--ring-strong), var(--e2);
  opacity: 0; pointer-events: none; visibility: hidden; }
:root[data-theme="dark"] .rmenu:not([data-scheme="light"] *), [data-scheme="dark"][data-scheme] .rmenu { background: var(--surface-3); }
.rmenu[data-on="true"] { opacity: 1; pointer-events: auto; visibility: visible; transition: opacity var(--d-op) linear; }
.rmenu[data-on="false"] { transition: opacity 120ms linear, visibility 0s linear 120ms; }
.rmenu__head { height: var(--bh, 36px); display: flex; align-items: center; }
.rmenu__r { width: var(--bw, 44px); height: var(--bh, 36px); display: grid; place-items: center; color: var(--ink); flex: none; }
.rmenu__r svg { width: var(--sw, 42px); height: var(--sh, 22px); }
.rmenu__in { width: var(--rw, 308px); padding-top: 4px; }
.rmenu__in[data-st="in"] { opacity: 1; transition: opacity var(--d-op) linear 60ms; }
.rmenu__in[data-st="out"] { opacity: 0; transition: opacity 30ms linear; }
.rmenu__row { display: flex; align-items: center; gap: 12px; width: 100%; height: 52px; padding: 0 8px; border-radius: var(--r); text-align: left; color: var(--ink); }
.rmenu__row[data-cursor="true"] { background: var(--r-h); }
:root[data-theme="dark"] .rmenu__row[data-cursor="true"]:not([data-scheme="light"] *), [data-scheme="dark"][data-scheme] .rmenu__row[data-cursor="true"] { background: var(--alpha-2); }
.rmenu__row[aria-current="page"] { background: var(--bg-accent); }
.rmenu__row[aria-current="page"] .rmenu__t b, .rmenu__row[aria-current="page"] .rmenu__on { color: var(--text-accent); }
.rmenu__row:focus-visible { box-shadow: var(--focus-shadow); }
.rmenu__ri { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: var(--r); background: var(--well); color: var(--ink2); }
.rmenu__ri svg { width: 15px; height: 15px; }
.rmenu__row[aria-current="page"] .rmenu__ri { background: var(--raised); color: var(--text-accent); }
:root[data-theme="dark"] .rmenu__row[aria-current="page"] .rmenu__ri:not([data-scheme="light"] *), [data-scheme="dark"][data-scheme] .rmenu__row[aria-current="page"] .rmenu__ri { background: var(--alpha-2); }
.rmenu__t { flex: 1; min-width: 0; }
.rmenu__t b { display: block; font: var(--t-ui); font-weight: var(--w-label); }
.rmenu__t em { display: block; font: var(--t-meta); font-style: normal; color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rmenu__on { width: 16px; height: 16px; flex: none; }
.rmenu__foot { display: flex; align-items: center; gap: 16px; margin: 6px -6px -6px; padding: 9px 14px; border-top: var(--hair) solid var(--line2); color: var(--ink3); font: var(--t-meta); }
.rmenu__foot span { display: flex; align-items: center; gap: 6px; }
@media (pointer: coarse) {
  .rmenu__foot { display: none; }
  .rmenu__row { height: 56px; }
}
.hdr__logo[aria-expanded="true"] { background: none; }
ul { margin: 0; padding: 0; }
ul { list-style: none; }
select { font: inherit; color: inherit; letter-spacing: inherit; }
.ibtn--sm { width: 28px; height: 28px; }
.ibtn--sm svg { width: 16px; height: 16px; }
.view__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px; margin-bottom: 40px; }
.view__title { font: var(--t-title); letter-spacing: -0.022em; }
.view__lede { font: var(--t-body); color: var(--ink2); max-width: 560px; margin-top: 10px; }
.view__aside { font: var(--t-ui); color: var(--ink3); }
.dock__ghost[data-blink="true"]::after { animation: blink .5s steps(1) infinite alternate; }
@keyframes blink { to { opacity: 0; } }
.palette {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 12px);
  border-radius: var(--r-lg); overflow: hidden;
  background: var(--raised);
  box-shadow: var(--ring-strong), var(--e3);
  transform-origin: 50% 100%; }
.palette[data-open="false"] { opacity: 0; transform: scale(.98); visibility: hidden; pointer-events: none; transition: opacity 30ms linear, visibility 0s linear 30ms; }
.palette[data-open="true"] { opacity: 1; transform: none; pointer-events: auto; transition: opacity var(--d-op) linear, transform var(--d-lag) var(--ease-lag); }
kbd.key.lg { min-width: 40px; padding: 7px 12px 10px; border-radius: 9px; font-size: 15px; line-height: 20px; box-shadow: inset 0 -3px 0 var(--key-lip), 0 0 0 1px var(--key-ring); }
kbd.key.lg[data-down] { transform: translateY(2px); }
@media (max-width: 720px) {
  .view__head { grid-template-columns: 1fr; margin-bottom: 28px; }
  .view__title { font-size: 26px; line-height: 32px; }
}
html[data-deep] .field { visibility: hidden; opacity: 0; transition: none; }
.plate { position: relative; display: flex; flex-direction: column; min-width: 0; }
.plate__stage {
  position: relative; flex: 1; min-height: 0;
  display: grid; place-items: center; overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--raised);
  box-shadow: var(--ring);
  padding: 20px; }
.plate__stage[data-surface="mat"] { background: var(--mat); }
.plate__stage[data-surface="ground"] { background: var(--ground); }
.plate__stage[data-surface="paper"] { background: var(--paper); }
.plate__stage > * { max-width: 100%; }
.plate__stage, .stage__frame, .peek__stage { container-type: inline-size; }
.plate__cap { display: flex; align-items: baseline; gap: 10px; padding: 10px 2px 0; min-width: 0; }
.plate__name { font: var(--t-ui); font-weight: var(--w-label); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plate__group { font: var(--t-ui); color: var(--ink3); white-space: nowrap; }
.plate__status { margin-left: auto; flex: none; }
.plate__open {
  position: absolute; top: 8px; right: 8px; z-index: 3;
  width: 28px; height: 28px; display: grid; place-items: center;
  border-radius: var(--r-press); color: var(--ink2);
  background: var(--glass);
  box-shadow: var(--ring-strong);
  opacity: 0; }
.plate__open svg { width: 14px; height: 14px; }
.plate__open:focus-visible { opacity: 1; }
@media (hover: hover) {
  .plate:is(:hover, [data-hover]) .plate__open { opacity: 1; }
}
@media (hover: hover) {
  .plate__open:is(:hover, [data-hover]) { color: var(--ink); background: var(--r-h); }
}
.plate[data-lit="true"] .plate__stage { box-shadow: 0 0 0 1px var(--fill-accent); }
.field {
  position: fixed; inset: 0; z-index: 60; overflow: hidden;
  background: var(--ground);
  touch-action: none; }
.field[data-open="false"] { visibility: hidden; opacity: 0; pointer-events: none; transition: opacity 120ms linear, visibility 0s linear 120ms; }
.field[data-open="true"] { visibility: visible; opacity: 1; transition: opacity var(--d-op) linear; }
.field__world { position: absolute; left: 0; top: 0; will-change: transform; }
.field__tile {
  position: absolute; left: 0; top: 0;
  border-radius: var(--r-lg); overflow: hidden;
  background: var(--raised); box-shadow: var(--ring);
  display: grid; place-items: center;
  contain: strict; }
.field__tile > .field__inner { pointer-events: none; display: grid; place-items: center; position: absolute; left: 0; top: 0; width: 320px; height: 320px; padding: 24px; transform: scale(var(--k, .8)); transform-origin: 0 0; }
.field__tile > .field__label {
  position: absolute; left: 12px; bottom: 10px; right: 12px;
  font: var(--t-meta); color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; transition: opacity 150ms; }
@media (hover: hover) {
  .field__tile:is(:hover, [data-hover]) > .field__label { opacity: 1; transition: none; }
}
.field__veil { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 70% 60% at 50% 50%, transparent 40%, color-mix(in oklch, var(--ground) 70%, transparent) 100%); }
.intro__hint { font: var(--t-meta); color: var(--ink3); margin-left: auto; display: flex; align-items: center; gap: 6px; }
.field__host { display: contents; }
.canvas { position: absolute; inset: 0; overflow: hidden; touch-action: none; background: var(--paper); }
.canvas__world { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.canvas__dots {
  position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background-image: radial-gradient(circle at 1px 1px, var(--alpha-3) 1px, transparent 1.2px); }
.region { position: absolute; }
.region .plate { position: absolute; }
.canvas[data-dragging="true"] .plate { pointer-events: none; }
.zoom {
  position: absolute; right: 20px; top: calc(var(--header-h) + 8px); z-index: 5;
  display: flex; align-items: center; gap: 2px; padding: 3px;
  border-radius: var(--r-pill); background: var(--glass);
  box-shadow: var(--ring-strong), var(--e1);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.zoom .ibtn { width: 28px; height: 28px; border-radius: var(--r-pill); }
.zoom .ibtn svg { width: 14px; height: 14px; }
.zoom__val { min-width: 48px; text-align: center; font: var(--t-meta); font-variant-numeric: tabular-nums; color: var(--ink2); }
.minimap {
  position: absolute; right: 20px; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 5;
  width: 184px; height: 124px; border-radius: var(--r);
  background: color-mix(in oklch, var(--raised) 90%, transparent);
  box-shadow: var(--ring-strong), var(--e1);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  overflow: hidden; }
.minimap canvas { width: 100%; height: 100%; }
@media (max-width: 720px) {
  .minimap, .zoom__val { display: none; }
}
.filter { position: relative; width: min(340px, 100%); }
.filter__box {
  display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 6px 0 12px;
  border-radius: var(--r); background: var(--raised); box-shadow: var(--ring-strong); }
.filter__box:focus-within { box-shadow: var(--focus-shadow); }
.filter__box svg { width: 15px; height: 15px; color: var(--ink3); flex: none; }
.filter__input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; outline: none; font: var(--t-ui); color: var(--ink); }
.filter__input::placeholder { color: var(--ink3); }
.filter__clear { width: 24px; height: 24px; display: grid; place-items: center; border-radius: var(--r-press); color: var(--ink3); }
@media (hover: hover) {
  .filter__clear:is(:hover, [data-hover]) { background: var(--fill-ghost-hover); color: var(--ink); }
}
.filter__clear svg { width: 12px; height: 12px; }
.filter__menu {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 10;
  padding: 4px 0; border-radius: var(--r-lg); background: var(--mat);
  box-shadow: 0 0 0 .5px var(--alpha-3), var(--e2);
  transform-origin: 16px 0; }
.filter__menu[data-open="false"] { opacity: 0; transform: scale(.98); visibility: hidden; pointer-events: none; transition: opacity 30ms linear, visibility 0s linear 30ms; }
.filter__menu[data-open="true"] { transition: opacity 30ms linear, transform var(--d-lag) var(--ease-lag); }
.filter__row { position: relative; display: flex; align-items: center; justify-content: space-between; height: 30px; padding: 0 14px; font: var(--t-ui); color: var(--ink); }
.filter__row::before { content: ""; position: absolute; inset: 0 4px; border-radius: var(--r); }
.filter__row[data-cursor="true"]::before { background: var(--state-mat-hover); }
@media (hover: hover) {
  .filter__row:is(:hover, [data-hover])::before { background: var(--state-mat-hover); }
}
:root[data-theme="dark"] .filter__row[data-cursor="true"]:not([data-scheme="light"] *)::before, [data-scheme="dark"][data-scheme] .filter__row[data-cursor="true"]::before { background: var(--alpha-2); }
@media (hover: hover) {
  :root[data-theme="dark"] .filter__row:is(:hover, [data-hover]):not([data-scheme="light"] *)::before, [data-scheme="dark"][data-scheme] .filter__row:is(:hover, [data-hover])::before { background: var(--alpha-2); }
}
.filter__row > * { position: relative; }
.filter__row .num { color: var(--ink3); font: var(--t-meta); font-variant-numeric: tabular-nums; }
.filter__empty { padding: 10px 14px; color: var(--ink3); font: var(--t-ui); }
.filter__row[aria-selected="true"] { color: var(--text-accent); }
.masonry { display: flex; gap: 20px; align-items: flex-start; }
.masonry__col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.masonry .plate__stage { min-height: 180px; }
.masonry[data-leaving="true"] { opacity: 0; transition: opacity 90ms linear; }
.gallery__empty { padding: 80px 0; text-align: center; color: var(--ink3); font: var(--t-ui); }
.gallery__count { font: var(--t-ui); color: var(--ink3); }
.filter__input:focus-visible { box-shadow: none; }
.index { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; align-items: start; }
.tbl { width: 100%; border-collapse: collapse; font: var(--t-ui); }
.tbl th {
  height: 36px; padding: 0 12px; text-align: left; font: var(--t-meta); font-weight: var(--w-label); color: var(--ink3);
  border-bottom: var(--hair) solid var(--line2); white-space: nowrap; user-select: none; }
.tbl th button { display: inline-flex; align-items: center; gap: 4px; height: 24px; margin: 0 -8px; padding: 0 8px; border-radius: var(--r-press); }
@media (hover: hover) {
  .tbl th button:is(:hover, [data-hover]) { background: var(--fill-ghost-hover); color: var(--ink); }
}
.tbl th button svg { width: 10px; height: 10px; opacity: 0; }
.tbl th[aria-sort] button svg { opacity: 1; }
.tbl th[aria-sort="descending"] button svg { transform: rotate(180deg); }
.tbl td { height: 44px; padding: 0 12px; border-bottom: var(--hair) solid var(--line); white-space: nowrap; color: var(--ink2); }
.tbl td:first-child { color: var(--ink); font-weight: var(--w-label); }
.tbl td.num, .tbl th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl tbody tr[data-cursor="true"] td { background: var(--p-h); }
.tbl tbody tr[data-cursor="true"] td:first-child { border-radius: var(--r) 0 0 var(--r); }
.tbl tbody tr[data-cursor="true"] td:last-child { border-radius: 0 var(--r) var(--r) 0; }
.tbl tr.grp td { height: 52px; vertical-align: bottom; padding-bottom: 8px; color: var(--ink); font: var(--t-ui); font-weight: var(--w-label); border-bottom: var(--hair) solid var(--line2); background: none !important; }
.tbl tr.grp td span { color: var(--ink3); font-weight: var(--w-ui); margin-left: 8px; font-variant-numeric: tabular-nums; }
.peek { position: sticky; top: calc(var(--header-h) + 24px); height: 0; }
.peek__card {
  position: absolute; left: 0; right: 0; top: 0;
  border-radius: var(--r-lg); background: var(--raised);
  box-shadow: var(--ring-strong), var(--e2);
  opacity: 0; will-change: transform; }
.peek__card[data-on="true"] { opacity: 1; transition: opacity var(--d-op) linear; }
.peek__card[data-on="false"] { transition: opacity 120ms linear; }
.peek__stage { height: 220px; display: grid; place-items: center; padding: 20px; border-radius: var(--r-lg) var(--r-lg) 0 0; background: var(--mat); overflow: hidden; }
.peek__meta { padding: 12px 16px 14px; border-top: var(--hair) solid var(--line2); }
.peek__name { font: var(--t-ui); font-weight: var(--w-label); }
.peek__note { font: var(--t-ui); color: var(--ink3); margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tblwrap { min-width: 0; overflow-x: auto; }
.peek__host { display: contents; }
@media (max-width: 960px) {
  .index { grid-template-columns: 1fr; }
  .peek { display: none; }
}
@media (max-width: 720px) {
  .tbl .hide-sm { display: none; }
}
.log { max-width: 720px; margin: 0 auto; padding: calc(var(--header-h) + 72px) 32px 50vh; position: relative; }
.log article { position: relative; }
.log article + article { margin-top: 48px; }
.log h2 { font: var(--t-head); letter-spacing: -0.012em; }
.log hr { width: 100%; height: 1px; background: var(--line2); border: 0; margin: 16px 0 0; position: relative; overflow: visible; }
.log hr[data-loading]::after {
  content: ""; width: 50%; height: 1px; position: absolute; top: 0;
  background: linear-gradient(90deg, transparent 0, var(--gray-400) 50%, transparent 100%);
  animation: divider 1.5s ease infinite; }
@keyframes divider { 0% { transform: translateX(0); } 50% { transform: translateX(100%); } 100% { transform: translateX(0); } }
.notes { margin: 0; padding: 0; list-style: none; }
.note { position: relative; }
.log textarea {
  display: block; font: var(--t-body); letter-spacing: -0.011em; width: 100%; background: transparent; border: 0; color: var(--ink);
  resize: none; padding: 0; position: relative; margin-top: 24px; border-radius: 4px; overflow: hidden;
  transition: filter 1.2s var(--ease-tau); }
.log textarea:read-only { cursor: default; }
.log textarea::placeholder { color: var(--ink3); }
.note textarea { padding: 0 4px; margin-left: -4px; margin-right: -4px; }
.note .stamp {
  opacity: 0; color: var(--ink3); font: var(--t-meta); font-variant-numeric: tabular-nums; letter-spacing: 0;
  position: absolute; left: -84px; width: 68px; text-align: right; top: 28px; transition: opacity .2s ease; }
.note textarea[data-active="true"] ~ .stamp, .log[data-stamps="true"] .note .stamp { opacity: 1; }
.log .unblur { filter: blur(0) !important; }
.log .unblur ~ .stamp { opacity: 1; }
.log[data-blur="false"] .note textarea { filter: none !important; }
.root { position: relative; }
#rootField::placeholder { transition: color .15s ease .3s; }
.root[data-vanishing="true"] #rootField::placeholder { color: transparent; transition: none; }
.vanish-canvas { position: absolute; pointer-events: none; transform: scale(.5); transform-origin: top left; z-index: 2; opacity: 0; }
.note-enter { animation: note-in .3s ease both; }
@keyframes note-in { from { opacity: 0; } to { opacity: 1; } }
.findbar {
  position: fixed; top: calc(var(--header-h) + 8px); left: 50%; z-index: 35;
  width: 320px; height: 44px; display: flex; align-items: center; justify-content: space-between;
  background: var(--raised); box-shadow: var(--ring-strong), var(--e2); border-radius: var(--r-lg);
  transform: translate(-50%, -12px) scale(.98); opacity: 0; pointer-events: none;
  transition: opacity 30ms linear, transform var(--d-lag) var(--ease-lag); }
.findbar[data-open="true"] { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; transition: opacity var(--d-op) linear, transform var(--d-lag) var(--ease-lag); }
.findbar input { border: 0; background: 0; outline: 0; flex: 1; min-width: 0; height: 100%; padding: 0 8px 0 14px; font: var(--t-ui); color: var(--ink); }
.findbar input::placeholder { color: var(--ink3); }
.findbar .count { font: var(--t-meta); font-variant-numeric: tabular-nums; color: var(--ink3); padding-right: 10px; }
.findbar .sep { width: .5px; height: 18px; background: var(--line2); }
.findbar .acts { display: flex; align-items: center; gap: 2px; padding: 0 6px; }
.note__refs { position: absolute; left: calc(100% + 20px); top: 24px; width: 168px; display: flex; flex-direction: column; gap: 4px; opacity: 0; transition: opacity 150ms; }
.note:focus-within .note__refs { opacity: 1; transition: none; }
@media (hover: hover) {
  .note:is(:hover, [data-hover]) .note__refs { opacity: 1; transition: none; }
}
.note__ref { display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 8px; border-radius: var(--r-sm); background: var(--pill); color: var(--ink2); font: var(--t-meta); text-align: left; white-space: nowrap; overflow: hidden; }
.note__ref svg { width: 12px; height: 12px; flex: none; }
.note__ref span { overflow: hidden; text-overflow: ellipsis; }
@media (hover: hover) {
  .note__ref:is(:hover, [data-hover]) { background: var(--r-h); color: var(--ink); }
}
@media (max-width: 1180px) {
  .note__refs { position: static; width: auto; flex-direction: row; flex-wrap: wrap; margin-top: 6px; opacity: 1; }
}
@media (max-width: 720px) {
  .log { padding: calc(var(--header-h) + 32px) 20px 50vh; }
  .note .stamp { left: auto; right: 0; top: 24px; width: auto; padding: 2px 6px; border-radius: 6px; background: var(--paper); }
}
.sheet { position: fixed; inset: 0; z-index: 70; visibility: hidden; }
.sheet[data-open="true"] { visibility: visible; }
.sheet__backdrop { position: absolute; inset: 0; background: var(--backdrop); opacity: 0; transition: opacity 200ms linear; }
.sheet[data-open="true"] .sheet__backdrop { opacity: 1; transition: opacity 1s cubic-bezier(.42, 0, 1, 1); }
.sheet__panel {
  position: absolute; inset: 8px 8px 0; border-radius: var(--r-contain) var(--r-contain) 0 0;
  background: var(--paper); box-shadow: var(--e3);
  overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; will-change: transform; }
.sheet__bar {
  position: sticky; top: 0; z-index: 5; height: 56px; padding: 0 16px 0 20px;
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(var(--paper) 70%, color-mix(in oklch, var(--paper) 0%, transparent)); }
.sheet__crumbs { display: flex; align-items: center; gap: 8px; font: var(--t-ui); color: var(--ink3); min-width: 0; }
.sheet__crumbs b { font-weight: var(--w-label); color: var(--ink); }
.sheet__crumbs i { width: 1px; height: 14px; background: var(--line2); transform: rotate(18deg); }
.sheet__nav { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.sheet__body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; max-width: 1280px; margin: 0 auto; padding: 24px 40px 120px; }
.sheet__title { font: var(--t-title); letter-spacing: -0.022em; }
.sheet__lede { font: var(--t-body); color: var(--ink2); margin-top: 10px; max-width: 620px; }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 28px; border-top: var(--hair) solid var(--line2); }
.facts > div { padding: 12px 0 0; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.facts span { font: var(--t-meta); color: var(--ink3); }
.facts b { font: var(--t-ui); font-weight: var(--w-label); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stagebar { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin: 36px 0 12px; }
.stagebar label { font: var(--t-meta); color: var(--ink3); margin-right: 8px; }
.stage {
  position: relative; min-height: 340px; display: grid; place-items: center; padding: 48px 24px;
  border-radius: var(--r-lg); background: var(--raised); box-shadow: var(--ring); overflow: hidden; }
.stage[data-surface="mat"] { background: var(--mat); }
.stage[data-surface="ground"] { background: var(--ground); }
.stage__frame { width: 100%; display: grid; place-items: center; transition: max-width var(--d-lag) var(--ease-lag); }
.sub { display: flex; align-items: baseline; gap: 10px; margin: 48px 0 14px; }
.sub span { font: var(--t-ui); color: var(--ink3); }
.states { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.states .plate__stage { height: 160px; }
.prose { font: var(--t-body); color: var(--ink2); max-width: 640px; }
.prose p + p { margin-top: 14px; }
.rail { position: sticky; top: 56px; align-self: start; display: flex; flex-direction: column; gap: 12px; }
.rail__box { border-radius: var(--r-lg); background: var(--raised); box-shadow: var(--ring); }
.rail__head { display: flex; align-items: center; justify-content: space-between; height: 40px; padding: 0 16px; font: var(--t-meta); font-weight: var(--w-label); color: var(--ink2); }
.rail__body { padding: 4px 16px 12px; }
.rail__box + .rail__box { margin-top: 0; }
.flip { position: fixed; z-index: 69; border-radius: var(--r-lg); background: var(--raised); box-shadow: var(--ring); pointer-events: none; overflow: hidden; will-change: left, top, width, height; }
.flip > * { width: 100%; height: 100%; }
.mlist { display: flex; flex-direction: column; gap: 2px; padding-top: 0; }
.mref { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 8px 8px; margin: 0 -8px; border-radius: var(--r); text-align: left; }
@media (hover: hover) {
  .mref:is(:hover, [data-hover]) { background: var(--r-h); }
}
.mref em { font: var(--t-meta); font-style: normal; color: var(--ink3); }
.mref span { font: var(--t-ui); color: var(--ink2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 960px) {
  .sheet__body { grid-template-columns: 1fr; padding: 16px 20px 120px; }
  .rail { position: static; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 12px; }
}
.optmenu__title { font: var(--t-meta); color: var(--ink3); padding: 6px 0 2px; }
.optcheckpop { min-width: 120px; background-color: var(--mat); border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 .5px var(--alpha-3), 0 6px 18px rgba(0,0,0,.02), 0 3px 9px rgba(0,0,0,.04), 0 1px 1px rgba(0,0,0,.04); }
:root[data-theme="dark"] .optcheckpop:not([data-scheme="light"] *), [data-scheme="dark"][data-scheme] .optcheckpop { background: var(--gray-870); box-shadow: 0 0 0 .5px var(--alpha-3), 0 3px 8px rgba(0,0,0,.125), 0 2px 5px rgba(0,0,0,.125), 0 1px 1px rgba(0,0,0,.125); }
.optcheckpop { width: 175px; }
.optcheckpop__list { display: flex; flex-direction: column; padding: 6px 0; }
.optcitem { position: relative; display: flex; align-items: center; height: 32px; padding: 0 18px 0 14px; font-size: 13px; color: var(--ink); width: 100%; }
.optcitem__bg { position: absolute; inset: 0 6px; border-radius: 8px; }
@media (hover: hover) {
  .optcitem:is(:hover, [data-hover]) .optcitem__bg { background-color: var(--state-mat-hover); }
}
@media (hover: hover) {
  :root[data-theme="dark"] .optcitem:is(:hover, [data-hover]) .optcitem__bg:not([data-scheme="light"] *), [data-scheme="dark"][data-scheme] .optcitem:is(:hover, [data-hover]) .optcitem__bg { background-color: var(--alpha-3); }
}
.optcitem__cb { position: relative; display: flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: var(--r-key); border: 1px solid var(--neutral-400); opacity: 0; transition: opacity .1s; flex: none; }
@media (hover: hover) {
  .optcitem:is(:hover, [data-hover]) .optcitem__cb { opacity: 1; }
}
.optcitem__cb svg { display: none; width: 10px; height: 9px; color: var(--raised); }
.optcitem__cb[data-checked="true"] { opacity: 1; border-color: var(--ink2); background-color: var(--ink2); }
.optcitem__cb[data-checked="true"] svg { display: block; }
:root[data-theme="dark"] .optcitem__cb[data-checked="true"] svg:not([data-scheme="light"] *), [data-scheme="dark"][data-scheme] .optcitem__cb[data-checked="true"] svg { color: var(--surface-3); }
.optcitem__label { position: relative; padding-left: 8px; font-size: 12px; font-weight: var(--w-ui); color: var(--ink); white-space: nowrap; }
.board { position: fixed; inset: 0; z-index: 80; visibility: hidden; }
.board[data-open="true"], .board[data-closing="true"] { visibility: visible; }
.board__backdrop { position: absolute; inset: 0; background: var(--backdrop); opacity: 0; transition: opacity 200ms linear; }
.board[data-open="true"] .board__backdrop { opacity: 1; transition: opacity 1s cubic-bezier(.42, 0, 1, 1); }
.board__grid {
  position: absolute; right: 16px; top: 16px; bottom: 16px; width: min(640px, calc(100vw - 32px));
  display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: min-content; gap: 12px; align-content: start;
  overflow-y: auto; pointer-events: none; }
.board[data-open="true"] .board__grid { pointer-events: auto; }
.w {
  border-radius: var(--r-contain); background: var(--raised); box-shadow: var(--ring-strong), var(--e3);
  padding: 18px 20px; opacity: 0; transform: translateX(96px); min-width: 0; }
.board[data-open="true"] .w { animation: w-in 520ms cubic-bezier(.14,.02,.25,1) forwards; animation-delay: var(--d, 0ms); }
.board[data-closing="true"] .w { opacity: 1; transform: none; animation: w-out 240ms cubic-bezier(.75,0,.83,1) forwards; animation-delay: var(--dout, 0ms); }
@keyframes w-in { 0% { opacity: 0; transform: translateX(96px); } 12% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes w-out { 0% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateX(40px); } }
.w--6 { grid-column: span 6; }
.w--4 { grid-column: span 4; }
.w--3 { grid-column: span 3; }
.w--2 { grid-column: span 2; }
.w__head { display: flex; align-items: center; justify-content: space-between; font: var(--t-meta); color: var(--ink3); margin-bottom: 14px; }
.w__title { font: var(--t-head); letter-spacing: -0.012em; }
.w p { font: var(--t-ui); color: var(--ink2); }
.w p + p { margin-top: 10px; }
.shortcuts { display: grid; grid-template-columns: 1fr auto; gap: 10px 16px; font: var(--t-ui); color: var(--ink2); align-items: center; }
.shortcuts div { display: flex; gap: 4px; justify-content: flex-end; }
.dial { width: 100%; max-width: 132px; aspect-ratio: 1; border-radius: 50%; position: relative; margin: 2px auto 10px; box-shadow: inset 0 0 0 1px var(--line2); background: var(--mat); }
.dial i { position: absolute; left: 50%; top: 6px; width: 1px; height: 5px; margin-left: -.5px; background: var(--ink4); transform-origin: 50% calc(50% * 132 / 5); }
.hand { position: absolute; left: 50%; bottom: 50%; transform-origin: 50% 100%; border-radius: 2px; background: var(--ink); }
.hand--h { width: 2px; height: 24%; margin-left: -1px; }
.hand--m { width: 2px; height: 36%; margin-left: -1px; }
.hand--s { width: 1px; height: 40%; margin-left: -.5px; background: var(--fill-accent); }
.dial__cap { position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; background: var(--ink); border-radius: 50%; }
.clock__time { text-align: center; font: var(--t-head); font-variant-numeric: tabular-nums; }
.stat { display: flex; flex-direction: column; gap: 2px; }
.stat b { font: var(--t-title); font-variant-numeric: tabular-nums; font-weight: var(--w-head); letter-spacing: -0.02em; }
.stat span { font: var(--t-meta); color: var(--ink3); }
.statrow { display: flex; gap: 28px; }
.bar { display: flex; height: 6px; border-radius: 3px; overflow: hidden; gap: 2px; margin-top: 14px; }
.bar span { display: block; height: 100%; }
@media (max-width: 720px) {
  .board__grid { grid-template-columns: repeat(2, 1fr); }
  .w--6, .w--4, .w--3 { grid-column: span 2; }
  .w--2 { grid-column: span 1; }
}
.plate:focus-visible { box-shadow: none; outline: none; }
.plate:focus-visible .plate__stage { box-shadow: 0 0 0 1px var(--fill-accent), 0 0 0 4px color-mix(in oklch, var(--fill-accent) 22%, transparent); }
.plate__ph { width: 40%; max-width: 160px; height: 8px; border-radius: 4px; background: var(--alpha-1); }
.region .plate, .masonry .plate { content-visibility: auto; contain-intrinsic-size: auto 260px; }
.tbl tbody tr:focus-visible { outline: none; box-shadow: none; }
.tbl tbody tr:focus-visible td:first-child { box-shadow: inset 2px 0 0 var(--fill-accent); }
.sheet__grip { display: none; }
@media (hover: none) {
  .plate__open { opacity: 1; }
}
@media (pointer: coarse) {
  .zoom .ibtn { width: 36px; height: 36px; }
}
@media (max-width: 720px) {
  .sheet__panel { inset: 12px 0 0; border-radius: 16px 16px 0 0; }
  .sheet__bar { height: 60px; padding-top: 8px; touch-action: none; }
  .sheet__grip { display: block; position: absolute; left: 50%; top: 7px; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: var(--alpha-3); }
  .sheet__crumbs b { max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .zoom { top: auto; bottom: calc(92px + env(safe-area-inset-bottom, 0px)); right: 12px; }
  .intro__hint { display: none; }
}
.log textarea:focus-visible, .x-vanish textarea:focus-visible, .findbar input:focus-visible, .dock__input:focus-visible, .filter__input:focus-visible, .x-palette__in input:focus-visible, .x-find__bar input:focus-visible, .x-field__input:focus-visible { box-shadow: none; }
@media (max-width: 720px) {
  .hide-sm { display: none !important; }
  .hbtn kbd { display: none; }
  .hbtn { padding: 0 8px; }
}
.x-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; }
.x-err { font: var(--t-ui); color: var(--text-danger); }
.x-avatar { --s: 28px; width: var(--s); height: var(--s); flex: none; display: grid; place-items: center; border-radius: 50%; font: var(--w-label) calc(var(--s) * .38)/1 var(--font); letter-spacing: 0; box-shadow: 0 0 0 2px var(--raised); }
html, body { height: 100%; }
body { overflow: auto; }
#root { min-height: 100%; }
.lib-eng { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); background: var(--paper); }
.lib-eng__bar { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 12px 24px 0; }
.lib-eng__bar:empty { min-height: 24px; padding: 0; }
.lib-eng__field { min-width: 0; display: grid; place-items: center; padding: 24px; }
.lib-eng__field .spec__surface { max-width: calc(100vw - 48px); }
@media (max-width: 820px) {
  .lib-eng__field { padding: 16px; }
  .lib-eng__field .spec__surface { max-width: calc(100vw - 32px); }
}
/* A navigation specimen measures its own body and sets the height of its content from it. Under 820 px the
   specimen's box has no height of its own, so each measure made the content taller: on 2026-10-01 the page of
   Live navigation was 277,152 px high at 375 px. The box keeps a fixed height there. */
@media (max-width: 820px) {
  .lib-eng__field .spec__surface:has(.nv) { height: 440px; min-height: 0; }
}